@alaarab/ogrid-js 2.0.9 → 2.0.12

package/dist/esm/OGrid.js

@@ -22,7 +22,90 @@ import { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 import { InlineCellEditor } from './components/InlineCellEditor';
 import { ContextMenu } from './components/ContextMenu';
 import { EventEmitter } from './state/EventEmitter';
-import { normalizeSelectionRange, isInSelectionRange, flattenColumns } from '@alaarab/ogrid-core';
+import { normalizeSelectionRange, isInSelectionRange, flattenColumns, injectGlobalStyles } from '@alaarab/ogrid-core';
+/** CSS variable definitions for light and dark themes (injected once per page). */
+const OGRID_THEME_CSS = `
+:root {
+  --ogrid-bg: #ffffff;
+  --ogrid-fg: rgba(0, 0, 0, 0.87);
+  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-border: rgba(0, 0, 0, 0.12);
+  --ogrid-header-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+  --ogrid-accent: #0078d4;
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+  --ogrid-bg-subtle: #f3f2f1;
+  --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
+  --ogrid-bg-selected: #e6f0fb;
+  --ogrid-bg-selected-hover: #dae8f8;
+  --ogrid-bg-range: rgba(33, 115, 70, 0.12);
+  --ogrid-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-selection: #217346;
+  --ogrid-primary: #217346;
+  --ogrid-primary-fg: #fff;
+  --ogrid-loading-bg: rgba(255, 255, 255, 0.7);
+  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+[data-theme='dark'] {
+  --ogrid-bg: #1e1e1e;
+  --ogrid-fg: rgba(255, 255, 255, 0.87);
+  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-selected-row-bg: #1a3a5c;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+  --ogrid-accent: #4da6ff;
+  --ogrid-selection-color: #2ea043;
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  --ogrid-bg-subtle: #2a2a2a;
+  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
+  --ogrid-bg-selected: #1a3a5c;
+  --ogrid-bg-selected-hover: #1f426b;
+  --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+  --ogrid-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-selection: #2ea043;
+  --ogrid-primary: #2ea043;
+  --ogrid-primary-fg: #fff;
+  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
+  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --ogrid-bg: #1e1e1e;
+    --ogrid-fg: rgba(255, 255, 255, 0.87);
+    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-border: rgba(255, 255, 255, 0.12);
+    --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+    --ogrid-selected-row-bg: #1a3a5c;
+    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+    --ogrid-accent: #4da6ff;
+    --ogrid-selection-color: #2ea043;
+    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+    --ogrid-bg-subtle: #2a2a2a;
+    --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
+    --ogrid-bg-selected: #1a3a5c;
+    --ogrid-bg-selected-hover: #1f426b;
+    --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+    --ogrid-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-selection: #2ea043;
+    --ogrid-primary: #2ea043;
+    --ogrid-primary-fg: #fff;
+    --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
+    --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+  }
+}
+`;
 export class OGrid {
     constructor(container, options) {
         // Sidebar
@@ -50,15 +133,21 @@ export class OGrid {
         this.contextMenu = null;
         this.events = new EventEmitter();
         this.unsubscribes = [];
+        this.layoutVersion = 0; // Incremented when items, columns, sizing, or order change
         this.options = options;
         this.state = new GridState(options);
         this.api = this.state.getApi();
+        // Inject theme CSS variables (light + dark) once per page
+        injectGlobalStyles('ogrid-theme-vars', OGRID_THEME_CSS);
         // Build layout
         this.containerEl = document.createElement('div');
         this.containerEl.className = 'ogrid-container';
         // Toolbar
         this.toolbarEl = document.createElement('div');
         this.toolbarEl.className = 'ogrid-toolbar';
+        // Left spacer keeps column chooser on the right via justify-content: space-between
+        const toolbarSpacer = document.createElement('div');
+        this.toolbarEl.appendChild(toolbarSpacer);
         this.containerEl.appendChild(this.toolbarEl);
         // Body area (holds sidebar + table, side by side)
         this.bodyArea = document.createElement('div');
@@ -384,7 +473,7 @@ export class OGrid {
         });
         this.renderer.update();
         // Update marching ants overlay
-        this.marchingAnts?.update(this.selectionState.selectionRange, this.clipboardState.copyRange, this.clipboardState.cutRange);
+        this.marchingAnts?.update(this.selectionState.selectionRange, this.clipboardState.copyRange, this.clipboardState.cutRange, this.layoutVersion);
     }
     updateDragAttributes() {
         const wrapper = this.renderer.getWrapperElement();
@@ -640,7 +729,7 @@ export class OGrid {
                 this.loadingOverlay.style.display = 'flex';
                 this.loadingOverlay.style.alignItems = 'center';
                 this.loadingOverlay.style.justifyContent = 'center';
-                this.loadingOverlay.style.background = 'rgba(255,255,255,0.7)';
+                this.loadingOverlay.style.background = 'var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7))';
                 this.loadingOverlay.style.zIndex = '100';
                 const spinner = document.createElement('div');
                 spinner.className = 'ogrid-loading-spinner';
@@ -658,6 +747,8 @@ export class OGrid {
         }
     }
     renderAll() {
+        // Increment layout version to trigger marching ants re-measurement
+        this.layoutVersion++;
         const colOffset = this.rowSelectionState ? 1 : 0;
         // Update header filter state with current filters and options
         this.headerFilterState.setFilters(this.state.filters);

package/dist/esm/components/HeaderFilter.js

@@ -26,7 +26,7 @@ export class HeaderFilter {
         this.popoverEl.style.color = 'var(--ogrid-fg, #242424)';
         this.popoverEl.style.border = '1px solid var(--ogrid-border, #e0e0e0)';
         this.popoverEl.style.borderRadius = '4px';
-        this.popoverEl.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
+        this.popoverEl.style.boxShadow = 'var(--ogrid-shadow, 0 2px 8px rgba(0,0,0,0.15))';
         this.popoverEl.style.padding = '8px';
         this.popoverEl.style.minWidth = '200px';
         this.popoverEl.style.maxHeight = '320px';

package/dist/esm/components/InlineCellEditor.js

@@ -243,6 +243,8 @@ export class InlineCellEditor {
         input.style.outline = 'none';
         input.style.padding = '4px';
         input.style.boxSizing = 'border-box';
+        input.style.background = 'var(--ogrid-bg, #fff)';
+        input.style.color = 'var(--ogrid-fg, rgba(0, 0, 0, 0.87))';
         wrapper.appendChild(input);
         const dropdown = document.createElement('div');
         dropdown.style.position = 'absolute';
@@ -251,8 +253,8 @@ export class InlineCellEditor {
         dropdown.style.width = '100%';
         dropdown.style.maxHeight = '200px';
         dropdown.style.overflowY = 'auto';
-        dropdown.style.backgroundColor = 'white';
-        dropdown.style.border = '1px solid #ccc';
+        dropdown.style.backgroundColor = 'var(--ogrid-bg, #fff)';
+        dropdown.style.border = '1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))';
         dropdown.style.zIndex = '1001';
         wrapper.appendChild(dropdown);
         const values = column.cellEditorParams?.values ?? [];
@@ -273,10 +275,10 @@ export class InlineCellEditor {
                     this.closeEditor();
                 });
                 option.addEventListener('mouseenter', () => {
-                    option.style.backgroundColor = '#f0f0f0';
+                    option.style.backgroundColor = 'var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04))';
                 });
                 option.addEventListener('mouseleave', () => {
-                    option.style.backgroundColor = 'white';
+                    option.style.backgroundColor = 'var(--ogrid-bg, #fff)';
                 });
                 dropdown.appendChild(option);
             }

package/dist/esm/components/MarchingAntsOverlay.js

@@ -1,31 +1,18 @@
-/** Inject the @keyframes rule once into <head> (deduplicates across multiple instances). */
-function ensureKeyframes() {
-    if (typeof document === 'undefined')
-        return;
-    if (document.getElementById('ogrid-marching-ants-keyframes'))
-        return;
-    const style = document.createElement('style');
-    style.id = 'ogrid-marching-ants-keyframes';
-    style.textContent =
-        '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}';
-    document.head.appendChild(style);
-}
-/** Measure the bounding rect of a range within a container. */
+import { injectGlobalStyles, measureRange as measureRangeCore } from '@alaarab/ogrid-core';
+/**
+ * Measure the bounding rect of a range within a container, with scroll offsets.
+ * This variant adds scroll offsets for the JS implementation's scrollable container.
+ */
 function measureRange(container, range, colOffset) {
-    const startGlobalCol = range.startCol + colOffset;
-    const endGlobalCol = range.endCol + colOffset;
-    const topLeft = container.querySelector(`[data-row-index="${range.startRow}"][data-col-index="${startGlobalCol}"]`);
-    const bottomRight = container.querySelector(`[data-row-index="${range.endRow}"][data-col-index="${endGlobalCol}"]`);
-    if (!topLeft || !bottomRight)
+    const rect = measureRangeCore(container, range, colOffset);
+    if (!rect)
         return null;
-    const cRect = container.getBoundingClientRect();
-    const tlRect = topLeft.getBoundingClientRect();
-    const brRect = bottomRight.getBoundingClientRect();
+    // Add scroll offsets for JS implementation's scrollable container
     return {
-        top: tlRect.top - cRect.top + container.scrollTop,
-        left: tlRect.left - cRect.left + container.scrollLeft,
-        width: brRect.right - tlRect.left,
-        height: brRect.bottom - tlRect.top,
+        top: rect.top + container.scrollTop,
+        left: rect.left + container.scrollLeft,
+        width: rect.width,
+        height: rect.height,
     };
 }
 function rangesEqual(a, b) {
@@ -51,18 +38,25 @@ export class MarchingAntsOverlay {
         this.copyRange = null;
         this.cutRange = null;
         this.rafHandle = 0;
+        this.layoutVersion = 0; // Tracks layout changes to force re-measurement
         this.container = container;
         this.colOffset = colOffset;
-        ensureKeyframes();
+        injectGlobalStyles('ogrid-marching-ants-keyframes', '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}');
         // The container must be positioned for absolute SVGs
         const pos = getComputedStyle(container).position;
         if (pos === 'static' || pos === '') {
             container.style.position = 'relative';
         }
     }
-    update(selectionRange, copyRange, cutRange) {
-        // Skip if nothing changed
-        if (rangesEqual(this.selectionRange, selectionRange) &&
+    update(selectionRange, copyRange, cutRange, layoutVersion) {
+        // Track layout changes separately from range changes
+        const layoutChanged = layoutVersion !== undefined && layoutVersion !== this.layoutVersion;
+        if (layoutChanged && layoutVersion !== undefined) {
+            this.layoutVersion = layoutVersion;
+        }
+        // Skip if nothing changed (ranges or layout)
+        if (!layoutChanged &&
+            rangesEqual(this.selectionRange, selectionRange) &&
             rangesEqual(this.copyRange, copyRange) &&
             rangesEqual(this.cutRange, cutRange)) {
             return;

package/dist/esm/renderer/TableRenderer.js

@@ -110,7 +110,7 @@ export class TableRenderer {
         }
         // Background must be set on pinned cells to avoid showing content underneath
         if (!isHeader) {
-            el.style.backgroundColor = el.style.backgroundColor || '#fff';
+            el.style.backgroundColor = el.style.backgroundColor || 'var(--ogrid-bg, #fff)';
         }
     }
     renderHeader() {
@@ -410,20 +410,20 @@ export class TableRenderer {
                     // Active cell
                     if (activeCell && activeCell.rowIndex === rowIndex && activeCell.columnIndex === globalColIndex) {
                         td.setAttribute('data-active-cell', 'true');
-                        td.style.outline = '2px solid #0078d4';
+                        td.style.outline = '2px solid var(--ogrid-accent, #0078d4)';
                     }
                     // Selection range
                     if (selectionRange && isInSelectionRange(selectionRange, rowIndex, colIndex)) {
                         td.setAttribute('data-in-range', 'true');
-                        td.style.backgroundColor = '#e3f2fd';
+                        td.style.backgroundColor = 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.12))';
                     }
                     // Copy range
                     if (copyRange && isInSelectionRange(copyRange, rowIndex, colIndex)) {
-                        td.style.outline = '1px dashed #666';
+                        td.style.outline = '1px dashed var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5))';
                     }
                     // Cut range
                     if (cutRange && isInSelectionRange(cutRange, rowIndex, colIndex)) {
-                        td.style.outline = '1px dashed #d32f2f';
+                        td.style.outline = '1px dashed var(--ogrid-accent, #0078d4)';
                     }
                     // Editing cell (hide content, editor overlay will be shown)
                     if (editingCell && editingCell.rowId === rowId && editingCell.columnId === col.columnId) {

package/dist/styles/ogrid.css

@@ -7,23 +7,31 @@
 /* ── Light Theme (default) ── */
 :root {
   --ogrid-bg: #ffffff;
-  --ogrid-fg: #242424;
-  --ogrid-border: #e0e0e0;
+  --ogrid-fg: rgba(0, 0, 0, 0.87);
+  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-border: rgba(0, 0, 0, 0.12);
+  --ogrid-header-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+  --ogrid-accent: #0078d4;
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+  /* Aliases for backward compat */
   --ogrid-border-strong: #888;
   --ogrid-border-hover: #999;
   --ogrid-bg-subtle: #f3f2f1;
-  --ogrid-bg-hover: #f5f5f5;
+  --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
   --ogrid-bg-selected: #e6f0fb;
   --ogrid-bg-selected-hover: #dae8f8;
   --ogrid-bg-range: rgba(33, 115, 70, 0.12);
-  --ogrid-header-bg: #f5f5f5;
-  --ogrid-muted: #616161;
-  --ogrid-fg-muted: rgba(0, 0, 0, 0.4);
+  --ogrid-muted: rgba(0, 0, 0, 0.5);
   --ogrid-selection: #217346;
   --ogrid-primary: #217346;
   --ogrid-primary-fg: #fff;
   --ogrid-primary-hover: #1b5f39;
-  --ogrid-accent: #217346;
   --ogrid-accent-dark: #1b5f39;
   --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
@@ -33,55 +41,71 @@
 
 /* ── Dark Theme ── */
 [data-theme='dark'] {
-  --ogrid-bg: #1a1a24;
-  --ogrid-fg: #e0e0e0;
-  --ogrid-border: #333340;
+  --ogrid-bg: #1e1e1e;
+  --ogrid-fg: rgba(255, 255, 255, 0.87);
+  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-selected-row-bg: #1a3a5c;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+  --ogrid-accent: #4da6ff;
+  --ogrid-selection-color: #2ea043;
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  /* Aliases for backward compat */
   --ogrid-border-strong: #555;
   --ogrid-border-hover: #666;
-  --ogrid-bg-subtle: #22222e;
-  --ogrid-bg-hover: #2a2a38;
-  --ogrid-bg-selected: #1a2f45;
-  --ogrid-bg-selected-hover: #1f3650;
-  --ogrid-bg-range: rgba(58, 184, 118, 0.12);
-  --ogrid-header-bg: #22222e;
-  --ogrid-muted: #999;
-  --ogrid-fg-muted: rgba(255, 255, 255, 0.3);
-  --ogrid-selection: #3ab876;
-  --ogrid-primary: #3ab876;
-  --ogrid-primary-fg: #0a0a0f;
-  --ogrid-primary-hover: #4ec484;
-  --ogrid-accent: #3ab876;
-  --ogrid-accent-dark: #2fa768;
+  --ogrid-bg-subtle: #2a2a2a;
+  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
+  --ogrid-bg-selected: #1a3a5c;
+  --ogrid-bg-selected-hover: #1f426b;
+  --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+  --ogrid-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-selection: #2ea043;
+  --ogrid-primary: #2ea043;
+  --ogrid-primary-fg: #fff;
+  --ogrid-primary-hover: #3db852;
+  --ogrid-accent-dark: #3db852;
   --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
   --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
-  --ogrid-loading-bg: rgba(26, 26, 36, 0.7);
+  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
   --ogrid-pinned-shadow: rgba(0, 0, 0, 0.4);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light']) {
-    --ogrid-bg: #1a1a24;
-    --ogrid-fg: #e0e0e0;
-    --ogrid-border: #333340;
+    --ogrid-bg: #1e1e1e;
+    --ogrid-fg: rgba(255, 255, 255, 0.87);
+    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-border: rgba(255, 255, 255, 0.12);
+    --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+    --ogrid-selected-row-bg: #1a3a5c;
+    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+    --ogrid-accent: #4da6ff;
+    --ogrid-selection-color: #2ea043;
+    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+    /* Aliases for backward compat */
     --ogrid-border-strong: #555;
     --ogrid-border-hover: #666;
-    --ogrid-bg-subtle: #22222e;
-    --ogrid-bg-hover: #2a2a38;
-    --ogrid-bg-selected: #1a2f45;
-    --ogrid-bg-selected-hover: #1f3650;
-    --ogrid-bg-range: rgba(58, 184, 118, 0.12);
-    --ogrid-header-bg: #22222e;
-    --ogrid-muted: #999;
-    --ogrid-fg-muted: rgba(255, 255, 255, 0.3);
-    --ogrid-selection: #3ab876;
-    --ogrid-primary: #3ab876;
-    --ogrid-primary-fg: #0a0a0f;
-    --ogrid-primary-hover: #4ec484;
-    --ogrid-accent: #3ab876;
-    --ogrid-accent-dark: #2fa768;
+    --ogrid-bg-subtle: #2a2a2a;
+    --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
+    --ogrid-bg-selected: #1a3a5c;
+    --ogrid-bg-selected-hover: #1f426b;
+    --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+    --ogrid-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-selection: #2ea043;
+    --ogrid-primary: #2ea043;
+    --ogrid-primary-fg: #fff;
+    --ogrid-primary-hover: #3db852;
+    --ogrid-accent-dark: #3db852;
     --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
     --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
-    --ogrid-loading-bg: rgba(26, 26, 36, 0.7);
+    --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
     --ogrid-pinned-shadow: rgba(0, 0, 0, 0.4);
   }
 }

package/dist/types/OGrid.d.ts

@@ -35,6 +35,7 @@ export declare class OGrid<T> {
     private paginationContainer;
     private statusBarContainer;
     private options;
+    private layoutVersion;
     /** The imperative grid API (extends React's IOGridApi with JS-specific methods). */
     readonly api: IJsOGridApi<T>;
     constructor(container: HTMLElement, options: OGridOptions<T>);

package/dist/types/components/MarchingAntsOverlay.d.ts

@@ -1,4 +1,4 @@
-import type { ISelectionRange } from '@alaarab/ogrid-core';
+import { type ISelectionRange } from '@alaarab/ogrid-core';
 /**
  * MarchingAntsOverlay — renders SVG overlays on top of the grid:
  * 1. Selection range: solid green border
@@ -15,8 +15,9 @@ export declare class MarchingAntsOverlay {
     private copyRange;
     private cutRange;
     private rafHandle;
+    private layoutVersion;
     constructor(container: HTMLElement, colOffset?: number);
-    update(selectionRange: ISelectionRange | null, copyRange: ISelectionRange | null, cutRange: ISelectionRange | null): void;
+    update(selectionRange: ISelectionRange | null, copyRange: ISelectionRange | null, cutRange: ISelectionRange | null, layoutVersion?: number): void;
     private render;
     private createSvg;
     private positionSvg;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.0.9",
+  "version": "2.0.12",
   "description": "OGrid vanilla JS – framework-free data grid with sorting, filtering, pagination, and spreadsheet-style editing.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.9"
+    "@alaarab/ogrid-core": "2.0.12"
   },
   "sideEffects": false,
   "publishConfig": {