<bmx-code-diff>

<bmx-code-diff id="ex-diff" language="typescript" original-label="orders.ts (main)" modified-label="orders.ts (proposed)" actions="both" style="--bmx-code-diff-height: 30rem"></bmx-code-diff>

<div class="row" style="margin-block-start: 0.75rem; gap: 0.5rem; flex-wrap: wrap; align-items: center">
  <label><input type="checkbox" id="ex-diff-ws"> Ignore whitespace</label>
  <label><input type="checkbox" id="ex-diff-wrap" checked> Wrap lines</label>
  <bmx-button variant="outline" tone="neutral" id="ex-diff-patch">Show as a patch</bmx-button>
</div>
<p class="note" id="ex-diff-out">F7 and Shift+F7 move between changes. Revert a change, or take it into the original, with the buttons above it.</p>
<pre class="note" id="ex-diff-patch-out" style="white-space: pre-wrap; max-block-size: 16rem; overflow: auto" hidden></pre>

<h3>A patch, without its files</h3>

<p class="note">Give it the output of <code>git diff</code> (or any unified diff): each file and hunk is shown with its line numbers.</p>
<bmx-code-diff id="ex-diff-patch-view" view="unified" style="--bmx-code-diff-height: 20rem"></bmx-code-diff>

<script type="module">
  await customElements.whenDefined('bmx-code-diff');
  const before = `import { round } from './money';

const TAX_RATE = 0.2;

export function orderTotal(lines, discount = 0) {
  let total = 0;
  for (const line of lines) {
    total += line.quantity * line.price;
  }
  const taxed = total * (1 + TAX_RATE);
  return round(taxed - discount);
}

export function lineCount(lines) {
  return lines.length;
}

export const labels = { draft: 'Draft', paid: 'Paid' };
`;
  const after = `import { round } from './money';
import { checkSku } from './sku';

const TAX_RATE = 0.2;

export function orderTotal(lines, discount = 0) {
  let total = 0;
  for (const line of lines) {
    checkSku(line.sku);
    total += line.quantity * line.unitPrice;
  }
  const taxed = total * (1 + TAX_RATE);
  return round(Math.max(0, taxed - discount));
}

export const labels = { draft: 'Draft', paid: 'Paid', refunded: 'Refunded' };
`;
  const diff = document.getElementById('ex-diff');
  diff.original = before;
  diff.modified = after;
  diff.addEventListener('bmxCodeDiffChange', e => {
    document.getElementById('ex-diff-out').textContent = e.detail.action === 'revert' ? 'Reverted in the proposed text.' : 'Taken into the original.';
  });
  document.getElementById('ex-diff-ws').addEventListener('change', e => (diff.ignoreWhitespace = e.target.checked ? 'all' : 'none'));
  document.getElementById('ex-diff-wrap').addEventListener('change', e => (diff.wrap = e.target.checked));
  document.getElementById('ex-diff-patch').addEventListener('click', async () => {
    const out = document.getElementById('ex-diff-patch-out');
    out.hidden = false;
    out.textContent = await diff.toPatch();
  });

  document.getElementById('ex-diff-patch-view').patch = `diff --git a/src/store.py b/src/store.py
index 3b18e51..a9c2f04 100644
--- a/src/store.py
+++ b/src/store.py
@@ -10,7 +10,8 @@ def load(path):
     with open(path) as f:
-        data = json.load(f)
+        data = json.load(f, strict=False)
+        log.info("loaded %s", path)
     return data
 
 
@@ -40,3 +41,3 @@ class Store:
     def save(self):
-        self.flush()
+        self.flush(sync=True)
diff --git a/README.md b/README.md
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
-# Store
+# Store service
 
 Keeps orders until they are paid.
`;
</script>