@alaarab/ogrid-angular 2.2.0 → 2.4.0

package/dist/esm/index.js

@@ -1,7 +1,7 @@
-import { flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, processClientSideDataAsync, validateRowIds, computeNextSortState, mergeFilter, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, parseValue, UndoRedoStack, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, getCellValue, computeTabNavigation, applyFillValues, computeAggregations, getDataGridStatusBarConfig, computeVisibleRange, computeTotalHeight, computeVisibleColumnRange, getScrollTopForRow, validateVirtualScrollConfig, GRID_BORDER_RADIUS, getStatusBarParts, GRID_CONTEXT_MENU_ITEMS, formatShortcut, injectGlobalStyles, partitionColumnsForVirtualization, buildHeaderRows, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, measureColumnContentWidth, getPaginationViewModel, ROW_NUMBER_COLUMN_WIDTH, reorderColumnArray, findCtrlArrowTarget, measureRange } from '@alaarab/ogrid-core';
+import { handleFormulaBarKeyDown, FormulaEngine, createGridDataAccessor, columnLetterToIndex, flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, deriveFormulaBarText, extractFormulaReferences, validateColumns, processClientSideDataAsync, validateRowIds, computeNextSortState, mergeFilter, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, parseValue, UndoRedoStack, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, getCellValue, applyCellDeletion, getScrollTopForRow, computeTabNavigation, applyFillValues, computeAggregations, getDataGridStatusBarConfig, computeVisibleRange, computeTotalHeight, computeVisibleColumnRange, validateVirtualScrollConfig, GRID_BORDER_RADIUS, getStatusBarParts, GRID_CONTEXT_MENU_ITEMS, formatShortcut, injectGlobalStyles, partitionColumnsForVirtualization, buildHeaderRows, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, measureColumnContentWidth, getPaginationViewModel, getColumnHeaderMenuItems, ROW_NUMBER_COLUMN_WIDTH, reorderColumnArray, findCtrlArrowTarget, measureRange, FORMULA_REF_COLORS } from '@alaarab/ogrid-core';
 export * from '@alaarab/ogrid-core';
 export { CELL_PADDING, CHECKBOX_COLUMN_WIDTH, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, GRID_BORDER_RADIUS, PEOPLE_SEARCH_DEBOUNCE_MS, ROW_NUMBER_COLUMN_WIDTH, SIDEBAR_TRANSITION_MS, Z_INDEX, debounce, getCellRenderDescriptor, getHeaderFilterConfig, isInSelectionRange, normalizeSelectionRange, resolveCellDisplayContent, resolveCellStyle, toUserLike } from '@alaarab/ogrid-core';
-import { Injectable, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, ViewChild, inject, DestroyRef, signal, computed, effect, NgZone, EventEmitter, Injector, EnvironmentInjector, createComponent } from '@angular/core';
+import { Injectable, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, ViewChild, input, output, viewChild, effect, inject, DestroyRef, signal, computed, NgZone, EventEmitter, Injector, EnvironmentInjector, createComponent } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 
 var __defProp = Object.defineProperty;
@@ -14,6 +14,201 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+var FormulaEngineService = class {
+  constructor() {
+    this.destroyRef = inject(DestroyRef);
+    // --- Internal state ---
+    this.engine = null;
+    this.initialLoaded = false;
+    // --- Data references (updated via configure or setData) ---
+    this.items = [];
+    this.flatColumns = [];
+    // --- Signals ---
+    /** Whether formula support is currently enabled. */
+    this.enabled = signal(false);
+    /** Last recalculation result, for UI to react to formula changes. */
+    this.lastRecalcResult = signal(null);
+    /** Number of formulas currently registered. */
+    this.formulaCount = computed(() => {
+      this.lastRecalcResult();
+      return this.engine?.getAllFormulas().length ?? 0;
+    });
+    this.destroyRef.onDestroy(() => {
+      this.engine?.clear();
+      this.engine = null;
+    });
+  }
+  /**
+   * Configure the formula engine. Call this when the grid component initializes.
+   *
+   * Lazily creates the FormulaEngine only when `formulas: true`.
+   */
+  configure(options) {
+    const { formulas, initialFormulas, formulaFunctions, onFormulaRecalc, namedRanges, sheets } = options;
+    this.onFormulaRecalcFn = onFormulaRecalc;
+    if (formulas && !this.engine) {
+      this.engine = new FormulaEngine({
+        customFunctions: formulaFunctions,
+        namedRanges
+      });
+      if (sheets) {
+        for (const [name, accessor] of Object.entries(sheets)) {
+          this.engine.registerSheet(name, accessor);
+        }
+      }
+      this.enabled.set(true);
+    } else if (!formulas && this.engine) {
+      this.engine.clear();
+      this.engine = null;
+      this.enabled.set(false);
+      this.lastRecalcResult.set(null);
+      this.initialLoaded = false;
+    }
+    if (formulas && this.engine && initialFormulas && !this.initialLoaded) {
+      this.initialLoaded = true;
+      const accessor = this.createAccessor();
+      const result = this.engine.loadFormulas(initialFormulas, accessor);
+      if (result.updatedCells.length > 0) {
+        this.lastRecalcResult.set(result);
+        this.onFormulaRecalcFn?.(result);
+      }
+    }
+  }
+  /**
+   * Update the data references used by the accessor bridge.
+   * Call this whenever the grid's items or columns change.
+   */
+  setData(items, flatColumns) {
+    this.items = items;
+    this.flatColumns = flatColumns;
+  }
+  /**
+   * Set or clear a formula for a cell. Triggers recalculation of dependents.
+   */
+  setFormula(col, row, formula, accessor) {
+    if (!this.engine) return;
+    const acc = accessor ?? this.createAccessor();
+    const result = this.engine.setFormula(col, row, formula, acc);
+    if (result.updatedCells.length > 0) {
+      this.lastRecalcResult.set(result);
+      this.onFormulaRecalcFn?.(result);
+    }
+  }
+  /**
+   * Notify the engine that a non-formula cell's value changed.
+   * Triggers recalculation of any formulas that depend on this cell.
+   */
+  onCellChanged(col, row, accessor) {
+    if (!this.engine) return;
+    const acc = accessor ?? this.createAccessor();
+    const result = this.engine.onCellChanged(col, row, acc);
+    if (result.updatedCells.length > 0) {
+      this.lastRecalcResult.set(result);
+      this.onFormulaRecalcFn?.(result);
+    }
+  }
+  /**
+   * Get the formula engine's computed value for a cell coordinate.
+   */
+  getValue(col, row) {
+    return this.engine?.getValue(col, row);
+  }
+  /**
+   * Check if a cell has a formula.
+   */
+  hasFormula(col, row) {
+    return this.engine?.hasFormula(col, row) ?? false;
+  }
+  /**
+   * Get the formula string for a cell.
+   */
+  getFormula(col, row) {
+    return this.engine?.getFormula(col, row);
+  }
+  /**
+   * Trigger a full recalculation of all formulas.
+   */
+  recalcAll(accessor) {
+    if (!this.engine) return;
+    const acc = accessor ?? this.createAccessor();
+    const result = this.engine.recalcAll(acc);
+    if (result.updatedCells.length > 0) {
+      this.lastRecalcResult.set(result);
+      this.onFormulaRecalcFn?.(result);
+    }
+  }
+  /**
+   * Get all formulas for serialization.
+   */
+  getAllFormulas() {
+    return this.engine?.getAllFormulas() ?? [];
+  }
+  /**
+   * Register a custom function at runtime.
+   */
+  registerFunction(name, fn) {
+    this.engine?.registerFunction(name, fn);
+  }
+  /**
+   * Clear all formulas and cached values.
+   */
+  clear() {
+    this.engine?.clear();
+    this.lastRecalcResult.set(null);
+  }
+  /**
+   * Define a named range.
+   */
+  defineNamedRange(name, ref) {
+    this.engine?.defineNamedRange(name, ref);
+  }
+  /**
+   * Remove a named range.
+   */
+  removeNamedRange(name) {
+    this.engine?.removeNamedRange(name);
+  }
+  /**
+   * Register a sheet accessor for cross-sheet references.
+   */
+  registerSheet(name, accessor) {
+    this.engine?.registerSheet(name, accessor);
+  }
+  /**
+   * Unregister a sheet accessor.
+   */
+  unregisterSheet(name) {
+    this.engine?.unregisterSheet(name);
+  }
+  /**
+   * Get all cells that a cell depends on (deep, transitive).
+   */
+  getPrecedents(col, row) {
+    return this.engine?.getPrecedents(col, row) ?? [];
+  }
+  /**
+   * Get all cells that depend on a cell (deep, transitive).
+   */
+  getDependents(col, row) {
+    return this.engine?.getDependents(col, row) ?? [];
+  }
+  /**
+   * Get full audit trail for a cell.
+   */
+  getAuditTrail(col, row) {
+    return this.engine?.getAuditTrail(col, row) ?? null;
+  }
+  // --- Private helpers ---
+  /** Create a data accessor that bridges grid data to formula coordinates. */
+  createAccessor() {
+    return createGridDataAccessor(this.items, this.flatColumns);
+  }
+};
+FormulaEngineService = __decorateClass([
+  Injectable()
+], FormulaEngineService);
+
+// src/services/ogrid.service.ts
 var DEFAULT_PAGE_SIZE = 25;
 var EMPTY_LOADING_OPTIONS = {};
 var DEFAULT_PANELS = ["columns", "filters"];
@@ -76,6 +271,52 @@ var OGridService = class {
     this.ariaLabel = signal(void 0);
     this.ariaLabelledBy = signal(void 0);
     this.workerSort = signal(false);
+    this.showRowNumbers = signal(false);
+    this.cellReferences = signal(false);
+    this.formulasEnabled = signal(false);
+    this.initialFormulas = signal(void 0);
+    this.onFormulaRecalc = signal(void 0);
+    this.formulaFunctions = signal(void 0);
+    this.namedRanges = signal(void 0);
+    this.sheets = signal(void 0);
+    this.sheetDefs = signal(void 0);
+    this.activeSheet = signal(void 0);
+    this.onSheetChange = signal(void 0);
+    this.onSheetAdd = signal(void 0);
+    /** Active cell reference string (e.g. 'A1') updated by DataGridTable when cellReferences is enabled. */
+    this.activeCellRef = signal(null);
+    /** Active cell coordinates (0-based col/row). */
+    this.activeCellCoords = signal(null);
+    /** Stable callback passed to DataGridTable to update activeCellRef + coords. */
+    this.handleActiveCellChange = (ref) => {
+      this.activeCellRef.set(ref);
+      if (ref) {
+        const m = ref.match(/^([A-Z]+)(\d+)$/);
+        if (m) {
+          this.activeCellCoords.set({ col: columnLetterToIndex(m[1]), row: parseInt(m[2], 10) - 1 });
+        } else {
+          this.activeCellCoords.set(null);
+        }
+      } else {
+        this.activeCellCoords.set(null);
+      }
+    };
+    // --- Formula bar state ---
+    this.formulaBarEditing = signal(false);
+    this.formulaBarEditText = signal("");
+    // --- Formula engine ---
+    this.formulaService = new FormulaEngineService();
+    /** Monotonic counter incremented on formula recalculation — drives cache invalidation. */
+    this.formulaVersion = signal(0);
+    // Stable formula method references for dataGridProps (avoid per-recompute arrow functions)
+    this.getFormulaValueFn = (col, row) => this.formulaService.getValue(col, row);
+    this.hasFormulaFn = (col, row) => this.formulaService.hasFormula(col, row);
+    this.getFormulaFn = (col, row) => this.formulaService.getFormula(col, row);
+    this.setFormulaFn = (col, row, formula) => this.formulaService.setFormula(col, row, formula ?? "");
+    this.onFormulaCellChangedFn = (col, row) => this.formulaService.onCellChanged(col, row);
+    this.getPrecedentsFn = (col, row) => this.formulaService.getPrecedents(col, row);
+    this.getDependentsFn = (col, row) => this.formulaService.getDependents(col, row);
+    this.getAuditTrailFn = (col, row) => this.formulaService.getAuditTrail(col, row);
     // --- Internal state signals ---
     this.internalData = signal([]);
     this.internalLoading = signal(false);
@@ -228,6 +469,52 @@ var OGridService = class {
       toggle: (panel) => this.sideBarActivePanel.update((p) => p === panel ? null : panel),
       close: () => this.sideBarActivePanel.set(null)
     }));
+    // --- Formula bar derived state ---
+    /** Display text derived from active cell (formula string or raw value). */
+    this.formulaBarDisplayText = computed(() => {
+      const coords = this.activeCellCoords();
+      if (!coords) return "";
+      const getFormula = this.formulaService.enabled() ? (c, r) => this.formulaService.getFormula(c, r) : void 0;
+      const items = this.displayItems();
+      const cols = this.columns();
+      const getRawValue = (c, r) => {
+        if (r < 0 || r >= items.length || c < 0 || c >= cols.length) return void 0;
+        return getCellValue(items[r], cols[c]);
+      };
+      return deriveFormulaBarText(coords.col, coords.row, getFormula, getRawValue);
+    });
+    /** Formula text shown in the bar: edit text when editing, display text otherwise. */
+    this.formulaBarText = computed(
+      () => this.formulaBarEditing() ? this.formulaBarEditText() : this.formulaBarDisplayText()
+    );
+    /** References extracted from the current formula text (for highlighting). */
+    this.formulaBarReferences = computed(
+      () => extractFormulaReferences(this.formulaBarText())
+    );
+    // Stable formula bar callbacks (avoid new closures per computed)
+    this.formulaBarOnInputChangeFn = (text) => {
+      this.formulaBarEditText.set(text);
+    };
+    this.formulaBarOnCommitFn = () => {
+      this.commitFormulaBar();
+    };
+    this.formulaBarOnCancelFn = () => {
+      this.cancelFormulaBar();
+    };
+    this.formulaBarStartEditingFn = () => {
+      this.startFormulaBarEditing();
+    };
+    /** Aggregate formula bar state for template consumption. */
+    this.formulaBarState = computed(() => ({
+      cellRef: this.activeCellRef(),
+      formulaText: this.formulaBarText(),
+      isEditing: this.formulaBarEditing(),
+      onInputChange: this.formulaBarOnInputChangeFn,
+      onCommit: this.formulaBarOnCommitFn,
+      onCancel: this.formulaBarOnCancelFn,
+      startEditing: this.formulaBarStartEditingFn,
+      referencedCells: this.formulaBarReferences()
+    }));
     // --- Pre-computed stable callback references for dataGridProps ---
     // These avoid recreating arrow functions on every dataGridProps recomputation.
     this.handleSortFn = (columnKey, direction) => this.handleSort(columnKey, direction);
@@ -267,6 +554,12 @@ var OGridService = class {
       rowSelection: this.rowSelection(),
       selectedRows: this.effectiveSelectedRows(),
       onSelectionChange: this.handleSelectionChangeFn,
+      showRowNumbers: this.showRowNumbers() || this.cellReferences() || this.formulasEnabled(),
+      showColumnLetters: !!(this.cellReferences() || this.formulasEnabled()),
+      showNameBox: !!(this.cellReferences() && !this.formulasEnabled()),
+      onActiveCellChange: this.cellReferences() || this.formulasEnabled() ? this.handleActiveCellChange : void 0,
+      currentPage: this.page(),
+      pageSize: this.pageSize(),
       statusBar: this.statusBarConfig(),
       isLoading: this.isLoadingResolved(),
       filters: this.filters(),
@@ -287,7 +580,20 @@ var OGridService = class {
         onClearAll: this.clearAllFiltersFn,
         message: this.emptyState()?.message,
         render: this.emptyState()?.render
-      }
+      },
+      formulas: this.formulasEnabled(),
+      formulaVersion: this.formulaVersion(),
+      formulaReferences: this.formulaBarReferences().length > 0 ? this.formulaBarReferences() : void 0,
+      ...this.formulaService.enabled() ? {
+        getFormulaValue: this.getFormulaValueFn,
+        hasFormula: this.hasFormulaFn,
+        getFormula: this.getFormulaFn,
+        setFormula: this.setFormulaFn,
+        onFormulaCellChanged: this.onFormulaCellChangedFn,
+        getPrecedents: this.getPrecedentsFn,
+        getDependents: this.getDependentsFn,
+        getAuditTrail: this.getAuditTrailFn
+      } : {}
     }));
     this.pagination = computed(() => ({
       page: this.page(),
@@ -444,6 +750,29 @@ var OGridService = class {
         this.sideBarActivePanel.set(parsed.defaultPanel);
       }
     });
+    effect(() => {
+      this.activeCellCoords();
+      this.formulaBarEditing.set(false);
+    });
+    effect(() => {
+      const userRecalcCb = this.onFormulaRecalc();
+      this.formulaService.configure({
+        formulas: this.formulasEnabled(),
+        initialFormulas: this.initialFormulas(),
+        formulaFunctions: this.formulaFunctions(),
+        onFormulaRecalc: (result) => {
+          this.formulaVersion.update((v) => v + 1);
+          userRecalcCb?.(result);
+        },
+        namedRanges: this.namedRanges(),
+        sheets: this.sheets()
+      });
+    });
+    effect(() => {
+      const items = this.displayItems();
+      const cols = this.columns();
+      this.formulaService.setData(items, cols);
+    });
     this.destroyRef.onDestroy(() => {
       this.fetchAbortController?.abort();
       this.filterAbortController?.abort();
@@ -522,6 +851,33 @@ var OGridService = class {
     });
     this.onColumnPinned()?.(columnId, pinned);
   }
+  // --- Formula bar methods ---
+  startFormulaBarEditing() {
+    this.formulaBarEditText.set(this.formulaBarDisplayText());
+    this.formulaBarEditing.set(true);
+  }
+  commitFormulaBar() {
+    const coords = this.activeCellCoords();
+    if (!coords) return;
+    const text = this.formulaBarEditText().trim();
+    if (text.startsWith("=")) {
+      this.formulaService.setFormula(coords.col, coords.row, text);
+      this.formulaVersion.update((v) => v + 1);
+    } else {
+      this.formulaService.setFormula(coords.col, coords.row, null);
+      this.onCellValueChanged()?.({
+        rowIndex: coords.row,
+        columnId: this.columns()[coords.col]?.columnId ?? "",
+        oldValue: void 0,
+        newValue: text
+      });
+    }
+    this.formulaBarEditing.set(false);
+  }
+  cancelFormulaBar() {
+    this.formulaBarEditing.set(false);
+    this.formulaBarEditText.set("");
+  }
   // --- Configure from props ---
   configure(props) {
     this.columnsProp.set(props.columns);
@@ -575,6 +931,18 @@ var OGridService = class {
     if (props.columnReorder !== void 0) this.columnReorder.set(props.columnReorder);
     if (props.virtualScroll !== void 0) this.virtualScroll.set(props.virtualScroll);
     if (props.workerSort !== void 0) this.workerSort.set(props.workerSort);
+    if (props.showRowNumbers !== void 0) this.showRowNumbers.set(props.showRowNumbers);
+    if (props.cellReferences !== void 0) this.cellReferences.set(props.cellReferences);
+    if (props.formulas !== void 0) this.formulasEnabled.set(props.formulas);
+    if (props.initialFormulas !== void 0) this.initialFormulas.set(props.initialFormulas);
+    if (props.onFormulaRecalc) this.onFormulaRecalc.set(props.onFormulaRecalc);
+    if (props.formulaFunctions !== void 0) this.formulaFunctions.set(props.formulaFunctions);
+    if (props.namedRanges !== void 0) this.namedRanges.set(props.namedRanges);
+    if (props.sheets !== void 0) this.sheets.set(props.sheets);
+    if (props.sheetDefs !== void 0) this.sheetDefs.set(props.sheetDefs);
+    if (props.activeSheet !== void 0) this.activeSheet.set(props.activeSheet);
+    if (props.onSheetChange) this.onSheetChange.set(props.onSheetChange);
+    if (props.onSheetAdd) this.onSheetAdd.set(props.onSheetAdd);
     if (props.entityLabelPlural !== void 0) this.entityLabelPlural.set(props.entityLabelPlural);
     if (props.className !== void 0) this.className.set(props.className);
     if (props.layoutMode !== void 0) this.layoutMode.set(props.layoutMode);
@@ -1112,7 +1480,7 @@ var DataGridInteractionHelper = class {
     const maxColIndex = visibleColumnCount - 1 + colOffset;
     if (items.length === 0) return;
     if (activeCell === null) {
-      if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Home", "End"].includes(e.key)) {
+      if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Home", "End", "PageDown", "PageUp"].includes(e.key)) {
         this.setActiveCell({ rowIndex: 0, columnIndex: colOffset });
         e.preventDefault();
       }
@@ -1268,6 +1636,36 @@ var DataGridInteractionHelper = class {
         this.setActiveCell({ rowIndex: newRowEnd, columnIndex: maxColIndex });
         break;
       }
+      case "PageDown":
+      case "PageUp": {
+        e.preventDefault();
+        let pageSize = 10;
+        let rowHeight = 36;
+        if (wrapperEl) {
+          const firstRow = wrapperEl.querySelector("tbody tr");
+          if (firstRow && firstRow.offsetHeight > 0) {
+            rowHeight = firstRow.offsetHeight;
+            pageSize = Math.max(1, Math.floor(wrapperEl.clientHeight / rowHeight));
+          }
+        }
+        const pgDir = e.key === "PageDown" ? 1 : -1;
+        const newRowPage = Math.max(0, Math.min(rowIndex + pgDir * pageSize, maxRowIndex));
+        if (shift) {
+          this.setSelectionRange(normalizeSelectionRange({
+            startRow: selectionRange?.startRow ?? rowIndex,
+            startCol: selectionRange?.startCol ?? dataColIndex,
+            endRow: newRowPage,
+            endCol: selectionRange?.endCol ?? dataColIndex
+          }));
+        } else {
+          this.setSelectionRange({ startRow: newRowPage, startCol: dataColIndex, endRow: newRowPage, endCol: dataColIndex });
+        }
+        this.setActiveCell({ rowIndex: newRowPage, columnIndex });
+        if (wrapperEl) {
+          wrapperEl.scrollTop = getScrollTopForRow(newRowPage, rowHeight, wrapperEl.clientHeight, "center");
+        }
+        break;
+      }
       case "Enter":
       case "F2": {
         e.preventDefault();
@@ -1341,20 +1739,8 @@ var DataGridInteractionHelper = class {
         const range = selectionRange ?? (activeCell != null ? { startRow: activeCell.rowIndex, startCol: activeCell.columnIndex - colOffset, endRow: activeCell.rowIndex, endCol: activeCell.columnIndex - colOffset } : null);
         if (range == null) break;
         e.preventDefault();
-        const norm = normalizeSelectionRange(range);
-        for (let r = norm.startRow; r <= norm.endRow; r++) {
-          for (let c = norm.startCol; c <= norm.endCol; c++) {
-            if (r >= items.length || c >= visibleCols.length) continue;
-            const item = items[r];
-            const col = visibleCols[c];
-            const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
-            if (!colEditable) continue;
-            const oldValue = getCellValue(item, col);
-            const result = parseValue("", oldValue, item, col);
-            if (!result.valid) continue;
-            wrappedOnCellValueChanged({ item, columnId: col.columnId, oldValue, newValue: result.value, rowIndex: r });
-          }
-        }
+        const deleteEvents = applyCellDeletion(normalizeSelectionRange(range), items, visibleCols);
+        for (const evt of deleteEvents) wrappedOnCellValueChanged(evt);
         break;
       }
       case "F10":
@@ -1987,7 +2373,10 @@ var DataGridStateService = class {
         getRowId: p?.getRowId ?? ((item) => item["id"]),
         editable: p?.editable,
         onCellValueChanged: this.wrappedOnCellValueChanged(),
-        isDragging: cellSel ? this.interactionHelper.isDraggingSig() : false
+        isDragging: cellSel ? this.interactionHelper.isDraggingSig() : false,
+        getFormulaValue: p?.getFormulaValue,
+        hasFormula: p?.hasFormula,
+        formulaVersion: p?.formulaVersion
       },
       statusBarConfig: this.statusBarConfig(),
       showEmptyInGrid: this.showEmptyInGrid(),
@@ -2634,6 +3023,205 @@ SideBarComponent = __decorateClass([
   `
   })
 ], SideBarComponent);
+var FormulaBarComponent = class {
+  constructor() {
+    /** Active cell reference (e.g. "A1"). */
+    this.cellRef = input(null);
+    /** Text displayed/edited in the formula input. */
+    this.formulaText = input("");
+    /** Whether the input is in editing mode. */
+    this.isEditing = input(false);
+    /** Called when the user changes the input text. */
+    this.inputChange = output();
+    /** Commit the formula bar value. */
+    this.commit = output();
+    /** Cancel editing. */
+    this.cancel = output();
+    /** Start editing the formula bar. */
+    this.startEditing = output();
+    this.inputEl = viewChild("formulaInput");
+    effect(() => {
+      if (this.isEditing()) {
+        const el = this.inputEl()?.nativeElement;
+        if (el) el.focus();
+      }
+    });
+  }
+  onInput(event) {
+    this.inputChange.emit(event.target.value);
+  }
+  onKeyDown(event) {
+    handleFormulaBarKeyDown(
+      event.key,
+      () => event.preventDefault(),
+      () => this.commit.emit(),
+      () => this.cancel.emit()
+    );
+  }
+  onClick() {
+    if (!this.isEditing()) {
+      this.startEditing.emit();
+    }
+  }
+};
+FormulaBarComponent = __decorateClass([
+  Component({
+    selector: "ogrid-formula-bar",
+    standalone: true,
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styles: [`
+    .ogrid-formula-bar {
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
+      background: var(--ogrid-bg, #fff);
+      min-height: 28px;
+      font-size: 13px;
+    }
+    .ogrid-formula-bar__name-box {
+      font-family: monospace;
+      font-size: 12px;
+      font-weight: 500;
+      padding: 2px 8px;
+      border-right: 1px solid var(--ogrid-border, #e0e0e0);
+      background: var(--ogrid-bg, #fff);
+      color: var(--ogrid-fg, #242424);
+      min-width: 52px;
+      text-align: center;
+      line-height: 24px;
+      user-select: none;
+      white-space: nowrap;
+    }
+    .ogrid-formula-bar__fx {
+      padding: 2px 8px;
+      font-style: italic;
+      font-weight: 600;
+      color: var(--ogrid-muted-fg, #888);
+      user-select: none;
+      border-right: 1px solid var(--ogrid-border, #e0e0e0);
+      line-height: 24px;
+      font-size: 12px;
+    }
+    .ogrid-formula-bar__input {
+      flex: 1;
+      border: none;
+      outline: none;
+      padding: 2px 8px;
+      font-family: monospace;
+      font-size: 12px;
+      line-height: 24px;
+      background: transparent;
+      color: var(--ogrid-fg, #242424);
+      min-width: 0;
+    }
+  `],
+    template: `
+    <div class="ogrid-formula-bar" role="toolbar" aria-label="Formula bar">
+      <div class="ogrid-formula-bar__name-box" aria-label="Active cell reference">
+        {{ cellRef() ?? '\u2014' }}
+      </div>
+      <div class="ogrid-formula-bar__fx" aria-hidden="true">fx</div>
+      <input
+        #formulaInput
+        type="text"
+        class="ogrid-formula-bar__input"
+        [value]="formulaText()"
+        [readOnly]="!isEditing()"
+        (input)="onInput($event)"
+        (keydown)="onKeyDown($event)"
+        (click)="onClick()"
+        (dblclick)="onClick()"
+        aria-label="Formula input"
+        [attr.spellcheck]="false"
+        autocomplete="off"
+      />
+    </div>
+  `
+  })
+], FormulaBarComponent);
+var SheetTabsComponent = class {
+  constructor() {
+    this.sheets = input.required();
+    this.activeSheet = input.required();
+    this.showAddButton = input(false);
+    this.sheetChange = output();
+    this.sheetAdd = output();
+  }
+};
+SheetTabsComponent = __decorateClass([
+  Component({
+    selector: "ogrid-sheet-tabs",
+    standalone: true,
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styles: [`
+    .ogrid-sheet-tabs {
+      display: flex;
+      align-items: center;
+      border-top: 1px solid var(--ogrid-border, #e0e0e0);
+      background: var(--ogrid-header-bg, #f5f5f5);
+      min-height: 30px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      gap: 0;
+      font-size: 12px;
+    }
+    .ogrid-sheet-tabs__add-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px 10px;
+      font-size: 16px;
+      line-height: 22px;
+      color: var(--ogrid-fg-secondary, #666);
+      flex-shrink: 0;
+    }
+    .ogrid-sheet-tabs__tab {
+      background: none;
+      border: none;
+      border-bottom: 2px solid transparent;
+      cursor: pointer;
+      padding: 4px 16px;
+      font-size: 12px;
+      line-height: 22px;
+      color: var(--ogrid-fg, #242424);
+      white-space: nowrap;
+      position: relative;
+    }
+    .ogrid-sheet-tabs__tab--active {
+      font-weight: 600;
+      border-bottom-color: var(--ogrid-primary, #217346);
+      background: var(--ogrid-bg, #fff);
+    }
+  `],
+    template: `
+    <div class="ogrid-sheet-tabs" role="tablist" aria-label="Sheet tabs">
+      @if (showAddButton()) {
+        <button
+          type="button"
+          class="ogrid-sheet-tabs__add-btn"
+          (click)="sheetAdd.emit()"
+          title="Add sheet"
+          aria-label="Add sheet"
+        >+</button>
+      }
+      @for (sheet of sheets(); track sheet.id) {
+        @let isActive = sheet.id === activeSheet();
+        <button
+          type="button"
+          role="tab"
+          class="ogrid-sheet-tabs__tab"
+          [class.ogrid-sheet-tabs__tab--active]="isActive"
+          [attr.aria-selected]="isActive"
+          [style.border-bottom-color]="isActive && sheet.color ? sheet.color : null"
+          (click)="sheetChange.emit(sheet.id)"
+        >{{ sheet.name }}</button>
+      }
+    </div>
+  `
+  })
+], SheetTabsComponent);
 
 // src/styles/ogrid-theme-vars.ts
 var OGRID_THEME_VARS_CSS = `
@@ -2750,6 +3338,9 @@ var OGridLayoutComponent = class {
     this.hasPagination = false;
     this.sideBar = null;
     this.fullScreen = false;
+    this.showNameBox = false;
+    this.activeCellRef = null;
+    this.formulaBar = null;
     this.isFullScreen = false;
     this.borderRadius = GRID_BORDER_RADIUS;
     this.escListener = null;
@@ -2797,13 +3388,34 @@ __decorateClass([
 __decorateClass([
   Input()
 ], OGridLayoutComponent.prototype, "fullScreen", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "showNameBox", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "activeCellRef", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "formulaBar", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "sheetDefs", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "activeSheet", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "onSheetChange", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "onSheetAdd", 2);
 OGridLayoutComponent = __decorateClass([
   Component({
     selector: "ogrid-layout",
     standalone: true,
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [SideBarComponent],
+    imports: [SideBarComponent, FormulaBarComponent, SheetTabsComponent],
     styles: [OGRID_THEME_VARS_CSS, `
     :host { display: block; height: 100%; }
     .ogrid-layout-root { display: flex; flex-direction: column; height: 100%; }
@@ -2846,18 +3458,28 @@ OGridLayoutComponent = __decorateClass([
       color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-fullscreen-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-name-box {
+      display: inline-flex; align-items: center; padding: 0 8px;
+      font-family: 'Consolas', 'Courier New', monospace; font-size: 12px;
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 3px;
+      height: 24px; margin-right: 8px; background: var(--ogrid-bg, #fff);
+      min-width: 40px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+    }
   `],
     template: `
     <div [class]="rootClass">
       <div class="ogrid-layout-container" [style.border-radius.px]="isFullScreen ? 0 : borderRadius">
         <!-- Toolbar strip -->
-        @if (hasToolbar || fullScreen) {
+        @if (hasToolbar || fullScreen || showNameBox) {
           <div
             class="ogrid-layout-toolbar"
             [class.ogrid-layout-toolbar--has-below]="hasToolbarBelow"
             [class.ogrid-layout-toolbar--no-below]="!hasToolbarBelow"
           >
             <div class="ogrid-layout-toolbar-left">
+              @if (showNameBox) {
+                <div class="ogrid-name-box">{{ activeCellRef ?? '\u2014' }}</div>
+              }
               <ng-content select="[toolbar]"></ng-content>
             </div>
             <div class="ogrid-layout-toolbar-right">
@@ -2895,6 +3517,19 @@ OGridLayoutComponent = __decorateClass([
           </div>
         }
 
+        <!-- Formula bar (between toolbar and grid) -->
+        @if (formulaBar) {
+          <ogrid-formula-bar
+            [cellRef]="formulaBar.cellRef"
+            [formulaText]="formulaBar.formulaText"
+            [isEditing]="formulaBar.isEditing"
+            (inputChange)="formulaBar.onInputChange($event)"
+            (commit)="formulaBar.onCommit()"
+            (cancel)="formulaBar.onCancel()"
+            (startEditing)="formulaBar.startEditing()"
+          />
+        }
+
         <!-- Grid area -->
         <div class="ogrid-layout-grid-area">
           @if (sideBar && sideBar.position === 'left') {
@@ -2908,6 +3543,17 @@ OGridLayoutComponent = __decorateClass([
           }
         </div>
 
+        <!-- Sheet tabs (between grid and footer) -->
+        @if (sheetDefs && sheetDefs.length > 0 && activeSheet) {
+          <ogrid-sheet-tabs
+            [sheets]="sheetDefs"
+            [activeSheet]="activeSheet"
+            [showAddButton]="!!onSheetAdd"
+            (sheetChange)="onSheetChange?.($event)"
+            (sheetAdd)="onSheetAdd?.()"
+          />
+        }
+
         <!-- Footer strip (pagination) -->
         @if (hasPagination) {
           <div class="ogrid-layout-footer">
@@ -3271,6 +3917,94 @@ MarchingAntsOverlayComponent = __decorateClass([
   `
   })
 ], MarchingAntsOverlayComponent);
+function measureRef(container, ref, colOffset) {
+  const startCol = ref.col + colOffset;
+  const endCol = (ref.endCol ?? ref.col) + colOffset;
+  const endRow = ref.endRow ?? ref.row;
+  const tl = container.querySelector(
+    `[data-row-index="${ref.row}"][data-col-index="${startCol}"]`
+  );
+  const br = container.querySelector(
+    `[data-row-index="${endRow}"][data-col-index="${endCol}"]`
+  );
+  if (!tl || !br) return null;
+  const cRect = container.getBoundingClientRect();
+  const tlRect = tl.getBoundingClientRect();
+  const brRect = br.getBoundingClientRect();
+  return {
+    top: Math.round(tlRect.top - cRect.top),
+    left: Math.round(tlRect.left - cRect.left),
+    width: Math.round(brRect.right - tlRect.left),
+    height: Math.round(brRect.bottom - tlRect.top),
+    color: FORMULA_REF_COLORS[ref.colorIndex % FORMULA_REF_COLORS.length]
+  };
+}
+var FormulaRefOverlayComponent = class {
+  constructor() {
+    /** The positioned container that wraps the table. */
+    this.containerEl = input(null);
+    /** References to highlight. */
+    this.references = input([]);
+    /** Column offset (1 when checkbox/row-number columns are present). */
+    this.colOffset = input(0);
+    this.rects = signal([]);
+    this.rafId = 0;
+    effect(() => {
+      const refs = this.references();
+      const container = this.containerEl();
+      const colOff = this.colOffset();
+      cancelAnimationFrame(this.rafId);
+      if (!container || refs.length === 0) {
+        this.rects.set([]);
+        return;
+      }
+      this.rafId = requestAnimationFrame(() => {
+        const measured = [];
+        for (const ref of refs) {
+          const r = measureRef(container, ref, colOff);
+          if (r) measured.push(r);
+        }
+        this.rects.set(measured);
+      });
+    });
+  }
+  max0(v) {
+    return Math.max(0, v);
+  }
+};
+FormulaRefOverlayComponent = __decorateClass([
+  Component({
+    selector: "ogrid-formula-ref-overlay",
+    standalone: true,
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+    @for (r of rects(); track $index) {
+      <svg
+        [style.position]="'absolute'"
+        [style.top.px]="r.top"
+        [style.left.px]="r.left"
+        [style.width.px]="r.width"
+        [style.height.px]="r.height"
+        [style.pointerEvents]="'none'"
+        [style.zIndex]="3"
+        [style.overflow]="'visible'"
+        aria-hidden="true"
+      >
+        <rect
+          x="1" y="1"
+          [attr.width]="max0(r.width - 2)"
+          [attr.height]="max0(r.height - 2)"
+          fill="none"
+          [attr.stroke]="r.color"
+          stroke-width="2"
+          style="shape-rendering: crispEdges"
+        />
+      </svg>
+    }
+  `
+  })
+], FormulaRefOverlayComponent);
 var EmptyStateComponent = class {
   constructor() {
     this.message = void 0;
@@ -3787,8 +4521,8 @@ var BaseDataGridTableComponent = class {
       return "";
     }
   }
-  resolveCellStyleFn(col, item) {
-    return resolveCellStyle(col, item);
+  resolveCellStyleFn(col, item, displayValue) {
+    return resolveCellStyle(col, item, displayValue);
   }
   buildPopoverEditorProps(item, col, descriptor) {
     return buildPopoverEditorProps(item, col, descriptor, this.pendingEditorValue(), {
@@ -4495,7 +5229,11 @@ var BaseInlineCellEditorComponent = class {
   }
   syncFromInputs() {
     const v = this.value;
-    this.localValue.set(v != null ? String(v) : "");
+    let strVal = v != null ? String(v) : "";
+    if (this.editorType === "date" && strVal.match(/^\d{4}-\d{2}-\d{2}/)) {
+      strVal = strVal.substring(0, 10);
+    }
+    this.localValue.set(strVal);
     const col = this.column;
     if (col?.cellEditorParams?.values) {
       const vals = col.cellEditorParams.values;
@@ -4522,7 +5260,12 @@ var BaseInlineCellEditorComponent = class {
       const el = this.inputEl?.nativeElement;
       if (el) {
         el.focus();
-        if (el instanceof HTMLInputElement && el.type === "text") {
+        if (el instanceof HTMLInputElement && el.type === "date") {
+          try {
+            el.showPicker();
+          } catch {
+          }
+        } else if (el instanceof HTMLInputElement && el.type === "text") {
           el.select();
         }
       }
@@ -4644,6 +5387,7 @@ var BaseInlineCellEditorComponent = class {
     dropdown.style.maxHeight = `${maxH}px`;
     dropdown.style.zIndex = "9999";
     dropdown.style.right = "auto";
+    dropdown.style.textAlign = "left";
     if (flipUp) {
       dropdown.style.top = "auto";
       dropdown.style.bottom = `${window.innerHeight - rect.top}px`;
@@ -4700,6 +5444,88 @@ __decorateClass([
 __decorateClass([
   ViewChild("richSelectDropdown")
 ], BaseInlineCellEditorComponent.prototype, "richSelectDropdown", 2);
+var BaseColumnHeaderMenuComponent = class {
+  constructor() {
+    // Signal-backed inputs so computed() tracks changes reactively
+    this._canPinLeft = signal(true);
+    this._canPinRight = signal(true);
+    this._canUnpin = signal(false);
+    this._currentSort = signal(null);
+    this._isSortable = signal(true);
+    this._isResizable = signal(true);
+    this.handlers = {};
+    this.menuItems = computed(
+      () => getColumnHeaderMenuItems({
+        canPinLeft: this._canPinLeft(),
+        canPinRight: this._canPinRight(),
+        canUnpin: this._canUnpin(),
+        currentSort: this._currentSort(),
+        isSortable: this._isSortable(),
+        isResizable: this._isResizable()
+      })
+    );
+  }
+  set canPinLeft(v) {
+    this._canPinLeft.set(v);
+  }
+  set canPinRight(v) {
+    this._canPinRight.set(v);
+  }
+  set canUnpin(v) {
+    this._canUnpin.set(v);
+  }
+  set currentSort(v) {
+    this._currentSort.set(v);
+  }
+  set isSortable(v) {
+    this._isSortable.set(v);
+  }
+  set isResizable(v) {
+    this._isResizable.set(v);
+  }
+  handleMenuItemClick(itemId) {
+    const h = this.handlers;
+    const actionMap = {
+      pinLeft: h.onPinLeft,
+      pinRight: h.onPinRight,
+      unpin: h.onUnpin,
+      sortAsc: h.onSortAsc,
+      sortDesc: h.onSortDesc,
+      clearSort: h.onClearSort,
+      autosizeThis: h.onAutosizeThis,
+      autosizeAll: h.onAutosizeAll
+    };
+    const action = actionMap[itemId];
+    if (action) {
+      action();
+      h.onClose?.();
+    }
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], BaseColumnHeaderMenuComponent.prototype, "columnId", 2);
+__decorateClass([
+  Input()
+], BaseColumnHeaderMenuComponent.prototype, "canPinLeft", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderMenuComponent.prototype, "canPinRight", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderMenuComponent.prototype, "canUnpin", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderMenuComponent.prototype, "currentSort", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderMenuComponent.prototype, "isSortable", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderMenuComponent.prototype, "isResizable", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderMenuComponent.prototype, "handlers", 2);
 
 // src/components/inline-cell-editor-template.ts
 var INLINE_CELL_EDITOR_TEMPLATE = `
@@ -4728,7 +5554,7 @@ var INLINE_CELL_EDITOR_TEMPLATE = `
             style="width:100%;padding:0;border:none;background:transparent;color:inherit;font:inherit;font-size:13px;outline:none;min-width:0"
           />
           <div #richSelectDropdown role="listbox"
-               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2)">
+               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left">
             @for (opt of filteredOptions(); track opt; let i = $index) {
               <div role="option"
                    [attr.aria-selected]="i === highlightedIndex()"
@@ -4752,7 +5578,7 @@ var INLINE_CELL_EDITOR_TEMPLATE = `
             <span style="margin-left:4px;font-size:10px;opacity:0.5">&#9662;</span>
           </div>
           <div #selectDropdown role="listbox"
-               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2)">
+               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left">
             @for (opt of selectOptions(); track opt; let i = $index) {
               <div role="option"
                    [attr.aria-selected]="i === highlightedIndex()"
@@ -4892,4 +5718,4 @@ __decorateClass([
   ViewChild("editorContainer")
 ], BasePopoverCellEditorComponent.prototype, "editorContainerRef", 2);
 
-export { BaseColumnChooserComponent, BaseColumnHeaderFilterComponent, BaseDataGridTableComponent, BaseInlineCellEditorComponent, BaseOGridComponent, BasePaginationControlsComponent, BasePopoverCellEditorComponent, ColumnReorderService, DataGridEditingHelper, DataGridInteractionHelper, DataGridLayoutHelper, DataGridStateService, EmptyStateComponent, GridContextMenuComponent, INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, MarchingAntsOverlayComponent, OGRID_THEME_VARS_CSS, OGridLayoutComponent, OGridService, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, SideBarComponent, StatusBarComponent, VirtualScrollService, createDebouncedCallback, createDebouncedSignal, createLatestCallback };
+export { BaseColumnChooserComponent, BaseColumnHeaderFilterComponent, BaseColumnHeaderMenuComponent, BaseDataGridTableComponent, BaseInlineCellEditorComponent, BaseOGridComponent, BasePaginationControlsComponent, BasePopoverCellEditorComponent, ColumnReorderService, DataGridEditingHelper, DataGridInteractionHelper, DataGridLayoutHelper, DataGridStateService, EmptyStateComponent, FormulaBarComponent, FormulaEngineService, FormulaRefOverlayComponent, GridContextMenuComponent, INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, MarchingAntsOverlayComponent, OGRID_THEME_VARS_CSS, OGridLayoutComponent, OGridService, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, SheetTabsComponent, SideBarComponent, StatusBarComponent, VirtualScrollService, createDebouncedCallback, createDebouncedSignal, createLatestCallback };