@rinzai/zen 0.14.0 → 0.16.0

package/dist/sortable/index.js

@@ -1,8 +1,8 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMergedRefs as t } from "../utils/refs.js";
-import { Slot as n } from "../utils/slot.js";
-import { useMessages as r } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { useMergedRefs as n } from "../utils/refs.js";
+import { Slot as r } from "../utils/slot.js";
 import { SortableContext as i, SortableHandle as a, SortableItem as o, edgeScroll as s, scrollerOf as c, settle as l, shift as u, topsOf as d, useAnnouncer as f } from "./shared.js";
 import { flattenTree as p } from "./tree-model.js";
 import m from "./tree.js";
@@ -13,72 +13,91 @@ var x = typeof window > "u" ? h : g, S = (e, t, n) => {
 	let r = [...e];
 	return r.splice(n, 0, ...r.splice(t, 1)), r;
 };
-function C({ value: a, onValueChange: o, asChild: p, className: m, children: h, ref: g, ...C }) {
-	let w = _(null), T = t(w, g), [E, D] = v(null), O = r(), { say: k, region: A } = f(w), j = _(null), M = _(null), N = () => [...w.current?.querySelectorAll(":scope > [data-sortable-id]") ?? []], P = (e) => {
-		j.current = d(N()), o(e);
+function C({ value: a, onValueChange: o, itemHeight: p, onLiftedChange: m, asChild: h, className: g, children: C, ref: w, ...T }) {
+	let E = _(null), D = n(E, w), [O, k] = v(null), A = e(), { say: j, region: M } = f(E), N = _(null), P = _(null), F = _(null), I = () => [...E.current?.querySelectorAll(":scope > [data-sortable-id]") ?? []], L = (e) => {
+		N.current = d(I()), o(e);
 	};
 	x(() => {
-		let e = j.current;
-		j.current = null, e && l(N(), e);
-	}, [a]);
-	let F = (e, t) => {
-		if (e.button !== 0 || E) return;
-		let n = N(), r = n.findIndex((e) => e.dataset.sortableId === t), i = n[r];
-		if (!i) return;
-		e.preventDefault();
-		let o = e.currentTarget;
-		o.setPointerCapture?.(e.pointerId);
-		let f = c(w.current), p = f.scrollTop, m = e.clientY, h = n.map((e) => e.getBoundingClientRect()), g = h.length > 1 ? h[1].top - h[0].bottom : 0, _ = h[r].height + g, v = h.map((e) => e.top + e.height / 2), y = r, b = e.clientY;
-		i.dataset.dragging = "", w.current.dataset.sorting = "";
+		let e = N.current;
+		N.current = null, e && l(I(), e), O && I().find((e) => e.dataset.sortableId === O)?.scrollIntoView?.({ block: "nearest" });
+	}, [a]), x(() => F.current?.());
+	let R = (e, t) => {
+		if (e.button !== 0 || O) return;
+		let n = I(), r = a.indexOf(t), i = n.find((e) => e.dataset.sortableId === t);
+		if (r < 0 || !i) return;
+		e.preventDefault(), e.currentTarget.setPointerCapture?.(e.pointerId);
+		let o = c(E.current), f = o.scrollTop, h = e.clientY, g = new Map(a.map((e, t) => [e, t])), _, v;
+		if (p) _ = p, v = (e) => Math.max(0, Math.min(r + Math.trunc(e / _), a.length - 1));
+		else {
+			let e = n.map((e) => e.getBoundingClientRect()), t = e.length > 1 ? e[1].top - e[0].bottom : 0;
+			_ = e[r].height + t;
+			let i = e.map((e) => e.top + e.height / 2);
+			v = (e) => {
+				let t = i[r] + e, a = r;
+				for (; a < n.length - 1 && t > i[a + 1];) a++;
+				for (; a > 0 && t < i[a - 1];) a--;
+				return a;
+			};
+		}
+		let y = r, b = e.clientY;
+		E.current.dataset.sorting = "", m?.(t);
 		let x = () => {
-			let e = b - m + f.scrollTop - p;
-			u(i, e);
-			let t = v[r] + e, a = y;
-			for (y = r; y < n.length - 1 && t > v[y + 1];) y++;
-			for (; y > 0 && t < v[y - 1];) y--;
-			y !== a && navigator.vibrate?.(5), n.forEach((e, t) => {
-				if (t === r) return;
-				let n = r < t && t <= y ? -_ : y <= t && t < r ? _ : 0;
-				u(e, n);
-			});
-		}, C = s(f, x), T = (t) => {
+			let e = b - h + o.scrollTop - f, t = y;
+			y = v(e), y !== t && navigator.vibrate?.(5);
+			for (let t of I()) {
+				let n = g.get(t.dataset.sortableId);
+				if (n !== void 0) {
+					if (n === r) {
+						t.dataset.dragging = "", u(t, e);
+						continue;
+					}
+					u(t, r < n && n <= y ? -_ : y <= n && n < r ? _ : 0);
+				}
+			}
+		};
+		F.current = x;
+		let C = s(o, x), w = (t) => {
 			t.pointerId === e.pointerId && (b = t.clientY, x(), C.at(b));
-		}, D = (t) => {
-			t.pointerId === e.pointerId && (o.removeEventListener("pointermove", T), o.removeEventListener("pointerup", D), o.removeEventListener("pointercancel", D), C.stop(), delete i.dataset.dragging, delete w.current?.dataset.sorting, t.type === "pointerup" && y !== r ? P(S(a, r, y)) : l(n, d(n)));
+		}, T = (t) => {
+			if (t.pointerId !== e.pointerId) return;
+			removeEventListener("pointermove", w), removeEventListener("pointerup", T), removeEventListener("pointercancel", T), C.stop(), F.current = null;
+			let n = I();
+			for (let e of n) delete e.dataset.dragging;
+			delete E.current?.dataset.sorting, m?.(null), t.type === "pointerup" && y !== r ? L(S(a, r, y)) : l(n, d(n));
 		};
-		o.addEventListener("pointermove", T), o.addEventListener("pointerup", D), o.addEventListener("pointercancel", D);
-	}, I = (e, t, n) => {
-		let r = a.indexOf(t), i = O.place(r + 1, a.length);
-		if (e.key === " " || e.key === "Enter") e.preventDefault(), E === t ? (D(null), M.current = null, k(O.dropped(n, i))) : E || (D(t), M.current = a, k(O.pickedUp(n, i)));
-		else if (E === t && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+		addEventListener("pointermove", w), addEventListener("pointerup", T), addEventListener("pointercancel", T);
+	}, z = (e, t, n) => {
+		let r = a.indexOf(t), i = A.place(r + 1, a.length);
+		if (e.key === " " || e.key === "Enter") e.preventDefault(), O === t ? (k(null), P.current = null, m?.(null), j(A.dropped(n, i))) : O || (k(t), P.current = a, m?.(t), j(A.pickedUp(n, i)));
+		else if (O === t && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
 			e.preventDefault();
 			let t = r + (e.key === "ArrowUp" ? -1 : 1);
 			if (t < 0 || t >= a.length) return;
-			P(S(a, r, t)), k(O.movedTo(n, O.place(t + 1, a.length)));
-		} else if (E === t && e.key === "Escape") {
+			L(S(a, r, t)), j(A.movedTo(n, A.place(t + 1, a.length)));
+		} else if (O === t && e.key === "Escape") {
 			e.preventDefault();
-			let r = M.current ?? a;
-			D(null), M.current = null, r !== a && P([...r]), k(O.putBack(n, O.place(r.indexOf(t) + 1, r.length)));
+			let r = P.current ?? a;
+			k(null), P.current = null, m?.(null), r !== a && L([...r]), j(A.putBack(n, A.place(r.indexOf(t) + 1, r.length)));
 		}
-	}, L = {
-		...C,
-		ref: T
+	}, B = {
+		...T,
+		ref: D
 	};
 	return /* @__PURE__ */ b(i.Provider, {
 		value: {
-			grab: F,
-			key: I,
-			lifted: E
+			grab: R,
+			key: z,
+			lifted: O
 		},
-		children: [p ? /* @__PURE__ */ y(n, {
-			...L,
-			className: e("zen__sortable", m),
-			children: h
+		children: [h ? /* @__PURE__ */ y(r, {
+			...B,
+			className: t("zen__sortable", g),
+			children: C
 		}) : /* @__PURE__ */ y("ul", {
-			...L,
-			className: e("zen__sortable relative flex flex-col", m),
-			children: h
-		}), A]
+			...B,
+			className: t("zen__sortable relative flex flex-col", g),
+			children: C
+		}), M]
 	});
 }
 //#endregion

package/dist/sortable/shared.js

@@ -1,7 +1,7 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { Slot as t } from "../utils/slot.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 { Slot as n } from "../utils/slot.js";
 import { reducedMotion as r } from "../utils/motion.js";
 import { createContext as i, useContext as a, useEffect as o, useState as s } from "react";
 import { jsx as c } from "react/jsx-runtime";
@@ -58,26 +58,26 @@ function b(e) {
 		host: r
 	};
 }
-function x({ id: n, label: r, asChild: i, className: a, ...o }) {
+function x({ id: e, label: r, asChild: i, className: a, ...o }) {
 	let { lifted: s } = p("SortableItem");
-	return /* @__PURE__ */ c(i ? t : "li", {
-		"data-sortable-id": n,
+	return /* @__PURE__ */ c(i ? n : "li", {
+		"data-sortable-id": e,
 		"data-sortable-label": r,
-		"data-lifted": s === n || void 0,
-		className: e("zen__sortable-item transition-[box-shadow,scale,background-color] duration-200 [&:not(tr)]:relative", "[&:not(tr)]:data-dragging:bg-card [&:not(tr)]:data-dragging:z-10 [&:not(tr)]:data-dragging:rounded-xl [&:not(tr)]:data-dragging:scale-[1.02] [&:not(tr)]:data-dragging:shadow-[0_0_0_1px_oklch(var(--tint)/0.08),0_12px_32px_-12px_oklch(0_0_0/0.6)]", "[&:not(tr)]:data-lifted:bg-card [&:not(tr)]:data-lifted:z-10 [&:not(tr)]:data-lifted:rounded-xl [&:not(tr)]:data-lifted:shadow-[0_0_0_2px_oklch(var(--primary)/0.6)]", "[&:not(tr)]:data-carried:z-10 [&:not(tr)]:data-carried:bg-card data-drop-target:bg-primary/[0.07] [&[data-drop-target]>td]:[background-image:linear-gradient(oklch(var(--primary)/0.09),oklch(var(--primary)/0.09))]", "[&:is([data-dragging],[data-carried])>td]:z-20 [&:is([data-dragging],[data-carried])>td]:bg-card/80 [&:is([data-dragging],[data-carried])>td]:glass-blur [&:is([data-dragging],[data-carried])>td:not(.sticky)]:relative", "[&[data-lifted]>td]:[background-image:linear-gradient(oklch(var(--primary)/0.09),oklch(var(--primary)/0.09))] [&[data-lifted]>td]:shadow-[inset_0_2px_0_oklch(var(--primary)/0.6),inset_0_-2px_0_oklch(var(--primary)/0.6)]", a),
+		"data-lifted": s === e || void 0,
+		className: t("zen__sortable-item transition-[box-shadow,scale,background-color] duration-200 [&:not(tr)]:relative", "[&:not(tr)]:data-dragging:bg-card [&:not(tr)]:data-dragging:z-10 [&:not(tr)]:data-dragging:rounded-xl [&:not(tr)]:data-dragging:scale-[1.02] [&:not(tr)]:data-dragging:shadow-[0_0_0_1px_oklch(var(--tint)/0.08),0_12px_32px_-12px_oklch(0_0_0/0.6)]", "[&:not(tr)]:data-lifted:bg-card [&:not(tr)]:data-lifted:z-10 [&:not(tr)]:data-lifted:rounded-xl [&:not(tr)]:data-lifted:shadow-[0_0_0_2px_oklch(var(--primary)/0.6)]", "[&:not(tr)]:data-carried:z-10 [&:not(tr)]:data-carried:bg-card data-drop-target:bg-primary/[0.07] [&[data-drop-target]>td]:[background-image:linear-gradient(oklch(var(--primary)/0.09),oklch(var(--primary)/0.09))]", "[&:is([data-dragging],[data-carried])>td]:z-20 [&:is([data-dragging],[data-carried])>td]:bg-card/80 [&:is([data-dragging],[data-carried])>td]:glass-blur [&:is([data-dragging],[data-carried])>td:not(.sticky)]:relative", "[&[data-lifted]>td]:[background-image:linear-gradient(oklch(var(--primary)/0.09),oklch(var(--primary)/0.09))] [&[data-lifted]>td]:shadow-[inset_0_2px_0_oklch(var(--primary)/0.6),inset_0_-2px_0_oklch(var(--primary)/0.6)]", a),
 		...o
 	});
 }
-function S({ id: t, label: r, className: i, children: a, ...o }) {
-	let { grab: s, key: l, lifted: u } = p("SortableHandle"), d = n();
+function S({ id: n, label: r, className: i, children: a, ...o }) {
+	let { grab: s, key: l, lifted: u } = p("SortableHandle"), d = e();
 	return /* @__PURE__ */ c("button", {
 		type: "button",
 		"aria-label": d.reorder(r),
 		"data-sortable-label": r,
-		"aria-pressed": u === t,
-		onPointerDown: (e) => s(e, t),
-		onKeyDown: (e) => l(e, t, r),
-		className: e("text-muted-foreground hover:text-foreground grid size-8 shrink-0 cursor-grab touch-none place-items-center rounded-md outline-hidden select-none focus-ring active:cursor-grabbing", i),
+		"aria-pressed": u === n,
+		onPointerDown: (e) => s(e, n),
+		onKeyDown: (e) => l(e, n, r),
+		className: t("text-muted-foreground hover:text-foreground grid size-8 shrink-0 cursor-grab touch-none place-items-center rounded-md outline-hidden select-none focus-ring active:cursor-grabbing", i),
 		...o,
 		children: a ?? /* @__PURE__ */ c("svg", {
 			"aria-hidden": !0,

package/dist/sortable/tree.js

@@ -1,9 +1,9 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { readingKey as t } from "../utils/direction.js";
-import { useMergedRefs as n } from "../utils/refs.js";
-import { Slot as r } from "../utils/slot.js";
-import { useMessages as i } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { readingKey as n } from "../utils/direction.js";
+import { useMergedRefs as r } from "../utils/refs.js";
+import { Slot as i } from "../utils/slot.js";
 import { SortableContext as a, edgeScroll as o, scrollerOf as s, settle as c, shift as l, topsOf as u, useAnnouncer as d } from "./shared.js";
 import { indexTree as f, insertNode as p, nearestSlot as m, removeNode as h, treeSlots as g } from "./tree-model.js";
 import { useEffect as _, useLayoutEffect as v, useRef as y, useState as b } from "react";
@@ -11,7 +11,7 @@ import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region packages/sortable/tree.tsx
 var C = typeof window > "u" ? _ : v, w = "pointer-events-none fixed z-50 h-0.5 rounded-full bg-primary shadow-[0_0_10px_oklch(var(--glow)/calc(0.9*var(--glow-k)))] transition-[top,left,width] duration-100 before:absolute before:-top-[3px] before:-start-1 before:size-2 before:rounded-full before:border-2 before:border-primary before:bg-background", T = (e, t) => e.parentId === t.parentId && e.index === t.index;
 function E({ value: _, onValueChange: v, accepts: E, indent: k = 24, asChild: A, className: j, children: M, ref: N, ...P }) {
-	let F = y(null), I = n(F, N), [L, R] = b(null), z = i(), { say: B, region: V, host: H } = d(F), U = y(null), W = y(null), G = () => [...F.current?.querySelectorAll("[data-sortable-id]") ?? []].filter((e) => e.parentElement?.closest(".zen__sortable") === F.current), K = (e) => G().find((t) => t.dataset.sortableId === e), q = (e) => {
+	let F = y(null), I = r(F, N), [L, R] = b(null), z = e(), { say: B, region: V, host: H } = d(F), U = y(null), W = y(null), G = () => [...F.current?.querySelectorAll("[data-sortable-id]") ?? []].filter((e) => e.parentElement?.closest(".zen__sortable") === F.current), K = (e) => G().find((t) => t.dataset.sortableId === e), q = (e) => {
 		U.current = u(G()), v(e);
 	};
 	C(() => {
@@ -73,19 +73,19 @@ function E({ value: _, onValueChange: v, accepts: E, indent: k = 24, asChild: A,
 			}
 		};
 		r.addEventListener("pointermove", A), r.addEventListener("pointerup", j), r.addEventListener("pointercancel", j);
-	}, Q = (e, n, r) => {
+	}, Q = (e, t, r) => {
 		if (e.key === " " || e.key === "Enter") {
-			e.preventDefault(), L === n ? (R(null), W.current = null, B(z.dropped(r, Y(_, n)))) : L || (R(n), W.current = _, B(z.pickedUp(r, Y(_, n))));
+			e.preventDefault(), L === t ? (R(null), W.current = null, B(z.dropped(r, Y(_, t)))) : L || (R(t), W.current = _, B(z.pickedUp(r, Y(_, t))));
 			return;
 		}
-		if (L !== n) return;
+		if (L !== t) return;
 		if (e.key === "Escape") {
 			e.preventDefault();
-			let t = W.current ?? _;
-			R(null), W.current = null, t !== _ && q(t), B(z.putBack(r, Y(t, n)));
+			let n = W.current ?? _;
+			R(null), W.current = null, n !== _ && q(n), B(z.putBack(r, Y(n, t)));
 			return;
 		}
-		let i = t(e.key, e.currentTarget);
+		let i = n(e.key, e.currentTarget);
 		if (![
 			"ArrowUp",
 			"ArrowDown",
@@ -93,7 +93,7 @@ function E({ value: _, onValueChange: v, accepts: E, indent: k = 24, asChild: A,
 			"ArrowRight"
 		].includes(i)) return;
 		e.preventDefault();
-		let a = X(n), o = a.slots.find((e) => T(e, a.place));
+		let a = X(t), o = a.slots.find((e) => T(e, a.place));
 		if (!o) return;
 		let s;
 		if (i === "ArrowLeft" || i === "ArrowRight") {
@@ -105,7 +105,7 @@ function E({ value: _, onValueChange: v, accepts: E, indent: k = 24, asChild: A,
 		}
 		if (!s) return;
 		let c = p(a.tree, s, a.node);
-		q(c), B(z.movedTo(r, Y(c, n)));
+		q(c), B(z.movedTo(r, Y(c, t)));
 	}, $ = {
 		...P,
 		ref: I
@@ -116,13 +116,13 @@ function E({ value: _, onValueChange: v, accepts: E, indent: k = 24, asChild: A,
 			key: Q,
 			lifted: L
 		},
-		children: [A ? /* @__PURE__ */ x(r, {
+		children: [A ? /* @__PURE__ */ x(i, {
 			...$,
-			className: e("zen__sortable", j),
+			className: t("zen__sortable", j),
 			children: M
 		}) : /* @__PURE__ */ x("ul", {
 			...$,
-			className: e("zen__sortable relative flex flex-col", j),
+			className: t("zen__sortable relative flex flex-col", j),
 			children: M
 		}), V]
 	});

package/dist/sparkline/index.js

@@ -1,12 +1,12 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMessages as t } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import { useSeen as n } from "../utils/useSeen.js";
 import { useId as r, useRef as i } from "react";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region packages/sparkline/index.tsx
 function c({ values: c, area: l = !0, tone: u = "default", className: d, ref: f, ...p }) {
-	let m = t(), h = r(), g = i(null), _ = n(g);
+	let m = e(), h = r(), g = i(null), _ = n(g);
 	if (c.length < 2) return null;
 	let v = Math.min(...c), y = Math.max(...c) - v || 1, b = c.map((e, t) => [t / (c.length - 1) * 100, 38 - (e - v) / y * 36]).map(([e, t], n) => `${n ? "L" : "M"}${e.toFixed(2)},${t.toFixed(2)}`).join(""), x = u === "default" ? "var(--color-primary)" : u === "negative" ? "var(--color-destructive)" : "var(--color-muted-foreground)", S = c[0], C = c[c.length - 1];
 	return /* @__PURE__ */ s("svg", {
@@ -19,7 +19,7 @@ function c({ values: c, area: l = !0, tone: u = "default", className: d, ref: f,
 		"aria-label": m.fromTo(String(S), String(C)),
 		viewBox: "0 0 100 40",
 		preserveAspectRatio: "none",
-		className: e("zen__sparkline h-8 w-24 overflow-visible", d),
+		className: t("zen__sparkline h-8 w-24 overflow-visible", d),
 		style: { color: x },
 		...p,
 		children: [l && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("defs", { children: /* @__PURE__ */ s("linearGradient", {

package/dist/stepper/index.js

@@ -1,17 +1,17 @@
 "use client";
-import e from "../icons/micro/check.js";
-import { cx as t } from "../utils/cx.js";
-import { useMessages as n } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import t from "../icons/micro/check.js";
+import { cx as n } from "../utils/cx.js";
 import { Children as r, isValidElement as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region packages/stepper/index.tsx
 function s({ value: s, className: c, children: l, "aria-label": u, ...d }) {
-	let f = n(), p = u ?? f.progress, m = r.toArray(l).filter(i);
+	let f = e(), p = u ?? f.progress, m = r.toArray(l).filter(i);
 	return /* @__PURE__ */ a("ol", {
 		"aria-label": p,
-		className: t("zen__stepper flex w-full items-start", c),
+		className: n("zen__stepper flex w-full items-start", c),
 		...d,
-		children: m.map((n, r) => {
+		children: m.map((e, r) => {
 			let i = r < s ? "done" : r === s ? "current" : "upcoming";
 			return /* @__PURE__ */ o("li", {
 				"data-state": i,
@@ -21,26 +21,26 @@ function s({ value: s, className: c, children: l, "aria-label": u, ...d }) {
 					r > 0 && /* @__PURE__ */ a("span", {
 						"aria-hidden": !0,
 						className: "bg-tint/10 absolute start-[calc(-50%+1.25rem)] end-[calc(50%+1.25rem)] top-3.5 h-px overflow-hidden",
-						children: /* @__PURE__ */ a("span", { className: t("bg-primary ease-out-soft block h-full origin-left transition-transform rtl:origin-right duration-500", i === "upcoming" && "scale-x-0") })
+						children: /* @__PURE__ */ a("span", { className: n("bg-primary ease-out-soft block h-full origin-left transition-transform rtl:origin-right duration-500", i === "upcoming" && "scale-x-0") })
 					}),
 					/* @__PURE__ */ a("span", {
 						"aria-hidden": !0,
-						className: t("grid size-7 place-items-center rounded-full text-xs font-semibold tabular-nums transition-[background-color,color,box-shadow] duration-300", i === "upcoming" && "bg-tint/[0.05] text-muted-foreground shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.12)]", i === "current" && "bg-primary/15 text-foreground shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.5),0_0_18px_-2px_oklch(var(--glow)/calc(0.7*var(--glow-k)))]", i === "done" && "bg-primary text-primary-foreground"),
-						children: i === "done" ? /* @__PURE__ */ a(e, { className: "size-3.5" }) : r + 1
+						className: n("grid size-7 place-items-center rounded-full text-xs font-semibold tabular-nums transition-[background-color,color,box-shadow] duration-300", i === "upcoming" && "bg-tint/[0.05] text-muted-foreground shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.12)]", i === "current" && "bg-primary/15 text-foreground shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.5),0_0_18px_-2px_oklch(var(--glow)/calc(0.7*var(--glow-k)))]", i === "done" && "bg-primary text-primary-foreground"),
+						children: i === "done" ? /* @__PURE__ */ a(t, { className: "size-3.5" }) : r + 1
 					}),
-					n,
+					e,
 					/* @__PURE__ */ a("span", {
 						className: "sr-only",
 						children: i === "done" ? ", done" : i === "upcoming" ? ", not started" : ""
 					})
 				]
-			}, n.key ?? r);
+			}, e.key ?? r);
 		})
 	});
 }
-function c({ description: e, className: n, children: r }) {
+function c({ description: e, className: t, children: r }) {
 	return /* @__PURE__ */ o("span", {
-		className: t("flex flex-col gap-0.5 px-1", n),
+		className: n("flex flex-col gap-0.5 px-1", t),
 		children: [/* @__PURE__ */ a("span", {
 			className: "text-muted-foreground group-data-[state=current]/step:text-foreground group-data-[state=done]/step:text-foreground text-sm font-medium",
 			children: r

package/dist/tab-bar/index.d.ts

@@ -2,11 +2,13 @@ import { ComponentProps, ReactNode } from 'react';
 /**
  * Phone navigation: a glass bar fixed to the bottom, clear of the home
  * indicator, hidden from `hideFrom` up (default md). Fill it with TabBarItems.
+ * Its height is kept in `--zen-tab-bar-height` on its parent (0px while
+ * hidden): a PlayerBar beside it sits on it, and the page can pad its end by it.
  * Inside a rounded frame, round the bar to match (className, e.g.
  * rounded-b-[15px]): with GPU compositing, Chrome doesn't clip a blurred
  * backdrop to an ancestor's rounded corners, only to the element's own.
  */
-export default function TabBar({ hideFrom, className, children, ...rest }: TabBarProps): import('react').JSX.Element;
+export default function TabBar({ hideFrom, className, children, ref, ...rest }: TabBarProps): import('react').JSX.Element;
 /**
  * One destination: an icon over a label. `active` marks the current page; with
  * `asChild`, the styles go onto your own link (e.g. a router's NavLink, which
@@ -20,7 +22,7 @@ export interface TabBarProps extends ComponentProps<'nav'> {
 export interface TabBarItemProps extends ComponentProps<'a'> {
     icon?: ReactNode;
     active?: boolean;
-    /** Style the single child element (a router link holding the icon and label) instead of rendering an <a>. */
+    /** Style the single child element (a router link holding the label) instead of rendering an <a>; `icon` goes inside it. */
     asChild?: boolean;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/tab-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tab-bar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAiB5F;AAOD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAYlG;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,iEAAiE;IACjE,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CACzC;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tab-bar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,cAAc,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAEpE;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAoBjG;AAOD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAgBlG;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,iEAAiE;IACjE,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CACzC;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2HAA2H;IAC3H,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/tab-bar/index.js

@@ -1,34 +1,39 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { Slot as t } from "../utils/slot.js";
-import { Children as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useMergedRefs as t } from "../utils/refs.js";
+import { Slot as n } from "../utils/slot.js";
+import { useHeightVar as r } from "../utils/useHeightVar.js";
+import { Children as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region packages/tab-bar/index.tsx
-function a({ hideFrom: t = "md", className: i, children: a, ...o }) {
-	return /* @__PURE__ */ r("nav", {
-		className: e("zen__tab-bar glass glass-blur glow-edge fixed inset-x-0 bottom-0 z-40 rounded-none border-x-0! border-b-0! pb-[env(safe-area-inset-bottom)]", t === "sm" && "sm:hidden", t === "md" && "md:hidden", t === "lg" && "lg:hidden", i),
-		...o,
-		children: /* @__PURE__ */ r("div", {
+function c({ hideFrom: n = "md", className: s, children: c, ref: l, ...u }) {
+	let d = a(null);
+	return r(d, "--zen-tab-bar-height"), /* @__PURE__ */ o("nav", {
+		ref: t(d, l),
+		className: e("zen__tab-bar glass glass-blur glow-edge fixed inset-x-0 bottom-0 z-40 rounded-none border-x-0! border-b-0! pb-[env(safe-area-inset-bottom)]", n === "sm" && "sm:hidden", n === "md" && "md:hidden", n === "lg" && "lg:hidden", s),
+		...u,
+		children: /* @__PURE__ */ o("div", {
 			className: "grid",
-			style: { gridTemplateColumns: `repeat(${n.count(a)}, 1fr)` },
-			children: a
+			style: { gridTemplateColumns: `repeat(${i.count(c)}, 1fr)` },
+			children: c
 		})
 	});
 }
-var o = e("flex flex-col items-center gap-1 py-2.5 text-2xs outline-hidden transition-colors duration-200 focus-ring focus-visible:ring-inset", "text-muted-foreground aria-[current=page]:text-primary [&_svg]:size-5 aria-[current=page]:[&_svg]:drop-shadow-[0_0_8px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]");
-function s({ icon: n, active: a, asChild: s, className: c, children: l, ...u }) {
+var l = e("flex flex-col items-center gap-1 py-2.5 text-2xs outline-hidden transition-colors duration-200 focus-ring focus-visible:ring-inset", "text-muted-foreground aria-[current=page]:text-primary [&_svg]:size-5 aria-[current=page]:[&_svg]:drop-shadow-[0_0_8px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]");
+function u({ icon: t, active: r, asChild: i, className: a, children: c, ...u }) {
 	let d = {
 		...u,
-		"aria-current": a ? "page" : void 0,
-		className: e(o, c)
+		"aria-current": r ? "page" : void 0,
+		className: e(l, a)
 	};
-	return s ? (a || delete d["aria-current"], /* @__PURE__ */ r(t, {
+	return i ? (r || delete d["aria-current"], /* @__PURE__ */ o(n, {
 		...d,
-		children: l
-	})) : /* @__PURE__ */ i("a", {
+		before: t,
+		children: c
+	})) : /* @__PURE__ */ s("a", {
 		...d,
-		children: [n, l]
+		children: [t, c]
 	});
 }
 //#endregion
-export { s as TabBarItem, a as default };
+export { u as TabBarItem, c as default };

package/dist/table/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMessages as t } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import { reducedMotion as n } from "../utils/motion.js";
 import r from "../icons/chevron-down.js";
 import i from "../icons/chevron-up.js";
@@ -9,7 +9,7 @@ import { TableSwipeAction as l, TableSwipeRow as u } from "./swipe.js";
 import { useCallback as d, useEffect as f, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region packages/table/index.tsx
-function y({ label: t, className: n, ref: r, onScroll: i, ...a }) {
+function y({ label: e, className: n, ref: r, onScroll: i, ...a }) {
 	let o = h(null), s = d(() => {
 		let e = o.current;
 		if (!e) return;
@@ -23,7 +23,7 @@ function y({ label: t, className: n, ref: r, onScroll: i, ...a }) {
 		let t = typeof ResizeObserver > "u" ? null : new ResizeObserver(s);
 		return t?.observe(e), e.firstElementChild && t?.observe(e.firstElementChild), () => t?.disconnect();
 	}, [s]), /* @__PURE__ */ _("div", {
-		className: e("zen__table-panel glass glow-edge isolate flex flex-col overflow-hidden rounded-xl", n),
+		className: t("zen__table-panel glass glow-edge isolate flex flex-col overflow-hidden rounded-xl", n),
 		children: /* @__PURE__ */ _("div", {
 			ref: (e) => {
 				o.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
@@ -31,23 +31,23 @@ function y({ label: t, className: n, ref: r, onScroll: i, ...a }) {
 			onScroll: (e) => {
 				s(), i?.(e);
 			},
-			role: t ? "region" : void 0,
-			"aria-label": t,
-			tabIndex: t ? 0 : void 0,
+			role: e ? "region" : void 0,
+			"aria-label": e,
+			tabIndex: e ? 0 : void 0,
 			className: "zen__table-container focus-ring relative min-h-0 overflow-auto rounded-[inherit] outline-hidden will-change-scroll focus-visible:ring-inset",
 			...a
 		})
 	});
 }
-function b({ className: t, ...n }) {
+function b({ className: e, ...n }) {
 	return /* @__PURE__ */ _("table", {
-		className: e("zen__table w-full border-separate border-spacing-0 text-sm", t),
+		className: t("zen__table w-full border-separate border-spacing-0 text-sm", e),
 		...n
 	});
 }
-function x({ className: t, ...n }) {
+function x({ className: e, ...n }) {
 	return /* @__PURE__ */ _("thead", {
-		className: e("zen__sticky-top sticky top-0 z-20", t),
+		className: t("zen__sticky-top sticky top-0 z-20", e),
 		...n
 	});
 }
@@ -113,29 +113,29 @@ var w = typeof window > "u" ? f : p, T = {
 	duration: 260,
 	easing: "ease-out"
 };
-function O({ className: t, ...n }) {
+function O({ className: e, ...n }) {
 	return /* @__PURE__ */ _("tfoot", {
-		className: e("zen__sticky-bottom sticky bottom-0 z-20", t),
+		className: t("zen__sticky-bottom sticky bottom-0 z-20", e),
 		...n
 	});
 }
-function k({ selected: t, className: n, ...r }) {
+function k({ selected: e, className: n, ...r }) {
 	return /* @__PURE__ */ _("tr", {
-		"data-selected": t || void 0,
-		className: e("group", n),
+		"data-selected": e || void 0,
+		className: t("group", n),
 		...r
 	});
 }
-function A({ numeric: t, sticky: n, sortDirection: a, onSort: o, scope: s = "col", className: c, children: l, ...u }) {
+function A({ numeric: e, sticky: n, sortDirection: a, onSort: o, scope: s = "col", className: c, children: l, ...u }) {
 	return /* @__PURE__ */ _("th", {
 		scope: s,
 		"aria-sort": a === "asc" ? "ascending" : a === "desc" ? "descending" : void 0,
-		className: e("border-tint/[0.07] text-muted-foreground border-b px-3 py-2.5 align-middle text-xs leading-5 font-medium tracking-wider whitespace-nowrap uppercase", n === "start" && "zen__sticky-start sticky start-0 z-10", t ? "text-end" : "text-start", c),
+		className: t("border-tint/[0.07] text-muted-foreground border-b px-3 py-2.5 align-middle text-xs leading-5 font-medium tracking-wider whitespace-nowrap uppercase", n === "start" && "zen__sticky-start sticky start-0 z-10", e ? "text-end" : "text-start", c),
 		...u,
 		children: o ? /* @__PURE__ */ v("button", {
 			type: "button",
 			onClick: o,
-			className: e("hover:text-foreground touch-target inline-flex cursor-pointer items-center gap-1 align-middle leading-5 tracking-wider uppercase", t && "flex-row-reverse"),
+			className: t("hover:text-foreground touch-target inline-flex cursor-pointer items-center gap-1 align-middle leading-5 tracking-wider uppercase", e && "flex-row-reverse"),
 			children: [l, /* @__PURE__ */ _("span", {
 				"aria-hidden": !0,
 				className: "inline-flex w-3",
@@ -150,15 +150,15 @@ function A({ numeric: t, sticky: n, sortDirection: a, onSort: o, scope: s = "col
 		}) : l
 	});
 }
-function j({ numeric: t, sticky: n, className: r, ...i }) {
+function j({ numeric: e, sticky: n, className: r, ...i }) {
 	return /* @__PURE__ */ _("td", {
-		className: e("border-tint/[0.045] border-b px-3 py-2.5 transition-colors duration-150", "group-hover:[background-image:linear-gradient(oklch(var(--tint)/0.035),oklch(var(--tint)/0.035))]", "group-data-selected:[background-image:linear-gradient(oklch(var(--primary)/0.09),oklch(var(--primary)/0.09))]", n === "start" && "zen__sticky-start sticky start-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)] rtl:shadow-[inset_1px_0_0_oklch(var(--tint)/0.06)]", t && "text-end tabular-nums", r),
+		className: t("border-tint/[0.045] border-b px-3 py-2.5 transition-colors duration-150", "group-hover:[background-image:linear-gradient(oklch(var(--tint)/0.035),oklch(var(--tint)/0.035))]", "group-data-selected:[background-image:linear-gradient(oklch(var(--primary)/0.09),oklch(var(--primary)/0.09))]", n === "start" && "zen__sticky-start sticky start-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)] rtl:shadow-[inset_1px_0_0_oklch(var(--tint)/0.06)]", e && "text-end tabular-nums", r),
 		...i
 	});
 }
-function M({ numeric: t, sticky: n, className: r, ...i }) {
+function M({ numeric: e, sticky: n, className: r, ...i }) {
 	return /* @__PURE__ */ _("td", {
-		className: e("border-tint/[0.07] h-9 border-t px-3 font-medium whitespace-nowrap", n === "start" && "zen__sticky-start sticky start-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)] rtl:shadow-[inset_1px_0_0_oklch(var(--tint)/0.06)]", t && "text-end tabular-nums", r),
+		className: t("border-tint/[0.07] h-9 border-t px-3 font-medium whitespace-nowrap", n === "start" && "zen__sticky-start sticky start-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)] rtl:shadow-[inset_1px_0_0_oklch(var(--tint)/0.06)]", e && "text-end tabular-nums", r),
 		...i
 	});
 }
@@ -176,10 +176,10 @@ function N({ height: e, colSpan: t }) {
 		})
 	});
 }
-function P({ colSpan: e, children: n }) {
-	let r = t();
+function P({ colSpan: t, children: n }) {
+	let r = e();
 	return /* @__PURE__ */ _("tr", { children: /* @__PURE__ */ _("td", {
-		colSpan: e,
+		colSpan: t,
 		className: "text-muted-foreground px-3 py-8 text-center",
 		children: n ?? r.nothingHere
 	}) });