@rinzai/zen 0.15.0 → 0.16.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/seek-bar/index.tsx"],"names":[],"mappings":"AACA,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQlD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC5B,WAAW,EACX,QAAQ,EACR,QAAY,EACZ,OAAe,EACf,YAAgB,EAChB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EAAE,YAAY,+BA6Gd;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACtC,WAAW,EACX,OAAO,GAAG,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,eAAe,GAAG,eAAe,GAAG,iBAAiB,CAC5G;IACG,sBAAsB;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yGAAyG;IACzG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/seek-bar/index.tsx"],"names":[],"mappings":"AACA,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQlD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC5B,WAAW,EACX,QAAQ,EACR,QAAY,EACZ,OAAe,EACf,YAAgB,EAChB,MAAM,EACN,KAAgB,EAChB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EAAE,YAAY,+BA8Hd;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACtC,WAAW,EACX,OAAO,GAAG,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,eAAe,GAAG,eAAe,GAAG,iBAAiB,CAC5G;IACG,sBAAsB;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yGAAyG;IACzG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,wIAAwI;IACxI,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC9B"}

package/dist/seek-bar/index.js

@@ -1,45 +1,45 @@
 "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 n from "../slider/index.js";
 import { formatDuration as r } from "../utils/duration.js";
 import { useLayoutEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region packages/seek-bar/index.tsx
 var l = 5;
-function u({ currentTime: u, duration: d, buffered: f = 0, playing: p = !1, playbackRate: m = 1, onSeek: h, onKeyDown: g, disabled: _, className: v, ...y }) {
-	let b = t(), [x, S] = o(null), [C, w] = o(null), T = C && C.from === u ? C.at : null, E = Math.max(0, Math.min(x ?? T ?? u, d)), D = a(null), O = a(null), k = p && x === null && T === null && d > 0 && E < d, A = a(null);
+function u({ currentTime: u, duration: d, buffered: f = 0, playing: p = !1, playbackRate: m = 1, onSeek: h, times: g = "beside", onKeyDown: _, disabled: v, className: y, ...b }) {
+	let x = e(), [S, C] = o(null), [w, T] = o(null), E = w && w.from === u ? w.at : null, D = Math.max(0, Math.min(S ?? E ?? u, d)), O = a(null), k = a(null), A = p && S === null && E === null && d > 0 && D < d, j = a(null);
 	i(() => {
-		let e = [D.current, O.current].filter((e) => e !== null);
+		let e = [O.current, k.current].filter((e) => e !== null);
 		if (!e.length) return;
-		let t = A.current;
-		if (k && t && t.rate === m && t.duration === d) {
+		let t = j.current;
+		if (A && t && t.rate === m && t.duration === d) {
 			let e = Number(t.animations[0].currentTime ?? 0) / 1e3;
-			if (Math.abs(t.from + e * m - E) < .15) return;
+			if (Math.abs(t.from + e * m - D) < .15) return;
 		}
-		t?.animations.forEach((e) => e.cancel()), A.current = null;
+		t?.animations.forEach((e) => e.cancel()), j.current = null;
 		let n = getComputedStyle(e[0]).direction === "rtl" ? -1 : 1, r = (e) => `${d > 0 ? n * e * 100 / d : 0}cqw`;
-		for (let t of e) t.style.translate = r(E);
-		if (!k) return;
-		let i = e.map((e) => e.animate([{ translate: r(E) }, { translate: r(d) }], {
-			duration: (d - E) / m * 1e3,
+		for (let t of e) t.style.translate = r(D);
+		if (!A) return;
+		let i = e.map((e) => e.animate([{ translate: r(D) }, { translate: r(d) }], {
+			duration: (d - D) / m * 1e3,
 			easing: "linear",
 			fill: "forwards"
 		}));
-		A.current = {
+		j.current = {
 			animations: i,
-			from: E,
+			from: D,
 			rate: m,
 			duration: d
 		};
 	}, [
-		E,
+		D,
 		d,
-		k,
+		A,
 		m
-	]), i(() => () => A.current?.animations.forEach((e) => e.cancel()), []);
-	let j = (e) => {
-		if (g?.(e), e.defaultPrevented) return;
+	]), i(() => () => j.current?.animations.forEach((e) => e.cancel()), []);
+	let M = (e) => {
+		if (_?.(e), e.defaultPrevented) return;
 		let t = getComputedStyle(e.currentTarget).direction === "rtl", n = {
 			ArrowUp: 1,
 			ArrowDown: -1,
@@ -48,52 +48,53 @@ function u({ currentTime: u, duration: d, buffered: f = 0, playing: p = !1, play
 		}[e.key];
 		if (!n) return;
 		e.preventDefault();
-		let r = Math.max(0, Math.min(E + n * l, d));
-		w({
+		let r = Math.max(0, Math.min(D + n * l, d));
+		T({
 			at: r,
 			from: u
 		}), h(r);
-	}, M = _ || d <= 0, N = d > 0 ? Math.min(f, d) / d * 100 : 0, P = { width: `${r(d).length}ch` };
+	}, N = v || d <= 0, P = d > 0 ? Math.min(f, d) / d * 100 : 0, F = g === "below", I = F ? void 0 : { width: `${r(d).length}ch` };
 	return /* @__PURE__ */ c("div", {
-		className: e("zen__seek-bar flex items-center gap-3", v),
+		"data-times": g,
+		className: t("zen__seek-bar flex items-center", F ? "flex-wrap justify-between gap-y-1" : "gap-3", y),
 		children: [
 			/* @__PURE__ */ s("span", {
-				className: "text-muted-foreground shrink-0 text-end text-xs tabular-nums",
-				style: P,
-				children: r(E)
+				className: t("text-muted-foreground shrink-0 text-xs tabular-nums", !F && "text-end"),
+				style: I,
+				children: r(D)
 			}),
 			/* @__PURE__ */ c("div", {
-				className: e("group relative h-5 min-w-0 flex-1", M && "opacity-50"),
+				className: t("group relative h-5 min-w-0 flex-1", F && "order-first basis-full", N && "opacity-50"),
 				children: [
 					/* @__PURE__ */ s(n, {
-						"aria-label": b.seek,
+						"aria-label": x.seek,
 						min: 0,
 						max: d || 1,
 						step: "any",
-						value: E,
-						disabled: M,
-						valueText: () => b.timeOf(r(E), r(d)),
+						value: D,
+						disabled: N,
+						valueText: () => x.timeOf(r(D), r(d)),
 						className: "absolute inset-0 z-10 h-full opacity-0",
-						onKeyDown: j,
-						onValueChange: S,
+						onKeyDown: M,
+						onValueChange: C,
 						onValueCommit: (e) => {
-							S(null), w({
+							C(null), T({
 								at: e,
 								from: u
 							}), h(e);
 						},
-						...y
+						...b
 					}),
 					/* @__PURE__ */ c("div", {
 						"aria-hidden": !0,
 						className: "absolute inset-x-0 top-1/2 h-2.5 -translate-y-1/2 overflow-hidden rounded-full bg-[oklch(var(--muted))]",
 						children: [/* @__PURE__ */ s("div", {
 							className: "absolute inset-y-0 start-0 bg-[oklch(var(--tint)/0.22)] transition-[width] duration-300",
-							style: { width: `${N}%` }
+							style: { width: `${P}%` }
 						}), /* @__PURE__ */ s("div", {
 							className: "[container-type:inline-size] absolute inset-x-2.5 inset-y-0",
 							children: /* @__PURE__ */ s("div", {
-								ref: D,
+								ref: O,
 								className: "bg-primary absolute inset-y-0 end-full w-[calc(100%+0.625rem)]"
 							})
 						})]
@@ -102,7 +103,7 @@ function u({ currentTime: u, duration: d, buffered: f = 0, playing: p = !1, play
 						"aria-hidden": !0,
 						className: "[container-type:inline-size] pointer-events-none absolute inset-x-2.5 inset-y-0",
 						children: /* @__PURE__ */ s("div", {
-							ref: O,
+							ref: k,
 							className: "bg-primary group-has-[input:focus-visible]:ring-ring/40 absolute start-0 top-1/2 -ms-2.5 -mt-2.5 size-5 rounded-full border-2 border-white shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] group-has-[input:focus-visible]:ring-4"
 						})
 					})
@@ -110,7 +111,7 @@ function u({ currentTime: u, duration: d, buffered: f = 0, playing: p = !1, play
 			}),
 			/* @__PURE__ */ s("span", {
 				className: "text-muted-foreground shrink-0 text-xs tabular-nums",
-				style: P,
+				style: I,
 				children: r(d)
 			})
 		]

package/dist/select/index.js

@@ -1,9 +1,9 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useTypeahead as t } from "../utils/typeahead.js";
-import { useControllable as n } from "../utils/useControllable.js";
-import { useAnchoredPopup as r } from "../utils/useAnchoredPopup.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 { useTypeahead as n } from "../utils/typeahead.js";
+import { useControllable as r } from "../utils/useControllable.js";
+import { useAnchoredPopup as i } from "../utils/useAnchoredPopup.js";
 import { CheckIcon as a } from "../utils/status-icons.js";
 import { useFieldProps as o } from "../field/index.js";
 import { FIELD_SIZE as s, POPUP as c, TRIGGER as l } from "../utils/styles.js";
@@ -14,14 +14,14 @@ import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region packages/select/index.tsx
 var w = m(null);
 function T({ value: a, defaultValue: f = null, onValueChange: p, placeholder: m, disabled: h = !1, size: g = "default", name: v, id: T, className: D, listClassName: O, children: k, style: A, onKeyDown: j, ...M }) {
-	let N = i(), P = m ?? N.selectPlaceholder, [F, I, L] = n(a, f, p), R = y(null), z = te(), B = T ?? z, ne = o({
+	let N = e(), P = m ?? N.selectPlaceholder, [F, I, L] = r(a, f, p), R = y(null), z = te(), B = T ?? z, ne = o({
 		...M,
 		id: T
-	}), [V, H] = b(null), U = t(), [W, G] = b(/* @__PURE__ */ new Map()), K = () => Array.from(R.current?.querySelectorAll("[role=\"option\"]") ?? []).map((e) => ({
+	}), [V, H] = b(null), U = n(), [W, G] = b(/* @__PURE__ */ new Map()), K = () => Array.from(R.current?.querySelectorAll("[role=\"option\"]") ?? []).map((e) => ({
 		value: e.dataset.value,
 		label: e.dataset.label ?? "",
 		disabled: e.getAttribute("aria-disabled") === "true"
-	})), q = r({
+	})), q = i({
 		matchWidth: !0,
 		onOpenChange: (e) => {
 			if (!e) return;
@@ -82,9 +82,9 @@ function T({ value: a, defaultValue: f = null, onValueChange: p, placeholder: m,
 			onKeyDown: (e) => {
 				j?.(e), ["ArrowDown", "ArrowUp"].includes(e.key) && !q.open && (e.preventDefault(), q.setOpen(!0));
 			},
-			className: e("zen__select group", l, s[g], "w-full", q.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", D),
+			className: t("zen__select group", l, s[g], "w-full", q.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", D),
 			children: [/* @__PURE__ */ S("span", {
-				className: e("truncate", Z === void 0 && "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"),
+				className: t("truncate", Z === void 0 && "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"),
 				children: Z ?? P
 			}), /* @__PURE__ */ S(d, { open: q.open })]
 		}),
@@ -95,7 +95,7 @@ function T({ value: a, defaultValue: f = null, onValueChange: p, placeholder: m,
 		}),
 		/* @__PURE__ */ S("div", {
 			...q.popupProps,
-			className: e("zen__popover", c, "overflow-visible py-1", O),
+			className: t("zen__popover", c, "overflow-visible py-1", O),
 			children: /* @__PURE__ */ S("div", {
 				ref: R,
 				role: "listbox",
@@ -131,28 +131,28 @@ function E(e, t) {
 	});
 }
 var D = (e) => typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(D).join("") : "";
-function O({ value: t, label: n, disabled: r, className: i, children: o }) {
+function O({ value: e, label: n, disabled: r, className: i, children: o }) {
 	let s = g(w);
 	if (!s) throw Error("SelectItem must be inside a Select");
 	let c = y(null), l = n ?? D(o), u = s.register;
-	v(() => u(t, l || c.current?.textContent?.trim() || ""), [
+	v(() => u(e, l || c.current?.textContent?.trim() || ""), [
 		u,
-		t,
+		e,
 		l
 	]);
-	let d = s.value === t;
+	let d = s.value === e;
 	return /* @__PURE__ */ C("div", {
 		ref: c,
-		id: s.optionId(t),
+		id: s.optionId(e),
 		role: "option",
-		"data-value": t,
+		"data-value": e,
 		"data-label": l || void 0,
 		"aria-selected": d,
 		"aria-disabled": r || void 0,
-		"data-highlighted": s.active === t || void 0,
-		onMouseMove: () => !r && s.setActive(t),
-		onClick: () => s.choose(t),
-		className: e("grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 px-3 py-2 text-sm outline-hidden select-none", "data-highlighted:bg-muted aria-disabled:cursor-not-allowed aria-disabled:opacity-50", i),
+		"data-highlighted": s.active === e || void 0,
+		onMouseMove: () => !r && s.setActive(e),
+		onClick: () => s.choose(e),
+		className: t("grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 px-3 py-2 text-sm outline-hidden select-none", "data-highlighted:bg-muted aria-disabled:cursor-not-allowed aria-disabled:opacity-50", i),
 		children: [/* @__PURE__ */ S("span", {
 			className: "text-primary col-start-1",
 			"aria-hidden": !0,

package/dist/sortable/index.d.ts

@@ -12,11 +12,23 @@ export { flattenTree, type SortableNode, type SortableRow } from './tree-model';
  * With `asChild` (and `asChild` on the items), your own elements instead: a
  * TableBody of TableRows, say, one per group, each sorted on its own.
  */
-export declare function SortableList({ value, onValueChange, asChild, className, children, ref, ...rest }: SortableListProps): import('react').JSX.Element;
+export declare function SortableList({ value, onValueChange, itemHeight, onLiftedChange, asChild, className, children, ref, ...rest }: SortableListProps): import('react').JSX.Element;
 export interface SortableListProps extends ComponentProps<'ul'> {
     /** The items' ids, in order. */
     value: readonly string[];
     onValueChange: (value: string[]) => void;
+    /**
+     * For a virtualized list (useVirtualList), its rows' height, gap included:
+     * render just the items in view, each placed at its place in `value` times
+     * this, and the drag works from `value` instead of the rows on screen.
+     */
+    itemHeight?: number;
+    /**
+     * When an item is picked up (by its handle, or from the keyboard), and when it's
+     * put down (null). A virtualized list keeps that row rendered meanwhile
+     * (useVirtualList's `keep`), so it stays under the pointer as the list scrolls.
+     */
+    onLiftedChange?: (id: string | null) => void;
     /** Put the list's props on your own element (the single child, e.g. a TableBody) instead of a ul. */
     asChild?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/sortable/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAA6E,MAAM,OAAO,CAAC;AAIlH,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC1G,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhF;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BAkInH;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,gCAAgC;IAChC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,qGAAqG;IACrG,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/sortable/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAA6E,MAAM,OAAO,CAAC;AAIlH,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC1G,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhF;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,aAAa,EACb,UAAU,EACV,cAAc,EACd,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACV,EAAE,iBAAiB,+BAmKnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,gCAAgC;IAChC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,qGAAqG;IACrG,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

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