@weasel-js/ui 1.6.0 → 1.7.0

package/dist/chunks/ListEditor-BeA60TAA.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListEditor-BeA60TAA.js","names":["s","Button","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  height: var(--wzl-field-h, var(--wzl-control-h));\n  padding: 0 var(--wzl-field-pad-x);\n  background: var(--wzl-input-surface, var(--wzl-surface-sunken));\n  color: var(--wzl-fg);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n}\n\n.input:focus {\n  outline: none;\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\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 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={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":";;;;;;;;;;;;;;AC2BA,SAAgBG,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,CAACf,EAAE,QAAQkB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAAG,MAAK;EAAQ,cAAYd;EAA1F,UAAA,CACGQ,EAAM,WAAW,IAChB,kBAAC,OAAD;GAAK,WAAWZ,EAAE;GAAQ,UAAAmB;EAAW,CAAA,IAErC,kBAAC,MAAD;GAAI,WAAWnB,EAAE;GACd,UAAAY,EAAM,KAAK,GAAO,MAEjB,kBAAC,MAAD;IAAY,WAAWZ,EAAE;IAAzB,UAAA,CACE,kBAAC,SAAD;KACE,MAAM,MAAO;MACX,EAAO,QAAQ,KAAKoB;KACtB;KACA,MAAK;KACL,WAAWpB,EAAE;KACb,cAAYiB,EAAK,CAAC;KAClB,OAAOI;KACM;KACb,WAAW,MAAMV,EAASC,EAAM,KAAK,GAAG,MAAOU,MAAM,IAAI,EAAE,OAAO,QAAQC,CAAE,CAAC;KAC7E,YAAY,MAAMP,EAAU,GAAG,CAAC;IACjC,CAAA,GACD,kBAACQ,GAAD;KAAa,WAAW,UAAUP,EAAK,CAAC;KAAK,eAAeH,EAAO,CAAC;IAAI,CAAA,CACtE;GAdK,GAAA,CAcL,CACL;EACC,CAAA,GAEN,kBAAC,OAAD;GAAK,WAAWd,EAAE;GAChB,UAAA,kBAACC,GAAD;IAAQ,MAAK;IAAK,eAAeS,EAAOE,EAAM,MAAM;IACjD,UAAAa;GACK,CAAA;EACL,CAAA,CACF;;AAET"}

package/dist/chunks/{MenuButton-BcdhrNGh.js → MenuButton-BSqEChJE.js}

@@ -1,14 +1,14 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { n as t, r as n } from "./segmentTooltip-CAkZlW-t.js";
+import { r as e } from "./portalHost-yTOVuCej.js";
+import { n as t, r as n } from "./segmentTooltip-CStYHKzd.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Button as a, Menu as o, MenuItem as s, MenuTrigger as c, Popover as l } from "react-aria-components";
 var u = {
-	trigger: "_trigger_1wmxr_1",
-	label: "_label_1wmxr_30",
-	chevron: "_chevron_1wmxr_34",
-	popover: "_popover_1wmxr_41",
-	menu: "_menu_1wmxr_47",
-	item: "_item_1wmxr_60"
+	trigger: "_trigger_djrlo_1",
+	label: "_label_djrlo_30",
+	chevron: "_chevron_djrlo_34",
+	popover: "_popover_djrlo_41",
+	menu: "_menu_djrlo_47",
+	item: "_item_djrlo_60"
 };
 //#endregion
 //#region src/components/MenuButton/MenuButton.tsx
@@ -67,4 +67,4 @@ function d({ label: d, items: f, onAction: p, isDisabled: m, className: h, "aria
 //#endregion
 export { d as t };
 
-//# sourceMappingURL=MenuButton-BcdhrNGh.js.map
+//# sourceMappingURL=MenuButton-BSqEChJE.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton-BSqEChJE.js","names":["RACButton","s","RACPopover","RACMenu","RACMenuItem","useOverlayPortal","TriggerTooltip","segmentTooltipContent","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  height: var(--wzl-control-h);\n  padding: 0 var(--wzl-space-3) 0 var(--wzl-space-5);\n  background: var(--wzl-input-surface, 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  white-space: nowrap;\n  cursor: pointer;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.trigger[data-focus-visible] {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.trigger[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\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.menu {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n  padding: var(--wzl-space-2);\n  max-height: 280px;\n  overflow: auto;\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\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 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={[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={s.menu} 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":";;;;;;;;;;;;;;AC0CA,SAAgBS,EAAsC,EACpD,UACA,UACA,aACA,eACA,cACA,cAAcC,GACd,oBACA,aACA,cACqB;CACrB,IAAM,EAAE,WAAQ,mBAAgBL,EAAiBM,CAAe;CAChE,OACE,kBAACC,GAAD,EAAA,UAAA;EACGC;EACD,kBAACP,GAAD;GACE,SAASC,EAAsB;IAAE;IAAS;IAAU;IAAW;GAAM,CAAC;GACtE,UAAUO;GAEV,UAAA,kBAACd,GAAD;IACE,WAAW,CAACC,EAAE,SAASe,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;IAC9C;IACZ,cAAYN;IAHd,UAAA,CAKE,kBAAC,QAAD;KAAM,WAAWT,EAAE;KAAQ,UAAAgB;IAAY,CAAA,GACvC,kBAAC,OAAD;KAAK,WAAWhB,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,GAAIkB;GAC3D,UAAA,kBAAChB,GAAD;IAAS,WAAWF,EAAE;IAAM,WAAW,MAAQoB,EAASC,CAAQ;IAC7D,UAAAC,EAAM,KAAK,MACV,kBAACnB,GAAD;KAEE,IAAIqB,EAAK;KACT,WAAWxB,EAAE;KACb,YAAYwB,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-BOOIFWnz.js → MeshEditor-D1HLZcAh.js}

@@ -1,6 +1,6 @@
-import { t as e } from "./ColorField-DJSCuSJv.js";
-import { t } from "./paintPreview-DPtZS4yU.js";
-import { t as n } from "./ToggleBar-Btnl5r7F.js";
+import { t as e } from "./ColorField-Yz_BkcCT.js";
+import { t } from "./paintPreview-CuSZiHpR.js";
+import { t as n } from "./ToggleBar-BTYkBXU9.js";
 import { asPaint as r, isMeshGradientFill as i } from "@weasel-js/core";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import "react";
@@ -84,4 +84,4 @@ function d(e) {
 //#endregion
 export { d as n, l as t };
 
-//# sourceMappingURL=MeshEditor-BOOIFWnz.js.map
+//# sourceMappingURL=MeshEditor-D1HLZcAh.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MeshEditor-D1HLZcAh.js","names":["s","ColorField","ToggleBar","MeshEditor_module_default","SPACES","MeshEditor","props","space","value","withCorner","asPaint","patchIndex","patch","b","c","d","next","corner","color","className","previewOf","onInput","onChange","spaceSwitch","paintPreviewCss","isMeshPaint","isMeshGradientFill","fill"],"sources":["../../src/components/MeshEditor/MeshEditor.module.css","../../src/components/MeshEditor/MeshEditor.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 {\n  asPaint,\n  isMeshGradientFill,\n  type ColorSpace,\n  type FillStyle,\n  type MeshGradientFill,\n} from '@weasel-js/core';\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, not a\n * 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"],"mappings":";;;;;;;;;;;;GCaMI,IAA+C;CACnD;EAAE,OAAO;EAAO,OAAO;CAAO;CAC9B;EAAE,OAAO;EAAS,OAAO;CAAQ;CACjC;EAAE,OAAO;EAAS,OAAO;CAAQ;AACnC;AA2BA,SAAgBC,EAAW,GAAsC;CAC/D,IAAM,EAAE,UAAO,YAAS,aAAU,iBAAc,IAAM,iBAAcC,GAC9DC,IAAQC,EAAM,eAAe,OAE7BC,KAAc,GAAoB,GAAgB,MAA6BC,EAAQ;EAC3F,GAAGF;EACH,SAASA,EAAM,QAAQ,KAAK,GAAO,MAAM;GACvC,IAAI,MAAMG,GAAY,OAAOC;GAC7B,IAAM,CAAC,GAAGC,GAAGC,GAAGC,KAAKH,EAAM,QACrBI,IAAyC;IAAC;IAAGH;IAAGC;IAAGC;GAAC;GAE1D,OADA,EAAKE,KAAUC,GACR;IAAE,GAAGN;IAAO,QAAQI;GAAK;EAClC,CAAC;CACH,CAAC;CAED,OACE,kBAAC,OAAD;EAAK,WAAW,CAAChB,EAAE,MAAMmB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAA5D,UAAA,CACGX,EAAM,QAAQ,KAAK,GAAO,MAGzB,kBAAC,OAAD;GAAsB,WAAWR,EAAE;GAAnC,UAAA,CACE,kBAAC,QAAD;IACE,WAAWA,EAAE;IACb,eAAY;IACZ,OAAO,EAAE,YAAYoB,EAAUZ,GAAOG,CAAU,EAAE;GACnD,CAAA,GACD,kBAAC,OAAD;IAAK,WAAWX,EAAE;IACf,UAAAY,EAAM,OAAO,KAAK,GAAO,MACxB,kBAACX,GAAD;KAEE,OAAOiB;KACP,OAAA;KACA,cAAY,SAASP,IAAa,EAAE,UAAUM,IAAS;KACvD,WAAWjB,EAAE;KACb,UAAU,MAASqB,IAAUZ,EAAWE,GAAYM,GAAQD,CAAI,CAAC;KACjE,WAAW,MAASM,EAASb,EAAWE,GAAYM,GAAQD,CAAI,CAAC;IAClE,GAPMC,CAON,CACF;GACE,CAAA,CACF;EAnBK,GAAAN,CAmBL,CACN,GAEAY,KACC,kBAACrB,GAAD;GACE,OAAOE;GACP,OAAOG;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAASS,KAAQM,EAASZ,EAAQ;IAAE,GAAGF;IAAO,aAAaQ;GAAK,CAAC,CAAC;EAC9E,CAAA,CAEA;;AAET;AAIA,SAASI,EAAU,GAAyB,GAAwC;CAClF,OAAOI,EACL;EAAE,GAAGhB;EAAO,SAAS,CAACA,EAAM,QAAQG,EAAW;CAAE,CACnD;AACF;AAGA,SAAgBc,EAAY,GAA0E;CACpG,OAAOC,EAAmBC,CAAI;AAChC"}

package/dist/chunks/NumberField-BnJxcazc.js

@@ -0,0 +1,206 @@
+import { n as e } from "./Field--onYxXTF.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 = {
+	field: "_field_hpkvf_1",
+	row: "_row_hpkvf_12",
+	label: "_label_hpkvf_19",
+	fit: "_fit_hpkvf_20",
+	frame: "_frame_hpkvf_20",
+	below: "_below_hpkvf_22",
+	steppers: "_steppers_hpkvf_72",
+	stepper: "_stepper_hpkvf_72",
+	ghost: "_ghost_hpkvf_122"
+}, 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: [
+			v.field,
+			b === "fit" && v.fit,
+			e.root,
+			o === "row" && e.row,
+			o === "row" && v.row,
+			x
+		].filter(Boolean).join(" "),
+		children: [
+			a !== void 0 && /* @__PURE__ */ t(d, {
+				className: `${e.label} ${v.label}`,
+				children: a
+			}),
+			/* @__PURE__ */ n(l, {
+				className: _ ? `${v.frame} ${v.ghost}` : v.frame,
+				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} ${v.below}`,
+				children: m
+			}),
+			/* @__PURE__ */ t(c, {
+				className: `${e.error} ${v.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: [
+			v.field,
+			E === "fit" && v.fit,
+			e.root,
+			D
+		].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ n("div", {
+			className: x ? `${v.frame} ${v.ghost}` : v.frame,
+			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-BnJxcazc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField-BnJxcazc.js","names":["NumberField","RACNumberField","s","RACInput","RACButton","s","fieldClasses","NumberField_module_default","NumberField$1","forwardRef","rest","props","NumberField","width","orientation","className","label","Label","Group","ghost","Input","hideSteppers","Button","description","Text","FieldError","errorMessage","clampToBounds","max","min","n","placesOf","text","e","dot","spinKey","by","places","from","bounds","key","FULL_PRECISION","decimal","REPEAT_DELAY_MS","REPEAT_EVERY_MS","UnitField","ariaLabel","draft","setDraft","useState","canceled","useRef","input","known","value","qty","display","read","accepts","parseNumber","typed","parseAs","minValue","maxValue","stepTo","onInput","next","onChange","spin","latestSpin","useEffect","el","onWheel","repeat","stopRepeat","startRepeat","tick","delay","stepper","atBound","glyph","steppers"],"sources":["../../src/components/NumberField/NumberField.module.css","../../src/components/NumberField/NumberField.tsx","../../src/components/spin.ts","../../src/components/NumberField/UnitField.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: var(--wzl-space-2);\n}\n\n/* `orientation='row'`: the label keeps its own width and the field takes the\n   rest; description and error wrap onto a line of their own. A `fit` field\n   keeps its own width and centers on the label instead. */\n.field.row {\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: wrap;\n  column-gap: var(--wzl-space-4);\n  row-gap: var(--wzl-space-2);\n}\n.field.row .label { flex: 0 0 auto; }\n.field.row:not(.fit) .frame { flex: 1 1 0; min-width: 0; }\n.field.row.fit { align-items: center; }\n.field.row .below { flex-basis: 100%; }\n\n.frame {\n  display: flex;\n  align-items: stretch;\n  height: var(--wzl-field-h, var(--wzl-control-h));\n  background: var(--wzl-input-surface, 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 var(--wzl-field-pad-x);\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: var(--wzl-control-h-xs);\n  flex: 1;\n  /* The two share the frame's height; left to their glyphs' line boxes they\n     overflow it, and the frame clips the lower one. */\n  min-height: 0;\n  height: auto;\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n  font: inherit;\n  font-size: min(var(--wzl-font-size-2xs), calc(var(--wzl-field-h, var(--wzl-control-h)) * 0.35));\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.stepper:hover:not(:disabled):not([data-rac]) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.stepper[data-pressed]:not([data-disabled]),\n.stepper:active:not(:disabled):not([data-rac]) {\n  background: var(--wzl-surface-pressed);\n}\n\n.stepper[data-disabled],\n.stepper:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* Mirrors the property rows' editable readout (`.readoutInput`), so a number\n   sitting inside other chrome does not draw a second box around itself. */\n.ghost {\n  height: auto;\n  background: transparent;\n  border-color: transparent;\n  color: var(--wzl-accent-fg);\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.ghost input {\n  padding: 1px 0;\n}\n\n.ghost:hover {\n  background: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.ghost:focus-within {\n  background: var(--wzl-surface-sunken);\n  border-color: var(--wzl-focus-ring);\n  box-shadow: none;\n}\n\n/* `width='fit'` states the field's width in characters: left alone an `<input>`\n   asks for its 20-character intrinsic width, wider than most rows it sits in. */\n.fit {\n  width: auto;\n  max-width: 100%;\n  align-items: flex-start;\n}\n\n.fit .frame {\n  width: fit-content;\n  max-width: 100%;\n}\n\n.fit .frame input {\n  flex: 0 0 auto;\n  width: var(--wzl-number-field-width, 9ch);\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, type FieldOrientation } 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  /**\n   * `'stacked'` (the default) puts the label above the field; `'row'` sets it\n   * beside the field at its own width, with any description or error on a\n   * line below. Same vocabulary as {@link Field}'s `orientation`.\n   */\n  orientation?: FieldOrientation;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  /** Hide the up/down stepper buttons. Defaults to false. */\n  hideSteppers?: boolean;\n  /** Render with no box until focused — the readout treatment the property\n   *  rows use, for a value that sits inside other chrome rather than in a form. */\n  ghost?: boolean;\n  /** Native input placeholder — e.g. `'Mixed'` for a multi-selection\n   *  editor with no shared value. */\n  placeholder?: string;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the field sits in.\n   * `'fit'` sizes it to `--wzl-number-field-width` (`9ch` by default) plus its\n   * own chrome, rather than to the input's 20-character intrinsic width.\n   */\n  width?: 'fill' | 'fit';\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 {\n    label,\n    orientation = 'stacked',\n    description,\n    errorMessage,\n    hideSteppers,\n    ghost,\n    placeholder,\n    width = 'fill',\n    className,\n    ...rest\n  } = props;\n  return (\n    <RACNumberField\n      {...rest}\n      className={[\n        s.field,\n        width === 'fit' && s.fit,\n        fieldClasses.root,\n        orientation === 'row' && fieldClasses.row,\n        orientation === 'row' && s.row,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {label !== undefined && <Label className={`${fieldClasses.label} ${s.label}`}>{label}</Label>}\n      <Group className={ghost ? `${s.frame} ${s.ghost}` : 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} ${s.below}`}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={`${fieldClasses.error} ${s.below}`}>{errorMessage}</FieldError>\n    </RACNumberField>\n  );\n});\n","/** The bounds a spin key moves a value within. */\nexport interface SpinBounds {\n  step: number;\n  min?: number;\n  max?: number;\n}\n\n/** `n` held within the bounds. */\nexport function clampToBounds(n: number, { min, max }: SpinBounds): number {\n  return Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));\n}\n\n/** Decimal places `n` is written with, up to ten. */\nfunction placesOf(n: number): number {\n  if (!Number.isFinite(n)) return 0;\n  const text = String(n);\n  const e = text.indexOf('e-');\n  if (e >= 0) return Math.min(10, Number(text.slice(e + 2)));\n  const dot = text.indexOf('.');\n  return dot < 0 ? 0 : Math.min(10, text.length - dot - 1);\n}\n\n/**\n * The value a spin-button key moves `from` to, or `null` for a key that does\n * not spin: the arrows by a step, Page Up and Page Down by ten, and Home and\n * End to a bound, where there is one. A sum of steps is rounded to the places\n * its operands carry, so `0.1 + 0.2` lands on `0.3`.\n */\nexport function spinKey(key: string, from: number, bounds: SpinBounds): number | null {\n  const by = (n: number) => {\n    const places = Math.max(placesOf(from), placesOf(bounds.step));\n    return clampToBounds(Number((from + n * bounds.step).toFixed(places)), bounds);\n  };\n  switch (key) {\n    case 'ArrowUp':\n      return by(1);\n    case 'ArrowDown':\n      return by(-1);\n    case 'PageUp':\n      return by(10);\n    case 'PageDown':\n      return by(-10);\n    case 'Home':\n      return bounds.min ?? null;\n    case 'End':\n      return bounds.max ?? null;\n    default:\n      return null;\n  }\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { decimal, parseAs, parseNumber, qty, type Display, type UnitTable } from '@weasel-js/quantity';\nimport { fieldClasses } from '../Field/Field';\nimport { clampToBounds, spinKey } from '../spin';\nimport s from './NumberField.module.css';\n\n/** Props for {@link UnitField}. */\nexport interface UnitFieldProps {\n  /** The value in the unit the field shows. NaN shows an empty field. */\n  value: number;\n  /** The committed value, read and clamped, in the unit the field shows: on\n   *  blur or Enter, and on every step. */\n  onChange: (value: number) => void;\n  /** The live value: every keystroke that reads as a number, and every step. */\n  onInput?: (value: number) => void;\n  minValue?: number;\n  maxValue?: number;\n  /** What an arrow key, a stepper or a wheel notch adds or takes away; Page Up\n   *  and Page Down move ten. Defaults to 1. */\n  step?: number;\n  /** Units a person may type, each mapped to the factor that turns a number\n   *  in it into the unit the field shows: `{ mm: 0.1, cm: 1 }`. */\n  accepts?: Readonly<UnitTable>;\n  /** How the value shows, is spoken, and reads back when typed: `fraction()`\n   *  shows `1/12` and reads `1/12` typed. `accepts`, when given, does the\n   *  reading instead. Default: the number with every decimal it has. */\n  display?: Display;\n  placeholder?: string;\n  /** Up and down buttons beside the value, which repeat while held. */\n  steppers?: boolean;\n  /** Render with no box until focused, as {@link NumberField}'s `ghost` does. */\n  ghost?: boolean;\n  /** As {@link NumberField}'s `width`. */\n  width?: 'fill' | 'fit';\n  className?: string;\n  /** Id for the input, for a `<label htmlFor>` outside it. */\n  id?: string;\n  'aria-label'?: string;\n}\n\nconst FULL_PRECISION = decimal({ maxPlaces: 20, grouping: false });\n\nconst REPEAT_DELAY_MS = 400;\nconst REPEAT_EVERY_MS = 60;\n\n/**\n * A number typed as text, so it can carry a unit: `12mm` in a field showing\n * centimeters commits `1.2`. Commits on blur or Enter, reverts on Escape or on\n * text it cannot read, and clamps to its bounds. Steps like a spin button —\n * arrows, Page Up and Down, Home and End to a bound, the wheel while focused,\n * and optional steppers. React Aria's `NumberField` refuses letters as they\n * are typed, which is why this is not that.\n */\nexport function UnitField({\n  value,\n  onChange,\n  onInput,\n  minValue,\n  maxValue,\n  step = 1,\n  accepts,\n  display = FULL_PRECISION,\n  placeholder,\n  steppers,\n  ghost,\n  width = 'fill',\n  className,\n  id,\n  'aria-label': ariaLabel,\n}: UnitFieldProps) {\n  const [draft, setDraft] = useState<string | null>(null);\n  const canceled = useRef(false);\n  const input = useRef<HTMLInputElement>(null);\n  const known = Number.isFinite(value);\n  const text = known ? qty(value, display).text : '';\n  const read = (typed: string) => (accepts ? parseNumber(typed, accepts) : parseAs(typed, display));\n  const bounds = { step, min: minValue, max: maxValue };\n\n  // What a step starts from: the text as typed where it reads, else the value.\n  const from = (): number => {\n    const typed = draft === null ? value : read(draft);\n    return Number.isFinite(typed) ? typed : Number.isFinite(value) ? value : 0;\n  };\n  const stepTo = (next: number) => {\n    setDraft(null);\n    onInput?.(next);\n    if (next !== value) onChange(next);\n  };\n  const spin = (key: string): boolean => {\n    const next = spinKey(key, from(), bounds);\n    if (next === null) return false;\n    stepTo(next);\n    return true;\n  };\n\n  // The latest `spin`, for the listeners below, which outlive a render.\n  const latestSpin = useRef(spin);\n  useEffect(() => {\n    latestSpin.current = spin;\n  });\n\n  // The wheel steps only a focused field, so scrolling past one changes nothing.\n  // Not passive, so it can keep the page from scrolling under it.\n  useEffect(() => {\n    const el = input.current;\n    if (!el) return;\n    const onWheel = (e: WheelEvent) => {\n      if (document.activeElement !== el || e.deltaY === 0) return;\n      e.preventDefault();\n      latestSpin.current(e.deltaY < 0 ? 'ArrowUp' : 'ArrowDown');\n    };\n    el.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.removeEventListener('wheel', onWheel);\n  }, []);\n\n  const repeat = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const stopRepeat = () => {\n    if (repeat.current !== null) clearTimeout(repeat.current);\n    repeat.current = null;\n  };\n  useEffect(() => stopRepeat, []);\n  const startRepeat = (key: 'ArrowUp' | 'ArrowDown') => {\n    stopRepeat();\n    latestSpin.current(key);\n    const tick = (delay: number) => {\n      repeat.current = setTimeout(() => {\n        latestSpin.current(key);\n        tick(REPEAT_EVERY_MS);\n      }, delay);\n    };\n    tick(REPEAT_DELAY_MS);\n  };\n  const stepper = (key: 'ArrowUp' | 'ArrowDown', label: string, glyph: string, atBound: boolean) => (\n    <button\n      type=\"button\"\n      className={s.stepper}\n      aria-label={label}\n      tabIndex={-1}\n      disabled={atBound}\n      // Keeps focus in the input, where a press on the button would take it.\n      onPointerDown={(e) => {\n        e.preventDefault();\n        startRepeat(key);\n      }}\n      onPointerUp={stopRepeat}\n      onPointerLeave={stopRepeat}\n      onPointerCancel={stopRepeat}\n      // A click with no pointer down before it — assistive tech, or a test.\n      onClick={(e) => {\n        if (e.detail === 0) latestSpin.current(key);\n      }}\n    >\n      {glyph}\n    </button>\n  );\n\n  return (\n    <div\n      className={[s.field, width === 'fit' && s.fit, fieldClasses.root, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={ghost ? `${s.frame} ${s.ghost}` : s.frame}>\n        <input\n          ref={input}\n          id={id}\n          type=\"text\"\n          role=\"spinbutton\"\n          inputMode=\"decimal\"\n          autoComplete=\"off\"\n          aria-label={ariaLabel}\n          aria-valuenow={known ? value : undefined}\n          aria-valuetext={known ? qty(value, display).spoken : undefined}\n          aria-valuemin={minValue}\n          aria-valuemax={maxValue}\n          placeholder={placeholder}\n          value={draft ?? text}\n          onChange={(e) => {\n            const typed = e.target.value;\n            setDraft(typed);\n            const n = read(typed);\n            if (onInput && typed.trim() !== '' && Number.isFinite(n)) onInput(clampToBounds(n, bounds));\n          }}\n          onFocus={() => {\n            canceled.current = false;\n          }}\n          onBlur={() => {\n            if (draft !== null && !canceled.current) {\n              const n = read(draft);\n              if (Number.isFinite(n)) {\n                const next = clampToBounds(n, bounds);\n                if (next !== value) onChange(next);\n              }\n            }\n            setDraft(null);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.currentTarget.blur();\n            } else if (e.key === 'Escape') {\n              canceled.current = true;\n              e.currentTarget.blur();\n            } else if (spin(e.key)) {\n              e.preventDefault();\n            }\n          }}\n        />\n        {steppers && (\n          <div className={s.steppers}>\n            {stepper('ArrowUp', 'Increment', '▲', known && maxValue !== undefined && value >= maxValue)}\n            {stepper('ArrowDown', 'Decrement', '▼', known && minValue !== undefined && value <= minValue)}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{OptionsBar-DlcagPYK.js → OptionsBar-ujxYidhj.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./useRovingTabIndex-B4uJqiKP.js";
-import { t } from "./segmentedControl.module-D2nw68Yo.js";
+import { t as e } from "./useRovingTabIndex-Bp_hYm_h.js";
+import { t } from "./segmentedControl.module-D6SzYJD7.js";
 import { jsx as n } from "react/jsx-runtime";
 import "react";
 //#region src/components/OptionsBar/OptionsBar.tsx
@@ -42,4 +42,4 @@ function r(r) {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=OptionsBar-DlcagPYK.js.map
+//# sourceMappingURL=OptionsBar-ujxYidhj.js.map

package/dist/chunks/OptionsBar-ujxYidhj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsBar-ujxYidhj.js","names":["s","useRovingTabIndex","OptionsBar","props","toggle","item","items","index","roving","segmentedControl_module_default","style","height","rootCls","size","variant","className","ariaLabel","cls","i"],"sources":["../../src/components/OptionsBar/OptionsBar.tsx"],"sourcesContent":["import { type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport s from '../segmentedControl.module.css';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\n\n/**\n * One segment of an {@link OptionsBar}. Unlike `ToggleBar`, each item carries\n * its own selected state and its own `onChange`.\n */\nexport type OptionsBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n  selected: boolean;\n  onChange: (next: boolean) => void;\n};\n\n/** Segment height and type scale for an {@link OptionsBar}. */\nexport type OptionsBarSize = 'sm' | 'md';\n/** Visual treatment of an {@link OptionsBar}. */\nexport type OptionsBarVariant = 'default' | 'minimal';\n\n/** Props for {@link OptionsBar}. */\nexport type OptionsBarProps<V extends string | number = string> = {\n  items: readonly OptionsBarItem<V>[];\n  ariaLabel?: string;\n  className?: string;\n  height?: number;\n  /** Size variant. `sm` is ~60% of the default height with reduced padding\n   *  and font size — sized for dense surfaces like lab control panels. */\n  size?: OptionsBarSize;\n  /** Visual variant. `minimal` strips the pill track and glass treatment;\n   *  selection becomes a flat accent. For dense diagnostic surfaces. */\n  variant?: OptionsBarVariant;\n};\n\n/**\n * Segmented strip of independent on/off options, each owning its own state.\n * Use it when the segments are unrelated booleans; use `ToggleBar` when they\n * are values of one setting.\n */\nexport function OptionsBar<V extends string | number = string>(props: OptionsBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n\n  const toggle = (index: number) => {\n    const item = items[index];\n    if (item.disabled) return;\n    item.onChange(!item.selected);\n  };\n\n  const roving = useRovingTabIndex({ items, itemClassName: s.segment, onActivate: toggle });\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--wzl-tb-height' as string]: `${height}px` } as CSSProperties)\n    : undefined;\n\n  const rootCls = [\n    s.root,\n    size && s[`size_${size}`],\n    variant && s[`variant_${variant}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      ref={roving.rootRef}\n      className={rootCls}\n      role=\"group\"\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {items.map((item, i) => {\n        const cls = `${s.segment}${item.selected ? ` ${s.segmentSelected}` : ''}`;\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            aria-pressed={item.selected}\n            aria-label={item.ariaLabel}\n            disabled={item.disabled}\n            tabIndex={roving.tabIndexFor(i)}\n            className={cls}\n            onClick={() => toggle(i)}\n            onKeyDown={roving.onKeyDown(i)}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAyCA,SAAgBE,EAA+C,GAAyC;CACtG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAYC,GAEzDC,KAAU,MAAkB;EAChC,IAAMC,IAAOC,EAAMC;EACnB,AAAIF,EAAK,YACTA,EAAK,SAAS,CAACA,EAAK,QAAQ;CAC9B,GAEMG,IAASP,EAAkB;EAAE;EAAO,eAAeD,EAAE;EAAS,YAAYI;CAAO,CAAC,GAElFM,IAAmCC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,mBAA8B,GAAGA,EAAO,IAAI,GAG9CC,IAAU;EACdZ,EAAE;EACFa,KAAQb,EAAE,QAAQa;EAClBC,KAAWd,EAAE,WAAWc;EACxBC;CACF,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE1B,OACE,kBAAC,OAAD;EACE,KAAKP,EAAO;EACZ,WAAWI;EACX,MAAK;EACL,cAAYI;EACL;EAEN,UAAAV,EAAM,KAAK,GAAM,MAAM;GACtB,IAAMW,IAAM,GAAGjB,EAAE,UAAUK,EAAK,WAAW,IAAIL,EAAE,oBAAoB;GACrE,OACE,kBAAC,UAAD;IAEE,MAAK;IACL,gBAAcK,EAAK;IACnB,cAAYA,EAAK;IACjB,UAAUA,EAAK;IACf,UAAUG,EAAO,YAAYU,CAAC;IAC9B,WAAWD;IACX,eAAeb,EAAOc,CAAC;IACvB,WAAWV,EAAO,UAAUU,CAAC;IAE5B,UAAAb,EAAK;GACA,GAXDA,EAAK,KAWJ;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/chunks/{PaintField-B2mLRZa4.js → PaintField-DadOELMg.js}

@@ -1,6 +1,6 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { t } from "./paintPreview-DPtZS4yU.js";
-import { t as n } from "./PaintInput-BFKhd83I.js";
+import { r as e } from "./portalHost-yTOVuCej.js";
+import { t } from "./paintPreview-CuSZiHpR.js";
+import { t as n } from "./PaintInput-v8Y7MDbH.js";
 import { getPaintKind as r } from "@weasel-js/core";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import "react";
@@ -59,4 +59,4 @@ function f(r) {
 //#endregion
 export { f as t };
 
-//# sourceMappingURL=PaintField-B2mLRZa4.js.map
+//# sourceMappingURL=PaintField-DadOELMg.js.map

package/dist/chunks/PaintField-DadOELMg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintField-DadOELMg.js","names":["RACButton","s","RACPopover","RACDialog","useOverlayPortal","PaintInput","PaintField_module_default","kindLabel","mixed","paint","getPaintKind","PaintField","props","ariaLabel","portalContainer","preview","paintPreviewCss","value","DialogTrigger","anchor","Button","className","unset","Popover","portalProps","Dialog"],"sources":["../../src/components/PaintField/PaintField.module.css","../../src/components/PaintField/PaintField.tsx"],"sourcesContent":[".trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  inline-size: 100%;\n  min-inline-size: 0;\n  padding: 1px var(--wzl-space-3) 1px 1px;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  background: var(--wzl-surface);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n  cursor: pointer;\n}\n\n.trigger[data-unset] {\n  opacity: 0.6;\n}\n\n.trigger[data-focus-visible] {\n  outline: none;\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.swatch {\n  /* A paint preview at a fixed 26:18 aspect, not a control box. */\n  inline-size: 26px;\n  block-size: 18px; /* not-a-control */\n  flex: 0 0 auto;\n  border-radius: calc(var(--wzl-radius-sm) - var(--wzl-border-w));\n  /* Checker under the paint, so a translucent one reads as translucent. */\n  background-color: var(--wzl-surface-raised);\n  box-shadow: inset 0 0 0 1px var(--wzl-border);\n}\n\n/* No paint to show: the checker stands in rather than an invented color. */\n.swatch[data-empty],\n.trigger[data-mixed] .swatch {\n  background: repeating-conic-gradient(\n      var(--wzl-checker-a) 0% 25%,\n      var(--wzl-checker-b) 0% 50%\n    )\n    50% / var(--wzl-checker-size) var(--wzl-checker-size);\n}\n\n.label {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: start;\n}\n\n.popover {\n  outline: none;\n}\n\n.body {\n  inline-size: 240px;\n  padding: var(--wzl-space-4);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  background: var(--wzl-surface-raised);\n  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n}\n","import { type ReactElement } from 'react';\nimport {\n  Button as RACButton,\n  Dialog as RACDialog,\n  DialogTrigger,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { getPaintKind, type FillStyle, type PaintKind } from '@weasel-js/core';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport { paintPreviewCss } from '../../paintPreview';\nimport { PaintInput } from '../PaintInput';\nimport s from './PaintField.module.css';\n\n/** Props for {@link PaintField}. `onInput` fires throughout a gesture inside\n *  the popover and `onChange` once at its end. */\nexport interface PaintFieldProps extends OverlayPortalProps {\n  /** The paint being edited. `null` is an explicit \"no paint\"; `undefined` is\n   *  no value to show. */\n  value: FillStyle | null | undefined;\n  /** Indeterminate presentation: the trigger says \"Mixed\" and the editor\n   *  lights no kind. */\n  mixed?: boolean;\n  /** Dim the trigger — a value is in effect but was never chosen. */\n  unset?: boolean;\n  /** Restrict the editor's kind bar. Default: every registered kind. */\n  kinds?: readonly PaintKind[];\n  /** Offer \"None\" in the editor. Default `true`. */\n  allowNone?: boolean;\n  onInput?: (next: FillStyle | null) => void;\n  onChange: (next: FillStyle | null) => void;\n  /** Names the paint this field edits — `Fill`, `Color`. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** What the trigger says it is holding. */\nfunction kindLabel(paint: FillStyle | null | undefined, mixed: boolean): string {\n  if (mixed) return 'Mixed';\n  if (paint === null) return 'None';\n  if (paint === undefined) return '—';\n  return getPaintKind(paint.fill ?? 'solid')?.label ?? (paint.fill ?? 'solid');\n}\n\n/**\n * A whole `FillStyle` in one control slot: a swatch that says which kind it\n * holds, and a popover holding {@link PaintInput}.\n *\n * `PaintInput` itself is a kind bar over a body — six segments and a stop\n * editor — which a property row's control column cannot hold. This is the\n * shape for a narrow slot, and the difference that matters is fidelity: a\n * `ColorField` in that slot reads a gradient's first stop and writes a solid\n * back, so touching the control loses the paint.\n */\nexport function PaintField(props: PaintFieldProps): ReactElement {\n  const {\n    value, mixed = false, unset = false, kinds, allowNone = true,\n    onInput, onChange, className, portalContainer,\n  } = props;\n  const ariaLabel = props['aria-label'];\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n  const preview = mixed ? undefined : paintPreviewCss(value);\n\n  return (\n    <DialogTrigger>\n      {anchor}\n      <RACButton\n        className={[s.trigger, className].filter(Boolean).join(' ')}\n        aria-label={ariaLabel}\n        {...(unset ? { 'data-unset': '' } : {})}\n        {...(mixed ? { 'data-mixed': '' } : {})}\n      >\n        <span\n          className={s.swatch}\n          aria-hidden=\"true\"\n          {...(preview ? { style: { background: preview } } : { 'data-empty': '' })}\n        />\n        <span className={s.label}>{kindLabel(value, mixed)}</span>\n      </RACButton>\n      {/* `data-weasel-overlay`: see Select — the popover renders in a portal,\n          outside the subtree the trigger sits in. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACDialog className={s.body} aria-label={ariaLabel ? `${ariaLabel} editor` : 'Paint editor'}>\n          <PaintInput\n            value={value}\n            mixed={mixed}\n            unset={unset}\n            kinds={kinds}\n            allowNone={allowNone}\n            onInput={onInput}\n            onChange={onChange}\n            aria-label={ariaLabel}\n          />\n        </RACDialog>\n      </RACPopover>\n    </DialogTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;ACoCA,SAASO,EAAU,GAAqC,GAAwB;CAI9E,OAHIC,IAAc,UACdC,MAAU,OAAa,SACvBA,MAAU,KAAA,IAAkB,MACzBC,EAAaD,EAAM,QAAQ,OAAO,CAAC,EAAE,SAAUA,EAAM,QAAQ;AACtE;AAYA,SAAgBE,EAAW,GAAsC;CAC/D,IAAM,EACJ,UAAO,WAAQ,IAAO,WAAQ,IAAO,UAAO,eAAY,IACxD,YAAS,aAAU,cAAW,uBAC5BC,GACEC,IAAYD,EAAM,eAClB,EAAE,WAAQ,mBAAgBR,EAAiBU,CAAe,GAC1DC,IAAUP,IAAQ,KAAA,IAAYQ,EAAgBC,CAAK;CAEzD,OACE,kBAACC,GAAD,EAAA,UAAA;EACGC;EACD,kBAACnB,GAAD;GACE,WAAW,CAACC,EAAE,SAASoB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAC1D,cAAYR;GACZ,GAAKS,IAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;GACrC,GAAKd,IAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;GAJvC,UAAA,CAME,kBAAC,QAAD;IACE,WAAWP,EAAE;IACb,eAAY;IACZ,GAAKc,IAAU,EAAE,OAAO,EAAE,YAAYA,EAAQ,EAAE,IAAI,EAAE,cAAc,GAAG;GACxE,CAAA,GACD,kBAAC,QAAD;IAAM,WAAWd,EAAE;IAAQ,UAAAM,EAAUU,GAAOT,CAAK;GAAQ,CAAA,CAChD;;EAGX,kBAACN,GAAD;GAAY,WAAWD,EAAE;GAAS,uBAAoB;GAAG,GAAIuB;GAC3D,UAAA,kBAACrB,GAAD;IAAW,WAAWF,EAAE;IAAM,cAAYY,IAAY,GAAGA,EAAU,WAAW;IAC5E,UAAA,kBAACR,GAAD;KACS;KACA;KACA;KACA;KACI;KACF;KACC;KACV,cAAYQ;IACb,CAAA;GACQ,CAAA;EACD,CAAA;CACC,EAAA,CAAA;AAEnB"}

package/dist/chunks/PaintInput-v8Y7MDbH.js

@@ -0,0 +1,121 @@
+import { a as e, t } from "./Icon-CcVjdq2C.js";
+import { t as n } from "./ColorField-Yz_BkcCT.js";
+import { t as r } from "./ToggleBar-BTYkBXU9.js";
+import { r as i } from "./GradientEditor-b7v4Ph3i.js";
+import { t as a } from "./PatternPicker-R_EQtw2Q.js";
+import { getAlpha01 as o, getPaintKind as s, listPaintKinds as c, paintAlpha as l, solid as u, switchGradientKind as d, toHex8 as f, withAlpha01 as p } from "@weasel-js/core";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useCallback as g, useRef as _ } from "react";
+var v = {
+	root: "_root_1nsz3_2",
+	unset: "_unset_1nsz3_10",
+	noEditor: "_noEditor_1nsz3_15"
+}, y = "#000000ff", b = "none";
+function x(e) {
+	let t = f(e.color);
+	return p(t.slice(0, 7), o(t) * l(e));
+}
+function S(e) {
+	let t = u(e);
+	return t.opacity === void 0 ? t : {
+		...t,
+		opacity: Math.round(t.opacity * 100) / 100
+	};
+}
+function C(e) {
+	return e?.fill === "pattern";
+}
+function w(e) {
+	return e === null ? b : e === void 0 ? null : e.fill ?? "solid";
+}
+function T(o) {
+	let { value: l, mixed: u = !1, unset: f = !1, kinds: p, allowNone: T = !0, onInput: E, onChange: D, className: O } = o, k = o["aria-label"], A = _(/* @__PURE__ */ new Map()), j = u ? null : w(l);
+	l != null && j !== null && A.current.set(j, l);
+	let M = c().filter((e) => p === void 0 || p.includes(e.id)), N = (n, r, i) => i && i in e ? {
+		value: n,
+		label: /* @__PURE__ */ m(t, {
+			name: i,
+			size: 14
+		}),
+		ariaLabel: r
+	} : {
+		value: n,
+		label: r
+	}, P = [...T ? [N(b, "None", "paintNone")] : [], ...M.map((e) => N(e.id, e.label, e.icon))], F = g(() => l == null ? y : s(w(l) ?? "solid")?.colorOf(l) ?? y, [l]), I = (e) => {
+		if (e === j) return;
+		if (e === b) {
+			D(null);
+			return;
+		}
+		let t = A.current.get(e);
+		if (t !== void 0) {
+			D(t);
+			return;
+		}
+		let n = l == null ? void 0 : d(l, e);
+		if (n !== void 0) {
+			D(n);
+			return;
+		}
+		let r = s(e);
+		r && D(r.seed(F()));
+	};
+	return /* @__PURE__ */ h("div", {
+		className: [
+			v.root,
+			f && v.unset,
+			O
+		].filter(Boolean).join(" "),
+		title: f ? "Not set" : void 0,
+		children: [/* @__PURE__ */ m(r, {
+			items: P,
+			value: j,
+			size: "sm",
+			ariaLabel: "Paint kind",
+			onChange: (e) => e && I(e)
+		}), L()]
+	});
+	function L() {
+		if (u || l === void 0) return /* @__PURE__ */ m(n, {
+			mixed: !0,
+			"aria-label": k,
+			onChange: (e) => D(S(e))
+		});
+		if (l === null) return null;
+		let e = s(w(l) ?? "solid");
+		if (e?.Editor) {
+			let t = e.Editor;
+			return /* @__PURE__ */ m(t, {
+				value: l,
+				onInput: E,
+				onChange: D
+			});
+		}
+		if (e?.stopsOf) return /* @__PURE__ */ m(i, {
+			value: l,
+			kindSwitch: !1,
+			onInput: E,
+			onChange: D
+		});
+		if (C(l)) return /* @__PURE__ */ m(a, {
+			value: l,
+			color: F(),
+			onChange: D
+		});
+		let t = w(l);
+		return t === "solid" ? /* @__PURE__ */ m(n, {
+			value: x(l),
+			alpha: !0,
+			"aria-label": k,
+			onInput: (e) => E?.(S(e)),
+			onChange: (e) => D(S(e))
+		}) : /* @__PURE__ */ h("div", {
+			className: v.noEditor,
+			children: [e?.label ?? t, ": no editor"]
+		});
+	}
+}
+//#endregion
+export { T as t };
+
+//# sourceMappingURL=PaintInput-v8Y7MDbH.js.map