@rinzai/zen 0.6.1 → 0.7.0

package/dist/toast/index.js

@@ -2,86 +2,97 @@
 import { cx as e } from "../utils/cx.js";
 import { useGraphicsMode as t } from "../utils/graphics.js";
 import { AlertIcon as n, CheckIcon as r, InfoIcon as i } from "../utils/status-icons.js";
-import { createContext as a, useCallback as o, useContext as s, useEffect as c, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { createPortal as p } from "react-dom";
+import a from "../icons/micro/x-mark.js";
+import { createContext as o, useCallback as s, useContext as c, useEffect as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { createPortal as h } from "react-dom";
 //#region packages/toast/index.tsx
-var m = 5e3, h = 3, g = 300, _ = 14, v = .05, y = 10, b = 60, x = .45, S = a(null), C = a(null);
-function w({ children: n, offset: r, viewportClassName: i }) {
+var g = 5e3, _ = 3, v = 300, y = 14, b = .05, x = 10, S = 60, C = .45, w = o(null), T = o(null);
+function E({ children: n, offset: r, viewportClassName: i }) {
 	t();
-	let [a, s] = u([]), b = l(0), x = l(/* @__PURE__ */ new Map()), w = l(/* @__PURE__ */ new Set()), [T, D] = u([]), [O, A] = u(!1);
-	c(() => A(!0), []);
-	let j = o((e) => (D((t) => [...t, e]), () => D((t) => t.filter((t) => t !== e))), []), M = T.at(-1) ?? (O ? document.body : null), [N, P] = u({}), F = o((e, t) => P((n) => n[e] === t ? n : {
+	let [a, o] = d([]), c = u(0), f = u(/* @__PURE__ */ new Map()), S = u(/* @__PURE__ */ new Set()), [C, E] = d([]), [D, k] = d(!1);
+	l(() => k(!0), []);
+	let A = s((e) => (E((t) => [...t, e]), () => E((t) => t.filter((t) => t !== e))), []), M = C.at(-1) ?? (D ? document.body : null), [N, P] = d({}), F = s((e, t) => P((n) => n[e] === t ? n : {
 		...n,
 		[e]: t
-	}), []), [I, L] = u(!1), [R, z] = u(!1), B = o((e, t = "fade") => {
-		s((n) => n.map((n) => n.id === e ? {
+	}), []), [I, L] = d(!1), [R, z] = d(!1), B = u(null), V = s((e) => {
+		B.current = e, O(e);
+	}, []);
+	l(() => {
+		let e = (e) => {
+			e.key === "F8" && B.current?.querySelector(".zen__toast:not([inert])") && (e.preventDefault(), B.current.focus());
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, []);
+	let H = s((e, t = "fade") => {
+		o((n) => n.map((n) => n.id === e ? {
 			...n,
 			leaving: t
 		} : n)), setTimeout(() => {
-			s((t) => {
+			o((t) => {
 				let n = t.filter((t) => t.id !== e);
 				return n.length || L(!1), n;
-			}), P(({ [e]: t, ...n }) => n), x.current.delete(e), w.current.delete(e);
-		}, g);
-	}, []), V = o((e, { description: t, tone: n = "info", action: r, timeout: i } = {}) => {
-		let a = b.current++, o = {
+			}), P(({ [e]: t, ...n }) => n), f.current.delete(e), S.current.delete(e);
+		}, v);
+	}, []), U = s((e, { description: t, tone: n = "info", action: r, timeout: i } = {}) => {
+		let a = c.current++, s = {
 			id: a,
 			title: e,
 			description: t,
 			tone: n,
 			action: r,
-			timeout: i ?? (r ? 1e4 : m)
+			timeout: i ?? (r ? 1e4 : g)
 		};
-		return s((e) => [...e, o]), a;
-	}, []), H = a.filter((e) => !e.leaving), U = (I || R) && H.length > 0, W = H.at(-1), G = W ? N[W.id] : void 0, K = H.slice(-3), q = U ? K.reduce((e, t) => e + (N[t.id] ?? 0), 0) + y * (K.length - 1) : (G ?? 0) + _ * (K.length - 1), J = (e) => {
-		let t = H.filter((t) => t.id > e.id), n = t.length;
+		return o((e) => [...e, s]), a;
+	}, []), W = a.filter((e) => !e.leaving), G = (I || R) && W.length > 0, K = W.at(-1), q = K ? N[K.id] : void 0, J = W.slice(-3), Y = G ? J.reduce((e, t) => e + (N[t.id] ?? 0), 0) + x * (J.length - 1) : (q ?? 0) + y * (J.length - 1), X = (e) => {
+		let t = W.filter((t) => t.id > e.id), n = t.length;
 		return {
 			index: n,
 			front: n === 0,
-			hidden: n >= h,
-			y: U ? -(t.reduce((e, t) => e + (N[t.id] ?? 0), 0) + y * n) : -14 * Math.min(n, 2),
-			scale: U ? 1 : 1 - v * Math.min(n, 2),
-			height: !U && n > 0 ? G : void 0
+			hidden: n >= _,
+			y: G ? -(t.reduce((e, t) => e + (N[t.id] ?? 0), 0) + x * n) : -14 * Math.min(n, 2),
+			scale: G ? 1 : 1 - b * Math.min(n, 2),
+			height: !G && n > 0 ? q : void 0
 		};
 	};
-	return /* @__PURE__ */ f(S.Provider, {
-		value: V,
-		children: [/* @__PURE__ */ d(C.Provider, {
-			value: j,
+	return /* @__PURE__ */ m(w.Provider, {
+		value: U,
+		children: [/* @__PURE__ */ p(T.Provider, {
+			value: A,
 			children: n
-		}), M && p(/* @__PURE__ */ d("section", {
-			ref: E,
+		}), M && h(/* @__PURE__ */ p("section", {
+			ref: V,
 			popover: "manual",
-			"aria-label": "Notifications",
-			"data-expanded": U || void 0,
+			tabIndex: -1,
+			"aria-label": "Notifications (F8)",
+			"data-expanded": G || void 0,
 			onMouseEnter: () => L(!0),
 			onMouseLeave: () => L(!1),
 			onFocus: () => z(!0),
 			onBlur: (e) => {
 				e.currentTarget.contains(e.relatedTarget) || z(!1);
 			},
-			className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit md:bottom-5 md:w-[24rem]", "transition-[height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]", i),
+			className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit outline-hidden md:bottom-5 md:w-[24rem]", "transition-[height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]", i),
 			style: {
-				height: q,
+				height: Y,
 				...r && { "--zen-toast-offset": r }
 			},
-			children: a.map((e, t) => /* @__PURE__ */ d(k, {
+			children: a.map((e, t) => /* @__PURE__ */ p(j, {
 				toast: e,
-				layout: J(e),
+				layout: X(e),
 				z: t + 1,
-				paused: U,
-				onDismiss: B,
+				paused: G,
+				onDismiss: H,
 				onHeight: F,
-				clocks: x.current,
-				entered: w.current
+				clocks: f.current,
+				entered: S.current
 			}, e.id))
 		}), M)]
 	});
 }
-function T(e, t) {
-	let n = s(C);
-	c(() => {
+function D(e, t) {
+	let n = c(T);
+	l(() => {
 		let r = e.current;
 		if (n && t && r) return n(r);
 	}, [
@@ -90,17 +101,17 @@ function T(e, t) {
 		e
 	]);
 }
-function E(e) {
+function O(e) {
 	if (e?.showPopover) try {
 		e.showPopover();
 	} catch {}
 }
-function D() {
-	let e = s(S);
+function k() {
+	let e = c(w);
 	if (!e) throw Error("useToast() needs a <ToastProvider> above it");
 	return e;
 }
-var O = {
+var A = {
 	success: {
 		icon: r,
 		ring: "border-primary/30",
@@ -123,126 +134,128 @@ var O = {
 		glow: "shadow-[var(--toast-shadow)]"
 	}
 };
-function k({ toast: t, layout: n, z: r, paused: i, onDismiss: a, onHeight: o, clocks: s, entered: p }) {
-	let m = O[t.tone] ?? O.info, h = m.icon, g = l(null), _ = l(null), [v] = u(() => !p.has(t.id));
-	c(() => {
-		g.current?.isConnected && p.add(t.id);
-	}, [p, t.id]), s.has(t.id) || s.set(t.id, {
+function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, clocks: c, entered: h }) {
+	let g = A[t.tone] ?? A.info, _ = g.icon, v = u(null), y = u(null), [b] = d(() => !h.has(t.id));
+	l(() => {
+		v.current?.isConnected && h.add(t.id);
+	}, [h, t.id]);
+	let [x, w] = d(!1);
+	l(() => {
+		if (!b) return;
+		let e = requestAnimationFrame(() => e = requestAnimationFrame(() => w(!0)));
+		return () => cancelAnimationFrame(e);
+	}, [b]), c.has(t.id) || c.set(t.id, {
 		spent: 0,
 		since: null
 	});
-	let y = s.get(t.id), [S] = u(() => y.spent + (y.since === null ? 0 : Date.now() - y.since));
-	c(() => {
-		let e = _.current;
+	let T = c.get(t.id), [E] = d(() => T.spent + (T.since === null ? 0 : Date.now() - T.since));
+	l(() => {
+		let e = y.current;
 		if (!e) return;
-		let n = () => o(t.id, e.offsetHeight);
+		let n = () => s(t.id, e.offsetHeight);
 		n();
 		let r = new ResizeObserver(n);
 		return r.observe(e), () => r.disconnect();
-	}, [o, t.id]), c(() => {
+	}, [s, t.id]), l(() => {
 		if (!t.timeout || i || t.leaving) return;
-		y.since = Date.now();
-		let e = setTimeout(() => a(t.id), Math.max(0, t.timeout - y.spent));
+		T.since = Date.now();
+		let e = setTimeout(() => o(t.id), Math.max(0, t.timeout - T.spent));
 		return () => {
-			clearTimeout(e), y.since !== null && (y.spent += Date.now() - y.since), y.since = null;
+			clearTimeout(e), T.since !== null && (T.spent += Date.now() - T.since), T.since = null;
 		};
 	}, [
 		i,
 		t.id,
 		t.timeout,
 		t.leaving,
-		a,
-		y
+		o,
+		T
 	]);
-	let C = l(null), w = (e) => {
-		t.leaving || e.button !== 0 || e.target.closest("button") || (C.current = {
+	let D = u(null), O = (e) => {
+		t.leaving || e.button !== 0 || e.target.closest("button") || (D.current = {
 			x: e.clientX,
 			dx: 0,
 			t: e.timeStamp,
 			speed: 0
 		}, e.currentTarget.setPointerCapture(e.pointerId), e.currentTarget.dataset.swiping = "");
-	}, T = (e) => {
-		if (!C.current) return;
-		let t = C.current, n = e.clientX - t.x;
+	}, k = (e) => {
+		if (!D.current) return;
+		let t = D.current, n = e.clientX - t.x;
 		t.speed = (n - t.dx) / Math.max(1, e.timeStamp - t.t), t.dx = n, t.t = e.timeStamp, e.currentTarget.style.setProperty("--zen-swipe", `${n > 0 ? n : n / 6}px`);
-	}, E = (e) => {
-		let n = C.current;
-		n && (C.current = null, delete e.currentTarget.dataset.swiping, n.dx > b || n.dx > 0 && n.speed > x ? a(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
+	}, j = (e) => {
+		let n = D.current;
+		n && (D.current = null, delete e.currentTarget.dataset.swiping, n.dx > S || n.dx > 0 && n.speed > C ? o(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
 	};
-	return /* @__PURE__ */ f("div", {
-		ref: g,
+	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", {
+		ref: v,
 		role: t.tone === "error" ? "alert" : "status",
-		"aria-atomic": "true",
+		"aria-live": "off",
 		"data-front": n.front || void 0,
 		"data-behind": !n.front && n.height !== void 0 || void 0,
 		inert: n.hidden || !!t.leaving,
-		onPointerDown: w,
-		onPointerMove: T,
-		onPointerUp: E,
-		onPointerCancel: E,
-		className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "transition-[transform,translate,opacity,height] duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-swiping:transition-none", v && "starting:translate-y-full starting:opacity-0", n.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", m.ring, m.glow),
+		onPointerDown: O,
+		onPointerMove: k,
+		onPointerUp: j,
+		onPointerCancel: j,
+		className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "transition-[transform,translate,opacity,height] duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-swiping:transition-none", b && "starting:translate-y-full starting:opacity-0", n.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", g.ring, g.glow),
 		style: {
 			zIndex: r,
 			height: n.height,
 			transform: `translateX(var(--zen-swipe, 0px)) translateY(${n.y}px) scale(${n.scale})`
 		},
-		children: [/* @__PURE__ */ f("div", {
-			ref: _,
+		children: [/* @__PURE__ */ m("div", {
+			ref: y,
 			className: "flex items-start gap-3 p-3.5 pr-10 transition-opacity duration-300 group-data-behind:opacity-0",
 			children: [
-				/* @__PURE__ */ d("span", {
-					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", m.badge),
+				/* @__PURE__ */ p("span", {
+					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", g.badge),
 					"aria-hidden": !0,
-					children: /* @__PURE__ */ d(h, { className: "size-4" })
+					children: /* @__PURE__ */ p(_, { className: "size-4" })
 				}),
-				/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ m("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5",
 					children: [
-						/* @__PURE__ */ d("div", {
+						/* @__PURE__ */ p("div", {
 							className: "text-sm font-semibold",
 							children: t.title
 						}),
-						t.description && /* @__PURE__ */ d("div", {
+						t.description && /* @__PURE__ */ p("div", {
 							className: "text-muted-foreground text-sm leading-5",
 							children: t.description
 						}),
-						t.action && /* @__PURE__ */ d("button", {
+						t.action && /* @__PURE__ */ p("button", {
 							type: "button",
 							onClick: () => {
-								t.action?.onClick(), a(t.id);
+								t.action?.onClick(), o(t.id);
 							},
-							className: "border-tint/10 bg-tint/[0.06] hover:bg-tint/[0.12] focus-visible:ring-ring/50 mt-2 self-start rounded-lg border px-3 py-1 text-xs font-medium outline-hidden transition-colors focus-visible:ring-2",
+							className: "border-tint/10 bg-tint/[0.06] hover:bg-tint/[0.12] focus-visible:ring-ring/50 mt-2 cursor-pointer self-start rounded-lg border px-3 py-1 text-xs font-medium outline-hidden transition-colors focus-visible:ring-2",
 							children: t.action.label
 						})
 					]
 				}),
-				/* @__PURE__ */ d("button", {
+				/* @__PURE__ */ p("button", {
 					type: "button",
 					"aria-label": "Dismiss",
-					onClick: () => a(t.id),
-					className: "text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 absolute top-2.5 right-2.5 grid size-7 place-items-center rounded-lg outline-hidden transition-colors focus-visible:ring-2",
-					children: /* @__PURE__ */ d("svg", {
-						viewBox: "0 0 16 16",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "1.8",
-						strokeLinecap: "round",
-						className: "size-3.5",
-						"aria-hidden": !0,
-						children: /* @__PURE__ */ d("path", { d: "m4 4 8 8M12 4l-8 8" })
-					})
+					onClick: () => o(t.id),
+					className: "text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 absolute top-2.5 right-2.5 grid size-7 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors focus-visible:ring-2",
+					children: /* @__PURE__ */ p(a, { className: "size-3.5" })
 				})
 			]
-		}), t.timeout > 0 && /* @__PURE__ */ d("span", {
+		}), t.timeout > 0 && /* @__PURE__ */ p("span", {
 			"aria-hidden": !0,
-			className: e("zen__toast-timer absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-60 transition-opacity group-data-behind:opacity-0", m.bar),
+			className: e("zen__toast-timer absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-60 transition-opacity group-data-behind:opacity-0", g.bar),
 			style: {
 				animationDuration: `${t.timeout}ms`,
-				animationDelay: `${-S}ms`,
+				animationDelay: `${-E}ms`,
 				animationPlayState: i ? "paused" : void 0
 			}
 		})]
-	});
+	}), /* @__PURE__ */ p("span", {
+		className: "sr-only",
+		"aria-live": t.tone === "error" ? "assertive" : "polite",
+		"aria-atomic": "true",
+		children: x && [t.title, t.description].filter(Boolean).join(". ")
+	})] });
 }
 //#endregion
-export { w as default, D as useToast, T as useToastHost };
+export { E as default, k as useToast, D as useToastHost };

package/dist/tree/index.d.ts

@@ -1,5 +1,5 @@
 import { TableCellProps } from '../table';
-import { ComponentProps, CSSProperties, ReactNode } from 'react';
+import { ComponentProps, CSSProperties, FocusEvent, KeyboardEvent, ReactNode } from 'react';
 /** One visible row of a tree. */
 export interface TreeRowData<T> {
     item: T;
@@ -9,11 +9,19 @@ export interface TreeRowData<T> {
     parentKey: string | null;
     hasChildren: boolean;
     expanded: boolean;
+    /** Its place among its siblings (1-based), and how many siblings there are. */
+    position: number;
+    siblings: number;
 }
 /**
  * Headless tree for tables and lists: turns nested items into the rows that
  * are visible (children of collapsed rows are skipped), and expands/collapses
  * them. With the Tree* parts, children grow in and shrink away smoothly.
+ *
+ * Put `tree.tableProps` on the Table: it's then a tree grid (WAI-ARIA), one tab
+ * stop whose rows the keyboard moves between. Up and Down go row to row, Home
+ * and End to the first and last, Right opens a row (or goes to its first
+ * child), Left closes it (or goes to its parent).
  */
 export declare function useTree<T>({ items, getKey, getChildren, defaultExpanded, rowHeight }: UseTreeOptions<T>): {
     rows: TreeRowData<T>[];
@@ -25,10 +33,20 @@ export declare function useTree<T>({ items, getKey, getChildren, defaultExpanded
     expandAll: () => void;
     /** Closes every row. */
     collapseAll: () => void;
+    /** For the Table: a tree grid. */
+    tableProps: {
+        role: "treegrid";
+    };
     rowProps: (row: TreeRowData<T>) => {
         'aria-level': number;
         'aria-expanded': boolean | undefined;
+        'aria-posinset': number;
+        'aria-setsize': number;
         'data-depth': number;
+        'data-tree-key': string;
+        tabIndex: number;
+        onFocus: (e: FocusEvent<HTMLElement>) => void;
+        onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
         className: string;
         style: CSSProperties;
         onAnimationEnd: (e: {
@@ -38,12 +56,13 @@ export declare function useTree<T>({ items, getKey, getChildren, defaultExpanded
     toggleProps: (row: TreeRowData<T>) => {
         expanded: boolean;
         onToggle: () => void;
+        tabIndex: number;
     };
     rowHeight: number;
 };
 export type Tree<T> = ReturnType<typeof useTree<T>>;
-/** A table row wired to useTree: tree semantics (aria-level, aria-expanded) and the open/close animation. */
-export declare function TreeRow<T>({ row, tree, className, style, ...rest }: TreeRowProps<T>): import('react').JSX.Element;
+/** A table row wired to useTree: tree semantics, the keyboard and the open/close animation. */
+export declare function TreeRow<T>({ row, tree, className, style, onFocus, onKeyDown, ...rest }: TreeRowProps<T>): import('react').JSX.Element;
 /** A cell in a TreeRow: its content sits in a box whose height animates as groups open and close. */
 export declare function TreeCell({ numeric, className, children, ...rest }: TableCellProps): import('react').JSX.Element;
 /** The first column's content: indented by depth, with the row's toggle (or a spacer, so labels line up). */

package/dist/tree/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tree/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tree/index.tsx"],"names":[],"mappings":"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"}

package/dist/tree/index.js

@@ -1,39 +1,42 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
 import { TableCell as t, TableRow as n } from "../table/index.js";
-import { useCallback as r, useMemo as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import r from "../icons/micro/chevron-right.js";
+import { useCallback as i, useMemo as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region packages/tree/index.tsx
-function l({ items: t, getKey: n, getChildren: s, defaultExpanded: c = !0, rowHeight: l = 36 }) {
-	let [u, d] = o(() => /* @__PURE__ */ new Set()), [f, p] = o(null), [m, h] = o(null), g = a(null), _ = r((e) => u.has(e) !== c, [u, c]), v = i(() => {
-		let e = [], r = (t, i, a) => {
-			for (let o of t) {
-				let t = n(o), c = s(o), l = !!c?.length, u = l && _(t);
+function u({ items: t, getKey: n, getChildren: r, defaultExpanded: c = !0, rowHeight: l = 36 }) {
+	let [u, d] = s(() => /* @__PURE__ */ new Set()), [f, p] = s(null), [m, h] = s(null), g = o(null), _ = i((e) => u.has(e) !== c, [u, c]), v = a(() => {
+		let e = [], i = (t, a, o) => {
+			t.forEach((s, c) => {
+				let l = n(s), u = r(s), d = !!u?.length, f = d && _(l);
 				e.push({
-					item: o,
-					key: t,
-					depth: i,
-					parentKey: a,
-					hasChildren: l,
-					expanded: u
-				}), u && r(c, i + 1, t);
-			}
+					item: s,
+					key: l,
+					depth: a,
+					parentKey: o,
+					hasChildren: d,
+					expanded: f,
+					position: c + 1,
+					siblings: t.length
+				}), f && i(u, a + 1, l);
+			});
 		};
-		return r(t, 0, null), e;
+		return i(t, 0, null), e;
 	}, [
 		t,
 		n,
-		s,
+		r,
 		_
 	]), y = () => {
-		let e = [], r = (t) => {
-			for (let i of t) {
-				let t = s(i);
-				t?.length && (e.push(n(i)), r(t));
+		let e = [], i = (t) => {
+			for (let a of t) {
+				let t = r(a);
+				t?.length && (e.push(n(a)), i(t));
 			}
 		};
-		return r(t), e;
-	}, b = r((e, t) => d((n) => {
+		return i(t), e;
+	}, b = i((e, t) => d((n) => {
 		let r = new Set(n);
 		return t === c ? r.delete(e) : r.add(e), r;
 	}), [c]), x = () => typeof window < "u" && (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || document.documentElement.classList.contains("reduce-motion")), S = (e) => {
@@ -54,6 +57,17 @@ function l({ items: t, getKey: n, getChildren: s, defaultExpanded: c = !0, rowHe
 			};
 			g.current = t, setTimeout(t, 500);
 		}
+	}, [C, w] = s(null), T = v.some((e) => e.key === C) ? C : v[0]?.key ?? null, E = (e) => e.expanded && m !== e.key, D = (e, t) => {
+		if (t.target !== t.currentTarget) return;
+		let n = v.indexOf(e), r;
+		if (t.key === "ArrowDown") r = v[n + 1];
+		else if (t.key === "ArrowUp") r = v[n - 1];
+		else if (t.key === "Home") r = v[0];
+		else if (t.key === "End") r = v.at(-1);
+		else if (t.key === "ArrowRight" && e.hasChildren) E(e) ? r = v[n + 1] : S(e.key);
+		else if (t.key === "ArrowLeft") E(e) ? S(e.key) : r = v.find((t) => t.key === e.parentKey);
+		else return;
+		t.preventDefault(), r && t.currentTarget.closest("[role=\"treegrid\"], table")?.querySelector(`[data-tree-key="${CSS.escape(r.key)}"]`)?.focus();
 	};
 	return {
 		rows: v,
@@ -63,73 +77,79 @@ function l({ items: t, getKey: n, getChildren: s, defaultExpanded: c = !0, rowHe
 		collapse: (e) => b(e, !1),
 		expandAll: () => d(c ? /* @__PURE__ */ new Set() : new Set(y())),
 		collapseAll: () => d(c ? new Set(y()) : /* @__PURE__ */ new Set()),
+		tableProps: { role: "treegrid" },
 		rowProps: (t) => ({
 			"aria-level": t.depth + 1,
-			"aria-expanded": t.hasChildren ? t.expanded : void 0,
+			"aria-expanded": t.hasChildren ? E(t) : void 0,
+			"aria-posinset": t.position,
+			"aria-setsize": t.siblings,
 			"data-depth": t.depth,
-			className: e(f && t.parentKey === f.key && "zen__tree-row-enter", m && t.parentKey === m && "zen__tree-row-exit"),
+			"data-tree-key": t.key,
+			tabIndex: t.key === T ? 0 : -1,
+			onFocus: (e) => {
+				e.target === e.currentTarget && w(t.key);
+			},
+			onKeyDown: (e) => D(t, e),
+			className: e("outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60", f && t.parentKey === f.key && "zen__tree-row-enter", m && t.parentKey === m && "zen__tree-row-exit"),
 			style: { "--row-h": `${l - 1}px` },
 			onAnimationEnd: (e) => {
 				e.animationName === "zen-row-close" && m && t.parentKey === m && g.current?.();
 			}
 		}),
 		toggleProps: (e) => ({
-			expanded: e.expanded && m !== e.key,
-			onToggle: () => S(e.key)
+			expanded: E(e),
+			onToggle: () => S(e.key),
+			tabIndex: -1
 		}),
 		rowHeight: l
 	};
 }
-function u({ row: t, tree: r, className: i, style: a, ...o }) {
-	let c = r.rowProps(t);
-	return /* @__PURE__ */ s(n, {
-		...o,
-		...c,
-		className: e(c.className, i),
+function d({ row: t, tree: r, className: i, style: a, onFocus: o, onKeyDown: s, ...l }) {
+	let u = r.rowProps(t);
+	return /* @__PURE__ */ c(n, {
+		...l,
+		...u,
+		onFocus: (e) => {
+			o?.(e), u.onFocus(e);
+		},
+		onKeyDown: (e) => {
+			s?.(e), e.defaultPrevented || u.onKeyDown(e);
+		},
+		className: e(u.className, i),
 		style: {
-			...c.style,
+			...u.style,
 			...a
 		}
 	});
 }
-function d({ numeric: n, className: r, children: i, ...a }) {
-	return /* @__PURE__ */ s(t, {
+function f({ numeric: n, className: r, children: i, ...a }) {
+	return /* @__PURE__ */ c(t, {
 		numeric: n,
 		className: e("py-0 whitespace-nowrap", r),
 		...a,
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ c("div", {
 			className: e("zen__tree-cell flex h-[var(--row-h)] items-center", n && "justify-end"),
 			children: i
 		})
 	});
 }
-function f({ row: t, tree: n, indent: r = 20, children: i, className: a }) {
-	return /* @__PURE__ */ c("div", {
+function p({ row: t, tree: n, indent: r = 20, children: i, className: a }) {
+	return /* @__PURE__ */ l("div", {
 		className: e("flex min-w-0 flex-1 items-center gap-1", a),
 		style: { paddingLeft: t.depth * r },
-		children: [t.hasChildren ? /* @__PURE__ */ s(p, { ...n.toggleProps(t) }) : /* @__PURE__ */ s("span", { className: "-ml-1 w-6 shrink-0" }), i]
+		children: [t.hasChildren ? /* @__PURE__ */ c(m, { ...n.toggleProps(t) }) : /* @__PURE__ */ c("span", { className: "-ml-1 w-6 shrink-0" }), i]
 	});
 }
-function p({ expanded: t, onToggle: n, className: r, ...i }) {
-	return /* @__PURE__ */ s("button", {
+function m({ expanded: t, onToggle: n, className: i, ...a }) {
+	return /* @__PURE__ */ c("button", {
 		type: "button",
 		onClick: n,
 		"aria-label": t ? "Collapse" : "Expand",
 		"aria-expanded": t,
-		className: e("text-muted-foreground hover:bg-tint/[0.08] hover:text-foreground focus-visible:ring-ring/50 -ml-1 grid size-6 shrink-0 place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2", r),
-		...i,
-		children: /* @__PURE__ */ s("svg", {
-			viewBox: "0 0 16 16",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			"aria-hidden": !0,
-			className: e("size-4 transition-transform duration-200 ease-out", t && "rotate-90"),
-			children: /* @__PURE__ */ s("path", { d: "m6 3.5 4.5 4.5L6 12.5" })
-		})
+		className: e("text-muted-foreground hover:bg-tint/[0.08] hover:text-foreground focus-visible:ring-ring/50 -ml-1 grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2", i),
+		...a,
+		children: /* @__PURE__ */ c(r, { className: e("size-4 transition-transform duration-200 ease-out", t && "rotate-90") })
 	});
 }
 //#endregion
-export { d as TreeCell, f as TreeLabel, u as TreeRow, p as TreeToggle, l as useTree };
+export { f as TreeCell, p as TreeLabel, d as TreeRow, m as TreeToggle, u as useTree };