@weasel-js/ui 1.6.0 → 1.6.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"Keycaps-C0H_v2gO.js","names":["s","s","Fragment","Fragment$1","Keycaps_module_default","MOD_BY_PLATFORM","MODIFIER_LABELS","byPlatform","byLegend","detectPlatform","raw","keySpecsFromMods","platform","opts","legend","mods","label","m","NAMED_KEY","keySpecFromKey","entry","WIDE_GLYPHS","inferKeycapKind","KeyCap","resolvedStyle","font","style","className","variant","inverted","KeySequence","keys","ordered","a","b","k","sepIdx","showSep","separator","i","keySpecsFromShortcut","shortcut","key"],"sources":["../../src/components/Keycaps/Keycaps.module.css","../../src/components/Keycaps/keySpecsFromMods.ts","../../src/components/Keycaps/Keycap.tsx","../../src/components/Keycaps/Keycaps.tsx","../../src/components/Keycaps/keySpecsFromShortcut.ts"],"sourcesContent":["/* Keystroke \"key cap\" styling — each modifier and key in its own bordered chip. */\n.keys,\n.key {\n  --key-h: var(--wzl-control-h-xs);\n}\n\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  /* A key's height, so the glyph centers on the keys rather than riding the\n     row's bottom edge. */\n  display: inline-flex;\n  align-items: center;\n  height: var(--key-h);\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-sm);\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: var(--key-h);\n  padding: 0 var(--wzl-space-2);\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: var(--wzl-radius-sm);\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: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\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: var(--key-h);\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 var(--wzl-space-3);\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 var(--wzl-space-4);\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 { 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/** Every label {@link keySpecsFromMods} can produce, on any platform and legend. */\nexport const MODIFIER_LABELS: ReadonlySet<string> = new Set(\n  Object.values(MOD_BY_PLATFORM).flatMap((byPlatform) =>\n    Object.values(byPlatform).flatMap((byLegend) => Object.values(byLegend)),\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","import type { CSSProperties } from 'react';\nimport s from './Keycaps.module.css';\nimport { MODIFIER_LABELS } from './keySpecsFromMods';\n\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 (label === '⇪' || MODIFIER_LABELS.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 { ShortcutInput } from '../ToolPalette/formatShortcut';\nimport type { KeySpec } from './Keycaps';\nimport { keySpecFromKey, keySpecsFromMods, type KeySpecsFromModsOptions, type LogicalModSpec } from './keySpecsFromMods';\n\n/**\n * A shortcut as `KeySequence` keys, one per key: mod, shift, alt, then the\n * key, each in the platform's own legend (`⌘` on macOS, `Ctrl` elsewhere).\n * The `KeySpec` counterpart of `formatShortcutParts`, which always prints\n * macOS glyphs. `shift: 'optional'` becomes an optional key; a key list\n * renders its first key. Returns `undefined` for no shortcut.\n *\n * ```tsx\n * <KeySequence keys={keySpecsFromShortcut({ key: 'z', mod: true, shift: true })} />\n * ```\n */\nexport function keySpecsFromShortcut(\n  shortcut: ShortcutInput | undefined,\n  opts: KeySpecsFromModsOptions = {},\n): readonly KeySpec[] | undefined {\n  if (!shortcut) return undefined;\n  const mods: LogicalModSpec[] = [];\n  if (shortcut.mod) mods.push({ name: 'mod' });\n  if (shortcut.shift) mods.push(shortcut.shift === 'optional' ? { name: 'shift', optional: true } : { name: 'shift' });\n  if (shortcut.alt) mods.push({ name: 'alt' });\n  const key = typeof shortcut.key === 'string' ? shortcut.key : shortcut.key[0];\n  const keys = keySpecsFromMods(mods, opts);\n  return key === undefined ? keys : [...keys, keySpecFromKey(key, opts)];\n}\n"],"mappings":"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"}

package/dist/chunks/{LayerList-BeGrkLb9.js → LayerList-nz-QYvTF.js}

@@ -1,13 +1,13 @@
-import { t as e } from "./dlog-CMYiRF3Q.js";
-import { J as t, h as n } from "./icons-DbScMMqX.js";
-import { t as r } from "./Button-Dyp31jMt.js";
-import { t as i } from "./useReorderDragList-Dcezzgix.js";
-import { t as a } from "./Disclosure-D79jhmh2.js";
-import { t as o } from "./DragGhost-DcU7cOwy.js";
-import { t as s } from "./DragHandleGlyph-BtBxHjZS.js";
-import { t as c } from "./ItemList.module-DDUXfuZL.js";
-import { n as l } from "./Properties-Bbneh1ws.js";
-import { r as u } from "./PropertyField-CDb19d3F.js";
+import { t as e } from "./dlog-F0I8KsIW.js";
+import { J as t, h as n } from "./icons-Dk8SRS8g.js";
+import { t as r } from "./Button-BIdXHQOx.js";
+import { t as i } from "./useReorderDragList-B_-5L5Gu.js";
+import { t as a } from "./Disclosure-0G0uh2fa.js";
+import { t as o } from "./DragGhost-B5_hb9W9.js";
+import { t as s } from "./DragHandleGlyph-Dr7Fgo0I.js";
+import { t as c } from "./ItemList.module-BSpCSxan.js";
+import { n as l } from "./Properties-D_KzDN9K.js";
+import { r as u } from "./PropertyField-DGCecAnV.js";
 import { asNodeId as d, createMoveToIndexOp as f, dispatchApplyBatch as p } from "@weasel-js/core";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useId as _, useLayoutEffect as v, useRef as y, useState as b } from "react";
@@ -164,9 +164,9 @@ function D(t) {
 		bodies: D,
 		nudgers: R,
 		keys: U
-	}, G = s ? o ?? [] : [];
+	}, G = s ? o ?? [] : [], K = u ? `${x.root} ${u}` : x.root;
 	return /* @__PURE__ */ g("div", {
-		className: u ? `${x.root} ${u}` : x.root,
+		className: K,
 		children: [(a !== void 0 || G.length > 0) && /* @__PURE__ */ g("div", {
 			className: x.head,
 			children: [a !== void 0 && /* @__PURE__ */ h("h2", {
@@ -353,7 +353,7 @@ function M({ item: e, reorder: t, onPointerDown: n, onNudge: r }) {
 		item: e,
 		reorder: t
 	});
-	if (!(!t && e.badge === void 0)) return /* @__PURE__ */ h("button", {
+	if (t || e.badge !== void 0) return /* @__PURE__ */ h("button", {
 		type: "button",
 		className: x.handle,
 		"aria-label": `Drag to reorder ${e.label}`,
@@ -424,4 +424,4 @@ function F(e) {
 //#endregion
 export { D as n, S as r, F as t };
 
-//# sourceMappingURL=LayerList-BeGrkLb9.js.map
+//# sourceMappingURL=LayerList-nz-QYvTF.js.map

package/dist/chunks/LayerList-nz-QYvTF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerList-nz-QYvTF.js","names":["stop","s","rows","_Fragment","dlog","LockIcon","CloseIcon","Button","useReorderDragList","Disclosure","DragGhost","DragHandleGlyph","ItemList_module_default","PropertyGroup","PropertyList","LayerList_module_default","moveLayers","move","reorder","items","item","moving","ids","kept","siblings","it","moved","at","index","collectCollapsed","isCollapsed","into","anyNested","hasBody","body","LayerList","props","toggled","setToggled","useState","collapsed","collapsedIds","toggle","next","id","prev","onCollapsedChange","live","useRef","press","onSelect","mods","locked","lockedIds","selectedIds","bodies","collectBodies","list","visible","walk","level","rowEls","focusId","setFocusId","pendingFocus","anchor","nudgers","el","tabStop","v","focusRow","selectRange","from","to","a","b","range","keys","e","go","branch","open","delta","parentId","shared","useId","palette","onAdd","addKinds","cls","className","title","kind","empty","Level","out","selected","drag","target","setEl","bind","node","cards","entry","kids","childId","path","onPointerDown","ghosted","isSelected","draggedIds","targetIndex","controls","Controls","head","Handle","stop","Grip","Remove","Fragment","i","ghost","onNudge","onVisibilityChange","onRemove","useSceneLayerList","args","build","scene","itemFor","selection","asNodeId","back","adapter","createMoveToIndexOp","label"],"sources":["../../src/components/LayerList/LayerList.module.css","../../src/components/LayerList/LayerList.tsx","../../src/components/LayerList/useSceneLayerList.ts"],"sourcesContent":["/* Row box, hover and selection are `ItemList`'s, so a layer list and the\n   history list stacked under it agree. What is here is only what a layer has. */\n.root,\n.root * {\n  box-sizing: border-box;\n}\n\n.root {\n  display: grid;\n  gap: var(--wzl-space-4);\n}\n\n.head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--wzl-space-4);\n}\n\n.title {\n  margin: 0;\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-lg);\n  color: var(--wzl-fg);\n}\n\n.palette {\n  display: flex;\n  gap: var(--wzl-space-2);\n}\n\n.add {\n  font: inherit;\n  height: var(--wzl-control-h);\n  background: transparent;\n  border: 1px dashed var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  padding: var(--wzl-space-1) var(--wzl-space-4);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  cursor: pointer;\n}\n\n.add:hover {\n  background: var(--wzl-surface-raised);\n  color: var(--wzl-fg);\n}\n\n.level {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  position: relative;\n  width: 100%;\n}\n\n/* A level of cards is a `PropertyList`, so the controls in each body take the\n   panel's density; its rows are spaced like cards rather than lines. */\n.level.cards {\n  display: grid;\n  row-gap: var(--wzl-space-3);\n}\n\n.entry {\n  min-width: 0;\n}\n\n.row {\n  user-select: none;\n}\n\n.row:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n/* A child's twisty sits under its parent's grip. */\n.children {\n  padding-left: calc(var(--wzl-disclosure-target, var(--wzl-control-h-sm)) + var(--wzl-space-4));\n}\n\n/* The layer the drag picked up holds its place, faded, while its ghost follows the pointer. */\n.dragging {\n  opacity: 0.5;\n}\n\n/* Where the drop would land: a line on the edge of the layer it would land against. */\n.dropBefore {\n  box-shadow: 0 -2px 0 var(--wzl-accent);\n}\n\n.dropAfter {\n  box-shadow: 0 2px 0 var(--wzl-accent);\n}\n\n/* One width for the grip and the lock, so a locked row's label lines up. */\n.grip,\n.lock {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  min-width: 13px;\n  color: var(--wzl-fg-muted);\n}\n\n.row:not([data-locked]) {\n  cursor: grab;\n}\n\n.row:not([data-locked]):active {\n  cursor: grabbing;\n}\n\n.stop {\n  display: inline-flex;\n  align-items: center;\n  flex: 0 0 auto;\n}\n\n/* Holds the twisty column open on rows with nothing to expand, so labels line up down a level. */\n.twistyGap {\n  flex: 0 0 auto;\n  width: var(--wzl-disclosure-target, var(--wzl-control-h-sm));\n}\n\n/* Sized, so the empty column a locked row keeps is the checkbox's width. */\n.check {\n  flex: 0 0 auto;\n  width: 13px;\n  height: 13px;\n  margin: 0;\n  accent-color: var(--wzl-accent);\n}\n\n.handle {\n  font: inherit;\n  background: transparent;\n  border: 0;\n  color: var(--wzl-fg-subtle);\n  padding: var(--wzl-space-1) var(--wzl-space-2);\n  cursor: grab;\n  touch-action: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--wzl-icon-button-size);\n  height: var(--wzl-icon-button-size);\n  border-radius: var(--wzl-radius-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  font-size: var(--wzl-font-size);\n}\n\n.card[data-tone] .handle {\n  background: var(--wzl-tone);\n  color: var(--wzl-fg-on-accent);\n}\n\n.handle:active {\n  cursor: grabbing;\n}\n\n.entry[data-selected] > .card {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -1px;\n}\n","import {\n  type KeyboardEvent,\n  type ReactNode,\n  type RefCallback,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { dlog } from '../../dlog';\nimport { CloseIcon, LockIcon } from '../../icons';\nimport { type PressModifiers, useReorderDragList } from '../../useReorderDragList';\nimport { Button } from '../Button';\nimport { Disclosure } from '../Disclosure';\nimport { DragGhost } from '../DragGhost';\nimport { DragHandleGlyph } from '../DragHandleGlyph';\nimport rows from '../ItemList/ItemList.module.css';\nimport { PropertyGroup, PropertyList } from '../Properties';\nimport type { StanceProps } from '../stance';\nimport s from './LayerList.module.css';\n\n/** One layer. With a body (see `renderBody`) it draws as a card that folds its\n *  body away; without one, as a one-line row. Either can hold child layers. */\nexport interface LayerListItem {\n  id: string;\n  /** The layer's name. Also what its controls are labeled by. */\n  label: string;\n  /** Shown in the header in place of `label` — a select that switches the\n   *  layer's kind, say. */\n  title?: ReactNode;\n  /** Fixed-size content before the label: a color swatch, a kind icon. */\n  leading?: ReactNode;\n  /** Drawn in the drag handle in place of the grip — an ordinal. */\n  badge?: ReactNode;\n  /** Which of its list this layer is: an index into the theme's tone list, or\n   *  a color. A card draws its edge and handle in it and recolors its controls. */\n  tone?: StanceProps['tone'];\n  /** Cannot be dragged, hidden or removed, walls off drops on either side, and\n   *  selects alone rather than joining a multi-selection. */\n  locked?: boolean;\n  /** Shown or not, when the list has `onVisibilityChange`. Default true. */\n  visible?: boolean;\n  children?: LayerListItem[];\n  /** Folds the body and children away until the user opens them.\n   *  `collapsedIds` overrides it. */\n  defaultCollapsed?: boolean;\n}\n\n/**\n * A reorder: `ids`, siblings under `parentId` (`null` at the top level), now\n * sit as one block in list order starting at `index` of the parent's children.\n * A drag never moves a layer to another parent.\n */\nexport interface LayerMove {\n  ids: string[];\n  parentId: string | null;\n  index: number;\n}\n\n/** Props for `<LayerList>`. */\nexport interface LayerListProps {\n  items: LayerListItem[];\n  /** Omit for a list the user cannot reorder. */\n  onReorder?: (move: LayerMove) => void;\n  /** Giving both makes rows selectable: a click selects one, shift-click adds\n   *  or removes one, and dragging a selected row drags its selected siblings. */\n  selectedIds?: readonly string[];\n  onSelect?: (ids: string[]) => void;\n  /** Adds a visibility checkbox to every unlocked layer. */\n  onVisibilityChange?: (id: string, visible: boolean) => void;\n  /** Adds a ✕ to every unlocked layer. */\n  onRemove?: (id: string) => void;\n  /** A layer's controls. Returning `null` leaves that layer a one-line row. */\n  renderBody?: (item: LayerListItem) => ReactNode;\n  /** Ids whose body and children are folded away. Giving it makes folding\n   *  controlled; `onCollapsedChange` fires either way. */\n  collapsedIds?: readonly string[];\n  onCollapsedChange?: (ids: string[]) => void;\n  /** Heading above the list. */\n  title?: string;\n  /** Names the list for assistive tech when it has no `title`. */\n  label?: string;\n  /** Kinds the user can add, as buttons beside the title. Shown only with `onAdd`. */\n  addKinds?: string[];\n  onAdd?: (kind: string) => void;\n  /** Shown in place of the list when `items` is empty. */\n  empty?: ReactNode;\n  /** Appended to the root's class list — the module's own names are hashed. */\n  className?: string;\n}\n\n/** Returns `items` with `move` applied, for a consumer that holds the tree as state. */\nexport function moveLayers(items: LayerListItem[], move: LayerMove): LayerListItem[] {\n  if (move.parentId === null) return reorder(items, move);\n  return items.map((item) => {\n    if (item.id === move.parentId) return { ...item, children: reorder(item.children ?? [], move) };\n    return item.children ? { ...item, children: moveLayers(item.children, move) } : item;\n  });\n}\n\nfunction reorder(siblings: LayerListItem[], { ids, index }: LayerMove): LayerListItem[] {\n  const moving = new Set(ids);\n  const kept = siblings.filter((it) => !moving.has(it.id));\n  const moved = siblings.filter((it) => moving.has(it.id));\n  const at = Math.max(0, Math.min(kept.length, index));\n  return [...kept.slice(0, at), ...moved, ...kept.slice(at)];\n}\n\nfunction collectCollapsed(\n  items: LayerListItem[],\n  isCollapsed: (item: LayerListItem) => boolean,\n  into = new Set<string>(),\n): Set<string> {\n  for (const item of items) {\n    if (isCollapsed(item)) into.add(item.id);\n    if (item.children) collectCollapsed(item.children, isCollapsed, into);\n  }\n  return into;\n}\n\nfunction anyNested(items: LayerListItem[]): boolean {\n  return items.some((it) => (it.children?.length ?? 0) > 0);\n}\n\n/** What every level of the tree reads from the list. */\ninterface Shared {\n  props: LayerListProps;\n  collapsed: ReadonlySet<string>;\n  toggle: (id: string) => void;\n  press: (item: LayerListItem, mods: PressModifiers) => void;\n  uid: string;\n  /** Some layer has children, so every row keeps a twisty column. */\n  nested: boolean;\n  /** Each layer's body, rendered once; a row where it is empty. */\n  bodies: ReadonlyMap<string, ReactNode>;\n  /** Per sibling group, keyed by parent: move a row one place, as its drag would. */\n  nudgers: Map<string | null, (id: string, delta: -1 | 1) => boolean>;\n  keys: RowKeys;\n}\n\n/** The roving focus over the rows: one row is in the tab order at a time. */\ninterface RowKeys {\n  tabStop: string | undefined;\n  register: (id: string) => (el: HTMLElement | null) => void;\n  onKeyDown: (item: LayerListItem, parentId: string | null) => (e: KeyboardEvent<HTMLElement>) => void;\n  onFocus: (id: string) => void;\n}\n\ninterface VisibleRow {\n  item: LayerListItem;\n  parentId: string | null;\n  level: number;\n}\n\nfunction hasBody(body: ReactNode): boolean {\n  return body !== null && body !== undefined && body !== false;\n}\n\n/**\n * An ordered, drag-reorderable list of layers — a document's objects, a lab's\n * canvases, a fill's effects. Each layer is a one-line row or, with a body, a\n * card whose controls fold away; either can nest child layers. Selection,\n * visibility, removal and an add palette are each on when their handler is given.\n */\nexport function LayerList(props: LayerListProps) {\n  const { items, collapsedIds, onCollapsedChange, title, addKinds, onAdd, empty, className } = props;\n  // Only the user's own toggles are state; everything else reads the layer's\n  // `defaultCollapsed`, so a layer added later starts the way it asks to.\n  const [toggled, setToggled] = useState<ReadonlyMap<string, boolean>>(new Map());\n  const collapsed = collapsedIds\n    ? new Set(collapsedIds)\n    : collectCollapsed(items, (item) => toggled.get(item.id) ?? item.defaultCollapsed === true);\n  const toggle = (id: string) => {\n    const next = new Set(collapsed);\n    if (next.has(id)) next.delete(id);\n    else next.add(id);\n    if (!collapsedIds) setToggled((prev) => new Map(prev).set(id, next.has(id)));\n    onCollapsedChange?.([...next]);\n  };\n\n  // The press arrives after the drag session ends, which can be after a render\n  // the closure did not see, so it reads the selection from here.\n  const live = useRef(props);\n  live.current = props;\n  const press = (item: LayerListItem, mods: PressModifiers) => {\n    const { selectedIds = [], onSelect } = live.current;\n    if (!onSelect) return;\n    anchor.current = item.id;\n    if (item.locked || !mods.shiftKey) {\n      onSelect([item.id]);\n      return;\n    }\n    // A leftover locked selection does not carry into a multi-selection.\n    const locked = new Set(lockedIds(live.current.items));\n    const kept = selectedIds.filter((id) => !locked.has(id));\n    onSelect(kept.includes(item.id) ? kept.filter((id) => id !== item.id) : [...kept, item.id]);\n  };\n\n  const bodies = new Map<string, ReactNode>();\n  const collectBodies = (list: LayerListItem[]) => {\n    for (const it of list) {\n      bodies.set(it.id, props.renderBody ? props.renderBody(it) : null);\n      if (it.children) collectBodies(it.children);\n    }\n  };\n  collectBodies(items);\n\n  // The rows the arrow keys walk: open branches only, and not cards, whose\n  // heads are their own controls.\n  const visible: VisibleRow[] = [];\n  const walk = (list: LayerListItem[], parentId: string | null, level: number) => {\n    for (const item of list) {\n      if (!hasBody(bodies.get(item.id))) visible.push({ item, parentId, level });\n      if (item.children?.length && !collapsed.has(item.id)) walk(item.children, item.id, level + 1);\n    }\n  };\n  walk(items, null, 1);\n\n  const rowEls = useRef(new Map<string, HTMLElement>());\n  const [focusId, setFocusId] = useState<string | null>(null);\n  const pendingFocus = useRef<string | null>(null);\n  const anchor = useRef<string | null>(null);\n  const nudgers = useRef(new Map<string | null, (id: string, delta: -1 | 1) => boolean>()).current;\n  useLayoutEffect(() => {\n    const id = pendingFocus.current;\n    if (id === null) return;\n    pendingFocus.current = null;\n    const el = rowEls.current.get(id);\n    if (el && document.activeElement !== el) el.focus();\n  });\n\n  const selectedIds = props.selectedIds ?? [];\n  const tabStop = visible.some((v) => v.item.id === focusId)\n    ? (focusId ?? undefined)\n    : (visible.find((v) => selectedIds.includes(v.item.id)) ?? visible[0])?.item.id;\n\n  const focusRow = (id: string) => {\n    pendingFocus.current = id;\n    setFocusId(id);\n  };\n  // Locked rows never join a multi-selection, so a range passes over them.\n  const selectRange = (to: string) => {\n    const from = anchor.current ?? to;\n    const a = visible.findIndex((v) => v.item.id === from);\n    const b = visible.findIndex((v) => v.item.id === to);\n    if (a < 0 || b < 0) return;\n    const range = visible\n      .slice(Math.min(a, b), Math.max(a, b) + 1)\n      .filter((v) => !v.item.locked)\n      .map((v) => v.item.id);\n    if (range.length > 0) live.current.onSelect?.(range);\n  };\n\n  const keys: RowKeys = {\n    tabStop,\n    register: (id) => (el) => {\n      if (el) rowEls.current.set(id, el);\n      else rowEls.current.delete(id);\n    },\n    onFocus: (id) => {\n      setFocusId(id);\n      anchor.current ??= id;\n    },\n    onKeyDown: (item, parentId) => (e) => {\n      // Keys on a control inside the row are the control's.\n      if (e.target !== e.currentTarget) return;\n      const at = visible.findIndex((v) => v.item.id === item.id);\n      const go = (index: number) => {\n        const next = visible[Math.max(0, Math.min(visible.length - 1, index))];\n        if (!next) return;\n        focusRow(next.item.id);\n        if (e.shiftKey && props.onSelect) selectRange(next.item.id);\n        else anchor.current = next.item.id;\n      };\n      const branch = (item.children?.length ?? 0) > 0;\n      const open = branch && !collapsed.has(item.id);\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowUp': {\n          const delta = e.key === 'ArrowDown' ? 1 : -1;\n          if (e.altKey) {\n            if (nudgers.get(parentId)?.(item.id, delta)) pendingFocus.current = item.id;\n          } else {\n            go(at + delta);\n          }\n          break;\n        }\n        case 'Home':\n          go(0);\n          break;\n        case 'End':\n          go(visible.length - 1);\n          break;\n        case 'ArrowRight':\n          if (branch && !open) toggle(item.id);\n          else if (open) go(at + 1);\n          else return;\n          break;\n        case 'ArrowLeft':\n          if (open) toggle(item.id);\n          else if (parentId !== null) go(visible.findIndex((v) => v.item.id === parentId));\n          else return;\n          break;\n        case 'Enter':\n        case ' ':\n          press(item, { shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey });\n          break;\n        default:\n          return;\n      }\n      e.preventDefault();\n    },\n  };\n\n  const uid = useId();\n  const shared: Shared = { props, collapsed, toggle, press, uid, nested: anyNested(items), bodies, nudgers, keys };\n  const palette = onAdd ? (addKinds ?? []) : [];\n  const cls = className ? `${s.root} ${className}` : s.root;\n\n  return (\n    <div className={cls}>\n      {(title !== undefined || palette.length > 0) && (\n        <div className={s.head}>\n          {title !== undefined && <h2 className={s.title}>{title}</h2>}\n          <div className={s.palette}>\n            {palette.map((kind) => (\n              <button\n                key={kind}\n                type=\"button\"\n                className={s.add}\n                aria-label={`Add ${kind}`}\n                onClick={() => {\n                  dlog('layer-list', 'onAdd', { kind });\n                  onAdd?.(kind);\n                }}\n              >\n                {kind}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      {items.length === 0 ? (\n        <div className={rows.empty}>\n          {empty ?? (palette.length > 0 ? 'No layers — add one above.' : 'No layers.')}\n        </div>\n      ) : (\n        <Level items={items} parentId={null} shared={shared} path=\"\" level={1} />\n      )}\n    </div>\n  );\n}\n\nfunction lockedIds(items: LayerListItem[]): string[] {\n  const out: string[] = [];\n  for (const it of items) {\n    if (it.locked) out.push(it.id);\n    if (it.children) out.push(...lockedIds(it.children));\n  }\n  return out;\n}\n\ninterface LevelProps {\n  items: LayerListItem[];\n  parentId: string | null;\n  shared: Shared;\n  path: string;\n  level: number;\n}\n\n/** One sibling group. Each has its own drag, so a drag stays under one parent. */\nfunction Level({ items, parentId, shared, path, level }: LevelProps) {\n  const { props } = shared;\n  const selected = props.selectedIds ?? [];\n  const drag = useReorderDragList({\n    // With no `onReorder` every row is a locked one to the drag, so a press\n    // still reaches `onPress` and nothing ever engages.\n    items: items.map((it) => ({ id: it.id, label: it.label, locked: it.locked || !props.onReorder })),\n    selectedIds: items.filter((it) => selected.includes(it.id)).map((it) => it.id),\n    onReorder: (ids, target) => {\n      const moving = new Set(ids);\n      const inOrder = items.filter((it) => moving.has(it.id)).map((it) => it.id);\n      // The hook's index counts the dragged rows; a move's index does not.\n      const before = items.slice(0, target).filter((it) => moving.has(it.id)).length;\n      const move = { ids: inOrder, parentId, index: target - before };\n      dlog('layer-list', 'onReorder', move);\n      props.onReorder?.(move);\n    },\n    onPress: (id, mods) => {\n      const item = items.find((it) => it.id === id);\n      if (item) shared.press(item, mods);\n    },\n  });\n  shared.nudgers.set(parentId, (id, delta) =>\n    drag.nudge(id, items.findIndex((it) => it.id === id), delta),\n  );\n  const [el, setEl] = useState<HTMLDivElement | null>(null);\n  const bind = (node: HTMLDivElement | null) => {\n    setEl(node);\n    (drag.containerProps.ref as RefCallback<HTMLDivElement>)(node);\n  };\n\n  const bodies = items.map((it) => shared.bodies.get(it.id));\n  const cards = bodies.some(hasBody);\n  const { draggedIds, targetIndex, ghost } = drag.state;\n\n  const entry = (item: LayerListItem, i: number, ghosted: boolean) => {\n    const body = bodies[i];\n    const kids = item.children ?? [];\n    const open = !shared.collapsed.has(item.id);\n    const childId = `${shared.uid}${path}-${i}`;\n    const onPointerDown = ghosted ? undefined : drag.rowProps(item.id, i).onPointerDown;\n    const isSelected = selected.includes(item.id);\n    const cls = [s.entry];\n    if (!ghosted) {\n      if (draggedIds?.includes(item.id)) cls.push(s.dragging);\n      if (targetIndex === i && !draggedIds?.includes(item.id)) cls.push(s.dropBefore);\n      if (targetIndex === items.length && i === items.length - 1) cls.push(s.dropAfter);\n    }\n    const controls = <Controls item={item} shared={shared} />;\n    const head =\n      hasBody(body) ? (\n        <PropertyGroup\n          className={s.card}\n          title={item.title ?? item.label}\n          {...(item.tone === undefined ? {} : { tone: item.tone })}\n          collapsed={ghosted || !open}\n          onCollapsedChange={() => shared.toggle(item.id)}\n          leading={\n            <Handle\n              item={item}\n              reorder={props.onReorder !== undefined}\n              onPointerDown={onPointerDown}\n              onNudge={(delta) => shared.nudgers.get(parentId)?.(item.id, delta)}\n            />\n          }\n          actions={ghosted ? undefined : controls}\n        >\n          {ghosted ? null : body}\n        </PropertyGroup>\n      ) : (\n        <div\n          className={[rows.row, s.row, isSelected ? rows.selected : ''].filter(Boolean).join(' ')}\n          data-selected={isSelected ? 'true' : undefined}\n          data-locked={item.locked ? 'true' : undefined}\n          onPointerDown={onPointerDown}\n          {...(ghosted\n            ? {}\n            : {\n                role: 'row',\n                'aria-level': level,\n                ...(kids.length > 0 ? { 'aria-expanded': open } : {}),\n                ...(props.onSelect ? { 'aria-selected': isSelected } : {}),\n                tabIndex: shared.keys.tabStop === item.id ? 0 : -1,\n                ref: shared.keys.register(item.id),\n                onKeyDown: shared.keys.onKeyDown(item, parentId),\n                onFocus: () => shared.keys.onFocus(item.id),\n              })}\n        >\n          {shared.nested &&\n            (kids.length > 0 ? (\n              <span className={s.stop} onPointerDown={stop}>\n                <Disclosure\n                  open={open}\n                  onToggle={() => shared.toggle(item.id)}\n                  label={`${item.label} sublayers`}\n                  controls={childId}\n                />\n              </span>\n            ) : (\n              <span className={s.twistyGap} />\n            ))}\n          <Grip item={item} reorder={props.onReorder !== undefined} />\n          {props.onVisibilityChange &&\n            (item.locked ? (\n              <span className={s.check} />\n            ) : (\n              <input\n                className={s.check}\n                type=\"checkbox\"\n                checked={item.visible !== false}\n                onPointerDown={stop}\n                onChange={(e) => props.onVisibilityChange?.(item.id, e.target.checked)}\n                aria-label={`Show ${item.label}`}\n              />\n            ))}\n          {item.leading}\n          <span className={rows.label}>{item.title ?? item.label}</span>\n          {ghosted ? null : <Remove item={item} shared={shared} />}\n        </div>\n      );\n    return (\n      <div key={item.id} role=\"none\" className={cls.join(' ')} data-selected={isSelected ? 'true' : undefined}>\n        {head}\n        {!ghosted && kids.length > 0 && open && (\n          <div id={childId} role=\"rowgroup\" className={s.children}>\n            <Level items={kids} parentId={item.id} shared={shared} path={`${path}-${i}`} level={level + 1} />\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <>\n      {cards ? (\n        <PropertyList ref={bind} className={`${s.level} ${s.cards}`}>\n          {items.map((it, i) => entry(it, i, false))}\n        </PropertyList>\n      ) : (\n        <div\n          ref={bind}\n          className={s.level}\n          {...(parentId === null\n            ? {\n                role: 'treegrid',\n                'aria-label': props.label ?? props.title ?? 'Layers',\n                ...(props.onSelect ? { 'aria-multiselectable': true } : {}),\n              }\n            : { role: 'none' })}\n        >\n          {items.map((it, i) => entry(it, i, false))}\n        </div>\n      )}\n      {ghost && el ? (\n        <DragGhost at={ghost} from={el}>\n          {items.map((it, i) => (ghost.ids.includes(it.id) ? entry(it, i, true) : null))}\n        </DragGhost>\n      ) : null}\n    </>\n  );\n}\n\n// Keeps a press on a control inside a row from also starting the row's press.\nconst stop = (e: { stopPropagation(): void }) => e.stopPropagation();\n\n/** A row's grip: decoration, since the whole row takes the drag. */\nfunction Grip({ item, reorder }: { item: LayerListItem; reorder: boolean }) {\n  if (item.locked) {\n    return (\n      <span className={s.lock} role=\"img\" aria-label=\"Locked\">\n        <LockIcon size={12} />\n      </span>\n    );\n  }\n  if (!reorder && item.badge === undefined) return null;\n  return (\n    <span className={s.grip} aria-hidden=\"true\">\n      {item.badge ?? <DragHandleGlyph size={13} />}\n    </span>\n  );\n}\n\n/** A card's handle: the drag target, since the rest of its head folds it, and\n *  Alt+Up/Down on it moves the card. */\nfunction Handle({\n  item,\n  reorder,\n  onPointerDown,\n  onNudge,\n}: {\n  item: LayerListItem;\n  reorder: boolean;\n  onPointerDown: ((e: React.PointerEvent) => void) | undefined;\n  onNudge: (delta: -1 | 1) => void;\n}) {\n  if (item.locked) return <Grip item={item} reorder={reorder} />;\n  if (!reorder && item.badge === undefined) return undefined;\n  return (\n    <button\n      type=\"button\"\n      className={s.handle}\n      aria-label={`Drag to reorder ${item.label}`}\n      aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n      onPointerDown={onPointerDown}\n      onKeyDown={(e) => {\n        if (!e.altKey || (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')) return;\n        e.preventDefault();\n        onNudge(e.key === 'ArrowUp' ? -1 : 1);\n      }}\n    >\n      {item.badge ?? <DragHandleGlyph />}\n    </button>\n  );\n}\n\nfunction Controls({ item, shared }: { item: LayerListItem; shared: Shared }) {\n  const { onVisibilityChange } = shared.props;\n  return (\n    <>\n      {onVisibilityChange && !item.locked && (\n        <input\n          className={s.check}\n          type=\"checkbox\"\n          checked={item.visible !== false}\n          onClick={stop}\n          onChange={(e) => onVisibilityChange(item.id, e.target.checked)}\n          aria-label={`Show ${item.label}`}\n        />\n      )}\n      <Remove item={item} shared={shared} />\n    </>\n  );\n}\n\nfunction Remove({ item, shared }: { item: LayerListItem; shared: Shared }) {\n  const { onRemove } = shared.props;\n  if (!onRemove || item.locked) return null;\n  return (\n    <span className={s.stop} onPointerDown={stop}>\n      <Button variant=\"ghost\" size=\"sm\" iconOnly ariaLabel={`Remove ${item.label}`} onClick={() => onRemove(item.id)}>\n        <CloseIcon size={14} />\n      </Button>\n    </span>\n  );\n}\n","import { asNodeId, createMoveToIndexOp, dispatchApplyBatch } from '@weasel-js/core';\nimport type { NodeId, Scene, SceneNode, SelectionApi } from '@weasel-js/core';\nimport type { LayerListItem, LayerListProps } from './LayerList';\n\n/** Arguments for {@link useSceneLayerList}. */\nexport interface UseSceneLayerListArgs<TData, TLayer extends string, TPose> {\n  scene: Scene<TData, TLayer, TPose>;\n  selection: SelectionApi;\n  /** What the reorder op is dispatched against — the adapter `<SceneCanvas>` uses. */\n  adapter: object;\n  /** A row's content for a node: its label, a leading swatch or icon, whether it is locked. */\n  itemFor: (node: SceneNode<TData, TLayer, TPose>) => Omit<LayerListItem, 'id' | 'children'>;\n  /** Label of the reorder's history entry. Default `'Reorder'`. */\n  label?: string;\n}\n\n/**\n * The props that put a scene in a `<LayerList>`: a row per node, a container's\n * children nested under it, the front-most at the top, selection read from and\n * written to `selection`, and a drag dispatched as a `MoveToIndexOp`.\n */\nexport function useSceneLayerList<TData, TLayer extends string, TPose>(\n  args: UseSceneLayerListArgs<TData, TLayer, TPose>,\n): Required<Pick<LayerListProps, 'items' | 'selectedIds' | 'onSelect' | 'onReorder'>> {\n  const { scene, selection, adapter, itemFor, label = 'Reorder' } = args;\n\n  // A scene orders children back to front and the list front to back. Rebuilt\n  // every render: the scene keeps its identity across a reorder, so a memo keyed\n  // on it would serve the order from before.\n  const build = (ids: readonly NodeId[]): LayerListItem[] =>\n    [...ids].reverse().flatMap((id) => {\n      const node = scene.get(id);\n      if (!node) return [];\n      const kids = scene.childrenOf(id);\n      return [{ ...itemFor(node), id, ...(kids.length > 0 ? { children: build(kids) } : {}) }];\n    });\n\n  return {\n    items: build(scene.roots),\n    selectedIds: selection.current.map(String),\n    onSelect: (ids) => selection.set(ids.map(asNodeId)),\n    onReorder: ({ ids, parentId, index }) => {\n      const siblings = parentId === null ? scene.roots : scene.childrenOf(asNodeId(parentId));\n      // `index` counts from the front among the siblings the drag left behind.\n      const back = siblings.length - ids.length - index;\n      dispatchApplyBatch(adapter, [createMoveToIndexOp({ ids, parentId, index: Math.max(0, back) })], label);\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/chunks/{ListEditor-C6zLzCsJ.js → ListEditor-BQ6AV3Ac.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./Button-Dyp31jMt.js";
+import { t as e } from "./Button-BIdXHQOx.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { useEffect as r, useRef as i, useState as a } from "react";
 var o = {
@@ -71,4 +71,4 @@ function s({ value: s, onChange: c, placeholder: l, empty: u = "None", addLabel:
 //#endregion
 export { s as t };
 
-//# sourceMappingURL=ListEditor-C6zLzCsJ.js.map
+//# sourceMappingURL=ListEditor-BQ6AV3Ac.js.map

package/dist/chunks/ListEditor-BQ6AV3Ac.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListEditor-BQ6AV3Ac.js","names":["s","Button","ListEditor_module_default","ListEditor","ariaLabel","inputs","useRef","focus","setFocus","useState","insert","onChange","value","at","remove","i","onKeyDown","name","className","empty","el","entry","j","v","addLabel"],"sources":["../../src/components/ListEditor/ListEditor.module.css","../../src/components/ListEditor/ListEditor.tsx"],"sourcesContent":[".editor {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  min-width: min(28rem, calc(100vw - 64px));\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.entry {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n}\n\n.input {\n  flex: 1 1 auto;\n  min-width: 0;\n  height: var(--wzl-field-h, var(--wzl-control-h));\n  padding: 0 var(--wzl-field-pad-x);\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-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n}\n\n.input:focus {\n  outline: none;\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.empty {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  font-style: italic;\n}\n\n.actions {\n  display: flex;\n}\n","import { useEffect, useRef, useState, type KeyboardEvent } from 'react';\nimport { Button } from '../Button';\nimport s from './ListEditor.module.css';\n\n/** Props for {@link ListEditor}. */\nexport interface ListEditorProps {\n  value: readonly string[];\n  /** Every edit, add and removal, with the whole list. Entries are written as\n   *  typed — an empty one stays until it is removed. */\n  onChange: (next: string[]) => void;\n  /** Shown in an empty entry. */\n  placeholder?: string;\n  /** Shown in place of the entries when there are none. */\n  empty?: string;\n  /** Text of the add button. */\n  addLabel?: string;\n  /** Names the list for assistive tech; each entry is named from it. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * An editable list of strings: one field per entry, a remove button beside\n * each, and an add button under them. Enter in an entry adds one after it;\n * Backspace in an empty one removes it.\n */\nexport function ListEditor({\n  value,\n  onChange,\n  placeholder,\n  empty = 'None',\n  addLabel = 'Add',\n  'aria-label': ariaLabel,\n  className,\n}: ListEditorProps) {\n  const inputs = useRef<(HTMLInputElement | null)[]>([]);\n  const [focus, setFocus] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (focus === null) return;\n    inputs.current[focus]?.focus();\n    setFocus(null);\n  }, [focus]);\n\n  const insert = (at: number): void => {\n    onChange([...value.slice(0, at), '', ...value.slice(at)]);\n    setFocus(at);\n  };\n  const remove = (at: number): void => {\n    onChange(value.filter((_, i) => i !== at));\n    if (value.length > 1) setFocus(Math.max(0, at - 1));\n  };\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>, at: number): void => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      insert(at + 1);\n    } else if (e.key === 'Backspace' && value[at] === '') {\n      e.preventDefault();\n      remove(at);\n    }\n  };\n  const name = (i: number): string => `${ariaLabel ?? 'Entry'} ${i + 1}`;\n\n  return (\n    <div className={[s.editor, className].filter(Boolean).join(' ')} role=\"group\" aria-label={ariaLabel}>\n      {value.length === 0 ? (\n        <div className={s.empty}>{empty}</div>\n      ) : (\n        <ul className={s.list}>\n          {value.map((entry, i) => (\n            // Entries have no identity beyond their position, and two may be equal.\n            <li key={i} className={s.entry}>\n              <input\n                ref={(el) => {\n                  inputs.current[i] = el;\n                }}\n                type=\"text\"\n                className={s.input}\n                aria-label={name(i)}\n                value={entry}\n                placeholder={placeholder}\n                onChange={(e) => onChange(value.map((v, j) => (j === i ? e.target.value : v)))}\n                onKeyDown={(e) => onKeyDown(e, i)}\n              />\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                iconOnly\n                ariaLabel={`Remove ${name(i)}`}\n                onClick={() => remove(i)}\n              >\n                ×\n              </Button>\n            </li>\n          ))}\n        </ul>\n      )}\n      <div className={s.actions}>\n        <Button size=\"sm\" onClick={() => insert(value.length)}>\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AC0BA,SAAgBG,EAAW,EACzB,UACA,aACA,gBACA,WAAQ,QACR,cAAW,OACX,cAAcC,GACd,gBACkB;CAClB,IAAMC,IAASC,EAAoC,CAAC,CAAC,GAC/C,CAACC,GAAOC,KAAYC,EAAwB,IAAI;CAEtD,QAAgB;EACd,AAAIF,MAAU,SACdF,EAAO,QAAQE,EAAM,EAAE,MAAM,GAC7BC,EAAS,IAAI;CACf,GAAG,CAACD,CAAK,CAAC;CAEV,IAAMG,KAAU,MAAqB;EAEnC,AADAC,EAAS;GAAC,GAAGC,EAAM,MAAM,GAAGC,CAAE;GAAG;GAAI,GAAGD,EAAM,MAAMC,CAAE;EAAC,CAAC,GACxDL,EAASK,CAAE;CACb,GACMC,KAAU,MAAqB;EAEnC,AADAH,EAASC,EAAM,QAAQ,GAAG,MAAMG,MAAMF,CAAE,CAAC,GACrCD,EAAM,SAAS,KAAGJ,EAAS,KAAK,IAAI,GAAGK,IAAK,CAAC,CAAC;CACpD,GACMG,KAAa,GAAoC,MAAqB;EAC1E,AAAI,EAAE,QAAQ,WACZ,EAAE,eAAe,GACjBN,EAAOG,IAAK,CAAC,KACJ,EAAE,QAAQ,eAAeD,EAAMC,OAAQ,OAChD,EAAE,eAAe,GACjBC,EAAOD,CAAE;CAEb,GACMI,KAAQ,MAAsB,GAAGb,KAAa,QAAQ,GAAGW,IAAI;CAEnE,OACE,kBAAC,OAAD;EAAK,WAAW,CAACf,EAAE,QAAQkB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAAG,MAAK;EAAQ,cAAYd;EAA1F,UAAA,CACGQ,EAAM,WAAW,IAChB,kBAAC,OAAD;GAAK,WAAWZ,EAAE;GAAQ,UAAAmB;EAAW,CAAA,IAErC,kBAAC,MAAD;GAAI,WAAWnB,EAAE;GACd,UAAAY,EAAM,KAAK,GAAO,MAEjB,kBAAC,MAAD;IAAY,WAAWZ,EAAE;IAAzB,UAAA,CACE,kBAAC,SAAD;KACE,MAAM,MAAO;MACX,EAAO,QAAQ,KAAKoB;KACtB;KACA,MAAK;KACL,WAAWpB,EAAE;KACb,cAAYiB,EAAK,CAAC;KAClB,OAAOI;KACM;KACb,WAAW,MAAMV,EAASC,EAAM,KAAK,GAAG,MAAOU,MAAM,IAAI,EAAE,OAAO,QAAQC,CAAE,CAAC;KAC7E,YAAY,MAAMP,EAAU,GAAG,CAAC;IACjC,CAAA,GACD,kBAACf,GAAD;KACE,SAAQ;KACR,MAAK;KACL,UAAA;KACA,WAAW,UAAUgB,EAAK,CAAC;KAC3B,eAAeH,EAAO,CAAC;KACxB,UAAA;IAEO,CAAA,CACN;GAtBK,GAAA,CAsBL,CACL;EACC,CAAA,GAEN,kBAAC,OAAD;GAAK,WAAWd,EAAE;GAChB,UAAA,kBAACC,GAAD;IAAQ,MAAK;IAAK,eAAeS,EAAOE,EAAM,MAAM;IACjD,UAAAY;GACK,CAAA;EACL,CAAA,CACF;;AAET"}

package/dist/chunks/{MenuButton-BcdhrNGh.js → MenuButton-DtaGenKf.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { n as t, r as n } from "./segmentTooltip-CAkZlW-t.js";
+import { r as e } from "./portalHost-yTOVuCej.js";
+import { n as t, r as n } from "./segmentTooltip-CStYHKzd.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Button as a, Menu as o, MenuItem as s, MenuTrigger as c, Popover as l } from "react-aria-components";
 var u = {
@@ -67,4 +67,4 @@ function d({ label: d, items: f, onAction: p, isDisabled: m, className: h, "aria
 //#endregion
 export { d as t };
 
-//# sourceMappingURL=MenuButton-BcdhrNGh.js.map
+//# sourceMappingURL=MenuButton-DtaGenKf.js.map

package/dist/chunks/MenuButton-DtaGenKf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton-DtaGenKf.js","names":["RACButton","s","RACPopover","RACMenu","RACMenuItem","useOverlayPortal","TriggerTooltip","segmentTooltipContent","MenuButton_module_default","MenuButton","ariaLabel","portalContainer","MenuTrigger","anchor","isDisabled","Button","className","label","Popover","portalProps","Menu","onAction","key","items","MenuItem","item"],"sources":["../../src/components/MenuButton/MenuButton.module.css","../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":[".trigger {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  height: var(--wzl-control-h);\n  padding: 0 var(--wzl-space-3) 0 var(--wzl-space-5);\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  line-height: 1;\n  white-space: nowrap;\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.trigger[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.label {\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.menu {\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: var(--wzl-space-2);\n  max-height: 280px;\n  overflow: auto;\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  padding: var(--wzl-space-2) var(--wzl-space-4);\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n  color: var(--wzl-fg);\n  white-space: nowrap;\n  outline: none;\n}\n\n.item[data-focused] {\n  background: var(--wzl-surface-hover);\n}\n\n.item[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Button as RACButton,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  MenuTrigger,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport s from './MenuButton.module.css';\nimport { TriggerTooltip, segmentTooltipContent, type SegmentTooltipFields } from '../segmentTooltip';\n\n/** One row in a {@link MenuButton}'s list. */\nexport type MenuButtonItem<T extends string = string> = {\n  value: T;\n  label: ReactNode;\n  isDisabled?: boolean;\n  /** Plain-text form of `label`, for type-to-select and screen readers. A\n   *  string label supplies this itself. */\n  textValue?: string;\n};\n\n/** Props for {@link MenuButton}. */\nexport type MenuButtonProps<T extends string = string> = {\n  /** What the button says. It never changes to show a chosen row. */\n  label: ReactNode;\n  items: ReadonlyArray<MenuButtonItem<T>>;\n  /** Fired with the value of the row chosen. */\n  onAction: (value: T) => void;\n  isDisabled?: boolean;\n  className?: string;\n  'aria-label'?: string;\n} & SegmentTooltipFields & OverlayPortalProps;\n\n/**\n * A button that opens a list and acts on the row chosen — \"Add trial…\",\n * \"Load…\". Unlike a {@link Select} it holds no value, so it sizes to its own\n * label rather than to its widest row.\n *\n * `shortcut` adds a kit tooltip reading `Name (⌘N)`, named by `aria-label` or\n * a string `label`, as `Button` does; `tooltip` replaces that text.\n */\nexport function MenuButton<T extends string = string>({\n  label,\n  items,\n  onAction,\n  isDisabled,\n  className,\n  'aria-label': ariaLabel,\n  portalContainer,\n  shortcut,\n  tooltip,\n}: MenuButtonProps<T>) {\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n  return (\n    <MenuTrigger>\n      {anchor}\n      <TriggerTooltip\n        content={segmentTooltipContent({ tooltip, shortcut, ariaLabel, label })}\n        disabled={isDisabled}\n      >\n        <RACButton\n          className={[s.trigger, className].filter(Boolean).join(' ')}\n          isDisabled={isDisabled}\n          aria-label={ariaLabel}\n        >\n          <span className={s.label}>{label}</span>\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      </TriggerTooltip>\n      {/* `data-weasel-overlay`: see Select — the list renders in a portal,\n          outside the subtree the trigger sits in. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACMenu className={s.menu} onAction={(key) => onAction(key as T)}>\n          {items.map((item) => (\n            <RACMenuItem\n              key={item.value}\n              id={item.value}\n              className={s.item}\n              isDisabled={item.isDisabled}\n              textValue={item.textValue ?? (typeof item.label === 'string' ? item.label : undefined)}\n            >\n              {item.label}\n            </RACMenuItem>\n          ))}\n        </RACMenu>\n      </RACPopover>\n    </MenuTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AC0CA,SAAgBS,EAAsC,EACpD,UACA,UACA,aACA,eACA,cACA,cAAcC,GACd,oBACA,aACA,cACqB;CACrB,IAAM,EAAE,WAAQ,mBAAgBL,EAAiBM,CAAe;CAChE,OACE,kBAACC,GAAD,EAAA,UAAA;EACGC;EACD,kBAACP,GAAD;GACE,SAASC,EAAsB;IAAE;IAAS;IAAU;IAAW;GAAM,CAAC;GACtE,UAAUO;GAEV,UAAA,kBAACd,GAAD;IACE,WAAW,CAACC,EAAE,SAASe,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;IAC9C;IACZ,cAAYN;IAHd,UAAA,CAKE,kBAAC,QAAD;KAAM,WAAWT,EAAE;KAAQ,UAAAgB;IAAY,CAAA,GACvC,kBAAC,OAAD;KAAK,WAAWhB,EAAE;KAAS,SAAQ;KAAY,eAAY;KACzD,UAAA,kBAAC,QAAD;MAAM,GAAE;MAAiB,MAAK;MAAO,QAAO;MAAe,aAAY;MAAM,eAAc;MAAQ,gBAAe;KAAS,CAAA;IACxH,CAAA,CACI;;EACG,CAAA;EAGhB,kBAACC,GAAD;GAAY,WAAWD,EAAE;GAAS,uBAAoB;GAAG,GAAIkB;GAC3D,UAAA,kBAAChB,GAAD;IAAS,WAAWF,EAAE;IAAM,WAAW,MAAQoB,EAASC,CAAQ;IAC7D,UAAAC,EAAM,KAAK,MACV,kBAACnB,GAAD;KAEE,IAAIqB,EAAK;KACT,WAAWxB,EAAE;KACb,YAAYwB,EAAK;KACjB,WAAWA,EAAK,cAAc,OAAOA,EAAK,SAAU,WAAWA,EAAK,QAAQ,KAAA;KAE3E,UAAAA,EAAK;IACK,GAPNA,EAAK,KAOC,CACd;GACM,CAAA;EACC,CAAA;CACD,EAAA,CAAA;AAEjB"}

package/dist/chunks/{MeshEditor-BOOIFWnz.js → MeshEditor-qqGc6hlD.js}

@@ -1,6 +1,6 @@
-import { t as e } from "./ColorField-DJSCuSJv.js";
-import { t } from "./paintPreview-DPtZS4yU.js";
-import { t as n } from "./ToggleBar-Btnl5r7F.js";
+import { t as e } from "./ColorField-BcMcW8Sa.js";
+import { t } from "./paintPreview-CuSZiHpR.js";
+import { t as n } from "./ToggleBar-DTjGeS0Q.js";
 import { asPaint as r, isMeshGradientFill as i } from "@weasel-js/core";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import "react";
@@ -84,4 +84,4 @@ function d(e) {
 //#endregion
 export { d as n, l as t };
 
-//# sourceMappingURL=MeshEditor-BOOIFWnz.js.map
+//# sourceMappingURL=MeshEditor-qqGc6hlD.js.map

package/dist/chunks/MeshEditor-qqGc6hlD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MeshEditor-qqGc6hlD.js","names":["s","ColorField","ToggleBar","MeshEditor_module_default","SPACES","MeshEditor","props","space","value","withCorner","asPaint","patchIndex","patch","b","c","d","next","corner","color","className","previewOf","onInput","onChange","spaceSwitch","paintPreviewCss","isMeshPaint","isMeshGradientFill","fill"],"sources":["../../src/components/MeshEditor/MeshEditor.module.css","../../src/components/MeshEditor/MeshEditor.tsx"],"sourcesContent":[".root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n}\n\n.patch {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n}\n\n.preview {\n  inline-size: 34px;\n  block-size: 34px;\n  flex: 0 0 auto;\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: inset 0 0 0 1px var(--wzl-border);\n}\n\n.corners {\n  display: grid;\n  grid-template-columns: repeat(2, auto);\n  gap: var(--wzl-space-2) var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n.corner {\n  min-inline-size: 0;\n}\n","import { type ReactElement } from 'react';\nimport {\n  asPaint,\n  isMeshGradientFill,\n  type ColorSpace,\n  type FillStyle,\n  type MeshGradientFill,\n} from '@weasel-js/core';\nimport { ColorField } from '../ColorField';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport { paintPreviewCss } from '../../paintPreview';\nimport s from './MeshEditor.module.css';\n\nconst SPACES: readonly ToggleBarItem<ColorSpace>[] = [\n  { value: 'rgb', label: 'sRGB' },\n  { value: 'oklab', label: 'OKLab' },\n  { value: 'oklch', label: 'OKLCh' },\n];\n\n/** Props for {@link MeshEditor}. `onInput` fires throughout a gesture and\n *  `onChange` once at its end. */\nexport interface MeshEditorProps {\n  value: MeshGradientFill;\n  /** Emitted as a `FillStyle`, which is what every paint control passes\n   *  around — `FillStyle`'s discriminant stays closed over the built-in\n   *  members, so a registered kind's own shape only travels through it. */\n  onInput?: (next: FillStyle) => void;\n  onChange: (next: FillStyle) => void;\n  /** Show the sRGB / OKLab / OKLCh switch. Default true. */\n  spaceSwitch?: boolean;\n  className?: string;\n}\n\n/**\n * Editor for a mesh gradient's colors.\n *\n * Geometry is absent for the same reason it is absent from `GradientEditor`:\n * a patch's twelve control points are a thing to drag on the artwork, not a\n * column of numbers in a panel. What is left is what a panel is good at — the\n * color at each corner, and the space the four of them blend through.\n *\n * Corners are numbered in the patch's own walk order, which is the order the\n * paint stores them in, so a corner's number is stable while it is dragged.\n */\nexport function MeshEditor(props: MeshEditorProps): ReactElement {\n  const { value, onInput, onChange, spaceSwitch = true, className } = props;\n  const space = value.interpolate ?? 'rgb';\n\n  const withCorner = (patchIndex: number, corner: number, color: string): FillStyle => asPaint({\n    ...value,\n    patches: value.patches.map((patch, i) => {\n      if (i !== patchIndex) return patch;\n      const [a, b, c, d] = patch.colors;\n      const next: [string, string, string, string] = [a, b, c, d];\n      next[corner] = color;\n      return { ...patch, colors: next };\n    }),\n  });\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      {value.patches.map((patch, patchIndex) => (\n        // A patch has no id; its position in the list is its identity, the way\n        // a gradient stop's is.\n        <div key={patchIndex} className={s.patch}>\n          <span\n            className={s.preview}\n            aria-hidden=\"true\"\n            style={{ background: previewOf(value, patchIndex) }}\n          />\n          <div className={s.corners}>\n            {patch.colors.map((color, corner) => (\n              <ColorField\n                key={corner}\n                value={color}\n                alpha\n                aria-label={`Patch ${patchIndex + 1} corner ${corner + 1}`}\n                className={s.corner}\n                onInput={(next) => onInput?.(withCorner(patchIndex, corner, next))}\n                onChange={(next) => onChange(withCorner(patchIndex, corner, next))}\n              />\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {spaceSwitch && (\n        <ToggleBar<ColorSpace>\n          items={SPACES}\n          value={space}\n          size=\"sm\"\n          ariaLabel=\"Blend space\"\n          onChange={(next) => next && onChange(asPaint({ ...value, interpolate: next }))}\n        />\n      )}\n    </div>\n  );\n}\n\n/** One patch as a swatch: the paint with the other patches taken out, so a\n *  multi-patch mesh shows which row belongs to which part of it. */\nfunction previewOf(value: MeshGradientFill, patchIndex: number): string | undefined {\n  return paintPreviewCss(\n    { ...value, patches: [value.patches[patchIndex]] } as unknown as FillStyle,\n  );\n}\n\n/** Narrowing for a consumer rendering this behind a kind switch. */\nexport function isMeshPaint(fill: FillStyle | null | undefined): fill is FillStyle & MeshGradientFill {\n  return isMeshGradientFill(fill);\n}\n"],"mappings":";;;;;;;;;;;;GCaMI,IAA+C;CACnD;EAAE,OAAO;EAAO,OAAO;CAAO;CAC9B;EAAE,OAAO;EAAS,OAAO;CAAQ;CACjC;EAAE,OAAO;EAAS,OAAO;CAAQ;AACnC;AA2BA,SAAgBC,EAAW,GAAsC;CAC/D,IAAM,EAAE,UAAO,YAAS,aAAU,iBAAc,IAAM,iBAAcC,GAC9DC,IAAQC,EAAM,eAAe,OAE7BC,KAAc,GAAoB,GAAgB,MAA6BC,EAAQ;EAC3F,GAAGF;EACH,SAASA,EAAM,QAAQ,KAAK,GAAO,MAAM;GACvC,IAAI,MAAMG,GAAY,OAAOC;GAC7B,IAAM,CAAC,GAAGC,GAAGC,GAAGC,KAAKH,EAAM,QACrBI,IAAyC;IAAC;IAAGH;IAAGC;IAAGC;GAAC;GAE1D,OADA,EAAKE,KAAUC,GACR;IAAE,GAAGN;IAAO,QAAQI;GAAK;EAClC,CAAC;CACH,CAAC;CAED,OACE,kBAAC,OAAD;EAAK,WAAW,CAAChB,EAAE,MAAMmB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAA5D,UAAA,CACGX,EAAM,QAAQ,KAAK,GAAO,MAGzB,kBAAC,OAAD;GAAsB,WAAWR,EAAE;GAAnC,UAAA,CACE,kBAAC,QAAD;IACE,WAAWA,EAAE;IACb,eAAY;IACZ,OAAO,EAAE,YAAYoB,EAAUZ,GAAOG,CAAU,EAAE;GACnD,CAAA,GACD,kBAAC,OAAD;IAAK,WAAWX,EAAE;IACf,UAAAY,EAAM,OAAO,KAAK,GAAO,MACxB,kBAACX,GAAD;KAEE,OAAOiB;KACP,OAAA;KACA,cAAY,SAASP,IAAa,EAAE,UAAUM,IAAS;KACvD,WAAWjB,EAAE;KACb,UAAU,MAASqB,IAAUZ,EAAWE,GAAYM,GAAQD,CAAI,CAAC;KACjE,WAAW,MAASM,EAASb,EAAWE,GAAYM,GAAQD,CAAI,CAAC;IAClE,GAPMC,CAON,CACF;GACE,CAAA,CACF;EAnBK,GAAAN,CAmBL,CACN,GAEAY,KACC,kBAACrB,GAAD;GACE,OAAOE;GACP,OAAOG;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAASS,KAAQM,EAASZ,EAAQ;IAAE,GAAGF;IAAO,aAAaQ;GAAK,CAAC,CAAC;EAC9E,CAAA,CAEA;;AAET;AAIA,SAASI,EAAU,GAAyB,GAAwC;CAClF,OAAOI,EACL;EAAE,GAAGhB;EAAO,SAAS,CAACA,EAAM,QAAQG,EAAW;CAAE,CACnD;AACF;AAGA,SAAgBc,EAAY,GAA0E;CACpG,OAAOC,EAAmBC,CAAI;AAChC"}

package/dist/chunks/{NumberField-C1Y7zP-a.js → NumberField-CwJOMmQR.js}

@@ -1,5 +1,5 @@
-import { a as e, r as t } from "./number-6S8IzXVt.js";
-import { n } from "./Field-xbqRmjsI.js";
+import { a as e, r as t } from "./number-D3NEx_8r.js";
+import { n } from "./Field--onYxXTF.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { forwardRef as a, useRef as o, useState as s } from "react";
 import { Button as c, FieldError as l, Group as u, Input as d, Label as f, NumberField as p, Text as m } from "react-aria-components";
@@ -114,4 +114,4 @@ function _({ value: i, onChange: a, minValue: c, maxValue: l, step: u = 1, accep
 //#endregion
 export { g as n, _ as t };
 
-//# sourceMappingURL=NumberField-C1Y7zP-a.js.map
+//# sourceMappingURL=NumberField-CwJOMmQR.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField-CwJOMmQR.js","names":["NumberField","RACNumberField","s","RACInput","RACButton","s","parseNumber","formatNumber","NumberField_module_default","NumberField$1","forwardRef","rest","props","NumberField","width","fieldClasses","orientation","className","label","Label","Group","ghost","Input","hideSteppers","Button","description","Text","FieldError","errorMessage","UnitField","ariaLabel","draft","setDraft","useState","canceled","useRef","text","value","clamp","maxValue","minValue","n","commit","next","onChange","accepts","e","typed","step"],"sources":["../../src/components/NumberField/NumberField.module.css","../../src/components/NumberField/NumberField.tsx","../../src/components/NumberField/UnitField.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: var(--wzl-space-2);\n}\n\n/* `orientation='row'`: the label keeps its own width and the field takes the\n   rest; description and error wrap onto a line of their own. A `fit` field\n   keeps its own width and centers on the label instead. */\n.field.row {\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: wrap;\n  column-gap: var(--wzl-space-4);\n  row-gap: var(--wzl-space-2);\n}\n.field.row .label { flex: 0 0 auto; }\n.field.row:not(.fit) .frame { flex: 1 1 0; min-width: 0; }\n.field.row.fit { align-items: center; }\n.field.row .below { flex-basis: 100%; }\n\n.frame {\n  display: flex;\n  align-items: stretch;\n  height: var(--wzl-field-h, var(--wzl-control-h));\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  line-height: 1;\n  overflow: hidden;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n  border-color: var(--wzl-danger);\n}\n\n.field[data-disabled] .frame {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.frame input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  padding: 0 var(--wzl-field-pad-x);\n  text-align: right;\n  -moz-appearance: textfield;\n}\n\n.frame input::-webkit-outer-spin-button,\n.frame input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.steppers {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--wzl-border);\n}\n\n.stepper {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--wzl-control-h-xs);\n  flex: 1;\n  background: transparent;\n  border: none;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n  font-size: var(--wzl-font-size-2xs);\n  line-height: 1;\n}\n\n.stepper:not(:last-child) {\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.stepper[data-hovered]:not([data-disabled]) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.stepper[data-pressed]:not([data-disabled]) {\n  background: var(--wzl-surface-pressed);\n}\n\n.stepper[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* Mirrors the property rows' editable readout (`.readoutInput`), so a number\n   sitting inside other chrome does not draw a second box around itself. */\n.ghost {\n  height: auto;\n  background: transparent;\n  border-color: transparent;\n  color: var(--wzl-accent-fg);\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.ghost input {\n  padding: 1px 0;\n}\n\n.ghost:hover {\n  background: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.ghost:focus-within {\n  background: var(--wzl-surface-sunken);\n  border-color: var(--wzl-focus-ring);\n  box-shadow: none;\n}\n\n/* `width='fit'` states the field's width in characters: left alone an `<input>`\n   asks for its 20-character intrinsic width, wider than most rows it sits in. */\n.fit {\n  width: auto;\n  max-width: 100%;\n  align-items: flex-start;\n}\n\n.fit .frame {\n  width: fit-content;\n  max-width: 100%;\n}\n\n.fit .frame input {\n  flex: 0 0 auto;\n  width: var(--wzl-number-field-width, 9ch);\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  NumberField as RACNumberField,\n  Label,\n  Input as RACInput,\n  Group,\n  Button as RACButton,\n  Text,\n  FieldError,\n  type NumberFieldProps as RACNumberFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses, type FieldOrientation } 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  /**\n   * `'stacked'` (the default) puts the label above the field; `'row'` sets it\n   * beside the field at its own width, with any description or error on a\n   * line below. Same vocabulary as {@link Field}'s `orientation`.\n   */\n  orientation?: FieldOrientation;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  /** Hide the up/down stepper buttons. Defaults to false. */\n  hideSteppers?: boolean;\n  /** Render with no box until focused — the readout treatment the property\n   *  rows use, for a value that sits inside other chrome rather than in a form. */\n  ghost?: boolean;\n  /** Native input placeholder — e.g. `'Mixed'` for a multi-selection\n   *  editor with no shared value. */\n  placeholder?: string;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the field sits in.\n   * `'fit'` sizes it to `--wzl-number-field-width` (`9ch` by default) plus its\n   * own chrome, rather than to the input's 20-character intrinsic width.\n   */\n  width?: 'fill' | 'fit';\n  className?: string;\n};\n\n/**\n * Numeric input with stepper buttons, wrapping React Aria's NumberField and\n * supplying the same label / description / errorMessage slots as `Input`.\n * Arrow keys and scroll step the value; parsing and formatting are React\n * Aria's.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const {\n    label,\n    orientation = 'stacked',\n    description,\n    errorMessage,\n    hideSteppers,\n    ghost,\n    placeholder,\n    width = 'fill',\n    className,\n    ...rest\n  } = props;\n  return (\n    <RACNumberField\n      {...rest}\n      className={[\n        s.field,\n        width === 'fit' && s.fit,\n        fieldClasses.root,\n        orientation === 'row' && fieldClasses.row,\n        orientation === 'row' && s.row,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {label !== undefined && <Label className={`${fieldClasses.label} ${s.label}`}>{label}</Label>}\n      <Group className={ghost ? `${s.frame} ${s.ghost}` : 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} ${s.below}`}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={`${fieldClasses.error} ${s.below}`}>{errorMessage}</FieldError>\n    </RACNumberField>\n  );\n});\n","import { useRef, useState } from 'react';\nimport { formatNumber, parseNumber, type UnitTable } from '../../format/number';\nimport { fieldClasses } from '../Field/Field';\nimport s from './NumberField.module.css';\n\n/** Props for {@link UnitField}. */\nexport interface UnitFieldProps {\n  /** The value in the unit the field shows. NaN shows an empty field. */\n  value: number;\n  /** Fired with a value the field read and clamped, in the unit it shows. */\n  onChange: (value: number) => void;\n  minValue?: number;\n  maxValue?: number;\n  /** What an arrow key adds or takes away. Defaults to 1. */\n  step?: number;\n  /** Units a person may type, each mapped to the factor that turns a number\n   *  in it into the unit the field shows: `{ mm: 0.1, cm: 1 }`. */\n  accepts?: Readonly<UnitTable>;\n  placeholder?: string;\n  /** Render with no box until focused, as {@link NumberField}'s `ghost` does. */\n  ghost?: boolean;\n  /** As {@link NumberField}'s `width`. */\n  width?: 'fill' | 'fit';\n  className?: string;\n  'aria-label'?: string;\n}\n\n/**\n * A number typed as text, so it can carry a unit: `12mm` in a field showing\n * centimeters commits `1.2`. Commits on blur or Enter, reverts on Escape or on\n * text it cannot read, clamps to its bounds, and steps with the arrow keys.\n * React Aria's `NumberField` refuses letters as they are typed, which is why\n * this is not that.\n */\nexport function UnitField({\n  value,\n  onChange,\n  minValue,\n  maxValue,\n  step = 1,\n  accepts,\n  placeholder,\n  ghost,\n  width = 'fill',\n  className,\n  'aria-label': ariaLabel,\n}: UnitFieldProps) {\n  const [draft, setDraft] = useState<string | null>(null);\n  const canceled = useRef(false);\n  const text = Number.isFinite(value)\n    ? formatNumber(value, { useGrouping: false, maximumFractionDigits: 20 })\n    : '';\n  const clamp = (n: number) =>\n    Math.min(maxValue ?? Infinity, Math.max(minValue ?? -Infinity, n));\n  const commit = (n: number) => {\n    const next = clamp(n);\n    if (next !== value) onChange(next);\n  };\n\n  return (\n    <div\n      className={[s.field, width === 'fit' && s.fit, fieldClasses.root, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={ghost ? `${s.frame} ${s.ghost}` : s.frame}>\n        <input\n          type=\"text\"\n          inputMode=\"decimal\"\n          aria-label={ariaLabel}\n          placeholder={placeholder}\n          value={draft ?? text}\n          onChange={(e) => setDraft(e.target.value)}\n          onFocus={() => {\n            canceled.current = false;\n          }}\n          onBlur={() => {\n            if (draft !== null && !canceled.current) {\n              const n = parseNumber(draft, accepts);\n              if (Number.isFinite(n)) commit(n);\n            }\n            setDraft(null);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.currentTarget.blur();\n            } else if (e.key === 'Escape') {\n              canceled.current = true;\n              e.currentTarget.blur();\n            } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n              e.preventDefault();\n              const typed = draft === null ? value : parseNumber(draft, accepts);\n              const from = Number.isFinite(typed) ? typed : 0;\n              const next = clamp(from + (e.key === 'ArrowUp' ? step : -step));\n              setDraft(null);\n              if (next !== value) onChange(next);\n            }\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{OptionsBar-DlcagPYK.js → OptionsBar-DbzAgIln.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./useRovingTabIndex-B4uJqiKP.js";
-import { t } from "./segmentedControl.module-D2nw68Yo.js";
+import { t as e } from "./useRovingTabIndex-Bp_hYm_h.js";
+import { t } from "./segmentedControl.module-Bv7DEg8f.js";
 import { jsx as n } from "react/jsx-runtime";
 import "react";
 //#region src/components/OptionsBar/OptionsBar.tsx
@@ -42,4 +42,4 @@ function r(r) {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=OptionsBar-DlcagPYK.js.map
+//# sourceMappingURL=OptionsBar-DbzAgIln.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsBar-DbzAgIln.js","names":["s","useRovingTabIndex","OptionsBar","props","toggle","item","items","index","roving","segmentedControl_module_default","style","height","rootCls","size","variant","className","ariaLabel","cls","i"],"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,SAAgBE,EAA+C,GAAyC;CACtG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAYC,GAEzDC,KAAU,MAAkB;EAChC,IAAMC,IAAOC,EAAMC;EACnB,AAAIF,EAAK,YACTA,EAAK,SAAS,CAACA,EAAK,QAAQ;CAC9B,GAEMG,IAASP,EAAkB;EAAE;EAAO,eAAeD,EAAE;EAAS,YAAYI;CAAO,CAAC,GAElFM,IAAmCC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,mBAA8B,GAAGA,EAAO,IAAI,GAG9CC,IAAU;EACdZ,EAAE;EACFa,KAAQb,EAAE,QAAQa;EAClBC,KAAWd,EAAE,WAAWc;EACxBC;CACF,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE1B,OACE,kBAAC,OAAD;EACE,KAAKP,EAAO;EACZ,WAAWI;EACX,MAAK;EACL,cAAYI;EACL;EAEN,UAAAV,EAAM,KAAK,GAAM,MAAM;GACtB,IAAMW,IAAM,GAAGjB,EAAE,UAAUK,EAAK,WAAW,IAAIL,EAAE,oBAAoB;GACrE,OACE,kBAAC,UAAD;IAEE,MAAK;IACL,gBAAcK,EAAK;IACnB,cAAYA,EAAK;IACjB,UAAUA,EAAK;IACf,UAAUG,EAAO,YAAYU,CAAC;IAC9B,WAAWD;IACX,eAAeb,EAAOc,CAAC;IACvB,WAAWV,EAAO,UAAUU,CAAC;IAE5B,UAAAb,EAAK;GACA,GAXDA,EAAK,KAWJ;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/chunks/{PaintField-B2mLRZa4.js → PaintField-DaJukRc6.js}

@@ -1,6 +1,6 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { t } from "./paintPreview-DPtZS4yU.js";
-import { t as n } from "./PaintInput-BFKhd83I.js";
+import { r as e } from "./portalHost-yTOVuCej.js";
+import { t } from "./paintPreview-CuSZiHpR.js";
+import { t as n } from "./PaintInput-Byhna3H-.js";
 import { getPaintKind as r } from "@weasel-js/core";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import "react";
@@ -59,4 +59,4 @@ function f(r) {
 //#endregion
 export { f as t };
 
-//# sourceMappingURL=PaintField-B2mLRZa4.js.map
+//# sourceMappingURL=PaintField-DaJukRc6.js.map

package/dist/chunks/PaintField-DaJukRc6.js.map

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

package/dist/chunks/{PaintInput-BFKhd83I.js → PaintInput-Byhna3H-.js}

@@ -1,9 +1,9 @@
-import { a as e, t } from "./Icon-BW0qv_U7.js";
-import { t as n } from "./ColorField-DJSCuSJv.js";
-import { t as r } from "./ToggleBar-Btnl5r7F.js";
-import { r as i } from "./GradientEditor-BRTxHG-W.js";
-import { n as a, t as o } from "./MeshEditor-BOOIFWnz.js";
-import { t as s } from "./PatternPicker-DdfpxoQy.js";
+import { a as e, t } from "./Icon-Cgzy8VgC.js";
+import { t as n } from "./ColorField-BcMcW8Sa.js";
+import { t as r } from "./ToggleBar-DTjGeS0Q.js";
+import { r as i } from "./GradientEditor-B3a-MsVJ.js";
+import { n as a, t as o } from "./MeshEditor-qqGc6hlD.js";
+import { t as s } from "./PatternPicker-B-cUt-JT.js";
 import { getPaintKind as c, listPaintKinds as l, withGradientKind as u } from "@weasel-js/core";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { useCallback as p, useRef as m } from "react";
@@ -128,4 +128,4 @@ function S(S) {
 //#endregion
 export { S as t };
 
-//# sourceMappingURL=PaintInput-BFKhd83I.js.map
+//# sourceMappingURL=PaintInput-Byhna3H-.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaintInput-Byhna3H-.js","names":["s","ICON_PATHS","ColorField","ToggleBar","GradientEditor","isMeshPaint","MeshEditor","PatternPicker","PaintInput_module_default","FALLBACK_COLOR","NONE","GRADIENT_KINDS","isGradient","paint","isPattern","kindOf","PaintInput","props","ariaLabel","remembered","useRef","active","mixed","value","entries","listPaintKinds","kinds","entry","segment","icon","id","Icon","label","items","allowNone","currentColor","useCallback","getPaintKind","switchKind","kind","seen","withGradientKind","onChange","unset","className","renderBody","Editor","onInput"],"sources":["../../src/components/PaintInput/PaintInput.module.css","../../src/components/PaintInput/PaintInput.tsx"],"sourcesContent":["/* Kind switch stacked over whichever paint body it selects. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n/* A value is in effect but nobody chose it. Never louder than mixed. */\n.unset {\n  opacity: 0.55;\n}\n\n/* A kind with no editor: named, not editable. */\n.noEditor {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n","import { useCallback, useRef, type ReactElement } from 'react';\nimport {\n  getPaintKind,\n  listPaintKinds,\n  withGradientKind,\n  type FillStyle,\n  type GradientFill,\n  type GradientKind,\n  type PaintKind,\n} from '@weasel-js/core';\nimport { Icon } from '../../icons/Icon';\nimport { ICON_PATHS, type IconName } from '../../icons/paths';\nimport { ColorField } from '../ColorField';\nimport { GradientEditor } from '../GradientEditor';\nimport { MeshEditor, isMeshPaint } from '../MeshEditor';\nimport { PatternPicker, type PatternFill } from '../PatternPicker';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport s from './PaintInput.module.css';\n\n/** What a kind with no color of its own seeds from. */\nconst FALLBACK_COLOR = '#000000ff';\n\n/** The bar's answer for \"no paint at all\". Not a registered kind — absence\n *  has no seed, no color and nothing to render — so it is this control's own\n *  segment rather than a registry entry. */\nconst NONE = 'none';\n\nconst GRADIENT_KINDS: readonly string[] = [\n  'linear-gradient',\n  'radial-gradient',\n  'conic-gradient',\n];\n\nfunction isGradient(paint: FillStyle | undefined): paint is GradientFill {\n  return paint !== undefined && GRADIENT_KINDS.includes(paint.fill ?? '');\n}\n\nfunction isPattern(paint: FillStyle | undefined): paint is PatternFill {\n  return paint?.fill === 'pattern';\n}\n\n/** A paint's own discriminant. The solid member leaves `fill` off, and an\n *  explicit `null` is the absence of paint rather than an unknown one. */\nfunction kindOf(paint: FillStyle | null | undefined): PaintKind | null {\n  if (paint === null) return NONE;\n  if (paint === undefined) return null;\n  return paint.fill ?? 'solid';\n}\n\n/** Props for {@link PaintInput}. `onInput` fires throughout a gesture and\n *  `onChange` once at its end. */\nexport interface PaintInputProps {\n  /** The paint being edited. `null` is an explicit \"no paint\"; `undefined`\n   *  is no value to show. */\n  value: FillStyle | null | undefined;\n  /** Indeterminate presentation: no kind lit, and the body withheld because\n   *  there is no single paint to show. */\n  mixed?: boolean;\n  /** Dim the control — a value is in effect but was never chosen. */\n  unset?: boolean;\n  /** Restrict the kind bar. Default: every registered kind. */\n  kinds?: readonly PaintKind[];\n  /** Offer \"None\". Default `true` — the bar answers \"what kind of paint is\n   *  this?\" and no-paint is one of the answers. Turn it off where the slot\n   *  cannot express absence. */\n  allowNone?: boolean;\n  onInput?: (next: FillStyle | null) => void;\n  onChange: (next: FillStyle | null) => void;\n  /** Names the paint this control edits — `Fill`, `Color`. Carried by the\n   *  solid body's swatch, which is the part with a value to announce. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * Editor for a whole `FillStyle` — a kind bar over whichever body that kind\n * wants.\n *\n * The bar is driven by the paint-kind registry rather than a fixed list, so a\n * consumer's registered kind appears in it and renders that entry's `Editor`.\n * The five built-in kinds keep their branch here: their editors live in this\n * package and `@weasel-js/core`, which owns the registry, cannot import it.\n *\n * Geometry is deliberately absent — on a canvas it belongs on the artwork,\n * via `<SceneGradientHandles>`.\n */\nexport function PaintInput(props: PaintInputProps): ReactElement {\n  const {\n    value, mixed = false, unset = false, kinds, allowNone = true,\n    onInput, onChange, className,\n  } = props;\n  const ariaLabel = props['aria-label'];\n\n  // Per-kind memory, so linear → solid → linear comes back with its stops.\n  // A ref, not state: it must not survive the control being pointed at a\n  // different selection, and nothing renders off it directly.\n  const remembered = useRef(new Map<PaintKind, FillStyle>());\n\n  const active = mixed ? null : kindOf(value);\n  if (value != null && active !== null) remembered.current.set(active, value);\n\n  const entries = listPaintKinds().filter(\n    (entry) => kinds === undefined || kinds.includes(entry.id),\n  );\n  const segment = (id: string, label: string, icon: string | undefined): ToggleBarItem<PaintKind> =>\n    icon && icon in ICON_PATHS\n      // Icon-only: six labelled segments do not fit a property row, and the\n      // full label stays the accessible name.\n      // 14 to match the panel's other glyph segments. A `sm` bar is 17px tall\n      // over 1px of padding, so 15 fills the segment box edge to edge.\n      ? { value: id, label: <Icon name={icon as IconName} size={14} />, ariaLabel: label }\n      : { value: id, label };\n\n  const items: readonly ToggleBarItem<PaintKind>[] = [\n    ...(allowNone ? [segment(NONE, 'None', 'paintNone')] : []),\n    ...entries.map((entry) => segment(entry.id, entry.label, entry.icon)),\n  ];\n\n  /** The color a switch seeds from: whatever the current paint shows. */\n  const currentColor = useCallback((): string => {\n    if (value == null) return FALLBACK_COLOR;\n    return getPaintKind(kindOf(value) ?? 'solid')?.colorOf(value) ?? FALLBACK_COLOR;\n  }, [value]);\n\n  const switchKind = (kind: PaintKind): void => {\n    if (kind === active) return;\n    if (kind === NONE) {\n      onChange(null);\n      return;\n    }\n    const seen = remembered.current.get(kind);\n    if (seen !== undefined) {\n      onChange(seen);\n      return;\n    }\n    if (value != null && isGradient(value) && GRADIENT_KINDS.includes(kind)) {\n      onChange(withGradientKind(value, kind as GradientKind));\n      return;\n    }\n    const entry = getPaintKind(kind);\n    if (entry) onChange(entry.seed(currentColor()));\n  };\n\n  return (\n    <div\n      className={[s.root, unset && s.unset, className].filter(Boolean).join(' ')}\n      title={unset ? 'Not set' : undefined}\n    >\n      <ToggleBar<PaintKind>\n        items={items}\n        value={active}\n        size=\"sm\"\n        ariaLabel=\"Paint kind\"\n        onChange={(kind) => kind && switchKind(kind)}\n      />\n      {renderBody()}\n    </div>\n  );\n\n  function renderBody(): ReactElement | null {\n    if (mixed || value === undefined) {\n      return (\n        <ColorField\n          mixed\n          aria-label={ariaLabel}\n          onChange={(color) => onChange({ fill: 'solid', color })}\n        />\n      );\n    }\n    // Absence has nothing to edit. The lit segment is the whole statement.\n    if (value === null) return null;\n    // A registered `Editor` wins even for a built-in id: re-registering one is\n    // how a consumer replaces a kit control, and the built-in branches below\n    // are the fallback for the ids that ship without an entry editor.\n    const entry = getPaintKind(kindOf(value) ?? 'solid');\n    if (entry?.Editor) {\n      const Editor = entry.Editor;\n      return <Editor value={value} onInput={onInput} onChange={onChange} />;\n    }\n    if (isGradient(value)) {\n      return (\n        <GradientEditor\n          value={value}\n          kindSwitch={false}\n          onInput={onInput}\n          onChange={onChange}\n        />\n      );\n    }\n    if (isPattern(value)) {\n      return <PatternPicker value={value} color={currentColor()} onChange={onChange} />;\n    }\n    if (isMeshPaint(value)) {\n      return <MeshEditor value={value} onInput={onInput} onChange={onChange} />;\n    }\n    const kind = kindOf(value);\n    if (kind !== 'solid') {\n      // Editing a paint this control cannot represent would overwrite it, so\n      // a kind with no editor is shown and left alone.\n      return <div className={s.noEditor}>{entry?.label ?? kind}: no editor</div>;\n    }\n    return (\n      <ColorField\n        value={currentColor()}\n        alpha\n        aria-label={ariaLabel}\n        onInput={(color) => onInput?.({ fill: 'solid', color })}\n        onChange={(color) => onChange({ fill: 'solid', color })}\n      />\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/{PatternPicker-DdfpxoQy.js → PatternPicker-B-cUt-JT.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./ToggleBar-Btnl5r7F.js";
+import { t as e } from "./ToggleBar-DTjGeS0Q.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { tilePreviewCssUrl as r } from "@weasel-js/svg";
 var i = {
@@ -90,4 +90,4 @@ function d(d) {
 //#endregion
 export { u as n, d as t };
 
-//# sourceMappingURL=PatternPicker-DdfpxoQy.js.map
+//# sourceMappingURL=PatternPicker-B-cUt-JT.js.map

package/dist/chunks/PatternPicker-B-cUt-JT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternPicker-B-cUt-JT.js","names":["s","ToggleBar","PatternPicker_module_default","TILES","TILE_SIZES","DEFAULT_TILE_SIZE","PREVIEW_SIZE","specOf","fill","seedPattern","spec","from","tile","PatternPicker","props","value","size","pick","color","resize","onChange","nextSize","className","preview","selected","tilePreviewCssUrl","v"],"sources":["../../src/components/PatternPicker/PatternPicker.module.css","../../src/components/PatternPicker/PatternPicker.tsx"],"sourcesContent":["/* Tile grid over the size switch. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--wzl-swatch-size, 28px), 1fr));\n  gap: 0;\n}\n\n/* The swatch's whole face is its own tile, so it must not carry a flat\n   background — and the tile repeats at its own scale, not the swatch's. */\n.swatch {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  min-width: 0;\n  padding: 0;\n  border: 0.5px solid var(--wzl-border);\n  border-radius: 0;\n  cursor: pointer;\n  background-color: var(--wzl-surface-sunken);\n  background-image: var(--tile-preview);\n  background-repeat: repeat;\n  background-size: 16px 16px;\n  background-clip: padding-box;\n}\n\n.swatch:hover {\n  border-color: var(--wzl-fg-muted);\n}\n\n.swatchActive {\n  border-color: var(--wzl-accent);\n  box-shadow: 0 0 0 1px var(--wzl-accent);\n}\n","import type { ReactElement } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { FillStyle, TilePatternSpec } from '@weasel-js/core';\nimport { tilePreviewCssUrl } from '@weasel-js/svg';\nimport { ToggleBar } from '../ToggleBar';\nimport s from './PatternPicker.module.css';\n\n/** The `pattern` member of the paint union. */\nexport type PatternFill = Extract<FillStyle, { fill: 'pattern' }>;\n\nconst TILES: readonly TilePatternSpec['tile'][] = ['hatch', 'crosshatch', 'dots', 'chunks'];\n\n/** Tile sizes the picker offers, coarse enough that each reads as a\n *  distinct texture rather than a nudge. */\nconst TILE_SIZES: readonly { value: number; label: string }[] = [\n  { value: 4, label: 'S' },\n  { value: 8, label: 'M' },\n  { value: 16, label: 'L' },\n  { value: 32, label: 'XL' },\n];\n\nconst DEFAULT_TILE_SIZE = 8;\n\n/** Every swatch previews at one size so the grid compares tiles, not scales. */\nconst PREVIEW_SIZE = 16;\n\n/** The spec a pattern paint carries, if it carries one. A consumer-built\n *  `TextureHandle` has no spec, so the picker shows no tile selected and\n *  replaces it wholesale on the next click. */\nfunction specOf(fill: PatternFill): TilePatternSpec | null {\n  return 'tile' in fill.pattern ? fill.pattern : null;\n}\n\n/**\n * A pattern seeded from a color. `units: 'bounds'` anchors the tile to the\n * node's box, so the texture travels with the shape.\n */\nexport function seedPattern(\n  tile: TilePatternSpec['tile'],\n  from: string,\n  size: number = DEFAULT_TILE_SIZE,\n): PatternFill {\n  const spec: TilePatternSpec = { tile, color: from, size };\n  // `chunks` is a scatter over a ground rather than a line texture; without a\n  // background it reads as loose specks on whatever sits beneath.\n  if (tile === 'chunks') spec.bg = '#00000000';\n  return { fill: 'pattern', pattern: spec, units: 'bounds' };\n}\n\n/** Props for {@link PatternPicker}. */\nexport interface PatternPickerProps {\n  /** The pattern paint being edited. */\n  value: PatternFill;\n  /** The color new tiles are seeded with — the paint's own, normally. */\n  color: string;\n  /** Committed value: one call per click. A tile pick and a size change are\n   *  each a complete gesture, so there is no `onInput`. */\n  onChange: (next: PatternFill) => void;\n  className?: string;\n}\n\n/**\n * Grid of tile swatches over a size switch, each swatch previewing the real\n * tile at the current color.\n *\n * The preview shares its shape mapper with what the renderer paints, so a\n * swatch cannot drift from the texture it selects.\n */\nexport function PatternPicker(props: PatternPickerProps): ReactElement {\n  const { value, color, onChange, className } = props;\n  const spec = specOf(value);\n  const size = spec?.size ?? DEFAULT_TILE_SIZE;\n\n  const pick = (tile: TilePatternSpec['tile']): void => {\n    onChange(seedPattern(tile, color, size));\n  };\n\n  const resize = (nextSize: number): void => {\n    if (!spec) return;\n    onChange({ ...value, pattern: { ...spec, size: nextSize } });\n  };\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      <div className={s.grid}>\n        {TILES.map((tile) => {\n          const preview: TilePatternSpec = { tile, color, size: PREVIEW_SIZE };\n          if (tile === 'chunks') preview.bg = '#00000000';\n          const selected = spec?.tile === tile;\n          return (\n            <button\n              key={tile}\n              type=\"button\"\n              className={[s.swatch, selected && s.swatchActive].filter(Boolean).join(' ')}\n              style={{ ['--tile-preview' as string]: tilePreviewCssUrl(preview) } as CSSProperties}\n              title={tile}\n              aria-label={tile}\n              aria-pressed={selected}\n              onClick={() => pick(tile)}\n            />\n          );\n        })}\n      </div>\n      <ToggleBar<number>\n        items={TILE_SIZES}\n        value={size}\n        size=\"sm\"\n        ariaLabel=\"Tile size\"\n        onChange={(v) => v != null && resize(v)}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;GCUMG,IAA4C;CAAC;CAAS;CAAc;CAAQ;AAAQ,GAIpFC,IAA0D;CAC9D;EAAE,OAAO;EAAG,OAAO;CAAI;CACvB;EAAE,OAAO;EAAG,OAAO;CAAI;CACvB;EAAE,OAAO;EAAI,OAAO;CAAI;CACxB;EAAE,OAAO;EAAI,OAAO;CAAK;AAC3B,GAEMC,IAAoB,GAGpBC,IAAe;AAKrB,SAASC,EAAO,GAA2C;CACzD,OAAO,UAAUC,EAAK,UAAUA,EAAK,UAAU;AACjD;AAMA,SAAgBC,EACd,GACA,GACA,IAAeJ,GACF;CACb,IAAMK,IAAwB;EAAE;EAAM,OAAOC;EAAM;CAAK;CAIxD,OADIC,MAAS,aAAU,EAAK,KAAK,cAC1B;EAAE,MAAM;EAAW,SAASF;EAAM,OAAO;CAAS;AAC3D;AAqBA,SAAgBG,EAAc,GAAyC;CACrE,IAAM,EAAE,UAAO,UAAO,aAAU,iBAAcC,GACxCJ,IAAOH,EAAOQ,CAAK,GACnBC,IAAON,GAAM,QAAQL,GAErBY,KAAQ,MAAwC;EACpD,EAASR,EAAYG,GAAMM,GAAOF,CAAI,CAAC;CACzC,GAEMG,KAAU,MAA2B;EACzC,AAAKT,KACLU,EAAS;GAAE,GAAGL;GAAO,SAAS;IAAE,GAAGL;IAAM,MAAMW;GAAS;EAAE,CAAC;CAC7D;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,CAACrB,EAAE,MAAMsB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAA5D,UAAA,CACE,kBAAC,OAAD;GAAK,WAAWtB,EAAE;GACf,UAAAG,EAAM,KAAK,MAAS;IACnB,IAAMoB,IAA2B;KAAE;KAAM;KAAO,MAAMjB;IAAa;IACnE,AAAIM,MAAS,aAAU,EAAQ,KAAK;IACpC,IAAMY,IAAWd,GAAM,SAASE;IAChC,OACE,kBAAC,UAAD;KAEE,MAAK;KACL,WAAW,CAACZ,EAAE,QAAQwB,KAAYxB,EAAE,YAAY,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;KAC1E,OAAO,EAAG,kBAA6ByB,EAAkBF,CAAO,EAAE;KAClE,OAAOX;KACP,cAAYA;KACZ,gBAAcY;KACd,eAAeP,EAAKL,CAAI;IACzB,GARMA,CAQN;GAEL,CAAC;EACE,CAAA,GACL,kBAACX,GAAD;GACE,OAAOG;GACP,OAAOY;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAAMU,KAAK,QAAQP,EAAOO,CAAC;EACvC,CAAA,CACE;;AAET"}