@weasel-js/ui 1.7.3 → 1.8.0

package/dist/chunks/{NumberField-DS0WSiin.js.map → NumberField-BXFrOi5M.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NumberField-DS0WSiin.js","names":["NumberField","RACNumberField","f","s","RACInput","RACButton","s","f","field_module_default","NumberField_module_default","NumberField$1","forwardRef","rest","props","NumberField","width","orientation","className","label","Label","Group","ghost","Input","hideSteppers","Button","description","Text","FieldError","errorMessage","clampToBounds","max","min","n","placesOf","text","e","dot","spinKey","by","places","from","bounds","key","FULL_PRECISION","decimal","REPEAT_DELAY_MS","REPEAT_EVERY_MS","UnitField","ariaLabel","draft","setDraft","useState","canceled","useRef","input","known","value","qty","display","read","accepts","parseNumber","typed","parseAs","minValue","maxValue","stepTo","onInput","next","onChange","spin","latestSpin","useEffect","el","onWheel","repeat","stopRepeat","startRepeat","tick","delay","stepper","atBound","glyph","steppers"],"sources":["../../src/components/NumberField/NumberField.module.css","../../src/components/NumberField/NumberField.tsx","../../src/components/spin.ts","../../src/components/NumberField/UnitField.tsx"],"sourcesContent":[".frame {\n  composes: numeric from '@weasel-js/theme/numeric.module.css';\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n}\n\n.frame input {\n  padding: 0 var(--wzl-field-pad-x);\n  text-align: right;\n  -moz-appearance: textfield;\n}\n\n.frame input::-webkit-outer-spin-button,\n.frame input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.steppers {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--wzl-border);\n}\n\n.stepper {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--wzl-control-h-xs);\n  flex: 1;\n  /* The two share the frame's height; left to their glyphs' line boxes they\n     overflow it, and the frame clips the lower one. */\n  min-height: 0;\n  height: auto;\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n  font: inherit;\n  font-size: min(var(--wzl-font-size-2xs), calc(var(--wzl-field-h, var(--wzl-control-h)) * 0.35));\n  line-height: 1;\n}\n\n.stepper:not(:last-child) {\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.stepper[data-hovered]:not([data-disabled]),\n.stepper:hover:not(:disabled):not([data-rac]) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.stepper[data-pressed]:not([data-disabled]),\n.stepper:active:not(:disabled):not([data-rac]) {\n  background: var(--wzl-surface-pressed);\n}\n\n.stepper[data-disabled],\n.stepper:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* Mirrors the property rows' editable readout (`.readoutInput`), so a number\n   sitting inside other chrome does not draw a second box around itself. */\n.ghost {\n  --_frame-h: auto;\n  --_frame-bg: transparent;\n  --_frame-border: 1px solid transparent;\n  --_frame-fg: var(--wzl-accent-fg);\n  --_frame-focus-shadow: none;\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.ghost input {\n  padding: 1px 0;\n}\n\n.ghost:hover {\n  background: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.ghost:focus-within {\n  background: var(--wzl-surface-sunken);\n}\n\n/* `width='fit'` states the field's width in characters: left alone an `<input>`\n   asks for its 20-character intrinsic width, wider than most rows it sits in. */\n.fit .frame {\n  width: fit-content;\n  max-width: 100%;\n}\n\n.fit .frame input {\n  flex: 0 0 auto;\n  width: var(--wzl-number-field-width, 9ch);\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  NumberField as RACNumberField,\n  Label,\n  Input as RACInput,\n  Group,\n  Button as RACButton,\n  Text,\n  FieldError,\n  type NumberFieldProps as RACNumberFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport type { FieldOrientation } from '../Field/Field';\nimport f from '../field.module.css';\nimport s from './NumberField.module.css';\n\n/** Props for {@link NumberField}, on top of React Aria's `NumberField` props. */\nexport type NumberFieldProps = Omit<RACNumberFieldProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  /**\n   * `'stacked'` (the default) puts the label above the field; `'row'` sets it\n   * beside the field at its own width, with any description or error on a\n   * line below. Same vocabulary as {@link Field}'s `orientation`.\n   */\n  orientation?: FieldOrientation;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  /** Hide the up/down stepper buttons. Defaults to false. */\n  hideSteppers?: boolean;\n  /** Render with no box until focused — the readout treatment the property\n   *  rows use, for a value that sits inside other chrome rather than in a form. */\n  ghost?: boolean;\n  /** Native input placeholder — e.g. `'Mixed'` for a multi-selection\n   *  editor with no shared value. */\n  placeholder?: string;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the field sits in.\n   * `'fit'` sizes it to `--wzl-number-field-width` (`9ch` by default) plus its\n   * own chrome, rather than to the input's 20-character intrinsic width.\n   */\n  width?: 'fill' | 'fit';\n  className?: string;\n};\n\n/**\n * Numeric input with stepper buttons, wrapping React Aria's NumberField and\n * supplying the same label / description / errorMessage slots as `Input`.\n * Arrow keys and scroll step the value; parsing and formatting are React\n * Aria's.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const {\n    label,\n    orientation = 'stacked',\n    description,\n    errorMessage,\n    hideSteppers,\n    ghost,\n    placeholder,\n    width = 'fill',\n    className,\n    ...rest\n  } = props;\n  return (\n    <RACNumberField\n      {...rest}\n      className={[\n        f.field,\n        f.control,\n        width === 'fit' && `${f.fit} ${s.fit}`,\n        orientation === 'row' && f.row,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {label !== undefined && <Label className={f.label}>{label}</Label>}\n      <Group className={[f.frame, s.frame, ghost && s.ghost].filter(Boolean).join(' ')}>\n        <RACInput ref={ref} placeholder={placeholder} />\n        {!hideSteppers && (\n          <div className={s.steppers}>\n            <RACButton slot=\"increment\" className={s.stepper} aria-label=\"Increment\">▲</RACButton>\n            <RACButton slot=\"decrement\" className={s.stepper} aria-label=\"Decrement\">▼</RACButton>\n          </div>\n        )}\n      </Group>\n      {description !== undefined && (\n        <Text slot=\"description\" className={`${f.hint} ${f.below}`}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={`${f.error} ${f.below}`}>{errorMessage}</FieldError>\n    </RACNumberField>\n  );\n});\n","/** The bounds a spin key moves a value within. */\nexport interface SpinBounds {\n  step: number;\n  min?: number;\n  max?: number;\n}\n\n/** `n` held within the bounds. */\nexport function clampToBounds(n: number, { min, max }: SpinBounds): number {\n  return Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));\n}\n\n/** Decimal places `n` is written with, up to ten. */\nfunction placesOf(n: number): number {\n  if (!Number.isFinite(n)) return 0;\n  const text = String(n);\n  const e = text.indexOf('e-');\n  if (e >= 0) return Math.min(10, Number(text.slice(e + 2)));\n  const dot = text.indexOf('.');\n  return dot < 0 ? 0 : Math.min(10, text.length - dot - 1);\n}\n\n/**\n * The value a spin-button key moves `from` to, or `null` for a key that does\n * not spin: the arrows by a step, Page Up and Page Down by ten, and Home and\n * End to a bound, where there is one. A sum of steps is rounded to the places\n * its operands carry, so `0.1 + 0.2` lands on `0.3`.\n */\nexport function spinKey(key: string, from: number, bounds: SpinBounds): number | null {\n  const by = (n: number) => {\n    const places = Math.max(placesOf(from), placesOf(bounds.step));\n    return clampToBounds(Number((from + n * bounds.step).toFixed(places)), bounds);\n  };\n  switch (key) {\n    case 'ArrowUp':\n      return by(1);\n    case 'ArrowDown':\n      return by(-1);\n    case 'PageUp':\n      return by(10);\n    case 'PageDown':\n      return by(-10);\n    case 'Home':\n      return bounds.min ?? null;\n    case 'End':\n      return bounds.max ?? null;\n    default:\n      return null;\n  }\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { decimal, parseAs, parseNumber, qty, type Display, type UnitTable } from '@weasel-js/quantity';\nimport { clampToBounds, spinKey } from '../spin';\nimport f from '../field.module.css';\nimport s from './NumberField.module.css';\n\n/** Props for {@link UnitField}. */\nexport interface UnitFieldProps {\n  /** The value in the unit the field shows. NaN shows an empty field. */\n  value: number;\n  /** The committed value, read and clamped, in the unit the field shows: on\n   *  blur or Enter, and on every step. */\n  onChange: (value: number) => void;\n  /** The live value: every keystroke that reads as a number, and every step. */\n  onInput?: (value: number) => void;\n  minValue?: number;\n  maxValue?: number;\n  /** What an arrow key, a stepper or a wheel notch adds or takes away; Page Up\n   *  and Page Down move ten. Defaults to 1. */\n  step?: number;\n  /** Units a person may type, each mapped to the factor that turns a number\n   *  in it into the unit the field shows: `{ mm: 0.1, cm: 1 }`. */\n  accepts?: Readonly<UnitTable>;\n  /** How the value shows, is spoken, and reads back when typed: `fraction()`\n   *  shows `1/12` and reads `1/12` typed. `accepts`, when given, does the\n   *  reading instead. Default: the number with every decimal it has. */\n  display?: Display;\n  placeholder?: string;\n  /** Up and down buttons beside the value, which repeat while held. */\n  steppers?: boolean;\n  /** Render with no box until focused, as {@link NumberField}'s `ghost` does. */\n  ghost?: boolean;\n  /** As {@link NumberField}'s `width`. */\n  width?: 'fill' | 'fit';\n  className?: string;\n  /** Id for the input, for a `<label htmlFor>` outside it. */\n  id?: string;\n  'aria-label'?: string;\n}\n\nconst FULL_PRECISION = decimal({ maxPlaces: 20, grouping: false });\n\nconst REPEAT_DELAY_MS = 400;\nconst REPEAT_EVERY_MS = 60;\n\n/**\n * A number typed as text, so it can carry a unit: `12mm` in a field showing\n * centimeters commits `1.2`. Commits on blur or Enter, reverts on Escape or on\n * text it cannot read, and clamps to its bounds. Steps like a spin button —\n * arrows, Page Up and Down, Home and End to a bound, the wheel while focused,\n * and optional steppers. React Aria's `NumberField` refuses letters as they\n * are typed, which is why this is not that.\n */\nexport function UnitField({\n  value,\n  onChange,\n  onInput,\n  minValue,\n  maxValue,\n  step = 1,\n  accepts,\n  display = FULL_PRECISION,\n  placeholder,\n  steppers,\n  ghost,\n  width = 'fill',\n  className,\n  id,\n  'aria-label': ariaLabel,\n}: UnitFieldProps) {\n  const [draft, setDraft] = useState<string | null>(null);\n  const canceled = useRef(false);\n  const input = useRef<HTMLInputElement>(null);\n  const known = Number.isFinite(value);\n  const text = known ? qty(value, display).text : '';\n  const read = (typed: string) => (accepts ? parseNumber(typed, accepts) : parseAs(typed, display));\n  const bounds = { step, min: minValue, max: maxValue };\n\n  // What a step starts from: the text as typed where it reads, else the value.\n  const from = (): number => {\n    const typed = draft === null ? value : read(draft);\n    return Number.isFinite(typed) ? typed : Number.isFinite(value) ? value : 0;\n  };\n  const stepTo = (next: number) => {\n    setDraft(null);\n    onInput?.(next);\n    if (next !== value) onChange(next);\n  };\n  const spin = (key: string): boolean => {\n    const next = spinKey(key, from(), bounds);\n    if (next === null) return false;\n    stepTo(next);\n    return true;\n  };\n\n  // The latest `spin`, for the listeners below, which outlive a render.\n  const latestSpin = useRef(spin);\n  useEffect(() => {\n    latestSpin.current = spin;\n  });\n\n  // The wheel steps only a focused field, so scrolling past one changes nothing.\n  // Not passive, so it can keep the page from scrolling under it.\n  useEffect(() => {\n    const el = input.current;\n    if (!el) return;\n    const onWheel = (e: WheelEvent) => {\n      if (document.activeElement !== el || e.deltaY === 0) return;\n      e.preventDefault();\n      latestSpin.current(e.deltaY < 0 ? 'ArrowUp' : 'ArrowDown');\n    };\n    el.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.removeEventListener('wheel', onWheel);\n  }, []);\n\n  const repeat = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const stopRepeat = () => {\n    if (repeat.current !== null) clearTimeout(repeat.current);\n    repeat.current = null;\n  };\n  useEffect(() => stopRepeat, []);\n  const startRepeat = (key: 'ArrowUp' | 'ArrowDown') => {\n    stopRepeat();\n    latestSpin.current(key);\n    const tick = (delay: number) => {\n      repeat.current = setTimeout(() => {\n        latestSpin.current(key);\n        tick(REPEAT_EVERY_MS);\n      }, delay);\n    };\n    tick(REPEAT_DELAY_MS);\n  };\n  const stepper = (key: 'ArrowUp' | 'ArrowDown', label: string, glyph: string, atBound: boolean) => (\n    <button\n      type=\"button\"\n      className={s.stepper}\n      aria-label={label}\n      tabIndex={-1}\n      disabled={atBound}\n      // Keeps focus in the input, where a press on the button would take it.\n      onPointerDown={(e) => {\n        e.preventDefault();\n        startRepeat(key);\n      }}\n      onPointerUp={stopRepeat}\n      onPointerLeave={stopRepeat}\n      onPointerCancel={stopRepeat}\n      // A click with no pointer down before it — assistive tech, or a test.\n      onClick={(e) => {\n        if (e.detail === 0) latestSpin.current(key);\n      }}\n    >\n      {glyph}\n    </button>\n  );\n\n  return (\n    <div\n      className={[f.field, f.control, width === 'fit' && `${f.fit} ${s.fit}`, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={[f.frame, s.frame, ghost && s.ghost].filter(Boolean).join(' ')}>\n        <input\n          ref={input}\n          id={id}\n          type=\"text\"\n          role=\"spinbutton\"\n          inputMode=\"decimal\"\n          autoComplete=\"off\"\n          aria-label={ariaLabel}\n          aria-valuenow={known ? value : undefined}\n          aria-valuetext={known ? qty(value, display).spoken : undefined}\n          aria-valuemin={minValue}\n          aria-valuemax={maxValue}\n          placeholder={placeholder}\n          value={draft ?? text}\n          onChange={(e) => {\n            const typed = e.target.value;\n            setDraft(typed);\n            const n = read(typed);\n            if (onInput && typed.trim() !== '' && Number.isFinite(n)) onInput(clampToBounds(n, bounds));\n          }}\n          onFocus={() => {\n            canceled.current = false;\n          }}\n          onBlur={() => {\n            if (draft !== null && !canceled.current) {\n              const n = read(draft);\n              if (Number.isFinite(n)) {\n                const next = clampToBounds(n, bounds);\n                if (next !== value) onChange(next);\n              }\n            }\n            setDraft(null);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.currentTarget.blur();\n            } else if (e.key === 'Escape') {\n              canceled.current = true;\n              e.currentTarget.blur();\n            } else if (spin(e.key)) {\n              e.preventDefault();\n            }\n          }}\n        />\n        {steppers && (\n          <div className={s.steppers}>\n            {stepper('ArrowUp', 'Increment', '▲', known && maxValue !== undefined && value >= maxValue)}\n            {stepper('ArrowDown', 'Decrement', '▼', known && minValue !== undefined && value <= minValue)}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"NumberField-BXFrOi5M.js","names":["NumberField","RACNumberField","f","s","RACInput","RACButton","s","f","field_module_default","NumberField_module_default","NumberField$1","forwardRef","rest","props","NumberField","width","orientation","className","label","Label","Group","ghost","Input","hideSteppers","Button","description","Text","FieldError","errorMessage","clampToBounds","max","min","n","placesOf","text","e","dot","spinKey","by","places","from","bounds","key","FULL_PRECISION","decimal","REPEAT_DELAY_MS","REPEAT_EVERY_MS","UnitField","ariaLabel","draft","setDraft","useState","canceled","useRef","input","known","value","qty","display","read","accepts","parseNumber","typed","parseAs","minValue","maxValue","stepTo","onInput","next","onChange","spin","latestSpin","useEffect","el","onWheel","repeat","stopRepeat","startRepeat","tick","delay","stepper","atBound","glyph","steppers"],"sources":["../../src/components/NumberField/NumberField.module.css","../../src/components/NumberField/NumberField.tsx","../../src/components/spin.ts","../../src/components/NumberField/UnitField.tsx"],"sourcesContent":[".frame {\n  composes: numeric from '@weasel-js/theme/numeric.module.css';\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n}\n\n.frame input {\n  padding: 0 var(--wzl-field-pad-x);\n  text-align: right;\n  -moz-appearance: textfield;\n}\n\n.frame input::-webkit-outer-spin-button,\n.frame input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.steppers {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--wzl-border);\n}\n\n.stepper {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--wzl-control-h-xs);\n  flex: 1;\n  /* The two share the frame's height; left to their glyphs' line boxes they\n     overflow it, and the frame clips the lower one. */\n  min-height: 0;\n  height: auto;\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n  font: inherit;\n  font-size: min(var(--wzl-font-size-2xs), calc(var(--wzl-field-h, var(--wzl-control-h)) * 0.35));\n  line-height: 1;\n}\n\n.stepper:not(:last-child) {\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.stepper[data-hovered]:not([data-disabled]),\n.stepper:hover:not(:disabled):not([data-rac]) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.stepper[data-pressed]:not([data-disabled]),\n.stepper:active:not(:disabled):not([data-rac]) {\n  background: var(--wzl-surface-pressed);\n}\n\n.stepper[data-disabled],\n.stepper:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* Mirrors the property rows' editable readout (`.readoutInput`), so a number\n   sitting inside other chrome does not draw a second box around itself. */\n.ghost {\n  --_frame-h: auto;\n  --_frame-bg: transparent;\n  --_frame-border: 1px solid transparent;\n  --_frame-fg: var(--wzl-accent-fg);\n  --_frame-focus-shadow: none;\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.ghost input {\n  padding: 1px 0;\n}\n\n.ghost:hover {\n  background: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.ghost:focus-within {\n  background: var(--wzl-surface-sunken);\n}\n\n/* `width='fit'` states the field's width in characters: left alone an `<input>`\n   asks for its 20-character intrinsic width, wider than most rows it sits in. */\n.fit .frame {\n  width: fit-content;\n  max-width: 100%;\n}\n\n.fit .frame input {\n  flex: 0 0 auto;\n  width: var(--wzl-number-field-width, 9ch);\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  NumberField as RACNumberField,\n  Label,\n  Input as RACInput,\n  Group,\n  Button as RACButton,\n  Text,\n  FieldError,\n  type NumberFieldProps as RACNumberFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport type { FieldOrientation } from '../Field/Field';\nimport f from '../field.module.css';\nimport s from './NumberField.module.css';\n\n/** Props for {@link NumberField}, on top of React Aria's `NumberField` props. */\nexport type NumberFieldProps = Omit<RACNumberFieldProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  /**\n   * `'stacked'` (the default) puts the label above the field; `'row'` sets it\n   * beside the field at its own width, with any description or error on a\n   * line below. Same vocabulary as {@link Field}'s `orientation`.\n   */\n  orientation?: FieldOrientation;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  /** Hide the up/down stepper buttons. Defaults to false. */\n  hideSteppers?: boolean;\n  /** Render with no box until focused — the readout treatment the property\n   *  rows use, for a value that sits inside other chrome rather than in a form. */\n  ghost?: boolean;\n  /** Native input placeholder — e.g. `'Mixed'` for a multi-selection\n   *  editor with no shared value. */\n  placeholder?: string;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the field sits in.\n   * `'fit'` sizes it to `--wzl-number-field-width` (`9ch` by default) plus its\n   * own chrome, rather than to the input's 20-character intrinsic width.\n   */\n  width?: 'fill' | 'fit';\n  className?: string;\n};\n\n/**\n * Numeric input with stepper buttons, wrapping React Aria's NumberField and\n * supplying the same label / description / errorMessage slots as `Input`.\n * Arrow keys and scroll step the value; parsing and formatting are React\n * Aria's.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const {\n    label,\n    orientation = 'stacked',\n    description,\n    errorMessage,\n    hideSteppers,\n    ghost,\n    placeholder,\n    width = 'fill',\n    className,\n    ...rest\n  } = props;\n  return (\n    <RACNumberField\n      {...rest}\n      className={[\n        f.field,\n        f.control,\n        width === 'fit' && `${f.fit} ${s.fit}`,\n        orientation === 'row' && f.row,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {label !== undefined && <Label className={f.label}>{label}</Label>}\n      <Group className={[f.frame, s.frame, ghost && s.ghost].filter(Boolean).join(' ')}>\n        <RACInput ref={ref} placeholder={placeholder} />\n        {!hideSteppers && (\n          <div className={s.steppers}>\n            <RACButton slot=\"increment\" className={s.stepper} aria-label=\"Increment\">▲</RACButton>\n            <RACButton slot=\"decrement\" className={s.stepper} aria-label=\"Decrement\">▼</RACButton>\n          </div>\n        )}\n      </Group>\n      {description !== undefined && (\n        <Text slot=\"description\" className={`${f.hint} ${f.below}`}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={`${f.error} ${f.below}`}>{errorMessage}</FieldError>\n    </RACNumberField>\n  );\n});\n","/** The bounds a spin key moves a value within. */\nexport interface SpinBounds {\n  step: number;\n  min?: number;\n  max?: number;\n}\n\n/** `n` held within the bounds. */\nexport function clampToBounds(n: number, { min, max }: SpinBounds): number {\n  return Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));\n}\n\n/** Decimal places `n` is written with, up to ten. */\nfunction placesOf(n: number): number {\n  if (!Number.isFinite(n)) return 0;\n  const text = String(n);\n  const e = text.indexOf('e-');\n  if (e >= 0) return Math.min(10, Number(text.slice(e + 2)));\n  const dot = text.indexOf('.');\n  return dot < 0 ? 0 : Math.min(10, text.length - dot - 1);\n}\n\n/**\n * The value a spin-button key moves `from` to, or `null` for a key that does\n * not spin: the arrows by a step, Page Up and Page Down by ten, and Home and\n * End to a bound, where there is one. A sum of steps is rounded to the places\n * its operands carry, so `0.1 + 0.2` lands on `0.3`.\n */\nexport function spinKey(key: string, from: number, bounds: SpinBounds): number | null {\n  const by = (n: number) => {\n    const places = Math.max(placesOf(from), placesOf(bounds.step));\n    return clampToBounds(Number((from + n * bounds.step).toFixed(places)), bounds);\n  };\n  switch (key) {\n    case 'ArrowUp':\n      return by(1);\n    case 'ArrowDown':\n      return by(-1);\n    case 'PageUp':\n      return by(10);\n    case 'PageDown':\n      return by(-10);\n    case 'Home':\n      return bounds.min ?? null;\n    case 'End':\n      return bounds.max ?? null;\n    default:\n      return null;\n  }\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { decimal, parseAs, parseNumber, qty, type Display, type UnitTable } from '@weasel-js/quantity';\nimport { clampToBounds, spinKey } from '../spin';\nimport f from '../field.module.css';\nimport s from './NumberField.module.css';\n\n/** Props for {@link UnitField}. */\nexport interface UnitFieldProps {\n  /** The value in the unit the field shows. NaN shows an empty field. */\n  value: number;\n  /** The committed value, read and clamped, in the unit the field shows: on\n   *  blur or Enter, and on every step. */\n  onChange: (value: number) => void;\n  /** The live value: every keystroke that reads as a number, and every step. */\n  onInput?: (value: number) => void;\n  minValue?: number;\n  maxValue?: number;\n  /** What an arrow key, a stepper or a wheel notch adds or takes away; Page Up\n   *  and Page Down move ten. Defaults to 1. */\n  step?: number;\n  /** Units a person may type, each mapped to the factor that turns a number\n   *  in it into the unit the field shows: `{ mm: 0.1, cm: 1 }`. */\n  accepts?: Readonly<UnitTable>;\n  /** How the value shows, is spoken, and reads back when typed: `fraction()`\n   *  shows `1/12` and reads `1/12` typed. `accepts`, when given, does the\n   *  reading instead. Default: the number with every decimal it has. */\n  display?: Display;\n  placeholder?: string;\n  /** Up and down buttons beside the value, which repeat while held. */\n  steppers?: boolean;\n  /** Render with no box until focused, as {@link NumberField}'s `ghost` does. */\n  ghost?: boolean;\n  /** As {@link NumberField}'s `width`. */\n  width?: 'fill' | 'fit';\n  className?: string;\n  /** Id for the input, for a `<label htmlFor>` outside it. */\n  id?: string;\n  'aria-label'?: string;\n}\n\nconst FULL_PRECISION = decimal({ maxPlaces: 20, grouping: false });\n\nconst REPEAT_DELAY_MS = 400;\nconst REPEAT_EVERY_MS = 60;\n\n/**\n * A number typed as text, so it can carry a unit: `12mm` in a field showing\n * centimeters commits `1.2`. Commits on blur or Enter, reverts on Escape or on\n * text it cannot read, and clamps to its bounds. Steps like a spin button —\n * arrows, Page Up and Down, Home and End to a bound, the wheel while focused,\n * and optional steppers. React Aria's `NumberField` refuses letters as they\n * are typed, which is why this is not that.\n */\nexport function UnitField({\n  value,\n  onChange,\n  onInput,\n  minValue,\n  maxValue,\n  step = 1,\n  accepts,\n  display = FULL_PRECISION,\n  placeholder,\n  steppers,\n  ghost,\n  width = 'fill',\n  className,\n  id,\n  'aria-label': ariaLabel,\n}: UnitFieldProps) {\n  const [draft, setDraft] = useState<string | null>(null);\n  const canceled = useRef(false);\n  const input = useRef<HTMLInputElement>(null);\n  const known = !Number.isNaN(value);\n  const text = known ? qty(value, display).text : '';\n  // `accepts` reads units; the display still reads its own words, like infinity's.\n  const read = (typed: string) => {\n    const n = accepts ? parseNumber(typed, accepts) : Number.NaN;\n    return Number.isNaN(n) ? parseAs(typed, display) : n;\n  };\n  const bounds = { step, min: minValue, max: maxValue };\n\n  // What a step starts from: the text as typed where it reads, else the value.\n  const from = (): number => {\n    const typed = draft === null ? value : read(draft);\n    return Number.isFinite(typed) ? typed : Number.isFinite(value) ? value : 0;\n  };\n  const stepTo = (next: number) => {\n    setDraft(null);\n    onInput?.(next);\n    if (next !== value) onChange(next);\n  };\n  const spin = (key: string): boolean => {\n    const next = spinKey(key, from(), bounds);\n    if (next === null) return false;\n    stepTo(next);\n    return true;\n  };\n\n  // The latest `spin`, for the listeners below, which outlive a render.\n  const latestSpin = useRef(spin);\n  useEffect(() => {\n    latestSpin.current = spin;\n  });\n\n  // The wheel steps only a focused field, so scrolling past one changes nothing.\n  // Not passive, so it can keep the page from scrolling under it.\n  useEffect(() => {\n    const el = input.current;\n    if (!el) return;\n    const onWheel = (e: WheelEvent) => {\n      if (document.activeElement !== el || e.deltaY === 0) return;\n      e.preventDefault();\n      latestSpin.current(e.deltaY < 0 ? 'ArrowUp' : 'ArrowDown');\n    };\n    el.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.removeEventListener('wheel', onWheel);\n  }, []);\n\n  const repeat = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const stopRepeat = () => {\n    if (repeat.current !== null) clearTimeout(repeat.current);\n    repeat.current = null;\n  };\n  useEffect(() => stopRepeat, []);\n  const startRepeat = (key: 'ArrowUp' | 'ArrowDown') => {\n    stopRepeat();\n    latestSpin.current(key);\n    const tick = (delay: number) => {\n      repeat.current = setTimeout(() => {\n        latestSpin.current(key);\n        tick(REPEAT_EVERY_MS);\n      }, delay);\n    };\n    tick(REPEAT_DELAY_MS);\n  };\n  const stepper = (key: 'ArrowUp' | 'ArrowDown', label: string, glyph: string, atBound: boolean) => (\n    <button\n      type=\"button\"\n      className={s.stepper}\n      aria-label={label}\n      tabIndex={-1}\n      disabled={atBound}\n      // Keeps focus in the input, where a press on the button would take it.\n      onPointerDown={(e) => {\n        e.preventDefault();\n        startRepeat(key);\n      }}\n      onPointerUp={stopRepeat}\n      onPointerLeave={stopRepeat}\n      onPointerCancel={stopRepeat}\n      // A click with no pointer down before it — assistive tech, or a test.\n      onClick={(e) => {\n        if (e.detail === 0) latestSpin.current(key);\n      }}\n    >\n      {glyph}\n    </button>\n  );\n\n  return (\n    <div\n      className={[f.field, f.control, width === 'fit' && `${f.fit} ${s.fit}`, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={[f.frame, s.frame, ghost && s.ghost].filter(Boolean).join(' ')}>\n        <input\n          ref={input}\n          id={id}\n          type=\"text\"\n          role=\"spinbutton\"\n          inputMode=\"decimal\"\n          autoComplete=\"off\"\n          aria-label={ariaLabel}\n          aria-valuenow={Number.isFinite(value) ? value : undefined}\n          aria-valuetext={known ? qty(value, display).spoken : undefined}\n          aria-valuemin={minValue}\n          aria-valuemax={maxValue}\n          placeholder={placeholder}\n          value={draft ?? text}\n          onChange={(e) => {\n            const typed = e.target.value;\n            setDraft(typed);\n            const n = read(typed);\n            if (onInput && typed.trim() !== '' && !Number.isNaN(n)) onInput(clampToBounds(n, bounds));\n          }}\n          onFocus={() => {\n            canceled.current = false;\n          }}\n          onBlur={() => {\n            if (draft !== null && !canceled.current) {\n              const n = read(draft);\n              if (!Number.isNaN(n)) {\n                const next = clampToBounds(n, bounds);\n                if (next !== value) onChange(next);\n              }\n            }\n            setDraft(null);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.currentTarget.blur();\n            } else if (e.key === 'Escape') {\n              canceled.current = true;\n              e.currentTarget.blur();\n            } else if (spin(e.key)) {\n              e.preventDefault();\n            }\n          }}\n        />\n        {steppers && (\n          <div className={s.steppers}>\n            {stepper('ArrowUp', 'Increment', '▲', known && maxValue !== undefined && value >= maxValue)}\n            {stepper('ArrowDown', 'Decrement', '▼', known && minValue !== undefined && value <= minValue)}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;GCoDaA,IAAcW,EAAW,SACpC,GACA,GACA;CACA,IAAM,EACJ,UACA,iBAAc,WACd,gBACA,iBACA,iBACA,UACA,gBACA,WAAQ,QACR,cACA,GAAGC,MACDC;CACJ,OACE,kBAACZ,GAAD;EACE,GAAIW;EACJ,WAAW;GACTV,EAAE;GACFA,EAAE;GACFa,MAAU,SAAS,GAAGb,EAAE,IAAI,GAAGC,EAAE;GACjCa,MAAgB,SAASd,EAAE;GAC3Be;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAVb,UAAA;GAYGC,MAAU,KAAA,KAAa,kBAACC,GAAD;IAAO,WAAWjB,EAAE;IAAQ,UAAAgB;GAAa,CAAA;GACjE,kBAACE,GAAD;IAAO,WAAW;KAAClB,EAAE;KAAOC,EAAE;KAAOkB,KAASlB,EAAE;IAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;IAA/E,UAAA,CACE,kBAACC,GAAD;KAAe;KAAkB;IAAc,CAAA,GAC9C,CAACmB,KACA,kBAAC,OAAD;KAAK,WAAWpB,EAAE;KAAlB,UAAA,CACE,kBAACE,GAAD;MAAW,MAAK;MAAY,WAAWF,EAAE;MAAS,cAAW;MAAY,UAAA;KAAY,CAAA,GACrF,kBAACE,GAAD;MAAW,MAAK;MAAY,WAAWF,EAAE;MAAS,cAAW;MAAY,UAAA;KAAY,CAAA,CAClF;IAEF,CAAA,CAAA;;GACNsB,MAAgB,KAAA,KACf,kBAACC,GAAD;IAAM,MAAK;IAAc,WAAW,GAAGxB,EAAE,KAAK,GAAGA,EAAE;IAChD,UAAAuB;GACG,CAAA;GAER,kBAACE,GAAD;IAAY,WAAW,GAAGzB,EAAE,MAAM,GAAGA,EAAE;IAAU,UAAA0B;GAAyB,CAAA;EAC5D;;AAEpB,CAAC;;;AC3FD,SAAgBC,EAAc,GAAW,EAAE,QAAK,UAA2B;CACzE,OAAO,KAAK,IAAIC,KAAO,UAAU,KAAK,IAAIC,KAAO,WAAWC,CAAC,CAAC;AAChE;AAGA,SAASC,EAAS,GAAmB;CACnC,IAAI,CAAC,OAAO,SAASD,CAAC,GAAG,OAAO;CAChC,IAAME,IAAO,OAAOF,CAAC,GACfG,IAAID,EAAK,QAAQ,IAAI;CAC3B,IAAIC,KAAK,GAAG,OAAO,KAAK,IAAI,IAAI,OAAOD,EAAK,MAAMC,IAAI,CAAC,CAAC,CAAC;CACzD,IAAMC,IAAMF,EAAK,QAAQ,GAAG;CAC5B,OAAOE,IAAM,IAAI,IAAI,KAAK,IAAI,IAAIF,EAAK,SAASE,IAAM,CAAC;AACzD;AAQA,SAAgBC,EAAQ,GAAa,GAAc,GAAmC;CACpF,IAAMC,KAAM,MAAc;EACxB,IAAMC,IAAS,KAAK,IAAIN,EAASO,CAAI,GAAGP,EAASQ,EAAO,IAAI,CAAC;EAC7D,OAAOZ,EAAc,QAAQW,IAAOR,IAAIS,EAAO,KAAA,CAAM,QAAQF,CAAM,CAAC,GAAGE,CAAM;CAC/E;CACA,QAAQC,GAAR;EACE,KAAK,WACH,OAAOJ,EAAG,CAAC;EACb,KAAK,aACH,OAAOA,EAAG,EAAE;EACd,KAAK,UACH,OAAOA,EAAG,EAAE;EACd,KAAK,YACH,OAAOA,EAAG,GAAG;EACf,KAAK,QACH,OAAOG,EAAO,OAAO;EACvB,KAAK,OACH,OAAOA,EAAO,OAAO;EACvB,SACE,OAAO;CACX;AACF;;;ACTA,IAAME,IAAiBC,EAAQ;CAAE,WAAW;CAAI,UAAU;AAAM,CAAC,GAE3DC,IAAkB,KAClBC,IAAkB;AAUxB,SAAgBC,EAAU,EACxB,UACA,aACA,YACA,aACA,aACA,UAAO,GACP,YACA,aAAUJ,GACV,gBACA,aACA,UACA,WAAQ,QACR,cACA,OACA,cAAcK,KACG;CACjB,IAAM,CAACC,GAAOC,KAAYC,EAAwB,IAAI,GAChDC,IAAWC,EAAO,EAAK,GACvBC,IAAQD,EAAyB,IAAI,GACrCE,IAAQ,CAAC,OAAO,MAAMC,CAAK,GAC3BtB,IAAOqB,IAAQE,EAAID,GAAOE,CAAO,CAAC,CAAC,OAAO,IAE1CC,KAAQ,MAAkB;EAC9B,IAAM3B,IAAI4B,IAAUC,EAAYC,GAAOF,CAAO,IAAI;EAClD,OAAO,OAAO,MAAM5B,CAAC,IAAI+B,EAAQD,GAAOJ,CAAO,IAAI1B;CACrD,GACMS,IAAS;EAAE;EAAM,KAAKuB;EAAU,KAAKC;CAAS,GAG9CzB,UAAqB;EACzB,IAAMsB,IAAQb,MAAU,OAAOO,IAAQG,EAAKV,CAAK;EACjD,OAAO,OAAO,SAASa,CAAK,IAAIA,IAAQ,OAAO,SAASN,CAAK,IAAIA,IAAQ;CAC3E,GACMU,KAAU,MAAiB;EAG/B,AAFAhB,EAAS,IAAI,GACbiB,IAAUC,CAAI,GACVA,MAASZ,KAAOa,EAASD,CAAI;CACnC,GACME,KAAQ,MAAyB;EACrC,IAAMF,IAAO/B,EAAQK,GAAKF,EAAK,GAAGC,CAAM;EAGxC,OAFI2B,MAAS,SACbF,EAAOE,CAAI,GACJ;CACT,GAGMG,IAAalB,EAAOiB,CAAI;CAO9B,AANAE,QAAgB;EACd,EAAW,UAAUF;CACvB,CAAC,GAIDE,QAAgB;EACd,IAAMC,IAAKnB,EAAM;EACjB,IAAI,CAACmB,GAAI;EACT,IAAMC,KAAW,MAAkB;GACjC,AAAI,SAAS,kBAAkBD,KAAMtC,EAAE,WAAW,MAClDA,EAAE,eAAe,GACjBoC,EAAW,QAAQpC,EAAE,SAAS,IAAI,YAAY,WAAW;EAC3D;EAEA,OADAsC,EAAG,iBAAiB,SAASC,GAAS,EAAE,SAAS,GAAM,CAAC,SAC3CD,EAAG,oBAAoB,SAASC,CAAO;CACtD,GAAG,CAAC,CAAC;CAEL,IAAMC,IAAStB,EAA6C,IAAI,GAC1DuB,UAAmB;EAEvB,AADID,EAAO,YAAY,QAAM,aAAaA,EAAO,OAAO,GACxD,EAAO,UAAU;CACnB;CACA,QAAgBC,GAAY,CAAC,CAAC;CAC9B,IAAMC,KAAe,MAAiC;EAEpD,AADAD,EAAW,GACXL,EAAW,QAAQ7B,CAAG;EACtB,IAAMoC,KAAQ,MAAkB;GAC9B,EAAO,UAAU,iBAAiB;IAEhC,AADAP,EAAW,QAAQ7B,CAAG,GACtBoC,EAAKhC,CAAe;GACtB,GAAGiC,CAAK;EACV;EACA,EAAKlC,CAAe;CACtB,GACMmC,KAAW,GAA8B,GAAe,GAAe,MAC3E,kBAAC,UAAD;EACE,MAAK;EACL,WAAW1E,EAAE;EACb,cAAYY;EACZ,UAAU;EACV,UAAU+D;EAEV,gBAAgB,MAAM;GAEpB,AADA9C,EAAE,eAAe,GACjB0C,EAAYnC,CAAG;EACjB;EACA,aAAakC;EACb,gBAAgBA;EAChB,iBAAiBA;EAEjB,UAAU,MAAM;GACd,AAAIzC,EAAE,WAAW,KAAGoC,EAAW,QAAQ7B,CAAG;EAC5C;EAEC,UAAAwC;CACK,CAAA;CAGV,OACE,kBAAC,OAAD;EACE,WAAW;GAAC3E,EAAE;GAAOA,EAAE;GAASQ,MAAU,SAAS,GAAGR,EAAE,IAAI,GAAGD,EAAE;GAAOW;EAAS,CAAC,CAC/E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEX,UAAA,kBAAC,OAAD;GAAK,WAAW;IAACV,EAAE;IAAOD,EAAE;IAAOe,KAASf,EAAE;GAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAA7E,UAAA,CACE,kBAAC,SAAD;IACE,KAAKgD;IACD;IACJ,MAAK;IACL,MAAK;IACL,WAAU;IACV,cAAa;IACb,cAAYN;IACZ,iBAAe,OAAO,SAASQ,CAAK,IAAIA,IAAQ,KAAA;IAChD,kBAAgBD,IAAQE,EAAID,GAAOE,CAAO,CAAC,CAAC,SAAS,KAAA;IACrD,iBAAeM;IACf,iBAAeC;IACF;IACb,OAAOhB,KAASf;IAChB,WAAW,MAAM;KACf,IAAM4B,IAAQ,EAAE,OAAO;KACvB,EAASA,CAAK;KACd,IAAM,IAAIH,EAAKG,CAAK;KACpB,AAAIK,KAAWL,EAAM,KAAK,MAAM,MAAM,CAAC,OAAO,MAAM,CAAC,KAAGK,EAAQtC,EAAc,GAAGY,CAAM,CAAC;IAC1F;IACA,eAAe;KACb,EAAS,UAAU;IACrB;IACA,cAAc;KACZ,IAAIQ,MAAU,QAAQ,CAACG,EAAS,SAAS;MACvC,IAAMpB,IAAI2B,EAAKV,CAAK;MACpB,IAAI,CAAC,OAAO,MAAMjB,CAAC,GAAG;OACpB,IAAMoC,IAAOvC,EAAcG,GAAGS,CAAM;OACpC,AAAI2B,MAASZ,KAAOa,EAASD,CAAI;MACnC;KACF;KACA,EAAS,IAAI;IACf;IACA,YAAY,MAAM;KAChB,AAAI,EAAE,QAAQ,UACZ,EAAE,cAAc,KAAK,IACZ,EAAE,QAAQ,YACnB,EAAS,UAAU,IACnB,EAAE,cAAc,KAAK,KACZE,EAAK,EAAE,GAAG,KACnB,EAAE,eAAe;IAErB;GACD,CAAA,GACAa,KACC,kBAAC,OAAD;IAAK,WAAW7E,EAAE;IAAlB,UAAA,CACG0E,EAAQ,WAAW,aAAa,KAAKzB,KAASU,MAAa,KAAA,KAAaT,KAASS,CAAQ,GACzFe,EAAQ,aAAa,aAAa,KAAKzB,KAASS,MAAa,KAAA,KAAaR,KAASQ,CAAQ,CACzF;GAEJ,CAAA,CAAA;;CACF,CAAA;AAET"}

package/dist/chunks/{PaintField-BdmQM53v.js → PaintField-DX4uYlF9.js}

@@ -1,7 +1,7 @@
 import { i as e } from "./portalHost-CE70wLzo.js";
 import { t } from "./listbox.module-BcdVJMbm.js";
 import { t as n } from "./paintPreview-CuSZiHpR.js";
-import { t as r } from "./PaintInput-DaQMeBsI.js";
+import { t as r } from "./PaintInput-CWyOJXUM.js";
 import { usePaintKind as i } from "@weasel-js/core";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import "react";
@@ -60,4 +60,4 @@ function p(p) {
 //#endregion
 export { p as t };
 
-//# sourceMappingURL=PaintField-BdmQM53v.js.map
+//# sourceMappingURL=PaintField-DX4uYlF9.js.map

package/dist/chunks/{PaintField-BdmQM53v.js.map → PaintField-DX4uYlF9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PaintField-BdmQM53v.js","names":["RACButton","s","RACPopover","RACDialog","listbox","useOverlayPortal","paintPreviewCss","PaintInput","PaintField_module_default","kindLabel","mixed","paint","label","PaintField","props","ariaLabel","portalContainer","preview","value","usePaintKind","DialogTrigger","anchor","Button","className","unset","Popover","portalProps","Dialog","listbox_module_default"],"sources":["../../src/components/PaintField/PaintField.module.css","../../src/components/PaintField/PaintField.tsx"],"sourcesContent":[".trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  inline-size: 100%;\n  min-inline-size: 0;\n  padding: 1px var(--wzl-space-3) 1px 1px;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  background: var(--wzl-surface);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n  cursor: pointer;\n}\n\n.trigger[data-unset] {\n  opacity: 0.6;\n}\n\n.trigger[data-focus-visible] {\n  outline: none;\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.swatch {\n  /* A paint preview at a fixed 26:18 aspect, not a control box. */\n  inline-size: 26px;\n  block-size: 18px; /* not-a-control */\n  flex: 0 0 auto;\n  border-radius: calc(var(--wzl-radius-sm) - var(--wzl-border-w));\n  /* Checker under the paint, so a translucent one reads as translucent. */\n  background-color: var(--wzl-surface-raised);\n  box-shadow: inset 0 0 0 1px var(--wzl-border);\n}\n\n/* No paint to show: the checker stands in rather than an invented color. */\n.swatch[data-empty],\n.trigger[data-mixed] .swatch {\n  background: repeating-conic-gradient(\n      var(--wzl-checker-a) 0% 25%,\n      var(--wzl-checker-b) 0% 50%\n    )\n    50% / var(--wzl-checker-size) var(--wzl-checker-size);\n}\n\n.label {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: start;\n}\n\n.popover {\n  outline: none;\n}\n\n.body {\n  inline-size: 240px;\n  padding: var(--wzl-space-4);\n}\n","import { type ReactElement } from 'react';\nimport {\n  Button as RACButton,\n  Dialog as RACDialog,\n  DialogTrigger,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { usePaintKind, type FillStyle, type PaintKind } from '@weasel-js/core';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport { paintPreviewCss } from '../../paintPreview';\nimport { PaintInput } from '../PaintInput';\nimport listbox from '../listbox.module.css';\nimport s from './PaintField.module.css';\n\n/** Props for {@link PaintField}. `onInput` fires throughout a gesture inside\n *  the popover and `onChange` once at its end. */\nexport interface PaintFieldProps extends OverlayPortalProps {\n  /** The paint being edited. `null` is an explicit \"no paint\"; `undefined` is\n   *  no value to show. */\n  value: FillStyle | null | undefined;\n  /** Indeterminate presentation: the trigger says \"Mixed\" and the editor\n   *  lights no kind. */\n  mixed?: boolean;\n  /** Dim the trigger — a value is in effect but was never chosen. */\n  unset?: boolean;\n  /** Restrict the editor's kind bar. Default: every registered kind. */\n  kinds?: readonly PaintKind[];\n  /** Offer \"None\" in the editor. Default `true`. */\n  allowNone?: boolean;\n  onInput?: (next: FillStyle | null) => void;\n  onChange: (next: FillStyle | null) => void;\n  /** Names the paint this field edits — `Fill`, `Color`. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** What the trigger says it is holding. */\nfunction kindLabel(paint: FillStyle | null | undefined, mixed: boolean, label: string | undefined): string {\n  if (mixed) return 'Mixed';\n  if (paint === null) return 'None';\n  if (paint === undefined) return '—';\n  return label ?? (paint.fill ?? 'solid');\n}\n\n/**\n * A whole `FillStyle` in one control slot: a swatch that says which kind it\n * holds, and a popover holding {@link PaintInput}.\n *\n * `PaintInput` itself is a kind bar over a body — six segments and a stop\n * editor — which a property row's control column cannot hold. This is the\n * shape for a narrow slot, and the difference that matters is fidelity: a\n * `ColorField` in that slot reads a gradient's first stop and writes a solid\n * back, so touching the control loses the paint.\n */\nexport function PaintField(props: PaintFieldProps): ReactElement {\n  const {\n    value, mixed = false, unset = false, kinds, allowNone = true,\n    onInput, onChange, className, portalContainer,\n  } = props;\n  const ariaLabel = props['aria-label'];\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n  const preview = mixed ? undefined : paintPreviewCss(value);\n  const label = usePaintKind(value?.fill)?.label;\n\n  return (\n    <DialogTrigger>\n      {anchor}\n      <RACButton\n        className={[s.trigger, className].filter(Boolean).join(' ')}\n        aria-label={ariaLabel}\n        {...(unset ? { 'data-unset': '' } : {})}\n        {...(mixed ? { 'data-mixed': '' } : {})}\n      >\n        <span\n          className={s.swatch}\n          aria-hidden=\"true\"\n          {...(preview ? { style: { background: preview } } : { 'data-empty': '' })}\n        />\n        <span className={s.label}>{kindLabel(value, mixed, label)}</span>\n      </RACButton>\n      {/* `data-weasel-overlay`: see Select — the popover renders in a portal,\n          outside the subtree the trigger sits in. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACDialog className={`${listbox.surface} ${s.body}`} aria-label={ariaLabel ? `${ariaLabel} editor` : 'Paint editor'}>\n          <PaintInput\n            value={value}\n            mixed={mixed}\n            unset={unset}\n            kinds={kinds}\n            allowNone={allowNone}\n            onInput={onInput}\n            onChange={onChange}\n            aria-label={ariaLabel}\n          />\n        </RACDialog>\n      </RACPopover>\n    </DialogTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;ACqCA,SAASS,EAAU,GAAqC,GAAgB,GAAmC;CAIzG,OAHIC,IAAc,UACdC,MAAU,OAAa,SACvBA,MAAU,KAAA,IAAkB,MACzBC,KAAUD,EAAM,QAAQ;AACjC;AAYA,SAAgBE,EAAW,GAAsC;CAC/D,IAAM,EACJ,UAAO,WAAQ,IAAO,WAAQ,IAAO,UAAO,eAAY,IACxD,YAAS,aAAU,cAAW,uBAC5BC,GACEC,IAAYD,EAAM,eAClB,EAAE,WAAQ,mBAAgBT,EAAiBW,CAAe,GAC1DC,IAAUP,IAAQ,KAAA,IAAYJ,EAAgBY,CAAK,GACnDN,IAAQO,EAAaD,GAAO,IAAI,CAAC,EAAE;CAEzC,OACE,kBAACE,GAAD,EAAA,UAAA;EACGC;EACD,kBAACrB,GAAD;GACE,WAAW,CAACC,EAAE,SAASsB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAC1D,cAAYR;GACZ,GAAKS,IAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;GACrC,GAAKd,IAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;GAJvC,UAAA,CAME,kBAAC,QAAD;IACE,WAAWT,EAAE;IACb,eAAY;IACZ,GAAKgB,IAAU,EAAE,OAAO,EAAE,YAAYA,EAAQ,EAAE,IAAI,EAAE,cAAc,GAAG;GACxE,CAAA,GACD,kBAAC,QAAD;IAAM,WAAWhB,EAAE;IAAQ,UAAAQ,EAAUS,GAAOR,GAAOE,CAAK;GAAQ,CAAA,CACvD;;EAGX,kBAACV,GAAD;GAAY,WAAWD,EAAE;GAAS,uBAAoB;GAAG,GAAIyB;GAC3D,UAAA,kBAACvB,GAAD;IAAW,WAAW,GAAGC,EAAQ,QAAQ,GAAGH,EAAE;IAAQ,cAAYc,IAAY,GAAGA,EAAU,WAAW;IACpG,UAAA,kBAACR,GAAD;KACS;KACA;KACA;KACA;KACI;KACF;KACC;KACV,cAAYQ;IACb,CAAA;GACQ,CAAA;EACD,CAAA;CACC,EAAA,CAAA;AAEnB"}
+{"version":3,"file":"PaintField-DX4uYlF9.js","names":["RACButton","s","RACPopover","RACDialog","listbox","useOverlayPortal","paintPreviewCss","PaintInput","PaintField_module_default","kindLabel","mixed","paint","label","PaintField","props","ariaLabel","portalContainer","preview","value","usePaintKind","DialogTrigger","anchor","Button","className","unset","Popover","portalProps","Dialog","listbox_module_default"],"sources":["../../src/components/PaintField/PaintField.module.css","../../src/components/PaintField/PaintField.tsx"],"sourcesContent":[".trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  inline-size: 100%;\n  min-inline-size: 0;\n  padding: 1px var(--wzl-space-3) 1px 1px;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  background: var(--wzl-surface);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n  cursor: pointer;\n}\n\n.trigger[data-unset] {\n  opacity: 0.6;\n}\n\n.trigger[data-focus-visible] {\n  outline: none;\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.swatch {\n  /* A paint preview at a fixed 26:18 aspect, not a control box. */\n  inline-size: 26px;\n  block-size: 18px; /* not-a-control */\n  flex: 0 0 auto;\n  border-radius: calc(var(--wzl-radius-sm) - var(--wzl-border-w));\n  /* Checker under the paint, so a translucent one reads as translucent. */\n  background-color: var(--wzl-surface-raised);\n  box-shadow: inset 0 0 0 1px var(--wzl-border);\n}\n\n/* No paint to show: the checker stands in rather than an invented color. */\n.swatch[data-empty],\n.trigger[data-mixed] .swatch {\n  background: repeating-conic-gradient(\n      var(--wzl-checker-a) 0% 25%,\n      var(--wzl-checker-b) 0% 50%\n    )\n    50% / var(--wzl-checker-size) var(--wzl-checker-size);\n}\n\n.label {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: start;\n}\n\n.popover {\n  outline: none;\n}\n\n.body {\n  inline-size: 240px;\n  padding: var(--wzl-space-4);\n}\n","import { type ReactElement } from 'react';\nimport {\n  Button as RACButton,\n  Dialog as RACDialog,\n  DialogTrigger,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { usePaintKind, type FillStyle, type PaintKind } from '@weasel-js/core';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport { paintPreviewCss } from '../../paintPreview';\nimport { PaintInput } from '../PaintInput';\nimport listbox from '../listbox.module.css';\nimport s from './PaintField.module.css';\n\n/** Props for {@link PaintField}. `onInput` fires throughout a gesture inside\n *  the popover and `onChange` once at its end. */\nexport interface PaintFieldProps extends OverlayPortalProps {\n  /** The paint being edited. `null` is an explicit \"no paint\"; `undefined` is\n   *  no value to show. */\n  value: FillStyle | null | undefined;\n  /** Indeterminate presentation: the trigger says \"Mixed\" and the editor\n   *  lights no kind. */\n  mixed?: boolean;\n  /** Dim the trigger — a value is in effect but was never chosen. */\n  unset?: boolean;\n  /** Restrict the editor's kind bar. Default: every registered kind. */\n  kinds?: readonly PaintKind[];\n  /** Offer \"None\" in the editor. Default `true`. */\n  allowNone?: boolean;\n  onInput?: (next: FillStyle | null) => void;\n  onChange: (next: FillStyle | null) => void;\n  /** Names the paint this field edits — `Fill`, `Color`. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** What the trigger says it is holding. */\nfunction kindLabel(paint: FillStyle | null | undefined, mixed: boolean, label: string | undefined): string {\n  if (mixed) return 'Mixed';\n  if (paint === null) return 'None';\n  if (paint === undefined) return '—';\n  return label ?? (paint.fill ?? 'solid');\n}\n\n/**\n * A whole `FillStyle` in one control slot: a swatch that says which kind it\n * holds, and a popover holding {@link PaintInput}.\n *\n * `PaintInput` itself is a kind bar over a body — six segments and a stop\n * editor — which a property row's control column cannot hold. This is the\n * shape for a narrow slot, and the difference that matters is fidelity: a\n * `ColorField` in that slot reads a gradient's first stop and writes a solid\n * back, so touching the control loses the paint.\n */\nexport function PaintField(props: PaintFieldProps): ReactElement {\n  const {\n    value, mixed = false, unset = false, kinds, allowNone = true,\n    onInput, onChange, className, portalContainer,\n  } = props;\n  const ariaLabel = props['aria-label'];\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n  const preview = mixed ? undefined : paintPreviewCss(value);\n  const label = usePaintKind(value?.fill)?.label;\n\n  return (\n    <DialogTrigger>\n      {anchor}\n      <RACButton\n        className={[s.trigger, className].filter(Boolean).join(' ')}\n        aria-label={ariaLabel}\n        {...(unset ? { 'data-unset': '' } : {})}\n        {...(mixed ? { 'data-mixed': '' } : {})}\n      >\n        <span\n          className={s.swatch}\n          aria-hidden=\"true\"\n          {...(preview ? { style: { background: preview } } : { 'data-empty': '' })}\n        />\n        <span className={s.label}>{kindLabel(value, mixed, label)}</span>\n      </RACButton>\n      {/* `data-weasel-overlay`: see Select — the popover renders in a portal,\n          outside the subtree the trigger sits in. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACDialog className={`${listbox.surface} ${s.body}`} aria-label={ariaLabel ? `${ariaLabel} editor` : 'Paint editor'}>\n          <PaintInput\n            value={value}\n            mixed={mixed}\n            unset={unset}\n            kinds={kinds}\n            allowNone={allowNone}\n            onInput={onInput}\n            onChange={onChange}\n            aria-label={ariaLabel}\n          />\n        </RACDialog>\n      </RACPopover>\n    </DialogTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;ACqCA,SAASS,EAAU,GAAqC,GAAgB,GAAmC;CAIzG,OAHIC,IAAc,UACdC,MAAU,OAAa,SACvBA,MAAU,KAAA,IAAkB,MACzBC,KAAUD,EAAM,QAAQ;AACjC;AAYA,SAAgBE,EAAW,GAAsC;CAC/D,IAAM,EACJ,UAAO,WAAQ,IAAO,WAAQ,IAAO,UAAO,eAAY,IACxD,YAAS,aAAU,cAAW,uBAC5BC,GACEC,IAAYD,EAAM,eAClB,EAAE,WAAQ,mBAAgBT,EAAiBW,CAAe,GAC1DC,IAAUP,IAAQ,KAAA,IAAYJ,EAAgBY,CAAK,GACnDN,IAAQO,EAAaD,GAAO,IAAI,CAAC,EAAE;CAEzC,OACE,kBAACE,GAAD,EAAA,UAAA;EACGC;EACD,kBAACrB,GAAD;GACE,WAAW,CAACC,EAAE,SAASsB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAC1D,cAAYR;GACZ,GAAKS,IAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;GACrC,GAAKd,IAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;GAJvC,UAAA,CAME,kBAAC,QAAD;IACE,WAAWT,EAAE;IACb,eAAY;IACZ,GAAKgB,IAAU,EAAE,OAAO,EAAE,YAAYA,EAAQ,EAAE,IAAI,EAAE,cAAc,GAAG;GACxE,CAAA,GACD,kBAAC,QAAD;IAAM,WAAWhB,EAAE;IAAQ,UAAAQ,EAAUS,GAAOR,GAAOE,CAAK;GAAQ,CAAA,CACvD;;EAGX,kBAACV,GAAD;GAAY,WAAWD,EAAE;GAAS,uBAAoB;GAAG,GAAIyB;GAC3D,UAAA,kBAACvB,GAAD;IAAW,WAAW,GAAGC,EAAQ,QAAQ,GAAGH,EAAE;IAAQ,cAAYc,IAAY,GAAGA,EAAU,WAAW;IACpG,UAAA,kBAACR,GAAD;KACS;KACA;KACA;KACA;KACI;KACF;KACC;KACV,cAAYQ;IACb,CAAA;GACQ,CAAA;EACD,CAAA;CACC,EAAA,CAAA;AAEnB"}

package/dist/chunks/{PaintInput-DaQMeBsI.js → PaintInput-CWyOJXUM.js}

@@ -1,8 +1,8 @@
-import { a as e, t } from "./Icon--B1ME-6c.js";
+import { a as e, t } from "./Icon-DPRUIo3G.js";
 import { n, t as r } from "./ColorField-BwlelY26.js";
-import { t as i } from "./ToggleBar-Z2jZiguF.js";
-import { r as a } from "./GradientEditor-DD2OjQtn.js";
-import { t as o } from "./PatternPicker-B3HcMZWg.js";
+import { t as i } from "./ToggleBar-BZ4Gk1IU.js";
+import { r as a } from "./GradientEditor-vz771M-N.js";
+import { t as o } from "./PatternPicker-0j51aDJ3.js";
 import { getAlpha01 as s, getPaintKind as c, paintAlpha as l, paintWithAlpha as u, solid as d, switchGradientKind as f, toHex8 as p, usePaintKind as m, usePaintKinds as h, withAlpha01 as g } from "@weasel-js/core";
 import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
 import { useCallback as b, useRef as x } from "react";
@@ -129,4 +129,4 @@ function k(s) {
 //#endregion
 export { k as t };
 
-//# sourceMappingURL=PaintInput-DaQMeBsI.js.map
+//# sourceMappingURL=PaintInput-CWyOJXUM.js.map

package/dist/chunks/{PaintInput-DaQMeBsI.js.map → PaintInput-CWyOJXUM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PaintInput-DaQMeBsI.js","names":["s","_Fragment","ICON_PATHS","ColorField","ToggleBar","GradientEditor","PatternPicker","PaintInput_module_default","FALLBACK_COLOR","NONE","solidHex8","hex8","toHex8","paint","withAlpha01","getAlpha01","paintAlpha","solidFromField","solid","color","isPattern","kindOf","PaintInput","props","ariaLabel","remembered","useRef","active","mixed","value","valueKind","usePaintKind","entries","usePaintKinds","kinds","entry","segment","icon","id","Icon","label","items","allowNone","currentColor","useCallback","switchKind","kind","seen","converted","switchGradientKind","getPaintKind","onChange","unset","className","renderBody","withOpacity","Fragment","body","OpacityRange","onInput","paintWithAlpha","a01","Editor"],"sources":["../../src/components/PaintInput/PaintInput.module.css","../../src/components/PaintInput/PaintInput.tsx"],"sourcesContent":["/* Kind switch stacked over whichever paint body it selects. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n/* A value is in effect but nobody chose it. Never louder than mixed. */\n.unset {\n  opacity: 0.55;\n}\n\n/* A kind with no editor: named, not editable. */\n.noEditor {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n\n/* The opacity slider under a paint with no single color, laid out as the\n * solid's sits beside its swatch. */\n.opacity {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n}\n","import { useCallback, useRef, type ReactElement } from 'react';\nimport {\n  getAlpha01,\n  getPaintKind,\n  paintAlpha,\n  paintWithAlpha,\n  solid,\n  switchGradientKind,\n  toHex8,\n  usePaintKind,\n  usePaintKinds,\n  withAlpha01,\n  type FillStyle,\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 { OpacityRange } from '../ColorField/OpacityRange';\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\n/** A solid paint as the one `#rrggbbaa` a color field edits. Its alpha lives\n *  in `opacity`; a hex alpha left in `color` multiplies with it when painted,\n *  so both fold in. */\nfunction solidHex8(paint: FillStyle): string {\n  const hex8 = toHex8((paint as { color: string }).color);\n  return withAlpha01(hex8.slice(0, 7), getAlpha01(hex8) * paintAlpha(paint));\n}\n\n/** `solid(color)` at the slider's own 1% resolution: the alpha arrives\n *  through a hex channel, which would turn 70% into 0.70196. */\nfunction solidFromField(color: string): FillStyle {\n  const paint = solid(color);\n  return paint.opacity === undefined\n    ? paint\n    : { ...paint, opacity: Math.round(paint.opacity * 100) / 100 };\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 valueKind = usePaintKind(value?.fill);\n  const entries = usePaintKinds().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 valueKind?.colorOf(value) ?? FALLBACK_COLOR;\n  }, [value, valueKind]);\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    const converted = value != null ? switchGradientKind(value, kind) : undefined;\n    if (converted !== undefined) {\n      onChange(converted);\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  /** A solid's alpha rides its swatch; every other kind has no one color to\n   *  carry it, so its `opacity` gets the same slider under the body. */\n  function withOpacity(paint: FillStyle, body: ReactElement): ReactElement {\n    return (\n      <>\n        {body}\n        <div className={s.opacity}>\n          <OpacityRange\n            value={paintAlpha(paint)}\n            aria-label={ariaLabel}\n            onInput={(a01) => onInput?.(paintWithAlpha(paint, a01))}\n            onChange={(a01) => onChange(paintWithAlpha(paint, a01))}\n          />\n        </div>\n      </>\n    );\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(solidFromField(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    if (valueKind?.Editor) {\n      const Editor = valueKind.Editor;\n      return withOpacity(value, <Editor value={value} onInput={onInput} onChange={onChange} />);\n    }\n    if (valueKind?.stopsOf) {\n      return withOpacity(value, (\n        <GradientEditor\n          value={value}\n          kindSwitch={false}\n          onInput={onInput}\n          onChange={onChange}\n        />\n      ));\n    }\n    if (isPattern(value)) {\n      return withOpacity(\n        value,\n        <PatternPicker value={value} color={currentColor()} onChange={onChange} />,\n      );\n    }\n    const kind = kindOf(value);\n    if (kind !== 'solid') {\n      // Editing a paint this control cannot represent would overwrite it, so\n      // a kind with no editor is shown and left alone.\n      return <div className={s.noEditor}>{valueKind?.label ?? kind}: no editor</div>;\n    }\n    return (\n      <ColorField\n        value={solidHex8(value)}\n        alpha\n        aria-label={ariaLabel}\n        onInput={(color) => onInput?.(solidFromField(color))}\n        onChange={(color) => onChange(solidFromField(color))}\n      />\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"PaintInput-CWyOJXUM.js","names":["s","_Fragment","ICON_PATHS","ColorField","ToggleBar","GradientEditor","PatternPicker","PaintInput_module_default","FALLBACK_COLOR","NONE","solidHex8","hex8","toHex8","paint","withAlpha01","getAlpha01","paintAlpha","solidFromField","solid","color","isPattern","kindOf","PaintInput","props","ariaLabel","remembered","useRef","active","mixed","value","valueKind","usePaintKind","entries","usePaintKinds","kinds","entry","segment","icon","id","Icon","label","items","allowNone","currentColor","useCallback","switchKind","kind","seen","converted","switchGradientKind","getPaintKind","onChange","unset","className","renderBody","withOpacity","Fragment","body","OpacityRange","onInput","paintWithAlpha","a01","Editor"],"sources":["../../src/components/PaintInput/PaintInput.module.css","../../src/components/PaintInput/PaintInput.tsx"],"sourcesContent":["/* Kind switch stacked over whichever paint body it selects. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n/* A value is in effect but nobody chose it. Never louder than mixed. */\n.unset {\n  opacity: 0.55;\n}\n\n/* A kind with no editor: named, not editable. */\n.noEditor {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n\n/* The opacity slider under a paint with no single color, laid out as the\n * solid's sits beside its swatch. */\n.opacity {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n}\n","import { useCallback, useRef, type ReactElement } from 'react';\nimport {\n  getAlpha01,\n  getPaintKind,\n  paintAlpha,\n  paintWithAlpha,\n  solid,\n  switchGradientKind,\n  toHex8,\n  usePaintKind,\n  usePaintKinds,\n  withAlpha01,\n  type FillStyle,\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 { OpacityRange } from '../ColorField/OpacityRange';\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\n/** A solid paint as the one `#rrggbbaa` a color field edits. Its alpha lives\n *  in `opacity`; a hex alpha left in `color` multiplies with it when painted,\n *  so both fold in. */\nfunction solidHex8(paint: FillStyle): string {\n  const hex8 = toHex8((paint as { color: string }).color);\n  return withAlpha01(hex8.slice(0, 7), getAlpha01(hex8) * paintAlpha(paint));\n}\n\n/** `solid(color)` at the slider's own 1% resolution: the alpha arrives\n *  through a hex channel, which would turn 70% into 0.70196. */\nfunction solidFromField(color: string): FillStyle {\n  const paint = solid(color);\n  return paint.opacity === undefined\n    ? paint\n    : { ...paint, opacity: Math.round(paint.opacity * 100) / 100 };\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 valueKind = usePaintKind(value?.fill);\n  const entries = usePaintKinds().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 valueKind?.colorOf(value) ?? FALLBACK_COLOR;\n  }, [value, valueKind]);\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    const converted = value != null ? switchGradientKind(value, kind) : undefined;\n    if (converted !== undefined) {\n      onChange(converted);\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  /** A solid's alpha rides its swatch; every other kind has no one color to\n   *  carry it, so its `opacity` gets the same slider under the body. */\n  function withOpacity(paint: FillStyle, body: ReactElement): ReactElement {\n    return (\n      <>\n        {body}\n        <div className={s.opacity}>\n          <OpacityRange\n            value={paintAlpha(paint)}\n            aria-label={ariaLabel}\n            onInput={(a01) => onInput?.(paintWithAlpha(paint, a01))}\n            onChange={(a01) => onChange(paintWithAlpha(paint, a01))}\n          />\n        </div>\n      </>\n    );\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(solidFromField(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    if (valueKind?.Editor) {\n      const Editor = valueKind.Editor;\n      return withOpacity(value, <Editor value={value} onInput={onInput} onChange={onChange} />);\n    }\n    if (valueKind?.stopsOf) {\n      return withOpacity(value, (\n        <GradientEditor\n          value={value}\n          kindSwitch={false}\n          onInput={onInput}\n          onChange={onChange}\n        />\n      ));\n    }\n    if (isPattern(value)) {\n      return withOpacity(\n        value,\n        <PatternPicker value={value} color={currentColor()} onChange={onChange} />,\n      );\n    }\n    const kind = kindOf(value);\n    if (kind !== 'solid') {\n      // Editing a paint this control cannot represent would overwrite it, so\n      // a kind with no editor is shown and left alone.\n      return <div className={s.noEditor}>{valueKind?.label ?? kind}: no editor</div>;\n    }\n    return (\n      <ColorField\n        value={solidHex8(value)}\n        alpha\n        aria-label={ariaLabel}\n        onInput={(color) => onInput?.(solidFromField(color))}\n        onChange={(color) => onChange(solidFromField(color))}\n      />\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/{PatternPicker-B3HcMZWg.js → PatternPicker-0j51aDJ3.js}

@@ -1,13 +1,13 @@
-import { r as e } from "./NumberField-DS0WSiin.js";
-import { t } from "./ToggleBar-Z2jZiguF.js";
+import { t as e } from "./ToggleBar-BZ4Gk1IU.js";
+import { r as t } from "./NumberField-BXFrOi5M.js";
 import { composePatternTransform as n, decomposePatternTransform as r } from "@weasel-js/core";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { tilePreviewCssUrl as o } from "@weasel-js/svg";
 var s = {
-	root: "_root_dgwqj_2",
-	grid: "_grid_dgwqj_9",
-	swatch: "_swatch_dgwqj_17",
-	swatchActive: "_swatchActive_dgwqj_36"
+	root: "_root_1bvfi_2",
+	grid: "_grid_1bvfi_9",
+	swatch: "_swatch_1bvfi_17",
+	swatchActive: "_swatchActive_1bvfi_38"
 }, c = [
 	"hatch",
 	"crosshatch",
@@ -110,14 +110,14 @@ function _(n) {
 					}, e);
 				})
 			}),
-			/* @__PURE__ */ i(t, {
+			/* @__PURE__ */ i(e, {
 				items: l,
 				value: S,
 				size: "sm",
 				ariaLabel: "Tile size",
 				onChange: (e) => e != null && w(e)
 			}),
-			/* @__PURE__ */ i(e, {
+			/* @__PURE__ */ i(t, {
 				label: "Rotation",
 				orientation: "row",
 				width: "fit",
@@ -132,4 +132,4 @@ function _(n) {
 //#endregion
 export { g as n, _ as t };
 
-//# sourceMappingURL=PatternPicker-B3HcMZWg.js.map
+//# sourceMappingURL=PatternPicker-0j51aDJ3.js.map

package/dist/chunks/PatternPicker-0j51aDJ3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternPicker-0j51aDJ3.js","names":["s","ToggleBar","NumberField","PatternPicker_module_default","TILES","TILE_SIZES","DEFAULT_TILE_SIZE","PREVIEW_SIZE","DEGREES","toDegrees","folded","rad","withRotation","parts","decomposePatternTransform","value","b","c","d","composePatternTransform","degrees","_drop","rest","specOf","fill","seedPattern","spec","from","tile","PatternPicker","props","size","pick","seeded","color","resize","onChange","nextSize","className","preview","selected","tilePreviewCssUrl","v","deg"],"sources":["../../src/components/PatternPicker/PatternPicker.module.css","../../src/components/PatternPicker/PatternPicker.tsx"],"sourcesContent":["/* Tile grid over the size switch. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--wzl-swatch-size, 28px), 1fr));\n  gap: 0;\n}\n\n/* The swatch's whole face is its own tile, so it must not carry a flat\n   background — and the tile repeats at its own scale, not the swatch's. */\n.swatch {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  min-width: 0;\n  padding: 0;\n  border: 0.5px solid var(--wzl-border);\n  border-radius: 0;\n  /* Not the UA's buttontext: the hover edge is --wzl-fg-muted, a step down from the text beside it. */\n  color: inherit;\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 {\n  composePatternTransform,\n  decomposePatternTransform,\n  type FillStyle,\n  type TilePatternSpec,\n} from '@weasel-js/core';\nimport { tilePreviewCssUrl } from '@weasel-js/svg';\nimport { NumberField } from '../NumberField';\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\nconst DEGREES: Intl.NumberFormatOptions = { style: 'unit', unit: 'degree', unitDisplay: 'narrow', maximumFractionDigits: 1 };\n\n/** Rotation in degrees, folded into (-180, 180]. */\nfunction toDegrees(rad: number): number {\n  const deg = (rad * 180) / Math.PI;\n  const folded = ((((deg + 180) % 360) + 360) % 360) - 180;\n  return folded === -180 ? 180 : folded;\n}\n\n/** `value` with its transform's rotation replaced, the transform dropped when\n *  nothing is left of it. */\nfunction withRotation(value: PatternFill, degrees: number): PatternFill {\n  const parts = decomposePatternTransform(value.transform);\n  const [a, b, c, d] = composePatternTransform({ ...parts, rotation: (degrees * Math.PI) / 180 });\n  const { transform: _drop, ...rest } = value;\n  const identity = Math.abs(a - 1) < 1e-9 && Math.abs(b) < 1e-9 && Math.abs(c) < 1e-9 && Math.abs(d - 1) < 1e-9;\n  return identity ? rest : { ...rest, transform: [a, b, c, d] };\n}\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, a size change and a\n   *  committed rotation are 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 and a rotation field, each swatch\n * previewing the real tile at the current color. Rotation edits only the\n * rotation part of the paint's `transform`; scale and skew survive it.\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    const seeded = seedPattern(tile, color, size);\n    onChange(value.transform ? { ...seeded, transform: value.transform } : seeded);\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      <NumberField\n        label=\"Rotation\"\n        orientation=\"row\"\n        width=\"fit\"\n        value={toDegrees(decomposePatternTransform(value.transform).rotation)}\n        step={15}\n        formatOptions={DEGREES}\n        onChange={(deg) => Number.isFinite(deg) && onChange(withRotation(value, deg))}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{Prefs-BnVEyfWO.js → Prefs-gbjYqvSD.js}

@@ -1,8 +1,8 @@
-import { t as e } from "./Dialog-DKfsk5VN.js";
-import { c as t, t as n } from "./PropertyField-PMrqBA0n.js";
+import { t as e } from "./Dialog-h-5MeYpu.js";
+import { c as t, t as n } from "./PropertyField-CWUtNK1w.js";
 import { t as r } from "./Input-D7SDKbST.js";
 import { t as i } from "./useRovingTabIndex-D7u22Ia_.js";
-import { a, n as o, o as s, r as c, s as l, t as u } from "./prefField-BE_Ytr2H.js";
+import { a, n as o, o as s, r as c, s as l, t as u } from "./prefField-CCm_nzlM.js";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 import { useCallback as m, useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
 //#region src/useScrollSpy.ts
@@ -67,43 +67,43 @@ function S() {
 	return typeof matchMedia == "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 var C = {
-	columns: "_columns_1u8b6_5",
-	column: "_column_1u8b6_5",
-	panel: "_panel_1u8b6_23",
-	subpanel: "_subpanel_1u8b6_34",
-	groupHeader: "_groupHeader_1u8b6_46",
-	groupTitle: "_groupTitle_1u8b6_59",
-	groupDesc: "_groupDesc_1u8b6_68",
-	rows: "_rows_1u8b6_75",
-	row: "_row_1u8b6_75",
-	rowControl: "_rowControl_1u8b6_90",
-	unrenderable: "_unrenderable_1u8b6_97",
-	titleRow: "_titleRow_1u8b6_104",
-	objectLeaf: "_objectLeaf_1u8b6_118",
-	objectRow: "_objectRow_1u8b6_126",
-	objectGroup: "_objectGroup_1u8b6_133",
-	columnsLayout: "_columnsLayout_1u8b6_148",
-	railLayout: "_railLayout_1u8b6_155",
-	railBody: "_railBody_1u8b6_168",
-	rail: "_rail_1u8b6_155",
-	railList: "_railList_1u8b6_208",
-	railItem: "_railItem_1u8b6_214",
-	railSub: "_railSub_1u8b6_238",
-	railOpen: "_railOpen_1u8b6_242",
-	railInView: "_railInView_1u8b6_248",
-	railName: "_railName_1u8b6_252",
-	railCount: "_railCount_1u8b6_261 _numeric_zns9n_4",
-	pane: "_pane_1u8b6_23",
-	paneHead: "_paneHead_1u8b6_275",
-	paneTitle: "_paneTitle_1u8b6_282",
-	paneDesc: "_paneDesc_1u8b6_289",
-	paneSection: "_paneSection_1u8b6_296",
-	paneSubsection: "_paneSubsection_1u8b6_303",
-	sectionTitle: "_sectionTitle_1u8b6_312",
-	subsectionTitle: "_subsectionTitle_1u8b6_330",
-	filter: "_filter_1u8b6_356",
-	noMatches: "_noMatches_1u8b6_360",
-	clearFilter: "_clearFilter_1u8b6_374"
+	columns: "_columns_1o985_5",
+	column: "_column_1o985_5",
+	panel: "_panel_1o985_23",
+	subpanel: "_subpanel_1o985_34",
+	groupHeader: "_groupHeader_1o985_46",
+	groupTitle: "_groupTitle_1o985_59",
+	groupDesc: "_groupDesc_1o985_68",
+	rows: "_rows_1o985_75",
+	row: "_row_1o985_75",
+	rowControl: "_rowControl_1o985_90",
+	unrenderable: "_unrenderable_1o985_97",
+	titleRow: "_titleRow_1o985_104",
+	objectLeaf: "_objectLeaf_1o985_118",
+	objectRow: "_objectRow_1o985_126",
+	objectGroup: "_objectGroup_1o985_133",
+	columnsLayout: "_columnsLayout_1o985_148",
+	railLayout: "_railLayout_1o985_155",
+	railBody: "_railBody_1o985_168",
+	rail: "_rail_1o985_155",
+	railList: "_railList_1o985_208",
+	railItem: "_railItem_1o985_214",
+	railSub: "_railSub_1o985_238",
+	railOpen: "_railOpen_1o985_242",
+	railInView: "_railInView_1o985_242",
+	railName: "_railName_1o985_242",
+	railCount: "_railCount_1o985_265 _numeric_zns9n_4",
+	pane: "_pane_1o985_23",
+	paneHead: "_paneHead_1o985_279",
+	paneTitle: "_paneTitle_1o985_286",
+	paneDesc: "_paneDesc_1o985_293",
+	paneSection: "_paneSection_1o985_300",
+	paneSubsection: "_paneSubsection_1o985_307",
+	sectionTitle: "_sectionTitle_1o985_316",
+	subsectionTitle: "_subsectionTitle_1o985_334",
+	filter: "_filter_1o985_360",
+	noMatches: "_noMatches_1o985_364",
+	clearFilter: "_clearFilter_1o985_378"
 };
 //#endregion
 //#region src/components/Prefs/PrefsRow.tsx
@@ -508,4 +508,4 @@ function R(t) {
 //#endregion
 export { y as a, O as i, j as n, x as o, A as r, R as t };
 
-//# sourceMappingURL=Prefs-BnVEyfWO.js.map
+//# sourceMappingURL=Prefs-gbjYqvSD.js.map

package/dist/chunks/Prefs-gbjYqvSD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prefs-gbjYqvSD.js","names":["_Fragment","s","s","s","s","s","Dialog","PropertyRow","PropertyControl","Input","useRovingTabIndex","filterPrefSubtree","prefValueAtPath","isPrefLeaf","visiblePrefSubtree","prefFieldProps","pickActiveSection","active","offsets","top","slack","id","SETTLE_MS","useScrollSpy","options","setActive","useState","heldRef","useRef","timerRef","releaseRef","key","ids","measure","useCallback","root","rootRef","rootTop","el","scrollTo","release","prefersReducedMotion","useEffect","Prefs_module_default","PrefRow","stored","ctx","path","inherited","toggles","onAutoChange","setAuto","next","renderCtx","pref","v","custom","control","renderBuiltin","Fragment","ObjectLeaf","field","settledOnly","held","value","objectRows","out","child","children","inner","base","PrefsPane","props","leaves","group","entry","groups","childPath","className","scrollRef","leaf","PaneSection","Heading","depth","p","PrefsRail","activate","item","items","index","onOpen","onScrollTo","roving","i","section","ariaLabel","header","open","inView","current","showCounts","PrefsForm","query","setQuery","useMemo","visible","schema","showHidden","filterable","layout","RailLayout","NoMatches","GroupBody","prefRailItems","uncontrolled","setUncontrolled","subPages","requested","hasLeaves","paneGroup","spy","setOpen","whole","opensTop","leavesOf","filterField","onClearFilter","rootName","node","cursor","seg","onClear","PrefsDialog","form","rail","title","dialogClassName","headerExtra"],"sources":["../../src/useScrollSpy.ts","../../src/components/Prefs/Prefs.module.css","../../src/components/Prefs/PrefsRow.tsx","../../src/components/Prefs/PrefsPane.tsx","../../src/components/Prefs/PrefsRail.tsx","../../src/components/Prefs/PrefsForm.tsx","../../src/components/Prefs/PrefsDialog.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';\n\n/** One observed section: its id and its top edge, in the container's\n *  coordinates (its `getBoundingClientRect().top` less the container's). */\nexport interface SectionOffset {\n  id: string;\n  top: number;\n}\n\n/**\n * The section a reader is looking at: the last one whose top edge has passed\n * the container's, within `slack` of it so a heading flush with the top counts\n * as arrived. Null until one has — the settings above the first section belong\n * to the group itself, and marking a section the reader has not reached yet\n * points them at the wrong place.\n *\n * Offsets arrive in document order and are not re-sorted — a caller reading\n * them off the DOM already has them that way, and sorting would hide a\n * measurement that came back wrong.\n */\nexport function pickActiveSection(\n  offsets: readonly SectionOffset[],\n  slack = 8,\n): string | null {\n  let active: string | null = null;\n  for (const { id, top } of offsets) {\n    if (top - slack > 0) break;\n    active = id;\n  }\n  return active;\n}\n\n/** Options for {@link useScrollSpy}. */\nexport interface UseScrollSpyOptions {\n  /** The scrolling element holding the sections. */\n  rootRef: RefObject<HTMLElement | null>;\n  /** Section element ids, in document order. */\n  ids: readonly string[];\n  /** Pixels of tolerance at the container's top edge. */\n  slack?: number;\n}\n\n/** What {@link useScrollSpy} returns. */\nexport interface ScrollSpy {\n  /** Id of the section in view, or null before anything is measured. */\n  active: string | null;\n  /**\n   * Scroll `id` to the container's top and hold that answer until the scroll\n   * settles. Without the hold, the scroll the click causes is observed on its\n   * way past every intervening section and the rail flickers through them.\n   */\n  scrollTo: (id: string) => void;\n}\n\n/** How long to keep a programmatic scroll's answer when `scrollend` never\n *  arrives — Safari and Firefox have not shipped it. Comfortably longer than a\n *  smooth scroll, short enough that a reader who then scrolls by hand is not\n *  left looking at a stale highlight. */\nconst SETTLE_MS = 700;\n\n/**\n * Which of a scrolling container's sections is in view, for a navigation rail\n * that follows the reader. Positions are read on the container's own `scroll`\n * event — already throttled to the frame by the browser — rather than through\n * `IntersectionObserver`, so the decision stays a pure function of measured\n * offsets ({@link pickActiveSection}) and is testable apart from the DOM.\n */\nexport function useScrollSpy(options: UseScrollSpyOptions): ScrollSpy {\n  const { rootRef, ids, slack } = options;\n  const [active, setActive] = useState<string | null>(null);\n  // Set while a programmatic scroll runs: what to report, instead of what the\n  // moving container would say.\n  const heldRef = useRef<string | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const releaseRef = useRef<(() => void) | null>(null);\n  const key = ids.join('\\u0000');\n\n  const measure = useCallback((): void => {\n    const root = rootRef.current;\n    if (!root) return;\n    if (heldRef.current !== null) {\n      setActive(heldRef.current);\n      return;\n    }\n    const rootTop = root.getBoundingClientRect().top;\n    const offsets: SectionOffset[] = [];\n    for (const id of ids) {\n      const el = root.querySelector<HTMLElement>(`[data-spy-section=\"${CSS.escape(id)}\"]`);\n      if (el) offsets.push({ id, top: el.getBoundingClientRect().top - rootTop });\n    }\n    setActive(pickActiveSection(offsets, slack));\n    // `ids` is compared by content through `key`: a caller deriving the array\n    // each render would otherwise resubscribe on every one.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [rootRef, key, slack]);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    measure();\n    root.addEventListener('scroll', measure, { passive: true });\n    return () => root.removeEventListener('scroll', measure);\n  }, [rootRef, measure]);\n\n  const scrollTo = useCallback((id: string): void => {\n    const root = rootRef.current;\n    if (!root) return;\n    const el = root.querySelector<HTMLElement>(`[data-spy-section=\"${CSS.escape(id)}\"]`);\n    heldRef.current = id;\n    setActive(id);\n    const release = (): void => {\n      heldRef.current = null;\n      root.removeEventListener('scrollend', release);\n      measure();\n    };\n    // A scroll interrupted by the next one would otherwise leave its\n    // `scrollend` listener behind to fire against a later scroll.\n    releaseRef.current?.();\n    if (timerRef.current !== null) clearTimeout(timerRef.current);\n    releaseRef.current = release;\n    timerRef.current = setTimeout(release, SETTLE_MS);\n    root.addEventListener('scrollend', release);\n    if (!el) return;\n    const top = el.getBoundingClientRect().top - root.getBoundingClientRect().top + root.scrollTop;\n    root.scrollTo?.({ top, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n  }, [rootRef, measure]);\n\n  useEffect(() => () => {\n    if (timerRef.current !== null) clearTimeout(timerRef.current);\n    releaseRef.current?.();\n  }, []);\n\n  return { active, scrollTo };\n}\n\nfunction prefersReducedMotion(): boolean {\n  return typeof matchMedia === 'function'\n    && matchMedia('(prefers-reduced-motion: reduce)').matches;\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: var(--wzl-space-6);\n  overflow-y: auto;\n  padding-right: var(--wzl-space-2);\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: var(--wzl-space-4);\n}\n\n.panel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  padding: var(--wzl-space-5);\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  --wzl-input-surface: var(--wzl-surface);\n}\n\n.subpanel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  margin-top: var(--wzl-space-3);\n  padding: var(--wzl-space-4) var(--wzl-space-4) var(--wzl-space-4) var(--wzl-space-5);\n  background: var(--wzl-surface-sunken);\n  border-left: 2px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  --wzl-input-surface: var(--wzl-surface);\n}\n\n.groupHeader {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n  padding-bottom: var(--wzl-space-2);\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.subpanel .groupHeader {\n  border-bottom: none;\n  padding-bottom: var(--wzl-space-1);\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: var(--wzl-params-label-tracking, var(--wzl-tracking-wider));\n  text-transform: var(--wzl-params-label-case, uppercase);\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: var(--wzl-space-3);\n}\n\n/* A leaf's row is a PropertyRow, inline; this only sets the form's type. */\n.row {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg);\n  cursor: default;\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.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: var(--wzl-space-6);\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: var(--wzl-space-3);\n  inline-size: 100%;\n}\n\n/* Outranks the PropertyRow it styles, which is a flex row. */\n.objectLeaf .objectRow {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  gap: var(--wzl-space-4);\n  align-items: center;\n}\n\n.objectGroup {\n  margin: var(--wzl-space-2) 0 0;\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: var(--wzl-params-label-case, uppercase);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));\n  opacity: 0.55;\n}\n\n/* ---------------------------------------------------------------------------\n * Rail layout. The rail is the only chrome: no panels, because the surface\n * the form sits on already has a border and a card inside it restates one.\n * Width is overridable via --wzl-prefs-rail-width at any ancestor scope.\n * ------------------------------------------------------------------------ */\n\n.columnsLayout {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  min-height: 0;\n}\n\n.railLayout {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  min-height: 0;\n  block-size: 100%;\n  /* The pane scrolls, not the layout: a rail that scrolled away with the\n     settings would be useless exactly when it is needed. */\n  overflow: hidden;\n}\n\n/* What `PrefsDialog` hands `Dialog` for its body in rail layout: the pane\n   inside does the scrolling and the rail meets the dialog's own edges. */\n.railBody {\n  padding: 0;\n  overflow: hidden;\n  /* The modal sets only `max-height`, so the layout's `block-size: 100%`\n     resolves against nothing and the pane grows to fit every row. As a flex\n     item the layout takes the body's flexed height, which the cap does bound. */\n  display: flex;\n  flex-direction: column;\n  /* A settled height: without one the dialog grows and shrinks as the reader\n     moves between a two-row group and a twenty-row one, and the rail entry\n     they are aiming at moves while they aim at it. */\n  min-block-size: min(60vh, 420px);\n  /* Same reason across: a filter that narrows the schema to two rows should\n     not pull the dialog's edges in around them. */\n  min-inline-size: min(760px, 90vw);\n}\n\n.railBody > .railLayout {\n  flex: 1 1 auto;\n}\n\n.rail {\n  /* Never more than two fifths of the box: at its full width in a narrow\n     container the rail takes the space the settings need and leaves a pane\n     too thin to hold a row. The clamp belongs on the flex basis — an\n     `inline-size` here is simply ignored, which is what made a first attempt\n     at this look right and do nothing. */\n  flex: 0 1 min(var(--wzl-prefs-rail-width, 216px), 40%);\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  padding: var(--wzl-space-3) var(--wzl-space-2);\n  background: var(--wzl-surface-sunken);\n  border-right: 1px solid var(--wzl-border);\n  overflow-y: auto;\n  /* The rail is itself sunken, so a field taking the default surface would be\n     the same color as the rail behind it. */\n  --wzl-input-surface: var(--wzl-surface);\n}\n\n.railList {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.railItem {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  padding: var(--wzl-space-2) var(--wzl-space-3);\n  border: none;\n  border-radius: var(--wzl-radius-sm);\n  background: none;\n  color: var(--wzl-fg);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n  text-align: start;\n  cursor: default;\n}\n\n.railItem:hover {\n  background: var(--wzl-surface-raised);\n}\n\n.railItem:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n.railSub {\n  padding-left: var(--wzl-space-7);\n}\n\n.railSub:not(.railOpen, .railInView) .railName {\n  color: var(--wzl-fg-muted);\n}\n\n.railOpen,\n.railOpen:hover {\n  background: var(--wzl-accent);\n  color: var(--wzl-fg-on-accent);\n}\n\n.railInView {\n  box-shadow: inset 2px 0 0 var(--wzl-accent);\n}\n\n.railName {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Last in the row: a count that changes as the reader types would otherwise\n   shove the name on every keystroke. */\n.railCount {\n  composes: numeric from '@weasel-js/theme/numeric.module.css';\n  margin-left: auto;\n  font-size: var(--wzl-font-size-xs);\n  opacity: 0.6;\n}\n\n.pane {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n  padding: var(--wzl-space-5) var(--wzl-space-6);\n}\n\n.paneHead {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n  margin-bottom: var(--wzl-space-5);\n}\n\n.paneTitle {\n  margin: 0;\n  font-size: var(--wzl-font-size-lg);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n}\n\n.paneDesc {\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.paneSection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  margin-top: var(--wzl-space-6);\n}\n\n.paneSubsection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  margin-top: var(--wzl-space-4);\n  padding-left: var(--wzl-space-4);\n  border-left: 2px solid var(--wzl-border);\n}\n\n.sectionTitle {\n  position: sticky;\n  /* Sticky offsets are measured from the scrollport's edge, not from inside\n     the pane's padding, so this is 0 and the heading's own padding is what\n     keeps the text off the edge. */\n  top: 0;\n  z-index: 1;\n  margin: 0;\n  padding: var(--wzl-space-3) 0 var(--wzl-space-2);\n  background: var(--wzl-surface);\n  border-bottom: 1px solid var(--wzl-border);\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg-subtle);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wider));\n  text-transform: var(--wzl-params-label-case, uppercase);\n}\n\n.subsectionTitle {\n  margin: 0;\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg-subtle);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));\n  text-transform: var(--wzl-params-label-case, uppercase);\n}\n\n/* In the rail layout a row is a grid, so the control track grows with the\n   pane instead of holding at the columns layout's fixed slot. */\n.railLayout .row {\n  display: grid;\n  /* The control track is capped rather than taking the rest: a number field\n     as wide as the pane reads as a text area, and every row's control starts\n     at the same x either way. */\n  grid-template-columns:\n    minmax(140px, var(--wzl-params-label-width, 240px))\n    minmax(180px, 260px);\n  align-items: center;\n}\n\n.railLayout .rowControl {\n  flex: 1 1 auto;\n}\n\n.filter {\n  padding: 0 var(--wzl-space-1) var(--wzl-space-2);\n}\n\n.noMatches {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--wzl-space-3);\n  padding: var(--wzl-space-6) 0;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n}\n\n.noMatches p {\n  margin: 0;\n}\n\n.clearFilter {\n  padding: var(--wzl-space-1) var(--wzl-space-3);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  background: var(--wzl-surface-raised);\n  color: var(--wzl-fg);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n}\n","import { type ReactNode } from 'react';\nimport { PropertyControl } from '../Properties/PropertyField';\nimport { PropertyRow } from '../Properties/PropertyPanel';\nimport { prefFieldProps } from './prefField';\nimport {\n  isPrefLeaf,\n  prefValueAtPath,\n  type PrefGroup,\n  type PrefLeaf,\n  type PrefObject,\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  /** Whether this leaf is currently auto — not pinned, computed by the owner. */\n  auto: boolean;\n  /** Toggle this leaf's auto state. */\n  setAuto: (next: boolean) => 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\nexport interface WalkCtx {\n  values: unknown;\n  onChange: (path: string, value: unknown) => void;\n  renderers?: Record<string, PrefRenderer>;\n  auto?: ReadonlySet<string>;\n  onAutoChange?: (path: string, next: boolean) => void;\n  inheritHint?: (path: string) => string | undefined;\n  canInherit?: (path: string) => boolean;\n}\n\nexport function PrefRow({ ctx, path, pref }: { ctx: WalkCtx; path: string; pref: PrefLeaf }) {\n  const stored = prefValueAtPath(ctx.values, path);\n  const inherited = ctx.auto?.has(path) ?? false;\n  const { onAutoChange } = ctx;\n  const toggles = onAutoChange !== undefined && (ctx.canInherit?.(path) ?? true);\n  const setAuto = (next: boolean): void => {\n    if (toggles) onAutoChange(path, next);\n  };\n  const renderCtx: PrefRenderContext = {\n    path,\n    pref,\n    value: stored !== undefined ? stored : pref.default,\n    setValue: (v) => ctx.onChange(path, v),\n    auto: inherited,\n    setAuto,\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    <PropertyRow\n      label={pref.name}\n      description={pref.description}\n      layout=\"inline\"\n      className={s.row}\n      // The owner passes an inherited leaf's value already resolved, so the\n      // control keeps drawing it; editing it pins, through `onChange`.\n      auto={inherited}\n      autoControl=\"dimmed\"\n      onAutoChange={toggles ? setAuto : undefined}\n      hint={inherited ? ctx.inheritHint?.(path) : undefined}\n    >\n      <span className={s.rowControl}>{control}</span>\n    </PropertyRow>\n  );\n}\n\nfunction renderBuiltin(\n  ctx: PrefRenderContext,\n  // The object a nested leaf is a field of — what an enum `encoding` and a\n  // font's weight and slant read against. Undefined for a top-level leaf.\n  siblings?: Record<string, unknown>,\n): ReactNode {\n  const { pref, value, setValue } = ctx;\n  if (pref.kind === 'object') return <ObjectLeaf ctx={ctx} />;\n  const field = prefFieldProps(pref, { value, siblings, setValue });\n  if (field === null) {\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 (field.kind) {\n    // A form stores what was settled on: a number once it is entered, a color\n    // once its gesture ends.\n    case 'number':\n      return (\n        <PropertyControl\n          {...field}\n          name={pref.name}\n          onInput={settledOnly}\n          steppers={field.accepts === undefined}\n        />\n      );\n    case 'color':\n      return <PropertyControl {...field} name={pref.name} onInput={settledOnly} />;\n    default:\n      return <PropertyControl {...field} name={pref.name} />;\n  }\n}\n\nconst settledOnly = (): void => {};\n\n/** One value with its fields hanging off it: each field renders its own\n *  control and commits the parent object whole. */\nfunction ObjectLeaf({ ctx }: { ctx: PrefRenderContext }) {\n  const pref = ctx.pref as PrefObject;\n  const { value, setValue } = ctx;\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        <PropertyRow\n          key={key}\n          label={child.name}\n          layout=\"inline\"\n              className={s.objectRow}\n        >\n          <span className={s.rowControl}>\n            {renderBuiltin({\n              path: `${ctx.path}.${key}`,\n              pref: child,\n              value: held?.[key],\n              setValue: (v) => {\n                const base = held ?? pref.fromScalar?.(value) ?? {};\n                setValue({ ...base, [key]: v });\n              },\n              // A field is not pinned on its own — it shares the state of\n              // the object leaf it hangs off.\n              auto: ctx.auto,\n              setAuto: ctx.setAuto,\n            }, held)}\n          </span>\n        </PropertyRow>,\n      );\n    }\n    return out;\n  };\n  return <div className={s.objectLeaf}>{objectRows(pref.children)}</div>;\n}\n","import { type RefObject } from 'react';\nimport { isPrefLeaf, type PrefGroup, type PrefLeaf } from './schema';\nimport { PrefRow, type WalkCtx } from './PrefsRow';\nimport s from './Prefs.module.css';\n\n/** Props for {@link PrefsPane}. */\nexport interface PrefsPaneProps {\n  ctx: WalkCtx;\n  /** The open group, or a synthetic one holding the root's loose leaves. */\n  group: PrefGroup;\n  /** Dotted path of `group`. Empty for the loose-leaf pane. */\n  path: string;\n  /** The pane's scroll container, for the rail's scroll spy. */\n  scrollRef: RefObject<HTMLDivElement | null>;\n  className?: string;\n}\n\n/**\n * One rail section's settings: the group's own leaves, then one headed\n * section per nested group.\n *\n * Nothing here draws a panel. The rail is the layout's structure, and a card\n * inside a dialog that already has a border only restates it — the columns\n * layout's sunken panels are what this is the alternative to.\n */\nexport function PrefsPane(props: PrefsPaneProps) {\n  const { ctx, group, path, scrollRef, className } = props;\n  const leaves = Object.entries(group.children).filter(\n    (entry): entry is [string, PrefLeaf] => isPrefLeaf(entry[1]),\n  );\n  const groups = Object.entries(group.children).filter(\n    (entry): entry is [string, PrefGroup] => !isPrefLeaf(entry[1]),\n  );\n  const childPath = (key: string): string => (path === '' ? key : `${path}.${key}`);\n\n  return (\n    <div className={[s.pane, className].filter(Boolean).join(' ')} ref={scrollRef}>\n      <div className={s.paneHead}>\n        <h3 className={s.paneTitle}>{group.name}</h3>\n        {group.description !== undefined && (\n          <p className={s.paneDesc}>{group.description}</p>\n        )}\n      </div>\n      {leaves.length > 0 && (\n        <div className={s.rows}>\n          {leaves.map(([key, leaf]) => (\n            <PrefRow key={key} ctx={ctx} path={childPath(key)} pref={leaf} />\n          ))}\n        </div>\n      )}\n      {groups.map(([key, child]) => (\n        <PaneSection\n          key={key}\n          ctx={ctx}\n          group={child}\n          path={childPath(key)}\n          depth={0}\n        />\n      ))}\n    </div>\n  );\n}\n\n/**\n * A nested group inside a pane. Depth 0 sections are the ones the rail links\n * to and carry `data-spy-section`; deeper ones indent and are reached only by\n * scrolling, which is what keeps the rail two levels deep whatever the schema\n * does.\n */\nfunction PaneSection({ ctx, group, path, depth }: {\n  ctx: WalkCtx;\n  group: PrefGroup;\n  path: string;\n  depth: number;\n}) {\n  const Heading = depth === 0 ? 'h4' : 'h5';\n  return (\n    <section\n      className={depth === 0 ? s.paneSection : s.paneSubsection}\n      data-spy-section={depth === 0 ? path : undefined}\n      aria-label={group.name}\n    >\n      <Heading className={depth === 0 ? s.sectionTitle : s.subsectionTitle}>\n        {group.name}\n      </Heading>\n      {group.description !== undefined && (\n        <p className={s.paneDesc}>{group.description}</p>\n      )}\n      <div className={s.rows}>\n        {Object.entries(group.children).map(([key, child]) => {\n          const p = `${path}.${key}`;\n          return isPrefLeaf(child) ? (\n            <PrefRow key={key} ctx={ctx} path={p} pref={child} />\n          ) : (\n            <PaneSection key={key} ctx={ctx} group={child} path={p} depth={depth + 1} />\n          );\n        })}\n      </div>\n    </section>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\nimport type { PrefRailItem } from './schema';\nimport s from './Prefs.module.css';\n\n/** Props for {@link PrefsRail}. */\nexport interface PrefsRailProps {\n  items: readonly PrefRailItem[];\n  /** Path of the open group: depth 0, or depth 1 under `subPages`. */\n  section: string;\n  /** Path of the depth-1 group in view, from the pane's scroll spy. */\n  current: string | null;\n  /** A depth-0 entry was chosen: open its pane. */\n  onOpen: (path: string) => void;\n  /** A depth-1 entry was chosen: scroll the open pane to it, or, under\n   *  `subPages`, open it. */\n  onScrollTo: (path: string) => void;\n  /** Accessible name for the rail's landmark. */\n  ariaLabel: string;\n  /** Rendered above the list — the filter field, when there is one. */\n  header?: ReactNode;\n  /** Show each entry's match count. Only meaningful while filtering. */\n  showCounts?: boolean;\n}\n\n/**\n * The rail beside a `PrefsForm` pane: depth-0 groups, each followed by the\n * depth-1 groups that scroll within it.\n *\n * A list of buttons rather than a tablist, because only half of these entries\n * switch anything — the nested ones scroll the pane the selected entry already\n * opened, and a tab that does not own a panel has no honest role. The open\n * group is `aria-current=\"page\"`; the nested group in view is\n * `aria-current=\"location\"`.\n */\nexport function PrefsRail(props: PrefsRailProps) {\n  const { items, section, current, onOpen, onScrollTo, ariaLabel, header, showCounts } = props;\n  const activate = (index: number): void => {\n    const item = items[index];\n    if (!item) return;\n    if (item.depth === 0) onOpen(item.path);\n    else onScrollTo(item.path);\n  };\n  const roving = useRovingTabIndex<HTMLDivElement>({\n    itemSelector: `.${s.railItem}`,\n    tabStopIndex: Math.max(0, items.findIndex((i) => i.path === section)),\n  });\n\n  return (\n    <nav className={s.rail} aria-label={ariaLabel}>\n      {header}\n      <div className={s.railList} ref={roving.rootRef} onKeyDown={roving.onKeyDown}>\n        {items.map((item, index) => {\n          const open = item.path === section;\n          const inView = item.depth === 1 && item.path === current;\n          return (\n            <button\n              key={item.path === '' ? '\\u0000root' : item.path}\n              type=\"button\"\n              className={[s.railItem, item.depth === 1 && s.railSub, open && s.railOpen, inView && s.railInView]\n                .filter(Boolean)\n                .join(' ')}\n              aria-current={open ? 'page' : inView ? 'location' : undefined}\n              onClick={() => activate(index)}\n            >\n              <span className={s.railName}>{item.name}</span>\n              {showCounts ? <span className={s.railCount}>{item.matches}</span> : null}\n            </button>\n          );\n        })}\n      </div>\n    </nav>\n  );\n}\n","import { useMemo, useRef, useState, type ReactNode } from 'react';\nimport { Input } from '../Input';\nimport { useScrollSpy } from '../../useScrollSpy';\nimport {\n  filterPrefSubtree,\n  isPrefLeaf,\n  prefRailItems,\n  visiblePrefSubtree,\n  type PrefGroup,\n} from './schema';\nimport { PrefRow, type PrefRenderer, type WalkCtx } from './PrefsRow';\nimport { PrefsPane } from './PrefsPane';\nimport { PrefsRail } from './PrefsRail';\nimport s from './Prefs.module.css';\n\nexport type { PrefRenderer, PrefRenderContext } from './PrefsRow';\n\n/** How a {@link PrefsForm} lays its groups out. */\nexport type PrefsLayout = 'columns' | 'rail';\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  /**\n   * `'columns'` (the default) wraps each top-level group into its own panel\n   * column. `'rail'` puts a two-level navigation rail beside one group's\n   * settings at a time — what a dialog-sized surface wants, since columns\n   * overflow sideways once there are more than two.\n   */\n  layout?: PrefsLayout;\n  /** Show a filter field that narrows the form to matching leaves. */\n  filterable?: boolean;\n  /** Rail layout: path of the open top-level group. Controlled. */\n  section?: string;\n  /** Rail layout: path of the group open before the reader picks one.\n   *  Defaults to the first in the schema. */\n  defaultSection?: string;\n  onSectionChange?: (path: string) => void;\n  /**\n   * Rail layout: a nested entry opens a page of its own group instead of\n   * scrolling the open one to it, and a top-level entry's page holds only its\n   * own leaves (or opens its first nested entry when it has none). For a\n   * top-level group whose subgroups are long enough that one page of all of\n   * them reads as a wall. Default false.\n   */\n  subPages?: boolean;\n  /** Dotted paths whose leaves currently inherit: each still draws its control,\n   *  dimmed, showing the value in `values` — pass it already resolved. Editing\n   *  it calls `onChange` as usual, which is the owner's cue to pin it. */\n  auto?: ReadonlySet<string>;\n  /** Given, a leaf's label toggles whether it inherits: `next` true unpins it,\n   *  false pins it at the value it shows. Leaves `canInherit` refuses keep a\n   *  plain label. */\n  onAutoChange?: (path: string, next: boolean) => void;\n  /** Which leaves can inherit, and so get a label toggle. Default: every leaf,\n   *  once `onAutoChange` is given. */\n  canInherit?: (path: string) => boolean;\n  /** Small text after an inherited leaf's label, e.g. `() => 'from Defaults'`.\n   *  Default: none. */\n  inheritHint?: (path: string) => string | undefined;\n  className?: string;\n}\n\n/**\n * Schema-driven preferences form. Leaves render as label + control rows;\n * how the groups around them are arranged is `layout`'s to say — columns of\n * panels, or a navigation rail beside one group at a time.\n *\n * Storage-agnostic: pair with `PrefsDialog` for the modal composition, and\n * persist however the app likes via `onChange`.\n */\nexport function PrefsForm(props: PrefsFormProps) {\n  const {\n    schema,\n    values,\n    onChange,\n    renderers,\n    showHidden = false,\n    layout = 'columns',\n    filterable = false,\n    auto,\n    onAutoChange,\n    canInherit,\n    inheritHint,\n    className,\n  } = props;\n  const [query, setQuery] = useState('');\n  const root = useMemo(() => {\n    const visible = visiblePrefSubtree(schema, showHidden);\n    return visible === null ? null : filterPrefSubtree(visible, query);\n  }, [schema, showHidden, query]);\n\n  const ctx: WalkCtx = { values, onChange, renderers, auto, onAutoChange, canInherit, inheritHint };\n  const field = filterable ? (\n    <div className={s.filter}>\n      <Input\n        value={query}\n        onChange={setQuery}\n        aria-label={`Filter ${schema.name}`}\n        placeholder=\"Filter settings\"\n      />\n    </div>\n  ) : null;\n\n  if (layout === 'rail') {\n    return (\n      <RailLayout\n        {...props}\n        root={root}\n        ctx={ctx}\n        query={query}\n        filterField={field}\n        onClearFilter={() => setQuery('')}\n      />\n    );\n  }\n\n  return (\n    <div className={[s.columnsLayout, className].filter(Boolean).join(' ')}>\n      {field}\n      {root === null ? (\n        <NoMatches query={query} onClear={() => setQuery('')} />\n      ) : (\n        <div className={s.columns}>\n          {Object.entries(root.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    </div>\n  );\n}\n\n/** The rail layout's own state: which group is open, and where the pane is\n *  scrolled to within it. Split out so the columns layout runs none of it. */\nfunction RailLayout(props: PrefsFormProps & {\n  root: PrefGroup | null;\n  ctx: WalkCtx;\n  query: string;\n  filterField: ReactNode;\n  onClearFilter: () => void;\n}) {\n  const { schema, root, ctx, query, filterField, onClearFilter, className } = props;\n  const items = useMemo(() => (root === null ? [] : prefRailItems(root)), [root]);\n  const [uncontrolled, setUncontrolled] = useState(\n    () => props.defaultSection ?? '',\n  );\n  const subPages = props.subPages === true;\n  const requested = props.section ?? uncontrolled;\n  // A filter can take the open group out of the rail entirely, and a section\n  // the schema never had can arrive from a consumer's stale state. Either way\n  // the first surviving entry is what the reader should be looking at.\n  let open = items.some((i) => i.path === requested && (i.depth === 0 || subPages))\n    ? requested\n    : (items.find((i) => i.depth === 0)?.path ?? '');\n  if (subPages && root !== null && !hasLeaves(paneGroup(root, open, schema.name))) {\n    open = items.find((i) => i.depth === 1 && i.section === open)?.path ?? open;\n  }\n\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n  const sectionIds = useMemo(\n    () =>\n      subPages\n        ? []\n        : items.filter((i) => i.depth === 1 && i.section === open).map((i) => i.path),\n    [items, open, subPages],\n  );\n  const spy = useScrollSpy({ rootRef: scrollRef, ids: sectionIds });\n\n  const setOpen = (path: string): void => {\n    if (props.section === undefined) setUncontrolled(path);\n    props.onSectionChange?.(path);\n    // Optional-called: jsdom's elements have no `scrollTo`, and neither does\n    // a pane that is not the scrolling box in some consumer's layout.\n    scrollRef.current?.scrollTo?.({ top: 0 });\n  };\n\n  const whole = root === null ? null : paneGroup(root, open, schema.name);\n  const opensTop = items.some((i) => i.path === open && i.depth === 0);\n  const group = subPages && opensTop && whole !== null ? leavesOf(whole) : whole;\n\n  return (\n    <div className={[s.railLayout, className].filter(Boolean).join(' ')}>\n      <PrefsRail\n        items={items}\n        section={open}\n        current={subPages ? null : spy.active}\n        onOpen={setOpen}\n        onScrollTo={subPages ? setOpen : spy.scrollTo}\n        ariaLabel={schema.name}\n        header={filterField}\n        showCounts={query.trim() !== ''}\n      />\n      {group === null ? (\n        <div className={s.pane}>\n          <NoMatches query={query} onClear={onClearFilter} />\n        </div>\n      ) : (\n        <PrefsPane ctx={ctx} group={group} path={open} scrollRef={scrollRef} />\n      )}\n    </div>\n  );\n}\n\n/**\n * The group a rail path opens. The empty path is the root's loose leaves,\n * which belong to no group of their own and are handed back as one named for\n * the schema — the rail lists them under the same name.\n */\nfunction paneGroup(root: PrefGroup, path: string, rootName: string): PrefGroup | null {\n  if (path === '') {\n    const children = Object.fromEntries(\n      Object.entries(root.children).filter(([, child]) => isPrefLeaf(child)),\n    );\n    return Object.keys(children).length === 0\n      ? null\n      : { ...root, name: rootName, children };\n  }\n  let node: PrefGroup | undefined;\n  let cursor = root;\n  for (const seg of path.split('.')) {\n    const next = cursor.children[seg];\n    if (next === undefined || isPrefLeaf(next)) return null;\n    node = next;\n    cursor = next;\n  }\n  return node ?? null;\n}\n\n/** Whether a group holds any leaf directly, not counting its subgroups. */\nfunction hasLeaves(group: PrefGroup | null): boolean {\n  return group !== null && Object.values(group.children).some(isPrefLeaf);\n}\n\n/** A group cut down to its direct leaves, for a page its subgroups each get their own of. */\nfunction leavesOf(group: PrefGroup): PrefGroup {\n  return {\n    ...group,\n    children: Object.fromEntries(\n      Object.entries(group.children).filter(([, child]) => isPrefLeaf(child)),\n    ),\n  };\n}\n\n/** What a filter matching nothing leaves behind. */\nfunction NoMatches({ query, onClear }: { query: string; onClear: () => void }) {\n  return (\n    <div className={s.noMatches}>\n      <p>No settings match “{query.trim()}”.</p>\n      <button type=\"button\" className={s.clearFilter} onClick={onClear}>\n        Clear filter\n      </button>\n    </div>\n  );\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\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 at the end of the title row (e.g. a dev-mode\n   *  \"Show hidden\" switch). An action the reader acts on when they are done\n   *  — resetting, importing — belongs in `footer` instead, where a dialog's\n   *  actions live. */\n  headerExtra?: ReactNode;\n  /** Footer slot, passed through to `Dialog` — typically a reset or done\n   *  action. */\n  footer?: 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 *\n * `layout=\"rail\"` is what a dialog usually wants: the default columns wrap\n * sideways past two groups, and this box is 900px at its widest.\n */\nexport function PrefsDialog(props: PrefsDialogProps) {\n  const { isOpen, onOpenChange, title, headerExtra, footer, dialogClassName, ...form } = props;\n  const rail = form.layout === 'rail';\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      aria-label={typeof title === 'string' ? title : form.schema.name}\n      className={dialogClassName}\n      footer={footer}\n      bodyClassName={rail ? s.railBody : undefined}\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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"}

package/dist/chunks/{Properties-BoG2MMHR.js → Properties-BbNuMiic.js}

@@ -1,10 +1,10 @@
 import { t as e } from "./dlog-F0I8KsIW.js";
 import { t } from "./stance-BFQpS_fL.js";
 import { t as n } from "./Button-XB-T75YL.js";
-import { t as r } from "./Disclosure-Ch2KxYuB.js";
+import { t as r } from "./Disclosure-CpWt87nO.js";
 import { n as i } from "./CurveEditor-0EE00D6s.js";
-import { t as a } from "./Dialog-DKfsk5VN.js";
-import { c as o, d as s, o as c, u as l } from "./PropertyField-PMrqBA0n.js";
+import { t as a } from "./Dialog-h-5MeYpu.js";
+import { c as o, d as s, o as c, u as l } from "./PropertyField-CWUtNK1w.js";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { useCallback as f, useId as p, useMemo as m, useState as h } from "react";
 var g = {
@@ -285,4 +285,4 @@ function x({ title: e, children: n, className: r, density: i, align: a, stance:
 //#endregion
 export { _ as i, b as n, v as r, x as t };
 
-//# sourceMappingURL=Properties-BoG2MMHR.js.map
+//# sourceMappingURL=Properties-BbNuMiic.js.map