@weasel-js/labkit 1.5.2 → 1.6.1

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

@@ -1,12 +1,14 @@
-import { O as OverlayPortalProps, W as WithoutPortalTarget } from '../_dts/Select.d-ZTiwzYyT.js';
-export { B as Button, a as ButtonProps, b as ButtonSize, c as ButtonVariant, l as ICON_PATHS, d as Icon, m as IconName, I as IconProps, e as Input, f as InputProps, S as Select, n as SelectItem, o as SelectItemProps, p as SelectOption, g as SelectProps, T as ToggleBar, h as ToggleBarItem, i as ToggleBarProps, j as ToggleBarSize, k as ToggleBarVariant } from '../_dts/Select.d-ZTiwzYyT.js';
+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_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, CSSProperties, ReactElement, KeyboardEvent, RefObject, PointerEvent, RefCallback } from 'react';
-export { LayerStack, LayerStackItem, LayerStackProps } from '../ui/layers/index.js';
-export { a as PrefRenderContext, P as PrefRenderer } from '../_dts/PrefsForm.d-DPy9I8It.js';
+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';
 
@@ -50,15 +52,16 @@ interface ActionBarProps {
     /** Layout direction. Defaults to `'horizontal'`. */
     orientation?: 'horizontal' | 'vertical';
     /**
-     * Per-id icon overrides — keyed by `action.id`. When an entry is provided
+     * 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-id label overrides — keyed by `action.id`. Drives both `aria-label`
-     * and `title`. When omitted, the action's own `label` is used.
+     * 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. */
@@ -67,7 +70,8 @@ interface ActionBarProps {
 /**
  * Generic group-keyed action toolbar. Reads the parent `ActionsRegistry`,
  * filters to actions whose `group` matches `props.group`, and renders one
- * icon button per match. Disabled state is derived from each action's
+ * 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).
@@ -77,7 +81,7 @@ interface ActionBarProps {
  * (roving tabindex) yet — bar consumers today are short flat strips. Add
  * if/when a long bar lands.
  */
-declare function ActionBar(props: ActionBarProps): react_jsx_runtime.JSX.Element;
+declare function ActionBar(props: ActionBarProps): react.JSX.Element;
 
 /**
  * Built-in badge silhouettes. `pill`, `plain` and `square` are drawn in CSS;
@@ -86,14 +90,15 @@ declare function ActionBar(props: ActionBarProps): react_jsx_runtime.JSX.Element
  */
 type BadgeShape = 'pill' | 'plain' | 'square' | 'notched' | 'perforated' | 'hexagon' | 'starburst' | 'scalloped' | 'shield' | 'ribbon' | 'beavis' | 'sparkler' | 'postage' | 'cloud' | 'house' | 'plaque' | 'crest' | 'urn' | 'coffin' | 'receipt' | 'wood' | 'quatrefoil';
 /**
- * Semantic color of a badge. `custom` paints from the `--badge-edge` custom
+ * 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 BadgeTone = 'accent' | 'info' | 'warn' | 'danger' | 'muted' | 'neutral' | 'custom';
-/** How a badge's tone is applied: outline only, filled, or a soft tinted fill. */
+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. */
-type BadgeSize = 'sm' | 'md';
+/** 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). */
@@ -648,7 +653,7 @@ interface SunbeamsEffectParams {
  * `backdrop-filter: blur(...)` on the host element via CSS.
  */
 interface AquaEffectParams {
-    /** Body tint. Defaults to `var(--badge-edge)` so the badge's tone drives it. */
+    /** 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;
@@ -734,8 +739,9 @@ interface EffectSpec<E extends BadgeEffect = BadgeEffect> {
     params?: BadgeEffectParams[E];
 }
 
-interface BadgeBaseProps {
-    tone?: BadgeTone;
+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
@@ -765,12 +771,22 @@ interface BadgeBaseProps {
     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 tone color). */
+     *  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 & {
+    [S in BadgeShape]: BadgeBaseProps & BadgeDomProps & {
         shape?: S;
         shapeParams?: BadgeShapeParams[S];
     };
@@ -789,8 +805,10 @@ type BadgeProps = BadgePropsByShape;
  * 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 function Badge(props: BadgeProps): react_jsx_runtime.JSX.Element;
+declare const Badge: react.ForwardRefExoticComponent<BadgePropsByShape & react.RefAttributes<HTMLElement>>;
 
 /**
  * One column of a {@link DataGrid}. `id` doubles as the default property name
@@ -825,6 +843,28 @@ interface DataGridProps<Row extends {
     /** 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
@@ -835,10 +875,27 @@ interface DataGridProps<Row extends {
  */
 declare function DataGrid<Row extends {
     id: string;
-}>(props: DataGridProps<Row>): react_jsx_runtime.JSX.Element;
+}>(props: DataGridProps<Row>): react.JSX.Element;
 
-/** Which way the mark points when the section is closed. */
-type DisclosureDirection = 'right' | 'down';
+/** 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. */
@@ -854,17 +911,14 @@ interface DisclosureProps {
      * screen reader move to the revealed content.
      */
     controls?: string;
-    /** Which way the closed mark points. `'right'` (default) rotates down when
-     *  open; `'down'` rotates up. */
-    direction?: DisclosureDirection;
     /** Mark size in px. The hit target is at least 20px and grows with it.
-     *  Default 12. */
+     *  Default 13. */
     size?: number;
     disabled?: boolean;
     className?: string;
 }
 /**
- * The twisty on a collapsible section: a triangle that turns as it opens.
+ * 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
@@ -873,17 +927,11 @@ interface DisclosureProps {
  * 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 — around 6px against 13px body text, which reads as dirt on
- * the screen. 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.
- *
- * Deliberately not part of the icon register, on the same grounds as
- * `DragHandleGlyph`: that register is outline strokes at a fixed weight, and
- * `base.mjs` rejects a solid triangle in it by name. A disclosure mark is
- * filled.
+ * 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, direction, size, disabled, className, }: DisclosureProps): react_jsx_runtime.JSX.Element;
+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. */
@@ -898,7 +946,27 @@ interface DisclosureRowProps extends Omit<DisclosureProps, 'className'> {
  * 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_runtime.JSX.Element;
+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 {
@@ -910,7 +978,7 @@ interface DragHandleGlyphProps {
  *  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_runtime.JSX.Element;
+declare function DragHandleGlyph({ size }: DragHandleGlyphProps): react.JSX.Element;
 
 /**
  * Width class of a keycap: a modifier glyph, a multi-character legend that
@@ -953,7 +1021,7 @@ interface KeyCapProps {
 }
 /** 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_runtime.JSX.Element;
+declare function KeyCap({ label, inverted, variant, className, style, font }: KeyCapProps): react.JSX.Element;
 
 /** One key in a shortcut. */
 interface KeySpec {
@@ -983,7 +1051,7 @@ interface KeySequenceProps {
 }
 /** 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_runtime.JSX.Element;
+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
@@ -1074,6 +1142,36 @@ 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.
@@ -1151,7 +1249,8 @@ type SliderStop = {
  * `'even'` falls back to linear.
  *
  * `trackClick: 'move-nearest'` makes a press on bare track send the closest
- * thumb there and continue as a drag. It is off by default because on a
+ * 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.
  *
@@ -1198,6 +1297,146 @@ type SliderProps<T extends Thumb = Thumb> = {
  */
 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`.
@@ -1235,28 +1474,28 @@ type OptionsBarProps<V extends string | number = string> = {
 declare function OptionsBar<V extends string | number = string>(props: OptionsBarProps<V>): ReactElement;
 
 /**
- * One button in an {@link ActionsBar}. `value` is only a React key; the item
+ * One button in an {@link ButtonBar}. `value` is only a React key; the item
  * carries no selected state.
  */
-type ActionsBarItem<V extends string | number = string> = {
+type ButtonBarItem<V extends string | number = string> = {
     value: V;
     label?: ReactNode;
     ariaLabel?: string;
     disabled?: boolean;
     onAction: () => void;
-};
-/** Segment height and type scale for an {@link ActionsBar}. */
-type ActionsBarSize = 'sm' | 'md';
-/** Visual treatment of an {@link ActionsBar}. */
-type ActionsBarVariant = 'default' | 'minimal';
-/** Props for {@link ActionsBar}. */
-type ActionsBarProps<V extends string | number = string> = {
-    items: readonly ActionsBarItem<V>[];
+} & 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?: ActionsBarSize;
-    variant?: ActionsBarVariant;
+    size?: ButtonBarSize;
+    variant?: ButtonBarVariant;
 };
 /**
  * Segmented strip of momentary buttons — each press fires and nothing stays
@@ -1266,17 +1505,17 @@ type ActionsBarProps<V extends string | number = string> = {
  * This is a plain callback bar. For buttons driven by the kit's actions
  * registry, use `ActionBar` instead.
  */
-declare function ActionsBar<V extends string | number = string>(props: ActionsBarProps<V>): ReactElement;
+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 {
+interface PowerlineSegment extends StanceProps {
     text: ReactNode;
     /** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */
     endCap?: EdgeCap;
-    tone?: BadgeTone;
+    status?: BadgeStatus;
     variant?: BadgeVariant;
     size?: BadgeSize;
     onClick?: () => void;
@@ -1308,24 +1547,7 @@ interface PowerlineProps {
  * 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_runtime.JSX.Element;
-
-/**
- * Display-formatter for numbers. Use this anywhere a number is shown to
- * a user. The whole point: negative values get prefixed with the real
- * MINUS SIGN (U+2212) instead of the ASCII HYPHEN-MINUS (U+002D) that
- * `toLocaleString` and template literals produce by default.
- *
- * U+2212 is the same visual width as `+` and reads as a sign rather
- * than a hyphen — columns of signed numbers align cleanly and the
- * glyph doesn't get confused with a bullet or list dash.
- */
-declare const MINUS_SIGN = "\u2212";
-/**
- * Formats a number for display, substituting {@link MINUS_SIGN} for the ASCII
- * hyphen `toLocaleString` emits. Non-finite values stringify as-is.
- */
-declare function formatNumber(value: number, options?: Intl.NumberFormatOptions): string;
+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;
@@ -1338,6 +1560,87 @@ declare function prefValueAtPath(values: unknown, path: string): unknown;
  */
 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 {
     /**
@@ -1367,7 +1670,7 @@ interface SidebarProps {
  *
  * Pair with `<SidebarPanel>` for collapsible sections.
  */
-declare function Sidebar(props: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar(props: SidebarProps): react.JSX.Element;
 
 /** Props for {@link SidebarPanel}. */
 interface SidebarPanelProps {
@@ -1381,7 +1684,7 @@ interface SidebarPanelProps {
     collapsed?: boolean;
     /**
      * Click handler for the title row. When provided, the header renders
-     * as a button (chevron + label) and acts as the collapse toggle.
+     * 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;
@@ -1398,11 +1701,11 @@ interface SidebarPanelProps {
  * 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
- * chevrons toggle the same map).
+ * fold marks toggle the same map).
  *
  * Pair with `<Sidebar>` for the docked column layout.
  */
-declare function SidebarPanel(props: SidebarPanelProps): react_jsx_runtime.JSX.Element;
+declare function SidebarPanel(props: SidebarPanelProps): react.JSX.Element;
 
 /** Props for {@link ToolButton}. */
 interface ToolButtonProps {
@@ -1446,7 +1749,7 @@ interface ToolButtonProps {
  * 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_runtime.JSX.Element;
+declare function ToolButton(props: ToolButtonProps): react.JSX.Element;
 
 /** Props for {@link ToolGroup}. */
 interface ToolGroupProps {
@@ -1471,7 +1774,7 @@ interface ToolGroupProps {
  * `<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_runtime.JSX.Element;
+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
@@ -1501,6 +1804,11 @@ interface WorkspaceVisual {
  */
 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[];
@@ -1534,23 +1842,6 @@ interface ModeRegistry {
     subscribe(listener: () => void): () => void;
 }
 
-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;
-
 /** Props for {@link ToolPalette}. */
 interface ToolPaletteProps {
     tools: ToolsApi;
@@ -1583,40 +1874,7 @@ interface ToolPaletteProps {
  * 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_runtime.JSX.Element;
-
-/**
- * Whether a {@link Field} stacks its label above the control or sits them
- * side by side.
- */
-type FieldOrientation = 'stacked' | 'row';
-/** Props for {@link Field}. */
-type FieldProps = {
-    orientation?: FieldOrientation;
-    className?: string;
-    children?: ReactNode;
-};
-/**
- * Layout primitive that arranges a label, control, hint, and error in the
- * canonical weasel-ui form-row shape. The control itself owns its semantics
- * (RAC `TextField`, `Checkbox`, etc.); this just paints the layout.
- *
- * Most users will instead reach for `Input` / `Checkbox` / `Switch`, which
- * compose Field internally. Use Field directly when you need a custom
- * control to sit in the same visual rhythm.
- */
-declare function Field({ orientation, className, children }: FieldProps): react_jsx_runtime.JSX.Element;
-/**
- * The class names {@link Field} paints its slots with, so a control composing
- * its own layout can match the same form-row rhythm.
- */
-declare const fieldClasses: {
-    root: string;
-    row: string;
-    label: string;
-    hint: string;
-    error: string;
-};
+declare function ToolPalette(props: ToolPaletteProps): react.JSX.Element;
 
 /**
  * Props for {@link Checkbox}, on top of React Aria's `Checkbox` props. The
@@ -1664,27 +1922,27 @@ type TabsProps = Omit<TabsProps$1, 'className' | 'children'> & {
  * 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_runtime.JSX.Element;
+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_runtime.JSX.Element;
+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_runtime.JSX.Element;
+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_runtime.JSX.Element;
+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'> & {
@@ -1699,18 +1957,24 @@ type RadioGroupProps = Omit<RadioGroupProps$1, 'children' | 'className'> & {
  * supplying the same label / description / errorMessage slots as `Input`.
  * Holds {@link Radio} children.
  */
-declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
+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_runtime.JSX.Element;
+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. */
@@ -1739,6 +2003,12 @@ type NumberFieldProps = Omit<NumberFieldProps$1, 'children' | 'className'> & {
  */
 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. */
@@ -1777,13 +2047,16 @@ type MenuButtonProps<T extends string = string> = {
     isDisabled?: boolean;
     className?: string;
     'aria-label'?: string;
-} & OverlayPortalProps;
+} & 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, }: MenuButtonProps<T>): react_jsx_runtime.JSX.Element;
+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
@@ -1863,13 +2136,13 @@ type ComboBoxProps<T extends Key$1 = string> = Omit<ComboBoxProps$1<object>, 'ch
  * 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_runtime.JSX.Element;
+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_runtime.JSX.Element;
+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'> & {
@@ -1891,10 +2164,10 @@ type RangeSliderProps = Omit<SliderProps$1, 'children' | 'className'> & {
  * *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_runtime.JSX.Element;
+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 & {
+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;
@@ -1909,6 +2182,10 @@ type DialogProps = Omit<WithoutPortalTarget<ModalOverlayProps>, 'children' | 'cl
     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 +
@@ -1917,23 +2194,19 @@ type DialogProps = Omit<WithoutPortalTarget<ModalOverlayProps>, 'children' | 'cl
  * `react-aria-components` upstream of this component.
  *
  * Escape, click-outside, focus trap, and scroll lock all come from the
- * underlying primitives.
+ * underlying primitives. `stance` and `tone` work as on `<PropertyPanel>` —
+ * a destructive confirm is `stance="danger"`.
  */
-declare function Dialog(props: DialogProps): react_jsx_runtime.JSX.Element;
-
-/** Accent color of a {@link Callout}'s border and arrow. */
-type CalloutTone = 'info' | 'warning' | '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 & {
+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;
-    /** Accent tone for border + arrow. Default `info`. */
-    tone?: CalloutTone;
     /**
      * `true` — blocks interaction with the rest of the app until dismissed;
      * inner dialog is `role="alertdialog"`. `false` (default) — non-blocking:
@@ -1978,7 +2251,7 @@ type CalloutProps = Omit<WithoutPortalTarget<PopoverProps>, 'children' | 'classN
  * Wraps React Aria Popover + Dialog; positioning, collision flipping,
  * dismissal, and focus behavior come from the underlying primitives.
  */
-declare function Callout(props: CalloutProps): react_jsx_runtime.JSX.Element;
+declare function Callout(props: CalloutProps): react.JSX.Element;
 
 /**
  * Coordinate transforms (model ↔ plot) for Plot2D. Pure / deterministic —
@@ -2225,7 +2498,7 @@ interface CurveEditorProps {
  * a `LayeredCurveEditor`. Reach for those directly to stack several curves
  * on one plot.
  */
-declare function CurveEditor(props: CurveEditorProps): react_jsx_runtime.JSX.Element;
+declare function CurveEditor(props: CurveEditorProps): react.JSX.Element;
 
 /** Props for {@link PointPlotter}. */
 interface PointPlotterProps {
@@ -2276,7 +2549,7 @@ interface PointPlotterProps {
  * `'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_runtime.JSX.Element;
+declare function PointPlotter(props: PointPlotterProps): react.JSX.Element;
 
 /**
  * Options for {@link paintGradientTrack}.
@@ -2366,76 +2639,6 @@ type AsyncOptionsResult<T extends Key> = {
  */
 declare function useAsyncOptions<T extends Key = string>({ load, debounceMs, minLength, }: UseAsyncOptionsProps<T>): AsyncOptionsResult<T>;
 
-/** One row in a reorderable list. */
-interface LayerListItem {
-    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;
-    /** Optional color swatch rendered before the label. Any CSS color string. */
-    swatch?: string;
-}
-/**
- * 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: LayerListItem[];
-    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. */
-    onPress?(id: string, mods: PressModifiers): void;
-    /** Pointer-move distance (px) before pending drag engages. Default 4. */
-    threshold?: number;
-}
-/** Modifier keys held when a press began. */
-interface PressModifiers {
-    shiftKey: boolean;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    altKey: boolean;
-}
-/**
- * Live drag state for rendering feedback: which ids are being dragged and the
- * insertion index the drop would use. Both `null` when no drag is engaged.
- */
-interface ReorderDragState {
-    draggedIds: string[] | null;
-    targetIndex: number | 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;
-}
-/**
- * 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`.
- *
- * 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;
-
 /** The only thing the hook needs to know about a bar's items: which are
  *  skipped by arrow navigation. */
 type RovingItem = {
@@ -2477,7 +2680,7 @@ type RovingTabIndex<T extends HTMLElement = HTMLDivElement> = {
  * 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 `ActionsBar`, `OptionsBar`, and `ToggleBar`.
+ * 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
@@ -2494,5 +2697,5 @@ type RovingTabIndex<T extends HTMLElement = HTMLDivElement> = {
  */
 declare function useRovingTabIndex<T extends HTMLElement = HTMLDivElement>(options: UseRovingTabIndexOptions): RovingTabIndex<T>;
 
-export { ActionBar, ActionsBar, Badge, Callout, Checkbox, ComboBox, ComboBoxItem, CurveEditor, DataGrid, Dialog, Disclosure, DisclosureRow, DragHandleGlyph, EDGE_PROFILES, Field, KeyCap, KeySequence, MINUS_SIGN, MenuButton, NumberField, OptionsBar, Plot2D, PointPlotter, Powerline, Radio, RadioGroup, RangeSlider, Sidebar, SidebarPanel, Slider, Switch, Tab, TabList, TabPanel, Tabs, ToolButton, ToolGroup, ToolPalette, chromaAt, detectPlatform, dlog, fieldClasses, formatNumber, formatShortcut, formatShortcutParts, inferKeycapKind, isDebugEnabled, isPrefLeaf, keyGlyph, keySpecFromKey, keySpecsFromMods, oklchToHex, paintGradientTrack, prefValueAtPath, useAsyncOptions, useReorderDragList, useRovingTabIndex, visiblePrefSubtree };
-export type { ActionBarProps, ActionsBarItem, ActionsBarProps, ActionsBarSize, ActionsBarVariant, AddPointMode, AnchorRenderProps, AsyncOption, AsyncOptionsResult, AxesSettings, BadgeProps, BadgeShape, BadgeSize, BadgeTone, BadgeVariant, BoundsCtx, BuiltInEdgeName, CalloutProps, CheckboxProps, ChromaCurve, ChromaCurvePoint, ComboBoxCommit, ComboBoxFilter, ComboBoxItemProps, ComboBoxOption, ComboBoxProps, ControlPoint, CurveDomain, CurveEditorProps, DataGridColumn, DataGridProps, DialogProps, DisclosureDirection, DisclosureProps, DisclosureRowProps, DragHandleGlyphProps, EdgeCap, EdgeProfile, EndpointMode, FieldOrientation, FieldProps, FillSettings, GradientTrackOpts, GridSettings, InterpolationMode, KeyCapProps, KeyCapVariant, KeySequenceProps, KeySpec, KeycapKind, LayerListItem, LogicalMod, LogicalModSpec, MenuButtonItem, MenuButtonProps, NumberFieldProps, OptionsBarItem, OptionsBarProps, OptionsBarSize, OptionsBarVariant, Platform, Plot2DCoords, Plot2DHandle, Plot2DProps, PointPlotterProps, PowerlineProps, PowerlineSegment, RadioGroupProps, RadioProps, RangeSliderProps, ReorderDragHandlers, ReorderDragState, RovingItem, RovingTabIndex, SidebarPanelProps, SidebarProps, SliderProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabsProps, Thumb, ThumbRenderCtx, ThumbShape, ToolButtonProps, ToolGroupProps, ToolPaletteProps, TrackCtx, UseAsyncOptionsProps, UseReorderDragListOptions, UseRovingTabIndexOptions };
+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 };