@weasel-js/ui 1.4.0-pre.1 → 1.4.0

package/dist/chunks/Properties-BEGlt0Z2.js

@@ -0,0 +1,662 @@
+import { t as e } from "./dlog-CMYiRF3Q.js";
+import { n as t, t as n } from "./Tooltip-Bq8Hvj4r.js";
+import { i as r, n as i } from "./number-D3TDawLC.js";
+import { t as a } from "./range.module-CttzfN6a.js";
+import { n as o } from "./CurveEditor-Cpuvl_iN.js";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as u, useMemo as d, useState as f } from "react";
+import { Focusable as p } from "react-aria-components";
+var m = {
+	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 h({ values: t, min: n, max: r, step: i, width: a, height: s = 110, defaults: f, onChange: p, marks: h }) {
+	let g = 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]), _ = u((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)
+		}), p(a);
+	}, [
+		p,
+		n,
+		r,
+		i
+	]), v = u(() => {
+		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);
+		p(n);
+	}, [t, p]), y = u(() => {
+		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];
+		p(i);
+	}, [
+		t,
+		n,
+		r,
+		p
+	]);
+	return /* @__PURE__ */ l("div", {
+		className: m.field,
+		children: [/* @__PURE__ */ l("div", {
+			className: m.plot,
+			children: [/* @__PURE__ */ c(o, {
+				value: g,
+				onInput: _,
+				domain: "1d",
+				constrain: "function",
+				xRange: [0, 1],
+				yRange: [n, r],
+				width: a,
+				height: s,
+				endpoints: "pinned-x",
+				addPointMode: "click-curve",
+				minPoints: 2,
+				grid: {},
+				history: !1
+			}), h && h.length > 0 && /* @__PURE__ */ c("svg", {
+				className: m.marks,
+				width: a,
+				height: s,
+				viewBox: `0 0 ${a} ${s}`,
+				"aria-hidden": "true",
+				children: h.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), o = Math.abs(r - n);
+						return /* @__PURE__ */ l("g", { children: [
+							/* @__PURE__ */ c("rect", {
+								x: i,
+								y: 0,
+								width: o,
+								height: s,
+								fill: t,
+								fillOpacity: .4
+							}),
+							/* @__PURE__ */ c("line", {
+								x1: i,
+								y1: 0,
+								x2: i,
+								y2: s,
+								stroke: t,
+								strokeOpacity: .85,
+								strokeWidth: 1
+							}),
+							/* @__PURE__ */ c("line", {
+								x1: i + o,
+								y1: 0,
+								x2: i + o,
+								y2: s,
+								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__ */ c("line", {
+						x1: n,
+						y1: 0,
+						x2: n,
+						y2: s,
+						stroke: t,
+						strokeWidth: 1
+					}, `mark-${e.x}-${t}`);
+				})
+			})]
+		}), /* @__PURE__ */ l("div", {
+			className: m.actions,
+			children: [
+				/* @__PURE__ */ c("button", {
+					type: "button",
+					className: m.action,
+					onClick: v,
+					children: "Flip horizontally"
+				}),
+				/* @__PURE__ */ c("button", {
+					type: "button",
+					className: m.action,
+					onClick: y,
+					children: "Flip vertically"
+				}),
+				f && /* @__PURE__ */ c("button", {
+					type: "button",
+					className: m.action,
+					onClick: () => p([...f]),
+					children: "Reset"
+				})
+			]
+		})]
+	});
+}
+var g = {
+	panel: "_panel_vxnqc_9",
+	list: "_list_vxnqc_3",
+	row: "_row_vxnqc_4",
+	group: "_group_vxnqc_4",
+	subpanel: "_subpanel_vxnqc_3",
+	card: "_card_vxnqc_14",
+	cardList: "_cardList_vxnqc_15",
+	panelTitle: "_panelTitle_vxnqc_35",
+	listPairs: "_listPairs_vxnqc_3",
+	rowColor: "_rowColor_vxnqc_4",
+	span: "_span_vxnqc_71",
+	rowLabel: "_rowLabel_vxnqc_99",
+	readout: "_readout_vxnqc_121",
+	help: "_help_vxnqc_133",
+	readoutInput: "_readoutInput_vxnqc_165",
+	readoutGroup: "_readoutGroup_vxnqc_203",
+	readoutUnit: "_readoutUnit_vxnqc_209",
+	fieldUnitGroup: "_fieldUnitGroup_vxnqc_216",
+	rowInline: "_rowInline_vxnqc_237",
+	toggle: "_toggle_vxnqc_255",
+	alpha: "_alpha_vxnqc_380",
+	rowCheckbox: "_rowCheckbox_vxnqc_389",
+	toggleButton: "_toggleButton_vxnqc_421",
+	toggleButtonSelected: "_toggleButtonSelected_vxnqc_447",
+	groupTitle: "_groupTitle_vxnqc_466",
+	groupBody: "_groupBody_vxnqc_4",
+	groupPairs: "_groupPairs_vxnqc_497",
+	subpanelTitle: "_subpanelTitle_vxnqc_529",
+	cardDragging: "_cardDragging_vxnqc_573",
+	cardExpanded: "_cardExpanded_vxnqc_577",
+	cardAccented: "_cardAccented_vxnqc_581",
+	cardHead: "_cardHead_vxnqc_596",
+	cardHandle: "_cardHandle_vxnqc_617",
+	cardIndexBadge: "_cardIndexBadge_vxnqc_630",
+	cardTitle: "_cardTitle_vxnqc_648",
+	cardPrimary: "_cardPrimary_vxnqc_658",
+	cardRemove: "_cardRemove_vxnqc_673",
+	cardBody: "_cardBody_vxnqc_702",
+	cardListWrap: "_cardListWrap_vxnqc_714",
+	cardDropHint: "_cardDropHint_vxnqc_718",
+	cardListEmpty: "_cardListEmpty_vxnqc_726"
+};
+//#endregion
+//#region src/components/Properties/EffectCard.tsx
+function _({ title: e, children: t, className: n }) {
+	return /* @__PURE__ */ l("div", {
+		className: n ? `${g.subpanel} ${n}` : g.subpanel,
+		children: [/* @__PURE__ */ l("h4", {
+			className: g.subpanelTitle,
+			children: [/* @__PURE__ */ c("span", { children: e }), /* @__PURE__ */ c("hr", {})]
+		}), t]
+	});
+}
+function v({ title: e, primary: t, accent: n, index: r, expanded: i = !0, onToggleExpanded: a, onRemove: o, draggable: s, onPressHandle: u, onReleaseHandle: d, onDragStart: f, onDragEnd: p, onDragOver: m, onDragLeave: h, onDrop: _, dragging: v, children: b, className: x }) {
+	let S = `${i ? ` ${g.cardExpanded}` : ""}${v ? ` ${g.cardDragging}` : ""}${n ? ` ${g.cardAccented}` : ""}`, C = `${g.card}${S}${x ? ` ${x}` : ""}`, w = n ? { "--wzl-effect-card-accent": n } : void 0, T = a ? {
+		role: "button",
+		tabIndex: 0,
+		onClick: a,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), a());
+		}
+	} : {};
+	return /* @__PURE__ */ l("div", {
+		className: C,
+		style: w,
+		draggable: s,
+		onDragStart: f,
+		onDragEnd: p,
+		onDragOver: m,
+		onDragLeave: h,
+		onDrop: _,
+		children: [/* @__PURE__ */ l("div", {
+			className: g.cardHead,
+			...T,
+			children: [
+				r == null ? /* @__PURE__ */ c("span", {
+					className: g.cardHandle,
+					"aria-hidden": "true",
+					title: "Drag to reorder",
+					onMouseDown: u,
+					onMouseUp: d,
+					children: /* @__PURE__ */ c(y, {})
+				}) : /* @__PURE__ */ c("button", {
+					type: "button",
+					className: `${g.cardIndexBadge} ${g.cardHandle}`,
+					title: "Drag to reorder · click to toggle",
+					"aria-label": `Item ${r + 1} — drag to reorder, click to toggle`,
+					onMouseDown: u,
+					onMouseUp: d,
+					onClick: (e) => {
+						e.stopPropagation(), a?.();
+					},
+					children: r + 1
+				}),
+				/* @__PURE__ */ c("span", {
+					className: g.cardTitle,
+					children: e
+				}),
+				t != null && /* @__PURE__ */ c("span", {
+					className: g.cardPrimary,
+					children: t
+				}),
+				o && /* @__PURE__ */ c("button", {
+					type: "button",
+					className: g.cardRemove,
+					onClick: (e) => {
+						e.stopPropagation(), o();
+					},
+					title: "Remove",
+					"aria-label": "Remove",
+					children: "✕"
+				})
+			]
+		}), i && /* @__PURE__ */ c("div", {
+			className: g.cardBody,
+			children: b
+		})]
+	});
+}
+function y() {
+	return /* @__PURE__ */ l("svg", {
+		width: "10",
+		height: "14",
+		viewBox: "0 0 10 14",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ c("circle", {
+				cx: "3",
+				cy: "3",
+				r: "1.3",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ c("circle", {
+				cx: "7",
+				cy: "3",
+				r: "1.3",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ c("circle", {
+				cx: "3",
+				cy: "7",
+				r: "1.3",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ c("circle", {
+				cx: "7",
+				cy: "7",
+				r: "1.3",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ c("circle", {
+				cx: "3",
+				cy: "11",
+				r: "1.3",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ c("circle", {
+				cx: "7",
+				cy: "11",
+				r: "1.3",
+				fill: "currentColor"
+			})
+		]
+	});
+}
+function b({ items: e, renderItem: t, onReorder: n, empty: r, defaultExpandedIds: i }) {
+	let [a, o] = f(() => new Set(i ?? [])), [u, d] = f(null), [p, m] = f(null), [h, _] = f(null);
+	return e.length === 0 ? /* @__PURE__ */ c(s, { children: r ?? /* @__PURE__ */ c("div", {
+		className: g.cardListEmpty,
+		children: "No items."
+	}) }) : /* @__PURE__ */ c("div", {
+		className: g.cardList,
+		children: e.map((e) => {
+			let r = a.has(e.id), i = u === e.id, s = p === e.id, f = h && h.id === e.id && h.position === "before", v = h && h.id === e.id && h.position === "after", y = () => o((t) => {
+				let n = new Set(t);
+				return n.has(e.id) ? n.delete(e.id) : n.add(e.id), n;
+			});
+			return /* @__PURE__ */ l("div", {
+				className: g.cardListWrap,
+				children: [
+					f && /* @__PURE__ */ c("div", { className: g.cardDropHint }),
+					t(e, {
+						isExpanded: r,
+						isDragging: i,
+						toggleExpanded: y,
+						cardProps: {
+							expanded: r,
+							dragging: i,
+							draggable: s,
+							onToggleExpanded: y,
+							onPressHandle: () => m(e.id),
+							onReleaseHandle: () => m(null),
+							onDragStart: (t) => {
+								t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", String(e.id)), d(e.id);
+							},
+							onDragEnd: () => {
+								d(null), m(null), _(null);
+							},
+							onDragOver: (t) => {
+								if (u === null || u === e.id) return;
+								t.preventDefault(), t.dataTransfer.dropEffect = "move";
+								let n = t.currentTarget.getBoundingClientRect(), r = t.clientY < n.top + n.height / 2 ? "before" : "after";
+								_({
+									id: e.id,
+									position: r
+								});
+							},
+							onDragLeave: () => {
+								_((t) => t && t.id === e.id ? null : t);
+							},
+							onDrop: (t) => {
+								if (t.preventDefault(), u === null || u === e.id) {
+									_(null);
+									return;
+								}
+								let r = t.currentTarget.getBoundingClientRect(), i = t.clientY < r.top + r.height / 2 ? "before" : "after";
+								n(u, e.id, i), _(null);
+							}
+						}
+					}),
+					v && /* @__PURE__ */ c("div", { className: g.cardDropHint })
+				]
+			}, String(e.id));
+		})
+	});
+}
+//#endregion
+//#region src/components/Properties/PropertyGroup.tsx
+function x({ title: e, hidden: t, children: n, className: r, pack: i = "auto-color" }) {
+	if (t) return null;
+	let a = i === "pairs" ? ` ${g.groupPairs}` : "";
+	return /* @__PURE__ */ l("div", {
+		className: `${g.group}${a}${r ? ` ${r}` : ""}`,
+		children: [/* @__PURE__ */ l("h3", {
+			className: g.groupTitle,
+			children: [
+				/* @__PURE__ */ c("hr", {}),
+				/* @__PURE__ */ c("span", { children: e }),
+				/* @__PURE__ */ c("hr", {})
+			]
+		}), /* @__PURE__ */ c("div", {
+			className: g.groupBody,
+			children: n
+		})]
+	});
+}
+//#endregion
+//#region src/components/Properties/PropertyPanel.tsx
+function S({ title: e, children: t, className: n }) {
+	return /* @__PURE__ */ l("div", {
+		className: n ? `${g.panel} ${n}` : g.panel,
+		children: [e != null && /* @__PURE__ */ c("h2", {
+			className: g.panelTitle,
+			children: e
+		}), t]
+	});
+}
+function C({ children: e, className: t, pack: n = "auto-color" }) {
+	let r = n === "pairs" ? ` ${g.listPairs}` : "";
+	return /* @__PURE__ */ c("div", {
+		className: `${g.list}${r}${t ? ` ${t}` : ""}`,
+		children: e
+	});
+}
+function w({ children: e, className: t }) {
+	return /* @__PURE__ */ c("div", {
+		className: t ? `${g.span} ${t}` : g.span,
+		children: e
+	});
+}
+function T({ label: e, readout: t, description: n, variant: r = "default", layout: i = "block", span: a, children: o, htmlFor: s, className: u }) {
+	let d = r === "color" ? ` ${g.rowColor}` : r === "checkbox" ? ` ${g.rowCheckbox}` : "", f = r === "default" && i === "inline" ? ` ${g.rowInline}` : "", p = a ? ` ${g.span}` : "";
+	return /* @__PURE__ */ l("label", {
+		className: `${g.row}${d}${f}${p}${u ? ` ${u}` : ""}`,
+		htmlFor: s,
+		children: [/* @__PURE__ */ l("span", {
+			className: g.rowLabel,
+			children: [
+				e,
+				n ? /* @__PURE__ */ c(E, {
+					label: e,
+					description: n
+				}) : null,
+				t != null && /* @__PURE__ */ c("em", {
+					className: g.readout,
+					children: t
+				})
+			]
+		}), o]
+	});
+}
+function E({ label: e, description: r }) {
+	let i = typeof e == "string" ? e : "this setting";
+	return /* @__PURE__ */ l(t, { children: [/* @__PURE__ */ c(p, { children: /* @__PURE__ */ c("button", {
+		type: "button",
+		className: g.help,
+		"aria-label": `About ${i}`,
+		onClick: (e) => {
+			e.preventDefault(), e.stopPropagation();
+		},
+		onMouseDown: (e) => e.stopPropagation(),
+		children: "ⓘ"
+	}) }), /* @__PURE__ */ c(n, { children: r })] });
+}
+function D({ label: t, value: n, min: r, max: o, step: s = 1, onChange: l, format: u, unit: d, layout: f, description: p, span: m }) {
+	let h = s >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(s))));
+	return /* @__PURE__ */ c(T, {
+		span: m,
+		label: t,
+		readout: /* @__PURE__ */ c(O, {
+			value: n,
+			min: r,
+			max: o,
+			format: u ?? ((e) => i(e, {
+				useGrouping: !1,
+				minimumFractionDigits: h,
+				maximumFractionDigits: h
+			})),
+			unit: d,
+			onCommit: l
+		}),
+		layout: f,
+		description: p,
+		children: /* @__PURE__ */ c("input", {
+			type: "range",
+			className: a.range,
+			tabIndex: -1,
+			min: r,
+			max: o,
+			step: s,
+			value: n,
+			onChange: (n) => {
+				let r = Number(n.target.value);
+				e("property-panel", "slider", {
+					label: t,
+					value: r
+				}), l(r);
+			}
+		})
+	});
+}
+function O({ value: e, min: t, max: n, format: a, unit: o, onCommit: s }) {
+	let [u, d] = f(null), p = (e) => a ? a(e) : i(e, {
+		useGrouping: !1,
+		maximumFractionDigits: 20
+	}), m = u === null ? (() => {
+		let t = p(e);
+		return typeof t == "string" ? t : String(t);
+	})() : u, h = o == null ? null : typeof o == "string" ? /* @__PURE__ */ c("span", {
+		className: g.readoutUnit,
+		children: o
+	}) : o, _ = () => {
+		if (u !== null) {
+			let e = r(u);
+			Number.isFinite(e) && s(Math.min(n, Math.max(t, e)));
+		}
+		d(null);
+	};
+	return /* @__PURE__ */ l("span", {
+		className: g.readoutGroup,
+		children: [/* @__PURE__ */ c("input", {
+			type: "text",
+			inputMode: "decimal",
+			className: g.readoutInput,
+			value: m,
+			onFocus: (t) => {
+				let n = p(e);
+				d(typeof n == "string" ? n : String(n)), t.currentTarget.select();
+			},
+			onChange: (e) => d(e.target.value.replace(/-/g, "−")),
+			onBlur: _,
+			onClick: (e) => {
+				e.preventDefault(), e.stopPropagation(), e.currentTarget.focus();
+			},
+			onMouseDown: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.key === "Enter" ? (_(), e.currentTarget.blur()) : e.key === "Escape" && (d(null), e.currentTarget.blur());
+			}
+		}), h]
+	});
+}
+function k({ label: e, value: t, onChange: n, alpha: r, onAlphaChange: i, alphaDisabled: o, description: s, span: u }) {
+	return /* @__PURE__ */ l(T, {
+		span: u,
+		label: e,
+		variant: "color",
+		description: s,
+		children: [/* @__PURE__ */ c("input", {
+			type: "color",
+			value: t,
+			onChange: (e) => n(e.target.value)
+		}), r != null && /* @__PURE__ */ c("input", {
+			type: "range",
+			className: `${a.range} ${a.alpha} ${g.alpha}`,
+			min: 0,
+			max: 1,
+			step: .01,
+			value: r,
+			disabled: o,
+			onChange: (e) => i?.(Number(e.target.value))
+		})]
+	});
+}
+function A({ label: e, value: t, onChange: n, span: r, description: i }) {
+	return /* @__PURE__ */ c(T, {
+		span: r,
+		label: e,
+		variant: "checkbox",
+		description: i,
+		children: /* @__PURE__ */ c("input", {
+			type: "checkbox",
+			checked: t,
+			onChange: (e) => n(e.target.checked)
+		})
+	});
+}
+function j({ label: e, value: t, onChange: n, placeholder: r, maxLength: i, layout: a, description: o, span: s }) {
+	return /* @__PURE__ */ c(T, {
+		span: s,
+		label: e,
+		layout: a,
+		description: o,
+		children: /* @__PURE__ */ c("input", {
+			type: "text",
+			value: t,
+			placeholder: r,
+			maxLength: i,
+			onChange: (e) => n(e.target.value)
+		})
+	});
+}
+function M({ label: e, value: t, onChange: n, min: r, max: i, step: a, placeholder: o, unit: s, layout: u, description: d, span: f }) {
+	let p = /* @__PURE__ */ c("input", {
+		type: "number",
+		value: t,
+		min: r,
+		max: i,
+		step: a,
+		placeholder: o,
+		onChange: (e) => {
+			let t = e.target.value;
+			if (t === "") return;
+			let r = Number(t);
+			Number.isFinite(r) && n(r);
+		}
+	});
+	return /* @__PURE__ */ c(T, {
+		span: f,
+		label: e,
+		layout: u,
+		description: d,
+		children: s == null ? p : /* @__PURE__ */ l("span", {
+			className: g.fieldUnitGroup,
+			children: [p, typeof s == "string" ? /* @__PURE__ */ c("span", {
+				className: g.readoutUnit,
+				children: s
+			}) : s]
+		})
+	});
+}
+function N({ label: t, value: n, options: r, onChange: i, layout: a, description: o, span: s }) {
+	return /* @__PURE__ */ c(T, {
+		span: s,
+		label: t,
+		layout: a,
+		description: o,
+		children: /* @__PURE__ */ c("select", {
+			value: n,
+			onChange: (n) => {
+				let r = n.target.value;
+				e("property-panel", "select", {
+					label: t,
+					value: r
+				}), i(r);
+			},
+			children: r.map((e) => /* @__PURE__ */ c("option", {
+				value: e.value,
+				children: e.label
+			}, e.value))
+		})
+	});
+}
+function P({ label: e, value: t, options: n, onChange: r, layout: i, description: a, span: o }) {
+	return /* @__PURE__ */ c(T, {
+		span: o,
+		label: e,
+		layout: i,
+		description: a,
+		children: /* @__PURE__ */ c("div", {
+			className: g.toggle,
+			children: n.map((e) => {
+				let n = e.value === t;
+				return /* @__PURE__ */ c("button", {
+					type: "button",
+					"aria-pressed": n,
+					className: n ? `${g.toggleButton} ${g.toggleButtonSelected}` : g.toggleButton,
+					onClick: () => r(e.value),
+					children: e.label
+				}, e.value);
+			})
+		})
+	});
+}
+//#endregion
+export { S as a, N as c, P as d, x as f, h as g, _ as h, C as i, D as l, b as m, k as n, T as o, v as p, M as r, w as s, A as t, j as u };
+
+//# sourceMappingURL=Properties-BEGlt0Z2.js.map