@weasel-js/ui 1.3.0-pre.0 → 1.4.0-pre.0

package/dist/chunks/Timeline-DsLeV5I1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline-DsLeV5I1.js","names":[],"sources":["../../src/components/Timeline/Timeline.module.css","../../src/components/Timeline/easingSpec.ts","../../src/components/Timeline/EasingPicker.tsx","../../src/components/Timeline/timeScale.ts","../../src/components/Timeline/lanes.ts","../../src/components/Timeline/keys.ts","../../src/components/Timeline/Lane.tsx","../../src/components/Timeline/Ruler.tsx","../../src/components/Timeline/Transport.tsx","../../src/components/Timeline/Timeline.tsx","../../src/components/Timeline/AnimatedTimeline.tsx"],"sourcesContent":[".ruler {\n  position: relative;\n  height: var(--wzl-control-h, 24px);\n  border-bottom: 1px solid var(--wzl-border);\n  background: var(--wzl-surface-raised);\n  cursor: ew-resize;\n  user-select: none;\n  overflow: hidden;\n}\n\n.tick {\n  position: absolute;\n  top: 0;\n  transform: translateX(2px);\n  color: var(--wzl-fg-muted);\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.tick::before {\n  content: '';\n  position: absolute;\n  left: -2px;\n  top: 0;\n  bottom: 0;\n  border-left: 1px solid var(--wzl-border);\n}\n\n.playhead {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: var(--wzl-accent-strong);\n  pointer-events: none;\n}\n\n.lane {\n  display: flex;\n  align-items: stretch;\n  min-height: 20px;\n  border-bottom: 1px solid var(--wzl-line-subtle);\n}\n\n.laneLabel {\n  flex: 0 0 var(--wzl-timeline-label-w, 120px);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding-inline: 6px;\n  padding-inline-start: calc(6px + var(--depth, 0) * 12px);\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.lane[data-depth='1'] .laneLabel { --depth: 1; }\n.lane[data-depth='2'] .laneLabel { --depth: 2; }\n.lane[data-depth='3'] .laneLabel { --depth: 3; }\n\n.disclosure { display: inline-flex; flex: none; cursor: pointer; color: var(--wzl-fg-muted); }\n.disclosureIcon { transition: transform var(--wzl-motion-fast) ease; }\n.disclosureCollapsed { transform: rotate(-90deg); }\n\n.laneTrack {\n  position: relative;\n  flex: 1 1 auto;\n  min-width: 0;\n  background: var(--wzl-surface);\n}\n\n.key, .eventMark {\n  position: absolute;\n  top: 50%;\n  width: 9px;\n  height: 9px;\n  margin-left: -4.5px;\n  background: var(--wzl-fg-muted);\n  cursor: ew-resize;\n}\n\n.key { transform: translateY(-50%) rotate(45deg); }\n.eventMark { transform: translateY(-50%); border-radius: 50%; }\n\n.key[aria-current='true'], .eventMark[aria-current='true'] { background: var(--wzl-accent-strong); }\n.key:focus-visible, .eventMark:focus-visible { outline: 2px solid var(--wzl-focus-ring); outline-offset: 1px; }\n\n/* The key stays drawn where it was committed while its ghost tracks the\n   pointer, so the drag reads as a move from somewhere to somewhere. */\n.key[data-dragging='true'], .eventMark[data-dragging='true'] { opacity: 0.4; }\n\n.keyGhost, .eventGhost {\n  position: absolute;\n  top: 50%;\n  width: 9px;\n  height: 9px;\n  margin-left: -4.5px;\n  background: var(--wzl-accent-soft);\n  border: 1px dashed var(--wzl-accent-strong);\n  pointer-events: none;\n}\n\n.keyGhost { transform: translateY(-50%) rotate(45deg); }\n.eventGhost { transform: translateY(-50%); border-radius: 50%; }\n.lane[data-mode='graph'] .keyGhost { top: auto; transform: translateY(50%) rotate(45deg); }\n\n.curve {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  fill: none;\n  stroke: var(--wzl-accent-strong);\n  stroke-width: 1;\n}\n\n.lane[data-mode='graph'] { min-height: 72px; }\n.lane[data-mode='graph'] .key { top: auto; transform: translateY(50%) rotate(45deg); }\n\n.nestedBar {\n  position: absolute;\n  top: 4px;\n  bottom: 4px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: 2px;\n}\n\n.transport {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 6px;\n  border-bottom: 1px solid var(--wzl-border);\n  background: var(--wzl-surface-raised);\n}\n\n.transportButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 22px;\n  padding: 2px 6px;\n  /* Sits on `--wzl-surface-raised`, so a transparent fill and a border that\n     close in value leave it reading as text rather than as a control. */\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: 3px;\n  color: var(--wzl-fg);\n  cursor: pointer;\n}\n\n.transportButton:hover { border-color: var(--wzl-fg-muted); }\n\n.transportButton[aria-checked='true'] {\n  background: var(--wzl-accent-soft);\n  border-color: var(--wzl-accent-strong);\n  color: var(--wzl-accent-strong);\n}\n\n/* The bar's chrome lives on the row, so controls beside `<Transport>` sit\n   inside it rather than hanging off the panel's corner. `.transport` keeps its\n   own chrome for standalone use. */\n.transportRow {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding-inline-end: 6px;\n  border-bottom: 1px solid var(--wzl-border);\n  background: var(--wzl-surface-raised);\n}\n\n.transportRow > .transport {\n  flex: 1 1 auto;\n  border-bottom: 0;\n  background: transparent;\n}\n\n.time { font-variant-numeric: tabular-nums; color: var(--wzl-fg-muted); }\n.rate { display: inline-flex; align-items: center; gap: 6px; color: var(--wzl-fg-muted); }\n.rateSlider { width: 88px; }\n\n/* The detents carry no labels in a bar this dense, so the chosen rate is said\n   once, here, in a fixed-width cell so the controls beside it never shift. */\n.rateReadout {\n  min-width: 3ch;\n  font-variant-numeric: tabular-nums;\n  color: var(--wzl-fg);\n}\n\n.root {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: 4px;\n  color: var(--wzl-fg);\n  /* `--wzl-font-ui` is condensed, so it reads a size smaller than it measures.\n     Everything below inherits this; override per rule only to go up. */\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading-snug);\n}\n\n.label { padding: 4px 6px; color: var(--wzl-fg-muted); }\n\n.body { display: flex; align-items: stretch; }\n.gutter { flex: 0 0 var(--wzl-timeline-label-w, 120px); border-right: 1px solid var(--wzl-border); }\n.rulerWrap { flex: 1 1 auto; min-width: 0; }\n\n.lanes {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.inspector {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 6px;\n  border-top: 1px solid var(--wzl-border);\n  background: var(--wzl-surface-raised);\n}\n\n.segment {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  cursor: pointer;\n}\n\n.segment[aria-current='true'] { background: var(--wzl-accent-soft); }\n.segment:focus-visible { outline: 2px solid var(--wzl-focus-ring); outline-offset: -2px; }\n\n.easingPicker { display: inline-flex; align-items: center; gap: 6px; }\n.easingLabel { font-variant-numeric: tabular-nums; color: var(--wzl-fg-muted); }\n\n.easingPreview {\n  width: 32px;\n  height: 32px;\n  fill: none;\n  stroke: var(--wzl-accent-strong);\n  stroke-width: 1;\n  border: 1px solid var(--wzl-border);\n}\n\n.bezierHandle {\n  position: absolute;\n  width: 7px;\n  height: 7px;\n  margin: -3.5px 0 0 -3.5px;\n  border-radius: 50%;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-accent-strong);\n  cursor: grab;\n}\n","import { EASINGS, resolveEasing, type EasingName, type EasingSpec } from '@weasel-js/core';\n\nfunction bezierOf(spec: EasingSpec): readonly [number, number, number, number] | null {\n  if (typeof spec === 'object' && spec !== null && 'bezier' in spec) return spec.bezier;\n  return null;\n}\n\n/** Control points, for the graph view's draggable handles. `null` means this\n *  spec has no handles to drag — the view offers to convert it to a bezier. */\nexport function easingBezier(spec?: EasingSpec): readonly [number, number, number, number] | null {\n  if (spec === undefined) return null;\n  return bezierOf(spec);\n}\n\n/** What the picker shows for a spec.\n *\n *  A function is matched against the built-ins by reference so a consumer that\n *  passed `easeOutBack` directly still reads back as `'easeOutBack'`. A wrapped\n *  or hand-written function cannot be named and reads as `'custom'` — which is\n *  why an editor writes names and control points rather than functions. */\nexport function easingLabel(spec?: EasingSpec): string {\n  if (spec === undefined) return 'linear';\n  if (typeof spec === 'string') return spec;\n  const b = bezierOf(spec);\n  if (b) return `cubic-bezier(${b.join(', ')})`;\n  for (const [name, fn] of Object.entries(EASINGS)) {\n    if (fn === spec) return name;\n  }\n  return 'custom';\n}\n\n/** `count` evenly spaced samples of the curve over 0..1, for drawing it. */\nexport function sampleEasing(spec: EasingSpec | undefined, count: number): number[] {\n  const fn = resolveEasing(spec);\n  const out = new Array<number>(count);\n  const last = count - 1;\n  for (let i = 0; i < count; i++) out[i] = fn(last === 0 ? 0 : i / last);\n  return out;\n}\n\n/** Every built-in name, for the picker's list. */\nexport const EASING_NAMES = Object.keys(EASINGS) as EasingName[];\n","import type { ReactElement } from 'react';\nimport type { EasingSpec } from '@weasel-js/core';\nimport s from './Timeline.module.css';\nimport { EASING_NAMES, easingBezier, easingLabel, sampleEasing } from './easingSpec';\n\n/** Samples drawn in the inline curve preview. */\nconst PREVIEW_SAMPLES = 24;\n\n/** Control points for the named curves the picker can convert. A name the table\n *  does not cover converts to the CSS default rather than refusing. */\nconst BEZIER_OF: Partial<Record<string, readonly [number, number, number, number]>> = {\n  linear: [0, 0, 1, 1],\n  easeInQuad: [0.11, 0, 0.5, 0],\n  easeOutQuad: [0.5, 1, 0.89, 1],\n  easeInOutQuad: [0.45, 0, 0.55, 1],\n  easeInCubic: [0.32, 0, 0.67, 0],\n  easeOutCubic: [0.33, 1, 0.68, 1],\n  easeInOutCubic: [0.65, 0, 0.35, 1],\n  easeInSine: [0.12, 0, 0.39, 0],\n  easeOutSine: [0.61, 1, 0.88, 1],\n  easeInOutSine: [0.37, 0, 0.63, 1],\n};\n\nconst DEFAULT_BEZIER: readonly [number, number, number, number] = [0.25, 0.1, 0.25, 1];\n\nexport interface EasingPickerProps {\n  value: EasingSpec | undefined;\n  onChange: (next: EasingSpec | undefined) => void;\n}\n\nexport function EasingPicker(props: EasingPickerProps): ReactElement {\n  const { value, onChange } = props;\n  const bezier = easingBezier(value);\n  const label = easingLabel(value);\n  const named = bezier === null && (EASING_NAMES as string[]).includes(label);\n  const selectValue = bezier !== null ? 'custom' : named ? label : 'linear';\n\n  const points = sampleEasing(value, PREVIEW_SAMPLES)\n    .map((v, i) => `${(i / (PREVIEW_SAMPLES - 1)) * 100},${100 - v * 100}`)\n    .join(' ');\n\n  return (\n    <div className={s.easingPicker}>\n      <label>\n        Easing\n        <select\n          value={selectValue}\n          onChange={(e) => onChange(e.target.value === 'linear' ? undefined : e.target.value as EasingSpec)}\n        >\n          <option value=\"linear\">linear</option>\n          {EASING_NAMES.filter((n) => n !== 'linear').map((n) => <option key={n} value={n}>{n}</option>)}\n          {bezier !== null ? <option value=\"custom\">custom</option> : null}\n        </select>\n      </label>\n\n      {bezier !== null ? <span className={s.easingLabel}>{label}</span> : (\n        <button\n          type=\"button\"\n          className={s.transportButton}\n          onClick={() => onChange({ bezier: BEZIER_OF[selectValue] ?? DEFAULT_BEZIER })}\n        >\n          Convert to bezier\n        </button>\n      )}\n\n      <svg className={s.easingPreview} data-testid=\"easing-preview\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\">\n        <polyline points={points} vectorEffect=\"non-scaling-stroke\" />\n      </svg>\n    </div>\n  );\n}\n","/** A visible span of timeline time, in ms. */\nexport interface TimeWindow {\n  from: number;\n  to: number;\n}\n\nexport interface TimeScale {\n  window: TimeWindow;\n  widthPx: number;\n  toPx(ms: number): number;\n  toMs(px: number): number;\n}\n\n/** Narrowest window the user can zoom to, in ms. Below this the playhead and\n *  the keys it sits between stop being separable at any sane track width. */\nconst MIN_SPAN_MS = 1;\n\nexport function createTimeScale(window: TimeWindow, widthPx: number): TimeScale {\n  const span = window.to - window.from;\n  const perMs = span === 0 ? 0 : widthPx / span;\n  const perPx = widthPx === 0 ? 0 : span / widthPx;\n  return {\n    window,\n    widthPx,\n    toPx: (ms) => (ms - window.from) * perMs,\n    toMs: (px) => window.from + px * perPx,\n  };\n}\n\n/** Where `ms` sits in the window, as a fraction. The width-free half of\n *  `createTimeScale` — a CSS `left: %` needs no pixel width, and asking for one\n *  is what drove three copies of this arithmetic into the lane and the ruler. */\nexport function toFraction(window: TimeWindow, ms: number): number {\n  const span = window.to - window.from;\n  return span === 0 ? 0 : (ms - window.from) / span;\n}\n\n/** `toFraction` as a CSS percentage. */\nexport function toPercent(window: TimeWindow, ms: number): string {\n  return `${toFraction(window, ms) * 100}%`;\n}\n\n/** A duration as a fraction of the window. Distinct from `toFraction`, which\n *  measures a position and so subtracts `window.from`. */\nexport function spanFraction(window: TimeWindow, ms: number): number {\n  const span = window.to - window.from;\n  return span === 0 ? 0 : ms / span;\n}\n\n/** A duration as a CSS percentage, for a width. */\nexport function spanPercent(window: TimeWindow, ms: number): string {\n  return `${spanFraction(window, ms) * 100}%`;\n}\n\nfunction clampWindow(w: TimeWindow, bounds: TimeWindow): TimeWindow {\n  const span = Math.min(w.to - w.from, bounds.to - bounds.from);\n  let from = w.from;\n  if (from < bounds.from) from = bounds.from;\n  if (from + span > bounds.to) from = bounds.to - span;\n  return { from, to: from + span };\n}\n\n/** Scale the window by `factor` about `atMs`, which stays at the same fraction\n *  of the track. `factor < 1` zooms in. */\nexport function zoomWindow(\n  w: TimeWindow, atMs: number, factor: number, bounds: TimeWindow,\n): TimeWindow {\n  const span = w.to - w.from;\n  const maxSpan = bounds.to - bounds.from;\n  const nextSpan = Math.min(maxSpan, Math.max(MIN_SPAN_MS, span * factor));\n  const frac = span === 0 ? 0.5 : (atMs - w.from) / span;\n  return clampWindow({ from: atMs - frac * nextSpan, to: atMs + (1 - frac) * nextSpan }, bounds);\n}\n\n/** Shift the window by `byMs`, preserving its span. */\nexport function panWindow(w: TimeWindow, byMs: number, bounds: TimeWindow): TimeWindow {\n  return clampWindow({ from: w.from + byMs, to: w.to + byMs }, bounds);\n}\n\n/** 1, 2, 5, 10, 20, 50, … — the tick steps that read as round numbers. */\nfunction niceStep(roughMs: number): number {\n  const mag = Math.pow(10, Math.floor(Math.log10(roughMs)));\n  const norm = roughMs / mag;\n  const step = norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 5 ? 5 : 10;\n  return step * mag;\n}\n\n/** Ruler tick times inside `w`, spaced at least `minSpacingPx` apart. */\nexport function tickTimes(w: TimeWindow, widthPx: number, minSpacingPx: number): number[] {\n  const span = w.to - w.from;\n  if (widthPx <= 0 || span <= 0) return [];\n  const step = niceStep((minSpacingPx / widthPx) * span);\n  const out: number[] = [];\n  for (let t = Math.ceil(w.from / step) * step; t <= w.to + 1e-9; t += step) {\n    out.push(Math.round(t / step) * step);\n  }\n  return out;\n}\n","import type { SampledTrack, Track } from '@weasel-js/core';\n\nexport interface LaneRow {\n  /** Stable across re-renders and edits: the dotted index path. */\n  key: string;\n  /** Index path into the track tree, outermost first. */\n  path: number[];\n  track: Track;\n  label: string;\n  /** Nesting depth; 0 for a top-level track. */\n  depth: number;\n  /** Accumulated `at` from every nested parent, in ms. A key drawn on this row\n   *  sits at `offset + key.t` on the ruler. */\n  offset: number;\n  kind: Track['kind'];\n  /** True only for a sampled track whose every key value is a number — the\n   *  sole case where a value axis has an honest meaning. */\n  numeric: boolean;\n}\n\nfunction isNumeric(track: Track): boolean {\n  if (track.kind !== 'sampled') return false;\n  const keys = (track as SampledTrack<unknown>).keys;\n  return keys.length > 0 && keys.every((k) => typeof k.value === 'number');\n}\n\n/** Flatten the track tree to rows, descending only into expanded nested\n *  timelines. `expanded` holds the `key` of each open nested row. */\nexport function buildLanes(\n  tracks: readonly Track[],\n  expanded: ReadonlySet<string>,\n): LaneRow[] {\n  const out: LaneRow[] = [];\n  const walk = (list: readonly Track[], path: number[], depth: number, offset: number): void => {\n    list.forEach((track, i) => {\n      const nextPath = [...path, i];\n      const key = nextPath.join('.');\n      out.push({\n        key,\n        path: nextPath,\n        track,\n        label: track.label ?? `${track.kind} ${i}`,\n        depth,\n        offset,\n        kind: track.kind,\n        numeric: isNumeric(track),\n      });\n      if (track.kind === 'timeline' && expanded.has(key)) {\n        walk(track.timeline.tracks, nextPath, depth + 1, offset + track.at);\n      }\n    });\n  };\n  walk(tracks, [], 0, 0);\n  return out;\n}\n\n/** The track at an index path, or `undefined` when the path leaves the tree. */\nexport function trackAtPath(tracks: readonly Track[], path: readonly number[]): Track | undefined {\n  let list: readonly Track[] = tracks;\n  let found: Track | undefined;\n  for (const i of path) {\n    found = list[i];\n    if (!found) return undefined;\n    list = found.kind === 'timeline' ? found.timeline.tracks : [];\n  }\n  return found;\n}\n","import { sampleTrack, type EasingSpec, type EventTrack, type Keyframe, type SampledTrack, type TimelineTrack, type Track } from '@weasel-js/core';\nimport { trackAtPath } from './lanes';\n\nexport interface KeySelection {\n  /** Index path into the track tree, outermost first — a `LaneRow.path`. A\n   *  top-level track is `[i]`; a track inside the nested timeline at `i` is\n   *  `[i, j]`. */\n  trackPath: readonly number[];\n  keyIndex: number;\n}\n\nexport interface KeyEdit {\n  tracks: Track[];\n  selection: KeySelection | null;\n}\n\n/** True when two index paths address the same track. */\nexport function samePath(a: readonly number[], b: readonly number[]): boolean {\n  return a.length === b.length && a.every((n, i) => n === b[i]);\n}\n\n/** Shallow-clone one track, replacing only its key list. `onTick`, `fire`,\n *  `interpolate` and `interpolator` survive as references, which is what lets a\n *  running timeline take an edited track without rewiring. */\nfunction withKeys(track: Track, keys: Keyframe<unknown>[]): Track {\n  return { ...(track as SampledTrack<unknown>), keys } as Track;\n}\n\nfunction withEvents(track: Track, events: EventTrack['events']): Track {\n  return { ...(track as EventTrack), events } as Track;\n}\n\n/** Replace the track at `path`, cloning the timeline tracks along the way so\n *  the caller's tree is untouched at every level, not just the top. */\nfunction replaceAtPath(tracks: readonly Track[], path: readonly number[], next: Track): Track[] {\n  const out = tracks.slice();\n  const [i, ...rest] = path;\n  if (rest.length === 0) {\n    out[i] = next;\n    return out;\n  }\n  const parent = out[i];\n  if (parent?.kind !== 'timeline') return out;\n  const tt = parent as TimelineTrack;\n  out[i] = {\n    ...tt,\n    timeline: { ...tt.timeline, tracks: replaceAtPath(tt.timeline.tracks, rest, next) },\n  };\n  return out;\n}\n\n/** Move a key or an event crossing to `toMs`, clamped at zero. `toMs` is in the\n *  addressed track's own time, not the ruler's — a nested track's keys are\n *  measured from its parent's `at`.\n *\n *  Re-sorts, and reports the moved entry's new index. `sampleTrack` binary-\n *  searches without sorting first, so a drag past a neighbour that left the list\n *  unsorted would sample the wrong segment and raise nothing. */\nexport function moveKey(\n  tracks: readonly Track[], sel: KeySelection, toMs: number,\n): KeyEdit {\n  const track = trackAtPath(tracks, sel.trackPath);\n  const t = Math.max(0, toMs);\n\n  if (track?.kind === 'sampled') {\n    const st = track as SampledTrack<unknown>;\n    const moved = { ...st.keys[sel.keyIndex], t };\n    const keys = st.keys.filter((_, i) => i !== sel.keyIndex);\n    const at = keys.findIndex((k) => k.t > t);\n    const keyIndex = at === -1 ? keys.length : at;\n    keys.splice(keyIndex, 0, moved);\n    return {\n      tracks: replaceAtPath(tracks, sel.trackPath, withKeys(track, keys)),\n      selection: { trackPath: sel.trackPath, keyIndex },\n    };\n  }\n\n  if (track?.kind === 'event') {\n    const et = track as EventTrack;\n    const moved = { ...et.events[sel.keyIndex], t };\n    const events = et.events.filter((_, i) => i !== sel.keyIndex);\n    const at = events.findIndex((e) => e.t > t);\n    const keyIndex = at === -1 ? events.length : at;\n    events.splice(keyIndex, 0, moved);\n    return {\n      tracks: replaceAtPath(tracks, sel.trackPath, withEvents(track, events)),\n      selection: { trackPath: sel.trackPath, keyIndex },\n    };\n  }\n\n  return { tracks: tracks.slice(), selection: sel };\n}\n\n/** Insert a key at `atMs`, seeded with whatever the track already reads there\n *  so inserting alone never changes the motion. */\nexport function insertKey(\n  tracks: readonly Track[], trackPath: readonly number[], atMs: number,\n): KeyEdit {\n  const track = trackAtPath(tracks, trackPath);\n  if (track?.kind !== 'sampled') return { tracks: tracks.slice(), selection: null };\n\n  const st = track as SampledTrack<unknown>;\n  const t = Math.max(0, atMs);\n  const value = st.keys.length === 0 ? 0 : sampleTrack(st, t);\n  const keys = st.keys.slice();\n  const at = keys.findIndex((k) => k.t > t);\n  const keyIndex = at === -1 ? keys.length : at;\n  keys.splice(keyIndex, 0, { t, value });\n  return {\n    tracks: replaceAtPath(tracks, trackPath, withKeys(track, keys)),\n    selection: { trackPath, keyIndex },\n  };\n}\n\n/** Remove a key, selecting the one before it. */\nexport function deleteKey(tracks: readonly Track[], sel: KeySelection): KeyEdit {\n  const track = trackAtPath(tracks, sel.trackPath);\n  if (track?.kind !== 'sampled') return { tracks: tracks.slice(), selection: sel };\n\n  const st = track as SampledTrack<unknown>;\n  const keys = st.keys.filter((_, i) => i !== sel.keyIndex);\n  return {\n    tracks: replaceAtPath(tracks, sel.trackPath, withKeys(track, keys)),\n    selection: keys.length === 0\n      ? null\n      : { trackPath: sel.trackPath, keyIndex: Math.max(0, sel.keyIndex - 1) },\n  };\n}\n\n/** Set the easing shaping the approach INTO the selected key. */\nexport function setKeyEasing(\n  tracks: readonly Track[], sel: KeySelection, easing: EasingSpec | undefined,\n): Track[] {\n  const track = trackAtPath(tracks, sel.trackPath);\n  if (track?.kind !== 'sampled') return tracks.slice();\n\n  const st = track as SampledTrack<unknown>;\n  const keys = st.keys.slice();\n  const { easing: _drop, ...rest } = keys[sel.keyIndex];\n  keys[sel.keyIndex] = easing === undefined ? rest : { ...rest, easing };\n  return replaceAtPath(tracks, sel.trackPath, withKeys(track, keys));\n}\n\n/** Set the selected key's value, leaving its time alone. */\nexport function setKeyValue(\n  tracks: readonly Track[], sel: KeySelection, value: unknown,\n): Track[] {\n  const track = trackAtPath(tracks, sel.trackPath);\n  if (track?.kind !== 'sampled') return tracks.slice();\n\n  const st = track as SampledTrack<unknown>;\n  const keys = st.keys.slice();\n  keys[sel.keyIndex] = { ...keys[sel.keyIndex], value };\n  return replaceAtPath(tracks, sel.trackPath, withKeys(track, keys));\n}\n\n/** Snap `ms` to the nearest candidate within `toleranceMs`, else return it. */\nexport function snapTime(ms: number, candidates: readonly number[], toleranceMs: number): number {\n  let best = ms;\n  let bestDist = toleranceMs;\n  for (const c of candidates) {\n    const d = Math.abs(c - ms);\n    if (d <= bestDist) {\n      best = c;\n      bestDist = d;\n    }\n  }\n  return best;\n}\n","import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactElement } from 'react';\nimport { cubicBezierEasing, type EasingSpec, type EventTrack, type SampledTrack, type TimelineTrack } from '@weasel-js/core';\nimport { ChevronIcon } from '../../icons';\nimport s from './Timeline.module.css';\nimport { createTimeScale, spanPercent, toFraction, toPercent, type TimeWindow } from './timeScale';\nimport { snapTime } from './keys';\nimport { easingBezier, sampleEasing } from './easingSpec';\nimport type { LaneRow } from './lanes';\n\n/** Keeps the extreme keys inside the lane: at 0% a marker centres on the lane's\n *  border and hangs half into its neighbour. Symmetric, so the midpoint holds. */\nconst V_INSET_PCT = 8;\n\n/** Snap radius, in track pixels. */\nconst SNAP_PX = 6;\n\n/** One arrow-key step, in ms; shift multiplies by ten. */\nconst KEY_STEP_MS = 10;\n\n/** Samples per segment when drawing an eased curve in graph mode. */\nconst CURVE_SAMPLES = 16;\n\nexport interface LaneProps {\n  row: LaneRow;\n  window: TimeWindow;\n  mode: 'dope' | 'graph';\n  /** Index of the selected key on THIS row, or null. */\n  selection: number | null;\n  onSelect: (keyIndex: number) => void;\n  /** Live during a drag. `value` is set only in graph mode on a numeric row. */\n  onKeyInput: (keyIndex: number, toMs: number, value?: number) => void;\n  /** Once, at the end of a gesture. `value` is set only in graph mode on a numeric row. */\n  onKeyCommit: (keyIndex: number, toMs: number, value?: number) => void;\n  onInsert: (atMs: number) => void;\n  onToggleExpand: () => void;\n  expanded: boolean;\n  /** Times a dragged key snaps to. */\n  snapTimes: readonly number[];\n  /** Index of the key a selected segment runs INTO, or null. */\n  selectedSegment?: number | null;\n  onSelectSegment?: (keyIndex: number) => void;\n  /** Once, at the end of a bezier-handle drag. */\n  onEasingCommit?: (keyIndex: number, easing: EasingSpec) => void;\n}\n\n/** `count` evenly spaced samples of a bezier curve, straight from its control\n *  points — not through `resolveEasing`. A drag writes a fresh set of control\n *  points on every pointermove, and `resolveEasing`'s cache is keyed by them:\n *  routing a live preview through it would leave one permanent cache entry per\n *  pixel of drag. Only the value committed on pointerup ever reaches it. */\nfunction sampleBezierDirect(points: readonly [number, number, number, number], count: number): number[] {\n  const fn = cubicBezierEasing(...points);\n  const out = new Array<number>(count);\n  const last = count - 1;\n  for (let i = 0; i < count; i++) out[i] = fn(last === 0 ? 0 : i / last);\n  return out;\n}\n\nfunction entryTimes(row: LaneRow): number[] {\n  if (row.kind === 'sampled') return (row.track as SampledTrack<unknown>).keys.map((k) => k.t);\n  if (row.kind === 'event') return (row.track as EventTrack).events.map((e) => e.t);\n  return [];\n}\n\nexport function Lane(props: LaneProps): ReactElement {\n  const {\n    row, window: win, mode, selection, onSelect, onKeyInput, onKeyCommit, onInsert, onToggleExpand, expanded, snapTimes,\n    selectedSegment = null, onSelectSegment, onEasingCommit,\n  } = props;\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const endDragRef = useRef<(() => void) | null>(null);\n  useEffect(() => () => { endDragRef.current?.(); }, []);\n\n  // Live position of a bezier handle being dragged; null once the drag ends.\n  // Distinct from the committed spec on the key so a preview never writes it.\n  const [dragBezier, setDragBezier] = useState<{ keyIndex: number; points: readonly [number, number, number, number] } | null>(null);\n\n  // Where the dragged key would land. Owned here rather than derived from the\n  // tracks prop, so a drag previews whether or not the consumer wires\n  // `onKeyInput` — the committed key stays put underneath as the origin.\n  const [drag, setDrag] = useState<{ keyIndex: number; t: number; value?: number } | null>(null);\n\n  const pct = (ms: number): string => toPercent(win, ms + row.offset);\n\n  const msAt = (clientX: number): number => {\n    const rect = trackRef.current?.getBoundingClientRect();\n    if (!rect) return win.from;\n    return createTimeScale(win, rect.width).toMs(clientX - rect.left) - row.offset;\n  };\n\n  const snapPxToMs = (): number => {\n    const width = trackRef.current?.getBoundingClientRect().width ?? 0;\n    const scale = createTimeScale(win, width);\n    return scale.toMs(SNAP_PX) - scale.toMs(0);\n  };\n\n  // Value axis: only a numeric sampled row in graph mode has an honest one.\n  const graph = mode === 'graph' && row.numeric;\n  const sampledKeys = row.kind === 'sampled' ? (row.track as SampledTrack<number>).keys : [];\n  const values = sampledKeys.map((k) => k.value);\n  const lo = graph ? Math.min(...values) : 0;\n  const hi = graph ? Math.max(...values) : 1;\n  const vSpan = hi - lo || 1;\n  const vPct = (v: number): number => V_INSET_PCT + ((v - lo) / vSpan) * (100 - 2 * V_INSET_PCT);\n\n  const valueAt = (clientY: number): number => {\n    const rect = trackRef.current?.getBoundingClientRect();\n    if (!rect || rect.height === 0) return lo;\n    const frac = 1 - (clientY - rect.top) / rect.height;\n    const norm = (frac * 100 - V_INSET_PCT) / (100 - 2 * V_INSET_PCT);\n    return lo + Math.min(1, Math.max(0, norm)) * vSpan;\n  };\n\n  const curvePoints = (): string => {\n    const pts: string[] = [];\n    for (let i = 1; i < sampledKeys.length; i++) {\n      const a = sampledKeys[i - 1];\n      const b = sampledKeys[i];\n      const eased = dragBezier && dragBezier.keyIndex === i\n        ? sampleBezierDirect(dragBezier.points, CURVE_SAMPLES)\n        : sampleEasing(b.easing, CURVE_SAMPLES);\n      for (let j = 0; j < eased.length; j++) {\n        const t = a.t + ((b.t - a.t) * j) / (eased.length - 1);\n        const v = a.value + (b.value - a.value) * eased[j];\n        pts.push(`${toFraction(win, t + row.offset) * 100},${100 - vPct(v)}`);\n      }\n    }\n    return pts.join(' ');\n  };\n\n  // The segment a bezier handle drags: the key it runs into and the one before it.\n  const committedBezier = selectedSegment != null && row.kind === 'sampled'\n    ? easingBezier(sampledKeys[selectedSegment]?.easing)\n    : null;\n  const activeBezier = dragBezier && dragBezier.keyIndex === selectedSegment ? dragBezier.points : committedBezier;\n\n  const bezierHandlePos = (segIndex: number, xFrac: number, yFrac: number): { left: string; bottom: string } => {\n    const a = sampledKeys[segIndex - 1];\n    const b = sampledKeys[segIndex];\n    const t = a.t + xFrac * (b.t - a.t);\n    const v = a.value + yFrac * (b.value - a.value);\n    return { left: pct(t), bottom: `${vPct(v)}%` };\n  };\n\n  const onHandlePointerDown = (segIndex: number, h: 0 | 1) => (e: ReactPointerEvent<HTMLDivElement>): void => {\n    if (e.button !== 0 || !committedBezier) return;\n    e.stopPropagation();\n    const a = sampledKeys[segIndex - 1];\n    const b = sampledKeys[segIndex];\n    let points: [number, number, number, number] = [...committedBezier];\n\n    const at = (ev: { clientX: number; clientY: number }): [number, number, number, number] => {\n      const ms = msAt(ev.clientX);\n      const xFrac = b.t === a.t ? 0 : Math.min(1, Math.max(0, (ms - a.t) / (b.t - a.t)));\n      const v = valueAt(ev.clientY);\n      const yFrac = b.value === a.value ? 0 : (v - a.value) / (b.value - a.value);\n      const next = [...points] as [number, number, number, number];\n      next[h * 2] = xFrac;\n      next[h * 2 + 1] = yFrac;\n      return next;\n    };\n\n    const move = (ev: PointerEvent): void => {\n      points = at(ev);\n      setDragBezier({ keyIndex: segIndex, points });\n    };\n    const up = (ev: PointerEvent): void => {\n      points = at(ev);\n      onEasingCommit?.(segIndex, { bezier: points });\n      end();\n    };\n    const end = (): void => {\n      setDragBezier(null);\n      document.removeEventListener('pointermove', move);\n      document.removeEventListener('pointerup', up);\n      document.removeEventListener('pointercancel', end);\n      endDragRef.current = null;\n    };\n    document.addEventListener('pointermove', move);\n    document.addEventListener('pointerup', up);\n    document.addEventListener('pointercancel', end);\n    endDragRef.current = end;\n  };\n\n  const onKeyPointerDown = (i: number) => (e: ReactPointerEvent<HTMLDivElement>): void => {\n    if (e.button !== 0) return;\n    e.stopPropagation();\n    onSelect(i);\n\n    // `snapTimes` are ruler times and `msAt` is track-local, so a nested row\n    // has to cross into ruler space to snap and back out to commit.\n    const at = (ev: { clientX: number; altKey: boolean }): number => {\n      const raw = Math.max(0, msAt(ev.clientX));\n      return ev.altKey ? raw : snapTime(raw + row.offset, snapTimes, snapPxToMs()) - row.offset;\n    };\n    const valueOf = (ev: { clientY: number }): number | undefined =>\n      graph ? valueAt(ev.clientY) : undefined;\n\n    setDrag({ keyIndex: i, t: times[i], value: values[i] });\n\n    const move = (ev: PointerEvent): void => {\n      const v = valueOf(ev);\n      setDrag({ keyIndex: i, t: at(ev), value: v ?? values[i] });\n      if (v === undefined) onKeyInput(i, at(ev)); else onKeyInput(i, at(ev), v);\n    };\n    const up = (ev: PointerEvent): void => {\n      const v = valueOf(ev);\n      if (v === undefined) onKeyCommit(i, at(ev)); else onKeyCommit(i, at(ev), v);\n      end();\n    };\n    const end = (): void => {\n      setDrag(null);\n      document.removeEventListener('pointermove', move);\n      document.removeEventListener('pointerup', up);\n      document.removeEventListener('pointercancel', end);\n      endDragRef.current = null;\n    };\n    document.addEventListener('pointermove', move);\n    document.addEventListener('pointerup', up);\n    document.addEventListener('pointercancel', end);\n    endDragRef.current = end;\n  };\n\n  const onKeyDown = (i: number, t: number) => (e: ReactKeyboardEvent<HTMLDivElement>): void => {\n    const step = KEY_STEP_MS * (e.shiftKey ? 10 : 1);\n    if (e.key === 'ArrowRight') { e.preventDefault(); onKeyCommit(i, t + step); }\n    if (e.key === 'ArrowLeft') { e.preventDefault(); onKeyCommit(i, Math.max(0, t - step)); }\n  };\n\n  const times = entryTimes(row);\n\n  return (\n    <div className={s.lane} data-depth={row.depth} data-mode={mode}>\n      <div className={s.laneLabel}>\n        {row.kind === 'timeline' ? (\n          <span\n            role=\"button\"\n            tabIndex={0}\n            aria-expanded={expanded}\n            data-testid=\"timeline-disclosure\"\n            className={s.disclosure}\n            onClick={onToggleExpand}\n            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggleExpand(); } }}\n          >\n            <ChevronIcon\n              size={14}\n              className={[s.disclosureIcon, !expanded && s.disclosureCollapsed].filter(Boolean).join(' ')}\n            />\n          </span>\n        ) : null}\n        {row.label}\n      </div>\n      <div\n        className={s.laneTrack}\n        ref={trackRef}\n        data-testid=\"timeline-lane-track\"\n        onDoubleClick={(e) => { if (row.kind === 'sampled') onInsert(Math.max(0, msAt(e.clientX))); }}\n      >\n        {row.kind === 'timeline' ? (\n          <div\n            className={s.nestedBar}\n            data-testid=\"timeline-nested\"\n            style={{ left: pct(0), width: spanPercent(win, (row.track as TimelineTrack).timeline.duration ?? 0) }}\n          />\n        ) : null}\n        {row.kind === 'sampled' ? sampledKeys.slice(1).map((k, idx) => {\n          const i = idx + 1;\n          return (\n            <div\n              key={`seg-${i}`}\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`${row.label} segment into ${Math.round(k.t)} ms`}\n              aria-current={selectedSegment === i ? 'true' : undefined}\n              data-testid=\"timeline-segment\"\n              className={s.segment}\n              style={{ left: pct(sampledKeys[i - 1].t), width: spanPercent(win, k.t - sampledKeys[i - 1].t) }}\n              onClick={() => onSelectSegment?.(i)}\n              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelectSegment?.(i); } }}\n            />\n          );\n        }) : null}\n        {graph && sampledKeys.length > 1 ? (\n          <svg className={s.curve} data-testid=\"timeline-curve\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\">\n            <polyline points={curvePoints()} vectorEffect=\"non-scaling-stroke\" />\n          </svg>\n        ) : null}\n        {times.map((t, i) => (\n          <div\n            key={i}\n            role=\"button\"\n            tabIndex={0}\n            aria-label={`${row.label} key at ${Math.round(t)} ms`}\n            aria-current={selection === i ? 'true' : undefined}\n            data-testid={row.kind === 'event' ? 'timeline-event' : 'timeline-key'}\n            data-dragging={drag?.keyIndex === i ? 'true' : undefined}\n            className={row.kind === 'event' ? s.eventMark : s.key}\n            style={graph ? { left: pct(t), bottom: `${vPct(values[i])}%` } : { left: pct(t) }}\n            onPointerDown={onKeyPointerDown(i)}\n            onKeyDown={onKeyDown(i, t)}\n          />\n        ))}\n        {drag ? (\n          <div\n            aria-hidden=\"true\"\n            data-testid=\"timeline-key-ghost\"\n            className={row.kind === 'event' ? s.eventGhost : s.keyGhost}\n            style={graph && drag.value !== undefined\n              ? { left: pct(drag.t), bottom: `${vPct(drag.value)}%` }\n              : { left: pct(drag.t) }}\n          />\n        ) : null}\n        {graph && activeBezier && selectedSegment != null ? (\n          <>\n            <div\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`${row.label} bezier handle 1`}\n              data-testid=\"timeline-bezier-handle\"\n              className={s.bezierHandle}\n              style={bezierHandlePos(selectedSegment, activeBezier[0], activeBezier[1])}\n              onPointerDown={onHandlePointerDown(selectedSegment, 0)}\n            />\n            <div\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`${row.label} bezier handle 2`}\n              data-testid=\"timeline-bezier-handle\"\n              className={s.bezierHandle}\n              style={bezierHandlePos(selectedSegment, activeBezier[2], activeBezier[3])}\n              onPointerDown={onHandlePointerDown(selectedSegment, 1)}\n            />\n          </>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n","import { useEffect, useLayoutEffect, useRef, useState, type PointerEvent as ReactPointerEvent, type ReactElement, type WheelEvent as ReactWheelEvent } from 'react';\nimport s from './Timeline.module.css';\nimport { createTimeScale, panWindow, tickTimes, toPercent, zoomWindow, type TimeWindow } from './timeScale';\n\n/** Minimum gap between ruler ticks, in px. */\nconst TICK_SPACING_PX = 64;\n\n/** One wheel notch's zoom factor. */\nconst ZOOM_STEP = 0.0015;\n\nexport interface RulerProps {\n  window: TimeWindow;\n  /** The full extent the window may cover — normally `{ from: 0, to: duration }`. */\n  bounds: TimeWindow;\n  playhead: number;\n  onScrub: (t: number) => void;\n  onWindowChange: (w: TimeWindow) => void;\n}\n\nfunction formatMs(ms: number): string {\n  if (ms >= 1000) return `${(ms / 1000).toFixed(ms % 1000 === 0 ? 0 : 2)}s`;\n  return `${Math.round(ms)}ms`;\n}\n\nexport function Ruler(props: RulerProps): ReactElement {\n  const { window: win, bounds, playhead, onScrub, onWindowChange } = props;\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const endDragRef = useRef<(() => void) | null>(null);\n  useEffect(() => () => { endDragRef.current?.(); }, []);\n\n  // Re-render once the track is mounted so ticks lay out against its real\n  // width — `trackRef.current` is null on the render that first attaches it.\n  const [width, setWidth] = useState(0);\n  useLayoutEffect(() => {\n    const el = trackRef.current;\n    if (!el) return;\n    const update = (): void => setWidth(el.getBoundingClientRect().width);\n    update();\n    if (typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const widthOf = (): number => trackRef.current?.getBoundingClientRect().width ?? 0;\n  const msAt = (clientX: number): number => {\n    const rect = trackRef.current?.getBoundingClientRect();\n    if (!rect) return win.from;\n    const scale = createTimeScale(win, rect.width);\n    const raw = scale.toMs(clientX - rect.left);\n    return Math.min(win.to, Math.max(win.from, raw));\n  };\n\n  // Document listeners, never setPointerCapture: capture retargets pointerup and\n  // kills the click on non-native children. See BandEditor, same idiom.\n  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>): void => {\n    if (e.button !== 0) return;\n    onScrub(msAt(e.clientX));\n\n    const move = (ev: PointerEvent): void => { onScrub(msAt(ev.clientX)); };\n    const end = (): void => {\n      document.removeEventListener('pointermove', move);\n      document.removeEventListener('pointerup', end);\n      document.removeEventListener('pointercancel', end);\n      endDragRef.current = null;\n    };\n    document.addEventListener('pointermove', move);\n    document.addEventListener('pointerup', end);\n    document.addEventListener('pointercancel', end);\n    endDragRef.current = end;\n  };\n\n  const onWheel = (e: ReactWheelEvent<HTMLDivElement>): void => {\n    if (e.ctrlKey) {\n      onWindowChange(zoomWindow(win, msAt(e.clientX), Math.exp(e.deltaY * ZOOM_STEP), bounds));\n    } else {\n      const width = widthOf();\n      const perPx = width === 0 ? 0 : (win.to - win.from) / width;\n      onWindowChange(panWindow(win, e.deltaY * perPx, bounds));\n    }\n  };\n\n  const ticks = tickTimes(win, width, TICK_SPACING_PX);\n  const pct = (ms: number): string => toPercent(win, ms);\n\n  return (\n    <div\n      className={s.ruler}\n      ref={trackRef}\n      data-testid=\"timeline-ruler\"\n      onPointerDown={onPointerDown}\n      onWheel={onWheel}\n    >\n      {ticks.map((t) => (\n        <span\n          key={t}\n          className={s.tick}\n          data-testid=\"timeline-tick\"\n          style={{ left: pct(t) }}\n        >\n          {formatMs(t)}\n        </span>\n      ))}\n      <div\n        className={s.playhead}\n        data-testid=\"timeline-playhead\"\n        style={{ left: pct(playhead) }}\n      />\n    </div>\n  );\n}\n","import type { ReactElement } from 'react';\nimport { DetentSlider } from '../DetentSlider';\nimport { PauseIcon, PlayIcon } from '../../icons';\nimport s from './Timeline.module.css';\n\n/** Playback rates the transport offers. */\nconst RATES = [0.25, 0.5, 1, 2, 4] as const;\n\nexport interface TransportProps {\n  paused: boolean;\n  loop: boolean | number;\n  rate: number;\n  playhead: number;\n  duration: number;\n  onPlay: () => void;\n  onPause: () => void;\n  onLoopChange: (loop: boolean | number) => void;\n  onRateChange: (rate: number) => void;\n}\n\nconst seconds = (ms: number): string => `${(ms / 1000).toFixed(2)}s`;\n\nexport function Transport(props: TransportProps): ReactElement {\n  const { paused, loop, rate, playhead, duration, onPlay, onPause, onLoopChange, onRateChange } = props;\n  const looping = loop !== false && loop !== 0;\n  // The handle's scale is whatever anything holding it set, so an off-list rate\n  // gets its own detent — `DetentSlider` would otherwise round it to the\n  // nearest and label the thumb with a rate the timeline is not running at.\n  const rates = RATES.includes(rate as typeof RATES[number])\n    ? (RATES as readonly number[])\n    : [...RATES, rate].sort((a, b) => a - b);\n\n  return (\n    <div className={s.transport}>\n      <button\n        type=\"button\"\n        className={s.transportButton}\n        aria-label={paused ? 'Play' : 'Pause'}\n        onClick={paused ? onPlay : onPause}\n      >\n        {paused ? <PlayIcon size={14} /> : <PauseIcon size={14} />}\n      </button>\n\n      <span className={s.time} data-testid=\"timeline-time\">\n        {seconds(playhead)} / {seconds(duration)}\n      </span>\n\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={looping}\n        aria-label=\"Loop\"\n        className={s.transportButton}\n        onClick={() => onLoopChange(!looping)}\n      >\n        ⟲\n      </button>\n\n      <div className={s.rate}>\n        Rate\n        <DetentSlider\n          ariaLabel=\"Rate\"\n          items={rates}\n          value={rate}\n          onChange={onRateChange}\n          formatLabel={(r) => `${r}x`}\n          labels=\"none\"\n          className={s.rateSlider}\n        />\n        <span className={s.rateReadout}>{rate}x</span>\n      </div>\n    </div>\n  );\n}\n","import { useMemo, useState, type KeyboardEvent as ReactKeyboardEvent, type ReactElement, type ReactNode } from 'react';\nimport type { EasingSpec, Keyframe, SampledTrack, Track } from '@weasel-js/core';\nimport s from './Timeline.module.css';\nimport { EasingPicker } from './EasingPicker';\nimport { Lane } from './Lane';\nimport { Ruler } from './Ruler';\nimport { Transport, type TransportProps } from './Transport';\nimport { buildLanes, trackAtPath } from './lanes';\nimport { deleteKey, insertKey, moveKey, samePath, setKeyEasing, setKeyValue, type KeySelection } from './keys';\nimport type { TimeWindow } from './timeScale';\n\nexport type { KeySelection } from './keys';\nexport type { TimeWindow } from './timeScale';\n\nexport interface KeyEditorCtx<T = unknown> {\n  key: Keyframe<T>;\n  track: SampledTrack<T>;\n  selection: KeySelection;\n  /** Replace the selected key; routed through this component's `onChange`. */\n  commit: (next: Keyframe<T>) => void;\n  /** Set the easing shaping the approach into this key. */\n  setEasing: (easing: EasingSpec | undefined) => void;\n}\n\nexport interface TimelineProps {\n  tracks: readonly Track[];\n  duration: number;\n  playhead: number;\n\n  mode?: 'dope' | 'graph';\n  onModeChange?: (mode: 'dope' | 'graph') => void;\n\n  /** Live during a drag — wire for preview, do not write to history. */\n  onInput?: (next: Track[]) => void;\n  /** Committed at gesture end: one call per gesture. */\n  onChange: (next: Track[]) => void;\n  onScrub: (t: number) => void;\n\n  /** `false` hides the transport. */\n  transport?: Omit<TransportProps, 'playhead' | 'duration'> | false;\n  selection?: KeySelection | null;\n  onSelect?: (sel: KeySelection | null) => void;\n  renderKeyEditor?: (ctx: KeyEditorCtx) => ReactNode;\n\n  window?: TimeWindow;\n  onWindowChange?: (w: TimeWindow) => void;\n\n  label?: ReactNode;\n  className?: string;\n}\n\nexport function Timeline(props: TimelineProps): ReactElement {\n  const {\n    tracks, duration, playhead,\n    onInput, onChange, onScrub,\n    renderKeyEditor, label, className,\n  } = props;\n\n  const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => new Set());\n  const [ownWindow, setOwnWindow] = useState<TimeWindow>({ from: 0, to: duration });\n  const [ownSelection, setOwnSelection] = useState<KeySelection | null>(null);\n  const [segmentSelection, setSegmentSelection] = useState<KeySelection | null>(null);\n\n  const win = props.window ?? ownWindow;\n  const setWindow = props.onWindowChange ?? setOwnWindow;\n  const selection = props.selection !== undefined ? props.selection : ownSelection;\n  const setSelection = props.onSelect ?? setOwnSelection;\n\n  const bounds: TimeWindow = { from: 0, to: duration };\n  const rows = useMemo(() => buildLanes(tracks, expanded), [tracks, expanded]);\n\n  /** Every key time on every row — what a dragged key snaps to. */\n  const snapTimes = useMemo(() => {\n    const out = new Set<number>([0, duration]);\n    for (const row of rows) {\n      if (row.kind === 'sampled') for (const k of (row.track as SampledTrack<unknown>).keys) out.add(k.t + row.offset);\n    }\n    return [...out];\n  }, [rows, duration]);\n\n  const toggle = (key: string): void => {\n    setExpanded((prev) => {\n      const next = new Set(prev);\n      if (next.has(key)) next.delete(key); else next.add(key);\n      return next;\n    });\n  };\n\n  const onRootKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>): void => {\n    if ((e.key === 'Delete' || e.key === 'Backspace') && selection) {\n      e.preventDefault();\n      const r = deleteKey(tracks, selection);\n      onChange(r.tracks);\n      setSelection(r.selection);\n    }\n  };\n\n  const selectedTrack = selection ? trackAtPath(tracks, selection.trackPath) : undefined;\n  const selectedKey = selectedTrack?.kind === 'sampled'\n    ? (selectedTrack as SampledTrack<unknown>).keys[selection!.keyIndex]\n    : undefined;\n\n  const segmentTrack = segmentSelection ? trackAtPath(tracks, segmentSelection.trackPath) : undefined;\n  const segmentKey = segmentTrack?.kind === 'sampled'\n    ? (segmentTrack as SampledTrack<unknown>).keys[segmentSelection!.keyIndex]\n    : undefined;\n\n  return (\n    <div\n      className={[s.root, className].filter(Boolean).join(' ')}\n      data-testid=\"timeline-root\"\n      tabIndex={-1}\n      onKeyDown={onRootKeyDown}\n    >\n      {label ? <div className={s.label}>{label}</div> : null}\n\n      {props.transport === false ? null : (\n        <div className={s.transportRow}>\n          <Transport\n            {...(props.transport ?? {\n              paused: true, loop: false, rate: 1,\n              onPlay: () => {}, onPause: () => {},\n              onLoopChange: () => {}, onRateChange: () => {},\n            })}\n            playhead={playhead}\n            duration={duration}\n          />\n          <button\n            type=\"button\"\n            role=\"switch\"\n            aria-checked={(props.mode ?? 'dope') === 'graph'}\n            aria-label=\"Graph mode\"\n            className={s.transportButton}\n            onClick={() => props.onModeChange?.((props.mode ?? 'dope') === 'graph' ? 'dope' : 'graph')}\n          >\n            Graph\n          </button>\n        </div>\n      )}\n\n      <div className={s.body}>\n        <div className={s.gutter} />\n        <div className={s.rulerWrap}>\n          <Ruler\n            window={win}\n            bounds={bounds}\n            playhead={playhead}\n            onScrub={onScrub}\n            onWindowChange={setWindow}\n          />\n        </div>\n      </div>\n\n      <div className={s.lanes}>\n        {rows.map((row) => {\n          const trackPath = row.path;\n          return (\n            <Lane\n              key={row.key}\n              row={row}\n              window={win}\n              mode={props.mode ?? 'dope'}\n              selection={selection && samePath(selection.trackPath, trackPath) ? selection.keyIndex : null}\n              expanded={expanded.has(row.key)}\n              snapTimes={snapTimes}\n              onToggleExpand={() => toggle(row.key)}\n              onSelect={(keyIndex) => setSelection({ trackPath, keyIndex })}\n              onKeyInput={(keyIndex, toMs, value) => {\n                if (!onInput) return;\n                const r = moveKey(tracks, { trackPath, keyIndex }, toMs);\n                onInput(value === undefined ? r.tracks : setKeyValue(r.tracks, r.selection!, value));\n              }}\n              onKeyCommit={(keyIndex, toMs, value) => {\n                const r = moveKey(tracks, { trackPath, keyIndex }, toMs);\n                onChange(value === undefined ? r.tracks : setKeyValue(r.tracks, r.selection!, value));\n                setSelection(r.selection);\n              }}\n              onInsert={(atMs) => {\n                const r = insertKey(tracks, trackPath, atMs);\n                onChange(r.tracks);\n                setSelection(r.selection);\n              }}\n              selectedSegment={segmentSelection && samePath(segmentSelection.trackPath, trackPath) ? segmentSelection.keyIndex : null}\n              onSelectSegment={(keyIndex) => setSegmentSelection({ trackPath, keyIndex })}\n              onEasingCommit={(keyIndex, easing) => {\n                onChange(setKeyEasing(tracks, { trackPath, keyIndex }, easing));\n              }}\n            />\n          );\n        })}\n      </div>\n\n      {renderKeyEditor && selection && selectedKey && selectedTrack?.kind === 'sampled' ? (\n        <div className={s.inspector}>\n          {renderKeyEditor({\n            key: selectedKey,\n            track: selectedTrack as SampledTrack<unknown>,\n            selection,\n            commit: (next) => onChange(setKeyValue(tracks, selection, next.value)),\n            setEasing: (easing) => onChange(setKeyEasing(tracks, selection, easing)),\n          })}\n        </div>\n      ) : null}\n\n      {segmentSelection && segmentKey ? (\n        <div className={s.inspector}>\n          <EasingPicker\n            value={segmentKey.easing}\n            onChange={(next) => onChange(setKeyEasing(tracks, segmentSelection, next))}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n","import { useCallback, useEffect, useReducer, useRef, type ReactElement } from 'react';\nimport { useVisibleRaf, type TimelineHandle, type Track } from '@weasel-js/core';\nimport { Timeline, type TimelineProps } from './Timeline';\n\nexport interface AnimatedTimelineProps\n  extends Omit<TimelineProps, 'tracks' | 'duration' | 'playhead' | 'onChange' | 'onScrub' | 'transport'> {\n  handle: TimelineHandle;\n  /** `false` hides the transport, as on `<Timeline>`. */\n  transport?: false;\n}\n\n/** Binds `<Timeline>` to a live handle.\n *\n *  `handle.tracks()` returns the timeline's own array, not a copy, so an edit\n *  splices it in place inside `edit()`. Assigning a replacement array would\n *  update nothing and raise nothing. */\nexport function AnimatedTimeline(props: AnimatedTimelineProps): ReactElement {\n  const { handle, ...rest } = props;\n  const [, bump] = useReducer((n: number) => n + 1, 0);\n\n  // `subscribe` fires on `edit` only, so the playhead comes from the frame loop.\n  useEffect(() => handle.subscribe(bump), [handle]);\n\n  // `useVisibleRaf` returns a controller; a continuous loop re-requests from\n  // inside its own frame, and nothing runs until something calls `request`.\n  // No `onResume` here: this loop measures no elapsed time of its own, it only\n  // reads the playhead the animator already advanced.\n  const rafRef = useRef<{ request(): void } | null>(null);\n  const raf = useVisibleRaf(() => {\n    bump();\n    if (!handle.isPaused()) rafRef.current?.request();\n  });\n  rafRef.current = raf;\n  useEffect(() => {\n    if (!handle.isPaused()) raf.request();\n    return () => raf.cancel();\n  }, [handle, raf]);\n\n  const onChange = useCallback((next: Track[]) => {\n    handle.edit(() => {\n      const live = handle.tracks() as Track[];\n      live.splice(0, live.length, ...next);\n    });\n  }, [handle]);\n\n  const playhead = handle.time();\n  const duration = handle.duration();\n\n  return (\n    <Timeline\n      {...rest}\n      tracks={handle.tracks()}\n      duration={duration}\n      playhead={playhead}\n      onChange={onChange}\n      onScrub={handle.seek}\n      transport={props.transport === false ? false : {\n        paused: handle.isPaused(),\n        loop: handle.loop(),\n        rate: handle.timeScale(),\n        onPlay: () => {\n          // `rearm` declines to revive a timeline at its duration, so resume\n          // alone would do nothing. Play-at-end rewinds first.\n          if (handle.time() >= duration) handle.seek(0);\n          handle.resume();\n          raf.request();\n          bump();\n        },\n        onPause: () => { handle.pause(); bump(); },\n        onLoopChange: (next) => { handle.setLoop(next); bump(); },\n        onRateChange: (next) => { handle.setTimeScale(next); bump(); },\n      }}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{Toast-hr9BYsho.js → Toast-CfkiN0Nv.js}

@@ -125,4 +125,4 @@ function S(o) {
 //#endregion
 export { v as a, g as i, p as n, m as r, S as t };
 
-//# sourceMappingURL=Toast-hr9BYsho.js.map
+//# sourceMappingURL=Toast-CfkiN0Nv.js.map

package/dist/chunks/{Toast-hr9BYsho.js.map → Toast-CfkiN0Nv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Toast-hr9BYsho.js","names":[],"sources":["../../src/components/Toast/queue.ts","../../src/components/Toast/Toast.module.css","../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { UNSTABLE_ToastQueue } from 'react-aria-components';\nimport { flushSync } from 'react-dom';\n\n/** Severity of a toast, driving its accent color and icon. */\nexport type ToastTone = 'info' | 'success' | 'warning' | 'error';\n\n/** Kit-owned payload rendered inside each toast. */\nexport interface ToastContent {\n  title: string;\n  description?: string;\n  tone: ToastTone;\n}\n\n/** Options for a single toast. */\nexport interface ToastOptions {\n  description?: string;\n  /**\n   * Auto-dismiss delay in ms. Default 8000. `null` — sticky until dismissed.\n   * Must be > 0; RAC treats 0 as no timer (sticky).\n   */\n  ttlMs?: number | null;\n  /** Stable identity: re-adding with the same id replaces the earlier toast. */\n  id?: string;\n}\n\nconst DEFAULT_TTL_MS = 8000;\n\n// Tracks overlapping toast-triggered view transitions so the `:root`\n// marker class survives until the *last* one settles.\nlet activeToastTransitions = 0;\n\n/**\n * RAC's sanctioned toast-animation hook: wrap every queue mutation in a\n * view transition so entry, exit, and the surviving stack's reflow all\n * animate (choreography lives in `toastViewTransitions.css`). Falls back\n * to a plain synchronous update when the browser lacks the API or the\n * user prefers reduced motion — i.e. exactly the pre-animation behavior.\n * The jsdom test environment always takes the fallback path.\n */\nfunction viewTransitionWrapUpdate(fn: () => void): void {\n  const reduceMotion =\n    typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  if (typeof document === 'undefined' || !('startViewTransition' in document) || reduceMotion) {\n    fn();\n    return;\n  }\n  // The marker class scopes the CSS that un-names `:root` (keeps the rest\n  // of the page live and interactive during the transition) to\n  // toast-owned transitions only.\n  const root = document.documentElement;\n  activeToastTransitions++;\n  root.classList.add('wzl-toast-vt');\n  // flushSync: the DOM must reflect the queue change inside the\n  // transition callback, before the browser snapshots the new state.\n  const vt = document.startViewTransition(() => flushSync(fn));\n  // `ready` rejects when the browser skips the transition — routine under\n  // a rapid burst of toasts, where each new transition supersedes the\n  // in-flight one. The DOM update has still applied by then, but an\n  // untouched `ready` surfaces the rejection as a console error, so\n  // consume it.\n  vt.ready.catch(() => {});\n  void vt.finished.finally(() => {\n    if (--activeToastTransitions === 0) root.classList.remove('wzl-toast-vt');\n  });\n}\n\n// The wrapped RAC queue lives in a module-scoped WeakMap so the public\n// class surface carries no RAC (UNSTABLE_) types — see the design spec's\n// containment rule. `racQueueOf` below is the folder-internal accessor.\nconst RAC_QUEUES = new WeakMap<ToastQueue, UNSTABLE_ToastQueue<ToastContent>>();\n\n/**\n * Kit-owned toast queue. Create isolated instances with\n * `createToastQueue()` (tests, secondary roots); most apps use the\n * module-level `defaultToastQueue` via `toast()`.\n *\n * At most 5 toasts are visible at once; adding a 6th shows immediately\n * and hides the oldest (it returns when a slot frees, with its ttl\n * restarted).\n */\nexport class ToastQueue {\n  private keysById = new Map<string, string>();\n\n  constructor() {\n    RAC_QUEUES.set(\n      this,\n      new UNSTABLE_ToastQueue<ToastContent>({\n        maxVisibleToasts: 5,\n        wrapUpdate: viewTransitionWrapUpdate,\n      }),\n    );\n  }\n\n  add(tone: ToastTone, title: string, options: ToastOptions = {}): void {\n    const { description, ttlMs = DEFAULT_TTL_MS, id } = options;\n    const rac = RAC_QUEUES.get(this)!;\n    if (id !== undefined) {\n      const existing = this.keysById.get(id);\n      if (existing !== undefined) rac.close(existing);\n    }\n    let key: string;\n    const racOptions: { timeout?: number; onClose?: () => void } =\n      ttlMs === null ? {} : { timeout: ttlMs };\n    if (id !== undefined) {\n      racOptions.onClose = () => {\n        if (this.keysById.get(id) === key) this.keysById.delete(id);\n      };\n    }\n    key = rac.add({ title, description, tone }, racOptions);\n    if (id !== undefined) this.keysById.set(id, key);\n  }\n\n  /** Dismiss the toast previously added with this `id`. No-op if none is live. */\n  dismiss(id: string): void {\n    const key = this.keysById.get(id);\n    if (key !== undefined) RAC_QUEUES.get(this)!.close(key);\n  }\n\n  /** Dismiss every queued toast. */\n  clear(): void {\n    RAC_QUEUES.get(this)!.clear();\n    this.keysById.clear();\n  }\n}\n\n/**\n * Creates an independent toast queue. Most apps use the module-level\n * `defaultToastQueue` that `toast()` writes to; make your own when a surface\n * needs its own stack, and pass it to `ToastRegion`.\n */\nexport function createToastQueue(): ToastQueue {\n  return new ToastQueue();\n}\n\n/**\n * Folder-internal bridge to the wrapped RAC queue for `ToastRegion`.\n * Deliberately NOT exported from the Toast folder's `index.ts` — the\n * RAC toast surface is unstable and must not leak past this folder.\n */\nexport function racQueueOf(queue: ToastQueue): UNSTABLE_ToastQueue<ToastContent> {\n  return RAC_QUEUES.get(queue)!;\n}\n\n/** Module-level default queue used by `toast()` and `<ToastRegion>`. */\nexport const defaultToastQueue = createToastQueue();\n\ntype ToastFn = {\n  (title: string, options?: ToastOptions): void;\n  info(title: string, options?: ToastOptions): void;\n  success(title: string, options?: ToastOptions): void;\n  warning(title: string, options?: ToastOptions): void;\n  error(title: string, options?: ToastOptions): void;\n};\n\nfunction tonedAdd(tone: ToastTone) {\n  return (title: string, options?: ToastOptions) => defaultToastQueue.add(tone, title, options);\n}\n\n/** Imperative convenience over `defaultToastQueue`. Bare `toast(...)` is `info`. */\nexport const toast: ToastFn = Object.assign(tonedAdd('info'), {\n  info: tonedAdd('info'),\n  success: tonedAdd('success'),\n  warning: tonedAdd('warning'),\n  error: tonedAdd('error'),\n});\n",".region {\n  position: fixed;\n  z-index: 1100;\n  display: flex;\n  /* RAC unshifts new toasts to the front of the DOM (newest-first), and the\n   * ol/li wrappers are display:contents, so the flex direction alone\n   * decides which end of the stack the newest toast lands on. Base\n   * (bottom corners): column-reverse puts DOM-first (newest) at the\n   * bottom, hugging the corner. Top corners override back to column so\n   * DOM-first still hugs the top edge. */\n  flex-direction: column-reverse;\n  gap: 8px;\n  max-width: 360px;\n  outline: none;\n}\n\n.bottomRight { bottom: 16px; right: 16px; }\n.bottomLeft { bottom: 16px; left: 16px; }\n.topRight { top: 16px; right: 16px; flex-direction: column; }\n.topLeft { top: 16px; left: 16px; flex-direction: column; }\n\n.toast {\n  --toast-accent: var(--wzl-accent-strong);\n  /* Groups every toast under one ident so toastViewTransitions.css can\n   * target `::view-transition-new/old(.wzl-toast)` without knowing the\n   * per-toast view-transition-name (set inline in Toast.tsx). */\n  view-transition-class: wzl-toast;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-left: 3px solid var(--toast-accent);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  padding: 10px 12px;\n  outline: none;\n}\n\n.region[data-focus-visible],\n.toast[data-focus-visible] {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.toneInfo { /* default accent — uses --toast-accent fallback */ }\n.toneSuccess { --toast-accent: var(--wzl-success, #2ec27e); }\n.toneWarning { --toast-accent: var(--wzl-warning, #d99a3f); }\n.toneError { --toast-accent: var(--wzl-danger); }\n\n.content {\n  flex: 1;\n  min-width: 0;\n}\n\n.title {\n  display: block;\n  font-size: var(--wzl-font-size);\n  font-weight: var(--wzl-font-weight-bold);\n}\n\n.description {\n  display: block;\n  margin-top: 2px;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n\n.close {\n  flex: 0 0 auto;\n  background: none;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-lg);\n  line-height: 1;\n  padding: 2px 4px;\n  cursor: pointer;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.close:hover {\n  color: var(--wzl-fg);\n}\n","import {\n  UNSTABLE_ToastRegion as RACToastRegion,\n  UNSTABLE_Toast as RACToast,\n  UNSTABLE_ToastContent as RACToastContent,\n  Text,\n  Button,\n} from 'react-aria-components';\nimport { defaultToastQueue, racQueueOf, type ToastQueue, type ToastTone } from './queue';\nimport s from './Toast.module.css';\nimport './toastViewTransitions.css';\n\n/** Screen corner a toast stack anchors to. */\nexport type ToastPlacement = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n\n/** Props for {@link ToastRegion}. */\nexport interface ToastRegionProps {\n  /** Queue to render. Defaults to the module-level `defaultToastQueue`. */\n  queue?: ToastQueue;\n  /** Screen corner for the stack. Default `bottom-right`. */\n  placement?: ToastPlacement;\n  className?: string;\n}\n\nconst placementClass: Record<ToastPlacement, string> = {\n  'bottom-right': s.bottomRight,\n  'bottom-left': s.bottomLeft,\n  'top-right': s.topRight,\n  'top-left': s.topLeft,\n};\n\nconst toneClass: Record<ToastTone, string> = {\n  info: s.toneInfo,\n  success: s.toneSuccess,\n  warning: s.toneWarning,\n  error: s.toneError,\n};\n\n/**\n * Renders the toast stack for a queue. Mount once, near the app root.\n * From the underlying React Aria region: landmark semantics (keyboard /\n * F6 reachable), screen-reader announcements, and hover pausing the\n * auto-dismiss timers.\n */\nexport function ToastRegion(props: ToastRegionProps) {\n  const { queue = defaultToastQueue, placement = 'bottom-right', className } = props;\n  return (\n    <RACToastRegion\n      queue={racQueueOf(queue)}\n      aria-label=\"Notifications\"\n      className={[s.region, placementClass[placement], className].filter(Boolean).join(' ')}\n    >\n      {({ toast: t }) => (\n        <RACToast\n          toast={t}\n          className={[s.toast, toneClass[t.content.tone]].filter(Boolean).join(' ')}\n          // Inline style is the one sanctioned exception here: each toast\n          // needs a *unique* view-transition-name (so enter/exit/reflow\n          // track per-toast), and a class can't mint unique idents. The\n          // prefix keeps the ident valid (RAC keys can start with digits).\n          style={{ viewTransitionName: `wzl-toast-${t.key.replace(/[^a-zA-Z0-9_-]/g, '_')}` }}\n        >\n          <RACToastContent className={s.content}>\n            <Text slot=\"title\" className={s.title}>{t.content.title}</Text>\n            {t.content.description !== undefined && (\n              <Text slot=\"description\" className={s.description}>{t.content.description}</Text>\n            )}\n          </RACToastContent>\n          <Button slot=\"close\" className={s.close} aria-label=\"Dismiss notification\">\n            ×\n          </Button>\n        </RACToast>\n      )}\n    </RACToastRegion>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Toast-CfkiN0Nv.js","names":[],"sources":["../../src/components/Toast/queue.ts","../../src/components/Toast/Toast.module.css","../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { UNSTABLE_ToastQueue } from 'react-aria-components';\nimport { flushSync } from 'react-dom';\n\n/** Severity of a toast, driving its accent color and icon. */\nexport type ToastTone = 'info' | 'success' | 'warning' | 'error';\n\n/** Kit-owned payload rendered inside each toast. */\nexport interface ToastContent {\n  title: string;\n  description?: string;\n  tone: ToastTone;\n}\n\n/** Options for a single toast. */\nexport interface ToastOptions {\n  description?: string;\n  /**\n   * Auto-dismiss delay in ms. Default 8000. `null` — sticky until dismissed.\n   * Must be > 0; RAC treats 0 as no timer (sticky).\n   */\n  ttlMs?: number | null;\n  /** Stable identity: re-adding with the same id replaces the earlier toast. */\n  id?: string;\n}\n\nconst DEFAULT_TTL_MS = 8000;\n\n// Tracks overlapping toast-triggered view transitions so the `:root`\n// marker class survives until the *last* one settles.\nlet activeToastTransitions = 0;\n\n/**\n * RAC's sanctioned toast-animation hook: wrap every queue mutation in a\n * view transition so entry, exit, and the surviving stack's reflow all\n * animate (choreography lives in `toastViewTransitions.css`). Falls back\n * to a plain synchronous update when the browser lacks the API or the\n * user prefers reduced motion — i.e. exactly the pre-animation behavior.\n * The jsdom test environment always takes the fallback path.\n */\nfunction viewTransitionWrapUpdate(fn: () => void): void {\n  const reduceMotion =\n    typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  if (typeof document === 'undefined' || !('startViewTransition' in document) || reduceMotion) {\n    fn();\n    return;\n  }\n  // The marker class scopes the CSS that un-names `:root` (keeps the rest\n  // of the page live and interactive during the transition) to\n  // toast-owned transitions only.\n  const root = document.documentElement;\n  activeToastTransitions++;\n  root.classList.add('wzl-toast-vt');\n  // flushSync: the DOM must reflect the queue change inside the\n  // transition callback, before the browser snapshots the new state.\n  const vt = document.startViewTransition(() => flushSync(fn));\n  // `ready` rejects when the browser skips the transition — routine under\n  // a rapid burst of toasts, where each new transition supersedes the\n  // in-flight one. The DOM update has still applied by then, but an\n  // untouched `ready` surfaces the rejection as a console error, so\n  // consume it.\n  vt.ready.catch(() => {});\n  void vt.finished.finally(() => {\n    if (--activeToastTransitions === 0) root.classList.remove('wzl-toast-vt');\n  });\n}\n\n// The wrapped RAC queue lives in a module-scoped WeakMap so the public\n// class surface carries no RAC (UNSTABLE_) types — see the design spec's\n// containment rule. `racQueueOf` below is the folder-internal accessor.\nconst RAC_QUEUES = new WeakMap<ToastQueue, UNSTABLE_ToastQueue<ToastContent>>();\n\n/**\n * Kit-owned toast queue. Create isolated instances with\n * `createToastQueue()` (tests, secondary roots); most apps use the\n * module-level `defaultToastQueue` via `toast()`.\n *\n * At most 5 toasts are visible at once; adding a 6th shows immediately\n * and hides the oldest (it returns when a slot frees, with its ttl\n * restarted).\n */\nexport class ToastQueue {\n  private keysById = new Map<string, string>();\n\n  constructor() {\n    RAC_QUEUES.set(\n      this,\n      new UNSTABLE_ToastQueue<ToastContent>({\n        maxVisibleToasts: 5,\n        wrapUpdate: viewTransitionWrapUpdate,\n      }),\n    );\n  }\n\n  add(tone: ToastTone, title: string, options: ToastOptions = {}): void {\n    const { description, ttlMs = DEFAULT_TTL_MS, id } = options;\n    const rac = RAC_QUEUES.get(this)!;\n    if (id !== undefined) {\n      const existing = this.keysById.get(id);\n      if (existing !== undefined) rac.close(existing);\n    }\n    let key: string;\n    const racOptions: { timeout?: number; onClose?: () => void } =\n      ttlMs === null ? {} : { timeout: ttlMs };\n    if (id !== undefined) {\n      racOptions.onClose = () => {\n        if (this.keysById.get(id) === key) this.keysById.delete(id);\n      };\n    }\n    key = rac.add({ title, description, tone }, racOptions);\n    if (id !== undefined) this.keysById.set(id, key);\n  }\n\n  /** Dismiss the toast previously added with this `id`. No-op if none is live. */\n  dismiss(id: string): void {\n    const key = this.keysById.get(id);\n    if (key !== undefined) RAC_QUEUES.get(this)!.close(key);\n  }\n\n  /** Dismiss every queued toast. */\n  clear(): void {\n    RAC_QUEUES.get(this)!.clear();\n    this.keysById.clear();\n  }\n}\n\n/**\n * Creates an independent toast queue. Most apps use the module-level\n * `defaultToastQueue` that `toast()` writes to; make your own when a surface\n * needs its own stack, and pass it to `ToastRegion`.\n */\nexport function createToastQueue(): ToastQueue {\n  return new ToastQueue();\n}\n\n/**\n * Folder-internal bridge to the wrapped RAC queue for `ToastRegion`.\n * Deliberately NOT exported from the Toast folder's `index.ts` — the\n * RAC toast surface is unstable and must not leak past this folder.\n */\nexport function racQueueOf(queue: ToastQueue): UNSTABLE_ToastQueue<ToastContent> {\n  return RAC_QUEUES.get(queue)!;\n}\n\n/** Module-level default queue used by `toast()` and `<ToastRegion>`. */\nexport const defaultToastQueue = createToastQueue();\n\ntype ToastFn = {\n  (title: string, options?: ToastOptions): void;\n  info(title: string, options?: ToastOptions): void;\n  success(title: string, options?: ToastOptions): void;\n  warning(title: string, options?: ToastOptions): void;\n  error(title: string, options?: ToastOptions): void;\n};\n\nfunction tonedAdd(tone: ToastTone) {\n  return (title: string, options?: ToastOptions) => defaultToastQueue.add(tone, title, options);\n}\n\n/** Imperative convenience over `defaultToastQueue`. Bare `toast(...)` is `info`. */\nexport const toast: ToastFn = Object.assign(tonedAdd('info'), {\n  info: tonedAdd('info'),\n  success: tonedAdd('success'),\n  warning: tonedAdd('warning'),\n  error: tonedAdd('error'),\n});\n",".region {\n  position: fixed;\n  z-index: 1100;\n  display: flex;\n  /* RAC unshifts new toasts to the front of the DOM (newest-first), and the\n   * ol/li wrappers are display:contents, so the flex direction alone\n   * decides which end of the stack the newest toast lands on. Base\n   * (bottom corners): column-reverse puts DOM-first (newest) at the\n   * bottom, hugging the corner. Top corners override back to column so\n   * DOM-first still hugs the top edge. */\n  flex-direction: column-reverse;\n  gap: 8px;\n  max-width: 360px;\n  outline: none;\n}\n\n.bottomRight { bottom: 16px; right: 16px; }\n.bottomLeft { bottom: 16px; left: 16px; }\n.topRight { top: 16px; right: 16px; flex-direction: column; }\n.topLeft { top: 16px; left: 16px; flex-direction: column; }\n\n.toast {\n  --toast-accent: var(--wzl-accent-strong);\n  /* Groups every toast under one ident so toastViewTransitions.css can\n   * target `::view-transition-new/old(.wzl-toast)` without knowing the\n   * per-toast view-transition-name (set inline in Toast.tsx). */\n  view-transition-class: wzl-toast;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-left: 3px solid var(--toast-accent);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  padding: 10px 12px;\n  outline: none;\n}\n\n.region[data-focus-visible],\n.toast[data-focus-visible] {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.toneInfo { /* default accent — uses --toast-accent fallback */ }\n.toneSuccess { --toast-accent: var(--wzl-success, #2ec27e); }\n.toneWarning { --toast-accent: var(--wzl-warning, #d99a3f); }\n.toneError { --toast-accent: var(--wzl-danger); }\n\n.content {\n  flex: 1;\n  min-width: 0;\n}\n\n.title {\n  display: block;\n  font-size: var(--wzl-font-size);\n  font-weight: var(--wzl-font-weight-bold);\n}\n\n.description {\n  display: block;\n  margin-top: 2px;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n\n.close {\n  flex: 0 0 auto;\n  background: none;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-lg);\n  line-height: 1;\n  padding: 2px 4px;\n  cursor: pointer;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.close:hover {\n  color: var(--wzl-fg);\n}\n","import {\n  UNSTABLE_ToastRegion as RACToastRegion,\n  UNSTABLE_Toast as RACToast,\n  UNSTABLE_ToastContent as RACToastContent,\n  Text,\n  Button,\n} from 'react-aria-components';\nimport { defaultToastQueue, racQueueOf, type ToastQueue, type ToastTone } from './queue';\nimport s from './Toast.module.css';\nimport './toastViewTransitions.css';\n\n/** Screen corner a toast stack anchors to. */\nexport type ToastPlacement = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n\n/** Props for {@link ToastRegion}. */\nexport interface ToastRegionProps {\n  /** Queue to render. Defaults to the module-level `defaultToastQueue`. */\n  queue?: ToastQueue;\n  /** Screen corner for the stack. Default `bottom-right`. */\n  placement?: ToastPlacement;\n  className?: string;\n}\n\nconst placementClass: Record<ToastPlacement, string> = {\n  'bottom-right': s.bottomRight,\n  'bottom-left': s.bottomLeft,\n  'top-right': s.topRight,\n  'top-left': s.topLeft,\n};\n\nconst toneClass: Record<ToastTone, string> = {\n  info: s.toneInfo,\n  success: s.toneSuccess,\n  warning: s.toneWarning,\n  error: s.toneError,\n};\n\n/**\n * Renders the toast stack for a queue. Mount once, near the app root.\n * From the underlying React Aria region: landmark semantics (keyboard /\n * F6 reachable), screen-reader announcements, and hover pausing the\n * auto-dismiss timers.\n */\nexport function ToastRegion(props: ToastRegionProps) {\n  const { queue = defaultToastQueue, placement = 'bottom-right', className } = props;\n  return (\n    <RACToastRegion\n      queue={racQueueOf(queue)}\n      aria-label=\"Notifications\"\n      className={[s.region, placementClass[placement], className].filter(Boolean).join(' ')}\n    >\n      {({ toast: t }) => (\n        <RACToast\n          toast={t}\n          className={[s.toast, toneClass[t.content.tone]].filter(Boolean).join(' ')}\n          // Inline style is the one sanctioned exception here: each toast\n          // needs a *unique* view-transition-name (so enter/exit/reflow\n          // track per-toast), and a class can't mint unique idents. The\n          // prefix keeps the ident valid (RAC keys can start with digits).\n          style={{ viewTransitionName: `wzl-toast-${t.key.replace(/[^a-zA-Z0-9_-]/g, '_')}` }}\n        >\n          <RACToastContent className={s.content}>\n            <Text slot=\"title\" className={s.title}>{t.content.title}</Text>\n            {t.content.description !== undefined && (\n              <Text slot=\"description\" className={s.description}>{t.content.description}</Text>\n            )}\n          </RACToastContent>\n          <Button slot=\"close\" className={s.close} aria-label=\"Dismiss notification\">\n            ×\n          </Button>\n        </RACToast>\n      )}\n    </RACToastRegion>\n  );\n}\n"],"mappings":";;;;AAyBA,IAAM,IAAiB,KAInB,IAAyB;AAU7B,SAAS,EAAyB,GAAsB;CACtD,IAAM,IACJ,OAAO,cAAe,cAAc,WAAW,mCAAmC,CAAC;AACrF,KAAI,OAAO,WAAa,OAAe,EAAE,yBAAyB,aAAa,GAAc;AAC3F,KAAI;AACJ;;CAKF,IAAM,IAAO,SAAS;AAEtB,CADA,KACA,EAAK,UAAU,IAAI,eAAe;CAGlC,IAAM,IAAK,SAAS,0BAA0B,EAAU,EAAG,CAAC;AAOvD,CADL,EAAG,MAAM,YAAY,GAAG,EACnB,EAAG,SAAS,cAAc;AAC7B,EAAI,EAAE,MAA2B,KAAG,EAAK,UAAU,OAAO,eAAe;GACzE;;AAMJ,IAAM,oBAAa,IAAI,SAAwD,EAWlE,IAAb,MAAwB;CACtB,2BAAmB,IAAI,KAAqB;CAE5C,cAAc;AACZ,IAAW,IACT,MACA,IAAI,EAAkC;GACpC,kBAAkB;GAClB,YAAY;GACb,CAAC,CACH;;CAGH,IAAI,GAAiB,GAAe,IAAwB,EAAE,EAAQ;EACpE,IAAM,EAAE,gBAAa,WAAQ,GAAgB,UAAO,GAC9C,IAAM,EAAW,IAAI,KAAK;AAChC,MAAI,MAAO,KAAA,GAAW;GACpB,IAAM,IAAW,KAAK,SAAS,IAAI,EAAG;AACtC,GAAI,MAAa,KAAA,KAAW,EAAI,MAAM,EAAS;;EAEjD,IAAI,GACE,IACJ,MAAU,OAAO,EAAE,GAAG,EAAE,SAAS,GAAO;AAO1C,EANI,MAAO,KAAA,MACT,EAAW,gBAAgB;AACzB,GAAI,KAAK,SAAS,IAAI,EAAG,KAAK,KAAK,KAAK,SAAS,OAAO,EAAG;MAG/D,IAAM,EAAI,IAAI;GAAE;GAAO;GAAa;GAAM,EAAE,EAAW,EACnD,MAAO,KAAA,KAAW,KAAK,SAAS,IAAI,GAAI,EAAI;;CAIlD,QAAQ,GAAkB;EACxB,IAAM,IAAM,KAAK,SAAS,IAAI,EAAG;AACjC,EAAI,MAAQ,KAAA,KAAW,EAAW,IAAI,KAAK,CAAE,MAAM,EAAI;;CAIzD,QAAc;AAEZ,EADA,EAAW,IAAI,KAAK,CAAE,OAAO,EAC7B,KAAK,SAAS,OAAO;;;AASzB,SAAgB,IAA+B;AAC7C,QAAO,IAAI,GAAY;;AAQzB,SAAgB,EAAW,GAAsD;AAC/E,QAAO,EAAW,IAAI,EAAM;;AAI9B,IAAa,IAAoB,GAAkB;AAUnD,SAAS,EAAS,GAAiB;AACjC,SAAQ,GAAe,MAA2B,EAAkB,IAAI,GAAM,GAAO,EAAQ;;AAI/F,IAAa,IAAiB,OAAO,OAAO,EAAS,OAAO,EAAE;CAC5D,MAAM,EAAS,OAAO;CACtB,SAAS,EAAS,UAAU;CAC5B,SAAS,EAAS,UAAU;CAC5B,OAAO,EAAS,QAAQ;CACzB,CAAC;;;;;;;;;;;;;;;GE7II,IAAiD;CACrD,gBAAgB,EAAE;CAClB,eAAe,EAAE;CACjB,aAAa,EAAE;CACf,YAAY,EAAE;CACf,EAEK,IAAuC;CAC3C,MAAM,EAAE;CACR,SAAS,EAAE;CACX,SAAS,EAAE;CACX,OAAO,EAAE;CACV;AAQD,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,WAAQ,GAAmB,eAAY,gBAAgB,iBAAc;AAC7E,QACE,kBAAC,GAAD;EACE,OAAO,EAAW,EAAM;EACxB,cAAW;EACX,WAAW;GAAC,EAAE;GAAQ,EAAe;GAAY;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;aAEnF,EAAE,OAAO,QACT,kBAAC,GAAD;GACE,OAAO;GACP,WAAW,CAAC,EAAE,OAAO,EAAU,EAAE,QAAQ,MAAM,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAKzE,OAAO,EAAE,oBAAoB,aAAa,EAAE,IAAI,QAAQ,mBAAmB,IAAI,IAAI;aAPrF,CASE,kBAAC,GAAD;IAAiB,WAAW,EAAE;cAA9B,CACE,kBAAC,GAAD;KAAM,MAAK;KAAQ,WAAW,EAAE;eAAQ,EAAE,QAAQ;KAAa,CAAA,EAC9D,EAAE,QAAQ,gBAAgB,KAAA,KACzB,kBAAC,GAAD;KAAM,MAAK;KAAc,WAAW,EAAE;eAAc,EAAE,QAAQ;KAAmB,CAAA,CAEnE;OAClB,kBAAC,GAAD;IAAQ,MAAK;IAAQ,WAAW,EAAE;IAAO,cAAW;cAAuB;IAElE,CAAA,CACA;;EAEE,CAAA"}

package/dist/chunks/{ToggleBar-BxgWq-wO.js → ToggleBar-D0veW91s.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./useRovingTabIndex-CQz8EiKh.js";
+import { t as e } from "./useRovingTabIndex-ByjY4lnw.js";
 import { jsx as t } from "react/jsx-runtime";
 import "react";
 var n = {
@@ -72,4 +72,4 @@ function r(r) {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=ToggleBar-BxgWq-wO.js.map
+//# sourceMappingURL=ToggleBar-D0veW91s.js.map

package/dist/chunks/{ToggleBar-BxgWq-wO.js.map → ToggleBar-D0veW91s.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToggleBar-BxgWq-wO.js","names":[],"sources":["../../src/components/ToggleBar/ToggleBar.module.css","../../src/components/ToggleBar/ToggleBar.tsx"],"sourcesContent":["/* Aqua-glass segmented control. The track is a pill-shaped well; the\n   selected segment becomes a tinted glass cylinder that reads as the same\n   \"lozenge\" family as the standalone Button. Visual params come from the\n   `--btn-*` custom properties (see Button.module.css) so the Button Lab\n   can tune both surfaces with one set of sliders. */\n.root {\n  display: inline-flex;\n  height: var(--tb-h, var(--wzl-control-h, 24px));\n  padding: 2px;\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0.18) 0%,\n    rgba(0, 0, 0, 0.05) 100%\n  );\n  border-radius: var(--wzl-radius-pill);\n  /* Clip segments to the track outline so interior corners read crisp and\n     the selected segment's glass treatment doesn't paint over the rounded\n     outer pixels. */\n  overflow: hidden;\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.4),\n    0 1px 0 rgba(255, 255, 255, 0.06);\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.segment {\n  position: relative;\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0 12px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  margin: 0;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-normal);\n  font-size: var(--btn-fontsize, var(--wzl-font-size));\n  line-height: 1;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  /* Only round the outer corners of the bar — middle segments stay square\n     so the seams between them don't render as facing parentheses. */\n  border-radius: 0;\n  isolation: isolate;\n  overflow: hidden;\n  transition: color var(--wzl-motion-fast);\n}\n\n/* A glyph label is a fixed box, not text that can reflow: without this it is\n   the only thing in the segment flex can take width from, and three bars in\n   one property row squeeze it to nothing. The side padding drops with it —\n   8px around a 14px glyph is most of a segment. */\n.segment > svg {\n  flex: none;\n}\n\n.segment:has(> svg) {\n  padding: 0 5px;\n}\n\n.segment:first-child {\n  border-radius: var(--wzl-radius-pill) 0 0 var(--wzl-radius-pill);\n}\n\n.segment:last-child {\n  border-radius: 0 var(--wzl-radius-pill) var(--wzl-radius-pill) 0;\n}\n\n.segment:only-child {\n  border-radius: var(--wzl-radius-pill);\n}\n\n.segment:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n\n.segment:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n}\n\n/* Selected segment — full Aqua glass cylinder. Mirrors Button.variant_primary. */\n.segmentSelected {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha, 45%), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha, 70%), transparent) calc(var(--btn-equator, 52%) - var(--btn-equator-spread, 12%)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint, 95%), white) var(--btn-equator, 52%),\n    var(--wzl-accent) calc(var(--btn-equator, 52%) + var(--btn-equator-spread, 12%) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint, 70%), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  -webkit-backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  color: var(--wzl-fg-on-accent);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow, 0.35)),\n    var(--btn-text-inset-x, 0px) var(--btn-text-inset-y, 1px) 0 rgba(0, 0, 0, var(--btn-text-inset, 0.55)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow, 0.35) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi, 0.42)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo, 0.3)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim, 0.22)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near, 0.3)),\n    0 2px 4px rgba(0, 0, 0, calc(var(--btn-drop-far, 0.18) * 0.8));\n}\n\n/* Specular gloss on the selected segment. Top corners inherit the\n   segment's radius so they hug the upper edge cleanly; bottom corners\n   are flattened so the gloss ends in a straight line at the equator\n   instead of two little curves that read as `)(` brackets. */\n.segmentSelected::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom, 50%) 1px;\n  border-radius: inherit;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top, 0.42)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid, 0.12)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n}\n\n.segmentSelected > * {\n  position: relative;\n  z-index: 2;\n}\n\n/* Mixed segment (`aria-pressed=\"mixed\"`) — the sources disagree. Reads as a\n   deliberate third state rather than a dimmed \"on\": a flat accent wash with\n   none of the selected segment's gloss/cylinder treatment, so it can't be\n   mistaken for the glass lozenge at a glance. */\n.segmentMixed {\n  background: color-mix(in srgb, var(--wzl-accent) 22%, transparent);\n  color: var(--wzl-fg);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wzl-accent) 45%, transparent);\n}\n\n.segmentMixed:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--wzl-accent) 32%, transparent);\n}\n\n.variant_minimal .segmentMixed {\n  background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);\n  box-shadow: none;\n  color: var(--wzl-fg);\n}\n\n/* Small variant — ~60% of the default height, with proportionally reduced\n   padding and font. Sized for dense surfaces (lab control panels, inline\n   filters, etc.). */\n.size_sm {\n  height: 17px;\n  padding: 1px;\n}\n\n.size_sm .segment {\n  padding: 0 8px;\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* `.size_sm .segment` outranks the glyph rule above on specificity, so a\n   small bar's glyph segments need the tight padding restated to stay\n   near-square rather than reading as wide plates. */\n.size_sm .segment:has(> svg) {\n  padding: 0 3px;\n}\n\n/* Minimal variant — strips the pill track, glass selected state, inset\n   shadows, and outer padding. Used in dense diagnostic surfaces (dispatch\n   trace, lab inspectors) where the bar must read as plain text controls. */\n.variant_minimal {\n  height: auto;\n  padding: 0;\n  background: none;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: none;\n  gap: 0;\n}\n\n.variant_minimal .segment {\n  padding: 0 6px;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  line-height: 1.4;\n  border-radius: 0;\n  color: var(--wzl-fg-muted);\n  transition: none;\n}\n\n/* Dividers between segments make the mutual-exclusion grouping visible\n   without a heavy track. Only the inner edges get a rule — the outer\n   border on `.variant_minimal` handles the perimeter. */\n.variant_minimal .segment + .segment {\n  border-left: 1px solid var(--wzl-border);\n}\n\n.variant_minimal .segment:first-child,\n.variant_minimal .segment:last-child,\n.variant_minimal .segment:only-child {\n  border-radius: 0;\n}\n\n.variant_minimal .segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n  background: var(--wzl-surface-hover);\n}\n\n.variant_minimal .segmentSelected {\n  background: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-accent-fg, var(--wzl-accent));\n  text-shadow: none;\n  box-shadow: none;\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.variant_minimal .segmentSelected::before {\n  content: none;\n}\n\n/* Flat variant — no track, no glass, no pill: each segment is its own\n   outlined cell. For property panels, where a bar sits in a row beside\n   inputs and the glass cylinder makes it the loudest thing on the surface. */\n.variant_flat {\n  padding: 0;\n  background: none;\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: none;\n  overflow: visible;\n}\n\n.variant_flat .segment {\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 0;\n  /* Sunken, so an unselected cell sits below the panel and the selected one\n     reads as raised without needing the glass treatment back. */\n  background: var(--wzl-surface-sunken);\n  color: var(--wzl-fg-muted);\n}\n\n/* Adjacent cells share one rule rather than stacking two. */\n.variant_flat .segment + .segment {\n  margin-inline-start: -1px;\n}\n\n.variant_flat .segment:first-child {\n  border-start-start-radius: var(--wzl-radius-sm);\n  border-end-start-radius: var(--wzl-radius-sm);\n}\n\n.variant_flat .segment:last-child {\n  border-start-end-radius: var(--wzl-radius-sm);\n  border-end-end-radius: var(--wzl-radius-sm);\n}\n\n.variant_flat .segment:hover:not(:disabled):not(.segmentSelected) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.variant_flat .segmentSelected {\n  background: var(--wzl-accent);\n  border-color: var(--wzl-accent);\n  color: var(--wzl-fg-on-accent);\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  text-shadow: none;\n  box-shadow: none;\n  /* Its own border rather than the neighbour's overlapping edge. */\n  z-index: 1;\n}\n\n.variant_flat .segmentSelected::before {\n  content: none;\n}\n","import { type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport s from './ToggleBar.module.css';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\n\n/** One segment of a {@link ToggleBar}, identified by its `value`. */\nexport type ToggleBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n};\n\n/** Segment height and type scale for a {@link ToggleBar}. */\nexport type ToggleBarSize = 'sm' | 'md';\n/** Visual treatment of a {@link ToggleBar}. */\nexport type ToggleBarVariant = 'default' | 'minimal' | 'flat';\n\ntype CommonProps = {\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?: ToggleBarSize;\n  /** Visual variant. `minimal` strips the pill track and glass treatment;\n   *  selection becomes a flat accent. For dense diagnostic surfaces. */\n  variant?: ToggleBarVariant;\n};\n\n/**\n * Props for {@link ToggleBar}, discriminated on `mode`. Single mode is\n * controlled by one value or `null`; multiple mode by an array, and only it\n * accepts `mixedValues`.\n */\nexport type ToggleBarProps<V extends string | number = string> =\n  | (CommonProps & {\n      mode?: 'single';\n      items: readonly ToggleBarItem<V>[];\n      value: V | null;\n      onChange: (next: V | null) => void;\n      allowDeselect?: boolean;\n    })\n  | (CommonProps & {\n      mode: 'multiple';\n      items: readonly ToggleBarItem<V>[];\n      value: readonly V[];\n      /**\n       * Values that are neither on nor off — the sources this bar\n       * aggregates disagree (a text range that is bold in part of it, a\n       * multi-selection whose nodes differ). Rendered `aria-pressed=\"mixed\"`,\n       * the ARIA tri-state a toggle button actually has, rather than\n       * `SelectionPanel`'s reduced-opacity-plus-`title` workaround for\n       * `Switch`, which has no indeterminate state to render.\n       *\n       * `value` wins where the two lists overlap, so a caller that can't\n       * cheaply keep them disjoint doesn't get an ambiguous segment.\n       *\n       * Clicking a mixed segment turns it fully **on**, matching the\n       * everywhere-else convention (and `toggleFlagInRange`'s rule for a\n       * partially-styled text range) that a mixed toggle resolves toward\n       * the affirmative rather than clearing.\n       */\n      mixedValues?: readonly V[];\n      onChange: (next: V[]) => void;\n    });\n\n/**\n * Segmented control for choosing among a fixed set of values — one of them\n * (`mode: 'single'`, the default) or any number (`mode: 'multiple'`).\n *\n * Single mode ignores a click on the already-selected segment unless\n * `allowDeselect` is set. Arrow keys move focus without changing the value;\n * Space and Enter commit.\n */\nexport function ToggleBar<V extends string | number = string>(props: ToggleBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n  const mode = props.mode ?? 'single';\n\n  const isSelected = (value: V): boolean => {\n    if (mode === 'multiple') return (props.value as readonly V[]).includes(value);\n    return (props.value as V | null) === value;\n  };\n\n  /** Mixed only in multiple mode, and only where `value` doesn't already\n   *  claim the segment. Single mode has nothing to be mixed about — its\n   *  aggregate is one value or none. */\n  const isMixed = (value: V): boolean => {\n    if (mode !== 'multiple') return false;\n    const mixed = (props as { mixedValues?: readonly V[] }).mixedValues;\n    return mixed !== undefined && mixed.includes(value) && !isSelected(value);\n  };\n\n  const handleClick = (index: number) => () => {\n    const item = items[index];\n    if (item.disabled) return;\n    if (mode === 'multiple') {\n      const current = props.value as readonly V[];\n      const next = current.includes(item.value)\n        ? current.filter(v => v !== item.value)\n        : [...current, item.value];\n      (props.onChange as (n: V[]) => void)(next);\n    } else {\n      const current = props.value as V | null;\n      if (current === item.value) {\n        if ((props as { allowDeselect?: boolean }).allowDeselect) {\n          (props.onChange as (n: V | null) => void)(null);\n        }\n        return;\n      }\n      (props.onChange as (n: V | null) => void)(item.value);\n    }\n  };\n\n  const selectedIndex = mode === 'single'\n    ? items.findIndex(it => it.value === (props.value as V | null))\n    : -1;\n\n  const roving = useRovingTabIndex({\n    items,\n    itemClassName: s.segment,\n    // Single mode is a radiogroup: the tab stop is the current value, and\n    // arrow keys move the selection with the focus. Multiple mode is a set of\n    // independent toggles — focus alone moves, and Space/Enter flips.\n    tabStopIndex: selectedIndex >= 0 && !items[selectedIndex].disabled ? selectedIndex : undefined,\n    onNavigate: mode === 'single'\n      ? (index) => (props.onChange as (n: V | null) => void)(items[index].value)\n      : undefined,\n    onActivate: mode === 'multiple' ? (index) => handleClick(index)() : undefined,\n  });\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--tb-h' 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={mode === 'multiple' ? 'group' : 'radiogroup'}\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {items.map((item, i) => {\n        const selected = isSelected(item.value);\n        const mixed = isMixed(item.value);\n        const cls = [s.segment, selected && s.segmentSelected, mixed && s.segmentMixed]\n          .filter(Boolean)\n          .join(' ');\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            role={mode === 'multiple' ? undefined : 'radio'}\n            aria-checked={mode === 'multiple' ? undefined : selected}\n            aria-pressed={mode === 'multiple' ? (mixed ? 'mixed' : selected) : undefined}\n            aria-label={item.ariaLabel}\n            disabled={item.disabled}\n            tabIndex={roving.tabIndexFor(i)}\n            className={cls}\n            onClick={handleClick(i)}\n            onKeyDown={roving.onKeyDown(i)}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AC0EA,SAAgB,EAA8C,GAAwC;CACpG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAY,GACzD,IAAO,EAAM,QAAQ,UAErB,KAAc,MACd,MAAS,aAAoB,EAAM,MAAuB,SAAS,EAAM,GACrE,EAAM,UAAuB,GAMjC,KAAW,MAAsB;AACrC,MAAI,MAAS,WAAY,QAAO;EAChC,IAAM,IAAS,EAAyC;AACxD,SAAO,MAAU,KAAA,KAAa,EAAM,SAAS,EAAM,IAAI,CAAC,EAAW,EAAM;IAGrE,KAAe,YAAwB;EAC3C,IAAM,IAAO,EAAM;AACf,SAAK,SACT,KAAI,MAAS,YAAY;GACvB,IAAM,IAAU,EAAM,OAChB,IAAO,EAAQ,SAAS,EAAK,MAAM,GACrC,EAAQ,QAAO,MAAK,MAAM,EAAK,MAAM,GACrC,CAAC,GAAG,GAAS,EAAK,MAAM;AAC3B,KAAM,SAA8B,EAAK;SACrC;AAEL,OADgB,EAAM,UACN,EAAK,OAAO;AAC1B,IAAK,EAAsC,iBACxC,EAAM,SAAmC,KAAK;AAEjD;;AAED,KAAM,SAAmC,EAAK,MAAM;;IAInD,IAAgB,MAAS,WAC3B,EAAM,WAAU,MAAM,EAAG,UAAW,EAAM,MAAmB,GAC7D,IAEE,IAAS,EAAkB;EAC/B;EACA,eAAe,EAAE;EAIjB,cAAc,KAAiB,KAAK,CAAC,EAAM,GAAe,WAAW,IAAgB,KAAA;EACrF,YAAY,MAAS,YAChB,MAAW,EAAM,SAAmC,EAAM,GAAO,MAAM,GACxE,KAAA;EACJ,YAAY,MAAS,cAAc,MAAU,EAAY,EAAM,EAAE,GAAG,KAAA;EACrE,CAAC,EAEI,IAAmC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,UAAqB,GAAG,EAAO,KAAK,EAGtC,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,MAAM,MAAS,aAAa,UAAU;EACtC,cAAY;EACL;YAEN,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAW,EAAW,EAAK,MAAM,EACjC,IAAQ,EAAQ,EAAK,MAAM,EAC3B,IAAM;IAAC,EAAE;IAAS,KAAY,EAAE;IAAiB,KAAS,EAAE;IAAa,CAC5E,OAAO,QAAQ,CACf,KAAK,IAAI;AACZ,UACE,kBAAC,UAAD;IAEE,MAAK;IACL,MAAM,MAAS,aAAa,KAAA,IAAY;IACxC,gBAAc,MAAS,aAAa,KAAA,IAAY;IAChD,gBAAc,MAAS,aAAc,IAAQ,UAAU,IAAY,KAAA;IACnE,cAAY,EAAK;IACjB,UAAU,EAAK;IACf,UAAU,EAAO,YAAY,EAAE;IAC/B,WAAW;IACX,SAAS,EAAY,EAAE;IACvB,WAAW,EAAO,UAAU,EAAE;cAE7B,EAAK;IACC,EAbF,EAAK,MAaH;IAEX;EACE,CAAA"}
+{"version":3,"file":"ToggleBar-D0veW91s.js","names":[],"sources":["../../src/components/ToggleBar/ToggleBar.module.css","../../src/components/ToggleBar/ToggleBar.tsx"],"sourcesContent":["/* Aqua-glass segmented control. The track is a pill-shaped well; the\n   selected segment becomes a tinted glass cylinder that reads as the same\n   \"lozenge\" family as the standalone Button. Visual params come from the\n   `--btn-*` custom properties (see Button.module.css) so the Button Lab\n   can tune both surfaces with one set of sliders. */\n.root {\n  display: inline-flex;\n  height: var(--tb-h, var(--wzl-control-h, 24px));\n  padding: 2px;\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0.18) 0%,\n    rgba(0, 0, 0, 0.05) 100%\n  );\n  border-radius: var(--wzl-radius-pill);\n  /* Clip segments to the track outline so interior corners read crisp and\n     the selected segment's glass treatment doesn't paint over the rounded\n     outer pixels. */\n  overflow: hidden;\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.4),\n    0 1px 0 rgba(255, 255, 255, 0.06);\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.segment {\n  position: relative;\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0 12px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  margin: 0;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-normal);\n  font-size: var(--btn-fontsize, var(--wzl-font-size));\n  line-height: 1;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  /* Only round the outer corners of the bar — middle segments stay square\n     so the seams between them don't render as facing parentheses. */\n  border-radius: 0;\n  isolation: isolate;\n  overflow: hidden;\n  transition: color var(--wzl-motion-fast);\n}\n\n/* A glyph label is a fixed box, not text that can reflow: without this it is\n   the only thing in the segment flex can take width from, and three bars in\n   one property row squeeze it to nothing. The side padding drops with it —\n   8px around a 14px glyph is most of a segment. */\n.segment > svg {\n  flex: none;\n}\n\n.segment:has(> svg) {\n  padding: 0 5px;\n}\n\n.segment:first-child {\n  border-radius: var(--wzl-radius-pill) 0 0 var(--wzl-radius-pill);\n}\n\n.segment:last-child {\n  border-radius: 0 var(--wzl-radius-pill) var(--wzl-radius-pill) 0;\n}\n\n.segment:only-child {\n  border-radius: var(--wzl-radius-pill);\n}\n\n.segment:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n\n.segment:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n}\n\n/* Selected segment — full Aqua glass cylinder. Mirrors Button.variant_primary. */\n.segmentSelected {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha, 45%), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha, 70%), transparent) calc(var(--btn-equator, 52%) - var(--btn-equator-spread, 12%)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint, 95%), white) var(--btn-equator, 52%),\n    var(--wzl-accent) calc(var(--btn-equator, 52%) + var(--btn-equator-spread, 12%) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint, 70%), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  -webkit-backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  color: var(--wzl-fg-on-accent);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow, 0.35)),\n    var(--btn-text-inset-x, 0px) var(--btn-text-inset-y, 1px) 0 rgba(0, 0, 0, var(--btn-text-inset, 0.55)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow, 0.35) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi, 0.42)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo, 0.3)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim, 0.22)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near, 0.3)),\n    0 2px 4px rgba(0, 0, 0, calc(var(--btn-drop-far, 0.18) * 0.8));\n}\n\n/* Specular gloss on the selected segment. Top corners inherit the\n   segment's radius so they hug the upper edge cleanly; bottom corners\n   are flattened so the gloss ends in a straight line at the equator\n   instead of two little curves that read as `)(` brackets. */\n.segmentSelected::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom, 50%) 1px;\n  border-radius: inherit;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top, 0.42)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid, 0.12)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n}\n\n.segmentSelected > * {\n  position: relative;\n  z-index: 2;\n}\n\n/* Mixed segment (`aria-pressed=\"mixed\"`) — the sources disagree. Reads as a\n   deliberate third state rather than a dimmed \"on\": a flat accent wash with\n   none of the selected segment's gloss/cylinder treatment, so it can't be\n   mistaken for the glass lozenge at a glance. */\n.segmentMixed {\n  background: color-mix(in srgb, var(--wzl-accent) 22%, transparent);\n  color: var(--wzl-fg);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wzl-accent) 45%, transparent);\n}\n\n.segmentMixed:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--wzl-accent) 32%, transparent);\n}\n\n.variant_minimal .segmentMixed {\n  background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);\n  box-shadow: none;\n  color: var(--wzl-fg);\n}\n\n/* Small variant — ~60% of the default height, with proportionally reduced\n   padding and font. Sized for dense surfaces (lab control panels, inline\n   filters, etc.). */\n.size_sm {\n  height: 17px;\n  padding: 1px;\n}\n\n.size_sm .segment {\n  padding: 0 8px;\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* `.size_sm .segment` outranks the glyph rule above on specificity, so a\n   small bar's glyph segments need the tight padding restated to stay\n   near-square rather than reading as wide plates. */\n.size_sm .segment:has(> svg) {\n  padding: 0 3px;\n}\n\n/* Minimal variant — strips the pill track, glass selected state, inset\n   shadows, and outer padding. Used in dense diagnostic surfaces (dispatch\n   trace, lab inspectors) where the bar must read as plain text controls. */\n.variant_minimal {\n  height: auto;\n  padding: 0;\n  background: none;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: none;\n  gap: 0;\n}\n\n.variant_minimal .segment {\n  padding: 0 6px;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  line-height: 1.4;\n  border-radius: 0;\n  color: var(--wzl-fg-muted);\n  transition: none;\n}\n\n/* Dividers between segments make the mutual-exclusion grouping visible\n   without a heavy track. Only the inner edges get a rule — the outer\n   border on `.variant_minimal` handles the perimeter. */\n.variant_minimal .segment + .segment {\n  border-left: 1px solid var(--wzl-border);\n}\n\n.variant_minimal .segment:first-child,\n.variant_minimal .segment:last-child,\n.variant_minimal .segment:only-child {\n  border-radius: 0;\n}\n\n.variant_minimal .segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n  background: var(--wzl-surface-hover);\n}\n\n.variant_minimal .segmentSelected {\n  background: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-accent-fg, var(--wzl-accent));\n  text-shadow: none;\n  box-shadow: none;\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.variant_minimal .segmentSelected::before {\n  content: none;\n}\n\n/* Flat variant — no track, no glass, no pill: each segment is its own\n   outlined cell. For property panels, where a bar sits in a row beside\n   inputs and the glass cylinder makes it the loudest thing on the surface. */\n.variant_flat {\n  padding: 0;\n  background: none;\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: none;\n  overflow: visible;\n}\n\n.variant_flat .segment {\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 0;\n  /* Sunken, so an unselected cell sits below the panel and the selected one\n     reads as raised without needing the glass treatment back. */\n  background: var(--wzl-surface-sunken);\n  color: var(--wzl-fg-muted);\n}\n\n/* Adjacent cells share one rule rather than stacking two. */\n.variant_flat .segment + .segment {\n  margin-inline-start: -1px;\n}\n\n.variant_flat .segment:first-child {\n  border-start-start-radius: var(--wzl-radius-sm);\n  border-end-start-radius: var(--wzl-radius-sm);\n}\n\n.variant_flat .segment:last-child {\n  border-start-end-radius: var(--wzl-radius-sm);\n  border-end-end-radius: var(--wzl-radius-sm);\n}\n\n.variant_flat .segment:hover:not(:disabled):not(.segmentSelected) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.variant_flat .segmentSelected {\n  background: var(--wzl-accent);\n  border-color: var(--wzl-accent);\n  color: var(--wzl-fg-on-accent);\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  text-shadow: none;\n  box-shadow: none;\n  /* Its own border rather than the neighbour's overlapping edge. */\n  z-index: 1;\n}\n\n.variant_flat .segmentSelected::before {\n  content: none;\n}\n","import { type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport s from './ToggleBar.module.css';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\n\n/** One segment of a {@link ToggleBar}, identified by its `value`. */\nexport type ToggleBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n};\n\n/** Segment height and type scale for a {@link ToggleBar}. */\nexport type ToggleBarSize = 'sm' | 'md';\n/** Visual treatment of a {@link ToggleBar}. */\nexport type ToggleBarVariant = 'default' | 'minimal' | 'flat';\n\ntype CommonProps = {\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?: ToggleBarSize;\n  /** Visual variant. `minimal` strips the pill track and glass treatment;\n   *  selection becomes a flat accent. For dense diagnostic surfaces. */\n  variant?: ToggleBarVariant;\n};\n\n/**\n * Props for {@link ToggleBar}, discriminated on `mode`. Single mode is\n * controlled by one value or `null`; multiple mode by an array, and only it\n * accepts `mixedValues`.\n */\nexport type ToggleBarProps<V extends string | number = string> =\n  | (CommonProps & {\n      mode?: 'single';\n      items: readonly ToggleBarItem<V>[];\n      value: V | null;\n      onChange: (next: V | null) => void;\n      allowDeselect?: boolean;\n    })\n  | (CommonProps & {\n      mode: 'multiple';\n      items: readonly ToggleBarItem<V>[];\n      value: readonly V[];\n      /**\n       * Values that are neither on nor off — the sources this bar\n       * aggregates disagree (a text range that is bold in part of it, a\n       * multi-selection whose nodes differ). Rendered `aria-pressed=\"mixed\"`,\n       * the ARIA tri-state a toggle button actually has, rather than\n       * `SelectionPanel`'s reduced-opacity-plus-`title` workaround for\n       * `Switch`, which has no indeterminate state to render.\n       *\n       * `value` wins where the two lists overlap, so a caller that can't\n       * cheaply keep them disjoint doesn't get an ambiguous segment.\n       *\n       * Clicking a mixed segment turns it fully **on**, matching the\n       * everywhere-else convention (and `toggleFlagInRange`'s rule for a\n       * partially-styled text range) that a mixed toggle resolves toward\n       * the affirmative rather than clearing.\n       */\n      mixedValues?: readonly V[];\n      onChange: (next: V[]) => void;\n    });\n\n/**\n * Segmented control for choosing among a fixed set of values — one of them\n * (`mode: 'single'`, the default) or any number (`mode: 'multiple'`).\n *\n * Single mode ignores a click on the already-selected segment unless\n * `allowDeselect` is set. Arrow keys move focus without changing the value;\n * Space and Enter commit.\n */\nexport function ToggleBar<V extends string | number = string>(props: ToggleBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n  const mode = props.mode ?? 'single';\n\n  const isSelected = (value: V): boolean => {\n    if (mode === 'multiple') return (props.value as readonly V[]).includes(value);\n    return (props.value as V | null) === value;\n  };\n\n  /** Mixed only in multiple mode, and only where `value` doesn't already\n   *  claim the segment. Single mode has nothing to be mixed about — its\n   *  aggregate is one value or none. */\n  const isMixed = (value: V): boolean => {\n    if (mode !== 'multiple') return false;\n    const mixed = (props as { mixedValues?: readonly V[] }).mixedValues;\n    return mixed !== undefined && mixed.includes(value) && !isSelected(value);\n  };\n\n  const handleClick = (index: number) => () => {\n    const item = items[index];\n    if (item.disabled) return;\n    if (mode === 'multiple') {\n      const current = props.value as readonly V[];\n      const next = current.includes(item.value)\n        ? current.filter(v => v !== item.value)\n        : [...current, item.value];\n      (props.onChange as (n: V[]) => void)(next);\n    } else {\n      const current = props.value as V | null;\n      if (current === item.value) {\n        if ((props as { allowDeselect?: boolean }).allowDeselect) {\n          (props.onChange as (n: V | null) => void)(null);\n        }\n        return;\n      }\n      (props.onChange as (n: V | null) => void)(item.value);\n    }\n  };\n\n  const selectedIndex = mode === 'single'\n    ? items.findIndex(it => it.value === (props.value as V | null))\n    : -1;\n\n  const roving = useRovingTabIndex({\n    items,\n    itemClassName: s.segment,\n    // Single mode is a radiogroup: the tab stop is the current value, and\n    // arrow keys move the selection with the focus. Multiple mode is a set of\n    // independent toggles — focus alone moves, and Space/Enter flips.\n    tabStopIndex: selectedIndex >= 0 && !items[selectedIndex].disabled ? selectedIndex : undefined,\n    onNavigate: mode === 'single'\n      ? (index) => (props.onChange as (n: V | null) => void)(items[index].value)\n      : undefined,\n    onActivate: mode === 'multiple' ? (index) => handleClick(index)() : undefined,\n  });\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--tb-h' 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={mode === 'multiple' ? 'group' : 'radiogroup'}\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {items.map((item, i) => {\n        const selected = isSelected(item.value);\n        const mixed = isMixed(item.value);\n        const cls = [s.segment, selected && s.segmentSelected, mixed && s.segmentMixed]\n          .filter(Boolean)\n          .join(' ');\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            role={mode === 'multiple' ? undefined : 'radio'}\n            aria-checked={mode === 'multiple' ? undefined : selected}\n            aria-pressed={mode === 'multiple' ? (mixed ? 'mixed' : selected) : undefined}\n            aria-label={item.ariaLabel}\n            disabled={item.disabled}\n            tabIndex={roving.tabIndexFor(i)}\n            className={cls}\n            onClick={handleClick(i)}\n            onKeyDown={roving.onKeyDown(i)}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AC0EA,SAAgB,EAA8C,GAAwC;CACpG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAY,GACzD,IAAO,EAAM,QAAQ,UAErB,KAAc,MACd,MAAS,aAAoB,EAAM,MAAuB,SAAS,EAAM,GACrE,EAAM,UAAuB,GAMjC,KAAW,MAAsB;AACrC,MAAI,MAAS,WAAY,QAAO;EAChC,IAAM,IAAS,EAAyC;AACxD,SAAO,MAAU,KAAA,KAAa,EAAM,SAAS,EAAM,IAAI,CAAC,EAAW,EAAM;IAGrE,KAAe,YAAwB;EAC3C,IAAM,IAAO,EAAM;AACf,SAAK,SACT,KAAI,MAAS,YAAY;GACvB,IAAM,IAAU,EAAM,OAChB,IAAO,EAAQ,SAAS,EAAK,MAAM,GACrC,EAAQ,QAAO,MAAK,MAAM,EAAK,MAAM,GACrC,CAAC,GAAG,GAAS,EAAK,MAAM;AAC3B,KAAM,SAA8B,EAAK;SACrC;AAEL,OADgB,EAAM,UACN,EAAK,OAAO;AAC1B,IAAK,EAAsC,iBACxC,EAAM,SAAmC,KAAK;AAEjD;;AAED,KAAM,SAAmC,EAAK,MAAM;;IAInD,IAAgB,MAAS,WAC3B,EAAM,WAAU,MAAM,EAAG,UAAW,EAAM,MAAmB,GAC7D,IAEE,IAAS,EAAkB;EAC/B;EACA,eAAe,EAAE;EAIjB,cAAc,KAAiB,KAAK,CAAC,EAAM,GAAe,WAAW,IAAgB,KAAA;EACrF,YAAY,MAAS,YAChB,MAAW,EAAM,SAAmC,EAAM,GAAO,MAAM,GACxE,KAAA;EACJ,YAAY,MAAS,cAAc,MAAU,EAAY,EAAM,EAAE,GAAG,KAAA;EACrE,CAAC,EAEI,IAAmC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,UAAqB,GAAG,EAAO,KAAK,EAGtC,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,MAAM,MAAS,aAAa,UAAU;EACtC,cAAY;EACL;YAEN,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAW,EAAW,EAAK,MAAM,EACjC,IAAQ,EAAQ,EAAK,MAAM,EAC3B,IAAM;IAAC,EAAE;IAAS,KAAY,EAAE;IAAiB,KAAS,EAAE;IAAa,CAC5E,OAAO,QAAQ,CACf,KAAK,IAAI;AACZ,UACE,kBAAC,UAAD;IAEE,MAAK;IACL,MAAM,MAAS,aAAa,KAAA,IAAY;IACxC,gBAAc,MAAS,aAAa,KAAA,IAAY;IAChD,gBAAc,MAAS,aAAc,IAAQ,UAAU,IAAY,KAAA;IACnE,cAAY,EAAK;IACjB,UAAU,EAAK;IACf,UAAU,EAAO,YAAY,EAAE;IAC/B,WAAW;IACX,SAAS,EAAY,EAAE;IACvB,WAAW,EAAO,UAAU,EAAE;cAE7B,EAAK;IACC,EAbF,EAAK,MAaH;IAEX;EACE,CAAA"}

package/dist/chunks/{ToolButton-CJrPjbsj.js → ToolButton-CLoR9Z4o.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./Tooltip-Di7vxbFa.js";
+import { n as e, t } from "./Tooltip-Bq8Hvj4r.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Focusable as i } from "react-aria-components";
 var a = {
@@ -51,4 +51,4 @@ function o(o) {
 //#endregion
 export { o as t };
 
-//# sourceMappingURL=ToolButton-CJrPjbsj.js.map
+//# sourceMappingURL=ToolButton-CLoR9Z4o.js.map

package/dist/chunks/{ToolButton-CJrPjbsj.js.map → ToolButton-CLoR9Z4o.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToolButton-CJrPjbsj.js","names":[],"sources":["../../src/components/ToolButton/ToolButton.module.css","../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":[".button {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  min-width: 44px;\n  padding: 6px 4px;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  cursor: default;\n  font-family: inherit;\n  font-size: var(--wzl-font-size-xs);\n  line-height: 1.1;\n}\n.button:hover:not([disabled]) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n.button:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n.button.active {\n  background: var(--wzl-surface-pressed);\n  border-color: var(--wzl-accent);\n  color: var(--wzl-fg);\n}\n.button[disabled] {\n  opacity: 0.4;\n}\n\n.icon { display: block; }\n.icon > svg { display: block; }\n.label { font-size: var(--wzl-font-size-xs); }\n.shortcut {\n  color: var(--wzl-fg-muted);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: var(--wzl-font-size-2xs);\n}\n","import type { KeyboardEvent, ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport s from './ToolButton.module.css';\n\n/** Props for {@link ToolButton}. */\nexport interface ToolButtonProps {\n  /** Icon node (typically an SVG component). */\n  icon: ReactNode;\n  /** Human-readable label shown under the icon. */\n  label: string;\n  /** Optional shortcut hint (e.g. \"V\" or \"⌘Z\"). */\n  shortcut?: string;\n  /** Selected/active state — toggles the active visual treatment. */\n  active?: boolean;\n  /** Disabled state — passes through to the underlying button. */\n  disabled?: boolean;\n  /**\n   * When true, sets `aria-disabled=\"true\"` on the button without using the\n   * native `disabled` attribute. This keeps the button focusable and reachable\n   * by keyboard (roving-tabindex still applies) while marking it as ineligible\n   * to screen readers. The caller is responsible for making `onClick` a no-op.\n   */\n  ariaDisabled?: boolean;\n  /**\n   * Whether this button is the currently tabbable member of its toolbar.\n   * Toolbars use roving tabindex: exactly one button has `tabIndex=0` at\n   * a time; the rest are `-1`. Caller manages which.\n   */\n  tabbable?: boolean;\n  /** Click handler. */\n  onClick(): void;\n  /** Key handler for the underlying button — a toolbar's roving-tabindex\n   *  navigation attaches here. */\n  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;\n  /**\n   * Tooltip content. Defaults to `label` (plus `shortcut` if provided).\n   */\n  title?: string;\n  /** Additional class for the root button. */\n  className?: string;\n}\n\n/**\n * Generic icon-+-label toolbar button — building block for `ToolPalette`\n * and similar surfaces. Headless about layout direction (parent group\n * supplies flex direction via `ToolGroup`). Theme via `--wzl-*` tokens.\n */\nexport function ToolButton(props: ToolButtonProps) {\n  const {\n    icon, label, shortcut, active, disabled, ariaDisabled, tabbable,\n    onClick, onKeyDown, title, className,\n  } = props;\n  const resolvedTitle = title ?? (shortcut ? `${label} (${shortcut})` : label);\n  const cls = [s.button, active && s.active, className].filter(Boolean).join(' ');\n  return (\n    <TooltipTrigger isDisabled={disabled}>\n      <Focusable isDisabled={disabled}>\n        <button\n          type=\"button\"\n          tabIndex={tabbable ? 0 : -1}\n          className={cls}\n          aria-current={active ? 'true' : undefined}\n          aria-disabled={ariaDisabled ? 'true' : undefined}\n          disabled={disabled}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n        >\n          <span className={s.icon} aria-hidden=\"true\">{icon}</span>\n          <span className={s.label}>{label}</span>\n          {shortcut && <span className={s.shortcut}>{shortcut}</span>}\n        </button>\n      </Focusable>\n      <Tooltip>{resolvedTitle}</Tooltip>\n    </TooltipTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;ACgDA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EACJ,SAAM,UAAO,aAAU,WAAQ,aAAU,iBAAc,aACvD,YAAS,cAAW,UAAO,iBACzB,GACE,IAAgB,MAAU,IAAW,GAAG,EAAM,IAAI,EAAS,KAAK,IAChE,IAAM;EAAC,EAAE;EAAQ,KAAU,EAAE;EAAQ;EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAC/E,QACE,kBAAC,GAAD;EAAgB,YAAY;YAA5B,CACE,kBAAC,GAAD;GAAW,YAAY;aACrB,kBAAC,UAAD;IACE,MAAK;IACL,UAAU,IAAW,IAAI;IACzB,WAAW;IACX,gBAAc,IAAS,SAAS,KAAA;IAChC,iBAAe,IAAe,SAAS,KAAA;IAC7B;IACD;IACE;cARb;KAUE,kBAAC,QAAD;MAAM,WAAW,EAAE;MAAM,eAAY;gBAAQ;MAAY,CAAA;KACzD,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAQ;MAAa,CAAA;KACvC,KAAY,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAW;MAAgB,CAAA;KACpD;;GACC,CAAA,EACZ,kBAAC,GAAD,EAAA,UAAU,GAAwB,CAAA,CACnB"}
+{"version":3,"file":"ToolButton-CLoR9Z4o.js","names":[],"sources":["../../src/components/ToolButton/ToolButton.module.css","../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":[".button {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  min-width: 44px;\n  padding: 6px 4px;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  cursor: default;\n  font-family: inherit;\n  font-size: var(--wzl-font-size-xs);\n  line-height: 1.1;\n}\n.button:hover:not([disabled]) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n.button:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n.button.active {\n  background: var(--wzl-surface-pressed);\n  border-color: var(--wzl-accent);\n  color: var(--wzl-fg);\n}\n.button[disabled] {\n  opacity: 0.4;\n}\n\n.icon { display: block; }\n.icon > svg { display: block; }\n.label { font-size: var(--wzl-font-size-xs); }\n.shortcut {\n  color: var(--wzl-fg-muted);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: var(--wzl-font-size-2xs);\n}\n","import type { KeyboardEvent, ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport s from './ToolButton.module.css';\n\n/** Props for {@link ToolButton}. */\nexport interface ToolButtonProps {\n  /** Icon node (typically an SVG component). */\n  icon: ReactNode;\n  /** Human-readable label shown under the icon. */\n  label: string;\n  /** Optional shortcut hint (e.g. \"V\" or \"⌘Z\"). */\n  shortcut?: string;\n  /** Selected/active state — toggles the active visual treatment. */\n  active?: boolean;\n  /** Disabled state — passes through to the underlying button. */\n  disabled?: boolean;\n  /**\n   * When true, sets `aria-disabled=\"true\"` on the button without using the\n   * native `disabled` attribute. This keeps the button focusable and reachable\n   * by keyboard (roving-tabindex still applies) while marking it as ineligible\n   * to screen readers. The caller is responsible for making `onClick` a no-op.\n   */\n  ariaDisabled?: boolean;\n  /**\n   * Whether this button is the currently tabbable member of its toolbar.\n   * Toolbars use roving tabindex: exactly one button has `tabIndex=0` at\n   * a time; the rest are `-1`. Caller manages which.\n   */\n  tabbable?: boolean;\n  /** Click handler. */\n  onClick(): void;\n  /** Key handler for the underlying button — a toolbar's roving-tabindex\n   *  navigation attaches here. */\n  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;\n  /**\n   * Tooltip content. Defaults to `label` (plus `shortcut` if provided).\n   */\n  title?: string;\n  /** Additional class for the root button. */\n  className?: string;\n}\n\n/**\n * Generic icon-+-label toolbar button — building block for `ToolPalette`\n * and similar surfaces. Headless about layout direction (parent group\n * supplies flex direction via `ToolGroup`). Theme via `--wzl-*` tokens.\n */\nexport function ToolButton(props: ToolButtonProps) {\n  const {\n    icon, label, shortcut, active, disabled, ariaDisabled, tabbable,\n    onClick, onKeyDown, title, className,\n  } = props;\n  const resolvedTitle = title ?? (shortcut ? `${label} (${shortcut})` : label);\n  const cls = [s.button, active && s.active, className].filter(Boolean).join(' ');\n  return (\n    <TooltipTrigger isDisabled={disabled}>\n      <Focusable isDisabled={disabled}>\n        <button\n          type=\"button\"\n          tabIndex={tabbable ? 0 : -1}\n          className={cls}\n          aria-current={active ? 'true' : undefined}\n          aria-disabled={ariaDisabled ? 'true' : undefined}\n          disabled={disabled}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n        >\n          <span className={s.icon} aria-hidden=\"true\">{icon}</span>\n          <span className={s.label}>{label}</span>\n          {shortcut && <span className={s.shortcut}>{shortcut}</span>}\n        </button>\n      </Focusable>\n      <Tooltip>{resolvedTitle}</Tooltip>\n    </TooltipTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;ACgDA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EACJ,SAAM,UAAO,aAAU,WAAQ,aAAU,iBAAc,aACvD,YAAS,cAAW,UAAO,iBACzB,GACE,IAAgB,MAAU,IAAW,GAAG,EAAM,IAAI,EAAS,KAAK,IAChE,IAAM;EAAC,EAAE;EAAQ,KAAU,EAAE;EAAQ;EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAC/E,QACE,kBAAC,GAAD;EAAgB,YAAY;YAA5B,CACE,kBAAC,GAAD;GAAW,YAAY;aACrB,kBAAC,UAAD;IACE,MAAK;IACL,UAAU,IAAW,IAAI;IACzB,WAAW;IACX,gBAAc,IAAS,SAAS,KAAA;IAChC,iBAAe,IAAe,SAAS,KAAA;IAC7B;IACD;IACE;cARb;KAUE,kBAAC,QAAD;MAAM,WAAW,EAAE;MAAM,eAAY;gBAAQ;MAAY,CAAA;KACzD,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAQ;MAAa,CAAA;KACvC,KAAY,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAW;MAAgB,CAAA;KACpD;;GACC,CAAA,EACZ,kBAAC,GAAD,EAAA,UAAU,GAAwB,CAAA,CACnB"}

package/dist/chunks/{ToolGroup-D_lDzkvU.js → ToolGroup-BnE23mcA.js}

@@ -22,4 +22,4 @@ function n(n) {
 //#endregion
 export { n as t };
 
-//# sourceMappingURL=ToolGroup-D_lDzkvU.js.map
+//# sourceMappingURL=ToolGroup-BnE23mcA.js.map

package/dist/chunks/{ToolGroup-D_lDzkvU.js.map → ToolGroup-BnE23mcA.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToolGroup-D_lDzkvU.js","names":[],"sources":["../../src/components/ToolGroup/ToolGroup.module.css","../../src/components/ToolGroup/ToolGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.group.horizontal {\n  flex-direction: row;\n}\n","import type { ReactNode } from 'react';\nimport s from './ToolGroup.module.css';\n\n/** Props for {@link ToolGroup}. */\nexport interface ToolGroupProps {\n  children: ReactNode;\n  /**\n   * Lays children along an axis. `'vertical'` (default) stacks them in\n   * a column; `'horizontal'` lays them in a row. Independent of the\n   * parent toolbar's own orientation.\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /**\n   * Optional `data-group` attribute — useful for parents that want to\n   * select the group from CSS or tests by name.\n   */\n  groupKey?: string;\n  /** Accessible name for the group (rendered as `aria-label`). */\n  ariaLabel?: string;\n  className?: string;\n}\n\n/**\n * Generic toolbar group — a `role=\"group\"` flex container that arranges\n * `<ToolButton>`s (or any children) along a chosen axis. No visual chrome\n * beyond layout; theming lives on the buttons.\n */\nexport function ToolGroup(props: ToolGroupProps) {\n  const { children, orientation = 'vertical', groupKey, ariaLabel, className } = props;\n  const cls = [s.group, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n  return (\n    <div className={cls} role=\"group\" data-group={groupKey} aria-label={ariaLabel}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AC2BA,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EAAE,aAAU,iBAAc,YAAY,aAAU,cAAW,iBAAc;AAG/E,QACE,kBAAC,OAAD;EAAK,WAHK;GAAC,EAAE;GAAO,MAAgB,gBAAgB,EAAE;GAAY;GAAU,CAC3E,OAAO,QAAQ,CAAC,KAAK,IAEN;EAAK,MAAK;EAAQ,cAAY;EAAU,cAAY;EACjE;EACG,CAAA"}
+{"version":3,"file":"ToolGroup-BnE23mcA.js","names":[],"sources":["../../src/components/ToolGroup/ToolGroup.module.css","../../src/components/ToolGroup/ToolGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.group.horizontal {\n  flex-direction: row;\n}\n","import type { ReactNode } from 'react';\nimport s from './ToolGroup.module.css';\n\n/** Props for {@link ToolGroup}. */\nexport interface ToolGroupProps {\n  children: ReactNode;\n  /**\n   * Lays children along an axis. `'vertical'` (default) stacks them in\n   * a column; `'horizontal'` lays them in a row. Independent of the\n   * parent toolbar's own orientation.\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /**\n   * Optional `data-group` attribute — useful for parents that want to\n   * select the group from CSS or tests by name.\n   */\n  groupKey?: string;\n  /** Accessible name for the group (rendered as `aria-label`). */\n  ariaLabel?: string;\n  className?: string;\n}\n\n/**\n * Generic toolbar group — a `role=\"group\"` flex container that arranges\n * `<ToolButton>`s (or any children) along a chosen axis. No visual chrome\n * beyond layout; theming lives on the buttons.\n */\nexport function ToolGroup(props: ToolGroupProps) {\n  const { children, orientation = 'vertical', groupKey, ariaLabel, className } = props;\n  const cls = [s.group, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n  return (\n    <div className={cls} role=\"group\" data-group={groupKey} aria-label={ariaLabel}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AC2BA,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EAAE,aAAU,iBAAc,YAAY,aAAU,cAAW,iBAAc;AAG/E,QACE,kBAAC,OAAD;EAAK,WAHK;GAAC,EAAE;GAAO,MAAgB,gBAAgB,EAAE;GAAY;GAAU,CAC3E,OAAO,QAAQ,CAAC,KAAK,IAEN;EAAK,MAAK;EAAQ,cAAY;EAAU,cAAY;EACjE;EACG,CAAA"}

package/dist/chunks/{ToolOptionsBar-BA6Sb3U2.js → ToolOptionsBar-ByHX7y1M.js}

@@ -24,4 +24,4 @@ function r(r) {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=ToolOptionsBar-BA6Sb3U2.js.map
+//# sourceMappingURL=ToolOptionsBar-ByHX7y1M.js.map

package/dist/chunks/{ToolOptionsBar-BA6Sb3U2.js.map → ToolOptionsBar-ByHX7y1M.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToolOptionsBar-BA6Sb3U2.js","names":[],"sources":["../../src/components/ToolOptionsBar/ToolOptionsBar.module.css","../../src/components/ToolOptionsBar/ToolOptionsBar.tsx"],"sourcesContent":["/* Horizontal strip reserved above the workspace for contextual tool\n   options. Fixed height so mounting/unmounting content never resizes\n   the workspace beneath it — that's the whole reason this row exists\n   as permanent chrome rather than an on-demand overlay.\n\n   Overflow: when controls exceed the available width, `.controls`\n   scrolls horizontally rather than wrapping (which would grow the row\n   and defeat the fixed-height guarantee above) or clipping (which\n   would hide controls with no way to reach them). A flyout/long-press\n   affordance was considered and rejected — grouped, directly visible\n   layouts are preferred in this repo. */\n\n.root {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: var(--wzl-tb-height, 28px);\n  padding: 0 8px;\n  background: var(--wzl-surface);\n  border-bottom: 1px solid var(--wzl-border);\n  color: var(--wzl-fg);\n  overflow: hidden;\n}\n\n.label {\n  flex: 0 0 auto;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.controls {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n}\n\n/* Firefox gets a thin scrollbar for free via `scrollbar-width` above.\n * Chromium/WebKit need it spelled out — on a classic (non-overlay)\n * scrollbar theme (default on Windows Chrome/Edge), an unstyled\n * horizontal scrollbar is ~15-17px tall and renders *inside* this box,\n * clipping/off-centering the row's controls. That would reintroduce the\n * exact height instability the scroll-over-wrap overflow choice above\n * exists to avoid — just at the row's inner edge instead of its outer\n * one. Pin it thin and out of the way instead. */\n.controls::-webkit-scrollbar {\n  height: 4px;\n}\n.controls::-webkit-scrollbar-track {\n  background: transparent;\n}\n.controls::-webkit-scrollbar-thumb {\n  background: var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n","import type { ReactNode } from 'react';\nimport s from './ToolOptionsBar.module.css';\n\n/** Props for {@link ToolOptionsBar}. */\nexport interface ToolOptionsBarProps {\n  /**\n   * Context label for the row — e.g. the active tool's name. Rendered\n   * before the children and doubles as the toolbar's `aria-label`. Omit\n   * it and the row still renders (it's a permanently reserved slot), just\n   * without an accessible name.\n   *\n   * Using `label` for both the visible text and `aria-label` means a\n   * screen reader announces it twice when landing on the toolbar (\"Text,\n   * toolbar\", then \"Text\" again when browsing into the visible span).\n   * `aria-labelledby` would avoid the echo at the cost of id plumbing and\n   * an awkward no-`id`-to-point-at case when `label` is omitted. The\n   * double-announcement is common enough for labelled landmark regions\n   * that it's left as-is — considered, not missed.\n   */\n  label?: string;\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * Horizontal strip reserved above the workspace for contextual tool\n * options — its first tenant is the character controls a text tool\n * exposes while a caret range is active. Pure chrome: it renders an\n * optional label and a children slot, nothing else. It knows nothing\n * about text, or about any specific tool — any tool can fill it.\n *\n * The row always renders, even with no `label` and no `children`,\n * because the app reserves its height permanently rather than mounting\n * it on demand — mounting mid-edit would resize the workspace under a\n * canvas that's sized to the page.\n *\n * `role=\"toolbar\"` without roving tabindex: the ARIA authoring practices\n * expect arrow-key roving focus across a toolbar's items, but this\n * component doesn't own or know the shape of its children — they're\n * arbitrary, possibly compound controls (`NumberField`, `Select`,\n * `ColorField`) that already use arrow keys for their own value editing.\n * Imposing roving focus here would fight those controls' own key\n * handling. Tab order falls back to normal DOM order for now; revisit\n * once the first tenant's control set is concrete and a roving-focus\n * contract can be designed in coordination with those controls.\n */\nexport function ToolOptionsBar(props: ToolOptionsBarProps) {\n  const { label, children, className } = props;\n  const cls = [s.root, className].filter(Boolean).join(' ');\n  return (\n    <div className={cls} role=\"toolbar\" aria-label={label}>\n      {label !== undefined && <span className={s.label}>{label}</span>}\n      <div className={s.controls}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AC8CA,SAAgB,EAAe,GAA4B;CACzD,IAAM,EAAE,UAAO,aAAU,iBAAc;AAEvC,QACE,kBAAC,OAAD;EAAK,WAFK,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAEnC;EAAK,MAAK;EAAU,cAAY;YAAhD,CACG,MAAU,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAQ;GAAa,CAAA,EAChE,kBAAC,OAAD;GAAK,WAAW,EAAE;GAAW;GAAe,CAAA,CACxC"}
+{"version":3,"file":"ToolOptionsBar-ByHX7y1M.js","names":[],"sources":["../../src/components/ToolOptionsBar/ToolOptionsBar.module.css","../../src/components/ToolOptionsBar/ToolOptionsBar.tsx"],"sourcesContent":["/* Horizontal strip reserved above the workspace for contextual tool\n   options. Fixed height so mounting/unmounting content never resizes\n   the workspace beneath it — that's the whole reason this row exists\n   as permanent chrome rather than an on-demand overlay.\n\n   Overflow: when controls exceed the available width, `.controls`\n   scrolls horizontally rather than wrapping (which would grow the row\n   and defeat the fixed-height guarantee above) or clipping (which\n   would hide controls with no way to reach them). A flyout/long-press\n   affordance was considered and rejected — grouped, directly visible\n   layouts are preferred in this repo. */\n\n.root {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: var(--wzl-tb-height, 28px);\n  padding: 0 8px;\n  background: var(--wzl-surface);\n  border-bottom: 1px solid var(--wzl-border);\n  color: var(--wzl-fg);\n  overflow: hidden;\n}\n\n.label {\n  flex: 0 0 auto;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.controls {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n}\n\n/* Firefox gets a thin scrollbar for free via `scrollbar-width` above.\n * Chromium/WebKit need it spelled out — on a classic (non-overlay)\n * scrollbar theme (default on Windows Chrome/Edge), an unstyled\n * horizontal scrollbar is ~15-17px tall and renders *inside* this box,\n * clipping/off-centering the row's controls. That would reintroduce the\n * exact height instability the scroll-over-wrap overflow choice above\n * exists to avoid — just at the row's inner edge instead of its outer\n * one. Pin it thin and out of the way instead. */\n.controls::-webkit-scrollbar {\n  height: 4px;\n}\n.controls::-webkit-scrollbar-track {\n  background: transparent;\n}\n.controls::-webkit-scrollbar-thumb {\n  background: var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n","import type { ReactNode } from 'react';\nimport s from './ToolOptionsBar.module.css';\n\n/** Props for {@link ToolOptionsBar}. */\nexport interface ToolOptionsBarProps {\n  /**\n   * Context label for the row — e.g. the active tool's name. Rendered\n   * before the children and doubles as the toolbar's `aria-label`. Omit\n   * it and the row still renders (it's a permanently reserved slot), just\n   * without an accessible name.\n   *\n   * Using `label` for both the visible text and `aria-label` means a\n   * screen reader announces it twice when landing on the toolbar (\"Text,\n   * toolbar\", then \"Text\" again when browsing into the visible span).\n   * `aria-labelledby` would avoid the echo at the cost of id plumbing and\n   * an awkward no-`id`-to-point-at case when `label` is omitted. The\n   * double-announcement is common enough for labelled landmark regions\n   * that it's left as-is — considered, not missed.\n   */\n  label?: string;\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * Horizontal strip reserved above the workspace for contextual tool\n * options — its first tenant is the character controls a text tool\n * exposes while a caret range is active. Pure chrome: it renders an\n * optional label and a children slot, nothing else. It knows nothing\n * about text, or about any specific tool — any tool can fill it.\n *\n * The row always renders, even with no `label` and no `children`,\n * because the app reserves its height permanently rather than mounting\n * it on demand — mounting mid-edit would resize the workspace under a\n * canvas that's sized to the page.\n *\n * `role=\"toolbar\"` without roving tabindex: the ARIA authoring practices\n * expect arrow-key roving focus across a toolbar's items, but this\n * component doesn't own or know the shape of its children — they're\n * arbitrary, possibly compound controls (`NumberField`, `Select`,\n * `ColorField`) that already use arrow keys for their own value editing.\n * Imposing roving focus here would fight those controls' own key\n * handling. Tab order falls back to normal DOM order for now; revisit\n * once the first tenant's control set is concrete and a roving-focus\n * contract can be designed in coordination with those controls.\n */\nexport function ToolOptionsBar(props: ToolOptionsBarProps) {\n  const { label, children, className } = props;\n  const cls = [s.root, className].filter(Boolean).join(' ');\n  return (\n    <div className={cls} role=\"toolbar\" aria-label={label}>\n      {label !== undefined && <span className={s.label}>{label}</span>}\n      <div className={s.controls}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AC8CA,SAAgB,EAAe,GAA4B;CACzD,IAAM,EAAE,UAAO,aAAU,iBAAc;AAEvC,QACE,kBAAC,OAAD;EAAK,WAFK,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAEnC;EAAK,MAAK;EAAU,cAAY;YAAhD,CACG,MAAU,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAQ;GAAa,CAAA,EAChE,kBAAC,OAAD;GAAK,WAAW,EAAE;GAAW;GAAe,CAAA,CACxC"}

package/dist/chunks/{ToolPalette-TMvkaJwr.js → ToolPalette-W-rAsomq.js}

@@ -1,7 +1,7 @@
-import { t as e } from "./keyGlyph-DNpLxF8u.js";
-import { t } from "./useRovingTabIndex-CQz8EiKh.js";
-import { t as n } from "./ToolButton-CJrPjbsj.js";
-import { t as r } from "./ToolGroup-D_lDzkvU.js";
+import { t as e } from "./keyGlyph-BLFMKZgF.js";
+import { t } from "./useRovingTabIndex-ByjY4lnw.js";
+import { t as n } from "./ToolButton-CLoR9Z4o.js";
+import { t as r } from "./ToolGroup-BnE23mcA.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { UnknownIcon as o } from "@weasel-js/core";
 import { Fragment as s } from "react";
@@ -94,4 +94,4 @@ function _(e) {
 //#endregion
 export { d as n, u as r, _ as t };
 
-//# sourceMappingURL=ToolPalette-TMvkaJwr.js.map
+//# sourceMappingURL=ToolPalette-W-rAsomq.js.map

package/dist/chunks/{ToolPalette-TMvkaJwr.js.map → ToolPalette-W-rAsomq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToolPalette-TMvkaJwr.js","names":[],"sources":["../../src/components/ToolPalette/ToolPalette.module.css","../../src/components/ToolPalette/formatShortcut.ts","../../src/components/ToolPalette/ToolPalette.tsx"],"sourcesContent":[".palette {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  padding: 4px;\n  user-select: none;\n}\n.palette.horizontal {\n  flex-direction: row;\n}\n\n/* Marker only — `useRovingTabIndex` finds the palette's buttons by this class.\n   Carries no styles; deleting it breaks keyboard navigation. */\n.paletteBtn {}\n\n/* Applied to ineligible tool buttons in the active mode. */\n.ineligibleBtn {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.separator {\n  background: var(--wzl-border);\n}\n.palette:not(.horizontal) .separator {\n  height: 1px;\n  margin: 2px 0;\n}\n.palette.horizontal .separator {\n  width: 1px;\n  margin: 0 2px;\n}\n","import { keyGlyph } from '../Keycaps/keyGlyph';\n\nexport interface ShortcutInput {\n  key: string | readonly string[];\n  mod?: boolean;\n  alt?: boolean;\n  shift?: boolean | 'optional';\n}\n\n/** Format a shortcut as an array of display chips, one per key — modifier\n *  icons (⌘, ↑, ⌥) followed by the key glyph. UIs that want a boxed\n *  per-key look render each chip in its own element. `shift: 'optional'` is\n *  treated as falsy. */\nexport function formatShortcutParts(b: ShortcutInput | undefined): readonly string[] | undefined {\n  if (!b) return undefined;\n  const rawKey = Array.isArray(b.key) ? b.key[0] : (b.key as string);\n  const parts: string[] = [];\n  if (b.mod) parts.push('⌘');\n  if (b.shift === true) parts.push('⇧');\n  if (b.alt) parts.push('⌥');\n  parts.push(keyGlyph(rawKey));\n  return parts;\n}\n\n/** Format a shortcut as a single display string. Order: mod, shift, alt,\n *  key. Returns `undefined` for `undefined` input so callers can `??` a\n *  fallback. When `key` is an array, the first element is used. `shift: 'optional'`\n *  is treated as falsy. */\nexport function formatShortcut(b: ShortcutInput | undefined): string | undefined {\n  const parts = formatShortcutParts(b);\n  return parts ? parts.join('') : undefined;\n}\n","import { Fragment, type ReactNode } from 'react';\nimport { UnknownIcon } from '@weasel-js/core';\nimport type { AnyTool, ToolsApi } from '@weasel-js/core';\nimport { eligibleContribution, type ModeRegistry } from '@weasel-js/modes';\nimport { ToolButton } from '../ToolButton';\nimport { ToolGroup } from '../ToolGroup';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\nimport s from './ToolPalette.module.css';\nimport { formatShortcut, type ShortcutInput } from './formatShortcut';\n\nconst DEFAULT_GROUP_ORDER = ['select', 'shape', 'draw', 'type', 'view'] as const;\nconst MISC = 'misc';\n\nfunction partitionByGroup(list: AnyTool[]): Map<string, AnyTool[]> {\n  const groups = new Map<string, AnyTool[]>();\n  for (const tool of list) {\n    const g = tool.presentation?.group ?? MISC;\n    const bucket = groups.get(g) ?? [];\n    bucket.push(tool);\n    groups.set(g, bucket);\n  }\n  return groups;\n}\n\nfunction orderedGroupKeys(\n  groups: Map<string, AnyTool[]>,\n  groupOrder: readonly string[],\n): string[] {\n  const seen = new Set(groups.keys());\n  const ordered: string[] = [];\n  for (const known of groupOrder) {\n    if (seen.has(known)) {\n      ordered.push(known);\n      seen.delete(known);\n    }\n  }\n  // Unknown groups in insertion order (Map preserves it), misc last.\n  for (const key of groups.keys()) {\n    if (seen.has(key) && key !== MISC) {\n      ordered.push(key);\n      seen.delete(key);\n    }\n  }\n  if (seen.has(MISC)) ordered.push(MISC);\n  return ordered;\n}\n\nfunction resolveIcon(tool: AnyTool): ReactNode {\n  const rawIcon = tool.presentation?.icon;\n  if (rawIcon == null) return <UnknownIcon />;\n  if (typeof rawIcon === 'function') return rawIcon(undefined);\n  return rawIcon;\n}\n\n/** Props for {@link ToolPalette}. */\nexport interface ToolPaletteProps {\n  tools: ToolsApi;\n  orientation?: 'vertical' | 'horizontal';\n  className?: string;\n  /** Derive the keyboard shortcut for a tool button from the action registry.\n   *  Called with the tool's id; return `undefined` to suppress a chip. When\n   *  omitted, falls back to `tool.keybinding` (legacy path). */\n  lookupShortcut?: (toolId: string) => ShortcutInput | undefined;\n  /**\n   * Optional mode registry. When provided, tools whose `capabilities` do not\n   * match the current mode are rendered greyed-out, aria-disabled, and their\n   * onClick is suppressed. When omitted, all tools are treated as eligible\n   * (preserves existing behaviour in consumers that haven't wired a registry).\n   */\n  modeRegistry?: ModeRegistry;\n  /**\n   * Presentation-group display order. Groups not listed keep their registry\n   * insertion order after the listed ones; `misc` always renders last.\n   * Defaults to `['select', 'shape', 'draw', 'type', 'view']`.\n   */\n  groupOrder?: readonly string[];\n}\n\n/**\n * Toolbar of the registered tools, split into separator-divided groups by\n * each tool's presentation group and navigable by arrow keys. Clicking a\n * button makes that tool active.\n *\n * Given a `modeRegistry`, tools whose capabilities the current mode does not\n * allow render greyed out and inert rather than disappearing.\n */\nexport function ToolPalette(props: ToolPaletteProps) {\n  const {\n    tools, orientation = 'vertical', className, lookupShortcut, modeRegistry,\n    groupOrder = DEFAULT_GROUP_ORDER,\n  } = props;\n  const list = Object.values(tools.registry);\n  const groups = partitionByGroup(list);\n  const groupKeys = orderedGroupKeys(groups, groupOrder);\n  const cls = [s.palette, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n\n  // Flat, in DOM order — the roving-tabindex hook indexes by this order.\n  const ordered = groupKeys.flatMap((k) => groups.get(k)!);\n  const eligibility = ordered.map(\n    (tool) => (modeRegistry ? eligibleContribution(modeRegistry, tool) : true),\n  );\n  const activeIndex = ordered.findIndex((t) => t.id === tools.active);\n  const roving = useRovingTabIndex({\n    items: eligibility.map((enabled) => ({ disabled: !enabled })),\n    itemClassName: s.paletteBtn,\n    // An ineligible active tool can't hold the tab stop; fall back to the\n    // hook's first-enabled default.\n    ...(activeIndex >= 0 && eligibility[activeIndex] ? { tabStopIndex: activeIndex } : {}),\n  });\n  let index = -1;\n\n  return (\n    <div\n      ref={roving.rootRef}\n      className={cls}\n      role=\"toolbar\"\n      aria-label=\"Tools\"\n    >\n      {groupKeys.map((key, i) => (\n        <Fragment key={key}>\n          {i > 0 && (\n            <div\n              className={s.separator}\n              role=\"separator\"\n              aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n            />\n          )}\n          <ToolGroup orientation={orientation} groupKey={key}>\n            {groups.get(key)!.map((tool) => {\n              const i = ++index;\n              const label = tool.presentation?.label ?? tool.id;\n              const shortcut = tool.presentation?.shortcut\n                ?? formatShortcut(lookupShortcut ? lookupShortcut(tool.id) : tool.keybinding);\n              const enabled = eligibility[i];\n              const modeName = modeRegistry ? modeRegistry.current().id : undefined;\n              const resolvedTitle = !enabled && modeName\n                ? `${label}${shortcut ? ` (${shortcut})` : ''} — disabled in ${modeName} mode`\n                : undefined;\n              return (\n                <ToolButton\n                  key={tool.id}\n                  icon={resolveIcon(tool)}\n                  label={label}\n                  shortcut={shortcut}\n                  active={tools.active === tool.id}\n                  tabbable={roving.tabIndexFor(i) === 0}\n                  ariaDisabled={!enabled}\n                  className={[s.paletteBtn, !enabled && s.ineligibleBtn].filter(Boolean).join(' ')}\n                  title={resolvedTitle}\n                  onClick={enabled ? () => tools.setActive(tool.id) : () => {}}\n                  onKeyDown={roving.onKeyDown(i)}\n                />\n              );\n            })}\n          </ToolGroup>\n        </Fragment>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ToolPalette-W-rAsomq.js","names":[],"sources":["../../src/components/ToolPalette/ToolPalette.module.css","../../src/components/ToolPalette/formatShortcut.ts","../../src/components/ToolPalette/ToolPalette.tsx"],"sourcesContent":[".palette {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  padding: 4px;\n  user-select: none;\n}\n.palette.horizontal {\n  flex-direction: row;\n}\n\n/* Marker only — `useRovingTabIndex` finds the palette's buttons by this class.\n   Carries no styles; deleting it breaks keyboard navigation. */\n.paletteBtn {}\n\n/* Applied to ineligible tool buttons in the active mode. */\n.ineligibleBtn {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.separator {\n  background: var(--wzl-border);\n}\n.palette:not(.horizontal) .separator {\n  height: 1px;\n  margin: 2px 0;\n}\n.palette.horizontal .separator {\n  width: 1px;\n  margin: 0 2px;\n}\n","import { keyGlyph } from '../Keycaps/keyGlyph';\n\nexport interface ShortcutInput {\n  key: string | readonly string[];\n  mod?: boolean;\n  alt?: boolean;\n  shift?: boolean | 'optional';\n}\n\n/** Format a shortcut as an array of display chips, one per key — modifier\n *  icons (⌘, ↑, ⌥) followed by the key glyph. UIs that want a boxed\n *  per-key look render each chip in its own element. `shift: 'optional'` is\n *  treated as falsy. */\nexport function formatShortcutParts(b: ShortcutInput | undefined): readonly string[] | undefined {\n  if (!b) return undefined;\n  const rawKey = Array.isArray(b.key) ? b.key[0] : (b.key as string);\n  const parts: string[] = [];\n  if (b.mod) parts.push('⌘');\n  if (b.shift === true) parts.push('⇧');\n  if (b.alt) parts.push('⌥');\n  parts.push(keyGlyph(rawKey));\n  return parts;\n}\n\n/** Format a shortcut as a single display string. Order: mod, shift, alt,\n *  key. Returns `undefined` for `undefined` input so callers can `??` a\n *  fallback. When `key` is an array, the first element is used. `shift: 'optional'`\n *  is treated as falsy. */\nexport function formatShortcut(b: ShortcutInput | undefined): string | undefined {\n  const parts = formatShortcutParts(b);\n  return parts ? parts.join('') : undefined;\n}\n","import { Fragment, type ReactNode } from 'react';\nimport { UnknownIcon } from '@weasel-js/core';\nimport type { AnyTool, ToolsApi } from '@weasel-js/core';\nimport { eligibleContribution, type ModeRegistry } from '@weasel-js/modes';\nimport { ToolButton } from '../ToolButton';\nimport { ToolGroup } from '../ToolGroup';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\nimport s from './ToolPalette.module.css';\nimport { formatShortcut, type ShortcutInput } from './formatShortcut';\n\nconst DEFAULT_GROUP_ORDER = ['select', 'shape', 'draw', 'type', 'view'] as const;\nconst MISC = 'misc';\n\nfunction partitionByGroup(list: AnyTool[]): Map<string, AnyTool[]> {\n  const groups = new Map<string, AnyTool[]>();\n  for (const tool of list) {\n    const g = tool.presentation?.group ?? MISC;\n    const bucket = groups.get(g) ?? [];\n    bucket.push(tool);\n    groups.set(g, bucket);\n  }\n  return groups;\n}\n\nfunction orderedGroupKeys(\n  groups: Map<string, AnyTool[]>,\n  groupOrder: readonly string[],\n): string[] {\n  const seen = new Set(groups.keys());\n  const ordered: string[] = [];\n  for (const known of groupOrder) {\n    if (seen.has(known)) {\n      ordered.push(known);\n      seen.delete(known);\n    }\n  }\n  // Unknown groups in insertion order (Map preserves it), misc last.\n  for (const key of groups.keys()) {\n    if (seen.has(key) && key !== MISC) {\n      ordered.push(key);\n      seen.delete(key);\n    }\n  }\n  if (seen.has(MISC)) ordered.push(MISC);\n  return ordered;\n}\n\nfunction resolveIcon(tool: AnyTool): ReactNode {\n  const rawIcon = tool.presentation?.icon;\n  if (rawIcon == null) return <UnknownIcon />;\n  if (typeof rawIcon === 'function') return rawIcon(undefined);\n  return rawIcon;\n}\n\n/** Props for {@link ToolPalette}. */\nexport interface ToolPaletteProps {\n  tools: ToolsApi;\n  orientation?: 'vertical' | 'horizontal';\n  className?: string;\n  /** Derive the keyboard shortcut for a tool button from the action registry.\n   *  Called with the tool's id; return `undefined` to suppress a chip. When\n   *  omitted, falls back to `tool.keybinding` (legacy path). */\n  lookupShortcut?: (toolId: string) => ShortcutInput | undefined;\n  /**\n   * Optional mode registry. When provided, tools whose `capabilities` do not\n   * match the current mode are rendered greyed-out, aria-disabled, and their\n   * onClick is suppressed. When omitted, all tools are treated as eligible\n   * (preserves existing behaviour in consumers that haven't wired a registry).\n   */\n  modeRegistry?: ModeRegistry;\n  /**\n   * Presentation-group display order. Groups not listed keep their registry\n   * insertion order after the listed ones; `misc` always renders last.\n   * Defaults to `['select', 'shape', 'draw', 'type', 'view']`.\n   */\n  groupOrder?: readonly string[];\n}\n\n/**\n * Toolbar of the registered tools, split into separator-divided groups by\n * each tool's presentation group and navigable by arrow keys. Clicking a\n * button makes that tool active.\n *\n * Given a `modeRegistry`, tools whose capabilities the current mode does not\n * allow render greyed out and inert rather than disappearing.\n */\nexport function ToolPalette(props: ToolPaletteProps) {\n  const {\n    tools, orientation = 'vertical', className, lookupShortcut, modeRegistry,\n    groupOrder = DEFAULT_GROUP_ORDER,\n  } = props;\n  const list = Object.values(tools.registry);\n  const groups = partitionByGroup(list);\n  const groupKeys = orderedGroupKeys(groups, groupOrder);\n  const cls = [s.palette, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n\n  // Flat, in DOM order — the roving-tabindex hook indexes by this order.\n  const ordered = groupKeys.flatMap((k) => groups.get(k)!);\n  const eligibility = ordered.map(\n    (tool) => (modeRegistry ? eligibleContribution(modeRegistry, tool) : true),\n  );\n  const activeIndex = ordered.findIndex((t) => t.id === tools.active);\n  const roving = useRovingTabIndex({\n    items: eligibility.map((enabled) => ({ disabled: !enabled })),\n    itemClassName: s.paletteBtn,\n    // An ineligible active tool can't hold the tab stop; fall back to the\n    // hook's first-enabled default.\n    ...(activeIndex >= 0 && eligibility[activeIndex] ? { tabStopIndex: activeIndex } : {}),\n  });\n  let index = -1;\n\n  return (\n    <div\n      ref={roving.rootRef}\n      className={cls}\n      role=\"toolbar\"\n      aria-label=\"Tools\"\n    >\n      {groupKeys.map((key, i) => (\n        <Fragment key={key}>\n          {i > 0 && (\n            <div\n              className={s.separator}\n              role=\"separator\"\n              aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n            />\n          )}\n          <ToolGroup orientation={orientation} groupKey={key}>\n            {groups.get(key)!.map((tool) => {\n              const i = ++index;\n              const label = tool.presentation?.label ?? tool.id;\n              const shortcut = tool.presentation?.shortcut\n                ?? formatShortcut(lookupShortcut ? lookupShortcut(tool.id) : tool.keybinding);\n              const enabled = eligibility[i];\n              const modeName = modeRegistry ? modeRegistry.current().id : undefined;\n              const resolvedTitle = !enabled && modeName\n                ? `${label}${shortcut ? ` (${shortcut})` : ''} — disabled in ${modeName} mode`\n                : undefined;\n              return (\n                <ToolButton\n                  key={tool.id}\n                  icon={resolveIcon(tool)}\n                  label={label}\n                  shortcut={shortcut}\n                  active={tools.active === tool.id}\n                  tabbable={roving.tabIndexFor(i) === 0}\n                  ariaDisabled={!enabled}\n                  className={[s.paletteBtn, !enabled && s.ineligibleBtn].filter(Boolean).join(' ')}\n                  title={resolvedTitle}\n                  onClick={enabled ? () => tools.setActive(tool.id) : () => {}}\n                  onKeyDown={roving.onKeyDown(i)}\n                />\n              );\n            })}\n          </ToolGroup>\n        </Fragment>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{Tooltip-Di7vxbFa.js → Tooltip-Bq8Hvj4r.js}

@@ -37,4 +37,4 @@ function s(i) {
 //#endregion
 export { o as n, s as t };
 
-//# sourceMappingURL=Tooltip-Di7vxbFa.js.map
+//# sourceMappingURL=Tooltip-Bq8Hvj4r.js.map

package/dist/chunks/{Tooltip-Di7vxbFa.js.map → Tooltip-Bq8Hvj4r.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Tooltip-Di7vxbFa.js","names":[],"sources":["../../src/components/Tooltip/Tooltip.module.css","../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":[".tooltip {\n  /* Above Dialog overlay (1000) and ToastRegion (1100) — RAC sets no z-index. */\n  z-index: 1200;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n  line-height: 1.3;\n  padding: 4px 8px;\n  max-width: 260px;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.tooltip[data-entering],\n.tooltip[data-exiting] {\n  opacity: 0;\n}\n\n.arrow svg {\n  display: block;\n  fill: var(--wzl-surface);\n  stroke: var(--wzl-border);\n  stroke-width: 1;\n}\n\n.arrow[data-placement='bottom'] svg {\n  transform: rotate(180deg);\n}\n\n.arrow[data-placement='left'] svg {\n  transform: rotate(-90deg);\n}\n\n.arrow[data-placement='right'] svg {\n  transform: rotate(90deg);\n}\n","import type { ReactNode } from 'react';\nimport {\n  TooltipTrigger as RACTooltipTrigger,\n  Tooltip as RACTooltip,\n  OverlayArrow,\n  type TooltipProps as RACTooltipProps,\n  type TooltipTriggerComponentProps,\n} from 'react-aria-components';\nimport s from './Tooltip.module.css';\n\n/**\n * Props for {@link TooltipTrigger} — React Aria's `TooltipTrigger` props\n * unchanged.\n */\nexport type TooltipTriggerProps = TooltipTriggerComponentProps;\n\n/**\n * TooltipTrigger with kit defaults: ~600 ms open delay, instant close.\n * Wrap a focusable trigger plus a `<Tooltip>`. Non-RAC triggers (plain\n * `<button>` etc.) must be wrapped in `<Focusable>` from\n * react-aria-components so hover/focus props reach the DOM node.\n *\n * Caveat: while a tooltip is open, react-aria captures the first Escape\n * keydown (document-level, capture phase) to dismiss it — app-level\n * Escape handlers (deselect, cancel gesture) see only the second press.\n */\nexport function TooltipTrigger(props: TooltipTriggerProps) {\n  const { delay = 600, closeDelay = 0, ...rest } = props;\n  return <RACTooltipTrigger delay={delay} closeDelay={closeDelay} {...rest} />;\n}\n\n/** Props for {@link Tooltip}, on top of React Aria's `Tooltip` props. */\nexport type TooltipProps = Omit<RACTooltipProps, 'children' | 'className'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Tooltip bubble with an arrow pointing at the trigger. Non-interactive\n * content only (ARIA tooltip semantics). Use inside `<TooltipTrigger>`.\n */\nexport function Tooltip(props: TooltipProps) {\n  const { children, className, placement = 'top', offset = 8, ...rest } = props;\n  return (\n    <RACTooltip\n      {...rest}\n      placement={placement}\n      offset={offset}\n      className={[s.tooltip, className].filter(Boolean).join(' ')}\n      data-weasel-overlay=\"\"\n    >\n      <OverlayArrow className={s.arrow}>\n        <svg width={8} height={8} viewBox=\"0 0 8 8\" aria-hidden=\"true\">\n          <path d=\"M0 0 L4 4 L8 0\" />\n        </svg>\n      </OverlayArrow>\n      {children}\n    </RACTooltip>\n  );\n}\n"],"mappings":";;;;;;;;AC0BA,SAAgB,EAAe,GAA4B;CACzD,IAAM,EAAE,WAAQ,KAAK,gBAAa,GAAG,GAAG,MAAS;AACjD,QAAO,kBAAC,GAAD;EAA0B;EAAmB;EAAY,GAAI;EAAQ,CAAA;;AAa9E,SAAgB,EAAQ,GAAqB;CAC3C,IAAM,EAAE,aAAU,cAAW,eAAY,OAAO,YAAS,GAAG,GAAG,MAAS;AACxE,QACE,kBAAC,GAAD;EACE,GAAI;EACO;EACH;EACR,WAAW,CAAC,EAAE,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC3D,uBAAoB;YALtB,CAOE,kBAAC,GAAD;GAAc,WAAW,EAAE;aACzB,kBAAC,OAAD;IAAK,OAAO;IAAG,QAAQ;IAAG,SAAQ;IAAU,eAAY;cACtD,kBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;IACvB,CAAA;GACO,CAAA,EACd,EACU"}
+{"version":3,"file":"Tooltip-Bq8Hvj4r.js","names":[],"sources":["../../src/components/Tooltip/Tooltip.module.css","../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":[".tooltip {\n  /* Above Dialog overlay (1000) and ToastRegion (1100) — RAC sets no z-index. */\n  z-index: 1200;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n  line-height: 1.3;\n  padding: 4px 8px;\n  max-width: 260px;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.tooltip[data-entering],\n.tooltip[data-exiting] {\n  opacity: 0;\n}\n\n.arrow svg {\n  display: block;\n  fill: var(--wzl-surface);\n  stroke: var(--wzl-border);\n  stroke-width: 1;\n}\n\n.arrow[data-placement='bottom'] svg {\n  transform: rotate(180deg);\n}\n\n.arrow[data-placement='left'] svg {\n  transform: rotate(-90deg);\n}\n\n.arrow[data-placement='right'] svg {\n  transform: rotate(90deg);\n}\n","import type { ReactNode } from 'react';\nimport {\n  TooltipTrigger as RACTooltipTrigger,\n  Tooltip as RACTooltip,\n  OverlayArrow,\n  type TooltipProps as RACTooltipProps,\n  type TooltipTriggerComponentProps,\n} from 'react-aria-components';\nimport s from './Tooltip.module.css';\n\n/**\n * Props for {@link TooltipTrigger} — React Aria's `TooltipTrigger` props\n * unchanged.\n */\nexport type TooltipTriggerProps = TooltipTriggerComponentProps;\n\n/**\n * TooltipTrigger with kit defaults: ~600 ms open delay, instant close.\n * Wrap a focusable trigger plus a `<Tooltip>`. Non-RAC triggers (plain\n * `<button>` etc.) must be wrapped in `<Focusable>` from\n * react-aria-components so hover/focus props reach the DOM node.\n *\n * Caveat: while a tooltip is open, react-aria captures the first Escape\n * keydown (document-level, capture phase) to dismiss it — app-level\n * Escape handlers (deselect, cancel gesture) see only the second press.\n */\nexport function TooltipTrigger(props: TooltipTriggerProps) {\n  const { delay = 600, closeDelay = 0, ...rest } = props;\n  return <RACTooltipTrigger delay={delay} closeDelay={closeDelay} {...rest} />;\n}\n\n/** Props for {@link Tooltip}, on top of React Aria's `Tooltip` props. */\nexport type TooltipProps = Omit<RACTooltipProps, 'children' | 'className'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Tooltip bubble with an arrow pointing at the trigger. Non-interactive\n * content only (ARIA tooltip semantics). Use inside `<TooltipTrigger>`.\n */\nexport function Tooltip(props: TooltipProps) {\n  const { children, className, placement = 'top', offset = 8, ...rest } = props;\n  return (\n    <RACTooltip\n      {...rest}\n      placement={placement}\n      offset={offset}\n      className={[s.tooltip, className].filter(Boolean).join(' ')}\n      data-weasel-overlay=\"\"\n    >\n      <OverlayArrow className={s.arrow}>\n        <svg width={8} height={8} viewBox=\"0 0 8 8\" aria-hidden=\"true\">\n          <path d=\"M0 0 L4 4 L8 0\" />\n        </svg>\n      </OverlayArrow>\n      {children}\n    </RACTooltip>\n  );\n}\n"],"mappings":";;;;;;;;AC0BA,SAAgB,EAAe,GAA4B;CACzD,IAAM,EAAE,WAAQ,KAAK,gBAAa,GAAG,GAAG,MAAS;AACjD,QAAO,kBAAC,GAAD;EAA0B;EAAmB;EAAY,GAAI;EAAQ,CAAA;;AAa9E,SAAgB,EAAQ,GAAqB;CAC3C,IAAM,EAAE,aAAU,cAAW,eAAY,OAAO,YAAS,GAAG,GAAG,MAAS;AACxE,QACE,kBAAC,GAAD;EACE,GAAI;EACO;EACH;EACR,WAAW,CAAC,EAAE,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC3D,uBAAoB;YALtB,CAOE,kBAAC,GAAD;GAAc,WAAW,EAAE;aACzB,kBAAC,OAAD;IAAK,OAAO;IAAG,QAAQ;IAAG,SAAQ;IAAU,eAAY;cACtD,kBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;IACvB,CAAA;GACO,CAAA,EACd,EACU"}