@toolbox-web/grid 0.2.5 → 0.2.7

package/all.d.ts

@@ -27,10 +27,29 @@ declare interface AggregationRowConfig {
     label?: string;
     /** Static or computed cell values keyed by field */
     cells?: Record<string, unknown | string | ((rows: unknown[], field: string, column?: ColumnConfig_2) => unknown)>;
-    /** Per-field aggregator override; string maps to registered aggregator key */
-    aggregators?: Record<string, AggregatorRef_3>;
+    /**
+     * Per-field aggregator configuration.
+     * Can be a simple string ('sum', 'avg', etc.), a function, or an object with aggFunc and formatter.
+     * @example
+     * aggregators: {
+     *   quantity: 'sum',  // simple built-in
+     *   price: { aggFunc: 'sum', formatter: (v) => `$${v.toFixed(2)}` }  // with formatter
+     * }
+     */
+    aggregators?: Record<string, AggregatorDefinition>;
 }
 
+/** Full aggregator config with optional formatter */
+declare interface AggregatorConfig {
+    /** The aggregator function or built-in key ('sum', 'avg', 'min', 'max', 'count', 'first', 'last') */
+    aggFunc: AggregatorRef_3;
+    /** Optional formatter to format the computed value for display */
+    formatter?: AggregatorFormatter;
+}
+
+/** Aggregator definition - simple string/function or full config object */
+declare type AggregatorDefinition = AggregatorRef_3 | AggregatorConfig;
+
 /**
  * Aggregators Core Registry
  *
@@ -59,6 +78,12 @@ export declare type AggregatorFn = (rows: any[], field: string, column?: any) =>
  */
 declare type AggregatorFn_2 = (rows: any[], field: string, column?: any) => any;
 
+/** Aggregator function signature */
+declare type AggregatorFn_3 = (rows: unknown[], field: string, column?: ColumnConfig_2) => unknown;
+
+/** Aggregator formatter function - formats the computed value for display */
+declare type AggregatorFormatter = (value: unknown, field: string, column?: ColumnConfig_2) => string;
+
 /** Map of field names to aggregator references */
 declare type AggregatorMap = Record<string, AggregatorRef_2>;
 
@@ -71,8 +96,8 @@ declare type AggregatorRef_2 = string | AggregatorFn_2;
 
 declare type AggregatorRef_2_2 = string | AggregatorFn;
 
-/** Aggregator reference - string key for built-in or custom function */
-declare type AggregatorRef_3 = string | ((rows: unknown[], field: string, column?: ColumnConfig_2) => unknown);
+/** Simple aggregator reference - string key for built-in or custom function */
+declare type AggregatorRef_3 = string | AggregatorFn_3;
 
 /**
  * The aggregator registry singleton.
@@ -105,6 +130,48 @@ export declare const aggregatorRegistry: {
     list(): string[];
 };
 
+/**
+ * Grid-wide animation configuration.
+ * Controls global animation behavior - individual plugins define their own animation styles.
+ * Duration and easing values set corresponding CSS variables on the grid element.
+ */
+export declare interface AnimationConfig {
+    /**
+     * Global animation mode.
+     * @default 'reduced-motion'
+     */
+    mode?: AnimationMode;
+    /**
+     * Default animation duration in milliseconds.
+     * Sets `--tbw-animation-duration` CSS variable.
+     * @default 200
+     */
+    duration?: number;
+    /**
+     * Default easing function.
+     * Sets `--tbw-animation-easing` CSS variable.
+     * @default 'ease-out'
+     */
+    easing?: string;
+}
+
+/**
+ * Animation behavior mode.
+ * - `true` or `'on'`: Animations always enabled
+ * - `false` or `'off'`: Animations always disabled
+ * - `'reduced-motion'`: Respects `prefers-reduced-motion` media query (default)
+ */
+export declare type AnimationMode = boolean | 'on' | 'off' | 'reduced-motion';
+
+/**
+ * Animation style for visual transitions.
+ * - `'slide'`: Slide/transform animation (e.g., expand down, slide left/right)
+ * - `'fade'`: Opacity fade animation
+ * - `'flip'`: FLIP technique for position changes (First, Last, Invert, Play)
+ * - `false`: No animation for this specific feature
+ */
+export declare type AnimationStyle = 'slide' | 'fade' | 'flip' | false;
+
 /**
  * Base contract for a column. Public; kept intentionally lean so host apps can extend via intersection types.
  * Prefer adding optional properties here only when broadly useful to most grids.
@@ -169,7 +236,7 @@ export declare abstract class BaseGridPlugin<TConfig = unknown> implements GridP
     /** Plugin configuration - merged with defaults in attach() */
     protected config: TConfig;
     /** User-provided configuration from constructor */
-    private readonly userConfig;
+    protected readonly userConfig: Partial<TConfig>;
     /**
      * Default configuration - subclasses should override this getter.
      * Note: This must be a getter (not property initializer) for proper inheritance
@@ -764,7 +831,7 @@ declare abstract class BaseGridPlugin_2<TConfig = unknown> implements GridPlugin
     /** Plugin configuration - merged with defaults in attach() */
     protected config: TConfig;
     /** User-provided configuration from constructor */
-    private readonly userConfig;
+    protected readonly userConfig: Partial<TConfig>;
     /**
      * Default configuration - subclasses should override this getter.
      * Note: This must be a getter (not property initializer) for proper inheritance
@@ -1336,6 +1403,12 @@ declare abstract class BaseGridPlugin_2<TConfig = unknown> implements GridPlugin
     getHeaderContent?(): HeaderContentDefinition_2 | undefined;
 }
 
+/**
+ * Built-in sort implementation using column comparator or default.
+ * This is the default sortHandler when none is configured.
+ */
+export declare function builtInSort<T>(rows: T[], sortState: SortState, columns: ColumnConfig<T>[]): T[];
+
 /**
  * Cell click event
  */
@@ -2095,6 +2168,11 @@ export declare class DataGridElement<T = any> extends HTMLElement implements Int
      * Returns true if any plugin handled the event.
      */
     _dispatchCellClick(event: MouseEvent, rowIndex: number, colIndex: number, cellEl: HTMLElement): boolean;
+    /**
+     * Dispatch a row click event to the plugin system.
+     * Returns true if any plugin handled the event.
+     */
+    _dispatchRowClick(event: MouseEvent, rowIndex: number, row: any, rowEl: HTMLElement): boolean;
     /**
      * Dispatch a header click event to the plugin system.
      * Returns true if any plugin handled the event.
@@ -2261,12 +2339,21 @@ declare interface DataRowModelItem {
     rowIndex: number;
 }
 
+/** Default animation configuration */
+export declare const DEFAULT_ANIMATION_CONFIG: Required<Omit<AnimationConfig, 'sort'>>;
+
 /** Default icons used when not overridden */
 export declare const DEFAULT_GRID_ICONS: Required<GridIcons>;
 
 /** Default icons used when not overridden */
 declare const DEFAULT_GRID_ICONS_2: Required<GridIcons_2>;
 
+/**
+ * Default comparator for sorting values.
+ * Handles nulls (pushed to end), numbers, and string fallback.
+ */
+export declare function defaultComparator(a: unknown, b: unknown): number;
+
 export declare type DGEventName = (typeof DGEvents)[keyof typeof DGEvents];
 
 export declare const DGEvents: {
@@ -2322,6 +2409,42 @@ declare interface EditorExecContext<T = any> extends CellContext<T> {
     cancel: () => void;
 }
 
+/** Animation style for expand/collapse */
+declare type ExpandCollapseAnimation = false | 'slide' | 'fade';
+
+/**
+ * Master/Detail Plugin Types
+ *
+ * Type definitions for expandable detail rows showing additional content.
+ */
+/** Animation style for expand/collapse */
+declare type ExpandCollapseAnimation_2 = false | 'slide' | 'fade';
+
+/** Animation style for expand/collapse */
+declare type ExpandCollapseAnimation_2_2 = false | 'slide' | 'fade';
+
+/** Animation style for expand/collapse */
+declare type ExpandCollapseAnimation_3 = false | 'slide' | 'fade';
+
+/** Animation style for expand/collapse */
+declare type ExpandCollapseAnimation_3_2 = false | 'slide' | 'fade';
+
+/**
+ * Tree Data Plugin Types
+ *
+ * Type definitions for hierarchical tree data with expand/collapse functionality.
+ */
+/** Animation style for expand/collapse */
+declare type ExpandCollapseAnimation_4 = false | 'slide' | 'fade';
+
+/**
+ * Tree Data Plugin Types
+ *
+ * Type definitions for hierarchical tree data with expand/collapse functionality.
+ */
+/** Animation style for expand/collapse */
+declare type ExpandCollapseAnimation_5 = false | 'slide' | 'fade';
+
 /** Configuration options for the export plugin */
 declare interface ExportConfig {
     /** Default file name for exports (default: 'export') */
@@ -2462,7 +2585,7 @@ export declare interface ExternalMountViewDetail<TRow = unknown> {
 }
 
 /** Configuration options for the filtering plugin */
-export declare interface FilterConfig {
+export declare interface FilterConfig<TRow = unknown> {
     /** Debounce delay in ms for filter input (default: 300) */
     debounceMs?: number;
     /** Whether text filtering is case sensitive (default: false) */
@@ -2473,10 +2596,25 @@ export declare interface FilterConfig {
     useWorker?: boolean;
     /** Custom filter panel renderer (replaces default panel content) */
     filterPanelRenderer?: FilterPanelRenderer_2;
+    /**
+     * Async handler for fetching unique values from a server.
+     * When provided, this is called instead of extracting values from local rows.
+     * Useful for server-side datasets where not all data is loaded.
+     */
+    valuesHandler?: FilterValuesHandler;
+    /**
+     * Async handler for applying filters on a server.
+     * When provided, filtering is delegated to the server instead of local filtering.
+     * Should return the filtered rows from the server.
+     *
+     * Note: When using filterHandler, processRows() becomes a passthrough
+     * and the returned rows replace the grid's data.
+     */
+    filterHandler?: FilterHandler<TRow>;
 }
 
 /** Configuration options for the filtering plugin */
-declare interface FilterConfig_2 {
+declare interface FilterConfig_2<TRow = unknown> {
     /** Debounce delay in ms for filter input (default: 300) */
     debounceMs?: number;
     /** Whether text filtering is case sensitive (default: false) */
@@ -2487,8 +2625,69 @@ declare interface FilterConfig_2 {
     useWorker?: boolean;
     /** Custom filter panel renderer (replaces default panel content) */
     filterPanelRenderer?: FilterPanelRenderer;
+    /**
+     * Async handler for fetching unique values from a server.
+     * When provided, this is called instead of extracting values from local rows.
+     * Useful for server-side datasets where not all data is loaded.
+     */
+    valuesHandler?: FilterValuesHandler_2;
+    /**
+     * Async handler for applying filters on a server.
+     * When provided, filtering is delegated to the server instead of local filtering.
+     * Should return the filtered rows from the server.
+     *
+     * Note: When using filterHandler, processRows() becomes a passthrough
+     * and the returned rows replace the grid's data.
+     */
+    filterHandler?: FilterHandler_2<TRow>;
 }
 
+/**
+ * Async handler for applying filters on a server.
+ *
+ * For server-side filtering, this handler is called when filters change.
+ * It should fetch filtered data from the server and return the new rows.
+ * The plugin will replace the grid's rows with the returned data.
+ *
+ * @param filters - Current active filter models
+ * @param currentRows - Current row array (for reference/optimistic updates)
+ * @returns Promise resolving to filtered rows
+ *
+ * @example
+ * ```ts
+ * filterHandler: async (filters) => {
+ *   const params = new URLSearchParams();
+ *   filters.forEach(f => params.append(f.field, `${f.operator}:${f.value}`));
+ *   const response = await fetch(`/api/data?${params}`);
+ *   return response.json();
+ * }
+ * ```
+ */
+export declare type FilterHandler<TRow = unknown> = (filters: FilterModel[], currentRows: TRow[]) => TRow[] | Promise<TRow[]>;
+
+/**
+ * Async handler for applying filters on a server.
+ *
+ * For server-side filtering, this handler is called when filters change.
+ * It should fetch filtered data from the server and return the new rows.
+ * The plugin will replace the grid's rows with the returned data.
+ *
+ * @param filters - Current active filter models
+ * @param currentRows - Current row array (for reference/optimistic updates)
+ * @returns Promise resolving to filtered rows
+ *
+ * @example
+ * ```ts
+ * filterHandler: async (filters) => {
+ *   const params = new URLSearchParams();
+ *   filters.forEach(f => params.append(f.field, `${f.operator}:${f.value}`));
+ *   const response = await fetch(`/api/data?${params}`);
+ *   return response.json();
+ * }
+ * ```
+ */
+declare type FilterHandler_2<TRow = unknown> = (filters: FilterModel_2[], currentRows: TRow[]) => TRow[] | Promise<TRow[]>;
+
 /**
  * Filtering Plugin for tbw-grid
  *
@@ -2571,6 +2770,14 @@ export declare class FilteringPlugin extends BaseGridPlugin_2<FilterConfig_2> {
      * Toggle the filter panel for a field
      */
     private toggleFilterPanel;
+    /**
+     * Render filter panel content with given values
+     */
+    private renderPanelContent;
+    /**
+     * Setup click-outside handler to close the panel
+     */
+    private setupPanelCloseHandler;
     /**
      * Close the filter panel
      */
@@ -2591,6 +2798,10 @@ export declare class FilteringPlugin extends BaseGridPlugin_2<FilterConfig_2> {
      * Apply a text filter
      */
     private applyTextFilter;
+    /**
+     * Internal method to apply filters (sync or async based on config)
+     */
+    private applyFiltersInternal;
     /**
      * Return filter state for a column if it has an active filter.
      */
@@ -2692,6 +2903,48 @@ export declare type FilterType = 'text' | 'number' | 'date' | 'set' | 'boolean';
 /** Supported filter types */
 declare type FilterType_2 = 'text' | 'number' | 'date' | 'set' | 'boolean';
 
+/**
+ * Async handler for fetching unique filter values from a server.
+ *
+ * For server-side datasets where not all values are available locally,
+ * this handler is called when the filter panel opens to fetch all
+ * possible values for the column.
+ *
+ * @param field - The field/column name
+ * @param column - The column configuration
+ * @returns Promise resolving to array of unique values
+ *
+ * @example
+ * ```ts
+ * valuesHandler: async (field, column) => {
+ *   const response = await fetch(`/api/distinct/${field}`);
+ *   return response.json(); // ['Engineering', 'Marketing', 'Sales', ...]
+ * }
+ * ```
+ */
+export declare type FilterValuesHandler = (field: string, column: ColumnConfig) => Promise<unknown[]>;
+
+/**
+ * Async handler for fetching unique filter values from a server.
+ *
+ * For server-side datasets where not all values are available locally,
+ * this handler is called when the filter panel opens to fetch all
+ * possible values for the column.
+ *
+ * @param field - The field/column name
+ * @param column - The column configuration
+ * @returns Promise resolving to array of unique values
+ *
+ * @example
+ * ```ts
+ * valuesHandler: async (field, column) => {
+ *   const response = await fetch(`/api/distinct/${field}`);
+ *   return response.json(); // ['Engineering', 'Marketing', 'Sales', ...]
+ * }
+ * ```
+ */
+declare type FilterValuesHandler_2 = (field: string, column: ColumnConfig_2) => Promise<unknown[]>;
+
 export declare type FitMode = (typeof FitModeEnum)[keyof typeof FitModeEnum];
 
 export declare const FitModeEnum: {
@@ -2901,6 +3154,41 @@ export declare interface GridConfig<TRow = any> {
      * Plugins will use these by default but can override with their own config.
      */
     icons?: GridIcons;
+    /**
+     * Grid-wide animation configuration.
+     * Controls animations for expand/collapse, reordering, and other visual transitions.
+     * Individual plugins can override these defaults in their own config.
+     */
+    animation?: AnimationConfig;
+    /**
+     * Custom sort handler for full control over sorting behavior.
+     *
+     * When provided, this handler is called instead of the built-in sorting logic.
+     * Enables custom sorting algorithms, server-side sorting, or plugin-specific sorting.
+     *
+     * The handler receives:
+     * - `rows`: Current row array to sort
+     * - `sortState`: Sort field and direction (1 = asc, -1 = desc)
+     * - `columns`: Column configurations (for accessing sortComparator)
+     *
+     * Return the sorted array (sync) or a Promise that resolves to the sorted array (async).
+     * For server-side sorting, return a Promise that resolves when data is fetched.
+     *
+     * @example
+     * ```ts
+     * // Custom stable sort
+     * sortHandler: (rows, state, cols) => {
+     *   return stableSort(rows, (a, b) => compare(a[state.field], b[state.field]) * state.direction);
+     * }
+     *
+     * // Server-side sorting
+     * sortHandler: async (rows, state) => {
+     *   const response = await fetch(`/api/data?sort=${state.field}&dir=${state.direction}`);
+     *   return response.json();
+     * }
+     * ```
+     */
+    sortHandler?: SortHandler<TRow>;
 }
 
 export declare type GridCSSVar = (typeof GridCSSVars)[keyof typeof GridCSSVars];
@@ -2949,10 +3237,8 @@ export declare interface GridElement {
     rows: any[];
     columns: ColumnConfig[];
     gridConfig: any;
-    /** Current focused row index */
-    focusRow: number;
-    /** Current focused column index */
-    focusCol: number;
+    /* Excluded from this release type: _focusRow */
+    /* Excluded from this release type: _focusCol */
     /** AbortSignal that is aborted when the grid disconnects from the DOM */
     disconnectSignal: AbortSignal;
     requestRender(): void;
@@ -2968,10 +3254,8 @@ declare interface GridElement_2 {
     rows: any[];
     columns: ColumnConfig_2[];
     gridConfig: any;
-    /** Current focused row index */
-    focusRow: number;
-    /** Current focused column index */
-    focusCol: number;
+    /* Excluded from this release type: _focusRow */
+    /* Excluded from this release type: _focusCol */
     /** AbortSignal that is aborted when the grid disconnects from the DOM */
     disconnectSignal: AbortSignal;
     requestRender(): void;
@@ -3167,6 +3451,14 @@ export declare interface GroupingRowsConfig {
     formatLabel?: (value: any, depth: number, key: string) => string;
     /** Whether to render group row as full-width spanning cell (default: true) */
     fullWidth?: boolean;
+    /**
+     * Animation style for expanding/collapsing groups.
+     * - `false`: No animation
+     * - `'slide'`: Slide animation (default)
+     * - `'fade'`: Fade animation
+     * @default 'slide'
+     */
+    animation?: ExpandCollapseAnimation_3_2;
 }
 
 /** Configuration options for the row grouping plugin */
@@ -3190,6 +3482,14 @@ declare interface GroupingRowsConfig_2 {
     formatLabel?: (value: any, depth: number, key: string) => string;
     /** Whether to render group row as full-width spanning cell (default: true) */
     fullWidth?: boolean;
+    /**
+     * Animation style for expanding/collapsing groups.
+     * - `false`: No animation
+     * - `'slide'`: Slide animation (default)
+     * - `'fade'`: Fade animation
+     * @default 'slide'
+     */
+    animation?: ExpandCollapseAnimation;
 }
 
 /**
@@ -3212,6 +3512,9 @@ export declare class GroupingRowsPlugin extends BaseGridPlugin_2<GroupingRowsCon
     private expandedKeys;
     private flattenedRows;
     private isActive;
+    private previousVisibleKeys;
+    private keysToAnimate;
+    private get animationStyle();
     detach(): void;
     /**
      * Auto-detect grouping configuration from grid config.
@@ -3462,6 +3765,8 @@ declare interface InternalGrid<T = any> extends PublicGrid<T>, GridConfig<T> {
     commitActiveRowEdit?: () => void;
     /** Dispatch cell click to plugin system, returns true if handled */
     _dispatchCellClick?: (event: MouseEvent, rowIndex: number, colIndex: number, cellEl: HTMLElement) => boolean;
+    /** Dispatch row click to plugin system, returns true if handled */
+    _dispatchRowClick?: (event: MouseEvent, rowIndex: number, row: any, rowEl: HTMLElement) => boolean;
     /** Dispatch header click to plugin system, returns true if handled */
     _dispatchHeaderClick?: (event: MouseEvent, colIndex: number, headerEl: HTMLElement) => boolean;
     /** Dispatch keydown to plugin system, returns true if handled */
@@ -3490,11 +3795,6 @@ export declare interface KeyboardModifiers {
 
 export declare const listAggregators: () => string[];
 
-/**
- * Master/Detail Plugin Types
- *
- * Type definitions for expandable detail rows showing additional content.
- */
 /** Configuration options for the master-detail plugin */
 declare interface MasterDetailConfig {
     /** Renderer function that returns detail content for a row */
@@ -3507,6 +3807,14 @@ declare interface MasterDetailConfig {
     collapseOnClickOutside?: boolean;
     /** Show expand/collapse column (default: true) */
     showExpandColumn?: boolean;
+    /**
+     * Animation style for expanding/collapsing detail rows.
+     * - `false`: No animation
+     * - `'slide'`: Slide down/up animation (default)
+     * - `'fade'`: Fade in/out animation
+     * @default 'slide'
+     */
+    animation?: ExpandCollapseAnimation_2;
 }
 
 /**
@@ -3526,6 +3834,27 @@ export declare class MasterDetailPlugin extends BaseGridPlugin_2<MasterDetailCon
     readonly name = "masterDetail";
     readonly version = "1.0.0";
     protected get defaultConfig(): Partial<MasterDetailConfig>;
+    /**
+     * Check if animations are enabled at the grid level.
+     * Respects gridConfig.animation.mode and CSS variable.
+     */
+    private get isAnimationEnabled();
+    /**
+     * Get expand/collapse animation style from plugin config.
+     */
+    private get animationStyle();
+    /**
+     * Get animation duration from CSS variable (set by grid).
+     */
+    private get animationDuration();
+    /**
+     * Apply expand animation to a detail element.
+     */
+    private animateExpand;
+    /**
+     * Apply collapse animation to a detail element and remove after animation.
+     */
+    private animateCollapse;
     private expandedRows;
     private detailElements;
     detach(): void;
@@ -3876,6 +4205,16 @@ export declare interface PivotConfig {
     defaultExpanded?: boolean;
     /** Indent width per depth level in pixels (default: 20) */
     indentWidth?: number;
+    /** Whether to show the pivot configuration tool panel (default: true) */
+    showToolPanel?: boolean;
+    /**
+     * Animation style for expanding/collapsing groups.
+     * - `false`: No animation
+     * - `'slide'`: Slide animation (default)
+     * - `'fade'`: Fade animation
+     * @default 'slide'
+     */
+    animation?: ExpandCollapseAnimation_2_2;
 }
 
 declare interface PivotConfig_2 {
@@ -3890,6 +4229,16 @@ declare interface PivotConfig_2 {
     defaultExpanded?: boolean;
     /** Indent width per depth level in pixels (default: 20) */
     indentWidth?: number;
+    /** Whether to show the pivot configuration tool panel (default: true) */
+    showToolPanel?: boolean;
+    /**
+     * Animation style for expanding/collapsing groups.
+     * - `false`: No animation
+     * - `'slide'`: Slide animation (default)
+     * - `'fade'`: Fade animation
+     * @default 'slide'
+     */
+    animation?: ExpandCollapseAnimation_3;
 }
 
 declare type PivotDataRow = Record<string, unknown>;
@@ -3921,10 +4270,16 @@ export declare class PivotPlugin extends BaseGridPlugin_2<PivotConfig_2> {
     private originalColumns;
     private panelContainer;
     private grandTotalFooter;
+    private previousVisibleKeys;
+    private keysToAnimate;
     /**
      * Check if the plugin has valid pivot configuration (at least value fields).
      */
     private hasValidPivotConfig;
+    /**
+     * Get animation style respecting grid-level animation mode.
+     */
+    private get animationStyle();
     detach(): void;
     getToolPanel(): ToolPanelDefinition_2 | undefined;
     processRows(rows: readonly unknown[]): PivotDataRow[];
@@ -4401,12 +4756,30 @@ declare type RenderRow = GroupRowModelItem | DataRowModelItem;
  *
  * Type definitions for the column reordering feature.
  */
+/** Animation type for column reordering */
+declare type ReorderAnimation = false | 'flip' | 'fade';
+
 /** Configuration options for the reorder plugin */
 declare interface ReorderConfig {
-    /** Whether to animate column movement (default: true) */
-    animation?: boolean;
-    /** Animation duration in milliseconds (default: 200) */
+    /**
+     * Animation type for column movement.
+     * - `false`: No animation, instant reorder
+     * - `'flip'`: FLIP animation (slides columns smoothly)
+     * - `'fade'`: View Transitions API (cross-fade effect)
+     * @default 'flip'
+     */
+    animation?: ReorderAnimation;
+    /**
+     * Animation duration in milliseconds.
+     * Applies to FLIP animation. View Transitions use browser defaults.
+     * @default 200
+     */
     animationDuration?: number;
+    /**
+     * @deprecated Use `animation` instead. Will be removed in next major version.
+     * Use View Transitions API for smooth column movement.
+     */
+    viewTransition?: boolean;
 }
 
 /**
@@ -4414,17 +4787,27 @@ declare interface ReorderConfig {
  *
  * @example
  * ```ts
- * new ReorderPlugin({
- *   enabled: true,
- *   animation: true,
- *   animationDuration: 200,
- * })
+ * new ReorderPlugin()
  * ```
  */
 export declare class ReorderPlugin extends BaseGridPlugin_2<ReorderConfig> {
     readonly name = "reorder";
     readonly version = "1.0.0";
     protected get defaultConfig(): Partial<ReorderConfig>;
+    /**
+     * Resolve animation type from plugin config.
+     * Respects grid-level animation.mode (disabled = no animation).
+     */
+    private get animationType();
+    /**
+     * Check if animations are enabled at the grid level.
+     * Respects gridConfig.animation.mode and CSS variable.
+     */
+    private get isAnimationEnabled();
+    /**
+     * Get animation duration from CSS variable (set by grid config).
+     */
+    private get animationDuration();
     private isDragging;
     private draggedField;
     private draggedIndex;
@@ -4432,6 +4815,10 @@ export declare class ReorderPlugin extends BaseGridPlugin_2<ReorderConfig> {
     attach(grid: GridElement_2): void;
     detach(): void;
     afterRender(): void;
+    /**
+     * Handle Alt+Arrow keyboard shortcuts for column reordering.
+     */
+    onKeyDown(event: KeyboardEvent): boolean | void;
     /**
      * Get the current column order from the grid.
      * @returns Array of field names in display order
@@ -4452,6 +4839,25 @@ export declare class ReorderPlugin extends BaseGridPlugin_2<ReorderConfig> {
      * Reset column order to the original configuration order.
      */
     resetColumnOrder(): void;
+    /**
+     * Capture header cell positions before reorder.
+     */
+    private captureHeaderPositions;
+    /**
+     * Apply FLIP animation for column reorder.
+     * Uses CSS transitions - JS sets initial transform and toggles class.
+     * @param oldPositions - Header positions captured before DOM change
+     */
+    private animateFLIP;
+    /**
+     * Apply crossfade animation for moved columns.
+     * Uses CSS keyframes - JS just toggles classes.
+     */
+    private animateFade;
+    /**
+     * Update column order with configured animation.
+     */
+    private updateColumnOrder;
     readonly styles: string;
 }
 
@@ -4623,6 +5029,8 @@ export declare class SelectionPlugin extends BaseGridPlugin_2<SelectionConfig_2>
     private activeRange;
     private cellAnchor;
     private isDragging;
+    /** Pending keyboard navigation update (processed in afterRender) */
+    private pendingKeyboardUpdate;
     /** Cell selection state (cell mode) */
     private selectedCell;
     detach(): void;
@@ -4770,6 +5178,16 @@ export declare interface SortChangeDetail {
     direction: 1 | -1 | 0;
 }
 
+/**
+ * Custom sort handler function signature.
+ *
+ * @param rows - Current row array to sort
+ * @param sortState - Sort field and direction
+ * @param columns - Column configurations (for accessing sortComparator)
+ * @returns Sorted array (sync) or Promise resolving to sorted array (async)
+ */
+export declare type SortHandler<TRow = any> = (rows: TRow[], sortState: SortState, columns: ColumnConfig<TRow>[]) => TRow[] | Promise<TRow[]>;
+
 /**
  * Multi-Sort Plugin Types
  *
@@ -4796,6 +5214,16 @@ declare interface SortModel_2 {
     direction: 'asc' | 'desc';
 }
 
+/**
+ * Sort state passed to custom sort handlers.
+ */
+export declare interface SortState {
+    /** Field to sort by */
+    field: string;
+    /** Sort direction: 1 = ascending, -1 = descending */
+    direction: 1 | -1;
+}
+
 /**
  * Toolbar button defined via config (programmatic approach).
  * Supports three modes:
@@ -4896,11 +5324,6 @@ declare interface ToolPanelDefinition_2 {
     order?: number;
 }
 
-/**
- * Tree Data Plugin Types
- *
- * Type definitions for hierarchical tree data with expand/collapse functionality.
- */
 /** Configuration options for the tree plugin */
 export declare interface TreeConfig {
     /** Field name containing child rows (default: 'children') */
@@ -4913,13 +5336,16 @@ export declare interface TreeConfig {
     indentWidth?: number;
     /** Show expand/collapse icons (default: true) */
     showExpandIcons?: boolean;
+    /**
+     * Animation style for expanding/collapsing tree nodes.
+     * - `false`: No animation
+     * - `'slide'`: Slide animation (default)
+     * - `'fade'`: Fade animation
+     * @default 'slide'
+     */
+    animation?: ExpandCollapseAnimation_5;
 }
 
-/**
- * Tree Data Plugin Types
- *
- * Type definitions for hierarchical tree data with expand/collapse functionality.
- */
 /** Configuration options for the tree plugin */
 declare interface TreeConfig_2 {
     /** Field name containing child rows (default: 'children') */
@@ -4932,6 +5358,14 @@ declare interface TreeConfig_2 {
     indentWidth?: number;
     /** Show expand/collapse icons (default: true) */
     showExpandIcons?: boolean;
+    /**
+     * Animation style for expanding/collapsing tree nodes.
+     * - `false`: No animation
+     * - `'slide'`: Slide animation (default)
+     * - `'fade'`: Fade animation
+     * @default 'slide'
+     */
+    animation?: ExpandCollapseAnimation_4;
 }
 
 /** Event detail emitted when a tree node is expanded or collapsed */
@@ -4949,8 +5383,6 @@ export declare interface TreeExpandDetail {
 /**
  * Tree Data Plugin for tbw-grid
  *
- * Provides hierarchical tree data display with expand/collapse functionality.
- *
  * @example
  * ```ts
  * new TreePlugin({ defaultExpanded: true, indentWidth: 24 })
@@ -4959,65 +5391,39 @@ export declare interface TreeExpandDetail {
 export declare class TreePlugin extends BaseGridPlugin_2<TreeConfig_2> {
     readonly name = "tree";
     readonly version = "1.0.0";
+    readonly styles: string;
     protected get defaultConfig(): Partial<TreeConfig_2>;
-    /** Set of expanded row keys */
     private expandedKeys;
-    /** Whether initial expansion (based on defaultExpanded config) has been applied */
     private initialExpansionDone;
-    /** Flattened tree rows for rendering */
     private flattenedRows;
-    /** Map from key to flattened row for quick lookup */
     private rowKeyMap;
+    private previousVisibleKeys;
+    private keysToAnimate;
+    private sortState;
     detach(): void;
-    /**
-     * Detects if tree functionality should be enabled based on data structure.
-     * Called by the grid during plugin initialization.
-     */
+    private get animationStyle();
     detect(rows: readonly unknown[]): boolean;
     processRows(rows: readonly unknown[]): any[];
+    /** Assign stable keys to rows (preserves key across sort operations) */
+    private withStableKeys;
+    /** Flatten tree using stable keys */
+    private flattenTree;
+    /** Sort tree recursively, keeping children with parents */
+    private sortTree;
     processColumns(columns: readonly ColumnConfig_2[]): ColumnConfig_2[];
     onCellClick(event: CellClickEvent_2): boolean;
-    /**
-     * Expand a specific node by key.
-     */
+    onHeaderClick(event: HeaderClickEvent_2): boolean;
+    afterRender(): void;
     expand(key: string): void;
-    /**
-     * Collapse a specific node by key.
-     */
     collapse(key: string): void;
-    /**
-     * Toggle the expansion state of a node.
-     */
     toggle(key: string): void;
-    /**
-     * Expand all nodes in the tree.
-     */
     expandAll(): void;
-    /**
-     * Collapse all nodes in the tree.
-     */
     collapseAll(): void;
-    /**
-     * Check if a node is currently expanded.
-     */
     isExpanded(key: string): boolean;
-    /**
-     * Get all currently expanded keys.
-     */
     getExpandedKeys(): string[];
-    /**
-     * Get the flattened tree rows with metadata.
-     */
     getFlattenedRows(): FlattenedTreeRow[];
-    /**
-     * Get a row's original data by its key.
-     */
     getRowByKey(key: string): any | undefined;
-    /**
-     * Expand all ancestors of a node to make it visible.
-     */
     expandToKey(key: string): void;
-    readonly styles: string;
 }
 
 /**