@siyahi/ui 0.1.9-next.17 → 0.1.9-next.19

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.17",
+  "version": "0.1.9-next.19",
   "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/styles/siyahi.css

@@ -205,6 +205,30 @@
   }
 }
 
+/* Touch targets follow input capability, including touch laptops. */
+@media (pointer: coarse) {
+  :is(
+    [class~="group/button"],
+    [data-slot="toggle"],
+    [data-slot="toggle-group-item"],
+    [data-slot="select-trigger"],
+    [data-slot="tabs-trigger"],
+    [data-slot="input-group-button"]
+  ) {
+    min-height: --spacing(11);
+    min-width: --spacing(11);
+  }
+  :is([data-slot="input"], [data-slot="textarea"], [data-slot="input-group"], [data-slot="input-group-control"]) {
+    min-height: --spacing(11);
+  }
+  :is([data-slot="input"], [data-slot="textarea"], [data-slot="input-group-control"], [data-slot="command-input"]) {
+    font-size: 1rem;
+  }
+  [role="search"] > [data-slot="input"] {
+    padding-right: --spacing(14);
+  }
+}
+
 /*
  * On a narrow card a header action (a toggle, a button) drops under the title
  * and description, left-aligned. Stock CardHeader keeps the action in its own