@ixfx/components 0.6.1 → 0.7.0

package/bundle/index.d.ts

@@ -2934,6 +2934,1050 @@ interface DataGridElement {
   removeEventListener: (<K extends keyof DataGridElementEventMap>(type: K, listener: (this: DataGridElement, event: DataGridElementEventMap[K]) => void, options?: boolean | EventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void);
 }
 //#endregion
+//#region src/interaction/list-selection-types.d.ts
+/**
+ * Shared list selection types.
+ *
+ * Used by every list-flavoured component (`ixfx-vertical-list`,
+ * `ixfx-detail-list`, …) so selection semantics and events stay identical
+ * across them. Historically lived in `src/vertical-list/types.ts`, which
+ * still re-exports everything from here for backwards compatibility.
+ */
+type ListSelectionMode = `none` | `single` | `multiple`;
+/**
+ * Controls how pointer and keyboard gestures map to selection changes.
+ *
+ * - `implicit`  — click always replaces selection (no modifier support)
+ * - `standard`  — click replaces; Ctrl/Cmd+click toggles; Shift+click range-selects (multiple only)
+ * - `manual`    — no auto-selection; drive state via select()/deselect()/clearSelection()
+ * - `checked`   — every click toggles; implies multiple selection regardless of selectionMode
+ * - `sticky`    — every tap/click toggles (no checkbox column); implies multiple selection, for touchscreens
+ * - `vscode`    — like standard for clicks; Shift+Arrow extends range from the keyboard anchor
+ *
+ * Switching interactionMode clears the current selection.
+ */
+type ListInteractionMode = `implicit` | `standard` | `manual` | `checked` | `sticky` | `vscode`;
+type ListSelectDetail = {
+  readonly selected: ReadonlySet<Element>;
+  readonly previous: ReadonlySet<Element>;
+};
+type ListTickleDetail = {
+  readonly item: Element;
+};
+type ListActivateDetail = {
+  readonly item: Element;
+};
+type ListItemClickDetail = {
+  readonly item: Element;
+};
+type ListSelectEvent = CustomEvent<ListSelectDetail>;
+type ListTickleEvent = CustomEvent<ListTickleDetail>;
+type ListActivateEvent = CustomEvent<ListActivateDetail>;
+type ListItemClickEvent = CustomEvent<ListItemClickDetail>;
+interface ListElementEventMap {
+  'list-select': ListSelectEvent;
+  'list-tickle': ListTickleEvent;
+  'list-activate': ListActivateEvent;
+  'list-item-click': ListItemClickEvent;
+}
+//#endregion
+//#region src/vertical-list/vertical-list.d.ts
+interface CustomCheckboxOptions {
+  renderer: (checked: boolean) => unknown;
+  margin?: string;
+  width?: string;
+}
+interface AddItemOptions {
+  /**
+   * In `checked` interaction mode, adds the item without a checkbox column and
+   * without the ability to be checked/selected. Equivalent to setting the
+   * `not-checked` attribute on the item. Ignored outside `checked` mode.
+   */
+  notChecked?: boolean;
+}
+declare class VerticalListElement extends LitElement {
+  #private;
+  selectionMode: ListSelectionMode;
+  interactionMode: ListInteractionMode;
+  filterPredicate: ((el: Element) => boolean) | undefined;
+  /**
+   * Whether keyboard navigation wraps from last to first and vice versa.
+   * - 'stop' (default): navigation stops at the boundary
+   * - 'wrap': navigation wraps around
+   */
+  itemWrap: `stop` | `wrap`;
+  /**
+   * Optional renderer for the checkbox shown in `checked` interactionMode.
+   * Receives the current `checked` state and returns a Lit template result.
+   *
+   * When set, the per-row checkbox becomes a `<span role="checkbox">` whose
+   * contents are whatever this returns (rendered with `lit`'s `render()`).
+   * When unset, a native `<input type="checkbox">` is used.
+   *
+   * @example
+   *   list.checkboxRenderer = (checked) => checked
+   *     ? html`<svg viewBox="0 0 16 16" width="14" height="14"
+   *           fill="none" stroke="currentColor" stroke-width="2"
+   *           stroke-linecap="round" stroke-linejoin="round"
+   *           style="opacity:0.5">
+   *         <polyline points="3,8 7,12 13,4" />
+   *       </svg>`
+   *     : html``;
+   */
+  checkboxRenderer: ((checked: boolean) => unknown) | CustomCheckboxOptions | undefined;
+  private _searchVisible;
+  private _searchQuery;
+  private _searchInputEl;
+  private readonly selection;
+  private tickled;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changed: PropertyValues): void;
+  /** The most recently selected item, or `undefined` if nothing is selected. */
+  get selectedItem(): Element | undefined;
+  /** The full current selection set (read-only). */
+  get selectedItems(): ReadonlySet<Element>;
+  addItem(item: Element | string, options?: AddItemOptions): void;
+  removeItem(item: Element): void;
+  clearItems(): void;
+  /**
+   * Replace the entire item list in one call.
+   * Equivalent to `clearItems()` followed by `addItem()` for each element.
+   * Preserves `interactionMode` checkbox wrapping.
+   */
+  setItems(items: readonly Element[]): void;
+  /**
+   * Dispatch a command to this list. No-op by default.
+   * Intended for use with `ixfx-grouped-item-lister`'s `dispatch()` method,
+   * which forwards commands to all sub-components.
+   */
+  dispatch(_commandId: CommandId, _args?: Record<string, unknown>): void;
+  select(item: Element): void;
+  selectMany(items: Iterable<Element>): void;
+  deselect(item: Element): void;
+  clearSelection(): void;
+  selectAll(): void;
+  selectedFilter(kind: `selected` | `checked` | `either`): Generator<Element>;
+  private _getVisibleItems;
+  private _isCheckable;
+  private _syncItemStates;
+  private _syncCheckboxes;
+  /**
+   * Native checkbox cell: a span that stretches to the row's full cross-axis
+   * (so the entire column height is a click target) with a real `<input>`
+   * centred inside. The span owns the click; the input is purely visual and
+   * has `pointer-events:none` so a single click produces one toggle.
+   */
+  private _createNativeCheckboxCell;
+  /**
+   * Custom checkbox cell: same shape as the native cell (a stretching span)
+   * so behaviour is identical. The renderer's content goes inside.
+   */
+  private _createCustomCheckbox;
+  private _findListItem;
+  private _dispatch;
+  private _openSearch;
+  private _closeSearch;
+  private _onPointerOver;
+  private _onPointerLeave;
+  private _onKeyDown;
+  private _onClick;
+  private _onDblClick;
+  private _activateItem;
+  private _onSearchInput;
+  private _onSearchKeydown;
+  static styles: CSSResult[];
+  render(): TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-vertical-list': VerticalListElement;
+  }
+  interface HTMLElementEventMap extends ListElementEventMap {}
+}
+//#endregion
+//#region src/detail-list/types.d.ts
+/** Sort direction applied to the item columns. */
+type DetailSortMode = `none` | `ascending` | `descending`;
+/** Per-item view of a row passed to `sortComparator`. */
+type DetailSortItem = {
+  readonly element: HTMLElement;
+  readonly data: unknown;
+  readonly label: string;
+};
+/** Custom comparator — return negative when `a` sorts before `b`. */
+type DetailSortComparator = (a: DetailSortItem, b: DetailSortItem) => number;
+/** Turns one object item into row content — a plain string or a DOM node. */
+type DetailFormatter = (item: unknown, index: number) => string | Node;
+//#endregion
+//#region src/detail-list/detail-list.d.ts
+/**
+ * A list that scales horizontally, not vertically.
+ *
+ * Items are laid out in equal-width columns; they flow top→bottom down a
+ * column, then wrap to the top of the next column to the right. The
+ * component has a fixed vertical extent and scrolls horizontally.
+ *
+ * Selection semantics match `ixfx-vertical-list` — same modes, same
+ * `list-*` events, same keyboard gestures — but navigation is a 2-D grid
+ * (Up/Down move within a column, Left/Right jump columns).
+ *
+ * Items come from any of three sources (later writes win):
+ * 1. declarative `<li>` children in light DOM,
+ * 2. `addItem()` / `setItems()`,
+ * 3. an `items` array of objects rendered via `displayProperty` /
+ *    `formatter`, optionally streamed in via a `provider`.
+ */
+declare class DetailListElement extends LitElement {
+  #private;
+  selectionMode: ListSelectionMode;
+  interactionMode: ListInteractionMode;
+  sort: DetailSortMode;
+  sortBy: string;
+  sortComparator: DetailSortComparator | undefined;
+  items: readonly unknown[];
+  provider: IDataProvider<void, unknown> | undefined;
+  displayProperty: string;
+  formatter: DetailFormatter | undefined;
+  iconProperty: string;
+  keyProperty: string;
+  filterPredicate: ((el: Element) => boolean) | undefined;
+  /**
+   * Whether keyboard navigation wraps from last to first and vice versa.
+   * - 'stop' (default): navigation stops at the boundary
+   * - 'wrap': navigation wraps around
+   */
+  itemWrap: `stop` | `wrap`;
+  /** Optional renderer for the checkbox shown in `checked` interactionMode. */
+  checkboxRenderer: ((checked: boolean) => unknown) | CustomCheckboxOptions | undefined;
+  private _searchVisible;
+  private _searchQuery;
+  private _searchInputEl;
+  private _listEl;
+  private readonly selection;
+  private tickled;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changed: PropertyValues): void;
+  /** The most recently selected item, or `undefined` if nothing is selected. */
+  get selectedItem(): Element | undefined;
+  /** The full current selection set (read-only). */
+  get selectedItems(): ReadonlySet<Element>;
+  /**
+   * Force an immediate geometry recompute. Called automatically on resize,
+   * DOM changes, sort/filter/search changes — only needed when layout is
+   * changed by outside forces (e.g. an external font load).
+   */
+  refreshLayout(): void;
+  addItem(item: Element | string, options?: AddItemOptions): void;
+  removeItem(item: Element): void;
+  clearItems(): void;
+  /**
+   * Replace the entire item list in one call.
+   * Equivalent to `clearItems()` followed by `addItem()` for each element.
+   */
+  setItems(items: readonly Element[]): void;
+  /**
+   * Get the source object behind an `<li>` built from an `items` array or
+   * provider. Returns `undefined` for declarative / programmatic elements.
+   */
+  getItemData(item: HTMLLIElement): unknown;
+  /** Dispatch a command to this list. No-op by default (grouped-lister parity). */
+  dispatch(_commandId: CommandId, _args?: Record<string, unknown>): void;
+  select(item: Element): void;
+  selectMany(items: Iterable<Element>): void;
+  deselect(item: Element): void;
+  clearSelection(): void;
+  selectAll(): void;
+  selectedFilter(kind: `selected` | `checked` | `either`): Generator<Element>;
+  private _getVisibleItems;
+  private _isCheckable;
+  private _setLabel;
+  private _syncItemStates;
+  private _syncCheckboxes;
+  /**
+   * Native checkbox cell: a span that stretches to the row's full cross-axis
+   * (so the entire column height is a click target) with a real `<input>`
+   * centred inside. The span owns the click; the input is purely visual and
+   * has `pointer-events:none` so a single click produces one toggle.
+   */
+  private _createNativeCheckboxCell;
+  /** Custom checkbox cell: same shape as the native cell; renderer content inside. */
+  private _createCustomCheckbox;
+  private _findListItem;
+  private _dispatch;
+  private _openSearch;
+  private _closeSearch;
+  private _onPointerOver;
+  private _onPointerLeave;
+  private _onKeyDown;
+  private _onClick;
+  private _onDblClick;
+  private _onWheel;
+  private _activateItem;
+  private _onSearchInput;
+  private _onSearchKeydown;
+  static styles: CSSResult[];
+  render(): TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-detail-list': DetailListElement;
+  }
+  interface HTMLElementEventMap extends ListElementEventMap {}
+}
+//#endregion
+//#region src/titlebar/titlebar.d.ts
+type TitlebarOrientation = `horizontal` | `vertical`;
+type TitlebarVariant = `titlebar` | `midline`;
+type TitlebarToggleInteraction = `implicit` | `explicit` | `disabled`;
+interface TitlebarToggleDetail {
+  readonly collapsed: boolean;
+}
+type TitlebarToggleEvent = CustomEvent<TitlebarToggleDetail>;
+type TitlebarCloseEvent = CustomEvent<void>;
+interface TitlebarElementEventMap {
+  toggle: TitlebarToggleEvent;
+  close: TitlebarCloseEvent;
+}
+/**
+ * Standalone titlebar chrome: title, icon, toolbar slot, close button and
+ * optional collapse/expand caret. Extracted from `ixfx-panel`.
+ *
+ * Collapsing is opt-in via `collapsible`. When absent, no caret is shown and
+ * `toggle-interaction` is inert. `close` is fired without removing the
+ * element — the host decides what closing means.
+ */
+declare class TitlebarElement extends LitElement {
+  title: string;
+  iconName: string;
+  orientation: TitlebarOrientation;
+  variant: TitlebarVariant;
+  closable: boolean;
+  /** Show the collapse/expand caret and enable toggle behaviour. */
+  collapsible: boolean;
+  collapsed: boolean;
+  toggleInteraction: TitlebarToggleInteraction;
+  private _onToggleClick;
+  private _onCloseClick;
+  private _getCaretIcon;
+  protected render(): TemplateResult<1>;
+  static styles: CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-titlebar': TitlebarElement;
+  }
+}
+interface TitlebarElement {
+  addEventListener: (<K extends keyof TitlebarElementEventMap>(type: K, listener: (this: TitlebarElement, event: TitlebarElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
+//#region src/dock/types.d.ts
+/** Axis values used by `ixfx-split-layout` — stored verbatim in the model. */
+type DockAxis = `row` | `column`;
+type DockLayout = {
+  readonly version: 1;
+  readonly root: DockNode;
+};
+type DockNode = DockSplitNode | DockStackNode;
+/**
+ * N-ary split node, rendered as a single `ixfx-split-layout`.
+ * `direction` uses the element's flexbox sense: `row` places children
+ * side-by-side, `column` stacks them vertically.
+ */
+interface DockSplitNode {
+  kind: `split`;
+  direction: DockAxis;
+  /** Flex weights, parallel to `children`. Need not sum to 1. */
+  sizes: number[];
+  /** Two or more children (post-normalize). */
+  children: DockNode[];
+}
+interface DockStackNode {
+  kind: `stack`;
+  /** Panel-ids in tab order. */
+  panels: string[];
+  /** Active panel-id (empty when the stack is empty). */
+  active: string;
+  /** Whole stack collapsed to its titlebar / strip. */
+  collapsed?: boolean;
+  /** Size to restore into the parent split on expand. */
+  preCollapseSize?: string;
+}
+type DockOperation = `tabs` | `split-horizontal` | `split-vertical`;
+interface DockPanelDragStartDetail {
+  readonly panelId: string;
+  readonly pointerId: number;
+  readonly clientX: number;
+  readonly clientY: number;
+}
+type DockPanelDragStartEvent = CustomEvent<DockPanelDragStartDetail>;
+interface DockChangeDetail {
+  readonly layout: DockLayout;
+}
+type DockChangeEvent = CustomEvent<DockChangeDetail>;
+interface DockPanelAddedDetail {
+  readonly panelId: string;
+}
+type DockPanelAddedEvent = CustomEvent<DockPanelAddedDetail>;
+interface DockPanelRemovedDetail {
+  readonly panelId: string;
+}
+type DockPanelRemovedEvent = CustomEvent<DockPanelRemovedDetail>;
+interface DockPanelActivatedDetail {
+  readonly panelId: string;
+}
+type DockPanelActivatedEvent = CustomEvent<DockPanelActivatedDetail>;
+type DockPanelInit = {
+  panelId: string;
+  title?: string;
+  iconName?: string;
+  closable?: boolean;
+  collapsible?: boolean;
+};
+/**
+ * Plain, structured-clone-safe description of a panel. Enough to recreate an
+ * `ixfx-dock-panel` in another document / process (e.g. a new Electron
+ * `BrowserWindow`). `contentHTML` is a best-effort capture of the panel's
+ * light-DOM markup at snapshot time — apps whose panels hold live state or
+ * framework-managed DOM should rebuild the body from their own model instead
+ * and ignore this field.
+ */
+interface DockPanelSnapshot {
+  panelId: string;
+  title: string;
+  iconName: string;
+  closable: boolean;
+  collapsible: boolean;
+  /** The panel's `accepts` restriction token string (may be empty). */
+  accepts: string;
+  /** Best-effort `innerHTML` of the panel element at capture time. */
+  contentHTML: string;
+}
+/**
+ * Serializable result of hit-testing a point against a host — what a drop
+ * there would do. Returned by `queryDropTarget()` / `previewExternalDrop()`
+ * so a coordinator (in-page or over IPC) can reason about the outcome without
+ * a live `DockDropZone` (which carries element references).
+ */
+interface DockDropTarget {
+  operation: DockOperation;
+  /** Path of the target stack in the host model; `[]` = the host root. */
+  targetPath: number[];
+  side: `before` | `after`;
+  /** Tab insertion index for `tabs` drops. */
+  gapIndex?: number;
+}
+interface DockPanelTearOutDetail {
+  readonly panelId: string;
+  /** Snapshot captured from the source panel at release. */
+  readonly snapshot: DockPanelSnapshot;
+  /** Pointer position in the source window's viewport at release. */
+  readonly clientX: number;
+  readonly clientY: number;
+  /** Pointer position in screen coordinates at release — for window placement. */
+  readonly screenX: number;
+  readonly screenY: number;
+}
+type DockPanelTearOutEvent = CustomEvent<DockPanelTearOutDetail>;
+interface DockDragBoundaryDetail {
+  readonly panelId: string;
+  readonly clientX: number;
+  readonly clientY: number;
+  readonly screenX: number;
+  readonly screenY: number;
+}
+/** `dock-panel-drag-out` / `dock-panel-drag-in`. */
+type DockDragBoundaryEvent = CustomEvent<DockDragBoundaryDetail>;
+//#endregion
+//#region src/dock/dock-panel.d.ts
+interface DockPanelElementEventMap {
+  'dock-panel-drag-start': DockPanelDragStartEvent;
+  'toggle': TitlebarToggleEvent;
+  'close': TitlebarCloseEvent;
+}
+/**
+ * Leaf content + metadata + drag handle. Renders `ixfx-titlebar` chrome when
+ * standalone (`presentation="solo"`) and content only when docked
+ * (`presentation="tabbed"` — the host's tab strip carries the title chrome).
+ * Adds `panel-id` and the titlebar drag handle. Works standalone outside a
+ * host (the drag-start event has no listener and is inert).
+ */
+declare class DockPanelElement extends LitElement {
+  /** Stable identity: model key, slot name suffix, serialization id. */
+  panelId: string;
+  title: string;
+  iconName: string;
+  closable: boolean;
+  collapsible: boolean;
+  /**
+   * Per-panel restriction when this panel is itself a drop target (solo
+   * leaf). Space-separated `tabs` / `horizontal` / `vertical` / `all`;
+   * `none` rejects everything; default is unrestricted.
+   */
+  accepts: string;
+  /**
+   * Host-controlled. Docked panels are always `tabbed` (content only — the
+   * leaf's tab strip carries the title chrome). `solo` (full titlebar chrome)
+   * applies to panels outside a host or not currently docked.
+   */
+  presentation: `solo` | `tabbed`;
+  /** Solo-mode collapse state, mirrored from the titlebar. */
+  private _collapsed;
+  private _dragPointerId;
+  private _dragStartX;
+  private _dragStartY;
+  private _dragStarted;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private _onPointerDown;
+  private _onPointerMove;
+  private _onPointerUp;
+  private _teardownDragListeners;
+  /** Clicks that begin on the close / caret buttons or the toolbar are not drags. */
+  private _isDragHandle;
+  private _dispatchDragStart;
+  private _onTitlebarToggle;
+  private _onTitlebarClose;
+  protected render(): TemplateResult<1>;
+  static styles: CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-dock-panel': DockPanelElement;
+  }
+}
+interface DockPanelElement {
+  addEventListener: (<K extends keyof DockPanelElementEventMap>(type: K, listener: (this: DockPanelElement, event: DockPanelElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
+//#region src/split-layout/types.d.ts
+type Axis = `row` | `column`;
+type WhenSmall = `prevent` | `collapse` | `close`;
+interface PanelNode {
+  kind: `panel`;
+  id: string;
+  el: HTMLElement;
+  weight: number;
+  fixedPx: number | null;
+  minPx: number;
+  maxPx: number | null;
+  whenSmall: WhenSmall;
+  collapsed: boolean;
+  restoreWeight: number;
+}
+interface GroupNode {
+  kind: `group`;
+  id: string;
+  el: HTMLElement | null;
+  axis: Axis;
+  children: LayoutNode[];
+  weight: number;
+  fixedPx: number | null;
+}
+type LayoutNode = PanelNode | GroupNode;
+interface SnapshotNode {
+  kind: `panel` | `group`;
+  id: string;
+  weight?: number;
+  collapsed?: boolean;
+  children?: SnapshotNode[];
+}
+interface LayoutSnapshot {
+  version: 1;
+  root: SnapshotNode;
+}
+interface PanelInfo {
+  id: string;
+  el: HTMLElement;
+  index: number;
+  path: string;
+  weight: number;
+  collapsed: boolean;
+  min: number;
+  max: number | null;
+  whenSmall: WhenSmall;
+}
+interface SplitResizeDetail {
+  sizes: Record<string, number>;
+  groupId: string;
+}
+type SplitResizeEvent = CustomEvent<SplitResizeDetail>;
+interface SplitCollapseDetail {
+  id: string;
+  index: number;
+}
+type SplitCollapseEvent = CustomEvent<SplitCollapseDetail>;
+interface SplitExpandDetail {
+  id: string;
+  index: number;
+}
+type SplitExpandEvent = CustomEvent<SplitExpandDetail>;
+interface SplitCloseDetail {
+  id: string;
+  index: number;
+}
+type SplitCloseEvent = CustomEvent<SplitCloseDetail>;
+interface SplitChangeDetail {
+  layout: LayoutSnapshot;
+}
+type SplitChangeEvent = CustomEvent<SplitChangeDetail>;
+interface SplitLayoutElementEventMap {
+  'ixfx-split-resize': SplitResizeEvent;
+  'ixfx-split-collapse': SplitCollapseEvent;
+  'ixfx-split-expand': SplitExpandEvent;
+  'ixfx-split-close': SplitCloseEvent;
+  'ixfx-split-change': SplitChangeEvent;
+}
+//#endregion
+//#region src/split-layout/split-panel.d.ts
+declare class SplitPanelElement extends LitElement {
+  id: string;
+  size: string;
+  weight: string;
+  fixed: string;
+  min: string;
+  max: string;
+  whenSmall: string;
+  collapsed: boolean;
+  snap: string;
+  render(): TemplateResult<1>;
+  static styles: CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-split-panel': SplitPanelElement;
+  }
+}
+//#endregion
+//#region src/split-layout/split-layout.d.ts
+declare class SplitLayoutElement extends LitElement {
+  direction: Axis;
+  sizes: string;
+  gutterSize: string;
+  snap: string;
+  private _model;
+  private _resizing;
+  private _groupEl?;
+  private _observer;
+  private _applyingOwnMutation;
+  private _dragStructurallyChanged;
+  private _dragMachine;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  private _setupObserver;
+  private _rebuildModel;
+  get panels(): PanelInfo[];
+  getLayout(): LayoutSnapshot | null;
+  setLayout(s: LayoutSnapshot): void;
+  getSizes(_groupId?: string): Record<string, number>;
+  setSizes(weights: number[] | Record<string, number>, _groupId?: string): void;
+  collapse(idOrEl: string | HTMLElement): void;
+  expand(idOrEl: string | HTMLElement): void;
+  toggle(idOrEl: string | HTMLElement): void;
+  closePanel(idOrEl: string | HTMLElement): boolean;
+  /**
+   * Bounding rects of the gutter elements, in gutter index order. lets
+   * callers (e.g. dock junction handles) hit-test gutters without reaching
+   * into the shadow DOM.
+   */
+  getGutterRects(): DOMRect[];
+  /**
+   * Programmatically begin dragging the gutter at `gutterIndex`, as if the
+   * user had pressed on it at (`clientX`, `clientY`). The drag then follows
+   * the pointer `pointerId` until pointerup, exactly like a native gutter
+   * drag. Returns false when the index is out of range or the layout isn't
+   * ready. Intended for composite resize affordances — e.g. a junction handle
+   * that starts this drag alongside perpendicular drags on other layouts.
+   */
+  beginGutterDrag(gutterIndex: number, pointerId: number, clientX: number, clientY: number): boolean;
+  private _setCollapsedState;
+  private _reindexSlots;
+  private _findPanel;
+  private _setFlexibleWeight;
+  private _snapPx;
+  private _collapsedPx;
+  private _handleDragStart;
+  private _handleDragMove;
+  private _handleDragEnd;
+  private _snapshotTracks;
+  private _reseedDragState;
+  private _onGutterPointerDown;
+  private _onPointerMove;
+  private _onPointerUp;
+  private _emitResize;
+  private _emitChange;
+  protected render(): typeof nothing | TemplateResult<1>;
+  private _getTrackSizes;
+  private _resolveTracks;
+  private _renderGutter;
+  static styles: CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-split-layout': SplitLayoutElement;
+  }
+  interface HTMLElementEventMap {
+    'ixfx-split-resize': CustomEvent<SplitResizeDetail>;
+    'ixfx-split-collapse': CustomEvent<SplitCollapseDetail>;
+    'ixfx-split-expand': CustomEvent<SplitExpandDetail>;
+    'ixfx-split-close': CustomEvent<SplitCloseDetail>;
+    'ixfx-split-change': CustomEvent<SplitChangeDetail>;
+  }
+}
+//#endregion
+//#region src/tabs/tab-list-item.d.ts
+/**
+ * CSS vars (can be overridden per-instance):
+ * --selected-colour: text colour when selected
+ * --selected-border-width: border width
+ * --ixfx-tab-padding: vertical padding for the tab content (default: var(--space-m))
+ * --ixfx-tab-padding-horizontal: horizontal padding (default: same as --ixfx-tab-padding)
+ */
+declare class TabListItemElement extends LitElement {
+  closeable: boolean;
+  hideLabels: boolean;
+  iconName: string | undefined;
+  description: string | undefined;
+  commandActive: string | undefined;
+  registry: CommandRegistry<unknown> | undefined;
+  private _compact;
+  private _hasToolbarContent;
+  private _resizeObserver?;
+  private _commandCleanup?;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changed: PropertyValues): void;
+  private _syncTooltipAttrs;
+  private _syncCommandListener;
+  private _onToolbarSlotChange;
+  private _updateToolbarContent;
+  firstUpdated(): void;
+  render(): TemplateResult<1>;
+  private _onCloseClick;
+  static styles: CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ixfx-tab-list-item": TabListItemElement;
+  }
+}
+//#endregion
+//#region src/tabs/tab-list.d.ts
+/**
+ * Events
+ * 'change' - new tab selected { previous:string, selected:string, for:string }
+ * 'reorder' - tab moved within the list { id:string, fromIndex:number, toIndex:number }
+ */
+type TabListChangeDetail = {
+  readonly previous: string | undefined;
+  readonly selected: string;
+  readonly for: string;
+};
+type TabListChangeEvent = CustomEvent<TabListChangeDetail>;
+type TabListReorderDetail = {
+  readonly id: string;
+  readonly fromIndex: number;
+  readonly toIndex: number;
+};
+type TabListReorderEvent = CustomEvent<TabListReorderDetail>;
+type TabListDragMode = `off` | `reorder`;
+declare class TabListElement extends LitElement {
+  #private;
+  orientation: `horizontal` | `vertical-stack` | `vertical-side`;
+  flip: boolean;
+  scrollable: boolean;
+  hideLabels: boolean;
+  shrink: boolean;
+  dragMode: TabListDragMode;
+  render(): TemplateResult<1>;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues): void;
+  getSelectedElement(): TabListItemElement | undefined;
+  selectElement(el: HTMLElement): void;
+  static styles: CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ixfx-tab-list": TabListElement;
+  }
+}
+//#endregion
+//#region src/dock/dock-host.d.ts
+interface DockHostElementEventMap {
+  'dock-change': DockChangeEvent;
+  'dock-panel-added': DockPanelAddedEvent;
+  'dock-panel-removed': DockPanelRemovedEvent;
+  'dock-panel-activated': DockPanelActivatedEvent;
+  'dock-panel-drag-start': DockPanelDragStartEvent;
+  /** Panel released outside every host — request to move it to a new window. */
+  'dock-panel-tear-out': DockPanelTearOutEvent;
+  /** Drag pointer left every host's bounds during a drag. */
+  'dock-panel-drag-out': DockDragBoundaryEvent;
+  /** Drag pointer re-entered a host's bounds after being outside. */
+  'dock-panel-drag-in': DockDragBoundaryEvent;
+}
+declare class DockHostElement extends LitElement {
+  /** Initial layout as `DockLayout` JSON. Absent ⇒ all pooled panels go into one root stack. */
+  layout: string | null;
+  /**
+   * Space-separated drop operations this host allows: `tabs`, `horizontal`,
+   * `vertical`, and convenience `all`. `""` / `none` ⇒ nothing may be dropped.
+   */
+  accepts: string;
+  /** Finest-grained veto, consulted per candidate zone. */
+  canAccept: ((panelId: string, op: DockOperation) => boolean) | undefined;
+  private _model;
+  private _pool;
+  private _dropZone;
+  private _dragActive;
+  private _junctions;
+  /** panelId → toolbar nodes currently moved out into a tab item. */
+  private _toolbarsOut;
+  private _tabDragPending;
+  private _junctionsKey;
+  private _junctionsRaf;
+  private _hostResizeObserver;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private _onDragStart;
+  willUpdate(changed: Map<string, unknown>): void;
+  updated(changed: Map<string, unknown>): void;
+  private _buildInitialModel;
+  /** Ensure every pooled panel element appears in the model (appended to the first stack). */
+  private _mergePoolIntoModel;
+  private _scanPanels;
+  private _findPanelEl;
+  private _firstStack;
+  private _appendPanelToFirstStack;
+  private _onPoolSlotChange;
+  private _syncPool;
+  /** Serialize the current layout, folding live split weights from the DOM. */
+  saveLayout(): DockLayout;
+  loadLayout(layout: DockLayout): void;
+  addPanel(panel: DockPanelElement | DockPanelInit, target?: {
+    stack?: string;
+    index?: number;
+    op?: DockOperation;
+  }): void;
+  removePanel(panelId: string): boolean;
+  activatePanel(panelId: string): boolean;
+  getPanelIds(): string[];
+  /**
+   * Capture a structured-clone-safe {@link DockPanelSnapshot} of a panel
+   * (identity, chrome attributes, and a best-effort `innerHTML`). Returns
+   * null when no such panel element is known to this host.
+   */
+  getPanelSnapshot(panelId: string): DockPanelSnapshot | null;
+  /**
+   * {@link getPanelSnapshot} + {@link removePanel} in one step: take the
+   * snapshot, then drop the panel (and its element) from this host. Call this
+   * from a `dock-panel-tear-out` handler once the receiving window has
+   * recreated the panel.
+   */
+  detachPanel(panelId: string): DockPanelSnapshot | null;
+  /**
+   * Hit-test viewport coordinates against this host and return a plain,
+   * serializable {@link DockDropTarget} (no element references) — or null when
+   * the point is outside the host or the resulting zone is disallowed by
+   * `accepts` / `canAccept`. Pure query: no model mutation, no overlay.
+   *
+   * `panelId` is passed to `canAccept`; use any stable id for an external
+   * panel (defaults to `"__external__"`).
+   */
+  queryDropTarget(clientX: number, clientY: number, panelId?: string): DockDropTarget | null;
+  /**
+   * Like {@link queryDropTarget}, but also shows the drop overlay so an
+   * external (cross-window) drag gets the same visual feedback as an in-page
+   * one. Call on every pointer update from the outer coordinator, then
+   * {@link endExternalDrop} when the drag leaves or ends.
+   */
+  previewExternalDrop(clientX: number, clientY: number, panelId?: string): DockDropTarget | null;
+  /** Clear any overlay left by {@link previewExternalDrop}. */
+  endExternalDrop(): void;
+  /**
+   * Recreate a panel from a {@link DockPanelSnapshot} (or a bare
+   * {@link DockPanelInit}) and dock it. With `at` viewport coordinates the
+   * panel lands where a drop there would put it (respecting `accepts` /
+   * `canAccept`); without them, or when the point misses the host, it goes
+   * into the first stack. Returns the created element, or null when a panel
+   * with that id is already docked here.
+   */
+  acceptExternalPanel(snapshot: DockPanelSnapshot | DockPanelInit, at?: {
+    clientX: number;
+    clientY: number;
+  }): DockPanelElement | null;
+  /**
+   * Hit-test a pointer position against this host's leaves and edges. Returns
+   * a zone with rects relative to the host, or null when the pointer is
+   * outside the host or the candidate zone is disallowed.
+   */
+  computeDropZone(clientX: number, clientY: number, panelId: string): DockDropZone | null;
+  private _zoneAllowed;
+  /**
+   * Apply a drop. `sourceHost` differs from `this` when the drag crossed
+   * hosts; the panel element is adopted into this host first.
+   */
+  handleDrop(panelId: string, zone: DockDropZone, sourceHost?: DockHostElement): void;
+  /**
+   * Move `panelId` (already present somewhere in the model) to the position
+   * described by `zone`. Shared by in-page drops and external panel adoption.
+   */
+  private _applyZone;
+  /**
+   * Move a panel element out of this host into `target`, dropping it from
+   * this host's model. Used for cross-host drags.
+   */
+  releasePanel(panelId: string, target: DockHostElement): void;
+  /** Adopt a panel element from another host (the one sanctioned reparent). */
+  adoptPanelElement(el: DockPanelElement): void;
+  setDragActive(active: boolean): void;
+  setDropZone(zone: DockDropZone | null): void;
+  private _scheduleJunctions;
+  /**
+   * Find points where a parent split's gutter line meets a nested split's
+   * gutter (T and + crossings). Each junction handle starts both gutter drags
+   * at once, like a corner resize in VS Code.
+   */
+  private _computeJunctions;
+  private _onJunctionPointerDown;
+  /** Fold live weights from each rendered `ixfx-split-layout` into the model. */
+  private _foldLiveWeights;
+  private _onSplitWeightsChanged;
+  private _onSplitCollapsed;
+  private _onSplitClose;
+  private _onTabChange;
+  private _onStripPointerDown;
+  private _onTabDragMove;
+  private _onTabDragUp;
+  private _teardownTabDragListeners;
+  /** After a dock drag from a tab/titlebar, swallow the trailing click so it cannot re-select or toggle. */
+  private _suppressNextClick;
+  private _splitStack;
+  private _removeFromModel;
+  /** Normalize, re-render, and announce the structural change. */
+  private _commit;
+  private _syncSlots;
+  /**
+   * Per-panel toolbar routing: docked panels render content-only, so the
+   * active panel's toolbar nodes live in its generated tab item (shown
+   * right-aligned while active). Node moves preserve element state. Panels
+   * outside the model keep their toolbar in their own (solo) chrome.
+   */
+  private _syncToolbars;
+  private _returnToolbar;
+  private _returnAllToolbars;
+  private _emitChange;
+  protected render(): TemplateResult<1>;
+  private _renderNode;
+  private _renderSplit;
+  private _renderLeaf;
+  private _renderTabItem;
+  private _stripCaretRect;
+  static styles: CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-dock-host': DockHostElement;
+  }
+}
+interface DockHostElement {
+  addEventListener: (<K extends keyof DockHostElementEventMap>(type: K, listener: (this: DockHostElement, event: DockHostElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
+//#region src/dock/dock-drag.d.ts
+interface Rect$1 {
+  readonly x: number;
+  readonly y: number;
+  readonly w: number;
+  readonly h: number;
+}
+interface DockDropZone {
+  /** Host whose model would receive the drop. */
+  readonly host: DockHostElement;
+  readonly operation: DockOperation;
+  /** Path of the target stack (`[]` = the host root). */
+  readonly targetPath: number[];
+  readonly side: `before` | `after`;
+  /** Insert position for `tabs` drops (panel index in the target stack). */
+  readonly gapIndex?: number;
+  /** Highlight rect, relative to the host. */
+  readonly rect: Rect$1;
+  /** Optional insertion caret for strip gaps, relative to the host. */
+  readonly caretRect?: Rect$1;
+}
+/** True when the point lies within the bounding box of any registered host. */
+declare function pointerOverAnyHost(clientX: number, clientY: number): boolean;
+declare function isDragging(): boolean;
+declare function getActiveDragPanelId(): string | null;
+//#endregion
+//#region src/dock/dock-model.d.ts
+/**
+ * The dock model is a plain mutable tree owned exclusively by the host
+ * element. Mutators below change the tree in place; the host calls
+ * `normalize(root)` then `requestUpdate()` after batching mutations.
+ */
+declare function isSplit(node: DockNode): node is DockSplitNode;
+declare function isStack(node: DockNode): node is DockStackNode;
+declare function createEmptyStack(): DockStackNode;
+declare function createEmptyLayout(): DockLayout;
+declare function createStack(panels: string[], active?: string): DockStackNode;
+declare function createSplit(direction: DockAxis, children: DockNode[], sizes?: number[]): DockSplitNode;
+/**
+ * Runs after every mutation:
+ * - stack `active` fixed to a member of `panels` (or `''` when empty)
+ * - empty stacks removed from their parent split (and their `sizes` entry)
+ * - splits with ≤1 child replaced by that child (spliced into the parent)
+ * - a child split whose direction equals its parent's is flattened into it,
+ *   spreading its sizes across the slot it vacated
+ * - `sizes` kept parallel to `children` (padded with the mean weight)
+ * - an empty root collapses to a single empty stack
+ */
+declare function normalize(root: DockNode): DockNode;
+declare function findNode(root: DockNode, path: number[]): DockNode | null;
+/** Parent split of the node at `path`; null when path is empty or malformed. */
+declare function findParentOf(root: DockNode, path: number[]): DockSplitNode | null;
+/** Path of the stack containing `panelId`, or null. */
+declare function findStackOf(root: DockNode, panelId: string): number[] | null;
+declare function collectPanelIds(root: DockNode): string[];
+/**
+ * Paths of every stack leaf, in tree order. `[]` is the root itself when it
+ * is a stack.
+ */
+declare function collectStackPaths(root: DockNode): number[][];
+declare function addPanelToStack(stack: DockStackNode, panelId: string, index?: number): void;
+declare function removePanelFromStack(stack: DockStackNode, panelId: string): void;
+declare function setActive(stack: DockStackNode, panelId: string): boolean;
+/**
+ * Insert `node` beside the child at `targetPath`, into the parent split when
+ * its direction matches `direction`, otherwise wrap the target in a new split.
+ * `side` selects before/after; the neighbour's weight is split 50/50.
+ * Returns the path of the inserted node, or null.
+ */
+declare function insertBeside(root: DockNode, targetPath: number[], direction: DockAxis, newNode: DockNode, side: `before` | `after`): number[] | null;
+/**
+ * Wrap the whole root in a new split of `direction`, replacing it in place so
+ * the caller's reference stays valid. Returns true on success.
+ */
+declare function wrapRoot(root: DockNode, direction: DockAxis, newNode: DockNode, side: `before` | `after`): boolean;
+/**
+ * Remove the stack at `stackPath` from the tree. Its panels are moved into
+ * `fallbackStack` (if given and still attached) so they are not silently
+ * lost; otherwise they are dropped from the model (elements return to the
+ * pool). Returns the removed stack.
+ */
+declare function extractStack(root: DockNode, stackPath: number[], fallbackStack?: DockStackNode): DockStackNode | null;
+declare function serializeLayout(root: DockNode): DockLayout;
+/**
+ * Parse layout JSON, validate loosely, and normalize. Returns null when the
+ * JSON is malformed or the root is missing/invalid.
+ */
+declare function parseLayout(json: string): DockLayout | null;
+//#endregion
 //#region src/editable-label/editable-label.d.ts
 type EditableMode = `label` | `editor`;
 type EntryMode = `free` | `text` | `number` | `percent`;
@@ -3023,8 +4067,8 @@ type WheelDirection = 1 | -1;
  * (e.g. editable-number rejects while the user is typing).
  */
 interface WheelNudgeConsumer {
-  _applyWheelDelta(direction: WheelDirection, event: WheelEvent): void;
-  _shouldHandleWheel(): boolean;
+  _applyWheelDelta: (direction: WheelDirection, event: WheelEvent) => void;
+  _shouldHandleWheel: () => boolean;
 }
 /**
  * Internal: the surface a {@link WheelNudgeMixin}-decorated class exposes to
@@ -3148,45 +4192,6 @@ declare global {
   }
 }
 //#endregion
-//#region src/vertical-list/types.d.ts
-type ListSelectionMode = `none` | `single` | `multiple`;
-/**
- * Controls how pointer and keyboard gestures map to selection changes.
- *
- * - `implicit`  — click always replaces selection (no modifier support)
- * - `standard`  — click replaces; Ctrl/Cmd+click toggles; Shift+click range-selects (multiple only)
- * - `manual`    — no auto-selection; drive state via select()/deselect()/clearSelection()
- * - `checked`   — every click toggles; implies multiple selection regardless of selectionMode
- * - `sticky`    — every tap/click toggles (no checkbox column); implies multiple selection, for touchscreens
- * - `vscode`    — like standard for clicks; Shift+Arrow extends range from the keyboard anchor
- *
- * Switching interactionMode clears the current selection.
- */
-type ListInteractionMode = `implicit` | `standard` | `manual` | `checked` | `sticky` | `vscode`;
-type ListSelectDetail = {
-  readonly selected: ReadonlySet<Element>;
-  readonly previous: ReadonlySet<Element>;
-};
-type ListTickleDetail = {
-  readonly item: Element;
-};
-type ListActivateDetail = {
-  readonly item: Element;
-};
-type ListItemClickDetail = {
-  readonly item: Element;
-};
-type ListSelectEvent = CustomEvent<ListSelectDetail>;
-type ListTickleEvent = CustomEvent<ListTickleDetail>;
-type ListActivateEvent = CustomEvent<ListActivateDetail>;
-type ListItemClickEvent = CustomEvent<ListItemClickDetail>;
-interface ListElementEventMap {
-  'list-select': ListSelectEvent;
-  'list-tickle': ListTickleEvent;
-  'list-activate': ListActivateEvent;
-  'list-item-click': ListItemClickEvent;
-}
-//#endregion
 //#region src/grouped-item-lister/types.d.ts
 /**
  * Fired when the selection set changes by any means.
@@ -3269,14 +4274,13 @@ interface GroupedItemListerElementEventMap<T> {
 }
 //#endregion
 //#region src/panel/panel.d.ts
-type PanelOrientation = `horizontal` | `vertical`;
-type PanelVariant = `titlebar` | `midline`;
-type PanelToggleInteraction = `implicit` | `explicit` | `disabled`;
-interface PanelToggleDetail {
-  readonly collapsed: boolean;
-}
-type PanelToggleEvent = CustomEvent<PanelToggleDetail>;
-type PanelCloseEvent = CustomEvent<void>;
+/** Backwards-compatible aliases: canonical types now live in `../titlebar/titlebar.js`. */
+type PanelOrientation = TitlebarOrientation;
+type PanelVariant = TitlebarVariant;
+type PanelToggleInteraction = TitlebarToggleInteraction;
+type PanelToggleDetail = TitlebarToggleDetail;
+type PanelToggleEvent = TitlebarToggleEvent;
+type PanelCloseEvent = TitlebarCloseEvent;
 interface PanelElementEventMap {
   toggle: PanelToggleEvent;
   close: PanelCloseEvent;
@@ -3285,15 +4289,16 @@ declare class PanelElement extends LitElement {
   collapsed: boolean;
   orientation: PanelOrientation;
   closable: boolean;
+  /** Show the collapse/expand caret and enable toggle behaviour. Defaults to true so existing panels stay collapsible. */
+  collapsible: boolean;
   title: string;
   iconName: string;
   toggleInteraction: PanelToggleInteraction;
   variant: PanelVariant;
-  private _isVertical;
-  private _onToggleClick;
+  /** Suppress the titlebar entirely (content-only chrome, e.g. dock tabbed mode). */
+  hideTitlebar: boolean;
+  private _onTitlebarToggle;
   private _onCloseClick;
-  private _getCaretIcon;
-  protected updated(changed: Map<string, unknown>): void;
   protected render(): TemplateResult<1>;
   static styles: CSSResult[];
 }
@@ -3398,6 +4403,12 @@ type TickledControllerConfig<T> = {
    * Optional initial input mode (defaults to 'mouse')
    */
   initialInputMode?: InputMode;
+  /**
+   * Whether keyboard navigation wraps from last to first and vice versa.
+   * - 'stop' (default): navigation stops at the boundary
+   * - 'wrap': navigation wraps around
+   */
+  itemWrap?: `stop` | `wrap`;
 };
 /**
  * ReactiveController that manages "tickled" state for interactive lists.
@@ -3613,200 +4624,83 @@ declare class TreeListElement extends TreeBaseElement {
    *     : html`<svg viewBox="0 0 16 16" width="14" height="14"
    *           fill="none" stroke="currentColor" stroke-width="2"
    *           stroke-linecap="round" stroke-linejoin="round"
-   *           style="opacity:${state === `indeterminate` ? 0.35 : 0.6}">
-   *         <polyline points="3,8 7,12 13,4" />
-   *       </svg>`;
-   */
-  checkboxRenderer: ((state: TreeCheckboxState) => unknown) | undefined;
-  protected render(): TemplateResult<1>;
-  protected renderNodeContent(node: TreeNode, depth: number): TemplateResult;
-  protected _renderNode(node: TreeNode, depth: number): TemplateResult;
-  static styles: CSSResult[];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    'ixfx-tree-list': TreeListElement;
-  }
-}
-interface TreeListElement {
-  addEventListener: (<K extends keyof TreeBaseElementEventMap>(type: K, listener: (this: TreeListElement, event: TreeBaseElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
-}
-//#endregion
-//#region src/grouped-item-lister/tree-list-adapter.d.ts
-type TreeListAdapterOptions<T> = {
-  /**
-   * Returns the direct children of an item to build the tree hierarchy.
-   * Omit for flat item lists — all items become leaf nodes at the root level.
-   */
-  getChildren?: (item: T) => readonly T[];
-  /** Forwarded to the inner ixfx-tree-list. Default: `'standard'`. */
-  interactionMode?: TreeInteractionMode;
-  /**
-   * Controls which node types are selectable.
-   * Forwarded to the inner ixfx-tree-list. Default: `'all'`.
-   */
-  selectionFilter?: TreeSelectionFilter;
-  /**
-   * Controls how expanding one node affects its siblings.
-   * Forwarded to the inner ixfx-tree-list. Default: `'none'`.
-   */
-  exclusivity?: TreeExclusivity;
-  /**
-   * Called when a command is dispatched via `ixfx-grouped-item-lister.dispatch()`.
-   * Receives the inner `TreeBaseElement` (undefined until the first `setItems()` call)
-   * so the handler can sort, filter, or otherwise manipulate the tree directly.
-   */
-  onDispatch?: (commandId: CommandId, args: Record<string, unknown> | undefined, tree: TreeBaseElement | undefined) => void;
-};
-/**
- * Creates an `HTMLElement` that implements `IGroupedSubComponent<T>` by wrapping
- * an `ixfx-tree-list` internally.
- *
- * `toTreeItem` converts each item `T` to display metadata (`key`, `label`, etc).
- * The adapter stores the original `T` in `TreeItem.data` and uses it to map
- * tree-node selections back to typed values.
- *
- * Unlike `createVerticalListAdapter`, items can be hierarchical: provide
- * `options.getChildren` to return each item's children and the adapter will
- * recursively build the `TreeNode` tree. Omit it for a flat list of leaf nodes.
- *
- * The four interface events (`select`, `activate`, `item-click`, `tickle`) are
- * intercepted at the tree level, re-typed from `TreeNode` → `T`, and re-dispatched
- * on the adapter element so `ixfx-grouped-item-lister` can identify the source.
- *
- * @example Flat item list:
- * ```ts
- * lister.factory = () =>
- *   createTreeListAdapter<FileItem>(item => ({ key: item.id, label: item.name, isLeaf: true }));
- * ```
- *
- * @example Hierarchical items:
- * ```ts
- * lister.factory = () =>
- *   createTreeListAdapter<Category>(
- *     cat => ({ key: cat.id, label: cat.name }),
- *     { getChildren: cat => cat.subCategories },
- *   );
- * ```
- */
-declare function createTreeListAdapter<T>(toTreeItem: (item: T) => Omit<TreeItem, `data`>, options?: TreeListAdapterOptions<T>): HTMLElement & IGroupedSubComponent<T>;
-//#endregion
-//#region src/vertical-list/vertical-list.d.ts
-interface CustomCheckboxOptions {
-  renderer: (checked: boolean) => unknown;
-  margin?: string;
-  width?: string;
-}
-interface AddItemOptions {
-  /**
-   * In `checked` interaction mode, adds the item without a checkbox column and
-   * without the ability to be checked/selected. Equivalent to setting the
-   * `not-checked` attribute on the item. Ignored outside `checked` mode.
-   */
-  notChecked?: boolean;
-}
-declare class VerticalListElement extends LitElement {
-  #private;
-  selectionMode: ListSelectionMode;
-  interactionMode: ListInteractionMode;
-  filterPredicate: ((el: Element) => boolean) | undefined;
-  /**
-   * Optional renderer for the checkbox shown in `checked` interactionMode.
-   * Receives the current `checked` state and returns a Lit template result.
-   *
-   * When set, the per-row checkbox becomes a `<span role="checkbox">` whose
-   * contents are whatever this returns (rendered with `lit`'s `render()`).
-   * When unset, a native `<input type="checkbox">` is used.
-   *
-   * @example
-   *   list.checkboxRenderer = (checked) => checked
-   *     ? html`<svg viewBox="0 0 16 16" width="14" height="14"
-   *           fill="none" stroke="currentColor" stroke-width="2"
-   *           stroke-linecap="round" stroke-linejoin="round"
-   *           style="opacity:0.5">
-   *         <polyline points="3,8 7,12 13,4" />
-   *       </svg>`
-   *     : html``;
-   */
-  checkboxRenderer: ((checked: boolean) => unknown) | CustomCheckboxOptions | undefined;
-  private _selectedItems;
-  private _searchVisible;
-  private _searchQuery;
-  private _searchInputEl;
-  private tickled;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  firstUpdated(): void;
-  updated(changed: PropertyValues): void;
-  /** The most recently selected item, or `undefined` if nothing is selected. */
-  get selectedItem(): Element | undefined;
-  /** The full current selection set (read-only). */
-  get selectedItems(): ReadonlySet<Element>;
-  addItem(item: Element | string, options?: AddItemOptions): void;
-  removeItem(item: Element): void;
-  clearItems(): void;
-  /**
-   * Replace the entire item list in one call.
-   * Equivalent to `clearItems()` followed by `addItem()` for each element.
-   * Preserves `interactionMode` checkbox wrapping.
-   */
-  setItems(items: readonly Element[]): void;
-  /**
-   * Dispatch a command to this list. No-op by default.
-   * Intended for use with `ixfx-grouped-item-lister`'s `dispatch()` method,
-   * which forwards commands to all sub-components.
-   */
-  dispatch(_commandId: CommandId, _args?: Record<string, unknown>): void;
-  select(item: Element): void;
-  selectMany(items: Iterable<Element>): void;
-  deselect(item: Element): void;
-  clearSelection(): void;
-  selectAll(): void;
-  selectedFilter(kind: `selected` | `checked` | `either`): Generator<Element>;
-  private _replaceSelection;
-  private _toggleItem;
-  private _rangeSelectTo;
-  private _clearSelection;
-  private _selectAll;
-  private _handleClickSelection;
-  private _handleSpaceKey;
-  private _getVisibleItems;
-  private _isCheckable;
-  private _syncItemStates;
-  private _syncCheckboxes;
-  /**
-   * Native checkbox cell: a span that stretches to the row's full cross-axis
-   * (so the entire column height is a click target) with a real `<input>`
-   * centred inside. The span owns the click; the input is purely visual and
-   * has `pointer-events:none` so a single click produces one toggle.
-   */
-  private _createNativeCheckboxCell;
-  /**
-   * Custom checkbox cell: same shape as the native cell (a stretching span)
-   * so behaviour is identical. The renderer's content goes inside.
-   */
-  private _createCustomCheckbox;
-  private _findListItem;
-  private _dispatch;
-  private _openSearch;
-  private _closeSearch;
-  private _onPointerOver;
-  private _onPointerLeave;
-  private _onKeyDown;
-  private _onClick;
-  private _onDblClick;
-  private _activateItem;
-  private _onSearchInput;
-  private _onSearchKeydown;
+   *           style="opacity:${state === `indeterminate` ? 0.35 : 0.6}">
+   *         <polyline points="3,8 7,12 13,4" />
+   *       </svg>`;
+   */
+  checkboxRenderer: ((state: TreeCheckboxState) => unknown) | undefined;
+  protected render(): TemplateResult<1>;
+  protected renderNodeContent(node: TreeNode, depth: number): TemplateResult;
+  protected _renderNode(node: TreeNode, depth: number): TemplateResult;
   static styles: CSSResult[];
-  render(): TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {
-    'ixfx-vertical-list': VerticalListElement;
+    'ixfx-tree-list': TreeListElement;
   }
-  interface HTMLElementEventMap extends ListElementEventMap {}
 }
+interface TreeListElement {
+  addEventListener: (<K extends keyof TreeBaseElementEventMap>(type: K, listener: (this: TreeListElement, event: TreeBaseElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
+//#region src/grouped-item-lister/tree-list-adapter.d.ts
+type TreeListAdapterOptions<T> = {
+  /**
+   * Returns the direct children of an item to build the tree hierarchy.
+   * Omit for flat item lists — all items become leaf nodes at the root level.
+   */
+  getChildren?: (item: T) => readonly T[];
+  /** Forwarded to the inner ixfx-tree-list. Default: `'standard'`. */
+  interactionMode?: TreeInteractionMode;
+  /**
+   * Controls which node types are selectable.
+   * Forwarded to the inner ixfx-tree-list. Default: `'all'`.
+   */
+  selectionFilter?: TreeSelectionFilter;
+  /**
+   * Controls how expanding one node affects its siblings.
+   * Forwarded to the inner ixfx-tree-list. Default: `'none'`.
+   */
+  exclusivity?: TreeExclusivity;
+  /**
+   * Called when a command is dispatched via `ixfx-grouped-item-lister.dispatch()`.
+   * Receives the inner `TreeBaseElement` (undefined until the first `setItems()` call)
+   * so the handler can sort, filter, or otherwise manipulate the tree directly.
+   */
+  onDispatch?: (commandId: CommandId, args: Record<string, unknown> | undefined, tree: TreeBaseElement | undefined) => void;
+};
+/**
+ * Creates an `HTMLElement` that implements `IGroupedSubComponent<T>` by wrapping
+ * an `ixfx-tree-list` internally.
+ *
+ * `toTreeItem` converts each item `T` to display metadata (`key`, `label`, etc).
+ * The adapter stores the original `T` in `TreeItem.data` and uses it to map
+ * tree-node selections back to typed values.
+ *
+ * Unlike `createVerticalListAdapter`, items can be hierarchical: provide
+ * `options.getChildren` to return each item's children and the adapter will
+ * recursively build the `TreeNode` tree. Omit it for a flat list of leaf nodes.
+ *
+ * The four interface events (`select`, `activate`, `item-click`, `tickle`) are
+ * intercepted at the tree level, re-typed from `TreeNode` → `T`, and re-dispatched
+ * on the adapter element so `ixfx-grouped-item-lister` can identify the source.
+ *
+ * @example Flat item list:
+ * ```ts
+ * lister.factory = () =>
+ *   createTreeListAdapter<FileItem>(item => ({ key: item.id, label: item.name, isLeaf: true }));
+ * ```
+ *
+ * @example Hierarchical items:
+ * ```ts
+ * lister.factory = () =>
+ *   createTreeListAdapter<Category>(
+ *     cat => ({ key: cat.id, label: cat.name }),
+ *     { getChildren: cat => cat.subCategories },
+ *   );
+ * ```
+ */
+declare function createTreeListAdapter<T>(toTreeItem: (item: T) => Omit<TreeItem, `data`>, options?: TreeListAdapterOptions<T>): HTMLElement & IGroupedSubComponent<T>;
 //#endregion
 //#region src/grouped-item-lister/vertical-list-adapter.d.ts
 type VerticalListAdapterOptions = {
@@ -4231,41 +5125,233 @@ declare class RadialInputElement extends RadialInputElement_base {
   render(): unknown;
   protected updated(changed: PropertyValues): void;
   disconnectedCallback(): void;
-  firstUpdated(): void;
+  firstUpdated(): void;
+  static styles: CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-radial-input': RadialInputElement;
+  }
+}
+//#endregion
+//#region src/labelled-radial-input/labelled-radial-input.d.ts
+declare class LabelledRadialInput extends LabelledInputBase {
+  readonly inputSelector = "ixfx-radial-input";
+  max: number;
+  step: number;
+  radius: number;
+  flatten: number;
+  markerStyle: MarkerStyle;
+  wedge: boolean;
+  valueMode: ValueMode;
+  tooltip: boolean;
+  flip: boolean;
+  aspectRatioThreshold: number;
+  /** Pass-through: enables wheel-on-hover for the inner dial and editable-number. */
+  lighttouch: boolean;
+  private _isWide;
+  private _getEffectivePrecision;
+  protected _handleResize(entries: ResizeObserverEntry[]): void;
+  protected _renderEditableNumber(): typeof nothing | TemplateResult<1>;
+  render(): TemplateResult<1>;
+  private _getTooltipValue;
+  static styles: CSSResultGroup;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-labelled-radial-input': LabelledRadialInput;
+  }
+}
+//#endregion
+//#region src/slider-input/types.d.ts
+/**
+ * Type definitions for slider-input component
+ */
+type SliderOrientation = `horizontal` | `vertical`;
+type SliderMarkerStyle = `needle` | `dot` | `triangle` | `none`;
+type SliderSingleStyle = `range` | `bipolar` | `unipolar`;
+type SliderValueMode = `single` | `dual` | `triple`;
+type SliderCrossover = `none` | `allow`;
+type SliderValueDrag = `none` | `stop` | `flex`;
+/**
+ * Behaviour for the middle (C) handle in triple mode when the A/B span
+ * changes. `none` (default) keeps C in place and only clamps it when it
+ * falls outside the new [A, B] band. `proportional` keeps C at the same
+ * fractional position within the band as the band moves or resizes.
+ */
+type SliderValueCFollow = `none` | `proportional`;
+type SliderLaneType = `value` | `fixed` | `anchored`;
+type SliderHandleKey = `a` | `b` | `c`;
+/**
+ * Per-lane data. Mirrors radial-input's shape with the difference that
+ * `type: 'value'` lanes track a *range* (valueMin/valueMax) rather than a
+ * single value, while `type: 'anchored'` lanes keep a single value (0..1
+ * length).
+ */
+interface SliderLaneData {
+  key: string;
+  type: SliderLaneType;
+  /**
+   * Used when type === 'anchored': length (0..1) of the lane symmetrically
+   * centered on the current value.
+   */
+  value?: number;
+  /** Used when type === 'value': lower end of the lane band (0..1). */
+  valueMin?: number;
+  /** Used when type === 'value': upper end of the lane band (0..1). */
+  valueMax?: number;
+  /** Perpendicular offset from the track centreline (-1..1 scale relative to the cross axis). */
+  offset: number;
+  /** Stroke thickness as a fraction of the cross axis (0..1). */
+  width: number;
+}
+/**
+ * Identifies which field(s) of a dual/triple-mode detail changed.
+ * `both` is reserved for length-drag (value-drag) gestures.
+ */
+type SliderChangedField = `min` | `max` | `c` | `both`;
+/**
+ * In single mode, `value` is the single handle's value and the min/max/c
+ * fields are undefined. In dual/triple mode, `value` is set to `valueMax`
+ * (the "B"/upper handle) for parity with native `<input type="range">`
+ * two-thumb patterns where a single `value` is ambiguous — consumers
+ * wanting min/max should use `valueMin`/`valueMax` directly.
+ */
+interface SliderInputInputDetail {
+  readonly value: number;
+  readonly valueRelative: number;
+  /** Lower handle value (dual/triple modes only). */
+  readonly valueMin?: number;
+  /** Upper handle value (dual/triple modes only). */
+  readonly valueMax?: number;
+  readonly valueMinRelative?: number;
+  readonly valueMaxRelative?: number;
+  /** Triple-mode middle handle value. */
+  readonly valueC?: number;
+  readonly valueCRelative?: number;
+  /** Which field this particular event resulted from. */
+  readonly changed?: SliderChangedField;
+}
+interface SliderInputChangeDetail {
+  readonly value: number;
+  readonly valueRelative: number;
+  readonly previousValue: number;
+  readonly valueMin?: number;
+  readonly valueMax?: number;
+  readonly previousValueMin?: number;
+  readonly previousValueMax?: number;
+  readonly valueC?: number;
+  readonly previousValueC?: number;
+  readonly changed?: SliderChangedField;
+}
+type SliderInputInputEvent = CustomEvent<SliderInputInputDetail>;
+type SliderInputChangeEvent = CustomEvent<SliderInputChangeDetail>;
+interface SliderInputElementEventMap {
+  input: SliderInputInputEvent;
+  change: SliderInputChangeEvent;
+}
+//#endregion
+//#region src/slider-input/slider-input.d.ts
+declare const SliderInputElement_base: (new (...args: any[]) => WheelNudgeConsumerType<LitElement>) & typeof LitElement;
+declare class SliderInputElement extends SliderInputElement_base {
+  #private;
+  valueA: number;
+  valueB: number;
+  /**
+   * Triple-mode middle handle. `undefined` until first willUpdate, then
+   * defaulted to the midpoint of valueA/valueB (matching radial-input's
+   * deferred lane-correction pattern).
+   */
+  valueC: number | undefined;
+  min: number;
+  max: number;
+  step: number | undefined;
+  stops: number | undefined;
+  valueMode: SliderValueMode;
+  singleStyle: SliderSingleStyle;
+  orientation: SliderOrientation;
+  markerStyle: SliderMarkerStyle;
+  /**
+   * Optional marker-style override for the C handle in triple mode. Lets
+   * consumers give C a different shape (e.g. dot) from the global
+   * `markerStyle` applied to A/B.
+   */
+  markerStyleC: SliderMarkerStyle | undefined;
+  crossover: SliderCrossover;
+  valueDrag: SliderValueDrag;
+  /**
+   * In triple mode, how the C handle reacts when A or B moves the [A, B]
+   * band. `none` (default): C keeps its value unless pushed outside the
+   * new band. `proportional`: C is re-anchored at the same fractional
+   * position it had within the *old* band, so it moves with A/B.
+   */
+  valueCFollow: SliderValueCFollow;
+  valueMin: number;
+  disabled: boolean;
+  /**
+   * Swipe-to-draw gesture, mirroring `ixfx-range-input[swipeable]`.
+   * When active, pressing down on the slider or entering it while the
+   * pointer is pressed sets the value from the cursor coordinate.
+   * Pointer capture is NOT held, so the cursor can move to adjacent
+   * swipeable sliders and update them too (step-sequencer style).
+   * Leaving the slider (above/below for horizontal, left/right for
+   * vertical) freezes the value; re-entering re-engages.
+   *
+   * Single mode sets value-A directly. Dual/triple modes move the
+   * nearest handle to the cursor.
+   */
+  swipeable: boolean;
+  constructor();
+  connectedCallback(): void;
+  addLane(key: string, options?: {
+    value?: number;
+    valueMin?: number;
+    valueMax?: number;
+    type?: SliderLaneType;
+    offset?: number;
+    width?: number;
+  }): void;
+  setLaneValue(key: string, value: number): void;
+  setLaneRange(key: string, valueMin: number, valueMax: number): void;
+  removeLane(key: string): void;
+  getLanes(): ReadonlyMap<string, SliderLaneData>;
+  getLane(key: string): SliderLaneData | undefined;
+  _applyWheelDelta(direction: WheelDirection, event: WheelEvent): void;
+  protected willUpdate(changed: PropertyValues): void;
+  render(): unknown;
+  protected updated(changed: PropertyValues): void;
+  disconnectedCallback(): void;
   static styles: CSSResult[];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    'ixfx-radial-input': RadialInputElement;
+    'ixfx-slider-input': SliderInputElement;
   }
 }
+interface SliderInputElement {
+  addEventListener: (<K extends keyof SliderInputElementEventMap>(type: K, listener: (this: SliderInputElement, event: SliderInputElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
 //#endregion
-//#region src/labelled-radial-input/labelled-radial-input.d.ts
-declare class LabelledRadialInput extends LabelledInputBase {
-  readonly inputSelector = "ixfx-radial-input";
-  max: number;
-  step: number;
-  radius: number;
-  flatten: number;
-  markerStyle: MarkerStyle;
-  wedge: boolean;
-  valueMode: ValueMode;
-  tooltip: boolean;
-  flip: boolean;
-  aspectRatioThreshold: number;
-  /** Pass-through: enables wheel-on-hover for the inner dial and editable-number. */
+//#region src/labelled-slider-input/labelled-slider-input.d.ts
+declare class LabelledSliderInput extends LabelledInputBase {
+  readonly inputSelector = "ixfx-slider-input";
+  orientation: `horizontal` | `vertical`;
+  singleStyle: SliderSingleStyle;
+  markerStyle: SliderMarkerStyle;
+  stops: number | undefined;
+  disabled: boolean;
+  swipeable: boolean;
+  /** Pass-through: enables wheel-on-hover for the inner slider and editable-number. */
   lighttouch: boolean;
-  private _isWide;
-  private _getEffectivePrecision;
-  protected _handleResize(entries: ResizeObserverEntry[]): void;
-  protected _renderEditableNumber(): typeof nothing | TemplateResult<1>;
+  switchHeight: number;
+  protected _renderEditableNumber(): TemplateResult<1>;
+  protected _syncValue(v: number): void;
   render(): TemplateResult<1>;
-  private _getTooltipValue;
   static styles: CSSResultGroup;
 }
 declare global {
   interface HTMLElementTagNameMap {
-    'ixfx-labelled-radial-input': LabelledRadialInput;
+    'ixfx-labelled-slider-input': LabelledSliderInput;
   }
 }
 //#endregion
@@ -4707,6 +5793,7 @@ declare class PanelGroupElement extends LitElement {
   orientation: PanelGroupOrientation;
   variant: PanelVariant;
   toggleInteraction: PanelToggleInteraction;
+  collapsible: boolean;
   allowMultiple: boolean;
   gap: string;
   private _panels;
@@ -5431,161 +6518,90 @@ declare class SelectHorizElement extends SelectHorizElement_base {
   private _emitChange;
 }
 //#endregion
-//#region src/slider-input/types.d.ts
-/**
- * Type definitions for slider-input component
- */
-type SliderOrientation = `horizontal` | `vertical`;
-type SliderMarkerStyle = `needle` | `dot` | `triangle` | `none`;
-type SliderSingleStyle = `range` | `bipolar` | `unipolar`;
-type SliderValueMode = `single` | `dual` | `triple`;
-type SliderCrossover = `none` | `allow`;
-type SliderValueDrag = `none` | `stop` | `flex`;
-/**
- * Behaviour for the middle (C) handle in triple mode when the A/B span
- * changes. `none` (default) keeps C in place and only clamps it when it
- * falls outside the new [A, B] band. `proportional` keeps C at the same
- * fractional position within the band as the band moves or resizes.
- */
-type SliderValueCFollow = `none` | `proportional`;
-type SliderLaneType = `value` | `fixed` | `anchored`;
-type SliderHandleKey = `a` | `b` | `c`;
-/**
- * Per-lane data. Mirrors radial-input's shape with the difference that
- * `type: 'value'` lanes track a *range* (valueMin/valueMax) rather than a
- * single value, while `type: 'anchored'` lanes keep a single value (0..1
- * length).
- */
-interface SliderLaneData {
-  key: string;
-  type: SliderLaneType;
-  /**
-   * Used when type === 'anchored': length (0..1) of the lane symmetrically
-   * centered on the current value.
-   */
-  value?: number;
-  /** Used when type === 'value': lower end of the lane band (0..1). */
-  valueMin?: number;
-  /** Used when type === 'value': upper end of the lane band (0..1). */
-  valueMax?: number;
-  /** Perpendicular offset from the track centreline (-1..1 scale relative to CROSS). */
-  offset: number;
-  /** Stroke thickness as a fraction of the CROSS dimension (0..1). */
-  width: number;
-}
+//#region src/sliding-number/sliding-number.d.ts
 /**
- * Identifies which field(s) of a dual/triple-mode detail changed.
- * `both` is reserved for length-drag (value-drag) gestures.
+ * Digit-roll direction.
+ * - `auto` — inferred from whether the value went up or down (default)
+ * - `up` / `down` — force the reels to always spin one way
+ * - `none` — take the shortest path
  */
-type SliderChangedField = `min` | `max` | `c` | `both`;
+type SlidingNumberTrend = `auto` | `up` | `down` | `none` | `increasing` | `decreasing`;
 /**
- * In single mode, `value` is the single handle's value and the min/max/c
- * fields are undefined. In dual/triple mode, `value` is set to `valueMax`
- * (the "B"/upper handle) for parity with native `<input type="range">`
- * two-thumb patterns where a single `value` is ambiguous — consumers
- * wanting min/max should use `valueMin`/`valueMax` directly.
+ * `ixfx-sliding-number` — an animated number readout. When `value` changes each
+ * digit rolls vertically to its new figure (odometer / slot-machine style),
+ * digits that appear or disappear slide + fade, and the whole thing stays lined
+ * up on the decimal point.
+ *
+ * Inspired by [NumberFlow](https://number-flow.barvian.me/): configurable
+ * timings, a `trend` to bias roll direction, decimal alignment, and `::part()`
+ * hooks for styling.
+ *
+ * ```html
+ * <ixfx-sliding-number value="1234.5"></ixfx-sliding-number>
+ * <ixfx-sliding-number value="19.99" prefix="$" format='{"minimumFractionDigits":2}'></ixfx-sliding-number>
+ * ```
+ *
+ * ### CSS variables
+ * | Variable | Default | Purpose |
+ * |---|---|---|
+ * | `--sliding-number-spin-duration` | `0.7s` | Time for a digit reel to roll |
+ * | `--sliding-number-spin-easing` | `cubic-bezier(.16,1,.3,1)` | Easing for the roll |
+ * | `--sliding-number-transform-duration` | `0.5s` | Time for digits to slide in/out as the number grows/shrinks |
+ * | `--sliding-number-transform-easing` | `cubic-bezier(.16,1,.3,1)` | Easing for that slide |
+ * | `--sliding-number-opacity-duration` | `0.35s` | Fade time for entering/leaving digits |
+ * | `--sliding-number-digit-width` | `1ch` | Column width of a single digit |
+ *
+ * ### Parts
+ * `prefix`, `suffix`, `number`, `integer`, `fraction`, `digit`, `symbol`.
  */
-interface SliderInputInputDetail {
-  readonly value: number;
-  readonly valueRelative: number;
-  /** Lower handle value (dual/triple modes only). */
-  readonly valueMin?: number;
-  /** Upper handle value (dual/triple modes only). */
-  readonly valueMax?: number;
-  readonly valueMinRelative?: number;
-  readonly valueMaxRelative?: number;
-  /** Triple-mode middle handle value. */
-  readonly valueC?: number;
-  readonly valueCRelative?: number;
-  /** Which field this particular event resulted from. */
-  readonly changed?: SliderChangedField;
-}
-interface SliderInputChangeDetail {
-  readonly value: number;
-  readonly valueRelative: number;
-  readonly previousValue: number;
-  readonly valueMin?: number;
-  readonly valueMax?: number;
-  readonly previousValueMin?: number;
-  readonly previousValueMax?: number;
-  readonly valueC?: number;
-  readonly previousValueC?: number;
-  readonly changed?: SliderChangedField;
-}
-type SliderInputInputEvent = CustomEvent<SliderInputInputDetail>;
-type SliderInputChangeEvent = CustomEvent<SliderInputChangeDetail>;
-interface SliderInputElementEventMap {
-  input: SliderInputInputEvent;
-  change: SliderInputChangeEvent;
-}
-//#endregion
-//#region src/slider-input/slider-input.d.ts
-declare const SliderInputElement_base: (new (...args: any[]) => WheelNudgeConsumerType<LitElement>) & typeof LitElement;
-declare class SliderInputElement extends SliderInputElement_base {
-  #private;
-  valueA: number;
-  valueB: number;
-  /**
-   * Triple-mode middle handle. `undefined` until first willUpdate, then
-   * defaulted to the midpoint of valueA/valueB (matching radial-input's
-   * deferred lane-correction pattern).
-   */
-  valueC: number | undefined;
-  min: number;
-  max: number;
-  step: number | undefined;
-  stops: number | undefined;
-  valueMode: SliderValueMode;
-  singleStyle: SliderSingleStyle;
-  orientation: SliderOrientation;
-  markerStyle: SliderMarkerStyle;
-  /**
-   * Optional marker-style override for the C handle in triple mode. Lets
-   * consumers give C a different shape (e.g. dot) from the global
-   * `markerStyle` applied to A/B.
-   */
-  markerStyleC: SliderMarkerStyle | undefined;
-  crossover: SliderCrossover;
-  valueDrag: SliderValueDrag;
-  /**
-   * In triple mode, how the C handle reacts when A or B moves the [A, B]
-   * band. `none` (default): C keeps its value unless pushed outside the
-   * new band. `proportional`: C is re-anchored at the same fractional
-   * position it had within the *old* band, so it moves with A/B.
-   */
-  valueCFollow: SliderValueCFollow;
-  valueMin: number;
-  disabled: boolean;
-  constructor();
+declare class SlidingNumberElement extends LitElement {
+  /** The number to display. */
+  value: number;
+  /** BCP-47 locale(s) passed to `Intl.NumberFormat`. */
+  locales: string | undefined;
+  /**
+   * `Intl.NumberFormat` options. As an attribute, pass JSON:
+   * `format='{"style":"currency","currency":"USD"}'`.
+   */
+  format: Intl.NumberFormatOptions | undefined;
+  /** Static text shown before the number. */
+  prefix: string;
+  /** Static text shown after the number. */
+  suffix: string;
+  /** Which way the digit reels roll. */
+  trend: SlidingNumberTrend;
+  /** Add the `no-animate` attribute to render every change instantly. */
+  noAnimate: boolean;
+  /** Honour `prefers-reduced-motion: reduce` (default `true`; set the property to `false` to override). */
+  respectMotionPreference: boolean;
+  private _cells;
+  private _formatted;
+  private _ready;
+  private _prevValue;
+  private _pendingSpins;
+  private _pendingDir;
+  private _reelAnims;
+  private _reapTimer;
   connectedCallback(): void;
-  addLane(key: string, options?: {
-    value?: number;
-    valueMin?: number;
-    valueMax?: number;
-    type?: SliderLaneType;
-    offset?: number;
-    width?: number;
-  }): void;
-  setLaneValue(key: string, value: number): void;
-  setLaneRange(key: string, valueMin: number, valueMax: number): void;
-  removeLane(key: string): void;
-  getLanes(): ReadonlyMap<string, SliderLaneData>;
-  getLane(key: string): SliderLaneData | undefined;
-  _applyWheelDelta(direction: WheelDirection, event: WheelEvent): void;
-  protected willUpdate(changed: PropertyValues): void;
-  render(): unknown;
-  protected updated(changed: PropertyValues): void;
   disconnectedCallback(): void;
-  static styles: CSSResult[];
+  private _motionOK;
+  private _timing;
+  private _numberFormat;
+  private _resolveDir;
+  /** Split the formatted value into positioned cells. */
+  private _buildCells;
+  protected willUpdate(changed: PropertyValues): void;
+  protected updated(): void;
+  private _spin;
+  private _renderCell;
+  protected render(): TemplateResult<1>;
+  static styles: CSSResult;
 }
 declare global {
   interface HTMLElementTagNameMap {
-    'ixfx-slider-input': SliderInputElement;
+    'ixfx-sliding-number': SlidingNumberElement;
   }
 }
-interface SliderInputElement {
-  addEventListener: (<K extends keyof SliderInputElementEventMap>(type: K, listener: (this: SliderInputElement, event: SliderInputElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
-}
 //#endregion
 //#region src/snackbar/snackbar.d.ts
 type SnackbarMode = `explicit` | `manual` | `implicit`;
@@ -5674,76 +6690,37 @@ declare class SnapContainer extends LitElement {
 }
 type SnapChangeDetail = {
   readonly previousSnap: number;
-  readonly newSnap: number;
-};
-type SnapChangeEvent = CustomEvent<SnapChangeDetail>;
-type SnapInputDetail = {
-  readonly index: number;
-};
-type SnapInputEvent = CustomEvent<SnapInputDetail>;
-declare global {
-  interface HTMLElementTagNameMap {
-    'ixfx-snap-container': SnapContainer;
-  }
-}
-//#endregion
-//#region src/split-layout/split-layout.d.ts
-/**
- * Lays out two elements within a container, with a bar to resize them
- * proportionally.
- *
- * Events
- * ixfx-split-collapsed: Dispatched when a panel is collapsed/uncollapsed via drag.
- *   detail: { panel: 'A' | 'B', collapsed: boolean }
- *
- * Attributes
- * layout: `vertical`|`horizontal`
- * sizeA/B: CSS size of section A or B. Can use relative or absolute values
- * fixedA/B: If _true_ size will be calculated in pixels. By default (_false_) it uses % of whole
- * collapsible: If _true_, panels can be collapsed by dragging to edge (default: false)
- * minSizeA/B: Minimum size for panel A or B (e.g., "100px" or "20%"). Default: none
- * maxSizeA/B: Maximum size for panel A or B (e.g., "200px" or "80%"). Default: none
- *
- * CSS variables
- * --handle-size: 2px;              // Width/height of split bar
- * --handle-colour: var(--surface-5);     // Colour of handle
- * --handle-hover-colour: var(--surface-6); // Colour of handle when hovering
- * --handle-active-colour: var(--accent);    // Colour of handle when being used
- * --handle-bg: var(--handle-colour); // Background of grab handle rectangle
- * --handle-grab-colour: var(--surface-muted-text); // Colour of grab handle dots
- * --handle-grab-dot-size: 3px;      // Diameter of grab handle dots
- * --handle-grab-size: 16px;         // Length of grab handle
- * --handle-grab-thickness: 8px;     // Thickness of grab handle
- */
-declare class SplitLayoutElement extends LitElement {
-  #private;
-  layout: `vertical` | `horizontal`;
-  sizeA: string;
-  sizeB: string;
-  fixedA: boolean;
-  fixedB: boolean;
-  collapsible: boolean;
-  collapsedA: boolean;
-  collapsedB: boolean;
-  minSizeA: string;
-  maxSizeA: string;
-  minSizeB: string;
-  maxSizeB: string;
-  private _hasCorner;
-  private get showGrabHandle();
-  disconnectedCallback(): void;
-  firstUpdated(): void;
-  updated(changedProperties: Map<string, unknown>): void;
-  getZone(): HTMLElement | undefined;
-  render(): TemplateResult<1>;
-  static styles: CSSResult[];
-}
+  readonly newSnap: number;
+};
+type SnapChangeEvent = CustomEvent<SnapChangeDetail>;
+type SnapInputDetail = {
+  readonly index: number;
+};
+type SnapInputEvent = CustomEvent<SnapInputDetail>;
 declare global {
   interface HTMLElementTagNameMap {
-    "ixfx-split-layout": SplitLayoutElement;
+    'ixfx-snap-container': SnapContainer;
   }
 }
 //#endregion
+//#region src/split-layout/split-model.d.ts
+declare function buildModel(rootEl: HTMLElement): GroupNode;
+declare function normalise(group: GroupNode): GroupNode;
+interface DistributeResult {
+  sizesPx: number[];
+  belowMin: number[];
+}
+declare function distribute(sizesPx: number[], gutterIndex: number, deltaPx: number, constraints: Array<{
+  minPx: number;
+  maxPx: number | null;
+  fixedPx: number | null;
+  whenSmall: WhenSmall;
+}>): DistributeResult;
+declare function resolveTracks(group: GroupNode, _containerPx: number): string;
+declare function toSnapshot(group: GroupNode): LayoutSnapshot;
+declare function applySnapshot(group: GroupNode, snapshot: LayoutSnapshot): GroupNode;
+declare function walk(group: GroupNode, visitor: (node: LayoutNode, path: number[]) => void): void;
+//#endregion
 //#region src/swipe/swipe.d.ts
 type SwipeInputDetail = {
   readonly value: number;
@@ -5797,135 +6774,6 @@ declare class SwipeElement extends SwipeElement_base {
   render(): ReturnType<typeof html>;
 }
 //#endregion
-//#region src/toolbar/types.d.ts
-type ToolbarOrientation = 'horizontal' | 'vertical-left' | 'vertical-right';
-type ToolbarLayout = 'one-line' | 'wrap';
-type ToolbarVerticalWriting = 'auto' | 'up' | 'down' | 'none';
-//#endregion
-//#region src/toolbar/toolbar.d.ts
-declare class ToolbarElement extends LitElement {
-  orientation: ToolbarOrientation;
-  layout: ToolbarLayout;
-  verticalWriting: ToolbarVerticalWriting;
-  showGroupLabels: boolean;
-  invisibleGroups: boolean;
-  private _overflowCount;
-  private _ro;
-  private static _cnt;
-  private _anchor;
-  /** Natural size of items, captured while they are measurable in the main slot. */
-  private _sizes;
-  private _measureQueued;
-  private _inner;
-  private _popover;
-  private _slot;
-  static styles: CSSResult[];
-  connectedCallback(): void;
-  protected firstUpdated(): void;
-  protected updated(changed: Map<string, unknown>): void;
-  private _updateGroupLabels;
-  disconnectedCallback(): void;
-  /** Coalesce measure passes into one per frame; prevents slotchange feedback loops. */
-  private _scheduleMeasure;
-  private _measure;
-  private _toggleOverflow;
-  protected render(): TemplateResult<1>;
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    'ixfx-toolbar': ToolbarElement;
-  }
-}
-//#endregion
-//#region src/toolbar/toolbar-group.d.ts
-declare class ToolbarGroupElement extends LitElement {
-  label: string;
-  grow: boolean;
-  static styles: CSSResult[];
-  protected render(): TemplateResult<1>;
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    'ixfx-toolbar-group': ToolbarGroupElement;
-  }
-}
-//#endregion
-//#region src/tabs/tab-list-item.d.ts
-/**
- * CSS vars (can be overridden per-instance):
- * --selected-colour: text colour when selected
- * --selected-border-width: border width
- * --ixfx-tab-padding: vertical padding for the tab content (default: var(--space-m))
- * --ixfx-tab-padding-horizontal: horizontal padding (default: same as --ixfx-tab-padding)
- */
-declare class TabListItemElement extends LitElement {
-  closeable: boolean;
-  hideLabels: boolean;
-  iconName: string | undefined;
-  description: string | undefined;
-  commandActive: string | undefined;
-  registry: CommandRegistry<unknown> | undefined;
-  private _compact;
-  private _hasToolbarContent;
-  private _resizeObserver?;
-  private _commandCleanup?;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  updated(changed: PropertyValues): void;
-  private _syncTooltipAttrs;
-  private _syncCommandListener;
-  private _onToolbarSlotChange;
-  private _updateToolbarContent;
-  firstUpdated(): void;
-  render(): TemplateResult<1>;
-  private _onCloseClick;
-  static styles: CSSResult[];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    "ixfx-tab-list-item": TabListItemElement;
-  }
-}
-//#endregion
-//#region src/tabs/tab-list.d.ts
-/**
- * Events
- * 'change' - new tab selected { previous:string, selected:string, for:string }
- * 'reorder' - tab moved within the list { id:string, fromIndex:number, toIndex:number }
- */
-type TabListChangeDetail = {
-  readonly previous: string | undefined;
-  readonly selected: string;
-  readonly for: string;
-};
-type TabListChangeEvent = CustomEvent<TabListChangeDetail>;
-type TabListReorderDetail = {
-  readonly id: string;
-  readonly fromIndex: number;
-  readonly toIndex: number;
-};
-type TabListReorderEvent = CustomEvent<TabListReorderDetail>;
-type TabListDragMode = `off` | `reorder`;
-declare class TabListElement extends LitElement {
-  #private;
-  orientation: `horizontal` | `vertical-stack` | `vertical-side`;
-  flip: boolean;
-  scrollable: boolean;
-  hideLabels: boolean;
-  dragMode: TabListDragMode;
-  render(): TemplateResult<1>;
-  firstUpdated(): void;
-  updated(changedProperties: PropertyValues): void;
-  getSelectedElement(): TabListItemElement | undefined;
-  selectElement(el: HTMLElement): void;
-  static styles: CSSResult[];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    "ixfx-tab-list": TabListElement;
-  }
-}
-//#endregion
 //#region src/tabs/tab-panel.d.ts
 declare class TabPanelElement extends LitElement {
   render(): TemplateResult<1>;
@@ -6067,6 +6915,43 @@ declare class TabController {
   setTabIcon(sel: string | TabListItemElement, iconName?: string): boolean;
 }
 //#endregion
+//#region src/text-shimmer/text-shimmer.d.ts
+/**
+ * `ixfx-text-shimmer` — a label whose text is dimmed at rest, with a band of
+ * brighter colour that sweeps horizontally across it on a loop. Useful as a
+ * lightweight "still working…" indicator (as seen in Claude Code / Codex).
+ *
+ * Content comes from the `text` property, or failing that the default slot:
+ * ```html
+ * <ixfx-text-shimmer text="Thinking…"></ixfx-text-shimmer>
+ * <ixfx-text-shimmer>Reticulating splines…</ixfx-text-shimmer>
+ * ```
+ *
+ * CSS variables (set on the element or an ancestor):
+ * | Variable | Default | Purpose |
+ * |---|---|---|
+ * | `--text-shimmer-color` | `var(--surface-3-text)` | Resting / base text colour |
+ * | `--text-shimmer-gradient-color` | `var(--surface-2-text)` | Colour of the moving highlight |
+ * | `--text-shimmer-duration` | `2s` | Time for one sweep |
+ * | `--text-shimmer-spread` | `15%` | Half-width of the highlight band along the sweep track (larger = wider, softer) |
+ *
+ * Add the `paused` attribute to stop the sweep and show flat base colour.
+ * Respects `prefers-reduced-motion`.
+ */
+declare class TextShimmerElement extends LitElement {
+  /** Text to display. When empty, the default slot is used instead. */
+  text: string;
+  /** When set, the sweep stops and the text shows flat base colour. */
+  paused: boolean;
+  protected render(): TemplateResult<1>;
+  static styles: CSSResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-text-shimmer': TextShimmerElement;
+  }
+}
+//#endregion
 //#region src/timeline/types.d.ts
 type TimelineTrack = {
   readonly key: string;
@@ -6458,6 +7343,61 @@ declare function attachTimelineInteractions(host: IxfxTimelineElement, vcanvasEl
 //#region src/timeline/timeline-styles.d.ts
 declare const timelineStyles: CSSResult;
 //#endregion
+//#region src/toolbar/toolbar-group.d.ts
+declare class ToolbarGroupElement extends LitElement {
+  label: string;
+  grow: boolean;
+  static styles: CSSResult[];
+  protected render(): TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-toolbar-group': ToolbarGroupElement;
+  }
+}
+//#endregion
+//#region src/toolbar/types.d.ts
+type ToolbarOrientation = `horizontal` | `vertical-left` | `vertical-right`;
+type ToolbarLayout = `one-line` | `wrap`;
+type ToolbarVerticalWriting = `auto` | `up` | `down` | `none`;
+type ToolbarAlign = `near` | `far`;
+//#endregion
+//#region src/toolbar/toolbar.d.ts
+declare class ToolbarElement extends LitElement {
+  orientation: ToolbarOrientation;
+  layout: ToolbarLayout;
+  verticalWriting: ToolbarVerticalWriting;
+  toolbarAlign: ToolbarAlign;
+  showGroupLabels: boolean;
+  invisibleGroups: boolean;
+  private _overflowCount;
+  private _ro;
+  private static _cnt;
+  private _anchor;
+  /** Natural size of items, captured while they are measurable in the main slot. */
+  private _sizes;
+  private _measureQueued;
+  private _inner;
+  private _popover;
+  private _slot;
+  static styles: CSSResult[];
+  connectedCallback(): void;
+  protected firstUpdated(): void;
+  protected updated(changed: Map<string, unknown>): void;
+  private _updateGroupLabels;
+  disconnectedCallback(): void;
+  /** Coalesce measure passes into one per frame; prevents slotchange feedback loops. */
+  private _scheduleMeasure;
+  private _measure;
+  private _toggleOverflow;
+  protected render(): TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-toolbar': ToolbarElement;
+  }
+}
+//#endregion
 //#region src/transitory-label/transitory-label.d.ts
 type Effect = `slide-right` | `slide-left` | `slide-up` | `slide-down` | `fade` | `character-swap`;
 declare class TransitoryLabelElement extends LitElement {
@@ -6497,6 +7437,63 @@ declare class TreeController<T> {
   navigateToValue(predicate: (value: T) => boolean): boolean;
 }
 //#endregion
+//#region src/twosplit-layout/split-layout.d.ts
+/**
+ * Lays out two elements within a container, with a bar to resize them
+ * proportionally.
+ *
+ * Events
+ * ixfx-split-collapsed: Dispatched when a panel is collapsed/uncollapsed via drag.
+ *   detail: { panel: 'A' | 'B', collapsed: boolean }
+ *
+ * Attributes
+ * layout: `vertical`|`horizontal`
+ * sizeA/B: CSS size of section A or B. Can use relative or absolute values
+ * fixedA/B: If _true_ size will be calculated in pixels. By default (_false_) it uses % of whole
+ * collapsible: If _true_, panels can be collapsed by dragging to edge (default: false)
+ * minSizeA/B: Minimum size for panel A or B (e.g., "100px" or "20%"). Default: none
+ * maxSizeA/B: Maximum size for panel A or B (e.g., "200px" or "80%"). Default: none
+ *
+ * CSS variables
+ * --handle-size: 2px;              // Width/height of split bar
+ * --handle-colour: var(--surface-5);     // Colour of handle
+ * --handle-hover-colour: var(--surface-6); // Colour of handle when hovering
+ * --handle-active-colour: var(--accent);    // Colour of handle when being used
+ * --handle-bg: var(--handle-colour); // Background of grab handle rectangle
+ * --handle-grab-colour: var(--surface-muted-text); // Colour of grab handle dots
+ * --handle-grab-dot-size: 3px;      // Diameter of grab handle dots
+ * --handle-grab-size: 16px;         // Length of grab handle
+ * --handle-grab-thickness: 8px;     // Thickness of grab handle
+ */
+declare class TwoSplitLayoutElement extends LitElement {
+  #private;
+  layout: `vertical` | `horizontal`;
+  sizeA: string;
+  sizeB: string;
+  fixedA: boolean;
+  fixedB: boolean;
+  collapsible: boolean;
+  collapsedA: boolean;
+  collapsedB: boolean;
+  minSizeA: string;
+  maxSizeA: string;
+  minSizeB: string;
+  maxSizeB: string;
+  private _hasCorner;
+  private get showGrabHandle();
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
+  getZone(): HTMLElement | undefined;
+  render(): TemplateResult<1>;
+  static styles: CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ixfx-twosplit-layout": TwoSplitLayoutElement;
+  }
+}
+//#endregion
 //#region src/util/checkbox.d.ts
 declare function monitorIndeterminate(targetElOrQuery: string | HTMLElement, watchedElsOrQueries: Array<string | HTMLElement>): () => void;
 //#endregion
@@ -6590,5 +7587,5 @@ interface XyPad {
 //#region src/index.d.ts
 declare function init(): void;
 //#endregion
-export { AcTextChangeDetail, AcTextChangeEvent, AcTextCompletionProvider, AcTextElement, AcTextItem, AcTextSelectDetail, AcTextSelectEvent, type AcTokenAddDetail, type AcTokenAddEvent, AcTokenElement, type AcTokenElementEventMap, type AcTokenItem, type AcTokenRemoveDetail, type AcTokenRemoveEvent, type AcTokenizerFn, type AcTokensChangeDetail, type AcTokensChangeEvent, AddItemOptions, ButtonElement, Checkbox, CheckboxChangeDetail, CheckboxChangeEvent, CheckboxEventMap, ClickSnapMode, ColourMapConfig, ColourMode, ColourPicker, type ColourPickerChangeEvent, type ColourPickerEventDetail, type ColourPickerInputEvent, ColourPickerPopup, ColourResult, ConfigEntry, ContiguousSelectEventDetail, CrossoverBehaviour, CrumbNavChangeDetail, CrumbNavChangeEvent, CrumbNavExpandDetail, CrumbNavExpandEvent, CrumbNavNavigateDetail, CrumbNavNavigateEvent, CrumbNavigationChangeDetail, CrumbNavigationChangeEvent, CrumbNavigationElement, CrumbNavigationElementEventMap, CrumbNavigationExpandDetail, CrumbNavigationExpandEvent, CrumbNavigationItemClickDetail, CrumbNavigationItemClickEvent, CrumbPathController, CrumbPathControllerOptions, CrumbPathElement, CrumbPathElementEventMap, CrumbSegment, CrumbSiblingLookupFn, type CssVars, CustomCheckboxOptions, DataBatch, DataController, DataControllerOptions, DataDisplayComponent, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, DataGridElement, DataGridElementEventMap, DataGridGroupChangeDetail, DataGridGroupChangeEvent, DataGridSelectDetail, DataGridSelectEvent, DataGridSortDetail, DataGridSortEvent, DataProviderResult, DisplayTextLogic, DragSnappingFn, DragTarget, EditableLabel, EditableLabelChangeDetail, EditableLabelChangeEvent, EditableMode, EditableNumber, Effect, type ElementIncrSearch, type ElementIncrSearchOptions, Endpoints, EntryMode, FormElement, FormGroupElement, FormPartElement, FormatValueForHuman, FormattingOptions, type FuzzySearch, type FuzzySearchOptions, FuzzySearchResult, GridMode, GridResolution, GroupedItemListerElement, type GroupedItemListerElementEventMap, type GroupedSelectDetail, type GroupedSelectEvent, HexChangeDetail, HexChangeEvent, type HighlightOptions, type HighlightTarget, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IDataProvider, type IGroupedSubComponent, type IGroupedSubComponentEventMap, type IconChangedDetail, type IconChangedEvent, type IncrSearch, type IncrSearchChangeCallback, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, type IncrSearchTreeOptions as IncrSearchMillerOptions, type IncrSearchTreeOptions, type IncrSearchOptions, type IncrSearchResult, type IncrSearchState, ItemsProvider, IxfxHexEditorElement, IxfxIconElement, IxfxRatingElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LaneData, LaneType, LedElement, type ListActivateDetail, type ListActivateEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, LoadChildrenCallback, MarkerStyle, index_d_exports as Menu, type TreeActivateDetail as MillerActivateDetail, TreeActivateDetail, type TreeActivateEvent as MillerActivateEvent, TreeActivateEvent, MillerBaseElement, MillerBaseElementEventMap, type TreeCollapseDetail as MillerCollapseDetail, TreeCollapseDetail, type TreeCollapseEvent as MillerCollapseEvent, TreeCollapseEvent, MillerConfig, type TreeExpandDetail as MillerExpandDetail, TreeExpandDetail, type TreeExpandEvent as MillerExpandEvent, TreeExpandEvent, MillerHeaderClickDetail, MillerHeaderClickEvent, MillerHeaderRightClickDetail, MillerHeaderRightClickEvent, type TreeItem as MillerItem, TreeItem, type TreeItemClickDetail as MillerItemClickDetail, TreeItemClickDetail, type TreeItemClickEvent as MillerItemClickEvent, TreeItemClickEvent, MillerItemDblClickDetail, MillerItemDblClickEvent, MillerItemRightClickDetail, MillerItemRightClickEvent, MillerItemState, MillerListElement, type TreeNode as MillerNode, TreeNode, type TreeSelectDetail as MillerSelectDetail, TreeSelectDetail, type TreeSelectEvent as MillerSelectEvent, TreeSelectEvent, MillerSelectionMode, type TreeTickleDetail as MillerTickleDetail, TreeTickleDetail, type TreeTickleEvent as MillerTickleEvent, TreeTickleEvent, MillerTreeController, MillerTreeControllerOptions, NarrowedTextChangeDetail, NarrowedTextChangeEvent, NarrowedTextElement, NarrowedTextItem, NoneSelectEventDetail, Notification, NotificationContent, NotificationManager, NotificationPillElement, NotificationPillElementEventMap, NotificationRenderer, NotificationRendererHooks, NotificationType, NotifierOptions, type OklchValue, Orientation, PanelCloseEvent, PanelElement, PanelElementEventMap, PanelGroupElement, PanelGroupOrientation, PanelOrientation, PanelToggleDetail, PanelToggleEvent, PanelToggleInteraction, PanelVariant, PillPosition, PillQueueDisplay, PillRendererOptions, PillSafeArea, PillTapDetail, PillTapEvent, PlotDataSeries, PlotDataSeriesOptions, PlotHistogram, PlotHistogramBucketClickDetail, PlotHistogramBucketClickEvent, PlotHistogramElementEventMap, PlotHistogramOrientation, PlotHistogramValueTooltips, PlotMultiAxis, PlotMultiAxisDataPointClickDetail, PlotMultiAxisDataPointClickEvent, PlotMultiAxisElementEventMap, PlotMultiAxisLayout, PlotSingleAxis, PlotSingleAxisElementEventMap, PlotSingleAxisPointerMoveDetail, PlotSingleAxisPointerMoveEvent, PlotXyAxis, PolarPad, PolarPadInputDetail, PolarPadInputEvent, PopupItem, RadialInputChangeDetail, RadialInputChangeEvent, RadialInputElement, RadialInputInputDetail, RadialInputInputEvent, RadioGroup, RadioGroupChangeDetail, RadioGroupChangeEvent, RadioGroupMode, RadioItem, RangeElement, RangeInput, RangeMultiElement, RangeMultiInputDetail, RangeMultiInputEvent, RatingChangeDetail, RatingChangeEvent, RatingElement, RatingElementEventMap, RatingInputEvent, RatingVariant, type Rect, RectangularSelectEventDetail, RendererStyle, ResizeMode, SelectEventDetail, SelectHorizChangeDetail, SelectHorizChangeEvent, SelectHorizElement, SelectHorizEventMap, SelectionMode, SingleAxisAgeStyle, SingleAxisDrawStyle, SingleSelectEventDetail, SliderChangedField, SliderCrossover, SliderHandleKey, SliderInputChangeDetail, SliderInputChangeEvent, SliderInputElement, SliderInputElementEventMap, SliderInputInputDetail, SliderInputInputEvent, SliderLaneData, SliderLaneType, SliderMarkerStyle, SliderOrientation, SliderSingleStyle, SliderValueCFollow, SliderValueDrag, SliderValueMode, SnackbarDismiss, SnackbarElement, SnackbarMode, SnackbarPlacement, SnapChangeDetail, SnapChangeEvent, SnapContainer, SnapInputDetail, SnapInputEvent, SnapLogic, SortCompareFn, SplitButton, SplitButtonMode, SplitButtonSelectDetail, SplitButtonSelectEvent, SplitLayoutElement, type SubComponentActivateDetail, type SubComponentActivateEvent, type SubComponentFactory, type SubComponentItemClickDetail, type SubComponentItemClickEvent, type SubComponentSelectDetail, type SubComponentSelectEvent, type SubComponentTickleDetail, type SubComponentTickleEvent, SwipeElement, SwipeElementEventMap, SwipeInputDetail, SwipeInputEvent, SwitcherItem, Tab, TabAddOptions, TabController, TabControllerOptions, TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListItemElement, TabListReorderDetail, TabListReorderEvent, TabPanelElement, TabPanelsElement, TimelineController, TimelineControllerConfig, TimelineDraggingCallbackDetail, TimelineDraggingDetail, TimelineDraggingEvent, TimelineElementEventMap, TimelineEvent, TimelineEventMoveDetail, TimelineEventMoveEvent, TimelineEventResizeDetail, TimelineEventResizeEvent, TimelineSelectionChangeDetail, TimelineSelectionChangeEvent, TimelineTickleChangeDetail, TimelineTickleChangeEvent, TimelineTrack, TimelineTrackReorderDetail, TimelineTrackReorderEvent, TimelineTrackResizeDetail, TimelineTrackResizeEvent, TimelineTrackSelectDetail, TimelineTrackSelectEvent, TimelineTrackTabElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TooltipOrientations, TrackHeightMode, TrackLayout, TransitoryLabelElement, TreeBaseElement, TreeBaseElementEventMap, TreeCheckboxState, TreeComponent, TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, TreeDataModelOptions, TreeExclusivity, TreeFilterPredicate, TreeInteractionMode, TreeListAdapterOptions, TreeListElement, TreeSearchHost, TreeSelectionFilter, UserScale, ValueMode, VerticalListAdapterOptions, VerticalListElement, ViewRange, XyAgeStyle, XyDrawStyle, XyPad, XyPadEventMap, XyPadInputDetail, XyPadInputEvent, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextChangeDetail, AcTextChangeEvent, AcTextCompletionProvider, AcTextElement, AcTextItem, AcTextSelectDetail, AcTextSelectEvent, type AcTokenAddDetail, type AcTokenAddEvent, AcTokenElement, type AcTokenElementEventMap, type AcTokenItem, type AcTokenRemoveDetail, type AcTokenRemoveEvent, type AcTokenizerFn, type AcTokensChangeDetail, type AcTokensChangeEvent, AddItemOptions, Axis, ButtonElement, Checkbox, CheckboxChangeDetail, CheckboxChangeEvent, CheckboxEventMap, ClickSnapMode, ColourMapConfig, ColourMode, ColourPicker, type ColourPickerChangeEvent, type ColourPickerEventDetail, type ColourPickerInputEvent, ColourPickerPopup, ColourResult, ConfigEntry, ContiguousSelectEventDetail, CrossoverBehaviour, CrumbNavChangeDetail, CrumbNavChangeEvent, CrumbNavExpandDetail, CrumbNavExpandEvent, CrumbNavNavigateDetail, CrumbNavNavigateEvent, CrumbNavigationChangeDetail, CrumbNavigationChangeEvent, CrumbNavigationElement, CrumbNavigationElementEventMap, CrumbNavigationExpandDetail, CrumbNavigationExpandEvent, CrumbNavigationItemClickDetail, CrumbNavigationItemClickEvent, CrumbPathController, CrumbPathControllerOptions, CrumbPathElement, CrumbPathElementEventMap, CrumbSegment, CrumbSiblingLookupFn, type CssVars, CustomCheckboxOptions, DataBatch, DataController, DataControllerOptions, DataDisplayComponent, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, DataGridElement, DataGridElementEventMap, DataGridGroupChangeDetail, DataGridGroupChangeEvent, DataGridSelectDetail, DataGridSelectEvent, DataGridSortDetail, DataGridSortEvent, DataProviderResult, type DetailFormatter, DetailListElement, type DetailSortComparator, type DetailSortItem, type DetailSortMode, DisplayTextLogic, DistributeResult, DockAxis, DockChangeDetail, DockChangeEvent, DockDragBoundaryDetail, DockDragBoundaryEvent, DockDropTarget, type DockDropZone, DockHostElement, DockHostElementEventMap, DockLayout, DockNode, DockOperation, DockPanelActivatedDetail, DockPanelActivatedEvent, DockPanelAddedDetail, DockPanelAddedEvent, DockPanelDragStartDetail, DockPanelDragStartEvent, DockPanelElement, DockPanelElementEventMap, DockPanelInit, DockPanelRemovedDetail, DockPanelRemovedEvent, DockPanelSnapshot, DockPanelTearOutDetail, DockPanelTearOutEvent, DockSplitNode, DockStackNode, DragSnappingFn, DragTarget, EditableLabel, EditableLabelChangeDetail, EditableLabelChangeEvent, EditableMode, EditableNumber, Effect, type ElementIncrSearch, type ElementIncrSearchOptions, Endpoints, EntryMode, FormElement, FormGroupElement, FormPartElement, FormatValueForHuman, FormattingOptions, type FuzzySearch, type FuzzySearchOptions, FuzzySearchResult, GridMode, GridResolution, GroupNode, GroupedItemListerElement, type GroupedItemListerElementEventMap, type GroupedSelectDetail, type GroupedSelectEvent, HexChangeDetail, HexChangeEvent, type HighlightOptions, type HighlightTarget, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IDataProvider, type IGroupedSubComponent, type IGroupedSubComponentEventMap, type IconChangedDetail, type IconChangedEvent, type IncrSearch, type IncrSearchChangeCallback, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, type IncrSearchTreeOptions as IncrSearchMillerOptions, type IncrSearchTreeOptions, type IncrSearchOptions, type IncrSearchResult, type IncrSearchState, ItemsProvider, IxfxHexEditorElement, IxfxIconElement, IxfxRatingElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LaneData, LaneType, LayoutNode, LayoutSnapshot, LedElement, type ListActivateDetail, type ListActivateEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, LoadChildrenCallback, MarkerStyle, index_d_exports as Menu, type TreeActivateDetail as MillerActivateDetail, TreeActivateDetail, type TreeActivateEvent as MillerActivateEvent, TreeActivateEvent, MillerBaseElement, MillerBaseElementEventMap, type TreeCollapseDetail as MillerCollapseDetail, TreeCollapseDetail, type TreeCollapseEvent as MillerCollapseEvent, TreeCollapseEvent, MillerConfig, type TreeExpandDetail as MillerExpandDetail, TreeExpandDetail, type TreeExpandEvent as MillerExpandEvent, TreeExpandEvent, MillerHeaderClickDetail, MillerHeaderClickEvent, MillerHeaderRightClickDetail, MillerHeaderRightClickEvent, type TreeItem as MillerItem, TreeItem, type TreeItemClickDetail as MillerItemClickDetail, TreeItemClickDetail, type TreeItemClickEvent as MillerItemClickEvent, TreeItemClickEvent, MillerItemDblClickDetail, MillerItemDblClickEvent, MillerItemRightClickDetail, MillerItemRightClickEvent, MillerItemState, MillerListElement, type TreeNode as MillerNode, TreeNode, type TreeSelectDetail as MillerSelectDetail, TreeSelectDetail, type TreeSelectEvent as MillerSelectEvent, TreeSelectEvent, MillerSelectionMode, type TreeTickleDetail as MillerTickleDetail, TreeTickleDetail, type TreeTickleEvent as MillerTickleEvent, TreeTickleEvent, MillerTreeController, MillerTreeControllerOptions, NarrowedTextChangeDetail, NarrowedTextChangeEvent, NarrowedTextElement, NarrowedTextItem, NoneSelectEventDetail, Notification, NotificationContent, NotificationManager, NotificationPillElement, NotificationPillElementEventMap, NotificationRenderer, NotificationRendererHooks, NotificationType, NotifierOptions, type OklchValue, Orientation, PanelCloseEvent, PanelElement, PanelElementEventMap, PanelGroupElement, PanelGroupOrientation, PanelInfo, PanelNode, PanelOrientation, PanelToggleDetail, PanelToggleEvent, PanelToggleInteraction, PanelVariant, PillPosition, PillQueueDisplay, PillRendererOptions, PillSafeArea, PillTapDetail, PillTapEvent, PlotDataSeries, PlotDataSeriesOptions, PlotHistogram, PlotHistogramBucketClickDetail, PlotHistogramBucketClickEvent, PlotHistogramElementEventMap, PlotHistogramOrientation, PlotHistogramValueTooltips, PlotMultiAxis, PlotMultiAxisDataPointClickDetail, PlotMultiAxisDataPointClickEvent, PlotMultiAxisElementEventMap, PlotMultiAxisLayout, PlotSingleAxis, PlotSingleAxisElementEventMap, PlotSingleAxisPointerMoveDetail, PlotSingleAxisPointerMoveEvent, PlotXyAxis, PolarPad, PolarPadInputDetail, PolarPadInputEvent, PopupItem, RadialInputChangeDetail, RadialInputChangeEvent, RadialInputElement, RadialInputInputDetail, RadialInputInputEvent, RadioGroup, RadioGroupChangeDetail, RadioGroupChangeEvent, RadioGroupMode, RadioItem, RangeElement, RangeInput, RangeMultiElement, RangeMultiInputDetail, RangeMultiInputEvent, RatingChangeDetail, RatingChangeEvent, RatingElement, RatingElementEventMap, RatingInputEvent, RatingVariant, type Rect, RectangularSelectEventDetail, RendererStyle, ResizeMode, SelectEventDetail, SelectHorizChangeDetail, SelectHorizChangeEvent, SelectHorizElement, SelectHorizEventMap, SelectionMode, SingleAxisAgeStyle, SingleAxisDrawStyle, SingleSelectEventDetail, SliderChangedField, SliderCrossover, SliderHandleKey, SliderInputChangeDetail, SliderInputChangeEvent, SliderInputElement, SliderInputElementEventMap, SliderInputInputDetail, SliderInputInputEvent, SliderLaneData, SliderLaneType, SliderMarkerStyle, SliderOrientation, SliderSingleStyle, SliderValueCFollow, SliderValueDrag, SliderValueMode, SlidingNumberElement, SlidingNumberTrend, SnackbarDismiss, SnackbarElement, SnackbarMode, SnackbarPlacement, SnapChangeDetail, SnapChangeEvent, SnapContainer, SnapInputDetail, SnapInputEvent, SnapLogic, SnapshotNode, SortCompareFn, SplitButton, SplitButtonMode, SplitButtonSelectDetail, SplitButtonSelectEvent, SplitChangeDetail, SplitChangeEvent, SplitCloseDetail, SplitCloseEvent, SplitCollapseDetail, SplitCollapseEvent, SplitExpandDetail, SplitExpandEvent, SplitLayoutElement, SplitLayoutElementEventMap, SplitPanelElement, SplitResizeDetail, SplitResizeEvent, type SubComponentActivateDetail, type SubComponentActivateEvent, type SubComponentFactory, type SubComponentItemClickDetail, type SubComponentItemClickEvent, type SubComponentSelectDetail, type SubComponentSelectEvent, type SubComponentTickleDetail, type SubComponentTickleEvent, SwipeElement, SwipeElementEventMap, SwipeInputDetail, SwipeInputEvent, SwitcherItem, Tab, TabAddOptions, TabController, TabControllerOptions, TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListItemElement, TabListReorderDetail, TabListReorderEvent, TabPanelElement, TabPanelsElement, TextShimmerElement, TimelineController, TimelineControllerConfig, TimelineDraggingCallbackDetail, TimelineDraggingDetail, TimelineDraggingEvent, TimelineElementEventMap, TimelineEvent, TimelineEventMoveDetail, TimelineEventMoveEvent, TimelineEventResizeDetail, TimelineEventResizeEvent, TimelineSelectionChangeDetail, TimelineSelectionChangeEvent, TimelineTickleChangeDetail, TimelineTickleChangeEvent, TimelineTrack, TimelineTrackReorderDetail, TimelineTrackReorderEvent, TimelineTrackResizeDetail, TimelineTrackResizeEvent, TimelineTrackSelectDetail, TimelineTrackSelectEvent, TimelineTrackTabElement, TitlebarCloseEvent, TitlebarElement, TitlebarElementEventMap, TitlebarOrientation, TitlebarToggleDetail, TitlebarToggleEvent, TitlebarToggleInteraction, TitlebarVariant, ToolbarAlign, ToolbarElement, ToolbarGroupElement, ToolbarLayout, ToolbarOrientation, ToolbarVerticalWriting, TooltipElement, TooltipOrientations, TrackHeightMode, TrackLayout, TransitoryLabelElement, TreeBaseElement, TreeBaseElementEventMap, TreeCheckboxState, TreeComponent, TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, TreeDataModelOptions, TreeExclusivity, TreeFilterPredicate, TreeInteractionMode, TreeListAdapterOptions, TreeListElement, TreeSearchHost, TreeSelectionFilter, TwoSplitLayoutElement, UserScale, ValueMode, VerticalListAdapterOptions, VerticalListElement, ViewRange, WhenSmall, XyAgeStyle, XyDrawStyle, XyPad, XyPadEventMap, XyPadInputDetail, XyPadInputEvent, addPanelToStack, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectDataResult, collectPanelIds, collectStackPaths, computeColour, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, getActiveDragPanelId, getIcon, hasIcon, iconBus, init, insertBeside, isDragging, isSplit, isStack, monitorIndeterminate, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, readBaseColour, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveTracks, serializeLayout, setActive, svgToDataUri, timelineStyles, toSnapshot, walk, wrapRoot };
 //# sourceMappingURL=index.d.ts.map