@weasel-js/ui 1.7.0 → 1.7.2

package/dist/chunks/ListEditor-OQDzG4A5.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-B27pWv0i.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-OQDzG4A5.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListEditor-OQDzG4A5.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-TAFg88Lp.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-B27pWv0i.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-TAFg88Lp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton-TAFg88Lp.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-DWpvg8H6.js

@@ -0,0 +1,199 @@
+import { n as e } from "./handles-CqVANLtu.js";
+import { t } from "./ColorField-BwlelY26.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-DWpvg8H6.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MeshEditor-DWpvg8H6.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-BnJxcazc.js → NumberField-DS0WSiin.js}

@@ -1,37 +1,36 @@
-import { n as e } from "./Field--onYxXTF.js";
+import { t as e } from "./field.module-B27pWv0i.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"
+	frame: "_frame_2zacd_1 _numeric_zns9n_4",
+	steppers: "_steppers_2zacd_20",
+	stepper: "_stepper_2zacd_20",
+	ghost: "_ghost_2zacd_70",
+	fit: "_fit_2zacd_93"
 }, 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,
+			e.field,
+			e.control,
+			b === "fit" && `${e.fit} ${v.fit}`,
 			o === "row" && e.row,
-			o === "row" && v.row,
 			x
 		].filter(Boolean).join(" "),
 		children: [
 			a !== void 0 && /* @__PURE__ */ t(d, {
-				className: `${e.label} ${v.label}`,
+				className: e.label,
 				children: a
 			}),
 			/* @__PURE__ */ n(l, {
-				className: _ ? `${v.frame} ${v.ghost}` : v.frame,
+				className: [
+					e.frame,
+					v.frame,
+					_ && v.ghost
+				].filter(Boolean).join(" "),
 				children: [/* @__PURE__ */ t(u, {
 					ref: i,
 					placeholder: y
@@ -52,11 +51,11 @@ var v = {
 			}),
 			m !== void 0 && /* @__PURE__ */ t(p, {
 				slot: "description",
-				className: `${e.hint} ${v.below}`,
+				className: `${e.hint} ${e.below}`,
 				children: m
 			}),
 			/* @__PURE__ */ t(c, {
-				className: `${e.error} ${v.below}`,
+				className: `${e.error} ${e.below}`,
 				children: h
 			})
 		]
@@ -150,13 +149,17 @@ function E({ value: r, onChange: s, onInput: c, minValue: l, maxValue: u, step:
 	});
 	return /* @__PURE__ */ t("div", {
 		className: [
-			v.field,
-			E === "fit" && v.fit,
-			e.root,
+			e.field,
+			e.control,
+			E === "fit" && `${e.fit} ${v.fit}`,
 			D
 		].filter(Boolean).join(" "),
 		children: /* @__PURE__ */ n("div", {
-			className: x ? `${v.frame} ${v.ghost}` : v.frame,
+			className: [
+				e.frame,
+				v.frame,
+				x && v.ghost
+			].filter(Boolean).join(" "),
 			children: [/* @__PURE__ */ t("input", {
 				ref: N,
 				id: O,
@@ -203,4 +206,4 @@ function E({ value: r, onChange: s, onInput: c, minValue: l, maxValue: u, step:
 //#endregion
 export { S as n, y as r, E as t };
 
-//# sourceMappingURL=NumberField-BnJxcazc.js.map
+//# sourceMappingURL=NumberField-DS0WSiin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField-DS0WSiin.js","names":["NumberField","RACNumberField","f","s","RACInput","RACButton","s","f","field_module_default","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":[".frame {\n  composes: numeric from '@weasel-js/theme/numeric.module.css';\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n}\n\n.frame input {\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  --_frame-h: auto;\n  --_frame-bg: transparent;\n  --_frame-border: 1px solid transparent;\n  --_frame-fg: var(--wzl-accent-fg);\n  --_frame-focus-shadow: none;\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}\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 .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 type { FieldOrientation } from '../Field/Field';\nimport f from '../field.module.css';\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        f.field,\n        f.control,\n        width === 'fit' && `${f.fit} ${s.fit}`,\n        orientation === 'row' && f.row,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {label !== undefined && <Label className={f.label}>{label}</Label>}\n      <Group className={[f.frame, s.frame, ghost && s.ghost].filter(Boolean).join(' ')}>\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={`${f.hint} ${f.below}`}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={`${f.error} ${f.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 { clampToBounds, spinKey } from '../spin';\nimport f from '../field.module.css';\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={[f.field, f.control, width === 'fit' && `${f.fit} ${s.fit}`, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={[f.frame, s.frame, ghost && s.ghost].filter(Boolean).join(' ')}>\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-ujxYidhj.js → OptionsBar-DeTAjVb7.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./useRovingTabIndex-Bp_hYm_h.js";
-import { t } from "./segmentedControl.module-D6SzYJD7.js";
+import { t as e } from "./useRovingTabIndex-D7u22Ia_.js";
+import { t } from "./segmentedControl.module-BzGXUL5G.js";
 import { jsx as n } from "react/jsx-runtime";
 import "react";
 //#region src/components/OptionsBar/OptionsBar.tsx
@@ -8,10 +8,9 @@ function r(r) {
 		let t = i[e];
 		t.disabled || t.onChange(!t.selected);
 	}, d = e({
-		items: i,
-		itemClassName: t.segment,
+		itemSelector: `.${t.segment}`,
 		onActivate: u
-	}), f = s === void 0 ? void 0 : { "--wzl-tb-height": `${s}px` }, p = [
+	}), f = s === void 0 ? void 0 : { "--tb-h": `${s}px` }, p = [
 		t.root,
 		c && t[`size_${c}`],
 		l && t[`variant_${l}`],
@@ -19,6 +18,7 @@ function r(r) {
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ n("div", {
 		ref: d.rootRef,
+		onKeyDown: d.onKeyDown,
 		className: p,
 		role: "group",
 		"aria-label": a,
@@ -30,10 +30,8 @@ function r(r) {
 				"aria-pressed": e.selected,
 				"aria-label": e.ariaLabel,
 				disabled: e.disabled,
-				tabIndex: d.tabIndexFor(r),
 				className: i,
 				onClick: () => u(r),
-				onKeyDown: d.onKeyDown(r),
 				children: e.label
 			}, e.value);
 		})
@@ -42,4 +40,4 @@ function r(r) {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=OptionsBar-ujxYidhj.js.map
+//# sourceMappingURL=OptionsBar-DeTAjVb7.js.map

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

@@ -1 +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"}
+{"version":3,"file":"OptionsBar-DeTAjVb7.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({ itemSelector: `.${s.segment}`, onActivate: toggle });\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--tb-h' 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      onKeyDown={roving.onKeyDown}\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            className={cls}\n            onClick={() => toggle(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,cAAc,IAAID,EAAE;EAAW,YAAYI;CAAO,CAAC,GAEhFM,IAAmCC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,UAAqB,GAAGA,EAAO,IAAI,GAGrCC,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,WAAWA,EAAO;EAClB,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,WAAWY;IACX,eAAeb,EAAOc,CAAC;IAEtB,UAAAb,EAAK;GACA,GATDA,EAAK,KASJ;EAEZ,CAAC;CACE,CAAA;AAET"}