@weasel-js/ui 1.5.2 → 1.6.0

package/dist/chunks/Properties-Rnb6TAbN.js

@@ -1,891 +0,0 @@
-import { t as e } from "./dlog-CMYiRF3Q.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-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_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
-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_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
-}, T = {
-	start: C.alignStart,
-	center: C.alignCenter,
-	end: C.alignEnd,
-	baseline: C.alignBaseline
-};
-function E(e, { density: t, align: n }, r) {
-	return [
-		e,
-		t && w[t],
-		n && T[n],
-		r
-	].filter(Boolean).join(" ");
-}
-function D({ title: e, children: t, className: n, density: r, align: i }) {
-	return /* @__PURE__ */ p("div", {
-		className: E(C.panel, {
-			density: r,
-			align: i
-		}, n),
-		children: [e != null && /* @__PURE__ */ f("h2", {
-			className: C.panelTitle,
-			children: e
-		}), t]
-	});
-}
-function O({ children: e, className: t, pack: n = "auto-color", density: r, align: i }) {
-	return /* @__PURE__ */ f("div", {
-		className: E(`${C.list}${n === "pairs" ? ` ${C.listPairs}` : n === "one-up" ? ` ${C.listOneUp}` : ""}`, {
-			density: r,
-			align: i
-		}, t),
-		children: e
-	});
-}
-function k({ children: e, className: t }) {
-	return /* @__PURE__ */ f("div", {
-		className: t ? `${C.span} ${t}` : C.span,
-		children: e
-	});
-}
-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,
-		g,
-		y,
-		a && C.span,
-		m && C.rowAuto
-	].filter(Boolean).join(" "), {
-		density: u,
-		align: d
-	}, l), x = v === "inline" && t != null, S = /* @__PURE__ */ p("span", {
-		className: C.rowLabel,
-		children: [
-			h ? /* @__PURE__ */ f(M, {
-				auto: m ?? !1,
-				label: e,
-				onChange: h
-			}) : e,
-			n ? /* @__PURE__ */ f(N, {
-				label: e,
-				description: n
-			}) : null,
-			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: b,
-		children: [
-			S,
-			o,
-			w
-		]
-	}) : /* @__PURE__ */ p("label", {
-		className: b,
-		htmlFor: s,
-		children: [
-			S,
-			o,
-			w
-		]
-	});
-}
-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",
-		className: C.help,
-		"aria-label": `About ${i}`,
-		onClick: (e) => {
-			e.preventDefault(), e.stopPropagation();
-		},
-		onMouseDown: (e) => e.stopPropagation(),
-		children: "ⓘ"
-	}) }), /* @__PURE__ */ f(n, { children: r })] });
-}
-function P(e) {
-	return typeof e == "string" ? e : void 0;
-}
-function F(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 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: C,
-		maximumFractionDigits: C
-	}));
-	return /* @__PURE__ */ f(j, {
-		span: v,
-		label: t,
-		readout: L(p) ?? /* @__PURE__ */ f(R, {
-			name: P(t),
-			value: n,
-			min: r,
-			max: i,
-			format: D,
-			unit: h,
-			onCommit: (e) => {
-				w(e), T?.(e);
-			}
-		}),
-		layout: g,
-		description: _,
-		density: y,
-		align: b,
-		auto: x,
-		onAutoChange: S,
-		children: /* @__PURE__ */ f("input", {
-			ref: E,
-			type: "range",
-			"aria-label": P(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
-				}), w(r);
-			}
-		})
-	});
-}
-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
-	}), 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 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,
-		readout: t,
-		variant: "color",
-		layout: u,
-		description: d,
-		density: h,
-		align: _,
-		auto: v,
-		onAutoChange: y,
-		htmlFor: E,
-		children: [/* @__PURE__ */ f("input", {
-			ref: S,
-			id: E,
-			type: "color",
-			"aria-label": P(e),
-			value: n,
-			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}`,
-			min: 0,
-			max: 1,
-			step: .01,
-			value: a,
-			disabled: l,
-			onChange: (e) => w?.(Number(e.target.value))
-		})]
-	});
-}
-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,
-		readout: t,
-		variant: "checkbox",
-		layout: i,
-		description: o,
-		density: s,
-		align: c,
-		auto: l,
-		onAutoChange: u,
-		htmlFor: d,
-		children: /* @__PURE__ */ f("input", {
-			id: d,
-			type: "checkbox",
-			"aria-label": P(e),
-			checked: n === !0,
-			onChange: (e) => r(e.target.checked)
-		})
-	});
-}
-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,
-		label: e,
-		readout: t,
-		variant: "checkbox",
-		layout: i,
-		description: o,
-		density: s,
-		align: c,
-		auto: u,
-		onAutoChange: d,
-		children: /* @__PURE__ */ f(l, {
-			"aria-label": P(e),
-			isSelected: n === !0,
-			onChange: r
-		})
-	});
-}
-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,
-		readout: t,
-		layout: o,
-		description: s,
-		density: l,
-		align: u,
-		auto: d,
-		onAutoChange: p,
-		htmlFor: m,
-		children: /* @__PURE__ */ f("input", {
-			id: m,
-			type: "text",
-			"aria-label": P(e),
-			value: n ?? "",
-			placeholder: i,
-			maxLength: a,
-			onChange: (e) => r(e.target.value)
-		})
-	});
-}
-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);
-	})), S = g(), w = /* @__PURE__ */ f("input", {
-		ref: x,
-		id: S,
-		type: "number",
-		"aria-label": P(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) && b(n);
-		}
-	});
-	return /* @__PURE__ */ f(j, {
-		span: m,
-		label: e,
-		readout: t,
-		layout: u,
-		description: d,
-		density: h,
-		align: _,
-		auto: v,
-		onAutoChange: y,
-		htmlFor: S,
-		children: l == null ? w : /* @__PURE__ */ p("span", {
-			className: C.fieldUnitGroup,
-			children: [w, typeof l == "string" ? /* @__PURE__ */ f("span", {
-				className: C.readoutUnit,
-				children: l
-			}) : l]
-		})
-	});
-}
-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,
-		readout: n,
-		layout: s,
-		description: l,
-		density: d,
-		align: p,
-		auto: m,
-		onAutoChange: h,
-		htmlFor: v,
-		children: /* @__PURE__ */ f(c, {
-			className: C.select,
-			variant: "bare",
-			triggerId: v,
-			"aria-label": P(t),
-			placeholder: o,
-			selectedKey: _ ? r : null,
-			options: i,
-			onSelectionChange: (n) => {
-				e("property-panel", "select", {
-					label: t,
-					value: n
-				}), a(n);
-			}
-		})
-	});
-}
-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,
-		label: e,
-		readout: t,
-		layout: a,
-		description: o,
-		density: c,
-		align: l,
-		auto: u,
-		onAutoChange: d,
-		children: /* @__PURE__ */ f("div", {
-			className: C.toggle,
-			role: "group",
-			"aria-label": P(e),
-			children: r.map((e) => {
-				let t = e.value === n;
-				return /* @__PURE__ */ f("button", {
-					type: "button",
-					"aria-pressed": t,
-					"aria-label": P(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 K({ title: e, children: t, className: n, density: r, align: i }) {
-	return /* @__PURE__ */ p("div", {
-		className: E(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 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,
-		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(J, {})
-				}) : /* @__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 J() {
-	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 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,
-		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 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", {}),
-			/* @__PURE__ */ f("span", { children: e }),
-			/* @__PURE__ */ f("hr", {})
-		]
-	});
-	return /* @__PURE__ */ p("div", {
-		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 { 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-Rnb6TAbN.js.map