@dowel-ui/react 0.7.0 → 0.8.0

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

@@ -0,0 +1,46 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/dither-donut/dither-donut.d.ts
+declare const ditherDonutVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DitherDonutDatum {
+  label: string;
+  value: number;
+  /** Colour token (`"primary"`) or CSS colour expression. Defaults to the palette. */
+  color?: string;
+}
+interface DitherDonutLabels {
+  category?: string;
+  value?: string;
+  share?: string;
+  total?: string;
+}
+interface DitherDonutProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof ditherDonutVariants> {
+  data: readonly DitherDonutDatum[];
+  /** What the chart shows. Names the image, the legend and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  variant?: "graph" | "flat";
+  /** Ring thickness as a fraction of the radius. Default 0.36. */
+  thickness?: number;
+  formatValue?: (value: number) => string;
+  /** Centre content. Defaults to the active entry, or the total; null hides it. */
+  center?: ReactNode;
+  showLegend?: boolean;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  /** Run the shimmer. Reduced motion stops it regardless. */
+  animate?: boolean;
+  cell?: number;
+  /** The pinned entry (controlled). */
+  activeIndex?: number | null;
+  defaultActiveIndex?: number | null;
+  onActiveIndexChange?: (index: number | null) => void;
+  labels?: DitherDonutLabels;
+}
+declare function DitherDonut({ data, label, description, variant, size, thickness, formatValue, center, showLegend, showTable, animate, cell, activeIndex, defaultActiveIndex, onActiveIndexChange, labels, className, ...props }: DitherDonutProps): import("react").JSX.Element;
+//#endregion
+export { DitherDonut, DitherDonutDatum, DitherDonutLabels, DitherDonutProps, ditherDonutVariants };
+//# sourceMappingURL=dither-donut.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-donut.d.ts","names":[],"sources":["../../../src/components/dither-donut/dither-donut.tsx"],"mappings":";;;cAiDa,sBAAmB;;6CAS9B;UAEe;EACf;EACA;;EAEA;;UAGe;EACf;EACA;EACA;EACA;;UAGe,yBAEb,KAAK,2CACL,oBAAoB;EACtB,eAAe;;EAEf;;EAEA;EACA;;EAEA;EACA,eAAe;;EAEf,SAAS;EACT;;EAEA;;EAEA;EACA;;EAEA;EACA;EACA,uBAAuB;EACvB,SAAS;;iBAoBK,cACd,MACA,OACA,aACA,SACA,MACA,WACA,aACA,QACA,YACA,WACA,SACA,MACA,aACA,oBACA,qBACA,QACA,cACG,SACF,mCAAgB,IAAA"}

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

@@ -0,0 +1,241 @@
+"use client";
+import "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { createSprings, ditherFill, drift, hash2, seriesColor, shimmer, smoothstep, tokenToCss } from "../dither-canvas/dither-engine.js";
+import { DitherCanvas, DitherTable, formatDitherValue } from "../dither-canvas/dither-canvas.js";
+import { angleInWedge, makePath, pieWedges, traceRoundedWedge, traceWedge, wedgeAt } from "../dither-canvas/dither-geometry.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useRef, useState } from "react";
+//#region src/components/dither-donut/dither-donut.tsx
+const ditherDonutVariants = cva("flex flex-wrap items-center gap-x-6 gap-y-4", {
+	variants: { size: {
+		sm: "[--dither-donut-size:8rem]",
+		md: "[--dither-donut-size:11rem]",
+		lg: "[--dither-donut-size:14rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+const PERCENT = new Intl.NumberFormat(void 0, {
+	style: "percent",
+	maximumFractionDigits: 0
+});
+function donutLayout(width, height, thickness, graph) {
+	const size = Math.min(width, height);
+	const pop = graph ? size * .03 : 0;
+	const outer = Math.max(0, size / 2 - pop - 1);
+	return {
+		center: {
+			x: width / 2,
+			y: height / 2
+		},
+		outer,
+		inner: outer * (1 - Math.min(.9, Math.max(.1, thickness))),
+		pop
+	};
+}
+function DitherDonut({ data, label, description, variant = "graph", size, thickness = .36, formatValue = formatDitherValue, center, showLegend = true, showTable = false, animate = true, cell, activeIndex, defaultActiveIndex = null, onActiveIndexChange, labels, className, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultActiveIndex);
+	const [preview, setPreview] = useState(null);
+	const pinned = activeIndex !== void 0 ? activeIndex : uncontrolled;
+	const active = preview ?? pinned;
+	const graph = variant === "graph";
+	const values = data.map((datum) => datum.value > 0 ? datum.value : 0);
+	const total = values.reduce((sum, value) => sum + value, 0);
+	const targets = values.map((value) => total > 0 ? value / total : 0);
+	const shares = useRef(createSprings(targets));
+	const pops = useRef(createSprings(targets.map(() => 0), {
+		stiffness: 320,
+		damping: 24
+	}));
+	const pin = (index) => {
+		const next = pinned === index ? null : index;
+		if (activeIndex === void 0) setUncontrolled(next);
+		onActiveIndexChange?.(next);
+	};
+	const draw = (ctx, frame) => {
+		const { width, height, time, animated } = frame;
+		const step = frame.cell;
+		const { center: c, outer, inner, pop } = donutLayout(width, height, thickness, graph);
+		shares.current.set(targets);
+		pops.current.set(targets.map((_, index) => index === active ? 1 : 0));
+		const sharesMoving = shares.current.step(frame.delta, frame.reducedMotion);
+		const moving = pops.current.step(frame.delta, frame.reducedMotion) || sharesMoving;
+		const popped = pops.current.values;
+		const t = time * 1.2;
+		const bounds = {
+			x: c.x - outer - step,
+			y: c.y - outer - step,
+			width: 2 * (outer + step),
+			height: 2 * (outer + step)
+		};
+		for (const wedge of pieWedges(shares.current.values, { gap: graph ? .07 : 0 })) {
+			if (wedge.share <= 0 || wedge.end <= wedge.start) continue;
+			const { index, start, end, mid } = wedge;
+			const isActive = index === active;
+			const lift = pop * (popped[index] ?? 0);
+			ctx.save();
+			ctx.translate(Math.cos(mid) * lift, Math.sin(mid) * lift);
+			const clip = makePath((sink) => {
+				if (graph) traceRoundedWedge(sink, c, inner, outer, start, end, 6);
+				else traceWedge(sink, c, inner, outer, start, end);
+			});
+			const inside = (cx, cy) => {
+				const distance = Math.hypot(cx - c.x, cy - c.y);
+				return distance >= inner - step && distance <= outer + step && angleInWedge(Math.atan2(cy - c.y, cx - c.x), start, end);
+			};
+			ditherFill(ctx, {
+				clip,
+				bounds,
+				cell: step,
+				color: frame.color(seriesColor(index, data[index]?.color)),
+				alpha: isActive ? 1 : active !== null ? .3 : graph ? .78 : .85,
+				density: (cx, cy) => {
+					if (!inside(cx, cy)) return 0;
+					const jitter = hash2(cx, cy);
+					if (!graph) return (.4 + .4 * (animated ? drift(cx, cy, t) : .5)) * (.8 + .4 * jitter);
+					const dx = cx - c.x;
+					const dy = cy - c.y;
+					const distance = Math.hypot(dx, dy);
+					const fullness = smoothstep(.62, 1, (distance - inner) / Math.max(1, outer - inner));
+					const wave = animated ? shimmer(Math.sin(distance * .1 - t), Math.sin(Math.atan2(dy, dx) * 3 + t * 1.5), Math.sin((dx + dy) * .05 + t * 2)) : .5;
+					return ((isActive ? .46 : .34) + .36 * fullness + .26 * wave) * (.78 + .42 * jitter);
+				}
+			});
+			if (isActive) {
+				const seed = animated ? 1 + Math.floor(time * 6) : 1;
+				ditherFill(ctx, {
+					clip,
+					bounds,
+					cell: step,
+					color: frame.color("foreground"),
+					alpha: .9,
+					density: (cx, cy) => inside(cx, cy) && hash2(cx, cy, seed) > .92 ? .8 : 0
+				});
+			}
+			ctx.restore();
+		}
+		return moving;
+	};
+	const onPointerMove = (event) => {
+		const rect = event.currentTarget.getBoundingClientRect();
+		const layout = donutLayout(rect.width, rect.height, thickness, graph);
+		const hit = wedgeAt(pieWedges(targets, { gap: graph ? .07 : 0 }), layout.center, layout.inner, layout.outer + layout.pop, {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		});
+		if (hit !== preview) setPreview(hit);
+	};
+	const share = (index) => PERCENT.format(targets[index] ?? 0);
+	const summary = description ?? `${data.map((datum, index) => `${datum.label} ${formatValue(datum.value)} (${share(index)})`).join(", ")}. ${labels?.total ?? "Total"} ${formatValue(total)}.`;
+	const activeDatum = active !== null ? data[active] : void 0;
+	const readout = center !== void 0 ? center : /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "text-xs text-muted-foreground",
+			children: activeDatum?.label ?? labels?.total ?? "Total"
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "text-lg font-semibold text-foreground tabular-nums",
+			children: formatValue(activeDatum ? activeDatum.value : total)
+		}),
+		activeDatum && /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-muted-foreground tabular-nums",
+			children: share(active ?? 0)
+		})
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dither-donut",
+		"data-variant": variant,
+		...props,
+		className: cn(ditherDonutVariants({ size }), className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "dither-donut-plot",
+				className: "relative size-[var(--dither-donut-size)] shrink-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					role: "img",
+					"aria-label": `${label}: ${summary}`,
+					className: "size-full",
+					onPointerMove,
+					onPointerLeave: () => {
+						setPreview(null);
+					},
+					children: /* @__PURE__ */ jsx(DitherCanvas, {
+						draw,
+						animate,
+						cell
+					})
+				}), readout !== null && /* @__PURE__ */ jsx("div", {
+					"data-slot": "dither-donut-readout",
+					className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center leading-tight",
+					children: readout
+				})]
+			}),
+			showLegend && /* @__PURE__ */ jsx("ul", {
+				"data-slot": "dither-donut-legend",
+				"aria-label": label,
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: data.map((datum, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": pinned === index,
+					"aria-label": `${datum.label}: ${formatValue(datum.value)} (${share(index)})`,
+					"data-active": active === index || void 0,
+					className: cn("flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-xs transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] hover:bg-muted aria-pressed:bg-accent aria-pressed:text-accent-foreground data-active:bg-muted", "outline-none focus-visible:ring-2 focus-visible:ring-ring/55 focus-visible:ring-offset-2 focus-visible:ring-offset-background"),
+					onPointerEnter: () => {
+						setPreview(index);
+					},
+					onPointerLeave: () => {
+						setPreview(null);
+					},
+					onFocus: () => {
+						setPreview(index);
+					},
+					onBlur: () => {
+						setPreview(null);
+					},
+					onClick: () => {
+						pin(index);
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "size-2.5 shrink-0 rounded-full",
+							style: { background: tokenToCss(seriesColor(index, datum.color)) }
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate text-start font-medium text-foreground",
+							children: datum.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-foreground tabular-nums",
+							children: formatValue(datum.value)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "w-9 text-end font-mono text-2xs text-muted-foreground",
+							children: share(index)
+						})
+					]
+				}) }, `${datum.label}-${String(index)}`))
+			}),
+			/* @__PURE__ */ jsx(DitherTable, {
+				caption: label,
+				columns: [
+					labels?.category ?? "Category",
+					labels?.value ?? "Value",
+					labels?.share ?? "Share"
+				],
+				rows: data.map((datum, index) => [
+					datum.label,
+					formatValue(datum.value),
+					share(index)
+				]),
+				visible: showTable,
+				className: showTable ? "basis-full" : void 0
+			})
+		]
+	});
+}
+//#endregion
+export { DitherDonut, ditherDonutVariants };
+
+//# sourceMappingURL=dither-donut.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-donut.js","names":[],"sources":["../../../src/components/dither-donut/dither-donut.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Dither Donut Graph\" and \"Device Usage Donut\" (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 PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport {\n  angleInWedge,\n  createSprings,\n  DitherCanvas,\n  ditherFill,\n  DitherTable,\n  drift,\n  formatDitherValue,\n  hash2,\n  makePath,\n  pieWedges,\n  seriesColor,\n  shimmer,\n  smoothstep,\n  tokenToCss,\n  traceRoundedWedge,\n  traceWedge,\n  wedgeAt,\n  type DitherDraw,\n} from \"@/components/dither-canvas\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A donut drawn in dithered cells. Two looks from amicro:\n *\n * - `graph` (Dither Donut Graph): rounded wedges with gaps, cells that grow\n *   toward the outer edge, a three-sine shimmer, and the active wedge popping\n *   outward with a scatter of highlight particles.\n * - `flat` (Device Usage Donut): plain sectors, even cells, a two-sine drift.\n *\n * Shares and pop-outs are springs in the engine, so a data change morphs.\n * Hovering a wedge or a legend entry previews it; clicking a legend entry pins\n * it (aria-pressed). The period selector in amicro's demo is consumer UI and\n * lives in the stories.\n */\n\nexport const ditherDonutVariants = cva(\"flex flex-wrap items-center gap-x-6 gap-y-4\", {\n  variants: {\n    size: {\n      sm: \"[--dither-donut-size:8rem]\",\n      md: \"[--dither-donut-size:11rem]\",\n      lg: \"[--dither-donut-size:14rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface DitherDonutDatum {\n  label: string;\n  value: number;\n  /** Colour token (`\"primary\"`) or CSS colour expression. Defaults to the palette. */\n  color?: string;\n}\n\nexport interface DitherDonutLabels {\n  category?: string;\n  value?: string;\n  share?: string;\n  total?: string;\n}\n\nexport interface DitherDonutProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof ditherDonutVariants> {\n  data: readonly DitherDonutDatum[];\n  /** What the chart shows. Names the image, the legend and the data table. */\n  label: string;\n  /** Replaces the generated summary in the image's accessible name. */\n  description?: string;\n  variant?: \"graph\" | \"flat\";\n  /** Ring thickness as a fraction of the radius. Default 0.36. */\n  thickness?: number;\n  formatValue?: (value: number) => string;\n  /** Centre content. Defaults to the active entry, or the total; null hides it. */\n  center?: ReactNode;\n  showLegend?: boolean;\n  /** Show the data table. It is always present for assistive technology. */\n  showTable?: boolean;\n  /** Run the shimmer. Reduced motion stops it regardless. */\n  animate?: boolean;\n  cell?: number;\n  /** The pinned entry (controlled). */\n  activeIndex?: number | null;\n  defaultActiveIndex?: number | null;\n  onActiveIndexChange?: (index: number | null) => void;\n  labels?: DitherDonutLabels;\n}\n\nconst PERCENT = new Intl.NumberFormat(undefined, {\n  style: \"percent\",\n  maximumFractionDigits: 0,\n});\n\nfunction donutLayout(width: number, height: number, thickness: number, graph: boolean) {\n  const size = Math.min(width, height);\n  const pop = graph ? size * 0.03 : 0;\n  const outer = Math.max(0, size / 2 - pop - 1);\n  return {\n    center: { x: width / 2, y: height / 2 },\n    outer,\n    inner: outer * (1 - Math.min(0.9, Math.max(0.1, thickness))),\n    pop,\n  };\n}\n\nexport function DitherDonut({\n  data,\n  label,\n  description,\n  variant = \"graph\",\n  size,\n  thickness = 0.36,\n  formatValue = formatDitherValue,\n  center,\n  showLegend = true,\n  showTable = false,\n  animate = true,\n  cell,\n  activeIndex,\n  defaultActiveIndex = null,\n  onActiveIndexChange,\n  labels,\n  className,\n  ...props\n}: DitherDonutProps) {\n  const [uncontrolled, setUncontrolled] = useState<number | null>(defaultActiveIndex);\n  const [preview, setPreview] = useState<number | null>(null);\n  const pinned = activeIndex !== undefined ? activeIndex : uncontrolled;\n  const active = preview ?? pinned;\n\n  const graph = variant === \"graph\";\n  const values = data.map((datum) => (datum.value > 0 ? datum.value : 0));\n  const total = values.reduce((sum, value) => sum + value, 0);\n  const targets = values.map((value) => (total > 0 ? value / total : 0));\n\n  const shares = useRef(createSprings(targets));\n  const pops = useRef(\n    createSprings(\n      targets.map(() => 0),\n      { stiffness: 320, damping: 24 },\n    ),\n  );\n\n  const pin = (index: number) => {\n    const next = pinned === index ? null : index;\n    if (activeIndex === undefined) setUncontrolled(next);\n    onActiveIndexChange?.(next);\n  };\n\n  const draw: DitherDraw = (ctx, frame) => {\n    const { width, height, time, animated } = frame;\n    const step = frame.cell;\n    const { center: c, outer, inner, pop } = donutLayout(width, height, thickness, graph);\n    shares.current.set(targets);\n    pops.current.set(targets.map((_, index) => (index === active ? 1 : 0)));\n    const sharesMoving = shares.current.step(frame.delta, frame.reducedMotion);\n    const moving = pops.current.step(frame.delta, frame.reducedMotion) || sharesMoving;\n    const popped = pops.current.values;\n    const t = time * 1.2;\n    const bounds = {\n      x: c.x - outer - step,\n      y: c.y - outer - step,\n      width: 2 * (outer + step),\n      height: 2 * (outer + step),\n    };\n\n    for (const wedge of pieWedges(shares.current.values, { gap: graph ? 0.07 : 0 })) {\n      if (wedge.share <= 0 || wedge.end <= wedge.start) continue;\n      const { index, start, end, mid } = wedge;\n      const isActive = index === active;\n      const lift = pop * (popped[index] ?? 0);\n      ctx.save();\n      ctx.translate(Math.cos(mid) * lift, Math.sin(mid) * lift);\n      const clip = makePath((sink) => {\n        if (graph) traceRoundedWedge(sink, c, inner, outer, start, end, 6);\n        else traceWedge(sink, c, inner, outer, start, end);\n      });\n      const inside = (cx: number, cy: number) => {\n        const distance = Math.hypot(cx - c.x, cy - c.y);\n        return (\n          distance >= inner - step &&\n          distance <= outer + step &&\n          angleInWedge(Math.atan2(cy - c.y, cx - c.x), start, end)\n        );\n      };\n      ditherFill(ctx, {\n        clip,\n        bounds,\n        cell: step,\n        color: frame.color(seriesColor(index, data[index]?.color)),\n        alpha: isActive ? 1 : active !== null ? 0.3 : graph ? 0.78 : 0.85,\n        density: (cx, cy) => {\n          if (!inside(cx, cy)) return 0;\n          const jitter = hash2(cx, cy);\n          if (!graph)\n            return (0.4 + 0.4 * (animated ? drift(cx, cy, t) : 0.5)) * (0.8 + 0.4 * jitter);\n          const dx = cx - c.x;\n          const dy = cy - c.y;\n          const distance = Math.hypot(dx, dy);\n          const fullness = smoothstep(0.62, 1, (distance - inner) / Math.max(1, outer - inner));\n          const wave = animated\n            ? shimmer(\n                Math.sin(distance * 0.1 - t),\n                Math.sin(Math.atan2(dy, dx) * 3 + t * 1.5),\n                Math.sin((dx + dy) * 0.05 + t * 2),\n              )\n            : 0.5;\n          return (\n            ((isActive ? 0.46 : 0.34) + 0.36 * fullness + 0.26 * wave) * (0.78 + 0.42 * jitter)\n          );\n        },\n      });\n      if (isActive) {\n        // Highlight particles: a sparse second layer, re-seeded a few times a\n        // second while animating, still under reduced motion.\n        const seed = animated ? 1 + Math.floor(time * 6) : 1;\n        ditherFill(ctx, {\n          clip,\n          bounds,\n          cell: step,\n          color: frame.color(\"foreground\"),\n          alpha: 0.9,\n          density: (cx, cy) => (inside(cx, cy) && hash2(cx, cy, seed) > 0.92 ? 0.8 : 0),\n        });\n      }\n      ctx.restore();\n    }\n    return moving;\n  };\n\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = event.currentTarget.getBoundingClientRect();\n    const layout = donutLayout(rect.width, rect.height, thickness, graph);\n    const hit = wedgeAt(\n      pieWedges(targets, { gap: graph ? 0.07 : 0 }),\n      layout.center,\n      layout.inner,\n      layout.outer + layout.pop,\n      { x: event.clientX - rect.left, y: event.clientY - rect.top },\n    );\n    if (hit !== preview) setPreview(hit);\n  };\n\n  const share = (index: number) => PERCENT.format(targets[index] ?? 0);\n  const summary =\n    description ??\n    `${data.map((datum, index) => `${datum.label} ${formatValue(datum.value)} (${share(index)})`).join(\", \")}. ${labels?.total ?? \"Total\"} ${formatValue(total)}.`;\n  const activeDatum = active !== null ? data[active] : undefined;\n\n  const readout =\n    center !== undefined ? (\n      center\n    ) : (\n      <>\n        <span className=\"text-xs text-muted-foreground\">\n          {activeDatum?.label ?? labels?.total ?? \"Total\"}\n        </span>\n        <span className=\"text-lg font-semibold text-foreground tabular-nums\">\n          {formatValue(activeDatum ? activeDatum.value : total)}\n        </span>\n        {activeDatum && (\n          <span className=\"text-xs text-muted-foreground tabular-nums\">\n            {share(active ?? 0)}\n          </span>\n        )}\n      </>\n    );\n\n  return (\n    <div\n      data-slot=\"dither-donut\"\n      data-variant={variant}\n      {...props}\n      className={cn(ditherDonutVariants({ size }), className)}\n    >\n      <div\n        data-slot=\"dither-donut-plot\"\n        className=\"relative size-[var(--dither-donut-size)] shrink-0\"\n      >\n        <div\n          role=\"img\"\n          aria-label={`${label}: ${summary}`}\n          className=\"size-full\"\n          onPointerMove={onPointerMove}\n          onPointerLeave={() => {\n            setPreview(null);\n          }}\n        >\n          <DitherCanvas draw={draw} animate={animate} cell={cell} />\n        </div>\n        {readout !== null && (\n          <div\n            data-slot=\"dither-donut-readout\"\n            className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center leading-tight\"\n          >\n            {readout}\n          </div>\n        )}\n      </div>\n      {showLegend && (\n        <ul\n          data-slot=\"dither-donut-legend\"\n          aria-label={label}\n          className=\"flex min-w-0 flex-1 flex-col gap-1\"\n        >\n          {data.map((datum, index) => (\n            <li key={`${datum.label}-${String(index)}`}>\n              <button\n                type=\"button\"\n                aria-pressed={pinned === index}\n                aria-label={`${datum.label}: ${formatValue(datum.value)} (${share(index)})`}\n                data-active={active === index || undefined}\n                className={cn(\n                  \"flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-xs transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] hover:bg-muted aria-pressed:bg-accent aria-pressed:text-accent-foreground data-active:bg-muted\",\n                  focusRing,\n                )}\n                onPointerEnter={() => {\n                  setPreview(index);\n                }}\n                onPointerLeave={() => {\n                  setPreview(null);\n                }}\n                onFocus={() => {\n                  setPreview(index);\n                }}\n                onBlur={() => {\n                  setPreview(null);\n                }}\n                onClick={() => {\n                  pin(index);\n                }}\n              >\n                <span\n                  aria-hidden\n                  className=\"size-2.5 shrink-0 rounded-full\"\n                  style={{ background: tokenToCss(seriesColor(index, datum.color)) }}\n                />\n                <span className=\"min-w-0 flex-1 truncate text-start font-medium text-foreground\">\n                  {datum.label}\n                </span>\n                <span className=\"text-foreground tabular-nums\">{formatValue(datum.value)}</span>\n                <span className=\"w-9 text-end font-mono text-2xs text-muted-foreground\">\n                  {share(index)}\n                </span>\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      <DitherTable\n        caption={label}\n        columns={[\n          labels?.category ?? \"Category\",\n          labels?.value ?? \"Value\",\n          labels?.share ?? \"Share\",\n        ]}\n        rows={data.map((datum, index) => [datum.label, formatValue(datum.value), share(index)])}\n        visible={showTable}\n        className={showTable ? \"basis-full\" : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { DitherDonut, DitherDonutDatum, DitherDonutLabels, DitherDonutProps, ditherDonutVariants } from "./dither-donut.js";
+export { DitherDonut, type DitherDonutDatum, type DitherDonutLabels, type DitherDonutProps, ditherDonutVariants };

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

@@ -0,0 +1,2 @@
+import { DitherDonut, ditherDonutVariants } from "./dither-donut.js";
+export { DitherDonut, ditherDonutVariants };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-donut/meta.ts
+const meta = defineMeta({
+	name: "dither-donut",
+	title: "Dither Donut",
+	description: "A donut chart drawn in shimmering dithered cells, with wedges that pop out and sparkle on hover, focus or pin.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["dither-donut.tsx"],
+	a11y: "The plot is role=\"img\" with an aria-label summarising every entry, its share and the total. Legend entries are buttons named with their value and share: focus or hover previews a wedge, and pressing pins it (aria-pressed). The data is always in a table, visually hidden unless showTable is set. The readout is real text. Under reduced motion the shimmer stops and data changes settle in one frame."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-donut/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-donut\",\n  title: \"Dither Donut\",\n  description:\n    \"A donut chart drawn in shimmering dithered cells, with wedges that pop out and sparkle on hover, focus or pin.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"dither-donut.tsx\"],\n  a11y:\n    'The plot is role=\"img\" with an aria-label summarising every entry, its share and the total. ' +\n    \"Legend entries are buttons named with their value and share: focus or hover previews a wedge, \" +\n    \"and pressing pins it (aria-pressed). The data is always in a table, visually hidden unless \" +\n    \"showTable is set. The readout is real text. Under reduced motion the shimmer stops and data \" +\n    \"changes settle in one frame.\",\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,kBAAkB;CAC1B,MACE;AAKJ,CAAC"}

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

@@ -0,0 +1,53 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/dither-funnel/dither-funnel.d.ts
+declare const ditherFunnelVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DitherFunnelStage {
+  label: string;
+  value: number;
+  /** Colour token or CSS colour expression. Defaults to the palette. */
+  color?: string;
+}
+interface DitherFunnelProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof ditherFunnelVariants> {
+  stages: readonly DitherFunnelStage[];
+  /** What the funnel shows. Names the image, the stages and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  /** Value of a full-length bar. Defaults to the largest stage. */
+  max?: number;
+  formatValue?: (value: number) => string;
+  /** Formats a 0..1 share. Defaults to a whole percentage. */
+  formatPercent?: (share: number) => string;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  cell?: number;
+  /** The pinned stage (controlled); null pins none. */
+  activeStage?: number | null;
+  defaultActiveStage?: number | null;
+  onActiveStageChange?: (index: number | null) => void;
+  /** Data table headers. */
+  categoryLabel?: string;
+  valueLabel?: string;
+  conversionLabel?: string;
+  stepLabel?: string;
+}
+/** Gap between stage bars in CSS pixels, shared by the canvas and the buttons. */
+declare const FUNNEL_GAP = 6;
+interface FunnelConversion {
+  /** Share of the first stage, 0..1. */
+  overall: number;
+  /** Share of the previous stage, 0..1 (1 for the first). */
+  step: number;
+  /** How many the previous stage lost on the way here (0 for the first). */
+  dropped: number;
+}
+/** Overall and step conversion for each stage. */
+declare function funnelConversions(stages: readonly DitherFunnelStage[]): FunnelConversion[];
+declare function DitherFunnel({ stages, label, description, max, size, formatValue, formatPercent, showTable, animate, cell, activeStage, defaultActiveStage, onActiveStageChange, categoryLabel, valueLabel, conversionLabel, stepLabel, className, ...props }: DitherFunnelProps): import("react").JSX.Element;
+//#endregion
+export { DitherFunnel, DitherFunnelProps, DitherFunnelStage, FUNNEL_GAP, FunnelConversion, ditherFunnelVariants, funnelConversions };
+//# sourceMappingURL=dither-funnel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-funnel.d.ts","names":[],"sources":["../../../src/components/dither-funnel/dither-funnel.tsx"],"mappings":";;;cAkCa,uBAAoB;;6CAS/B;UAEe;EACf;EACA;;EAEA;;UAGe,0BAEb,KAAK,2CACL,oBAAoB;EACtB,iBAAiB;;EAEjB;;EAEA;;EAEA;EACA,eAAe;;EAEf,iBAAiB;;EAEjB;EACA;EACA;;EAEA;EACA;EACA,uBAAuB;;EAEvB;EACA;EACA;EACA;;;cAIW;UAEI;;EAEf;;EAEA;;EAEA;;;iBAMc,kBAAkB,iBAAiB,sBAAsB;iBAezD,eACd,QACA,OACA,aACA,KACA,MACA,aACA,eACA,WACA,SACA,MACA,aACA,oBACA,qBACA,eACA,YACA,iBACA,WACA,cACG,SACF,oCAAiB,IAAA"}

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

@@ -0,0 +1,176 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { createSprings, ditherFill, drift, hash2, seriesColor } 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-funnel/dither-funnel.tsx
+const ditherFunnelVariants = cva("flex flex-col gap-2", {
+	variants: { size: {
+		sm: "[--dither-funnel-height:7rem]",
+		md: "[--dither-funnel-height:10rem]",
+		lg: "[--dither-funnel-height:14rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Gap between stage bars in CSS pixels, shared by the canvas and the buttons. */
+const FUNNEL_GAP = 6;
+const clean = (value) => Number.isFinite(value) && value > 0 ? value : 0;
+/** Overall and step conversion for each stage. */
+function funnelConversions(stages) {
+	const first = clean(stages[0]?.value ?? 0);
+	return stages.map((stage, i) => {
+		const value = clean(stage.value);
+		const previous = i === 0 ? value : clean(stages[i - 1]?.value ?? 0);
+		return {
+			overall: first > 0 ? value / first : 0,
+			step: previous > 0 ? value / previous : 0,
+			dropped: i === 0 ? 0 : Math.max(0, previous - value)
+		};
+	});
+}
+const wholePercent = (share) => `${String(Math.round(share * 100))}%`;
+function DitherFunnel({ stages, label, description, max, size, formatValue = formatDitherValue, formatPercent = wholePercent, showTable = false, animate = true, cell = 3, activeStage, defaultActiveStage = null, onActiveStageChange, categoryLabel = "Stage", valueLabel = "Value", conversionLabel = "Conversion", stepLabel = "Step conversion", className, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultActiveStage);
+	const [preview, setPreview] = useState(null);
+	const pinned = activeStage !== void 0 ? activeStage : uncontrolled;
+	const lit = preview ?? pinned;
+	const values = stages.map((stage) => clean(stage.value));
+	const top = max ?? Math.max(0, ...values);
+	const fractions = values.map((value) => top > 0 ? Math.min(1, value / top) : 0);
+	const conversions = funnelConversions(stages);
+	const bars = useRef(createSprings(fractions.map(() => 0)));
+	const draw = (ctx, frame) => {
+		const { width, height, time } = frame;
+		bars.current.set(fractions);
+		const moving = bars.current.step(frame.delta, frame.reducedMotion);
+		const current = bars.current.values;
+		const count = current.length;
+		if (count === 0) return moving;
+		const rowHeight = (height - 6 * (count - 1)) / count;
+		if (rowHeight <= 0) return moving;
+		current.forEach((fraction, i) => {
+			const barWidth = Math.max(0, Math.min(1, fraction)) * width;
+			if (barWidth < 1) return;
+			const y = i * (rowHeight + 6);
+			ditherFill(ctx, {
+				clip: makePath((sink) => {
+					traceRoundedRect(sink, 0, y, barWidth, rowHeight, 4);
+				}),
+				bounds: {
+					x: 0,
+					y,
+					width: barWidth,
+					height: rowHeight
+				},
+				cell: frame.cell,
+				color: frame.color(seriesColor(i, stages[i]?.color)),
+				alpha: lit !== null && lit !== i ? .3 : .85,
+				density: (cx, cy) => (.35 + .35 * drift(cx, cy, time * 1.2)) * (.8 + .4 * hash2(cx, cy)) + (lit === i ? .15 : 0)
+			});
+		});
+		return moving;
+	};
+	const pin = (index) => {
+		const next = pinned === index ? null : index;
+		if (activeStage === void 0) setUncontrolled(next);
+		onActiveStageChange?.(next);
+	};
+	const first = stages[0];
+	const breakdown = (i) => {
+		const stage = stages[i];
+		const conversion = conversions[i];
+		if (!stage || !conversion) return "";
+		const head = `${stage.label}: ${formatValue(values[i] ?? 0)}`;
+		if (i === 0) return head;
+		const previous = stages[i - 1]?.label ?? "";
+		return `${head}, ${formatPercent(conversion.overall)} of ${first?.label ?? ""}, ${formatPercent(conversion.step)} from ${previous}, ${formatValue(conversion.dropped)} dropped`;
+	};
+	const summary = description ?? (stages.length === 0 ? "No data." : `${String(stages.length)} stages. ${stages.map((_, i) => breakdown(i)).join("; ")}.`);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dither-funnel",
+		...props,
+		className: cn(ditherFunnelVariants({ size }), className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "dither-funnel-plot",
+				className: "relative h-[var(--dither-funnel-height)]",
+				style: { direction: "ltr" },
+				children: [/* @__PURE__ */ jsx("div", {
+					role: "img",
+					"aria-label": `${label}: ${summary}`,
+					className: "size-full",
+					children: /* @__PURE__ */ jsx(DitherCanvas, {
+						draw,
+						animate,
+						cell
+					})
+				}), /* @__PURE__ */ jsx("ul", {
+					"aria-label": label,
+					className: "absolute inset-0 flex flex-col",
+					style: { gap: `${String(6)}px` },
+					children: stages.map((stage, i) => /* @__PURE__ */ jsx("li", {
+						className: "flex min-h-0 flex-1",
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-pressed": pinned === i,
+							"aria-label": breakdown(i),
+							"data-active": lit === i || void 0,
+							className: cn("flex flex-1 items-center justify-between gap-2 rounded-md px-1.5 text-xs font-medium", focusRing),
+							onPointerEnter: () => {
+								setPreview(i);
+							},
+							onPointerLeave: () => {
+								setPreview(null);
+							},
+							onFocus: () => {
+								setPreview(i);
+							},
+							onBlur: () => {
+								setPreview(null);
+							},
+							onClick: () => {
+								pin(i);
+							},
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate rounded-sm bg-background/80 px-1 text-foreground",
+								children: stage.label
+							}), /* @__PURE__ */ jsx("span", {
+								className: "rounded-sm bg-background/80 px-1 text-muted-foreground tabular-nums",
+								children: formatPercent(conversions[i]?.overall ?? 0)
+							})]
+						})
+					}, `${stage.label}-${String(i)}`))
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				"data-slot": "dither-funnel-readout",
+				className: "min-h-4 text-xs text-muted-foreground tabular-nums",
+				children: lit !== null && stages[lit] ? breakdown(lit) : null
+			}),
+			/* @__PURE__ */ jsx(DitherTable, {
+				caption: label,
+				columns: [
+					categoryLabel,
+					valueLabel,
+					conversionLabel,
+					stepLabel
+				],
+				rows: stages.map((stage, i) => [
+					stage.label,
+					formatValue(values[i] ?? 0),
+					formatPercent(conversions[i]?.overall ?? 0),
+					formatPercent(conversions[i]?.step ?? 0)
+				]),
+				visible: showTable
+			})
+		]
+	});
+}
+//#endregion
+export { DitherFunnel, FUNNEL_GAP, ditherFunnelVariants, funnelConversions };
+
+//# sourceMappingURL=dither-funnel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-funnel.js","names":[],"sources":["../../../src/components/dither-funnel/dither-funnel.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Conversion Funnel\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useRef, useState, type ComponentPropsWithRef } from \"react\";\n\nimport {\n  createSprings,\n  DitherCanvas,\n  ditherFill,\n  DitherTable,\n  drift,\n  formatDitherValue,\n  hash2,\n  makePath,\n  seriesColor,\n  traceRoundedRect,\n  type DitherDraw,\n} from \"@/components/dither-canvas\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A conversion funnel drawn in dithered cells: one bar per stage, its length\n * the stage's value against the first (or `max`), stepping down amicro's\n * monochrome ramp. Lengths are springs in the engine, so a new period morphs.\n *\n * Every stage is a button laid over its bar, showing the stage name and its\n * conversion, named with the full breakdown — value, share of the first stage,\n * step conversion from the previous and how many dropped. Hover or focus\n * lights the stage and fills the readout; pressing pins it. Bars grow from the\n * start edge in LTR in every direction: the canvas does not mirror.\n */\n\nexport const ditherFunnelVariants = cva(\"flex flex-col gap-2\", {\n  variants: {\n    size: {\n      sm: \"[--dither-funnel-height:7rem]\",\n      md: \"[--dither-funnel-height:10rem]\",\n      lg: \"[--dither-funnel-height:14rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface DitherFunnelStage {\n  label: string;\n  value: number;\n  /** Colour token or CSS colour expression. Defaults to the palette. */\n  color?: string;\n}\n\nexport interface DitherFunnelProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof ditherFunnelVariants> {\n  stages: readonly DitherFunnelStage[];\n  /** What the funnel shows. Names the image, the stages 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-length bar. Defaults to the largest stage. */\n  max?: number;\n  formatValue?: (value: number) => string;\n  /** Formats a 0..1 share. Defaults to a whole percentage. */\n  formatPercent?: (share: number) => string;\n  /** Show the data table. It is always present for assistive technology. */\n  showTable?: boolean;\n  animate?: boolean;\n  cell?: number;\n  /** The pinned stage (controlled); null pins none. */\n  activeStage?: number | null;\n  defaultActiveStage?: number | null;\n  onActiveStageChange?: (index: number | null) => void;\n  /** Data table headers. */\n  categoryLabel?: string;\n  valueLabel?: string;\n  conversionLabel?: string;\n  stepLabel?: string;\n}\n\n/** Gap between stage bars in CSS pixels, shared by the canvas and the buttons. */\nexport const FUNNEL_GAP = 6;\n\nexport interface FunnelConversion {\n  /** Share of the first stage, 0..1. */\n  overall: number;\n  /** Share of the previous stage, 0..1 (1 for the first). */\n  step: number;\n  /** How many the previous stage lost on the way here (0 for the first). */\n  dropped: number;\n}\n\nconst clean = (value: number) => (Number.isFinite(value) && value > 0 ? value : 0);\n\n/** Overall and step conversion for each stage. */\nexport function funnelConversions(stages: readonly DitherFunnelStage[]): FunnelConversion[] {\n  const first = clean(stages[0]?.value ?? 0);\n  return stages.map((stage, i) => {\n    const value = clean(stage.value);\n    const previous = i === 0 ? value : clean(stages[i - 1]?.value ?? 0);\n    return {\n      overall: first > 0 ? value / first : 0,\n      step: previous > 0 ? value / previous : 0,\n      dropped: i === 0 ? 0 : Math.max(0, previous - value),\n    };\n  });\n}\n\nconst wholePercent = (share: number) => `${String(Math.round(share * 100))}%`;\n\nexport function DitherFunnel({\n  stages,\n  label,\n  description,\n  max,\n  size,\n  formatValue = formatDitherValue,\n  formatPercent = wholePercent,\n  showTable = false,\n  animate = true,\n  cell = 3,\n  activeStage,\n  defaultActiveStage = null,\n  onActiveStageChange,\n  categoryLabel = \"Stage\",\n  valueLabel = \"Value\",\n  conversionLabel = \"Conversion\",\n  stepLabel = \"Step conversion\",\n  className,\n  ...props\n}: DitherFunnelProps) {\n  const [uncontrolled, setUncontrolled] = useState<number | null>(defaultActiveStage);\n  const [preview, setPreview] = useState<number | null>(null);\n  const pinned = activeStage !== undefined ? activeStage : uncontrolled;\n  const lit = preview ?? pinned;\n  const values = stages.map((stage) => clean(stage.value));\n  const top = max ?? Math.max(0, ...values);\n  const fractions = values.map((value) => (top > 0 ? Math.min(1, value / top) : 0));\n  const conversions = funnelConversions(stages);\n  const bars = useRef(createSprings(fractions.map(() => 0)));\n\n  const draw: DitherDraw = (ctx, frame) => {\n    const { width, height, time } = frame;\n    bars.current.set(fractions);\n    const moving = bars.current.step(frame.delta, frame.reducedMotion);\n    const current = bars.current.values;\n    const count = current.length;\n    if (count === 0) return moving;\n    const rowHeight = (height - FUNNEL_GAP * (count - 1)) / count;\n    if (rowHeight <= 0) return moving;\n    current.forEach((fraction, i) => {\n      const barWidth = Math.max(0, Math.min(1, fraction)) * width;\n      if (barWidth < 1) return;\n      const y = i * (rowHeight + FUNNEL_GAP);\n      ditherFill(ctx, {\n        clip: makePath((sink) => {\n          traceRoundedRect(sink, 0, y, barWidth, rowHeight, 4);\n        }),\n        bounds: { x: 0, y, width: barWidth, height: rowHeight },\n        cell: frame.cell,\n        color: frame.color(seriesColor(i, stages[i]?.color)),\n        alpha: lit !== null && lit !== i ? 0.3 : 0.85,\n        density: (cx, cy) =>\n          (0.35 + 0.35 * drift(cx, cy, time * 1.2)) * (0.8 + 0.4 * hash2(cx, cy)) +\n          (lit === i ? 0.15 : 0),\n      });\n    });\n    return moving;\n  };\n\n  const pin = (index: number) => {\n    const next = pinned === index ? null : index;\n    if (activeStage === undefined) setUncontrolled(next);\n    onActiveStageChange?.(next);\n  };\n\n  const first = stages[0];\n  const breakdown = (i: number) => {\n    const stage = stages[i];\n    const conversion = conversions[i];\n    if (!stage || !conversion) return \"\";\n    const head = `${stage.label}: ${formatValue(values[i] ?? 0)}`;\n    if (i === 0) return head;\n    const previous = stages[i - 1]?.label ?? \"\";\n    return (\n      `${head}, ${formatPercent(conversion.overall)} of ${first?.label ?? \"\"}, ` +\n      `${formatPercent(conversion.step)} from ${previous}, ${formatValue(conversion.dropped)} dropped`\n    );\n  };\n  const summary =\n    description ??\n    (stages.length === 0\n      ? \"No data.\"\n      : `${String(stages.length)} stages. ${stages.map((_, i) => breakdown(i)).join(\"; \")}.`);\n\n  return (\n    <div\n      data-slot=\"dither-funnel\"\n      {...props}\n      className={cn(ditherFunnelVariants({ size }), className)}\n    >\n      <div\n        data-slot=\"dither-funnel-plot\"\n        className=\"relative h-[var(--dither-funnel-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        <ul\n          aria-label={label}\n          className=\"absolute inset-0 flex flex-col\"\n          style={{ gap: `${String(FUNNEL_GAP)}px` }}\n        >\n          {stages.map((stage, i) => (\n            <li key={`${stage.label}-${String(i)}`} className=\"flex min-h-0 flex-1\">\n              <button\n                type=\"button\"\n                aria-pressed={pinned === i}\n                aria-label={breakdown(i)}\n                data-active={lit === i || undefined}\n                className={cn(\n                  \"flex flex-1 items-center justify-between gap-2 rounded-md px-1.5 text-xs font-medium\",\n                  focusRing,\n                )}\n                onPointerEnter={() => {\n                  setPreview(i);\n                }}\n                onPointerLeave={() => {\n                  setPreview(null);\n                }}\n                onFocus={() => {\n                  setPreview(i);\n                }}\n                onBlur={() => {\n                  setPreview(null);\n                }}\n                onClick={() => {\n                  pin(i);\n                }}\n              >\n                <span className=\"truncate rounded-sm bg-background/80 px-1 text-foreground\">\n                  {stage.label}\n                </span>\n                <span className=\"rounded-sm bg-background/80 px-1 text-muted-foreground tabular-nums\">\n                  {formatPercent(conversions[i]?.overall ?? 0)}\n                </span>\n              </button>\n            </li>\n          ))}\n        </ul>\n      </div>\n      <p\n        data-slot=\"dither-funnel-readout\"\n        className=\"min-h-4 text-xs text-muted-foreground tabular-nums\"\n      >\n        {lit !== null && stages[lit] ? breakdown(lit) : null}\n      </p>\n      <DitherTable\n        caption={label}\n        columns={[categoryLabel, valueLabel, conversionLabel, stepLabel]}\n        rows={stages.map((stage, i) => [\n          stage.label,\n          formatValue(values[i] ?? 0),\n          formatPercent(conversions[i]?.overall ?? 0),\n          formatPercent(conversions[i]?.step ?? 0),\n        ])}\n        visible={showTable}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { DitherFunnel, DitherFunnelProps, DitherFunnelStage, FUNNEL_GAP, FunnelConversion, ditherFunnelVariants, funnelConversions } from "./dither-funnel.js";
+export { DitherFunnel, type DitherFunnelProps, type DitherFunnelStage, FUNNEL_GAP, type FunnelConversion, ditherFunnelVariants, funnelConversions };

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

@@ -0,0 +1,2 @@
+import { DitherFunnel, FUNNEL_GAP, ditherFunnelVariants, funnelConversions } from "./dither-funnel.js";
+export { DitherFunnel, FUNNEL_GAP, ditherFunnelVariants, funnelConversions };