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

package/dist/chunks/Properties-CFRJ8mYH.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Properties-CFRJ8mYH.js","names":[],"sources":["../../src/components/Properties/CurveField.module.css","../../src/components/Properties/CurveField.tsx","../../src/components/Properties/Properties.module.css","../../src/components/Properties/EffectCard.tsx","../../src/components/Properties/PropertyGroup.tsx","../../src/components/Properties/PropertyPanel.tsx"],"sourcesContent":[".field {\n  display: grid;\n  gap: 6px;\n  grid-column: 1 / -1;\n  box-sizing: border-box;\n}\n\n.field * {\n  box-sizing: border-box;\n}\n\n.plot {\n  position: relative;\n  width: 100%;\n}\n\n.marks {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.actions {\n  display: flex;\n  gap: 6px;\n  justify-self: start;\n}\n\n.action {\n  background: transparent;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  padding: 4px 10px;\n  font-size: var(--wzl-font-size-sm);\n  cursor: pointer;\n}\n\n.action:hover {\n  background: var(--wzl-surface-raised);\n}\n","import { useCallback, useMemo } from 'react';\nimport { dlog } from '../../dlog';\nimport { type ControlPoint, CurveEditor } from '../CurveEditor';\nimport s from './CurveField.module.css';\n\n/** An annotation drawn over a curve plot: a shaded band across a range of x,\n *  or a vertical line at one x. */\nexport type CurveMark =\n  | { kind: 'band'; x: [number, number]; color?: string }\n  | { kind: 'line'; x: number; color?: string };\n\n/** Props for `<CurveField>`. */\nexport interface CurveFieldProps {\n  /** Flat [x0, y0, x1, y1, …] — matches how curve-as-array configs\n   *  serialize in JSON snapshots. */\n  values: number[];\n  min: number;\n  max: number;\n  step: number;\n  /** Plot width in CSS px. Caller sizes (typically uses a ResizeObserver). */\n  width: number;\n  /** Plot height in CSS px. Default 110. */\n  height?: number;\n  /** Flat default curve. When provided, a Reset button restores it. */\n  defaults?: readonly number[];\n  onChange: (next: number[]) => void;\n  /** Optional vertical marks overlaid on the plot (e.g. landmarks). */\n  marks?: readonly CurveMark[];\n}\n\n/**\n * A function-domain (y = f(x), x ∈ [0,1]) curve editor with per-stop\n * numeric readouts and flip buttons. Wraps weasel-ui's\n * `CurveEditor`; consumers wanting the raw editor (2D paths,\n * custom anchors) should import that instead.\n */\nexport function CurveField({\n  values,\n  min,\n  max,\n  step,\n  width,\n  height = 110,\n  defaults,\n  onChange,\n  marks,\n}: CurveFieldProps) {\n  const points: ControlPoint[] = useMemo(() => {\n    const out: ControlPoint[] = [];\n    for (let i = 0; i + 1 < values.length; i += 2) out.push({ x: values[i], y: values[i + 1] });\n    return out;\n  }, [values]);\n\n  const handleChange = useCallback(\n    (next: ControlPoint[]) => {\n      const flat: number[] = new Array(next.length * 2);\n      for (let i = 0; i < next.length; i++) {\n        const ySnap = Math.round(next[i].y / step) * step;\n        const y = Math.max(min, Math.min(max, ySnap));\n        flat[i * 2] = next[i].x;\n        flat[i * 2 + 1] = y;\n      }\n      dlog('curve-field', 'handleChange', {\n        nLen: next.length,\n        flatLen: flat.length,\n        sample: flat.slice(0, 4),\n      });\n      onChange(flat);\n    },\n    [onChange, min, max, step],\n  );\n\n  const handleFlip = useCallback(() => {\n    const flipped: Array<{ x: number; y: number }> = [];\n    for (let i = 0; i + 1 < values.length; i += 2) {\n      flipped.push({ x: 1 - values[i], y: values[i + 1] });\n    }\n    flipped.sort((a, b) => a.x - b.x);\n    const out: number[] = [];\n    for (const p of flipped) out.push(p.x, p.y);\n    onChange(out);\n  }, [values, onChange]);\n\n  const handleFlipVertical = useCallback(() => {\n    const mid = (min + max) / 2;\n    const flipped: number[] = new Array(values.length);\n    for (let i = 0; i + 1 < values.length; i += 2) {\n      flipped[i] = values[i];\n      flipped[i + 1] = 2 * mid - values[i + 1];\n    }\n    onChange(flipped);\n  }, [values, min, max, onChange]);\n\n  return (\n    <div className={s.field}>\n      <div className={s.plot}>\n        <CurveEditor\n          value={points}\n          onInput={handleChange}\n          domain=\"1d\"\n          constrain=\"function\"\n          xRange={[0, 1]}\n          yRange={[min, max]}\n          width={width}\n          height={height}\n          endpoints=\"pinned-x\"\n          addPointMode=\"click-curve\"\n          minPoints={2}\n          grid={{}}\n          history={false}\n        />\n        {marks && marks.length > 0 && (\n          <svg\n            className={s.marks}\n            width={width}\n            height={height}\n            viewBox={`0 0 ${width} ${height}`}\n            aria-hidden=\"true\"\n          >\n            {marks.map((m) => {\n              const color = m.color ?? '#ffcc00';\n              if (m.kind === 'band') {\n                const x0 = Math.max(0, Math.min(1, m.x[0])) * width;\n                const x1 = Math.max(0, Math.min(1, m.x[1])) * width;\n                const left = Math.min(x0, x1);\n                const w = Math.abs(x1 - x0);\n                return (\n                  <g key={`band-${m.x[0]}-${m.x[1]}-${color}`}>\n                    <rect x={left} y={0} width={w} height={height} fill={color} fillOpacity={0.4} />\n                    <line\n                      x1={left}\n                      y1={0}\n                      x2={left}\n                      y2={height}\n                      stroke={color}\n                      strokeOpacity={0.85}\n                      strokeWidth={1}\n                    />\n                    <line\n                      x1={left + w}\n                      y1={0}\n                      x2={left + w}\n                      y2={height}\n                      stroke={color}\n                      strokeOpacity={0.85}\n                      strokeWidth={1}\n                    />\n                  </g>\n                );\n              }\n              const x = Math.max(0, Math.min(1, m.x)) * width;\n              return (\n                <line\n                  key={`mark-${m.x}-${color}`}\n                  x1={x}\n                  y1={0}\n                  x2={x}\n                  y2={height}\n                  stroke={color}\n                  strokeWidth={1}\n                />\n              );\n            })}\n          </svg>\n        )}\n      </div>\n      <div className={s.actions}>\n        <button type=\"button\" className={s.action} onClick={handleFlip}>\n          Flip horizontally\n        </button>\n        <button type=\"button\" className={s.action} onClick={handleFlipVertical}>\n          Flip vertically\n        </button>\n        {defaults && (\n          <button\n            type=\"button\"\n            className={s.action}\n            onClick={() => onChange([...defaults])}\n          >\n            Reset\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n","/* One stylesheet for the whole property-panel family. PropertyList, PropertyRow,\n   PropertyGroup and Subpanel/EffectCard are styled together because the grid\n   rules genuinely cross components — `.listPairs > .subpanel` and\n   `.groupBody > :not(.rowColor)` name two components in one selector, and a CSS\n   Module can only compose local names within its own file. */\n\n/* Authored against a border-box reset (labkit's `.lk-root *`). weasel-ui has no\n   global reset, so the family restates it over its own subtrees. */\n.panel,\n.list,\n.row,\n.group,\n.subpanel,\n.card,\n.cardList,\n.panel *,\n.list *,\n.row *,\n.group *,\n.subpanel *,\n.card *,\n.cardList * {\n  box-sizing: border-box;\n}\n\n.panel {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-lg);\n  padding: 14px 16px;\n  backdrop-filter: blur(var(--wzl-glass-blur));\n  -webkit-backdrop-filter: blur(var(--wzl-glass-blur));\n}\n\n.panelTitle {\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-lg);\n  line-height: var(--wzl-leading-snug);\n  letter-spacing: 0.01em;\n  color: var(--wzl-fg);\n  margin: 0 0 12px;\n}\n\n.list {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  column-gap: 10px;\n  row-gap: 4px;\n  align-items: stretch;\n}\n\n/* Default packing: only color rows pair, everything else spans full width.\n   Scoped to NOT apply in pairs mode (otherwise this 0,2,0 selector beats the\n   pairs override below, which is only 0,1,0). */\n.list:not(.listPairs) > :not(.rowColor) {\n  grid-column: 1 / -1;\n}\n\n/* `pack=\"pairs\"` flips that: every row auto-places into the 2-col grid two\n   per row, and explicit full-width children opt in via the span helper class. */\n.listPairs > * {\n  min-width: 0;\n}\n\n.listPairs > .span,\n.listPairs > .subpanel,\n.listPairs > h3 {\n  grid-column: 1 / -1;\n}\n\n/* ── Row ────────────────────────────────────────────────────────\n   Default shape: label on top (with optional right-aligned readout),\n   control below. */\n\n.row {\n  display: flex;\n  flex-direction: column;\n  /* No gap by default — controls sit flush under their label, matching\n     speech-balloons `.field { gap: 0 }`. Slider rows pull tighter still\n     via a negative margin on the label below. */\n  gap: 0;\n  min-width: 0;\n}\n\n/* Slider rows: pull the track up under the label so the row reads as one\n   tight block rather than a label + a separate horizontal strip. Also\n   bottom-align the track within the row so paired rows in a 2-col grid\n   keep their tracks lined up even when one label wraps to two lines. */\n.row:has(> input[type='range']) {\n  justify-content: flex-end;\n}\n\n.row:has(> input[type='range']) > .rowLabel {\n  /* Baseline-align (not center) so the readout input doesn't inflate the\n     label-group height past the text baseline. */\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 4px;\n  margin-bottom: -4px;\n}\n\n.row > input[type='range'] {\n  margin-top: auto;\n}\n\n.rowLabel {\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading-snug);\n  color: var(--wzl-fg-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.readout {\n  font-style: normal;\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-accent);\n  margin-left: auto;\n}\n\n/* ⓘ help affordance beside a row label. Every dimension is stated because a\n   host app's bare-element defaults can be authored at zero specificity —\n   labkit's `:where(.lk-root) :where(button)` sets `height: var(--wzl-control-h)`\n   and horizontal padding, which would otherwise stretch a one-glyph button into\n   a full-height control. */\n.help {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.15em;\n  height: 1.15em;\n  padding: 0;\n  border: 0;\n  background: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n  line-height: 1;\n  letter-spacing: normal;\n  cursor: help;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.help:hover {\n  color: var(--wzl-fg);\n  border-color: transparent;\n}\n\n.help:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n  color: var(--wzl-fg);\n}\n\n/* Single always-rendered <input> styled to read as a text label until focused. */\n.readoutInput {\n  font: inherit;\n  font-weight: var(--wzl-font-weight-medium);\n  /* Force leading-tight — the label parent inherits 1.2, which would make the\n     input box ~3px taller than the speech-balloons reference. */\n  line-height: var(--wzl-leading-tight);\n  color: var(--wzl-accent);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  padding: 1px 0;\n  margin: 0;\n  width: calc(5em - 24px);\n  text-align: right;\n  cursor: text;\n  outline: none;\n  transition: background 80ms ease, border-color 80ms ease;\n  -moz-appearance: textfield;\n}\n\n.readoutInput:hover {\n  background: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.readoutInput:focus {\n  background: var(--wzl-surface-sunken);\n  border-color: var(--wzl-accent);\n}\n\n.readoutInput::-webkit-inner-spin-button,\n.readoutInput::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Inline-block (not flex) so the browser's native vertical-align for\n   <sub>/<sup> still works inside — flex collapses baseline semantics\n   and sinks superscripts onto the baseline. */\n.readoutGroup {\n  display: inline-block;\n  white-space: nowrap;\n}\n\n/* Word-style units (e.g. \"px\") read as a small dim suffix next to the digits. */\n.readoutUnit {\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-2xs);\n  line-height: var(--wzl-leading-tight);\n  pointer-events: none;\n}\n\n/* Symbol units (e.g. `<sup>°</sup>`) lean on the browser's native super\n   positioning. Just dim them to match — do NOT set line-height: 0, that\n   would re-collapse the glyph onto the baseline. */\n.readoutGroup sup {\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-2xs);\n  pointer-events: none;\n}\n\n.row input[type='range'] {\n  /* Hairline track + small translucent thumb, tinted with the active --wzl-accent. */\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  width: 100%;\n  height: 12px;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n.row input[type='range']::-webkit-slider-runnable-track {\n  height: 4px;\n  border-radius: var(--wzl-radius-sm);\n  background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);\n}\n\n.row input[type='range']::-moz-range-track {\n  height: 4px;\n  border-radius: var(--wzl-radius-sm);\n  background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);\n}\n\n.row input[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) 70%, transparent);\n  border: none;\n  margin-top: -2px;\n}\n\n.row input[type='range']::-moz-range-thumb {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) 70%, transparent);\n  border: none;\n}\n\n/* ── Inline layout: label sits to the left of the control. ────── */\n.rowInline {\n  flex-direction: row;\n  align-items: center;\n  /* Label on the left edge, field on the right: fields of different widths\n     still line up as one rail down the column. */\n  justify-content: space-between;\n  gap: 6px;\n}\n\n.rowInline .rowLabel {\n  /* The label never gives: shrinking it breaks a name like `silhouette_width`\n     mid-word, since it carries no break opportunity of its own. The field is\n     what yields as the column narrows. */\n  flex: 0 0 auto;\n}\n\n.rowInline > input,\n.rowInline > select,\n.rowInline > .toggle {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n/* Fields size to their content, not to the row they happen to sit in: a number\n   is a handful of digits and a short string is a word. Stated as a width and\n   not as a `min(100%, …)`, because an auto-width sidebar sizes to what its\n   fields ask for and a percentage asks for an input's 20-character default. */\n.row input[type='number']:not(.readoutInput) {\n  width: var(--wzl-prop-number-width, 9ch);\n  max-width: 100%;\n}\n\n.row input[type='text']:not(.readoutInput) {\n  width: var(--wzl-prop-text-width, 16ch);\n  max-width: 100%;\n}\n\n/* An inline row stays on one line: the field gives up width to the label as the\n   column narrows, down to a floor that still shows a value. */\n.rowInline > input:not(.readoutInput),\n.rowInline > select {\n  flex: 0 1 auto;\n  min-width: 4ch;\n}\n\n.rowInline input[type='range'] {\n  width: auto;\n}\n\n.row input[type='text']:not(.readoutInput),\n.row input[type='number'] {\n  background: var(--wzl-surface-sunken);\n  color: var(--wzl-fg);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  /* Height is stated rather than padded to, because the display face's line box\n     is half again its font size — padding a field to size makes it 27px tall\n     around 13px of text and no amount of trimming the padding fixes that. */\n  height: var(--wzl-prop-field-height, 20px);\n  padding: 0 6px;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size);\n  line-height: var(--wzl-leading-tight);\n}\n\n.row input[type='text']:not(.readoutInput):focus,\n.row input[type='number']:focus {\n  outline: 1px solid var(--wzl-accent);\n}\n\n/* Selects in property rows render borderless — chevron only, transparent\n   background, no chrome. Keep the native arrow via appearance: auto so users\n   still see something clickable. */\n.row select {\n  background: transparent;\n  color: var(--wzl-fg);\n  border: 0;\n  border-radius: 0;\n  height: var(--wzl-prop-field-height, 20px);\n  padding: 0;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size);\n  line-height: var(--wzl-leading-tight);\n  cursor: pointer;\n}\n\n.row select:focus {\n  outline: 1px solid var(--wzl-accent);\n  outline-offset: 2px;\n}\n\n/* ── Color variant: label and swatch side-by-side, two per row in the grid.\n   Switches to a 2-row grid when an alpha slider is rendered beneath. */\n.rowColor {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto;\n  align-content: end;\n  column-gap: 8px;\n  row-gap: 0;\n  min-width: 0;\n}\n\n.rowColor .rowLabel {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: center;\n  flex: initial;\n  min-width: 0;\n}\n\n/* 36×24, hairline border, no padding. Padding: 0 is important — the native\n   <input type=\"color\"> in some browsers (esp. Chrome) inflates beyond its\n   declared box when given padding, which expands the grid row and pushes\n   the paired slider track out of bottom alignment. */\n.rowColor input[type='color'] {\n  grid-column: 2;\n  grid-row: 1;\n  align-self: center;\n  box-sizing: border-box;\n  width: 36px;\n  height: 18px;\n  background: transparent;\n  border: 0;\n  border-radius: var(--wzl-radius-sm);\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n/* Alpha slider: full-width second row beneath the color swatch. */\n.rowColor input[type='range'].alpha {\n  grid-column: 1 / -1;\n  grid-row: 2;\n  height: 12px;\n  width: 100%;\n  margin: 0;\n}\n\n.rowColor input[type='range'].alpha::-webkit-slider-runnable-track {\n  background: color-mix(in srgb, var(--wzl-accent) 10%, transparent);\n}\n\n.rowColor input[type='range'].alpha::-moz-range-track {\n  background: color-mix(in srgb, var(--wzl-accent) 10%, transparent);\n}\n\n/* Disabled state: dim the track, hide the thumb, swap the cursor — used when\n   the consumer of the color drops alpha so the affordance reads as inert. */\n.rowColor.alphaDisabled input[type='range'].alpha {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.rowColor.alphaDisabled input[type='range'].alpha::-webkit-slider-runnable-track {\n  background: rgba(255, 255, 255, 0.05);\n}\n\n.rowColor.alphaDisabled input[type='range'].alpha::-moz-range-track {\n  background: rgba(255, 255, 255, 0.05);\n}\n\n.rowColor.alphaDisabled input[type='range'].alpha::-webkit-slider-thumb {\n  background: transparent;\n}\n\n.rowColor.alphaDisabled input[type='range'].alpha::-moz-range-thumb {\n  background: transparent;\n}\n\n/* ── Checkbox variant: control-first inline layout, no uppercase label. */\n.rowCheckbox {\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n\n.rowCheckbox .rowLabel {\n  text-transform: none;\n  letter-spacing: normal;\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n  /* Place the label after the checkbox visually. */\n  order: 1;\n}\n\n.rowCheckbox input[type='checkbox'] {\n  accent-color: var(--wzl-accent);\n  width: 14px;\n  height: 14px;\n  cursor: pointer;\n}\n\n/* ── Segmented toggle group ───────────────────────────────────── */\n.toggle {\n  display: flex;\n  width: 100%;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  overflow: hidden;\n}\n\n.toggleButton {\n  flex: 1;\n  height: 26px;\n  padding: 0 8px;\n  background: rgba(0, 0, 0, 0.25);\n  color: var(--wzl-fg-muted);\n  border: 0;\n  border-radius: 0;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading-tight);\n  cursor: pointer;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\n\n.toggleButton + .toggleButton {\n  border-left: 1px solid var(--wzl-border);\n}\n\n.toggleButton:hover {\n  color: var(--wzl-fg);\n  border-color: var(--wzl-border);\n}\n\n.toggleButtonSelected {\n  background: var(--wzl-accent);\n  color: var(--wzl-fg-on-accent);\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.toggleButtonSelected:hover {\n  color: var(--wzl-fg-on-accent);\n}\n\n/* ── PropertyGroup ──────────────────────────────────────────────────\n   Bordered, sunken section inside a list. */\n.group {\n  grid-column: 1 / -1;\n  background: var(--wzl-surface-sunken);\n  border-radius: var(--wzl-radius-md);\n  padding: 6px 10px 8px;\n}\n\n.groupTitle {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: 8px;\n  margin: 0 0 4px;\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-sm);\n  letter-spacing: var(--wzl-tracking-wider);\n  text-transform: uppercase;\n  color: var(--wzl-fg-subtle);\n}\n\n.groupTitle hr {\n  border: 0;\n  border-top: 1px solid var(--wzl-border);\n  margin: 0;\n}\n\n.groupBody {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  column-gap: 10px;\n  row-gap: 4px;\n  /* Stretch so paired rows match in height — slider rows then bottom-align\n     their tracks (via `margin-top: auto`) and stay lined up even when one\n     sibling's label wraps to two lines. */\n  align-items: stretch;\n}\n\n.group:not(.groupPairs) .groupBody > :not(.rowColor) {\n  grid-column: 1 / -1;\n}\n\n.groupPairs .groupBody > * {\n  grid-column: auto;\n}\n\n.groupPairs .groupBody > h3,\n.groupPairs .groupBody > .span {\n  grid-column: 1 / -1;\n}\n\n/* ── Subpanel ────────────────────────────────────────────────────────\n   Headered group of controls inside a list. The header is a typographic\n   label flanked by a horizontal rule — no card chrome, just the divider. */\n.subpanel {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  column-gap: 10px;\n  row-gap: 3px;\n  align-items: stretch;\n  background: transparent;\n  border: 0;\n  padding: 0;\n  margin: 0;\n}\n\n.subpanel > * {\n  min-width: 0;\n}\n\n.subpanel > .subpanelTitle,\n.subpanel > .span {\n  grid-column: 1 / -1;\n}\n\n.subpanelTitle {\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading-tight);\n  color: var(--wzl-fg);\n  text-transform: uppercase;\n  letter-spacing: var(--wzl-tracking-wider);\n  margin: 0;\n  padding: 6px 0 4px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.subpanelTitle > span {\n  flex: 0 0 auto;\n}\n\n.subpanelTitle > hr {\n  flex: 1 1 auto;\n  border: 0;\n  border-top: 1px solid rgba(255, 255, 255, 0.12);\n  margin: 0;\n}\n\n/* ── EffectCard ──────────────────────────────────────────────────────\n   Draggable, collapsible card. Optional --wzl-effect-card-accent re-binds the\n   local --wzl-accent so every descendant control auto-tints. */\n.card {\n  background: rgba(0, 0, 0, 0.25);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  transition: background 120ms ease, border-color 120ms ease;\n}\n\n.cardDragging {\n  opacity: 0.45;\n}\n\n.cardExpanded {\n  background: rgba(0, 0, 0, 0.3);\n}\n\n.cardAccented {\n  /* Re-bind --wzl-accent inside the card so every descendant style that paints\n     with var(--wzl-accent) (readouts, slider thumb, etc.) picks up the\n     per-card tint automatically. */\n  --wzl-accent: var(--wzl-effect-card-accent);\n  background: color-mix(in srgb, var(--wzl-effect-card-accent) 4%, rgba(0, 0, 0, 0.28));\n  border-color: color-mix(in srgb, var(--wzl-effect-card-accent) 28%, var(--wzl-border));\n  border-left-width: 4px;\n  border-left-color: var(--wzl-effect-card-accent);\n}\n\n.cardAccented.cardExpanded {\n  background: color-mix(in srgb, var(--wzl-effect-card-accent) 5%, rgba(0, 0, 0, 0.35));\n}\n\n.cardAccented .cardHead {\n  background: color-mix(in srgb, var(--wzl-effect-card-accent) 38%, rgba(0, 0, 0, 0.4));\n}\n\n.cardAccented .cardHead:hover {\n  background: color-mix(in srgb, var(--wzl-effect-card-accent) 48%, rgba(0, 0, 0, 0.35));\n}\n\n.cardHead {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  padding: 2px 10px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.cardHead:hover {\n  background: rgba(255, 255, 255, 0.03);\n}\n\n.cardHandle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--wzl-fg-muted);\n  cursor: grab;\n  padding: 0 2px;\n}\n\n.cardHandle:active {\n  cursor: grabbing;\n}\n\n.cardIndexBadge {\n  /* Rendered as a <button> (keyboard-operable drag/toggle handle); strip the\n     native button chrome so it matches the surrounding badge styling. */\n  appearance: none;\n  border: 0;\n  background: none;\n  display: inline-flex;\n  align-items: baseline;\n  justify-content: center;\n  min-width: 14px;\n  padding: 0 2px;\n  color: var(--wzl-effect-card-accent, var(--wzl-fg-muted));\n  font-size: var(--wzl-font-size);\n  font-weight: var(--wzl-font-weight-bold);\n  font-family: var(--wzl-font-mono);\n  line-height: 1;\n}\n\n.cardTitle {\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size);\n  line-height: var(--wzl-leading-tight);\n  color: var(--wzl-fg);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.cardPrimary {\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading-tight);\n  color: var(--wzl-fg);\n  background: rgba(0, 0, 0, 0.3);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  padding: 2px 6px;\n  margin-left: auto;\n}\n\n/* Push the remove button to the right edge — whether it follows a primary\n   chip or sits alone after the title. */\n.cardHead .cardRemove,\n.cardHead .cardPrimary + .cardRemove {\n  margin-left: auto;\n}\n\n.cardHead .cardPrimary ~ .cardRemove {\n  margin-left: 4px;\n}\n\n.cardRemove {\n  background: transparent;\n  color: var(--wzl-fg-muted);\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  width: 22px;\n  height: 22px;\n  font-size: var(--wzl-font-size);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.cardRemove:hover {\n  color: var(--wzl-danger-fg, var(--wzl-danger));\n  border-color: color-mix(in srgb, var(--wzl-danger) 40%, transparent);\n  background: color-mix(in srgb, var(--wzl-danger) 8%, transparent);\n}\n\n.cardBody {\n  padding: 4px 12px 12px;\n  border-top: 1px solid var(--wzl-border);\n}\n\n/* ── EffectCardList ────────────────────────────────────────────────── */\n.cardList {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.cardListWrap {\n  position: relative;\n}\n\n.cardDropHint {\n  height: 0;\n  border-top: 2px solid var(--wzl-accent);\n  border-radius: var(--wzl-radius-sm);\n  margin: 2px 0;\n  box-shadow: 0 0 6px color-mix(in srgb, var(--wzl-accent) 60%, transparent);\n}\n\n.cardListEmpty {\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading);\n  color: var(--wzl-fg-muted);\n  text-align: center;\n  padding: 16px 12px;\n  border: 1px dashed var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n","import { type CSSProperties, type ReactNode, useState } from 'react';\nimport s from './Properties.module.css';\n\n// ── Subpanel ─────────────────────────────────────────────────────────\n// Headered group of controls inside a wider panel/list. The header is a\n// label flanked by a horizontal rule — no background, padding, or border;\n// purely a typographic divider. Ported from speech-balloons styles.css:277-313.\n\n/** Props for `<Subpanel>`. */\nexport interface SubpanelProps {\n  title: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n/** A typographic divider inside a property list: a small title flanked by a\n *  rule. Purely a heading — use `<PropertyGroup>` for a bordered section. */\nexport function Subpanel({ title, children, className }: SubpanelProps) {\n  const cls = className ? `${s.subpanel} ${className}` : s.subpanel;\n  return (\n    <div className={cls}>\n      <h4 className={s.subpanelTitle}>\n        <span>{title}</span>\n        <hr />\n      </h4>\n      {children}\n    </div>\n  );\n}\n\n// ── EffectCard ───────────────────────────────────────────────────────\n// Draggable, collapsible card for stacked effect editors. Optional\n// --wzl-effect-card-accent per-instance recolors the title bar, border-left, and\n// (via re-binding --wzl-accent inside the card) every descendant control that\n// reads from the accent token.\n\n/** Props for `<EffectCard>`. */\nexport interface EffectCardProps {\n  /** Card title rendered in the title bar (e.g. effect kind label or a select). */\n  title: ReactNode;\n  /** Optional badge/chip displayed before the remove button (e.g. primary value summary). */\n  primary?: ReactNode;\n  /** Optional accent color in any CSS color form. Sets --wzl-effect-card-accent on the card. */\n  accent?: string;\n  /** Optional ordinal badge that doubles as the drag handle (used by tail cards in SB). */\n  index?: number;\n  expanded?: boolean;\n  onToggleExpanded?: () => void;\n  onRemove?: () => void;\n  /**\n   * Drag-handle wiring. When provided, an inline handle (⋮⋮ icon or `index`)\n   * activates HTML5 drag on press. Consumer owns the drag/drop coordination —\n   * see EffectCardList for the batteries-included wrapper.\n   */\n  draggable?: boolean;\n  onPressHandle?: () => void;\n  onReleaseHandle?: () => void;\n  onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;\n  dragging?: boolean;\n  children?: ReactNode;\n  className?: string;\n}\n\n/** An accented, collapsible card for one item in a list of like things —\n *  effects, layers, tails. The accent color rebinds the theme accent token\n *  within the card, so its controls pick it up too. */\nexport function EffectCard({\n  title,\n  primary,\n  accent,\n  index,\n  expanded = true,\n  onToggleExpanded,\n  onRemove,\n  draggable,\n  onPressHandle,\n  onReleaseHandle,\n  onDragStart,\n  onDragEnd,\n  onDragOver,\n  onDragLeave,\n  onDrop,\n  dragging,\n  children,\n  className,\n}: EffectCardProps) {\n  const stateClass = `${expanded ? ` ${s.cardExpanded}` : ''}${dragging ? ` ${s.cardDragging}` : ''}${accent ? ` ${s.cardAccented}` : ''}`;\n  const cls = `${s.card}${stateClass}${className ? ` ${className}` : ''}`;\n  // Per-instance dynamic color → CSS custom property requires inline style.\n  // The card's CSS re-binds --wzl-accent to it so descendants tint.\n  const style = accent ? ({ '--wzl-effect-card-accent': accent } as CSSProperties) : undefined;\n\n  // When a toggle handler is supplied the header acts as a disclosure button:\n  // role + tab stop + Enter/Space. Bundled together so the interactive props are\n  // applied as a set (no half-interactive element when onToggleExpanded is absent).\n  const headProps = onToggleExpanded\n    ? {\n        role: 'button' as const,\n        tabIndex: 0,\n        onClick: onToggleExpanded,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onToggleExpanded();\n          }\n        },\n      }\n    : {};\n\n  return (\n    // biome-ignore lint/a11y/noStaticElementInteractions: native HTML5 drag-and-drop container — drag events are not click/keyboard interactions and have no semantic element; the in-card handle and header carry the a11y affordances.\n    <div\n      className={cls}\n      style={style}\n      draggable={draggable}\n      onDragStart={onDragStart}\n      onDragEnd={onDragEnd}\n      onDragOver={onDragOver}\n      onDragLeave={onDragLeave}\n      onDrop={onDrop}\n    >\n      <div className={s.cardHead} {...headProps}>\n        {index != null ? (\n          <button\n            type=\"button\"\n            className={`${s.cardIndexBadge} ${s.cardHandle}`}\n            title=\"Drag to reorder · click to toggle\"\n            aria-label={`Item ${index + 1} — drag to reorder, click to toggle`}\n            onMouseDown={onPressHandle}\n            onMouseUp={onReleaseHandle}\n            onClick={(e) => {\n              e.stopPropagation();\n              onToggleExpanded?.();\n            }}\n          >\n            {index + 1}\n          </button>\n        ) : (\n          <span\n            className={s.cardHandle}\n            aria-hidden=\"true\"\n            title=\"Drag to reorder\"\n            onMouseDown={onPressHandle}\n            onMouseUp={onReleaseHandle}\n          >\n            <DragHandleIcon />\n          </span>\n        )}\n        <span className={s.cardTitle}>{title}</span>\n        {primary != null && <span className={s.cardPrimary}>{primary}</span>}\n        {onRemove && (\n          <button\n            type=\"button\"\n            className={s.cardRemove}\n            onClick={(e) => {\n              e.stopPropagation();\n              onRemove();\n            }}\n            title=\"Remove\"\n            aria-label=\"Remove\"\n          >\n            ✕\n          </button>\n        )}\n      </div>\n      {expanded && <div className={s.cardBody}>{children}</div>}\n    </div>\n  );\n}\n\nfunction DragHandleIcon() {\n  return (\n    <svg width=\"10\" height=\"14\" viewBox=\"0 0 10 14\" aria-hidden=\"true\">\n      <circle cx=\"3\" cy=\"3\" r=\"1.3\" fill=\"currentColor\" />\n      <circle cx=\"7\" cy=\"3\" r=\"1.3\" fill=\"currentColor\" />\n      <circle cx=\"3\" cy=\"7\" r=\"1.3\" fill=\"currentColor\" />\n      <circle cx=\"7\" cy=\"7\" r=\"1.3\" fill=\"currentColor\" />\n      <circle cx=\"3\" cy=\"11\" r=\"1.3\" fill=\"currentColor\" />\n      <circle cx=\"7\" cy=\"11\" r=\"1.3\" fill=\"currentColor\" />\n    </svg>\n  );\n}\n\n// ── EffectCardList ───────────────────────────────────────────────────\n// Batteries-included list wrapper that coordinates HTML5 drag-and-drop across\n// a list of EffectCards. Consumer supplies items + a renderItem callback;\n// onReorder fires with (sourceId, targetId, position) on drop. Mirrors the\n// LayerStack pattern from speech-balloons Lab.tsx:630-707.\n\n/** The minimum an item must carry to appear in an `<EffectCardList>`. */\nexport interface EffectCardListItem {\n  id: string | number;\n}\n\n/** Props for `<EffectCardList>`. */\nexport interface EffectCardListProps<T extends EffectCardListItem> {\n  items: ReadonlyArray<T>;\n  renderItem: (\n    item: T,\n    helpers: {\n      isExpanded: boolean;\n      isDragging: boolean;\n      toggleExpanded: () => void;\n      cardProps: Pick<\n        EffectCardProps,\n        | 'expanded'\n        | 'dragging'\n        | 'draggable'\n        | 'onToggleExpanded'\n        | 'onPressHandle'\n        | 'onReleaseHandle'\n        | 'onDragStart'\n        | 'onDragEnd'\n        | 'onDragOver'\n        | 'onDragLeave'\n        | 'onDrop'\n      >;\n    },\n  ) => ReactNode;\n  onReorder: (sourceId: T['id'], targetId: T['id'], position: 'before' | 'after') => void;\n  /** Optional rendered when the list is empty. */\n  empty?: ReactNode;\n  /** IDs to render expanded on first mount. Defaults to all collapsed. */\n  defaultExpandedIds?: ReadonlyArray<T['id']>;\n}\n\n/** A drag-reorderable list of `<EffectCard>`s. Owns the expanded and dragging\n *  state and hands it back to `renderItem`, so the caller only supplies each\n *  card's contents. */\nexport function EffectCardList<T extends EffectCardListItem>({\n  items,\n  renderItem,\n  onReorder,\n  empty,\n  defaultExpandedIds,\n}: EffectCardListProps<T>) {\n  const [expanded, setExpanded] = useState<Set<T['id']>>(() => new Set(defaultExpandedIds ?? []));\n  const [draggingId, setDraggingId] = useState<T['id'] | null>(null);\n  const [pressedId, setPressedId] = useState<T['id'] | null>(null);\n  const [dropHint, setDropHint] = useState<{ id: T['id']; position: 'before' | 'after' } | null>(\n    null,\n  );\n\n  if (items.length === 0) {\n    return <>{empty ?? <div className={s.cardListEmpty}>No items.</div>}</>;\n  }\n\n  return (\n    <div className={s.cardList}>\n      {items.map((item) => {\n        const isExpanded = expanded.has(item.id);\n        const isDragging = draggingId === item.id;\n        const isPressed = pressedId === item.id;\n        const showHintBefore =\n          dropHint && dropHint.id === item.id && dropHint.position === 'before';\n        const showHintAfter = dropHint && dropHint.id === item.id && dropHint.position === 'after';\n\n        const toggleExpanded = () =>\n          setExpanded((prev) => {\n            const next = new Set(prev);\n            if (next.has(item.id)) next.delete(item.id);\n            else next.add(item.id);\n            return next;\n          });\n\n        return (\n          <div key={String(item.id)} className={s.cardListWrap}>\n            {showHintBefore && <div className={s.cardDropHint} />}\n            {renderItem(item, {\n              isExpanded,\n              isDragging,\n              toggleExpanded,\n              cardProps: {\n                expanded: isExpanded,\n                dragging: isDragging,\n                draggable: isPressed,\n                onToggleExpanded: toggleExpanded,\n                onPressHandle: () => setPressedId(item.id),\n                onReleaseHandle: () => setPressedId(null),\n                onDragStart: (e) => {\n                  e.dataTransfer.effectAllowed = 'move';\n                  e.dataTransfer.setData('text/plain', String(item.id));\n                  setDraggingId(item.id);\n                },\n                onDragEnd: () => {\n                  setDraggingId(null);\n                  setPressedId(null);\n                  setDropHint(null);\n                },\n                onDragOver: (e) => {\n                  if (draggingId === null || draggingId === item.id) return;\n                  e.preventDefault();\n                  e.dataTransfer.dropEffect = 'move';\n                  const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();\n                  const position: 'before' | 'after' =\n                    e.clientY < rect.top + rect.height / 2 ? 'before' : 'after';\n                  setDropHint({ id: item.id, position });\n                },\n                onDragLeave: () => {\n                  setDropHint((h) => (h && h.id === item.id ? null : h));\n                },\n                onDrop: (e) => {\n                  e.preventDefault();\n                  if (draggingId === null || draggingId === item.id) {\n                    setDropHint(null);\n                    return;\n                  }\n                  const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();\n                  const position: 'before' | 'after' =\n                    e.clientY < rect.top + rect.height / 2 ? 'before' : 'after';\n                  onReorder(draggingId, item.id, position);\n                  setDropHint(null);\n                },\n              },\n            })}\n            {showHintAfter && <div className={s.cardDropHint} />}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport s from './Properties.module.css';\n\n/** Props for `<PropertyGroup>`. */\nexport interface PropertyGroupProps {\n  /** Title rendered between two rules at the top of the group. */\n  title: ReactNode;\n  /** When true the group renders nothing — useful for conditional sections. */\n  hidden?: boolean;\n  children: ReactNode;\n  className?: string;\n  /**\n   * How rows pack into the 2-column grid.\n   *   - `'auto-color'` (default): only color rows pair side-by-side; everything\n   *     else spans the full width.\n   *   - `'pairs'`: every row auto-places into the 2-column grid two-per-row.\n   */\n  pack?: 'auto-color' | 'pairs';\n}\n\n/**\n * Visually-bordered group inside a PropertyList. Use to scope a set of\n * related rows under a heading (e.g. \"Aqua\", \"Bevel\", \"Dome\" sections\n * inside a fill effect's controls).\n */\nexport function PropertyGroup({\n  title,\n  hidden,\n  children,\n  className,\n  pack = 'auto-color',\n}: PropertyGroupProps) {\n  if (hidden) return null;\n  const packClass = pack === 'pairs' ? ` ${s.groupPairs}` : '';\n  const cls = `${s.group}${packClass}${className ? ` ${className}` : ''}`;\n  return (\n    <div className={cls}>\n      <h3 className={s.groupTitle}>\n        <hr />\n        <span>{title}</span>\n        <hr />\n      </h3>\n      <div className={s.groupBody}>{children}</div>\n    </div>\n  );\n}\n","import { type ReactNode, useState } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { dlog } from '../../dlog';\nimport { formatNumber, parseSignedNumber } from '../../format/number';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport s from './Properties.module.css';\n\n/** Props for `<PropertyPanel>`. */\nexport interface PropertyPanelProps {\n  title?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n/** A titled panel holding property rows — the sidebar container the rest of\n *  this module's components fill. */\nexport function PropertyPanel({ title, children, className }: PropertyPanelProps) {\n  const cls = className ? `${s.panel} ${className}` : s.panel;\n  return (\n    <div className={cls}>\n      {title != null && <h2 className={s.panelTitle}>{title}</h2>}\n      {children}\n    </div>\n  );\n}\n\n/** How a property list packs its rows into two columns. */\nexport type PropertyListPack = 'auto-color' | 'pairs';\n\n/** Props for `<PropertyList>`. */\nexport interface PropertyListProps {\n  children: ReactNode;\n  className?: string;\n  /**\n   * How rows pack into the 2-column grid.\n   *   - `'auto-color'` (default): only color rows pair side-by-side; everything\n   *     else spans the full width. Right for sparse top-level panels.\n   *   - `'pairs'`: every row auto-places into the 2-column grid two-per-row.\n   *     Headers and subpanels still span the full width; wrap any other\n   *     full-width child in `<PropertySpan>`. Right for dense effect bodies.\n   */\n  pack?: PropertyListPack;\n}\n\n/**\n * Grid container for PropertyRows. Use standalone for chrome-less layouts, or\n * nest inside <PropertyPanel/> for the standard glass card.\n */\nexport function PropertyList({ children, className, pack = 'auto-color' }: PropertyListProps) {\n  const packClass = pack === 'pairs' ? ` ${s.listPairs}` : '';\n  const cls = `${s.list}${packClass}${className ? ` ${className}` : ''}`;\n  return <div className={cls}>{children}</div>;\n}\n\n/** Props for `<PropertySpan>`. */\nexport interface PropertySpanProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Wrapper that makes an arbitrary child span both columns of a\n * `<PropertyList pack=\"pairs\">`, a `<PropertyGroup pack=\"pairs\">` body, or a\n * `<Subpanel>`. `<PropertyRow span>` covers the row case; this covers\n * everything else a consumer puts in the grid.\n */\nexport function PropertySpan({ children, className }: PropertySpanProps) {\n  return <div className={className ? `${s.span} ${className}` : s.span}>{children}</div>;\n}\n\n/** Which control shape a row holds, which decides its intrinsic layout. */\nexport type PropertyRowVariant = 'default' | 'color' | 'checkbox';\n/** Whether a row's label sits above its control or beside it. */\nexport type PropertyRowLayout = 'block' | 'inline';\n\n/** Props for `<PropertyRow>`. */\nexport interface PropertyRowProps {\n  label: ReactNode;\n  /** Right-aligned readout shown next to the label (e.g. current value). */\n  readout?: ReactNode;\n  /**\n   * Help text for the row, shown in a tooltip off an ⓘ affordance beside the\n   * label. Empty or absent renders no affordance.\n   */\n  description?: string;\n  variant?: PropertyRowVariant;\n  /**\n   * Label position relative to the control. \"block\" (default) stacks\n   * label above control; \"inline\" places the label to the left.\n   * Color and checkbox variants are always inline by their own nature.\n   */\n  layout?: PropertyRowLayout;\n  /**\n   * Take the full width of the enclosing grid. Only has an effect inside a\n   * `<PropertyList pack=\"pairs\">` or a `<Subpanel>`; elsewhere rows are already\n   * full width.\n   */\n  span?: boolean;\n  children: ReactNode;\n  htmlFor?: string;\n  className?: string;\n}\n\n/** The label-plus-control frame every typed row below is built from. Use it\n *  directly for a control this module does not cover. */\nexport function PropertyRow({\n  label,\n  readout,\n  description,\n  variant = 'default',\n  layout = 'block',\n  span,\n  children,\n  htmlFor,\n  className,\n}: PropertyRowProps) {\n  const variantClass = variant === 'color' ? ` ${s.rowColor}` : variant === 'checkbox' ? ` ${s.rowCheckbox}` : '';\n  // Layout only meaningfully applies to the default variant; color and\n  // checkbox have their own intrinsic orientation.\n  const layoutClass = variant === 'default' && layout === 'inline' ? ` ${s.rowInline}` : '';\n  const spanClass = span ? ` ${s.span}` : '';\n  const cls = `${s.row}${variantClass}${layoutClass}${spanClass}${className ? ` ${className}` : ''}`;\n  return (\n    <label className={cls} htmlFor={htmlFor}>\n      <span className={s.rowLabel}>\n        {label}\n        {description ? <PropertyRowHelp label={label} description={description} /> : null}\n        {readout != null && <em className={s.readout}>{readout}</em>}\n      </span>\n      {children}\n    </label>\n  );\n}\n\n/** Tooltip trigger for a row's `description`. A tooltip trigger has to be\n *  interactive to be keyboard-reachable, so this is a real button. */\nfunction PropertyRowHelp({ label, description }: { label: ReactNode; description: string }) {\n  const name = typeof label === 'string' ? label : 'this setting';\n  return (\n    <TooltipTrigger>\n      <Focusable>\n        <button\n          type=\"button\"\n          className={s.help}\n          aria-label={`About ${name}`}\n          onClick={(e) => {\n            // The wrapping <label> would otherwise actuate the row's control.\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n          onMouseDown={(e) => e.stopPropagation()}\n        >\n          ⓘ\n        </button>\n      </Focusable>\n      <Tooltip>{description}</Tooltip>\n    </TooltipTrigger>\n  );\n}\n\n// ── Row implementations ──────────────────────────────────────────────\n\n/** Props for `<SliderRow>`. */\nexport interface SliderRowProps {\n  label: ReactNode;\n  value: number;\n  min: number;\n  max: number;\n  step?: number;\n  onChange: (next: number) => void;\n  /** Override how the value is rendered next to the label. Defaults to `value.toString()`. */\n  format?: (value: number) => ReactNode;\n  /**\n   * Optional suffix rendered next to the readout. A string becomes a\n   * baseline-aligned dim \"word\" unit (e.g. \"px\"); pass JSX like `<sup>°</sup>`\n   * to get the browser's native super positioning for symbol units.\n   */\n  unit?: ReactNode;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A bounded number edited by dragging, with a live readout whose precision\n *  follows `step`. */\nexport function SliderRow({\n  label,\n  value,\n  min,\n  max,\n  step = 1,\n  onChange,\n  format,\n  unit,\n  layout,\n  description,\n  span,\n}: SliderRowProps) {\n  // Default readout precision tracks `step`: integer steps → 0 decimals,\n  // 0.1 → 1 decimal, 0.05/0.02/0.01 → 2 decimals, 0.005 → 3, etc. Callers\n  // can still pass an explicit `format` to override (e.g. for a custom\n  // unit string or a non-decimal display like fractions).\n  const decimals = step >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(step))));\n  const effectiveFormat =\n    format ??\n    ((n: number) =>\n      formatNumber(n, {\n        useGrouping: false,\n        minimumFractionDigits: decimals,\n        maximumFractionDigits: decimals,\n      }));\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      readout={\n        <EditableReadout\n          value={value}\n          min={min}\n          max={max}\n          format={effectiveFormat}\n          unit={unit}\n          onCommit={onChange}\n        />\n      }\n      layout={layout}\n      description={description}\n    >\n      <input\n        type=\"range\"\n        tabIndex={-1}\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        onChange={(e) => {\n          const v = Number(e.target.value);\n          dlog('property-panel', 'slider', { label, value: v });\n          onChange(v);\n        }}\n      />\n    </PropertyRow>\n  );\n}\n\ninterface EditableReadoutProps {\n  value: number;\n  min: number;\n  max: number;\n  format?: (value: number) => ReactNode;\n  unit?: ReactNode;\n  onCommit: (next: number) => void;\n}\n\n/**\n * Readout that swaps to a number input on click, commits on Enter/blur,\n * cancels on Escape. Clicks are stopped so the wrapping <label> doesn't\n * forward focus to the slider thumb.\n */\nfunction EditableReadout({ value, min, max, format, unit, onCommit }: EditableReadoutProps) {\n  // Draft is non-null only while the input is focused. Live value mirrors\n  // into the input otherwise. Pattern mirrors speech-balloons Lab.tsx:893-942.\n  const [draft, setDraft] = useState<string | null>(null);\n  const fmt = (n: number) =>\n    format ? format(n) : formatNumber(n, { useGrouping: false, maximumFractionDigits: 20 });\n  const displayValue =\n    draft !== null\n      ? draft\n      : (() => {\n          const formatted = fmt(value);\n          return typeof formatted === 'string' ? formatted : String(formatted);\n        })();\n\n  const suffix =\n    unit == null ? null : typeof unit === 'string' ? (\n      <span className={s.readoutUnit}>{unit}</span>\n    ) : (\n      unit\n    );\n\n  const commit = () => {\n    if (draft !== null) {\n      const n = parseSignedNumber(draft);\n      if (Number.isFinite(n)) onCommit(Math.min(max, Math.max(min, n)));\n    }\n    setDraft(null);\n  };\n\n  return (\n    <span className={s.readoutGroup}>\n      <input\n        type=\"text\"\n        inputMode=\"decimal\"\n        className={s.readoutInput}\n        value={displayValue}\n        onFocus={(e) => {\n          const formatted = fmt(value);\n          setDraft(typeof formatted === 'string' ? formatted : String(formatted));\n          e.currentTarget.select();\n        }}\n        onChange={(e) => setDraft(e.target.value.replace(/-/g, '−'))}\n        onBlur={commit}\n        onClick={(e) => {\n          // Stop the click from reaching the wrapping <label> (which would\n          // forward focus to the slider thumb).\n          e.preventDefault();\n          e.stopPropagation();\n          e.currentTarget.focus();\n        }}\n        onMouseDown={(e) => e.stopPropagation()}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            commit();\n            e.currentTarget.blur();\n          } else if (e.key === 'Escape') {\n            setDraft(null);\n            e.currentTarget.blur();\n          }\n        }}\n      />\n      {suffix}\n    </span>\n  );\n}\n\n/** Props for `<ColorRow>`. */\nexport interface ColorRowProps {\n  label: ReactNode;\n  value: string;\n  onChange: (next: string) => void;\n  /** 0..1 alpha. When provided, a translucent slider renders beneath the swatch. */\n  alpha?: number;\n  onAlphaChange?: (next: number) => void;\n  /**\n   * Render the alpha track as inert (dimmed, no thumb, not-allowed cursor).\n   * Use when the color's consumer drops alpha so the affordance reads dead.\n   */\n  alphaDisabled?: boolean;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A color swatch, optionally with an alpha slider beneath it. */\nexport function ColorRow({\n  label,\n  value,\n  onChange,\n  alpha,\n  onAlphaChange,\n  alphaDisabled,\n  description,\n  span,\n}: ColorRowProps) {\n  const showAlpha = alpha != null;\n  const className = alphaDisabled ? s.alphaDisabled : undefined;\n  return (\n    <PropertyRow span={span} label={label} variant=\"color\" className={className} description={description}>\n      <input type=\"color\" value={value} onChange={(e) => onChange(e.target.value)} />\n      {showAlpha && (\n        <input\n          type=\"range\"\n          className={s.alpha}\n          min={0}\n          max={1}\n          step={0.01}\n          value={alpha}\n          disabled={alphaDisabled}\n          onChange={(e) => onAlphaChange?.(Number(e.target.value))}\n        />\n      )}\n    </PropertyRow>\n  );\n}\n\n/** Props for `<CheckboxRow>`. */\nexport interface CheckboxRowProps {\n  label: ReactNode;\n  value: boolean;\n  onChange: (next: boolean) => void;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A boolean checkbox. */\nexport function CheckboxRow({ label, value, onChange, span, description }: CheckboxRowProps) {\n  return (\n    <PropertyRow span={span} label={label} variant=\"checkbox\" description={description}>\n      <input type=\"checkbox\" checked={value} onChange={(e) => onChange(e.target.checked)} />\n    </PropertyRow>\n  );\n}\n\n/** Props for `<TextRow>`. */\nexport interface TextRowProps {\n  label: ReactNode;\n  value: string;\n  onChange: (next: string) => void;\n  placeholder?: string;\n  maxLength?: number;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A single-line text input. */\nexport function TextRow({\n  label,\n  value,\n  onChange,\n  placeholder,\n  maxLength,\n  layout,\n  description,\n  span,\n}: TextRowProps) {\n  return (\n    <PropertyRow span={span} label={label} layout={layout} description={description}>\n      <input\n        type=\"text\"\n        value={value}\n        placeholder={placeholder}\n        maxLength={maxLength}\n        onChange={(e) => onChange(e.target.value)}\n      />\n    </PropertyRow>\n  );\n}\n\n/** Props for `<NumberRow>`. */\nexport interface NumberRowProps {\n  label: ReactNode;\n  value: number;\n  onChange: (next: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  placeholder?: string;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A number typed directly. Reach for `<SliderRow>` when the range matters\n *  more than the exact value. */\nexport function NumberRow({\n  label,\n  value,\n  onChange,\n  min,\n  max,\n  step,\n  placeholder,\n  layout,\n  description,\n  span,\n}: NumberRowProps) {\n  return (\n    <PropertyRow span={span} label={label} layout={layout} description={description}>\n      <input\n        type=\"number\"\n        value={value}\n        min={min}\n        max={max}\n        step={step}\n        placeholder={placeholder}\n        onChange={(e) => {\n          const raw = e.target.value;\n          if (raw === '') return;\n          const n = Number(raw);\n          if (Number.isFinite(n)) onChange(n);\n        }}\n      />\n    </PropertyRow>\n  );\n}\n\nexport interface PropertyOption<T extends string> {\n  value: T;\n  label: ReactNode;\n}\n\n/** Props for `<SelectRow>`. */\nexport interface SelectRowProps<T extends string> {\n  label: ReactNode;\n  value: T;\n  options: ReadonlyArray<PropertyOption<T>>;\n  onChange: (next: T) => void;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A dropdown over a fixed set of choices. Prefer `<ToggleRow>` when there\n *  are only two or three and they should all stay visible. */\nexport function SelectRow<T extends string>({\n  label,\n  value,\n  options,\n  onChange,\n  layout,\n  description,\n  span,\n}: SelectRowProps<T>) {\n  return (\n    <PropertyRow span={span} label={label} layout={layout} description={description}>\n      <select\n        value={value}\n        onChange={(e) => {\n          const v = e.target.value as T;\n          dlog('property-panel', 'select', { label, value: v });\n          onChange(v);\n        }}\n      >\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {/* HTML <option> only renders text; ReactNode → string coerce */}\n            {opt.label as string}\n          </option>\n        ))}\n      </select>\n    </PropertyRow>\n  );\n}\n\n/** Props for `<ToggleRow>`. */\nexport interface ToggleRowProps<T extends string> {\n  label: ReactNode;\n  value: T;\n  options: ReadonlyArray<PropertyOption<T>>;\n  onChange: (next: T) => void;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A segmented control: the same choice as a select, with every option\n *  visible at once. */\nexport function ToggleRow<T extends string>({\n  label,\n  value,\n  options,\n  onChange,\n  layout,\n  description,\n  span,\n}: ToggleRowProps<T>) {\n  return (\n    <PropertyRow span={span} label={label} layout={layout} description={description}>\n      <div className={s.toggle}>\n        {options.map((opt) => {\n          const selected = opt.value === value;\n          return (\n            <button\n              key={opt.value}\n              type=\"button\"\n              aria-pressed={selected}\n              className={\n                selected ? `${s.toggleButton} ${s.toggleButtonSelected}` : s.toggleButton\n              }\n              onClick={() => onChange(opt.value)}\n            >\n              {opt.label}\n            </button>\n          );\n        })}\n      </div>\n    </PropertyRow>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/Slider-BbbmHE0c.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider-BbbmHE0c.js","names":[],"sources":["../../src/components/Slider/Slider.module.css","../../src/components/Slider/Slider.tsx"],"sourcesContent":[".root {\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.track {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  height: var(--rp-track-height, 24px);\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  cursor: var(--rp-track-cursor, crosshair);\n  /* No `overflow: hidden` here — thumbs at extreme values would get\n   * clipped at the track edges. The gradient/track-paint clip is\n   * applied to `.trackInner` instead, which lets thumbs spill freely. */\n}\n\n.trackInner {\n  position: absolute;\n  inset: 0;\n  border-radius: var(--wzl-radius-sm);\n  overflow: hidden;\n}\n\n.thumb {\n  position: absolute;\n  /* Thumb extends 2px above + below the track for grabbability + visual\n   * weight. Track itself stays its natural height; the thumb just spills. */\n  top: -2px;\n  bottom: -2px;\n  width: 14px;\n  margin-left: -7px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--wzl-fg-muted) 70%, transparent);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: var(--wzl-radius-sm);\n  cursor: ew-resize;\n  /* Frosted-glass over the (often colorful) track. Cheap on modern GPUs;\n   * gracefully degrades to just the partial-alpha background on engines\n   * without backdrop-filter support. */\n  backdrop-filter: blur(3px);\n  -webkit-backdrop-filter: blur(3px);\n  /* Subtle raise — sells the \"thumb is on top of the track\" hierarchy. */\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-xs)/var(--wzl-leading-tight) ui-sans-serif, system-ui, sans-serif;\n  font-variant-numeric: tabular-nums;\n  /* Thumb text reads against `--wzl-thumb-fill`, which can differ from the\n   * surrounding panel text color. Default = dark; consumers re-skin via\n   * `--wzl-thumb-text` if they pick a dark thumb fill. */\n  color: var(--wzl-fg-inverse);\n  /* White halo so labels stay legible over wildly varying gradient\n   * backgrounds (e.g. labels 'T' / 'P' / 'B' over teal, hue 200° over\n   * yellow-green, etc.). */\n  text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);\n}\n\n.thumb:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: 1px;\n}\n\n.thumbActive {\n  /* Visual marker for the dragging/focused thumb; subclass-overridable. */\n  z-index: 1;\n}\n\n.readoutsBelow {\n  position: relative;\n  height: 14px;\n  margin-top: 4px;\n}\n\n.readoutBelow {\n  position: absolute;\n  transform: translateX(-50%);\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-xs)/var(--wzl-leading-tight) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.readoutInline {\n  display: inline-block;\n  margin-left: 8px;\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-sm)/var(--wzl-leading-tight) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  color: var(--wzl-fg-muted);\n  vertical-align: middle;\n}\n\n.notched {\n  background: var(--thumb-svg, none);\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  background-color: transparent;\n  border: none;\n  /* Notched thumbs need to disable the .thumb defaults that paint to\n   * the bounding box: backdrop-filter and box-shadow both ignore the\n   * SVG's polygon/notch and would render through the notch cutout.\n   * Use filter: drop-shadow instead — it traces the actual rendered\n   * alpha (i.e. the polygon shape including the cut). */\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  box-shadow: none;\n  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));\n  /* Default notched SVG (down-pointing pentagon, matches the perceptual-color experiment). */\n  --thumb-svg: url(\"data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 30' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 2.52,0 7,10.3 11.48,0 14,0 14,30 0,30' fill='rgba(255,255,255,0.62)' stroke='rgba(0,0,0,0.55)' stroke-width='0.75' stroke-linejoin='miter'/%3E%3C/svg%3E\");\n}\n\n.ticks {\n  position: absolute;\n  inset: 0;\n  /* A mark must never eat the track click that adds a thumb, nor the\n   * pointerdown that starts a drag through it. */\n  pointer-events: none;\n}\n\n.tick {\n  position: absolute;\n  top: var(--rp-tick-inset, 20%);\n  bottom: var(--rp-tick-inset, 20%);\n  width: var(--rp-tick-width, 1px);\n  margin-left: calc(var(--rp-tick-width, 1px) / -2);\n  border-radius: var(--rp-tick-width, 1px);\n  background: var(--rp-tick-color, var(--wzl-border-strong));\n}\n","import { useCallback, useEffect, useRef, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactElement, type ReactNode } from 'react';\nimport s from './Slider.module.css';\nimport { formatNumber } from '../../format/number';\n\n/**\n * Passed to a custom thumb renderer: the thumb box in CSS px, and whether\n * this thumb is the one being dragged.\n */\nexport type ThumbRenderCtx = {\n  width: number;\n  height: number;\n  isActive: boolean;\n};\n\n/**\n * A thumb's appearance — one of the two built-in shapes, or a custom\n * renderer.\n */\nexport type ThumbShape =\n  | 'round'\n  | 'notched'\n  | { render: (ctx: ThumbRenderCtx) => ReactNode };\n\n/**\n * One handle on a {@link Slider}. `bounds` narrows the range this particular\n * thumb may move within, either fixed or computed from the current thumb\n * list.\n */\nexport type Thumb = {\n  value: number;\n  label?: string;\n  shape?: ThumbShape;\n  bounds?: [number, number] | ((ctx: BoundsCtx) => [number, number]);\n  /**\n   * Spoken form of `value`, published as `aria-valuetext`. Required by ARIA\n   * whenever `value` is not the quantity the user is choosing — an index into\n   * a value list, a log-scaled position — since `aria-valuenow` alone then\n   * announces a number that means nothing.\n   */\n  valueText?: string;\n};\n\n/**\n * Passed to a thumb's `bounds` function: the full thumb list and this thumb's\n * index in it, so a bound can be expressed relative to its neighbors.\n */\nexport type BoundsCtx = {\n  thumbs: readonly Thumb[];\n  index: number;\n};\n\n/**\n * Passed to `renderTrack`: the track's width in CSS px and a mapping from a\n * slider value to its 0..1 position along the track.\n */\nexport type TrackCtx = {\n  trackWidth: number;\n  valueToFraction: (v: number) => number;\n};\n\n/**\n * Props for {@link Slider}.\n *\n * `onInput` fires continuously through a drag; `onChange` fires once when it\n * ends and is the one to write to history.\n *\n * `stops` are attractors: a drag that passes within a few pixels of one lands\n * on it, and the arrow keys move stop to stop. `step` still quantizes the\n * values between them. Each one is drawn on the track as a mark; pass\n * `showStops: false` for a track whose own paint already reads as the stops.\n *\n * `trackClick: 'move-nearest'` makes a press on bare track send the closest\n * thumb there and continue as a drag. It is off by default because on a\n * multi-thumb editor a stray click would yank a stop the user was not aiming\n * at; `onAddThumb`, where it is set, keeps the track press.\n *\n * `constraint: 'ordered'` keeps thumbs from crossing each other. Supplying\n * `onAddThumb` makes a click on empty track create a thumb, and supplying\n * `onRemoveThumb` lets a right-click or a drag off the track remove one —\n * both callbacks can decline by returning `null`/`false`. `allowShiftAll`\n * makes shift-drag translate every thumb together.\n */\nexport type SliderProps<T extends Thumb = Thumb> = {\n  thumbs: readonly T[];\n  onInput: (next: T[]) => void;\n  onChange?: (next: T[]) => void;\n  min: number;\n  max: number;\n  step?: number;\n  stops?: number[];\n  showStops?: boolean;\n  trackClick?: 'none' | 'move-nearest';\n  constraint?: 'free' | 'ordered';\n  onAddThumb?: (atValue: number) => T | null;\n  onRemoveThumb?: (index: number) => boolean;\n  allowShiftAll?: boolean;\n  renderTrack?: (ctx: TrackCtx) => ReactNode;\n  trackHeight?: number;\n  renderReadout?: (thumb: T, index: number) => ReactNode;\n  readoutPlacement?: 'none' | 'inline-after' | 'below-thumb';\n  ariaLabel?: string;\n  className?: string;\n};\n\nfunction snap(v: number, step: number | undefined, min: number): number {\n  if (step === undefined || step <= 0) return v;\n  return Math.round((v - min) / step) * step + min;\n}\n\nfunction clamp(v: number, lo: number, hi: number): number {\n  return Math.max(lo, Math.min(hi, v));\n}\n\n/** How close a drag has to come to a stop, in track pixels, to land on it. */\nconst STOP_SNAP_PX = 8;\n\n/** The stops that are actually reachable: inside the range, deduped, ascending. */\nfunction usableStops(stops: number[] | undefined, min: number, max: number): number[] {\n  if (!stops || stops.length === 0) return [];\n  return [...new Set(stops.filter(v => v >= min && v <= max))].sort((a, b) => a - b);\n}\n\n/** Pull `v` onto the nearest stop within `tolerance`, or leave it where it is. */\nfunction attract(v: number, stops: number[], tolerance: number): number {\n  let best = v;\n  let bestGap = tolerance;\n  for (const stop of stops) {\n    const gap = Math.abs(stop - v);\n    if (gap <= bestGap) {\n      best = stop;\n      bestGap = gap;\n    }\n  }\n  return best;\n}\n\n/** The stop `count` places past `v` in `direction`, saturating at either end. */\nfunction stepStops(stops: number[], v: number, direction: 1 | -1, count: number): number {\n  if (direction > 0) {\n    const first = stops.findIndex(stop => stop > v);\n    if (first === -1) return stops[stops.length - 1];\n    return stops[Math.min(stops.length - 1, first + count - 1)];\n  }\n  let first = -1;\n  for (let i = stops.length - 1; i >= 0; i--) {\n    if (stops[i] < v) {\n      first = i;\n      break;\n    }\n  }\n  if (first === -1) return stops[0];\n  return stops[Math.max(0, first - (count - 1))];\n}\n\nfunction defaultStep(step: number | undefined, min: number, max: number): number {\n  if (step !== undefined && step > 0) return step;\n  return (max - min) / 100;\n}\n\n/** Keep a thumb inside its neighbors when `constraint` is `'ordered'`. */\nfunction clampOrdered(\n  v: number,\n  thumbs: readonly Thumb[],\n  index: number,\n  min: number,\n  max: number,\n  step: number | undefined,\n): number {\n  const gap = step !== undefined && step > 0 ? step : (max - min) / 1000;\n  const lower = index > 0 ? thumbs[index - 1].value + gap : min;\n  const upper = index < thumbs.length - 1 ? thumbs[index + 1].value - gap : max;\n  return clamp(v, lower, upper);\n}\n\nfunction resolveBounds(thumb: Thumb, ctx: BoundsCtx, fallbackMin: number, fallbackMax: number): [number, number] {\n  if (!thumb.bounds) return [fallbackMin, fallbackMax];\n  const tuple = typeof thumb.bounds === 'function' ? thumb.bounds(ctx) : thumb.bounds;\n  return [tuple[0], tuple[1]];\n}\n\nfunction defaultReadout(thumb: Thumb): string {\n  return formatNumber(thumb.value, { minimumFractionDigits: 3, maximumFractionDigits: 3 });\n}\n\n/**\n * Multi-thumb slider over a shared track. The thumb list is fully controlled:\n * every change, live or committed, arrives as a whole new array.\n *\n * Thumbs are draggable, and arrow/Home/End move the focused thumb — those\n * keystrokes fire `onInput` and `onChange` together, since there is no\n * in-flight state to buffer.\n */\nexport function Slider<T extends Thumb = Thumb>(props: SliderProps<T>): ReactElement {\n  const { thumbs, onInput, onChange, min, max, step, constraint, trackHeight, ariaLabel, className } = props;\n\n  const stops = usableStops(props.stops, min, max);\n\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  // In-flight thumb buffer during a drag; null when not dragging.\n  const dragBufferRef = useRef<T[] | null>(null);\n  // Teardown for the in-flight drag's document listeners, so unmounting\n  // mid-drag doesn't leave them running against a gone track.\n  const endDragRef = useRef<(() => void) | null>(null);\n\n  useEffect(() => () => { endDragRef.current?.(); }, []);\n\n  const valueToFraction = useCallback(\n    (v: number): number => (max === min ? 0 : clamp((v - min) / (max - min), 0, 1)),\n    [min, max],\n  );\n\n  const fractionToValue = useCallback(\n    (f: number): number => min + clamp(f, 0, 1) * (max - min),\n    [min, max],\n  );\n\n  // `seed` replaces the thumb list the drag starts from. A track press moves a\n  // thumb before the drag begins, and without seeding, a release with no\n  // movement would commit the stale buffer and undo that move.\n  const beginThumbDrag = useCallback(\n    (index: number, seed?: readonly T[]) => {\n      const buf: T[] = (seed ?? thumbs).map(t => ({ ...t }));\n      dragBufferRef.current = buf;\n      let droppedOff = false;\n\n      const onMove = (ev: PointerEvent) => {\n        const track = trackRef.current;\n        const buffer = dragBufferRef.current;\n        if (!track || !buffer) return;\n        const rect = track.getBoundingClientRect();\n        const f = clamp((ev.clientX - rect.left) / rect.width, 0, 1);\n        let v = fractionToValue(f);\n        v = snap(v, step, min);\n        v = clamp(v, min, max);\n        if (stops.length > 0) v = attract(v, stops, (STOP_SNAP_PX / rect.width) * (max - min));\n\n        const [bLo, bHi] = resolveBounds(buffer[index], { thumbs: buffer, index }, min, max);\n        v = clamp(v, bLo, bHi);\n\n        if (constraint === 'ordered') v = clampOrdered(v, buffer, index, min, max, step);\n\n        // Drop-off detection: pointer exits the track vertically by more than trackHeight.\n        const bandHeight = rect.height;\n        if (props.onRemoveThumb) {\n          if (ev.clientY < rect.top - bandHeight || ev.clientY > rect.bottom + bandHeight) {\n            droppedOff = true;\n          } else {\n            droppedOff = false;\n          }\n        }\n\n        buffer[index] = { ...buffer[index], value: v };\n        onInput(buffer.map(t => ({ ...t })));\n      };\n\n      const unlisten = () => {\n        document.removeEventListener('pointermove', onMove);\n        document.removeEventListener('pointerup', onUp);\n        document.removeEventListener('pointercancel', onCancel);\n        endDragRef.current = null;\n      };\n\n      // A canceled pointer never fires `pointerup`; without this the drag\n      // stays live and the thumb tracks a released pointer.\n      const onCancel = () => {\n        unlisten();\n        dragBufferRef.current = null;\n      };\n\n      const onUp = () => {\n        unlisten();\n        const buffer = dragBufferRef.current;\n        dragBufferRef.current = null;\n        if (!buffer) return;\n\n        if (droppedOff && props.onRemoveThumb) {\n          const accepted = props.onRemoveThumb(index);\n          if (accepted) {\n            const next = buffer.filter((_, i) => i !== index).map(t => ({ ...t })) as T[];\n            onInput(next);\n            onChange?.(next);\n            return;\n          }\n        }\n\n        onChange?.(buffer.map(t => ({ ...t })));\n      };\n\n      document.addEventListener('pointermove', onMove);\n      document.addEventListener('pointerup', onUp);\n      document.addEventListener('pointercancel', onCancel);\n      endDragRef.current = onCancel;\n    },\n    [thumbs, onInput, onChange, fractionToValue, min, max, step, stops, constraint, props],\n  );\n\n  const beginShiftAllDrag = useCallback(\n    (anchorX: number) => {\n      const buf: T[] = thumbs.map(t => ({ ...t }));\n      const startValues = buf.map(t => t.value);\n      dragBufferRef.current = buf;\n\n      const onMove = (ev: PointerEvent) => {\n        const track = trackRef.current;\n        const buffer = dragBufferRef.current;\n        if (!track || !buffer) return;\n        const rect = track.getBoundingClientRect();\n        const dxFraction = (ev.clientX - anchorX) / rect.width;\n        let dValue = dxFraction * (max - min);\n        dValue = snap(dValue, step, 0);\n\n        // Clamp delta so no thumb leaves [min, max] (per-thumb bounds intentionally\n        // not enforced — matches the experiment's hue-band shift-translate semantics).\n        let allowedNeg = -Infinity;\n        let allowedPos = Infinity;\n        for (let i = 0; i < startValues.length; i++) {\n          allowedNeg = Math.max(allowedNeg, min - startValues[i]);\n          allowedPos = Math.min(allowedPos, max - startValues[i]);\n        }\n        dValue = clamp(dValue, allowedNeg, allowedPos);\n\n        for (let i = 0; i < buffer.length; i++) {\n          buffer[i] = { ...buffer[i], value: clamp(startValues[i] + dValue, min, max) };\n        }\n        onInput(buffer.map(t => ({ ...t })));\n      };\n\n      const unlisten = () => {\n        document.removeEventListener('pointermove', onMove);\n        document.removeEventListener('pointerup', onUp);\n        document.removeEventListener('pointercancel', onCancel);\n        endDragRef.current = null;\n      };\n\n      const onCancel = () => {\n        unlisten();\n        dragBufferRef.current = null;\n      };\n\n      const onUp = () => {\n        unlisten();\n        const buffer = dragBufferRef.current;\n        dragBufferRef.current = null;\n        if (buffer) onChange?.(buffer.map(t => ({ ...t })));\n      };\n\n      document.addEventListener('pointermove', onMove);\n      document.addEventListener('pointerup', onUp);\n      document.addEventListener('pointercancel', onCancel);\n      endDragRef.current = onCancel;\n    },\n    [thumbs, onInput, onChange, min, max, step],\n  );\n\n  const onThumbPointerDown = (index: number) => (e: ReactPointerEvent) => {\n    // Only bail on explicit non-primary buttons (button > 0). jsdom's PointerEvent\n    // leaves `button` undefined; treat that as primary so tests can drive drags.\n    if (typeof e.button === 'number' && e.button > 0) return;\n    // preventDefault below suppresses the focus the press would otherwise\n    // give the thumb, and the arrow keys are on the thumb.\n    (e.currentTarget as HTMLElement).focus?.();\n    e.preventDefault();\n    e.stopPropagation();\n    if (e.shiftKey && props.allowShiftAll) {\n      beginShiftAllDrag(e.clientX);\n    } else {\n      beginThumbDrag(index);\n    }\n  };\n\n  const onThumbContextMenu = (index: number) => (e: ReactMouseEvent) => {\n    if (!props.onRemoveThumb) return;\n    e.preventDefault();\n    const accepted = props.onRemoveThumb(index);\n    if (!accepted) return;\n    const next = thumbs.filter((_, i) => i !== index).map(t => ({ ...t })) as T[];\n    onInput(next);\n    onChange?.(next);\n  };\n\n  const onTrackPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    const wantsMove = (props.trackClick ?? 'none') === 'move-nearest' && thumbs.length > 0;\n    if (!props.onAddThumb && !wantsMove) return;\n    // If the event originated on a thumb, the thumb's own handler ran first; this is a track click.\n    if ((e.target as HTMLElement).closest(`.${s.thumb}`)) return;\n    e.preventDefault();\n    const track = trackRef.current;\n    if (!track) return;\n    const rect = track.getBoundingClientRect();\n    const f = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n    let v = fractionToValue(f);\n    v = snap(v, step, min);\n    v = clamp(v, min, max);\n    if (stops.length > 0) v = attract(v, stops, (STOP_SNAP_PX / rect.width) * (max - min));\n\n    if (props.onAddThumb) {\n      const created = props.onAddThumb(v);\n      if (!created) return;\n      const next = [...thumbs.map(t => ({ ...t })), created] as T[];\n      onInput(next);\n      onChange?.(next);\n      return;\n    }\n\n    let index = 0;\n    for (let i = 1; i < thumbs.length; i++) {\n      if (Math.abs(thumbs[i].value - v) < Math.abs(thumbs[index].value - v)) index = i;\n    }\n    const next = thumbs.map(t => ({ ...t })) as T[];\n    const [bLo, bHi] = resolveBounds(next[index], { thumbs: next, index }, min, max);\n    let moved = clamp(v, bLo, bHi);\n    if (constraint === 'ordered') moved = clampOrdered(moved, next, index, min, max, step);\n    next[index] = { ...next[index], value: moved };\n    onInput(next);\n    beginThumbDrag(index, next);\n  };\n\n  const onThumbKeyDown = (index: number) => (e: ReactKeyboardEvent) => {\n    const stepSize = defaultStep(step, min, max);\n    let delta = 0;\n    // With stops, a keystroke moves by whole stops rather than by value.\n    let stopDelta = 0;\n    let snapTo: 'home' | 'end' | null = null;\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        delta = e.shiftKey ? stepSize * 10 : stepSize;\n        stopDelta = e.shiftKey ? 10 : 1;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        delta = e.shiftKey ? -stepSize * 10 : -stepSize;\n        stopDelta = e.shiftKey ? -10 : -1;\n        break;\n      case 'PageUp':\n        delta = stepSize * 10;\n        stopDelta = 10;\n        break;\n      case 'PageDown':\n        delta = -stepSize * 10;\n        stopDelta = -10;\n        break;\n      case 'Home':\n        snapTo = 'home';\n        break;\n      case 'End':\n        snapTo = 'end';\n        break;\n      default:\n        return;\n    }\n\n    e.preventDefault();\n    const next = thumbs.map(t => ({ ...t }));\n    const [bLo, bHi] = resolveBounds(next[index], { thumbs: next, index }, min, max);\n    const lo = Math.max(min, bLo);\n    const hi = Math.min(max, bHi);\n    let v: number;\n    if (snapTo === 'home') v = lo;\n    else if (snapTo === 'end') v = hi;\n    else if (stops.length > 0) {\n      v = stepStops(stops, next[index].value, stopDelta > 0 ? 1 : -1, Math.abs(stopDelta));\n    } else {\n      v = snap(next[index].value + delta, step, min);\n    }\n    v = clamp(v, lo, hi);\n    if (constraint === 'ordered') v = clampOrdered(v, next, index, lo, hi, step);\n    next[index] = { ...next[index], value: v };\n    onInput(next);\n    onChange?.(next);\n  };\n\n  const placement = props.readoutPlacement ?? 'none';\n  const renderReadout = props.renderReadout;\n\n  return (\n    <div\n      className={className ? `${s.root} ${className}` : s.root}\n      style={trackHeight !== undefined ? ({ ['--rp-track-height' as string]: `${trackHeight}px` } as CSSProperties) : undefined}\n    >\n      <div className={s.row}>\n      <div className={s.track} ref={trackRef} onPointerDown={onTrackPointerDown}>\n        {props.renderTrack && (\n          <div className={s.trackInner}>\n            {props.renderTrack({\n              trackWidth: trackRef.current?.getBoundingClientRect().width ?? 0,\n              valueToFraction,\n            })}\n          </div>\n        )}\n        {(props.showStops ?? true) && stops.length > 0 && (\n          <div className={s.ticks} data-slider-ticks aria-hidden=\"true\">\n            {stops.map(v => {\n              const f = valueToFraction(v);\n              return (\n                <span\n                  key={v}\n                  className={s.tick}\n                  data-slider-tick\n                  data-fraction={String(f)}\n                  style={{ left: `${f * 100}%` }}\n                />\n              );\n            })}\n          </div>\n        )}\n        {thumbs.map((thumb, i) => {\n          const isNotched = thumb.shape === 'notched';\n          const customRender = typeof thumb.shape === 'object' && thumb.shape !== null ? thumb.shape.render : null;\n          const cls = `${s.thumb}${isNotched ? ` ${s.notched}` : ''}`;\n          return (\n            <div\n              key={i}\n              role=\"slider\"\n              tabIndex={0}\n              aria-orientation=\"horizontal\"\n              aria-valuemin={min}\n              aria-valuemax={max}\n              aria-valuenow={thumb.value}\n              aria-valuetext={thumb.valueText}\n              aria-label={[ariaLabel, thumb.label].filter(Boolean).join(' ') || undefined}\n              className={cls}\n              style={{ left: `${valueToFraction(thumb.value) * 100}%` }}\n              onPointerDown={onThumbPointerDown(i)}\n              onKeyDown={onThumbKeyDown(i)}\n              onContextMenu={onThumbContextMenu(i)}\n            >\n              {customRender ? customRender({ width: 14, height: 24, isActive: false }) : (thumb.label ?? '')}\n            </div>\n          );\n        })}\n      </div>\n      {placement === 'inline-after' && (\n        <span data-readout=\"inline\" className={s.readoutInline}>\n          {thumbs.map((t, i) => (\n            <span key={i}>{i > 0 ? ' / ' : ''}{renderReadout ? renderReadout(t, i) : defaultReadout(t)}</span>\n          ))}\n        </span>\n      )}\n      </div>\n      {placement === 'below-thumb' && (\n        <div className={s.readoutsBelow}>\n          {thumbs.map((t, i) => (\n            <span\n              key={i}\n              data-readout=\"below\"\n              className={s.readoutBelow}\n              style={{ left: `${valueToFraction(t.value) * 100}%` }}\n            >\n              {renderReadout ? renderReadout(t, i) : defaultReadout(t)}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"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/icons-CdLHgzV8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons-CdLHgzV8.js","names":[],"sources":["../../src/icons/index.tsx"],"sourcesContent":["import { Icon, type IconProps } from './Icon';\n\nexport { Icon } from './Icon';\nexport type { IconProps } from './Icon';\nexport { ICON_PATHS } from './paths';\nexport type { IconName } from './paths';\n\n// Tool glyphs live in @weasel-js/core because core needs them for\n// `Tool.presentation.icon` defaults and cannot depend on this package.\n// Re-exported here so consumers have one import site for the whole set.\nexport {\n  SelectIcon, LassoIcon, RectIcon, EllipseIcon, ImageIcon, EyedropperIcon,\n  LineIcon, ArrowIcon, PolygonIcon, StarIcon, PencilIcon, TextIcon, PenIcon, HandIcon,\n  UnknownIcon,\n} from '@weasel-js/core';\n\nexport const CloneIcon = (p: IconProps) => <Icon name=\"clone\" {...p} />;\nexport const ResetIcon = (p: IconProps) => <Icon name=\"reset\" {...p} />;\nexport const CloseIcon = (p: IconProps) => <Icon name=\"close\" {...p} />;\nexport const ExportIcon = (p: IconProps) => <Icon name=\"export\" {...p} />;\nexport const ZoomInIcon = (p: IconProps) => <Icon name=\"zoomIn\" {...p} />;\nexport const PanIcon = (p: IconProps) => <Icon name=\"pan\" {...p} />;\nexport const AddIcon = (p: IconProps) => <Icon name=\"add\" {...p} />;\nexport const RemoveIcon = (p: IconProps) => <Icon name=\"remove\" {...p} />;\nexport const DeleteIcon = (p: IconProps) => <Icon name=\"delete\" {...p} />;\nexport const SortIcon = (p: IconProps) => <Icon name=\"sort\" {...p} />;\nexport const UndoIcon = (p: IconProps) => <Icon name=\"undo\" {...p} />;\nexport const RedoIcon = (p: IconProps) => <Icon name=\"redo\" {...p} />;\nexport const ZoomOutIcon = (p: IconProps) => <Icon name=\"zoomOut\" {...p} />;\nexport const FitIcon = (p: IconProps) => <Icon name=\"fit\" {...p} />;\nexport const SnapshotIcon = (p: IconProps) => <Icon name=\"snapshot\" {...p} />;\nexport const PlayIcon = (p: IconProps) => <Icon name=\"play\" {...p} />;\nexport const PauseIcon = (p: IconProps) => <Icon name=\"pause\" {...p} />;\nexport const StopIcon = (p: IconProps) => <Icon name=\"stop\" {...p} />;\nexport const StepIcon = (p: IconProps) => <Icon name=\"step\" {...p} />;\nexport const CrosshairIcon = (p: IconProps) => <Icon name=\"crosshair\" {...p} />;\nexport const FullscreenIcon = (p: IconProps) => <Icon name=\"fullscreen\" {...p} />;\nexport const CompareIcon = (p: IconProps) => <Icon name=\"compare\" {...p} />;\nexport const FilterIcon = (p: IconProps) => <Icon name=\"filter\" {...p} />;\nexport const SearchIcon = (p: IconProps) => <Icon name=\"search\" {...p} />;\nexport const LoupeIcon = (p: IconProps) => <Icon name=\"loupe\" {...p} />;\nexport const LayersIcon = (p: IconProps) => <Icon name=\"layers\" {...p} />;\nexport const LockIcon = (p: IconProps) => <Icon name=\"lock\" {...p} />;\nexport const UnlockIcon = (p: IconProps) => <Icon name=\"unlock\" {...p} />;\nexport const VisibleIcon = (p: IconProps) => <Icon name=\"visible\" {...p} />;\nexport const HiddenIcon = (p: IconProps) => <Icon name=\"hidden\" {...p} />;\nexport const PinIcon = (p: IconProps) => <Icon name=\"pin\" {...p} />;\nexport const LinkIcon = (p: IconProps) => <Icon name=\"link\" {...p} />;\nexport const CollapseIcon = (p: IconProps) => <Icon name=\"collapse\" {...p} />;\nexport const ExpandIcon = (p: IconProps) => <Icon name=\"expand\" {...p} />;\nexport const ChevronIcon = (p: IconProps) => <Icon name=\"chevron\" {...p} />;\nexport const TuneIcon = (p: IconProps) => <Icon name=\"tune\" {...p} />;\nexport const GridIcon = (p: IconProps) => <Icon name=\"grid\" {...p} />;\nexport const SnapIcon = (p: IconProps) => <Icon name=\"snap\" {...p} />;\nexport const MeasureIcon = (p: IconProps) => <Icon name=\"measure\" {...p} />;\nexport const RandomizeIcon = (p: IconProps) => <Icon name=\"randomize\" {...p} />;\nexport const RefreshIcon = (p: IconProps) => <Icon name=\"refresh\" {...p} />;\nexport const InfoIcon = (p: IconProps) => <Icon name=\"info\" {...p} />;\nexport const WarningIcon = (p: IconProps) => <Icon name=\"warning\" {...p} />;\nexport const ErrorIcon = (p: IconProps) => <Icon name=\"error\" {...p} />;\nexport const BusyIcon = (p: IconProps) => <Icon name=\"busy\" {...p} />;\n"],"mappings":"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"}