@weasel-js/ui 1.6.0 → 1.7.0

package/dist/chunks/InlineRange-BwGFDhpT.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InlineRange-BwGFDhpT.js","names":[],"sources":["../../src/components/range.module.css","../../src/components/InlineRange/InlineRange.module.css","../../src/components/InlineRange/InlineRange.tsx"],"sourcesContent":["/* The one skin for a native <input type=\"range\">. Imported by InlineRange and\n   by the property rows, which render the same DOM and used to carry three\n   independently authored copies of these rules.\n\n   The track is painted here rather than left to `accent-color`: a UA fills the\n   left of the track with the accent but draws the remainder near-white on a\n   dark surface whatever `color-scheme` says, and overriding the track's\n   background removes the accent fill instead of recolouring the remainder. */\n.range {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 100%;\n  min-inline-size: 48px;\n  /* The box is taller than the track so the thumb has room to spill; a surface\n     where the element itself IS the track overrides this. */\n  height: var(--wzl-range-box-h, 12px);\n  margin: 0;\n  padding: 0;\n  /* Transparent so the track pseudo-element shows; a surface that paints the element itself overrides it. */\n  background: var(--wzl-range-bg, transparent);\n  cursor: pointer;\n}\n\n.range::-webkit-slider-runnable-track {\n  height: var(--wzl-slider-track-h, 4px);\n  border-radius: var(--wzl-radius-sm);\n  background: var(\n    --wzl-range-track-bg,\n    color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-mix, 18%), transparent)\n  );\n}\n\n.range::-moz-range-track {\n  height: var(--wzl-slider-track-h, 4px);\n  border-radius: var(--wzl-radius-sm);\n  background: var(\n    --wzl-range-track-bg,\n    color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-mix, 18%), transparent)\n  );\n}\n\n.range::-webkit-slider-thumb {\n  appearance: none;\n  -webkit-appearance: none;\n  width: var(--wzl-slider-thumb-size, 8px);\n  height: var(--wzl-slider-thumb-size, 8px);\n  border: none;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-mix, 70%), transparent);\n  /* Centres an 8px thumb on a 4px track. Webkit does not centre it for you. */\n  margin-top: calc((var(--wzl-slider-track-h, 4px) - var(--wzl-slider-thumb-size, 8px)) / 2);\n}\n\n.range::-moz-range-thumb {\n  width: var(--wzl-slider-thumb-size, 8px);\n  height: var(--wzl-slider-thumb-size, 8px);\n  border: none;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-mix, 70%), transparent);\n}\n\n.range:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 2px;\n}\n\n.range:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n/* Alpha variant: a fainter track, used where the row already carries a colour\n   swatch and the slider must not compete with it. */\n.alpha::-webkit-slider-runnable-track {\n  background: var(--wzl-range-track-bg, color-mix(in srgb, var(--wzl-accent) 10%, transparent));\n}\n\n.alpha::-moz-range-track {\n  background: var(--wzl-range-track-bg, color-mix(in srgb, var(--wzl-accent) 10%, transparent));\n}\n\n/* A dead alpha track keeps its groove but loses its thumb, so the affordance\n   reads inert rather than merely dimmed. Keyed off `:disabled`, which a color field\n   already sets on the input — not off a class on the row. */\n.alpha:disabled::-webkit-slider-runnable-track,\n.alpha:disabled::-moz-range-track {\n  background: color-mix(in srgb, var(--wzl-fg) 5%, transparent);\n}\n\n.alpha:disabled::-webkit-slider-thumb,\n.alpha:disabled::-moz-range-thumb {\n  background: transparent;\n}\n","/* Track and thumb come from the shared range skin. What is local to\n   InlineRange is the filled-to-N% paint, which no other surface has:\n   `--slider-fill` carries the value, since no static rule expresses it. */\n.range {\n  flex: 1;\n  --wzl-range-bg: linear-gradient(\n    to right,\n    var(--wzl-accent) 0 var(--slider-fill, 0%),\n    var(--wzl-border-strong) var(--slider-fill, 0%) 100%\n  );\n  --wzl-range-box-h: var(--wzl-slider-track-h);\n  /* The gradient above IS the track, so the shared track paint must not land on top of it. */\n  --wzl-range-track-bg: transparent;\n  border-radius: var(--wzl-radius-pill);\n}\n","import { type CSSProperties, forwardRef, type InputHTMLAttributes, type Ref } from 'react';\nimport shared from '../range.module.css';\nimport s from './InlineRange.module.css';\n\n/** Props for {@link InlineRange} — a range input's, with `value` required. */\nexport type InlineRangeProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'value' | 'min' | 'max'\n> & {\n  value: number;\n  min?: number;\n  max?: number;\n};\n\n/**\n * Compact range input for a property row: one track, no label, no output.\n *\n * Distinct from the kit's other two — `Slider` is shaped for canvas scrubbing,\n * and `RangeSlider` is a full-width labelled form control on React Aria. This\n * one exists to sit inline beside a swatch or a readout, and to own the track\n * painting both of those surfaces need.\n */\nexport const InlineRange = forwardRef(function InlineRange(\n  props: InlineRangeProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const { value, min = 0, max = 100, className, style, ...rest } = props;\n  const span = max - min;\n  const filled = span > 0 ? ((Math.min(Math.max(value, min), max) - min) / span) * 100 : 0;\n  return (\n    <input\n      {...rest}\n      ref={ref}\n      type=\"range\"\n      value={value}\n      min={min}\n      max={max}\n      className={[shared.range, s.range, className].filter(Boolean).join(' ')}\n      style={{ ['--slider-fill' as string]: `${filled}%`, ...style } as CSSProperties}\n    />\n  );\n});\n"],"mappings":";;;;;oCEsBa,IAAc,EAAW,SACpC,GACA,GACA;CACA,IAAM,EAAE,UAAO,SAAM,GAAG,SAAM,KAAK,cAAW,UAAO,GAAG,MAAS,GAC3D,IAAO,IAAM,GACb,IAAS,IAAO,KAAM,KAAK,IAAI,KAAK,IAAI,GAAO,EAAI,EAAE,EAAI,GAAG,KAAO,IAAQ,MAAM;AACvF,QACE,kBAAC,SAAD;EACE,GAAI;EACC;EACL,MAAK;EACE;EACF;EACA;EACL,WAAW;GAAC,EAAO;GAAO,EAAE;GAAO;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACvE,OAAO;GAAG,iBAA4B,GAAG,EAAO;GAAI,GAAG;GAAO;EAC9D,CAAA;EAEJ"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Input-Bx2cuUbS.js","names":[],"sources":["../../src/components/Input/Input.module.css","../../src/components/Input/Input.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 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. */\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 .frame { flex: 1 1 0; min-width: 0; }\n.field.row .below { flex-basis: 100%; }\n\n.frame {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  height: var(--wzl-field-h, var(--wzl-control-h));\n  padding: 0 var(--wzl-field-pad-x);\n  background: var(--wzl-input-surface, 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  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;\n}\n\n.frame input::placeholder {\n  color: var(--wzl-fg-subtle);\n}\n\n.adornment {\n  display: inline-flex;\n  align-items: center;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n  pointer-events: none;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  TextField,\n  Label,\n  Input as RACInput,\n  Text,\n  FieldError,\n  type TextFieldProps as RACTextFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses, type FieldOrientation } from '../Field/Field';\nimport s from './Input.module.css';\n\n/** Props for {@link Input}, on top of React Aria's `TextField` props. */\nexport type InputProps = Omit<RACTextFieldProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  /**\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  placeholder?: string;\n  leadingAdornment?: ReactNode;\n  trailingAdornment?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single-line text input wrapping React Aria's TextField. Supplies a\n * default skin against the `--wzl-*` token system, and exposes the\n * familiar label / description / errorMessage / adornment slot shape.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const {\n    label,\n    orientation = 'stacked',\n    description,\n    errorMessage,\n    placeholder,\n    leadingAdornment,\n    trailingAdornment,\n    className,\n    ...textFieldProps\n  } = props;\n\n  return (\n    <TextField\n      {...textFieldProps}\n      className={[\n        s.field,\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      <div className={s.frame}>\n        {leadingAdornment !== undefined && <span className={s.adornment}>{leadingAdornment}</span>}\n        <RACInput ref={ref} placeholder={placeholder} />\n        {trailingAdornment !== undefined && <span className={s.adornment}>{trailingAdornment}</span>}\n      </div>\n      {description !== undefined && (\n        <Text slot=\"description\" className={`${fieldClasses.hint} ${s.below}`}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={`${fieldClasses.error} ${s.below}`}>{errorMessage}</FieldError>\n    </TextField>\n  );\n});\n"],"mappings":";;;;;;;;;;;GCqCa,IAAQ,EAAW,SAC9B,GACA,GACA;CACA,IAAM,EACJ,UACA,iBAAc,WACd,gBACA,iBACA,gBACA,qBACA,sBACA,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW;GACT,EAAE;GACF,EAAa;GACb,MAAgB,SAAS,EAAa;GACtC,MAAgB,SAAS,EAAE;GAC3B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;YAVd;GAYG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,GAAG,EAAa,MAAM,GAAG,EAAE;cAAU;IAAc,CAAA;GAC7F,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB;KACG,MAAqB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAwB,CAAA;KAC1F,kBAAC,GAAD;MAAe;MAAkB;MAAe,CAAA;KAC/C,MAAsB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAyB,CAAA;KACxF;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,GAAG,EAAa,KAAK,GAAG,EAAE;cAC3D;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,GAAG,EAAa,MAAM,GAAG,EAAE;cAAU;IAA0B,CAAA;GAC5E;;EAEd"}

package/dist/chunks/ItemList-DzJ2lK0R.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemList-DzJ2lK0R.js","names":[],"sources":["../../src/components/ItemList/ItemList.tsx"],"sourcesContent":["/**\n * The row chrome behind a sidebar list — layers, history, anything that is a\n * flat column of selectable rows in a panel.\n *\n * It owns the container, the row box, the empty state, the list's semantics\n * and its keyboard; what a row *means* stays with the consumer. History dims\n * its redo entries and rules a line under the current one; a layer list drags\n * to reorder and leads each row with a swatch. Both reach that through\n * `className` and `rowProps` rather than through options here, so this does\n * not grow a flag per consumer.\n *\n * Rows are one height and one inset for every list, which is the point: two\n * panels stacked in the same sidebar have to agree, and they did not while\n * each owned a private copy of the same CSS.\n *\n * **Semantics.** The role follows what the list can do:\n * - nothing to select or activate → `list` / `listitem`, and no row is focusable;\n * - `selection` with no row controls → `listbox` / `option`, `aria-selected`;\n * - any row with `trailing` controls, or `onActivate` without `selection` →\n *   `grid` / `row`, with the leading content and label in one `gridcell` and\n *   the controls in a second. An option may not contain interactive content,\n *   so a list whose rows host toggles cannot be a listbox.\n *\n * **Keyboard.** One row is in the tab order: the one last focused, else the\n * first selected, else the first. Up/Down and Home/End move between rows,\n * Enter/Space activate, carrying modifiers so Shift+Space is Shift+click, and\n * Alt+Up/Down call `onNudge`. In a multi-select list with `onSelectRange`,\n * Shift+Up/Down and Shift+Home/End move focus and report the rows from the\n * anchor — the row last focused or activated other than by a range — to it. In a grid, Right steps from the row into its\n * controls, Left and Escape step back; the controls leave the tab order.\n */\nimport {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { CONTROL_SELECTOR, isInControlWithin } from '../../interactiveTarget';\nimport type { PressModifiers, ReorderGhost } from '../../useReorderDragList';\nimport { DragGhost } from '../DragGhost';\nimport s from './ItemList.module.css';\n\n/** One row. `id` is the React key. */\nexport interface ItemListRow {\n  id: string;\n  label: ReactNode;\n  /** Fixed-size decoration before the label — a color swatch. Not a control:\n   *  those go in `trailing`. */\n  leading?: ReactNode;\n  /** Buttons and toggles after the label — visibility, lock. They keep their\n   *  own clicks and keys, and turn the list into a grid. A control that edits\n   *  with the arrow keys does not belong here. */\n  trailing?: ReactNode;\n  /** The row the list considers current. With `selection` set this is also\n   *  `aria-selected`. */\n  selected?: boolean;\n  /** Present but not in effect — history's redo entries. */\n  muted?: boolean;\n  /** Part of a drag in progress — `useReorderDragList`'s `state.draggedIds`. */\n  dragging?: boolean;\n  /** Consumer classes for states this component has no opinion about. */\n  className?: string;\n  /** Handlers and data attributes for this row's element. `data-*` is\n   *  spelled out because `HTMLAttributes` does not admit it, and every\n   *  consumer here marks its rows up with one. A handler here runs before the\n   *  list's own, and `preventDefault()` in it keeps the list out. */\n  rowProps?: HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, unknown>;\n}\n\nexport interface ItemListProps {\n  rows: readonly ItemListRow[];\n  /** Shown in place of the rows when there are none. */\n  empty?: ReactNode;\n  className?: string;\n  /**\n   * Whether rows are selectable, and how many at once. The list reports\n   * `selected` to assistive tech; choosing what is selected stays with\n   * `onActivate`.\n   */\n  selection?: 'single' | 'multi';\n  /**\n   * A row was clicked, or Enter/Space was pressed on it, with the modifiers\n   * held. Clicks and keys on a row's `trailing` controls do not reach this.\n   */\n  onActivate?(id: string, index: number, mods: PressModifiers): void;\n  /**\n   * Alt+Up (`-1`) or Alt+Down (`1`) on a row: move it. Focus stays on the\n   * row wherever it lands. `useReorderDragList`'s `nudge` fits as-is.\n   */\n  onNudge?(id: string, index: number, delta: -1 | 1): void;\n  /**\n   * With `selection=\"multi\"`: Shift+Up/Down or Shift+Home/End moved focus,\n   * and `ids` is every row from the anchor to the newly focused one, in list\n   * order. The anchor is the row last focused or activated other than by a\n   * range move, so a click or a plain arrow move re-anchors. What the range does to\n   * the selection stays with the consumer, as with `onActivate`. Without it,\n   * Shift+Arrow only moves focus.\n   */\n  onSelectRange?(ids: string[]): void;\n  /**\n   * Where a drop would land, as an insertion index: `0` is above the first\n   * row, `rows.length` below the last. The list draws the seam itself, from\n   * the rows' own boxes, so it follows whatever height the density gives\n   * them. `useReorderDragList`'s `state.targetIndex` goes here as-is.\n   */\n  dropIndex?: number | null;\n  /** Rendered inside the container ahead of the rows. */\n  overlay?: ReactNode;\n  /** Spread onto the container: pointer handlers for a drag, `aria-label`. */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /** Rows to draw again under the pointer during a drag — `useReorderDragList`'s `state.ghost`. */\n  ghost?: ReorderGhost | null;\n}\n\ntype Mode = 'list' | 'listbox' | 'grid';\n\nconst ROLES: Record<Mode, { container: string; row: string }> = {\n  list: { container: 'list', row: 'listitem' },\n  listbox: { container: 'listbox', row: 'option' },\n  grid: { container: 'grid', row: 'row' },\n};\n\nexport const ItemList = forwardRef(function ItemList(\n  {\n    rows, empty, className, selection, onActivate, onNudge, onSelectRange, dropIndex, overlay,\n    containerProps, ghost,\n  }: ItemListProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  const hasTrailing = rows.some((r) => r.trailing != null);\n  const mode: Mode = hasTrailing || (onActivate && !selection)\n    ? 'grid'\n    : selection ? 'listbox' : 'list';\n  const interactive = mode !== 'list';\n\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const setRefs = useCallback(\n    (el: HTMLDivElement | null) => {\n      setContainer(el);\n      if (typeof ref === 'function') ref(el);\n      else if (ref) ref.current = el;\n    },\n    [ref],\n  );\n\n  /** The element of each row that takes focus: the row itself, or in a grid its label cell. */\n  const targets = 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  /** The row a range move is focusing, whose focus must not re-anchor. */\n  const extending = useRef<string | null>(null);\n\n  const stopId = rows.some((r) => r.id === focusId)\n    ? focusId\n    : (rows.find((r) => r.selected) ?? rows[0])?.id;\n\n  useLayoutEffect(() => {\n    const id = pendingFocus.current;\n    if (id == null) return;\n    pendingFocus.current = null;\n    const el = targets.current.get(id);\n    if (el && document.activeElement !== el) el.focus();\n  });\n\n  useLayoutEffect(() => {\n    if (mode !== 'grid') return;\n    for (const target of targets.current.values()) {\n      const cell = target.parentElement?.querySelector(`.${s.trailing}`);\n      cell?.querySelectorAll(CONTROL_SELECTOR).forEach((c) => c.setAttribute('tabindex', '-1'));\n    }\n  });\n\n  const cls = [s.list, className].filter(Boolean).join(' ');\n  if (rows.length === 0) {\n    return (\n      <div className={cls} ref={setRefs} {...containerProps}>\n        <div className={s.empty}>{empty ?? '—'}</div>\n      </div>\n    );\n  }\n\n  const focusRow = (index: number) => {\n    const row = rows[Math.max(0, Math.min(rows.length - 1, index))];\n    if (row) targets.current.get(row.id)?.focus();\n  };\n\n  const ranges = selection === 'multi' && onSelectRange !== undefined;\n\n  /** Moves focus to `index`: a range from the anchor when `extend`, else a plain move. */\n  const moveTo = (from: ItemListRow, index: number, extend: boolean) => {\n    const to = Math.max(0, Math.min(rows.length - 1, index));\n    if (!extend || !ranges) {\n      focusRow(to);\n      return;\n    }\n    let at = rows.findIndex((r) => r.id === anchor.current);\n    if (at < 0) {\n      anchor.current = from.id;\n      at = rows.indexOf(from);\n    }\n    extending.current = rows[to]!.id;\n    focusRow(to);\n    extending.current = null;\n    onSelectRange(rows.slice(Math.min(at, to), Math.max(at, to) + 1).map((r) => r.id));\n  };\n\n  const onKeyDown = (row: ItemListRow, i: number) => (e: KeyboardEvent<HTMLDivElement>) => {\n    row.rowProps?.onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    const target = targets.current.get(row.id);\n    if (!target) return;\n    const onTarget = e.target === target;\n    const controlCell = mode === 'grid'\n      ? e.currentTarget.querySelector<HTMLElement>(`.${s.trailing}`)\n      : null;\n    if (!onTarget && !controlCell?.contains(e.target as Node)) return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowUp': {\n        e.preventDefault();\n        const delta = e.key === 'ArrowDown' ? 1 : -1;\n        if (e.altKey && onNudge && onTarget) {\n          pendingFocus.current = row.id;\n          onNudge(row.id, i, delta);\n        } else {\n          moveTo(row, i + delta, e.shiftKey);\n        }\n        return;\n      }\n      case 'Home':\n      case 'End':\n        if (!onTarget) return;\n        e.preventDefault();\n        moveTo(row, e.key === 'Home' ? 0 : rows.length - 1, e.shiftKey);\n        return;\n      case 'Enter':\n      case ' ':\n        if (!onTarget) return;\n        e.preventDefault();\n        anchor.current = row.id;\n        onActivate?.(row.id, i, modsOf(e));\n        return;\n      case 'ArrowRight':\n      case 'ArrowLeft':\n      case 'Escape': {\n        if (!controlCell) return;\n        const controls = Array.from(controlCell.querySelectorAll<HTMLElement>(CONTROL_SELECTOR))\n          .filter((c) => !c.matches(':disabled'));\n        if (onTarget) {\n          if (e.key !== 'ArrowRight' || !controls[0]) return;\n          e.preventDefault();\n          controls[0].focus();\n          return;\n        }\n        e.preventDefault();\n        const at = controls.findIndex((c) => c.contains(e.target as Node));\n        if (e.key === 'ArrowRight') controls[at + 1]?.focus();\n        else if (e.key === 'ArrowLeft' && at > 0) controls[at - 1]?.focus();\n        else target.focus();\n        return;\n      }\n      default:\n    }\n  };\n\n  const onClick = (row: ItemListRow, i: number) => (e: MouseEvent<HTMLDivElement>) => {\n    row.rowProps?.onClick?.(e);\n    if (e.defaultPrevented || isInControlWithin(e.target, e.currentTarget)) return;\n    anchor.current = row.id;\n    onActivate?.(row.id, i, modsOf(e));\n  };\n\n  const onFocus = (row: ItemListRow) => (e: FocusEvent<HTMLDivElement>) => {\n    row.rowProps?.onFocus?.(e);\n    if (e.target !== targets.current.get(row.id)) return;\n    setFocusId(row.id);\n    if (extending.current !== row.id) anchor.current = row.id;\n  };\n\n  const targetRef = (id: string) => (el: HTMLElement | null) => {\n    if (el) targets.current.set(id, el);\n    else targets.current.delete(id);\n  };\n\n  const roles = ROLES[mode];\n  return (\n    <div\n      className={cls}\n      ref={setRefs}\n      {...containerProps}\n      role={roles.container}\n      aria-multiselectable={selection === 'multi' && mode !== 'list' ? true : undefined}\n    >\n      {overlay}\n      {ghost && container ? (\n        <DragGhost at={ghost} from={container}>\n          {rows\n            .filter((row) => ghost.ids.includes(row.id))\n            .map((row) => (\n              <div key={row.id} className={[s.row, row.selected && s.selected].filter(Boolean).join(' ')}>\n                {row.leading}\n                <span className={s.label}>{row.label}</span>\n              </div>\n            ))}\n        </DragGhost>\n      ) : null}\n      {rows.map((row, i) => {\n        const tabIndex = interactive ? (row.id === stopId ? 0 : -1) : undefined;\n        const content = (\n          <>\n            {row.leading}\n            <span className={s.label}>{row.label}</span>\n          </>\n        );\n        return (\n          <div\n            key={row.id}\n            className={[\n              s.row,\n              row.selected && s.selected,\n              row.muted && s.muted,\n              row.className,\n            ].filter(Boolean).join(' ')}\n            {...row.rowProps}\n            role={roles.row}\n            aria-selected={selection && mode !== 'list' ? !!row.selected : undefined}\n            ref={mode === 'listbox' ? targetRef(row.id) : undefined}\n            tabIndex={mode === 'listbox' ? tabIndex : row.rowProps?.tabIndex}\n            onKeyDown={interactive ? onKeyDown(row, i) : row.rowProps?.onKeyDown}\n            onClick={interactive ? onClick(row, i) : row.rowProps?.onClick}\n            onFocus={interactive ? onFocus(row) : row.rowProps?.onFocus}\n            data-drop={dropSide(dropIndex, i, rows.length)}\n            data-dragging={row.dragging ? 'true' : undefined}\n          >\n            {mode === 'grid' ? (\n              <>\n                <div role=\"gridcell\" className={s.cell} ref={targetRef(row.id)} tabIndex={tabIndex}>\n                  {content}\n                </div>\n                {row.trailing != null && (\n                  <div role=\"gridcell\" className={s.trailing}>{row.trailing}</div>\n                )}\n              </>\n            ) : content}\n          </div>\n        );\n      })}\n    </div>\n  );\n});\n\nfunction modsOf(e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean; altKey: boolean }): PressModifiers {\n  return { shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey };\n}\n\n/** Which edge of row `i` carries the seam for `dropIndex`, if any. */\nfunction dropSide(\n  dropIndex: number | null | undefined,\n  i: number,\n  count: number,\n): 'before' | 'after' | undefined {\n  if (dropIndex == null) return undefined;\n  if (dropIndex === i) return 'before';\n  if (dropIndex >= count && i === count - 1) return 'after';\n  return undefined;\n}\n"],"mappings":"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"}

package/dist/chunks/ItemList.module-DDUXfuZL.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemList.module-DDUXfuZL.js","names":[],"sources":["../../src/components/ItemList/ItemList.module.css"],"sourcesContent":["/* One height and one inset for every sidebar list. A panel stacking two of\n   them has to have their rows line up, which is what a private copy of this\n   file per list stopped happening. */\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  user-select: none;\n  -webkit-user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  padding: 0 var(--wzl-space-4);\n  height: var(--wzl-control-h);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg);\n  background: transparent;\n  border-radius: var(--wzl-radius-sm);\n  cursor: default;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.row:hover {\n  background: var(--wzl-surface);\n}\n\n.row:focus-visible,\n.row:has(> .cell:focus-visible) {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n/* A grid row's label cell takes the row's focus; the ring is drawn on the row\n   so it looks the same as a listbox option's. */\n.cell {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  flex: 1 1 auto;\n  min-width: 0;\n  align-self: stretch;\n  outline: none;\n}\n\n.trailing {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  flex: none;\n}\n\n.label {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.selected,\n.selected:hover {\n  background: var(--wzl-border);\n  color: var(--wzl-fg);\n}\n\n/* Drag feedback. The seam is an outer shadow of the row beside it: it needs no\n   measured offset, adds no element for a drag to count as a row, and escapes\n   the row's own `overflow: hidden`. */\n.row[data-drop='before'] { box-shadow: 0 -2px 0 0 var(--wzl-accent); }\n.row[data-drop='after']  { box-shadow: 0 2px 0 0 var(--wzl-accent); }\n.row[data-dragging] { opacity: 0.4; }\n\n/* Present but not in effect. */\n.muted {\n  color: var(--wzl-fg-subtle);\n}\n\n.empty {\n  padding: var(--wzl-space-6) var(--wzl-space-4);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  font-style: italic;\n}\n"],"mappings":""}

package/dist/chunks/Jog-LPoac9s4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Jog-LPoac9s4.js","names":[],"sources":["../../src/components/Jog/Jog.module.css","../../src/components/Jog/Jog.tsx"],"sourcesContent":["/* A row of transport controls on the panel surface, sized to sit in a bar\n * beside a title or a caption rather than to own a strip of its own. */\n\n.jog {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  color: var(--wzl-fg);\n}\n\n.scrub {\n  flex: 1 1 auto;\n  min-width: 80px;\n  margin-inline: var(--wzl-space-2);\n}\n\n.readout {\n  font-variant-numeric: tabular-nums;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  white-space: pre;\n}\n\n.caption {\n  overflow: hidden;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import type { ReactNode } from 'react';\nimport { PauseIcon, PlayIcon, StepBackIcon, StepForwardIcon } from '../../icons';\nimport { Button } from '../Button';\nimport { Slider } from '../Slider/Slider';\nimport s from './Jog.module.css';\n\n/** Props for {@link Jog}. */\nexport interface JogProps {\n  /** Which step is showing, 0-based. */\n  index: number;\n  /** How many steps there are. */\n  count: number;\n  playing: boolean;\n  onPlay: (playing: boolean) => void;\n  /** Move one step, back or forward. */\n  onStep: (by: -1 | 1) => void;\n  /** Jump to a step. Left out, no scrubber is drawn. */\n  onScrub?: (index: number) => void;\n  /** What one step is called, for the spoken labels. Defaults to `Step`. */\n  unit?: string;\n  /** Drawn after the readout — a beat's caption, a snapshot's date. */\n  caption?: ReactNode;\n  className?: string;\n}\n\n/**\n * Transport for something counted rather than timed: beat 3 of 24, not 4.20s of 12.00s.\n * `<Transport>` is the continuous-time one, and wants a playhead in milliseconds, a rate and\n * a loop, none of which a list of steps has.\n *\n * Named for the jog of jog/shuttle — moving one frame at a time, as against running at speed.\n */\nexport function Jog(props: JogProps) {\n  const { index, count, playing, onPlay, onStep, onScrub, unit = 'Step', caption, className } =\n    props;\n\n  const last = Math.max(0, count - 1);\n  const at = Math.min(Math.max(index, 0), last);\n  const spoken = `${unit} ${at + 1} of ${count}`;\n\n  return (\n    <div className={[s.jog, className].filter(Boolean).join(' ')}>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={`Previous ${unit.toLowerCase()}`}\n        disabled={at <= 0}\n        onClick={() => onStep(-1)}\n      >\n        <StepBackIcon size={14} />\n      </Button>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={playing ? 'Pause' : 'Play'}\n        disabled={count < 2}\n        onClick={() => onPlay(!playing)}\n      >\n        {playing ? <PauseIcon size={14} /> : <PlayIcon size={14} />}\n      </Button>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={`Next ${unit.toLowerCase()}`}\n        disabled={at >= last}\n        onClick={() => onStep(1)}\n      >\n        <StepForwardIcon size={14} />\n      </Button>\n\n      {onScrub && (\n        <Slider\n          className={s.scrub}\n          min={0}\n          max={last}\n          step={1}\n          snap=\"strict\"\n          density=\"slim\"\n          ariaLabel={unit}\n          thumbs={[{ value: at, valueText: spoken }]}\n          onInput={(next) => onScrub(Math.round(next[0]?.value ?? 0))}\n        />\n      )}\n\n      <span className={s.readout} data-testid=\"jog-readout\">\n        {pad(at + 1, count)}/{count}\n      </span>\n      {caption ? <span className={s.caption}>{caption}</span> : null}\n    </div>\n  );\n}\n\n/**\n * Figure spaces, not regular ones: the readout updates every beat, and a run from 9 to 10 that\n * widens by a digit shoves whatever follows it along the row. `tabular-nums` fixes the width of\n * a digit and not how many there are, so the padding is what holds the row still.\n */\nfunction pad(value: number, count: number): string {\n  return String(value).padStart(String(count).length, ' ');\n}\n"],"mappings":";;;;;;;;;;;;ACgCA,SAAgB,EAAI,GAAiB;CACnC,IAAM,EAAE,UAAO,UAAO,YAAS,WAAQ,WAAQ,YAAS,UAAO,QAAQ,YAAS,iBAC9E,GAEI,IAAO,KAAK,IAAI,GAAG,IAAQ,EAAE,EAC7B,IAAK,KAAK,IAAI,KAAK,IAAI,GAAO,EAAE,EAAE,EAAK,EACvC,IAAS,GAAG,EAAK,GAAG,IAAK,EAAE,MAAM;AAEvC,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA5D;GACE,kBAAC,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAW,YAAY,EAAK,aAAa;IACzC,UAAU,KAAM;IAChB,eAAe,EAAO,GAAG;cAEzB,kBAAC,GAAD,EAAc,MAAM,IAAM,CAAA;IACnB,CAAA;GACT,kBAAC,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAW,IAAU,UAAU;IAC/B,UAAU,IAAQ;IAClB,eAAe,EAAO,CAAC,EAAQ;cAEpB,EAAV,IAAW,IAA0B,GAA3B,EAAW,MAAM,IAAM,CAAyB;IACpD,CAAA;GACT,kBAAC,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAW,QAAQ,EAAK,aAAa;IACrC,UAAU,KAAM;IAChB,eAAe,EAAO,EAAE;cAExB,kBAAC,GAAD,EAAiB,MAAM,IAAM,CAAA;IACtB,CAAA;GAER,KACC,kBAAC,GAAD;IACE,WAAW,EAAE;IACb,KAAK;IACL,KAAK;IACL,MAAM;IACN,MAAK;IACL,SAAQ;IACR,WAAW;IACX,QAAQ,CAAC;KAAE,OAAO;KAAI,WAAW;KAAQ,CAAC;IAC1C,UAAU,MAAS,EAAQ,KAAK,MAAM,EAAK,IAAI,SAAS,EAAE,CAAC;IAC3D,CAAA;GAGJ,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAS,eAAY;cAAxC;KACG,EAAI,IAAK,GAAG,EAAM;KAAC;KAAE;KACjB;;GACN,IAAU,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAU;IAAe,CAAA,GAAG;GACtD;;;AASV,SAAS,EAAI,GAAe,GAAuB;AACjD,QAAO,OAAO,EAAM,CAAC,SAAS,OAAO,EAAM,CAAC,QAAQ,IAAI"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Keycaps-CKiKOJnJ.js","names":[],"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.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayerList-BeGrkLb9.js","names":[],"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

@@ -1,74 +0,0 @@
-import { t as e } from "./Button-Dyp31jMt.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 = {
-	editor: "_editor_14hyz_1",
-	list: "_list_14hyz_8",
-	entry: "_entry_14hyz_17",
-	input: "_input_14hyz_23",
-	empty: "_empty_14hyz_42",
-	actions: "_actions_14hyz_48"
-};
-//#endregion
-//#region src/components/ListEditor/ListEditor.tsx
-function s({ value: s, onChange: c, placeholder: l, empty: u = "None", addLabel: d = "Add", "aria-label": f, className: p }) {
-	let m = i([]), [h, g] = a(null);
-	r(() => {
-		h !== null && (m.current[h]?.focus(), g(null));
-	}, [h]);
-	let _ = (e) => {
-		c([
-			...s.slice(0, e),
-			"",
-			...s.slice(e)
-		]), g(e);
-	}, v = (e) => {
-		c(s.filter((t, n) => n !== e)), s.length > 1 && g(Math.max(0, e - 1));
-	}, y = (e, t) => {
-		e.key === "Enter" ? (e.preventDefault(), _(t + 1)) : e.key === "Backspace" && s[t] === "" && (e.preventDefault(), v(t));
-	}, b = (e) => `${f ?? "Entry"} ${e + 1}`;
-	return /* @__PURE__ */ n("div", {
-		className: [o.editor, p].filter(Boolean).join(" "),
-		role: "group",
-		"aria-label": f,
-		children: [s.length === 0 ? /* @__PURE__ */ t("div", {
-			className: o.empty,
-			children: u
-		}) : /* @__PURE__ */ t("ul", {
-			className: o.list,
-			children: s.map((r, i) => /* @__PURE__ */ n("li", {
-				className: o.entry,
-				children: [/* @__PURE__ */ t("input", {
-					ref: (e) => {
-						m.current[i] = e;
-					},
-					type: "text",
-					className: o.input,
-					"aria-label": b(i),
-					value: r,
-					placeholder: l,
-					onChange: (e) => c(s.map((t, n) => n === i ? e.target.value : t)),
-					onKeyDown: (e) => y(e, i)
-				}), /* @__PURE__ */ t(e, {
-					variant: "ghost",
-					size: "sm",
-					iconOnly: !0,
-					ariaLabel: `Remove ${b(i)}`,
-					onClick: () => v(i),
-					children: "×"
-				})]
-			}, i))
-		}), /* @__PURE__ */ t("div", {
-			className: o.actions,
-			children: /* @__PURE__ */ t(e, {
-				size: "sm",
-				onClick: () => _(s.length),
-				children: d
-			})
-		})]
-	});
-}
-//#endregion
-export { s as t };
-
-//# sourceMappingURL=ListEditor-C6zLzCsJ.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListEditor-C6zLzCsJ.js","names":[],"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,SAAgB,EAAW,EACzB,UACA,aACA,gBACA,WAAQ,QACR,cAAW,OACX,cAAc,GACd,gBACkB;CAClB,IAAM,IAAS,EAAoC,EAAE,CAAC,EAChD,CAAC,GAAO,KAAY,EAAwB,KAAK;AAEvD,SAAgB;AACV,QAAU,SACd,EAAO,QAAQ,IAAQ,OAAO,EAC9B,EAAS,KAAK;IACb,CAAC,EAAM,CAAC;CAEX,IAAM,KAAU,MAAqB;AAEnC,EADA,EAAS;GAAC,GAAG,EAAM,MAAM,GAAG,EAAG;GAAE;GAAI,GAAG,EAAM,MAAM,EAAG;GAAC,CAAC,EACzD,EAAS,EAAG;IAER,KAAU,MAAqB;AAEnC,EADA,EAAS,EAAM,QAAQ,GAAG,MAAM,MAAM,EAAG,CAAC,EACtC,EAAM,SAAS,KAAG,EAAS,KAAK,IAAI,GAAG,IAAK,EAAE,CAAC;IAE/C,KAAa,GAAoC,MAAqB;AAC1E,EAAI,EAAE,QAAQ,WACZ,EAAE,gBAAgB,EAClB,EAAO,IAAK,EAAE,IACL,EAAE,QAAQ,eAAe,EAAM,OAAQ,OAChD,EAAE,gBAAgB,EAClB,EAAO,EAAG;IAGR,KAAQ,MAAsB,GAAG,KAAa,QAAQ,GAAG,IAAI;AAEnE,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,MAAK;EAAQ,cAAY;YAA1F,CACG,EAAM,WAAW,IAChB,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAQ;GAAY,CAAA,GAEtC,kBAAC,MAAD;GAAI,WAAW,EAAE;aACd,EAAM,KAAK,GAAO,MAEjB,kBAAC,MAAD;IAAY,WAAW,EAAE;cAAzB,CACE,kBAAC,SAAD;KACE,MAAM,MAAO;AACX,QAAO,QAAQ,KAAK;;KAEtB,MAAK;KACL,WAAW,EAAE;KACb,cAAY,EAAK,EAAE;KACnB,OAAO;KACM;KACb,WAAW,MAAM,EAAS,EAAM,KAAK,GAAG,MAAO,MAAM,IAAI,EAAE,OAAO,QAAQ,EAAG,CAAC;KAC9E,YAAY,MAAM,EAAU,GAAG,EAAE;KACjC,CAAA,EACF,kBAAC,GAAD;KACE,SAAQ;KACR,MAAK;KACL,UAAA;KACA,WAAW,UAAU,EAAK,EAAE;KAC5B,eAAe,EAAO,EAAE;eACzB;KAEQ,CAAA,CACN;MAtBI,EAsBJ,CACL;GACC,CAAA,EAEP,kBAAC,OAAD;GAAK,WAAW,EAAE;aAChB,kBAAC,GAAD;IAAQ,MAAK;IAAK,eAAe,EAAO,EAAM,OAAO;cAClD;IACM,CAAA;GACL,CAAA,CACF"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton-BcdhrNGh.js","names":[],"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,SAAgB,EAAsC,EACpD,UACA,UACA,aACA,eACA,cACA,cAAc,GACd,oBACA,aACA,cACqB;CACrB,IAAM,EAAE,WAAQ,mBAAgB,EAAiB,EAAgB;AACjE,QACE,kBAAC,GAAD,EAAA,UAAA;EACG;EACD,kBAAC,GAAD;GACE,SAAS,EAAsB;IAAE;IAAS;IAAU;IAAW;IAAO,CAAC;GACvE,UAAU;aAEV,kBAAC,GAAD;IACE,WAAW,CAAC,EAAE,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;IAC/C;IACZ,cAAY;cAHd,CAKE,kBAAC,QAAD;KAAM,WAAW,EAAE;eAAQ;KAAa,CAAA,EACxC,kBAAC,OAAD;KAAK,WAAW,EAAE;KAAS,SAAQ;KAAY,eAAY;eACzD,kBAAC,QAAD;MAAM,GAAE;MAAiB,MAAK;MAAO,QAAO;MAAe,aAAY;MAAM,eAAc;MAAQ,gBAAe;MAAU,CAAA;KACxH,CAAA,CACI;;GACG,CAAA;EAGjB,kBAAC,GAAD;GAAY,WAAW,EAAE;GAAS,uBAAoB;GAAG,GAAI;aAC3D,kBAAC,GAAD;IAAS,WAAW,EAAE;IAAM,WAAW,MAAQ,EAAS,EAAS;cAC9D,EAAM,KAAK,MACV,kBAAC,GAAD;KAEE,IAAI,EAAK;KACT,WAAW,EAAE;KACb,YAAY,EAAK;KACjB,WAAW,EAAK,cAAc,OAAO,EAAK,SAAU,WAAW,EAAK,QAAQ,KAAA;eAE3E,EAAK;KACM,EAPP,EAAK,MAOE,CACd;IACM,CAAA;GACC,CAAA;EACD,EAAA,CAAA"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"MeshEditor-BOOIFWnz.js","names":[],"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":";;;;;;;;;;;;GCaM,IAA+C;CACnD;EAAE,OAAO;EAAO,OAAO;EAAQ;CAC/B;EAAE,OAAO;EAAS,OAAO;EAAS;CAClC;EAAE,OAAO;EAAS,OAAO;EAAS;CACnC;AA2BD,SAAgB,EAAW,GAAsC;CAC/D,IAAM,EAAE,UAAO,YAAS,aAAU,iBAAc,IAAM,iBAAc,GAC9D,IAAQ,EAAM,eAAe,OAE7B,KAAc,GAAoB,GAAgB,MAA6B,EAAQ;EAC3F,GAAG;EACH,SAAS,EAAM,QAAQ,KAAK,GAAO,MAAM;AACvC,OAAI,MAAM,EAAY,QAAO;GAC7B,IAAM,CAAC,GAAG,GAAG,GAAG,KAAK,EAAM,QACrB,IAAyC;IAAC;IAAG;IAAG;IAAG;IAAE;AAE3D,UADA,EAAK,KAAU,GACR;IAAE,GAAG;IAAO,QAAQ;IAAM;IACjC;EACH,CAAC;AAEF,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7D,CACG,EAAM,QAAQ,KAAK,GAAO,MAGzB,kBAAC,OAAD;GAAsB,WAAW,EAAE;aAAnC,CACE,kBAAC,QAAD;IACE,WAAW,EAAE;IACb,eAAY;IACZ,OAAO,EAAE,YAAY,EAAU,GAAO,EAAW,EAAE;IACnD,CAAA,EACF,kBAAC,OAAD;IAAK,WAAW,EAAE;cACf,EAAM,OAAO,KAAK,GAAO,MACxB,kBAAC,GAAD;KAEE,OAAO;KACP,OAAA;KACA,cAAY,SAAS,IAAa,EAAE,UAAU,IAAS;KACvD,WAAW,EAAE;KACb,UAAU,MAAS,IAAU,EAAW,GAAY,GAAQ,EAAK,CAAC;KAClE,WAAW,MAAS,EAAS,EAAW,GAAY,GAAQ,EAAK,CAAC;KAClE,EAPK,EAOL,CACF;IACE,CAAA,CACF;KAnBI,EAmBJ,CACN,EAED,KACC,kBAAC,GAAD;GACE,OAAO;GACP,OAAO;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAAS,KAAQ,EAAS,EAAQ;IAAE,GAAG;IAAO,aAAa;IAAM,CAAC,CAAC;GAC9E,CAAA,CAEA;;;AAMV,SAAS,EAAU,GAAyB,GAAwC;AAClF,QAAO,EACL;EAAE,GAAG;EAAO,SAAS,CAAC,EAAM,QAAQ,GAAY;EAAE,CACnD;;AAIH,SAAgB,EAAY,GAA0E;AACpG,QAAO,EAAmB,EAAK"}

package/dist/chunks/NumberField-C1Y7zP-a.js

@@ -1,117 +0,0 @@
-import { a as e, r as t } from "./number-6S8IzXVt.js";
-import { n } from "./Field-xbqRmjsI.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";
-var h = {
-	field: "_field_1v3hc_1",
-	row: "_row_1v3hc_12",
-	label: "_label_1v3hc_19",
-	fit: "_fit_1v3hc_20",
-	frame: "_frame_1v3hc_20",
-	below: "_below_1v3hc_22",
-	steppers: "_steppers_1v3hc_72",
-	stepper: "_stepper_1v3hc_72",
-	ghost: "_ghost_1v3hc_113"
-}, g = a(function(e, t) {
-	let { label: a, orientation: o = "stacked", description: s, errorMessage: g, hideSteppers: _, ghost: v, placeholder: y, width: b = "fill", className: x, ...S } = e;
-	return /* @__PURE__ */ i(p, {
-		...S,
-		className: [
-			h.field,
-			b === "fit" && h.fit,
-			n.root,
-			o === "row" && n.row,
-			o === "row" && h.row,
-			x
-		].filter(Boolean).join(" "),
-		children: [
-			a !== void 0 && /* @__PURE__ */ r(f, {
-				className: `${n.label} ${h.label}`,
-				children: a
-			}),
-			/* @__PURE__ */ i(u, {
-				className: v ? `${h.frame} ${h.ghost}` : h.frame,
-				children: [/* @__PURE__ */ r(d, {
-					ref: t,
-					placeholder: y
-				}), !_ && /* @__PURE__ */ i("div", {
-					className: h.steppers,
-					children: [/* @__PURE__ */ r(c, {
-						slot: "increment",
-						className: h.stepper,
-						"aria-label": "Increment",
-						children: "▲"
-					}), /* @__PURE__ */ r(c, {
-						slot: "decrement",
-						className: h.stepper,
-						"aria-label": "Decrement",
-						children: "▼"
-					})]
-				})]
-			}),
-			s !== void 0 && /* @__PURE__ */ r(m, {
-				slot: "description",
-				className: `${n.hint} ${h.below}`,
-				children: s
-			}),
-			/* @__PURE__ */ r(l, {
-				className: `${n.error} ${h.below}`,
-				children: g
-			})
-		]
-	});
-});
-//#endregion
-//#region src/components/NumberField/UnitField.tsx
-function _({ value: i, onChange: a, minValue: c, maxValue: l, step: u = 1, accepts: d, placeholder: f, ghost: p, width: m = "fill", className: g, "aria-label": _ }) {
-	let [v, y] = s(null), b = o(!1), x = Number.isFinite(i) ? t(i, {
-		useGrouping: !1,
-		maximumFractionDigits: 20
-	}) : "", S = (e) => Math.min(l ?? Infinity, Math.max(c ?? -Infinity, e)), C = (e) => {
-		let t = S(e);
-		t !== i && a(t);
-	};
-	return /* @__PURE__ */ r("div", {
-		className: [
-			h.field,
-			m === "fit" && h.fit,
-			n.root,
-			g
-		].filter(Boolean).join(" "),
-		children: /* @__PURE__ */ r("div", {
-			className: p ? `${h.frame} ${h.ghost}` : h.frame,
-			children: /* @__PURE__ */ r("input", {
-				type: "text",
-				inputMode: "decimal",
-				"aria-label": _,
-				placeholder: f,
-				value: v ?? x,
-				onChange: (e) => y(e.target.value),
-				onFocus: () => {
-					b.current = !1;
-				},
-				onBlur: () => {
-					if (v !== null && !b.current) {
-						let t = e(v, d);
-						Number.isFinite(t) && C(t);
-					}
-					y(null);
-				},
-				onKeyDown: (t) => {
-					if (t.key === "Enter") t.currentTarget.blur();
-					else if (t.key === "Escape") b.current = !0, t.currentTarget.blur();
-					else if (t.key === "ArrowUp" || t.key === "ArrowDown") {
-						t.preventDefault();
-						let n = v === null ? i : e(v, d), r = S((Number.isFinite(n) ? n : 0) + (t.key === "ArrowUp" ? u : -u));
-						y(null), r !== i && a(r);
-					}
-				}
-			})
-		})
-	});
-}
-//#endregion
-export { g as n, _ as t };
-
-//# sourceMappingURL=NumberField-C1Y7zP-a.js.map

package/dist/chunks/NumberField-C1Y7zP-a.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NumberField-C1Y7zP-a.js","names":[],"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.map

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"PaintField-B2mLRZa4.js","names":[],"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,SAAS,EAAU,GAAqC,GAAwB;AAI9E,QAHI,IAAc,UACd,MAAU,OAAa,SACvB,MAAU,KAAA,IAAkB,MACzB,EAAa,EAAM,QAAQ,QAAQ,EAAE,SAAU,EAAM,QAAQ;;AAatE,SAAgB,EAAW,GAAsC;CAC/D,IAAM,EACJ,UAAO,WAAQ,IAAO,WAAQ,IAAO,UAAO,eAAY,IACxD,YAAS,aAAU,cAAW,uBAC5B,GACE,IAAY,EAAM,eAClB,EAAE,WAAQ,mBAAgB,EAAiB,EAAgB,EAC3D,IAAU,IAAQ,KAAA,IAAY,EAAgB,EAAM;AAE1D,QACE,kBAAC,GAAD,EAAA,UAAA;EACG;EACD,kBAAC,GAAD;GACE,WAAW,CAAC,EAAE,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC3D,cAAY;GACZ,GAAK,IAAQ,EAAE,cAAc,IAAI,GAAG,EAAE;GACtC,GAAK,IAAQ,EAAE,cAAc,IAAI,GAAG,EAAE;aAJxC,CAME,kBAAC,QAAD;IACE,WAAW,EAAE;IACb,eAAY;IACZ,GAAK,IAAU,EAAE,OAAO,EAAE,YAAY,GAAS,EAAE,GAAG,EAAE,cAAc,IAAI;IACxE,CAAA,EACF,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAQ,EAAU,GAAO,EAAM;IAAQ,CAAA,CAChD;;EAGZ,kBAAC,GAAD;GAAY,WAAW,EAAE;GAAS,uBAAoB;GAAG,GAAI;aAC3D,kBAAC,GAAD;IAAW,WAAW,EAAE;IAAM,cAAY,IAAY,GAAG,EAAU,WAAW;cAC5E,kBAAC,GAAD;KACS;KACA;KACA;KACA;KACI;KACF;KACC;KACV,cAAY;KACZ,CAAA;IACQ,CAAA;GACD,CAAA;EACC,EAAA,CAAA"}