makersclaw 0.4.0 → 0.5.2

package/r/chart.json

@@ -5,7 +5,7 @@
   "title": "Chart",
   "description": "Line, area (stacked), bar (grouped or stacked, columns or bars, value labels at the ends, a track behind), a muted or dashed series for a previous period to compare against, pie and donut charts, sparklines and heatmaps (a grid shaded by value, with a scale legend), drawn in SVG (the heatmap as an HTML table) with the workspace's chart colours: round ticks, gridlines, a tooltip and crosshair under the pointer or the arrow keys, a legend that hides a series, and a data table for screen readers.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -19,25 +19,25 @@
       "path": "registry/blocks/chart/core.jsx",
       "type": "registry:component",
       "target": "@components/makersclaw/blocks/chart/core.jsx",
-      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Empty, Toggle, cx } from \"../../ui\";\n\n// What every chart in this block shares: the series colours as classes,\n// nice ticks, the width of the box it sits in, the reveal, the legend, the\n// tooltip box and the hidden data table a screen reader reads. The charts\n// themselves are in cartesian.jsx, pie.jsx and sparkline.jsx.\n\n// ---- colours ---------------------------------------------------------------\n// Written out whole so Tailwind finds every class. chart-1…5 are the series\n// colours (app/globals.css); the rest are the theme's own tones, for the\n// one series that means a status (churn in the destructive tone).\nconst TONES = {\n  \"chart-1\": { fill: \"fill-chart-1\", stroke: \"stroke-chart-1\", bg: \"bg-chart-1\", text: \"text-chart-1\" },\n  \"chart-2\": { fill: \"fill-chart-2\", stroke: \"stroke-chart-2\", bg: \"bg-chart-2\", text: \"text-chart-2\" },\n  \"chart-3\": { fill: \"fill-chart-3\", stroke: \"stroke-chart-3\", bg: \"bg-chart-3\", text: \"text-chart-3\" },\n  \"chart-4\": { fill: \"fill-chart-4\", stroke: \"stroke-chart-4\", bg: \"bg-chart-4\", text: \"text-chart-4\" },\n  \"chart-5\": { fill: \"fill-chart-5\", stroke: \"stroke-chart-5\", bg: \"bg-chart-5\", text: \"text-chart-5\" },\n  primary: { fill: \"fill-primary\", stroke: \"stroke-primary\", bg: \"bg-primary\", text: \"text-primary\" },\n  info: { fill: \"fill-info\", stroke: \"stroke-info\", bg: \"bg-info\", text: \"text-info\" },\n  success: { fill: \"fill-success\", stroke: \"stroke-success\", bg: \"bg-success\", text: \"text-success\" },\n  warning: { fill: \"fill-warning\", stroke: \"stroke-warning\", bg: \"bg-warning\", text: \"text-warning\" },\n  danger: { fill: \"fill-destructive\", stroke: \"stroke-destructive\", bg: \"bg-destructive\", text: \"text-destructive\" },\n  muted: { fill: \"fill-muted-foreground\", stroke: \"stroke-muted-foreground\", bg: \"bg-muted-foreground\", text: \"text-muted-foreground\" },\n};\n\n/** The tone a series (or a slice) wears: its own `tone` (chart-1…5, 1…5,\n *  or a theme tone), else the next chart colour in order. */\nexport function toneOf(item, index) {\n  const t = typeof item?.tone === \"number\" ? `chart-${item.tone}` : item?.tone;\n  return TONES[t] ? t : `chart-${(index % 5) + 1}`;\n}\n\nexport function tone(t, kind) {\n  return (TONES[t] ?? TONES[\"chart-1\"])[kind];\n}\n\n// ---- numbers ---------------------------------------------------------------\n\nconst COMPACT = new Intl.NumberFormat(undefined, { notation: \"compact\", maximumFractionDigits: 1 });\nconst PLAIN = new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 });\n\n/** The default value formatter: 1,250 · 48.2K · 1.3M. */\nexport function defaultFormat(v) {\n  if (v == null || Number.isNaN(v)) return \"—\";\n  return Math.abs(v) >= 10000 ? COMPACT.format(v) : PLAIN.format(v);\n}\n\nexport function num(v) {\n  const n = typeof v === \"number\" ? v : Number(v);\n  return Number.isFinite(n) ? n : null;\n}\n\n/** Round numbers that cover [min, max] in about `count` steps. */\nexport function niceTicks(min, max, count = 5) {\n  if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 1];\n  if (min === max) {\n    if (min === 0) return [0, 1];\n    min = Math.min(0, min);\n    max = Math.max(0, max);\n  }\n  const raw = (max - min) / Math.max(1, count);\n  const mag = 10 ** Math.floor(Math.log10(raw));\n  const err = raw / mag;\n  const step = (err >= 7.5 ? 10 : err >= 3.5 ? 5 : err >= 1.5 ? 2 : 1) * mag;\n  const lo = Math.floor(min / step) * step;\n  const hi = Math.ceil(max / step) * step;\n  const out = [];\n  for (let v = lo; v <= hi + step / 2; v += step) out.push(Number(v.toPrecision(12)));\n  return out;\n}\n\nexport function humanize(key) {\n  const text = String(key ?? \"\").replace(/[_-]+/g, \" \").trim();\n  return text ? text.charAt(0).toUpperCase() + text.slice(1) : \"\";\n}\n\n/** About how wide a label is at text-2xs, for margins and thinning. The\n *  axis text is small and the estimate generous, so nothing is clipped. */\nexport function textWidth(s) {\n  return String(s ?? \"\").length * 6.4 + 4;\n}\n\n/** A safe id fragment for url(#…) from React's useId. */\nexport function idFrom(uid) {\n  return `c${String(uid).replace(/[^a-zA-Z0-9-]/g, \"\")}`;\n}\n\n// ---- the box ---------------------------------------------------------------\n\n/** The width of the element, kept current by a ResizeObserver: a chart is\n *  drawn for the width it has, never scaled. A callback ref, so a box that\n *  comes back (after the empty state) is measured again. 0 until measured.\n *\n *    const [boxRef, width] = useWidth();  <div ref={boxRef}>…</div> */\nexport function useWidth() {\n  const [el, setEl] = useState(null);\n  const [width, setWidth] = useState(0);\n  useEffect(() => {\n    if (!el) return undefined;\n    setWidth(Math.floor(el.getBoundingClientRect().width));\n    if (typeof ResizeObserver === \"undefined\") return undefined;\n    const ro = new ResizeObserver(([entry]) => setWidth(Math.floor(entry.contentRect.width)));\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [el]);\n  return [setEl, width];\n}\n\n/** false for the first frame once `ready`, then true: marks draw from\n *  nothing to their place. The transitions are motion-safe: classes, so\n *  with reduced motion they simply appear. */\nexport function useReveal(ready) {\n  const [shown, setShown] = useState(false);\n  useEffect(() => {\n    if (!ready || shown) return undefined;\n    // A frame, so the start is painted; the timer, because a hidden tab\n    // runs no frames and the chart must never stay empty.\n    const done = () => setShown(true);\n    const frame = requestAnimationFrame(() => requestAnimationFrame(done));\n    const timer = setTimeout(done, 120);\n    return () => {\n      cancelAnimationFrame(frame);\n      clearTimeout(timer);\n    };\n  }, [ready, shown]);\n  return shown;\n}\n\n// ---- the parts every chart draws ----------------------------------------------\n\n// A square of the series' colour; a dashed series gets a short dashed line.\nfunction Swatch({ t, dim, dashed }) {\n  if (dashed) {\n    return (\n      <svg aria-hidden=\"true\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" className={cx(\"shrink-0\", dim && \"opacity-30\")}>\n        <line x1=\"0\" y1=\"5\" x2=\"12\" y2=\"5\" strokeWidth=\"2\" strokeDasharray=\"3 2\" className={tone(t, \"stroke\")} />\n      </svg>\n    );\n  }\n  return <span aria-hidden=\"true\" className={cx(\"size-2.5 shrink-0 rounded-sm\", tone(t, \"bg\"), dim && \"opacity-30\")} />;\n}\n\n/**\n * The key to a chart's colours. With `onToggle` each entry is a toggle\n * (pressed = shown) that hides or shows its series; without it, a plain\n * list. `items` [{ key, label, tone?, value?, dashed? }] — `value` is a\n * muted note after the label (a slice's share); `dashed` draws the key as\n * a dashed line (a comparison series).\n */\nexport function ChartLegend({ items, hidden, onToggle, className, label = \"Legend\" }) {\n  const list = (items ?? []).filter(Boolean);\n  if (!list.length) return null;\n  const off = hidden instanceof Set ? hidden : new Set(hidden ?? []);\n  if (!onToggle) {\n    return (\n      <ul aria-label={label} className={cx(\"flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted-foreground\", className)}>\n        {list.map((it, i) => (\n          <li key={it.key} className=\"flex items-center gap-1.5\">\n            <Swatch t={toneOf(it, i)} dashed={it.dashed} />\n            <span className=\"text-foreground\">{it.label ?? humanize(it.key)}</span>\n            {it.value != null ? <span data-nums>{it.value}</span> : null}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n  return (\n    <div role=\"group\" aria-label={label} className={cx(\"flex flex-wrap items-center justify-center gap-1\", className)}>\n      {list.map((it, i) => {\n        const shown = !off.has(it.key);\n        return (\n          <Toggle\n            key={it.key}\n            size=\"sm\"\n            variant=\"quiet\"\n            pressed={shown}\n            onPressedChange={() => onToggle(it.key)}\n            className=\"gap-1.5 text-xs\"\n          >\n            <Swatch t={toneOf(it, i)} dim={!shown} dashed={it.dashed} />\n            <span className={shown ? \"text-foreground\" : \"line-through\"}>{it.label ?? humanize(it.key)}</span>\n            {it.value != null ? <span data-nums className=\"text-muted-foreground\">{it.value}</span> : null}\n          </Toggle>\n        );\n      })}\n    </div>\n  );\n}\n\n/** The floating box that says what is under the pointer (or the keyboard).\n *  `at` { x, y, flip } in the chart's pixels; flip puts it on the left. */\nexport function TooltipBox({ at, title, rows, footer }) {\n  if (!at) return null;\n  return (\n    <div\n      aria-hidden=\"true\"\n      className=\"pointer-events-none absolute left-0 top-0 z-10 min-w-36 rounded-md border border-border bg-popover px-2.5 py-2 text-xs text-popover-foreground shadow-lg\"\n      style={{\n        transform: `translate(${Math.round(at.x)}px, ${Math.round(at.y)}px) translate(${at.flip ? \"calc(-100% - 12px)\" : \"12px\"}, ${at.middle ? \"-50%\" : \"0\"})`,\n      }}\n    >\n      {title != null ? <p className=\"mb-1.5 font-medium\">{title}</p> : null}\n      <div className=\"grid gap-1\">\n        {rows.map((r) => (\n          <div key={r.key} className=\"flex items-center gap-2\">\n            <Swatch t={r.tone} dashed={r.dashed} />\n            <span className=\"flex-1 text-muted-foreground\">{r.label}</span>\n            <span data-nums className=\"font-medium\">{r.value}</span>\n          </div>\n        ))}\n      </div>\n      {footer ? (\n        <div className=\"mt-1.5 flex items-center justify-between gap-2 border-t border-border pt-1.5\">\n          <span className=\"text-muted-foreground\">{footer.label}</span>\n          <span data-nums className=\"font-medium\">{footer.value}</span>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** The numbers behind the picture, for a screen reader: a real table,\n *  visually hidden. `head` the column names, `body` rows of strings. */\nexport function DataTable({ caption, head, body }) {\n  return (\n    <table className=\"sr-only\">\n      <caption>{caption}</caption>\n      <thead>\n        <tr>\n          {head.map((h, i) => (\n            <th key={i} scope=\"col\">{h}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {body.map((cells, r) => (\n          <tr key={r}>\n            {cells.map((c, i) =>\n              i === 0 ? (\n                <th key={i} scope=\"row\">{c}</th>\n              ) : (\n                <td key={i}>{c}</td>\n              ),\n            )}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\n/** What a chart shows with nothing to draw, at the height it would have. */\nexport function ChartEmpty({ height, title, body }) {\n  return (\n    <div style={{ minHeight: height }} className=\"grid\">\n      <Empty icon=\"chart\" title={title} body={body} className=\"h-full content-center\" />\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Empty, Toggle, cx } from \"../../ui\";\n\n// What every chart in this block shares: the series colours as classes,\n// nice ticks, the width of the box it sits in, the reveal, the legend, the\n// tooltip box and the hidden data table a screen reader reads. The charts\n// themselves are in cartesian.jsx, pie.jsx and sparkline.jsx.\n\n// ---- colours ---------------------------------------------------------------\n// Written out whole so Tailwind finds every class. chart-1…5 are the series\n// colours (app/globals.css); the rest are the theme's own tones, for the\n// one series that means a status (churn in the destructive tone).\nconst TONES = {\n  \"chart-1\": { fill: \"fill-chart-1\", stroke: \"stroke-chart-1\", bg: \"bg-chart-1\", text: \"text-chart-1\" },\n  \"chart-2\": { fill: \"fill-chart-2\", stroke: \"stroke-chart-2\", bg: \"bg-chart-2\", text: \"text-chart-2\" },\n  \"chart-3\": { fill: \"fill-chart-3\", stroke: \"stroke-chart-3\", bg: \"bg-chart-3\", text: \"text-chart-3\" },\n  \"chart-4\": { fill: \"fill-chart-4\", stroke: \"stroke-chart-4\", bg: \"bg-chart-4\", text: \"text-chart-4\" },\n  \"chart-5\": { fill: \"fill-chart-5\", stroke: \"stroke-chart-5\", bg: \"bg-chart-5\", text: \"text-chart-5\" },\n  primary: { fill: \"fill-primary\", stroke: \"stroke-primary\", bg: \"bg-primary\", text: \"text-primary\" },\n  info: { fill: \"fill-info\", stroke: \"stroke-info\", bg: \"bg-info\", text: \"text-info\" },\n  success: { fill: \"fill-success\", stroke: \"stroke-success\", bg: \"bg-success\", text: \"text-success\" },\n  warning: { fill: \"fill-warning\", stroke: \"stroke-warning\", bg: \"bg-warning\", text: \"text-warning\" },\n  danger: { fill: \"fill-destructive\", stroke: \"stroke-destructive\", bg: \"bg-destructive\", text: \"text-destructive\" },\n  muted: { fill: \"fill-muted-foreground\", stroke: \"stroke-muted-foreground\", bg: \"bg-muted-foreground\", text: \"text-muted-foreground\" },\n};\n\n/** The tone a series (or a slice) wears: its own `tone` (chart-1…5, 1…5,\n *  or a theme tone), else the next chart colour in order. */\nexport function toneOf(item, index) {\n  const t = typeof item?.tone === \"number\" ? `chart-${item.tone}` : item?.tone;\n  return TONES[t] ? t : `chart-${(index % 5) + 1}`;\n}\n\nexport function tone(t, kind) {\n  return (TONES[t] ?? TONES[\"chart-1\"])[kind];\n}\n\n// ---- numbers ---------------------------------------------------------------\n\nconst COMPACT = new Intl.NumberFormat(undefined, { notation: \"compact\", maximumFractionDigits: 1 });\nconst PLAIN = new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 });\n\n/** The default value formatter: 1,250 · 48.2K · 1.3M. */\nexport function defaultFormat(v) {\n  if (v == null || Number.isNaN(v)) return \"—\";\n  return Math.abs(v) >= 10000 ? COMPACT.format(v) : PLAIN.format(v);\n}\n\n/** A value as a number, or null when there is none to draw: null,\n *  undefined, an empty or blank string, or anything not a finite number.\n *  null is a gap, never a zero — Number(null) and Number(\"\") are 0, and\n *  until 0.5.1 a day with no data plotted as a real zero. */\nexport function num(v) {\n  if (v == null || (typeof v === \"string\" && !v.trim())) return null;\n  const n = typeof v === \"number\" ? v : Number(v);\n  return Number.isFinite(n) ? n : null;\n}\n\n/** Points split into runs wherever one is missing (null): a line or an\n *  area breaks at a gap. [p | null, …] → [[p, …], …] */\nexport function runs(points) {\n  const out = [];\n  let cur = [];\n  for (const p of points) {\n    if (p) cur.push(p);\n    else if (cur.length) {\n      out.push(cur);\n      cur = [];\n    }\n  }\n  if (cur.length) out.push(cur);\n  return out;\n}\n\n/** Round numbers that cover [min, max] in about `count` steps. */\nexport function niceTicks(min, max, count = 5) {\n  if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 1];\n  if (min === max) {\n    if (min === 0) return [0, 1];\n    min = Math.min(0, min);\n    max = Math.max(0, max);\n  }\n  const raw = (max - min) / Math.max(1, count);\n  const mag = 10 ** Math.floor(Math.log10(raw));\n  const err = raw / mag;\n  const step = (err >= 7.5 ? 10 : err >= 3.5 ? 5 : err >= 1.5 ? 2 : 1) * mag;\n  const lo = Math.floor(min / step) * step;\n  const hi = Math.ceil(max / step) * step;\n  const out = [];\n  for (let v = lo; v <= hi + step / 2; v += step) out.push(Number(v.toPrecision(12)));\n  return out;\n}\n\nexport function humanize(key) {\n  const text = String(key ?? \"\").replace(/[_-]+/g, \" \").trim();\n  return text ? text.charAt(0).toUpperCase() + text.slice(1) : \"\";\n}\n\n/** About how wide a label is at text-2xs, for margins and thinning. The\n *  axis text is small and the estimate generous, so nothing is clipped. */\nexport function textWidth(s) {\n  return String(s ?? \"\").length * 6.4 + 4;\n}\n\n/** A safe id fragment for url(#…) from React's useId. */\nexport function idFrom(uid) {\n  return `c${String(uid).replace(/[^a-zA-Z0-9-]/g, \"\")}`;\n}\n\n// ---- the box ---------------------------------------------------------------\n\n/** The width of the element, kept current by a ResizeObserver: a chart is\n *  drawn for the width it has, never scaled. A callback ref, so a box that\n *  comes back (after the empty state) is measured again. 0 until measured.\n *\n *    const [boxRef, width] = useWidth();  <div ref={boxRef}>…</div> */\nexport function useWidth() {\n  const [el, setEl] = useState(null);\n  const [width, setWidth] = useState(0);\n  useEffect(() => {\n    if (!el) return undefined;\n    setWidth(Math.floor(el.getBoundingClientRect().width));\n    if (typeof ResizeObserver === \"undefined\") return undefined;\n    const ro = new ResizeObserver(([entry]) => setWidth(Math.floor(entry.contentRect.width)));\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [el]);\n  return [setEl, width];\n}\n\n/** false for the first frame once `ready`, then true: marks draw from\n *  nothing to their place. The transitions are motion-safe: classes, so\n *  with reduced motion they simply appear. */\nexport function useReveal(ready) {\n  const [shown, setShown] = useState(false);\n  useEffect(() => {\n    if (!ready || shown) return undefined;\n    // A frame, so the start is painted; the timer, because a hidden tab\n    // runs no frames and the chart must never stay empty.\n    const done = () => setShown(true);\n    const frame = requestAnimationFrame(() => requestAnimationFrame(done));\n    const timer = setTimeout(done, 120);\n    return () => {\n      cancelAnimationFrame(frame);\n      clearTimeout(timer);\n    };\n  }, [ready, shown]);\n  return shown;\n}\n\n// ---- the parts every chart draws ----------------------------------------------\n\n// A square of the series' colour; a dashed series gets a short dashed line.\nfunction Swatch({ t, dim, dashed }) {\n  if (dashed) {\n    return (\n      <svg aria-hidden=\"true\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" className={cx(\"shrink-0\", dim && \"opacity-30\")}>\n        <line x1=\"0\" y1=\"5\" x2=\"12\" y2=\"5\" strokeWidth=\"2\" strokeDasharray=\"3 2\" className={tone(t, \"stroke\")} />\n      </svg>\n    );\n  }\n  return <span aria-hidden=\"true\" className={cx(\"size-2.5 shrink-0 rounded-sm\", tone(t, \"bg\"), dim && \"opacity-30\")} />;\n}\n\n/**\n * The key to a chart's colours. With `onToggle` each entry is a toggle\n * (pressed = shown) that hides or shows its series; without it, a plain\n * list. `items` [{ key, label, tone?, value?, dashed? }] — `value` is a\n * muted note after the label (a slice's share); `dashed` draws the key as\n * a dashed line (a comparison series).\n */\nexport function ChartLegend({ items, hidden, onToggle, className, label = \"Legend\" }) {\n  const list = (items ?? []).filter(Boolean);\n  if (!list.length) return null;\n  const off = hidden instanceof Set ? hidden : new Set(hidden ?? []);\n  if (!onToggle) {\n    return (\n      <ul aria-label={label} className={cx(\"flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted-foreground\", className)}>\n        {list.map((it, i) => (\n          <li key={it.key} className=\"flex items-center gap-1.5\">\n            <Swatch t={toneOf(it, i)} dashed={it.dashed} />\n            <span className=\"text-foreground\">{it.label ?? humanize(it.key)}</span>\n            {it.value != null ? <span data-nums>{it.value}</span> : null}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n  return (\n    <div role=\"group\" aria-label={label} className={cx(\"flex flex-wrap items-center justify-center gap-1\", className)}>\n      {list.map((it, i) => {\n        const shown = !off.has(it.key);\n        return (\n          <Toggle\n            key={it.key}\n            size=\"sm\"\n            variant=\"quiet\"\n            pressed={shown}\n            onPressedChange={() => onToggle(it.key)}\n            className=\"gap-1.5 text-xs\"\n          >\n            <Swatch t={toneOf(it, i)} dim={!shown} dashed={it.dashed} />\n            <span className={shown ? \"text-foreground\" : \"line-through\"}>{it.label ?? humanize(it.key)}</span>\n            {it.value != null ? <span data-nums className=\"text-muted-foreground\">{it.value}</span> : null}\n          </Toggle>\n        );\n      })}\n    </div>\n  );\n}\n\n/** The floating box that says what is under the pointer (or the keyboard).\n *  `at` { x, y, flip } in the chart's pixels; flip puts it on the left. */\nexport function TooltipBox({ at, title, rows, footer }) {\n  if (!at) return null;\n  return (\n    <div\n      aria-hidden=\"true\"\n      className=\"pointer-events-none absolute left-0 top-0 z-10 min-w-36 rounded-md border border-border bg-popover px-2.5 py-2 text-xs text-popover-foreground shadow-lg\"\n      style={{\n        transform: `translate(${Math.round(at.x)}px, ${Math.round(at.y)}px) translate(${at.flip ? \"calc(-100% - 12px)\" : \"12px\"}, ${at.middle ? \"-50%\" : \"0\"})`,\n      }}\n    >\n      {title != null ? <p className=\"mb-1.5 font-medium\">{title}</p> : null}\n      <div className=\"grid gap-1\">\n        {rows.map((r) => (\n          <div key={r.key} className=\"flex items-center gap-2\">\n            <Swatch t={r.tone} dashed={r.dashed} />\n            <span className=\"flex-1 text-muted-foreground\">{r.label}</span>\n            <span data-nums className=\"font-medium\">{r.value}</span>\n          </div>\n        ))}\n      </div>\n      {footer ? (\n        <div className=\"mt-1.5 flex items-center justify-between gap-2 border-t border-border pt-1.5\">\n          <span className=\"text-muted-foreground\">{footer.label}</span>\n          <span data-nums className=\"font-medium\">{footer.value}</span>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** The numbers behind the picture, for a screen reader: a real table,\n *  visually hidden. `head` the column names, `body` rows of strings. */\nexport function DataTable({ caption, head, body }) {\n  return (\n    <table className=\"sr-only\">\n      <caption>{caption}</caption>\n      <thead>\n        <tr>\n          {head.map((h, i) => (\n            <th key={i} scope=\"col\">{h}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {body.map((cells, r) => (\n          <tr key={r}>\n            {cells.map((c, i) =>\n              i === 0 ? (\n                <th key={i} scope=\"row\">{c}</th>\n              ) : (\n                <td key={i}>{c}</td>\n              ),\n            )}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\n/** What a chart shows with nothing to draw, at the height it would have. */\nexport function ChartEmpty({ height, title, body }) {\n  return (\n    <div style={{ minHeight: height }} className=\"grid\">\n      <Empty icon=\"chart\" title={title} body={body} className=\"h-full content-center\" />\n    </div>\n  );\n}\n"
     },
     {
       "path": "registry/blocks/chart/cartesian.jsx",
       "type": "registry:component",
       "target": "@components/makersclaw/blocks/chart/cartesian.jsx",
-      "content": "\"use client\";\n\nimport { useId, useMemo, useState } from \"react\";\nimport { cx } from \"../../ui\";\nimport {\n  ChartEmpty,\n  ChartLegend,\n  DataTable,\n  TooltipBox,\n  defaultFormat,\n  humanize,\n  idFrom,\n  niceTicks,\n  num,\n  textWidth,\n  tone,\n  toneOf,\n  useReveal,\n  useWidth,\n} from \"./core\";\n\n// LineChart, AreaChart and BarChart — one drawing, three marks. Rows in,\n// one x key, the series to draw; the block owns the rest: the scale and its\n// round ticks, gridlines, labels thinned to fit, a width that follows the\n// container, the tooltip and crosshair under a pointer or the arrow keys,\n// the legend that hides a series, the reveal (none with reduced motion),\n// and the words and table a screen reader gets instead of the picture.\n\n// ---- paths -------------------------------------------------------------------\n\nconst f = (n) => Math.round(n * 100) / 100;\n\nfunction linear(pts) {\n  return pts.map(([x, y], i) => `${i ? \"L\" : \"M\"}${f(x)},${f(y)}`).join(\"\");\n}\n\nfunction step(pts) {\n  let d = `M${f(pts[0][0])},${f(pts[0][1])}`;\n  for (let i = 1; i < pts.length; i++) {\n    const mid = (pts[i - 1][0] + pts[i][0]) / 2;\n    d += `H${f(mid)}V${f(pts[i][1])}H${f(pts[i][0])}`;\n  }\n  return d;\n}\n\n// Monotone cubic (Fritsch–Carlson): smooth, and never overshoots a point,\n// so a curve does not invent a dip below zero or a peak that was not there.\nfunction monotone(pts) {\n  const n = pts.length;\n  if (n < 3) return linear(pts);\n  const dx = [];\n  const m = [];\n  for (let i = 0; i < n - 1; i++) {\n    dx[i] = pts[i + 1][0] - pts[i][0];\n    m[i] = dx[i] === 0 ? 0 : (pts[i + 1][1] - pts[i][1]) / dx[i];\n  }\n  const t = new Array(n);\n  t[0] = m[0];\n  t[n - 1] = m[n - 2];\n  for (let i = 1; i < n - 1; i++) {\n    t[i] = m[i - 1] * m[i] <= 0 ? 0 : (3 * (dx[i - 1] + dx[i])) / ((2 * dx[i] + dx[i - 1]) / m[i - 1] + (dx[i] + 2 * dx[i - 1]) / m[i]);\n  }\n  let d = `M${f(pts[0][0])},${f(pts[0][1])}`;\n  for (let i = 0; i < n - 1; i++) {\n    const h = dx[i] / 3;\n    d += `C${f(pts[i][0] + h)},${f(pts[i][1] + t[i] * h)} ${f(pts[i + 1][0] - h)},${f(pts[i + 1][1] - t[i + 1] * h)} ${f(pts[i + 1][0])},${f(pts[i + 1][1])}`;\n  }\n  return d;\n}\n\nfunction curvePath(pts, curve) {\n  if (!pts.length) return \"\";\n  if (curve === \"step\") return step(pts);\n  if (curve === \"linear\") return linear(pts);\n  return monotone(pts);\n}\n\n// A bar with its outer end rounded (the end away from zero).\nfunction barPath(x, y, w, h, r, side) {\n  const q = Math.max(0, Math.min(r, w / 2, h / 2));\n  if (!q || !side) return `M${f(x)},${f(y)}h${f(w)}v${f(h)}h${f(-w)}Z`;\n  const X = f(x);\n  const Y = f(y);\n  if (side === \"top\") return `M${X},${f(y + h)}V${f(y + q)}Q${X},${Y} ${f(x + q)},${Y}H${f(x + w - q)}Q${f(x + w)},${Y} ${f(x + w)},${f(y + q)}V${f(y + h)}Z`;\n  if (side === \"bottom\") return `M${X},${Y}V${f(y + h - q)}Q${X},${f(y + h)} ${f(x + q)},${f(y + h)}H${f(x + w - q)}Q${f(x + w)},${f(y + h)} ${f(x + w)},${f(y + h - q)}V${Y}Z`;\n  if (side === \"right\") return `M${X},${Y}H${f(x + w - q)}Q${f(x + w)},${Y} ${f(x + w)},${f(y + q)}V${f(y + h - q)}Q${f(x + w)},${f(y + h)} ${f(x + w - q)},${f(y + h)}H${X}Z`;\n  return `M${f(x + w)},${Y}H${f(x + q)}Q${X},${Y} ${X},${f(y + q)}V${f(y + h - q)}Q${X},${f(y + h)} ${f(x + q)},${f(y + h)}H${f(x + w)}Z`;\n}\n\n// ---- the chart ----------------------------------------------------------------\n\nfunction Cartesian({\n  kind,\n  data,\n  x,\n  series,\n  format = defaultFormat,\n  formatAxis,\n  formatX = (v) => (v == null ? \"\" : String(v)),\n  label = \"Chart\",\n  description,\n  xLabel,\n  height = 240,\n  stacked = false,\n  orientation = \"vertical\",\n  valueLabels = false,\n  track = false,\n  curve = \"monotone\",\n  dots = false,\n  grid = true,\n  xAxis = true,\n  yAxis = true,\n  legend,\n  tooltip = true,\n  onSelect,\n  emptyLabel = \"No data yet\",\n  emptyBody,\n  className,\n}) {\n  const uid = idFrom(useId());\n  const fmt = (v) => (v == null ? \"—\" : format(v));\n  const [boxRef, width] = useWidth();\n  const [hidden, setHidden] = useState(() => new Set());\n  const [active, setActive] = useState(null);\n  const [keyed, setKeyed] = useState(false);\n\n  const rows = Array.isArray(data) ? data : [];\n  // A `muted` series with no tone of its own is the grey: a comparison\n  // (last period) that sits behind the series it is compared with.\n  const all = useMemo(\n    () => (series ?? []).map((s, i) => ({ ...s, label: s.label ?? humanize(s.key), tone: s.muted && s.tone == null ? \"muted\" : toneOf(s, i) })),\n    [series],\n  );\n  const live = all.filter((s) => !hidden.has(s.key));\n  // Lines and areas draw muted series first, so they sit underneath.\n  const order = live.map((_, j) => j).sort((a, b) => Number(Boolean(live[b].muted)) - Number(Boolean(live[a].muted)));\n  const horizontal = kind === \"bar\" && orientation === \"horizontal\";\n  const stack = stacked && kind !== \"line\";\n  const axisFormat = formatAxis ?? format;\n  const showLegend = legend ?? all.length > 1;\n  const shown = useReveal(width > 0);\n\n  // Each series' [from, to] per row: stacked marks start where the one\n  // below ended (positives up, negatives down); the rest start at zero.\n  const spans = useMemo(() => {\n    const up = rows.map(() => 0);\n    const down = rows.map(() => 0);\n    return live.map((s) =>\n      rows.map((r, i) => {\n        const v = num(r?.[s.key]);\n        if (v == null) return null;\n        if (!stack) return [0, v];\n        if (v >= 0) {\n          const from = up[i];\n          up[i] += v;\n          return [from, up[i]];\n        }\n        const from = down[i];\n        down[i] += v;\n        return [from, down[i]];\n      }),\n    );\n  }, [rows, live, stack]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  let lo = 0;\n  let hi = 0;\n  for (const s of spans) for (const p of s) if (p) (lo = Math.min(lo, p[0], p[1])), (hi = Math.max(hi, p[0], p[1]));\n  const valueLen = horizontal ? Math.max(0, width - 16) : height - 32;\n  const ticks = niceTicks(lo, hi, Math.max(2, Math.min(6, Math.floor(valueLen / (horizontal ? 80 : 48)))));\n  const vMin = ticks[0];\n  const vMax = ticks[ticks.length - 1];\n\n  const xNames = rows.map((r) => formatX(r?.[x], r));\n  const tickNames = ticks.map((t) => axisFormat(t));\n\n  // BarChart's value labels: one at the outer end of every bar, or of every\n  // stack (its total). [{ i, j, v, text }]; j is the series (-1: a stack).\n  const barLabels = [];\n  if (kind === \"bar\" && valueLabels && live.length) {\n    const say = (v, row, key) => (typeof valueLabels === \"function\" ? valueLabels(v, row, key) : fmt(v));\n    rows.forEach((row, i) => {\n      if (stack) {\n        const vals = live.map((s) => num(row?.[s.key])).filter((v) => v != null);\n        if (!vals.length) return;\n        const v = vals.reduce((a, b) => a + b, 0);\n        barLabels.push({ i, j: -1, v, text: say(v, row, null) });\n      } else {\n        live.forEach((s, j) => {\n          const v = num(row?.[s.key]);\n          if (v != null) barLabels.push({ i, j, v, text: say(v, row, s.key) });\n        });\n      }\n    });\n  }\n  const labelRoom = barLabels.length ? Math.max(...barLabels.map((l) => textWidth(l.text))) + 6 : 0;\n\n  // Margins from what the labels need.\n  const catW = horizontal && yAxis ? Math.min(Math.max(...xNames.map(textWidth), 24) + 8, width * 0.4) : 0;\n  const valW = !horizontal && yAxis ? Math.max(...tickNames.map(textWidth)) + 8 : 0;\n  const m = {\n    top: barLabels.length && !horizontal ? 22 : 8,\n    right: horizontal ? Math.max(8, textWidth(tickNames[tickNames.length - 1]) / 2, labelRoom) : 8,\n    bottom: xAxis ? 24 : 4,\n    left: horizontal ? catW : valW,\n  };\n  // Points sit on the plot's edges (bars sit inside their band), so the\n  // first and last x labels, centred on them, need room outside it.\n  if (kind !== \"bar\" && xAxis && rows.length) {\n    m.left = Math.max(m.left, textWidth(xNames[0]) / 2);\n    m.right = Math.max(m.right, textWidth(xNames[xNames.length - 1]) / 2);\n  }\n  const plotW = Math.max(0, width - m.left - m.right);\n  const plotH = Math.max(0, height - m.top - m.bottom);\n  const n = rows.length;\n\n  // Value → pixel along the value axis; index → pixel along the category axis.\n  const vPos = (v) => (horizontal ? m.left + ((v - vMin) / (vMax - vMin || 1)) * plotW : m.top + plotH - ((v - vMin) / (vMax - vMin || 1)) * plotH);\n  const band = (horizontal ? plotH : plotW) / Math.max(1, n);\n  const cPos =\n    kind === \"bar\"\n      ? (i) => (horizontal ? m.top : m.left) + band * (i + 0.5)\n      : (i) => m.left + (n === 1 ? plotW / 2 : (i * plotW) / (n - 1));\n  const zero = vPos(Math.max(vMin, Math.min(0, vMax)));\n\n  // Category labels thinned so they never collide.\n  const labelEvery = horizontal\n    ? Math.max(1, Math.ceil(16 / Math.max(1, band)))\n    : Math.max(1, Math.ceil((Math.max(...xNames.map(textWidth), 0) + 12) / Math.max(1, kind === \"bar\" ? band : plotW / Math.max(1, n - 1))));\n\n  function indexAt(e) {\n    const rect = e.currentTarget.getBoundingClientRect();\n    const p = horizontal ? e.clientY - rect.top : e.clientX - rect.left;\n    if (kind === \"bar\") return Math.max(0, Math.min(n - 1, Math.floor((p - (horizontal ? m.top : m.left)) / band)));\n    if (n === 1) return 0;\n    return Math.max(0, Math.min(n - 1, Math.round(((p - m.left) / plotW) * (n - 1))));\n  }\n\n  function onKeyDown(e) {\n    if (!n) return;\n    const back = horizontal ? \"ArrowUp\" : \"ArrowLeft\";\n    const fwd = horizontal ? \"ArrowDown\" : \"ArrowRight\";\n    let next = null;\n    if (e.key === fwd || e.key === (horizontal ? \"ArrowRight\" : \"ArrowDown\")) next = active == null ? 0 : Math.min(n - 1, active + 1);\n    else if (e.key === back || e.key === (horizontal ? \"ArrowLeft\" : \"ArrowUp\")) next = active == null ? n - 1 : Math.max(0, active - 1);\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = n - 1;\n    else if (e.key === \"Escape\") {\n      setActive(null);\n      return;\n    } else if ((e.key === \"Enter\" || e.key === \" \") && onSelect && active != null) {\n      e.preventDefault();\n      onSelect(rows[active], active);\n      return;\n    }\n    if (next == null) return;\n    e.preventDefault();\n    setKeyed(true);\n    setActive(next);\n  }\n\n  // ---- words -------------------------------------------------------------------\n\n  const summary = useMemo(() => {\n    if (!n || !live.length) return \"\";\n    const parts = live.map((s) => {\n      const vals = rows.map((r) => num(r?.[s.key]));\n      const idx = vals.reduce((best, v, i) => (v != null && (best < 0 || v > vals[best]) ? i : best), -1);\n      const first = vals.find((v) => v != null);\n      const last = [...vals].reverse().find((v) => v != null);\n      return `${s.label}: ${kind === \"bar\" ? \"\" : `from ${fmt(first)} to ${fmt(last)}, `}highest ${fmt(vals[idx])} at ${xNames[idx]}`;\n    });\n    return `${n} ${n === 1 ? \"point\" : \"points\"}, ${xNames[0]} to ${xNames[n - 1]}. ${parts.join(\"; \")}.`;\n  }, [rows, live, n]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const tipRows =\n    active == null\n      ? []\n      : live.map((s) => ({ key: s.key, label: s.label, tone: s.tone, dashed: s.dashed, value: fmt(num(rows[active]?.[s.key])) }));\n  const total = active == null ? null : live.reduce((sum, s) => sum + (num(rows[active]?.[s.key]) ?? 0), 0);\n  const announce = active == null ? \"\" : `${xNames[active]}: ${tipRows.map((r) => `${r.label} ${r.value}`).join(\", \")}`;\n\n  const legendNode = showLegend ? (\n    <ChartLegend\n      items={all}\n      hidden={hidden}\n      onToggle={(key) =>\n        setHidden((h) => {\n          const next = new Set(h);\n          if (next.has(key)) next.delete(key);\n          else next.add(key);\n          return next;\n        })\n      }\n      label={`${label}: series`}\n    />\n  ) : null;\n\n  if (!n) {\n    return (\n      <div className={cx(\"grid gap-3\", className)}>\n        <ChartEmpty height={height} title={emptyLabel} body={emptyBody} />\n      </div>\n    );\n  }\n\n  // ---- marks -------------------------------------------------------------------\n\n  const tipAt =\n    active == null || !tooltip\n      ? null\n      : horizontal\n        ? { x: Math.min(width - 12, Math.max(...live.map((_, k) => vPos(spans[k][active]?.[1] ?? 0)), zero)), y: cPos(active), flip: false, middle: true }\n        : { x: cPos(active), y: m.top, flip: cPos(active) > width / 2 };\n  if (tipAt && horizontal) tipAt.flip = tipAt.x > width * 0.6;\n\n  const revealStyle = (axis) => ({\n    transform: shown ? \"none\" : axis === \"x\" ? \"scaleX(0)\" : \"scaleY(0)\",\n    transformOrigin: axis === \"x\" ? `${zero}px 0` : `0 ${zero}px`,\n  });\n\n  let marks = null;\n  if (kind === \"bar\") {\n    const k = live.length;\n    const groupW = Math.min(band * (stack ? 0.62 : 0.8), stack ? 56 : 28 * Math.max(1, k) + 4 * (k - 1));\n    const gap = k > 1 && !stack ? Math.min(4, groupW * 0.06) : 0;\n    const barW = stack ? groupW : Math.max(1, (groupW - gap * (k - 1)) / Math.max(1, k));\n    const r = Math.min(4, barW / 3);\n    // Which series ends each stack (its outer end is the rounded one).\n    const outer = rows.map((_, i) => {\n      let top = -1;\n      let bottom = -1;\n      live.forEach((s, j) => {\n        const p = spans[j][i];\n        if (!p || p[1] === p[0]) return;\n        if (p[1] > p[0]) top = j;\n        else bottom = j;\n      });\n      return { top, bottom };\n    });\n    // Where the stacked total ends: the far end of the stack on its side.\n    const stackEnd = (i, v) => {\n      let end = 0;\n      live.forEach((_, j) => {\n        const p = spans[j][i];\n        if (p) end = v >= 0 ? Math.max(end, p[1]) : Math.min(end, p[1]);\n      });\n      return end;\n    };\n    const tracks = track ? (\n      <g aria-hidden=\"true\" className=\"fill-accent\">\n        {rows.map((_, i) => {\n          const c = cPos(i) - groupW / 2;\n          return horizontal ? (\n            <rect key={i} x={m.left} y={c} width={plotW} height={groupW} rx={r} />\n          ) : (\n            <rect key={i} x={c} y={m.top} width={groupW} height={plotH} rx={r} />\n          );\n        })}\n      </g>\n    ) : null;\n    const labels = barLabels.length ? (\n      <g\n        aria-hidden=\"true\"\n        className=\"fill-foreground text-2xs font-medium motion-safe:transition-opacity motion-safe:duration-500\"\n        style={{ opacity: shown ? 1 : 0 }}\n        data-nums\n      >\n        {barLabels.map(({ i, j, v, text }) => {\n          const end = vPos(j < 0 ? stackEnd(i, v) : v);\n          const c = cPos(i) + (j < 0 ? 0 : -groupW / 2 + j * (barW + gap) + barW / 2);\n          const up = v >= 0;\n          return horizontal ? (\n            <text key={`${i}-${j}`} x={end + (up ? 6 : -6)} y={c} dy=\"0.32em\" textAnchor={up ? \"start\" : \"end\"}>\n              {text}\n            </text>\n          ) : (\n            <text key={`${i}-${j}`} x={c} y={end + (up ? -6 : 12)} textAnchor=\"middle\">\n              {text}\n            </text>\n          );\n        })}\n      </g>\n    ) : null;\n    marks = (\n      <>\n        {tracks}\n        <g style={revealStyle(horizontal ? \"x\" : \"y\")} className=\"motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-out\">\n          {live.map((s, j) => (\n            <g key={s.key} className={tone(s.tone, \"fill\")}>\n              {rows.map((_, i) => {\n                const p = spans[j][i];\n                if (!p || p[0] === p[1]) return null;\n                const a = vPos(p[0]);\n                const b = vPos(p[1]);\n                const offset = stack ? -groupW / 2 : -groupW / 2 + j * (barW + gap);\n                const c = cPos(i) + offset;\n                const positive = p[1] > p[0];\n                const isOuter = !stack || (positive ? outer[i].top === j : outer[i].bottom === j);\n                const side = !isOuter ? null : horizontal ? (positive ? \"right\" : \"left\") : positive ? \"top\" : \"bottom\";\n                const d = horizontal\n                  ? barPath(Math.min(a, b), c, Math.abs(b - a), barW, r, side)\n                  : barPath(c, Math.min(a, b), barW, Math.abs(b - a), r, side);\n                return <path key={i} d={d} className={cx(active != null && active !== i && \"opacity-60\", \"motion-safe:transition-opacity\")} />;\n              })}\n            </g>\n          ))}\n        </g>\n        {labels}\n      </>\n    );\n  } else {\n    const clip = `${uid}-clip`;\n    const fade = `${uid}-fade`;\n    marks = (\n      <>\n        <defs>\n          <clipPath id={clip}>\n            <rect\n              x={m.left - 4}\n              y={0}\n              width={plotW + 8}\n              height={height}\n              style={{ transform: shown ? \"none\" : \"scaleX(0)\", transformOrigin: `${m.left}px 0` }}\n              className=\"motion-safe:transition-transform motion-safe:duration-700 motion-safe:ease-out\"\n            />\n          </clipPath>\n          {/* An alpha mask, not a colour: the area fades toward zero. */}\n          <linearGradient id={`${fade}-g`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0\" stopOpacity=\"1\" />\n            <stop offset=\"1\" stopOpacity=\"0.15\" />\n          </linearGradient>\n          <mask id={fade} style={{ maskType: \"alpha\" }} maskUnits=\"userSpaceOnUse\" x={0} y={0} width={width} height={height}>\n            <rect x={0} y={m.top} width={width} height={plotH} fill={`url(#${fade}-g)`} />\n          </mask>\n        </defs>\n        <g clipPath={`url(#${clip})`}>\n          {kind === \"area\"\n            ? order.map((j) => {\n                const s = live[j];\n                // A dashed series is a line only: a comparison has no fill.\n                if (s.dashed && !stack) return null;\n                const top = [];\n                const base = [];\n                spans[j].forEach((p, i) => {\n                  top.push([cPos(i), vPos(p ? p[1] : stack ? 0 : 0)]);\n                  base.push([cPos(i), vPos(p ? p[0] : 0)]);\n                });\n                const back = curvePath([...base].reverse(), curve).replace(/^M/, \"L\");\n                return (\n                  <path\n                    key={s.key}\n                    d={`${curvePath(top, curve)}${back}Z`}\n                    className={tone(s.tone, \"fill\")}\n                    fillOpacity={stack ? 0.4 : s.muted ? 0.2 : 0.45}\n                    mask={stack ? undefined : `url(#${fade})`}\n                  />\n                );\n              })\n            : null}\n          {order.map((j) => {\n            const s = live[j];\n            // A line breaks where a value is missing.\n            const segs = [];\n            let cur = [];\n            spans[j].forEach((p, i) => {\n              if (!p && kind === \"line\") {\n                if (cur.length) segs.push(cur);\n                cur = [];\n                return;\n              }\n              cur.push([cPos(i), vPos(p ? p[1] : 0)]);\n            });\n            if (cur.length) segs.push(cur);\n            return (\n              <g\n                key={s.key}\n                className={tone(s.tone, \"stroke\")}\n                fill=\"none\"\n                strokeWidth={s.muted ? 1.5 : 2}\n                strokeDasharray={s.dashed ? \"5 4\" : undefined}\n                strokeLinejoin=\"round\"\n                strokeLinecap={s.dashed ? \"butt\" : \"round\"}\n              >\n                {segs.map((seg, k) => (\n                  <path key={k} d={curvePath(seg, curve)} />\n                ))}\n                {dots\n                  ? spans[j].map((p, i) =>\n                      p ? <circle key={i} cx={cPos(i)} cy={vPos(p[1])} r={3} className={cx(tone(s.tone, \"fill\"), \"stroke-card\")} strokeWidth={1.5} strokeDasharray=\"none\" /> : null,\n                    )\n                  : null}\n              </g>\n            );\n          })}\n        </g>\n      </>\n    );\n  }\n\n  const cursor =\n    active == null\n      ? null\n      : kind === \"bar\"\n        ? horizontal\n          ? <rect x={m.left} y={m.top + band * active} width={plotW} height={band} className=\"fill-muted\" />\n          : <rect x={m.left + band * active} y={m.top} width={band} height={plotH} className=\"fill-muted\" />\n        : <line x1={cPos(active)} x2={cPos(active)} y1={m.top} y2={m.top + plotH} className=\"stroke-muted-foreground\" strokeDasharray=\"3 3\" strokeWidth={1} />;\n\n  const activeDots =\n    active == null || kind === \"bar\"\n      ? null\n      : live.map((s, j) => {\n          const p = spans[j][active];\n          if (!p) return null;\n          return <circle key={s.key} cx={cPos(active)} cy={vPos(p[1])} r={4.5} className={cx(tone(s.tone, \"fill\"), \"stroke-card\")} strokeWidth={2} />;\n        });\n\n  return (\n    <div className={cx(\"grid min-w-0 gap-3\", className)}>\n      <div\n        ref={boxRef}\n        tabIndex={0}\n        role=\"group\"\n        aria-label={`${label}. Arrow keys read each value.`}\n        onKeyDown={onKeyDown}\n        onFocus={(e) => {\n          if (e.currentTarget.matches(\":focus-visible\") && active == null) {\n            setKeyed(true);\n            setActive(0);\n          }\n        }}\n        onBlur={() => {\n          setKeyed(false);\n          setActive(null);\n        }}\n        className=\"relative min-w-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        style={{ height }}\n      >\n        {width > 0 ? (\n          <svg\n            role=\"img\"\n            aria-label={`${label}. ${description ?? summary}`}\n            width={width}\n            height={height}\n            viewBox={`0 0 ${width} ${height}`}\n            className={cx(\"block touch-pan-y select-none overflow-visible\", onSelect && \"cursor-pointer\")}\n            onPointerMove={(e) => {\n              setKeyed(false);\n              setActive(indexAt(e));\n            }}\n            onPointerDown={(e) => setActive(indexAt(e))}\n            onPointerLeave={() => !keyed && setActive(null)}\n            onClick={(e) => onSelect?.(rows[indexAt(e)], indexAt(e))}\n          >\n            {/* raw: an SVG drawing — no kit part draws a chart. */}\n            {cursor}\n            {grid\n              ? ticks.map((t) => {\n                  const p = f(vPos(t));\n                  return horizontal ? (\n                    <line key={t} x1={p} x2={p} y1={m.top} y2={m.top + plotH} className=\"stroke-border\" strokeDasharray={t === 0 ? undefined : \"3 3\"} />\n                  ) : (\n                    <line key={t} x1={m.left} x2={m.left + plotW} y1={p} y2={p} className=\"stroke-border\" strokeDasharray={t === 0 ? undefined : \"3 3\"} />\n                  );\n                })\n              : null}\n            {marks}\n            {activeDots}\n            <g aria-hidden=\"true\" className=\"fill-muted-foreground text-2xs\" data-nums>\n              {/* The value axis. */}\n              {(horizontal ? xAxis : yAxis)\n                ? ticks.map((t, i) =>\n                    horizontal ? (\n                      <text key={t} x={vPos(t)} y={height - 6} textAnchor=\"middle\">\n                        {tickNames[i]}\n                      </text>\n                    ) : (\n                      <text key={t} x={m.left - 8} y={vPos(t)} dy=\"0.32em\" textAnchor=\"end\">\n                        {tickNames[i]}\n                      </text>\n                    ),\n                  )\n                : null}\n              {/* The category axis. */}\n              {(horizontal ? yAxis : xAxis)\n                ? xNames.map((name, i) => {\n                    if (i % labelEvery !== 0) return null;\n                    if (horizontal) {\n                      return (\n                        <text key={i} x={m.left - 8} y={cPos(i)} dy=\"0.32em\" textAnchor=\"end\">\n                          {name}\n                        </text>\n                      );\n                    }\n                    return (\n                      <text key={i} x={cPos(i)} y={height - 6} textAnchor=\"middle\">\n                        {name}\n                      </text>\n                    );\n                  })\n                : null}\n            </g>\n          </svg>\n        ) : null}\n        {tipAt ? (\n          <TooltipBox\n            at={tipAt}\n            title={xNames[active]}\n            rows={tipRows}\n            footer={stack && live.length > 1 ? { label: \"Total\", value: fmt(total) } : null}\n          />\n        ) : null}\n        <div className=\"sr-only\" aria-live=\"polite\">\n          {keyed ? announce : \"\"}\n        </div>\n      </div>\n      {live.length === 0 ? <p className=\"text-center text-xs text-muted-foreground\">Every series is hidden. Press one below to show it.</p> : null}\n      {legendNode}\n      <DataTable\n        caption={label}\n        head={[xLabel ?? humanize(x), ...all.map((s) => s.label)]}\n        body={rows.map((r, i) => [xNames[i], ...all.map((s) => fmt(num(r?.[s.key])))])}\n      />\n    </div>\n  );\n}\n\n/** Values over an ordered x (time): lines, optionally curved or stepped. */\nexport function LineChart(props) {\n  return <Cartesian {...props} kind=\"line\" />;\n}\n\n/** Lines filled to zero; `stacked` piles the series into a total. */\nexport function AreaChart(props) {\n  return <Cartesian {...props} kind=\"area\" />;\n}\n\n/** Bars per category: grouped side by side, or `stacked`; columns\n *  (`orientation=\"vertical\"`, the default) or bars (`\"horizontal\"`). */\nexport function BarChart(props) {\n  return <Cartesian {...props} kind=\"bar\" />;\n}\n"
+      "content": "\"use client\";\n\nimport { useId, useMemo, useState } from \"react\";\nimport { cx } from \"../../ui\";\nimport {\n  ChartEmpty,\n  ChartLegend,\n  DataTable,\n  TooltipBox,\n  defaultFormat,\n  humanize,\n  idFrom,\n  niceTicks,\n  num,\n  runs,\n  textWidth,\n  tone,\n  toneOf,\n  useReveal,\n  useWidth,\n} from \"./core\";\n\n// LineChart, AreaChart and BarChart — one drawing, three marks. Rows in,\n// one x key, the series to draw; the block owns the rest: the scale and its\n// round ticks, gridlines, labels thinned to fit, a width that follows the\n// container, the tooltip and crosshair under a pointer or the arrow keys,\n// the legend that hides a series, the reveal (none with reduced motion),\n// and the words and table a screen reader gets instead of the picture.\n\n// ---- paths -------------------------------------------------------------------\n\nconst f = (n) => Math.round(n * 100) / 100;\n\nfunction linear(pts) {\n  return pts.map(([x, y], i) => `${i ? \"L\" : \"M\"}${f(x)},${f(y)}`).join(\"\");\n}\n\nfunction step(pts) {\n  let d = `M${f(pts[0][0])},${f(pts[0][1])}`;\n  for (let i = 1; i < pts.length; i++) {\n    const mid = (pts[i - 1][0] + pts[i][0]) / 2;\n    d += `H${f(mid)}V${f(pts[i][1])}H${f(pts[i][0])}`;\n  }\n  return d;\n}\n\n// Monotone cubic (Fritsch–Carlson): smooth, and never overshoots a point,\n// so a curve does not invent a dip below zero or a peak that was not there.\nfunction monotone(pts) {\n  const n = pts.length;\n  if (n < 3) return linear(pts);\n  const dx = [];\n  const m = [];\n  for (let i = 0; i < n - 1; i++) {\n    dx[i] = pts[i + 1][0] - pts[i][0];\n    m[i] = dx[i] === 0 ? 0 : (pts[i + 1][1] - pts[i][1]) / dx[i];\n  }\n  const t = new Array(n);\n  t[0] = m[0];\n  t[n - 1] = m[n - 2];\n  for (let i = 1; i < n - 1; i++) {\n    t[i] = m[i - 1] * m[i] <= 0 ? 0 : (3 * (dx[i - 1] + dx[i])) / ((2 * dx[i] + dx[i - 1]) / m[i - 1] + (dx[i] + 2 * dx[i - 1]) / m[i]);\n  }\n  let d = `M${f(pts[0][0])},${f(pts[0][1])}`;\n  for (let i = 0; i < n - 1; i++) {\n    const h = dx[i] / 3;\n    d += `C${f(pts[i][0] + h)},${f(pts[i][1] + t[i] * h)} ${f(pts[i + 1][0] - h)},${f(pts[i + 1][1] - t[i + 1] * h)} ${f(pts[i + 1][0])},${f(pts[i + 1][1])}`;\n  }\n  return d;\n}\n\nfunction curvePath(pts, curve) {\n  if (!pts.length) return \"\";\n  if (curve === \"step\") return step(pts);\n  if (curve === \"linear\") return linear(pts);\n  return monotone(pts);\n}\n\n// A bar with its outer end rounded (the end away from zero).\nfunction barPath(x, y, w, h, r, side) {\n  const q = Math.max(0, Math.min(r, w / 2, h / 2));\n  if (!q || !side) return `M${f(x)},${f(y)}h${f(w)}v${f(h)}h${f(-w)}Z`;\n  const X = f(x);\n  const Y = f(y);\n  if (side === \"top\") return `M${X},${f(y + h)}V${f(y + q)}Q${X},${Y} ${f(x + q)},${Y}H${f(x + w - q)}Q${f(x + w)},${Y} ${f(x + w)},${f(y + q)}V${f(y + h)}Z`;\n  if (side === \"bottom\") return `M${X},${Y}V${f(y + h - q)}Q${X},${f(y + h)} ${f(x + q)},${f(y + h)}H${f(x + w - q)}Q${f(x + w)},${f(y + h)} ${f(x + w)},${f(y + h - q)}V${Y}Z`;\n  if (side === \"right\") return `M${X},${Y}H${f(x + w - q)}Q${f(x + w)},${Y} ${f(x + w)},${f(y + q)}V${f(y + h - q)}Q${f(x + w)},${f(y + h)} ${f(x + w - q)},${f(y + h)}H${X}Z`;\n  return `M${f(x + w)},${Y}H${f(x + q)}Q${X},${Y} ${X},${f(y + q)}V${f(y + h - q)}Q${X},${f(y + h)} ${f(x + q)},${f(y + h)}H${f(x + w)}Z`;\n}\n\n// ---- the chart ----------------------------------------------------------------\n\nfunction Cartesian({\n  kind,\n  data,\n  x,\n  series,\n  format = defaultFormat,\n  formatAxis,\n  formatX = (v) => (v == null ? \"\" : String(v)),\n  label = \"Chart\",\n  description,\n  xLabel,\n  height = 240,\n  stacked = false,\n  orientation = \"vertical\",\n  valueLabels = false,\n  track = false,\n  curve = \"monotone\",\n  dots = false,\n  grid = true,\n  xAxis = true,\n  yAxis = true,\n  legend,\n  tooltip = true,\n  onSelect,\n  emptyLabel = \"No data yet\",\n  emptyBody,\n  className,\n}) {\n  const uid = idFrom(useId());\n  const fmt = (v) => (v == null ? \"—\" : format(v));\n  const [boxRef, width] = useWidth();\n  const [hidden, setHidden] = useState(() => new Set());\n  const [active, setActive] = useState(null);\n  const [keyed, setKeyed] = useState(false);\n\n  const rows = Array.isArray(data) ? data : [];\n  // A `muted` series with no tone of its own is the grey: a comparison\n  // (last period) that sits behind the series it is compared with.\n  const all = useMemo(\n    () => (series ?? []).map((s, i) => ({ ...s, label: s.label ?? humanize(s.key), tone: s.muted && s.tone == null ? \"muted\" : toneOf(s, i) })),\n    [series],\n  );\n  const live = all.filter((s) => !hidden.has(s.key));\n  // Lines and areas draw muted series first, so they sit underneath.\n  const order = live.map((_, j) => j).sort((a, b) => Number(Boolean(live[b].muted)) - Number(Boolean(live[a].muted)));\n  const horizontal = kind === \"bar\" && orientation === \"horizontal\";\n  const stack = stacked && kind !== \"line\";\n  const axisFormat = formatAxis ?? format;\n  const showLegend = legend ?? all.length > 1;\n  const shown = useReveal(width > 0);\n\n  // Each series' [from, to] per row: stacked marks start where the one\n  // below ended (positives up, negatives down); the rest start at zero.\n  const spans = useMemo(() => {\n    const up = rows.map(() => 0);\n    const down = rows.map(() => 0);\n    return live.map((s) =>\n      rows.map((r, i) => {\n        const v = num(r?.[s.key]);\n        if (v == null) return null;\n        if (!stack) return [0, v];\n        if (v >= 0) {\n          const from = up[i];\n          up[i] += v;\n          return [from, up[i]];\n        }\n        const from = down[i];\n        down[i] += v;\n        return [from, down[i]];\n      }),\n    );\n  }, [rows, live, stack]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  let lo = 0;\n  let hi = 0;\n  for (const s of spans) for (const p of s) if (p) (lo = Math.min(lo, p[0], p[1])), (hi = Math.max(hi, p[0], p[1]));\n  const valueLen = horizontal ? Math.max(0, width - 16) : height - 32;\n  const ticks = niceTicks(lo, hi, Math.max(2, Math.min(6, Math.floor(valueLen / (horizontal ? 80 : 48)))));\n  const vMin = ticks[0];\n  const vMax = ticks[ticks.length - 1];\n\n  const xNames = rows.map((r) => formatX(r?.[x], r));\n  const tickNames = ticks.map((t) => axisFormat(t));\n\n  // BarChart's value labels: one at the outer end of every bar, or of every\n  // stack (its total). [{ i, j, v, text }]; j is the series (-1: a stack).\n  const barLabels = [];\n  if (kind === \"bar\" && valueLabels && live.length) {\n    const say = (v, row, key) => (typeof valueLabels === \"function\" ? valueLabels(v, row, key) : fmt(v));\n    rows.forEach((row, i) => {\n      if (stack) {\n        const vals = live.map((s) => num(row?.[s.key])).filter((v) => v != null);\n        if (!vals.length) return;\n        const v = vals.reduce((a, b) => a + b, 0);\n        barLabels.push({ i, j: -1, v, text: say(v, row, null) });\n      } else {\n        live.forEach((s, j) => {\n          const v = num(row?.[s.key]);\n          if (v != null) barLabels.push({ i, j, v, text: say(v, row, s.key) });\n        });\n      }\n    });\n  }\n  const labelRoom = barLabels.length ? Math.max(...barLabels.map((l) => textWidth(l.text))) + 6 : 0;\n\n  // Margins from what the labels need.\n  const catW = horizontal && yAxis ? Math.min(Math.max(...xNames.map(textWidth), 24) + 8, width * 0.4) : 0;\n  const valW = !horizontal && yAxis ? Math.max(...tickNames.map(textWidth)) + 8 : 0;\n  const m = {\n    top: barLabels.length && !horizontal ? 22 : 8,\n    right: horizontal ? Math.max(8, textWidth(tickNames[tickNames.length - 1]) / 2, labelRoom) : 8,\n    bottom: xAxis ? 24 : 4,\n    left: horizontal ? catW : valW,\n  };\n  // Points sit on the plot's edges (bars sit inside their band), so the\n  // first and last x labels, centred on them, need room outside it.\n  if (kind !== \"bar\" && xAxis && rows.length) {\n    m.left = Math.max(m.left, textWidth(xNames[0]) / 2);\n    m.right = Math.max(m.right, textWidth(xNames[xNames.length - 1]) / 2);\n  }\n  const plotW = Math.max(0, width - m.left - m.right);\n  const plotH = Math.max(0, height - m.top - m.bottom);\n  const n = rows.length;\n\n  // Value → pixel along the value axis; index → pixel along the category axis.\n  const vPos = (v) => (horizontal ? m.left + ((v - vMin) / (vMax - vMin || 1)) * plotW : m.top + plotH - ((v - vMin) / (vMax - vMin || 1)) * plotH);\n  const band = (horizontal ? plotH : plotW) / Math.max(1, n);\n  const cPos =\n    kind === \"bar\"\n      ? (i) => (horizontal ? m.top : m.left) + band * (i + 0.5)\n      : (i) => m.left + (n === 1 ? plotW / 2 : (i * plotW) / (n - 1));\n  const zero = vPos(Math.max(vMin, Math.min(0, vMax)));\n\n  // Category labels thinned so they never collide.\n  const labelEvery = horizontal\n    ? Math.max(1, Math.ceil(16 / Math.max(1, band)))\n    : Math.max(1, Math.ceil((Math.max(...xNames.map(textWidth), 0) + 12) / Math.max(1, kind === \"bar\" ? band : plotW / Math.max(1, n - 1))));\n\n  function indexAt(e) {\n    const rect = e.currentTarget.getBoundingClientRect();\n    const p = horizontal ? e.clientY - rect.top : e.clientX - rect.left;\n    if (kind === \"bar\") return Math.max(0, Math.min(n - 1, Math.floor((p - (horizontal ? m.top : m.left)) / band)));\n    if (n === 1) return 0;\n    return Math.max(0, Math.min(n - 1, Math.round(((p - m.left) / plotW) * (n - 1))));\n  }\n\n  function onKeyDown(e) {\n    if (!n) return;\n    const back = horizontal ? \"ArrowUp\" : \"ArrowLeft\";\n    const fwd = horizontal ? \"ArrowDown\" : \"ArrowRight\";\n    let next = null;\n    if (e.key === fwd || e.key === (horizontal ? \"ArrowRight\" : \"ArrowDown\")) next = active == null ? 0 : Math.min(n - 1, active + 1);\n    else if (e.key === back || e.key === (horizontal ? \"ArrowLeft\" : \"ArrowUp\")) next = active == null ? n - 1 : Math.max(0, active - 1);\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = n - 1;\n    else if (e.key === \"Escape\") {\n      setActive(null);\n      return;\n    } else if ((e.key === \"Enter\" || e.key === \" \") && onSelect && active != null) {\n      e.preventDefault();\n      onSelect(rows[active], active);\n      return;\n    }\n    if (next == null) return;\n    e.preventDefault();\n    setKeyed(true);\n    setActive(next);\n  }\n\n  // ---- words -------------------------------------------------------------------\n\n  const summary = useMemo(() => {\n    if (!n || !live.length) return \"\";\n    const parts = live.map((s) => {\n      const vals = rows.map((r) => num(r?.[s.key]));\n      const idx = vals.reduce((best, v, i) => (v != null && (best < 0 || v > vals[best]) ? i : best), -1);\n      if (idx < 0) return `${s.label}: no data`;\n      const first = vals.find((v) => v != null);\n      const last = [...vals].reverse().find((v) => v != null);\n      return `${s.label}: ${kind === \"bar\" ? \"\" : `from ${fmt(first)} to ${fmt(last)}, `}highest ${fmt(vals[idx])} at ${xNames[idx]}`;\n    });\n    return `${n} ${n === 1 ? \"point\" : \"points\"}, ${xNames[0]} to ${xNames[n - 1]}. ${parts.join(\"; \")}.`;\n  }, [rows, live, n]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const tipRows =\n    active == null\n      ? []\n      : live.map((s) => ({ key: s.key, label: s.label, tone: s.tone, dashed: s.dashed, value: fmt(num(rows[active]?.[s.key])) }));\n  // The stack's total: what there is, or none (—) when every value is missing.\n  const total =\n    active == null\n      ? null\n      : live.reduce((sum, s) => {\n          const v = num(rows[active]?.[s.key]);\n          return v == null ? sum : (sum ?? 0) + v;\n        }, null);\n  const announce = active == null ? \"\" : `${xNames[active]}: ${tipRows.map((r) => `${r.label} ${r.value}`).join(\", \")}`;\n\n  const legendNode = showLegend ? (\n    <ChartLegend\n      items={all}\n      hidden={hidden}\n      onToggle={(key) =>\n        setHidden((h) => {\n          const next = new Set(h);\n          if (next.has(key)) next.delete(key);\n          else next.add(key);\n          return next;\n        })\n      }\n      label={`${label}: series`}\n    />\n  ) : null;\n\n  if (!n) {\n    return (\n      <div className={cx(\"grid gap-3\", className)}>\n        <ChartEmpty height={height} title={emptyLabel} body={emptyBody} />\n      </div>\n    );\n  }\n\n  // ---- marks -------------------------------------------------------------------\n\n  const tipAt =\n    active == null || !tooltip\n      ? null\n      : horizontal\n        ? { x: Math.min(width - 12, Math.max(...live.map((_, k) => vPos(spans[k][active]?.[1] ?? 0)), zero)), y: cPos(active), flip: false, middle: true }\n        : { x: cPos(active), y: m.top, flip: cPos(active) > width / 2 };\n  if (tipAt && horizontal) tipAt.flip = tipAt.x > width * 0.6;\n\n  const revealStyle = (axis) => ({\n    transform: shown ? \"none\" : axis === \"x\" ? \"scaleX(0)\" : \"scaleY(0)\",\n    transformOrigin: axis === \"x\" ? `${zero}px 0` : `0 ${zero}px`,\n  });\n\n  let marks = null;\n  if (kind === \"bar\") {\n    const k = live.length;\n    const groupW = Math.min(band * (stack ? 0.62 : 0.8), stack ? 56 : 28 * Math.max(1, k) + 4 * (k - 1));\n    const gap = k > 1 && !stack ? Math.min(4, groupW * 0.06) : 0;\n    const barW = stack ? groupW : Math.max(1, (groupW - gap * (k - 1)) / Math.max(1, k));\n    const r = Math.min(4, barW / 3);\n    // Which series ends each stack (its outer end is the rounded one).\n    const outer = rows.map((_, i) => {\n      let top = -1;\n      let bottom = -1;\n      live.forEach((s, j) => {\n        const p = spans[j][i];\n        if (!p || p[1] === p[0]) return;\n        if (p[1] > p[0]) top = j;\n        else bottom = j;\n      });\n      return { top, bottom };\n    });\n    // Where the stacked total ends: the far end of the stack on its side.\n    const stackEnd = (i, v) => {\n      let end = 0;\n      live.forEach((_, j) => {\n        const p = spans[j][i];\n        if (p) end = v >= 0 ? Math.max(end, p[1]) : Math.min(end, p[1]);\n      });\n      return end;\n    };\n    const tracks = track ? (\n      <g aria-hidden=\"true\" className=\"fill-accent\">\n        {rows.map((_, i) => {\n          const c = cPos(i) - groupW / 2;\n          return horizontal ? (\n            <rect key={i} x={m.left} y={c} width={plotW} height={groupW} rx={r} />\n          ) : (\n            <rect key={i} x={c} y={m.top} width={groupW} height={plotH} rx={r} />\n          );\n        })}\n      </g>\n    ) : null;\n    const labels = barLabels.length ? (\n      <g\n        aria-hidden=\"true\"\n        className=\"fill-foreground text-2xs font-medium motion-safe:transition-opacity motion-safe:duration-500\"\n        style={{ opacity: shown ? 1 : 0 }}\n        data-nums\n      >\n        {barLabels.map(({ i, j, v, text }) => {\n          const end = vPos(j < 0 ? stackEnd(i, v) : v);\n          const c = cPos(i) + (j < 0 ? 0 : -groupW / 2 + j * (barW + gap) + barW / 2);\n          const up = v >= 0;\n          return horizontal ? (\n            <text key={`${i}-${j}`} x={end + (up ? 6 : -6)} y={c} dy=\"0.32em\" textAnchor={up ? \"start\" : \"end\"}>\n              {text}\n            </text>\n          ) : (\n            <text key={`${i}-${j}`} x={c} y={end + (up ? -6 : 12)} textAnchor=\"middle\">\n              {text}\n            </text>\n          );\n        })}\n      </g>\n    ) : null;\n    marks = (\n      <>\n        {tracks}\n        <g style={revealStyle(horizontal ? \"x\" : \"y\")} className=\"motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-out\">\n          {live.map((s, j) => (\n            <g key={s.key} className={tone(s.tone, \"fill\")}>\n              {rows.map((_, i) => {\n                const p = spans[j][i];\n                if (!p || p[0] === p[1]) return null;\n                const a = vPos(p[0]);\n                const b = vPos(p[1]);\n                const offset = stack ? -groupW / 2 : -groupW / 2 + j * (barW + gap);\n                const c = cPos(i) + offset;\n                const positive = p[1] > p[0];\n                const isOuter = !stack || (positive ? outer[i].top === j : outer[i].bottom === j);\n                const side = !isOuter ? null : horizontal ? (positive ? \"right\" : \"left\") : positive ? \"top\" : \"bottom\";\n                const d = horizontal\n                  ? barPath(Math.min(a, b), c, Math.abs(b - a), barW, r, side)\n                  : barPath(c, Math.min(a, b), barW, Math.abs(b - a), r, side);\n                return <path key={i} d={d} className={cx(active != null && active !== i && \"opacity-60\", \"motion-safe:transition-opacity\")} />;\n              })}\n            </g>\n          ))}\n        </g>\n        {labels}\n      </>\n    );\n  } else {\n    const clip = `${uid}-clip`;\n    const fade = `${uid}-fade`;\n    marks = (\n      <>\n        <defs>\n          <clipPath id={clip}>\n            <rect\n              x={m.left - 4}\n              y={0}\n              width={plotW + 8}\n              height={height}\n              style={{ transform: shown ? \"none\" : \"scaleX(0)\", transformOrigin: `${m.left}px 0` }}\n              className=\"motion-safe:transition-transform motion-safe:duration-700 motion-safe:ease-out\"\n            />\n          </clipPath>\n          {/* An alpha mask, not a colour: the area fades toward zero. */}\n          <linearGradient id={`${fade}-g`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0\" stopOpacity=\"1\" />\n            <stop offset=\"1\" stopOpacity=\"0.15\" />\n          </linearGradient>\n          <mask id={fade} style={{ maskType: \"alpha\" }} maskUnits=\"userSpaceOnUse\" x={0} y={0} width={width} height={height}>\n            <rect x={0} y={m.top} width={width} height={plotH} fill={`url(#${fade}-g)`} />\n          </mask>\n        </defs>\n        <g clipPath={`url(#${clip})`}>\n          {kind === \"area\"\n            ? order.map((j) => {\n                const s = live[j];\n                // A dashed series is a line only: a comparison has no fill.\n                if (s.dashed && !stack) return null;\n                // One band per run of values: an area breaks where a value\n                // is missing, as its line does — never down to zero.\n                const d = runs(spans[j].map((p, i) => (p ? { x: cPos(i), top: vPos(p[1]), base: vPos(p[0]) } : null)))\n                  .filter((run) => run.length > 1)\n                  .map((run) => {\n                    const back = curvePath(run.map((q) => [q.x, q.base]).reverse(), curve).replace(/^M/, \"L\");\n                    return `${curvePath(run.map((q) => [q.x, q.top]), curve)}${back}Z`;\n                  })\n                  .join(\"\");\n                if (!d) return null;\n                return (\n                  <path\n                    key={s.key}\n                    d={d}\n                    className={tone(s.tone, \"fill\")}\n                    fillOpacity={stack ? 0.4 : s.muted ? 0.2 : 0.45}\n                    mask={stack ? undefined : `url(#${fade})`}\n                  />\n                );\n              })\n            : null}\n          {order.map((j) => {\n            const s = live[j];\n            // A line (and an area's edge) breaks where a value is missing;\n            // a value alone between two gaps is a dot, so it still shows.\n            const segs = runs(spans[j].map((p, i) => (p ? [cPos(i), vPos(p[1])] : null)));\n            return (\n              <g\n                key={s.key}\n                className={tone(s.tone, \"stroke\")}\n                fill=\"none\"\n                strokeWidth={s.muted ? 1.5 : 2}\n                strokeDasharray={s.dashed ? \"5 4\" : undefined}\n                strokeLinejoin=\"round\"\n                strokeLinecap={s.dashed ? \"butt\" : \"round\"}\n              >\n                {segs.map((seg, k) =>\n                  seg.length > 1 ? (\n                    <path key={k} d={curvePath(seg, curve)} />\n                  ) : dots ? null : (\n                    <circle key={k} cx={seg[0][0]} cy={seg[0][1]} r={3} className={cx(tone(s.tone, \"fill\"), \"stroke-card\")} strokeWidth={1.5} strokeDasharray=\"none\" />\n                  ),\n                )}\n                {dots\n                  ? spans[j].map((p, i) =>\n                      p ? <circle key={i} cx={cPos(i)} cy={vPos(p[1])} r={3} className={cx(tone(s.tone, \"fill\"), \"stroke-card\")} strokeWidth={1.5} strokeDasharray=\"none\" /> : null,\n                    )\n                  : null}\n              </g>\n            );\n          })}\n        </g>\n      </>\n    );\n  }\n\n  const cursor =\n    active == null\n      ? null\n      : kind === \"bar\"\n        ? horizontal\n          ? <rect x={m.left} y={m.top + band * active} width={plotW} height={band} className=\"fill-muted\" />\n          : <rect x={m.left + band * active} y={m.top} width={band} height={plotH} className=\"fill-muted\" />\n        : <line x1={cPos(active)} x2={cPos(active)} y1={m.top} y2={m.top + plotH} className=\"stroke-muted-foreground\" strokeDasharray=\"3 3\" strokeWidth={1} />;\n\n  const activeDots =\n    active == null || kind === \"bar\"\n      ? null\n      : live.map((s, j) => {\n          const p = spans[j][active];\n          if (!p) return null;\n          return <circle key={s.key} cx={cPos(active)} cy={vPos(p[1])} r={4.5} className={cx(tone(s.tone, \"fill\"), \"stroke-card\")} strokeWidth={2} />;\n        });\n\n  return (\n    <div className={cx(\"grid min-w-0 gap-3\", className)}>\n      <div\n        ref={boxRef}\n        tabIndex={0}\n        role=\"group\"\n        aria-label={`${label}. Arrow keys read each value.`}\n        onKeyDown={onKeyDown}\n        onFocus={(e) => {\n          if (e.currentTarget.matches(\":focus-visible\") && active == null) {\n            setKeyed(true);\n            setActive(0);\n          }\n        }}\n        onBlur={() => {\n          setKeyed(false);\n          setActive(null);\n        }}\n        className=\"relative min-w-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        style={{ height }}\n      >\n        {width > 0 ? (\n          <svg\n            role=\"img\"\n            aria-label={`${label}. ${description ?? summary}`}\n            width={width}\n            height={height}\n            viewBox={`0 0 ${width} ${height}`}\n            className={cx(\"block touch-pan-y select-none overflow-visible\", onSelect && \"cursor-pointer\")}\n            onPointerMove={(e) => {\n              setKeyed(false);\n              setActive(indexAt(e));\n            }}\n            onPointerDown={(e) => setActive(indexAt(e))}\n            onPointerLeave={() => !keyed && setActive(null)}\n            onClick={(e) => onSelect?.(rows[indexAt(e)], indexAt(e))}\n          >\n            {/* raw: an SVG drawing — no kit part draws a chart. */}\n            {cursor}\n            {grid\n              ? ticks.map((t) => {\n                  const p = f(vPos(t));\n                  return horizontal ? (\n                    <line key={t} x1={p} x2={p} y1={m.top} y2={m.top + plotH} className=\"stroke-border\" strokeDasharray={t === 0 ? undefined : \"3 3\"} />\n                  ) : (\n                    <line key={t} x1={m.left} x2={m.left + plotW} y1={p} y2={p} className=\"stroke-border\" strokeDasharray={t === 0 ? undefined : \"3 3\"} />\n                  );\n                })\n              : null}\n            {marks}\n            {activeDots}\n            <g aria-hidden=\"true\" className=\"fill-muted-foreground text-2xs\" data-nums>\n              {/* The value axis. */}\n              {(horizontal ? xAxis : yAxis)\n                ? ticks.map((t, i) =>\n                    horizontal ? (\n                      <text key={t} x={vPos(t)} y={height - 6} textAnchor=\"middle\">\n                        {tickNames[i]}\n                      </text>\n                    ) : (\n                      <text key={t} x={m.left - 8} y={vPos(t)} dy=\"0.32em\" textAnchor=\"end\">\n                        {tickNames[i]}\n                      </text>\n                    ),\n                  )\n                : null}\n              {/* The category axis. */}\n              {(horizontal ? yAxis : xAxis)\n                ? xNames.map((name, i) => {\n                    if (i % labelEvery !== 0) return null;\n                    if (horizontal) {\n                      return (\n                        <text key={i} x={m.left - 8} y={cPos(i)} dy=\"0.32em\" textAnchor=\"end\">\n                          {name}\n                        </text>\n                      );\n                    }\n                    return (\n                      <text key={i} x={cPos(i)} y={height - 6} textAnchor=\"middle\">\n                        {name}\n                      </text>\n                    );\n                  })\n                : null}\n            </g>\n          </svg>\n        ) : null}\n        {tipAt ? (\n          <TooltipBox\n            at={tipAt}\n            title={xNames[active]}\n            rows={tipRows}\n            footer={stack && live.length > 1 ? { label: \"Total\", value: fmt(total) } : null}\n          />\n        ) : null}\n        <div className=\"sr-only\" aria-live=\"polite\">\n          {keyed ? announce : \"\"}\n        </div>\n      </div>\n      {live.length === 0 ? <p className=\"text-center text-xs text-muted-foreground\">Every series is hidden. Press one below to show it.</p> : null}\n      {legendNode}\n      <DataTable\n        caption={label}\n        head={[xLabel ?? humanize(x), ...all.map((s) => s.label)]}\n        body={rows.map((r, i) => [xNames[i], ...all.map((s) => fmt(num(r?.[s.key])))])}\n      />\n    </div>\n  );\n}\n\n/** Values over an ordered x (time): lines, optionally curved or stepped. */\nexport function LineChart(props) {\n  return <Cartesian {...props} kind=\"line\" />;\n}\n\n/** Lines filled to zero; `stacked` piles the series into a total. */\nexport function AreaChart(props) {\n  return <Cartesian {...props} kind=\"area\" />;\n}\n\n/** Bars per category: grouped side by side, or `stacked`; columns\n *  (`orientation=\"vertical\"`, the default) or bars (`\"horizontal\"`). */\nexport function BarChart(props) {\n  return <Cartesian {...props} kind=\"bar\" />;\n}\n"
     },
     {
       "path": "registry/blocks/chart/pie.jsx",
       "type": "registry:component",
       "target": "@components/makersclaw/blocks/chart/pie.jsx",
-      "content": "\"use client\";\n\nimport { useMemo, useState } from \"react\";\nimport { cx } from \"../../ui\";\nimport { ChartEmpty, ChartLegend, DataTable, TooltipBox, defaultFormat, humanize, num, tone, toneOf, useReveal, useWidth } from \"./core\";\n\n// PieChart — parts of one whole, one slice per row; `donut` opens the\n// middle and writes the total (or your words) there. Pointer, touch or the\n// arrow keys pick a slice: it lifts, and the tooltip gives its value and\n// share. The legend hides a slice and the rest re-share the whole.\n\nconst TAU = Math.PI * 2;\n\nfunction point(cx0, cy0, r, a) {\n  return [cx0 + r * Math.cos(a), cy0 + r * Math.sin(a)];\n}\n\nconst f = (n) => Math.round(n * 100) / 100;\n\nfunction slicePath(c, r, inner, a0, a1) {\n  // A whole circle cannot be one arc: draw it as two halves.\n  if (a1 - a0 >= TAU - 1e-6) {\n    const mid = a0 + Math.PI;\n    return slicePath(c, r, inner, a0, mid) + slicePath(c, r, inner, mid, a1);\n  }\n  const large = a1 - a0 > Math.PI ? 1 : 0;\n  const [x0, y0] = point(c.x, c.y, r, a0);\n  const [x1, y1] = point(c.x, c.y, r, a1);\n  if (!inner) return `M${f(c.x)},${f(c.y)}L${f(x0)},${f(y0)}A${f(r)},${f(r)} 0 ${large} 1 ${f(x1)},${f(y1)}Z`;\n  const [x2, y2] = point(c.x, c.y, inner, a1);\n  const [x3, y3] = point(c.x, c.y, inner, a0);\n  return `M${f(x0)},${f(y0)}A${f(r)},${f(r)} 0 ${large} 1 ${f(x1)},${f(y1)}L${f(x2)},${f(y2)}A${f(inner)},${f(inner)} 0 ${large} 0 ${f(x3)},${f(y3)}Z`;\n}\n\nexport function PieChart({\n  data,\n  value = \"value\",\n  name = \"name\",\n  format = defaultFormat,\n  formatName = (v) => (v == null ? \"\" : String(v)),\n  label = \"Chart\",\n  description,\n  height = 240,\n  donut = false,\n  centerLabel,\n  totalLabel = \"Total\",\n  legend = true,\n  legendValues = \"percent\",\n  tooltip = true,\n  onSelect,\n  emptyLabel = \"No data yet\",\n  emptyBody,\n  className,\n}) {\n  const [boxRef, width] = useWidth();\n  const [hidden, setHidden] = useState(() => new Set());\n  const [active, setActive] = useState(null);\n  const [keyed, setKeyed] = useState(false);\n  const shown = useReveal(width > 0);\n\n  const rows = Array.isArray(data) ? data : [];\n  const slices = useMemo(\n    () =>\n      rows.map((r, i) => ({\n        row: r,\n        key: String(r?.[name] ?? i),\n        label: formatName(r?.[name], r) || humanize(r?.[name]),\n        tone: toneOf(r, i),\n        value: Math.max(0, num(r?.[value]) ?? 0),\n      })),\n    [rows, name, value], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n  const live = slices.filter((s) => !hidden.has(s.key) && s.value > 0);\n  const total = live.reduce((sum, s) => sum + s.value, 0);\n  const pct = (v) => (total ? `${Math.round((v / total) * 1000) / 10}%` : \"0%\");\n\n  const size = Math.max(0, Math.min(width, height));\n  const c = { x: width / 2, y: height / 2 };\n  const r = Math.max(0, size / 2 - 6);\n  const inner = donut ? r * 0.62 : 0;\n\n  let a = -Math.PI / 2;\n  const arcs = live.map((s) => {\n    const span = total ? (s.value / total) * TAU : 0;\n    // A gap between slices by angle, not a stroke: no guess at the colour\n    // of whatever the chart sits on.\n    const pad = live.length > 1 ? Math.min(0.012, span / 4) : 0;\n    const out = { ...s, a0: a, a1: a + span, pad };\n    a += span;\n    return out;\n  });\n\n  function onKeyDown(e) {\n    if (!arcs.length) return;\n    let next = null;\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") next = active == null ? 0 : (active + 1) % arcs.length;\n    else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") next = active == null ? arcs.length - 1 : (active - 1 + arcs.length) % arcs.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = arcs.length - 1;\n    else if (e.key === \"Escape\") return setActive(null);\n    else if ((e.key === \"Enter\" || e.key === \" \") && onSelect && active != null) {\n      e.preventDefault();\n      onSelect(arcs[active].row, active);\n      return;\n    }\n    if (next == null) return;\n    e.preventDefault();\n    setKeyed(true);\n    setActive(next);\n  }\n\n  const summary = arcs.length\n    ? `${arcs.length} parts of ${format(total)}: ${arcs\n        .slice()\n        .sort((p, q) => q.value - p.value)\n        .map((s) => `${s.label} ${format(s.value)} (${pct(s.value)})`)\n        .join(\", \")}.`\n    : \"\";\n\n  const legendNode = legend ? (\n    <ChartLegend\n      items={slices.map((s) => ({\n        key: s.key,\n        label: s.label,\n        tone: s.tone,\n        value: hidden.has(s.key) ? null : legendValues === \"value\" ? format(s.value) : legendValues === \"percent\" ? pct(s.value) : null,\n      }))}\n      hidden={hidden}\n      onToggle={(key) => {\n        setActive(null);\n        setHidden((h) => {\n          const next = new Set(h);\n          if (next.has(key)) next.delete(key);\n          else next.add(key);\n          return next;\n        });\n      }}\n      label={`${label}: parts`}\n    />\n  ) : null;\n\n  if (!rows.length) {\n    return (\n      <div className={cx(\"grid gap-3\", className)}>\n        <ChartEmpty height={height} title={emptyLabel} body={emptyBody} />\n      </div>\n    );\n  }\n\n  const hit = active != null ? arcs[active] : null;\n  let tipAt = null;\n  // A donut says it in its middle; a pie needs the box.\n  if (hit && tooltip && !donut) {\n    const mid = (hit.a0 + hit.a1) / 2;\n    const [tx, ty] = point(c.x, c.y, (r + inner) / 2 + (donut ? 0 : r * 0.15), mid);\n    tipAt = { x: tx, y: ty, flip: tx > c.x, middle: true };\n  }\n  const centre =\n    centerLabel !== undefined\n      ? typeof centerLabel === \"object\" && centerLabel !== null && !(\"$$typeof\" in centerLabel)\n        ? centerLabel\n        : { value: centerLabel }\n      : { value: format(total), label: totalLabel };\n\n  return (\n    <div className={cx(\"grid min-w-0 gap-3\", className)}>\n      <div\n        ref={boxRef}\n        tabIndex={0}\n        role=\"group\"\n        aria-label={`${label}. Arrow keys read each part.`}\n        onKeyDown={onKeyDown}\n        onFocus={(e) => {\n          if (e.currentTarget.matches(\":focus-visible\") && active == null && arcs.length) {\n            setKeyed(true);\n            setActive(0);\n          }\n        }}\n        onBlur={() => {\n          setKeyed(false);\n          setActive(null);\n        }}\n        className=\"relative min-w-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        style={{ height }}\n      >\n        {width > 0 ? (\n          <svg\n            role=\"img\"\n            aria-label={`${label}. ${description ?? summary}`}\n            width={width}\n            height={height}\n            viewBox={`0 0 ${width} ${height}`}\n            className={cx(\"block touch-pan-y select-none\", onSelect && \"cursor-pointer\")}\n            onPointerLeave={() => !keyed && setActive(null)}\n          >\n            {/* raw: an SVG drawing — no kit part draws a chart. */}\n            {arcs.length === 0 ? (\n              <circle cx={c.x} cy={c.y} r={r} className=\"fill-muted\" />\n            ) : null}\n            <g\n              style={{ transform: shown ? \"none\" : \"rotate(-60deg) scale(0.9)\", transformOrigin: `${c.x}px ${c.y}px`, opacity: shown ? 1 : 0 }}\n              className=\"motion-safe:transition-all motion-safe:duration-700 motion-safe:ease-out\"\n            >\n              {arcs.map((s, i) => (\n                <path\n                  key={s.key}\n                  d={slicePath(c, active === i ? r + 4 : r, inner, s.a0 + s.pad, s.a1 - s.pad)}\n                  className={cx(tone(s.tone, \"fill\"), active != null && active !== i && \"opacity-60\", \"motion-safe:transition-opacity\")}\n                  onPointerEnter={() => {\n                    setKeyed(false);\n                    setActive(i);\n                  }}\n                  onPointerDown={() => setActive(i)}\n                  onClick={() => onSelect?.(s.row, i)}\n                />\n              ))}\n            </g>\n            {donut && centre ? (\n              <g aria-hidden=\"true\" textAnchor=\"middle\">\n                <text x={c.x} y={c.y} dy={centre.label ? \"-0.1em\" : \"0.35em\"} className=\"fill-foreground text-2xl font-semibold\" data-nums>\n                  {hit ? format(hit.value) : centre.value}\n                </text>\n                {centre.label || hit ? (\n                  <text x={c.x} y={c.y} dy=\"1.6em\" className=\"fill-muted-foreground text-xs\">\n                    {hit ? `${hit.label} · ${pct(hit.value)}` : centre.label}\n                  </text>\n                ) : null}\n              </g>\n            ) : null}\n          </svg>\n        ) : null}\n        {tipAt ? <TooltipBox at={tipAt} title={hit.label} rows={[{ key: hit.key, label: pct(hit.value), tone: hit.tone, value: format(hit.value) }]} /> : null}\n        <div className=\"sr-only\" aria-live=\"polite\">\n          {keyed && hit ? `${hit.label}: ${format(hit.value)}, ${pct(hit.value)}` : \"\"}\n        </div>\n      </div>\n      {legendNode}\n      <DataTable\n        caption={label}\n        head={[\"\", \"Value\", \"Share\"]}\n        body={slices.map((s) => [s.label, format(s.value), hidden.has(s.key) ? \"hidden\" : pct(s.value)])}\n      />\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useMemo, useState } from \"react\";\nimport { cx } from \"../../ui\";\nimport { ChartEmpty, ChartLegend, DataTable, TooltipBox, defaultFormat, humanize, num, tone, toneOf, useReveal, useWidth } from \"./core\";\n\n// PieChart — parts of one whole, one slice per row; `donut` opens the\n// middle and writes the total (or your words) there. Pointer, touch or the\n// arrow keys pick a slice: it lifts, and the tooltip gives its value and\n// share. The legend hides a slice and the rest re-share the whole.\n\nconst TAU = Math.PI * 2;\n\nfunction point(cx0, cy0, r, a) {\n  return [cx0 + r * Math.cos(a), cy0 + r * Math.sin(a)];\n}\n\nconst f = (n) => Math.round(n * 100) / 100;\n\nfunction slicePath(c, r, inner, a0, a1) {\n  // A whole circle cannot be one arc: draw it as two halves.\n  if (a1 - a0 >= TAU - 1e-6) {\n    const mid = a0 + Math.PI;\n    return slicePath(c, r, inner, a0, mid) + slicePath(c, r, inner, mid, a1);\n  }\n  const large = a1 - a0 > Math.PI ? 1 : 0;\n  const [x0, y0] = point(c.x, c.y, r, a0);\n  const [x1, y1] = point(c.x, c.y, r, a1);\n  if (!inner) return `M${f(c.x)},${f(c.y)}L${f(x0)},${f(y0)}A${f(r)},${f(r)} 0 ${large} 1 ${f(x1)},${f(y1)}Z`;\n  const [x2, y2] = point(c.x, c.y, inner, a1);\n  const [x3, y3] = point(c.x, c.y, inner, a0);\n  return `M${f(x0)},${f(y0)}A${f(r)},${f(r)} 0 ${large} 1 ${f(x1)},${f(y1)}L${f(x2)},${f(y2)}A${f(inner)},${f(inner)} 0 ${large} 0 ${f(x3)},${f(y3)}Z`;\n}\n\nexport function PieChart({\n  data,\n  value = \"value\",\n  name = \"name\",\n  format = defaultFormat,\n  formatName = (v) => (v == null ? \"\" : String(v)),\n  label = \"Chart\",\n  description,\n  height = 240,\n  donut = false,\n  centerLabel,\n  totalLabel = \"Total\",\n  legend = true,\n  legendValues = \"percent\",\n  tooltip = true,\n  onSelect,\n  emptyLabel = \"No data yet\",\n  emptyBody,\n  className,\n}) {\n  const [boxRef, width] = useWidth();\n  const [hidden, setHidden] = useState(() => new Set());\n  const [active, setActive] = useState(null);\n  const [keyed, setKeyed] = useState(false);\n  const shown = useReveal(width > 0);\n\n  const rows = Array.isArray(data) ? data : [];\n  const slices = useMemo(\n    () =>\n      rows.map((r, i) => {\n        const v = num(r?.[value]);\n        return {\n          row: r,\n          key: String(r?.[name] ?? i),\n          label: formatName(r?.[name], r) || humanize(r?.[name]),\n          tone: toneOf(r, i),\n          // A missing value is no slice and reads —, never 0 or 0%.\n          value: v == null ? null : Math.max(0, v),\n        };\n      }),\n    [rows, name, value], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n  const live = slices.filter((s) => !hidden.has(s.key) && s.value > 0);\n  const total = live.reduce((sum, s) => sum + s.value, 0);\n  const pct = (v) => (v == null ? \"—\" : total ? `${Math.round((v / total) * 1000) / 10}%` : \"0%\");\n  const fmt = (v) => (v == null ? \"—\" : format(v));\n\n  const size = Math.max(0, Math.min(width, height));\n  const c = { x: width / 2, y: height / 2 };\n  const r = Math.max(0, size / 2 - 6);\n  const inner = donut ? r * 0.62 : 0;\n\n  let a = -Math.PI / 2;\n  const arcs = live.map((s) => {\n    const span = total ? (s.value / total) * TAU : 0;\n    // A gap between slices by angle, not a stroke: no guess at the colour\n    // of whatever the chart sits on.\n    const pad = live.length > 1 ? Math.min(0.012, span / 4) : 0;\n    const out = { ...s, a0: a, a1: a + span, pad };\n    a += span;\n    return out;\n  });\n\n  function onKeyDown(e) {\n    if (!arcs.length) return;\n    let next = null;\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") next = active == null ? 0 : (active + 1) % arcs.length;\n    else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") next = active == null ? arcs.length - 1 : (active - 1 + arcs.length) % arcs.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = arcs.length - 1;\n    else if (e.key === \"Escape\") return setActive(null);\n    else if ((e.key === \"Enter\" || e.key === \" \") && onSelect && active != null) {\n      e.preventDefault();\n      onSelect(arcs[active].row, active);\n      return;\n    }\n    if (next == null) return;\n    e.preventDefault();\n    setKeyed(true);\n    setActive(next);\n  }\n\n  const summary = arcs.length\n    ? `${arcs.length} parts of ${format(total)}: ${arcs\n        .slice()\n        .sort((p, q) => q.value - p.value)\n        .map((s) => `${s.label} ${format(s.value)} (${pct(s.value)})`)\n        .join(\", \")}.`\n    : \"\";\n\n  const legendNode = legend ? (\n    <ChartLegend\n      items={slices.map((s) => ({\n        key: s.key,\n        label: s.label,\n        tone: s.tone,\n        value: hidden.has(s.key) ? null : legendValues === \"value\" ? fmt(s.value) : legendValues === \"percent\" ? pct(s.value) : null,\n      }))}\n      hidden={hidden}\n      onToggle={(key) => {\n        setActive(null);\n        setHidden((h) => {\n          const next = new Set(h);\n          if (next.has(key)) next.delete(key);\n          else next.add(key);\n          return next;\n        });\n      }}\n      label={`${label}: parts`}\n    />\n  ) : null;\n\n  if (!rows.length) {\n    return (\n      <div className={cx(\"grid gap-3\", className)}>\n        <ChartEmpty height={height} title={emptyLabel} body={emptyBody} />\n      </div>\n    );\n  }\n\n  const hit = active != null ? arcs[active] : null;\n  let tipAt = null;\n  // A donut says it in its middle; a pie needs the box.\n  if (hit && tooltip && !donut) {\n    const mid = (hit.a0 + hit.a1) / 2;\n    const [tx, ty] = point(c.x, c.y, (r + inner) / 2 + (donut ? 0 : r * 0.15), mid);\n    tipAt = { x: tx, y: ty, flip: tx > c.x, middle: true };\n  }\n  const centre =\n    centerLabel !== undefined\n      ? typeof centerLabel === \"object\" && centerLabel !== null && !(\"$$typeof\" in centerLabel)\n        ? centerLabel\n        : { value: centerLabel }\n      : { value: format(total), label: totalLabel };\n\n  return (\n    <div className={cx(\"grid min-w-0 gap-3\", className)}>\n      <div\n        ref={boxRef}\n        tabIndex={0}\n        role=\"group\"\n        aria-label={`${label}. Arrow keys read each part.`}\n        onKeyDown={onKeyDown}\n        onFocus={(e) => {\n          if (e.currentTarget.matches(\":focus-visible\") && active == null && arcs.length) {\n            setKeyed(true);\n            setActive(0);\n          }\n        }}\n        onBlur={() => {\n          setKeyed(false);\n          setActive(null);\n        }}\n        className=\"relative min-w-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        style={{ height }}\n      >\n        {width > 0 ? (\n          <svg\n            role=\"img\"\n            aria-label={`${label}. ${description ?? summary}`}\n            width={width}\n            height={height}\n            viewBox={`0 0 ${width} ${height}`}\n            className={cx(\"block touch-pan-y select-none\", onSelect && \"cursor-pointer\")}\n            onPointerLeave={() => !keyed && setActive(null)}\n          >\n            {/* raw: an SVG drawing — no kit part draws a chart. */}\n            {arcs.length === 0 ? (\n              <circle cx={c.x} cy={c.y} r={r} className=\"fill-muted\" />\n            ) : null}\n            <g\n              style={{ transform: shown ? \"none\" : \"rotate(-60deg) scale(0.9)\", transformOrigin: `${c.x}px ${c.y}px`, opacity: shown ? 1 : 0 }}\n              className=\"motion-safe:transition-all motion-safe:duration-700 motion-safe:ease-out\"\n            >\n              {arcs.map((s, i) => (\n                <path\n                  key={s.key}\n                  d={slicePath(c, active === i ? r + 4 : r, inner, s.a0 + s.pad, s.a1 - s.pad)}\n                  className={cx(tone(s.tone, \"fill\"), active != null && active !== i && \"opacity-60\", \"motion-safe:transition-opacity\")}\n                  onPointerEnter={() => {\n                    setKeyed(false);\n                    setActive(i);\n                  }}\n                  onPointerDown={() => setActive(i)}\n                  onClick={() => onSelect?.(s.row, i)}\n                />\n              ))}\n            </g>\n            {donut && centre ? (\n              <g aria-hidden=\"true\" textAnchor=\"middle\">\n                <text x={c.x} y={c.y} dy={centre.label ? \"-0.1em\" : \"0.35em\"} className=\"fill-foreground text-2xl font-semibold\" data-nums>\n                  {hit ? format(hit.value) : centre.value}\n                </text>\n                {centre.label || hit ? (\n                  <text x={c.x} y={c.y} dy=\"1.6em\" className=\"fill-muted-foreground text-xs\">\n                    {hit ? `${hit.label} · ${pct(hit.value)}` : centre.label}\n                  </text>\n                ) : null}\n              </g>\n            ) : null}\n          </svg>\n        ) : null}\n        {tipAt ? <TooltipBox at={tipAt} title={hit.label} rows={[{ key: hit.key, label: pct(hit.value), tone: hit.tone, value: format(hit.value) }]} /> : null}\n        <div className=\"sr-only\" aria-live=\"polite\">\n          {keyed && hit ? `${hit.label}: ${format(hit.value)}, ${pct(hit.value)}` : \"\"}\n        </div>\n      </div>\n      {legendNode}\n      <DataTable\n        caption={label}\n        head={[\"\", \"Value\", \"Share\"]}\n        body={slices.map((s) => [s.label, fmt(s.value), hidden.has(s.key) ? \"hidden\" : pct(s.value)])}\n      />\n    </div>\n  );\n}\n"
     },
     {
       "path": "registry/blocks/chart/sparkline.jsx",
       "type": "registry:component",
       "target": "@components/makersclaw/blocks/chart/sparkline.jsx",
-      "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { cx } from \"../../ui\";\nimport { defaultFormat, idFrom, num, tone, useReveal, useWidth } from \"./core\";\n\n// Sparkline — a trend with no axes, the size of a line of text: beside a\n// KPI, in a table cell. Its scale is its own low to high (not zero), so\n// the shape shows the change. A screen reader hears the first, last, low\n// and high values; there is nothing to hover.\n\nconst f = (n) => Math.round(n * 100) / 100;\n\nexport function Sparkline({\n  data,\n  value = \"value\",\n  label = \"Trend\",\n  format = defaultFormat,\n  tone: t = \"chart-1\",\n  area = true,\n  dot = true,\n  height = 36,\n  className,\n}) {\n  const uid = idFrom(useId());\n  const [boxRef, width] = useWidth();\n  const shown = useReveal(width > 0);\n\n  const vals = (Array.isArray(data) ? data : []).map((d) => num(typeof d === \"object\" && d !== null ? d[value] : d)).filter((v) => v != null);\n  const n = vals.length;\n  const lo = n ? Math.min(...vals) : 0;\n  const hi = n ? Math.max(...vals) : 0;\n  const pad = 3;\n  const px = (i) => pad + (n === 1 ? (width - pad * 2) / 2 : (i * (width - pad * 2)) / (n - 1));\n  const py = (v) => pad + (hi === lo ? (height - pad * 2) / 2 : (1 - (v - lo) / (hi - lo)) * (height - pad * 2));\n  const line = vals.map((v, i) => `${i ? \"L\" : \"M\"}${f(px(i))},${f(py(v))}`).join(\"\");\n  const words = n\n    ? `${label}: from ${format(vals[0])} to ${format(vals[n - 1])}, low ${format(lo)}, high ${format(hi)}.`\n    : `${label}: no data yet.`;\n\n  return (\n    <div ref={boxRef} className={cx(\"min-w-0\", className)} style={{ height }}>\n      {width > 0 ? (\n        <svg role=\"img\" aria-label={words} width={width} height={height} viewBox={`0 0 ${width} ${height}`} className=\"block overflow-visible\">\n          {/* raw: an SVG drawing — no kit part draws a chart. */}\n          {n === 0 ? (\n            <line x1={pad} x2={width - pad} y1={height / 2} y2={height / 2} className=\"stroke-border\" strokeDasharray=\"3 3\" />\n          ) : (\n            <>\n              <defs>\n                <clipPath id={`${uid}-clip`}>\n                  <rect\n                    x={0}\n                    y={-4}\n                    width={width + 4}\n                    height={height + 8}\n                    style={{ transform: shown ? \"none\" : \"scaleX(0)\", transformOrigin: \"0 0\" }}\n                    className=\"motion-safe:transition-transform motion-safe:duration-700 motion-safe:ease-out\"\n                  />\n                </clipPath>\n                {/* An alpha mask, not a colour: the fill fades downward. */}\n                <linearGradient id={`${uid}-g`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"0\" stopOpacity=\"1\" />\n                  <stop offset=\"1\" stopOpacity=\"0\" />\n                </linearGradient>\n                <mask id={`${uid}-fade`} style={{ maskType: \"alpha\" }} maskUnits=\"userSpaceOnUse\" x={0} y={0} width={width} height={height}>\n                  <rect x={0} y={0} width={width} height={height} fill={`url(#${uid}-g)`} />\n                </mask>\n              </defs>\n              <g clipPath={`url(#${uid}-clip)`}>\n                {area && n > 1 ? (\n                  <path\n                    d={`${line}L${f(px(n - 1))},${height}L${f(px(0))},${height}Z`}\n                    className={tone(t, \"fill\")}\n                    fillOpacity={0.3}\n                    mask={`url(#${uid}-fade)`}\n                  />\n                ) : null}\n                <path d={line} fill=\"none\" className={tone(t, \"stroke\")} strokeWidth={1.75} strokeLinejoin=\"round\" strokeLinecap=\"round\" />\n                {dot ? <circle cx={px(n - 1)} cy={py(vals[n - 1])} r={2.5} className={tone(t, \"fill\")} /> : null}\n              </g>\n            </>\n          )}\n        </svg>\n      ) : null}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { cx } from \"../../ui\";\nimport { defaultFormat, idFrom, num, runs, tone, useReveal, useWidth } from \"./core\";\n\n// Sparkline — a trend with no axes, the size of a line of text: beside a\n// KPI, in a table cell. Its scale is its own low to high (not zero), so\n// the shape shows the change. A screen reader hears the first, last, low\n// and high values; there is nothing to hover.\n\nconst f = (n) => Math.round(n * 100) / 100;\n\nexport function Sparkline({\n  data,\n  value = \"value\",\n  label = \"Trend\",\n  format = defaultFormat,\n  tone: t = \"chart-1\",\n  area = true,\n  dot = true,\n  height = 36,\n  className,\n}) {\n  const uid = idFrom(useId());\n  const [boxRef, width] = useWidth();\n  const shown = useReveal(width > 0);\n\n  // Every entry keeps its place along the width; a missing one is a gap —\n  // the line breaks there — never a zero. The scale is the values there are.\n  const raw = (Array.isArray(data) ? data : []).map((d) => num(typeof d === \"object\" && d !== null ? d[value] : d));\n  const vals = raw.filter((v) => v != null);\n  const n = vals.length;\n  const lo = n ? Math.min(...vals) : 0;\n  const hi = n ? Math.max(...vals) : 0;\n  const pad = 3;\n  const px = (i) => pad + (raw.length === 1 ? (width - pad * 2) / 2 : (i * (width - pad * 2)) / (raw.length - 1));\n  const py = (v) => pad + (hi === lo ? (height - pad * 2) / 2 : (1 - (v - lo) / (hi - lo)) * (height - pad * 2));\n  const segs = runs(raw.map((v, i) => (v == null ? null : [px(i), py(v)])));\n  const path = (seg) => seg.map(([x, y], i) => `${i ? \"L\" : \"M\"}${f(x)},${f(y)}`).join(\"\");\n  const lastSeg = segs[segs.length - 1];\n  const last = lastSeg?.[lastSeg.length - 1];\n  const words = n\n    ? `${label}: from ${format(vals[0])} to ${format(vals[n - 1])}, low ${format(lo)}, high ${format(hi)}.`\n    : `${label}: no data yet.`;\n\n  return (\n    <div ref={boxRef} className={cx(\"min-w-0\", className)} style={{ height }}>\n      {width > 0 ? (\n        <svg role=\"img\" aria-label={words} width={width} height={height} viewBox={`0 0 ${width} ${height}`} className=\"block overflow-visible\">\n          {/* raw: an SVG drawing — no kit part draws a chart. */}\n          {n === 0 ? (\n            <line x1={pad} x2={width - pad} y1={height / 2} y2={height / 2} className=\"stroke-border\" strokeDasharray=\"3 3\" />\n          ) : (\n            <>\n              <defs>\n                <clipPath id={`${uid}-clip`}>\n                  <rect\n                    x={0}\n                    y={-4}\n                    width={width + 4}\n                    height={height + 8}\n                    style={{ transform: shown ? \"none\" : \"scaleX(0)\", transformOrigin: \"0 0\" }}\n                    className=\"motion-safe:transition-transform motion-safe:duration-700 motion-safe:ease-out\"\n                  />\n                </clipPath>\n                {/* An alpha mask, not a colour: the fill fades downward. */}\n                <linearGradient id={`${uid}-g`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"0\" stopOpacity=\"1\" />\n                  <stop offset=\"1\" stopOpacity=\"0\" />\n                </linearGradient>\n                <mask id={`${uid}-fade`} style={{ maskType: \"alpha\" }} maskUnits=\"userSpaceOnUse\" x={0} y={0} width={width} height={height}>\n                  <rect x={0} y={0} width={width} height={height} fill={`url(#${uid}-g)`} />\n                </mask>\n              </defs>\n              <g clipPath={`url(#${uid}-clip)`}>\n                {area\n                  ? segs.map((seg, k) =>\n                      seg.length > 1 ? (\n                        <path\n                          key={k}\n                          d={`${path(seg)}L${f(seg[seg.length - 1][0])},${height}L${f(seg[0][0])},${height}Z`}\n                          className={tone(t, \"fill\")}\n                          fillOpacity={0.3}\n                          mask={`url(#${uid}-fade)`}\n                        />\n                      ) : null,\n                    )\n                  : null}\n                {segs.map((seg, k) =>\n                  seg.length > 1 ? (\n                    <path key={k} d={path(seg)} fill=\"none\" className={tone(t, \"stroke\")} strokeWidth={1.75} strokeLinejoin=\"round\" strokeLinecap=\"round\" />\n                  ) : dot && seg === lastSeg ? null : (\n                    // A value alone between two gaps: a dot the line's width.\n                    <circle key={k} cx={seg[0][0]} cy={seg[0][1]} r={1.75} className={tone(t, \"fill\")} />\n                  ),\n                )}\n                {dot ? <circle cx={last[0]} cy={last[1]} r={2.5} className={tone(t, \"fill\")} /> : null}\n              </g>\n            </>\n          )}\n        </svg>\n      ) : null}\n    </div>\n  );\n}\n"
     },
     {
       "path": "registry/blocks/chart/heatmap.jsx",
@@ -49,7 +49,7 @@
       "path": "registry/blocks/chart/README.md",
       "type": "registry:file",
       "target": "@components/makersclaw/blocks/chart/README.md",
-      "content": "# Chart\n\nNumbers as a shape: `LineChart`, `AreaChart` (stacked or not), `BarChart`\n(grouped or stacked, columns or bars), `PieChart` (a pie or a donut with\nthe total in its middle), `Sparkline` (a trend beside a KPI) and\n`HeatmapChart` (a grid of two dimensions, each cell shaded by its value,\nwith `ScaleLegend` as its key). Drawn in SVG (the heatmap as an HTML\ntable), no chart library, in the workspace's chart colours. Each one is as\nwide as its container and redraws when that changes. Hover, touch or the\narrow keys show a tooltip with a crosshair; the legend hides and shows a\nseries; a screen reader gets a summary and the numbers as a table; with\nreduced motion nothing animates.\n\n```jsx\nimport { AreaChart, BarChart, HeatmapChart, PieChart, Sparkline } from \"../components/blocks/chart\";   // a Makersclaw app (\"./blocks/chart\" from components/)\nimport { AreaChart, BarChart, HeatmapChart, PieChart, Sparkline } from \"@/components/makersclaw/blocks/chart\";   // a shadcn project\n```\n\nThey are client components: render them from a `\"use client\"` component,\nand load the rows in the server surface (README §4). Put a chart in a\n`Card` — the card gives the title; the chart is only the picture.\n\n## The data\n\nRows, as `loadRows` returns them. One key holds the x (a month, a stage,\na week) and each series is another key holding a number, in the order the\nx should read — sort in `loadRows`. A value that is missing or not a number\nis a gap in a line and nothing in a bar or an area.\n\n```js\n[{ month: \"Jan\", newBiz: 24600, expansion: 8100 }, { month: \"Feb\", newBiz: 26900, expansion: 8800 }]\n```\n\nA pie takes one row per slice: a key for the name, a key for the value.\n\nA heatmap takes one row per grid row: a key for the row's name and one key\nper column holding its number — a pivot, shaped in the query:\n\n```js\n[{ slot: \"9–12\", mon: 42, tue: 51, wed: 38 }, { slot: \"12–15\", mon: 18, tue: 24, wed: 65 }]\n```\n\n## Colours\n\n`series[].tone` picks a colour: `\"chart-1\"` … `\"chart-5\"` (or `1` … `5`).\nLeft out, the series take chart-1, chart-2, … in order. The chart colours\ncome from the workspace theme (`app/globals.css`, `--color-chart-N`): the\nfirst is the theme's primary, the others turn its hue so neighbours stay\napart in every theme. A series that means a status may take a theme tone\ninstead: `\"success\"`, `\"warning\"`, `\"danger\"`, `\"info\"`, `\"primary\"`,\n`\"muted\"`. In your own markup around a chart use the same classes:\n`bg-chart-1`, `text-chart-2`, `fill-chart-3`, `stroke-chart-4`.\n\n## Props\n\n### LineChart · AreaChart · BarChart\n\n- `data` — the rows. Empty (or missing) shows the empty state.\n- `x` — the key that holds each row's x, e.g. `\"month\"`.\n- `series` — what to draw, in order: `[{ key, label?, tone?, muted?,\n  dashed? }]`. `label` defaults to the key, humanised.\n  - `dashed` — LineChart and AreaChart: a dashed line with no fill under\n    it. The key and the tooltip show a dashed swatch.\n  - `muted` — drawn quieter and underneath the rest: the grey (unless it\n    has its own `tone`), a thinner line, a fainter fill. On a BarChart it\n    is only the grey.\n  - Together they are a \"previous period\" to compare against:\n\n    ```jsx\n    <LineChart\n      data={days}            // [{ day: \"Mon\", thisWeek: 42, lastWeek: 35 }, …]\n      x=\"day\"\n      series={[{ key: \"thisWeek\", label: \"This week\" }, { key: \"lastWeek\", label: \"Last week\", muted: true, dashed: true }]}\n      label=\"Signups, this week against last\"\n    />\n    ```\n- `format(value)` — how a value reads in the tooltip, the summary and the\n  table. Default: `1,250` · `48.2K`.\n- `formatAxis(value)` — how a tick reads (default `format`); give a\n  shorter one when `format` is long (`$48,200` → `$48K`).\n- `formatX(xValue, row)` — how an x reads (default: as written).\n- `label` — what the chart is, for a screen reader: `\"Revenue by month\"`.\n  Default `\"Chart\"`; always set it.\n- `description` — the sentence a screen reader hears after `label`.\n  Default: made from the data (the range, each series' first, last and\n  highest value).\n- `xLabel` — the x column's heading in the hidden table (default: the key,\n  humanised).\n- `height` — pixels, default `240`. The width is the container's.\n- `stacked` — AreaChart and BarChart: pile the series (negatives stack\n  down). The tooltip adds a total. Default `false`.\n- `orientation` — BarChart: `\"vertical\"` (columns, the default) or\n  `\"horizontal\"` (bars, categories down the left — for long names).\n- `valueLabels` — BarChart: each bar's value at its end (\"10%\"), in\n  `format`; stacked, the stack's total. `true`, or `(value, row, key)` →\n  the words (`key` is null for a total). With it the value axis is often\n  noise: `xAxis={false}` (horizontal) or `yAxis={false}`. Default `false`.\n- `track` — BarChart: a quiet full-length track behind every bar, for a\n  share or a distribution (a status's share of tickets). Pair it with\n  `grid={false}`. Default `false`.\n- `curve` — LineChart and AreaChart: `\"monotone\"` (default, smooth and\n  never overshooting), `\"linear\"` or `\"step\"`.\n- `dots` — LineChart and AreaChart: a dot on every point. Default `false`.\n- `grid` · `xAxis` · `yAxis` — gridlines and the two axes' labels. All\n  default `true`.\n- `legend` — the legend under the chart; its entries are toggles that hide\n  a series. Default: shown when there is more than one series.\n- `tooltip` — default `true`.\n- `onSelect(row, index)` — a click, a tap or Enter on a point or a bar\n  calls it: open the month, filter by the stage.\n- `emptyLabel` · `emptyBody` — what the empty state says. Default\n  `\"No data yet\"`.\n- `className` — layout around it (width, margin). Never colour.\n\n### PieChart\n\n- `data` — one row per slice.\n- `name` — the key holding a slice's name, default `\"name\"`.\n- `value` — the key holding its number, default `\"value\"`. Zero and\n  negative values draw nothing.\n- `donut` — open the middle. It shows the total, and the picked slice's\n  value and share while one is picked. Default `false`.\n- `centerLabel` — a donut's middle instead of the total: a string, or\n  `{ value, label }`.\n- `totalLabel` — the words under the total, default `\"Total\"`.\n- `format(value)` · `formatName(name, row)` · `label` · `description` ·\n  `height` · `tooltip` · `onSelect(row, index)` · `emptyLabel` ·\n  `emptyBody` · `className` — as above.\n- `legend` — default `true`; hiding a slice re-shares the rest.\n- `legendValues` — what follows each name in the legend: `\"percent\"`\n  (default), `\"value\"` or `\"none\"`.\n- A row's own `tone` colours its slice; otherwise chart-1 … chart-5 in\n  order (a sixth slice repeats chart-1 — five is the most a pie reads).\n\n### Sparkline\n\nA trend with no axes, gridlines, legend or tooltip, as wide as its box\nand `height` tall — small enough to sit under a kit `Stat` in a tile:\n\n```jsx\n<Card>\n  <Stat label=\"MRR\" value=\"$84.2k\" delta={6.1} />\n  <Sparkline data={mrr} label=\"MRR, last 12 months\" height={28} className=\"mt-2\" />\n</Card>\n```\n\n- `data` — numbers (`[12, 15, 14]`) or rows with `value`.\n- `value` — the key when `data` is rows, default `\"value\"`.\n- `label` — what it shows, e.g. `\"MRR, last 12 months\"`: a screen reader\n  hears it with the first, last, low and high values. Always set it.\n- `format(value)` — for those words.\n- `tone` — default `\"chart-1\"`.\n- `area` — the faded fill under the line, default `true`.\n- `dot` — a dot on the latest value, default `true`.\n- `height` — default `36`. The width is the container's.\n- `className` — layout. Never colour.\n\n### HeatmapChart\n\n- `data` — one row per grid row. Empty (or no `columns`) shows the empty\n  state.\n- `y` — the key holding each row's name, default `\"name\"`.\n- `columns` — the cells of a row, in order: `[\"mon\", \"tue\"]` (labels made\n  from the keys) or `[{ key: \"mon\", label: \"Mon\" }, …]`.\n- `formatY(yValue, row)` — how a row's name reads (default: as written).\n- `tone` — the ramp's colour: `\"chart-1\"` (default) … `\"chart-5\"` (or\n  `1` … `5`). One colour, light to full: a heatmap is one measure.\n- `min` · `max` — the ends of the ramp. Default: 0 (or the lowest value,\n  when negative) and the highest value. Values past them take the end\n  shades.\n- `steps` — how many shades, default `5`. Each cell takes the shade its\n  value falls in (`scaleStep`), so equal shades mean equal bands.\n- `showValues` — the number on each cell, in `format`; on dark shades it\n  is drawn in the background's colour so it stays readable. Default\n  `false` (a compact grid of colour).\n- `format(value)` — how a value reads on the cell, in the tooltip, the\n  totals and the legend. Default: `1,250` · `48.2K`.\n- `cellShape` — `\"square\"` (default, rounded) or `\"pill\"` (short and\n  fully round — the contribution grid).\n- `rowTotals` · `colTotals` — a bold Total column at the right, a bold\n  Total row at the foot (and the grand total where they meet). Missing\n  values count as nothing. Default `false`.\n- `totalLabel` — default `\"Total\"`.\n- `tooltip` — the kit `Tooltip` on hover or keyboard focus. Default `true`.\n- `formatTooltip(value, row, column)` — its words (a string); `column` is\n  `{ key, label }` and `value` is null when the cell has none. Default:\n  `\"Tue · 9–12: 51\"`. The same words name the cell to a screen reader.\n- `legend` — a `ScaleLegend` under the grid, at the right. Default `true`.\n  Set it `false` to place your own (in the card's header, say).\n- `legendLabels` — its end words, e.g. `[\"Less\", \"More\"]`; default the\n  numbers at the two ends.\n- `onSelect(row, columnKey, value)` — a click, or Enter or Space on a\n  focused cell.\n- `label` · `description` — as above; the description defaults to the\n  size, the range and the highest cell.\n- `yLabel` — the row names' heading for a screen reader (default: the key,\n  humanised).\n- `emptyLabel` · `emptyBody` · `className` — as above.\n\nThe grid is a table: a screen reader reads each cell with its row and\ncolumn. Tab lands on one cell; the arrow keys move, Home and End go to the\nrow's ends (with Ctrl or ⌘, the grid's). A grid wider than its box\nscrolls sideways inside it, and the row names stay at the left — on the\ncard's background, so put the heatmap in a `Card`.\n\n### ScaleLegend\n\nThe heatmap's key, for a legend placed yourself: `Less ▪▪▪▪▪ More`.\n\n- `min` · `max` — the ends, default `0` and `1`.\n- `steps` — the shades, default `5` (match the chart's).\n- `labels` — `[\"Less\", \"More\"]`, or leave it out for the numbers at the\n  ends, in `format`.\n- `tone` · `format` — as the chart's.\n- `shape` — `\"square\"` (default) or `\"pill\"`, as the chart's cells.\n- `label` — what a screen reader hears it called, default `\"Scale\"`.\n\n### scaleStep · scaleShade\n\nThe ramp itself, for cells a block draws on its own.\n\n- `scaleStep(value, min, max, steps = 5)` → which shade a value falls in:\n  `0` … `steps − 1`, or `null` for a missing value.\n- `scaleShade(value, { min, max, steps, tone })` → `{ step, style,\n  className }`: put `style` (the fill) and `className` (the text colour\n  that reads on it) on your element.\n\n### ChartLegend\n\nThe key the charts draw, for a legend of your own (several sparklines\nsharing one key, say).\n\n- `items` — `[{ key, label, tone?, value? }]`; `value` is a muted note\n  after the label.\n- `hidden` — a `Set` (or array) of keys shown as off.\n- `onToggle(key)` — makes each entry a toggle; without it the legend is a\n  plain list.\n- `label` — what it is called to a screen reader, default `\"Legend\"`.\n\n## Example\n\n```jsx\n// surfaces/sales.jsx — server: load, hand over\nimport { loadRows } from \"../lib/data\";\nimport SalesCharts from \"../components/SalesCharts\";\n\nexport default async function SalesSurface() {\n  const { rows: months, error } = await loadRows({ source: \"public.revenue_by_month\", orderBy: \"month asc\" });\n  const { rows: stages } = await loadRows({ source: \"public.deals_by_stage\", orderBy: \"position asc\" });\n  const { rows: visits } = await loadRows({ source: \"public.visits_by_slot\", orderBy: \"position asc\" });\n  return <SalesCharts months={months} stages={stages} visits={visits} error={error} />;\n}\n```\n\n```jsx\n// components/SalesCharts.jsx — client: the cards and the charts\n\"use client\";\nimport { Card, Notice } from \"./ui\";\nimport { AreaChart, BarChart, HeatmapChart, Sparkline } from \"./blocks/chart\";\n\nconst usd = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", maximumFractionDigits: 0 });\nconst usdShort = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", notation: \"compact\" });\n\nexport default function SalesCharts({ months, stages, visits, error }) {\n  return (\n    <div className=\"grid gap-4\">\n      {error ? <Notice tone=\"danger\">{error}</Notice> : null}\n      <Card title=\"MRR\">\n        <Sparkline data={months} value=\"mrr\" label=\"MRR, last 12 months\" format={(v) => usd.format(v)} />\n      </Card>\n      <Card title=\"Revenue by month\">\n        <AreaChart\n          data={months}\n          x=\"month\"\n          series={[{ key: \"new_biz\", label: \"New business\" }, { key: \"expansion\", label: \"Expansion\" }]}\n          stacked\n          format={(v) => usd.format(v)}\n          formatAxis={(v) => usdShort.format(v)}\n          label=\"Revenue by month\"\n        />\n      </Card>\n      <Card title=\"Deals by stage\">\n        <BarChart data={stages} x=\"stage\" series={[{ key: \"deals\", label: \"Deals\" }]} orientation=\"horizontal\" label=\"Deals by stage\" />\n      </Card>\n      <Card title=\"Site visits by time of day\">\n        <HeatmapChart\n          data={visits}\n          y=\"slot\"\n          columns={[{ key: \"mon\", label: \"Mon\" }, { key: \"tue\", label: \"Tue\" }, { key: \"wed\", label: \"Wed\" }]}\n          showValues\n          rowTotals\n          colTotals\n          formatTooltip={(v, row, col) => `${col.label} ${row.slot}: ${v ?? 0} visits`}\n          label=\"Site visits by weekday and time slot\"\n        />\n      </Card>\n    </div>\n  );\n}\n```\n\n## What it will not do\n\n- Sort, group or sum: the rows come shaped. Totals by month or by stage\n  are a query (a view, or `loadRows` over one).\n- A time scale: x is a list of labels, evenly spaced, in row order. Give\n  every period a row (a month with no sales is a row with 0).\n- Two value axes, scatter, radar, maps, zoom or brushing.\n- A colour outside the theme: series take the chart tones and the theme's\n  status tones only. Colour by value is the heatmap's alone, on one chart\n  tone.\n- Draw its own title: put it in a `Card`.\n\nA chart it cannot be is your own component in `components/`, built from\nthe kit — not an edit to this block. Its files are fixed: `npm run check`\nrefuses a change, and `makersclaw add chart` restores them.\n"
+      "content": "# Chart\n\nNumbers as a shape: `LineChart`, `AreaChart` (stacked or not), `BarChart`\n(grouped or stacked, columns or bars), `PieChart` (a pie or a donut with\nthe total in its middle), `Sparkline` (a trend beside a KPI) and\n`HeatmapChart` (a grid of two dimensions, each cell shaded by its value,\nwith `ScaleLegend` as its key). Drawn in SVG (the heatmap as an HTML\ntable), no chart library, in the workspace's chart colours. Each one is as\nwide as its container and redraws when that changes. Hover, touch or the\narrow keys show a tooltip with a crosshair; the legend hides and shows a\nseries; a screen reader gets a summary and the numbers as a table; with\nreduced motion nothing animates.\n\n```jsx\nimport { AreaChart, BarChart, HeatmapChart, PieChart, Sparkline } from \"../components/blocks/chart\";   // a Makersclaw app (\"./blocks/chart\" from components/)\nimport { AreaChart, BarChart, HeatmapChart, PieChart, Sparkline } from \"@/components/makersclaw/blocks/chart\";   // a shadcn project\n```\n\nThey are client components: render them from a `\"use client\"` component,\nand load the rows in the server surface (README §4). Put a chart in a\n`Card` — the card gives the title; the chart is only the picture.\n\n## The data\n\nRows, as `loadRows` returns them. One key holds the x (a month, a stage,\na week) and each series is another key holding a number, in the order the\nx should read — sort in `loadRows`. A value that is missing (`null`,\n`undefined`, `\"\"`) or not a number is a gap, never a zero: a line, an area\nand a sparkline break there (a value alone between two gaps is a dot), a\nbar or a slice is not drawn, a heatmap cell is blank, and the tooltip and\nthe table say —. A real zero is `0`.\n\n```js\n[{ month: \"Jan\", newBiz: 24600, expansion: 8100 }, { month: \"Feb\", newBiz: 26900, expansion: 8800 }]\n```\n\nA pie takes one row per slice: a key for the name, a key for the value.\n\nA heatmap takes one row per grid row: a key for the row's name and one key\nper column holding its number — a pivot, shaped in the query:\n\n```js\n[{ slot: \"9–12\", mon: 42, tue: 51, wed: 38 }, { slot: \"12–15\", mon: 18, tue: 24, wed: 65 }]\n```\n\n## Colours\n\n`series[].tone` picks a colour: `\"chart-1\"` … `\"chart-5\"` (or `1` … `5`).\nLeft out, the series take chart-1, chart-2, … in order. The chart colours\ncome from the workspace theme (`app/globals.css`, `--color-chart-N`): the\nfirst is the theme's primary, the others turn its hue so neighbours stay\napart in every theme. A series that means a status may take a theme tone\ninstead: `\"success\"`, `\"warning\"`, `\"danger\"`, `\"info\"`, `\"primary\"`,\n`\"muted\"`. In your own markup around a chart use the same classes:\n`bg-chart-1`, `text-chart-2`, `fill-chart-3`, `stroke-chart-4`.\n\n## Props\n\n### LineChart · AreaChart · BarChart\n\n- `data` — the rows. Empty (or missing) shows the empty state.\n- `x` — the key that holds each row's x, e.g. `\"month\"`.\n- `series` — what to draw, in order: `[{ key, label?, tone?, muted?,\n  dashed? }]`. `label` defaults to the key, humanised.\n  - `dashed` — LineChart and AreaChart: a dashed line with no fill under\n    it. The key and the tooltip show a dashed swatch.\n  - `muted` — drawn quieter and underneath the rest: the grey (unless it\n    has its own `tone`), a thinner line, a fainter fill. On a BarChart it\n    is only the grey.\n  - Together they are a \"previous period\" to compare against:\n\n    ```jsx\n    <LineChart\n      data={days}            // [{ day: \"Mon\", thisWeek: 42, lastWeek: 35 }, …]\n      x=\"day\"\n      series={[{ key: \"thisWeek\", label: \"This week\" }, { key: \"lastWeek\", label: \"Last week\", muted: true, dashed: true }]}\n      label=\"Signups, this week against last\"\n    />\n    ```\n- `format(value)` — how a value reads in the tooltip, the summary and the\n  table. Default: `1,250` · `48.2K`.\n- `formatAxis(value)` — how a tick reads (default `format`); give a\n  shorter one when `format` is long (`$48,200` → `$48K`).\n- `formatX(xValue, row)` — how an x reads (default: as written).\n- `label` — what the chart is, for a screen reader: `\"Revenue by month\"`.\n  Default `\"Chart\"`; always set it.\n- `description` — the sentence a screen reader hears after `label`.\n  Default: made from the data (the range, each series' first, last and\n  highest value).\n- `xLabel` — the x column's heading in the hidden table (default: the key,\n  humanised).\n- `height` — pixels, default `240`. The width is the container's.\n- `stacked` — AreaChart and BarChart: pile the series (negatives stack\n  down). The tooltip adds a total. Default `false`.\n- `orientation` — BarChart: `\"vertical\"` (columns, the default) or\n  `\"horizontal\"` (bars, categories down the left — for long names).\n- `valueLabels` — BarChart: each bar's value at its end (\"10%\"), in\n  `format`; stacked, the stack's total. `true`, or `(value, row, key)` →\n  the words (`key` is null for a total). With it the value axis is often\n  noise: `xAxis={false}` (horizontal) or `yAxis={false}`. Default `false`.\n- `track` — BarChart: a quiet full-length track behind every bar, for a\n  share or a distribution (a status's share of tickets). Pair it with\n  `grid={false}`. Default `false`.\n- `curve` — LineChart and AreaChart: `\"monotone\"` (default, smooth and\n  never overshooting), `\"linear\"` or `\"step\"`.\n- `dots` — LineChart and AreaChart: a dot on every point. Default `false`.\n- `grid` · `xAxis` · `yAxis` — gridlines and the two axes' labels. All\n  default `true`.\n- `legend` — the legend under the chart; its entries are toggles that hide\n  a series. Default: shown when there is more than one series.\n- `tooltip` — default `true`.\n- `onSelect(row, index)` — a click, a tap or Enter on a point or a bar\n  calls it: open the month, filter by the stage.\n- `emptyLabel` · `emptyBody` — what the empty state says. Default\n  `\"No data yet\"`.\n- `className` — layout around it (width, margin). Never colour.\n\n### PieChart\n\n- `data` — one row per slice.\n- `name` — the key holding a slice's name, default `\"name\"`.\n- `value` — the key holding its number, default `\"value\"`. Zero and\n  negative values draw nothing; a missing one draws nothing and reads —\n  in the legend and the table.\n- `donut` — open the middle. It shows the total, and the picked slice's\n  value and share while one is picked. Default `false`.\n- `centerLabel` — a donut's middle instead of the total: a string, or\n  `{ value, label }`.\n- `totalLabel` — the words under the total, default `\"Total\"`.\n- `format(value)` · `formatName(name, row)` · `label` · `description` ·\n  `height` · `tooltip` · `onSelect(row, index)` · `emptyLabel` ·\n  `emptyBody` · `className` — as above.\n- `legend` — default `true`; hiding a slice re-shares the rest.\n- `legendValues` — what follows each name in the legend: `\"percent\"`\n  (default), `\"value\"` or `\"none\"`.\n- A row's own `tone` colours its slice; otherwise chart-1 … chart-5 in\n  order (a sixth slice repeats chart-1 — five is the most a pie reads).\n\n### Sparkline\n\nA trend with no axes, gridlines, legend or tooltip, as wide as its box\nand `height` tall — small enough to sit under a kit `Stat` in a tile:\n\n```jsx\n<Card>\n  <Stat label=\"MRR\" value=\"$84.2k\" delta={6.1} />\n  <Sparkline data={mrr} label=\"MRR, last 12 months\" height={28} className=\"mt-2\" />\n</Card>\n```\n\n- `data` — numbers (`[12, 15, 14]`) or rows with `value`.\n- `value` — the key when `data` is rows, default `\"value\"`.\n- `label` — what it shows, e.g. `\"MRR, last 12 months\"`: a screen reader\n  hears it with the first, last, low and high values. Always set it.\n- `format(value)` — for those words.\n- `tone` — default `\"chart-1\"`.\n- `area` — the faded fill under the line, default `true`.\n- `dot` — a dot on the latest value, default `true`.\n- `height` — default `36`. The width is the container's.\n- `className` — layout. Never colour.\n\n### HeatmapChart\n\n- `data` — one row per grid row. Empty (or no `columns`) shows the empty\n  state.\n- `y` — the key holding each row's name, default `\"name\"`.\n- `columns` — the cells of a row, in order: `[\"mon\", \"tue\"]` (labels made\n  from the keys) or `[{ key: \"mon\", label: \"Mon\" }, …]`.\n- `formatY(yValue, row)` — how a row's name reads (default: as written).\n- `tone` — the ramp's colour: `\"chart-1\"` (default) … `\"chart-5\"` (or\n  `1` … `5`). One colour, light to full: a heatmap is one measure.\n- `min` · `max` — the ends of the ramp. Default: 0 (or the lowest value,\n  when negative) and the highest value. Values past them take the end\n  shades.\n- `steps` — how many shades, default `5`. Each cell takes the shade its\n  value falls in (`scaleStep`), so equal shades mean equal bands.\n- `showValues` — the number on each cell, in `format`; on dark shades it\n  is drawn in the background's colour so it stays readable. Default\n  `false` (a compact grid of colour).\n- `format(value)` — how a value reads on the cell, in the tooltip, the\n  totals and the legend. Default: `1,250` · `48.2K`.\n- `cellShape` — `\"square\"` (default, rounded) or `\"pill\"` (short and\n  fully round — the contribution grid).\n- `rowTotals` · `colTotals` — a bold Total column at the right, a bold\n  Total row at the foot (and the grand total where they meet). Missing\n  values count as nothing. Default `false`.\n- `totalLabel` — default `\"Total\"`.\n- `tooltip` — the kit `Tooltip` on hover or keyboard focus. Default `true`.\n- `formatTooltip(value, row, column)` — its words (a string); `column` is\n  `{ key, label }` and `value` is null when the cell has none. Default:\n  `\"Tue · 9–12: 51\"`. The same words name the cell to a screen reader.\n- `legend` — a `ScaleLegend` under the grid, at the right. Default `true`.\n  Set it `false` to place your own (in the card's header, say).\n- `legendLabels` — its end words, e.g. `[\"Less\", \"More\"]`; default the\n  numbers at the two ends.\n- `onSelect(row, columnKey, value)` — a click, or Enter or Space on a\n  focused cell.\n- `label` · `description` — as above; the description defaults to the\n  size, the range and the highest cell.\n- `yLabel` — the row names' heading for a screen reader (default: the key,\n  humanised).\n- `emptyLabel` · `emptyBody` · `className` — as above.\n\nThe grid is a table: a screen reader reads each cell with its row and\ncolumn. Tab lands on one cell; the arrow keys move, Home and End go to the\nrow's ends (with Ctrl or ⌘, the grid's). A grid wider than its box\nscrolls sideways inside it, and the row names stay at the left — on the\ncard's background, so put the heatmap in a `Card`.\n\n### ScaleLegend\n\nThe heatmap's key, for a legend placed yourself: `Less ▪▪▪▪▪ More`.\n\n- `min` · `max` — the ends, default `0` and `1`.\n- `steps` — the shades, default `5` (match the chart's).\n- `labels` — `[\"Less\", \"More\"]`, or leave it out for the numbers at the\n  ends, in `format`.\n- `tone` · `format` — as the chart's.\n- `shape` — `\"square\"` (default) or `\"pill\"`, as the chart's cells.\n- `label` — what a screen reader hears it called, default `\"Scale\"`.\n\n### scaleStep · scaleShade\n\nThe ramp itself, for cells a block draws on its own.\n\n- `scaleStep(value, min, max, steps = 5)` → which shade a value falls in:\n  `0` … `steps − 1`, or `null` for a missing value.\n- `scaleShade(value, { min, max, steps, tone })` → `{ step, style,\n  className }`: put `style` (the fill) and `className` (the text colour\n  that reads on it) on your element.\n\n### ChartLegend\n\nThe key the charts draw, for a legend of your own (several sparklines\nsharing one key, say).\n\n- `items` — `[{ key, label, tone?, value? }]`; `value` is a muted note\n  after the label.\n- `hidden` — a `Set` (or array) of keys shown as off.\n- `onToggle(key)` — makes each entry a toggle; without it the legend is a\n  plain list.\n- `label` — what it is called to a screen reader, default `\"Legend\"`.\n\n## Example\n\n```jsx\n// surfaces/sales.jsx — server: load, hand over\nimport { loadRows } from \"../lib/data\";\nimport SalesCharts from \"../components/SalesCharts\";\n\nexport default async function SalesSurface() {\n  const { rows: months, error } = await loadRows({ source: \"public.revenue_by_month\", orderBy: \"month asc\" });\n  const { rows: stages } = await loadRows({ source: \"public.deals_by_stage\", orderBy: \"position asc\" });\n  const { rows: visits } = await loadRows({ source: \"public.visits_by_slot\", orderBy: \"position asc\" });\n  return <SalesCharts months={months} stages={stages} visits={visits} error={error} />;\n}\n```\n\n```jsx\n// components/SalesCharts.jsx — client: the cards and the charts\n\"use client\";\nimport { Card, Notice } from \"./ui\";\nimport { AreaChart, BarChart, HeatmapChart, Sparkline } from \"./blocks/chart\";\n\nconst usd = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", maximumFractionDigits: 0 });\nconst usdShort = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", notation: \"compact\" });\n\nexport default function SalesCharts({ months, stages, visits, error }) {\n  return (\n    <div className=\"grid gap-4\">\n      {error ? <Notice tone=\"danger\">{error}</Notice> : null}\n      <Card title=\"MRR\">\n        <Sparkline data={months} value=\"mrr\" label=\"MRR, last 12 months\" format={(v) => usd.format(v)} />\n      </Card>\n      <Card title=\"Revenue by month\">\n        <AreaChart\n          data={months}\n          x=\"month\"\n          series={[{ key: \"new_biz\", label: \"New business\" }, { key: \"expansion\", label: \"Expansion\" }]}\n          stacked\n          format={(v) => usd.format(v)}\n          formatAxis={(v) => usdShort.format(v)}\n          label=\"Revenue by month\"\n        />\n      </Card>\n      <Card title=\"Deals by stage\">\n        <BarChart data={stages} x=\"stage\" series={[{ key: \"deals\", label: \"Deals\" }]} orientation=\"horizontal\" label=\"Deals by stage\" />\n      </Card>\n      <Card title=\"Site visits by time of day\">\n        <HeatmapChart\n          data={visits}\n          y=\"slot\"\n          columns={[{ key: \"mon\", label: \"Mon\" }, { key: \"tue\", label: \"Tue\" }, { key: \"wed\", label: \"Wed\" }]}\n          showValues\n          rowTotals\n          colTotals\n          formatTooltip={(v, row, col) => `${col.label} ${row.slot}: ${v ?? 0} visits`}\n          label=\"Site visits by weekday and time slot\"\n        />\n      </Card>\n    </div>\n  );\n}\n```\n\n## What it will not do\n\n- Sort, group or sum: the rows come shaped. Totals by month or by stage\n  are a query (a view, or `loadRows` over one).\n- A time scale: x is a list of labels, evenly spaced, in row order. Give\n  every period a row (a month with no sales is a row with 0; a day with\n  no data yet, a row with null).\n- Two value axes, scatter, radar, maps, zoom or brushing.\n- A colour outside the theme: series take the chart tones and the theme's\n  status tones only. Colour by value is the heatmap's alone, on one chart\n  tone.\n- Draw its own title: put it in a `Card`.\n\nA chart it cannot be is your own component in `components/`, built from\nthe kit — not an edit to this block. Its files are fixed: `npm run check`\nrefuses a change, and `makersclaw add chart` restores them.\n"
     }
   ],
   "categories": [
@@ -76,7 +76,7 @@
   "docs": "Installed to components/makersclaw/blocks/chart. Import: import { LineChart, AreaChart, BarChart, PieChart, Sparkline, ChartLegend, HeatmapChart, ScaleLegend, scaleStep, scaleShade } from \"@/components/makersclaw/blocks/chart\". Props and an example: components/makersclaw/blocks/chart/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.2",
       "useWhen": "Numbers the founder should see as a shape: revenue by month, deals by stage, pipeline by source, a KPI's trend. Not for a single figure with no history (a stat), exact lookups (a table), or records on a timeline (a calendar)."
     }
   }

package/r/chat.json

@@ -5,7 +5,7 @@
   "title": "Chat",
   "description": "The parts of a chat: messages with avatars, times, grouping, sending/failed/streaming states, hover actions, thumbs up/down feedback, in-place editing and a folding reasoning section; a scroller that sticks to the bottom with day separators and older-message loading; a composer (a box or an \"ask anything\" pill) with attachments, a + menu, tools, suggestion chips, Enter to send and Stop; a header; and ChatThread, which composes them from messages + onSend.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -31,7 +31,7 @@
       "path": "registry/blocks/chat/message.jsx",
       "type": "registry:component",
       "target": "@components/makersclaw/blocks/chat/message.jsx",
-      "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { Avatar, Button, Collapsible, IconButton, Icon, Menu, Spinner, Textarea, Toggle, Tooltip, cx } from \"../../ui\";\nimport { Attachment } from \"./attachment\";\nimport { ChatText } from \"./text\";\n\n// Message and Bubble — one turn of a conversation. A message is its\n// author (avatar, name, time — shown once for a run of messages from the\n// same author), its words in a Bubble, its files, its state (sending,\n// streaming, failed with Retry) and the actions that appear on hover or\n// focus (copy, retry, a Menu of the surface's own). An assistant reply can\n// carry its reasoning (folded under \"Thought for 4s\") and take a thumbs up\n// or down; a user message can be edited in place.\n\n/** The text of a message: `content` when it is a string, else the text\n *  parts of `parts` / `content` ([{ type: \"text\", text }]), joined. */\nexport function textOf(message) {\n  const c = message?.content;\n  if (typeof c === \"string\") return c;\n  const parts = Array.isArray(c) ? c : Array.isArray(message?.parts) ? message.parts : [];\n  return parts\n    .filter((p) => p && (p.type === \"text\" || typeof p === \"string\"))\n    .map((p) => (typeof p === \"string\" ? p : p.text ?? \"\"))\n    .join(\"\");\n}\n\nexport function toDate(value) {\n  if (value == null || value === \"\") return null;\n  const d = value instanceof Date ? value : new Date(value);\n  return Number.isNaN(d.getTime()) ? null : d;\n}\n\nexport function formatTime(date) {\n  return date.toLocaleTimeString(undefined, { hour: \"numeric\", minute: \"2-digit\" });\n}\n\n/**\n * The container for a message's words.\n *   from     user · assistant — user bubbles are filled and sit at the end\n *   variant  bubble · plain (assistant text on the page, no box)\n *   first / last  its place in a run from one author: the corner on the\n *           author's side tightens between messages of one run\n *   text     a string, drawn by the safe renderer; or pass children\n */\nexport function Bubble({ from = \"assistant\", variant = \"bubble\", first = true, last = true, text, streaming, className, children }) {\n  const user = from === \"user\";\n  const plain = !user && variant === \"plain\";\n  const caret = streaming ? (\n    <span aria-hidden=\"true\" className=\"ml-0.5 inline-block h-[1em] w-1.5 translate-y-0.5 animate-pulse rounded-sm bg-current opacity-60\" />\n  ) : null;\n  const body = text !== undefined ? <ChatText text={text} tone={user ? \"primary\" : undefined} trailing={caret} /> : children;\n  return (\n    <div\n      className={cx(\n        \"min-w-0 max-w-full text-sm leading-relaxed\",\n        plain\n          ? \"py-0.5\"\n          : cx(\n              \"rounded-2xl px-3.5 py-2.5\",\n              user ? \"bg-primary text-primary-foreground\" : \"bg-muted text-foreground\",\n              user ? [!first && \"rounded-tr-md\", !last && \"rounded-br-md\"] : [!first && \"rounded-tl-md\", !last && \"rounded-bl-md\"],\n            ),\n        className,\n      )}\n    >\n      {body}\n      {text === undefined ? caret : null}\n    </div>\n  );\n}\n\nexport function formatSeconds(s) {\n  const n = Math.max(0, Math.round(Number(s) || 0));\n  return n < 60 ? `${n}s` : `${Math.floor(n / 60)}m ${n % 60}s`;\n}\n\n/** The folding reasoning over an assistant reply: \"Thinking…\" while it\n *  streams with no answer yet, then \"Thought for 4s\". Closed by default. */\nfunction Reasoning({ text, seconds, thinking }) {\n  const [open, setOpen] = useState(false);\n  const title = thinking ? \"Thinking…\" : seconds ? `Thought for ${formatSeconds(seconds)}` : \"Reasoning\";\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={setOpen}\n      chevron=\"right\"\n      title={<span className={cx(\"font-normal text-muted-foreground\", thinking && \"animate-pulse motion-reduce:animate-none\")}>{title}</span>}\n      className=\"w-full max-w-prose\"\n    >\n      <div className=\"border-l-2 border-border pl-3 text-xs leading-relaxed text-muted-foreground\">\n        {text ? <ChatText text={text} /> : <span>Nothing to show yet.</span>}\n      </div>\n    </Collapsible>\n  );\n}\n\n/** A sent message's words, back in a field: Enter (or Save) saves through\n *  `onSave(text)`, Esc (or Cancel) leaves it as it was. A failed save keeps\n *  the field open with the reason under it. */\nfunction EditBox({ initial, onSave, onCancel }) {\n  const id = useId();\n  const [text, setText] = useState(initial);\n  const [saving, setSaving] = useState(false);\n  const [error, setError] = useState(null);\n\n  async function save() {\n    const next = text.trim();\n    if (!next || saving) return;\n    if (next === initial.trim()) return onCancel();\n    setSaving(true);\n    setError(null);\n    let r;\n    try {\n      r = await onSave(next);\n    } catch (e) {\n      r = { ok: false, error: e?.message ?? String(e) };\n    }\n    setSaving(false);\n    if (r && r.ok === false) setError(r.error ?? \"The change was not saved\");\n  }\n\n  return (\n    <div className=\"grid w-[32rem] max-w-full gap-2\">\n      <label htmlFor={id} className=\"sr-only\">\n        Edit message\n      </label>\n      <Textarea\n        id={id}\n        autoFocus\n        autoGrow\n        minRows={2}\n        maxRows={10}\n        value={text}\n        invalid={Boolean(error)}\n        aria-describedby={error ? `${id}-error` : undefined}\n        onChange={(e) => setText(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Escape\") {\n            e.preventDefault();\n            onCancel();\n          } else if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing) {\n            e.preventDefault();\n            save();\n          }\n        }}\n      />\n      {error ? (\n        <p id={`${id}-error`} role=\"alert\" className=\"text-xs text-destructive\">\n          {error}\n        </p>\n      ) : null}\n      <div className=\"flex justify-end gap-2\">\n        <Button size=\"sm\" variant=\"quiet\" onClick={onCancel} disabled={saving}>\n          Cancel\n        </Button>\n        <Button size=\"sm\" variant=\"primary\" onClick={save} loading={saving} disabled={!text.trim()}>\n          Save\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction Thinking({ label = \"Thinking\" }) {\n  return (\n    <span role=\"status\" className=\"inline-flex h-5 items-center gap-1\" aria-label={label}>\n      {[0, 150, 300].map((d) => (\n        <span key={d} aria-hidden=\"true\" className=\"size-1.5 animate-pulse rounded-full bg-muted-foreground\" style={{ animationDelay: `${d}ms` }} />\n      ))}\n    </span>\n  );\n}\n\n/**\n * One message.\n *   message   { id, role, content | parts, createdAt?, status?, error?,\n *               author?: { name, src }, attachments?: [{ id?, name, size?, type?, url? }] }\n *             status: sending · streaming · failed · (anything else: sent)\n *   first / last   its place in a run from one author (MessageScroller\n *             works these out); `first` shows the avatar, name and time\n *   latest    the newest reply: its actions stay in view, not only on hover\n *   message.reasoning (string) · message.reasoningDuration (seconds) — the\n *             folding reasoning over an assistant reply\n *   message.feedback  \"up\" · \"down\" — the thumbs already chosen\n *   onFeedback(message, \"up\" | \"down\" | null)  thumbs on assistant replies;\n *             may return { ok: false, error }: the choice goes back\n *   onEdit(message, text)   an edit button on user messages; may return\n *             { ok: false, error }: the field stays open with the reason\n *   editing / onEditingChange(next)   control the edit (ChatThread does,\n *             for ArrowUp in an empty composer)\n */\nexport function Message({\n  message,\n  first = true,\n  last = true,\n  latest = false,\n  variant = \"plain\",\n  assistantName = \"Assistant\",\n  assistantAvatar,\n  userName = \"You\",\n  userAvatar,\n  showUserAvatar = false,\n  onRetry,\n  onRegenerate,\n  onCopy,\n  actionsOf,\n  onFeedback,\n  onEdit,\n  editing: editingProp,\n  onEditingChange,\n  formatTime: timeOf = formatTime,\n  className,\n}) {\n  const [copied, setCopied] = useState(false);\n  const copiedTimer = useRef(0);\n  useEffect(() => () => clearTimeout(copiedTimer.current), []);\n  const [ownEditing, setOwnEditing] = useState(false);\n  const editing = editingProp ?? ownEditing;\n  const setEditing = (next) => {\n    if (editingProp === undefined) setOwnEditing(next);\n    onEditingChange?.(next);\n  };\n  // The thumbs: shown at once, taken back if the save fails.\n  const [choice, setChoice] = useState(undefined);\n  const [feedbackError, setFeedbackError] = useState(null);\n  const [feedbackBusy, setFeedbackBusy] = useState(false);\n  const given = message?.feedback ?? null;\n  useEffect(() => setChoice(undefined), [given]);\n\n  if (!message) return null;\n  const role = message.role === \"user\" ? \"user\" : message.role === \"system\" ? \"system\" : \"assistant\";\n  const text = textOf(message);\n  const status = message.status;\n  const streaming = status === \"streaming\";\n  const failed = status === \"failed\";\n  const sending = status === \"sending\";\n  const date = toDate(message.createdAt);\n\n  if (role === \"system\") {\n    return (\n      <div className={cx(\"flex justify-center px-2 py-1\", className)}>\n        <ChatText text={text} className=\"max-w-prose text-balance text-center text-xs text-muted-foreground\" />\n      </div>\n    );\n  }\n\n  const user = role === \"user\";\n  const name = message.author?.name ?? (user ? userName : assistantName);\n  const src = message.author?.src ?? (user ? userAvatar : assistantAvatar);\n  const showAvatar = !user || showUserAvatar;\n  const files = (message.attachments ?? []).filter(Boolean);\n\n  async function copy() {\n    try {\n      if (onCopy) await onCopy(message, text);\n      else await navigator.clipboard.writeText(text);\n      setCopied(true);\n      clearTimeout(copiedTimer.current);\n      copiedTimer.current = setTimeout(() => setCopied(false), 1500);\n    } catch {\n      // No clipboard (an insecure origin): nothing to say beyond not ticking.\n    }\n  }\n\n  const feedback = choice !== undefined ? choice : given;\n  async function giveFeedback(v) {\n    const before = feedback;\n    const next = before === v ? null : v;\n    setChoice(next);\n    setFeedbackError(null);\n    setFeedbackBusy(true);\n    let r;\n    try {\n      r = await onFeedback(message, next);\n    } catch (e) {\n      r = { ok: false, error: e?.message ?? String(e) };\n    }\n    setFeedbackBusy(false);\n    if (r && r.ok === false) {\n      setChoice(before);\n      setFeedbackError(r.error ?? \"Your feedback was not saved\");\n    }\n  }\n\n  const reasoning = typeof message.reasoning === \"string\" ? message.reasoning : null;\n  const thinking = streaming && !text;\n\n  const extra = actionsOf?.(message) ?? [];\n  const canRegenerate = !user && onRegenerate && !streaming;\n  const hasActions = !sending && !streaming && !failed;\n\n  // The actions sit under the words on touch, where they always show.\n  const toolbar =\n    hasActions && (text || extra.length) ? (\n      <div\n        className={cx(\n          \"-mx-1 flex items-center gap-0.5 transition-opacity\",\n          latest && !user\n            ? \"opacity-100\"\n            : \"pointer-events-none opacity-0 group-hover/message:pointer-events-auto group-hover/message:opacity-100 group-focus-within/message:pointer-events-auto group-focus-within/message:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100\",\n          // On a pointer that hovers, the actions float instead of holding\n          // a row open under every message: beside a user's bubble, over\n          // the top corner of an assistant's (the newest reply keeps its row).\n          user\n            ? \"flex-row-reverse [@media(hover:hover)]:absolute [@media(hover:hover)]:right-full [@media(hover:hover)]:top-0 [@media(hover:hover)]:mx-0 [@media(hover:hover)]:mr-1\"\n            : !latest &&\n                \"[@media(hover:hover)]:absolute [@media(hover:hover)]:-top-3 [@media(hover:hover)]:right-0 [@media(hover:hover)]:z-10 [@media(hover:hover)]:mx-0 [@media(hover:hover)]:rounded-md [@media(hover:hover)]:border [@media(hover:hover)]:border-border [@media(hover:hover)]:bg-card [@media(hover:hover)]:p-0.5 [@media(hover:hover)]:shadow-sm\",\n        )}\n      >\n        {text ? (\n          <Tooltip label={copied ? \"Copied\" : \"Copy\"}>\n            <IconButton icon={copied ? \"check\" : \"copy\"} label={copied ? \"Copied\" : \"Copy message\"} size=\"sm\" onClick={copy} />\n          </Tooltip>\n        ) : null}\n        {canRegenerate ? (\n          <Tooltip label=\"Regenerate\">\n            <IconButton icon=\"refresh\" label=\"Regenerate reply\" size=\"sm\" onClick={() => onRegenerate(message)} />\n          </Tooltip>\n        ) : null}\n        {!user && onFeedback && text ? (\n          <>\n            <Toggle\n              variant=\"quiet\"\n              size=\"sm\"\n              icon=\"thumbs-up\"\n              label=\"Good reply\"\n              pressed={feedback === \"up\"}\n              disabled={feedbackBusy}\n              onPressedChange={() => giveFeedback(\"up\")}\n            />\n            <Toggle\n              variant=\"quiet\"\n              size=\"sm\"\n              icon=\"thumbs-down\"\n              label=\"Bad reply\"\n              pressed={feedback === \"down\"}\n              disabled={feedbackBusy}\n              onPressedChange={() => giveFeedback(\"down\")}\n            />\n          </>\n        ) : null}\n        {user && onEdit && text ? (\n          <Tooltip label=\"Edit\">\n            <IconButton icon=\"pencil\" label=\"Edit message\" size=\"sm\" onClick={() => setEditing(true)} />\n          </Tooltip>\n        ) : null}\n        <Menu items={extra} label=\"More actions for this message\" align={user ? \"end\" : \"start\"} />\n      </div>\n    ) : null;\n\n  return (\n    <article\n      aria-label={`Message from ${name}`}\n      data-role={role}\n      data-status={status || undefined}\n      className={cx(\"group/message relative flex gap-2.5\", user && \"flex-row-reverse\", first ? \"mt-4\" : \"mt-1\", className)}\n    >\n      {showAvatar ? (\n        <div className=\"w-8 shrink-0\">\n          {first ? <Avatar name={name} src={src} size=\"sm\" shape={user ? \"round\" : \"square\"} /> : null}\n        </div>\n      ) : null}\n      <div\n        className={cx(\n          \"flex min-w-0 flex-col gap-1\",\n          user ? \"max-w-[85%] items-end\" : variant === \"plain\" ? \"flex-1 items-start\" : \"max-w-[85%] items-start\",\n        )}\n      >\n        {first ? (\n          <p className={cx(\"flex items-baseline gap-2 text-xs\", user && \"flex-row-reverse\")}>\n            <span className=\"font-medium text-foreground\">{name}</span>\n            {date ? (\n              <time dateTime={date.toISOString()} suppressHydrationWarning className=\"text-muted-foreground\">\n                {timeOf(date)}\n              </time>\n            ) : null}\n          </p>\n        ) : null}\n\n        {!user && (reasoning || (thinking && reasoning !== null)) ? (\n          <Reasoning text={reasoning} seconds={message.reasoningDuration} thinking={thinking} />\n        ) : null}\n\n        {editing && user && onEdit ? (\n          <EditBox\n            initial={text}\n            onCancel={() => setEditing(false)}\n            onSave={async (next) => {\n              const r = await onEdit(message, next);\n              if (!(r && r.ok === false)) setEditing(false);\n              return r;\n            }}\n          />\n        ) : text || (streaming && reasoning === null) ? (\n          <div className={cx(\"flex max-w-full flex-col gap-1\", user ? \"relative items-end\" : \"items-start\")}>\n            <Bubble\n              from={role}\n              variant={variant}\n              first={first}\n              last={last}\n              text={text || undefined}\n              streaming={streaming && Boolean(text)}\n              className={cx(failed && \"opacity-70\", sending && \"opacity-80\")}\n            >\n              {text ? null : <Thinking />}\n            </Bubble>\n            {toolbar}\n          </div>\n        ) : null}\n\n        {feedbackError ? (\n          <p role=\"alert\" className=\"text-xs text-destructive\">\n            {feedbackError}\n          </p>\n        ) : null}\n\n        {files.length ? (\n          <ul className={cx(\"flex max-w-full flex-wrap gap-2\", user && \"justify-end\")}>\n            {files.map((f, i) => (\n              <li key={f.id ?? `${f.name}-${i}`} className=\"min-w-0 max-w-full\">\n                <Attachment name={f.name} size={f.size} type={f.type} url={f.url} href={f.href} error={f.error} />\n              </li>\n            ))}\n          </ul>\n        ) : null}\n\n        {sending ? (\n          <p className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n            <Spinner size=\"sm\" label={null} className=\"size-3\" />\n            Sending…\n          </p>\n        ) : null}\n\n        {failed ? (\n          <div role=\"alert\" className=\"flex flex-wrap items-center gap-x-2 text-xs text-destructive\">\n            <Icon name=\"warning\" size={14} />\n            <span>{message.error ? `Not sent: ${message.error}` : \"Not sent\"}</span>\n            {onRetry ? (\n              <Button variant=\"link\" size=\"sm\" className=\"min-h-9 text-xs\" onClick={() => onRetry(message)}>\n                Retry\n              </Button>\n            ) : null}\n          </div>\n        ) : null}\n\n      </div>\n    </article>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { Avatar, Button, Collapsible, IconButton, Icon, Menu, Spinner, Textarea, Toggle, Tooltip, cx, toLocalDate } from \"../../ui\";\nimport { Attachment } from \"./attachment\";\nimport { ChatText } from \"./text\";\n\n// Message and Bubble — one turn of a conversation. A message is its\n// author (avatar, name, time — shown once for a run of messages from the\n// same author), its words in a Bubble, its files, its state (sending,\n// streaming, failed with Retry) and the actions that appear on hover or\n// focus (copy, retry, a Menu of the surface's own). An assistant reply can\n// carry its reasoning (folded under \"Thought for 4s\") and take a thumbs up\n// or down; a user message can be edited in place.\n\n/** The text of a message: `content` when it is a string, else the text\n *  parts of `parts` / `content` ([{ type: \"text\", text }]), joined. */\nexport function textOf(message) {\n  const c = message?.content;\n  if (typeof c === \"string\") return c;\n  const parts = Array.isArray(c) ? c : Array.isArray(message?.parts) ? message.parts : [];\n  return parts\n    .filter((p) => p && (p.type === \"text\" || typeof p === \"string\"))\n    .map((p) => (typeof p === \"string\" ? p : p.text ?? \"\"))\n    .join(\"\");\n}\n\n/** A Date, an ISO time or a day alone (\"2026-09-28\": that day's local\n *  midnight, never UTC's) → a Date; null when it is none. */\nexport function toDate(value) {\n  return toLocalDate(value);\n}\n\nexport function formatTime(date) {\n  return date.toLocaleTimeString(undefined, { hour: \"numeric\", minute: \"2-digit\" });\n}\n\n/**\n * The container for a message's words.\n *   from     user · assistant — user bubbles are filled and sit at the end\n *   variant  bubble · plain (assistant text on the page, no box)\n *   first / last  its place in a run from one author: the corner on the\n *           author's side tightens between messages of one run\n *   text     a string, drawn by the safe renderer; or pass children\n */\nexport function Bubble({ from = \"assistant\", variant = \"bubble\", first = true, last = true, text, streaming, className, children }) {\n  const user = from === \"user\";\n  const plain = !user && variant === \"plain\";\n  const caret = streaming ? (\n    <span aria-hidden=\"true\" className=\"ml-0.5 inline-block h-[1em] w-1.5 translate-y-0.5 animate-pulse rounded-sm bg-current opacity-60\" />\n  ) : null;\n  const body = text !== undefined ? <ChatText text={text} tone={user ? \"primary\" : undefined} trailing={caret} /> : children;\n  return (\n    <div\n      className={cx(\n        \"min-w-0 max-w-full text-sm leading-relaxed\",\n        plain\n          ? \"py-0.5\"\n          : cx(\n              \"rounded-2xl px-3.5 py-2.5\",\n              user ? \"bg-primary text-primary-foreground\" : \"bg-muted text-foreground\",\n              user ? [!first && \"rounded-tr-md\", !last && \"rounded-br-md\"] : [!first && \"rounded-tl-md\", !last && \"rounded-bl-md\"],\n            ),\n        className,\n      )}\n    >\n      {body}\n      {text === undefined ? caret : null}\n    </div>\n  );\n}\n\nexport function formatSeconds(s) {\n  const n = Math.max(0, Math.round(Number(s) || 0));\n  return n < 60 ? `${n}s` : `${Math.floor(n / 60)}m ${n % 60}s`;\n}\n\n/** The folding reasoning over an assistant reply: \"Thinking…\" while it\n *  streams with no answer yet, then \"Thought for 4s\". Closed by default. */\nfunction Reasoning({ text, seconds, thinking }) {\n  const [open, setOpen] = useState(false);\n  const title = thinking ? \"Thinking…\" : seconds ? `Thought for ${formatSeconds(seconds)}` : \"Reasoning\";\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={setOpen}\n      chevron=\"right\"\n      title={<span className={cx(\"font-normal text-muted-foreground\", thinking && \"animate-pulse motion-reduce:animate-none\")}>{title}</span>}\n      className=\"w-full max-w-prose\"\n    >\n      <div className=\"border-l-2 border-border pl-3 text-xs leading-relaxed text-muted-foreground\">\n        {text ? <ChatText text={text} /> : <span>Nothing to show yet.</span>}\n      </div>\n    </Collapsible>\n  );\n}\n\n/** A sent message's words, back in a field: Enter (or Save) saves through\n *  `onSave(text)`, Esc (or Cancel) leaves it as it was. A failed save keeps\n *  the field open with the reason under it. */\nfunction EditBox({ initial, onSave, onCancel }) {\n  const id = useId();\n  const [text, setText] = useState(initial);\n  const [saving, setSaving] = useState(false);\n  const [error, setError] = useState(null);\n\n  async function save() {\n    const next = text.trim();\n    if (!next || saving) return;\n    if (next === initial.trim()) return onCancel();\n    setSaving(true);\n    setError(null);\n    let r;\n    try {\n      r = await onSave(next);\n    } catch (e) {\n      r = { ok: false, error: e?.message ?? String(e) };\n    }\n    setSaving(false);\n    if (r && r.ok === false) setError(r.error ?? \"The change was not saved\");\n  }\n\n  return (\n    <div className=\"grid w-[32rem] max-w-full gap-2\">\n      <label htmlFor={id} className=\"sr-only\">\n        Edit message\n      </label>\n      <Textarea\n        id={id}\n        autoFocus\n        autoGrow\n        minRows={2}\n        maxRows={10}\n        value={text}\n        invalid={Boolean(error)}\n        aria-describedby={error ? `${id}-error` : undefined}\n        onChange={(e) => setText(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Escape\") {\n            e.preventDefault();\n            onCancel();\n          } else if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing) {\n            e.preventDefault();\n            save();\n          }\n        }}\n      />\n      {error ? (\n        <p id={`${id}-error`} role=\"alert\" className=\"text-xs text-destructive\">\n          {error}\n        </p>\n      ) : null}\n      <div className=\"flex justify-end gap-2\">\n        <Button size=\"sm\" variant=\"quiet\" onClick={onCancel} disabled={saving}>\n          Cancel\n        </Button>\n        <Button size=\"sm\" variant=\"primary\" onClick={save} loading={saving} disabled={!text.trim()}>\n          Save\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction Thinking({ label = \"Thinking\" }) {\n  return (\n    <span role=\"status\" className=\"inline-flex h-5 items-center gap-1\" aria-label={label}>\n      {[0, 150, 300].map((d) => (\n        <span key={d} aria-hidden=\"true\" className=\"size-1.5 animate-pulse rounded-full bg-muted-foreground\" style={{ animationDelay: `${d}ms` }} />\n      ))}\n    </span>\n  );\n}\n\n/**\n * One message.\n *   message   { id, role, content | parts, createdAt?, status?, error?,\n *               author?: { name, src }, attachments?: [{ id?, name, size?, type?, url? }] }\n *             status: sending · streaming · failed · (anything else: sent)\n *   first / last   its place in a run from one author (MessageScroller\n *             works these out); `first` shows the avatar, name and time\n *   latest    the newest reply: its actions stay in view, not only on hover\n *   message.reasoning (string) · message.reasoningDuration (seconds) — the\n *             folding reasoning over an assistant reply\n *   message.feedback  \"up\" · \"down\" — the thumbs already chosen\n *   onFeedback(message, \"up\" | \"down\" | null)  thumbs on assistant replies;\n *             may return { ok: false, error }: the choice goes back\n *   onEdit(message, text)   an edit button on user messages; may return\n *             { ok: false, error }: the field stays open with the reason\n *   editing / onEditingChange(next)   control the edit (ChatThread does,\n *             for ArrowUp in an empty composer)\n */\nexport function Message({\n  message,\n  first = true,\n  last = true,\n  latest = false,\n  variant = \"plain\",\n  assistantName = \"Assistant\",\n  assistantAvatar,\n  userName = \"You\",\n  userAvatar,\n  showUserAvatar = false,\n  onRetry,\n  onRegenerate,\n  onCopy,\n  actionsOf,\n  onFeedback,\n  onEdit,\n  editing: editingProp,\n  onEditingChange,\n  formatTime: timeOf = formatTime,\n  className,\n}) {\n  const [copied, setCopied] = useState(false);\n  const copiedTimer = useRef(0);\n  useEffect(() => () => clearTimeout(copiedTimer.current), []);\n  const [ownEditing, setOwnEditing] = useState(false);\n  const editing = editingProp ?? ownEditing;\n  const setEditing = (next) => {\n    if (editingProp === undefined) setOwnEditing(next);\n    onEditingChange?.(next);\n  };\n  // The thumbs: shown at once, taken back if the save fails.\n  const [choice, setChoice] = useState(undefined);\n  const [feedbackError, setFeedbackError] = useState(null);\n  const [feedbackBusy, setFeedbackBusy] = useState(false);\n  const given = message?.feedback ?? null;\n  useEffect(() => setChoice(undefined), [given]);\n\n  if (!message) return null;\n  const role = message.role === \"user\" ? \"user\" : message.role === \"system\" ? \"system\" : \"assistant\";\n  const text = textOf(message);\n  const status = message.status;\n  const streaming = status === \"streaming\";\n  const failed = status === \"failed\";\n  const sending = status === \"sending\";\n  const date = toDate(message.createdAt);\n\n  if (role === \"system\") {\n    return (\n      <div className={cx(\"flex justify-center px-2 py-1\", className)}>\n        <ChatText text={text} className=\"max-w-prose text-balance text-center text-xs text-muted-foreground\" />\n      </div>\n    );\n  }\n\n  const user = role === \"user\";\n  const name = message.author?.name ?? (user ? userName : assistantName);\n  const src = message.author?.src ?? (user ? userAvatar : assistantAvatar);\n  const showAvatar = !user || showUserAvatar;\n  const files = (message.attachments ?? []).filter(Boolean);\n\n  async function copy() {\n    try {\n      if (onCopy) await onCopy(message, text);\n      else await navigator.clipboard.writeText(text);\n      setCopied(true);\n      clearTimeout(copiedTimer.current);\n      copiedTimer.current = setTimeout(() => setCopied(false), 1500);\n    } catch {\n      // No clipboard (an insecure origin): nothing to say beyond not ticking.\n    }\n  }\n\n  const feedback = choice !== undefined ? choice : given;\n  async function giveFeedback(v) {\n    const before = feedback;\n    const next = before === v ? null : v;\n    setChoice(next);\n    setFeedbackError(null);\n    setFeedbackBusy(true);\n    let r;\n    try {\n      r = await onFeedback(message, next);\n    } catch (e) {\n      r = { ok: false, error: e?.message ?? String(e) };\n    }\n    setFeedbackBusy(false);\n    if (r && r.ok === false) {\n      setChoice(before);\n      setFeedbackError(r.error ?? \"Your feedback was not saved\");\n    }\n  }\n\n  const reasoning = typeof message.reasoning === \"string\" ? message.reasoning : null;\n  const thinking = streaming && !text;\n\n  const extra = actionsOf?.(message) ?? [];\n  const canRegenerate = !user && onRegenerate && !streaming;\n  const hasActions = !sending && !streaming && !failed;\n\n  // The actions sit under the words on touch, where they always show.\n  const toolbar =\n    hasActions && (text || extra.length) ? (\n      <div\n        className={cx(\n          \"-mx-1 flex items-center gap-0.5 transition-opacity\",\n          latest && !user\n            ? \"opacity-100\"\n            : \"pointer-events-none opacity-0 group-hover/message:pointer-events-auto group-hover/message:opacity-100 group-focus-within/message:pointer-events-auto group-focus-within/message:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100\",\n          // On a pointer that hovers, the actions float instead of holding\n          // a row open under every message: beside a user's bubble, over\n          // the top corner of an assistant's (the newest reply keeps its row).\n          user\n            ? \"flex-row-reverse [@media(hover:hover)]:absolute [@media(hover:hover)]:right-full [@media(hover:hover)]:top-0 [@media(hover:hover)]:mx-0 [@media(hover:hover)]:mr-1\"\n            : !latest &&\n                \"[@media(hover:hover)]:absolute [@media(hover:hover)]:-top-3 [@media(hover:hover)]:right-0 [@media(hover:hover)]:z-10 [@media(hover:hover)]:mx-0 [@media(hover:hover)]:rounded-md [@media(hover:hover)]:border [@media(hover:hover)]:border-border [@media(hover:hover)]:bg-card [@media(hover:hover)]:p-0.5 [@media(hover:hover)]:shadow-sm\",\n        )}\n      >\n        {text ? (\n          <Tooltip label={copied ? \"Copied\" : \"Copy\"}>\n            <IconButton icon={copied ? \"check\" : \"copy\"} label={copied ? \"Copied\" : \"Copy message\"} size=\"sm\" onClick={copy} />\n          </Tooltip>\n        ) : null}\n        {canRegenerate ? (\n          <Tooltip label=\"Regenerate\">\n            <IconButton icon=\"refresh\" label=\"Regenerate reply\" size=\"sm\" onClick={() => onRegenerate(message)} />\n          </Tooltip>\n        ) : null}\n        {!user && onFeedback && text ? (\n          <>\n            <Toggle\n              variant=\"quiet\"\n              size=\"sm\"\n              icon=\"thumbs-up\"\n              label=\"Good reply\"\n              pressed={feedback === \"up\"}\n              disabled={feedbackBusy}\n              onPressedChange={() => giveFeedback(\"up\")}\n            />\n            <Toggle\n              variant=\"quiet\"\n              size=\"sm\"\n              icon=\"thumbs-down\"\n              label=\"Bad reply\"\n              pressed={feedback === \"down\"}\n              disabled={feedbackBusy}\n              onPressedChange={() => giveFeedback(\"down\")}\n            />\n          </>\n        ) : null}\n        {user && onEdit && text ? (\n          <Tooltip label=\"Edit\">\n            <IconButton icon=\"pencil\" label=\"Edit message\" size=\"sm\" onClick={() => setEditing(true)} />\n          </Tooltip>\n        ) : null}\n        <Menu items={extra} label=\"More actions for this message\" align={user ? \"end\" : \"start\"} />\n      </div>\n    ) : null;\n\n  return (\n    <article\n      aria-label={`Message from ${name}`}\n      data-role={role}\n      data-status={status || undefined}\n      className={cx(\"group/message relative flex gap-2.5\", user && \"flex-row-reverse\", first ? \"mt-4\" : \"mt-1\", className)}\n    >\n      {showAvatar ? (\n        <div className=\"w-8 shrink-0\">\n          {first ? <Avatar name={name} src={src} size=\"sm\" shape={user ? \"round\" : \"square\"} /> : null}\n        </div>\n      ) : null}\n      <div\n        className={cx(\n          \"flex min-w-0 flex-col gap-1\",\n          user ? \"max-w-[85%] items-end\" : variant === \"plain\" ? \"flex-1 items-start\" : \"max-w-[85%] items-start\",\n        )}\n      >\n        {first ? (\n          <p className={cx(\"flex items-baseline gap-2 text-xs\", user && \"flex-row-reverse\")}>\n            <span className=\"font-medium text-foreground\">{name}</span>\n            {date ? (\n              <time dateTime={date.toISOString()} suppressHydrationWarning className=\"text-muted-foreground\">\n                {timeOf(date)}\n              </time>\n            ) : null}\n          </p>\n        ) : null}\n\n        {!user && (reasoning || (thinking && reasoning !== null)) ? (\n          <Reasoning text={reasoning} seconds={message.reasoningDuration} thinking={thinking} />\n        ) : null}\n\n        {editing && user && onEdit ? (\n          <EditBox\n            initial={text}\n            onCancel={() => setEditing(false)}\n            onSave={async (next) => {\n              const r = await onEdit(message, next);\n              if (!(r && r.ok === false)) setEditing(false);\n              return r;\n            }}\n          />\n        ) : text || (streaming && reasoning === null) ? (\n          <div className={cx(\"flex max-w-full flex-col gap-1\", user ? \"relative items-end\" : \"items-start\")}>\n            <Bubble\n              from={role}\n              variant={variant}\n              first={first}\n              last={last}\n              text={text || undefined}\n              streaming={streaming && Boolean(text)}\n              className={cx(failed && \"opacity-70\", sending && \"opacity-80\")}\n            >\n              {text ? null : <Thinking />}\n            </Bubble>\n            {toolbar}\n          </div>\n        ) : null}\n\n        {feedbackError ? (\n          <p role=\"alert\" className=\"text-xs text-destructive\">\n            {feedbackError}\n          </p>\n        ) : null}\n\n        {files.length ? (\n          <ul className={cx(\"flex max-w-full flex-wrap gap-2\", user && \"justify-end\")}>\n            {files.map((f, i) => (\n              <li key={f.id ?? `${f.name}-${i}`} className=\"min-w-0 max-w-full\">\n                <Attachment name={f.name} size={f.size} type={f.type} url={f.url} href={f.href} error={f.error} />\n              </li>\n            ))}\n          </ul>\n        ) : null}\n\n        {sending ? (\n          <p className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n            <Spinner size=\"sm\" label={null} className=\"size-3\" />\n            Sending…\n          </p>\n        ) : null}\n\n        {failed ? (\n          <div role=\"alert\" className=\"flex flex-wrap items-center gap-x-2 text-xs text-destructive\">\n            <Icon name=\"warning\" size={14} />\n            <span>{message.error ? `Not sent: ${message.error}` : \"Not sent\"}</span>\n            {onRetry ? (\n              <Button variant=\"link\" size=\"sm\" className=\"min-h-9 text-xs\" onClick={() => onRetry(message)}>\n                Retry\n              </Button>\n            ) : null}\n          </div>\n        ) : null}\n\n      </div>\n    </article>\n  );\n}\n"
     },
     {
       "path": "registry/blocks/chat/text.jsx",
@@ -88,7 +88,7 @@
   "docs": "Installed to components/makersclaw/blocks/chat. Import: import { ChatThread, ChatHeader, Message, Bubble, Attachment, MessageScroller, Composer } from \"@/components/makersclaw/blocks/chat\". Props and an example: components/makersclaw/blocks/chat/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.2",
       "useWhen": "A conversation lives inside the app's own screen: a support inbox reply pane, a customer-facing assistant, comments between teammates on a record, a thread per object. Not the app window's Agent tab (the OS draws that) and not a one-off job the founder commissions (job-panel)."
     }
   }

package/r/code-editor.json

@@ -5,7 +5,7 @@
   "title": "CodeEditor",
   "description": "A code editor (CodeMirror 6) in the workspace theme: SQL with the database's tables and columns in autocomplete, JSON checked as you type with plain-words errors, or plain text; line numbers, problems underlined in the text with a dot in the gutter, find and replace, folding, and a run hook on Cmd/Ctrl+Enter that runs the selection or the statement under the cursor. A quiet status line shows problems, the cursor, the mode and a Run button. Helpers split SQL into statements and check or format JSON anywhere, the server included.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/core.json"
   ],
   "dependencies": [
     "@codemirror/state@6.7.6",
@@ -87,7 +87,7 @@
   "docs": "Installed to components/makersclaw/blocks/code-editor. Import: import { CodeEditor, useCodeEditor, LANGUAGES, SQL_DIALECTS, splitStatements, statementAt, sqlNamespace, checkJson, formatJson, stringifyJson, lineCol, offsetOf, normalizeDiagnostics } from \"@/components/makersclaw/blocks/code-editor\". Props and an example: components/makersclaw/blocks/code-editor/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.2",
       "useWhen": "A screen edits code or structured text: a SQL console, a query in a report, a JSON config or payload, a webhook body, a template, a script. json-editor and sql-console are built on it. Not for prose (doc-editor), one line of text (the kit's Input), or showing a diagram (diagram)."
     }
   }