@nocoo/basalt 2.0.3 → 2.1.2

package/dist/charts/heatmap-matrix.d.ts

@@ -0,0 +1,99 @@
+import { type ComponentProps, type ReactNode } from "react";
+export type HeatmapMatrixValue = number | null | undefined;
+export interface HeatmapMatrixCellContext {
+    rowIndex: number;
+    colIndex: number;
+    rowLabel: string;
+    columnLabel: string;
+    value: HeatmapMatrixValue;
+    formattedValue: string;
+    isMissing: boolean;
+    colorIndex: number;
+}
+export interface HeatmapMatrixProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * Ordered row labels (e.g. weekdays ["Mon", "Tue", ...], service tiers, or regions).
+     */
+    rowLabels: readonly string[];
+    /**
+     * Ordered column labels (e.g. 24 hours ["00:00", ...], days, or status buckets).
+     */
+    columnLabels: readonly string[];
+    /**
+     * 2D matrix of values indexed by [rowIndex][colIndex].
+     * Supports ragged rows, null, undefined, and non-finite values (treated as missing).
+     * Numeric `0` is a valid reading and distinct from missing data.
+     */
+    values: readonly (readonly HeatmapMatrixValue[])[];
+    /**
+     * Explicit [min, max] domain for color intensity scaling.
+     * If reversed [max, min], bounds are automatically normalized to [min, max].
+     * If equal [v, v], values <= v receive level 0 while values > v clamp to the highest level.
+     * If non-finite or omitted, dynamically derived solely from visible finite numeric cells in the dataset (or [0, 0] if no finite values exist).
+     * Values at or below min receive level 0; values >= max clamp to the highest level.
+     */
+    domain?: readonly [min: number, max: number];
+    /**
+     * Sequential color palette array from lowest to highest intensity.
+     * If empty or single-color, gracefully resolves to base level.
+     * @default heatmapColorScales.green
+     */
+    colorScale?: readonly string[];
+    /**
+     * Formatter for numeric values displayed in tooltips and accessible labels.
+     * Defaults to `value.toLocaleString()`.
+     */
+    valueFormatter?: (value: number) => string;
+    /**
+     * Placeholder string used for missing/null/undefined readings.
+     * @default "—"
+     */
+    missingLabel?: string;
+    /**
+     * Accessible label describing the matrix purpose or metric name.
+     * @default "Heatmap matrix"
+     */
+    metricLabel?: string;
+    /**
+     * Accessible name for the entire grid region.
+     * @default "Heatmap matrix"
+     */
+    ariaLabel?: string;
+    /**
+     * Pixel height (and default width) of each matrix data cell.
+     * @default 16
+     */
+    cellSize?: number;
+    /**
+     * Pixel width of each matrix column / data cell.
+     * When omitted, falls back to `cellSize` for square cells.
+     * Allows wider rectangular cells to fit readable column headers (e.g. timestamps or service names).
+     */
+    columnWidth?: number;
+    /**
+     * Pixel gap between adjacent cells.
+     * @default 2
+     */
+    cellGap?: number;
+    /**
+     * Text for lowest bound legend.
+     * @default "Less"
+     */
+    lessLabel?: string;
+    /**
+     * Text for highest bound legend.
+     * @default "More"
+     */
+    moreLabel?: string;
+    /**
+     * Whether to show the bottom intensity scale legend.
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Custom cell tooltip content renderer.
+     * If provided, replaces the default tooltip contents.
+     */
+    renderTooltip?: (cell: HeatmapMatrixCellContext) => ReactNode;
+}
+export declare const HeatmapMatrix: import("react").ForwardRefExoticComponent<Omit<HeatmapMatrixProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/charts/heatmap-matrix.js

@@ -0,0 +1,249 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Tooltip as t, TooltipContent as n, TooltipProvider as r, TooltipTrigger as i } from "../components/tooltip.js";
+import { heatmapColorScales as a } from "./heatmap-calendar.js";
+import { forwardRef as o, useCallback as s, useEffect as c, useId as l, useMemo as u, useRef as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/charts/heatmap-matrix.tsx
+function g(e, t, n, r) {
+	if (e == null || typeof e != "number" || !Number.isFinite(e)) return -1;
+	if (r <= 1) return 0;
+	let i = r - 1;
+	if (n <= t) return e > t ? i : 0;
+	let a = (Math.max(t, Math.min(n, e)) - t) / (n - t);
+	return a <= 0 ? 0 : Math.min(i, Math.ceil(a * i));
+}
+var _ = o(function({ rowLabels: o, columnLabels: _, values: v, domain: y, colorScale: b = a.green, valueFormatter: x = (e) => e.toLocaleString(), missingLabel: S = "—", metricLabel: C = "Heatmap matrix", ariaLabel: w = "Heatmap matrix", cellSize: T = 16, columnWidth: E, cellGap: D = 2, lessLabel: O = "Less", moreLabel: ee = "More", showLegend: te = !0, renderTooltip: k, className: A, style: j, onFocus: M, onBlur: N, onKeyDown: P, ...F }, I) {
+	let L = l(), R = o.length, z = _.length, B = E ?? T, [V, H] = u(() => {
+		if (y) {
+			let [e, t] = y;
+			if (Number.isFinite(e) && Number.isFinite(t)) return [Math.min(e, t), Math.max(e, t)];
+		}
+		let e = Infinity, t = -Infinity;
+		for (let n = 0; n < R; n++) {
+			let r = v[n];
+			if (r) for (let n = 0; n < z; n++) {
+				let i = r[n];
+				typeof i == "number" && Number.isFinite(i) && (i < e && (e = i), i > t && (t = i));
+			}
+		}
+		return !Number.isFinite(e) || !Number.isFinite(t) ? [0, 0] : [e, t];
+	}, [
+		y,
+		v,
+		R,
+		z
+	]), [U, W] = f([0, 0]), [G, K] = f(null), q = d(!1), J = d([0, 0]);
+	J.current = U;
+	let Y = d(null), X = d(/* @__PURE__ */ new Map()), Z = d(!1);
+	c(() => {
+		let e = Z.current;
+		if (R === 0 || z === 0) {
+			W(([e, t]) => e === 0 && t === 0 ? [e, t] : [0, 0]), K(null), e && Y.current?.focus();
+			return;
+		}
+		let [t, n] = J.current, r = Math.min(R - 1, Math.max(0, t)), i = Math.min(z - 1, Math.max(0, n));
+		if (W((e) => e[0] === r && e[1] === i ? e : [r, i]), e) {
+			let e = `${r}-${i}`, t = X.current.get(e);
+			t && document.activeElement !== t && t.focus();
+		}
+	}, [R, z]);
+	let ne = (e) => {
+		if (e.key === "Escape" && (q.current = !0, K(null)), P?.(e), e.defaultPrevented || R === 0 || z === 0 || e.key === "Escape") return;
+		let [t, n] = J.current, r = t, i = n;
+		if (e.key === "ArrowRight") i = Math.min(z - 1, n + 1);
+		else if (e.key === "ArrowLeft") i = Math.max(0, n - 1);
+		else if (e.key === "ArrowDown") r = Math.min(R - 1, t + 1);
+		else if (e.key === "ArrowUp") r = Math.max(0, t - 1);
+		else if (e.key === "Home") i = 0;
+		else if (e.key === "End") i = z - 1;
+		else if (e.key === "PageUp") r = 0;
+		else if (e.key === "PageDown") r = R - 1;
+		else return;
+		e.preventDefault(), q.current = !1, W([r, i]);
+		let a = `${r}-${i}`;
+		K(a);
+		let o = X.current.get(a);
+		if (o) {
+			o.focus();
+			let e = o.closest("[role=\"region\"][aria-label$=\"scrollable table\"]"), t = o.closest("tr")?.querySelector("th[scope=\"row\"]");
+			if (e) {
+				let n = e.getBoundingClientRect(), r = o.getBoundingClientRect(), i = t ? t.getBoundingClientRect().width : 0, a = n.left + i, s = n.right;
+				r.left < a ? e.scrollLeft -= a - r.left + D : r.right > s && (e.scrollLeft += r.right - s + D);
+			} else typeof o.scrollIntoView == "function" && o.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		}
+	}, re = (e) => {
+		Z.current = !0, M?.(e);
+	}, ie = (e) => {
+		e.currentTarget.contains(e.relatedTarget) || (Z.current = !1, q.current = !1), N?.(e);
+	}, Q = d(void 0), ae = s((e) => {
+		if (Y.current = e, Q.current &&= (Q.current(), void 0), typeof I == "function") {
+			let t = I(e);
+			typeof t == "function" && (Q.current = t);
+		} else I && (I.current = e);
+		return () => {
+			Y.current = null, Q.current ? (Q.current(), Q.current = void 0) : typeof I == "function" ? I(null) : I && (I.current = null);
+		};
+	}, [I]), $ = R === 0 || z === 0;
+	return /* @__PURE__ */ m(r, { children: /* @__PURE__ */ m("div", {
+		ref: ae,
+		tabIndex: $ ? -1 : void 0,
+		role: "region",
+		"aria-label": w,
+		"data-testid": "heatmap-matrix",
+		className: e("flex flex-col gap-2 rounded-lg border border-basalt-border/60 bg-basalt-card p-3 text-xs outline-none", $ ? "text-basalt-muted-foreground" : "text-basalt-foreground", A),
+		style: j,
+		onFocus: re,
+		onBlur: ie,
+		onKeyDown: ne,
+		...F,
+		children: $ ? /* @__PURE__ */ m("span", {
+			className: "italic",
+			children: S
+		}) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
+			tabIndex: -1,
+			role: "region",
+			"aria-label": `${w} scrollable table`,
+			className: "w-full overflow-x-auto outline-none",
+			children: /* @__PURE__ */ h("table", {
+				role: "grid",
+				"aria-label": w,
+				className: "border-separate",
+				style: { borderSpacing: D },
+				children: [/* @__PURE__ */ m("thead", { children: /* @__PURE__ */ h("tr", { children: [/* @__PURE__ */ m("th", {
+					scope: "col",
+					className: "sticky left-0 z-10 bg-basalt-card p-0 text-left font-normal",
+					style: { minWidth: 64 },
+					children: /* @__PURE__ */ m("span", {
+						className: "sr-only",
+						children: "Row \\ Column"
+					})
+				}), _.map((e, t) => /* @__PURE__ */ m("th", {
+					scope: "col",
+					className: "p-0 text-center font-mono text-[10px] text-basalt-muted-foreground select-none",
+					style: {
+						width: B,
+						maxWidth: B,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					title: e,
+					children: e
+				}, `${L}-col-${t}`))] }) }), /* @__PURE__ */ m("tbody", { children: o.map((e, r) => /* @__PURE__ */ h("tr", { children: [/* @__PURE__ */ m("th", {
+					scope: "row",
+					className: "sticky left-0 z-10 bg-basalt-card pr-2 text-left font-medium text-basalt-foreground select-none",
+					style: {
+						lineHeight: `${T}px`,
+						minWidth: 64,
+						whiteSpace: "nowrap"
+					},
+					children: e
+				}), _.map((a, o) => {
+					let s = `${r}-${o}`, c = v[r]?.[o], l = c == null || typeof c != "number" || !Number.isFinite(c), u = g(c, V, H, b.length), d = l ? S : x(c), f = u < 0 ? "hsl(var(--basalt-muted) / 0.4)" : b[u] ?? "hsl(var(--basalt-muted))", p = `${e}, ${a}: ${d} (${C})`, _ = U[0] === r && U[1] === o, y = G === s, w = {
+						rowIndex: r,
+						colIndex: o,
+						rowLabel: e,
+						columnLabel: a,
+						value: c,
+						formattedValue: d,
+						isMissing: l,
+						colorIndex: u
+					};
+					return /* @__PURE__ */ m("td", {
+						role: "gridcell",
+						className: "p-0 text-center",
+						children: /* @__PURE__ */ h(t, {
+							open: y,
+							onOpenChange: (e) => {
+								e ? q.current || K(s) : K((e) => e === s ? q.current ? null : document.activeElement === X.current.get(s) ? e : null : e);
+							},
+							children: [/* @__PURE__ */ m(i, {
+								asChild: !0,
+								children: /* @__PURE__ */ m("button", {
+									ref: (e) => {
+										e ? X.current.set(s, e) : X.current.delete(s);
+									},
+									type: "button",
+									"aria-label": p,
+									tabIndex: _ ? 0 : -1,
+									onFocus: () => {
+										W([r, o]), q.current = !1, K(s);
+									},
+									onBlur: () => {
+										K((e) => e === s ? null : e);
+									},
+									className: "box-border block cursor-pointer rounded-xs border-0 p-0 transition-colors hover:ring-1 hover:ring-basalt-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-basalt-ring",
+									style: {
+										width: B,
+										height: T,
+										backgroundColor: f
+									}
+								})
+							}), /* @__PURE__ */ m(n, {
+								id: `${L}-${s}`,
+								onEscapeKeyDown: () => {
+									q.current = !0, K(null);
+								},
+								children: k ? k(w) : /* @__PURE__ */ h("div", {
+									className: "text-xs",
+									children: [/* @__PURE__ */ h("div", {
+										className: "font-semibold text-basalt-popover-foreground",
+										children: [
+											e,
+											" · ",
+											a
+										]
+									}), /* @__PURE__ */ h("div", {
+										className: "text-basalt-muted-foreground",
+										children: [
+											C,
+											":",
+											" ",
+											/* @__PURE__ */ m("span", {
+												className: "font-medium text-basalt-popover-foreground",
+												children: d
+											})
+										]
+									})]
+								})
+							})]
+						})
+					}, s);
+				})] }, `${L}-row-${r}`)) })]
+			})
+		}), te ? /* @__PURE__ */ h("div", {
+			className: "mt-1 flex items-center justify-end gap-1 text-[11px] text-basalt-muted-foreground select-none",
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ m("span", { children: O }),
+				/* @__PURE__ */ m("div", {
+					className: "rounded-xs",
+					title: "Missing data",
+					style: {
+						width: T,
+						height: T,
+						backgroundColor: "hsl(var(--basalt-muted) / 0.4)"
+					}
+				}),
+				b.map((e, t) => /* @__PURE__ */ m("div", {
+					className: "rounded-xs",
+					style: {
+						width: T,
+						height: T,
+						backgroundColor: e
+					}
+				}, `${e}-${t}`)),
+				/* @__PURE__ */ m("span", { children: ee })
+			]
+		}) : null] })
+	}) });
+});
+_.displayName = "HeatmapMatrix";
+//#endregion
+export { _ as HeatmapMatrix };
+
+//# sourceMappingURL=heatmap-matrix.js.map

package/dist/charts/heatmap-matrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-matrix.js","names":[],"sources":["../../src/charts/heatmap-matrix.tsx"],"sourcesContent":["import {\n\ttype ComponentProps,\n\ttype FocusEvent,\n\tforwardRef,\n\ttype KeyboardEvent,\n\ttype ReactNode,\n\tuseCallback,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../components/tooltip\";\nimport { cn } from \"../utils/cn\";\nimport { heatmapColorScales } from \"./heatmap-calendar\";\n\nexport type HeatmapMatrixValue = number | null | undefined;\n\nexport interface HeatmapMatrixCellContext {\n\trowIndex: number;\n\tcolIndex: number;\n\trowLabel: string;\n\tcolumnLabel: string;\n\tvalue: HeatmapMatrixValue;\n\tformattedValue: string;\n\tisMissing: boolean;\n\tcolorIndex: number;\n}\n\nexport interface HeatmapMatrixProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n\t/**\n\t * Ordered row labels (e.g. weekdays [\"Mon\", \"Tue\", ...], service tiers, or regions).\n\t */\n\trowLabels: readonly string[];\n\t/**\n\t * Ordered column labels (e.g. 24 hours [\"00:00\", ...], days, or status buckets).\n\t */\n\tcolumnLabels: readonly string[];\n\t/**\n\t * 2D matrix of values indexed by [rowIndex][colIndex].\n\t * Supports ragged rows, null, undefined, and non-finite values (treated as missing).\n\t * Numeric `0` is a valid reading and distinct from missing data.\n\t */\n\tvalues: readonly (readonly HeatmapMatrixValue[])[];\n\t/**\n\t * Explicit [min, max] domain for color intensity scaling.\n\t * If reversed [max, min], bounds are automatically normalized to [min, max].\n\t * If equal [v, v], values <= v receive level 0 while values > v clamp to the highest level.\n\t * If non-finite or omitted, dynamically derived solely from visible finite numeric cells in the dataset (or [0, 0] if no finite values exist).\n\t * Values at or below min receive level 0; values >= max clamp to the highest level.\n\t */\n\tdomain?: readonly [min: number, max: number];\n\t/**\n\t * Sequential color palette array from lowest to highest intensity.\n\t * If empty or single-color, gracefully resolves to base level.\n\t * @default heatmapColorScales.green\n\t */\n\tcolorScale?: readonly string[];\n\t/**\n\t * Formatter for numeric values displayed in tooltips and accessible labels.\n\t * Defaults to `value.toLocaleString()`.\n\t */\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Placeholder string used for missing/null/undefined readings.\n\t * @default \"—\"\n\t */\n\tmissingLabel?: string;\n\t/**\n\t * Accessible label describing the matrix purpose or metric name.\n\t * @default \"Heatmap matrix\"\n\t */\n\tmetricLabel?: string;\n\t/**\n\t * Accessible name for the entire grid region.\n\t * @default \"Heatmap matrix\"\n\t */\n\tariaLabel?: string;\n\t/**\n\t * Pixel height (and default width) of each matrix data cell.\n\t * @default 16\n\t */\n\tcellSize?: number;\n\t/**\n\t * Pixel width of each matrix column / data cell.\n\t * When omitted, falls back to `cellSize` for square cells.\n\t * Allows wider rectangular cells to fit readable column headers (e.g. timestamps or service names).\n\t */\n\tcolumnWidth?: number;\n\t/**\n\t * Pixel gap between adjacent cells.\n\t * @default 2\n\t */\n\tcellGap?: number;\n\t/**\n\t * Text for lowest bound legend.\n\t * @default \"Less\"\n\t */\n\tlessLabel?: string;\n\t/**\n\t * Text for highest bound legend.\n\t * @default \"More\"\n\t */\n\tmoreLabel?: string;\n\t/**\n\t * Whether to show the bottom intensity scale legend.\n\t * @default true\n\t */\n\tshowLegend?: boolean;\n\t/**\n\t * Custom cell tooltip content renderer.\n\t * If provided, replaces the default tooltip contents.\n\t */\n\trenderTooltip?: (cell: HeatmapMatrixCellContext) => ReactNode;\n}\n\nfunction resolveColorIndex(\n\tvalue: HeatmapMatrixValue,\n\tmin: number,\n\tmax: number,\n\tcolorScaleLength: number,\n): number {\n\tif (value == null || typeof value !== \"number\" || !Number.isFinite(value)) {\n\t\treturn -1; // missing indicator\n\t}\n\tif (colorScaleLength <= 1) {\n\t\treturn 0;\n\t}\n\tconst levels = colorScaleLength - 1;\n\tif (max <= min) {\n\t\treturn value > min ? levels : 0;\n\t}\n\tconst clamped = Math.max(min, Math.min(max, value));\n\tconst normalized = (clamped - min) / (max - min);\n\tif (normalized <= 0) {\n\t\treturn 0;\n\t}\n\treturn Math.min(levels, Math.ceil(normalized * levels));\n}\n\nexport const HeatmapMatrix = forwardRef<HTMLDivElement, HeatmapMatrixProps>(function HeatmapMatrix(\n\t{\n\t\trowLabels,\n\t\tcolumnLabels,\n\t\tvalues,\n\t\tdomain,\n\t\tcolorScale = heatmapColorScales.green,\n\t\tvalueFormatter = (val) => val.toLocaleString(),\n\t\tmissingLabel = \"—\",\n\t\tmetricLabel = \"Heatmap matrix\",\n\t\tariaLabel = \"Heatmap matrix\",\n\t\tcellSize = 16,\n\t\tcolumnWidth,\n\t\tcellGap = 2,\n\t\tlessLabel = \"Less\",\n\t\tmoreLabel = \"More\",\n\t\tshowLegend = true,\n\t\trenderTooltip,\n\t\tclassName,\n\t\tstyle,\n\t\tonFocus,\n\t\tonBlur,\n\t\tonKeyDown,\n\t\t...rest\n\t},\n\tref,\n) {\n\tconst matrixId = useId();\n\tconst numRows = rowLabels.length;\n\tconst numCols = columnLabels.length;\n\tconst effectiveColWidth = columnWidth ?? cellSize;\n\n\t// Derive domain restricted to visible row/col matrix bounds\n\tconst [minVal, maxVal] = useMemo(() => {\n\t\tif (domain) {\n\t\t\tconst [d0, d1] = domain;\n\t\t\tif (Number.isFinite(d0) && Number.isFinite(d1)) {\n\t\t\t\treturn [Math.min(d0, d1), Math.max(d0, d1)];\n\t\t\t}\n\t\t}\n\t\tlet lowest = Number.POSITIVE_INFINITY;\n\t\tlet highest = Number.NEGATIVE_INFINITY;\n\t\tfor (let r = 0; r < numRows; r++) {\n\t\t\tconst row = values[r];\n\t\t\tif (!row) continue;\n\t\t\tfor (let c = 0; c < numCols; c++) {\n\t\t\t\tconst v = row[c];\n\t\t\t\tif (typeof v === \"number\" && Number.isFinite(v)) {\n\t\t\t\t\tif (v < lowest) lowest = v;\n\t\t\t\t\tif (v > highest) highest = v;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tif (!Number.isFinite(lowest) || !Number.isFinite(highest)) {\n\t\t\treturn [0, 0];\n\t\t}\n\t\treturn [lowest, highest];\n\t}, [domain, values, numRows, numCols]);\n\n\t// Focus state: active cell position [rowIndex, colIndex]\n\tconst [activePos, setActivePos] = useState<[number, number]>([0, 0]);\n\tconst [openTooltipPos, setOpenTooltipPos] = useState<string | null>(null);\n\tconst dismissedByEscapeRef = useRef(false);\n\n\tconst activePosRef = useRef<[number, number]>([0, 0]);\n\tactivePosRef.current = activePos;\n\n\tconst containerRef = useRef<HTMLDivElement | null>(null);\n\tconst cellRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\tconst isFocusedInsideRef = useRef(false);\n\n\t// Clamp active position when dimensions change\n\tuseEffect(() => {\n\t\tconst hadFocus = isFocusedInsideRef.current;\n\t\tif (numRows === 0 || numCols === 0) {\n\t\t\tsetActivePos(([curR, curC]) => {\n\t\t\t\tif (curR === 0 && curC === 0) return [curR, curC];\n\t\t\t\treturn [0, 0];\n\t\t\t});\n\t\t\tsetOpenTooltipPos(null);\n\t\t\tif (hadFocus) {\n\t\t\t\tcontainerRef.current?.focus();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tconst [curR, curC] = activePosRef.current;\n\t\tconst nextR = Math.min(numRows - 1, Math.max(0, curR));\n\t\tconst nextC = Math.min(numCols - 1, Math.max(0, curC));\n\n\t\tsetActivePos((prev) => {\n\t\t\tif (prev[0] === nextR && prev[1] === nextC) {\n\t\t\t\treturn prev;\n\t\t\t}\n\t\t\treturn [nextR, nextC];\n\t\t});\n\n\t\tif (hadFocus) {\n\t\t\tconst key = `${nextR}-${nextC}`;\n\t\t\tconst target = cellRefs.current.get(key);\n\t\t\tif (target && document.activeElement !== target) {\n\t\t\t\ttarget.focus();\n\t\t\t}\n\t\t}\n\t}, [numRows, numCols]);\n\n\tconst handleContainerKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n\t\tif (e.key === \"Escape\") {\n\t\t\tdismissedByEscapeRef.current = true;\n\t\t\tsetOpenTooltipPos(null);\n\t\t}\n\n\t\t// Call caller onKeyDown first so caller can inspect or preventDefault\n\t\tonKeyDown?.(e);\n\t\tif (e.defaultPrevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (numRows === 0 || numCols === 0) return;\n\t\tif (e.key === \"Escape\") return;\n\n\t\tconst [currentRow, currentCol] = activePosRef.current;\n\t\tlet nextR = currentRow;\n\t\tlet nextC = currentCol;\n\n\t\tif (e.key === \"ArrowRight\") {\n\t\t\tnextC = Math.min(numCols - 1, currentCol + 1);\n\t\t} else if (e.key === \"ArrowLeft\") {\n\t\t\tnextC = Math.max(0, currentCol - 1);\n\t\t} else if (e.key === \"ArrowDown\") {\n\t\t\tnextR = Math.min(numRows - 1, currentRow + 1);\n\t\t} else if (e.key === \"ArrowUp\") {\n\t\t\tnextR = Math.max(0, currentRow - 1);\n\t\t} else if (e.key === \"Home\") {\n\t\t\tnextC = 0;\n\t\t} else if (e.key === \"End\") {\n\t\t\tnextC = numCols - 1;\n\t\t} else if (e.key === \"PageUp\") {\n\t\t\tnextR = 0;\n\t\t} else if (e.key === \"PageDown\") {\n\t\t\tnextR = numRows - 1;\n\t\t} else {\n\t\t\treturn;\n\t\t}\n\n\t\te.preventDefault();\n\t\tdismissedByEscapeRef.current = false;\n\t\tsetActivePos([nextR, nextC]);\n\t\tconst nextKey = `${nextR}-${nextC}`;\n\t\tsetOpenTooltipPos(nextKey);\n\t\tconst targetButton = cellRefs.current.get(nextKey);\n\t\tif (targetButton) {\n\t\t\ttargetButton.focus();\n\t\t\tconst scrollContainer = targetButton.closest<HTMLElement>(\n\t\t\t\t'[role=\"region\"][aria-label$=\"scrollable table\"]',\n\t\t\t);\n\t\t\tconst rowHeader = targetButton.closest(\"tr\")?.querySelector<HTMLElement>('th[scope=\"row\"]');\n\n\t\t\tif (scrollContainer) {\n\t\t\t\tconst containerRect = scrollContainer.getBoundingClientRect();\n\t\t\t\tconst btnRect = targetButton.getBoundingClientRect();\n\t\t\t\tconst stickyWidth = rowHeader ? rowHeader.getBoundingClientRect().width : 0;\n\n\t\t\t\tconst visibleLeft = containerRect.left + stickyWidth;\n\t\t\t\tconst visibleRight = containerRect.right;\n\n\t\t\t\tif (btnRect.left < visibleLeft) {\n\t\t\t\t\tscrollContainer.scrollLeft -= visibleLeft - btnRect.left + cellGap;\n\t\t\t\t} else if (btnRect.right > visibleRight) {\n\t\t\t\t\tscrollContainer.scrollLeft += btnRect.right - visibleRight + cellGap;\n\t\t\t\t}\n\t\t\t} else if (typeof targetButton.scrollIntoView === \"function\") {\n\t\t\t\ttargetButton.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleContainerFocus = (e: FocusEvent<HTMLDivElement>) => {\n\t\tisFocusedInsideRef.current = true;\n\t\tonFocus?.(e);\n\t};\n\n\tconst handleContainerBlur = (e: FocusEvent<HTMLDivElement>) => {\n\t\tif (!e.currentTarget.contains(e.relatedTarget)) {\n\t\t\tisFocusedInsideRef.current = false;\n\t\t\tdismissedByEscapeRef.current = false;\n\t\t}\n\t\tonBlur?.(e);\n\t};\n\n\tconst callerCleanupRef = useRef<(() => void) | undefined>(undefined);\n\n\tconst setRootRef = useCallback(\n\t\t(node: HTMLDivElement | null) => {\n\t\t\tcontainerRef.current = node;\n\n\t\t\tif (callerCleanupRef.current) {\n\t\t\t\tcallerCleanupRef.current();\n\t\t\t\tcallerCleanupRef.current = undefined;\n\t\t\t}\n\n\t\t\tif (typeof ref === \"function\") {\n\t\t\t\tconst cleanup = ref(node);\n\t\t\t\tif (typeof cleanup === \"function\") {\n\t\t\t\t\tcallerCleanupRef.current = cleanup;\n\t\t\t\t}\n\t\t\t} else if (ref) {\n\t\t\t\tref.current = node;\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tcontainerRef.current = null;\n\t\t\t\tif (callerCleanupRef.current) {\n\t\t\t\t\tcallerCleanupRef.current();\n\t\t\t\t\tcallerCleanupRef.current = undefined;\n\t\t\t\t} else if (typeof ref === \"function\") {\n\t\t\t\t\tref(null);\n\t\t\t\t} else if (ref) {\n\t\t\t\t\tref.current = null;\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t\t[ref],\n\t);\n\n\tconst isEmpty = numRows === 0 || numCols === 0;\n\n\treturn (\n\t\t<TooltipProvider>\n\t\t\t<div\n\t\t\t\tref={setRootRef}\n\t\t\t\ttabIndex={isEmpty ? -1 : undefined}\n\t\t\t\trole=\"region\"\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\tdata-testid=\"heatmap-matrix\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex flex-col gap-2 rounded-lg border border-basalt-border/60 bg-basalt-card p-3 text-xs outline-none\",\n\t\t\t\t\tisEmpty ? \"text-basalt-muted-foreground\" : \"text-basalt-foreground\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tstyle={style}\n\t\t\t\tonFocus={handleContainerFocus}\n\t\t\t\tonBlur={handleContainerBlur}\n\t\t\t\tonKeyDown={handleContainerKeyDown}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{isEmpty ? (\n\t\t\t\t\t<span className=\"italic\">{missingLabel}</span>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{/* Scrollable table container */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={`${ariaLabel} scrollable table`}\n\t\t\t\t\t\t\tclassName=\"w-full overflow-x-auto outline-none\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<table\n\t\t\t\t\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: W3C ARIA interactive 2D grid table with descendant roving tab buttons\n\t\t\t\t\t\t\t\trole=\"grid\"\n\t\t\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\t\t\tclassName=\"border-separate\"\n\t\t\t\t\t\t\t\tstyle={{ borderSpacing: cellGap }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t{/* Top-left empty header */}\n\t\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"sticky left-0 z-10 bg-basalt-card p-0 text-left font-normal\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ minWidth: 64 }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"sr-only\">Row \\ Column</span>\n\t\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t\t{columnLabels.map((col, colIdx) => (\n\t\t\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\t\t\tkey={`${matrixId}-col-${colIdx}`}\n\t\t\t\t\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"p-0 text-center font-mono text-[10px] text-basalt-muted-foreground select-none\"\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: effectiveColWidth,\n\t\t\t\t\t\t\t\t\t\t\t\t\tmaxWidth: effectiveColWidth,\n\t\t\t\t\t\t\t\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\t\t\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\t\t\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle={col}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{col}\n\t\t\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t{rowLabels.map((rowName, rowIdx) => (\n\t\t\t\t\t\t\t\t\t\t<tr key={`${matrixId}-row-${rowIdx}`}>\n\t\t\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\t\t\tscope=\"row\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"sticky left-0 z-10 bg-basalt-card pr-2 text-left font-medium text-basalt-foreground select-none\"\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tlineHeight: `${cellSize}px`,\n\t\t\t\t\t\t\t\t\t\t\t\t\tminWidth: 64,\n\t\t\t\t\t\t\t\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{rowName}\n\t\t\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t\t\t{columnLabels.map((colName, colIdx) => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst cellKey = `${rowIdx}-${colIdx}`;\n\t\t\t\t\t\t\t\t\t\t\t\tconst rawVal = values[rowIdx]?.[colIdx];\n\t\t\t\t\t\t\t\t\t\t\t\tconst isMissing =\n\t\t\t\t\t\t\t\t\t\t\t\t\trawVal == null || typeof rawVal !== \"number\" || !Number.isFinite(rawVal);\n\t\t\t\t\t\t\t\t\t\t\t\tconst colorIdx = resolveColorIndex(\n\t\t\t\t\t\t\t\t\t\t\t\t\trawVal,\n\t\t\t\t\t\t\t\t\t\t\t\t\tminVal,\n\t\t\t\t\t\t\t\t\t\t\t\t\tmaxVal,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorScale.length,\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\t\t\tconst formattedVal = isMissing\n\t\t\t\t\t\t\t\t\t\t\t\t\t? missingLabel\n\t\t\t\t\t\t\t\t\t\t\t\t\t: valueFormatter(rawVal as number);\n\n\t\t\t\t\t\t\t\t\t\t\t\tconst cellBg =\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorIdx < 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"hsl(var(--basalt-muted) / 0.4)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: (colorScale[colorIdx] ?? \"hsl(var(--basalt-muted))\");\n\n\t\t\t\t\t\t\t\t\t\t\t\tconst accessibleCellLabel = `${rowName}, ${colName}: ${formattedVal} (${metricLabel})`;\n\t\t\t\t\t\t\t\t\t\t\t\tconst isSelected = activePos[0] === rowIdx && activePos[1] === colIdx;\n\t\t\t\t\t\t\t\t\t\t\t\tconst isOpen = openTooltipPos === cellKey;\n\n\t\t\t\t\t\t\t\t\t\t\t\tconst cellContext: HeatmapMatrixCellContext = {\n\t\t\t\t\t\t\t\t\t\t\t\t\trowIndex: rowIdx,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolIndex: colIdx,\n\t\t\t\t\t\t\t\t\t\t\t\t\trowLabel: rowName,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolumnLabel: colName,\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: rawVal,\n\t\t\t\t\t\t\t\t\t\t\t\t\tformattedValue: formattedVal,\n\t\t\t\t\t\t\t\t\t\t\t\t\tisMissing,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorIndex: colorIdx,\n\t\t\t\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: ARIA gridcell container wrapping roving interactive button\n\t\t\t\t\t\t\t\t\t\t\t\t\t// biome-ignore lint/a11y/useFocusableInteractive: Focus is managed on child button via roving tabindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td key={cellKey} role=\"gridcell\" className=\"p-0 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\topen={isOpen}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonOpenChange={(next) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (next) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (!dismissedByEscapeRef.current) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetOpenTooltipPos(cellKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetOpenTooltipPos((curr) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (curr !== cellKey) return curr;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (dismissedByEscapeRef.current) return null;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst isCellFocused =\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdocument.activeElement === cellRefs.current.get(cellKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn isCellFocused ? curr : null;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) cellRefs.current.set(cellKey, el);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\telse cellRefs.current.delete(cellKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-label={accessibleCellLabel}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttabIndex={isSelected ? 0 : -1}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetActivePos([rowIdx, colIdx]);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdismissedByEscapeRef.current = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetOpenTooltipPos(cellKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonBlur={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetOpenTooltipPos((curr) => (curr === cellKey ? null : curr));\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"box-border block cursor-pointer rounded-xs border-0 p-0 transition-colors hover:ring-1 hover:ring-basalt-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-basalt-ring\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: effectiveColWidth,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theight: cellSize,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: cellBg,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<TooltipContent\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={`${matrixId}-${cellKey}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonEscapeKeyDown={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdismissedByEscapeRef.current = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetOpenTooltipPos(null);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{renderTooltip ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderTooltip(cellContext)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"font-semibold text-basalt-popover-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{rowName} · {colName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{metricLabel}:{\" \"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"font-medium text-basalt-popover-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{formattedVal}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t</table>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* Legend footer */}\n\t\t\t\t\t\t{showLegend ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"mt-1 flex items-center justify-end gap-1 text-[11px] text-basalt-muted-foreground select-none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span>{lessLabel}</span>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"rounded-xs\"\n\t\t\t\t\t\t\t\t\ttitle=\"Missing data\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\twidth: cellSize,\n\t\t\t\t\t\t\t\t\t\theight: cellSize,\n\t\t\t\t\t\t\t\t\t\tbackgroundColor: \"hsl(var(--basalt-muted) / 0.4)\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{colorScale.map((color, idx) => (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tkey={`${color}-${idx}`}\n\t\t\t\t\t\t\t\t\t\tclassName=\"rounded-xs\"\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\twidth: cellSize,\n\t\t\t\t\t\t\t\t\t\t\theight: cellSize,\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t<span>{moreLabel}</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</TooltipProvider>\n\t);\n});\n\nHeatmapMatrix.displayName = \"HeatmapMatrix\";\n"],"mappings":"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"}

package/dist/charts/line.d.ts

@@ -1,12 +1,73 @@
-import { type XYPoint, type XYSeriesDescriptor } from "./series.js";
-export type LineChartProps = {
-    data: XYPoint[];
-    series?: XYSeriesDescriptor[];
+import type { ReactNode } from "react";
+import { type ChartSeriesDescriptor, type XYPoint } from "./series.js";
+import type { ChartTooltipItem } from "./tooltip.js";
+export type LineChartAxisDomain = [number | "auto" | "dataMin", number | "auto" | "dataMax"] | readonly [number | "auto" | "dataMin", number | "auto" | "dataMax"];
+export type LineChartNumericKeys<T> = {
+    [K in keyof T]-?: K extends "x" ? never : [NonNullable<T[K]>] extends [never] ? never : NonNullable<T[K]> extends number ? K extends string ? K : never : never;
+}[keyof T];
+export type LineChartLegendRenderer<K extends string = string> = (props: {
+    items: Array<ChartSeriesDescriptor<K>>;
+}) => ReactNode;
+export type LineChartTooltipRenderer = (props: {
+    active?: boolean;
+    payload?: readonly ChartTooltipItem[];
+    label?: string | number;
+}) => ReactNode;
+export type LineChartProps<TData extends {
+    x: string | number;
+} = XYPoint, K extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string> = {
+    /**
+     * Dataset array where each record requires an `x` category or time coordinate.
+     * Any remaining fields with numeric, nullable, or optional number values are inferred as valid series keys.
+     */
+    data: TData[];
+    /**
+     * Series descriptors identifying which numeric keys to plot.
+     * Inferred strictly from numeric keys of `TData` (rejects non-numeric fields, `x`, and typos).
+     */
+    series?: Array<ChartSeriesDescriptor<NoInfer<K>>>;
     ariaLabel?: string;
     className?: string;
     showAxes?: boolean;
     showLegend?: boolean;
     color?: string;
+    /**
+     * Value formatter for Y-axis tick values and fallback tooltip values.
+     */
     valueFormatter?: (value: number) => string;
+    /**
+     * Formatter for X-axis category or time tick labels.
+     */
+    xValueFormatter?: (value: string | number) => string;
+    /**
+     * Custom numerical or keyword bounds for the Y-axis.
+     */
+    yDomain?: LineChartAxisDomain;
+    /**
+     * Custom legend slot or render function receiving resolved series descriptors.
+     */
+    legend?: ReactNode | LineChartLegendRenderer<K>;
+    /**
+     * Custom tooltip content renderer receiving Recharts payload, active status, and coordinate label.
+     */
+    customTooltip?: LineChartTooltipRenderer;
+    /**
+     * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.
+     * Associated with the chart via useId and aria-describedby.
+     */
+    summary?: ReactNode;
+    /**
+     * Accessible tabular or structured data alternative rendered outside the plot area.
+     */
+    dataAlternative?: ReactNode;
+    /**
+     * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.
+     * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.
+     * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.
+     * @default true
+     */
+    accessibilityLayer?: boolean;
 };
-export declare function LineChart({ data, series, ariaLabel, className, showAxes, showLegend, color, valueFormatter, }: LineChartProps): import("react").JSX.Element;
+export declare function LineChart<TData extends {
+    x: string | number;
+} = XYPoint, K extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string>({ data, series, ariaLabel, className, showAxes, showLegend, color, valueFormatter, xValueFormatter, yDomain, legend, customTooltip, summary, dataAlternative, accessibilityLayer, }: LineChartProps<TData, K>): import("react").JSX.Element;

package/dist/charts/line.js

@@ -1,42 +1,49 @@
 "use client";
-import { ANIMATION_PROPS as e, CHART_PLOT_MARGIN as t, CHART_PLOT_MARGIN_BARE as n, GRID_PROPS as r, cartesianAxisProps as i, chartTooltipProps as a, seriesColor as o } from "./config.js";
-import { applyLeadColor as s, resolveChartSeries as c, xyFallbackKeys as l } from "./series.js";
-import { ChartShell as u } from "./frame.js";
-import { ChartLegend as d } from "./legend.js";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { CartesianGrid as m, Line as h, LineChart as g, Tooltip as _, XAxis as v, YAxis as y } from "recharts";
+import { ANIMATION_PROPS as e, CHART_PLOT_MARGIN as t, CHART_PLOT_MARGIN_BARE as n, CHART_TYPE as r, GRID_PROPS as i, cartesianAxisProps as a, chartTooltipProps as o, seriesColor as s } from "./config.js";
+import { applyLeadColor as c, resolveChartSeries as l, xyFallbackKeys as u } from "./series.js";
+import { ChartShell as d } from "./frame.js";
+import { ChartLegend as f } from "./legend.js";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { CartesianGrid as h, Line as g, LineChart as _, Tooltip as v, XAxis as y, YAxis as b } from "recharts";
 //#region src/charts/line.tsx
-function b({ data: b, series: x, ariaLabel: S = "Line chart", className: C, showAxes: w = !1, showLegend: T = !1, color: E, valueFormatter: D }) {
-	let O = s(c(x, l(b)), E);
-	return /* @__PURE__ */ f(u, {
-		ariaLabel: S,
-		className: C,
-		legend: T ? /* @__PURE__ */ f(d, {
-			items: O,
-			shape: "line"
-		}) : void 0,
-		children: /* @__PURE__ */ p(g, {
-			data: b,
-			margin: w ? t : n,
+function x({ data: x, series: S, ariaLabel: C = "Line chart", className: w, showAxes: T = !1, showLegend: E = !1, color: D, valueFormatter: O, xValueFormatter: k, yDomain: A, legend: j, customTooltip: M, summary: N, dataAlternative: P, accessibilityLayer: F }) {
+	let I = c(l(S, u(x)), D), L = j === void 0 ? E ? /* @__PURE__ */ p(f, {
+		items: I,
+		shape: "line"
+	}) : void 0 : typeof j == "function" ? j({ items: I }) : j;
+	return /* @__PURE__ */ p(d, {
+		ariaLabel: C,
+		className: w,
+		legend: L,
+		summary: N,
+		dataAlternative: P,
+		accessibilityLayer: F,
+		children: /* @__PURE__ */ m(_, {
+			data: x,
+			margin: T ? t : n,
 			children: [
-				w ? /* @__PURE__ */ f(m, { ...r }) : null,
-				/* @__PURE__ */ f(v, {
+				T ? /* @__PURE__ */ p(h, { ...i }) : null,
+				/* @__PURE__ */ p(y, {
 					dataKey: "x",
-					...i(!w)
+					...a(!T),
+					tickFormatter: k
 				}),
-				/* @__PURE__ */ f(y, {
-					...i(!w),
-					tickFormatter: D
+				/* @__PURE__ */ p(b, {
+					...a(!T),
+					tickFormatter: O,
+					...A ? { domain: A } : {}
 				}),
-				/* @__PURE__ */ f(_, { ...a({
-					formatter: D,
-					cursor: "line"
+				/* @__PURE__ */ p(v, { ...o({
+					formatter: O,
+					cursor: "line",
+					customTooltip: M
 				}) }),
-				O.map((t, n) => /* @__PURE__ */ f(h, {
+				I.map((t, n) => /* @__PURE__ */ p(g, {
 					type: "monotone",
 					dataKey: t.key,
 					name: t.label ?? t.key,
-					stroke: o(t, n),
+					stroke: s(t, n),
+					strokeWidth: r.strokeWidth,
 					dot: !1,
 					...e
 				}, t.key))
@@ -45,6 +52,6 @@ function b({ data: b, series: x, ariaLabel: S = "Line chart", className: C, show
 	});
 }
 //#endregion
-export { b as LineChart };
+export { x as LineChart };
 
 //# sourceMappingURL=line.js.map

package/dist/charts/line.js.map

@@ -1 +1 @@
-{"version":3,"file":"line.js","names":[],"sources":["../../src/charts/line.tsx"],"sourcesContent":["import { CartesianGrid, Line, LineChart as RechartsLine, Tooltip, XAxis, YAxis } from \"recharts\";\nimport {\n\tANIMATION_PROPS,\n\tCHART_PLOT_MARGIN,\n\tCHART_PLOT_MARGIN_BARE,\n\tcartesianAxisProps,\n\tchartTooltipProps,\n\tGRID_PROPS,\n\tseriesColor,\n} from \"./config\";\nimport { ChartShell } from \"./frame\";\nimport { ChartLegend } from \"./legend\";\nimport {\n\tapplyLeadColor,\n\tresolveChartSeries,\n\ttype XYPoint,\n\ttype XYSeriesDescriptor,\n\txyFallbackKeys,\n} from \"./series\";\n\nexport type LineChartProps = {\n\tdata: XYPoint[];\n\tseries?: XYSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n\tshowLegend?: boolean;\n\tcolor?: string;\n\tvalueFormatter?: (value: number) => string;\n};\n\nexport function LineChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Line chart\",\n\tclassName,\n\tshowAxes = false,\n\tshowLegend = false,\n\tcolor,\n\tvalueFormatter,\n}: LineChartProps) {\n\tconst lines = applyLeadColor(resolveChartSeries(series, xyFallbackKeys(data)), color);\n\treturn (\n\t\t<ChartShell\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tlegend={showLegend ? <ChartLegend items={lines} shape=\"line\" /> : undefined}\n\t\t>\n\t\t\t<RechartsLine data={data} margin={showAxes ? CHART_PLOT_MARGIN : CHART_PLOT_MARGIN_BARE}>\n\t\t\t\t{showAxes ? <CartesianGrid {...GRID_PROPS} /> : null}\n\t\t\t\t<XAxis dataKey=\"x\" {...cartesianAxisProps(!showAxes)} />\n\t\t\t\t<YAxis {...cartesianAxisProps(!showAxes)} tickFormatter={valueFormatter} />\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: \"line\" })} />\n\t\t\t\t{lines.map((item, index) => (\n\t\t\t\t\t<Line\n\t\t\t\t\t\tkey={item.key}\n\t\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\t\tdataKey={item.key}\n\t\t\t\t\t\tname={item.label ?? item.key}\n\t\t\t\t\t\tstroke={seriesColor(item, index)}\n\t\t\t\t\t\tdot={false}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</RechartsLine>\n\t\t</ChartShell>\n\t);\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgB,EAAU,EACzB,SACA,WACA,eAAY,cACZ,cACA,cAAW,IACX,gBAAa,IACb,UACA,qBACkB;CAClB,IAAM,IAAQ,EAAe,EAAmB,GAAQ,EAAe,CAAI,CAAC,GAAG,CAAK;CACpF,OACC,kBAAC,GAAD;EACY;EACA;EACX,QAAQ,IAAa,kBAAC,GAAD;GAAa,OAAO;GAAO,OAAM;EAAQ,CAAA,IAAI,KAAA;EAElE,UAAA,kBAAC,GAAD;GAAoB;GAAM,QAAQ,IAAW,IAAoB;GAAjE,UAAA;IACE,IAAW,kBAAC,GAAD,EAAe,GAAI,EAAa,CAAA,IAAI;IAChD,kBAAC,GAAD;KAAO,SAAQ;KAAI,GAAI,EAAmB,CAAC,CAAQ;IAAI,CAAA;IACvD,kBAAC,GAAD;KAAO,GAAI,EAAmB,CAAC,CAAQ;KAAG,eAAe;IAAiB,CAAA;IAC1E,kBAAC,GAAD,EAAS,GAAI,EAAkB;KAAE,WAAW;KAAgB,QAAQ;IAAO,CAAC,EAAI,CAAA;IAC/E,EAAM,KAAK,GAAM,MACjB,kBAAC,GAAD;KAEC,MAAK;KACL,SAAS,EAAK;KACd,MAAM,EAAK,SAAS,EAAK;KACzB,QAAQ,EAAY,GAAM,CAAK;KAC/B,KAAK;KACL,GAAI;IACJ,GAPK,EAAK,GAOV,CACD;GACY;;CACH,CAAA;AAEd"}
+{"version":3,"file":"line.js","names":[],"sources":["../../src/charts/line.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { CartesianGrid, Line, LineChart as RechartsLine, Tooltip, XAxis, YAxis } from \"recharts\";\nimport {\n\tANIMATION_PROPS,\n\tCHART_PLOT_MARGIN,\n\tCHART_PLOT_MARGIN_BARE,\n\tCHART_TYPE,\n\tcartesianAxisProps,\n\tchartTooltipProps,\n\tGRID_PROPS,\n\tseriesColor,\n} from \"./config\";\nimport { ChartShell } from \"./frame\";\nimport { ChartLegend } from \"./legend\";\nimport {\n\tapplyLeadColor,\n\ttype ChartSeriesDescriptor,\n\tresolveChartSeries,\n\ttype XYPoint,\n\txyFallbackKeys,\n} from \"./series\";\nimport type { ChartTooltipItem } from \"./tooltip\";\n\nexport type LineChartAxisDomain =\n\t| [number | \"auto\" | \"dataMin\", number | \"auto\" | \"dataMax\"]\n\t| readonly [number | \"auto\" | \"dataMin\", number | \"auto\" | \"dataMax\"];\n\nexport type LineChartNumericKeys<T> = {\n\t[K in keyof T]-?: K extends \"x\"\n\t\t? never\n\t\t: [NonNullable<T[K]>] extends [never]\n\t\t\t? never\n\t\t\t: NonNullable<T[K]> extends number\n\t\t\t\t? K extends string\n\t\t\t\t\t? K\n\t\t\t\t\t: never\n\t\t\t\t: never;\n}[keyof T];\n\nexport type LineChartLegendRenderer<K extends string = string> = (props: {\n\titems: Array<ChartSeriesDescriptor<K>>;\n}) => ReactNode;\n\nexport type LineChartTooltipRenderer = (props: {\n\tactive?: boolean;\n\tpayload?: readonly ChartTooltipItem[];\n\tlabel?: string | number;\n}) => ReactNode;\n\nexport type LineChartProps<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n> = {\n\t/**\n\t * Dataset array where each record requires an `x` category or time coordinate.\n\t * Any remaining fields with numeric, nullable, or optional number values are inferred as valid series keys.\n\t */\n\tdata: TData[];\n\t/**\n\t * Series descriptors identifying which numeric keys to plot.\n\t * Inferred strictly from numeric keys of `TData` (rejects non-numeric fields, `x`, and typos).\n\t */\n\tseries?: Array<ChartSeriesDescriptor<NoInfer<K>>>;\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n\tshowLegend?: boolean;\n\tcolor?: string;\n\t/**\n\t * Value formatter for Y-axis tick values and fallback tooltip values.\n\t */\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Formatter for X-axis category or time tick labels.\n\t */\n\txValueFormatter?: (value: string | number) => string;\n\t/**\n\t * Custom numerical or keyword bounds for the Y-axis.\n\t */\n\tyDomain?: LineChartAxisDomain;\n\t/**\n\t * Custom legend slot or render function receiving resolved series descriptors.\n\t */\n\tlegend?: ReactNode | LineChartLegendRenderer<K>;\n\t/**\n\t * Custom tooltip content renderer receiving Recharts payload, active status, and coordinate label.\n\t */\n\tcustomTooltip?: LineChartTooltipRenderer;\n\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport function LineChart<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n>({\n\tdata,\n\tseries,\n\tariaLabel = \"Line chart\",\n\tclassName,\n\tshowAxes = false,\n\tshowLegend = false,\n\tcolor,\n\tvalueFormatter,\n\txValueFormatter,\n\tyDomain,\n\tlegend,\n\tcustomTooltip,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: LineChartProps<TData, K>) {\n\tconst lines = applyLeadColor(\n\t\tresolveChartSeries(\n\t\t\tseries,\n\t\t\txyFallbackKeys(data as unknown as Array<{ y2?: number; y3?: number }>) as K[],\n\t\t),\n\t\tcolor,\n\t);\n\tconst resolvedLegend =\n\t\tlegend !== undefined ? (\n\t\t\ttypeof legend === \"function\" ? (\n\t\t\t\tlegend({ items: lines })\n\t\t\t) : (\n\t\t\t\tlegend\n\t\t\t)\n\t\t) : showLegend ? (\n\t\t\t<ChartLegend items={lines} shape=\"line\" />\n\t\t) : undefined;\n\n\treturn (\n\t\t<ChartShell\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tlegend={resolvedLegend}\n\t\t\tsummary={summary}\n\t\t\tdataAlternative={dataAlternative}\n\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t>\n\t\t\t<RechartsLine data={data} margin={showAxes ? CHART_PLOT_MARGIN : CHART_PLOT_MARGIN_BARE}>\n\t\t\t\t{showAxes ? <CartesianGrid {...GRID_PROPS} /> : null}\n\t\t\t\t<XAxis dataKey=\"x\" {...cartesianAxisProps(!showAxes)} tickFormatter={xValueFormatter} />\n\t\t\t\t<YAxis\n\t\t\t\t\t{...cartesianAxisProps(!showAxes)}\n\t\t\t\t\ttickFormatter={valueFormatter}\n\t\t\t\t\t{...(yDomain ? { domain: yDomain as [number, number] } : {})}\n\t\t\t\t/>\n\t\t\t\t<Tooltip\n\t\t\t\t\t{...chartTooltipProps({\n\t\t\t\t\t\tformatter: valueFormatter,\n\t\t\t\t\t\tcursor: \"line\",\n\t\t\t\t\t\tcustomTooltip,\n\t\t\t\t\t})}\n\t\t\t\t/>\n\t\t\t\t{lines.map((item, index) => (\n\t\t\t\t\t<Line\n\t\t\t\t\t\tkey={item.key}\n\t\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\t\tdataKey={item.key}\n\t\t\t\t\t\tname={item.label ?? item.key}\n\t\t\t\t\t\tstroke={seriesColor(item, index)}\n\t\t\t\t\t\tstrokeWidth={CHART_TYPE.strokeWidth}\n\t\t\t\t\t\tdot={false}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</RechartsLine>\n\t\t</ChartShell>\n\t);\n}\n"],"mappings":";;;;;;;;AA0GA,SAAgB,EAGd,EACD,SACA,WACA,eAAY,cACZ,cACA,cAAW,IACX,gBAAa,IACb,UACA,mBACA,oBACA,YACA,WACA,kBACA,YACA,oBACA,yBAC4B;CAC5B,IAAM,IAAQ,EACb,EACC,GACA,EAAe,CAAsD,CACtE,GACA,CACD,GACM,IACL,MAAW,KAAA,IAMP,IACH,kBAAC,GAAD;EAAa,OAAO;EAAO,OAAM;CAAQ,CAAA,IACtC,KAAA,IAPH,OAAO,KAAW,aACjB,EAAO,EAAE,OAAO,EAAM,CAAC,IAEvB;CAMH,OACC,kBAAC,GAAD;EACY;EACA;EACX,QAAQ;EACC;EACQ;EACG;EAEpB,UAAA,kBAAC,GAAD;GAAoB;GAAM,QAAQ,IAAW,IAAoB;GAAjE,UAAA;IACE,IAAW,kBAAC,GAAD,EAAe,GAAI,EAAa,CAAA,IAAI;IAChD,kBAAC,GAAD;KAAO,SAAQ;KAAI,GAAI,EAAmB,CAAC,CAAQ;KAAG,eAAe;IAAkB,CAAA;IACvF,kBAAC,GAAD;KACC,GAAI,EAAmB,CAAC,CAAQ;KAChC,eAAe;KACf,GAAK,IAAU,EAAE,QAAQ,EAA4B,IAAI,CAAC;IAC1D,CAAA;IACD,kBAAC,GAAD,EACC,GAAI,EAAkB;KACrB,WAAW;KACX,QAAQ;KACR;IACD,CAAC,EACD,CAAA;IACA,EAAM,KAAK,GAAM,MACjB,kBAAC,GAAD;KAEC,MAAK;KACL,SAAS,EAAK;KACd,MAAM,EAAK,SAAS,EAAK;KACzB,QAAQ,EAAY,GAAM,CAAK;KAC/B,aAAa,EAAW;KACxB,KAAK;KACL,GAAI;IACJ,GARK,EAAK,GAQV,CACD;GACY;;CACH,CAAA;AAEd"}

package/dist/charts/palette.d.ts

@@ -27,6 +27,7 @@ export declare const chart: {
     readonly crimson: string;
     readonly gray: string;
 };
+/** Fixed five-color series cycle; independent of the application accent. */
 export declare const CHART_COLORS: string[];
 export type ChartPaletteProps = {
     ariaLabel?: string;

package/dist/charts/palette.js

@@ -26,7 +26,13 @@ var t = (e) => `hsl(var(--basalt-${e}))`, n = (e, t) => `hsl(var(--basalt-${e})
 	tangerine: t("chart-22"),
 	crimson: t("chart-23"),
 	gray: t("chart-24")
-}, o = Object.values(a);
+}, o = [
+	a.primary,
+	a.rose,
+	a.green,
+	a.amber,
+	a.gray
+];
 function s({ ariaLabel: t = "Chart colors" }) {
 	return /* @__PURE__ */ e("div", {
 		className: "flex flex-wrap gap-2",