Reveal Once <mv-reveal-once>

node scripts/add.mjs reveal-once --out ./src/marvelous

<mv-reveal-once label="Production API key">
  <template>prc_live_8f2c9a71d04be63c5e1a</template>
</mv-reveal-once>

<div id="ro-demo" style="width:min(100%,66rem);margin-inline:auto">
  <style>
    #ro-demo { display:grid; gap:1.25rem }
    #ro-demo .ro-app { border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle); overflow:hidden }
    #ro-demo .ro-bar { display:flex; align-items:center; gap:.75rem; height:3.25rem; padding:0 1.125rem; border-bottom:1px solid var(--mv-border); background:var(--mv-surface) }
    #ro-demo .ro-brand { display:flex; align-items:center; gap:.5rem; font-weight:650; font-size:.9375rem; letter-spacing:-.01em }
    #ro-demo .ro-logo { display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:var(--mv-radius-md); background:var(--mv-accent); color:var(--mv-fg-on-accent) }
    #ro-demo .ro-logo svg { width:1rem; height:1rem }
    #ro-demo .ro-crumbs { display:flex; gap:.375rem; color:var(--mv-fg-muted); font-size:.8125rem }
    #ro-demo .ro-crumbs b { color:var(--mv-fg); font-weight:500 }
    #ro-demo .ro-body { display:grid; grid-template-columns:minmax(0,1fr) 16rem; gap:1.25rem; padding:1.25rem }
    #ro-demo .ro-side { display:grid; gap:1rem; align-content:start }
    #ro-demo .ro-panel { display:grid; gap:.75rem; padding:1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-surface) }
    #ro-demo .ro-panel h4 { margin:0; font-size:.8125rem; font-weight:600 }
    #ro-demo .ro-panel p { margin:0; color:var(--mv-fg-muted); font-size:.75rem; line-height:1.5 }
    #ro-demo .ro-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; font-size:.8125rem }
    #ro-demo .ro-btns { display:flex; flex-wrap:wrap; gap:.5rem }
    #ro-demo .ro-log { display:grid; gap:.25rem; margin:0; padding:0; list-style:none; min-height:4.5rem; color:var(--mv-fg-muted); font:.6875rem/1.45 var(--mv-font-mono) }
    #ro-demo .ro-log li:first-child { color:var(--mv-fg) }
    #ro-demo .ro-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:1.25rem; align-items:start }
    #ro-demo .ro-cap { display:flex; align-items:center; gap:.5rem; margin:0 0 .5rem; color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    @media (max-width:46rem) { #ro-demo .ro-body { grid-template-columns:minmax(0,1fr) } }
  </style>

  <!-- 1 · A key was just created in developer settings: the “before” state -->
  <section class="ro-app" aria-label="Developer settings">
    <header class="ro-bar">
      <span class="ro-brand">
        <span class="ro-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="M3.5 8 12 3.5 20.5 8v8L12 20.5 3.5 16z"/><path d="M3.5 8 12 12.5 20.5 8M12 12.5v8"/></svg></span>
        Parcelo
      </span>
      <span class="ro-crumbs" aria-hidden="true">/ Developers / <b>API keys</b></span>
    </header>
    <div class="ro-body">
      <mv-reveal-once id="ro-key" label="Production API key" created-by="you"
        prepare="A password manager or secrets vault, Access to your server’s environment variables"></mv-reveal-once>

      <div class="ro-side">
        <div class="ro-panel">
          <h4>Options</h4>
          <label class="ro-row">Hold to reveal <input type="checkbox" role="switch" class="mv-switch" data-size="sm" id="ro-hold"></label>
          <label class="ro-row">Retype to confirm <input type="checkbox" role="switch" class="mv-switch" data-size="sm" id="ro-retype"></label>
          <div class="ro-btns">
            <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="ro-leave">Leave page</button>
            <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="ro-new">New key</button>
          </div>
        </div>
        <div class="ro-panel">
          <h4>Events <span class="mv-badge" data-variant="secondary" data-size="sm">never the secret</span></h4>
          <ul class="ro-log" id="ro-log" aria-live="off"><li>Key created. Waiting for reveal.</li></ul>
        </div>
      </div>
    </div>
  </section>

  <div class="ro-grid">
    <!-- 2 · Two-factor recovery codes: revealed, download + print, retype one code to confirm -->
    <div>
      <p class="ro-cap"><span class="mv-badge" data-variant="warning" data-size="sm">During</span> Recovery codes, retype a code to confirm</p>
      <mv-reveal-once id="ro-codes" label="Recovery codes" confirm="retype" downloadable filename="parcelo-recovery-codes" printable clear-clipboard="60"></mv-reveal-once>
    </div>

    <!-- 3 · A webhook signing secret saved last month: only its fingerprint remains -->
    <div>
      <p class="ro-cap"><span class="mv-badge" data-variant="success" data-size="sm">After</span> Webhook signing secret, saved in August</p>
      <mv-reveal-once id="ro-hook" label="Webhook signing secret" fingerprint="whk_…c81d" created="2026-08-03T10:20:00" created-by="Priya Nair"></mv-reveal-once>
    </div>
  </div>

  <script type="module">
    const $ = (id) => document.getElementById(id);
    const key = $("ro-key"), codes = $("ro-codes"), hook = $("ro-hook"), log = $("ro-log");
    const ABC = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789";
    const rand = (n, set = ABC) => Array.from(crypto.getRandomValues(new Uint32Array(n)), (v) => set[v % set.length]).join("");
    const newKey = () => `prc_live_${rand(32)}`;
    const newCodes = () => Array.from({ length: 10 }, () => `${rand(4, "abcdefghjkmnpqrstuvwxyz23456789")}-${rand(4, "abcdefghjkmnpqrstuvwxyz23456789")}`);
    const time = () => new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" });
    const say = (text) => {
      log.prepend(Object.assign(document.createElement("li"), { textContent: `${time()} ${text}` }));
      while (log.children.length > 5) log.lastElementChild.remove();
    };

    await customElements.whenDefined("mv-reveal-once");
    // Secrets are set from JS (never server-rendered into the page).
    key.secret = newKey();
    codes.secret = newCodes();
    codes.reveal();

    // Event details carry facts, never the value.
    key.addEventListener("mv-reveal", () => say("mv-reveal"));
    key.addEventListener("mv-copy", (e) => say(`mv-copy · ${e.detail.method}`));
    key.addEventListener("mv-saved", (e) => say(`mv-saved · ${e.detail.method}${e.detail.copied ? " · copied" : ""} · ${e.detail.fingerprint}`));
    key.addEventListener("mv-leave", (e) => say(`mv-leave · ${e.detail.reason} (${e.detail.state})`));
    key.addEventListener("mv-rotate", (e) => {
      say(`mv-rotate · revoking ${e.detail.fingerprint}`);
      e.detail.waitUntil(new Promise((r) => setTimeout(() => r(newKey()), 700)));
    });

    $("ro-hold").addEventListener("change", (e) => { key.hold = e.target.checked; });
    $("ro-retype").addEventListener("change", (e) => { key.confirm = e.target.checked ? "retype" : "checkbox"; });
    $("ro-leave").addEventListener("click", async () => {
      const ok = await key.leave();
      say(ok ? "Navigation allowed" : "Stayed on the page");
    });
    $("ro-new").addEventListener("click", () => { key.secret = newKey(); say("New key created"); });

    // Rotation: the server issues a new secret; the component shows it once again.
    for (const el of [codes, hook]) {
      el.addEventListener("mv-rotate", (e) => {
        e.detail.waitUntil(new Promise((r) => setTimeout(() => r(el === codes ? newCodes() : `whk_${rand(32)}`), 700)));
      });
    }
  </script>
</div>