@zengrid/core 1.2.2 → 1.3.0

package/dist/index.esm.js

@@ -1064,6 +1064,9 @@ function activatePhantom(key, realValue) {
         phantomSubscribers.delete(key);
     }
 }
+function hasPlaceholder(key) {
+    return placeholders.has(key);
+}
 // --- Ownership helpers ---
 function registerOwnership(owner, name) {
     let set = ownershipMap.get(owner);
@@ -1204,12 +1207,19 @@ class CellPositioner {
     constructor(options) {
         this.lastRange = null;
         this.renderedCells = new Map(); // key -> renderer name
+        // The renderer instance actually applied to each pooled element. Keyed by the
+        // element (not the cell key) so destroy() dispatches to the correct renderer
+        // even for instance renderers, whose constructor.name is not in the registry.
+        this.appliedRenderer = new WeakMap();
         // Height measurement state (single RAF batch)
         this.rafPending = false;
         this.rowsToMeasure = new Map(); // row -> auto-height cells
         this.heightCache = new Map(); // row -> measured height
         // Reactive subscription
         this.viewportSubscription = null;
+        // Device-pixel-ratio (browser zoom) change tracking - re-snap edges on zoom
+        this.dprQuery = null;
+        this.dprListener = null;
         this.scroller = options.scroller;
         this.pool = options.pool;
         this.registry = options.registry;
@@ -1221,6 +1231,31 @@ class CellPositioner {
         this.isActive = options.isActive ?? (() => false);
         this.isEditing = options.isEditing ?? (() => false);
         this.rowHeightManager = options.rowHeightManager;
+        this.setupDprListener();
+    }
+    /**
+     * Re-render on device-pixel-ratio change (browser zoom) so cell edges re-snap to
+     * whole device pixels. A `resolution` media query fires only when the DPR actually
+     * changes - not on ordinary resize - and is bound to the current DPR, so it is
+     * re-armed after every change.
+     */
+    setupDprListener() {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const arm = () => {
+            if (this.dprQuery && this.dprListener) {
+                this.dprQuery.removeEventListener('change', this.dprListener);
+            }
+            const dpr = window.devicePixelRatio || 1;
+            this.dprQuery = window.matchMedia(`(resolution: ${dpr}dppx)`);
+            this.dprListener = () => {
+                arm();
+                this.refresh();
+            };
+            this.dprQuery.addEventListener('change', this.dprListener);
+        };
+        arm();
     }
     /**
      * Subscribe to viewport changes (reactive mode)
@@ -1293,12 +1328,29 @@ class CellPositioner {
             }
             return;
         }
-        for (let row = this.lastRange.startRow; row < this.lastRange.endRow; row++) {
-            for (let col = this.lastRange.startCol; col < this.lastRange.endCol; col++) {
+        // The row/col count can shrink after lastRange was recorded (e.g. a backend
+        // response with fewer rows). Clamp to current bounds so a stale out-of-range
+        // index is never positioned (the height/width provider would throw), and
+        // release the cells that fell outside so no ghost rows linger.
+        const endRow = Math.min(this.lastRange.endRow, this.scroller.rowCount);
+        const endCol = Math.min(this.lastRange.endCol, this.scroller.colCount);
+        const startRow = Math.min(this.lastRange.startRow, endRow);
+        const startCol = Math.min(this.lastRange.startCol, endCol);
+        const activeKeys = new Set();
+        for (let row = startRow; row < endRow; row++) {
+            for (let col = startCol; col < endCol; col++) {
                 const key = this.getCellKey(row, col);
+                activeKeys.add(key);
                 this.renderCell(row, col, key);
             }
         }
+        this.pool.releaseExcept(activeKeys);
+        for (const key of this.renderedCells.keys()) {
+            if (!activeKeys.has(key)) {
+                this.renderedCells.delete(key);
+            }
+        }
+        this.lastRange = { startRow, endRow, startCol, endCol };
     }
     /**
      * Clear rendered cells tracking so next renderVisibleCells re-renders all cells
@@ -1331,6 +1383,12 @@ class CellPositioner {
             this.viewportSubscription();
             this.viewportSubscription = null;
         }
+        // Remove device-pixel-ratio (zoom) listener
+        if (this.dprQuery && this.dprListener) {
+            this.dprQuery.removeEventListener('change', this.dprListener);
+            this.dprQuery = null;
+            this.dprListener = null;
+        }
         this.pool.clear();
         this.renderedCells.clear();
         this.lastRange = null;
@@ -1344,10 +1402,22 @@ class CellPositioner {
         const value = this.getData(row, col);
         const column = this.getColumn?.(col);
         const rowData = this.getRowData?.(row);
+        // Snap each cell EDGE (not its width) to a whole device pixel. The 1px inset
+        // box-shadow that draws a cell border collapses to nothing when the edge lands on
+        // a fractional device row - which is what happens at 100% zoom on fractional-DPR
+        // displays (Windows 125%/150% scaling), causing borders to vanish "randomly".
+        // Because offsets are prefix sums (offset(c) + width(c) === offset(c+1)), snapping
+        // the left/right edges independently keeps neighbours exactly flush: no gaps or
+        // overlaps, and it stays correct through column resizing and row-height changes.
+        const dpr = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
+        const left = Math.round(position.x * dpr) / dpr;
+        const top = Math.round(position.y * dpr) / dpr;
+        const width = Math.round((position.x + position.width) * dpr) / dpr - left;
+        const height = Math.round((position.y + position.height) * dpr) / dpr - top;
         // Position the cell using batched style updates (cssText) to prevent layout thrashing
         // This is critical for scroll performance - individual style.property assignments
         // can trigger multiple style recalculations, while cssText batches them
-        element.style.cssText = `position: absolute; left: ${position.x}px; top: ${position.y}px; width: ${position.width}px; height: ${position.height}px;`;
+        element.style.cssText = `position: absolute; left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px;`;
         // For auto-height columns being measured, allow the cell to expand beyond the set height
         // This is only for the MEASUREMENT phase - after measurement, all cells use the measured height
         const needsMeasurement = this.rowHeightManager?.needsMeasurement(row);
@@ -1355,10 +1425,11 @@ class CellPositioner {
             // Override height constraint for measurement - let content expand
             // The browser will naturally reflow, and we'll measure in the next frame via RAF
             element.style.height = 'auto';
-            element.style.minHeight = `${position.height}px`;
+            element.style.minHeight = `${height}px`;
         }
         element.setAttribute('data-row', row.toString());
         element.setAttribute('data-col', col.toString());
+        element.classList.toggle('zg-cell-last-col', col === this.scroller.colCount - 1);
         // Get renderer - handle both string names and renderer instances
         let renderer;
         let rendererName;
@@ -1390,8 +1461,9 @@ class CellPositioner {
             isActive: this.isActive(row, col),
             isEditing: this.isEditing(row, col),
         };
-        // Generate cache key
-        const cacheKey = this.cache
+        // Generate cache key (skip HTML-string caching for interactive renderers,
+        // which lose event listeners / body-portaled DOM when restored via innerHTML)
+        const cacheKey = this.cache && renderer.cacheable !== false
             ? RendererCache.generateKey(row, col, value, rendererName, {
                 isSelected: params.isSelected,
                 isActive: params.isActive,
@@ -1402,13 +1474,27 @@ class CellPositioner {
         if (cacheKey && this.cache) {
             const cached = this.cache.get(cacheKey);
             if (cached) {
+                // Renderer changed for this recycled element: destroy the previous one so
+                // its classes (alignment via zg-cell-text/zg-cell-number, or padding-0
+                // containers like zg-cell-checkbox-container) are stripped before we apply
+                // the cached content's classes additively.
+                const prevRenderer = this.appliedRenderer.get(element);
+                if (prevRenderer && prevRenderer !== renderer) {
+                    prevRenderer.destroy(element);
+                }
                 // Use cached content
                 element.innerHTML = cached.html;
                 // Apply cached classes
                 if (cached.classes) {
                     cached.classes.forEach((cls) => element.classList.add(cls));
                 }
+                // Re-apply inline styles the renderer set on the cell (the cssText
+                // reset above wiped them, and innerHTML does not carry them).
+                if (cached.styles) {
+                    cached.styles.forEach(([prop, val]) => element.style.setProperty(prop, val));
+                }
                 this.renderedCells.set(key, rendererName);
+                this.appliedRenderer.set(element, renderer);
                 // Apply state classes
                 element.classList.toggle('zg-cell-selected', params.isSelected);
                 element.classList.toggle('zg-cell-active', params.isActive);
@@ -1421,23 +1507,31 @@ class CellPositioner {
                 return;
             }
         }
-        // Render or update (cache miss or no cache)
-        const lastRenderer = this.renderedCells.get(key);
-        // Capture classes before render for delta calculation
+        // Render or update (cache miss or no cache). The render/update decision is
+        // keyed per cell: the pool wipes an element's innerHTML on release, so a
+        // recycled element must be re-rendered even when the renderer is unchanged.
+        const lastRendererName = this.renderedCells.get(key);
+        // Capture classes/styles before render for delta calculation.
+        // Style snapshot is only needed when the result will be cached.
         const classesBefore = new Set(Array.from(element.classList));
-        if (lastRenderer !== rendererName || !lastRenderer) {
-            // Renderer changed or first render - destroy old and render new
-            if (lastRenderer) {
-                const oldRenderer = this.registry.get(lastRenderer);
-                oldRenderer.destroy(element);
+        const stylesBefore = cacheKey ? this.snapshotStyles(element) : null;
+        const didRender = lastRendererName !== rendererName || !lastRendererName;
+        if (didRender) {
+            // Renderer changed or first render - destroy the renderer actually applied
+            // to this element (tracked by instance, so instance renderers dispatch to
+            // the correct destroy) before rendering the new one.
+            const prevRenderer = this.appliedRenderer.get(element);
+            if (prevRenderer && prevRenderer !== renderer) {
+                prevRenderer.destroy(element);
             }
             renderer.render(element, params);
-            this.renderedCells.set(key, rendererName);
         }
         else {
             // Same renderer - just update
             renderer.update(element, params);
         }
+        this.renderedCells.set(key, rendererName);
+        this.appliedRenderer.set(element, renderer);
         // Apply optional renderer class (before caching so it's included)
         if (renderer.getCellClass) {
             const rendererClass = renderer.getCellClass(params);
@@ -1445,8 +1539,14 @@ class CellPositioner {
                 element.classList.add(rendererClass);
             }
         }
-        // Cache the rendered content with all classes added by renderer
-        if (cacheKey && this.cache) {
+        // Cache the rendered content with all classes added by renderer.
+        // Only cache from the render branch: there classesBefore/stylesBefore are a
+        // clean baseline (pool reset + structural classes), so the delta captures
+        // every renderer-owned class/style. In the update branch the element still
+        // holds the renderer's classes from its prior render, so the delta would
+        // omit them (e.g. zg-cell-number) and a later cache-hit on a freshly-pooled
+        // element would drop that styling.
+        if (cacheKey && this.cache && didRender) {
             // Calculate delta: classes added during render
             const addedClasses = [];
             element.classList.forEach((cls) => {
@@ -1454,9 +1554,11 @@ class CellPositioner {
                     addedClasses.push(cls);
                 }
             });
+            const addedStyles = stylesBefore ? this.styleDelta(stylesBefore, element) : undefined;
             this.cache.set(cacheKey, {
                 html: element.innerHTML,
                 classes: addedClasses.length > 0 ? addedClasses : undefined,
+                styles: addedStyles,
             });
         }
         // Apply state classes
@@ -1584,6 +1686,36 @@ class CellPositioner {
         // Add the configured overflow class
         element.classList.add(`zg-cell-overflow-${column.overflow.mode}`);
     }
+    /**
+     * Snapshot the inline style properties currently set on the cell element.
+     * Used to diff against the post-render state so renderer-applied styles can
+     * be cached and restored on cache hits.
+     */
+    snapshotStyles(element) {
+        const style = element.style;
+        const snapshot = new Map();
+        for (let i = 0; i < style.length; i++) {
+            const prop = style[i];
+            snapshot.set(prop, style.getPropertyValue(prop));
+        }
+        return snapshot;
+    }
+    /**
+     * Compute the inline styles added or changed since {@link snapshotStyles},
+     * i.e. the styles the renderer set on the cell element.
+     */
+    styleDelta(before, element) {
+        const style = element.style;
+        const delta = [];
+        for (let i = 0; i < style.length; i++) {
+            const prop = style[i];
+            const val = style.getPropertyValue(prop);
+            if (before.get(prop) !== val) {
+                delta.push([prop, val]);
+            }
+        }
+        return delta.length > 0 ? delta : undefined;
+    }
     getCellKey(row, col) {
         return `${row}-${col}`;
     }
@@ -3006,6 +3138,8 @@ function isValidDate(date) {
  * Supported tokens:
  * - YYYY: 4-digit year
  * - YY: 2-digit year
+ * - MMMM: Full month name (January-December)
+ * - MMM: Short month name (Jan-Dec)
  * - MM: 2-digit month (01-12)
  * - M: Month without leading zero (1-12)
  * - DD: 2-digit day (01-31)
@@ -3034,24 +3168,39 @@ function formatDate(date, format) {
     const hours12 = hours % 12 || 12;
     const ampm = hours >= 12 ? 'PM' : 'AM';
     const pad = (n) => String(n).padStart(2, '0');
-    return format
-        .replace('YYYY', String(year))
-        .replace('YY', String(year).slice(-2))
-        .replace('MM', pad(month))
-        .replace('M', String(month))
-        .replace('DD', pad(day))
-        .replace('D', String(day))
-        .replace('HH', pad(hours))
-        .replace('H', String(hours))
-        .replace('hh', pad(hours12))
-        .replace('h', String(hours12))
-        .replace('mm', pad(minutes))
-        .replace('m', String(minutes))
-        .replace('ss', pad(seconds))
-        .replace('s', String(seconds))
-        .replace('A', ampm)
-        .replace('a', ampm.toLowerCase());
+    // Single-pass tokenizer: alternation is ordered longest-token-first so
+    // multi-char tokens (YYYY/MMMM/MMM/MM) match before their shorter prefixes,
+    // and each token is substituted exactly once — literal text is left intact.
+    const tokens = {
+        YYYY: String(year),
+        YY: String(year).slice(-2),
+        MMMM: MONTH_NAMES[month - 1],
+        MMM: MONTH_NAMES_SHORT[month - 1],
+        MM: pad(month),
+        M: String(month),
+        DD: pad(day),
+        D: String(day),
+        HH: pad(hours),
+        H: String(hours),
+        hh: pad(hours12),
+        h: String(hours12),
+        mm: pad(minutes),
+        m: String(minutes),
+        ss: pad(seconds),
+        s: String(seconds),
+        A: ampm,
+        a: ampm.toLowerCase(),
+    };
+    return format.replace(/YYYY|YY|MMMM|MMM|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|A|a/g, (token) => tokens[token]);
 }
+const MONTH_NAMES = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December',
+];
+const MONTH_NAMES_SHORT = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+];
 /**
  * Format a date for display (common formats)
  */
@@ -4779,6 +4928,13 @@ class TextHeaderRenderer {
  * ```
  */
 class SortableHeaderRenderer extends TextHeaderRenderer {
+    constructor() {
+        super(...arguments);
+        /**
+         * This renderer wires its own sort-click handler; skip the grid's fallback.
+         */
+        this.handlesSortInteraction = true;
+    }
     /**
      * Initial render of sortable header
      */
@@ -4826,19 +4982,19 @@ class SortableHeaderRenderer extends TextHeaderRenderer {
         // Create sort indicator container
         const sortEl = document.createElement('span');
         sortEl.className = 'zg-sort-indicator';
-        sortEl.style.cssText = `
-      display: inline-flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      margin-left: 2px;
-      font-size: 9px;
-      line-height: 1;
-      flex-shrink: 0;
-      width: 14px;
-      min-width: 14px;
-      max-width: 14px;
-      overflow: visible;
+        sortEl.style.cssText = `
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-left: 2px;
+      font-size: 9px;
+      line-height: 1;
+      flex-shrink: 0;
+      width: 14px;
+      min-width: 14px;
+      max-width: 14px;
+      overflow: visible;
     `;
         // Update sort icon based on current state
         this.updateSortIcon(sortEl, params);
@@ -4868,9 +5024,9 @@ class SortableHeaderRenderer extends TextHeaderRenderer {
         const { sortDirection, sortPriority } = params;
         if (!sortDirection) {
             // Not sorted - show both arrows in muted state
-            sortEl.innerHTML = `
-        <span style="opacity: 0.3;">${sortIndicator?.ascIcon || SortableHeaderRenderer.DEFAULT_ASC_ICON}</span>
-        <span style="opacity: 0.3; margin-top: -2px;">${sortIndicator?.descIcon || SortableHeaderRenderer.DEFAULT_DESC_ICON}</span>
+            sortEl.innerHTML = `
+        <span style="opacity: 0.3;">${sortIndicator?.ascIcon || SortableHeaderRenderer.DEFAULT_ASC_ICON}</span>
+        <span style="opacity: 0.3; margin-top: -2px;">${sortIndicator?.descIcon || SortableHeaderRenderer.DEFAULT_DESC_ICON}</span>
       `;
             sortEl.style.opacity = '0.5';
         }
@@ -4891,19 +5047,19 @@ class SortableHeaderRenderer extends TextHeaderRenderer {
             const priorityBadge = document.createElement('span');
             priorityBadge.className = 'zg-sort-priority';
             priorityBadge.textContent = String(sortPriority + 1);
-            priorityBadge.style.cssText = `
-        position: absolute;
-        top: 2px;
-        right: 2px;
-        font-size: 8px;
-        background: var(--zg-primary-color, #0066cc);
-        color: white;
-        border-radius: 50%;
-        width: 12px;
-        height: 12px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+            priorityBadge.style.cssText = `
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        font-size: 8px;
+        background: var(--zg-primary-color, #0066cc);
+        color: white;
+        border-radius: 50%;
+        width: 12px;
+        height: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       `;
             sortEl.style.position = 'relative';
             sortEl.appendChild(priorityBadge);
@@ -8999,6 +9155,10 @@ class DragMouseHandler {
     constructor(options, callbacks, throttledDrag) {
         // Container reference
         this.container = null;
+        // Source header cell captured at mousedown. Used to build the drag ghost so it
+        // never depends on the transient mousemove target, which may have moved off the
+        // header (onto a data cell or gap) by the time the drag threshold is crossed.
+        this.sourceHeaderCell = null;
         this.enabled = options.enabled;
         this.dragThreshold = options.dragThreshold;
         this.onBeforeDrag = options.onBeforeDrag;
@@ -9027,6 +9187,7 @@ class DragMouseHandler {
             this.container = null;
         }
         this.removeGlobalListeners();
+        this.sourceHeaderCell = null;
     }
     /**
      * Handle mousedown event on header
@@ -9041,6 +9202,7 @@ class DragMouseHandler {
         const columnId = headerCell.dataset['columnId'];
         if (!columnId)
             return;
+        this.sourceHeaderCell = headerCell;
         // Check if column can be dragged
         if (!this.callbacks.canDragColumn(columnId))
             return;
@@ -9084,7 +9246,7 @@ class DragMouseHandler {
         if (state === 'pending') {
             const distance = this.callbacks.getDragDistance();
             if (distance >= this.dragThreshold) {
-                this.callbacks.onDragStart(e, e.target);
+                this.callbacks.onDragStart(e, this.sourceHeaderCell ?? e.target);
             }
         }
         // Perform drag if in dragging state
@@ -9103,6 +9265,7 @@ class DragMouseHandler {
         this.callbacks.onMouseUp();
         // Remove global listeners
         this.removeGlobalListeners();
+        this.sourceHeaderCell = null;
     }
     /**
      * Remove global mouse listeners
@@ -11342,6 +11505,14 @@ class GridStoreImpl {
         }
         const wrapped = createComputed(key, fn, owner, phase);
         this.computeds.set(key, wrapped);
+        // If something read this key before it existed, it subscribed to a phantom
+        // placeholder. Activate it so those dependents re-run and re-subscribe to
+        // the real computed — otherwise effects that read a computed key early
+        // (e.g. the rendering sync effect reading rows.viewIndices before
+        // setupCoreComputeds) stay bound to a dead placeholder and never fire.
+        if (hasPlaceholder(key)) {
+            activatePhantom(key, wrapped.value);
+        }
     }
     effect(name, fn, owner, phase = 0) {
         if (this.effects.has(name)) {
@@ -11407,6 +11578,9 @@ class GridStoreImpl {
         this.actions.set(name, { handler, owner, invalidates: meta?.invalidates });
         registerOwnership(owner, name);
     }
+    hasAction(name) {
+        return this.actions.has(name);
+    }
     exec(name, ...args) {
         const reg = this.actions.get(name);
         if (!reg) {
@@ -12314,7 +12488,7 @@ function projectFilterAstToFieldState(ast) {
     const root = astGroupToFieldGroup(ast.root, warnings);
     const activeFields = new Set();
     if (root) {
-        collectActiveFields(root, activeFields);
+        collectActiveFields$1(root, activeFields);
     }
     return {
         state: {
@@ -12546,12 +12720,12 @@ function astGroupToFieldGroup(group, warnings) {
         groups: groups.length > 0 ? groups : undefined,
     };
 }
-function collectActiveFields(group, activeFields) {
+function collectActiveFields$1(group, activeFields) {
     for (const condition of group.conditions) {
         activeFields.add(condition.field);
     }
     for (const nested of group.groups ?? []) {
-        collectActiveFields(nested, activeFields);
+        collectActiveFields$1(nested, activeFields);
     }
 }
 function normalizeConditionValue(operator, value) {
@@ -16576,6 +16750,30 @@ class SelectionManager {
         this.addSelection(selection);
         this.emitSelectionChange();
     }
+    /**
+     * Toggle a single cell in a multi-selection: remove it if that exact 1×1
+     * cell is already selected, otherwise add it. Used for additive Ctrl/Cmd+click.
+     * Returns the resulting selected state of the cell.
+     */
+    toggleCell(row, col) {
+        const existing = this.findCellSelection(row, col);
+        if (existing) {
+            this.selections.delete(existing.id);
+            this.rebuildIntervals();
+            this.emitSelectionChange();
+            return false;
+        }
+        this.addSelection({
+            id: this.generateId(),
+            type: 'cell',
+            startRow: row,
+            endRow: row,
+            startCol: col,
+            endCol: col,
+        });
+        this.emitSelectionChange();
+        return true;
+    }
     /**
      * Select a row range
      */
@@ -16761,6 +16959,32 @@ class SelectionManager {
         // Add to column interval tree
         this.colIntervals.insert({ start: selection.startCol, end: selection.endCol }, selection);
     }
+    /**
+     * Find an exact 1×1 cell selection at the given coordinates, if one exists.
+     */
+    findCellSelection(row, col) {
+        for (const sel of this.selections.values()) {
+            if (sel.type === 'cell' &&
+                sel.startRow === row &&
+                sel.endRow === row &&
+                sel.startCol === col &&
+                sel.endCol === col) {
+                return sel;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Rebuild the interval trees from the current selection map (after a removal).
+     */
+    rebuildIntervals() {
+        this.rowIntervals = new IntervalTree({ balanced: true });
+        this.colIntervals = new IntervalTree({ balanced: true });
+        for (const sel of this.selections.values()) {
+            this.rowIntervals.insert({ start: sel.startRow, end: sel.endRow }, sel);
+            this.colIntervals.insert({ start: sel.startCol, end: sel.endCol }, sel);
+        }
+    }
     /**
      * Generate unique ID for selections
      */
@@ -16849,6 +17073,11 @@ function createSelectionPlugin(options) {
                 store.set('selection.active', { row, col });
                 syncToStore();
             }, 'selection');
+            store.action('selection:toggleCell', (row, col) => {
+                const selected = mgr.toggleCell(row, col);
+                store.set('selection.active', selected ? { row, col } : null);
+                syncToStore();
+            }, 'selection');
             store.action('selection:selectRange', (startRow, startCol, endRow, endCol, additive = false) => {
                 mgr.selectRange(startRow, startCol, endRow, endCol, additive);
                 syncToStore();
@@ -16902,6 +17131,13 @@ function createSelectionPlugin(options) {
                     if (opts.onCellClick)
                         opts.onCellClick(row, col);
                     store.exec('selection:setActive', { row, col });
+                    // Triple-click the first column to select the entire row.
+                    if (event.detail >= 3 && col === 0) {
+                        const additiveRow = (event.ctrlKey || event.metaKey) && !!multiSel;
+                        store.exec('selection:selectRows', row, row, additiveRow);
+                        anchorCell = { row, col };
+                        return;
+                    }
                     const additive = (event.ctrlKey || event.metaKey) && !!multiSel;
                     if (event.shiftKey && anchorCell) {
                         if (selType === 'row') {
@@ -16932,7 +17168,17 @@ function createSelectionPlugin(options) {
                                 store.exec('selection:selectRange', row, col, row, col, additive);
                                 break;
                             default:
-                                store.exec('selection:selectCell', row, col, additive);
+                                if (additive) {
+                                    // Ctrl/Cmd+click toggles the individual cell in a multi-selection
+                                    store.exec('selection:toggleCell', row, col);
+                                }
+                                else if (mgr.isSelected(row, col)) {
+                                    // Plain click on the already-selected cell clears it
+                                    store.exec('selection:clear');
+                                }
+                                else {
+                                    store.exec('selection:selectCell', row, col);
+                                }
                         }
                         anchorCell = { row, col };
                     }
@@ -16970,6 +17216,7 @@ function createSelectionPlugin(options) {
             // --- API ---
             api.register('selection', {
                 selectCell: (row, col, additive) => store.exec('selection:selectCell', row, col, additive),
+                toggleCell: (row, col) => store.exec('selection:toggleCell', row, col),
                 selectRange: (startRow, startCol, endRow, endCol, additive) => store.exec('selection:selectRange', startRow, startCol, endRow, endCol, additive),
                 selectRows: (startRow, endRow, additive) => store.exec('selection:selectRows', startRow, endRow, additive),
                 selectColumns: (startCol, endCol, additive) => store.exec('selection:selectColumns', startCol, endCol, additive),
@@ -17143,8 +17390,8 @@ class TextEditor {
         // Inline styles for better UX
         input.style.width = '100%';
         input.style.height = '100%';
-        input.style.border = 'none';
-        input.style.outline = '2px solid #4CAF50';
+        input.style.border = '2px solid #4CAF50';
+        input.style.outline = 'none';
         input.style.padding = '4px 8px';
         input.style.fontSize = '13px';
         input.style.fontFamily = 'inherit';
@@ -17423,16 +17670,16 @@ class NumberEditor {
             this.input.placeholder = this.options.placeholder;
         }
         // Styling
-        this.input.style.cssText = `
-      width: 100%;
-      height: 100%;
-      border: 2px solid #4caf50;
-      padding: 0 8px;
-      font-family: inherit;
-      font-size: inherit;
-      outline: none;
-      box-sizing: border-box;
-      text-align: right;
+        this.input.style.cssText = `
+      width: 100%;
+      height: 100%;
+      border: 2px solid #4caf50;
+      padding: 0 8px;
+      font-family: inherit;
+      font-size: inherit;
+      outline: none;
+      box-sizing: border-box;
+      text-align: right;
     `;
         // Event handlers
         this.input.addEventListener('keydown', this.boundHandleKeyDown);
@@ -17506,13 +17753,14 @@ class NumberEditor {
         }
     }
     handleKeyDown(event) {
-        // Stop propagation to prevent grid navigation
-        event.stopPropagation();
-        // Allow arrow up/down to increment/decrement
-        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-            event.stopPropagation();
-            // Let default behavior handle increment/decrement
+        // Let Enter/Escape/Tab bubble to the EditorManager so it can
+        // commit/cancel/navigate. Stopping propagation here would swallow them.
+        if (event.key === 'Enter' || event.key === 'Escape' || event.key === 'Tab') {
+            return;
         }
+        // Stop other keys (digits, arrows) from reaching grid navigation.
+        // ArrowUp/Down keep their default increment/decrement behavior.
+        event.stopPropagation();
     }
 }
 
@@ -17549,16 +17797,16 @@ class SelectEditor {
         this.select = document.createElement('select');
         this.select.className = 'zg-editor zg-select-editor';
         // Styling
-        this.select.style.cssText = `
-      width: 100%;
-      height: 100%;
-      border: 2px solid #4caf50;
-      padding: 0 8px;
-      font-family: inherit;
-      font-size: inherit;
-      outline: none;
-      box-sizing: border-box;
-      background: white;
+        this.select.style.cssText = `
+      width: 100%;
+      height: 100%;
+      border: 2px solid #4caf50;
+      padding: 0 8px;
+      font-family: inherit;
+      font-size: inherit;
+      outline: none;
+      box-sizing: border-box;
+      background: white;
     `;
         // Add empty option if allowed
         if (this.options.allowEmpty) {
@@ -17628,7 +17876,12 @@ class SelectEditor {
         }
     }
     handleKeyDown(event) {
-        // Stop propagation to prevent grid navigation
+        // Let Enter/Escape/Tab bubble to the EditorManager so it can
+        // commit/cancel/navigate. Stopping propagation here would swallow them.
+        if (event.key === 'Enter' || event.key === 'Escape' || event.key === 'Tab') {
+            return;
+        }
+        // Stop other keys from reaching grid navigation.
         event.stopPropagation();
     }
 }
@@ -17786,6 +18039,12 @@ class DateEditor {
             type: 'default',
             selectionDatesMode: 'single',
             enableJumpToSelectedDate: true,
+            // Follow the editor's theme (default 'light') instead of the library's
+            // 'system' default, which would render dark on a dark OS even when the
+            // grid is on a light theme. themeAttrDetect:false stops the library from
+            // auto-detecting a page attribute and overriding selectedTheme.
+            selectedTheme: this.options.theme === 'auto' ? 'system' : this.options.theme || 'light',
+            themeAttrDetect: false,
             dateMin: minDate ? formatDateForCalendar(minDate) : '1900-01-01',
             dateMax: maxDate ? formatDateForCalendar(maxDate) : '2099-12-31',
             onClickDate: (self, event) => {
@@ -19065,12 +19324,19 @@ async function initializeCalendars(startDiv, endDiv, options, currentValue, hand
     const { minDate, maxDate } = options;
     const dateMinStr = minDate ? formatDateForCalendar(minDate) : '1900-01-01';
     const dateMaxStr = maxDate ? formatDateForCalendar(maxDate) : '2099-12-31';
+    // Follow the editor's theme (default 'light') instead of the library's
+    // 'system' default, which would render dark on a dark OS even when the grid
+    // is on a light theme. themeAttrDetect:false stops the library from
+    // auto-detecting a page attribute and overriding selectedTheme.
+    const selectedTheme = options.theme === 'auto' ? 'system' : options.theme || 'light';
     try {
         const { Calendar } = await import('vanilla-calendar-pro');
         const startOptions = {
             type: 'default',
             selectionDatesMode: 'single',
             enableJumpToSelectedDate: true,
+            selectedTheme,
+            themeAttrDetect: false,
             dateMin: dateMinStr,
             dateMax: dateMaxStr,
             selectedDates: currentValue.start
@@ -19102,6 +19368,8 @@ async function initializeCalendars(startDiv, endDiv, options, currentValue, hand
             type: 'default',
             selectionDatesMode: 'single',
             enableJumpToSelectedDate: true,
+            selectedTheme,
+            themeAttrDetect: false,
             dateMin: endDateMin,
             dateMax: dateMaxStr,
             selectedDates: currentValue.end
@@ -19357,9 +19625,17 @@ function createContainer$1(params, options) {
     label.className = options.className;
     label.style.display = 'flex';
     label.style.alignItems = 'center';
+    label.style.justifyContent = 'center';
     label.style.cursor = options.disabled ? 'not-allowed' : 'pointer';
     label.style.padding = '8px';
     label.style.userSelect = 'none';
+    // Fill the cell with an opaque, outlined surface so the underlying rendered
+    // checkbox (e.g. CheckboxRenderer's centered box) does not show through.
+    label.style.width = '100%';
+    label.style.height = '100%';
+    label.style.boxSizing = 'border-box';
+    label.style.background = '#fff';
+    label.style.border = '2px solid #4CAF50';
     // Set data attributes
     label.dataset['row'] = String(params.cell.row);
     label.dataset['col'] = String(params.cell.col);
@@ -19840,6 +20116,8 @@ class EditorManager {
         this.getCellElement = options.getCellElement;
         this.onEditStart = options.onEditStart;
         this.onEditEnd = options.onEditEnd;
+        this.onCommit = options.onCommit;
+        this.invalidEditMode = options.invalidEditMode ?? 'block';
         this.boundHandleEditorKeyDown = this.handleEditorKeyDown.bind(this);
         this.boundHandleClickOutside = this.handleClickOutside.bind(this);
         // Register default editors
@@ -19892,10 +20170,10 @@ class EditorManager {
         // Create editor container with correct positioning
         this.editorContainer = document.createElement('div');
         this.editorContainer.className = 'zg-editor-container';
-        this.editorContainer.style.cssText = `
-      position: absolute;
-      z-index: 10002;
-      overflow: visible;
+        this.editorContainer.style.cssText = `
+      position: absolute;
+      z-index: 10002;
+      overflow: visible;
     `;
         this.positionEditorContainer(cellElement);
         // Determine editor - supports both instance and string type
@@ -19972,16 +20250,37 @@ class EditorManager {
         const isValid = validation === undefined ||
             validation === true ||
             (typeof validation === 'object' && validation.valid);
-        if (!isValid) {
-            const message = typeof validation === 'object' ? validation.message : 'Invalid value';
-            alert(message || 'Invalid value');
+        if (!isValid && this.invalidEditMode !== 'commit') {
+            const message = (typeof validation === 'object' && validation.message) || 'Invalid value';
+            if (this.invalidEditMode === 'revert') {
+                // Discard the invalid input and restore the original value so focus can
+                // move on. cancelEdit() emits cancel/end and cleans up.
+                this.cancelEdit();
+            }
+            else {
+                // 'block': keep the editor open and flag it invalid (never blocks with a
+                // native alert(), which spammed on every blur and trapped the user).
+                // Escape cancels; fixing the value lets the commit through.
+                this.markInvalid(message);
+            }
             return;
         }
         // Get new value
         const newValue = this.currentEditor.getValue();
         const cell = this.editingCell;
+        const oldValue = this.originalValue;
         // Set value
         this.setValue(cell.row, cell.col, newValue);
+        // 'commit' mode: the value failed validation but the caller opted to accept
+        // it. Tag the cell (after the re-render from setValue) so the error stays
+        // visible after the editor closes.
+        if (!isValid) {
+            this.flagInvalidCell(cell);
+        }
+        // Record the change for undo/redo (only when the value actually changed)
+        if (this.onCommit && oldValue !== newValue) {
+            this.onCommit(cell, oldValue, newValue);
+        }
         // Emit events
         if (this.events) {
             this.events.emit('edit:commit', {
@@ -20052,6 +20351,36 @@ class EditorManager {
         this.originalValue = null;
         this.editorPopups.clear();
     }
+    /**
+     * Flag the current editor as invalid without blocking the UI.
+     * Highlights the input in red and shows a visible inline message below it
+     * (plus a tooltip); the editor stays open so the user can fix the value or
+     * press Escape.
+     */
+    markInvalid(message) {
+        if (!this.editorContainer)
+            return;
+        const field = this.editorContainer.querySelector('input, select, textarea');
+        if (field) {
+            field.style.borderColor = '#d32f2f';
+            field.title = message;
+        }
+        let hint = this.editorContainer.querySelector('.zg-editor-error');
+        if (!hint) {
+            hint = document.createElement('div');
+            hint.className = 'zg-editor-error';
+            this.editorContainer.appendChild(hint);
+        }
+        hint.textContent = message;
+    }
+    /**
+     * Mark a committed cell as holding an invalid value (used by 'commit' mode).
+     * Adds `.zg-cell-invalid` so the error stays visible after the editor closes.
+     */
+    flagInvalidCell(cell) {
+        const cellElement = this.getCellElement(cell.row, cell.col);
+        cellElement?.classList.add('zg-cell-invalid');
+    }
     /**
      * Get currently editing cell
      */
@@ -20228,6 +20557,20 @@ class EditorManager {
     }
 }
 
+/**
+ * HeaderManager types and interfaces
+ */
+/** Default header row height in pixels when `headerHeight` is not configured. */
+const DEFAULT_HEADER_HEIGHT = 40;
+/**
+ * Resolve the header row height from grid options, falling back to the default.
+ * A non-positive value falls back to the default to avoid a collapsed header.
+ */
+function resolveHeaderHeight(options) {
+    const h = options.headerHeight;
+    return typeof h === 'number' && h > 0 ? h : DEFAULT_HEADER_HEIGHT;
+}
+
 function createEditingPlugin(pluginOpts) {
     return {
         name: 'editing',
@@ -20261,24 +20604,28 @@ function createEditingPlugin(pluginOpts) {
                     const orderedColumns = columnModel.getVisibleColumnsInOrder();
                     return orderedColumns?.[viewCol]?.dataIndex ?? viewCol;
                 };
+                const setCellValue = (row, col, value) => {
+                    const dataRow = mapViewRowToDataRow(row);
+                    const dataCol = mapViewColToDataCol(col);
+                    const rowData = state.data[dataRow];
+                    if (Array.isArray(rowData)) {
+                        rowData[dataCol] = value;
+                    }
+                    store.exec('rendering:updateCells', [{ row, col }]);
+                };
                 if (!editorManager) {
                     editorManager = new EditorManager({
                         container,
                         scrollContainer,
+                        events,
+                        headerHeight: resolveHeaderHeight(options),
+                        invalidEditMode: options.editing?.invalidEditMode,
                         getValue: (row, col) => {
                             const dataRow = mapViewRowToDataRow(row);
                             const dataCol = mapViewColToDataCol(col);
                             return getDataAccessor?.()?.getValue(dataRow, dataCol);
                         },
-                        setValue: (row, col, value) => {
-                            const dataRow = mapViewRowToDataRow(row);
-                            const dataCol = mapViewColToDataCol(col);
-                            const rowData = state.data[dataRow];
-                            if (Array.isArray(rowData)) {
-                                rowData[dataCol] = value;
-                            }
-                            store.exec('rendering:updateCells', [{ row, col }]);
-                        },
+                        setValue: setCellValue,
                         getColumn: (col) => {
                             const dataCol = mapViewColToDataCol(col);
                             return options.columns?.[dataCol];
@@ -20297,6 +20644,11 @@ function createEditingPlugin(pluginOpts) {
                             store.set('editing.active', null);
                             store.exec('rendering:refreshSelectionClasses');
                         },
+                        onCommit: (cell, oldValue, newValue) => {
+                            if (!store.hasAction('undoRedo:recordCellEdit'))
+                                return;
+                            store.exec('undoRedo:recordCellEdit', cell.row, cell.col, oldValue, newValue, setCellValue);
+                        },
                     });
                     store.exec('editing:bind', editorManager);
                     eventUnsubs.push(events.on('scroll', () => {
@@ -20342,6 +20694,10 @@ function createEditingPlugin(pluginOpts) {
                 container.addEventListener('keydown', keydownHandler);
                 domCleanups.push(() => container.removeEventListener('keydown', keydownHandler));
             }, 'editing');
+            // Edit lifecycle events (edit:start/commit/cancel/end) are emitted by the
+            // EditorManager itself via the shared `events` emitter, so both interactive
+            // (Enter/Tab/blur) and programmatic commits fire exactly once. These actions
+            // only drive the manager and keep editing.active in sync.
             store.action('editing:startEdit', (cell) => {
                 if (!editorManager)
                     return;
@@ -20349,30 +20705,20 @@ function createEditingPlugin(pluginOpts) {
                     return;
                 editorManager.startEdit(cell);
                 store.set('editing.active', cell);
-                api.fireEvent('edit:start', { cell, value: editorManager.getCurrentValue?.() });
             }, 'editing');
-            store.action('editing:commitEdit', (value) => {
+            store.action('editing:commitEdit', () => {
                 if (!editorManager)
                     return;
-                const cell = store.get('editing.active');
-                if (!cell)
+                if (!store.get('editing.active'))
                     return;
-                const oldValue = editorManager.getOriginalValue?.();
                 editorManager.commitEdit?.();
                 store.set('editing.active', null);
-                api.fireEvent('edit:commit', { cell, oldValue, newValue: value });
-                api.fireEvent('edit:end', { cell, value, cancelled: false });
             }, 'editing');
             store.action('editing:cancelEdit', () => {
                 if (!editorManager)
                     return;
-                const cell = store.get('editing.active');
                 editorManager.cancelEdit?.();
                 store.set('editing.active', null);
-                if (cell) {
-                    api.fireEvent('edit:cancel', { cell, value: undefined });
-                    api.fireEvent('edit:end', { cell, value: undefined, cancelled: true });
-                }
             }, 'editing');
             api.register('editing', {
                 startEdit: (cell) => store.exec('editing:startEdit', cell),
@@ -20401,74 +20747,731 @@ function createEditingPlugin(pluginOpts) {
     };
 }
 
+const NAV_KEYS = new Set([
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'PageUp',
+    'PageDown',
+    'Home',
+    'End',
+]);
 /**
- * UndoRedoManager - Undo/Redo functionality for grid operations
- *
- * Uses CommandStack from shared package for managing command history.
- * Supports:
- * - Cell value changes
- * - Filter changes
- * - Sort changes
- * - Selection changes
- * - Custom commands
+ * Whether keydown originated in a form control / editable element, in which case
+ * the grid should let the element handle the key rather than navigate cells.
  */
+function isEditableTarget(target) {
+    const el = target;
+    if (!el || !el.tagName)
+        return false;
+    const tag = el.tagName;
+    return (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable === true);
+}
 /**
- * Cell edit command
+ * Compute the destination cell for a navigation key, clamped to grid bounds.
+ * Returns the same reference when the key does not move (already at an edge).
  */
-class CellEditCommand {
-    constructor(row, col, oldValue, newValue, setValue) {
-        this.row = row;
-        this.col = col;
-        this.oldValue = oldValue;
-        this.newValue = newValue;
-        this.setValue = setValue;
-        this.description = `Edit cell (${row}, ${col})`;
-    }
-    execute() {
-        this.setValue(this.row, this.col, this.newValue);
-    }
-    undo() {
-        this.setValue(this.row, this.col, this.oldValue);
-    }
-    redo() {
-        this.execute();
+function nextCell(key, active, step, rows, cols) {
+    let { row, col } = active;
+    switch (key) {
+        case 'ArrowUp':
+            row = Math.max(0, row - 1);
+            break;
+        case 'ArrowDown':
+            row = Math.min(rows - 1, row + 1);
+            break;
+        case 'ArrowLeft':
+            col = Math.max(0, col - 1);
+            break;
+        case 'ArrowRight':
+            col = Math.min(cols - 1, col + 1);
+            break;
+        case 'PageUp':
+            row = Math.max(0, row - step);
+            break;
+        case 'PageDown':
+            row = Math.min(rows - 1, row + step);
+            break;
+        case 'Home':
+            col = 0;
+            break;
+        case 'End':
+            col = cols - 1;
+            break;
+        default:
+            return null;
     }
+    if (row === active.row && col === active.col)
+        return active;
+    return { row, col };
 }
+
 /**
- * Batch cell edit command (for multiple cells)
+ * KeyboardPlugin - Store-driven keyboard cell navigation.
+ *
+ * Maintains `state.activeCell` (the single source read by the rendering active-cell
+ * highlight and the editing Enter-to-edit guard) and drives selection + scroll-into-view
+ * as the active cell moves. Arrow/Page/Home/End move the cursor; Shift extends a range;
+ * Ctrl/Cmd+A selects all. Enter/F2 editing is handled by the editing plugin's own keydown.
  */
-class BatchCellEditCommand {
-    constructor(edits, setValue) {
-        this.edits = edits;
-        this.setValue = setValue;
-        this.description = `Edit ${edits.length} cells`;
-    }
-    execute() {
-        for (const edit of this.edits) {
-            this.setValue(edit.row, edit.col, edit.newValue);
-        }
-    }
-    undo() {
-        // Undo in reverse order
-        for (let i = this.edits.length - 1; i >= 0; i--) {
-            const edit = this.edits[i];
-            this.setValue(edit.row, edit.col, edit.oldValue);
-        }
-    }
-    redo() {
-        this.execute();
-    }
+function createKeyboardPlugin(pluginOpts) {
+    return {
+        name: 'keyboard',
+        phase: 46,
+        dependencies: ['core'],
+        setup(store, api) {
+            const domCleanups = [];
+            function colCount() {
+                return pluginOpts?.options?.colCount ?? 0;
+            }
+            function rowCount() {
+                return pluginOpts?.options?.rowCount ?? 0;
+            }
+            function getScroller() {
+                const fn = api.getMethod('rendering', 'getScroller');
+                return fn ? fn() : null;
+            }
+            function pageStep(scroller, scrollContainer) {
+                if (scroller && scrollContainer) {
+                    const top = scrollContainer.scrollTop;
+                    const rows = scroller.getRowAtOffset(top + scrollContainer.clientHeight) -
+                        scroller.getRowAtOffset(top);
+                    if (rows > 0)
+                        return rows;
+                }
+                return 10;
+            }
+            function scrollIntoView(cell) {
+                const scroller = getScroller();
+                const scrollContainer = store.get('dom.scrollContainer');
+                if (!scroller || !scrollContainer)
+                    return;
+                const pos = scroller.getCellPosition(cell.row, cell.col);
+                const st = scrollContainer.scrollTop;
+                const sl = scrollContainer.scrollLeft;
+                const ch = scrollContainer.clientHeight;
+                const cw = scrollContainer.clientWidth;
+                let newTop = st;
+                let newLeft = sl;
+                if (pos.y < st)
+                    newTop = pos.y;
+                else if (pos.y + pos.height > st + ch)
+                    newTop = pos.y + pos.height - ch;
+                if (pos.x < sl)
+                    newLeft = pos.x;
+                else if (pos.x + pos.width > sl + cw)
+                    newLeft = pos.x + pos.width - cw;
+                if (newTop !== st || newLeft !== sl) {
+                    scrollContainer.scrollTop = newTop;
+                    scrollContainer.scrollLeft = newLeft;
+                    if (store.hasAction('rendering:handleScroll')) {
+                        store.exec('rendering:handleScroll', newTop, newLeft);
+                    }
+                }
+            }
+            let anchor = null;
+            function setActive(cell, extend) {
+                const state = pluginOpts?.state;
+                if (state)
+                    state.activeCell = cell;
+                if (extend && anchor && store.hasAction('selection:selectRange')) {
+                    store.exec('selection:selectRange', anchor.row, anchor.col, cell.row, cell.col);
+                }
+                else if (store.hasAction('selection:selectCell')) {
+                    store.exec('selection:selectCell', cell.row, cell.col);
+                    anchor = cell;
+                }
+                else {
+                    anchor = cell;
+                }
+                // selection:* already refreshes classes via lifecycle; refresh directly when
+                // there is no selection plugin so the active-cell highlight still repaints.
+                if (!store.hasAction('selection:selectCell') && store.hasAction('rendering:refreshSelectionClasses')) {
+                    store.exec('rendering:refreshSelectionClasses');
+                }
+                scrollIntoView(cell);
+            }
+            const handleKeyDown = (event) => {
+                const state = pluginOpts?.state;
+                if (!state || state.editingCell)
+                    return;
+                if (isEditableTarget(event.target))
+                    return;
+                const rows = rowCount();
+                const cols = colCount();
+                if (rows <= 0 || cols <= 0)
+                    return;
+                const cmd = event.ctrlKey || event.metaKey;
+                const key = event.key;
+                if (cmd && (key === 'a' || key === 'A')) {
+                    if (store.hasAction('selection:selectAll')) {
+                        store.exec('selection:selectAll', rows);
+                        event.preventDefault();
+                    }
+                    return;
+                }
+                if (!NAV_KEYS.has(key))
+                    return;
+                const active = state.activeCell;
+                if (!active) {
+                    setActive({ row: 0, col: 0 }, false);
+                    event.preventDefault();
+                    return;
+                }
+                let target;
+                if (cmd && key === 'Home') {
+                    target = { row: 0, col: 0 };
+                }
+                else if (cmd && key === 'End') {
+                    target = { row: rows - 1, col: cols - 1 };
+                }
+                else {
+                    const scrollContainer = store.get('dom.scrollContainer');
+                    const step = key === 'PageUp' || key === 'PageDown'
+                        ? pageStep(getScroller(), scrollContainer)
+                        : 1;
+                    target = nextCell(key, active, step, rows, cols);
+                }
+                if (!target)
+                    return;
+                event.preventDefault();
+                if (target === active)
+                    return;
+                setActive(target, event.shiftKey);
+            };
+            const focusOnCellClick = (event) => {
+                const container = pluginOpts?.container;
+                const state = pluginOpts?.state;
+                if (!container || (state && state.editingCell))
+                    return;
+                const cell = event.target.closest('.zg-cell');
+                if (cell)
+                    container.focus();
+            };
+            store.action('keyboard:setup', () => {
+                const container = pluginOpts?.container;
+                if (!container)
+                    return;
+                if (!container.hasAttribute('tabindex')) {
+                    container.setAttribute('tabindex', '0');
+                }
+                container.addEventListener('keydown', handleKeyDown);
+                container.addEventListener('mousedown', focusOnCellClick);
+                domCleanups.push(() => container.removeEventListener('keydown', handleKeyDown));
+                domCleanups.push(() => container.removeEventListener('mousedown', focusOnCellClick));
+            }, 'keyboard');
+            api.register('keyboard', {
+                setActiveCell: (cell) => setActive(cell, false),
+                getActiveCell: () => pluginOpts?.state?.activeCell ?? null,
+            });
+            return { teardown: [() => domCleanups.forEach((fn) => fn())] };
+        },
+    };
 }
+
 /**
- * Filter change command
- */
-class FilterChangeCommand {
-    constructor(oldFilters, newFilters, setFilters) {
-        this.oldFilters = oldFilters;
-        this.newFilters = newFilters;
-        this.setFilters = setFilters;
-        this.description = 'Change filters';
-    }
+ * ClipboardManager - Handles copy/cut/paste operations
+ *
+ * Supports multiple formats:
+ * - text/plain: TSV (tab-separated values)
+ * - text/html: HTML table format
+ *
+ * Compatible with Excel and Google Sheets.
+ *
+ * @example
+ * ```typescript
+ * const clipboard = new ClipboardManager({
+ *   getValue: (row, col) => data[row][col],
+ *   setValue: (row, col, value) => { data[row][col] = value; },
+ * });
+ *
+ * // Copy selection
+ * await clipboard.copy([
+ *   { startRow: 0, startCol: 0, endRow: 2, endCol: 2 },
+ * ]);
+ *
+ * // Paste at location
+ * await clipboard.paste(5, 0);
+ * ```
+ */
+class ClipboardManager {
+    constructor(options) {
+        this.events = options.events;
+        this.getValue = options.getValue;
+        this.setValue = options.setValue;
+        this.deleteValue = options.deleteValue;
+        this.includeHeaders = options.includeHeaders ?? false;
+        this.getColumnHeader = options.getColumnHeader;
+        this.getRowCount = options.getRowCount;
+        this.getColumnCount = options.getColumnCount;
+    }
+    /**
+     * Clamp a range's end bounds to the real grid dimensions. Whole-row and
+     * whole-column selections carry MAX_SAFE_INTEGER sentinels; iterating those
+     * literally would freeze the UI and overflow array lengths.
+     */
+    clampRange(range) {
+        const startRow = Math.max(0, range.startRow);
+        const startCol = Math.max(0, range.startCol);
+        let endRow = range.endRow;
+        let endCol = range.endCol;
+        if (this.getRowCount)
+            endRow = Math.min(endRow, this.getRowCount() - 1);
+        if (this.getColumnCount)
+            endCol = Math.min(endCol, this.getColumnCount() - 1);
+        return { startRow, startCol, endRow, endCol };
+    }
+    /**
+     * Copy selected ranges to clipboard
+     * @param ranges - Ranges to copy
+     */
+    async copy(ranges) {
+        if (ranges.length === 0)
+            return;
+        const data = this.extractData(ranges);
+        const tsvText = this.toTSV(data);
+        const htmlText = this.toHTML(data);
+        try {
+            // Write to clipboard with multiple formats
+            await navigator.clipboard.write([
+                new ClipboardItem({
+                    'text/plain': new Blob([tsvText], { type: 'text/plain' }),
+                    'text/html': new Blob([htmlText], { type: 'text/html' }),
+                }),
+            ]);
+            // Emit event
+            if (this.events) {
+                this.events.emit('copy', {
+                    ranges,
+                    data: tsvText,
+                });
+            }
+        }
+        catch (error) {
+            console.error('Failed to copy to clipboard:', error);
+            // Fallback to older API
+            try {
+                await navigator.clipboard.writeText(tsvText);
+            }
+            catch (fallbackError) {
+                console.error('Fallback copy also failed:', fallbackError);
+            }
+        }
+    }
+    /**
+     * Cut selected ranges to clipboard (copy + delete)
+     * @param ranges - Ranges to cut
+     */
+    async cut(ranges) {
+        if (ranges.length === 0)
+            return;
+        // Copy first
+        await this.copy(ranges);
+        // Then delete values
+        for (const rawRange of ranges) {
+            const range = this.clampRange(rawRange);
+            for (let row = range.startRow; row <= range.endRow; row++) {
+                for (let col = range.startCol; col <= range.endCol; col++) {
+                    if (this.deleteValue) {
+                        this.deleteValue(row, col);
+                    }
+                    else {
+                        this.setValue(row, col, null);
+                    }
+                }
+            }
+        }
+        // Emit event
+        if (this.events) {
+            this.events.emit('cut', {
+                ranges,
+                data: '', // Already emitted in copy
+            });
+        }
+    }
+    /**
+     * Paste from clipboard at target location
+     * @param targetRow - Target row
+     * @param targetCol - Target column
+     */
+    async paste(targetRow, targetCol) {
+        try {
+            // Try to read multiple formats
+            const items = await navigator.clipboard.read();
+            for (const item of items) {
+                // Prefer HTML format (preserves formatting)
+                if (item.types.includes('text/html')) {
+                    const blob = await item.getType('text/html');
+                    const html = await blob.text();
+                    const data = this.parseHTML(html);
+                    this.pasteData(data, targetRow, targetCol);
+                    return;
+                }
+                // Fallback to plain text
+                if (item.types.includes('text/plain')) {
+                    const blob = await item.getType('text/plain');
+                    const text = await blob.text();
+                    const data = this.parseTSV(text);
+                    this.pasteData(data, targetRow, targetCol);
+                    return;
+                }
+            }
+        }
+        catch (error) {
+            console.error('Failed to paste from clipboard:', error);
+            // Fallback to text API
+            try {
+                const text = await navigator.clipboard.readText();
+                const data = this.parseTSV(text);
+                this.pasteData(data, targetRow, targetCol);
+            }
+            catch (fallbackError) {
+                console.error('Fallback paste also failed:', fallbackError);
+            }
+        }
+    }
+    /**
+     * Extract a copyable matrix from one or more ranges. All ranges are projected
+     * onto their combined bounding box; a cell that falls outside every selected
+     * range is emitted empty. A single dense range reduces to that rectangle, so
+     * discontiguous multi-selections copy with their relative layout preserved
+     * (Excel/Sheets behaviour).
+     */
+    extractData(rawRanges) {
+        const ranges = rawRanges.map((r) => this.clampRange(r));
+        let minRow = Infinity;
+        let maxRow = -Infinity;
+        let minCol = Infinity;
+        let maxCol = -Infinity;
+        for (const r of ranges) {
+            if (r.startRow < minRow)
+                minRow = r.startRow;
+            if (r.endRow > maxRow)
+                maxRow = r.endRow;
+            if (r.startCol < minCol)
+                minCol = r.startCol;
+            if (r.endCol > maxCol)
+                maxCol = r.endCol;
+        }
+        const inSelection = (row, col) => ranges.some((r) => row >= r.startRow && row <= r.endRow && col >= r.startCol && col <= r.endCol);
+        const data = [];
+        // Include headers if requested
+        if (this.includeHeaders && this.getColumnHeader) {
+            const headers = [];
+            for (let col = minCol; col <= maxCol; col++) {
+                headers.push(this.getColumnHeader(col));
+            }
+            data.push(headers);
+        }
+        // Extract cell values across the bounding box
+        for (let row = minRow; row <= maxRow; row++) {
+            const rowData = [];
+            for (let col = minCol; col <= maxCol; col++) {
+                rowData.push(inSelection(row, col) ? this.getValue(row, col) : null);
+            }
+            data.push(rowData);
+        }
+        return data;
+    }
+    /**
+     * Convert data to TSV format
+     */
+    toTSV(data) {
+        return data.map((row) => row.map((cell) => this.formatCellForTSV(cell)).join('\t')).join('\n');
+    }
+    /**
+     * Format cell value for TSV
+     */
+    formatCellForTSV(value) {
+        if (value == null)
+            return '';
+        const str = String(value);
+        // Escape tabs and newlines
+        return str.replace(/\t/g, ' ').replace(/\n/g, ' ');
+    }
+    /**
+     * Convert data to HTML table format
+     */
+    toHTML(data) {
+        let html = '<table>';
+        for (let i = 0; i < data.length; i++) {
+            const row = data[i];
+            const tag = i === 0 && this.includeHeaders ? 'th' : 'td';
+            html += '<tr>';
+            for (const cell of row) {
+                html += `<${tag}>${this.escapeHTML(String(cell ?? ''))}</${tag}>`;
+            }
+            html += '</tr>';
+        }
+        html += '</table>';
+        return html;
+    }
+    /**
+     * Escape HTML special characters
+     */
+    escapeHTML(str) {
+        return str
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+    }
+    /**
+     * Parse TSV text to 2D array
+     */
+    parseTSV(text) {
+        const lines = text.split(/\r?\n/);
+        return lines.map((line) => line.split('\t'));
+    }
+    /**
+     * Parse HTML table to 2D array
+     */
+    parseHTML(html) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const table = doc.querySelector('table');
+        if (!table) {
+            // No table found, treat as plain text
+            return this.parseTSV(doc.body.textContent || '');
+        }
+        const data = [];
+        const rows = Array.from(table.querySelectorAll('tr'));
+        for (const row of rows) {
+            const cells = Array.from(row.querySelectorAll('td, th'));
+            const rowData = [];
+            for (const cell of cells) {
+                rowData.push(cell.textContent || '');
+            }
+            if (rowData.length > 0) {
+                data.push(rowData);
+            }
+        }
+        return data;
+    }
+    /**
+     * Paste data at target location
+     */
+    pasteData(data, targetRow, targetCol) {
+        for (let i = 0; i < data.length; i++) {
+            const row = data[i];
+            for (let j = 0; j < row.length; j++) {
+                const value = row[j];
+                this.setValue(targetRow + i, targetCol + j, value);
+            }
+        }
+        // Emit event
+        if (this.events) {
+            this.events.emit('paste', {
+                cell: { row: targetRow, col: targetCol },
+                data: this.toTSV(data),
+            });
+        }
+    }
+}
+
+/**
+ * ClipboardPlugin - Wires copy/cut/paste (Ctrl/Cmd+C/X/V) to the ClipboardManager.
+ *
+ * Operates in view coordinates: ranges come from `selection.ranges` (falling back to a
+ * single-cell range at `state.activeCell`), and get/set map view row/col to data row/col
+ * the same way the editing plugin does, so TSV/HTML round-trips with Excel and Sheets.
+ */
+function createClipboardPlugin(pluginOpts) {
+    return {
+        name: 'clipboard',
+        phase: 47,
+        dependencies: ['core'],
+        setup(store, api) {
+            const domCleanups = [];
+            let manager = null;
+            const mapViewRowToDataRow = (viewRow) => {
+                const viewIndices = store.get('rows.viewIndices');
+                return viewIndices?.[viewRow] ?? viewRow;
+            };
+            const mapViewColToDataCol = (viewCol) => {
+                const columnModel = pluginOpts?.getColumnModel?.();
+                if (!columnModel)
+                    return viewCol;
+                const ordered = columnModel.getVisibleColumnsInOrder();
+                return ordered?.[viewCol]?.dataIndex ?? viewCol;
+            };
+            const setCellValue = (row, col, value) => {
+                const state = pluginOpts?.state;
+                if (!state)
+                    return;
+                const dataRow = mapViewRowToDataRow(row);
+                const dataCol = mapViewColToDataCol(col);
+                const rowData = state.data[dataRow];
+                if (Array.isArray(rowData))
+                    rowData[dataCol] = value;
+                store.exec('rendering:updateCells', [{ row, col }]);
+            };
+            function getManager() {
+                if (manager)
+                    return manager;
+                manager = new ClipboardManager({
+                    events: pluginOpts?.events,
+                    getValue: (row, col) => {
+                        const dataRow = mapViewRowToDataRow(row);
+                        const dataCol = mapViewColToDataCol(col);
+                        return pluginOpts?.getDataAccessor?.()?.getValue(dataRow, dataCol);
+                    },
+                    setValue: setCellValue,
+                    getRowCount: () => {
+                        const viewIndices = store.get('rows.viewIndices');
+                        if (viewIndices)
+                            return viewIndices.length;
+                        return pluginOpts?.state?.data?.length ?? 0;
+                    },
+                    getColumnCount: () => {
+                        const columnModel = pluginOpts?.getColumnModel?.();
+                        const ordered = columnModel?.getVisibleColumnsInOrder?.();
+                        return ordered?.length ?? pluginOpts?.options?.columns?.length ?? 0;
+                    },
+                });
+                return manager;
+            }
+            function currentRanges() {
+                const ranges = store.get('selection.ranges');
+                if (ranges && ranges.length > 0)
+                    return ranges;
+                const active = pluginOpts?.state?.activeCell;
+                if (active) {
+                    return [{ startRow: active.row, startCol: active.col, endRow: active.row, endCol: active.col }];
+                }
+                return [];
+            }
+            function pasteTarget() {
+                const active = pluginOpts?.state?.activeCell;
+                if (active)
+                    return active;
+                const ranges = store.get('selection.ranges');
+                if (ranges && ranges.length > 0) {
+                    return { row: ranges[0].startRow, col: ranges[0].startCol };
+                }
+                return null;
+            }
+            const handleKeyDown = (event) => {
+                const state = pluginOpts?.state;
+                if (!state || state.editingCell)
+                    return;
+                if (!(event.ctrlKey || event.metaKey))
+                    return;
+                if (isEditableTarget(event.target))
+                    return;
+                const key = event.key.toLowerCase();
+                if (key === 'c') {
+                    const ranges = currentRanges();
+                    if (ranges.length === 0)
+                        return;
+                    event.preventDefault();
+                    void getManager().copy(ranges);
+                }
+                else if (key === 'x') {
+                    const ranges = currentRanges();
+                    if (ranges.length === 0)
+                        return;
+                    event.preventDefault();
+                    void getManager().cut(ranges);
+                }
+                else if (key === 'v') {
+                    const target = pasteTarget();
+                    if (!target)
+                        return;
+                    event.preventDefault();
+                    void getManager().paste(target.row, target.col);
+                }
+            };
+            store.action('clipboard:setup', () => {
+                const container = pluginOpts?.container;
+                if (!container)
+                    return;
+                container.addEventListener('keydown', handleKeyDown);
+                domCleanups.push(() => container.removeEventListener('keydown', handleKeyDown));
+            }, 'clipboard');
+            api.register('clipboard', {
+                copy: () => getManager().copy(currentRanges()),
+                cut: () => getManager().cut(currentRanges()),
+                paste: () => {
+                    const target = pasteTarget();
+                    return target ? getManager().paste(target.row, target.col) : Promise.resolve();
+                },
+            });
+            return { teardown: [() => domCleanups.forEach((fn) => fn())] };
+        },
+    };
+}
+
+/**
+ * UndoRedoManager - Undo/Redo functionality for grid operations
+ *
+ * Uses CommandStack from shared package for managing command history.
+ * Supports:
+ * - Cell value changes
+ * - Filter changes
+ * - Sort changes
+ * - Selection changes
+ * - Custom commands
+ */
+/**
+ * Cell edit command
+ */
+class CellEditCommand {
+    constructor(row, col, oldValue, newValue, setValue) {
+        this.row = row;
+        this.col = col;
+        this.oldValue = oldValue;
+        this.newValue = newValue;
+        this.setValue = setValue;
+        this.description = `Edit cell (${row}, ${col})`;
+    }
+    execute() {
+        this.setValue(this.row, this.col, this.newValue);
+    }
+    undo() {
+        this.setValue(this.row, this.col, this.oldValue);
+    }
+    redo() {
+        this.execute();
+    }
+}
+/**
+ * Batch cell edit command (for multiple cells)
+ */
+class BatchCellEditCommand {
+    constructor(edits, setValue) {
+        this.edits = edits;
+        this.setValue = setValue;
+        this.description = `Edit ${edits.length} cells`;
+    }
+    execute() {
+        for (const edit of this.edits) {
+            this.setValue(edit.row, edit.col, edit.newValue);
+        }
+    }
+    undo() {
+        // Undo in reverse order
+        for (let i = this.edits.length - 1; i >= 0; i--) {
+            const edit = this.edits[i];
+            this.setValue(edit.row, edit.col, edit.oldValue);
+        }
+    }
+    redo() {
+        this.execute();
+    }
+}
+/**
+ * Filter change command
+ */
+class FilterChangeCommand {
+    constructor(oldFilters, newFilters, setFilters) {
+        this.oldFilters = oldFilters;
+        this.newFilters = newFilters;
+        this.setFilters = setFilters;
+        this.description = 'Change filters';
+    }
     execute() {
         this.setFilters(this.newFilters);
     }
@@ -20832,42 +21835,45 @@ function createDomPlugin(opts) {
             store.extend('dom.canvas', null, 'dom', 5);
             store.extend('dom.headerContainer', null, 'dom', 5);
             store.action('dom:setup', () => {
+                if (options.hideLastColumnBorder) {
+                    container.classList.add('zg-hide-last-col-border');
+                }
                 // Create viewport
                 viewport = document.createElement('div');
                 viewport.className = 'zg-viewport';
-                viewport.style.cssText = `
-            position: relative;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
+                viewport.style.cssText = `
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
           `;
                 // Create scroll container
                 scrollContainer = document.createElement('div');
                 scrollContainer.className = 'zg-scroll-container';
-                const headerHeight = options.columns && options.columns.length > 0 ? 40 : 0;
-                scrollContainer.style.cssText = `
-            position: absolute;
-            top: ${headerHeight}px;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            overflow: auto;
+                const headerHeight = options.columns && options.columns.length > 0 ? resolveHeaderHeight(options) : 0;
+                scrollContainer.style.cssText = `
+            position: absolute;
+            top: ${headerHeight}px;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            overflow: auto;
           `;
                 // Create canvas
                 canvas = document.createElement('div');
                 canvas.className = 'zg-canvas';
-                canvas.style.cssText = `
-            position: relative;
-            pointer-events: none;
+                canvas.style.cssText = `
+            position: relative;
+            pointer-events: none;
           `;
                 // Create cells container
                 const cellsContainer = document.createElement('div');
                 cellsContainer.className = 'zg-cells';
-                cellsContainer.style.cssText = `
-            position: absolute;
-            top: 0;
-            left: 0;
-            pointer-events: auto;
+                cellsContainer.style.cssText = `
+            position: absolute;
+            top: 0;
+            left: 0;
+            pointer-events: auto;
           `;
                 // Create header container if columns defined
                 if (options.columns && options.columns.length > 0) {
@@ -22700,16 +23706,6 @@ function createDropdownTrigger(displayText) {
     arrow.innerHTML = '▼';
     arrow.setAttribute('aria-hidden', 'true');
     trigger.appendChild(arrow);
-    trigger.style.width = '100%';
-    trigger.style.padding = '6px 8px';
-    trigger.style.border = '1px solid #ccc';
-    trigger.style.borderRadius = '4px';
-    trigger.style.backgroundColor = '#fff';
-    trigger.style.cursor = 'pointer';
-    trigger.style.textAlign = 'left';
-    trigger.style.display = 'flex';
-    trigger.style.justifyContent = 'space-between';
-    trigger.style.alignItems = 'center';
     return trigger;
 }
 /**
@@ -22721,13 +23717,7 @@ function createDropdownMenu$1(maxHeight) {
     menu.style.display = 'none';
     menu.style.position = 'absolute';
     menu.style.zIndex = '1000';
-    menu.style.backgroundColor = '#fff';
-    menu.style.border = '1px solid #ccc';
-    menu.style.borderRadius = '4px';
-    menu.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
     menu.style.maxHeight = `${maxHeight}px`;
-    menu.style.overflowY = 'auto';
-    menu.style.minWidth = '200px';
     return menu;
 }
 /**
@@ -22736,17 +23726,11 @@ function createDropdownMenu$1(maxHeight) {
 function createSearchInput$1() {
     const searchContainer = document.createElement('div');
     searchContainer.className = 'zg-dropdown-search';
-    searchContainer.style.padding = '8px';
-    searchContainer.style.borderBottom = '1px solid #eee';
     const searchInput = document.createElement('input');
     searchInput.type = 'text';
     searchInput.className = 'zg-dropdown-search-input';
     searchInput.placeholder = 'Search...';
     searchInput.setAttribute('aria-label', 'Search options');
-    searchInput.style.width = '100%';
-    searchInput.style.padding = '4px 8px';
-    searchInput.style.border = '1px solid #ccc';
-    searchInput.style.borderRadius = '3px';
     searchContainer.appendChild(searchInput);
     return searchContainer;
 }
@@ -22785,11 +23769,6 @@ function createGroupHeader(groupName) {
     groupHeader.className = 'zg-dropdown-group-header';
     groupHeader.textContent = groupName;
     groupHeader.setAttribute('role', 'presentation');
-    groupHeader.style.padding = '8px 12px';
-    groupHeader.style.fontSize = '12px';
-    groupHeader.style.fontWeight = 'bold';
-    groupHeader.style.color = '#666';
-    groupHeader.style.backgroundColor = '#f5f5f5';
     return groupHeader;
 }
 /**
@@ -22809,10 +23788,6 @@ function createOptionElement$1(option, isSelected, optionRenderer) {
     if (option.disabled) {
         optionEl.setAttribute('aria-disabled', 'true');
     }
-    optionEl.style.padding = '8px 12px';
-    optionEl.style.cursor = option.disabled ? 'not-allowed' : 'pointer';
-    optionEl.style.backgroundColor = isSelected ? '#e3f2fd' : '#fff';
-    optionEl.style.color = option.disabled ? '#999' : '#333';
     return optionEl;
 }
 /**
@@ -22822,9 +23797,6 @@ function createNoOptionsElement() {
     const noOptions = document.createElement('div');
     noOptions.className = 'zg-dropdown-no-options';
     noOptions.textContent = 'No options available';
-    noOptions.style.padding = '12px';
-    noOptions.style.color = '#999';
-    noOptions.style.textAlign = 'center';
     return noOptions;
 }
 /**
@@ -23041,8 +24013,13 @@ class DropdownState {
                 viewportPadding: 8,
             },
             scrollOptions: {
+                // Trigger lives in a virtualized cell. While the cell is on-screen, keep
+                // the menu glued to it (reposition); the moment it scrolls out of the
+                // viewport, close. closeOnOutOfView fires while the element is still in
+                // the viewport, i.e. before the cell is recycled to another row, so the
+                // menu never anchors to the wrong row.
                 closeOnOutOfView: true,
-                repositionOnScroll: false,
+                repositionOnScroll: true,
             },
             restoreFocusOnClose: true,
             restoreFocusTo: trigger,
@@ -23413,6 +24390,8 @@ class DropdownEventManager {
  */
 class DropdownRenderer {
     constructor(options = {}) {
+        /** Interactive: attaches listeners and portals its menu to <body>; must not be HTML-cached. */
+        this.cacheable = false;
         // Throw if options array is empty or missing
         if (!options.options || options.options.length === 0) {
             throw new Error('DropdownRenderer requires at least one option');
@@ -23619,8 +24598,16 @@ class LoadingIndicator {
             clearTimeout(this.minDisplayTimeout);
             this.minDisplayTimeout = null;
         }
-        // Remove existing indicator if present
-        this.hide();
+        // Remove the existing indicator immediately. A new load is starting, so we
+        // replace the node now rather than letting hide()'s minDisplayTime defer
+        // removal — deferral would orphan the old node in the DOM (a stuck overlay)
+        // once this.container is reassigned below. Matters when rapid loads fire
+        // interleaved start/end events (e.g. a backend filter firing several
+        // requests in one tick).
+        if (this.container?.parentElement) {
+            this.container.parentElement.removeChild(this.container);
+        }
+        this.container = null;
         // Create new indicator
         this.container = this.render(state);
         this.container.classList.add('zg-loading-active');
@@ -24012,7 +24999,10 @@ function createRenderingPlugin(opts) {
                 loadingIndicator = new LoadingIndicator(options.loading);
             }
             function mapRowToDataIndex(row) {
-                const viewIndices = store.get('rows.viewIndices');
+                // getUnphased: rows.viewIndices is a phase-Infinity computed, but rendering
+                // runs at phase 30 (and can be driven synchronously from the phase-30 sync
+                // effect). A phased read here would trip checkPhase and abort the render.
+                const viewIndices = store.getUnphased('rows.viewIndices');
                 if (viewIndices)
                     return viewIndices[row];
                 return row;
@@ -24243,15 +25233,18 @@ function createRenderingPlugin(opts) {
             store.action('rendering:registerRenderer', (name, renderer) => {
                 registry.register(name, renderer);
             }, 'rendering');
-            // Reactive sync: when viewIndices changes, auto-update row count + canvas + cache + refresh
+            // Single-responsibility viewport sync: resize the virtual scroller +
+            // canvas to the current pipeline view, drop stale cache, and re-render.
+            // This is the one shared implementation — explicit callers (sort,
+            // pagination, init) run it synchronously via the action below; the
+            // effect is a reactive safety net for pipeline changes that don't route
+            // through an explicit call (e.g. filter, programmatic sort/filter).
             let lastViewIndicesRef;
-            store.effect('rendering:syncAfterPipeline', () => {
-                const viewIndices = store.get('rows.viewIndices');
-                if (viewIndices === lastViewIndicesRef)
-                    return;
-                lastViewIndicesRef = viewIndices;
+            function syncViewport() {
                 if (!scroller)
                     return;
+                const viewIndices = store.getUnphased('rows.viewIndices');
+                lastViewIndicesRef = viewIndices;
                 const visibleCount = viewIndices ? viewIndices.length : options.rowCount;
                 scroller.setRowCount(visibleCount);
                 const canvas = store.get('dom.canvas');
@@ -24261,8 +25254,23 @@ function createRenderingPlugin(opts) {
                 }
                 if (cache)
                     cache.clear();
-                if (positioner)
-                    positioner.refresh();
+                // Re-render against the freshly-clamped visible range with fresh data.
+                // refresh() can't be used here: it reuses the previous range (out of
+                // bounds when the page shrinks) and skips cells whose row/col key is
+                // unchanged even though the underlying data changed (page switch).
+                if (positioner) {
+                    positioner.clearRenderedCells();
+                    positioner.renderVisibleCells(state.scrollPosition.top, state.scrollPosition.left);
+                }
+            }
+            store.action('rendering:syncAfterPipeline', syncViewport, 'rendering');
+            store.effect('rendering:syncAfterPipeline:auto', () => {
+                const viewIndices = store.getUnphased('rows.viewIndices');
+                // Explicit callers advance lastViewIndicesRef, so this coalesces to a
+                // no-op on the next frame and avoids a duplicate render.
+                if (viewIndices === lastViewIndicesRef)
+                    return;
+                syncViewport();
             }, 'rendering', 30);
             // Setup loading listeners (store unsubs for teardown)
             const eventUnsubs = [];
@@ -24289,6 +25297,7 @@ function createRenderingPlugin(opts) {
                 clearCache: () => store.exec('rendering:clearCache'),
                 handleScroll: (top, left) => store.exec('rendering:handleScroll', top, left),
                 updateCanvasSize: () => store.exec('rendering:updateCanvasSize'),
+                syncAfterPipeline: () => store.exec('rendering:syncAfterPipeline'),
                 setRowCount: (count) => store.exec('rendering:setRowCount', count),
                 setColCount: (count) => store.exec('rendering:setColCount', count),
                 registerRenderer: (name, renderer) => store.exec('rendering:registerRenderer', name, renderer),
@@ -25533,6 +26542,7 @@ class HeaderRendererRegistry {
  * Register default header renderers
  */
 function registerDefaultRenderers(registry) {
+    registry.setDefaultRenderer(new TextHeaderRenderer());
     registry.register('text', () => new TextHeaderRenderer());
     registry.register('sortable', () => new SortableHeaderRenderer());
     registry.register('filterable', () => new FilterableHeaderRenderer());
@@ -25706,8 +26716,17 @@ function renderHeaderCell(column, columnId, columnIndex, headerCellsContainer, r
     const element = document.createElement('div');
     element.dataset['columnId'] = columnId;
     element.dataset['columnIndex'] = String(columnIndex);
+    // Reserve the column width before rendering so renderers that don't size the
+    // cell themselves (e.g. custom renderers) don't collapse under the flex row.
+    applyHeaderCellSizing(element, params);
     // Render
     renderer.render(element, params);
+    // Custom renderers only own render/update/destroy. For sortable columns whose
+    // renderer does not wire sort itself, delegate the sort click so header clicks
+    // still toggle sort (and sort-driven header state keeps updating).
+    if (column.sortable && !renderer.handlesSortInteraction && params.emit) {
+        attachSortClickFallback(element, params);
+    }
     // Add to container
     headerCellsContainer.appendChild(element);
     // Store metadata by column ID (for reactive updates)
@@ -25719,6 +26738,36 @@ function renderHeaderCell(column, columnId, columnIndex, headerCellsContainer, r
         lastParams: params,
     });
 }
+/**
+ * Apply the structural sizing every header cell needs (column width, header
+ * height, no flex shrink, border-box). Renderers may still override these, but
+ * this baseline keeps custom renderers from collapsing to zero width.
+ */
+function applyHeaderCellSizing(element, params) {
+    element.style.width = `${params.width}px`;
+    element.style.height = `${params.height}px`;
+    element.style.flexShrink = '0';
+    element.style.boxSizing = 'border-box';
+}
+/**
+ * Attach a default sort-click handler for sortable columns whose renderer does
+ * not handle the interaction itself. The element is freshly created per render
+ * and discarded on refresh/destroy, so the listener needs no explicit teardown.
+ */
+function attachSortClickFallback(element, params) {
+    element.style.cursor = 'pointer';
+    element.addEventListener('click', (e) => {
+        const native = e;
+        params.emit?.('header:sort:click', {
+            columnIndex: params.columnIndex,
+            column: params.column,
+            nextDirection: params.sortDirection === 'asc' ? 'desc' : params.sortDirection === 'desc' ? null : 'asc',
+            additive: !!(native.shiftKey || native.ctrlKey || native.metaKey),
+            trigger: 'click',
+            nativeEvent: native,
+        });
+    });
+}
 /**
  * Destroy all headers
  */
@@ -25814,6 +26863,9 @@ function updateHeaderByColumnId(columnId, headerCells, columnModel, config, head
     const filterState = config.getFilterState?.() ?? [];
     // Update params
     const params = buildRenderParams(metadata.lastParams.column, metadata.columnIndex, columnState.dataIndex, columnState.actualWidth, headerHeight, sortState, filterState, config.eventEmitter);
+    // Keep the reserved width in sync (e.g. column resize) before the renderer
+    // updates, so custom renderers that don't resize themselves stay correct.
+    applyHeaderCellSizing(metadata.element, params);
     // Update the renderer
     metadata.renderer.update(metadata.element, params);
     metadata.lastParams = params;
@@ -25896,13 +26948,13 @@ function createHeaderPlugin(opts) {
         phase: 70,
         dependencies: ['core', 'dom', 'column'],
         setup(store, api) {
-            const { events, getColumnModel } = opts;
+            const { events, getColumnModel, options } = opts;
             const registry = new HeaderRendererRegistry();
             const headerCells = new Map();
             let headerCellsContainer = null;
             let columnSubscription = null;
             const eventUnsubs = [];
-            const headerHeight = 40;
+            const headerHeight = resolveHeaderHeight(options);
             // Register default renderers
             registerDefaultRenderers(registry);
             function getSortState() {
@@ -26480,6 +27532,25 @@ function createPaginationPlugin(opts) {
             store.extend('pagination.currentPage', 0, 'pagination', 80);
             store.extend('pagination.pageSize', options.pagination.pageSize ?? 100, 'pagination', 80);
             store.extend('pagination.totalPages', 0, 'pagination', 80);
+            // Frontend pagination: slice the post-sort/filter view down to the
+            // current page so virtual scrolling only renders that page. Backend
+            // pagination is sliced by the data plugin, so no pipeline phase there.
+            const isFrontend = resolveQueryExecutionMode(options.dataMode) !== 'backend';
+            if (isFrontend) {
+                store.computed('pipeline.pagination', () => {
+                    const upstream = store.getUnphased('pipeline.filter') ??
+                        store.getUnphased('pipeline.sort') ??
+                        store.getUnphased('rows.indices');
+                    if (!upstream)
+                        return undefined;
+                    const pageSize = store.getUnphased('pagination.pageSize');
+                    if (!Number.isFinite(pageSize) || pageSize <= 0)
+                        return upstream;
+                    const currentPage = store.getUnphased('pagination.currentPage');
+                    const start = Math.max(0, currentPage) * pageSize;
+                    return upstream.slice(start, start + pageSize);
+                }, 'pagination', 30);
+            }
             let paginationTop = null;
             let paginationBottom = null;
             function getTotalPages() {
@@ -26546,6 +27617,7 @@ function createPaginationPlugin(opts) {
                     return;
                 store.set('pagination.currentPage', page);
                 updatePaginationUI();
+                store.exec('rendering:syncAfterPipeline');
                 if (options.onPageChange) {
                     options.onPageChange(page, store.get('pagination.pageSize'));
                 }
@@ -26578,6 +27650,7 @@ function createPaginationPlugin(opts) {
                 store.set('pagination.pageSize', pageSize);
                 store.set('pagination.currentPage', newPage);
                 updatePaginationUI();
+                store.exec('rendering:syncAfterPipeline');
                 if (options.onPageChange) {
                     options.onPageChange(store.get('pagination.currentPage'), pageSize);
                 }
@@ -26753,7 +27826,7 @@ function createColumnPlugin(opts) {
                     showPreview: options.columnResize?.showPreview,
                     onColumnWidthsChange: options.onColumnWidthsChange,
                     getScrollLeft: () => scrollContainer?.scrollLeft ?? 0,
-                    getHeaderHeight: () => 40,
+                    getHeaderHeight: () => resolveHeaderHeight(options),
                     getViewportHeight: () => scrollContainer?.clientHeight ?? 0,
                 });
             }, 'column');
@@ -26931,13 +28004,13 @@ function createColumnPlugin(opts) {
             function measureHeaderTextWidth(text) {
                 if (!headerMeasureElement) {
                     headerMeasureElement = document.createElement('div');
-                    headerMeasureElement.style.cssText = `
-            position: absolute;
-            visibility: hidden;
-            white-space: nowrap;
-            font-family: inherit;
-            font-size: inherit;
-            font-weight: 600;
+                    headerMeasureElement.style.cssText = `
+            position: absolute;
+            visibility: hidden;
+            white-space: nowrap;
+            font-family: inherit;
+            font-size: inherit;
+            font-weight: 600;
           `;
                     document.body.appendChild(headerMeasureElement);
                 }
@@ -27019,391 +28092,192 @@ function createColumnPlugin(opts) {
     };
 }
 
-const TEXT_OPERATORS = [
-    { value: 'contains', label: 'Contains', valueCount: 1 },
-    { value: 'equals', label: 'Equals', valueCount: 1 },
-    { value: 'startsWith', label: 'Starts with', valueCount: 1 },
-    { value: 'endsWith', label: 'Ends with', valueCount: 1 },
-    { value: 'notContains', label: 'Not contains', valueCount: 1 },
-    { value: 'notEquals', label: 'Not equals', valueCount: 1 },
-    { value: 'blank', label: 'Is blank', valueCount: 0 },
-    { value: 'notBlank', label: 'Is not blank', valueCount: 0 },
-];
-const NUMBER_OPERATORS = [
-    { value: 'equals', label: 'Equals', valueCount: 1 },
-    { value: 'notEquals', label: 'Not equals', valueCount: 1 },
-    { value: 'greaterThan', label: 'Greater than', valueCount: 1 },
-    { value: 'greaterThanOrEqual', label: 'Greater than or equal', valueCount: 1 },
-    { value: 'lessThan', label: 'Less than', valueCount: 1 },
-    { value: 'lessThanOrEqual', label: 'Less than or equal', valueCount: 1 },
-    { value: 'between', label: 'Between', valueCount: 2 },
-    { value: 'blank', label: 'Is blank', valueCount: 0 },
-    { value: 'notBlank', label: 'Is not blank', valueCount: 0 },
-];
-const DATE_OPERATORS = [
-    { value: 'equals', label: 'Equals', valueCount: 1 },
-    { value: 'greaterThan', label: 'After', valueCount: 1 },
-    { value: 'lessThan', label: 'Before', valueCount: 1 },
-    { value: 'between', label: 'Between', valueCount: 2 },
-    { value: 'blank', label: 'Is blank', valueCount: 0 },
-    { value: 'notBlank', label: 'Is not blank', valueCount: 0 },
-];
-class GridFilterUI {
-    constructor(options) {
-        this.popup = null;
-        this.chipBar = null;
-        this.popupKeyHandler = null;
-        this.filterClickUnsub = null;
-        this.filterChangeUnsub = null;
-        this.closePopup = () => {
-            const popup = this.popup;
-            if (!popup)
-                return;
-            if (this.overlayManager.isOpen(popup)) {
-                this.overlayManager.close(popup);
-                return;
-            }
-            this.teardownPopup();
-        };
-        this.container = options.container;
-        this.events = options.events;
-        this.columns = options.columns ?? [];
-        this.getFilterState = options.getFilterState;
-        this.getFilterExpression = options.getFilterExpression;
-        this.setColumnFilter = options.setColumnFilter;
-        this.setFieldState = options.setFieldState;
-        this.clearColumnFilter = options.clearColumnFilter;
-        this.clearQuickFilter = options.clearQuickFilter;
-        this.clearAllFilters = options.clearAllFilters;
-        this.getColumnDef = options.getColumnDef;
-        this.mapVisualToDataCol = options.mapVisualToDataCol;
-        this.overlayManager = OverlayManager.getInstance();
-        this.filterClickUnsub = this.events.on('header:filter:click', (payload) => {
-            this.openFilterPopup(payload);
-        });
-        this.filterChangeUnsub = this.events.on('filter:change', () => {
-            this.renderFilterChips();
-        });
-        this.renderFilterChips();
-    }
-    setColumns(columns) {
-        this.columns = [...columns];
-        this.closePopup();
-        this.renderFilterChips();
-    }
-    openFilterPopup(payload) {
-        const dataCol = this.mapVisualToDataCol(payload.columnIndex);
-        const columnDef = this.getColumnDef(dataCol);
-        if (!columnDef)
-            return;
-        this.closePopup();
-        const dropdownType = payload.dropdownType ?? 'text';
-        const operators = this.getOperatorsForType(dropdownType);
-        const existing = this.getFilterState().find((f) => f.column === dataCol);
-        const popup = document.createElement('div');
-        popup.className = 'zg-filter-popup';
-        const title = document.createElement('div');
-        title.className = 'zg-filter-popup__title';
-        title.textContent = `Filter: ${this.getColumnLabel(columnDef, dataCol)}`;
-        popup.appendChild(title);
-        const logicRow = document.createElement('div');
-        logicRow.className = 'zg-filter-popup__row';
-        logicRow.innerHTML = `<label>Match</label>`;
-        const logicSelect = document.createElement('select');
-        logicSelect.className = 'zg-filter-popup__select';
-        logicSelect.innerHTML = `
-      <option value="AND">AND</option>
-      <option value="OR">OR</option>
-    `;
-        logicSelect.value = existing?.logic ?? 'AND';
-        logicRow.appendChild(logicSelect);
-        popup.appendChild(logicRow);
-        const conditionsContainer = document.createElement('div');
-        conditionsContainer.className = 'zg-filter-popup__conditions';
-        popup.appendChild(conditionsContainer);
-        const conditionRows = [];
-        const createConditionRow = (condition) => {
-            const conditionEl = document.createElement('div');
-            conditionEl.className = 'zg-filter-popup__condition';
-            const operatorRow = document.createElement('div');
-            operatorRow.className = 'zg-filter-popup__row';
-            operatorRow.innerHTML = `<label>Operator</label>`;
-            const operatorSelect = document.createElement('select');
-            operatorSelect.className = 'zg-filter-popup__select';
-            operators.forEach((op) => {
-                const option = document.createElement('option');
-                option.value = op.value;
-                option.textContent = op.label;
-                operatorSelect.appendChild(option);
-            });
-            operatorRow.appendChild(operatorSelect);
-            conditionEl.appendChild(operatorRow);
-            const valueRow = document.createElement('div');
-            valueRow.className = 'zg-filter-popup__row';
-            valueRow.innerHTML = `<label>Value</label>`;
-            const valueInput = document.createElement('input');
-            valueInput.className = 'zg-filter-popup__input';
-            valueInput.type =
-                dropdownType === 'number' ? 'number' : dropdownType === 'date' ? 'date' : 'text';
-            const valueInputTo = document.createElement('input');
-            valueInputTo.className = 'zg-filter-popup__input';
-            valueInputTo.type = valueInput.type;
-            valueInputTo.style.display = 'none';
-            valueRow.appendChild(valueInput);
-            valueRow.appendChild(valueInputTo);
-            conditionEl.appendChild(valueRow);
-            const actionsRow = document.createElement('div');
-            actionsRow.className = 'zg-filter-popup__condition-actions';
-            const removeBtn = document.createElement('button');
-            removeBtn.type = 'button';
-            removeBtn.className = 'zg-filter-popup__btn zg-filter-popup__btn--remove';
-            removeBtn.textContent = 'Remove';
-            actionsRow.appendChild(removeBtn);
-            conditionEl.appendChild(actionsRow);
-            const updateValueInputs = () => {
-                const selected = operators.find((op) => op.value === operatorSelect.value);
-                const valueCount = selected?.valueCount ?? 1;
-                if (valueCount === 0) {
-                    valueInput.style.display = 'none';
-                    valueInputTo.style.display = 'none';
-                }
-                else if (valueCount === 2) {
-                    valueInput.style.display = '';
-                    valueInputTo.style.display = '';
-                }
-                else {
-                    valueInput.style.display = '';
-                    valueInputTo.style.display = 'none';
-                }
-            };
-            operatorSelect.addEventListener('change', updateValueInputs);
-            if (condition) {
-                operatorSelect.value = condition.operator;
-                if (Array.isArray(condition.value)) {
-                    valueInput.value = String(condition.value[0] ?? '');
-                    valueInputTo.value = String(condition.value[1] ?? '');
-                }
-                else if (condition.value != null) {
-                    valueInput.value = String(condition.value);
-                }
-            }
-            updateValueInputs();
-            removeBtn.addEventListener('click', () => {
-                const index = conditionRows.findIndex((row) => row.element === conditionEl);
-                if (index >= 0) {
-                    conditionRows.splice(index, 1);
-                }
-                conditionEl.remove();
-                updateConditionControls();
-            });
-            return {
-                element: conditionEl,
-                operatorSelect,
-                valueInput,
-                valueInputTo,
-                removeBtn,
-            };
-        };
-        const updateConditionControls = () => {
-            const showLogic = conditionRows.length > 1;
-            logicRow.style.display = showLogic ? '' : 'none';
-            conditionRows.forEach((row) => {
-                row.removeBtn.style.display = showLogic ? '' : 'none';
-            });
-        };
-        const addCondition = (condition) => {
-            const row = createConditionRow(condition);
-            conditionRows.push(row);
-            conditionsContainer.appendChild(row.element);
-            updateConditionControls();
-        };
-        const existingConditions = existing?.conditions && existing.conditions.length > 0 ? existing.conditions : null;
-        if (existingConditions) {
-            existingConditions.forEach((condition) => addCondition(condition));
-        }
-        else {
-            addCondition();
-        }
-        const addConditionBtn = document.createElement('button');
-        addConditionBtn.type = 'button';
-        addConditionBtn.className = 'zg-filter-popup__btn zg-filter-popup__btn--add';
-        addConditionBtn.textContent = 'Add condition';
-        addConditionBtn.addEventListener('click', () => addCondition());
-        popup.appendChild(addConditionBtn);
-        const actions = document.createElement('div');
-        actions.className = 'zg-filter-popup__actions';
-        const applyBtn = document.createElement('button');
-        applyBtn.type = 'button';
-        applyBtn.className = 'zg-filter-popup__btn primary';
-        applyBtn.textContent = 'Apply';
-        const clearBtn = document.createElement('button');
-        clearBtn.type = 'button';
-        clearBtn.className = 'zg-filter-popup__btn';
-        clearBtn.textContent = 'Clear';
-        actions.appendChild(applyBtn);
-        actions.appendChild(clearBtn);
-        popup.appendChild(actions);
-        const applyFilter = () => {
-            const conditions = [];
-            for (const row of conditionRows) {
-                const operator = row.operatorSelect.value;
-                const condition = this.buildCondition(operator, dropdownType, row.valueInput.value, row.valueInputTo.value);
-                if (condition) {
-                    conditions.push(condition);
-                }
-            }
-            if (conditions.length === 0) {
-                return;
-            }
-            const logic = logicSelect.value ?? 'AND';
-            this.setColumnFilter(dataCol, conditions, logic);
-            this.closePopup();
-        };
-        applyBtn.addEventListener('click', applyFilter);
-        clearBtn.addEventListener('click', () => {
-            this.clearColumnFilter(dataCol);
-            this.closePopup();
-        });
-        this.popup = popup;
-        document.body.appendChild(popup);
-        this.popupKeyHandler = (e) => {
-            if (e.key === 'Enter') {
-                const active = document.activeElement;
-                if (!active || !popup.contains(active)) {
-                    return;
-                }
-                const tag = active.tagName.toLowerCase();
-                if (tag === 'input' || tag === 'select') {
-                    e.preventDefault();
-                    applyFilter();
-                }
-            }
-        };
-        popup.addEventListener('keydown', this.popupKeyHandler);
-        if (!payload.anchorElement) {
-            const containerRect = this.container.getBoundingClientRect();
-            popup.style.position = 'fixed';
-            popup.style.top = `${containerRect.top + 12}px`;
-            popup.style.left = `${containerRect.left + 12}px`;
-        }
-        this.overlayManager.open({
-            overlay: popup,
-            anchor: payload.anchorElement,
-            additionalElements: payload.anchorElement ? [payload.anchorElement] : [],
-            restoreFocusOnClose: !!payload.anchorElement,
-            restoreFocusTo: payload.anchorElement ?? null,
-            closeOnEscape: true,
-            positionOptions: {
-                placement: 'bottom-start',
-                offset: 4,
-                viewportPadding: 8,
-            },
-            scrollOptions: {
-                closeOnOutOfView: true,
-                repositionOnScroll: false,
-            },
-            onClose: () => {
-                this.teardownPopup();
-            },
-        });
-        // Focus first input for usability
-        setTimeout(() => {
-            const first = conditionRows[0];
-            if (!first)
-                return;
-            if (first.valueInput.style.display !== 'none') {
-                first.valueInput.focus();
-            }
-            else {
-                first.operatorSelect.focus();
-            }
-        }, 0);
-    }
-    buildCondition(operator, dropdownType, value, valueTo) {
-        const valueCount = this.getOperatorValueCount(operator, dropdownType);
-        if (valueCount === 0) {
-            return { operator };
-        }
-        if (valueCount === 2) {
-            const parsed = [
-                this.parseInputValue(value, dropdownType),
-                this.parseInputValue(valueTo, dropdownType),
-            ];
-            return { operator, value: parsed };
-        }
-        return { operator, value: this.parseInputValue(value, dropdownType) };
-    }
-    parseInputValue(value, dropdownType) {
-        if (dropdownType === 'number') {
-            const num = Number(value);
-            return Number.isNaN(num) ? value : num;
-        }
-        if (dropdownType === 'date') {
-            const ts = Date.parse(value);
-            return Number.isNaN(ts) ? value : ts;
+function createFieldState(root) {
+    return {
+        root,
+        activeFields: collectActiveFields(root),
+        timestamp: Date.now(),
+    };
+}
+function collectActiveFields(root) {
+    if (!root)
+        return [];
+    const fields = new Set();
+    const visit = (group) => {
+        for (const condition of group.conditions) {
+            fields.add(condition.field);
         }
-        return value;
-    }
-    getOperatorsForType(type) {
-        switch (type) {
-            case 'number':
-                return NUMBER_OPERATORS;
-            case 'date':
-                return DATE_OPERATORS;
-            default:
-                return TEXT_OPERATORS;
+        for (const nested of group.groups ?? []) {
+            visit(nested);
         }
+    };
+    visit(root);
+    return Array.from(fields);
+}
+function removeTopLevelCondition(root, conditionIndex) {
+    if (!root || root.logic !== 'AND')
+        return null;
+    return normalizeFieldGroup({
+        logic: root.logic,
+        conditions: root.conditions.filter((_, index) => index !== conditionIndex),
+        groups: root.groups ? [...root.groups] : undefined,
+    });
+}
+function removeTopLevelGroup(root, groupIndex) {
+    if (!root || root.logic !== 'AND')
+        return null;
+    return normalizeFieldGroup({
+        logic: root.logic,
+        conditions: [...root.conditions],
+        groups: root.groups?.filter((_, index) => index !== groupIndex),
+    });
+}
+function normalizeFieldGroup(group) {
+    const normalizedGroups = group.groups?.filter((nested) => nested.conditions.length > 0 || (nested.groups?.length ?? 0) > 0);
+    if (group.conditions.length === 0 && (normalizedGroups?.length ?? 0) === 0) {
+        return null;
     }
-    getOperatorValueCount(operator, type) {
-        const operators = this.getOperatorsForType(type);
-        return operators.find((op) => op.value === operator)?.valueCount ?? 1;
-    }
-    getColumnLabel(column, index) {
-        if (typeof column.header === 'string')
-            return column.header;
-        return column.header?.text ?? column.field ?? `Column ${index}`;
+    return {
+        logic: group.logic,
+        conditions: [...group.conditions],
+        groups: normalizedGroups && normalizedGroups.length > 0 ? normalizedGroups : undefined,
+    };
+}
+
+function buildChipDescriptors(expression, labels, actions) {
+    const chips = [];
+    const fieldRoot = expression?.fieldState?.root ?? null;
+    const quickFilter = expression?.quickFilter ?? null;
+    if (fieldRoot) {
+        chips.push(...buildFieldStateChips(fieldRoot, expression, labels, actions));
+    }
+    if (quickFilter?.query?.trim()) {
+        chips.push({
+            label: describeQuickFilter(quickFilter, labels),
+            remove: () => actions.clearQuickFilter(),
+        });
     }
-    getColumnLabelByField(field) {
-        const index = this.columns.findIndex((column) => column.field === field);
-        if (index < 0) {
-            return field;
-        }
-        return this.getColumnLabel(this.columns[index], index);
+    return chips;
+}
+function buildFieldStateChips(root, expression, labels, actions) {
+    if (root.logic !== 'AND') {
+        return [{ label: describeFieldGroup(root, labels), remove: () => actions.applyStructuredRoot(null) }];
     }
-    getColumnLabelByIndex(index) {
-        const column = this.columns[index] ?? this.getColumnDef(index);
-        if (!column) {
-            return `Column ${index}`;
-        }
-        return this.getColumnLabel(column, index);
+    const chips = [];
+    root.conditions.forEach((condition, index) => {
+        chips.push({
+            label: describeFieldCondition(condition, labels),
+            remove: () => actions.applyStructuredRoot(removeTopLevelCondition(expression.fieldState?.root, index)),
+        });
+    });
+    (root.groups ?? []).forEach((group, index) => {
+        chips.push({
+            label: describeFieldGroup(group, labels),
+            remove: () => actions.applyStructuredRoot(removeTopLevelGroup(expression.fieldState?.root, index)),
+        });
+    });
+    return chips;
+}
+function describeQuickFilter(quickFilter, labels) {
+    const query = formatValue(quickFilter.query);
+    if (!quickFilter.columns || quickFilter.columns.length === 0) {
+        return `Search ${query}`;
     }
-    ensureChipBar() {
-        if (this.chipBar && this.chipBar.isConnected) {
-            return this.chipBar;
-        }
-        const host = this.container.querySelector('.zg-viewport') ?? this.container;
-        const chipBar = document.createElement('div');
-        chipBar.className = 'zg-filter-chip-bar';
-        chipBar.style.display = 'none';
-        host.appendChild(chipBar);
-        this.chipBar = chipBar;
-        return chipBar;
+    const columnLabels = quickFilter.columns.map((column) => labels.getColumnLabelByIndex(column));
+    return `Search ${columnLabels.join(', ')} ${query}`;
+}
+function describeFieldGroup(group, labels, nested = false) {
+    const parts = [
+        ...group.conditions.map((condition) => describeFieldCondition(condition, labels)),
+        ...(group.groups ?? []).map((child) => describeFieldGroup(child, labels, true)),
+    ];
+    if (parts.length === 0)
+        return 'Filter group';
+    const joined = parts.join(` ${group.logic} `);
+    return nested && parts.length > 1 ? `(${joined})` : joined;
+}
+function describeFieldCondition(condition, labels) {
+    const label = labels.getColumnLabelByField(condition.field);
+    switch (condition.operator) {
+        case 'eq':
+        case 'equals':
+            return `${label} = ${formatValue(condition.value)}`;
+        case 'neq':
+        case 'notEquals':
+            return `${label} != ${formatValue(condition.value)}`;
+        case 'contains':
+            return `${label} contains ${formatValue(condition.value)}`;
+        case 'notContains':
+            return `${label} does not contain ${formatValue(condition.value)}`;
+        case 'startsWith':
+            return `${label} starts with ${formatValue(condition.value)}`;
+        case 'endsWith':
+            return `${label} ends with ${formatValue(condition.value)}`;
+        case 'gt':
+        case 'greaterThan':
+            return `${label} > ${formatValue(condition.value)}`;
+        case 'gte':
+        case 'greaterThanOrEqual':
+            return `${label} >= ${formatValue(condition.value)}`;
+        case 'lt':
+        case 'lessThan':
+            return `${label} < ${formatValue(condition.value)}`;
+        case 'lte':
+        case 'lessThanOrEqual':
+            return `${label} <= ${formatValue(condition.value)}`;
+        case 'between':
+            return `${label} between ${formatValue(condition.value)} and ${formatValue(condition.valueTo)}`;
+        case 'in':
+            return `${label} in ${formatValue(condition.value)}`;
+        case 'notIn':
+            return `${label} not in ${formatValue(condition.value)}`;
+        case 'isNull':
+        case 'blank':
+            return `${label} is blank`;
+        case 'isNotNull':
+        case 'notBlank':
+            return `${label} is not blank`;
+        case 'regex':
+            return `${label} matches ${formatValue(condition.value)}`;
+        default:
+            return condition.value === undefined
+                ? `${label} ${condition.operator}`
+                : `${label} ${condition.operator} ${formatValue(condition.value)}`;
+    }
+}
+function formatValue(value) {
+    if (Array.isArray(value))
+        return `[${value.map((item) => formatValue(item)).join(', ')}]`;
+    if (value instanceof Date)
+        return value.toISOString();
+    if (typeof value === 'string')
+        return `"${value}"`;
+    if (value === null)
+        return 'null';
+    if (value === undefined)
+        return 'undefined';
+    return String(value);
+}
+
+class FilterChipBar {
+    constructor(container, getFilterExpression, labels, actions) {
+        this.container = container;
+        this.getFilterExpression = getFilterExpression;
+        this.labels = labels;
+        this.actions = actions;
+        this.chipBar = null;
     }
-    renderFilterChips() {
+    render() {
         const chipBar = this.ensureChipBar();
-        const expression = this.getFilterExpression();
-        const chips = this.buildChipDescriptors(expression);
+        const chips = buildChipDescriptors(this.getFilterExpression(), this.labels, this.actions);
         chipBar.replaceChildren();
         if (chips.length === 0) {
             chipBar.style.display = 'none';
-            this.updateChipBarLayout();
+            this.updateLayout();
             return;
         }
         chipBar.style.display = '';
-        const title = document.createElement('span');
-        title.className = 'zg-filter-chip-bar__title';
-        title.textContent = 'Filters';
-        chipBar.appendChild(title);
+        chipBar.appendChild(createTextElement('span', 'zg-filter-chip-bar__title', 'Filters'));
         const chipList = document.createElement('div');
         chipList.className = 'zg-filter-chip-bar__list';
         for (const chip of chips) {
@@ -27414,259 +28288,407 @@ class GridFilterUI {
         clearAllButton.type = 'button';
         clearAllButton.className = 'zg-filter-chip-bar__clear';
         clearAllButton.textContent = 'Clear all';
-        clearAllButton.addEventListener('click', () => {
-            this.clearAllFilters();
-        });
+        clearAllButton.addEventListener('click', () => this.actions.clearAllFilters());
         chipBar.appendChild(clearAllButton);
-        this.updateChipBarLayout();
+        this.updateLayout();
+    }
+    destroy() {
+        this.chipBar?.remove();
+        this.chipBar = null;
+        this.updateLayout();
+    }
+    ensureChipBar() {
+        if (this.chipBar && this.chipBar.isConnected)
+            return this.chipBar;
+        const host = this.container.querySelector('.zg-viewport') ?? this.container;
+        const chipBar = document.createElement('div');
+        chipBar.className = 'zg-filter-chip-bar';
+        chipBar.style.display = 'none';
+        host.appendChild(chipBar);
+        this.chipBar = chipBar;
+        return chipBar;
     }
     createChipElement(label, remove) {
         const chip = document.createElement('div');
         chip.className = 'zg-filter-chip';
         chip.title = label;
-        const text = document.createElement('span');
-        text.className = 'zg-filter-chip__label';
-        text.textContent = label;
-        chip.appendChild(text);
+        chip.appendChild(createTextElement('span', 'zg-filter-chip__label', label));
         const removeButton = document.createElement('button');
         removeButton.type = 'button';
         removeButton.className = 'zg-filter-chip__remove';
         removeButton.setAttribute('aria-label', `Remove filter ${label}`);
-        removeButton.textContent = '×';
-        removeButton.addEventListener('click', () => {
-            remove();
-        });
+        removeButton.textContent = 'x';
+        removeButton.addEventListener('click', remove);
         chip.appendChild(removeButton);
         return chip;
     }
-    buildChipDescriptors(expression) {
-        const chips = [];
-        const fieldRoot = expression?.fieldState?.root ?? null;
-        const quickFilter = expression?.quickFilter ?? null;
-        if (fieldRoot) {
-            chips.push(...this.buildFieldStateChips(fieldRoot));
-        }
-        if (quickFilter?.query?.trim()) {
-            chips.push({
-                label: this.describeQuickFilter(quickFilter),
-                remove: () => this.clearQuickFilter(),
-            });
-        }
-        return chips;
+    updateLayout() {
+        const scrollContainer = this.container.querySelector('.zg-scroll-container');
+        const header = this.container.querySelector('.zg-header');
+        const headerHeight = header?.offsetHeight ?? 0;
+        const chipHeight = this.chipBar && this.chipBar.style.display !== 'none' ? this.chipBar.offsetHeight : 0;
+        if (this.chipBar)
+            this.chipBar.style.top = `${headerHeight}px`;
+        if (scrollContainer)
+            scrollContainer.style.top = `${headerHeight + chipHeight}px`;
     }
-    buildFieldStateChips(root) {
-        if (root.logic !== 'AND') {
-            return [
-                {
-                    label: this.describeFieldGroup(root),
-                    remove: () => this.applyStructuredRoot(null),
-                },
-            ];
-        }
-        const chips = [];
-        root.conditions.forEach((condition, index) => {
-            chips.push({
-                label: this.describeFieldCondition(condition),
-                remove: () => this.removeTopLevelCondition(index),
-            });
+}
+function createTextElement(tag, className, text) {
+    const element = document.createElement(tag);
+    element.className = className;
+    element.textContent = text;
+    return element;
+}
+
+const TEXT_OPERATORS = [
+    { value: 'contains', label: 'Contains', valueCount: 1 },
+    { value: 'equals', label: 'Equals', valueCount: 1 },
+    { value: 'startsWith', label: 'Starts with', valueCount: 1 },
+    { value: 'endsWith', label: 'Ends with', valueCount: 1 },
+    { value: 'notContains', label: 'Not contains', valueCount: 1 },
+    { value: 'notEquals', label: 'Not equals', valueCount: 1 },
+    { value: 'blank', label: 'Is blank', valueCount: 0 },
+    { value: 'notBlank', label: 'Is not blank', valueCount: 0 },
+];
+const NUMBER_OPERATORS = [
+    { value: 'equals', label: 'Equals', valueCount: 1 },
+    { value: 'notEquals', label: 'Not equals', valueCount: 1 },
+    { value: 'greaterThan', label: 'Greater than', valueCount: 1 },
+    { value: 'greaterThanOrEqual', label: 'Greater than or equal', valueCount: 1 },
+    { value: 'lessThan', label: 'Less than', valueCount: 1 },
+    { value: 'lessThanOrEqual', label: 'Less than or equal', valueCount: 1 },
+    { value: 'between', label: 'Between', valueCount: 2 },
+    { value: 'blank', label: 'Is blank', valueCount: 0 },
+    { value: 'notBlank', label: 'Is not blank', valueCount: 0 },
+];
+const DATE_OPERATORS = [
+    { value: 'equals', label: 'Equals', valueCount: 1 },
+    { value: 'greaterThan', label: 'After', valueCount: 1 },
+    { value: 'lessThan', label: 'Before', valueCount: 1 },
+    { value: 'between', label: 'Between', valueCount: 2 },
+    { value: 'blank', label: 'Is blank', valueCount: 0 },
+    { value: 'notBlank', label: 'Is not blank', valueCount: 0 },
+];
+function getOperatorsForType(type) {
+    switch (type) {
+        case 'number':
+            return NUMBER_OPERATORS;
+        case 'date':
+            return DATE_OPERATORS;
+        default:
+            return TEXT_OPERATORS;
+    }
+}
+function getOperatorValueCount(operator, type) {
+    return getOperatorsForType(type).find((op) => op.value === operator)?.valueCount ?? 1;
+}
+function buildCondition(operator, dropdownType, value, valueTo) {
+    const valueCount = getOperatorValueCount(operator, dropdownType);
+    if (valueCount === 0)
+        return { operator };
+    if (valueCount === 2) {
+        return {
+            operator,
+            value: [parseInputValue(value, dropdownType), parseInputValue(valueTo, dropdownType)],
+        };
+    }
+    return { operator, value: parseInputValue(value, dropdownType) };
+}
+function parseInputValue(value, dropdownType) {
+    if (dropdownType === 'number') {
+        const num = Number(value);
+        return Number.isNaN(num) ? value : num;
+    }
+    if (dropdownType === 'date') {
+        const ts = Date.parse(value);
+        return Number.isNaN(ts) ? value : ts;
+    }
+    return value;
+}
+
+function createTitle(options) {
+    const title = document.createElement('div');
+    title.className = 'zg-filter-popup__title';
+    title.textContent = `Filter: ${options.getColumnLabel(options.columnDef, options.dataCol)}`;
+    return title;
+}
+function createLogicRow(initial) {
+    const row = document.createElement('div');
+    row.className = 'zg-filter-popup__row';
+    row.innerHTML = '<label>Match</label>';
+    const select = document.createElement('select');
+    select.className = 'zg-filter-popup__select';
+    select.innerHTML = '<option value="AND">AND</option><option value="OR">OR</option>';
+    select.value = initial;
+    row.appendChild(select);
+    return { row, select };
+}
+function createConditionRow(condition, operators, dropdownType, onRemove) {
+    const element = document.createElement('div');
+    element.className = 'zg-filter-popup__condition';
+    const operatorSelect = createOperatorSelect(operators);
+    const valueInput = createValueInput(dropdownType);
+    const valueInputTo = createValueInput(dropdownType);
+    valueInputTo.style.display = 'none';
+    const removeBtn = createButton('zg-filter-popup__btn zg-filter-popup__btn--remove', 'Remove');
+    appendRow(element, 'Operator', operatorSelect);
+    appendRow(element, 'Value', valueInput, valueInputTo);
+    const actions = document.createElement('div');
+    actions.className = 'zg-filter-popup__condition-actions';
+    actions.appendChild(removeBtn);
+    element.appendChild(actions);
+    const updateInputs = () => {
+        const valueCount = operators.find((op) => op.value === operatorSelect.value)?.valueCount ?? 1;
+        valueInput.style.display = valueCount === 0 ? 'none' : '';
+        valueInputTo.style.display = valueCount === 2 ? '' : 'none';
+    };
+    operatorSelect.addEventListener('change', updateInputs);
+    removeBtn.addEventListener('click', onRemove);
+    applyConditionValue(condition, operatorSelect, valueInput, valueInputTo);
+    updateInputs();
+    return { element, operatorSelect, valueInput, valueInputTo, removeBtn };
+}
+function createValueInput(dropdownType) {
+    const input = document.createElement('input');
+    input.className = 'zg-filter-popup__input';
+    input.type = dropdownType === 'number' ? 'number' : dropdownType === 'date' ? 'date' : 'text';
+    return input;
+}
+function createOperatorSelect(operators) {
+    const select = document.createElement('select');
+    select.className = 'zg-filter-popup__select';
+    operators.forEach((op) => {
+        const option = document.createElement('option');
+        option.value = op.value;
+        option.textContent = op.label;
+        select.appendChild(option);
+    });
+    return select;
+}
+function createButton(className, text) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = className;
+    button.textContent = text;
+    return button;
+}
+function appendRow(parent, label, ...children) {
+    const row = document.createElement('div');
+    row.className = 'zg-filter-popup__row';
+    row.innerHTML = `<label>${label}</label>`;
+    children.forEach((child) => row.appendChild(child));
+    parent.appendChild(row);
+}
+function createActions() {
+    const actions = document.createElement('div');
+    actions.className = 'zg-filter-popup__actions';
+    const applyBtn = createButton('zg-filter-popup__btn primary', 'Apply');
+    const clearBtn = createButton('zg-filter-popup__btn', 'Clear');
+    actions.appendChild(applyBtn);
+    actions.appendChild(clearBtn);
+    return { actions, applyBtn, clearBtn };
+}
+function applyConditionValue(condition, operatorSelect, valueInput, valueInputTo) {
+    if (!condition)
+        return;
+    operatorSelect.value = condition.operator;
+    if (Array.isArray(condition.value)) {
+        valueInput.value = String(condition.value[0] ?? '');
+        valueInputTo.value = String(condition.value[1] ?? '');
+    }
+    else if (condition.value != null) {
+        valueInput.value = String(condition.value);
+    }
+}
+function positionUnanchoredPopup(popup, options) {
+    if (options.payload.anchorElement)
+        return;
+    const containerRect = options.container.getBoundingClientRect();
+    popup.style.position = 'fixed';
+    popup.style.top = `${containerRect.top + 12}px`;
+    popup.style.left = `${containerRect.left + 12}px`;
+}
+
+function openFilterPopup(options) {
+    const dropdownType = options.payload.dropdownType ?? 'text';
+    const operators = getOperatorsForType(dropdownType);
+    const popup = document.createElement('div');
+    popup.className = 'zg-filter-popup';
+    popup.appendChild(createTitle(options));
+    const logicRow = createLogicRow(options.existing?.logic ?? 'AND');
+    popup.appendChild(logicRow.row);
+    const conditionsContainer = document.createElement('div');
+    conditionsContainer.className = 'zg-filter-popup__conditions';
+    popup.appendChild(conditionsContainer);
+    const conditionRows = [];
+    const updateConditionControls = () => {
+        const showLogic = conditionRows.length > 1;
+        logicRow.row.style.display = showLogic ? '' : 'none';
+        conditionRows.forEach((row) => {
+            row.removeBtn.style.display = showLogic ? '' : 'none';
         });
-        (root.groups ?? []).forEach((group, index) => {
-            chips.push({
-                label: this.describeFieldGroup(group),
-                remove: () => this.removeTopLevelGroup(index),
-            });
+    };
+    const addCondition = (condition) => {
+        const row = createConditionRow(condition, operators, dropdownType, () => {
+            const index = conditionRows.findIndex((item) => item.element === row.element);
+            if (index >= 0)
+                conditionRows.splice(index, 1);
+            row.element.remove();
+            updateConditionControls();
         });
-        return chips;
-    }
-    removeTopLevelCondition(conditionIndex) {
-        const root = this.getFilterExpression()?.fieldState?.root;
-        if (!root) {
+        conditionRows.push(row);
+        conditionsContainer.appendChild(row.element);
+        updateConditionControls();
+    };
+    const existingConditions = options.existing?.conditions?.length
+        ? options.existing.conditions
+        : null;
+    existingConditions ? existingConditions.forEach(addCondition) : addCondition();
+    const addConditionBtn = createButton('zg-filter-popup__btn zg-filter-popup__btn--add', 'Add condition');
+    addConditionBtn.addEventListener('click', () => addCondition());
+    popup.appendChild(addConditionBtn);
+    const { actions, applyBtn, clearBtn } = createActions();
+    popup.appendChild(actions);
+    const applyFilter = () => {
+        const conditions = conditionRows.map((row) => buildCondition(row.operatorSelect.value, dropdownType, row.valueInput.value, row.valueInputTo.value));
+        if (conditions.length === 0)
             return;
-        }
-        if (root.logic !== 'AND') {
-            this.applyStructuredRoot(null);
+        options.setColumnFilter(options.dataCol, conditions, logicRow.select.value);
+        handle.close();
+    };
+    applyBtn.addEventListener('click', applyFilter);
+    clearBtn.addEventListener('click', () => {
+        options.clearColumnFilter(options.dataCol);
+        handle.close();
+    });
+    let keyHandler = (e) => {
+        if (e.key !== 'Enter')
             return;
-        }
-        const nextRoot = this.normalizeFieldGroup({
-            logic: root.logic,
-            conditions: root.conditions.filter((_, index) => index !== conditionIndex),
-            groups: root.groups ? [...root.groups] : undefined,
-        });
-        this.applyStructuredRoot(nextRoot);
-    }
-    removeTopLevelGroup(groupIndex) {
-        const root = this.getFilterExpression()?.fieldState?.root;
-        if (!root) {
+        const active = document.activeElement;
+        if (!active || !popup.contains(active))
             return;
+        const tag = active.tagName.toLowerCase();
+        if (tag === 'input' || tag === 'select') {
+            e.preventDefault();
+            applyFilter();
         }
-        if (root.logic !== 'AND') {
-            this.applyStructuredRoot(null);
+    };
+    popup.addEventListener('keydown', keyHandler);
+    document.body.appendChild(popup);
+    positionUnanchoredPopup(popup, options);
+    const teardown = () => {
+        if (keyHandler) {
+            popup.removeEventListener('keydown', keyHandler);
+            keyHandler = null;
+        }
+        popup.remove();
+    };
+    const handle = {
+        close: () => {
+            if (options.overlayManager.isOpen(popup)) {
+                options.overlayManager.close(popup);
+                return;
+            }
+            teardown();
+        },
+        destroy: teardown,
+    };
+    options.overlayManager.open({
+        overlay: popup,
+        anchor: options.payload.anchorElement,
+        additionalElements: options.payload.anchorElement ? [options.payload.anchorElement] : [],
+        restoreFocusOnClose: !!options.payload.anchorElement,
+        restoreFocusTo: options.payload.anchorElement ?? null,
+        closeOnEscape: true,
+        positionOptions: { placement: 'bottom-start', offset: 4, viewportPadding: 8 },
+        scrollOptions: { closeOnOutOfView: true, repositionOnScroll: false },
+        onClose: teardown,
+    });
+    setTimeout(() => {
+        const first = conditionRows[0];
+        if (!first)
             return;
-        }
-        const nextRoot = this.normalizeFieldGroup({
-            logic: root.logic,
-            conditions: [...root.conditions],
-            groups: root.groups?.filter((_, index) => index !== groupIndex),
+        if (first.valueInput.style.display !== 'none')
+            first.valueInput.focus();
+        else
+            first.operatorSelect.focus();
+    }, 0);
+    return handle;
+}
+
+class GridFilterUI {
+    constructor(options) {
+        this.options = options;
+        this.overlayManager = OverlayManager.getInstance();
+        this.popup = null;
+        this.filterClickUnsub = null;
+        this.filterChangeUnsub = null;
+        this.columns = options.columns ?? [];
+        this.chipBar = new FilterChipBar(options.container, options.getFilterExpression, {
+            getColumnLabelByField: (field) => this.getColumnLabelByField(field),
+            getColumnLabelByIndex: (index) => this.getColumnLabelByIndex(index),
+        }, {
+            clearQuickFilter: options.clearQuickFilter,
+            clearAllFilters: options.clearAllFilters,
+            applyStructuredRoot: (root) => options.setFieldState(createFieldState(root)),
         });
-        this.applyStructuredRoot(nextRoot);
-    }
-    applyStructuredRoot(root) {
-        this.setFieldState({
-            root,
-            activeFields: this.collectActiveFields(root),
-            timestamp: Date.now(),
+        this.filterClickUnsub = options.events.on('header:filter:click', (payload) => {
+            this.openFilterPopup(payload);
         });
+        this.filterChangeUnsub = options.events.on('filter:change', () => {
+            this.chipBar.render();
+        });
+        this.chipBar.render();
     }
-    collectActiveFields(root) {
-        if (!root) {
-            return [];
-        }
-        const fields = new Set();
-        const visit = (group) => {
-            for (const condition of group.conditions) {
-                fields.add(condition.field);
-            }
-            for (const nested of group.groups ?? []) {
-                visit(nested);
-            }
-        };
-        visit(root);
-        return Array.from(fields);
-    }
-    normalizeFieldGroup(group) {
-        const normalizedGroups = group.groups?.filter((nested) => nested.conditions.length > 0 || (nested.groups?.length ?? 0) > 0);
-        if (group.conditions.length === 0 && (normalizedGroups?.length ?? 0) === 0) {
-            return null;
-        }
-        return {
-            logic: group.logic,
-            conditions: [...group.conditions],
-            groups: normalizedGroups && normalizedGroups.length > 0 ? normalizedGroups : undefined,
-        };
-    }
-    describeQuickFilter(quickFilter) {
-        const query = this.formatValue(quickFilter.query);
-        if (!quickFilter.columns || quickFilter.columns.length === 0) {
-            return `Search ${query}`;
-        }
-        const labels = quickFilter.columns.map((column) => this.getColumnLabelByIndex(column));
-        return `Search ${labels.join(', ')} ${query}`;
+    setColumns(columns) {
+        this.columns = [...columns];
+        this.closePopup();
+        this.chipBar.render();
     }
-    describeFieldGroup(group, nested = false) {
-        const parts = [
-            ...group.conditions.map((condition) => this.describeFieldCondition(condition)),
-            ...(group.groups ?? []).map((child) => this.describeFieldGroup(child, true)),
-        ];
-        if (parts.length === 0) {
-            return 'Filter group';
-        }
-        const joined = parts.join(` ${group.logic} `);
-        return nested && parts.length > 1 ? `(${joined})` : joined;
+    destroy() {
+        this.closePopup();
+        this.filterClickUnsub?.();
+        this.filterChangeUnsub?.();
+        this.filterClickUnsub = null;
+        this.filterChangeUnsub = null;
+        this.chipBar.destroy();
     }
-    describeFieldCondition(condition) {
-        const label = this.getColumnLabelByField(condition.field);
-        switch (condition.operator) {
-            case 'eq':
-            case 'equals':
-                return `${label} = ${this.formatValue(condition.value)}`;
-            case 'neq':
-            case 'notEquals':
-                return `${label} != ${this.formatValue(condition.value)}`;
-            case 'contains':
-                return `${label} contains ${this.formatValue(condition.value)}`;
-            case 'notContains':
-                return `${label} does not contain ${this.formatValue(condition.value)}`;
-            case 'startsWith':
-                return `${label} starts with ${this.formatValue(condition.value)}`;
-            case 'endsWith':
-                return `${label} ends with ${this.formatValue(condition.value)}`;
-            case 'gt':
-            case 'greaterThan':
-                return `${label} > ${this.formatValue(condition.value)}`;
-            case 'gte':
-            case 'greaterThanOrEqual':
-                return `${label} >= ${this.formatValue(condition.value)}`;
-            case 'lt':
-            case 'lessThan':
-                return `${label} < ${this.formatValue(condition.value)}`;
-            case 'lte':
-            case 'lessThanOrEqual':
-                return `${label} <= ${this.formatValue(condition.value)}`;
-            case 'between':
-                return `${label} between ${this.formatValue(condition.value)} and ${this.formatValue(condition.valueTo)}`;
-            case 'in':
-                return `${label} in ${this.formatValue(condition.value)}`;
-            case 'notIn':
-                return `${label} not in ${this.formatValue(condition.value)}`;
-            case 'isNull':
-            case 'blank':
-                return `${label} is blank`;
-            case 'isNotNull':
-            case 'notBlank':
-                return `${label} is not blank`;
-            case 'regex':
-                return `${label} matches ${this.formatValue(condition.value)}`;
-            default:
-                return condition.value === undefined
-                    ? `${label} ${condition.operator}`
-                    : `${label} ${condition.operator} ${this.formatValue(condition.value)}`;
-        }
+    openFilterPopup(payload) {
+        const dataCol = this.options.mapVisualToDataCol(payload.columnIndex);
+        const columnDef = this.options.getColumnDef(dataCol);
+        if (!columnDef)
+            return;
+        this.closePopup();
+        this.popup = openFilterPopup({
+            container: this.options.container,
+            overlayManager: this.overlayManager,
+            payload,
+            dataCol,
+            columnDef,
+            existing: this.options.getFilterState().find((filter) => filter.column === dataCol),
+            setColumnFilter: this.options.setColumnFilter,
+            clearColumnFilter: this.options.clearColumnFilter,
+            getColumnLabel: (column, index) => this.getColumnLabel(column, index),
+        });
     }
-    formatValue(value) {
-        if (Array.isArray(value)) {
-            return `[${value.map((item) => this.formatValue(item)).join(', ')}]`;
-        }
-        if (value instanceof Date) {
-            return value.toISOString();
-        }
-        if (typeof value === 'string') {
-            return `"${value}"`;
-        }
-        if (value === null) {
-            return 'null';
-        }
-        if (value === undefined) {
-            return 'undefined';
-        }
-        return String(value);
+    closePopup() {
+        this.popup?.close();
+        this.popup = null;
     }
-    updateChipBarLayout() {
-        const scrollContainer = this.container.querySelector('.zg-scroll-container');
-        const header = this.container.querySelector('.zg-header');
-        const headerHeight = header?.offsetHeight ?? 0;
-        const chipHeight = this.chipBar && this.chipBar.style.display !== 'none' ? this.chipBar.offsetHeight : 0;
-        if (this.chipBar) {
-            this.chipBar.style.top = `${headerHeight}px`;
-        }
-        if (scrollContainer) {
-            scrollContainer.style.top = `${headerHeight + chipHeight}px`;
-        }
+    getColumnLabel(column, index) {
+        if (typeof column.header === 'string')
+            return column.header;
+        return column.header?.text ?? column.field ?? `Column ${index}`;
     }
-    teardownPopup() {
-        if (this.popupKeyHandler && this.popup) {
-            this.popup.removeEventListener('keydown', this.popupKeyHandler);
-            this.popupKeyHandler = null;
-        }
-        if (this.popup) {
-            this.popup.remove();
-            this.popup = null;
-        }
+    getColumnLabelByField(field) {
+        const index = this.columns.findIndex((column) => column.field === field);
+        if (index < 0)
+            return field;
+        return this.getColumnLabel(this.columns[index], index);
     }
-    destroy() {
-        this.closePopup();
-        if (this.filterClickUnsub) {
-            this.filterClickUnsub();
-            this.filterClickUnsub = null;
-        }
-        if (this.filterChangeUnsub) {
-            this.filterChangeUnsub();
-            this.filterChangeUnsub = null;
-        }
-        if (this.chipBar) {
-            this.chipBar.remove();
-            this.chipBar = null;
-        }
-        this.updateChipBarLayout();
+    getColumnLabelByIndex(index) {
+        const column = this.columns[index] ?? this.options.getColumnDef(index);
+        return column ? this.getColumnLabel(column, index) : `Column ${index}`;
     }
 }
 
@@ -27900,16 +28922,18 @@ function createLifecyclePlugin(opts) {
                     setColumnModel(columnModel);
                     // Initialize rendering
                     store.exec('rendering:initialize', containerWidth, containerHeight);
+                    // Size the viewport to the initial pipeline view (e.g. first page)
+                    syncAfterPipeline();
                     // Attach scroll + resize
                     const scrollContainer = store.get('dom.scrollContainer');
                     if (scrollContainer) {
-                        if (api.getMethod('scroll', 'attach'))
+                        if (store.hasAction('scroll:attach'))
                             store.exec('scroll:attach', scrollContainer);
-                        if (api.getMethod('resize', 'attach'))
+                        if (store.hasAction('resize:attach'))
                             store.exec('resize:attach', scrollContainer, containerWidth, containerHeight);
                     }
                     // Column resize
-                    if (options.columnResize) {
+                    if (options.enableColumnResize !== false && store.hasAction('column:initResize')) {
                         store.exec('column:initResize');
                     }
                     // Column drag
@@ -27923,14 +28947,14 @@ function createLifecyclePlugin(opts) {
                         const headerApi = api.getMethod('header', 'getHeaderCellsContainer');
                         const hc = headerApi ? headerApi() : null;
                         if (hc) {
-                            if (options.columnResize)
+                            if (options.enableColumnResize !== false && store.hasAction('column:attachResize'))
                                 store.exec('column:attachResize', hc);
                             if (options.enableColumnDrag !== false)
                                 store.exec('column:attachDrag', hc);
                         }
                     }
                     // Selection
-                    if (api.getMethod('selection', 'attach') && scrollContainer) {
+                    if (store.hasAction('selection:attach') && scrollContainer) {
                         store.exec('selection:attach', {
                             container: scrollContainer,
                             selectionType: options.selectionType ?? 'cell',
@@ -27945,17 +28969,14 @@ function createLifecyclePlugin(opts) {
                         // Sync selection state
                         eventUnsubs.push(events.on('selection:change', (payload) => {
                             state.selection = payload.ranges ?? [];
-                            if (payload.isSelected) {
-                                // Expose selection checker for rendering
-                                api.fireEvent('selection:checkerUpdate', payload.isSelected);
-                            }
+                            opts.setSelectionChecker?.(payload.isSelected ?? null);
                             if (options.onSelectionChange)
                                 options.onSelectionChange(state.selection);
                             store.exec('rendering:refreshSelectionClasses');
                             store.exec('lifecycle:updateHeaderCheckbox');
                         }));
                     }
-                    // Sort header click bridge
+                    // Sort header click handler
                     eventUnsubs.push(events.on('header:sort:click', (event) => {
                         let dataCol = event.columnIndex;
                         if (columnModel) {
@@ -27966,36 +28987,44 @@ function createLifecyclePlugin(opts) {
                         store.exec('sort:toggle', dataCol, isAdditiveHeaderSortInteraction(event));
                         syncAfterPipeline();
                     }));
-                    // Checkbox header bridge
+                    // Checkbox header handler
                     eventUnsubs.push(events.on('header:checkbox:change', (event) => {
-                        if (!api.getMethod('selection', 'clear'))
+                        if (!store.hasAction('selection:clear'))
                             return;
                         if (event.action === 'select-all')
                             store.exec('selection:selectAll', options.rowCount);
                         else
                             store.exec('selection:clear');
                     }));
-                    // Viewport resize bridge
+                    // Viewport resize handler
                     eventUnsubs.push(events.on('viewport:resized', () => {
                         store.exec('rendering:updateScroller');
                         store.exec('rendering:refresh');
                     }));
-                    // Scroll -> viewport bridge
+                    // Scroll viewport handler
                     eventUnsubs.push(events.on('scroll', (payload) => {
-                        if (api.getMethod('viewport', 'updateRange') && payload.visibleRange) {
+                        if (store.hasAction('viewport:updateRange') && payload.visibleRange) {
                             store.exec('viewport:updateRange', payload.visibleRange);
                         }
                     }));
                     // Filter UI
-                    if (api.getMethod('filterUI', 'attach')) {
+                    if (store.hasAction('filterUI:attach')) {
                         store.exec('filterUI:attach', container, events);
                     }
                     // Infinite scroll
-                    if (api.getMethod('infiniteScroll', 'setup')) {
+                    if (store.hasAction('infiniteScroll:setup')) {
                         store.exec('infiniteScroll:setup');
                     }
                     // Editing
                     store.exec('editing:setup');
+                    // Keyboard navigation
+                    if (store.hasAction('keyboard:setup')) {
+                        store.exec('keyboard:setup');
+                    }
+                    // Clipboard (copy/cut/paste)
+                    if (store.hasAction('clipboard:setup')) {
+                        store.exec('clipboard:setup');
+                    }
                     rendered = true;
                 }
                 // Render visible cells
@@ -28007,13 +29036,13 @@ function createLifecyclePlugin(opts) {
                 }
                 // Update viewport range
                 const renderingApi = api.getMethod('rendering', 'getVisibleRange');
-                if (api.getMethod('viewport', 'updateRange') && renderingApi) {
+                if (store.hasAction('viewport:updateRange') && renderingApi) {
                     const initialRange = renderingApi();
                     if (initialRange)
                         store.exec('viewport:updateRange', initialRange);
                 }
                 // Update pagination
-                if (api.getMethod('pagination', 'update')) {
+                if (store.hasAction('pagination:update')) {
                     store.exec('pagination:update');
                 }
                 const ensureDataRange = api.getMethod('data', 'ensureVisibleRange');
@@ -28021,13 +29050,10 @@ function createLifecyclePlugin(opts) {
                     void ensureDataRange('initial');
                 }
             }, 'lifecycle');
+            // Delegate to the single shared viewport-sync implementation in the
+            // rendering plugin so sort, pagination, and init stay in lockstep.
             function syncAfterPipeline() {
-                const viewIndices = store.get('rows.viewIndices');
-                const visibleCount = viewIndices ? viewIndices.length : options.rowCount;
-                store.exec('rendering:setRowCount', visibleCount);
-                store.exec('rendering:updateCanvasSize');
-                store.exec('rendering:clearCache');
-                store.exec('rendering:refresh');
+                store.exec('rendering:syncAfterPipeline');
             }
             store.action('lifecycle:syncAfterPipeline', () => syncAfterPipeline(), 'lifecycle');
             store.action('lifecycle:updateHeaderCheckbox', () => {
@@ -28137,8 +29163,6 @@ function createSlimContext(container, options) {
         data: [],
         selection: [],
         activeCell: null,
-        sortState: [],
-        filterState: [],
         scrollPosition: { top: 0, left: 0 },
         editingCell: null,
     };
@@ -28149,6 +29173,12 @@ function createSlimContext(container, options) {
     const pipelineRegistry = new PipelineRegistry();
     pipelineRegistry.registerPhase('sort', 10, 'pipeline.sort');
     pipelineRegistry.registerPhase('filter', 20, 'pipeline.filter');
+    // Frontend pagination slices the post-sort/filter view; backend pagination
+    // is handled by the data plugin, so no pipeline phase there.
+    if (normalizedOptions.pagination?.enabled &&
+        resolveQueryExecutionMode(normalizedOptions.dataMode) !== 'backend') {
+        pipelineRegistry.registerPhase('pagination', 30, 'pipeline.pagination');
+    }
     gridApi.register('options', {
         get: () => optionsManager.getOptions(),
         getSnapshot: () => optionsManager.getOptionsSnapshot(),
@@ -28223,6 +29253,21 @@ function installAllPlugins(ctx) {
         getColumnModel: () => columnModel,
         getDataAccessor: () => dataAccessor,
     }));
+    // Phase 46: Keyboard navigation
+    pluginHost.use(createKeyboardPlugin({
+        options,
+        state: ctx.state,
+        container: ctx.container,
+    }));
+    // Phase 47: Clipboard (copy/cut/paste)
+    pluginHost.use(createClipboardPlugin({
+        options,
+        state: ctx.state,
+        container: ctx.container,
+        events,
+        getColumnModel: () => columnModel,
+        getDataAccessor: () => dataAccessor,
+    }));
     // Phase 50: Scroll, Viewport
     pluginHost.use(createScrollPlugin());
     pluginHost.use(createViewportPlugin());
@@ -28234,6 +29279,7 @@ function installAllPlugins(ctx) {
     }));
     // Phase 70: Header
     pluginHost.use(createHeaderPlugin({
+        options,
         events,
         getColumnModel: () => columnModel,
     }));
@@ -28251,10 +29297,14 @@ function installAllPlugins(ctx) {
         state: ctx.state,
         container: ctx.container,
         events,
+        getColumnModel: () => columnModel,
         getDataAccessor: () => dataAccessor,
         setColumnModel: (cm) => {
             columnModel = cm;
         },
+        setSelectionChecker: (checker) => {
+            selectionChecker = checker;
+        },
     }));
     // Setup pipeline computeds
     ctx.pipelineRegistry.setupCoreComputeds(store);
@@ -28265,15 +29315,8 @@ function installAllPlugins(ctx) {
     ctx._setDataAccessor = (da) => {
         dataAccessor = da;
     };
-    ctx._setSelectionChecker = (sc) => {
-        selectionChecker = sc;
-    };
     ctx._getColumnModel = () => columnModel;
     ctx._getDataAccessor = () => dataAccessor;
-    // Wire selection checker updates from lifecycle plugin
-    events.on('selection:checkerUpdate', (checker) => {
-        selectionChecker = checker;
-    });
     // Install filter UI if columns + filter are present
     if (options.columns &&
         options.columns.length > 0 &&
@@ -29710,10 +30753,7 @@ class Grid {
         this._theme.destroyAutoTheme();
         this.ctx.pluginHost?.destroy?.();
         this.ctx.optionsManager?.destroy?.();
-        this.ctx.container.innerHTML = '';
         this.ctx.container.classList.remove('zg-grid');
-        this.ctx.state.data = [];
-        this.ctx.state.selection = [];
         this.ctx.isDestroyed = true;
     }
     // --- Options / Stats ---
@@ -30364,8 +31404,8 @@ function createSearchInput(options, placeholder) {
     input.setAttribute('aria-controls', 'dropdown-menu');
     input.style.width = '100%';
     input.style.height = '100%';
-    input.style.border = 'none';
-    input.style.outline = '2px solid #4CAF50';
+    input.style.border = '2px solid #4CAF50';
+    input.style.outline = 'none';
     input.style.padding = '4px 8px';
     input.style.fontSize = '13px';
     input.style.fontFamily = 'inherit';
@@ -30384,8 +31424,8 @@ function createDisplayElement(options, displayText) {
     display.setAttribute('role', 'button');
     display.style.width = '100%';
     display.style.height = '100%';
-    display.style.border = 'none';
-    display.style.outline = '2px solid #4CAF50';
+    display.style.border = '2px solid #4CAF50';
+    display.style.outline = 'none';
     display.style.padding = '4px 8px';
     display.style.fontSize = '13px';
     display.style.fontFamily = 'inherit';
@@ -33571,271 +34611,6 @@ class FocusManager {
     }
 }
 
-/**
- * ClipboardManager - Handles copy/cut/paste operations
- *
- * Supports multiple formats:
- * - text/plain: TSV (tab-separated values)
- * - text/html: HTML table format
- *
- * Compatible with Excel and Google Sheets.
- *
- * @example
- * ```typescript
- * const clipboard = new ClipboardManager({
- *   getValue: (row, col) => data[row][col],
- *   setValue: (row, col, value) => { data[row][col] = value; },
- * });
- *
- * // Copy selection
- * await clipboard.copy([
- *   { startRow: 0, startCol: 0, endRow: 2, endCol: 2 },
- * ]);
- *
- * // Paste at location
- * await clipboard.paste(5, 0);
- * ```
- */
-class ClipboardManager {
-    constructor(options) {
-        this.events = options.events;
-        this.getValue = options.getValue;
-        this.setValue = options.setValue;
-        this.deleteValue = options.deleteValue;
-        this.includeHeaders = options.includeHeaders ?? false;
-        this.getColumnHeader = options.getColumnHeader;
-    }
-    /**
-     * Copy selected ranges to clipboard
-     * @param ranges - Ranges to copy
-     */
-    async copy(ranges) {
-        if (ranges.length === 0)
-            return;
-        // For simplicity, copy only the first range
-        // TODO: Support multiple ranges
-        const range = ranges[0];
-        const data = this.extractRangeData(range);
-        const tsvText = this.toTSV(data);
-        const htmlText = this.toHTML(data);
-        try {
-            // Write to clipboard with multiple formats
-            await navigator.clipboard.write([
-                new ClipboardItem({
-                    'text/plain': new Blob([tsvText], { type: 'text/plain' }),
-                    'text/html': new Blob([htmlText], { type: 'text/html' }),
-                }),
-            ]);
-            // Emit event
-            if (this.events) {
-                this.events.emit('copy', {
-                    ranges,
-                    data: tsvText,
-                });
-            }
-        }
-        catch (error) {
-            console.error('Failed to copy to clipboard:', error);
-            // Fallback to older API
-            try {
-                await navigator.clipboard.writeText(tsvText);
-            }
-            catch (fallbackError) {
-                console.error('Fallback copy also failed:', fallbackError);
-            }
-        }
-    }
-    /**
-     * Cut selected ranges to clipboard (copy + delete)
-     * @param ranges - Ranges to cut
-     */
-    async cut(ranges) {
-        if (ranges.length === 0)
-            return;
-        // Copy first
-        await this.copy(ranges);
-        // Then delete values
-        for (const range of ranges) {
-            for (let row = range.startRow; row <= range.endRow; row++) {
-                for (let col = range.startCol; col <= range.endCol; col++) {
-                    if (this.deleteValue) {
-                        this.deleteValue(row, col);
-                    }
-                    else {
-                        this.setValue(row, col, null);
-                    }
-                }
-            }
-        }
-        // Emit event
-        if (this.events) {
-            this.events.emit('cut', {
-                ranges,
-                data: '', // Already emitted in copy
-            });
-        }
-    }
-    /**
-     * Paste from clipboard at target location
-     * @param targetRow - Target row
-     * @param targetCol - Target column
-     */
-    async paste(targetRow, targetCol) {
-        try {
-            // Try to read multiple formats
-            const items = await navigator.clipboard.read();
-            for (const item of items) {
-                // Prefer HTML format (preserves formatting)
-                if (item.types.includes('text/html')) {
-                    const blob = await item.getType('text/html');
-                    const html = await blob.text();
-                    const data = this.parseHTML(html);
-                    this.pasteData(data, targetRow, targetCol);
-                    return;
-                }
-                // Fallback to plain text
-                if (item.types.includes('text/plain')) {
-                    const blob = await item.getType('text/plain');
-                    const text = await blob.text();
-                    const data = this.parseTSV(text);
-                    this.pasteData(data, targetRow, targetCol);
-                    return;
-                }
-            }
-        }
-        catch (error) {
-            console.error('Failed to paste from clipboard:', error);
-            // Fallback to text API
-            try {
-                const text = await navigator.clipboard.readText();
-                const data = this.parseTSV(text);
-                this.pasteData(data, targetRow, targetCol);
-            }
-            catch (fallbackError) {
-                console.error('Fallback paste also failed:', fallbackError);
-            }
-        }
-    }
-    /**
-     * Extract data from a range
-     */
-    extractRangeData(range) {
-        const data = [];
-        // Include headers if requested
-        if (this.includeHeaders && this.getColumnHeader) {
-            const headers = [];
-            for (let col = range.startCol; col <= range.endCol; col++) {
-                headers.push(this.getColumnHeader(col));
-            }
-            data.push(headers);
-        }
-        // Extract cell values
-        for (let row = range.startRow; row <= range.endRow; row++) {
-            const rowData = [];
-            for (let col = range.startCol; col <= range.endCol; col++) {
-                rowData.push(this.getValue(row, col));
-            }
-            data.push(rowData);
-        }
-        return data;
-    }
-    /**
-     * Convert data to TSV format
-     */
-    toTSV(data) {
-        return data.map((row) => row.map((cell) => this.formatCellForTSV(cell)).join('\t')).join('\n');
-    }
-    /**
-     * Format cell value for TSV
-     */
-    formatCellForTSV(value) {
-        if (value == null)
-            return '';
-        const str = String(value);
-        // Escape tabs and newlines
-        return str.replace(/\t/g, ' ').replace(/\n/g, ' ');
-    }
-    /**
-     * Convert data to HTML table format
-     */
-    toHTML(data) {
-        let html = '<table>';
-        for (let i = 0; i < data.length; i++) {
-            const row = data[i];
-            const tag = i === 0 && this.includeHeaders ? 'th' : 'td';
-            html += '<tr>';
-            for (const cell of row) {
-                html += `<${tag}>${this.escapeHTML(String(cell ?? ''))}</${tag}>`;
-            }
-            html += '</tr>';
-        }
-        html += '</table>';
-        return html;
-    }
-    /**
-     * Escape HTML special characters
-     */
-    escapeHTML(str) {
-        return str
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#039;');
-    }
-    /**
-     * Parse TSV text to 2D array
-     */
-    parseTSV(text) {
-        const lines = text.split(/\r?\n/);
-        return lines.map((line) => line.split('\t'));
-    }
-    /**
-     * Parse HTML table to 2D array
-     */
-    parseHTML(html) {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(html, 'text/html');
-        const table = doc.querySelector('table');
-        if (!table) {
-            // No table found, treat as plain text
-            return this.parseTSV(doc.body.textContent || '');
-        }
-        const data = [];
-        const rows = Array.from(table.querySelectorAll('tr'));
-        for (const row of rows) {
-            const cells = Array.from(row.querySelectorAll('td, th'));
-            const rowData = [];
-            for (const cell of cells) {
-                rowData.push(cell.textContent || '');
-            }
-            if (rowData.length > 0) {
-                data.push(rowData);
-            }
-        }
-        return data;
-    }
-    /**
-     * Paste data at target location
-     */
-    pasteData(data, targetRow, targetCol) {
-        for (let i = 0; i < data.length; i++) {
-            const row = data[i];
-            for (let j = 0; j < row.length; j++) {
-                const value = row[j];
-                this.setValue(targetRow + i, targetCol + j, value);
-            }
-        }
-        // Emit event
-        if (this.events) {
-            this.events.emit('paste', {
-                cell: { row: targetRow, col: targetCol },
-                data: this.toTSV(data),
-            });
-        }
-    }
-}
-
 /**
  * Yield to the main thread via setTimeout(0).
  * Allows the browser to process pending events/rendering between chunks.
@@ -34292,4 +35067,4 @@ function alpha(hex, a) {
 // Version
 const VERSION = '0.1.0';
 
-export { ARIAManager, AdvancedCellRenderer, AutoFitCalculator, ButtonRenderer, CSVExporter, CellPool, CellPositioner, CheckboxEditor, CheckboxHeaderRenderer, CheckboxRenderer, ChipRenderer, ClipboardManager, ColumnDragCommand, ColumnDragManager, ColumnGroupManager, ColumnGroupModel, ColumnGroupRenderer, RendererRegistry as ColumnGroupRendererRegistry, ColumnModel, ColumnModelWidthProvider, ColumnPinPlugin, ColumnReorderPlugin, ColumnResizeManager, ColumnVisibilityPlugin, DateEditor, DatePickerRenderer, DateRangeEditor, DateRangeRenderer, DateRenderer, DateTimeEditor, DateTimePickerRenderer, DateTimeRenderer, DateRenderer as DatetimeDateRenderer, PopupManager as DatetimePopupManager, ThemeManager as DatetimeThemeManager, DependencyGraph, DragKeyboardHandler, DragTouchHandler, DragVisualFeedback, DropdownEditor, DropdownRenderer, EditorManager, EventEmitter$1 as EventEmitter, FilterableHeaderRenderer, FocusManager, Grid, GridApiImpl, GridStoreImpl as GridStore, IconHeaderRenderer, ImageRenderer, KeyboardNavigator, LinkRenderer, MultiColumnSorter, NumberRenderer, PipelineRegistry, PluginHost, ProgressBarRenderer, RendererCache, RendererRegistry$1 as RendererRegistry, ResizeHandleRenderer, ResizePreview, ScrollModel, SelectRenderer, SingleColumnSorter, SortStateManager, SortableHeaderRenderer, TextEditor, TextHeaderRenderer, TextRenderer, ThemeBuilder, TimeEditor, TimePickerRenderer, TimeRenderer, UniformHeightProvider, UniformWidthProvider, VERSION, VariableHeightProvider, VariableWidthProvider, ViewportModel, VirtualScroller, alpha, applyTheme, containsCell, createAsyncFilterPlugin, createAsyncSortPlugin, createColumnGroupRenderer, createRendererRegistry as createColumnGroupRendererRegistry, createCorePlugin, createDateEditor, createDatePickerRenderer, createDateRangeEditor, createDateRenderer, createDateTimeEditor, createDateTimePickerRenderer, createDateTimeRenderer, createDateRenderer as createDatetimeDateRenderer, createDevToolsConnector, createDropdownRenderer, createEditingPlugin, createFilterPlugin, createHitTester, createIdentityIndexMap, createIndexMap, createLifecyclePlugin, createSelectionPlugin, createSortPlugin, createTheme, createTimeEditor, createTimePickerRenderer, createTimeRenderer, createUndoRedoPlugin, darkTheme, darken, draculaTheme, formatDate, formatDateForDisplay, formatDateRange, formatDateTime$2 as formatDateTime, formatTime, getAllThemes, getRenderer as getColumnGroupRenderer, getTheme, githubTheme, globalRendererRegistry as globalColumnGroupRendererRegistry, hasRenderer as hasColumnGroupRenderer, hasTheme, isDateInRange, isValidDate, lightTheme, lighten, listThemes, materialTheme, mergeRanges, nordTheme, normalizeRange, oneDarkTheme, parseDate, parseDateTime, parseTime, processInChunks, rangesIntersect, registerRenderer as registerColumnGroupRenderer, registerTheme, removeTheme, setDatetimeTheme, setDatetimeThemeConfig, solarizedTheme, themeToCSSVariables, unregisterTheme, yieldToMain };
+export { ARIAManager, AdvancedCellRenderer, AutoFitCalculator, ButtonRenderer, CSVExporter, CellPool, CellPositioner, CheckboxEditor, CheckboxHeaderRenderer, CheckboxRenderer, ChipRenderer, ClipboardManager, ColumnDragCommand, ColumnDragManager, ColumnGroupManager, ColumnGroupModel, ColumnGroupRenderer, RendererRegistry as ColumnGroupRendererRegistry, ColumnModel, ColumnModelWidthProvider, ColumnPinPlugin, ColumnReorderPlugin, ColumnResizeManager, ColumnVisibilityPlugin, DateEditor, DatePickerRenderer, DateRangeEditor, DateRangeRenderer, DateRenderer, DateTimeEditor, DateTimePickerRenderer, DateTimeRenderer, DateRenderer as DatetimeDateRenderer, PopupManager as DatetimePopupManager, ThemeManager as DatetimeThemeManager, DependencyGraph, DragKeyboardHandler, DragTouchHandler, DragVisualFeedback, DropdownEditor, DropdownRenderer, EditorManager, EventEmitter$1 as EventEmitter, FilterableHeaderRenderer, FocusManager, Grid, GridApiImpl, GridStoreImpl as GridStore, IconHeaderRenderer, ImageRenderer, KeyboardNavigator, LinkRenderer, MultiColumnSorter, NumberRenderer, PipelineRegistry, PluginHost, ProgressBarRenderer, RendererCache, RendererRegistry$1 as RendererRegistry, ResizeHandleRenderer, ResizePreview, ScrollModel, SelectRenderer, SingleColumnSorter, SortStateManager, SortableHeaderRenderer, TextEditor, TextHeaderRenderer, TextRenderer, ThemeBuilder, TimeEditor, TimePickerRenderer, TimeRenderer, UniformHeightProvider, UniformWidthProvider, VERSION, VariableHeightProvider, VariableWidthProvider, ViewportModel, VirtualScroller, alpha, applyTheme, containsCell, createAsyncFilterPlugin, createAsyncSortPlugin, createClipboardPlugin, createColumnGroupRenderer, createRendererRegistry as createColumnGroupRendererRegistry, createCorePlugin, createDateEditor, createDatePickerRenderer, createDateRangeEditor, createDateRenderer, createDateTimeEditor, createDateTimePickerRenderer, createDateTimeRenderer, createDateRenderer as createDatetimeDateRenderer, createDevToolsConnector, createDropdownRenderer, createEditingPlugin, createFilterPlugin, createFilterUIPlugin, createHitTester, createIdentityIndexMap, createIndexMap, createKeyboardPlugin, createLifecyclePlugin, createSelectionPlugin, createSortPlugin, createTheme, createTimeEditor, createTimePickerRenderer, createTimeRenderer, createUndoRedoPlugin, darkTheme, darken, draculaTheme, formatDate, formatDateForDisplay, formatDateRange, formatDateTime$2 as formatDateTime, formatTime, getAllThemes, getRenderer as getColumnGroupRenderer, getTheme, githubTheme, globalRendererRegistry as globalColumnGroupRendererRegistry, hasRenderer as hasColumnGroupRenderer, hasTheme, isDateInRange, isValidDate, lightTheme, lighten, listThemes, materialTheme, mergeRanges, nordTheme, normalizeRange, oneDarkTheme, parseDate, parseDateTime, parseTime, processInChunks, rangesIntersect, registerRenderer as registerColumnGroupRenderer, registerTheme, removeTheme, setDatetimeTheme, setDatetimeThemeConfig, solarizedTheme, themeToCSSVariables, unregisterTheme, yieldToMain };