Scope Tally <mv-scope-tally>

node scripts/add.mjs scope-tally --out ./src/marvelous

<div id="st-demo" style="width:min(100%,72rem);margin-inline:auto">
  <style>
    #st-demo .st-layout { display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:1.25rem; align-items:start }
    #st-demo .st-side { display:grid; gap:1rem; position:sticky; top:1rem }
    #st-demo .st-panel { display:grid; gap:.75rem; padding:1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface-raised); box-shadow:var(--mv-shadow-xs); font-size:.8125rem }
    #st-demo .st-panel h4 { margin:0; font-size:.8125rem; font-weight:600 }
    #st-demo .st-panel p { margin:0; color:var(--mv-fg-muted); font-size:.75rem }
    #st-demo .st-k { color:var(--mv-fg-muted); font-size:.6875rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600 }
    #st-demo .st-log { list-style:none; margin:0; padding:0; display:grid; gap:.375rem; font-size:.75rem }
    #st-demo .st-log li { display:grid; gap:.125rem; padding:.375rem .5rem; border-radius:var(--mv-radius-md); background:var(--mv-bg-subtle) }
    #st-demo .st-log code { font:500 .6875rem/1.2 var(--mv-font-mono); color:var(--mv-fg) }
    #st-demo .st-log span { color:var(--mv-fg-muted) }
    #st-demo .st-log .st-empty { background:none; padding:0; color:var(--mv-fg-subtle) }
    #st-demo .st-minis { display:grid; gap:1rem }
    @media (max-width:60rem) {
      #st-demo .st-layout { grid-template-columns:minmax(0,1fr) }
      #st-demo .st-side { position:static; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)) }
    }
  </style>

  <div class="st-layout">
    <mv-scope-tally id="st-main"
      heading="Customer portal rebuild"
      subheading="Harbor &amp; Pine Outfitters · Fixed quote Q-2026-114, signed Jul 28"
      unit="day" rate="850" thresholds="25,50,100" last-seen="2026-09-12">
      <ol data-scope-baseline>
        <li data-id="discovery" data-estimate="1">Discovery workshop and sitemap</li>
        <li data-id="design" data-estimate="3">Visual design: 5 page templates</li>
        <li data-id="cms" data-estimate="2">CMS setup and content model</li>
        <li data-id="catalog" data-estimate="3">Product catalog with filters</li>
        <li data-id="account" data-estimate="2">Customer accounts and order history</li>
        <li data-id="launch" data-estimate="1">QA, launch and handover</li>
      </ol>
      <ol data-scope-changes>
        <li data-id="newsletter" data-kind="add" data-delta="0.5" data-by="Maya Chen" data-role="Client" data-date="2026-08-04" data-status="accepted" data-billable>Newsletter signup synced to the CRM</li>
        <li data-id="templates" data-kind="change" data-target="design" data-delta="1.5" data-by="Maya Chen" data-role="Client" data-date="2026-08-12" data-status="accepted" data-billable>Two more page templates: Stores and Careers</li>
        <li data-id="sso" data-kind="add" data-delta="2" data-by="Daniel Okafor" data-role="Client IT" data-date="2026-08-19" data-status="accepted" data-billable>Staff sign-in through the company directory (SSO)</li>
        <li data-id="sitemap" data-kind="remove" data-target="discovery" data-by="Maya Chen" data-role="Client" data-date="2026-08-27" data-status="accepted">Discovery workshop dropped<span data-note>The client supplied an approved sitemap from their agency of record.</span></li>
        <li data-id="chat" data-kind="add" data-delta="4" data-by="Leo Martins" data-role="Client" data-date="2026-08-30" data-status="declined">Custom live chat widget<span data-note>Replaced by their existing help desk embed, at no cost.</span></li>
        <li data-id="locator" data-kind="add" data-delta="2" data-by="Maya Chen" data-role="Client" data-date="2026-09-03" data-status="accepted" data-billable>Store locator with map and opening hours</li>
        <li data-id="filters" data-kind="change" data-target="catalog" data-delta="1.5" data-by="Aiko Tanaka" data-role="Studio lead" data-date="2026-09-08" data-status="accepted" data-billable="false">Catalog filters by size, color and in-store stock<span data-note>Underestimated in the quote; absorbed by the studio.</span></li>
        <li data-id="i18n" data-kind="add" data-delta="3" data-by="Priya Raman" data-role="Client marketing" data-date="2026-09-10" data-status="deferred">French and Spanish versions of the site</li>
        <li data-id="giftcards" data-kind="add" data-delta="2.5" data-by="Leo Martins" data-role="Client" data-date="2026-09-15" data-status="accepted" data-billable>Gift cards at checkout</li>
        <li data-id="loyalty" data-kind="add" data-delta="3" data-by="Leo Martins" data-role="Client" data-date="2026-09-18" data-status="pending">Loyalty points in the account area<span data-note>Needs the points API from their POS vendor, expected in October.</span></li>
        <li data-id="a11y" data-kind="add" data-delta="1" data-by="Samira Haddad" data-role="Studio QA" data-date="2026-09-22" data-status="pending" data-billable="false">Fixes from the accessibility audit (contrast, focus order)</li>
      </ol>
    </mv-scope-tally>

    <aside class="st-side" aria-label="Demo controls">
      <div class="st-panel">
        <h4>Try it</h4>
        <p>Decide the pending requests, hover a step to find it on the rails, or switch to Compare to original.</p>
        <button class="mv-button" data-variant="outline" data-size="sm" type="button" id="st-request">Client sends a new request</button>
        <label class="mv-choice" data-control="end">
          <input type="checkbox" role="switch" class="mv-switch" id="st-readonly">
          <span class="mv-choice-text"><span class="mv-choice-title">Client view</span><span class="mv-choice-description">Read-only, no decision buttons</span></span>
        </label>
      </div>
      <div class="st-panel">
        <span class="st-k">Events</span>
        <ol class="st-log" id="st-log"><li class="st-empty">Decide a request to see mv-scope-decision</li></ol>
      </div>
      <div class="st-minis">
        <mv-scope-tally id="st-sprint" variant="summary" heading="Sprint 42 commitment" subheading="Payments team · Sep 15 to Sep 26" unit="point" thresholds="15,30"></mv-scope-tally>
        <mv-scope-tally id="st-brand" variant="summary" heading="Brand guidelines" subheading="Fernhollow Labs · Fixed fee" unit="USD" thresholds="25,50"></mv-scope-tally>
      </div>
    </aside>
  </div>

  <script type="module">
    await customElements.whenDefined("mv-scope-tally");
    const $ = (id) => document.getElementById(id);
    const main = $("st-main"), log = $("st-log");

    $("st-sprint").baseline = [
      { id: "refunds", label: "Partial refunds", estimate: 8 },
      { id: "payouts", label: "Scheduled payouts", estimate: 13 },
      { id: "report", label: "Legacy settlement report", estimate: 5 },
      { id: "webhooks", label: "Webhook retries", estimate: 8 },
    ];
    $("st-sprint").changes = [
      { id: "hotfix", label: "Hotfix: refund rounding", delta: 3, by: "On-call", date: "2026-09-16", status: "accepted" },
      { id: "wallet", label: "Wallet payments on web", delta: 8, by: "Product", date: "2026-09-17", status: "accepted" },
      { id: "drop", label: "Legacy report moved out", kind: "remove", target: "report", date: "2026-09-18", status: "accepted" },
      { id: "alerts", label: "Chargeback alerts", delta: 5, by: "Risk", date: "2026-09-22", status: "pending" },
    ];
    $("st-brand").baseline = [
      { id: "logo", label: "Logo refresh", estimate: 4500 },
      { id: "guide", label: "Guidelines document", estimate: 5000 },
      { id: "templates", label: "Social templates", estimate: 2500 },
    ];
    $("st-brand").changes = [
      { id: "motion", label: "Motion logo", delta: 1800, by: "Client", date: "2026-09-02", status: "accepted", billable: true },
      { id: "print", label: "Print stationery", delta: 950, by: "Client", date: "2026-09-11", status: "accepted", billable: true },
      { id: "signage", label: "Store signage kit", delta: 2400, by: "Client", date: "2026-09-19", status: "pending" },
    ];

    const push = (name, text) => {
      log.querySelector(".st-empty")?.remove();
      const li = document.createElement("li");
      const code = document.createElement("code");
      code.textContent = name;
      const span = document.createElement("span");
      span.textContent = text;
      li.append(code, span);
      log.prepend(li);
      while (log.children.length > 4) log.lastElementChild.remove();
    };
    const pct = (g) => `${g >= 0 ? "+" : ""}${Math.round(g * 100)}%`;
    main.addEventListener("mv-scope-decision", (e) => {
      const { decision, change, after } = e.detail;
      push("mv-scope-decision", `${decision} · ${change.label} → ${after?.now ?? main.totals.now} days`);
    });
    main.addEventListener("mv-scope-threshold", (e) => {
      const { threshold, direction, growth } = e.detail;
      push("mv-scope-threshold", `${direction} · +${threshold}% review point (${pct(growth)})`);
    });
    main.addEventListener("mv-scope-export", (e) => push("mv-scope-export", `${e.detail.text.split("\n").length} lines of summary`));

    const requests = [
      { label: "Export order history to CSV", delta: 1, by: "Maya Chen", role: "Client" },
      { label: "Wishlist shared by email", delta: 1.5, by: "Leo Martins", role: "Client" },
      { label: "Staff-only price overrides", delta: 2, by: "Daniel Okafor", role: "Client IT" },
    ];
    let next = 0;
    $("st-request").addEventListener("click", () => {
      const r = requests[next++ % requests.length];
      main.addChange({ ...r, id: `req-${next}`, date: new Date(), status: "pending" });
    });
    $("st-readonly").addEventListener("change", (e) => { main.readonly = e.target.checked; });
  </script>
</div>