Midnight <mv-midnight>

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

<mv-midnight mode="Admin mode" grant="Refunds unlocked" duration="15m" autostart></mv-midnight>

<div id="mn-demo" style="width:min(100%,56rem);margin-inline:auto">
  <style>
    #mn-demo { display:grid; gap:1.25rem; align-content:start }
    #mn-demo .mn-app { border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm); overflow:hidden }
    #mn-demo .mn-top { display:flex; align-items:center; gap:1rem; height:3.25rem; padding:0 1rem 0 1.125rem; border-bottom:1px solid var(--mv-border) }
    #mn-demo .mn-brand { display:flex; align-items:center; gap:.5rem; font-weight:650; font-size:.9375rem; letter-spacing:-.01em; white-space:nowrap }
    #mn-demo .mn-logo { display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:var(--mv-radius-md); background:var(--mv-fg); color:var(--mv-bg) }
    #mn-demo .mn-logo svg { width:1rem; height:1rem }
    #mn-demo .mn-nav { display:flex; gap:.25rem; margin:0; padding:0; list-style:none }
    #mn-demo .mn-nav a { display:block; padding:.375rem .625rem; border-radius:var(--mv-radius-md); color:var(--mv-fg-muted); font-size:.8125rem; font-weight:500; text-decoration:none }
    #mn-demo .mn-nav a[aria-current] { background:var(--mv-bg-muted); color:var(--mv-fg) }
    #mn-demo .mn-end { display:flex; align-items:center; gap:.75rem; margin-inline-start:auto }
    #mn-demo .mn-me { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--mv-bg-emphasis); color:var(--mv-fg); font-size:.75rem; font-weight:600 }
    #mn-demo .mn-body { display:grid; gap:1rem; padding:1rem 1.125rem 1.125rem }
    #mn-demo .mn-grid { display:grid; grid-template-columns:minmax(0,1fr) 16rem; gap:1rem }
    #mn-demo .mn-card { min-width:0; padding:1rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-bg-subtle) }
    #mn-demo .mn-card h4 { margin:0 0 .25rem; font-size:.875rem }
    #mn-demo .mn-card p { margin:0; color:var(--mv-fg-muted); font-size:.8125rem; line-height:1.5 }
    #mn-demo .mn-dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.5rem 1rem; margin:.875rem 0 0; font-size:.8125rem }
    #mn-demo .mn-dl dt { color:var(--mv-fg-muted) }
    #mn-demo .mn-dl dd { margin:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
    #mn-demo [data-midnight-reverted] { color:var(--mv-fg-subtle) }
    #mn-demo .mn-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem }
    #mn-demo .mn-log { min-height:1.25rem; margin:0; color:var(--mv-fg-subtle); font:.75rem/1.45 var(--mv-font-mono) }
    #mn-demo .mn-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) }
    #mn-demo .mn-controls .mv-choice { font-size:.8125rem }
    #mn-demo .mn-actions { display:flex; align-items:center; gap:.5rem 1rem; flex-wrap:wrap }
    #mn-demo .mn-list { display:grid; margin:.75rem 0 0; padding:0; list-style:none; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-surface); overflow:hidden }
    #mn-demo .mn-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.125rem 1rem; padding:.625rem .875rem; font-size:.8125rem }
    #mn-demo .mn-list li + li { border-top:1px solid var(--mv-border) }
    #mn-demo .mn-list span:last-child { color:var(--mv-fg-subtle); font-variant-numeric:tabular-nums }
    #mn-demo .mn-list small { grid-column:1 / -1; color:var(--mv-fg-muted); font-size:.75rem }
    #mn-demo .mn-h { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap }
    #mn-demo .mn-h h4 { margin:0; font-size:.9375rem }
    @media (max-width:44rem) {
      #mn-demo .mn-nav { display:none }
      #mn-demo .mn-grid { grid-template-columns:minmax(0,1fr) }
    }
  </style>

  <!-- 1. Band: sudo-style admin mode on a billing console (3 minutes here, chimes at 1 min and 15 s) -->
  <section class="mn-app" aria-label="Billing admin console">
    <header class="mn-top">
      <span class="mn-brand">
        <span class="mn-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 7h16v10H4z"/><path d="M4 11h16"/></svg></span>
        Tallybook
      </span>
      <ul class="mn-nav">
        <li><a href="#" aria-current="page">Customers</a></li>
        <li><a href="#">Invoices</a></li>
        <li><a href="#">Audit log</a></li>
      </ul>
      <span class="mn-end"><span class="mn-me" aria-hidden="true">JL</span></span>
    </header>
    <div class="mn-body">
      <mv-midnight id="mn-admin" autostart duration="3m" extend-by="2m" chimes="1m, 15s" max-extensions="2"
        mode="Admin mode" grant="Refunds, MFA resets and full customer data unlocked" granted-by="Priya Raman"
        channel="mn-demo-admin">
        <ul slot="reverts">
          <li>Refunds and workspace deletion disappear</li>
          <li>MFA reset is locked again</li>
          <li>Emails and card details are masked again</li>
          <li>Your normal role (Support agent) applies</li>
        </ul>
        <button slot="ended" type="button" class="mv-button" data-size="sm" data-variant="outline" id="mn-again">Enter admin mode again</button>
      </mv-midnight>

      <div class="mn-grid">
        <div class="mn-card">
          <h4>Alder Grove Traders · Pro plan</h4>
          <p>Customer since March 2023 · 48 seats · billed annually</p>
          <dl class="mn-dl">
            <dt>Billing email</dt>
            <dd data-midnight-original="d•••••@example.com">[email protected]</dd>
            <dt>Card on file</dt>
            <dd data-midnight-original="Credit card •••• ••••">Credit card 4242 · exp 08/28 · ZIP 94107</dd>
            <dt>Last invoice</dt>
            <dd>INV-2048 · $12,400.00 · paid Sep 1, 2026</dd>
          </dl>
          <div class="mn-row">
            <button type="button" class="mv-button" data-size="sm" data-midnight-only>Issue refund</button>
            <button type="button" class="mv-button" data-size="sm" data-variant="outline" data-midnight-only="inert">Reset MFA</button>
            <button type="button" class="mv-button" data-size="sm" data-variant="outline">Send receipt</button>
            <button type="button" class="mv-button" data-size="sm" data-variant="destructive" data-midnight-only>Delete workspace</button>
          </div>
        </div>
        <div class="mn-card">
          <h4>Activity</h4>
          <p>What the mode reports to the app.</p>
          <p class="mn-log" id="mn-log" style="margin-top:.75rem">Admin mode started.</p>
        </div>
      </div>
    </div>
    <div class="mn-controls">
      <span class="mn-actions">
        <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="mn-reauth" checked> Extending asks for a passkey</label>
        <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="mn-sound"> Soft chime sound</label>
      </span>
      <span class="mn-actions" style="gap:.5rem">
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="mn-ff">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 6 7 6-7 6zM13 6l7 6-7 6z"/></svg>
          Jump to the last minute
        </button>
        <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="mn-skip">Skip to the end</button>
      </span>
    </div>
  </section>

  <!-- 2. Chip: support agent viewing the app as a customer (impersonation), 10 minutes -->
  <section class="mn-app" aria-label="Support workspace">
    <header class="mn-top">
      <span class="mn-brand">
        <span class="mn-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 6h16v10H8l-4 4z"/></svg></span>
        Tidewell
      </span>
      <span class="mn-end">
        <mv-midnight id="mn-view" variant="chip" name="view-as" autostart duration="10m" extend-by="5m" chimes="5m, 1m"
          mode="Viewing as Alex Chen" grant="Read-only: you see exactly what Alex sees" granted-by="Marcus Webb">
          <ul slot="reverts">
            <li>You’re back in your own account</li>
            <li>Alex’s inbox and settings are hidden again</li>
          </ul>
        </mv-midnight>
        <span class="mn-me" aria-hidden="true">SK</span>
      </span>
    </header>
    <div class="mn-body">
      <div class="mn-h">
        <h4 data-midnight-for="view-as" data-midnight-original="Your inbox">Alex Chen’s inbox · [email protected]</h4>
        <button type="button" class="mv-button" data-size="sm" data-variant="outline" data-midnight-for="view-as" data-midnight-only>Copy what Alex sees</button>
      </div>
      <ul class="mn-list" data-midnight-for="view-as" data-midnight-only>
        <li><span>Invoice INV-3310 failed to send</span><span>2:14 PM</span><small>“Your card was declined” shown to Alex, but the card was updated yesterday.</small></li>
        <li><span>Welcome to Brightline Analytics</span><span>Sep 18</span><small>Onboarding checklist: 3 of 5 steps done.</small></li>
        <li><span>Your trial ends in 3 days</span><span>Sep 17</span><small>Upgrade prompt with the old price ($29/month).</small></li>
      </ul>
    </div>
  </section>

  <script type="module">
    const admin = document.getElementById("mn-admin");
    const view = document.getElementById("mn-view");
    const log = document.getElementById("mn-log");
    const reauth = document.getElementById("mn-reauth");
    const time = (d = new Date()) => d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" });
    const say = (text) => { log.textContent = `${time()} · ${text}`; };

    // Extending can require a fresh passkey check: the app answers through waitUntil().
    admin.addEventListener("mv-extend", (e) => {
      if (!reauth.checked) { say("Extended without re-authentication."); return; }
      say("Waiting for passkey confirmation…");
      e.detail.waitUntil(new Promise((resolve) => setTimeout(resolve, 900)).then(() => say(`Passkey confirmed. Admin mode extended to ${time(e.detail.until)}.`)));
    });
    admin.addEventListener("mv-chime", (e) => say(`Chime: ${Math.round(e.detail.remaining / 1000)} s left.`));
    admin.addEventListener("mv-end", () => say("Ending admin mode early…"));
    admin.addEventListener("mv-midnight", (e) => say(`Admin mode ended (${e.detail.reason}). Privileges dropped.`));
    admin.addEventListener("mv-sync", () => say("Extended from another tab."));
    document.getElementById("mn-sound").addEventListener("change", (e) => { admin.sound = e.target.checked; });

    const ensureOn = () => { if (admin.state === "ended" || admin.state === "idle") admin.start(); };
    // Demo shortcut: pretend two of the three minutes have already gone by.
    document.getElementById("mn-ff").addEventListener("click", () => {
      ensureOn();
      admin.since = new Date(Date.now() - 119_000).toISOString();
      admin.deadline = Date.now() + 61_000;
    });
    document.getElementById("mn-skip").addEventListener("click", () => { ensureOn(); admin.deadline = Date.now() + 3_000; });
    document.getElementById("mn-again").addEventListener("click", () => {
      say("Passkey confirmed. Admin mode started.");
      admin.start({ duration: "3m" });
    });
    admin.addEventListener("mv-dismiss", () => {
      say("Band dismissed. Signing back in to admin mode…");
      setTimeout(() => admin.start({ duration: "3m" }), 1500);
    });
    view.addEventListener("mv-dismiss", () => setTimeout(() => view.start({ duration: "10m" }), 1500));
  </script>
</div>