@dowel-ui/react 0.7.0 → 0.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-line/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-line\",\n  title: \"Dither Line\",\n  description:\n    \"A smooth monotone line over a drifting dithered gradient fill, with a keyboard-operable point scrubber.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"dither-line.tsx\"],\n  a11y:\n    'The plot is role=\"img\" with an aria-label giving the range, high and low. The scrubber over ' +\n    \"it is a slider: arrow keys step a point, Page keys jump, Home/End go to the ends, Escape hides \" +\n    \"the cursor, and aria-valuetext announces the point and value shown in the readout. 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,iBAAiB;CACzB,MACE;AAIJ,CAAC"}

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

@@ -0,0 +1,51 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/dither-meter/dither-meter.d.ts
+declare const ditherMeterVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DitherMeterSegment {
+  key: string;
+  label: string;
+  value: number;
+  /** Colour token or CSS colour expression. Defaults to the palette. */
+  color?: string;
+}
+interface DitherMeterProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof ditherMeterVariants> {
+  segments: readonly DitherMeterSegment[];
+  /** What the bar measures. Names the meter and the data table. */
+  label: string;
+  /** Replaces the generated breakdown in the meter's aria-valuetext. */
+  description?: string;
+  /** Capacity. Defaults to the sum of the segments (a full bar). */
+  max?: number;
+  formatValue?: (value: number) => string;
+  /** Formats a 0..1 share. Defaults to a whole percentage. */
+  formatPercent?: (share: number) => string;
+  /** Show the category buttons. */
+  showLegend?: boolean;
+  /** Show the "used of capacity" line. */
+  showValue?: boolean;
+  /** Name of the unused remainder. */
+  freeLabel?: string;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  cell?: number;
+  /** The pinned category key (controlled). */
+  activeSegment?: string | null;
+  defaultActiveSegment?: string | null;
+  onActiveSegmentChange?: (key: string | null) => void;
+  /** Data table headers. */
+  categoryLabel?: string;
+  valueLabel?: string;
+  shareLabel?: string;
+}
+/** Gap between segments in CSS pixels. */
+declare const METER_GAP = 2;
+/** Each segment's [start, end] along the bar, 0..1, stacked from the start. */
+declare function meterSpans(values: readonly number[], capacity: number): [number, number][];
+declare function DitherMeter({ segments, label, description, max, size, formatValue, formatPercent, showLegend, showValue, freeLabel, showTable, animate, cell, activeSegment, defaultActiveSegment, onActiveSegmentChange, categoryLabel, valueLabel, shareLabel, className, ...props }: DitherMeterProps): import("react").JSX.Element;
+//#endregion
+export { DitherMeter, DitherMeterProps, DitherMeterSegment, METER_GAP, ditherMeterVariants, meterSpans };
+//# sourceMappingURL=dither-meter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-meter.d.ts","names":[],"sources":["../../../src/components/dither-meter/dither-meter.tsx"],"mappings":";;;cAmCa,sBAAmB;;6CAS9B;UAEe;EACf;EACA;EACA;;EAEA;;UAGe,yBAEb,KAAK,2CACL,oBAAoB;EACtB,mBAAmB;;EAEnB;;EAEA;;EAEA;EACA,eAAe;;EAEf,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;EACA;EACA;;EAEA;EACA;EACA,yBAAyB;;EAEzB;EACA;EACA;;;cAIW;;iBAKG,WAAW,2BAA2B;iBAYtC,cACd,UACA,OACA,aACA,KACA,MACA,aACA,eACA,YACA,WACA,WACA,WACA,SACA,MACA,eACA,sBACA,uBACA,eACA,YACA,YACA,cACG,SACF,mCAAgB,IAAA"}

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

@@ -0,0 +1,211 @@
+"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, 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-meter/dither-meter.tsx
+const ditherMeterVariants = cva("flex flex-col gap-2", {
+	variants: { size: {
+		sm: "[--dither-meter-height:0.75rem]",
+		md: "[--dither-meter-height:1.5rem]",
+		lg: "[--dither-meter-height:2.25rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Gap between segments in CSS pixels. */
+const METER_GAP = 2;
+const clean = (value) => Number.isFinite(value) && value > 0 ? value : 0;
+/** Each segment's [start, end] along the bar, 0..1, stacked from the start. */
+function meterSpans(values, capacity) {
+	let cursor = 0;
+	return values.map((value) => {
+		const share = capacity > 0 ? clean(value) / capacity : 0;
+		const start = Math.min(1, cursor);
+		cursor += share;
+		return [start, Math.min(1, cursor)];
+	});
+}
+const wholePercent = (share) => `${String(Math.round(share * 100))}%`;
+function DitherMeter({ segments, label, description, max, size, formatValue = formatDitherValue, formatPercent = wholePercent, showLegend = true, showValue = true, freeLabel = "Free", showTable = false, animate = true, cell = 3, activeSegment, defaultActiveSegment = null, onActiveSegmentChange, categoryLabel = "Category", valueLabel = "Value", shareLabel = "Share", className, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultActiveSegment);
+	const [preview, setPreview] = useState(null);
+	const pinnedKey = activeSegment !== void 0 ? activeSegment : uncontrolled;
+	const pinned = pinnedKey === null ? -1 : segments.findIndex((s) => s.key === pinnedKey);
+	const lit = preview ?? (pinned >= 0 ? pinned : null);
+	const values = segments.map((segment) => clean(segment.value));
+	const used = values.reduce((sum, value) => sum + value, 0);
+	const capacity = max !== void 0 && max > 0 ? max : used;
+	const free = Math.max(0, capacity - used);
+	const shares = values.map((value) => capacity > 0 ? value / capacity : 0);
+	const spans = meterSpans(values, capacity);
+	const ends = useRef(createSprings(spans.map(() => 0), {
+		stiffness: 150,
+		damping: 20,
+		mass: 1
+	}));
+	const draw = (ctx, frame) => {
+		const { width, height, time } = frame;
+		ends.current.set(spans.map((span) => span[1]));
+		const moving = ends.current.step(frame.delta, frame.reducedMotion);
+		const current = ends.current.values;
+		const radius = Math.min(height / 2, 6);
+		const bar = makePath((sink) => {
+			traceRoundedRect(sink, 0, 0, width, height, radius);
+		});
+		ctx.save();
+		if (bar) ctx.clip(bar);
+		ctx.globalAlpha = .1;
+		ctx.fillStyle = frame.color("foreground");
+		ctx.fillRect(0, 0, width, height);
+		ctx.globalAlpha = 1;
+		let start = 0;
+		current.forEach((end, i) => {
+			const x0 = start * width + (i > 0 ? 1 : 0);
+			const x1 = Math.min(1, end) * width - 1;
+			start = Math.max(start, Math.min(1, end));
+			if (x1 - x0 < 1) return;
+			ditherFill(ctx, {
+				clip: makePath((sink) => {
+					traceRoundedRect(sink, x0, 0, x1 - x0, height, 1);
+				}),
+				bounds: {
+					x: x0,
+					y: 0,
+					width: x1 - x0,
+					height
+				},
+				cell: frame.cell,
+				color: frame.color(seriesColor(i, segments[i]?.color)),
+				alpha: lit !== null && lit !== i ? .3 : .85,
+				density: (cx, cy) => (.3 + .4 * drift(cx, cy, time * 1.2)) * (.8 + .4 * hash2(cx, cy)) + (lit === i ? .2 : 0)
+			});
+		});
+		ctx.restore();
+		return moving;
+	};
+	const pin = (index) => {
+		const key = segments[index]?.key ?? null;
+		const next = pinnedKey === key ? null : key;
+		if (activeSegment === void 0) setUncontrolled(next);
+		onActiveSegmentChange?.(next);
+	};
+	const part = (i) => `${segments[i]?.label ?? ""} ${formatValue(values[i] ?? 0)} (${formatPercent(shares[i] ?? 0)})`;
+	const total = `${formatValue(used)} of ${formatValue(capacity)} used`;
+	const breakdown = segments.length === 0 ? "No data." : `${total} (${formatPercent(capacity > 0 ? used / capacity : 0)}). ${segments.map((_, i) => part(i)).join(", ")}; ${freeLabel.toLowerCase()} ${formatValue(free)}.`;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dither-meter",
+		...props,
+		className: cn(ditherMeterVariants({ size }), className),
+		children: [
+			showValue && /* @__PURE__ */ jsxs("p", {
+				"aria-hidden": true,
+				"data-slot": "dither-meter-value",
+				className: "flex items-baseline justify-between gap-3 text-xs text-muted-foreground tabular-nums",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-sm font-semibold text-foreground",
+						children: formatValue(used)
+					}),
+					" ",
+					"of ",
+					formatValue(capacity)
+				] }), /* @__PURE__ */ jsx("span", { children: formatPercent(capacity > 0 ? used / capacity : 0) })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "meter",
+				"data-slot": "dither-meter-bar",
+				"aria-label": label,
+				"aria-valuemin": 0,
+				"aria-valuemax": capacity,
+				"aria-valuenow": Math.min(used, capacity),
+				"aria-valuetext": description ?? breakdown,
+				className: "h-[var(--dither-meter-height)]",
+				style: { direction: "ltr" },
+				children: /* @__PURE__ */ jsx(DitherCanvas, {
+					draw,
+					animate,
+					cell
+				})
+			}),
+			showLegend && segments.length > 0 && /* @__PURE__ */ jsxs("ul", {
+				"data-slot": "dither-meter-legend",
+				"aria-label": `${label} categories`,
+				className: "flex flex-wrap gap-1",
+				children: [segments.map((segment, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": pinned === i,
+					"data-active": lit === i || 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(i);
+					},
+					onPointerLeave: () => {
+						setPreview(null);
+					},
+					onFocus: () => {
+						setPreview(i);
+					},
+					onBlur: () => {
+						setPreview(null);
+					},
+					onClick: () => {
+						pin(i);
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "size-2.5 rounded-full",
+							style: { background: tokenToCss(seriesColor(i, segment.color)) }
+						}),
+						segment.label,
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: formatValue(values[i] ?? 0)
+						})
+					]
+				}) }, segment.key)), /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-1.5 px-2 py-1 text-xs text-muted-foreground",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "size-2.5 rounded-full bg-foreground/10"
+						}),
+						freeLabel,
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: formatValue(free)
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(DitherTable, {
+				caption: label,
+				columns: [
+					categoryLabel,
+					valueLabel,
+					shareLabel
+				],
+				rows: [...segments.map((segment, i) => [
+					segment.label,
+					formatValue(values[i] ?? 0),
+					formatPercent(shares[i] ?? 0)
+				]), [
+					freeLabel,
+					formatValue(free),
+					formatPercent(capacity > 0 ? free / capacity : 0)
+				]],
+				visible: showTable
+			})
+		]
+	});
+}
+//#endregion
+export { DitherMeter, METER_GAP, ditherMeterVariants, meterSpans };
+
+//# sourceMappingURL=dither-meter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-meter.js","names":[],"sources":["../../../src/components/dither-meter/dither-meter.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Storage Capacity Bar\" (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  tokenToCss,\n  traceRoundedRect,\n  type DitherDraw,\n} from \"@/components/dither-canvas\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A capacity bar drawn in dithered cells over a faint track — amicro's storage\n * bar — split into one segment per category. Segment lengths are springs in\n * the engine (amicro's 150 / 20), so a new reading fills rather than cuts.\n *\n * The bar is a role=\"meter\" rather than an image: used over capacity is its\n * value (aria-valuenow / min / max) and aria-valuetext reads the breakdown. A\n * meter's children are presentational, so the canvas inside it is too. Legend\n * buttons preview a category on hover or focus and pin it when pressed. The\n * bar fills from the start edge in LTR in every direction, as a canvas draws.\n */\n\nexport const ditherMeterVariants = cva(\"flex flex-col gap-2\", {\n  variants: {\n    size: {\n      sm: \"[--dither-meter-height:0.75rem]\",\n      md: \"[--dither-meter-height:1.5rem]\",\n      lg: \"[--dither-meter-height:2.25rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface DitherMeterSegment {\n  key: string;\n  label: string;\n  value: number;\n  /** Colour token or CSS colour expression. Defaults to the palette. */\n  color?: string;\n}\n\nexport interface DitherMeterProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof ditherMeterVariants> {\n  segments: readonly DitherMeterSegment[];\n  /** What the bar measures. Names the meter and the data table. */\n  label: string;\n  /** Replaces the generated breakdown in the meter's aria-valuetext. */\n  description?: string;\n  /** Capacity. Defaults to the sum of the segments (a full bar). */\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 category buttons. */\n  showLegend?: boolean;\n  /** Show the \"used of capacity\" line. */\n  showValue?: boolean;\n  /** Name of the unused remainder. */\n  freeLabel?: 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 category key (controlled). */\n  activeSegment?: string | null;\n  defaultActiveSegment?: string | null;\n  onActiveSegmentChange?: (key: string | null) => void;\n  /** Data table headers. */\n  categoryLabel?: string;\n  valueLabel?: string;\n  shareLabel?: string;\n}\n\n/** Gap between segments in CSS pixels. */\nexport const METER_GAP = 2;\n\nconst clean = (value: number) => (Number.isFinite(value) && value > 0 ? value : 0);\n\n/** Each segment's [start, end] along the bar, 0..1, stacked from the start. */\nexport function meterSpans(values: readonly number[], capacity: number): [number, number][] {\n  let cursor = 0;\n  return values.map((value) => {\n    const share = capacity > 0 ? clean(value) / capacity : 0;\n    const start = Math.min(1, cursor);\n    cursor += share;\n    return [start, Math.min(1, cursor)];\n  });\n}\n\nconst wholePercent = (share: number) => `${String(Math.round(share * 100))}%`;\n\nexport function DitherMeter({\n  segments,\n  label,\n  description,\n  max,\n  size,\n  formatValue = formatDitherValue,\n  formatPercent = wholePercent,\n  showLegend = true,\n  showValue = true,\n  freeLabel = \"Free\",\n  showTable = false,\n  animate = true,\n  cell = 3,\n  activeSegment,\n  defaultActiveSegment = null,\n  onActiveSegmentChange,\n  categoryLabel = \"Category\",\n  valueLabel = \"Value\",\n  shareLabel = \"Share\",\n  className,\n  ...props\n}: DitherMeterProps) {\n  const [uncontrolled, setUncontrolled] = useState<string | null>(defaultActiveSegment);\n  const [preview, setPreview] = useState<number | null>(null);\n  const pinnedKey = activeSegment !== undefined ? activeSegment : uncontrolled;\n  const pinned = pinnedKey === null ? -1 : segments.findIndex((s) => s.key === pinnedKey);\n  const lit = preview ?? (pinned >= 0 ? pinned : null);\n\n  const values = segments.map((segment) => clean(segment.value));\n  const used = values.reduce((sum, value) => sum + value, 0);\n  const capacity = max !== undefined && max > 0 ? max : used;\n  const free = Math.max(0, capacity - used);\n  const shares = values.map((value) => (capacity > 0 ? value / capacity : 0));\n  const spans = meterSpans(values, capacity);\n  const ends = useRef(\n    createSprings(\n      spans.map(() => 0),\n      { stiffness: 150, damping: 20, mass: 1 },\n    ),\n  );\n\n  const draw: DitherDraw = (ctx, frame) => {\n    const { width, height, time } = frame;\n    ends.current.set(spans.map((span) => span[1]));\n    const moving = ends.current.step(frame.delta, frame.reducedMotion);\n    const current = ends.current.values;\n    const radius = Math.min(height / 2, 6);\n    const bar = makePath((sink) => {\n      traceRoundedRect(sink, 0, 0, width, height, radius);\n    });\n    ctx.save();\n    if (bar) ctx.clip(bar);\n    // The track: amicro's faint full-width bar.\n    ctx.globalAlpha = 0.1;\n    ctx.fillStyle = frame.color(\"foreground\");\n    ctx.fillRect(0, 0, width, height);\n    ctx.globalAlpha = 1;\n    let start = 0;\n    current.forEach((end, i) => {\n      const x0 = start * width + (i > 0 ? METER_GAP / 2 : 0);\n      const x1 = Math.min(1, end) * width - METER_GAP / 2;\n      start = Math.max(start, Math.min(1, end));\n      if (x1 - x0 < 1) return;\n      ditherFill(ctx, {\n        clip: makePath((sink) => {\n          traceRoundedRect(sink, x0, 0, x1 - x0, height, 1);\n        }),\n        bounds: { x: x0, y: 0, width: x1 - x0, height },\n        cell: frame.cell,\n        color: frame.color(seriesColor(i, segments[i]?.color)),\n        alpha: lit !== null && lit !== i ? 0.3 : 0.85,\n        density: (cx, cy) =>\n          (0.3 + 0.4 * drift(cx, cy, time * 1.2)) * (0.8 + 0.4 * hash2(cx, cy)) +\n          (lit === i ? 0.2 : 0),\n      });\n    });\n    ctx.restore();\n    return moving;\n  };\n\n  const pin = (index: number) => {\n    const key = segments[index]?.key ?? null;\n    const next = pinnedKey === key ? null : key;\n    if (activeSegment === undefined) setUncontrolled(next);\n    onActiveSegmentChange?.(next);\n  };\n\n  const part = (i: number) =>\n    `${segments[i]?.label ?? \"\"} ${formatValue(values[i] ?? 0)} (${formatPercent(shares[i] ?? 0)})`;\n  const total = `${formatValue(used)} of ${formatValue(capacity)} used`;\n  const breakdown =\n    segments.length === 0\n      ? \"No data.\"\n      : `${total} (${formatPercent(capacity > 0 ? used / capacity : 0)}). ` +\n        `${segments.map((_, i) => part(i)).join(\", \")}; ${freeLabel.toLowerCase()} ${formatValue(free)}.`;\n\n  return (\n    <div\n      data-slot=\"dither-meter\"\n      {...props}\n      className={cn(ditherMeterVariants({ size }), className)}\n    >\n      {showValue && (\n        <p\n          aria-hidden\n          data-slot=\"dither-meter-value\"\n          className=\"flex items-baseline justify-between gap-3 text-xs text-muted-foreground tabular-nums\"\n        >\n          <span>\n            <span className=\"text-sm font-semibold text-foreground\">{formatValue(used)}</span>{\" \"}\n            of {formatValue(capacity)}\n          </span>\n          <span>{formatPercent(capacity > 0 ? used / capacity : 0)}</span>\n        </p>\n      )}\n      <div\n        role=\"meter\"\n        data-slot=\"dither-meter-bar\"\n        aria-label={label}\n        aria-valuemin={0}\n        aria-valuemax={capacity}\n        aria-valuenow={Math.min(used, capacity)}\n        aria-valuetext={description ?? breakdown}\n        className=\"h-[var(--dither-meter-height)]\"\n        style={{ direction: \"ltr\" }}\n      >\n        <DitherCanvas draw={draw} animate={animate} cell={cell} />\n      </div>\n      {showLegend && segments.length > 0 && (\n        <ul\n          data-slot=\"dither-meter-legend\"\n          aria-label={`${label} categories`}\n          className=\"flex flex-wrap gap-1\"\n        >\n          {segments.map((segment, i) => (\n            <li key={segment.key}>\n              <button\n                type=\"button\"\n                aria-pressed={pinned === i}\n                data-active={lit === i || 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(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\n                  aria-hidden\n                  className=\"size-2.5 rounded-full\"\n                  style={{ background: tokenToCss(seriesColor(i, segment.color)) }}\n                />\n                {segment.label}{\" \"}\n                <span className=\"tabular-nums\">{formatValue(values[i] ?? 0)}</span>\n              </button>\n            </li>\n          ))}\n          <li className=\"flex items-center gap-1.5 px-2 py-1 text-xs text-muted-foreground\">\n            <span aria-hidden className=\"size-2.5 rounded-full bg-foreground/10\" />\n            {freeLabel} <span className=\"tabular-nums\">{formatValue(free)}</span>\n          </li>\n        </ul>\n      )}\n      <DitherTable\n        caption={label}\n        columns={[categoryLabel, valueLabel, shareLabel]}\n        rows={[\n          ...segments.map((segment, i) => [\n            segment.label,\n            formatValue(values[i] ?? 0),\n            formatPercent(shares[i] ?? 0),\n          ]),\n          [freeLabel, formatValue(free), formatPercent(capacity > 0 ? free / capacity : 0)],\n        ]}\n        visible={showTable}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { DitherMeter, DitherMeterProps, DitherMeterSegment, METER_GAP, ditherMeterVariants, meterSpans } from "./dither-meter.js";
+export { DitherMeter, type DitherMeterProps, type DitherMeterSegment, METER_GAP, ditherMeterVariants, meterSpans };

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

@@ -0,0 +1,2 @@
+import { DitherMeter, METER_GAP, ditherMeterVariants, meterSpans } from "./dither-meter.js";
+export { DitherMeter, METER_GAP, ditherMeterVariants, meterSpans };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-meter/meta.ts
+const meta = defineMeta({
+	name: "dither-meter",
+	title: "Dither Meter",
+	description: "A capacity bar drawn in dithered cells, split into categories that fill with a spring, with a category legend.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["dither-meter.tsx"],
+	a11y: "The bar is a role=\"meter\" named by label, with used over capacity as aria-valuenow / aria-valuemax and the per-category breakdown as aria-valuetext (or `description`). Legend entries are buttons, named with category and value, that preview a segment on hover or focus and pin it when pressed (aria-pressed). The visible used-of-capacity line is aria-hidden as it repeats the meter. The data is always in a table, visually hidden unless showTable is set."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-meter/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-meter\",\n  title: \"Dither Meter\",\n  description:\n    \"A capacity bar drawn in dithered cells, split into categories that fill with a spring, with a category legend.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"dither-meter.tsx\"],\n  a11y:\n    'The bar is a role=\"meter\" named by label, with used over capacity as aria-valuenow / ' +\n    \"aria-valuemax and the per-category breakdown as aria-valuetext (or `description`). Legend \" +\n    \"entries are buttons, named with category and value, that preview a segment on hover or focus \" +\n    \"and pin it when pressed (aria-pressed). The visible used-of-capacity line is aria-hidden as it \" +\n    \"repeats the meter. The data is always in a table, visually hidden unless showTable is set.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,eAAe;CACtC,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAKJ,CAAC"}

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

@@ -0,0 +1,53 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/dither-scatter/dither-scatter.d.ts
+declare const ditherScatterVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DitherScatterDatum {
+  /** Short name drawn on the bubble, e.g. "US". */
+  label: string;
+  x: number;
+  y: number;
+  /** Bubble area is proportional to this. */
+  size: number;
+  /** Colour token or CSS colour expression. Defaults to the palette. */
+  color?: string;
+}
+interface DitherScatterProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof ditherScatterVariants> {
+  data: readonly DitherScatterDatum[];
+  /** What the chart shows. Names the image, the points and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  /** Axis ranges. Default from 0 to a round number above the largest value. */
+  xDomain?: readonly [number, number];
+  yDomain?: readonly [number, number];
+  /** Largest bubble radius as a fraction of the plot height. Default 0.26. */
+  maxRadius?: number;
+  /** Smallest bubble radius as a fraction of the plot height. Default 0.07. */
+  minRadius?: number;
+  /** Names of the three values, for the readout, the points and the table. */
+  xLabel?: string;
+  yLabel?: string;
+  sizeLabel?: string;
+  formatValue?: (value: number) => string;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  cell?: number;
+  /** The pinned point (controlled); null pins none. */
+  activeIndex?: number | null;
+  defaultActiveIndex?: number | null;
+  onActiveIndexChange?: (index: number | null) => void;
+  /** Header of the data table's point column. */
+  categoryLabel?: string;
+}
+/** Where `value` falls in `domain`, clamped to 0..1. */
+declare function domainFraction(value: number, domain: readonly [number, number]): number;
+/** Bubble radius as a fraction of plot height: area proportional to `size`. */
+declare function bubbleRadius(size: number, largest: number, minRadius: number, maxRadius: number): number;
+declare function DitherScatter({ data, label, description, xDomain, yDomain, maxRadius, minRadius, xLabel, yLabel, sizeLabel, size, formatValue, showTable, animate, cell, activeIndex, defaultActiveIndex, onActiveIndexChange, categoryLabel, className, ...props }: DitherScatterProps): import("react").JSX.Element;
+//#endregion
+export { DitherScatter, DitherScatterDatum, DitherScatterProps, bubbleRadius, ditherScatterVariants, domainFraction };
+//# sourceMappingURL=dither-scatter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-scatter.d.ts","names":[],"sources":["../../../src/components/dither-scatter/dither-scatter.tsx"],"mappings":";;;cAmCa,wBAAqB;;6CAShC;UAEe;;EAEf;EACA;EACA;;EAEA;;EAEA;;UAGe,2BAEb,KAAK,2CACL,oBAAoB;EACtB,eAAe;;EAEf;;EAEA;;EAEA;EACA;;EAEA;;EAEA;;EAEA;EACA;EACA;EACA,eAAe;;EAEf;EACA;EACA;;EAEA;EACA;EACA,uBAAuB;;EAEvB;;;iBAIc,eAAe,eAAe;;iBAO9B,aACd,cACA,iBACA,mBACA;iBAWc,gBACd,MACA,OACA,aACA,SACA,SACA,WACA,WACA,QACA,QACA,WACA,MACA,aACA,WACA,SACA,MACA,aACA,oBACA,qBACA,eACA,cACG,SACF,qCAAkB,IAAA"}

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

@@ -0,0 +1,211 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { createSprings, ditherFill, drift, hash2, seriesColor, smoothstep } from "../dither-canvas/dither-engine.js";
+import { DitherCanvas, DitherTable, formatDitherValue } from "../dither-canvas/dither-canvas.js";
+import { makePath, niceMax } 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-scatter/dither-scatter.tsx
+const ditherScatterVariants = cva("flex flex-col gap-2", {
+	variants: { size: {
+		sm: "[--dither-scatter-height:8rem]",
+		md: "[--dither-scatter-height:11rem]",
+		lg: "[--dither-scatter-height:15rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Where `value` falls in `domain`, clamped to 0..1. */
+function domainFraction(value, domain) {
+	const [min, max] = domain;
+	if (!(max > min) || !Number.isFinite(value)) return 0;
+	return Math.min(1, Math.max(0, (value - min) / (max - min)));
+}
+/** Bubble radius as a fraction of plot height: area proportional to `size`. */
+function bubbleRadius(size, largest, minRadius, maxRadius) {
+	const share = largest > 0 && size > 0 ? Math.sqrt(Math.min(1, size / largest)) : 0;
+	return minRadius + (maxRadius - minRadius) * share;
+}
+const defaultDomain = (values) => [Math.min(0, ...values), niceMax(Math.max(0, ...values))];
+function DitherScatter({ data, label, description, xDomain, yDomain, maxRadius = .26, minRadius = .07, xLabel = "X", yLabel = "Y", sizeLabel = "Size", size, formatValue = formatDitherValue, showTable = false, animate = true, cell = 3, activeIndex, defaultActiveIndex = null, onActiveIndexChange, categoryLabel = "Point", className, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultActiveIndex);
+	const [preview, setPreview] = useState(null);
+	const pinned = activeIndex !== void 0 ? activeIndex : uncontrolled;
+	const lit = preview ?? pinned;
+	const xRange = xDomain ?? defaultDomain(data.map((d) => d.x));
+	const yRange = yDomain ?? defaultDomain(data.map((d) => d.y));
+	const largest = Math.max(0, ...data.map((d) => Number.isFinite(d.size) ? d.size : 0));
+	const fx = data.map((d) => domainFraction(d.x, xRange));
+	const fy = data.map((d) => domainFraction(d.y, yRange));
+	const fr = data.map((d) => bubbleRadius(d.size, largest, minRadius, maxRadius));
+	const springs = useRef({
+		x: createSprings(fx),
+		y: createSprings(fy),
+		r: createSprings(fr.map(() => 0))
+	});
+	const draw = (ctx, frame) => {
+		const { width, height, time, animated } = frame;
+		const { x: xs, y: ys, r: rs } = springs.current;
+		xs.set(fx);
+		ys.set(fy);
+		rs.set(fr);
+		let moving = xs.step(frame.delta, frame.reducedMotion);
+		moving = ys.step(frame.delta, frame.reducedMotion) || moving;
+		moving = rs.step(frame.delta, frame.reducedMotion) || moving;
+		const pad = maxRadius * height;
+		const spanX = Math.max(0, width - pad * 2);
+		const spanY = Math.max(0, height - pad * 2);
+		const cx = xs.values;
+		const cy = ys.values;
+		rs.values.forEach((fraction, i) => {
+			const r = fraction * height;
+			if (r < 1) return;
+			const floatX = animated ? Math.sin(time * .6 + i * 2) * 4 : 0;
+			const floatY = animated ? Math.cos(time * .6 + i * 3) * 4 : 0;
+			const x = pad + (cx[i] ?? 0) * spanX + floatX;
+			const y = height - pad - (cy[i] ?? 0) * spanY + floatY;
+			const hot = lit === i;
+			ditherFill(ctx, {
+				clip: makePath((sink) => {
+					sink.moveTo(x + r, y);
+					sink.arc(x, y, r, 0, Math.PI * 2);
+					sink.closePath();
+				}),
+				bounds: {
+					x: x - r,
+					y: y - r,
+					width: r * 2,
+					height: r * 2
+				},
+				cell: frame.cell,
+				color: frame.color(seriesColor(i, data[i]?.color)),
+				alpha: lit !== null && !hot ? .3 : .85,
+				density: (px, py) => {
+					return (.3 + .4 * smoothstep(0, 1, 1 - Math.hypot(px - x, py - y) / r) + .3 * drift(px, py, time * .6)) * (.8 + .4 * hash2(px, py)) + (hot ? .15 : 0);
+				}
+			});
+		});
+		return moving;
+	};
+	const pin = (index) => {
+		const next = pinned === index ? null : index;
+		if (activeIndex === void 0) setUncontrolled(next);
+		onActiveIndexChange?.(next);
+	};
+	const values = (d) => `${xLabel} ${formatValue(d.x)}, ${yLabel} ${formatValue(d.y)}, ${sizeLabel} ${formatValue(d.size)}`;
+	const summary = description ?? (data.length === 0 ? "No data." : `${String(data.length)} points. ${data.map((d) => `${d.label}: ${values(d)}`).join("; ")}.`);
+	const pad = `(var(--dither-scatter-height) * ${String(maxRadius)})`;
+	const place = (i) => ({
+		left: `calc(${pad} + ${String(fx[i] ?? 0)} * (100% - 2 * ${pad}))`,
+		top: `calc(100% - ${pad} - ${String(fy[i] ?? 0)} * (100% - 2 * ${pad}))`
+	});
+	const litDatum = lit !== null ? data[lit] : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dither-scatter",
+		...props,
+		className: cn(ditherScatterVariants({ size }), className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "dither-scatter-plot",
+			className: "relative h-[var(--dither-scatter-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",
+					children: data.map((d, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": pinned === i,
+						"aria-label": `${d.label}: ${values(d)}`,
+						"data-active": lit === i || void 0,
+						className: cn("absolute flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full transition-[left,top,width,height] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", focusRing),
+						style: {
+							...place(i),
+							width: `calc(var(--dither-scatter-height) * ${String(2 * (fr[i] ?? 0))})`,
+							height: `calc(var(--dither-scatter-height) * ${String(2 * (fr[i] ?? 0))})`
+						},
+						onPointerEnter: () => {
+							setPreview(i);
+						},
+						onPointerLeave: () => {
+							setPreview(null);
+						},
+						onFocus: () => {
+							setPreview(i);
+						},
+						onBlur: () => {
+							setPreview(null);
+						},
+						onClick: () => {
+							pin(i);
+						},
+						children: /* @__PURE__ */ jsx("span", {
+							className: "rounded-sm bg-background/80 px-1 text-2xs font-semibold text-foreground",
+							children: d.label
+						})
+					}) }, `${d.label}-${String(i)}`))
+				}),
+				litDatum && lit !== null && /* @__PURE__ */ jsxs("div", {
+					"data-slot": "dither-scatter-readout",
+					className: "pointer-events-none absolute z-10 min-w-28 rounded-md border border-border bg-popover px-2.5 py-2 text-xs text-popover-foreground shadow-md",
+					style: {
+						...place(lit),
+						transform: `translate(${(fx[lit] ?? 0) < .2 ? "0%" : (fx[lit] ?? 0) > .8 ? "-100%" : "-50%"}, calc(-100% - var(--dither-scatter-height) * ${String(fr[lit] ?? 0)} - 0.375rem))`
+					},
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "mb-1 font-medium",
+						children: litDatum.label
+					}), /* @__PURE__ */ jsxs("dl", {
+						className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-muted-foreground",
+						children: [
+							/* @__PURE__ */ jsx("dt", { children: xLabel }),
+							/* @__PURE__ */ jsx("dd", {
+								className: "text-end text-foreground tabular-nums",
+								children: formatValue(litDatum.x)
+							}),
+							/* @__PURE__ */ jsx("dt", { children: yLabel }),
+							/* @__PURE__ */ jsx("dd", {
+								className: "text-end text-foreground tabular-nums",
+								children: formatValue(litDatum.y)
+							}),
+							/* @__PURE__ */ jsx("dt", { children: sizeLabel }),
+							/* @__PURE__ */ jsx("dd", {
+								className: "text-end text-foreground tabular-nums",
+								children: formatValue(litDatum.size)
+							})
+						]
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsx(DitherTable, {
+			caption: label,
+			columns: [
+				categoryLabel,
+				xLabel,
+				yLabel,
+				sizeLabel
+			],
+			rows: data.map((d) => [
+				d.label,
+				formatValue(d.x),
+				formatValue(d.y),
+				formatValue(d.size)
+			]),
+			visible: showTable
+		})]
+	});
+}
+//#endregion
+export { DitherScatter, bubbleRadius, ditherScatterVariants, domainFraction };
+
+//# sourceMappingURL=dither-scatter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dither-scatter.js","names":[],"sources":["../../../src/components/dither-scatter/dither-scatter.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Traffic Scatter Bubbles\" (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  niceMax,\n  seriesColor,\n  smoothstep,\n  type DitherDraw,\n} from \"@/components/dither-canvas\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A bubble scatter drawn in dithered cells: each point a circle at (x, y)\n * whose area is its size, denser toward the centre, drifting a few pixels as\n * amicro's traffic bubbles float. Positions and radii are springs in the\n * engine, so switching data sets glides each bubble to its new place.\n *\n * Every bubble is a real button over the plot, named with its values, so the\n * readout a pointer reveals is reachable by Tab; pressing one pins it. The\n * short label amicro painted into the canvas is the button's own text here.\n * The plot is laid out left to right in every direction, as a chart's x axis is.\n */\n\nexport const ditherScatterVariants = cva(\"flex flex-col gap-2\", {\n  variants: {\n    size: {\n      sm: \"[--dither-scatter-height:8rem]\",\n      md: \"[--dither-scatter-height:11rem]\",\n      lg: \"[--dither-scatter-height:15rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface DitherScatterDatum {\n  /** Short name drawn on the bubble, e.g. \"US\". */\n  label: string;\n  x: number;\n  y: number;\n  /** Bubble area is proportional to this. */\n  size: number;\n  /** Colour token or CSS colour expression. Defaults to the palette. */\n  color?: string;\n}\n\nexport interface DitherScatterProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof ditherScatterVariants> {\n  data: readonly DitherScatterDatum[];\n  /** What the chart shows. Names the image, the points and the data table. */\n  label: string;\n  /** Replaces the generated summary in the image's accessible name. */\n  description?: string;\n  /** Axis ranges. Default from 0 to a round number above the largest value. */\n  xDomain?: readonly [number, number];\n  yDomain?: readonly [number, number];\n  /** Largest bubble radius as a fraction of the plot height. Default 0.26. */\n  maxRadius?: number;\n  /** Smallest bubble radius as a fraction of the plot height. Default 0.07. */\n  minRadius?: number;\n  /** Names of the three values, for the readout, the points and the table. */\n  xLabel?: string;\n  yLabel?: string;\n  sizeLabel?: string;\n  formatValue?: (value: 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 point (controlled); null pins none. */\n  activeIndex?: number | null;\n  defaultActiveIndex?: number | null;\n  onActiveIndexChange?: (index: number | null) => void;\n  /** Header of the data table's point column. */\n  categoryLabel?: string;\n}\n\n/** Where `value` falls in `domain`, clamped to 0..1. */\nexport function domainFraction(value: number, domain: readonly [number, number]): number {\n  const [min, max] = domain;\n  if (!(max > min) || !Number.isFinite(value)) return 0;\n  return Math.min(1, Math.max(0, (value - min) / (max - min)));\n}\n\n/** Bubble radius as a fraction of plot height: area proportional to `size`. */\nexport function bubbleRadius(\n  size: number,\n  largest: number,\n  minRadius: number,\n  maxRadius: number,\n): number {\n  const share = largest > 0 && size > 0 ? Math.sqrt(Math.min(1, size / largest)) : 0;\n  return minRadius + (maxRadius - minRadius) * share;\n}\n\nconst defaultDomain = (values: number[]): [number, number] => [\n  Math.min(0, ...values),\n  niceMax(Math.max(0, ...values)),\n];\n\nexport function DitherScatter({\n  data,\n  label,\n  description,\n  xDomain,\n  yDomain,\n  maxRadius = 0.26,\n  minRadius = 0.07,\n  xLabel = \"X\",\n  yLabel = \"Y\",\n  sizeLabel = \"Size\",\n  size,\n  formatValue = formatDitherValue,\n  showTable = false,\n  animate = true,\n  cell = 3,\n  activeIndex,\n  defaultActiveIndex = null,\n  onActiveIndexChange,\n  categoryLabel = \"Point\",\n  className,\n  ...props\n}: DitherScatterProps) {\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 lit = preview ?? pinned;\n\n  const xRange = xDomain ?? defaultDomain(data.map((d) => d.x));\n  const yRange = yDomain ?? defaultDomain(data.map((d) => d.y));\n  const largest = Math.max(0, ...data.map((d) => (Number.isFinite(d.size) ? d.size : 0)));\n  const fx = data.map((d) => domainFraction(d.x, xRange));\n  const fy = data.map((d) => domainFraction(d.y, yRange));\n  const fr = data.map((d) => bubbleRadius(d.size, largest, minRadius, maxRadius));\n\n  const springs = useRef({\n    x: createSprings(fx),\n    y: createSprings(fy),\n    r: createSprings(fr.map(() => 0)),\n  });\n\n  const draw: DitherDraw = (ctx, frame) => {\n    const { width, height, time, animated } = frame;\n    const { x: xs, y: ys, r: rs } = springs.current;\n    xs.set(fx);\n    ys.set(fy);\n    rs.set(fr);\n    let moving = xs.step(frame.delta, frame.reducedMotion);\n    moving = ys.step(frame.delta, frame.reducedMotion) || moving;\n    moving = rs.step(frame.delta, frame.reducedMotion) || moving;\n    const pad = maxRadius * height;\n    const spanX = Math.max(0, width - pad * 2);\n    const spanY = Math.max(0, height - pad * 2);\n    const cx = xs.values;\n    const cy = ys.values;\n    rs.values.forEach((fraction, i) => {\n      const r = fraction * height;\n      if (r < 1) return;\n      // amicro's float: a slow few-pixel orbit per bubble.\n      const floatX = animated ? Math.sin(time * 0.6 + i * 2) * 4 : 0;\n      const floatY = animated ? Math.cos(time * 0.6 + i * 3) * 4 : 0;\n      const x = pad + (cx[i] ?? 0) * spanX + floatX;\n      const y = height - pad - (cy[i] ?? 0) * spanY + floatY;\n      const hot = lit === i;\n      ditherFill(ctx, {\n        clip: makePath((sink) => {\n          sink.moveTo(x + r, y);\n          sink.arc(x, y, r, 0, Math.PI * 2);\n          sink.closePath();\n        }),\n        bounds: { x: x - r, y: y - r, width: r * 2, height: r * 2 },\n        cell: frame.cell,\n        color: frame.color(seriesColor(i, data[i]?.color)),\n        alpha: lit !== null && !hot ? 0.3 : 0.85,\n        density: (px, py) => {\n          const fullness = smoothstep(0, 1, 1 - Math.hypot(px - x, py - y) / r);\n          return (\n            (0.3 + 0.4 * fullness + 0.3 * drift(px, py, time * 0.6)) *\n              (0.8 + 0.4 * hash2(px, py)) +\n            (hot ? 0.15 : 0)\n          );\n        },\n      });\n    });\n    return moving;\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 values = (d: DitherScatterDatum) =>\n    `${xLabel} ${formatValue(d.x)}, ${yLabel} ${formatValue(d.y)}, ${sizeLabel} ${formatValue(d.size)}`;\n  const summary =\n    description ??\n    (data.length === 0\n      ? \"No data.\"\n      : `${String(data.length)} points. ${data.map((d) => `${d.label}: ${values(d)}`).join(\"; \")}.`);\n\n  // CSS twins of the canvas layout: the pad is maxRadius × the plot height.\n  const pad = `(var(--dither-scatter-height) * ${String(maxRadius)})`;\n  const place = (i: number) => ({\n    left: `calc(${pad} + ${String(fx[i] ?? 0)} * (100% - 2 * ${pad}))`,\n    top: `calc(100% - ${pad} - ${String(fy[i] ?? 0)} * (100% - 2 * ${pad}))`,\n  });\n  const litDatum = lit !== null ? data[lit] : undefined;\n\n  return (\n    <div\n      data-slot=\"dither-scatter\"\n      {...props}\n      className={cn(ditherScatterVariants({ size }), className)}\n    >\n      <div\n        data-slot=\"dither-scatter-plot\"\n        className=\"relative h-[var(--dither-scatter-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 aria-label={label} className=\"absolute inset-0\">\n          {data.map((d, i) => (\n            <li key={`${d.label}-${String(i)}`}>\n              <button\n                type=\"button\"\n                aria-pressed={pinned === i}\n                aria-label={`${d.label}: ${values(d)}`}\n                data-active={lit === i || undefined}\n                className={cn(\n                  \"absolute flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full transition-[left,top,width,height] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n                  focusRing,\n                )}\n                style={{\n                  ...place(i),\n                  width: `calc(var(--dither-scatter-height) * ${String(2 * (fr[i] ?? 0))})`,\n                  height: `calc(var(--dither-scatter-height) * ${String(2 * (fr[i] ?? 0))})`,\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=\"rounded-sm bg-background/80 px-1 text-2xs font-semibold text-foreground\">\n                  {d.label}\n                </span>\n              </button>\n            </li>\n          ))}\n        </ul>\n        {litDatum && lit !== null && (\n          <div\n            data-slot=\"dither-scatter-readout\"\n            className=\"pointer-events-none absolute z-10 min-w-28 rounded-md border border-border bg-popover px-2.5 py-2 text-xs text-popover-foreground shadow-md\"\n            style={{\n              ...place(lit),\n              transform: `translate(${(fx[lit] ?? 0) < 0.2 ? \"0%\" : (fx[lit] ?? 0) > 0.8 ? \"-100%\" : \"-50%\"}, calc(-100% - var(--dither-scatter-height) * ${String(fr[lit] ?? 0)} - 0.375rem))`,\n            }}\n          >\n            <p className=\"mb-1 font-medium\">{litDatum.label}</p>\n            <dl className=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-muted-foreground\">\n              <dt>{xLabel}</dt>\n              <dd className=\"text-end text-foreground tabular-nums\">\n                {formatValue(litDatum.x)}\n              </dd>\n              <dt>{yLabel}</dt>\n              <dd className=\"text-end text-foreground tabular-nums\">\n                {formatValue(litDatum.y)}\n              </dd>\n              <dt>{sizeLabel}</dt>\n              <dd className=\"text-end text-foreground tabular-nums\">\n                {formatValue(litDatum.size)}\n              </dd>\n            </dl>\n          </div>\n        )}\n      </div>\n      <DitherTable\n        caption={label}\n        columns={[categoryLabel, xLabel, yLabel, sizeLabel]}\n        rows={data.map((d) => [\n          d.label,\n          formatValue(d.x),\n          formatValue(d.y),\n          formatValue(d.size),\n        ])}\n        visible={showTable}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}