@weasel-js/ui 1.8.0 → 1.8.1

package/dist/chunks/LayerList-vfAoImxX.js

@@ -0,0 +1,432 @@
+import { t as e } from "./dlog-F0I8KsIW.js";
+import { Z as t } from "./icons-B_fPKEis.js";
+import { t as n } from "./CloseButton-CKarkTT9.js";
+import { n as r, t as i } from "./useReorderDragList-DnqqvRGK.js";
+import { t as a } from "./Disclosure-CpWt87nO.js";
+import { t as o } from "./DragGhost-_IpuN_xM.js";
+import { t as s } from "./DragGrip-AoIZXfZb.js";
+import { t as c } from "./ItemList.module-BSpCSxan.js";
+import { n as l } from "./Properties-DteSVEWs.js";
+import { a as u } from "./PropertyField-CLbUOynA.js";
+import { asNodeId as d, createMoveToIndexOp as f, dispatchApplyBatch as p, useLatest as m } from "@weasel-js/core";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useId as v, useLayoutEffect as y, useRef as b, useState as x } from "react";
+import { intentOf as S, select as C } from "@weasel-js/select";
+var w = {
+	root: "_root_1jw5u_3",
+	head: "_head_1jw5u_13",
+	title: "_title_1jw5u_20",
+	palette: "_palette_1jw5u_28",
+	add: "_add_1jw5u_33",
+	level: "_level_1jw5u_50",
+	cards: "_cards_1jw5u_60",
+	entry: "_entry_1jw5u_65",
+	row: "_row_1jw5u_69",
+	children: "_children_1jw5u_79",
+	dragging: "_dragging_1jw5u_84",
+	dropBefore: "_dropBefore_1jw5u_89",
+	dropAfter: "_dropAfter_1jw5u_93",
+	grip: "_grip_1jw5u_98",
+	lock: "_lock_1jw5u_99",
+	stop: "_stop_1jw5u_116",
+	twistyGap: "_twistyGap_1jw5u_123",
+	check: "_check_1jw5u_129",
+	handle: "_handle_1jw5u_137",
+	card: "_card_1jw5u_60"
+};
+//#endregion
+//#region src/components/LayerList/LayerList.tsx
+function T(e, t) {
+	return t.parentId === null ? E(e, t) : e.map((e) => e.id === t.parentId ? {
+		...e,
+		children: E(e.children ?? [], t)
+	} : e.children ? {
+		...e,
+		children: T(e.children, t)
+	} : e);
+}
+function E(e, { ids: t, index: n }) {
+	let r = new Set(t), i = e.filter((e) => !r.has(e.id)), a = e.filter((e) => r.has(e.id)), o = Math.max(0, Math.min(i.length, n));
+	return [
+		...i.slice(0, o),
+		...a,
+		...i.slice(o)
+	];
+}
+function D(e, t, n = /* @__PURE__ */ new Set()) {
+	for (let r of e) t(r) && n.add(r.id), r.children && D(r.children, t, n);
+	return n;
+}
+function O(e) {
+	return e.some((e) => (e.children?.length ?? 0) > 0);
+}
+function k(e) {
+	return e != null && e !== !1;
+}
+function A(t) {
+	let { items: n, collapsedIds: r, onCollapsedChange: a, title: o, addKinds: s, onAdd: l, empty: u, className: d } = t, [f, p] = x(/* @__PURE__ */ new Map()), h = r ? new Set(r) : D(n, (e) => f.get(e.id) ?? e.defaultCollapsed === !0), T = (e) => {
+		let t = new Set(h);
+		t.has(e) ? t.delete(e) : t.add(e), r || p((n) => new Map(n).set(e, t.has(e))), a?.([...t]);
+	}, E = m(t), A = () => {
+		let e = new Set(M(E.current.items));
+		return (t) => !e.has(t);
+	}, P = (e, t) => {
+		let { selectedIds: n = [], onSelect: r } = E.current;
+		if (!r) return;
+		let a = C({
+			ids: n,
+			anchor: U.current
+		}, e.id, S(i(t), j), { eligible: A() });
+		U.current = a.anchor, r([...a.ids]);
+	}, F = /* @__PURE__ */ new Map(), I = (e) => {
+		for (let n of e) F.set(n.id, t.renderBody ? t.renderBody(n) : null), n.children && I(n.children);
+	};
+	I(n);
+	let L = [], R = (e, t, n) => {
+		for (let r of e) k(F.get(r.id)) || L.push({
+			item: r,
+			parentId: t,
+			level: n
+		}), r.children?.length && !h.has(r.id) && R(r.children, r.id, n + 1);
+	};
+	R(n, null, 1);
+	let z = b(/* @__PURE__ */ new Map()), [B, V] = x(null), H = b(null), U = b(null), W = b(/* @__PURE__ */ new Map()).current;
+	y(() => {
+		let e = H.current;
+		if (e === null) return;
+		H.current = null;
+		let t = z.current.get(e);
+		t && document.activeElement !== t && t.focus();
+	});
+	let G = t.selectedIds ?? [], K = L.some((e) => e.item.id === B) ? B ?? void 0 : (L.find((e) => G.includes(e.item.id)) ?? L[0])?.item.id, q = (e) => {
+		H.current = e, V(e);
+	}, J = (e) => {
+		let t = {
+			ids: E.current.selectedIds ?? [],
+			anchor: U.current
+		}, n = C(t, e, "range", {
+			order: L.map((e) => e.item.id),
+			eligible: A()
+		});
+		U.current = n.anchor, n !== t && E.current.onSelect?.([...n.ids]);
+	}, Y = {
+		tabStop: K,
+		register: (e) => (t) => {
+			t ? z.current.set(e, t) : z.current.delete(e);
+		},
+		onFocus: (e) => {
+			V(e), U.current ??= e;
+		},
+		onKeyDown: (e, n) => (r) => {
+			if (r.target !== r.currentTarget) return;
+			let i = L.findIndex((t) => t.item.id === e.id), a = (e) => {
+				let n = L[Math.max(0, Math.min(L.length - 1, e))];
+				n && (q(n.item.id), r.shiftKey && t.onSelect ? J(n.item.id) : U.current = n.item.id);
+			}, o = (e.children?.length ?? 0) > 0, s = o && !h.has(e.id);
+			switch (r.key) {
+				case "ArrowDown":
+				case "ArrowUp": {
+					let t = r.key === "ArrowDown" ? 1 : -1;
+					r.altKey ? W.get(n)?.(e.id, t) && (H.current = e.id) : a(i + t);
+					break;
+				}
+				case "Home":
+					a(0);
+					break;
+				case "End":
+					a(L.length - 1);
+					break;
+				case "ArrowRight":
+					if (o && !s) T(e.id);
+					else if (s) a(i + 1);
+					else return;
+					break;
+				case "ArrowLeft":
+					if (s) T(e.id);
+					else if (n !== null) a(L.findIndex((e) => e.item.id === n));
+					else return;
+					break;
+				case "Enter":
+				case " ":
+					P(e, {
+						shiftKey: r.shiftKey,
+						ctrlKey: r.ctrlKey,
+						metaKey: r.metaKey,
+						altKey: r.altKey
+					});
+					break;
+				default: return;
+			}
+			r.preventDefault();
+		}
+	}, X = {
+		props: t,
+		collapsed: h,
+		toggle: T,
+		press: P,
+		uid: v(),
+		nested: O(n),
+		bodies: F,
+		nudgers: W,
+		keys: Y
+	}, Z = l ? s ?? [] : [], Q = d ? `${w.root} ${d}` : w.root;
+	return /* @__PURE__ */ _("div", {
+		className: Q,
+		children: [(o !== void 0 || Z.length > 0) && /* @__PURE__ */ _("div", {
+			className: w.head,
+			children: [o !== void 0 && /* @__PURE__ */ g("h2", {
+				className: w.title,
+				children: o
+			}), /* @__PURE__ */ g("div", {
+				className: w.palette,
+				children: Z.map((t) => /* @__PURE__ */ g("button", {
+					type: "button",
+					className: w.add,
+					"aria-label": `Add ${t}`,
+					onClick: () => {
+						e("layer-list", "onAdd", { kind: t }), l?.(t);
+					},
+					children: t
+				}, t))
+			})]
+		}), n.length === 0 ? /* @__PURE__ */ g("div", {
+			className: c.empty,
+			children: u ?? (Z.length > 0 ? "No layers — add one above." : "No layers.")
+		}) : /* @__PURE__ */ g(N, {
+			items: n,
+			parentId: null,
+			shared: X,
+			path: "",
+			level: 1
+		})]
+	});
+}
+var j = {
+	mode: "multi",
+	toggle: "shift"
+};
+function M(e) {
+	let t = [];
+	for (let n of e) n.locked && t.push(n.id), n.children && t.push(...M(n.children));
+	return t;
+}
+function N({ items: t, parentId: n, shared: i, path: s, level: d }) {
+	let { props: f } = i, p = f.selectedIds ?? [], m = r({
+		items: t.map((e) => ({
+			id: e.id,
+			label: e.label,
+			locked: e.locked || !f.onReorder
+		})),
+		selectedIds: t.filter((e) => p.includes(e.id)).map((e) => e.id),
+		onReorder: (r, i) => {
+			let a = new Set(r), o = {
+				ids: t.filter((e) => a.has(e.id)).map((e) => e.id),
+				parentId: n,
+				index: i - t.slice(0, i).filter((e) => a.has(e.id)).length
+			};
+			e("layer-list", "onReorder", o), f.onReorder?.(o);
+		},
+		onPress: (e, n) => {
+			let r = t.find((t) => t.id === e);
+			r && i.press(r, n);
+		}
+	});
+	i.nudgers.set(n, (e, n) => m.nudge(e, t.findIndex((t) => t.id === e), n));
+	let [v, y] = x(null), b = (e) => {
+		y(e), m.containerProps.ref(e);
+	}, S = t.map((e) => i.bodies.get(e.id)), C = S.some(k), { draggedIds: T, targetIndex: E, ghost: D } = m.state, O = (e, r, o) => {
+		let u = S[r], h = e.children ?? [], v = !i.collapsed.has(e.id), y = `${i.uid}${s}-${r}`, b = o ? void 0 : m.rowProps(e.id, r).onPointerDown, x = p.includes(e.id), C = [w.entry];
+		o || (T?.includes(e.id) && C.push(w.dragging), E === r && !T?.includes(e.id) && C.push(w.dropBefore), E === t.length && r === t.length - 1 && C.push(w.dropAfter));
+		let D = /* @__PURE__ */ g(L, {
+			item: e,
+			shared: i
+		}), O = k(u) ? /* @__PURE__ */ g(l, {
+			className: w.card,
+			title: e.title ?? e.label,
+			...e.tone === void 0 ? {} : { tone: e.tone },
+			collapsed: o || !v,
+			onCollapsedChange: () => i.toggle(e.id),
+			leading: /* @__PURE__ */ g(I, {
+				item: e,
+				reorder: f.onReorder !== void 0,
+				onPointerDown: b,
+				onNudge: (t) => i.nudgers.get(n)?.(e.id, t)
+			}),
+			actions: o ? void 0 : D,
+			children: o ? null : u
+		}) : /* @__PURE__ */ _("div", {
+			className: [
+				c.row,
+				w.row,
+				x ? c.selected : ""
+			].filter(Boolean).join(" "),
+			"data-selected": x ? "true" : void 0,
+			"data-locked": e.locked ? "true" : void 0,
+			onPointerDown: b,
+			...o ? {} : {
+				role: "row",
+				"aria-level": d,
+				...h.length > 0 ? { "aria-expanded": v } : {},
+				...f.onSelect ? { "aria-selected": x } : {},
+				tabIndex: i.keys.tabStop === e.id ? 0 : -1,
+				ref: i.keys.register(e.id),
+				onKeyDown: i.keys.onKeyDown(e, n),
+				onFocus: () => i.keys.onFocus(e.id)
+			},
+			children: [
+				i.nested && (h.length > 0 ? /* @__PURE__ */ g("span", {
+					className: w.stop,
+					onPointerDown: P,
+					children: /* @__PURE__ */ g(a, {
+						open: v,
+						onToggle: () => i.toggle(e.id),
+						label: `${e.label} sublayers`,
+						controls: y
+					})
+				}) : /* @__PURE__ */ g("span", { className: w.twistyGap })),
+				/* @__PURE__ */ g(F, {
+					item: e,
+					reorder: f.onReorder !== void 0
+				}),
+				f.onVisibilityChange && (e.locked ? /* @__PURE__ */ g("span", { className: w.check }) : /* @__PURE__ */ g("input", {
+					className: w.check,
+					type: "checkbox",
+					checked: e.visible !== !1,
+					onPointerDown: P,
+					onChange: (t) => f.onVisibilityChange?.(e.id, t.target.checked),
+					"aria-label": `Show ${e.label}`
+				})),
+				e.leading,
+				/* @__PURE__ */ g("span", {
+					className: c.label,
+					children: e.title ?? e.label
+				}),
+				o ? null : /* @__PURE__ */ g(R, {
+					item: e,
+					shared: i
+				})
+			]
+		});
+		return /* @__PURE__ */ _("div", {
+			role: "none",
+			className: C.join(" "),
+			"data-selected": x ? "true" : void 0,
+			children: [O, !o && h.length > 0 && v && /* @__PURE__ */ g("div", {
+				id: y,
+				role: "rowgroup",
+				className: w.children,
+				children: /* @__PURE__ */ g(N, {
+					items: h,
+					parentId: e.id,
+					shared: i,
+					path: `${s}-${r}`,
+					level: d + 1
+				})
+			})]
+		}, e.id);
+	};
+	return /* @__PURE__ */ _(h, { children: [C ? /* @__PURE__ */ g(u, {
+		ref: b,
+		className: `${w.level} ${w.cards}`,
+		children: t.map((e, t) => O(e, t, !1))
+	}) : /* @__PURE__ */ g("div", {
+		ref: b,
+		className: w.level,
+		...n === null ? {
+			role: "treegrid",
+			"aria-label": f.label ?? f.title ?? "Layers",
+			...f.onSelect ? { "aria-multiselectable": !0 } : {}
+		} : { role: "none" },
+		children: t.map((e, t) => O(e, t, !1))
+	}), D && v ? /* @__PURE__ */ g(o, {
+		at: D,
+		from: v,
+		children: t.map((e, t) => D.ids.includes(e.id) ? O(e, t, !0) : null)
+	}) : null] });
+}
+var P = (e) => e.stopPropagation();
+function F({ item: e, reorder: n }) {
+	return e.locked ? /* @__PURE__ */ g("span", {
+		className: w.lock,
+		role: "img",
+		"aria-label": "Locked",
+		children: /* @__PURE__ */ g(t, { size: 12 })
+	}) : !n && e.badge === void 0 ? null : /* @__PURE__ */ g("span", {
+		className: w.grip,
+		"aria-hidden": "true",
+		children: e.badge ?? /* @__PURE__ */ g(s, { size: 13 })
+	});
+}
+function I({ item: e, reorder: t, onPointerDown: n, onNudge: r }) {
+	if (e.locked) return /* @__PURE__ */ g(F, {
+		item: e,
+		reorder: t
+	});
+	if (t || e.badge !== void 0) return /* @__PURE__ */ g("button", {
+		type: "button",
+		className: w.handle,
+		"aria-label": `Drag to reorder ${e.label}`,
+		"aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown",
+		onPointerDown: n,
+		onKeyDown: (e) => {
+			!e.altKey || e.key !== "ArrowUp" && e.key !== "ArrowDown" || (e.preventDefault(), r(e.key === "ArrowUp" ? -1 : 1));
+		},
+		children: e.badge ?? /* @__PURE__ */ g(s, {})
+	});
+}
+function L({ item: e, shared: t }) {
+	let { onVisibilityChange: n } = t.props;
+	return /* @__PURE__ */ _(h, { children: [n && !e.locked && /* @__PURE__ */ g("input", {
+		className: w.check,
+		type: "checkbox",
+		checked: e.visible !== !1,
+		onClick: P,
+		onChange: (t) => n(e.id, t.target.checked),
+		"aria-label": `Show ${e.label}`
+	}), /* @__PURE__ */ g(R, {
+		item: e,
+		shared: t
+	})] });
+}
+function R({ item: e, shared: t }) {
+	let { onRemove: r } = t.props;
+	return !r || e.locked ? null : /* @__PURE__ */ g("span", {
+		className: w.stop,
+		onPointerDown: P,
+		children: /* @__PURE__ */ g(n, {
+			ariaLabel: `Remove ${e.label}`,
+			onClick: () => r(e.id)
+		})
+	});
+}
+//#endregion
+//#region src/components/LayerList/useSceneLayerList.ts
+function z(e) {
+	let { scene: t, selection: n, adapter: r, itemFor: i, label: a = "Reorder" } = e, o = (e) => [...e].reverse().flatMap((e) => {
+		let n = t.get(e);
+		if (!n) return [];
+		let r = t.childrenOf(e);
+		return [{
+			...i(n),
+			id: e,
+			...r.length > 0 ? { children: o(r) } : {}
+		}];
+	});
+	return {
+		items: o(t.roots),
+		selectedIds: n.current.map(String),
+		onSelect: (e) => n.set(e.map(d)),
+		onReorder: ({ ids: e, parentId: n, index: i }) => {
+			let o = (n === null ? t.roots : t.childrenOf(d(n))).length - e.length - i;
+			p(r, [f({
+				ids: e,
+				parentId: n,
+				index: Math.max(0, o)
+			})], a);
+		}
+	};
+}
+//#endregion
+export { A as n, T as r, z as t };
+
+//# sourceMappingURL=LayerList-vfAoImxX.js.map

package/dist/chunks/LayerList-vfAoImxX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerList-vfAoImxX.js","names":["stop","s","rows","_Fragment","dlog","LockIcon","CloseButton","useReorderDragList","selectModifiers","Disclosure","DragGhost","DragGrip","ItemList_module_default","PropertyGroup","PropertyList","LayerList_module_default","moveLayers","move","reorder","items","item","moving","ids","kept","siblings","it","moved","at","index","collectCollapsed","isCollapsed","into","anyNested","hasBody","body","LayerList","props","toggled","setToggled","useState","collapsed","collapsedIds","toggle","next","id","prev","onCollapsedChange","live","useLatest","unlocked","locked","lockedIds","press","onSelect","select","selectedIds","anchor","intentOf","mods","PRESS_POLICY","bodies","collectBodies","list","visible","walk","level","rowEls","useRef","focusId","setFocusId","pendingFocus","nudgers","el","tabStop","v","focusRow","selectRange","before","to","keys","e","go","branch","open","delta","parentId","shared","useId","palette","onAdd","addKinds","cls","className","title","kind","empty","Level","out","selected","drag","target","setEl","bind","node","cards","entry","i","kids","childId","path","onPointerDown","ghosted","isSelected","draggedIds","targetIndex","controls","Controls","head","Handle","stop","Grip","Remove","Fragment","ghost","onNudge","onVisibilityChange","onRemove","useSceneLayerList","args","build","scene","itemFor","selection","asNodeId","back","adapter","createMoveToIndexOp","label"],"sources":["../../src/components/LayerList/LayerList.module.css","../../src/components/LayerList/LayerList.tsx","../../src/components/LayerList/useSceneLayerList.ts"],"sourcesContent":["/* Row box, hover and selection are `ItemList`'s, so a layer list and the\n   history list stacked under it agree. What is here is only what a layer has. */\n.root,\n.root * {\n  box-sizing: border-box;\n}\n\n.root {\n  display: grid;\n  gap: var(--wzl-space-4);\n}\n\n.head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--wzl-space-4);\n}\n\n.title {\n  margin: 0;\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-lg);\n  color: var(--wzl-fg);\n}\n\n.palette {\n  display: flex;\n  gap: var(--wzl-space-2);\n}\n\n.add {\n  font: inherit;\n  height: var(--wzl-control-h);\n  background: transparent;\n  border: 1px dashed var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  padding: var(--wzl-space-1) var(--wzl-space-4);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  cursor: pointer;\n}\n\n.add:hover {\n  background: var(--wzl-surface-raised);\n  color: var(--wzl-fg);\n}\n\n.level {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  position: relative;\n  width: 100%;\n}\n\n/* A level of cards is a `PropertyList`, so the controls in each body take the\n   panel's density; its rows are spaced like cards rather than lines. */\n.level.cards {\n  display: grid;\n  row-gap: var(--wzl-space-3);\n}\n\n.entry {\n  min-width: 0;\n}\n\n.row {\n  user-select: none;\n}\n\n.row:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n/* A child's twisty sits under its parent's grip. */\n.children {\n  padding-left: calc(var(--wzl-disclosure-target, var(--wzl-control-h-sm)) + var(--wzl-space-4));\n}\n\n/* The layer the drag picked up holds its place, faded, while its ghost follows the pointer. */\n.dragging {\n  opacity: 0.5;\n}\n\n/* Where the drop would land: a line on the edge of the layer it would land against. */\n.dropBefore {\n  box-shadow: 0 -2px 0 var(--wzl-accent);\n}\n\n.dropAfter {\n  box-shadow: 0 2px 0 var(--wzl-accent);\n}\n\n/* One width for the grip and the lock, so a locked row's label lines up. */\n.grip,\n.lock {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  min-width: 13px;\n  color: var(--wzl-fg-muted);\n}\n\n.row:not([data-locked]) {\n  cursor: grab;\n}\n\n.row:not([data-locked]):active {\n  cursor: grabbing;\n}\n\n.stop {\n  display: inline-flex;\n  align-items: center;\n  flex: 0 0 auto;\n}\n\n/* Holds the twisty column open on rows with nothing to expand, so labels line up down a level. */\n.twistyGap {\n  flex: 0 0 auto;\n  width: var(--wzl-disclosure-target, var(--wzl-control-h-sm));\n}\n\n/* Sized, so the empty column a locked row keeps is the checkbox's width. */\n.check {\n  flex: 0 0 auto;\n  width: 13px;\n  height: 13px;\n  margin: 0;\n  accent-color: var(--wzl-accent);\n}\n\n.handle {\n  font: inherit;\n  background: transparent;\n  border: 0;\n  color: var(--wzl-fg-subtle);\n  padding: var(--wzl-space-1) var(--wzl-space-2);\n  cursor: grab;\n  touch-action: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--wzl-icon-button-size);\n  height: var(--wzl-icon-button-size);\n  border-radius: var(--wzl-radius-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  font-size: var(--wzl-font-size);\n}\n\n.card[data-tone] .handle {\n  background: var(--wzl-tone);\n  color: var(--wzl-fg-on-accent);\n  --wzl-fg-muted: var(--wzl-fg-muted-on-accent);\n  --wzl-fg-subtle: var(--wzl-fg-subtle-on-accent);\n}\n\n.handle:active {\n  cursor: grabbing;\n}\n\n.entry[data-selected] > .card {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -1px;\n}\n","import {\n  type KeyboardEvent,\n  type ReactNode,\n  type RefCallback,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useLatest } from '@weasel-js/core';\nimport { dlog } from '../../dlog';\nimport { LockIcon } from '../../icons';\nimport { intentOf, select, type SelectPolicy } from '@weasel-js/select';\nimport { type PressModifiers, selectModifiers, useReorderDragList } from '../../useReorderDragList';\nimport { CloseButton } from '../CloseButton';\nimport { Disclosure } from '../Disclosure';\nimport { DragGhost } from '../DragGhost';\nimport { DragGrip } from '../DragGrip';\nimport rows from '../ItemList/ItemList.module.css';\nimport { PropertyGroup, PropertyList } from '../Properties';\nimport type { StanceProps } from '../stance';\nimport s from './LayerList.module.css';\n\n/** One layer. With a body (see `renderBody`) it draws as a card that folds its\n *  body away; without one, as a one-line row. Either can hold child layers. */\nexport interface LayerListItem {\n  id: string;\n  /** The layer's name. Also what its controls are labeled by. */\n  label: string;\n  /** Shown in the header in place of `label` — a select that switches the\n   *  layer's kind, say. */\n  title?: ReactNode;\n  /** Fixed-size content before the label: a color swatch, a kind icon. */\n  leading?: ReactNode;\n  /** Drawn in the drag handle in place of the grip — an ordinal. */\n  badge?: ReactNode;\n  /** Which of its list this layer is: an index into the theme's tone list, or\n   *  a color. A card draws its edge and handle in it and recolors its controls. */\n  tone?: StanceProps['tone'];\n  /** Cannot be dragged, hidden or removed, walls off drops on either side, and\n   *  selects alone rather than joining a multi-selection. */\n  locked?: boolean;\n  /** Shown or not, when the list has `onVisibilityChange`. Default true. */\n  visible?: boolean;\n  children?: LayerListItem[];\n  /** Folds the body and children away until the user opens them.\n   *  `collapsedIds` overrides it. */\n  defaultCollapsed?: boolean;\n}\n\n/**\n * A reorder: `ids`, siblings under `parentId` (`null` at the top level), now\n * sit as one block in list order starting at `index` of the parent's children.\n * A drag never moves a layer to another parent.\n */\nexport interface LayerMove {\n  ids: string[];\n  parentId: string | null;\n  index: number;\n}\n\n/** Props for `<LayerList>`. */\nexport interface LayerListProps {\n  items: LayerListItem[];\n  /** Omit for a list the user cannot reorder. */\n  onReorder?: (move: LayerMove) => void;\n  /** Giving both makes rows selectable: a click selects one, shift-click adds\n   *  or removes one, and dragging a selected row drags its selected siblings. */\n  selectedIds?: readonly string[];\n  onSelect?: (ids: string[]) => void;\n  /** Adds a visibility checkbox to every unlocked layer. */\n  onVisibilityChange?: (id: string, visible: boolean) => void;\n  /** Adds a remove button to every unlocked layer. */\n  onRemove?: (id: string) => void;\n  /** A layer's controls. Returning `null` leaves that layer a one-line row. */\n  renderBody?: (item: LayerListItem) => ReactNode;\n  /** Ids whose body and children are folded away. Giving it makes folding\n   *  controlled; `onCollapsedChange` fires either way. */\n  collapsedIds?: readonly string[];\n  onCollapsedChange?: (ids: string[]) => void;\n  /** Heading above the list. */\n  title?: string;\n  /** Names the list for assistive tech when it has no `title`. */\n  label?: string;\n  /** Kinds the user can add, as buttons beside the title. Shown only with `onAdd`. */\n  addKinds?: string[];\n  onAdd?: (kind: string) => void;\n  /** Shown in place of the list when `items` is empty. */\n  empty?: ReactNode;\n  /** Appended to the root's class list — the module's own names are hashed. */\n  className?: string;\n}\n\n/** Returns `items` with `move` applied, for a consumer that holds the tree as state. */\nexport function moveLayers(items: LayerListItem[], move: LayerMove): LayerListItem[] {\n  if (move.parentId === null) return reorder(items, move);\n  return items.map((item) => {\n    if (item.id === move.parentId) return { ...item, children: reorder(item.children ?? [], move) };\n    return item.children ? { ...item, children: moveLayers(item.children, move) } : item;\n  });\n}\n\nfunction reorder(siblings: LayerListItem[], { ids, index }: LayerMove): LayerListItem[] {\n  const moving = new Set(ids);\n  const kept = siblings.filter((it) => !moving.has(it.id));\n  const moved = siblings.filter((it) => moving.has(it.id));\n  const at = Math.max(0, Math.min(kept.length, index));\n  return [...kept.slice(0, at), ...moved, ...kept.slice(at)];\n}\n\nfunction collectCollapsed(\n  items: LayerListItem[],\n  isCollapsed: (item: LayerListItem) => boolean,\n  into = new Set<string>(),\n): Set<string> {\n  for (const item of items) {\n    if (isCollapsed(item)) into.add(item.id);\n    if (item.children) collectCollapsed(item.children, isCollapsed, into);\n  }\n  return into;\n}\n\nfunction anyNested(items: LayerListItem[]): boolean {\n  return items.some((it) => (it.children?.length ?? 0) > 0);\n}\n\n/** What every level of the tree reads from the list. */\ninterface Shared {\n  props: LayerListProps;\n  collapsed: ReadonlySet<string>;\n  toggle: (id: string) => void;\n  press: (item: LayerListItem, mods: PressModifiers) => void;\n  uid: string;\n  /** Some layer has children, so every row keeps a twisty column. */\n  nested: boolean;\n  /** Each layer's body, rendered once; a row where it is empty. */\n  bodies: ReadonlyMap<string, ReactNode>;\n  /** Per sibling group, keyed by parent: move a row one place, as its drag would. */\n  nudgers: Map<string | null, (id: string, delta: -1 | 1) => boolean>;\n  keys: RowKeys;\n}\n\n/** The roving focus over the rows: one row is in the tab order at a time. */\ninterface RowKeys {\n  tabStop: string | undefined;\n  register: (id: string) => (el: HTMLElement | null) => void;\n  onKeyDown: (item: LayerListItem, parentId: string | null) => (e: KeyboardEvent<HTMLElement>) => void;\n  onFocus: (id: string) => void;\n}\n\ninterface VisibleRow {\n  item: LayerListItem;\n  parentId: string | null;\n  level: number;\n}\n\nfunction hasBody(body: ReactNode): boolean {\n  return body !== null && body !== undefined && body !== false;\n}\n\n/**\n * An ordered, drag-reorderable list of layers — a document's objects, a lab's\n * canvases, a fill's effects. Each layer is a one-line row or, with a body, a\n * card whose controls fold away; either can nest child layers. Selection,\n * visibility, removal and an add palette are each on when their handler is given.\n */\nexport function LayerList(props: LayerListProps) {\n  const { items, collapsedIds, onCollapsedChange, title, addKinds, onAdd, empty, className } = props;\n  // Only the user's own toggles are state; everything else reads the layer's\n  // `defaultCollapsed`, so a layer added later starts the way it asks to.\n  const [toggled, setToggled] = useState<ReadonlyMap<string, boolean>>(new Map());\n  const collapsed = collapsedIds\n    ? new Set(collapsedIds)\n    : collectCollapsed(items, (item) => toggled.get(item.id) ?? item.defaultCollapsed === true);\n  const toggle = (id: string) => {\n    const next = new Set(collapsed);\n    if (next.has(id)) next.delete(id);\n    else next.add(id);\n    if (!collapsedIds) setToggled((prev) => new Map(prev).set(id, next.has(id)));\n    onCollapsedChange?.([...next]);\n  };\n\n  // The press arrives after the drag session ends, which can be after a render\n  // the closure did not see, so it reads the selection from here.\n  const live = useLatest(props);\n  // Locked rows never join a multi-selection: pressed, one is selected alone, and a range or a\n  // shift-press passes over them.\n  const unlocked = () => {\n    const locked = new Set(lockedIds(live.current.items));\n    return (id: string) => !locked.has(id);\n  };\n  const press = (item: LayerListItem, mods: PressModifiers) => {\n    const { selectedIds = [], onSelect } = live.current;\n    if (!onSelect) return;\n    const next = select({ ids: selectedIds, anchor: anchor.current }, item.id, intentOf(selectModifiers(mods), PRESS_POLICY), {\n      eligible: unlocked(),\n    });\n    anchor.current = next.anchor;\n    onSelect([...next.ids]);\n  };\n\n  const bodies = new Map<string, ReactNode>();\n  const collectBodies = (list: LayerListItem[]) => {\n    for (const it of list) {\n      bodies.set(it.id, props.renderBody ? props.renderBody(it) : null);\n      if (it.children) collectBodies(it.children);\n    }\n  };\n  collectBodies(items);\n\n  // The rows the arrow keys walk: open branches only, and not cards, whose\n  // heads are their own controls.\n  const visible: VisibleRow[] = [];\n  const walk = (list: LayerListItem[], parentId: string | null, level: number) => {\n    for (const item of list) {\n      if (!hasBody(bodies.get(item.id))) visible.push({ item, parentId, level });\n      if (item.children?.length && !collapsed.has(item.id)) walk(item.children, item.id, level + 1);\n    }\n  };\n  walk(items, null, 1);\n\n  const rowEls = useRef(new Map<string, HTMLElement>());\n  const [focusId, setFocusId] = useState<string | null>(null);\n  const pendingFocus = useRef<string | null>(null);\n  const anchor = useRef<string | null>(null);\n  const nudgers = useRef(new Map<string | null, (id: string, delta: -1 | 1) => boolean>()).current;\n  useLayoutEffect(() => {\n    const id = pendingFocus.current;\n    if (id === null) return;\n    pendingFocus.current = null;\n    const el = rowEls.current.get(id);\n    if (el && document.activeElement !== el) el.focus();\n  });\n\n  const selectedIds = props.selectedIds ?? [];\n  const tabStop = visible.some((v) => v.item.id === focusId)\n    ? (focusId ?? undefined)\n    : (visible.find((v) => selectedIds.includes(v.item.id)) ?? visible[0])?.item.id;\n\n  const focusRow = (id: string) => {\n    pendingFocus.current = id;\n    setFocusId(id);\n  };\n  const selectRange = (to: string) => {\n    const before = { ids: live.current.selectedIds ?? [], anchor: anchor.current };\n    const next = select(before, to, 'range', { order: visible.map((v) => v.item.id), eligible: unlocked() });\n    anchor.current = next.anchor;\n    if (next !== before) live.current.onSelect?.([...next.ids]);\n  };\n\n  const keys: RowKeys = {\n    tabStop,\n    register: (id) => (el) => {\n      if (el) rowEls.current.set(id, el);\n      else rowEls.current.delete(id);\n    },\n    onFocus: (id) => {\n      setFocusId(id);\n      anchor.current ??= id;\n    },\n    onKeyDown: (item, parentId) => (e) => {\n      // Keys on a control inside the row are the control's.\n      if (e.target !== e.currentTarget) return;\n      const at = visible.findIndex((v) => v.item.id === item.id);\n      const go = (index: number) => {\n        const next = visible[Math.max(0, Math.min(visible.length - 1, index))];\n        if (!next) return;\n        focusRow(next.item.id);\n        if (e.shiftKey && props.onSelect) selectRange(next.item.id);\n        else anchor.current = next.item.id;\n      };\n      const branch = (item.children?.length ?? 0) > 0;\n      const open = branch && !collapsed.has(item.id);\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowUp': {\n          const delta = e.key === 'ArrowDown' ? 1 : -1;\n          if (e.altKey) {\n            if (nudgers.get(parentId)?.(item.id, delta)) pendingFocus.current = item.id;\n          } else {\n            go(at + delta);\n          }\n          break;\n        }\n        case 'Home':\n          go(0);\n          break;\n        case 'End':\n          go(visible.length - 1);\n          break;\n        case 'ArrowRight':\n          if (branch && !open) toggle(item.id);\n          else if (open) go(at + 1);\n          else return;\n          break;\n        case 'ArrowLeft':\n          if (open) toggle(item.id);\n          else if (parentId !== null) go(visible.findIndex((v) => v.item.id === parentId));\n          else return;\n          break;\n        case 'Enter':\n        case ' ':\n          press(item, { shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey });\n          break;\n        default:\n          return;\n      }\n      e.preventDefault();\n    },\n  };\n\n  const uid = useId();\n  const shared: Shared = { props, collapsed, toggle, press, uid, nested: anyNested(items), bodies, nudgers, keys };\n  const palette = onAdd ? (addKinds ?? []) : [];\n  const cls = className ? `${s.root} ${className}` : s.root;\n\n  return (\n    <div className={cls}>\n      {(title !== undefined || palette.length > 0) && (\n        <div className={s.head}>\n          {title !== undefined && <h2 className={s.title}>{title}</h2>}\n          <div className={s.palette}>\n            {palette.map((kind) => (\n              <button\n                key={kind}\n                type=\"button\"\n                className={s.add}\n                aria-label={`Add ${kind}`}\n                onClick={() => {\n                  dlog('layer-list', 'onAdd', { kind });\n                  onAdd?.(kind);\n                }}\n              >\n                {kind}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      {items.length === 0 ? (\n        <div className={rows.empty}>\n          {empty ?? (palette.length > 0 ? 'No layers — add one above.' : 'No layers.')}\n        </div>\n      ) : (\n        <Level items={items} parentId={null} shared={shared} path=\"\" level={1} />\n      )}\n    </div>\n  );\n}\n\n/** A layer panel follows the canvas: shift toggles a row in or out. */\nconst PRESS_POLICY: SelectPolicy = { mode: 'multi', toggle: 'shift' };\n\nfunction lockedIds(items: LayerListItem[]): string[] {\n  const out: string[] = [];\n  for (const it of items) {\n    if (it.locked) out.push(it.id);\n    if (it.children) out.push(...lockedIds(it.children));\n  }\n  return out;\n}\n\ninterface LevelProps {\n  items: LayerListItem[];\n  parentId: string | null;\n  shared: Shared;\n  path: string;\n  level: number;\n}\n\n/** One sibling group. Each has its own drag, so a drag stays under one parent. */\nfunction Level({ items, parentId, shared, path, level }: LevelProps) {\n  const { props } = shared;\n  const selected = props.selectedIds ?? [];\n  const drag = useReorderDragList({\n    // With no `onReorder` every row is a locked one to the drag, so a press\n    // still reaches `onPress` and nothing ever engages.\n    items: items.map((it) => ({ id: it.id, label: it.label, locked: it.locked || !props.onReorder })),\n    selectedIds: items.filter((it) => selected.includes(it.id)).map((it) => it.id),\n    onReorder: (ids, target) => {\n      const moving = new Set(ids);\n      const inOrder = items.filter((it) => moving.has(it.id)).map((it) => it.id);\n      // The hook's index counts the dragged rows; a move's index does not.\n      const before = items.slice(0, target).filter((it) => moving.has(it.id)).length;\n      const move = { ids: inOrder, parentId, index: target - before };\n      dlog('layer-list', 'onReorder', move);\n      props.onReorder?.(move);\n    },\n    onPress: (id, mods) => {\n      const item = items.find((it) => it.id === id);\n      if (item) shared.press(item, mods);\n    },\n  });\n  shared.nudgers.set(parentId, (id, delta) =>\n    drag.nudge(id, items.findIndex((it) => it.id === id), delta),\n  );\n  const [el, setEl] = useState<HTMLDivElement | null>(null);\n  const bind = (node: HTMLDivElement | null) => {\n    setEl(node);\n    (drag.containerProps.ref as RefCallback<HTMLDivElement>)(node);\n  };\n\n  const bodies = items.map((it) => shared.bodies.get(it.id));\n  const cards = bodies.some(hasBody);\n  const { draggedIds, targetIndex, ghost } = drag.state;\n\n  const entry = (item: LayerListItem, i: number, ghosted: boolean) => {\n    const body = bodies[i];\n    const kids = item.children ?? [];\n    const open = !shared.collapsed.has(item.id);\n    const childId = `${shared.uid}${path}-${i}`;\n    const onPointerDown = ghosted ? undefined : drag.rowProps(item.id, i).onPointerDown;\n    const isSelected = selected.includes(item.id);\n    const cls = [s.entry];\n    if (!ghosted) {\n      if (draggedIds?.includes(item.id)) cls.push(s.dragging);\n      if (targetIndex === i && !draggedIds?.includes(item.id)) cls.push(s.dropBefore);\n      if (targetIndex === items.length && i === items.length - 1) cls.push(s.dropAfter);\n    }\n    const controls = <Controls item={item} shared={shared} />;\n    const head =\n      hasBody(body) ? (\n        <PropertyGroup\n          className={s.card}\n          title={item.title ?? item.label}\n          {...(item.tone === undefined ? {} : { tone: item.tone })}\n          collapsed={ghosted || !open}\n          onCollapsedChange={() => shared.toggle(item.id)}\n          leading={\n            <Handle\n              item={item}\n              reorder={props.onReorder !== undefined}\n              onPointerDown={onPointerDown}\n              onNudge={(delta) => shared.nudgers.get(parentId)?.(item.id, delta)}\n            />\n          }\n          actions={ghosted ? undefined : controls}\n        >\n          {ghosted ? null : body}\n        </PropertyGroup>\n      ) : (\n        <div\n          className={[rows.row, s.row, isSelected ? rows.selected : ''].filter(Boolean).join(' ')}\n          data-selected={isSelected ? 'true' : undefined}\n          data-locked={item.locked ? 'true' : undefined}\n          onPointerDown={onPointerDown}\n          {...(ghosted\n            ? {}\n            : {\n                role: 'row',\n                'aria-level': level,\n                ...(kids.length > 0 ? { 'aria-expanded': open } : {}),\n                ...(props.onSelect ? { 'aria-selected': isSelected } : {}),\n                tabIndex: shared.keys.tabStop === item.id ? 0 : -1,\n                ref: shared.keys.register(item.id),\n                onKeyDown: shared.keys.onKeyDown(item, parentId),\n                onFocus: () => shared.keys.onFocus(item.id),\n              })}\n        >\n          {shared.nested &&\n            (kids.length > 0 ? (\n              <span className={s.stop} onPointerDown={stop}>\n                <Disclosure\n                  open={open}\n                  onToggle={() => shared.toggle(item.id)}\n                  label={`${item.label} sublayers`}\n                  controls={childId}\n                />\n              </span>\n            ) : (\n              <span className={s.twistyGap} />\n            ))}\n          <Grip item={item} reorder={props.onReorder !== undefined} />\n          {props.onVisibilityChange &&\n            (item.locked ? (\n              <span className={s.check} />\n            ) : (\n              <input\n                className={s.check}\n                type=\"checkbox\"\n                checked={item.visible !== false}\n                onPointerDown={stop}\n                onChange={(e) => props.onVisibilityChange?.(item.id, e.target.checked)}\n                aria-label={`Show ${item.label}`}\n              />\n            ))}\n          {item.leading}\n          <span className={rows.label}>{item.title ?? item.label}</span>\n          {ghosted ? null : <Remove item={item} shared={shared} />}\n        </div>\n      );\n    return (\n      <div key={item.id} role=\"none\" className={cls.join(' ')} data-selected={isSelected ? 'true' : undefined}>\n        {head}\n        {!ghosted && kids.length > 0 && open && (\n          <div id={childId} role=\"rowgroup\" className={s.children}>\n            <Level items={kids} parentId={item.id} shared={shared} path={`${path}-${i}`} level={level + 1} />\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <>\n      {cards ? (\n        <PropertyList ref={bind} className={`${s.level} ${s.cards}`}>\n          {items.map((it, i) => entry(it, i, false))}\n        </PropertyList>\n      ) : (\n        <div\n          ref={bind}\n          className={s.level}\n          {...(parentId === null\n            ? {\n                role: 'treegrid',\n                'aria-label': props.label ?? props.title ?? 'Layers',\n                ...(props.onSelect ? { 'aria-multiselectable': true } : {}),\n              }\n            : { role: 'none' })}\n        >\n          {items.map((it, i) => entry(it, i, false))}\n        </div>\n      )}\n      {ghost && el ? (\n        <DragGhost at={ghost} from={el}>\n          {items.map((it, i) => (ghost.ids.includes(it.id) ? entry(it, i, true) : null))}\n        </DragGhost>\n      ) : null}\n    </>\n  );\n}\n\n// Keeps a press on a control inside a row from also starting the row's press.\nconst stop = (e: { stopPropagation(): void }) => e.stopPropagation();\n\n/** A row's grip: decoration, since the whole row takes the drag. */\nfunction Grip({ item, reorder }: { item: LayerListItem; reorder: boolean }) {\n  if (item.locked) {\n    return (\n      <span className={s.lock} role=\"img\" aria-label=\"Locked\">\n        <LockIcon size={12} />\n      </span>\n    );\n  }\n  if (!reorder && item.badge === undefined) return null;\n  return (\n    <span className={s.grip} aria-hidden=\"true\">\n      {item.badge ?? <DragGrip size={13} />}\n    </span>\n  );\n}\n\n/** A card's handle: the drag target, since the rest of its head folds it, and\n *  Alt+Up/Down on it moves the card. */\nfunction Handle({\n  item,\n  reorder,\n  onPointerDown,\n  onNudge,\n}: {\n  item: LayerListItem;\n  reorder: boolean;\n  onPointerDown: ((e: React.PointerEvent) => void) | undefined;\n  onNudge: (delta: -1 | 1) => void;\n}) {\n  if (item.locked) return <Grip item={item} reorder={reorder} />;\n  if (!reorder && item.badge === undefined) return undefined;\n  return (\n    <button\n      type=\"button\"\n      className={s.handle}\n      aria-label={`Drag to reorder ${item.label}`}\n      aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n      onPointerDown={onPointerDown}\n      onKeyDown={(e) => {\n        if (!e.altKey || (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')) return;\n        e.preventDefault();\n        onNudge(e.key === 'ArrowUp' ? -1 : 1);\n      }}\n    >\n      {item.badge ?? <DragGrip />}\n    </button>\n  );\n}\n\nfunction Controls({ item, shared }: { item: LayerListItem; shared: Shared }) {\n  const { onVisibilityChange } = shared.props;\n  return (\n    <>\n      {onVisibilityChange && !item.locked && (\n        <input\n          className={s.check}\n          type=\"checkbox\"\n          checked={item.visible !== false}\n          onClick={stop}\n          onChange={(e) => onVisibilityChange(item.id, e.target.checked)}\n          aria-label={`Show ${item.label}`}\n        />\n      )}\n      <Remove item={item} shared={shared} />\n    </>\n  );\n}\n\nfunction Remove({ item, shared }: { item: LayerListItem; shared: Shared }) {\n  const { onRemove } = shared.props;\n  if (!onRemove || item.locked) return null;\n  return (\n    <span className={s.stop} onPointerDown={stop}>\n      <CloseButton ariaLabel={`Remove ${item.label}`} onClick={() => onRemove(item.id)} />\n    </span>\n  );\n}\n","import { asNodeId, createMoveToIndexOp, dispatchApplyBatch } from '@weasel-js/core';\nimport type { NodeId, Scene, SceneNode, SelectionApi } from '@weasel-js/core';\nimport type { LayerListItem, LayerListProps } from './LayerList';\n\n/** Arguments for {@link useSceneLayerList}. */\nexport interface UseSceneLayerListArgs<TData, TLayer extends string, TPose> {\n  scene: Scene<TData, TLayer, TPose>;\n  selection: SelectionApi;\n  /** What the reorder op is dispatched against — the adapter `<SceneCanvas>` uses. */\n  adapter: object;\n  /** A row's content for a node: its label, a leading swatch or icon, whether it is locked. */\n  itemFor: (node: SceneNode<TData, TLayer, TPose>) => Omit<LayerListItem, 'id' | 'children'>;\n  /** Label of the reorder's history entry. Default `'Reorder'`. */\n  label?: string;\n}\n\n/**\n * The props that put a scene in a `<LayerList>`: a row per node, a container's\n * children nested under it, the front-most at the top, selection read from and\n * written to `selection`, and a drag dispatched as a `MoveToIndexOp`.\n */\nexport function useSceneLayerList<TData, TLayer extends string, TPose>(\n  args: UseSceneLayerListArgs<TData, TLayer, TPose>,\n): Required<Pick<LayerListProps, 'items' | 'selectedIds' | 'onSelect' | 'onReorder'>> {\n  const { scene, selection, adapter, itemFor, label = 'Reorder' } = args;\n\n  // A scene orders children back to front and the list front to back. Rebuilt\n  // every render: the scene keeps its identity across a reorder, so a memo keyed\n  // on it would serve the order from before.\n  const build = (ids: readonly NodeId[]): LayerListItem[] =>\n    [...ids].reverse().flatMap((id) => {\n      const node = scene.get(id);\n      if (!node) return [];\n      const kids = scene.childrenOf(id);\n      return [{ ...itemFor(node), id, ...(kids.length > 0 ? { children: build(kids) } : {}) }];\n    });\n\n  return {\n    items: build(scene.roots),\n    selectedIds: selection.current.map(String),\n    onSelect: (ids) => selection.set(ids.map(asNodeId)),\n    onReorder: ({ ids, parentId, index }) => {\n      const siblings = parentId === null ? scene.roots : scene.childrenOf(asNodeId(parentId));\n      // `index` counts from the front among the siblings the drag left behind.\n      const back = siblings.length - ids.length - index;\n      dispatchApplyBatch(adapter, [createMoveToIndexOp({ ids, parentId, index: Math.max(0, back) })], label);\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/chunks/{ListEditor-DGtwj99m.js → ListEditor-BAKs47bN.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./Button-XB-T75YL.js";
-import { t } from "./CloseButton-wb7Or5Eg.js";
+import { t as e } from "./Button-CQA-K1g9.js";
+import { t } from "./CloseButton-CKarkTT9.js";
 import { t as n } from "./field.module-B27pWv0i.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { useEffect as a, useRef as o, useState as s } from "react";
@@ -69,4 +69,4 @@ function l({ value: l, onChange: u, placeholder: d, empty: f = "None", addLabel:
 //#endregion
 export { l as t };
 
-//# sourceMappingURL=ListEditor-DGtwj99m.js.map
+//# sourceMappingURL=ListEditor-BAKs47bN.js.map

package/dist/chunks/{ListEditor-DGtwj99m.js.map → ListEditor-BAKs47bN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ListEditor-DGtwj99m.js","names":["s","f","Button","field_module_default","ListEditor_module_default","ListEditor","ariaLabel","inputs","useRef","focus","setFocus","useState","insert","onChange","value","at","remove","i","onKeyDown","name","className","empty","el","entry","j","v","CloseButton","addLabel"],"sources":["../../src/components/ListEditor/ListEditor.module.css","../../src/components/ListEditor/ListEditor.tsx"],"sourcesContent":[".editor {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  min-width: min(28rem, calc(100vw - 64px));\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.entry {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n}\n\n.input {\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--wzl-field-pad-x);\n}\n\n.empty {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  font-style: italic;\n}\n\n.actions {\n  display: flex;\n}\n","import { useEffect, useRef, useState, type KeyboardEvent } from 'react';\nimport { Button } from '../Button';\nimport { CloseButton } from '../CloseButton';\nimport f from '../field.module.css';\nimport s from './ListEditor.module.css';\n\n/** Props for {@link ListEditor}. */\nexport interface ListEditorProps {\n  value: readonly string[];\n  /** Every edit, add and removal, with the whole list. Entries are written as\n   *  typed — an empty one stays until it is removed. */\n  onChange: (next: string[]) => void;\n  /** Shown in an empty entry. */\n  placeholder?: string;\n  /** Shown in place of the entries when there are none. */\n  empty?: string;\n  /** Text of the add button. */\n  addLabel?: string;\n  /** Names the list for assistive tech; each entry is named from it. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * An editable list of strings: one field per entry, a remove button beside\n * each, and an add button under them. Enter in an entry adds one after it;\n * Backspace in an empty one removes it.\n */\nexport function ListEditor({\n  value,\n  onChange,\n  placeholder,\n  empty = 'None',\n  addLabel = 'Add',\n  'aria-label': ariaLabel,\n  className,\n}: ListEditorProps) {\n  const inputs = useRef<(HTMLInputElement | null)[]>([]);\n  const [focus, setFocus] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (focus === null) return;\n    inputs.current[focus]?.focus();\n    setFocus(null);\n  }, [focus]);\n\n  const insert = (at: number): void => {\n    onChange([...value.slice(0, at), '', ...value.slice(at)]);\n    setFocus(at);\n  };\n  const remove = (at: number): void => {\n    onChange(value.filter((_, i) => i !== at));\n    if (value.length > 1) setFocus(Math.max(0, at - 1));\n  };\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>, at: number): void => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      insert(at + 1);\n    } else if (e.key === 'Backspace' && value[at] === '') {\n      e.preventDefault();\n      remove(at);\n    }\n  };\n  const name = (i: number): string => `${ariaLabel ?? 'Entry'} ${i + 1}`;\n\n  return (\n    <div className={[s.editor, className].filter(Boolean).join(' ')} role=\"group\" aria-label={ariaLabel}>\n      {value.length === 0 ? (\n        <div className={s.empty}>{empty}</div>\n      ) : (\n        <ul className={s.list}>\n          {value.map((entry, i) => (\n            // Entries have no identity beyond their position, and two may be equal.\n            <li key={i} className={s.entry}>\n              <input\n                ref={(el) => {\n                  inputs.current[i] = el;\n                }}\n                type=\"text\"\n                className={`${f.frame} ${s.input}`}\n                aria-label={name(i)}\n                value={entry}\n                placeholder={placeholder}\n                onChange={(e) => onChange(value.map((v, j) => (j === i ? e.target.value : v)))}\n                onKeyDown={(e) => onKeyDown(e, i)}\n              />\n              <CloseButton ariaLabel={`Remove ${name(i)}`} onClick={() => remove(i)} />\n            </li>\n          ))}\n        </ul>\n      )}\n      <div className={s.actions}>\n        <Button size=\"sm\" onClick={() => insert(value.length)}>\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AC4BA,SAAgBK,EAAW,EACzB,UACA,aACA,gBACA,WAAQ,QACR,cAAW,OACX,cAAcC,GACd,gBACkB;CAClB,IAAMC,IAASC,EAAoC,CAAC,CAAC,GAC/C,CAACC,GAAOC,KAAYC,EAAwB,IAAI;CAEtD,QAAgB;EACd,AAAIF,MAAU,SACdF,EAAO,QAAQE,EAAM,EAAE,MAAM,GAC7BC,EAAS,IAAI;CACf,GAAG,CAACD,CAAK,CAAC;CAEV,IAAMG,KAAU,MAAqB;EAEnC,AADAC,EAAS;GAAC,GAAGC,EAAM,MAAM,GAAGC,CAAE;GAAG;GAAI,GAAGD,EAAM,MAAMC,CAAE;EAAC,CAAC,GACxDL,EAASK,CAAE;CACb,GACMC,KAAU,MAAqB;EAEnC,AADAH,EAASC,EAAM,QAAQ,GAAG,MAAMG,MAAMF,CAAE,CAAC,GACrCD,EAAM,SAAS,KAAGJ,EAAS,KAAK,IAAI,GAAGK,IAAK,CAAC,CAAC;CACpD,GACMG,KAAa,GAAoC,MAAqB;EAC1E,AAAI,EAAE,QAAQ,WACZ,EAAE,eAAe,GACjBN,EAAOG,IAAK,CAAC,KACJ,EAAE,QAAQ,eAAeD,EAAMC,OAAQ,OAChD,EAAE,eAAe,GACjBC,EAAOD,CAAE;CAEb,GACMI,KAAQ,MAAsB,GAAGb,KAAa,QAAQ,GAAGW,IAAI;CAEnE,OACE,kBAAC,OAAD;EAAK,WAAW,CAACjB,EAAE,QAAQoB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAAG,MAAK;EAAQ,cAAYd;EAA1F,UAAA,CACGQ,EAAM,WAAW,IAChB,kBAAC,OAAD;GAAK,WAAWd,EAAE;GAAQ,UAAAqB;EAAW,CAAA,IAErC,kBAAC,MAAD;GAAI,WAAWrB,EAAE;GACd,UAAAc,EAAM,KAAK,GAAO,MAEjB,kBAAC,MAAD;IAAY,WAAWd,EAAE;IAAzB,UAAA,CACE,kBAAC,SAAD;KACE,MAAM,MAAO;MACX,EAAO,QAAQiB,KAAKK;KACtB;KACA,MAAK;KACL,WAAW,GAAGrB,EAAE,MAAM,GAAGD,EAAE;KAC3B,cAAYmB,EAAKF,CAAC;KAClB,OAAOM;KACM;KACb,WAAW,MAAMV,EAASC,EAAM,KAAK,GAAG,MAAOU,MAAMP,IAAI,EAAE,OAAO,QAAQQ,CAAE,CAAC;KAC7E,YAAY,MAAMP,EAAU,GAAGD,CAAC;IACjC,CAAA,GACD,kBAACS,GAAD;KAAa,WAAW,UAAUP,EAAKF,CAAC;KAAK,eAAeD,EAAOC,CAAC;IAAI,CAAA,CACtE;GAdK,GAAAA,CAcL,CACL;EACC,CAAA,GAEN,kBAAC,OAAD;GAAK,WAAWjB,EAAE;GAChB,UAAA,kBAACE,GAAD;IAAQ,MAAK;IAAK,eAAeU,EAAOE,EAAM,MAAM;IACjD,UAAAa;GACK,CAAA;EACL,CAAA,CACF;;AAET"}
+{"version":3,"file":"ListEditor-BAKs47bN.js","names":["s","f","Button","field_module_default","ListEditor_module_default","ListEditor","ariaLabel","inputs","useRef","focus","setFocus","useState","insert","onChange","value","at","remove","i","onKeyDown","name","className","empty","el","entry","j","v","CloseButton","addLabel"],"sources":["../../src/components/ListEditor/ListEditor.module.css","../../src/components/ListEditor/ListEditor.tsx"],"sourcesContent":[".editor {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  min-width: min(28rem, calc(100vw - 64px));\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.entry {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n}\n\n.input {\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--wzl-field-pad-x);\n}\n\n.empty {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  font-style: italic;\n}\n\n.actions {\n  display: flex;\n}\n","import { useEffect, useRef, useState, type KeyboardEvent } from 'react';\nimport { Button } from '../Button';\nimport { CloseButton } from '../CloseButton';\nimport f from '../field.module.css';\nimport s from './ListEditor.module.css';\n\n/** Props for {@link ListEditor}. */\nexport interface ListEditorProps {\n  value: readonly string[];\n  /** Every edit, add and removal, with the whole list. Entries are written as\n   *  typed — an empty one stays until it is removed. */\n  onChange: (next: string[]) => void;\n  /** Shown in an empty entry. */\n  placeholder?: string;\n  /** Shown in place of the entries when there are none. */\n  empty?: string;\n  /** Text of the add button. */\n  addLabel?: string;\n  /** Names the list for assistive tech; each entry is named from it. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * An editable list of strings: one field per entry, a remove button beside\n * each, and an add button under them. Enter in an entry adds one after it;\n * Backspace in an empty one removes it.\n */\nexport function ListEditor({\n  value,\n  onChange,\n  placeholder,\n  empty = 'None',\n  addLabel = 'Add',\n  'aria-label': ariaLabel,\n  className,\n}: ListEditorProps) {\n  const inputs = useRef<(HTMLInputElement | null)[]>([]);\n  const [focus, setFocus] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (focus === null) return;\n    inputs.current[focus]?.focus();\n    setFocus(null);\n  }, [focus]);\n\n  const insert = (at: number): void => {\n    onChange([...value.slice(0, at), '', ...value.slice(at)]);\n    setFocus(at);\n  };\n  const remove = (at: number): void => {\n    onChange(value.filter((_, i) => i !== at));\n    if (value.length > 1) setFocus(Math.max(0, at - 1));\n  };\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>, at: number): void => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      insert(at + 1);\n    } else if (e.key === 'Backspace' && value[at] === '') {\n      e.preventDefault();\n      remove(at);\n    }\n  };\n  const name = (i: number): string => `${ariaLabel ?? 'Entry'} ${i + 1}`;\n\n  return (\n    <div className={[s.editor, className].filter(Boolean).join(' ')} role=\"group\" aria-label={ariaLabel}>\n      {value.length === 0 ? (\n        <div className={s.empty}>{empty}</div>\n      ) : (\n        <ul className={s.list}>\n          {value.map((entry, i) => (\n            // Entries have no identity beyond their position, and two may be equal.\n            <li key={i} className={s.entry}>\n              <input\n                ref={(el) => {\n                  inputs.current[i] = el;\n                }}\n                type=\"text\"\n                className={`${f.frame} ${s.input}`}\n                aria-label={name(i)}\n                value={entry}\n                placeholder={placeholder}\n                onChange={(e) => onChange(value.map((v, j) => (j === i ? e.target.value : v)))}\n                onKeyDown={(e) => onKeyDown(e, i)}\n              />\n              <CloseButton ariaLabel={`Remove ${name(i)}`} onClick={() => remove(i)} />\n            </li>\n          ))}\n        </ul>\n      )}\n      <div className={s.actions}>\n        <Button size=\"sm\" onClick={() => insert(value.length)}>\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AC4BA,SAAgBK,EAAW,EACzB,UACA,aACA,gBACA,WAAQ,QACR,cAAW,OACX,cAAcC,GACd,gBACkB;CAClB,IAAMC,IAASC,EAAoC,CAAC,CAAC,GAC/C,CAACC,GAAOC,KAAYC,EAAwB,IAAI;CAEtD,QAAgB;EACd,AAAIF,MAAU,SACdF,EAAO,QAAQE,EAAM,EAAE,MAAM,GAC7BC,EAAS,IAAI;CACf,GAAG,CAACD,CAAK,CAAC;CAEV,IAAMG,KAAU,MAAqB;EAEnC,AADAC,EAAS;GAAC,GAAGC,EAAM,MAAM,GAAGC,CAAE;GAAG;GAAI,GAAGD,EAAM,MAAMC,CAAE;EAAC,CAAC,GACxDL,EAASK,CAAE;CACb,GACMC,KAAU,MAAqB;EAEnC,AADAH,EAASC,EAAM,QAAQ,GAAG,MAAMG,MAAMF,CAAE,CAAC,GACrCD,EAAM,SAAS,KAAGJ,EAAS,KAAK,IAAI,GAAGK,IAAK,CAAC,CAAC;CACpD,GACMG,KAAa,GAAoC,MAAqB;EAC1E,AAAI,EAAE,QAAQ,WACZ,EAAE,eAAe,GACjBN,EAAOG,IAAK,CAAC,KACJ,EAAE,QAAQ,eAAeD,EAAMC,OAAQ,OAChD,EAAE,eAAe,GACjBC,EAAOD,CAAE;CAEb,GACMI,KAAQ,MAAsB,GAAGb,KAAa,QAAQ,GAAGW,IAAI;CAEnE,OACE,kBAAC,OAAD;EAAK,WAAW,CAACjB,EAAE,QAAQoB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAAG,MAAK;EAAQ,cAAYd;EAA1F,UAAA,CACGQ,EAAM,WAAW,IAChB,kBAAC,OAAD;GAAK,WAAWd,EAAE;GAAQ,UAAAqB;EAAW,CAAA,IAErC,kBAAC,MAAD;GAAI,WAAWrB,EAAE;GACd,UAAAc,EAAM,KAAK,GAAO,MAEjB,kBAAC,MAAD;IAAY,WAAWd,EAAE;IAAzB,UAAA,CACE,kBAAC,SAAD;KACE,MAAM,MAAO;MACX,EAAO,QAAQiB,KAAKK;KACtB;KACA,MAAK;KACL,WAAW,GAAGrB,EAAE,MAAM,GAAGD,EAAE;KAC3B,cAAYmB,EAAKF,CAAC;KAClB,OAAOM;KACM;KACb,WAAW,MAAMV,EAASC,EAAM,KAAK,GAAG,MAAOU,MAAMP,IAAI,EAAE,OAAO,QAAQQ,CAAE,CAAC;KAC7E,YAAY,MAAMP,EAAU,GAAGD,CAAC;IACjC,CAAA,GACD,kBAACS,GAAD;KAAa,WAAW,UAAUP,EAAKF,CAAC;KAAK,eAAeD,EAAOC,CAAC;IAAI,CAAA,CACtE;GAdK,GAAAA,CAcL,CACL;EACC,CAAA,GAEN,kBAAC,OAAD;GAAK,WAAWjB,EAAE;GAChB,UAAA,kBAACE,GAAD;IAAQ,MAAK;IAAK,eAAeU,EAAOE,EAAM,MAAM;IACjD,UAAAa;GACK,CAAA;EACL,CAAA,CACF;;AAET"}

package/dist/chunks/{MenuButton-TAFg88Lp.js → MenuButton-CJGdhwGr.js}

@@ -1,5 +1,5 @@
-import { i as e } from "./portalHost-CE70wLzo.js";
-import { n as t, r as n } from "./segmentTooltip-CGxCOWNz.js";
+import { i as e } from "./portalHost-RUQPxIoW.js";
+import { n as t, r as n } from "./segmentTooltip-8VBPNgEc.js";
 import { t as r } from "./field.module-B27pWv0i.js";
 import { t as i } from "./listbox.module-BcdVJMbm.js";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
@@ -14,7 +14,7 @@ var f = {
 //#endregion
 //#region src/components/MenuButton/MenuButton.tsx
 function p({ label: p, items: m, onAction: h, isDisabled: g, className: _, "aria-label": v, portalContainer: y, shortcut: b, tooltip: x }) {
-	let { anchor: S, portalProps: C } = e(y);
+	let { anchor: S, portalProps: C, ready: w } = e(y);
 	return /* @__PURE__ */ o(u, { children: [
 		S,
 		/* @__PURE__ */ a(t, {
@@ -51,7 +51,7 @@ function p({ label: p, items: m, onAction: h, isDisabled: g, className: _, "aria
 				})]
 			})
 		}),
-		/* @__PURE__ */ a(d, {
+		w && /* @__PURE__ */ a(d, {
 			className: f.popover,
 			"data-weasel-overlay": "",
 			...C,
@@ -72,4 +72,4 @@ function p({ label: p, items: m, onAction: h, isDisabled: g, className: _, "aria
 //#endregion
 export { p as t };
 
-//# sourceMappingURL=MenuButton-TAFg88Lp.js.map
+//# sourceMappingURL=MenuButton-CJGdhwGr.js.map

package/dist/chunks/MenuButton-CJGdhwGr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton-CJGdhwGr.js","names":["RACButton","f","s","RACPopover","RACMenu","listbox","RACMenuItem","useOverlayPortal","TriggerTooltip","segmentTooltipContent","field_module_default","listbox_module_default","MenuButton_module_default","MenuButton","ariaLabel","portalContainer","MenuTrigger","anchor","isDisabled","Button","className","label","ready","Popover","portalProps","Menu","onAction","key","items","MenuItem","item"],"sources":["../../src/components/MenuButton/MenuButton.module.css","../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":[".trigger {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  padding: 0 var(--wzl-space-3) 0 var(--wzl-space-5);\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.label {\n  color: var(--wzl-fg-subtle);\n}\n\n.chevron {\n  width: 10px;\n  height: 10px;\n  color: var(--wzl-fg-muted);\n  flex: 0 0 auto;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  max-height: inherit;\n  outline: none;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  padding: var(--wzl-space-2) var(--wzl-space-4);\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n  color: var(--wzl-fg);\n  white-space: nowrap;\n  outline: none;\n}\n\n.item[data-focused] {\n  background: var(--wzl-surface-hover);\n}\n\n.item[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Button as RACButton,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  MenuTrigger,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport f from '../field.module.css';\nimport listbox from '../listbox.module.css';\nimport s from './MenuButton.module.css';\nimport { TriggerTooltip, segmentTooltipContent, type SegmentTooltipFields } from '../segmentTooltip';\n\n/** One row in a {@link MenuButton}'s list. */\nexport type MenuButtonItem<T extends string = string> = {\n  value: T;\n  label: ReactNode;\n  isDisabled?: boolean;\n  /** Plain-text form of `label`, for type-to-select and screen readers. A\n   *  string label supplies this itself. */\n  textValue?: string;\n};\n\n/** Props for {@link MenuButton}. */\nexport type MenuButtonProps<T extends string = string> = {\n  /** What the button says. It never changes to show a chosen row. */\n  label: ReactNode;\n  items: ReadonlyArray<MenuButtonItem<T>>;\n  /** Fired with the value of the row chosen. */\n  onAction: (value: T) => void;\n  isDisabled?: boolean;\n  className?: string;\n  'aria-label'?: string;\n} & SegmentTooltipFields & OverlayPortalProps;\n\n/**\n * A button that opens a list and acts on the row chosen — \"Add trial…\",\n * \"Load…\". Unlike a {@link Select} it holds no value, so it sizes to its own\n * label rather than to its widest row.\n *\n * `shortcut` adds a kit tooltip reading `Name (⌘N)`, named by `aria-label` or\n * a string `label`, as `Button` does; `tooltip` replaces that text.\n */\nexport function MenuButton<T extends string = string>({\n  label,\n  items,\n  onAction,\n  isDisabled,\n  className,\n  'aria-label': ariaLabel,\n  portalContainer,\n  shortcut,\n  tooltip,\n}: MenuButtonProps<T>) {\n  const { anchor, portalProps, ready } = useOverlayPortal(portalContainer);\n  return (\n    <MenuTrigger>\n      {anchor}\n      <TriggerTooltip\n        content={segmentTooltipContent({ tooltip, shortcut, ariaLabel, label })}\n        disabled={isDisabled}\n      >\n        <RACButton\n          className={[f.frame, s.trigger, className].filter(Boolean).join(' ')}\n          isDisabled={isDisabled}\n          aria-label={ariaLabel}\n        >\n          <span className={s.label}>{label}</span>\n          <svg className={s.chevron} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </RACButton>\n      </TriggerTooltip>\n      {/* `data-weasel-overlay`: see Select — the list renders in a portal,\n          outside the subtree the trigger sits in. */}\n      {ready && (\n        <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n          <RACMenu className={`${listbox.surface} ${listbox.list}`} onAction={(key) => onAction(key as T)}>\n            {items.map((item) => (\n              <RACMenuItem\n                key={item.value}\n                id={item.value}\n                className={s.item}\n                isDisabled={item.isDisabled}\n                textValue={item.textValue ?? (typeof item.label === 'string' ? item.label : undefined)}\n              >\n                {item.label}\n              </RACMenuItem>\n            ))}\n          </RACMenu>\n        </RACPopover>\n      )}\n    </MenuTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AC4CA,SAAgBa,EAAsC,EACpD,UACA,UACA,aACA,eACA,cACA,cAAcC,GACd,oBACA,aACA,cACqB;CACrB,IAAM,EAAE,WAAQ,gBAAa,aAAUP,EAAiBQ,CAAe;CACvE,OACE,kBAACC,GAAD,EAAA,UAAA;EACGC;EACD,kBAACT,GAAD;GACE,SAASC,EAAsB;IAAE;IAAS;IAAU;IAAW;GAAM,CAAC;GACtE,UAAUS;GAEV,UAAA,kBAAClB,GAAD;IACE,WAAW;KAACC,EAAE;KAAOC,EAAE;KAASkB;IAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;IACvD;IACZ,cAAYN;IAHd,UAAA,CAKE,kBAAC,QAAD;KAAM,WAAWZ,EAAE;KAAQ,UAAAmB;IAAY,CAAA,GACvC,kBAAC,OAAD;KAAK,WAAWnB,EAAE;KAAS,SAAQ;KAAY,eAAY;KACzD,UAAA,kBAAC,QAAD;MAAM,GAAE;MAAiB,MAAK;MAAO,QAAO;MAAe,aAAY;MAAM,eAAc;MAAQ,gBAAe;KAAS,CAAA;IACxH,CAAA,CACI;;EACG,CAAA;EAGfoB,KACC,kBAACnB,GAAD;GAAY,WAAWD,EAAE;GAAS,uBAAoB;GAAG,GAAIsB;GAC3D,UAAA,kBAACpB,GAAD;IAAS,WAAW,GAAGC,EAAQ,QAAQ,GAAGA,EAAQ;IAAQ,WAAW,MAAQqB,EAASC,CAAQ;IAC3F,UAAAC,EAAM,KAAK,MACV,kBAACtB,GAAD;KAEE,IAAIwB,EAAK;KACT,WAAW5B,EAAE;KACb,YAAY4B,EAAK;KACjB,WAAWA,EAAK,cAAc,OAAOA,EAAK,SAAU,WAAWA,EAAK,QAAQ,KAAA;KAE3E,UAAAA,EAAK;IACK,GAPNA,EAAK,KAOC,CACd;GACM,CAAA;EACC,CAAA;CAEH,EAAA,CAAA;AAEjB"}

package/dist/chunks/{MeshEditor-8CRsu-Td.js → MeshEditor-rhf7cXfG.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./handles-CqVANLtu.js";
 import { t } from "./ColorField-BwlelY26.js";
 import { t as n } from "./paintPreview-CuSZiHpR.js";
-import { t as r } from "./ToggleBar-BZ4Gk1IU.js";
+import { t as r } from "./ToggleBar-CfYbMK3x.js";
 import { asPaint as i, useHandleDrag as a } from "@weasel-js/core";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { useRef as c } from "react";
@@ -196,4 +196,4 @@ function D(e) {
 //#endregion
 export { v as a, y as i, S as n, h as o, b as r, _ as s, E as t };
 
-//# sourceMappingURL=MeshEditor-8CRsu-Td.js.map
+//# sourceMappingURL=MeshEditor-rhf7cXfG.js.map