@dowel-ui/react 0.5.0 → 0.8.0

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

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-funnel/meta.ts
+const meta = defineMeta({
+	name: "dither-funnel",
+	title: "Dither Funnel",
+	description: "A conversion funnel of dithered stage bars that morph between periods, with overall and step conversion per stage.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["dither-funnel.tsx"],
+	a11y: "The bars are role=\"img\" with an aria-label giving every stage's value and conversion. Each stage is a button over its bar, showing its name and overall conversion and named with the full breakdown (share of the first stage, step conversion, drop-off); hover or focus fills the text readout and pressing pins it (aria-pressed). The data is always in a table, visually hidden unless showTable is set."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-funnel/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-funnel\",\n  title: \"Dither Funnel\",\n  description:\n    \"A conversion funnel of dithered stage bars that morph between periods, with overall and step conversion per stage.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"dither-funnel.tsx\"],\n  a11y:\n    'The bars are role=\"img\" with an aria-label giving every stage\\'s value and conversion. Each ' +\n    \"stage is a button over its bar, showing its name and overall conversion and named with the \" +\n    \"full breakdown (share of the first stage, step conversion, drop-off); hover or focus fills \" +\n    \"the text readout and pressing pins it (aria-pressed). The data is always in a table, visually \" +\n    \"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,mBAAmB;CAC3B,MACE;AAKJ,CAAC"}

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

@@ -0,0 +1,48 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/dither-gauge/dither-gauge.d.ts
+declare const ditherGaugeVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DitherGaugeMetric {
+  key: string;
+  label: string;
+  value: number;
+  /** Full-scale value. Default 100. */
+  max?: number;
+  /** Colour token or CSS colour expression. Defaults to the palette. */
+  color?: string;
+}
+interface DitherGaugeProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof ditherGaugeVariants> {
+  metrics: readonly DitherGaugeMetric[];
+  /** What the gauge shows. Names the image and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  /** Formats a reading. Defaults to the share of `max` as a whole percentage. */
+  formatValue?: (value: number, metric: DitherGaugeMetric) => string;
+  /** Show the metric buttons (only drawn with more than one metric). */
+  showLegend?: boolean;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  cell?: number;
+  /** The metric the centre reads (controlled). Defaults to the first. */
+  activeMetric?: string;
+  defaultActiveMetric?: string;
+  onActiveMetricChange?: (key: string) => void;
+  /** Data table headers. */
+  categoryLabel?: string;
+  valueLabel?: string;
+}
+/** A reading's share of its scale, clamped to 0..1. */
+declare function gaugeFraction(metric: DitherGaugeMetric): number;
+/** Ring radii for `count` concentric rings inside `outer`. */
+declare function gaugeRings(outer: number, count: number): {
+  inner: number;
+  outer: number;
+}[];
+declare function DitherGauge({ metrics, label, description, size, formatValue, showLegend, showTable, animate, cell, activeMetric, defaultActiveMetric, onActiveMetricChange, categoryLabel, valueLabel, className, ...props }: DitherGaugeProps): import("react").JSX.Element;
+//#endregion
+export { DitherGauge, DitherGaugeMetric, DitherGaugeProps, ditherGaugeVariants, gaugeFraction, gaugeRings };
+//# sourceMappingURL=dither-gauge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-gauge.d.ts","names":[],"sources":["../../../src/components/dither-gauge/dither-gauge.tsx"],"mappings":";;;cAmCa,sBAAmB;;6CAS9B;UAEe;EACf;EACA;EACA;;EAEA;;EAEA;;UAGe,yBAEb,KAAK,2CACL,oBAAoB;EACtB,kBAAkB;;EAElB;;EAEA;;EAEA,eAAe,eAAe,QAAQ;;EAEtC;;EAEA;EACA;EACA;;EAEA;EACA;EACA,wBAAwB;;EAExB;EACA;;;iBAIc,cAAc,QAAQ;;iBAOtB,WAAW,eAAe;EAAkB;EAAe;;iBAY3D,cACd,SACA,OACA,aACA,MACA,aACA,YACA,WACA,SACA,MACA,cACA,qBACA,sBACA,eACA,YACA,cACG,SACF,mCAAgB,IAAA"}

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

@@ -0,0 +1,189 @@
+"use client";
+import "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { createSprings, ditherFill, drift, hash2, seriesColor, tokenToCss } from "../dither-canvas/dither-engine.js";
+import { DitherCanvas, DitherTable } from "../dither-canvas/dither-canvas.js";
+import { makePath, traceWedge } 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-gauge/dither-gauge.tsx
+const ditherGaugeVariants = cva("flex flex-col items-center gap-3", {
+	variants: { size: {
+		sm: "[--dither-gauge-height:6rem]",
+		md: "[--dither-gauge-height:8.5rem]",
+		lg: "[--dither-gauge-height:11rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** A reading's share of its scale, clamped to 0..1. */
+function gaugeFraction(metric) {
+	const max = metric.max ?? 100;
+	if (!(max > 0) || !Number.isFinite(metric.value)) return 0;
+	return Math.min(1, Math.max(0, metric.value / max));
+}
+/** Ring radii for `count` concentric rings inside `outer`. */
+function gaugeRings(outer, count) {
+	const band = Math.max(5, outer * (count > 1 ? .11 : .14));
+	const gap = Math.max(2, band * .4);
+	return Array.from({ length: count }, (_, i) => {
+		const ringOuter = outer - i * (band + gap);
+		return {
+			outer: ringOuter,
+			inner: Math.max(0, ringOuter - band)
+		};
+	});
+}
+const percent = (value, metric) => `${String(Math.round(gaugeFraction({
+	...metric,
+	value
+}) * 100))}%`;
+function DitherGauge({ metrics, label, description, size, formatValue = percent, showLegend = true, showTable = false, animate = true, cell = 3, activeMetric, defaultActiveMetric, onActiveMetricChange, categoryLabel = "Metric", valueLabel = "Reading", className, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultActiveMetric ?? metrics[0]?.key);
+	const [preview, setPreview] = useState(null);
+	const chosenKey = activeMetric ?? uncontrolled;
+	const chosen = Math.max(0, metrics.findIndex((metric) => metric.key === chosenKey));
+	const shown = preview ?? chosen;
+	const fractions = metrics.map(gaugeFraction);
+	const fills = useRef(createSprings(fractions.map(() => 0), {
+		stiffness: 120,
+		damping: 20,
+		mass: 1
+	}));
+	const draw = (ctx, frame) => {
+		const { width, height, time } = frame;
+		fills.current.set(fractions);
+		const moving = fills.current.step(frame.delta, frame.reducedMotion);
+		const current = fills.current.values;
+		const center = {
+			x: width / 2,
+			y: height * .94
+		};
+		gaugeRings(Math.min(width * .47, height * .88), metrics.length).forEach((ring, i) => {
+			if (ring.inner <= 0) return;
+			ctx.save();
+			ctx.beginPath();
+			traceWedge(ctx, center, ring.inner, ring.outer, Math.PI, Math.PI * 2);
+			ctx.fillStyle = frame.color("foreground");
+			ctx.globalAlpha = .1;
+			ctx.fill();
+			ctx.restore();
+			const fraction = Math.min(1, Math.max(0, current[i] ?? 0));
+			if (fraction <= .001) return;
+			const end = Math.PI + fraction * Math.PI;
+			const dim = preview !== null && preview !== i;
+			ditherFill(ctx, {
+				clip: makePath((sink) => {
+					traceWedge(sink, center, ring.inner, ring.outer, Math.PI, end);
+				}),
+				bounds: {
+					x: center.x - ring.outer,
+					y: center.y - ring.outer,
+					width: ring.outer * 2,
+					height: ring.outer
+				},
+				cell: frame.cell,
+				color: frame.color(seriesColor(i, metrics[i]?.color)),
+				alpha: dim ? .3 : .9,
+				density: (cx, cy) => (.4 + .4 * drift(cx, cy, time * 3)) * (.8 + .4 * hash2(cx, cy)) + (preview === i ? .15 : 0)
+			});
+		});
+		return moving;
+	};
+	const choose = (index) => {
+		const key = metrics[index]?.key;
+		if (key === void 0) return;
+		if (activeMetric === void 0) setUncontrolled(key);
+		onActiveMetricChange?.(key);
+	};
+	const reading = (metric) => formatValue(metric.value, metric);
+	const summary = description ?? (metrics.length === 0 ? "No data." : `${metrics.map((metric) => `${metric.label} ${reading(metric)}`).join(", ")}.`);
+	const metric = metrics[shown];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dither-gauge",
+		...props,
+		className: cn(ditherGaugeVariants({ size }), className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "dither-gauge-plot",
+				className: "relative h-[var(--dither-gauge-height)] w-full",
+				style: { direction: "ltr" },
+				children: [/* @__PURE__ */ jsx("div", {
+					role: "img",
+					"aria-label": `${label}: ${summary}`,
+					className: "size-full",
+					children: /* @__PURE__ */ jsx(DitherCanvas, {
+						draw,
+						animate,
+						cell
+					})
+				}), metric && /* @__PURE__ */ jsxs("div", {
+					role: "meter",
+					"data-slot": "dither-gauge-reading",
+					"aria-label": metric.label,
+					"aria-valuemin": 0,
+					"aria-valuemax": metric.max ?? 100,
+					"aria-valuenow": Math.min(metric.max ?? 100, Math.max(0, metric.value)),
+					"aria-valuetext": reading(metric),
+					className: "absolute inset-x-0 bottom-0 flex flex-col items-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-2xl leading-none font-semibold tabular-nums",
+						children: reading(metric)
+					}), /* @__PURE__ */ jsx("span", {
+						className: "mt-1 text-2xs text-muted-foreground",
+						children: metric.label
+					})]
+				})]
+			}),
+			showLegend && metrics.length > 1 && /* @__PURE__ */ jsx("ul", {
+				"data-slot": "dither-gauge-legend",
+				"aria-label": `${label} metrics`,
+				className: "flex flex-wrap justify-center gap-1",
+				children: metrics.map((entry, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": chosen === index,
+					"data-active": preview === 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: () => {
+						setPreview(index);
+					},
+					onPointerLeave: () => {
+						setPreview(null);
+					},
+					onFocus: () => {
+						setPreview(index);
+					},
+					onBlur: () => {
+						setPreview(null);
+					},
+					onClick: () => {
+						choose(index);
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "size-2.5 rounded-full",
+							style: { background: tokenToCss(seriesColor(index, entry.color)) }
+						}),
+						entry.label,
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: reading(entry)
+						})
+					]
+				}) }, entry.key))
+			}),
+			/* @__PURE__ */ jsx(DitherTable, {
+				caption: label,
+				columns: [categoryLabel, valueLabel],
+				rows: metrics.map((entry) => [entry.label, reading(entry)]),
+				visible: showTable
+			})
+		]
+	});
+}
+//#endregion
+export { DitherGauge, ditherGaugeVariants, gaugeFraction, gaugeRings };
+
+//# sourceMappingURL=dither-gauge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-gauge.js","names":[],"sources":["../../../src/components/dither-gauge/dither-gauge.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Server CPU Gauge\" (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  hash2,\n  makePath,\n  seriesColor,\n  tokenToCss,\n  traceWedge,\n  type DitherDraw,\n} from \"@/components/dither-canvas\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A half-circle gauge drawn in dithered cells, one ring per metric — amicro's\n * server gauge with its CPU / memory / network switch. The outer ring is the\n * first metric. Each fill is a spring in the engine (amicro's 120 / 20), so a\n * new reading sweeps rather than jumps.\n *\n * The reading in the centre is a real role=\"meter\" with aria-valuenow, min and\n * max. With several metrics, legend buttons preview a ring on hover or focus\n * (the rest dim) and pick the one the centre reads when pressed. amicro wobbled\n * the drawn value a few percent with a timer; a gauge that shows a reading it\n * was not given is lying, so here only the cells shimmer.\n */\n\nexport const ditherGaugeVariants = cva(\"flex flex-col items-center gap-3\", {\n  variants: {\n    size: {\n      sm: \"[--dither-gauge-height:6rem]\",\n      md: \"[--dither-gauge-height:8.5rem]\",\n      lg: \"[--dither-gauge-height:11rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface DitherGaugeMetric {\n  key: string;\n  label: string;\n  value: number;\n  /** Full-scale value. Default 100. */\n  max?: number;\n  /** Colour token or CSS colour expression. Defaults to the palette. */\n  color?: string;\n}\n\nexport interface DitherGaugeProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof ditherGaugeVariants> {\n  metrics: readonly DitherGaugeMetric[];\n  /** What the gauge shows. Names the image and the data table. */\n  label: string;\n  /** Replaces the generated summary in the image's accessible name. */\n  description?: string;\n  /** Formats a reading. Defaults to the share of `max` as a whole percentage. */\n  formatValue?: (value: number, metric: DitherGaugeMetric) => string;\n  /** Show the metric buttons (only drawn with more than one metric). */\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 metric the centre reads (controlled). Defaults to the first. */\n  activeMetric?: string;\n  defaultActiveMetric?: string;\n  onActiveMetricChange?: (key: string) => void;\n  /** Data table headers. */\n  categoryLabel?: string;\n  valueLabel?: string;\n}\n\n/** A reading's share of its scale, clamped to 0..1. */\nexport function gaugeFraction(metric: DitherGaugeMetric): number {\n  const max = metric.max ?? 100;\n  if (!(max > 0) || !Number.isFinite(metric.value)) return 0;\n  return Math.min(1, Math.max(0, metric.value / max));\n}\n\n/** Ring radii for `count` concentric rings inside `outer`. */\nexport function gaugeRings(outer: number, count: number): { inner: number; outer: number }[] {\n  const band = Math.max(5, outer * (count > 1 ? 0.11 : 0.14));\n  const gap = Math.max(2, band * 0.4);\n  return Array.from({ length: count }, (_, i) => {\n    const ringOuter = outer - i * (band + gap);\n    return { outer: ringOuter, inner: Math.max(0, ringOuter - band) };\n  });\n}\n\nconst percent = (value: number, metric: DitherGaugeMetric) =>\n  `${String(Math.round(gaugeFraction({ ...metric, value }) * 100))}%`;\n\nexport function DitherGauge({\n  metrics,\n  label,\n  description,\n  size,\n  formatValue = percent,\n  showLegend = true,\n  showTable = false,\n  animate = true,\n  cell = 3,\n  activeMetric,\n  defaultActiveMetric,\n  onActiveMetricChange,\n  categoryLabel = \"Metric\",\n  valueLabel = \"Reading\",\n  className,\n  ...props\n}: DitherGaugeProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultActiveMetric ?? metrics[0]?.key);\n  const [preview, setPreview] = useState<number | null>(null);\n  const chosenKey = activeMetric ?? uncontrolled;\n  const chosen = Math.max(\n    0,\n    metrics.findIndex((metric) => metric.key === chosenKey),\n  );\n  const shown = preview ?? chosen;\n  const fractions = metrics.map(gaugeFraction);\n  const fills = useRef(\n    createSprings(\n      fractions.map(() => 0),\n      { stiffness: 120, damping: 20, mass: 1 },\n    ),\n  );\n\n  const draw: DitherDraw = (ctx, frame) => {\n    const { width, height, time } = frame;\n    fills.current.set(fractions);\n    const moving = fills.current.step(frame.delta, frame.reducedMotion);\n    const current = fills.current.values;\n    const center = { x: width / 2, y: height * 0.94 };\n    const outer = Math.min(width * 0.47, height * 0.88);\n    const rings = gaugeRings(outer, metrics.length);\n    rings.forEach((ring, i) => {\n      if (ring.inner <= 0) return;\n      // The track: a solid, faint half ring.\n      ctx.save();\n      ctx.beginPath();\n      traceWedge(ctx, center, ring.inner, ring.outer, Math.PI, Math.PI * 2);\n      ctx.fillStyle = frame.color(\"foreground\");\n      ctx.globalAlpha = 0.1;\n      ctx.fill();\n      ctx.restore();\n\n      const fraction = Math.min(1, Math.max(0, current[i] ?? 0));\n      if (fraction <= 0.001) return;\n      const end = Math.PI + fraction * Math.PI;\n      const dim = preview !== null && preview !== i;\n      ditherFill(ctx, {\n        clip: makePath((sink) => {\n          traceWedge(sink, center, ring.inner, ring.outer, Math.PI, end);\n        }),\n        bounds: {\n          x: center.x - ring.outer,\n          y: center.y - ring.outer,\n          width: ring.outer * 2,\n          height: ring.outer,\n        },\n        cell: frame.cell,\n        color: frame.color(seriesColor(i, metrics[i]?.color)),\n        alpha: dim ? 0.3 : 0.9,\n        density: (cx, cy) =>\n          (0.4 + 0.4 * drift(cx, cy, time * 3)) * (0.8 + 0.4 * hash2(cx, cy)) +\n          (preview === i ? 0.15 : 0),\n      });\n    });\n    return moving;\n  };\n\n  const choose = (index: number) => {\n    const key = metrics[index]?.key;\n    if (key === undefined) return;\n    if (activeMetric === undefined) setUncontrolled(key);\n    onActiveMetricChange?.(key);\n  };\n\n  const reading = (metric: DitherGaugeMetric) => formatValue(metric.value, metric);\n  const summary =\n    description ??\n    (metrics.length === 0\n      ? \"No data.\"\n      : `${metrics.map((metric) => `${metric.label} ${reading(metric)}`).join(\", \")}.`);\n  const metric = metrics[shown];\n\n  return (\n    <div\n      data-slot=\"dither-gauge\"\n      {...props}\n      className={cn(ditherGaugeVariants({ size }), className)}\n    >\n      <div\n        data-slot=\"dither-gauge-plot\"\n        className=\"relative h-[var(--dither-gauge-height)] w-full\"\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        {metric && (\n          <div\n            role=\"meter\"\n            data-slot=\"dither-gauge-reading\"\n            aria-label={metric.label}\n            aria-valuemin={0}\n            aria-valuemax={metric.max ?? 100}\n            aria-valuenow={Math.min(metric.max ?? 100, Math.max(0, metric.value))}\n            aria-valuetext={reading(metric)}\n            className=\"absolute inset-x-0 bottom-0 flex flex-col items-center\"\n          >\n            <span className=\"text-2xl leading-none font-semibold tabular-nums\">\n              {reading(metric)}\n            </span>\n            <span className=\"mt-1 text-2xs text-muted-foreground\">{metric.label}</span>\n          </div>\n        )}\n      </div>\n      {showLegend && metrics.length > 1 && (\n        <ul\n          data-slot=\"dither-gauge-legend\"\n          aria-label={`${label} metrics`}\n          className=\"flex flex-wrap justify-center gap-1\"\n        >\n          {metrics.map((entry, index) => (\n            <li key={entry.key}>\n              <button\n                type=\"button\"\n                aria-pressed={chosen === index}\n                data-active={preview === 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                  setPreview(index);\n                }}\n                onPointerLeave={() => {\n                  setPreview(null);\n                }}\n                onFocus={() => {\n                  setPreview(index);\n                }}\n                onBlur={() => {\n                  setPreview(null);\n                }}\n                onClick={() => {\n                  choose(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} <span className=\"tabular-nums\">{reading(entry)}</span>\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      <DitherTable\n        caption={label}\n        columns={[categoryLabel, valueLabel]}\n        rows={metrics.map((entry) => [entry.label, reading(entry)])}\n        visible={showTable}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { DitherGauge, DitherGaugeMetric, DitherGaugeProps, ditherGaugeVariants, gaugeFraction, gaugeRings } from "./dither-gauge.js";
+export { DitherGauge, type DitherGaugeMetric, type DitherGaugeProps, ditherGaugeVariants, gaugeFraction, gaugeRings };

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

@@ -0,0 +1,2 @@
+import { DitherGauge, ditherGaugeVariants, gaugeFraction, gaugeRings } from "./dither-gauge.js";
+export { DitherGauge, ditherGaugeVariants, gaugeFraction, gaugeRings };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-gauge/meta.ts
+const meta = defineMeta({
+	name: "dither-gauge",
+	title: "Dither Gauge",
+	description: "A half-circle gauge drawn in dithered cells, one sweeping ring per metric, with a centre reading and metric switch.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["dither-gauge.tsx"],
+	a11y: "The rings are role=\"img\" with an aria-label listing every metric's reading. The centre reading is a role=\"meter\" with aria-valuemin, aria-valuemax, aria-valuenow and a formatted aria-valuetext. With several metrics, legend buttons (named with label and reading) preview a ring on hover or focus and choose the centre's metric when pressed (aria-pressed). The data is always in a table, visually hidden unless showTable is set."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-gauge/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-gauge\",\n  title: \"Dither Gauge\",\n  description:\n    \"A half-circle gauge drawn in dithered cells, one sweeping ring per metric, with a centre reading and metric switch.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"dither-gauge.tsx\"],\n  a11y:\n    'The rings are role=\"img\" with an aria-label listing every metric\\'s reading. The centre ' +\n    'reading is a role=\"meter\" with aria-valuemin, aria-valuemax, aria-valuenow and a formatted ' +\n    \"aria-valuetext. With several metrics, legend buttons (named with label and reading) preview a \" +\n    \"ring on hover or focus and choose the centre's metric when pressed (aria-pressed). The data is \" +\n    \"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,kBAAkB;CAC1B,MACE;AAKJ,CAAC"}

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

@@ -0,0 +1,63 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/dither-heatmap/dither-heatmap.d.ts
+declare const ditherHeatmapVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DitherHeatmapCell {
+  row: number;
+  column: number;
+}
+interface DitherHeatmapCellInfo {
+  row: string;
+  column: string;
+  value: number;
+}
+interface DitherHeatmapProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof ditherHeatmapVariants> {
+  /** Row names, top to bottom (e.g. weekdays). */
+  rows: readonly string[];
+  /** Column names, start to end (e.g. hours or weeks). */
+  columns: readonly string[];
+  /** `values[row][column]`. Missing, negative and non-finite values count as zero. */
+  values: readonly (readonly number[])[];
+  /** What the chart shows. Names the image, the grid and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  /** Value of a full-intensity tile. Defaults to the largest value. */
+  max?: number;
+  /** Quantise intensity into this many steps (amicro's activity map uses 5). */
+  levels?: number;
+  /** Colour token or CSS colour expression. Default "primary". */
+  color?: string;
+  formatValue?: (value: number) => string;
+  /** The readout for one cell. Defaults to "Row, Column: value". */
+  formatCell?: (cell: DitherHeatmapCellInfo) => string;
+  /** Show row and column labels. */
+  showAxis?: boolean;
+  /** Show a Less → More scale. */
+  showLegend?: boolean;
+  lessLabel?: string;
+  moreLabel?: string;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  /** Cell pitch in CSS pixels. Default 3: tiles are small. */
+  cell?: number;
+  /** The cell whose readout shows (controlled); null hides it. */
+  activeCell?: DitherHeatmapCell | null;
+  defaultActiveCell?: DitherHeatmapCell | null;
+  onActiveCellChange?: (cell: DitherHeatmapCell | null) => void;
+  /** Header of the data table's row-name column. */
+  rowLabel?: string;
+}
+/** Gap between tiles in CSS pixels, shared by the canvas and the cell grid. */
+declare const HEATMAP_GAP = 2.5;
+/** A value's intensity, 0..1, against `max`, optionally quantised to `levels` steps. */
+declare function heatmapIntensity(value: number, max: number, levels?: number): number;
+/** The cell a grid key moves to, or null when the key is not a grid key. */
+declare function cellFromKey(key: string, ctrl: boolean, cell: DitherHeatmapCell, rows: number, columns: number): DitherHeatmapCell | null;
+declare function DitherHeatmap({ rows, columns, values, label, description, max, levels, color, size, formatValue, formatCell, showAxis, showLegend, lessLabel, moreLabel, showTable, animate, cell, activeCell, defaultActiveCell, onActiveCellChange, rowLabel, className, ...props }: DitherHeatmapProps): import("react").JSX.Element;
+//#endregion
+export { DitherHeatmap, DitherHeatmapCell, DitherHeatmapCellInfo, DitherHeatmapProps, HEATMAP_GAP, cellFromKey, ditherHeatmapVariants, heatmapIntensity };
+//# sourceMappingURL=dither-heatmap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-heatmap.d.ts","names":[],"sources":["../../../src/components/dither-heatmap/dither-heatmap.tsx"],"mappings":";;;cA0Ca,wBAAqB;;6CAShC;UAEe;EACf;EACA;;UAGe;EACf;EACA;EACA;;UAGe,2BAEb,KAAK,2CACL,oBAAoB;;EAEtB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;EACA,eAAe;;EAEf,cAAc,MAAM;;EAEpB;;EAEA;EACA;EACA;;EAEA;EACA;;EAEA;;EAEA,aAAa;EACb,oBAAoB;EACpB,sBAAsB,MAAM;;EAE5B;;;cAIW;;iBAGG,iBAAiB,eAAe,aAAa;;iBAQ7C,YACd,aACA,eACA,MAAM,mBACN,cACA,kBACC;iBA0Ba,gBACd,MACA,SACA,QACA,OACA,aACA,KACA,QACA,OACA,MACA,aACA,YACA,UACA,YACA,WACA,WACA,WACA,SACA,MACA,YACA,mBACA,oBACA,UACA,cACG,SACF,qCAAkB,IAAA"}