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

package/dist/chunks/Input-DRUeowbz.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input-DRUeowbz.js","names":[],"sources":["../../src/components/Input/Input.module.css","../../src/components/Input/Input.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.frame {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--wzl-control-h);\n  padding: 0 8px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  line-height: 1;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n  border-color: var(--wzl-danger);\n}\n\n.field[data-disabled] .frame {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.frame input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  padding: 0;\n}\n\n.frame input::placeholder {\n  color: var(--wzl-fg-subtle);\n}\n\n.adornment {\n  display: inline-flex;\n  align-items: center;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n  pointer-events: none;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  TextField,\n  Label,\n  Input as RACInput,\n  Text,\n  FieldError,\n  type TextFieldProps as RACTextFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './Input.module.css';\n\n/** Props for {@link Input}, on top of React Aria's `TextField` props. */\nexport type InputProps = Omit<RACTextFieldProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  leadingAdornment?: ReactNode;\n  trailingAdornment?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single-line text input wrapping React Aria's TextField. Supplies a\n * default skin against the `--wzl-*` token system, and exposes the\n * familiar label / description / errorMessage / adornment slot shape.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    leadingAdornment,\n    trailingAdornment,\n    className,\n    ...textFieldProps\n  } = props;\n\n  return (\n    <TextField {...textFieldProps} className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}>\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <div className={s.frame}>\n        {leadingAdornment !== undefined && <span className={s.adornment}>{leadingAdornment}</span>}\n        <RACInput ref={ref} placeholder={placeholder} />\n        {trailingAdornment !== undefined && <span className={s.adornment}>{trailingAdornment}</span>}\n      </div>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </TextField>\n  );\n});\n"],"mappings":";;;;;;;;GC+Ba,IAAQ,EAAW,SAC9B,GACA,GACA;CACA,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,qBACA,sBACA,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EAAW,GAAI;EAAgB,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA3G;GACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB;KACG,MAAqB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAwB,CAAA;KAC1F,kBAAC,GAAD;MAAe;MAAkB;MAAe,CAAA;KAC/C,MAAsB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAyB,CAAA;KACxF;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GAC5D;;EAEd"}

package/dist/chunks/ItemList-BUTk9E8-.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemList-BUTk9E8-.js","names":[],"sources":["../../src/components/ItemList/ItemList.module.css","../../src/components/ItemList/ItemList.tsx"],"sourcesContent":["/* One height and one inset for every sidebar list. A panel stacking two of\n   them has to have their rows line up, which is what a private copy of this\n   file per list stopped happening. */\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  user-select: none;\n  -webkit-user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 8px;\n  height: 24px;\n  font-size: 12px;\n  color: var(--wzl-fg);\n  background: transparent;\n  border-radius: 2px;\n  cursor: default;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.row:hover {\n  background: var(--wzl-surface);\n}\n\n.label {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.selected,\n.selected:hover {\n  background: var(--wzl-border);\n  color: var(--wzl-fg);\n}\n\n/* Present but not in effect. */\n.muted {\n  color: var(--wzl-fg-subtle);\n}\n\n.empty {\n  padding: 12px 8px;\n  font-size: 12px;\n  color: var(--wzl-fg-subtle);\n  font-style: italic;\n}\n","/**\n * The row chrome behind a sidebar list — layers, history, anything that is a\n * flat column of selectable rows in a panel.\n *\n * It owns the container, the row box and the empty state, and nothing else:\n * what a row *means* stays with the consumer. History dims its redo entries\n * and rules a line under the current one; a layer list drags to reorder and\n * leads each row with a swatch. Both reach that through `className` and\n * `rowProps` rather than through options here, so this does not grow a flag\n * per consumer.\n *\n * Rows are one height and one inset for every list, which is the point: two\n * panels stacked in the same sidebar have to agree, and they did not while\n * each owned a private copy of the same CSS.\n */\nimport { forwardRef, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './ItemList.module.css';\n\n/** One row. `id` is the React key. */\nexport interface ItemListRow {\n  id: string;\n  label: ReactNode;\n  /** Fixed-size content before the label — a color swatch, a checkbox. */\n  leading?: ReactNode;\n  /** The row the list considers current. */\n  selected?: boolean;\n  /** Present but not in effect — history's redo entries. */\n  muted?: boolean;\n  /** Consumer classes for states this component has no opinion about. */\n  className?: string;\n  /** Handlers and data attributes for this row's element. `data-*` is\n   *  spelled out because `HTMLAttributes` does not admit it, and every\n   *  consumer here marks its rows up with one. */\n  rowProps?: HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, unknown>;\n}\n\nexport interface ItemListProps {\n  rows: readonly ItemListRow[];\n  /** Shown in place of the rows when there are none. */\n  empty?: ReactNode;\n  className?: string;\n  /** Rendered inside the container above the rows — a drop indicator. */\n  overlay?: ReactNode;\n  /** Spread onto the container: pointer handlers for a drag, `aria-label`. */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nexport const ItemList = forwardRef(function ItemList(\n  { rows, empty, className, overlay, containerProps }: ItemListProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  const cls = [s.list, className].filter(Boolean).join(' ');\n  if (rows.length === 0) {\n    return (\n      <div className={cls} ref={ref} {...containerProps}>\n        <div className={s.empty}>{empty ?? '—'}</div>\n      </div>\n    );\n  }\n  return (\n    <div className={cls} ref={ref} {...containerProps}>\n      {overlay}\n      {rows.map((row) => (\n        <div\n          key={row.id}\n          className={[\n            s.row,\n            row.selected && s.selected,\n            row.muted && s.muted,\n            row.className,\n          ].filter(Boolean).join(' ')}\n          {...row.rowProps}\n        >\n          {row.leading}\n          <span className={s.label}>{row.label}</span>\n        </div>\n      ))}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;GC+Ca,IAAW,EAAW,SACjC,EAAE,SAAM,UAAO,cAAW,YAAS,qBACnC,GACA;CACA,IAAM,IAAM,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAQzD,QAPI,EAAK,WAAW,IAEhB,kBAAC,OAAD;EAAK,WAAW;EAAU;EAAK,GAAI;YACjC,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAQ,KAAS;GAAU,CAAA;EACzC,CAAA,GAIR,kBAAC,OAAD;EAAK,WAAW;EAAU;EAAK,GAAI;YAAnC,CACG,GACA,EAAK,KAAK,MACT,kBAAC,OAAD;GAEE,WAAW;IACT,EAAE;IACF,EAAI,YAAY,EAAE;IAClB,EAAI,SAAS,EAAE;IACf,EAAI;IACL,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC3B,GAAI,EAAI;aARV,CAUG,EAAI,SACL,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAQ,EAAI;IAAa,CAAA,CACxC;KAXC,EAAI,GAWL,CACN,CACE;;EAER"}

package/dist/chunks/NumberField-CQ7OJORF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NumberField-CQ7OJORF.js","names":[],"sources":["../../src/components/NumberField/NumberField.module.css","../../src/components/NumberField/NumberField.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.frame {\n  display: flex;\n  align-items: stretch;\n  height: var(--wzl-control-h);\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  line-height: 1;\n  overflow: hidden;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n  border-color: var(--wzl-danger);\n}\n\n.field[data-disabled] .frame {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.frame input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  padding: 0 8px;\n  text-align: right;\n  -moz-appearance: textfield;\n}\n\n.frame input::-webkit-outer-spin-button,\n.frame input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.steppers {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--wzl-border);\n}\n\n.stepper {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  flex: 1;\n  background: transparent;\n  border: none;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n  font-size: var(--wzl-font-size-2xs);\n  line-height: 1;\n}\n\n.stepper:not(:last-child) {\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.stepper[data-hovered]:not([data-disabled]) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.stepper[data-pressed]:not([data-disabled]) {\n  background: var(--wzl-surface-pressed);\n}\n\n.stepper[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  NumberField as RACNumberField,\n  Label,\n  Input as RACInput,\n  Group,\n  Button as RACButton,\n  Text,\n  FieldError,\n  type NumberFieldProps as RACNumberFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './NumberField.module.css';\n\n/** Props for {@link NumberField}, on top of React Aria's `NumberField` props. */\nexport type NumberFieldProps = Omit<RACNumberFieldProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  /** Hide the up/down stepper buttons. Defaults to false. */\n  hideSteppers?: boolean;\n  /** Native input placeholder — e.g. `'Mixed'` for a multi-selection\n   *  editor with no shared value. */\n  placeholder?: string;\n  className?: string;\n};\n\n/**\n * Numeric input with stepper buttons, wrapping React Aria's NumberField and\n * supplying the same label / description / errorMessage slots as `Input`.\n * Arrow keys and scroll step the value; parsing and formatting are React\n * Aria's.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const { label, description, errorMessage, hideSteppers, placeholder, className, ...rest } = props;\n  return (\n    <RACNumberField\n      {...rest}\n      className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}\n    >\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <Group className={s.frame}>\n        <RACInput ref={ref} placeholder={placeholder} />\n        {!hideSteppers && (\n          <div className={s.steppers}>\n            <RACButton slot=\"increment\" className={s.stepper} aria-label=\"Increment\">▲</RACButton>\n            <RACButton slot=\"decrement\" className={s.stepper} aria-label=\"Decrement\">▼</RACButton>\n          </div>\n        )}\n      </Group>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </RACNumberField>\n  );\n});\n"],"mappings":";;;;;;;;;GCoCa,IAAc,EAAW,SACpC,GACA,GACA;CACA,IAAM,EAAE,UAAO,gBAAa,iBAAc,iBAAc,gBAAa,cAAW,GAAG,MAAS;AAC5F,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAF9E;GAIG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,GAAD;IAAO,WAAW,EAAE;cAApB,CACE,kBAAC,GAAD;KAAe;KAAkB;KAAe,CAAA,EAC/C,CAAC,KACA,kBAAC,OAAD;KAAK,WAAW,EAAE;eAAlB,CACE,kBAAC,GAAD;MAAW,MAAK;MAAY,WAAW,EAAE;MAAS,cAAW;gBAAY;MAAa,CAAA,EACtF,kBAAC,GAAD;MAAW,MAAK;MAAY,WAAW,EAAE;MAAS,cAAW;gBAAY;MAAa,CAAA,CAClF;OAEF;;GACP,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACvD;;EAEnB"}

package/dist/chunks/Properties-CFRJ8mYH.js

@@ -1,655 +0,0 @@
-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 { n as a } from "./CurveEditor-COJ6WK9K.js";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useCallback as l, useMemo as u, useState as d } from "react";
-import { Focusable as f } from "react-aria-components";
-var p = {
-	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 m({ values: t, min: n, max: r, step: i, width: o, height: d = 110, defaults: f, onChange: m, marks: h }) {
-	let g = u(() => {
-		let e = [];
-		for (let n = 0; n + 1 < t.length; n += 2) e.push({
-			x: t[n],
-			y: t[n + 1]
-		});
-		return e;
-	}, [t]), _ = l((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)
-		}), m(a);
-	}, [
-		m,
-		n,
-		r,
-		i
-	]), v = l(() => {
-		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);
-		m(n);
-	}, [t, m]), y = l(() => {
-		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];
-		m(i);
-	}, [
-		t,
-		n,
-		r,
-		m
-	]);
-	return /* @__PURE__ */ c("div", {
-		className: p.field,
-		children: [/* @__PURE__ */ c("div", {
-			className: p.plot,
-			children: [/* @__PURE__ */ s(a, {
-				value: g,
-				onInput: _,
-				domain: "1d",
-				constrain: "function",
-				xRange: [0, 1],
-				yRange: [n, r],
-				width: o,
-				height: d,
-				endpoints: "pinned-x",
-				addPointMode: "click-curve",
-				minPoints: 2,
-				grid: {},
-				history: !1
-			}), h && h.length > 0 && /* @__PURE__ */ s("svg", {
-				className: p.marks,
-				width: o,
-				height: d,
-				viewBox: `0 0 ${o} ${d}`,
-				"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])) * o, r = Math.max(0, Math.min(1, e.x[1])) * o, i = Math.min(n, r), a = Math.abs(r - n);
-						return /* @__PURE__ */ c("g", { children: [
-							/* @__PURE__ */ s("rect", {
-								x: i,
-								y: 0,
-								width: a,
-								height: d,
-								fill: t,
-								fillOpacity: .4
-							}),
-							/* @__PURE__ */ s("line", {
-								x1: i,
-								y1: 0,
-								x2: i,
-								y2: d,
-								stroke: t,
-								strokeOpacity: .85,
-								strokeWidth: 1
-							}),
-							/* @__PURE__ */ s("line", {
-								x1: i + a,
-								y1: 0,
-								x2: i + a,
-								y2: d,
-								stroke: t,
-								strokeOpacity: .85,
-								strokeWidth: 1
-							})
-						] }, `band-${e.x[0]}-${e.x[1]}-${t}`);
-					}
-					let n = Math.max(0, Math.min(1, e.x)) * o;
-					return /* @__PURE__ */ s("line", {
-						x1: n,
-						y1: 0,
-						x2: n,
-						y2: d,
-						stroke: t,
-						strokeWidth: 1
-					}, `mark-${e.x}-${t}`);
-				})
-			})]
-		}), /* @__PURE__ */ c("div", {
-			className: p.actions,
-			children: [
-				/* @__PURE__ */ s("button", {
-					type: "button",
-					className: p.action,
-					onClick: v,
-					children: "Flip horizontally"
-				}),
-				/* @__PURE__ */ s("button", {
-					type: "button",
-					className: p.action,
-					onClick: y,
-					children: "Flip vertically"
-				}),
-				f && /* @__PURE__ */ s("button", {
-					type: "button",
-					className: p.action,
-					onClick: () => m([...f]),
-					children: "Reset"
-				})
-			]
-		})]
-	});
-}
-var h = {
-	panel: "_panel_1t04m_9",
-	list: "_list_1t04m_3",
-	row: "_row_1t04m_4",
-	group: "_group_1t04m_4",
-	subpanel: "_subpanel_1t04m_3",
-	card: "_card_1t04m_14",
-	cardList: "_cardList_1t04m_15",
-	panelTitle: "_panelTitle_1t04m_35",
-	listPairs: "_listPairs_1t04m_3",
-	rowColor: "_rowColor_1t04m_4",
-	span: "_span_1t04m_66",
-	rowLabel: "_rowLabel_1t04m_94",
-	readout: "_readout_1t04m_120",
-	help: "_help_1t04m_132",
-	readoutInput: "_readoutInput_1t04m_164",
-	readoutGroup: "_readoutGroup_1t04m_202",
-	readoutUnit: "_readoutUnit_1t04m_208",
-	rowInline: "_rowInline_1t04m_268",
-	toggle: "_toggle_1t04m_286",
-	alpha: "_alpha_1t04m_401",
-	alphaDisabled: "_alphaDisabled_1t04m_419",
-	rowCheckbox: "_rowCheckbox_1t04m_441",
-	toggleButton: "_toggleButton_1t04m_473",
-	toggleButtonSelected: "_toggleButtonSelected_1t04m_499",
-	groupTitle: "_groupTitle_1t04m_518",
-	groupBody: "_groupBody_1t04m_4",
-	groupPairs: "_groupPairs_1t04m_549",
-	subpanelTitle: "_subpanelTitle_1t04m_581",
-	cardDragging: "_cardDragging_1t04m_625",
-	cardExpanded: "_cardExpanded_1t04m_629",
-	cardAccented: "_cardAccented_1t04m_633",
-	cardHead: "_cardHead_1t04m_648",
-	cardHandle: "_cardHandle_1t04m_669",
-	cardIndexBadge: "_cardIndexBadge_1t04m_682",
-	cardTitle: "_cardTitle_1t04m_700",
-	cardPrimary: "_cardPrimary_1t04m_710",
-	cardRemove: "_cardRemove_1t04m_725",
-	cardBody: "_cardBody_1t04m_754",
-	cardListWrap: "_cardListWrap_1t04m_766",
-	cardDropHint: "_cardDropHint_1t04m_770",
-	cardListEmpty: "_cardListEmpty_1t04m_778"
-};
-//#endregion
-//#region src/components/Properties/EffectCard.tsx
-function g({ title: e, children: t, className: n }) {
-	return /* @__PURE__ */ c("div", {
-		className: n ? `${h.subpanel} ${n}` : h.subpanel,
-		children: [/* @__PURE__ */ c("h4", {
-			className: h.subpanelTitle,
-			children: [/* @__PURE__ */ s("span", { children: e }), /* @__PURE__ */ s("hr", {})]
-		}), t]
-	});
-}
-function _({ title: e, primary: t, accent: n, index: r, expanded: i = !0, onToggleExpanded: a, onRemove: o, draggable: l, onPressHandle: u, onReleaseHandle: d, onDragStart: f, onDragEnd: p, onDragOver: m, onDragLeave: g, onDrop: _, dragging: y, children: b, className: x }) {
-	let S = `${i ? ` ${h.cardExpanded}` : ""}${y ? ` ${h.cardDragging}` : ""}${n ? ` ${h.cardAccented}` : ""}`, C = `${h.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__ */ c("div", {
-		className: C,
-		style: w,
-		draggable: l,
-		onDragStart: f,
-		onDragEnd: p,
-		onDragOver: m,
-		onDragLeave: g,
-		onDrop: _,
-		children: [/* @__PURE__ */ c("div", {
-			className: h.cardHead,
-			...T,
-			children: [
-				r == null ? /* @__PURE__ */ s("span", {
-					className: h.cardHandle,
-					"aria-hidden": "true",
-					title: "Drag to reorder",
-					onMouseDown: u,
-					onMouseUp: d,
-					children: /* @__PURE__ */ s(v, {})
-				}) : /* @__PURE__ */ s("button", {
-					type: "button",
-					className: `${h.cardIndexBadge} ${h.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__ */ s("span", {
-					className: h.cardTitle,
-					children: e
-				}),
-				t != null && /* @__PURE__ */ s("span", {
-					className: h.cardPrimary,
-					children: t
-				}),
-				o && /* @__PURE__ */ s("button", {
-					type: "button",
-					className: h.cardRemove,
-					onClick: (e) => {
-						e.stopPropagation(), o();
-					},
-					title: "Remove",
-					"aria-label": "Remove",
-					children: "✕"
-				})
-			]
-		}), i && /* @__PURE__ */ s("div", {
-			className: h.cardBody,
-			children: b
-		})]
-	});
-}
-function v() {
-	return /* @__PURE__ */ c("svg", {
-		width: "10",
-		height: "14",
-		viewBox: "0 0 10 14",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ s("circle", {
-				cx: "3",
-				cy: "3",
-				r: "1.3",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ s("circle", {
-				cx: "7",
-				cy: "3",
-				r: "1.3",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ s("circle", {
-				cx: "3",
-				cy: "7",
-				r: "1.3",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ s("circle", {
-				cx: "7",
-				cy: "7",
-				r: "1.3",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ s("circle", {
-				cx: "3",
-				cy: "11",
-				r: "1.3",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ s("circle", {
-				cx: "7",
-				cy: "11",
-				r: "1.3",
-				fill: "currentColor"
-			})
-		]
-	});
-}
-function y({ items: e, renderItem: t, onReorder: n, empty: r, defaultExpandedIds: i }) {
-	let [a, l] = d(() => new Set(i ?? [])), [u, f] = d(null), [p, m] = d(null), [g, _] = d(null);
-	return e.length === 0 ? /* @__PURE__ */ s(o, { children: r ?? /* @__PURE__ */ s("div", {
-		className: h.cardListEmpty,
-		children: "No items."
-	}) }) : /* @__PURE__ */ s("div", {
-		className: h.cardList,
-		children: e.map((e) => {
-			let r = a.has(e.id), i = u === e.id, o = p === e.id, d = g && g.id === e.id && g.position === "before", v = g && g.id === e.id && g.position === "after", y = () => l((t) => {
-				let n = new Set(t);
-				return n.has(e.id) ? n.delete(e.id) : n.add(e.id), n;
-			});
-			return /* @__PURE__ */ c("div", {
-				className: h.cardListWrap,
-				children: [
-					d && /* @__PURE__ */ s("div", { className: h.cardDropHint }),
-					t(e, {
-						isExpanded: r,
-						isDragging: i,
-						toggleExpanded: y,
-						cardProps: {
-							expanded: r,
-							dragging: i,
-							draggable: o,
-							onToggleExpanded: y,
-							onPressHandle: () => m(e.id),
-							onReleaseHandle: () => m(null),
-							onDragStart: (t) => {
-								t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", String(e.id)), f(e.id);
-							},
-							onDragEnd: () => {
-								f(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__ */ s("div", { className: h.cardDropHint })
-				]
-			}, String(e.id));
-		})
-	});
-}
-//#endregion
-//#region src/components/Properties/PropertyGroup.tsx
-function b({ title: e, hidden: t, children: n, className: r, pack: i = "auto-color" }) {
-	if (t) return null;
-	let a = i === "pairs" ? ` ${h.groupPairs}` : "";
-	return /* @__PURE__ */ c("div", {
-		className: `${h.group}${a}${r ? ` ${r}` : ""}`,
-		children: [/* @__PURE__ */ c("h3", {
-			className: h.groupTitle,
-			children: [
-				/* @__PURE__ */ s("hr", {}),
-				/* @__PURE__ */ s("span", { children: e }),
-				/* @__PURE__ */ s("hr", {})
-			]
-		}), /* @__PURE__ */ s("div", {
-			className: h.groupBody,
-			children: n
-		})]
-	});
-}
-//#endregion
-//#region src/components/Properties/PropertyPanel.tsx
-function x({ title: e, children: t, className: n }) {
-	return /* @__PURE__ */ c("div", {
-		className: n ? `${h.panel} ${n}` : h.panel,
-		children: [e != null && /* @__PURE__ */ s("h2", {
-			className: h.panelTitle,
-			children: e
-		}), t]
-	});
-}
-function S({ children: e, className: t, pack: n = "auto-color" }) {
-	let r = n === "pairs" ? ` ${h.listPairs}` : "";
-	return /* @__PURE__ */ s("div", {
-		className: `${h.list}${r}${t ? ` ${t}` : ""}`,
-		children: e
-	});
-}
-function C({ children: e, className: t }) {
-	return /* @__PURE__ */ s("div", {
-		className: t ? `${h.span} ${t}` : h.span,
-		children: e
-	});
-}
-function w({ label: e, readout: t, description: n, variant: r = "default", layout: i = "block", span: a, children: o, htmlFor: l, className: u }) {
-	let d = r === "color" ? ` ${h.rowColor}` : r === "checkbox" ? ` ${h.rowCheckbox}` : "", f = r === "default" && i === "inline" ? ` ${h.rowInline}` : "", p = a ? ` ${h.span}` : "";
-	return /* @__PURE__ */ c("label", {
-		className: `${h.row}${d}${f}${p}${u ? ` ${u}` : ""}`,
-		htmlFor: l,
-		children: [/* @__PURE__ */ c("span", {
-			className: h.rowLabel,
-			children: [
-				e,
-				n ? /* @__PURE__ */ s(T, {
-					label: e,
-					description: n
-				}) : null,
-				t != null && /* @__PURE__ */ s("em", {
-					className: h.readout,
-					children: t
-				})
-			]
-		}), o]
-	});
-}
-function T({ label: e, description: r }) {
-	let i = typeof e == "string" ? e : "this setting";
-	return /* @__PURE__ */ c(t, { children: [/* @__PURE__ */ s(f, { children: /* @__PURE__ */ s("button", {
-		type: "button",
-		className: h.help,
-		"aria-label": `About ${i}`,
-		onClick: (e) => {
-			e.preventDefault(), e.stopPropagation();
-		},
-		onMouseDown: (e) => e.stopPropagation(),
-		children: "ⓘ"
-	}) }), /* @__PURE__ */ s(n, { children: r })] });
-}
-function E({ label: t, value: n, min: r, max: a, step: o = 1, onChange: c, format: l, unit: u, layout: d, description: f, span: p }) {
-	let m = o >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(o))));
-	return /* @__PURE__ */ s(w, {
-		span: p,
-		label: t,
-		readout: /* @__PURE__ */ s(D, {
-			value: n,
-			min: r,
-			max: a,
-			format: l ?? ((e) => i(e, {
-				useGrouping: !1,
-				minimumFractionDigits: m,
-				maximumFractionDigits: m
-			})),
-			unit: u,
-			onCommit: c
-		}),
-		layout: d,
-		description: f,
-		children: /* @__PURE__ */ s("input", {
-			type: "range",
-			tabIndex: -1,
-			min: r,
-			max: a,
-			step: o,
-			value: n,
-			onChange: (n) => {
-				let r = Number(n.target.value);
-				e("property-panel", "slider", {
-					label: t,
-					value: r
-				}), c(r);
-			}
-		})
-	});
-}
-function D({ value: e, min: t, max: n, format: a, unit: o, onCommit: l }) {
-	let [u, f] = d(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, g = o == null ? null : typeof o == "string" ? /* @__PURE__ */ s("span", {
-		className: h.readoutUnit,
-		children: o
-	}) : o, _ = () => {
-		if (u !== null) {
-			let e = r(u);
-			Number.isFinite(e) && l(Math.min(n, Math.max(t, e)));
-		}
-		f(null);
-	};
-	return /* @__PURE__ */ c("span", {
-		className: h.readoutGroup,
-		children: [/* @__PURE__ */ s("input", {
-			type: "text",
-			inputMode: "decimal",
-			className: h.readoutInput,
-			value: m,
-			onFocus: (t) => {
-				let n = p(e);
-				f(typeof n == "string" ? n : String(n)), t.currentTarget.select();
-			},
-			onChange: (e) => f(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" && (f(null), e.currentTarget.blur());
-			}
-		}), g]
-	});
-}
-function O({ label: e, value: t, onChange: n, alpha: r, onAlphaChange: i, alphaDisabled: a, description: o, span: l }) {
-	let u = r != null;
-	return /* @__PURE__ */ c(w, {
-		span: l,
-		label: e,
-		variant: "color",
-		className: a ? h.alphaDisabled : void 0,
-		description: o,
-		children: [/* @__PURE__ */ s("input", {
-			type: "color",
-			value: t,
-			onChange: (e) => n(e.target.value)
-		}), u && /* @__PURE__ */ s("input", {
-			type: "range",
-			className: h.alpha,
-			min: 0,
-			max: 1,
-			step: .01,
-			value: r,
-			disabled: a,
-			onChange: (e) => i?.(Number(e.target.value))
-		})]
-	});
-}
-function k({ label: e, value: t, onChange: n, span: r, description: i }) {
-	return /* @__PURE__ */ s(w, {
-		span: r,
-		label: e,
-		variant: "checkbox",
-		description: i,
-		children: /* @__PURE__ */ s("input", {
-			type: "checkbox",
-			checked: t,
-			onChange: (e) => n(e.target.checked)
-		})
-	});
-}
-function A({ label: e, value: t, onChange: n, placeholder: r, maxLength: i, layout: a, description: o, span: c }) {
-	return /* @__PURE__ */ s(w, {
-		span: c,
-		label: e,
-		layout: a,
-		description: o,
-		children: /* @__PURE__ */ s("input", {
-			type: "text",
-			value: t,
-			placeholder: r,
-			maxLength: i,
-			onChange: (e) => n(e.target.value)
-		})
-	});
-}
-function j({ label: e, value: t, onChange: n, min: r, max: i, step: a, placeholder: o, layout: c, description: l, span: u }) {
-	return /* @__PURE__ */ s(w, {
-		span: u,
-		label: e,
-		layout: c,
-		description: l,
-		children: /* @__PURE__ */ s("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);
-			}
-		})
-	});
-}
-function M({ label: t, value: n, options: r, onChange: i, layout: a, description: o, span: c }) {
-	return /* @__PURE__ */ s(w, {
-		span: c,
-		label: t,
-		layout: a,
-		description: o,
-		children: /* @__PURE__ */ s("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__ */ s("option", {
-				value: e.value,
-				children: e.label
-			}, e.value))
-		})
-	});
-}
-function N({ label: e, value: t, options: n, onChange: r, layout: i, description: a, span: o }) {
-	return /* @__PURE__ */ s(w, {
-		span: o,
-		label: e,
-		layout: i,
-		description: a,
-		children: /* @__PURE__ */ s("div", {
-			className: h.toggle,
-			children: n.map((e) => {
-				let n = e.value === t;
-				return /* @__PURE__ */ s("button", {
-					type: "button",
-					"aria-pressed": n,
-					className: n ? `${h.toggleButton} ${h.toggleButtonSelected}` : h.toggleButton,
-					onClick: () => r(e.value),
-					children: e.label
-				}, e.value);
-			})
-		})
-	});
-}
-//#endregion
-export { x as a, M as c, N as d, b as f, m as g, g as h, S as i, E as l, y as m, O as n, w as o, _ as p, j as r, C as s, k as t, A as u };
-
-//# sourceMappingURL=Properties-CFRJ8mYH.js.map