@weasel-js/ui 1.5.1 → 1.5.2

package/dist/chunks/{Properties-B3KU69NI.js → Properties-Rnb6TAbN.js}

@@ -1,20 +1,20 @@
 import { t as e } from "./dlog-CMYiRF3Q.js";
-import { n as t, t as n } from "./Tooltip-BHre_vbI.js";
-import { n as r } from "./Disclosure-9UgDzc7Z.js";
-import { a as i, n as a, r as o } from "./number-f6PydOZK.js";
+import { n as t, t as n } from "./Tooltip-C4YBczLq.js";
+import { n as r } from "./Disclosure-CILDfWsU.js";
+import { a as i, n as a, r as o } from "./number-BHz66zQO.js";
 import { t as s } from "./range.module-DSsOIq1R.js";
-import { t as c } from "./Select-BMYVh10x.js";
-import { t as l } from "./Switch-Om3t3ASc.js";
-import { n as u } from "./CurveEditor-BXiMoN9d.js";
+import { t as c } from "./Select-BEope086.js";
+import { t as l } from "./Switch-DH5POG0T.js";
+import { n as u } from "./CurveEditor-DXwSP-iA.js";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 import { useCallback as m, useEffect as h, useId as g, useMemo as _, useRef as v, useState as y } from "react";
 import { Focusable as b } from "react-aria-components";
 var x = {
-	field: "_field_17u88_1",
-	plot: "_plot_17u88_12",
-	marks: "_marks_17u88_17",
-	actions: "_actions_17u88_23",
-	action: "_action_17u88_23"
+	field: "_field_18v33_1",
+	plot: "_plot_18v33_12",
+	marks: "_marks_18v33_17",
+	actions: "_actions_18v33_23",
+	action: "_action_18v33_23"
 };
 //#endregion
 //#region src/components/Properties/CurveField.tsx
@@ -156,105 +156,85 @@ function S({ values: t, min: n, max: r, step: i, width: a, height: o = 110, defa
 	});
 }
 var C = {
-	panel: "_panel_ksp0i_9",
-	list: "_list_ksp0i_3",
-	row: "_row_ksp0i_4",
-	group: "_group_ksp0i_4",
-	subpanel: "_subpanel_ksp0i_3",
-	card: "_card_ksp0i_14",
-	cardList: "_cardList_ksp0i_15",
-	panelTitle: "_panelTitle_ksp0i_42",
-	listPairs: "_listPairs_ksp0i_3",
-	rowColor: "_rowColor_ksp0i_4",
-	span: "_span_ksp0i_79",
-	listOneUp: "_listOneUp_ksp0i_87",
-	densityTight: "_densityTight_ksp0i_98",
-	densityNormal: "_densityNormal_ksp0i_110",
-	densityRoomy: "_densityRoomy_ksp0i_122",
-	alignStart: "_alignStart_ksp0i_144",
-	alignCenter: "_alignCenter_ksp0i_149",
-	alignEnd: "_alignEnd_ksp0i_154",
-	alignBaseline: "_alignBaseline_ksp0i_159",
-	rowLabel: "_rowLabel_ksp0i_186",
-	readout: "_readout_ksp0i_208",
-	help: "_help_ksp0i_220",
-	pin: "_pin_ksp0i_255",
-	pinAuto: "_pinAuto_ksp0i_288",
-	readoutInput: "_readoutInput_ksp0i_309",
-	readoutGroup: "_readoutGroup_ksp0i_352",
-	readoutUnit: "_readoutUnit_ksp0i_358",
-	fieldUnitGroup: "_fieldUnitGroup_ksp0i_365",
-	rowInline: "_rowInline_ksp0i_386",
-	toggle: "_toggle_ksp0i_404",
-	select: "_select_ksp0i_434",
-	alpha: "_alpha_ksp0i_565",
-	rowBlock: "_rowBlock_ksp0i_574",
-	rowCheckbox: "_rowCheckbox_ksp0i_594",
-	toggleButton: "_toggleButton_ksp0i_637",
-	toggleButtonSelected: "_toggleButtonSelected_ksp0i_663",
-	groupTitle: "_groupTitle_ksp0i_682",
-	groupHead: "_groupHead_ksp0i_704",
-	groupBody: "_groupBody_ksp0i_4",
-	groupPairs: "_groupPairs_ksp0i_728",
-	groupOneUp: "_groupOneUp_ksp0i_741",
-	subpanelTitle: "_subpanelTitle_ksp0i_764",
-	cardDragging: "_cardDragging_ksp0i_808",
-	cardExpanded: "_cardExpanded_ksp0i_812",
-	cardAccented: "_cardAccented_ksp0i_816",
-	cardHead: "_cardHead_ksp0i_831",
-	cardHandle: "_cardHandle_ksp0i_852",
-	cardIndexBadge: "_cardIndexBadge_ksp0i_865",
-	cardTitle: "_cardTitle_ksp0i_883",
-	cardPrimary: "_cardPrimary_ksp0i_893",
-	cardRemove: "_cardRemove_ksp0i_908",
-	cardBody: "_cardBody_ksp0i_937",
-	cardListWrap: "_cardListWrap_ksp0i_949",
-	cardDropHint: "_cardDropHint_ksp0i_953",
-	cardListEmpty: "_cardListEmpty_ksp0i_961",
-	rowAuto: "_rowAuto_ksp0i_978"
-};
-//#endregion
-//#region src/components/Properties/PinDot.tsx
-function w({ auto: e, label: t, onChange: n }) {
-	let r = typeof t == "string" ? t : "this setting", i = (t) => {
-		t.preventDefault(), t.stopPropagation(), n(!e);
-	};
-	return /* @__PURE__ */ f("span", {
-		role: "button",
-		tabIndex: 0,
-		className: e ? `${C.pin} ${C.pinAuto}` : C.pin,
-		"aria-pressed": !e,
-		"aria-label": `Pin ${r}`,
-		onClick: i,
-		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && i(e);
-		},
-		onMouseDown: (e) => e.stopPropagation()
-	});
-}
-//#endregion
-//#region src/components/Properties/PropertyPanel.tsx
-var T = {
+	panel: "_panel_f8jk4_9",
+	list: "_list_f8jk4_3",
+	row: "_row_f8jk4_4",
+	group: "_group_f8jk4_4",
+	subpanel: "_subpanel_f8jk4_3",
+	card: "_card_f8jk4_14",
+	cardList: "_cardList_f8jk4_15",
+	panelTitle: "_panelTitle_f8jk4_42",
+	listPairs: "_listPairs_f8jk4_3",
+	rowColor: "_rowColor_f8jk4_4",
+	span: "_span_f8jk4_82",
+	listOneUp: "_listOneUp_f8jk4_90",
+	densityTight: "_densityTight_f8jk4_101",
+	densityNormal: "_densityNormal_f8jk4_113",
+	densityRoomy: "_densityRoomy_f8jk4_125",
+	alignStart: "_alignStart_f8jk4_147",
+	alignCenter: "_alignCenter_f8jk4_152",
+	alignEnd: "_alignEnd_f8jk4_157",
+	alignBaseline: "_alignBaseline_f8jk4_162",
+	rowInline: "_rowInline_f8jk4_192",
+	rowLabel: "_rowLabel_f8jk4_198",
+	rowBlock: "_rowBlock_f8jk4_223",
+	rowCheckbox: "_rowCheckbox_f8jk4_224",
+	readout: "_readout_f8jk4_228",
+	readoutAfter: "_readoutAfter_f8jk4_240",
+	readoutText: "_readoutText_f8jk4_251",
+	help: "_help_f8jk4_268",
+	autoToggle: "_autoToggle_f8jk4_305",
+	readoutInput: "_readoutInput_f8jk4_246",
+	readoutGroup: "_readoutGroup_f8jk4_246",
+	readoutUnit: "_readoutUnit_f8jk4_381",
+	fieldUnitGroup: "_fieldUnitGroup_f8jk4_388",
+	toggle: "_toggle_f8jk4_427",
+	select: "_select_f8jk4_457",
+	alpha: "_alpha_f8jk4_597",
+	toggleButton: "_toggleButton_f8jk4_661",
+	toggleButtonSelected: "_toggleButtonSelected_f8jk4_687",
+	note: "_note_f8jk4_707",
+	groupTitle: "_groupTitle_f8jk4_715",
+	groupHead: "_groupHead_f8jk4_737",
+	groupBody: "_groupBody_f8jk4_4",
+	groupPairs: "_groupPairs_f8jk4_761",
+	groupOneUp: "_groupOneUp_f8jk4_774",
+	subpanelTitle: "_subpanelTitle_f8jk4_797",
+	cardDragging: "_cardDragging_f8jk4_841",
+	cardExpanded: "_cardExpanded_f8jk4_845",
+	cardAccented: "_cardAccented_f8jk4_849",
+	cardHead: "_cardHead_f8jk4_864",
+	cardHandle: "_cardHandle_f8jk4_885",
+	cardIndexBadge: "_cardIndexBadge_f8jk4_898",
+	cardTitle: "_cardTitle_f8jk4_916",
+	cardPrimary: "_cardPrimary_f8jk4_926",
+	cardRemove: "_cardRemove_f8jk4_941",
+	cardBody: "_cardBody_f8jk4_970",
+	cardListWrap: "_cardListWrap_f8jk4_982",
+	cardDropHint: "_cardDropHint_f8jk4_986",
+	cardListEmpty: "_cardListEmpty_f8jk4_994",
+	rowAuto: "_rowAuto_f8jk4_1012"
+}, w = {
 	tight: C.densityTight,
 	normal: C.densityNormal,
 	roomy: C.densityRoomy
-}, E = {
+}, T = {
 	start: C.alignStart,
 	center: C.alignCenter,
 	end: C.alignEnd,
 	baseline: C.alignBaseline
 };
-function D(e, { density: t, align: n }, r) {
+function E(e, { density: t, align: n }, r) {
 	return [
 		e,
-		t && T[t],
-		n && E[n],
+		t && w[t],
+		n && T[n],
 		r
 	].filter(Boolean).join(" ");
 }
-function O({ title: e, children: t, className: n, density: r, align: i }) {
+function D({ title: e, children: t, className: n, density: r, align: i }) {
 	return /* @__PURE__ */ p("div", {
-		className: D(C.panel, {
+		className: E(C.panel, {
 			density: r,
 			align: i
 		}, n),
@@ -264,62 +244,94 @@ function O({ title: e, children: t, className: n, density: r, align: i }) {
 		}), t]
 	});
 }
-function k({ children: e, className: t, pack: n = "auto-color", density: r, align: i }) {
+function O({ children: e, className: t, pack: n = "auto-color", density: r, align: i }) {
 	return /* @__PURE__ */ f("div", {
-		className: D(`${C.list}${n === "pairs" ? ` ${C.listPairs}` : n === "one-up" ? ` ${C.listOneUp}` : ""}`, {
+		className: E(`${C.list}${n === "pairs" ? ` ${C.listPairs}` : n === "one-up" ? ` ${C.listOneUp}` : ""}`, {
 			density: r,
 			align: i
 		}, t),
 		children: e
 	});
 }
-function A({ children: e, className: t }) {
+function k({ children: e, className: t }) {
 	return /* @__PURE__ */ f("div", {
 		className: t ? `${C.span} ${t}` : C.span,
 		children: e
 	});
 }
-function j({ label: e, readout: t, description: n, variant: r = "default", layout: i, span: a, children: o, htmlFor: s, group: c, className: l, density: u, align: d, auto: m, onAutoChange: h, "data-auto-path": g }) {
-	let _ = r === "color" ? C.rowColor : r === "checkbox" ? C.rowCheckbox : "", v = r === "default" ? "block" : "inline", y = i ?? v, b = y === v ? "" : y === "inline" ? C.rowInline : C.rowBlock, x = D([
+function A({ children: e, className: t }) {
+	return /* @__PURE__ */ f("p", {
+		className: t ? `${C.note} ${t}` : C.note,
+		children: e
+	});
+}
+function j({ label: e, readout: t, description: n, variant: r = "default", layout: i, span: a, children: o, htmlFor: s, group: c, className: l, density: u, align: d, auto: m, onAutoChange: h }) {
+	let g = r === "color" ? C.rowColor : r === "checkbox" ? C.rowCheckbox : "", _ = r === "default" ? "block" : "inline", v = i ?? _, y = v === _ ? "" : v === "inline" ? C.rowInline : C.rowBlock, b = E([
 		C.row,
-		_,
-		b,
+		g,
+		y,
 		a && C.span,
 		m && C.rowAuto
 	].filter(Boolean).join(" "), {
 		density: u,
 		align: d
-	}, l), S = /* @__PURE__ */ p("span", {
+	}, l), x = v === "inline" && t != null, S = /* @__PURE__ */ p("span", {
 		className: C.rowLabel,
 		children: [
-			e,
-			n ? /* @__PURE__ */ f(M, {
-				label: e,
-				description: n
-			}) : null,
-			h ? /* @__PURE__ */ f(w, {
+			h ? /* @__PURE__ */ f(M, {
 				auto: m ?? !1,
 				label: e,
 				onChange: h
+			}) : e,
+			n ? /* @__PURE__ */ f(N, {
+				label: e,
+				description: n
 			}) : null,
-			t != null && /* @__PURE__ */ f("em", {
+			t != null && !x && /* @__PURE__ */ f("em", {
 				className: C.readout,
 				children: t
 			})
 		]
-	});
+	}), w = x ? /* @__PURE__ */ f("em", {
+		className: `${C.readout} ${C.readoutAfter}`,
+		children: t
+	}) : null;
 	return c ? /* @__PURE__ */ p("div", {
-		className: x,
-		"data-auto-path": g,
-		children: [S, o]
+		className: b,
+		children: [
+			S,
+			o,
+			w
+		]
 	}) : /* @__PURE__ */ p("label", {
-		className: x,
+		className: b,
 		htmlFor: s,
-		"data-auto-path": g,
-		children: [S, o]
+		children: [
+			S,
+			o,
+			w
+		]
 	});
 }
-function M({ label: e, description: r }) {
+function M({ auto: e, label: t, onChange: n }) {
+	let r = typeof t == "string" ? t : "this setting", i = (t) => {
+		t.preventDefault(), t.stopPropagation(), n(!e);
+	};
+	return /* @__PURE__ */ f("span", {
+		role: "button",
+		tabIndex: 0,
+		className: C.autoToggle,
+		"aria-pressed": !e,
+		"aria-label": `Pin ${r}`,
+		onClick: i,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && i(e);
+		},
+		onMouseDown: (e) => e.stopPropagation(),
+		children: t
+	});
+}
+function N({ label: e, description: r }) {
 	let i = typeof e == "string" ? e : "this setting";
 	return /* @__PURE__ */ p(t, { children: [/* @__PURE__ */ f(b, { children: /* @__PURE__ */ f("button", {
 		type: "button",
@@ -332,10 +344,10 @@ function M({ label: e, description: r }) {
 		children: "ⓘ"
 	}) }), /* @__PURE__ */ f(n, { children: r })] });
 }
-function N(e) {
+function P(e) {
 	return typeof e == "string" ? e : void 0;
 }
-function P(e) {
+function F(e) {
 	let t = v(null), n = v(e);
 	return h(() => {
 		n.current = e;
@@ -346,24 +358,24 @@ function P(e) {
 		return e.addEventListener("change", r), () => e.removeEventListener("change", r);
 	}, []), t;
 }
-function F({ label: t, value: n, min: r, max: i, step: c = 1, onChange: l, onInput: u, format: d, readout: p, notation: m, unit: h, layout: g, description: _, span: v, density: y, align: b, auto: x, onAutoChange: S, "data-auto-path": C }) {
-	let w = c >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(c)))), T = u ?? l, E = u ? l : void 0, D = P(E && ((e) => E(Number(e)))), O = d ?? (m === "compact" ? (e) => a(e, w) : (e) => o(e, {
+function I({ label: t, value: n, min: r, max: i, step: c = 1, onChange: l, onInput: u, format: d, readout: p, notation: m, unit: h, layout: g, description: _, span: v, density: y, align: b, auto: x, onAutoChange: S }) {
+	let C = c >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(c)))), w = u ?? l, T = u ? l : void 0, E = F(T && ((e) => T(Number(e)))), D = d ?? (m === "compact" ? (e) => a(e, C) : (e) => o(e, {
 		useGrouping: !1,
-		minimumFractionDigits: w,
-		maximumFractionDigits: w
+		minimumFractionDigits: C,
+		maximumFractionDigits: C
 	}));
 	return /* @__PURE__ */ f(j, {
 		span: v,
 		label: t,
-		readout: p ?? /* @__PURE__ */ f(I, {
-			name: N(t),
+		readout: L(p) ?? /* @__PURE__ */ f(R, {
+			name: P(t),
 			value: n,
 			min: r,
 			max: i,
-			format: O,
+			format: D,
 			unit: h,
 			onCommit: (e) => {
-				T(e), E?.(e);
+				w(e), T?.(e);
 			}
 		}),
 		layout: g,
@@ -372,11 +384,10 @@ function F({ label: t, value: n, min: r, max: i, step: c = 1, onChange: l, onInp
 		align: b,
 		auto: x,
 		onAutoChange: S,
-		"data-auto-path": C,
 		children: /* @__PURE__ */ f("input", {
-			ref: D,
+			ref: E,
 			type: "range",
-			"aria-label": N(t),
+			"aria-label": P(t),
 			className: s.range,
 			tabIndex: -1,
 			min: r,
@@ -388,12 +399,21 @@ function F({ label: t, value: n, min: r, max: i, step: c = 1, onChange: l, onInp
 				e("property-panel", "slider", {
 					label: t,
 					value: r
-				}), T(r);
+				}), w(r);
 			}
 		})
 	});
 }
-function I({ name: e, value: t, min: n, max: r, format: a, unit: s, onCommit: c }) {
+function L(e) {
+	return typeof e != "string" && typeof e != "number" ? e : /* @__PURE__ */ f("span", {
+		className: C.readoutGroup,
+		children: /* @__PURE__ */ f("span", {
+			className: C.readoutText,
+			children: e
+		})
+	});
+}
+function R({ name: e, value: t, min: n, max: r, format: a, unit: s, onCommit: c }) {
 	let [l, u] = y(null), d = (e) => a ? a(e) : o(e, {
 		useGrouping: !1,
 		maximumFractionDigits: 20
@@ -435,8 +455,8 @@ function I({ name: e, value: t, min: n, max: r, format: a, unit: s, onCommit: c
 		}), _]
 	});
 }
-function L({ label: e, readout: t, value: n, onChange: r, onInput: i, alpha: a, onAlphaChange: o, onAlphaInput: c, alphaDisabled: l, layout: u, description: d, span: m, density: h, align: _, auto: v, onAutoChange: y, "data-auto-path": b }) {
-	let x = a != null, S = i ?? r, w = P(i && ((e) => r(e))), T = c ?? o, E = P(c && o && ((e) => o(Number(e)))), D = g();
+function z({ label: e, readout: t, value: n, onChange: r, onInput: i, alpha: a, onAlphaChange: o, onAlphaInput: c, alphaDisabled: l, layout: u, description: d, span: m, density: h, align: _, auto: v, onAutoChange: y }) {
+	let b = a != null, x = i ?? r, S = F(i && ((e) => r(e))), w = c ?? o, T = F(c && o && ((e) => o(Number(e)))), E = g();
 	return /* @__PURE__ */ p(j, {
 		span: m,
 		label: e,
@@ -448,17 +468,16 @@ function L({ label: e, readout: t, value: n, onChange: r, onInput: i, alpha: a,
 		align: _,
 		auto: v,
 		onAutoChange: y,
-		"data-auto-path": b,
-		htmlFor: D,
+		htmlFor: E,
 		children: [/* @__PURE__ */ f("input", {
-			ref: w,
-			id: D,
+			ref: S,
+			id: E,
 			type: "color",
-			"aria-label": N(e),
+			"aria-label": P(e),
 			value: n,
-			onChange: (e) => S(e.target.value)
-		}), x && /* @__PURE__ */ f("input", {
-			ref: E,
+			onChange: (e) => x(e.target.value)
+		}), b && /* @__PURE__ */ f("input", {
+			ref: T,
 			type: "range",
 			"aria-label": typeof e == "string" ? `${e} opacity` : void 0,
 			className: `${s.range} ${s.alpha} ${C.alpha}`,
@@ -467,12 +486,12 @@ function L({ label: e, readout: t, value: n, onChange: r, onInput: i, alpha: a,
 			step: .01,
 			value: a,
 			disabled: l,
-			onChange: (e) => T?.(Number(e.target.value))
+			onChange: (e) => w?.(Number(e.target.value))
 		})]
 	});
 }
-function R({ label: e, readout: t, value: n, onChange: r, layout: i, span: a, description: o, density: s, align: c, auto: l, onAutoChange: u, "data-auto-path": d }) {
-	let p = g();
+function B({ label: e, readout: t, value: n, onChange: r, layout: i, span: a, description: o, density: s, align: c, auto: l, onAutoChange: u }) {
+	let d = g();
 	return /* @__PURE__ */ f(j, {
 		span: a,
 		label: e,
@@ -484,18 +503,17 @@ function R({ label: e, readout: t, value: n, onChange: r, layout: i, span: a, de
 		align: c,
 		auto: l,
 		onAutoChange: u,
-		"data-auto-path": d,
-		htmlFor: p,
+		htmlFor: d,
 		children: /* @__PURE__ */ f("input", {
-			id: p,
+			id: d,
 			type: "checkbox",
-			"aria-label": N(e),
+			"aria-label": P(e),
 			checked: n === !0,
 			onChange: (e) => r(e.target.checked)
 		})
 	});
 }
-function z({ label: e, readout: t, value: n, onChange: r, layout: i, span: a, description: o, density: s, align: c, auto: u, onAutoChange: d, "data-auto-path": p }) {
+function V({ label: e, readout: t, value: n, onChange: r, layout: i, span: a, description: o, density: s, align: c, auto: u, onAutoChange: d }) {
 	return /* @__PURE__ */ f(j, {
 		group: !0,
 		span: a,
@@ -508,16 +526,15 @@ function z({ label: e, readout: t, value: n, onChange: r, layout: i, span: a, de
 		align: c,
 		auto: u,
 		onAutoChange: d,
-		"data-auto-path": p,
 		children: /* @__PURE__ */ f(l, {
-			"aria-label": N(e),
+			"aria-label": P(e),
 			isSelected: n === !0,
 			onChange: r
 		})
 	});
 }
-function B({ label: e, readout: t, value: n, onChange: r, placeholder: i, maxLength: a, layout: o, description: s, span: c, density: l, align: u, auto: d, onAutoChange: p, "data-auto-path": m }) {
-	let h = g();
+function H({ label: e, readout: t, value: n, onChange: r, placeholder: i, maxLength: a, layout: o, description: s, span: c, density: l, align: u, auto: d, onAutoChange: p }) {
+	let m = g();
 	return /* @__PURE__ */ f(j, {
 		span: c,
 		label: e,
@@ -528,12 +545,11 @@ function B({ label: e, readout: t, value: n, onChange: r, placeholder: i, maxLen
 		align: u,
 		auto: d,
 		onAutoChange: p,
-		"data-auto-path": m,
-		htmlFor: h,
+		htmlFor: m,
 		children: /* @__PURE__ */ f("input", {
-			id: h,
+			id: m,
 			type: "text",
-			"aria-label": N(e),
+			"aria-label": P(e),
 			value: n ?? "",
 			placeholder: i,
 			maxLength: a,
@@ -541,16 +557,16 @@ function B({ label: e, readout: t, value: n, onChange: r, placeholder: i, maxLen
 		})
 	});
 }
-function V({ label: e, readout: t, value: n, onChange: r, onInput: i, min: a, max: o, step: s, placeholder: c, unit: l, layout: u, description: d, span: m, density: h, align: _, auto: v, onAutoChange: y, "data-auto-path": b }) {
-	let x = i ?? r, S = P(i && ((e) => {
+function U({ label: e, readout: t, value: n, onChange: r, onInput: i, min: a, max: o, step: s, placeholder: c, unit: l, layout: u, description: d, span: m, density: h, align: _, auto: v, onAutoChange: y }) {
+	let b = i ?? r, x = F(i && ((e) => {
 		if (e === "") return;
 		let t = Number(e);
 		Number.isFinite(t) && r(t);
-	})), w = g(), T = /* @__PURE__ */ f("input", {
-		ref: S,
-		id: w,
+	})), S = g(), w = /* @__PURE__ */ f("input", {
+		ref: x,
+		id: S,
 		type: "number",
-		"aria-label": N(e),
+		"aria-label": P(e),
 		value: n ?? "",
 		min: a,
 		max: o,
@@ -560,7 +576,7 @@ function V({ label: e, readout: t, value: n, onChange: r, onInput: i, min: a, ma
 			let t = e.target.value;
 			if (t === "") return;
 			let n = Number(t);
-			Number.isFinite(n) && x(n);
+			Number.isFinite(n) && b(n);
 		}
 	});
 	return /* @__PURE__ */ f(j, {
@@ -573,19 +589,18 @@ function V({ label: e, readout: t, value: n, onChange: r, onInput: i, min: a, ma
 		align: _,
 		auto: v,
 		onAutoChange: y,
-		"data-auto-path": b,
-		htmlFor: w,
-		children: l == null ? T : /* @__PURE__ */ p("span", {
+		htmlFor: S,
+		children: l == null ? w : /* @__PURE__ */ p("span", {
 			className: C.fieldUnitGroup,
-			children: [T, typeof l == "string" ? /* @__PURE__ */ f("span", {
+			children: [w, typeof l == "string" ? /* @__PURE__ */ f("span", {
 				className: C.readoutUnit,
 				children: l
 			}) : l]
 		})
 	});
 }
-function H({ label: t, readout: n, value: r, options: i, onChange: a, placeholder: o = "Choose option…", layout: s, description: l, span: u, density: d, align: p, auto: m, onAutoChange: h, "data-auto-path": _ }) {
-	let v = i.some((e) => e.value === r), y = g();
+function W({ label: t, readout: n, value: r, options: i, onChange: a, placeholder: o = "Choose option…", layout: s, description: l, span: u, density: d, align: p, auto: m, onAutoChange: h }) {
+	let _ = i.some((e) => e.value === r), v = g();
 	return /* @__PURE__ */ f(j, {
 		span: u,
 		label: t,
@@ -596,15 +611,14 @@ function H({ label: t, readout: n, value: r, options: i, onChange: a, placeholde
 		align: p,
 		auto: m,
 		onAutoChange: h,
-		"data-auto-path": _,
-		htmlFor: y,
+		htmlFor: v,
 		children: /* @__PURE__ */ f(c, {
 			className: C.select,
 			variant: "bare",
-			triggerId: y,
-			"aria-label": N(t),
+			triggerId: v,
+			"aria-label": P(t),
 			placeholder: o,
-			selectedKey: v ? r : null,
+			selectedKey: _ ? r : null,
 			options: i,
 			onSelectionChange: (n) => {
 				e("property-panel", "select", {
@@ -615,7 +629,7 @@ function H({ label: t, readout: n, value: r, options: i, onChange: a, placeholde
 		})
 	});
 }
-function U({ label: e, readout: t, value: n, options: r, onChange: i, layout: a, description: o, span: s, density: c, align: l, auto: u, onAutoChange: d, "data-auto-path": p }) {
+function G({ label: e, readout: t, value: n, options: r, onChange: i, layout: a, description: o, span: s, density: c, align: l, auto: u, onAutoChange: d }) {
 	return /* @__PURE__ */ f(j, {
 		group: !0,
 		span: s,
@@ -627,17 +641,16 @@ function U({ label: e, readout: t, value: n, options: r, onChange: i, layout: a,
 		align: l,
 		auto: u,
 		onAutoChange: d,
-		"data-auto-path": p,
 		children: /* @__PURE__ */ f("div", {
 			className: C.toggle,
 			role: "group",
-			"aria-label": N(e),
+			"aria-label": P(e),
 			children: r.map((e) => {
 				let t = e.value === n;
 				return /* @__PURE__ */ f("button", {
 					type: "button",
 					"aria-pressed": t,
-					"aria-label": N(e.label),
+					"aria-label": P(e.label),
 					className: t ? `${C.toggleButton} ${C.toggleButtonSelected}` : C.toggleButton,
 					onClick: () => i(e.value),
 					children: e.label
@@ -648,9 +661,9 @@ function U({ label: e, readout: t, value: n, options: r, onChange: i, layout: a,
 }
 //#endregion
 //#region src/components/Properties/EffectCard.tsx
-function W({ title: e, children: t, className: n, density: r, align: i }) {
+function K({ title: e, children: t, className: n, density: r, align: i }) {
 	return /* @__PURE__ */ p("div", {
-		className: D(C.subpanel, {
+		className: E(C.subpanel, {
 			density: r,
 			align: i
 		}, n),
@@ -660,7 +673,7 @@ function W({ title: e, children: t, className: n, density: r, align: i }) {
 		}), t]
 	});
 }
-function G({ title: e, primary: t, accent: n, index: r, expanded: i = !0, onToggleExpanded: a, onRemove: o, draggable: s, onPressHandle: c, onReleaseHandle: l, onDragStart: u, onDragEnd: d, onDragOver: m, onDragLeave: h, onDrop: g, dragging: _, children: v, className: y }) {
+function q({ title: e, primary: t, accent: n, index: r, expanded: i = !0, onToggleExpanded: a, onRemove: o, draggable: s, onPressHandle: c, onReleaseHandle: l, onDragStart: u, onDragEnd: d, onDragOver: m, onDragLeave: h, onDrop: g, dragging: _, children: v, className: y }) {
 	let b = `${i ? ` ${C.cardExpanded}` : ""}${_ ? ` ${C.cardDragging}` : ""}${n ? ` ${C.cardAccented}` : ""}`, x = `${C.card}${b}${y ? ` ${y}` : ""}`, S = n ? { "--wzl-effect-card-accent": n } : void 0, w = a ? {
 		role: "button",
 		tabIndex: 0,
@@ -688,7 +701,7 @@ function G({ title: e, primary: t, accent: n, index: r, expanded: i = !0, onTogg
 					title: "Drag to reorder",
 					onMouseDown: c,
 					onMouseUp: l,
-					children: /* @__PURE__ */ f(K, {})
+					children: /* @__PURE__ */ f(J, {})
 				}) : /* @__PURE__ */ f("button", {
 					type: "button",
 					className: `${C.cardIndexBadge} ${C.cardHandle}`,
@@ -726,7 +739,7 @@ function G({ title: e, primary: t, accent: n, index: r, expanded: i = !0, onTogg
 		})]
 	});
 }
-function K() {
+function J() {
 	return /* @__PURE__ */ p("svg", {
 		width: "10",
 		height: "14",
@@ -772,7 +785,7 @@ function K() {
 		]
 	});
 }
-function q({ items: e, renderItem: t, onReorder: n, empty: r, defaultExpandedIds: i }) {
+function Y({ items: e, renderItem: t, onReorder: n, empty: r, defaultExpandedIds: i }) {
 	let [a, o] = y(() => new Set(i ?? [])), [s, c] = y(null), [l, u] = y(null), [m, h] = y(null);
 	return e.length === 0 ? /* @__PURE__ */ f(d, { children: r ?? /* @__PURE__ */ f("div", {
 		className: C.cardListEmpty,
@@ -835,15 +848,15 @@ function q({ items: e, renderItem: t, onReorder: n, empty: r, defaultExpandedIds
 }
 //#endregion
 //#region src/components/Properties/PropertyGroup.tsx
-function J({ title: e, hidden: t, collapsible: n, defaultCollapsed: i, collapsed: a, onCollapsedChange: o, children: s, className: c, pack: l = "auto-color", density: u, align: d }) {
-	let m = g(), [h, _] = y(i ?? !1);
-	if (t) return null;
-	let v = n ?? (i !== void 0 || a !== void 0 || o !== void 0), b = v && (a ?? h), x = () => {
-		a === void 0 && _(!b), o?.(!b);
-	}, S = D(`${C.group}${l === "pairs" ? ` ${C.groupPairs}` : l === "one-up" ? ` ${C.groupOneUp}` : ""}`, {
-		density: u,
-		align: d
-	}, c), w = /* @__PURE__ */ p("h3", {
+function X({ title: e, description: t, hidden: n, collapsible: i, defaultCollapsed: a, collapsed: o, onCollapsedChange: s, children: c, className: l, span: u, pack: d = "auto-color", density: m, align: h }) {
+	let _ = g(), [v, b] = y(a ?? !1);
+	if (n) return null;
+	let x = i ?? (a !== void 0 || o !== void 0 || s !== void 0), S = x && (o ?? v), w = () => {
+		o === void 0 && b(!S), s?.(!S);
+	}, T = `${C.group}${d === "pairs" ? ` ${C.groupPairs}` : d === "one-up" ? ` ${C.groupOneUp}` : ""}`, D = E(u ? `${T} ${C.span}` : T, {
+		density: m,
+		align: h
+	}, l), O = /* @__PURE__ */ p("h3", {
 		className: C.groupTitle,
 		children: [
 			/* @__PURE__ */ f("hr", {}),
@@ -852,23 +865,27 @@ function J({ title: e, hidden: t, collapsible: n, defaultCollapsed: i, collapsed
 		]
 	});
 	return /* @__PURE__ */ p("div", {
-		className: S,
-		children: [v ? /* @__PURE__ */ f(r, {
-			className: C.groupHead,
-			open: !b,
-			onToggle: x,
-			label: typeof e == "string" ? e : "this section",
-			controls: m,
-			children: w
-		}) : w, /* @__PURE__ */ f("div", {
-			id: m,
-			className: C.groupBody,
-			hidden: b,
-			children: s
-		})]
+		className: D,
+		children: [
+			x ? /* @__PURE__ */ f(r, {
+				className: C.groupHead,
+				open: !S,
+				onToggle: w,
+				label: typeof e == "string" ? e : "this section",
+				controls: _,
+				children: O
+			}) : O,
+			t !== void 0 && t !== "" && /* @__PURE__ */ f(A, { children: t }),
+			/* @__PURE__ */ f("div", {
+				id: _,
+				className: C.groupBody,
+				hidden: S,
+				children: c
+			})
+		]
 	});
 }
 //#endregion
-export { w as _, R as a, k as c, A as d, H as f, U as g, B as h, W as i, O as l, z as m, G as n, L as o, F as p, q as r, V as s, J as t, j as u, S as v };
+export { G as _, B as a, O as c, j as d, k as f, H as g, V as h, K as i, A as l, I as m, q as n, z as o, W as p, Y as r, U as s, X as t, D as u, S as v };
 
-//# sourceMappingURL=Properties-B3KU69NI.js.map
+//# sourceMappingURL=Properties-Rnb6TAbN.js.map