@zengrid/core 1.2.2 → 1.3.0

package/dist/index.cjs.js

@@ -1065,6 +1065,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);
@@ -1205,12 +1208,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;
@@ -1222,6 +1232,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)
@@ -1294,12 +1329,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
@@ -1332,6 +1384,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;
@@ -1345,10 +1403,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);
@@ -1356,10 +1426,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;
@@ -1391,8 +1462,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,
@@ -1403,13 +1475,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);
@@ -1422,23 +1508,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);
@@ -1446,8 +1540,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) => {
@@ -1455,9 +1555,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
@@ -1585,6 +1687,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}`;
     }
@@ -3007,6 +3139,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)
@@ -3035,24 +3169,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)
  */
@@ -4780,6 +4929,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
      */
@@ -4827,19 +4983,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);
@@ -4869,9 +5025,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';
         }
@@ -4892,19 +5048,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);
@@ -9000,6 +9156,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;
@@ -9028,6 +9188,7 @@ class DragMouseHandler {
             this.container = null;
         }
         this.removeGlobalListeners();
+        this.sourceHeaderCell = null;
     }
     /**
      * Handle mousedown event on header
@@ -9042,6 +9203,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;
@@ -9085,7 +9247,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
@@ -9104,6 +9266,7 @@ class DragMouseHandler {
         this.callbacks.onMouseUp();
         // Remove global listeners
         this.removeGlobalListeners();
+        this.sourceHeaderCell = null;
     }
     /**
      * Remove global mouse listeners
@@ -11343,6 +11506,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)) {
@@ -11408,6 +11579,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) {
@@ -12315,7 +12489,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: {
@@ -12547,12 +12721,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) {
@@ -16577,6 +16751,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
      */
@@ -16762,6 +16960,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 shared.IntervalTree({ balanced: true });
+        this.colIntervals = new shared.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
      */
@@ -16850,6 +17074,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();
@@ -16903,6 +17132,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') {
@@ -16933,7 +17169,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 };
                     }
@@ -16971,6 +17217,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),
@@ -17144,8 +17391,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';
@@ -17424,16 +17671,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);
@@ -17507,13 +17754,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();
     }
 }
 
@@ -17550,16 +17798,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) {
@@ -17629,7 +17877,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();
     }
 }
@@ -17787,6 +18040,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) => {
@@ -19066,12 +19325,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
@@ -19103,6 +19369,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
@@ -19358,9 +19626,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);
@@ -19841,6 +20117,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
@@ -19893,10 +20171,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
@@ -19973,16 +20251,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', {
@@ -20053,6 +20352,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
      */
@@ -20229,6 +20558,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',
@@ -20262,24 +20605,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];
@@ -20298,6 +20645,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', () => {
@@ -20343,6 +20695,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;
@@ -20350,30 +20706,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),
@@ -20402,6 +20748,663 @@ function createEditingPlugin(pluginOpts) {
     };
 }
 
+const NAV_KEYS = new Set([
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'PageUp',
+    'PageDown',
+    'Home',
+    'End',
+]);
+/**
+ * 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);
+}
+/**
+ * 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).
+ */
+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 };
+}
+
+/**
+ * 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.
+ */
+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())] };
+        },
+    };
+}
+
+/**
+ * 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
  *
@@ -20833,42 +21836,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) {
@@ -22701,16 +23707,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;
 }
 /**
@@ -22722,13 +23718,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;
 }
 /**
@@ -22737,17 +23727,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;
 }
@@ -22786,11 +23770,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;
 }
 /**
@@ -22810,10 +23789,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;
 }
 /**
@@ -22823,9 +23798,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;
 }
 /**
@@ -23042,8 +24014,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,
@@ -23414,6 +24391,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');
@@ -23620,8 +24599,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');
@@ -24013,7 +25000,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;
@@ -24244,15 +25234,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');
@@ -24262,8 +25255,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 = [];
@@ -24290,6 +25298,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),
@@ -25534,6 +26543,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());
@@ -25707,8 +26717,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)
@@ -25720,6 +26739,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
  */
@@ -25815,6 +26864,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;
@@ -25897,13 +26949,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() {
@@ -26481,6 +27533,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() {
@@ -26547,6 +27618,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'));
                 }
@@ -26579,6 +27651,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);
                 }
@@ -26754,7 +27827,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');
@@ -26932,13 +28005,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);
                 }
@@ -27020,6 +28093,254 @@ function createColumnPlugin(opts) {
     };
 }
 
+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);
+        }
+        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;
+    }
+    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(),
+        });
+    }
+    return chips;
+}
+function buildFieldStateChips(root, expression, labels, actions) {
+    if (root.logic !== 'AND') {
+        return [{ label: describeFieldGroup(root, labels), remove: () => actions.applyStructuredRoot(null) }];
+    }
+    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}`;
+    }
+    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;
+    }
+    render() {
+        const chipBar = this.ensureChipBar();
+        const chips = buildChipDescriptors(this.getFilterExpression(), this.labels, this.actions);
+        chipBar.replaceChildren();
+        if (chips.length === 0) {
+            chipBar.style.display = 'none';
+            this.updateLayout();
+            return;
+        }
+        chipBar.style.display = '';
+        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) {
+            chipList.appendChild(this.createChipElement(chip.label, chip.remove));
+        }
+        chipBar.appendChild(chipList);
+        const clearAllButton = document.createElement('button');
+        clearAllButton.type = 'button';
+        clearAllButton.className = 'zg-filter-chip-bar__clear';
+        clearAllButton.textContent = 'Clear all';
+        clearAllButton.addEventListener('click', () => this.actions.clearAllFilters());
+        chipBar.appendChild(clearAllButton);
+        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;
+        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 = 'x';
+        removeButton.addEventListener('click', remove);
+        chip.appendChild(removeButton);
+        return chip;
+    }
+    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`;
+    }
+}
+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 },
@@ -27049,315 +28370,311 @@ const DATE_OPERATORS = [
     { 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';
+        });
+    };
+    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();
+        });
+        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;
+        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 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', 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;
+        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.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.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.filterClickUnsub = options.events.on('header:filter:click', (payload) => {
             this.openFilterPopup(payload);
         });
-        this.filterChangeUnsub = this.events.on('filter:change', () => {
-            this.renderFilterChips();
+        this.filterChangeUnsub = options.events.on('filter:change', () => {
+            this.chipBar.render();
         });
-        this.renderFilterChips();
+        this.chipBar.render();
     }
     setColumns(columns) {
         this.columns = [...columns];
         this.closePopup();
-        this.renderFilterChips();
+        this.chipBar.render();
+    }
+    destroy() {
+        this.closePopup();
+        this.filterClickUnsub?.();
+        this.filterChangeUnsub?.();
+        this.filterClickUnsub = null;
+        this.filterChangeUnsub = null;
+        this.chipBar.destroy();
     }
     openFilterPopup(payload) {
-        const dataCol = this.mapVisualToDataCol(payload.columnIndex);
-        const columnDef = this.getColumnDef(dataCol);
+        const dataCol = this.options.mapVisualToDataCol(payload.columnIndex);
+        const columnDef = this.options.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 = 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),
         });
-        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;
-        }
-        return value;
-    }
-    getOperatorsForType(type) {
-        switch (type) {
-            case 'number':
-                return NUMBER_OPERATORS;
-            case 'date':
-                return DATE_OPERATORS;
-            default:
-                return TEXT_OPERATORS;
-        }
     }
-    getOperatorValueCount(operator, type) {
-        const operators = this.getOperatorsForType(type);
-        return operators.find((op) => op.value === operator)?.valueCount ?? 1;
+    closePopup() {
+        this.popup?.close();
+        this.popup = null;
     }
     getColumnLabel(column, index) {
         if (typeof column.header === 'string')
@@ -27366,308 +28683,13 @@ class GridFilterUI {
     }
     getColumnLabelByField(field) {
         const index = this.columns.findIndex((column) => column.field === field);
-        if (index < 0) {
+        if (index < 0)
             return field;
-        }
         return this.getColumnLabel(this.columns[index], index);
     }
     getColumnLabelByIndex(index) {
-        const column = this.columns[index] ?? this.getColumnDef(index);
-        if (!column) {
-            return `Column ${index}`;
-        }
-        return this.getColumnLabel(column, index);
-    }
-    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;
-    }
-    renderFilterChips() {
-        const chipBar = this.ensureChipBar();
-        const expression = this.getFilterExpression();
-        const chips = this.buildChipDescriptors(expression);
-        chipBar.replaceChildren();
-        if (chips.length === 0) {
-            chipBar.style.display = 'none';
-            this.updateChipBarLayout();
-            return;
-        }
-        chipBar.style.display = '';
-        const title = document.createElement('span');
-        title.className = 'zg-filter-chip-bar__title';
-        title.textContent = 'Filters';
-        chipBar.appendChild(title);
-        const chipList = document.createElement('div');
-        chipList.className = 'zg-filter-chip-bar__list';
-        for (const chip of chips) {
-            chipList.appendChild(this.createChipElement(chip.label, chip.remove));
-        }
-        chipBar.appendChild(chipList);
-        const clearAllButton = document.createElement('button');
-        clearAllButton.type = 'button';
-        clearAllButton.className = 'zg-filter-chip-bar__clear';
-        clearAllButton.textContent = 'Clear all';
-        clearAllButton.addEventListener('click', () => {
-            this.clearAllFilters();
-        });
-        chipBar.appendChild(clearAllButton);
-        this.updateChipBarLayout();
-    }
-    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);
-        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();
-        });
-        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;
-    }
-    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),
-            });
-        });
-        (root.groups ?? []).forEach((group, index) => {
-            chips.push({
-                label: this.describeFieldGroup(group),
-                remove: () => this.removeTopLevelGroup(index),
-            });
-        });
-        return chips;
-    }
-    removeTopLevelCondition(conditionIndex) {
-        const root = this.getFilterExpression()?.fieldState?.root;
-        if (!root) {
-            return;
-        }
-        if (root.logic !== 'AND') {
-            this.applyStructuredRoot(null);
-            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) {
-            return;
-        }
-        if (root.logic !== 'AND') {
-            this.applyStructuredRoot(null);
-            return;
-        }
-        const nextRoot = this.normalizeFieldGroup({
-            logic: root.logic,
-            conditions: [...root.conditions],
-            groups: root.groups?.filter((_, index) => index !== groupIndex),
-        });
-        this.applyStructuredRoot(nextRoot);
-    }
-    applyStructuredRoot(root) {
-        this.setFieldState({
-            root,
-            activeFields: this.collectActiveFields(root),
-            timestamp: Date.now(),
-        });
-    }
-    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}`;
-    }
-    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;
-    }
-    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)}`;
-        }
-    }
-    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);
-    }
-    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`;
-        }
-    }
-    teardownPopup() {
-        if (this.popupKeyHandler && this.popup) {
-            this.popup.removeEventListener('keydown', this.popupKeyHandler);
-            this.popupKeyHandler = null;
-        }
-        if (this.popup) {
-            this.popup.remove();
-            this.popup = null;
-        }
-    }
-    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();
+        const column = this.columns[index] ?? this.options.getColumnDef(index);
+        return column ? this.getColumnLabel(column, index) : `Column ${index}`;
     }
 }
 
@@ -27901,16 +28923,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
@@ -27924,14 +28948,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',
@@ -27946,17 +28970,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) {
@@ -27967,36 +28988,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
@@ -28008,13 +29037,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');
@@ -28022,13 +29051,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', () => {
@@ -28138,8 +29164,6 @@ function createSlimContext(container, options) {
         data: [],
         selection: [],
         activeCell: null,
-        sortState: [],
-        filterState: [],
         scrollPosition: { top: 0, left: 0 },
         editingCell: null,
     };
@@ -28150,6 +29174,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(),
@@ -28224,6 +29254,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());
@@ -28235,6 +29280,7 @@ function installAllPlugins(ctx) {
     }));
     // Phase 70: Header
     pluginHost.use(createHeaderPlugin({
+        options,
         events,
         getColumnModel: () => columnModel,
     }));
@@ -28252,10 +29298,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);
@@ -28266,15 +29316,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 &&
@@ -29711,10 +30754,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 ---
@@ -30365,8 +31405,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';
@@ -30385,8 +31425,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';
@@ -33572,271 +34612,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.
@@ -34386,6 +35161,7 @@ exports.applyTheme = applyTheme;
 exports.containsCell = containsCell;
 exports.createAsyncFilterPlugin = createAsyncFilterPlugin;
 exports.createAsyncSortPlugin = createAsyncSortPlugin;
+exports.createClipboardPlugin = createClipboardPlugin;
 exports.createColumnGroupRenderer = createColumnGroupRenderer;
 exports.createColumnGroupRendererRegistry = createRendererRegistry;
 exports.createCorePlugin = createCorePlugin;
@@ -34401,9 +35177,11 @@ exports.createDevToolsConnector = createDevToolsConnector;
 exports.createDropdownRenderer = createDropdownRenderer;
 exports.createEditingPlugin = createEditingPlugin;
 exports.createFilterPlugin = createFilterPlugin;
+exports.createFilterUIPlugin = createFilterUIPlugin;
 exports.createHitTester = createHitTester;
 exports.createIdentityIndexMap = createIdentityIndexMap;
 exports.createIndexMap = createIndexMap;
+exports.createKeyboardPlugin = createKeyboardPlugin;
 exports.createLifecyclePlugin = createLifecyclePlugin;
 exports.createSelectionPlugin = createSelectionPlugin;
 exports.createSortPlugin = createSortPlugin;