@dowel-ui/react 0.5.0 → 0.8.0

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

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

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

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

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

@@ -0,0 +1,236 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { DITHER_CELL, clamp, resolveColor } from "./dither-engine.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/dither-canvas/dither-canvas.tsx
+const MAX_DPR = 2;
+const REDUCED_QUERY = "(prefers-reduced-motion: reduce)";
+const SCHEME_QUERY = "(prefers-color-scheme: dark)";
+function media(query) {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query) : null;
+}
+/**
+* Whether motion is reduced: the OS preference, or the theme's own
+* `--motion-scale` turned down to (near) zero.
+*/
+function prefersReducedMotion() {
+	if (typeof window === "undefined") return false;
+	if (media(REDUCED_QUERY)?.matches) return true;
+	const scale = Number.parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue("--motion-scale"));
+	return Number.isFinite(scale) && scale < .01;
+}
+/** Tracks `prefersReducedMotion()`, updating when the OS preference changes. */
+function useReducedMotionPreference() {
+	const [reduced, setReduced] = useState(false);
+	useEffect(() => {
+		const update = () => {
+			setReduced(prefersReducedMotion());
+		};
+		update();
+		const query = media(REDUCED_QUERY);
+		query?.addEventListener("change", update);
+		return () => query?.removeEventListener("change", update);
+	}, []);
+	return reduced;
+}
+/** Runs the engine for a canvas you render yourself. */
+function useDitherCanvas(draw, options = {}) {
+	const { animate = true, cell = DITHER_CELL } = options;
+	const canvasRef = useRef(null);
+	const reducedMotion = useReducedMotionPreference();
+	const latest = useRef({
+		draw,
+		animate,
+		cell,
+		reducedMotion
+	});
+	const requestRef = useRef(() => {});
+	useEffect(() => {
+		latest.current = {
+			draw,
+			animate,
+			cell,
+			reducedMotion
+		};
+		requestRef.current();
+	});
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const colors = /* @__PURE__ */ new Map();
+		let width = 0;
+		let height = 0;
+		let dpr = 1;
+		let raf = 0;
+		let last = null;
+		let time = 0;
+		let onScreen = true;
+		const visible = () => onScreen && !document.hidden;
+		const request = () => {
+			if (raf || !visible()) return;
+			raf = requestAnimationFrame(tick);
+		};
+		function tick(now) {
+			raf = 0;
+			if (!visible() || !canvas) {
+				last = null;
+				return;
+			}
+			const current = latest.current;
+			const animated = current.animate && !current.reducedMotion;
+			const delta = last === null ? 0 : clamp((now - last) / 1e3, 0, 1 / 15);
+			last = now;
+			if (animated) time += delta;
+			const ctx = width > 0 && height > 0 ? canvas.getContext("2d") : null;
+			if (!ctx) return;
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+			ctx.clearRect(0, 0, width, height);
+			ctx.globalAlpha = 1;
+			const more = current.draw(ctx, {
+				width,
+				height,
+				dpr,
+				time,
+				delta,
+				cell: current.cell,
+				animated,
+				reducedMotion: current.reducedMotion,
+				color: (token) => {
+					let value = colors.get(token);
+					if (value === void 0) {
+						value = resolveColor(canvas, token);
+						colors.set(token, value);
+					}
+					return value;
+				}
+			}) === true;
+			if (animated || more) request();
+			else last = null;
+		}
+		const resize = (nextWidth, nextHeight) => {
+			width = nextWidth;
+			height = nextHeight;
+			dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
+			canvas.width = Math.max(1, Math.round(width * dpr));
+			canvas.height = Math.max(1, Math.round(height * dpr));
+			request();
+		};
+		const box = canvas.getBoundingClientRect();
+		resize(box.width, box.height);
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) resize(entry.contentRect.width, entry.contentRect.height);
+		});
+		resizeObserver.observe(canvas);
+		let intersectionObserver;
+		if (typeof IntersectionObserver === "function") {
+			intersectionObserver = new IntersectionObserver((entries) => {
+				for (const entry of entries) onScreen = entry.isIntersecting;
+				request();
+			}, { rootMargin: "100px" });
+			intersectionObserver.observe(canvas);
+		}
+		const onVisibility = () => {
+			last = null;
+			request();
+		};
+		document.addEventListener("visibilitychange", onVisibility);
+		const onTheme = () => {
+			colors.clear();
+			request();
+		};
+		const themeObserver = new MutationObserver(onTheme);
+		themeObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: [
+				"class",
+				"data-theme",
+				"style"
+			]
+		});
+		const scheme = media(SCHEME_QUERY);
+		scheme?.addEventListener("change", onTheme);
+		requestRef.current = request;
+		request();
+		return () => {
+			requestRef.current = () => {};
+			if (raf) cancelAnimationFrame(raf);
+			resizeObserver.disconnect();
+			intersectionObserver?.disconnect();
+			themeObserver.disconnect();
+			scheme?.removeEventListener("change", onTheme);
+			document.removeEventListener("visibilitychange", onVisibility);
+		};
+	}, []);
+	return {
+		canvasRef,
+		redraw: useCallback(() => {
+			requestRef.current();
+		}, []),
+		reducedMotion
+	};
+}
+/**
+* A canvas the dither engine draws. Decorative by default (aria-hidden): the
+* chart around it carries the accessible name, readouts and data table. Give
+* it a `role` or `aria-label` to expose it instead.
+*/
+function DitherCanvas({ draw, animate, cell, className, ref, ...props }) {
+	const { canvasRef } = useDitherCanvas(draw, {
+		animate,
+		cell
+	});
+	const exposed = props.role !== void 0 || props["aria-label"] !== void 0;
+	const setRef = useCallback((node) => {
+		canvasRef.current = node;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [canvasRef, ref]);
+	return /* @__PURE__ */ jsx("canvas", {
+		"aria-hidden": exposed ? void 0 : true,
+		"data-slot": "dither-canvas",
+		...props,
+		ref: setRef,
+		className: cn("block size-full", className)
+	});
+}
+/** Formats a value with the reader's locale grouping. The charts' default. */
+function formatDitherValue(value) {
+	return new Intl.NumberFormat().format(Math.round(value * 100) / 100);
+}
+/**
+* The chart's data as a table: always in the accessibility tree, visible on
+* request. A canvas has no content, and an aria-label summary is too coarse to
+* read exact values from, so every dither chart renders one.
+*/
+function DitherTable({ caption, columns, rows, visible = false, className, ...props }) {
+	return /* @__PURE__ */ jsxs("table", {
+		"data-slot": "dither-table",
+		"data-visible": visible || void 0,
+		...props,
+		className: cn(visible ? "w-full border-collapse text-start text-xs tabular-nums" : "sr-only", className),
+		children: [
+			/* @__PURE__ */ jsx("caption", {
+				className: visible ? "pb-2 text-start text-xs font-medium text-muted-foreground" : void 0,
+				children: caption
+			}),
+			/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+				scope: "col",
+				className: visible ? "border-b border-border py-1 pe-3 text-start font-medium" : void 0,
+				children: column
+			}, column)) }) }),
+			/* @__PURE__ */ jsx("tbody", { children: rows.map(([head, ...cells], rowIndex) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+				scope: "row",
+				className: visible ? "py-1 pe-3 text-start font-normal" : void 0,
+				children: head
+			}), cells.map((cellText, cellIndex) => /* @__PURE__ */ jsx("td", {
+				className: visible ? "py-1 pe-3 text-muted-foreground" : void 0,
+				children: cellText
+			}, cellIndex))] }, `${head ?? ""}-${String(rowIndex)}`)) })
+		]
+	});
+}
+//#endregion
+export { DitherCanvas, DitherTable, formatDitherValue, prefersReducedMotion, useDitherCanvas, useReducedMotionPreference };
+
+//# sourceMappingURL=dither-canvas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-canvas.js","names":[],"sources":["../../../src/components/dither-canvas/dither-canvas.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Dither Charts\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type RefObject,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { clamp, DITHER_CELL, resolveColor } from \"./dither-engine\";\n\n/*\n * The React half of the dither engine: one canvas, sized to its box, drawn by\n * a function the chart supplies. The engine owns everything a canvas chart\n * gets wrong when each one reimplements it (ADR 0014, Canvas):\n *\n * - Size: a ResizeObserver keeps the backing store at the box size × DPR, with\n *   DPR capped at 2. The draw function works in CSS pixels.\n * - Loop: requestAnimationFrame, paused when the canvas is off-screen\n *   (IntersectionObserver) or the tab is hidden, and cancelled on unmount.\n *   With `animate` off, or under reduced motion, it draws on demand only —\n *   when the draw function changes, the box resizes or the theme changes — and\n *   keeps drawing only while `draw` returns true (a spring still settling).\n * - Reduced motion: the clock stops, so the shimmer is one static frame, and\n *   `frame.reducedMotion` tells springs to jump to their targets.\n * - Colour: `frame.color(\"primary\")` resolves a token at runtime, cached until\n *   the <html> class, data-theme or style changes, or the colour scheme does.\n */\n\nexport interface DitherFrame {\n  /** Box size in CSS pixels. The context is already scaled to them. */\n  width: number;\n  height: number;\n  /** Device pixel ratio in use, capped at 2. */\n  dpr: number;\n  /** Seconds of animation clock. Frozen while `animated` is false. */\n  time: number;\n  /** Seconds since the previous frame, clamped to 1/15; 0 after a pause. */\n  delta: number;\n  /** Cell pitch in CSS pixels. */\n  cell: number;\n  /** True when the clock runs: `animate` is on and motion is not reduced. */\n  animated: boolean;\n  reducedMotion: boolean;\n  /** Resolves a colour token (`\"primary\"`, `\"--color-primary\"`, `color-mix(…)`). */\n  color: (token: string) => string;\n}\n\n/**\n * Draws one frame. The canvas is cleared and scaled before it is called.\n * Return true to ask for another frame even when not animating — while a\n * spring is still moving, for example.\n */\nexport type DitherDraw = (ctx: CanvasRenderingContext2D, frame: DitherFrame) => boolean | void;\n\nexport interface DitherCanvasOptions {\n  /** Run the shimmer clock. Reduced motion stops it regardless. Default true. */\n  animate?: boolean;\n  /** Cell pitch in CSS pixels passed to the draw function. Default 4.6. */\n  cell?: number;\n}\n\nexport interface DitherCanvasHandle {\n  canvasRef: RefObject<HTMLCanvasElement | null>;\n  /** Requests one frame. Coalesced: calling it twice draws once. */\n  redraw: () => void;\n  reducedMotion: boolean;\n}\n\nconst MAX_DPR = 2;\nconst REDUCED_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\n\nfunction media(query: string): MediaQueryList | null {\n  return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n    ? window.matchMedia(query)\n    : null;\n}\n\n/**\n * Whether motion is reduced: the OS preference, or the theme's own\n * `--motion-scale` turned down to (near) zero.\n */\nexport function prefersReducedMotion(): boolean {\n  if (typeof window === \"undefined\") return false;\n  if (media(REDUCED_QUERY)?.matches) return true;\n  const scale = Number.parseFloat(\n    window.getComputedStyle(document.documentElement).getPropertyValue(\"--motion-scale\"),\n  );\n  return Number.isFinite(scale) && scale < 0.01;\n}\n\n/** Tracks `prefersReducedMotion()`, updating when the OS preference changes. */\nexport function useReducedMotionPreference(): boolean {\n  const [reduced, setReduced] = useState(false);\n  useEffect(() => {\n    const update = () => {\n      setReduced(prefersReducedMotion());\n    };\n    update();\n    const query = media(REDUCED_QUERY);\n    query?.addEventListener(\"change\", update);\n    return () => query?.removeEventListener(\"change\", update);\n  }, []);\n  return reduced;\n}\n\n/** Runs the engine for a canvas you render yourself. */\nexport function useDitherCanvas(\n  draw: DitherDraw,\n  options: DitherCanvasOptions = {},\n): DitherCanvasHandle {\n  const { animate = true, cell = DITHER_CELL } = options;\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n  const reducedMotion = useReducedMotionPreference();\n  const latest = useRef({ draw, animate, cell, reducedMotion });\n  const requestRef = useRef<() => void>(() => {});\n\n  // Every render may carry new data or state, so every render asks for a\n  // frame. Requests coalesce into one rAF, so this costs one draw at most.\n  useEffect(() => {\n    latest.current = { draw, animate, cell, reducedMotion };\n    requestRef.current();\n  });\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const colors = new Map<string, string>();\n    let width = 0;\n    let height = 0;\n    let dpr = 1;\n    let raf = 0;\n    let last: number | null = null;\n    let time = 0;\n    let onScreen = true;\n\n    const visible = () => onScreen && !document.hidden;\n\n    const request = () => {\n      if (raf || !visible()) return;\n      raf = requestAnimationFrame(tick);\n    };\n\n    function tick(now: number) {\n      raf = 0;\n      if (!visible() || !canvas) {\n        last = null;\n        return;\n      }\n      const current = latest.current;\n      const animated = current.animate && !current.reducedMotion;\n      const delta = last === null ? 0 : clamp((now - last) / 1000, 0, 1 / 15);\n      last = now;\n      if (animated) time += delta;\n\n      const ctx = width > 0 && height > 0 ? canvas.getContext(\"2d\") : null;\n      if (!ctx) return;\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n      ctx.clearRect(0, 0, width, height);\n      ctx.globalAlpha = 1;\n      const more =\n        current.draw(ctx, {\n          width,\n          height,\n          dpr,\n          time,\n          delta,\n          cell: current.cell,\n          animated,\n          reducedMotion: current.reducedMotion,\n          color: (token) => {\n            let value = colors.get(token);\n            if (value === undefined) {\n              value = resolveColor(canvas, token);\n              colors.set(token, value);\n            }\n            return value;\n          },\n        }) === true;\n      if (animated || more) request();\n      else last = null;\n    }\n\n    const resize = (nextWidth: number, nextHeight: number) => {\n      width = nextWidth;\n      height = nextHeight;\n      dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);\n      canvas.width = Math.max(1, Math.round(width * dpr));\n      canvas.height = Math.max(1, Math.round(height * dpr));\n      request();\n    };\n\n    const box = canvas.getBoundingClientRect();\n    resize(box.width, box.height);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) resize(entry.contentRect.width, entry.contentRect.height);\n    });\n    resizeObserver.observe(canvas);\n\n    let intersectionObserver: IntersectionObserver | undefined;\n    if (typeof IntersectionObserver === \"function\") {\n      intersectionObserver = new IntersectionObserver(\n        (entries) => {\n          for (const entry of entries) onScreen = entry.isIntersecting;\n          request();\n        },\n        { rootMargin: \"100px\" },\n      );\n      intersectionObserver.observe(canvas);\n    }\n\n    const onVisibility = () => {\n      last = null;\n      request();\n    };\n    document.addEventListener(\"visibilitychange\", onVisibility);\n\n    const onTheme = () => {\n      colors.clear();\n      request();\n    };\n    const themeObserver = new MutationObserver(onTheme);\n    themeObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\", \"style\"],\n    });\n    const scheme = media(SCHEME_QUERY);\n    scheme?.addEventListener(\"change\", onTheme);\n\n    requestRef.current = request;\n    request();\n\n    return () => {\n      requestRef.current = () => {};\n      if (raf) cancelAnimationFrame(raf);\n      resizeObserver.disconnect();\n      intersectionObserver?.disconnect();\n      themeObserver.disconnect();\n      scheme?.removeEventListener(\"change\", onTheme);\n      document.removeEventListener(\"visibilitychange\", onVisibility);\n    };\n  }, []);\n\n  const redraw = useCallback(() => {\n    requestRef.current();\n  }, []);\n\n  return { canvasRef, redraw, reducedMotion };\n}\n\nexport interface DitherCanvasProps\n  extends Omit<ComponentPropsWithRef<\"canvas\">, \"children\">, DitherCanvasOptions {\n  draw: DitherDraw;\n}\n\n/**\n * A canvas the dither engine draws. Decorative by default (aria-hidden): the\n * chart around it carries the accessible name, readouts and data table. Give\n * it a `role` or `aria-label` to expose it instead.\n */\nexport function DitherCanvas({\n  draw,\n  animate,\n  cell,\n  className,\n  ref,\n  ...props\n}: DitherCanvasProps) {\n  const { canvasRef } = useDitherCanvas(draw, { animate, cell });\n  const exposed = props.role !== undefined || props[\"aria-label\"] !== undefined;\n  const setRef = useCallback(\n    (node: HTMLCanvasElement | null) => {\n      canvasRef.current = node;\n      if (typeof ref === \"function\") return ref(node);\n      if (ref) ref.current = node;\n      return undefined;\n    },\n    [canvasRef, ref],\n  );\n\n  return (\n    <canvas\n      aria-hidden={exposed ? undefined : true}\n      data-slot=\"dither-canvas\"\n      {...props}\n      ref={setRef}\n      className={cn(\"block size-full\", className)}\n    />\n  );\n}\n\n/** Formats a value with the reader's locale grouping. The charts' default. */\nexport function formatDitherValue(value: number): string {\n  return new Intl.NumberFormat().format(Math.round(value * 100) / 100);\n}\n\nexport interface DitherTableProps extends ComponentPropsWithRef<\"table\"> {\n  caption: string;\n  /** Column headers; the first names the row header column. */\n  columns: readonly string[];\n  /** One row per datum; the first cell becomes the row header. */\n  rows: readonly (readonly string[])[];\n  /** Show the table. Hidden tables are still read by assistive technology. */\n  visible?: boolean;\n}\n\n/**\n * The chart's data as a table: always in the accessibility tree, visible on\n * request. A canvas has no content, and an aria-label summary is too coarse to\n * read exact values from, so every dither chart renders one.\n */\nexport function DitherTable({\n  caption,\n  columns,\n  rows,\n  visible = false,\n  className,\n  ...props\n}: DitherTableProps) {\n  return (\n    <table\n      data-slot=\"dither-table\"\n      data-visible={visible || undefined}\n      {...props}\n      className={cn(\n        visible ? \"w-full border-collapse text-start text-xs tabular-nums\" : \"sr-only\",\n        className,\n      )}\n    >\n      <caption\n        className={\n          visible ? \"pb-2 text-start text-xs font-medium text-muted-foreground\" : undefined\n        }\n      >\n        {caption}\n      </caption>\n      <thead>\n        <tr>\n          {columns.map((column) => (\n            <th\n              key={column}\n              scope=\"col\"\n              className={\n                visible ? \"border-b border-border py-1 pe-3 text-start font-medium\" : undefined\n              }\n            >\n              {column}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map(([head, ...cells], rowIndex) => (\n          <tr key={`${head ?? \"\"}-${String(rowIndex)}`}>\n            <th\n              scope=\"row\"\n              className={visible ? \"py-1 pe-3 text-start font-normal\" : undefined}\n            >\n              {head}\n            </th>\n            {cells.map((cellText, cellIndex) => (\n              <td\n                key={cellIndex}\n                className={visible ? \"py-1 pe-3 text-muted-foreground\" : undefined}\n              >\n                {cellText}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"],"mappings":";;;;;;AA0EA,MAAM,UAAU;AAChB,MAAM,gBAAgB;AACtB,MAAM,eAAe;AAErB,SAAS,MAAM,OAAsC;CACnD,OAAO,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,aACjE,OAAO,WAAW,KAAK,IACvB;AACN;;;;;AAMA,SAAgB,uBAAgC;CAC9C,IAAI,OAAO,WAAW,aAAa,OAAO;CAC1C,IAAI,MAAM,aAAa,CAAC,EAAE,SAAS,OAAO;CAC1C,MAAM,QAAQ,OAAO,WACnB,OAAO,iBAAiB,SAAS,eAAe,CAAC,CAAC,iBAAiB,gBAAgB,CACrF;CACA,OAAO,OAAO,SAAS,KAAK,KAAK,QAAQ;AAC3C;;AAGA,SAAgB,6BAAsC;CACpD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,gBAAgB;EACd,MAAM,eAAe;GACnB,WAAW,qBAAqB,CAAC;EACnC;EACA,OAAO;EACP,MAAM,QAAQ,MAAM,aAAa;EACjC,OAAO,iBAAiB,UAAU,MAAM;EACxC,aAAa,OAAO,oBAAoB,UAAU,MAAM;CAC1D,GAAG,CAAC,CAAC;CACL,OAAO;AACT;;AAGA,SAAgB,gBACd,MACA,UAA+B,CAAC,GACZ;CACpB,MAAM,EAAE,UAAU,MAAM,OAAO,gBAAgB;CAC/C,MAAM,YAAY,OAAiC,IAAI;CACvD,MAAM,gBAAgB,2BAA2B;CACjD,MAAM,SAAS,OAAO;EAAE;EAAM;EAAS;EAAM;CAAc,CAAC;CAC5D,MAAM,aAAa,aAAyB,CAAC,CAAC;CAI9C,gBAAgB;EACd,OAAO,UAAU;GAAE;GAAM;GAAS;GAAM;EAAc;EACtD,WAAW,QAAQ;CACrB,CAAC;CAED,gBAAgB;EACd,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,QAAQ;EAEb,MAAM,yBAAS,IAAI,IAAoB;EACvC,IAAI,QAAQ;EACZ,IAAI,SAAS;EACb,IAAI,MAAM;EACV,IAAI,MAAM;EACV,IAAI,OAAsB;EAC1B,IAAI,OAAO;EACX,IAAI,WAAW;EAEf,MAAM,gBAAgB,YAAY,CAAC,SAAS;EAE5C,MAAM,gBAAgB;GACpB,IAAI,OAAO,CAAC,QAAQ,GAAG;GACvB,MAAM,sBAAsB,IAAI;EAClC;EAEA,SAAS,KAAK,KAAa;GACzB,MAAM;GACN,IAAI,CAAC,QAAQ,KAAK,CAAC,QAAQ;IACzB,OAAO;IACP;GACF;GACA,MAAM,UAAU,OAAO;GACvB,MAAM,WAAW,QAAQ,WAAW,CAAC,QAAQ;GAC7C,MAAM,QAAQ,SAAS,OAAO,IAAI,OAAO,MAAM,QAAQ,KAAM,GAAG,IAAI,EAAE;GACtE,OAAO;GACP,IAAI,UAAU,QAAQ;GAEtB,MAAM,MAAM,QAAQ,KAAK,SAAS,IAAI,OAAO,WAAW,IAAI,IAAI;GAChE,IAAI,CAAC,KAAK;GACV,IAAI,aAAa,KAAK,GAAG,GAAG,KAAK,GAAG,CAAC;GACrC,IAAI,UAAU,GAAG,GAAG,OAAO,MAAM;GACjC,IAAI,cAAc;GAClB,MAAM,OACJ,QAAQ,KAAK,KAAK;IAChB;IACA;IACA;IACA;IACA;IACA,MAAM,QAAQ;IACd;IACA,eAAe,QAAQ;IACvB,QAAQ,UAAU;KAChB,IAAI,QAAQ,OAAO,IAAI,KAAK;KAC5B,IAAI,UAAU,KAAA,GAAW;MACvB,QAAQ,aAAa,QAAQ,KAAK;MAClC,OAAO,IAAI,OAAO,KAAK;KACzB;KACA,OAAO;IACT;GACF,CAAC,MAAM;GACT,IAAI,YAAY,MAAM,QAAQ;QACzB,OAAO;EACd;EAEA,MAAM,UAAU,WAAmB,eAAuB;GACxD,QAAQ;GACR,SAAS;GACT,MAAM,KAAK,IAAI,OAAO,oBAAoB,GAAG,OAAO;GACpD,OAAO,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,GAAG,CAAC;GAClD,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAM,SAAS,GAAG,CAAC;GACpD,QAAQ;EACV;EAEA,MAAM,MAAM,OAAO,sBAAsB;EACzC,OAAO,IAAI,OAAO,IAAI,MAAM;EAE5B,MAAM,iBAAiB,IAAI,gBAAgB,YAAY;GACrD,KAAK,MAAM,SAAS,SAAS,OAAO,MAAM,YAAY,OAAO,MAAM,YAAY,MAAM;EACvF,CAAC;EACD,eAAe,QAAQ,MAAM;EAE7B,IAAI;EACJ,IAAI,OAAO,yBAAyB,YAAY;GAC9C,uBAAuB,IAAI,sBACxB,YAAY;IACX,KAAK,MAAM,SAAS,SAAS,WAAW,MAAM;IAC9C,QAAQ;GACV,GACA,EAAE,YAAY,QAAQ,CACxB;GACA,qBAAqB,QAAQ,MAAM;EACrC;EAEA,MAAM,qBAAqB;GACzB,OAAO;GACP,QAAQ;EACV;EACA,SAAS,iBAAiB,oBAAoB,YAAY;EAE1D,MAAM,gBAAgB;GACpB,OAAO,MAAM;GACb,QAAQ;EACV;EACA,MAAM,gBAAgB,IAAI,iBAAiB,OAAO;EAClD,cAAc,QAAQ,SAAS,iBAAiB;GAC9C,YAAY;GACZ,iBAAiB;IAAC;IAAS;IAAc;GAAO;EAClD,CAAC;EACD,MAAM,SAAS,MAAM,YAAY;EACjC,QAAQ,iBAAiB,UAAU,OAAO;EAE1C,WAAW,UAAU;EACrB,QAAQ;EAER,aAAa;GACX,WAAW,gBAAgB,CAAC;GAC5B,IAAI,KAAK,qBAAqB,GAAG;GACjC,eAAe,WAAW;GAC1B,sBAAsB,WAAW;GACjC,cAAc,WAAW;GACzB,QAAQ,oBAAoB,UAAU,OAAO;GAC7C,SAAS,oBAAoB,oBAAoB,YAAY;EAC/D;CACF,GAAG,CAAC,CAAC;CAML,OAAO;EAAE;EAAW,QAJL,kBAAkB;GAC/B,WAAW,QAAQ;EACrB,GAAG,CAAC,CAEqB;EAAG;CAAc;AAC5C;;;;;;AAYA,SAAgB,aAAa,EAC3B,MACA,SACA,MACA,WACA,KACA,GAAG,SACiB;CACpB,MAAM,EAAE,cAAc,gBAAgB,MAAM;EAAE;EAAS;CAAK,CAAC;CAC7D,MAAM,UAAU,MAAM,SAAS,KAAA,KAAa,MAAM,kBAAkB,KAAA;CACpE,MAAM,SAAS,aACZ,SAAmC;EAClC,UAAU,UAAU;EACpB,IAAI,OAAO,QAAQ,YAAY,OAAO,IAAI,IAAI;EAC9C,IAAI,KAAK,IAAI,UAAU;CAEzB,GACA,CAAC,WAAW,GAAG,CACjB;CAEA,OACE,oBAAC,UAAD;EACE,eAAa,UAAU,KAAA,IAAY;EACnC,aAAU;EACV,GAAI;EACJ,KAAK;EACL,WAAW,GAAG,mBAAmB,SAAS;CAC3C,CAAA;AAEL;;AAGA,SAAgB,kBAAkB,OAAuB;CACvD,OAAO,IAAI,KAAK,aAAa,CAAC,CAAC,OAAO,KAAK,MAAM,QAAQ,GAAG,IAAI,GAAG;AACrE;;;;;;AAiBA,SAAgB,YAAY,EAC1B,SACA,SACA,MACA,UAAU,OACV,WACA,GAAG,SACgB;CACnB,OACE,qBAAC,SAAD;EACE,aAAU;EACV,gBAAc,WAAW,KAAA;EACzB,GAAI;EACJ,WAAW,GACT,UAAU,2DAA2D,WACrE,SACF;EAPF,UAAA;GASE,oBAAC,WAAD;IACE,WACE,UAAU,8DAA8D,KAAA;IAGzE,UAAA;GACM,CAAA;GACT,oBAAC,SAAD,EAAA,UACE,oBAAC,MAAD,EAAA,UACG,QAAQ,KAAK,WACZ,oBAAC,MAAD;IAEE,OAAM;IACN,WACE,UAAU,4DAA4D,KAAA;IAGvE,UAAA;GACC,GAPG,MAOH,CACL,EACC,CAAA,EACC,CAAA;GACP,oBAAC,SAAD,EAAA,UACG,KAAK,KAAK,CAAC,MAAM,GAAG,QAAQ,aAC3B,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,MAAD;IACE,OAAM;IACN,WAAW,UAAU,qCAAqC,KAAA;IAEzD,UAAA;GACC,CAAA,GACH,MAAM,KAAK,UAAU,cACpB,oBAAC,MAAD;IAEE,WAAW,UAAU,oCAAoC,KAAA;IAExD,UAAA;GACC,GAJG,SAIH,CACL,CACC,EAAA,GAfK,GAAG,QAAQ,GAAG,GAAG,OAAO,QAAQ,GAerC,CACL,EACI,CAAA;EACF;;AAEX"}

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

@@ -0,0 +1,132 @@
+//#region src/components/dither-canvas/dither-engine.d.ts
+/** Default cell pitch in CSS pixels, as amicro's donut draws it. */
+declare const DITHER_CELL = 4.6;
+/** Axis-aligned rectangle in CSS pixels. */
+interface DitherBounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+declare function clamp(value: number, min: number, max: number): number;
+declare function lerp(from: number, to: number, t: number): number;
+/** Hermite ease between two edges; 0 below `edge0`, 1 above `edge1`. */
+declare function smoothstep(edge0: number, edge1: number, value: number): number;
+/**
+ * Deterministic per-cell hash in [0, 1).
+ *
+ * Coordinates are quantised to 1/100 px so the float noise in a cell's centre
+ * never changes its jitter. `seed` gives a second, independent field (the
+ * particle layer uses one) from the same cell.
+ */
+declare function hash2(x: number, y: number, seed?: number): number;
+/**
+ * amicro's shimmer: a sum of sines eased into 0..1. Pass the raw terms (each
+ * in −1..1) so each chart keeps its own wave; with no terms — the reduced-motion
+ * case — it is the neutral 0.5.
+ */
+declare function shimmer(...waves: number[]): number;
+/** The two-sine drift amicro's device donut and revenue fill share. */
+declare function drift(x: number, y: number, time: number): number;
+/**
+ * The drawn square for one cell: centred, side `cell × density`, never larger
+ * than the cell. Returns null when the density leaves nothing to draw.
+ */
+declare function cellSquare(x: number, y: number, cell: number, density: number): [x: number, y: number, size: number] | null;
+/**
+ * Visits every cell overlapping `bounds`, on a grid anchored at the canvas
+ * origin. Anchoring matters: a grid anchored to each shape would swim as the
+ * shape animates, and two shapes would not share cells.
+ */
+declare function forEachCell(bounds: DitherBounds, cell: number, visit: (x: number, y: number) => void): void;
+/**
+ * Density function for one cell. `cx`/`cy` are the cell's centre and `x`/`y`
+ * its top-left corner, both in CSS pixels. Return 0..1 — the fraction of the
+ * cell the square covers; 0 or less skips the cell.
+ */
+type DitherDensity = (cx: number, cy: number, x: number, y: number) => number;
+interface DitherFillOptions {
+  /** Region to scan. Keep it tight: every cell in it runs `density`. */
+  bounds: DitherBounds;
+  density: DitherDensity;
+  /** Cell pitch in CSS pixels. Defaults to DITHER_CELL. */
+  cell?: number;
+  /** Clip region — usually a Path2D from `makePath`. Omit to fill the bounds. */
+  clip?: Path2D | null;
+  /** Resolved colour (`frame.color("primary")`). Omit to keep the current fillStyle. */
+  color?: string;
+  /** Multiplies the current globalAlpha for this fill. */
+  alpha?: number;
+}
+/**
+ * Fills a region with dithered cells. Saves and restores the context, so the
+ * clip, colour and alpha never leak into the next shape. Returns the number of
+ * squares drawn.
+ */
+declare function ditherFill(ctx: CanvasRenderingContext2D, options: DitherFillOptions): number;
+/**
+ * Turns a colour reference into a CSS value:
+ * `"primary"` and `"--color-primary"` become `var(--color-primary)`; anything
+ * else (`var(…)`, `color-mix(…)`, `currentColor`) is passed through.
+ */
+declare function tokenToCss(token: string): string;
+/**
+ * Resolves a colour token to a concrete value a canvas accepts, as seen from
+ * `element` — so a theme scoped to a subtree applies. A hidden probe element
+ * lets the browser do the resolving, which also settles `color-mix()` and
+ * nested `var()`s that a canvas fillStyle would reject.
+ */
+declare function resolveColor(element: Element, token: string): string;
+/**
+ * Default series colours: one hue — the theme's primary — stepped toward the
+ * card surface, as amicro's monochrome ramp is. Status tokens (success,
+ * warning, destructive) are deliberately absent: they mean state, not series.
+ * Identity never rests on colour alone; every chart also names each series in
+ * a legend, its readout and its data table.
+ */
+declare const DITHER_PALETTE: readonly string[];
+/** The colour for series `index`: its own if given, else the palette in order. */
+declare function seriesColor(index: number, color?: string): string;
+interface SpringConfig {
+  stiffness?: number;
+  damping?: number;
+  mass?: number;
+  /** Distance and speed below which the spring snaps to rest. */
+  precision?: number;
+}
+interface Spring {
+  readonly value: number;
+  readonly target: number;
+  readonly velocity: number;
+  /** Aims the spring at a new target; it moves on the next `step`. */
+  set(target: number): void;
+  /** Places the spring at rest on `value`. */
+  jump(value: number): void;
+  /** Advances by `dt` seconds. Returns true while still moving. */
+  step(dt: number, reducedMotion?: boolean): boolean;
+}
+/** amicro's number spring (motion's useSpring at 190 / 27 / 0.7). */
+declare const DEFAULT_SPRING: Required<SpringConfig>;
+/**
+ * A damped spring for canvas values. Integrated in fixed sub-steps, so a long
+ * frame (a tab coming back into view) cannot make it explode. Under reduced
+ * motion `step` jumps straight to the target: the settled value, drawn once.
+ */
+declare function createSpring(initial: number, config?: SpringConfig): Spring;
+interface SpringList {
+  readonly values: number[];
+  /** Aims at new targets. A different length resamples the current values. */
+  set(targets: readonly number[]): void;
+  jump(targets: readonly number[]): void;
+  step(dt: number, reducedMotion?: boolean): boolean;
+}
+/**
+ * Resamples `values` to `length` points by nearest index, so a 7-point series
+ * can morph into a 30-point one without a jump to zero (amicro's range switch).
+ */
+declare function resample(values: readonly number[], length: number): number[];
+/** A list of springs that animates an array of values together. */
+declare function createSprings(initial: readonly number[], config?: SpringConfig): SpringList;
+//#endregion
+export { DEFAULT_SPRING, DITHER_CELL, DITHER_PALETTE, DitherBounds, DitherDensity, DitherFillOptions, Spring, SpringConfig, SpringList, cellSquare, clamp, createSpring, createSprings, ditherFill, drift, forEachCell, hash2, lerp, resample, resolveColor, seriesColor, shimmer, smoothstep, tokenToCss };
+//# sourceMappingURL=dither-engine.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-engine.d.ts","names":[],"sources":["../../../src/components/dither-canvas/dither-engine.ts"],"mappings":";;cAkBa;;UAGI;EACf;EACA;EACA;EACA;;iBAGc,MAAM,eAAe,aAAa;iBAIlC,KAAK,cAAc,YAAY;;iBAK/B,WAAW,eAAe,eAAe;;;;;;;;iBAazC,MAAM,WAAW,WAAW;;;;;;iBAgB5B,WAAW;;iBAOX,MAAM,WAAW,WAAW;;;;;iBAQ5B,WACd,WACA,WACA,cACA,mBACE,WAAW,WAAW;;;;;;iBAWV,YACd,QAAQ,cACR,cACA,QAAQ,WAAW;;;;;;KAiBT,iBAAiB,YAAY,YAAY,WAAW;UAE/C;;EAEf,QAAQ;EACR,SAAS;;EAET;;EAEA,OAAO;;EAEP;;EAEA;;;;;;;iBAQc,WAAW,KAAK,0BAA0B,SAAS;;;;;;iBAwBnD,WAAW;;;;;;;iBAcX,aAAa,SAAS,SAAS;;;;;;;;cA2BlC;;iBAUG,YAAY,eAAe;UAM1B;EACf;EACA;EACA;;EAEA;;UAGe;WACN;WACA;WACA;;EAET,IAAI;;EAEJ,KAAK;;EAEL,KAAK,YAAY;;;cAIN,gBAAgB,SAAS;;;;;;iBAYtB,aAAa,iBAAiB,SAAQ,eAAoB;UAmDzD;WACN;;EAET,IAAI;EACJ,KAAK;EACL,KAAK,YAAY;;;;;;iBAOH,SAAS,2BAA2B;;iBAWpC,cACd,4BACA,SAAQ,eACP"}