Bench Sync <mv-bench-sync>

node scripts/add.mjs bench-sync --out ./src/marvelous

<mv-bench-sync persist="notes"></mv-bench-sync>
<script type="module">
  await customElements.whenDefined("mv-bench-sync"); const bench = document.querySelector("mv-bench-sync");
  bench.sync = (changes) => fetch("/api/sync", { method: "POST", body: JSON.stringify(changes) }).then((r) => { if (!r.ok) throw r; });
  bench.queue({ entity: "note", key: "title", label: "Title → Q3 plan" }); // on every local edit
</script>

<div id="bs-demo" style="width:min(100%,68rem);margin-inline:auto">
  <style>
    #bs-demo .bs-layout { display:grid; grid-template-columns:minmax(0,1fr) 23.5rem; gap:1.25rem; align-items:start }
    #bs-demo .bs-app { border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm); overflow:hidden }
    #bs-demo .bs-bar { display:flex; align-items:center; gap:.875rem; height:3.5rem; padding:0 .875rem 0 1.125rem; border-bottom:1px solid var(--mv-border) }
    #bs-demo .bs-brand { display:flex; align-items:center; gap:.5rem; font-weight:650; font-size:.9375rem; letter-spacing:-.01em }
    #bs-demo .bs-logo { display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:var(--mv-radius-md); background:var(--mv-accent); color:var(--mv-fg-on-accent) }
    #bs-demo .bs-logo svg { width:1rem; height:1rem }
    #bs-demo .bs-crumb { color:var(--mv-fg-muted); font-size:.8125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    #bs-demo .bs-end { display:flex; align-items:center; gap:.625rem; margin-inline-start:auto }
    #bs-demo .bs-me { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--mv-bg-emphasis); color:var(--mv-fg); font-size:.75rem; font-weight:600; flex:none }
    #bs-demo .bs-body { display:grid; gap:1rem; padding:1.125rem 1.125rem 1.25rem }
    #bs-demo .bs-title { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem }
    #bs-demo .bs-title h4 { margin:0; font-size:1rem; letter-spacing:-.01em }
    #bs-demo .bs-title p { margin:.1875rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #bs-demo .bs-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.875rem }
    #bs-demo .bs-grid .bs-wide { grid-column:1 / -1 }
    #bs-demo .bs-checks { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin:0; padding:.75rem .875rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-bg-subtle) }
    #bs-demo .bs-checks legend { float:left; width:100%; margin:0 0 .375rem; padding:0; font-size:.8125rem; font-weight:500 }
    #bs-demo .mv-choice { font-size:.8125rem }
    #bs-demo textarea { min-height:4.5rem; resize:vertical }
    #bs-demo .bs-controls { display:grid; gap:.625rem; padding:.875rem 1.125rem; border-top:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
    #bs-demo .bs-row { display:flex; align-items:center; gap:.625rem 1.25rem; flex-wrap:wrap }
    #bs-demo .bs-hint { margin:0; color:var(--mv-fg-muted); font-size:.75rem; line-height:1.45 }
    #bs-demo .bs-log { display:grid; gap:.25rem; min-height:4.25rem; margin:0; padding:0; list-style:none; font:.75rem/1.4 var(--mv-font-mono); color:var(--mv-fg-muted) }
    #bs-demo .bs-log li { display:flex; gap:.625rem; min-width:0 }
    #bs-demo .bs-log time { color:var(--mv-fg-subtle); flex:none }
    #bs-demo .bs-log b { color:var(--mv-fg); font-weight:600; flex:none }
    #bs-demo .bs-log span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #bs-demo .bs-side { display:grid; gap:.75rem }
    #bs-demo .bs-side-head { display:grid; gap:.125rem; padding:0 .25rem }
    #bs-demo .bs-side-head strong { font-size:.9375rem; letter-spacing:-.01em }
    #bs-demo .bs-side-head span { color:var(--mv-fg-muted); font-size:.8125rem }
    @media (max-width:60rem) {
      #bs-demo .bs-layout { grid-template-columns:minmax(0,1fr) }
    }
    @media (max-width:36rem) {
      #bs-demo .bs-grid { grid-template-columns:minmax(0,1fr) }
      #bs-demo .bs-crumb { display:none }
    }
  </style>

  <div class="bs-layout">
    <!-- Main: a field inspection app on a flaky network. Changes sync when the technician pauses for 4 s. -->
    <section class="bs-app" aria-label="Field inspection app">
      <header class="bs-bar">
        <span class="bs-brand">
          <span class="bs-logo" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c3 4 6 7 6 11a6 6 0 0 1-12 0c0-4 3-7 6-11Z"/></svg></span>
          Fieldbook
        </span>
        <span class="bs-crumb">Inspections / WO-3317</span>
        <span class="bs-end">
          <mv-bench-sync id="bs-main" idle="4s" max-wait="15m" retry="3s"></mv-bench-sync>
          <span class="bs-me" aria-hidden="true">AO</span>
        </span>
      </header>

      <form class="bs-body" id="bs-form" onsubmit="event.preventDefault()">
        <div class="bs-title">
          <div>
            <h4>Pump station 12 · Riverside</h4>
            <p>Quarterly inspection · Wed, Sep 24, 2026 · Amara Okafor</p>
          </div>
          <span class="mv-badge" data-variant="warning">In progress</span>
        </div>
        <div class="bs-grid">
          <div class="mv-field">
            <label class="mv-label" for="bs-pressure">Inlet pressure (bar)</label>
            <input class="mv-input" id="bs-pressure" inputmode="decimal" value="3.4" data-key="pressure" data-entity="readings" data-name="Inlet pressure" data-unit=" bar">
          </div>
          <div class="mv-field">
            <label class="mv-label" for="bs-flow">Flow rate (L/s)</label>
            <input class="mv-input" id="bs-flow" inputmode="decimal" value="18.6" data-key="flow" data-entity="readings" data-name="Flow rate" data-unit=" L/s">
          </div>
          <div class="mv-field">
            <label class="mv-label" for="bs-condition">Condition</label>
            <select class="mv-select" id="bs-condition" data-key="condition" data-entity="readings" data-name="Condition">
              <option>Good</option>
              <option selected>Needs attention</option>
              <option>Needs repair</option>
            </select>
          </div>
          <fieldset class="bs-checks bs-wide">
            <legend>Checklist</legend>
            <label class="mv-choice"><input type="checkbox" class="mv-checkbox" data-key="check-seals" data-entity="order" data-name="Valve seals inspected" checked> Valve seals inspected</label>
            <label class="mv-choice"><input type="checkbox" class="mv-checkbox" data-key="check-generator" data-entity="order" data-name="Backup generator tested"> Backup generator tested</label>
            <label class="mv-choice"><input type="checkbox" class="mv-checkbox" data-key="check-signage" data-entity="order" data-name="Safety signage in place" checked> Safety signage in place</label>
          </fieldset>
          <div class="mv-field bs-wide">
            <label class="mv-label" for="bs-notes">Technician notes</label>
            <textarea class="mv-textarea" id="bs-notes" data-key="notes" data-entity="order" data-name="Notes">Slight weep at the inlet valve gasket. Replacement ordered, revisit within 14 days.</textarea>
          </div>
        </div>
      </form>

      <div class="bs-controls">
        <div class="bs-row">
          <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="bs-net" checked> Network</label>
          <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="bs-fail"> Server errors</label>
          <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="bs-conflict">Conflict on next sync</button>
          <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="bs-open">Open sync status</button>
        </div>
        <p class="bs-hint">Type in any field: nothing is sent while you type. Pause for 4 seconds and the ring around the cloud fills, then your changes sync as one batch. Turn the network off to keep working offline.</p>
        <ol class="bs-log" id="bs-log" aria-label="Event log"></ol>
      </div>
    </section>

    <!-- Inline + manual: a menu editor that publishes reviewed changes explicitly. -->
    <aside class="bs-side" aria-label="Menu editor">
      <div class="bs-side-head">
        <strong>Menu editor · Harbor Street Café</strong>
        <span>Drafts stay on this device until you publish.</span>
      </div>
      <mv-bench-sync id="bs-publish" inline manual guard="false"></mv-bench-sync>
    </aside>
  </div>

  <script type="module">
    await customElements.whenDefined("mv-bench-sync");
    const main = document.getElementById("bs-main");
    const publish = document.getElementById("bs-publish");
    const form = document.getElementById("bs-form");
    const net = document.getElementById("bs-net");
    const fail = document.getElementById("bs-fail");
    const log = document.getElementById("bs-log");
    const wait = (ms) => new Promise((r) => setTimeout(r, ms));
    const ago = (min) => Date.now() - min * 60_000;
    const clock = () => new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" });
    const say = (name, text) => {
      const li = document.createElement("li");
      const t = document.createElement("time");
      const b = document.createElement("b");
      const s = document.createElement("span");
      t.textContent = clock();
      b.textContent = name;
      s.textContent = text;
      li.append(t, b, s);
      log.prepend(li);
      while (log.children.length > 3) log.lastElementChild.remove();
    };
    const plural = (n, w) => `${n} ${w}${n === 1 ? "" : "s"}`;

    /* ── Field app ─────────────────────────────────────── */
    const ENTITIES = { readings: "Pump station 12 · Readings", order: "Work order WO-3317", photos: "Photos" };
    const THEIRS = {
      pressure: "Inlet pressure → 3.1 bar",
      flow: "Flow rate → 17.9 L/s",
      condition: "Condition → Needs repair",
      notes: "Notes · “Gasket replaced on site, no leak.”",
    };
    let conflictNext = false;

    main.sync = async (changes) => {
      await wait(900);
      if (fail.checked) throw new Error("503 Service Unavailable");
      if (conflictNext) {
        conflictNext = false;
        const c = changes.find((x) => THEIRS[x.key]) ?? changes[0];
        return { conflicts: [{ id: c.id, reason: "Also changed by Priya Nair on a tablet", theirs: THEIRS[c.key] ?? `${c.label.split(" →")[0]} (their edit)` }] };
      }
    };

    main.queue({ entity: "photos", entityLabel: ENTITIES.photos, key: "photo-inlet", label: "inlet-valve.jpg · 2.1 MB", createdAt: ago(7) });
    main.queue({ entity: "readings", entityLabel: ENTITIES.readings, key: "pressure", label: "Inlet pressure → 3.4 bar", createdAt: ago(4), edits: 2 });
    main.queue({ entity: "order", entityLabel: ENTITIES.order, key: "check-seals", label: "Valve seals inspected → checked", createdAt: ago(2) });
    say("queue", "3 changes recorded offline in the basement, waiting for a pause");

    const describe = (el) => {
      const name = el.dataset.name;
      if (el.type === "checkbox") return `${name} → ${el.checked ? "checked" : "unchecked"}`;
      if (el.tagName === "TEXTAREA") {
        const v = el.value.trim().replace(/\s+/g, " ");
        return `${name} · “${v.length > 38 ? `${v.slice(0, 38)}…` : v}”`;
      }
      return `${name} → ${el.value}${el.dataset.unit ?? ""}`;
    };
    form.addEventListener("input", (e) => {
      const el = e.target.closest("[data-key]");
      if (!el) return;
      main.queue({ entity: el.dataset.entity, entityLabel: ENTITIES[el.dataset.entity], key: el.dataset.key, label: describe(el), data: { value: el.type === "checkbox" ? el.checked : el.value } });
    });

    net.addEventListener("change", () => { main.connection = net.checked ? "auto" : "offline"; });
    document.getElementById("bs-conflict").addEventListener("click", (e) => {
      conflictNext = true;
      e.currentTarget.textContent = "Conflict armed";
      if (!main.pending) main.queue({ entity: "readings", entityLabel: ENTITIES.readings, key: "condition", label: "Condition → Good" });
    });
    document.getElementById("bs-open").addEventListener("click", (e) => { e.stopPropagation(); main.open(); });

    main.addEventListener("mv-sync-start", (e) => say("sync-start", `${plural(e.detail.changes.length, "change")} · ${e.detail.reason}`));
    main.addEventListener("mv-sync-done", (e) => {
      const { synced, failed, conflicts } = e.detail;
      say("sync-done", `${synced.length} synced · ${failed.length} failed · ${conflicts.length} conflict`);
      if (conflicts.length) document.getElementById("bs-conflict").textContent = "Conflict on next sync";
    });
    main.addEventListener("mv-offline", (e) => say("offline", `${plural(e.detail.pending, "change")} kept on device`));
    main.addEventListener("mv-online", () => say("online", "syncing at the next pause"));
    main.addEventListener("mv-conflict", (e) => {
      say("conflict", `keep ${e.detail.choice}`);
      e.detail.waitUntil(wait(500));
    });

    /* ── Menu editor (manual publish) ──────────────────── */
    publish.strings = {
      syncNow: "Publish",
      syncing: "Publishing…",
      titlePending: { one: "1 change ready to publish", other: "{n} changes ready to publish" },
      textManual: "Saved as a draft on this device. Nothing goes live until you press {syncNow}.",
      statusPending: "Draft",
      titleSynced: "Menu is live and up to date",
      textSynced: "Every change is published. New edits are kept as drafts until you publish.",
    };
    publish.sync = async (changes) => { await wait(1100); };
    publish.queue({ entity: "cold-brew", entityLabel: "Cold brew", key: "cb-price", label: "Price $4.25 → $4.50", createdAt: ago(21), status: "conflict", reason: "Also changed by Marco Rossi", theirs: "Price $4.25 → $4.40 · 10 min ago" });
    publish.queue({ entity: "flat-white", entityLabel: "Oat milk flat white", key: "fw-price", label: "Price $4.50 → $4.75", createdAt: ago(14) });
    publish.queue({ entity: "flat-white", entityLabel: "Oat milk flat white", key: "fw-size", label: "New size · Large 16 oz, $5.25", createdAt: ago(12) });
    publish.queue({ entity: "pumpkin", entityLabel: "Pumpkin spice latte", key: "psl-desc", label: "Description rewritten", createdAt: ago(9), edits: 3 });
    publish.queue({ entity: "matcha", entityLabel: "Iced matcha latte", key: "ml-photo", label: "Photo · matcha-latte.png", createdAt: ago(33), status: "rejected", reason: "image is larger than 5 MB" });
    publish.addEventListener("mv-conflict", (e) => e.detail.waitUntil(wait(600)));
  </script>
</div>