@weasel-js/ui 1.0.2 → 1.0.4

package/dist/chunks/Input-DpkwYtUY.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input-DpkwYtUY.js","names":[],"sources":["../../src/components/Input/Input.module.css","../../src/components/Input/Input.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.frame {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 24px;\n  padding: 0 8px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: 13px;\n  line-height: 1;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n  border-color: var(--wzl-danger, #ff5b5b);\n}\n\n.field[data-disabled] .frame {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.frame input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  padding: 0;\n}\n\n.frame input::placeholder {\n  color: var(--wzl-fg-subtle);\n}\n\n.adornment {\n  display: inline-flex;\n  align-items: center;\n  color: var(--wzl-fg-subtle);\n  font-size: 12px;\n  pointer-events: none;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  TextField,\n  Label,\n  Input as RACInput,\n  Text,\n  FieldError,\n  type TextFieldProps as RACTextFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './Input.module.css';\n\nexport type InputProps = Omit<RACTextFieldProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  leadingAdornment?: ReactNode;\n  trailingAdornment?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single-line text input wrapping React Aria's TextField. Supplies a\n * default skin against the `--wzl-*` token system, and exposes the\n * familiar label / description / errorMessage / adornment slot shape.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    leadingAdornment,\n    trailingAdornment,\n    className,\n    ...textFieldProps\n  } = props;\n\n  return (\n    <TextField {...textFieldProps} className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}>\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <div className={s.frame}>\n        {leadingAdornment !== undefined && <span className={s.adornment}>{leadingAdornment}</span>}\n        <RACInput ref={ref} placeholder={placeholder} />\n        {trailingAdornment !== undefined && <span className={s.adornment}>{trailingAdornment}</span>}\n      </div>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </TextField>\n  );\n});\n"],"mappings":";;;;;;;;GC8Ba,IAAQ,EAAW,SAC9B,GACA,GACA;CACA,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,qBACA,sBACA,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EAAW,GAAI;EAAgB,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA3G;GACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB;KACG,MAAqB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAwB,CAAA;KAC1F,kBAAC,GAAD;MAAe;MAAkB;MAAe,CAAA;KAC/C,MAAsB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAyB,CAAA;KACxF;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GAC5D;;EAEd"}
+{"version":3,"file":"Input-DpkwYtUY.js","names":[],"sources":["../../src/components/Input/Input.module.css","../../src/components/Input/Input.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.frame {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 24px;\n  padding: 0 8px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: 13px;\n  line-height: 1;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n  border-color: var(--wzl-danger, #ff5b5b);\n}\n\n.field[data-disabled] .frame {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.frame input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  padding: 0;\n}\n\n.frame input::placeholder {\n  color: var(--wzl-fg-subtle);\n}\n\n.adornment {\n  display: inline-flex;\n  align-items: center;\n  color: var(--wzl-fg-subtle);\n  font-size: 12px;\n  pointer-events: none;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  TextField,\n  Label,\n  Input as RACInput,\n  Text,\n  FieldError,\n  type TextFieldProps as RACTextFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './Input.module.css';\n\n/** Props for {@link Input}, on top of React Aria's `TextField` props. */\nexport type InputProps = Omit<RACTextFieldProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  leadingAdornment?: ReactNode;\n  trailingAdornment?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single-line text input wrapping React Aria's TextField. Supplies a\n * default skin against the `--wzl-*` token system, and exposes the\n * familiar label / description / errorMessage / adornment slot shape.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    leadingAdornment,\n    trailingAdornment,\n    className,\n    ...textFieldProps\n  } = props;\n\n  return (\n    <TextField {...textFieldProps} className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}>\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <div className={s.frame}>\n        {leadingAdornment !== undefined && <span className={s.adornment}>{leadingAdornment}</span>}\n        <RACInput ref={ref} placeholder={placeholder} />\n        {trailingAdornment !== undefined && <span className={s.adornment}>{trailingAdornment}</span>}\n      </div>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </TextField>\n  );\n});\n"],"mappings":";;;;;;;;GC+Ba,IAAQ,EAAW,SAC9B,GACA,GACA;CACA,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,qBACA,sBACA,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EAAW,GAAI;EAAgB,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA3G;GACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB;KACG,MAAqB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAwB,CAAA;KAC1F,kBAAC,GAAD;MAAe;MAAkB;MAAe,CAAA;KAC/C,MAAsB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAyB,CAAA;KACxF;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GAC5D;;EAEd"}

package/dist/chunks/Keycaps-CFX7UAj8.js.map

@@ -1 +1 @@
-{"version":3,"file":"Keycaps-CFX7UAj8.js","names":[],"sources":["../../src/components/Keycaps/Keycaps.module.css","../../src/components/Keycaps/Keycap.tsx","../../src/components/Keycaps/Keycaps.tsx","../../src/components/Keycaps/keySpecsFromMods.ts"],"sourcesContent":["/* Keystroke \"key cap\" styling — each modifier and key in its own bordered chip. */\n.keys {\n  display: inline-flex;\n  gap: 3px;\n  /* Bottom-align so chips with text labels and chips with icon glyphs\n     (arrows, modifier symbols) line up at the same bottom edge. Baseline\n     drifts because text baselines sit above icon centers. */\n  align-items: flex-end;\n  /* When this whole sequence sits inline in surrounding text (e.g.\n     \"Press <KeySequence> to confirm.\"), the row anchors to the\n     surrounding line's bottom edge, not its baseline. */\n  vertical-align: bottom;\n  flex-wrap: wrap;\n}\n\n.keysEmpty {\n  color: var(--wzl-fg-muted);\n}\n\n.sep {\n  color: var(--wzl-fg-muted);\n  font-size: 11px;\n  line-height: 1;\n}\n\n.key {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: 18px;\n  padding: 0 4px;\n  /* Light face, slightly-darker-than-face border, dark glyph — reads as\n     a real keycap rather than a recessed slot in the panel. */\n  background: var(--wzl-fg, #e6e7e9);\n  border: 1px solid #25272c;\n  border-bottom-width: 2px;\n  border-radius: 3px;\n  color: var(--wzl-surface);\n  /* Keycaps are a deliberate exception to the site theme — the design-\n     system UI font (often a display face like Oswald) is wrong for\n     keyboard chips. Use a neutral sans stack so labels read like real\n     key legends. Consumers wanting a specific face per chip pass the\n     `font` prop on KeyCap. */\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n}\n\n/* Default chip is square — letters, digits, and single glyphs (⎋ ⌫ ↑ etc.)\n   sit in a uniform key-cap box. */\n.key[data-kind='square'] {\n  width: 18px;\n  padding: 0;\n}\n\n/* Modifiers (⌘ ⇪ ⌥ ⌃) are wider to match the visual weight of how they\n   appear on a real keyboard — and to differentiate them from the keys\n   they modify in a stack. */\n.key[data-kind='modifier'] {\n  min-width: 26px;\n  padding: 0 6px;\n}\n\n/* Tab / Enter / Space — actual wide keys on a real keyboard. */\n.key[data-kind='wide'] {\n  min-width: 32px;\n  padding: 0 8px;\n}\n\n/* Optional/inverted (default variant): face flips to dark; legend drops\n   to 60% opacity; dotted border drops to 40% opacity. Three soft cues\n   stacked for \"may be held but isn't required.\" */\n.key[data-inverted] {\n  background: var(--wzl-surface);\n  color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 60%, transparent);\n  border-style: dotted;\n  border-color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 40%, transparent);\n  border-width: 1.5px;\n  border-bottom-width: 1.5px;\n}\n\n/* Minimal variant — no fill, borders and legend follow currentColor.\n   Useful inline in colored prose / next to colored badges where the\n   chip should take the surrounding text color. */\n.key[data-variant='minimal'] {\n  background: transparent;\n  border-color: currentColor;\n  color: currentColor;\n}\n\n/* Optional + minimal: dotted border at full currentColor, legend at full\n   currentColor. The dotted pattern alone carries the \"optional\" cue here\n   — minimal's whole point is to defer color to the surrounding context,\n   so dimming would fight that. (Default variant uses graded opacity as a\n   stacked cue; minimal keeps it crisp.) */\n.key[data-variant='minimal'][data-inverted] {\n  border-style: dotted;\n  border-color: currentColor;\n  color: currentColor;\n  border-width: 1.5px;\n  border-bottom-width: 1.5px;\n}\n","import type { CSSProperties } from 'react';\nimport s from './Keycaps.module.css';\n\nconst MODIFIER_GLYPHS = new Set(['⌘', '⇪', '⌥', '⌃', '⇧']);\nconst WIDE_GLYPHS = new Set(['⇥', '↵', '␣']);\n\nexport type KeycapKind = 'modifier' | 'wide' | 'square';\n\nexport function inferKeycapKind(label: string): KeycapKind {\n  if (MODIFIER_GLYPHS.has(label)) return 'modifier';\n  if (WIDE_GLYPHS.has(label)) return 'wide';\n  if (label.length > 1) return 'wide';\n  return 'square';\n}\n\nexport type KeyCapVariant = 'default' | 'minimal';\n\nexport interface KeyCapProps {\n  /** Glyph rendered in the chip (modifier or key). */\n  label: string;\n  /** Marks the chip as not required to trigger the action. In the default\n   *  variant the chip face inverts (dark face / light glyph) for\n   *  emphasis. In the `'minimal'` variant the chip's border becomes\n   *  dotted to read as \"may be held, but isn't required.\" */\n  inverted?: boolean;\n  /** Visual style. `'default'` (default) renders a filled chip; `'minimal'`\n   *  renders an unfilled chip whose border and legend are `currentColor`\n   *  — useful inline in colored prose / next to colored badges where the\n   *  chip should take the surrounding text color. */\n  variant?: KeyCapVariant;\n  className?: string;\n  /** Optional inline style. Useful for one-off width overrides (e.g.\n   *  building a keyboard-layout where the space bar spans several\n   *  standard-key widths). The component sets no inline styles of its\n   *  own — everything else comes from the CSS module. */\n  style?: CSSProperties;\n  /** Override the chip's font-family. Accepts any CSS font-family\n   *  string. When omitted, the chip inherits from the design-system\n   *  UI font token (`--wzl-font-ui`). Useful for one-off cases where\n   *  a different face is desired — though the canonical move is to\n   *  override the CSS variable at the consumer's scope, not the prop. */\n  font?: string;\n}\n\n/** Single bordered keycap chip for one glyph (modifier or key). Use\n *  `KeySequence` to render a full shortcut. */\nexport function KeyCap({ label, inverted = false, variant = 'default', className, style, font }: KeyCapProps) {\n  const resolvedStyle = font ? { ...style, fontFamily: font } : style;\n  return (\n    <kbd\n      className={[s.key, className].filter(Boolean).join(' ')}\n      data-kind={inferKeycapKind(label)}\n      data-variant={variant === 'default' ? undefined : variant}\n      data-inverted={inverted || undefined}\n      style={resolvedStyle}\n    >\n      {label}\n    </kbd>\n  );\n}\n","import { Fragment } from 'react';\nimport s from './Keycaps.module.css';\nimport { KeyCap, inferKeycapKind, type KeyCapVariant } from './Keycap';\n\nexport interface KeySpec {\n  /** Glyph rendered in the chip (modifier or key). */\n  label: string;\n  /** When true, the chip renders inverted to mark it as not required to\n   *  trigger the action (e.g. an optional modifier). Defaults to false. */\n  optional?: boolean;\n}\n\nexport interface KeySequenceProps {\n  /** Keys to render. `undefined` or empty renders a muted em-dash.\n   *  Modifiers are always rendered first regardless of input order; relative\n   *  order within each group is preserved. */\n  keys: readonly KeySpec[] | undefined;\n  /** Character inserted between the trailing modifier chip and the first\n   *  non-modifier chip (e.g. `'+'` renders `⌘ + K`). `null` or `''`\n   *  suppresses it. Defaults to `'+'`. */\n  separator?: string | null;\n  /** Forwarded to every `KeyCap` in the sequence. `'minimal'` renders\n   *  unfilled chips whose border + legend are `currentColor`. */\n  variant?: KeyCapVariant;\n  /** Forwarded to every `KeyCap` in the sequence. Overrides the design-\n   *  system UI font for that chip only. */\n  font?: string;\n  className?: string;\n}\n\n/** Renders a shortcut as a row of `KeyCap` chips, one per key. Optional\n *  keys render inverted to distinguish them from required ones. */\nexport function KeySequence({ keys, separator = '+', variant = 'default', font, className }: KeySequenceProps) {\n  if (!keys || keys.length === 0) {\n    return <span className={[s.keysEmpty, className].filter(Boolean).join(' ')}>—</span>;\n  }\n  const ordered = keys\n    .map((k, i) => ({ k, i }))\n    .sort((a, b) => {\n      const am = inferKeycapKind(a.k.label) === 'modifier' ? 0 : 1;\n      const bm = inferKeycapKind(b.k.label) === 'modifier' ? 0 : 1;\n      return am - bm || a.i - b.i;\n    })\n    .map(({ k }) => k);\n  const sepIdx = ordered.findIndex((k) => inferKeycapKind(k.label) !== 'modifier');\n  const showSep = !!separator && sepIdx > 0 && sepIdx < ordered.length;\n  return (\n    <span className={[s.keys, className].filter(Boolean).join(' ')}>\n      {ordered.map((k, i) => (\n        <Fragment key={i}>\n          {showSep && i === sepIdx ? <span className={s.sep}>{separator}</span> : null}\n          <KeyCap label={k.label} inverted={k.optional ?? false} variant={variant} font={font} />\n        </Fragment>\n      ))}\n    </span>\n  );\n}\n","import type { KeySpec } from './Keycaps';\n\n/** Logical modifier name. Matches the kit's `ModifierKey` in shape — kept as a\n *  local type so `weasel-ui` stays independent of `@weasel-js/core`. */\nexport type LogicalMod = 'mod' | 'shift' | 'alt' | 'ctrl' | 'meta';\n\n/** Detected (or overridden) platform. `'mod'` resolves to ⌘ on macOS,\n *  Ctrl on Windows / Linux. */\nexport type Platform = 'macos' | 'windows' | 'linux';\n\n/** Visual form of a modifier or named-key label.\n *\n *  - `'auto'` (default): the per-entry, per-platform default — whatever\n *    label is actually printed on the physical key. macOS keys show the\n *    Apple glyphs (⌘ ⌥ ⌃ ⇧ ⎋ ↵ ⇥). Windows keys mostly show text\n *    (Ctrl, Alt, Shift) BUT the Win key shows its logo (⊞) and the\n *    context-menu key shows ▤. Linux mirrors Windows with Super (⊞).\n *  - `'symbol'` forces the Apple-style glyph everywhere a symbolic form\n *    exists. Entries without a widely-recognized symbol still fall\n *    back to text.\n *  - `'text'` always spells the label out (Cmd / Option / Esc / Enter). */\nexport type LegendStyle = 'auto' | 'symbol' | 'text';\n\nexport interface LogicalModSpec {\n  name: LogicalMod;\n  /** Marks this modifier as optional (may be held but isn't required).\n   *  Forwarded as the resulting `KeySpec.optional`. */\n  optional?: boolean;\n}\n\nexport interface KeySpecsFromModsOptions {\n  /** Override OS detection. Defaults to the detected platform, or\n   *  `'macos'` when detection is unavailable (e.g. in tests, or when\n   *  `navigator` is missing). */\n  platform?: Platform;\n  /** Defaults to `'auto'` (symbol on macOS, text everywhere else). Pass\n   *  `'symbol'` or `'text'` to force a specific style regardless of\n   *  platform. */\n  legend?: LegendStyle;\n}\n\nconst MOD_BY_PLATFORM: Record<LogicalMod, Record<Platform, Record<LegendStyle, string>>> = {\n  mod: {\n    macos:   { auto: '⌘',    symbol: '⌘',    text: 'Cmd' },\n    windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n    linux:   { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  shift: {\n    macos:   { auto: '⇧', symbol: '⇧', text: 'Shift' },\n    windows: { auto: '⇧', symbol: '⇧', text: 'Shift' },\n    linux:   { auto: '⇧', symbol: '⇧', text: 'Shift' },\n  },\n  alt: {\n    macos:   { auto: '⌥',   symbol: '⌥',   text: 'Option' },\n    windows: { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n    linux:   { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n  },\n  ctrl: {\n    macos:   { auto: '⌃',    symbol: '⌃',    text: 'Control' },\n    windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n    linux:   { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  // Windows/Linux Meta has a recognized symbol on the physical key (⊞ Win\n  // logo / Super logo), so `auto` shows it. Use `text` for Win / Super.\n  meta: {\n    macos:   { auto: '⌘', symbol: '⌘', text: 'Cmd' },\n    windows: { auto: '⊞', symbol: '⊞', text: 'Win' },\n    linux:   { auto: '⊞', symbol: '⊞', text: 'Super' },\n  },\n};\n\n/** Detect the user's OS from the browser environment. UA sniffing — not\n *  100% reliable, but adequate for picking a modifier-glyph convention.\n *  Falls back to `'macos'` (matches the kit's docs convention) when\n *  `navigator` is unavailable. */\nexport function detectPlatform(): Platform {\n  if (typeof navigator === 'undefined') return 'macos';\n  // Prefer the modern userAgentData when available (Chromium-only today).\n  const uaData = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData;\n  const raw = (uaData?.platform ?? navigator.userAgent ?? '').toLowerCase();\n  if (raw.includes('mac') || raw.includes('darwin') || raw.includes('iphone') || raw.includes('ipad')) return 'macos';\n  if (raw.includes('win')) return 'windows';\n  if (raw.includes('linux') || raw.includes('x11')) return 'linux';\n  return 'macos';\n}\n\n/**\n * Map a list of **logical** modifiers (`'mod'`, `'shift'`, …) to **visual**\n * `KeySpec`s appropriate for the current platform.\n *\n * The kit-side gesture grammar uses logical names so the same route reads\n * correctly on every OS — `'mod'` means \"Cmd on Mac, Ctrl on Win/Linux\".\n * `KeySequence` is purely visual and renders the labels you give it; this\n * helper is the bridge.\n *\n * ```ts\n * <KeySequence\n *   keys={keySpecsFromMods([{ name: 'mod' }, { name: 'shift', optional: true }])}\n * />\n * ```\n *\n * On a Mac: renders `⌘ ⇧`. On Windows: renders `Ctrl Shift`. Pass an\n * explicit `platform` to override detection (e.g. for docs that always\n * show the macOS form). Pass `legend: 'text'` to force \"Cmd\" over \"⌘\"\n * even on macOS.\n */\nexport function keySpecsFromMods(\n  mods: readonly LogicalModSpec[],\n  opts: KeySpecsFromModsOptions = {},\n): readonly KeySpec[] {\n  const platform = opts.platform ?? detectPlatform();\n  const legend = opts.legend ?? 'auto';\n  return mods.map((m) => {\n    const label = MOD_BY_PLATFORM[m.name][platform][legend];\n    return m.optional ? { label, optional: true } : { label };\n  });\n}\n\n/** Per-platform × per-legend table for named, non-modifier keys. `auto`\n *  is whatever's printed on the physical key for that platform. Arrows\n *  are universal symbols on every platform. */\nconst NAMED_KEY: Record<string, Record<Platform, Record<LegendStyle, string>>> = {\n  Escape:      { macos: { auto: '⎋',    symbol: '⎋',        text: 'Esc' },       windows: { auto: 'Esc',       symbol: 'Esc',       text: 'Esc' },       linux: { auto: 'Esc',       symbol: 'Esc',       text: 'Esc' } },\n  Enter:       { macos: { auto: '↵',    symbol: '↵',        text: 'Return' },    windows: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' },     linux: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' } },\n  Return:      { macos: { auto: '↵',    symbol: '↵',        text: 'Return' },    windows: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' },     linux: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' } },\n  Tab:         { macos: { auto: '⇥',    symbol: '⇥',        text: 'Tab' },       windows: { auto: 'Tab',       symbol: 'Tab',       text: 'Tab' },       linux: { auto: 'Tab',       symbol: 'Tab',       text: 'Tab' } },\n  Space:       { macos: { auto: '␣',    symbol: '␣',        text: 'Space' },     windows: { auto: 'Space',     symbol: 'Space',     text: 'Space' },     linux: { auto: 'Space',     symbol: 'Space',     text: 'Space' } },\n  ' ':         { macos: { auto: '␣',    symbol: '␣',        text: 'Space' },     windows: { auto: 'Space',     symbol: 'Space',     text: 'Space' },     linux: { auto: 'Space',     symbol: 'Space',     text: 'Space' } },\n  Backspace:   { macos: { auto: '⌫',    symbol: '⌫',        text: 'Backspace' }, windows: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' }, linux: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' } },\n  Delete:      { macos: { auto: '⌦',    symbol: '⌦',        text: 'Delete' },    windows: { auto: 'Delete',    symbol: 'Delete',    text: 'Delete' },    linux: { auto: 'Delete',    symbol: 'Delete',    text: 'Delete' } },\n  // Context-menu key (the right-Ctrl-area key on Windows / Linux keyboards\n  // with a ▤ icon). Mac has no equivalent; falls back to text 'Menu'.\n  ContextMenu: { macos: { auto: 'Menu', symbol: 'Menu',     text: 'Menu' },      windows: { auto: '▤',         symbol: '▤',         text: 'Menu' },      linux: { auto: '▤',         symbol: '▤',         text: 'Menu' } },\n  ArrowUp:     { macos: { auto: '↑',    symbol: '↑',        text: '↑' },         windows: { auto: '↑',         symbol: '↑',         text: '↑' },         linux: { auto: '↑',         symbol: '↑',         text: '↑' } },\n  ArrowDown:   { macos: { auto: '↓',    symbol: '↓',        text: '↓' },         windows: { auto: '↓',         symbol: '↓',         text: '↓' },         linux: { auto: '↓',         symbol: '↓',         text: '↓' } },\n  ArrowLeft:   { macos: { auto: '←',    symbol: '←',        text: '←' },         windows: { auto: '←',         symbol: '←',         text: '←' },         linux: { auto: '←',         symbol: '←',         text: '←' } },\n  ArrowRight:  { macos: { auto: '→',    symbol: '→',        text: '→' },         windows: { auto: '→',         symbol: '→',         text: '→' },         linux: { auto: '→',         symbol: '→',         text: '→' } },\n};\n\n/**\n * Render a raw `KeyboardEvent.key` value as a platform-appropriate\n * `KeySpec`. Named non-modifier keys (Esc, Enter, Tab, Space, Backspace,\n * Delete, arrows) get the platform's conventional form. Letter / digit /\n * other keys pass through upper-cased.\n *\n * ```ts\n * keySpecFromKey('Escape', { platform: 'macos' })   // { label: '⎋' }\n * keySpecFromKey('Escape', { platform: 'windows' }) // { label: 'Esc' }\n * keySpecFromKey('p')                               // { label: 'P' }\n * ```\n *\n * Symbol mode is only meaningful on macOS — Windows / Linux keyboards\n * print the text form on the physical key, so symbol mode there falls\n * back to text.\n */\nexport function keySpecFromKey(\n  raw: string,\n  opts: KeySpecsFromModsOptions & { optional?: boolean } = {},\n): KeySpec {\n  const platform = opts.platform ?? detectPlatform();\n  const legend = opts.legend ?? 'auto';\n  const entry = NAMED_KEY[raw];\n  const label = entry ? entry[platform][legend] : raw.length === 1 ? raw.toUpperCase() : raw;\n  return opts.optional ? { label, optional: true } : { label };\n}\n"],"mappings":"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"}
+{"version":3,"file":"Keycaps-CFX7UAj8.js","names":[],"sources":["../../src/components/Keycaps/Keycaps.module.css","../../src/components/Keycaps/Keycap.tsx","../../src/components/Keycaps/Keycaps.tsx","../../src/components/Keycaps/keySpecsFromMods.ts"],"sourcesContent":["/* Keystroke \"key cap\" styling — each modifier and key in its own bordered chip. */\n.keys {\n  display: inline-flex;\n  gap: 3px;\n  /* Bottom-align so chips with text labels and chips with icon glyphs\n     (arrows, modifier symbols) line up at the same bottom edge. Baseline\n     drifts because text baselines sit above icon centers. */\n  align-items: flex-end;\n  /* When this whole sequence sits inline in surrounding text (e.g.\n     \"Press <KeySequence> to confirm.\"), the row anchors to the\n     surrounding line's bottom edge, not its baseline. */\n  vertical-align: bottom;\n  flex-wrap: wrap;\n}\n\n.keysEmpty {\n  color: var(--wzl-fg-muted);\n}\n\n.sep {\n  color: var(--wzl-fg-muted);\n  font-size: 11px;\n  line-height: 1;\n}\n\n.key {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: 18px;\n  padding: 0 4px;\n  /* Light face, slightly-darker-than-face border, dark glyph — reads as\n     a real keycap rather than a recessed slot in the panel. */\n  background: var(--wzl-fg, #e6e7e9);\n  border: 1px solid #25272c;\n  border-bottom-width: 2px;\n  border-radius: 3px;\n  color: var(--wzl-surface);\n  /* Keycaps are a deliberate exception to the site theme — the design-\n     system UI font (often a display face like Oswald) is wrong for\n     keyboard chips. Use a neutral sans stack so labels read like real\n     key legends. Consumers wanting a specific face per chip pass the\n     `font` prop on KeyCap. */\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n}\n\n/* Default chip is square — letters, digits, and single glyphs (⎋ ⌫ ↑ etc.)\n   sit in a uniform key-cap box. */\n.key[data-kind='square'] {\n  width: 18px;\n  padding: 0;\n}\n\n/* Modifiers (⌘ ⇪ ⌥ ⌃) are wider to match the visual weight of how they\n   appear on a real keyboard — and to differentiate them from the keys\n   they modify in a stack. */\n.key[data-kind='modifier'] {\n  min-width: 26px;\n  padding: 0 6px;\n}\n\n/* Tab / Enter / Space — actual wide keys on a real keyboard. */\n.key[data-kind='wide'] {\n  min-width: 32px;\n  padding: 0 8px;\n}\n\n/* Optional/inverted (default variant): face flips to dark; legend drops\n   to 60% opacity; dotted border drops to 40% opacity. Three soft cues\n   stacked for \"may be held but isn't required.\" */\n.key[data-inverted] {\n  background: var(--wzl-surface);\n  color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 60%, transparent);\n  border-style: dotted;\n  border-color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 40%, transparent);\n  border-width: 1.5px;\n  border-bottom-width: 1.5px;\n}\n\n/* Minimal variant — no fill, borders and legend follow currentColor.\n   Useful inline in colored prose / next to colored badges where the\n   chip should take the surrounding text color. */\n.key[data-variant='minimal'] {\n  background: transparent;\n  border-color: currentColor;\n  color: currentColor;\n}\n\n/* Optional + minimal: dotted border at full currentColor, legend at full\n   currentColor. The dotted pattern alone carries the \"optional\" cue here\n   — minimal's whole point is to defer color to the surrounding context,\n   so dimming would fight that. (Default variant uses graded opacity as a\n   stacked cue; minimal keeps it crisp.) */\n.key[data-variant='minimal'][data-inverted] {\n  border-style: dotted;\n  border-color: currentColor;\n  color: currentColor;\n  border-width: 1.5px;\n  border-bottom-width: 1.5px;\n}\n","import type { CSSProperties } from 'react';\nimport s from './Keycaps.module.css';\n\nconst MODIFIER_GLYPHS = new Set(['⌘', '⇪', '⌥', '⌃', '⇧']);\nconst WIDE_GLYPHS = new Set(['⇥', '↵', '␣']);\n\n/**\n * Width class of a keycap: a modifier glyph, a multi-character legend that\n * needs a wider chip, or a single character in a square one.\n */\nexport type KeycapKind = 'modifier' | 'wide' | 'square';\n\n/**\n * Picks the chip width for a legend — modifier glyphs and anything longer\n * than one character get the wider forms.\n */\nexport function inferKeycapKind(label: string): KeycapKind {\n  if (MODIFIER_GLYPHS.has(label)) return 'modifier';\n  if (WIDE_GLYPHS.has(label)) return 'wide';\n  if (label.length > 1) return 'wide';\n  return 'square';\n}\n\n/** Visual style of a keycap chip. */\nexport type KeyCapVariant = 'default' | 'minimal';\n\n/** Props for {@link KeyCap}. */\nexport interface KeyCapProps {\n  /** Glyph rendered in the chip (modifier or key). */\n  label: string;\n  /** Marks the chip as not required to trigger the action. In the default\n   *  variant the chip face inverts (dark face / light glyph) for\n   *  emphasis. In the `'minimal'` variant the chip's border becomes\n   *  dotted to read as \"may be held, but isn't required.\" */\n  inverted?: boolean;\n  /** Visual style. `'default'` (default) renders a filled chip; `'minimal'`\n   *  renders an unfilled chip whose border and legend are `currentColor`\n   *  — useful inline in colored prose / next to colored badges where the\n   *  chip should take the surrounding text color. */\n  variant?: KeyCapVariant;\n  className?: string;\n  /** Optional inline style. Useful for one-off width overrides (e.g.\n   *  building a keyboard-layout where the space bar spans several\n   *  standard-key widths). The component sets no inline styles of its\n   *  own — everything else comes from the CSS module. */\n  style?: CSSProperties;\n  /** Override the chip's font-family. Accepts any CSS font-family\n   *  string. When omitted, the chip inherits from the design-system\n   *  UI font token (`--wzl-font-ui`). Useful for one-off cases where\n   *  a different face is desired — though the canonical move is to\n   *  override the CSS variable at the consumer's scope, not the prop. */\n  font?: string;\n}\n\n/** Single bordered keycap chip for one glyph (modifier or key). Use\n *  `KeySequence` to render a full shortcut. */\nexport function KeyCap({ label, inverted = false, variant = 'default', className, style, font }: KeyCapProps) {\n  const resolvedStyle = font ? { ...style, fontFamily: font } : style;\n  return (\n    <kbd\n      className={[s.key, className].filter(Boolean).join(' ')}\n      data-kind={inferKeycapKind(label)}\n      data-variant={variant === 'default' ? undefined : variant}\n      data-inverted={inverted || undefined}\n      style={resolvedStyle}\n    >\n      {label}\n    </kbd>\n  );\n}\n","import { Fragment } from 'react';\nimport s from './Keycaps.module.css';\nimport { KeyCap, inferKeycapKind, type KeyCapVariant } from './Keycap';\n\n/** One key in a shortcut. */\nexport interface KeySpec {\n  /** Glyph rendered in the chip (modifier or key). */\n  label: string;\n  /** When true, the chip renders inverted to mark it as not required to\n   *  trigger the action (e.g. an optional modifier). Defaults to false. */\n  optional?: boolean;\n}\n\n/** Props for {@link KeySequence}. */\nexport interface KeySequenceProps {\n  /** Keys to render. `undefined` or empty renders a muted em-dash.\n   *  Modifiers are always rendered first regardless of input order; relative\n   *  order within each group is preserved. */\n  keys: readonly KeySpec[] | undefined;\n  /** Character inserted between the trailing modifier chip and the first\n   *  non-modifier chip (e.g. `'+'` renders `⌘ + K`). `null` or `''`\n   *  suppresses it. Defaults to `'+'`. */\n  separator?: string | null;\n  /** Forwarded to every `KeyCap` in the sequence. `'minimal'` renders\n   *  unfilled chips whose border + legend are `currentColor`. */\n  variant?: KeyCapVariant;\n  /** Forwarded to every `KeyCap` in the sequence. Overrides the design-\n   *  system UI font for that chip only. */\n  font?: string;\n  className?: string;\n}\n\n/** Renders a shortcut as a row of `KeyCap` chips, one per key. Optional\n *  keys render inverted to distinguish them from required ones. */\nexport function KeySequence({ keys, separator = '+', variant = 'default', font, className }: KeySequenceProps) {\n  if (!keys || keys.length === 0) {\n    return <span className={[s.keysEmpty, className].filter(Boolean).join(' ')}>—</span>;\n  }\n  const ordered = keys\n    .map((k, i) => ({ k, i }))\n    .sort((a, b) => {\n      const am = inferKeycapKind(a.k.label) === 'modifier' ? 0 : 1;\n      const bm = inferKeycapKind(b.k.label) === 'modifier' ? 0 : 1;\n      return am - bm || a.i - b.i;\n    })\n    .map(({ k }) => k);\n  const sepIdx = ordered.findIndex((k) => inferKeycapKind(k.label) !== 'modifier');\n  const showSep = !!separator && sepIdx > 0 && sepIdx < ordered.length;\n  return (\n    <span className={[s.keys, className].filter(Boolean).join(' ')}>\n      {ordered.map((k, i) => (\n        <Fragment key={i}>\n          {showSep && i === sepIdx ? <span className={s.sep}>{separator}</span> : null}\n          <KeyCap label={k.label} inverted={k.optional ?? false} variant={variant} font={font} />\n        </Fragment>\n      ))}\n    </span>\n  );\n}\n","import type { KeySpec } from './Keycaps';\n\n/** Logical modifier name. Matches the kit's `ModifierKey` in shape — kept as a\n *  local type so `weasel-ui` stays independent of `@weasel-js/core`. */\nexport type LogicalMod = 'mod' | 'shift' | 'alt' | 'ctrl' | 'meta';\n\n/** Detected (or overridden) platform. `'mod'` resolves to ⌘ on macOS,\n *  Ctrl on Windows / Linux. */\nexport type Platform = 'macos' | 'windows' | 'linux';\n\n/** Visual form of a modifier or named-key label.\n *\n *  - `'auto'` (default): the per-entry, per-platform default — whatever\n *    label is actually printed on the physical key. macOS keys show the\n *    Apple glyphs (⌘ ⌥ ⌃ ⇧ ⎋ ↵ ⇥). Windows keys mostly show text\n *    (Ctrl, Alt, Shift) BUT the Win key shows its logo (⊞) and the\n *    context-menu key shows ▤. Linux mirrors Windows with Super (⊞).\n *  - `'symbol'` forces the Apple-style glyph everywhere a symbolic form\n *    exists. Entries without a widely-recognized symbol still fall\n *    back to text.\n *  - `'text'` always spells the label out (Cmd / Option / Esc / Enter). */\nexport type LegendStyle = 'auto' | 'symbol' | 'text';\n\n/** A modifier to render, named platform-independently. */\nexport interface LogicalModSpec {\n  name: LogicalMod;\n  /** Marks this modifier as optional (may be held but isn't required).\n   *  Forwarded as the resulting `KeySpec.optional`. */\n  optional?: boolean;\n}\n\n/** Options for {@link keySpecsFromMods}. */\nexport interface KeySpecsFromModsOptions {\n  /** Override OS detection. Defaults to the detected platform, or\n   *  `'macos'` when detection is unavailable (e.g. in tests, or when\n   *  `navigator` is missing). */\n  platform?: Platform;\n  /** Defaults to `'auto'` (symbol on macOS, text everywhere else). Pass\n   *  `'symbol'` or `'text'` to force a specific style regardless of\n   *  platform. */\n  legend?: LegendStyle;\n}\n\nconst MOD_BY_PLATFORM: Record<LogicalMod, Record<Platform, Record<LegendStyle, string>>> = {\n  mod: {\n    macos:   { auto: '⌘',    symbol: '⌘',    text: 'Cmd' },\n    windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n    linux:   { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  shift: {\n    macos:   { auto: '⇧', symbol: '⇧', text: 'Shift' },\n    windows: { auto: '⇧', symbol: '⇧', text: 'Shift' },\n    linux:   { auto: '⇧', symbol: '⇧', text: 'Shift' },\n  },\n  alt: {\n    macos:   { auto: '⌥',   symbol: '⌥',   text: 'Option' },\n    windows: { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n    linux:   { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n  },\n  ctrl: {\n    macos:   { auto: '⌃',    symbol: '⌃',    text: 'Control' },\n    windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n    linux:   { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  // Windows/Linux Meta has a recognized symbol on the physical key (⊞ Win\n  // logo / Super logo), so `auto` shows it. Use `text` for Win / Super.\n  meta: {\n    macos:   { auto: '⌘', symbol: '⌘', text: 'Cmd' },\n    windows: { auto: '⊞', symbol: '⊞', text: 'Win' },\n    linux:   { auto: '⊞', symbol: '⊞', text: 'Super' },\n  },\n};\n\n/** Detect the user's OS from the browser environment. UA sniffing — not\n *  100% reliable, but adequate for picking a modifier-glyph convention.\n *  Falls back to `'macos'` (matches the kit's docs convention) when\n *  `navigator` is unavailable. */\nexport function detectPlatform(): Platform {\n  if (typeof navigator === 'undefined') return 'macos';\n  // Prefer the modern userAgentData when available (Chromium-only today).\n  const uaData = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData;\n  const raw = (uaData?.platform ?? navigator.userAgent ?? '').toLowerCase();\n  if (raw.includes('mac') || raw.includes('darwin') || raw.includes('iphone') || raw.includes('ipad')) return 'macos';\n  if (raw.includes('win')) return 'windows';\n  if (raw.includes('linux') || raw.includes('x11')) return 'linux';\n  return 'macos';\n}\n\n/**\n * Map a list of **logical** modifiers (`'mod'`, `'shift'`, …) to **visual**\n * `KeySpec`s appropriate for the current platform.\n *\n * The kit-side gesture grammar uses logical names so the same route reads\n * correctly on every OS — `'mod'` means \"Cmd on Mac, Ctrl on Win/Linux\".\n * `KeySequence` is purely visual and renders the labels you give it; this\n * helper is the bridge.\n *\n * ```ts\n * <KeySequence\n *   keys={keySpecsFromMods([{ name: 'mod' }, { name: 'shift', optional: true }])}\n * />\n * ```\n *\n * On a Mac: renders `⌘ ⇧`. On Windows: renders `Ctrl Shift`. Pass an\n * explicit `platform` to override detection (e.g. for docs that always\n * show the macOS form). Pass `legend: 'text'` to force \"Cmd\" over \"⌘\"\n * even on macOS.\n */\nexport function keySpecsFromMods(\n  mods: readonly LogicalModSpec[],\n  opts: KeySpecsFromModsOptions = {},\n): readonly KeySpec[] {\n  const platform = opts.platform ?? detectPlatform();\n  const legend = opts.legend ?? 'auto';\n  return mods.map((m) => {\n    const label = MOD_BY_PLATFORM[m.name][platform][legend];\n    return m.optional ? { label, optional: true } : { label };\n  });\n}\n\n/** Per-platform × per-legend table for named, non-modifier keys. `auto`\n *  is whatever's printed on the physical key for that platform. Arrows\n *  are universal symbols on every platform. */\nconst NAMED_KEY: Record<string, Record<Platform, Record<LegendStyle, string>>> = {\n  Escape:      { macos: { auto: '⎋',    symbol: '⎋',        text: 'Esc' },       windows: { auto: 'Esc',       symbol: 'Esc',       text: 'Esc' },       linux: { auto: 'Esc',       symbol: 'Esc',       text: 'Esc' } },\n  Enter:       { macos: { auto: '↵',    symbol: '↵',        text: 'Return' },    windows: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' },     linux: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' } },\n  Return:      { macos: { auto: '↵',    symbol: '↵',        text: 'Return' },    windows: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' },     linux: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' } },\n  Tab:         { macos: { auto: '⇥',    symbol: '⇥',        text: 'Tab' },       windows: { auto: 'Tab',       symbol: 'Tab',       text: 'Tab' },       linux: { auto: 'Tab',       symbol: 'Tab',       text: 'Tab' } },\n  Space:       { macos: { auto: '␣',    symbol: '␣',        text: 'Space' },     windows: { auto: 'Space',     symbol: 'Space',     text: 'Space' },     linux: { auto: 'Space',     symbol: 'Space',     text: 'Space' } },\n  ' ':         { macos: { auto: '␣',    symbol: '␣',        text: 'Space' },     windows: { auto: 'Space',     symbol: 'Space',     text: 'Space' },     linux: { auto: 'Space',     symbol: 'Space',     text: 'Space' } },\n  Backspace:   { macos: { auto: '⌫',    symbol: '⌫',        text: 'Backspace' }, windows: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' }, linux: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' } },\n  Delete:      { macos: { auto: '⌦',    symbol: '⌦',        text: 'Delete' },    windows: { auto: 'Delete',    symbol: 'Delete',    text: 'Delete' },    linux: { auto: 'Delete',    symbol: 'Delete',    text: 'Delete' } },\n  // Context-menu key (the right-Ctrl-area key on Windows / Linux keyboards\n  // with a ▤ icon). Mac has no equivalent; falls back to text 'Menu'.\n  ContextMenu: { macos: { auto: 'Menu', symbol: 'Menu',     text: 'Menu' },      windows: { auto: '▤',         symbol: '▤',         text: 'Menu' },      linux: { auto: '▤',         symbol: '▤',         text: 'Menu' } },\n  ArrowUp:     { macos: { auto: '↑',    symbol: '↑',        text: '↑' },         windows: { auto: '↑',         symbol: '↑',         text: '↑' },         linux: { auto: '↑',         symbol: '↑',         text: '↑' } },\n  ArrowDown:   { macos: { auto: '↓',    symbol: '↓',        text: '↓' },         windows: { auto: '↓',         symbol: '↓',         text: '↓' },         linux: { auto: '↓',         symbol: '↓',         text: '↓' } },\n  ArrowLeft:   { macos: { auto: '←',    symbol: '←',        text: '←' },         windows: { auto: '←',         symbol: '←',         text: '←' },         linux: { auto: '←',         symbol: '←',         text: '←' } },\n  ArrowRight:  { macos: { auto: '→',    symbol: '→',        text: '→' },         windows: { auto: '→',         symbol: '→',         text: '→' },         linux: { auto: '→',         symbol: '→',         text: '→' } },\n};\n\n/**\n * Render a raw `KeyboardEvent.key` value as a platform-appropriate\n * `KeySpec`. Named non-modifier keys (Esc, Enter, Tab, Space, Backspace,\n * Delete, arrows) get the platform's conventional form. Letter / digit /\n * other keys pass through upper-cased.\n *\n * ```ts\n * keySpecFromKey('Escape', { platform: 'macos' })   // { label: '⎋' }\n * keySpecFromKey('Escape', { platform: 'windows' }) // { label: 'Esc' }\n * keySpecFromKey('p')                               // { label: 'P' }\n * ```\n *\n * Symbol mode is only meaningful on macOS — Windows / Linux keyboards\n * print the text form on the physical key, so symbol mode there falls\n * back to text.\n */\nexport function keySpecFromKey(\n  raw: string,\n  opts: KeySpecsFromModsOptions & { optional?: boolean } = {},\n): KeySpec {\n  const platform = opts.platform ?? detectPlatform();\n  const legend = opts.legend ?? 'auto';\n  const entry = NAMED_KEY[raw];\n  const label = entry ? entry[platform][legend] : raw.length === 1 ? raw.toUpperCase() : raw;\n  return opts.optional ? { label, optional: true } : { label };\n}\n"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"OptionsBar-CHvH4n4u.js","names":[],"sources":["../../src/components/OptionsBar/OptionsBar.tsx"],"sourcesContent":["import { type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport s from '../segmentedControl.module.css';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\n\nexport type OptionsBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n  selected: boolean;\n  onChange: (next: boolean) => void;\n};\n\nexport type OptionsBarSize = 'sm' | 'md';\nexport type OptionsBarVariant = 'default' | 'minimal';\n\nexport type OptionsBarProps<V extends string | number = string> = {\n  items: readonly OptionsBarItem<V>[];\n  ariaLabel?: string;\n  className?: string;\n  height?: number;\n  /** Size variant. `sm` is ~60% of the default height with reduced padding\n   *  and font size — sized for dense surfaces like lab control panels. */\n  size?: OptionsBarSize;\n  /** Visual variant. `minimal` strips the pill track and glass treatment;\n   *  selection becomes a flat accent. For dense diagnostic surfaces. */\n  variant?: OptionsBarVariant;\n};\n\nexport function OptionsBar<V extends string | number = string>(props: OptionsBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n\n  const toggle = (index: number) => {\n    const item = items[index];\n    if (item.disabled) return;\n    item.onChange(!item.selected);\n  };\n\n  const roving = useRovingTabIndex({ items, itemClassName: s.segment, onActivate: toggle });\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--wzl-tb-height' as string]: `${height}px` } as CSSProperties)\n    : undefined;\n\n  const rootCls = [\n    s.root,\n    size && s[`size_${size}`],\n    variant && s[`variant_${variant}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      ref={roving.rootRef}\n      className={rootCls}\n      role=\"group\"\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {items.map((item, i) => {\n        const cls = `${s.segment}${item.selected ? ` ${s.segmentSelected}` : ''}`;\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            aria-pressed={item.selected}\n            aria-label={item.ariaLabel}\n            disabled={item.disabled}\n            tabIndex={roving.tabIndexFor(i)}\n            className={cls}\n            onClick={() => toggle(i)}\n            onKeyDown={roving.onKeyDown(i)}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AA6BA,SAAgB,EAA+C,GAAyC;CACtG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAY,GAEzD,KAAU,MAAkB;EAChC,IAAM,IAAO,EAAM;AACf,IAAK,YACT,EAAK,SAAS,CAAC,EAAK,SAAS;IAGzB,IAAS,EAAkB;EAAE;EAAO,eAAe,EAAE;EAAS,YAAY;EAAQ,CAAC,EAEnF,IAAmC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,mBAA8B,GAAG,EAAO,KAAK,EAG/C,IAAU;EACd,EAAE;EACF,KAAQ,EAAE,QAAQ;EAClB,KAAW,EAAE,WAAW;EACxB;EACD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAE3B,QACE,kBAAC,OAAD;EACE,KAAK,EAAO;EACZ,WAAW;EACX,MAAK;EACL,cAAY;EACL;YAEN,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAM,GAAG,EAAE,UAAU,EAAK,WAAW,IAAI,EAAE,oBAAoB;AACrE,UACE,kBAAC,UAAD;IAEE,MAAK;IACL,gBAAc,EAAK;IACnB,cAAY,EAAK;IACjB,UAAU,EAAK;IACf,UAAU,EAAO,YAAY,EAAE;IAC/B,WAAW;IACX,eAAe,EAAO,EAAE;IACxB,WAAW,EAAO,UAAU,EAAE;cAE7B,EAAK;IACC,EAXF,EAAK,MAWH;IAEX;EACE,CAAA"}
+{"version":3,"file":"OptionsBar-CHvH4n4u.js","names":[],"sources":["../../src/components/OptionsBar/OptionsBar.tsx"],"sourcesContent":["import { type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport s from '../segmentedControl.module.css';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\n\n/**\n * One segment of an {@link OptionsBar}. Unlike `ToggleBar`, each item carries\n * its own selected state and its own `onChange`.\n */\nexport type OptionsBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n  selected: boolean;\n  onChange: (next: boolean) => void;\n};\n\n/** Segment height and type scale for an {@link OptionsBar}. */\nexport type OptionsBarSize = 'sm' | 'md';\n/** Visual treatment of an {@link OptionsBar}. */\nexport type OptionsBarVariant = 'default' | 'minimal';\n\n/** Props for {@link OptionsBar}. */\nexport type OptionsBarProps<V extends string | number = string> = {\n  items: readonly OptionsBarItem<V>[];\n  ariaLabel?: string;\n  className?: string;\n  height?: number;\n  /** Size variant. `sm` is ~60% of the default height with reduced padding\n   *  and font size — sized for dense surfaces like lab control panels. */\n  size?: OptionsBarSize;\n  /** Visual variant. `minimal` strips the pill track and glass treatment;\n   *  selection becomes a flat accent. For dense diagnostic surfaces. */\n  variant?: OptionsBarVariant;\n};\n\n/**\n * Segmented strip of independent on/off options, each owning its own state.\n * Use it when the segments are unrelated booleans; use `ToggleBar` when they\n * are values of one setting.\n */\nexport function OptionsBar<V extends string | number = string>(props: OptionsBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n\n  const toggle = (index: number) => {\n    const item = items[index];\n    if (item.disabled) return;\n    item.onChange(!item.selected);\n  };\n\n  const roving = useRovingTabIndex({ items, itemClassName: s.segment, onActivate: toggle });\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--wzl-tb-height' as string]: `${height}px` } as CSSProperties)\n    : undefined;\n\n  const rootCls = [\n    s.root,\n    size && s[`size_${size}`],\n    variant && s[`variant_${variant}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      ref={roving.rootRef}\n      className={rootCls}\n      role=\"group\"\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {items.map((item, i) => {\n        const cls = `${s.segment}${item.selected ? ` ${s.segmentSelected}` : ''}`;\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            aria-pressed={item.selected}\n            aria-label={item.ariaLabel}\n            disabled={item.disabled}\n            tabIndex={roving.tabIndexFor(i)}\n            className={cls}\n            onClick={() => toggle(i)}\n            onKeyDown={roving.onKeyDown(i)}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAyCA,SAAgB,EAA+C,GAAyC;CACtG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAY,GAEzD,KAAU,MAAkB;EAChC,IAAM,IAAO,EAAM;AACf,IAAK,YACT,EAAK,SAAS,CAAC,EAAK,SAAS;IAGzB,IAAS,EAAkB;EAAE;EAAO,eAAe,EAAE;EAAS,YAAY;EAAQ,CAAC,EAEnF,IAAmC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,mBAA8B,GAAG,EAAO,KAAK,EAG/C,IAAU;EACd,EAAE;EACF,KAAQ,EAAE,QAAQ;EAClB,KAAW,EAAE,WAAW;EACxB;EACD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAE3B,QACE,kBAAC,OAAD;EACE,KAAK,EAAO;EACZ,WAAW;EACX,MAAK;EACL,cAAY;EACL;YAEN,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAM,GAAG,EAAE,UAAU,EAAK,WAAW,IAAI,EAAE,oBAAoB;AACrE,UACE,kBAAC,UAAD;IAEE,MAAK;IACL,gBAAc,EAAK;IACnB,cAAY,EAAK;IACjB,UAAU,EAAK;IACf,UAAU,EAAO,YAAY,EAAE;IAC/B,WAAW;IACX,eAAe,EAAO,EAAE;IACxB,WAAW,EAAO,UAAU,EAAE;cAE7B,EAAK;IACC,EAXF,EAAK,MAWH;IAEX;EACE,CAAA"}

package/dist/chunks/Plot2D-CEnhzodm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Plot2D-CEnhzodm.js","names":[],"sources":["../../src/dlog.ts","../../src/components/Plot2D/geometry.ts","../../src/components/Plot2D/Plot2D.module.css","../../src/components/Plot2D/Plot2D.tsx"],"sourcesContent":["/**\n * Namespaced, opt-in console tracing. Off by default; production builds\n * may strip the calls entirely depending on the bundler.\n *\n * Enable in the browser:\n *\n *   localStorage.setItem('weasel.debug', '*')               // all namespaces\n *   localStorage.setItem('weasel.debug', 'curve-editor')    // just curve editor\n *   localStorage.setItem('weasel.debug', 'curve-editor,layer-stack')\n *\n * Each component picks a stable namespace and calls `dlog(namespace, ...)`.\n * Useful for tracing pointer/event flows that are hard to capture\n * post-hoc (drag handlers, gesture sequences, selection mutations).\n *\n * The flag is read once and cached for the page session — reload to\n * pick up changes. Cheap hot-path checks (one nullish-coalesce + Set\n * lookup) so leaving calls in place is fine.\n *\n * Mirrors `src/debug/flag.ts` in the kit. Two impls live here because\n * weasel-ui doesn't depend on the kit, but both read the same\n * localStorage keys so behavior is uniform. See the kit copy for the\n * canonical list of kit-level namespaces.\n *\n * Known weasel-ui namespaces:\n *   - plot2d        — Plot2D mount / unmount\n *   - curve-editor  — CurveEditor pointer flow\n */\n\nconst KEYS = ['weasel.debug', 'weaseldraw.debug'] as const;\n\ninterface Cached {\n  all: boolean;\n  set: Set<string>;\n}\n\nlet cached: Cached | null = null;\n\nfunction read(): Cached {\n  const empty: Cached = { all: false, set: new Set() };\n  if (typeof localStorage === 'undefined') return empty;\n  try {\n    for (const k of KEYS) {\n      const v = localStorage.getItem(k);\n      if (v == null || v === '') continue;\n      if (v === '1' || v === 'true' || v === '*') return { all: true, set: new Set() };\n      return { all: false, set: new Set(v.split(/[\\s,]+/).filter(Boolean)) };\n    }\n    return empty;\n  } catch {\n    return empty;\n  }\n}\n\nfunction get(): Cached {\n  if (cached === null) cached = read();\n  return cached;\n}\n\n/** True when `namespace` (or `*`) is enabled. */\nexport function isDebugEnabled(namespace: string): boolean {\n  const c = get();\n  return c.all || c.set.has(namespace);\n}\n\n/** Conditional `console.debug` — no-op unless `namespace` (or `*`) is enabled.\n *  Each call is prefixed with `[namespace]` so the source is searchable. */\nexport function dlog(namespace: string, ...args: unknown[]): void {\n  if (!isDebugEnabled(namespace)) return;\n  // eslint-disable-next-line no-console\n  console.debug(`[${namespace}]`, ...args);\n}\n","/**\n * Coordinate transforms (model ↔ plot) for Plot2D. Pure / deterministic —\n * no DOM, no React, no state.\n *\n * Model space: caller-defined xRange × yRange. Y axis goes UP.\n * Plot space: 0..width × 0..height in CSS pixels. Y axis goes DOWN (SVG).\n */\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface ModelRange {\n  xMin: number;\n  xMax: number;\n  yMin: number;\n  yMax: number;\n}\n\nexport interface PlotSize {\n  width: number;\n  height: number;\n}\n\nexport function modelToPlot(p: Point, m: ModelRange, plot: PlotSize): Point {\n  const xFrac = (p.x - m.xMin) / (m.xMax - m.xMin);\n  const yFrac = (p.y - m.yMin) / (m.yMax - m.yMin);\n  return {\n    x: xFrac * plot.width,\n    // Invert y so model y=0 sits at plot bottom (SVG y grows downward).\n    y: (1 - yFrac) * plot.height,\n  };\n}\n\nexport function plotToModel(p: Point, m: ModelRange, plot: PlotSize): Point {\n  const xFrac = p.x / plot.width;\n  const yFrac = 1 - p.y / plot.height;\n  return {\n    x: m.xMin + xFrac * (m.xMax - m.xMin),\n    y: m.yMin + yFrac * (m.yMax - m.yMin),\n  };\n}\n",".root {\n  /* Component-local vars layered over theme tokens. Consumers override\n   * either the plot-* var (component scope) or the wzl-* token (app\n   * scope). */\n  --plot-bg: var(--wzl-surface-sunken);\n  --plot-grid: var(--wzl-line);\n  /* Axes get full foreground contrast — they're the plot frame, the\n   * most prominent structural element after caller-rendered content. */\n  --plot-axis: var(--wzl-fg);\n\n  display: block;\n  /* Caller-rendered marks at the very edge (e.g. CurveEditor anchors)\n   * extend past the SVG box by their radius — let them paint over the\n   * host page instead of being half-clipped. */\n  overflow: visible;\n  background: var(--plot-bg);\n  user-select: none;\n  touch-action: none;\n  outline: none;\n}\n\n/* Keyboard-only focus ring. Caller opts in via `tabIndex`. */\n.root:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 2px;\n}\n\n.grid {\n  stroke: var(--plot-grid);\n  stroke-width: 1;\n  fill: none;\n}\n\n.axis {\n  stroke: var(--plot-axis);\n  stroke-width: var(--wzl-line-width);\n  fill: none;\n}\n","import {\n  forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from 'react';\nimport {\n  modelToPlot, plotToModel,\n  type ModelRange, type Point,\n} from './geometry';\nimport s from './Plot2D.module.css';\nimport { dlog } from '../../dlog';\n\nexport interface GridSettings {\n  /** Number of evenly-spaced internal grid lines per axis (excluding\n   *  the edges). Applied to both x and y. Default 3. */\n  divisions?: number;\n  /** Stroke color override. When omitted, uses `var(--plot-grid)`. */\n  color?: string;\n}\n\nexport interface AxesSettings {\n  /** Stroke color override. When omitted, uses `var(--plot-axis)`. */\n  color?: string;\n}\n\nexport interface Plot2DCoords {\n  plot: Point;\n  model: Point;\n}\n\nexport interface Plot2DProps {\n  width: number;\n  height: number;\n  /** Model-space x range. Default [0, 1]. */\n  xRange?: readonly [number, number];\n  /** Model-space y range. Default [0, 1]. */\n  yRange?: readonly [number, number];\n  /** Background grid. `false` / `null` / omitted = no grid. Pass `{}`\n   *  for default (3 divisions per axis) or populated GridSettings. */\n  grid?: GridSettings | false | null;\n  /** Axis lines. `false` / `null` = no axes. Omitted = default-styled\n   *  axes (on). Pass AxesSettings to customize. */\n  axes?: AxesSettings | false | null;\n  /** Forwarded to the underlying svg. Consumer opts into focus this way. */\n  tabIndex?: number;\n  className?: string;\n  style?: CSSProperties;\n  /** Pointer down on the SVG. Receives both plot- and model-space coords\n   *  pre-computed so consumers don't repeat the rect/transform dance. */\n  onPointerDown?: (e: ReactPointerEvent<SVGSVGElement>, coords: Plot2DCoords) => void;\n  onKeyDown?: (e: ReactKeyboardEvent<SVGSVGElement>) => void;\n  children?: ReactNode;\n}\n\nexport interface Plot2DHandle {\n  readonly svg: SVGSVGElement | null;\n  plotToModel(pt: Point): Point;\n  modelToPlot(pt: Point): Point;\n  /** Convert a DOM event's clientX/clientY (e.g. from a window-attached\n   *  pointermove during drag) to plot-space. */\n  clientToPlot(e: { clientX: number; clientY: number }): Point;\n  /** Convenience: clientToPlot → plotToModel. */\n  clientToModel(e: { clientX: number; clientY: number }): Point;\n  readonly width: number;\n  readonly height: number;\n}\n\nexport const Plot2D = forwardRef<Plot2DHandle, Plot2DProps>(function Plot2D(props, ref) {\n  const {\n    width, height,\n    xRange = [0, 1],\n    yRange = [0, 1],\n    grid,\n    axes,\n    tabIndex,\n    className,\n    style,\n    onPointerDown,\n    onKeyDown,\n    children,\n  } = props;\n\n  const svgRef = useRef<SVGSVGElement | null>(null);\n\n  const modelRange: ModelRange = useMemo(\n    () => ({ xMin: xRange[0], xMax: xRange[1], yMin: yRange[0], yMax: yRange[1] }),\n    [xRange, yRange],\n  );\n\n  const plotSize = useMemo(() => ({ width, height }), [width, height]);\n\n  const clientToPlot = useCallback((e: { clientX: number; clientY: number }): Point => {\n    const rect = svgRef.current?.getBoundingClientRect();\n    const left = rect?.left ?? 0;\n    const top = rect?.top ?? 0;\n    return { x: e.clientX - left, y: e.clientY - top };\n  }, []);\n\n  useEffect(() => {\n    dlog('plot2d', 'mount', { width, height });\n    return () => dlog('plot2d', 'unmount');\n  }, []);\n  useImperativeHandle(ref, () => ({\n    get svg() { return svgRef.current; },\n    plotToModel: (pt: Point) => plotToModel(pt, modelRange, plotSize),\n    modelToPlot: (pt: Point) => modelToPlot(pt, modelRange, plotSize),\n    clientToPlot,\n    clientToModel: (e) => plotToModel(clientToPlot(e), modelRange, plotSize),\n    get width() { return plotSize.width; },\n    get height() { return plotSize.height; },\n  }), [modelRange, plotSize, clientToPlot]);\n\n  const handlePointerDown = useCallback((e: ReactPointerEvent<SVGSVGElement>) => {\n    if (!onPointerDown) return;\n    const plot = clientToPlot(e);\n    const model = plotToModel(plot, modelRange, plotSize);\n    onPointerDown(e, { plot, model });\n  }, [onPointerDown, clientToPlot, modelRange, plotSize]);\n\n  const cls = [s.root, className].filter(Boolean).join(' ');\n\n  return (\n    <svg\n      ref={svgRef}\n      className={cls}\n      style={style}\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      role=\"img\"\n      tabIndex={tabIndex}\n      onPointerDown={onPointerDown ? handlePointerDown : undefined}\n      onKeyDown={onKeyDown}\n    >\n      {grid && (() => {\n        const divisions = grid.divisions ?? 3;\n        const stroke = grid.color;\n        // Evenly-spaced internal divisions, excluding the edges (which\n        // belong to the axes). For divisions=3, fractions are 1/4, 2/4, 3/4.\n        const fractions: number[] = [];\n        for (let i = 1; i <= divisions; i++) fractions.push(i / (divisions + 1));\n        return (\n          <g>\n            {fractions.map((f) => (\n              <line\n                key={`gx-${f}`}\n                data-plot-element=\"grid\"\n                className={s.grid}\n                stroke={stroke}\n                x1={f * width} x2={f * width}\n                y1={0} y2={height}\n              />\n            ))}\n            {fractions.map((f) => (\n              <line\n                key={`gy-${f}`}\n                data-plot-element=\"grid\"\n                className={s.grid}\n                stroke={stroke}\n                x1={0} x2={width}\n                y1={f * height} y2={f * height}\n              />\n            ))}\n          </g>\n        );\n      })()}\n      {axes !== false && axes !== null && (() => {\n        const stroke = axes?.color;\n        return (\n          <g>\n            <line\n              data-plot-element=\"axis\"\n              className={s.axis}\n              stroke={stroke}\n              x1={0} x2={width}\n              y1={height} y2={height}\n            />\n            <line\n              data-plot-element=\"axis\"\n              className={s.axis}\n              stroke={stroke}\n              x1={0} x2={0}\n              y1={0} y2={height}\n            />\n          </g>\n        );\n      })()}\n      {children}\n    </svg>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"Plot2D-CEnhzodm.js","names":[],"sources":["../../src/dlog.ts","../../src/components/Plot2D/geometry.ts","../../src/components/Plot2D/Plot2D.module.css","../../src/components/Plot2D/Plot2D.tsx"],"sourcesContent":["/**\n * Namespaced, opt-in console tracing. Off by default; production builds\n * may strip the calls entirely depending on the bundler.\n *\n * Enable in the browser:\n *\n *   localStorage.setItem('weasel.debug', '*')               // all namespaces\n *   localStorage.setItem('weasel.debug', 'curve-editor')    // just curve editor\n *   localStorage.setItem('weasel.debug', 'curve-editor,layer-stack')\n *\n * Each component picks a stable namespace and calls `dlog(namespace, ...)`.\n * Useful for tracing pointer/event flows that are hard to capture\n * post-hoc (drag handlers, gesture sequences, selection mutations).\n *\n * The flag is read once and cached for the page session — reload to\n * pick up changes. Cheap hot-path checks (one nullish-coalesce + Set\n * lookup) so leaving calls in place is fine.\n *\n * Mirrors `src/debug/flag.ts` in the kit. Two impls live here because\n * weasel-ui doesn't depend on the kit, but both read the same\n * localStorage keys so behavior is uniform. See the kit copy for the\n * canonical list of kit-level namespaces.\n *\n * Known weasel-ui namespaces:\n *   - plot2d        — Plot2D mount / unmount\n *   - curve-editor  — CurveEditor pointer flow\n */\n\nconst KEYS = ['weasel.debug', 'weaseldraw.debug'] as const;\n\ninterface Cached {\n  all: boolean;\n  set: Set<string>;\n}\n\nlet cached: Cached | null = null;\n\nfunction read(): Cached {\n  const empty: Cached = { all: false, set: new Set() };\n  if (typeof localStorage === 'undefined') return empty;\n  try {\n    for (const k of KEYS) {\n      const v = localStorage.getItem(k);\n      if (v == null || v === '') continue;\n      if (v === '1' || v === 'true' || v === '*') return { all: true, set: new Set() };\n      return { all: false, set: new Set(v.split(/[\\s,]+/).filter(Boolean)) };\n    }\n    return empty;\n  } catch {\n    return empty;\n  }\n}\n\nfunction get(): Cached {\n  if (cached === null) cached = read();\n  return cached;\n}\n\n/** True when `namespace` (or `*`) is enabled. */\nexport function isDebugEnabled(namespace: string): boolean {\n  const c = get();\n  return c.all || c.set.has(namespace);\n}\n\n/** Conditional `console.debug` — no-op unless `namespace` (or `*`) is enabled.\n *  Each call is prefixed with `[namespace]` so the source is searchable. */\nexport function dlog(namespace: string, ...args: unknown[]): void {\n  if (!isDebugEnabled(namespace)) return;\n  // eslint-disable-next-line no-console\n  console.debug(`[${namespace}]`, ...args);\n}\n","/**\n * Coordinate transforms (model ↔ plot) for Plot2D. Pure / deterministic —\n * no DOM, no React, no state.\n *\n * Model space: caller-defined xRange × yRange. Y axis goes UP.\n * Plot space: 0..width × 0..height in CSS pixels. Y axis goes DOWN (SVG).\n */\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * The caller-defined extent of model space, the coordinate system a plot's\n * data lives in.\n */\nexport interface ModelRange {\n  xMin: number;\n  xMax: number;\n  yMin: number;\n  yMax: number;\n}\n\n/** The plot's drawing area in CSS pixels. */\nexport interface PlotSize {\n  width: number;\n  height: number;\n}\n\n/**\n * Maps a model-space point into plot space, flipping the y axis so model y\n * grows upward while SVG y grows downward.\n */\nexport function modelToPlot(p: Point, m: ModelRange, plot: PlotSize): Point {\n  const xFrac = (p.x - m.xMin) / (m.xMax - m.xMin);\n  const yFrac = (p.y - m.yMin) / (m.yMax - m.yMin);\n  return {\n    x: xFrac * plot.width,\n    // Invert y so model y=0 sits at plot bottom (SVG y grows downward).\n    y: (1 - yFrac) * plot.height,\n  };\n}\n\n/** The inverse of {@link modelToPlot}. */\nexport function plotToModel(p: Point, m: ModelRange, plot: PlotSize): Point {\n  const xFrac = p.x / plot.width;\n  const yFrac = 1 - p.y / plot.height;\n  return {\n    x: m.xMin + xFrac * (m.xMax - m.xMin),\n    y: m.yMin + yFrac * (m.yMax - m.yMin),\n  };\n}\n",".root {\n  /* Component-local vars layered over theme tokens. Consumers override\n   * either the plot-* var (component scope) or the wzl-* token (app\n   * scope). */\n  --plot-bg: var(--wzl-surface-sunken);\n  --plot-grid: var(--wzl-line);\n  /* Axes get full foreground contrast — they're the plot frame, the\n   * most prominent structural element after caller-rendered content. */\n  --plot-axis: var(--wzl-fg);\n\n  display: block;\n  /* Caller-rendered marks at the very edge (e.g. CurveEditor anchors)\n   * extend past the SVG box by their radius — let them paint over the\n   * host page instead of being half-clipped. */\n  overflow: visible;\n  background: var(--plot-bg);\n  user-select: none;\n  touch-action: none;\n  outline: none;\n}\n\n/* Keyboard-only focus ring. Caller opts in via `tabIndex`. */\n.root:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 2px;\n}\n\n.grid {\n  stroke: var(--plot-grid);\n  stroke-width: 1;\n  fill: none;\n}\n\n.axis {\n  stroke: var(--plot-axis);\n  stroke-width: var(--wzl-line-width);\n  fill: none;\n}\n","import {\n  forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from 'react';\nimport {\n  modelToPlot, plotToModel,\n  type ModelRange, type Point,\n} from './geometry';\nimport s from './Plot2D.module.css';\nimport { dlog } from '../../dlog';\n\n/** Background grid configuration for a {@link Plot2D}. */\nexport interface GridSettings {\n  /** Number of evenly-spaced internal grid lines per axis (excluding\n   *  the edges). Applied to both x and y. Default 3. */\n  divisions?: number;\n  /** Stroke color override. When omitted, uses `var(--plot-grid)`. */\n  color?: string;\n}\n\n/** Axis-line configuration for a {@link Plot2D}. */\nexport interface AxesSettings {\n  /** Stroke color override. When omitted, uses `var(--plot-axis)`. */\n  color?: string;\n}\n\n/** A pointer position given in both of the plot's coordinate systems. */\nexport interface Plot2DCoords {\n  plot: Point;\n  model: Point;\n}\n\n/** Props for {@link Plot2D}. */\nexport interface Plot2DProps {\n  width: number;\n  height: number;\n  /** Model-space x range. Default [0, 1]. */\n  xRange?: readonly [number, number];\n  /** Model-space y range. Default [0, 1]. */\n  yRange?: readonly [number, number];\n  /** Background grid. `false` / `null` / omitted = no grid. Pass `{}`\n   *  for default (3 divisions per axis) or populated GridSettings. */\n  grid?: GridSettings | false | null;\n  /** Axis lines. `false` / `null` = no axes. Omitted = default-styled\n   *  axes (on). Pass AxesSettings to customize. */\n  axes?: AxesSettings | false | null;\n  /** Forwarded to the underlying svg. Consumer opts into focus this way. */\n  tabIndex?: number;\n  className?: string;\n  style?: CSSProperties;\n  /** Pointer down on the SVG. Receives both plot- and model-space coords\n   *  pre-computed so consumers don't repeat the rect/transform dance. */\n  onPointerDown?: (e: ReactPointerEvent<SVGSVGElement>, coords: Plot2DCoords) => void;\n  onKeyDown?: (e: ReactKeyboardEvent<SVGSVGElement>) => void;\n  children?: ReactNode;\n}\n\n/**\n * Imperative handle on a {@link Plot2D}: the SVG element, its size, and the\n * coordinate conversions, including ones that start from a raw DOM event so a\n * drag tracked on `window` can still map back into the plot.\n */\nexport interface Plot2DHandle {\n  readonly svg: SVGSVGElement | null;\n  plotToModel(pt: Point): Point;\n  modelToPlot(pt: Point): Point;\n  /** Convert a DOM event's clientX/clientY (e.g. from a window-attached\n   *  pointermove during drag) to plot-space. */\n  clientToPlot(e: { clientX: number; clientY: number }): Point;\n  /** Convenience: clientToPlot → plotToModel. */\n  clientToModel(e: { clientX: number; clientY: number }): Point;\n  readonly width: number;\n  readonly height: number;\n}\n\n/**\n * An SVG plotting surface with an optional grid and axes. It draws the frame\n * and owns the model-space to plot-space mapping; the plotted content is\n * whatever children are passed, positioned in plot space.\n */\nexport const Plot2D = forwardRef<Plot2DHandle, Plot2DProps>(function Plot2D(props, ref) {\n  const {\n    width, height,\n    xRange = [0, 1],\n    yRange = [0, 1],\n    grid,\n    axes,\n    tabIndex,\n    className,\n    style,\n    onPointerDown,\n    onKeyDown,\n    children,\n  } = props;\n\n  const svgRef = useRef<SVGSVGElement | null>(null);\n\n  const modelRange: ModelRange = useMemo(\n    () => ({ xMin: xRange[0], xMax: xRange[1], yMin: yRange[0], yMax: yRange[1] }),\n    [xRange, yRange],\n  );\n\n  const plotSize = useMemo(() => ({ width, height }), [width, height]);\n\n  const clientToPlot = useCallback((e: { clientX: number; clientY: number }): Point => {\n    const rect = svgRef.current?.getBoundingClientRect();\n    const left = rect?.left ?? 0;\n    const top = rect?.top ?? 0;\n    return { x: e.clientX - left, y: e.clientY - top };\n  }, []);\n\n  useEffect(() => {\n    dlog('plot2d', 'mount', { width, height });\n    return () => dlog('plot2d', 'unmount');\n  }, []);\n  useImperativeHandle(ref, () => ({\n    get svg() { return svgRef.current; },\n    plotToModel: (pt: Point) => plotToModel(pt, modelRange, plotSize),\n    modelToPlot: (pt: Point) => modelToPlot(pt, modelRange, plotSize),\n    clientToPlot,\n    clientToModel: (e) => plotToModel(clientToPlot(e), modelRange, plotSize),\n    get width() { return plotSize.width; },\n    get height() { return plotSize.height; },\n  }), [modelRange, plotSize, clientToPlot]);\n\n  const handlePointerDown = useCallback((e: ReactPointerEvent<SVGSVGElement>) => {\n    if (!onPointerDown) return;\n    const plot = clientToPlot(e);\n    const model = plotToModel(plot, modelRange, plotSize);\n    onPointerDown(e, { plot, model });\n  }, [onPointerDown, clientToPlot, modelRange, plotSize]);\n\n  const cls = [s.root, className].filter(Boolean).join(' ');\n\n  return (\n    <svg\n      ref={svgRef}\n      className={cls}\n      style={style}\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      role=\"img\"\n      tabIndex={tabIndex}\n      onPointerDown={onPointerDown ? handlePointerDown : undefined}\n      onKeyDown={onKeyDown}\n    >\n      {grid && (() => {\n        const divisions = grid.divisions ?? 3;\n        const stroke = grid.color;\n        // Evenly-spaced internal divisions, excluding the edges (which\n        // belong to the axes). For divisions=3, fractions are 1/4, 2/4, 3/4.\n        const fractions: number[] = [];\n        for (let i = 1; i <= divisions; i++) fractions.push(i / (divisions + 1));\n        return (\n          <g>\n            {fractions.map((f) => (\n              <line\n                key={`gx-${f}`}\n                data-plot-element=\"grid\"\n                className={s.grid}\n                stroke={stroke}\n                x1={f * width} x2={f * width}\n                y1={0} y2={height}\n              />\n            ))}\n            {fractions.map((f) => (\n              <line\n                key={`gy-${f}`}\n                data-plot-element=\"grid\"\n                className={s.grid}\n                stroke={stroke}\n                x1={0} x2={width}\n                y1={f * height} y2={f * height}\n              />\n            ))}\n          </g>\n        );\n      })()}\n      {axes !== false && axes !== null && (() => {\n        const stroke = axes?.color;\n        return (\n          <g>\n            <line\n              data-plot-element=\"axis\"\n              className={s.axis}\n              stroke={stroke}\n              x1={0} x2={width}\n              y1={height} y2={height}\n            />\n            <line\n              data-plot-element=\"axis\"\n              className={s.axis}\n              stroke={stroke}\n              x1={0} x2={0}\n              y1={0} y2={height}\n            />\n          </g>\n        );\n      })()}\n      {children}\n    </svg>\n  );\n});\n"],"mappings":"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"}

package/dist/chunks/{PointPlotter-R8hguJPq.js → PointPlotter-BUIse9c4.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./CurveEditor-fRctbmoV.js";
+import { n as e } from "./CurveEditor-SmwwvrsA.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/PointPlotter/PointPlotter.tsx
 function n(n) {
@@ -13,4 +13,4 @@ function n(n) {
 //#endregion
 export { n as t };
 
-//# sourceMappingURL=PointPlotter-R8hguJPq.js.map
+//# sourceMappingURL=PointPlotter-BUIse9c4.js.map

package/dist/chunks/PointPlotter-BUIse9c4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointPlotter-BUIse9c4.js","names":[],"sources":["../../src/components/PointPlotter/PointPlotter.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport {\n  CurveEditor,\n  type AnchorRenderProps,\n  type ControlPoint,\n  type CurveEditorProps,\n} from '../CurveEditor';\nimport type { GridSettings, AxesSettings } from '../Plot2D';\n\n/** Props for {@link PointPlotter}. */\nexport interface PointPlotterProps {\n  /** Plotted points; caller-owned. */\n  value: readonly ControlPoint[];\n  /** Fires every frame during drag with the live in-flight value. */\n  onInput: (next: ControlPoint[]) => void;\n  /** Fires once per discrete user action (drag-end, add, delete) with\n   *  the new value and the value at gesture start. Wire history here. */\n  onChange?: (next: ControlPoint[], prev: readonly ControlPoint[]) => void;\n  /** Model-space x range. Default [0, 1]. */\n  xRange?: readonly [number, number];\n  /** Model-space y range. Default [0, 1]. */\n  yRange?: readonly [number, number];\n  width: number;\n  height: number;\n  grid?: GridSettings | false | null;\n  axes?: AxesSettings | false | null;\n  /** Minimum allowed point count. User-initiated deletion is refused\n   *  while `value.length <= minPoints`. */\n  minPoints?: number;\n  /** Maximum allowed point count. User-initiated insertion is refused\n   *  while `value.length >= maxPoints`. */\n  maxPoints?: number;\n  /** How new points are added. Default `'click-empty'`. Set to `'never'`\n   *  to disable insertion entirely. */\n  addPointMode?: 'click-empty' | 'never';\n  /** Built-in undo/redo via keyboard when the component has focus.\n   *  Default `true`. See `CurveEditor.history` for details. */\n  history?: boolean;\n  /** Custom per-anchor renderer. See `CurveEditor.renderAnchor`. */\n  renderAnchor?: (info: AnchorRenderProps) => ReactNode;\n  /** Extra SVG content beneath the anchors. See `CurveEditor.decorations`. */\n  decorations?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * 2D point plotter — a CurveEditor with the curve hidden. Anchors,\n * drag, shift+click delete, right-click delete, and click-empty insert\n * are inherited from CurveEditor verbatim, so the two components share\n * gesture semantics and stay in sync as CurveEditor evolves.\n *\n * Differences from CurveEditor: no curve `<path>` drawn, no fill, no\n * endpoint pinning, no interpolation, default `addPointMode` is\n * `'click-empty'` (CurveEditor defaults to `'click-curve'`, which\n * doesn't make sense without a curve to hit-test against).\n */\nexport function PointPlotter(props: PointPlotterProps) {\n  const curveProps: CurveEditorProps = {\n    ...props,\n    addPointMode: props.addPointMode ?? 'click-empty',\n    curve: false,\n    fill: false,\n    endpoints: 'free',\n  };\n  return <CurveEditor {...curveProps} />;\n}\n"],"mappings":";;;AAyDA,SAAgB,EAAa,GAA0B;AAQrD,QAAO,kBAAC,GAAD;EANL,GAAG;EACH,cAAc,EAAM,gBAAgB;EACpC,OAAO;EACP,MAAM;EACN,WAAW;EAEyB,CAAA"}

package/dist/chunks/Powerline-Dd9Ukhcl.js.map

@@ -1 +1 @@
-{"version":3,"file":"Powerline-Dd9Ukhcl.js","names":[],"sources":["../../src/components/Powerline/Powerline.module.css","../../src/components/Powerline/Powerline.tsx"],"sourcesContent":[".row {\n  display: inline-flex;\n  align-items: stretch;\n  gap: var(--powerline-gap, 0.2em);\n}\n\n.matrix {\n  display: grid;\n  gap: 12px;\n}\n\n/* Reset Badge's opinionated text defaults — Powerline segments should pick up\n * the surrounding text style instead of forcing uppercase / 10px / extra\n * tracking. Consumers can still override via className on Powerline. */\n.segment {\n  font-size: inherit;\n  text-transform: none;\n  letter-spacing: normal;\n}\n","import type { CSSProperties, ReactNode } from 'react';\nimport { Badge } from '../Badge/Badge';\nimport type { BadgeSize, BadgeTone, BadgeVariant } from '../Badge/types';\nimport type { EdgeCap } from '../Badge/bases/edgeProfiles';\nimport s from './Powerline.module.css';\n\nexport interface PowerlineSegment {\n  text: ReactNode;\n  /** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */\n  endCap?: EdgeCap;\n  tone?: BadgeTone;\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  onClick?: () => void;\n  href?: string;\n  'aria-label'?: string;\n}\n\nexport interface PowerlineProps {\n  segments: PowerlineSegment[];\n  /** Left edge of the first segment. Defaults to 'flat'. */\n  startCap?: EdgeCap;\n  /** Default size for every segment (per-segment `size` wins). */\n  size?: BadgeSize;\n  /** Default variant for every segment (per-segment `variant` wins). */\n  variant?: BadgeVariant;\n  /** Protrusion depth in CSS px, passed through to every segment's base. */\n  depth?: number;\n  /** Visible gap between adjacent segments. Number → px; string → literal CSS length.\n   *  Default: `0.2em` (scales with the row's font size). Pass `0` for flush. */\n  gap?: number | string;\n  className?: string;\n  'aria-label'?: string;\n}\n\nexport function Powerline({\n  segments,\n  startCap = 'flat',\n  size,\n  variant,\n  depth,\n  gap,\n  className,\n  ...rest\n}: PowerlineProps) {\n  const cls = [s.row, className].filter(Boolean).join(' ');\n  const style: CSSProperties | undefined = gap !== undefined\n    ? { ['--powerline-gap' as never]: typeof gap === 'number' ? `${gap}px` : gap }\n    : undefined;\n  return (\n    <span className={cls} style={style} aria-label={rest['aria-label']}>\n      {segments.map((seg, i) => {\n        const leftEdge: EdgeCap = i === 0 ? startCap : (segments[i - 1].endCap ?? 'flat');\n        const rightEdge: EdgeCap = seg.endCap ?? 'flat';\n        return (\n          <Badge\n            key={i}\n            base=\"powerline\"\n            baseParams={{ leftEdge, rightEdge, ...(depth !== undefined && { depth }) }}\n            tone={seg.tone}\n            variant={seg.variant ?? variant}\n            size={seg.size ?? size}\n            onClick={seg.onClick}\n            href={seg.href}\n            aria-label={seg['aria-label']}\n            className={s.segment}\n          >\n            {seg.text}\n          </Badge>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;ACmCA,SAAgB,EAAU,EACxB,aACA,cAAW,QACX,SACA,YACA,UACA,QACA,cACA,GAAG,KACc;AAKjB,QACE,kBAAC,QAAD;EAAM,WALI,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAKjC;EAAY,OAJU,MAAQ,KAAA,IAE7C,KAAA,IADA,EAAG,mBAA6B,OAAO,KAAQ,WAAW,GAAG,EAAI,MAAM,GAAK;EAG1C,cAAY,EAAK;YAClD,EAAS,KAAK,GAAK,MAIhB,kBAAC,GAAD;GAEE,MAAK;GACL,YAAY;IAAE,UANQ,MAAM,IAAI,IAAY,EAAS,IAAI,GAAG,UAAU;IAM9C,WALD,EAAI,UAAU;IAKF,GAAI,MAAU,KAAA,KAAa,EAAE,UAAO;IAAG;GAC1E,MAAM,EAAI;GACV,SAAS,EAAI,WAAW;GACxB,MAAM,EAAI,QAAQ;GAClB,SAAS,EAAI;GACb,MAAM,EAAI;GACV,cAAY,EAAI;GAChB,WAAW,EAAE;aAEZ,EAAI;GACC,EAZD,EAYC,CAEV;EACG,CAAA"}
+{"version":3,"file":"Powerline-Dd9Ukhcl.js","names":[],"sources":["../../src/components/Powerline/Powerline.module.css","../../src/components/Powerline/Powerline.tsx"],"sourcesContent":[".row {\n  display: inline-flex;\n  align-items: stretch;\n  gap: var(--powerline-gap, 0.2em);\n}\n\n.matrix {\n  display: grid;\n  gap: 12px;\n}\n\n/* Reset Badge's opinionated text defaults — Powerline segments should pick up\n * the surrounding text style instead of forcing uppercase / 10px / extra\n * tracking. Consumers can still override via className on Powerline. */\n.segment {\n  font-size: inherit;\n  text-transform: none;\n  letter-spacing: normal;\n}\n","import type { CSSProperties, ReactNode } from 'react';\nimport { Badge } from '../Badge/Badge';\nimport type { BadgeSize, BadgeTone, BadgeVariant } from '../Badge/types';\nimport type { EdgeCap } from '../Badge/bases/edgeProfiles';\nimport s from './Powerline.module.css';\n\n/**\n * One segment of a {@link Powerline}. Giving it `onClick` or `href` makes it\n * interactive, the same way it does on a `Badge`.\n */\nexport interface PowerlineSegment {\n  text: ReactNode;\n  /** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */\n  endCap?: EdgeCap;\n  tone?: BadgeTone;\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  onClick?: () => void;\n  href?: string;\n  'aria-label'?: string;\n}\n\n/** Props for {@link Powerline}. */\nexport interface PowerlineProps {\n  segments: PowerlineSegment[];\n  /** Left edge of the first segment. Defaults to 'flat'. */\n  startCap?: EdgeCap;\n  /** Default size for every segment (per-segment `size` wins). */\n  size?: BadgeSize;\n  /** Default variant for every segment (per-segment `variant` wins). */\n  variant?: BadgeVariant;\n  /** Protrusion depth in CSS px, passed through to every segment's base. */\n  depth?: number;\n  /** Visible gap between adjacent segments. Number → px; string → literal CSS length.\n   *  Default: `0.2em` (scales with the row's font size). Pass `0` for flush. */\n  gap?: number | string;\n  className?: string;\n  'aria-label'?: string;\n}\n\n/**\n * A row of chevron-linked badge segments, in the style of a shell powerline\n * prompt. Each segment's `endCap` shapes both its own right edge and the next\n * segment's left edge, so the run reads as one continuous chain.\n *\n * Built for showing a path through a sequence of steps — the inspector uses\n * it to display how input routes from tool to gesture to action to target.\n */\nexport function Powerline({\n  segments,\n  startCap = 'flat',\n  size,\n  variant,\n  depth,\n  gap,\n  className,\n  ...rest\n}: PowerlineProps) {\n  const cls = [s.row, className].filter(Boolean).join(' ');\n  const style: CSSProperties | undefined = gap !== undefined\n    ? { ['--powerline-gap' as never]: typeof gap === 'number' ? `${gap}px` : gap }\n    : undefined;\n  return (\n    <span className={cls} style={style} aria-label={rest['aria-label']}>\n      {segments.map((seg, i) => {\n        const leftEdge: EdgeCap = i === 0 ? startCap : (segments[i - 1].endCap ?? 'flat');\n        const rightEdge: EdgeCap = seg.endCap ?? 'flat';\n        return (\n          <Badge\n            key={i}\n            base=\"powerline\"\n            baseParams={{ leftEdge, rightEdge, ...(depth !== undefined && { depth }) }}\n            tone={seg.tone}\n            variant={seg.variant ?? variant}\n            size={seg.size ?? size}\n            onClick={seg.onClick}\n            href={seg.href}\n            aria-label={seg['aria-label']}\n            className={s.segment}\n          >\n            {seg.text}\n          </Badge>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;ACgDA,SAAgB,EAAU,EACxB,aACA,cAAW,QACX,SACA,YACA,UACA,QACA,cACA,GAAG,KACc;AAKjB,QACE,kBAAC,QAAD;EAAM,WALI,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAKjC;EAAY,OAJU,MAAQ,KAAA,IAE7C,KAAA,IADA,EAAG,mBAA6B,OAAO,KAAQ,WAAW,GAAG,EAAI,MAAM,GAAK;EAG1C,cAAY,EAAK;YAClD,EAAS,KAAK,GAAK,MAIhB,kBAAC,GAAD;GAEE,MAAK;GACL,YAAY;IAAE,UANQ,MAAM,IAAI,IAAY,EAAS,IAAI,GAAG,UAAU;IAM9C,WALD,EAAI,UAAU;IAKF,GAAI,MAAU,KAAA,KAAa,EAAE,UAAO;IAAG;GAC1E,MAAM,EAAI;GACV,SAAS,EAAI,WAAW;GACxB,MAAM,EAAI,QAAQ;GAClB,SAAS,EAAI;GACb,MAAM,EAAI;GACV,cAAY,EAAI;GAChB,WAAW,EAAE;aAEZ,EAAI;GACC,EAZD,EAYC,CAEV;EACG,CAAA"}

package/dist/chunks/{Prefs-lgI4x4jF.js → Prefs-BMR9wMiZ.js}

@@ -1,13 +1,13 @@
-import { n as e, t } from "./Tooltip-Clgn4trm.js";
+import { n as e, t } from "./Tooltip-DXJbdR5B.js";
 import { t as n } from "./Checkbox-KQ5L8APP.js";
 import { t as r } from "./ColorField-ykpiD3XU.js";
 import { t as i } from "./Input-DpkwYtUY.js";
 import { t as a } from "./NumberField-BbzI0GtU.js";
 import { n as o, t as s } from "./RadioGroup-CIpHr3g6.js";
 import { t as c } from "./RangeSlider-CaDogGTj.js";
-import { t as l } from "./Select-BE3Y1NrH.js";
+import { t as l } from "./Select-CHsuQCp0.js";
 import { t as u } from "./Switch-JyVSSAzC.js";
-import { t as d } from "./Dialog-3FCd_gYi.js";
+import { t as d } from "./Dialog-CqwdJv_t.js";
 import { useMemo as f } from "react";
 import { Focusable as p } from "react-aria-components";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
@@ -235,4 +235,4 @@ function T(e) {
 //#endregion
 export { y as a, v as i, x as n, _ as r, T as t };
 
-//# sourceMappingURL=Prefs-lgI4x4jF.js.map
+//# sourceMappingURL=Prefs-BMR9wMiZ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Prefs-BMR9wMiZ.js","names":[],"sources":["../../src/components/Prefs/schema.ts","../../src/components/Prefs/Prefs.module.css","../../src/components/Prefs/PrefsForm.tsx","../../src/components/Prefs/PrefsDialog.tsx"],"sourcesContent":["// Preference-schema vocabulary for PrefsForm / PrefsDialog.\n//\n// Deliberately field-compatible with core's `ToolPref*` family\n// (src/tools/prefs.ts): this schema module deliberately avoids importing\n// @weasel-js/core, so the contract is structural — a `ToolPrefGroup` (and\n// any host-app superset, like WeaselDraw's registry) assigns into\n// `PrefGroup` with no import and no cast. Keep the two in sync\n// field-for-field.\n\n/** Control-presentation hints per kind — visually-equivalent renderings\n *  of the same value type. The persisted value is unchanged either way. */\nexport type PrefNumberControl = 'input' | 'slider';\n/** Which control renders a {@link PrefBoolean}. */\nexport type PrefBooleanControl = 'checkbox' | 'switch';\n/** Which control renders a {@link PrefString}. */\nexport type PrefStringControl = 'input' | 'textarea';\n/** Which control renders a {@link PrefEnum}. */\nexport type PrefEnumControl = 'select' | 'radio';\n\ninterface PrefBase<K extends string, Value> {\n  kind: K;\n  /** Human-readable label, e.g. \"Show grid\". */\n  name: string;\n  /** Longer help text — surfaces as a tooltip on the row label. */\n  description: string;\n  /** Fallback when `values` holds nothing at this leaf's path. */\n  default: Value;\n  /** Omitted from the form unless `showHidden` is set. */\n  hidden?: boolean;\n  /** Render the control full-width with no label/tooltip row — for\n   *  controls that supply their own chrome (embedded sub-panel editors).\n   *  The `description` still applies wherever the renderer surfaces it. */\n  block?: boolean;\n  /** Row-pairing hint for compact property UIs (`SelectionPanel`):\n   *  leaves sharing a `pair` id render side-by-side on one row labeled\n   *  with the `pair` string. Purely presentational. */\n  pair?: string;\n}\n\n/** Display-unit conversion for number leaves whose stored value uses a\n *  canonical unit the user shouldn't see (radians → degrees). Mirrors\n *  core's `ToolPrefNumberUnit`. */\nexport interface PrefNumberUnit {\n  toDisplay: (stored: number) => number;\n  fromDisplay: (display: number) => number;\n  suffix?: string;\n}\n\n/**\n * A numeric preference. `unit` lets the stored value stay in a canonical unit\n * while the user edits a converted one.\n */\nexport interface PrefNumber extends PrefBase<'number', number> {\n  min?: number;\n  max?: number;\n  step?: number;\n  control?: PrefNumberControl;\n  unit?: PrefNumberUnit;\n}\n/** A boolean preference. */\nexport interface PrefBoolean extends PrefBase<'boolean', boolean> {\n  control?: PrefBooleanControl;\n}\n/** A free-text preference. */\nexport interface PrefString extends PrefBase<'string', string> {\n  control?: PrefStringControl;\n}\n/** A preference chosen from a fixed set of options. */\nexport interface PrefEnum<T extends string = string> extends PrefBase<'enum', T> {\n  options: readonly { value: T; label: string }[];\n  control?: PrefEnumControl;\n}\n\n/** A color preference, stored as a hex string. */\nexport interface PrefColor extends PrefBase<'color', string> {\n  /** Value is `#rrggbb`, or `#rrggbbaa` when `alpha` is set. */\n  alpha?: boolean;\n}\n\n/** The leaf kinds `PrefsForm` renders without a custom renderer. */\nexport type BuiltinPref = PrefNumber | PrefBoolean | PrefString | PrefEnum | PrefColor;\n\n/**\n * Open leaf: any node with a `kind` the form doesn't know renders via the\n * `renderers` map (`renderers[kind]`). App schemas keep their extra fields\n * (e.g. a registry-enum's `source`/`filter`) — renderers receive the node\n * and narrow it themselves. Deliberately NOT index-signatured so concrete\n * app interfaces stay assignable.\n */\nexport interface PrefCustom extends PrefBase<string, unknown> {}\n\n/**\n * Any leaf in a preference schema — a built-in kind, or an app-defined one\n * rendered through `PrefsFormProps.renderers`.\n */\nexport type PrefLeaf = BuiltinPref | PrefCustom;\n\n/** Nestable group: branch nodes in the schema tree. */\nexport interface PrefGroup {\n  name: string;\n  description?: string;\n  children: Record<string, PrefLeaf | PrefGroup>;\n}\n\n/** Distinguishes a leaf from a group while walking a schema tree. */\nexport function isPrefLeaf(node: PrefLeaf | PrefGroup): node is PrefLeaf {\n  return 'kind' in node;\n}\n\n/** Get the value at a dotted path inside a nested value tree. Returns\n *  `undefined` when a segment is missing or hits a non-object. */\nexport function prefValueAtPath(values: unknown, path: string): unknown {\n  let cur: unknown = values;\n  for (const seg of path.split('.')) {\n    if (cur == null || typeof cur !== 'object') return undefined;\n    cur = (cur as Record<string, unknown>)[seg];\n  }\n  return cur;\n}\n\n/**\n * Recursively drop `hidden` leaves (unless `showHidden`), pruning groups\n * that end up empty. Returns null when the entire subtree is hidden.\n */\nexport function visiblePrefSubtree<T extends PrefLeaf | PrefGroup>(\n  node: T,\n  showHidden: boolean,\n): T | null {\n  if (isPrefLeaf(node)) return node.hidden && !showHidden ? null : node;\n  const group = node as PrefGroup;\n  const children: Record<string, PrefLeaf | PrefGroup> = {};\n  for (const [key, child] of Object.entries(group.children)) {\n    const kept = visiblePrefSubtree(child, showHidden);\n    if (kept) children[key] = kept;\n  }\n  if (Object.keys(children).length === 0) return null;\n  return { ...node, children };\n}\n","/* Ported from WeaselDraw's wd-prefs-* rules (apps/draw/src/app.css),\n * generalized onto theme tokens. Column width is overridable via\n * --wzl-prefs-column-width at any ancestor scope. */\n\n.columns {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 12px;\n  overflow-y: auto;\n  padding-right: 4px;\n}\n\n.column {\n  flex: 0 0 var(--wzl-prefs-column-width, 300px);\n  width: var(--wzl-prefs-column-width, 300px);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.panel {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.subpanel {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: 6px;\n  padding: 8px 8px 8px 10px;\n  background: var(--wzl-surface-sunken);\n  border-left: 2px solid var(--wzl-border);\n  border-radius: 2px;\n}\n\n.groupHeader {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.subpanel .groupHeader {\n  border-bottom: none;\n  padding-bottom: 2px;\n}\n\n.groupTitle {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--wzl-fg);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.subpanel .groupTitle {\n  font-size: 11px;\n  text-transform: none;\n  letter-spacing: 0;\n}\n\n.groupDesc {\n  margin: 0;\n  font-size: 11px;\n  color: var(--wzl-fg-subtle);\n  line-height: 1.35;\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--wzl-fg);\n  cursor: default;\n}\n\n.rowLabel {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n/* Description affordance — quiet until hovered/focused. */\n.help {\n  flex: 0 0 auto;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--wzl-fg-subtle);\n  font-size: 11px;\n  line-height: 1;\n  cursor: help;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.help:hover {\n  color: var(--wzl-fg);\n}\n\n.help:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n  color: var(--wzl-fg);\n}\n\n/* Control slot — fixed width so the label can take the rest of the row.\n * Kit form controls render as block-level flex columns that fill it. */\n.rowControl {\n  flex: 0 0 110px;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.textarea {\n  width: 100%;\n  padding: 4px 8px;\n  background: var(--wzl-surface-sunken);\n  color: var(--wzl-fg);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  font: inherit;\n  font-size: 12px;\n  resize: vertical;\n}\n\n.unrenderable {\n  font-family: var(--wzl-font-mono);\n  font-size: 11px;\n  color: var(--wzl-fg-subtle);\n}\n\n/* PrefsDialog header row: title text + optional headerExtra chrome. */\n.titleRow {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.titleRow > span:first-child {\n  flex: 1;\n  min-width: 0;\n}\n","import { useMemo, type ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { Checkbox } from '../Checkbox';\nimport { ColorField } from '../ColorField';\nimport { Input } from '../Input';\nimport { NumberField } from '../NumberField';\nimport { RadioGroup, Radio } from '../RadioGroup';\nimport { RangeSlider } from '../RangeSlider';\nimport { Select } from '../Select';\nimport { Switch } from '../Switch';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport {\n  isPrefLeaf,\n  prefValueAtPath,\n  visiblePrefSubtree,\n  type PrefBoolean,\n  type PrefColor,\n  type PrefEnum,\n  type PrefGroup,\n  type PrefLeaf,\n  type PrefNumber,\n  type PrefString,\n} from './schema';\nimport s from './Prefs.module.css';\n\n/** What a {@link PrefRenderer} is given for the leaf it is rendering. */\nexport interface PrefRenderContext {\n  /** Dotted path of the leaf within the schema root. */\n  path: string;\n  /** The schema node. App renderers narrow this to their own kind shape. */\n  pref: PrefLeaf;\n  /** Current value — `values` at `path`, falling back to `pref.default`. */\n  value: unknown;\n  setValue: (value: unknown) => void;\n}\n\n/**\n * Renders the control cell for one preference leaf. Returning `null`\n * collapses the row.\n */\nexport type PrefRenderer = (ctx: PrefRenderContext) => ReactNode;\n\n/** Props for {@link PrefsForm}. */\nexport interface PrefsFormProps {\n  /** Root of the schema tree. Core `ToolPrefGroup`s assign structurally. */\n  schema: PrefGroup;\n  /** Nested value tree (shape mirrors the schema). Sparse is fine —\n   *  missing leaves fall back to their schema `default`. */\n  values?: unknown;\n  /** Change callback with the leaf's dotted path. Values apply live;\n   *  there is no dirty/commit state. */\n  onChange: (path: string, value: unknown) => void;\n  /**\n   * Per-kind renderers for app-defined kinds. Entries also override the\n   * built-in kinds when keys collide. A renderer owns the control cell\n   * (the label/tooltip row chrome stays with the form, unless the leaf\n   * sets `block`); returning `null` collapses the row entirely. Unknown\n   * kinds with no renderer show a labeled placeholder instead of\n   * crashing.\n   */\n  renderers?: Record<string, PrefRenderer>;\n  /** Reveal `hidden` leaves (dev tooling). Default false. */\n  showHidden?: boolean;\n  className?: string;\n}\n\n/**\n * Schema-driven preferences form. Top-level groups render as columns,\n * nested groups as indented sub-panels, leaves as label + control rows.\n * Storage-agnostic: pair with `PrefsDialog` for the modal composition,\n * and persist however the app likes via `onChange`.\n */\nexport function PrefsForm(props: PrefsFormProps) {\n  const { schema, values, onChange, renderers, showHidden = false, className } = props;\n  const visibleRoot = useMemo(\n    () => visiblePrefSubtree(schema, showHidden),\n    [schema, showHidden],\n  );\n  const ctx: WalkCtx = { values, onChange, renderers };\n  return (\n    <div className={[s.columns, className].filter(Boolean).join(' ')}>\n      {Object.entries(visibleRoot?.children ?? {}).map(([key, child]) => (\n        <div key={key} className={s.column}>\n          {isPrefLeaf(child) ? (\n            // Top-level leaves are unusual but legal — give each its own\n            // column for symmetry with grouped siblings.\n            <PrefRow ctx={ctx} path={key} pref={child} />\n          ) : (\n            <GroupBody ctx={ctx} group={child} path={key} depth={0} />\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n\ninterface WalkCtx {\n  values: unknown;\n  onChange: (path: string, value: unknown) => void;\n  renderers?: Record<string, PrefRenderer>;\n}\n\nfunction GroupBody({ ctx, group, path, depth }: {\n  ctx: WalkCtx;\n  group: PrefGroup;\n  path: string;\n  depth: number;\n}) {\n  return (\n    <div className={depth === 0 ? s.panel : s.subpanel}>\n      <div className={s.groupHeader}>\n        <h3 className={s.groupTitle}>{group.name}</h3>\n        {group.description !== undefined && (\n          <p className={s.groupDesc}>{group.description}</p>\n        )}\n      </div>\n      <div className={s.rows}>\n        {Object.entries(group.children).map(([key, child]) => {\n          const childPath = `${path}.${key}`;\n          return isPrefLeaf(child) ? (\n            <PrefRow key={key} ctx={ctx} path={childPath} pref={child} />\n          ) : (\n            <GroupBody key={key} ctx={ctx} group={child} path={childPath} depth={depth + 1} />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nfunction PrefRow({ ctx, path, pref }: { ctx: WalkCtx; path: string; pref: PrefLeaf }) {\n  const stored = prefValueAtPath(ctx.values, path);\n  const renderCtx: PrefRenderContext = {\n    path,\n    pref,\n    value: stored !== undefined ? stored : pref.default,\n    setValue: (v) => ctx.onChange(path, v),\n  };\n\n  const custom = ctx.renderers?.[pref.kind];\n  const control = custom ? custom(renderCtx) : renderBuiltin(renderCtx);\n  if (custom && control === null) return null;\n\n  // `block` leaves own their chrome (embedded editors with their own\n  // header) — no label/tooltip row.\n  if (pref.block) return <>{control}</>;\n\n  return (\n    <label className={s.row}>\n      <span className={s.rowLabel}>\n        {pref.name}\n        {pref.description ? (\n          // Help affordance carries the description tooltip. A tooltip\n          // trigger must be interactive (keyboard-reachable), so this is\n          // a real button — a bare label span would be neither focusable\n          // nor announced.\n          <TooltipTrigger>\n            <Focusable>\n              <button type=\"button\" className={s.help} aria-label={`About ${pref.name}`}>\n                ⓘ\n              </button>\n            </Focusable>\n            <Tooltip>{pref.description}</Tooltip>\n          </TooltipTrigger>\n        ) : null}\n      </span>\n      <span className={s.rowControl}>{control}</span>\n    </label>\n  );\n}\n\nfunction renderBuiltin(ctx: PrefRenderContext): ReactNode {\n  const { pref, value, setValue } = ctx;\n  switch (pref.kind) {\n    case 'boolean': {\n      const p = pref as PrefBoolean;\n      const checked = Boolean(value);\n      return p.control === 'switch' ? (\n        <Switch isSelected={checked} onChange={setValue} aria-label={p.name} />\n      ) : (\n        <Checkbox isSelected={checked} onChange={setValue} aria-label={p.name} />\n      );\n    }\n    case 'number': {\n      const p = pref as PrefNumber;\n      const n = typeof value === 'number' && Number.isFinite(value) ? value : 0;\n      if (p.control === 'slider') {\n        return (\n          <RangeSlider\n            value={n}\n            onChange={(v) => setValue(typeof v === 'number' ? v : v[0])}\n            minValue={p.min}\n            maxValue={p.max}\n            step={p.step ?? 1}\n            aria-label={p.name}\n          />\n        );\n      }\n      return (\n        <NumberField\n          value={n}\n          onChange={setValue}\n          minValue={p.min}\n          maxValue={p.max}\n          step={p.step ?? 1}\n          aria-label={p.name}\n        />\n      );\n    }\n    case 'string': {\n      const p = pref as PrefString;\n      const text = typeof value === 'string' ? value : '';\n      if (p.control === 'textarea') {\n        return (\n          <textarea\n            className={s.textarea}\n            value={text}\n            onChange={(e) => setValue(e.target.value)}\n            aria-label={p.name}\n            rows={3}\n          />\n        );\n      }\n      return <Input value={text} onChange={setValue} aria-label={p.name} />;\n    }\n    case 'enum': {\n      const p = pref as PrefEnum;\n      const selected = typeof value === 'string' ? value : p.default;\n      if (p.control === 'radio') {\n        return (\n          <RadioGroup\n            value={selected}\n            onChange={(v) => setValue(v)}\n            aria-label={p.name}\n          >\n            {p.options.map((o) => (\n              <Radio key={o.value} value={o.value}>{o.label}</Radio>\n            ))}\n          </RadioGroup>\n        );\n      }\n      return (\n        <Select<string>\n          options={p.options.map((o) => ({ value: o.value, label: o.label }))}\n          selectedKey={selected}\n          onSelectionChange={(v) => setValue(v)}\n          aria-label={p.name}\n        />\n      );\n    }\n    case 'color': {\n      const p = pref as PrefColor;\n      const hex = typeof value === 'string' ? value : p.default;\n      return (\n        <ColorField\n          value={hex}\n          alpha={p.alpha}\n          onChange={setValue}\n          aria-label={p.name}\n        />\n      );\n    }\n    default:\n      // Unknown kind with no renderer 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}\n","import type { ReactNode } from 'react';\nimport { Dialog } from '../Dialog';\nimport { PrefsForm, type PrefsFormProps } from './PrefsForm';\nimport s from './Prefs.module.css';\n\n/**\n * Props for {@link PrefsDialog} — everything {@link PrefsForm} takes, plus\n * the dialog's own open state and chrome.\n */\nexport interface PrefsDialogProps extends PrefsFormProps {\n  isOpen: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Dialog heading. Defaults to the schema root's `name`. */\n  title?: ReactNode;\n  /** Extra chrome rendered inline with the title (e.g. a dev-mode\n   *  \"Show hidden\" switch). */\n  headerExtra?: ReactNode;\n  /** Class applied to the dialog's modal box. */\n  dialogClassName?: string;\n}\n\n/**\n * The kit's preferences dialog: `Dialog` + `PrefsForm`. Changes apply\n * live through `onChange` — there is no OK/Cancel staging. For custom\n * placement (sidebar, popover, inline page), compose `PrefsForm`\n * directly; this wrapper is intentionally thin.\n */\nexport function PrefsDialog(props: PrefsDialogProps) {\n  const { isOpen, onOpenChange, title, headerExtra, dialogClassName, ...form } = props;\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      aria-label={typeof title === 'string' ? title : form.schema.name}\n      className={dialogClassName}\n      title={\n        headerExtra !== undefined ? (\n          <span className={s.titleRow}>\n            <span>{title ?? form.schema.name}</span>\n            {headerExtra}\n          </span>\n        ) : (\n          title ?? form.schema.name\n        )\n      }\n    >\n      <PrefsForm {...form} />\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAyGA,SAAgB,EAAW,GAA8C;AACvE,QAAO,UAAU;;AAKnB,SAAgB,EAAgB,GAAiB,GAAuB;CACtE,IAAI,IAAe;AACnB,MAAK,IAAM,KAAO,EAAK,MAAM,IAAI,EAAE;AACjC,MAAmB,OAAO,KAAQ,aAA9B,EAAwC;AAC5C,MAAO,EAAgC;;AAEzC,QAAO;;AAOT,SAAgB,EACd,GACA,GACU;AACV,KAAI,EAAW,EAAK,CAAE,QAAO,EAAK,UAAU,CAAC,IAAa,OAAO;CACjE,IAAM,IAAQ,GACR,IAAiD,EAAE;AACzD,MAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAM,SAAS,EAAE;EACzD,IAAM,IAAO,EAAmB,GAAO,EAAW;AAClD,EAAI,MAAM,EAAS,KAAO;;AAG5B,QADI,OAAO,KAAK,EAAS,CAAC,WAAW,IAAU,OACxC;EAAE,GAAG;EAAM;EAAU;;;;;;;;;;;;;;;;;;;;;AEhE9B,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EAAE,WAAQ,WAAQ,aAAU,cAAW,gBAAa,IAAO,iBAAc,GACzE,IAAc,QACZ,EAAmB,GAAQ,EAAW,EAC5C,CAAC,GAAQ,EAAW,CACrB,EACK,IAAe;EAAE;EAAQ;EAAU;EAAW;AACpD,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAE,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAC7D,OAAO,QAAQ,GAAa,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,GAAK,OACtD,kBAAC,OAAD;GAAe,WAAW,EAAE;aACzB,EAAW,EAAM,GAGhB,kBAAC,GAAD;IAAc;IAAK,MAAM;IAAK,MAAM;IAAS,CAAA,GAE7C,kBAAC,GAAD;IAAgB;IAAK,OAAO;IAAO,MAAM;IAAK,OAAO;IAAK,CAAA;GAExD,EARI,EAQJ,CACN;EACE,CAAA;;AAUV,SAAS,EAAU,EAAE,QAAK,UAAO,SAAM,YAKpC;AACD,QACE,kBAAC,OAAD;EAAK,WAAW,MAAU,IAAI,EAAE,QAAQ,EAAE;YAA1C,CACE,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACE,kBAAC,MAAD;IAAI,WAAW,EAAE;cAAa,EAAM;IAAU,CAAA,EAC7C,EAAM,gBAAgB,KAAA,KACrB,kBAAC,KAAD;IAAG,WAAW,EAAE;cAAY,EAAM;IAAgB,CAAA,CAEhD;MACN,kBAAC,OAAD;GAAK,WAAW,EAAE;aACf,OAAO,QAAQ,EAAM,SAAS,CAAC,KAAK,CAAC,GAAK,OAAW;IACpD,IAAM,IAAY,GAAG,EAAK,GAAG;AAC7B,WAAO,EAAW,EAAM,GACtB,kBAAC,GAAD;KAAwB;KAAK,MAAM;KAAW,MAAM;KAAS,EAA/C,EAA+C,GAE7D,kBAAC,GAAD;KAA0B;KAAK,OAAO;KAAO,MAAM;KAAW,OAAO,IAAQ;KAAK,EAAlE,EAAkE;KAEpF;GACE,CAAA,CACF;;;AAIV,SAAS,EAAQ,EAAE,QAAK,SAAM,WAAwD;CACpF,IAAM,IAAS,EAAgB,EAAI,QAAQ,EAAK,EAC1C,IAA+B;EACnC;EACA;EACA,OAAO,MAAW,KAAA,IAAqB,EAAK,UAAd;EAC9B,WAAW,MAAM,EAAI,SAAS,GAAM,EAAE;EACvC,EAEK,IAAS,EAAI,YAAY,EAAK,OAC9B,IAAU,IAAS,EAAO,EAAU,GAAG,EAAc,EAAU;AAOrE,QANI,KAAU,MAAY,OAAa,OAInC,EAAK,QAAc,kBAAA,GAAA,EAAA,UAAG,GAAW,CAAA,GAGnC,kBAAC,SAAD;EAAO,WAAW,EAAE;YAApB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAnB,CACG,EAAK,MACL,EAAK,cAKJ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAW,EAAE;IAAM,cAAY,SAAS,EAAK;cAAQ;IAElE,CAAA,EACC,CAAA,EACZ,kBAAC,GAAD,EAAA,UAAU,EAAK,aAAsB,CAAA,CACtB,EAAA,CAAA,GACf,KACC;MACP,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAa;GAAe,CAAA,CACzC;;;AAIZ,SAAS,EAAc,GAAmC;CACxD,IAAM,EAAE,SAAM,UAAO,gBAAa;AAClC,SAAQ,EAAK,MAAb;EACE,KAAK,WAAW;GACd,IAAM,IAAI,GACJ,IAAU,EAAQ;AACxB,UAAO,EAAE,YAAY,WACnB,kBAAC,GAAD;IAAQ,YAAY;IAAS,UAAU;IAAU,cAAY,EAAE;IAAQ,CAAA,GAEvE,kBAAC,GAAD;IAAU,YAAY;IAAS,UAAU;IAAU,cAAY,EAAE;IAAQ,CAAA;;EAG7E,KAAK,UAAU;GACb,IAAM,IAAI,GACJ,IAAI,OAAO,KAAU,YAAY,OAAO,SAAS,EAAM,GAAG,IAAQ;AAaxE,UAZI,EAAE,YAAY,WAEd,kBAAC,GAAD;IACE,OAAO;IACP,WAAW,MAAM,EAAS,OAAO,KAAM,WAAW,IAAI,EAAE,GAAG;IAC3D,UAAU,EAAE;IACZ,UAAU,EAAE;IACZ,MAAM,EAAE,QAAQ;IAChB,cAAY,EAAE;IACd,CAAA,GAIJ,kBAAC,GAAD;IACE,OAAO;IACP,UAAU;IACV,UAAU,EAAE;IACZ,UAAU,EAAE;IACZ,MAAM,EAAE,QAAQ;IAChB,cAAY,EAAE;IACd,CAAA;;EAGN,KAAK,UAAU;GACb,IAAM,IAAI,GACJ,IAAO,OAAO,KAAU,WAAW,IAAQ;AAYjD,UAXI,EAAE,YAAY,aAEd,kBAAC,YAAD;IACE,WAAW,EAAE;IACb,OAAO;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;IACzC,cAAY,EAAE;IACd,MAAM;IACN,CAAA,GAGC,kBAAC,GAAD;IAAO,OAAO;IAAM,UAAU;IAAU,cAAY,EAAE;IAAQ,CAAA;;EAEvE,KAAK,QAAQ;GACX,IAAM,IAAI,GACJ,IAAW,OAAO,KAAU,WAAW,IAAQ,EAAE;AAcvD,UAbI,EAAE,YAAY,UAEd,kBAAC,GAAD;IACE,OAAO;IACP,WAAW,MAAM,EAAS,EAAE;IAC5B,cAAY,EAAE;cAEb,EAAE,QAAQ,KAAK,MACd,kBAAC,GAAD;KAAqB,OAAO,EAAE;eAAQ,EAAE;KAAc,EAA1C,EAAE,MAAwC,CACtD;IACS,CAAA,GAIf,kBAAC,GAAD;IACE,SAAS,EAAE,QAAQ,KAAK,OAAO;KAAE,OAAO,EAAE;KAAO,OAAO,EAAE;KAAO,EAAE;IACnE,aAAa;IACb,oBAAoB,MAAM,EAAS,EAAE;IACrC,cAAY,EAAE;IACd,CAAA;;EAGN,KAAK,SAAS;GACZ,IAAM,IAAI;AAEV,UACE,kBAAC,GAAD;IACE,OAHQ,OAAO,KAAU,WAAW,IAAQ,EAAE;IAI9C,OAAO,EAAE;IACT,UAAU;IACV,cAAY,EAAE;IACd,CAAA;;EAGN,QAGE,QAAO,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAnB;IAAiC;IAAE,EAAK;IAAK;IAAqB;;;;;;AC9O/E,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,WAAQ,iBAAc,UAAO,gBAAa,oBAAiB,GAAG,MAAS;AAC/E,QACE,kBAAC,GAAD;EACU;EACM;EACd,cAAY,OAAO,KAAU,WAAW,IAAQ,EAAK,OAAO;EAC5D,WAAW;EACX,OACE,MAAgB,KAAA,IAMd,KAAS,EAAK,OAAO,OALrB,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAnB,CACE,kBAAC,QAAD,EAAA,UAAO,KAAS,EAAK,OAAO,MAAY,CAAA,EACvC,EACI;;YAMX,kBAAC,GAAD,EAAW,GAAI,GAAQ,CAAA;EAChB,CAAA"}

package/dist/chunks/RadioGroup-CIpHr3g6.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-CIpHr3g6.js","names":[],"sources":["../../src/components/RadioGroup/RadioGroup.module.css","../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.group[data-orientation=\"horizontal\"] {\n  flex-direction: row;\n  gap: 16px;\n}\n\n.legend {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--wzl-fg);\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.radio[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.dot {\n  position: relative;\n  flex: 0 0 auto;\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 50%;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.radio[data-focus-visible] .dot {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.radio[data-hovered]:not([data-disabled]) .dot {\n  border-color: var(--wzl-fg-muted);\n}\n\n.radio[data-selected] .dot {\n  border-color: var(--wzl-accent-strong);\n}\n\n.dot::after {\n  content: '';\n  position: absolute;\n  inset: 3px;\n  border-radius: 50%;\n  background: var(--wzl-accent-strong);\n  transform: scale(0);\n  transition: transform var(--wzl-motion-fast);\n}\n\n.radio[data-selected] .dot::after {\n  transform: scale(1);\n}\n","import type { ReactNode } from 'react';\nimport {\n  RadioGroup as RACRadioGroup,\n  Radio as RACRadio,\n  Label,\n  Text,\n  FieldError,\n  type RadioGroupProps as RACRadioGroupProps,\n  type RadioProps as RACRadioProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './RadioGroup.module.css';\n\nexport type RadioGroupProps = Omit<RACRadioGroupProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  children?: ReactNode;\n  className?: string;\n};\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const { label, description, errorMessage, children, className, ...rest } = props;\n  return (\n    <RACRadioGroup\n      {...rest}\n      className={[s.group, fieldClasses.root, className].filter(Boolean).join(' ')}\n    >\n      {label !== undefined && <Label className={s.legend}>{label}</Label>}\n      {children}\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </RACRadioGroup>\n  );\n}\n\nexport type RadioProps = Omit<RACRadioProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\nexport function Radio({ children, className, ...rest }: RadioProps) {\n  return (\n    <RACRadio {...rest} className={[s.radio, className].filter(Boolean).join(' ')}>\n      <span className={s.dot} />\n      {children !== undefined && <span>{children}</span>}\n    </RACRadio>\n  );\n}\n"],"mappings":";;;;;;;;;;;ACsBA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,gBAAa,iBAAc,aAAU,cAAW,GAAG,MAAS;AAC3E,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAF9E;GAIG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAS;IAAc,CAAA;GAClE;GACA,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACxD;;;AASpB,SAAgB,EAAM,EAAE,aAAU,cAAW,GAAG,KAAoB;AAClE,QACE,kBAAC,GAAD;EAAU,GAAI;EAAM,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7E,CACE,kBAAC,QAAD,EAAM,WAAW,EAAE,KAAO,CAAA,EACzB,MAAa,KAAA,KAAa,kBAAC,QAAD,EAAO,aAAgB,CAAA,CACzC"}
+{"version":3,"file":"RadioGroup-CIpHr3g6.js","names":[],"sources":["../../src/components/RadioGroup/RadioGroup.module.css","../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.group[data-orientation=\"horizontal\"] {\n  flex-direction: row;\n  gap: 16px;\n}\n\n.legend {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--wzl-fg);\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.radio[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.dot {\n  position: relative;\n  flex: 0 0 auto;\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 50%;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.radio[data-focus-visible] .dot {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.radio[data-hovered]:not([data-disabled]) .dot {\n  border-color: var(--wzl-fg-muted);\n}\n\n.radio[data-selected] .dot {\n  border-color: var(--wzl-accent-strong);\n}\n\n.dot::after {\n  content: '';\n  position: absolute;\n  inset: 3px;\n  border-radius: 50%;\n  background: var(--wzl-accent-strong);\n  transform: scale(0);\n  transition: transform var(--wzl-motion-fast);\n}\n\n.radio[data-selected] .dot::after {\n  transform: scale(1);\n}\n","import type { ReactNode } from 'react';\nimport {\n  RadioGroup as RACRadioGroup,\n  Radio as RACRadio,\n  Label,\n  Text,\n  FieldError,\n  type RadioGroupProps as RACRadioGroupProps,\n  type RadioProps as RACRadioProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './RadioGroup.module.css';\n\n/** Props for {@link RadioGroup}, on top of React Aria's `RadioGroup` props. */\nexport type RadioGroupProps = Omit<RACRadioGroupProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * A set of mutually exclusive choices, wrapping React Aria's RadioGroup and\n * supplying the same label / description / errorMessage slots as `Input`.\n * Holds {@link Radio} children.\n */\nexport function RadioGroup(props: RadioGroupProps) {\n  const { label, description, errorMessage, children, className, ...rest } = props;\n  return (\n    <RACRadioGroup\n      {...rest}\n      className={[s.group, fieldClasses.root, className].filter(Boolean).join(' ')}\n    >\n      {label !== undefined && <Label className={s.legend}>{label}</Label>}\n      {children}\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </RACRadioGroup>\n  );\n}\n\n/** Props for {@link Radio}, on top of React Aria's `Radio` props. */\nexport type RadioProps = Omit<RACRadioProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/** One choice in a {@link RadioGroup}. The label is passed as children. */\nexport function Radio({ children, className, ...rest }: RadioProps) {\n  return (\n    <RACRadio {...rest} className={[s.radio, className].filter(Boolean).join(' ')}>\n      <span className={s.dot} />\n      {children !== undefined && <span>{children}</span>}\n    </RACRadio>\n  );\n}\n"],"mappings":";;;;;;;;;;;AC4BA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,gBAAa,iBAAc,aAAU,cAAW,GAAG,MAAS;AAC3E,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAF9E;GAIG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAS;IAAc,CAAA;GAClE;GACA,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACxD;;;AAWpB,SAAgB,EAAM,EAAE,aAAU,cAAW,GAAG,KAAoB;AAClE,QACE,kBAAC,GAAD;EAAU,GAAI;EAAM,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7E,CACE,kBAAC,QAAD,EAAM,WAAW,EAAE,KAAO,CAAA,EACzB,MAAa,KAAA,KAAa,kBAAC,QAAD,EAAO,aAAgB,CAAA,CACzC"}

package/dist/chunks/RangeSlider-CaDogGTj.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider-CaDogGTj.js","names":[],"sources":["../../src/components/RangeSlider/RangeSlider.module.css","../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":[".slider {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 4px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.slider[data-orientation=\"vertical\"] {\n  flex-direction: row;\n  align-items: stretch;\n  width: 28px;\n  height: 160px;\n}\n\n.head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.label {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--wzl-fg);\n}\n\n.output {\n  font-size: 12px;\n  color: var(--wzl-fg-subtle);\n  font-variant-numeric: tabular-nums;\n}\n\n.track {\n  position: relative;\n  height: 6px;\n  min-width: 80px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: 3px;\n}\n\n.slider[data-orientation=\"vertical\"] .track {\n  width: 6px;\n  height: 100%;\n}\n\n.fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background: var(--wzl-accent-strong);\n  border-radius: 3px;\n}\n\n.thumb {\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-fg-muted);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 50%;\n  cursor: ew-resize;\n  outline: none;\n  transition: box-shadow var(--wzl-motion-fast);\n}\n\n.slider[data-orientation=\"vertical\"] .thumb {\n  cursor: ns-resize;\n}\n\n.thumb[data-focus-visible] {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.thumb[data-dragging] {\n  background: var(--wzl-accent-strong);\n}\n\n.slider[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Slider as RACSlider,\n  SliderOutput,\n  SliderTrack,\n  SliderThumb,\n  Label,\n  type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport s from './RangeSlider.module.css';\n\nexport type RangeSliderProps = Omit<RACSliderProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  /** Show the current value next to the label. Defaults to true when a\n   *  label is supplied. */\n  showOutput?: boolean;\n  /** Format the rendered value(s). Useful for units (`v => `${v}%``). */\n  formatOutput?: (v: number | number[]) => ReactNode;\n  className?: string;\n};\n\n/**\n * Linear range slider on React Aria. Single-value by default; pass an array\n * to `value` / `defaultValue` for multi-thumb. Distinct from the kit's\n * canvas-scrub `Slider`, which is shaped for tool-canvas interactions.\n */\nexport function RangeSlider(props: RangeSliderProps) {\n  const { label, showOutput, formatOutput, className, ...rest } = props;\n  const wantOutput = showOutput ?? label !== undefined;\n  return (\n    <RACSlider {...rest} className={[s.slider, className].filter(Boolean).join(' ')}>\n      {(label !== undefined || wantOutput) && (\n        <div className={s.head}>\n          {label !== undefined && <Label className={s.label}>{label}</Label>}\n          {wantOutput && (\n            <SliderOutput className={s.output}>\n              {({ state }) => {\n                const v = state.values.length === 1 ? state.values[0] : state.values;\n                return formatOutput ? formatOutput(v) : Array.isArray(v) ? v.join(' – ') : String(v);\n              }}\n            </SliderOutput>\n          )}\n        </div>\n      )}\n      <SliderTrack className={s.track}>\n        {({ state }) => {\n          // Single-thumb: fill from start to thumb. Multi-thumb: fill\n          // between adjacent thumbs (simplest = between first and last).\n          const fillStart = state.values.length > 1 ? state.getThumbPercent(0) * 100 : 0;\n          const fillEnd = state.getThumbPercent(state.values.length - 1) * 100;\n          return (\n            <>\n              <div\n                className={s.fill}\n                style={{ left: `${fillStart}%`, right: `${100 - fillEnd}%` }}\n              />\n              {state.values.map((_, i) => (\n                <SliderThumb key={i} index={i} className={s.thumb} />\n              ))}\n            </>\n          );\n        }}\n      </SliderTrack>\n    </RACSlider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AC0BA,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,UAAO,eAAY,iBAAc,cAAW,GAAG,MAAS,GAC1D,IAAa,KAAc,MAAU,KAAA;AAC3C,QACE,kBAAC,GAAD;EAAW,GAAI;EAAM,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA/E,EACI,MAAU,KAAA,KAAa,MACvB,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAQ;IAAc,CAAA,EACjE,KACC,kBAAC,GAAD;IAAc,WAAW,EAAE;eACvB,EAAE,eAAY;KACd,IAAM,IAAI,EAAM,OAAO,WAAW,IAAI,EAAM,OAAO,KAAK,EAAM;AAC9D,YAAO,IAAe,EAAa,EAAE,GAAG,MAAM,QAAQ,EAAE,GAAG,EAAE,KAAK,MAAM,GAAG,OAAO,EAAE;;IAEzE,CAAA,CAEb;MAER,kBAAC,GAAD;GAAa,WAAW,EAAE;cACtB,EAAE,eAAY;IAGd,IAAM,IAAY,EAAM,OAAO,SAAS,IAAI,EAAM,gBAAgB,EAAE,GAAG,MAAM,GACvE,IAAU,EAAM,gBAAgB,EAAM,OAAO,SAAS,EAAE,GAAG;AACjE,WACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;KACE,WAAW,EAAE;KACb,OAAO;MAAE,MAAM,GAAG,EAAU;MAAI,OAAO,GAAG,MAAM,EAAQ;MAAI;KAC5D,CAAA,EACD,EAAM,OAAO,KAAK,GAAG,MACpB,kBAAC,GAAD;KAAqB,OAAO;KAAG,WAAW,EAAE;KAAS,EAAnC,EAAmC,CACrD,CACD,EAAA,CAAA;;GAGK,CAAA,CACJ"}
+{"version":3,"file":"RangeSlider-CaDogGTj.js","names":[],"sources":["../../src/components/RangeSlider/RangeSlider.module.css","../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":[".slider {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 4px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.slider[data-orientation=\"vertical\"] {\n  flex-direction: row;\n  align-items: stretch;\n  width: 28px;\n  height: 160px;\n}\n\n.head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.label {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--wzl-fg);\n}\n\n.output {\n  font-size: 12px;\n  color: var(--wzl-fg-subtle);\n  font-variant-numeric: tabular-nums;\n}\n\n.track {\n  position: relative;\n  height: 6px;\n  min-width: 80px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: 3px;\n}\n\n.slider[data-orientation=\"vertical\"] .track {\n  width: 6px;\n  height: 100%;\n}\n\n.fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background: var(--wzl-accent-strong);\n  border-radius: 3px;\n}\n\n.thumb {\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-fg-muted);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 50%;\n  cursor: ew-resize;\n  outline: none;\n  transition: box-shadow var(--wzl-motion-fast);\n}\n\n.slider[data-orientation=\"vertical\"] .thumb {\n  cursor: ns-resize;\n}\n\n.thumb[data-focus-visible] {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.thumb[data-dragging] {\n  background: var(--wzl-accent-strong);\n}\n\n.slider[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Slider as RACSlider,\n  SliderOutput,\n  SliderTrack,\n  SliderThumb,\n  Label,\n  type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport s from './RangeSlider.module.css';\n\n/** Props for {@link RangeSlider}, on top of React Aria's `Slider` props. */\nexport type RangeSliderProps = Omit<RACSliderProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  /** Show the current value next to the label. Defaults to true when a\n   *  label is supplied. */\n  showOutput?: boolean;\n  /** Format the rendered value(s). Useful for units (`v => `${v}%``). */\n  formatOutput?: (v: number | number[]) => ReactNode;\n  className?: string;\n};\n\n/**\n * Linear range slider on React Aria. Single-value by default; pass an array\n * to `value` / `defaultValue` for multi-thumb. Distinct from the kit's\n * canvas-scrub `Slider`, which is shaped for tool-canvas interactions.\n */\nexport function RangeSlider(props: RangeSliderProps) {\n  const { label, showOutput, formatOutput, className, ...rest } = props;\n  const wantOutput = showOutput ?? label !== undefined;\n  return (\n    <RACSlider {...rest} className={[s.slider, className].filter(Boolean).join(' ')}>\n      {(label !== undefined || wantOutput) && (\n        <div className={s.head}>\n          {label !== undefined && <Label className={s.label}>{label}</Label>}\n          {wantOutput && (\n            <SliderOutput className={s.output}>\n              {({ state }) => {\n                const v = state.values.length === 1 ? state.values[0] : state.values;\n                return formatOutput ? formatOutput(v) : Array.isArray(v) ? v.join(' – ') : String(v);\n              }}\n            </SliderOutput>\n          )}\n        </div>\n      )}\n      <SliderTrack className={s.track}>\n        {({ state }) => {\n          // Single-thumb: fill from start to thumb. Multi-thumb: fill\n          // between adjacent thumbs (simplest = between first and last).\n          const fillStart = state.values.length > 1 ? state.getThumbPercent(0) * 100 : 0;\n          const fillEnd = state.getThumbPercent(state.values.length - 1) * 100;\n          return (\n            <>\n              <div\n                className={s.fill}\n                style={{ left: `${fillStart}%`, right: `${100 - fillEnd}%` }}\n              />\n              {state.values.map((_, i) => (\n                <SliderThumb key={i} index={i} className={s.thumb} />\n              ))}\n            </>\n          );\n        }}\n      </SliderTrack>\n    </RACSlider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AC2BA,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,UAAO,eAAY,iBAAc,cAAW,GAAG,MAAS,GAC1D,IAAa,KAAc,MAAU,KAAA;AAC3C,QACE,kBAAC,GAAD;EAAW,GAAI;EAAM,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA/E,EACI,MAAU,KAAA,KAAa,MACvB,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAQ;IAAc,CAAA,EACjE,KACC,kBAAC,GAAD;IAAc,WAAW,EAAE;eACvB,EAAE,eAAY;KACd,IAAM,IAAI,EAAM,OAAO,WAAW,IAAI,EAAM,OAAO,KAAK,EAAM;AAC9D,YAAO,IAAe,EAAa,EAAE,GAAG,MAAM,QAAQ,EAAE,GAAG,EAAE,KAAK,MAAM,GAAG,OAAO,EAAE;;IAEzE,CAAA,CAEb;MAER,kBAAC,GAAD;GAAa,WAAW,EAAE;cACtB,EAAE,eAAY;IAGd,IAAM,IAAY,EAAM,OAAO,SAAS,IAAI,EAAM,gBAAgB,EAAE,GAAG,MAAM,GACvE,IAAU,EAAM,gBAAgB,EAAM,OAAO,SAAS,EAAE,GAAG;AACjE,WACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;KACE,WAAW,EAAE;KACb,OAAO;MAAE,MAAM,GAAG,EAAU;MAAI,OAAO,GAAG,MAAM,EAAQ;MAAI;KAC5D,CAAA,EACD,EAAM,OAAO,KAAK,GAAG,MACpB,kBAAC,GAAD;KAAqB,OAAO;KAAG,WAAW,EAAE;KAAS,EAAnC,EAAmC,CACrD,CACD,EAAA,CAAA;;GAGK,CAAA,CACJ"}

package/dist/chunks/{ResizeHandle-CCQ2y87y.js → ResizeHandle-BOpmtOOj.js}

@@ -9,7 +9,7 @@ function a(e, t, n, r) {
 	return i(Number.isInteger(r) ? a : Number(a.toFixed(10)), t, n);
 }
 function o(i) {
-	let { orientation: o = "vertical", value: s, min: c, max: l, invert: u, onChange: d, onChangeEnd: f, step: p = 1, ariaLabel: m, className: h } = i, g = t(null), _ = e((e) => o === "vertical" ? e.clientX : e.clientY, [o]), v = e((e) => {
+	let { orientation: o = "vertical", value: s, min: c, max: l, invert: u, onInput: d, onChange: f, step: p = 1, ariaLabel: m, className: h } = i, g = t(null), _ = e((e) => o === "vertical" ? e.clientX : e.clientY, [o]), v = e((e) => {
 		e.button === 0 && (g.current = {
 			origin: _(e),
 			startValue: s
@@ -78,4 +78,4 @@ function o(i) {
 //#endregion
 export { o as t };
 
-//# sourceMappingURL=ResizeHandle-CCQ2y87y.js.map
+//# sourceMappingURL=ResizeHandle-BOpmtOOj.js.map

package/dist/chunks/ResizeHandle-BOpmtOOj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle-BOpmtOOj.js","names":[],"sources":["../../src/components/ResizeHandle/ResizeHandle.module.css","../../src/components/ResizeHandle/ResizeHandle.tsx"],"sourcesContent":[".handle {\n  flex-shrink: 0;\n  width: 4px;\n  align-self: stretch;\n  cursor: ew-resize;\n  background: transparent;\n  border-left: 1px solid var(--wzl-border);\n  /* The bar is 4px of hit area — thin enough to read as a seam, wide\n     enough to grab. `touch-action: none` keeps a touch drag from being\n     stolen by the scroll container it usually sits inside. */\n  touch-action: none;\n}\n\n.handle.horizontal {\n  width: auto;\n  height: 4px;\n  align-self: auto;\n  cursor: ns-resize;\n  border-left: none;\n  border-top: 1px solid var(--wzl-border);\n}\n\n.handle:hover {\n  background: var(--wzl-border);\n}\n\n.handle:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring, var(--wzl-accent));\n  outline-offset: -1px;\n}\n","import { useCallback, useRef, type KeyboardEvent, type PointerEvent } from 'react';\nimport s from './ResizeHandle.module.css';\n\n/**\n * Props for {@link ResizeHandle}. `onInput` fires throughout the drag and\n * `onChange` once at the end.\n */\nexport interface ResizeHandleProps {\n  /**\n   * Which way the handle *runs*, matching `aria-orientation` on the\n   * separator role: a `vertical` handle is a vertical bar between two\n   * side-by-side panes and drags horizontally. `horizontal` is the\n   * stacked case (a bar between rows, dragged up and down).\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /** Current size of the pane being resized, in pixels. */\n  value: number;\n  min: number;\n  max: number;\n  /**\n   * Flip the sign of the drag. Panes docked to the *trailing* edge (a\n   * right sidebar, a bottom drawer) grow as the pointer moves toward the\n   * start of the axis, so they want `invert`. Leading-edge panes don't.\n   */\n  invert?: boolean;\n  /**\n   * Fires continuously while dragging and on each keyboard step, always\n   * clamped to [min, max]. Drive the live size from this.\n   */\n  onInput(next: number): void;\n  /**\n   * Fires once when a drag ends or a keyboard step settles, with the final\n   * size. Persist here rather than in `onInput` — one write per gesture\n   * instead of one per pointer sample.\n   */\n  onChange?(next: number): void;\n  /**\n   * The granularity of `value`. Arrow keys move by one step (Shift by\n   * eight), and pointer drags snap to the same grid — a pointer reports\n   * fractional coordinates on a scaled display, and nobody wants\n   * `362.9453125` in their persisted layout. Set a fractional step for a\n   * pane measured in something finer than whole pixels.\n   */\n  step?: number;\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst clamp = (n: number, min: number, max: number): number => Math.min(max, Math.max(min, n));\n\n/**\n * Snap to the step grid, then clamp. Bounds win over the grid: `min`/`max`\n * are hard limits, so a range that isn't a whole number of steps clips to\n * the bound rather than overshooting it.\n */\nfunction settle(n: number, min: number, max: number, step: number): number {\n  const snapped = step > 0 ? Math.round(n / step) * step : n;\n  // Re-round to kill the float dust `x / 0.1 * 0.1` leaves behind.\n  const precise = Number.isInteger(step) ? snapped : Number(snapped.toFixed(10));\n  return clamp(precise, min, max);\n}\n\n/**\n * Draggable divider for resizing a pane — the \"window splitter\" pattern.\n * Owns no size of its own: the consumer holds `value` and applies it\n * (typically as a CSS custom property on the pane), which keeps the handle\n * usable for flex, grid, and absolutely-positioned layouts alike.\n *\n * Keyboard-operable as a matter of course: it's focusable, arrows step by\n * `step` (Shift for a coarse step), Home/End jump to the bounds. A splitter\n * that only responds to a pointer drag strands anyone who can't make one.\n */\nexport function ResizeHandle(props: ResizeHandleProps) {\n  const {\n    orientation = 'vertical', value, min, max, invert, onInput, onChange,\n    step = 1, ariaLabel, className,\n  } = props;\n\n  // Drag origin. Captured on pointerdown so every move is measured against\n  // the gesture's start rather than the previous sample — accumulating\n  // per-sample deltas drifts once the pointer leaves the clamped range.\n  const drag = useRef<{ origin: number; startValue: number } | null>(null);\n\n  const axisOf = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => (orientation === 'vertical' ? e.clientX : e.clientY),\n    [orientation],\n  );\n\n  const onPointerDown = useCallback((e: PointerEvent<HTMLDivElement>) => {\n    if (e.button !== 0) return;\n    drag.current = { origin: axisOf(e), startValue: value };\n    // jsdom has no pointer capture; the guard keeps tests on the real path.\n    e.currentTarget.setPointerCapture?.(e.pointerId);\n    e.preventDefault();\n  }, [axisOf, value]);\n\n  const onPointerMove = useCallback((e: PointerEvent<HTMLDivElement>) => {\n    const d = drag.current;\n    if (!d) return;\n    const delta = axisOf(e) - d.origin;\n    onInput(settle(d.startValue + (invert ? -delta : delta), min, max, step));\n  }, [axisOf, invert, max, min, onInput, step]);\n\n  const endDrag = useCallback((e: PointerEvent<HTMLDivElement>) => {\n    const d = drag.current;\n    if (!d) return;\n    drag.current = null;\n    e.currentTarget.releasePointerCapture?.(e.pointerId);\n    const delta = axisOf(e) - d.origin;\n    onChange?.(settle(d.startValue + (invert ? -delta : delta), min, max, step));\n  }, [axisOf, invert, max, min, onChange, step]);\n\n  const onKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {\n    const grow = orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown';\n    const shrink = orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp';\n    const amount = step * (e.shiftKey ? 8 : 1) * (invert ? -1 : 1);\n    let next: number | undefined;\n    if (e.key === grow) next = value + amount;\n    else if (e.key === shrink) next = value - amount;\n    else if (e.key === 'Home') next = invert ? max : min;\n    else if (e.key === 'End') next = invert ? min : max;\n    if (next === undefined) return;\n    e.preventDefault();\n    const settled = settle(next, min, max, step);\n    onInput(settled);\n    onChange?.(settled);\n  }, [invert, max, min, onInput, onChange, orientation, step, value]);\n\n  const cls = [s.handle, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n\n  return (\n    <div\n      className={cls}\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={ariaLabel}\n      aria-orientation={orientation}\n      aria-valuenow={value}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={endDrag}\n      onPointerCancel={endDrag}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n"],"mappings":";;;;;GCgDM,KAAS,GAAW,GAAa,MAAwB,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAE,CAAC;AAO9F,SAAS,EAAO,GAAW,GAAa,GAAa,GAAsB;CACzE,IAAM,IAAU,IAAO,IAAI,KAAK,MAAM,IAAI,EAAK,GAAG,IAAO;AAGzD,QAAO,EADS,OAAO,UAAU,EAAK,GAAG,IAAU,OAAO,EAAQ,QAAQ,GAAG,CAAC,EACxD,GAAK,EAAI;;AAajC,SAAgB,EAAa,GAA0B;CACrD,IAAM,EACJ,iBAAc,YAAY,UAAO,QAAK,QAAK,WAAQ,YAAS,aAC5D,UAAO,GAAG,cAAW,iBACnB,GAKE,IAAO,EAAsD,KAAK,EAElE,IAAS,GACZ,MAAqC,MAAgB,aAAa,EAAE,UAAU,EAAE,SACjF,CAAC,EAAY,CACd,EAEK,IAAgB,GAAa,MAAoC;AACjE,IAAE,WAAW,MACjB,EAAK,UAAU;GAAE,QAAQ,EAAO,EAAE;GAAE,YAAY;GAAO,EAEvD,EAAE,cAAc,oBAAoB,EAAE,UAAU,EAChD,EAAE,gBAAgB;IACjB,CAAC,GAAQ,EAAM,CAAC,EAEb,IAAgB,GAAa,MAAoC;EACrE,IAAM,IAAI,EAAK;AACf,MAAI,CAAC,EAAG;EACR,IAAM,IAAQ,EAAO,EAAE,GAAG,EAAE;AAC5B,IAAQ,EAAO,EAAE,cAAc,IAAS,CAAC,IAAQ,IAAQ,GAAK,GAAK,EAAK,CAAC;IACxE;EAAC;EAAQ;EAAQ;EAAK;EAAK;EAAS;EAAK,CAAC,EAEvC,IAAU,GAAa,MAAoC;EAC/D,IAAM,IAAI,EAAK;AACf,MAAI,CAAC,EAAG;AAER,EADA,EAAK,UAAU,MACf,EAAE,cAAc,wBAAwB,EAAE,UAAU;EACpD,IAAM,IAAQ,EAAO,EAAE,GAAG,EAAE;AAC5B,MAAW,EAAO,EAAE,cAAc,IAAS,CAAC,IAAQ,IAAQ,GAAK,GAAK,EAAK,CAAC;IAC3E;EAAC;EAAQ;EAAQ;EAAK;EAAK;EAAU;EAAK,CAAC,EAExC,IAAY,GAAa,MAAqC;EAClE,IAAM,IAAO,MAAgB,aAAa,eAAe,aACnD,IAAS,MAAgB,aAAa,cAAc,WACpD,IAAS,KAAQ,EAAE,WAAW,IAAI,MAAM,IAAS,KAAK,IACxD;AAKJ,MAJI,EAAE,QAAQ,IAAM,IAAO,IAAQ,IAC1B,EAAE,QAAQ,IAAQ,IAAO,IAAQ,IACjC,EAAE,QAAQ,SAAQ,IAAO,IAAS,IAAM,IACxC,EAAE,QAAQ,UAAO,IAAO,IAAS,IAAM,IAC5C,MAAS,KAAA,EAAW;AACxB,IAAE,gBAAgB;EAClB,IAAM,IAAU,EAAO,GAAM,GAAK,GAAK,EAAK;AAE5C,EADA,EAAQ,EAAQ,EAChB,IAAW,EAAQ;IAClB;EAAC;EAAQ;EAAK;EAAK;EAAS;EAAU;EAAa;EAAM;EAAM,CAAC;AAKnE,QACE,kBAAC,OAAD;EACE,WALQ;GAAC,EAAE;GAAQ,MAAgB,gBAAgB,EAAE;GAAY;GAAU,CAC5E,OAAO,QAAQ,CAAC,KAAK,IAIT;EACX,MAAK;EACL,UAAU;EACV,cAAY;EACZ,oBAAkB;EAClB,iBAAe;EACf,iBAAe;EACf,iBAAe;EACA;EACA;EACf,aAAa;EACb,iBAAiB;EACN;EACX,CAAA"}

package/dist/chunks/{Select-BE3Y1NrH.js → Select-CHsuQCp0.js}

@@ -17,7 +17,7 @@ function p(a) {
 	let { label: p, description: m, errorMessage: g, placeholder: _, options: v, children: y, selectedKey: b, defaultSelectedKey: x, onSelectionChange: S, className: C, ...w } = a;
 	return /* @__PURE__ */ d(s, {
 		...w,
-		selectedKey: b ?? void 0,
+		selectedKey: b,
 		defaultSelectedKey: x,
 		onSelectionChange: S ? (e) => S(e) : void 0,
 		className: [
@@ -100,4 +100,4 @@ function h({ children: e, className: t, textValue: n, ...r }) {
 //#endregion
 export { h as n, p as t };
 
-//# sourceMappingURL=Select-BE3Y1NrH.js.map
+//# sourceMappingURL=Select-CHsuQCp0.js.map

package/dist/chunks/Select-CHsuQCp0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-CHsuQCp0.js","names":[],"sources":["../../src/components/Select/Select.module.css","../../src/components/Select/Select.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.trigger {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: 6px;\n  height: 24px;\n  padding: 0 6px 0 10px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: 13px;\n  line-height: 1;\n  cursor: pointer;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.trigger[data-focus-visible] {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .trigger {\n  border-color: var(--wzl-danger, #ff5b5b);\n}\n\n.trigger[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.value {\n  flex: 1;\n  min-width: 0;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value[data-placeholder] {\n  color: var(--wzl-fg-subtle);\n}\n\n.chevron {\n  width: 10px;\n  height: 10px;\n  color: var(--wzl-fg-muted);\n  flex: 0 0 auto;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  max-height: inherit;\n  outline: none;\n}\n\n.listbox {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n  padding: 4px;\n  max-height: 280px;\n  overflow: auto;\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: 13px;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px;\n  border-radius: 3px;\n  cursor: pointer;\n  color: var(--wzl-fg);\n  outline: none;\n}\n\n.option[data-focused] {\n  background: color-mix(in srgb, var(--wzl-fg) 10%, transparent);\n}\n\n.option[data-selected] {\n  color: var(--wzl-fg);\n  font-weight: 500;\n}\n\n.option[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.check {\n  width: 10px;\n  height: 10px;\n  flex: 0 0 auto;\n  opacity: 0;\n}\n\n.option[data-selected] .check {\n  opacity: 1;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Select as RACSelect,\n  Label,\n  Button as RACButton,\n  SelectValue,\n  Popover as RACPopover,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Text,\n  FieldError,\n  type SelectProps as RACSelectProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './Select.module.css';\n\n/** One option in a {@link Select}'s `options` list. */\nexport type SelectOption = {\n  value: string;\n  label: ReactNode;\n  isDisabled?: boolean;\n  /**\n   * Plain-text form of `label`, for type-to-select and screen readers.\n   * Only needed when `label` isn't a bare string — a label built from\n   * elements has no text React Aria can read off it. A string label\n   * supplies this itself.\n   */\n  textValue?: string;\n};\n\ntype Key = string | number;\n\n/**\n * Props for {@link Select}, on top of React Aria's `Select` props, with the\n * selection key narrowed to the option value type.\n */\nexport type SelectProps<T extends Key = string> = Omit<RACSelectProps<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  /** Either pass `options` for a quick render, or `children` for full control. */\n  options?: ReadonlyArray<SelectOption & { value: T }>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T) => void;\n  className?: string;\n};\n\n/**\n * Form select wrapping React Aria's Select. Pass either `options` for a\n * quick declarative render or `children` of `<SelectItem>` for control over\n * each row.\n *\n * The selection key type is parameterized so consumers with a string-literal\n * union for `value` (e.g. `'r' | 'g' | 'b'`) get a typed `onSelectionChange`.\n */\nexport function Select<T extends Key = string>(props: SelectProps<T>) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    className,\n    ...rest\n  } = props;\n\n  return (\n    <RACSelect\n      {...rest}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={onSelectionChange ? (k) => onSelectionChange(k as T) : undefined}\n      className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}\n    >\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <RACButton className={s.trigger}>\n        <SelectValue className={s.value}>\n          {({ defaultChildren, isPlaceholder }) =>\n            isPlaceholder ? (placeholder ?? defaultChildren) : defaultChildren\n          }\n        </SelectValue>\n        <svg className={s.chevron} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n          <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </RACButton>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n      {/* `data-weasel-overlay` marks DOM that belongs to this control but\n          renders in a portal, outside the subtree the trigger sits in. Any\n          consumer reasoning about \"did focus leave my component?\" via\n          `closest()` gets the wrong answer without it — a text editor whose\n          font menu lives here would end its session the moment the menu is\n          clicked. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\">\n        <RACListBox className={s.listbox}>\n          {options !== undefined\n            ? options.map((o) => (\n                <SelectItem\n                  key={String(o.value)}\n                  id={o.value}\n                  isDisabled={o.isDisabled}\n                  textValue={o.textValue}\n                >\n                  {o.label}\n                </SelectItem>\n              ))\n            : children}\n        </RACListBox>\n      </RACPopover>\n    </RACSelect>\n  );\n}\n\n/** Props for {@link SelectItem}, on top of React Aria's `ListBoxItem` props. */\nexport type SelectItemProps = Omit<RACListBoxItemProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Every row renders a check mark beside its label, so from React Aria's\n * side the children are never plain text and it can't derive the string\n * type-to-select and screen readers need — it warns once per row. A string\n * label already *is* that string, so derive it rather than making every\n * call site restate it; anything richer has to say what it reads as.\n */\nfunction textValueOf(children: ReactNode, explicit: string | undefined): string | undefined {\n  if (explicit !== undefined) return explicit;\n  return typeof children === 'string' || typeof children === 'number'\n    ? String(children)\n    : undefined;\n}\n\n/**\n * One row in a {@link Select}'s list, with a leading check mark when\n * selected. A string child supplies its own `textValue`; anything richer must\n * pass one so type-to-select and screen readers have something to read.\n */\nexport function SelectItem({ children, className, textValue, ...rest }: SelectItemProps) {\n  return (\n    <RACListBoxItem\n      {...rest}\n      textValue={textValueOf(children, textValue)}\n      className={[s.option, className].filter(Boolean).join(' ')}\n    >\n      <svg className={s.check} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <polyline points=\"1.5,5 4,7.5 8.5,3\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n      {children}\n    </RACListBoxItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AC4DA,SAAgB,EAA+B,GAAuB;CACpE,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,YACA,aACA,gBACA,uBACA,sBACA,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EACE,GAAI;EACS;EACO;EACpB,mBAAmB,KAAqB,MAAM,EAAkB,EAAO,GAAG,KAAA;EAC1E,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAL9E;GAOG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,GAAD;IAAW,WAAW,EAAE;cAAxB,CACE,kBAAC,GAAD;KAAa,WAAW,EAAE;gBACtB,EAAE,oBAAiB,uBACnB,IAAiB,KAAe,IAAmB;KAEzC,CAAA,EACd,kBAAC,OAAD;KAAK,WAAW,EAAE;KAAS,SAAQ;KAAY,eAAY;eACzD,kBAAC,QAAD;MAAM,GAAE;MAAiB,MAAK;MAAO,QAAO;MAAe,aAAY;MAAM,eAAc;MAAQ,gBAAe;MAAU,CAAA;KACxH,CAAA,CACI;;GACX,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GAOtE,kBAAC,GAAD;IAAY,WAAW,EAAE;IAAS,uBAAoB;cACpD,kBAAC,GAAD;KAAY,WAAW,EAAE;eACtB,MAAY,KAAA,IAWT,IAVA,EAAQ,KAAK,MACX,kBAAC,GAAD;MAEE,IAAI,EAAE;MACN,YAAY,EAAE;MACd,WAAW,EAAE;gBAEZ,EAAE;MACQ,EANN,OAAO,EAAE,MAAM,CAMT,CACb;KAEK,CAAA;IACF,CAAA;GACH;;;AAiBhB,SAAS,EAAY,GAAqB,GAAkD;AAE1F,QADI,MAAa,KAAA,IACV,OAAO,KAAa,YAAY,OAAO,KAAa,WACvD,OAAO,EAAS,GAChB,KAAA,IAH+B;;AAWrC,SAAgB,EAAW,EAAE,aAAU,cAAW,cAAW,GAAG,KAAyB;AACvF,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW,EAAY,GAAU,EAAU;EAC3C,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAH5D,CAKE,kBAAC,OAAD;GAAK,WAAW,EAAE;GAAO,SAAQ;GAAY,eAAY;aACvD,kBAAC,YAAD;IAAU,QAAO;IAAoB,MAAK;IAAO,QAAO;IAAe,aAAY;IAAM,eAAc;IAAQ,gBAAe;IAAU,CAAA;GACpI,CAAA,EACL,EACc"}

package/dist/chunks/{SelectionPanel-Zaw8tYQH.js → SelectionPanel-D_wk_8ZN.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./ColorField-ykpiD3XU.js";
 import { t } from "./Input-DpkwYtUY.js";
 import { t as n } from "./NumberField-BbzI0GtU.js";
-import { t as r } from "./Select-BE3Y1NrH.js";
+import { t as r } from "./Select-CHsuQCp0.js";
 import { t as i } from "./Switch-JyVSSAzC.js";
 import { Fragment as a, useState as o, useSyncExternalStore as s } from "react";
 import { MIXED as c, asNodeId as l } from "@weasel-js/core";
@@ -300,4 +300,4 @@ function O({ text: e, placeholder: n, ariaLabel: r, onCommit: i }) {
 //#endregion
 export { _ as a, y as c, p as i, c as n, x as o, b as r, v as s, w as t };
 
-//# sourceMappingURL=SelectionPanel-Zaw8tYQH.js.map
+//# sourceMappingURL=SelectionPanel-D_wk_8ZN.js.map