Time Vault <mv-time-vault>

node scripts/add.mjs time-vault --out ./src/marvelous

<div id="tv-demo" style="width:min(100%,64rem);margin-inline:auto">
  <style>
    #tv-demo { display:grid; grid-template-columns:minmax(0,1fr) 16.5rem; gap:1.25rem; align-items:start }
    #tv-demo .tv-panel { display:grid; gap:1rem; 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); font-size:.8125rem }
    #tv-demo .tv-panel h4 { margin:0; font-size:.875rem; letter-spacing:-.01em }
    #tv-demo .tv-panel p { margin:0; color:var(--mv-fg-muted); font-size:.75rem; line-height:1.5 }
    #tv-demo .tv-sep { height:1px; background:var(--mv-border) }
    #tv-demo .tv-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem }
    #tv-demo .tv-mrr { display:grid; gap:.5rem }
    #tv-demo .tv-mrr output { color:var(--mv-fg); font-weight:600; font-variant-numeric:tabular-nums }
    #tv-demo .tv-clock { display:grid; gap:.5rem }
    #tv-demo .tv-actions { display:flex; gap:.5rem; flex-wrap:wrap }
    #tv-demo .tv-log { display:grid; gap:.25rem; min-height:4.5rem; margin:0; padding:0; list-style:none; color:var(--mv-fg-muted); font:.6875rem/1.45 var(--mv-font-mono) }
    #tv-demo .tv-log li:first-child { color:var(--mv-fg) }
    #tv-demo .mv-choice { font-size:.8125rem }
    @media (max-width:52rem) { #tv-demo { grid-template-columns:minmax(0,1fr) } }
  </style>

  <!-- A product team's vault. The clock is frozen on Sep 24, 2026 so the demo reads the same any day. -->
  <mv-time-vault id="tv-vault" label="Team time vault" author="Amara Okafor" era="before launch" now="2026-09-24T10:00">
    <data data-condition value="launch">we launch publicly</data>
    <data data-condition value="mrr-10k">MRR passes $10k</data>
    <data data-condition value="beta-ended">the public beta ends</data>
    <data data-condition value="series-a">we close the Series A</data>
    <data data-condition value="legacy-api-off">the legacy API is switched off</data>

    <template data-capsule data-id="premortem" data-title="Pre-mortem: how the beta could fail" data-author="Priya Raman" data-written="2025-03-10" data-context="during the private beta" data-when="beta-ended" data-opened="2026-08-18" data-expanded>
      <p>It is the end of the beta and something went wrong. This is my honest guess at what it was, written while we still had eleven design partners and no pricing page.</p>
      <p>If I am right about onboarding, the fix is a guided first project, not more features. If I am wrong, please tell me in the retro.</p>
      <ol data-predictions>
        <li data-verdict="yes">Onboarding, not pricing, will be the main reason teams churn</li>
        <li data-verdict="no">We will need a Windows app before enterprise deals close</li>
        <li data-verdict="partly">Support volume will double in the first month after the beta</li>
        <li>At least three design partners will become paying customers</li>
      </ol>
    </template>

    <template data-capsule data-id="sofia" data-title="To Sofia, one year after hire" data-author="Daniel Kim" data-written="2025-09-15" data-context="on your first day" data-opens="+1y">
      <p>Sofia, welcome. Today you asked more good questions than most people ask in a quarter, so here is a note for the version of you who has been here a year.</p>
      <p>I hope you shipped the offline mode you pitched in your interview. If not, I hope you know why, and that the reason taught you something about this team.</p>
      <ol data-predictions>
        <li>Offline mode will be live for every customer</li>
        <li>You will be mentoring at least one new engineer</li>
      </ol>
    </template>

    <template data-capsule data-id="brightwave" data-title="Renewal notes: Brightwave Media" data-author="Marcus Webb" data-written="2025-10-20" data-context="right after signing" data-opens="2026-10-05">
      <p>We won Brightwave on the reporting exports, not on price. Their CFO, Hannah Lindqvist, pushed hard for net-60 terms; we gave net-45 and a named support contact.</p>
      <ol data-predictions>
        <li>They will ask for at least 15% off at renewal</li>
        <li>Their usage will have grown past 40 seats</li>
      </ol>
    </template>

    <template data-capsule data-id="mrr" data-title="When we pass $10k MRR" data-author="Amara Okafor" data-written="2025-11-03" data-context="at $2.1k MRR" data-when="mrr-10k">
      <p>If you are reading this, the thing we built in a spare room pays for itself. Celebrate first. Then look at which plan got us here, because I bet it is not the one we designed the pricing page around.</p>
      <ol data-predictions>
        <li>Most of the revenue will come from the Team plan, not Pro</li>
        <li>We will still be under 5% monthly churn</li>
      </ol>
    </template>

    <!-- No content in the page: the server hands it over in mv-open, once it has checked the trigger itself. -->
    <template data-capsule data-id="launch" data-title="Letter to the launch team" data-author="Amara Okafor" data-written="2025-07-22" data-context="before launch" data-when="launch"></template>

    <template data-capsule data-id="2028" data-title="Where we will be in 2028" data-author="Leila Haddad" data-written="2026-01-12" data-context="during the seed round" data-opens="2028-01-01">
      <p>A note on what I think the company looks like two years from now.</p>
    </template>
  </mv-time-vault>

  <aside class="tv-panel" aria-labelledby="tv-sim-h">
    <div style="display:grid;gap:.25rem">
      <h4 id="tv-sim-h">Simulate the app</h4>
      <p>Your app tells the vault what is true. Capsules open the moment their condition does.</p>
    </div>

    <label class="mv-choice" data-control="end">
      <input type="checkbox" role="switch" class="mv-switch" id="tv-launch">
      <span class="mv-choice-text"><span class="mv-choice-title">Public launch</span><span class="mv-choice-description">Sets the launch flag</span></span>
    </label>

    <div class="tv-mrr">
      <div class="tv-row"><label for="tv-mrr">Monthly recurring revenue</label><output for="tv-mrr" id="tv-mrr-out">$7,400</output></div>
      <input type="range" class="mv-slider" id="tv-mrr" min="0" max="12000" step="100" value="7400">
    </div>

    <div class="tv-sep"></div>

    <div class="tv-clock">
      <div class="tv-row"><span>Today</span><span class="mv-badge" data-variant="secondary" id="tv-today">Sep 24, 2026</span></div>
      <div class="tv-actions">
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="tv-jump">Jump 2 weeks ahead</button>
        <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="tv-reset">Reset</button>
      </div>
    </div>

    <div class="tv-sep"></div>

    <div style="display:grid;gap:.5rem">
      <h4>Events</h4>
      <ul class="tv-log" id="tv-log" aria-live="polite"><li>Vault loaded.</li></ul>
    </div>
  </aside>

  <script type="module">
    const vault = document.getElementById("tv-vault");
    const launch = document.getElementById("tv-launch");
    const mrr = document.getElementById("tv-mrr");
    const mrrOut = document.getElementById("tv-mrr-out");
    const today = document.getElementById("tv-today");
    const log = document.getElementById("tv-log");
    const START = new Date(2026, 8, 24, 10).getTime();
    const usd = (n) => n.toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });
    const short = (n) => `$${(n / 1000).toFixed(1).replace(/\.0$/, "")}k`;
    const say = (text) => {
      log.prepend(Object.assign(document.createElement("li"), { textContent: text }));
      while (log.children.length > 4) log.lastElementChild.remove();
    };

    const syncMrr = () => {
      const v = Number(mrr.value);
      mrrOut.textContent = usd(v);
      vault.check({ "mrr-10k": { progress: v / 10000, text: `${short(v)} of $10k` } });
    };
    const syncClock = () => {
      today.textContent = vault.now.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
    };

    // The "server": content for the launch letter is only released on open.
    const LETTER = {
      body: "To everyone who shipped this: I am writing from the week we almost postponed. We had no status page, two open security findings and a landing page nobody liked.\n\nWhatever launch day looked like, remember that the version we were scared of was the one people wanted. Thank you for betting your year on it.",
      predictions: [
        "The first week will bring more than 300 sign-ups",
        "Someone will find a billing bug within 48 hours",
        "Our first public review will mention the keyboard shortcuts",
      ],
    };
    vault.addEventListener("mv-open", (e) => {
      const { id, title } = e.detail.capsule;
      say(`Opening “${title}”…`);
      const wait = new Promise((resolve) => setTimeout(resolve, 650));
      e.detail.waitUntil((id === "launch" ? wait.then(() => LETTER) : wait).then((content) => { say(`Opened “${title}”.`); return content; }));
    });
    vault.addEventListener("mv-ready", (e) => say(`Ready: “${e.detail.capsule.title}” (${e.detail.reason}).`));
    vault.addEventListener("mv-seal", (e) => {
      say(`Sealing “${e.detail.capsule.title}”…`);
      e.detail.waitUntil(new Promise((resolve) => setTimeout(resolve, 500)).then(() => say(`Sealed “${e.detail.capsule.title}”.`)));
    });
    vault.addEventListener("mv-verdict", (e) => {
      const c = e.detail.calibration;
      say(`Verdict: ${e.detail.verdict}. Calibration ${Math.round(c.score * 100)}%.`);
    });

    launch.addEventListener("change", () => {
      vault.flags = launch.checked ? "beta-ended launch" : "beta-ended";
      say(launch.checked ? "Launch flag set." : "Launch flag cleared.");
    });
    mrr.addEventListener("input", syncMrr);
    document.getElementById("tv-jump").addEventListener("click", () => {
      vault.now = vault.now.getTime() + 14 * 864e5;
      syncClock();
      say(`Clock moved to ${today.textContent}.`);
    });
    document.getElementById("tv-reset").addEventListener("click", () => {
      vault.now = START;
      launch.checked = false;
      vault.flags = "beta-ended";
      mrr.value = "7400";
      syncMrr();
      syncClock();
      say("Clock and flags reset.");
    });

    vault.flags = "beta-ended";
    syncMrr();
  </script>
</div>