@alpic-ai/ui 0.0.0-dev.g20a247a → 0.0.0-dev.g20fd91c

package/src/stories/bar-chart.stories.tsx

@@ -0,0 +1,167 @@
+import type { Story } from "@ladle/react";
+
+import { BarChart } from "../components/bar-chart";
+import { ChartCard } from "../components/chart-card";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Bar Chart" };
+
+const mulberry32 = (seed: number) => () => {
+  seed |= 0;
+  seed = (seed + 0x6d2b79f5) | 0;
+  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+};
+
+const CLIENTS = ["ChatGPT", "Claude Code", "Claude", "Anthropic", "Goose", "VS Code"];
+const WEIGHTS = [0.42, 0.24, 0.12, 0.09, 0.07, 0.06];
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
+const genDailyStacked = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return DAYS.map((day, dayIndex) => {
+    const tide = 0.6 + 0.4 * Math.sin((dayIndex / DAYS.length) * Math.PI * 1.4);
+    const row: Record<string, number | string> = { t: day };
+    CLIENTS.forEach((client, clientIndex) => {
+      // biome-ignore lint/style/noNonNullAssertion: index aligned with CLIENTS
+      row[client] = Math.max(4, Math.round(900 * WEIGHTS[clientIndex]! * tide * (0.7 + rnd() * 0.6)));
+    });
+    return row;
+  });
+};
+
+const genDuration = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return DAYS.map((day, dayIndex) => ({
+    t: day,
+    p50: Math.round(240 + rnd() * 120),
+    p95: Math.round(820 + rnd() * 360 * (dayIndex === 4 ? 1.6 : 1)),
+  }));
+};
+
+const genErrors = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return DAYS.map((day, dayIndex) => {
+    const burst = dayIndex === 4 ? 3 : 1;
+    return {
+      t: day,
+      tool: Math.max(0, Math.round(6 * (0.4 + rnd()) * burst)),
+      mcp: Math.max(0, Math.round(4 * (0.4 + rnd()) * burst)),
+    };
+  });
+};
+
+const genThroughput = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return DAYS.map((day) => ({ t: day, v: Math.round(38000 + rnd() * 46000) }));
+};
+
+const stacked = genDailyStacked(7);
+const duration = genDuration(19);
+const errors = genErrors(41);
+const throughput = genThroughput(11);
+
+const sessionsSeries = CLIENTS.map((key) => ({ key }));
+const nf = (value: number) => value.toLocaleString("en-US");
+const fmtK = (value: number) => (value >= 1000 ? `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}k` : `${value}`);
+const ms = (value: number) => `${value}ms`;
+
+const sessionsTotal = stacked.reduce(
+  (sum, row) => sum + CLIENTS.reduce((acc, client) => acc + (row[client] as number), 0),
+  0,
+);
+const sessionsSpark = stacked.map((row) => CLIENTS.reduce((acc, client) => acc + (row[client] as number), 0));
+
+const errorsPeak = errors.reduce((best, row) => (row.mcp + row.tool > best.mcp + best.tool ? row : best));
+
+export const AllVariants: Story = () => (
+  <div className="mx-auto max-w-[1600px] p-8">
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+      <ChartCard
+        palette="magenta"
+        accent="left"
+        kicker="Last 7d"
+        title="Sessions"
+        description="Full-width · left accent"
+        className="md:col-span-2 xl:col-span-3"
+      >
+        <BarChart data={stacked} index="t" series={sessionsSeries} variant="stacked" legend valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 7d" title="Sessions" description="By client · stacked">
+        <Stat
+          value={nf(sessionsTotal)}
+          unit="sessions"
+          delta={{ value: 9.3, direction: "up" }}
+          sparkline={sessionsSpark}
+        />
+        <BarChart data={stacked} index="t" series={sessionsSeries} variant="stacked" legend valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 7d" title="Sessions share" description="Composition · 100% stacked">
+        <BarChart data={stacked} index="t" series={sessionsSeries} variant="expand" legend valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 7d" title="Request duration" description="p50 vs p95 · grouped">
+        <BarChart
+          data={duration}
+          index="t"
+          series={[
+            { key: "p50", name: "p50" },
+            { key: "p95", name: "p95", color: "#9b5de5" },
+          ]}
+          variant="grouped"
+          legend
+          valueFormatter={ms}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 7d" title="Output tokens" description="Single series · value labels">
+        <Stat value="1.4M" unit="tokens" delta={{ value: 8.1, direction: "up" }} />
+        <BarChart
+          data={throughput}
+          index="t"
+          series={[{ key: "v", name: "tokens" }]}
+          valueLabels
+          valueFormatter={fmtK}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 7d" title="Errors" description="Semantic red · burst marker">
+        <Stat value="312" unit="errors" delta={{ value: 0, direction: "up", invert: true, label: "burst Fri" }} />
+        <BarChart
+          data={errors}
+          index="t"
+          series={[
+            { key: "tool", name: "Tool errors", semantic: "warning" },
+            { key: "mcp", name: "MCP errors", semantic: "error" },
+          ]}
+          variant="stacked"
+          markers={[{ x: errorsPeak.t, y: errorsPeak.mcp + errorsPeak.tool, label: "burst" }]}
+          legend
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 7d" title="Throughput" description="Hatch lead · SLA band">
+        <BarChart
+          data={throughput}
+          index="t"
+          series={[{ key: "v", name: "tokens" }]}
+          texture
+          referenceLine={{ y: 80000, label: "capacity", band: true }}
+          valueFormatter={fmtK}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <BarChart data={[]} index="t" series={sessionsSeries} loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+        <BarChart data={[]} index="t" series={sessionsSeries} />
+      </ChartCard>
+    </div>
+  </div>
+);

package/src/stories/bar-list.stories.tsx

@@ -0,0 +1,83 @@
+import type { Story } from "@ladle/react";
+
+import { BarList } from "../components/bar-list";
+import { ChartCard } from "../components/chart-card";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Bar List" };
+
+const TOP_TOOLS = [
+  { tool: "search_codebase", calls: 18420 },
+  { tool: "read_file", calls: 14110 },
+  { tool: "run_command", calls: 9870 },
+  { tool: "edit_file", calls: 8240 },
+  { tool: "list_dir", calls: 5130 },
+  { tool: "grep", calls: 3960 },
+  { tool: "web_fetch", calls: 2210 },
+];
+
+const TOP_CLIENTS = [
+  { client: "ChatGPT", sessions: 16222 },
+  { client: "Claude Code", sessions: 9502 },
+  { client: "Claude", sessions: 6859 },
+  { client: "Anthropic", sessions: 4664 },
+  { client: "Goose", sessions: 3389 },
+  { client: "VS Code", sessions: 2771 },
+];
+
+const TOP_ROUTES = [
+  { route: "POST /v1/messages", hits: 482000 },
+  { route: "GET /v1/models", hits: 211400 },
+  { route: "POST /v1/embeddings", hits: 98700 },
+  { route: "GET /v1/usage", hits: 64200 },
+  { route: "POST /v1/files", hits: 41900 },
+  { route: "GET /v1/health", hits: 28800 },
+  { route: "DELETE /v1/files", hits: 12400 },
+  { route: "POST /v1/batches", hits: 8600 },
+  { route: "GET /v1/batches", hits: 5300 },
+  { route: "POST /v1/moderations", hits: 2100 },
+];
+
+const nf = (value: number) => value.toLocaleString("en-US");
+const fmtK = (value: number) => {
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(2)}M`;
+  }
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}k`;
+  }
+  return `${value}`;
+};
+
+const toolCallsTotal = TOP_TOOLS.reduce((sum, row) => sum + row.calls, 0);
+
+export const AllVariants: Story = () => (
+  <div className="mx-auto max-w-[1600px] p-8">
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+      <ChartCard palette="magenta" kicker="Last 7d" title="Top tools" description="Ranked · magenta ramp">
+        <Stat value={fmtK(toolCallsTotal)} unit="calls" delta={{ value: 12.4, direction: "up" }} />
+        <BarList data={TOP_TOOLS} index="tool" dataKey="calls" valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 7d" title="Top clients" description="Ranked · cyan ramp">
+        <BarList data={TOP_CLIENTS} index="client" dataKey="sessions" valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Top routes" description="Long list · capped to 6">
+        <BarList data={TOP_ROUTES} index="route" dataKey="hits" maxItems={6} valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 24h" title="Top routes" description="Full list · cyan ramp">
+        <BarList data={TOP_ROUTES} index="route" dataKey="hits" valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <BarList data={[]} index="tool" dataKey="calls" loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+        <BarList data={[]} index="tool" dataKey="calls" />
+      </ChartCard>
+    </div>
+  </div>
+);

package/src/stories/donut-chart.stories.tsx

@@ -0,0 +1,110 @@
+import type { Story } from "@ladle/react";
+
+import { ChartCard } from "../components/chart-card";
+import { DonutChart } from "../components/donut-chart";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Donut Chart" };
+
+const mulberry32 = (seed: number) => () => {
+  seed |= 0;
+  seed = (seed + 0x6d2b79f5) | 0;
+  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+};
+
+const CLIENTS = ["ChatGPT", "Claude Code", "Claude", "Anthropic", "Goose", "VS Code"];
+const WEIGHTS = [0.42, 0.24, 0.12, 0.09, 0.07, 0.06];
+
+const genClients = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return CLIENTS.map((client, clientIndex) => ({
+    client,
+    sessions: Math.round(48000 * (WEIGHTS[clientIndex] ?? 0) * (0.8 + rnd() * 0.4)),
+  }));
+};
+
+const MODELS = [
+  "claude-opus-4-8",
+  "claude-sonnet-4-6",
+  "claude-haiku-4-5",
+  "gpt-5.2",
+  "gpt-5.2-mini",
+  "gemini-3-pro",
+  "gemini-3-flash",
+  "llama-4-405b",
+  "mistral-large-3",
+  "command-r-plus",
+  "qwen-3-72b",
+  "deepseek-v4",
+];
+
+const genModels = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return MODELS.map((model) => ({ model, tokens: Math.round(40000 + rnd() * 920000) }));
+};
+
+const genStatus = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return [
+    { state: "Success", count: Math.round(8200 + rnd() * 600) },
+    { state: "Errored", count: Math.round(180 + rnd() * 90) },
+    { state: "Timed out", count: Math.round(60 + rnd() * 40) },
+  ];
+};
+
+const clients = genClients(7);
+const models = genModels(23);
+const status = genStatus(41);
+
+const nf = (value: number) => value.toLocaleString("en-US");
+const fmtK = (value: number) => {
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(2)}M`;
+  }
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}k`;
+  }
+  return `${value}`;
+};
+
+const clientsTotal = clients.reduce((sum, row) => sum + row.sessions, 0);
+
+export const AllVariants: Story = () => (
+  <div className="mx-auto max-w-[1600px] p-8">
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+      <ChartCard palette="magenta" kicker="Last 7d" title="Sessions by client" description="Donut · share readout">
+        <Stat value={fmtK(clientsTotal)} unit="sessions" delta={{ value: 6.2, direction: "up" }} />
+        <DonutChart
+          data={clients}
+          index="client"
+          dataKey="sessions"
+          legend
+          centerLabel="sessions"
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 7d" title="Tokens by model" description="Many slices · scrollable table">
+        <DonutChart data={models} index="model" dataKey="tokens" legend centerLabel="tokens" valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Request outcome" description="Ring · prominent total">
+        <DonutChart data={status} index="state" dataKey="count" variant="ring" legend valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 7d" title="Tokens by model" description="Ring only · no readout">
+        <DonutChart data={models} index="model" dataKey="tokens" centerLabel="tokens" valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <DonutChart data={[]} index="client" dataKey="sessions" loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+        <DonutChart data={[]} index="client" dataKey="sessions" legend />
+      </ChartCard>
+    </div>
+  </div>
+);

package/src/stories/heatmap-chart.stories.tsx

@@ -0,0 +1,105 @@
+import type { Story } from "@ladle/react";
+
+import { ChartCard } from "../components/chart-card";
+import { HeatmapChart } from "../components/heatmap-chart";
+
+export default { title: "Charts/Heatmap" };
+
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
+function mulberry32(seed: number) {
+  let state = seed;
+  return () => {
+    state |= 0;
+    state = (state + 0x6d2b79f5) | 0;
+    let mixed = Math.imul(state ^ (state >>> 15), 1 | state);
+    mixed = (mixed + Math.imul(mixed ^ (mixed >>> 7), 61 | mixed)) ^ mixed;
+    return ((mixed ^ (mixed >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+// Long-format activity rows: one record per (day, hour) with a working-hours hump.
+const ACTIVITY = (() => {
+  const random = mulberry32(99);
+  const rows: Array<{ day: string; hour: string; sessions: number }> = [];
+  DAYS.forEach((day, dayIndex) => {
+    const weekend = dayIndex >= 5;
+    for (let hour = 0; hour < 24; hour += 1) {
+      const work = Math.exp(-((hour - 14) ** 2) / 26) * (weekend ? 0.45 : 1);
+      const evening = Math.exp(-((hour - 21) ** 2) / 10) * 0.5;
+      const intensity = Math.max(0.02, Math.min(1, work + evening + random() * 0.28));
+      rows.push({ day, hour: String(hour).padStart(2, "0"), sessions: Math.round(intensity * 320) });
+    }
+  });
+  return rows;
+})();
+
+const HOURS = Array.from({ length: 24 }, (_, hour) => String(hour).padStart(2, "0"));
+
+const nf = (value: number) => value.toLocaleString("en-US");
+
+export const AllVariants: Story = () => (
+  <div className="mx-auto max-w-[1600px] p-8">
+    <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
+      <ChartCard palette="magenta" accent="left" kicker="Last 7d" title="Activity" description="Square · hour × day">
+        <HeatmapChart
+          data={ACTIVITY}
+          xKey="hour"
+          yKey="day"
+          dataKey="sessions"
+          variant="square"
+          xLabels={HOURS}
+          yLabels={DAYS}
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" accent="left" kicker="Last 7d" title="Activity" description="Dots · hour × day">
+        <HeatmapChart
+          data={ACTIVITY}
+          xKey="hour"
+          yKey="day"
+          dataKey="sessions"
+          variant="dot"
+          xLabels={HOURS}
+          yLabels={DAYS}
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" accent="left" kicker="Last 7d" title="Activity" description="Square · cyan ramp">
+        <HeatmapChart
+          data={ACTIVITY}
+          xKey="hour"
+          yKey="day"
+          dataKey="sessions"
+          variant="square"
+          xLabels={HOURS}
+          yLabels={DAYS}
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" accent="left" kicker="Last 7d" title="Activity" description="Dots · magenta ramp">
+        <HeatmapChart
+          data={ACTIVITY}
+          xKey="hour"
+          yKey="day"
+          dataKey="sessions"
+          variant="dot"
+          xLabels={HOURS}
+          yLabels={DAYS}
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" accent="left" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <HeatmapChart data={[]} xKey="hour" yKey="day" dataKey="sessions" loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" accent="left" kicker="State" title="Empty" description="No data in range">
+        <HeatmapChart data={[]} xKey="hour" yKey="day" dataKey="sessions" />
+      </ChartCard>
+    </div>
+  </div>
+);

package/src/stories/line-chart.stories.tsx

@@ -0,0 +1,144 @@
+import type { Story } from "@ladle/react";
+
+import { ChartCard } from "../components/chart-card";
+import { LineChart } from "../components/line-chart";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Line Chart" };
+
+const mulberry32 = (seed: number) => () => {
+  seed |= 0;
+  seed = (seed + 0x6d2b79f5) | 0;
+  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+};
+
+const hourLabel = (index: number, length: number) =>
+  `${String(Math.round((index / (length - 1)) * 24)).padStart(2, "0")}:00`;
+
+const genSeries = (seed: number, scale: number) => {
+  const rnd = mulberry32(seed);
+  const length = 30;
+  let value = scale * 0.6;
+  return Array.from({ length }, (_, index) => {
+    value = Math.max(scale * 0.12, value + (rnd() - 0.46) * scale * 0.18);
+    return { t: hourLabel(index, length), v: Math.round(value * (1 + Math.sin(index / 5) * 0.16)) };
+  });
+};
+
+const genLatency = (seed: number) => {
+  const rnd = mulberry32(seed);
+  const length = 30;
+  let p50 = 240;
+  let p95 = 720;
+  return Array.from({ length }, (_, index) => {
+    p50 = Math.max(120, p50 + (rnd() - 0.48) * 40);
+    p95 = Math.max(p50 + 200, p95 + (rnd() - 0.46) * 120);
+    return { t: hourLabel(index, length), p50: Math.round(p50), p95: Math.round(p95 * (index === 19 ? 1.7 : 1)) };
+  });
+};
+
+const genCompare = (seed: number) => {
+  const rnd = mulberry32(seed);
+  const length = 30;
+  let claude = 60;
+  let chatgpt = 80;
+  return Array.from({ length }, (_, index) => {
+    claude = Math.max(20, claude + (rnd() - 0.42) * 14);
+    chatgpt = Math.max(20, chatgpt + (rnd() - 0.5) * 12);
+    return { t: hourLabel(index, length), claude: Math.round(claude), chatgpt: Math.round(chatgpt) };
+  });
+};
+
+const tokens = genSeries(11, 84000);
+const latency = genLatency(31);
+const compare = genCompare(23);
+
+const nf = (value: number) => value.toLocaleString("en-US");
+const fmtK = (value: number) => (value >= 1000 ? `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}k` : `${value}`);
+const ms = (value: number) => `${value}ms`;
+
+const tokensSpark = tokens.map((row) => row.v);
+const latencyPeak = latency.reduce((best, row) => (row.p95 > best.p95 ? row : best));
+
+export const AllVariants: Story = () => (
+  <div className="mx-auto max-w-[1600px] p-8">
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+      <ChartCard
+        palette="cyan"
+        accent="left"
+        kicker="Last 24h"
+        title="Sessions"
+        description="Full-width · left accent"
+        className="md:col-span-2 xl:col-span-3"
+      >
+        <LineChart
+          data={compare}
+          index="t"
+          series={[
+            { key: "claude", name: "Claude" },
+            { key: "chatgpt", name: "ChatGPT" },
+          ]}
+          lastValueLabel
+          legend
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Output tokens" description="Single series · value flags">
+        <Stat value="1.4M" unit="tokens" delta={{ value: 8.1, direction: "up" }} sparkline={tokensSpark} />
+        <LineChart data={tokens} index="t" series={[{ key: "v", name: "tokens" }]} valueFlags valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Request latency" description="p50 vs p95 · SLA band + peak">
+        <Stat value="240ms" unit="p50 · current" delta={{ value: 4.2, direction: "down", invert: true }} />
+        <LineChart
+          data={latency}
+          index="t"
+          series={[
+            { key: "p50", name: "p50" },
+            { key: "p95", name: "p95", dashed: true, color: "#9b5de5" },
+          ]}
+          referenceLine={{ y: 1000, label: "SLA 1s", band: true }}
+          markers={[{ x: latencyPeak.t, y: latencyPeak.p95, label: "peak", color: "#9b5de5" }]}
+          legend
+          valueFormatter={ms}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 24h" title="Sessions" description="Claude vs ChatGPT · last values">
+        <LineChart
+          data={compare}
+          index="t"
+          series={[
+            { key: "claude", name: "Claude" },
+            { key: "chatgpt", name: "ChatGPT" },
+          ]}
+          lastValueLabel
+          legend
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 24h" title="Throughput" description="Dots · stepped curve">
+        <LineChart
+          data={tokens}
+          index="t"
+          series={[{ key: "v", name: "tokens" }]}
+          curve="step"
+          dots
+          valueFormatter={fmtK}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+        <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} />
+      </ChartCard>
+    </div>
+  </div>
+);

package/src/stories/stat.stories.tsx

@@ -0,0 +1,64 @@
+import type { Story } from "@ladle/react";
+
+import { ChartContainer } from "../components/chart-container";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Stat" };
+
+const mulberry32 = (seed: number) => () => {
+  seed |= 0;
+  seed = (seed + 0x6d2b79f5) | 0;
+  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+};
+
+const spark = (seed: number, length = 24) => {
+  const rnd = mulberry32(seed);
+  let value = 40;
+  return Array.from({ length }, () => {
+    value = Math.max(8, value + (rnd() - 0.45) * 16);
+    return Math.round(value);
+  });
+};
+
+const Row = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div className="flex flex-col gap-1.5">
+    <p className="type-text-xs font-medium text-subtle-foreground">{label}</p>
+    {children}
+  </div>
+);
+
+export const AllVariants: Story = () => (
+  <div className="grid max-w-3xl grid-cols-2 gap-8">
+    <Row label="Value + unit">
+      <Stat value="48,231" unit="sessions · 24h" />
+    </Row>
+
+    <Row label="Positive delta (up = good)">
+      <Stat value="1.4M" unit="tokens · 24h" delta={{ value: 8.1, direction: "up" }} />
+    </Row>
+
+    <Row label="Negative delta (down = bad)">
+      <Stat value="312" unit="errors · 24h" delta={{ value: 14.2, direction: "up", invert: true }} />
+    </Row>
+
+    <Row label="Inverted: latency down = good">
+      <Stat value="240ms" unit="p50 · current" delta={{ value: 4.2, direction: "down", invert: true }} />
+    </Row>
+
+    <Row label="With sparkline">
+      <Stat value="48,231" unit="sessions · 24h" delta={{ value: 12.4, direction: "up" }} sparkline={spark(7)} />
+    </Row>
+
+    <Row label="Custom delta label">
+      <Stat value="312" unit="errors · 24h" delta={{ value: 0, direction: "up", invert: true, label: "burst 16:00" }} />
+    </Row>
+
+    <Row label="Cyan palette (sparkline lead)">
+      <ChartContainer palette="cyan">
+        <Stat value="9,204" unit="tasks · 24h" delta={{ value: 22, direction: "up" }} sparkline={spark(53)} />
+      </ChartContainer>
+    </Row>
+  </div>
+);