@weasel-js/ui 1.4.2 → 1.4.4

package/dist/chunks/Prefs-4JSEtuU-.js

@@ -0,0 +1,294 @@
+import { n as e, t } from "./Tooltip-BHre_vbI.js";
+import { t as n } from "./ColorField-C20aRvCg.js";
+import { t as r } from "./Checkbox-D-pVpobU.js";
+import { t as i } from "./Select-CacMfs4v.js";
+import { t as a } from "./FontFamilySelect-DIJ4phXz.js";
+import { t as o } from "./Input-CoKOtyD0.js";
+import { t as s } from "./NumberField-DBowmOfe.js";
+import { n as c, t as l } from "./RadioGroup-B2_LUgDp.js";
+import { t as u } from "./RangeSlider-S2R3zA8N.js";
+import { t as d } from "./Switch-C4NU-me1.js";
+import { i as f, n as p, r as m, t as h } from "./schema-CtWwGbqJ.js";
+import { t as g } from "./Dialog-CYBLjwbd.js";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { isBuiltinToolPref as b } from "@weasel-js/core";
+import { useMemo as x } from "react";
+import { Focusable as S } from "react-aria-components";
+//#region src/components/paintValue.ts
+function C(e) {
+	if (typeof e != "object" || !e) return;
+	let t = e;
+	if (!(t.fill !== void 0 && t.fill !== "solid")) return typeof t.color == "string" ? t.color : void 0;
+}
+function w(e) {
+	if (!(typeof e != "object" || !e || !("paint" in e))) return C(e.paint);
+}
+var T = {
+	columns: "_columns_r15x5_5",
+	column: "_column_r15x5_5",
+	panel: "_panel_r15x5_23",
+	subpanel: "_subpanel_r15x5_33",
+	groupHeader: "_groupHeader_r15x5_44",
+	groupTitle: "_groupTitle_r15x5_57",
+	groupDesc: "_groupDesc_r15x5_72",
+	rows: "_rows_r15x5_79",
+	row: "_row_r15x5_79",
+	rowLabel: "_rowLabel_r15x5_95",
+	help: "_help_r15x5_104",
+	rowControl: "_rowControl_r15x5_128",
+	textarea: "_textarea_r15x5_135",
+	unitSuffix: "_unitSuffix_r15x5_148",
+	unrenderable: "_unrenderable_r15x5_154",
+	titleRow: "_titleRow_r15x5_161",
+	objectLeaf: "_objectLeaf_r15x5_175",
+	objectRow: "_objectRow_r15x5_182",
+	objectLabel: "_objectLabel_r15x5_189",
+	objectGroup: "_objectGroup_r15x5_194"
+};
+//#endregion
+//#region src/components/Prefs/PrefsForm.tsx
+function E(e) {
+	let { schema: t, values: n, onChange: r, renderers: i, showHidden: a = !1, className: o } = e, s = x(() => f(t, a), [t, a]), c = {
+		values: n,
+		onChange: r,
+		renderers: i
+	};
+	return /* @__PURE__ */ v("div", {
+		className: [T.columns, o].filter(Boolean).join(" "),
+		children: Object.entries(s?.children ?? {}).map(([e, t]) => /* @__PURE__ */ v("div", {
+			className: T.column,
+			children: h(t) ? /* @__PURE__ */ v(O, {
+				ctx: c,
+				path: e,
+				pref: t
+			}) : /* @__PURE__ */ v(D, {
+				ctx: c,
+				group: t,
+				path: e,
+				depth: 0
+			})
+		}, e))
+	});
+}
+function D({ ctx: e, group: t, path: n, depth: r }) {
+	return /* @__PURE__ */ y("div", {
+		className: r === 0 ? T.panel : T.subpanel,
+		children: [/* @__PURE__ */ y("div", {
+			className: T.groupHeader,
+			children: [/* @__PURE__ */ v("h3", {
+				className: T.groupTitle,
+				children: t.name
+			}), t.description !== void 0 && /* @__PURE__ */ v("p", {
+				className: T.groupDesc,
+				children: t.description
+			})]
+		}), /* @__PURE__ */ v("div", {
+			className: T.rows,
+			children: Object.entries(t.children).map(([t, i]) => {
+				let a = `${n}.${t}`;
+				return h(i) ? /* @__PURE__ */ v(O, {
+					ctx: e,
+					path: a,
+					pref: i
+				}, t) : /* @__PURE__ */ v(D, {
+					ctx: e,
+					group: i,
+					path: a,
+					depth: r + 1
+				}, t);
+			})
+		})]
+	});
+}
+function O({ ctx: n, path: r, pref: i }) {
+	let a = m(n.values, r), o = {
+		path: r,
+		pref: i,
+		value: a === void 0 ? i.default : a,
+		setValue: (e) => n.onChange(r, e)
+	}, s = n.renderers?.[i.kind], c = s ? s(o) : k(o);
+	return s && c === null ? null : i.block ? /* @__PURE__ */ v(_, { children: c }) : /* @__PURE__ */ y("label", {
+		className: T.row,
+		children: [/* @__PURE__ */ y("span", {
+			className: T.rowLabel,
+			children: [i.name, i.description ? /* @__PURE__ */ y(e, { children: [/* @__PURE__ */ v(S, { children: /* @__PURE__ */ v("button", {
+				type: "button",
+				className: T.help,
+				"aria-label": `About ${i.name}`,
+				children: "ⓘ"
+			}) }), /* @__PURE__ */ v(t, { children: i.description })] }) : null]
+		}), /* @__PURE__ */ v("span", {
+			className: T.rowControl,
+			children: c
+		})]
+	});
+}
+function k(e, t) {
+	let { pref: f, value: m, setValue: g } = e;
+	if (f.kind === "font-family") {
+		let e = t?.fontWeight, n = t?.fontStyle;
+		return /* @__PURE__ */ v(a, {
+			value: typeof m == "string" ? m : void 0,
+			onChange: g,
+			weight: typeof e == "number" ? e : void 0,
+			fontStyle: n === "italic" ? "italic" : void 0,
+			"aria-label": f.name
+		});
+	}
+	if (!b(f)) return /* @__PURE__ */ y("span", {
+		className: T.unrenderable,
+		children: [
+			"(",
+			f.kind,
+			": no renderer)"
+		]
+	});
+	switch (f.kind) {
+		case "boolean": {
+			let e = !!m;
+			return f.control === "switch" ? /* @__PURE__ */ v(d, {
+				isSelected: e,
+				onChange: g,
+				"aria-label": f.name
+			}) : /* @__PURE__ */ v(r, {
+				isSelected: e,
+				onChange: g,
+				"aria-label": f.name
+			});
+		}
+		case "number": {
+			let e = typeof m == "number" && Number.isFinite(m) ? m : 0, t = f.unit, n = t ? t.toDisplay(e) : e, r = p(f), i = (e) => g(t ? t.fromDisplay(e) : e);
+			if (f.control === "slider") return /* @__PURE__ */ v(u, {
+				value: n,
+				onChange: (e) => i(typeof e == "number" ? e : e[0]),
+				minValue: r.min,
+				maxValue: r.max,
+				step: r.step,
+				"aria-label": f.name
+			});
+			let a = /* @__PURE__ */ v(s, {
+				value: n,
+				onChange: i,
+				minValue: r.min,
+				maxValue: r.max,
+				step: r.step,
+				"aria-label": f.name
+			});
+			return t?.suffix === void 0 ? a : /* @__PURE__ */ y(_, { children: [a, /* @__PURE__ */ v("span", {
+				className: T.unitSuffix,
+				"aria-hidden": "true",
+				children: t.suffix
+			})] });
+		}
+		case "string": {
+			let e = typeof m == "string" ? m : "";
+			return f.control === "textarea" ? /* @__PURE__ */ v("textarea", {
+				className: T.textarea,
+				value: e,
+				onChange: (e) => g(e.target.value),
+				"aria-label": f.name,
+				rows: 3
+			}) : /* @__PURE__ */ v(o, {
+				value: e,
+				onChange: g,
+				"aria-label": f.name
+			});
+		}
+		case "enum": {
+			let e = f.encoding, n = e ? e.read(m, t) : typeof m == "string" ? m : f.default, r = (n) => g(e ? e.write(n, t) : n);
+			return f.control === "radio" ? /* @__PURE__ */ v(c, {
+				value: n ?? null,
+				onChange: r,
+				"aria-label": f.name,
+				children: f.options.map((e) => /* @__PURE__ */ v(l, {
+					value: e.value,
+					isDisabled: e.disabled,
+					children: e.label
+				}, e.value))
+			}) : /* @__PURE__ */ v(i, {
+				options: f.options.map((e) => ({
+					value: e.value,
+					label: e.label,
+					isDisabled: e.disabled
+				})),
+				selectedKey: n ?? null,
+				onSelectionChange: r,
+				"aria-label": f.name
+			});
+		}
+		case "color": return /* @__PURE__ */ v(n, {
+			value: typeof m == "string" ? m : f.default,
+			alpha: f.alpha,
+			onChange: g,
+			"aria-label": f.name
+		});
+		case "paint": return /* @__PURE__ */ v(n, {
+			value: C(m) ?? C(f.default),
+			alpha: f.alpha,
+			onChange: (e) => g({
+				fill: "solid",
+				color: e
+			}),
+			"aria-label": f.name
+		});
+		case "object": {
+			let t = f, n = typeof m == "object" && m ? m : void 0, r = (i) => {
+				let a = [];
+				for (let [o, s] of Object.entries(i)) {
+					if (!h(s)) {
+						let e = r(s.children);
+						if (e.length === 0) continue;
+						a.push(/* @__PURE__ */ v("h4", {
+							className: T.objectGroup,
+							children: s.name
+						}, `group:${o}`), ...e);
+						continue;
+					}
+					a.push(/* @__PURE__ */ y("label", {
+						className: T.objectRow,
+						children: [/* @__PURE__ */ v("span", {
+							className: T.objectLabel,
+							children: s.name
+						}), k({
+							path: `${e.path}.${o}`,
+							pref: s,
+							value: n?.[o],
+							setValue: (e) => {
+								g({
+									...n ?? t.fromScalar?.(m) ?? {},
+									[o]: e
+								});
+							}
+						}, n)]
+					}, o));
+				}
+				return a;
+			};
+			return /* @__PURE__ */ v("div", {
+				className: T.objectLeaf,
+				children: r(t.children)
+			});
+		}
+		default: throw Error(`PrefsForm: no control for built-in pref kind "${f.kind}"`);
+	}
+}
+//#endregion
+//#region src/components/Prefs/PrefsDialog.tsx
+function A(e) {
+	let { isOpen: t, onOpenChange: n, title: r, headerExtra: i, dialogClassName: a, ...o } = e;
+	return /* @__PURE__ */ v(g, {
+		isOpen: t,
+		onOpenChange: n,
+		"aria-label": typeof r == "string" ? r : o.schema.name,
+		className: a,
+		title: i === void 0 ? r ?? o.schema.name : /* @__PURE__ */ y("span", {
+			className: T.titleRow,
+			children: [/* @__PURE__ */ v("span", { children: r ?? o.schema.name }), i]
+		}),
+		children: /* @__PURE__ */ v(E, { ...o })
+	});
+}
+//#endregion
+export { w as i, E as n, C as r, A as t };
+
+//# sourceMappingURL=Prefs-4JSEtuU-.js.map

package/dist/chunks/Prefs-4JSEtuU-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prefs-4JSEtuU-.js","names":[],"sources":["../../src/components/paintValue.ts","../../src/components/Prefs/Prefs.module.css","../../src/components/Prefs/PrefsForm.tsx","../../src/components/Prefs/PrefsDialog.tsx"],"sourcesContent":["// Reading and writing the paint objects a property control may be pointed at.\n//\n// `data.fill` is a `FillStyle` and `data.stroke` a `Stroke`, so a control that\n// assumes either is a hex string reads `undefined` off it and writes a bare\n// string back over it. These helpers are what keep a control honest about the\n// shape it is holding.\n\n/** The color of a solid paint, or `undefined` for anything else — including a\n *  value that isn't a paint at all. `fill` is optional on the solid member of\n *  the union, so the tag alone can't decide it. */\nexport function solidColorOf(value: unknown): string | undefined {\n  if (typeof value !== 'object' || value === null) return undefined;\n  const paint = value as { fill?: string; color?: unknown };\n  if (paint.fill !== undefined && paint.fill !== 'solid') return undefined;\n  return typeof paint.color === 'string' ? paint.color : undefined;\n}\n\n/** The single color a stroke shows, or `undefined` when it has none to show —\n *  a gradient or pattern stroke, or no stroke at all. */\nexport function strokeColorOf(value: unknown): string | undefined {\n  if (typeof value !== 'object' || value === null || !('paint' in value)) return undefined;\n  return solidColorOf((value as { paint: unknown }).paint);\n}\n","/* Ported from WeaselDraw's wd-prefs-* rules (apps/draw/src/app.css),\n * generalized onto theme tokens. Column width is overridable via\n * --wzl-prefs-column-width at any ancestor scope. */\n\n.columns {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 12px;\n  overflow-y: auto;\n  padding-right: 4px;\n}\n\n.column {\n  flex: 0 0 var(--wzl-prefs-column-width, 300px);\n  width: var(--wzl-prefs-column-width, 300px);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.panel {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.subpanel {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: 6px;\n  padding: 8px 8px 8px 10px;\n  background: var(--wzl-surface-sunken);\n  border-left: 2px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.groupHeader {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.subpanel .groupHeader {\n  border-bottom: none;\n  padding-bottom: 2px;\n}\n\n.groupTitle {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.subpanel .groupTitle {\n  font-size: var(--wzl-font-size-sm);\n  text-transform: none;\n  letter-spacing: 0;\n}\n\n.groupDesc {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  line-height: 1.35;\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg);\n  cursor: default;\n}\n\n.rowLabel {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n/* Description affordance — quiet until hovered/focused. */\n.help {\n  flex: 0 0 auto;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n  line-height: 1;\n  cursor: help;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.help:hover {\n  color: var(--wzl-fg);\n}\n\n.help:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n  color: var(--wzl-fg);\n}\n\n/* Control slot — fixed width so the label can take the rest of the row.\n * Kit form controls render as block-level flex columns that fill it. */\n.rowControl {\n  flex: 0 0 110px;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.textarea {\n  width: 100%;\n  padding: 4px 8px;\n  background: var(--wzl-surface-sunken);\n  color: var(--wzl-fg);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n  resize: vertical;\n}\n\n/* Names the unit a number leaf displays in, beside the field showing it. */\n.unitSuffix {\n  flex: none;\n  font-size: var(--wzl-font-size-sm);\n  opacity: 0.6;\n}\n\n.unrenderable {\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n}\n\n/* PrefsDialog header row: title text + optional headerExtra chrome. */\n.titleRow {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.titleRow > span:first-child {\n  flex: 1;\n  min-width: 0;\n}\n\n/* An object leaf renders its fields as its own rows. */\n.objectLeaf {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  inline-size: 100%;\n}\n\n.objectRow {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  gap: 8px;\n  align-items: center;\n}\n\n.objectLabel {\n  font-size: var(--wzl-font-size-sm);\n  opacity: 0.75;\n}\n\n.objectGroup {\n  margin: 4px 0 0;\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.55;\n}\n","import { useMemo, type ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { Checkbox } from '../Checkbox';\nimport { ColorField } from '../ColorField';\nimport { FontFamilySelect } from '../FontFamilySelect';\nimport { solidColorOf } from '../paintValue';\nimport { Input } from '../Input';\nimport { NumberField } from '../NumberField';\nimport { RadioGroup, Radio } from '../RadioGroup';\nimport { RangeSlider } from '../RangeSlider';\nimport { Select } from '../Select';\nimport { Switch } from '../Switch';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport { isBuiltinToolPref } from '@weasel-js/core';\nimport {\n  isPrefLeaf,\n  prefDisplayBounds,\n  prefValueAtPath,\n  visiblePrefSubtree,\n  type PrefGroup,\n  type PrefLeaf,\n} from './schema';\nimport s from './Prefs.module.css';\n\n/** What a {@link PrefRenderer} is given for the leaf it is rendering. */\nexport interface PrefRenderContext {\n  /** Dotted path of the leaf within the schema root. */\n  path: string;\n  /** The schema node. App renderers narrow this to their own kind shape. */\n  pref: PrefLeaf;\n  /** Current value — `values` at `path`, falling back to `pref.default`. */\n  value: unknown;\n  setValue: (value: unknown) => void;\n}\n\n/**\n * Renders the control cell for one preference leaf. Returning `null`\n * collapses the row.\n */\nexport type PrefRenderer = (ctx: PrefRenderContext) => ReactNode;\n\n/** Props for {@link PrefsForm}. */\nexport interface PrefsFormProps {\n  /** Root of the schema tree. Core `ToolPrefGroup`s assign structurally. */\n  schema: PrefGroup;\n  /** Nested value tree (shape mirrors the schema). Sparse is fine —\n   *  missing leaves fall back to their schema `default`. */\n  values?: unknown;\n  /** Change callback with the leaf's dotted path. Values apply live;\n   *  there is no dirty/commit state. */\n  onChange: (path: string, value: unknown) => void;\n  /**\n   * Per-kind renderers for app-defined kinds. Entries also override the\n   * built-in kinds when keys collide. A renderer owns the control cell\n   * (the label/tooltip row chrome stays with the form, unless the leaf\n   * sets `block`); returning `null` collapses the row entirely. Unknown\n   * kinds with no renderer show a labeled placeholder instead of\n   * crashing.\n   */\n  renderers?: Record<string, PrefRenderer>;\n  /** Reveal `hidden` leaves (dev tooling). Default false. */\n  showHidden?: boolean;\n  className?: string;\n}\n\n/**\n * Schema-driven preferences form. Top-level groups render as columns,\n * nested groups as indented sub-panels, leaves as label + control rows.\n * Storage-agnostic: pair with `PrefsDialog` for the modal composition,\n * and persist however the app likes via `onChange`.\n */\nexport function PrefsForm(props: PrefsFormProps) {\n  const { schema, values, onChange, renderers, showHidden = false, className } = props;\n  const visibleRoot = useMemo(\n    () => visiblePrefSubtree(schema, showHidden),\n    [schema, showHidden],\n  );\n  const ctx: WalkCtx = { values, onChange, renderers };\n  return (\n    <div className={[s.columns, className].filter(Boolean).join(' ')}>\n      {Object.entries(visibleRoot?.children ?? {}).map(([key, child]) => (\n        <div key={key} className={s.column}>\n          {isPrefLeaf(child) ? (\n            // Top-level leaves are unusual but legal — give each its own\n            // column for symmetry with grouped siblings.\n            <PrefRow ctx={ctx} path={key} pref={child} />\n          ) : (\n            <GroupBody ctx={ctx} group={child} path={key} depth={0} />\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n\ninterface WalkCtx {\n  values: unknown;\n  onChange: (path: string, value: unknown) => void;\n  renderers?: Record<string, PrefRenderer>;\n}\n\nfunction GroupBody({ ctx, group, path, depth }: {\n  ctx: WalkCtx;\n  group: PrefGroup;\n  path: string;\n  depth: number;\n}) {\n  return (\n    <div className={depth === 0 ? s.panel : s.subpanel}>\n      <div className={s.groupHeader}>\n        <h3 className={s.groupTitle}>{group.name}</h3>\n        {group.description !== undefined && (\n          <p className={s.groupDesc}>{group.description}</p>\n        )}\n      </div>\n      <div className={s.rows}>\n        {Object.entries(group.children).map(([key, child]) => {\n          const childPath = `${path}.${key}`;\n          return isPrefLeaf(child) ? (\n            <PrefRow key={key} ctx={ctx} path={childPath} pref={child} />\n          ) : (\n            <GroupBody key={key} ctx={ctx} group={child} path={childPath} depth={depth + 1} />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nfunction PrefRow({ ctx, path, pref }: { ctx: WalkCtx; path: string; pref: PrefLeaf }) {\n  const stored = prefValueAtPath(ctx.values, path);\n  const renderCtx: PrefRenderContext = {\n    path,\n    pref,\n    value: stored !== undefined ? stored : pref.default,\n    setValue: (v) => ctx.onChange(path, v),\n  };\n\n  const custom = ctx.renderers?.[pref.kind];\n  const control = custom ? custom(renderCtx) : renderBuiltin(renderCtx);\n  if (custom && control === null) return null;\n\n  // `block` leaves own their chrome (embedded editors with their own\n  // header) — no label/tooltip row.\n  if (pref.block) return <>{control}</>;\n\n  return (\n    <label className={s.row}>\n      <span className={s.rowLabel}>\n        {pref.name}\n        {pref.description ? (\n          // Help affordance carries the description tooltip. A tooltip\n          // trigger must be interactive (keyboard-reachable), so this is\n          // a real button — a bare label span would be neither focusable\n          // nor announced.\n          <TooltipTrigger>\n            <Focusable>\n              <button type=\"button\" className={s.help} aria-label={`About ${pref.name}`}>\n                ⓘ\n              </button>\n            </Focusable>\n            <Tooltip>{pref.description}</Tooltip>\n          </TooltipTrigger>\n        ) : null}\n      </span>\n      <span className={s.rowControl}>{control}</span>\n    </label>\n  );\n}\n\nfunction renderBuiltin(\n  ctx: PrefRenderContext,\n  // The object a nested leaf is a field of — what an enum `encoding` reads\n  // and writes against. Undefined for a top-level leaf, which has none.\n  siblings?: Record<string, unknown>,\n): ReactNode {\n  const { pref, value, setValue } = ctx;\n  if (pref.kind === 'font-family') {\n    // Not a `ToolPref` kind: its options are the live font registry, which no\n    // static schema can carry. Core's own text schema still declares it, so\n    // the form ships the control rather than leaving every consumer to.\n    //\n    // The substitution probe runs at the weight and slant the family is stored\n    // beside — fields of the same `TextStyle` object leaf — so the label names\n    // the variant that will actually paint.\n    const weight = siblings?.fontWeight;\n    const slant = siblings?.fontStyle;\n    return (\n      <FontFamilySelect\n        value={typeof value === 'string' ? value : undefined}\n        onChange={setValue}\n        weight={typeof weight === 'number' ? weight : undefined}\n        fontStyle={slant === 'italic' ? 'italic' : undefined}\n        aria-label={pref.name}\n      />\n    );\n  }\n  if (!isBuiltinToolPref(pref)) {\n    // App-defined kind with no `renderers` entry: labeled placeholder, not a\n    // crash — a missing wiring should be visible and recoverable.\n    return <span className={s.unrenderable}>({pref.kind}: no renderer)</span>;\n  }\n  switch (pref.kind) {\n    case 'boolean': {\n      const checked = Boolean(value);\n      return pref.control === 'switch' ? (\n        <Switch isSelected={checked} onChange={setValue} aria-label={pref.name} />\n      ) : (\n        <Checkbox isSelected={checked} onChange={setValue} aria-label={pref.name} />\n      );\n    }\n    case 'number': {\n      const stored = typeof value === 'number' && Number.isFinite(value) ? value : 0;\n      const unit = pref.unit;\n      const display = unit ? unit.toDisplay(stored) : stored;\n      // `min`/`max`/`step` are declared in the stored unit, like the value, so\n      // they convert with it — a leaf storing radians and showing degrees was\n      // clamping typed degrees against 0..6.28.\n      const bounds = prefDisplayBounds(pref);\n      const store = (v: number): void => setValue(unit ? unit.fromDisplay(v) : v);\n      if (pref.control === 'slider') {\n        return (\n          <RangeSlider\n            value={display}\n            onChange={(v) => store(typeof v === 'number' ? v : v[0])}\n            minValue={bounds.min}\n            maxValue={bounds.max}\n            step={bounds.step}\n            aria-label={pref.name}\n          />\n        );\n      }\n      const field = (\n        <NumberField\n          value={display}\n          onChange={store}\n          minValue={bounds.min}\n          maxValue={bounds.max}\n          step={bounds.step}\n          aria-label={pref.name}\n        />\n      );\n      if (unit?.suffix === undefined) return field;\n      return (\n        <>\n          {field}\n          <span className={s.unitSuffix} aria-hidden=\"true\">{unit.suffix}</span>\n        </>\n      );\n    }\n    case 'string': {\n      const text = typeof value === 'string' ? value : '';\n      if (pref.control === 'textarea') {\n        return (\n          <textarea\n            className={s.textarea}\n            value={text}\n            onChange={(e) => setValue(e.target.value)}\n            aria-label={pref.name}\n            rows={3}\n          />\n        );\n      }\n      return <Input value={text} onChange={setValue} aria-label={pref.name} />;\n    }\n    case 'enum': {\n      const encoding = pref.encoding;\n      // An encoded leaf stores something other than the option string (a dash\n      // array), so reading the raw value selects nothing and writing one\n      // replaces the stored form with the option string.\n      const option = encoding\n        ? encoding.read(value, siblings)\n        : typeof value === 'string'\n          ? value\n          : pref.default;\n      const choose = (next: string): void =>\n        setValue(encoding ? encoding.write(next, siblings) : next);\n      if (pref.control === 'radio') {\n        return (\n          <RadioGroup value={option ?? null} onChange={choose} aria-label={pref.name}>\n            {pref.options.map((o) => (\n              <Radio key={o.value} value={o.value} isDisabled={o.disabled}>\n                {o.label}\n              </Radio>\n            ))}\n          </RadioGroup>\n        );\n      }\n      return (\n        <Select<string>\n          options={pref.options.map((o) => ({\n            value: o.value,\n            label: o.label,\n            isDisabled: o.disabled,\n          }))}\n          selectedKey={option ?? null}\n          onSelectionChange={choose}\n          aria-label={pref.name}\n        />\n      );\n    }\n    case 'color': {\n      const hex = typeof value === 'string' ? value : pref.default;\n      return (\n        <ColorField\n          value={hex}\n          alpha={pref.alpha}\n          onChange={setValue}\n          aria-label={pref.name}\n        />\n      );\n    }\n    case 'paint': {\n      // A whole `FillStyle`. A gradient or pattern has no single color to\n      // show, so the field goes blank rather than claiming one, and an edit\n      // writes a whole solid union member rather than grafting a `color` key\n      // onto the gradient.\n      const solid = solidColorOf(value) ?? solidColorOf(pref.default);\n      return (\n        <ColorField\n          value={solid}\n          alpha={pref.alpha}\n          onChange={(color) => setValue({ fill: 'solid', color })}\n          aria-label={pref.name}\n        />\n      );\n    }\n    case 'object': {\n      // One value with its fields hanging off it: each child renders its own\n      // control and commits the parent object whole.\n      const p = pref;\n      const held = typeof value === 'object' && value !== null\n        ? (value as Record<string, unknown>)\n        : undefined;\n      const objectRows = (children: Record<string, PrefLeaf | PrefGroup>): ReactNode[] => {\n        const out: ReactNode[] = [];\n        for (const [key, child] of Object.entries(children)) {\n          if (!isPrefLeaf(child)) {\n            const inner = objectRows(child.children);\n            if (inner.length === 0) continue;\n            out.push(<h4 key={`group:${key}`} className={s.objectGroup}>{child.name}</h4>, ...inner);\n            continue;\n          }\n          out.push(\n            <label key={key} className={s.objectRow}>\n              <span className={s.objectLabel}>{child.name}</span>\n              {renderBuiltin({\n                path: `${ctx.path}.${key}`,\n                pref: child,\n                value: held?.[key],\n                setValue: (v) => {\n                  const base = held ?? p.fromScalar?.(value) ?? {};\n                  setValue({ ...base, [key]: v });\n                },\n              }, held)}\n            </label>,\n          );\n        }\n        return out;\n      };\n      return <div className={s.objectLeaf}>{objectRows(p.children)}</div>;\n    }\n    default: {\n      // Not reachable while every built-in kind has an arm — and a new kind\n      // that lacks one is a compile error here, never a blank row.\n      const _exhaustive: never = pref;\n      throw new Error(\n        `PrefsForm: no control for built-in pref kind \"${(_exhaustive as { kind: string }).kind}\"`,\n      );\n    }\n  }\n}\n","import type { ReactNode } from 'react';\nimport { Dialog } from '../Dialog';\nimport { PrefsForm, type PrefsFormProps } from './PrefsForm';\nimport s from './Prefs.module.css';\n\n/**\n * Props for {@link PrefsDialog} — everything {@link PrefsForm} takes, plus\n * the dialog's own open state and chrome.\n */\nexport interface PrefsDialogProps extends PrefsFormProps {\n  isOpen: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Dialog heading. Defaults to the schema root's `name`. */\n  title?: ReactNode;\n  /** Extra chrome rendered inline with the title (e.g. a dev-mode\n   *  \"Show hidden\" switch). */\n  headerExtra?: ReactNode;\n  /** Class applied to the dialog's modal box. */\n  dialogClassName?: string;\n}\n\n/**\n * The kit's preferences dialog: `Dialog` + `PrefsForm`. Changes apply\n * live through `onChange` — there is no OK/Cancel staging. For custom\n * placement (sidebar, popover, inline page), compose `PrefsForm`\n * directly; this wrapper is intentionally thin.\n */\nexport function PrefsDialog(props: PrefsDialogProps) {\n  const { isOpen, onOpenChange, title, headerExtra, dialogClassName, ...form } = props;\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      aria-label={typeof title === 'string' ? title : form.schema.name}\n      className={dialogClassName}\n      title={\n        headerExtra !== undefined ? (\n          <span className={s.titleRow}>\n            <span>{title ?? form.schema.name}</span>\n            {headerExtra}\n          </span>\n        ) : (\n          title ?? form.schema.name\n        )\n      }\n    >\n      <PrefsForm {...form} />\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,SAAgB,EAAa,GAAoC;AAC/D,KAAI,OAAO,KAAU,aAAY,EAAgB;CACjD,IAAM,IAAQ;AACV,SAAM,SAAS,KAAA,KAAa,EAAM,SAAS,SAC/C,QAAO,OAAO,EAAM,SAAU,WAAW,EAAM,QAAQ,KAAA;;AAKzD,SAAgB,EAAc,GAAoC;AAC5D,cAAO,KAAU,aAAY,KAAkB,EAAE,WAAW,IAChE,QAAO,EAAc,EAA6B,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AEkD1D,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EAAE,WAAQ,WAAQ,aAAU,cAAW,gBAAa,IAAO,iBAAc,GACzE,IAAc,QACZ,EAAmB,GAAQ,EAAW,EAC5C,CAAC,GAAQ,EAAW,CACrB,EACK,IAAe;EAAE;EAAQ;EAAU;EAAW;AACpD,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAE,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAC7D,OAAO,QAAQ,GAAa,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,GAAK,OACtD,kBAAC,OAAD;GAAe,WAAW,EAAE;aACzB,EAAW,EAAM,GAGhB,kBAAC,GAAD;IAAc;IAAK,MAAM;IAAK,MAAM;IAAS,CAAA,GAE7C,kBAAC,GAAD;IAAgB;IAAK,OAAO;IAAO,MAAM;IAAK,OAAO;IAAK,CAAA;GAExD,EARI,EAQJ,CACN;EACE,CAAA;;AAUV,SAAS,EAAU,EAAE,QAAK,UAAO,SAAM,YAKpC;AACD,QACE,kBAAC,OAAD;EAAK,WAAW,MAAU,IAAI,EAAE,QAAQ,EAAE;YAA1C,CACE,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACE,kBAAC,MAAD;IAAI,WAAW,EAAE;cAAa,EAAM;IAAU,CAAA,EAC7C,EAAM,gBAAgB,KAAA,KACrB,kBAAC,KAAD;IAAG,WAAW,EAAE;cAAY,EAAM;IAAgB,CAAA,CAEhD;MACN,kBAAC,OAAD;GAAK,WAAW,EAAE;aACf,OAAO,QAAQ,EAAM,SAAS,CAAC,KAAK,CAAC,GAAK,OAAW;IACpD,IAAM,IAAY,GAAG,EAAK,GAAG;AAC7B,WAAO,EAAW,EAAM,GACtB,kBAAC,GAAD;KAAwB;KAAK,MAAM;KAAW,MAAM;KAAS,EAA/C,EAA+C,GAE7D,kBAAC,GAAD;KAA0B;KAAK,OAAO;KAAO,MAAM;KAAW,OAAO,IAAQ;KAAK,EAAlE,EAAkE;KAEpF;GACE,CAAA,CACF;;;AAIV,SAAS,EAAQ,EAAE,QAAK,SAAM,WAAwD;CACpF,IAAM,IAAS,EAAgB,EAAI,QAAQ,EAAK,EAC1C,IAA+B;EACnC;EACA;EACA,OAAO,MAAW,KAAA,IAAqB,EAAK,UAAd;EAC9B,WAAW,MAAM,EAAI,SAAS,GAAM,EAAE;EACvC,EAEK,IAAS,EAAI,YAAY,EAAK,OAC9B,IAAU,IAAS,EAAO,EAAU,GAAG,EAAc,EAAU;AAOrE,QANI,KAAU,MAAY,OAAa,OAInC,EAAK,QAAc,kBAAA,GAAA,EAAA,UAAG,GAAW,CAAA,GAGnC,kBAAC,SAAD;EAAO,WAAW,EAAE;YAApB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAnB,CACG,EAAK,MACL,EAAK,cAKJ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAW,EAAE;IAAM,cAAY,SAAS,EAAK;cAAQ;IAElE,CAAA,EACC,CAAA,EACZ,kBAAC,GAAD,EAAA,UAAU,EAAK,aAAsB,CAAA,CACtB,EAAA,CAAA,GACf,KACC;MACP,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAa;GAAe,CAAA,CACzC;;;AAIZ,SAAS,EACP,GAGA,GACW;CACX,IAAM,EAAE,SAAM,UAAO,gBAAa;AAClC,KAAI,EAAK,SAAS,eAAe;EAQ/B,IAAM,IAAS,GAAU,YACnB,IAAQ,GAAU;AACxB,SACE,kBAAC,GAAD;GACE,OAAO,OAAO,KAAU,WAAW,IAAQ,KAAA;GAC3C,UAAU;GACV,QAAQ,OAAO,KAAW,WAAW,IAAS,KAAA;GAC9C,WAAW,MAAU,WAAW,WAAW,KAAA;GAC3C,cAAY,EAAK;GACjB,CAAA;;AAGN,KAAI,CAAC,EAAkB,EAAK,CAG1B,QAAO,kBAAC,QAAD;EAAM,WAAW,EAAE;YAAnB;GAAiC;GAAE,EAAK;GAAK;GAAqB;;AAE3E,SAAQ,EAAK,MAAb;EACE,KAAK,WAAW;GACd,IAAM,IAAU,EAAQ;AACxB,UAAO,EAAK,YAAY,WACtB,kBAAC,GAAD;IAAQ,YAAY;IAAS,UAAU;IAAU,cAAY,EAAK;IAAQ,CAAA,GAE1E,kBAAC,GAAD;IAAU,YAAY;IAAS,UAAU;IAAU,cAAY,EAAK;IAAQ,CAAA;;EAGhF,KAAK,UAAU;GACb,IAAM,IAAS,OAAO,KAAU,YAAY,OAAO,SAAS,EAAM,GAAG,IAAQ,GACvE,IAAO,EAAK,MACZ,IAAU,IAAO,EAAK,UAAU,EAAO,GAAG,GAI1C,IAAS,EAAkB,EAAK,EAChC,KAAS,MAAoB,EAAS,IAAO,EAAK,YAAY,EAAE,GAAG,EAAE;AAC3E,OAAI,EAAK,YAAY,SACnB,QACE,kBAAC,GAAD;IACE,OAAO;IACP,WAAW,MAAM,EAAM,OAAO,KAAM,WAAW,IAAI,EAAE,GAAG;IACxD,UAAU,EAAO;IACjB,UAAU,EAAO;IACjB,MAAM,EAAO;IACb,cAAY,EAAK;IACjB,CAAA;GAGN,IAAM,IACJ,kBAAC,GAAD;IACE,OAAO;IACP,UAAU;IACV,UAAU,EAAO;IACjB,UAAU,EAAO;IACjB,MAAM,EAAO;IACb,cAAY,EAAK;IACjB,CAAA;AAGJ,UADI,GAAM,WAAW,KAAA,IAAkB,IAErC,kBAAA,GAAA,EAAA,UAAA,CACG,GACD,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAY,eAAY;cAAQ,EAAK;IAAc,CAAA,CACrE,EAAA,CAAA;;EAGP,KAAK,UAAU;GACb,IAAM,IAAO,OAAO,KAAU,WAAW,IAAQ;AAYjD,UAXI,EAAK,YAAY,aAEjB,kBAAC,YAAD;IACE,WAAW,EAAE;IACb,OAAO;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;IACzC,cAAY,EAAK;IACjB,MAAM;IACN,CAAA,GAGC,kBAAC,GAAD;IAAO,OAAO;IAAM,UAAU;IAAU,cAAY,EAAK;IAAQ,CAAA;;EAE1E,KAAK,QAAQ;GACX,IAAM,IAAW,EAAK,UAIhB,IAAS,IACX,EAAS,KAAK,GAAO,EAAS,GAC9B,OAAO,KAAU,WACf,IACA,EAAK,SACL,KAAU,MACd,EAAS,IAAW,EAAS,MAAM,GAAM,EAAS,GAAG,EAAK;AAY5D,UAXI,EAAK,YAAY,UAEjB,kBAAC,GAAD;IAAY,OAAO,KAAU;IAAM,UAAU;IAAQ,cAAY,EAAK;cACnE,EAAK,QAAQ,KAAK,MACjB,kBAAC,GAAD;KAAqB,OAAO,EAAE;KAAO,YAAY,EAAE;eAChD,EAAE;KACG,EAFI,EAAE,MAEN,CACR;IACS,CAAA,GAIf,kBAAC,GAAD;IACE,SAAS,EAAK,QAAQ,KAAK,OAAO;KAChC,OAAO,EAAE;KACT,OAAO,EAAE;KACT,YAAY,EAAE;KACf,EAAE;IACH,aAAa,KAAU;IACvB,mBAAmB;IACnB,cAAY,EAAK;IACjB,CAAA;;EAGN,KAAK,QAEH,QACE,kBAAC,GAAD;GACE,OAHQ,OAAO,KAAU,WAAW,IAAQ,EAAK;GAIjD,OAAO,EAAK;GACZ,UAAU;GACV,cAAY,EAAK;GACjB,CAAA;EAGN,KAAK,QAMH,QACE,kBAAC,GAAD;GACE,OAHU,EAAa,EAAM,IAAI,EAAa,EAAK,QAAQ;GAI3D,OAAO,EAAK;GACZ,WAAW,MAAU,EAAS;IAAE,MAAM;IAAS;IAAO,CAAC;GACvD,cAAY,EAAK;GACjB,CAAA;EAGN,KAAK,UAAU;GAGb,IAAM,IAAI,GACJ,IAAO,OAAO,KAAU,YAAY,IACrC,IACD,KAAA,GACE,KAAc,MAAgE;IAClF,IAAM,IAAmB,EAAE;AAC3B,SAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAS,EAAE;AACnD,SAAI,CAAC,EAAW,EAAM,EAAE;MACtB,IAAM,IAAQ,EAAW,EAAM,SAAS;AACxC,UAAI,EAAM,WAAW,EAAG;AACxB,QAAI,KAAK,kBAAC,MAAD;OAAyB,WAAW,EAAE;iBAAc,EAAM;OAAU,EAA3D,SAAS,IAAkD,EAAE,GAAG,EAAM;AACxF;;AAEF,OAAI,KACF,kBAAC,SAAD;MAAiB,WAAW,EAAE;gBAA9B,CACE,kBAAC,QAAD;OAAM,WAAW,EAAE;iBAAc,EAAM;OAAY,CAAA,EAClD,EAAc;OACb,MAAM,GAAG,EAAI,KAAK,GAAG;OACrB,MAAM;OACN,OAAO,IAAO;OACd,WAAW,MAAM;AAEf,UAAS;SAAE,GADE,KAAQ,EAAE,aAAa,EAAM,IAAI,EAAE;UAC3B,IAAM;SAAG,CAAC;;OAElC,EAAE,EAAK,CACF;QAXI,EAWJ,CACT;;AAEH,WAAO;;AAET,UAAO,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAa,EAAW,EAAE,SAAS;IAAO,CAAA;;EAErE,QAIE,OAAU,MACR,iDAAkD,EAAiC,KAAK,GACzF;;;;;ACrVP,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,WAAQ,iBAAc,UAAO,gBAAa,oBAAiB,GAAG,MAAS;AAC/E,QACE,kBAAC,GAAD;EACU;EACM;EACd,cAAY,OAAO,KAAU,WAAW,IAAQ,EAAK,OAAO;EAC5D,WAAW;EACX,OACE,MAAgB,KAAA,IAMd,KAAS,EAAK,OAAO,OALrB,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAnB,CACE,kBAAC,QAAD,EAAA,UAAO,KAAS,EAAK,OAAO,MAAY,CAAA,EACvC,EACI;;YAMX,kBAAC,GAAD,EAAW,GAAI,GAAQ,CAAA;EAChB,CAAA"}