@alaarab/ogrid-angular 2.3.0 → 2.4.1

package/dist/esm/index.js

@@ -1,7 +1,7 @@
-import { FormulaEngine, getCellValue, flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, processClientSideDataAsync, validateRowIds, computeNextSortState, mergeFilter, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, parseValue, UndoRedoStack, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, 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, 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, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_WIDTH, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, ROW_NUMBER_COLUMN_MIN_WIDTH, measureColumnContentWidth, getPaginationViewModel, getColumnHeaderMenuItems, 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';
+export { CELL_PADDING, CHECKBOX_COLUMN_WIDTH, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, GRID_BORDER_RADIUS, PEOPLE_SEARCH_DEBOUNCE_MS, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_MIN_WIDTH, 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, 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;
@@ -199,21 +199,9 @@ var FormulaEngineService = class {
     return this.engine?.getAuditTrail(col, row) ?? null;
   }
   // --- Private helpers ---
-  /**
-   * Create a data accessor that bridges grid data to formula coordinates.
-   */
+  /** Create a data accessor that bridges grid data to formula coordinates. */
   createAccessor() {
-    const items = this.items;
-    const cols = this.flatColumns;
-    return {
-      getCellValue: (col, row) => {
-        if (row < 0 || row >= items.length) return null;
-        if (col < 0 || col >= cols.length) return null;
-        return getCellValue(items[row], cols[col]);
-      },
-      getRowCount: () => items.length,
-      getColumnCount: () => cols.length
-    };
+    return createGridDataAccessor(this.items, this.flatColumns);
   }
 };
 FormulaEngineService = __decorateClass([
@@ -291,14 +279,35 @@ var OGridService = class {
     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);
-    /** Stable callback passed to DataGridTable to update activeCellRef. */
+    /** 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);
@@ -460,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);
@@ -499,10 +554,10 @@ var OGridService = class {
       rowSelection: this.rowSelection(),
       selectedRows: this.effectiveSelectedRows(),
       onSelectionChange: this.handleSelectionChangeFn,
-      showRowNumbers: this.showRowNumbers() || this.cellReferences(),
-      showColumnLetters: !!this.cellReferences(),
-      showNameBox: !!this.cellReferences(),
-      onActiveCellChange: this.cellReferences() ? this.handleActiveCellChange : void 0,
+      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(),
@@ -527,6 +582,8 @@ var OGridService = class {
         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,
@@ -694,11 +751,19 @@ var OGridService = class {
       }
     });
     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: this.onFormulaRecalc(),
+        onFormulaRecalc: (result) => {
+          this.formulaVersion.update((v) => v + 1);
+          userRecalcCb?.(result);
+        },
         namedRanges: this.namedRanges(),
         sheets: this.sheets()
       });
@@ -786,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);
@@ -847,6 +939,10 @@ var OGridService = class {
     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);
@@ -1443,6 +1539,7 @@ var DataGridInteractionHelper = class {
         }
         break;
       case "ArrowDown": {
+        if (editingCell != null) break;
         e.preventDefault();
         const newRow = ctrl ? findCtrlTarget(rowIndex, maxRowIndex, 1, (r) => isEmptyAt(r, Math.max(0, dataColIndex))) : Math.min(rowIndex + 1, maxRowIndex);
         if (shift) {
@@ -1459,6 +1556,7 @@ var DataGridInteractionHelper = class {
         break;
       }
       case "ArrowUp": {
+        if (editingCell != null) break;
         e.preventDefault();
         const newRowUp = ctrl ? findCtrlTarget(rowIndex, 0, -1, (r) => isEmptyAt(r, Math.max(0, dataColIndex))) : Math.max(rowIndex - 1, 0);
         if (shift) {
@@ -1475,6 +1573,7 @@ var DataGridInteractionHelper = class {
         break;
       }
       case "ArrowRight": {
+        if (editingCell != null) break;
         e.preventDefault();
         let newCol;
         if (ctrl && dataColIndex >= 0) {
@@ -1497,6 +1596,7 @@ var DataGridInteractionHelper = class {
         break;
       }
       case "ArrowLeft": {
+        if (editingCell != null) break;
         e.preventDefault();
         let newColLeft;
         if (ctrl && dataColIndex >= 0) {
@@ -2277,7 +2377,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(),
@@ -2924,6 +3027,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 = `
@@ -3042,6 +3344,7 @@ var OGridLayoutComponent = class {
     this.fullScreen = false;
     this.showNameBox = false;
     this.activeCellRef = null;
+    this.formulaBar = null;
     this.isFullScreen = false;
     this.borderRadius = GRID_BORDER_RADIUS;
     this.escListener = null;
@@ -3095,13 +3398,28 @@ __decorateClass([
 __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%; }
@@ -3203,6 +3521,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') {
@@ -3216,6 +3547,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">
@@ -3579,6 +3921,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;
@@ -3881,7 +4311,7 @@ var BaseDataGridTableComponent = class {
       const rightOffsets = {};
       let leftAcc = 0;
       if (this.hasCheckboxCol()) leftAcc += CHECKBOX_COLUMN_WIDTH;
-      if (this.hasRowNumbersCol()) leftAcc += ROW_NUMBER_COLUMN_WIDTH;
+      if (this.hasRowNumbersCol()) leftAcc += this.getRowNumberWidth();
       let rightAcc = 0;
       const len = layouts.length;
       for (let i = 0; i < len; i++) {
@@ -3954,6 +4384,12 @@ var BaseDataGridTableComponent = class {
   getGlobalColIndex(col) {
     return this.globalColIndexMap().get(col.columnId) ?? 0;
   }
+  /** Returns the effective row number column width (from overrides or default). */
+  getRowNumberWidth() {
+    const overrides = this.columnSizingOverrides();
+    const override = overrides[ROW_NUMBER_COLUMN_ID];
+    return override ? override.widthPx : ROW_NUMBER_COLUMN_WIDTH;
+  }
   /**
    * Initialize base wiring effects. Must be called from subclass constructor.
    *
@@ -4207,8 +4643,9 @@ var BaseDataGridTableComponent = class {
     this.state().interaction.setSelectionRange?.(null);
     this.getWrapperRef()?.nativeElement.focus({ preventScroll: true });
     const startX = event.clientX;
-    const startWidth = this.getColumnWidth(col);
-    const minWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+    const columnId = col.columnId;
+    const startWidth = columnId === ROW_NUMBER_COLUMN_ID ? this.getRowNumberWidth() : this.getColumnWidth(col);
+    const minWidth = columnId === ROW_NUMBER_COLUMN_ID ? ROW_NUMBER_COLUMN_MIN_WIDTH : col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
     const onMove = (e) => {
       const delta = e.clientX - startX;
       const newWidth = Math.max(minWidth, startWidth + delta);
@@ -4803,7 +5240,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;
@@ -5014,6 +5455,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 = `
@@ -5206,4 +5729,4 @@ __decorateClass([
   ViewChild("editorContainer")
 ], BasePopoverCellEditorComponent.prototype, "editorContainerRef", 2);
 
-export { BaseColumnChooserComponent, BaseColumnHeaderFilterComponent, BaseDataGridTableComponent, BaseInlineCellEditorComponent, BaseOGridComponent, BasePaginationControlsComponent, BasePopoverCellEditorComponent, ColumnReorderService, DataGridEditingHelper, DataGridInteractionHelper, DataGridLayoutHelper, DataGridStateService, EmptyStateComponent, FormulaEngineService, 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 };

package/dist/types/components/base-column-header-menu.component.d.ts

@@ -0,0 +1,30 @@
+import { type IColumnHeaderMenuItem, type ColumnHeaderMenuHandlers } from '@alaarab/ogrid-core';
+/**
+ * Abstract base class containing all shared TypeScript logic for ColumnHeaderMenu components.
+ * Framework-specific UI packages extend this with their templates and style overrides.
+ *
+ * Uses signal-backed @Input setters so that computed() tracks input changes reactively
+ * (plain @Input properties are not reactive in Angular signals).
+ *
+ * Subclasses must:
+ * 1. Provide a @Component decorator with template and styles
+ * 2. Implement their own menu open/close mechanism (mat-menu, p-menu, or native dropdown)
+ */
+export declare abstract class BaseColumnHeaderMenuComponent {
+    columnId: string;
+    private readonly _canPinLeft;
+    private readonly _canPinRight;
+    private readonly _canUnpin;
+    private readonly _currentSort;
+    private readonly _isSortable;
+    private readonly _isResizable;
+    set canPinLeft(v: boolean);
+    set canPinRight(v: boolean);
+    set canUnpin(v: boolean);
+    set currentSort(v: 'asc' | 'desc' | null);
+    set isSortable(v: boolean);
+    set isResizable(v: boolean);
+    handlers: Partial<ColumnHeaderMenuHandlers>;
+    readonly menuItems: import("@angular/core").Signal<IColumnHeaderMenuItem[]>;
+    handleMenuItemClick(itemId: string): void;
+}

package/dist/types/components/base-datagrid-table.component.d.ts

@@ -126,6 +126,9 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
         editable?: boolean;
         onCellValueChanged?: ((event: import("@alaarab/ogrid-core").ICellValueChangedEvent<T>) => void) | undefined;
         isDragging: boolean;
+        getFormulaValue?: (col: number, row: number) => unknown;
+        hasFormula?: (col: number, row: number) => boolean;
+        formulaVersion?: number;
     }>;
     readonly pinnedColumnsMap: import("@angular/core").Signal<Record<string, "left" | "right">>;
     readonly vsEnabled: import("@angular/core").Signal<boolean>;
@@ -174,6 +177,8 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
         minWidth: number;
         width: number;
     }[]>;
+    /** Returns the effective row number column width (from overrides or default). */
+    getRowNumberWidth(): number;
     readonly pinningOffsets: import("@angular/core").Signal<{
         leftOffsets: Record<string, number>;
         rightOffsets: Record<string, number>;

package/dist/types/components/formula-bar.component.d.ts

@@ -0,0 +1,29 @@
+/**
+ * FormulaBarComponent -- Standalone Angular formula bar component.
+ *
+ * Layout: [Name Box] [fx] [Formula Input]
+ *
+ * Uses --ogrid-* CSS variables for theming.
+ * Port of React's FormulaBar component.
+ */
+export declare class FormulaBarComponent {
+    /** Active cell reference (e.g. "A1"). */
+    readonly cellRef: import("@angular/core").InputSignal<string | null>;
+    /** Text displayed/edited in the formula input. */
+    readonly formulaText: import("@angular/core").InputSignal<string>;
+    /** Whether the input is in editing mode. */
+    readonly isEditing: import("@angular/core").InputSignal<boolean>;
+    /** Called when the user changes the input text. */
+    readonly inputChange: import("@angular/core").OutputEmitterRef<string>;
+    /** Commit the formula bar value. */
+    readonly commit: import("@angular/core").OutputEmitterRef<void>;
+    /** Cancel editing. */
+    readonly cancel: import("@angular/core").OutputEmitterRef<void>;
+    /** Start editing the formula bar. */
+    readonly startEditing: import("@angular/core").OutputEmitterRef<void>;
+    private readonly inputEl;
+    constructor();
+    onInput(event: Event): void;
+    onKeyDown(event: KeyboardEvent): void;
+    onClick(): void;
+}

package/dist/types/components/formula-ref-overlay.component.d.ts

@@ -0,0 +1,27 @@
+/**
+ * FormulaRefOverlayComponent -- Renders colored border overlays on cells
+ * referenced by the active formula, like Excel's reference highlighting.
+ *
+ * Port of React's FormulaRefOverlay component.
+ */
+import { type FormulaReference } from '@alaarab/ogrid-core';
+interface RefRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    color: string;
+}
+export declare class FormulaRefOverlayComponent {
+    /** The positioned container that wraps the table. */
+    readonly containerEl: import("@angular/core").InputSignal<HTMLElement | null>;
+    /** References to highlight. */
+    readonly references: import("@angular/core").InputSignal<FormulaReference[]>;
+    /** Column offset (1 when checkbox/row-number columns are present). */
+    readonly colOffset: import("@angular/core").InputSignal<number>;
+    readonly rects: import("@angular/core").WritableSignal<RefRect[]>;
+    private rafId;
+    constructor();
+    max0(v: number): number;
+}
+export {};

package/dist/types/components/ogrid-layout.component.d.ts

@@ -1,4 +1,6 @@
 import type { SideBarProps } from './sidebar.component';
+import type { OGridFormulaBarState } from '../services/ogrid.service';
+import type { ISheetDef } from '@alaarab/ogrid-core';
 export declare class OGridLayoutComponent {
     className?: string;
     hasToolbar: boolean;
@@ -8,6 +10,11 @@ export declare class OGridLayoutComponent {
     fullScreen: boolean;
     showNameBox: boolean;
     activeCellRef: string | null;
+    formulaBar: OGridFormulaBarState | null;
+    sheetDefs: ISheetDef[] | undefined;
+    activeSheet: string | undefined;
+    onSheetChange: ((sheetId: string) => void) | undefined;
+    onSheetAdd: (() => void) | undefined;
     isFullScreen: boolean;
     readonly borderRadius = 6;
     private escListener;

package/dist/types/components/sheet-tabs.component.d.ts

@@ -0,0 +1,16 @@
+/**
+ * SheetTabsComponent -- Excel-style sheet tab bar at the bottom of the grid.
+ *
+ * Layout: [+] [Sheet1] [Sheet2] [Sheet3]
+ *
+ * Uses --ogrid-* CSS variables for theming.
+ * Port of React's SheetTabs component.
+ */
+import type { ISheetDef } from '@alaarab/ogrid-core';
+export declare class SheetTabsComponent {
+    readonly sheets: import("@angular/core").InputSignal<ISheetDef[]>;
+    readonly activeSheet: import("@angular/core").InputSignal<string>;
+    readonly showAddButton: import("@angular/core").InputSignal<boolean>;
+    readonly sheetChange: import("@angular/core").OutputEmitterRef<string>;
+    readonly sheetAdd: import("@angular/core").OutputEmitterRef<void>;
+}

package/dist/types/index.d.ts

@@ -1,11 +1,11 @@
 export * from '@alaarab/ogrid-core';
-export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, PEOPLE_SEARCH_DEBOUNCE_MS, DEFAULT_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, Z_INDEX, } from '@alaarab/ogrid-core';
+export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_MIN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, PEOPLE_SEARCH_DEBOUNCE_MS, DEFAULT_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, Z_INDEX, } from '@alaarab/ogrid-core';
 export type { IColumnDef, IColumnGroupDef, IColumnDefinition, ICellEditorProps, } from './types';
 export type { IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, } from './types';
 export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, ICellValueChangedEvent, CellEditorParams, IValueParserParams, IDateFilterValue, HeaderCell, HeaderRow, RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, } from './types';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
 export { OGridService } from './services/ogrid.service';
-export type { ColumnChooserPlacement, OGridPagination, OGridColumnChooser, OGridFilters, OGridSideBarState, } from './services/ogrid.service';
+export type { ColumnChooserPlacement, OGridPagination, OGridColumnChooser, OGridFilters, OGridSideBarState, OGridFormulaBarState, } from './services/ogrid.service';
 export { DataGridStateService } from './services/datagrid-state.service';
 export type { DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, DataGridStateResult, } from './services/datagrid-state.service';
 export { DataGridLayoutHelper } from './services/datagrid-layout.service';
@@ -21,6 +21,9 @@ export { GridContextMenuComponent } from './components/grid-context-menu.compone
 export { SideBarComponent } from './components/sidebar.component';
 export type { SideBarProps, SideBarFilterColumn } from './components/sidebar.component';
 export { MarchingAntsOverlayComponent } from './components/marching-ants-overlay.component';
+export { FormulaBarComponent } from './components/formula-bar.component';
+export { SheetTabsComponent } from './components/sheet-tabs.component';
+export { FormulaRefOverlayComponent } from './components/formula-ref-overlay.component';
 export { EmptyStateComponent } from './components/empty-state.component';
 export { BaseOGridComponent } from './components/base-ogrid.component';
 export { BaseDataGridTableComponent } from './components/base-datagrid-table.component';
@@ -30,6 +33,7 @@ export { BaseColumnChooserComponent } from './components/base-column-chooser.com
 export type { IColumnChooserProps } from './components/base-column-chooser.component';
 export { BasePaginationControlsComponent } from './components/base-pagination-controls.component';
 export { BaseInlineCellEditorComponent } from './components/base-inline-cell-editor.component';
+export { BaseColumnHeaderMenuComponent } from './components/base-column-header-menu.component';
 export { INLINE_CELL_EDITOR_TEMPLATE, INLINE_CELL_EDITOR_STYLES } from './components/inline-cell-editor-template';
 export { BasePopoverCellEditorComponent, POPOVER_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES } from './components/base-popover-cell-editor.component';
 export { OGRID_THEME_VARS_CSS } from './styles/ogrid-theme-vars';

package/dist/types/services/datagrid-state.service.d.ts

@@ -119,6 +119,9 @@ export interface DataGridViewModelState<T> {
         editable?: boolean;
         onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
         isDragging: boolean;
+        getFormulaValue?: (col: number, row: number) => unknown;
+        hasFormula?: (col: number, row: number) => boolean;
+        formulaVersion?: number;
     };
     statusBarConfig: IStatusBarProps | null;
     showEmptyInGrid: boolean;

package/dist/types/services/formula-engine.service.d.ts

@@ -126,8 +126,6 @@ export declare class FormulaEngineService<T = unknown> {
      * Get full audit trail for a cell.
      */
     getAuditTrail(col: number, row: number): IAuditTrail | null;
-    /**
-     * Create a data accessor that bridges grid data to formula coordinates.
-     */
+    /** Create a data accessor that bridges grid data to formula coordinates. */
     private createAccessor;
 }

package/dist/types/services/ogrid.service.d.ts

@@ -1,3 +1,4 @@
+import type { FormulaReference } from '@alaarab/ogrid-core';
 import type { RowId, IOGridApi, IFilters, FilterValue, IRowSelectionChangeEvent, IStatusBarProps, IColumnDefinition, IDataSource, ISideBarDef, IVirtualScrollConfig, SideBarPanelId, IFormulaFunction, IRecalcResult, IGridDataAccessor } from '../types';
 import type { IOGridProps, IOGridDataGridProps } from '../types';
 import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from '../types';
@@ -26,6 +27,17 @@ export interface OGridFilters {
     hasActiveFilters: boolean;
     setFilters: (f: IFilters) => void;
 }
+/** Formula bar state and handlers. */
+export interface OGridFormulaBarState {
+    cellRef: string | null;
+    formulaText: string;
+    isEditing: boolean;
+    onInputChange: (text: string) => void;
+    onCommit: () => void;
+    onCancel: () => void;
+    startEditing: () => void;
+    referencedCells: FormulaReference[];
+}
 /** Side bar state. */
 export interface OGridSideBarState {
     isEnabled: boolean;
@@ -121,11 +133,24 @@ export declare class OGridService<T> {
     readonly formulaFunctions: import("@angular/core").WritableSignal<Record<string, IFormulaFunction> | undefined>;
     readonly namedRanges: import("@angular/core").WritableSignal<Record<string, string> | undefined>;
     readonly sheets: import("@angular/core").WritableSignal<Record<string, IGridDataAccessor> | undefined>;
+    readonly sheetDefs: import("@angular/core").WritableSignal<import("@alaarab/ogrid-core").ISheetDef[] | undefined>;
+    readonly activeSheet: import("@angular/core").WritableSignal<string | undefined>;
+    readonly onSheetChange: import("@angular/core").WritableSignal<((sheetId: string) => void) | undefined>;
+    readonly onSheetAdd: import("@angular/core").WritableSignal<(() => void) | undefined>;
     /** Active cell reference string (e.g. 'A1') updated by DataGridTable when cellReferences is enabled. */
     readonly activeCellRef: import("@angular/core").WritableSignal<string | null>;
-    /** Stable callback passed to DataGridTable to update activeCellRef. */
+    /** Active cell coordinates (0-based col/row). */
+    readonly activeCellCoords: import("@angular/core").WritableSignal<{
+        col: number;
+        row: number;
+    } | null>;
+    /** Stable callback passed to DataGridTable to update activeCellRef + coords. */
     private readonly handleActiveCellChange;
+    private readonly formulaBarEditing;
+    private readonly formulaBarEditText;
     private readonly formulaService;
+    /** Monotonic counter incremented on formula recalculation — drives cache invalidation. */
+    readonly formulaVersion: import("@angular/core").WritableSignal<number>;
     private readonly getFormulaValueFn;
     private readonly hasFormulaFn;
     private readonly getFormulaFn;
@@ -204,6 +229,18 @@ export declare class OGridService<T> {
         filterType: "text" | "multiSelect" | "people" | "date";
     }[]>;
     readonly sideBarState: import("@angular/core").Signal<OGridSideBarState>;
+    /** Display text derived from active cell (formula string or raw value). */
+    private readonly formulaBarDisplayText;
+    /** Formula text shown in the bar: edit text when editing, display text otherwise. */
+    readonly formulaBarText: import("@angular/core").Signal<string>;
+    /** References extracted from the current formula text (for highlighting). */
+    readonly formulaBarReferences: import("@angular/core").Signal<FormulaReference[]>;
+    private readonly formulaBarOnInputChangeFn;
+    private readonly formulaBarOnCommitFn;
+    private readonly formulaBarOnCancelFn;
+    private readonly formulaBarStartEditingFn;
+    /** Aggregate formula bar state for template consumption. */
+    readonly formulaBarState: import("@angular/core").Signal<OGridFormulaBarState>;
     private readonly handleSortFn;
     private readonly handleColumnResizedFn;
     private readonly handleColumnPinnedFn;
@@ -233,6 +270,9 @@ export declare class OGridService<T> {
     handleSelectionChange(event: IRowSelectionChangeEvent<T>): void;
     handleColumnResized(columnId: string, width: number): void;
     handleColumnPinned(columnId: string, pinned: 'left' | 'right' | null): void;
+    private startFormulaBarEditing;
+    private commitFormulaBar;
+    private cancelFormulaBar;
     configure(props: IOGridProps<T>): void;
     /**
      * Pin a column to the left or right edge.

package/dist/types/types/dataGridTypes.d.ts

@@ -1,8 +1,8 @@
 import type { TemplateRef } from '@angular/core';
 import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from './columnTypes';
-export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IOGridApi, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, } from '@alaarab/ogrid-core';
+export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IOGridApi, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, ISheetDef, FormulaReference, } from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-core';
-import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef, IVirtualScrollConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail } from '@alaarab/ogrid-core';
+import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef, IVirtualScrollConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, ISheetDef, FormulaReference } from '@alaarab/ogrid-core';
 /** Base props shared by both client-side and server-side OGrid modes. */
 interface IOGridBaseProps<T> {
     columns: (IColumnDef<T> | IColumnGroupDef<T>)[];
@@ -90,6 +90,14 @@ interface IOGridBaseProps<T> {
     namedRanges?: Record<string, string>;
     /** Sheet accessors for cross-sheet formula references (e.g. { Sheet2: accessor }). */
     sheets?: Record<string, IGridDataAccessor>;
+    /** Sheet definitions for the tab bar at grid bottom. */
+    sheetDefs?: ISheetDef[];
+    /** Active sheet ID (controlled). */
+    activeSheet?: string;
+    /** Called when user clicks a sheet tab. */
+    onSheetChange?: (sheetId: string) => void;
+    /** Called when user clicks the "+" add sheet button. */
+    onSheetAdd?: () => void;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }
@@ -186,4 +194,8 @@ export interface IOGridDataGridProps<T> {
     getDependents?: (col: number, row: number) => IAuditEntry[];
     /** Get full audit trail for a cell. */
     getAuditTrail?: (col: number, row: number) => IAuditTrail | null;
+    /** Monotonic counter incremented on each formula recalculation — used for cache invalidation. */
+    formulaVersion?: number;
+    /** Cell references to highlight (from active formula in formula bar). */
+    formulaReferences?: FormulaReference[];
 }

package/dist/types/types/index.d.ts

@@ -1,3 +1,3 @@
 export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, IDateFilterValue, HeaderCell, HeaderRow, } from './columnTypes';
-export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, } from './dataGridTypes';
+export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, ISheetDef, FormulaReference, } from './dataGridTypes';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.3.0"
+    "@alaarab/ogrid-core": "2.4.1"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",