makersclaw 0.2.0 → 0.3.0

package/registry/blocks/chart/heatmap.jsx

@@ -0,0 +1,336 @@
+"use client";
+
+import { useMemo, useRef, useState } from "react";
+import { Tooltip, cx } from "../../ui";
+import { ChartEmpty, defaultFormat, humanize, num } from "./core";
+
+// HeatmapChart — two dimensions as a grid (hour × day, weekday × week),
+// each cell shaded by its value on a sequential ramp of one chart colour.
+// Unlike the other charts it is HTML, not SVG: a real table, so a screen
+// reader walks it by row and column, and each cell is a control the arrow
+// keys move between and the kit's Tooltip names. A grid wider than its box
+// scrolls sideways inside it; the row labels stay put.
+//
+// ScaleLegend is its key ("Less ▪▪▪▪▪ More"); scaleStep and scaleShade are
+// the ramp itself, for a block that paints cells of its own.
+
+// ---- the ramp ----------------------------------------------------------------
+
+function toneVar(t) {
+  const n = typeof t === "number" ? t : Number(String(t ?? "").replace(/^chart-/, ""));
+  return `var(--color-chart-${Number.isInteger(n) && n >= 1 && n <= 5 ? n : 1})`;
+}
+
+/**
+ * Which of `steps` shades a value falls in: 0 (the lowest) … steps − 1.
+ * null for a value that is missing or not a number. Values outside
+ * [min, max] take the end shades.
+ */
+export function scaleStep(value, min, max, steps = 5) {
+  const v = num(value);
+  if (v == null) return null;
+  const n = Math.max(1, Math.round(steps) || 1);
+  const lo = num(min) ?? 0;
+  const hi = num(max) ?? lo;
+  if (!(hi > lo)) return v > lo ? n - 1 : 0;
+  const t = (v - lo) / (hi - lo);
+  return Math.min(n - 1, Math.max(0, Math.floor(t * n)));
+}
+
+// The lowest shade still reads as "some"; the highest is the colour itself.
+const FLOOR = 10;
+
+/** The fill and the text class for one shade of a ramp. */
+function shadeFor(step, steps, t) {
+  if (step == null) return { style: undefined, className: "bg-muted/40 text-muted-foreground" };
+  const n = Math.max(1, Math.round(steps) || 1);
+  const share = n === 1 ? 1 : step / (n - 1);
+  const mix = Math.round(FLOOR + (100 - FLOOR) * share);
+  return {
+    // The chart colour thinned toward transparent: over a card or the page
+    // it reads as the colour mixed with that background.
+    style: { backgroundColor: `color-mix(in oklab, ${toneVar(t)} ${mix}%, transparent)` },
+    // Dark shades carry the background's colour as text, light ones the
+    // foreground's, so a number on a cell stays readable either way.
+    className: share >= 0.7 ? "text-background" : "text-foreground",
+  };
+}
+
+/**
+ * The shade a value wears, for a cell drawn outside HeatmapChart:
+ *   const s = scaleShade(12, { min: 0, max: 40 });
+ *   <span style={s.style} className={cx("size-3 rounded-sm", s.className)} />
+ * → { step, style, className } — `style` is the fill, `className` the text
+ * colour that reads on it (and a muted fill when the value is missing).
+ */
+export function scaleShade(value, { min = 0, max = 1, steps = 5, tone = "chart-1" } = {}) {
+  const step = scaleStep(value, min, max, steps);
+  return { step, ...shadeFor(step, steps, tone) };
+}
+
+/**
+ * The key to a heatmap: the words (or numbers) at the ends and one swatch
+ * per shade between them.
+ *   labels   ["Less", "More"], or leave out for `format(min)` … `format(max)`
+ */
+export function ScaleLegend({
+  min = 0,
+  max = 1,
+  steps = 5,
+  labels,
+  tone = "chart-1",
+  format = defaultFormat,
+  shape = "square",
+  label = "Scale",
+  className,
+}) {
+  const n = Math.max(1, Math.round(steps) || 1);
+  const ends = [labels?.[0] ?? min, labels?.[1] ?? max].map((v) => (typeof v === "number" ? format(v) : v));
+  return (
+    <div
+      role="img"
+      aria-label={`${label}: ${n} shades from ${ends[0]} to ${ends[1]}`}
+      className={cx("inline-flex items-center gap-1.5 text-xs text-muted-foreground", className)}
+    >
+      <span data-nums>{ends[0]}</span>
+      <span className="flex items-center gap-0.5">
+        {Array.from({ length: n }, (_, i) => (
+          <span
+            key={i}
+            style={shadeFor(i, n, tone).style}
+            className={cx("h-3 shrink-0", shape === "pill" ? "w-3 rounded-full" : "w-4 rounded-sm")}
+          />
+        ))}
+      </span>
+      <span data-nums>{ends[1]}</span>
+    </div>
+  );
+}
+
+// ---- the chart ---------------------------------------------------------------
+
+function normalizeColumns(columns) {
+  return (columns ?? []).filter((c) => c != null).map((c) =>
+    typeof c === "string" || typeof c === "number"
+      ? { key: String(c), label: humanize(c) || String(c) }
+      : { ...c, key: String(c.key), label: c.label ?? (humanize(c.key) || String(c.key)) },
+  );
+}
+
+const sum = (vals) => {
+  const nums = vals.map(num).filter((v) => v != null);
+  return nums.length ? nums.reduce((a, b) => a + b, 0) : null;
+};
+
+export function HeatmapChart({
+  data,
+  y = "name",
+  columns,
+  formatY = (v) => (v == null ? "—" : String(v)),
+  tone = "chart-1",
+  min,
+  max,
+  steps = 5,
+  showValues = false,
+  format = defaultFormat,
+  cellShape = "square",
+  rowTotals = false,
+  colTotals = false,
+  totalLabel = "Total",
+  tooltip = true,
+  formatTooltip,
+  legend = true,
+  legendLabels,
+  onSelect,
+  label = "Heatmap",
+  description,
+  yLabel,
+  emptyLabel = "No data yet",
+  emptyBody,
+  className,
+}) {
+  const bodyRef = useRef(null);
+  const [active, setActive] = useState([0, 0]);
+
+  const rows = Array.isArray(data) ? data : [];
+  const cols = useMemo(() => normalizeColumns(columns), [columns]);
+
+  const range = useMemo(() => {
+    let lo = Infinity;
+    let hi = -Infinity;
+    for (const r of rows) for (const c of cols) {
+      const v = num(r?.[c.key]);
+      if (v == null) continue;
+      if (v < lo) lo = v;
+      if (v > hi) hi = v;
+    }
+    if (lo === Infinity) return { lo: 0, hi: 1 };
+    return { lo: Math.min(0, lo), hi };
+  }, [rows, cols]);
+  const lo = num(min) ?? range.lo;
+  const hi = num(max) ?? range.hi;
+
+  if (!rows.length || !cols.length) {
+    return (
+      <div className={className}>
+        <ChartEmpty height={160} title={emptyLabel} body={emptyBody} />
+      </div>
+    );
+  }
+
+  const nr = rows.length;
+  const nc = cols.length;
+  const pill = cellShape === "pill";
+  const rowName = (r) => formatY(r?.[y], r);
+  const tipOf = (v, r, c) =>
+    formatTooltip ? formatTooltip(v, r, c) : `${rowName(r)} · ${c.label}: ${v == null ? "no data" : format(v)}`;
+
+  const [ar, ac] = [Math.min(active[0], nr - 1), Math.min(active[1], nc - 1)];
+
+  function go(r, c) {
+    const nextR = Math.max(0, Math.min(nr - 1, r));
+    const nextC = Math.max(0, Math.min(nc - 1, c));
+    setActive([nextR, nextC]);
+    bodyRef.current?.querySelector(`[data-cell="${nextR}-${nextC}"]`)?.focus();
+  }
+
+  function onKeyDown(e) {
+    const at = e.target.closest?.("[data-cell]")?.getAttribute("data-cell");
+    if (!at) return;
+    const [r, c] = at.split("-").map(Number);
+    const moves = {
+      ArrowRight: [r, c + 1],
+      ArrowLeft: [r, c - 1],
+      ArrowDown: [r + 1, c],
+      ArrowUp: [r - 1, c],
+      Home: e.ctrlKey || e.metaKey ? [0, 0] : [r, 0],
+      End: e.ctrlKey || e.metaKey ? [nr - 1, nc - 1] : [r, nc - 1],
+    };
+    if (moves[e.key]) {
+      e.preventDefault();
+      go(...moves[e.key]);
+    } else if ((e.key === "Enter" || e.key === " ") && onSelect) {
+      e.preventDefault();
+      onSelect(rows[r], cols[c].key, num(rows[r]?.[cols[c].key]));
+    }
+  }
+
+  // What a screen reader hears after the label: the size, the range, the peak.
+  let peak = null;
+  for (const r of rows) for (const c of cols) {
+    const v = num(r?.[c.key]);
+    if (v != null && (!peak || v > peak.v)) peak = { v, r, c };
+  }
+  const said =
+    description ??
+    `${nr} rows by ${nc} columns, values from ${format(lo)} to ${format(hi)}${peak ? `; highest ${format(peak.v)} at ${rowName(peak.r)}, ${peak.c.label}` : ""}.`;
+
+  const cellBox = pill ? "h-5 min-w-6 rounded-full px-1" : "h-8 min-w-9 rounded-md px-1";
+  const totalCell = "px-1.5 text-right text-xs font-semibold text-foreground whitespace-nowrap";
+  const colSums = colTotals ? cols.map((c) => sum(rows.map((r) => r?.[c.key]))) : null;
+
+  return (
+    <div className={cx("grid gap-3", className)}>
+      <div className="overflow-x-auto">
+        <table className="w-full border-separate border-spacing-1">
+          <caption className="sr-only">
+            {label}. {said}
+          </caption>
+          <thead>
+            <tr>
+              <th scope="col" className="sticky left-0 z-[1] bg-card">
+                <span className="sr-only">{yLabel ?? (humanize(y) || "Row")}</span>
+              </th>
+              {cols.map((c) => (
+                <th key={c.key} scope="col" className="px-0.5 text-center text-2xs font-normal whitespace-nowrap text-muted-foreground">
+                  {c.label}
+                </th>
+              ))}
+              {rowTotals ? (
+                <th scope="col" className="px-1.5 text-right text-2xs font-semibold text-foreground">
+                  {totalLabel}
+                </th>
+              ) : null}
+            </tr>
+          </thead>
+          <tbody ref={bodyRef} onKeyDown={onKeyDown}>
+            {rows.map((r, ri) => (
+              <tr key={`${ri}-${String(r?.[y])}`}>
+                <th
+                  scope="row"
+                  className="sticky left-0 z-[1] bg-card pr-2 text-left text-xs font-normal whitespace-nowrap text-muted-foreground"
+                >
+                  {rowName(r)}
+                </th>
+                {cols.map((c, ci) => {
+                  const v = num(r?.[c.key]);
+                  const shade = shadeFor(scaleStep(v, lo, hi, steps), steps, tone);
+                  const tip = tipOf(v, r, c);
+                  const cell = (
+                    <div
+                      data-cell={`${ri}-${ci}`}
+                      tabIndex={ri === ar && ci === ac ? 0 : -1}
+                      aria-label={tip}
+                      onFocus={() => setActive([ri, ci])}
+                      onClick={onSelect ? () => onSelect(r, c.key, v) : undefined}
+                      style={shade.style}
+                      className={cx(
+                        "flex w-full items-center justify-center text-2xs font-medium outline-none",
+                        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                        onSelect && "cursor-pointer",
+                        cellBox,
+                        shade.className,
+                      )}
+                    >
+                      {showValues && v != null ? <span data-nums aria-hidden="true">{format(v)}</span> : null}
+                    </div>
+                  );
+                  return (
+                    <td key={c.key} className="p-0 [&>span]:flex">
+                      {tooltip ? (
+                        <Tooltip label={tip} delay={150}>
+                          {cell}
+                        </Tooltip>
+                      ) : (
+                        cell
+                      )}
+                    </td>
+                  );
+                })}
+                {rowTotals ? (
+                  <td data-nums className={totalCell}>
+                    {format(sum(cols.map((c) => r?.[c.key])) ?? 0)}
+                  </td>
+                ) : null}
+              </tr>
+            ))}
+          </tbody>
+          {colTotals ? (
+            <tfoot>
+              <tr>
+                <th scope="row" className="sticky left-0 z-[1] bg-card pr-2 text-left text-xs font-semibold text-foreground">
+                  {totalLabel}
+                </th>
+                {colSums.map((s, i) => (
+                  <td key={cols[i].key} data-nums className="px-0.5 text-center text-2xs font-semibold text-foreground whitespace-nowrap">
+                    {format(s ?? 0)}
+                  </td>
+                ))}
+                {rowTotals ? (
+                  <td data-nums className={totalCell}>
+                    {format(sum(colSums) ?? 0)}
+                  </td>
+                ) : null}
+              </tr>
+            </tfoot>
+          ) : null}
+        </table>
+      </div>
+      {legend ? (
+        <div className="flex justify-end">
+          <ScaleLegend min={lo} max={hi} steps={steps} tone={tone} labels={legendLabels} format={format} shape={cellShape} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/registry/blocks/chart/index.js

@@ -0,0 +1,8 @@
+// The Chart block — `makersclaw add chart`. Fixed: compose it through its
+// props (README.md beside this file); a chart it cannot be is your own
+// component in components/.
+export { LineChart, AreaChart, BarChart } from "./cartesian";
+export { PieChart } from "./pie";
+export { Sparkline } from "./sparkline";
+export { ChartLegend } from "./core";
+export { HeatmapChart, ScaleLegend, scaleStep, scaleShade } from "./heatmap";

package/registry/blocks/chart/pie.jsx

@@ -0,0 +1,245 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { cx } from "../../ui";
+import { ChartEmpty, ChartLegend, DataTable, TooltipBox, defaultFormat, humanize, num, tone, toneOf, useReveal, useWidth } from "./core";
+
+// PieChart — parts of one whole, one slice per row; `donut` opens the
+// middle and writes the total (or your words) there. Pointer, touch or the
+// arrow keys pick a slice: it lifts, and the tooltip gives its value and
+// share. The legend hides a slice and the rest re-share the whole.
+
+const TAU = Math.PI * 2;
+
+function point(cx0, cy0, r, a) {
+  return [cx0 + r * Math.cos(a), cy0 + r * Math.sin(a)];
+}
+
+const f = (n) => Math.round(n * 100) / 100;
+
+function slicePath(c, r, inner, a0, a1) {
+  // A whole circle cannot be one arc: draw it as two halves.
+  if (a1 - a0 >= TAU - 1e-6) {
+    const mid = a0 + Math.PI;
+    return slicePath(c, r, inner, a0, mid) + slicePath(c, r, inner, mid, a1);
+  }
+  const large = a1 - a0 > Math.PI ? 1 : 0;
+  const [x0, y0] = point(c.x, c.y, r, a0);
+  const [x1, y1] = point(c.x, c.y, r, a1);
+  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`;
+  const [x2, y2] = point(c.x, c.y, inner, a1);
+  const [x3, y3] = point(c.x, c.y, inner, a0);
+  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`;
+}
+
+export function PieChart({
+  data,
+  value = "value",
+  name = "name",
+  format = defaultFormat,
+  formatName = (v) => (v == null ? "" : String(v)),
+  label = "Chart",
+  description,
+  height = 240,
+  donut = false,
+  centerLabel,
+  totalLabel = "Total",
+  legend = true,
+  legendValues = "percent",
+  tooltip = true,
+  onSelect,
+  emptyLabel = "No data yet",
+  emptyBody,
+  className,
+}) {
+  const [boxRef, width] = useWidth();
+  const [hidden, setHidden] = useState(() => new Set());
+  const [active, setActive] = useState(null);
+  const [keyed, setKeyed] = useState(false);
+  const shown = useReveal(width > 0);
+
+  const rows = Array.isArray(data) ? data : [];
+  const slices = useMemo(
+    () =>
+      rows.map((r, i) => ({
+        row: r,
+        key: String(r?.[name] ?? i),
+        label: formatName(r?.[name], r) || humanize(r?.[name]),
+        tone: toneOf(r, i),
+        value: Math.max(0, num(r?.[value]) ?? 0),
+      })),
+    [rows, name, value], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const live = slices.filter((s) => !hidden.has(s.key) && s.value > 0);
+  const total = live.reduce((sum, s) => sum + s.value, 0);
+  const pct = (v) => (total ? `${Math.round((v / total) * 1000) / 10}%` : "0%");
+
+  const size = Math.max(0, Math.min(width, height));
+  const c = { x: width / 2, y: height / 2 };
+  const r = Math.max(0, size / 2 - 6);
+  const inner = donut ? r * 0.62 : 0;
+
+  let a = -Math.PI / 2;
+  const arcs = live.map((s) => {
+    const span = total ? (s.value / total) * TAU : 0;
+    // A gap between slices by angle, not a stroke: no guess at the colour
+    // of whatever the chart sits on.
+    const pad = live.length > 1 ? Math.min(0.012, span / 4) : 0;
+    const out = { ...s, a0: a, a1: a + span, pad };
+    a += span;
+    return out;
+  });
+
+  function onKeyDown(e) {
+    if (!arcs.length) return;
+    let next = null;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = active == null ? 0 : (active + 1) % arcs.length;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = active == null ? arcs.length - 1 : (active - 1 + arcs.length) % arcs.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = arcs.length - 1;
+    else if (e.key === "Escape") return setActive(null);
+    else if ((e.key === "Enter" || e.key === " ") && onSelect && active != null) {
+      e.preventDefault();
+      onSelect(arcs[active].row, active);
+      return;
+    }
+    if (next == null) return;
+    e.preventDefault();
+    setKeyed(true);
+    setActive(next);
+  }
+
+  const summary = arcs.length
+    ? `${arcs.length} parts of ${format(total)}: ${arcs
+        .slice()
+        .sort((p, q) => q.value - p.value)
+        .map((s) => `${s.label} ${format(s.value)} (${pct(s.value)})`)
+        .join(", ")}.`
+    : "";
+
+  const legendNode = legend ? (
+    <ChartLegend
+      items={slices.map((s) => ({
+        key: s.key,
+        label: s.label,
+        tone: s.tone,
+        value: hidden.has(s.key) ? null : legendValues === "value" ? format(s.value) : legendValues === "percent" ? pct(s.value) : null,
+      }))}
+      hidden={hidden}
+      onToggle={(key) => {
+        setActive(null);
+        setHidden((h) => {
+          const next = new Set(h);
+          if (next.has(key)) next.delete(key);
+          else next.add(key);
+          return next;
+        });
+      }}
+      label={`${label}: parts`}
+    />
+  ) : null;
+
+  if (!rows.length) {
+    return (
+      <div className={cx("grid gap-3", className)}>
+        <ChartEmpty height={height} title={emptyLabel} body={emptyBody} />
+      </div>
+    );
+  }
+
+  const hit = active != null ? arcs[active] : null;
+  let tipAt = null;
+  // A donut says it in its middle; a pie needs the box.
+  if (hit && tooltip && !donut) {
+    const mid = (hit.a0 + hit.a1) / 2;
+    const [tx, ty] = point(c.x, c.y, (r + inner) / 2 + (donut ? 0 : r * 0.15), mid);
+    tipAt = { x: tx, y: ty, flip: tx > c.x, middle: true };
+  }
+  const centre =
+    centerLabel !== undefined
+      ? typeof centerLabel === "object" && centerLabel !== null && !("$$typeof" in centerLabel)
+        ? centerLabel
+        : { value: centerLabel }
+      : { value: format(total), label: totalLabel };
+
+  return (
+    <div className={cx("grid min-w-0 gap-3", className)}>
+      <div
+        ref={boxRef}
+        tabIndex={0}
+        role="group"
+        aria-label={`${label}. Arrow keys read each part.`}
+        onKeyDown={onKeyDown}
+        onFocus={(e) => {
+          if (e.currentTarget.matches(":focus-visible") && active == null && arcs.length) {
+            setKeyed(true);
+            setActive(0);
+          }
+        }}
+        onBlur={() => {
+          setKeyed(false);
+          setActive(null);
+        }}
+        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"
+        style={{ height }}
+      >
+        {width > 0 ? (
+          <svg
+            role="img"
+            aria-label={`${label}. ${description ?? summary}`}
+            width={width}
+            height={height}
+            viewBox={`0 0 ${width} ${height}`}
+            className={cx("block touch-pan-y select-none", onSelect && "cursor-pointer")}
+            onPointerLeave={() => !keyed && setActive(null)}
+          >
+            {/* raw: an SVG drawing — no kit part draws a chart. */}
+            {arcs.length === 0 ? (
+              <circle cx={c.x} cy={c.y} r={r} className="fill-muted" />
+            ) : null}
+            <g
+              style={{ transform: shown ? "none" : "rotate(-60deg) scale(0.9)", transformOrigin: `${c.x}px ${c.y}px`, opacity: shown ? 1 : 0 }}
+              className="motion-safe:transition-all motion-safe:duration-700 motion-safe:ease-out"
+            >
+              {arcs.map((s, i) => (
+                <path
+                  key={s.key}
+                  d={slicePath(c, active === i ? r + 4 : r, inner, s.a0 + s.pad, s.a1 - s.pad)}
+                  className={cx(tone(s.tone, "fill"), active != null && active !== i && "opacity-60", "motion-safe:transition-opacity")}
+                  onPointerEnter={() => {
+                    setKeyed(false);
+                    setActive(i);
+                  }}
+                  onPointerDown={() => setActive(i)}
+                  onClick={() => onSelect?.(s.row, i)}
+                />
+              ))}
+            </g>
+            {donut && centre ? (
+              <g aria-hidden="true" textAnchor="middle">
+                <text x={c.x} y={c.y} dy={centre.label ? "-0.1em" : "0.35em"} className="fill-foreground text-2xl font-semibold" data-nums>
+                  {hit ? format(hit.value) : centre.value}
+                </text>
+                {centre.label || hit ? (
+                  <text x={c.x} y={c.y} dy="1.6em" className="fill-muted-foreground text-xs">
+                    {hit ? `${hit.label} · ${pct(hit.value)}` : centre.label}
+                  </text>
+                ) : null}
+              </g>
+            ) : null}
+          </svg>
+        ) : null}
+        {tipAt ? <TooltipBox at={tipAt} title={hit.label} rows={[{ key: hit.key, label: pct(hit.value), tone: hit.tone, value: format(hit.value) }]} /> : null}
+        <div className="sr-only" aria-live="polite">
+          {keyed && hit ? `${hit.label}: ${format(hit.value)}, ${pct(hit.value)}` : ""}
+        </div>
+      </div>
+      {legendNode}
+      <DataTable
+        caption={label}
+        head={["", "Value", "Share"]}
+        body={slices.map((s) => [s.label, format(s.value), hidden.has(s.key) ? "hidden" : pct(s.value)])}
+      />
+    </div>
+  );
+}

package/registry/blocks/chart/sparkline.jsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useId } from "react";
+import { cx } from "../../ui";
+import { defaultFormat, idFrom, num, tone, useReveal, useWidth } from "./core";
+
+// Sparkline — a trend with no axes, the size of a line of text: beside a
+// KPI, in a table cell. Its scale is its own low to high (not zero), so
+// the shape shows the change. A screen reader hears the first, last, low
+// and high values; there is nothing to hover.
+
+const f = (n) => Math.round(n * 100) / 100;
+
+export function Sparkline({
+  data,
+  value = "value",
+  label = "Trend",
+  format = defaultFormat,
+  tone: t = "chart-1",
+  area = true,
+  dot = true,
+  height = 36,
+  className,
+}) {
+  const uid = idFrom(useId());
+  const [boxRef, width] = useWidth();
+  const shown = useReveal(width > 0);
+
+  const vals = (Array.isArray(data) ? data : []).map((d) => num(typeof d === "object" && d !== null ? d[value] : d)).filter((v) => v != null);
+  const n = vals.length;
+  const lo = n ? Math.min(...vals) : 0;
+  const hi = n ? Math.max(...vals) : 0;
+  const pad = 3;
+  const px = (i) => pad + (n === 1 ? (width - pad * 2) / 2 : (i * (width - pad * 2)) / (n - 1));
+  const py = (v) => pad + (hi === lo ? (height - pad * 2) / 2 : (1 - (v - lo) / (hi - lo)) * (height - pad * 2));
+  const line = vals.map((v, i) => `${i ? "L" : "M"}${f(px(i))},${f(py(v))}`).join("");
+  const words = n
+    ? `${label}: from ${format(vals[0])} to ${format(vals[n - 1])}, low ${format(lo)}, high ${format(hi)}.`
+    : `${label}: no data yet.`;
+
+  return (
+    <div ref={boxRef} className={cx("min-w-0", className)} style={{ height }}>
+      {width > 0 ? (
+        <svg role="img" aria-label={words} width={width} height={height} viewBox={`0 0 ${width} ${height}`} className="block overflow-visible">
+          {/* raw: an SVG drawing — no kit part draws a chart. */}
+          {n === 0 ? (
+            <line x1={pad} x2={width - pad} y1={height / 2} y2={height / 2} className="stroke-border" strokeDasharray="3 3" />
+          ) : (
+            <>
+              <defs>
+                <clipPath id={`${uid}-clip`}>
+                  <rect
+                    x={0}
+                    y={-4}
+                    width={width + 4}
+                    height={height + 8}
+                    style={{ transform: shown ? "none" : "scaleX(0)", transformOrigin: "0 0" }}
+                    className="motion-safe:transition-transform motion-safe:duration-700 motion-safe:ease-out"
+                  />
+                </clipPath>
+                {/* An alpha mask, not a colour: the fill fades downward. */}
+                <linearGradient id={`${uid}-g`} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0" stopOpacity="1" />
+                  <stop offset="1" stopOpacity="0" />
+                </linearGradient>
+                <mask id={`${uid}-fade`} style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x={0} y={0} width={width} height={height}>
+                  <rect x={0} y={0} width={width} height={height} fill={`url(#${uid}-g)`} />
+                </mask>
+              </defs>
+              <g clipPath={`url(#${uid}-clip)`}>
+                {area && n > 1 ? (
+                  <path
+                    d={`${line}L${f(px(n - 1))},${height}L${f(px(0))},${height}Z`}
+                    className={tone(t, "fill")}
+                    fillOpacity={0.3}
+                    mask={`url(#${uid}-fade)`}
+                  />
+                ) : null}
+                <path d={line} fill="none" className={tone(t, "stroke")} strokeWidth={1.75} strokeLinejoin="round" strokeLinecap="round" />
+                {dot ? <circle cx={px(n - 1)} cy={py(vals[n - 1])} r={2.5} className={tone(t, "fill")} /> : null}
+              </g>
+            </>
+          )}
+        </svg>
+      ) : null}
+    </div>
+  );
+}