As Of <mv-as-of>

node scripts/add.mjs as-of --out ./src/marvelous

<mv-as-of frame="#report" min="2024-01-01"></mv-as-of>
<section id="report">…your figures…</section>

<div id="ao-demo" style="width:min(100%,66rem);margin-inline:auto">
  <style>
    #ao-demo { display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; align-content:start }
    #ao-demo .ao-main { display:grid; grid-template-columns:minmax(0,1fr) 24rem; gap:1.5rem; align-items:start }
    #ao-demo .ao-report { display:grid; gap:1rem; padding:1.25rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs) }
    #ao-demo .ao-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap }
    #ao-demo .ao-top h3 { margin:0; font-size:1.0625rem; letter-spacing:-.01em }
    #ao-demo .ao-top p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #ao-demo .ao-actions { display:flex; gap:.5rem; flex-wrap:wrap }
    #ao-demo .ao-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin:0 }
    #ao-demo .ao-kpi { display:grid; gap:.25rem; padding:.75rem .875rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-bg-subtle) }
    #ao-demo .ao-kpi dt { color:var(--mv-fg-muted); font-size:.75rem }
    #ao-demo .ao-kpi dd { margin:0; font-size:1.25rem; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
    #ao-demo .ao-kpi small { display:block; color:var(--mv-fg-muted); font-size:.6875rem; font-weight:500; letter-spacing:0 }
    #ao-demo table { width:100%; border-collapse:collapse; font-size:.8125rem }
    #ao-demo caption { text-align:start; padding:0 0 .5rem; color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    #ao-demo th, #ao-demo td { padding:.5rem .625rem; border-bottom:1px solid var(--mv-border); text-align:start; white-space:nowrap }
    #ao-demo th { color:var(--mv-fg-muted); font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase }
    #ao-demo td.num, #ao-demo th.num { text-align:end; font-variant-numeric:tabular-nums }
    #ao-demo tr:last-child td { border-bottom:0 }
    #ao-demo .ao-side { display:grid; gap:.875rem }
    #ao-demo .ao-panel { display:grid; gap:.625rem; padding:.875rem 1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-bg-subtle); font-size:.8125rem }
    #ao-demo .ao-log { min-height:1.25rem; margin:0; color:var(--mv-fg-subtle); font:.75rem/1.45 var(--mv-font-mono); overflow-wrap:anywhere }
    #ao-demo .ao-h { margin:0 0 .75rem; font-size:.8125rem; font-weight:600; color:var(--mv-fg-muted) }
    #ao-demo .ao-flags { padding:1rem 1.25rem .75rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); margin-top:1.25rem }
    #ao-demo .ao-flag-name { font-family:var(--mv-font-mono); font-size:.75rem }
    @media (max-width:62rem) { #ao-demo .ao-main { grid-template-columns:minmax(0,1fr) } }
    @media (max-width:40rem) { #ao-demo .ao-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) } #ao-demo .ao-hide-sm { display:none } #ao-demo td:first-child { white-space:normal } #ao-demo .ao-report, #ao-demo .ao-flags { padding-inline:.875rem } #ao-demo th, #ao-demo td { padding-inline:.375rem } }
  </style>

  <!-- 1. Inventory report with the stacked control beside it -->
  <div class="ao-main" id="ao-app">
    <section class="ao-report" id="ao-report" aria-labelledby="ao-report-title">
      <div class="ao-top">
        <div>
          <h3 id="ao-report-title">Inventory &amp; revenue</h3>
          <p>Northwind Supply · all warehouses</p>
        </div>
        <div class="ao-actions">
          <button type="button" class="mv-button" data-variant="outline" data-size="sm" data-as-of-live-only>Adjust stock</button>
          <button type="button" class="mv-button" data-size="sm" data-as-of-live-only>Edit forecast</button>
        </div>
      </div>
      <dl class="ao-kpis" id="ao-kpis"></dl>
      <table>
        <caption id="ao-caption">Top SKUs by value on hand</caption>
        <thead><tr><th scope="col">SKU</th><th scope="col" class="ao-hide-sm">Warehouse</th><th scope="col" class="num">On hand</th><th scope="col" class="num">Value</th><th scope="col">Status</th></tr></thead>
        <tbody id="ao-rows"></tbody>
      </table>
    </section>

    <div class="ao-side">
      <mv-as-of id="ao-main" param="asof" frame="#ao-report" scope="#ao-app" min="2024-01-01" storage-key="ao-demo-recent"></mv-as-of>
      <div class="ao-panel">
        <label class="mv-choice" data-control="end">
          <input type="checkbox" role="switch" class="mv-switch" id="ao-fail">
          <span class="mv-choice-text"><span class="mv-choice-title">Make the next fetch fail</span><span class="mv-choice-description">The jump is rolled back and announced</span></span>
        </label>
        <p class="ao-log" id="ao-log" aria-live="polite">Loading…</p>
      </div>
    </div>
  </div>

  <!-- 2. Bar layout, minute precision: a production config audited at a past moment -->
  <div>
    <p class="ao-h">Feature flags · production (bar layout, minute precision)</p>
    <div id="ao-flags-app">
      <mv-as-of id="ao-bar" layout="bar" precision="minute" steps="hour, day, week" unit="hour" presets="7d, 30d, last-month" frame="#ao-flags" scope="#ao-flags-app" label="Config point in time"></mv-as-of>
      <div class="ao-flags" id="ao-flags">
        <table>
          <caption id="ao-flag-caption">Flags</caption>
          <thead><tr><th scope="col">Flag</th><th scope="col">State</th><th scope="col" class="num">Rollout</th><th scope="col" class="ao-hide-sm">Changed by</th><th scope="col"><span class="mv-sr-only">Actions</span></th></tr></thead>
          <tbody id="ao-flag-rows"></tbody>
        </table>
      </div>
    </div>
  </div>

  <script type="module">
    const main = document.getElementById("ao-main");
    const bar = document.getElementById("ao-bar");
    const log = document.getElementById("ao-log");
    const fail = document.getElementById("ao-fail");
    const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });
    const int = new Intl.NumberFormat("en-US");
    const short = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" });

    // Deterministic "database": the same moment always returns the same figures.
    const seed = (str) => { let h = 2166136261; for (const c of str) { h ^= c.charCodeAt(0); h = Math.imul(h, 16777619); } return () => ((h = Math.imul(h ^ (h >>> 15), 2246822507) ^ Math.imul(h ^ (h >>> 13), 3266489909)) >>> 0) / 4294967296; };
    const cell = (text, cls) => { const td = document.createElement("td"); if (cls) td.className = cls; td.append(text); return td; };
    const badge = (text, variant) => { const b = document.createElement("span"); b.className = "mv-badge"; b.dataset.variant = variant; b.dataset.size = "sm"; b.textContent = text; return b; };

    const SKUS = [
      ["Ceramic pour-over set", "Rotterdam"], ["Linen apron, charcoal", "Reno"], ["Cast-iron skillet 26 cm", "Rotterdam"],
      ["Oak cutting board", "Monterrey"], ["Stoneware mug, set of 4", "Reno"],
    ];
    function renderReport(date) {
      const key = date ? date.toISOString().slice(0, 10) : "live";
      const r = seed(key);
      const f = date ? 0.82 + r() * 0.16 : 1;
      const kpis = [
        ["Revenue, trailing 30 days", usd.format(Math.round(412_800 * f)), date ? `as of ${short.format(date)}` : "live"],
        ["Units on hand", int.format(Math.round(18_420 * (0.9 + r() * 0.2))), "5 warehouses"],
        ["Open orders", int.format(Math.round(236 * (0.7 + r() * 0.5))), "awaiting shipment"],
        ["Gross margin", `${(41.2 + (r() - 0.5) * 6).toFixed(1)}%`, "trailing 30 days"],
      ];
      document.getElementById("ao-kpis").replaceChildren(...kpis.map(([k, v, s]) => {
        const div = document.createElement("div"); div.className = "ao-kpi";
        const dt = document.createElement("dt"); dt.textContent = k;
        const dd = document.createElement("dd"); dd.textContent = v;
        const sm = document.createElement("small"); sm.textContent = s; dd.append(sm);
        div.append(dt, dd); return div;
      }));
      document.getElementById("ao-caption").textContent = date ? `Top SKUs by value on hand, as of ${short.format(date)}` : "Top SKUs by value on hand, live";
      document.getElementById("ao-rows").replaceChildren(...SKUS.map(([name, wh], i) => {
        const qty = Math.round((1400 - i * 210) * (0.25 + r() * 0.9));
        const value = qty * (18 + (5 - i) * 7);
        const status = qty < 320 ? ["Reorder", "danger"] : qty < 620 ? ["Low", "warning"] : ["In stock", "success"];
        const tr = document.createElement("tr");
        tr.append(cell(name), cell(wh, "ao-hide-sm"), cell(int.format(qty), "num"), cell(usd.format(value), "num"), cell(badge(...status)));
        return tr;
      }));
    }

    const FLAGS = ["checkout.one-page", "search.semantic-ranking", "billing.annual-discount", "mobile.dark-launch"];
    const PEOPLE = ["Aiko Tanaka", "Lucas Moreau", "Priya Raman", "Mateo Silva"];
    function renderFlags(date) {
      const key = date ? `${date.toISOString().slice(0, 13)}` : "live";
      const r = seed(key);
      document.getElementById("ao-flag-caption").textContent = date ? `Flags as of ${date.toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" })}` : "Flags, live";
      document.getElementById("ao-flag-rows").replaceChildren(...FLAGS.map((flag, i) => {
        const on = (i + Math.floor(r() * 3)) % 3 !== 0;
        const rollout = on ? [5, 25, 50, 100][Math.floor(r() * 4)] : 0;
        const tr = document.createElement("tr");
        const name = document.createElement("span"); name.className = "ao-flag-name"; name.textContent = flag;
        const edit = document.createElement("button");
        edit.type = "button"; edit.className = "mv-button"; edit.dataset.variant = "ghost"; edit.dataset.size = "sm";
        edit.dataset.asOfLiveOnly = ""; edit.textContent = "Edit"; edit.setAttribute("aria-label", `Edit ${flag}`);
        tr.append(cell(name), cell(badge(on ? "On" : "Off", on ? "success" : "secondary")), cell(`${rollout}%`, "num"), cell(PEOPLE[(i + Math.floor(r() * 4)) % 4], "ao-hide-sm"), cell(edit, "num"));
        return tr;
      }));
    }

    // A fake API: 450 ms round trip, optionally failing once.
    const fetchAsOf = (reason) => new Promise((resolve, reject) => {
      if (reason === "api") return resolve();
      setTimeout(() => {
        if (fail.checked) { fail.checked = false; reject(new Error("504 Gateway Timeout")); } else resolve();
      }, 450);
    });
    const label = (d) => (d ? short.format(d) : "live");

    main.addEventListener("mv-travel", (e) => {
      const { from, to, reason } = e.detail;
      log.textContent = `GET /reports/inventory?asof=${e.detail.toValue ?? "now"} · ${reason}`;
      e.detail.waitUntil(fetchAsOf(reason).then(() => renderReport(to)));
    });
    main.addEventListener("mv-arrive", (e) => { log.textContent = `mv-arrive · ${label(e.detail.from)} → ${label(e.detail.to)}`; });
    main.addEventListener("mv-travel-error", (e) => { log.textContent = `Fetch failed (${e.detail.error.message}) · rolled back to ${label(e.detail.from)}`; renderReport(e.detail.from); });

    bar.addEventListener("mv-travel", (e) => { e.detail.waitUntil(fetchAsOf(e.detail.reason).then(() => renderFlags(e.detail.to))); });

    // Start in the past so all three rows are filled: live → end of last month → end of last quarter.
    const now = new Date();
    const lastQuarter = new Date(now.getFullYear(), Math.floor(now.getMonth() / 3) * 3, 0);
    let first = new Date(now.getFullYear(), now.getMonth(), 0);
    if (+first === +lastQuarter) first = new Date(now.getFullYear(), now.getMonth() - 1, 0);
    renderReport(main.date);
    renderFlags(null);
    if (main.live) {
      main.travel(first).then(() => main.travel(lastQuarter));
    }
    const twoDaysAgo = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 2, 16, 45);
    bar.travel(twoDaysAgo);
  </script>
</div>