@dowel-ui/react 0.5.0 → 0.8.0

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

@@ -0,0 +1,186 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { createSprings, ditherFill, hash2, smoothstep } from "../dither-canvas/dither-engine.js";
+import { DitherCanvas, DitherTable, formatDitherValue } from "../dither-canvas/dither-canvas.js";
+import { makePath, tracePolyline, valueAt } 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-area/dither-area.tsx
+const ditherAreaVariants = cva("flex flex-col gap-2", {
+	variants: { size: {
+		sm: "[--dither-area-height:7.5rem]",
+		md: "[--dither-area-height:11.25rem]",
+		lg: "[--dither-area-height:16rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Space kept above the tallest value, as a fraction of the plot height. */
+const AREA_HEADROOM = .16;
+/** Distance from the top of the plot, 0..1, for a value against `max`. */
+function areaY(value, max) {
+	return 1 - .84 * (max > 0 ? Math.max(0, value) / max : 0);
+}
+/** Position across the plot, 0..1, of point `index` of `count`. */
+function pointX(index, count) {
+	return count <= 1 ? .5 : index / (count - 1);
+}
+function DitherArea({ 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);
+	const shape = useRef(createSprings(values.map(() => 0)));
+	const cursor = scrubber.index;
+	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: pointX(i, current.length) * width,
+			y: areaY(fraction, 1) * height
+		}));
+		if (points.length === 1 && points[0]) points.unshift({
+			x: 0,
+			y: points[0].y
+		});
+		if (points.length === 2 && current.length === 1 && points[1]) points[1].x = width;
+		ditherFill(ctx, {
+			bounds: {
+				x: 0,
+				y: 0,
+				width,
+				height
+			},
+			cell: step,
+			color: frame.color("foreground"),
+			alpha: .05,
+			density: () => .78
+		});
+		const focus = cursor !== null ? {
+			x: pointX(cursor, current.length) * width,
+			y: areaY(valueAt(current, cursor), 1) * height
+		} : null;
+		const radius = height * .35;
+		ditherFill(ctx, {
+			clip: makePath((sink) => {
+				tracePolyline(sink, points, height);
+			}),
+			bounds: {
+				x: 0,
+				y: 0,
+				width,
+				height
+			},
+			cell: step,
+			color: frame.color(color),
+			alpha: .8,
+			density: (cx, cy) => {
+				const glow = focus ? 1 - smoothstep(0, radius, Math.hypot(cx - focus.x, cy - focus.y)) : 0;
+				return .62 + (animated ? Math.sin(cy * .1 - time * 3.6) * .07 : 0) + glow * .34 + (hash2(cx, cy) - .5) * .08;
+			}
+		});
+		return moving;
+	};
+	const format = (i) => {
+		const datum = data[i];
+		return datum ? `${datum.label}: ${formatValue(datum.value)}` : "";
+	};
+	const peak = 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 ?? ""}. Starts at ${formatValue(values[0] ?? 0)}, ends at ${formatValue(values[count - 1] ?? 0)}; peak ${formatValue(values[peak] ?? 0)} on ${data[peak]?.label ?? ""}.`);
+	const ticks = [
+		top,
+		top * .66,
+		top * .33,
+		0
+	];
+	const axisLabels = count > 0 ? [
+		0,
+		.25,
+		.5,
+		.75,
+		1
+	].map((t) => Math.round(t * (count - 1))).filter((i, n, all) => all.indexOf(i) === n) : [];
+	const shown = scrubber.valueIndex;
+	const datum = data[shown];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dither-area",
+		...props,
+		className: cn(ditherAreaVariants({ size }), className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-3",
+			style: { direction: "ltr" },
+			children: [showAxis && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				"data-slot": "dither-area-ticks",
+				className: "relative h-[var(--dither-area-height)] w-8 shrink-0",
+				children: ticks.map((tick, i) => /* @__PURE__ */ jsx("span", {
+					className: "absolute end-0 -translate-y-1/2 font-mono text-2xs text-muted-foreground tabular-nums",
+					style: { top: `${String(areaY(tick, top) * 100)}%` },
+					children: formatValue(Math.round(tick))
+				}, i))
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					"data-slot": "dither-area-plot",
+					className: "relative h-[var(--dither-area-height)]",
+					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: format(shown),
+						x: pointX(shown, count),
+						y: areaY(values[shown] ?? 0, top),
+						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 && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					"data-slot": "dither-area-labels",
+					className: "relative h-4 font-mono text-2xs text-muted-foreground",
+					children: axisLabels.map((i) => {
+						const x = pointX(i, count);
+						return /* @__PURE__ */ jsx("span", {
+							className: "absolute top-0 whitespace-nowrap",
+							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 { AREA_HEADROOM, DitherArea, areaY, ditherAreaVariants, pointX };
+
+//# sourceMappingURL=dither-area.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-area.js","names":[],"sources":["../../../src/components/dither-area/dither-area.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Dither Area Growth\" (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  formatDitherValue,\n  hash2,\n  makePath,\n  smoothstep,\n  tracePolyline,\n  useDitherScrubber,\n  valueAt,\n  type DitherDraw,\n} from \"@/components/dither-canvas\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * An area chart filled with dithered cells over a faint cell grid, with a date\n * scrubber. The cursor follows the pointer as in amicro, cells swell around it,\n * and it is also an APG slider: Tab to the plot, then arrows step a point, Page\n * keys jump a tenth, Home/End go to the ends, Escape hides it. The readout is\n * real text and the slider announces the same thing through aria-valuetext.\n * Values are springs in the engine, so switching range morphs the curve — a\n * different point count is resampled rather than dropped to zero.\n */\n\nexport const ditherAreaVariants = cva(\"flex flex-col gap-2\", {\n  variants: {\n    size: {\n      sm: \"[--dither-area-height:7.5rem]\",\n      md: \"[--dither-area-height:11.25rem]\",\n      lg: \"[--dither-area-height:16rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface DitherAreaDatum {\n  /** The point's name on the axis, e.g. a date. */\n  label: string;\n  value: number;\n}\n\nexport interface DitherAreaProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof ditherAreaVariants> {\n  data: readonly DitherAreaDatum[];\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. */\n  max?: number;\n  formatValue?: (value: number) => string;\n  /** Colour token or CSS colour expression for the fill. Default \"primary\". */\n  color?: string;\n  /** Show value ticks and point labels. */\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  /** Cursor point (controlled); null hides it. */\n  index?: number | null;\n  defaultIndex?: number | null;\n  onIndexChange?: (index: number | null) => void;\n  /** Data table headers. */\n  categoryLabel?: string;\n  valueLabel?: string;\n}\n\n/** Space kept above the tallest value, as a fraction of the plot height. */\nexport const AREA_HEADROOM = 0.16;\n\n/** Distance from the top of the plot, 0..1, for a value against `max`. */\nexport function areaY(value: number, max: number): number {\n  return 1 - (1 - AREA_HEADROOM) * (max > 0 ? Math.max(0, value) / max : 0);\n}\n\n/** Position across the plot, 0..1, of point `index` of `count`. */\nexport function pointX(index: number, count: number): number {\n  return count <= 1 ? 0.5 : index / (count - 1);\n}\n\nexport function DitherArea({\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}: DitherAreaProps) {\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);\n  const shape = useRef(createSprings(values.map(() => 0)));\n  const cursor = scrubber.index;\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: pointX(i, current.length) * width,\n      y: areaY(fraction, 1) * height,\n    }));\n    if (points.length === 1 && points[0]) points.unshift({ x: 0, y: points[0].y });\n    if (points.length === 2 && current.length === 1 && points[1]) points[1].x = width;\n\n    // The faint cell grid the area sits on.\n    ditherFill(ctx, {\n      bounds: { x: 0, y: 0, width, height },\n      cell: step,\n      color: frame.color(\"foreground\"),\n      alpha: 0.05,\n      density: () => 0.78,\n    });\n\n    const focus =\n      cursor !== null\n        ? {\n            x: pointX(cursor, current.length) * width,\n            y: areaY(valueAt(current, cursor), 1) * height,\n          }\n        : null;\n    const radius = height * 0.35;\n    ditherFill(ctx, {\n      clip: makePath((sink) => {\n        tracePolyline(sink, points, height);\n      }),\n      bounds: { x: 0, y: 0, width, height },\n      cell: step,\n      color: frame.color(color),\n      alpha: 0.8,\n      density: (cx, cy) => {\n        const glow = focus\n          ? 1 - smoothstep(0, radius, Math.hypot(cx - focus.x, cy - focus.y))\n          : 0;\n        const wave = animated ? Math.sin(cy * 0.1 - time * 3.6) * 0.07 : 0;\n        return 0.62 + wave + glow * 0.34 + (hash2(cx, cy) - 0.5) * 0.08;\n      },\n    });\n    return moving;\n  };\n\n  const format = (i: number) => {\n    const datum = data[i];\n    return datum ? `${datum.label}: ${formatValue(datum.value)}` : \"\";\n  };\n  const peak = 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        `Starts at ${formatValue(values[0] ?? 0)}, ends at ${formatValue(values[count - 1] ?? 0)}; ` +\n        `peak ${formatValue(values[peak] ?? 0)} on ${data[peak]?.label ?? \"\"}.`);\n  const ticks = [top, top * 0.66, top * 0.33, 0];\n  const axisLabels =\n    count > 0\n      ? [0, 0.25, 0.5, 0.75, 1]\n          .map((t) => Math.round(t * (count - 1)))\n          .filter((i, n, all) => all.indexOf(i) === n)\n      : [];\n  const shown = scrubber.valueIndex;\n  const datum = data[shown];\n\n  return (\n    <div\n      data-slot=\"dither-area\"\n      {...props}\n      className={cn(ditherAreaVariants({ size }), className)}\n    >\n      <div className=\"flex gap-3\" style={{ direction: \"ltr\" }}>\n        {showAxis && (\n          <div\n            aria-hidden\n            data-slot=\"dither-area-ticks\"\n            className=\"relative h-[var(--dither-area-height)] w-8 shrink-0\"\n          >\n            {ticks.map((tick, i) => (\n              <span\n                key={i}\n                className=\"absolute end-0 -translate-y-1/2 font-mono text-2xs text-muted-foreground tabular-nums\"\n                style={{ top: `${String(areaY(tick, top) * 100)}%` }}\n              >\n                {formatValue(Math.round(tick))}\n              </span>\n            ))}\n          </div>\n        )}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n          <div data-slot=\"dither-area-plot\" className=\"relative h-[var(--dither-area-height)]\">\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={format(shown)}\n                x={pointX(shown, count)}\n                y={areaY(values[shown] ?? 0, top)}\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\">\n                        {formatValue(datum.value)}\n                      </span>\n                    </>\n                  )\n                }\n              />\n            )}\n          </div>\n          {showAxis && (\n            <div\n              aria-hidden\n              data-slot=\"dither-area-labels\"\n              className=\"relative h-4 font-mono text-2xs text-muted-foreground\"\n            >\n              {axisLabels.map((i) => {\n                const x = pointX(i, count);\n                return (\n                  <span\n                    key={i}\n                    className=\"absolute top-0 whitespace-nowrap\"\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        </div>\n      </div>\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-area/index.d.ts

@@ -0,0 +1,2 @@
+import { AREA_HEADROOM, DitherArea, DitherAreaDatum, DitherAreaProps, areaY, ditherAreaVariants, pointX } from "./dither-area.js";
+export { AREA_HEADROOM, DitherArea, type DitherAreaDatum, type DitherAreaProps, areaY, ditherAreaVariants, pointX };

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

@@ -0,0 +1,2 @@
+import { AREA_HEADROOM, DitherArea, areaY, ditherAreaVariants, pointX } from "./dither-area.js";
+export { AREA_HEADROOM, DitherArea, areaY, ditherAreaVariants, pointX };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-area/meta.ts
+const meta = defineMeta({
+	name: "dither-area",
+	title: "Dither Area",
+	description: "An area chart filled with dithered cells over a cell grid, with a date scrubber that swells the cells around it.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["dither-area.tsx"],
+	a11y: "The plot is role=\"img\" with an aria-label giving the range, start, end and peak. The scrubber over it is a slider: arrow keys step a point, Page keys jump a tenth, Home/End go to the ends, Escape hides the cursor, and aria-valuetext announces the date and value shown in the readout. Axis ticks 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-area/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-area/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-area\",\n  title: \"Dither Area\",\n  description:\n    \"An area chart filled with dithered cells over a cell grid, with a date scrubber that swells the cells around it.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"dither-area.tsx\"],\n  a11y:\n    'The plot is role=\"img\" with an aria-label giving the range, start, end and peak. The scrubber ' +\n    \"over it is a slider: arrow keys step a point, Page keys jump a tenth, Home/End go to the ends, \" +\n    \"Escape hides the cursor, and aria-valuetext announces the date and value shown in the readout. \" +\n    \"Axis ticks 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,iBAAiB;CACzB,MACE;AAIJ,CAAC"}

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"}