Saved State <mv-saved-state>

node scripts/add.mjs saved-state --out ./src/marvelous

<mv-saved-state for="doc-form" guard></mv-saved-state>
<!-- in your autosave code: savedState.track(fetch("/api/doc", { method: "PUT", body })) -->

<div style="display:grid;gap:1.25rem;width:100%;max-width:560px">
  <form id="mv-saved-demo-doc" class="mv-card" style="padding:0;overflow:hidden">
    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid var(--mv-border)">
      <span style="display:flex;align-items:center;gap:.5rem;min-width:0;font-size:.8rem;color:var(--mv-fg-muted)">
        <span>Marketing</span><span aria-hidden="true">/</span><span style="color:var(--mv-fg);font-weight:600">Q4 launch brief</span>
      </span>
      <mv-saved-state id="mv-saved-demo" for="mv-saved-demo-doc" guard></mv-saved-state>
    </div>
    <div style="display:grid;gap:.6rem;padding:1rem">
      <input class="mv-input" name="title" value="Aurora 2.0 launch, Oct 14" aria-label="Title">
      <textarea class="mv-textarea" name="body" rows="4" aria-label="Brief">Launch in the US, Brazil and Japan on Tuesday, October 14. Early-bird pricing at $49/year until October 31. Owners: Priya Raman (press), Kenji Watanabe (store listings), Lucía Ortega (support macros).</textarea>
    </div>
  </form>

  <div style="display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.85rem">
    <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="mv-saved-demo-slow"><span class="mv-choice-text">Slow network</span></label>
    <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="mv-saved-demo-fail"><span class="mv-choice-text">Server error</span></label>
    <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="mv-saved-demo-offline"><span class="mv-choice-text">Offline</span></label>
  </div>
  <p style="margin:-.5rem 0 0;font-size:.8rem;color:var(--mv-fg-subtle)">Type to autosave. Saves faster than 400 ms never flash “Saving…”.</p>

  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem 1.5rem;padding-top:1rem;border-top:1px solid var(--mv-border)">
    <mv-saved-state id="mv-saved-demo-a"></mv-saved-state>
    <mv-saved-state id="mv-saved-demo-b"></mv-saved-state>
    <mv-saved-state id="mv-saved-demo-c"></mv-saved-state>
    <mv-saved-state id="mv-saved-demo-d"></mv-saved-state>
  </div>
</div>

<script type="module">
  const form = document.getElementById("mv-saved-demo-doc");
  const status = document.getElementById("mv-saved-demo");
  const $ = (id) => document.getElementById(`mv-saved-demo-${id}`);
  const ago = (min) => new Date(Date.now() - min * 60e3).toISOString();
  status.setAttribute("saved-at", ago(2));

  // Stand-in for fetch(): fast by default, slow, failing or offline on demand.
  const save = () => new Promise((resolve, reject) => setTimeout(() => {
    if ($("offline").checked) reject(new TypeError("Failed to fetch"));
    else if ($("fail").checked) reject(new Error("The server answered 503 Service Unavailable"));
    else resolve();
  }, $("slow").checked ? 1800 : 250));

  let timer = 0;
  form.addEventListener("submit", (e) => e.preventDefault());
  form.addEventListener("input", () => {
    clearTimeout(timer);
    timer = setTimeout(() => status.track(save()).catch(() => {}), 800);
  });
  status.addEventListener("mv-retry", (e) => e.detail.waitUntil(save()));
  $("offline").addEventListener("change", (e) => dispatchEvent(new Event(e.target.checked ? "offline" : "online")));

  // One of each state.
  $("a").setAttribute("saved-at", ago(180));
  customElements.whenDefined("mv-saved-state").then(() => {
    $("b").unsaved();
    $("c").saving();
    $("d").failed(new Error("Your session expired"));
    $("d").addEventListener("mv-retry", (e) => e.detail.waitUntil(new Promise((r) => setTimeout(r, 1200))));
  });
</script>