Remembered <mv-remembered>

node scripts/add.mjs remembered --out ./src/marvelous

<mv-remembered>
  <label>Invoice currency <select data-remember="Invoices from now on will be in {value}" data-remember-who="Billing"><option>USD</option><option>EUR</option></select></label>
</mv-remembered>

<div id="rm-demo" style="width:min(100%,64rem);margin-inline:auto">
  <style>
    #rm-demo { display:grid; grid-template-columns:minmax(0,1fr); gap:.875rem; align-content:start }
    #rm-demo .rm-app { display:grid; grid-template-columns:10rem minmax(0,1fr); min-height:36rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg); box-shadow:var(--mv-shadow-sm); overflow:hidden }
    #rm-demo .rm-side { display:grid; align-content:start; gap:.125rem; padding:1rem .75rem; border-inline-end:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
    #rm-demo .rm-brand { display:flex; align-items:center; gap:.5rem; margin:0 0 1rem .375rem; font-weight:650; font-size:.9375rem; letter-spacing:-.01em }
    #rm-demo .rm-logo { display:grid; place-items:center; width:1.625rem; height:1.625rem; border-radius:var(--mv-radius-md); background:var(--mv-accent); color:var(--mv-fg-on-accent) }
    #rm-demo .rm-logo svg { width:.9375rem; height:.9375rem }
    #rm-demo .rm-side-label { margin:.5rem 0 .25rem .5rem; color:var(--mv-fg-subtle); font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase }
    #rm-demo .rm-side a { display:block; padding:.375rem .5rem; border-radius:var(--mv-radius-md); color:var(--mv-fg-muted); font-size:.8125rem; font-weight:500; text-decoration:none }
    #rm-demo .rm-side a[aria-current] { background:var(--mv-bg-emphasis); color:var(--mv-fg) }
    #rm-demo .rm-main { display:grid; align-content:start; gap:1rem; max-width:30rem; padding:1.375rem 1.5rem 1.75rem }
    #rm-demo .rm-main h3 { margin:0; font-size:1.0625rem; letter-spacing:-.01em }
    #rm-demo .rm-lede { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #rm-demo .rm-card { border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-surface) }
    #rm-demo .rm-card > h4 { margin:0; padding:.75rem 1rem; border-bottom:1px solid var(--mv-border); font-size:.8125rem; font-weight:600 }
    #rm-demo .rm-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem }
    #rm-demo .rm-row + .rm-row { border-top:1px solid var(--mv-border) }
    #rm-demo .rm-row-text { display:grid; gap:.125rem; min-width:0 }
    #rm-demo .rm-row-text b { font-size:.8125rem; font-weight:550 }
    #rm-demo .rm-row-text span { color:var(--mv-fg-muted); font-size:.75rem }
    #rm-demo .rm-row .mv-select { width:10.5rem; flex:none }
    #rm-demo fieldset.rm-row { margin:0; border:0; border-top:1px solid var(--mv-border); min-inline-size:0; flex-wrap:wrap }
    #rm-demo fieldset.rm-row legend { float:left; padding:0 }
    #rm-demo .rm-radios { display:flex; gap:1rem; flex-wrap:wrap }
    #rm-demo .rm-radios .mv-choice { font-size:.8125rem }
    #rm-demo .rm-who { display:flex; align-items:center; gap:.625rem; min-width:0 }
    #rm-demo .rm-face { display:grid; place-items:center; flex:none; width:1.875rem; height:1.875rem; border-radius:50%; background:var(--mv-bg-emphasis); font-size:.6875rem; font-weight:600 }
    #rm-demo .rm-row .mv-button { flex:none }
    #rm-demo .rm-controls { display:flex; align-items:center; justify-content:space-between; gap:.625rem 1rem; flex-wrap:wrap; padding:.75rem 1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-surface) }
    #rm-demo .rm-log { margin:0; flex:1 1 18rem; min-width:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #rm-demo .rm-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
    #rm-demo .rm-actions .mv-choice { font-size:.8125rem }
    @media (max-width:46rem) {
      #rm-demo .rm-app { grid-template-columns:minmax(0,1fr); min-height:44rem }
      #rm-demo .rm-side { display:none }
      #rm-demo .rm-main { padding:1rem }
      #rm-demo .rm-row { flex-wrap:wrap }
    }
  </style>

  <mv-remembered id="rm-el" contained who="Your account" style="--mv-remembered-width:19.75rem;--mv-remembered-offset:.875rem">
    <div class="rm-app">
      <nav class="rm-side" aria-label="Settings">
        <span class="rm-brand">
          <span class="rm-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="M4 19V5l8 7 8-7v14"/></svg></span>
          Meridian
        </span>
        <span class="rm-side-label">Workspace</span>
        <a href="#" aria-current="page">General</a>
        <a href="#">Members</a>
        <a href="#">Billing</a>
        <a href="#">Integrations</a>
        <span class="rm-side-label">Account</span>
        <a href="#">Profile</a>
        <a href="#">Notifications</a>
      </nav>

      <div class="rm-main">
        <div>
          <h3>Workspace settings</h3>
          <p class="rm-lede">Fernhollow Studio · Team plan · 8 members</p>
        </div>

        <section class="rm-card" aria-labelledby="rm-billing">
          <h4 id="rm-billing">Billing</h4>
          <div class="rm-row">
            <label class="rm-row-text" for="rm-currency"><b>Default currency</b><span>Used for new invoices and payouts</span></label>
            <select class="mv-select" id="rm-currency"
              data-remember="Invoices from now on will be in {value}"
              data-remember-who="Billing"
              data-remember-why="Invoices already sent stay in {old}; your accountant’s exports switch too.">
              <option value="USD" data-remember-value="USD" selected>USD · US dollar</option>
              <option value="EUR" data-remember-value="EUR">EUR · Euro</option>
              <option value="GBP" data-remember-value="GBP">GBP · Pound sterling</option>
              <option value="JPY" data-remember-value="JPY">JPY · Japanese yen</option>
            </select>
          </div>
          <label class="rm-row">
            <span class="rm-row-text"><b>Auto-renew</b><span>Team plan · renews Oct 15, 2026</span></span>
            <input type="checkbox" role="switch" class="mv-switch" checked
              data-remember-on="Your Team plan renews automatically on Oct 15, 2026"
              data-remember-why-on="The card ending in 4242 will be charged $1,188."
              data-remember-off="Your Team plan ends on Oct 15, 2026"
              data-remember-why-off="After that date the workspace turns read-only. Nothing is deleted."
              data-remember-who="Billing">
          </label>
        </section>

        <section class="rm-card" aria-labelledby="rm-sharing">
          <h4 id="rm-sharing">Sharing &amp; notifications</h4>
          <label class="rm-row">
            <span class="rm-row-text"><b>Weekly digest for the team</b><span>A Monday summary of every project</span></span>
            <input type="checkbox" role="switch" class="mv-switch" checked
              data-remember-off="Your team stops getting the Monday digest"
              data-remember-why-off="Each member is told you turned it off, starting next Monday."
              data-remember-on="Your team gets the Monday digest again"
              data-remember-who="Your team (8 people)">
          </label>
          <fieldset class="rm-row"
            data-remember="{value} can now open “Q4 roadmap”"
            data-remember-who="Link sharing"
            data-remember-why="Anyone who already has the link keeps it; forwarded copies work too.">
            <legend class="rm-row-text"><b>Who can open “Q4 roadmap”</b><span>Link access for this document</span></legend>
            <span class="rm-radios">
              <label class="mv-choice"><input type="radio" class="mv-radio" name="rm-link" value="members" data-remember-value="Only workspace members" checked> Members</label>
              <label class="mv-choice"><input type="radio" class="mv-radio" name="rm-link" value="anyone" data-remember-value="Anyone with the link"> Anyone with the link</label>
            </span>
          </fieldset>
        </section>

        <section class="rm-card" aria-labelledby="rm-members">
          <h4 id="rm-members">Membership</h4>
          <div class="rm-row">
            <span class="rm-who"><span class="rm-face" aria-hidden="true">DT</span><span class="rm-row-text"><b>Design team</b><span>6 members · 14 shared files</span></span></span>
            <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="rm-leave"
              data-remember="Design team members will see that you left"
              data-remember-who="Design team"
              data-remember-why="You lose access to its 14 shared files until someone adds you back.">Leave team</button>
          </div>
          <div class="rm-row">
            <span class="rm-who"><span class="rm-face" aria-hidden="true">LF</span><span class="rm-row-text"><b>Lena Fischer</b><span>Invited Sep 19 · not joined yet</span></span></span>
            <button type="button" class="mv-button" data-variant="ghost" data-size="sm"
              data-remember="A new invitation is on its way to [email protected]"
              data-remember-who="Lena Fischer"
              data-remember-why="Emails can’t be recalled; the previous link stops working."
              data-remember-undo="false">Resend invite</button>
          </div>
        </section>
      </div>
    </div>
  </mv-remembered>

  <div class="rm-controls">
    <p class="rm-log" id="rm-log" aria-live="off">Change a setting: its lasting effect is noted, then kept in Consequences.</p>
    <span class="rm-actions">
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="rm-keep"> Keep notes until dismissed</label>
      <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="rm-reset">Clear ledger</button>
    </span>
  </div>

  <script type="module">
    await customElements.whenDefined("mv-remembered");
    const el = document.getElementById("rm-el");
    const log = document.getElementById("rm-log");
    const leave = document.getElementById("rm-leave");
    const currency = document.getElementById("rm-currency");
    const time = () => new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" });
    const say = (text) => { log.textContent = `${time()} · ${text}`; };

    // Choices made earlier in the session (e.g. restored from the server): straight into the ledger.
    const seed = () => {
      const now = Date.now();
      el.remember({ id: "private-default", who: "Your team (8 people)", what: "New projects are private by default", why: "Existing projects keep their visibility.", undoable: true, undo: () => new Promise((r) => setTimeout(r, 500)), silent: true, at: now - 26 * 60_000 });
      el.remember({ id: "tax-id", who: "Billing", what: "Invoices now show VAT ID DE 811 907 980", why: "Required for EU reverse charge.", undoable: false, silent: true, at: now - 41 * 60_000 });
    };

    // The app owns the revert of an action: handle mv-undo (waitUntil for the server round trip).
    leave.addEventListener("click", () => {
      const left = leave.dataset.left === "true";
      leave.dataset.left = String(!left);
      leave.textContent = left ? "Leave team" : "Rejoin team";
      if (!left) leave.setAttribute("data-remember", "Design team members will see that you left");
    });
    el.addEventListener("mv-undo", (e) => {
      say(`mv-undo · ${e.detail.what}`);
      if (e.detail.source === leave) {
        e.detail.waitUntil(new Promise((r) => setTimeout(r, 450)).then(() => {
          leave.dataset.left = "false";
          leave.textContent = "Leave team";
        }));
      }
    });
    el.addEventListener("mv-remember", (e) => {
      // Rejoining is the undo of leaving, not a new lasting change.
      if (e.detail.source === leave && leave.dataset.left !== "true") { e.preventDefault(); const entry = el.entries.find((x) => x.source === leave && x.status === "active"); if (entry) el.undo(entry.id, "rejoin"); return; }
      say(`mv-remember · ${e.detail.who}: ${e.detail.what}`);
    });
    el.addEventListener("mv-ledger", (e) => say(`mv-ledger · ${e.detail.open ? "opened" : "closed"}`));

    document.getElementById("rm-keep").addEventListener("change", (e) => { el.duration = e.target.checked ? "none" : "6s"; });
    document.getElementById("rm-reset").addEventListener("click", () => {
      el.open = false;
      el.clear();
      seed();
      say("Ledger cleared.");
    });

    seed();
    // Show the mechanic right away: the currency was just switched to EUR.
    currency.value = "EUR";
    currency.dispatchEvent(new Event("change", { bubbles: true }));
  </script>
</div>