Tell-Tale <mv-tell-tale>

node scripts/add.mjs tell-tale --out ./src/marvelous

<form>
  <label>Title <input name="title" value="Q3 report"></label>
  <mv-tell-tale></mv-tell-tale>
</form>

<div id="tt-demo" style="width:min(100%,64rem);margin-inline:auto">
  <style>
    #tt-demo { display:grid; gap:1.25rem; align-content:start }
    #tt-demo .tt-layout { display:grid; grid-template-columns:minmax(0,1fr) 17rem; gap:1.25rem; align-items:start }
    #tt-demo .tt-app { 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 }
    #tt-demo .tt-bar { display:flex; align-items:center; gap:.75rem 1rem; flex-wrap:wrap; min-height:3.5rem; padding:.625rem 1rem .625rem 1.125rem; border-bottom:1px solid var(--mv-border) }
    #tt-demo .tt-crumbs { display:grid; gap:.125rem; min-width:0; flex:1 1 14rem }
    #tt-demo .tt-crumbs small { color:var(--mv-fg-subtle); font-size:.75rem }
    #tt-demo .tt-crumbs strong { font-size:.9375rem; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #tt-demo .tt-end { display:flex; align-items:center; gap:.5rem; margin-inline-start:auto }
    #tt-demo .tt-form { display:grid; gap:1rem; padding:1.125rem }
    #tt-demo .tt-row { display:grid; grid-template-columns:minmax(0,1fr) 12rem; gap:1rem }
    #tt-demo .tt-radios { display:flex; gap:.5rem 1.25rem; flex-wrap:wrap; padding-top:.25rem; border:0; margin:0; padding-inline:0 }
    #tt-demo .tt-radios legend { padding:0; margin-bottom:.375rem }
    #tt-demo textarea { min-height:8.5rem; resize:vertical; line-height:1.55 }
    #tt-demo .tt-controls { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding:.875rem 1.125rem; border-top:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
    #tt-demo .tt-toggles { display:flex; align-items:center; gap:.5rem 1.25rem; flex-wrap:wrap }
    #tt-demo .tt-toggles .mv-choice { font-size:.8125rem }
    #tt-demo .tt-readout { display:flex; align-items:center; gap:.5rem; color:var(--mv-fg-muted); font-size:.75rem; font-variant-numeric:tabular-nums }
    #tt-demo .tt-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; padding:0 1.125rem .875rem; background:var(--mv-bg-subtle) }
    #tt-demo .tt-log { margin:0; flex:1 1 16rem; min-width:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono) }
    #tt-demo .tt-side { display:grid; gap:1rem; align-content:start }
    #tt-demo .tt-panel { padding:1rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs) }
    #tt-demo .tt-panel h4 { margin:0 0 .25rem; font-size:.875rem; letter-spacing:-.01em }
    #tt-demo .tt-panel > p { margin:0 0 .875rem; color:var(--mv-fg-muted); font-size:.75rem; line-height:1.45 }
    #tt-demo .tt-curve { display:grid; gap:.5rem; margin:0; padding:0; list-style:none }
    #tt-demo .tt-curve li { display:flex; align-items:center; justify-content:space-between; gap:.75rem }
    #tt-demo .tt-curve span { display:grid; gap:.0625rem; font-size:.8125rem; font-weight:500 }
    #tt-demo .tt-curve small { color:var(--mv-fg-subtle); font-size:.6875rem; font-weight:400 }
    #tt-demo .tt-settings { display:grid; gap:.75rem }
    #tt-demo .tt-settings-foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding-top:.25rem }
    #tt-demo .tt-settings-foot small { color:var(--mv-fg-subtle); font-size:.6875rem; line-height:1.35 }
    @media (max-width:54rem) { #tt-demo .tt-layout { grid-template-columns:minmax(0,1fr) } }
    @media (max-width:36rem) { #tt-demo .tt-row { grid-template-columns:minmax(0,1fr) } }
  </style>

  <div class="tt-layout">
    <!-- Main: a help-center article editor. Time runs about 12× faster here. -->
    <section class="tt-app" aria-label="Article editor">
      <header class="tt-bar">
        <span class="tt-crumbs">
          <small>Help Center · Billing</small>
          <strong>Refunds for annual plans</strong>
        </span>
        <span class="tt-end">
          <mv-tell-tale id="tt-main" for="tt-article" shortcut tab="both" calm="6s" threshold="25s" urgent="75s"></mv-tell-tale>
          <button type="reset" form="tt-article" class="mv-button" data-variant="ghost" data-size="sm" id="tt-discard">Discard</button>
          <button type="submit" form="tt-article" class="mv-button" data-size="sm">Save</button>
        </span>
      </header>

      <form id="tt-article" class="tt-form" novalidate>
        <div class="tt-row">
          <div class="mv-field">
            <label class="mv-label" for="tt-title">Title</label>
            <input class="mv-input" id="tt-title" name="title" value="Refunds for annual plans">
          </div>
          <div class="mv-field">
            <label class="mv-label" for="tt-category">Category</label>
            <select class="mv-select" id="tt-category" name="category">
              <option selected>Billing</option>
              <option>Plans &amp; pricing</option>
              <option>Account</option>
            </select>
          </div>
        </div>
        <div class="mv-field">
          <label class="mv-label" for="tt-summary">Summary</label>
          <input class="mv-input" id="tt-summary" name="summary" value="How refunds work when you cancel an annual subscription.">
        </div>
        <div class="mv-field">
          <label class="mv-label" for="tt-body">Article</label>
          <textarea class="mv-textarea" id="tt-body" name="body">Annual plans can be canceled at any time from Settings → Billing. If you cancel within 30 days of your renewal date, we refund the full amount to your original payment method.

After 30 days, your plan stays active until the end of the billing period and is not renewed.</textarea>
        </div>
        <fieldset class="tt-radios">
          <legend class="mv-label">Visible to</legend>
          <label class="mv-choice"><input type="radio" class="mv-radio" name="audience" value="all" checked> All customers</label>
          <label class="mv-choice"><input type="radio" class="mv-radio" name="audience" value="enterprise"> Enterprise only</label>
          <label class="mv-choice"><input type="checkbox" class="mv-checkbox" name="notify" id="tt-notify"> Notify subscribers</label>
        </fieldset>
      </form>

      <div class="tt-controls">
        <span class="tt-toggles">
          <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="tt-guard" checked> Warn before leaving</label>
          <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="tt-tab" checked> Mark the browser tab</label>
          <label class="mv-choice"><input type="checkbox" class="mv-checkbox" id="tt-fail"> Next save fails</label>
        </span>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="tt-ff">Let 1 min pass</button>
      </div>
      <div class="tt-foot">
        <p class="tt-log" id="tt-log" aria-live="polite">Press ⌘S / Ctrl+S, click the status chip or Save.</p>
        <span class="tt-readout">
          <span class="mv-badge" data-variant="outline" data-shape="pill" id="tt-level">calm</span>
          <span id="tt-weight">0 changes</span>
        </span>
      </div>
    </section>

    <aside class="tt-side">
      <!-- The stakes curve: same component, five moments of the same draft -->
      <div class="tt-panel">
        <h4>Stakes curve</h4>
        <p>More unsaved work, left longer, beats stronger and faster. Hover a mark for its detail.</p>
        <ul class="tt-curve" id="tt-curve">
          <li><span>Clean<small>Everything saved</small></span><mv-tell-tale guard="off" data-seed="0,0"></mv-tell-tale></li>
          <li><span>Calm<small>1 edit, seconds ago</small></span><mv-tell-tale guard="off" data-seed="1,10"></mv-tell-tale></li>
          <li><span>Stirring<small>2 edits, 2 min</small></span><mv-tell-tale guard="off" data-seed="2,120"></mv-tell-tale></li>
          <li><span>Insistent<small>4 edits, 4 min</small></span><mv-tell-tale guard="off" data-seed="4,240"></mv-tell-tale></li>
          <li><span>Urgent<small>9 edits, 8 min</small></span><mv-tell-tale guard="off" data-seed="9,480"></mv-tell-tale></li>
        </ul>
      </div>

      <!-- Corner mode: the mark sits on the app's own Save button -->
      <form class="tt-panel" id="tt-settings" novalidate>
        <h4>Workspace settings</h4>
        <p>Corner mode: the mark rides on your own Save button.</p>
        <div class="tt-settings">
          <div class="mv-field">
            <label class="mv-label" for="tt-ws">Workspace name</label>
            <input class="mv-input" id="tt-ws" value="Harbor Labs">
          </div>
          <div class="mv-field">
            <label class="mv-label" for="tt-cur">Default currency</label>
            <select class="mv-select" id="tt-cur">
              <option selected>USD (US dollar)</option>
              <option>EUR (Euro)</option>
              <option>JPY (Japanese yen)</option>
            </select>
          </div>
          <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="tt-2fa"> Require two-factor sign-in</label>
          <div class="tt-settings-foot">
            <small id="tt-settings-note"></small>
            <mv-tell-tale id="tt-corner" guard="off" style="--mv-tell-tale-cutout:var(--mv-surface)" calm="5s" threshold="20s" urgent="60s">
              <button type="submit" class="mv-button" data-variant="outline" data-size="sm">Save changes</button>
            </mv-tell-tale>
          </div>
        </div>
      </form>
    </aside>
  </div>

  <script type="module">
    await customElements.whenDefined("mv-tell-tale");
    const $ = (id) => document.getElementById(id);
    const main = $("tt-main");
    const form = $("tt-article");
    const log = $("tt-log");
    const clock = () => new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" });
    const say = (text) => { log.textContent = `${clock()} · ${text}`; };
    const edit = (el, apply) => { apply(el); el.dispatchEvent(new Event("input", { bubbles: true })); el.dispatchEvent(new Event("change", { bubbles: true })); };

    // A draft already in progress: last saved 18 minutes ago, four edits since.
    main.savedAt = Date.now() - 18 * 60_000;
    edit($("tt-summary"), (el) => { el.value = "How refunds work when you cancel or downgrade an annual subscription."; });
    edit($("tt-body"), (el) => { el.value += "\n\nDowngrades from Business to Team are prorated: the difference is credited to your next invoice, never refunded in cash. Credits never expire and apply to add-ons as well."; });
    edit(form.querySelector('[value="enterprise"]'), (el) => { el.checked = true; });
    edit($("tt-notify"), (el) => { el.checked = true; });
    main.dirtySince = Date.now() - 12_000;

    // Fake API: 900 ms round trip, optionally failing.
    const api = () => new Promise((resolve, reject) => setTimeout(() => ($("tt-fail").checked ? reject(new Error("503")) : resolve()), 900));
    main.addEventListener("mv-save", (e) => {
      say(`Saving ${e.detail.changes} change${e.detail.changes === 1 ? "" : "s"} (${e.detail.source})…`);
      e.detail.waitUntil(api());
    });
    main.addEventListener("mv-saved", (e) => { $("tt-fail").checked = false; say(`Saved ${e.detail.changes} change${e.detail.changes === 1 ? "" : "s"}.`); });
    main.addEventListener("mv-save-error", () => say("Save failed: server unavailable. Your edits are still here."));
    main.addEventListener("mv-stake", (e) => { if (e.detail.previous !== "clean" || e.detail.level !== "calm") say(`Stakes: ${e.detail.previous} → ${e.detail.level}.`); });
    form.addEventListener("submit", (e) => { e.preventDefault(); main.save({ source: "button" }); });
    $("tt-discard").addEventListener("click", (e) => { e.preventDefault(); const n = main.revert(); say(n ? `Discarded ${n} change${n === 1 ? "" : "s"}.` : "Nothing to discard."); });

    const readout = () => {
      $("tt-level").textContent = main.level;
      $("tt-weight").textContent = `${main.changes} change${main.changes === 1 ? "" : "s"} · weight ${main.weight}`;
    };
    for (const type of ["mv-stake", "mv-saved", "input", "change"]) main.closest("section").addEventListener(type, () => queueMicrotask(readout));
    main.addEventListener("mv-stake", readout);
    readout();

    $("tt-guard").addEventListener("change", (e) => { main.guard = e.target.checked ? "insistent" : "off"; });
    $("tt-tab").addEventListener("change", (e) => { main.tab = e.target.checked ? "both" : "off"; });
    $("tt-ff").addEventListener("click", () => {
      if (!main.changes) { say("Nothing unsaved: edit a field first."); return; }
      main.dirtySince -= 5_000; // ≈ 1 min at this demo's speed
      readout();
    });

    // Stakes curve: fixed moments with the default curve (1m / 5m / 15m).
    const seed = (el) => {
      const [count, secs] = el.dataset.seed.split(",").map(Number);
      el.savedAt = Date.now() - (secs + 90) * 1000;
      el.mark(count);
      if (count) el.dirtySince = Date.now() - secs * 1000;
    };
    for (const el of $("tt-curve").querySelectorAll("mv-tell-tale")) {
      seed(el);
      el.addEventListener("mv-save", (e) => e.detail.waitUntil(new Promise((r) => setTimeout(r, 500))));
      el.addEventListener("mv-saved", () => setTimeout(() => seed(el), 3200));
    }

    // Corner mode: one setting already changed 20 seconds ago.
    const corner = $("tt-corner");
    corner.savedAt = Date.now() - 26 * 3600_000;
    $("tt-settings-note").textContent = `Last saved ${new Date(corner.savedAt).toLocaleDateString("en-US", { month: "short", day: "numeric" })}`;
    edit($("tt-cur"), (el) => { el.selectedIndex = 1; });
    corner.dirtySince = Date.now() - 20_000;
    $("tt-settings").addEventListener("submit", (e) => {
      e.preventDefault();
      $("tt-settings-note").textContent = "Saving…";
      setTimeout(() => { corner.saved(); $("tt-settings-note").textContent = "Saved just now"; }, 700);
    });
  </script>
</div>