Hold Slot — <mv-hold-slot>

node scripts/add.mjs hold-slot --out ./src/marvelous

<div id="hs-demo" style="width:min(100%,68rem);margin-inline:auto">
  <style>
    #hs-demo { display:grid; gap:1.25rem; align-content:start }
    #hs-demo .hs-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 }
    #hs-demo .hs-top { display:flex; align-items:center; gap:.75rem 1rem; flex-wrap:wrap; padding:.875rem 1.25rem; border-bottom:1px solid var(--mv-border) }
    #hs-demo .hs-top h3 { margin:0; font-size:.9375rem; letter-spacing:-.01em }
    #hs-demo .hs-top p { margin:0; color:var(--mv-fg-muted); font-size:.8125rem }
    #hs-demo .hs-top .hs-grow { flex:1 1 12rem; display:grid; gap:.125rem }
    #hs-demo .hs-body { padding:1.125rem 1.25rem 1.25rem }
    #hs-demo .hs-controls { display:flex; align-items:center; gap:.75rem 1.25rem; flex-wrap:wrap; padding:.75rem 1.25rem; border-top:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
    #hs-demo .hs-log { flex:1 1 16rem; min-height:1.25rem; margin:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #hs-demo .mv-choice { font-size:.8125rem }
    #hs-demo .hs-pair { display:grid; grid-template-columns:minmax(0,26rem) minmax(0,1fr); gap:1.25rem; align-items:start }
    #hs-demo .hs-note { display:grid; gap:.5rem; padding:1.125rem 1.25rem; border:1px dashed var(--mv-border); border-radius:var(--mv-radius-xl); color:var(--mv-fg-muted); font-size:.8125rem; line-height:1.55 }
    #hs-demo .hs-note h4 { margin:0; color:var(--mv-fg); font-size:.875rem }
    #hs-demo .hs-note p { margin:0 }
    #hs-demo .hs-card-word { display:grid; gap:.375rem; justify-items:start }
    #hs-demo .hs-card-word b { font-size:1.75rem; letter-spacing:-.02em; font-weight:650 }
    #hs-demo .hs-card-word i { color:var(--mv-fg-muted); font-style:normal; font-size:.8125rem }
    #hs-demo .hs-card-word details { margin-top:.5rem; font-size:.875rem }
    #hs-demo .hs-card-word summary { cursor:pointer; color:var(--mv-accent); font-weight:500 }
    #hs-demo .hs-card-word details p { margin:.375rem 0 0; color:var(--mv-fg-muted) }
    @media (max-width:52rem) { #hs-demo .hs-pair { grid-template-columns:minmax(0,1fr) } }
  </style>

  <!-- Main: a Tier 1 support queue. 14 already done this shift, 52 in total, loaded 8 at a time. -->
  <section class="hs-app" aria-label="Support queue">
    <header class="hs-top">
      <span class="hs-grow">
        <h3>Tier 1 support · Morning shift</h3>
        <p>Oldest first · SLA 4 hours · assigned to Lena Fischer</p>
      </span>
      <span class="mv-badge" data-variant="success" data-shape="pill"><span class="mv-badge-dot"></span>Online</span>
    </header>
    <div class="hs-body">
      <mv-hold-slot id="hs-main" label="Support queue" total="52" done="14" avg="1m12s" low-water="4">
        <button type="button" class="mv-button" data-hold-action="resolve" data-hold-primary data-hold-stamp="Resolved">Resolve</button>
        <button type="button" class="mv-button" data-variant="outline" data-hold-action="escalate" data-hold-key="e" data-hold-stamp="Escalated">Escalate</button>
        <button type="button" class="mv-button" data-variant="ghost" data-hold-action="skip" data-hold-stamp="Skipped">Skip</button>
      </mv-hold-slot>
    </div>
    <div class="hs-controls">
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" data-size="sm" id="hs-unlimited"> Unlimited swaps</label>
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" data-size="sm" id="hs-slow"> Slow server (700 ms)</label>
      <p class="hs-log" id="hs-log" aria-live="polite">Press H to swap the parked ticket in, Enter to resolve, Z to undo.</p>
      <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="hs-reset">Reload queue</button>
    </div>
  </section>

  <!-- Compact: flashcards from <template> children, "Again" sends the card to the back of the deck. -->
  <div class="hs-pair">
    <section class="hs-app" aria-label="Flashcards">
      <header class="hs-top">
        <span class="hs-grow">
          <h3>Spanish · Travel deck</h3>
          <p>Due today · 2 cards per preview</p>
        </span>
      </header>
      <div class="hs-body">
        <mv-hold-slot id="hs-cards" label="Flashcards" preview="2" exhausted style="--mv-hold-slot-min-height:9rem">
          <template data-id="c1" data-title="la ventanilla" data-subtitle="noun · feminine" data-label="Transport" data-tone="info">
            <div class="hs-card-word"><b>la ventanilla</b><i>noun · feminine</i><details><summary>Show answer</summary><p>the ticket window; also a car or train window.</p></details></div>
          </template>
          <template data-id="c2" data-title="el andén" data-subtitle="noun · masculine" data-label="Transport" data-tone="info">
            <div class="hs-card-word"><b>el andén</b><i>noun · masculine</i><details><summary>Show answer</summary><p>the (train) platform.</p></details></div>
          </template>
          <template data-id="c3" data-title="facturar" data-subtitle="verb" data-label="Airport" data-tone="warning">
            <div class="hs-card-word"><b>facturar</b><i>verb</i><details><summary>Show answer</summary><p>to check in (luggage).</p></details></div>
          </template>
          <template data-id="c4" data-title="la tarjeta de embarque" data-subtitle="noun · feminine" data-label="Airport" data-tone="warning">
            <div class="hs-card-word"><b>la tarjeta de embarque</b><i>noun · feminine</i><details><summary>Show answer</summary><p>the boarding pass.</p></details></div>
          </template>
          <template data-id="c5" data-title="el trasbordo" data-subtitle="noun · masculine" data-label="Transport" data-tone="info">
            <div class="hs-card-word"><b>el trasbordo</b><i>noun · masculine</i><details><summary>Show answer</summary><p>the transfer, change (of train or flight).</p></details></div>
          </template>
          <button type="button" class="mv-button" data-hold-action="good" data-hold-primary data-hold-tone="success">Good</button>
          <button type="button" class="mv-button" data-variant="outline" data-hold-action="again" data-hold-key="a" data-hold-requeue data-hold-stamp="Again later">Again</button>
        </mv-hold-slot>
      </div>
    </section>
    <div class="hs-note">
      <h4>One swap per item</h4>
      <p>Park the current item in Hold and the next one steps in. Swap it back whenever you like, but only once per item: take an action before swapping again, so nothing gets juggled forever.</p>
      <p>Every action is undoable, can be vetoed or awaited by the app (<code>mv-action</code>), and the queue asks for more items (<code>mv-next</code>) before it runs dry.</p>
    </div>
  </div>

  <script type="module">
    const main = document.getElementById("hs-main");
    const cards = document.getElementById("hs-cards");
    const log = document.getElementById("hs-log");
    const say = (text) => { log.textContent = text; };

    const PEOPLE = [
      ["Amara Okafor", "Okafor Studio"], ["Kenji Watanabe", "Hikari Labs"], ["Sofia Marinelli", "Marinelli & Co."],
      ["Diego Fernández", "Ruta Logistics"], ["Priya Raman", "Lotus Health"], ["Oliver Bennett", "Bennett Legal"],
      ["Chloé Dubois", "Atelier Dubois"], ["Tomás Novák", "Brno Robotics"], ["Aisha Khan", "Crescent Retail"],
      ["Lukas Weber", "Weber Bau"], ["Mei Lin", "Jade Analytics"], ["Rafael Costa", "Costa Imóveis"],
    ];
    const TOPICS = [
      { label: "Billing", tone: "danger", title: "Charged twice for the October invoice", body: "Hi, our card was charged $240.00 twice on Oct 1 for the same Pro invoice. Can you refund the duplicate? Our finance team closes the month on Friday.", fields: [["Amount", "$240.00"], ["Invoice", "INV-20417"], ["Plan", "Pro · annual"]] },
      { label: "Login", tone: "warning", title: "SSO redirect loops after the Okta migration", body: "Since this morning, everyone on our team gets sent back to the login page after authenticating through Okta. Password login still works for admins.", fields: [["Users affected", "38"], ["IdP", "Okta"], ["Plan", "Business"]] },
      { label: "Export", tone: "info", title: "CSV export cuts off after 10,000 rows", body: "When I export the Orders report for Q3 the file stops at exactly 10,000 rows. The dashboard shows 14,212 orders for the same filter.", fields: [["Report", "Orders · Q3"], ["Rows", "14,212"], ["Plan", "Pro"]] },
      { label: "Account", tone: "neutral", title: "Transfer workspace ownership to a new admin", body: "Our current owner is leaving the company next week. Please move ownership of the workspace to the address in CC before her account is deactivated.", fields: [["Seats", "12"], ["Workspace", "Main"], ["Plan", "Team"]] },
      { label: "Billing", tone: "danger", title: "VAT number missing on our invoices", body: "We need our EU VAT number on every invoice to reclaim tax. I added it in settings last month but the new invoices still don’t show it.", fields: [["Country", "Germany"], ["Invoices", "3"], ["Plan", "Pro · monthly"]] },
      { label: "Integrations", tone: "info", title: "Slack notifications stopped arriving", body: "The #orders channel hasn’t received a notification since Tuesday. Reconnecting the Slack app from the integrations page didn’t help.", fields: [["Channel", "#orders"], ["Since", "Sep 22"], ["Plan", "Business"]] },
      { label: "Data", tone: "warning", title: "Restore a project deleted by mistake", body: "A teammate deleted the “Spring campaign” project yesterday around 4 PM. Is it possible to restore it with its files and comments?", fields: [["Project", "Spring campaign"], ["Deleted", "Sep 23, 4:07 PM"], ["Plan", "Team"]] },
      { label: "Feature", tone: "neutral", title: "Can we set a different time zone per member?", body: "Half of our team works from Singapore. Due dates show in the workspace time zone, which confuses everyone. Is there a per-member setting?", fields: [["Members", "22"], ["Regions", "EU, APAC"], ["Plan", "Business"]] },
    ];
    const WAIT = ["2h 14m", "1h 52m", "1h 40m", "1h 31m", "1h 18m", "1h 02m", "54m", "47m", "39m", "31m", "22m", "15m"];
    let seq = 0;
    const ticket = () => {
      const i = seq++;
      const t = TOPICS[(i * 5) % TOPICS.length];
      const [name, org] = PEOPLE[(i * 7) % PEOPLE.length];
      const channel = ["Email", "Chat", "Web form"][i % 3];
      const wait = WAIT[i % WAIT.length];
      return {
        id: `T-${4812 + i}`,
        title: t.title,
        subtitle: `${name} · ${t.label}`,
        label: t.label,
        tone: t.tone,
        meta: [`T-${4812 + i}`, `${name}, ${org}`, `via ${channel}`, `waiting ${wait}`],
        body: t.body,
        fields: [...t.fields.map(([label, value]) => ({ label, value })), { label: "Waiting", value: wait }],
      };
    };
    const batch = (n) => Array.from({ length: n }, ticket);

    const load = () => { seq = 0; main.reset(batch(8)); main.held = parked(); };
    // A ticket parked earlier in the shift, waiting for an answer from engineering.
    const parked = () => ({
      id: "T-4807",
      title: "Webhook signatures fail after rotating the signing key",
      subtitle: "Kenji Watanabe · API",
      label: "API",
      tone: "warning",
      meta: ["T-4807", "Kenji Watanabe, Hikari Labs", "via Email", "waiting 3h 05m"],
      body: "We rotated our webhook signing key on Monday as recommended. Since then every event fails signature verification on our side, even with the new secret.\n\nWe replay failed events manually for now. Is the old key still used to sign some events?",
      fields: [{ label: "Failed events", value: "1,284" }, { label: "Endpoint", value: "/hooks/orders" }, { label: "Plan", value: "Business" }, { label: "Waiting", value: "3h 05m" }],
    });
    await customElements.whenDefined("mv-hold-slot");
    main.items = batch(8);
    main.held = parked();

    // Infinite-ish source: 6 more tickets whenever the queue runs low, up to the 52 of the shift.
    main.addEventListener("mv-next", (e) => {
      const room = 52 - 14 - seq;
      if (room <= 0) { main.exhausted = true; return; }
      setTimeout(() => { e.detail.append(batch(Math.min(6, room))); say(`Loaded ${Math.min(6, room)} more tickets.`); }, 300);
    });

    const slow = document.getElementById("hs-slow");
    main.addEventListener("mv-action", (e) => {
      const { action, item, label } = e.detail;
      if (slow.checked) e.detail.waitUntil(new Promise((r) => setTimeout(r, 700)));
      say(`${label} ${item.id}${slow.checked ? " (saving…)" : ""}`);
      if (action === "escalate") say(`Escalated ${item.id} to Tier 2.`);
    });
    main.addEventListener("mv-hold", (e) => say(`Parked ${e.detail.item.id}, now on ${e.detail.next.id}.`));
    main.addEventListener("mv-swap", (e) => say(`Swapped: back to ${e.detail.item.id}, ${e.detail.held.id} parked.`));
    main.addEventListener("mv-undo", (e) => say(`Undid ${e.detail.action} on ${e.detail.item.id}.`));
    main.addEventListener("mv-empty", (e) => say(`Shift cleared: ${e.detail.stats.done} tickets.`));

    document.getElementById("hs-unlimited").addEventListener("change", (e) => { main.holdLimit = e.target.checked ? 0 : 1; });
    document.getElementById("hs-reset").addEventListener("click", () => { main.exhausted = false; load(); say("Queue reloaded."); });

    // The deck starts over a moment after it is cleared.
    const deck = cards.items;
    cards.addEventListener("mv-empty", () => setTimeout(() => { if (cards.isConnected) cards.reset(deck); }, 2500));
  </script>
</div>