Timed Choice <mv-timed-choice>

node scripts/add.mjs timed-choice --out ./src/marvelous

<div id="tc-demo" style="width:min(100%,60rem);margin-inline:auto">
  <style>
    #tc-demo { display:grid; gap:1rem; align-content:start }
    #tc-demo .tc-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1.25rem; flex-wrap:wrap; padding:.75rem 1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-bg-subtle) }
    #tc-demo .tc-group { display:flex; align-items:center; gap:.625rem; flex-wrap:wrap }
    #tc-demo .tc-k { color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    #tc-demo .tc-assist .mv-button[aria-pressed="true"] { --_bg:var(--mv-fg); --_bg-hover:var(--mv-fg); --_fg:var(--mv-bg); --_border:transparent }
    #tc-demo .mv-choice { font-size:.8125rem }
    #tc-demo .tc-log { display:flex; align-items:center; gap:.5rem; min-height:1.5rem; margin:0; color:var(--mv-fg-muted); font-size:.75rem }
    #tc-demo .tc-log b { color:var(--mv-fg); font-weight:500 }

    /* Scene 1: display settings */
    #tc-demo .tc-settings { display:grid; gap:.875rem; padding:1rem 1.125rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm) }
    #tc-demo .tc-settings h3 { margin:0; font-size:.9375rem; letter-spacing:-.01em }
    #tc-demo .tc-rows { display:grid; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); overflow:hidden }
    #tc-demo .tc-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.625rem .875rem; font-size:.8125rem }
    #tc-demo .tc-row + .tc-row { border-top:1px solid var(--mv-border) }
    #tc-demo .tc-row span:first-child { color:var(--mv-fg-muted) }
    #tc-demo .tc-row b { font-weight:500; font-variant-numeric:tabular-nums }

    /* Scene 2 + 3 */
    #tc-demo .tc-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem }
    #tc-demo .tc-player { position:relative; min-height:23rem; border-radius:var(--mv-radius-xl); overflow:hidden; background:
      radial-gradient(120% 90% at 20% 15%, oklch(0.42 0.09 230) 0%, transparent 55%),
      radial-gradient(90% 80% at 85% 90%, oklch(0.36 0.08 300) 0%, transparent 60%),
      oklch(0.17 0.02 260); color:oklch(0.97 0 0); box-shadow:var(--mv-shadow-md) }
    #tc-demo .tc-credits { position:absolute; inset:1.25rem 1.25rem auto; display:grid; gap:.25rem; font-size:.75rem; color:oklch(0.97 0 0 / .7) }
    #tc-demo .tc-credits b { color:oklch(0.97 0 0); font-size:.9375rem; font-weight:600; letter-spacing:-.01em }
    #tc-demo .tc-status { position:absolute; inset:auto 1.25rem 1.25rem; font-size:.8125rem; color:oklch(0.97 0 0 / .85) }
    #tc-demo .tc-thumb { display:grid; place-items:end start; padding:.3125rem .375rem; background:linear-gradient(135deg, oklch(0.55 0.1 210), oklch(0.32 0.08 270)) !important; color:oklch(0.98 0 0); font-size:.625rem; font-weight:600; letter-spacing:.04em }

    #tc-demo .tc-window { position:relative; min-height:23rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle); overflow:hidden; box-shadow:var(--mv-shadow-sm) }
    #tc-demo .tc-titlebar { display:flex; align-items:center; gap:.375rem; height:2.25rem; padding:0 .875rem; border-bottom:1px solid var(--mv-border); background:var(--mv-surface); font-size:.75rem; color:var(--mv-fg-muted) }
    #tc-demo .tc-titlebar i { width:.625rem; height:.625rem; border-radius:50%; background:var(--mv-bg-emphasis) }
    #tc-demo .tc-titlebar span { margin-inline-start:.5rem }
    #tc-demo .tc-lines { display:grid; gap:.625rem; padding:1.25rem 1.5rem }
    #tc-demo .tc-lines i { height:.5rem; border-radius:4px; background:var(--mv-bg-emphasis); opacity:.7 }
    #tc-demo .tc-tabs { display:grid; gap:.25rem; margin:0; padding:.5rem; list-style:none; border:1px solid var(--mv-border); border-radius:var(--mv-radius-md); background:var(--mv-bg-subtle); font-size:.75rem }
    #tc-demo .tc-tabs li { display:flex; justify-content:space-between; gap:.75rem; padding:.125rem .25rem; color:var(--mv-fg) }
    #tc-demo .tc-tabs li span:last-child { color:var(--mv-fg-subtle) }
    #tc-demo .tc-done { position:absolute; inset:auto 1.5rem 1.25rem; margin:0; font-size:.8125rem; color:var(--mv-fg-muted) }
    @media (max-width:46rem) { #tc-demo .tc-pair { grid-template-columns:minmax(0,1fr) } }
  </style>

  <div class="tc-toolbar">
    <div class="tc-group tc-assist" role="group" aria-label="Timing assist">
      <span class="tc-k" aria-hidden="true">Timing assist</span>
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" aria-pressed="true" data-assist="1">1×</button>
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" aria-pressed="false" data-assist="2">2×</button>
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" aria-pressed="false" data-assist="4">4×</button>
    </div>
    <div class="tc-group">
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="tc-hover" checked> Pause on hover</label>
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="tc-replay">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
        Replay all
      </button>
    </div>
  </div>

  <!-- Inline bar: the safe default is to revert display changes nobody confirmed -->
  <section class="tc-settings" aria-labelledby="tc-settings-title">
    <h3 id="tc-settings-title">Display</h3>
    <div class="tc-rows">
      <div class="tc-row"><span>Resolution</span><b id="tc-res">2560 × 1440 (Recommended)</b></div>
      <div class="tc-row"><span>Refresh rate</span><b>144 Hz</b></div>
    </div>
    <mv-timed-choice id="tc-bar" open duration="15s">
      <span class="mv-timed-choice-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg></span>
      <div class="mv-timed-choice-body">
        <p class="mv-timed-choice-title">Keep these display settings?</p>
        <p class="mv-timed-choice-text">Otherwise it reverts to 1920 × 1080 on its own. If the screen looks wrong, just wait.</p>
      </div>
      <div class="mv-timed-choice-actions">
        <button class="mv-button" data-variant="outline" data-size="sm" value="revert" data-default>Revert</button>
        <button class="mv-button" data-size="sm" value="keep">Keep changes</button>
      </div>
    </mv-timed-choice>
  </section>

  <div class="tc-pair">
    <!-- Floating card, contained in a video player -->
    <div class="tc-player" data-theme="dark" role="region" aria-label="Video player">
      <div class="tc-credits"><span>Harbor Lines · Season 2</span><b>Episode 3 · Low Tide</b><span>End credits</span></div>
      <p class="tc-status" id="tc-player-status" hidden></p>
      <mv-timed-choice id="tc-card" variant="card" contain open duration="10s" style="--mv-timed-choice-width:19rem">
        <span class="mv-timed-choice-media tc-thumb" aria-hidden="true">S2 · E4</span>
        <div class="mv-timed-choice-body">
          <p class="mv-timed-choice-eyebrow">Up next · Season 2</p>
          <p class="mv-timed-choice-title">The Night Ferry</p>
          <p class="mv-timed-choice-text">48 min · Mara takes the last boat out.</p>
        </div>
        <div class="mv-timed-choice-actions">
          <button class="mv-button" data-variant="ghost" data-size="sm" value="cancel">Cancel</button>
          <button class="mv-button" data-size="sm" value="play" data-default>Play now</button>
        </div>
      </mv-timed-choice>
    </div>

    <!-- Non-modal dialog, contained in an app window -->
    <div class="tc-window">
      <div class="tc-titlebar" aria-hidden="true"><i></i><i></i><i></i><span>Atlas Notes</span></div>
      <div class="tc-lines" aria-hidden="true"><i style="width:62%"></i><i style="width:88%"></i><i style="width:74%"></i><i style="width:80%"></i><i style="width:45%"></i></div>
      <p class="tc-done" id="tc-window-status" hidden></p>
      <mv-timed-choice id="tc-dialog" variant="dialog" contain open duration="20s" count="none" style="--mv-timed-choice-width:21rem">
        <p class="mv-timed-choice-title">Restore your previous session?</p>
        <p class="mv-timed-choice-text">6 tabs from Tuesday, Sep 22 at 4:18 PM. <span data-countdown>Starting fresh in <b data-remaining="long"></b>;</span> your tabs stay in History either way.</p>
        <ul class="tc-tabs">
          <li><span>Q4 roadmap</span><span>Edited 4:02 PM</span></li>
          <li><span>Hiring plan · Lisbon</span><span>Edited 3:47 PM</span></li>
          <li><span>+ 4 more</span><span></span></li>
        </ul>
        <div class="mv-timed-choice-actions">
          <button class="mv-button" data-variant="outline" data-size="sm" value="fresh" data-default>Start fresh</button>
          <button class="mv-button" data-size="sm" value="restore">Restore 6 tabs</button>
        </div>
      </mv-timed-choice>
    </div>
  </div>

  <p class="tc-log" id="tc-log" aria-live="polite"><span class="mv-badge" data-variant="secondary" data-shape="pill">mv-choice</span> Waiting: hover or tab into a prompt to pause it.</p>

  <script type="module">
    const root = document.getElementById("tc-demo");
    const prompts = [...root.querySelectorAll("mv-timed-choice")];
    const log = root.querySelector("#tc-log");
    const res = root.querySelector("#tc-res");
    const playerStatus = root.querySelector("#tc-player-status");
    const windowStatus = root.querySelector("#tc-window-status");
    const replayTimers = new Map();

    const say = (name, text) => {
      const badge = log.querySelector(".mv-badge");
      badge.textContent = name;
      log.replaceChildren(badge, " ", text);
    };
    const results = {
      "tc-bar": { revert: "Reverted to 1920 × 1080.", keep: "Kept 2560 × 1440." },
      "tc-card": { play: "Playing S2 · E4, The Night Ferry", cancel: "Autoplay canceled. Browse episodes" },
      "tc-dialog": { fresh: "Started fresh. Previous tabs are in History.", restore: "Restored 6 tabs." },
    };

    const replay = (p, delay) => {
      clearTimeout(replayTimers.get(p));
      replayTimers.set(p, setTimeout(() => {
        playerStatus.hidden = true;
        windowStatus.hidden = true;
        res.textContent = "2560 × 1440 (Recommended)";
        p.show();
      }, delay));
    };

    for (const p of prompts) {
      p.addEventListener("mv-choice", (e) => {
        const { value, reason } = e.detail;
        const text = results[p.id][value];
        say("mv-choice", `${p.id.replace("tc-", "")} → “${value}” (${reason === "timeout" ? "timed out, safe default" : "chosen by the user"}). ${text}`);
        if (p.id === "tc-bar" && value === "revert") res.textContent = "1920 × 1080";
        if (p.id === "tc-card") { playerStatus.textContent = text; playerStatus.hidden = false; }
        if (p.id === "tc-dialog") { windowStatus.textContent = text; windowStatus.hidden = false; }
        replay(p, 4000);
      });
      p.addEventListener("mv-pause", (e) => say("mv-pause", `${p.id.replace("tc-", "")} paused (${e.detail.reasons.join(", ")}), ${Math.ceil(e.detail.remaining / 1000)} s left.`));
      p.addEventListener("mv-extend", (e) => say("mv-extend", `${p.id.replace("tc-", "")}: +${e.detail.added / 1000} s, ${Math.ceil(e.detail.remaining / 1000)} s left.`));
    }

    root.querySelector("#tc-replay").addEventListener("click", () => {
      for (const p of prompts) replay(p, 0);
      say("mv-choice", "Replaying all three prompts.");
    });
    root.querySelector("#tc-hover").addEventListener("change", (e) => {
      for (const p of prompts) p.pauseOn = e.target.checked ? "hover focus hidden offscreen" : "focus hidden offscreen";
    });
    for (const b of root.querySelectorAll("[data-assist]")) {
      b.addEventListener("click", () => {
        for (const x of root.querySelectorAll("[data-assist]")) x.setAttribute("aria-pressed", String(x === b));
        for (const p of prompts) { p.assist = Number(b.dataset.assist); replay(p, 0); }
        say("assist", `Timing assist ${b.dataset.assist}×: every timer is ${b.dataset.assist === "1" ? "at its normal length" : `${b.dataset.assist} times longer`}.`);
      });
    }
  </script>
</div>