Pass Card <mv-pass-card>

node scripts/add.mjs pass-card --out ./src/marvelous

<mv-pass-card label="Freeze passes" total="3" blocked rule="Merging to main is frozen until Oct 3" action="PR #4821"></mv-pass-card>

<div id="pc-demo" style="width:min(100%,60rem);margin-inline:auto">
  <style>
    #pc-demo { display:grid; gap:1.25rem; align-content:start }
    #pc-demo .pc-pr { display:grid; gap:0; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle); overflow:hidden }
    #pc-demo .pc-pr-head { display:grid; gap:.375rem; padding:1rem 1.25rem; background:var(--mv-surface); border-bottom:1px solid var(--mv-border) }
    #pc-demo .pc-pr-title { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0; font-size:1.0625rem; font-weight:650; letter-spacing:-.01em }
    #pc-demo .pc-pr-title span { color:var(--mv-fg-subtle); font-weight:400 }
    #pc-demo .pc-pr-sub { margin:0; color:var(--mv-fg-muted); font-size:.8125rem }
    #pc-demo .pc-pr-sub code { padding:.0625rem .375rem; border-radius:var(--mv-radius-sm); background:var(--mv-bg-muted); font:.75rem var(--mv-font-mono); color:var(--mv-fg) }
    #pc-demo .pc-checks { display:grid; gap:0; margin:0; padding:0; list-style:none; background:var(--mv-surface); border-bottom:1px solid var(--mv-border) }
    #pc-demo .pc-checks li { display:flex; align-items:center; gap:.625rem; padding:.625rem 1.25rem; font-size:.8125rem; border-top:1px solid var(--mv-border) }
    #pc-demo .pc-checks li:first-child { border-top:0 }
    #pc-demo .pc-checks svg { width:1rem; height:1rem; flex:none }
    #pc-demo .pc-ok { color:color-mix(in oklab, var(--mv-success), var(--mv-fg) 25%) }
    #pc-demo .pc-no { color:color-mix(in oklab, var(--mv-danger), var(--mv-fg) 20%) }
    #pc-demo .pc-checks .mv-badge { margin-inline-start:auto }
    #pc-demo .pc-body { display:grid; gap:1rem; padding:1rem 1.25rem 1.25rem }
    #pc-demo .pc-merge { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap }
    #pc-demo .pc-merge p { margin:0; color:var(--mv-fg-muted); font-size:.8125rem }
    #pc-demo .pc-controls { display:flex; align-items:center; gap:.75rem 1.25rem; flex-wrap:wrap; padding:.875rem 1rem; border:1px dashed var(--mv-border-strong); border-radius:var(--mv-radius-lg) }
    #pc-demo .pc-controls .mv-choice { font-size:.8125rem }
    #pc-demo .pc-log { flex:1 1 14rem; min-width:0; margin:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono); text-align:end }
    #pc-demo .pc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)); gap:1.25rem; align-items:start }
    #pc-demo .pc-panel { 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) }
    #pc-demo .pc-kicker { margin:0; color:var(--mv-fg-subtle); font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase }
    #pc-demo .pc-assign { display:grid; gap:.25rem }
    #pc-demo .pc-assign strong { font-size:.9375rem; letter-spacing:-.01em }
    #pc-demo .pc-assign span { color:var(--mv-fg-muted); font-size:.8125rem }
    #pc-demo .pc-expense { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; flex-wrap:wrap }
    #pc-demo .pc-expense strong { font-size:.9375rem }
    #pc-demo .pc-expense span { font-variant-numeric:tabular-nums; font-weight:600 }
    #pc-demo .pc-note { margin:0; color:var(--mv-fg-muted); font-size:.75rem }
  </style>

  <!-- Main: a pull request blocked by a release freeze, with a team budget of freeze passes -->
  <section class="pc-pr" aria-label="Pull request #4821">
    <header class="pc-pr-head">
      <p class="pc-pr-title">Fix rounding in checkout totals <span>#4821</span></p>
      <p class="pc-pr-sub">Maya Chen wants to merge 3 commits into <code>main</code> from <code>fix/checkout-rounding</code></p>
    </header>
    <ul class="pc-checks">
      <li><svg class="pc-ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>All 14 checks passed</li>
      <li><svg class="pc-ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Approved by Jonas Weber and Leila Haddad</li>
      <li id="pc-freeze-row"><svg class="pc-no" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4.5" y="10.5" width="15" height="10" rx="2.5"/><path d="M8 10.5V7.5a4 4 0 0 1 8 0v3"/></svg>Release freeze for 4.2 (until Oct 3)<span class="mv-badge" data-variant="danger" id="pc-freeze-badge">Blocking</span></li>
    </ul>
    <div class="pc-body">
      <mv-pass-card id="pc-main" label="Freeze passes" total="3" period="this quarter" refills="2026-10-01"
        blocked rule="Merging to main is frozen until Oct 3 for the 4.2 release"
        action="PR #4821 · Fix rounding in checkout totals" user="Maya Chen" requestable log-limit="4">
        <script type="application/json">{
          "approvers": ["Priya Nair · Release captain", "Tomás Rivera · Engineering manager"],
          "kinds": [
            { "id": "freeze", "label": "Merge during freeze", "duration": "24h",
              "covers": ["Merging this pull request to main", "The automatic deploy to staging that follows"],
              "excludes": ["Production deploys (the release captain ships those)", "Skipping required reviews or failing checks"] },
            { "id": "hotfix", "label": "Production hotfix", "description": "Ship to production now", "duration": "4h", "limit": 1, "approval": true,
              "covers": ["Merging and deploying this pull request to production", "One rollback if the deploy misbehaves"],
              "excludes": ["Database migrations", "Any other pull request"] }
          ]
        }</script>
      </mv-pass-card>
      <div class="pc-merge">
        <p id="pc-merge-note">Merging is blocked by the release freeze.</p>
        <button type="button" class="mv-button" id="pc-merge" aria-disabled="true" aria-describedby="pc-merge-note">Merge pull request</button>
      </div>
    </div>
  </section>

  <div class="pc-controls">
    <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="pc-fail"> Server rejects the next pass</label>
    <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="pc-approve" aria-disabled="true">Approve as Priya Nair</button>
    <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="pc-reset">Reset demo</button>
    <p class="pc-log" id="pc-log" aria-live="polite">Pick “Use a pass” to try it.</p>
  </div>

  <div class="pc-grid">
    <!-- Inline: a student's late passes, right on the closed assignment -->
    <section class="pc-panel" aria-label="Assignment">
      <p class="pc-kicker">Course portal · Writing 210</p>
      <div class="pc-assign">
        <strong>Essay 3 · The ethics of automation</strong>
        <span>Due Sep 22, 11:59 PM · 1,500 words · 15% of the grade</span>
      </div>
      <mv-pass-card id="pc-late" variant="inline" label="Late passes" total="4" period="this semester" refills="2027-01-19"
        blocked rule="Submissions closed on Sep 22 at 11:59 PM" action="Essay 3 · The ethics of automation" user="Samuel Adeyemi" min-reason="10">
        <script type="application/json">{
          "kinds": [
            { "id": "late", "label": "48-hour extension", "duration": "48h",
              "covers": ["Submitting this essay up to 48 hours late, with no penalty"],
              "excludes": ["Exams and in-class quizzes", "Group project deadlines"] }
          ],
          "log": [
            { "id": "sa-1", "kind": "late", "by": "Samuel Adeyemi", "at": "2026-09-09T21:40:00", "reason": "Flu, doctor's note sent to the TA", "target": "Reading response 2", "status": "used" }
          ]
        }</script>
      </mv-pass-card>
      <p class="pc-note">Your instructor sees every late pass and its reason.</p>
    </section>

    <!-- Card, exhausted: spending-limit overrides need a manager's approval -->
    <section class="pc-panel" aria-label="Expense">
      <p class="pc-kicker">Company card · Elena Petrova</p>
      <div class="pc-expense">
        <strong>Figma Organization · annual plan</strong>
        <span>$1,440.00</span>
      </div>
      <mv-pass-card id="pc-limit" label="Limit overrides" total="2" period="this month" refills="2026-10-01"
        blocked rule="This purchase is over your $1,000.00 per-transaction limit" action="Figma Organization · $1,440.00"
        user="Elena Petrova" require-approval requestable log-limit="2">
        <script type="application/json">{
          "approvers": ["Tomás Rivera · Engineering manager"],
          "kinds": [{ "id": "limit", "label": "One purchase over limit", "covers": ["This one purchase, up to $5,000.00"], "excludes": ["Recurring charges after the first one", "Cash withdrawals"] }],
          "log": [
            { "id": "ep-2", "kind": "limit", "by": "Elena Petrova", "at": "2026-09-16T10:12:00", "reason": "Booth deposit for DevWorld Berlin, due today", "target": "DevWorld Berlin · $1,250.00", "status": "used", "approver": "Tomás Rivera" },
            { "id": "ep-1", "kind": "limit", "by": "Elena Petrova", "at": "2026-09-03T16:48:00", "reason": "Reserved instances renewal before the price change", "target": "AWS · $2,180.00", "status": "used", "approver": "Tomás Rivera" }
          ]
        }</script>
      </mv-pass-card>
    </section>
  </div>

  <script type="module">
    const main = document.getElementById("pc-main");
    const merge = document.getElementById("pc-merge");
    const mergeNote = document.getElementById("pc-merge-note");
    const badge = document.getElementById("pc-freeze-badge");
    const fail = document.getElementById("pc-fail");
    const approveBtn = document.getElementById("pc-approve");
    const out = document.getElementById("pc-log");
    const say = (text) => { out.textContent = text; };

    // Relative dates keep the main log recent whenever the demo is opened.
    const ago = (days, hh, mm) => { const t = new Date(); t.setDate(t.getDate() - days); t.setHours(hh, mm, 0, 0); return t.toISOString(); };
    const initialLog = () => [
      { id: "fz-2", kind: "freeze", by: "Aiko Tanaka", at: ago(2, 16, 5), target: "PR #4802 · Update currency rounding tables", reason: "Needed the new tables before the Tokyo launch. Turned out the fix landed before the freeze, so I handed it back.", status: "returned" },
      { id: "fz-1", kind: "freeze", by: "Daniel Okafor", at: ago(6, 11, 42), target: "PR #4790 · Patch image upload validation", reason: "Security fix for the image upload endpoint. Waiting 9 days for the freeze to lift would leave it exposed.", status: "used" },
    ];
    main.log = initialLog();

    const sync = () => {
      const state = main.state;
      const covered = state === "covered";
      merge.setAttribute("aria-disabled", String(!covered));
      mergeNote.textContent = covered ? "A freeze pass covers this merge." : state === "pending" ? "Waiting for the release captain to approve the hotfix pass." : "Merging is blocked by the release freeze.";
      badge.textContent = covered ? "Pass in effect" : state === "pending" ? "Awaiting approval" : "Blocking";
      badge.dataset.variant = covered ? "success" : state === "pending" ? "warning" : "danger";
      approveBtn.setAttribute("aria-disabled", String(!main.log.some((e) => e.status === "pending")));
    };
    customElements.whenDefined("mv-pass-card").then(sync);

    // A fake server that records each pass (and can refuse it).
    const server = (ms = 700) => new Promise((resolve, reject) => {
      const bad = fail.checked;
      setTimeout(() => (bad ? reject(new Error("503")) : resolve({ id: `srv-${Math.random().toString(36).slice(2, 7)}` })), ms);
    });

    for (const el of document.querySelectorAll("#pc-demo mv-pass-card")) {
      el.addEventListener("mv-pass-use", (e) => {
        e.detail.waitUntil(server());
        say(`mv-pass-use · ${e.detail.kind.label} · ${e.detail.remaining} left after`);
      });
      el.addEventListener("mv-pass-return", (e) => {
        e.detail.waitUntil(server(400));
        say(`mv-pass-return · ${e.detail.remaining} left after`);
      });
      el.addEventListener("mv-pass-request", (e) => {
        e.detail.waitUntil(server(600));
        say(`mv-pass-request · ${e.detail.remaining} of ${e.detail.total} left`);
      });
      el.addEventListener("mv-pass-error", (e) => {
        fail.checked = false;
        say(`mv-pass-error · ${e.detail.action} failed (${e.detail.error.message}), nothing was spent`);
      });
    }
    main.addEventListener("mv-pass-change", (e) => { sync(); say(`mv-pass-change · ${e.detail.reason} · ${e.detail.remaining} of ${e.detail.total} left`); });

    merge.addEventListener("click", () => {
      if (merge.getAttribute("aria-disabled") === "true") return;
      say("Merged #4821 into main under a freeze pass.");
    });
    approveBtn.addEventListener("click", () => {
      const pending = main.log.find((e) => e.status === "pending");
      if (pending) main.approve(pending.id, { by: "Priya Nair" });
    });
    document.getElementById("pc-reset").addEventListener("click", () => {
      main.close();
      main.log = initialLog();
      main.requested = false;
      fail.checked = false;
      sync();
      say("Demo reset.");
    });
  </script>
</div>