@weasel-js/labkit 1.6.1 → 1.7.1

package/dist/passthrough/weasel-ui.d.ts

@@ -1,2701 +1,2 @@
-import { j as ToggleBarSize, k as ToggleBarVariant, l as SegmentTooltipFields, F as FieldOrientation, O as OverlayPortalProps, W as WithoutPortalTarget } from '../_dts/Select.d-Cr8-zoup.js';
-export { B as Button, a as ButtonProps, b as ButtonSize, c as ButtonVariant, m as Field, n as FieldProps, o as ICON_PATHS, d as Icon, p as IconName, I as IconProps, e as Input, f as InputProps, S as Select, q as SelectItem, r as SelectItemProps, s as SelectOption, g as SelectProps, T as ToggleBar, h as ToggleBarItem, i as ToggleBarProps, t as fieldClasses } from '../_dts/Select.d-Cr8-zoup.js';
-import { ToolPrefLeaf, ToolPrefGroup, ToolsApi, oklchDegToHex } from '@weasel-js/core';
-export { ToolPref as BuiltinPref, ToolPrefBoolean as PrefBoolean, ToolPrefBooleanControl as PrefBooleanControl, ToolPrefColor as PrefColor, ToolPrefCustom as PrefCustom, ToolPrefEnum as PrefEnum, ToolPrefEnumControl as PrefEnumControl, ToolPrefEnumEncoding as PrefEnumEncoding, ToolPrefGroup as PrefGroup, ToolPrefKind as PrefKind, ToolPrefLeaf as PrefLeaf, ToolPrefNumber as PrefNumber, ToolPrefNumberControl as PrefNumberControl, ToolPrefNumberUnit as PrefNumberUnit, ToolPrefObject as PrefObject, ToolPrefPaint as PrefPaint, ToolPrefString as PrefString, ToolPrefStringControl as PrefStringControl } from '@weasel-js/core';
-import * as react from 'react';
-import { ReactNode, CSSProperties, HTMLAttributes, ReactElement, PointerEvent, RefCallback, KeyboardEvent, RefObject } from 'react';
-import { S as StanceProps, P as PrefRenderer } from '../_dts/PrefsRow.d-DFpPIeIC.js';
-export { a as PrefRenderContext } from '../_dts/PrefsRow.d-DFpPIeIC.js';
-export { L as LayerList, a as LayerListItem, b as LayerListProps, c as LayerMove, m as moveLayers } from '../_dts/LayerList.d-BoELAMsM.js';
-import { ColorModePreference } from '@weasel-js/theme';
-export { M as MINUS_SIGN, q as PropertyAlign, r as PropertyDensity, P as PropertyMetricProps, s as formatNumber } from '../_dts/PropertyField.d-D0ndfIIt.js';
-import { CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, ValidationResult, NumberFieldProps as NumberFieldProps$1, ComboBoxProps as ComboBoxProps$1, ListBoxItemProps, SliderProps as SliderProps$1, ModalOverlayProps, DialogProps as DialogProps$1, PopoverProps } from 'react-aria-components';
-export { DialogTrigger as CalloutTrigger } from 'react-aria-components';
-
-/**
- * Namespaced, opt-in console tracing. Off by default; production builds
- * may strip the calls entirely depending on the bundler.
- *
- * Enable in the browser:
- *
- *   localStorage.setItem('weasel.debug', '*')               // all namespaces
- *   localStorage.setItem('weasel.debug', 'curve-editor')    // just curve editor
- *   localStorage.setItem('weasel.debug', 'curve-editor,layer-stack')
- *
- * Each component picks a stable namespace and calls `dlog(namespace, ...)`.
- * Useful for tracing pointer/event flows that are hard to capture
- * post-hoc (drag handlers, gesture sequences, selection mutations).
- *
- * The flag is read once and cached for the page session — reload to
- * pick up changes. Cheap hot-path checks (one nullish-coalesce + Set
- * lookup) so leaving calls in place is fine.
- *
- * Mirrors `src/debug/flag.ts` in the kit. Two impls live here because
- * weasel-ui doesn't depend on the kit, but both read the same
- * localStorage keys so behavior is uniform. See the kit copy for the
- * canonical list of kit-level namespaces.
- *
- * Known weasel-ui namespaces:
- *   - plot2d        — Plot2D mount / unmount
- *   - curve-editor  — CurveEditor pointer flow
- */
-/** True when `namespace` (or `*`) is enabled. */
-declare function isDebugEnabled(namespace: string): boolean;
-/** Conditional `console.debug` — no-op unless `namespace` (or `*`) is enabled.
- *  Each call is prefixed with `[namespace]` so the source is searchable. */
-declare function dlog(namespace: string, ...args: unknown[]): void;
-
-/** Props for {@link ActionBar}. */
-interface ActionBarProps {
-    /** Group key — only actions with `action.group === group` are rendered. */
-    group: string;
-    /** Layout direction. Defaults to `'horizontal'`. */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * Per-entry icon overrides, keyed by `ActionItem.key` — the action id, or
-     * `id:variant` for one variant of a parametric action. When an entry is provided
-     * it replaces the action's own `icon` for this bar only. Mirrors
-     * `PathfinderPanelProps.icons` so call sites that ship custom glyph sets
-     * can swap them in without re-registering actions.
-     */
-    icons?: Record<string, ReactNode>;
-    /**
-     * Per-entry label overrides, keyed like `icons`. Drives both `aria-label`
-     * and `title`. When omitted, the entry's own `label` is used.
-     */
-    labels?: Record<string, string>;
-    /** Additional class for the toolbar root. */
-    className?: string;
-}
-/**
- * Generic group-keyed action toolbar. Reads the parent `ActionsRegistry`,
- * filters to actions whose `group` matches `props.group`, and renders one
- * icon button per match — or per variant, for an action that declares
- * `variants`. Disabled state is derived from each action's
- * `enabled` predicate via `evaluateEnabled` (so the button greys out and
- * swallows clicks while the keybinding — if any — still fires through the
- * registry's keydown listener; that's the registry's contract, not ours).
- *
- * Visual parity with the WeaselDraw `<PathfinderPanel>` is intentional;
- * this is the generic, registry-driven version. No keyboard navigation
- * (roving tabindex) yet — bar consumers today are short flat strips. Add
- * if/when a long bar lands.
- */
-declare function ActionBar(props: ActionBarProps): react.JSX.Element;
-
-/**
- * Built-in badge silhouettes. `pill`, `plain` and `square` are drawn in CSS;
- * the rest are SVG outlines, several of which route through the compose
- * pipeline (a base shape plus perimeter effects).
- */
-type BadgeShape = 'pill' | 'plain' | 'square' | 'notched' | 'perforated' | 'hexagon' | 'starburst' | 'scalloped' | 'shield' | 'ribbon' | 'beavis' | 'sparkler' | 'postage' | 'cloud' | 'house' | 'plaque' | 'crest' | 'urn' | 'coffin' | 'receipt' | 'wood' | 'quatrefoil';
-/**
- * Status color of a badge. `custom` paints from the `--badge-edge` custom
- * property instead of a theme token, so a call site can supply its own color.
- */
-type BadgeStatus = 'accent' | 'info' | 'success' | 'warn' | 'danger' | 'muted' | 'neutral' | 'custom';
-/** How a badge's color is applied: outline only, filled, or a soft tinted fill. */
-type BadgeVariant = 'outline' | 'solid' | 'subtle';
-/** Badge type scale and padding step. `xs` is for counts and markers set
- *  inside a dense row, on the 2xs type step. */
-type BadgeSize = 'xs' | 'sm' | 'md';
-
-interface SquareParams {
-    /** 0..1 fraction of the maximum corner rounding (1 = full pill). */
-    erosion?: number;
-}
-
-interface NotchedParams {
-    /** 0..1 fraction of max corner radius. */
-    erosion?: number;
-    /** rx/ry eccentricity of the corner arcs. */
-    eccentricity?: number;
-}
-
-interface PerforatedParams {
-    holeRadius?: number;
-    holePitch?: number;
-}
-
-interface HexagonParams {
-    tipHeight?: number;
-    /** Truncate the top and bottom tips, leaving a horizontal flat edge.
-     *  Measured as a distance from each tip vertically (0 = sharp point, tipHeight = fully flat). */
-    tipTruncation?: number;
-}
-
-interface StarburstParams {
-    points?: number;
-    outerR?: number;
-    innerR?: number;
-    rotation?: number;
-    erosion?: number;
-}
-
-interface ScallopedParams {
-    scallopRadius?: number;
-    scallopSpacing?: number;
-    irregularity?: number;
-}
-
-interface ShieldParams {
-    pointDepth?: number;
-    shoulderY?: number;
-    curveTightness?: number;
-    /** 0..1 fraction of max top-corner rounding. */
-    erosion?: number;
-}
-
-type RibbonEnd$1 = 'inward' | 'outward' | 'flat';
-interface RibbonParams$1 {
-    left?: RibbonEnd$1;
-    right?: RibbonEnd$1;
-    /** Taper depth in CSS px. The actual pointer width stays fixed regardless
-     *  of badge width — the underlying base recomputes viewBox vertices at
-     *  build time using the rendered box dimensions. */
-    taperWidth?: number;
-}
-
-interface BeavisParams {
-    points?: number;
-    cornerRadius?: number;
-    spikeLen?: number;
-    spikeBaseWidth?: number;
-    irregularity?: number;
-}
-
-interface SparklerParams {
-    points?: number;
-    outerR?: number;
-    innerR?: number;
-    rotation?: number;
-}
-
-interface PostageParams {
-    biteRadius?: number;
-    biteSpacing?: number;
-    irregularity?: number;
-}
-
-interface CloudParams {
-    bumpWidth?: number;
-    puffiness?: number;
-    /** 0..1 fraction of max body roundness. */
-    erosion?: number;
-    irregularity?: number;
-}
-
-interface HouseParams {
-    eaveY?: number;
-    peakHeight?: number;
-    roofOverhang?: number;
-}
-
-type PlaqueCorner = 'tl' | 'tr' | 'bl' | 'br';
-interface PlaqueParams {
-    bevelWidth?: number;
-    lightFrom?: PlaqueCorner;
-    rivetRadius?: number;
-    rivetInset?: number;
-    sheenIntensity?: number;
-}
-
-interface CrestParams {
-    topInset?: number;
-    pointDepth?: number;
-}
-
-interface CoffinParams {
-    headX?: number;
-    headHalfHeight?: number;
-    shoulderX?: number;
-    shoulderHalfHeight?: number;
-    footX?: number;
-    footHalfHeight?: number;
-}
-
-interface ReceiptParams {
-    teeth?: number;
-    tearDepth?: number;
-    sideToTopRatio?: number;
-}
-
-interface QuatrefoilParams$1 {
-    spikeR?: number;
-    lobeR?: number;
-    valleyR?: number;
-    valleyAt?: number;
-    spikeCurvature?: number;
-    spikeBend?: number;
-    spikeTipErosion?: number;
-    lobeCurvature?: number;
-    lobeBend?: number;
-    lobeTipErosion?: number;
-    valleySmooth?: number;
-    rotation?: number;
-    samples?: number;
-}
-
-interface BadgeShapeParams {
-    pill: Record<string, never>;
-    plain: Record<string, never>;
-    square: SquareParams;
-    notched: NotchedParams;
-    perforated: PerforatedParams;
-    hexagon: HexagonParams;
-    starburst: StarburstParams;
-    scalloped: ScallopedParams;
-    shield: ShieldParams;
-    ribbon: RibbonParams$1;
-    beavis: BeavisParams;
-    sparkler: SparklerParams;
-    postage: PostageParams;
-    cloud: CloudParams;
-    house: HouseParams;
-    plaque: PlaqueParams;
-    crest: CrestParams;
-    urn: Record<string, never>;
-    coffin: CoffinParams;
-    receipt: ReceiptParams;
-    wood: Record<string, never>;
-    quatrefoil: QuatrefoilParams$1;
-}
-
-interface ChamferedRectParams {
-    /** CSS px length of each 45° corner chamfer. */
-    chamfer?: number;
-}
-
-interface RoundedRectParams {
-    /** 0..1 fraction of the maximum corner rounding (1 = full pill / ellipse). */
-    erosion?: number;
-    /** Stretch the corner arcs horizontally vs vertically. 1 = circular at the badge's
-     *  native aspect; >1 wider corner arcs; <1 taller corner arcs. */
-    eccentricity?: number;
-    /** 0..1 vertical squeeze applied to the left and right ends, linearly tapering toward
-     *  the middle. 1 = ends fully collapsed to the centerline (lemon/lens silhouette). */
-    pinch?: number;
-}
-
-interface PolygonParams {
-    /** Vertices in viewBox 0..100 coordinates, traced clockwise. */
-    vertices?: [number, number][];
-}
-
-type PuzzleEdge = 'flat' | 'out' | 'in';
-interface PuzzleParams {
-    top?: PuzzleEdge;
-    right?: PuzzleEdge;
-    bottom?: PuzzleEdge;
-    left?: PuzzleEdge;
-    /** Tab radius in viewBox units (0..50). */
-    tabSize?: number;
-    /** Sample density per tab arc. */
-    arcSamples?: number;
-}
-
-/**
- * 8-fold-symmetric polar shape. The whole silhouette is defined by a single curve r(s)
- * over s ∈ [0, 1], where s=0 is the cardinal direction and s=1 is the diagonal. The full
- * shape comes from reflecting that octant curve eight times around the center. The curve
- * itself is two superellipse segments meeting at a valley:
- *
- *   s ∈ [0, valleyAt]      → spike segment, from `spikeR` down to `valleyR`
- *   s ∈ [valleyAt, 1]      → lobe segment, from `valleyR` up to `lobeR`
- *
- * Each segment has its own curvature, bend bias, and tip-erosion controls.
- */
-interface QuatrefoilParams {
-    /** Radius at s=0 (cardinal direction). */
-    spikeR?: number;
-    /** Radius at s=1 (diagonal direction). */
-    lobeR?: number;
-    /** Radius at the junction between spike and lobe segments. */
-    valleyR?: number;
-    /** Position of the junction in [0, 1]. 0.5 = symmetric octant; <0.5 narrows the spike side. */
-    valleyAt?: number;
-    /** Spike-segment curvature (superellipse exponent). 1 = flat diagonal sides; <1 caves
-     *  inward (concave/star); >1 bulges outward (convex/square-shouldered). */
-    spikeCurvature?: number;
-    /** Spike-segment bend bias. Positive shifts the curve's bend toward the tip; negative
-     *  toward the base. */
-    spikeBend?: number;
-    /** Flat-top truncation of the cardinal tip (0..1). */
-    spikeTipErosion?: number;
-    /** Lobe-segment curvature, same semantics as spike. */
-    lobeCurvature?: number;
-    /** Lobe-segment bend bias. */
-    lobeBend?: number;
-    /** Flat-top truncation of the diagonal lobe peak (0..1). */
-    lobeTipErosion?: number;
-    /** Smooth the corner at the valley junction. 0 = sharp, higher = puffier crossover. */
-    valleySmooth?: number;
-    /** Rotate the pattern in degrees. */
-    rotation?: number;
-    /** Polygon sample count. */
-    samples?: number;
-}
-
-/**
- * Symmetric polar-spline base. The silhouette comes from a single curve r(s) over
- * s ∈ [0, 1] that gets reflected/rotated to fill the full circle:
- *
- *  - `mode: 'octant'`: 1/8 of the perimeter (cardinal → diagonal), mirrored within each
- *    quadrant and rotated to fill the rest. 8-fold symmetric.
- *  - `mode: 'quadrant'`: 1/4 of the perimeter (cardinal → next cardinal), rotated 4 times
- *    with no internal mirror. 4-fold rotational symmetry; endpoints share radius.
- *
- * The interpolant is a **clamped natural cubic spline** with zero slope at both endpoints
- * (so the reflected/rotated full curve has no kink crossing the symmetry axes). C² across
- * the whole octant — continuous curvature, not just slope — which removes the "lumpy" feel
- * that local Hermite splines have when anchors are uneven.
- */
-interface OctantSplineParams {
-    mode?: 'octant' | 'quadrant';
-    /** Number of active anchors (3..12). */
-    count?: number;
-    s0?: number;
-    s1?: number;
-    s2?: number;
-    s3?: number;
-    s4?: number;
-    s5?: number;
-    s6?: number;
-    s7?: number;
-    s8?: number;
-    s9?: number;
-    s10?: number;
-    s11?: number;
-    r0?: number;
-    r1?: number;
-    r2?: number;
-    r3?: number;
-    r4?: number;
-    r5?: number;
-    r6?: number;
-    r7?: number;
-    r8?: number;
-    r9?: number;
-    r10?: number;
-    r11?: number;
-    /** Per-anchor weight (0..3). The spline is constructed to pass through every anchor exactly;
-     *  the weight biases how strongly that anchor influences the rest of the curve. Implementation
-     *  detail: blends the C² interpolant with a polynomial fit weighted by w. Default 1 = pure
-     *  C² interpolation; <1 lets the curve sweep past the anchor (anchor still passed through);
-     *  >1 makes the curve hug the anchor more tightly (sharper local bend). */
-    w0?: number;
-    w1?: number;
-    w2?: number;
-    w3?: number;
-    w4?: number;
-    w5?: number;
-    w6?: number;
-    w7?: number;
-    w8?: number;
-    w9?: number;
-    w10?: number;
-    w11?: number;
-    rotation?: number;
-    samples?: number;
-}
-
-/**
- * Symmetric polar NURBS base. Same anchor concept as `octant-spline` but the curve is an
- * **approximating** cubic NURBS — the control points pull the curve without sitting on it.
- * Each anchor's weight increases the local pull toward that control point.
- *
- * Endpoint behaviour: the curve uses mirror-phantom control points just outside [0, 1]
- * derived from the second-from-end anchors, which enforces zero slope at s=0 and s=1 so
- * the reflected/rotated full silhouette closes cleanly across the symmetry axes.
- */
-interface OctantBSplineParams {
-    mode?: 'octant' | 'quadrant';
-    count?: number;
-    s0?: number;
-    s1?: number;
-    s2?: number;
-    s3?: number;
-    s4?: number;
-    s5?: number;
-    s6?: number;
-    s7?: number;
-    s8?: number;
-    s9?: number;
-    s10?: number;
-    s11?: number;
-    r0?: number;
-    r1?: number;
-    r2?: number;
-    r3?: number;
-    r4?: number;
-    r5?: number;
-    r6?: number;
-    r7?: number;
-    r8?: number;
-    r9?: number;
-    r10?: number;
-    r11?: number;
-    w0?: number;
-    w1?: number;
-    w2?: number;
-    w3?: number;
-    w4?: number;
-    w5?: number;
-    w6?: number;
-    w7?: number;
-    w8?: number;
-    w9?: number;
-    w10?: number;
-    w11?: number;
-    rotation?: number;
-    samples?: number;
-}
-
-type RibbonEnd = 'inward' | 'outward' | 'flat';
-interface RibbonParams {
-    left?: RibbonEnd;
-    right?: RibbonEnd;
-    /** Taper depth in CSS px. Stays fixed regardless of badge width — viewBox
-     *  vertices are computed at build time using `boxW`. */
-    taperWidth?: number;
-}
-
-/**
- * Shapes one vertical edge of a badge base. Given a position down the edge
- * (`t`, 0 at the top to 1 at the bottom) and the configured depth in CSS px,
- * returns the horizontal displacement of that point, positive to the right.
- */
-type EdgeProfile = (t: number, depth: number) => number;
-/** The named edge profiles in {@link EDGE_PROFILES}. */
-type BuiltInEdgeName = 'flat' | 'chevron' | 'slant' | 'slant-up' | 'round' | 'scallop' | 'concave-chevron';
-/** An edge profile, either by name or as a function. */
-type EdgeCap = BuiltInEdgeName | EdgeProfile;
-/** The built-in {@link EdgeProfile} implementations, by name. */
-declare const EDGE_PROFILES: Record<BuiltInEdgeName, EdgeProfile>;
-
-interface PowerlineParams {
-    /** Profile for the left edge (the cap segment N inherits from segment N-1). */
-    leftEdge?: EdgeCap;
-    /** Profile for the right edge (this segment's own end cap). */
-    rightEdge?: EdgeCap;
-    /** Protrusion depth in CSS px (positive values stick out beyond the rect). */
-    depth?: number;
-}
-
-type BadgeBase = 'chamfered-rect' | 'rounded-rect' | 'polygon' | 'puzzle' | 'quatrefoil' | 'octant-spline' | 'octant-bspline' | 'ribbon' | 'powerline';
-interface BadgeBaseParams {
-    'chamfered-rect': ChamferedRectParams;
-    'rounded-rect': RoundedRectParams;
-    'polygon': PolygonParams;
-    'puzzle': PuzzleParams;
-    'quatrefoil': QuatrefoilParams;
-    'octant-spline': OctantSplineParams;
-    'octant-bspline': OctantBSplineParams;
-    'ribbon': RibbonParams;
-    'powerline': PowerlineParams;
-}
-
-interface RangeMaskParams {
-    /** Optional `[start, end]` as fractions of totalCss (0..1). Restricts the effect to a
-     *  contiguous slice of the perimeter; `end < start` wraps around. */
-    range?: [number, number];
-}
-
-interface SpikesEffectParams extends RangeMaskParams {
-    count?: number;
-    length?: number;
-    baseWidth?: number;
-    vertScale?: number;
-    horzScale?: number;
-    diagonalScale?: number;
-    irregularity?: number;
-    /**
-     * 0..1 strength of curvature-based shortening on corners. At 1 we fully cancel the tip-arc
-     * expansion `(1 + κL)` so neighbouring spike tips stay roughly evenly spaced even on tight
-     * corner arcs; at 0 spikes are constant length and visibly fan outward around corners.
-     */
-    cornerCompensation?: number;
-}
-
-interface PuffsEffectParams extends RangeMaskParams {
-    bumpWidth?: number;
-    puffiness?: number;
-    irregularity?: number;
-}
-
-interface BitesEffectParams extends RangeMaskParams {
-    biteRadius?: number;
-    biteSpacing?: number;
-    irregularity?: number;
-}
-
-interface ScallopsEffectParams extends RangeMaskParams {
-    scallopRadius?: number;
-    scallopSpacing?: number;
-    irregularity?: number;
-}
-
-type Corner$2 = 'tl' | 'tr' | 'bl' | 'br';
-interface BevelEffectParams {
-    /** Bevel band width in CSS px. */
-    bevelWidth?: number;
-    /** Which corner the light originates from (drives the highlight/shadow distribution across edges). */
-    lightFrom?: Corner$2;
-}
-
-type Corner$1 = 'tl' | 'tr' | 'bl' | 'br';
-interface SheenEffectParams {
-    lightFrom?: Corner$1;
-    /** Peak gradient opacity (0..1). */
-    intensity?: number;
-}
-
-type Corner = 'tl' | 'tr' | 'bl' | 'br';
-interface RivetsEffectParams {
-    /** Rivet radius in CSS px. */
-    radius?: number;
-    /** Inset from each corner in CSS px. */
-    inset?: number;
-    /** Light origin (drives which side of each rivet gets the highlight). */
-    lightFrom?: Corner;
-}
-
-interface ShadowEffectParams {
-    /** Offset in CSS px. */
-    dx?: number;
-    dy?: number;
-    /** Alpha 0..1. */
-    opacity?: number;
-}
-
-interface WoodgrainEffectParams {
-    /** Number of grain curves. */
-    lines?: number;
-    /** Number of knot circles. */
-    knots?: number;
-    /** Overall grain opacity (0..1). */
-    intensity?: number;
-}
-
-interface PerforationsEffectParams extends RangeMaskParams {
-    /** Hole radius in CSS px. */
-    holeRadius?: number;
-    /** Spacing between hole centers along the perimeter, in CSS px. */
-    holeSpacing?: number;
-}
-
-interface Bevel2EffectParams {
-    /** Bevel band width in CSS px. */
-    bevelWidth?: number;
-    /** Compass angle the light originates from, in degrees. 0° = top, 90° =
-     *  right, 180° = bottom, 270° = left (CSS `linear-gradient` convention). */
-    lightFrom?: number;
-}
-
-interface OutlineEffectParams {
-    /** Stroke width in CSS px. */
-    width?: number;
-    /** Stroke color. */
-    color?: string;
-    /** Optional SVG dasharray (e.g. "4 2"). */
-    dash?: string;
-    /** CSS mix-blend-mode: 'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten',
-     *  'difference', etc. Useful when the outline color should react to whatever's behind it. */
-    blendMode?: string;
-    /** 0..1 stroke opacity. */
-    opacity?: number;
-}
-
-interface SunbeamsEffectParams {
-    /** Number of beams (parallelograms) cast across the body. */
-    count?: number;
-    /** Beam width in CSS px (measured horizontally before the skew). */
-    width?: number;
-    /** Gap between adjacent beams in CSS px. */
-    gap?: number;
-    /** Skew angle in degrees. 0 = vertical bars; positive = leaning right. */
-    angle?: number;
-    /** 0..1 lightness opacity. */
-    opacity?: number;
-    /** Beam color. Defaults to white. */
-    color?: string;
-    /** Drift the beam pattern left/right by N CSS px (lets you slide the "window" over the body). */
-    offset?: number;
-    /** 0..1 perturbs each beam's width, opacity, and angle slightly with a deterministic
-     *  per-beam noise; 0 = perfectly regular. */
-    irregularity?: number;
-    /** Gradient mask angle in degrees. 0 = left→right, 90 = top→bottom. */
-    gradientAngle?: number;
-    /** Position along the gradient axis (0..1) where the mask is fully opaque (beams visible). */
-    gradientStart?: number;
-    /** Position along the gradient axis (0..1) where the mask is fully transparent (beams faded out). */
-    gradientEnd?: number;
-}
-
-/**
- * Aqua-glass treatment — composes onto any badge silhouette by walking the
- * sampler's perimeter and painting four layered sub-effects in one pass:
- *
- *  1. Body gradient    — vertical tint that runs translucent-top through a
- *                        bright equator band into a dark base.
- *  2. Specular gloss   — upper-hemisphere white-fade clipped to the body.
- *  3. Bezel highlight  — bright stroke along perimeter segments whose
- *                        outward normal points up (`ny < 0`). On a pill that's
- *                        the upper half; on a hex it's the three top edges;
- *                        on a starburst it's the upward tips. Normal-aware,
- *                        not bbox-aligned, which is what makes it work on
- *                        arbitrary silhouettes.
- *  4. Rim outline      — faint dark stroke along the full perimeter.
- *
- * For the *truly* translucent look (with backdrop-filter blur reading the
- * surface behind the badge), use this with `variant="outline"` so the badge's
- * own flat fill doesn't paint behind the gradient, and set
- * `backdrop-filter: blur(...)` on the host element via CSS.
- */
-interface AquaEffectParams {
-    /** Body tint. Defaults to `var(--badge-edge)` so the badge's color drives it. */
-    accent?: string;
-    /** Stop opacities along the body gradient (0..1). */
-    topAlpha?: number;
-    upperAlpha?: number;
-    /** Equator Y position in viewBox units (0..100). */
-    equator?: number;
-    /** Half-width of the transition band around the equator (viewBox units). */
-    equatorSpread?: number;
-    /** Mix ratios for the bright equator and dark base stops (0..100, % accent). */
-    equatorTint?: number;
-    baseTint?: number;
-    /** Specular gloss params. */
-    glossTopAlpha?: number;
-    glossMidAlpha?: number;
-    /** Y extent the gloss covers, in viewBox units. 50 = upper hemisphere. */
-    glossExtent?: number;
-    /** Normal-aware bezel highlight. */
-    bezelAlpha?: number;
-    bezelWidth?: number;
-    /** Full-perimeter rim. */
-    rimAlpha?: number;
-    rimWidth?: number;
-}
-
-/**
- * Metal — opaque cousin of the Aqua treatment. Same four sub-passes (body
- * gradient, specular gloss, normal-aware bezel, perimeter rim), but tuned
- * for an opaque metallic surface with a single tunable `specularity`
- * parameter that drives how sharp / contrasty the highlights read.
- *
- * Low specularity → matte aluminum / brushed pewter feel: muted contrast,
- *  soft gloss, faint bezel.
- * High specularity → chrome / polished steel: sharp specular peak at the
- *  equator, bright bezel and rim, hard transitions in the body gradient.
- *
- * The same `specularity` knob multiplies the equator brightness, gloss
- * alpha, bezel alpha, and rim alpha — so one slider moves the whole
- * surface along a coherent matte-to-mirror axis.
- */
-interface MetalEffectParams {
-    /** Base metal color. Defaults to a neutral steel; pass e.g. `'#c8a657'` for brass. */
-    accent?: string;
-    /** 0 = matte, 1 = mirror. Multiplies the brightness of the equator, gloss,
-     *  bezel, and rim simultaneously. */
-    specularity?: number;
-    /** Equator Y position (viewBox units, 0..100). */
-    equator?: number;
-    /** Half-width of the bright equator band. Smaller = sharper specular. */
-    equatorSpread?: number;
-    /** How dark the upper and lower extremes are (% accent vs black, 0..100). */
-    topDarkness?: number;
-    baseDarkness?: number;
-    /** Gloss params. */
-    glossExtent?: number;
-    /** Per-zone alpha *baselines* — scaled by `specularity`. */
-    glossAlphaTop?: number;
-    bezelAlpha?: number;
-    bezelWidth?: number;
-    rimAlpha?: number;
-    rimWidth?: number;
-}
-
-type BadgeEffect = 'spikes' | 'puffs' | 'bites' | 'scallops' | 'bevel' | 'bevel2' | 'sheen' | 'sunbeams' | 'rivets' | 'shadow' | 'woodgrain' | 'perforations' | 'outline' | 'aqua' | 'metal';
-interface BadgeEffectParams {
-    spikes: SpikesEffectParams;
-    puffs: PuffsEffectParams;
-    bites: BitesEffectParams;
-    scallops: ScallopsEffectParams;
-    bevel: BevelEffectParams;
-    bevel2: Bevel2EffectParams;
-    sheen: SheenEffectParams;
-    rivets: RivetsEffectParams;
-    shadow: ShadowEffectParams;
-    woodgrain: WoodgrainEffectParams;
-    perforations: PerforationsEffectParams;
-    outline: OutlineEffectParams;
-    sunbeams: SunbeamsEffectParams;
-    aqua: AquaEffectParams;
-    metal: MetalEffectParams;
-}
-interface EffectSpec<E extends BadgeEffect = BadgeEffect> {
-    type: E;
-    params?: BadgeEffectParams[E];
-}
-
-interface BadgeBaseProps extends StanceProps {
-    /** The status the badge reports. A peer `tone`, or a stance's accent, paints over it. */
-    status?: BadgeStatus;
-    variant?: BadgeVariant;
-    size?: BadgeSize;
-    /** "Edge bloat": offset every base perimeter sample outward by N CSS px along the normal
-     *  before any compose effects run. Negative values shrink the silhouette. Photoshop-style
-     *  expand-selection on the body. */
-    bloat?: number;
-    padding?: number | string;
-    /**
-     * For CSS-rendered shapes (pill, plain) that fragment across line wraps, controls how the
-     * background/border behaves at each break.
-     * - `'slice'` (default): decoration is severed at the break (looks like one continuous badge cut by the line).
-     * - `'clone'`: each fragment paints its own complete decoration (looks like two separate badges).
-     */
-    breakStyle?: 'slice' | 'clone';
-    /** When set, perimeter-pattern shapes (beavis, cloud, postage, scalloped) continuously shift their pattern. */
-    crawl?: boolean | number;
-    /** Compose-mode: base shape underneath the badge content. When set, overrides the `shape` prop. */
-    base?: BadgeBase;
-    baseParams?: BadgeBaseParams[BadgeBase];
-    /** Compose-mode: layered effects applied around / over the base. */
-    effects?: EffectSpec[];
-    onClick?: () => void;
-    onRemove?: () => void;
-    removeLabel?: string;
-    href?: string;
-    as?: 'span' | 'button' | 'a';
-    children: ReactNode;
-    className?: string;
-    /** Optional style overrides merged with the badge's own style. Useful for setting CSS
-     *  custom properties (e.g. `--badge-edge` to inject a `custom` status color). */
-    style?: CSSProperties;
-    'aria-label'?: string;
-    /**
-     * Tooltip content. Wraps the badge in a kit tooltip trigger. A tooltip
-     * trigger must be focusable and carry a role that announces its
-     * description, so a badge that is neither a button nor a link joins the tab
-     * order as `role="img"`, named by `aria-label` or else by string content.
-     */
-    tooltip?: ReactNode;
-}
-/** DOM attributes a badge passes through to its root element, e.g. the ones
- *  `Focusable` supplies when a badge sits under a `TooltipTrigger`. */
-type BadgeDomProps = Omit<HTMLAttributes<HTMLElement>, keyof BadgeBaseProps | 'onClick' | 'children' | 'className' | 'style'>;
-type BadgePropsByShape = {
-    [S in BadgeShape]: BadgeBaseProps & BadgeDomProps & {
-        shape?: S;
-        shapeParams?: BadgeShapeParams[S];
-    };
-}[BadgeShape];
-/**
- * Props for {@link Badge}. Discriminated on `shape` so `shapeParams` is typed
- * to the chosen shape's own parameters.
- */
-type BadgeProps = BadgePropsByShape;
-/**
- * A small labelled chip. Renders as a `<span>`, or as a `<button>`/`<a>` when
- * given `onClick`/`href` — override with `as`.
- *
- * Beyond the built-in {@link BadgeShape} silhouettes, a badge can be composed:
- * `base` picks the underlying outline and `effects` layer perimeter treatments
- * over it, which stack additively. `bloat` pushes the whole silhouette outward
- * along its normals before effects run, and `crawl` animates perimeter
- * patterns.
- *
- * `ref` and any other DOM attributes forward to the root element.
- */
-declare const Badge: react.ForwardRefExoticComponent<BadgePropsByShape & react.RefAttributes<HTMLElement>>;
-
-/**
- * One column of a {@link DataGrid}. `id` doubles as the default property name
- * read off each row when no `accessor` is given.
- */
-interface DataGridColumn<Row> {
-    id: string;
-    header: ReactNode;
-    /** Pull a sortable value from the row. Defaults to `(row as any)[column.id]`. */
-    accessor?: (row: Row) => string | number | null | undefined;
-    /** Render the cell. Defaults to `String(accessor(row) ?? '')`. */
-    render?: (row: Row) => ReactNode;
-    /** Default true. Set false to suppress the sort affordance on this column. */
-    sortable?: boolean;
-    /** Optional CSS class on every <td> in this column. */
-    className?: string;
-}
-/** Props for {@link DataGrid}. */
-interface DataGridProps<Row extends {
-    id: string;
-}> {
-    rows: readonly Row[];
-    columns: readonly DataGridColumn<Row>[];
-    /** Initial sort. Omit for unsorted (rows render in input order). */
-    defaultSort?: {
-        columnId: string;
-        direction: 'asc' | 'desc';
-    };
-    /** Enable drag handles in a leading column. Receives the reorder spec
-     *  (the existing `useReorderDragList` semantics — see weasel-ui). */
-    onReorder?: (ids: string[], targetIndex: number) => void;
-    /** Empty-state row text. Default `'—'`. */
-    empty?: ReactNode;
-    className?: string;
-    /** Extra class on a row's `<tr>`, for row-level state such as a verdict. */
-    rowClassName?: (row: Row) => string | undefined;
-    /**
-     * Activate a row. Makes each row focusable: a click anywhere in it, or
-     * Enter/Space while it has focus, calls this. Clicks and keys landing on a
-     * control inside a cell (button, link, input, …) are left to that control.
-     */
-    onRowClick?: (row: Row) => void;
-    /**
-     * Content for a full-width detail row under `row`, shown while the row is
-     * expanded. Setting it adds a leading disclosure column. Return `null` for
-     * no detail row.
-     */
-    renderDetail?: (row: Row) => ReactNode;
-    /** Which rows offer the disclosure. Default: every row. */
-    rowExpandable?: (row: Row) => boolean;
-    /** Expanded row ids, controlled. Pair with `onExpandedChange`. */
-    expandedIds?: ReadonlySet<string>;
-    /** Initially expanded row ids when uncontrolled. */
-    defaultExpandedIds?: Iterable<string>;
-    /** Called with the next expanded set when a disclosure toggles. */
-    onExpandedChange?: (ids: ReadonlySet<string>) => void;
-}
-/**
- * Sortable table for inspector-style data. Rows are keyed by `id`. Clicking a
- * sortable header cycles ascending, descending, unsorted; nullish values sort
- * last regardless of direction. Passing `onReorder` adds a leading drag-handle
- * column — note that the drag indices it reports are into the *sorted* row
- * order, not the input order.
- */
-declare function DataGrid<Row extends {
-    id: string;
-}>(props: DataGridProps<Row>): react.JSX.Element;
-
-/** Props for `<DisclosureMark>`. */
-interface DisclosureMarkProps {
-    /** Whether the section it stands for is open: `−` when open, `+` when shut. */
-    open: boolean;
-    /** Mark size in px, square. Default 13. */
-    size?: number;
-    className?: string;
-}
-/**
- * The fold mark alone: a dark violet rounded square holding a `+` while its section is
- * shut and a `−` while it is open. Decorative — it carries no role or label —
- * for a row that is itself the control, such as a tree item or a header
- * button. Anywhere the mark has to be the control, use `<Disclosure>`.
- *
- * Deliberately not part of the icon register, on the same grounds as
- * `DragHandleGlyph`: that register is outline strokes at a fixed weight, and
- * this mark is filled.
- */
-declare function DisclosureMark({ open, size, className }: DisclosureMarkProps): react.JSX.Element;
-/** Props for `<Disclosure>`. */
-interface DisclosureProps {
-    /** Whether the section it controls is open. The consumer owns this. */
-    open: boolean;
-    onToggle: () => void;
-    /**
-     * Names the section, for a screen reader. The control has no text of its
-     * own, so without this it announces as an unlabeled button.
-     */
-    label: string;
-    /**
-     * `id` of the element this expands. Sets `aria-controls`, which lets a
-     * screen reader move to the revealed content.
-     */
-    controls?: string;
-    /** Mark size in px. The hit target is at least 20px and grows with it.
-     *  Default 13. */
-    size?: number;
-    disabled?: boolean;
-    className?: string;
-}
-/**
- * The twisty on a collapsible section: a `<DisclosureMark>` in a button.
- *
- * Presentational — it holds no open/closed state and renders no children.
- * The consumer owns the state and the panel; this is the control that toggles
- * it, and `aria-expanded` is what ties the two together.
- *
- * Three things it settles that a hand-rolled twisty keeps getting wrong. The
- * mark is drawn rather than typed, because `--wzl-font-ui` carries no ▸/▾ and
- * a text glyph falls back to whatever the system offers at whatever size that
- * font renders it. The hit target is larger than the mark. And it is a sibling
- * of the row's label rather than a child, so clicking to expand does not
- * actuate the label's own control.
- */
-declare function Disclosure({ open, onToggle, label, controls, size, disabled, className }: DisclosureProps): react.JSX.Element;
-/** Props for `<DisclosureRow>`. */
-interface DisclosureRowProps extends Omit<DisclosureProps, 'className'> {
-    /** The row's own content — a label, a checkbox, a count. */
-    children: ReactNode;
-    className?: string;
-}
-/**
- * A `<Disclosure>` and a row of content beside it, laid out so the twisty
- * leads and the content takes the rest.
- *
- * The layout is the point: the twisty sits *outside* whatever the row puts in
- * it, so a row whose content is a `<label>` wrapping a checkbox stays
- * clickable as a label without the twisty actuating it.
- */
-declare function DisclosureRow({ children, className, ...twisty }: DisclosureRowProps): react.JSX.Element;
-
-/** Props for `<DragGhost>`. */
-interface DragGhostProps {
-    /** The ghost's top-left in client space, and its width — `useReorderDragList`'s `state.ghost` is one. */
-    at: {
-        left: number;
-        top: number;
-        width: number;
-    };
-    /** An element inside the list being dragged from. The ghost portals to its nearest themed ancestor, so it resolves
-     *  the list's tokens without being clipped by the list's panel. */
-    from: Element;
-    /** What to draw: copies of the dragged items, or any stand-in for them. */
-    children: ReactNode;
-}
-/**
- * What follows the pointer during a drag while the dragged items hold their place: `children` on a raised surface at
- * a client-space point. Hidden from assistive tech and from the pointer, so it never becomes the drop target.
- */
-declare function DragGhost({ at, from, children }: DragGhostProps): react.ReactPortal;
-
-/** Props for `<DragHandleGlyph>`. */
-interface DragHandleGlyphProps {
-    /** Height in px; width scales with it. Default 16. */
-    size?: number;
-}
-/** The two-column dot grip used on anything draggable by a handle.
- *
- *  Deliberately not part of the icon register: that register is outline strokes
- *  at a fixed weight, and a grip is filled dots. Forcing it in would either
- *  break the register's rule or produce a worse glyph. */
-declare function DragHandleGlyph({ size }: DragHandleGlyphProps): react.JSX.Element;
-
-/**
- * Width class of a keycap: a modifier glyph, a multi-character legend that
- * needs a wider chip, or a single character in a square one.
- */
-type KeycapKind = 'modifier' | 'wide' | 'square';
-/**
- * Picks the chip width for a legend — modifier glyphs and anything longer
- * than one character get the wider forms.
- */
-declare function inferKeycapKind(label: string): KeycapKind;
-/** Visual style of a keycap chip. */
-type KeyCapVariant = 'default' | 'minimal';
-/** Props for {@link KeyCap}. */
-interface KeyCapProps {
-    /** Glyph rendered in the chip (modifier or key). */
-    label: string;
-    /** Marks the chip as not required to trigger the action. In the default
-     *  variant the chip face inverts (dark face / light glyph) for
-     *  emphasis. In the `'minimal'` variant the chip's border becomes
-     *  dotted to read as "may be held, but isn't required." */
-    inverted?: boolean;
-    /** Visual style. `'default'` (default) renders a filled chip; `'minimal'`
-     *  renders an unfilled chip whose border and legend are `currentColor`
-     *  — useful inline in colored prose / next to colored badges where the
-     *  chip should take the surrounding text color. */
-    variant?: KeyCapVariant;
-    className?: string;
-    /** Optional inline style. Useful for one-off width overrides (e.g.
-     *  building a keyboard-layout where the space bar spans several
-     *  standard-key widths). The component sets no inline styles of its
-     *  own — everything else comes from the CSS module. */
-    style?: CSSProperties;
-    /** Override the chip's font-family. Accepts any CSS font-family
-     *  string. When omitted, the chip inherits from the design-system
-     *  UI font token (`--wzl-font-ui`). Useful for one-off cases where
-     *  a different face is desired — though the canonical move is to
-     *  override the CSS variable at the consumer's scope, not the prop. */
-    font?: string;
-}
-/** Single bordered keycap chip for one glyph (modifier or key). Use
- *  `KeySequence` to render a full shortcut. */
-declare function KeyCap({ label, inverted, variant, className, style, font }: KeyCapProps): react.JSX.Element;
-
-/** One key in a shortcut. */
-interface KeySpec {
-    /** Glyph rendered in the chip (modifier or key). */
-    label: string;
-    /** When true, the chip renders inverted to mark it as not required to
-     *  trigger the action (e.g. an optional modifier). Defaults to false. */
-    optional?: boolean;
-}
-/** Props for {@link KeySequence}. */
-interface KeySequenceProps {
-    /** Keys to render. `undefined` or empty renders a muted em-dash.
-     *  Modifiers are always rendered first regardless of input order; relative
-     *  order within each group is preserved. */
-    keys: readonly KeySpec[] | undefined;
-    /** Character inserted between the trailing modifier chip and the first
-     *  non-modifier chip (e.g. `'+'` renders `⌘ + K`). `null` or `''`
-     *  suppresses it. Defaults to `'+'`. */
-    separator?: string | null;
-    /** Forwarded to every `KeyCap` in the sequence. `'minimal'` renders
-     *  unfilled chips whose border + legend are `currentColor`. */
-    variant?: KeyCapVariant;
-    /** Forwarded to every `KeyCap` in the sequence. Overrides the design-
-     *  system UI font for that chip only. */
-    font?: string;
-    className?: string;
-}
-/** Renders a shortcut as a row of `KeyCap` chips, one per key. Optional
- *  keys render inverted to distinguish them from required ones. */
-declare function KeySequence({ keys, separator, variant, font, className }: KeySequenceProps): react.JSX.Element;
-
-/** Apple-style glyph for a DOM `KeyboardEvent.key` value. Covers escape,
- *  delete/backspace, arrows, enter/return, tab, space. Unknown keys are
- *  upper-cased (so `'a'` reads as `A` on a keycap) and returned unchanged
- *  otherwise — making this safe to apply uniformly without a `has-glyph`
- *  check at the call site. */
-declare function keyGlyph(rawKey: string): string;
-
-/** Logical modifier name. Matches the kit's `ModifierKey` in shape — kept as a
- *  local type so `weasel-ui` stays independent of `@weasel-js/core`. */
-type LogicalMod = 'mod' | 'shift' | 'alt' | 'ctrl' | 'meta';
-/** Detected (or overridden) platform. `'mod'` resolves to ⌘ on macOS,
- *  Ctrl on Windows / Linux. */
-type Platform = 'macos' | 'windows' | 'linux';
-/** Visual form of a modifier or named-key label.
- *
- *  - `'auto'` (default): the per-entry, per-platform default — whatever
- *    label is actually printed on the physical key. macOS keys show the
- *    Apple glyphs (⌘ ⌥ ⌃ ⇧ ⎋ ↵ ⇥). Windows keys mostly show text
- *    (Ctrl, Alt, Shift) BUT the Win key shows its logo (⊞) and the
- *    context-menu key shows ▤. Linux mirrors Windows with Super (⊞).
- *  - `'symbol'` forces the Apple-style glyph everywhere a symbolic form
- *    exists. Entries without a widely-recognized symbol still fall
- *    back to text.
- *  - `'text'` always spells the label out (Cmd / Option / Esc / Enter). */
-type LegendStyle = 'auto' | 'symbol' | 'text';
-/** A modifier to render, named platform-independently. */
-interface LogicalModSpec {
-    name: LogicalMod;
-    /** Marks this modifier as optional (may be held but isn't required).
-     *  Forwarded as the resulting `KeySpec.optional`. */
-    optional?: boolean;
-}
-/** Options for {@link keySpecsFromMods}. */
-interface KeySpecsFromModsOptions {
-    /** Override OS detection. Defaults to the detected platform, or
-     *  `'macos'` when detection is unavailable (e.g. in tests, or when
-     *  `navigator` is missing). */
-    platform?: Platform;
-    /** Defaults to `'auto'` (symbol on macOS, text everywhere else). Pass
-     *  `'symbol'` or `'text'` to force a specific style regardless of
-     *  platform. */
-    legend?: LegendStyle;
-}
-/** Detect the user's OS from the browser environment. UA sniffing — not
- *  100% reliable, but adequate for picking a modifier-glyph convention.
- *  Falls back to `'macos'` (matches the kit's docs convention) when
- *  `navigator` is unavailable. */
-declare function detectPlatform(): Platform;
-/**
- * Map a list of **logical** modifiers (`'mod'`, `'shift'`, …) to **visual**
- * `KeySpec`s appropriate for the current platform.
- *
- * The kit-side gesture grammar uses logical names so the same route reads
- * correctly on every OS — `'mod'` means "Cmd on Mac, Ctrl on Win/Linux".
- * `KeySequence` is purely visual and renders the labels you give it; this
- * helper is the bridge.
- *
- * ```ts
- * <KeySequence
- *   keys={keySpecsFromMods([{ name: 'mod' }, { name: 'shift', optional: true }])}
- * />
- * ```
- *
- * On a Mac: renders `⌘ ⇧`. On Windows: renders `Ctrl Shift`. Pass an
- * explicit `platform` to override detection (e.g. for docs that always
- * show the macOS form). Pass `legend: 'text'` to force "Cmd" over "⌘"
- * even on macOS.
- */
-declare function keySpecsFromMods(mods: readonly LogicalModSpec[], opts?: KeySpecsFromModsOptions): readonly KeySpec[];
-/**
- * Render a raw `KeyboardEvent.key` value as a platform-appropriate
- * `KeySpec`. Named non-modifier keys (Esc, Enter, Tab, Space, Backspace,
- * Delete, arrows) get the platform's conventional form. Letter / digit /
- * other keys pass through upper-cased.
- *
- * ```ts
- * keySpecFromKey('Escape', { platform: 'macos' })   // { label: '⎋' }
- * keySpecFromKey('Escape', { platform: 'windows' }) // { label: 'Esc' }
- * keySpecFromKey('p')                               // { label: 'P' }
- * ```
- *
- * Symbol mode is only meaningful on macOS — Windows / Linux keyboards
- * print the text form on the physical key, so symbol mode there falls
- * back to text.
- */
-declare function keySpecFromKey(raw: string, opts?: KeySpecsFromModsOptions & {
-    optional?: boolean;
-}): KeySpec;
-
-interface ShortcutInput {
-    key: string | readonly string[];
-    mod?: boolean;
-    alt?: boolean;
-    shift?: boolean | 'optional';
-}
-/** Format a shortcut as an array of display chips, one per key — modifier
- *  icons (⌘, ↑, ⌥) followed by the key glyph. UIs that want a boxed
- *  per-key look render each chip in its own element. `shift: 'optional'` is
- *  treated as falsy. */
-declare function formatShortcutParts(b: ShortcutInput | undefined): readonly string[] | undefined;
-/** Format a shortcut as a single display string. Order: mod, shift, alt,
- *  key. Returns `undefined` for `undefined` input so callers can `??` a
- *  fallback. When `key` is an array, the first element is used. `shift: 'optional'`
- *  is treated as falsy. */
-declare function formatShortcut(b: ShortcutInput | undefined): string | undefined;
-
-/**
- * A shortcut as `KeySequence` keys, one per key: mod, shift, alt, then the
- * key, each in the platform's own legend (`⌘` on macOS, `Ctrl` elsewhere).
- * The `KeySpec` counterpart of `formatShortcutParts`, which always prints
- * macOS glyphs. `shift: 'optional'` becomes an optional key; a key list
- * renders its first key. Returns `undefined` for no shortcut.
- *
- * ```tsx
- * <KeySequence keys={keySpecsFromShortcut({ key: 'z', mod: true, shift: true })} />
- * ```
- */
-declare function keySpecsFromShortcut(shortcut: ShortcutInput | undefined, opts?: KeySpecsFromModsOptions): readonly KeySpec[] | undefined;
-
-/**
- * Passed to a custom thumb renderer: the thumb box in CSS px, and whether
- * this thumb is the one being dragged.
- */
-type ThumbRenderCtx = {
-    width: number;
-    height: number;
-    isActive: boolean;
-};
-/**
- * A thumb's appearance — one of the two built-in shapes, or a custom
- * renderer.
- */
-type ThumbShape = 'round' | 'notched' | {
-    render: (ctx: ThumbRenderCtx) => ReactNode;
-};
-/**
- * One handle on a {@link Slider}. `bounds` narrows the range this particular
- * thumb may move within, either fixed or computed from the current thumb
- * list.
- */
-type Thumb = {
-    value: number;
-    label?: string;
-    shape?: ThumbShape;
-    bounds?: [number, number] | ((ctx: BoundsCtx) => [number, number]);
-    /**
-     * Spoken form of `value`, published as `aria-valuetext`. Required by ARIA
-     * whenever `value` is not the quantity the user is choosing — an index into
-     * a value list, a log-scaled position — since `aria-valuenow` alone then
-     * announces a number that means nothing.
-     */
-    valueText?: string;
-};
-/**
- * Passed to a thumb's `bounds` function: the full thumb list and this thumb's
- * index in it, so a bound can be expressed relative to its neighbors.
- */
-type BoundsCtx = {
-    thumbs: readonly Thumb[];
-    index: number;
-};
-/**
- * Passed to `renderTrack`: the track's width in CSS px and a mapping from a
- * slider value to its 0..1 position along the track.
- */
-type TrackCtx = {
-    trackWidth: number;
-    valueToFraction: (v: number) => number;
-};
-/** A {@link Slider} stop that carries a label, drawn under the track at the stop. */
-type SliderStop = {
-    value: number;
-    label?: ReactNode;
-};
-/**
- * Props for {@link Slider}.
- *
- * `onInput` fires continuously through a drag; `onChange` fires once when it
- * ends and is the one to write to history.
- *
- * `stops` are attractors: a drag that passes within a few pixels of one lands
- * on it, and the arrow keys move stop to stop. `step` still quantizes the
- * values between them. Each one is drawn on the track as a mark; pass
- * `showStops: false` for a track whose own paint already reads as the stops.
- * A stop given as a {@link SliderStop} with a `label` gets that label drawn
- * under it; `stopLabels` narrows the row to the two ends or turns it off.
- *
- * `snap: 'strict'` makes every stop a detent the thumb must rest on: drags and
- * track presses land on the nearest one, and `step` no longer applies.
- * `spacing: 'even'` places the stops at equal intervals, runs the track from
- * the first stop to the last, and maps values linearly within each gap — so a
- * geometric list (0.25/0.5/1/2/4) gets usable room for every stop instead of
- * four crowded into the first fifth. Both need stops; with fewer than two,
- * `'even'` falls back to linear.
- *
- * `trackClick: 'move-nearest'` makes a press on bare track send the closest
- * thumb there, focus it, and continue as a drag. It is the default for a
- * single thumb. With several it defaults to `'none'`, because on a
- * multi-thumb editor a stray click would yank a stop the user was not aiming
- * at; `onAddThumb`, where it is set, keeps the track press.
- *
- * `constraint: 'ordered'` keeps thumbs from crossing each other. Supplying
- * `onAddThumb` makes a click on empty track create a thumb, and supplying
- * `onRemoveThumb` lets a right-click or a drag off the track remove one —
- * both callbacks can decline by returning `null`/`false`. `allowShiftAll`
- * makes shift-drag translate every thumb together.
- */
-type SliderProps<T extends Thumb = Thumb> = {
-    thumbs: readonly T[];
-    onInput: (next: T[]) => void;
-    onChange?: (next: T[]) => void;
-    min: number;
-    max: number;
-    step?: number;
-    stops?: readonly (number | SliderStop)[];
-    showStops?: boolean;
-    stopLabels?: 'all' | 'ends' | 'none';
-    snap?: 'magnetic' | 'strict';
-    spacing?: 'linear' | 'even';
-    trackClick?: 'none' | 'move-nearest';
-    constraint?: 'free' | 'ordered';
-    onAddThumb?: (atValue: number) => T | null;
-    onRemoveThumb?: (index: number) => boolean;
-    allowShiftAll?: boolean;
-    renderTrack?: (ctx: TrackCtx) => ReactNode;
-    trackHeight?: number;
-    /** `'slim'` drives the track and thumb from the kit's slider tokens, so a
-     *  Slider matches the property rows. `trackHeight` still wins if given. */
-    density?: 'default' | 'slim';
-    renderReadout?: (thumb: T, index: number) => ReactNode;
-    readoutPlacement?: 'none' | 'inline-after' | 'below-thumb';
-    ariaLabel?: string;
-    className?: string;
-};
-/**
- * Multi-thumb slider over a shared track. The thumb list is fully controlled:
- * every change, live or committed, arrives as a whole new array.
- *
- * Thumbs are draggable, and arrow/Home/End move the focused thumb — those
- * keystrokes fire `onInput` and `onChange` together, since there is no
- * in-flight state to buffer.
- */
-declare function Slider<T extends Thumb = Thumb>(props: SliderProps<T>): ReactElement;
-
-/** One row in a reorderable list. */
-interface ReorderItem {
-    id: string;
-    label: ReactNode;
-    /** Locked rows cannot be dragged, cannot be crossed by drops, and
-     *  never combine with other rows in a multi-selection. */
-    locked?: boolean;
-}
-/**
- * Options for {@link useReorderDragList}. `onReorder` receives the dragged ids
- * and the index they were dropped at, measured against the pre-drag `items`.
- */
-interface UseReorderDragListOptions {
-    items: ReorderItem[];
-    selectedIds: string[];
-    onReorder(ids: string[], targetIndex: number): void;
-    /** A press that was released without ever engaging a drag — the click a
-     *  list row means by it. Fires for locked rows too, which can be selected
-     *  but not dragged. Modifiers are read at press, not at release. When this
-     *  is given, the DOM click that follows the press is dropped, so a row that
-     *  also handles `click` sees one press, not two. A press that starts on a
-     *  control inside the row (a toggle) is left to the control. */
-    onPress?(id: string, mods: PressModifiers): void;
-    /** Pointer-move distance (px) before pending drag engages. Default 4. */
-    threshold?: number;
-    /** Selector matching the container's children that are rows, for a list
-     *  that interleaves other elements (a table's detail rows). Default: every
-     *  child is a row. */
-    rowSelector?: string;
-}
-/** Modifier keys held when a press began. */
-interface PressModifiers {
-    shiftKey: boolean;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    altKey: boolean;
-}
-/**
- * Where a drag's ghost goes: the dragged rows, drawn again with their top-left
- * at a client-space point, so the row that was grabbed stays under the pointer
- * where it was picked up. `width` is the grabbed row's.
- */
-interface ReorderGhost {
-    ids: readonly string[];
-    left: number;
-    top: number;
-    width: number;
-}
-/**
- * Live drag state for rendering feedback: which ids are being dragged, the
- * insertion index the drop would use, and where their ghost goes. All `null`
- * when no drag is engaged.
- */
-interface ReorderDragState {
-    draggedIds: string[] | null;
-    targetIndex: number | null;
-    ghost: ReorderGhost | null;
-}
-/**
- * A `ref` for the list container, an `onPointerDown` for each row, and the
- * live {@link ReorderDragState}. The container ref is required, not optional
- * decoration: it is what the drop index is measured against and what the
- * pointer session is opened on.
- */
-interface ReorderDragHandlers {
-    rowProps(id: string, index: number): {
-        onPointerDown(e: PointerEvent): void;
-    };
-    containerProps: {
-        ref: RefCallback<HTMLElement>;
-    };
-    state: ReorderDragState;
-    /**
-     * Move the row at `index` one place up (`-1`) or down (`1`) — the keyboard
-     * reorder. It moves what a drag of that row would: the whole selection if
-     * the row is in it, else the row alone, never across a locked row. Calls
-     * `onReorder` and returns `true`, or returns `false` when nothing can move.
-     */
-    nudge(id: string, index: number, delta: -1 | 1): boolean;
-}
-/**
- * Drag-to-reorder for a vertical list of rows. Dragging a row that is part of
- * the current selection drags the whole selection; dragging any other row
- * drags just that row. Locked rows can neither be dragged nor crossed by a
- * drop. A drop that would leave a contiguous block where it already is does
- * not call `onReorder`.
- *
- * The rows are the container's children, whatever they are: `ItemList` rows,
- * or the `PropertyGroup`s of a `PropertyList`. A row's `onPointerDown` can go
- * on the whole row or on a handle inside it.
- *
- * A press opens a `startThresholdDrag` on the *container*, which owns the
- * rest of the gesture: a drag that leaves the list still tracks, a release
- * anywhere still drops, and a release the window never delivered still ends
- * the drag. The container is the origin rather than the row because rows come
- * and go as the list re-renders, and a drag must outlive the row it grabbed.
- */
-declare function useReorderDragList(opts: UseReorderDragListOptions): ReorderDragHandlers;
-
-/** Props for {@link ListEditor}. */
-interface ListEditorProps {
-    value: readonly string[];
-    /** Every edit, add and removal, with the whole list. Entries are written as
-     *  typed — an empty one stays until it is removed. */
-    onChange: (next: string[]) => void;
-    /** Shown in an empty entry. */
-    placeholder?: string;
-    /** Shown in place of the entries when there are none. */
-    empty?: string;
-    /** Text of the add button. */
-    addLabel?: string;
-    /** Names the list for assistive tech; each entry is named from it. */
-    'aria-label'?: string;
-    className?: string;
-}
-/**
- * An editable list of strings: one field per entry, a remove button beside
- * each, and an add button under them. Enter in an entry adds one after it;
- * Backspace in an empty one removes it.
- */
-declare function ListEditor({ value, onChange, placeholder, empty, addLabel, 'aria-label': ariaLabel, className, }: ListEditorProps): react.JSX.Element;
-
-/** Props for {@link ColorModeControl}. */
-interface ColorModeControlProps {
-    value: ColorModePreference;
-    onChange: (next: ColorModePreference) => void;
-    /** Accessible name of the group. Defaults to `'Color mode'`. */
-    ariaLabel?: string;
-    size?: ToggleBarSize;
-    variant?: ToggleBarVariant;
-    className?: string;
-}
-/**
- * The Auto / Light / Dark choice, as a three-way radiogroup of mode glyphs.
- * Controlled: pair it with `useColorModePreference` from
- * `@weasel-js/theme/react` and put the hook's resolved `mode` in the
- * `ThemeProvider` selection.
- */
-declare function ColorModeControl({ value, onChange, ariaLabel, size, variant, className, }: ColorModeControlProps): ReactElement;
-
-/**
- * One segment of an {@link OptionsBar}. Unlike `ToggleBar`, each item carries
- * its own selected state and its own `onChange`.
- */
-type OptionsBarItem<V extends string | number = string> = {
-    value: V;
-    label?: ReactNode;
-    ariaLabel?: string;
-    disabled?: boolean;
-    selected: boolean;
-    onChange: (next: boolean) => void;
-};
-/** Segment height and type scale for an {@link OptionsBar}. */
-type OptionsBarSize = 'sm' | 'md';
-/** Visual treatment of an {@link OptionsBar}. */
-type OptionsBarVariant = 'default' | 'minimal';
-/** Props for {@link OptionsBar}. */
-type OptionsBarProps<V extends string | number = string> = {
-    items: readonly OptionsBarItem<V>[];
-    ariaLabel?: string;
-    className?: string;
-    height?: number;
-    /** Size variant. `sm` is ~60% of the default height with reduced padding
-     *  and font size — sized for dense surfaces like lab control panels. */
-    size?: OptionsBarSize;
-    /** Visual variant. `minimal` strips the pill track and glass treatment;
-     *  selection becomes a flat accent. For dense diagnostic surfaces. */
-    variant?: OptionsBarVariant;
-};
-/**
- * Segmented strip of independent on/off options, each owning its own state.
- * Use it when the segments are unrelated booleans; use `ToggleBar` when they
- * are values of one setting.
- */
-declare function OptionsBar<V extends string | number = string>(props: OptionsBarProps<V>): ReactElement;
-
-/**
- * One button in an {@link ButtonBar}. `value` is only a React key; the item
- * carries no selected state.
- */
-type ButtonBarItem<V extends string | number = string> = {
-    value: V;
-    label?: ReactNode;
-    ariaLabel?: string;
-    disabled?: boolean;
-    onAction: () => void;
-} & SegmentTooltipFields;
-/** Segment height and type scale for an {@link ButtonBar}. */
-type ButtonBarSize = 'sm' | 'md';
-/** Visual treatment of an {@link ButtonBar}. */
-type ButtonBarVariant = 'default' | 'minimal';
-/** Props for {@link ButtonBar}. */
-type ButtonBarProps<V extends string | number = string> = {
-    items: readonly ButtonBarItem<V>[];
-    ariaLabel?: string;
-    className?: string;
-    height?: number;
-    size?: ButtonBarSize;
-    variant?: ButtonBarVariant;
-};
-/**
- * Segmented strip of momentary buttons — each press fires and nothing stays
- * selected. Shares the look and the arrow-key navigation of `ToggleBar` and
- * `OptionsBar`.
- *
- * This is a plain callback bar. For buttons driven by the kit's actions
- * registry, use `ActionBar` instead.
- */
-declare function ButtonBar<V extends string | number = string>(props: ButtonBarProps<V>): ReactElement;
-
-/**
- * One segment of a {@link Powerline}. Giving it `onClick` or `href` makes it
- * interactive, the same way it does on a `Badge`.
- */
-interface PowerlineSegment extends StanceProps {
-    text: ReactNode;
-    /** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */
-    endCap?: EdgeCap;
-    status?: BadgeStatus;
-    variant?: BadgeVariant;
-    size?: BadgeSize;
-    onClick?: () => void;
-    href?: string;
-    'aria-label'?: string;
-}
-/** Props for {@link Powerline}. */
-interface PowerlineProps {
-    segments: PowerlineSegment[];
-    /** Left edge of the first segment. Defaults to 'flat'. */
-    startCap?: EdgeCap;
-    /** Default size for every segment (per-segment `size` wins). */
-    size?: BadgeSize;
-    /** Default variant for every segment (per-segment `variant` wins). */
-    variant?: BadgeVariant;
-    /** Protrusion depth in CSS px, passed through to every segment's base. */
-    depth?: number;
-    /** Visible gap between adjacent segments. Number → px; string → literal CSS length.
-     *  Default: `0.2em` (scales with the row's font size). Pass `0` for flush. */
-    gap?: number | string;
-    className?: string;
-    'aria-label'?: string;
-}
-/**
- * A row of chevron-linked badge segments, in the style of a shell powerline
- * prompt. Each segment's `endCap` shapes both its own right edge and the next
- * segment's left edge, so the run reads as one continuous chain.
- *
- * Built for showing a path through a sequence of steps — the inspector uses
- * it to display how input routes from tool to gesture to action to target.
- */
-declare function Powerline({ segments, startCap, size, variant, depth, gap, className, ...rest }: PowerlineProps): react.JSX.Element;
-
-/** Distinguishes a leaf from a group while walking a schema tree. */
-declare function isPrefLeaf(node: ToolPrefLeaf | ToolPrefGroup): node is ToolPrefLeaf;
-/** Get the value at a dotted path inside a nested value tree. Returns
- *  `undefined` when a segment is missing or hits a non-object. */
-declare function prefValueAtPath(values: unknown, path: string): unknown;
-/**
- * Recursively drop `hidden` leaves (unless `showHidden`), pruning groups
- * that end up empty. Returns null when the entire subtree is hidden.
- */
-declare function visiblePrefSubtree<T extends ToolPrefLeaf | ToolPrefGroup>(node: T, showHidden: boolean): T | null;
-
-/** How a {@link PrefsForm} lays its groups out. */
-type PrefsLayout = 'columns' | 'rail';
-/** Props for {@link PrefsForm}. */
-interface PrefsFormProps {
-    /** Root of the schema tree. Core `ToolPrefGroup`s assign structurally. */
-    schema: ToolPrefGroup;
-    /** Nested value tree (shape mirrors the schema). Sparse is fine —
-     *  missing leaves fall back to their schema `default`. */
-    values?: unknown;
-    /** Change callback with the leaf's dotted path. Values apply live;
-     *  there is no dirty/commit state. */
-    onChange: (path: string, value: unknown) => void;
-    /**
-     * Per-kind renderers for app-defined kinds. Entries also override the
-     * built-in kinds when keys collide. A renderer owns the control cell
-     * (the label/tooltip row chrome stays with the form, unless the leaf
-     * sets `block`); returning `null` collapses the row entirely. Unknown
-     * kinds with no renderer show a labeled placeholder instead of
-     * crashing.
-     */
-    renderers?: Record<string, PrefRenderer>;
-    /** Reveal `hidden` leaves (dev tooling). Default false. */
-    showHidden?: boolean;
-    /**
-     * `'columns'` (the default) wraps each top-level group into its own panel
-     * column. `'rail'` puts a two-level navigation rail beside one group's
-     * settings at a time — what a dialog-sized surface wants, since columns
-     * overflow sideways once there are more than two.
-     */
-    layout?: PrefsLayout;
-    /** Show a filter field that narrows the form to matching leaves. */
-    filterable?: boolean;
-    /** Rail layout: path of the open top-level group. Controlled. */
-    section?: string;
-    /** Rail layout: path of the group open before the reader picks one.
-     *  Defaults to the first in the schema. */
-    defaultSection?: string;
-    onSectionChange?: (path: string) => void;
-    className?: string;
-}
-/**
- * Schema-driven preferences form. Leaves render as label + control rows;
- * how the groups around them are arranged is `layout`'s to say — columns of
- * panels, or a navigation rail beside one group at a time.
- *
- * Storage-agnostic: pair with `PrefsDialog` for the modal composition, and
- * persist however the app likes via `onChange`.
- */
-declare function PrefsForm(props: PrefsFormProps): react.JSX.Element;
-
-/**
- * Props for {@link PrefsDialog} — everything {@link PrefsForm} takes, plus
- * the dialog's own open state and chrome.
- */
-interface PrefsDialogProps extends PrefsFormProps {
-    isOpen: boolean;
-    onOpenChange: (open: boolean) => void;
-    /** Dialog heading. Defaults to the schema root's `name`. */
-    title?: ReactNode;
-    /** Extra chrome rendered at the end of the title row (e.g. a dev-mode
-     *  "Show hidden" switch). An action the reader acts on when they are done
-     *  — resetting, importing — belongs in `footer` instead, where a dialog's
-     *  actions live. */
-    headerExtra?: ReactNode;
-    /** Footer slot, passed through to `Dialog` — typically a reset or done
-     *  action. */
-    footer?: ReactNode;
-    /** Class applied to the dialog's modal box. */
-    dialogClassName?: string;
-}
-/**
- * The kit's preferences dialog: `Dialog` + `PrefsForm`. Changes apply
- * live through `onChange` — there is no OK/Cancel staging. For custom
- * placement (sidebar, popover, inline page), compose `PrefsForm`
- * directly; this wrapper is intentionally thin.
- *
- * `layout="rail"` is what a dialog usually wants: the default columns wrap
- * sideways past two groups, and this box is 900px at its widest.
- */
-declare function PrefsDialog(props: PrefsDialogProps): react.JSX.Element;
-
-/** Props for {@link Sidebar}. */
-interface SidebarProps {
-    /**
-     * Edge the sidebar docks to. Adds a class hook (`s.left` / `s.right`)
-     * so consumers can target either edge for borders, shadows, etc.
-     * Purely cosmetic — layout is the parent's job.
-     */
-    side?: 'left' | 'right';
-    /**
-     * Accessible label — rendered onto the `<aside>`. Without it, screen
-     * readers fall back to "complementary landmark," which is fine for
-     * apps with a single sidebar but ambiguous when there's both a left
-     * and a right.
-     */
-    ariaLabel?: string;
-    children?: ReactNode;
-    className?: string;
-    /** Inline style — useful for width-as-custom-property handles or any
-     *  other one-off CSS property the consumer wants to set dynamically. */
-    style?: CSSProperties;
-}
-/**
- * Generic sidebar shell — `<aside>` with column layout and token-driven
- * surface treatment. Width, sticky positioning, and resize handles stay
- * the consumer's concern (every app has its own layout grid); the kit
- * just provides the chrome.
- *
- * Pair with `<SidebarPanel>` for collapsible sections.
- */
-declare function Sidebar(props: SidebarProps): react.JSX.Element;
-
-/** Props for {@link SidebarPanel}. */
-interface SidebarPanelProps {
-    /** Title rendered in the panel's header row. */
-    title?: ReactNode;
-    /**
-     * Collapsed state — when true, only the header paints; the body is
-     * omitted. Caller owns the state (typically via prefs) and flips it
-     * back via `onToggleCollapse`.
-     */
-    collapsed?: boolean;
-    /**
-     * Click handler for the title row. When provided, the header renders
-     * as a button (fold mark + label) and acts as the collapse toggle.
-     * When omitted, the title is static text and the panel can't collapse.
-     */
-    onToggleCollapse?(): void;
-    /**
-     * Optional close handler — when provided, the header gains a `×`
-     * button on the trailing edge. Caller flips its "hidden" state and
-     * conditionally unmounts the panel from the parent.
-     */
-    onHide?(): void;
-    children?: ReactNode;
-    className?: string;
-}
-/**
- * Generic collapsible panel section for sidebars. Pure presentation —
- * caller manages `collapsed`/`hidden` state externally (the pattern is
- * to drive it from app prefs so the Preferences modal and inline
- * fold marks toggle the same map).
- *
- * Pair with `<Sidebar>` for the docked column layout.
- */
-declare function SidebarPanel(props: SidebarPanelProps): react.JSX.Element;
-
-/** Props for {@link ToolButton}. */
-interface ToolButtonProps {
-    /** Icon node (typically an SVG component). */
-    icon: ReactNode;
-    /** Human-readable label shown under the icon. */
-    label: string;
-    /** Optional shortcut hint (e.g. "V" or "⌘Z"). */
-    shortcut?: string;
-    /** Selected/active state — toggles the active visual treatment. */
-    active?: boolean;
-    /** Disabled state — passes through to the underlying button. */
-    disabled?: boolean;
-    /**
-     * When true, sets `aria-disabled="true"` on the button without using the
-     * native `disabled` attribute. This keeps the button focusable and reachable
-     * by keyboard (roving-tabindex still applies) while marking it as ineligible
-     * to screen readers. The caller is responsible for making `onClick` a no-op.
-     */
-    ariaDisabled?: boolean;
-    /**
-     * Whether this button is the currently tabbable member of its toolbar.
-     * Toolbars use roving tabindex: exactly one button has `tabIndex=0` at
-     * a time; the rest are `-1`. Caller manages which.
-     */
-    tabbable?: boolean;
-    /** Click handler. */
-    onClick(): void;
-    /** Key handler for the underlying button — a toolbar's roving-tabindex
-     *  navigation attaches here. */
-    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
-    /**
-     * Tooltip content. Defaults to `label` (plus `shortcut` if provided).
-     */
-    title?: string;
-    /** Additional class for the root button. */
-    className?: string;
-}
-/**
- * Generic icon-+-label toolbar button — building block for `ToolPalette`
- * and similar surfaces. Headless about layout direction (parent group
- * supplies flex direction via `ToolGroup`). Theme via `--wzl-*` tokens.
- */
-declare function ToolButton(props: ToolButtonProps): react.JSX.Element;
-
-/** Props for {@link ToolGroup}. */
-interface ToolGroupProps {
-    children: ReactNode;
-    /**
-     * Lays children along an axis. `'vertical'` (default) stacks them in
-     * a column; `'horizontal'` lays them in a row. Independent of the
-     * parent toolbar's own orientation.
-     */
-    orientation?: 'vertical' | 'horizontal';
-    /**
-     * Optional `data-group` attribute — useful for parents that want to
-     * select the group from CSS or tests by name.
-     */
-    groupKey?: string;
-    /** Accessible name for the group (rendered as `aria-label`). */
-    ariaLabel?: string;
-    className?: string;
-}
-/**
- * Generic toolbar group — a `role="group"` flex container that arranges
- * `<ToolButton>`s (or any children) along a chosen axis. No visual chrome
- * beyond layout; theming lives on the buttons.
- */
-declare function ToolGroup(props: ToolGroupProps): react.JSX.Element;
-
-/** The full vocabulary of capability tags shipped in the default preset.
- *  Apps and other consumers can add their own tags; this list is what
- *  `weasel-modes` itself uses. */
-declare const ALL_TAGS: readonly ["navigation", "creates-selection", "creates-paths", "creates-shapes", "creates-text", "edits-anchors", "edits-text", "transforms-selection", "samples-color", "applies-fill", "edits-page"];
-/** One capability a tool or contribution declares, and a mode allows. Any
- *  string is accepted so apps can add tags of their own; `ALL_TAGS` is the
- *  set this package ships. */
-type CapabilityTag = (typeof ALL_TAGS)[number] | (string & {});
-
-/** How a mode tints the workspace — the area around the page — so the user
- *  can see at a glance which mode is active. */
-interface WorkspaceVisual {
-    tint?: string;
-    gradient?: 'top-down' | 'bottom-up';
-    intensity?: number;
-}
-/**
- * A mode: an app-level editing context that narrows which tools are usable and
- * how the workspace looks. Tools live inside modes; a tool is never "in" one.
- *
- * `kind` picks the lifecycle. A `soft` mode (path-edit, isolation, text-edit)
- * is a scoped context with no commit ceremony — every edit inside it is
- * independently undoable and `exit` is non-destructive. A `strict` mode
- * (free-transform, crop) is a transaction: the whole session collapses to one
- * undoable step and leaving requires an explicit `commit` or `cancel`.
- */
-interface ModeDefinition {
-    id: string;
-    /** Human-readable name for chrome — a breadcrumb, a status bar. Falls back
-     *  to `id`; read it through {@link modeLabel}. */
-    label?: string;
-    /** One sentence on what the mode is for, for a tooltip or a hint line. */
-    description?: string;
-    kind: 'soft' | 'strict';
-    /** Capability tags this mode allows beyond IMPLICIT_TAGS. */
-    allows: CapabilityTag[];
-    /** When true, out-of-target objects dim at the renderer layer. */
-    scoping: boolean;
-    workspace?: WorkspaceVisual;
-    entry?: {
-        shortcut?: string;
-        trigger?: 'double-click-target';
-    };
-    exit?: {
-        shortcut?: string;
-    };
-    commit?: {
-        shortcut?: string;
-    };
-    cancel?: {
-        shortcut?: string;
-    };
-}
-
-/** Holds the set of available modes and which one is active, and notifies
- *  subscribers when that changes. `getVersion` is a monotonic counter for
- *  render-cache invalidation. Unknown mode ids throw rather than being
- *  ignored. */
-interface ModeRegistry {
-    current(): ModeDefinition;
-    setMode(id: string): void;
-    byId(id: string): ModeDefinition;
-    getVersion(): number;
-    subscribe(listener: () => void): () => void;
-}
-
-/** Props for {@link ToolPalette}. */
-interface ToolPaletteProps {
-    tools: ToolsApi;
-    orientation?: 'vertical' | 'horizontal';
-    className?: string;
-    /** Derive the keyboard shortcut for a tool button from the action registry.
-     *  Called with the tool's id; return `undefined` to suppress a chip. When
-     *  omitted, falls back to `tool.keybinding` (legacy path). */
-    lookupShortcut?: (toolId: string) => ShortcutInput | undefined;
-    /**
-     * Optional mode registry. When provided, tools whose
-     * `eligibility.capabilities` do not match the current mode are rendered
-     * greyed-out, aria-disabled, and their onClick is suppressed. When omitted,
-     * all tools are treated as eligible (preserves existing behavior in
-     * consumers that haven't wired a registry).
-     */
-    modeRegistry?: ModeRegistry;
-    /**
-     * Presentation-group display order. Groups not listed keep their registry
-     * insertion order after the listed ones; `misc` always renders last.
-     * Defaults to `['select', 'shape', 'draw', 'type', 'view']`.
-     */
-    groupOrder?: readonly string[];
-}
-/**
- * Toolbar of the registered tools, split into separator-divided groups by
- * each tool's presentation group and navigable by arrow keys. Clicking a
- * button makes that tool active.
- *
- * Given a `modeRegistry`, tools whose capabilities the current mode does not
- * allow render greyed out and inert rather than disappearing.
- */
-declare function ToolPalette(props: ToolPaletteProps): react.JSX.Element;
-
-/**
- * Props for {@link Checkbox}, on top of React Aria's `Checkbox` props. The
- * label is passed as children.
- */
-type CheckboxProps = Omit<CheckboxProps$1, 'children' | 'className'> & {
-    children?: ReactNode;
-    className?: string;
-};
-/**
- * Single checkbox wrapping React Aria's Checkbox. Supports indeterminate
- * via `isIndeterminate`. The label is supplied as children.
- */
-declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps$1, "className" | "children"> & {
-    children?: ReactNode;
-    className?: string;
-} & react.RefAttributes<HTMLLabelElement>>;
-
-/**
- * Props for {@link Switch}, on top of React Aria's `Switch` props. The label
- * is passed as children.
- */
-type SwitchProps = Omit<SwitchProps$1, 'children' | 'className'> & {
-    children?: ReactNode;
-    className?: string;
-};
-/**
- * On/off toggle wrapping React Aria's Switch, skinned against the `--wzl-*`
- * tokens. Use for a setting that takes effect immediately; use `Checkbox`
- * for one that is submitted with a form.
- *
- * `ref` forwards to the underlying label element.
- */
-declare const Switch: react.ForwardRefExoticComponent<Omit<SwitchProps$1, "className" | "children"> & {
-    children?: ReactNode;
-    className?: string;
-} & react.RefAttributes<HTMLLabelElement>>;
-
-/** Props for {@link Tabs}, on top of React Aria's `Tabs` props. */
-type TabsProps = Omit<TabsProps$1, 'className' | 'children'> & {
-    children?: ReactNode;
-    className?: string;
-};
-/**
- * Tab set wrapping React Aria's Tabs, skinned against the `--wzl-*` tokens.
- * Holds a {@link TabList} and one {@link TabPanel} per tab.
- */
-declare function Tabs({ children, className, ...rest }: TabsProps): react.JSX.Element;
-/** Props for {@link TabList}, on top of React Aria's `TabList` props. */
-type TabListProps<T extends object> = Omit<TabListProps$1<T>, 'className'> & {
-    className?: string;
-};
-/** The row of tab buttons inside a {@link Tabs}. */
-declare function TabList<T extends object>({ className, ...rest }: TabListProps<T>): react.JSX.Element;
-/** Props for {@link Tab}, on top of React Aria's `Tab` props. */
-type TabProps = Omit<TabProps$1, 'className' | 'children'> & {
-    children?: ReactNode;
-    className?: string;
-};
-/** One tab button. Its `id` selects the {@link TabPanel} it reveals. */
-declare function Tab({ children, className, ...rest }: TabProps): react.JSX.Element;
-/** Props for {@link TabPanel}, on top of React Aria's `TabPanel` props. */
-type TabPanelProps = Omit<TabPanelProps$1, 'className' | 'children'> & {
-    children?: ReactNode;
-    className?: string;
-};
-/** The content shown for the {@link Tab} whose `id` matches this panel's. */
-declare function TabPanel({ children, className, ...rest }: TabPanelProps): react.JSX.Element;
-
-/** Props for {@link RadioGroup}, on top of React Aria's `RadioGroup` props. */
-type RadioGroupProps = Omit<RadioGroupProps$1, 'children' | 'className'> & {
-    label?: ReactNode;
-    description?: ReactNode;
-    errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
-    children?: ReactNode;
-    className?: string;
-};
-/**
- * A set of mutually exclusive choices, wrapping React Aria's RadioGroup and
- * supplying the same label / description / errorMessage slots as `Input`.
- * Holds {@link Radio} children.
- */
-declare function RadioGroup(props: RadioGroupProps): react.JSX.Element;
-/** Props for {@link Radio}, on top of React Aria's `Radio` props. */
-type RadioProps = Omit<RadioProps$1, 'className' | 'children'> & {
-    children?: ReactNode;
-    className?: string;
-};
-/** One choice in a {@link RadioGroup}. The label is passed as children. */
-declare function Radio({ children, className, ...rest }: RadioProps): react.JSX.Element;
-
-/** Props for {@link NumberField}, on top of React Aria's `NumberField` props. */
-type NumberFieldProps = Omit<NumberFieldProps$1, 'children' | 'className'> & {
-    label?: ReactNode;
-    /**
-     * `'stacked'` (the default) puts the label above the field; `'row'` sets it
-     * beside the field at its own width, with any description or error on a
-     * line below. Same vocabulary as {@link Field}'s `orientation`.
-     */
-    orientation?: FieldOrientation;
-    description?: ReactNode;
-    errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
-    /** Hide the up/down stepper buttons. Defaults to false. */
-    hideSteppers?: boolean;
-    /** Render with no box until focused — the readout treatment the property
-     *  rows use, for a value that sits inside other chrome rather than in a form. */
-    ghost?: boolean;
-    /** Native input placeholder — e.g. `'Mixed'` for a multi-selection
-     *  editor with no shared value. */
-    placeholder?: string;
-    /**
-     * `'fill'` (the default) takes the width of whatever row the field sits in.
-     * `'fit'` sizes it to `--wzl-number-field-width` (`9ch` by default) plus its
-     * own chrome, rather than to the input's 20-character intrinsic width.
-     */
-    width?: 'fill' | 'fit';
-    className?: string;
-};
-/**
- * Numeric input with stepper buttons, wrapping React Aria's NumberField and
- * supplying the same label / description / errorMessage slots as `Input`.
- * Arrow keys and scroll step the value; parsing and formatting are React
- * Aria's.
- *
- * `ref` forwards to the underlying `<input>`.
- */
-declare const NumberField: react.ForwardRefExoticComponent<Omit<NumberFieldProps$1, "className" | "children"> & {
-    label?: ReactNode;
-    /**
-     * `'stacked'` (the default) puts the label above the field; `'row'` sets it
-     * beside the field at its own width, with any description or error on a
-     * line below. Same vocabulary as {@link Field}'s `orientation`.
-     */
-    orientation?: FieldOrientation;
-    description?: ReactNode;
-    errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
-    /** Hide the up/down stepper buttons. Defaults to false. */
-    hideSteppers?: boolean;
-    /** Render with no box until focused — the readout treatment the property
-     *  rows use, for a value that sits inside other chrome rather than in a form. */
-    ghost?: boolean;
-    /** Native input placeholder — e.g. `'Mixed'` for a multi-selection
-     *  editor with no shared value. */
-    placeholder?: string;
-    /**
-     * `'fill'` (the default) takes the width of whatever row the field sits in.
-     * `'fit'` sizes it to `--wzl-number-field-width` (`9ch` by default) plus its
-     * own chrome, rather than to the input's 20-character intrinsic width.
-     */
-    width?: "fill" | "fit";
-    className?: string;
-} & react.RefAttributes<HTMLInputElement>>;
-
-/** One row in a {@link MenuButton}'s list. */
-type MenuButtonItem<T extends string = string> = {
-    value: T;
-    label: ReactNode;
-    isDisabled?: boolean;
-    /** Plain-text form of `label`, for type-to-select and screen readers. A
-     *  string label supplies this itself. */
-    textValue?: string;
-};
-/** Props for {@link MenuButton}. */
-type MenuButtonProps<T extends string = string> = {
-    /** What the button says. It never changes to show a chosen row. */
-    label: ReactNode;
-    items: ReadonlyArray<MenuButtonItem<T>>;
-    /** Fired with the value of the row chosen. */
-    onAction: (value: T) => void;
-    isDisabled?: boolean;
-    className?: string;
-    'aria-label'?: string;
-} & SegmentTooltipFields & OverlayPortalProps;
-/**
- * A button that opens a list and acts on the row chosen — "Add trial…",
- * "Load…". Unlike a {@link Select} it holds no value, so it sizes to its own
- * label rather than to its widest row.
- *
- * `shortcut` adds a kit tooltip reading `Name (⌘N)`, named by `aria-label` or
- * a string `label`, as `Button` does; `tooltip` replaces that text.
- */
-declare function MenuButton<T extends string = string>({ label, items, onAction, isDisabled, className, 'aria-label': ariaLabel, portalContainer, shortcut, tooltip, }: MenuButtonProps<T>): react.JSX.Element;
-
-/**
- * One option in a {@link ComboBox}'s `options` list. `textValue` is the
- * plain-text form used for filtering and screen readers, needed only when
- * `label` isn't a bare string.
- */
-type ComboBoxOption = {
-    value: string;
-    label: ReactNode;
-    textValue?: string;
-    isDisabled?: boolean;
-};
-type Key$1 = string | number;
-/**
- * How the typed text narrows the options.
- *
- * `'contains'` is a locale-aware substring match over each option's text.
- * `'none'` shows every option given — what a list a server already filtered
- * and ranked needs, since a second pass would drop rows that do not contain
- * the query and reorder whatever survived.
- */
-type ComboBoxFilter = 'contains' | 'none' | ((textValue: string, inputValue: string) => boolean);
-/** What the user committed: an option they picked, or text they typed. */
-type ComboBoxCommit<T extends Key$1 = string> = {
-    source: 'option';
-    key: T;
-} | {
-    source: 'text';
-    text: string;
-};
-/**
- * Props for {@link ComboBox}, on top of React Aria's `ComboBox` props, with
- * the selection key narrowed to the option value type.
- */
-type ComboBoxProps<T extends Key$1 = string> = Omit<ComboBoxProps$1<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {
-    label?: ReactNode;
-    description?: ReactNode;
-    errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
-    placeholder?: string;
-    options?: ReadonlyArray<ComboBoxOption & {
-        value: T;
-    }>;
-    children?: ReactNode;
-    selectedKey?: T | null;
-    defaultSelectedKey?: T;
-    onSelectionChange?: (key: T | null) => void;
-    emptyLabel?: ReactNode;
-    /** Shown in place of `emptyLabel` while `loadError` is set. */
-    errorLabel?: ReactNode;
-    /**
-     * How typed text narrows `options`. Defaults to `'contains'`. `'none'` also
-     * keeps the popover open on an empty collection: a list the kit does not
-     * filter can arrive empty from a server mid-query, and without that the
-     * popover closes and `emptyLabel` is never seen.
-     */
-    filter?: ComboBoxFilter;
-    /** Marks the options as out of date while the next set is being fetched. */
-    isLoading?: boolean;
-    /** A failed load, shown as `errorLabel` rather than as an empty corpus. */
-    loadError?: unknown | null;
-    /**
-     * Fires when the user commits — Enter on the active option, a click on one,
-     * or Enter on text matching none of them when `allowsCustomValue` is set.
-     * Empty text commits nothing.
-     */
-    onCommit?: (commit: ComboBoxCommit<T>) => void;
-    /**
-     * `'fill'` (the default) takes the width of whatever row the combo box sits
-     * in. `'fit'` sizes the input to its widest option, so it neither swallows a
-     * toolbar's slack nor cuts a selection off once one is made.
-     */
-    width?: 'fill' | 'fit';
-    className?: string;
-} & OverlayPortalProps;
-/**
- * Filterable single-select wrapping React Aria's ComboBox. The user can
- * type to filter; selection commits to `onSelectionChange`. When no value
- * is in the input, selection clears (key becomes null).
- */
-declare function ComboBox<T extends Key$1 = string>(props: ComboBoxProps<T>): react.JSX.Element;
-/** Props for {@link ComboBoxItem}, on top of React Aria's `ListBoxItem` props. */
-type ComboBoxItemProps = Omit<ListBoxItemProps, 'className'> & {
-    className?: string;
-};
-/** One row in a {@link ComboBox}'s filtered list. */
-declare function ComboBoxItem({ className, ...rest }: ComboBoxItemProps): react.JSX.Element;
-
-/** Props for {@link RangeSlider}, on top of React Aria's `Slider` props. */
-type RangeSliderProps = Omit<SliderProps$1, 'children' | 'className'> & {
-    label?: ReactNode;
-    /** Show the current value next to the label. Defaults to true when a
-     *  label is supplied. */
-    showOutput?: boolean;
-    /** Format the rendered value(s). Useful for units (`v => `${v}%``). */
-    formatOutput?: (v: number | number[]) => ReactNode;
-    className?: string;
-};
-/**
- * Linear range slider on React Aria. Single-value by default; pass an array
- * to `value` / `defaultValue` for multi-thumb. Distinct from `Slider`, which
- * is fully controlled and gives each thumb its own bounds and readout.
- *
- * The root is a column flex container and the track stretches to it, so
- * `align-items` on the root or on a wrapper that replaces it governs the
- * *horizontal* axis here and collapses the track to its content width. Style
- * the wrapper around one, not the root.
- */
-declare function RangeSlider(props: RangeSliderProps): react.JSX.Element;
-
-/** Props for {@link Dialog}, on top of React Aria's `ModalOverlay` props. */
-type DialogProps = Omit<WithoutPortalTarget<ModalOverlayProps>, 'children' | 'className'> & OverlayPortalProps & StanceProps & {
-    /** Heading rendered in the dialog's default header. Omit when supplying
-     *  a custom `header` slot via children. */
-    title?: ReactNode;
-    /** Show the built-in close button. Defaults to true when `onOpenChange`
-     *  is wired so the user has an escape hatch. */
-    showCloseButton?: boolean;
-    /** Body content. */
-    children?: ReactNode;
-    /** Footer slot — typically action buttons. */
-    footer?: ReactNode;
-    /** ARIA role. Defaults to `dialog`. Use `alertdialog` for confirms. */
-    role?: DialogProps$1['role'];
-    /** Class applied to the modal box (inside the overlay). */
-    className?: string;
-    /** Class applied to the scrolling body. For content that owns its own
-     *  scrolling — a form with a fixed navigation rail beside a scrolling
-     *  pane — this is where the body's padding and overflow come off. */
-    bodyClassName?: string;
-};
-/**
- * Modal dialog wrapping React Aria. Supplies a default header (title +
- * close), scrollable body, and footer slot. Pass `isOpen` + `onOpenChange`
- * for controlled visibility, or omit both and use a `<DialogTrigger>` from
- * `react-aria-components` upstream of this component.
- *
- * Escape, click-outside, focus trap, and scroll lock all come from the
- * underlying primitives. `stance` and `tone` work as on `<PropertyPanel>` —
- * a destructive confirm is `stance="danger"`.
- */
-declare function Dialog(props: DialogProps): react.JSX.Element;
-
-/** Props for {@link Callout}, on top of React Aria's `Popover` props. */
-type CalloutProps = Omit<WithoutPortalTarget<PopoverProps>, 'children' | 'className' | 'isNonModal' | 'triggerRef'> & OverlayPortalProps & StanceProps & {
-    children?: ReactNode;
-    className?: string;
-    /** Optional heading rendered above the body. */
-    title?: ReactNode;
-    /** Footer slot — typically action buttons. */
-    footer?: ReactNode;
-    /**
-     * `true` — blocks interaction with the rest of the app until dismissed;
-     * inner dialog is `role="alertdialog"`. `false` (default) — non-blocking:
-     * the app stays interactive; Esc / outside click / close button dismiss.
-     */
-    modal?: boolean;
-    /**
-     * Show the × button. Defaults to `!modal`. In programmatic
-     * `triggerRef`/`anchorRect` modes the close button needs controlled open
-     * (`isOpen` + `onOpenChange`); with only `defaultOpen` it has no open-state
-     * setter to call and cannot close.
-     */
-    showCloseButton?: boolean;
-    /**
-     * The user asked for this callout to go away — the × button or Escape.
-     *
-     * Distinct from `onOpenChange`, which a non-modal popover *also* fires when
-     * interaction or focus merely leaves it. On a canvas that's every click on
-     * the artwork, so a consumer that pins `isOpen` and treats `onOpenChange`
-     * as dismissal retires messages nobody read. Use this instead: it fires
-     * only on a deliberate act, and never on incidental focus loss.
-     */
-    onDismiss?: () => void;
-    /** Anchor to an arbitrary element (programmatic use, with `isOpen`). */
-    triggerRef?: RefObject<Element | null>;
-    /**
-     * Anchor to a client-coordinate rect — e.g. a scene node's on-screen box.
-     * The callout re-anchors whenever this rect changes, so a consumer that
-     * recomputes it on pan, zoom, or scene edits keeps the arrow on its target.
-     * Takes precedence over `triggerRef`.
-     */
-    anchorRect?: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-};
-/**
- * Anchored callout with an arrow pointing at its source — a trigger
- * element, an arbitrary `triggerRef`, or a client-space `anchorRect`.
- * Wraps React Aria Popover + Dialog; positioning, collision flipping,
- * dismissal, and focus behavior come from the underlying primitives.
- */
-declare function Callout(props: CalloutProps): react.JSX.Element;
-
-/**
- * Coordinate transforms (model ↔ plot) for Plot2D. Pure / deterministic —
- * no DOM, no React, no state.
- *
- * Model space: caller-defined xRange × yRange. Y axis goes UP.
- * Plot space: 0..width × 0..height in CSS pixels. Y axis goes DOWN (SVG).
- */
-interface Point {
-    x: number;
-    y: number;
-}
-
-/**
- * Tick placement for a numeric axis. Pure — no DOM, no React.
- */
-/** What a tick label formatter knows about the column it is part of. */
-interface TickFormatCtx {
-    /** Places after the point that every label in the column shares. */
-    decimals: number;
-    /** Distance between neighboring ticks, or 0 when the ticks were given
-     *  explicitly and are not evenly spaced. */
-    step: number;
-}
-/** Turns a tick value into its label. */
-type TickFormatter = (value: number, ctx: TickFormatCtx) => string;
-
-/** Background grid configuration for a {@link Plot2D}. */
-interface GridSettings {
-    /** Number of evenly-spaced internal grid lines per axis (excluding
-     *  the edges). Applied to both x and y. Default 3. */
-    divisions?: number;
-    /** Stroke color override. When omitted, uses `var(--plot-grid)`. */
-    color?: string;
-}
-/** Axis-line configuration for a {@link Plot2D}. */
-interface AxesSettings {
-    /** Stroke color override. When omitted, uses `var(--plot-axis)`. */
-    color?: string;
-}
-/**
- * Ticks along one axis of a {@link Plot2D}: a line across the plot at each
- * tick value, and a label naming it. Every label in a column is formatted
- * to the same number of decimal places.
- */
-interface TickSettings {
-    /** Tick values in model space; any outside the range are skipped.
-     *  Omitted = round 1/2/5 steps, as many as `minSpacing` allows at the
-     *  plot's current size. */
-    values?: readonly number[];
-    /** Smallest gap between generated ticks, in px. Default 24 on y, 64 on x. */
-    minSpacing?: number;
-    /** A generated tick nearer either end of the axis than this is dropped,
-     *  so its label stays on the plot, in px. Default 4 on y, 16 on x. */
-    inset?: number;
-    /** Draw a line across the plot at each tick. Default true. */
-    lines?: boolean;
-    /** Where labels sit: `'inside'` the plot along its left (y) or bottom (x)
-     *  edge, `'outside'` it past that edge in space the caller leaves free,
-     *  or `false` for none. Default `'inside'`. */
-    labels?: 'inside' | 'outside' | false;
-    /** Space between a label and the plot edge it sits against, in px.
-     *  Default 4. */
-    gap?: number;
-    /** Label text for a tick. Default {@link formatTick}. */
-    format?: TickFormatter;
-}
-/** A pointer position given in both of the plot's coordinate systems. */
-interface Plot2DCoords {
-    plot: Point;
-    model: Point;
-}
-/** Props for {@link Plot2D}. */
-interface Plot2DProps {
-    width: number;
-    height: number;
-    /** Model-space x range. Default [0, 1]. */
-    xRange?: readonly [number, number];
-    /** Model-space y range. Default [0, 1]. */
-    yRange?: readonly [number, number];
-    /** Background grid. `false` / `null` / omitted = no grid. Pass `{}`
-     *  for default (3 divisions per axis) or populated GridSettings. */
-    grid?: GridSettings | false | null;
-    /** Axis lines. `false` / `null` = no axes. Omitted = default-styled
-     *  axes (on). Pass AxesSettings to customize. */
-    axes?: AxesSettings | false | null;
-    /** Ticks at x values. `false` / `null` / omitted = none; `{}` = defaults. */
-    xTicks?: TickSettings | false | null;
-    /** Ticks at y values. `false` / `null` / omitted = none; `{}` = defaults. */
-    yTicks?: TickSettings | false | null;
-    /** Forwarded to the underlying svg. Consumer opts into focus this way. */
-    tabIndex?: number;
-    /** Default `'img'`. A plot holding focusable marks must not be an image,
-     *  whose children are presentational to assistive technology. */
-    role?: string;
-    'aria-label'?: string;
-    className?: string;
-    style?: CSSProperties;
-    /** Pointer down on the SVG. Receives both plot- and model-space coords
-     *  pre-computed so consumers don't repeat the rect/transform dance. */
-    onPointerDown?: (e: PointerEvent<SVGSVGElement>, coords: Plot2DCoords) => void;
-    onKeyDown?: (e: KeyboardEvent<SVGSVGElement>) => void;
-    children?: ReactNode;
-}
-/**
- * Imperative handle on a {@link Plot2D}: the SVG element, its size, and the
- * coordinate conversions, including ones that start from a raw DOM event so a
- * drag tracked on `window` can still map back into the plot.
- */
-interface Plot2DHandle {
-    readonly svg: SVGSVGElement | null;
-    plotToModel(pt: Point): Point;
-    modelToPlot(pt: Point): Point;
-    /** Convert a DOM event's clientX/clientY (e.g. from a window-attached
-     *  pointermove during drag) to plot-space. */
-    clientToPlot(e: {
-        clientX: number;
-        clientY: number;
-    }): Point;
-    /** Convenience: clientToPlot → plotToModel. */
-    clientToModel(e: {
-        clientX: number;
-        clientY: number;
-    }): Point;
-    readonly width: number;
-    readonly height: number;
-}
-/**
- * An SVG plotting surface with an optional grid, axes and ticks. It draws the
- * frame and owns the model-space to plot-space mapping; the plotted content is
- * whatever children are passed, positioned in plot space.
- */
-declare const Plot2D: react.ForwardRefExoticComponent<Plot2DProps & react.RefAttributes<Plot2DHandle>>;
-
-/**
- * Interpolation mode dispatcher for CurveEditor. The vocabulary of
- * supported algorithms and the unified `sample(...)` entry point that
- * picks the right one. All algorithms produce
- * `(n-1) * samplesPerSegment + 1` points and pass through every
- * anchor — CurveEditor is strictly interpolating, never approximating.
- */
-
-/** Supported interpolation modes. All are interpolating (pass through
- *  every anchor); the differences are in tangent computation and
- *  parameterization. */
-type InterpolationMode = 'linear' | 'catmull-rom' | 'catmull-rom-uniform' | 'catmull-rom-chordal' | 'monotone';
-
-/**
- * Built-in function/curve layer for LayeredCurveEditor. Bundles the
- * curve-render + anchor-render + drag/insert/delete gestures that were
- * the entirety of the original `CurveEditor`. Multiple instances coexist
- * by id; consumers can compose several to plot e.g. a primary function
- * and a derived (read-only) curve on the same chart.
- */
-
-/** One anchor of a curve, in model space. */
-interface ControlPoint {
-    x: number;
-    y: number;
-    /** When true, this control point can't be moved or deleted by the
-     *  user. Render as a smaller diamond with locked styling. */
-    locked?: boolean;
-}
-/**
- * Whether a curve's points keep their x order. In `'1d'` an anchor cannot be
- * dragged past its neighbors and a new point is inserted at its x position;
- * in `'2d'` points are free to move anywhere and keep their list order.
- */
-type CurveDomain = '1d' | '2d';
-/**
- * How much of a curve's first and last anchor the user may move: everything,
- * only their y, or nothing.
- */
-type EndpointMode = 'free' | 'pinned-x' | 'pinned-both';
-/**
- * Where a click adds a new anchor — on the curve itself, anywhere in the
- * plot, or nowhere.
- */
-type AddPointMode = 'click-curve' | 'click-empty' | 'never';
-/**
- * What a `renderAnchor` function is given for one anchor: the point, its
- * index, its position in plot space (`cx`/`cy`), and the states that change
- * how it should look.
- */
-interface AnchorRenderProps {
-    point: ControlPoint;
-    index: number;
-    cx: number;
-    cy: number;
-    isActive: boolean;
-    isLocked: boolean;
-    isPinnedEndpoint: boolean;
-    isEndpoint: boolean;
-}
-/**
- * Per-instance curve-rendering overrides. Currently empty — passing `{}`
- * means "draw the curve", and `false`/`null` means don't.
- */
-type CurveSettings = object;
-/** Shades the region between the curve and one edge of the plot. */
-interface FillSettings {
-    side: 'below' | 'above';
-    color?: string;
-}
-
-/**
- * Props for {@link CurveEditor}. `onInput` fires throughout a gesture and
- * `onChange` once at its end, with the pre-gesture points as `prev`.
- */
-interface CurveEditorProps {
-    value: readonly ControlPoint[];
-    onInput: (next: ControlPoint[]) => void;
-    onChange?: (next: ControlPoint[], prev: readonly ControlPoint[]) => void;
-    domain?: CurveDomain;
-    interpolation?: InterpolationMode;
-    endpoints?: EndpointMode;
-    xRange?: readonly [number, number];
-    yRange?: readonly [number, number];
-    width: number;
-    height: number;
-    grid?: GridSettings | false | null;
-    axes?: AxesSettings | false | null;
-    xTicks?: TickSettings | false | null;
-    yTicks?: TickSettings | false | null;
-    curve?: CurveSettings | false | null;
-    fill?: FillSettings | false | null;
-    hideNonInteractive?: boolean;
-    constrain?: 'none' | 'function';
-    history?: boolean;
-    minPoints?: number;
-    maxPoints?: number;
-    addPointMode?: AddPointMode;
-    renderAnchor?: (info: AnchorRenderProps) => ReactNode;
-    /** Extra SVG content rendered behind the curve and anchors. */
-    decorations?: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-}
-/**
- * Editable curve through a list of control points: drag anchors, click to
- * insert, right-click to delete, with optional built-in undo.
- *
- * This is the single-curve API, implemented as one `createFunctionLayer` on
- * a `LayeredCurveEditor`. Reach for those directly to stack several curves
- * on one plot.
- */
-declare function CurveEditor(props: CurveEditorProps): react.JSX.Element;
-
-/** Props for {@link PointPlotter}. */
-interface PointPlotterProps {
-    /** Plotted points; caller-owned. */
-    value: readonly ControlPoint[];
-    /** Fires every frame during drag with the live in-flight value. */
-    onInput: (next: ControlPoint[]) => void;
-    /** Fires once per discrete user action (drag-end, add, delete) with
-     *  the new value and the value at gesture start. Wire history here. */
-    onChange?: (next: ControlPoint[], prev: readonly ControlPoint[]) => void;
-    /** Model-space x range. Default [0, 1]. */
-    xRange?: readonly [number, number];
-    /** Model-space y range. Default [0, 1]. */
-    yRange?: readonly [number, number];
-    width: number;
-    height: number;
-    grid?: GridSettings | false | null;
-    axes?: AxesSettings | false | null;
-    xTicks?: TickSettings | false | null;
-    yTicks?: TickSettings | false | null;
-    /** Minimum allowed point count. User-initiated deletion is refused
-     *  while `value.length <= minPoints`. */
-    minPoints?: number;
-    /** Maximum allowed point count. User-initiated insertion is refused
-     *  while `value.length >= maxPoints`. */
-    maxPoints?: number;
-    /** How new points are added. Default `'click-empty'`. Set to `'never'`
-     *  to disable insertion entirely. */
-    addPointMode?: 'click-empty' | 'never';
-    /** Built-in undo/redo via keyboard when the component has focus.
-     *  Default `true`. See `CurveEditor.history` for details. */
-    history?: boolean;
-    /** Custom per-anchor renderer. See `CurveEditor.renderAnchor`. */
-    renderAnchor?: (info: AnchorRenderProps) => ReactNode;
-    /** Extra SVG content beneath the anchors. See `CurveEditor.decorations`. */
-    decorations?: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-}
-/**
- * 2D point plotter — a CurveEditor with the curve hidden. Anchors,
- * drag, shift+click delete, right-click delete, and click-empty insert
- * are inherited from CurveEditor verbatim, so the two components share
- * gesture semantics and stay in sync as CurveEditor evolves.
- *
- * Differences from CurveEditor: no curve `<path>` drawn, no fill, no
- * endpoint pinning, no interpolation, default `addPointMode` is
- * `'click-empty'` (CurveEditor defaults to `'click-curve'`, which
- * doesn't make sense without a curve to hit-test against).
- */
-declare function PointPlotter(props: PointPlotterProps): react.JSX.Element;
-
-/**
- * Options for {@link paintGradientTrack}.
- *
- * `gradient` maps a normalized position along the track (0 to 1) to a CSS
- * color; `samples` is how many stops the resulting linear-gradient uses.
- * `activeRange`, given in the slider's own value units, keeps that span at
- * full strength and dims + hatches the rest.
- */
-type GradientTrackOpts = {
-    gradient: (t: number) => string;
-    samples?: number;
-    activeRange?: [number, number];
-    hatch?: {
-        angleDeg?: number;
-        stripe?: number;
-        gap?: number;
-        dim?: number;
-    };
-};
-/**
- * Builds a `Slider` `renderTrack` function that paints the track as a
- * sampled color gradient, optionally dimming and hatching the portions
- * outside an active range.
- */
-declare function paintGradientTrack(opts: GradientTrackOpts): (ctx: TrackCtx) => ReactNode;
-
-/**
- * A chroma envelope over lightness, as three linear segments: flat at `cBot`
- * below `lRange[0]`, rising to `cPeak` at `midL`, falling to `cTop` at
- * `lRange[1]`, flat beyond. Keeps a color ramp inside gamut at the light and
- * dark ends while staying saturated through the middle.
- */
-type ChromaCurve = {
-    lRange: [number, number];
-    midL: number;
-    cBot: number;
-    cPeak: number;
-    cTop: number;
-};
-/** A single lightness/chroma sample. */
-type ChromaCurvePoint = {
-    L: number;
-    C: number;
-};
-/**
- * Converts an OKLCH color to a gamut-clipped `#rrggbb` string. Hue is in
- * degrees, unlike the kit's OKLab helpers which take radians.
- */
-declare const oklchToHex: typeof oklchDegToHex;
-/** Evaluates a {@link ChromaCurve} at a lightness, clamping outside its range. */
-declare function chromaAt(L: number, curve: ChromaCurve): number;
-
-type Key = string | number;
-/** An option list keyed to the value type its combo box commits. */
-type AsyncOption<T extends Key> = ComboBoxOption & {
-    value: T;
-};
-/** Options for {@link useAsyncOptions}. */
-type UseAsyncOptionsProps<T extends Key> = {
-    /**
-     * Fetches the options for a query. The signal aborts when a later keystroke
-     * supersedes this call, so a `fetch` should forward it.
-     */
-    load: (query: string, signal: AbortSignal) => Promise<ReadonlyArray<AsyncOption<T>>>;
-    /** Quiet period before a query is sent. */
-    debounceMs?: number;
-    /** Shorter queries are not sent, and empty the options. */
-    minLength?: number;
-};
-/** What {@link useAsyncOptions} returns, shaped to spread into a `ComboBox`. */
-type AsyncOptionsResult<T extends Key> = {
-    options: ReadonlyArray<AsyncOption<T>>;
-    isLoading: boolean;
-    loadError: unknown | null;
-    inputValue: string;
-    onInputChange: (next: string) => void;
-};
-/**
- * Drives a combo box whose options come from a server: debounces the query,
- * discards responses overtaken by a later one, and reports a failed load
- * separately from an empty result.
- *
- * `options` holds the last *resolved* list and is never emptied to mean
- * "working", so the previous results stay on screen — and stay arrowable —
- * while the next request is in flight.
- */
-declare function useAsyncOptions<T extends Key = string>({ load, debounceMs, minLength, }: UseAsyncOptionsProps<T>): AsyncOptionsResult<T>;
-
-/** The only thing the hook needs to know about a bar's items: which are
- *  skipped by arrow navigation. */
-type RovingItem = {
-    disabled?: boolean;
-};
-/** Options for {@link useRovingTabIndex}. */
-type UseRovingTabIndexOptions = {
-    /** In the same order as the elements carrying `itemClassName`. */
-    items: readonly RovingItem[];
-    /** Class on the focusable element of each item, inside the container the
-     *  returned `rootRef` is attached to. Their DOM order must match `items`. */
-    itemClassName: string;
-    /** Index that carries `tabIndex=0`. Defaults to the first enabled item; a
-     *  radiogroup-style bar passes its selected index so Tab lands on the
-     *  current value. */
-    tabStopIndex?: number;
-    /** Called with the new index as arrow/Home/End focus moves, before focus
-     *  moves. This is where a selection-follows-focus bar commits the value. */
-    onNavigate?: (index: number) => void;
-    /** Space/Enter on the item at `index`. When omitted the keypress is left
-     *  alone, which on a native `<button>` produces an ordinary click. */
-    onActivate?: (index: number) => void;
-};
-/**
- * What {@link useRovingTabIndex} returns: a container ref plus the per-item
- * `tabIndex` and `onKeyDown` values to spread onto each item.
- */
-type RovingTabIndex<T extends HTMLElement = HTMLDivElement> = {
-    /** Attach to the container element that holds the items. */
-    rootRef: RefObject<T | null>;
-    /** `tabIndex` value for the item at `index`. */
-    tabIndexFor: (index: number) => 0 | -1;
-    /** `onKeyDown` for the item at `index`. */
-    onKeyDown: (index: number) => (e: KeyboardEvent<HTMLElement>) => void;
-};
-/**
- * Roving tabindex for a bar of items: one item is in the tab order, and the
- * arrow keys move focus among the rest, skipping disabled ones and wrapping
- * at both ends. Home and End go to the first and last enabled item. Both axes
- * navigate, so the same bar works laid out either way.
- *
- * Backs `ButtonBar`, `OptionsBar`, and `ToggleBar`.
- *
- * **When a bar should not use this.** What decides it is the items, not who
- * owns them. A container of compound controls — a number field, a select, a
- * color field — must leave the arrow keys alone, because those controls edit
- * their own value with them; taking the arrows over would break the control
- * to navigate between controls. `ToolOptionsBar` is that case: it draws its
- * own controls from a tool's schema now rather than taking arbitrary
- * children, and a schema-drawn number field eats arrows exactly as a
- * hand-placed one did, so it keeps plain DOM tab order. A bar whose items are
- * all simple buttons is the case this hook is for.
- *
- * With every item disabled there is no tab stop and the bar drops out of the
- * tab order entirely.
- */
-declare function useRovingTabIndex<T extends HTMLElement = HTMLDivElement>(options: UseRovingTabIndexOptions): RovingTabIndex<T>;
-
-export { ActionBar, Badge, ButtonBar, Callout, Checkbox, ColorModeControl, ComboBox, ComboBoxItem, CurveEditor, DataGrid, Dialog, Disclosure, DisclosureMark, DisclosureRow, DragGhost, DragHandleGlyph, EDGE_PROFILES, FieldOrientation, KeyCap, KeySequence, ListEditor, MenuButton, NumberField, OptionsBar, OverlayPortalProps, Plot2D, PointPlotter, Powerline, PrefRenderer, PrefsDialog, PrefsForm, Radio, RadioGroup, RangeSlider, SegmentTooltipFields, Sidebar, SidebarPanel, Slider, StanceProps, Switch, Tab, TabList, TabPanel, Tabs, ToggleBarSize, ToggleBarVariant, ToolButton, ToolGroup, ToolPalette, WithoutPortalTarget, chromaAt, detectPlatform, dlog, formatShortcut, formatShortcutParts, inferKeycapKind, isDebugEnabled, isPrefLeaf, keyGlyph, keySpecFromKey, keySpecsFromMods, keySpecsFromShortcut, oklchToHex, paintGradientTrack, prefValueAtPath, useAsyncOptions, useReorderDragList, useRovingTabIndex, visiblePrefSubtree };
-export type { ActionBarProps, AddPointMode, AnchorRenderProps, AsyncOption, AsyncOptionsResult, AxesSettings, BadgeProps, BadgeShape, BadgeSize, BadgeStatus, BadgeVariant, BoundsCtx, BuiltInEdgeName, ButtonBarItem, ButtonBarProps, ButtonBarSize, ButtonBarVariant, CalloutProps, CheckboxProps, ChromaCurve, ChromaCurvePoint, ColorModeControlProps, ComboBoxCommit, ComboBoxFilter, ComboBoxItemProps, ComboBoxOption, ComboBoxProps, ControlPoint, CurveDomain, CurveEditorProps, DataGridColumn, DataGridProps, DialogProps, DisclosureMarkProps, DisclosureProps, DisclosureRowProps, DragGhostProps, DragHandleGlyphProps, EdgeCap, EdgeProfile, EndpointMode, FillSettings, GradientTrackOpts, GridSettings, InterpolationMode, KeyCapProps, KeyCapVariant, KeySequenceProps, KeySpec, KeycapKind, ListEditorProps, LogicalMod, LogicalModSpec, MenuButtonItem, MenuButtonProps, NumberFieldProps, OptionsBarItem, OptionsBarProps, OptionsBarSize, OptionsBarVariant, Platform, Plot2DCoords, Plot2DHandle, Plot2DProps, PointPlotterProps, PowerlineProps, PowerlineSegment, PrefsDialogProps, PrefsFormProps, PrefsLayout, RadioGroupProps, RadioProps, RangeSliderProps, ReorderDragHandlers, ReorderDragState, ReorderGhost, RovingItem, RovingTabIndex, SidebarPanelProps, SidebarProps, SliderProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabsProps, Thumb, ThumbRenderCtx, ThumbShape, ToolButtonProps, ToolGroupProps, ToolPaletteProps, TrackCtx, UseAsyncOptionsProps, UseReorderDragListOptions, UseRovingTabIndexOptions };
+export { MINUS_SIGN, formatNumber } from '@weasel-js/quantity';
+export { ActionBar, ActionBarProps, AddPointMode, AnchorRenderProps, AsyncOption, AsyncOptionsResult, AxesSettings, Badge, BadgeProps, BadgeShape, BadgeSize, BadgeStatus, BadgeVariant, BoundsCtx, BuiltInEdgeName, BuiltInProfileName, BuiltinPref, Button, ButtonBar, ButtonBarItem, ButtonBarProps, ButtonBarSize, ButtonBarVariant, ButtonProps, ButtonSize, ButtonVariant, COLOR_MODE_OPTIONS, Callout, CalloutProps, CalloutTrigger, Checkbox, CheckboxProps, ChromaCurve, ChromaCurvePoint, CloseButton, CloseButtonProps, ColorModeControl, ColorModeControlProps, ComboBox, ComboBoxCommit, ComboBoxFilter, ComboBoxItem, ComboBoxItemProps, ComboBoxOption, ComboBoxProps, ControlPoint, CurveDomain, CurveEditor, CurveEditorProps, DataGrid, DataGridColumn, DataGridProps, Dialog, DialogProps, Disclosure, DisclosureMark, DisclosureMarkProps, DisclosureProps, DisclosureRow, DisclosureRowProps, DragGhost, DragGhostProps, DragGrip, DragGripProps, EDGE_PROFILES, EdgeCap, EdgeProfile, EndpointMode, Field, FieldOrientation, FieldProps, FillSettings, GestureRoute, GestureRouteProps, GradientTrackOpts, GridSettings, ICON_PATHS, Icon, IconName, IconProps, Input, InputProps, InterpolationMode, KeyCap, KeyCapProps, KeyCapVariant, KeySequence, KeySequenceJoins, KeySequenceProps, KeySpec, KeycapKind, LayerList, LayerListItem, LayerListProps, LayerMove, ListEditor, ListEditorProps, LogicalMod, LogicalModSpec, MenuButton, MenuButtonItem, MenuButtonProps, NumberField, NumberFieldProps, OptionsBar, OptionsBarItem, OptionsBarProps, OptionsBarSize, OptionsBarVariant, OverlayPortalProps, Platform, Plot2D, Plot2DCoords, Plot2DHandle, Plot2DProps, PointPlotter, PointPlotterProps, Powerline, PowerlineProps, PowerlineSegment, PrefBoolean, PrefBooleanControl, PrefBooleanEncoding, PrefColor, PrefCustom, PrefEnum, PrefEnumControl, PrefEnumEncoding, PrefGroup, PrefKind, PrefLeaf, PrefNumber, PrefNumberControl, PrefNumberUnit, PrefObject, PrefPaint, PrefRenderContext, PrefRenderer, PrefString, PrefStringControl, PrefsDialog, PrefsDialogProps, PrefsForm, PrefsFormProps, PrefsLayout, PropertyAlign, PropertyDensity, PropertyMetricProps, Radio, RadioGroup, RadioGroupProps, RadioProps, RangeSlider, RangeSliderProps, ReorderDragHandlers, ReorderDragState, ReorderGhost, RovingOrientation, RovingTabIndex, SegmentTooltipFields, Select, SelectItem, SelectItemProps, SelectOption, SelectProps, Sidebar, SidebarPanel, SidebarPanelProps, SidebarProps, Slider, SliderProps, StanceProps, Switch, SwitchProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, ThemeSwitcher, ThemeSwitcherOption, ThemeSwitcherProps, Thumb, ThumbRenderCtx, ThumbShape, ToggleBar, ToggleBarItem, ToggleBarProps, ToggleBarSize, ToggleBarVariant, ToolButton, ToolButtonProps, ToolGroup, ToolGroupProps, ToolPalette, ToolPaletteProps, TrackCtx, UseAsyncOptionsProps, UseReorderDragListOptions, UseRovingTabIndexOptions, WithoutPortalTarget, chromaAt, detectPlatform, dlog, fieldClasses, formatShortcut, formatShortcutParts, gestureRouteSegments, inferKeycapKind, isDebugEnabled, isPrefLeaf, keyGlyph, keySpecFromKey, keySpecsFromMods, keySpecsFromShortcut, moveLayers, oklchToHex, paintGradientTrack, prefValueAtPath, sampleByInterpolation, useAsyncOptions, useReorderDragList, useRovingTabIndex, visiblePrefSubtree } from '@weasel-js/ui';