@siyahi/ui 0.1.9-next.3 → 0.1.9-next.30

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/dist/lib/scatter.d.ts

@@ -0,0 +1,88 @@
+import { AxisScale } from "./ticks.js";
+//#region src/lib/scatter.d.ts
+export interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+export interface LabelCandidate {
+  key: string;
+  text: string;
+  /** The dot's centre, in pixels. */
+  cx: number;
+  cy: number;
+  /** The dot's radius, its edge included: a sized dot keeps names off all of itself. */
+  r: number;
+}
+export interface PlacedLabel {
+  key: string;
+  text: string;
+  /** Where the text starts and its baseline, with textAnchor="start". */
+  x: number;
+  y: number;
+}
+/** How labels are set: their type size in pixels and a name's width in that type. */
+export interface LabelType {
+  size: number;
+  measure: (text: string) => number;
+}
+/**
+ * Names beside dots, in the candidates' order, up to `limit`: each tries the right of its dot, then the left, above,
+ * below and the four corners, and takes the first spot inside the plot that covers no other label, no other dot and
+ * nothing `reserved` (such as a quadrant's name). A name that finds no spot is left to the tooltip, so labels never sit
+ * on top of each other.
+ */
+export declare function placeLabels(candidates: readonly LabelCandidate[], plot: Box, limit: number, { size, measure }: LabelType, reserved?: readonly Box[]): PlacedLabel[];
+/**
+ * Splits the plot into four at a value on each axis, such as zero, with an optional name in each corner. On a log
+ * axis that value must be above zero, or no split is drawn. A name that does not fit its quadrant in two lines is left out.
+ */
+export interface ScatterQuadrants {
+  x: number;
+  y: number;
+  labels?: {
+    topLeft?: string;
+    topRight?: string;
+    bottomLeft?: string;
+    bottomRight?: string;
+  };
+}
+export type QuadrantLabels = ScatterQuadrants["labels"];
+/** A split a log axis cannot place, at or below zero, or one that is not a number, is no split at all. */
+export declare function quadrantSplit(quadrants: ScatterQuadrants | undefined, xScale: AxisScale, yScale: AxisScale): ScatterQuadrants | undefined;
+/** The largest sized dot; the smallest stays big enough to see and to tap. */
+export declare const MAX_RADIUS = 20;
+/**
+ * Each dot's radius. Area, not radius, follows size, so a holding twice as large has twice the ink. A size that weighs
+ * nothing draws the smallest dot, so it cannot shrink or hide the others. Points without sizes all take `plain`.
+ */
+export declare function dotSizes(points: readonly {
+  size?: number;
+}[], plain: number): {
+  radiusOf: (p: {
+    size?: number;
+  }) => number;
+  sized: boolean;
+};
+/**
+ * Each corner's name in the plot's corner, in the band the y axis keeps clear above or below the data, wrapped to its
+ * own quadrant's width so two names on one edge never meet: where its lines are drawn, and the box they take.
+ */
+export declare function corners(plot: Box, names: QuadrantLabels, split: {
+  x: number;
+  y: number;
+} | null, type: LabelType): {
+  key: string;
+  lines: string[];
+  x: number;
+  y: number;
+  line: number;
+  box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+}[];
+//#endregion

package/dist/lib/scatter.js

@@ -0,0 +1,179 @@
+//#region src/lib/scatter.ts
+const HALO = 2;
+const GAP = 4;
+const overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+/**
+* Names beside dots, in the candidates' order, up to `limit`: each tries the right of its dot, then the left, above,
+* below and the four corners, and takes the first spot inside the plot that covers no other label, no other dot and
+* nothing `reserved` (such as a quadrant's name). A name that finds no spot is left to the tooltip, so labels never sit
+* on top of each other.
+*/
+function placeLabels(candidates, plot, limit, { size, measure }, reserved = []) {
+	const line = size * 4 / 3;
+	const dots = candidates.map(({ key, cx, cy, r }) => ({
+		key,
+		box: {
+			x: cx - r,
+			y: cy - r,
+			width: r * 2,
+			height: r * 2
+		}
+	}));
+	const taken = [...reserved];
+	const placed = [];
+	for (const { key, text, cx, cy, r: radius } of candidates) {
+		if (placed.length >= limit) break;
+		const width = measure(text) + 4;
+		const spot = [
+			{
+				x: cx + radius + GAP,
+				y: cy - line / 2,
+				width,
+				height: line
+			},
+			{
+				x: cx - radius - GAP - width,
+				y: cy - line / 2,
+				width,
+				height: line
+			},
+			{
+				x: cx - width / 2,
+				y: cy - radius - GAP - line,
+				width,
+				height: line
+			},
+			{
+				x: cx - width / 2,
+				y: cy + radius + GAP,
+				width,
+				height: line
+			},
+			{
+				x: cx + radius,
+				y: cy - radius - line,
+				width,
+				height: line
+			},
+			{
+				x: cx - radius - width,
+				y: cy - radius - line,
+				width,
+				height: line
+			},
+			{
+				x: cx + radius,
+				y: cy + radius,
+				width,
+				height: line
+			},
+			{
+				x: cx - radius - width,
+				y: cy + radius,
+				width,
+				height: line
+			}
+		].find((box) => box.x >= plot.x && box.y >= plot.y && box.x + box.width <= plot.x + plot.width && box.y + box.height <= plot.y + plot.height && !taken.some((other) => overlaps(box, other)) && !dots.some((dot) => dot.key !== key && overlaps(box, dot.box)));
+		if (!spot) continue;
+		taken.push(spot);
+		placed.push({
+			key,
+			text,
+			x: spot.x + HALO,
+			y: spot.y + size
+		});
+	}
+	return placed;
+}
+const fits = (scale, at) => scale === "linear" || at > 0;
+/** A split a log axis cannot place, at or below zero, or one that is not a number, is no split at all. */
+function quadrantSplit(quadrants, xScale, yScale) {
+	if (!quadrants || !Number.isFinite(quadrants.x) || !Number.isFinite(quadrants.y)) return void 0;
+	return fits(xScale, quadrants.x) && fits(yScale, quadrants.y) ? quadrants : void 0;
+}
+/** The largest sized dot; the smallest stays big enough to see and to tap. */
+const MAX_RADIUS = 20;
+const MIN_RADIUS = 3;
+/** A size that is not a positive number (NaN, Infinity, a negative) weighs nothing. */
+const weight = (p) => p.size !== void 0 && Number.isFinite(p.size) && p.size > 0 ? p.size : 0;
+/**
+* Each dot's radius. Area, not radius, follows size, so a holding twice as large has twice the ink. A size that weighs
+* nothing draws the smallest dot, so it cannot shrink or hide the others. Points without sizes all take `plain`.
+*/
+function dotSizes(points, plain) {
+	const largest = points.reduce((most, p) => Math.max(most, weight(p)), 0);
+	const sized = points.some((p) => p.size !== void 0);
+	const radiusOf = (p) => {
+		if (!sized || p.size === void 0) return plain;
+		return largest > 0 ? Math.max(MIN_RADIUS, 20 * Math.sqrt(weight(p) / largest)) : MIN_RADIUS;
+	};
+	return {
+		radiusOf,
+		sized
+	};
+}
+/** Words broken into lines no wider than `width`; a word wider than that keeps a line of its own. */
+function wrap(text, width, measure) {
+	const lines = [];
+	for (const word of text.split(" ")) {
+		const last = lines.at(-1);
+		if (last !== void 0 && measure(`${last} ${word}`) <= width) lines[lines.length - 1] = `${last} ${word}`;
+		else lines.push(word);
+	}
+	return lines;
+}
+/**
+* Each corner's name in the plot's corner, in the band the y axis keeps clear above or below the data, wrapped to its
+* own quadrant's width so two names on one edge never meet: where its lines are drawn, and the box they take.
+*/
+function corners(plot, names, split, type) {
+	if (!names || !split) return [];
+	const line = type.size * 4 / 3;
+	const inset = 6;
+	return [
+		[
+			names.topLeft,
+			"left",
+			"top"
+		],
+		[
+			names.topRight,
+			"right",
+			"top"
+		],
+		[
+			names.bottomLeft,
+			"left",
+			"bottom"
+		],
+		[
+			names.bottomRight,
+			"right",
+			"bottom"
+		]
+	].flatMap(([text, side, edge]) => {
+		if (!text) return [];
+		const room = (side === "left" ? split.x - plot.x : plot.x + plot.width - split.x) - 12;
+		const lines = wrap(text, Math.max(room, 0), type.measure);
+		const width = Math.max(...lines.map(type.measure));
+		if (lines.length > 2 || width > room) return [];
+		const height = lines.length * line;
+		const x = side === "left" ? plot.x + inset : plot.x + plot.width - inset - width;
+		const top = edge === "top" ? plot.y + inset : plot.y + plot.height - inset - height;
+		return [{
+			key: `${side}-${edge}`,
+			lines,
+			x,
+			y: top + type.size,
+			line,
+			box: {
+				x,
+				y: top,
+				width,
+				height
+			}
+		}];
+	});
+}
+//#endregion
+export { MAX_RADIUS, corners, dotSizes, placeLabels, quadrantSplit };

package/dist/lib/ticks.d.ts

@@ -0,0 +1,27 @@
+//#region src/lib/ticks.d.ts
+/**
+ * Ticks for a log axis at 1, 2 and 5 times a power of ten, from the largest at or under min to the smallest at or
+ * over max, so the axis ends on a tick and every label reads as a round number.
+ */
+export declare function logTicks(min: number, max: number): number[];
+/**
+ * Ticks for a linear axis that just covers min to max, about `count` of them, a step of 1, 2, 2.5 or 5 times a power
+ * of ten: −50% to +75% by 25s, never −50% to +150% because the step had to be 50. Values that differ only by float
+ * noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
+ */
+export declare function linearTicks(min: number, max: number, count?: number): number[];
+/** How an axis spaces its values: evenly, or by powers of ten for values that run from tiny to large. */
+export type AxisScale = "linear" | "log";
+/** An axis' ticks for its scale: round steps either way, so a linear axis starting at 0.4% reads 0%, 5%, 10%. */
+export declare const ticksFor: (scale: AxisScale, min: number, max: number) => number[];
+/** A log axis has no place for zero or below, so it can draw a set of values only when every one is above zero. */
+export declare const fitsLog: (values: readonly number[]) => boolean;
+/**
+ * A log axis' ends and ticks: a page's fixed range when it gives one, with the 1, 2 and 5 ticks inside it, or else the
+ * ticks that just cover the values and their outer two as the ends.
+ */
+export declare function logAxis(values: readonly number[], range?: readonly [number, number]): {
+  domain: [number, number];
+  ticks: number[];
+};
+//#endregion

package/dist/lib/ticks.js

@@ -0,0 +1,67 @@
+//#region src/lib/ticks.ts
+/**
+* Ticks for a log axis at 1, 2 and 5 times a power of ten, from the largest at or under min to the smallest at or
+* over max, so the axis ends on a tick and every label reads as a round number.
+*/
+function logTicks(min, max) {
+	if (!(min > 0) || !Number.isFinite(max) || !(max >= min)) return [];
+	const ticks = [];
+	for (let decade = Math.floor(Math.log10(min));; decade++) for (const step of [
+		1,
+		2,
+		5
+	]) {
+		const tick = Number((step * 10 ** decade).toPrecision(12));
+		if (Number(((step === 5 ? 10 : step === 2 ? 5 : 2) * 10 ** decade).toPrecision(12)) <= min) continue;
+		ticks.push(tick);
+		if (tick >= max) return ticks;
+	}
+}
+const clean = (value) => Number(value.toPrecision(12)) || 0;
+/**
+* Ticks for a linear axis that just covers min to max, about `count` of them, a step of 1, 2, 2.5 or 5 times a power
+* of ten: −50% to +75% by 25s, never −50% to +150% because the step had to be 50. Values that differ only by float
+* noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
+*/
+function linearTicks(min, max, count = 5) {
+	if (!Number.isFinite(min) || !Number.isFinite(max) || max < min) return [];
+	if (max - min <= Math.max(Math.abs(min), Math.abs(max)) * 1e-9) return [clean(min)];
+	const rough = (max - min) / (count - 1);
+	const power = 10 ** Math.floor(Math.log10(rough));
+	const step = ([
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].find((m) => m * power >= rough * (1 - 1e-9)) ?? 10) * power;
+	const first = Math.floor(min / step + 1e-9);
+	const last = Math.ceil(max / step - 1e-9);
+	return Array.from({ length: last - first + 1 }, (_, i) => clean((first + i) * step));
+}
+/** An axis' ticks for its scale: round steps either way, so a linear axis starting at 0.4% reads 0%, 5%, 10%. */
+const ticksFor = (scale, min, max) => scale === "log" ? logTicks(min, max) : linearTicks(min, max);
+/** A log axis has no place for zero or below, so it can draw a set of values only when every one is above zero. */
+const fitsLog = (values) => values.length > 0 && values.every((value) => value > 0);
+/**
+* A log axis' ends and ticks: a page's fixed range when it gives one, with the 1, 2 and 5 ticks inside it, or else the
+* ticks that just cover the values and their outer two as the ends.
+*/
+function logAxis(values, range) {
+	if (range) {
+		const [low, high] = range;
+		return {
+			domain: [low, high],
+			ticks: logTicks(low, high).filter((tick) => tick >= low && tick <= high)
+		};
+	}
+	const low = Math.min(...values);
+	const high = Math.max(...values);
+	const ticks = logTicks(low, high);
+	return {
+		domain: [ticks[0] ?? low, ticks.at(-1) ?? high],
+		ticks
+	};
+}
+//#endregion
+export { fitsLog, linearTicks, logAxis, logTicks, ticksFor };

package/dist/lib/tone.d.ts

@@ -0,0 +1,36 @@
+//#region src/lib/tone.d.ts
+/**
+ * The tones a box can take: a faint wash of the colour inside a full border of it, with the colour itself kept for
+ * an icon or a dot. Text inside stays in the text colours: small coloured text on its own wash falls under 4.5:1.
+ * Callout, StatusAlert and StatusBadge share these, so a warning looks the same wherever it appears.
+ */
+export declare const TONES: {
+  readonly neutral: {
+    readonly box: "border-border bg-muted/50";
+    readonly ink: "text-muted-foreground!";
+    readonly dot: "bg-muted-foreground";
+  };
+  readonly accent: {
+    readonly box: "border-chart-1/35 bg-chart-1/8";
+    readonly ink: "text-link!";
+    readonly dot: "bg-link";
+  };
+  readonly warning: {
+    readonly box: "border-warning/45 bg-warning/10";
+    readonly ink: "text-warning!";
+    readonly dot: "bg-warning";
+  };
+  readonly positive: {
+    readonly box: "border-positive/40 bg-positive/8";
+    readonly ink: "text-positive!";
+    readonly dot: "bg-positive";
+  };
+  readonly negative: {
+    readonly box: "border-negative/40 bg-negative/8";
+    readonly ink: "text-negative!";
+    readonly dot: "bg-negative";
+  };
+};
+/** neutral for information, accent for a key point, warning for a caution, positive and negative for good and bad. */
+export type Tone = keyof typeof TONES;
+//#endregion

package/dist/lib/tone.js

@@ -0,0 +1,35 @@
+//#region src/lib/tone.ts
+/**
+* The tones a box can take: a faint wash of the colour inside a full border of it, with the colour itself kept for
+* an icon or a dot. Text inside stays in the text colours: small coloured text on its own wash falls under 4.5:1.
+* Callout, StatusAlert and StatusBadge share these, so a warning looks the same wherever it appears.
+*/
+const TONES = {
+	neutral: {
+		box: "border-border bg-muted/50",
+		ink: "text-muted-foreground!",
+		dot: "bg-muted-foreground"
+	},
+	accent: {
+		box: "border-chart-1/35 bg-chart-1/8",
+		ink: "text-link!",
+		dot: "bg-link"
+	},
+	warning: {
+		box: "border-warning/45 bg-warning/10",
+		ink: "text-warning!",
+		dot: "bg-warning"
+	},
+	positive: {
+		box: "border-positive/40 bg-positive/8",
+		ink: "text-positive!",
+		dot: "bg-positive"
+	},
+	negative: {
+		box: "border-negative/40 bg-negative/8",
+		ink: "text-negative!",
+		dot: "bg-negative"
+	}
+};
+//#endregion
+export { TONES };

package/dist/lib/treemap.d.ts

@@ -18,10 +18,5 @@ export declare function layout<T extends {
   weight: number;
   group?: string;
 }>(items: T[], width: number, height: number): Layout<T>;
-export declare const HEAT_STEPS = 5;
-/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
-export declare const heatRange: (range?: number) => number;
-export declare const heatFill: (side: "positive" | "negative", step: number) => string;
-export declare function heat(change: number | null, range?: number): string;
 //#endregion
 export {};

package/dist/lib/treemap.js

@@ -31,15 +31,5 @@ function layout(items, width, height) {
 		}])
 	};
 }
-const DEFAULT_RANGE = .05;
-const HEAT_STEPS = 5;
-/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
-const heatRange = (range = DEFAULT_RANGE) => Number.isFinite(range) && range > 0 ? range : DEFAULT_RANGE;
-const heatFill = (side, step) => `color-mix(in oklab, var(--${side}) ${step * 12}%, var(--card))`;
-function heat(change, range) {
-	if (!change) return "var(--muted)";
-	const step = Math.min(5, Math.ceil(Math.abs(change) / heatRange(range) * 5));
-	return heatFill(change > 0 ? "positive" : "negative", step);
-}
 //#endregion
-export { HEAT_STEPS, heat, heatFill, heatRange, layout };
+export { layout };

package/dist/lib/use-element-width.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from "react";
+//#region src/lib/use-element-width.d.ts
+/** The element's content width, kept current as it resizes; 0 until it is first measured. */
+export declare function useElementWidth<T extends Element>(): [RefObject<T | null>, number];
+//#endregion

package/dist/lib/use-element-width.js

@@ -0,0 +1,15 @@
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/lib/use-element-width.ts
+/** The element's content width, kept current as it resizes; 0 until it is first measured. */
+function useElementWidth() {
+	const ref = useRef(null);
+	const [width, setWidth] = useState(0);
+	useLayoutEffect(() => {
+		const observer = new ResizeObserver(([entry]) => setWidth(entry?.contentRect.width ?? 0));
+		if (ref.current) observer.observe(ref.current);
+		return () => observer.disconnect();
+	}, []);
+	return [ref, width];
+}
+//#endregion
+export { useElementWidth };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.3",
+  "version": "0.1.9-next.30",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",
@@ -19,11 +19,13 @@
     "directory": "packages/ui"
   },
   "files": [
+    "agents",
     "dist",
     "styles",
     "report.css",
     "registry.lock.json",
     "README.md",
+    "DESIGN.md",
     "LICENSE",
     "THIRD_PARTY_NOTICES.md"
   ],
@@ -32,6 +34,7 @@
     "**/*.css"
   ],
   "exports": {
+    "./agents/*": "./agents/*",
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
@@ -63,6 +66,7 @@
     "@types/node": "24.19.2",
     "@types/react": "~19.3.0",
     "@types/react-dom": "~19.3.0",
+    "happy-dom": "^21.0.3",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "shadcn": "4.22.1",

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",