Footprints — <mv-footprints>

node scripts/add.mjs footprints --out ./src/marvelous

<div id="fp-demo" style="width:min(100%,60rem);margin-inline:auto">
  <style>
    #fp-demo { display:grid; gap:1.25rem; align-content:start }
    #fp-demo .fp-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 }
    #fp-demo .fp-bar { display:flex; align-items:center; gap:.75rem 1rem; flex-wrap:wrap; min-height:3.5rem; padding:.5rem 1rem .5rem 1.125rem; border-bottom:1px solid var(--mv-border) }
    #fp-demo .fp-title { display:grid; gap:.125rem; flex:1 1 16rem; min-width:0 }
    #fp-demo .fp-title strong { font-size:.9375rem; font-weight:650; letter-spacing:-.01em }
    #fp-demo .fp-title span { color:var(--mv-fg-muted); font-size:.75rem }
    #fp-demo .fp-stage { display:grid; grid-template-columns:minmax(0,1fr) 3.5rem; height:30rem }
    #fp-demo .fp-doc { position:relative; overflow:auto; overscroll-behavior:contain; padding:1.5rem 2.25rem 3rem; scrollbar-width:thin }
    #fp-demo .fp-doc h1 { margin:0 0 .375rem; font-size:1.5rem; letter-spacing:-.02em }
    #fp-demo .fp-doc .fp-meta { margin:0 0 1.5rem; color:var(--mv-fg-muted); font-size:.8125rem }
    #fp-demo .fp-doc h2 { margin:2rem 0 .5rem; font-size:1.125rem; letter-spacing:-.01em }
    #fp-demo .fp-doc h3 { margin:1.25rem 0 .375rem; font-size:.9375rem; color:var(--mv-fg) }
    #fp-demo .fp-doc p, #fp-demo .fp-doc li { color:var(--mv-fg-muted); font-size:.875rem; line-height:1.65; max-width:42rem }
    #fp-demo .fp-doc p { margin:0 0 .75rem }
    #fp-demo .fp-doc ul { margin:0 0 .75rem; padding-inline-start:1.25rem }
    #fp-demo .fp-doc table { width:100%; max-width:42rem; margin:.5rem 0 1rem; border-collapse:collapse; font-size:.8125rem }
    #fp-demo .fp-doc th, #fp-demo .fp-doc td { padding:.5rem .625rem; border-bottom:1px solid var(--mv-border); text-align:start }
    #fp-demo .fp-doc th { color:var(--mv-fg); font-weight:600; background:var(--mv-bg-subtle) }
    #fp-demo .fp-doc td { color:var(--mv-fg-muted); font-variant-numeric:tabular-nums }
    #fp-demo .fp-controls { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding:.75rem 1.125rem; border-top:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
    #fp-demo .fp-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
    #fp-demo .fp-log { flex:1 1 100%; min-height:1rem; margin:0; color:var(--mv-fg-subtle); font:.6875rem/1.4 var(--mv-font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    #fp-demo .mv-choice { font-size:.8125rem }

    /* Code review variant */
    #fp-demo .fp-code-stage { display:grid; grid-template-columns:3.25rem minmax(0,1fr); height:17rem }
    #fp-demo .fp-code { overflow:auto; overscroll-behavior:contain; padding:.75rem 0; background:var(--mv-bg-subtle); font:.75rem/1.6 var(--mv-font-mono); scrollbar-width:thin }
    #fp-demo .fp-line { display:grid; grid-template-columns:3rem 1fr; white-space:pre; color:var(--mv-fg-muted) }
    #fp-demo .fp-line span:first-child { padding-inline-end:1rem; color:var(--mv-fg-subtle); text-align:end; user-select:none }
    #fp-demo .fp-line.fp-fn { color:var(--mv-fg); font-weight:600 }
    #fp-demo .fp-line.fp-cm { color:var(--mv-fg-subtle); font-style:italic }
    @media (max-width:40rem) { #fp-demo .fp-doc { padding:1.25rem 1rem 2rem } }
  </style>

  <!-- Main: a product spec edited by four people -->
  <section class="fp-app" aria-label="Product spec editor">
    <header class="fp-bar">
      <span class="fp-title">
        <strong>Checkout v3 · Product spec</strong>
        <span>Edited by 4 people · Last saved Sep 23, 2026, 10:42 AM</span>
      </span>
      <span class="mv-badge" data-variant="success" data-shape="pill"><span class="mv-badge-dot" data-pulse></span><span id="fp-count">4 here</span></span>
    </header>
    <div class="fp-stage">
      <article class="fp-doc" id="fp-doc" tabindex="0" aria-label="Checkout v3 product spec">
        <h1>Checkout v3</h1>
        <p class="fp-meta">Owner: Aiko Tanaka · Reviewers: Omar Haddad, Priya Raman, Lena Fischer · Status: In review</p>

        <h2 id="fp-summary">Summary</h2>
        <p id="fp-p-summary-1">Checkout v3 replaces the three-step checkout with a single adaptive page. Returning customers see a one-tap confirmation; new customers get inline account creation after payment instead of before it.</p>
        <p id="fp-p-summary-2">The redesign targets a 12% lift in completed orders on mobile and removes the separate shipping step for digital goods, which make up 38% of order volume.</p>

        <h2 id="fp-goals">Goals and non-goals</h2>
        <ul>
          <li>Reduce median time to purchase from 94 s to under 60 s on mobile.</li>
          <li>Support saved payment methods across web and the iOS and Android apps.</li>
          <li>Show taxes and fees before the final step in every supported market.</li>
        </ul>
        <p id="fp-p-goals-1">Out of scope for this release: gift cards, split payments between two cards, and the marketplace seller checkout, which keeps its current flow until Q2 2027.</p>

        <h2 id="fp-research">Customer research</h2>
        <p id="fp-p-research-1">We ran 18 moderated sessions in Tokyo, Berlin, São Paulo and Chicago. The top abandonment reason was surprise costs at the last step (11 of 18), followed by forced account creation (7 of 18).</p>
        <p id="fp-p-research-2">Analytics confirm the pattern: 41% of mobile sessions that reach the shipping step leave before payment, and the drop is twice as steep when the order total changes on that step.</p>
        <p id="fp-p-research-3">Participants who could pay with a saved wallet finished in 31 seconds on average, and none of them asked for an order summary before confirming.</p>

        <h2 id="fp-pricing">Pricing</h2>
        <p id="fp-p-pricing-1">Prices are shown tax-inclusive where required by law and tax-exclusive in the United States and Canada, with a live estimate as soon as a postal code is known.</p>
        <h3 id="fp-plans">Plans</h3>
        <table>
          <thead><tr><th>Plan</th><th>Monthly</th><th>Annual</th><th>Seats</th></tr></thead>
          <tbody>
            <tr><td>Starter</td><td>$19</td><td>$190</td><td>1</td></tr>
            <tr><td>Team</td><td>$49</td><td>$490</td><td>Up to 10</td></tr>
            <tr><td>Business</td><td>$129</td><td>$1,290</td><td>Up to 50</td></tr>
          </tbody>
        </table>
        <h3 id="fp-enterprise">Enterprise tier</h3>
        <p id="fp-p-enterprise-1">Enterprise customers keep invoiced billing with net-30 terms. The checkout page shows a “Request a quote” path instead of card entry once the seat count passes 50.</p>
        <p id="fp-p-enterprise-2">Volume pricing starts at $11 per seat per month and is negotiated per contract; the page never shows a price it cannot honor.</p>
        <h3 id="fp-discounts">Discounts</h3>
        <p id="fp-p-discounts-1">Promo codes move from a modal to an inline field under the order summary. Only one code applies per order; the best one is kept automatically when a customer tries a second.</p>

        <h2 id="fp-payments">Payment methods</h2>
        <p id="fp-p-payments-1">Cards, Apple Pay, Google Pay and PayPal at launch; iDEAL, Bancontact and Pix follow in phase 2. Wallet buttons appear first when the device supports them.</p>
        <p id="fp-p-payments-2">3-D Secure challenges open in place rather than in a redirect, and a failed challenge keeps the rest of the form intact.</p>

        <h2 id="fp-tax">Tax and invoicing</h2>
        <p id="fp-p-tax-1">Tax is computed by the existing tax service from the billing address. Business customers can add a VAT or GST number, validated on blur, which removes tax where reverse charge applies.</p>
        <p id="fp-p-tax-2">Invoices are generated as PDF within one minute of payment and emailed to the billing contact, with a copy in the account’s billing history.</p>

        <h2 id="fp-rollout">Rollout plan</h2>
        <h3 id="fp-phase-1">Phase 1 · Mobile web</h3>
        <p id="fp-p-phase1-1">Starts October 13, 2026 at 5% of mobile web traffic in the United States, Japan and Germany, ramping to 50% over two weeks if guardrail metrics hold.</p>
        <h3 id="fp-phase-2">Phase 2 · Apps and new markets</h3>
        <p id="fp-p-phase2-1">The iOS and Android apps adopt the new flow in November, together with local payment methods for the Netherlands, Belgium and Brazil.</p>

        <h2 id="fp-metrics">Success metrics</h2>
        <p id="fp-p-metrics-1">Primary: completed orders per checkout session. Guardrails: refund rate, payment failure rate, and support contacts tagged “checkout” per 1,000 orders.</p>
        <p id="fp-p-metrics-2">We will read results weekly and call the experiment after four weeks or 40,000 sessions per arm, whichever comes first.</p>

        <h2 id="fp-risks">Risks</h2>
        <p id="fp-p-risks-1">Showing tax earlier may lower the add-to-cart rate in tax-inclusive markets. A holdout group of 10% keeps the old checkout during the whole ramp.</p>

        <h2 id="fp-questions">Open questions</h2>
        <p id="fp-p-questions-1">Should guest checkout remember the email for a returning device? Legal review is scheduled for September 30, 2026.</p>
        <p id="fp-p-questions-2">Do we keep the order-notes field? Only 0.4% of orders use it, but most of those are high-value business orders.</p>
      </article>
      <mv-footprints id="fp-rail" scroller="#fp-doc" headings="h2, h3" idle-after="45s" label="Spec map and collaborators"></mv-footprints>
    </div>
    <div class="fp-controls">
      <span class="fp-actions">
        <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="fp-live" checked> Live updates</label>
      </span>
      <span class="fp-actions">
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="fp-follow">Follow Omar</button>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="fp-leap">Priya jumps</button>
        <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="fp-join">Mateo joins</button>
      </span>
      <p class="fp-log" id="fp-log" aria-live="off">Hover a marker for details, click to jump, double-click to follow.</p>
    </div>
  </section>

  <!-- Variant: a code review, rail on the start side, functions as ticks -->
  <section class="fp-app" aria-label="Code review">
    <header class="fp-bar">
      <span class="fp-title">
        <strong>payments/checkout.ts</strong>
        <span>Pull request #482 · Review in progress · rail on the start side, functions as sections</span>
      </span>
    </header>
    <div class="fp-code-stage">
      <mv-footprints id="fp-code-rail" scroller="#fp-code" headings=".fp-fn" side="start" label="File map and reviewers"></mv-footprints>
      <div class="fp-code" id="fp-code" tabindex="0" role="region" aria-label="checkout.ts source"></div>
    </div>
  </section>

  <script type="module">
    const rail = document.getElementById("fp-rail");
    const log = document.getElementById("fp-log");
    const count = document.getElementById("fp-count");
    const live = document.getElementById("fp-live");
    const joinBtn = document.getElementById("fp-join");
    const followBtn = document.getElementById("fp-follow");
    const time = () => new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" });
    const say = (text) => { log.textContent = `${time()} · ${text}`; };

    // Simulated presence feed (what a websocket would deliver).
    const doc = document.getElementById("fp-doc");
    const paragraphs = [...doc.querySelectorAll("p[id]")].map((p) => p.id);
    const now = Date.now();
    rail.people = [
      { id: "aiko", name: "Aiko Tanaka", mode: "editing", anchor: "fp-p-enterprise-1", note: "Rewriting volume pricing", at: now },
      { id: "omar", name: "Omar Haddad", mode: "viewing", anchor: "fp-p-research-1", at: now },
      { id: "priya", name: "Priya Raman", mode: "commenting", anchor: "fp-p-phase1-1", note: "Comment on ramp dates", at: now },
      { id: "lena", name: "Lena Fischer", mode: "viewing", anchor: "fp-p-summary-2", at: now - 3 * 60_000 },
    ];

    let omar = paragraphs.indexOf("fp-p-research-1");
    let priyaAt = "fp-p-phase1-1";
    let beat = 0;
    const step = () => {
      if (!live.checked) return;
      beat++;
      // Omar reads steadily down the spec, then starts over from the top.
      omar = omar + 1 < paragraphs.length ? omar + 1 : 0;
      rail.move("omar", { anchor: paragraphs[omar], mode: "viewing" });
      // Aiko keeps editing the enterprise section.
      rail.move("aiko", { anchor: beat % 4 < 2 ? "fp-p-enterprise-1" : "fp-p-enterprise-2", mode: "editing", note: "Rewriting volume pricing" });
      if (beat % 6 === 0) leap();
      if (rail.people.some((p) => p.id === "mateo")) rail.move("mateo", { anchor: paragraphs[(beat + 3) % paragraphs.length] });
    };
    const leap = () => {
      const targets = ["fp-p-payments-1", "fp-p-phase1-1", "fp-p-goals-1", "fp-p-metrics-2", "fp-p-tax-1"];
      const others = targets.filter((t) => t !== priyaAt);
      priyaAt = others[Math.floor(Math.random() * others.length)];
      rail.move("priya", { anchor: priyaAt, mode: "commenting", note: "Reviewing comments" });
    };
    const timer = setInterval(step, 1600);

    rail.addEventListener("mv-join", (e) => say(`${e.detail.person.name} joined`));
    rail.addEventListener("mv-leave", (e) => say(`${e.detail.person.name} left (${e.detail.reason})`));
    rail.addEventListener("mv-status", (e) => say(`${e.detail.person.name} is ${e.detail.status}`));
    rail.addEventListener("mv-jump", (e) => say(e.detail.kind === "person" ? `Jumped to ${e.detail.person.name} in ${e.detail.person.section}` : `Jumped to ${e.detail.label}`));
    rail.addEventListener("mv-follow", (e) => { say(`Following ${e.detail.person.name}`); followBtn.textContent = "Stop following"; });
    rail.addEventListener("mv-unfollow", (e) => { say(`Stopped following (${e.detail.reason})`); followBtn.textContent = "Follow Omar"; });
    const recount = () => { count.textContent = `${rail.people.length} here`; };
    rail.addEventListener("mv-join", recount);
    rail.addEventListener("mv-leave", recount);

    followBtn.addEventListener("click", () => (rail.following ? rail.unfollow() : rail.follow("omar")));
    document.getElementById("fp-leap").addEventListener("click", leap);
    joinBtn.addEventListener("click", () => {
      if (rail.people.some((p) => p.id === "mateo")) { rail.leave("mateo"); joinBtn.textContent = "Mateo joins"; }
      else { rail.join("mateo", { name: "Mateo Rossi", mode: "viewing", anchor: "fp-p-tax-2" }); joinBtn.textContent = "Mateo leaves"; }
    });

    // Code review variant: build the file (text only), then two reviewers.
    const code = document.getElementById("fp-code");
    const src = [
      ["cm", "// Checkout orchestration: quote, pay, confirm."],
      ["", "import { taxFor } from \"./tax\";"],
      ["", "import { charge, confirm3ds } from \"./gateway\";"],
      ["", ""],
      ["fn", "export async function quote(cart, address) {"],
      ["", "  const subtotal = cart.items.reduce((s, i) => s + i.price * i.qty, 0);"],
      ["", "  const tax = await taxFor(address, subtotal);"],
      ["", "  const fees = cart.express ? 9.5 : 0;"],
      ["", "  return { subtotal, tax, fees, total: subtotal + tax + fees };"],
      ["", "}"],
      ["", ""],
      ["fn", "export function applyPromo(quote, codes) {"],
      ["cm", "  // Only one code per order: keep the best one."],
      ["", "  const best = codes.map((c) => c.value(quote)).sort((a, b) => b - a)[0] ?? 0;"],
      ["", "  return { ...quote, discount: best, total: quote.total - best };"],
      ["", "}"],
      ["", ""],
      ["fn", "export async function pay(order, method) {"],
      ["", "  const intent = await charge(order.total, method);"],
      ["", "  if (intent.status === \"requires_action\") {"],
      ["", "    const ok = await confirm3ds(intent);"],
      ["", "    if (!ok) return { status: \"failed\", keepForm: true };"],
      ["", "  }"],
      ["", "  return { status: \"paid\", id: intent.id };"],
      ["", "}"],
      ["", ""],
      ["fn", "export async function invoice(order, customer) {"],
      ["", "  const pdf = await render(\"invoice\", { order, customer });"],
      ["", "  await mail(customer.billingEmail, pdf);"],
      ["", "  return pdf.url;"],
      ["", "}"],
      ["", ""],
      ["fn", "export function receipt(order) {"],
      ["", "  return {"],
      ["", "    lines: order.items.map((i) => `${i.qty} × ${i.name}`),"],
      ["", "    total: formatUsd(order.total),"],
      ["", "  };"],
      ["", "}"],
    ];
    src.forEach(([kind, text], i) => {
      const line = document.createElement("div");
      line.className = `fp-line${kind ? ` fp-${kind}` : ""}`;
      line.id = `fp-l${i + 1}`;
      if (kind === "fn") line.dataset.footprintsLabel = text.replace(/^export (async )?function (\w+).*/, "$2()");
      const n = document.createElement("span");
      n.textContent = String(i + 1);
      const t = document.createElement("span");
      t.textContent = text || " ";
      line.append(n, t);
      code.append(line);
    });
    const codeRail = document.getElementById("fp-code-rail");
    codeRail.people = [
      { id: "kwame", name: "Kwame Boateng", mode: "commenting", anchor: "fp-l21", note: "Line 21: retry on 3-D Secure timeout?" },
      { id: "sofia", name: "Sofia Nguyen", mode: "viewing", anchor: "fp-l6" },
    ];
    let line = 6;
    const codeTimer = setInterval(() => {
      if (!live.checked) return;
      line = line >= src.length - 2 ? 2 : line + 2;
      codeRail.move("sofia", { anchor: `fp-l${line}` });
    }, 1400);

    // The demo can be replayed: stop the fake feeds when it leaves the page.
    const mo = new MutationObserver(() => { if (!rail.isConnected) { clearInterval(timer); clearInterval(codeTimer); mo.disconnect(); } });
    mo.observe(document.body, { childList: true, subtree: true });
  </script>
</div>