@weasel-js/ui 1.7.0 → 1.7.1

package/dist/chunks/Plot2D-CTXHkL5p.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Plot2D-CTXHkL5p.js","names":["s","dlog","modelToPlot","xFrac","p","m","yFrac","plot","plotToModel","MAX_DECIMALS","niceStep","mag","rough","norm","stepDecimals","step","tickDecimals","most","v","values","d","niceTicks","none","lo","range","hi","span","options","pixels","minSpacing","unitsPerPx","decimals","from","inset","to","first","last","i","formatTick","text","value","ctx","Plot2D_module_default","TICK_SPACING_PX","TICK_INSET_PX","LABEL_GAP_PX","resolveTicks","settings","eps","gaps","even","g","set","axis","format","toPlot","Plot2D","forwardRef","props","svgRef","useRef","modelRange","useMemo","xRange","yRange","plotSize","width","height","clientToPlot","useCallback","rect","left","top","useEffect","useImperativeHandle","ref","pt","handlePointerDown","onPointerDown","model","xTickList","xTicks","yTickList","yTicks","yInside","yLabelsRef","yLabelWidth","setYLabelWidth","useState","yLabelKey","t","measure","widest","el","prev","live","cls","className","renderTickLines","list","renderTickLabels","placement","outside","gap","place","grid","divisions","stroke","fractions","f","axes","children"],"sources":["../../src/components/Plot2D/geometry.ts","../../src/components/Plot2D/ticks.ts","../../src/components/Plot2D/Plot2D.module.css","../../src/components/Plot2D/Plot2D.tsx"],"sourcesContent":["/**\n * Coordinate transforms (model ↔ plot) for Plot2D. Pure / deterministic —\n * no DOM, no React, no state.\n *\n * Model space: caller-defined xRange × yRange. Y axis goes UP.\n * Plot space: 0..width × 0..height in CSS pixels. Y axis goes DOWN (SVG).\n */\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * The caller-defined extent of model space, the coordinate system a plot's\n * data lives in.\n */\nexport interface ModelRange {\n  xMin: number;\n  xMax: number;\n  yMin: number;\n  yMax: number;\n}\n\n/** The plot's drawing area in CSS pixels. */\nexport interface PlotSize {\n  width: number;\n  height: number;\n}\n\n/**\n * Maps a model-space point into plot space, flipping the y axis so model y\n * grows upward while SVG y grows downward.\n */\nexport function modelToPlot(p: Point, m: ModelRange, plot: PlotSize): Point {\n  const xFrac = (p.x - m.xMin) / (m.xMax - m.xMin);\n  const yFrac = (p.y - m.yMin) / (m.yMax - m.yMin);\n  return {\n    x: xFrac * plot.width,\n    // Invert y so model y=0 sits at plot bottom (SVG y grows downward).\n    y: (1 - yFrac) * plot.height,\n  };\n}\n\n/** The inverse of {@link modelToPlot}. */\nexport function plotToModel(p: Point, m: ModelRange, plot: PlotSize): Point {\n  const xFrac = p.x / plot.width;\n  const yFrac = 1 - p.y / plot.height;\n  return {\n    x: m.xMin + xFrac * (m.xMax - m.xMin),\n    y: m.yMin + yFrac * (m.yMax - m.yMin),\n  };\n}\n","/**\n * Tick placement for a numeric axis. Pure — no DOM, no React.\n */\n\n/** What a tick label formatter knows about the column it is part of. */\nexport interface TickFormatCtx {\n  /** Places after the point that every label in the column shares. */\n  decimals: number;\n  /** Distance between neighboring ticks, or 0 when the ticks were given\n   *  explicitly and are not evenly spaced. */\n  step: number;\n}\n\n/** Turns a tick value into its label. */\nexport type TickFormatter = (value: number, ctx: TickFormatCtx) => string;\n\n/** A column of ticks and the facts its labels share. */\nexport interface TickSet {\n  values: number[];\n  step: number;\n  decimals: number;\n}\n\n/** Options for {@link niceTicks}. */\nexport interface NiceTickOptions {\n  /** Smallest gap between neighboring ticks, in px. */\n  minSpacing: number;\n  /** Ticks closer than this to either end of the axis are dropped, in px.\n   *  Default 0. */\n  inset?: number;\n}\n\nconst MAX_DECIMALS = 20;\n\n/** The smallest of 1, 2 or 5 times a power of ten that is at least `rough`. */\nexport function niceStep(rough: number): number {\n  const mag = Math.pow(10, Math.floor(Math.log10(rough)));\n  const norm = rough / mag;\n  const step = norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 5 ? 5 : 10;\n  return step * mag;\n}\n\n/** Places after the point a multiple of `step` needs, for a 1/2/5 step. */\nexport function stepDecimals(step: number): number {\n  if (!(step > 0) || !Number.isFinite(step)) return 0;\n  return Math.min(MAX_DECIMALS, Math.max(0, -Math.floor(Math.log10(step) + 1e-9)));\n}\n\n/** The most places after the point any of `values` needs. */\nexport function tickDecimals(values: readonly number[]): number {\n  let most = 0;\n  for (const v of values) {\n    if (!Number.isFinite(v)) continue;\n    let d = 0;\n    while (d < MAX_DECIMALS && Math.abs(Number(v.toFixed(d)) - v) > 1e-9 * Math.max(1, Math.abs(v))) d++;\n    most = Math.max(most, d);\n  }\n  return most;\n}\n\n/**\n * Ticks at round values across `range`, drawn `pixels` long: the finest\n * 1/2/5 step that keeps neighbors `minSpacing` px apart, so a taller plot\n * gets more of them.\n */\nexport function niceTicks(\n  range: readonly [number, number],\n  pixels: number,\n  options: NiceTickOptions,\n): TickSet {\n  const none: TickSet = { values: [], step: 0, decimals: 0 };\n  const lo = Math.min(range[0], range[1]);\n  const hi = Math.max(range[0], range[1]);\n  const span = hi - lo;\n  const { minSpacing, inset = 0 } = options;\n  if (!(span > 0) || !Number.isFinite(span) || !(pixels > 0) || !(minSpacing > 0)) return none;\n\n  const unitsPerPx = span / pixels;\n  const step = niceStep(minSpacing * unitsPerPx);\n  const decimals = stepDecimals(step);\n  const from = lo + inset * unitsPerPx;\n  const to = hi - inset * unitsPerPx;\n  // A tolerance in step units, so a tick sitting exactly on a bound survives\n  // the float error in `from / step`.\n  const first = Math.ceil(from / step - 1e-9);\n  const last = Math.floor(to / step + 1e-9);\n  const values: number[] = [];\n  for (let i = first; i <= last; i++) values.push(Number((i * step).toFixed(decimals)) + 0);\n  return { values, step, decimals };\n}\n\n/** The default label: `value` fixed to the column's shared decimals, with\n *  no negative zero. */\nexport function formatTick(value: number, ctx: TickFormatCtx): string {\n  const text = value.toFixed(ctx.decimals);\n  return /^-0(\\.0*)?$/.test(text) ? text.slice(1) : text;\n}\n",".root {\n  /* Component-local vars layered over theme tokens. Consumers override\n   * either the plot-* var (component scope) or the wzl-* token (app\n   * scope). */\n  --plot-bg: var(--wzl-surface-sunken);\n  --plot-grid: var(--wzl-line);\n  /* Axes get full foreground contrast — they're the plot frame, the\n   * most prominent structural element after caller-rendered content. */\n  --plot-axis: var(--wzl-fg);\n  --plot-tick: var(--wzl-line-subtle);\n  --plot-tick-label: var(--wzl-fg-muted);\n  /* Knocks the tick line out from behind an inside label. */\n  --plot-tick-label-halo: var(--plot-bg);\n\n  display: block;\n  /* Caller-rendered marks at the very edge (e.g. CurveEditor anchors)\n   * extend past the SVG box by their radius — let them paint over the\n   * host page instead of being half-clipped. */\n  overflow: visible;\n  background: var(--plot-bg);\n  user-select: none;\n  touch-action: none;\n  outline: none;\n}\n\n/* Keyboard-only focus ring. Caller opts in via `tabIndex`. */\n.root:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 2px;\n}\n\n.grid {\n  stroke: var(--plot-grid);\n  stroke-width: 1;\n  fill: none;\n}\n\n.axis {\n  stroke: var(--plot-axis);\n  stroke-width: var(--wzl-line-width);\n  fill: none;\n}\n\n.tick {\n  stroke: var(--plot-tick);\n  stroke-width: 1;\n  fill: none;\n}\n\n.tickLabels { pointer-events: none; }\n\n.tickLabel {\n  fill: var(--plot-tick-label);\n  font-size: var(--wzl-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n\n.tickLabel[data-placement='inside'] {\n  stroke: var(--plot-tick-label-halo);\n  stroke-width: 3px;\n  stroke-linejoin: round;\n  paint-order: stroke;\n}\n","import {\n  forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from 'react';\nimport {\n  modelToPlot, plotToModel,\n  type ModelRange, type Point,\n} from './geometry';\nimport {\n  formatTick, niceTicks, tickDecimals,\n  type TickFormatCtx, type TickFormatter,\n} from './ticks';\nimport s from './Plot2D.module.css';\nimport { dlog } from '../../dlog';\n\n/** Background grid configuration for a {@link Plot2D}. */\nexport interface GridSettings {\n  /** Number of evenly-spaced internal grid lines per axis (excluding\n   *  the edges). Applied to both x and y. Default 3. */\n  divisions?: number;\n  /** Stroke color override. When omitted, uses `var(--plot-grid)`. */\n  color?: string;\n}\n\n/** Axis-line configuration for a {@link Plot2D}. */\nexport interface AxesSettings {\n  /** Stroke color override. When omitted, uses `var(--plot-axis)`. */\n  color?: string;\n}\n\n/**\n * Ticks along one axis of a {@link Plot2D}: a line across the plot at each\n * tick value, and a label naming it. Every label in a column is formatted\n * to the same number of decimal places.\n */\nexport interface TickSettings {\n  /** Tick values in model space; any outside the range are skipped.\n   *  Omitted = round 1/2/5 steps, as many as `minSpacing` allows at the\n   *  plot's current size. */\n  values?: readonly number[];\n  /** Smallest gap between generated ticks, in px. Default 24 on y, 64 on x. */\n  minSpacing?: number;\n  /** A generated tick nearer either end of the axis than this is dropped,\n   *  so its label stays on the plot, in px. Default 4 on y, 16 on x. */\n  inset?: number;\n  /** Draw a line across the plot at each tick. Default true. */\n  lines?: boolean;\n  /** Where labels sit: `'inside'` the plot along its left (y) or bottom (x)\n   *  edge, `'outside'` it past that edge in space the caller leaves free,\n   *  or `false` for none. Default `'inside'`. */\n  labels?: 'inside' | 'outside' | false;\n  /** Space between a label and the plot edge it sits against, in px.\n   *  Default 4. */\n  gap?: number;\n  /** Label text for a tick. Default {@link formatTick}. */\n  format?: TickFormatter;\n}\n\n/** A pointer position given in both of the plot's coordinate systems. */\nexport interface Plot2DCoords {\n  plot: Point;\n  model: Point;\n}\n\n/** Props for {@link Plot2D}. */\nexport interface Plot2DProps {\n  width: number;\n  height: number;\n  /** Model-space x range. Default [0, 1]. */\n  xRange?: readonly [number, number];\n  /** Model-space y range. Default [0, 1]. */\n  yRange?: readonly [number, number];\n  /** Background grid. `false` / `null` / omitted = no grid. Pass `{}`\n   *  for default (3 divisions per axis) or populated GridSettings. */\n  grid?: GridSettings | false | null;\n  /** Axis lines. `false` / `null` = no axes. Omitted = default-styled\n   *  axes (on). Pass AxesSettings to customize. */\n  axes?: AxesSettings | false | null;\n  /** Ticks at x values. `false` / `null` / omitted = none; `{}` = defaults. */\n  xTicks?: TickSettings | false | null;\n  /** Ticks at y values. `false` / `null` / omitted = none; `{}` = defaults. */\n  yTicks?: TickSettings | false | null;\n  /** Forwarded to the underlying svg. Consumer opts into focus this way. */\n  tabIndex?: number;\n  /** Default `'img'`. A plot holding focusable marks must not be an image,\n   *  whose children are presentational to assistive technology. */\n  role?: string;\n  'aria-label'?: string;\n  className?: string;\n  style?: CSSProperties;\n  /** Pointer down on the SVG. Receives both plot- and model-space coords\n   *  pre-computed so consumers don't repeat the rect/transform dance. */\n  onPointerDown?: (e: ReactPointerEvent<SVGSVGElement>, coords: Plot2DCoords) => void;\n  onKeyDown?: (e: ReactKeyboardEvent<SVGSVGElement>) => void;\n  children?: ReactNode;\n}\n\n/**\n * Imperative handle on a {@link Plot2D}: the SVG element, its size, and the\n * coordinate conversions, including ones that start from a raw DOM event so a\n * drag tracked on `window` can still map back into the plot.\n */\nexport interface Plot2DHandle {\n  readonly svg: SVGSVGElement | null;\n  plotToModel(pt: Point): Point;\n  modelToPlot(pt: Point): Point;\n  /** Convert a DOM event's clientX/clientY (e.g. from a window-attached\n   *  pointermove during drag) to plot-space. */\n  clientToPlot(e: { clientX: number; clientY: number }): Point;\n  /** Convenience: clientToPlot → plotToModel. */\n  clientToModel(e: { clientX: number; clientY: number }): Point;\n  readonly width: number;\n  readonly height: number;\n}\n\ntype Axis = 'x' | 'y';\n\nconst TICK_SPACING_PX: Record<Axis, number> = { x: 64, y: 24 };\nconst TICK_INSET_PX: Record<Axis, number> = { x: 16, y: 4 };\nconst LABEL_GAP_PX = 4;\n\ninterface ResolvedTick {\n  value: number;\n  /** Plot-space position along the axis. */\n  at: number;\n  label: string;\n}\n\nfunction resolveTicks(\n  settings: TickSettings,\n  axis: Axis,\n  range: readonly [number, number],\n  pixels: number,\n  toPlot: (v: number) => number,\n): ResolvedTick[] {\n  let values: number[];\n  let ctx: TickFormatCtx;\n  if (settings.values) {\n    const lo = Math.min(range[0], range[1]);\n    const hi = Math.max(range[0], range[1]);\n    const eps = (hi - lo) * 1e-9;\n    values = settings.values.filter((v) => v >= lo - eps && v <= hi + eps);\n    const gaps = values.slice(1).map((v, i) => v - values[i]);\n    const even = gaps.length > 0 && gaps.every((g) => Math.abs(g - gaps[0]) <= Math.abs(gaps[0]) * 1e-9);\n    ctx = { decimals: tickDecimals(values), step: even ? gaps[0] : 0 };\n  } else {\n    const set = niceTicks(range, pixels, {\n      minSpacing: settings.minSpacing ?? TICK_SPACING_PX[axis],\n      inset: settings.inset ?? TICK_INSET_PX[axis],\n    });\n    values = set.values;\n    ctx = { decimals: set.decimals, step: set.step };\n  }\n  const format = settings.format ?? formatTick;\n  return values.map((value) => ({ value, at: toPlot(value), label: format(value, ctx) }));\n}\n\n/**\n * An SVG plotting surface with an optional grid, axes and ticks. It draws the\n * frame and owns the model-space to plot-space mapping; the plotted content is\n * whatever children are passed, positioned in plot space.\n */\nexport const Plot2D = forwardRef<Plot2DHandle, Plot2DProps>(function Plot2D(props, ref) {\n  const {\n    width, height,\n    xRange = [0, 1],\n    yRange = [0, 1],\n    grid,\n    axes,\n    xTicks,\n    yTicks,\n    tabIndex,\n    role = 'img',\n    className,\n    style,\n    onPointerDown,\n    onKeyDown,\n    children,\n  } = props;\n\n  const svgRef = useRef<SVGSVGElement | null>(null);\n\n  const modelRange: ModelRange = useMemo(\n    () => ({ xMin: xRange[0], xMax: xRange[1], yMin: yRange[0], yMax: yRange[1] }),\n    [xRange, yRange],\n  );\n\n  const plotSize = useMemo(() => ({ width, height }), [width, height]);\n\n  const clientToPlot = useCallback((e: { clientX: number; clientY: number }): Point => {\n    const rect = svgRef.current?.getBoundingClientRect();\n    const left = rect?.left ?? 0;\n    const top = rect?.top ?? 0;\n    return { x: e.clientX - left, y: e.clientY - top };\n  }, []);\n\n  useEffect(() => {\n    dlog('plot2d', 'mount', { width, height });\n    return () => dlog('plot2d', 'unmount');\n    // Mount/unmount trace: re-running on a resize would log a spurious mount.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  useImperativeHandle(ref, () => ({\n    get svg() { return svgRef.current; },\n    plotToModel: (pt: Point) => plotToModel(pt, modelRange, plotSize),\n    modelToPlot: (pt: Point) => modelToPlot(pt, modelRange, plotSize),\n    clientToPlot,\n    clientToModel: (e) => plotToModel(clientToPlot(e), modelRange, plotSize),\n    get width() { return plotSize.width; },\n    get height() { return plotSize.height; },\n  }), [modelRange, plotSize, clientToPlot]);\n\n  const handlePointerDown = useCallback((e: ReactPointerEvent<SVGSVGElement>) => {\n    if (!onPointerDown) return;\n    const plot = clientToPlot(e);\n    const model = plotToModel(plot, modelRange, plotSize);\n    onPointerDown(e, { plot, model });\n  }, [onPointerDown, clientToPlot, modelRange, plotSize]);\n\n  const xTickList = xTicks\n    ? resolveTicks(xTicks, 'x', xRange, width, (v) => modelToPlot({ x: v, y: yRange[0] }, modelRange, plotSize).x)\n    : [];\n  const yTickList = yTicks\n    ? resolveTicks(yTicks, 'y', yRange, height, (v) => modelToPlot({ x: xRange[0], y: v }, modelRange, plotSize).y)\n    : [];\n\n  // An inside y column is right-aligned against its widest label, which only\n  // the rendered text can say.\n  const yInside = !!yTicks && (yTicks.labels ?? 'inside') === 'inside';\n  const yLabelsRef = useRef<SVGGElement | null>(null);\n  const [yLabelWidth, setYLabelWidth] = useState(0);\n  const yLabelKey = yInside ? yTickList.map((t) => t.label).join('\\n') : '';\n  useLayoutEffect(() => {\n    if (!yInside) return;\n    const measure = (): void => {\n      let widest = 0;\n      for (const el of yLabelsRef.current?.querySelectorAll('text') ?? []) {\n        if (typeof el.getComputedTextLength === 'function') widest = Math.max(widest, el.getComputedTextLength());\n      }\n      setYLabelWidth((prev) => (prev === widest ? prev : widest));\n    };\n    measure();\n    let live = true;\n    // A web font landing after the first measure changes every width.\n    document.fonts?.ready.then(() => { if (live) measure(); });\n    return () => { live = false; };\n  }, [yInside, yLabelKey]);\n\n  const cls = [s.root, className].filter(Boolean).join(' ');\n\n  const renderTickLines = (axis: Axis, list: ResolvedTick[], settings: TickSettings | false | null | undefined) => {\n    if (!settings || settings.lines === false || list.length === 0) return null;\n    return (\n      <g>\n        {list.map((t) => (\n          <line\n            key={`t${axis}-${t.value}`}\n            data-plot-element=\"tick\"\n            data-axis={axis}\n            className={s.tick}\n            {...(axis === 'x'\n              ? { x1: t.at, x2: t.at, y1: 0, y2: height }\n              : { x1: 0, x2: width, y1: t.at, y2: t.at })}\n          />\n        ))}\n      </g>\n    );\n  };\n\n  const renderTickLabels = (axis: Axis, list: ResolvedTick[], settings: TickSettings | false | null | undefined) => {\n    if (!settings || list.length === 0) return null;\n    const placement = settings.labels ?? 'inside';\n    if (placement === false) return null;\n    const outside = placement === 'outside';\n    const gap = settings.gap ?? LABEL_GAP_PX;\n    let place: { x?: number; y?: number; textAnchor: 'start' | 'middle' | 'end'; dominantBaseline?: 'central' | 'hanging' };\n    if (axis === 'y') {\n      place = outside\n        ? { x: -gap, textAnchor: 'end', dominantBaseline: 'central' }\n        : yLabelWidth > 0\n          ? { x: gap + yLabelWidth, textAnchor: 'end', dominantBaseline: 'central' }\n          : { x: gap, textAnchor: 'start', dominantBaseline: 'central' };\n    } else {\n      place = outside\n        ? { y: height + gap, textAnchor: 'middle', dominantBaseline: 'hanging' }\n        : { y: height - gap, textAnchor: 'middle' };\n    }\n    return (\n      <g ref={axis === 'y' ? yLabelsRef : undefined} className={s.tickLabels} aria-hidden=\"true\">\n        {list.map((t) => (\n          <text\n            key={`l${axis}-${t.value}`}\n            data-plot-element=\"tick-label\"\n            data-axis={axis}\n            data-placement={placement}\n            className={s.tickLabel}\n            x={axis === 'x' ? t.at : place.x}\n            y={axis === 'y' ? t.at : place.y}\n            textAnchor={place.textAnchor}\n            dominantBaseline={place.dominantBaseline}\n          >\n            {t.label}\n          </text>\n        ))}\n      </g>\n    );\n  };\n\n  return (\n    <svg\n      ref={svgRef}\n      className={cls}\n      style={style}\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      role={role}\n      aria-label={props['aria-label']}\n      tabIndex={tabIndex}\n      onPointerDown={onPointerDown ? handlePointerDown : undefined}\n      onKeyDown={onKeyDown}\n    >\n      {grid && (() => {\n        const divisions = grid.divisions ?? 3;\n        const stroke = grid.color;\n        // Evenly-spaced internal divisions, excluding the edges (which\n        // belong to the axes). For divisions=3, fractions are 1/4, 2/4, 3/4.\n        const fractions: number[] = [];\n        for (let i = 1; i <= divisions; i++) fractions.push(i / (divisions + 1));\n        return (\n          <g>\n            {fractions.map((f) => (\n              <line\n                key={`gx-${f}`}\n                data-plot-element=\"grid\"\n                className={s.grid}\n                stroke={stroke}\n                x1={f * width} x2={f * width}\n                y1={0} y2={height}\n              />\n            ))}\n            {fractions.map((f) => (\n              <line\n                key={`gy-${f}`}\n                data-plot-element=\"grid\"\n                className={s.grid}\n                stroke={stroke}\n                x1={0} x2={width}\n                y1={f * height} y2={f * height}\n              />\n            ))}\n          </g>\n        );\n      })()}\n      {renderTickLines('x', xTickList, xTicks)}\n      {renderTickLines('y', yTickList, yTicks)}\n      {axes !== false && axes !== null && (() => {\n        const stroke = axes?.color;\n        return (\n          <g>\n            <line\n              data-plot-element=\"axis\"\n              className={s.axis}\n              stroke={stroke}\n              x1={0} x2={width}\n              y1={height} y2={height}\n            />\n            <line\n              data-plot-element=\"axis\"\n              className={s.axis}\n              stroke={stroke}\n              x1={0} x2={0}\n              y1={0} y2={height}\n            />\n          </g>\n        );\n      })()}\n      {renderTickLabels('x', xTickList, xTicks)}\n      {renderTickLabels('y', yTickList, yTicks)}\n      {children}\n    </svg>\n  );\n});\n"],"mappings":"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"}

package/dist/chunks/Prefs-ByA-x51i.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Prefs-ByA-x51i.js","names":["_Fragment","s","s","s","s","s","Dialog","PropertyRow","PropertyControl","Input","useRovingTabIndex","filterPrefSubtree","prefValueAtPath","isPrefLeaf","visiblePrefSubtree","prefFieldProps","pickActiveSection","active","offsets","top","slack","id","SETTLE_MS","useScrollSpy","options","setActive","useState","heldRef","useRef","timerRef","releaseRef","key","ids","measure","useCallback","root","rootRef","rootTop","el","scrollTo","release","prefersReducedMotion","useEffect","Prefs_module_default","PrefRow","stored","ctx","path","renderCtx","pref","v","custom","control","renderBuiltin","Fragment","ObjectLeaf","field","settledOnly","held","value","objectRows","out","child","children","inner","base","PrefsPane","props","leaves","group","entry","groups","childPath","className","scrollRef","leaf","PaneSection","Heading","depth","p","PrefsRail","activate","item","items","index","onOpen","onScrollTo","roving","i","section","ariaLabel","header","open","inView","current","showCounts","PrefsForm","query","setQuery","useMemo","visible","schema","showHidden","filterable","layout","RailLayout","NoMatches","GroupBody","prefRailItems","uncontrolled","setUncontrolled","requested","spy","setOpen","paneGroup","filterField","onClearFilter","rootName","node","cursor","seg","next","onClear","PrefsDialog","form","rail","title","dialogClassName","headerExtra"],"sources":["../../src/useScrollSpy.ts","../../src/components/Prefs/Prefs.module.css","../../src/components/Prefs/PrefsRow.tsx","../../src/components/Prefs/PrefsPane.tsx","../../src/components/Prefs/PrefsRail.tsx","../../src/components/Prefs/PrefsForm.tsx","../../src/components/Prefs/PrefsDialog.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';\n\n/** One observed section: its id and its top edge, in the container's\n *  coordinates (its `getBoundingClientRect().top` less the container's). */\nexport interface SectionOffset {\n  id: string;\n  top: number;\n}\n\n/**\n * The section a reader is looking at: the last one whose top edge has passed\n * the container's, within `slack` of it so a heading flush with the top counts\n * as arrived. Null until one has — the settings above the first section belong\n * to the group itself, and marking a section the reader has not reached yet\n * points them at the wrong place.\n *\n * Offsets arrive in document order and are not re-sorted — a caller reading\n * them off the DOM already has them that way, and sorting would hide a\n * measurement that came back wrong.\n */\nexport function pickActiveSection(\n  offsets: readonly SectionOffset[],\n  slack = 8,\n): string | null {\n  let active: string | null = null;\n  for (const { id, top } of offsets) {\n    if (top - slack > 0) break;\n    active = id;\n  }\n  return active;\n}\n\n/** Options for {@link useScrollSpy}. */\nexport interface UseScrollSpyOptions {\n  /** The scrolling element holding the sections. */\n  rootRef: RefObject<HTMLElement | null>;\n  /** Section element ids, in document order. */\n  ids: readonly string[];\n  /** Pixels of tolerance at the container's top edge. */\n  slack?: number;\n}\n\n/** What {@link useScrollSpy} returns. */\nexport interface ScrollSpy {\n  /** Id of the section in view, or null before anything is measured. */\n  active: string | null;\n  /**\n   * Scroll `id` to the container's top and hold that answer until the scroll\n   * settles. Without the hold, the scroll the click causes is observed on its\n   * way past every intervening section and the rail flickers through them.\n   */\n  scrollTo: (id: string) => void;\n}\n\n/** How long to keep a programmatic scroll's answer when `scrollend` never\n *  arrives — Safari and Firefox have not shipped it. Comfortably longer than a\n *  smooth scroll, short enough that a reader who then scrolls by hand is not\n *  left looking at a stale highlight. */\nconst SETTLE_MS = 700;\n\n/**\n * Which of a scrolling container's sections is in view, for a navigation rail\n * that follows the reader. Positions are read on the container's own `scroll`\n * event — already throttled to the frame by the browser — rather than through\n * `IntersectionObserver`, so the decision stays a pure function of measured\n * offsets ({@link pickActiveSection}) and is testable apart from the DOM.\n */\nexport function useScrollSpy(options: UseScrollSpyOptions): ScrollSpy {\n  const { rootRef, ids, slack } = options;\n  const [active, setActive] = useState<string | null>(null);\n  // Set while a programmatic scroll runs: what to report, instead of what the\n  // moving container would say.\n  const heldRef = useRef<string | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const releaseRef = useRef<(() => void) | null>(null);\n  const key = ids.join('\\u0000');\n\n  const measure = useCallback((): void => {\n    const root = rootRef.current;\n    if (!root) return;\n    if (heldRef.current !== null) {\n      setActive(heldRef.current);\n      return;\n    }\n    const rootTop = root.getBoundingClientRect().top;\n    const offsets: SectionOffset[] = [];\n    for (const id of ids) {\n      const el = root.querySelector<HTMLElement>(`[data-spy-section=\"${CSS.escape(id)}\"]`);\n      if (el) offsets.push({ id, top: el.getBoundingClientRect().top - rootTop });\n    }\n    setActive(pickActiveSection(offsets, slack));\n    // `ids` is compared by content through `key`: a caller deriving the array\n    // each render would otherwise resubscribe on every one.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [rootRef, key, slack]);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    measure();\n    root.addEventListener('scroll', measure, { passive: true });\n    return () => root.removeEventListener('scroll', measure);\n  }, [rootRef, measure]);\n\n  const scrollTo = useCallback((id: string): void => {\n    const root = rootRef.current;\n    if (!root) return;\n    const el = root.querySelector<HTMLElement>(`[data-spy-section=\"${CSS.escape(id)}\"]`);\n    heldRef.current = id;\n    setActive(id);\n    const release = (): void => {\n      heldRef.current = null;\n      root.removeEventListener('scrollend', release);\n      measure();\n    };\n    // A scroll interrupted by the next one would otherwise leave its\n    // `scrollend` listener behind to fire against a later scroll.\n    releaseRef.current?.();\n    if (timerRef.current !== null) clearTimeout(timerRef.current);\n    releaseRef.current = release;\n    timerRef.current = setTimeout(release, SETTLE_MS);\n    root.addEventListener('scrollend', release);\n    if (!el) return;\n    const top = el.getBoundingClientRect().top - root.getBoundingClientRect().top + root.scrollTop;\n    root.scrollTo?.({ top, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n  }, [rootRef, measure]);\n\n  useEffect(() => () => {\n    if (timerRef.current !== null) clearTimeout(timerRef.current);\n    releaseRef.current?.();\n  }, []);\n\n  return { active, scrollTo };\n}\n\nfunction prefersReducedMotion(): boolean {\n  return typeof matchMedia === 'function'\n    && matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","/* Ported from WeaselDraw's wd-prefs-* rules (apps/draw/src/app.css),\n * generalized onto theme tokens. Column width is overridable via\n * --wzl-prefs-column-width at any ancestor scope. */\n\n.columns {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: var(--wzl-space-6);\n  overflow-y: auto;\n  padding-right: var(--wzl-space-2);\n}\n\n.column {\n  flex: 0 0 var(--wzl-prefs-column-width, 300px);\n  width: var(--wzl-prefs-column-width, 300px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n}\n\n.panel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  padding: var(--wzl-space-5);\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  --wzl-input-surface: var(--wzl-surface);\n}\n\n.subpanel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  margin-top: var(--wzl-space-3);\n  padding: var(--wzl-space-4) var(--wzl-space-4) var(--wzl-space-4) var(--wzl-space-5);\n  background: var(--wzl-surface-sunken);\n  border-left: 2px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  --wzl-input-surface: var(--wzl-surface);\n}\n\n.groupHeader {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n  padding-bottom: var(--wzl-space-2);\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.subpanel .groupHeader {\n  border-bottom: none;\n  padding-bottom: var(--wzl-space-1);\n}\n\n.groupTitle {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wider));\n  text-transform: var(--wzl-params-label-case, uppercase);\n}\n\n.groupDesc {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  line-height: 1.35;\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n}\n\n/* A leaf's row is a PropertyRow, inline; this only sets the form's type. */\n.row {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg);\n  cursor: default;\n}\n\n/* Control slot — fixed width so the label can take the rest of the row.\n * Kit form controls render as block-level flex columns that fill it. */\n.rowControl {\n  flex: 0 0 110px;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.unrenderable {\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n}\n\n/* PrefsDialog header row: title text + optional headerExtra chrome. */\n.titleRow {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-6);\n  flex: 1;\n  min-width: 0;\n}\n\n.titleRow > span:first-child {\n  flex: 1;\n  min-width: 0;\n}\n\n/* An object leaf renders its fields as its own rows. */\n.objectLeaf {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  inline-size: 100%;\n}\n\n/* Outranks the PropertyRow it styles, which is a flex row. */\n.objectLeaf .objectRow {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  gap: var(--wzl-space-4);\n  align-items: center;\n}\n\n.objectGroup {\n  margin: var(--wzl-space-2) 0 0;\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: var(--wzl-params-label-case, uppercase);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));\n  opacity: 0.55;\n}\n\n/* ---------------------------------------------------------------------------\n * Rail layout. The rail is the only chrome: no panels, because the surface\n * the form sits on already has a border and a card inside it restates one.\n * Width is overridable via --wzl-prefs-rail-width at any ancestor scope.\n * ------------------------------------------------------------------------ */\n\n.columnsLayout {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  min-height: 0;\n}\n\n.railLayout {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  min-height: 0;\n  block-size: 100%;\n  /* The pane scrolls, not the layout: a rail that scrolled away with the\n     settings would be useless exactly when it is needed. */\n  overflow: hidden;\n}\n\n/* What `PrefsDialog` hands `Dialog` for its body in rail layout: the pane\n   inside does the scrolling and the rail meets the dialog's own edges. */\n.railBody {\n  padding: 0;\n  overflow: hidden;\n  /* A settled height: without one the dialog grows and shrinks as the reader\n     moves between a two-row group and a twenty-row one, and the rail entry\n     they are aiming at moves while they aim at it. */\n  min-block-size: min(60vh, 420px);\n  /* Same reason across: a filter that narrows the schema to two rows should\n     not pull the dialog's edges in around them. */\n  min-inline-size: min(760px, 90vw);\n}\n\n.rail {\n  /* Never more than two fifths of the box: at its full width in a narrow\n     container the rail takes the space the settings need and leaves a pane\n     too thin to hold a row. The clamp belongs on the flex basis — an\n     `inline-size` here is simply ignored, which is what made a first attempt\n     at this look right and do nothing. */\n  flex: 0 1 min(var(--wzl-prefs-rail-width, 216px), 40%);\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  padding: var(--wzl-space-3) var(--wzl-space-2);\n  background: var(--wzl-surface-sunken);\n  border-right: 1px solid var(--wzl-border);\n  overflow-y: auto;\n  /* The rail is itself sunken, so a field taking the default surface would be\n     the same color as the rail behind it. */\n  --wzl-input-surface: var(--wzl-surface);\n}\n\n.railList {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.railItem {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  padding: var(--wzl-space-2) var(--wzl-space-3);\n  border: none;\n  border-radius: var(--wzl-radius-sm);\n  background: none;\n  color: var(--wzl-fg);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n  text-align: start;\n  cursor: default;\n}\n\n.railItem:hover {\n  background: var(--wzl-surface-raised);\n}\n\n.railItem:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n.railSub {\n  padding-left: var(--wzl-space-7);\n  color: var(--wzl-fg-subtle);\n}\n\n.railOpen,\n.railOpen:hover {\n  background: var(--wzl-accent);\n  color: var(--wzl-fg-on-accent);\n}\n\n.railInView {\n  color: var(--wzl-fg);\n  box-shadow: inset 2px 0 0 var(--wzl-accent);\n}\n\n.railName {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Last in the row: a count that changes as the reader types would otherwise\n   shove the name on every keystroke. */\n.railCount {\n  margin-left: auto;\n  font-size: var(--wzl-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  opacity: 0.6;\n}\n\n.pane {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n  padding: var(--wzl-space-5) var(--wzl-space-6);\n}\n\n.paneHead {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n  margin-bottom: var(--wzl-space-5);\n}\n\n.paneTitle {\n  margin: 0;\n  font-size: var(--wzl-font-size-lg);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n}\n\n.paneDesc {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  line-height: 1.35;\n}\n\n.paneSection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  margin-top: var(--wzl-space-6);\n}\n\n.paneSubsection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  margin-top: var(--wzl-space-4);\n  padding-left: var(--wzl-space-4);\n  border-left: 2px solid var(--wzl-border);\n}\n\n.sectionTitle {\n  position: sticky;\n  /* Sticky offsets are measured from the scrollport's edge, not from inside\n     the pane's padding, so this is 0 and the heading's own padding is what\n     keeps the text off the edge. */\n  top: 0;\n  z-index: 1;\n  margin: 0;\n  padding: var(--wzl-space-3) 0 var(--wzl-space-2);\n  background: var(--wzl-surface);\n  border-bottom: 1px solid var(--wzl-border);\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg-subtle);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wider));\n  text-transform: var(--wzl-params-label-case, uppercase);\n}\n\n.subsectionTitle {\n  margin: 0;\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg-subtle);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));\n  text-transform: var(--wzl-params-label-case, uppercase);\n}\n\n/* In the rail layout a row is a grid, so the control track grows with the\n   pane instead of holding at the columns layout's fixed slot. */\n.railLayout .row {\n  display: grid;\n  /* The control track is capped rather than taking the rest: a number field\n     as wide as the pane reads as a text area, and every row's control starts\n     at the same x either way. */\n  grid-template-columns:\n    minmax(140px, var(--wzl-params-label-width, 240px))\n    minmax(180px, 260px);\n  align-items: center;\n}\n\n.railLayout .rowControl {\n  flex: 1 1 auto;\n}\n\n.filter {\n  padding: 0 var(--wzl-space-1) var(--wzl-space-2);\n}\n\n.noMatches {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--wzl-space-3);\n  padding: var(--wzl-space-6) 0;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n}\n\n.noMatches p {\n  margin: 0;\n}\n\n.clearFilter {\n  padding: var(--wzl-space-1) var(--wzl-space-3);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  background: var(--wzl-surface-raised);\n  color: var(--wzl-fg);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n}\n","import { type ReactNode } from 'react';\nimport { PropertyControl } from '../Properties/PropertyField';\nimport { PropertyRow } from '../Properties/PropertyPanel';\nimport { prefFieldProps } from './prefField';\nimport {\n  isPrefLeaf,\n  prefValueAtPath,\n  type PrefGroup,\n  type PrefLeaf,\n  type PrefObject,\n} from './schema';\nimport s from './Prefs.module.css';\n\n/** What a {@link PrefRenderer} is given for the leaf it is rendering. */\nexport interface PrefRenderContext {\n  /** Dotted path of the leaf within the schema root. */\n  path: string;\n  /** The schema node. App renderers narrow this to their own kind shape. */\n  pref: PrefLeaf;\n  /** Current value — `values` at `path`, falling back to `pref.default`. */\n  value: unknown;\n  setValue: (value: unknown) => void;\n  /** Whether this leaf is currently auto — not pinned, computed by the owner. */\n  auto: boolean;\n  /** Toggle this leaf's auto state. */\n  setAuto: (next: boolean) => void;\n}\n\n/**\n * Renders the control cell for one preference leaf. Returning `null`\n * collapses the row.\n */\nexport type PrefRenderer = (ctx: PrefRenderContext) => ReactNode;\n\nexport interface WalkCtx {\n  values: unknown;\n  onChange: (path: string, value: unknown) => void;\n  renderers?: Record<string, PrefRenderer>;\n}\n\nexport function PrefRow({ ctx, path, pref }: { ctx: WalkCtx; path: string; pref: PrefLeaf }) {\n  const stored = prefValueAtPath(ctx.values, path);\n  const renderCtx: PrefRenderContext = {\n    path,\n    pref,\n    value: stored !== undefined ? stored : pref.default,\n    setValue: (v) => ctx.onChange(path, v),\n    // A prefs form pins every leaf: it has no computed state to hand back.\n    auto: false,\n    setAuto: () => {},\n  };\n\n  const custom = ctx.renderers?.[pref.kind];\n  const control = custom ? custom(renderCtx) : renderBuiltin(renderCtx);\n  if (custom && control === null) return null;\n\n  // `block` leaves own their chrome (embedded editors with their own\n  // header) — no label/tooltip row.\n  if (pref.block) return <>{control}</>;\n\n  return (\n    <PropertyRow\n      label={pref.name}\n      description={pref.description}\n      layout=\"inline\"\n      className={s.row}\n    >\n      <span className={s.rowControl}>{control}</span>\n    </PropertyRow>\n  );\n}\n\nfunction renderBuiltin(\n  ctx: PrefRenderContext,\n  // The object a nested leaf is a field of — what an enum `encoding` and a\n  // font's weight and slant read against. Undefined for a top-level leaf.\n  siblings?: Record<string, unknown>,\n): ReactNode {\n  const { pref, value, setValue } = ctx;\n  if (pref.kind === 'object') return <ObjectLeaf ctx={ctx} />;\n  const field = prefFieldProps(pref, { value, siblings, setValue });\n  if (field === null) {\n    // App-defined kind with no `renderers` entry: labeled placeholder, not a\n    // crash — a missing wiring should be visible and recoverable.\n    return <span className={s.unrenderable}>({pref.kind}: no renderer)</span>;\n  }\n  switch (field.kind) {\n    // A form stores what was settled on: a number once it is entered, a color\n    // once its gesture ends.\n    case 'number':\n      return (\n        <PropertyControl\n          {...field}\n          name={pref.name}\n          onInput={settledOnly}\n          steppers={field.accepts === undefined}\n        />\n      );\n    case 'color':\n      return <PropertyControl {...field} name={pref.name} onInput={settledOnly} />;\n    default:\n      return <PropertyControl {...field} name={pref.name} />;\n  }\n}\n\nconst settledOnly = (): void => {};\n\n/** One value with its fields hanging off it: each field renders its own\n *  control and commits the parent object whole. */\nfunction ObjectLeaf({ ctx }: { ctx: PrefRenderContext }) {\n  const pref = ctx.pref as PrefObject;\n  const { value, setValue } = ctx;\n  const held = typeof value === 'object' && value !== null\n    ? (value as Record<string, unknown>)\n    : undefined;\n  const objectRows = (children: Record<string, PrefLeaf | PrefGroup>): ReactNode[] => {\n    const out: ReactNode[] = [];\n    for (const [key, child] of Object.entries(children)) {\n      if (!isPrefLeaf(child)) {\n        const inner = objectRows(child.children);\n        if (inner.length === 0) continue;\n        out.push(<h4 key={`group:${key}`} className={s.objectGroup}>{child.name}</h4>, ...inner);\n        continue;\n      }\n      out.push(\n        <PropertyRow\n          key={key}\n          label={child.name}\n          layout=\"inline\"\n              className={s.objectRow}\n        >\n          <span className={s.rowControl}>\n            {renderBuiltin({\n              path: `${ctx.path}.${key}`,\n              pref: child,\n              value: held?.[key],\n              setValue: (v) => {\n                const base = held ?? pref.fromScalar?.(value) ?? {};\n                setValue({ ...base, [key]: v });\n              },\n              // A field is not pinned on its own — it shares the state of\n              // the object leaf it hangs off.\n              auto: ctx.auto,\n              setAuto: ctx.setAuto,\n            }, held)}\n          </span>\n        </PropertyRow>,\n      );\n    }\n    return out;\n  };\n  return <div className={s.objectLeaf}>{objectRows(pref.children)}</div>;\n}\n","import { type RefObject } from 'react';\nimport { isPrefLeaf, type PrefGroup, type PrefLeaf } from './schema';\nimport { PrefRow, type WalkCtx } from './PrefsRow';\nimport s from './Prefs.module.css';\n\n/** Props for {@link PrefsPane}. */\nexport interface PrefsPaneProps {\n  ctx: WalkCtx;\n  /** The open group, or a synthetic one holding the root's loose leaves. */\n  group: PrefGroup;\n  /** Dotted path of `group`. Empty for the loose-leaf pane. */\n  path: string;\n  /** The pane's scroll container, for the rail's scroll spy. */\n  scrollRef: RefObject<HTMLDivElement | null>;\n  className?: string;\n}\n\n/**\n * One rail section's settings: the group's own leaves, then one headed\n * section per nested group.\n *\n * Nothing here draws a panel. The rail is the layout's structure, and a card\n * inside a dialog that already has a border only restates it — the columns\n * layout's sunken panels are what this is the alternative to.\n */\nexport function PrefsPane(props: PrefsPaneProps) {\n  const { ctx, group, path, scrollRef, className } = props;\n  const leaves = Object.entries(group.children).filter(\n    (entry): entry is [string, PrefLeaf] => isPrefLeaf(entry[1]),\n  );\n  const groups = Object.entries(group.children).filter(\n    (entry): entry is [string, PrefGroup] => !isPrefLeaf(entry[1]),\n  );\n  const childPath = (key: string): string => (path === '' ? key : `${path}.${key}`);\n\n  return (\n    <div className={[s.pane, className].filter(Boolean).join(' ')} ref={scrollRef}>\n      <div className={s.paneHead}>\n        <h3 className={s.paneTitle}>{group.name}</h3>\n        {group.description !== undefined && (\n          <p className={s.paneDesc}>{group.description}</p>\n        )}\n      </div>\n      {leaves.length > 0 && (\n        <div className={s.rows}>\n          {leaves.map(([key, leaf]) => (\n            <PrefRow key={key} ctx={ctx} path={childPath(key)} pref={leaf} />\n          ))}\n        </div>\n      )}\n      {groups.map(([key, child]) => (\n        <PaneSection\n          key={key}\n          ctx={ctx}\n          group={child}\n          path={childPath(key)}\n          depth={0}\n        />\n      ))}\n    </div>\n  );\n}\n\n/**\n * A nested group inside a pane. Depth 0 sections are the ones the rail links\n * to and carry `data-spy-section`; deeper ones indent and are reached only by\n * scrolling, which is what keeps the rail two levels deep whatever the schema\n * does.\n */\nfunction PaneSection({ ctx, group, path, depth }: {\n  ctx: WalkCtx;\n  group: PrefGroup;\n  path: string;\n  depth: number;\n}) {\n  const Heading = depth === 0 ? 'h4' : 'h5';\n  return (\n    <section\n      className={depth === 0 ? s.paneSection : s.paneSubsection}\n      data-spy-section={depth === 0 ? path : undefined}\n      aria-label={group.name}\n    >\n      <Heading className={depth === 0 ? s.sectionTitle : s.subsectionTitle}>\n        {group.name}\n      </Heading>\n      {group.description !== undefined && (\n        <p className={s.paneDesc}>{group.description}</p>\n      )}\n      <div className={s.rows}>\n        {Object.entries(group.children).map(([key, child]) => {\n          const p = `${path}.${key}`;\n          return isPrefLeaf(child) ? (\n            <PrefRow key={key} ctx={ctx} path={p} pref={child} />\n          ) : (\n            <PaneSection key={key} ctx={ctx} group={child} path={p} depth={depth + 1} />\n          );\n        })}\n      </div>\n    </section>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\nimport type { PrefRailItem } from './schema';\nimport s from './Prefs.module.css';\n\n/** Props for {@link PrefsRail}. */\nexport interface PrefsRailProps {\n  items: readonly PrefRailItem[];\n  /** Path of the open depth-0 group. */\n  section: string;\n  /** Path of the depth-1 group in view, from the pane's scroll spy. */\n  current: string | null;\n  /** A depth-0 entry was chosen: open its pane. */\n  onOpen: (path: string) => void;\n  /** A depth-1 entry was chosen: scroll the open pane to it. */\n  onScrollTo: (path: string) => void;\n  /** Accessible name for the rail's landmark. */\n  ariaLabel: string;\n  /** Rendered above the list — the filter field, when there is one. */\n  header?: ReactNode;\n  /** Show each entry's match count. Only meaningful while filtering. */\n  showCounts?: boolean;\n}\n\n/**\n * The rail beside a `PrefsForm` pane: depth-0 groups, each followed by the\n * depth-1 groups that scroll within it.\n *\n * A list of buttons rather than a tablist, because only half of these entries\n * switch anything — the nested ones scroll the pane the selected entry already\n * opened, and a tab that does not own a panel has no honest role. The open\n * group is `aria-current=\"page\"`; the nested group in view is\n * `aria-current=\"location\"`.\n */\nexport function PrefsRail(props: PrefsRailProps) {\n  const { items, section, current, onOpen, onScrollTo, ariaLabel, header, showCounts } = props;\n  const activate = (index: number): void => {\n    const item = items[index];\n    if (!item) return;\n    if (item.depth === 0) onOpen(item.path);\n    else onScrollTo(item.path);\n  };\n  const roving = useRovingTabIndex<HTMLDivElement>({\n    items: items.map(() => ({})),\n    itemClassName: s.railItem,\n    tabStopIndex: Math.max(0, items.findIndex((i) => i.path === section)),\n  });\n\n  return (\n    <nav className={s.rail} aria-label={ariaLabel}>\n      {header}\n      <div className={s.railList} ref={roving.rootRef}>\n        {items.map((item, index) => {\n          const open = item.depth === 0 && item.path === section;\n          const inView = item.depth === 1 && item.path === current;\n          return (\n            <button\n              key={item.path === '' ? '\\u0000root' : item.path}\n              type=\"button\"\n              className={[s.railItem, item.depth === 1 && s.railSub, open && s.railOpen, inView && s.railInView]\n                .filter(Boolean)\n                .join(' ')}\n              aria-current={open ? 'page' : inView ? 'location' : undefined}\n              tabIndex={roving.tabIndexFor(index)}\n              onKeyDown={roving.onKeyDown(index)}\n              onClick={() => activate(index)}\n            >\n              <span className={s.railName}>{item.name}</span>\n              {showCounts ? <span className={s.railCount}>{item.matches}</span> : null}\n            </button>\n          );\n        })}\n      </div>\n    </nav>\n  );\n}\n","import { useMemo, useRef, useState, type ReactNode } from 'react';\nimport { Input } from '../Input';\nimport { useScrollSpy } from '../../useScrollSpy';\nimport {\n  filterPrefSubtree,\n  isPrefLeaf,\n  prefRailItems,\n  visiblePrefSubtree,\n  type PrefGroup,\n} from './schema';\nimport { PrefRow, type PrefRenderer, type WalkCtx } from './PrefsRow';\nimport { PrefsPane } from './PrefsPane';\nimport { PrefsRail } from './PrefsRail';\nimport s from './Prefs.module.css';\n\nexport type { PrefRenderer, PrefRenderContext } from './PrefsRow';\n\n/** How a {@link PrefsForm} lays its groups out. */\nexport type PrefsLayout = 'columns' | 'rail';\n\n/** Props for {@link PrefsForm}. */\nexport interface PrefsFormProps {\n  /** Root of the schema tree. Core `ToolPrefGroup`s assign structurally. */\n  schema: PrefGroup;\n  /** Nested value tree (shape mirrors the schema). Sparse is fine —\n   *  missing leaves fall back to their schema `default`. */\n  values?: unknown;\n  /** Change callback with the leaf's dotted path. Values apply live;\n   *  there is no dirty/commit state. */\n  onChange: (path: string, value: unknown) => void;\n  /**\n   * Per-kind renderers for app-defined kinds. Entries also override the\n   * built-in kinds when keys collide. A renderer owns the control cell\n   * (the label/tooltip row chrome stays with the form, unless the leaf\n   * sets `block`); returning `null` collapses the row entirely. Unknown\n   * kinds with no renderer show a labeled placeholder instead of\n   * crashing.\n   */\n  renderers?: Record<string, PrefRenderer>;\n  /** Reveal `hidden` leaves (dev tooling). Default false. */\n  showHidden?: boolean;\n  /**\n   * `'columns'` (the default) wraps each top-level group into its own panel\n   * column. `'rail'` puts a two-level navigation rail beside one group's\n   * settings at a time — what a dialog-sized surface wants, since columns\n   * overflow sideways once there are more than two.\n   */\n  layout?: PrefsLayout;\n  /** Show a filter field that narrows the form to matching leaves. */\n  filterable?: boolean;\n  /** Rail layout: path of the open top-level group. Controlled. */\n  section?: string;\n  /** Rail layout: path of the group open before the reader picks one.\n   *  Defaults to the first in the schema. */\n  defaultSection?: string;\n  onSectionChange?: (path: string) => void;\n  className?: string;\n}\n\n/**\n * Schema-driven preferences form. Leaves render as label + control rows;\n * how the groups around them are arranged is `layout`'s to say — columns of\n * panels, or a navigation rail beside one group at a time.\n *\n * Storage-agnostic: pair with `PrefsDialog` for the modal composition, and\n * persist however the app likes via `onChange`.\n */\nexport function PrefsForm(props: PrefsFormProps) {\n  const {\n    schema,\n    values,\n    onChange,\n    renderers,\n    showHidden = false,\n    layout = 'columns',\n    filterable = false,\n    className,\n  } = props;\n  const [query, setQuery] = useState('');\n  const root = useMemo(() => {\n    const visible = visiblePrefSubtree(schema, showHidden);\n    return visible === null ? null : filterPrefSubtree(visible, query);\n  }, [schema, showHidden, query]);\n\n  const ctx: WalkCtx = { values, onChange, renderers };\n  const field = filterable ? (\n    <div className={s.filter}>\n      <Input\n        value={query}\n        onChange={setQuery}\n        aria-label={`Filter ${schema.name}`}\n        placeholder=\"Filter settings\"\n      />\n    </div>\n  ) : null;\n\n  if (layout === 'rail') {\n    return (\n      <RailLayout\n        {...props}\n        root={root}\n        ctx={ctx}\n        query={query}\n        filterField={field}\n        onClearFilter={() => setQuery('')}\n      />\n    );\n  }\n\n  return (\n    <div className={[s.columnsLayout, className].filter(Boolean).join(' ')}>\n      {field}\n      {root === null ? (\n        <NoMatches query={query} onClear={() => setQuery('')} />\n      ) : (\n        <div className={s.columns}>\n          {Object.entries(root.children).map(([key, child]) => (\n            <div key={key} className={s.column}>\n              {isPrefLeaf(child) ? (\n                // Top-level leaves are unusual but legal — give each its own\n                // column for symmetry with grouped siblings.\n                <PrefRow ctx={ctx} path={key} pref={child} />\n              ) : (\n                <GroupBody ctx={ctx} group={child} path={key} depth={0} />\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** The rail layout's own state: which group is open, and where the pane is\n *  scrolled to within it. Split out so the columns layout runs none of it. */\nfunction RailLayout(props: PrefsFormProps & {\n  root: PrefGroup | null;\n  ctx: WalkCtx;\n  query: string;\n  filterField: ReactNode;\n  onClearFilter: () => void;\n}) {\n  const { schema, root, ctx, query, filterField, onClearFilter, className } = props;\n  const items = useMemo(() => (root === null ? [] : prefRailItems(root)), [root]);\n  const [uncontrolled, setUncontrolled] = useState(\n    () => props.defaultSection ?? '',\n  );\n  const requested = props.section ?? uncontrolled;\n  // A filter can take the open group out of the rail entirely, and a section\n  // the schema never had can arrive from a consumer's stale state. Either way\n  // the first surviving entry is what the reader should be looking at.\n  const open = items.some((i) => i.path === requested && i.depth === 0)\n    ? requested\n    : (items.find((i) => i.depth === 0)?.path ?? '');\n\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n  const sectionIds = useMemo(\n    () => items.filter((i) => i.depth === 1 && i.section === open).map((i) => i.path),\n    [items, open],\n  );\n  const spy = useScrollSpy({ rootRef: scrollRef, ids: sectionIds });\n\n  const setOpen = (path: string): void => {\n    if (props.section === undefined) setUncontrolled(path);\n    props.onSectionChange?.(path);\n    // Optional-called: jsdom's elements have no `scrollTo`, and neither does\n    // a pane that is not the scrolling box in some consumer's layout.\n    scrollRef.current?.scrollTo?.({ top: 0 });\n  };\n\n  const group = root === null ? null : paneGroup(root, open, schema.name);\n\n  return (\n    <div className={[s.railLayout, className].filter(Boolean).join(' ')}>\n      <PrefsRail\n        items={items}\n        section={open}\n        current={spy.active}\n        onOpen={setOpen}\n        onScrollTo={spy.scrollTo}\n        ariaLabel={schema.name}\n        header={filterField}\n        showCounts={query.trim() !== ''}\n      />\n      {group === null ? (\n        <div className={s.pane}>\n          <NoMatches query={query} onClear={onClearFilter} />\n        </div>\n      ) : (\n        <PrefsPane ctx={ctx} group={group} path={open} scrollRef={scrollRef} />\n      )}\n    </div>\n  );\n}\n\n/**\n * The group a rail path opens. The empty path is the root's loose leaves,\n * which belong to no group of their own and are handed back as one named for\n * the schema — the rail lists them under the same name.\n */\nfunction paneGroup(root: PrefGroup, path: string, rootName: string): PrefGroup | null {\n  if (path === '') {\n    const children = Object.fromEntries(\n      Object.entries(root.children).filter(([, child]) => isPrefLeaf(child)),\n    );\n    return Object.keys(children).length === 0\n      ? null\n      : { ...root, name: rootName, children };\n  }\n  let node: PrefGroup | undefined;\n  let cursor = root;\n  for (const seg of path.split('.')) {\n    const next = cursor.children[seg];\n    if (next === undefined || isPrefLeaf(next)) return null;\n    node = next;\n    cursor = next;\n  }\n  return node ?? null;\n}\n\n/** What a filter matching nothing leaves behind. */\nfunction NoMatches({ query, onClear }: { query: string; onClear: () => void }) {\n  return (\n    <div className={s.noMatches}>\n      <p>No settings match “{query.trim()}”.</p>\n      <button type=\"button\" className={s.clearFilter} onClick={onClear}>\n        Clear filter\n      </button>\n    </div>\n  );\n}\n\nfunction GroupBody({ ctx, group, path, depth }: {\n  ctx: WalkCtx;\n  group: PrefGroup;\n  path: string;\n  depth: number;\n}) {\n  return (\n    <div className={depth === 0 ? s.panel : s.subpanel}>\n      <div className={s.groupHeader}>\n        <h3 className={s.groupTitle}>{group.name}</h3>\n        {group.description !== undefined && (\n          <p className={s.groupDesc}>{group.description}</p>\n        )}\n      </div>\n      <div className={s.rows}>\n        {Object.entries(group.children).map(([key, child]) => {\n          const childPath = `${path}.${key}`;\n          return isPrefLeaf(child) ? (\n            <PrefRow key={key} ctx={ctx} path={childPath} pref={child} />\n          ) : (\n            <GroupBody key={key} ctx={ctx} group={child} path={childPath} depth={depth + 1} />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n","import type { ReactNode } from 'react';\nimport { Dialog } from '../Dialog';\nimport { PrefsForm, type PrefsFormProps } from './PrefsForm';\nimport s from './Prefs.module.css';\n\n/**\n * Props for {@link PrefsDialog} — everything {@link PrefsForm} takes, plus\n * the dialog's own open state and chrome.\n */\nexport interface PrefsDialogProps extends PrefsFormProps {\n  isOpen: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Dialog heading. Defaults to the schema root's `name`. */\n  title?: ReactNode;\n  /** Extra chrome rendered at the end of the title row (e.g. a dev-mode\n   *  \"Show hidden\" switch). An action the reader acts on when they are done\n   *  — resetting, importing — belongs in `footer` instead, where a dialog's\n   *  actions live. */\n  headerExtra?: ReactNode;\n  /** Footer slot, passed through to `Dialog` — typically a reset or done\n   *  action. */\n  footer?: ReactNode;\n  /** Class applied to the dialog's modal box. */\n  dialogClassName?: string;\n}\n\n/**\n * The kit's preferences dialog: `Dialog` + `PrefsForm`. Changes apply\n * live through `onChange` — there is no OK/Cancel staging. For custom\n * placement (sidebar, popover, inline page), compose `PrefsForm`\n * directly; this wrapper is intentionally thin.\n *\n * `layout=\"rail\"` is what a dialog usually wants: the default columns wrap\n * sideways past two groups, and this box is 900px at its widest.\n */\nexport function PrefsDialog(props: PrefsDialogProps) {\n  const { isOpen, onOpenChange, title, headerExtra, footer, dialogClassName, ...form } = props;\n  const rail = form.layout === 'rail';\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      aria-label={typeof title === 'string' ? title : form.schema.name}\n      className={dialogClassName}\n      footer={footer}\n      bodyClassName={rail ? s.railBody : undefined}\n      title={\n        headerExtra !== undefined ? (\n          <span className={s.titleRow}>\n            <span>{title ?? form.schema.name}</span>\n            {headerExtra}\n          </span>\n        ) : (\n          title ?? form.schema.name\n        )\n      }\n    >\n      <PrefsForm {...form} />\n    </Dialog>\n  );\n}\n"],"mappings":"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"}