@weasel-js/ui 1.6.1 → 1.7.1

package/dist/chunks/ListEditor-BnGzqERm.js

@@ -0,0 +1,72 @@
+import { t as e } from "./Button-XB-T75YL.js";
+import { t } from "./CloseButton-BmNmRVtb.js";
+import { t as n } from "./field.module-Bh7BTKMh.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useEffect as a, useRef as o, useState as s } from "react";
+var c = {
+	editor: "_editor_duzaw_1",
+	list: "_list_duzaw_8",
+	entry: "_entry_duzaw_17",
+	input: "_input_duzaw_23",
+	empty: "_empty_duzaw_29",
+	actions: "_actions_duzaw_35"
+};
+//#endregion
+//#region src/components/ListEditor/ListEditor.tsx
+function l({ value: l, onChange: u, placeholder: d, empty: f = "None", addLabel: p = "Add", "aria-label": m, className: h }) {
+	let g = o([]), [_, v] = s(null);
+	a(() => {
+		_ !== null && (g.current[_]?.focus(), v(null));
+	}, [_]);
+	let y = (e) => {
+		u([
+			...l.slice(0, e),
+			"",
+			...l.slice(e)
+		]), v(e);
+	}, b = (e) => {
+		u(l.filter((t, n) => n !== e)), l.length > 1 && v(Math.max(0, e - 1));
+	}, x = (e, t) => {
+		e.key === "Enter" ? (e.preventDefault(), y(t + 1)) : e.key === "Backspace" && l[t] === "" && (e.preventDefault(), b(t));
+	}, S = (e) => `${m ?? "Entry"} ${e + 1}`;
+	return /* @__PURE__ */ i("div", {
+		className: [c.editor, h].filter(Boolean).join(" "),
+		role: "group",
+		"aria-label": m,
+		children: [l.length === 0 ? /* @__PURE__ */ r("div", {
+			className: c.empty,
+			children: f
+		}) : /* @__PURE__ */ r("ul", {
+			className: c.list,
+			children: l.map((e, a) => /* @__PURE__ */ i("li", {
+				className: c.entry,
+				children: [/* @__PURE__ */ r("input", {
+					ref: (e) => {
+						g.current[a] = e;
+					},
+					type: "text",
+					className: `${n.frame} ${c.input}`,
+					"aria-label": S(a),
+					value: e,
+					placeholder: d,
+					onChange: (e) => u(l.map((t, n) => n === a ? e.target.value : t)),
+					onKeyDown: (e) => x(e, a)
+				}), /* @__PURE__ */ r(t, {
+					ariaLabel: `Remove ${S(a)}`,
+					onClick: () => b(a)
+				})]
+			}, a))
+		}), /* @__PURE__ */ r("div", {
+			className: c.actions,
+			children: /* @__PURE__ */ r(e, {
+				size: "sm",
+				onClick: () => y(l.length),
+				children: p
+			})
+		})]
+	});
+}
+//#endregion
+export { l as t };
+
+//# sourceMappingURL=ListEditor-BnGzqERm.js.map

package/dist/chunks/ListEditor-BnGzqERm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListEditor-BnGzqERm.js","names":["s","f","Button","field_module_default","ListEditor_module_default","ListEditor","ariaLabel","inputs","useRef","focus","setFocus","useState","insert","onChange","value","at","remove","i","onKeyDown","name","className","empty","el","entry","j","v","CloseButton","addLabel"],"sources":["../../src/components/ListEditor/ListEditor.module.css","../../src/components/ListEditor/ListEditor.tsx"],"sourcesContent":[".editor {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  min-width: min(28rem, calc(100vw - 64px));\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.entry {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n}\n\n.input {\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--wzl-field-pad-x);\n}\n\n.empty {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  font-style: italic;\n}\n\n.actions {\n  display: flex;\n}\n","import { useEffect, useRef, useState, type KeyboardEvent } from 'react';\nimport { Button } from '../Button';\nimport { CloseButton } from '../CloseButton';\nimport f from '../field.module.css';\nimport s from './ListEditor.module.css';\n\n/** Props for {@link ListEditor}. */\nexport interface ListEditorProps {\n  value: readonly string[];\n  /** Every edit, add and removal, with the whole list. Entries are written as\n   *  typed — an empty one stays until it is removed. */\n  onChange: (next: string[]) => void;\n  /** Shown in an empty entry. */\n  placeholder?: string;\n  /** Shown in place of the entries when there are none. */\n  empty?: string;\n  /** Text of the add button. */\n  addLabel?: string;\n  /** Names the list for assistive tech; each entry is named from it. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * An editable list of strings: one field per entry, a remove button beside\n * each, and an add button under them. Enter in an entry adds one after it;\n * Backspace in an empty one removes it.\n */\nexport function ListEditor({\n  value,\n  onChange,\n  placeholder,\n  empty = 'None',\n  addLabel = 'Add',\n  'aria-label': ariaLabel,\n  className,\n}: ListEditorProps) {\n  const inputs = useRef<(HTMLInputElement | null)[]>([]);\n  const [focus, setFocus] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (focus === null) return;\n    inputs.current[focus]?.focus();\n    setFocus(null);\n  }, [focus]);\n\n  const insert = (at: number): void => {\n    onChange([...value.slice(0, at), '', ...value.slice(at)]);\n    setFocus(at);\n  };\n  const remove = (at: number): void => {\n    onChange(value.filter((_, i) => i !== at));\n    if (value.length > 1) setFocus(Math.max(0, at - 1));\n  };\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>, at: number): void => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      insert(at + 1);\n    } else if (e.key === 'Backspace' && value[at] === '') {\n      e.preventDefault();\n      remove(at);\n    }\n  };\n  const name = (i: number): string => `${ariaLabel ?? 'Entry'} ${i + 1}`;\n\n  return (\n    <div className={[s.editor, className].filter(Boolean).join(' ')} role=\"group\" aria-label={ariaLabel}>\n      {value.length === 0 ? (\n        <div className={s.empty}>{empty}</div>\n      ) : (\n        <ul className={s.list}>\n          {value.map((entry, i) => (\n            // Entries have no identity beyond their position, and two may be equal.\n            <li key={i} className={s.entry}>\n              <input\n                ref={(el) => {\n                  inputs.current[i] = el;\n                }}\n                type=\"text\"\n                className={`${f.frame} ${s.input}`}\n                aria-label={name(i)}\n                value={entry}\n                placeholder={placeholder}\n                onChange={(e) => onChange(value.map((v, j) => (j === i ? e.target.value : v)))}\n                onKeyDown={(e) => onKeyDown(e, i)}\n              />\n              <CloseButton ariaLabel={`Remove ${name(i)}`} onClick={() => remove(i)} />\n            </li>\n          ))}\n        </ul>\n      )}\n      <div className={s.actions}>\n        <Button size=\"sm\" onClick={() => insert(value.length)}>\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AC4BA,SAAgBK,EAAW,EACzB,UACA,aACA,gBACA,WAAQ,QACR,cAAW,OACX,cAAcC,GACd,gBACkB;CAClB,IAAMC,IAASC,EAAoC,CAAC,CAAC,GAC/C,CAACC,GAAOC,KAAYC,EAAwB,IAAI;CAEtD,QAAgB;EACd,AAAIF,MAAU,SACdF,EAAO,QAAQE,EAAM,EAAE,MAAM,GAC7BC,EAAS,IAAI;CACf,GAAG,CAACD,CAAK,CAAC;CAEV,IAAMG,KAAU,MAAqB;EAEnC,AADAC,EAAS;GAAC,GAAGC,EAAM,MAAM,GAAGC,CAAE;GAAG;GAAI,GAAGD,EAAM,MAAMC,CAAE;EAAC,CAAC,GACxDL,EAASK,CAAE;CACb,GACMC,KAAU,MAAqB;EAEnC,AADAH,EAASC,EAAM,QAAQ,GAAG,MAAMG,MAAMF,CAAE,CAAC,GACrCD,EAAM,SAAS,KAAGJ,EAAS,KAAK,IAAI,GAAGK,IAAK,CAAC,CAAC;CACpD,GACMG,KAAa,GAAoC,MAAqB;EAC1E,AAAI,EAAE,QAAQ,WACZ,EAAE,eAAe,GACjBN,EAAOG,IAAK,CAAC,KACJ,EAAE,QAAQ,eAAeD,EAAMC,OAAQ,OAChD,EAAE,eAAe,GACjBC,EAAOD,CAAE;CAEb,GACMI,KAAQ,MAAsB,GAAGb,KAAa,QAAQ,GAAGW,IAAI;CAEnE,OACE,kBAAC,OAAD;EAAK,WAAW,CAACjB,EAAE,QAAQoB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAAG,MAAK;EAAQ,cAAYd;EAA1F,UAAA,CACGQ,EAAM,WAAW,IAChB,kBAAC,OAAD;GAAK,WAAWd,EAAE;GAAQ,UAAAqB;EAAW,CAAA,IAErC,kBAAC,MAAD;GAAI,WAAWrB,EAAE;GACd,UAAAc,EAAM,KAAK,GAAO,MAEjB,kBAAC,MAAD;IAAY,WAAWd,EAAE;IAAzB,UAAA,CACE,kBAAC,SAAD;KACE,MAAM,MAAO;MACX,EAAO,QAAQiB,KAAKK;KACtB;KACA,MAAK;KACL,WAAW,GAAGrB,EAAE,MAAM,GAAGD,EAAE;KAC3B,cAAYmB,EAAKF,CAAC;KAClB,OAAOM;KACM;KACb,WAAW,MAAMV,EAASC,EAAM,KAAK,GAAG,MAAOU,MAAMP,IAAI,EAAE,OAAO,QAAQQ,CAAE,CAAC;KAC7E,YAAY,MAAMP,EAAU,GAAGD,CAAC;IACjC,CAAA,GACD,kBAACS,GAAD;KAAa,WAAW,UAAUP,EAAKF,CAAC;KAAK,eAAeD,EAAOC,CAAC;IAAI,CAAA,CACtE;GAdK,GAAAA,CAcL,CACL;EACC,CAAA,GAEN,kBAAC,OAAD;GAAK,WAAWjB,EAAE;GAChB,UAAA,kBAACE,GAAD;IAAQ,MAAK;IAAK,eAAeU,EAAOE,EAAM,MAAM;IACjD,UAAAa;GACK,CAAA;EACL,CAAA,CACF;;AAET"}

package/dist/chunks/MenuButton-L9f5vido.js

@@ -0,0 +1,75 @@
+import { i as e } from "./portalHost-CE70wLzo.js";
+import { n as t, r as n } from "./segmentTooltip-CGxCOWNz.js";
+import { t as r } from "./field.module-Bh7BTKMh.js";
+import { t as i } from "./listbox.module-BcdVJMbm.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Button as s, Menu as c, MenuItem as l, MenuTrigger as u, Popover as d } from "react-aria-components";
+var f = {
+	trigger: "_trigger_qg4sk_1",
+	label: "_label_qg4sk_11",
+	chevron: "_chevron_qg4sk_15",
+	popover: "_popover_qg4sk_22",
+	item: "_item_qg4sk_28"
+};
+//#endregion
+//#region src/components/MenuButton/MenuButton.tsx
+function p({ label: p, items: m, onAction: h, isDisabled: g, className: _, "aria-label": v, portalContainer: y, shortcut: b, tooltip: x }) {
+	let { anchor: S, portalProps: C } = e(y);
+	return /* @__PURE__ */ o(u, { children: [
+		S,
+		/* @__PURE__ */ a(t, {
+			content: n({
+				tooltip: x,
+				shortcut: b,
+				ariaLabel: v,
+				label: p
+			}),
+			disabled: g,
+			children: /* @__PURE__ */ o(s, {
+				className: [
+					r.frame,
+					f.trigger,
+					_
+				].filter(Boolean).join(" "),
+				isDisabled: g,
+				"aria-label": v,
+				children: [/* @__PURE__ */ a("span", {
+					className: f.label,
+					children: p
+				}), /* @__PURE__ */ a("svg", {
+					className: f.chevron,
+					viewBox: "0 0 10 10",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ a("path", {
+						d: "M2 4 L5 7 L8 4",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
+				})]
+			})
+		}),
+		/* @__PURE__ */ a(d, {
+			className: f.popover,
+			"data-weasel-overlay": "",
+			...C,
+			children: /* @__PURE__ */ a(c, {
+				className: `${i.surface} ${i.list}`,
+				onAction: (e) => h(e),
+				children: m.map((e) => /* @__PURE__ */ a(l, {
+					id: e.value,
+					className: f.item,
+					isDisabled: e.isDisabled,
+					textValue: e.textValue ?? (typeof e.label == "string" ? e.label : void 0),
+					children: e.label
+				}, e.value))
+			})
+		})
+	] });
+}
+//#endregion
+export { p as t };
+
+//# sourceMappingURL=MenuButton-L9f5vido.js.map

package/dist/chunks/MenuButton-L9f5vido.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton-L9f5vido.js","names":["RACButton","f","s","RACPopover","RACMenu","listbox","RACMenuItem","useOverlayPortal","TriggerTooltip","segmentTooltipContent","field_module_default","listbox_module_default","MenuButton_module_default","MenuButton","ariaLabel","portalContainer","MenuTrigger","anchor","isDisabled","Button","className","label","Popover","portalProps","Menu","onAction","key","items","MenuItem","item"],"sources":["../../src/components/MenuButton/MenuButton.module.css","../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":[".trigger {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  padding: 0 var(--wzl-space-3) 0 var(--wzl-space-5);\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.label {\n  color: var(--wzl-fg-subtle);\n}\n\n.chevron {\n  width: 10px;\n  height: 10px;\n  color: var(--wzl-fg-muted);\n  flex: 0 0 auto;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  max-height: inherit;\n  outline: none;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  padding: var(--wzl-space-2) var(--wzl-space-4);\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n  color: var(--wzl-fg);\n  white-space: nowrap;\n  outline: none;\n}\n\n.item[data-focused] {\n  background: var(--wzl-surface-hover);\n}\n\n.item[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Button as RACButton,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  MenuTrigger,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport f from '../field.module.css';\nimport listbox from '../listbox.module.css';\nimport s from './MenuButton.module.css';\nimport { TriggerTooltip, segmentTooltipContent, type SegmentTooltipFields } from '../segmentTooltip';\n\n/** One row in a {@link MenuButton}'s list. */\nexport type MenuButtonItem<T extends string = string> = {\n  value: T;\n  label: ReactNode;\n  isDisabled?: boolean;\n  /** Plain-text form of `label`, for type-to-select and screen readers. A\n   *  string label supplies this itself. */\n  textValue?: string;\n};\n\n/** Props for {@link MenuButton}. */\nexport type MenuButtonProps<T extends string = string> = {\n  /** What the button says. It never changes to show a chosen row. */\n  label: ReactNode;\n  items: ReadonlyArray<MenuButtonItem<T>>;\n  /** Fired with the value of the row chosen. */\n  onAction: (value: T) => void;\n  isDisabled?: boolean;\n  className?: string;\n  'aria-label'?: string;\n} & SegmentTooltipFields & OverlayPortalProps;\n\n/**\n * A button that opens a list and acts on the row chosen — \"Add trial…\",\n * \"Load…\". Unlike a {@link Select} it holds no value, so it sizes to its own\n * label rather than to its widest row.\n *\n * `shortcut` adds a kit tooltip reading `Name (⌘N)`, named by `aria-label` or\n * a string `label`, as `Button` does; `tooltip` replaces that text.\n */\nexport function MenuButton<T extends string = string>({\n  label,\n  items,\n  onAction,\n  isDisabled,\n  className,\n  'aria-label': ariaLabel,\n  portalContainer,\n  shortcut,\n  tooltip,\n}: MenuButtonProps<T>) {\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n  return (\n    <MenuTrigger>\n      {anchor}\n      <TriggerTooltip\n        content={segmentTooltipContent({ tooltip, shortcut, ariaLabel, label })}\n        disabled={isDisabled}\n      >\n        <RACButton\n          className={[f.frame, s.trigger, className].filter(Boolean).join(' ')}\n          isDisabled={isDisabled}\n          aria-label={ariaLabel}\n        >\n          <span className={s.label}>{label}</span>\n          <svg className={s.chevron} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </RACButton>\n      </TriggerTooltip>\n      {/* `data-weasel-overlay`: see Select — the list renders in a portal,\n          outside the subtree the trigger sits in. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACMenu className={`${listbox.surface} ${listbox.list}`} onAction={(key) => onAction(key as T)}>\n          {items.map((item) => (\n            <RACMenuItem\n              key={item.value}\n              id={item.value}\n              className={s.item}\n              isDisabled={item.isDisabled}\n              textValue={item.textValue ?? (typeof item.label === 'string' ? item.label : undefined)}\n            >\n              {item.label}\n            </RACMenuItem>\n          ))}\n        </RACMenu>\n      </RACPopover>\n    </MenuTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AC4CA,SAAgBa,EAAsC,EACpD,UACA,UACA,aACA,eACA,cACA,cAAcC,GACd,oBACA,aACA,cACqB;CACrB,IAAM,EAAE,WAAQ,mBAAgBP,EAAiBQ,CAAe;CAChE,OACE,kBAACC,GAAD,EAAA,UAAA;EACGC;EACD,kBAACT,GAAD;GACE,SAASC,EAAsB;IAAE;IAAS;IAAU;IAAW;GAAM,CAAC;GACtE,UAAUS;GAEV,UAAA,kBAAClB,GAAD;IACE,WAAW;KAACC,EAAE;KAAOC,EAAE;KAASkB;IAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;IACvD;IACZ,cAAYN;IAHd,UAAA,CAKE,kBAAC,QAAD;KAAM,WAAWZ,EAAE;KAAQ,UAAAmB;IAAY,CAAA,GACvC,kBAAC,OAAD;KAAK,WAAWnB,EAAE;KAAS,SAAQ;KAAY,eAAY;KACzD,UAAA,kBAAC,QAAD;MAAM,GAAE;MAAiB,MAAK;MAAO,QAAO;MAAe,aAAY;MAAM,eAAc;MAAQ,gBAAe;KAAS,CAAA;IACxH,CAAA,CACI;;EACG,CAAA;EAGhB,kBAACC,GAAD;GAAY,WAAWD,EAAE;GAAS,uBAAoB;GAAG,GAAIqB;GAC3D,UAAA,kBAACnB,GAAD;IAAS,WAAW,GAAGC,EAAQ,QAAQ,GAAGA,EAAQ;IAAQ,WAAW,MAAQoB,EAASC,CAAQ;IAC3F,UAAAC,EAAM,KAAK,MACV,kBAACrB,GAAD;KAEE,IAAIuB,EAAK;KACT,WAAW3B,EAAE;KACb,YAAY2B,EAAK;KACjB,WAAWA,EAAK,cAAc,OAAOA,EAAK,SAAU,WAAWA,EAAK,QAAQ,KAAA;KAE3E,UAAAA,EAAK;IACK,GAPNA,EAAK,KAOC,CACd;GACM,CAAA;EACC,CAAA;CACD,EAAA,CAAA;AAEjB"}

package/dist/chunks/MeshEditor-GbqqiPk8.js

@@ -0,0 +1,199 @@
+import { n as e } from "./handles-CqVANLtu.js";
+import { t } from "./ColorField-BLs9fbeq.js";
+import { t as n } from "./paintPreview-CuSZiHpR.js";
+import { t as r } from "./ToggleBar-Z2jZiguF.js";
+import { asPaint as i, useHandleDrag as a } from "@weasel-js/core";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useRef as c } from "react";
+import { isMeshGradientFill as l, meshGuides as u, meshHandles as d, moveMeshHandle as f } from "@weasel-js/core/mesh";
+var p = {
+	root: "_root_g12ri_1",
+	patch: "_patch_g12ri_7",
+	preview: "_preview_g12ri_13",
+	corners: "_corners_g12ri_21",
+	corner: "_corner_g12ri_21"
+}, m = [
+	{
+		value: "rgb",
+		label: "sRGB"
+	},
+	{
+		value: "oklab",
+		label: "OKLab"
+	},
+	{
+		value: "oklch",
+		label: "OKLCh"
+	}
+];
+function h(e) {
+	let { value: n, onInput: a, onChange: c, spaceSwitch: l = !0, className: u } = e, d = n.interpolate ?? "rgb", f = (e, t, r) => i({
+		...n,
+		patches: n.patches.map((n, i) => {
+			if (i !== e) return n;
+			let [a, o, s, c] = n.colors, l = [
+				a,
+				o,
+				s,
+				c
+			];
+			return l[t] = r, {
+				...n,
+				colors: l
+			};
+		})
+	});
+	return /* @__PURE__ */ s("div", {
+		className: [p.root, u].filter(Boolean).join(" "),
+		children: [n.patches.map((e, r) => /* @__PURE__ */ s("div", {
+			className: p.patch,
+			children: [/* @__PURE__ */ o("span", {
+				className: p.preview,
+				"aria-hidden": "true",
+				style: { background: g(n, r) }
+			}), /* @__PURE__ */ o("div", {
+				className: p.corners,
+				children: e.colors.map((e, n) => /* @__PURE__ */ o(t, {
+					value: e,
+					alpha: !0,
+					"aria-label": `Patch ${r + 1} corner ${n + 1}`,
+					className: p.corner,
+					onInput: (e) => a?.(f(r, n, e)),
+					onChange: (e) => c(f(r, n, e))
+				}, n))
+			})]
+		}, r)), l && /* @__PURE__ */ o(r, {
+			items: m,
+			value: d,
+			size: "sm",
+			ariaLabel: "Blend space",
+			onChange: (e) => e && c(i({
+				...n,
+				interpolate: e
+			}))
+		})]
+	});
+}
+function g(e, t) {
+	return n({
+		...e,
+		patches: [e.patches[t]]
+	});
+}
+function _(e) {
+	return l(e);
+}
+var v = {
+	overlay: "_overlay_fgthm_3",
+	guide: "_guide_fgthm_13",
+	handle: "_handle_fgthm_21",
+	control: "_control_fgthm_40",
+	edge: "_edge_fgthm_48"
+};
+//#endregion
+//#region src/components/GradientEditor/handleOverlay.tsx
+function y(e) {
+	return /* @__PURE__ */ o("svg", {
+		className: [v.overlay, e.className].filter(Boolean).join(" "),
+		width: e.width,
+		height: e.height,
+		children: e.children
+	});
+}
+function b(e) {
+	return /* @__PURE__ */ o("line", {
+		className: v.guide,
+		...e
+	});
+}
+function x({ points: e }) {
+	let [t, n, r, i] = e;
+	return /* @__PURE__ */ o("path", {
+		className: v.edge,
+		d: `M${t.x} ${t.y}C${n.x} ${n.y} ${r.x} ${r.y} ${i.x} ${i.y}`
+	});
+}
+function S({ at: e, label: t, radius: n, variant: r = "handle", onDrag: i }) {
+	let s = c(e), l = a({
+		onStart: () => {
+			s.current = e;
+		},
+		onMove: (e) => {
+			i(e, "input");
+		},
+		onEnd: ({ point: e, moved: t }) => {
+			t && i(e, "commit");
+		},
+		onCancel: () => {
+			i(s.current, "input");
+		}
+	});
+	return /* @__PURE__ */ o("circle", {
+		className: r === "control" ? `${v.handle} ${v.control}` : v.handle,
+		cx: e.x,
+		cy: e.y,
+		r: n,
+		role: "button",
+		"aria-label": t,
+		tabIndex: 0,
+		onKeyDown: (t) => {
+			let n = t.shiftKey ? C * 10 : C, r = 0, a = 0;
+			if (t.key === "ArrowLeft") r = -n;
+			else if (t.key === "ArrowRight") r = n;
+			else if (t.key === "ArrowUp") a = -n;
+			else if (t.key === "ArrowDown") a = n;
+			else return;
+			t.preventDefault();
+			let o = {
+				x: e.x + r,
+				y: e.y + a
+			};
+			i(o, "input"), i(o, "commit");
+		},
+		...l
+	});
+}
+var C = 1, w = e("--wzl-handle-size-lg"), T = e("--wzl-handle-size");
+function E(e) {
+	let { value: t, toScreen: n, toLocal: r, onInput: a, onChange: c, width: l, height: p, className: m } = e, { edges: h, arms: g } = u(t), _ = d(t), v = (e, n, o) => {
+		let s = i(f(t, e, r(n)));
+		o === "input" ? a?.(s) : c(s);
+	}, C = [..._.filter((e) => e.kind !== "corner"), ..._.filter((e) => e.kind === "corner")];
+	return /* @__PURE__ */ s(y, {
+		width: l,
+		height: p,
+		className: m,
+		children: [
+			h.map((e, t) => /* @__PURE__ */ o(x, { points: [
+				n(e[0]),
+				n(e[1]),
+				n(e[2]),
+				n(e[3])
+			] }, `e${t}`)),
+			g.map(([e, t], r) => {
+				let i = n(e), a = n(t);
+				return /* @__PURE__ */ o(b, {
+					x1: i.x,
+					y1: i.y,
+					x2: a.x,
+					y2: a.y
+				}, `a${r}`);
+			}),
+			C.map((e) => /* @__PURE__ */ o(S, {
+				at: n(e.at),
+				label: D(e),
+				radius: e.kind === "corner" ? w : T,
+				variant: e.kind === "corner" ? "handle" : "control",
+				onDrag: (t, n) => v(e, t, n)
+			}, e.id))
+		]
+	});
+}
+function D(e) {
+	let { patch: t, index: n } = e.refs[0], r = `Patch ${t + 1}`;
+	return e.kind === "corner" ? `${r} corner ${n / 3 + 1}` : e.kind === "interior" ? `${r} interior ${n - 11}` : `${r} edge ${Math.floor(n / 3) + 1} control ${n % 3}`;
+}
+//#endregion
+export { v as a, y as i, S as n, h as o, b as r, _ as s, E as t };
+
+//# sourceMappingURL=MeshEditor-GbqqiPk8.js.map

package/dist/chunks/MeshEditor-GbqqiPk8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MeshEditor-GbqqiPk8.js","names":["s","s","handleHalf","paintPreviewCss","ToggleBar","MeshEditor_module_default","SPACES","MeshEditor","props","space","value","withCorner","asPaint","patchIndex","patch","b","c","d","next","corner","color","className","previewOf","ColorField","onInput","onChange","spaceSwitch","isMeshPaint","isMeshGradientFill","fill","handleOverlay_module_default","HandleOverlay","Guide","Edge","a","points","DragPoint","start","useRef","at","drag","useHandleDrag","p","moved","onDrag","point","variant","radius","label","amount","e","KEY_STEP","dx","dy","CORNER_RADIUS","CONTROL_RADIUS","MeshHandles","meshGuides","handles","meshHandles","emit","moveMeshHandle","handle","toLocal","phase","ordered","h","edges","toScreen","edge","i","arms","from","to","labelOf","prefix","index"],"sources":["../../src/components/MeshEditor/MeshEditor.module.css","../../src/components/MeshEditor/MeshEditor.tsx","../../src/components/GradientEditor/handleOverlay.module.css","../../src/components/GradientEditor/handleOverlay.tsx","../../src/components/MeshEditor/MeshHandles.tsx"],"sourcesContent":[".root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n}\n\n.patch {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n}\n\n.preview {\n  inline-size: 34px;\n  block-size: 34px;\n  flex: 0 0 auto;\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: inset 0 0 0 1px var(--wzl-border);\n}\n\n.corners {\n  display: grid;\n  grid-template-columns: repeat(2, auto);\n  gap: var(--wzl-space-2) var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n.corner {\n  min-inline-size: 0;\n}\n","import { type ReactElement } from 'react';\nimport { asPaint, type ColorSpace, type FillStyle } from '@weasel-js/core';\nimport { isMeshGradientFill, type MeshGradientFill } from '@weasel-js/core/mesh';\nimport { ColorField } from '../ColorField';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport { paintPreviewCss } from '../../paintPreview';\nimport s from './MeshEditor.module.css';\n\nconst SPACES: readonly ToggleBarItem<ColorSpace>[] = [\n  { value: 'rgb', label: 'sRGB' },\n  { value: 'oklab', label: 'OKLab' },\n  { value: 'oklch', label: 'OKLCh' },\n];\n\n/** Props for {@link MeshEditor}. `onInput` fires throughout a gesture and\n *  `onChange` once at its end. */\nexport interface MeshEditorProps {\n  value: MeshGradientFill;\n  /** Emitted as a `FillStyle`, which is what every paint control passes\n   *  around — `FillStyle`'s discriminant stays closed over the built-in\n   *  members, so a registered kind's own shape only travels through it. */\n  onInput?: (next: FillStyle) => void;\n  onChange: (next: FillStyle) => void;\n  /** Show the sRGB / OKLab / OKLCh switch. Default true. */\n  spaceSwitch?: boolean;\n  className?: string;\n}\n\n/**\n * Editor for a mesh gradient's colors.\n *\n * Geometry is absent for the same reason it is absent from `GradientEditor`:\n * a patch's twelve control points are a thing to drag on the artwork\n * (`MeshHandles`), not a column of numbers in a panel. What is left is what a panel is good at — the\n * color at each corner, and the space the four of them blend through.\n *\n * Corners are numbered in the patch's own walk order, which is the order the\n * paint stores them in, so a corner's number is stable while it is dragged.\n */\nexport function MeshEditor(props: MeshEditorProps): ReactElement {\n  const { value, onInput, onChange, spaceSwitch = true, className } = props;\n  const space = value.interpolate ?? 'rgb';\n\n  const withCorner = (patchIndex: number, corner: number, color: string): FillStyle => asPaint({\n    ...value,\n    patches: value.patches.map((patch, i) => {\n      if (i !== patchIndex) return patch;\n      const [a, b, c, d] = patch.colors;\n      const next: [string, string, string, string] = [a, b, c, d];\n      next[corner] = color;\n      return { ...patch, colors: next };\n    }),\n  });\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      {value.patches.map((patch, patchIndex) => (\n        // A patch has no id; its position in the list is its identity, the way\n        // a gradient stop's is.\n        <div key={patchIndex} className={s.patch}>\n          <span\n            className={s.preview}\n            aria-hidden=\"true\"\n            style={{ background: previewOf(value, patchIndex) }}\n          />\n          <div className={s.corners}>\n            {patch.colors.map((color, corner) => (\n              <ColorField\n                key={corner}\n                value={color}\n                alpha\n                aria-label={`Patch ${patchIndex + 1} corner ${corner + 1}`}\n                className={s.corner}\n                onInput={(next) => onInput?.(withCorner(patchIndex, corner, next))}\n                onChange={(next) => onChange(withCorner(patchIndex, corner, next))}\n              />\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {spaceSwitch && (\n        <ToggleBar<ColorSpace>\n          items={SPACES}\n          value={space}\n          size=\"sm\"\n          ariaLabel=\"Blend space\"\n          onChange={(next) => next && onChange(asPaint({ ...value, interpolate: next }))}\n        />\n      )}\n    </div>\n  );\n}\n\n/** One patch as a swatch: the paint with the other patches taken out, so a\n *  multi-patch mesh shows which row belongs to which part of it. */\nfunction previewOf(value: MeshGradientFill, patchIndex: number): string | undefined {\n  return paintPreviewCss(\n    { ...value, patches: [value.patches[patchIndex]] } as unknown as FillStyle,\n  );\n}\n\n/** Narrowing for a consumer rendering this behind a kind switch. */\nexport function isMeshPaint(fill: FillStyle | null | undefined): fill is FillStyle & MeshGradientFill {\n  return isMeshGradientFill(fill);\n}\n","/* The overlay covers the canvas but must not intercept tool input; only the\n * handles opt back into hit-testing. */\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n/* These sit over artwork of unknown color, not over the app's own surface,\n * so they are deliberately not themed: a themed handle disappears against\n * whatever the user painted underneath. White-on-dark reads on anything,\n * which is why every editor draws handles this way. */\n.guide {\n  fill: none;\n  stroke: #ffffff;\n  stroke-opacity: 0.7;\n  stroke-dasharray: 4 4;\n  paint-order: stroke;\n}\n\n.handle {\n  fill: #ffffff;\n  stroke: #222222;\n  stroke-width: 2;\n  cursor: grab;\n  pointer-events: auto;\n}\n\n.handle:active {\n  cursor: grabbing;\n}\n\n.handle:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: 2px;\n}\n\n/* A point that shapes an edge rather than ending one — drawn dark-on-light,\n * the inverse of the handle it hangs off, so the two read apart at a glance. */\n.control {\n  fill: #222222;\n  stroke: #ffffff;\n  stroke-width: 1.5;\n}\n\n/* A patch edge: the outline the handles reshape, solid so it reads as the\n * artwork's structure rather than as a construction line. */\n.edge {\n  fill: none;\n  stroke: #ffffff;\n  stroke-opacity: 0.85;\n  stroke-width: 1;\n}\n","import { useRef, type KeyboardEvent as ReactKeyboardEvent, type ReactElement, type ReactNode } from 'react';\nimport { useHandleDrag } from '@weasel-js/core';\nimport s from './handleOverlay.module.css';\n\n/** The pieces every paint-geometry overlay draws with — `GradientHandles`\n *  and `MeshHandles` — kept here so the two drag, step and look alike. */\n\nexport interface OverlayPoint {\n  x: number;\n  y: number;\n}\n\n/** Which half of a gesture an edit belongs to: a live preview, or the one\n *  write that ends it. */\nexport type EditPhase = 'input' | 'commit';\n\n/** The SVG overlay itself: covers its container, passes pointer input\n *  through everywhere but the handles. */\nexport function HandleOverlay(props: {\n  width: number;\n  height: number;\n  className?: string;\n  children: ReactNode;\n}): ReactElement {\n  return (\n    <svg\n      className={[s.overlay, props.className].filter(Boolean).join(' ')}\n      width={props.width}\n      height={props.height}\n    >\n      {props.children}\n    </svg>\n  );\n}\n\nexport function Guide(props: { x1: number; y1: number; x2: number; y2: number }): ReactElement {\n  return <line className={s.guide} {...props} />;\n}\n\n/** A cubic Bézier edge through four overlay-space points. */\nexport function Edge({ points }: { points: readonly [OverlayPoint, OverlayPoint, OverlayPoint, OverlayPoint] }): ReactElement {\n  const [a, b, c, d] = points;\n  return <path className={s.edge} d={`M${a.x} ${a.y}C${b.x} ${b.y} ${c.x} ${c.y} ${d.x} ${d.y}`} />;\n}\n\n/**\n * One draggable point. `onDrag` receives overlay pixels; a press that never\n * moved writes nothing, and a canceled gesture puts the preview back.\n */\nexport function DragPoint({\n  at,\n  label,\n  radius,\n  variant = 'handle',\n  onDrag,\n}: {\n  at: OverlayPoint;\n  label: string;\n  radius: number;\n  /** `control` draws the inverted style a secondary point wears. */\n  variant?: 'handle' | 'control';\n  onDrag: (p: OverlayPoint, phase: EditPhase) => void;\n}): ReactElement {\n  const start = useRef<OverlayPoint>(at);\n  const drag = useHandleDrag<SVGCircleElement>({\n    onStart: () => { start.current = at; },\n    onMove: (p) => { onDrag(p, 'input'); },\n    onEnd: ({ point, moved }) => {\n      if (moved) onDrag(point, 'commit');\n    },\n    onCancel: () => { onDrag(start.current, 'input'); },\n  });\n  const onKeyDown = (e: ReactKeyboardEvent<SVGCircleElement>): void => {\n    const amount = e.shiftKey ? KEY_STEP * 10 : KEY_STEP;\n    let dx = 0;\n    let dy = 0;\n    if (e.key === 'ArrowLeft') dx = -amount;\n    else if (e.key === 'ArrowRight') dx = amount;\n    else if (e.key === 'ArrowUp') dy = -amount;\n    else if (e.key === 'ArrowDown') dy = amount;\n    else return;\n    e.preventDefault();\n    const next = { x: at.x + dx, y: at.y + dy };\n    onDrag(next, 'input');\n    onDrag(next, 'commit');\n  };\n  return (\n    <circle\n      className={variant === 'control' ? `${s.handle} ${s.control}` : s.handle}\n      cx={at.x}\n      cy={at.y}\n      r={radius}\n      // Not `slider`: the handle carries a 2-D position, not one value, so\n      // it has no `aria-valuenow` to honor the role's contract with.\n      role=\"button\"\n      aria-label={label}\n      tabIndex={0}\n      onKeyDown={onKeyDown}\n      {...drag}\n    />\n  );\n}\n\n/** One arrow-key step, in overlay pixels. */\nconst KEY_STEP = 1;\n","import { type ReactElement } from 'react';\nimport { asPaint, type FillStyle } from '@weasel-js/core';\nimport {\n  meshGuides,\n  meshHandles,\n  moveMeshHandle,\n  type MeshGradientFill,\n  type MeshHandle,\n} from '@weasel-js/core/mesh';\nimport { handleHalf } from '../../handles';\nimport {\n  DragPoint,\n  Edge,\n  Guide,\n  HandleOverlay,\n  type EditPhase,\n  type OverlayPoint as Point,\n} from '../GradientEditor/handleOverlay';\n\n/** Props for {@link MeshHandles}. `onInput` fires throughout a drag and\n *  `onChange` once at its end. */\nexport interface MeshHandlesProps {\n  /** The mesh whose points these handles move, in the space `toScreen`\n   *  maps from. A `units: 'bounds'` mesh is resolved first with\n   *  `fillInPoseFrame(fill, box)`, and edits converted back with\n   *  `fillToBoundsFrame(next, box)`. */\n  value: MeshGradientFill;\n  /** Mesh space → overlay pixels. */\n  toScreen: (p: Point) => Point;\n  /** Overlay pixels → mesh space. Must invert `toScreen`. */\n  toLocal: (p: Point) => Point;\n  /** Live during a drag — wire for preview, do not write to history. Emitted\n   *  as a `FillStyle`, which is what every paint control passes around. */\n  onInput?: (next: FillStyle) => void;\n  /** Committed at drag end: one call per gesture. */\n  onChange: (next: FillStyle) => void;\n  /** Overlay size in CSS pixels. */\n  width: number;\n  height: number;\n  className?: string;\n}\n\nconst CORNER_RADIUS = handleHalf('--wzl-handle-size-lg');\nconst CONTROL_RADIUS = handleHalf('--wzl-handle-size');\n\n/**\n * Direct-manipulation handles for a mesh gradient's geometry, drawn as an\n * SVG overlay: every patch corner, the two controls of each edge, and a\n * tensor patch's interior points, over the patch outlines they shape.\n *\n * Dragging a corner carries its controls with it. Points two patches share\n * are one handle, so a drag moves the seam instead of tearing it.\n *\n * The overlay ignores pointer events except on the handles themselves.\n */\nexport function MeshHandles(props: MeshHandlesProps): ReactElement {\n  const { value, toScreen, toLocal, onInput, onChange, width, height, className } = props;\n  const { edges, arms } = meshGuides(value);\n  const handles = meshHandles(value);\n\n  const emit = (handle: MeshHandle, p: Point, phase: EditPhase): void => {\n    const next = asPaint(moveMeshHandle(value, handle, toLocal(p)));\n    if (phase === 'input') onInput?.(next);\n    else onChange(next);\n  };\n\n  // Corners last, so where a control collapses onto its corner the corner\n  // is the one on top.\n  const ordered = [\n    ...handles.filter((h) => h.kind !== 'corner'),\n    ...handles.filter((h) => h.kind === 'corner'),\n  ];\n\n  return (\n    <HandleOverlay width={width} height={height} className={className}>\n      {edges.map((edge, i) => (\n        // Guides have no identity beyond their place in the walk.\n        <Edge key={`e${i}`} points={[toScreen(edge[0]), toScreen(edge[1]), toScreen(edge[2]), toScreen(edge[3])]} />\n      ))}\n      {arms.map(([from, to], i) => {\n        const a = toScreen(from);\n        const b = toScreen(to);\n        return <Guide key={`a${i}`} x1={a.x} y1={a.y} x2={b.x} y2={b.y} />;\n      })}\n      {ordered.map((handle) => (\n        <DragPoint\n          key={handle.id}\n          at={toScreen(handle.at)}\n          label={labelOf(handle)}\n          radius={handle.kind === 'corner' ? CORNER_RADIUS : CONTROL_RADIUS}\n          variant={handle.kind === 'corner' ? 'handle' : 'control'}\n          onDrag={(p, phase) => emit(handle, p, phase)}\n        />\n      ))}\n    </HandleOverlay>\n  );\n}\n\n/** Numbered in the patch's own walk, matching `MeshEditor`'s corner fields. */\nfunction labelOf(handle: MeshHandle): string {\n  const { patch, index } = handle.refs[0];\n  const prefix = `Patch ${patch + 1}`;\n  if (handle.kind === 'corner') return `${prefix} corner ${index / 3 + 1}`;\n  if (handle.kind === 'interior') return `${prefix} interior ${index - 11}`;\n  return `${prefix} edge ${Math.floor(index / 3) + 1} control ${index % 3}`;\n}\n"],"mappings":"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"}

package/dist/chunks/NumberField-DLXXgh48.js

@@ -0,0 +1,209 @@
+import { t as e } from "./field.module-Bh7BTKMh.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as r, useEffect as i, useRef as a, useState as o } from "react";
+import { Button as s, FieldError as c, Group as l, Input as u, Label as d, NumberField as f, Text as p } from "react-aria-components";
+import { decimal as m, parseAs as h, parseNumber as g, qty as _ } from "@weasel-js/quantity";
+var v = {
+	frame: "_frame_lbxto_1",
+	steppers: "_steppers_lbxto_19",
+	stepper: "_stepper_lbxto_19",
+	ghost: "_ghost_lbxto_69",
+	fit: "_fit_lbxto_92"
+}, y = r(function(r, i) {
+	let { label: a, orientation: o = "stacked", description: m, errorMessage: h, hideSteppers: g, ghost: _, placeholder: y, width: b = "fill", className: x, ...S } = r;
+	return /* @__PURE__ */ n(f, {
+		...S,
+		className: [
+			e.field,
+			e.control,
+			b === "fit" && `${e.fit} ${v.fit}`,
+			o === "row" && e.row,
+			x
+		].filter(Boolean).join(" "),
+		children: [
+			a !== void 0 && /* @__PURE__ */ t(d, {
+				className: e.label,
+				children: a
+			}),
+			/* @__PURE__ */ n(l, {
+				className: [
+					e.frame,
+					v.frame,
+					_ && v.ghost
+				].filter(Boolean).join(" "),
+				children: [/* @__PURE__ */ t(u, {
+					ref: i,
+					placeholder: y
+				}), !g && /* @__PURE__ */ n("div", {
+					className: v.steppers,
+					children: [/* @__PURE__ */ t(s, {
+						slot: "increment",
+						className: v.stepper,
+						"aria-label": "Increment",
+						children: "▲"
+					}), /* @__PURE__ */ t(s, {
+						slot: "decrement",
+						className: v.stepper,
+						"aria-label": "Decrement",
+						children: "▼"
+					})]
+				})]
+			}),
+			m !== void 0 && /* @__PURE__ */ t(p, {
+				slot: "description",
+				className: `${e.hint} ${e.below}`,
+				children: m
+			}),
+			/* @__PURE__ */ t(c, {
+				className: `${e.error} ${e.below}`,
+				children: h
+			})
+		]
+	});
+});
+//#endregion
+//#region src/components/spin.ts
+function b(e, { min: t, max: n }) {
+	return Math.min(n ?? Infinity, Math.max(t ?? -Infinity, e));
+}
+function x(e) {
+	if (!Number.isFinite(e)) return 0;
+	let t = String(e), n = t.indexOf("e-");
+	if (n >= 0) return Math.min(10, Number(t.slice(n + 2)));
+	let r = t.indexOf(".");
+	return r < 0 ? 0 : Math.min(10, t.length - r - 1);
+}
+function S(e, t, n) {
+	let r = (e) => {
+		let r = Math.max(x(t), x(n.step));
+		return b(Number((t + e * n.step).toFixed(r)), n);
+	};
+	switch (e) {
+		case "ArrowUp": return r(1);
+		case "ArrowDown": return r(-1);
+		case "PageUp": return r(10);
+		case "PageDown": return r(-10);
+		case "Home": return n.min ?? null;
+		case "End": return n.max ?? null;
+		default: return null;
+	}
+}
+//#endregion
+//#region src/components/NumberField/UnitField.tsx
+var C = m({
+	maxPlaces: 20,
+	grouping: !1
+}), w = 400, T = 60;
+function E({ value: r, onChange: s, onInput: c, minValue: l, maxValue: u, step: d = 1, accepts: f, display: p = C, placeholder: m, steppers: y, ghost: x, width: E = "fill", className: D, id: O, "aria-label": k }) {
+	let [A, j] = o(null), M = a(!1), N = a(null), P = Number.isFinite(r), F = P ? _(r, p).text : "", I = (e) => f ? g(e, f) : h(e, p), L = {
+		step: d,
+		min: l,
+		max: u
+	}, R = () => {
+		let e = A === null ? r : I(A);
+		return Number.isFinite(e) ? e : Number.isFinite(r) ? r : 0;
+	}, z = (e) => {
+		j(null), c?.(e), e !== r && s(e);
+	}, B = (e) => {
+		let t = S(e, R(), L);
+		return t !== null && (z(t), !0);
+	}, V = a(B);
+	i(() => {
+		V.current = B;
+	}), i(() => {
+		let e = N.current;
+		if (!e) return;
+		let t = (t) => {
+			document.activeElement === e && t.deltaY !== 0 && (t.preventDefault(), V.current(t.deltaY < 0 ? "ArrowUp" : "ArrowDown"));
+		};
+		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
+	}, []);
+	let H = a(null), U = () => {
+		H.current !== null && clearTimeout(H.current), H.current = null;
+	};
+	i(() => U, []);
+	let W = (e) => {
+		U(), V.current(e);
+		let t = (n) => {
+			H.current = setTimeout(() => {
+				V.current(e), t(T);
+			}, n);
+		};
+		t(w);
+	}, G = (e, n, r, i) => /* @__PURE__ */ t("button", {
+		type: "button",
+		className: v.stepper,
+		"aria-label": n,
+		tabIndex: -1,
+		disabled: i,
+		onPointerDown: (t) => {
+			t.preventDefault(), W(e);
+		},
+		onPointerUp: U,
+		onPointerLeave: U,
+		onPointerCancel: U,
+		onClick: (t) => {
+			t.detail === 0 && V.current(e);
+		},
+		children: r
+	});
+	return /* @__PURE__ */ t("div", {
+		className: [
+			e.field,
+			e.control,
+			E === "fit" && `${e.fit} ${v.fit}`,
+			D
+		].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ n("div", {
+			className: [
+				e.frame,
+				v.frame,
+				x && v.ghost
+			].filter(Boolean).join(" "),
+			children: [/* @__PURE__ */ t("input", {
+				ref: N,
+				id: O,
+				type: "text",
+				role: "spinbutton",
+				inputMode: "decimal",
+				autoComplete: "off",
+				"aria-label": k,
+				"aria-valuenow": P ? r : void 0,
+				"aria-valuetext": P ? _(r, p).spoken : void 0,
+				"aria-valuemin": l,
+				"aria-valuemax": u,
+				placeholder: m,
+				value: A ?? F,
+				onChange: (e) => {
+					let t = e.target.value;
+					j(t);
+					let n = I(t);
+					c && t.trim() !== "" && Number.isFinite(n) && c(b(n, L));
+				},
+				onFocus: () => {
+					M.current = !1;
+				},
+				onBlur: () => {
+					if (A !== null && !M.current) {
+						let e = I(A);
+						if (Number.isFinite(e)) {
+							let t = b(e, L);
+							t !== r && s(t);
+						}
+					}
+					j(null);
+				},
+				onKeyDown: (e) => {
+					e.key === "Enter" ? e.currentTarget.blur() : e.key === "Escape" ? (M.current = !0, e.currentTarget.blur()) : B(e.key) && e.preventDefault();
+				}
+			}), y && /* @__PURE__ */ n("div", {
+				className: v.steppers,
+				children: [G("ArrowUp", "Increment", "▲", P && u !== void 0 && r >= u), G("ArrowDown", "Decrement", "▼", P && l !== void 0 && r <= l)]
+			})]
+		})
+	});
+}
+//#endregion
+export { S as n, y as r, E as t };
+
+//# sourceMappingURL=NumberField-DLXXgh48.js.map