@dowel-ui/react 0.7.0 → 0.8.0

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

@@ -0,0 +1,47 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/dither-bar/dither-bar.d.ts
+declare const ditherBarVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DitherBarSeries {
+  key: string;
+  label: string;
+  /** Colour token (`"primary"`) or CSS colour expression. Defaults to the palette. */
+  color?: string;
+}
+interface DitherBarDatum {
+  label: string;
+  /** Value per series key. Missing keys count as zero. */
+  values: Readonly<Record<string, number>>;
+}
+interface DitherBarProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof ditherBarVariants> {
+  series: readonly DitherBarSeries[];
+  data: readonly DitherBarDatum[];
+  /** What the chart shows. Names the image, the columns and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  /** Axis maximum. Defaults to a round number above the tallest stack. */
+  max?: number;
+  formatValue?: (value: number) => string;
+  showLegend?: boolean;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  cell?: number;
+  /** The pinned series key (controlled). */
+  activeSeries?: string | null;
+  defaultActiveSeries?: string | null;
+  onActiveSeriesChange?: (key: string | null) => void;
+  /** Label for the totals row and column. */
+  totalLabel?: string;
+  /** Header of the data table's category column. */
+  categoryLabel?: string;
+}
+/** The series whose band contains `y` (px from the top of the plot), or null. */
+declare function segmentAt(fractions: readonly number[], height: number, y: number): number | null;
+declare function DitherBar({ series, data, label, description, max, size, formatValue, showLegend, showTable, animate, cell, activeSeries, defaultActiveSeries, onActiveSeriesChange, totalLabel, categoryLabel, className, ...props }: DitherBarProps): import("react").JSX.Element;
+//#endregion
+export { DitherBar, DitherBarDatum, DitherBarProps, DitherBarSeries, ditherBarVariants, segmentAt };
+//# sourceMappingURL=dither-bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-bar.d.ts","names":[],"sources":["../../../src/components/dither-bar/dither-bar.tsx"],"mappings":";;;cAmCa,oBAAiB;;6CAS5B;UAEe;EACf;EACA;;EAEA;;UAGe;EACf;;EAEA,QAAQ,SAAS;;UAGF,uBAEb,KAAK,2CACL,oBAAoB;EACtB,iBAAiB;EACjB,eAAe;;EAEf;;EAEA;;EAEA;EACA,eAAe;EACf;;EAEA;EACA;EACA;;EAEA;EACA;EACA,wBAAwB;;EAExB;;EAEA;;;iBAIc,UACd,8BACA,gBACA;iBAWc,YACd,QACA,MACA,OACA,aACA,KACA,MACA,aACA,YACA,WACA,SACA,MACA,cACA,qBACA,sBACA,YACA,eACA,cACG,SACF,iCAAc,IAAA"}

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

@@ -0,0 +1,261 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { createSprings, ditherFill, hash2, seriesColor, tokenToCss } from "../dither-canvas/dither-engine.js";
+import { DitherCanvas, DitherTable, formatDitherValue } from "../dither-canvas/dither-canvas.js";
+import { makePath, niceMax, 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-bar/dither-bar.tsx
+const ditherBarVariants = cva("flex flex-col gap-3", {
+	variants: { size: {
+		sm: "[--dither-bar-height:8rem]",
+		md: "[--dither-bar-height:12.5rem]",
+		lg: "[--dither-bar-height:17rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** The series whose band contains `y` (px from the top of the plot), or null. */
+function segmentAt(fractions, height, y) {
+	let bottom = height;
+	for (let index = 0; index < fractions.length; index++) {
+		const top = bottom - (fractions[index] ?? 0) * height;
+		if (y >= top && y <= bottom && bottom > top) return index;
+		bottom = top;
+	}
+	return null;
+}
+function DitherBar({ series, data, label, description, max, size, formatValue = formatDitherValue, showLegend = true, showTable = false, animate = true, cell, activeSeries, defaultActiveSeries = null, onActiveSeriesChange, totalLabel = "Total", categoryLabel = "Category", className, ...props }) {
+	const [uncontrolledSeries, setUncontrolledSeries] = useState(defaultActiveSeries);
+	const [seriesPreview, setSeriesPreview] = useState(null);
+	const [columnPreview, setColumnPreview] = useState(null);
+	const [columnPinned, setColumnPinned] = useState(null);
+	const [bandPreview, setBandPreview] = useState(null);
+	const plotRef = useRef(null);
+	const pinnedKey = activeSeries !== void 0 ? activeSeries : uncontrolledSeries;
+	const pinnedSeries = pinnedKey === null ? -1 : series.findIndex((entry) => entry.key === pinnedKey);
+	const litSeries = seriesPreview ?? (pinnedSeries >= 0 ? pinnedSeries : null);
+	const litColumn = columnPreview ?? columnPinned;
+	const valueOf = (datum, key) => {
+		const value = datum.values[key] ?? 0;
+		return Number.isFinite(value) && value > 0 ? value : 0;
+	};
+	const totals = data.map((datum) => series.reduce((sum, entry) => sum + valueOf(datum, entry.key), 0));
+	const axisMax = max ?? niceMax(Math.max(0, ...totals));
+	const fractions = data.map((datum) => series.map((entry) => valueOf(datum, entry.key) / axisMax));
+	const heights = useRef(createSprings(fractions.flat().map(() => 0)));
+	const pinSeries = (index) => {
+		const key = series[index]?.key ?? null;
+		const next = pinnedKey === key ? null : key;
+		if (activeSeries === void 0) setUncontrolledSeries(next);
+		onActiveSeriesChange?.(next);
+	};
+	const draw = (ctx, frame) => {
+		const { width, height, time, animated } = frame;
+		const step = frame.cell;
+		const count = data.length;
+		const bands = series.length;
+		heights.current.set(fractions.flat());
+		const moving = heights.current.step(frame.delta, frame.reducedMotion);
+		const current = heights.current.values;
+		const column = count > 0 ? width / count : width;
+		const barWidth = Math.min(column * .62, 54);
+		for (let i = 0; i < count; i++) {
+			const x = column * (i + .5) - barWidth / 2;
+			let bottom = height;
+			const lastBand = (fractions[i] ?? []).reduce((found, fraction, band) => fraction > 0 ? band : found, -1);
+			for (let j = 0; j < bands; j++) {
+				const segment = Math.max(0, (current[i * bands + j] ?? 0) * height);
+				const top = bottom - segment;
+				if (segment >= 1) {
+					const hot = litSeries === j || litColumn === i && bandPreview === j;
+					const alpha = litSeries !== null ? litSeries === j ? 1 : .3 : litColumn !== null ? litColumn !== i ? .3 : bandPreview !== null && bandPreview !== j ? .48 : 1 : .85;
+					const y0 = top + (j === lastBand ? 0 : 1);
+					const y1 = bottom - (j === 0 ? 0 : 1);
+					const mid = {
+						x: x + barWidth / 2,
+						y: (y0 + y1) / 2
+					};
+					ditherFill(ctx, {
+						clip: makePath((sink) => {
+							traceRoundedRect(sink, x, y0, barWidth, y1 - y0, j === lastBand ? 6 : 2, 2);
+						}),
+						bounds: {
+							x,
+							y: y0,
+							width: barWidth,
+							height: y1 - y0
+						},
+						cell: step,
+						color: frame.color(seriesColor(j, series[j]?.color)),
+						alpha,
+						density: (cx, cy) => {
+							return .68 + (animated ? Math.sin(Math.hypot(cx - mid.x, cy - mid.y) * .1 - time * 2.4) * .15 : 0) + hash2(cx, cy) * .2 + (hot ? .12 : 0);
+						}
+					});
+				}
+				bottom = top;
+			}
+		}
+		return moving;
+	};
+	const onColumnPointerMove = (index, event) => {
+		const plot = plotRef.current;
+		if (columnPreview !== index) setColumnPreview(index);
+		if (!plot) return;
+		const rect = plot.getBoundingClientRect();
+		const band = segmentAt(fractions[index] ?? [], rect.height, event.clientY - rect.top);
+		if (band !== bandPreview) setBandPreview(band);
+	};
+	const breakdown = (index) => {
+		const datum = data[index];
+		if (!datum) return "";
+		return `${series.map((entry) => `${entry.label} ${formatValue(valueOf(datum, entry.key))}`).join(", ")}; ${totalLabel.toLowerCase()} ${formatValue(totals[index] ?? 0)}`;
+	};
+	const summary = description ?? `${String(data.length)} stacks of ${series.map((entry) => entry.label).join(", ")}. ${data.map((datum, index) => `${datum.label}: ${breakdown(index)}`).join(". ")}.`;
+	const readoutIndex = litColumn;
+	const readoutDatum = readoutIndex !== null ? data[readoutIndex] : void 0;
+	const columns = { gridTemplateColumns: `repeat(${String(Math.max(1, data.length))}, minmax(0, 1fr))` };
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dither-bar",
+		...props,
+		className: cn(ditherBarVariants({ size }), className),
+		children: [
+			showLegend && /* @__PURE__ */ jsx("ul", {
+				"data-slot": "dither-bar-legend",
+				"aria-label": `${label} series`,
+				className: "flex flex-wrap gap-1",
+				children: series.map((entry, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": pinnedSeries === index,
+					"data-active": litSeries === index || void 0,
+					className: cn("flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] hover:text-foreground aria-pressed:bg-accent aria-pressed:text-accent-foreground data-active:text-foreground", "outline-none focus-visible:ring-2 focus-visible:ring-ring/55 focus-visible:ring-offset-2 focus-visible:ring-offset-background"),
+					onPointerEnter: () => {
+						setSeriesPreview(index);
+					},
+					onPointerLeave: () => {
+						setSeriesPreview(null);
+					},
+					onFocus: () => {
+						setSeriesPreview(index);
+					},
+					onBlur: () => {
+						setSeriesPreview(null);
+					},
+					onClick: () => {
+						pinSeries(index);
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "size-2.5 rounded-full",
+						style: { background: tokenToCss(seriesColor(index, entry.color)) }
+					}), entry.label]
+				}) }, entry.key))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "dither-bar-plot",
+				className: "relative pb-8",
+				style: { direction: "ltr" },
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						ref: plotRef,
+						role: "img",
+						"aria-label": `${label}: ${summary}`,
+						className: "h-[var(--dither-bar-height)]",
+						children: /* @__PURE__ */ jsx(DitherCanvas, {
+							draw,
+							animate,
+							cell
+						})
+					}),
+					/* @__PURE__ */ jsx("ul", {
+						"aria-label": label,
+						className: "absolute inset-0 grid",
+						style: columns,
+						children: data.map((datum, index) => /* @__PURE__ */ jsx("li", {
+							className: "flex",
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-pressed": columnPinned === index,
+								"aria-label": `${datum.label}: ${breakdown(index)}`,
+								"data-active": litColumn === index || void 0,
+								className: cn("flex flex-1 flex-col items-center justify-end rounded-md pb-1.5 text-xs font-medium text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] data-active:text-foreground", focusRing),
+								onPointerMove: (event) => {
+									onColumnPointerMove(index, event);
+								},
+								onPointerLeave: () => {
+									setColumnPreview(null);
+									setBandPreview(null);
+								},
+								onFocus: () => {
+									setColumnPreview(index);
+								},
+								onBlur: () => {
+									setColumnPreview(null);
+								},
+								onClick: () => {
+									setColumnPinned(columnPinned === index ? null : index);
+								},
+								children: /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: datum.label
+								})
+							})
+						}, `${datum.label}-${String(index)}`))
+					}),
+					readoutDatum && readoutIndex !== null && /* @__PURE__ */ jsxs("div", {
+						"data-slot": "dither-bar-readout",
+						className: "pointer-events-none absolute top-0 z-10 min-w-32 -translate-x-1/2 rounded-md border border-border bg-popover px-2.5 py-2 text-xs text-popover-foreground shadow-md",
+						style: { left: `${String((readoutIndex + .5) / data.length * 100)}%` },
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "mb-1 font-medium",
+							children: readoutDatum.label
+						}), /* @__PURE__ */ jsxs("dl", {
+							className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5",
+							children: [series.map((entry, index) => /* @__PURE__ */ jsxs("div", {
+								"data-active": bandPreview === index || litSeries === index || void 0,
+								className: "contents text-muted-foreground data-active:text-foreground",
+								children: [/* @__PURE__ */ jsxs("dt", {
+									className: "flex items-center gap-1.5",
+									children: [/* @__PURE__ */ jsx("span", {
+										"aria-hidden": true,
+										className: "size-2 rounded-full",
+										style: { background: tokenToCss(seriesColor(index, entry.color)) }
+									}), entry.label]
+								}), /* @__PURE__ */ jsx("dd", {
+									className: "text-end tabular-nums",
+									children: formatValue(valueOf(readoutDatum, entry.key))
+								})]
+							}, entry.key)), /* @__PURE__ */ jsxs("div", {
+								className: "contents font-medium",
+								children: [/* @__PURE__ */ jsx("dt", { children: totalLabel }), /* @__PURE__ */ jsx("dd", {
+									className: "text-end tabular-nums",
+									children: formatValue(totals[readoutIndex] ?? 0)
+								})]
+							})]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(DitherTable, {
+				caption: label,
+				columns: [
+					categoryLabel,
+					...series.map((entry) => entry.label),
+					totalLabel
+				],
+				rows: data.map((datum, index) => [
+					datum.label,
+					...series.map((entry) => formatValue(valueOf(datum, entry.key))),
+					formatValue(totals[index] ?? 0)
+				]),
+				visible: showTable
+			})
+		]
+	});
+}
+//#endregion
+export { DitherBar, ditherBarVariants, segmentAt };
+
+//# sourceMappingURL=dither-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-bar.js","names":[],"sources":["../../../src/components/dither-bar/dither-bar.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Dither Stacked Bar\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useRef, useState, type ComponentPropsWithRef, type PointerEvent } from \"react\";\n\nimport {\n  createSprings,\n  DitherCanvas,\n  ditherFill,\n  DitherTable,\n  formatDitherValue,\n  hash2,\n  makePath,\n  niceMax,\n  seriesColor,\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 * Stacked bars drawn in dithered cells. Each category is a column; each series\n * a band. Hover by series: pointing at a band, or at a legend entry, lights\n * that series and dims the rest. Every column is a button over the plot, named\n * with its whole breakdown, so the readout a pointer reveals is reachable by\n * Tab too; pressing one pins its readout. Heights are springs in the engine,\n * so a data change grows the bars rather than cutting to them.\n *\n * The plot is laid out left to right in every direction: a canvas does not\n * mirror, and the column buttons have to stay over the bars they describe.\n */\n\nexport const ditherBarVariants = cva(\"flex flex-col gap-3\", {\n  variants: {\n    size: {\n      sm: \"[--dither-bar-height:8rem]\",\n      md: \"[--dither-bar-height:12.5rem]\",\n      lg: \"[--dither-bar-height:17rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface DitherBarSeries {\n  key: string;\n  label: string;\n  /** Colour token (`\"primary\"`) or CSS colour expression. Defaults to the palette. */\n  color?: string;\n}\n\nexport interface DitherBarDatum {\n  label: string;\n  /** Value per series key. Missing keys count as zero. */\n  values: Readonly<Record<string, number>>;\n}\n\nexport interface DitherBarProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof ditherBarVariants> {\n  series: readonly DitherBarSeries[];\n  data: readonly DitherBarDatum[];\n  /** What the chart shows. Names the image, the columns 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 a round number above the tallest stack. */\n  max?: number;\n  formatValue?: (value: number) => string;\n  showLegend?: boolean;\n  /** Show the data table. It is always present for assistive technology. */\n  showTable?: boolean;\n  animate?: boolean;\n  cell?: number;\n  /** The pinned series key (controlled). */\n  activeSeries?: string | null;\n  defaultActiveSeries?: string | null;\n  onActiveSeriesChange?: (key: string | null) => void;\n  /** Label for the totals row and column. */\n  totalLabel?: string;\n  /** Header of the data table's category column. */\n  categoryLabel?: string;\n}\n\n/** The series whose band contains `y` (px from the top of the plot), or null. */\nexport function segmentAt(\n  fractions: readonly number[],\n  height: number,\n  y: number,\n): number | null {\n  let bottom = height;\n  for (let index = 0; index < fractions.length; index++) {\n    const top = bottom - (fractions[index] ?? 0) * height;\n    if (y >= top && y <= bottom && bottom > top) return index;\n    bottom = top;\n  }\n  return null;\n}\n\nexport function DitherBar({\n  series,\n  data,\n  label,\n  description,\n  max,\n  size,\n  formatValue = formatDitherValue,\n  showLegend = true,\n  showTable = false,\n  animate = true,\n  cell,\n  activeSeries,\n  defaultActiveSeries = null,\n  onActiveSeriesChange,\n  totalLabel = \"Total\",\n  categoryLabel = \"Category\",\n  className,\n  ...props\n}: DitherBarProps) {\n  const [uncontrolledSeries, setUncontrolledSeries] = useState<string | null>(\n    defaultActiveSeries,\n  );\n  const [seriesPreview, setSeriesPreview] = useState<number | null>(null);\n  const [columnPreview, setColumnPreview] = useState<number | null>(null);\n  const [columnPinned, setColumnPinned] = useState<number | null>(null);\n  const [bandPreview, setBandPreview] = useState<number | null>(null);\n  const plotRef = useRef<HTMLDivElement>(null);\n\n  const pinnedKey = activeSeries !== undefined ? activeSeries : uncontrolledSeries;\n  const pinnedSeries =\n    pinnedKey === null ? -1 : series.findIndex((entry) => entry.key === pinnedKey);\n  const litSeries = seriesPreview ?? (pinnedSeries >= 0 ? pinnedSeries : null);\n  const litColumn = columnPreview ?? columnPinned;\n\n  const valueOf = (datum: DitherBarDatum, key: string) => {\n    const value = datum.values[key] ?? 0;\n    return Number.isFinite(value) && value > 0 ? value : 0;\n  };\n  const totals = data.map((datum) =>\n    series.reduce((sum, entry) => sum + valueOf(datum, entry.key), 0),\n  );\n  const axisMax = max ?? niceMax(Math.max(0, ...totals));\n  const fractions = data.map((datum) =>\n    series.map((entry) => valueOf(datum, entry.key) / axisMax),\n  );\n\n  const heights = useRef(createSprings(fractions.flat().map(() => 0)));\n\n  const pinSeries = (index: number) => {\n    const key = series[index]?.key ?? null;\n    const next = pinnedKey === key ? null : key;\n    if (activeSeries === undefined) setUncontrolledSeries(next);\n    onActiveSeriesChange?.(next);\n  };\n\n  const draw: DitherDraw = (ctx, frame) => {\n    const { width, height, time, animated } = frame;\n    const step = frame.cell;\n    const count = data.length;\n    const bands = series.length;\n    heights.current.set(fractions.flat());\n    const moving = heights.current.step(frame.delta, frame.reducedMotion);\n    const current = heights.current.values;\n    const column = count > 0 ? width / count : width;\n    const barWidth = Math.min(column * 0.62, 54);\n\n    for (let i = 0; i < count; i++) {\n      const x = column * (i + 0.5) - barWidth / 2;\n      let bottom = height;\n      const lastBand = (fractions[i] ?? []).reduce(\n        (found, fraction, band) => (fraction > 0 ? band : found),\n        -1,\n      );\n      for (let j = 0; j < bands; j++) {\n        const segment = Math.max(0, (current[i * bands + j] ?? 0) * height);\n        const top = bottom - segment;\n        if (segment >= 1) {\n          const hot = litSeries === j || (litColumn === i && bandPreview === j);\n          const alpha =\n            litSeries !== null\n              ? litSeries === j\n                ? 1\n                : 0.3\n              : litColumn !== null\n                ? litColumn !== i\n                  ? 0.3\n                  : bandPreview !== null && bandPreview !== j\n                    ? 0.48\n                    : 1\n                : 0.85;\n          // A 2px surface gap between bands: each is inset a pixel each side.\n          const y0 = top + (j === lastBand ? 0 : 1);\n          const y1 = bottom - (j === 0 ? 0 : 1);\n          const mid = { x: x + barWidth / 2, y: (y0 + y1) / 2 };\n          ditherFill(ctx, {\n            clip: makePath((sink) => {\n              traceRoundedRect(sink, x, y0, barWidth, y1 - y0, j === lastBand ? 6 : 2, 2);\n            }),\n            bounds: { x, y: y0, width: barWidth, height: y1 - y0 },\n            cell: step,\n            color: frame.color(seriesColor(j, series[j]?.color)),\n            alpha,\n            density: (cx, cy) => {\n              const wave = animated\n                ? Math.sin(Math.hypot(cx - mid.x, cy - mid.y) * 0.1 - time * 2.4) * 0.15\n                : 0;\n              return 0.68 + wave + hash2(cx, cy) * 0.2 + (hot ? 0.12 : 0);\n            },\n          });\n        }\n        bottom = top;\n      }\n    }\n    return moving;\n  };\n\n  const onColumnPointerMove = (index: number, event: PointerEvent<HTMLButtonElement>) => {\n    const plot = plotRef.current;\n    if (columnPreview !== index) setColumnPreview(index);\n    if (!plot) return;\n    const rect = plot.getBoundingClientRect();\n    const band = segmentAt(fractions[index] ?? [], rect.height, event.clientY - rect.top);\n    if (band !== bandPreview) setBandPreview(band);\n  };\n\n  const breakdown = (index: number) => {\n    const datum = data[index];\n    if (!datum) return \"\";\n    const parts = series.map(\n      (entry) => `${entry.label} ${formatValue(valueOf(datum, entry.key))}`,\n    );\n    return `${parts.join(\", \")}; ${totalLabel.toLowerCase()} ${formatValue(totals[index] ?? 0)}`;\n  };\n  const summary =\n    description ??\n    `${String(data.length)} stacks of ${series.map((entry) => entry.label).join(\", \")}. ${data\n      .map((datum, index) => `${datum.label}: ${breakdown(index)}`)\n      .join(\". \")}.`;\n  const readoutIndex = litColumn;\n  const readoutDatum = readoutIndex !== null ? data[readoutIndex] : undefined;\n  const columns = {\n    gridTemplateColumns: `repeat(${String(Math.max(1, data.length))}, minmax(0, 1fr))`,\n  };\n\n  return (\n    <div\n      data-slot=\"dither-bar\"\n      {...props}\n      className={cn(ditherBarVariants({ size }), className)}\n    >\n      {showLegend && (\n        <ul\n          data-slot=\"dither-bar-legend\"\n          aria-label={`${label} series`}\n          className=\"flex flex-wrap gap-1\"\n        >\n          {series.map((entry, index) => (\n            <li key={entry.key}>\n              <button\n                type=\"button\"\n                aria-pressed={pinnedSeries === index}\n                data-active={litSeries === index || undefined}\n                className={cn(\n                  \"flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] hover:text-foreground aria-pressed:bg-accent aria-pressed:text-accent-foreground data-active:text-foreground\",\n                  focusRing,\n                )}\n                onPointerEnter={() => {\n                  setSeriesPreview(index);\n                }}\n                onPointerLeave={() => {\n                  setSeriesPreview(null);\n                }}\n                onFocus={() => {\n                  setSeriesPreview(index);\n                }}\n                onBlur={() => {\n                  setSeriesPreview(null);\n                }}\n                onClick={() => {\n                  pinSeries(index);\n                }}\n              >\n                <span\n                  aria-hidden\n                  className=\"size-2.5 rounded-full\"\n                  style={{ background: tokenToCss(seriesColor(index, entry.color)) }}\n                />\n                {entry.label}\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      <div data-slot=\"dither-bar-plot\" className=\"relative pb-8\" style={{ direction: \"ltr\" }}>\n        <div\n          ref={plotRef}\n          role=\"img\"\n          aria-label={`${label}: ${summary}`}\n          className=\"h-[var(--dither-bar-height)]\"\n        >\n          <DitherCanvas draw={draw} animate={animate} cell={cell} />\n        </div>\n        <ul aria-label={label} className=\"absolute inset-0 grid\" style={columns}>\n          {data.map((datum, index) => (\n            <li key={`${datum.label}-${String(index)}`} className=\"flex\">\n              <button\n                type=\"button\"\n                aria-pressed={columnPinned === index}\n                aria-label={`${datum.label}: ${breakdown(index)}`}\n                data-active={litColumn === index || undefined}\n                className={cn(\n                  \"flex flex-1 flex-col items-center justify-end rounded-md pb-1.5 text-xs font-medium text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] data-active:text-foreground\",\n                  focusRing,\n                )}\n                onPointerMove={(event) => {\n                  onColumnPointerMove(index, event);\n                }}\n                onPointerLeave={() => {\n                  setColumnPreview(null);\n                  setBandPreview(null);\n                }}\n                onFocus={() => {\n                  setColumnPreview(index);\n                }}\n                onBlur={() => {\n                  setColumnPreview(null);\n                }}\n                onClick={() => {\n                  setColumnPinned(columnPinned === index ? null : index);\n                }}\n              >\n                <span className=\"truncate\">{datum.label}</span>\n              </button>\n            </li>\n          ))}\n        </ul>\n        {readoutDatum && readoutIndex !== null && (\n          <div\n            data-slot=\"dither-bar-readout\"\n            className=\"pointer-events-none absolute top-0 z-10 min-w-32 -translate-x-1/2 rounded-md border border-border bg-popover px-2.5 py-2 text-xs text-popover-foreground shadow-md\"\n            style={{ left: `${String(((readoutIndex + 0.5) / data.length) * 100)}%` }}\n          >\n            <p className=\"mb-1 font-medium\">{readoutDatum.label}</p>\n            <dl className=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5\">\n              {series.map((entry, index) => (\n                <div\n                  key={entry.key}\n                  data-active={bandPreview === index || litSeries === index || undefined}\n                  className=\"contents text-muted-foreground data-active:text-foreground\"\n                >\n                  <dt className=\"flex items-center gap-1.5\">\n                    <span\n                      aria-hidden\n                      className=\"size-2 rounded-full\"\n                      style={{ background: tokenToCss(seriesColor(index, entry.color)) }}\n                    />\n                    {entry.label}\n                  </dt>\n                  <dd className=\"text-end tabular-nums\">\n                    {formatValue(valueOf(readoutDatum, entry.key))}\n                  </dd>\n                </div>\n              ))}\n              <div className=\"contents font-medium\">\n                <dt>{totalLabel}</dt>\n                <dd className=\"text-end tabular-nums\">\n                  {formatValue(totals[readoutIndex] ?? 0)}\n                </dd>\n              </div>\n            </dl>\n          </div>\n        )}\n      </div>\n      <DitherTable\n        caption={label}\n        columns={[categoryLabel, ...series.map((entry) => entry.label), totalLabel]}\n        rows={data.map((datum, index) => [\n          datum.label,\n          ...series.map((entry) => formatValue(valueOf(datum, entry.key))),\n          formatValue(totals[index] ?? 0),\n        ])}\n        visible={showTable}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { DitherBar, DitherBarDatum, DitherBarProps, DitherBarSeries, ditherBarVariants, segmentAt } from "./dither-bar.js";
+export { DitherBar, type DitherBarDatum, type DitherBarProps, type DitherBarSeries, ditherBarVariants, segmentAt };

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

@@ -0,0 +1,2 @@
+import { DitherBar, ditherBarVariants, segmentAt } from "./dither-bar.js";
+export { DitherBar, ditherBarVariants, segmentAt };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-bar/meta.ts
+const meta = defineMeta({
+	name: "dither-bar",
+	title: "Dither Bar",
+	description: "Stacked bars drawn in dithered cells that grow on change, with series highlighting on hover and a per-column readout.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["dither-bar.tsx"],
+	a11y: "The plot is role=\"img\" with an aria-label summarising every stack. Each column is a button named with its full breakdown and total; focus shows the readout and pressing pins it (aria-pressed). Legend entries are buttons that preview a series on hover or focus and pin it when pressed. The data is always in a table, visually hidden unless showTable is set. Series are named in the legend and readout, never by colour alone."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-bar/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-bar\",\n  title: \"Dither Bar\",\n  description:\n    \"Stacked bars drawn in dithered cells that grow on change, with series highlighting on hover and a per-column readout.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"dither-bar.tsx\"],\n  a11y:\n    'The plot is role=\"img\" with an aria-label summarising every stack. Each column is a button ' +\n    \"named with its full breakdown and total; focus shows the readout and pressing pins it \" +\n    \"(aria-pressed). Legend entries are buttons that preview a series on hover or focus and pin it \" +\n    \"when pressed. The data is always in a table, visually hidden unless showTable is set. Series \" +\n    \"are named in the legend and readout, never by colour alone.\",\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,gBAAgB;CACxB,MACE;AAKJ,CAAC"}

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

@@ -0,0 +1,76 @@
+import { ComponentPropsWithRef, RefObject } from "react";
+//#region src/components/dither-canvas/dither-canvas.d.ts
+interface DitherFrame {
+  /** Box size in CSS pixels. The context is already scaled to them. */
+  width: number;
+  height: number;
+  /** Device pixel ratio in use, capped at 2. */
+  dpr: number;
+  /** Seconds of animation clock. Frozen while `animated` is false. */
+  time: number;
+  /** Seconds since the previous frame, clamped to 1/15; 0 after a pause. */
+  delta: number;
+  /** Cell pitch in CSS pixels. */
+  cell: number;
+  /** True when the clock runs: `animate` is on and motion is not reduced. */
+  animated: boolean;
+  reducedMotion: boolean;
+  /** Resolves a colour token (`"primary"`, `"--color-primary"`, `color-mix(…)`). */
+  color: (token: string) => string;
+}
+/**
+ * Draws one frame. The canvas is cleared and scaled before it is called.
+ * Return true to ask for another frame even when not animating — while a
+ * spring is still moving, for example.
+ */
+type DitherDraw = (ctx: CanvasRenderingContext2D, frame: DitherFrame) => boolean | void;
+interface DitherCanvasOptions {
+  /** Run the shimmer clock. Reduced motion stops it regardless. Default true. */
+  animate?: boolean;
+  /** Cell pitch in CSS pixels passed to the draw function. Default 4.6. */
+  cell?: number;
+}
+interface DitherCanvasHandle {
+  canvasRef: RefObject<HTMLCanvasElement | null>;
+  /** Requests one frame. Coalesced: calling it twice draws once. */
+  redraw: () => void;
+  reducedMotion: boolean;
+}
+/**
+ * Whether motion is reduced: the OS preference, or the theme's own
+ * `--motion-scale` turned down to (near) zero.
+ */
+declare function prefersReducedMotion(): boolean;
+/** Tracks `prefersReducedMotion()`, updating when the OS preference changes. */
+declare function useReducedMotionPreference(): boolean;
+/** Runs the engine for a canvas you render yourself. */
+declare function useDitherCanvas(draw: DitherDraw, options?: DitherCanvasOptions): DitherCanvasHandle;
+interface DitherCanvasProps extends Omit<ComponentPropsWithRef<"canvas">, "children">, DitherCanvasOptions {
+  draw: DitherDraw;
+}
+/**
+ * A canvas the dither engine draws. Decorative by default (aria-hidden): the
+ * chart around it carries the accessible name, readouts and data table. Give
+ * it a `role` or `aria-label` to expose it instead.
+ */
+declare function DitherCanvas({ draw, animate, cell, className, ref, ...props }: DitherCanvasProps): import("react").JSX.Element;
+/** Formats a value with the reader's locale grouping. The charts' default. */
+declare function formatDitherValue(value: number): string;
+interface DitherTableProps extends ComponentPropsWithRef<"table"> {
+  caption: string;
+  /** Column headers; the first names the row header column. */
+  columns: readonly string[];
+  /** One row per datum; the first cell becomes the row header. */
+  rows: readonly (readonly string[])[];
+  /** Show the table. Hidden tables are still read by assistive technology. */
+  visible?: boolean;
+}
+/**
+ * The chart's data as a table: always in the accessibility tree, visible on
+ * request. A canvas has no content, and an aria-label summary is too coarse to
+ * read exact values from, so every dither chart renders one.
+ */
+declare function DitherTable({ caption, columns, rows, visible, className, ...props }: DitherTableProps): import("react").JSX.Element;
+//#endregion
+export { DitherCanvas, DitherCanvasHandle, DitherCanvasOptions, DitherCanvasProps, DitherDraw, DitherFrame, DitherTable, DitherTableProps, formatDitherValue, prefersReducedMotion, useDitherCanvas, useReducedMotionPreference };
+//# sourceMappingURL=dither-canvas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-canvas.d.ts","names":[],"sources":["../../../src/components/dither-canvas/dither-canvas.tsx"],"mappings":";;UAkCiB;;EAEf;EACA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;EACA;;EAEA,QAAQ;;;;;;;KAQE,cAAc,KAAK,0BAA0B,OAAO;UAE/C;;EAEf;;EAEA;;UAGe;EACf,WAAW,UAAU;;EAErB;EACA;;;;;;iBAiBc;;iBAUA;;iBAeA,gBACd,MAAM,YACN,UAAS,sBACR;UA8Ic,0BACP,KAAK,8CAA8C;EAC3D,MAAM;;;;;;;iBAQQ,eACd,MACA,SACA,MACA,WACA,QACG,SACF,oCAAiB,IAAA;;iBAyBJ,kBAAkB;UAIjB,yBAAyB;EACxC;;EAEA;;EAEA;;EAEA;;;;;;;iBAQc,cACd,SACA,SACA,MACA,SACA,cACG,SACF,mCAAgB,IAAA"}