@weasel-js/ui 1.5.0 → 1.5.1

package/dist/chunks/Properties-B3KU69NI.js

@@ -0,0 +1,874 @@
+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 { 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 { 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"
+};
+//#endregion
+//#region src/components/Properties/CurveField.tsx
+function S({ values: t, min: n, max: r, step: i, width: a, height: o = 110, defaults: s, onChange: c, marks: l }) {
+	let d = _(() => {
+		let e = [];
+		for (let n = 0; n + 1 < t.length; n += 2) e.push({
+			x: t[n],
+			y: t[n + 1]
+		});
+		return e;
+	}, [t]), h = m((t) => {
+		let a = Array(t.length * 2);
+		for (let e = 0; e < t.length; e++) {
+			let o = Math.round(t[e].y / i) * i, s = Math.max(n, Math.min(r, o));
+			a[e * 2] = t[e].x, a[e * 2 + 1] = s;
+		}
+		e("curve-field", "handleChange", {
+			nLen: t.length,
+			flatLen: a.length,
+			sample: a.slice(0, 4)
+		}), c(a);
+	}, [
+		c,
+		n,
+		r,
+		i
+	]), g = m(() => {
+		let e = [];
+		for (let n = 0; n + 1 < t.length; n += 2) e.push({
+			x: 1 - t[n],
+			y: t[n + 1]
+		});
+		e.sort((e, t) => e.x - t.x);
+		let n = [];
+		for (let t of e) n.push(t.x, t.y);
+		c(n);
+	}, [t, c]), v = m(() => {
+		let e = (n + r) / 2, i = Array(t.length);
+		for (let n = 0; n + 1 < t.length; n += 2) i[n] = t[n], i[n + 1] = 2 * e - t[n + 1];
+		c(i);
+	}, [
+		t,
+		n,
+		r,
+		c
+	]);
+	return /* @__PURE__ */ p("div", {
+		className: x.field,
+		children: [/* @__PURE__ */ p("div", {
+			className: x.plot,
+			children: [/* @__PURE__ */ f(u, {
+				value: d,
+				onInput: h,
+				domain: "1d",
+				constrain: "function",
+				xRange: [0, 1],
+				yRange: [n, r],
+				width: a,
+				height: o,
+				endpoints: "pinned-x",
+				addPointMode: "click-curve",
+				minPoints: 2,
+				grid: {},
+				history: !1
+			}), l && l.length > 0 && /* @__PURE__ */ f("svg", {
+				className: x.marks,
+				width: a,
+				height: o,
+				viewBox: `0 0 ${a} ${o}`,
+				"aria-hidden": "true",
+				children: l.map((e) => {
+					let t = e.color ?? "#ffcc00";
+					if (e.kind === "band") {
+						let n = Math.max(0, Math.min(1, e.x[0])) * a, r = Math.max(0, Math.min(1, e.x[1])) * a, i = Math.min(n, r), s = Math.abs(r - n);
+						return /* @__PURE__ */ p("g", { children: [
+							/* @__PURE__ */ f("rect", {
+								x: i,
+								y: 0,
+								width: s,
+								height: o,
+								fill: t,
+								fillOpacity: .4
+							}),
+							/* @__PURE__ */ f("line", {
+								x1: i,
+								y1: 0,
+								x2: i,
+								y2: o,
+								stroke: t,
+								strokeOpacity: .85,
+								strokeWidth: 1
+							}),
+							/* @__PURE__ */ f("line", {
+								x1: i + s,
+								y1: 0,
+								x2: i + s,
+								y2: o,
+								stroke: t,
+								strokeOpacity: .85,
+								strokeWidth: 1
+							})
+						] }, `band-${e.x[0]}-${e.x[1]}-${t}`);
+					}
+					let n = Math.max(0, Math.min(1, e.x)) * a;
+					return /* @__PURE__ */ f("line", {
+						x1: n,
+						y1: 0,
+						x2: n,
+						y2: o,
+						stroke: t,
+						strokeWidth: 1
+					}, `mark-${e.x}-${t}`);
+				})
+			})]
+		}), /* @__PURE__ */ p("div", {
+			className: x.actions,
+			children: [
+				/* @__PURE__ */ f("button", {
+					type: "button",
+					className: x.action,
+					onClick: g,
+					children: "Flip horizontally"
+				}),
+				/* @__PURE__ */ f("button", {
+					type: "button",
+					className: x.action,
+					onClick: v,
+					children: "Flip vertically"
+				}),
+				s && /* @__PURE__ */ f("button", {
+					type: "button",
+					className: x.action,
+					onClick: () => c([...s]),
+					children: "Reset"
+				})
+			]
+		})]
+	});
+}
+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 = {
+	tight: C.densityTight,
+	normal: C.densityNormal,
+	roomy: C.densityRoomy
+}, E = {
+	start: C.alignStart,
+	center: C.alignCenter,
+	end: C.alignEnd,
+	baseline: C.alignBaseline
+};
+function D(e, { density: t, align: n }, r) {
+	return [
+		e,
+		t && T[t],
+		n && E[n],
+		r
+	].filter(Boolean).join(" ");
+}
+function O({ title: e, children: t, className: n, density: r, align: i }) {
+	return /* @__PURE__ */ p("div", {
+		className: D(C.panel, {
+			density: r,
+			align: i
+		}, n),
+		children: [e != null && /* @__PURE__ */ f("h2", {
+			className: C.panelTitle,
+			children: e
+		}), t]
+	});
+}
+function k({ 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}` : ""}`, {
+			density: r,
+			align: i
+		}, t),
+		children: e
+	});
+}
+function A({ 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([
+		C.row,
+		_,
+		b,
+		a && C.span,
+		m && C.rowAuto
+	].filter(Boolean).join(" "), {
+		density: u,
+		align: d
+	}, l), S = /* @__PURE__ */ p("span", {
+		className: C.rowLabel,
+		children: [
+			e,
+			n ? /* @__PURE__ */ f(M, {
+				label: e,
+				description: n
+			}) : null,
+			h ? /* @__PURE__ */ f(w, {
+				auto: m ?? !1,
+				label: e,
+				onChange: h
+			}) : null,
+			t != null && /* @__PURE__ */ f("em", {
+				className: C.readout,
+				children: t
+			})
+		]
+	});
+	return c ? /* @__PURE__ */ p("div", {
+		className: x,
+		"data-auto-path": g,
+		children: [S, o]
+	}) : /* @__PURE__ */ p("label", {
+		className: x,
+		htmlFor: s,
+		"data-auto-path": g,
+		children: [S, o]
+	});
+}
+function M({ 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",
+		className: C.help,
+		"aria-label": `About ${i}`,
+		onClick: (e) => {
+			e.preventDefault(), e.stopPropagation();
+		},
+		onMouseDown: (e) => e.stopPropagation(),
+		children: "ⓘ"
+	}) }), /* @__PURE__ */ f(n, { children: r })] });
+}
+function N(e) {
+	return typeof e == "string" ? e : void 0;
+}
+function P(e) {
+	let t = v(null), n = v(e);
+	return h(() => {
+		n.current = e;
+	}), h(() => {
+		let e = t.current;
+		if (!e) return;
+		let r = () => n.current?.(e.value);
+		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, {
+		useGrouping: !1,
+		minimumFractionDigits: w,
+		maximumFractionDigits: w
+	}));
+	return /* @__PURE__ */ f(j, {
+		span: v,
+		label: t,
+		readout: p ?? /* @__PURE__ */ f(I, {
+			name: N(t),
+			value: n,
+			min: r,
+			max: i,
+			format: O,
+			unit: h,
+			onCommit: (e) => {
+				T(e), E?.(e);
+			}
+		}),
+		layout: g,
+		description: _,
+		density: y,
+		align: b,
+		auto: x,
+		onAutoChange: S,
+		"data-auto-path": C,
+		children: /* @__PURE__ */ f("input", {
+			ref: D,
+			type: "range",
+			"aria-label": N(t),
+			className: s.range,
+			tabIndex: -1,
+			min: r,
+			max: i,
+			step: c,
+			value: n,
+			onChange: (n) => {
+				let r = Number(n.target.value);
+				e("property-panel", "slider", {
+					label: t,
+					value: r
+				}), T(r);
+			}
+		})
+	});
+}
+function I({ 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
+	}), m = (e) => {
+		let t = d(e);
+		return typeof t == "string" ? t : String(t);
+	}, h = l === null ? m(t) : l, g = { "--wzl-property-readout-fit": `${Math.max(m(n).length, m(r).length)}ch` }, _ = s == null ? null : typeof s == "string" ? /* @__PURE__ */ f("span", {
+		className: C.readoutUnit,
+		children: s
+	}) : s, v = () => {
+		if (l !== null) {
+			let e = i(l);
+			Number.isFinite(e) && c(Math.min(r, Math.max(n, e)));
+		}
+		u(null);
+	};
+	return /* @__PURE__ */ p("span", {
+		className: C.readoutGroup,
+		children: [/* @__PURE__ */ f("input", {
+			type: "text",
+			"aria-label": e,
+			inputMode: "decimal",
+			className: C.readoutInput,
+			style: g,
+			value: h,
+			onFocus: (e) => {
+				let n = d(t);
+				u(typeof n == "string" ? n : String(n)), e.currentTarget.select();
+			},
+			onChange: (e) => u(e.target.value.replace(/-/g, "−")),
+			onBlur: v,
+			onClick: (e) => {
+				e.preventDefault(), e.stopPropagation(), e.currentTarget.focus();
+			},
+			onMouseDown: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.key === "Enter" ? (v(), e.currentTarget.blur()) : e.key === "Escape" && (u(null), e.currentTarget.blur());
+			}
+		}), _]
+	});
+}
+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();
+	return /* @__PURE__ */ p(j, {
+		span: m,
+		label: e,
+		readout: t,
+		variant: "color",
+		layout: u,
+		description: d,
+		density: h,
+		align: _,
+		auto: v,
+		onAutoChange: y,
+		"data-auto-path": b,
+		htmlFor: D,
+		children: [/* @__PURE__ */ f("input", {
+			ref: w,
+			id: D,
+			type: "color",
+			"aria-label": N(e),
+			value: n,
+			onChange: (e) => S(e.target.value)
+		}), x && /* @__PURE__ */ f("input", {
+			ref: E,
+			type: "range",
+			"aria-label": typeof e == "string" ? `${e} opacity` : void 0,
+			className: `${s.range} ${s.alpha} ${C.alpha}`,
+			min: 0,
+			max: 1,
+			step: .01,
+			value: a,
+			disabled: l,
+			onChange: (e) => T?.(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();
+	return /* @__PURE__ */ f(j, {
+		span: a,
+		label: e,
+		readout: t,
+		variant: "checkbox",
+		layout: i,
+		description: o,
+		density: s,
+		align: c,
+		auto: l,
+		onAutoChange: u,
+		"data-auto-path": d,
+		htmlFor: p,
+		children: /* @__PURE__ */ f("input", {
+			id: p,
+			type: "checkbox",
+			"aria-label": N(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 }) {
+	return /* @__PURE__ */ f(j, {
+		group: !0,
+		span: a,
+		label: e,
+		readout: t,
+		variant: "checkbox",
+		layout: i,
+		description: o,
+		density: s,
+		align: c,
+		auto: u,
+		onAutoChange: d,
+		"data-auto-path": p,
+		children: /* @__PURE__ */ f(l, {
+			"aria-label": N(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();
+	return /* @__PURE__ */ f(j, {
+		span: c,
+		label: e,
+		readout: t,
+		layout: o,
+		description: s,
+		density: l,
+		align: u,
+		auto: d,
+		onAutoChange: p,
+		"data-auto-path": m,
+		htmlFor: h,
+		children: /* @__PURE__ */ f("input", {
+			id: h,
+			type: "text",
+			"aria-label": N(e),
+			value: n ?? "",
+			placeholder: i,
+			maxLength: a,
+			onChange: (e) => r(e.target.value)
+		})
+	});
+}
+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) => {
+		if (e === "") return;
+		let t = Number(e);
+		Number.isFinite(t) && r(t);
+	})), w = g(), T = /* @__PURE__ */ f("input", {
+		ref: S,
+		id: w,
+		type: "number",
+		"aria-label": N(e),
+		value: n ?? "",
+		min: a,
+		max: o,
+		step: s,
+		placeholder: c,
+		onChange: (e) => {
+			let t = e.target.value;
+			if (t === "") return;
+			let n = Number(t);
+			Number.isFinite(n) && x(n);
+		}
+	});
+	return /* @__PURE__ */ f(j, {
+		span: m,
+		label: e,
+		readout: t,
+		layout: u,
+		description: d,
+		density: h,
+		align: _,
+		auto: v,
+		onAutoChange: y,
+		"data-auto-path": b,
+		htmlFor: w,
+		children: l == null ? T : /* @__PURE__ */ p("span", {
+			className: C.fieldUnitGroup,
+			children: [T, 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();
+	return /* @__PURE__ */ f(j, {
+		span: u,
+		label: t,
+		readout: n,
+		layout: s,
+		description: l,
+		density: d,
+		align: p,
+		auto: m,
+		onAutoChange: h,
+		"data-auto-path": _,
+		htmlFor: y,
+		children: /* @__PURE__ */ f(c, {
+			className: C.select,
+			variant: "bare",
+			triggerId: y,
+			"aria-label": N(t),
+			placeholder: o,
+			selectedKey: v ? r : null,
+			options: i,
+			onSelectionChange: (n) => {
+				e("property-panel", "select", {
+					label: t,
+					value: n
+				}), a(n);
+			}
+		})
+	});
+}
+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 }) {
+	return /* @__PURE__ */ f(j, {
+		group: !0,
+		span: s,
+		label: e,
+		readout: t,
+		layout: a,
+		description: o,
+		density: c,
+		align: l,
+		auto: u,
+		onAutoChange: d,
+		"data-auto-path": p,
+		children: /* @__PURE__ */ f("div", {
+			className: C.toggle,
+			role: "group",
+			"aria-label": N(e),
+			children: r.map((e) => {
+				let t = e.value === n;
+				return /* @__PURE__ */ f("button", {
+					type: "button",
+					"aria-pressed": t,
+					"aria-label": N(e.label),
+					className: t ? `${C.toggleButton} ${C.toggleButtonSelected}` : C.toggleButton,
+					onClick: () => i(e.value),
+					children: e.label
+				}, e.value);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/Properties/EffectCard.tsx
+function W({ title: e, children: t, className: n, density: r, align: i }) {
+	return /* @__PURE__ */ p("div", {
+		className: D(C.subpanel, {
+			density: r,
+			align: i
+		}, n),
+		children: [/* @__PURE__ */ p("h4", {
+			className: C.subpanelTitle,
+			children: [/* @__PURE__ */ f("span", { children: e }), /* @__PURE__ */ f("hr", {})]
+		}), 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 }) {
+	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,
+		onClick: a,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), a());
+		}
+	} : {};
+	return /* @__PURE__ */ p("div", {
+		className: x,
+		style: S,
+		draggable: s,
+		onDragStart: u,
+		onDragEnd: d,
+		onDragOver: m,
+		onDragLeave: h,
+		onDrop: g,
+		children: [/* @__PURE__ */ p("div", {
+			className: C.cardHead,
+			...w,
+			children: [
+				r == null ? /* @__PURE__ */ f("span", {
+					className: C.cardHandle,
+					"aria-hidden": "true",
+					title: "Drag to reorder",
+					onMouseDown: c,
+					onMouseUp: l,
+					children: /* @__PURE__ */ f(K, {})
+				}) : /* @__PURE__ */ f("button", {
+					type: "button",
+					className: `${C.cardIndexBadge} ${C.cardHandle}`,
+					title: "Drag to reorder · click to toggle",
+					"aria-label": `Item ${r + 1} — drag to reorder, click to toggle`,
+					onMouseDown: c,
+					onMouseUp: l,
+					onClick: (e) => {
+						e.stopPropagation(), a?.();
+					},
+					children: r + 1
+				}),
+				/* @__PURE__ */ f("span", {
+					className: C.cardTitle,
+					children: e
+				}),
+				t != null && /* @__PURE__ */ f("span", {
+					className: C.cardPrimary,
+					children: t
+				}),
+				o && /* @__PURE__ */ f("button", {
+					type: "button",
+					className: C.cardRemove,
+					onClick: (e) => {
+						e.stopPropagation(), o();
+					},
+					title: "Remove",
+					"aria-label": "Remove",
+					children: "✕"
+				})
+			]
+		}), i && /* @__PURE__ */ f("div", {
+			className: C.cardBody,
+			children: v
+		})]
+	});
+}
+function K() {
+	return /* @__PURE__ */ p("svg", {
+		width: "10",
+		height: "14",
+		viewBox: "0 0 10 14",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ f("circle", {
+				cx: "3",
+				cy: "3",
+				r: "1.3",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ f("circle", {
+				cx: "7",
+				cy: "3",
+				r: "1.3",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ f("circle", {
+				cx: "3",
+				cy: "7",
+				r: "1.3",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ f("circle", {
+				cx: "7",
+				cy: "7",
+				r: "1.3",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ f("circle", {
+				cx: "3",
+				cy: "11",
+				r: "1.3",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ f("circle", {
+				cx: "7",
+				cy: "11",
+				r: "1.3",
+				fill: "currentColor"
+			})
+		]
+	});
+}
+function q({ 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,
+		children: "No items."
+	}) }) : /* @__PURE__ */ f("div", {
+		className: C.cardList,
+		children: e.map((e) => {
+			let r = a.has(e.id), i = s === e.id, d = l === e.id, g = m && m.id === e.id && m.position === "before", _ = m && m.id === e.id && m.position === "after", v = () => o((t) => {
+				let n = new Set(t);
+				return n.has(e.id) ? n.delete(e.id) : n.add(e.id), n;
+			});
+			return /* @__PURE__ */ p("div", {
+				className: C.cardListWrap,
+				children: [
+					g && /* @__PURE__ */ f("div", { className: C.cardDropHint }),
+					t(e, {
+						isExpanded: r,
+						isDragging: i,
+						toggleExpanded: v,
+						cardProps: {
+							expanded: r,
+							dragging: i,
+							draggable: d,
+							onToggleExpanded: v,
+							onPressHandle: () => u(e.id),
+							onReleaseHandle: () => u(null),
+							onDragStart: (t) => {
+								t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", String(e.id)), c(e.id);
+							},
+							onDragEnd: () => {
+								c(null), u(null), h(null);
+							},
+							onDragOver: (t) => {
+								if (s === null || s === e.id) return;
+								t.preventDefault(), t.dataTransfer.dropEffect = "move";
+								let n = t.currentTarget.getBoundingClientRect(), r = t.clientY < n.top + n.height / 2 ? "before" : "after";
+								h({
+									id: e.id,
+									position: r
+								});
+							},
+							onDragLeave: () => {
+								h((t) => t && t.id === e.id ? null : t);
+							},
+							onDrop: (t) => {
+								if (t.preventDefault(), s === null || s === e.id) {
+									h(null);
+									return;
+								}
+								let r = t.currentTarget.getBoundingClientRect(), i = t.clientY < r.top + r.height / 2 ? "before" : "after";
+								n(s, e.id, i), h(null);
+							}
+						}
+					}),
+					_ && /* @__PURE__ */ f("div", { className: C.cardDropHint })
+				]
+			}, String(e.id));
+		})
+	});
+}
+//#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", {
+		className: C.groupTitle,
+		children: [
+			/* @__PURE__ */ f("hr", {}),
+			/* @__PURE__ */ f("span", { children: e }),
+			/* @__PURE__ */ f("hr", {})
+		]
+	});
+	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
+		})]
+	});
+}
+//#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 };
+
+//# sourceMappingURL=Properties-B3KU69NI.js.map