@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/dither-heatmap/dither-heatmap.js

@@ -0,0 +1,298 @@
+"use client";
+import "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { createSprings, ditherFill, drift, hash2, tokenToCss } from "../dither-canvas/dither-engine.js";
+import { DitherCanvas, DitherTable, formatDitherValue } from "../dither-canvas/dither-canvas.js";
+import { makePath, traceRoundedRect } from "../dither-canvas/dither-geometry.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useRef, useState } from "react";
+//#region src/components/dither-heatmap/dither-heatmap.tsx
+const ditherHeatmapVariants = cva("flex flex-col gap-2", {
+	variants: { size: {
+		sm: "[--dither-heatmap-height:6rem]",
+		md: "[--dither-heatmap-height:9rem]",
+		lg: "[--dither-heatmap-height:12rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Gap between tiles in CSS pixels, shared by the canvas and the cell grid. */
+const HEATMAP_GAP = 2.5;
+/** A value's intensity, 0..1, against `max`, optionally quantised to `levels` steps. */
+function heatmapIntensity(value, max, levels) {
+	const t = max > 0 ? Math.min(1, (Number.isFinite(value) && value > 0 ? value : 0) / max) : 0;
+	if (levels === void 0 || levels < 2) return t;
+	return Math.round(t * (levels - 1)) / (levels - 1);
+}
+/** The cell a grid key moves to, or null when the key is not a grid key. */
+function cellFromKey(key, ctrl, cell, rows, columns) {
+	const clampRow = (row) => Math.min(rows - 1, Math.max(0, row));
+	const clampColumn = (column) => Math.min(columns - 1, Math.max(0, column));
+	switch (key) {
+		case "ArrowRight": return {
+			row: cell.row,
+			column: clampColumn(cell.column + 1)
+		};
+		case "ArrowLeft": return {
+			row: cell.row,
+			column: clampColumn(cell.column - 1)
+		};
+		case "ArrowDown": return {
+			row: clampRow(cell.row + 1),
+			column: cell.column
+		};
+		case "ArrowUp": return {
+			row: clampRow(cell.row - 1),
+			column: cell.column
+		};
+		case "Home": return ctrl ? {
+			row: 0,
+			column: 0
+		} : {
+			row: cell.row,
+			column: 0
+		};
+		case "End": return ctrl ? {
+			row: rows - 1,
+			column: columns - 1
+		} : {
+			row: cell.row,
+			column: columns - 1
+		};
+		default: return null;
+	}
+}
+const clean = (value) => value !== void 0 && Number.isFinite(value) && value > 0 ? value : 0;
+function DitherHeatmap({ rows, columns, values, label, description, max, levels, color = "primary", size, formatValue = formatDitherValue, formatCell, showAxis = true, showLegend = false, lessLabel = "Less", moreLabel = "More", showTable = false, animate = true, cell = 3, activeCell, defaultActiveCell = null, onActiveCellChange, rowLabel = "Row", className, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultActiveCell);
+	const [focusCell, setFocusCell] = useState({
+		row: 0,
+		column: 0
+	});
+	const gridRef = useRef(null);
+	const active = activeCell !== void 0 ? activeCell : uncontrolled;
+	const rowCount = rows.length;
+	const columnCount = columns.length;
+	const setActive = (next) => {
+		if (next === active || next !== null && active !== null && next.row === active.row && next.column === active.column) return;
+		if (activeCell === void 0) setUncontrolled(next);
+		onActiveCellChange?.(next);
+	};
+	const grid = rows.map((_, r) => columns.map((_, c) => clean(values[r]?.[c])));
+	const flat = grid.flat();
+	const top = max ?? Math.max(0, ...flat);
+	const targets = flat.map((value) => heatmapIntensity(value, top, levels));
+	const tiles = useRef(createSprings(targets.map(() => 0)));
+	const draw = (ctx, frame) => {
+		const { width, height, time } = frame;
+		tiles.current.set(targets);
+		const moving = tiles.current.step(frame.delta, frame.reducedMotion);
+		const current = tiles.current.values;
+		if (rowCount === 0 || columnCount === 0) return moving;
+		const tileWidth = (width - HEATMAP_GAP * (columnCount - 1)) / columnCount;
+		const tileHeight = (height - HEATMAP_GAP * (rowCount - 1)) / rowCount;
+		if (tileWidth <= 0 || tileHeight <= 0) return moving;
+		const fill = frame.color(color);
+		for (let r = 0; r < rowCount; r++) for (let c = 0; c < columnCount; c++) {
+			const x = c * (tileWidth + HEATMAP_GAP);
+			const y = r * (tileHeight + HEATMAP_GAP);
+			const level = current[r * columnCount + c] ?? 0;
+			const hot = active?.row === r && active.column === c;
+			ditherFill(ctx, {
+				clip: makePath((sink) => {
+					traceRoundedRect(sink, x, y, tileWidth, tileHeight, 2);
+				}),
+				bounds: {
+					x,
+					y,
+					width: tileWidth,
+					height: tileHeight
+				},
+				cell: frame.cell,
+				color: fill,
+				alpha: hot ? 1 : .85 * (.15 + .85 * level),
+				density: (cx, cy) => (.4 + .4 * drift(cx, cy, time * 1.2)) * (.8 + .4 * hash2(cx, cy)) + (hot ? .25 : 0)
+			});
+		}
+		return moving;
+	};
+	const describe = (r, c) => {
+		const info = {
+			row: rows[r] ?? "",
+			column: columns[c] ?? "",
+			value: grid[r]?.[c] ?? 0
+		};
+		return formatCell ? formatCell(info) : `${info.row}, ${info.column}: ${formatValue(info.value)}`;
+	};
+	const total = flat.reduce((sum, value) => sum + value, 0);
+	const peakIndex = flat.reduce((best, value, i) => value > (flat[best] ?? -Infinity) ? i : best, 0);
+	const summary = description ?? (flat.length === 0 ? "No data." : `${String(rowCount)} rows by ${String(columnCount)} columns. Total ${formatValue(total)}; peak ${describe(Math.floor(peakIndex / columnCount), peakIndex % columnCount)}.`);
+	const roving = {
+		row: Math.min(focusCell.row, Math.max(0, rowCount - 1)),
+		column: Math.min(focusCell.column, Math.max(0, columnCount - 1))
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") {
+			if (active) {
+				event.preventDefault();
+				setActive(null);
+			}
+			return;
+		}
+		const next = cellFromKey(event.key, event.ctrlKey || event.metaKey, roving, rowCount, columnCount);
+		if (!next) return;
+		event.preventDefault();
+		gridRef.current?.querySelector(`[data-row="${String(next.row)}"][data-column="${String(next.column)}"]`)?.focus();
+	};
+	const onBlur = (event) => {
+		if (!event.currentTarget.contains(event.relatedTarget)) setActive(null);
+	};
+	const gap = `${String(HEATMAP_GAP)}px`;
+	const shownColumns = columnCount > 0 ? Array.from({ length: Math.min(columnCount, 8) }, (_, i) => Math.round(i * (columnCount - 1) / Math.max(1, Math.min(columnCount, 8) - 1))).filter((i, n, all) => all.indexOf(i) === n) : [];
+	const readoutX = active ? (active.column + .5) / Math.max(1, columnCount) : 0;
+	const shift = active && (active.column === 0 || readoutX < .15) ? "0%" : active && (active.column === columnCount - 1 || readoutX > .85) ? "-100%" : "-50%";
+	const scale = levels !== void 0 && levels >= 2 ? levels : 5;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dither-heatmap",
+		...props,
+		className: cn(ditherHeatmapVariants({ size }), className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				style: { direction: "ltr" },
+				children: [showAxis && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					"data-slot": "dither-heatmap-rows",
+					className: "flex h-[var(--dither-heatmap-height)] shrink-0 flex-col font-mono text-2xs text-muted-foreground",
+					style: { gap },
+					children: rows.map((row, r) => /* @__PURE__ */ jsx("span", {
+						className: "flex flex-1 items-center",
+						children: row
+					}, `${row}-${String(r)}`))
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsxs("div", {
+						"data-slot": "dither-heatmap-plot",
+						className: "relative h-[var(--dither-heatmap-height)]",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								role: "img",
+								"aria-label": `${label}: ${summary}`,
+								className: "size-full",
+								children: /* @__PURE__ */ jsx(DitherCanvas, {
+									draw,
+									animate,
+									cell
+								})
+							}),
+							rowCount > 0 && columnCount > 0 && /* @__PURE__ */ jsx("div", {
+								ref: gridRef,
+								role: "grid",
+								tabIndex: -1,
+								"aria-label": label,
+								className: "absolute inset-0 flex flex-col",
+								style: { gap },
+								onKeyDown,
+								onBlur,
+								onPointerLeave: (event) => {
+									if (!event.currentTarget.contains(document.activeElement)) setActive(null);
+								},
+								children: rows.map((row, r) => /* @__PURE__ */ jsx("div", {
+									role: "row",
+									className: "grid flex-1",
+									style: {
+										gap,
+										gridTemplateColumns: `repeat(${String(columnCount)}, minmax(0, 1fr))`
+									},
+									children: columns.map((column, c) => /* @__PURE__ */ jsx("div", {
+										role: "gridcell",
+										"data-row": r,
+										"data-column": c,
+										"data-active": active?.row === r && active.column === c || void 0,
+										tabIndex: roving.row === r && roving.column === c ? 0 : -1,
+										className: cn("rounded-sm", "outline-none focus-visible:ring-2 focus-visible:ring-ring/55 focus-visible:ring-offset-2 focus-visible:ring-offset-background"),
+										onPointerEnter: () => {
+											setActive({
+												row: r,
+												column: c
+											});
+										},
+										onFocus: () => {
+											setFocusCell({
+												row: r,
+												column: c
+											});
+											setActive({
+												row: r,
+												column: c
+											});
+										},
+										children: /* @__PURE__ */ jsx("span", {
+											className: "sr-only",
+											children: describe(r, c)
+										})
+									}, `${column}-${String(c)}`))
+								}, `${row}-${String(r)}`))
+							}),
+							active && active.row < rowCount && active.column < columnCount && /* @__PURE__ */ jsx("div", {
+								"aria-hidden": true,
+								"data-slot": "dither-heatmap-readout",
+								className: "pointer-events-none absolute z-10 rounded-md border border-border bg-popover px-2.5 py-1 text-xs font-medium whitespace-nowrap text-popover-foreground shadow-md transition-[left,top] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+								style: {
+									left: `${String(readoutX * 100)}%`,
+									top: `${String(active.row / rowCount * 100)}%`,
+									transform: `translate(${shift}, calc(-100% - 0.375rem))`
+								},
+								children: describe(active.row, active.column)
+							})
+						]
+					}), showAxis && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						"data-slot": "dither-heatmap-columns",
+						className: "relative h-4 font-mono text-2xs text-muted-foreground",
+						children: shownColumns.map((c) => {
+							const x = (c + .5) / columnCount;
+							return /* @__PURE__ */ jsx("span", {
+								className: "absolute top-0 whitespace-nowrap",
+								style: {
+									left: `${String(x * 100)}%`,
+									transform: "translateX(-50%)"
+								},
+								children: columns[c]
+							}, c);
+						})
+					})]
+				})]
+			}),
+			showLegend && /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": true,
+				"data-slot": "dither-heatmap-legend",
+				className: "flex items-center justify-end gap-1 text-2xs text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "pe-1",
+						children: lessLabel
+					}),
+					Array.from({ length: scale }, (_, i) => /* @__PURE__ */ jsx("span", {
+						className: "size-2.5 rounded-xs",
+						style: { background: `color-mix(in oklab, ${tokenToCss(color)} ${String(Math.round((.15 + .85 * i / (scale - 1)) * 100))}%, transparent)` }
+					}, i)),
+					/* @__PURE__ */ jsx("span", {
+						className: "ps-1",
+						children: moreLabel
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(DitherTable, {
+				caption: label,
+				columns: [rowLabel, ...columns],
+				rows: rows.map((row, r) => [row, ...columns.map((_, c) => formatValue(grid[r]?.[c] ?? 0))]),
+				visible: showTable
+			})
+		]
+	});
+}
+//#endregion
+export { DitherHeatmap, HEATMAP_GAP, cellFromKey, ditherHeatmapVariants, heatmapIntensity };
+
+//# sourceMappingURL=dither-heatmap.js.map

package/dist/components/dither-heatmap/dither-heatmap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-heatmap.js","names":[],"sources":["../../../src/components/dither-heatmap/dither-heatmap.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Activity Dither Heatmap\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport {\n  createSprings,\n  DitherCanvas,\n  ditherFill,\n  DitherTable,\n  drift,\n  formatDitherValue,\n  hash2,\n  makePath,\n  tokenToCss,\n  traceRoundedRect,\n  type DitherDraw,\n} from \"@/components/dither-canvas\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * An intensity grid drawn in dithered cells: rows × columns of tiles, each\n * tile's opacity its value against the maximum — amicro's activity heatmap\n * (weeks × weekdays, five contribution levels) and its day × hour grid with a\n * hover tooltip. Values are springs in the engine, so a new period morphs.\n *\n * Over the canvas sits an APG grid of real cells with one roving tab stop:\n * Tab into it, arrows move a cell, Home/End go to the row's ends, Ctrl+Home/End\n * to the grid's corners, Escape hides the readout. Each cell's text is its\n * readout, so what the pointer's tooltip shows is what a screen reader hears.\n * The plot is laid out left to right in every direction: a canvas does not\n * mirror, and the cells have to stay over the tiles they describe.\n */\n\nexport const ditherHeatmapVariants = cva(\"flex flex-col gap-2\", {\n  variants: {\n    size: {\n      sm: \"[--dither-heatmap-height:6rem]\",\n      md: \"[--dither-heatmap-height:9rem]\",\n      lg: \"[--dither-heatmap-height:12rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface DitherHeatmapCell {\n  row: number;\n  column: number;\n}\n\nexport interface DitherHeatmapCellInfo {\n  row: string;\n  column: string;\n  value: number;\n}\n\nexport interface DitherHeatmapProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof ditherHeatmapVariants> {\n  /** Row names, top to bottom (e.g. weekdays). */\n  rows: readonly string[];\n  /** Column names, start to end (e.g. hours or weeks). */\n  columns: readonly string[];\n  /** `values[row][column]`. Missing, negative and non-finite values count as zero. */\n  values: readonly (readonly number[])[];\n  /** What the chart shows. Names the image, the grid and the data table. */\n  label: string;\n  /** Replaces the generated summary in the image's accessible name. */\n  description?: string;\n  /** Value of a full-intensity tile. Defaults to the largest value. */\n  max?: number;\n  /** Quantise intensity into this many steps (amicro's activity map uses 5). */\n  levels?: number;\n  /** Colour token or CSS colour expression. Default \"primary\". */\n  color?: string;\n  formatValue?: (value: number) => string;\n  /** The readout for one cell. Defaults to \"Row, Column: value\". */\n  formatCell?: (cell: DitherHeatmapCellInfo) => string;\n  /** Show row and column labels. */\n  showAxis?: boolean;\n  /** Show a Less → More scale. */\n  showLegend?: boolean;\n  lessLabel?: string;\n  moreLabel?: string;\n  /** Show the data table. It is always present for assistive technology. */\n  showTable?: boolean;\n  animate?: boolean;\n  /** Cell pitch in CSS pixels. Default 3: tiles are small. */\n  cell?: number;\n  /** The cell whose readout shows (controlled); null hides it. */\n  activeCell?: DitherHeatmapCell | null;\n  defaultActiveCell?: DitherHeatmapCell | null;\n  onActiveCellChange?: (cell: DitherHeatmapCell | null) => void;\n  /** Header of the data table's row-name column. */\n  rowLabel?: string;\n}\n\n/** Gap between tiles in CSS pixels, shared by the canvas and the cell grid. */\nexport const HEATMAP_GAP = 2.5;\n\n/** A value's intensity, 0..1, against `max`, optionally quantised to `levels` steps. */\nexport function heatmapIntensity(value: number, max: number, levels?: number): number {\n  const clean = Number.isFinite(value) && value > 0 ? value : 0;\n  const t = max > 0 ? Math.min(1, clean / max) : 0;\n  if (levels === undefined || levels < 2) return t;\n  return Math.round(t * (levels - 1)) / (levels - 1);\n}\n\n/** The cell a grid key moves to, or null when the key is not a grid key. */\nexport function cellFromKey(\n  key: string,\n  ctrl: boolean,\n  cell: DitherHeatmapCell,\n  rows: number,\n  columns: number,\n): DitherHeatmapCell | null {\n  const clampRow = (row: number) => Math.min(rows - 1, Math.max(0, row));\n  const clampColumn = (column: number) => Math.min(columns - 1, Math.max(0, column));\n  switch (key) {\n    case \"ArrowRight\":\n      return { row: cell.row, column: clampColumn(cell.column + 1) };\n    case \"ArrowLeft\":\n      return { row: cell.row, column: clampColumn(cell.column - 1) };\n    case \"ArrowDown\":\n      return { row: clampRow(cell.row + 1), column: cell.column };\n    case \"ArrowUp\":\n      return { row: clampRow(cell.row - 1), column: cell.column };\n    case \"Home\":\n      return ctrl ? { row: 0, column: 0 } : { row: cell.row, column: 0 };\n    case \"End\":\n      return ctrl\n        ? { row: rows - 1, column: columns - 1 }\n        : { row: cell.row, column: columns - 1 };\n    default:\n      return null;\n  }\n}\n\nconst clean = (value: number | undefined) =>\n  value !== undefined && Number.isFinite(value) && value > 0 ? value : 0;\n\nexport function DitherHeatmap({\n  rows,\n  columns,\n  values,\n  label,\n  description,\n  max,\n  levels,\n  color = \"primary\",\n  size,\n  formatValue = formatDitherValue,\n  formatCell,\n  showAxis = true,\n  showLegend = false,\n  lessLabel = \"Less\",\n  moreLabel = \"More\",\n  showTable = false,\n  animate = true,\n  cell = 3,\n  activeCell,\n  defaultActiveCell = null,\n  onActiveCellChange,\n  rowLabel = \"Row\",\n  className,\n  ...props\n}: DitherHeatmapProps) {\n  const [uncontrolled, setUncontrolled] = useState<DitherHeatmapCell | null>(defaultActiveCell);\n  const [focusCell, setFocusCell] = useState<DitherHeatmapCell>({ row: 0, column: 0 });\n  const gridRef = useRef<HTMLDivElement>(null);\n  const active = activeCell !== undefined ? activeCell : uncontrolled;\n  const rowCount = rows.length;\n  const columnCount = columns.length;\n\n  const setActive = (next: DitherHeatmapCell | null) => {\n    const same =\n      next === active ||\n      (next !== null &&\n        active !== null &&\n        next.row === active.row &&\n        next.column === active.column);\n    if (same) return;\n    if (activeCell === undefined) setUncontrolled(next);\n    onActiveCellChange?.(next);\n  };\n\n  const grid = rows.map((_, r) => columns.map((_, c) => clean(values[r]?.[c])));\n  const flat = grid.flat();\n  const top = max ?? Math.max(0, ...flat);\n  const targets = flat.map((value) => heatmapIntensity(value, top, levels));\n  const tiles = useRef(createSprings(targets.map(() => 0)));\n\n  const draw: DitherDraw = (ctx, frame) => {\n    const { width, height, time } = frame;\n    tiles.current.set(targets);\n    const moving = tiles.current.step(frame.delta, frame.reducedMotion);\n    const current = tiles.current.values;\n    if (rowCount === 0 || columnCount === 0) return moving;\n    const tileWidth = (width - HEATMAP_GAP * (columnCount - 1)) / columnCount;\n    const tileHeight = (height - HEATMAP_GAP * (rowCount - 1)) / rowCount;\n    if (tileWidth <= 0 || tileHeight <= 0) return moving;\n    const fill = frame.color(color);\n    for (let r = 0; r < rowCount; r++) {\n      for (let c = 0; c < columnCount; c++) {\n        const x = c * (tileWidth + HEATMAP_GAP);\n        const y = r * (tileHeight + HEATMAP_GAP);\n        const level = current[r * columnCount + c] ?? 0;\n        const hot = active?.row === r && active.column === c;\n        ditherFill(ctx, {\n          clip: makePath((sink) => {\n            traceRoundedRect(sink, x, y, tileWidth, tileHeight, 2);\n          }),\n          bounds: { x, y, width: tileWidth, height: tileHeight },\n          cell: frame.cell,\n          color: fill,\n          // amicro's five steps run from 15% to full, drawn at 85%.\n          alpha: hot ? 1 : 0.85 * (0.15 + 0.85 * level),\n          density: (cx, cy) =>\n            (0.4 + 0.4 * drift(cx, cy, time * 1.2)) * (0.8 + 0.4 * hash2(cx, cy)) +\n            (hot ? 0.25 : 0),\n        });\n      }\n    }\n    return moving;\n  };\n\n  const describe = (r: number, c: number) => {\n    const info = { row: rows[r] ?? \"\", column: columns[c] ?? \"\", value: grid[r]?.[c] ?? 0 };\n    return formatCell\n      ? formatCell(info)\n      : `${info.row}, ${info.column}: ${formatValue(info.value)}`;\n  };\n\n  const total = flat.reduce((sum, value) => sum + value, 0);\n  const peakIndex = flat.reduce(\n    (best, value, i) => (value > (flat[best] ?? -Infinity) ? i : best),\n    0,\n  );\n  const summary =\n    description ??\n    (flat.length === 0\n      ? \"No data.\"\n      : `${String(rowCount)} rows by ${String(columnCount)} columns. Total ${formatValue(total)}; ` +\n        `peak ${describe(Math.floor(peakIndex / columnCount), peakIndex % columnCount)}.`);\n\n  const roving = {\n    row: Math.min(focusCell.row, Math.max(0, rowCount - 1)),\n    column: Math.min(focusCell.column, Math.max(0, columnCount - 1)),\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \"Escape\") {\n      if (active) {\n        event.preventDefault();\n        setActive(null);\n      }\n      return;\n    }\n    const next = cellFromKey(\n      event.key,\n      event.ctrlKey || event.metaKey,\n      roving,\n      rowCount,\n      columnCount,\n    );\n    if (!next) return;\n    event.preventDefault();\n    // Focusing the cell moves the tab stop and the readout (its onFocus).\n    gridRef.current\n      ?.querySelector<HTMLElement>(\n        `[data-row=\"${String(next.row)}\"][data-column=\"${String(next.column)}\"]`,\n      )\n      ?.focus();\n  };\n\n  const onBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!event.currentTarget.contains(event.relatedTarget)) setActive(null);\n  };\n\n  const gap = `${String(HEATMAP_GAP)}px`;\n  const shownColumns =\n    columnCount > 0\n      ? Array.from({ length: Math.min(columnCount, 8) }, (_, i) =>\n          Math.round((i * (columnCount - 1)) / Math.max(1, Math.min(columnCount, 8) - 1)),\n        ).filter((i, n, all) => all.indexOf(i) === n)\n      : [];\n  const readoutX = active ? (active.column + 0.5) / Math.max(1, columnCount) : 0;\n  // Keep the readout inside the plot at either edge.\n  const shift =\n    active && (active.column === 0 || readoutX < 0.15)\n      ? \"0%\"\n      : active && (active.column === columnCount - 1 || readoutX > 0.85)\n        ? \"-100%\"\n        : \"-50%\";\n  const scale = levels !== undefined && levels >= 2 ? levels : 5;\n\n  return (\n    <div\n      data-slot=\"dither-heatmap\"\n      {...props}\n      className={cn(ditherHeatmapVariants({ size }), className)}\n    >\n      <div className=\"flex gap-2\" style={{ direction: \"ltr\" }}>\n        {showAxis && (\n          <div\n            aria-hidden\n            data-slot=\"dither-heatmap-rows\"\n            className=\"flex h-[var(--dither-heatmap-height)] shrink-0 flex-col font-mono text-2xs text-muted-foreground\"\n            style={{ gap }}\n          >\n            {rows.map((row, r) => (\n              <span key={`${row}-${String(r)}`} className=\"flex flex-1 items-center\">\n                {row}\n              </span>\n            ))}\n          </div>\n        )}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n          <div\n            data-slot=\"dither-heatmap-plot\"\n            className=\"relative h-[var(--dither-heatmap-height)]\"\n          >\n            <div role=\"img\" aria-label={`${label}: ${summary}`} className=\"size-full\">\n              <DitherCanvas draw={draw} animate={animate} cell={cell} />\n            </div>\n            {rowCount > 0 && columnCount > 0 && (\n              <div\n                ref={gridRef}\n                role=\"grid\"\n                // Focusable only by script, so the one roving cell stays the tab stop.\n                tabIndex={-1}\n                aria-label={label}\n                className=\"absolute inset-0 flex flex-col\"\n                style={{ gap }}\n                onKeyDown={onKeyDown}\n                onBlur={onBlur}\n                onPointerLeave={(event) => {\n                  if (!event.currentTarget.contains(document.activeElement)) setActive(null);\n                }}\n              >\n                {rows.map((row, r) => (\n                  <div\n                    key={`${row}-${String(r)}`}\n                    role=\"row\"\n                    className=\"grid flex-1\"\n                    style={{\n                      gap,\n                      gridTemplateColumns: `repeat(${String(columnCount)}, minmax(0, 1fr))`,\n                    }}\n                  >\n                    {columns.map((column, c) => (\n                      <div\n                        key={`${column}-${String(c)}`}\n                        role=\"gridcell\"\n                        data-row={r}\n                        data-column={c}\n                        data-active={(active?.row === r && active.column === c) || undefined}\n                        tabIndex={roving.row === r && roving.column === c ? 0 : -1}\n                        className={cn(\"rounded-sm\", focusRing)}\n                        onPointerEnter={() => {\n                          setActive({ row: r, column: c });\n                        }}\n                        onFocus={() => {\n                          setFocusCell({ row: r, column: c });\n                          setActive({ row: r, column: c });\n                        }}\n                      >\n                        <span className=\"sr-only\">{describe(r, c)}</span>\n                      </div>\n                    ))}\n                  </div>\n                ))}\n              </div>\n            )}\n            {active && active.row < rowCount && active.column < columnCount && (\n              <div\n                aria-hidden\n                data-slot=\"dither-heatmap-readout\"\n                className=\"pointer-events-none absolute z-10 rounded-md border border-border bg-popover px-2.5 py-1 text-xs font-medium whitespace-nowrap text-popover-foreground shadow-md transition-[left,top] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\"\n                style={{\n                  left: `${String(readoutX * 100)}%`,\n                  top: `${String((active.row / rowCount) * 100)}%`,\n                  transform: `translate(${shift}, calc(-100% - 0.375rem))`,\n                }}\n              >\n                {describe(active.row, active.column)}\n              </div>\n            )}\n          </div>\n          {showAxis && (\n            <div\n              aria-hidden\n              data-slot=\"dither-heatmap-columns\"\n              className=\"relative h-4 font-mono text-2xs text-muted-foreground\"\n            >\n              {shownColumns.map((c) => {\n                const x = (c + 0.5) / columnCount;\n                return (\n                  <span\n                    key={c}\n                    className=\"absolute top-0 whitespace-nowrap\"\n                    style={{ left: `${String(x * 100)}%`, transform: \"translateX(-50%)\" }}\n                  >\n                    {columns[c]}\n                  </span>\n                );\n              })}\n            </div>\n          )}\n        </div>\n      </div>\n      {showLegend && (\n        <div\n          aria-hidden\n          data-slot=\"dither-heatmap-legend\"\n          className=\"flex items-center justify-end gap-1 text-2xs text-muted-foreground\"\n        >\n          <span className=\"pe-1\">{lessLabel}</span>\n          {Array.from({ length: scale }, (_, i) => (\n            <span\n              key={i}\n              className=\"size-2.5 rounded-xs\"\n              style={{\n                background: `color-mix(in oklab, ${tokenToCss(color)} ${String(\n                  Math.round((0.15 + (0.85 * i) / (scale - 1)) * 100),\n                )}%, transparent)`,\n              }}\n            />\n          ))}\n          <span className=\"ps-1\">{moreLabel}</span>\n        </div>\n      )}\n      <DitherTable\n        caption={label}\n        columns={[rowLabel, ...columns]}\n        rows={rows.map((row, r) => [\n          row,\n          ...columns.map((_, c) => formatValue(grid[r]?.[c] ?? 0)),\n        ])}\n        visible={showTable}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/dither-heatmap/index.d.ts

@@ -0,0 +1,2 @@
+import { DitherHeatmap, DitherHeatmapCell, DitherHeatmapCellInfo, DitherHeatmapProps, HEATMAP_GAP, cellFromKey, ditherHeatmapVariants, heatmapIntensity } from "./dither-heatmap.js";
+export { DitherHeatmap, type DitherHeatmapCell, type DitherHeatmapCellInfo, type DitherHeatmapProps, HEATMAP_GAP, cellFromKey, ditherHeatmapVariants, heatmapIntensity };

package/dist/components/dither-heatmap/index.js

@@ -0,0 +1,2 @@
+import { DitherHeatmap, HEATMAP_GAP, cellFromKey, ditherHeatmapVariants, heatmapIntensity } from "./dither-heatmap.js";
+export { DitherHeatmap, HEATMAP_GAP, cellFromKey, ditherHeatmapVariants, heatmapIntensity };

package/dist/components/dither-heatmap/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-heatmap/meta.ts
+const meta = defineMeta({
+	name: "dither-heatmap",
+	title: "Dither Heatmap",
+	description: "A rows × columns intensity grid drawn in dithered tiles that morph between periods, with a keyboard-navigable cell readout.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["dither-heatmap.tsx"],
+	a11y: "The plot is role=\"img\" with an aria-label giving its size, total and peak. Over it sits a role=\"grid\" of real gridcells with one roving tab stop: arrow keys move a cell, Home/End go to the row's ends, Ctrl+Home/End to the corners, Escape hides the readout. Each cell's text is its readout, so focus announces what the pointer tooltip shows. Axis labels and the scale legend are aria-hidden; the data is always in a table, visually hidden unless showTable is set."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/dither-heatmap/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-heatmap/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-heatmap\",\n  title: \"Dither Heatmap\",\n  description:\n    \"A rows × columns intensity grid drawn in dithered tiles that morph between periods, with a keyboard-navigable cell readout.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"dither-heatmap.tsx\"],\n  a11y:\n    'The plot is role=\"img\" with an aria-label giving its size, total and peak. Over it sits a ' +\n    'role=\"grid\" of real gridcells with one roving tab stop: arrow keys move a cell, Home/End go ' +\n    \"to the row's ends, Ctrl+Home/End to the corners, Escape hides the readout. Each cell's text \" +\n    \"is its readout, so focus announces what the pointer tooltip shows. Axis labels and the scale \" +\n    \"legend are aria-hidden; the data is always in a table, visually hidden unless showTable is set.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,eAAe;CACtC,OAAO,CAAC,oBAAoB;CAC5B,MACE;AAKJ,CAAC"}

package/dist/components/dither-line/dither-line.d.ts

@@ -0,0 +1,41 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/dither-line/dither-line.d.ts
+declare const ditherLineVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DitherLineDatum {
+  label: string;
+  value: number;
+}
+interface DitherLineProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof ditherLineVariants> {
+  data: readonly DitherLineDatum[];
+  /** What the chart shows. Names the image, the scrubber and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  /** Axis maximum. Defaults to the largest value plus 20% headroom. */
+  max?: number;
+  formatValue?: (value: number) => string;
+  /** Colour token or CSS colour expression for the line and fill. Default "primary". */
+  color?: string;
+  /** Show point labels under the plot. */
+  showAxis?: boolean;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  cell?: number;
+  index?: number | null;
+  defaultIndex?: number | null;
+  onIndexChange?: (index: number | null) => void;
+  categoryLabel?: string;
+  valueLabel?: string;
+}
+/** Distance from the top, 0..1, keeping half a stroke clear of each edge. */
+declare function lineY(value: number, max: number, height: number, stroke?: number): number;
+/** Which points get an axis label: every one up to 8, else about 5 spread evenly. */
+declare function axisIndices(count: number): number[];
+declare function DitherLine({ data, label, description, max, size, formatValue, color, showAxis, showTable, animate, cell, index, defaultIndex, onIndexChange, categoryLabel, valueLabel, className, ...props }: DitherLineProps): import("react").JSX.Element;
+//#endregion
+export { DitherLine, DitherLineDatum, DitherLineProps, axisIndices, ditherLineVariants, lineY };
+//# sourceMappingURL=dither-line.d.ts.map

package/dist/components/dither-line/dither-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-line.d.ts","names":[],"sources":["../../../src/components/dither-line/dither-line.tsx"],"mappings":";;;cA+Ba,qBAAkB;;6CAS7B;UAEe;EACf;EACA;;UAGe,wBAEb,KAAK,2CACL,oBAAoB;EACtB,eAAe;;EAEf;;EAEA;;EAEA;EACA,eAAe;;EAEf;;EAEA;;EAEA;EACA;EACA;EACA;EACA;EACA,iBAAiB;EACjB;EACA;;;iBAIc,MAAM,eAAe,aAAa,gBAAgB;;iBAWlD,YAAY;iBAKZ,aACd,MACA,OACA,aACA,KACA,MACA,aACA,OACA,UACA,WACA,SACA,MACA,OACA,cACA,eACA,eACA,YACA,cACG,SACF,kCAAe,IAAA"}

package/dist/components/dither-line/dither-line.js

@@ -0,0 +1,164 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { createSprings, ditherFill, drift, hash2 } from "../dither-canvas/dither-engine.js";
+import { DitherCanvas, DitherTable, formatDitherValue } from "../dither-canvas/dither-canvas.js";
+import { makePath, traceSpline } from "../dither-canvas/dither-geometry.js";
+import { DitherCursor, useDitherScrubber } from "../dither-canvas/dither-scrubber.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useRef } from "react";
+//#region src/components/dither-line/dither-line.tsx
+const ditherLineVariants = cva("flex flex-col gap-2", {
+	variants: { size: {
+		sm: "[--dither-line-height:7.5rem]",
+		md: "[--dither-line-height:11.25rem]",
+		lg: "[--dither-line-height:16rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Distance from the top, 0..1, keeping half a stroke clear of each edge. */
+function lineY(value, max, height, stroke = 2) {
+	const inset = height > 0 ? stroke / height : 0;
+	const fraction = max > 0 ? Math.min(1, Math.max(0, value) / max) : 0;
+	return inset + (1 - 2 * inset) * (1 - fraction);
+}
+function lineX(index, count) {
+	return count <= 1 ? .5 : index / (count - 1);
+}
+/** Which points get an axis label: every one up to 8, else about 5 spread evenly. */
+function axisIndices(count) {
+	if (count <= 8) return Array.from({ length: count }, (_, i) => i);
+	return [
+		0,
+		.25,
+		.5,
+		.75,
+		1
+	].map((t) => Math.round(t * (count - 1)));
+}
+function DitherLine({ data, label, description, max, size, formatValue = formatDitherValue, color = "primary", showAxis = true, showTable = false, animate = true, cell, index, defaultIndex, onIndexChange, categoryLabel = "Point", valueLabel = "Value", className, ...props }) {
+	const count = data.length;
+	const scrubber = useDitherScrubber({
+		count,
+		index,
+		defaultIndex,
+		onIndexChange
+	});
+	const values = data.map((datum) => Number.isFinite(datum.value) ? Math.max(0, datum.value) : 0);
+	const top = max ?? Math.max(1, ...values) * 1.2;
+	const shape = useRef(createSprings(values.map(() => 0)));
+	const draw = (ctx, frame) => {
+		const { width, height, time, animated } = frame;
+		const step = frame.cell;
+		shape.current.set(values.map((value) => value / top));
+		const moving = shape.current.step(frame.delta, frame.reducedMotion);
+		const current = shape.current.values;
+		const points = current.map((fraction, i) => ({
+			x: lineX(i, current.length) * width,
+			y: lineY(fraction, 1, height) * height
+		}));
+		if (points.length === 1 && points[0]) points.splice(0, 1, {
+			x: 0,
+			y: points[0].y
+		}, {
+			x: width,
+			y: points[0].y
+		});
+		if (points.length === 0) return moving;
+		const resolved = frame.color(color);
+		ditherFill(ctx, {
+			clip: makePath((sink) => {
+				traceSpline(sink, points, height);
+			}),
+			bounds: {
+				x: 0,
+				y: 0,
+				width,
+				height
+			},
+			cell: step,
+			color: resolved,
+			density: (cx, cy) => {
+				const falloff = Math.max(0, 1 - cy / height);
+				const mod = animated ? drift(cx, cy, time * 1.2) : .5;
+				return (.55 * falloff + .35 * mod) * (.8 + .4 * hash2(cx, cy));
+			}
+		});
+		ctx.beginPath();
+		traceSpline(ctx, points);
+		ctx.lineWidth = 2;
+		ctx.lineJoin = "round";
+		ctx.lineCap = "round";
+		ctx.strokeStyle = resolved;
+		ctx.stroke();
+		return moving;
+	};
+	const shown = scrubber.valueIndex;
+	const datum = data[shown];
+	const low = values.reduce((best, value, i) => value < (values[best] ?? Infinity) ? i : best, 0);
+	const high = values.reduce((best, value, i) => value > (values[best] ?? -Infinity) ? i : best, 0);
+	const summary = description ?? (count === 0 ? "No data." : `${String(count)} points from ${data[0]?.label ?? ""} to ${data[count - 1]?.label ?? ""}. High ${formatValue(values[high] ?? 0)} on ${data[high]?.label ?? ""}, low ${formatValue(values[low] ?? 0)} on ${data[low]?.label ?? ""}.`);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dither-line",
+		...props,
+		className: cn(ditherLineVariants({ size }), className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "dither-line-plot",
+				className: "relative h-[var(--dither-line-height)]",
+				style: { direction: "ltr" },
+				children: [/* @__PURE__ */ jsx("div", {
+					role: "img",
+					"aria-label": `${label}: ${summary}`,
+					className: "size-full",
+					children: /* @__PURE__ */ jsx(DitherCanvas, {
+						draw,
+						animate,
+						cell
+					})
+				}), count > 0 && /* @__PURE__ */ jsx(DitherCursor, {
+					scrubber,
+					label,
+					valueText: datum ? `${datum.label}: ${formatValue(datum.value)}` : "",
+					x: lineX(shown, count),
+					y: lineY(values[shown] ?? 0, top, 0),
+					readout: datum && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "block text-2xs text-muted-foreground uppercase",
+						children: datum.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-medium tabular-nums",
+						children: formatValue(datum.value)
+					})] })
+				})]
+			}),
+			showAxis && count > 0 && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				"data-slot": "dither-line-labels",
+				className: "relative h-4 font-mono text-2xs text-muted-foreground",
+				style: { direction: "ltr" },
+				children: axisIndices(count).map((i) => {
+					const x = lineX(i, count);
+					return /* @__PURE__ */ jsx("span", {
+						"data-active": scrubber.index === i || void 0,
+						className: "absolute top-0 whitespace-nowrap data-active:text-foreground",
+						style: {
+							left: `${String(x * 100)}%`,
+							transform: `translateX(${String(-x * 100)}%)`
+						},
+						children: data[i]?.label
+					}, i);
+				})
+			}),
+			/* @__PURE__ */ jsx(DitherTable, {
+				caption: label,
+				columns: [categoryLabel, valueLabel],
+				rows: data.map((entry) => [entry.label, formatValue(entry.value)]),
+				visible: showTable
+			})
+		]
+	});
+}
+//#endregion
+export { DitherLine, axisIndices, ditherLineVariants, lineY };
+
+//# sourceMappingURL=dither-line.js.map

package/dist/components/dither-line/dither-line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-line.js","names":[],"sources":["../../../src/components/dither-line/dither-line.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Revenue Spline Line\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useRef, type ComponentPropsWithRef } from \"react\";\n\nimport {\n  createSprings,\n  DitherCanvas,\n  DitherCursor,\n  ditherFill,\n  DitherTable,\n  drift,\n  formatDitherValue,\n  hash2,\n  makePath,\n  traceSpline,\n  useDitherScrubber,\n  type DitherDraw,\n} from \"@/components/dither-canvas\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A smooth line over a dithered gradient fill: cells are largest just under\n * the top of the plot and thin out toward the baseline, drifting on a two-sine\n * wave. amicro drew straight segments; this one is the spline its name\n * promised — monotone, so it never overshoots between two points and invents a\n * dip the data does not have. The same keyboard scrubber as DitherArea reads\n * out each point.\n */\n\nexport const ditherLineVariants = cva(\"flex flex-col gap-2\", {\n  variants: {\n    size: {\n      sm: \"[--dither-line-height:7.5rem]\",\n      md: \"[--dither-line-height:11.25rem]\",\n      lg: \"[--dither-line-height:16rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface DitherLineDatum {\n  label: string;\n  value: number;\n}\n\nexport interface DitherLineProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof ditherLineVariants> {\n  data: readonly DitherLineDatum[];\n  /** What the chart shows. Names the image, the scrubber and the data table. */\n  label: string;\n  /** Replaces the generated summary in the image's accessible name. */\n  description?: string;\n  /** Axis maximum. Defaults to the largest value plus 20% headroom. */\n  max?: number;\n  formatValue?: (value: number) => string;\n  /** Colour token or CSS colour expression for the line and fill. Default \"primary\". */\n  color?: string;\n  /** Show point labels under the plot. */\n  showAxis?: boolean;\n  /** Show the data table. It is always present for assistive technology. */\n  showTable?: boolean;\n  animate?: boolean;\n  cell?: number;\n  index?: number | null;\n  defaultIndex?: number | null;\n  onIndexChange?: (index: number | null) => void;\n  categoryLabel?: string;\n  valueLabel?: string;\n}\n\n/** Distance from the top, 0..1, keeping half a stroke clear of each edge. */\nexport function lineY(value: number, max: number, height: number, stroke = 2): number {\n  const inset = height > 0 ? stroke / height : 0;\n  const fraction = max > 0 ? Math.min(1, Math.max(0, value) / max) : 0;\n  return inset + (1 - 2 * inset) * (1 - fraction);\n}\n\nfunction lineX(index: number, count: number): number {\n  return count <= 1 ? 0.5 : index / (count - 1);\n}\n\n/** Which points get an axis label: every one up to 8, else about 5 spread evenly. */\nexport function axisIndices(count: number): number[] {\n  if (count <= 8) return Array.from({ length: count }, (_, i) => i);\n  return [0, 0.25, 0.5, 0.75, 1].map((t) => Math.round(t * (count - 1)));\n}\n\nexport function DitherLine({\n  data,\n  label,\n  description,\n  max,\n  size,\n  formatValue = formatDitherValue,\n  color = \"primary\",\n  showAxis = true,\n  showTable = false,\n  animate = true,\n  cell,\n  index,\n  defaultIndex,\n  onIndexChange,\n  categoryLabel = \"Point\",\n  valueLabel = \"Value\",\n  className,\n  ...props\n}: DitherLineProps) {\n  const count = data.length;\n  const scrubber = useDitherScrubber({ count, index, defaultIndex, onIndexChange });\n  const values = data.map((datum) =>\n    Number.isFinite(datum.value) ? Math.max(0, datum.value) : 0,\n  );\n  const top = max ?? Math.max(1, ...values) * 1.2;\n  const shape = useRef(createSprings(values.map(() => 0)));\n\n  const draw: DitherDraw = (ctx, frame) => {\n    const { width, height, time, animated } = frame;\n    const step = frame.cell;\n    shape.current.set(values.map((value) => value / top));\n    const moving = shape.current.step(frame.delta, frame.reducedMotion);\n    const current = shape.current.values;\n    const points = current.map((fraction, i) => ({\n      x: lineX(i, current.length) * width,\n      y: lineY(fraction, 1, height) * height,\n    }));\n    if (points.length === 1 && points[0])\n      points.splice(0, 1, { x: 0, y: points[0].y }, { x: width, y: points[0].y });\n    if (points.length === 0) return moving;\n    const resolved = frame.color(color);\n\n    ditherFill(ctx, {\n      clip: makePath((sink) => {\n        traceSpline(sink, points, height);\n      }),\n      bounds: { x: 0, y: 0, width, height },\n      cell: step,\n      color: resolved,\n      density: (cx, cy) => {\n        const falloff = Math.max(0, 1 - cy / height);\n        const mod = animated ? drift(cx, cy, time * 1.2) : 0.5;\n        return (0.55 * falloff + 0.35 * mod) * (0.8 + 0.4 * hash2(cx, cy));\n      },\n    });\n\n    ctx.beginPath();\n    traceSpline(ctx, points);\n    ctx.lineWidth = 2;\n    ctx.lineJoin = \"round\";\n    ctx.lineCap = \"round\";\n    ctx.strokeStyle = resolved;\n    ctx.stroke();\n    return moving;\n  };\n\n  const shown = scrubber.valueIndex;\n  const datum = data[shown];\n  const low = values.reduce(\n    (best, value, i) => (value < (values[best] ?? Infinity) ? i : best),\n    0,\n  );\n  const high = values.reduce(\n    (best, value, i) => (value > (values[best] ?? -Infinity) ? i : best),\n    0,\n  );\n  const summary =\n    description ??\n    (count === 0\n      ? \"No data.\"\n      : `${String(count)} points from ${data[0]?.label ?? \"\"} to ${data[count - 1]?.label ?? \"\"}. ` +\n        `High ${formatValue(values[high] ?? 0)} on ${data[high]?.label ?? \"\"}, ` +\n        `low ${formatValue(values[low] ?? 0)} on ${data[low]?.label ?? \"\"}.`);\n\n  return (\n    <div\n      data-slot=\"dither-line\"\n      {...props}\n      className={cn(ditherLineVariants({ size }), className)}\n    >\n      <div\n        data-slot=\"dither-line-plot\"\n        className=\"relative h-[var(--dither-line-height)]\"\n        style={{ direction: \"ltr\" }}\n      >\n        <div role=\"img\" aria-label={`${label}: ${summary}`} className=\"size-full\">\n          <DitherCanvas draw={draw} animate={animate} cell={cell} />\n        </div>\n        {count > 0 && (\n          <DitherCursor\n            scrubber={scrubber}\n            label={label}\n            valueText={datum ? `${datum.label}: ${formatValue(datum.value)}` : \"\"}\n            x={lineX(shown, count)}\n            y={lineY(values[shown] ?? 0, top, 0)}\n            readout={\n              datum && (\n                <>\n                  <span className=\"block text-2xs text-muted-foreground uppercase\">\n                    {datum.label}\n                  </span>\n                  <span className=\"font-medium tabular-nums\">{formatValue(datum.value)}</span>\n                </>\n              )\n            }\n          />\n        )}\n      </div>\n      {showAxis && count > 0 && (\n        <div\n          aria-hidden\n          data-slot=\"dither-line-labels\"\n          className=\"relative h-4 font-mono text-2xs text-muted-foreground\"\n          style={{ direction: \"ltr\" }}\n        >\n          {axisIndices(count).map((i) => {\n            const x = lineX(i, count);\n            return (\n              <span\n                key={i}\n                data-active={scrubber.index === i || undefined}\n                className=\"absolute top-0 whitespace-nowrap data-active:text-foreground\"\n                style={{\n                  left: `${String(x * 100)}%`,\n                  transform: `translateX(${String(-x * 100)}%)`,\n                }}\n              >\n                {data[i]?.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n      <DitherTable\n        caption={label}\n        columns={[categoryLabel, valueLabel]}\n        rows={data.map((entry) => [entry.label, formatValue(entry.value)])}\n        visible={showTable}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/dither-line/index.d.ts

@@ -0,0 +1,2 @@
+import { DitherLine, DitherLineDatum, DitherLineProps, axisIndices, ditherLineVariants, lineY } from "./dither-line.js";
+export { DitherLine, type DitherLineDatum, type DitherLineProps, axisIndices, ditherLineVariants, lineY };

package/dist/components/dither-line/index.js

@@ -0,0 +1,2 @@
+import { DitherLine, axisIndices, ditherLineVariants, lineY } from "./dither-line.js";
+export { DitherLine, axisIndices, ditherLineVariants, lineY };

package/dist/components/dither-line/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-line/meta.ts
+const meta = defineMeta({
+	name: "dither-line",
+	title: "Dither Line",
+	description: "A smooth monotone line over a drifting dithered gradient fill, with a keyboard-operable point scrubber.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["dither-line.tsx"],
+	a11y: "The plot is role=\"img\" with an aria-label giving the range, high and low. The scrubber over it is a slider: arrow keys step a point, Page keys jump, Home/End go to the ends, Escape hides the cursor, and aria-valuetext announces the point and value shown in the readout. The data is always in a table, visually hidden unless showTable is set."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map