@alaarab/ogrid-angular 2.0.23 → 2.1.1

package/dist/esm/services/ogrid.service.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Injectable, signal, computed, effect, DestroyRef, inject } from '@angular/core';
-import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, computeNextSortState, } from '@alaarab/ogrid-core';
+import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, computeNextSortState, validateColumns, validateRowIds, } from '@alaarab/ogrid-core';
 const DEFAULT_PAGE_SIZE = 25;
 const EMPTY_LOADING_OPTIONS = {};
 const DEFAULT_PANELS = ['columns', 'filters'];
@@ -86,9 +86,10 @@ let OGridService = class OGridService {
         this.serverItems = signal([]);
         this.serverTotalCount = signal(0);
         this.serverLoading = signal(true);
-        this.fetchId = 0;
+        this.fetchAbortController = null;
+        this.filterAbortController = null;
         this.refreshCounter = signal(0);
-        this.firstDataRendered = false;
+        this.firstDataRendered = signal(false);
         // Side bar state
         this.sideBarActivePanel = signal(null);
         // Filter options state
@@ -109,10 +110,12 @@ let OGridService = class OGridService {
         });
         this.filters = computed(() => this.controlledFilters() ?? this.internalFilters());
         this.visibleColumns = computed(() => {
-            if (this.controlledVisibleColumns())
-                return this.controlledVisibleColumns();
-            if (this.internalVisibleColumnsOverride())
-                return this.internalVisibleColumnsOverride();
+            const controlled = this.controlledVisibleColumns();
+            if (controlled)
+                return controlled;
+            const override = this.internalVisibleColumnsOverride();
+            if (override)
+                return override;
             const cols = this.columns();
             if (cols.length === 0)
                 return new Set();
@@ -196,8 +199,8 @@ let OGridService = class OGridService {
             .map((c) => ({
             columnId: c.columnId,
             name: c.name,
-            filterField: c.filterable.filterField ?? c.columnId,
-            filterType: c.filterable.type,
+            filterField: c.filterable?.filterField ?? c.columnId,
+            filterType: c.filterable?.type,
         })));
         this.sideBarState = computed(() => ({
             isEnabled: this.sideBarEnabled(),
@@ -217,6 +220,9 @@ let OGridService = class OGridService {
         this.handleSelectionChangeFn = (event) => this.handleSelectionChange(event);
         this.handleFilterChangeFn = (key, value) => this.handleFilterChange(key, value);
         this.clearAllFiltersFn = () => this.setFilters({});
+        this.setPageFn = (p) => this.setPage(p);
+        this.setPageSizeFn = (size) => this.setPageSize(size);
+        this.handleVisibilityChangeFn = (columnKey, isVisible) => this.handleVisibilityChange(columnKey, isVisible);
         // --- Data grid props computed ---
         this.dataGridProps = computed(() => ({
             items: this.displayItems(),
@@ -270,15 +276,15 @@ let OGridService = class OGridService {
             page: this.page(),
             pageSize: this.pageSize(),
             displayTotalCount: this.displayTotalCount(),
-            setPage: (p) => this.setPage(p),
-            setPageSize: (size) => this.setPageSize(size),
+            setPage: this.setPageFn,
+            setPageSize: this.setPageSizeFn,
             pageSizeOptions: this.pageSizeOptions(),
             entityLabelPlural: this.entityLabelPlural(),
         }));
         this.columnChooser = computed(() => ({
             columns: this.columnChooserColumns(),
             visibleColumns: this.visibleColumns(),
-            onVisibilityChange: (columnKey, isVisible) => this.handleVisibilityChange(columnKey, isVisible),
+            onVisibilityChange: this.handleVisibilityChangeFn,
             placement: this.columnChooserPlacement(),
         }));
         this.filtersResult = computed(() => ({
@@ -304,8 +310,17 @@ let OGridService = class OGridService {
                 filterOptions: this.clientFilterOptions(),
             };
         });
-        // Server-side data fetching effect
+        // Validate columns once (on first non-empty columns signal)
+        let columnsValidated = false;
         effect(() => {
+            const cols = this.columns();
+            if (!columnsValidated && cols.length > 0) {
+                columnsValidated = true;
+                validateColumns(cols);
+            }
+        });
+        // Server-side data fetching effect
+        effect((onCleanup) => {
             const ds = this.dataSource();
             if (!this.isServerSide() || !ds) {
                 if (!this.isServerSide())
@@ -318,36 +333,46 @@ let OGridService = class OGridService {
             const filters = this.filters();
             // Read refreshCounter to trigger re-fetches
             this.refreshCounter();
-            const id = ++this.fetchId;
+            const controller = new AbortController();
+            this.fetchAbortController = controller;
             this.serverLoading.set(true);
             ds.fetchPage({ page, pageSize, sort: { field: sort.field, direction: sort.direction }, filters })
                 .then((res) => {
-                if (id !== this.fetchId)
+                if (controller.signal.aborted)
                     return;
                 this.serverItems.set(res.items);
                 this.serverTotalCount.set(res.totalCount);
             })
                 .catch((err) => {
-                if (id !== this.fetchId)
+                if (controller.signal.aborted)
                     return;
                 this.onError()?.(err);
                 this.serverItems.set([]);
                 this.serverTotalCount.set(0);
             })
                 .finally(() => {
-                if (id === this.fetchId)
+                if (!controller.signal.aborted)
                     this.serverLoading.set(false);
             });
+            onCleanup(() => {
+                controller.abort();
+            });
         });
-        // Fire onFirstDataRendered once
+        // Fire onFirstDataRendered once; also validate row IDs on first data
+        let rowIdsValidated = false;
         effect(() => {
-            if (!this.firstDataRendered && this.displayItems().length > 0) {
-                this.firstDataRendered = true;
+            const items = this.displayItems();
+            if (!this.firstDataRendered() && items.length > 0) {
+                this.firstDataRendered.set(true);
                 this.onFirstDataRendered()?.();
             }
+            if (!rowIdsValidated && items.length > 0) {
+                rowIdsValidated = true;
+                validateRowIds(items, this.getRowId());
+            }
         });
         // Load server filter options
-        effect(() => {
+        effect((onCleanup) => {
             const ds = this.dataSource();
             const fields = this.multiSelectFilterFields();
             const fetcher = ds && 'fetchFilterOptions' in ds && typeof ds.fetchFilterOptions === 'function'
@@ -358,6 +383,8 @@ let OGridService = class OGridService {
                 this.loadingFilterOptions.set({});
                 return;
             }
+            const controller = new AbortController();
+            this.filterAbortController = controller;
             const loading = {};
             fields.forEach((f) => { loading[f] = true; });
             this.loadingFilterOptions.set(loading);
@@ -370,9 +397,14 @@ let OGridService = class OGridService {
                     results[field] = [];
                 }
             })).then(() => {
+                if (controller.signal.aborted)
+                    return;
                 this.serverFilterOptions.set(results);
                 this.loadingFilterOptions.set({});
             });
+            onCleanup(() => {
+                controller.abort();
+            });
         });
         // Initialize sidebar default panel
         effect(() => {
@@ -381,8 +413,12 @@ let OGridService = class OGridService {
                 this.sideBarActivePanel.set(parsed.defaultPanel);
             }
         });
-        // Cleanup on destroy — reset callback signals to prevent closure retention
+        // Cleanup on destroy — abort in-flight requests and reset callback signals
         this.destroyRef.onDestroy(() => {
+            this.fetchAbortController?.abort();
+            this.filterAbortController?.abort();
+            this.fetchAbortController = null;
+            this.filterAbortController = null;
             this.onPageChange.set(undefined);
             this.onPageSizeChange.set(undefined);
             this.onSortChange.set(undefined);
@@ -576,8 +612,7 @@ let OGridService = class OGridService {
      */
     unpinColumn(columnId) {
         this.pinnedOverrides.update((prev) => {
-            const next = { ...prev };
-            delete next[columnId];
+            const { [columnId]: _, ...next } = prev;
             return next;
         });
         this.onColumnPinned()?.(columnId, null);
@@ -641,8 +676,8 @@ let OGridService = class OGridService {
                     this.setVisibleColumns(new Set(state.visibleColumns));
                 if (state.sort)
                     this.setSort(state.sort);
-                if (state.columnOrder && this.onColumnOrderChange())
-                    this.onColumnOrderChange()(state.columnOrder);
+                if (state.columnOrder)
+                    this.onColumnOrderChange()?.(state.columnOrder);
                 if (state.columnWidths)
                     this.columnWidthOverrides.set(state.columnWidths);
                 if (state.filters)

package/dist/esm/utils/index.js

@@ -5,4 +5,4 @@ export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayConte
 // Debounce utilities
 export { createDebouncedSignal, createDebouncedCallback, debounce, } from './debounce';
 // Latest ref utilities
-export { createLatestRef, createLatestCallback, } from './latestRef';
+export { createLatestCallback, } from './latestRef';

package/dist/esm/utils/latestRef.js

@@ -39,8 +39,3 @@ export function createLatestCallback(fn) {
         return fn()(...args);
     });
 }
-/**
- * Alias for createLatestCallback for consistency with React/Vue naming.
- * @deprecated Use createLatestCallback instead
- */
-export const createLatestRef = createLatestCallback;

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

@@ -86,5 +86,7 @@ export declare abstract class BaseColumnHeaderFilterComponent {
     handleClearUser(): void;
     handleDateApply(): void;
     handleDateClear(): void;
+    /** Clean up debounce timer on destroy. */
+    ngOnDestroy(): void;
     onDocumentClick(event: MouseEvent, selectorName: string): void;
 }

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

@@ -20,7 +20,7 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     protected lastMouseShift: boolean;
     readonly columnSizingVersion: import("@angular/core").WritableSignal<number>;
     /** Dirty flag — set when column layout changes, cleared after measurement. */
-    private measureDirty;
+    private readonly measureDirty;
     /** DOM-measured column widths from the last layout pass.
      *  Used as a minWidth floor to prevent columns from shrinking
      *  when new data loads (e.g. server-side pagination). */
@@ -41,8 +41,14 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
      *  Only updates the signal when values actually change, to avoid render loops. */
     private measureColumnWidths;
     readonly state: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridStateResult<T>>;
+    protected readonly layoutState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridLayoutState<T>>;
+    protected readonly rowSelectionState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridRowSelectionState>;
+    protected readonly editingState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridEditingState<T>>;
+    protected readonly interactionState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridCellInteractionState>;
+    protected readonly contextMenuState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridContextMenuState>;
+    protected readonly viewModelsState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridViewModelState<T>>;
+    protected readonly pinningState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridPinningState>;
     readonly tableContainerEl: import("@angular/core").Signal<HTMLElement | null>;
-    readonly allItems: import("@angular/core").Signal<T[]>;
     readonly items: import("@angular/core").Signal<T[]>;
     readonly getRowId: import("@angular/core").Signal<(item: T) => RowId>;
     readonly isLoading: import("@angular/core").Signal<boolean>;
@@ -55,7 +61,7 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
         onClearAll: () => void;
         hasActiveFilters: boolean;
         message?: string;
-        render?: import("@angular/core").TemplateRef<unknown>;
+        render?: unknown;
     } | undefined>;
     readonly currentPage: import("@angular/core").Signal<number>;
     readonly pageSize: import("@angular/core").Signal<number>;
@@ -144,8 +150,18 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
         rightOffsets: Record<string, number>;
     }>;
     /**
-     * Initialize base wiring effects. Must be called from subclass constructor
-     * (effects need to run inside an injection context).
+     * Initialize base wiring effects. Must be called from subclass constructor.
+     *
+     * **Timing:** Angular requires `effect()` to be created inside an injection
+     * context (constructor or field initializer). On the first run, signals like
+     * `wrapperElSignal()` return `null` because the DOM hasn't been created yet.
+     * After `ngAfterViewInit` sets these signals, Angular's signal graph
+     * automatically re-runs each effect. The null guards inside each effect body
+     * ensure the first (null) run is a safe no-op.
+     *
+     * Sequence:
+     *   1. Constructor → `initBase()` → effects created, first run (signals null → no-ops)
+     *   2. `ngAfterViewInit` → `wrapperElSignal.set(el)` → effects re-run with real values
      */
     protected initBase(): void;
     /** Lookup effective min-width for a column (includes measured width floor) */

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

@@ -0,0 +1,10 @@
+import { OGridService } from '../services/ogrid.service';
+import type { IOGridProps } from '../types';
+export declare abstract class BaseOGridComponent<T> {
+    private readonly propsSignal;
+    readonly ogridService: OGridService<T>;
+    set props(value: IOGridProps<T>);
+    constructor();
+    get showToolbar(): boolean;
+    onPageSizeChange(size: number): void;
+}

package/dist/types/components/grid-context-menu.component.d.ts

@@ -14,13 +14,13 @@ export declare class GridContextMenuComponent {
         contextMenuItemShortcut?: string;
         contextMenuDivider?: string;
     } | undefined;
-    copy: EventEmitter<void>;
-    cut: EventEmitter<void>;
-    paste: EventEmitter<void>;
-    selectAll: EventEmitter<void>;
+    copyAction: EventEmitter<void>;
+    cutAction: EventEmitter<void>;
+    pasteAction: EventEmitter<void>;
+    selectAllAction: EventEmitter<void>;
     undoAction: EventEmitter<void>;
     redoAction: EventEmitter<void>;
-    close: EventEmitter<void>;
+    closeAction: EventEmitter<void>;
     menuRef?: ElementRef<HTMLDivElement>;
     readonly menuItems: import("@alaarab/ogrid-core").GridContextMenuItem[];
     readonly formatShortcutFn: typeof formatShortcut;

package/dist/types/components/sidebar.component.d.ts

@@ -23,8 +23,6 @@ export interface SideBarProps {
 export declare class SideBarComponent {
     sideBarProps: SideBarProps | null;
     readonly panelLabels: Record<SideBarPanelId, string>;
-    readonly tabWidth = 36;
-    readonly panelWidth = 240;
     onTabClick(panel: SideBarPanelId): void;
     allVisible(): boolean;
     onSelectAll(): void;

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

@@ -1,4 +1,5 @@
-export declare class StatusBarComponent {
+import { OnChanges } from '@angular/core';
+export declare class StatusBarComponent implements OnChanges {
     totalCount: number;
     filteredCount: number | undefined;
     selectedCount: number | undefined;
@@ -17,5 +18,7 @@ export declare class StatusBarComponent {
         statusBarLabel?: string;
         statusBarValue?: string;
     } | undefined;
+    private cachedParts;
+    ngOnChanges(): void;
     getParts(): import("@alaarab/ogrid-core").StatusBarPart[];
 }

package/dist/types/index.d.ts

@@ -8,6 +8,9 @@ export { OGridService } from './services/ogrid.service';
 export type { ColumnChooserPlacement, OGridPagination, OGridColumnChooser, OGridFilters, OGridSideBarState, } 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';
+export { DataGridEditingHelper } from './services/datagrid-editing.service';
+export { DataGridInteractionHelper } from './services/datagrid-interaction.service';
 export { ColumnReorderService } from './services/column-reorder.service';
 export { VirtualScrollService } from './services/virtual-scroll.service';
 export { OGridLayoutComponent } from './components/ogrid-layout.component';
@@ -17,6 +20,7 @@ export { SideBarComponent } from './components/sidebar.component';
 export type { SideBarProps, SideBarFilterColumn } from './components/sidebar.component';
 export { MarchingAntsOverlayComponent } from './components/marching-ants-overlay.component';
 export { EmptyStateComponent } from './components/empty-state.component';
+export { BaseOGridComponent } from './components/base-ogrid.component';
 export { BaseDataGridTableComponent } from './components/base-datagrid-table.component';
 export { BaseColumnHeaderFilterComponent } from './components/base-column-header-filter.component';
 export type { IColumnHeaderFilterProps } from './components/base-column-header-filter.component';
@@ -28,4 +32,4 @@ export { INLINE_CELL_EDITOR_TEMPLATE, INLINE_CELL_EDITOR_STYLES } from './compon
 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';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, } from './utils';
-export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestCallback, } from './utils';

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

@@ -0,0 +1,31 @@
+import type { RowId, IActiveCell, ICellValueChangedEvent } from '../types';
+import type { IColumnDef as IAngularColumnDef } from '../types';
+type IColumnDef<T> = IAngularColumnDef<T>;
+/**
+ * Manages cell editing state, inline/popover editor, and commit/cancel logic.
+ * Extracted from DataGridStateService for modularity.
+ *
+ * Not @Injectable — instantiated and owned by DataGridStateService.
+ */
+export declare class DataGridEditingHelper<T> {
+    readonly editingCellSig: import("@angular/core").WritableSignal<{
+        rowId: RowId;
+        columnId: string;
+    } | null>;
+    readonly pendingEditorValueSig: import("@angular/core").WritableSignal<unknown>;
+    readonly popoverAnchorElSig: import("@angular/core").WritableSignal<HTMLElement | null>;
+    /** Injected dependencies */
+    private getVisibleCols;
+    private getItems;
+    private getWrappedOnCellValueChanged;
+    private setActiveCellFn;
+    constructor(getVisibleCols: () => IColumnDef<T>[], getItems: () => T[], getWrappedOnCellValueChanged: () => ((event: ICellValueChangedEvent<T>) => void) | undefined, setActiveCellFn: (cell: IActiveCell | null) => void);
+    setEditingCell(cell: {
+        rowId: RowId;
+        columnId: string;
+    } | null): void;
+    setPendingEditorValue(value: unknown): void;
+    commitCellEdit(item: T, columnId: string, oldValue: unknown, newValue: unknown, rowIndex: number, globalColIndex: number): void;
+    cancelPopoverEdit(): void;
+}
+export {};

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

@@ -0,0 +1,86 @@
+import { UndoRedoStack } from '@alaarab/ogrid-core';
+import type { RowId, IActiveCell, ISelectionRange, ICellValueChangedEvent } from '../types';
+import type { IColumnDef as IAngularColumnDef } from '../types';
+type IColumnDef<T> = IAngularColumnDef<T>;
+/**
+ * Manages cell selection, keyboard navigation, clipboard, fill handle, and undo/redo.
+ * Extracted from DataGridStateService for modularity.
+ *
+ * Not @Injectable — instantiated and owned by DataGridStateService.
+ */
+export declare class DataGridInteractionHelper<T> {
+    readonly activeCellSig: import("@angular/core").WritableSignal<IActiveCell | null>;
+    readonly selectionRangeSig: import("@angular/core").WritableSignal<ISelectionRange | null>;
+    readonly isDraggingSig: import("@angular/core").WritableSignal<boolean>;
+    readonly contextMenuPositionSig: import("@angular/core").WritableSignal<{
+        x: number;
+        y: number;
+    } | null>;
+    readonly cutRangeSig: import("@angular/core").WritableSignal<ISelectionRange | null>;
+    readonly copyRangeSig: import("@angular/core").WritableSignal<ISelectionRange | null>;
+    private internalClipboard;
+    readonly undoRedoStack: UndoRedoStack<ICellValueChangedEvent<T>>;
+    readonly undoLengthSig: import("@angular/core").WritableSignal<number>;
+    readonly redoLengthSig: import("@angular/core").WritableSignal<number>;
+    readonly canUndo: import("@angular/core").Signal<boolean>;
+    readonly canRedo: import("@angular/core").Signal<boolean>;
+    readonly hasCellSelection: import("@angular/core").Signal<boolean>;
+    fillDragStart: {
+        startRow: number;
+        startCol: number;
+    } | null;
+    fillRafId: number;
+    fillMoveHandler: ((e: MouseEvent) => void) | null;
+    fillUpHandler: (() => void) | null;
+    dragStartPos: {
+        row: number;
+        col: number;
+    } | null;
+    dragMoved: boolean;
+    isDraggingRef: boolean;
+    liveDragRange: ISelectionRange | null;
+    rafId: number;
+    lastMousePos: {
+        cx: number;
+        cy: number;
+    } | null;
+    autoScrollInterval: ReturnType<typeof setInterval> | null;
+    setActiveCell(cell: IActiveCell | null): void;
+    setSelectionRange(range: ISelectionRange | null): void;
+    setContextMenuPosition(pos: {
+        x: number;
+        y: number;
+    } | null): void;
+    handleCellContextMenu(e: {
+        clientX: number;
+        clientY: number;
+        preventDefault?: () => void;
+    }): void;
+    closeContextMenu(): void;
+    handleCopy(items: T[], visibleCols: IColumnDef<T>[], colOffset: number): void;
+    handleCut(items: T[], visibleCols: IColumnDef<T>[], colOffset: number, editable: boolean | undefined, wrappedOnCellValueChanged: ((event: ICellValueChangedEvent<T>) => void) | undefined): void;
+    handlePaste(items: T[], visibleCols: IColumnDef<T>[], colOffset: number, editable: boolean | undefined, wrappedOnCellValueChanged: ((event: ICellValueChangedEvent<T>) => void) | undefined): Promise<void>;
+    clearClipboardRanges(): void;
+    beginBatch(): void;
+    endBatch(): void;
+    undo(originalOnCellValueChanged: ((event: ICellValueChangedEvent<T>) => void) | undefined): void;
+    redo(originalOnCellValueChanged: ((event: ICellValueChangedEvent<T>) => void) | undefined): void;
+    handleCellMouseDown(e: MouseEvent, rowIndex: number, globalColIndex: number, colOffset: number, wrapperEl: HTMLElement | null): void;
+    handleSelectAllCells(rowCount: number, visibleColCount: number, colOffset: number): void;
+    handleFillHandleMouseDown(e: MouseEvent): void;
+    handleGridKeyDown(e: KeyboardEvent, items: T[], getRowId: (item: T) => RowId, visibleCols: IColumnDef<T>[], colOffset: number, hasCheckboxCol: boolean, visibleColumnCount: number, editable: boolean | undefined, wrappedOnCellValueChanged: ((event: ICellValueChangedEvent<T>) => void) | undefined, originalOnCellValueChanged: ((event: ICellValueChangedEvent<T>) => void) | undefined, rowSelection: string, selectedRowIds: Set<RowId>, wrapperEl: HTMLElement | null, handleRowCheckboxChange: (rowId: RowId, checked: boolean, rowIndex: number, shiftKey: boolean) => void, editingCell: {
+        rowId: RowId;
+        columnId: string;
+    } | null, setEditingCell: (cell: {
+        rowId: RowId;
+        columnId: string;
+    } | null) => void): void;
+    onWindowMouseMove(e: MouseEvent, colOffset: number, wrapperEl: HTMLElement | null): void;
+    onWindowMouseUp(colOffset: number, wrapperEl: HTMLElement | null): void;
+    resolveRangeFromMouse(cx: number, cy: number, colOffset: number): ISelectionRange | null;
+    applyDragAttrs(range: ISelectionRange, colOff: number, wrapper: HTMLElement | null): void;
+    clearDragAttrs(wrapper: HTMLElement | null): void;
+    getEffectiveRange(colOffset: number): ISelectionRange | null;
+    destroy(): void;
+}
+export {};

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

@@ -0,0 +1,36 @@
+import { signal, computed, NgZone } from '@angular/core';
+import type { RowId } from '../types';
+import type { IColumnDef as IAngularColumnDef } from '../types';
+import type { IOGridDataGridProps } from '../types';
+type IColumnDef<T> = IAngularColumnDef<T>;
+/**
+ * Manages column layout, visibility, sizing, and container measurement.
+ * Extracted from DataGridStateService for modularity.
+ *
+ * Not @Injectable — instantiated and owned by DataGridStateService.
+ */
+export declare class DataGridLayoutHelper<T> {
+    readonly props: ReturnType<typeof signal<IOGridDataGridProps<T> | null>>;
+    readonly wrapperEl: ReturnType<typeof signal<HTMLElement | null>>;
+    readonly containerWidthSig: import("@angular/core").WritableSignal<number>;
+    readonly columnSizingOverridesSig: import("@angular/core").WritableSignal<Record<string, {
+        widthPx: number;
+    }>>;
+    private resizeObserver;
+    private readonly initialColumnWidthsSig;
+    readonly flatColumnsRaw: ReturnType<typeof computed<IColumnDef<T>[]>>;
+    readonly flatColumns: ReturnType<typeof computed<IColumnDef<T>[]>>;
+    readonly visibleCols: ReturnType<typeof computed<IColumnDef<T>[]>>;
+    readonly visibleColumnCount: ReturnType<typeof computed<number>>;
+    readonly hasCheckboxCol: ReturnType<typeof computed<boolean>>;
+    readonly hasRowNumbersCol: ReturnType<typeof computed<boolean>>;
+    readonly specialColsCount: ReturnType<typeof computed<number>>;
+    readonly totalColCount: ReturnType<typeof computed<number>>;
+    readonly colOffset: ReturnType<typeof computed<number>>;
+    readonly rowIndexByRowId: ReturnType<typeof computed<Map<RowId, number>>>;
+    readonly minTableWidth: ReturnType<typeof computed<number>>;
+    readonly desiredTableWidth: ReturnType<typeof computed<number>>;
+    constructor(props: ReturnType<typeof signal<IOGridDataGridProps<T> | null>>, wrapperEl: ReturnType<typeof signal<HTMLElement | null>>, ngZone: NgZone);
+    destroy(): void;
+}
+export {};

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

@@ -1,6 +1,9 @@
 import type { RowId, IActiveCell, ISelectionRange, IStatusBarProps, IFilters, FilterValue, UserLike, ICellValueChangedEvent } from '../types';
 import type { IColumnDef as IAngularColumnDef } from '../types';
 import type { IOGridDataGridProps } from '../types';
+import { DataGridLayoutHelper } from './datagrid-layout.service';
+import { DataGridEditingHelper } from './datagrid-editing.service';
+import { DataGridInteractionHelper } from './datagrid-interaction.service';
 type IColumnDef<T> = IAngularColumnDef<T>;
 export interface DataGridLayoutState<T> {
     flatColumns: IColumnDef<T>[];
@@ -50,14 +53,17 @@ export interface DataGridEditingState<T> {
 }
 export interface DataGridCellInteractionState {
     activeCell: IActiveCell | null;
-    setActiveCell: (cell: IActiveCell | null) => void;
+    /** Set active cell. Undefined when cell selection is disabled. */
+    setActiveCell?: (cell: IActiveCell | null) => void;
     selectionRange: ISelectionRange | null;
-    setSelectionRange: (range: ISelectionRange | null) => void;
+    /** Set selection range. Undefined when cell selection is disabled. */
+    setSelectionRange?: (range: ISelectionRange | null) => void;
     handleCellMouseDown: (e: MouseEvent, rowIndex: number, globalColIndex: number) => void;
     handleSelectAllCells: () => void;
     hasCellSelection: boolean;
     handleGridKeyDown: (e: KeyboardEvent) => void;
-    handleFillHandleMouseDown: (e: MouseEvent) => void;
+    /** Handle fill handle mouse down. Undefined when cell selection is disabled. */
+    handleFillHandleMouseDown?: (e: MouseEvent) => void;
     handleCopy: () => void;
     handleCut: () => void;
     handlePaste: () => Promise<void>;
@@ -75,7 +81,8 @@ export interface DataGridContextMenuState {
         x: number;
         y: number;
     } | null;
-    setMenuPosition: (pos: {
+    /** Set menu position. Undefined when cell selection is disabled. */
+    setMenuPosition?: (pos: {
         x: number;
         y: number;
     } | null) => void;
@@ -157,46 +164,24 @@ export declare class DataGridStateService<T> {
     private ngZone;
     readonly props: import("@angular/core").WritableSignal<IOGridDataGridProps<T> | null>;
     readonly wrapperEl: import("@angular/core").WritableSignal<HTMLElement | null>;
-    private readonly editingCellSig;
-    private readonly pendingEditorValueSig;
-    private readonly activeCellSig;
-    private readonly selectionRangeSig;
-    private readonly isDraggingSig;
-    private readonly contextMenuPositionSig;
+    /** Layout helper: column layout, visibility, sizing, container measurement. */
+    readonly layoutHelper: DataGridLayoutHelper<T>;
+    /** Editing helper: cell editing state, commit/cancel logic. */
+    readonly editingHelper: DataGridEditingHelper<T>;
+    /** Interaction helper: cell selection, keyboard nav, clipboard, fill handle, undo/redo. */
+    readonly interactionHelper: DataGridInteractionHelper<T>;
     private readonly internalSelectedRows;
-    private readonly popoverAnchorElSig;
-    private readonly containerWidthSig;
-    private readonly columnSizingOverridesSig;
-    private readonly cutRangeSig;
-    private readonly copyRangeSig;
-    private internalClipboard;
-    private readonly undoRedoStack;
-    private readonly undoLengthSig;
-    private readonly redoLengthSig;
-    private fillDragStart;
-    private fillRafId;
-    private fillMoveHandler;
-    private fillUpHandler;
     private lastClickedRow;
-    private dragStartPos;
-    private dragMoved;
-    private isDraggingRef;
-    private liveDragRange;
-    private rafId;
-    private lastMousePos;
-    private autoScrollInterval;
-    private resizeObserver;
     private readonly headerMenuIsOpenSig;
     private readonly headerMenuOpenForColumnSig;
     private readonly headerMenuAnchorElementSig;
     private readonly propsResolved;
     readonly cellSelection: import("@angular/core").Signal<boolean>;
     private readonly originalOnCellValueChanged;
-    private readonly initialColumnWidthsSig;
     private readonly wrappedOnCellValueChanged;
-    readonly flatColumnsRaw: import("@angular/core").Signal<IColumnDef<T>[]>;
-    readonly flatColumns: import("@angular/core").Signal<IColumnDef<T>[]>;
-    readonly visibleCols: import("@angular/core").Signal<IColumnDef<T>[]>;
+    readonly flatColumnsRaw: import("@angular/core").Signal<IAngularColumnDef<T>[]>;
+    readonly flatColumns: import("@angular/core").Signal<IAngularColumnDef<T>[]>;
+    readonly visibleCols: import("@angular/core").Signal<IAngularColumnDef<T>[]>;
     readonly visibleColumnCount: import("@angular/core").Signal<number>;
     readonly hasCheckboxCol: import("@angular/core").Signal<boolean>;
     readonly hasRowNumbersCol: import("@angular/core").Signal<boolean>;
@@ -271,12 +256,8 @@ export declare class DataGridStateService<T> {
     headerMenuPinRight(): void;
     headerMenuUnpin(): void;
     getState(): DataGridStateResult<T>;
-    private getEffectiveRange;
     private onWindowMouseMove;
     private onWindowMouseUp;
-    private resolveRangeFromMouse;
-    private applyDragAttrs;
-    private clearDragAttrs;
     private setupFillHandleDrag;
 }
 export {};