Balance Sheet <mv-balance-sheet>

node scripts/add.mjs balance-sheet --out ./src/marvelous

<div id="bs-demo" style="width:min(100%,74rem);margin-inline:auto">
  <style>
    #bs-demo { display:grid; gap:1.5rem; align-content:start }
    #bs-demo .bs-layout { display:grid; grid-template-columns:minmax(0,1fr) 15.5rem; gap:1.25rem; align-items:start }
    #bs-demo .bs-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; margin-bottom:.75rem }
    #bs-demo .bs-intro h3 { margin:0; font-size:1rem; letter-spacing:-.01em }
    #bs-demo .bs-intro p { margin:.1875rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #bs-demo .bs-side { position:sticky; top:1rem; display:grid; gap:.875rem; padding:1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface-raised); box-shadow:var(--mv-shadow-sm); font-size:.8125rem }
    #bs-demo .bs-side h4 { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:0; font-size:.8125rem; font-weight:600 }
    #bs-demo .bs-side p { margin:0; color:var(--mv-fg-muted); font-size:.75rem; line-height:1.45 }
    #bs-demo .bs-side .mv-choice { font-size:.8125rem }
    #bs-demo .bs-sep { height:1px; background:var(--mv-border) }
    #bs-demo .bs-log { display:grid; gap:.3125rem; margin:0; padding:0; list-style:none; font:.6875rem/1.45 var(--mv-font-mono); color:var(--mv-fg-muted) }
    #bs-demo .bs-log li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #bs-demo .bs-log b { color:var(--mv-fg); font-weight:500 }
    #bs-demo .bs-form { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin-top:.75rem; color:var(--mv-fg-muted); font-size:.75rem }
    #bs-demo .bs-hint { margin:0; color:var(--mv-fg-muted); font-size:.75rem; text-align:center }
    @media (max-width:56rem) {
      #bs-demo .bs-layout { grid-template-columns:minmax(0,1fr) }
      #bs-demo .bs-side { position:static }
    }
  </style>

  <div class="bs-layout">
    <section aria-labelledby="bs-week-title">
      <div class="bs-intro">
        <div>
          <h3 id="bs-week-title">Leadership offsite · People &amp; Ops</h3>
          <p>Decision due Friday, October 16 · Product team of 14 across Lisbon, Toronto and Singapore</p>
        </div>
        <span class="mv-badge" data-variant="outline" id="bs-verdict-badge">Leaning yes</span>
      </div>

      <form id="bs-week-form">
        <mv-balance-sheet id="bs-week" name="four-day-week" confidence require-answers
          question="Move the product team to a 4-day week?">
          <ul>
            <li data-side="for" data-weight="5" data-id="retention">Two engineers cited burnout in exit interviews this year; replacing each costs about $48,000</li>
            <li data-side="for" data-weight="5" data-confidence="likely" data-id="pilot">Lisbon pilot (Q2): shipped output flat, sick days down 30%</li>
            <li data-side="for" data-weight="3" data-id="stagger">Staggered days off (Mon or Fri) keep five-day coverage</li>
            <li data-side="for" data-weight="4" data-confidence="likely" data-id="hiring">4-day roles draw roughly 3× more applicants in our markets</li>
            <li data-side="for" data-weight="4" data-id="meetings">Forces us to cut recurring meetings (11 h per person per week today)</li>
            <li data-side="for" data-weight="3" data-confidence="unsure" data-id="raise">Cheaper than the 8% raise the team asked for in the spring</li>
            <li data-side="against" data-weight="3" data-confidence="likely" data-pair="pilot" data-id="cadence">Release cadence could slip during the transition quarter</li>
            <li data-side="against" data-weight="4" data-pair="stagger" data-id="support">Customer support needs full coverage on Fridays</li>
            <li data-side="against" data-weight="4" data-id="sla">Two enterprise contracts promise a 5-business-day response SLA</li>
            <li data-side="against" data-weight="2" data-id="payroll">Payroll and time-off policies must be rewritten in 3 countries</li>
            <li data-side="against" data-weight="3" data-confidence="likely" data-id="reverse">Hard to walk back once it is announced</li>
          </ul>
        </mv-balance-sheet>
        <div class="bs-form">
          <span id="bs-form-status" role="status">Every concern must be answered before this can be submitted.</span>
          <button class="mv-button" data-size="sm" type="submit">Submit decision</button>
        </div>
      </form>
    </section>

    <aside class="bs-side" aria-label="Demo controls">
      <h4>Options</h4>
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="bs-conf" checked> Confidence per point</label>
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="bs-ro"> Read-only record</label>
      <div class="bs-sep"></div>
      <h4>Try it</h4>
      <p>Answer “Hard to walk back” with a new point, or drag a weight: the beam tilts and the verdict line follows.</p>
      <button class="mv-button" data-variant="outline" data-size="sm" type="button" id="bs-answer">Answer the SLA concern</button>
      <button class="mv-button" data-variant="secondary" data-size="sm" type="button" id="bs-reset">Reset the sheet</button>
      <div class="bs-sep"></div>
      <h4>Events</h4>
      <ol class="bs-log" id="bs-log"><li>-</li></ol>
    </aside>
  </div>

  <!-- Variant: several options in tabs, compared in a summary table -->
  <section aria-labelledby="bs-vendor-title">
    <div class="bs-intro">
      <div>
        <h3 id="bs-vendor-title">Vendor review · Platform team</h3>
        <p>Three candidates for error monitoring, weighed option by option. Budget: $1,800 / month.</p>
      </div>
    </div>
    <mv-balance-sheet id="bs-vendor" selected="compare" for-label="Strengths" against-label="Risks" for-verdict="in favor" against-verdict="against"
      question="Which error-monitoring vendor should we adopt?">
      <ul data-option="Lumen Metrics" data-option-id="lumen">
        <li data-side="for" data-weight="5" data-id="l1">Source maps and release tracking work out of the box</li>
        <li data-side="for" data-weight="4" data-id="l2">EU data residency (Frankfurt) covers our GDPR review</li>
        <li data-side="for" data-weight="3" data-id="l3">Annual plan at $1,450 / month for 20 seats</li>
        <li data-side="against" data-weight="3" data-pair="l3" data-id="l4">Event overage billed at $0.00028 per event</li>
        <li data-side="against" data-weight="2" data-id="l5">No on-prem option if a customer demands one</li>
      </ul>
      <ul data-option="Tessera Cloud" data-option-id="tessera">
        <li data-side="for" data-weight="4" data-id="t1">Already used by the mobile team; one contract</li>
        <li data-side="for" data-weight="3" data-id="t2">Best session replay of the three</li>
        <li data-side="against" data-weight="5" data-id="t3">US-only hosting blocks two EU customers</li>
        <li data-side="against" data-weight="4" data-pair="t1" data-id="t4">Seat price rises to $95 at renewal</li>
        <li data-side="against" data-weight="3" data-id="t5">SAML only on the Enterprise tier</li>
      </ul>
      <ul data-option="Self-hosted stack" data-option-id="self">
        <li data-side="for" data-weight="4" data-id="s1">No per-event cost, data never leaves our cloud</li>
        <li data-side="for" data-weight="2" data-id="s2">Full control over retention (400 days)</li>
        <li data-side="against" data-weight="5" data-pair="s1" data-id="s3">About 0.5 FTE of on-call and upgrades</li>
        <li data-side="against" data-weight="4" data-id="s4">Alerting and dashboards to build ourselves</li>
      </ul>
    </mv-balance-sheet>
  </section>
  <p class="bs-hint">Open a vendor tab to edit its sheet · the Compare tab ranks the options by net balance · Copy Markdown exports the whole review</p>

  <script type="module">
    await customElements.whenDefined("mv-balance-sheet");
    const $ = (id) => document.getElementById(id);
    const sheet = $("bs-week");
    const log = $("bs-log");
    const badge = $("bs-verdict-badge");
    const write = (html) => {
      if (log.firstElementChild?.textContent === "-") log.replaceChildren();
      const li = document.createElement("li");
      li.append(...html);
      log.prepend(li);
      while (log.children.length > 6) log.lastElementChild.remove();
    };
    const b = (t) => { const el = document.createElement("b"); el.textContent = t; return el; };
    const paintBadge = () => {
      const r = sheet.verdict;
      badge.textContent = r.verdict.split(" · ")[0];
      badge.dataset.variant = r.lean === "for" ? "success" : r.lean === "against" ? "danger" : "secondary";
    };
    paintBadge();

    sheet.addEventListener("mv-change", (e) => {
      const { reason, results } = e.detail;
      write([b("mv-change "), `${reason} · net ${results[0].net > 0 ? "+" : ""}${results[0].net}`]);
      paintBadge();
    });
    sheet.addEventListener("mv-verdict", (e) => {
      write([b("mv-verdict "), `${e.detail.previous} → ${e.detail.lean}`]);
      paintBadge();
    });
    sheet.addEventListener("mv-export", (e) => write([b("mv-export "), e.detail.format]));

    $("bs-conf").addEventListener("change", (e) => { sheet.confidence = e.target.checked; paintBadge(); });
    $("bs-ro").addEventListener("change", (e) => { sheet.readonly = e.target.checked; });
    $("bs-answer").addEventListener("click", () => {
      const id = sheet.addItem("for", "Keep a rotating Friday responder for enterprise tickets", { weight: 4, answers: "sla" });
      if (id) $("bs-answer").disabled = true;
    });
    const initial = sheet.value;
    $("bs-reset").addEventListener("click", () => { sheet.value = initial; $("bs-answer").disabled = false; paintBadge(); write([b("reset")]); });

    const form = $("bs-week-form");
    const status = $("bs-form-status");
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const data = JSON.parse(new FormData(form).get("four-day-week"));
      status.textContent = `Submitted: ${data.results[0].verdict}.`;
    });
    form.addEventListener("invalid", () => { status.textContent = sheet.validationMessage; }, true);

    $("bs-vendor").addEventListener("mv-verdict", (e) => write([b("mv-verdict "), `${e.detail.label}: ${e.detail.lean}`]));
  </script>
</div>