Read Back — <mv-read-back>

node scripts/add.mjs read-back --out ./src/marvelous

<div id="rb-demo" style="width:min(100%,60rem);margin-inline:auto">
  <style>
    #rb-demo { display:grid; gap:1.25rem; align-content:start }
    #rb-demo .rb-card { min-width:0; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm); overflow:hidden }
    #rb-demo .rb-head { display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; border-bottom:1px solid var(--mv-border) }
    #rb-demo .rb-head h3 { margin:0; font-size:.9375rem; font-weight:650; letter-spacing:-.01em }
    #rb-demo .rb-head p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #rb-demo .rb-glyph { display:grid; place-items:center; flex:none; width:2rem; height:2rem; border-radius:var(--mv-radius-md); background:var(--mv-bg-muted); color:var(--mv-fg-muted) }
    #rb-demo .rb-glyph svg { width:1.0625rem; height:1.0625rem }
    #rb-demo mv-read-back { padding:1.125rem 1.25rem 1.25rem }
    #rb-demo form { display:grid; gap:1rem; margin:0 }
    #rb-demo .rb-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem; align-items:start }
    #rb-demo .rb-span { grid-column:1 / -1 }
    #rb-demo .rb-mono { font-family:var(--mv-font-mono); letter-spacing:.02em }
    #rb-demo .rb-amount { display:grid; grid-template-columns:minmax(0,1fr) 5.75rem; gap:.5rem }
    #rb-demo .rb-submit { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding-top:.25rem }
    #rb-demo .rb-submit p { margin:0; color:var(--mv-fg-muted); font-size:.8125rem; flex:1 1 16rem }
    #rb-demo .rb-controls { display:flex; align-items:center; gap:.75rem 1.5rem; flex-wrap:wrap; padding:.875rem 1.25rem; border-top:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
    #rb-demo .rb-controls .mv-choice { font-size:.8125rem }
    #rb-demo .rb-inline { display:flex; align-items:center; gap:.5rem; color:var(--mv-fg-muted); font-size:.8125rem; font-weight:500 }
    #rb-demo .rb-inline .mv-select { width:auto; min-width:11.5rem }
    #rb-demo .rb-log { flex:1 1 14rem; margin:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono); text-align:end }
    #rb-demo .rb-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; align-items:start }
    #rb-demo .rb-note { margin:0; color:var(--mv-fg-muted); font-size:.8125rem }
    @media (max-width:46rem) {
      #rb-demo .rb-grid, #rb-demo .rb-pair { grid-template-columns:minmax(0,1fr) }
      #rb-demo .rb-log { text-align:start }
    }
  </style>

  <!-- Main: a wire transfer, live echo under each field + read-back on submit (already open here) -->
  <section class="rb-card" aria-labelledby="rb-wire-title">
    <header class="rb-head">
      <span class="rb-glyph" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10h18M5 10V20M9.5 10V20M14.5 10V20M19 10V20M3 20h18M12 3l9 5H3z"/></svg></span>
      <div>
        <h3 id="rb-wire-title">New international wire</h3>
        <p>From Operating account ···· 4417 · $48,210.55 available</p>
      </div>
    </header>
    <mv-read-back id="rb-wire" mode="both" challenge="last4">
      <form id="rb-wire-form" onsubmit="event.preventDefault()">
        <div class="rb-grid">
          <div class="mv-field">
            <label class="mv-label" for="rb-name">Beneficiary</label>
            <input class="mv-input" id="rb-name" name="beneficiary" value="Lindqvist &amp; Okafor GmbH" required autocomplete="off">
          </div>
          <div class="mv-field">
            <label class="mv-label" for="rb-iban">IBAN</label>
            <input class="mv-input rb-mono" id="rb-iban" name="iban" value="DE89370400440532013000" data-read-back="account" data-holder-from="beneficiary" required spellcheck="false" autocomplete="off">
          </div>
          <div class="mv-field">
            <label class="mv-label" for="rb-amount">Amount</label>
            <div class="rb-amount">
              <input class="mv-input" id="rb-amount" name="amount" inputmode="decimal" value="12500" data-read-back="amount" data-currency="currency" data-typical="1250" data-read-back-echo="#rb-amount-echo" required autocomplete="off">
              <select class="mv-select" id="rb-currency" name="currency" aria-label="Currency">
                <option selected>USD</option>
                <option>EUR</option>
                <option>GBP</option>
              </select>
            </div>
            <div id="rb-amount-echo"></div>
          </div>
          <div class="mv-field">
            <label class="mv-label" for="rb-date">Execution date</label>
            <input class="mv-input" id="rb-date" name="date" type="date" data-read-back="date" data-business-days required>
          </div>
          <div class="mv-field rb-span">
            <label class="mv-label" for="rb-ref">Payment reference</label>
            <input class="mv-input rb-mono" id="rb-ref" name="reference" value="INV-2048-K7" data-read-back="code" required spellcheck="false" autocomplete="off">
          </div>
        </div>
        <div class="rb-submit">
          <p>Wires are read back before they leave: check every line, then confirm.</p>
          <button class="mv-button" type="submit">Send transfer</button>
        </div>
      </form>
    </mv-read-back>
    <div class="rb-controls">
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="rb-live" checked> Live echo under fields</label>
      <label class="rb-inline" for="rb-challenge">To confirm
        <select class="mv-select" data-size="sm" id="rb-challenge">
          <option value="">Nothing to re-type</option>
          <option value="last4" selected>Last 4 of the IBAN</option>
          <option value="char">One random character</option>
        </select>
      </label>
      <p class="rb-log" id="rb-log" aria-live="polite">Payee check: simulated, 500 ms.</p>
    </div>
  </section>

  <div class="rb-pair">
    <!-- Live only: a pharmacy order where decimal slips are dangerous -->
    <section class="rb-card" aria-labelledby="rb-rx-title">
      <header class="rb-head">
        <span class="rb-glyph" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="7" width="12" height="14" rx="2.5"/><path d="M8 3h8v4H8zM12 11v6M9 14h6"/></svg></span>
        <div>
          <h3 id="rb-rx-title">Pharmacy order</h3>
          <p>Ibuprofen oral suspension · 100 mg per 5 mL</p>
        </div>
      </header>
      <mv-read-back id="rb-rx" mode="live">
        <form onsubmit="event.preventDefault()">
          <div class="mv-field">
            <label class="mv-label" for="rb-dose">Dose per intake</label>
            <div class="mv-input-group">
              <input class="mv-input" id="rb-dose" inputmode="decimal" value="50" data-read-back="quantity" data-unit="mL" data-unit-name="milliliter" data-typical="5" data-typical-label="the usual dose" autocomplete="off">
              <span class="mv-input-group-addon">mL</span>
            </div>
          </div>
          <div class="mv-field">
            <label class="mv-label" for="rb-supply">Supply</label>
            <input class="mv-input" id="rb-supply" type="number" min="1" value="2" data-read-back="quantity" data-unit="bottle" data-pack="150" data-pack-unit="mL" data-unit-price="8.40">
          </div>
          <div class="mv-field">
            <label class="mv-label" for="rb-start">First intake</label>
            <input class="mv-input" id="rb-start" type="date" data-read-back="date">
          </div>
        </form>
      </mv-read-back>
    </section>

    <!-- Edit form: only what changed is read back, with the change highlighted -->
    <section class="rb-card" aria-labelledby="rb-dns-title">
      <header class="rb-head">
        <span class="rb-glyph" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.8 3 2.8 15 0 18M12 3c-2.8 3-2.8 15 0 18"/></svg></span>
        <div>
          <h3 id="rb-dns-title">Edit DNS record</h3>
          <p>api.northwind.example · production zone</p>
        </div>
      </header>
      <mv-read-back id="rb-dns" mode="both" only-changed>
        <form onsubmit="event.preventDefault()">
          <div class="rb-grid">
            <div class="mv-field">
              <label class="mv-label" for="rb-type">Type</label>
              <select class="mv-select" id="rb-type" data-read-back="text">
                <option selected>A</option>
                <option>AAAA</option>
                <option>CNAME</option>
              </select>
            </div>
            <div class="mv-field">
              <label class="mv-label" for="rb-ttl">TTL (seconds)</label>
              <input class="mv-input" id="rb-ttl" type="number" min="60" value="300" data-was="3600" data-read-back="quantity" data-unit="second">
            </div>
          </div>
          <div class="mv-field">
            <label class="mv-label" for="rb-target">Points to</label>
            <input class="mv-input rb-mono" id="rb-target" value="203.0.113.101" data-was="203.0.113.10" data-read-back="text" spellcheck="false" autocomplete="off">
          </div>
          <div class="rb-submit">
            <p class="rb-note" id="rb-dns-note" aria-live="polite">Unsaved changes.</p>
            <button class="mv-button" type="submit">Save record</button>
          </div>
        </form>
      </mv-read-back>
    </section>
  </div>

  <script type="module">
    await customElements.whenDefined("mv-read-back");
    const wire = document.getElementById("rb-wire");
    const rx = document.getElementById("rb-rx");
    const dns = document.getElementById("rb-dns");
    const log = document.getElementById("rb-log");
    const say = (text) => { log.textContent = text; };
    const pad = (n) => String(n).padStart(2, "0");
    const iso = (days) => { const d = new Date(); d.setDate(d.getDate() + days); return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`; };
    for (const [id, days] of [["rb-date", 8], ["rb-start", 1]]) {
      const el = document.getElementById(id);
      el.defaultValue = iso(days);
      el.value = iso(days);
    }

    // Simulated confirmation of payee: an async formatter adds a line once the bank answers.
    const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
    wire.formatters = {
      iban: async ({ echo, field }) => {
        await sleep(500);
        const name = field.form.elements.beneficiary.value.trim();
        const known = /lindqvist/i.test(name);
        return known
          ? { detail: [echo.detail, "Payee name matches the bank’s records"].filter(Boolean) }
          : { detail: echo.detail, warning: "Payee name doesn’t match the bank’s records" };
      },
    };
    rx.refresh();
    wire.open({ focus: false });

    wire.addEventListener("mv-read-back", (e) => say(`Read-back: ${e.detail.items.length} values to check.`));
    wire.addEventListener("mv-back", (e) => say(e.detail.item ? `Back to “${e.detail.item.label}”.` : "Back to the form."));
    wire.addEventListener("mv-confirm", (e) => {
      e.preventDefault(); // the demo sends nothing
      const amount = e.detail.items.find((i) => i.type === "amount");
      say(`Confirmed: ${amount?.text ?? "wire"} released.`);
    });
    document.getElementById("rb-live").addEventListener("change", (e) => { wire.mode = e.target.checked ? "both" : "submit"; });
    document.getElementById("rb-challenge").addEventListener("change", (e) => { wire.challenge = e.target.value || null; });

    const note = document.getElementById("rb-dns-note");
    dns.addEventListener("mv-confirm", (e) => { e.preventDefault(); note.textContent = "Record saved. Propagation can take up to 5 minutes."; });
  </script>
</div>