@weasel-js/ui 1.5.2 → 1.6.1

package/dist/chunks/MenuButton-DtaGenKf.js

@@ -0,0 +1,70 @@
+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"
+};
+//#endregion
+//#region src/components/MenuButton/MenuButton.tsx
+function d({ label: d, items: f, onAction: p, isDisabled: m, className: h, "aria-label": g, portalContainer: _, shortcut: v, tooltip: y }) {
+	let { anchor: b, portalProps: x } = e(_);
+	return /* @__PURE__ */ i(c, { children: [
+		b,
+		/* @__PURE__ */ r(t, {
+			content: n({
+				tooltip: y,
+				shortcut: v,
+				ariaLabel: g,
+				label: d
+			}),
+			disabled: m,
+			children: /* @__PURE__ */ i(a, {
+				className: [u.trigger, h].filter(Boolean).join(" "),
+				isDisabled: m,
+				"aria-label": g,
+				children: [/* @__PURE__ */ r("span", {
+					className: u.label,
+					children: d
+				}), /* @__PURE__ */ r("svg", {
+					className: u.chevron,
+					viewBox: "0 0 10 10",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ r("path", {
+						d: "M2 4 L5 7 L8 4",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
+				})]
+			})
+		}),
+		/* @__PURE__ */ r(l, {
+			className: u.popover,
+			"data-weasel-overlay": "",
+			...x,
+			children: /* @__PURE__ */ r(o, {
+				className: u.menu,
+				onAction: (e) => p(e),
+				children: f.map((e) => /* @__PURE__ */ r(s, {
+					id: e.value,
+					className: u.item,
+					isDisabled: e.isDisabled,
+					textValue: e.textValue ?? (typeof e.label == "string" ? e.label : void 0),
+					children: e.label
+				}, e.value))
+			})
+		})
+	] });
+}
+//#endregion
+export { d as t };
+
+//# sourceMappingURL=MenuButton-DtaGenKf.js.map

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

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

@@ -0,0 +1,87 @@
+import { t as e } from "./ColorField-BcMcW8Sa.js";
+import { t } from "./paintPreview-CuSZiHpR.js";
+import { t as n } from "./ToggleBar-DTjGeS0Q.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";
+var s = {
+	root: "_root_g12ri_1",
+	patch: "_patch_g12ri_7",
+	preview: "_preview_g12ri_13",
+	corners: "_corners_g12ri_21",
+	corner: "_corner_g12ri_21"
+}, c = [
+	{
+		value: "rgb",
+		label: "sRGB"
+	},
+	{
+		value: "oklab",
+		label: "OKLab"
+	},
+	{
+		value: "oklch",
+		label: "OKLCh"
+	}
+];
+function l(t) {
+	let { value: i, onInput: l, onChange: d, spaceSwitch: f = !0, className: p } = t, m = i.interpolate ?? "rgb", h = (e, t, n) => r({
+		...i,
+		patches: i.patches.map((r, i) => {
+			if (i !== e) return r;
+			let [a, o, s, c] = r.colors, l = [
+				a,
+				o,
+				s,
+				c
+			];
+			return l[t] = n, {
+				...r,
+				colors: l
+			};
+		})
+	});
+	return /* @__PURE__ */ o("div", {
+		className: [s.root, p].filter(Boolean).join(" "),
+		children: [i.patches.map((t, n) => /* @__PURE__ */ o("div", {
+			className: s.patch,
+			children: [/* @__PURE__ */ a("span", {
+				className: s.preview,
+				"aria-hidden": "true",
+				style: { background: u(i, n) }
+			}), /* @__PURE__ */ a("div", {
+				className: s.corners,
+				children: t.colors.map((t, r) => /* @__PURE__ */ a(e, {
+					value: t,
+					alpha: !0,
+					"aria-label": `Patch ${n + 1} corner ${r + 1}`,
+					className: s.corner,
+					onInput: (e) => l?.(h(n, r, e)),
+					onChange: (e) => d(h(n, r, e))
+				}, r))
+			})]
+		}, n)), f && /* @__PURE__ */ a(n, {
+			items: c,
+			value: m,
+			size: "sm",
+			ariaLabel: "Blend space",
+			onChange: (e) => e && d(r({
+				...i,
+				interpolate: e
+			}))
+		})]
+	});
+}
+function u(e, n) {
+	return t({
+		...e,
+		patches: [e.patches[n]]
+	});
+}
+function d(e) {
+	return i(e);
+}
+//#endregion
+export { d as n, l as t };
+
+//# sourceMappingURL=MeshEditor-qqGc6hlD.js.map

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

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

@@ -1,36 +1,41 @@
-import { a as e, r as t } from "./number-BHz66zQO.js";
-import { n } from "./Field-DWnV8WZY.js";
+import { a as e, r as t } from "./number-D3NEx_8r.js";
+import { n } from "./Field--onYxXTF.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { forwardRef as a, useRef as o, useState as s } from "react";
 import { Button as c, FieldError as l, Group as u, Input as d, Label as f, NumberField as p, Text as m } from "react-aria-components";
 var h = {
-	field: "_field_x9xey_1",
-	frame: "_frame_x9xey_9",
-	steppers: "_steppers_x9xey_57",
-	stepper: "_stepper_x9xey_57",
-	ghost: "_ghost_x9xey_98",
-	fit: "_fit_x9xey_122"
+	field: "_field_1v3hc_1",
+	row: "_row_1v3hc_12",
+	label: "_label_1v3hc_19",
+	fit: "_fit_1v3hc_20",
+	frame: "_frame_1v3hc_20",
+	below: "_below_1v3hc_22",
+	steppers: "_steppers_1v3hc_72",
+	stepper: "_stepper_1v3hc_72",
+	ghost: "_ghost_1v3hc_113"
 }, g = a(function(e, t) {
-	let { label: a, description: o, errorMessage: s, hideSteppers: g, ghost: _, placeholder: v, width: y = "fill", className: b, ...x } = e;
+	let { label: a, orientation: o = "stacked", description: s, errorMessage: g, hideSteppers: _, ghost: v, placeholder: y, width: b = "fill", className: x, ...S } = e;
 	return /* @__PURE__ */ i(p, {
-		...x,
+		...S,
 		className: [
 			h.field,
-			y === "fit" && h.fit,
+			b === "fit" && h.fit,
 			n.root,
-			b
+			o === "row" && n.row,
+			o === "row" && h.row,
+			x
 		].filter(Boolean).join(" "),
 		children: [
 			a !== void 0 && /* @__PURE__ */ r(f, {
-				className: n.label,
+				className: `${n.label} ${h.label}`,
 				children: a
 			}),
 			/* @__PURE__ */ i(u, {
-				className: _ ? `${h.frame} ${h.ghost}` : h.frame,
+				className: v ? `${h.frame} ${h.ghost}` : h.frame,
 				children: [/* @__PURE__ */ r(d, {
 					ref: t,
-					placeholder: v
-				}), !g && /* @__PURE__ */ i("div", {
+					placeholder: y
+				}), !_ && /* @__PURE__ */ i("div", {
 					className: h.steppers,
 					children: [/* @__PURE__ */ r(c, {
 						slot: "increment",
@@ -45,14 +50,14 @@ var h = {
 					})]
 				})]
 			}),
-			o !== void 0 && /* @__PURE__ */ r(m, {
+			s !== void 0 && /* @__PURE__ */ r(m, {
 				slot: "description",
-				className: n.hint,
-				children: o
+				className: `${n.hint} ${h.below}`,
+				children: s
 			}),
 			/* @__PURE__ */ r(l, {
-				className: n.error,
-				children: s
+				className: `${n.error} ${h.below}`,
+				children: g
 			})
 		]
 	});
@@ -109,4 +114,4 @@ function _({ value: i, onChange: a, minValue: c, maxValue: l, step: u = 1, accep
 //#endregion
 export { g as n, _ as t };
 
-//# sourceMappingURL=NumberField-CCjEDZCg.js.map
+//# sourceMappingURL=NumberField-CwJOMmQR.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField-CwJOMmQR.js","names":["NumberField","RACNumberField","s","RACInput","RACButton","s","parseNumber","formatNumber","NumberField_module_default","NumberField$1","forwardRef","rest","props","NumberField","width","fieldClasses","orientation","className","label","Label","Group","ghost","Input","hideSteppers","Button","description","Text","FieldError","errorMessage","UnitField","ariaLabel","draft","setDraft","useState","canceled","useRef","text","value","clamp","maxValue","minValue","n","commit","next","onChange","accepts","e","typed","step"],"sources":["../../src/components/NumberField/NumberField.module.css","../../src/components/NumberField/NumberField.tsx","../../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-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  background: transparent;\n  border: none;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n  font-size: var(--wzl-font-size-2xs);\n  line-height: 1;\n}\n\n.stepper:not(:last-child) {\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.stepper[data-hovered]:not([data-disabled]) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.stepper[data-pressed]:not([data-disabled]) {\n  background: var(--wzl-surface-pressed);\n}\n\n.stepper[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\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","import { useRef, useState } from 'react';\nimport { formatNumber, parseNumber, type UnitTable } from '../../format/number';\nimport { fieldClasses } from '../Field/Field';\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  /** Fired with a value the field read and clamped, in the unit it shows. */\n  onChange: (value: number) => void;\n  minValue?: number;\n  maxValue?: number;\n  /** What an arrow key adds or takes away. 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  placeholder?: string;\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  'aria-label'?: string;\n}\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, clamps to its bounds, and steps with the arrow keys.\n * React Aria's `NumberField` refuses letters as they are typed, which is why\n * this is not that.\n */\nexport function UnitField({\n  value,\n  onChange,\n  minValue,\n  maxValue,\n  step = 1,\n  accepts,\n  placeholder,\n  ghost,\n  width = 'fill',\n  className,\n  'aria-label': ariaLabel,\n}: UnitFieldProps) {\n  const [draft, setDraft] = useState<string | null>(null);\n  const canceled = useRef(false);\n  const text = Number.isFinite(value)\n    ? formatNumber(value, { useGrouping: false, maximumFractionDigits: 20 })\n    : '';\n  const clamp = (n: number) =>\n    Math.min(maxValue ?? Infinity, Math.max(minValue ?? -Infinity, n));\n  const commit = (n: number) => {\n    const next = clamp(n);\n    if (next !== value) onChange(next);\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          type=\"text\"\n          inputMode=\"decimal\"\n          aria-label={ariaLabel}\n          placeholder={placeholder}\n          value={draft ?? text}\n          onChange={(e) => setDraft(e.target.value)}\n          onFocus={() => {\n            canceled.current = false;\n          }}\n          onBlur={() => {\n            if (draft !== null && !canceled.current) {\n              const n = parseNumber(draft, accepts);\n              if (Number.isFinite(n)) commit(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 (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n              e.preventDefault();\n              const typed = draft === null ? value : parseNumber(draft, accepts);\n              const from = Number.isFinite(typed) ? typed : 0;\n              const next = clamp(from + (e.key === 'ArrowUp' ? step : -step));\n              setDraft(null);\n              if (next !== value) onChange(next);\n            }\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;GCmDaA,IAAcU,EAAW,SACpC,GACA,GACA;CACA,IAAM,EACJ,UACA,iBAAc,WACd,gBACA,iBACA,iBACA,UACA,gBACA,WAAQ,QACR,cACA,GAAGC,MACDC;CACJ,OACE,kBAACX,GAAD;EACE,GAAIU;EACJ,WAAW;GACTT,EAAE;GACFY,MAAU,SAASZ,EAAE;GACrBa,EAAa;GACbC,MAAgB,SAASD,EAAa;GACtCC,MAAgB,SAASd,EAAE;GAC3Be;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAXb,UAAA;GAaGC,MAAU,KAAA,KAAa,kBAACC,GAAD;IAAO,WAAW,GAAGJ,EAAa,MAAM,GAAGb,EAAE;IAAU,UAAAgB;GAAa,CAAA;GAC5F,kBAACE,GAAD;IAAO,WAAWC,IAAQ,GAAGnB,EAAE,MAAM,GAAGA,EAAE,UAAUA,EAAE;IAAtD,UAAA,CACE,kBAACC,GAAD;KAAe;KAAkB;IAAc,CAAA,GAC9C,CAACoB,KACA,kBAAC,OAAD;KAAK,WAAWrB,EAAE;KAAlB,UAAA,CACE,kBAACE,GAAD;MAAW,MAAK;MAAY,WAAWF,EAAE;MAAS,cAAW;MAAY,UAAA;KAAY,CAAA,GACrF,kBAACE,GAAD;MAAW,MAAK;MAAY,WAAWF,EAAE;MAAS,cAAW;MAAY,UAAA;KAAY,CAAA,CAClF;IAEF,CAAA,CAAA;;GACNuB,MAAgB,KAAA,KACf,kBAACC,GAAD;IAAM,MAAK;IAAc,WAAW,GAAGX,EAAa,KAAK,GAAGb,EAAE;IAC3D,UAAAuB;GACG,CAAA;GAER,kBAACE,GAAD;IAAY,WAAW,GAAGZ,EAAa,MAAM,GAAGb,EAAE;IAAU,UAAA0B;GAAyB,CAAA;EACvE;;AAEpB,CAAC;;;ACjED,SAAgBC,EAAU,EACxB,UACA,aACA,aACA,aACA,UAAO,GACP,YACA,gBACA,UACA,WAAQ,QACR,cACA,cAAcC,KACG;CACjB,IAAM,CAACC,GAAOC,KAAYC,EAAwB,IAAI,GAChDC,IAAWC,EAAO,EAAK,GACvBC,IAAO,OAAO,SAASC,CAAK,IAC9B9B,EAAa8B,GAAO;EAAE,aAAa;EAAO,uBAAuB;CAAG,CAAC,IACrE,IACEC,KAAS,MACb,KAAK,IAAIC,KAAY,UAAU,KAAK,IAAIC,KAAY,WAAWC,CAAC,CAAC,GAC7DC,KAAU,MAAc;EAC5B,IAAMC,IAAOL,EAAMG,CAAC;EACpB,AAAIE,MAASN,KAAOO,EAASD,CAAI;CACnC;CAEA,OACE,kBAAC,OAAD;EACE,WAAW;GAACtC,EAAE;GAAOS,MAAU,SAAST,EAAE;GAAKU,EAAa;GAAME;EAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEX,UAAA,kBAAC,OAAD;GAAK,WAAWI,IAAQ,GAAGhB,EAAE,MAAM,GAAGA,EAAE,UAAUA,EAAE;GAClD,UAAA,kBAAC,SAAD;IACE,MAAK;IACL,WAAU;IACV,cAAYyB;IACC;IACb,OAAOC,KAASK;IAChB,WAAW,MAAMJ,EAAS,EAAE,OAAO,KAAK;IACxC,eAAe;KACb,EAAS,UAAU;IACrB;IACA,cAAc;KACZ,IAAID,MAAU,QAAQ,CAACG,EAAS,SAAS;MACvC,IAAMO,IAAInC,EAAYyB,GAAOc,CAAO;MACpC,AAAI,OAAO,SAASJ,CAAC,KAAGC,EAAOD,CAAC;KAClC;KACA,EAAS,IAAI;IACf;IACA,YAAY,MAAM;KAChB,IAAIK,EAAE,QAAQ,SACZ,EAAE,cAAc,KAAK;UAChB,IAAIA,EAAE,QAAQ,UAEnB,AADA,EAAS,UAAU,IACnBA,EAAE,cAAc,KAAK;UAChB,IAAIA,EAAE,QAAQ,aAAaA,EAAE,QAAQ,aAAa;MACvD,EAAE,eAAe;MACjB,IAAMC,IAAQhB,MAAU,OAAOM,IAAQ/B,EAAYyB,GAAOc,CAAO,GAE3DF,IAAOL,GADA,OAAO,SAASS,CAAK,IAAIA,IAAQ,MACnBD,EAAE,QAAQ,YAAYE,IAAO,CAACA,EAAK;MAE9D,AADAhB,EAAS,IAAI,GACTW,MAASN,KAAOO,EAASD,CAAI;KACnC;IACF;GACD,CAAA;EACE,CAAA;CACF,CAAA;AAET"}

package/dist/chunks/{OptionsBar-DeQ-vUeZ.js → OptionsBar-DbzAgIln.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./useRovingTabIndex-Dkpf_KhN.js";
-import { t } from "./segmentedControl.module-DS72X1ns.js";
+import { t as e } from "./useRovingTabIndex-Bp_hYm_h.js";
+import { t } from "./segmentedControl.module-Bv7DEg8f.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-DeQ-vUeZ.js.map
+//# sourceMappingURL=OptionsBar-DbzAgIln.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsBar-DbzAgIln.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-jBOJ32rL.js → PaintField-DaJukRc6.js}

@@ -1,48 +1,48 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { r as t } from "./MeshEditor-Bipz-Ocl.js";
-import { t as n } from "./PaintInput-Qs7Rul5R.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { getPaintKind as a } from "@weasel-js/core";
+import { r as e } from "./portalHost-yTOVuCej.js";
+import { t } from "./paintPreview-CuSZiHpR.js";
+import { t as n } from "./PaintInput-Byhna3H-.js";
+import { getPaintKind as r } from "@weasel-js/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import "react";
 import { Button as o, Dialog as s, DialogTrigger as c, Popover as l } from "react-aria-components";
 var u = {
-	trigger: "_trigger_sqk5y_1",
-	swatch: "_swatch_sqk5y_27",
-	label: "_label_sqk5y_48",
-	popover: "_popover_sqk5y_57",
-	body: "_body_sqk5y_61"
+	trigger: "_trigger_1p91w_1",
+	swatch: "_swatch_1p91w_27",
+	label: "_label_1p91w_48",
+	popover: "_popover_1p91w_57",
+	body: "_body_1p91w_61"
 };
 //#endregion
 //#region src/components/PaintField/PaintField.tsx
 function d(e, t) {
-	return t ? "Mixed" : e === null ? "None" : e === void 0 ? "—" : a(e.fill ?? "solid")?.label ?? e.fill ?? "solid";
+	return t ? "Mixed" : e === null ? "None" : e === void 0 ? "—" : r(e.fill ?? "solid")?.label ?? e.fill ?? "solid";
 }
-function f(a) {
-	let { value: f, mixed: p = !1, unset: m = !1, kinds: h, allowNone: g = !0, onInput: _, onChange: v, className: y, portalContainer: b } = a, x = a["aria-label"], { anchor: S, portalProps: C } = e(b), w = p ? void 0 : t(f);
-	return /* @__PURE__ */ i(c, { children: [
+function f(r) {
+	let { value: f, mixed: p = !1, unset: m = !1, kinds: h, allowNone: g = !0, onInput: _, onChange: v, className: y, portalContainer: b } = r, x = r["aria-label"], { anchor: S, portalProps: C } = e(b), w = p ? void 0 : t(f);
+	return /* @__PURE__ */ a(c, { children: [
 		S,
-		/* @__PURE__ */ i(o, {
+		/* @__PURE__ */ a(o, {
 			className: [u.trigger, y].filter(Boolean).join(" "),
 			"aria-label": x,
 			...m ? { "data-unset": "" } : {},
 			...p ? { "data-mixed": "" } : {},
-			children: [/* @__PURE__ */ r("span", {
+			children: [/* @__PURE__ */ i("span", {
 				className: u.swatch,
 				"aria-hidden": "true",
 				...w ? { style: { background: w } } : { "data-empty": "" }
-			}), /* @__PURE__ */ r("span", {
+			}), /* @__PURE__ */ i("span", {
 				className: u.label,
 				children: d(f, p)
 			})]
 		}),
-		/* @__PURE__ */ r(l, {
+		/* @__PURE__ */ i(l, {
 			className: u.popover,
 			"data-weasel-overlay": "",
 			...C,
-			children: /* @__PURE__ */ r(s, {
+			children: /* @__PURE__ */ i(s, {
 				className: u.body,
 				"aria-label": x ? `${x} editor` : "Paint editor",
-				children: /* @__PURE__ */ r(n, {
+				children: /* @__PURE__ */ i(n, {
 					value: f,
 					mixed: p,
 					unset: m,
@@ -59,4 +59,4 @@ function f(a) {
 //#endregion
 export { f as t };
 
-//# sourceMappingURL=PaintField-jBOJ32rL.js.map
+//# sourceMappingURL=PaintField-DaJukRc6.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaintField-DaJukRc6.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-Qs7Rul5R.js → PaintInput-Byhna3H-.js}

@@ -1,11 +1,11 @@
-import { a as e, t } from "./Icon-DT0x6HaQ.js";
-import { t as n } from "./ToggleBar-CClus5Cd.js";
-import { t as r } from "./ColorField-BYzgZM9o.js";
-import { r as i } from "./GradientEditor-rRBmf3G0.js";
-import { n as a, t as o } from "./MeshEditor-Bipz-Ocl.js";
-import { t as s } from "./PatternPicker-BMpXWboq.js";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { getPaintKind as u, listPaintKinds as d, withGradientKind as f } from "@weasel-js/core";
+import { a as e, t } from "./Icon-Cgzy8VgC.js";
+import { t as n } from "./ColorField-BcMcW8Sa.js";
+import { t as r } from "./ToggleBar-DTjGeS0Q.js";
+import { r as i } from "./GradientEditor-B3a-MsVJ.js";
+import { n as a, t as o } from "./MeshEditor-qqGc6hlD.js";
+import { t as s } from "./PatternPicker-B-cUt-JT.js";
+import { getPaintKind as c, listPaintKinds as l, withGradientKind as u } from "@weasel-js/core";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { useCallback as p, useRef as m } from "react";
 var h = {
 	root: "_root_1nsz3_2",
@@ -28,9 +28,9 @@ function x(e) {
 function S(S) {
 	let { value: C, mixed: w = !1, unset: T = !1, kinds: E, allowNone: D = !0, onInput: O, onChange: k, className: A } = S, j = S["aria-label"], M = m(/* @__PURE__ */ new Map()), N = w ? null : x(C);
 	C != null && N !== null && M.current.set(N, C);
-	let P = d().filter((e) => E === void 0 || E.includes(e.id)), F = (n, r, i) => i && i in e ? {
+	let P = l().filter((e) => E === void 0 || E.includes(e.id)), F = (n, r, i) => i && i in e ? {
 		value: n,
-		label: /* @__PURE__ */ c(t, {
+		label: /* @__PURE__ */ d(t, {
 			name: i,
 			size: 14
 		}),
@@ -38,7 +38,7 @@ function S(S) {
 	} : {
 		value: n,
 		label: r
-	}, I = [...D ? [F(_, "None", "paintNone")] : [], ...P.map((e) => F(e.id, e.label, e.icon))], L = p(() => C == null ? g : u(x(C) ?? "solid")?.colorOf(C) ?? g, [C]), R = (e) => {
+	}, I = [...D ? [F(_, "None", "paintNone")] : [], ...P.map((e) => F(e.id, e.label, e.icon))], L = p(() => C == null ? g : c(x(C) ?? "solid")?.colorOf(C) ?? g, [C]), R = (e) => {
 		if (e === N) return;
 		if (e === _) {
 			k(null);
@@ -50,20 +50,20 @@ function S(S) {
 			return;
 		}
 		if (C != null && y(C) && v.includes(e)) {
-			k(f(C, e));
+			k(u(C, e));
 			return;
 		}
-		let n = u(e);
+		let n = c(e);
 		n && k(n.seed(L()));
 	};
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ f("div", {
 		className: [
 			h.root,
 			T && h.unset,
 			A
 		].filter(Boolean).join(" "),
 		title: T ? "Not set" : void 0,
-		children: [/* @__PURE__ */ c(n, {
+		children: [/* @__PURE__ */ d(r, {
 			items: I,
 			value: N,
 			size: "sm",
@@ -72,7 +72,7 @@ function S(S) {
 		}), z()]
 	});
 	function z() {
-		if (w || C === void 0) return /* @__PURE__ */ c(r, {
+		if (w || C === void 0) return /* @__PURE__ */ d(n, {
 			mixed: !0,
 			"aria-label": j,
 			onChange: (e) => k({
@@ -81,33 +81,33 @@ function S(S) {
 			})
 		});
 		if (C === null) return null;
-		let e = u(x(C) ?? "solid");
+		let e = c(x(C) ?? "solid");
 		if (e?.Editor) {
 			let t = e.Editor;
-			return /* @__PURE__ */ c(t, {
+			return /* @__PURE__ */ d(t, {
 				value: C,
 				onInput: O,
 				onChange: k
 			});
 		}
-		if (y(C)) return /* @__PURE__ */ c(i, {
+		if (y(C)) return /* @__PURE__ */ d(i, {
 			value: C,
 			kindSwitch: !1,
 			onInput: O,
 			onChange: k
 		});
-		if (b(C)) return /* @__PURE__ */ c(s, {
+		if (b(C)) return /* @__PURE__ */ d(s, {
 			value: C,
 			color: L(),
 			onChange: k
 		});
-		if (a(C)) return /* @__PURE__ */ c(o, {
+		if (a(C)) return /* @__PURE__ */ d(o, {
 			value: C,
 			onInput: O,
 			onChange: k
 		});
 		let t = x(C);
-		return t === "solid" ? /* @__PURE__ */ c(r, {
+		return t === "solid" ? /* @__PURE__ */ d(n, {
 			value: L(),
 			alpha: !0,
 			"aria-label": j,
@@ -119,7 +119,7 @@ function S(S) {
 				fill: "solid",
 				color: e
 			})
-		}) : /* @__PURE__ */ l("div", {
+		}) : /* @__PURE__ */ f("div", {
 			className: h.noEditor,
 			children: [e?.label ?? t, ": no editor"]
 		});
@@ -128,4 +128,4 @@ function S(S) {
 //#endregion
 export { S as t };
 
-//# sourceMappingURL=PaintInput-Qs7Rul5R.js.map
+//# sourceMappingURL=PaintInput-Byhna3H-.js.map

package/dist/chunks/PaintInput-Byhna3H-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintInput-Byhna3H-.js","names":["s","ICON_PATHS","ColorField","ToggleBar","GradientEditor","isMeshPaint","MeshEditor","PatternPicker","PaintInput_module_default","FALLBACK_COLOR","NONE","GRADIENT_KINDS","isGradient","paint","isPattern","kindOf","PaintInput","props","ariaLabel","remembered","useRef","active","mixed","value","entries","listPaintKinds","kinds","entry","segment","icon","id","Icon","label","items","allowNone","currentColor","useCallback","getPaintKind","switchKind","kind","seen","withGradientKind","onChange","unset","className","renderBody","Editor","onInput"],"sources":["../../src/components/PaintInput/PaintInput.module.css","../../src/components/PaintInput/PaintInput.tsx"],"sourcesContent":["/* Kind switch stacked over whichever paint body it selects. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n/* A value is in effect but nobody chose it. Never louder than mixed. */\n.unset {\n  opacity: 0.55;\n}\n\n/* A kind with no editor: named, not editable. */\n.noEditor {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n","import { useCallback, useRef, type ReactElement } from 'react';\nimport {\n  getPaintKind,\n  listPaintKinds,\n  withGradientKind,\n  type FillStyle,\n  type GradientFill,\n  type GradientKind,\n  type PaintKind,\n} from '@weasel-js/core';\nimport { Icon } from '../../icons/Icon';\nimport { ICON_PATHS, type IconName } from '../../icons/paths';\nimport { ColorField } from '../ColorField';\nimport { GradientEditor } from '../GradientEditor';\nimport { MeshEditor, isMeshPaint } from '../MeshEditor';\nimport { PatternPicker, type PatternFill } from '../PatternPicker';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport s from './PaintInput.module.css';\n\n/** What a kind with no color of its own seeds from. */\nconst FALLBACK_COLOR = '#000000ff';\n\n/** The bar's answer for \"no paint at all\". Not a registered kind — absence\n *  has no seed, no color and nothing to render — so it is this control's own\n *  segment rather than a registry entry. */\nconst NONE = 'none';\n\nconst GRADIENT_KINDS: readonly string[] = [\n  'linear-gradient',\n  'radial-gradient',\n  'conic-gradient',\n];\n\nfunction isGradient(paint: FillStyle | undefined): paint is GradientFill {\n  return paint !== undefined && GRADIENT_KINDS.includes(paint.fill ?? '');\n}\n\nfunction isPattern(paint: FillStyle | undefined): paint is PatternFill {\n  return paint?.fill === 'pattern';\n}\n\n/** A paint's own discriminant. The solid member leaves `fill` off, and an\n *  explicit `null` is the absence of paint rather than an unknown one. */\nfunction kindOf(paint: FillStyle | null | undefined): PaintKind | null {\n  if (paint === null) return NONE;\n  if (paint === undefined) return null;\n  return paint.fill ?? 'solid';\n}\n\n/** Props for {@link PaintInput}. `onInput` fires throughout a gesture and\n *  `onChange` once at its end. */\nexport interface PaintInputProps {\n  /** The paint being edited. `null` is an explicit \"no paint\"; `undefined`\n   *  is no value to show. */\n  value: FillStyle | null | undefined;\n  /** Indeterminate presentation: no kind lit, and the body withheld because\n   *  there is no single paint to show. */\n  mixed?: boolean;\n  /** Dim the control — a value is in effect but was never chosen. */\n  unset?: boolean;\n  /** Restrict the kind bar. Default: every registered kind. */\n  kinds?: readonly PaintKind[];\n  /** Offer \"None\". Default `true` — the bar answers \"what kind of paint is\n   *  this?\" and no-paint is one of the answers. Turn it off where the slot\n   *  cannot express absence. */\n  allowNone?: boolean;\n  onInput?: (next: FillStyle | null) => void;\n  onChange: (next: FillStyle | null) => void;\n  /** Names the paint this control edits — `Fill`, `Color`. Carried by the\n   *  solid body's swatch, which is the part with a value to announce. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * Editor for a whole `FillStyle` — a kind bar over whichever body that kind\n * wants.\n *\n * The bar is driven by the paint-kind registry rather than a fixed list, so a\n * consumer's registered kind appears in it and renders that entry's `Editor`.\n * The five built-in kinds keep their branch here: their editors live in this\n * package and `@weasel-js/core`, which owns the registry, cannot import it.\n *\n * Geometry is deliberately absent — on a canvas it belongs on the artwork,\n * via `<SceneGradientHandles>`.\n */\nexport function PaintInput(props: PaintInputProps): ReactElement {\n  const {\n    value, mixed = false, unset = false, kinds, allowNone = true,\n    onInput, onChange, className,\n  } = props;\n  const ariaLabel = props['aria-label'];\n\n  // Per-kind memory, so linear → solid → linear comes back with its stops.\n  // A ref, not state: it must not survive the control being pointed at a\n  // different selection, and nothing renders off it directly.\n  const remembered = useRef(new Map<PaintKind, FillStyle>());\n\n  const active = mixed ? null : kindOf(value);\n  if (value != null && active !== null) remembered.current.set(active, value);\n\n  const entries = listPaintKinds().filter(\n    (entry) => kinds === undefined || kinds.includes(entry.id),\n  );\n  const segment = (id: string, label: string, icon: string | undefined): ToggleBarItem<PaintKind> =>\n    icon && icon in ICON_PATHS\n      // Icon-only: six labelled segments do not fit a property row, and the\n      // full label stays the accessible name.\n      // 14 to match the panel's other glyph segments. A `sm` bar is 17px tall\n      // over 1px of padding, so 15 fills the segment box edge to edge.\n      ? { value: id, label: <Icon name={icon as IconName} size={14} />, ariaLabel: label }\n      : { value: id, label };\n\n  const items: readonly ToggleBarItem<PaintKind>[] = [\n    ...(allowNone ? [segment(NONE, 'None', 'paintNone')] : []),\n    ...entries.map((entry) => segment(entry.id, entry.label, entry.icon)),\n  ];\n\n  /** The color a switch seeds from: whatever the current paint shows. */\n  const currentColor = useCallback((): string => {\n    if (value == null) return FALLBACK_COLOR;\n    return getPaintKind(kindOf(value) ?? 'solid')?.colorOf(value) ?? FALLBACK_COLOR;\n  }, [value]);\n\n  const switchKind = (kind: PaintKind): void => {\n    if (kind === active) return;\n    if (kind === NONE) {\n      onChange(null);\n      return;\n    }\n    const seen = remembered.current.get(kind);\n    if (seen !== undefined) {\n      onChange(seen);\n      return;\n    }\n    if (value != null && isGradient(value) && GRADIENT_KINDS.includes(kind)) {\n      onChange(withGradientKind(value, kind as GradientKind));\n      return;\n    }\n    const entry = getPaintKind(kind);\n    if (entry) onChange(entry.seed(currentColor()));\n  };\n\n  return (\n    <div\n      className={[s.root, unset && s.unset, className].filter(Boolean).join(' ')}\n      title={unset ? 'Not set' : undefined}\n    >\n      <ToggleBar<PaintKind>\n        items={items}\n        value={active}\n        size=\"sm\"\n        ariaLabel=\"Paint kind\"\n        onChange={(kind) => kind && switchKind(kind)}\n      />\n      {renderBody()}\n    </div>\n  );\n\n  function renderBody(): ReactElement | null {\n    if (mixed || value === undefined) {\n      return (\n        <ColorField\n          mixed\n          aria-label={ariaLabel}\n          onChange={(color) => onChange({ fill: 'solid', color })}\n        />\n      );\n    }\n    // Absence has nothing to edit. The lit segment is the whole statement.\n    if (value === null) return null;\n    // A registered `Editor` wins even for a built-in id: re-registering one is\n    // how a consumer replaces a kit control, and the built-in branches below\n    // are the fallback for the ids that ship without an entry editor.\n    const entry = getPaintKind(kindOf(value) ?? 'solid');\n    if (entry?.Editor) {\n      const Editor = entry.Editor;\n      return <Editor value={value} onInput={onInput} onChange={onChange} />;\n    }\n    if (isGradient(value)) {\n      return (\n        <GradientEditor\n          value={value}\n          kindSwitch={false}\n          onInput={onInput}\n          onChange={onChange}\n        />\n      );\n    }\n    if (isPattern(value)) {\n      return <PatternPicker value={value} color={currentColor()} onChange={onChange} />;\n    }\n    if (isMeshPaint(value)) {\n      return <MeshEditor value={value} onInput={onInput} onChange={onChange} />;\n    }\n    const kind = kindOf(value);\n    if (kind !== 'solid') {\n      // Editing a paint this control cannot represent would overwrite it, so\n      // a kind with no editor is shown and left alone.\n      return <div className={s.noEditor}>{entry?.label ?? kind}: no editor</div>;\n    }\n    return (\n      <ColorField\n        value={currentColor()}\n        alpha\n        aria-label={ariaLabel}\n        onInput={(color) => onInput?.({ fill: 'solid', color })}\n        onChange={(color) => onChange({ fill: 'solid', color })}\n      />\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/{PatternPicker-BMpXWboq.js → PatternPicker-B-cUt-JT.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./ToggleBar-CClus5Cd.js";
+import { t as e } from "./ToggleBar-DTjGeS0Q.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { tilePreviewCssUrl as r } from "@weasel-js/svg";
 var i = {
@@ -90,4 +90,4 @@ function d(d) {
 //#endregion
 export { u as n, d as t };
 
-//# sourceMappingURL=PatternPicker-BMpXWboq.js.map
+//# sourceMappingURL=PatternPicker-B-cUt-JT.js.map

package/dist/chunks/PatternPicker-B-cUt-JT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternPicker-B-cUt-JT.js","names":["s","ToggleBar","PatternPicker_module_default","TILES","TILE_SIZES","DEFAULT_TILE_SIZE","PREVIEW_SIZE","specOf","fill","seedPattern","spec","from","tile","PatternPicker","props","value","size","pick","color","resize","onChange","nextSize","className","preview","selected","tilePreviewCssUrl","v"],"sources":["../../src/components/PatternPicker/PatternPicker.module.css","../../src/components/PatternPicker/PatternPicker.tsx"],"sourcesContent":["/* Tile grid over the size switch. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--wzl-swatch-size, 28px), 1fr));\n  gap: 0;\n}\n\n/* The swatch's whole face is its own tile, so it must not carry a flat\n   background — and the tile repeats at its own scale, not the swatch's. */\n.swatch {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  min-width: 0;\n  padding: 0;\n  border: 0.5px solid var(--wzl-border);\n  border-radius: 0;\n  cursor: pointer;\n  background-color: var(--wzl-surface-sunken);\n  background-image: var(--tile-preview);\n  background-repeat: repeat;\n  background-size: 16px 16px;\n  background-clip: padding-box;\n}\n\n.swatch:hover {\n  border-color: var(--wzl-fg-muted);\n}\n\n.swatchActive {\n  border-color: var(--wzl-accent);\n  box-shadow: 0 0 0 1px var(--wzl-accent);\n}\n","import type { ReactElement } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { FillStyle, TilePatternSpec } from '@weasel-js/core';\nimport { tilePreviewCssUrl } from '@weasel-js/svg';\nimport { ToggleBar } from '../ToggleBar';\nimport s from './PatternPicker.module.css';\n\n/** The `pattern` member of the paint union. */\nexport type PatternFill = Extract<FillStyle, { fill: 'pattern' }>;\n\nconst TILES: readonly TilePatternSpec['tile'][] = ['hatch', 'crosshatch', 'dots', 'chunks'];\n\n/** Tile sizes the picker offers, coarse enough that each reads as a\n *  distinct texture rather than a nudge. */\nconst TILE_SIZES: readonly { value: number; label: string }[] = [\n  { value: 4, label: 'S' },\n  { value: 8, label: 'M' },\n  { value: 16, label: 'L' },\n  { value: 32, label: 'XL' },\n];\n\nconst DEFAULT_TILE_SIZE = 8;\n\n/** Every swatch previews at one size so the grid compares tiles, not scales. */\nconst PREVIEW_SIZE = 16;\n\n/** The spec a pattern paint carries, if it carries one. A consumer-built\n *  `TextureHandle` has no spec, so the picker shows no tile selected and\n *  replaces it wholesale on the next click. */\nfunction specOf(fill: PatternFill): TilePatternSpec | null {\n  return 'tile' in fill.pattern ? fill.pattern : null;\n}\n\n/**\n * A pattern seeded from a color. `units: 'bounds'` anchors the tile to the\n * node's box, so the texture travels with the shape.\n */\nexport function seedPattern(\n  tile: TilePatternSpec['tile'],\n  from: string,\n  size: number = DEFAULT_TILE_SIZE,\n): PatternFill {\n  const spec: TilePatternSpec = { tile, color: from, size };\n  // `chunks` is a scatter over a ground rather than a line texture; without a\n  // background it reads as loose specks on whatever sits beneath.\n  if (tile === 'chunks') spec.bg = '#00000000';\n  return { fill: 'pattern', pattern: spec, units: 'bounds' };\n}\n\n/** Props for {@link PatternPicker}. */\nexport interface PatternPickerProps {\n  /** The pattern paint being edited. */\n  value: PatternFill;\n  /** The color new tiles are seeded with — the paint's own, normally. */\n  color: string;\n  /** Committed value: one call per click. A tile pick and a size change are\n   *  each a complete gesture, so there is no `onInput`. */\n  onChange: (next: PatternFill) => void;\n  className?: string;\n}\n\n/**\n * Grid of tile swatches over a size switch, each swatch previewing the real\n * tile at the current color.\n *\n * The preview shares its shape mapper with what the renderer paints, so a\n * swatch cannot drift from the texture it selects.\n */\nexport function PatternPicker(props: PatternPickerProps): ReactElement {\n  const { value, color, onChange, className } = props;\n  const spec = specOf(value);\n  const size = spec?.size ?? DEFAULT_TILE_SIZE;\n\n  const pick = (tile: TilePatternSpec['tile']): void => {\n    onChange(seedPattern(tile, color, size));\n  };\n\n  const resize = (nextSize: number): void => {\n    if (!spec) return;\n    onChange({ ...value, pattern: { ...spec, size: nextSize } });\n  };\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      <div className={s.grid}>\n        {TILES.map((tile) => {\n          const preview: TilePatternSpec = { tile, color, size: PREVIEW_SIZE };\n          if (tile === 'chunks') preview.bg = '#00000000';\n          const selected = spec?.tile === tile;\n          return (\n            <button\n              key={tile}\n              type=\"button\"\n              className={[s.swatch, selected && s.swatchActive].filter(Boolean).join(' ')}\n              style={{ ['--tile-preview' as string]: tilePreviewCssUrl(preview) } as CSSProperties}\n              title={tile}\n              aria-label={tile}\n              aria-pressed={selected}\n              onClick={() => pick(tile)}\n            />\n          );\n        })}\n      </div>\n      <ToggleBar<number>\n        items={TILE_SIZES}\n        value={size}\n        size=\"sm\"\n        ariaLabel=\"Tile size\"\n        onChange={(v) => v != null && resize(v)}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;GCUMG,IAA4C;CAAC;CAAS;CAAc;CAAQ;AAAQ,GAIpFC,IAA0D;CAC9D;EAAE,OAAO;EAAG,OAAO;CAAI;CACvB;EAAE,OAAO;EAAG,OAAO;CAAI;CACvB;EAAE,OAAO;EAAI,OAAO;CAAI;CACxB;EAAE,OAAO;EAAI,OAAO;CAAK;AAC3B,GAEMC,IAAoB,GAGpBC,IAAe;AAKrB,SAASC,EAAO,GAA2C;CACzD,OAAO,UAAUC,EAAK,UAAUA,EAAK,UAAU;AACjD;AAMA,SAAgBC,EACd,GACA,GACA,IAAeJ,GACF;CACb,IAAMK,IAAwB;EAAE;EAAM,OAAOC;EAAM;CAAK;CAIxD,OADIC,MAAS,aAAU,EAAK,KAAK,cAC1B;EAAE,MAAM;EAAW,SAASF;EAAM,OAAO;CAAS;AAC3D;AAqBA,SAAgBG,EAAc,GAAyC;CACrE,IAAM,EAAE,UAAO,UAAO,aAAU,iBAAcC,GACxCJ,IAAOH,EAAOQ,CAAK,GACnBC,IAAON,GAAM,QAAQL,GAErBY,KAAQ,MAAwC;EACpD,EAASR,EAAYG,GAAMM,GAAOF,CAAI,CAAC;CACzC,GAEMG,KAAU,MAA2B;EACzC,AAAKT,KACLU,EAAS;GAAE,GAAGL;GAAO,SAAS;IAAE,GAAGL;IAAM,MAAMW;GAAS;EAAE,CAAC;CAC7D;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,CAACrB,EAAE,MAAMsB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAA5D,UAAA,CACE,kBAAC,OAAD;GAAK,WAAWtB,EAAE;GACf,UAAAG,EAAM,KAAK,MAAS;IACnB,IAAMoB,IAA2B;KAAE;KAAM;KAAO,MAAMjB;IAAa;IACnE,AAAIM,MAAS,aAAU,EAAQ,KAAK;IACpC,IAAMY,IAAWd,GAAM,SAASE;IAChC,OACE,kBAAC,UAAD;KAEE,MAAK;KACL,WAAW,CAACZ,EAAE,QAAQwB,KAAYxB,EAAE,YAAY,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;KAC1E,OAAO,EAAG,kBAA6ByB,EAAkBF,CAAO,EAAE;KAClE,OAAOX;KACP,cAAYA;KACZ,gBAAcY;KACd,eAAeP,EAAKL,CAAI;IACzB,GARMA,CAQN;GAEL,CAAC;EACE,CAAA,GACL,kBAACX,GAAD;GACE,OAAOG;GACP,OAAOY;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAAMU,KAAK,QAAQP,EAAOO,CAAC;EACvC,CAAA,CACE;;AAET"}