Soft Lock <mv-soft-lock>

node scripts/add.mjs soft-lock --out ./src/marvelous

<mv-soft-lock user-id="u-priya" user-name="Priya Nair">
  <form data-lock="invoice-4821" data-lock-noun="invoice"><input name="amount" aria-label="Amount"></form>
</mv-soft-lock>
<!-- from your presence feed: lock.claim("invoice-4821", { user: { id: "u-aiko", name: "Aiko Tanaka" } }) -->

<div id="sl-demo" style="width:min(100%,68rem);margin-inline:auto">
  <style>
    #sl-demo .sl-top { display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; margin:0 0 1rem }
    #sl-demo .sl-top h2 { margin:0; font-size:1.125rem; letter-spacing:-.01em }
    #sl-demo .sl-top p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #sl-demo .sl-layout { display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:1.25rem; align-items:start }
    #sl-demo .sl-main, #sl-demo .sl-side { display:grid; gap:1.25rem; min-width:0 }
    #sl-demo .sl-card { padding:1.125rem 1.25rem 1.25rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs) }
    #sl-demo .sl-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin:0 0 .875rem }
    #sl-demo .sl-head h3 { margin:0; font-size:1rem; font-weight:600; letter-spacing:-.01em }
    #sl-demo .sl-head p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #sl-demo fieldset.sl-fields { display:grid; gap:.875rem; margin:0; padding:0; border:0; min-width:0 }
    #sl-demo .sl-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.875rem }
    #sl-demo .sl-foot { display:flex; align-items:center; justify-content:flex-end; gap:.5rem; padding-top:.25rem }
    #sl-demo .sl-foot .sl-saved { margin-inline-end:auto; color:var(--mv-fg-muted); font-size:.75rem }
    #sl-demo .sl-bulk { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap }
    #sl-demo .sl-bulk p { margin:0; color:var(--mv-fg-muted); font-size:.8125rem; max-width:34ch }
    #sl-demo .sl-k { margin:0 0 .625rem; color:var(--mv-fg-muted); font-size:.6875rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600 }
    #sl-demo .sl-list { list-style:none; margin:0; padding:0; display:grid }
    #sl-demo .sl-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.125rem .75rem; align-items:baseline; padding:.625rem 0; border-top:1px solid var(--mv-border) }
    #sl-demo .sl-list li:first-child { border-top:0; padding-top:0 }
    #sl-demo .sl-list b { font-size:.8125rem; font-weight:600; font-variant-numeric:tabular-nums }
    #sl-demo .sl-list .sl-who { grid-column:1 / -1; color:var(--mv-fg-muted); font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #sl-demo .sl-list .sl-amt { font-size:.8125rem; font-variant-numeric:tabular-nums }
    #sl-demo .sl-list [data-lock-indicator] { grid-column:1 / -1; margin-top:.25rem; min-width:0 }
    #sl-demo .sl-list [data-lock-indicator]:not(:has(.mv-soft-lock-flag:not([hidden]))) { display:none }
    #sl-demo .sl-sim { display:grid; gap:.75rem }
    #sl-demo .sl-sim .mv-choice { font-size:.8125rem }
    #sl-demo .sl-btns { display:flex; flex-wrap:wrap; gap:.5rem }
    #sl-demo .sl-log { list-style:none; margin:0; padding:0; display:grid; gap:.3125rem; font-family:var(--mv-font-mono); font-size:.6875rem; color:var(--mv-fg-muted) }
    #sl-demo .sl-log b { color:var(--mv-fg); font-weight:500 }
    #sl-demo .sl-sep { height:1px; background:var(--mv-border) }
    #sl-demo .sl-hint { margin:0; color:var(--mv-fg-muted); font-size:.75rem }
    @media (max-width:56rem) { #sl-demo .sl-layout { grid-template-columns:minmax(0,1fr) } }
    @media (max-width:34rem) { #sl-demo .sl-row { grid-template-columns:minmax(0,1fr) } }
  </style>

  <mv-soft-lock id="sl-lock" user-id="u-priya" user-name="Priya Nair" ttl="60s">
    <div class="sl-top">
      <div>
        <h2>Receivables</h2>
        <p>Acme Freight · 6 people in Billing today</p>
      </div>
      <span class="mv-badge" data-variant="outline" data-shape="pill"><span class="mv-badge-dot" style="--mv-badge-dot:var(--mv-success)"></span>Live</span>
    </div>

    <div class="sl-layout">
      <div class="sl-main">
        <form class="sl-card" id="sl-invoice" data-lock="invoice-4821" data-lock-noun="invoice" novalidate>
          <div class="sl-head">
            <div>
              <h3>Invoice INV-4821</h3>
              <p>Nordvik Logistics AS · issued Sep 18, 2026</p>
            </div>
            <span class="mv-badge" data-variant="warning"><span class="mv-badge-dot"></span>Draft</span>
          </div>
          <div data-lock-indicator></div>
          <fieldset class="sl-fields" data-lock-edit>
            <div class="sl-row">
              <div class="mv-field">
                <label class="mv-label" for="sl-customer">Customer</label>
                <input class="mv-input" id="sl-customer" value="Nordvik Logistics AS" autocomplete="off">
              </div>
              <div class="mv-field">
                <label class="mv-label" for="sl-amount">Amount (USD)</label>
                <input class="mv-input" id="sl-amount" value="12,480.00" inputmode="decimal" autocomplete="off">
              </div>
            </div>
            <div class="sl-row">
              <div class="mv-field">
                <label class="mv-label" for="sl-due">Due date</label>
                <input class="mv-input" id="sl-due" value="Oct 18, 2026" autocomplete="off">
              </div>
              <div class="mv-field">
                <label class="mv-label" for="sl-terms">Payment terms</label>
                <select class="mv-select" id="sl-terms">
                  <option>Net 15</option>
                  <option selected>Net 30</option>
                  <option>Net 45</option>
                  <option>Due on receipt</option>
                </select>
              </div>
            </div>
            <div class="mv-field">
              <label class="mv-label" for="sl-notes">Notes to customer</label>
              <textarea class="mv-textarea" id="sl-notes" rows="2">Split shipment: the second pallet (Oslo → Rotterdam) is billed on INV-4830.</textarea>
            </div>
            <div class="sl-foot">
              <span class="sl-saved" id="sl-saved">Last saved Sep 23, 4:12 PM</span>
              <button class="mv-button" data-variant="outline" type="reset">Discard</button>
              <button class="mv-button" type="submit">Save invoice</button>
            </div>
          </fieldset>
        </form>

        <section class="sl-card" data-lock="segment-overdue" data-lock-noun="segment" aria-labelledby="sl-seg-title">
          <div class="sl-head">
            <div>
              <h3 id="sl-seg-title">Overdue over 30 days</h3>
              <p>214 accounts · $186,420.75 outstanding</p>
            </div>
            <span class="mv-badge" data-variant="danger">Overdue</span>
          </div>
          <div data-lock-indicator></div>
          <div class="sl-bulk">
            <p>Email a payment reminder with a pay-now link to every account in this segment.</p>
            <button class="mv-button" data-variant="outline" type="button" id="sl-run">Send reminders</button>
          </div>
        </section>
      </div>

      <aside class="sl-side">
        <section class="sl-card" aria-labelledby="sl-recent">
          <p class="sl-k" id="sl-recent">Recent invoices</p>
          <ul class="sl-list">
            <li data-lock="invoice-4821" data-lock-variant="compact">
              <b>INV-4821</b><span class="sl-amt">$12,480.00</span>
              <span class="sl-who">Nordvik Logistics AS</span><span data-lock-indicator></span>
            </li>
            <li data-lock="invoice-4822" data-lock-variant="compact">
              <b>INV-4822</b><span class="sl-amt">$3,215.50</span>
              <span class="sl-who">Café Lumière</span><span data-lock-indicator></span>
            </li>
            <li data-lock="invoice-4819" data-lock-variant="compact">
              <b>INV-4819</b><span class="sl-amt">$48,900.00</span>
              <span class="sl-who">Sato Robotics</span><span data-lock-indicator></span>
            </li>
            <li data-lock="invoice-4817" data-lock-variant="compact">
              <b>INV-4817</b><span class="sl-amt">$7,064.20</span>
              <span class="sl-who">Brightwater Clinics</span><span data-lock-indicator></span>
            </li>
          </ul>
        </section>

        <section class="sl-card sl-sim" aria-labelledby="sl-sim-title">
          <p class="sl-k" id="sl-sim-title" style="margin:0">Teammates (simulated)</p>
          <label class="mv-choice" data-control="end">
            <input type="checkbox" role="switch" class="mv-switch" data-sim="aiko" checked>
            <span class="mv-choice-text"><span class="mv-choice-title">Aiko edits INV-4821</span></span>
          </label>
          <label class="mv-choice" data-control="end">
            <input type="checkbox" role="switch" class="mv-switch" data-sim="marcus" checked>
            <span class="mv-choice-text"><span class="mv-choice-title">Marcus exports the segment</span></span>
          </label>
          <label class="mv-choice" data-control="end">
            <input type="checkbox" role="switch" class="mv-switch" data-sim="lena" checked>
            <span class="mv-choice-text"><span class="mv-choice-title">Lena views INV-4822</span></span>
          </label>
          <div class="sl-btns">
            <button class="mv-button" data-variant="secondary" data-size="sm" type="button" id="sl-ask">Aiko asks for it</button>
            <button class="mv-button" data-variant="secondary" data-size="sm" type="button" id="sl-grab">Aiko takes over</button>
          </div>
          <div class="sl-sep"></div>
          <ol class="sl-log" id="sl-log" aria-label="Event log"><li>Type in the invoice to join Aiko’s edit</li></ol>
          <p class="sl-hint">Open this demo in a second tab: both tabs see each other.</p>
        </section>
      </aside>
    </div>
  </mv-soft-lock>

  <script type="module">
    const lock = document.getElementById("sl-lock");
    await customElements.whenDefined("mv-soft-lock");
    const $ = (id) => document.getElementById(id);
    const min = 60_000;
    const people = {
      aiko: { user: { id: "u-aiko", name: "Aiko Tanaka", color: "var(--mv-soft-lock-c1)" }, resource: "invoice-4821", action: "editing", ago: 2 * min },
      marcus: { user: { id: "u-marcus", name: "Marcus Oyelaran", color: "var(--mv-soft-lock-c5)" }, resource: "segment-overdue", action: "running", note: "a collections export", ago: 1 * min },
      lena: { user: { id: "u-lena", name: "Lena Fischer", color: "var(--mv-soft-lock-c3)" }, resource: "invoice-4822", action: "viewing", ago: 5 * min },
    };
    const on = new Set();
    const report = (key) => {
      const p = people[key];
      lock.claim(p.resource, { user: p.user, action: p.action, note: p.note, since: p.since });
    };
    const start = (key) => {
      const p = people[key];
      p.since = Date.now() - (p.ago ?? 0);
      p.ago = 0;
      on.add(key);
      report(key);
    };
    const stop = (key, reason = "release") => {
      on.delete(key);
      lock.release(people[key].resource, { user: people[key].user, reason });
      const sw = document.querySelector(`#sl-demo [data-sim="${key}"]`);
      if (sw) sw.checked = false;
    };
    // Stand-in for the websocket: every teammate heartbeats well within the 60 s TTL.
    const beat = setInterval(() => {
      if (!lock.isConnected) return clearInterval(beat);
      for (const key of on) report(key);
    }, 20_000);
    for (const key of Object.keys(people)) start(key);

    for (const sw of document.querySelectorAll("#sl-demo [data-sim]")) {
      sw.addEventListener("change", () => (sw.checked ? start(sw.dataset.sim) : stop(sw.dataset.sim)));
    }

    // Event log
    const log = $("sl-log");
    let fresh = true;
    const write = (name, text) => {
      if (fresh) { log.replaceChildren(); fresh = false; }
      const li = document.createElement("li");
      const b = document.createElement("b");
      b.textContent = name;
      li.append(b, ` ${text}`);
      log.prepend(li);
      while (log.children.length > 5) log.lastElementChild.remove();
    };
    const first = (u) => u.name.split(" ")[0];
    lock.addEventListener("mv-lock-conflict", (e) => write("lock-conflict", `${e.detail.resource} · with ${e.detail.others.map((c) => first(c.user)).join(", ")}`));
    lock.addEventListener("mv-take-over", (e) => write("take-over", `${e.detail.resource} · from ${e.detail.from.map((c) => first(c.user)).join(", ")}`));
    lock.addEventListener("mv-resolve", (e) => { if (e.detail.choice !== "take-over") write("resolve", `${e.detail.resource} · ${e.detail.choice}`); });
    lock.addEventListener("mv-handover-response", (e) => write("handover-response", `${e.detail.accepted ? "handed over to" : "kept from"} ${first(e.detail.user)}`));
    lock.addEventListener("mv-release", (e) => {
      const { user, resource, reason, self } = e.detail;
      write("release", `${resource} · ${self ? "you" : first(user)} · ${reason}`);
      // A teammate who was taken over stops reporting (their app got the notice).
      if (!self && reason === "taken-over") for (const [key, p] of Object.entries(people)) if (p.user.id === user.id) stop(key, "taken-over");
    });
    lock.addEventListener("mv-handover-request", (e) => {
      const { resource, to } = e.detail;
      write("handover-request", `${resource} · to ${to.map(first).join(", ")}`);
      // Simulated answers: Aiko agrees, Marcus wants to finish his export.
      setTimeout(() => {
        for (const u of to) {
          if (u.id === "u-aiko" && on.has("aiko")) stop("aiko", "handover");
          if (u.id === "u-marcus" && on.has("marcus")) lock.receive(resource, { type: "handover-declined", user: people.marcus.user });
        }
      }, 1600);
    });

    // Aiko's side of the story, when you are the one editing.
    $("sl-ask").addEventListener("click", () => {
      if (!on.has("aiko")) start("aiko");
      if (!lock.receive("invoice-4821", { type: "handover-request", user: people.aiko.user })) write("note", "type in INV-4821 first: nothing to hand over");
    });
    $("sl-grab").addEventListener("click", () => {
      if (!lock.receive("invoice-4821", { type: "take-over", user: people.aiko.user })) return write("note", "type in INV-4821 first: nothing to take over");
      const sw = document.querySelector('#sl-demo [data-sim="aiko"]');
      sw.checked = true;
      start("aiko");
    });

    // The bulk run claims the segment while it runs.
    const run = $("sl-run");
    let runTimer = 0;
    const finish = () => {
      clearTimeout(runTimer);
      lock.release("segment-overdue", { reason: "release" });
      run.textContent = "Send reminders";
      delete run.dataset.running;
    };
    run.addEventListener("click", () => {
      if (run.dataset.running) return finish();
      lock.claim("segment-overdue", { action: "running", note: "payment reminders" });
      run.textContent = "Stop sending";
      run.dataset.running = "true";
      clearTimeout(runTimer);
      runTimer = setTimeout(finish, 20_000);
    });

    const form = $("sl-invoice");
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      $("sl-saved").textContent = `Saved ${new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`;
    });
  </script>
</div>