@rinzai/zen 0.15.0 → 0.16.0

package/dist/toast/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useGraphicsMode as t } from "../utils/graphics.js";
-import { useMessages as n } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { useGraphicsMode as n } from "../utils/graphics.js";
 import { AlertIcon as r, CheckIcon as i, InfoIcon as a } from "../utils/status-icons.js";
 import o from "../icons/micro/x-mark.js";
 import { createContext as s, useCallback as c, useContext as l, useEffect as u, useRef as d, useState as f } from "react";
@@ -10,8 +10,8 @@ import { createPortal as g } from "react-dom";
 //#region packages/toast/index.tsx
 var _ = 5e3, v = 3, y = 300, b = 14, x = .05, S = 10, C = 60, w = .45, T = s(null), E = s(null);
 function D({ children: r, offset: i, viewportClassName: a }) {
-	let o = n();
-	t();
+	let o = e();
+	n();
 	let [s, l] = f([]), p = d(0), C = d(/* @__PURE__ */ new Map()), w = d(/* @__PURE__ */ new Set()), [D, O] = f([]), [A, j] = f(!1);
 	u(() => j(!0), []);
 	let N = c((e) => (O((t) => [...t, e]), () => O((t) => t.filter((t) => t !== e))), []), P = D.at(-1) ?? (A ? document.body : null), [F, I] = f({}), L = c((e, t) => I((n) => n[e] === t ? n : {
@@ -46,7 +46,7 @@ function D({ children: r, offset: i, viewportClassName: a }) {
 			timeout: i ?? (r ? 1e4 : _)
 		};
 		return l((e) => [...e, o]), a;
-	}, []), K = s.filter((e) => !e.leaving), q = (R || B) && K.length > 0, J = K.at(-1), Y = J ? F[J.id] : void 0, X = K.slice(-3), Z = q ? X.reduce((e, t) => e + (F[t.id] ?? 0), 0) + S * (X.length - 1) : (Y ?? 0) + b * (X.length - 1), Q = (e) => {
+	}, []), K = s.filter((e) => !e.leaving), q = (R || B) && K.length > 0, J = K.at(-1), Y = J ? F[J.id] : void 0, X = K.slice(-3), Z = X.length ? q ? X.reduce((e, t) => e + (F[t.id] ?? 0), 0) + S * (X.length - 1) : (Y ?? 0) + b * (X.length - 1) : 0, Q = (e) => {
 		let t = K.filter((t) => t.id > e.id), n = t.length;
 		return {
 			index: n,
@@ -74,7 +74,7 @@ function D({ children: r, offset: i, viewportClassName: a }) {
 			onBlur: (e) => {
 				e.currentTarget.contains(e.relatedTarget) || V(!1);
 			},
-			className: e("zen__toast-viewport fixed top-auto end-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] start-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]", "ease-out-soft transition-[height] duration-300", a),
+			className: t("zen__toast-viewport fixed top-auto end-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] start-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]", "ease-out-soft transition-[height] duration-300", a),
 			style: {
 				height: Z,
 				...i && { "--zen-toast-offset": i }
@@ -136,45 +136,45 @@ var j = {
 		glow: "shadow-[var(--toast-shadow)]"
 	}
 };
-function M({ toast: t, layout: r, z: i, paused: a, onDismiss: s, onHeight: c, clocks: l, entered: g }) {
-	let _ = n(), v = j[t.tone] ?? j.default, y = v.icon, b = d(null), x = d(null), [S] = f(() => !g.has(t.id));
+function M({ toast: n, layout: r, z: i, paused: a, onDismiss: s, onHeight: c, clocks: l, entered: g }) {
+	let _ = e(), v = j[n.tone] ?? j.default, y = v.icon, b = d(null), x = d(null), [S] = f(() => !g.has(n.id));
 	u(() => {
-		b.current?.isConnected && g.add(t.id);
-	}, [g, t.id]);
+		b.current?.isConnected && g.add(n.id);
+	}, [g, n.id]);
 	let [T, E] = f(!1);
 	u(() => {
 		if (!S) return;
 		let e = requestAnimationFrame(() => e = requestAnimationFrame(() => E(!0)));
 		return () => cancelAnimationFrame(e);
-	}, [S]), l.has(t.id) || l.set(t.id, {
+	}, [S]), l.has(n.id) || l.set(n.id, {
 		spent: 0,
 		since: null
 	});
-	let D = l.get(t.id), [O] = f(() => D.spent + (D.since === null ? 0 : Date.now() - D.since));
+	let D = l.get(n.id), [O] = f(() => D.spent + (D.since === null ? 0 : Date.now() - D.since));
 	u(() => {
 		let e = x.current;
 		if (!e) return;
-		let n = () => c(t.id, e.offsetHeight);
-		n();
-		let r = new ResizeObserver(n);
+		let t = () => c(n.id, e.offsetHeight);
+		t();
+		let r = new ResizeObserver(t);
 		return r.observe(e), () => r.disconnect();
-	}, [c, t.id]), u(() => {
-		if (!t.timeout || a || t.leaving) return;
+	}, [c, n.id]), u(() => {
+		if (!n.timeout || a || n.leaving) return;
 		D.since = Date.now();
-		let e = setTimeout(() => s(t.id), Math.max(0, t.timeout - D.spent));
+		let e = setTimeout(() => s(n.id), Math.max(0, n.timeout - D.spent));
 		return () => {
 			clearTimeout(e), D.since !== null && (D.spent += Date.now() - D.since), D.since = null;
 		};
 	}, [
 		a,
-		t.id,
-		t.timeout,
-		t.leaving,
+		n.id,
+		n.timeout,
+		n.leaving,
 		s,
 		D
 	]);
 	let k = d(null), A = (e) => {
-		t.leaving || e.button !== 0 || e.target.closest("button") || (k.current = {
+		n.leaving || e.button !== 0 || e.target.closest("button") || (k.current = {
 			x: e.clientX,
 			dx: 0,
 			t: e.timeStamp,
@@ -185,21 +185,21 @@ function M({ toast: t, layout: r, z: i, paused: a, onDismiss: s, onHeight: c, cl
 		let t = k.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`);
 	}, N = (e) => {
-		let n = k.current;
-		n && (k.current = null, delete e.currentTarget.dataset.swiping, n.dx > C || n.dx > 0 && n.speed > w ? s(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
+		let t = k.current;
+		t && (k.current = null, delete e.currentTarget.dataset.swiping, t.dx > C || t.dx > 0 && t.speed > w ? s(n.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
 	};
 	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
 		ref: b,
-		role: t.tone === "negative" ? "alert" : "status",
+		role: n.tone === "negative" ? "alert" : "status",
 		"aria-live": "off",
 		"data-front": r.front || void 0,
 		"data-behind": !r.front && r.height !== void 0 || void 0,
-		inert: r.hidden || !!t.leaving,
+		inert: r.hidden || !!n.leaving,
 		onPointerDown: A,
 		onPointerMove: M,
 		onPointerUp: N,
 		onPointerCancel: N,
-		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", "ease-out-soft transition-[transform,translate,opacity,height] duration-400 data-swiping:transition-none", S && "starting:translate-y-full starting:opacity-0", r.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", v.ring, v.glow),
+		className: t("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", "ease-out-soft transition-[transform,translate,opacity,height] duration-400 data-swiping:transition-none", S && "starting:translate-y-full starting:opacity-0", r.hidden && "opacity-0", n.leaving === "fade" && "translate-y-[35%] opacity-0", n.leaving === "swipe" && "translate-x-full opacity-0", v.ring, v.glow),
 		style: {
 			zIndex: i,
 			height: r.height,
@@ -210,7 +210,7 @@ function M({ toast: t, layout: r, z: i, paused: a, onDismiss: s, onHeight: c, cl
 			className: "flex items-start gap-3 p-3.5 pe-10 transition-opacity duration-300 group-data-behind:opacity-0",
 			children: [
 				/* @__PURE__ */ m("span", {
-					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", v.badge),
+					className: t("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", v.badge),
 					"aria-hidden": !0,
 					children: /* @__PURE__ */ m(y, { className: "size-4" })
 				}),
@@ -219,44 +219,44 @@ function M({ toast: t, layout: r, z: i, paused: a, onDismiss: s, onHeight: c, cl
 					children: [
 						/* @__PURE__ */ m("div", {
 							className: "text-sm font-semibold",
-							children: t.title
+							children: n.title
 						}),
-						t.description && /* @__PURE__ */ m("div", {
+						n.description && /* @__PURE__ */ m("div", {
 							className: "text-muted-foreground text-sm leading-5",
-							children: t.description
+							children: n.description
 						}),
-						t.action && /* @__PURE__ */ m("button", {
+						n.action && /* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: () => {
-								t.action?.onClick(), s(t.id);
+								n.action?.onClick(), s(n.id);
 							},
 							className: "border-tint/10 bg-tint/[0.06] hover:bg-tint/[0.12] focus-ring mt-2 cursor-pointer self-start rounded-lg border px-3 py-1 text-xs font-medium outline-hidden transition-colors",
-							children: t.action.label
+							children: n.action.label
 						})
 					]
 				}),
 				/* @__PURE__ */ m("button", {
 					type: "button",
 					"aria-label": _.dismiss,
-					onClick: () => s(t.id),
+					onClick: () => s(n.id),
 					className: "text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-ring absolute end-2.5 top-2.5 grid size-7 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors",
 					children: /* @__PURE__ */ m(o, { className: "size-3.5" })
 				})
 			]
-		}), t.timeout > 0 && /* @__PURE__ */ m("span", {
+		}), n.timeout > 0 && /* @__PURE__ */ m("span", {
 			"aria-hidden": !0,
-			className: e("zen__toast-timer absolute start-0 bottom-0 h-0.5 w-full origin-left opacity-60 rtl:origin-right transition-opacity group-data-behind:opacity-0", v.bar),
+			className: t("zen__toast-timer absolute start-0 bottom-0 h-0.5 w-full origin-left opacity-60 rtl:origin-right transition-opacity group-data-behind:opacity-0", v.bar),
 			style: {
-				animationDuration: `${t.timeout}ms`,
+				animationDuration: `${n.timeout}ms`,
 				animationDelay: `${-O}ms`,
 				animationPlayState: a ? "paused" : void 0
 			}
 		})]
 	}), /* @__PURE__ */ m("span", {
 		className: "sr-only",
-		"aria-live": t.tone === "negative" ? "assertive" : "polite",
+		"aria-live": n.tone === "negative" ? "assertive" : "polite",
 		"aria-atomic": "true",
-		children: T && [t.title, t.description].filter(Boolean).join(". ")
+		children: T && [n.title, n.description].filter(Boolean).join(". ")
 	})] });
 }
 //#endregion

package/dist/tooltip/index.d.ts

@@ -10,14 +10,20 @@ export default function Tooltip({ children }: {
 }): import('react').JSX.Element;
 /** What the tooltip describes: a button by default. With `asChild`, your own focusable element instead. */
 export declare function TooltipTrigger({ asChild, style, onPointerEnter, onPointerLeave, onFocus, onBlur, onKeyDown, children, ...rest }: TooltipTriggerProps): import('react').JSX.Element;
-/** The hint: glass, below the trigger (above it if there's no room), centred on it by default. */
-export declare function TooltipContent({ align, offset, className, style, onPointerEnter, onPointerLeave, children, ...rest }: TooltipContentProps): import('react').JSX.Element;
+/**
+ * The hint: glass, below the trigger (above it if there's no room), centred on
+ * it by default. `side="beside"` puts it after the trigger instead (before it
+ * if there's no room), as for the icons of a collapsed sidebar.
+ */
+export declare function TooltipContent({ side, align, offset, className, style, onPointerEnter, onPointerLeave, children, ...rest }: TooltipContentProps): import('react').JSX.Element;
 export interface TooltipTriggerProps extends ComponentProps<'button'> {
     /** Put the trigger's props on your own focusable element instead of rendering a button. */
     asChild?: boolean;
 }
 export interface TooltipContentProps extends ComponentProps<'div'> {
-    /** Centred on the trigger (default), or lined up with its start or end edge. */
+    /** Below the trigger (default; above if there's no room), or beside it (after it; before if there's no room). */
+    side?: 'below' | 'beside';
+    /** Centred on the trigger (default), or lined up with its start or end edge (beside: its top or bottom). */
     align?: 'start' | 'end' | 'center';
     /** Gap from the trigger, in px. */
     offset?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAsB,MAAM,OAAO,CAAC;AAUrF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAIrE;AAED,2GAA2G;AAC3G,wBAAgB,cAAc,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,cAAc,EACd,cAAc,EACd,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAerB;AAED,kGAAkG;AAClG,wBAAgB,cAAc,CAAC,EAC3B,KAAgB,EAChB,MAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,cAAc,EACd,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAmBrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACjE,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAsB,MAAM,OAAO,CAAC;AAUrF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAIrE;AAED,2GAA2G;AAC3G,wBAAgB,cAAc,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,cAAc,EACd,cAAc,EACd,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAerB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,IAAc,EACd,KAAgB,EAChB,MAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,cAAc,EACd,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAyBrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACjE,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,iHAAiH;IACjH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,4GAA4G;IAC5G,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/tooltip/index.js

@@ -48,28 +48,31 @@ function h({ asChild: e, style: t, onPointerEnter: i, onPointerLeave: a, onFocus
 		children: l
 	});
 }
-function g({ align: t = "center", offset: n = 5, className: r, style: s, onPointerEnter: c, onPointerLeave: l, children: f, ...m }) {
-	let h = p("TooltipContent"), g = u(null);
-	return a(g), /* @__PURE__ */ d("div", {
-		...m,
-		ref: g,
-		id: h.id,
+function g({ side: t = "below", align: n = "center", offset: r = 5, className: s, style: c, onPointerEnter: l, onPointerLeave: f, children: m, ...h }) {
+	let g = p("TooltipContent"), _ = u(null);
+	return a(_), /* @__PURE__ */ d("div", {
+		...h,
+		ref: _,
+		id: g.id,
 		role: "tooltip",
 		popover: "manual",
-		...h.contentProps({
-			onPointerEnter: c,
-			onPointerLeave: l
+		...g.contentProps({
+			onPointerEnter: l,
+			onPointerLeave: f
 		}),
+		"data-zen-beside": t === "beside" ? "" : void 0,
 		style: {
-			...i(h.id, {
-				align: t,
-				offset: n,
-				width: "at-least"
+			...i(g.id, {
+				side: t,
+				align: n,
+				offset: r,
+				width: t === "beside" ? void 0 : "at-least"
 			}),
-			...s
+			...t === "beside" && { marginBlock: 0 },
+			...c
 		},
-		className: e("zen__popover fixed z-50 overflow-visible p-0", o, r),
-		children: f
+		className: e("zen__popover fixed z-50 overflow-visible p-0", o, s),
+		children: m
 	});
 }
 //#endregion

package/dist/tree/index.js

@@ -1,19 +1,19 @@
 "use client";
-import e from "../icons/micro/chevron-right.js";
-import { cx as t } from "../utils/cx.js";
-import { readingKey as n } from "../utils/direction.js";
-import { useMessages as r } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import t from "../icons/micro/chevron-right.js";
+import { cx as n } from "../utils/cx.js";
+import { readingKey as r } from "../utils/direction.js";
 import { reducedMotion as i } from "../utils/motion.js";
 import { TableCell as a, TableRow as o } from "../table/index.js";
 import { useCallback as s, useMemo as c, useRef as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region packages/tree/index.tsx
-function p({ items: e, getKey: r, getChildren: a, defaultExpanded: o = !0, rowHeight: d = 36 }) {
+function p({ items: e, getKey: t, getChildren: a, defaultExpanded: o = !0, rowHeight: d = 36 }) {
 	let [f, p] = u(() => /* @__PURE__ */ new Set()), [m, h] = u(null), [g, _] = u(null), v = l(null), y = s((e) => f.has(e) !== o, [f, o]), b = c(() => {
-		let t = [], n = (e, i, o) => {
+		let n = [], r = (e, i, o) => {
 			e.forEach((s, c) => {
-				let l = r(s), u = a(s), d = !!u?.length, f = d && y(l);
-				t.push({
+				let l = t(s), u = a(s), d = !!u?.length, f = d && y(l);
+				n.push({
 					item: s,
 					key: l,
 					depth: i,
@@ -22,23 +22,23 @@ function p({ items: e, getKey: r, getChildren: a, defaultExpanded: o = !0, rowHe
 					expanded: f,
 					position: c + 1,
 					siblings: e.length
-				}), f && n(u, i + 1, l);
+				}), f && r(u, i + 1, l);
 			});
 		};
-		return n(e, 0, null), t;
+		return r(e, 0, null), n;
 	}, [
 		e,
-		r,
+		t,
 		a,
 		y
 	]), x = () => {
-		let t = [], n = (e) => {
+		let n = [], r = (e) => {
 			for (let i of e) {
 				let e = a(i);
-				e?.length && (t.push(r(i)), n(e));
+				e?.length && (n.push(t(i)), r(e));
 			}
 		};
-		return n(e), t;
+		return r(e), n;
 	}, S = s((e, t) => p((n) => {
 		let r = new Set(n);
 		return t === o ? r.delete(e) : r.add(e), r;
@@ -62,12 +62,12 @@ function p({ items: e, getKey: r, getChildren: a, defaultExpanded: o = !0, rowHe
 		}
 	}, [w, T] = u(null), E = b.some((e) => e.key === w) ? w : b[0]?.key ?? null, D = (e) => e.expanded && g !== e.key, O = (e, t) => {
 		if (t.target !== t.currentTarget) return;
-		let r = b.indexOf(e), i, a = n(t.key, t.currentTarget);
-		if (a === "ArrowDown") i = b[r + 1];
-		else if (a === "ArrowUp") i = b[r - 1];
+		let n = b.indexOf(e), i, a = r(t.key, t.currentTarget);
+		if (a === "ArrowDown") i = b[n + 1];
+		else if (a === "ArrowUp") i = b[n - 1];
 		else if (a === "Home") i = b[0];
 		else if (a === "End") i = b.at(-1);
-		else if (a === "ArrowRight" && e.hasChildren) D(e) ? i = b[r + 1] : C(e.key);
+		else if (a === "ArrowRight" && e.hasChildren) D(e) ? i = b[n + 1] : C(e.key);
 		else if (a === "ArrowLeft") D(e) ? C(e.key) : i = b.find((t) => t.key === e.parentKey);
 		else return;
 		t.preventDefault(), i && t.currentTarget.closest("[role=\"treegrid\"], table")?.querySelector(`[data-tree-key="${CSS.escape(i.key)}"]`)?.focus();
@@ -93,7 +93,7 @@ function p({ items: e, getKey: r, getChildren: a, defaultExpanded: o = !0, rowHe
 				t.target === t.currentTarget && T(e.key);
 			},
 			onKeyDown: (t) => O(e, t),
-			className: t("outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60", m && e.parentKey === m.key && "zen__tree-row-enter", g && e.parentKey === g && "zen__tree-row-exit"),
+			className: n("outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60", m && e.parentKey === m.key && "zen__tree-row-enter", g && e.parentKey === g && "zen__tree-row-exit"),
 			style: { "--row-h": `${d - 1}px` },
 			onAnimationEnd: (t) => {
 				t.animationName === "zen-row-close" && g && e.parentKey === g && v.current?.();
@@ -107,8 +107,8 @@ function p({ items: e, getKey: r, getChildren: a, defaultExpanded: o = !0, rowHe
 		rowHeight: d
 	};
 }
-function m({ row: e, tree: n, className: r, style: i, onFocus: a, onKeyDown: s, ...c }) {
-	let l = n.rowProps(e);
+function m({ row: e, tree: t, className: r, style: i, onFocus: a, onKeyDown: s, ...c }) {
+	let l = t.rowProps(e);
 	return /* @__PURE__ */ d(o, {
 		...c,
 		...l,
@@ -118,41 +118,41 @@ function m({ row: e, tree: n, className: r, style: i, onFocus: a, onKeyDown: s,
 		onKeyDown: (e) => {
 			s?.(e), e.defaultPrevented || l.onKeyDown(e);
 		},
-		className: t(l.className, r),
+		className: n(l.className, r),
 		style: {
 			...l.style,
 			...i
 		}
 	});
 }
-function h({ numeric: e, className: n, children: r, ...i }) {
+function h({ numeric: e, className: t, children: r, ...i }) {
 	return /* @__PURE__ */ d(a, {
 		numeric: e,
-		className: t("py-0 whitespace-nowrap", n),
+		className: n("py-0 whitespace-nowrap", t),
 		...i,
 		children: /* @__PURE__ */ d("div", {
-			className: t("zen__tree-cell flex h-[var(--row-h)] items-center", e && "justify-end"),
+			className: n("zen__tree-cell flex h-[var(--row-h)] items-center", e && "justify-end"),
 			children: r
 		})
 	});
 }
-function g({ row: e, tree: n, indent: r = 20, children: i, className: a }) {
+function g({ row: e, tree: t, indent: r = 20, children: i, className: a }) {
 	return /* @__PURE__ */ f("div", {
-		className: t("flex min-w-0 flex-1 items-center gap-1", a),
+		className: n("flex min-w-0 flex-1 items-center gap-1", a),
 		style: { paddingLeft: e.depth * r },
-		children: [e.hasChildren ? /* @__PURE__ */ d(_, { ...n.toggleProps(e) }) : /* @__PURE__ */ d("span", { className: "-ms-1 w-6 shrink-0" }), i]
+		children: [e.hasChildren ? /* @__PURE__ */ d(_, { ...t.toggleProps(e) }) : /* @__PURE__ */ d("span", { className: "-ms-1 w-6 shrink-0" }), i]
 	});
 }
-function _({ expanded: n, onToggle: i, className: a, ...o }) {
-	let s = r();
+function _({ expanded: r, onToggle: i, className: a, ...o }) {
+	let s = e();
 	return /* @__PURE__ */ d("button", {
 		type: "button",
 		onClick: i,
-		"aria-label": n ? s.collapse : s.expand,
-		"aria-expanded": n,
-		className: t("text-muted-foreground hover:bg-tint/[0.08] hover:text-foreground -ms-1 grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-hidden transition-colors focus-ring", a),
+		"aria-label": r ? s.collapse : s.expand,
+		"aria-expanded": r,
+		className: n("text-muted-foreground hover:bg-tint/[0.08] hover:text-foreground -ms-1 grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-hidden transition-colors focus-ring", a),
 		...o,
-		children: /* @__PURE__ */ d(e, { className: t("zen__tree-chevron size-4 transition-transform duration-200 ease-out rtl:-scale-x-100", n && "rotate-90 rtl:-rotate-90") })
+		children: /* @__PURE__ */ d(t, { className: n("zen__tree-chevron size-4 transition-transform duration-200 ease-out rtl:-scale-x-100", r && "rotate-90 rtl:-rotate-90") })
 	});
 }
 //#endregion

package/dist/trend/index.js

@@ -1,22 +1,22 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useLocale as t } from "../locale-provider/index.js";
+import { useLocale as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import n from "../icons/micro/arrow-trending-down.js";
 import r from "../icons/micro/arrow-trending-up.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region packages/trend/index.tsx
 function o({ value: o, good: s = "up", locale: c, format: l, className: u, children: d, ...f }) {
-	let p = t(c), m = l ?? ((e) => new Intl.NumberFormat(p, {
+	let p = e(c), m = l ?? ((e) => new Intl.NumberFormat(p, {
 		style: "percent",
 		maximumFractionDigits: 1,
 		signDisplay: "exceptZero"
 	}).format(e)), h = o > 0 ? "up" : o < 0 ? "down" : "flat", g = h === "up" ? r : h === "down" ? n : null;
 	return /* @__PURE__ */ a("span", {
-		className: e("zen__trend inline-flex items-center gap-1.5 text-xs", u),
+		className: t("zen__trend inline-flex items-center gap-1.5 text-xs", u),
 		...f,
 		children: [/* @__PURE__ */ a("span", {
 			"data-direction": h,
-			className: e("inline-flex items-center gap-0.5 rounded-md border px-1.5 py-0.5 font-medium whitespace-nowrap tabular-nums", h === "flat" ? "border-tint/10 bg-tint/[0.06] text-muted-foreground" : h === s ? "border-glow/30 bg-glow/10 text-primary" : "border-destructive/40 bg-destructive/10 text-destructive"),
+			className: t("inline-flex items-center gap-0.5 rounded-md border px-1.5 py-0.5 font-medium whitespace-nowrap tabular-nums", h === "flat" ? "border-tint/10 bg-tint/[0.06] text-muted-foreground" : h === s ? "border-glow/30 bg-glow/10 text-primary" : "border-destructive/40 bg-destructive/10 text-destructive"),
 			children: [g && /* @__PURE__ */ i(g, { className: "size-3.5" }), m(o)]
 		}), d && /* @__PURE__ */ i("span", {
 			className: "text-muted-foreground",

package/dist/utils/messages.d.ts

@@ -7,6 +7,7 @@ export declare const ENGLISH: {
     clear: string;
     cancel: string;
     close: string;
+    back: string;
     dismiss: string;
     delete: string;
     remove: (item: string) => string;

package/dist/utils/messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../packages/utils/messages.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;;;mBAOD,MAAM;;;;;;;;;;;;;;gBAgBT,MAAM;;;;;;;;;;;;;gCAeU,MAAM;uBACf,MAAM;;;4CAKe,MAAM,cAAc,MAAM;;wBAG9C,MAAM;;4BAEF,MAAM;;;;;;;;;;;;;;;;;;+BAsBH,MAAM;;2BAEV,MAAM,SAAS,MAAM;;;;;;6BAMnB,MAAM;4BACP,MAAM,QAAQ,MAAM;uBACzB,MAAM,UAAU,MAAM;;;;;;aAQhC,MAAM;;;uBAGI,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,SAAS,MAAM;yBAC9C,MAAM,QAAQ,MAAM;qBACxB,MAAM,QAAQ,MAAM;mBACtB,MAAM;;oBAIL,MAAM;qBACL,MAAM,SAAS,MAAM;oBAEtB,MAAM,SAAS,MAAM;oBACrB,MAAM,SAAS,MAAM;oBACrB,MAAM,UAAU,MAAM;sBACpB,MAAM,SAAS,MAAM;wBACnB,MAAM,SAAS,MAAM,SAAS,MAAM;oBAGxC,MAAM,SAAS,MAAM,UAAU,MAAM;kBACvC,MAAM,KAAK,MAAM,KAAK,MAAM;sBACxB,MAAM;;;;2BAOD,MAAM;;;;uBAMV,MAAM;oBACT,MAAM,QAAQ,MAAM;;;;;;;;;;;;;;qBAgBnB,MAAM;;cAEb,MAAM;;;;;;iBAMH,MAAM,SAAS,MAAM;mBACnB,MAAM;;;;;;mBAQN,MAAM,SAAS,MAAM;CACvC,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,OAAO,CAAC"}
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../packages/utils/messages.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;;;;mBAQD,MAAM;;;;;;;;;;;;;;gBAgBT,MAAM;;;;;;;;;;;;;gCAeU,MAAM;uBACf,MAAM;;;4CAKe,MAAM,cAAc,MAAM;;wBAG9C,MAAM;;4BAEF,MAAM;;;;;;;;;;;;;;;;;;+BAsBH,MAAM;;2BAEV,MAAM,SAAS,MAAM;;;;;;6BAMnB,MAAM;4BACP,MAAM,QAAQ,MAAM;uBACzB,MAAM,UAAU,MAAM;;;;;;aAQhC,MAAM;;;uBAGI,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,SAAS,MAAM;yBAC9C,MAAM,QAAQ,MAAM;qBACxB,MAAM,QAAQ,MAAM;mBACtB,MAAM;;oBAIL,MAAM;qBACL,MAAM,SAAS,MAAM;oBAEtB,MAAM,SAAS,MAAM;oBACrB,MAAM,SAAS,MAAM;oBACrB,MAAM,UAAU,MAAM;sBACpB,MAAM,SAAS,MAAM;wBACnB,MAAM,SAAS,MAAM,SAAS,MAAM;oBAGxC,MAAM,SAAS,MAAM,UAAU,MAAM;kBACvC,MAAM,KAAK,MAAM,KAAK,MAAM;sBACxB,MAAM;;;;2BAOD,MAAM;;;;uBAMV,MAAM;oBACT,MAAM,QAAQ,MAAM;;;;;;;;;;;;;;qBAgBnB,MAAM;;cAEb,MAAM;;;;;;iBAMH,MAAM,SAAS,MAAM;mBACnB,MAAM;;;;;;mBAQN,MAAM,SAAS,MAAM;CACvC,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,OAAO,CAAC"}

package/dist/utils/messages.js

@@ -3,6 +3,7 @@ var e = {
 	clear: "Clear",
 	cancel: "Cancel",
 	close: "Close",
+	back: "Back",
 	dismiss: "Dismiss",
 	delete: "Delete",
 	remove: (e) => `Remove ${e}`,

package/dist/utils/swipe.d.ts

@@ -26,4 +26,11 @@ export interface SwipeHandlers {
  * it is swallowed.
  */
 export declare function useSwipe(ref: RefObject<HTMLElement | null>, direction: SwipeDirection | undefined, handlers: SwipeHandlers): void;
+/**
+ * A sheet follows a finger swiping it back to its edge, and closes when let go
+ * far enough along or flicked; otherwise it springs back. It's moved by the
+ * --zen-swipe custom property (a translate), and --zen-swipe-progress (0 to 1)
+ * says how far, for its scrim.
+ */
+export declare function useSheetSwipe(ref: RefObject<HTMLElement | null>, side: 'bottom' | 'left' | 'right' | undefined, close: () => void): void;
 //# sourceMappingURL=swipe.d.ts.map

package/dist/utils/swipe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swipe.d.ts","sourceRoot":"","sources":["../../packages/utils/swipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErD,gEAAgE;AAChE,eAAO,MAAM,WAAW,MAAM,CAAC;AAM/B,MAAM,WAAW,cAAc;IAC3B,sEAAsE;IACtE,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,QAAQ,CAAC;IAC3B,wFAAwF;IACxF,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC1B,0GAA0G;IAC1G,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1B,+DAA+D;IAC/D,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,qFAAqF;IACrF,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,8HAA8H;IAC9H,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACpB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,SAAS,EAAE,cAAc,GAAG,SAAS,EACrC,QAAQ,EAAE,aAAa,QAkG1B"}
+{"version":3,"file":"swipe.d.ts","sourceRoot":"","sources":["../../packages/utils/swipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErD,gEAAgE;AAChE,eAAO,MAAM,WAAW,MAAM,CAAC;AAM/B,MAAM,WAAW,cAAc;IAC3B,sEAAsE;IACtE,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,QAAQ,CAAC;IAC3B,wFAAwF;IACxF,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC1B,0GAA0G;IAC1G,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1B,+DAA+D;IAC/D,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,qFAAqF;IACrF,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,8HAA8H;IAC9H,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACpB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,SAAS,EAAE,cAAc,GAAG,SAAS,EACrC,QAAQ,EAAE,aAAa,QAkG1B;AAKD;;;;;GAKG;AACH,wBAAgB,aAAa,CACzB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,EAC7C,KAAK,EAAE,MAAM,IAAI,QAuBpB"}

package/dist/utils/swipe.js

@@ -2,25 +2,25 @@
 import { useEffect as e, useRef as t } from "react";
 //#region packages/utils/swipe.ts
 var n = .5, r = 100, i = 8;
-function a(n, a, c) {
-	let l = t(c);
+function a(n, a, o) {
+	let s = t(o);
 	e(() => {
-		l.current = c;
+		s.current = o;
 	});
 	let u = a?.axis, d = a?.sign;
 	e(() => {
 		let e = n.current;
 		if (!e || !u || !d) return;
-		let t = u === "y" ? "y" : "x", a = u === "inline" && getComputedStyle(e).direction === "rtl" ? -d : d, c = null, f = !1, p = (e) => (t === "y" ? e.clientY - c.y : e.clientX - c.x) * a, m = (e) => t === "y" ? e.clientX - c.x : e.clientY - c.y, h = () => {
-			let t = c?.on;
-			return c = null, t ? (delete e.dataset.swiping, f = !0, !0) : !1;
+		let t = u === "y" ? "y" : "x", a = u === "inline" && getComputedStyle(e).direction === "rtl" ? -d : d, o = null, f = !1, p = (e) => (t === "y" ? e.clientY - o.y : e.clientX - o.x) * a, m = (e) => t === "y" ? e.clientX - o.x : e.clientY - o.y, h = () => {
+			let t = o?.on;
+			return o = null, t ? (delete e.dataset.swiping, f = !0, !0) : !1;
 		}, g = (n) => {
 			if (f = !1, n.pointerType === "touch") {
 				if (!n.isPrimary) {
-					h() && l.current.cancel();
+					h() && s.current.cancel();
 					return;
 				}
-				o(n.target, e, t) || (c = {
+				c(n.target, e, t) || (o = {
 					id: n.pointerId,
 					x: n.clientX,
 					y: n.clientY,
@@ -30,25 +30,25 @@ function a(n, a, c) {
 				});
 			}
 		}, _ = (n) => {
-			if (!c || n.pointerId !== c.id) return;
-			let o = p(n);
-			if (!c.on) {
-				if (Math.hypot(o, m(n)) < i) return;
-				if (o <= 0 || Math.abs(m(n)) * 1.5 > o || s(n.target, t, a)) {
-					c = null;
+			if (!o || n.pointerId !== o.id) return;
+			let c = p(n);
+			if (!o.on) {
+				if (Math.hypot(c, m(n)) < i) return;
+				if (c <= 0 || Math.abs(m(n)) * 1.5 > c || l(n.target, t, a)) {
+					o = null;
 					return;
 				}
-				c.on = !0, e.dataset.swiping = "", e.setPointerCapture?.(n.pointerId);
+				o.on = !0, e.dataset.swiping = "", e.setPointerCapture?.(n.pointerId);
 			}
-			c.points = [...c.points.filter(([e]) => n.timeStamp - e < r), [n.timeStamp, o]], l.current.move(o);
-			let u = l.current.threshold?.();
-			u !== void 0 && o > u !== c.past && (c.past = !c.past, navigator.vibrate?.(8));
+			o.points = [...o.points.filter(([e]) => n.timeStamp - e < r), [n.timeStamp, c]], s.current.move(c);
+			let u = s.current.threshold?.();
+			u !== void 0 && c > u !== o.past && (o.past = !o.past, navigator.vibrate?.(8));
 		}, v = (e) => {
-			if (!c || e.pointerId !== c.id) return;
-			let t = p(e), [n, i] = c.points.find(([t]) => e.timeStamp - t < r) ?? [e.timeStamp, t], a = (t - i) / Math.max(1, e.timeStamp - n);
-			h() && (e.type === "pointerup" ? l.current.release(t, a) : l.current.cancel());
+			if (!o || e.pointerId !== o.id) return;
+			let t = p(e), [n, i] = o.points.find(([t]) => e.timeStamp - t < r) ?? [e.timeStamp, t], a = (t - i) / Math.max(1, e.timeStamp - n);
+			h() && (e.type === "pointerup" ? s.current.release(t, a) : s.current.cancel());
 		}, y = (e) => {
-			c?.on && e.preventDefault();
+			o?.on && e.preventDefault();
 		}, b = (e) => {
 			f && (f = !1, e.stopPropagation(), e.preventDefault());
 		};
@@ -61,7 +61,27 @@ function a(n, a, c) {
 		d
 	]);
 }
-function o(e, t, n) {
+var o = .3;
+function s(t, n, r) {
+	let i = n === "bottom" ? "y" : "x", s = n === "left" ? -1 : 1, c = () => i === "y" ? t.current.offsetHeight : t.current.offsetWidth, l = () => {
+		t.current?.style.removeProperty("--zen-swipe"), t.current?.style.removeProperty("--zen-swipe-progress");
+	};
+	e(l, [t, n]), a(t, n ? {
+		axis: i,
+		sign: s
+	} : void 0, {
+		move: (e) => {
+			let n = e > 0 ? e : e / 6;
+			t.current.style.setProperty("--zen-swipe", i === "y" ? `0 ${n}px` : `${n * s}px 0`), t.current.style.setProperty("--zen-swipe-progress", String(Math.max(0, Math.min(1, e / c()))));
+		},
+		release: (e, t) => {
+			e > c() * o || e > 0 && t > .5 ? r() : l();
+		},
+		cancel: l,
+		threshold: () => c() * o
+	});
+}
+function c(e, t, n) {
 	if (e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])")) return !0;
 	let r = n === "y" ? /pan-(y|up|down)/ : /pan-(x|left|right)/;
 	for (let n = e; n && n !== t; n = n.parentElement) {
@@ -70,7 +90,7 @@ function o(e, t, n) {
 	}
 	return !1;
 }
-function s(e, t, n) {
+function l(e, t, n) {
 	for (let r = e; r; r = r.parentElement) {
 		let e = getComputedStyle(r), i = t === "y" ? e.overflowY : e.overflowX;
 		if (r === r.ownerDocument.scrollingElement ? i === "hidden" || i === "clip" : !/auto|scroll/.test(i)) continue;
@@ -82,4 +102,4 @@ function s(e, t, n) {
 	return !1;
 }
 //#endregion
-export { n as FLICK_SPEED, a as useSwipe };
+export { n as FLICK_SPEED, s as useSheetSwipe, a as useSwipe };

package/dist/utils/useAnchoredPopup.d.ts

@@ -35,7 +35,8 @@ export declare function anchorFor(id: string): {
  * lined up with its start or end edge, or centred on it; `width` makes it as
  * wide as the trigger, or at least as wide. `side: 'beside'` puts it after the
  * trigger instead (before it if there's no room), its top level with the
- * trigger's, as a submenu opens. For parts that take their own `align`/`offset`
+ * trigger's, as a submenu opens; `align` then lines up the tops (start), the
+ * middles (center, as a tooltip beside an icon) or the bottoms (end). For parts that take their own `align`/`offset`
  * (PopoverContent, MenuContent). The same choices are kept as custom
  * properties, for placing it where anchor positioning isn't supported.
  */