Steady Pace <mv-steady-pace>

node scripts/add.mjs steady-pace --out ./src/marvelous

<mv-steady-pace label="Emergency fund" format="currency" target="4000" start="-45d" deadline="+37d">
  <script type="application/json" data-entries>[["-44d", 300], ["-31d", 300], ["-17d", 300], ["-3d", 300]]</script>
</mv-steady-pace>

<div id="sp-demo" style="width:min(100%,68rem);margin-inline:auto">
  <style>
    #sp-demo { display:grid; gap:1.75rem }
    #sp-demo .spd-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1rem }
    #sp-demo .spd-bar h3 { margin:0; font-size:1.0625rem; letter-spacing:-.01em }
    #sp-demo .spd-bar p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #sp-demo .spd-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem }
    #sp-demo .spd-col { display:grid; gap:.75rem; min-width:0; align-content:start }
    #sp-demo .spd-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; align-items:start }
    #sp-demo .spd-log { display:flex; align-items:center; gap:.5rem; min-width:0; color:var(--mv-fg-muted); font-size:.75rem }
    #sp-demo .spd-log span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #sp-demo .spd-goals { margin:0; padding:0; list-style:none; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs) }
    #sp-demo .spd-goals li { display:grid; grid-template-columns:minmax(9rem,13rem) minmax(0,1fr); align-items:center; gap:.5rem 1.25rem; padding:.875rem 1.125rem; font-size:.875rem }
    #sp-demo .spd-goals li + li { border-top:1px solid var(--mv-border) }
    #sp-demo .spd-goal { display:grid; gap:.125rem; min-width:0 }
    #sp-demo .spd-goal strong { font-weight:600 }
    #sp-demo .spd-goal span { color:var(--mv-fg-muted); font-size:.75rem }
    @media (max-width:52rem) {
      #sp-demo .spd-row { grid-template-columns:minmax(0,1fr) }
      #sp-demo .spd-goals li { grid-template-columns:minmax(0,1fr) }
    }
  </style>

  <!-- Main: a savings goal, full chart with a what-if -->
  <section class="spd-col" aria-labelledby="spd-main-h">
    <div class="spd-bar">
      <div>
        <h3 id="spd-main-h">Emergency fund</h3>
        <p>Personal finance app · deposits since mid-August</p>
      </div>
      <div class="spd-actions">
        <mv-segmented id="spd-view" aria-label="View" value="chart">
          <button value="inline">Inline</button>
          <button value="card">Card</button>
          <button value="chart">Chart</button>
        </mv-segmented>
        <label class="mv-choice" data-control="end">
          <input type="checkbox" role="switch" class="mv-switch" id="spd-workdays">
          <span class="mv-choice-text"><span class="mv-choice-title">Workdays only</span></span>
        </label>
        <button class="mv-button" data-size="sm" type="button" id="spd-log-btn">Log $75 today</button>
      </div>
    </div>
    <mv-steady-pace id="spd-main" label="Save $4,000 for an emergency fund" format="currency" target="4000" start="-45d" deadline="+37d" variant="chart" what-if="fixed">
      <script type="application/json" data-entries>[
        ["-44d", 300, "Paycheck"], ["-38d", 180], ["-31d", 300, "Paycheck"], ["-27d", 150], ["-24d", 90],
        ["-20d", 100], ["-17d", 300, "Paycheck"], ["-12d", 120], ["-9d", 60], ["-3d", 300, "Paycheck"], ["-1d", 75]
      ]</script>
    </mv-steady-pace>
    <div class="spd-log" aria-hidden="true"><span class="mv-badge" data-variant="secondary" data-shape="pill" id="spd-event">mv-pace-change</span><span id="spd-last">Waiting for an event…</span></div>
  </section>

  <div class="spd-row">
    <!-- A sales quota counted in workdays, shown per week; two big deals then a quiet stretch -->
    <section class="spd-col" aria-labelledby="spd-quota-h">
      <div class="spd-bar"><div><h3 id="spd-quota-h">Q4 sales quota</h3><p>Workdays only · pace per week · burst detection</p></div></div>
      <mv-steady-pace label="Team quota" format="currency" target="180000" start="-24d" deadline="+60d" working-days per="week">
        <script type="application/json" data-entries>[
          ["-22d", 42000, "Kestrel renewal"], ["-19d", 38500, "Globex expansion"], ["-15d", 4200], ["-9d", 6500], ["-6d", 2800], ["-2d", 3600]
        ]</script>
      </mv-steady-pace>
    </section>

    <!-- A learning goal in custom units, with the "move the date" what-if -->
    <section class="spd-col" aria-labelledby="spd-words-h">
      <div class="spd-bar"><div><h3 id="spd-words-h">Spanish vocabulary</h3><p>Custom unit · what-if that moves the date</p></div></div>
      <mv-steady-pace label="Learn 1,500 words" unit="words" target="1500" start="-20d" deadline="+10d" what-if="extend">
        <script type="application/json" data-entries>[
          ["-20d", 60], ["-19d", 45], ["-18d", 70], ["-17d", 50], ["-15d", 80], ["-14d", 40], ["-13d", 55], ["-11d", 65],
          ["-10d", 50], ["-8d", 75], ["-7d", 60], ["-6d", 45], ["-4d", 90], ["-3d", 70], ["-2d", 55], ["-1d", 60], ["today", 70]
        ]</script>
      </mv-steady-pace>
    </section>
  </div>

  <!-- Inline sentences inside a goals list -->
  <section class="spd-col" aria-labelledby="spd-goals-h">
    <div class="spd-bar"><div><h3 id="spd-goals-h">Team goals</h3><p>Inline variant: one status and one sentence per row</p></div></div>
    <ul class="spd-goals">
      <li>
        <span class="spd-goal"><strong>Sprint 42 scope</strong><span>Engineering · workdays</span></span>
        <mv-steady-pace variant="inline" unit="points" target="40" start="-6d" deadline="+7d" working-days>
          <script type="application/json" data-entries>[["-5d", 5], ["-4d", 3], ["-2d", 4], ["-1d", 4]]</script>
        </mv-steady-pace>
      </li>
      <li>
        <span class="spd-goal"><strong>Community fundraiser</strong><span>Riverside food bank</span></span>
        <mv-steady-pace variant="inline" format="currency" target="25000" start="-30d" deadline="+30d">
          <script type="application/json" data-entries>[["-29d", 6000, "Launch event"], ["-27d", 1200], ["-20d", 800], ["-14d", 650], ["-9d", 400], ["-4d", 750]]</script>
        </mv-steady-pace>
      </li>
      <li>
        <span class="spd-goal"><strong>Marathon training block</strong><span>Aiko Tanaka · distance</span></span>
        <mv-steady-pace variant="inline" unit="km" target="400" start="-50d" deadline="+6d">
          <script type="application/json" data-entries>[["-49d", 60], ["-40d", 70], ["-31d", 75], ["-22d", 80], ["-12d", 70], ["-3d", 45]]</script>
        </mv-steady-pace>
      </li>
    </ul>
  </section>

  <script type="module">
    await customElements.whenDefined("mv-steady-pace");
    const main = document.getElementById("spd-main");
    const badge = document.getElementById("spd-event");
    const last = document.getElementById("spd-last");

    main.addEventListener("mv-pace-change", (e) => {
      const { tier, previous, statement, label } = e.detail;
      if (previous === null) return;
      badge.textContent = "mv-pace-change";
      badge.dataset.variant = tier === "ahead" || tier === "done" ? "success" : tier === "on-pace" ? "info" : "warning";
      last.textContent = `${previous} → ${tier}: ${label}. ${statement}`;
    });
    main.addEventListener("mv-whatif", (e) => {
      badge.textContent = "mv-whatif";
      badge.dataset.variant = "secondary";
      last.textContent = e.detail.statement;
    });

    document.getElementById("spd-log-btn").addEventListener("click", () => main.add(75));
    document.getElementById("spd-workdays").addEventListener("change", (e) => { main.workingDays = e.target.checked; });
    document.getElementById("spd-view").addEventListener("mv-change", (e) => { main.variant = e.detail.value; });
  </script>
</div>