@smartnet360/svelte-grid 0.1.0

package/dist/state/gridState.svelte.js

@@ -0,0 +1,1025 @@
+/**
+ * Grid State Factory
+ *
+ * Creates reactive state for the grid using Svelte 5 runes.
+ * This is the central state management for all grid operations.
+ */
+const GRID_CONTEXT_KEY = Symbol('svelte-grid');
+export { GRID_CONTEXT_KEY };
+/**
+ * Grid state class using Svelte 5 runes
+ * Manages all reactive state for a grid instance
+ */
+export class GridStateManager {
+    // ============================================
+    // Core Reactive State
+    // ============================================
+    /** Raw data array */
+    rawData = $state([]);
+    /** Column definitions */
+    columns = $state([]);
+    /** Scroll position */
+    scrollTop = $state(0);
+    scrollLeft = $state(0);
+    /** Container dimensions */
+    containerHeight = $state(0);
+    containerWidth = $state(0);
+    /** Row height for virtual scrolling */
+    rowHeight = $state(40);
+    /** Grid options */
+    options = $state({});
+    // ============================================
+    // Sorting State
+    // ============================================
+    /** Current sort configuration (supports multi-sort) */
+    sortConfigs = $state([]);
+    // ============================================
+    // Filtering State
+    // ============================================
+    /** Current filter configurations */
+    filterConfigs = $state([]);
+    /** Header filter values (for UI inputs) */
+    headerFilterValues = $state({});
+    // ============================================
+    // Grouping State
+    // ============================================
+    /** Group configuration */
+    groupByConfig = $state([]);
+    /** Set of open group keys (using string path like "field:value" or "field:value/field2:value2" for nested) */
+    openGroups = $state(new Set());
+    /** Height of group header rows */
+    groupHeaderHeight = $state(36);
+    // ============================================
+    // Column Resizing State
+    // ============================================
+    /** Column widths (overrides column.width when user resizes) */
+    columnWidths = $state({});
+    // ============================================
+    // Plugin State
+    // ============================================
+    /** Registered plugins */
+    plugins = new Map();
+    /** Data pipeline handlers sorted by priority */
+    pipelineHandlers = [];
+    // ============================================
+    // Derived State (computed from raw state)
+    // ============================================
+    /** Data after passing through filtering, sorting, and plugin pipeline */
+    processedData = $derived.by(() => {
+        let data = [...this.rawData];
+        // 1. Apply filters
+        if (this.filterConfigs.length > 0) {
+            data = this.applyFilters(data);
+        }
+        // 2. Apply header filters
+        const headerFilters = Object.entries(this.headerFilterValues).filter(([, v]) => v.trim() !== '');
+        if (headerFilters.length > 0) {
+            data = this.applyHeaderFilters(data, headerFilters);
+        }
+        // 3. Apply sorting
+        if (this.sortConfigs.length > 0) {
+            data = this.applySorting(data);
+        }
+        // 4. Apply plugin pipeline handlers
+        for (const { handler } of this.pipelineHandlers) {
+            data = handler(data);
+        }
+        return data;
+    });
+    /** Whether grouping is enabled */
+    isGrouped = $derived(this.groupByConfig.length > 0);
+    /** Build groups from processed data */
+    groupedData = $derived.by(() => {
+        if (!this.isGrouped)
+            return [];
+        return this.buildGroups(this.processedData, this.groupByConfig, 0, '');
+    });
+    /** Display rows - either flat data or grouped data with headers */
+    displayRows = $derived.by(() => {
+        if (!this.isGrouped) {
+            // No grouping - return flat rows
+            return this.processedData.map((data, index) => ({
+                type: 'row',
+                data,
+                index
+            }));
+        }
+        // With grouping - flatten groups into display rows
+        return this.flattenGroups(this.groupedData);
+    });
+    /** Flatten groups into display rows (group headers + visible rows) */
+    flattenGroups(groups, result = []) {
+        for (const group of groups) {
+            // Add group header
+            result.push({ type: 'group', group });
+            // If group is open, add its contents
+            if (group.isOpen) {
+                if (group.children && group.children.length > 0) {
+                    // Nested groups - recurse
+                    this.flattenGroups(group.children, result);
+                }
+                else {
+                    // Leaf group - add data rows
+                    for (const row of group.rows) {
+                        result.push({
+                            type: 'row',
+                            data: row,
+                            index: this.processedData.indexOf(row)
+                        });
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    /** Build group hierarchy recursively */
+    buildGroups(data, configs, level, parentPath) {
+        if (configs.length === 0 || data.length === 0)
+            return [];
+        const config = configs[0];
+        const remainingConfigs = configs.slice(1);
+        // Get field name and grouping function
+        const field = typeof config.field === 'string' ? config.field : 'custom';
+        const getGroupKey = typeof config.field === 'function'
+            ? config.field
+            : (row) => String(row[config.field] ?? '(empty)');
+        // Group rows by key
+        const groupMap = new Map();
+        for (const row of data) {
+            const key = getGroupKey(row);
+            if (!groupMap.has(key)) {
+                groupMap.set(key, []);
+            }
+            groupMap.get(key).push(row);
+        }
+        // Sort group keys (default to ascending)
+        let sortedKeys = Array.from(groupMap.keys());
+        const order = config.order ?? 'asc';
+        if (typeof order === 'function') {
+            sortedKeys.sort(order);
+        }
+        else {
+            // Smart comparison: use numeric sort if all keys are numbers
+            const allNumeric = sortedKeys.every(k => !isNaN(Number(k)) && k.trim() !== '');
+            if (allNumeric) {
+                // Numeric sort
+                sortedKeys.sort((a, b) => {
+                    const diff = Number(a) - Number(b);
+                    return order === 'desc' ? -diff : diff;
+                });
+            }
+            else {
+                // String sort
+                sortedKeys.sort((a, b) => {
+                    const result = a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+                    return order === 'desc' ? -result : result;
+                });
+            }
+        }
+        // Build GroupInfo objects
+        const groups = [];
+        for (const key of sortedKeys) {
+            const rows = groupMap.get(key);
+            const groupPath = parentPath ? `${parentPath}/${field}:${key}` : `${field}:${key}`;
+            // Determine if group is open
+            const groupInfo = {
+                key,
+                field,
+                rows,
+                level,
+                count: rows.length,
+                isOpen: this.isGroupOpen(groupPath, config),
+                toggle: () => this.toggleGroup(groupPath),
+                aggregates: this.calculateAggregates(rows),
+                parent: undefined, // Will be set if needed
+                children: undefined
+            };
+            // Build children if there are more group levels
+            if (remainingConfigs.length > 0) {
+                groupInfo.children = this.buildGroups(rows, remainingConfigs, level + 1, groupPath);
+                // Update count to include all nested rows
+                groupInfo.count = this.countNestedRows(groupInfo);
+            }
+            groups.push(groupInfo);
+        }
+        return groups;
+    }
+    /** Count total rows in a group including nested groups */
+    countNestedRows(group) {
+        if (!group.children || group.children.length === 0) {
+            return group.rows.length;
+        }
+        return group.children.reduce((sum, child) => sum + this.countNestedRows(child), 0);
+    }
+    /** Calculate aggregates for a group's rows */
+    calculateAggregates(rows) {
+        const aggregates = {};
+        // Get numeric columns
+        for (const column of this.columns) {
+            const values = [];
+            for (const row of rows) {
+                const value = row[column.field];
+                if (typeof value === 'number' && !isNaN(value)) {
+                    values.push(value);
+                }
+            }
+            if (values.length > 0) {
+                const sum = values.reduce((a, b) => a + b, 0);
+                aggregates[column.field] = {
+                    sum,
+                    avg: sum / values.length,
+                    min: Math.min(...values),
+                    max: Math.max(...values),
+                    count: values.length
+                };
+            }
+            else {
+                aggregates[column.field] = { count: rows.length };
+            }
+        }
+        return aggregates;
+    }
+    /** Check if a group is open */
+    isGroupOpen(groupPath, config) {
+        // Check explicit open state first
+        if (this.openGroups.has(groupPath)) {
+            return true;
+        }
+        // Check if explicitly closed (we track both states)
+        if (this.openGroups.has(`closed:${groupPath}`)) {
+            return false;
+        }
+        // Use default from config
+        if (typeof config.startOpen === 'function') {
+            // Can't call function here without GroupInfo, so default to true
+            return true;
+        }
+        return config.startOpen !== false; // Default to open
+    }
+    /** Apply filter configs to data */
+    applyFilters(data) {
+        return data.filter((row) => {
+            return this.filterConfigs.every((filter) => {
+                const value = row[filter.field];
+                return this.matchesFilter(value, filter.operator, filter.value);
+            });
+        });
+    }
+    /** Apply header filter values to data */
+    applyHeaderFilters(data, filters) {
+        return data.filter((row) => {
+            return filters.every(([field, filterValue]) => {
+                const value = row[field];
+                if (value === null || value === undefined)
+                    return false;
+                return String(value).toLowerCase().includes(filterValue.toLowerCase());
+            });
+        });
+    }
+    /** Check if a value matches a filter condition */
+    matchesFilter(value, operator, filterValue) {
+        if (value === null || value === undefined) {
+            return operator === 'neq';
+        }
+        switch (operator) {
+            case 'eq':
+                return value === filterValue;
+            case 'neq':
+                return value !== filterValue;
+            case 'gt':
+                return Number(value) > Number(filterValue);
+            case 'gte':
+                return Number(value) >= Number(filterValue);
+            case 'lt':
+                return Number(value) < Number(filterValue);
+            case 'lte':
+                return Number(value) <= Number(filterValue);
+            case 'contains':
+                return String(value).toLowerCase().includes(String(filterValue).toLowerCase());
+            case 'startswith':
+                return String(value).toLowerCase().startsWith(String(filterValue).toLowerCase());
+            case 'endswith':
+                return String(value).toLowerCase().endsWith(String(filterValue).toLowerCase());
+            case 'regex':
+                try {
+                    return new RegExp(String(filterValue), 'i').test(String(value));
+                }
+                catch {
+                    return false;
+                }
+            default:
+                return true;
+        }
+    }
+    /** Apply sort configs to data */
+    applySorting(data) {
+        return data.sort((a, b) => {
+            for (const sort of this.sortConfigs) {
+                if (sort.direction === 'none')
+                    continue;
+                const aVal = a[sort.field];
+                const bVal = b[sort.field];
+                let comparison = 0;
+                // Handle null/undefined
+                if (aVal === null || aVal === undefined)
+                    comparison = -1;
+                else if (bVal === null || bVal === undefined)
+                    comparison = 1;
+                // Compare strings
+                else if (typeof aVal === 'string' && typeof bVal === 'string') {
+                    comparison = aVal.localeCompare(bVal);
+                }
+                // Compare numbers
+                else if (typeof aVal === 'number' && typeof bVal === 'number') {
+                    comparison = aVal - bVal;
+                }
+                // Compare dates
+                else if (aVal instanceof Date && bVal instanceof Date) {
+                    comparison = aVal.getTime() - bVal.getTime();
+                }
+                // Fallback to string comparison
+                else {
+                    comparison = String(aVal).localeCompare(String(bVal));
+                }
+                if (comparison !== 0) {
+                    return sort.direction === 'desc' ? -comparison : comparison;
+                }
+            }
+            return 0;
+        });
+    }
+    /** Total number of rows after processing (includes group headers when grouped) */
+    totalRows = $derived(this.displayRows.length);
+    /** Total data rows (without group headers) */
+    totalDataRows = $derived(this.processedData.length);
+    /** Visible columns (filtered for visibility) */
+    visibleColumns = $derived(this.columns.filter((col) => col.visible !== false));
+    /** Columns frozen to the left */
+    frozenLeftColumns = $derived(this.visibleColumns.filter((col) => col.frozen === true || col.frozen === 'left'));
+    /** Columns frozen to the right */
+    frozenRightColumns = $derived(this.visibleColumns.filter((col) => col.frozen === 'right'));
+    /** Scrollable (non-frozen) columns */
+    scrollableColumns = $derived(this.visibleColumns.filter((col) => !col.frozen));
+    /** Number of rows frozen at the top (only applies when not grouped) */
+    frozenRowCount = $state(0);
+    /** Frozen rows (always rendered at top) - only when not grouped */
+    frozenRows = $derived(this.isGrouped ? [] : this.processedData.slice(0, this.frozenRowCount));
+    /** Non-frozen display rows for virtual scrolling */
+    scrollableDisplayRows = $derived.by(() => {
+        if (this.isGrouped) {
+            // When grouped, all display rows are scrollable
+            return this.displayRows;
+        }
+        // When not grouped, exclude frozen rows
+        return this.displayRows.slice(this.frozenRowCount);
+    });
+    /** Total scrollable rows (excluding frozen) */
+    scrollableRowCount = $derived(this.scrollableDisplayRows.length);
+    /** Get effective row height for a display row */
+    getDisplayRowHeight(displayRow) {
+        return displayRow.type === 'group' ? this.groupHeaderHeight : this.rowHeight;
+    }
+    /** Total content height for scrollable area */
+    totalHeight = $derived.by(() => {
+        if (!this.isGrouped) {
+            return this.scrollableRowCount * this.rowHeight;
+        }
+        // Calculate mixed heights for grouped data
+        let height = 0;
+        for (const row of this.scrollableDisplayRows) {
+            height += row.type === 'group' ? this.groupHeaderHeight : this.rowHeight;
+        }
+        return height;
+    });
+    /** Number of visible rows that fit in container (accounting for frozen row height) */
+    visibleRowCount = $derived.by(() => {
+        const frozenHeight = this.frozenRowCount * this.rowHeight;
+        const availableHeight = this.containerHeight - frozenHeight;
+        // Use row height as approximation, will show a bit more for groups
+        return Math.ceil(availableHeight / this.rowHeight) + 2;
+    });
+    /** Start index for visible scrollable rows (accounts for variable heights when grouped) */
+    startIndex = $derived.by(() => {
+        if (!this.isGrouped) {
+            return Math.max(0, Math.floor(this.scrollTop / this.rowHeight));
+        }
+        // With grouping, calculate based on accumulated heights
+        let accumulatedHeight = 0;
+        for (let i = 0; i < this.scrollableDisplayRows.length; i++) {
+            const rowHeight = this.scrollableDisplayRows[i].type === 'group'
+                ? this.groupHeaderHeight
+                : this.rowHeight;
+            if (accumulatedHeight + rowHeight > this.scrollTop) {
+                return i;
+            }
+            accumulatedHeight += rowHeight;
+        }
+        return Math.max(0, this.scrollableDisplayRows.length - 1);
+    });
+    /** End index for visible scrollable rows */
+    endIndex = $derived(Math.min(this.scrollableRowCount, this.startIndex + this.visibleRowCount));
+    /** Visible display rows slice */
+    visibleDisplayRows = $derived(this.scrollableDisplayRows.slice(this.startIndex, this.endIndex));
+    /** Legacy: visible data rows (for non-grouped compatibility) */
+    visibleRows = $derived.by(() => {
+        if (this.isGrouped) {
+            // Return only data rows from visible display rows
+            return this.visibleDisplayRows
+                .filter((r) => r.type === 'row')
+                .map(r => r.data);
+        }
+        return this.visibleDisplayRows
+            .filter((r) => r.type === 'row')
+            .map(r => r.data);
+    });
+    /** Offset for positioning visible rows (accounts for variable heights when grouped) */
+    offsetY = $derived.by(() => {
+        if (!this.isGrouped) {
+            return this.startIndex * this.rowHeight;
+        }
+        // Calculate offset based on accumulated heights up to startIndex
+        let offset = 0;
+        for (let i = 0; i < this.startIndex && i < this.scrollableDisplayRows.length; i++) {
+            offset += this.scrollableDisplayRows[i].type === 'group'
+                ? this.groupHeaderHeight
+                : this.rowHeight;
+        }
+        return offset;
+    });
+    // ============================================
+    // Initialization
+    // ============================================
+    constructor(options) {
+        this.setOptions(options);
+    }
+    /**
+     * Set grid options and update state
+     */
+    setOptions(options) {
+        this.options = options;
+        this.rawData = options.data ?? [];
+        this.columns = options.columns ?? [];
+        this.rowHeight = options.rowHeight ?? 40;
+    }
+    // ============================================
+    // Data Methods
+    // ============================================
+    /**
+     * Set new data
+     */
+    setData(data) {
+        this.rawData = data;
+    }
+    /**
+     * Update a single row by index
+     */
+    updateRow(index, data) {
+        if (index >= 0 && index < this.rawData.length) {
+            this.rawData[index] = { ...this.rawData[index], ...data };
+        }
+    }
+    /**
+     * Add a row at the end or at specific index
+     */
+    addRow(data, index) {
+        if (index !== undefined && index >= 0) {
+            this.rawData.splice(index, 0, data);
+        }
+        else {
+            this.rawData.push(data);
+        }
+    }
+    /**
+     * Remove a row by index
+     */
+    removeRow(index) {
+        if (index >= 0 && index < this.rawData.length) {
+            this.rawData.splice(index, 1);
+        }
+    }
+    /**
+     * Get row by key value
+     */
+    getRowByKey(keyField, keyValue) {
+        return this.rawData.find((row) => row[keyField] === keyValue);
+    }
+    // ============================================
+    // Column Methods
+    // ============================================
+    /**
+     * Set column definitions
+     */
+    setColumns(columns) {
+        this.columns = columns;
+    }
+    /**
+     * Update a single column definition
+     */
+    updateColumn(field, updates) {
+        const index = this.columns.findIndex((col) => col.field === field);
+        if (index !== -1) {
+            this.columns[index] = { ...this.columns[index], ...updates };
+        }
+    }
+    /**
+     * Show/hide a column
+     */
+    setColumnVisibility(field, visible) {
+        this.updateColumn(field, { visible });
+    }
+    /**
+     * Get column by field name
+     */
+    getColumn(field) {
+        return this.columns.find((col) => col.field === field);
+    }
+    // ============================================
+    // Sorting Methods
+    // ============================================
+    /**
+     * Set sort for a field (replaces existing sort)
+     */
+    setSort(field, direction) {
+        if (direction === 'none') {
+            this.sortConfigs = this.sortConfigs.filter((s) => s.field !== field);
+        }
+        else {
+            const existing = this.sortConfigs.findIndex((s) => s.field === field);
+            if (existing !== -1) {
+                this.sortConfigs[existing] = { field, direction };
+            }
+            else {
+                // Single sort by default - replace all
+                this.sortConfigs = [{ field, direction }];
+            }
+        }
+    }
+    /**
+     * Toggle sort for a field (cycles through: none -> asc -> desc -> none)
+     */
+    toggleSort(field, multiSort = false) {
+        const existing = this.sortConfigs.find((s) => s.field === field);
+        const currentDirection = existing?.direction ?? 'none';
+        let newDirection;
+        if (currentDirection === 'none')
+            newDirection = 'asc';
+        else if (currentDirection === 'asc')
+            newDirection = 'desc';
+        else
+            newDirection = 'none';
+        if (multiSort) {
+            // Multi-sort: update or add to existing sorts
+            if (newDirection === 'none') {
+                this.sortConfigs = this.sortConfigs.filter((s) => s.field !== field);
+            }
+            else if (existing) {
+                existing.direction = newDirection;
+                this.sortConfigs = [...this.sortConfigs]; // Trigger reactivity
+            }
+            else {
+                this.sortConfigs = [...this.sortConfigs, { field, direction: newDirection }];
+            }
+        }
+        else {
+            // Single sort: replace all sorts
+            this.setSort(field, newDirection);
+        }
+    }
+    /**
+     * Clear all sorting
+     */
+    clearSort() {
+        this.sortConfigs = [];
+    }
+    /**
+     * Get current sort direction for a field
+     */
+    getSortDirection(field) {
+        return this.sortConfigs.find((s) => s.field === field)?.direction ?? 'none';
+    }
+    /**
+     * Get sort index for multi-sort (0-based, -1 if not sorted)
+     */
+    getSortIndex(field) {
+        return this.sortConfigs.findIndex((s) => s.field === field && s.direction !== 'none');
+    }
+    // ============================================
+    // Filtering Methods
+    // ============================================
+    /**
+     * Set a programmatic filter
+     */
+    setFilter(field, operator, value) {
+        const existing = this.filterConfigs.findIndex((f) => f.field === field);
+        if (existing !== -1) {
+            this.filterConfigs[existing] = { field, operator, value };
+        }
+        else {
+            this.filterConfigs = [...this.filterConfigs, { field, operator, value }];
+        }
+    }
+    /**
+     * Remove a filter for a field
+     */
+    removeFilter(field) {
+        this.filterConfigs = this.filterConfigs.filter((f) => f.field !== field);
+    }
+    /**
+     * Clear all filters
+     */
+    clearFilters() {
+        this.filterConfigs = [];
+        this.headerFilterValues = {};
+    }
+    /**
+     * Set header filter value (for UI input)
+     */
+    setHeaderFilter(field, value) {
+        this.headerFilterValues = { ...this.headerFilterValues, [field]: value };
+    }
+    /**
+     * Get header filter value
+     */
+    getHeaderFilter(field) {
+        return this.headerFilterValues[field] ?? '';
+    }
+    // ============================================
+    // Column Resizing Methods
+    // ============================================
+    /**
+     * Set column width (from user resize)
+     */
+    setColumnWidth(field, width) {
+        const column = this.getColumn(field);
+        const minWidth = column?.minWidth ?? 50;
+        const maxWidth = column?.maxWidth ?? Infinity;
+        const clampedWidth = Math.max(minWidth, Math.min(maxWidth, width));
+        this.columnWidths = { ...this.columnWidths, [field]: clampedWidth };
+    }
+    /**
+     * Get effective column width (user-set or default)
+     */
+    getColumnWidth(field) {
+        return this.columnWidths[field];
+    }
+    /**
+     * Reset column width to default
+     */
+    resetColumnWidth(field) {
+        const { [field]: _, ...rest } = this.columnWidths;
+        this.columnWidths = rest;
+    }
+    /**
+     * Reset all column widths
+     */
+    resetAllColumnWidths() {
+        this.columnWidths = {};
+    }
+    /**
+     * Auto-fit column width to content (double-click resize)
+     */
+    autoFitColumn(field) {
+        const column = this.getColumn(field);
+        if (!column)
+            return;
+        // Create a temporary canvas for text measurement
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        // Use the grid's font style
+        ctx.font = '14px system-ui, -apple-system, sans-serif';
+        // Measure header text
+        let maxWidth = ctx.measureText(column.title).width;
+        // Measure all data values in this column
+        for (const row of this.processedData) {
+            const value = row[field];
+            if (value !== null && value !== undefined) {
+                const text = String(value);
+                const width = ctx.measureText(text).width;
+                if (width > maxWidth) {
+                    maxWidth = width;
+                }
+            }
+        }
+        // Add padding (cell padding + some buffer for sort indicators, etc.)
+        const padding = 48; // ~24px on each side + buffer
+        const calculatedWidth = Math.ceil(maxWidth + padding);
+        // Apply min/max constraints
+        const minWidth = column.minWidth ?? 50;
+        const maxAllowedWidth = column.maxWidth ?? 500; // Cap at 500px by default
+        const finalWidth = Math.max(minWidth, Math.min(maxAllowedWidth, calculatedWidth));
+        this.setColumnWidth(field, finalWidth);
+    }
+    /**
+     * Auto-fit all columns to their content
+     */
+    autoFitAllColumns() {
+        for (const column of this.columns) {
+            this.autoFitColumn(column.field);
+        }
+    }
+    // ============================================
+    // Frozen Column Methods
+    // ============================================
+    /**
+     * Get the sticky left position for a frozen left column
+     */
+    getFrozenLeftPosition(field) {
+        let position = 0;
+        for (const col of this.frozenLeftColumns) {
+            if (col.field === field) {
+                return position;
+            }
+            // Get width: user-resized width, column.width, or default 100px
+            const width = this.columnWidths[col.field] ?? (typeof col.width === 'number' ? col.width : 100);
+            position += width;
+        }
+        return position;
+    }
+    /**
+     * Get the sticky right position for a frozen right column
+     */
+    getFrozenRightPosition(field) {
+        let position = 0;
+        // Iterate in reverse order for right-frozen columns
+        const rightCols = [...this.frozenRightColumns].reverse();
+        for (const col of rightCols) {
+            if (col.field === field) {
+                return position;
+            }
+            const width = this.columnWidths[col.field] ?? (typeof col.width === 'number' ? col.width : 100);
+            position += width;
+        }
+        return position;
+    }
+    /**
+     * Get total width of frozen left columns
+     */
+    get frozenLeftWidth() {
+        let width = 0;
+        for (const col of this.frozenLeftColumns) {
+            width += this.columnWidths[col.field] ?? (typeof col.width === 'number' ? col.width : 100);
+        }
+        return width;
+    }
+    /**
+     * Get total width of frozen right columns
+     */
+    get frozenRightWidth() {
+        let width = 0;
+        for (const col of this.frozenRightColumns) {
+            width += this.columnWidths[col.field] ?? (typeof col.width === 'number' ? col.width : 100);
+        }
+        return width;
+    }
+    /**
+     * Set the number of frozen rows
+     */
+    setFrozenRowCount(count) {
+        this.frozenRowCount = Math.max(0, count);
+    }
+    // ============================================
+    // Grouping Methods
+    // ============================================
+    /**
+     * Set group configuration
+     * @param groupBy - Field name, array of fields, function, or GroupConfig
+     */
+    setGroupBy(groupBy) {
+        if (!groupBy) {
+            this.groupByConfig = [];
+            return;
+        }
+        // Normalize to array of GroupConfig
+        if (typeof groupBy === 'string') {
+            this.groupByConfig = [{ field: groupBy }];
+        }
+        else if (typeof groupBy === 'function') {
+            this.groupByConfig = [{ field: groupBy }];
+        }
+        else if (Array.isArray(groupBy)) {
+            this.groupByConfig = groupBy.map(item => {
+                if (typeof item === 'string') {
+                    return { field: item };
+                }
+                return item;
+            });
+        }
+        else {
+            this.groupByConfig = [groupBy];
+        }
+        // Reset open groups when grouping changes
+        this.openGroups = new Set();
+    }
+    /**
+     * Toggle a group open/closed
+     */
+    toggleGroup(groupPath) {
+        const newOpenGroups = new Set(this.openGroups);
+        const closedKey = `closed:${groupPath}`;
+        if (newOpenGroups.has(groupPath)) {
+            // Currently explicitly open -> mark as closed
+            newOpenGroups.delete(groupPath);
+            newOpenGroups.add(closedKey);
+        }
+        else if (newOpenGroups.has(closedKey)) {
+            // Currently explicitly closed -> mark as open
+            newOpenGroups.delete(closedKey);
+            newOpenGroups.add(groupPath);
+        }
+        else {
+            // Not explicitly set -> check default and toggle
+            // Default is open, so toggle to closed
+            newOpenGroups.add(closedKey);
+        }
+        this.openGroups = newOpenGroups;
+    }
+    /**
+     * Expand all groups
+     */
+    expandAllGroups() {
+        const newOpenGroups = new Set();
+        // Clear all closed markers and add open markers for all groups
+        const addGroupPaths = (groups) => {
+            for (const group of groups) {
+                const path = this.getGroupPath(group);
+                newOpenGroups.add(path);
+                if (group.children) {
+                    addGroupPaths(group.children);
+                }
+            }
+        };
+        addGroupPaths(this.groupedData);
+        this.openGroups = newOpenGroups;
+    }
+    /**
+     * Collapse all groups
+     */
+    collapseAllGroups() {
+        const newOpenGroups = new Set();
+        // Add closed markers for all top-level groups
+        const addClosedPaths = (groups, parentPath = '') => {
+            for (const group of groups) {
+                const path = parentPath ? `${parentPath}/${group.field}:${group.key}` : `${group.field}:${group.key}`;
+                newOpenGroups.add(`closed:${path}`);
+                if (group.children) {
+                    addClosedPaths(group.children, path);
+                }
+            }
+        };
+        addClosedPaths(this.groupedData);
+        this.openGroups = newOpenGroups;
+    }
+    /**
+     * Get the path for a group (used for open/closed tracking)
+     */
+    getGroupPath(group, parentPath = '') {
+        return parentPath ? `${parentPath}/${group.field}:${group.key}` : `${group.field}:${group.key}`;
+    }
+    /**
+     * Get groups at a specific level
+     */
+    getGroupsAtLevel(level) {
+        const groups = [];
+        const collectAtLevel = (items, currentLevel) => {
+            for (const item of items) {
+                if (currentLevel === level) {
+                    groups.push(item);
+                }
+                else if (item.children && currentLevel < level) {
+                    collectAtLevel(item.children, currentLevel + 1);
+                }
+            }
+        };
+        collectAtLevel(this.groupedData, 0);
+        return groups;
+    }
+    /**
+     * Set group header height
+     */
+    setGroupHeaderHeight(height) {
+        this.groupHeaderHeight = Math.max(24, height);
+    }
+    // ============================================
+    // Scroll Methods
+    // ============================================
+    /**
+     * Update scroll position
+     */
+    setScrollPosition(top, left) {
+        this.scrollTop = Math.max(0, top);
+        if (left !== undefined) {
+            this.scrollLeft = Math.max(0, left);
+        }
+    }
+    /**
+     * Update container dimensions
+     */
+    setContainerDimensions(width, height) {
+        this.containerWidth = width;
+        this.containerHeight = height;
+    }
+    /**
+     * Scroll to a specific row index
+     */
+    scrollToRow(index) {
+        const targetScroll = index * this.rowHeight;
+        this.scrollTop = Math.max(0, Math.min(targetScroll, this.totalHeight - this.containerHeight));
+    }
+    // ============================================
+    // Plugin Methods (for Phase 3+)
+    // ============================================
+    /**
+     * Register a plugin
+     */
+    registerPlugin(plugin) {
+        if (this.plugins.has(plugin.name)) {
+            console.warn(`Plugin "${plugin.name}" is already registered`);
+            return;
+        }
+        const instance = plugin.init({
+            getState: () => ({
+                rawData: this.rawData,
+                columns: this.columns,
+                scrollTop: this.scrollTop,
+                containerHeight: this.containerHeight,
+                containerWidth: this.containerWidth,
+                rowHeight: this.rowHeight
+            }),
+            updateState: (updates) => {
+                if (updates.rawData !== undefined)
+                    this.rawData = updates.rawData;
+                if (updates.columns !== undefined)
+                    this.columns = updates.columns;
+                if (updates.scrollTop !== undefined)
+                    this.scrollTop = updates.scrollTop;
+            },
+            subscribe: (callback) => {
+                // In Svelte 5, effects auto-track dependencies
+                // This is a simplified version - full implementation in Phase 3
+                return () => { };
+            }
+        });
+        this.plugins.set(plugin.name, instance);
+        // Add pipeline handler if provided
+        if (instance.dataPipeline) {
+            this.pipelineHandlers.push(instance.dataPipeline);
+            // Sort by priority (lower = earlier in pipeline)
+            this.pipelineHandlers.sort((a, b) => a.priority - b.priority);
+        }
+    }
+    /**
+     * Unregister a plugin
+     */
+    unregisterPlugin(name) {
+        const instance = this.plugins.get(name);
+        if (instance) {
+            instance.destroy?.();
+            this.plugins.delete(name);
+            // Remove pipeline handler
+            if (instance.dataPipeline) {
+                const idx = this.pipelineHandlers.indexOf(instance.dataPipeline);
+                if (idx !== -1) {
+                    this.pipelineHandlers.splice(idx, 1);
+                }
+            }
+        }
+    }
+    /**
+     * Get plugin API
+     */
+    getPluginApi(name) {
+        return this.plugins.get(name)?.api;
+    }
+    /**
+     * Get all plugin header cell enhancements for a column
+     */
+    getHeaderCellEnhancements(column) {
+        let enhancements = {};
+        for (const instance of this.plugins.values()) {
+            if (instance.headerCell) {
+                enhancements = { ...enhancements, ...instance.headerCell(column) };
+            }
+        }
+        return enhancements;
+    }
+    // ============================================
+    // Cleanup
+    // ============================================
+    /**
+     * Destroy the state manager and cleanup plugins
+     */
+    destroy() {
+        for (const [name] of this.plugins) {
+            this.unregisterPlugin(name);
+        }
+        this.pipelineHandlers = [];
+    }
+}
+/**
+ * Factory function to create a new grid state manager
+ */
+export function createGridState(options) {
+    return new GridStateManager(options);
+}