@rinzai/zen 0.11.0 → 0.14.0

package/dist/sortable/index.js

@@ -1,147 +1,85 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { reducedMotion as t } from "../utils/motion.js";
-import { createContext as n, useContext as r, useEffect as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+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 { 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";
+import { useEffect as h, useLayoutEffect as g, useRef as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region packages/sortable/index.tsx
-var u = typeof window > "u" ? i : a, d = {
-	duration: 220,
-	easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
-}, f = 48, p = n(null);
-function m(e) {
-	let t = r(p);
-	if (!t) throw Error(`<${e}> must be inside <SortableList>`);
-	return t;
-}
-var h = (e, t, n) => {
+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 g({ value: n, onChange: r, className: i, children: a, ...m }) {
-	let g = o(null), [_, v] = s(null), [b, x] = s(""), S = o(null), C = o(null), w = () => [...g.current?.querySelectorAll(":scope > [data-sortable-id]") ?? []], T = () => new Map(w().map((e) => [e.dataset.sortableId, e.getBoundingClientRect().top])), E = (e) => {
-		S.current = T(), r(e);
+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);
 	};
-	return u(() => {
-		let e = S.current;
-		if (S.current = null, e) for (let n of w()) {
-			n.style.removeProperty("translate");
-			let r = e.get(n.dataset.sortableId), i = r === void 0 ? 0 : r - n.getBoundingClientRect().top;
-			i && !t() && n.animate?.({ translate: [`0 ${i}px`, "0 0"] }, d);
+	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 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) => {
+			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)));
+		};
+		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")) {
+			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") {
+			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)));
 		}
-	}, [n]), /* @__PURE__ */ l(p.Provider, {
+	}, L = {
+		...C,
+		ref: T
+	};
+	return /* @__PURE__ */ b(i.Provider, {
 		value: {
-			grab: (e, r) => {
-				if (e.button !== 0 || _) return;
-				let i = w(), a = i.findIndex((e) => e.dataset.sortableId === r), o = i[a];
-				if (!o) return;
-				e.preventDefault();
-				let s = e.currentTarget;
-				s.setPointerCapture?.(e.pointerId);
-				let c = y(g.current), l = c.scrollTop, u = e.clientY, p = i.map((e) => e.getBoundingClientRect()), m = p.length > 1 ? p[1].top - p[0].bottom : 0, v = p[a].height + m, b = p.map((e) => e.top + e.height / 2), x = a, C = e.clientY, D = 0;
-				o.dataset.dragging = "", g.current.dataset.sorting = "";
-				let O = () => {
-					let e = C - u + c.scrollTop - l;
-					o.style.translate = `0 ${e}px`;
-					let t = b[a] + e, n = x;
-					for (x = a; x < i.length - 1 && t > b[x + 1];) x++;
-					for (; x > 0 && t < b[x - 1];) x--;
-					x !== n && navigator.vibrate?.(5), i.forEach((e, t) => {
-						if (t === a) return;
-						let n = a < t && t <= x ? -v : x <= t && t < a ? v : 0;
-						e.style.translate = n ? `0 ${n}px` : "";
-					});
-				}, k = () => {
-					D = 0;
-					let e = c === document.scrollingElement ? {
-						top: 0,
-						bottom: innerHeight
-					} : c.getBoundingClientRect(), t = C < e.top + f ? -(e.top + f - C) : C > e.bottom - f ? C - (e.bottom - f) : 0;
-					t && (c.scrollTop += t / 3, O(), D = requestAnimationFrame(k));
-				}, A = (t) => {
-					t.pointerId === e.pointerId && (C = t.clientY, O(), D ||= requestAnimationFrame(k));
-				}, j = (r) => {
-					if (r.pointerId === e.pointerId) {
-						if (s.removeEventListener("pointermove", A), s.removeEventListener("pointerup", j), s.removeEventListener("pointercancel", j), cancelAnimationFrame(D), delete o.dataset.dragging, delete g.current?.dataset.sorting, r.type === "pointerup" && x !== a) E(h(n, a, x));
-						else {
-							S.current = T();
-							for (let e of i) e.style.removeProperty("translate");
-							for (let e of i) {
-								let n = S.current.get(e.dataset.sortableId) - e.getBoundingClientRect().top;
-								n && !t() && e.animate?.({ translate: [`0 ${n}px`, "0 0"] }, d);
-							}
-							S.current = null;
-						}
-					}
-				};
-				s.addEventListener("pointermove", A), s.addEventListener("pointerup", j), s.addEventListener("pointercancel", j);
-			},
-			key: (e, t, r) => {
-				let i = n.indexOf(t), a = `${i + 1} of ${n.length}`;
-				if (e.key === " " || e.key === "Enter") e.preventDefault(), _ === t ? (v(null), C.current = null, x(`${r} dropped, ${a}.`)) : _ || (v(t), C.current = n, x(`${r} picked up, ${a}. Arrow keys move it, Space drops it, Escape puts it back.`));
-				else if (_ === t && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
-					e.preventDefault();
-					let t = i + (e.key === "ArrowUp" ? -1 : 1);
-					if (t < 0 || t >= n.length) return;
-					E(h(n, i, t)), x(`${r}, ${t + 1} of ${n.length}.`);
-				} else if (_ === t && e.key === "Escape") {
-					e.preventDefault();
-					let i = C.current ?? n;
-					v(null), C.current = null, i !== n && E([...i]), x(`${r} put back, ${i.indexOf(t) + 1} of ${i.length}.`);
-				}
-			},
-			lifted: _
+			grab: F,
+			key: I,
+			lifted: E
 		},
-		children: [/* @__PURE__ */ c("ul", {
-			ref: g,
-			className: e("zen__sortable relative flex flex-col", i),
-			...m,
-			children: a
-		}), /* @__PURE__ */ c("span", {
-			"aria-live": "assertive",
-			className: "sr-only",
-			children: b
-		})]
-	});
-}
-function _({ id: t, className: n, ...r }) {
-	let { lifted: i } = m("SortableItem");
-	return /* @__PURE__ */ c("li", {
-		"data-sortable-id": t,
-		"data-lifted": i === t || void 0,
-		className: e("zen__sortable-item relative transition-[box-shadow,scale,background-color] duration-200 data-dragging:bg-card data-lifted:bg-card data-dragging:z-10 data-dragging:rounded-xl data-dragging:scale-[1.02] data-dragging:shadow-[0_0_0_1px_oklch(var(--tint)/0.08),0_12px_32px_-12px_oklch(0_0_0/0.6)] data-lifted:z-10 data-lifted:rounded-xl data-lifted:shadow-[0_0_0_2px_oklch(var(--primary)/0.6)]", n),
-		...r
+		children: [p ? /* @__PURE__ */ y(n, {
+			...L,
+			className: e("zen__sortable", m),
+			children: h
+		}) : /* @__PURE__ */ y("ul", {
+			...L,
+			className: e("zen__sortable relative flex flex-col", m),
+			children: h
+		}), A]
 	});
 }
-function v({ id: t, label: n, className: r, children: i, ...a }) {
-	let { grab: o, key: s, lifted: l } = m("SortableHandle");
-	return /* @__PURE__ */ c("button", {
-		type: "button",
-		"aria-label": `Reorder ${n}`,
-		"aria-pressed": l === t,
-		onPointerDown: (e) => o(e, t),
-		onKeyDown: (e) => s(e, t, n),
-		className: e("text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 grid size-8 shrink-0 cursor-grab touch-none place-items-center rounded-md outline-hidden select-none focus-visible:ring-2 active:cursor-grabbing", r),
-		...a,
-		children: i ?? /* @__PURE__ */ c("svg", {
-			"aria-hidden": !0,
-			viewBox: "0 0 16 16",
-			fill: "currentColor",
-			className: "size-4",
-			children: [
-				4,
-				8,
-				12
-			].flatMap((e) => [5.5, 10.5].map((t) => /* @__PURE__ */ c("circle", {
-				cx: t,
-				cy: e,
-				r: "1.25"
-			}, `${t}${e}`)))
-		})
-	});
-}
-function y(e) {
-	for (let t = e.parentElement; t; t = t.parentElement) if (/auto|scroll/.test(getComputedStyle(t).overflowY) && t.scrollHeight > t.clientHeight) return t;
-	return document.scrollingElement ?? document.documentElement;
-}
 //#endregion
-export { v as SortableHandle, _ as SortableItem, g as SortableList };
+export { a as SortableHandle, o as SortableItem, C as SortableList, m as SortableTree, p as flattenTree };

package/dist/sortable/shared.d.ts

@@ -0,0 +1,56 @@
+import { ComponentProps, KeyboardEvent, PointerEvent, RefObject } from 'react';
+export interface SortableContextValue {
+    grab: (e: PointerEvent<HTMLElement>, id: string) => void;
+    key: (e: KeyboardEvent<HTMLElement>, id: string, label: string) => void;
+    lifted: string | null;
+}
+export declare const SortableContext: import('react').Context<SortableContextValue | null>;
+/** Offsets an item `dy` down (0: back in place). */
+export declare function shift(el: HTMLElement, dy: number): void;
+/** Each item's place on screen, by id, to move them from after a change. */
+export declare const topsOf: (els: readonly HTMLElement[]) => Map<string, number>;
+/** Moves each item from where it was (`was`) to where it is now, dropping any drag offset. */
+export declare function settle(els: readonly HTMLElement[], was: Map<string, number>): void;
+/**
+ * Scrolls `scroller` while the pointer (at `y`) is near its edge, calling
+ * `moved` as the content moves under it. Returns a function to call on each
+ * pointer move, and one to stop.
+ */
+export declare function edgeScroll(scroller: HTMLElement, moved: () => void): {
+    at: (pointerY: number) => void;
+    stop: () => void;
+};
+/**
+ * Says what happens, from outside the list (a span can't go in a table), but
+ * inside a modal dialog it's in, or it wouldn't be heard. Also where a drag's
+ * drop line goes.
+ */
+export declare function useAnnouncer(root: RefObject<HTMLElement | null>): {
+    say: import('react').Dispatch<import('react').SetStateAction<string>>;
+    region: import('react').ReactPortal | null;
+    host: Element | null;
+};
+/** One item in a SortableList or SortableTree; give it the `id` it has in the list's value. With `asChild`, your own element (a TableRow). */
+export declare function SortableItem({ id, label, asChild, className, ...rest }: SortableItemProps): import('react').JSX.Element;
+/**
+ * What an item is dragged by: a grip button. `label` names the item ("Rent");
+ * the button reads "Reorder Rent". It takes no scroll gestures, so dragging it
+ * never scrolls the page.
+ */
+export declare function SortableHandle({ id, label, className, children, ...rest }: SortableHandleProps): import('react').JSX.Element;
+/** The nearest ancestor that scrolls vertically, or the page. */
+export declare function scrollerOf(el: HTMLElement): HTMLElement;
+export interface SortableItemProps extends ComponentProps<'li'> {
+    id: string;
+    /** Its name, for one without a SortableHandle (a group others go into), to say "2 of 3 in Food". */
+    label?: string;
+    /** Put the item's props on your own element (the single child, e.g. a TableRow) instead of an li. */
+    asChild?: boolean;
+}
+export interface SortableHandleProps extends Omit<ComponentProps<'button'>, 'id'> {
+    /** The item's id, as in the list's value. */
+    id: string;
+    /** The item's name, e.g. "Rent". */
+    label: string;
+}
+//# sourceMappingURL=shared.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../packages/sortable/shared.tsx"],"names":[],"mappings":"AAIA,OAAO,EACH,cAAc,EAEd,aAAa,EACb,YAAY,EACZ,SAAS,EAIZ,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,oBAAoB;IACjC,IAAI,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,GAAG,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,sDAAmD,CAAC;AAWhF,oDAAoD;AACpD,wBAAgB,KAAK,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,QAEhD;AAKD,4EAA4E;AAC5E,eAAO,MAAM,MAAM,GAAI,KAAK,SAAS,WAAW,EAAE,wBAAkE,CAAC;AAErH,8FAA8F;AAC9F,wBAAgB,MAAM,CAAC,GAAG,EAAE,SAAS,WAAW,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,QAU3E;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,IAAI;mBAc5C,MAAM;;EAM5B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;;;EAe/D;AAED,8IAA8I;AAC9I,wBAAgB,YAAY,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BAuBzF;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,+BA0B9F;AAED,iEAAiE;AACjE,wBAAgB,UAAU,CAAC,EAAE,EAAE,WAAW,GAAG,WAAW,CAKvD;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,oGAAoG;IACpG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qGAAqG;IACrG,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC;IAC7E,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;CACjB"}

package/dist/sortable/shared.js

@@ -0,0 +1,104 @@
+"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 { 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";
+import { createPortal as l } from "react-dom";
+//#region packages/sortable/shared.tsx
+var u = {
+	duration: 220,
+	easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
+}, d = 48, f = i(null);
+function p(e) {
+	let t = a(f);
+	if (!t) throw Error(`<${e}> must be inside <SortableList> or <SortableTree>`);
+	return t;
+}
+var m = (e) => e instanceof HTMLTableRowElement ? [...e.cells] : [e];
+function h(e, t) {
+	for (let n of m(e)) n.style.translate = t ? `0 ${t}px` : "";
+}
+var g = (e) => m(e)[0]?.getBoundingClientRect().top ?? e.getBoundingClientRect().top, _ = (e) => new Map(e.map((e) => [e.dataset.sortableId, g(e)]));
+function v(e, t) {
+	for (let n of e) {
+		let e = m(n);
+		for (let t of e) t.style.removeProperty("translate");
+		for (let t of [n, ...e]) for (let e of t.getAnimations?.() ?? []) e.cancel();
+		let i = t.get(n.dataset.sortableId), a = i === void 0 ? 0 : i - n.getBoundingClientRect().top;
+		if (a && !r()) for (let t of e) t.animate?.({ translate: [`0 ${a}px`, "0 0"] }, u);
+	}
+}
+function y(e, t) {
+	let n = 0, r = 0, i = () => {
+		r = 0;
+		let a = e === document.scrollingElement ? {
+			top: 0,
+			bottom: innerHeight
+		} : e.getBoundingClientRect(), o = n < a.top + d ? -(a.top + d - n) : n > a.bottom - d ? n - (a.bottom - d) : 0;
+		o && (e.scrollTop += o / 3, t(), r = requestAnimationFrame(i));
+	};
+	return {
+		at: (e) => {
+			n = e, r ||= requestAnimationFrame(i);
+		},
+		stop: () => cancelAnimationFrame(r)
+	};
+}
+function b(e) {
+	let [t, n] = s(""), [r, i] = s(null);
+	return o(() => i(e.current?.closest("dialog") ?? document.body), []), {
+		say: n,
+		region: r && l(/* @__PURE__ */ c("span", {
+			"aria-live": "assertive",
+			className: "sr-only",
+			children: t
+		}), r),
+		host: r
+	};
+}
+function x({ id: n, label: r, asChild: i, className: a, ...o }) {
+	let { lifted: s } = p("SortableItem");
+	return /* @__PURE__ */ c(i ? t : "li", {
+		"data-sortable-id": n,
+		"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),
+		...o
+	});
+}
+function S({ id: t, label: r, className: i, children: a, ...o }) {
+	let { grab: s, key: l, lifted: u } = p("SortableHandle"), d = n();
+	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),
+		...o,
+		children: a ?? /* @__PURE__ */ c("svg", {
+			"aria-hidden": !0,
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			className: "size-4",
+			children: [
+				4,
+				8,
+				12
+			].flatMap((e) => [5.5, 10.5].map((t) => /* @__PURE__ */ c("circle", {
+				cx: t,
+				cy: e,
+				r: "1.25"
+			}, `${t}${e}`)))
+		})
+	});
+}
+function C(e) {
+	for (let t = e.parentElement; t; t = t.parentElement) if (/auto|scroll/.test(getComputedStyle(t).overflowY) && t.scrollHeight > t.clientHeight) return t;
+	return document.scrollingElement ?? document.documentElement;
+}
+//#endregion
+export { f as SortableContext, S as SortableHandle, x as SortableItem, y as edgeScroll, C as scrollerOf, v as settle, h as shift, _ as topsOf, b as useAnnouncer };

package/dist/sortable/tree-model.d.ts

@@ -0,0 +1,46 @@
+/** A node of a SortableTree's value: an id, and the nodes under it. */
+export interface SortableNode {
+    id: string;
+    children?: SortableNode[];
+}
+/** A row as shown: how deep it is, and what it's under (null at the top). */
+export interface SortableRow {
+    id: string;
+    depth: number;
+    parentId: string | null;
+}
+/** Somewhere a node can go: under `parentId` (null: the top), at `index` among its children. */
+export interface TreePlace {
+    parentId: string | null;
+    index: number;
+}
+/** A place, as where it is among the rows: before row `gap` (after the last, at the end), `depth` deep. */
+export interface TreeSlot extends TreePlace {
+    gap: number;
+    depth: number;
+}
+/**
+ * The rows to render, in order, each with its depth: a node's children follow
+ * it while `open(id)` says it's expanded (by default, all are).
+ */
+export declare function flattenTree(nodes: readonly SortableNode[], open?: (id: string) => boolean, depth?: number, parentId?: string | null): SortableRow[];
+/** Every node's depth, parent and place among its siblings. */
+export declare function indexTree(nodes: readonly SortableNode[]): Map<string, SortableRow & {
+    index: number;
+}>;
+/** The tree without `id` (and what's under it), and that node. */
+export declare function removeNode(nodes: readonly SortableNode[], id: string): [SortableNode[], SortableNode | null];
+/** The tree with `node` put at `place`. */
+export declare function insertNode(nodes: readonly SortableNode[], place: TreePlace, node: SortableNode): SortableNode[];
+/**
+ * Everywhere a node can go, given the tree without it and the rows still
+ * shown. Between two rows it can be as deep as under the one above, or as
+ * shallow as the one below: it joins the group of whichever level it's at.
+ * `allowed` says which parents take it.
+ */
+export declare function treeSlots(tree: readonly SortableNode[], rows: readonly {
+    id: string;
+}[], allowed: (parentId: string | null) => boolean): TreeSlot[];
+/** Of the slots at `gap`, the one nearest `depth`, the shallower on a tie. */
+export declare function nearestSlot(slots: readonly TreeSlot[], gap: number, depth: number): TreeSlot | null;
+//# sourceMappingURL=tree-model.d.ts.map

package/dist/sortable/tree-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-model.d.ts","sourceRoot":"","sources":["../../packages/sortable/tree-model.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC7B;AAED,6EAA6E;AAC7E,MAAM,WAAW,WAAW;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,gGAAgG;AAChG,MAAM,WAAW,SAAS;IACtB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,2GAA2G;AAC3G,MAAM,WAAW,QAAS,SAAQ,SAAS;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CACvB,KAAK,EAAE,SAAS,YAAY,EAAE,EAC9B,IAAI,GAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAoB,EAC1C,KAAK,SAAI,EACT,QAAQ,GAAE,MAAM,GAAG,IAAW,GAC/B,WAAW,EAAE,CAKf;AAED,+DAA+D;AAC/D,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,YAAY,EAAE;WACD,MAAM;GAQ5D;AAED,kEAAkE;AAClE,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,YAAY,EAAE,EAAE,EAAE,EAAE,MAAM,GAAG,CAAC,YAAY,EAAE,EAAE,YAAY,GAAG,IAAI,CAAC,CAY5G;AAED,2CAA2C;AAC3C,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,YAAY,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,GAAG,YAAY,EAAE,CAS/G;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CACrB,IAAI,EAAE,SAAS,YAAY,EAAE,EAC7B,IAAI,EAAE,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,EAC/B,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,GAC9C,QAAQ,EAAE,CA0BZ;AAED,8EAA8E;AAC9E,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,QAAQ,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAOnG"}

package/dist/sortable/tree-model.js

@@ -0,0 +1,87 @@
+//#region packages/sortable/tree-model.ts
+function e(t, n = () => !0, r = 0, i = null) {
+	return t.flatMap((t) => [{
+		id: t.id,
+		depth: r,
+		parentId: i
+	}, ...t.children?.length && n(t.id) ? e(t.children, n, r + 1, t.id) : []]);
+}
+function t(e) {
+	let t = /* @__PURE__ */ new Map(), n = (e, r, i) => e.forEach((e, a) => {
+		t.set(e.id, {
+			id: e.id,
+			depth: r,
+			parentId: i,
+			index: a
+		}), e.children && n(e.children, r + 1, e.id);
+	});
+	return n(e, 0, null), t;
+}
+function n(e, t) {
+	let n = null, r = (e) => e.flatMap((e) => e.id === t ? (n = e, []) : e.children ? [{
+		...e,
+		children: r(e.children)
+	}] : [e]);
+	return [r(e), n];
+}
+function r(e, t, n) {
+	return t.parentId === null ? [
+		...e.slice(0, t.index),
+		n,
+		...e.slice(t.index)
+	] : e.map((e) => {
+		if (e.id === t.parentId) {
+			let r = e.children ?? [];
+			return {
+				...e,
+				children: [
+					...r.slice(0, t.index),
+					n,
+					...r.slice(t.index)
+				]
+			};
+		}
+		return e.children ? {
+			...e,
+			children: r(e.children, t, n)
+		} : e;
+	});
+}
+function i(e, n, r) {
+	let i = t(e), a = (e, t) => {
+		let n = i.get(e);
+		for (; n.depth > t;) n = i.get(n.parentId);
+		return n;
+	}, o = [];
+	for (let e = 0; e <= n.length; e++) {
+		let t = e > 0 ? i.get(n[e - 1].id) : void 0, s = e < n.length ? i.get(n[e].id) : void 0, c = t ? t.depth + 1 : 0, l = s ? s.depth : 0;
+		for (let n = l; n <= c; n++) {
+			let i = t ? n === t.depth + 1 ? {
+				parentId: t.id,
+				index: 0
+			} : (() => {
+				let e = a(t.id, n);
+				return {
+					parentId: e.parentId,
+					index: e.index + 1
+				};
+			})() : {
+				parentId: null,
+				index: 0
+			};
+			r(i.parentId) && o.push({
+				...i,
+				gap: e,
+				depth: n
+			});
+		}
+	}
+	return o;
+}
+function a(e, t, n) {
+	let r = null;
+	for (let i of e) i.gap === t && (!r || Math.abs(i.depth - n) < Math.abs(r.depth - n)) && (r = i);
+	return r;
+}
+//#endregion
+export { e as flattenTree, t as indexTree, r as insertNode, a as nearestSlot, n as removeNode, i as treeSlots };

package/dist/sortable/tree.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps } from 'react';
+import { SortableNode } from './tree-model';
+/**
+ * Items in groups, and groups in groups, put in order by dragging: an item
+ * can go anywhere in its group, into another group (or one open inside it),
+ * or under another item. While dragging, a glowing line shows where it will
+ * land, set in as deep as it'll go, and the group it would join is lit; drag
+ * sideways to go a level in or out. From the keyboard, Space or Enter on a
+ * handle picks it up, the up and down arrows move it through every place it
+ * can go, left and right a level out or in, Space or Enter drops it and
+ * Escape puts it back; each step is announced.
+ *
+ * `value` is the tree of ids. Render a SortableItem for each row shown, in
+ * order (flattenTree lists them, with their depths): what's under a closed
+ * one isn't shown, and moves with it. `accepts` says which group takes which
+ * item. With `asChild`, your own element (a Table, its rows SortableItems with
+ * asChild on TableRows) instead of a ul.
+ */
+export default function SortableTree({ value, onValueChange, accepts, indent, asChild, className, children, ref, ...rest }: SortableTreeProps): import('react').JSX.Element;
+export interface SortableTreeProps extends ComponentProps<'ul'> {
+    /** The tree of ids, in order. */
+    value: readonly SortableNode[];
+    onValueChange: (value: SortableNode[]) => void;
+    /** Whether `parentId` (null: the top level) takes item `id`; by default, everything goes anywhere. */
+    accepts?: (id: string, parentId: string | null) => boolean;
+    /** How far in a level is set, in px: the drop line is set in this far, and dragging this far sideways goes a level in or out. */
+    indent?: number;
+    /** Put its props on your own element (the single child, e.g. a Table) instead of a ul. */
+    asChild?: boolean;
+}
+//# sourceMappingURL=tree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../packages/sortable/tree.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAA6E,MAAM,OAAO,CAAC;AAGlH,OAAO,EAKH,KAAK,YAAY,EAIpB,MAAM,cAAc,CAAC;AAStB;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,KAAK,EACL,aAAa,EACb,OAAO,EACP,MAAW,EACX,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACV,EAAE,iBAAiB,+BA6MnB;AAuBD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,iCAAiC;IACjC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC/C,sGAAsG;IACtG,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,CAAC;IAC3D,iIAAiI;IACjI,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}