@siyahi/ui 0.1.9-next.2 → 0.1.9-next.20

package/dist/lib/chart-frame.js

@@ -1,12 +1,22 @@
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card.js";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "../components/ui/chart.js";
+import { cn } from "./utils.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CartesianGrid, ReferenceLine, XAxis, YAxis } from "recharts";
+import { useMemo } from "react";
+import { CartesianGrid, ReferenceLine, Text, XAxis, YAxis, useChartWidth } from "recharts";
 //#region src/lib/chart-frame.tsx
 const AXIS_TITLE = "fill-muted-foreground text-xs";
 const TICK = { className: "fill-muted-foreground font-mono" };
 const NO_LINES = [];
+/**
+* The colour a series' Bar takes, which its legend chip shows: the negative colour when every value drawn is below
+* zero, since each bar's own Cell follows its sign but the chip follows the Bar.
+*/
+function seriesFill(item, data) {
+	const values = data.map((row) => row[item.key]).filter((value) => Number.isFinite(value)).map(Number);
+	return item.negativeColor && values.length > 0 && values.every((value) => value < 0) ? item.negativeColor : item.color;
+}
 /** A tooltip row: the series' colour and label, then its value as the page formats it, or — when the row has none. */
 function seriesRow(series, formatValue) {
 	return (value, _name, item) => {
@@ -28,170 +38,240 @@ function seriesRow(series, formatValue) {
 		] });
 	};
 }
-const CHAR_WIDTH = 6.6;
-/** Squeezes a line into its column with SVG's own textLength when it would run into the next one. */
-const fitTo = (text, room) => room > 0 && text.length * CHAR_WIDTH > room ? {
-	textLength: room,
-	lengthAdjust: "spacingAndGlyphs"
-} : {};
+const GEIST_WIDTH = 6.6;
+const MONO_WIDTH = 7.2;
+/**
+* Room to keep right of the plot when every named tick is drawn: half the last label, which centres on the
+* domain's right end, and at least 24px.
+*/
+function endRoom(xFormatter, xTicks) {
+	const last = xTicks.at(-1);
+	return Math.max(24, Math.ceil((last === void 0 ? 0 : xFormatter(last).length * MONO_WIDTH) / 2) + 4);
+}
 /**
-* An x tick with a second line from its row. Under a column the lines hang below the axis; beside a horizontal
-* bar they straddle its middle. Both lines are set in Geist, not Mono: a name with a figure under it reads as a
-* label, as in BarList, and sector names in Mono would take most of a phone's width.
+* An x tick with a second line or explicit position: Recharts'
+* own ticks would rather drop a label than let it run into the next. With a detail, the second line comes from the
+* tick's row; under a column the lines hang below the axis, and beside a horizontal bar they straddle its middle.
+* A two-line tick is set in Geist, not Mono: a name with a figure under it reads as a label, as in BarList, and
+* sector names in Mono would take most of a phone's width.
 */
-function twoLineTick(data, xKey, xFormatter, detailOf, beside) {
-	return ({ x, y, width, visibleTicksCount, payload }) => {
+function fittedTick(data, xKey, xFormatter, detailOf, beside, labelWidth) {
+	const rows = /* @__PURE__ */ new Map();
+	for (const row of data) if (!rows.has(row[xKey])) rows.set(row[xKey], row);
+	return ({ x, y, payload }) => {
 		const value = payload?.value;
-		const row = data.find((r) => r[xKey] === value);
+		const row = rows.get(value);
 		const name = xFormatter(value);
-		const detail = row ? detailOf(row) : null;
-		const room = beside || !visibleTicksCount ? 0 : Number(width) / visibleTicksCount - 6;
+		const detail = row && detailOf ? detailOf(row) : null;
+		if (beside) return /* @__PURE__ */ jsxs("g", {
+			className: "fill-muted-foreground",
+			children: [/* @__PURE__ */ jsx(Text, {
+				x,
+				y: Number(y) - (detail ? 4 : 0),
+				width: labelWidth,
+				maxLines: 2,
+				textAnchor: "end",
+				verticalAnchor: detail ? "end" : "middle",
+				lineHeight: 14,
+				style: { fontSize: "var(--text-xs)" },
+				"aria-label": name,
+				className: "recharts-cartesian-axis-tick-value fill-muted-foreground",
+				children: name
+			}), detail !== null && /* @__PURE__ */ jsx(Text, {
+				x,
+				y: Number(y) + 4,
+				width: labelWidth,
+				textAnchor: "end",
+				verticalAnchor: "start",
+				lineHeight: 14,
+				style: {
+					fontSize: "var(--text-xs)",
+					fontVariantNumeric: "tabular-nums"
+				},
+				"aria-label": detail,
+				className: "fill-muted-foreground tabular-nums",
+				children: detail
+			})]
+		});
 		return /* @__PURE__ */ jsxs("text", {
 			x,
 			y,
 			textAnchor: beside ? "end" : "middle",
-			className: "recharts-cartesian-axis-tick-value fill-muted-foreground",
+			className: cn("recharts-cartesian-axis-tick-value fill-muted-foreground", !detailOf && "font-mono"),
 			children: [/* @__PURE__ */ jsx("tspan", {
 				x,
-				dy: beside ? -4 : 12,
-				...fitTo(name, room),
+				dy: 12,
 				children: name
 			}), detail !== null && /* @__PURE__ */ jsx("tspan", {
 				x,
 				dy: 15,
 				className: "tabular-nums",
-				...fitTo(detail, room),
 				children: detail
 			})]
 		});
 	};
 }
+function HorizontalAxis({ data, xKey, xFormatter, xTickDetail, xTicks }) {
+	const width = Math.min(240, Math.floor((useChartWidth() ?? 320) * .45));
+	return /* @__PURE__ */ jsx(YAxis, {
+		dataKey: xKey,
+		type: "category",
+		width,
+		tickLine: false,
+		axisLine: false,
+		tickMargin: 8,
+		tickFormatter: xFormatter,
+		interval: 0,
+		ticks: xTicks,
+		tick: fittedTick(data, xKey, xFormatter, xTickDetail, true, width - 16)
+	});
+}
 /**
 * The card, axes, grid, tooltip and legend the three chart cards share. Both
 * axes keep Recharts' default ids: marks find their axes by id, and a page
 * that gave its category axis its own id (dash#88) got a plot split in two
 * and every tooltip headed with the series name instead of the category.
 */
-function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks }) {
+function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, onClick, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks }) {
 	const { numberLocale } = useLocale();
-	const formatValue = valueFormatter ?? new Intl.NumberFormat(numberLocale).format;
+	const formatValue = useMemo(() => valueFormatter ?? new Intl.NumberFormat(numberLocale).format, [valueFormatter, numberLocale]);
 	const config = Object.fromEntries(series.map(({ key, label, color }) => [key, {
 		label,
 		color
 	}]));
 	const crossesZero = data.some((row) => series.some(({ key }) => Number(row[key]) < 0));
+	const detailedRows = horizontal && xTickDetail !== void 0;
+	const rowCount = (xTicks ?? data).length;
+	const plotClass = detailedRows ? "min-h-(--wrapped-chart-height) @min-[24rem]/chart:min-h-0" : void 0;
+	let minWidth;
+	if (!horizontal && (xTicks || xTickDetail)) {
+		const labelledValues = xTicks ?? data.map((row) => row[xKey]);
+		let tickWidth = 0;
+		for (const value of labelledValues) tickWidth = Math.max(tickWidth, xFormatter(value).length * MONO_WIDTH);
+		if (xTickDetail) for (const row of data) tickWidth = Math.max(tickWidth, xTickDetail(row).length * GEIST_WIDTH);
+		minWidth = Math.ceil((tickWidth + 12) * labelledValues.length + 64);
+	}
+	const plotStyle = {
+		height: detailedRows ? Math.max(height, rowCount * 72 + 48) : height,
+		minWidth,
+		...detailedRows ? { "--wrapped-chart-height": `${rowCount * 104 + 48}px` } : {}
+	};
 	return /* @__PURE__ */ jsxs(Card, { children: [
 		/* @__PURE__ */ jsxs(CardHeader, { children: [
 			/* @__PURE__ */ jsx(CardTitle, { children: title }),
 			description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
 			action && /* @__PURE__ */ jsx(CardAction, { children: action })
 		] }),
-		/* @__PURE__ */ jsx(CardContent, { children: placeholder ? /* @__PURE__ */ jsx("div", {
-			"data-slot": "chart-placeholder",
-			className: "flex items-center justify-center",
-			style: { height },
-			children: placeholder
-		}) : /* @__PURE__ */ jsx(ChartContainer, {
-			config,
-			className: "aspect-auto w-full",
-			style: { height },
-			children: /* @__PURE__ */ jsxs(Chart, {
-				data,
-				layout: horizontal ? "vertical" : "horizontal",
-				stackOffset,
-				margin: {
-					left: 0,
-					right: 8
-				},
-				children: [
-					/* @__PURE__ */ jsx(CartesianGrid, {
-						vertical: horizontal,
-						horizontal: !horizontal,
-						strokeDasharray: "3 3"
-					}),
-					horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
-						type: "number",
-						hide: true,
-						domain: yDomain,
-						ticks: yTicks
-					}), /* @__PURE__ */ jsx(YAxis, {
-						dataKey: xKey,
-						type: "category",
-						width: "auto",
-						tickLine: false,
-						axisLine: false,
-						tickMargin: 8,
-						tickFormatter: (value) => xFormatter(value),
-						tick: xTickDetail ? twoLineTick(data, xKey, xFormatter, xTickDetail, horizontal) : TICK,
-						interval: 0
-					})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
-						dataKey: xKey,
-						type: xDomain ? "number" : "category",
-						domain: xDomain,
-						ticks: xTicks,
-						height: (xTickDetail ? 40 : 30) + (xLabel ? 18 : 0),
-						label: xLabel ? {
-							value: xLabel,
-							position: "insideBottom",
-							className: AXIS_TITLE
-						} : void 0,
-						tickLine: false,
-						axisLine: false,
-						tickMargin: 8,
-						tickFormatter: (value) => xFormatter(value),
-						tick: xTickDetail ? twoLineTick(data, xKey, xFormatter, xTickDetail, false) : TICK,
-						interval: xTickDetail ? 0 : void 0
-					}), /* @__PURE__ */ jsx(YAxis, {
-						tickLine: false,
-						axisLine: false,
-						width: "auto",
-						domain: yDomain,
-						ticks: yTicks,
-						label: yLabel ? {
-							value: yLabel,
-							angle: -90,
-							position: "insideLeft",
-							style: { textAnchor: "middle" },
-							className: AXIS_TITLE
-						} : void 0,
-						tickFormatter: (value) => (yTickFormatter ?? formatValue)(value),
-						tick: TICK
-					})] }),
-					crossesZero && (horizontal ? /* @__PURE__ */ jsx(ReferenceLine, {
-						x: 0,
-						stroke: "var(--border)"
-					}) : /* @__PURE__ */ jsx(ReferenceLine, {
-						y: 0,
-						stroke: "var(--border)"
-					})),
-					referenceLines.map(({ label, emphasis = "muted", labelPosition = "insideTopLeft", ...at }) => /* @__PURE__ */ jsx(ReferenceLine, {
-						...horizontal ? {
-							x: at.y,
-							y: at.x
-						} : at,
-						stroke: emphasis === "strong" ? "var(--foreground)" : "var(--muted-foreground)",
-						strokeDasharray: at.y === void 0 ? void 0 : "4 4",
-						label: label === void 0 ? void 0 : {
-							value: label,
-							position: labelPosition,
-							className: "fill-muted-foreground text-xs"
-						}
-					}, `${at.x ?? ""}:${at.y ?? ""}:${label ?? ""}`)),
-					/* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
-						labelFormatter: (_, payload) => {
-							const row = payload[0]?.payload;
-							return row ? xTooltipFormatter(row[xKey]) : null;
-						},
-						formatter: seriesRow(series, formatValue)
-					}) }),
-					children,
-					/* @__PURE__ */ jsx(ChartLegend, {
-						content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
-						itemSorter: null
-					})
-				]
+		/* @__PURE__ */ jsx(CardContent, {
+			className: "@container/chart overflow-x-auto",
+			role: minWidth ? "region" : void 0,
+			"aria-label": minWidth ? "Chart, scroll horizontally for all labelled values" : void 0,
+			tabIndex: minWidth ? 0 : void 0,
+			children: placeholder ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "chart-placeholder",
+				className: cn("flex items-center justify-center", plotClass),
+				style: plotStyle,
+				children: placeholder
+			}) : /* @__PURE__ */ jsx(ChartContainer, {
+				config,
+				className: cn("aspect-auto w-full", plotClass, onClick && "cursor-pointer"),
+				style: plotStyle,
+				children: /* @__PURE__ */ jsxs(Chart, {
+					data,
+					layout: horizontal ? "vertical" : "horizontal",
+					stackOffset,
+					onClick,
+					throttledEvents: onClick ? [] : void 0,
+					margin: {
+						left: 0,
+						right: !horizontal && xTicks ? endRoom(xFormatter, xTicks) : 8
+					},
+					children: [
+						/* @__PURE__ */ jsx(CartesianGrid, {
+							vertical: horizontal,
+							horizontal: !horizontal,
+							strokeDasharray: "3 3"
+						}),
+						horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+							type: "number",
+							hide: true,
+							domain: yDomain,
+							ticks: yTicks
+						}), /* @__PURE__ */ jsx(HorizontalAxis, {
+							data,
+							xKey,
+							xFormatter,
+							xTickDetail,
+							xTicks
+						})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+							dataKey: xKey,
+							type: xDomain ? "number" : "category",
+							domain: xDomain,
+							ticks: xTicks,
+							height: (xTickDetail ? 40 : 30) + (xLabel ? 18 : 0),
+							label: xLabel ? {
+								value: xLabel,
+								position: "insideBottom",
+								className: AXIS_TITLE
+							} : void 0,
+							tickLine: false,
+							axisLine: false,
+							tickMargin: 8,
+							tickFormatter: (value) => xFormatter(value),
+							tick: xTickDetail || xTicks ? fittedTick(data, xKey, xFormatter, xTickDetail, false) : TICK,
+							interval: xTickDetail || xTicks ? 0 : void 0
+						}), /* @__PURE__ */ jsx(YAxis, {
+							tickLine: false,
+							axisLine: false,
+							width: "auto",
+							domain: yDomain,
+							ticks: yTicks,
+							label: yLabel ? {
+								value: yLabel,
+								angle: -90,
+								position: "insideLeft",
+								style: { textAnchor: "middle" },
+								className: AXIS_TITLE
+							} : void 0,
+							tickFormatter: (value) => (yTickFormatter ?? formatValue)(value),
+							tick: TICK
+						})] }),
+						crossesZero && (horizontal ? /* @__PURE__ */ jsx(ReferenceLine, {
+							x: 0,
+							stroke: "var(--border)"
+						}) : /* @__PURE__ */ jsx(ReferenceLine, {
+							y: 0,
+							stroke: "var(--border)"
+						})),
+						referenceLines.map(({ label, emphasis = "muted", labelPosition = "insideTopLeft", ...at }) => /* @__PURE__ */ jsx(ReferenceLine, {
+							...horizontal ? {
+								x: at.y,
+								y: at.x
+							} : at,
+							stroke: emphasis === "strong" ? "var(--foreground)" : "var(--muted-foreground)",
+							strokeDasharray: at.y === void 0 ? void 0 : "4 4",
+							label: label === void 0 ? void 0 : {
+								value: label,
+								position: labelPosition,
+								className: "fill-muted-foreground text-xs"
+							}
+						}, `${at.x ?? ""}:${at.y ?? ""}:${label ?? ""}`)),
+						/* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+							labelFormatter: (_, payload) => {
+								const row = payload[0]?.payload;
+								return row ? xTooltipFormatter(row[xKey]) : null;
+							},
+							formatter: seriesRow(series, formatValue)
+						}) }),
+						children,
+						/* @__PURE__ */ jsx(ChartLegend, {
+							content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
+							itemSorter: null
+						})
+					]
+				})
 			})
-		}) }),
+		}),
 		footer && /* @__PURE__ */ jsx(CardFooter, {
 			className: "flex-col items-start gap-2 text-sm",
 			children: footer
@@ -199,4 +279,4 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, t
 	] });
 }
 //#endregion
-export { ChartFrame, seriesRow };
+export { ChartFrame, seriesFill, seriesRow };

package/dist/lib/chart-series.d.ts

@@ -49,6 +49,8 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
   /** The field the x axis reads: a month, an hour of day, a price bucket. One row per value; a repeated value is hidden behind the first. */
   xKey: K;
   series: ChartSeries<NoInfer<T>>;
+  /** Categories to label, or tick positions with xDomain. Every named tick is drawn; other rows keep their marks and tooltips. */
+  xTicks?: readonly T[K][];
   /** The x axis ticks, and the tooltip's heading unless xTooltipFormatter is set. Defaults to the value as text. */
   xFormatter?: (value: T[K]) => string;
   /** The tooltip's heading, when it should say more than a tick: "19:34:13 IST, 10 s average" against "19:34". */
@@ -57,11 +59,14 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
   valueFormatter?: (value: number) => string;
   /** The y axis, when its ticks should be shorter than the tooltip's figures: moneyCompact against money. */
   yTickFormatter?: (value: number) => string;
-  /** A fixed range for the value axis, such as [0, 100] for a percentage; by default it fits the data. */
+  /**
+   * A fixed range for the value axis, such as [0, 100] for a percentage. By default it fits the data; a bar
+   * chart's always reaches zero.
+   */
   yDomain?: [number, number];
   /** Where the value axis puts its ticks, such as [0, 25, 50, 75, 100]. */
   yTicks?: readonly number[];
-  /** Height of the plot and legend, in pixels. */
+  /** Height of the plot and legend, in pixels. Sideways bars grow when wrapped tick details need more room. */
   height: number;
   /** A second line under each x tick, so a row's figure reads without a hover: "FY24" then "▲₹1.2L". */
   xTickDetail?: (row: T) => string;
@@ -80,8 +85,6 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
 export interface NumericXProps {
   /** The x axis runs over this range of the xKey field, which must hold numbers; without it the axis is one slot per row. */
   xDomain?: [number, number];
-  /** Where the x axis puts its ticks, in the xKey field's units. */
-  xTicks?: readonly number[];
 }
 /**
  * How a line or an area's edge joins its points: "linear" draws straight segments, as measured samples should

package/dist/lib/format.js

@@ -2,9 +2,21 @@ import { defaultLocale } from "./locale.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
 import { useMemo } from "react";
 //#region src/lib/format.ts
+const numbers = /* @__PURE__ */ new Map();
+const clocks = /* @__PURE__ */ new Map();
+const regions = /* @__PURE__ */ new Map();
+function numberFormat(locale, options) {
+	const key = JSON.stringify([locale, options]);
+	let formatter = numbers.get(key);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locale, options);
+		numbers.set(key, formatter);
+	}
+	return formatter;
+}
 /** An amount in the locale's currency, whole units by default: ₹1,53,110. Signed figures belong in `Delta`. */
 function money(value, locale = defaultLocale, fractionDigits = 0) {
-	return new Intl.NumberFormat(locale.numberLocale, {
+	return numberFormat(locale.numberLocale, {
 		style: "currency",
 		currency: locale.currency,
 		minimumFractionDigits: fractionDigits,
@@ -18,8 +30,9 @@ function money(value, locale = defaultLocale, fractionDigits = 0) {
 * `Delta`, which adds the arrow.
 */
 function moneyCompact(value, locale = defaultLocale) {
-	if (new Intl.Locale(locale.numberLocale).region === "IN" && Math.abs(value) < 1e5) return money(value, locale);
-	return new Intl.NumberFormat(locale.numberLocale, {
+	if (!regions.has(locale.numberLocale)) regions.set(locale.numberLocale, new Intl.Locale(locale.numberLocale).region);
+	if (regions.get(locale.numberLocale) === "IN" && Math.abs(value) < 1e5) return money(value, locale);
+	return numberFormat(locale.numberLocale, {
 		style: "currency",
 		currency: locale.currency,
 		notation: "compact",
@@ -28,11 +41,11 @@ function moneyCompact(value, locale = defaultLocale) {
 }
 /** A whole count with the locale's grouping: 1,53,110 in en-IN. */
 function count(value, locale = defaultLocale) {
-	return new Intl.NumberFormat(locale.numberLocale, { maximumFractionDigits: 0 }).format(value);
+	return numberFormat(locale.numberLocale, { maximumFractionDigits: 0 }).format(value);
 }
 /** A fraction as a percentage: 0.1234 is 12.3%. */
 function pct(value, locale = defaultLocale, fractionDigits = 1) {
-	return new Intl.NumberFormat(locale.numberLocale, {
+	return numberFormat(locale.numberLocale, {
 		style: "percent",
 		minimumFractionDigits: fractionDigits,
 		maximumFractionDigits: fractionDigits
@@ -40,19 +53,25 @@ function pct(value, locale = defaultLocale, fractionDigits = 1) {
 }
 /** A 24-hour time in the locale's zone, with the zone written: 14:30 IST. */
 function time(value, locale = defaultLocale, { withDate = false } = {}) {
-	const date = withDate ? {
-		day: "numeric",
-		month: "short",
-		year: "numeric"
-	} : {};
-	return new Intl.DateTimeFormat(locale.numberLocale, {
-		...date,
+	const options = {
+		...withDate ? {
+			day: "numeric",
+			month: "short",
+			year: "numeric"
+		} : {},
 		hour: "2-digit",
 		minute: "2-digit",
 		hourCycle: "h23",
 		timeZone: locale.timeZone,
 		timeZoneName: "short"
-	}).format(new Date(value));
+	};
+	const key = JSON.stringify([locale.numberLocale, options]);
+	let formatter = clocks.get(key);
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat(locale.numberLocale, options);
+		clocks.set(key, formatter);
+	}
+	return formatter.format(new Date(value));
 }
 /** The formatters above, bound to the locale of the nearest `SiyahiProvider`. */
 function useFormat() {

package/dist/lib/heatmap-navigation.d.ts

@@ -0,0 +1,8 @@
+import { KeyboardEventHandler, RefObject } from "react";
+//#region src/lib/heatmap-navigation.d.ts
+/** One tab stop per heatmap; arrows move between its actual drawn cells. */
+export declare function useHeatmapNavigation(): {
+  ref: RefObject<HTMLDivElement | null>;
+  onKeyDown: KeyboardEventHandler<HTMLDivElement>;
+};
+//#endregion

package/dist/lib/heatmap-navigation.js

@@ -0,0 +1,49 @@
+import { useLayoutEffect, useRef } from "react";
+//#region src/lib/heatmap-navigation.ts
+/** One tab stop per heatmap; arrows move between its actual drawn cells. */
+function useHeatmapNavigation() {
+	const ref = useRef(null);
+	const cells = () => [...ref.current?.querySelectorAll("rect[role=\"button\"]") ?? []];
+	useLayoutEffect(() => {
+		const buttons = cells();
+		const active = buttons.find((cell) => cell === document.activeElement) ?? buttons[0];
+		for (const cell of buttons) cell.tabIndex = cell === active ? 0 : -1;
+	});
+	const onKeyDown = (event) => {
+		if (!(event.target instanceof SVGElement) || event.target.getAttribute("role") !== "button") return;
+		const buttons = cells();
+		let next;
+		if (event.key === "Home") next = buttons[0];
+		else if (event.key === "End") next = buttons.at(-1);
+		else if ([
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(event.key)) {
+			const origin = event.target.getBoundingClientRect();
+			const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
+			const direction = event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 1;
+			let nearest = Infinity;
+			for (const cell of buttons) {
+				const box = cell.getBoundingClientRect();
+				const primary = (horizontal ? box.x - origin.x : box.y - origin.y) * direction;
+				const distance = primary + Math.abs(horizontal ? box.y - origin.y : box.x - origin.x) * 4;
+				if (primary > 1 && distance < nearest) {
+					nearest = distance;
+					next = cell;
+				}
+			}
+		} else return;
+		event.preventDefault();
+		if (!next) return;
+		for (const cell of buttons) cell.tabIndex = cell === next ? 0 : -1;
+		next.focus();
+	};
+	return {
+		ref,
+		onKeyDown
+	};
+}
+//#endregion
+export { useHeatmapNavigation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.2",
+  "version": "0.1.9-next.20",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",
@@ -19,6 +19,7 @@
     "directory": "packages/ui"
   },
   "files": [
+    "agents",
     "dist",
     "styles",
     "report.css",
@@ -32,6 +33,7 @@
     "**/*.css"
   ],
   "exports": {
+    "./agents/*": "./agents/*",
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"

package/registry.lock.json

@@ -49,6 +49,22 @@
       "copied": "2026-10-22",
       "sha256": "9028368f1363732cef765dabad2eca3ba98b608f1e237123b09df701c41c8b5a"
     },
+    {
+      "file": "src/components/registry/dashboardcn/kpi-row-card.tsx",
+      "registry": "@dashboardcn/kpi-row-card",
+      "origin": "https://dashboardcn.com/r/kpi-row-card.json",
+      "licence": "MIT, Copyright (c) 2026 dashboardcn contributors, https://github.com/NoahGdev/dashboardcn/blob/main/LICENSE",
+      "copied": "2026-10-26",
+      "sha256": "b49fa95b3efa19086b3df2e3a18f6a0d5a95204951448c5d93fc41c2bdb6326f"
+    },
+    {
+      "file": "src/components/registry/dashboardcn/sparkline.tsx",
+      "registry": "@dashboardcn/sparkline",
+      "origin": "https://dashboardcn.com/r/sparkline.json",
+      "licence": "MIT, Copyright (c) 2026 dashboardcn contributors, https://github.com/NoahGdev/dashboardcn/blob/main/LICENSE",
+      "copied": "2026-10-26",
+      "sha256": "54b43e63d866bcdf8071744df08e87f29385ba60d480ab9ee8aa1fac3eb33d5c"
+    },
     {
       "file": "src/components/registry/heatmap/calendar-heatmap.tsx",
       "registry": "@heatmap/calendar-heatmap",