Deep Pause <mv-deep-pause>

node scripts/add.mjs deep-pause --out ./src/marvelous

<mv-deep-pause subject="CRM sync" incoming-label="webhook events">
  <ul data-group="freeze"><li>Outgoing webhooks</li><li>Nightly contact import</li></ul>
  <ul data-group="keep"><li>Contacts and history</li></ul>
</mv-deep-pause>

<div id="dp-demo" style="width:min(100%,60rem);margin-inline:auto">
  <style>
    #dp-demo { display:grid; gap:1.75rem; align-content:start }
    #dp-demo .dp-case { display:grid; gap:.75rem }
    #dp-demo .dp-cap { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap }
    #dp-demo .dp-cap h4 { margin:0; font-size:.8125rem; font-weight:600; color:var(--mv-fg-muted); letter-spacing:.04em; text-transform:uppercase }
    #dp-demo .dp-cap p { margin:0; color:var(--mv-fg-subtle); font-size:.75rem }
    #dp-demo .dp-bar { display:flex; align-items:center; gap:.5rem .75rem; flex-wrap:wrap; padding:.625rem .875rem; border:1px dashed var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-bg-subtle) }
    #dp-demo .dp-bar .mv-choice { font-size:.8125rem; margin-inline-start:auto }
    #dp-demo .dp-log { flex:1 1 16rem; min-width:0; margin:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  </style>

  <!-- 1 · Vacation mode for an online store: starts on the plan, before pausing -->
  <section class="dp-case" aria-label="Store vacation mode">
    <div class="dp-cap">
      <h4>Store vacation mode</h4>
      <p>Flip an exception, pick a wake date, then pause.</p>
    </div>
    <mv-deep-pause id="dp-store" subject="Harbor &amp; Pine Ceramics" open incoming="queue" incoming-label="orders and messages" max-days="90">
      <ul data-group="freeze">
        <li data-id="checkout" data-detail="The storefront stays visible with a “back soon” notice">Checkout and new orders</li>
        <li data-id="emails" data-detail="4 scheduled · next one goes out Friday">Marketing emails</li>
        <li data-id="automations" data-detail="Abandoned cart and restock alerts">2 automations</li>
        <li data-id="billing" data-detail="Your $39.00 plan pauses; the next charge moves by the pause length">Billing</li>
        <li data-id="promo" data-expires-label="The FALL20 code">Fall promotion (FALL20)</li>
        <li data-id="workshops" data-optional data-exception="Keep taking bookings" data-detail="Pottery workshops on Saturdays">Public booking page</li>
        <li data-id="chat" data-optional data-kept data-exception="Keep answering" data-detail="Replies from your phone">Customer chat</li>
      </ul>
      <ul data-group="keep">
        <li>Products, orders and customer data</li>
        <li>API read access for your accounting app</li>
        <li>Team logins (3 members)</li>
      </ul>
      <ul data-group="held">
        <li data-id="orders" data-one="order queued" data-actions="release:Process now=Processed, review:Review~">orders queued</li>
        <li data-id="mails" data-one="email held" data-actions="send:Send now=Sent, review:Review~, discard:Discard!=Discarded">emails held</li>
        <li data-id="messages" data-one="message answered" data-actions="reply:Reply personally=Replied, archive:Archive=Archived">messages answered</li>
      </ul>
    </mv-deep-pause>
    <div class="dp-bar">
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="dp-order">Simulate an order</button>
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="dp-message">Simulate a message</button>
      <p class="dp-log" id="dp-store-log" aria-live="polite">Plan open: nothing is paused yet.</p>
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" data-size="sm" id="dp-fail"> Make the server fail</label>
    </div>
  </section>

  <!-- 2 · An integration already paused for a few days, woken manually -->
  <section class="dp-case" aria-label="Paused integration">
    <div class="dp-cap">
      <h4>Integration on hold</h4>
      <p>Paused 3 days ago. Wake it to see what was held and what didn’t resume exactly.</p>
    </div>
    <mv-deep-pause id="dp-sync" subject="CRM sync · Tarnwick Traders" incoming="queue" incoming-options="queue decline" incoming-label="webhook events"></mv-deep-pause>
    <div class="dp-bar">
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="dp-webhooks">Simulate 40 webhook events</button>
      <p class="dp-log" id="dp-sync-log" aria-live="polite">Paused. Events are being queued.</p>
      <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="dp-reset">Reset demo</button>
    </div>
  </section>

  <script type="module">
    const DAY = 864e5;
    const store = document.getElementById("dp-store");
    const sync = document.getElementById("dp-sync");
    const fail = document.getElementById("dp-fail");
    const at = (days) => new Date(Date.now() + days * DAY);
    const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
    const logger = (id) => (text) => {
      const t = new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" });
      document.getElementById(id).textContent = `${t} · ${text}`;
    };
    // A fake API: 700 ms round trip, optionally failing.
    const server = () => new Promise((resolve, reject) => setTimeout(() => (fail.checked ? reject(new Error("503")) : resolve()), 700));

    /* 1 · Store: dates relative to today so the demo never goes stale. */
    const storeLog = logger("dp-store-log");
    store.wakeAt = iso(at(24));
    const promo = store.items.map((i) => (i.id === "promo" ? { ...i, expires: iso(at(12)), detail: "20% off pottery, sitewide" } : i));
    store.items = promo;

    store.addEventListener("mv-pause", (e) => {
      const { freezes, keeps, wake, incoming } = e.detail;
      storeLog(`Freezing ${freezes.length} together, ${keeps.length} keep running · wake ${wake ? wake.toLocaleDateString("en-US") : "manually"} · ${incoming.policy}`);
      e.detail.waitUntil(server());
    });
    store.addEventListener("mv-pause-error", () => storeLog("Pause failed: nothing was frozen."));
    store.addEventListener("mv-wake", (e) => {
      storeLog(`Waking after ${Math.round(e.detail.asleep / 1000)} s (${e.detail.reason})…`);
      e.detail.waitUntil(server());
    });
    store.addEventListener("mv-wake-error", () => storeLog("Wake failed: still paused."));
    store.addEventListener("mv-held-action", (e) => {
      storeLog(`${e.detail.action} → ${e.detail.count} ${e.detail.label}`);
      e.detail.waitUntil(server());
    });
    store.addEventListener("mv-dismiss", (e) => storeLog(e.detail.unresolved.length ? `Closed with ${e.detail.unresolved.length} held group(s) left for later.` : "All settled."));
    // What arrives while the store is paused: the app counts it, the component shows it.
    document.getElementById("dp-order").addEventListener("click", () => {
      if (store.hold("orders") === false) storeLog("The store is open: orders go straight through.");
      else storeLog("New order queued.");
    });
    document.getElementById("dp-message").addEventListener("click", () => {
      if (store.hold("messages") === false) storeLog("The store is open: messages go straight to you.");
      else storeLog("New message answered with your auto-reply.");
    });
    // The scheduled marketing emails get held as soon as the store is paused.
    store.addEventListener("mv-pause", () => setTimeout(() => { store.hold("mails", 3); store.hold("orders", 2); }, 900));

    /* 2 · Integration: inventory and held counts from JS, restored in the paused state. */
    const syncLog = logger("dp-sync-log");
    const setupSync = () => {
      sync.items = [
        { id: "contacts", label: "Contact sync", detail: "Every 15 minutes, both directions", group: "freeze" },
        { id: "deals", label: "Deal stage webhooks", detail: "Outgoing, 3 endpoints", group: "freeze" },
        { id: "enrich", label: "Nightly enrichment job", detail: "Runs at 2:00 AM", group: "freeze" },
        { id: "token", label: "Sandbox API token", detail: "Used by the staging mirror", group: "freeze", expires: iso(at(-1)), expiresLabel: "The sandbox token" },
        { id: "read", label: "Read-only API access", group: "keep" },
        { id: "audit", label: "Audit log", group: "keep" },
        { id: "mapping", label: "Field mapping settings", group: "keep" },
      ];
      sync.held = [
        { id: "events", label: "webhook events queued", one: "webhook event queued", count: 1284, actions: [{ id: "replay", label: "Replay in order", done: "Replayed" }, { id: "review", label: "Inspect", resolves: false }, { id: "drop", label: "Drop", tone: "danger", done: "Dropped" }] },
        { id: "jobs", label: "sync jobs skipped", one: "sync job skipped", count: 6, actions: [{ id: "run", label: "Run a catch-up sync", done: "Caught up" }, { id: "skip", label: "Skip them", done: "Skipped" }] },
      ];
      sync.pausedAt = new Date(Date.now() - 3 * DAY - 4 * 36e5);
    };
    setupSync();
    sync.addEventListener("mv-wake", (e) => {
      syncLog(`Resuming ${e.detail.freezes.length} jobs together…`);
      // The server can report what did not come back exactly.
      e.detail.waitUntil(new Promise((r) => setTimeout(() => r({ changed: [{ id: "enrich", note: "Last night’s run was skipped; the next one is tonight at 2:00 AM." }] }), 700)));
    });
    sync.addEventListener("mv-held-action", (e) => {
      syncLog(`${e.detail.action} → ${e.detail.count} ${e.detail.label}`);
      e.detail.waitUntil(new Promise((r) => setTimeout(r, 600)));
    });
    sync.addEventListener("mv-dismiss", () => syncLog("Back to normal."));
    document.getElementById("dp-webhooks").addEventListener("click", () => {
      syncLog(sync.hold("events", 40) === false ? "Not paused: events are delivered live." : "40 events queued.");
    });
    document.getElementById("dp-reset").addEventListener("click", () => { setupSync(); syncLog("Paused. Events are being queued."); });
  </script>
</div>