@weasel-js/ui 1.4.1 → 1.4.2

package/dist/chunks/{Prefs-ByKG3ylD.js.map → Prefs-BqnwyjmH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Prefs-ByKG3ylD.js","names":[],"sources":["../../src/components/paintValue.ts","../../src/components/Prefs/schema.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","// Preference-schema vocabulary for PrefsForm / PrefsDialog / SelectionPanel:\n// core's `ToolPref*` family under this package's names. Never re-declare them\n// here — this was a hand-kept structural copy until it drifted, and the\n// independence from `@weasel-js/core` it bought is long gone anyway.\n\nexport type {\n  ToolPref as BuiltinPref,\n  ToolPrefBoolean as PrefBoolean,\n  ToolPrefBooleanControl as PrefBooleanControl,\n  ToolPrefColor as PrefColor,\n  ToolPrefCustom as PrefCustom,\n  ToolPrefEnum as PrefEnum,\n  ToolPrefEnumControl as PrefEnumControl,\n  ToolPrefEnumEncoding as PrefEnumEncoding,\n  ToolPrefGroup as PrefGroup,\n  ToolPrefKind as PrefKind,\n  ToolPrefLeaf as PrefLeaf,\n  ToolPrefNumber as PrefNumber,\n  ToolPrefNumberControl as PrefNumberControl,\n  ToolPrefNumberUnit as PrefNumberUnit,\n  ToolPrefObject as PrefObject,\n  ToolPrefPaint as PrefPaint,\n  ToolPrefString as PrefString,\n  ToolPrefStringControl as PrefStringControl,\n} from '@weasel-js/core';\n\nimport type { ToolPrefGroup, ToolPrefLeaf } from '@weasel-js/core';\n\n/** Distinguishes a leaf from a group while walking a schema tree. */\nexport function isPrefLeaf(node: ToolPrefLeaf | ToolPrefGroup): node is ToolPrefLeaf {\n  return 'kind' in node;\n}\n\n/** Get the value at a dotted path inside a nested value tree. Returns\n *  `undefined` when a segment is missing or hits a non-object. */\nexport function prefValueAtPath(values: unknown, path: string): unknown {\n  let cur: unknown = values;\n  for (const seg of path.split('.')) {\n    if (cur == null || typeof cur !== 'object') return undefined;\n    cur = (cur as Record<string, unknown>)[seg];\n  }\n  return cur;\n}\n\n/**\n * Recursively drop `hidden` leaves (unless `showHidden`), pruning groups\n * that end up empty. Returns null when the entire subtree is hidden.\n */\nexport function visiblePrefSubtree<T extends ToolPrefLeaf | ToolPrefGroup>(\n  node: T,\n  showHidden: boolean,\n): T | null {\n  if (isPrefLeaf(node)) return node.hidden && !showHidden ? null : node;\n  const group = node as ToolPrefGroup;\n  const children: Record<string, ToolPrefLeaf | ToolPrefGroup> = {};\n  for (const [key, child] of Object.entries(group.children)) {\n    const kept = visiblePrefSubtree(child, showHidden);\n    if (kept) children[key] = kept;\n  }\n  if (Object.keys(children).length === 0) return null;\n  return { ...node, children };\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.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 { 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  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 (!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 n = typeof value === 'number' && Number.isFinite(value) ? value : 0;\n      if (pref.control === 'slider') {\n        return (\n          <RangeSlider\n            value={n}\n            onChange={(v) => setValue(typeof v === 'number' ? v : v[0])}\n            minValue={pref.min}\n            maxValue={pref.max}\n            step={pref.step ?? 1}\n            aria-label={pref.name}\n          />\n        );\n      }\n      return (\n        <NumberField\n          value={n}\n          onChange={setValue}\n          minValue={pref.min}\n          maxValue={pref.max}\n          step={pref.step ?? 1}\n          aria-label={pref.name}\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":"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"}
+{"version":3,"file":"Prefs-BqnwyjmH.js","names":[],"sources":["../../src/components/paintValue.ts","../../src/components/Prefs/schema.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","// Preference-schema vocabulary for PrefsForm / PrefsDialog / SelectionPanel:\n// core's `ToolPref*` family under this package's names. Never re-declare them\n// here — this was a hand-kept structural copy until it drifted, and the\n// independence from `@weasel-js/core` it bought is long gone anyway.\n\nexport type {\n  ToolPref as BuiltinPref,\n  ToolPrefBoolean as PrefBoolean,\n  ToolPrefBooleanControl as PrefBooleanControl,\n  ToolPrefColor as PrefColor,\n  ToolPrefCustom as PrefCustom,\n  ToolPrefEnum as PrefEnum,\n  ToolPrefEnumControl as PrefEnumControl,\n  ToolPrefEnumEncoding as PrefEnumEncoding,\n  ToolPrefGroup as PrefGroup,\n  ToolPrefKind as PrefKind,\n  ToolPrefLeaf as PrefLeaf,\n  ToolPrefNumber as PrefNumber,\n  ToolPrefNumberControl as PrefNumberControl,\n  ToolPrefNumberUnit as PrefNumberUnit,\n  ToolPrefObject as PrefObject,\n  ToolPrefPaint as PrefPaint,\n  ToolPrefString as PrefString,\n  ToolPrefStringControl as PrefStringControl,\n} from '@weasel-js/core';\n\nimport type { ToolPrefGroup, ToolPrefLeaf } from '@weasel-js/core';\n\n/** Distinguishes a leaf from a group while walking a schema tree. */\nexport function isPrefLeaf(node: ToolPrefLeaf | ToolPrefGroup): node is ToolPrefLeaf {\n  return 'kind' in node;\n}\n\n/** Get the value at a dotted path inside a nested value tree. Returns\n *  `undefined` when a segment is missing or hits a non-object. */\nexport function prefValueAtPath(values: unknown, path: string): unknown {\n  let cur: unknown = values;\n  for (const seg of path.split('.')) {\n    if (cur == null || typeof cur !== 'object') return undefined;\n    cur = (cur as Record<string, unknown>)[seg];\n  }\n  return cur;\n}\n\n/**\n * Recursively drop `hidden` leaves (unless `showHidden`), pruning groups\n * that end up empty. Returns null when the entire subtree is hidden.\n */\nexport function visiblePrefSubtree<T extends ToolPrefLeaf | ToolPrefGroup>(\n  node: T,\n  showHidden: boolean,\n): T | null {\n  if (isPrefLeaf(node)) return node.hidden && !showHidden ? null : node;\n  const group = node as ToolPrefGroup;\n  const children: Record<string, ToolPrefLeaf | ToolPrefGroup> = {};\n  for (const [key, child] of Object.entries(group.children)) {\n    const kept = visiblePrefSubtree(child, showHidden);\n    if (kept) children[key] = kept;\n  }\n  if (Object.keys(children).length === 0) return null;\n  return { ...node, children };\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.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 { 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  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 (!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 n = typeof value === 'number' && Number.isFinite(value) ? value : 0;\n      if (pref.control === 'slider') {\n        return (\n          <RangeSlider\n            value={n}\n            onChange={(v) => setValue(typeof v === 'number' ? v : v[0])}\n            minValue={pref.min}\n            maxValue={pref.max}\n            step={pref.step ?? 1}\n            aria-label={pref.name}\n          />\n        );\n      }\n      return (\n        <NumberField\n          value={n}\n          onChange={setValue}\n          minValue={pref.min}\n          maxValue={pref.max}\n          step={pref.step ?? 1}\n          aria-label={pref.name}\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":"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"}