@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/blocks/stats/StatsBlock.svelte

@@ -0,0 +1,315 @@
+<script lang="ts">
+  /**
+   * stats block — 1-8 KPIs as a typographic scorecard row (campaign-blocks
+   * Gate A, J5): no tiles, no accent stripe, no tinted delta pill. Each
+   * metric is a column under a hairline rule — label, value (+unit), delta
+   * in words, target bar, sparkline.
+   *
+   * Columns come from a CONTAINER query on the block, not the viewport: the
+   * block lives in a ~720px page column, so a viewport `xl:grid-cols-4`
+   * produced 171px tiles and truncated every label to one letter. Labels
+   * wrap; they never truncate.
+   *
+   * Tone resolution: the explicit `status` token wins; without one the tone
+   * is derived from `delta` vs its `goodDirection` (a drop can be good —
+   * e.g. error rate), else neutral. `warn` is explicit-only. Tone is carried
+   * by a status dot + glyph (graphics, ≥3:1) and spelled out for screen
+   * readers; the delta TEXT stays base-content/75 so it clears 4.5:1 in
+   * every theme (text-success on a soft tint measured ~1.8:1).
+   */
+  import ProgressBar from "../../../components/progress/ProgressBar.svelte"
+  import Sparkline from "../../../components/Sparkline.svelte"
+  import type { BlockProps } from "../../types.js"
+  import {
+    type StatCard,
+    type StatDelta,
+    type StatStatus,
+    type StatsParams,
+  } from "./schema.js"
+  import SectionTools from "../../SectionTools.svelte"
+
+  let { params, ctx }: BlockProps<StatsParams> = $props()
+
+  const cards = $derived(params?.cards ?? [])
+
+  /** Column count follows the card count, capped at 4 (container widths). */
+  const gridCols = $derived(
+    cards.length <= 1
+      ? ""
+      : cards.length === 2
+        ? "@sm:grid-cols-2"
+        : cards.length === 3
+          ? "@sm:grid-cols-2 @2xl:grid-cols-3"
+          : "@sm:grid-cols-2 @2xl:grid-cols-4",
+  )
+
+  // ---- tone tokens (CSS vars / semantic classes only) ----------------------
+  const TONE_VAR: Record<StatStatus, string> = {
+    good: "var(--color-success)",
+    warn: "var(--color-warning)",
+    bad: "var(--color-error)",
+    neutral: "var(--color-primary)",
+  }
+  const TONE_DOT: Record<StatStatus, string> = {
+    good: "bg-success",
+    warn: "bg-warning",
+    bad: "bg-error",
+    neutral: "",
+  }
+  const TONE_WORD: Record<StatStatus, string> = {
+    good: "on track",
+    warn: "watch",
+    bad: "off track",
+    neutral: "",
+  }
+  const DELTA_ICON_TONE: Record<"good" | "bad" | "neutral", string> = {
+    good: "text-success",
+    bad: "text-error",
+    neutral: "text-base-content/50",
+  }
+  const TONE_PROGRESS: Record<
+    StatStatus,
+    "primary" | "success" | "warning" | "error"
+  > = {
+    good: "success",
+    warn: "warning",
+    bad: "error",
+    neutral: "primary",
+  }
+
+  function toneOf(card: StatCard): StatStatus {
+    if (card.status) return card.status
+    if (!card.delta || card.delta.value === 0) return "neutral"
+    const good = card.delta.goodDirection ?? "up"
+    const positive = card.delta.value > 0
+    return (good === "up") === positive ? "good" : "bad"
+  }
+
+  function deltaTone(d: StatDelta): "good" | "bad" | "neutral" {
+    if (d.value === 0) return "neutral"
+    const good = d.goodDirection ?? "up"
+    return (good === "up") === d.value > 0 ? "good" : "bad"
+  }
+
+  // ---- formatting ----------------------------------------------------------
+  function fmt(n: number, decimals?: number): string {
+    if (!Number.isFinite(n)) return "n/a"
+    const nf = new Intl.NumberFormat(
+      "en-US",
+      decimals === undefined
+        ? { maximumFractionDigits: 2 }
+        : { minimumFractionDigits: decimals, maximumFractionDigits: decimals },
+    )
+    return nf.format(n)
+  }
+
+  function deltaText(d: StatDelta, decimals?: number): string {
+    const sign = d.value > 0 ? "+" : d.value < 0 ? "−" : ""
+    return `${sign}${fmt(Math.abs(d.value), decimals)}`
+  }
+
+  function deltaSr(d: StatDelta): string {
+    const t = deltaTone(d)
+    const dir = d.value > 0 ? "up" : d.value < 0 ? "down" : "unchanged"
+    return t === "neutral"
+      ? dir
+      : `${dir}, ${t === "good" ? "better" : "worse"}`
+  }
+
+  function targetPct(card: StatCard): number {
+    if (!card.target || card.target.value <= 0) return 0
+    return Math.min(100, Math.max(0, (card.value / card.target.value) * 100))
+  }
+
+  function targetCaption(card: StatCard): string {
+    if (!card.target) return ""
+    const unit = card.unit ?? ""
+    const num = `${fmt(card.target.value, card.decimals)}${unit}`
+    return card.target.label ? `${card.target.label} (${num})` : num
+  }
+
+  function sparkSr(values: number[]): string {
+    const first = values[0]
+    const last = values[values.length - 1]
+    const trend = last > first ? "rising" : last < first ? "falling" : "flat"
+    return `Trend over ${values.length} points: ${fmt(first)} to ${fmt(last)}, ${trend}.`
+  }
+
+  const browser = typeof window !== "undefined"
+
+  // ---- sparkline -----------------------------------------------------------
+  // The jatui Sparkline animates its entrance; under prefers-reduced-motion
+  // the same bars are drawn as a static SVG instead (same band math, no motion).
+  let reduceMotion = $state(
+    browser
+      ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      : false,
+  )
+  $effect(() => {
+    if (!browser) return
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)")
+    const on = () => (reduceMotion = mq.matches)
+    mq.addEventListener?.("change", on)
+    return () => mq.removeEventListener?.("change", on)
+  })
+
+  const SPARK_W = 112
+  const SPARK_H = 24
+
+  interface StaticBar {
+    x: number
+    y: number
+    w: number
+    h: number
+    o: number
+  }
+
+  function staticBars(values: number[]): StaticBar[] {
+    const pad = 1
+    const innerW = SPARK_W - pad * 2
+    const innerH = SPARK_H - pad * 2
+    const min = Math.min(...values) * 0.95
+    const max = Math.max(...values) * 1.05
+    const span = max - min || 1
+    const bandW = innerW / values.length
+    const w = Math.max(1, bandW * 0.85)
+    return values.map((v, i) => {
+      const h = ((v - min) / span) * innerH
+      return {
+        x: pad + i * bandW + (bandW - w) / 2,
+        y: innerH - h,
+        w,
+        h,
+        o: 0.15 + 0.85 * (i / Math.max(1, values.length - 1)),
+      }
+    })
+  }
+</script>
+
+<section class="artifact-stats @container w-full">
+  {#if params?.title}
+    <div class="mb-3 flex items-center gap-2">
+      <h2 class="min-w-0 text-sm font-semibold text-base-content">
+        {params.title}
+      </h2>
+      <SectionTools {ctx} inline />
+    </div>
+  {/if}
+
+  <dl class="grid grid-cols-1 gap-x-6 gap-y-5 {gridCols}">
+    {#each cards as card, i (`${i}:${card.label}`)}
+      {@const tone = toneOf(card)}
+      <div
+        class="stat-metric flex min-w-0 flex-col gap-1 border-t border-base-content/15 pt-3"
+        data-tone={tone}
+      >
+        <dt
+          class="flex min-w-0 items-start gap-1.5 text-[0.8125rem] leading-snug text-base-content/70"
+        >
+          {#if TONE_DOT[tone]}
+            <span
+              class="mt-1.5 size-2 shrink-0 rounded-full {TONE_DOT[tone]}"
+              aria-hidden="true"
+            ></span>
+          {/if}
+          <span class="min-w-0 text-pretty break-words">{card.label}</span>
+          {#if TONE_WORD[tone]}
+            <span class="sr-only">({TONE_WORD[tone]})</span>
+          {/if}
+        </dt>
+
+        <dd class="flex flex-wrap items-baseline gap-x-1">
+          <span
+            class="text-3xl font-semibold leading-tight tracking-tight tabular-nums text-base-content"
+            >{fmt(card.value, card.decimals)}</span
+          >
+          {#if card.unit}
+            <span class="text-sm text-base-content/70">{card.unit}</span>
+          {/if}
+        </dd>
+
+        {#if card.delta}
+          {@const dt = deltaTone(card.delta)}
+          <dd
+            class="stat-delta flex items-start gap-1 text-[0.8125rem] leading-snug text-base-content/75"
+            data-delta-tone={dt}
+          >
+            <span
+              class="mt-px shrink-0 {DELTA_ICON_TONE[dt]}"
+              aria-hidden="true"
+            >
+              {#if card.delta.value > 0}
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7h10v10" /><path d="M7 17 17 7" /></svg>
+              {:else if card.delta.value < 0}
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 7 10 10" /><path d="M17 7v10H7" /></svg>
+              {:else}
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /></svg>
+              {/if}
+            </span>
+            <span class="min-w-0">
+              <span class="font-medium tabular-nums text-base-content"
+                >{deltaText(card.delta, card.decimals)}</span
+              >{#if card.delta.label}&nbsp;{card.delta.label}{/if}
+              <span class="sr-only">({deltaSr(card.delta)})</span>
+            </span>
+          </dd>
+        {/if}
+
+        {#if card.target && card.target.value > 0}
+          {@const pct = targetPct(card)}
+          <dd class="mt-1">
+            <ProgressBar
+              value={pct}
+              color={TONE_PROGRESS[tone]}
+              size="xs"
+              label="{card.label}: {fmt(card.value, card.decimals)} of {fmt(
+                card.target.value,
+                card.decimals,
+              )}"
+            />
+            <p class="mt-1 text-xs text-base-content/70">
+              {fmt(card.value, card.decimals)}{card.unit ?? ""} toward {targetCaption(
+                card,
+              )}
+            </p>
+          </dd>
+        {/if}
+
+        {#if card.sparkline && card.sparkline.length >= 2}
+          <dd class="mt-1">
+            {#if reduceMotion}
+              <svg
+                viewBox="0 0 {SPARK_W} {SPARK_H}"
+                width={SPARK_W}
+                height={SPARK_H}
+                aria-hidden="true"
+              >
+                {#each staticBars(card.sparkline) as b}
+                  <rect
+                    x={b.x}
+                    y={b.y}
+                    width={b.w}
+                    height={b.h}
+                    rx="1"
+                    fill={TONE_VAR[tone]}
+                    fill-opacity={b.o}
+                  />
+                {/each}
+              </svg>
+            {:else}
+              <div aria-hidden="true">
+                <Sparkline
+                  values={card.sparkline}
+                  width={SPARK_W}
+                  height={SPARK_H}
+                  color={TONE_VAR[tone]}
+                />
+              </div>
+            {/if}
+            <span class="sr-only">{sparkSr(card.sparkline)}</span>
+          </dd>
+        {/if}
+      </div>
+    {/each}
+  </dl>
+</section>

package/dist/artifact-blocks/blocks/stats/StatsBlock.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { BlockProps } from "../../types.js";
+declare const StatsBlock: import("svelte").Component<BlockProps<{
+    cards: {
+        label: string;
+        value: number;
+        unit?: string | undefined;
+        decimals?: number | undefined;
+        delta?: {
+            value: number;
+            goodDirection?: "up" | "down" | undefined;
+            label?: string | undefined;
+        } | undefined;
+        target?: {
+            value: number;
+            label?: string | undefined;
+        } | undefined;
+        sparkline?: number[] | undefined;
+        status?: "warn" | "neutral" | "good" | "bad" | undefined;
+    }[];
+    title?: string | undefined;
+    dataKey?: string | undefined;
+}>, {}, "">;
+type StatsBlock = ReturnType<typeof StatsBlock>;
+export default StatsBlock;

package/dist/artifact-blocks/blocks/stats/block.d.ts

@@ -0,0 +1,7 @@
+/**
+ * stats block — 1-8 KPI cards with delta, target progress and sparkline.
+ */
+import type { ArtifactBlockDef } from "../../types.js";
+import { type StatsParams } from "./schema.js";
+declare const def: ArtifactBlockDef<StatsParams>;
+export default def;

package/dist/artifact-blocks/blocks/stats/block.js

@@ -0,0 +1,49 @@
+import StatsBlock from "./StatsBlock.svelte";
+import { statsSchema } from "./schema.js";
+const EXAMPLE = {
+    title: "Ruby launch: coverage scorecard",
+    cards: [
+        {
+            label: "Ruby coverage",
+            value: 81.5,
+            unit: "%",
+            delta: { value: 4.2, goodDirection: "up", label: "vs last week" },
+            target: { value: 98 },
+            sparkline: [62, 65, 69, 71, 74, 77, 81.5],
+            status: "good",
+        },
+        {
+            label: "Error rate",
+            value: 1.9,
+            unit: "%",
+            delta: { value: -0.4, goodDirection: "down", label: "vs last week" },
+            status: "good",
+        },
+        {
+            label: "P95 latency",
+            value: 412,
+            unit: "ms",
+            delta: { value: 38, goodDirection: "down", label: "vs last week" },
+            sparkline: [355, 361, 370, 381, 374, 412],
+            status: "warn",
+        },
+        {
+            label: "Signups",
+            value: 1284,
+            delta: { value: -52, goodDirection: "up", label: "vs last week" },
+            status: "bad",
+        },
+    ],
+};
+const def = {
+    type: "stats",
+    title: "Stats (KPI cards)",
+    description: "1-8 KPI cards for a scorecard row. Each card: label, value (+ small unit like %/ms), optional delta (signed change with goodDirection — a negative delta is GOOD when goodDirection is 'down', e.g. error rate; tone: success/warning/error), optional target (renders a progress bar of value toward target, e.g. '81.5% toward 98%'), optional sparkline of 2-31 recent points, and a status tone token good|warn|bad|neutral (omit it to derive the tone from the delta; 'warn' is explicit-only). Tip: lead with the card that needs a decision, keep numbers small enough to read at a glance. Live data (mos-0ninw): set params.dataKey to re-render the whole card grid from a published data key (mos-artifact data) without a republish.",
+    schema: statsSchema,
+    component: StatsBlock,
+    // mos-8fvt9: the section's Listen + comment sit on the heading row.
+    hostsTools: (p) => Boolean(p.title),
+    example: EXAMPLE,
+    dataParam: "dataKey",
+};
+export default def;

package/dist/artifact-blocks/blocks/stats/schema.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Params schema for the stats block (1-8 KPI cards).
+ */
+import { z } from "zod";
+declare const statStatusSchema: z.ZodEnum<{
+    warn: "warn";
+    neutral: "neutral";
+    good: "good";
+    bad: "bad";
+}>;
+declare const statDeltaSchema: z.ZodObject<{
+    value: z.ZodNumber;
+    goodDirection: z.ZodOptional<z.ZodEnum<{
+        up: "up";
+        down: "down";
+    }>>;
+    label: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+declare const statTargetSchema: z.ZodObject<{
+    value: z.ZodNumber;
+    label: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+declare const statCardSchema: z.ZodObject<{
+    label: z.ZodString;
+    value: z.ZodNumber;
+    unit: z.ZodOptional<z.ZodString>;
+    decimals: z.ZodOptional<z.ZodNumber>;
+    delta: z.ZodOptional<z.ZodObject<{
+        value: z.ZodNumber;
+        goodDirection: z.ZodOptional<z.ZodEnum<{
+            up: "up";
+            down: "down";
+        }>>;
+        label: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>;
+    target: z.ZodOptional<z.ZodObject<{
+        value: z.ZodNumber;
+        label: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>;
+    sparkline: z.ZodOptional<z.ZodArray<z.ZodNumber>>;
+    status: z.ZodOptional<z.ZodEnum<{
+        warn: "warn";
+        neutral: "neutral";
+        good: "good";
+        bad: "bad";
+    }>>;
+}, z.core.$strip>;
+export declare const statsSchema: z.ZodObject<{
+    title: z.ZodOptional<z.ZodString>;
+    cards: z.ZodArray<z.ZodObject<{
+        label: z.ZodString;
+        value: z.ZodNumber;
+        unit: z.ZodOptional<z.ZodString>;
+        decimals: z.ZodOptional<z.ZodNumber>;
+        delta: z.ZodOptional<z.ZodObject<{
+            value: z.ZodNumber;
+            goodDirection: z.ZodOptional<z.ZodEnum<{
+                up: "up";
+                down: "down";
+            }>>;
+            label: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        target: z.ZodOptional<z.ZodObject<{
+            value: z.ZodNumber;
+            label: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        sparkline: z.ZodOptional<z.ZodArray<z.ZodNumber>>;
+        status: z.ZodOptional<z.ZodEnum<{
+            warn: "warn";
+            neutral: "neutral";
+            good: "good";
+            bad: "bad";
+        }>>;
+    }, z.core.$strip>>;
+    dataKey: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type StatStatus = z.infer<typeof statStatusSchema>;
+export type StatDelta = z.infer<typeof statDeltaSchema>;
+export type StatTarget = z.infer<typeof statTargetSchema>;
+export type StatCard = z.infer<typeof statCardSchema>;
+export type StatsParams = z.infer<typeof statsSchema>;
+export {};

package/dist/artifact-blocks/blocks/stats/schema.js

@@ -0,0 +1,43 @@
+/**
+ * Params schema for the stats block (1-8 KPI cards).
+ */
+import { z } from "zod";
+const statStatusSchema = z.enum(["good", "warn", "bad", "neutral"]);
+const statDeltaSchema = z.object({
+    /** Signed change, e.g. 4.2 or -1.3. Sign + goodDirection set the tone. */
+    value: z.number(),
+    /** Which direction of change is GOOD for this metric. Default up. */
+    goodDirection: z.enum(["up", "down"]).optional(),
+    /** Comparison phrase, e.g. "vs last week" (max 24 chars). */
+    label: z.string().max(24).optional(),
+});
+const statTargetSchema = z.object({
+    /** The number the value is measured toward, e.g. 98 for 98%. */
+    value: z.number(),
+    /** Optional phrase for the caption, e.g. "goal" → "81.5% toward goal (98%)". */
+    label: z.string().max(60).optional(),
+});
+const statCardSchema = z.object({
+    label: z.string().min(1).max(80),
+    value: z.number(),
+    /** Rendered small after the value, e.g. "%", "ms", "/mo" (max 8 chars). */
+    unit: z.string().max(8).optional(),
+    /** Fraction digits shown (0-4). Default: up to 2, trailing zeros trimmed. */
+    decimals: z.number().int().min(0).max(4).optional(),
+    delta: statDeltaSchema.optional(),
+    target: statTargetSchema.optional(),
+    /** 2-31 recent points for the sparkline (oldest → newest). */
+    sparkline: z.array(z.number()).min(2).max(31).optional(),
+    /** Status tone token. Default: derived from delta, else neutral. */
+    status: statStatusSchema.optional(),
+});
+export const statsSchema = z.object({
+    /** Optional heading above the card grid. */
+    title: z.string().max(120).optional(),
+    cards: z
+        .array(statCardSchema)
+        .min(1, "at least one card")
+        .max(8, "at most 8 cards"),
+    /** Live data (mos-0ninw): key into ctx.data whose value replaces params. */
+    dataKey: z.string().max(80).optional(),
+});

package/dist/artifact-blocks/blocks/stats/thumb.d.ts

@@ -0,0 +1,2 @@
+import { type ThumbPalette } from "../../thumb-kit.js";
+export declare function drawStatsThumb(raw: unknown, palette: ThumbPalette): string | null;

package/dist/artifact-blocks/blocks/stats/thumb.js

@@ -0,0 +1,102 @@
+/**
+ * Stats block thumbnail composer (mos-qkpva).
+ *
+ * The KPI scorecard as a silhouette: one column per card (up to four fit the
+ * 1.6:1 frame) — hairline top rule, the VALUE (large, bold), its unit, the
+ * label under it and the status dot. Sparklines draw as tiny polylines; the
+ * delta prose and target captions are text the cell size cannot carry.
+ *
+ * Status color derivation mirrors the component: an explicit `status` wins,
+ * else the delta's sign against its goodDirection, else neutral.
+ */
+import { statsSchema, } from "./schema.js";
+import { r1, thumbText, thumbTruncate, } from "../../thumb-kit.js";
+const W = 560;
+const H = 200;
+const PAD = 16;
+function statusColor(palette, s) {
+    switch (s) {
+        case "good":
+            return palette.success;
+        case "warn":
+            return palette.warning;
+        case "bad":
+            return palette.error;
+        default:
+            return palette.primary;
+    }
+}
+function toneOf(card) {
+    if (card.status)
+        return card.status;
+    if (!card.delta)
+        return "neutral";
+    const good = card.delta.goodDirection ?? "up";
+    const up = card.delta.value > 0;
+    if (card.delta.value === 0)
+        return "neutral";
+    return up === (good === "up") ? "good" : "bad";
+}
+export function drawStatsThumb(raw, palette) {
+    const parsed = statsSchema.safeParse(raw);
+    if (!parsed.success)
+        return null;
+    const params = parsed.data;
+    const cards = params.cards;
+    if (cards.length === 0)
+        return null;
+    const cols = Math.min(cards.length, 4);
+    const colW = (W - PAD * 2) / cols;
+    const out = [];
+    cards.slice(0, 4).forEach((card, ci) => {
+        const x = PAD + ci * colW;
+        const status = toneOf(card);
+        const color = statusColor(palette, status);
+        // hairline rule on top of each column
+        out.push(`<line x1="${r1(x)}" x2="${r1(x + colW - 14)}" y1="${PAD}" y2="${PAD}" stroke="${palette.ink}" stroke-opacity="0.25" stroke-width="1"/>`);
+        // status dot + value
+        out.push(`<circle cx="${r1(x + 4)}" cy="${r1(PAD + 30)}" r="3.5" fill="${color}"/>`);
+        const valueStr = formatValue(card);
+        out.push(thumbText(x + 14, PAD + 36, valueStr, {
+            size: 24,
+            fill: palette.ink,
+            weight: 700,
+        }));
+        // label (wrapped to two lines)
+        const label = thumbTruncate(card.label, 20);
+        out.push(thumbText(x, PAD + 58, label, {
+            size: 11,
+            fill: palette.ink,
+            opacity: 0.6,
+        }));
+        // sparkline (last 12 points, bottom band)
+        if (card.sparkline && card.sparkline.length >= 2) {
+            const pts = card.sparkline.slice(-12);
+            const min = Math.min(...pts);
+            const max = Math.max(...pts);
+            const span = max - min || 1;
+            const sw = colW - 20;
+            const sh = 22;
+            const sy = PAD + 92;
+            const d = pts
+                .map((v, i) => `${i ? "L" : "M"} ${r1(x + (i / (pts.length - 1)) * sw)} ${r1(sy + sh - ((v - min) / span) * sh)}`)
+                .join(" ");
+            out.push(`<path d="${d}" fill="none" stroke="${color}" stroke-width="1.5"/>`);
+        }
+        // target bar
+        if (card.target) {
+            const pct = Math.max(0, Math.min(1, card.value / (card.target.value || 1)));
+            out.push(`<rect x="${r1(x)}" y="${r1(PAD + 124)}" width="${r1(colW - 20)}" height="4" rx="2" fill="${palette.ink}" fill-opacity="0.1"/>`);
+            out.push(`<rect x="${r1(x)}" y="${r1(PAD + 124)}" width="${r1(Math.max(2, (colW - 20) * pct))}" height="4" rx="2" fill="${palette.primary}" fill-opacity="0.8"/>`);
+        }
+    });
+    return `<svg viewBox="0 0 ${W} ${H}">${out.join("")}</svg>`;
+}
+/** value + unit, trailing-zero trimmed (the component's formatValue shape). */
+function formatValue(card) {
+    const decimals = card.decimals ?? 2;
+    let v = card.value.toFixed(decimals);
+    if (v.includes("."))
+        v = v.replace(/\.?0+$/, "");
+    return v + (card.unit ?? "");
+}