@weasel-js/ui 1.3.0 → 1.4.0-pre.0

package/dist/chunks/SelectionPanel-Cl18SdD6.js

@@ -0,0 +1,561 @@
+import { n as e, t } from "./Icon-CxoJb_bw.js";
+import { t as n } from "./ToggleBar-D0veW91s.js";
+import { t as r } from "./InlineRange-mb19EGOI.js";
+import { t as i } from "./ColorField-CKbnsEUN.js";
+import { t as a } from "./PaintInput-CgZR3B0r.js";
+import { t as o } from "./Input-DRUeowbz.js";
+import { t as s } from "./NumberField-CQ7OJORF.js";
+import { t as c } from "./Select-g8PhE010.js";
+import { t as l } from "./Switch-QviBb61l.js";
+import { t as u } from "./FontFamilySelect-DwkwRYrr.js";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { MIXED as m, asNodeId as h, isBuiltinToolPref as g } from "@weasel-js/core";
+import { Fragment as _, useState as v, useSyncExternalStore as y } from "react";
+//#region src/components/SelectionPanel/model.ts
+function b(e, t) {
+	if (e.kind === "container") return "group";
+	for (let n of t) if (n.matches(e.data)) return n.name;
+	return "unknown";
+}
+function x(e) {
+	return !("kind" in e);
+}
+function S(e) {
+	let t = [], n = [], r = (e, t) => {
+		for (let [n, i] of Object.entries(e.children)) x(i) ? r(i, t) : t.push({
+			path: n,
+			leaf: i
+		});
+	};
+	for (let [i, a] of Object.entries(e.children)) if (x(a)) {
+		let e = [];
+		r(a, e), t.push({
+			key: i,
+			name: a.name,
+			rows: C(e)
+		});
+	} else n.push({
+		path: i,
+		leaf: a
+	});
+	return n.length > 0 && t.unshift({
+		key: "",
+		name: "",
+		rows: C(n)
+	}), t;
+}
+function C(e) {
+	let t = [];
+	for (let n of e) {
+		let e = n.leaf.pair, r = t[t.length - 1];
+		e !== void 0 && r !== void 0 && r.label === e ? r.leaves.push(n) : t.push({
+			label: e ?? n.leaf.name,
+			leaves: [n]
+		});
+	}
+	return t;
+}
+function w(e, t) {
+	let n = [...new Set(e)];
+	if (n.length === 0) return [];
+	let r = new Map(t.map((e) => [e.name, e])), i = n.map((e) => r.get(e)?.schema);
+	if (i.some((e) => e === void 0)) return [];
+	let [a, ...o] = i, s = S(a);
+	if (o.length === 0) return s;
+	let c = (e) => `${e.path}\0${e.leaf.kind}`, l = o.map((e) => new Set(S(e).flatMap((e) => e.rows).flatMap((e) => e.leaves).map(c))), u = (e) => l.every((t) => t.has(c(e)));
+	return s.map((e) => ({
+		...e,
+		rows: e.rows.map((e) => ({
+			...e,
+			leaves: e.leaves.filter(u)
+		})).filter((e) => e.leaves.length > 0)
+	})).filter((e) => e.rows.length > 0);
+}
+function T(e, t) {
+	let n = t.split(".");
+	if (n.length < 2) return;
+	let r = n[0], i = r === "pose" ? e.pose : r === "data" ? e.data : void 0;
+	for (let e = 1; e < n.length; e++) {
+		if (typeof i != "object" || !i) return;
+		i = i[n[e]];
+	}
+	return i;
+}
+function E(e, t, n) {
+	let [r, ...i] = t;
+	if (i.length === 0) return Array.isArray(e) ? Object.assign([...e], { [r]: n }) : {
+		...e,
+		[r]: n
+	};
+	let a = e[r], o = E(Array.isArray(a) ? [...a] : typeof a == "object" && a ? { ...a } : {}, i, n);
+	return Array.isArray(e) ? Object.assign([...e], { [r]: o }) : {
+		...e,
+		[r]: o
+	};
+}
+function D(e, t) {
+	let n, r = !0;
+	for (let i of e) {
+		let e = T(i, t);
+		if (r) n = e, r = !1;
+		else if (!Object.is(e, n)) return m;
+	}
+	return n;
+}
+function O(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) t.set(n, (t.get(n) ?? 0) + 1);
+	return [...t.entries()].map(([e, t]) => t > 1 ? `${e} ×${t}` : e).join(" · ");
+}
+var k = {
+	root: "_root_q9h3j_1",
+	header: "_header_q9h3j_8",
+	kind: "_kind_q9h3j_16",
+	breakdown: "_breakdown_q9h3j_21",
+	section: "_section_q9h3j_26",
+	sectionTitle: "_sectionTitle_q9h3j_35",
+	row: "_row_q9h3j_44",
+	rowLabel: "_rowLabel_q9h3j_52",
+	rowControls: "_rowControls_q9h3j_56",
+	namedField: "_namedField_q9h3j_66",
+	blockRow: "_blockRow_q9h3j_78",
+	toggle: "_toggle_q9h3j_89",
+	flagToggle: "_flagToggle_q9h3j_111",
+	number: "_number_q9h3j_115",
+	select: "_select_q9h3j_116",
+	unitSuffix: "_unitSuffix_q9h3j_120",
+	mixedSwitch: "_mixedSwitch_q9h3j_126",
+	unrenderable: "_unrenderable_q9h3j_130",
+	objectLeaf: "_objectLeaf_q9h3j_137",
+	objectGroup: "_objectGroup_q9h3j_146",
+	slider: "_slider_q9h3j_153",
+	sliderReadout: "_sliderReadout_q9h3j_157"
+}, A = (e) => e.length === 0 ? e : e[0].toUpperCase() + e.slice(1);
+function j(e) {
+	let { scene: t, selection: n, properties: r, routing: i, renderers: a, kindLabel: o = A, emptyState: s = null, className: c } = e;
+	y(t.subscribe, t.getVersion, t.getVersion);
+	let l = n.current.map((e) => t.get(h(e))).filter((e) => e != null), u = l.map((e) => b(e, i)), m = l.map((e) => e.id).join(","), g = w(u, r);
+	if (l.length === 0) return /* @__PURE__ */ f("div", {
+		className: [k.root, c].filter(Boolean).join(" "),
+		children: s
+	});
+	let v = (e, r) => {
+		let [i, ...a] = e.path.split(".");
+		if (a.length === 0) return;
+		let o = n.current.map(h);
+		t.batch(`Edit ${e.leaf.name}`, () => {
+			for (let e of o) {
+				let n = t.get(e);
+				n && (i === "pose" ? t.setPose(e, E(n.pose, a, r)) : i === "data" && t.update(e, { data: E(n.data, a, r) }));
+			}
+		});
+	};
+	return /* @__PURE__ */ p("div", {
+		className: [k.root, c].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ f("header", {
+			className: k.header,
+			children: l.length === 1 ? /* @__PURE__ */ f("span", {
+				className: k.kind,
+				children: o(u[0])
+			}) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("span", {
+				className: k.kind,
+				children: [l.length, " selected"]
+			}), /* @__PURE__ */ f("span", {
+				className: k.breakdown,
+				children: O(u)
+			})] })
+		}), g.map((e) => {
+			let t = e.rows.map((e) => ({
+				row: e,
+				controls: P(e.leaves.map((t) => M(t, e.leaves.length > 1 ? `${e.label} ${t.leaf.name}` : t.leaf.name, l, a, v, m)), a)
+			})).filter(({ controls: e }) => e.length > 0);
+			return t.length === 0 ? null : /* @__PURE__ */ p("section", {
+				className: k.section,
+				children: [e.name !== "" && /* @__PURE__ */ f("h3", {
+					className: k.sectionTitle,
+					children: e.name
+				}), t.map(({ row: t, controls: n }) => t.leaves.length === 1 && t.leaves[0].leaf.block ? /* @__PURE__ */ p("div", { children: [e.name === "" && t.leaves[0].leaf.kind !== "object" && /* @__PURE__ */ f("h4", {
+					className: k.sectionTitle,
+					title: t.leaves[0].leaf.description,
+					children: t.leaves[0].leaf.name
+				}), n[0].content] }, t.leaves[0].path) : /* @__PURE__ */ p("div", {
+					className: k.row,
+					children: [/* @__PURE__ */ f("span", {
+						className: k.rowLabel,
+						title: t.leaves[0].leaf.description,
+						children: t.label
+					}), /* @__PURE__ */ f("span", {
+						className: k.rowControls,
+						children: n.map(({ key: e, content: t }) => /* @__PURE__ */ f(_, { children: t }, e))
+					})]
+				}, t.leaves[0].path))]
+			}, e.key);
+		})]
+	});
+}
+function M(e, t, n, r, i, a) {
+	let { path: o, leaf: s } = e, c = D(n, o), l = c === m, u = {
+		path: o,
+		pref: s,
+		value: l ? void 0 : c,
+		mixed: l,
+		unset: !l && c === void 0,
+		setValue: (t) => i(e, t),
+		valueAt: (e) => {
+			let t = D(n, e);
+			return t === m ? {
+				value: void 0,
+				mixed: !0
+			} : {
+				value: t,
+				mixed: !1
+			};
+		}
+	};
+	return {
+		key: o,
+		leaf: s,
+		ctx: u,
+		ariaLabel: t,
+		render: () => {
+			let e = r?.[o] ?? r?.[s.kind];
+			return e ? e(u) : I(u, t, r, a);
+		}
+	};
+}
+function N(e, t) {
+	let { leaf: n } = e;
+	return n.kind === "boolean" && n.control === "toggle" && n.pair !== void 0 && t?.[e.ctx.path] === void 0 && t?.[n.kind] === void 0;
+}
+function P(e, t) {
+	let n = [];
+	for (let r = 0; r < e.length;) {
+		let i = e[r];
+		if (!N(i, t)) {
+			let e = i.render();
+			e != null && n.push({
+				key: i.key,
+				leaf: i.leaf,
+				block: i.leaf.block === !0,
+				content: e
+			}), r += 1;
+			continue;
+		}
+		let a = r + 1;
+		for (; a < e.length && N(e[a], t) && e[a].leaf.pair === i.leaf.pair;) a += 1;
+		let o = e.slice(r, a);
+		n.push({
+			key: i.key,
+			leaf: i.leaf,
+			block: o.every((e) => e.leaf.block === !0),
+			content: /* @__PURE__ */ f(F, {
+				run: o,
+				ariaLabel: i.leaf.pair
+			})
+		}), r = a;
+	}
+	return n;
+}
+function F({ run: r, ariaLabel: i }) {
+	let a = r.filter((e) => e.ctx.value === !0).map((e) => e.key);
+	return /* @__PURE__ */ f(n, {
+		mode: "multiple",
+		size: "sm",
+		variant: "flat",
+		className: k.flagToggle,
+		ariaLabel: i,
+		items: r.map((n) => {
+			let r = n.leaf;
+			return {
+				value: n.key,
+				label: r.icon && r.icon in e ? /* @__PURE__ */ f(t, {
+					name: r.icon,
+					size: 14
+				}) : r.short ?? r.name.slice(0, 1),
+				ariaLabel: n.ariaLabel
+			};
+		}),
+		value: a,
+		mixedValues: r.filter((e) => e.ctx.mixed).map((e) => e.key),
+		onChange: (e) => {
+			for (let t of r) {
+				let n = e.includes(t.key);
+				n !== a.includes(t.key) && t.ctx.setValue(n);
+			}
+		}
+	});
+}
+function I(o, m, h, _ = "", v = !1) {
+	let { pref: y, value: b, mixed: x, unset: S, setValue: C } = o;
+	if (y.kind === "font-family") {
+		let e = o.valueAt("data.style.fontWeight"), t = o.valueAt("data.style.fontStyle");
+		return /* @__PURE__ */ f(u, {
+			className: k.select,
+			value: x || typeof b != "string" ? void 0 : b,
+			mixed: x,
+			onChange: C,
+			weight: typeof e.value == "number" ? e.value : void 0,
+			fontStyle: t.value === "italic" ? "italic" : void 0,
+			"aria-label": m
+		});
+	}
+	if (!g(y)) return /* @__PURE__ */ p("span", {
+		className: k.unrenderable,
+		children: [
+			"(",
+			y.kind,
+			": no renderer)"
+		]
+	});
+	switch (y.kind) {
+		case "number": {
+			let e = y, t = typeof b == "number" && Number.isFinite(b) ? b : void 0, n = t === void 0 ? NaN : e.unit ? e.unit.toDisplay(t) : t;
+			if (e.control === "slider") {
+				let i = e.min ?? 0, a = e.max ?? 100, o = !x && t !== void 0;
+				return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, {
+					min: i,
+					max: a,
+					step: e.step ?? 1,
+					value: o ? Math.min(Math.max(n, i), a) : i,
+					disabled: x,
+					className: k.slider,
+					"aria-label": m,
+					onChange: (t) => {
+						let n = Number(t.target.value);
+						C(e.unit ? e.unit.fromDisplay(n) : n);
+					}
+				}), /* @__PURE__ */ f("span", {
+					className: k.sliderReadout,
+					"aria-hidden": "true",
+					children: o ? `${n}${e.unit?.suffix ?? ""}` : "—"
+				})] });
+			}
+			let i = /* @__PURE__ */ f(s, {
+				className: k.number,
+				value: x || t === void 0 ? NaN : n,
+				placeholder: x ? "Mixed" : void 0,
+				minValue: e.min,
+				maxValue: e.max,
+				step: e.step ?? 1,
+				hideSteppers: !0,
+				"aria-label": m,
+				onChange: (t) => {
+					Number.isNaN(t) || C(e.unit ? e.unit.fromDisplay(t) : t);
+				}
+			});
+			return e.unit?.suffix === void 0 ? i : /* @__PURE__ */ p(d, { children: [i, /* @__PURE__ */ f("span", {
+				className: k.unitSuffix,
+				"aria-hidden": "true",
+				children: e.unit.suffix
+			})] });
+		}
+		case "string": return /* @__PURE__ */ f(R, {
+			text: x ? void 0 : typeof b == "string" ? b : "",
+			placeholder: x ? "Mixed" : void 0,
+			ariaLabel: m,
+			onCommit: C
+		});
+		case "boolean": {
+			let r = y;
+			if (r.control === "toggle") return /* @__PURE__ */ f(n, {
+				mode: "multiple",
+				size: "sm",
+				variant: "flat",
+				className: k.flagToggle,
+				ariaLabel: m,
+				items: [{
+					value: o.path,
+					label: r.icon && r.icon in e ? /* @__PURE__ */ f(t, {
+						name: r.icon,
+						size: 14
+					}) : r.short ?? r.name.slice(0, 1),
+					ariaLabel: m
+				}],
+				value: b === !0 ? [o.path] : [],
+				mixedValues: x ? [o.path] : [],
+				onChange: (e) => C(e.includes(o.path))
+			});
+			let i = /* @__PURE__ */ f(l, {
+				isSelected: !!b,
+				onChange: C,
+				"aria-label": m
+			});
+			return !x && !S ? i : /* @__PURE__ */ f("span", {
+				className: k.mixedSwitch,
+				title: x ? "Mixed" : "Not set",
+				children: i
+			});
+		}
+		case "enum": {
+			let r = y, i = r.encoding ? x ? void 0 : r.encoding.read(b, o.siblings) : x || S ? void 0 : typeof b == "string" ? b : r.default, a = (e) => C(r.encoding ? r.encoding.write(e, o.siblings) : e);
+			return r.control === "toggle" ? /* @__PURE__ */ f(n, {
+				size: "sm",
+				variant: "flat",
+				className: k.toggle,
+				ariaLabel: m,
+				items: r.options.map((n) => ({
+					value: n.value,
+					label: n.icon && n.icon in e ? /* @__PURE__ */ f(t, {
+						name: n.icon,
+						size: 14
+					}) : n.short ?? n.label,
+					ariaLabel: n.label,
+					disabled: n.disabled
+				})),
+				value: i ?? null,
+				onChange: (e) => {
+					e !== null && a(e);
+				}
+			}) : /* @__PURE__ */ f(c, {
+				className: k.select,
+				options: r.options.map((e) => ({
+					value: e.value,
+					label: e.label,
+					isDisabled: e.disabled
+				})),
+				selectedKey: i ?? null,
+				placeholder: x ? "Mixed" : S ? "—" : void 0,
+				onSelectionChange: a,
+				"aria-label": m
+			});
+		}
+		case "color": {
+			let e = y;
+			return /* @__PURE__ */ f(i, {
+				value: x ? void 0 : typeof b == "string" ? b : e.default,
+				mixed: x,
+				alpha: e.alpha,
+				onChange: C,
+				"aria-label": m
+			});
+		}
+		case "paint": return /* @__PURE__ */ f(a, {
+			value: b === null ? null : b ?? (x ? void 0 : y.default),
+			mixed: x,
+			unset: S,
+			allowNone: !v,
+			onChange: C,
+			"aria-label": m
+		}, _);
+		case "object": return /* @__PURE__ */ f(L, {
+			ctx: o,
+			renderers: h,
+			selectionKey: _
+		});
+		default: throw Error(`SelectionPanel: no control for built-in pref kind "${y.kind}"`);
+	}
+}
+function L({ ctx: n, renderers: r, selectionKey: i = "" }) {
+	let a = n.pref, o = typeof n.value == "object" && n.value !== null ? n.value : void 0, s = Object.values(a.children).every((e) => !("kind" in e)), c = (s, l) => {
+		let u = [], d = (e) => typeof e == "object" && !!e && "controls" in e, m = [], h = () => {
+			for (let { key: e, leaf: t, block: n, content: i } of P(m, r)) {
+				let r = u[u.length - 1];
+				if (t.pair !== void 0 && d(r) && r.pair === t.pair) {
+					r.controls.push(/* @__PURE__ */ f(_, { children: i }, e)), r.block &&= n;
+					continue;
+				}
+				u.push({
+					key: e,
+					pair: t.pair,
+					label: t.pair ?? t.name,
+					title: t.description,
+					block: n,
+					controls: [/* @__PURE__ */ f(_, { children: i }, e)]
+				});
+			}
+			m = [];
+		};
+		for (let [d, g] of Object.entries(s)) {
+			if (!("kind" in g)) {
+				let e = g.name !== "", t = c(g.children, e);
+				if (t.length === 0) continue;
+				h(), u.push(/* @__PURE__ */ p("div", {
+					className: e && l ? k.objectGroup : void 0,
+					children: [e && /* @__PURE__ */ f("h5", {
+						className: k.sectionTitle,
+						children: g.name
+					}), t]
+				}, `group:${d}`));
+				continue;
+			}
+			let s = `${n.path}.${d}`, _ = {
+				path: s,
+				pref: g,
+				value: o?.[d],
+				mixed: n.mixed,
+				unset: !n.mixed && o?.[d] === void 0,
+				siblings: o,
+				valueAt: n.valueAt,
+				setValue: (e) => {
+					let t = o ?? a.fromScalar?.(n.value) ?? (typeof a.default == "object" && a.default !== null ? { ...a.default } : {});
+					if (e === void 0) {
+						let { [d]: e, ...r } = t;
+						n.setValue(r);
+						return;
+					}
+					n.setValue({
+						...t,
+						[d]: e
+					});
+				}
+			};
+			m.push({
+				key: s,
+				leaf: g,
+				ctx: _,
+				ariaLabel: g.name,
+				render: () => {
+					let n = r?.[s] ?? r?.[g.kind], a = n ? n(_) : I(_, g.name, r, i, !0);
+					return a == null ? null : (g.pair !== void 0 || g.block === !0) && g.icon && g.icon in e ? /* @__PURE__ */ p("span", {
+						className: k.namedField,
+						children: [/* @__PURE__ */ f(t, {
+							name: g.icon,
+							size: 14
+						}), a]
+					}) : a;
+				}
+			});
+		}
+		return h(), u.map((e) => typeof e == "object" && e && "controls" in e ? e.block ? /* @__PURE__ */ f("div", {
+			className: `${k.rowControls} ${k.blockRow}`,
+			title: e.title,
+			children: e.controls
+		}, e.key) : /* @__PURE__ */ p("div", {
+			className: k.row,
+			children: [/* @__PURE__ */ f("span", {
+				className: k.rowLabel,
+				title: e.title,
+				children: e.label
+			}), /* @__PURE__ */ f("span", {
+				className: k.rowControls,
+				children: e.controls
+			})]
+		}, e.key) : e);
+	}, l = c(a.children, !s);
+	return l.length === 0 ? null : /* @__PURE__ */ p("div", {
+		className: k.objectLeaf,
+		children: [!s && /* @__PURE__ */ f("h4", {
+			className: k.sectionTitle,
+			children: a.name
+		}), l]
+	});
+}
+function R({ text: e, placeholder: t, ariaLabel: n, onCommit: r }) {
+	let [i, a] = v(null);
+	return /* @__PURE__ */ f(o, {
+		value: i ?? e ?? "",
+		placeholder: t,
+		"aria-label": n,
+		onChange: a,
+		onBlur: () => {
+			i !== null && i !== e && r(i), a(null);
+		},
+		onKeyDown: (e) => {
+			e.key === "Enter" && e.target.blur();
+		}
+	});
+}
+//#endregion
+export { w as a, E as c, b as i, m as n, O as o, D as r, T as s, j as t };
+
+//# sourceMappingURL=SelectionPanel-Cl18SdD6.js.map