statistic — the metric readout

<script lang="ts">
  // the countdown, composed: the component renders the value; the tick
  // law is page state (a first-class countdown item is the recorded
  // followup).
  let durationMs = $state(90_000);
  let remainingMs = $state(durationMs);
  let running = $state(false);
  let finished = $state(false);
  let timer;

  function start() {
    if (running) return;
    running = true;
    timer = setInterval(() => {
      remainingMs = Math.max(0, remainingMs - 1_000);
      if (remainingMs === 0) { stop(); finished = true; }
    }, 1_000);
  }
  function stop() {
    running = false;
    clearInterval(timer);
  }
  const mmss = $derived(
    String(Math.floor(remainingMs / 60_000)).padStart(2, '0')
    + ':' + String(Math.floor((remainingMs % 60_000) / 1_000)).padStart(2, '0'));
</script>

<div class="flex items-end gap-4">
  <Statistic title="deploy window closes in" value={mmss} />
  {#if finished}<Badge variant="fill">window closed</Badge>{/if}
</div>
<div class="flex gap-2">
  <PressButton variant="outline" onclick={start} disabled={running || finished}>start</PressButton>
  <PressButton variant="ghost" onclick={stop} disabled={!running}>pause</PressButton>
  <PressButton variant="ghost" onclick={reset}>reset</PressButton>
</div>
<p class="sr-only" aria-live="polite">{finished ? 'window closed' : ''}</p>

<script lang="ts">
  // formatting is the caller's law: Intl.NumberFormat decides the digits,
  // the prefix/suffix snippets decide the glyphs.
  const raw = 1234.5;
  let digits = $state(2);
  const precise = $derived(new Intl.NumberFormat('en-US',
    { minimumFractionDigits: digits, maximumFractionDigits: digits }).format(raw));
</script>

<!-- prefix/suffix are SNIPPETS: any glyph, any paint -->
<Statistic title="revenue / mo" value={precise}>
  {#snippet prefix()}<span class="text-muted-foreground">$</span>{/snippet}
  {#snippet suffix()}<span class="text-muted-foreground">USD</span>{/snippet}
</Statistic>
<Statistic title="cache hit rate" value="97.4">
  {#snippet suffix()}<span class="text-muted-foreground">%</span>{/snippet}
</Statistic>