@weasel-js/ui 1.1.0 → 1.3.0-pre.0

package/dist/chunks/NumberField-ZdVa4bpJ.js

@@ -0,0 +1,59 @@
+import { n as e } from "./Field-BjFl_yng.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { Button as i, FieldError as a, Group as o, Input as s, Label as c, NumberField as l, Text as u } from "react-aria-components";
+var d = {
+	field: "_field_1o8zh_1",
+	frame: "_frame_1o8zh_9",
+	steppers: "_steppers_1o8zh_57",
+	stepper: "_stepper_1o8zh_57"
+}, f = r(function(r, f) {
+	let { label: p, description: m, errorMessage: h, hideSteppers: g, placeholder: _, className: v, ...y } = r;
+	return /* @__PURE__ */ n(l, {
+		...y,
+		className: [
+			d.field,
+			e.root,
+			v
+		].filter(Boolean).join(" "),
+		children: [
+			p !== void 0 && /* @__PURE__ */ t(c, {
+				className: e.label,
+				children: p
+			}),
+			/* @__PURE__ */ n(o, {
+				className: d.frame,
+				children: [/* @__PURE__ */ t(s, {
+					ref: f,
+					placeholder: _
+				}), !g && /* @__PURE__ */ n("div", {
+					className: d.steppers,
+					children: [/* @__PURE__ */ t(i, {
+						slot: "increment",
+						className: d.stepper,
+						"aria-label": "Increment",
+						children: "▲"
+					}), /* @__PURE__ */ t(i, {
+						slot: "decrement",
+						className: d.stepper,
+						"aria-label": "Decrement",
+						children: "▼"
+					})]
+				})]
+			}),
+			m !== void 0 && /* @__PURE__ */ t(u, {
+				slot: "description",
+				className: e.hint,
+				children: m
+			}),
+			/* @__PURE__ */ t(a, {
+				className: e.error,
+				children: h
+			})
+		]
+	});
+});
+//#endregion
+export { f as t };
+
+//# sourceMappingURL=NumberField-ZdVa4bpJ.js.map

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

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

package/dist/chunks/{OptionsBar-CHvH4n4u.js → OptionsBar-DahCI4Aq.js}

@@ -1,7 +1,7 @@
-import { t as e } from "./useRovingTabIndex-DBZtq4IH.js";
-import { t } from "./segmentedControl.module-DCyuDbj1.js";
-import "react";
+import { t as e } from "./useRovingTabIndex-CQz8EiKh.js";
+import { t } from "./segmentedControl.module-D4b7x19O.js";
 import { jsx as n } from "react/jsx-runtime";
+import "react";
 //#region src/components/OptionsBar/OptionsBar.tsx
 function r(r) {
 	let { items: i, ariaLabel: a, className: o, height: s, size: c, variant: l } = r, u = (e) => {
@@ -42,4 +42,4 @@ function r(r) {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=OptionsBar-CHvH4n4u.js.map
+//# sourceMappingURL=OptionsBar-DahCI4Aq.js.map

package/dist/chunks/{OptionsBar-CHvH4n4u.js.map → OptionsBar-DahCI4Aq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"OptionsBar-CHvH4n4u.js","names":[],"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,SAAgB,EAA+C,GAAyC;CACtG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAY,GAEzD,KAAU,MAAkB;EAChC,IAAM,IAAO,EAAM;AACf,IAAK,YACT,EAAK,SAAS,CAAC,EAAK,SAAS;IAGzB,IAAS,EAAkB;EAAE;EAAO,eAAe,EAAE;EAAS,YAAY;EAAQ,CAAC,EAEnF,IAAmC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,mBAA8B,GAAG,EAAO,KAAK,EAG/C,IAAU;EACd,EAAE;EACF,KAAQ,EAAE,QAAQ;EAClB,KAAW,EAAE,WAAW;EACxB;EACD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAE3B,QACE,kBAAC,OAAD;EACE,KAAK,EAAO;EACZ,WAAW;EACX,MAAK;EACL,cAAY;EACL;YAEN,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAM,GAAG,EAAE,UAAU,EAAK,WAAW,IAAI,EAAE,oBAAoB;AACrE,UACE,kBAAC,UAAD;IAEE,MAAK;IACL,gBAAc,EAAK;IACnB,cAAY,EAAK;IACjB,UAAU,EAAK;IACf,UAAU,EAAO,YAAY,EAAE;IAC/B,WAAW;IACX,eAAe,EAAO,EAAE;IACxB,WAAW,EAAO,UAAU,EAAE;cAE7B,EAAK;IACC,EAXF,EAAK,MAWH;IAEX;EACE,CAAA"}
+{"version":3,"file":"OptionsBar-DahCI4Aq.js","names":[],"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,SAAgB,EAA+C,GAAyC;CACtG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAY,GAEzD,KAAU,MAAkB;EAChC,IAAM,IAAO,EAAM;AACf,IAAK,YACT,EAAK,SAAS,CAAC,EAAK,SAAS;IAGzB,IAAS,EAAkB;EAAE;EAAO,eAAe,EAAE;EAAS,YAAY;EAAQ,CAAC,EAEnF,IAAmC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,mBAA8B,GAAG,EAAO,KAAK,EAG/C,IAAU;EACd,EAAE;EACF,KAAQ,EAAE,QAAQ;EAClB,KAAW,EAAE,WAAW;EACxB;EACD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAE3B,QACE,kBAAC,OAAD;EACE,KAAK,EAAO;EACZ,WAAW;EACX,MAAK;EACL,cAAY;EACL;YAEN,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAM,GAAG,EAAE,UAAU,EAAK,WAAW,IAAI,EAAE,oBAAoB;AACrE,UACE,kBAAC,UAAD;IAEE,MAAK;IACL,gBAAc,EAAK;IACnB,cAAY,EAAK;IACjB,UAAU,EAAK;IACf,UAAU,EAAO,YAAY,EAAE;IAC/B,WAAW;IACX,eAAe,EAAO,EAAE;IACxB,WAAW,EAAO,UAAU,EAAE;cAE7B,EAAK;IACC,EAXF,EAAK,MAWH;IAEX;EACE,CAAA"}

package/dist/chunks/PaintInput-Cggm9OIl.js

@@ -0,0 +1,205 @@
+import { t as e } from "./ToggleBar-BxgWq-wO.js";
+import { t } from "./ColorField-D1t-BdSa.js";
+import { r as n } from "./GradientEditor-BJRD0n1g.js";
+import { t as r } from "./PatternPicker-B63SlDoF.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { getPaintKind as o, listPaintKinds as s, withGradientKind as c } from "@weasel-js/core";
+import { useCallback as l, useRef as u } from "react";
+//#region src/icons/paths.ts
+var d = {
+	clone: "<path d=\"M7 7.4V4.6A1.6 1.6 0 0 1 8.6 3h6.8A1.6 1.6 0 0 1 17 4.6v6.8a1.6 1.6 0 0 1-1.6 1.6H12.6\" stroke-linecap=\"butt\"/><rect x=\"3\" y=\"7\" width=\"10\" height=\"10\" rx=\"1.6\"/><path d=\"M5.7 10.8h4.6M5.7 13.4h3\" stroke-width=\"1\"/>",
+	reset: "<path d=\"M7.28 4.88A5.8 5.8 0 1 0 12.72 4.88\"/><path d=\"M13.81 7.57 12.72 4.88 15.56 4.28\"/>",
+	close: "<path d=\"M5 5 15 15M15 5 5 15\" stroke-width=\"1.75\"/>",
+	export: "<path d=\"M4 12.6v2.9A1.5 1.5 0 0 0 5.5 17h9a1.5 1.5 0 0 0 1.5-1.5v-2.9\"/><path d=\"M10 3.2v8.5\"/><path d=\"M11.7 9.35 10 11.7 8.3 9.35\"/><path d=\"M6.8 14.7h6.4\" stroke-width=\"1\"/>",
+	zoomIn: "<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/><path d=\"M9 6.7v4.6M6.7 9h4.6\"/>",
+	pan: "<path d=\"M10 8.1V3.2M10 11.9V16.8M8.1 10H3.2M11.9 10H16.8\"/><path d=\"M8.26 5.27 10 3.2 11.74 5.27M11.74 14.73 10 16.8 8.26 14.73M5.27 11.74 3.2 10 5.27 8.26M14.73 8.26 16.8 10 14.73 11.74\"/><circle cx=\"10\" cy=\"10\" r=\"1.9\"/>",
+	add: "<path d=\"M10 4.9v10.2M4.9 10h10.2\"/>",
+	remove: "<path d=\"M4.9 10h10.2\"/>",
+	delete: "<path d=\"M3.6 5.8h12.8M8 5.8V4.5A1.1 1.1 0 0 1 9.1 3.4h1.8A1.1 1.1 0 0 1 12 4.5v1.3\"/><path d=\"M5.2 5.8v9.6A1.6 1.6 0 0 0 6.8 17h6.4a1.6 1.6 0 0 0 1.6-1.6V5.8\"/><path d=\"M8.4 8.8v5.2M11.6 8.8v5.2\" stroke-width=\"1\"/>",
+	sort: "<path d=\"M3.6 5.6h7.2M3.6 10h8.8M3.6 14.4h5\"/><path d=\"M15.3 5.4v9.4\"/><path d=\"M16.97 12.81 15.3 14.8 13.63 12.81\"/>",
+	undo: "<path d=\"M4.4 8.4h6.8a3.6 3.6 0 0 1 0 7.2H8.6\"/><path d=\"M6.47 10.14 4.4 8.4 6.47 6.66\"/>",
+	redo: "<path d=\"M15.6 8.4H8.8a3.6 3.6 0 0 0 0 7.2H11.4\"/><path d=\"M13.53 6.66 15.6 8.4 13.53 10.14\"/>",
+	zoomOut: "<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/><path d=\"M6.7 9h4.6\"/>",
+	fit: "<path d=\"M3.2 7.2V4.4A1.2 1.2 0 0 1 4.4 3.2h2.8M12.8 3.2h2.8A1.2 1.2 0 0 1 16.8 4.4v2.8M16.8 12.8v2.8a1.2 1.2 0 0 1-1.2 1.2h-2.8M7.2 16.8H4.4a1.2 1.2 0 0 1-1.2-1.2v-2.8\"/><rect x=\"7.4\" y=\"8.2\" width=\"5.2\" height=\"3.6\" rx=\"0.8\" stroke-width=\"1\"/>",
+	snapshot: "<path d=\"M3.8 8.3A1.4 1.4 0 0 1 5.2 6.9h1.9L8 5.1h4l.9 1.8h1.9A1.4 1.4 0 0 1 16.2 8.3v6A1.4 1.4 0 0 1 14.8 15.7H5.2A1.4 1.4 0 0 1 3.8 14.3z\"/><circle cx=\"10\" cy=\"11\" r=\"2.75\"/>",
+	play: "<path d=\"M7.6 5.2 15.6 10 7.6 14.8Z\"/>",
+	pause: "<path d=\"M7.8 5.2v9.6M12.2 5.2v9.6\"/>",
+	stop: "<rect x=\"5.6\" y=\"5.6\" width=\"8.8\" height=\"8.8\" rx=\"1.4\"/>",
+	step: "<path d=\"M6.4 5.4 13 10 6.4 14.6Z\"/><path d=\"M15.2 5.4v9.2\"/>",
+	crosshair: "<circle cx=\"10\" cy=\"10\" r=\"5.6\"/><path d=\"M10 2.8v4.4M10 12.8v4.4M2.8 10h4.4M12.8 10h4.4\"/>",
+	fullscreen: "<path d=\"M11.6 3.6h4.8v4.8M8.4 16.4H3.6v-4.8\"/><path d=\"M16.4 3.6 11.2 8.8M3.6 16.4 8.8 11.2\"/>",
+	compare: "<rect x=\"3.4\" y=\"4.6\" width=\"13.2\" height=\"10.8\" rx=\"1.6\"/><path d=\"M10 4.6v10.8\" stroke-width=\"1\"/><path d=\"M5.2 7.6h3.4M5.2 10h2.6M5.2 12.4h3.4\" stroke-width=\"1\"/><path d=\"M11.4 7.6h3.4M11.4 10h3.4M11.4 12.4h1.8\" stroke-width=\"1\"/>",
+	filter: "<path d=\"M3.4 4.6h13.2L11.8 11v5.4L8.2 14.8V11z\"/>",
+	search: "<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/>",
+	layers: "<path d=\"M10 2.8 17.2 6.6 10 10.4 2.8 6.6z\"/><path d=\"M2.8 10 10 13.8 17.2 10\" stroke-width=\"1\"/><path d=\"M2.8 13.4 10 17.2 17.2 13.4\" stroke-width=\"1\"/>",
+	lock: "<rect x=\"4.6\" y=\"9\" width=\"10.8\" height=\"8\" rx=\"1.6\"/><path d=\"M7.2 9V6.6a2.8 2.8 0 0 1 5.6 0V9\"/>",
+	unlock: "<rect x=\"4.6\" y=\"9\" width=\"10.8\" height=\"8\" rx=\"1.6\"/><path d=\"M7.2 9V6.6a2.8 2.8 0 0 1 5.6 0\"/>",
+	visible: "<path d=\"M2.6 10C4.6 6.6 7.1 5 10 5s5.4 1.6 7.4 5c-2 3.4-4.5 5-7.4 5s-5.4-1.6-7.4-5z\"/><circle cx=\"10\" cy=\"10\" r=\"2.2\"/>",
+	hidden: "<path d=\"M2.6 10C4.6 6.6 7.1 5 10 5s5.4 1.6 7.4 5c-2 3.4-4.5 5-7.4 5s-5.4-1.6-7.4-5z\"/><circle cx=\"10\" cy=\"10\" r=\"2.2\"/><path d=\"M4.2 15.8 15.8 4.2\"/>",
+	pin: "<path d=\"M8.2 3.4v5.2l-2 2.6h7.6l-2-2.6V3.4z\"/><path d=\"M7 3.4h6\"/><path d=\"M10 11.2v5.4\"/>",
+	link: "<path d=\"M8.6 11.4a3.4 3.4 0 0 1 0-4.8l2.2-2.2a3.4 3.4 0 0 1 4.8 4.8l-1.1 1.1\"/><path d=\"M11.4 8.6a3.4 3.4 0 0 1 0 4.8l-2.2 2.2a3.4 3.4 0 0 1-4.8-4.8l1.1-1.1\"/>",
+	collapse: "<path d=\"M14.16 4.05 10 7.8 5.84 4.05M5.84 15.95 10 12.2 14.16 15.95\"/>",
+	expand: "<path d=\"M5.84 8.15 10 4.4 14.16 8.15M14.16 11.85 10 15.6 5.84 11.85\"/>",
+	tune: "<path d=\"M3.4 6h13.2M3.4 10h13.2M3.4 14h13.2\" stroke-width=\"1.25\"/><circle cx=\"7\" cy=\"6\" r=\"1.8\"/><circle cx=\"12.6\" cy=\"10\" r=\"1.8\"/><circle cx=\"9\" cy=\"14\" r=\"1.8\"/>",
+	grid: "<rect x=\"3.4\" y=\"3.4\" width=\"13.2\" height=\"13.2\" rx=\"1.4\"/><path d=\"M7.8 3.4v13.2M12.2 3.4v13.2M3.4 7.8h13.2M3.4 12.2h13.2\" stroke-width=\"1\"/>",
+	snap: "<path d=\"M5.4 15.6V9.4a4.6 4.6 0 0 1 9.2 0v6.2h-3.2V9.4a1.4 1.4 0 0 0-2.8 0v6.2z\"/><path d=\"M5.4 12.8h3.2M11.4 12.8h3.2\" stroke-width=\"1\"/>",
+	measure: "<rect x=\"2.6\" y=\"7.4\" width=\"14.8\" height=\"5.2\" rx=\"1.2\"/><path d=\"M6 7.4v2.2M9.4 7.4v3M12.8 7.4v2.2\" stroke-width=\"1\"/>",
+	randomize: "<rect x=\"3.6\" y=\"3.6\" width=\"12.8\" height=\"12.8\" rx=\"2\"/><circle cx=\"7.2\" cy=\"7.2\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"12.8\" cy=\"12.8\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/>",
+	refresh: "<path d=\"M4.27 12.09A6.1 6.1 0 0 1 14.67 6.08\"/><path d=\"M14.67 3.38 14.67 6.08 12.01 5.61\"/><path d=\"M15.73 7.91A6.1 6.1 0 0 1 5.33 13.92\"/><path d=\"M5.33 16.62 5.33 13.92 7.99 14.39\"/>",
+	info: "<circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M10 9.4v4.4\"/><path d=\"M10 6.5h0\"/>",
+	warning: "<path d=\"M10 3.4 17.4 16.2H2.6z\"/><path d=\"M10 8.4v3.4\"/><path d=\"M10 14h0\"/>",
+	error: "<circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M7.6 7.6 12.4 12.4M12.4 7.6 7.6 12.4\"/>",
+	busy: "<path d=\"M10 3.2A6.8 6.8 0 1 1 3.2 10\"/>",
+	strokeWidth: "<path d=\"M3.4 5.6h13.2\" stroke-width=\"1\"/><path d=\"M3.4 10h13.2\" stroke-width=\"2\"/><path d=\"M3.4 15.2h13.2\" stroke-width=\"3.4\"/>",
+	strokeCap: "<path d=\"M2.5 10H12\" stroke-linecap=\"butt\"/><path d=\"M12 6V14\" stroke-width=\"1\"/>",
+	strokeJoin: "<path d=\"M4.4 15.5 10 5.5 15.6 15.5\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\"/>",
+	strokeAlign: "<circle cx=\"10\" cy=\"10\" r=\"6.2\"/>",
+	capButt: "<path d=\"M5.5 5.25H14.5V14.75H5.5Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/>",
+	capRound: "<path d=\"M3.13 5.25H12.13V14.75H3.13Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/><path d=\"M12.13 4.5A5.5 5.5 0 0 1 12.13 15.5Z\" fill=\"currentColor\" stroke=\"none\"/>",
+	capSquare: "<path d=\"M3.13 5.25H12.13V14.75H3.13Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/><path d=\"M12.13 4.5H17.63V15.5H12.13Z\" fill=\"currentColor\" stroke=\"none\"/>",
+	joinMiter: "<path d=\"M10 3.5 15.6 15.5H4.4Z\" fill=\"currentColor\" stroke=\"none\"/>",
+	joinRound: "<path d=\"M4.4 15.5V12a5.6 5.6 0 0 1 11.2 0v3.5Z\" fill=\"currentColor\" stroke=\"none\"/>",
+	joinBevel: "<path d=\"M6.8 8.2h6.4l2.4 7.3H4.4Z\" fill=\"currentColor\" stroke=\"none\"/>",
+	alignInner: "<path d=\"M10 3.8A6.2 6.2 0 1 0 10 16.2A6.2 6.2 0 1 0 10 3.8Z\" fill=\"currentColor\" stroke=\"none\"/>",
+	alignCenter: "<path d=\"M10 2.1A7.9 7.9 0 1 0 10 17.9A7.9 7.9 0 1 0 10 2.1ZM10 5.5A4.5 4.5 0 1 0 10 14.5A4.5 4.5 0 1 0 10 5.5Z\" fill=\"currentColor\" stroke=\"none\" fill-rule=\"evenodd\"/>",
+	alignOuter: "<path d=\"M0 0H20V20H0ZM10 3.8A6.2 6.2 0 1 0 10 16.2A6.2 6.2 0 1 0 10 3.8Z\" fill=\"currentColor\" stroke=\"none\" fill-rule=\"evenodd\"/>",
+	dashSolid: "<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\"/>",
+	dashDashed: "<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"6 4\"/>",
+	dashDotted: "<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"2.5 2\"/>",
+	dashCustom: "<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"5 2 2 2\"/>",
+	paintSolid: "<path d=\"M3.4 3.4H16.6V16.6H3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/>",
+	paintLinear: "<path d=\"M3.4 3.4H6.7V16.6H3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/><path d=\"M6.7 3.4H10V16.6H6.7Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.68\"/><path d=\"M10 3.4H13.3V16.6H10Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.42\"/><path d=\"M13.3 3.4H16.6V16.6H13.3Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.2\"/>",
+	paintRadial: "<path d=\"M3.4 3.4H16.6V16.6H3.4ZM4.95 4.95H15.05V15.05H4.95Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.7\"/><path d=\"M4.95 4.95H15.05V15.05H4.95ZM6.5 6.5H13.5V13.5H6.5Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.53\"/><path d=\"M6.5 6.5H13.5V13.5H6.5ZM8.05 8.05H11.95V11.95H8.05Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.37\"/><path d=\"M8.05 8.05H11.95V11.95H8.05Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.2\"/>",
+	paintConic: "<path d=\"M10 10L16.6 3.4L16.6 16.6Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/><path d=\"M10 10L16.6 16.6L3.4 16.6Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.68\"/><path d=\"M10 10L3.4 16.6L3.4 3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.42\"/><path d=\"M10 10L3.4 3.4L16.6 3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.2\"/>",
+	paintPattern: "<path d=\"M3.4 3.4L4.7 3.4L3.4 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M8.7 3.4L11.3 3.4L3.4 11.3L3.4 8.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M15.3 3.4L16.6 3.4L16.6 4.7L4.7 16.6L3.4 16.6L3.4 15.3Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M16.6 8.7L16.6 11.3L11.3 16.6L8.7 16.6Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M16.6 15.3L16.6 16.6L15.3 16.6Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M15.3 3.4L16.6 3.4L16.6 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M8.7 3.4L11.3 3.4L16.6 8.7L16.6 11.3Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M3.4 3.4L4.7 3.4L16.6 15.3L16.6 16.6L15.3 16.6L3.4 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M11.3 16.6L8.7 16.6L3.4 11.3L3.4 8.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M4.7 16.6L3.4 16.6L3.4 15.3Z\" fill=\"currentColor\" stroke=\"none\"/>",
+	paintNone: "<path d=\"M3.4 3.4H16.6V16.6H3.4Z\"/><path d=\"M3.4 16.6L16.6 3.4\" stroke=\"var(--wzl-danger, #d94a3f)\" stroke-width=\"1.8\" stroke-linecap=\"butt\"/>"
+}, f = {
+	viewBox: "0 0 20 20",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.5,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+function p({ name: e, className: t, size: n = 20, label: r }) {
+	return /* @__PURE__ */ i("svg", {
+		...f,
+		className: t,
+		width: n,
+		height: n,
+		role: r ? "img" : void 0,
+		"aria-label": r,
+		"aria-hidden": r ? void 0 : !0,
+		dangerouslySetInnerHTML: { __html: d[e] }
+	});
+}
+var m = {
+	root: "_root_1c3p1_2",
+	unset: "_unset_1c3p1_10"
+}, h = "#000000ff", g = "none", _ = [
+	"linear-gradient",
+	"radial-gradient",
+	"conic-gradient"
+];
+function v(e) {
+	return e !== void 0 && _.includes(e.fill ?? "");
+}
+function y(e) {
+	return e?.fill === "pattern";
+}
+function b(e) {
+	return e === null ? g : e === void 0 ? null : e.fill ?? "solid";
+}
+function x(f) {
+	let { value: x, mixed: S = !1, unset: C = !1, kinds: w, allowNone: T = !0, onInput: E, onChange: D, className: O } = f, k = f["aria-label"], A = u(/* @__PURE__ */ new Map()), j = S ? null : b(x);
+	x != null && j !== null && A.current.set(j, x);
+	let M = s().filter((e) => w === void 0 || w.includes(e.id)), N = (e, t, n) => n && n in d ? {
+		value: e,
+		label: /* @__PURE__ */ i(p, {
+			name: n,
+			size: 14
+		}),
+		ariaLabel: t
+	} : {
+		value: e,
+		label: t
+	}, P = [...T ? [N(g, "None", "paintNone")] : [], ...M.map((e) => N(e.id, e.label, e.icon))], F = l(() => x == null ? h : o(b(x) ?? "solid")?.colorOf(x) ?? h, [x]), I = (e) => {
+		if (e === j) return;
+		if (e === g) {
+			D(null);
+			return;
+		}
+		let t = A.current.get(e);
+		if (t !== void 0) {
+			D(t);
+			return;
+		}
+		if (x != null && v(x) && _.includes(e)) {
+			D(c(x, e));
+			return;
+		}
+		let n = o(e);
+		n && D(n.seed(F()));
+	};
+	return /* @__PURE__ */ a("div", {
+		className: [
+			m.root,
+			C && m.unset,
+			O
+		].filter(Boolean).join(" "),
+		title: C ? "Not set" : void 0,
+		children: [/* @__PURE__ */ i(e, {
+			items: P,
+			value: j,
+			size: "sm",
+			ariaLabel: "Paint kind",
+			onChange: (e) => e && I(e)
+		}), L()]
+	});
+	function L() {
+		if (S || x === void 0) return /* @__PURE__ */ i(t, {
+			mixed: !0,
+			"aria-label": k,
+			onChange: (e) => D({
+				fill: "solid",
+				color: e
+			})
+		});
+		if (x === null) return null;
+		let e = o(b(x) ?? "solid");
+		if (e?.Editor) {
+			let t = e.Editor;
+			return /* @__PURE__ */ i(t, {
+				value: x,
+				onInput: E,
+				onChange: D
+			});
+		}
+		return v(x) ? /* @__PURE__ */ i(n, {
+			value: x,
+			kindSwitch: !1,
+			onInput: E,
+			onChange: D
+		}) : y(x) ? /* @__PURE__ */ i(r, {
+			value: x,
+			color: F(),
+			onChange: D
+		}) : /* @__PURE__ */ i(t, {
+			value: F(),
+			alpha: !0,
+			"aria-label": k,
+			onInput: (e) => E?.({
+				fill: "solid",
+				color: e
+			}),
+			onChange: (e) => D({
+				fill: "solid",
+				color: e
+			})
+		});
+	}
+}
+//#endregion
+export { p as n, d as r, x as t };
+
+//# sourceMappingURL=PaintInput-Cggm9OIl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaintInput-Cggm9OIl.js","names":[],"sources":["../../src/icons/paths.ts","../../src/icons/Icon.tsx","../../src/components/PaintInput/PaintInput.module.css","../../src/components/PaintInput/PaintInput.tsx"],"sourcesContent":["// GENERATED by scripts/gen-icons.mjs — do not edit by hand.\n// Every glyph is a 20x20 viewBox drawn in currentColor at stroke-width 1.5.\n\nexport const ICON_PATHS = {\n\n  // View and lifecycle\n  clone: `<path d=\"M7 7.4V4.6A1.6 1.6 0 0 1 8.6 3h6.8A1.6 1.6 0 0 1 17 4.6v6.8a1.6 1.6 0 0 1-1.6 1.6H12.6\" stroke-linecap=\"butt\"/><rect x=\"3\" y=\"7\" width=\"10\" height=\"10\" rx=\"1.6\"/><path d=\"M5.7 10.8h4.6M5.7 13.4h3\" stroke-width=\"1\"/>`,\n  reset: `<path d=\"M7.28 4.88A5.8 5.8 0 1 0 12.72 4.88\"/><path d=\"M13.81 7.57 12.72 4.88 15.56 4.28\"/>`,\n  close: `<path d=\"M5 5 15 15M15 5 5 15\" stroke-width=\"1.75\"/>`,\n  export: `<path d=\"M4 12.6v2.9A1.5 1.5 0 0 0 5.5 17h9a1.5 1.5 0 0 0 1.5-1.5v-2.9\"/><path d=\"M10 3.2v8.5\"/><path d=\"M11.7 9.35 10 11.7 8.3 9.35\"/><path d=\"M6.8 14.7h6.4\" stroke-width=\"1\"/>`,\n  zoomIn: `<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/><path d=\"M9 6.7v4.6M6.7 9h4.6\"/>`,\n  pan: `<path d=\"M10 8.1V3.2M10 11.9V16.8M8.1 10H3.2M11.9 10H16.8\"/><path d=\"M8.26 5.27 10 3.2 11.74 5.27M11.74 14.73 10 16.8 8.26 14.73M5.27 11.74 3.2 10 5.27 8.26M14.73 8.26 16.8 10 14.73 11.74\"/><circle cx=\"10\" cy=\"10\" r=\"1.9\"/>`,\n\n  // Actions\n  add: `<path d=\"M10 4.9v10.2M4.9 10h10.2\"/>`,\n  remove: `<path d=\"M4.9 10h10.2\"/>`,\n  delete: `<path d=\"M3.6 5.8h12.8M8 5.8V4.5A1.1 1.1 0 0 1 9.1 3.4h1.8A1.1 1.1 0 0 1 12 4.5v1.3\"/><path d=\"M5.2 5.8v9.6A1.6 1.6 0 0 0 6.8 17h6.4a1.6 1.6 0 0 0 1.6-1.6V5.8\"/><path d=\"M8.4 8.8v5.2M11.6 8.8v5.2\" stroke-width=\"1\"/>`,\n  sort: `<path d=\"M3.6 5.6h7.2M3.6 10h8.8M3.6 14.4h5\"/><path d=\"M15.3 5.4v9.4\"/><path d=\"M16.97 12.81 15.3 14.8 13.63 12.81\"/>`,\n  undo: `<path d=\"M4.4 8.4h6.8a3.6 3.6 0 0 1 0 7.2H8.6\"/><path d=\"M6.47 10.14 4.4 8.4 6.47 6.66\"/>`,\n  redo: `<path d=\"M15.6 8.4H8.8a3.6 3.6 0 0 0 0 7.2H11.4\"/><path d=\"M13.53 6.66 15.6 8.4 13.53 10.14\"/>`,\n  zoomOut: `<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/><path d=\"M6.7 9h4.6\"/>`,\n  fit: `<path d=\"M3.2 7.2V4.4A1.2 1.2 0 0 1 4.4 3.2h2.8M12.8 3.2h2.8A1.2 1.2 0 0 1 16.8 4.4v2.8M16.8 12.8v2.8a1.2 1.2 0 0 1-1.2 1.2h-2.8M7.2 16.8H4.4a1.2 1.2 0 0 1-1.2-1.2v-2.8\"/><rect x=\"7.4\" y=\"8.2\" width=\"5.2\" height=\"3.6\" rx=\"0.8\" stroke-width=\"1\"/>`,\n  snapshot: `<path d=\"M3.8 8.3A1.4 1.4 0 0 1 5.2 6.9h1.9L8 5.1h4l.9 1.8h1.9A1.4 1.4 0 0 1 16.2 8.3v6A1.4 1.4 0 0 1 14.8 15.7H5.2A1.4 1.4 0 0 1 3.8 14.3z\"/><circle cx=\"10\" cy=\"11\" r=\"2.75\"/>`,\n\n  // State and instrument\n  play: `<path d=\"M7.6 5.2 15.6 10 7.6 14.8Z\"/>`,\n  pause: `<path d=\"M7.8 5.2v9.6M12.2 5.2v9.6\"/>`,\n  stop: `<rect x=\"5.6\" y=\"5.6\" width=\"8.8\" height=\"8.8\" rx=\"1.4\"/>`,\n  step: `<path d=\"M6.4 5.4 13 10 6.4 14.6Z\"/><path d=\"M15.2 5.4v9.2\"/>`,\n  crosshair: `<circle cx=\"10\" cy=\"10\" r=\"5.6\"/><path d=\"M10 2.8v4.4M10 12.8v4.4M2.8 10h4.4M12.8 10h4.4\"/>`,\n  fullscreen: `<path d=\"M11.6 3.6h4.8v4.8M8.4 16.4H3.6v-4.8\"/><path d=\"M16.4 3.6 11.2 8.8M3.6 16.4 8.8 11.2\"/>`,\n  compare: `<rect x=\"3.4\" y=\"4.6\" width=\"13.2\" height=\"10.8\" rx=\"1.6\"/><path d=\"M10 4.6v10.8\" stroke-width=\"1\"/><path d=\"M5.2 7.6h3.4M5.2 10h2.6M5.2 12.4h3.4\" stroke-width=\"1\"/><path d=\"M11.4 7.6h3.4M11.4 10h3.4M11.4 12.4h1.8\" stroke-width=\"1\"/>`,\n  filter: `<path d=\"M3.4 4.6h13.2L11.8 11v5.4L8.2 14.8V11z\"/>`,\n  search: `<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/>`,\n  layers: `<path d=\"M10 2.8 17.2 6.6 10 10.4 2.8 6.6z\"/><path d=\"M2.8 10 10 13.8 17.2 10\" stroke-width=\"1\"/><path d=\"M2.8 13.4 10 17.2 17.2 13.4\" stroke-width=\"1\"/>`,\n  lock: `<rect x=\"4.6\" y=\"9\" width=\"10.8\" height=\"8\" rx=\"1.6\"/><path d=\"M7.2 9V6.6a2.8 2.8 0 0 1 5.6 0V9\"/>`,\n  unlock: `<rect x=\"4.6\" y=\"9\" width=\"10.8\" height=\"8\" rx=\"1.6\"/><path d=\"M7.2 9V6.6a2.8 2.8 0 0 1 5.6 0\"/>`,\n  visible: `<path d=\"M2.6 10C4.6 6.6 7.1 5 10 5s5.4 1.6 7.4 5c-2 3.4-4.5 5-7.4 5s-5.4-1.6-7.4-5z\"/><circle cx=\"10\" cy=\"10\" r=\"2.2\"/>`,\n  hidden: `<path d=\"M2.6 10C4.6 6.6 7.1 5 10 5s5.4 1.6 7.4 5c-2 3.4-4.5 5-7.4 5s-5.4-1.6-7.4-5z\"/><circle cx=\"10\" cy=\"10\" r=\"2.2\"/><path d=\"M4.2 15.8 15.8 4.2\"/>`,\n  pin: `<path d=\"M8.2 3.4v5.2l-2 2.6h7.6l-2-2.6V3.4z\"/><path d=\"M7 3.4h6\"/><path d=\"M10 11.2v5.4\"/>`,\n  link: `<path d=\"M8.6 11.4a3.4 3.4 0 0 1 0-4.8l2.2-2.2a3.4 3.4 0 0 1 4.8 4.8l-1.1 1.1\"/><path d=\"M11.4 8.6a3.4 3.4 0 0 1 0 4.8l-2.2 2.2a3.4 3.4 0 0 1-4.8-4.8l1.1-1.1\"/>`,\n  collapse: `<path d=\"M14.16 4.05 10 7.8 5.84 4.05M5.84 15.95 10 12.2 14.16 15.95\"/>`,\n  expand: `<path d=\"M5.84 8.15 10 4.4 14.16 8.15M14.16 11.85 10 15.6 5.84 11.85\"/>`,\n  tune: `<path d=\"M3.4 6h13.2M3.4 10h13.2M3.4 14h13.2\" stroke-width=\"1.25\"/><circle cx=\"7\" cy=\"6\" r=\"1.8\"/><circle cx=\"12.6\" cy=\"10\" r=\"1.8\"/><circle cx=\"9\" cy=\"14\" r=\"1.8\"/>`,\n  grid: `<rect x=\"3.4\" y=\"3.4\" width=\"13.2\" height=\"13.2\" rx=\"1.4\"/><path d=\"M7.8 3.4v13.2M12.2 3.4v13.2M3.4 7.8h13.2M3.4 12.2h13.2\" stroke-width=\"1\"/>`,\n  snap: `<path d=\"M5.4 15.6V9.4a4.6 4.6 0 0 1 9.2 0v6.2h-3.2V9.4a1.4 1.4 0 0 0-2.8 0v6.2z\"/><path d=\"M5.4 12.8h3.2M11.4 12.8h3.2\" stroke-width=\"1\"/>`,\n  measure: `<rect x=\"2.6\" y=\"7.4\" width=\"14.8\" height=\"5.2\" rx=\"1.2\"/><path d=\"M6 7.4v2.2M9.4 7.4v3M12.8 7.4v2.2\" stroke-width=\"1\"/>`,\n  randomize: `<rect x=\"3.6\" y=\"3.6\" width=\"12.8\" height=\"12.8\" rx=\"2\"/><circle cx=\"7.2\" cy=\"7.2\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"12.8\" cy=\"12.8\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/>`,\n  refresh: `<path d=\"M4.27 12.09A6.1 6.1 0 0 1 14.67 6.08\"/><path d=\"M14.67 3.38 14.67 6.08 12.01 5.61\"/><path d=\"M15.73 7.91A6.1 6.1 0 0 1 5.33 13.92\"/><path d=\"M5.33 16.62 5.33 13.92 7.99 14.39\"/>`,\n  info: `<circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M10 9.4v4.4\"/><path d=\"M10 6.5h0\"/>`,\n  warning: `<path d=\"M10 3.4 17.4 16.2H2.6z\"/><path d=\"M10 8.4v3.4\"/><path d=\"M10 14h0\"/>`,\n  error: `<circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M7.6 7.6 12.4 12.4M12.4 7.6 7.6 12.4\"/>`,\n  busy: `<path d=\"M10 3.2A6.8 6.8 0 1 1 3.2 10\"/>`,\n\n  // Stroke cap, join, align and dash\n  strokeWidth: `<path d=\"M3.4 5.6h13.2\" stroke-width=\"1\"/><path d=\"M3.4 10h13.2\" stroke-width=\"2\"/><path d=\"M3.4 15.2h13.2\" stroke-width=\"3.4\"/>`,\n  strokeCap: `<path d=\"M2.5 10H12\" stroke-linecap=\"butt\"/><path d=\"M12 6V14\" stroke-width=\"1\"/>`,\n  strokeJoin: `<path d=\"M4.4 15.5 10 5.5 15.6 15.5\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\"/>`,\n  strokeAlign: `<circle cx=\"10\" cy=\"10\" r=\"6.2\"/>`,\n  capButt: `<path d=\"M5.5 5.25H14.5V14.75H5.5Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/>`,\n  capRound: `<path d=\"M3.13 5.25H12.13V14.75H3.13Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/><path d=\"M12.13 4.5A5.5 5.5 0 0 1 12.13 15.5Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n  capSquare: `<path d=\"M3.13 5.25H12.13V14.75H3.13Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/><path d=\"M12.13 4.5H17.63V15.5H12.13Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n  joinMiter: `<path d=\"M10 3.5 15.6 15.5H4.4Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n  joinRound: `<path d=\"M4.4 15.5V12a5.6 5.6 0 0 1 11.2 0v3.5Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n  joinBevel: `<path d=\"M6.8 8.2h6.4l2.4 7.3H4.4Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n  alignInner: `<path d=\"M10 3.8A6.2 6.2 0 1 0 10 16.2A6.2 6.2 0 1 0 10 3.8Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n  alignCenter: `<path d=\"M10 2.1A7.9 7.9 0 1 0 10 17.9A7.9 7.9 0 1 0 10 2.1ZM10 5.5A4.5 4.5 0 1 0 10 14.5A4.5 4.5 0 1 0 10 5.5Z\" fill=\"currentColor\" stroke=\"none\" fill-rule=\"evenodd\"/>`,\n  alignOuter: `<path d=\"M0 0H20V20H0ZM10 3.8A6.2 6.2 0 1 0 10 16.2A6.2 6.2 0 1 0 10 3.8Z\" fill=\"currentColor\" stroke=\"none\" fill-rule=\"evenodd\"/>`,\n  dashSolid: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\"/>`,\n  dashDashed: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"6 4\"/>`,\n  dashDotted: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"2.5 2\"/>`,\n  dashCustom: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"5 2 2 2\"/>`,\n  paintSolid: `<path d=\"M3.4 3.4H16.6V16.6H3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/>`,\n  paintLinear: `<path d=\"M3.4 3.4H6.7V16.6H3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/><path d=\"M6.7 3.4H10V16.6H6.7Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.68\"/><path d=\"M10 3.4H13.3V16.6H10Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.42\"/><path d=\"M13.3 3.4H16.6V16.6H13.3Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.2\"/>`,\n  paintRadial: `<path d=\"M3.4 3.4H16.6V16.6H3.4ZM4.95 4.95H15.05V15.05H4.95Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.7\"/><path d=\"M4.95 4.95H15.05V15.05H4.95ZM6.5 6.5H13.5V13.5H6.5Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.53\"/><path d=\"M6.5 6.5H13.5V13.5H6.5ZM8.05 8.05H11.95V11.95H8.05Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.37\"/><path d=\"M8.05 8.05H11.95V11.95H8.05Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.2\"/>`,\n  paintConic: `<path d=\"M10 10L16.6 3.4L16.6 16.6Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/><path d=\"M10 10L16.6 16.6L3.4 16.6Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.68\"/><path d=\"M10 10L3.4 16.6L3.4 3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.42\"/><path d=\"M10 10L3.4 3.4L16.6 3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.2\"/>`,\n  paintPattern: `<path d=\"M3.4 3.4L4.7 3.4L3.4 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M8.7 3.4L11.3 3.4L3.4 11.3L3.4 8.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M15.3 3.4L16.6 3.4L16.6 4.7L4.7 16.6L3.4 16.6L3.4 15.3Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M16.6 8.7L16.6 11.3L11.3 16.6L8.7 16.6Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M16.6 15.3L16.6 16.6L15.3 16.6Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M15.3 3.4L16.6 3.4L16.6 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M8.7 3.4L11.3 3.4L16.6 8.7L16.6 11.3Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M3.4 3.4L4.7 3.4L16.6 15.3L16.6 16.6L15.3 16.6L3.4 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M11.3 16.6L8.7 16.6L3.4 11.3L3.4 8.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M4.7 16.6L3.4 16.6L3.4 15.3Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n  paintNone: `<path d=\"M3.4 3.4H16.6V16.6H3.4Z\"/><path d=\"M3.4 16.6L16.6 3.4\" stroke=\"var(--wzl-danger, #d94a3f)\" stroke-width=\"1.8\" stroke-linecap=\"butt\"/>`,\n} as const;\n\n/** Every glyph name in the set. */\nexport type IconName = keyof typeof ICON_PATHS;\n","import type { SVGProps } from 'react';\nimport { ICON_PATHS, type IconName } from './paths';\n\n/** Shared prop shape for the icon set. Color comes from the surrounding\n *  `color` CSS property — every glyph strokes in `currentColor`. */\nexport interface IconProps {\n  className?: string;\n  /** Rendered pixel size, applied to both width and height. Defaults to 20. */\n  size?: number;\n  /** Accessible name. Omit inside a button that already labels itself; the\n   *  glyph is then `aria-hidden`. */\n  label?: string;\n}\n\nconst SVG_BASE: SVGProps<SVGSVGElement> = {\n  viewBox: '0 0 20 20',\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: 1.5,\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round',\n};\n\n/** Renders one glyph by name. The named components below are the usual way\n *  in; reach for this when the glyph is chosen at runtime. */\nexport function Icon({ name, className, size = 20, label }: IconProps & { name: IconName }) {\n  return (\n    <svg\n      {...SVG_BASE}\n      className={className}\n      width={size}\n      height={size}\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      // Glyph bodies are generated from scripts/icons/ and contain no\n      // interpolated input.\n      dangerouslySetInnerHTML={{ __html: ICON_PATHS[name] }}\n    />\n  );\n}\n","/* Kind switch stacked over whichever paint body it selects. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\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","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 { 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    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-B63SlDoF.js

@@ -0,0 +1,93 @@
+import { t as e } from "./ToggleBar-BxgWq-wO.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { tilePreviewCssUrl as r } from "@weasel-js/svg";
+var i = {
+	root: "_root_uqwvn_2",
+	grid: "_grid_uqwvn_9",
+	swatch: "_swatch_uqwvn_17",
+	swatchActive: "_swatchActive_uqwvn_36"
+}, a = [
+	"hatch",
+	"crosshatch",
+	"dots",
+	"chunks"
+], o = [
+	{
+		value: 4,
+		label: "S"
+	},
+	{
+		value: 8,
+		label: "M"
+	},
+	{
+		value: 16,
+		label: "L"
+	},
+	{
+		value: 32,
+		label: "XL"
+	}
+], s = 8, c = 16;
+function l(e) {
+	return "tile" in e.pattern ? e.pattern : null;
+}
+function u(e, t, n = s) {
+	let r = {
+		tile: e,
+		color: t,
+		size: n
+	};
+	return e === "chunks" && (r.bg = "#00000000"), {
+		fill: "pattern",
+		pattern: r,
+		units: "bounds"
+	};
+}
+function d(d) {
+	let { value: f, color: p, onChange: m, className: h } = d, g = l(f), _ = g?.size ?? s, v = (e) => {
+		m(u(e, p, _));
+	}, y = (e) => {
+		g && m({
+			...f,
+			pattern: {
+				...g,
+				size: e
+			}
+		});
+	};
+	return /* @__PURE__ */ n("div", {
+		className: [i.root, h].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ t("div", {
+			className: i.grid,
+			children: a.map((e) => {
+				let n = {
+					tile: e,
+					color: p,
+					size: c
+				};
+				e === "chunks" && (n.bg = "#00000000");
+				let a = g?.tile === e;
+				return /* @__PURE__ */ t("button", {
+					type: "button",
+					className: [i.swatch, a && i.swatchActive].filter(Boolean).join(" "),
+					style: { "--tile-preview": r(n) },
+					title: e,
+					"aria-label": e,
+					"aria-pressed": a,
+					onClick: () => v(e)
+				}, e);
+			})
+		}), /* @__PURE__ */ t(e, {
+			items: o,
+			value: _,
+			size: "sm",
+			ariaLabel: "Tile size",
+			onChange: (e) => e != null && y(e)
+		})]
+	});
+}
+//#endregion
+export { u as n, d as t };
+
+//# sourceMappingURL=PatternPicker-B63SlDoF.js.map

package/dist/chunks/PatternPicker-B63SlDoF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternPicker-B63SlDoF.js","names":[],"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: 6px;\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":";;;;;;;;GCUM,IAA4C;CAAC;CAAS;CAAc;CAAQ;CAAS,EAIrF,IAA0D;CAC9D;EAAE,OAAO;EAAG,OAAO;EAAK;CACxB;EAAE,OAAO;EAAG,OAAO;EAAK;CACxB;EAAE,OAAO;EAAI,OAAO;EAAK;CACzB;EAAE,OAAO;EAAI,OAAO;EAAM;CAC3B,EAEK,IAAoB,GAGpB,IAAe;AAKrB,SAAS,EAAO,GAA2C;AACzD,QAAO,UAAU,EAAK,UAAU,EAAK,UAAU;;AAOjD,SAAgB,EACd,GACA,GACA,IAAe,GACF;CACb,IAAM,IAAwB;EAAE;EAAM,OAAO;EAAM;EAAM;AAIzD,QADI,MAAS,aAAU,EAAK,KAAK,cAC1B;EAAE,MAAM;EAAW,SAAS;EAAM,OAAO;EAAU;;AAsB5D,SAAgB,EAAc,GAAyC;CACrE,IAAM,EAAE,UAAO,UAAO,aAAU,iBAAc,GACxC,IAAO,EAAO,EAAM,EACpB,IAAO,GAAM,QAAQ,GAErB,KAAQ,MAAwC;AACpD,IAAS,EAAY,GAAM,GAAO,EAAK,CAAC;IAGpC,KAAU,MAA2B;AACpC,OACL,EAAS;GAAE,GAAG;GAAO,SAAS;IAAE,GAAG;IAAM,MAAM;IAAU;GAAE,CAAC;;AAG9D,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7D,CACE,kBAAC,OAAD;GAAK,WAAW,EAAE;aACf,EAAM,KAAK,MAAS;IACnB,IAAM,IAA2B;KAAE;KAAM;KAAO,MAAM;KAAc;AACpE,IAAI,MAAS,aAAU,EAAQ,KAAK;IACpC,IAAM,IAAW,GAAM,SAAS;AAChC,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,WAAW,CAAC,EAAE,QAAQ,KAAY,EAAE,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KAC3E,OAAO,EAAG,kBAA6B,EAAkB,EAAQ,EAAE;KACnE,OAAO;KACP,cAAY;KACZ,gBAAc;KACd,eAAe,EAAK,EAAK;KACzB,EARK,EAQL;KAEJ;GACE,CAAA,EACN,kBAAC,GAAD;GACE,OAAO;GACP,OAAO;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAAM,KAAK,QAAQ,EAAO,EAAE;GACvC,CAAA,CACE"}

package/dist/chunks/{Plot2D-CEnhzodm.js → Plot2D-sPXTw_-l.js}

@@ -1,5 +1,5 @@
-import { forwardRef as e, useCallback as t, useEffect as n, useImperativeHandle as r, useMemo as i, useRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as n, useCallback as r, useEffect as i, useImperativeHandle as a, useMemo as o, useRef as s } from "react";
 //#region src/dlog.ts
 var c = ["weasel.debug", "weaseldraw.debug"], l = null;
 function u() {
@@ -54,26 +54,26 @@ var g = {
 	root: "_root_1djm7_1",
 	grid: "_grid_1djm7_28",
 	axis: "_axis_1djm7_34"
-}, _ = e(function(e, c) {
-	let { width: l, height: u, xRange: d = [0, 1], yRange: f = [0, 1], grid: _, axes: v, tabIndex: y, className: b, style: x, onPointerDown: S, onKeyDown: C, children: w } = e, T = a(null), E = i(() => ({
+}, _ = n(function(n, c) {
+	let { width: l, height: u, xRange: d = [0, 1], yRange: f = [0, 1], grid: _, axes: v, tabIndex: y, className: b, style: x, onPointerDown: S, onKeyDown: C, children: w } = n, T = s(null), E = o(() => ({
 		xMin: d[0],
 		xMax: d[1],
 		yMin: f[0],
 		yMax: f[1]
-	}), [d, f]), D = i(() => ({
+	}), [d, f]), D = o(() => ({
 		width: l,
 		height: u
-	}), [l, u]), O = t((e) => {
+	}), [l, u]), O = r((e) => {
 		let t = T.current?.getBoundingClientRect(), n = t?.left ?? 0, r = t?.top ?? 0;
 		return {
 			x: e.clientX - n,
 			y: e.clientY - r
 		};
 	}, []);
-	n(() => (p("plot2d", "mount", {
+	i(() => (p("plot2d", "mount", {
 		width: l,
 		height: u
-	}), () => p("plot2d", "unmount")), []), r(c, () => ({
+	}), () => p("plot2d", "unmount")), []), a(c, () => ({
 		get svg() {
 			return T.current;
 		},
@@ -92,7 +92,7 @@ var g = {
 		D,
 		O
 	]);
-	let k = t((e) => {
+	let k = r((e) => {
 		if (!S) return;
 		let t = O(e);
 		S(e, {
@@ -105,7 +105,7 @@ var g = {
 		E,
 		D
 	]);
-	return /* @__PURE__ */ s("svg", {
+	return /* @__PURE__ */ t("svg", {
 		ref: T,
 		className: [g.root, b].filter(Boolean).join(" "),
 		style: x,
@@ -118,40 +118,40 @@ var g = {
 		onKeyDown: C,
 		children: [
 			_ && (() => {
-				let e = _.divisions ?? 3, t = _.color, n = [];
-				for (let t = 1; t <= e; t++) n.push(t / (e + 1));
-				return /* @__PURE__ */ s("g", { children: [n.map((e) => /* @__PURE__ */ o("line", {
+				let n = _.divisions ?? 3, r = _.color, i = [];
+				for (let e = 1; e <= n; e++) i.push(e / (n + 1));
+				return /* @__PURE__ */ t("g", { children: [i.map((t) => /* @__PURE__ */ e("line", {
 					"data-plot-element": "grid",
 					className: g.grid,
-					stroke: t,
-					x1: e * l,
-					x2: e * l,
+					stroke: r,
+					x1: t * l,
+					x2: t * l,
 					y1: 0,
 					y2: u
-				}, `gx-${e}`)), n.map((e) => /* @__PURE__ */ o("line", {
+				}, `gx-${t}`)), i.map((t) => /* @__PURE__ */ e("line", {
 					"data-plot-element": "grid",
 					className: g.grid,
-					stroke: t,
+					stroke: r,
 					x1: 0,
 					x2: l,
-					y1: e * u,
-					y2: e * u
-				}, `gy-${e}`))] });
+					y1: t * u,
+					y2: t * u
+				}, `gy-${t}`))] });
 			})(),
 			v !== !1 && v !== null && (() => {
-				let e = v?.color;
-				return /* @__PURE__ */ s("g", { children: [/* @__PURE__ */ o("line", {
+				let n = v?.color;
+				return /* @__PURE__ */ t("g", { children: [/* @__PURE__ */ e("line", {
 					"data-plot-element": "axis",
 					className: g.axis,
-					stroke: e,
+					stroke: n,
 					x1: 0,
 					x2: l,
 					y1: u,
 					y2: u
-				}), /* @__PURE__ */ o("line", {
+				}), /* @__PURE__ */ e("line", {
 					"data-plot-element": "axis",
 					className: g.axis,
-					stroke: e,
+					stroke: n,
 					x1: 0,
 					x2: 0,
 					y1: 0,
@@ -165,4 +165,4 @@ var g = {
 //#endregion
 export { f as a, p as i, m as n, h as r, _ as t };
 
-//# sourceMappingURL=Plot2D-CEnhzodm.js.map
+//# sourceMappingURL=Plot2D-sPXTw_-l.js.map