@weasel-js/ui 1.7.1 → 1.7.2

package/dist/chunks/{GradientEditor-DypXzMc-.js.map → GradientEditor-DD2OjQtn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GradientEditor-DypXzMc-.js","names":["s","_Fragment","_Fragment","s","ColorField","ToggleBar","handleOverlay_module_default","DragPoint","Guide","isMeshPaint","MeshHandles","DEFAULT_HATCH","paintGradientTrack","opts","stops","i","samples","t","gradient","ctx","baseGradient","layers","activeRange","low","high","h","hatch","stripe","dimColor","dimOverlay","wL","wR","style","GradientEditor_module_default","SPACES","MIN_STOPS","GradientEditor","props","kind","value","space","entry","usePaintKind","kinds","useGradientKinds","svg","nativeSvgKind","spaces","nativeSvgSpace","item","switchKind","converted","switchGradientKind","next","onChange","className","kindSwitch","renderBody","spaceBar","spaceSwitch","Editor","Fragment","isGradientFill","StopsBody","MeshEditor","withStops","thumbs","stop","applyThumbs","setStopColor","index","ordered","a","b","Slider","onInput","at","sampleGradientStops","hex","GradientHandles","HandleOverlay","renderForKind","toScreen","toLocal","emit","phase","from","to","HANDLE_RADIUS","p","center","edge","screenRadius","local","radius","MIN_RADIUS","gradientGeometry","tip","angle","SceneGradientHandles","frame","useNodeOverlayFrame","scene","containerRef","nodeId","edit","useOngoingAction","slot","paint","paintOf","dispatch","normalized","fillToBoundsFrame","common","fillInPoseFrame","isMeshGradientFill","resolved","data"],"sources":["../../src/paintGradientTrack.tsx","../../src/components/GradientEditor/GradientEditor.module.css","../../src/components/GradientEditor/GradientEditor.tsx","../../src/components/GradientEditor/GradientHandles.tsx","../../src/components/GradientEditor/SceneGradientHandles.tsx"],"sourcesContent":["import type { ReactNode, CSSProperties } from 'react';\nimport type { TrackCtx } from './components/Slider';\n\n/**\n * Options for {@link paintGradientTrack}.\n *\n * `gradient` maps a normalized position along the slider's value span (0 to\n * 1) to a CSS color; `samples` is how many stops the resulting\n * linear-gradient uses. The ramp is laid on the same span as the thumbs, so a\n * thumb at 0.3 sits over `gradient(0.3)`; any track beyond the span takes the\n * end colors.\n * `activeRange`, given in the slider's own value units, keeps that span at\n * full strength and dims + hatches the rest.\n */\nexport type GradientTrackOpts = {\n  gradient: (t: number) => string;\n  samples?: number;\n  activeRange?: [number, number];\n  hatch?: {\n    angleDeg?: number;\n    stripe?: number;\n    gap?: number;\n    dim?: number;\n  };\n};\n\nconst DEFAULT_HATCH = { angleDeg: 135, stripe: 2, gap: 4, dim: 75 };\n\n/**\n * Builds a `Slider` `renderTrack` function that paints the track as a\n * sampled color gradient, optionally dimming and hatching the portions\n * outside an active range.\n */\nexport function paintGradientTrack(opts: GradientTrackOpts): (ctx: TrackCtx) => ReactNode {\n  const { gradient, samples = 16, activeRange, hatch } = opts;\n\n  return (ctx: TrackCtx) => {\n    const stops: string[] = [];\n    for (let i = 0; i <= samples; i++) {\n      const t = i / samples;\n      stops.push(`${gradient(t)} ${ctx.fractionToPosition(t)}`);\n    }\n    const baseGradient = `linear-gradient(to right, ${stops.join(', ')})`;\n\n    const layers: string[] = [];\n    if (activeRange) {\n      const low = ctx.valueToFraction(activeRange[0]);\n      const high = ctx.valueToFraction(activeRange[1]);\n      const h = { ...DEFAULT_HATCH, ...hatch };\n      const stripe = `repeating-linear-gradient(${h.angleDeg}deg, transparent 0 ${h.stripe}px, var(--wzl-surface) ${h.stripe}px ${h.stripe + h.gap}px)`;\n      const dimColor = `color-mix(in srgb, var(--wzl-surface) ${h.dim}%, transparent)`;\n      const dimOverlay = `linear-gradient(${dimColor}, ${dimColor})`;\n\n      if (low > 0) {\n        const wL = ctx.fractionToPosition(low);\n        layers.push(`${dimOverlay} left 0 / ${wL} 100% no-repeat`);\n        layers.push(`${stripe} left 0 / ${wL} 100% no-repeat`);\n      }\n      if (high < 1) {\n        const wR = `calc(100% - ${ctx.fractionToPosition(high)})`;\n        layers.push(`${dimOverlay} right 0 / ${wR} 100% no-repeat`);\n        layers.push(`${stripe} right 0 / ${wR} 100% no-repeat`);\n      }\n    }\n    layers.push(baseGradient);\n\n    const style: CSSProperties = {\n      position: 'absolute',\n      inset: 0,\n      background: layers.join(', '),\n    };\n    return <div style={style} />;\n  };\n}\n",".root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  min-inline-size: 0;\n}\n\n.swatches {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--wzl-space-3);\n}\n\n/* Each stop's opacity slider would otherwise stretch the row to a width no\n * properties panel has; the chip stays legible, the slider yields. */\n.swatch {\n  flex: 0 1 auto;\n  min-inline-size: 0;\n}\n\n.noEditor {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n","import { type ReactElement, type ReactNode } from 'react';\nimport {\n  isGradientFill,\n  sampleGradientStops,\n  switchGradientKind,\n  useGradientKinds,\n  usePaintKind,\n  type ColorSpace,\n  type FillStyle,\n  type GradStop,\n  type GradientFill,\n  type PaintKind,\n} from '@weasel-js/core';\nimport { nativeSvgKind, nativeSvgSpace } from '@weasel-js/svg';\nimport { Slider, type Thumb } from '../Slider';\nimport { ColorField } from '../ColorField';\nimport { MeshEditor, isMeshPaint } from '../MeshEditor';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport { paintGradientTrack } from '../../paintGradientTrack';\nimport s from './GradientEditor.module.css';\n\nconst SPACES: readonly ToggleBarItem<ColorSpace>[] = [\n  { value: 'rgb', label: 'sRGB' },\n  { value: 'oklab', label: 'OKLab' },\n  { value: 'oklch', label: 'OKLCh' },\n];\n\n/** Fewer than two stops is not a gradient any renderer can ramp between. */\nconst MIN_STOPS = 2;\n\n/**\n * Props for {@link GradientEditor}. `onInput` fires throughout a gesture and\n * `onChange` once at its end.\n */\nexport interface GradientEditorProps {\n  /** The gradient being edited: a paint of any gradient kind — one that\n   *  `listGradientKinds` returns. */\n  value: FillStyle;\n  /**\n   * Live value during a gesture — a stop drag, a color-picker scrub. Wire\n   * it for preview; it fires many times per gesture and must not be\n   * written to history.\n   */\n  onInput?: (next: FillStyle) => void;\n  /** Committed value: one call per completed gesture. Pair with an\n   *  undoable write. */\n  onChange: (next: FillStyle) => void;\n  /** Show the kind switch — every registered gradient kind. Default true;\n   *  turn it off when the surrounding UI already owns the kind. */\n  kindSwitch?: boolean;\n  /** Show the sRGB / OKLab / OKLCh switch, which writes `interpolate`.\n   *  Default true. */\n  spaceSwitch?: boolean;\n  /**\n   * Offer only what an SVG file carries natively: the linear and radial\n   * gradients, which SVG has elements for, blended in sRGB, the only space\n   * every SVG renderer honors. A conic or mesh gradient exports as a weasel\n   * element that other renderers paint as one flat color, and an OKLab or\n   * OKLCh blend exports as an attribute they ignore. A value already outside\n   * that set keeps its own kind and space on offer, so it can be switched\n   * back. Default false.\n   */\n  svg?: boolean;\n  className?: string;\n}\n\ntype StopThumb = Thumb & { color: string };\n\n/**\n * Editor for a gradient's kind and colors: the stop list of a linear, radial\n * or conic gradient, a mesh's corner colors, or a registered kind's own\n * `Editor`. Switching kind goes through `switchGradientKind`, so the colors\n * carry across.\n *\n * Geometry (`from`/`to`, `center`, `radius`, `angle`) is deliberately not\n * edited here — on a canvas that belongs on the artwork, via\n * `<GradientHandles>`. This component owns the parts with no spatial\n * meaning, so it composes into a properties panel at any width.\n *\n * Stops are addressed by their position in `value.stops`, which is never\n * reordered — dragging one stop past another leaves both indices alone, so\n * a drag can cross a neighbour without the two swapping under the pointer.\n * Rendering sorts a copy.\n */\nexport function GradientEditor(props: GradientEditorProps): ReactElement {\n  const { value, onInput, onChange, kindSwitch = true, spaceSwitch = true, svg = false, className } = props;\n  const kind: PaintKind = value.fill ?? 'solid';\n  const space: ColorSpace = (value as { interpolate?: ColorSpace }).interpolate ?? 'rgb';\n\n  const entry = usePaintKind(kind);\n  const kinds: readonly ToggleBarItem<PaintKind>[] = useGradientKinds()\n    .filter((entry) => !svg || nativeSvgKind(entry.id) || entry.id === kind)\n    .map((entry) => ({ value: entry.id, label: entry.label }));\n  const spaces = SPACES.filter((item) => !svg || nativeSvgSpace(item.value) || item.value === space);\n\n  const switchKind = (next: PaintKind): void => {\n    const converted = switchGradientKind(value, next);\n    if (converted && converted !== value) onChange(converted);\n  };\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      {kindSwitch && (\n        <ToggleBar<PaintKind>\n          items={kinds}\n          value={kind}\n          size=\"sm\"\n          ariaLabel=\"Gradient kind\"\n          onChange={(next) => next && switchKind(next)}\n        />\n      )}\n\n      {renderBody()}\n    </div>\n  );\n\n  function renderBody(): ReactElement {\n    const spaceBar = spaceSwitch && spaces.length > 1 && (\n      <ToggleBar<ColorSpace>\n        items={spaces}\n        value={space}\n        size=\"sm\"\n        ariaLabel=\"Blend space\"\n        onChange={(next) => next && onChange({ ...value, interpolate: next } as FillStyle)}\n      />\n    );\n    // A registered `Editor` wins even for a built-in id, as it does in `PaintInput`.\n    if (entry?.Editor) {\n      const Editor = entry.Editor;\n      return <><Editor value={value} onInput={onInput} onChange={onChange} />{spaceBar}</>;\n    }\n    if (isGradientFill(value)) {\n      return <StopsBody value={value} spaceBar={spaceBar} onInput={onInput} onChange={onChange} />;\n    }\n    if (isMeshPaint(value)) {\n      return <><MeshEditor value={value} spaceSwitch={false} onInput={onInput} onChange={onChange} />{spaceBar}</>;\n    }\n    return <div className={s.noEditor}>{entry?.label ?? kind}: no editor</div>;\n  }\n}\n\n/** The stop slider and swatch row of a linear, radial or conic gradient. */\nfunction StopsBody(props: {\n  value: GradientFill;\n  spaceBar: ReactNode;\n  onInput?: (next: FillStyle) => void;\n  onChange: (next: FillStyle) => void;\n}): ReactElement {\n  const { value, spaceBar, onInput, onChange } = props;\n  const stops = value.stops;\n  const space = value.interpolate ?? 'rgb';\n\n  const withStops = (next: GradStop[]): GradientFill => ({ ...value, stops: next });\n\n  const thumbs: StopThumb[] = stops.map((stop) => ({ value: stop.offset, color: stop.color }));\n\n  const applyThumbs = (next: StopThumb[]): GradStop[] =>\n    next.map((t) => ({ offset: t.value, color: t.color }));\n\n  const setStopColor = (index: number, color: string): GradStop[] =>\n    stops.map((stop, i) => (i === index ? { ...stop, color } : stop));\n\n  // Sorted view for the swatch row, carrying each stop's real index so a\n  // recolor writes back to the right entry.\n  const ordered = stops\n    .map((stop, index) => ({ stop, index }))\n    .sort((a, b) => a.stop.offset - b.stop.offset);\n\n  return (\n    <>\n      <Slider<StopThumb>\n        min={0}\n        max={1}\n        step={0.005}\n        constraint=\"free\"\n        thumbs={thumbs}\n        ariaLabel=\"Gradient stops\"\n        readoutPlacement=\"none\"\n        onInput={(next) => onInput?.(withStops(applyThumbs(next)))}\n        onChange={(next) => onChange(withStops(applyThumbs(next)))}\n        onAddThumb={(at) => ({ value: at, color: sampleGradientStops(stops, at, space) })}\n        onRemoveThumb={() => stops.length > MIN_STOPS}\n        renderTrack={paintGradientTrack({\n          gradient: (t) => sampleGradientStops(stops, t, space),\n          // The track lerps between samples in sRGB whatever the gradient does,\n          // so a hue arc needs more of them to not read as a straight line.\n          samples: space === 'rgb' ? 32 : 64,\n        })}\n      />\n\n      {spaceBar}\n\n      <div className={s.swatches}>\n        {ordered.map(({ stop, index }) => (\n          <ColorField\n            key={index}\n            value={stop.color}\n            alpha\n            aria-label={`Stop ${index + 1} at ${Math.round(stop.offset * 100)}%`}\n            className={s.swatch}\n            onInput={(hex) => onInput?.(withStops(setStopColor(index, hex)))}\n            onChange={(hex) => onChange(withStops(setStopColor(index, hex)))}\n          />\n        ))}\n      </div>\n    </>\n  );\n}\n","import { type ReactElement, type ReactNode } from 'react';\nimport { gradientGeometry, type GradientFill } from '@weasel-js/core';\nimport { DragPoint, Guide, HandleOverlay, type EditPhase, type OverlayPoint as Point } from './handleOverlay';\nimport s from './handleOverlay.module.css';\n\n/**\n * Props for {@link GradientHandles}. `onInput` fires throughout a drag and\n * `onChange` once at its end.\n */\nexport interface GradientHandlesProps {\n  /**\n   * The gradient whose geometry these handles move, in a **resolved,\n   * isotropic** frame — one where `radius` is a length in the same units as\n   * `center.x` and a right angle is a right angle.\n   *\n   * A `units: 'bounds'` gradient is not such a frame: `x` and `y` are\n   * fractions of two different lengths, so a circle there is an ellipse on\n   * screen and polar math silently mixes scales. Resolve it first with\n   * `fillInPoseFrame(fill, box)` and convert edits back with\n   * `fillToBoundsFrame(next, box)`.\n   */\n  value: GradientFill;\n  /**\n   * Gradient space → overlay pixels. For a `units: 'local'` gradient this\n   * is the node's local-to-screen transform; for `'world'`, the view.\n   */\n  toScreen: (p: Point) => Point;\n  /** Overlay pixels → gradient space. Must invert `toScreen`. */\n  toLocal: (p: Point) => Point;\n  /** Live during a drag — wire for preview, do not write to history. */\n  onInput?: (next: GradientFill) => void;\n  /** Committed at drag end: one call per gesture. */\n  onChange: (next: GradientFill) => void;\n  /** Overlay size in CSS pixels. */\n  width: number;\n  height: number;\n  className?: string;\n}\n\n/**\n * Direct-manipulation handles for a gradient's geometry, drawn as an SVG\n * overlay above a canvas: endpoints for linear, center and radius for\n * radial, center and angle arm for conic.\n *\n * Positioning is entirely the consumer's `toScreen` / `toLocal` — this\n * component never sees a view or a scene node, so the same handles serve a\n * node-local gradient, a world-space one, and a plain unzoomed preview.\n *\n * The overlay ignores pointer events except on the handles themselves, so\n * it can sit over live canvas content without swallowing tool input.\n */\nexport function GradientHandles(props: GradientHandlesProps): ReactElement {\n  const { value, toScreen, toLocal, onInput, onChange, width, height, className } = props;\n\n  return (\n    <HandleOverlay width={width} height={height} className={className}>\n      {renderForKind(value, toScreen, toLocal, onInput, onChange)}\n    </HandleOverlay>\n  );\n}\n\nfunction renderForKind(\n  value: GradientFill,\n  toScreen: (p: Point) => Point,\n  toLocal: (p: Point) => Point,\n  onInput: ((next: GradientFill) => void) | undefined,\n  onChange: (next: GradientFill) => void,\n): ReactNode {\n  const emit = (next: GradientFill, phase: EditPhase): void => {\n    if (phase === 'input') onInput?.(next);\n    else onChange(next);\n  };\n\n  if (value.fill === 'linear-gradient') {\n    const from = toScreen(value.from);\n    const to = toScreen(value.to);\n    return (\n      <>\n        <Guide x1={from.x} y1={from.y} x2={to.x} y2={to.y} />\n        <DragPoint\n          radius={HANDLE_RADIUS}\n          at={from}\n          label=\"Gradient start\"\n          onDrag={(p, phase) => emit({ ...value, from: toLocal(p) }, phase)}\n        />\n        <DragPoint\n          radius={HANDLE_RADIUS}\n          at={to}\n          label=\"Gradient end\"\n          onDrag={(p, phase) => emit({ ...value, to: toLocal(p) }, phase)}\n        />\n      </>\n    );\n  }\n\n  if (value.fill === 'radial-gradient') {\n    const center = toScreen(value.center);\n    // The radius handle rides the +x axis of gradient space, so it stays on\n    // the drawn circle under a rotated or anisotropic transform.\n    const edge = toScreen({ x: value.center.x + value.radius, y: value.center.y });\n    const screenRadius = Math.hypot(edge.x - center.x, edge.y - center.y);\n    return (\n      <>\n        <circle className={s.guide} cx={center.x} cy={center.y} r={screenRadius} />\n        <DragPoint\n          radius={HANDLE_RADIUS}\n          at={center}\n          label=\"Gradient center\"\n          onDrag={(p, phase) => emit({ ...value, center: toLocal(p) }, phase)}\n        />\n        <DragPoint\n          radius={HANDLE_RADIUS}\n          at={edge}\n          label=\"Gradient radius\"\n          onDrag={(p, phase) => {\n            const local = toLocal(p);\n            const radius = Math.hypot(local.x - value.center.x, local.y - value.center.y);\n            emit({ ...value, radius: Math.max(MIN_RADIUS, radius) }, phase);\n          }}\n        />\n      </>\n    );\n  }\n\n  const center = toScreen(value.center);\n  const { radius } = gradientGeometry(value);\n  const tip = toScreen({\n    x: value.center.x + Math.cos(value.angle) * radius,\n    y: value.center.y + Math.sin(value.angle) * radius,\n  });\n  return (\n    <>\n      <Guide x1={center.x} y1={center.y} x2={tip.x} y2={tip.y} />\n      <DragPoint\n        radius={HANDLE_RADIUS}\n        at={center}\n        label=\"Gradient center\"\n        onDrag={(p, phase) => emit({ ...value, center: toLocal(p) }, phase)}\n      />\n      <DragPoint\n        radius={HANDLE_RADIUS}\n        at={tip}\n        label=\"Gradient angle\"\n        onDrag={(p, phase) => {\n          const local = toLocal(p);\n          const angle = Math.atan2(local.y - value.center.y, local.x - value.center.x);\n          emit({ ...value, angle }, phase);\n        }}\n      />\n    </>\n  );\n}\n\n/** A radius of zero divides by zero in the shader's `t`; keep it off the floor. */\nconst MIN_RADIUS = 1;\n\nconst HANDLE_RADIUS = 7;\n","import { type ReactElement, type RefObject } from 'react';\nimport {\n  fillInPoseFrame,\n  fillToBoundsFrame,\n  isGradientFill,\n  useNodeOverlayFrame,\n  useOngoingAction,\n  type FillStyle,\n  type GradientFill,\n  type RectPose,\n  type Scene,\n  type Stroke,\n  type View,\n} from '@weasel-js/core';\nimport { isMeshGradientFill, type MeshGradientFill } from '@weasel-js/core/mesh';\nimport { MeshHandles } from '../MeshEditor/MeshHandles';\nimport { GradientHandles } from './GradientHandles';\n\n/** The paint slots a node carries. Either may hold a gradient, and each has\n *  its own action, so the overlay is told which one it is editing. */\nexport type PaintSlot = 'fill' | 'stroke';\n\n/** What `SceneGradientHandles` reads off a node. Every field is optional, so\n *  any richer app data shape satisfies it. */\nexport interface PaintedNodeData {\n  fill?: FillStyle | null;\n  stroke?: Stroke | null;\n}\n\n/** Props for {@link SceneGradientHandles}. */\nexport interface SceneGradientHandlesProps<\n  TData extends PaintedNodeData,\n  TLayer extends string,\n  TPose extends RectPose,\n> {\n  scene: Scene<TData, TLayer, TPose>;\n  /** The element the overlay is positioned in. Must be the canvas's own box,\n   *  or the handles land somewhere other than the paint. */\n  containerRef: RefObject<HTMLElement | null>;\n  /** The node whose paint is being edited — usually the lone selected id. */\n  nodeId: string | null | undefined;\n  /** Which of the node's two paints these handles move. */\n  slot: PaintSlot;\n  /** Current viewport; a thunk is re-read per projection. See\n   *  `useNodeOverlayFrame`. */\n  view?: View | (() => View);\n  className?: string;\n}\n\n/**\n * Scene-aware paint handles: on-canvas geometry handles for the gradient in\n * one node's `fill` or `stroke` — `GradientHandles` for the three ramps,\n * `MeshHandles` for a mesh — committed through the `setFill` / `setStroke`\n * actions as a single undo entry per drag.\n *\n * Renders nothing unless the targeted slot holds a gradient or a mesh. The\n * node stores its gradient in `units: 'bounds'` — fractions of its own box, so the paint\n * survives pan, zoom and resize — which is not a frame polar math can work\n * in; the handles get it resolved onto the box and every edit is normalized\n * back on the way out.\n *\n * `slot` is a prop rather than state the kit keeps: an app that edits fill\n * and stroke separately already knows which one has focus.\n */\nexport function SceneGradientHandles<\n  TData extends PaintedNodeData,\n  TLayer extends string,\n  TPose extends RectPose,\n>(props: SceneGradientHandlesProps<TData, TLayer, TPose>): ReactElement | null {\n  const { scene, containerRef, nodeId, slot, view, className } = props;\n  const frame = useNodeOverlayFrame(scene, containerRef, nodeId, { view });\n  const edit = useOngoingAction(slot === 'fill' ? 'setFill' : 'setStroke');\n\n  const paint = frame ? paintOf(scene, nodeId, slot) : null;\n  if (!frame || !paint) return null;\n\n  const dispatch = (next: FillStyle, phase: 'input' | 'commit'): void => {\n    const normalized = fillToBoundsFrame(next, frame.box);\n    if (phase === 'commit') edit.commit({ paint: normalized });\n    else edit.input({ paint: normalized });\n  };\n  const common = {\n    toScreen: frame.toScreen,\n    toLocal: frame.toLocal,\n    width: frame.width,\n    height: frame.height,\n    className,\n    onInput: (next: FillStyle) => dispatch(next, 'input'),\n    onChange: (next: FillStyle) => dispatch(next, 'commit'),\n  };\n\n  if (isGradientFill(paint)) {\n    return <GradientHandles value={fillInPoseFrame(paint, frame.box) as GradientFill} {...common} />;\n  }\n  if (isMeshGradientFill(paint)) {\n    const resolved = fillInPoseFrame(paint, frame.box) as unknown as MeshGradientFill;\n    // Still in the bounds frame means the mesh kind has not loaded, and\n    // handles drawn now would sit in fractions of the box.\n    if (resolved.units === 'bounds') return null;\n    return <MeshHandles value={resolved} {...common} />;\n  }\n  return null;\n}\n\nfunction paintOf<TData extends PaintedNodeData, TLayer extends string, TPose extends RectPose>(\n  scene: Scene<TData, TLayer, TPose>,\n  nodeId: string | null | undefined,\n  slot: PaintSlot,\n): FillStyle | null | undefined {\n  if (nodeId == null) return undefined;\n  const data = (scene.nodes as ReadonlyMap<string, { data: TData }>).get(nodeId)?.data;\n  if (!data) return undefined;\n  return slot === 'fill' ? data.fill : data.stroke?.paint;\n}\n"],"mappings":"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"}
+{"version":3,"file":"GradientEditor-DD2OjQtn.js","names":["s","_Fragment","_Fragment","s","ColorField","ToggleBar","handleOverlay_module_default","DragPoint","Guide","isMeshPaint","MeshHandles","DEFAULT_HATCH","paintGradientTrack","opts","stops","i","samples","t","gradient","ctx","baseGradient","layers","activeRange","low","high","h","hatch","stripe","dimColor","dimOverlay","wL","wR","style","GradientEditor_module_default","SPACES","MIN_STOPS","GradientEditor","props","kind","value","space","entry","usePaintKind","kinds","useGradientKinds","svg","nativeSvgKind","spaces","nativeSvgSpace","item","switchKind","converted","switchGradientKind","next","onChange","className","kindSwitch","renderBody","spaceBar","spaceSwitch","Editor","Fragment","isGradientFill","StopsBody","MeshEditor","withStops","thumbs","stop","applyThumbs","setStopColor","index","ordered","a","b","Slider","onInput","at","sampleGradientStops","hex","GradientHandles","HandleOverlay","renderForKind","toScreen","toLocal","emit","phase","from","to","HANDLE_RADIUS","p","center","edge","screenRadius","local","radius","MIN_RADIUS","gradientGeometry","tip","angle","SceneGradientHandles","frame","useNodeOverlayFrame","scene","containerRef","nodeId","edit","useOngoingAction","slot","paint","paintOf","dispatch","normalized","fillToBoundsFrame","common","fillInPoseFrame","isMeshGradientFill","resolved","data"],"sources":["../../src/paintGradientTrack.tsx","../../src/components/GradientEditor/GradientEditor.module.css","../../src/components/GradientEditor/GradientEditor.tsx","../../src/components/GradientEditor/GradientHandles.tsx","../../src/components/GradientEditor/SceneGradientHandles.tsx"],"sourcesContent":["import type { ReactNode, CSSProperties } from 'react';\nimport type { TrackCtx } from './components/Slider';\n\n/**\n * Options for {@link paintGradientTrack}.\n *\n * `gradient` maps a normalized position along the slider's value span (0 to\n * 1) to a CSS color; `samples` is how many stops the resulting\n * linear-gradient uses. The ramp is laid on the same span as the thumbs, so a\n * thumb at 0.3 sits over `gradient(0.3)`; any track beyond the span takes the\n * end colors.\n * `activeRange`, given in the slider's own value units, keeps that span at\n * full strength and dims + hatches the rest.\n */\nexport type GradientTrackOpts = {\n  gradient: (t: number) => string;\n  samples?: number;\n  activeRange?: [number, number];\n  hatch?: {\n    angleDeg?: number;\n    stripe?: number;\n    gap?: number;\n    dim?: number;\n  };\n};\n\nconst DEFAULT_HATCH = { angleDeg: 135, stripe: 2, gap: 4, dim: 75 };\n\n/**\n * Builds a `Slider` `renderTrack` function that paints the track as a\n * sampled color gradient, optionally dimming and hatching the portions\n * outside an active range.\n */\nexport function paintGradientTrack(opts: GradientTrackOpts): (ctx: TrackCtx) => ReactNode {\n  const { gradient, samples = 16, activeRange, hatch } = opts;\n\n  return (ctx: TrackCtx) => {\n    const stops: string[] = [];\n    for (let i = 0; i <= samples; i++) {\n      const t = i / samples;\n      stops.push(`${gradient(t)} ${ctx.fractionToPosition(t)}`);\n    }\n    const baseGradient = `linear-gradient(to right, ${stops.join(', ')})`;\n\n    const layers: string[] = [];\n    if (activeRange) {\n      const low = ctx.valueToFraction(activeRange[0]);\n      const high = ctx.valueToFraction(activeRange[1]);\n      const h = { ...DEFAULT_HATCH, ...hatch };\n      const stripe = `repeating-linear-gradient(${h.angleDeg}deg, transparent 0 ${h.stripe}px, var(--wzl-surface) ${h.stripe}px ${h.stripe + h.gap}px)`;\n      const dimColor = `color-mix(in srgb, var(--wzl-surface) ${h.dim}%, transparent)`;\n      const dimOverlay = `linear-gradient(${dimColor}, ${dimColor})`;\n\n      if (low > 0) {\n        const wL = ctx.fractionToPosition(low);\n        layers.push(`${dimOverlay} left 0 / ${wL} 100% no-repeat`);\n        layers.push(`${stripe} left 0 / ${wL} 100% no-repeat`);\n      }\n      if (high < 1) {\n        const wR = `calc(100% - ${ctx.fractionToPosition(high)})`;\n        layers.push(`${dimOverlay} right 0 / ${wR} 100% no-repeat`);\n        layers.push(`${stripe} right 0 / ${wR} 100% no-repeat`);\n      }\n    }\n    layers.push(baseGradient);\n\n    const style: CSSProperties = {\n      position: 'absolute',\n      inset: 0,\n      background: layers.join(', '),\n    };\n    return <div style={style} />;\n  };\n}\n",".root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  min-inline-size: 0;\n}\n\n.swatches {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--wzl-space-3);\n}\n\n/* Each stop's opacity slider would otherwise stretch the row to a width no\n * properties panel has; the chip stays legible, the slider yields. */\n.swatch {\n  flex: 0 1 auto;\n  min-inline-size: 0;\n}\n\n.noEditor {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n","import { type ReactElement, type ReactNode } from 'react';\nimport {\n  isGradientFill,\n  sampleGradientStops,\n  switchGradientKind,\n  useGradientKinds,\n  usePaintKind,\n  type ColorSpace,\n  type FillStyle,\n  type GradStop,\n  type GradientFill,\n  type PaintKind,\n} from '@weasel-js/core';\nimport { nativeSvgKind, nativeSvgSpace } from '@weasel-js/svg';\nimport { Slider, type Thumb } from '../Slider';\nimport { ColorField } from '../ColorField';\nimport { MeshEditor, isMeshPaint } from '../MeshEditor';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport { paintGradientTrack } from '../../paintGradientTrack';\nimport s from './GradientEditor.module.css';\n\nconst SPACES: readonly ToggleBarItem<ColorSpace>[] = [\n  { value: 'rgb', label: 'sRGB' },\n  { value: 'oklab', label: 'OKLab' },\n  { value: 'oklch', label: 'OKLCh' },\n];\n\n/** Fewer than two stops is not a gradient any renderer can ramp between. */\nconst MIN_STOPS = 2;\n\n/**\n * Props for {@link GradientEditor}. `onInput` fires throughout a gesture and\n * `onChange` once at its end.\n */\nexport interface GradientEditorProps {\n  /** The gradient being edited: a paint of any gradient kind — one that\n   *  `listGradientKinds` returns. */\n  value: FillStyle;\n  /**\n   * Live value during a gesture — a stop drag, a color-picker scrub. Wire\n   * it for preview; it fires many times per gesture and must not be\n   * written to history.\n   */\n  onInput?: (next: FillStyle) => void;\n  /** Committed value: one call per completed gesture. Pair with an\n   *  undoable write. */\n  onChange: (next: FillStyle) => void;\n  /** Show the kind switch — every registered gradient kind. Default true;\n   *  turn it off when the surrounding UI already owns the kind. */\n  kindSwitch?: boolean;\n  /** Show the sRGB / OKLab / OKLCh switch, which writes `interpolate`.\n   *  Default true. */\n  spaceSwitch?: boolean;\n  /**\n   * Offer only what an SVG file carries natively: the linear and radial\n   * gradients, which SVG has elements for, blended in sRGB, the only space\n   * every SVG renderer honors. A conic or mesh gradient exports as a weasel\n   * element that other renderers paint as one flat color, and an OKLab or\n   * OKLCh blend exports as an attribute they ignore. A value already outside\n   * that set keeps its own kind and space on offer, so it can be switched\n   * back. Default false.\n   */\n  svg?: boolean;\n  className?: string;\n}\n\ntype StopThumb = Thumb & { color: string };\n\n/**\n * Editor for a gradient's kind and colors: the stop list of a linear, radial\n * or conic gradient, a mesh's corner colors, or a registered kind's own\n * `Editor`. Switching kind goes through `switchGradientKind`, so the colors\n * carry across.\n *\n * Geometry (`from`/`to`, `center`, `radius`, `angle`) is deliberately not\n * edited here — on a canvas that belongs on the artwork, via\n * `<GradientHandles>`. This component owns the parts with no spatial\n * meaning, so it composes into a properties panel at any width.\n *\n * Stops are addressed by their position in `value.stops`, which is never\n * reordered — dragging one stop past another leaves both indices alone, so\n * a drag can cross a neighbour without the two swapping under the pointer.\n * Rendering sorts a copy.\n */\nexport function GradientEditor(props: GradientEditorProps): ReactElement {\n  const { value, onInput, onChange, kindSwitch = true, spaceSwitch = true, svg = false, className } = props;\n  const kind: PaintKind = value.fill ?? 'solid';\n  const space: ColorSpace = (value as { interpolate?: ColorSpace }).interpolate ?? 'rgb';\n\n  const entry = usePaintKind(kind);\n  const kinds: readonly ToggleBarItem<PaintKind>[] = useGradientKinds()\n    .filter((entry) => !svg || nativeSvgKind(entry.id) || entry.id === kind)\n    .map((entry) => ({ value: entry.id, label: entry.label }));\n  const spaces = SPACES.filter((item) => !svg || nativeSvgSpace(item.value) || item.value === space);\n\n  const switchKind = (next: PaintKind): void => {\n    const converted = switchGradientKind(value, next);\n    if (converted && converted !== value) onChange(converted);\n  };\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      {kindSwitch && (\n        <ToggleBar<PaintKind>\n          items={kinds}\n          value={kind}\n          size=\"sm\"\n          ariaLabel=\"Gradient kind\"\n          onChange={(next) => next && switchKind(next)}\n        />\n      )}\n\n      {renderBody()}\n    </div>\n  );\n\n  function renderBody(): ReactElement {\n    const spaceBar = spaceSwitch && spaces.length > 1 && (\n      <ToggleBar<ColorSpace>\n        items={spaces}\n        value={space}\n        size=\"sm\"\n        ariaLabel=\"Blend space\"\n        onChange={(next) => next && onChange({ ...value, interpolate: next } as FillStyle)}\n      />\n    );\n    // A registered `Editor` wins even for a built-in id, as it does in `PaintInput`.\n    if (entry?.Editor) {\n      const Editor = entry.Editor;\n      return <><Editor value={value} onInput={onInput} onChange={onChange} />{spaceBar}</>;\n    }\n    if (isGradientFill(value)) {\n      return <StopsBody value={value} spaceBar={spaceBar} onInput={onInput} onChange={onChange} />;\n    }\n    if (isMeshPaint(value)) {\n      return <><MeshEditor value={value} spaceSwitch={false} onInput={onInput} onChange={onChange} />{spaceBar}</>;\n    }\n    return <div className={s.noEditor}>{entry?.label ?? kind}: no editor</div>;\n  }\n}\n\n/** The stop slider and swatch row of a linear, radial or conic gradient. */\nfunction StopsBody(props: {\n  value: GradientFill;\n  spaceBar: ReactNode;\n  onInput?: (next: FillStyle) => void;\n  onChange: (next: FillStyle) => void;\n}): ReactElement {\n  const { value, spaceBar, onInput, onChange } = props;\n  const stops = value.stops;\n  const space = value.interpolate ?? 'rgb';\n\n  const withStops = (next: GradStop[]): GradientFill => ({ ...value, stops: next });\n\n  const thumbs: StopThumb[] = stops.map((stop) => ({ value: stop.offset, color: stop.color }));\n\n  const applyThumbs = (next: StopThumb[]): GradStop[] =>\n    next.map((t) => ({ offset: t.value, color: t.color }));\n\n  const setStopColor = (index: number, color: string): GradStop[] =>\n    stops.map((stop, i) => (i === index ? { ...stop, color } : stop));\n\n  // Sorted view for the swatch row, carrying each stop's real index so a\n  // recolor writes back to the right entry.\n  const ordered = stops\n    .map((stop, index) => ({ stop, index }))\n    .sort((a, b) => a.stop.offset - b.stop.offset);\n\n  return (\n    <>\n      <Slider<StopThumb>\n        min={0}\n        max={1}\n        step={0.005}\n        constraint=\"free\"\n        thumbs={thumbs}\n        ariaLabel=\"Gradient stops\"\n        readoutPlacement=\"none\"\n        onInput={(next) => onInput?.(withStops(applyThumbs(next)))}\n        onChange={(next) => onChange(withStops(applyThumbs(next)))}\n        onAddThumb={(at) => ({ value: at, color: sampleGradientStops(stops, at, space) })}\n        onRemoveThumb={() => stops.length > MIN_STOPS}\n        renderTrack={paintGradientTrack({\n          gradient: (t) => sampleGradientStops(stops, t, space),\n          // The track lerps between samples in sRGB whatever the gradient does,\n          // so a hue arc needs more of them to not read as a straight line.\n          samples: space === 'rgb' ? 32 : 64,\n        })}\n      />\n\n      {spaceBar}\n\n      <div className={s.swatches}>\n        {ordered.map(({ stop, index }) => (\n          <ColorField\n            key={index}\n            value={stop.color}\n            alpha\n            aria-label={`Stop ${index + 1} at ${Math.round(stop.offset * 100)}%`}\n            className={s.swatch}\n            onInput={(hex) => onInput?.(withStops(setStopColor(index, hex)))}\n            onChange={(hex) => onChange(withStops(setStopColor(index, hex)))}\n          />\n        ))}\n      </div>\n    </>\n  );\n}\n","import { type ReactElement, type ReactNode } from 'react';\nimport { gradientGeometry, type GradientFill } from '@weasel-js/core';\nimport { DragPoint, Guide, HandleOverlay, type EditPhase, type OverlayPoint as Point } from './handleOverlay';\nimport s from './handleOverlay.module.css';\n\n/**\n * Props for {@link GradientHandles}. `onInput` fires throughout a drag and\n * `onChange` once at its end.\n */\nexport interface GradientHandlesProps {\n  /**\n   * The gradient whose geometry these handles move, in a **resolved,\n   * isotropic** frame — one where `radius` is a length in the same units as\n   * `center.x` and a right angle is a right angle.\n   *\n   * A `units: 'bounds'` gradient is not such a frame: `x` and `y` are\n   * fractions of two different lengths, so a circle there is an ellipse on\n   * screen and polar math silently mixes scales. Resolve it first with\n   * `fillInPoseFrame(fill, box)` and convert edits back with\n   * `fillToBoundsFrame(next, box)`.\n   */\n  value: GradientFill;\n  /**\n   * Gradient space → overlay pixels. For a `units: 'local'` gradient this\n   * is the node's local-to-screen transform; for `'world'`, the view.\n   */\n  toScreen: (p: Point) => Point;\n  /** Overlay pixels → gradient space. Must invert `toScreen`. */\n  toLocal: (p: Point) => Point;\n  /** Live during a drag — wire for preview, do not write to history. */\n  onInput?: (next: GradientFill) => void;\n  /** Committed at drag end: one call per gesture. */\n  onChange: (next: GradientFill) => void;\n  /** Overlay size in CSS pixels. */\n  width: number;\n  height: number;\n  className?: string;\n}\n\n/**\n * Direct-manipulation handles for a gradient's geometry, drawn as an SVG\n * overlay above a canvas: endpoints for linear, center and radius for\n * radial, center and angle arm for conic.\n *\n * Positioning is entirely the consumer's `toScreen` / `toLocal` — this\n * component never sees a view or a scene node, so the same handles serve a\n * node-local gradient, a world-space one, and a plain unzoomed preview.\n *\n * The overlay ignores pointer events except on the handles themselves, so\n * it can sit over live canvas content without swallowing tool input.\n */\nexport function GradientHandles(props: GradientHandlesProps): ReactElement {\n  const { value, toScreen, toLocal, onInput, onChange, width, height, className } = props;\n\n  return (\n    <HandleOverlay width={width} height={height} className={className}>\n      {renderForKind(value, toScreen, toLocal, onInput, onChange)}\n    </HandleOverlay>\n  );\n}\n\nfunction renderForKind(\n  value: GradientFill,\n  toScreen: (p: Point) => Point,\n  toLocal: (p: Point) => Point,\n  onInput: ((next: GradientFill) => void) | undefined,\n  onChange: (next: GradientFill) => void,\n): ReactNode {\n  const emit = (next: GradientFill, phase: EditPhase): void => {\n    if (phase === 'input') onInput?.(next);\n    else onChange(next);\n  };\n\n  if (value.fill === 'linear-gradient') {\n    const from = toScreen(value.from);\n    const to = toScreen(value.to);\n    return (\n      <>\n        <Guide x1={from.x} y1={from.y} x2={to.x} y2={to.y} />\n        <DragPoint\n          radius={HANDLE_RADIUS}\n          at={from}\n          label=\"Gradient start\"\n          onDrag={(p, phase) => emit({ ...value, from: toLocal(p) }, phase)}\n        />\n        <DragPoint\n          radius={HANDLE_RADIUS}\n          at={to}\n          label=\"Gradient end\"\n          onDrag={(p, phase) => emit({ ...value, to: toLocal(p) }, phase)}\n        />\n      </>\n    );\n  }\n\n  if (value.fill === 'radial-gradient') {\n    const center = toScreen(value.center);\n    // The radius handle rides the +x axis of gradient space, so it stays on\n    // the drawn circle under a rotated or anisotropic transform.\n    const edge = toScreen({ x: value.center.x + value.radius, y: value.center.y });\n    const screenRadius = Math.hypot(edge.x - center.x, edge.y - center.y);\n    return (\n      <>\n        <circle className={s.guide} cx={center.x} cy={center.y} r={screenRadius} />\n        <DragPoint\n          radius={HANDLE_RADIUS}\n          at={center}\n          label=\"Gradient center\"\n          onDrag={(p, phase) => emit({ ...value, center: toLocal(p) }, phase)}\n        />\n        <DragPoint\n          radius={HANDLE_RADIUS}\n          at={edge}\n          label=\"Gradient radius\"\n          onDrag={(p, phase) => {\n            const local = toLocal(p);\n            const radius = Math.hypot(local.x - value.center.x, local.y - value.center.y);\n            emit({ ...value, radius: Math.max(MIN_RADIUS, radius) }, phase);\n          }}\n        />\n      </>\n    );\n  }\n\n  const center = toScreen(value.center);\n  const { radius } = gradientGeometry(value);\n  const tip = toScreen({\n    x: value.center.x + Math.cos(value.angle) * radius,\n    y: value.center.y + Math.sin(value.angle) * radius,\n  });\n  return (\n    <>\n      <Guide x1={center.x} y1={center.y} x2={tip.x} y2={tip.y} />\n      <DragPoint\n        radius={HANDLE_RADIUS}\n        at={center}\n        label=\"Gradient center\"\n        onDrag={(p, phase) => emit({ ...value, center: toLocal(p) }, phase)}\n      />\n      <DragPoint\n        radius={HANDLE_RADIUS}\n        at={tip}\n        label=\"Gradient angle\"\n        onDrag={(p, phase) => {\n          const local = toLocal(p);\n          const angle = Math.atan2(local.y - value.center.y, local.x - value.center.x);\n          emit({ ...value, angle }, phase);\n        }}\n      />\n    </>\n  );\n}\n\n/** A radius of zero divides by zero in the shader's `t`; keep it off the floor. */\nconst MIN_RADIUS = 1;\n\nconst HANDLE_RADIUS = 7;\n","import { type ReactElement, type RefObject } from 'react';\nimport {\n  fillInPoseFrame,\n  fillToBoundsFrame,\n  isGradientFill,\n  useNodeOverlayFrame,\n  useOngoingAction,\n  type FillStyle,\n  type GradientFill,\n  type RectPose,\n  type Scene,\n  type Stroke,\n  type View,\n} from '@weasel-js/core';\nimport { isMeshGradientFill, type MeshGradientFill } from '@weasel-js/core/mesh';\nimport { MeshHandles } from '../MeshEditor/MeshHandles';\nimport { GradientHandles } from './GradientHandles';\n\n/** The paint slots a node carries. Either may hold a gradient, and each has\n *  its own action, so the overlay is told which one it is editing. */\nexport type PaintSlot = 'fill' | 'stroke';\n\n/** What `SceneGradientHandles` reads off a node. Every field is optional, so\n *  any richer app data shape satisfies it. */\nexport interface PaintedNodeData {\n  fill?: FillStyle | null;\n  stroke?: Stroke | null;\n}\n\n/** Props for {@link SceneGradientHandles}. */\nexport interface SceneGradientHandlesProps<\n  TData extends PaintedNodeData,\n  TLayer extends string,\n  TPose extends RectPose,\n> {\n  scene: Scene<TData, TLayer, TPose>;\n  /** The element the overlay is positioned in. Must be the canvas's own box,\n   *  or the handles land somewhere other than the paint. */\n  containerRef: RefObject<HTMLElement | null>;\n  /** The node whose paint is being edited — usually the lone selected id. */\n  nodeId: string | null | undefined;\n  /** Which of the node's two paints these handles move. */\n  slot: PaintSlot;\n  /** Current viewport; a thunk is re-read per projection. See\n   *  `useNodeOverlayFrame`. */\n  view?: View | (() => View);\n  className?: string;\n}\n\n/**\n * Scene-aware paint handles: on-canvas geometry handles for the gradient in\n * one node's `fill` or `stroke` — `GradientHandles` for the three ramps,\n * `MeshHandles` for a mesh — committed through the `setFill` / `setStroke`\n * actions as a single undo entry per drag.\n *\n * Renders nothing unless the targeted slot holds a gradient or a mesh. The\n * node stores its gradient in `units: 'bounds'` — fractions of its own box, so the paint\n * survives pan, zoom and resize — which is not a frame polar math can work\n * in; the handles get it resolved onto the box and every edit is normalized\n * back on the way out.\n *\n * `slot` is a prop rather than state the kit keeps: an app that edits fill\n * and stroke separately already knows which one has focus.\n */\nexport function SceneGradientHandles<\n  TData extends PaintedNodeData,\n  TLayer extends string,\n  TPose extends RectPose,\n>(props: SceneGradientHandlesProps<TData, TLayer, TPose>): ReactElement | null {\n  const { scene, containerRef, nodeId, slot, view, className } = props;\n  const frame = useNodeOverlayFrame(scene, containerRef, nodeId, { view });\n  const edit = useOngoingAction(slot === 'fill' ? 'setFill' : 'setStroke');\n\n  const paint = frame ? paintOf(scene, nodeId, slot) : null;\n  if (!frame || !paint) return null;\n\n  const dispatch = (next: FillStyle, phase: 'input' | 'commit'): void => {\n    const normalized = fillToBoundsFrame(next, frame.box);\n    if (phase === 'commit') edit.commit({ paint: normalized });\n    else edit.input({ paint: normalized });\n  };\n  const common = {\n    toScreen: frame.toScreen,\n    toLocal: frame.toLocal,\n    width: frame.width,\n    height: frame.height,\n    className,\n    onInput: (next: FillStyle) => dispatch(next, 'input'),\n    onChange: (next: FillStyle) => dispatch(next, 'commit'),\n  };\n\n  if (isGradientFill(paint)) {\n    return <GradientHandles value={fillInPoseFrame(paint, frame.box) as GradientFill} {...common} />;\n  }\n  if (isMeshGradientFill(paint)) {\n    const resolved = fillInPoseFrame(paint, frame.box) as unknown as MeshGradientFill;\n    // Still in the bounds frame means the mesh kind has not loaded, and\n    // handles drawn now would sit in fractions of the box.\n    if (resolved.units === 'bounds') return null;\n    return <MeshHandles value={resolved} {...common} />;\n  }\n  return null;\n}\n\nfunction paintOf<TData extends PaintedNodeData, TLayer extends string, TPose extends RectPose>(\n  scene: Scene<TData, TLayer, TPose>,\n  nodeId: string | null | undefined,\n  slot: PaintSlot,\n): FillStyle | null | undefined {\n  if (nodeId == null) return undefined;\n  const data = (scene.nodes as ReadonlyMap<string, { data: TData }>).get(nodeId)?.data;\n  if (!data) return undefined;\n  return slot === 'fill' ? data.fill : data.stroke?.paint;\n}\n"],"mappings":"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"}

package/dist/chunks/{InlineRange-P01ABSzo.js → InlineRange-DPjIsJB3.js}

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
 var n = {
-	range: "_range_36g90_10",
-	alpha: "_alpha_36g90_79"
+	range: "_range_16bfs_10",
+	alpha: "_alpha_16bfs_84"
 }, r = { range: "_range_1on6e_4" }, i = t(function(t, i) {
 	let { value: a, min: o = 0, max: s = 100, className: c, style: l, ...u } = t, d = s - o, f = d > 0 ? (Math.min(Math.max(a, o), s) - o) / d * 100 : 0;
 	return /* @__PURE__ */ e("input", {
@@ -26,4 +26,4 @@ var n = {
 //#endregion
 export { n, i as t };
 
-//# sourceMappingURL=InlineRange-P01ABSzo.js.map
+//# sourceMappingURL=InlineRange-DPjIsJB3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineRange-DPjIsJB3.js","names":["range","shared","s","range_module_default","InlineRange_module_default","InlineRange","forwardRef","rest","props","span","max","min","filled","value","className","style"],"sources":["../../src/components/range.module.css","../../src/components/InlineRange/InlineRange.module.css","../../src/components/InlineRange/InlineRange.tsx"],"sourcesContent":["/* The one skin for a native <input type=\"range\">. Imported by InlineRange and\n   by the property rows, which render the same DOM and used to carry three\n   independently authored copies of these rules. labkit's theme/base.less\n   extends it onto a bare range under `.lk-root`, so it is the only copy.\n\n   The track is painted here rather than left to `accent-color`: a UA fills the\n   left of the track with the accent but draws the remainder near-white on a\n   dark surface whatever `color-scheme` says, and overriding the track's\n   background removes the accent fill instead of recoloring the remainder. */\n.range {\n  appearance: none;\n  -webkit-appearance: none;\n  /* The slop: padding widens the hit box and the negative margin gives the space\n     back. Border-box because the property rows and labkit set it on every descendant.\n     No thumb slop: a native thumb re-centers on the pointer wherever a press lands. */\n  box-sizing: border-box;\n  width: calc(100% + 2 * var(--wzl-slider-track-slop));\n  min-inline-size: calc(48px + 2 * var(--wzl-slider-track-slop));\n  /* The box is taller than the track so the thumb has room to spill; a surface\n     where the element itself IS the track overrides this. */\n  height: calc(var(--wzl-range-box-h, 12px) + 2 * var(--wzl-slider-track-slop));\n  padding: var(--wzl-slider-track-slop);\n  margin: calc(-1 * var(--wzl-slider-track-slop));\n  /* Transparent so the track pseudo-element shows; a surface that paints the element itself overrides it. */\n  background: var(--wzl-range-bg, transparent);\n  background-clip: content-box;\n  cursor: pointer;\n}\n\n.range::-webkit-slider-runnable-track {\n  height: var(--wzl-slider-track-h);\n  border-radius: var(--wzl-radius-sm);\n  background: var(\n    --wzl-range-track-bg,\n    color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-mix), transparent)\n  );\n}\n\n.range::-moz-range-track {\n  height: var(--wzl-slider-track-h);\n  border-radius: var(--wzl-radius-sm);\n  background: var(\n    --wzl-range-track-bg,\n    color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-mix), transparent)\n  );\n}\n\n.range::-webkit-slider-thumb {\n  appearance: none;\n  -webkit-appearance: none;\n  width: var(--wzl-slider-thumb-size);\n  height: var(--wzl-slider-thumb-size);\n  border: none;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-mix), transparent);\n  /* WebKit and Blink hang the thumb from the track's top edge. A transform, not\n     margin-top: Blink rounds a thumb margin to a whole CSS pixel, which leaves an\n     odd track/thumb gap half a pixel off center at every DPR. */\n  transform: translateY(calc((var(--wzl-slider-track-h) - var(--wzl-slider-thumb-size)) / 2));\n}\n\n.range::-moz-range-thumb {\n  width: var(--wzl-slider-thumb-size);\n  height: var(--wzl-slider-thumb-size);\n  border: none;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-mix), transparent);\n}\n\n/* :where() keeps these at the specificity of `.range` alone, which is what a bare\n   labkit range extending this skin needs to stay at zero. */\n.range:where(:focus-visible) {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: calc(2px - var(--wzl-slider-track-slop));\n}\n\n.range:where(:disabled) {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n/* Alpha variant: a fainter track, used where the row already carries a color\n   swatch and the slider must not compete with it. */\n.alpha::-webkit-slider-runnable-track {\n  background: var(--wzl-range-track-bg, color-mix(in srgb, var(--wzl-accent) 10%, transparent));\n}\n\n.alpha::-moz-range-track {\n  background: var(--wzl-range-track-bg, color-mix(in srgb, var(--wzl-accent) 10%, transparent));\n}\n\n/* A dead alpha track keeps its groove but loses its thumb, so the affordance\n   reads inert rather than merely dimmed. Keyed off `:disabled`, which a color field\n   already sets on the input — not off a class on the row. One rule per engine:\n   Blink and WebKit drop a whole selector list that names a -moz- pseudo-element. */\n.alpha:disabled::-webkit-slider-runnable-track {\n  background: color-mix(in srgb, var(--wzl-fg) 5%, transparent);\n}\n\n.alpha:disabled::-moz-range-track {\n  background: color-mix(in srgb, var(--wzl-fg) 5%, transparent);\n}\n\n.alpha:disabled::-webkit-slider-thumb {\n  background: transparent;\n}\n\n.alpha:disabled::-moz-range-thumb {\n  background: transparent;\n}\n","/* Track and thumb come from the shared range skin. What is local to\n   InlineRange is the filled-to-N% paint, which no other surface has:\n   `--slider-fill` carries the value, since no static rule expresses it. */\n.range {\n  flex: 1;\n  --wzl-range-bg: linear-gradient(\n    to right,\n    var(--wzl-accent) 0 var(--slider-fill, 0%),\n    var(--wzl-border-strong) var(--slider-fill, 0%) 100%\n  );\n  --wzl-range-box-h: var(--wzl-slider-track-h);\n  /* The gradient above IS the track, so the shared track paint must not land on top of it. */\n  --wzl-range-track-bg: transparent;\n  border-radius: var(--wzl-radius-pill);\n}\n","import { type CSSProperties, forwardRef, type InputHTMLAttributes, type Ref } from 'react';\nimport shared from '../range.module.css';\nimport s from './InlineRange.module.css';\n\n/** Props for {@link InlineRange} — a range input's, with `value` required. */\nexport type InlineRangeProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'value' | 'min' | 'max'\n> & {\n  value: number;\n  min?: number;\n  max?: number;\n};\n\n/**\n * Compact range input for a property row: one track, no label, no output.\n *\n * Distinct from the kit's other two — `Slider` is shaped for canvas scrubbing,\n * and `RangeSlider` is a full-width labelled form control on React Aria. This\n * one exists to sit inline beside a swatch or a readout, and to own the track\n * painting both of those surfaces need.\n */\nexport const InlineRange = forwardRef(function InlineRange(\n  props: InlineRangeProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const { value, min = 0, max = 100, className, style, ...rest } = props;\n  const span = max - min;\n  const filled = span > 0 ? ((Math.min(Math.max(value, min), max) - min) / span) * 100 : 0;\n  return (\n    <input\n      {...rest}\n      ref={ref}\n      type=\"range\"\n      value={value}\n      min={min}\n      max={max}\n      className={[shared.range, s.range, className].filter(Boolean).join(' ')}\n      style={{ ['--slider-fill' as string]: `${filled}%`, ...style } as CSSProperties}\n    />\n  );\n});\n"],"mappings":";;;;;oCEsBaK,IAAcC,EAAW,SACpC,GACA,GACA;CACA,IAAM,EAAE,UAAO,SAAM,GAAG,SAAM,KAAK,cAAW,UAAO,GAAGC,MAASC,GAC3DC,IAAOC,IAAMC,GACbC,IAASH,IAAO,KAAM,KAAK,IAAI,KAAK,IAAII,GAAOF,CAAG,GAAGD,CAAG,IAAIC,KAAOF,IAAQ,MAAM;CACvF,OACE,kBAAC,SAAD;EACE,GAAIF;EACC;EACL,MAAK;EACE;EACF;EACA;EACL,WAAW;GAACN,EAAO;GAAOC,EAAE;GAAOY;EAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACtE,OAAO;GAAG,iBAA4B,GAAGF,EAAO;GAAI,GAAGG;EAAM;CAC9D,CAAA;AAEL,CAAC"}

package/dist/chunks/{Input-CzwvCZs_.js → Input-D7SDKbST.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./field.module-Bh7BTKMh.js";
+import { t as e } from "./field.module-B27pWv0i.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
 import { FieldError as i, Input as a, Label as o, Text as s, TextField as c } from "react-aria-components";
@@ -52,4 +52,4 @@ var l = {
 //#endregion
 export { u as t };
 
-//# sourceMappingURL=Input-CzwvCZs_.js.map
+//# sourceMappingURL=Input-D7SDKbST.js.map

package/dist/chunks/{Input-CzwvCZs_.js.map → Input-D7SDKbST.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Input-CzwvCZs_.js","names":["Input","f","s","RACInput","field_module_default","Input_module_default","Input$1","forwardRef","textFieldProps","props","TextField","orientation","className","label","Label","leadingAdornment","Input","trailingAdornment","description","Text","FieldError","errorMessage"],"sources":["../../src/components/Input/Input.module.css","../../src/components/Input/Input.tsx"],"sourcesContent":[".frame {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  padding: 0 var(--wzl-field-pad-x);\n}\n\n.frame input {\n  padding: 0;\n}\n\n.adornment {\n  display: inline-flex;\n  align-items: center;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n  pointer-events: none;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  TextField,\n  Label,\n  Input as RACInput,\n  Text,\n  FieldError,\n  type TextFieldProps as RACTextFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport type { FieldOrientation } from '../Field/Field';\nimport f from '../field.module.css';\nimport s from './Input.module.css';\n\n/** Props for {@link Input}, on top of React Aria's `TextField` props. */\nexport type InputProps = Omit<RACTextFieldProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  /**\n   * `'stacked'` (the default) puts the label above the field; `'row'` sets it\n   * beside the field at its own width, with any description or error on a\n   * line below. Same vocabulary as {@link Field}'s `orientation`.\n   */\n  orientation?: FieldOrientation;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  leadingAdornment?: ReactNode;\n  trailingAdornment?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single-line text input wrapping React Aria's TextField. Supplies a\n * default skin against the `--wzl-*` token system, and exposes the\n * familiar label / description / errorMessage / adornment slot shape.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const {\n    label,\n    orientation = 'stacked',\n    description,\n    errorMessage,\n    placeholder,\n    leadingAdornment,\n    trailingAdornment,\n    className,\n    ...textFieldProps\n  } = props;\n\n  return (\n    <TextField\n      {...textFieldProps}\n      className={[\n        f.field,\n        f.control,\n        orientation === 'row' && f.row,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {label !== undefined && <Label className={f.label}>{label}</Label>}\n      <div className={`${f.frame} ${s.frame}`}>\n        {leadingAdornment !== undefined && <span className={s.adornment}>{leadingAdornment}</span>}\n        <RACInput ref={ref} placeholder={placeholder} />\n        {trailingAdornment !== undefined && <span className={s.adornment}>{trailingAdornment}</span>}\n      </div>\n      {description !== undefined && (\n        <Text slot=\"description\" className={`${f.hint} ${f.below}`}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={`${f.error} ${f.below}`}>{errorMessage}</FieldError>\n    </TextField>\n  );\n});\n"],"mappings":";;;;;;;GCsCaA,IAAQO,EAAW,SAC9B,GACA,GACA;CACA,IAAM,EACJ,UACA,iBAAc,WACd,gBACA,iBACA,gBACA,qBACA,sBACA,cACA,GAAGC,MACDC;CAEJ,OACE,kBAACC,GAAD;EACE,GAAIF;EACJ,WAAW;GACTP,EAAE;GACFA,EAAE;GACFU,MAAgB,SAASV,EAAE;GAC3BW;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EATb,UAAA;GAWGC,MAAU,KAAA,KAAa,kBAACC,GAAD;IAAO,WAAWb,EAAE;IAAQ,UAAAY;GAAa,CAAA;GACjE,kBAAC,OAAD;IAAK,WAAW,GAAGZ,EAAE,MAAM,GAAGC,EAAE;IAAhC,UAAA;KACGa,MAAqB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAWb,EAAE;MAAY,UAAAa;KAAuB,CAAA;KACzF,kBAACZ,GAAD;MAAe;MAAkB;KAAc,CAAA;KAC9Cc,MAAsB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAWf,EAAE;MAAY,UAAAe;KAAwB,CAAA;IACxF;;GACJC,MAAgB,KAAA,KACf,kBAACC,GAAD;IAAM,MAAK;IAAc,WAAW,GAAGlB,EAAE,KAAK,GAAGA,EAAE;IAChD,UAAAiB;GACG,CAAA;GAER,kBAACE,GAAD;IAAY,WAAW,GAAGnB,EAAE,MAAM,GAAGA,EAAE;IAAU,UAAAoB;GAAyB,CAAA;EACjE;;AAEf,CAAC"}
+{"version":3,"file":"Input-D7SDKbST.js","names":["Input","f","s","RACInput","field_module_default","Input_module_default","Input$1","forwardRef","textFieldProps","props","TextField","orientation","className","label","Label","leadingAdornment","Input","trailingAdornment","description","Text","FieldError","errorMessage"],"sources":["../../src/components/Input/Input.module.css","../../src/components/Input/Input.tsx"],"sourcesContent":[".frame {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  padding: 0 var(--wzl-field-pad-x);\n}\n\n.frame input {\n  padding: 0;\n}\n\n.adornment {\n  display: inline-flex;\n  align-items: center;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n  pointer-events: none;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  TextField,\n  Label,\n  Input as RACInput,\n  Text,\n  FieldError,\n  type TextFieldProps as RACTextFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport type { FieldOrientation } from '../Field/Field';\nimport f from '../field.module.css';\nimport s from './Input.module.css';\n\n/** Props for {@link Input}, on top of React Aria's `TextField` props. */\nexport type InputProps = Omit<RACTextFieldProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  /**\n   * `'stacked'` (the default) puts the label above the field; `'row'` sets it\n   * beside the field at its own width, with any description or error on a\n   * line below. Same vocabulary as {@link Field}'s `orientation`.\n   */\n  orientation?: FieldOrientation;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  leadingAdornment?: ReactNode;\n  trailingAdornment?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single-line text input wrapping React Aria's TextField. Supplies a\n * default skin against the `--wzl-*` token system, and exposes the\n * familiar label / description / errorMessage / adornment slot shape.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const {\n    label,\n    orientation = 'stacked',\n    description,\n    errorMessage,\n    placeholder,\n    leadingAdornment,\n    trailingAdornment,\n    className,\n    ...textFieldProps\n  } = props;\n\n  return (\n    <TextField\n      {...textFieldProps}\n      className={[\n        f.field,\n        f.control,\n        orientation === 'row' && f.row,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {label !== undefined && <Label className={f.label}>{label}</Label>}\n      <div className={`${f.frame} ${s.frame}`}>\n        {leadingAdornment !== undefined && <span className={s.adornment}>{leadingAdornment}</span>}\n        <RACInput ref={ref} placeholder={placeholder} />\n        {trailingAdornment !== undefined && <span className={s.adornment}>{trailingAdornment}</span>}\n      </div>\n      {description !== undefined && (\n        <Text slot=\"description\" className={`${f.hint} ${f.below}`}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={`${f.error} ${f.below}`}>{errorMessage}</FieldError>\n    </TextField>\n  );\n});\n"],"mappings":";;;;;;;GCsCaA,IAAQO,EAAW,SAC9B,GACA,GACA;CACA,IAAM,EACJ,UACA,iBAAc,WACd,gBACA,iBACA,gBACA,qBACA,sBACA,cACA,GAAGC,MACDC;CAEJ,OACE,kBAACC,GAAD;EACE,GAAIF;EACJ,WAAW;GACTP,EAAE;GACFA,EAAE;GACFU,MAAgB,SAASV,EAAE;GAC3BW;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EATb,UAAA;GAWGC,MAAU,KAAA,KAAa,kBAACC,GAAD;IAAO,WAAWb,EAAE;IAAQ,UAAAY;GAAa,CAAA;GACjE,kBAAC,OAAD;IAAK,WAAW,GAAGZ,EAAE,MAAM,GAAGC,EAAE;IAAhC,UAAA;KACGa,MAAqB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAWb,EAAE;MAAY,UAAAa;KAAuB,CAAA;KACzF,kBAACZ,GAAD;MAAe;MAAkB;KAAc,CAAA;KAC9Cc,MAAsB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAWf,EAAE;MAAY,UAAAe;KAAwB,CAAA;IACxF;;GACJC,MAAgB,KAAA,KACf,kBAACC,GAAD;IAAM,MAAK;IAAc,WAAW,GAAGlB,EAAE,KAAK,GAAGA,EAAE;IAChD,UAAAiB;GACG,CAAA;GAER,kBAACE,GAAD;IAAY,WAAW,GAAGnB,EAAE,MAAM,GAAGA,EAAE;IAAU,UAAAoB;GAAyB,CAAA;EACjE;;AAEf,CAAC"}

package/dist/chunks/{Jog-DfNUYejm.js → Jog-BrkzdGV2.js}

@@ -1,12 +1,12 @@
 import { Ct as e, rt as t, st as n, wt as r } from "./icons-Dr2-r30x.js";
 import { t as i } from "./Button-XB-T75YL.js";
-import { t as a } from "./Slider-Cl5RCeZ7.js";
+import { t as a } from "./Slider-DSrlMEq8.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 var c = {
-	jog: "_jog_qaq5x_4",
-	scrub: "_scrub_qaq5x_11",
-	readout: "_readout_qaq5x_17",
-	caption: "_caption_qaq5x_25"
+	jog: "_jog_1xcj4_4",
+	scrub: "_scrub_1xcj4_11",
+	readout: "_readout_1xcj4_17 _numeric_zns9n_4",
+	caption: "_caption_1xcj4_24"
 };
 //#endregion
 //#region src/components/Jog/Jog.tsx
@@ -78,4 +78,4 @@ function u(e, t) {
 //#endregion
 export { l as t };
 
-//# sourceMappingURL=Jog-DfNUYejm.js.map
+//# sourceMappingURL=Jog-BrkzdGV2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Jog-BrkzdGV2.js","names":["s","StepBackIcon","PauseIcon","PlayIcon","StepForwardIcon","Button","Slider","Jog_module_default","Jog","props","last","count","at","index","spoken","unit","className","onStep","playing","onPlay","jsx","onScrub","next","pad","caption","value"],"sources":["../../src/components/Jog/Jog.module.css","../../src/components/Jog/Jog.tsx"],"sourcesContent":["/* A row of transport controls on the panel surface, sized to sit in a bar\n * beside a title or a caption rather than to own a strip of its own. */\n\n.jog {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  color: var(--wzl-fg);\n}\n\n.scrub {\n  flex: 1 1 auto;\n  min-width: 80px;\n  margin-inline: var(--wzl-space-2);\n}\n\n.readout {\n  composes: numeric from '@weasel-js/theme/numeric.module.css';\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  white-space: pre;\n}\n\n.caption {\n  overflow: hidden;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import type { ReactNode } from 'react';\nimport { PauseIcon, PlayIcon, StepBackIcon, StepForwardIcon } from '../../icons';\nimport { Button } from '../Button';\nimport { Slider } from '../Slider/Slider';\nimport s from './Jog.module.css';\n\n/** Props for {@link Jog}. */\nexport interface JogProps {\n  /** Which step is showing, 0-based. */\n  index: number;\n  /** How many steps there are. */\n  count: number;\n  playing: boolean;\n  onPlay: (playing: boolean) => void;\n  /** Move one step, back or forward. */\n  onStep: (by: -1 | 1) => void;\n  /** Jump to a step. Left out, no scrubber is drawn. */\n  onScrub?: (index: number) => void;\n  /** What one step is called, for the spoken labels. Defaults to `Step`. */\n  unit?: string;\n  /** Drawn after the readout — a beat's caption, a snapshot's date. */\n  caption?: ReactNode;\n  className?: string;\n}\n\n/**\n * Transport for something counted rather than timed: beat 3 of 24, not 4.20s of 12.00s.\n * `<Transport>` is the continuous-time one, and wants a playhead in milliseconds, a rate and\n * a loop, none of which a list of steps has.\n *\n * Named for the jog of jog/shuttle — moving one frame at a time, as against running at speed.\n */\nexport function Jog(props: JogProps) {\n  const { index, count, playing, onPlay, onStep, onScrub, unit = 'Step', caption, className } =\n    props;\n\n  const last = Math.max(0, count - 1);\n  const at = Math.min(Math.max(index, 0), last);\n  const spoken = `${unit} ${at + 1} of ${count}`;\n\n  return (\n    <div className={[s.jog, className].filter(Boolean).join(' ')}>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={`Previous ${unit.toLowerCase()}`}\n        disabled={at <= 0}\n        onClick={() => onStep(-1)}\n      >\n        <StepBackIcon size={14} />\n      </Button>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={playing ? 'Pause' : 'Play'}\n        disabled={count < 2}\n        onClick={() => onPlay(!playing)}\n      >\n        {playing ? <PauseIcon size={14} /> : <PlayIcon size={14} />}\n      </Button>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={`Next ${unit.toLowerCase()}`}\n        disabled={at >= last}\n        onClick={() => onStep(1)}\n      >\n        <StepForwardIcon size={14} />\n      </Button>\n\n      {onScrub && (\n        <Slider\n          className={s.scrub}\n          min={0}\n          max={last}\n          step={1}\n          snap=\"strict\"\n          density=\"slim\"\n          ariaLabel={unit}\n          thumbs={[{ value: at, valueText: spoken }]}\n          onInput={(next) => onScrub(Math.round(next[0]?.value ?? 0))}\n        />\n      )}\n\n      <span className={s.readout} data-testid=\"jog-readout\">\n        {pad(at + 1, count)}/{count}\n      </span>\n      {caption ? <span className={s.caption}>{caption}</span> : null}\n    </div>\n  );\n}\n\n/**\n * Figure spaces, not regular ones: the readout updates every beat, and a run from 9 to 10 that\n * widens by a digit shoves whatever follows it along the row. `tabular-nums` fixes the width of\n * a digit and not how many there are, so the padding is what holds the row still.\n */\nfunction pad(value: number, count: number): string {\n  return String(value).padStart(String(count).length, ' ');\n}\n"],"mappings":";;;;;;;;;;;;ACgCA,SAAgBQ,EAAI,GAAiB;CACnC,IAAM,EAAE,UAAO,UAAO,YAAS,WAAQ,WAAQ,YAAS,UAAO,QAAQ,YAAS,iBAC9EC,GAEIC,IAAO,KAAK,IAAI,GAAGC,IAAQ,CAAC,GAC5BC,IAAK,KAAK,IAAI,KAAK,IAAIC,GAAO,CAAC,GAAGH,CAAI,GACtCI,IAAS,GAAGC,EAAK,GAAGH,IAAK,EAAE,MAAMD;CAEvC,OACE,kBAAC,OAAD;EAAK,WAAW,CAACX,EAAE,KAAKgB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAA3D,UAAA;GACE,kBAACX,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAW,YAAYU,EAAK,YAAY;IACxC,UAAUH,KAAM;IAChB,eAAeK,EAAO,EAAE;IAExB,UAAA,kBAAChB,GAAD,EAAc,MAAM,GAAK,CAAA;GACnB,CAAA;GACR,kBAACI,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAWa,IAAU,UAAU;IAC/B,UAAUP,IAAQ;IAClB,eAAeQ,EAAO,CAACD,CAAO;IAE7B,UAAUE,EAAVF,IAAWhB,IAA0BC,GAA3B,EAAW,MAAM,GAAK,CAAyB;GACpD,CAAA;GACR,kBAACE,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAW,QAAQU,EAAK,YAAY;IACpC,UAAUH,KAAMF;IAChB,eAAeO,EAAO,CAAC;IAEvB,UAAA,kBAACb,GAAD,EAAiB,MAAM,GAAK,CAAA;GACtB,CAAA;GAEPiB,KACC,kBAACf,GAAD;IACE,WAAWN,EAAE;IACb,KAAK;IACL,KAAKU;IACL,MAAM;IACN,MAAK;IACL,SAAQ;IACR,WAAWK;IACX,QAAQ,CAAC;KAAE,OAAOH;KAAI,WAAWE;IAAO,CAAC;IACzC,UAAU,MAASO,EAAQ,KAAK,MAAMC,EAAK,EAAE,EAAE,SAAS,CAAC,CAAC;GAC3D,CAAA;GAGH,kBAAC,QAAD;IAAM,WAAWtB,EAAE;IAAS,eAAY;IAAxC,UAAA;KACGuB,EAAIX,IAAK,GAAGD,CAAK;KAAE;KAAEA;IAClB;;GACLa,IAAU,kBAAC,QAAD;IAAM,WAAWxB,EAAE;IAAU,UAAAwB;GAAc,CAAA,IAAI;EACvD;;AAET;AAOA,SAASD,EAAI,GAAe,GAAuB;CACjD,OAAO,OAAOE,CAAK,CAAC,CAAC,SAAS,OAAOd,CAAK,CAAC,CAAC,QAAQ,GAAG;AACzD"}

package/dist/chunks/{LayerList-CsDqwYh-.js → LayerList-Bxj1N6bj.js}

@@ -6,8 +6,8 @@ import { t as i } from "./Disclosure-Ch2KxYuB.js";
 import { t as a } from "./DragGhost-BeYDJyLZ.js";
 import { t as o } from "./DragGrip-AoIZXfZb.js";
 import { t as s } from "./ItemList.module-BSpCSxan.js";
-import { n as c } from "./Properties-D15c8NP-.js";
-import { i as l } from "./PropertyField-CV_Gw57S.js";
+import { n as c } from "./Properties-DseN56WI.js";
+import { a as l } from "./PropertyField-BbNqK8xr.js";
 import { asNodeId as u, createMoveToIndexOp as d, dispatchApplyBatch as f, useLatest as p } from "@weasel-js/core";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useId as _, useLayoutEffect as v, useRef as y, useState as b } from "react";
@@ -418,4 +418,4 @@ function F(e) {
 //#endregion
 export { D as n, S as r, F as t };
 
-//# sourceMappingURL=LayerList-CsDqwYh-.js.map
+//# sourceMappingURL=LayerList-Bxj1N6bj.js.map

package/dist/chunks/{LayerList-CsDqwYh-.js.map → LayerList-Bxj1N6bj.js.map}

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

package/dist/chunks/{ListEditor-BnGzqERm.js → ListEditor-OQDzG4A5.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./Button-XB-T75YL.js";
 import { t } from "./CloseButton-BmNmRVtb.js";
-import { t as n } from "./field.module-Bh7BTKMh.js";
+import { t as n } from "./field.module-B27pWv0i.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { useEffect as a, useRef as o, useState as s } from "react";
 var c = {
@@ -69,4 +69,4 @@ function l({ value: l, onChange: u, placeholder: d, empty: f = "None", addLabel:
 //#endregion
 export { l as t };
 
-//# sourceMappingURL=ListEditor-BnGzqERm.js.map
+//# sourceMappingURL=ListEditor-OQDzG4A5.js.map

package/dist/chunks/{ListEditor-BnGzqERm.js.map → ListEditor-OQDzG4A5.js.map}

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

package/dist/chunks/{MenuButton-L9f5vido.js → MenuButton-TAFg88Lp.js}

@@ -1,6 +1,6 @@
 import { i as e } from "./portalHost-CE70wLzo.js";
 import { n as t, r as n } from "./segmentTooltip-CGxCOWNz.js";
-import { t as r } from "./field.module-Bh7BTKMh.js";
+import { t as r } from "./field.module-B27pWv0i.js";
 import { t as i } from "./listbox.module-BcdVJMbm.js";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { Button as s, Menu as c, MenuItem as l, MenuTrigger as u, Popover as d } from "react-aria-components";
@@ -72,4 +72,4 @@ function p({ label: p, items: m, onAction: h, isDisabled: g, className: _, "aria
 //#endregion
 export { p as t };
 
-//# sourceMappingURL=MenuButton-L9f5vido.js.map
+//# sourceMappingURL=MenuButton-TAFg88Lp.js.map