@framesquared/ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1913 @@
+import { Container, ContainerConfig, Component, ComponentConfig } from '@framesquared/component';
+import { NodeInterface, TreeStore, TreeStoreConfig } from '@framesquared/data';
+
+/**
+ * @framesquared/ui – Panel
+ *
+ * The primary container with header, body, tools, and docking.
+ * Panel extends Container to provide:
+ *  - Header with title, icon, and tool buttons
+ *  - Body with custom padding/styling
+ *  - Optional footer
+ *  - Docked items (top/bottom/left/right)
+ *  - Collapsible/expandable behavior
+ *  - Closable with events
+ */
+
+interface ToolConfig {
+    type: string;
+    handler?: (event: MouseEvent, tool: HTMLElement, panel: Panel) => void;
+    hidden?: boolean;
+    tooltip?: string;
+}
+interface PanelConfig extends ContainerConfig {
+    title?: string;
+    titleAlign?: 'left' | 'center' | 'right';
+    iconCls?: string;
+    icon?: string;
+    header?: boolean;
+    footer?: boolean;
+    tools?: ToolConfig[];
+    collapsible?: boolean;
+    collapsed?: boolean;
+    collapseDirection?: 'top' | 'bottom' | 'left' | 'right';
+    animCollapse?: boolean;
+    closable?: boolean;
+    bodyPadding?: number | string;
+    bodyStyle?: Record<string, string> | string;
+    bodyCls?: string;
+    frame?: boolean;
+    border?: boolean;
+    dockedItems?: Component[];
+}
+declare class Panel extends Container {
+    static $className: string;
+    static _titleCounter: number;
+    private _headerEl;
+    private _titleTextEl;
+    private _titleWrapEl;
+    private _iconEl;
+    private _toolsEl;
+    private _panelBodyEl;
+    private _footerEl;
+    private _collapsed;
+    private _title;
+    private _iconCls;
+    private _dockedItems;
+    constructor(config?: PanelConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    protected onDestroy(): void;
+    private shouldShowHeader;
+    private buildHeader;
+    private addAutoTools;
+    private hasToolType;
+    private applyBodyStyles;
+    setTitle(title: string): void;
+    getTitle(): string;
+    setIconCls(iconCls: string): void;
+    getIconCls(): string;
+    addTool(tool: ToolConfig): void;
+    private renderTool;
+    collapse(): void;
+    expand(): void;
+    toggleCollapse(): void;
+    isCollapsed(): boolean;
+    close(): void;
+    addDocked(item: Component, _pos?: number): void;
+    removeDocked(item: Component, destroy?: boolean): void;
+    getDockedItems(_selector?: string): Component[];
+}
+
+/**
+ * @framesquared/ui – Window
+ *
+ * A floating Panel rendered into document.body.  Supports dragging
+ * (by header), modal mask, maximize/minimize/restore, constrain to
+ * viewport, and z-index management via ZIndexManager.
+ */
+
+interface WindowConfig extends PanelConfig {
+    modal?: boolean;
+    draggable?: boolean;
+    resizable?: boolean;
+    constrain?: boolean;
+    constrainTo?: Element;
+    maximizable?: boolean;
+    minimizable?: boolean;
+    maximized?: boolean;
+    x?: number;
+    y?: number;
+    defaultFocus?: string;
+    closeAction?: 'destroy' | 'hide';
+    ghost?: boolean;
+    autoShow?: boolean;
+}
+declare class Window extends Panel {
+    static $className: string;
+    private _modal;
+    private _maskEl;
+    private _maximized;
+    private _restoreState;
+    private _closeAction;
+    private _draggable;
+    private _dragCleanup;
+    constructor(config?: WindowConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    show(): void;
+    close(): void;
+    private showMask;
+    private hideMask;
+    center(): void;
+    maximize(): void;
+    restore(): void;
+    toggleMaximize(): void;
+    minimize(): void;
+    toFront(): void;
+    toBack(): void;
+    private setupDrag;
+    protected onDestroy(): void;
+}
+
+/**
+ * @framesquared/ui – MessageBox
+ *
+ * Static utility class for common dialog patterns:
+ *   MessageBox.alert(title, message, callback?)
+ *   MessageBox.confirm(title, message, callback?)
+ *   MessageBox.prompt(title, message, callback?, multiline?)
+ *   MessageBox.wait(message, title?)
+ *   MessageBox.show(config)
+ *
+ * All dialogs are modal Windows that close on button click.
+ */
+
+interface MessageBoxConfig {
+    title?: string;
+    message?: string;
+    icon?: 'INFO' | 'WARNING' | 'ERROR' | 'QUESTION';
+    buttons?: string[];
+    fn?: (buttonId: string, value?: string) => void;
+    prompt?: boolean;
+    multiline?: boolean;
+    progress?: boolean;
+    progressText?: string;
+}
+declare class MessageBox {
+    /**
+     * Shows an alert dialog with an OK button.
+     */
+    static alert(title: string, message: string, callback?: (buttonId: string) => void): Window;
+    /**
+     * Shows a confirmation dialog with Yes and No buttons.
+     */
+    static confirm(title: string, message: string, callback?: (buttonId: string) => void): Window;
+    /**
+     * Shows a prompt dialog with an input field and OK/Cancel buttons.
+     */
+    static prompt(title: string, message: string, callback?: (buttonId: string, value?: string) => void, multiline?: boolean): Window;
+    /**
+     * Shows a wait/progress dialog (no buttons — must be closed programmatically).
+     */
+    static wait(message: string, title?: string): Window;
+    /**
+     * General-purpose dialog with full config.
+     */
+    static show(config: MessageBoxConfig): Window;
+}
+
+/**
+ * @framesquared/ui – ZIndexManager
+ *
+ * Manages z-index stack for floating components (Windows, menus, etc.).
+ * Tracks registration order; bringToFront/sendToBack reorder and
+ * reassign z-indices.
+ */
+
+declare class ZIndexManager {
+    private static instance;
+    /** Ordered stack, lowest first, highest last. */
+    private stack;
+    private constructor();
+    static getInstance(): ZIndexManager;
+    register(component: Component): void;
+    unregister(component: Component): void;
+    bringToFront(component: Component): void;
+    sendToBack(component: Component): void;
+    /** Returns the topmost (active) component. */
+    getActive(): Component | undefined;
+    /** Iterates from highest z to lowest. */
+    eachTopDown(fn: (component: Component) => void): void;
+    clear(): void;
+    private syncZIndices;
+}
+
+/**
+ * @framesquared/ui – Button
+ *
+ * A clickable button component with text, icon, toggle, menu arrow,
+ * keyboard support, and accessibility.  Renders as native &lt;button&gt;
+ * (or &lt;a&gt; if href is provided).
+ */
+
+interface ButtonConfig extends ComponentConfig {
+    text?: string;
+    iconCls?: string;
+    iconAlign?: 'left' | 'right' | 'top' | 'bottom';
+    icon?: string;
+    scale?: 'small' | 'medium' | 'large';
+    handler?: (button: Button, event: Event) => void;
+    scope?: object;
+    pressed?: boolean;
+    enableToggle?: boolean;
+    toggleGroup?: string;
+    menu?: any;
+    menuAlign?: string;
+    arrowVisible?: boolean;
+    tooltip?: string;
+    href?: string;
+    target?: string;
+    textAlign?: 'left' | 'center' | 'right';
+    ui?: string;
+    value?: string;
+}
+declare class Button extends Component {
+    static $className: string;
+    protected _pressed: boolean;
+    protected _scale: string;
+    protected _iconCls: string;
+    protected _textEl: HTMLElement | null;
+    protected _iconEl: HTMLElement | null;
+    constructor(config?: ButtonConfig);
+    protected initialize(): void;
+    render(container?: Element | string, position?: number | Element): void;
+    protected buildInnerDom(cfg: ButtonConfig): void;
+    protected applyButtonConfigs(cfg: ButtonConfig): void;
+    protected attachEvents(_cfg: ButtonConfig): void;
+    protected onButtonClick(e: Event): void;
+    private depressGroupMembers;
+    toggle(state?: boolean): void;
+    isPressed(): boolean;
+    setText(text: string): void;
+    setIconCls(iconCls: string): void;
+    setIcon(icon: string): void;
+    setTooltip(tooltip: string): void;
+    setScale(scale: string): void;
+    getValue(): string;
+    protected onDestroy(): void;
+}
+
+/**
+ * @framesquared/ui – SplitButton
+ *
+ * A button with two click zones: the main button area and a
+ * dropdown arrow area.  Clicking the arrow fires `arrowHandler`
+ * and `'arrowclick'` event independently from the main click.
+ */
+
+interface SplitButtonConfig extends ButtonConfig {
+    arrowHandler?: (button: SplitButton, event: Event) => void;
+}
+declare class SplitButton extends Button {
+    static $className: string;
+    private _splitArrowEl;
+    constructor(config?: SplitButtonConfig);
+    protected initialize(): void;
+    protected buildInnerDom(cfg: ButtonConfig): void;
+    protected attachEvents(cfg: ButtonConfig): void;
+}
+
+/**
+ * @framesquared/ui – CycleButton
+ *
+ * Cycles through a set of items on each click.  Extends SplitButton
+ * to show the current item's text and advance on click.
+ */
+
+interface CycleItem {
+    text: string;
+    iconCls?: string;
+    checked?: boolean;
+}
+interface CycleButtonConfig extends SplitButtonConfig {
+    items?: CycleItem[];
+}
+declare class CycleButton extends SplitButton {
+    static $className: string;
+    _cycleItems: CycleItem[];
+    private _activeIndex;
+    constructor(config?: CycleButtonConfig);
+    protected initialize(): void;
+    protected onButtonClick(e: Event): void;
+    getActiveItem(): CycleItem;
+    setActiveItem(item: CycleItem): void;
+}
+
+/**
+ * @framesquared/ui – SegmentedButton
+ *
+ * A Container that holds buttons in a group with single or multiple
+ * selection behavior.  Manages toggle state across child buttons.
+ */
+
+interface SegmentedButtonConfig extends ContainerConfig {
+    allowMultiple?: boolean;
+    allowDepress?: boolean;
+}
+declare class SegmentedButton extends Container {
+    static $className: string;
+    private _allowMultiple;
+    private _allowDepress;
+    constructor(config?: SegmentedButtonConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    private setupButtonListeners;
+    private attachSegmentListener;
+    private onSegmentClick;
+    getValue(): string | string[];
+    setValue(value: string | string[]): void;
+}
+
+/**
+ * @framesquared/ui – Toolbar
+ *
+ * A Container that arranges items horizontally (or vertically) with
+ * special shorthand items: '->' (fill), '-' (separator), ' ' (spacer),
+ * and plain text strings.  Uses flexbox layout.
+ */
+
+interface ToolbarConfig extends ContainerConfig {
+    vertical?: boolean;
+    enableOverflow?: boolean;
+    defaultButtonUI?: string;
+}
+declare class Toolbar extends Container {
+    static $className: string;
+    constructor(config?: ToolbarConfig);
+    protected afterRender(): void;
+}
+declare class ToolbarFill extends Component {
+    constructor();
+    protected afterRender(): void;
+}
+declare class ToolbarSeparator extends Component {
+    constructor();
+    protected afterRender(): void;
+}
+declare class ToolbarSpacer extends Component {
+    constructor();
+    protected afterRender(): void;
+}
+declare class ToolbarTextItem extends Component {
+    constructor(config: {
+        text: string;
+    });
+    protected afterRender(): void;
+}
+
+/**
+ * @framesquared/ui – PagingToolbar
+ *
+ * A Toolbar bound to a data Store that provides page navigation:
+ * first, prev, page input, "of N", next, last, refresh.
+ * Optionally displays "Showing X - Y of Z".
+ */
+
+interface PagingToolbarConfig extends ToolbarConfig {
+    store?: any;
+    displayInfo?: boolean;
+}
+declare class PagingToolbar extends Toolbar {
+    static $className: string;
+    private _store;
+    private _displayInfo;
+    private _pageInput;
+    private _totalEl;
+    private _infoEl;
+    constructor(config?: PagingToolbarConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    private moveFirst;
+    private movePrevious;
+    private moveNext;
+    private moveLast;
+    private doRefresh;
+    private loadPage;
+    private getTotalPages;
+    private updateInfo;
+    private createBtn;
+}
+
+/**
+ * @framesquared/ui – Menu
+ *
+ * A floating container that holds MenuItems.  Shows at a specific
+ * position or aligned to a component.  Registers with MenuManager
+ * for outside-click dismissal.  Supports keyboard navigation.
+ */
+
+interface MenuConfig extends ContainerConfig {
+    plain?: boolean;
+    showSeparator?: boolean;
+    allowOtherMenus?: boolean;
+}
+declare class Menu extends Container {
+    static $className: string;
+    private _isMenuVisible;
+    constructor(config?: MenuConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    showAt(x: number, y: number): void;
+    showBy(component: Component, _alignment?: string): void;
+    hide(): void;
+    isVisible(): boolean;
+    show(): void;
+    protected onDestroy(): void;
+}
+
+/**
+ * @framesquared/ui – MenuItem
+ *
+ * A clickable item within a Menu.  Supports text, icon, handler,
+ * sub-menu indicator, href (link), and disabled state.
+ */
+
+interface MenuItemConfig extends ComponentConfig {
+    text?: string;
+    iconCls?: string;
+    handler?: (item: MenuItem, event: Event) => void;
+    menu?: any;
+    href?: string;
+    plain?: boolean;
+}
+declare class MenuItem extends Component {
+    static $className: string;
+    constructor(config?: MenuItemConfig);
+    protected afterRender(): void;
+}
+
+/**
+ * @framesquared/ui – CheckItem
+ *
+ * A menu item with checkbox behavior.  Supports radio groups
+ * where only one item in the group can be checked at a time.
+ */
+
+interface CheckItemConfig extends ComponentConfig {
+    text?: string;
+    iconCls?: string;
+    checked?: boolean;
+    group?: string;
+    handler?: (item: CheckItem, event: Event) => void;
+}
+declare class CheckItem extends Component {
+    static $className: string;
+    private _checked;
+    constructor(config?: CheckItemConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    isChecked(): boolean;
+    setChecked(checked: boolean): void;
+    protected onDestroy(): void;
+}
+
+/**
+ * @framesquared/ui – MenuSeparator
+ * A visual separator line within a Menu.
+ */
+
+declare class MenuSeparator extends Component {
+    static $className: string;
+    constructor(config?: Record<string, unknown>);
+    protected afterRender(): void;
+}
+
+/**
+ * @framesquared/ui – MenuManager
+ *
+ * Singleton that tracks all open menus and closes them when the
+ * user clicks outside of any menu.
+ */
+declare class MenuManager {
+    private static instance;
+    private menus;
+    private listening;
+    private constructor();
+    static getInstance(): MenuManager;
+    register(menu: any): void;
+    unregister(menu: any): void;
+    getOpenMenus(): any[];
+    closeAll(): void;
+    private onDocumentMouseDown;
+    private startListening;
+    private stopListening;
+}
+
+/**
+ * @framesquared/ui – Tooltip
+ *
+ * A floating tip that appears near a target element on mouseenter.
+ * Supports show/hide delays, mouse tracking, anchor positioning,
+ * event delegation, dismissDelay, and closable mode.
+ */
+
+interface TooltipConfig extends ComponentConfig {
+    target?: Element | string;
+    html?: string;
+    title?: string;
+    anchor?: 'top' | 'bottom' | 'left' | 'right';
+    autoHide?: boolean;
+    showDelay?: number;
+    hideDelay?: number;
+    dismissDelay?: number;
+    trackMouse?: boolean;
+    mouseOffset?: [number, number];
+    delegate?: string;
+    maxWidth?: number;
+    closable?: boolean;
+}
+declare class Tooltip extends Component {
+    static $className: string;
+    private _targetEl;
+    private _showDelay;
+    private _hideDelay;
+    private _dismissDelay;
+    private _autoHide;
+    private _trackMouse;
+    private _mouseOffset;
+    private _delegate;
+    private _anchor;
+    private _maxWidth;
+    private _closable;
+    private _tipTitle;
+    private _tipHtml;
+    private _visible;
+    private _showTimer;
+    private _hideTimer;
+    private _dismissTimer;
+    private _lastMouseX;
+    private _lastMouseY;
+    private _cleanupFns;
+    constructor(config?: TooltipConfig);
+    protected initialize(): void;
+    private attachTargetListeners;
+    private onTargetEnter;
+    private onTargetLeave;
+    private onTargetMove;
+    private showTip;
+    hide(): void;
+    isVisible(): boolean;
+    private renderTip;
+    private updateContent;
+    private positionAtMouse;
+    private clearShowTimer;
+    private clearHideTimer;
+    private clearDismissTimer;
+    destroy(): void;
+}
+
+/**
+ * @framesquared/ui – QuickTip
+ *
+ * Singleton that auto-creates tooltips from DOM data attributes.
+ * Uses event delegation on document.body to monitor mouseenter on
+ * elements with `data-qtip`, `data-qtitle`, `data-qwidth`.
+ *
+ * Usage:
+ *   QuickTip.init();  // Start monitoring
+ *   // Any element with data-qtip="text" now gets a tooltip
+ */
+declare class QuickTip {
+    static init(): void;
+    static enable(): void;
+    static disable(): void;
+    static isEnabled(): boolean;
+}
+
+/**
+ * @framesquared/ui – DataView
+ *
+ * Renders store records using a template function.  Supports item
+ * events (click, dblclick, mouseenter, mouseleave), single/multi
+ * selection, hover tracking, empty text, and reactive store binding.
+ */
+
+interface DataViewConfig extends ComponentConfig {
+    store?: any;
+    itemTpl?: (record: any, index: number) => string;
+    itemSelector?: string;
+    itemCls?: string;
+    selectedItemCls?: string;
+    overItemCls?: string;
+    emptyText?: string;
+    multiSelect?: boolean;
+    singleSelect?: boolean;
+    trackOver?: boolean;
+}
+declare class DataView extends Component {
+    static $className: string;
+    _store: any;
+    private _itemTpl;
+    private _itemSelector;
+    private _itemCls;
+    private _selectedItemCls;
+    private _overItemCls;
+    private _emptyText;
+    private _multiSelect;
+    private _singleSelect;
+    private _trackOver;
+    private _selectedRecords;
+    private _contentEl;
+    constructor(config?: DataViewConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    refresh(): void;
+    private renderItems;
+    private attachItemEvents;
+    private onItemClick;
+    private clearSelectionClasses;
+    getSelectedRecords(): any[];
+    getNodes(): HTMLElement[];
+    getNode(record: any): HTMLElement | null;
+    getRecord(node: HTMLElement): any | null;
+    private bindStoreEvents;
+}
+
+/**
+ * @framesquared/ui – ListView
+ *
+ * A lightweight column-based list view using <table> for alignment.
+ * Simpler than a full Grid — no features, plugins, or editing.
+ * Supports item events, empty text, and reactive store binding.
+ */
+
+interface ListColumnConfig {
+    text: string;
+    dataIndex: string;
+    width?: number;
+}
+interface ListViewConfig extends ComponentConfig {
+    store?: any;
+    columns?: ListColumnConfig[];
+    emptyText?: string;
+}
+declare class ListView extends Component {
+    static $className: string;
+    private _store;
+    private _columns;
+    private _emptyText;
+    private _tableEl;
+    private _tbodyEl;
+    constructor(config?: ListViewConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    refresh(): void;
+    private renderRows;
+    private bindStoreEvents;
+}
+
+/**
+ * @framesquared/ui – Tab
+ *
+ * A tab component that renders as a clickable element with text,
+ * optional icon, optional close button, and active state styling.
+ */
+
+interface TabConfig extends ComponentConfig {
+    text?: string;
+    iconCls?: string;
+    closable?: boolean;
+    active?: boolean;
+    card?: Component;
+}
+declare class Tab extends Component {
+    static $className: string;
+    private _text;
+    private _closable;
+    private _active;
+    private _textEl;
+    private _closeEl;
+    /** The panel this tab represents */
+    card: Component | null;
+    constructor(config?: TabConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    setActive(active: boolean): void;
+    isActive(): boolean;
+    setText(text: string): void;
+}
+
+/**
+ * @framesquared/ui – TabBar
+ *
+ * A container for Tab components.  Renders as a horizontal (or vertical)
+ * strip of tabs.  Supports adding, removing, and overflow.
+ */
+
+interface TabBarConfig extends ComponentConfig {
+    position?: 'top' | 'bottom' | 'left' | 'right';
+}
+declare class TabBar extends Component {
+    static $className: string;
+    private _tabs;
+    private _stripEl;
+    private _position;
+    constructor(config?: TabBarConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    addTab(tab: Tab): void;
+    removeTab(tab: Tab): void;
+    getTabs(): Tab[];
+}
+
+/**
+ * @framesquared/ui – TabPanel
+ *
+ * A Panel that uses a card layout internally.  Each child panel
+ * becomes a tab in the TabBar.  Clicking a tab switches the
+ * visible card.  Supports closable tabs, deferred rendering,
+ * and top/bottom/left/right tab positioning.
+ */
+
+interface TabPanelConfig extends PanelConfig {
+    activeTab?: number | Component;
+    tabPosition?: 'top' | 'bottom' | 'left' | 'right';
+    plain?: boolean;
+    deferredRender?: boolean;
+    minTabWidth?: number;
+    maxTabWidth?: number;
+    removePanelHeader?: boolean;
+}
+declare class TabPanel extends Panel {
+    static $className: string;
+    private static _idCounter;
+    private _tabBar;
+    private _tabItems;
+    private _tabs;
+    private _activeIndex;
+    private _tabPosition;
+    private _deferredRender;
+    private _tabBodyEl;
+    private _pendingTabItems;
+    constructor(config?: TabPanelConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    private addTabItem;
+    private closeTab;
+    setActiveTab(tabOrIndex: number | Component): void;
+    private activateTab;
+    getActiveTab(): Component | undefined;
+    getTabItems(): Component[];
+    getTabBar(): TabBar | null;
+}
+
+/**
+ * @framesquared/ui – Viewport
+ *
+ * A Container that fills the entire browser viewport.
+ * Renders into document.body, sets overflow: hidden,
+ * and fires 'resize' on window resize.
+ */
+
+interface ViewportConfig extends ContainerConfig {
+}
+declare class Viewport extends Container {
+    static $className: string;
+    private _resizeHandler;
+    constructor(config?: ViewportConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    protected onDestroy(): void;
+}
+
+/**
+ * @framesquared/ui – Accordion
+ *
+ * A Container that displays child panels as collapsible sections.
+ * By default only one panel is expanded at a time (single mode).
+ * Set multi:true to allow multiple expanded panels.
+ */
+
+interface AccordionConfig extends ContainerConfig {
+    multi?: boolean;
+    activeItem?: number;
+}
+declare class Accordion extends Container {
+    static $className: string;
+    private _multi;
+    private _expandedSet;
+    private _headerEls;
+    constructor(config?: AccordionConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    expand(index: number): void;
+    collapse(index: number): void;
+    toggle(index: number): void;
+    isExpanded(index: number): boolean;
+    private doExpand;
+    private doCollapse;
+    private getSection;
+}
+
+/**
+ * @framesquared/ui – CardContainer
+ *
+ * A Container with card layout behavior: only one child is visible
+ * at a time.  Provides next(), prev(), and setActiveItem() for
+ * wizard-style navigation.
+ */
+
+interface CardContainerConfig extends ContainerConfig {
+    activeItem?: number;
+}
+declare class CardContainer extends Container {
+    static $className: string;
+    private _activeIndex;
+    constructor(config?: CardContainerConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    setActiveItem(index: number): void;
+    next(): void;
+    prev(): void;
+    getActiveItem(): any;
+    getActiveIndex(): number;
+}
+
+/**
+ * @framesquared/ui – Breadcrumb
+ *
+ * Displays a tree store as a breadcrumb path.  Each segment is a
+ * clickable item.  Non-leaf items have a dropdown arrow that shows
+ * their children for navigation.
+ */
+
+interface BreadcrumbNode {
+    id: string;
+    text: string;
+    leaf: boolean;
+    children: BreadcrumbNode[];
+    parent: BreadcrumbNode | null;
+}
+interface BreadcrumbStore {
+    getRoot(): BreadcrumbNode;
+    getNodeById(id: string): BreadcrumbNode | null;
+}
+interface BreadcrumbConfig extends ComponentConfig {
+    store?: BreadcrumbStore;
+    selection?: BreadcrumbNode | null;
+    showIcons?: boolean;
+}
+declare class Breadcrumb extends Component {
+    static $className: string;
+    private _store;
+    private _selection;
+    private _contentEl;
+    private _activeDropdown;
+    constructor(config?: BreadcrumbConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    private renderPath;
+    private getPathToNode;
+    private navigateTo;
+    setSelection(node: BreadcrumbNode): void;
+    getSelection(): BreadcrumbNode | null;
+    private showDropdown;
+    private closeDropdown;
+    protected onDestroy(): void;
+}
+
+/**
+ * @framesquared/ui – TreeGridColumn
+ *
+ * Column definition for the tree (first) column of a TreeGrid.
+ * Renders tree chrome: indentation, expander, icon, checkbox, node text.
+ */
+
+type ElbowType = 'line' | 'empty' | 'end' | 'end-plus' | 'tee' | 'tee-plus';
+interface EditorConfig {
+    xtype: string;
+    /** options for combobox/select/radiogroup — array of {value,text} or plain strings */
+    options?: Array<{
+        value: string;
+        text: string;
+    } | string>;
+    /** legacy: ExtJS-style store for combobox */
+    store?: Array<{
+        value: string;
+        text: string;
+    } | string>;
+    displayField?: string;
+    valueField?: string;
+    minValue?: number;
+    maxValue?: number;
+    step?: number;
+    rows?: number;
+    allowBlank?: boolean;
+    [key: string]: unknown;
+}
+interface ColumnConfig {
+    dataIndex: string;
+    text?: string;
+    width?: number;
+    flex?: number;
+    hidden?: boolean;
+    renderer?: (value: unknown, record: NodeInterface) => string;
+    /** Editor config. Pass false to mark the column as read-only. */
+    editor?: EditorConfig | false;
+}
+declare class Column {
+    readonly isColumn: boolean;
+    dataIndex: string;
+    text: string;
+    width: number;
+    flex: number;
+    hidden: boolean;
+    renderer: ((value: unknown, record: NodeInterface) => string) | undefined;
+    editor: EditorConfig | false | undefined;
+    constructor(config: ColumnConfig);
+    /**
+     * Returns the rendered cell value HTML for this column.
+     */
+    renderValue(record: NodeInterface): string;
+}
+interface TreeGridColumnConfig extends Omit<ColumnConfig, 'dataIndex'> {
+    dataIndex?: string;
+    indentSize?: number;
+    iconProperty?: string;
+    iconClsProperty?: string;
+    displayProperty?: string;
+    defaultFolderIcon?: string;
+    defaultFolderOpenIcon?: string;
+    defaultLeafIcon?: string;
+    showIcons?: boolean;
+    showExpanders?: boolean;
+    innerRenderer?: (value: unknown, record: NodeInterface) => string;
+}
+declare class TreeGridColumn extends Column {
+    readonly isTreeGridColumn: boolean;
+    indentSize: number;
+    iconProperty: string;
+    iconClsProperty: string;
+    displayProperty: string;
+    defaultFolderIcon: string;
+    defaultFolderOpenIcon: string;
+    defaultLeafIcon: string;
+    showIcons: boolean;
+    showExpanders: boolean;
+    innerRenderer: ((value: unknown, record: NodeInterface) => string) | undefined;
+    constructor(config?: TreeGridColumnConfig);
+    /**
+     * Computes the array of elbow types for a node based on depth and sibling position.
+     */
+    computeElbows(record: NodeInterface): ElbowType[];
+    /**
+     * Renders the complete tree cell HTML.
+     */
+    renderCell(record: NodeInterface, checkable: boolean, lines: boolean): string;
+}
+
+/**
+ * @framesquared/ui – TreeGridView
+ *
+ * Renders the tree grid body: a <table> with rows for each visible node.
+ * First column uses TreeGridColumn for tree chrome; subsequent columns render plain values.
+ */
+
+interface TreeGridViewConfig {
+    store: TreeStore;
+    columns: (TreeGridColumn | Column)[];
+    rootVisible?: boolean;
+    checkable?: boolean;
+    lines?: boolean;
+    animate?: boolean;
+    animationDuration?: number;
+    expanderSelector?: string;
+    checkboxSelector?: string;
+}
+declare class TreeGridView {
+    el: HTMLElement | null;
+    private tableEl;
+    private tbodyEl;
+    private store;
+    private columns;
+    private rootVisible;
+    private checkable;
+    private lines;
+    private listeners;
+    private focusedNode;
+    private _rowCache;
+    constructor(config: TreeGridViewConfig);
+    on(event: string, fn: Function): void;
+    un(event: string, fn: Function): void;
+    private fireEvent;
+    render(container: HTMLElement): void;
+    refresh(): void;
+    private _buildRow;
+    refreshNode(record: NodeInterface): void;
+    onNodeExpand(parentNode: NodeInterface, childNodes: NodeInterface[]): void;
+    onNodeCollapse(parentNode: NodeInterface): void;
+    onNodeInsert(parent: NodeInterface, _node: NodeInterface): void;
+    onNodeRemove(_parent: NodeInterface, node: NodeInterface): void;
+    onNodeUpdate(node: NodeInterface): void;
+    getNodeRow(record: NodeInterface): HTMLElement | null;
+    getRecord(rowElement: HTMLElement): NodeInterface | null;
+    getNodeByEvent(event: Event): NodeInterface | null;
+    focusRow(record: NodeInterface): void;
+    getFocusedNode(): NodeInterface | null;
+    markSelected(record: NodeInterface, selected: boolean): void;
+    showLoadingIndicator(node: NodeInterface): void;
+    hideLoadingIndicator(node: NodeInterface): void;
+    private _refreshTreeColumnCell;
+    private _visibleColumnIndex;
+    private _flattenVisible;
+    private _getRowRecord;
+    private _onViewClick;
+    private _onViewDblClick;
+    private _onViewContextMenu;
+    private _onKeyDown;
+    setColumns(columns: (TreeGridColumn | Column)[]): void;
+    setCheckable(checkable: boolean): void;
+}
+
+/**
+ * @framesquared/ui – TreeGridSelectionModel
+ *
+ * Selection model for TreeGrid. Supports SINGLE, SIMPLE, and MULTI modes.
+ * Tree-aware: tracks selected nodes from flatData, supports range selection.
+ */
+
+interface TreeGridSelectionModelConfig {
+    mode?: 'SINGLE' | 'SIMPLE' | 'MULTI';
+    deselectOnCollapse?: boolean;
+    pruneRemoved?: boolean;
+    checkboxSelect?: boolean;
+}
+declare class TreeGridSelectionModel {
+    private mode;
+    private selected;
+    private listeners;
+    readonly deselectOnCollapse: boolean;
+    readonly pruneRemoved: boolean;
+    readonly checkboxSelect: boolean;
+    private anchor;
+    constructor(config?: TreeGridSelectionModelConfig);
+    on(event: string, fn: Function): void;
+    un(event: string, fn: Function): void;
+    private fireEvent;
+    select(nodes: NodeInterface | NodeInterface[], keepExisting?: boolean, suppressEvent?: boolean): void;
+    deselect(nodes: NodeInterface | NodeInterface[], suppressEvent?: boolean): void;
+    deselectAll(suppressEvent?: boolean): void;
+    selectAll(flatData: NodeInterface[], suppressEvent?: boolean): void;
+    /**
+     * Selects a range of nodes between anchor and the given node (inclusive).
+     */
+    selectRange(flatData: NodeInterface[], toNode: NodeInterface, suppressEvent?: boolean): void;
+    isSelected(node: NodeInterface): boolean;
+    getSelection(): NodeInterface[];
+    getCount(): number;
+    getMode(): string;
+    setMode(mode: 'SINGLE' | 'SIMPLE' | 'MULTI'): void;
+    /**
+     * Removes a node from selection (for use when a node is removed from the store).
+     */
+    onNodeRemoved(node: NodeInterface): void;
+    /**
+     * If deselectOnCollapse=true, deselects descendants of collapsed node.
+     */
+    onNodeCollapsed(node: NodeInterface): void;
+    /**
+     * Selects all children of a node (direct or deep).
+     */
+    selectChildren(node: NodeInterface, deep?: boolean, keepExisting?: boolean, suppressEvent?: boolean): void;
+    deselectChildren(node: NodeInterface, deep?: boolean, suppressEvent?: boolean): void;
+}
+
+/**
+ * @framesquared/ui – TreeGrid
+ *
+ * Hybrid tree + grid component. Renders hierarchical data with multiple
+ * columns. The first column is a TreeGridColumn (tree chrome + value),
+ * subsequent columns display plain field values.
+ */
+
+interface TreeGridConfig extends PanelConfig {
+    store: TreeStore | TreeStoreConfig | object[] | NodeInterface;
+    rootVisible?: boolean;
+    displayField?: string;
+    useArrows?: boolean;
+    lines?: boolean;
+    singleExpand?: boolean;
+    animate?: boolean;
+    expandOnDblClick?: boolean;
+    folderSort?: boolean;
+    checkable?: boolean;
+    cascadeChecks?: boolean;
+    checkPropagation?: 'up' | 'down' | 'both' | 'none';
+    onlyLeafCheckable?: boolean;
+    columns?: (ColumnConfig | TreeGridColumnConfig)[];
+    treeColumn?: TreeGridColumnConfig | number;
+    enableDrag?: boolean;
+    enableDrop?: boolean;
+    ddGroup?: string;
+    selModel?: TreeGridSelectionModelConfig;
+    emptyText?: string;
+}
+declare class TreeGrid extends Panel {
+    static $className: string;
+    readonly isTreeGrid: boolean;
+    private _store;
+    private _columns;
+    private _treeColumn;
+    private _view;
+    private _selModel;
+    private _rootVisible;
+    private _displayField;
+    private _lines;
+    private _singleExpand;
+    private _checkable;
+    private _cascadeChecks;
+    private _checkPropagation;
+    private _onlyLeafCheckable;
+    private _animate;
+    private _expandOnDblClick;
+    private _folderSort;
+    constructor(config: TreeGridConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    private _normalizeStore;
+    private _normalizeColumns;
+    private _wireStoreEvents;
+    getStore(): TreeStore;
+    getRootNode(): NodeInterface;
+    setRootNode(rootOrData: NodeInterface | Record<string, unknown>): NodeInterface;
+    getNodeById(id: string | number): NodeInterface | null;
+    expandAll(callback?: () => void): void;
+    collapseAll(callback?: () => void): void;
+    expandNode(node: NodeInterface, deep?: boolean, callback?: (children: NodeInterface[]) => void): void;
+    collapseNode(node: NodeInterface, deep?: boolean, callback?: () => void): void;
+    toggleNode(node: NodeInterface): void;
+    isNodeExpanded(node: NodeInterface): boolean;
+    isNodeLoaded(node: NodeInterface): boolean;
+    expandPath(path: string, options?: {
+        separator?: string;
+        field?: string;
+        select?: boolean;
+    }): Promise<NodeInterface>;
+    selectPath(path: string, options?: {
+        separator?: string;
+        field?: string;
+    }): Promise<NodeInterface>;
+    getChecked(): NodeInterface[];
+    getCheckedLeaves(): NodeInterface[];
+    setChecked(node: NodeInterface, checked: boolean, suppressEvent?: boolean): void;
+    toggleChecked(node: NodeInterface): void;
+    checkAll(): void;
+    uncheckAll(): void;
+    private _updateAncestorChecks;
+    getSelection(): NodeInterface[];
+    select(nodes: NodeInterface | NodeInterface[] | number | number[], keepExisting?: boolean, suppressEvent?: boolean): void;
+    deselect(nodes: NodeInterface | NodeInterface[] | number | number[], suppressEvent?: boolean): void;
+    deselectAll(suppressEvent?: boolean): void;
+    selectAll(suppressEvent?: boolean): void;
+    private _updateSelectionVisuals;
+    scrollToNode(node: NodeInterface, options?: {
+        focus?: boolean;
+        select?: boolean;
+    }): Promise<void>;
+    ensureNodeVisible(node: NodeInterface): Promise<void>;
+    getView(): TreeGridView;
+    getTreeColumn(): TreeGridColumn;
+    getColumns(): (TreeGridColumn | Column)[];
+    getColumnByDataIndex(dataIndex: string): Column | undefined;
+    getNodeRow(node: NodeInterface): HTMLElement | null;
+    getNodeFromRow(rowEl: HTMLElement): NodeInterface | null;
+    getDepthIndent(depth: number): number;
+    reload(): Promise<NodeInterface[]>;
+    isRootVisible(): boolean;
+    isCheckable(): boolean;
+    getDisplayField(): string;
+    private _collapseSiblings;
+    protected fire(eventName: string, ...args: unknown[]): boolean;
+}
+
+/**
+ * @framesquared/ui – TreeGridDragDrop
+ *
+ * Drag-and-drop plugin for TreeGrid. Enables reparenting and reordering
+ * of tree nodes via pointer events.
+ */
+
+interface TreeGridDragDropConfig {
+    enableDrag?: boolean;
+    enableDrop?: boolean;
+    ddGroup?: string;
+    appendOnly?: boolean;
+    sortOnDrop?: boolean;
+    allowContainerDrops?: boolean;
+    expandDelay?: number;
+    allowParentInserts?: boolean;
+    displayField?: string;
+    dragText?: string;
+    copy?: boolean;
+    allowCopy?: boolean;
+    dropHighlightCls?: string;
+    dropIndicatorCls?: string;
+    nodeHighlightOnDrop?: boolean;
+    containerScrollOnDrag?: boolean;
+    containerScrollThreshold?: number;
+    containerScrollSpeed?: number;
+}
+declare class TreeGridDragDrop {
+    private treeGrid;
+    private config;
+    private dragging;
+    private dragData;
+    private ghostEl;
+    private dropIndicatorEl;
+    private highlightedRow;
+    private expandTimer;
+    private _pendingRecord;
+    private _captureTarget;
+    private _pointerId;
+    private _downX;
+    private _downY;
+    private readonly _threshold;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    constructor(config?: TreeGridDragDropConfig);
+    init(treeGrid: TreeGrid): void;
+    destroy(): void;
+    private _handlePointerDown;
+    private _handlePointerMove;
+    private _handlePointerUp;
+    private _executeDrop;
+    private _insertNode;
+    private _isValidDrop;
+    private _computeDropPosition;
+    private _createGhost;
+    private _clearDropIndicators;
+    private _showDropIndicator;
+    private _startExpandTimer;
+    private _cancelExpandTimer;
+    private _cleanup;
+    private _getRecordAtPoint;
+}
+
+/**
+ * @framesquared/ui – TreeGridCellEditing
+ *
+ * Tree-aware inline cell editing plugin for TreeGrid.
+ */
+
+interface TreeGridCellEditingConfig {
+    editableTreeColumn?: boolean;
+    addChildOnInsert?: boolean;
+    addSiblingOnEnter?: boolean;
+    clicksToEdit?: number;
+}
+declare class TreeGridCellEditing {
+    private treeGrid;
+    private config;
+    private activeEditor;
+    private editingRecord;
+    private editingField;
+    private _onClick;
+    private _onDblClick;
+    constructor(config?: TreeGridCellEditingConfig);
+    init(treeGrid: TreeGrid): void;
+    destroy(): void;
+    startEdit(record: NodeInterface, dataIndex: string): void;
+    completeEdit(): void;
+    cancelEdit(): void;
+    isEditing(): boolean;
+    private _createEditorElement;
+    private _getEditorValue;
+    private _currentEditorConfig;
+    private _removeEditor;
+    private _focusNextCell;
+    private _handleClick;
+    private _handleDblClick;
+    private _startEditFromEvent;
+}
+
+/**
+ * @framesquared/ui – TreeGridRowEditing
+ *
+ * Tree-aware row editing plugin for TreeGrid.
+ */
+
+interface TreeGridRowEditingConfig {
+    clicksToEdit?: number;
+    autoCancel?: boolean;
+    saveBtnText?: string;
+    cancelBtnText?: string;
+}
+declare class TreeGridRowEditing {
+    private treeGrid;
+    private config;
+    private editingRecord;
+    private editorRow;
+    private fieldMap;
+    private _onDblClick;
+    constructor(config?: TreeGridRowEditingConfig);
+    init(treeGrid: TreeGrid): void;
+    destroy(): void;
+    startEdit(record: NodeInterface): void;
+    completeEdit(): void;
+    cancelEdit(): void;
+    isEditing(): boolean;
+    private _removeEditorRow;
+    private _handleDblClick;
+}
+
+/**
+ * @framesquared/ui – TreeGridClipboard
+ *
+ * Copy/paste plugin for TreeGrid. Supports TSV copy with optional
+ * hierarchy indentation and paste as children/siblings.
+ */
+
+interface TreeGridClipboardConfig {
+    copyHierarchy?: boolean;
+    pasteAsChildren?: boolean;
+    pasteIndentLevel?: boolean;
+    indentCharacter?: string;
+    includeHeaders?: boolean;
+}
+declare class TreeGridClipboard {
+    private treeGrid;
+    private config;
+    private _onKeyDown;
+    constructor(config?: TreeGridClipboardConfig);
+    init(treeGrid: TreeGrid): void;
+    destroy(): void;
+    copyToClipboard(): string;
+    pasteFromText(text: string): void;
+    private _handleKeyDown;
+}
+
+/**
+ * @framesquared/ui – TreeGridSummary
+ *
+ * Feature that adds a summary row aggregating values across visible nodes.
+ */
+
+type SummaryType = 'sum' | 'count' | 'average' | 'min' | 'max' | 'none';
+interface SummaryColumnConfig {
+    dataIndex: string;
+    summaryType?: SummaryType;
+    summaryRenderer?: (value: number, count: number) => string;
+}
+interface TreeGridSummaryConfig {
+    position?: 'bottom' | 'top';
+    includeCollapsed?: boolean;
+    treeColumnSummaryText?: string;
+    summaryColumns?: SummaryColumnConfig[];
+}
+declare class TreeGridSummary {
+    private treeGrid;
+    private config;
+    private summaryRowEl;
+    constructor(config?: TreeGridSummaryConfig);
+    init(treeGrid: TreeGrid): void;
+    destroy(): void;
+    renderSummary(): void;
+    updateSummary(): void;
+    calculateSummary(dataIndex: string, summaryType: SummaryType): number;
+    private _getNodes;
+    private _buildSummaryRow;
+}
+
+/**
+ * @framesquared/ui – TreeGridGroupingSummary
+ *
+ * Feature adding per-parent summary rows after each expanded parent's last child.
+ */
+
+interface TreeGridGroupingSummaryConfig {
+    includeDescendants?: boolean;
+    summaryRowCls?: string;
+    showSummaryFor?: 'all' | 'nonleaf';
+    summaryColumns?: SummaryColumnConfig[];
+    treeColumnSummaryText?: string;
+}
+declare class TreeGridGroupingSummary {
+    private treeGrid;
+    private config;
+    constructor(config?: TreeGridGroupingSummaryConfig);
+    init(treeGrid: TreeGrid): void;
+    destroy(): void;
+    private _renderGroupSummaries;
+    private _findLastVisible;
+    private _buildGroupSummaryRow;
+    private _getChildNodes;
+    private _calculate;
+}
+
+/**
+ * @framesquared/ui – TreeGridRowExpander
+ *
+ * Plugin adding a detail-view expander column to each row.
+ * Independent from tree expand/collapse.
+ */
+
+interface TreeGridRowExpanderConfig {
+    rowBodyTpl?: string | ((node: NodeInterface) => string);
+    expandOnDblClick?: boolean;
+    singleRowExpand?: boolean;
+    bodyIndent?: boolean;
+}
+declare class TreeGridRowExpander {
+    private treeGrid;
+    private config;
+    private expandedRows;
+    private bodyRowMap;
+    private _onClick;
+    private _onDblClick;
+    constructor(config?: TreeGridRowExpanderConfig);
+    init(treeGrid: TreeGrid): void;
+    destroy(): void;
+    expandRow(record: NodeInterface): void;
+    collapseRow(record: NodeInterface): void;
+    toggleRow(record: NodeInterface): void;
+    isRowExpanded(record: NodeInterface): boolean;
+    private _insertBodyRow;
+    private _collapseById;
+    private _renderTpl;
+    private _handleClick;
+    private _handleDblClick;
+}
+
+/**
+ * @framesquared/ui – TreeGridFilterPlugin
+ *
+ * Column filter integration for TreeGrid with tree-aware filtering.
+ */
+
+interface TreeGridFilterPluginConfig {
+    filterer?: 'bottomup' | 'topdown';
+    showFilterRow?: boolean;
+    menuFilter?: boolean;
+}
+interface FilterValue {
+    dataIndex: string;
+    value: unknown;
+    operator?: 'eq' | 'lt' | 'gt' | 'contains' | 'gte' | 'lte';
+}
+declare class TreeGridFilterPlugin {
+    private treeGrid;
+    private config;
+    private activeFilters;
+    private filterRowEl;
+    constructor(config?: TreeGridFilterPluginConfig);
+    init(treeGrid: TreeGrid): void;
+    destroy(): void;
+    addFilter(filter: FilterValue): void;
+    removeFilter(dataIndex: string): void;
+    clearFilters(): void;
+    getActiveFilters(): FilterValue[];
+    getFilteredCount(): number;
+    private _applyFilters;
+    /** bottomup: a node is visible if it or any descendant matches */
+    private _applyBottomUp;
+    /** topdown: a node is visible only if it and all ancestors match */
+    private _applyTopDown;
+    private _matchesAllFilters;
+    private _matchesFilter;
+    private _showAllNodes;
+    private _getVisibleNodes;
+    private _renderFilterRow;
+}
+
+/**
+ * @framesquared/ui – TreeGridStateMixin
+ *
+ * State persistence for TreeGrid. Saves and restores column widths,
+ * expanded nodes, sort, checked state, scroll position, and filters.
+ */
+
+interface ColumnStateEntry {
+    id: string;
+    width?: number;
+    flex?: number;
+    hidden?: boolean;
+}
+interface TreeGridState {
+    columns?: ColumnStateEntry[];
+    columnOrder?: string[];
+    expandedNodes?: (string | number)[];
+    checkedNodes?: (string | number)[];
+    selectedNodes?: (string | number)[];
+    scrollPosition?: {
+        top: number;
+        left: number;
+    };
+    sorters?: {
+        property: string;
+        direction: 'ASC' | 'DESC';
+    }[];
+}
+declare class TreeGridStateMixin {
+    private treeGrid;
+    private stateId;
+    private saveDebounceTimer;
+    private readonly saveDebounceMs;
+    constructor(stateId: string | {
+        stateId: string;
+    });
+    init(treeGrid: TreeGrid): void;
+    destroy(): void;
+    getState(): TreeGridState;
+    applyState(state: TreeGridState): void;
+    saveState(): void;
+    loadState(): TreeGridState | null;
+    clearState(): void;
+    private _debouncedSave;
+    private _wireEvents;
+}
+
+/**
+ * @framesquared/ui – TreeGridLockable
+ *
+ * Mixin/plugin enabling locked (frozen) columns in a TreeGrid.
+ * Splits the grid into locked (left) and normal (right) panels.
+ */
+
+interface TreeGridLockableConfig {
+    syncScroll?: boolean;
+}
+declare class TreeGridLockable {
+    private treeGrid;
+    private config;
+    private lockedViewEl;
+    private normalViewEl;
+    private lockedView;
+    private normalView;
+    private _onLockedScroll;
+    private _onNormalScroll;
+    private _syncingScroll;
+    constructor(config?: TreeGridLockableConfig);
+    init(treeGrid: TreeGrid): void;
+    destroy(): void;
+    getLockedView(): TreeGridView | null;
+    getNormalView(): TreeGridView | null;
+    lockColumn(col: Column): void;
+    unlockColumn(col: Column): void;
+    private _rebuild;
+    private _syncScrollFromLocked;
+    private _syncScrollFromNormal;
+}
+
+/**
+ * @framesquared/ui – TreeGridExporter
+ *
+ * Exports TreeGrid data to CSV, JSON, TSV, and XLSX formats.
+ */
+
+interface ExportOptions {
+    includeHeaders?: boolean;
+    includeHidden?: boolean;
+    expandedOnly?: boolean;
+    allNodes?: boolean;
+    indentCharacter?: string;
+    indentMultiplier?: number;
+    columns?: string[];
+    filename?: string;
+}
+declare class TreeGridExporter {
+    constructor(_options?: ExportOptions);
+    /**
+     * Exports the TreeGrid to CSV format.
+     */
+    static exportToCsv(treeGrid: TreeGrid, options?: ExportOptions): string;
+    /**
+     * Exports the TreeGrid to TSV format.
+     */
+    static exportToTsv(treeGrid: TreeGrid, options?: ExportOptions): string;
+    /**
+     * Exports the TreeGrid to nested JSON preserving hierarchy.
+     */
+    static exportToJson(treeGrid: TreeGrid, options?: ExportOptions): string;
+    /**
+     * Exports the TreeGrid to XLSX format.
+     * Returns an ArrayBuffer with the XLSX bytes.
+     */
+    static exportToXlsx(treeGrid: TreeGrid, options?: ExportOptions): ArrayBuffer;
+    /**
+     * Triggers a browser download with the given content.
+     */
+    static download(content: string | ArrayBuffer, filename: string, mimeType: string): void;
+    private static _buildRows;
+    private static _getColumns;
+    private static _getNodes;
+}
+
+/**
+ * @framesquared/ui – TreeColumn
+ *
+ * Column definition / renderer for tree nodes.
+ */
+
+interface TreeColumnConfig {
+    dataIndex?: string;
+    indentSize?: number;
+    header?: string;
+    width?: number;
+}
+declare class TreeColumn {
+    dataIndex: string;
+    indentSize: number;
+    header: string;
+    width: number;
+    constructor(config?: TreeColumnConfig);
+    /**
+     * Renders the full cell content for a tree node.
+     */
+    renderCell(record: NodeInterface, checkable?: boolean): string;
+}
+
+/**
+ * @framesquared/ui – TreeView
+ *
+ * Renders the flat list of visible tree nodes in a <table>.
+ */
+
+interface TreeViewConfig {
+    store: TreeStore;
+    displayField?: string;
+    checkable?: boolean;
+    column?: TreeColumn;
+}
+declare class TreeView {
+    el: HTMLElement | null;
+    private tableEl;
+    private store;
+    private displayField;
+    private checkable;
+    private column;
+    private listeners;
+    constructor(config: TreeViewConfig);
+    on(event: string, fn: Function): void;
+    un(event: string, fn: Function): void;
+    private fireEvent;
+    render(container: HTMLElement): void;
+    refresh(): void;
+    private buildRow;
+    refreshNode(record: NodeInterface): void;
+    getNode(record: NodeInterface): HTMLElement | null;
+    getRecord(el: HTMLElement): NodeInterface | null;
+    focusNode(record: NodeInterface): void;
+    private getRowRecord;
+    private onViewClick;
+    private onViewDblClick;
+    private onViewContextMenu;
+    private onKeyDown;
+    markSelected(record: NodeInterface, selected: boolean): void;
+}
+
+/**
+ * @framesquared/ui – TreePanel
+ *
+ * Main tree component. Extends Panel and uses TreeView for rendering.
+ */
+
+interface TreePanelConfig extends PanelConfig {
+    store: TreeStore;
+    rootVisible?: boolean;
+    displayField?: string;
+    useArrows?: boolean;
+    lines?: boolean;
+    singleExpand?: boolean;
+    checkable?: boolean;
+    cascadeChecks?: boolean;
+}
+declare class TreePanel extends Panel {
+    static $className: string;
+    private _store;
+    private _treeView;
+    private _selModel;
+    private _rootVisible;
+    private _displayField;
+    private _useArrows;
+    private _lines;
+    private _singleExpand;
+    private _checkable;
+    private _cascadeChecks;
+    constructor(config: TreePanelConfig);
+    protected initialize(): void;
+    protected afterRender(): void;
+    getStore(): TreeStore;
+    getRootNode(): NodeInterface;
+    expandAll(): void;
+    collapseAll(): void;
+    expandNode(node: NodeInterface, deep?: boolean): void;
+    collapseNode(node: NodeInterface, deep?: boolean): void;
+    private _collapseAllExcept;
+    getSelection(): NodeInterface[];
+    select(nodes: NodeInterface | NodeInterface[]): void;
+    deselectAll(): void;
+    getChecked(): NodeInterface[];
+    getView(): TreeView;
+    scrollToNode(node: NodeInterface): void;
+    isRootVisible(): boolean;
+    isCheckable(): boolean;
+}
+
+/**
+ * @framesquared/ui – TreeSelectionModel
+ *
+ * Manages selection state for tree nodes, supporting single and multi-select modes.
+ */
+
+interface TreeSelectionModelConfig {
+    mode?: 'single' | 'multi' | 'simple';
+    pruneRemoved?: boolean;
+}
+declare class TreeSelectionModel {
+    private selected;
+    private mode;
+    private pruneRemoved;
+    private listeners;
+    constructor(config?: TreeSelectionModelConfig);
+    on(event: string, fn: Function): void;
+    un(event: string, fn: Function): void;
+    fireEvent(event: string, ...args: unknown[]): void;
+    select(records: NodeInterface | NodeInterface[], keepExisting?: boolean, suppressEvent?: boolean): void;
+    deselect(records: NodeInterface | NodeInterface[], suppressEvent?: boolean): void;
+    deselectAll(suppressEvent?: boolean): void;
+    isSelected(record: NodeInterface): boolean;
+    getSelection(): NodeInterface[];
+    getCount(): number;
+    selectNode(node: NodeInterface, keepExisting?: boolean, suppressEvent?: boolean): void;
+    deselectNode(node: NodeInterface, suppressEvent?: boolean): void;
+    isNodeSelected(node: NodeInterface): boolean;
+    pruneRemovedNodes(removedNodes: NodeInterface[]): void;
+}
+
+/**
+ * @framesquared/ui – CheckboxModel
+ *
+ * A selection model that adds checkbox-based check state management to tree nodes.
+ */
+
+interface CheckboxModelConfig {
+    cascadeChecks?: boolean;
+    onlyLeafCheckable?: boolean;
+}
+declare class CheckboxModel extends TreeSelectionModel {
+    private cascadeChecks;
+    private onlyLeafCheckable;
+    constructor(config?: CheckboxModelConfig);
+    toggleCheck(node: NodeInterface): void;
+    setChecked(node: NodeInterface, checked: boolean): void;
+    getChecked(store: TreeStore): NodeInterface[];
+    private updateParentCheck;
+    isCheckable(node: NodeInterface): boolean;
+}
+
+/**
+ * @framesquared/ui – TreeDragZone
+ *
+ * Drag source for tree nodes.
+ */
+
+interface DragData {
+    records: NodeInterface[];
+    sourceTree: TreePanelLike;
+    ddGroup: string;
+}
+/** Minimal interface TreeDragZone needs from TreePanel */
+interface TreePanelLike {
+    getView(): {
+        el: HTMLElement | null;
+    };
+    getSelection(): NodeInterface[];
+}
+declare class TreeDragZone {
+    private tree;
+    ddGroup: string;
+    private dragging;
+    private ghostEl;
+    dragData: DragData | null;
+    private startX;
+    private startY;
+    private dragThreshold;
+    private boundPointerDown;
+    private boundPointerMove;
+    private boundPointerUp;
+    constructor(tree: TreePanelLike, config?: {
+        ddGroup?: string;
+    });
+    private init;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private createGhost;
+    private removeGhost;
+    isDragging(): boolean;
+    destroy(): void;
+}
+
+/**
+ * @framesquared/ui – TreeDropZone
+ *
+ * Drop target for tree drag-and-drop.
+ */
+
+declare class TreeDropZone {
+    private tree;
+    ddGroup: string;
+    private appendOnly;
+    private indicatorEl;
+    private expandTimer;
+    expandDelay: number;
+    private boundDragOver;
+    private boundDrop;
+    constructor(tree: TreePanelLike & {
+        getStore(): {
+            insertBefore: Function;
+            appendChild: Function;
+        };
+    }, config?: {
+        ddGroup?: string;
+        appendOnly?: boolean;
+        sortOnDrop?: boolean;
+        expandDelay?: number;
+    });
+    private init;
+    getDropPosition(targetEl: HTMLElement, clientY: number): 'before' | 'after' | 'append';
+    executeDrop(dragData: DragData, targetNode: NodeInterface, position: 'before' | 'after' | 'append'): void;
+    private onDragOver;
+    private onDrop;
+    private clearExpandTimer;
+    private removeIndicator;
+    destroy(): void;
+}
+
+/**
+ * @framesquared/ui – TreeViewDragDrop
+ *
+ * Plugin that wires TreeDragZone and TreeDropZone onto a TreePanel.
+ */
+
+interface TreeViewDragDropConfig {
+    enableDrag?: boolean;
+    enableDrop?: boolean;
+    ddGroup?: string;
+    appendOnly?: boolean;
+    sortOnDrop?: boolean;
+    expandDelay?: number;
+    allowParentInserts?: boolean;
+}
+type FullTreePanel = TreePanelLike & {
+    getStore(): {
+        insertBefore: Function;
+        appendChild: Function;
+    };
+};
+declare class TreeViewDragDrop {
+    private config;
+    private dragZone;
+    private dropZone;
+    constructor(config?: TreeViewDragDropConfig);
+    init(tree: FullTreePanel): void;
+    getDragZone(): TreeDragZone | null;
+    getDropZone(): TreeDropZone | null;
+    destroy(): void;
+}
+
+/**
+ * @framesquared/ui – CellEditingPlugin
+ *
+ * Simple in-place cell editing plugin for tree nodes.
+ */
+
+interface CellEditingConfig {
+    clicksToEdit?: number;
+}
+/** Minimal interface CellEditingPlugin needs from TreePanel */
+interface CellEditingTreePanel {
+    on(event: string, fn: Function): void;
+    getView(): {
+        getNode(record: NodeInterface): HTMLElement | null;
+    };
+}
+declare class CellEditingPlugin {
+    private tree;
+    private config;
+    private activeEditor;
+    private editingNode;
+    private field;
+    constructor(config?: CellEditingConfig);
+    init(tree: CellEditingTreePanel): void;
+    startEdit(record: NodeInterface, fieldName?: string): void;
+    completeEdit(): void;
+    cancelEdit(): void;
+    private cleanupEditor;
+    isEditing(): boolean;
+    destroy(): void;
+}
+
+export { Accordion, type AccordionConfig, Breadcrumb, type BreadcrumbConfig, type BreadcrumbNode, type BreadcrumbStore, Button, type ButtonConfig, CardContainer, type CardContainerConfig, type CellEditingConfig, CellEditingPlugin, CheckItem, type CheckItemConfig, CheckboxModel, type CheckboxModelConfig, Column, type ColumnConfig, type ColumnStateEntry, CycleButton, type CycleButtonConfig, type CycleItem, DataView, type DataViewConfig, type DragData, type ElbowType, type ExportOptions, type FilterValue, type ListColumnConfig, ListView, type ListViewConfig, Menu, type MenuConfig, MenuItem, type MenuItemConfig, MenuManager, MenuSeparator, MessageBox, type MessageBoxConfig, PagingToolbar, type PagingToolbarConfig, Panel, type PanelConfig, QuickTip, SegmentedButton, type SegmentedButtonConfig, SplitButton, type SplitButtonConfig, type SummaryColumnConfig, type SummaryType, Tab, TabBar, type TabBarConfig, type TabConfig, TabPanel, type TabPanelConfig, type ToolConfig, Toolbar, type ToolbarConfig, ToolbarFill, ToolbarSeparator, ToolbarSpacer, ToolbarTextItem, Tooltip, type TooltipConfig, TreeColumn, type TreeColumnConfig, TreeDragZone, TreeDropZone, TreeGrid, TreeGridCellEditing, type TreeGridCellEditingConfig, TreeGridClipboard, type TreeGridClipboardConfig, TreeGridColumn, type TreeGridColumnConfig, type TreeGridConfig, TreeGridDragDrop, type TreeGridDragDropConfig, TreeGridExporter, TreeGridFilterPlugin, type TreeGridFilterPluginConfig, TreeGridGroupingSummary, type TreeGridGroupingSummaryConfig, TreeGridLockable, type TreeGridLockableConfig, TreeGridRowEditing, type TreeGridRowEditingConfig, TreeGridRowExpander, type TreeGridRowExpanderConfig, TreeGridSelectionModel, type TreeGridSelectionModelConfig, type TreeGridState, TreeGridStateMixin, TreeGridSummary, type TreeGridSummaryConfig, TreeGridView, type TreeGridViewConfig, TreePanel, type TreePanelConfig, type TreePanelLike, TreeSelectionModel, type TreeSelectionModelConfig, TreeView, type TreeViewConfig, TreeViewDragDrop, type TreeViewDragDropConfig, Viewport, type ViewportConfig, Window, type WindowConfig, ZIndexManager };