Tamper Seal <mv-tamper-seal>

node scripts/add.mjs tamper-seal --out ./src/marvelous

<mv-tamper-seal label="Private messages" viewer="Marcus Webb">
  <p slot="preview">Conversation with Lina Haddad · 14 messages</p>
</mv-tamper-seal>
<script type="module">
  document.querySelector("mv-tamper-seal").addEventListener("mv-unseal", (e) => e.detail.waitUntil("Lina: The tent arrived torn. Can I get a refund?"));
</script>

<div id="ts-demo" style="width:min(100%,64rem);margin-inline:auto">
  <style>
    #ts-demo { display:grid; gap:1rem; align-content:start }
    #ts-demo .ts-top { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding:.875rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface) }
    #ts-demo .ts-case { display:grid; gap:.125rem; min-width:0 }
    #ts-demo .ts-case strong { display:flex; align-items:center; gap:.5rem; font-size:.9375rem; letter-spacing:-.01em }
    #ts-demo .ts-case span { color:var(--mv-fg-muted); font-size:.8125rem }
    #ts-demo .ts-controls { display:flex; align-items:center; gap:.5rem 1rem; flex-wrap:wrap }
    #ts-demo label.mv-choice { font-size:.8125rem }
    #ts-demo .ts-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; align-items:start }
    #ts-demo .ts-profile { display:grid; gap:.25rem; 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) }
    #ts-demo .ts-profile h3 { margin:0 0 .5rem; font-size:.9375rem; letter-spacing:-.01em }
    #ts-demo .ts-profile dl { display:grid; grid-template-columns:auto minmax(0,1fr); margin:0 }
    #ts-demo .ts-profile dt, #ts-demo .ts-profile dd { display:flex; align-items:center; min-height:2.75rem; margin:0; padding-block:.375rem; border-top:1px solid var(--mv-border); font-size:.8125rem }
    #ts-demo .ts-profile dt { padding-inline-end:1.25rem; color:var(--mv-fg-muted) }
    #ts-demo .ts-profile dd { flex-wrap:wrap; gap:.25rem }
    #ts-demo .ts-msgs { display:grid; gap:.5rem; margin:0; padding:0; list-style:none }
    #ts-demo .ts-msg { display:grid; gap:.125rem; padding:.5rem .625rem; border-radius:var(--mv-radius-md); background:var(--mv-surface); border:1px solid var(--mv-border) }
    #ts-demo .ts-msg b { font-size:.75rem; font-weight:600 }
    #ts-demo .ts-msg b span { color:var(--mv-fg-muted); font-weight:400 }
    #ts-demo .ts-msg p { margin:0; font-size:.8125rem }
    #ts-demo .ts-bank { display:grid; grid-template-columns:auto 1fr; gap:.375rem 1rem; margin:0; font-size:.8125rem }
    #ts-demo .ts-bank dt { color:var(--mv-fg-muted) }
    #ts-demo .ts-bank dd { margin:0; font-family:var(--mv-font-mono) }
    #ts-demo .ts-log { margin:0; min-height:1.25rem; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono) }
    @media (max-width:46rem) { #ts-demo .ts-grid { grid-template-columns:minmax(0,1fr) } }
  </style>

  <div class="ts-top">
    <span class="ts-case">
      <strong>Dispute DSP-40817 <span class="mv-badge" data-variant="warning" data-size="sm">Chargeback</span></strong>
      <span>Lina Haddad · $1,284.00 at Aurora Outdoor Co. · you are signed in as Marcus Webb</span>
    </span>
    <span class="ts-controls">
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="ts-refuse"> Server refuses access</label>
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="ts-other">Simulate another opening</button>
    </span>
  </div>

  <!-- Card: private messages, already opened 3 times -->
  <mv-tamper-seal id="ts-messages" label="Private messages" viewer="Marcus Webb" reseal-on-hide
    reasons="Chargeback investigation, Fraud review, Customer asked us to look, Legal or law enforcement request, Other">
    <p slot="preview">Conversation between Lina Haddad and Aurora Outdoor Co. · 14 messages · Aug 2-Sep 18</p>
    <script type="application/json" data-accesses>
      [
        { "by": "Priya Raman", "role": "Disputes", "at": "2026-09-21T10:04:00", "reason": "Chargeback investigation", "note": "Merchant claims the item was delivered; checking the thread for proof." },
        { "by": "Daniel Okafor", "role": "Trust & Safety", "at": "2026-09-12T16:37:00", "reason": "Fraud review", "note": "Flagged by the risk model (score 0.91)." },
        { "by": "Sofia Lindqvist", "role": "Support lead", "at": "2026-08-30T09:12:00", "reason": "Customer asked us to look", "note": "Ticket #88213" }
      ]
    </script>
  </mv-tamper-seal>

  <div class="ts-grid">
    <!-- Inline fields: masked identity data -->
    <section class="ts-profile" aria-labelledby="ts-profile-title">
      <h3 id="ts-profile-title">Cardholder</h3>
      <dl>
        <dt>Name</dt><dd>Lina Haddad</dd>
        <dt>SSN</dt>
        <dd>
          <mv-tamper-seal id="ts-ssn" variant="inline" label="Social Security number" mask="•••-••-6789" viewer="Marcus Webb" reseal-after="1m"
            reasons="Identity verification, Chargeback investigation, Legal or law enforcement request, Other" note="off">
            <script type="application/json" data-accesses>
              [{ "by": "Priya Raman", "role": "Disputes", "at": "2026-09-21T10:06:00", "reason": "Identity verification" }]
            </script>
          </mv-tamper-seal>
        </dd>
        <dt>Card</dt>
        <dd>
          <mv-tamper-seal id="ts-pan" variant="inline" label="Full card number" mask="•••• •••• •••• 4242" viewer="Marcus Webb" reseal-after="1m"
            reasons="Chargeback investigation, Card replacement, Other" note="off"></mv-tamper-seal>
        </dd>
      </dl>
    </section>

    <!-- Card: payout details need a second person -->
    <mv-tamper-seal id="ts-bank" label="Payout bank account" viewer="Marcus Webb" witness note="required"
      witnesses="Priya Raman, Daniel Okafor, Sofia Lindqvist"
      reasons="Payout failed, Merchant changed banks, Fraud review, Other">
      <p slot="preview">Aurora Outdoor Co. · Checking account ending in 0931. Opening requires a second person.</p>
    </mv-tamper-seal>
  </div>

  <p class="ts-log" id="ts-log" aria-live="off">Every opening is sent to the audit log before anything is shown.</p>

  <script type="module">
    const $ = (id) => document.getElementById(id);
    const log = (text) => { $("ts-log").textContent = `${new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" })} · ${text}`; };
    const el = (tag, cls, ...kids) => { const n = document.createElement(tag); if (cls) n.className = cls; n.append(...kids); return n; };

    // Stand-in for your API: authorize, write the audit entry, then return the data.
    const server = (build) => new Promise((resolve, reject) => {
      setTimeout(() => ($("ts-refuse").checked
        ? reject("Your role can’t open this on a disputed account. Ask a Trust & Safety lead.")
        : resolve(build())), 700);
    });

    const messages = () => {
      const f = document.createDocumentFragment();
      const list = el("ul", "ts-msgs");
      for (const [who, when, text] of [
        ["Lina Haddad", "Sep 18, 9:42 AM", "The tent never arrived. The tracking page still says “label created”."],
        ["Aurora Outdoor Co.", "Sep 18, 2:15 PM", "Our carrier shows it was left at the front desk on Sep 9. Could a neighbor have it?"],
        ["Lina Haddad", "Sep 18, 3:01 PM", "I live alone in a house, there is no front desk. I’d like a refund please."],
      ]) list.append(el("li", "ts-msg", el("b", "", who, " ", el("span", "", `· ${when}`)), el("p", "", text)));
      f.append(list);
      return f;
    };

    $("ts-messages").addEventListener("mv-unseal", (e) => {
      log(`POST /disputes/DSP-40817/messages/unseal · reason: ${e.detail.reasonLabel}`);
      e.detail.waitUntil(server(messages));
    });
    for (const [id, value] of [["ts-ssn", "521-44-6789"], ["ts-pan", "4916 3385 0211 4242"]]) {
      $(id).addEventListener("mv-unseal", (e) => {
        log(`POST /cardholders/ch_7Q2k/${id === "ts-ssn" ? "ssn" : "pan"}/unseal · ${e.detail.reasonLabel}`);
        e.detail.waitUntil(server(() => value));
      });
    }
    $("ts-bank").addEventListener("mv-unseal", (e) => {
      const { witness } = e.detail;
      log(`POST /merchants/aurora/payout-account/unseal · co-signed by ${witness.name}`);
      e.detail.waitUntil(new Promise((resolve, reject) => setTimeout(() => {
        if ($("ts-refuse").checked) return reject("Your role can’t open payout details.");
        if (witness.code !== "4471") return reject(`${witness.name}’s approval code didn’t match. (Demo code: 4471)`);
        const dl = el("dl", "ts-bank");
        for (const [k, v] of [["Bank", "First Harbor Bank"], ["Routing", "021000089"], ["Account", "4410 2297 0931"], ["Holder", "Aurora Outdoor Co. LLC"]]) dl.append(el("dt", "", k), el("dd", "", v));
        resolve(dl);
      }, 700)));
    });

    document.addEventListener("mv-access", (e) => { if (e.target.closest("#ts-demo")) log(`Stamped: ${e.detail.access.by} · ${e.detail.access.reason}`); });
    document.addEventListener("mv-reseal", (e) => { if (e.target.closest("#ts-demo")) log(`Resealed (${e.detail.reason}). The stamp stays.`); });

    $("ts-other").addEventListener("click", () => {
      $("ts-messages").addAccess({ by: "Hannah Schmidt", role: "Compliance", at: new Date(), reason: "Legal or law enforcement request", note: "Subpoena 2026-CV-1142" });
    });
  </script>
</div>