gp-grid-core 0.1.5 → 0.2.0

package/dist/index.d.ts

@@ -1,10 +1,12 @@
-//#region src/types.d.ts
+//#region src/types/basic.d.ts
 /** Cell data type primitive types */
 type CellDataType = "text" | "number" | "boolean" | "date" | "dateString" | "dateTime" | "dateTimeString" | "object";
 /** Cell value type */
 type CellValue = string | number | boolean | Date | object | null;
 /** Row type */
 type Row = unknown;
+/** Row ID type for transaction operations */
+type RowId = string | number;
 /** Sort direction type */
 type SortDirection = "asc" | "desc";
 /** Sort model type */
@@ -12,24 +14,12 @@ type SortModel = {
   colId: string;
   direction: SortDirection;
 };
-/** Filter model type */
-type FilterModel = Record<string, string>;
-interface ColumnDefinition {
-  field: string;
-  colId?: string;
-  cellDataType: CellDataType;
-  width: number;
-  headerName?: string;
-  editable?: boolean;
-  /** Renderer key for adapter lookup, or inline renderer function */
-  cellRenderer?: string;
-  editRenderer?: string;
-  headerRenderer?: string;
-}
+/** Cell position */
 interface CellPosition {
   row: number;
   col: number;
 }
+/** Cell range */
 interface CellRange {
   startRow: number;
   startCol: number;
@@ -78,6 +68,78 @@ interface SlotState {
   /** Translate Y position of the slot, we use translateY to optimize the rendering of the slots (Relies on the GP) */
   translateY: number;
 }
+//#endregion
+//#region src/types/columns.d.ts
+/** Column definition */
+interface ColumnDefinition {
+  field: string;
+  colId?: string;
+  cellDataType: CellDataType;
+  width: number;
+  headerName?: string;
+  editable?: boolean;
+  /** Whether column is sortable. Default: true when sortingEnabled */
+  sortable?: boolean;
+  /** Whether column is filterable. Default: true */
+  filterable?: boolean;
+  /** Renderer key for adapter lookup, or inline renderer function */
+  cellRenderer?: string;
+  editRenderer?: string;
+  headerRenderer?: string;
+}
+//#endregion
+//#region src/types/filters.d.ts
+/** Text filter operators */
+type TextFilterOperator = "contains" | "notContains" | "equals" | "notEquals" | "startsWith" | "endsWith" | "blank" | "notBlank";
+/** Number filter operators (symbols for display) */
+type NumberFilterOperator = "=" | "!=" | ">" | "<" | ">=" | "<=" | "between" | "blank" | "notBlank";
+/** Date filter operators */
+type DateFilterOperator = "=" | "!=" | ">" | "<" | "between" | "blank" | "notBlank";
+/** Filter combination mode */
+type FilterCombination = "and" | "or";
+/** Text filter condition */
+interface TextFilterCondition {
+  type: "text";
+  operator: TextFilterOperator;
+  value?: string;
+  /** Selected distinct values for checkbox-style filtering */
+  selectedValues?: Set<string>;
+  /** Include blank values */
+  includeBlank?: boolean;
+  /** Operator connecting this condition to the next. Defaults to ColumnFilterModel.combination */
+  nextOperator?: FilterCombination;
+}
+/** Number filter condition */
+interface NumberFilterCondition {
+  type: "number";
+  operator: NumberFilterOperator;
+  value?: number;
+  /** Second value for "between" operator */
+  valueTo?: number;
+  /** Operator connecting this condition to the next. Defaults to ColumnFilterModel.combination */
+  nextOperator?: FilterCombination;
+}
+/** Date filter condition */
+interface DateFilterCondition {
+  type: "date";
+  operator: DateFilterOperator;
+  value?: Date | string;
+  /** Second value for "between" operator */
+  valueTo?: Date | string;
+  /** Operator connecting this condition to the next. Defaults to ColumnFilterModel.combination */
+  nextOperator?: FilterCombination;
+}
+/** Union of filter condition types */
+type FilterCondition = TextFilterCondition | NumberFilterCondition | DateFilterCondition;
+/** Column filter model with multiple conditions */
+interface ColumnFilterModel {
+  conditions: FilterCondition[];
+  combination: FilterCombination;
+}
+/** Filter model type - maps column ID to filter */
+type FilterModel = Record<string, ColumnFilterModel>;
+//#endregion
+//#region src/types/data-source.d.ts
 /** Data source request */
 interface DataSourceRequest {
   /** Pagination */
@@ -99,10 +161,13 @@ interface DataSourceResponse<TData = Row> {
   /** Total rows */
   totalRows: number;
 }
+/** Data source interface */
 interface DataSource<TData = Row> {
   fetch(request: DataSourceRequest): Promise<DataSourceResponse<TData>>;
 }
-/** Slot lifecycle instructions */
+//#endregion
+//#region src/types/instructions.d.ts
+/** Create slot instruction */
 interface CreateSlotInstruction {
   type: "CREATE_SLOT";
   slotId: string;
@@ -125,7 +190,7 @@ interface MoveSlotInstruction {
   slotId: string;
   translateY: number;
 }
-/** Selection instructions */
+/** Set active cell instruction */
 interface SetActiveCellInstruction {
   type: "SET_ACTIVE_CELL";
   position: CellPosition | null;
@@ -135,7 +200,13 @@ interface SetSelectionRangeInstruction {
   type: "SET_SELECTION_RANGE";
   range: CellRange | null;
 }
-/** Edit instructions */
+/** Update visible range instruction - emitted when selection moves outside visible viewport */
+interface UpdateVisibleRangeInstruction {
+  type: "UPDATE_VISIBLE_RANGE";
+  start: number;
+  end: number;
+}
+/** Start edit instruction */
 interface StartEditInstruction {
   type: "START_EDIT";
   row: number;
@@ -153,7 +224,7 @@ interface CommitEditInstruction {
   col: number;
   value: CellValue;
 }
-/** Layout instructions */
+/** Set content size instruction */
 interface SetContentSizeInstruction {
   type: "SET_CONTENT_SIZE";
   width: number;
@@ -166,8 +237,32 @@ interface UpdateHeaderInstruction {
   column: ColumnDefinition;
   sortDirection?: SortDirection;
   sortIndex?: number;
+  /** Whether column is sortable */
+  sortable: boolean;
+  /** Whether column is filterable */
+  filterable: boolean;
+  /** Whether column has an active filter */
+  hasFilter: boolean;
+}
+/** Open filter popup instruction */
+interface OpenFilterPopupInstruction {
+  type: "OPEN_FILTER_POPUP";
+  colIndex: number;
+  column: ColumnDefinition;
+  anchorRect: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  };
+  distinctValues: CellValue[];
+  currentFilter?: ColumnFilterModel;
+}
+/** Close filter popup instruction */
+interface CloseFilterPopupInstruction {
+  type: "CLOSE_FILTER_POPUP";
 }
-/** Fill handle instructions */
+/** Start fill instruction */
 interface StartFillInstruction {
   type: "START_FILL";
   sourceRange: CellRange;
@@ -205,27 +300,46 @@ interface DataErrorInstruction {
   type: "DATA_ERROR";
   error: string;
 }
+/** Rows added instruction */
+interface RowsAddedInstruction {
+  type: "ROWS_ADDED";
+  count: number;
+  totalRows: number;
+}
+/** Rows removed instruction */
+interface RowsRemovedInstruction {
+  type: "ROWS_REMOVED";
+  count: number;
+  totalRows: number;
+}
+/** Rows updated instruction */
+interface RowsUpdatedInstruction {
+  type: "ROWS_UPDATED";
+  count: number;
+}
+/** Transaction processed instruction */
+interface TransactionProcessedInstruction {
+  type: "TRANSACTION_PROCESSED";
+  added: number;
+  removed: number;
+  updated: number;
+}
 /** Union type of all instructions */
 type GridInstruction = /** Slot lifecycle */
 CreateSlotInstruction | DestroySlotInstruction | AssignSlotInstruction | MoveSlotInstruction
-/** Selection */ | SetActiveCellInstruction | SetSelectionRangeInstruction
+/** Selection */ | SetActiveCellInstruction | SetSelectionRangeInstruction | UpdateVisibleRangeInstruction
 /** Editing */ | StartEditInstruction | StopEditInstruction | CommitEditInstruction
 /** Layout */ | SetContentSizeInstruction | UpdateHeaderInstruction
+/** Filter popup */ | OpenFilterPopupInstruction | CloseFilterPopupInstruction
 /** Fill handle */ | StartFillInstruction | UpdateFillInstruction | CommitFillInstruction | CancelFillInstruction
-/** Data */ | DataLoadingInstruction | DataLoadedInstruction | DataErrorInstruction;
-/** Grid core options */
-interface GridCoreOptions<TData = Row> {
-  /** Column definitions */
-  columns: ColumnDefinition[];
-  /** Data source */
-  dataSource: DataSource<TData>;
-  /** Row height */
-  rowHeight: number;
-  /** Header height: Default to row height */
-  headerHeight?: number;
-  /** Overscan: How many rows to render outside the viewport */
-  overscan?: number;
-}
+/** Data */ | DataLoadingInstruction | DataLoadedInstruction | DataErrorInstruction
+/** Transactions */ | RowsAddedInstruction | RowsRemovedInstruction | RowsUpdatedInstruction | TransactionProcessedInstruction;
+/** Instruction listener: Single instruction Listener that receives a single instruction, used by frameworks to update their state */
+type InstructionListener = (instruction: GridInstruction) => void;
+/** Batch instruction listener: Batch instruction Listener that receives an array of instructions, used by frameworks to update their state */
+type BatchInstructionListener = (instructions: GridInstruction[]) => void;
+//#endregion
+//#region src/types/renderers.d.ts
 /** Cell renderer params */
 interface CellRendererParams {
   /** Cell value */
@@ -266,13 +380,136 @@ interface HeaderRendererParams {
   sortDirection?: SortDirection;
   /** Sort index */
   sortIndex?: number;
+  /** Whether column is sortable */
+  sortable: boolean;
+  /** Whether column is filterable */
+  filterable: boolean;
+  /** Whether column has an active filter */
+  hasFilter: boolean;
   /** On sort */
   onSort: (direction: SortDirection | null, addToExisting: boolean) => void;
+  /** On filter click */
+  onFilterClick: () => void;
+}
+//#endregion
+//#region src/types/options.d.ts
+/** Grid core options */
+interface GridCoreOptions<TData = Row> {
+  /** Column definitions */
+  columns: ColumnDefinition[];
+  /** Data source */
+  dataSource: DataSource<TData>;
+  /** Row height */
+  rowHeight: number;
+  /** Header height: Default to row height */
+  headerHeight?: number;
+  /** Overscan: How many rows to render outside the viewport */
+  overscan?: number;
+  /** Enable/disable sorting globally. Default: true */
+  sortingEnabled?: boolean;
+  /** Debounce time for transactions in ms. Default 50. Set to 0 for sync. */
+  transactionDebounceMs?: number;
+  /** Function to extract unique ID from row. Required for mutations. */
+  getRowId?: (row: TData) => RowId;
+}
+//#endregion
+//#region src/types/input.d.ts
+/** Framework-agnostic pointer/mouse event data */
+interface PointerEventData {
+  /** X coordinate relative to viewport */
+  clientX: number;
+  /** Y coordinate relative to viewport */
+  clientY: number;
+  /** Mouse button (0 = left, 1 = middle, 2 = right) */
+  button: number;
+  /** Whether Shift key is pressed */
+  shiftKey: boolean;
+  /** Whether Ctrl key is pressed */
+  ctrlKey: boolean;
+  /** Whether Meta/Command key is pressed */
+  metaKey: boolean;
+}
+/** Framework-agnostic keyboard event data */
+interface KeyEventData {
+  /** Key value (e.g., 'Enter', 'ArrowUp', 'a') */
+  key: string;
+  /** Whether Shift key is pressed */
+  shiftKey: boolean;
+  /** Whether Ctrl key is pressed */
+  ctrlKey: boolean;
+  /** Whether Meta/Command key is pressed */
+  metaKey: boolean;
+}
+/** Container bounds and scroll position */
+interface ContainerBounds {
+  /** Top position relative to viewport */
+  top: number;
+  /** Left position relative to viewport */
+  left: number;
+  /** Container width */
+  width: number;
+  /** Container height */
+  height: number;
+  /** Current scroll top position */
+  scrollTop: number;
+  /** Current scroll left position */
+  scrollLeft: number;
+}
+/** Result from mouse/pointer input handlers */
+interface InputResult {
+  /** Whether to call preventDefault() on the event */
+  preventDefault: boolean;
+  /** Whether to call stopPropagation() on the event */
+  stopPropagation: boolean;
+  /** Whether framework should focus the container element */
+  focusContainer?: boolean;
+  /** Type of drag operation to start (framework manages global listeners) */
+  startDrag?: "selection" | "fill";
+}
+/** Result from keyboard input handler */
+interface KeyboardResult {
+  /** Whether to call preventDefault() on the event */
+  preventDefault: boolean;
+  /** Cell to scroll into view (if navigation occurred) */
+  scrollToCell?: CellPosition;
+}
+/** Result from drag move handler */
+interface DragMoveResult {
+  /** Target row index */
+  targetRow: number;
+  /** Target column index */
+  targetCol: number;
+  /** Auto-scroll deltas (null if no auto-scroll needed) */
+  autoScroll: {
+    dx: number;
+    dy: number;
+  } | null;
+}
+/** Options for InputHandler constructor */
+interface InputHandlerDeps {
+  /** Get header height */
+  getHeaderHeight: () => number;
+  /** Get row height */
+  getRowHeight: () => number;
+  /** Get column positions array */
+  getColumnPositions: () => number[];
+  /** Get column count */
+  getColumnCount: () => number;
+}
+/** Current drag state for UI rendering */
+interface DragState {
+  /** Whether any drag operation is active */
+  isDragging: boolean;
+  /** Type of active drag operation */
+  dragType: "selection" | "fill" | null;
+  /** Source range for fill operations */
+  fillSourceRange: CellRange | null;
+  /** Current fill target position */
+  fillTarget: {
+    row: number;
+    col: number;
+  } | null;
 }
-/** Instruction listener: Single instruction Listener that receives a single instruction, used by frameworks to update their state */
-type InstructionListener = (instruction: GridInstruction) => void;
-/** Batch instruction listener: Batch instruction Listener that receives an array of instructions, used by frameworks to update their state */
-type BatchInstructionListener = (instructions: GridInstruction[]) => void;
 //#endregion
 //#region src/selection.d.ts
 type Direction = "up" | "down" | "left" | "right";
@@ -380,19 +617,88 @@ declare class FillManager {
    */
   private calculateFilledCells;
   private getSourceColumnValues;
-  private getSourceRowValues;
   private detectPattern;
   private applyPattern;
 }
 //#endregion
+//#region src/input-handler.d.ts
+declare class InputHandler<TData extends Row = Row> {
+  private core;
+  private deps;
+  private isDraggingSelection;
+  private isDraggingFill;
+  private fillSourceRange;
+  private fillTarget;
+  constructor(core: GridCore<TData>, deps: InputHandlerDeps);
+  /**
+   * Update dependencies (called when options change)
+   */
+  updateDeps(deps: Partial<InputHandlerDeps>): void;
+  /**
+   * Get current drag state for UI rendering
+   */
+  getDragState(): DragState;
+  /**
+   * Handle cell mouse down event
+   */
+  handleCellMouseDown(rowIndex: number, colIndex: number, event: PointerEventData): InputResult;
+  /**
+   * Handle cell double click event (start editing)
+   */
+  handleCellDoubleClick(rowIndex: number, colIndex: number): void;
+  /**
+   * Handle fill handle mouse down event
+   */
+  handleFillHandleMouseDown(activeCell: CellPosition | null, selectionRange: CellRange | null, _event: PointerEventData): InputResult;
+  /**
+   * Handle header click event (cycle sort direction)
+   */
+  handleHeaderClick(colId: string, addToExisting: boolean): void;
+  /**
+   * Start selection drag (called by framework after handleCellMouseDown returns startDrag: 'selection')
+   */
+  startSelectionDrag(): void;
+  /**
+   * Handle drag move event (selection or fill)
+   */
+  handleDragMove(event: PointerEventData, bounds: ContainerBounds): DragMoveResult | null;
+  /**
+   * Handle drag end event
+   */
+  handleDragEnd(): void;
+  /**
+   * Handle wheel event with dampening for large datasets
+   * Returns scroll deltas or null if no dampening needed
+   */
+  handleWheel(deltaY: number, deltaX: number, dampening: number): {
+    dy: number;
+    dx: number;
+  } | null;
+  /**
+   * Handle keyboard event
+   */
+  handleKeyDown(event: KeyEventData, activeCell: CellPosition | null, editingCell: {
+    row: number;
+    col: number;
+  } | null, filterPopupOpen: boolean): KeyboardResult;
+  /**
+   * Find column index at a given X coordinate
+   */
+  private findColumnAtX;
+  /**
+   * Calculate auto-scroll deltas based on mouse position
+   */
+  private calculateAutoScroll;
+}
+//#endregion
 //#region src/grid-core.d.ts
 declare class GridCore<TData extends Row = Row> {
-  private static readonly MAX_SAFE_HEIGHT;
   private columns;
   private dataSource;
   private rowHeight;
   private headerHeight;
   private overscan;
+  private sortingEnabled;
   private scrollTop;
   private scrollLeft;
   private viewportWidth;
@@ -403,13 +709,18 @@ declare class GridCore<TData extends Row = Row> {
   private pageSize;
   private sortModel;
   private filterModel;
-  private slotPool;
+  private openFilterColIndex;
   readonly selection: SelectionManager;
   readonly fill: FillManager;
-  private editState;
+  readonly input: InputHandler<TData>;
+  private readonly slotPool;
+  private readonly editManager;
   private columnPositions;
   private listeners;
   private batchListeners;
+  private naturalContentHeight;
+  private virtualContentHeight;
+  private scrollRatio;
   constructor(options: GridCoreOptions<TData>);
   onInstruction(listener: InstructionListener): () => void;
   /**
@@ -425,50 +736,45 @@ declare class GridCore<TData extends Row = Row> {
   initialize(): Promise<void>;
   /**
    * Update viewport measurements and sync slots.
+   * When scroll virtualization is active, maps the DOM scroll position to the actual row position.
    */
   setViewport(scrollTop: number, scrollLeft: number, width: number, height: number): void;
+  private fetchData;
+  private fetchAllData;
+  setSort(colId: string, direction: SortDirection | null, addToExisting?: boolean): Promise<void>;
+  setFilter(colId: string, filter: ColumnFilterModel | string | null): Promise<void>;
   /**
-   * Synchronize slots with current viewport position.
-   * This implements the slot recycling strategy.
-   */
-  private syncSlots;
-  private destroyAllSlots;
-  /**
-   * Get the virtual (unscaled) height of the entire grid content.
-   */
-  private getVirtualHeight;
-  /**
-   * Get the display height (capped) for the content sizer.
-   * This is the height that will be used in CSS for the scrollable area.
+   * Check if a column has an active filter
    */
-  private getDisplayHeight;
+  hasActiveFilter(colId: string): boolean;
   /**
-   * Check if scaling is needed (virtual height exceeds safe limit).
+   * Check if a column is sortable
    */
-  private needsScaling;
+  isColumnSortable(colIndex: number): boolean;
   /**
-   * Get the scroll progress as a value from 0 to 1.
-   * 0 = scrolled to top, 1 = scrolled to bottom.
+   * Check if a column is filterable
    */
-  private getScrollProgress;
+  isColumnFilterable(colIndex: number): boolean;
   /**
-   * Convert display scroll position to virtual scroll position.
-   * Uses proportional mapping when content exceeds safe limits.
+   * Get distinct values for a column (for filter dropdowns)
+   * For array-type columns (like tags), each unique array combination is returned.
+   * Arrays are sorted internally for consistent comparison.
+   * Limited to MAX_DISTINCT_VALUES to avoid performance issues with large datasets.
    */
-  private getVirtualScrollTop;
+  getDistinctValuesForColumn(colId: string, maxValues?: number): CellValue[];
   /**
-   * Get the translateY for a row that keeps values within safe CSS limits.
-   * Uses proportional positioning when content exceeds safe limits.
+   * Open filter popup for a column (toggles if already open for same column)
    */
-  private getRowTranslateY;
-  private fetchData;
-  private fetchAllData;
-  setSort(colId: string, direction: SortDirection | null, addToExisting?: boolean): Promise<void>;
-  setFilter(colId: string, value: string): Promise<void>;
+  openFilterPopup(colIndex: number, anchorRect: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  }): void;
   /**
-   * Force refresh all slot data (used after filtering/sorting when data changes)
+   * Close filter popup
    */
-  private refreshAllSlots;
+  closeFilterPopup(): void;
   getSortModel(): SortModel[];
   getFilterModel(): FilterModel;
   startEdit(row: number, col: number): void;
@@ -490,38 +796,43 @@ declare class GridCore<TData extends Row = Row> {
   getHeaderHeight(): number;
   getTotalWidth(): number;
   getTotalHeight(): number;
-  getRowData(rowIndex: number): TData | undefined;
-  /**
-   * Get the display Y position for a row (accounting for scaling).
-   * Used by UI adapters for scroll-into-view functionality.
-   */
-  getDisplayYForRow(rowIndex: number): number;
   /**
-   * Check if scaling is currently active.
+   * Check if scroll scaling is active (large datasets exceeding browser scroll limits).
+   * When scaling is active, scrollRatio < 1 and scroll positions are compressed.
    */
   isScalingActive(): boolean;
   /**
-   * Convert a display Y position to a row index.
-   * Used by UI adapters for mouse coordinate conversion during drag operations.
-   * @param displayY The Y position in display coordinates (relative to content area, after header)
-   * @param scrollTop The current scroll position
+   * Get the natural (uncapped) content height.
+   * Useful for debugging or displaying actual content size.
    */
-  getRowIndexAtDisplayY(displayY: number, scrollTop: number): number;
+  getNaturalHeight(): number;
   /**
-   * Calculate the scroll position needed to make a row visible.
-   * For scaling mode: uses proportional mapping (rowIndex/totalRows ≈ scrollTop/maxScroll)
-   * Used by UI adapters for scroll-into-view functionality.
+   * Get the scroll ratio used for scroll virtualization.
+   * Returns 1 when no virtualization is needed, < 1 when content exceeds browser limits.
    */
-  getScrollTopForRow(rowIndex: number): number;
+  getScrollRatio(): number;
   /**
-   * Get the currently visible row range (excluding overscan).
-   * Returns { start, end } row indices that are fully visible in the viewport.
-   * Used by UI adapters for scroll-into-view functionality.
+   * Get the visible row range (excluding overscan).
+   * Returns the first and last row indices that are actually visible in the viewport.
+   * Includes partially visible rows to avoid false positives when clicking on edge rows.
    */
   getVisibleRowRange(): {
     start: number;
     end: number;
   };
+  /**
+   * Get the scroll position needed to bring a row into view.
+   * Accounts for scroll scaling when active.
+   */
+  getScrollTopForRow(rowIndex: number): number;
+  /**
+   * Get the row index at a given viewport Y position.
+   * Accounts for scroll scaling when active.
+   * @param viewportY Y position in viewport (physical pixels below header, NOT including scroll)
+   * @param virtualScrollTop Current scroll position from container.scrollTop (virtual/scaled)
+   */
+  getRowIndexAtDisplayY(viewportY: number, virtualScrollTop: number): number;
+  getRowData(rowIndex: number): TData | undefined;
   /**
    * Refresh data from the data source.
    */
@@ -541,29 +852,535 @@ declare class GridCore<TData extends Row = Row> {
   setColumns(columns: ColumnDefinition[]): void;
 }
 //#endregion
-//#region src/data-source.d.ts
+//#region src/slot-pool.d.ts
+interface SlotPoolManagerOptions {
+  /** Get current row height */
+  getRowHeight: () => number;
+  /** Get current header height */
+  getHeaderHeight: () => number;
+  /** Get overscan count */
+  getOverscan: () => number;
+  /** Get current scroll top position (natural, not virtual) */
+  getScrollTop: () => number;
+  /** Get viewport height */
+  getViewportHeight: () => number;
+  /** Get total row count */
+  getTotalRows: () => number;
+  /** Get scroll ratio for virtualization (1 = no virtualization) */
+  getScrollRatio: () => number;
+  /** Get virtual content height */
+  getVirtualContentHeight: () => number;
+  /** Get row data by index */
+  getRowData: (rowIndex: number) => Row | undefined;
+}
 /**
- * Creates a client-side data source that holds all data in memory.
- * Sorting and filtering are performed client-side.
- * For large datasets (10k+ rows), sorting is automatically offloaded to a Web Worker.
+ * Manages the slot pool for virtual scrolling.
+ * Handles slot creation, recycling, positioning, and destruction.
+ */
+/** Batch instruction listener for efficient React state updates */
+type BatchInstructionListener$1 = (instructions: GridInstruction[]) => void;
+declare class SlotPoolManager {
+  private state;
+  private options;
+  private listeners;
+  private batchListeners;
+  constructor(options: SlotPoolManagerOptions);
+  onInstruction(listener: InstructionListener): () => void;
+  /**
+   * Subscribe to batched instructions for efficient state updates.
+   */
+  onBatchInstruction(listener: BatchInstructionListener$1): () => void;
+  private emit;
+  private emitBatch;
+  /**
+   * Get the slot ID for a given row index.
+   */
+  getSlotForRow(rowIndex: number): string | undefined;
+  /**
+   * Get all current slots.
+   */
+  getSlots(): Map<string, SlotState>;
+  /**
+   * Synchronize slots with current viewport position.
+   * This implements the slot recycling strategy.
+   */
+  syncSlots(): void;
+  /**
+   * Destroy all slots.
+   */
+  destroyAllSlots(): void;
+  /**
+   * Refresh all slot data without changing which rows are displayed.
+   * Used after filtering/sorting when data changes.
+   */
+  refreshAllSlots(): void;
+  /**
+   * Update a single slot's data.
+   */
+  updateSlot(rowIndex: number): void;
+  /**
+   * Calculate the translateY position for a row.
+   * Handles scroll virtualization for very large datasets.
+   */
+  private getRowTranslateY;
+}
+//#endregion
+//#region src/edit-manager.d.ts
+interface EditManagerOptions {
+  /** Get column definition by index */
+  getColumn: (colIndex: number) => ColumnDefinition | undefined;
+  /** Get cell value */
+  getCellValue: (row: number, col: number) => CellValue;
+  /** Set cell value */
+  setCellValue: (row: number, col: number, value: CellValue) => void;
+  /** Callback when edit is committed (to update slot display) */
+  onCommit?: (row: number, col: number, value: CellValue) => void;
+}
+/**
+ * Manages cell editing state and operations.
  */
-declare function createClientDataSource<TData extends Row = Row>(data: TData[], options?: {
+declare class EditManager {
+  private editState;
+  private options;
+  private listeners;
+  constructor(options: EditManagerOptions);
+  onInstruction(listener: InstructionListener): () => void;
+  private emit;
+  /**
+   * Get the current edit state.
+   */
+  getState(): EditState | null;
+  /**
+   * Check if currently editing.
+   */
+  isEditing(): boolean;
+  /**
+   * Check if a specific cell is being edited.
+   */
+  isEditingCell(row: number, col: number): boolean;
+  /**
+   * Start editing a cell.
+   * Returns true if edit was started, false if cell is not editable.
+   */
+  startEdit(row: number, col: number): boolean;
+  /**
+   * Update the current edit value.
+   */
+  updateValue(value: CellValue): void;
+  /**
+   * Commit the current edit.
+   * Saves the value and closes the editor.
+   */
+  commit(): void;
+  /**
+   * Cancel the current edit.
+   * Discards changes and closes the editor.
+   */
+  cancel(): void;
+}
+//#endregion
+//#region src/data-source/client-data-source.d.ts
+interface ClientDataSourceOptions<TData> {
   /** Custom field accessor for nested properties */
   getFieldValue?: (row: TData, field: string) => CellValue;
   /** Use Web Worker for sorting large datasets (default: true) */
   useWorker?: boolean;
-}): DataSource<TData>;
+}
+/**
+ * Creates a client-side data source that holds all data in memory.
+ * Sorting and filtering are performed client-side.
+ * For large datasets, sorting is automatically offloaded to a Web Worker.
+ */
+declare function createClientDataSource<TData extends Row = Row>(data: TData[], options?: ClientDataSourceOptions<TData>): DataSource<TData>;
+/**
+ * Convenience function to create a data source from an array.
+ * This provides backwards compatibility with the old `rowData` prop.
+ */
+declare function createDataSourceFromArray<TData extends Row = Row>(data: TData[]): DataSource<TData>;
+//#endregion
+//#region src/data-source/server-data-source.d.ts
 type ServerFetchFunction<TData> = (request: DataSourceRequest) => Promise<DataSourceResponse<TData>>;
 /**
  * Creates a server-side data source that delegates all operations to the server.
  * The fetch function receives sort/filter/pagination params to pass to the API.
  */
 declare function createServerDataSource<TData extends Row = Row>(fetchFn: ServerFetchFunction<TData>): DataSource<TData>;
+//#endregion
+//#region src/indexed-data-store/indexed-data-store.d.ts
+interface IndexedDataStoreOptions<TData> {
+  /** Function to extract unique ID from row. Required for mutations. */
+  getRowId: (row: TData) => RowId;
+  /** Custom field accessor for nested properties */
+  getFieldValue?: (row: TData, field: string) => CellValue;
+}
+/** Hash cache for a single row */
+interface RowSortCache {
+  /** Map: sortModelHash -> computed hashes for that sort configuration */
+  hashes: Map<string, number[]>;
+}
 /**
- * Convenience function to create a data source from an array.
- * This provides backwards compatibility with the old `rowData` prop.
+ * Efficient data structure for incremental operations on grid data.
+ * Supports:
+ * - O(1) lookup by row ID
+ * - O(log n) binary insertion to maintain sort order
+ * - Filter state caching with distinct values
+ * - Hash caching for fast sorted comparisons
  */
-declare function createDataSourceFromArray<TData extends Row = Row>(data: TData[]): DataSource<TData>;
+declare class IndexedDataStore<TData extends Row = Row> {
+  private rows;
+  private rowById;
+  private sortedIndices;
+  private sortModel;
+  private sortModelHash;
+  private filterModel;
+  private filteredIndices;
+  private distinctValues;
+  private rowSortCache;
+  private options;
+  constructor(initialData: TData[] | undefined, options: IndexedDataStoreOptions<TData>);
+  /**
+   * Replace all data (used for initial load or full refresh).
+   */
+  setData(data: TData[]): void;
+  /**
+   * Query data with sorting, filtering, and pagination.
+   * Compatible with DataSource.fetch() interface.
+   */
+  query(request: DataSourceRequest): DataSourceResponse<TData>;
+  /**
+   * Get row by ID.
+   */
+  getRowById(id: RowId): TData | undefined;
+  /**
+   * Get row by index.
+   */
+  getRowByIndex(index: number): TData | undefined;
+  /**
+   * Get total row count (unfiltered).
+   */
+  getTotalRowCount(): number;
+  /**
+   * Get visible row count (after filtering).
+   */
+  getVisibleRowCount(): number;
+  /**
+   * Get distinct values for a field (for filter UI).
+   */
+  getDistinctValues(field: string): CellValue[];
+  /**
+   * Add rows to the store.
+   * Rows are inserted at their correct sorted position.
+   */
+  addRows(rows: TData[]): void;
+  /**
+   * Add a single row.
+   */
+  private addRow;
+  /**
+   * Remove rows by ID.
+   */
+  removeRows(ids: RowId[]): void;
+  /**
+   * Remove a single row by index.
+   */
+  private removeRowByIndex;
+  /**
+   * Update indices after a row removal.
+   */
+  private reindexAfterRemoval;
+  /**
+   * Update a cell value.
+   */
+  updateCell(id: RowId, field: string, value: CellValue): void;
+  /**
+   * Update multiple fields on a row.
+   */
+  updateRow(id: RowId, data: Partial<TData>): void;
+  /**
+   * Set the sort model. Triggers full re-sort if model changed.
+   */
+  setSortModel(model: SortModel[]): void;
+  /**
+   * Get current sort model.
+   */
+  getSortModel(): SortModel[];
+  /**
+   * Set the filter model.
+   */
+  setFilterModel(model: FilterModel): void;
+  /**
+   * Get current filter model.
+   */
+  getFilterModel(): FilterModel;
+  /**
+   * Rebuild sorted indices (full re-sort).
+   */
+  private rebuildSortedIndices;
+  /**
+   * Rebuild hash cache for all rows.
+   */
+  private rebuildHashCache;
+  /**
+   * Compute and cache sort hashes for a row.
+   */
+  private computeRowHashes;
+  /**
+   * Compare two rows using cached hashes.
+   */
+  private compareRows;
+  /**
+   * Binary search for insertion position in sortedIndices.
+   */
+  private binarySearchInsertPosition;
+  /**
+   * Rebuild filtered indices.
+   */
+  private rebuildFilteredIndices;
+  /**
+   * Check if a row passes the current filter.
+   */
+  private rowPassesFilter;
+  /**
+   * Get visible indices (filtered + sorted).
+   */
+  private getVisibleIndices;
+  /**
+   * Rebuild distinct values cache for all fields.
+   */
+  private rebuildDistinctValues;
+  /**
+   * Update distinct values when a row is added or removed.
+   */
+  private updateDistinctValuesForRow;
+  /**
+   * Update distinct value for a specific field when cell value changes.
+   */
+  private updateDistinctValueForField;
+}
+//#endregion
+//#region src/indexed-data-store/field-helpers.d.ts
+/**
+ * Default field value accessor supporting dot notation.
+ * @example
+ * getFieldValue({ user: { name: "John" } }, "user.name") // "John"
+ */
+declare function getFieldValue<TData extends Row>(row: TData, field: string): CellValue;
+/**
+ * Set field value supporting dot notation.
+ * Creates nested objects if they don't exist.
+ * @example
+ * const obj = { user: {} };
+ * setFieldValue(obj, "user.name", "John");
+ * // obj is now { user: { name: "John" } }
+ */
+declare function setFieldValue<TData extends Row>(row: TData, field: string, value: CellValue): void;
+//#endregion
+//#region src/indexed-data-store/sorting.d.ts
+/**
+ * Convert a string to a sortable number using first 10 characters.
+ * Uses base-36 encoding (a-z = 0-25, 0-9 = 26-35).
+ */
+declare function stringToSortableNumber(str: string): number;
+/**
+ * Compare two cell values for sorting.
+ * Handles null/undefined, arrays, numbers, dates, and strings.
+ */
+declare function compareValues(a: CellValue, b: CellValue): number;
+/**
+ * Compute a sortable hash for a cell value.
+ * Used for fast comparisons in sorted indices.
+ */
+declare function computeValueHash(value: CellValue): number;
+//#endregion
+//#region src/indexed-data-store/filtering.d.ts
+/**
+ * Text filter condition type
+ */
+interface TextCondition {
+  type: "text";
+  operator: string;
+  value?: string;
+  selectedValues?: Set<string>;
+  includeBlank?: boolean;
+}
+/**
+ * Number filter condition type
+ */
+interface NumberCondition {
+  type: "number";
+  operator: string;
+  value?: number;
+  valueTo?: number;
+}
+/**
+ * Date filter condition type
+ */
+interface DateCondition {
+  type: "date";
+  operator: string;
+  value?: Date | string;
+  valueTo?: Date | string;
+}
+/**
+ * Check if two dates are on the same day.
+ */
+declare function isSameDay(a: Date, b: Date): boolean;
+/**
+ * Evaluate a text filter condition against a cell value.
+ */
+declare function evaluateTextCondition(cellValue: CellValue, condition: TextCondition): boolean;
+/**
+ * Evaluate a number filter condition against a cell value.
+ */
+declare function evaluateNumberCondition(cellValue: CellValue, condition: NumberCondition): boolean;
+/**
+ * Evaluate a date filter condition against a cell value.
+ */
+declare function evaluateDateCondition(cellValue: CellValue, condition: DateCondition): boolean;
+/**
+ * Evaluate a column filter model against a cell value.
+ * Uses left-to-right evaluation with per-condition operators.
+ */
+declare function evaluateColumnFilter(cellValue: CellValue, filter: ColumnFilterModel): boolean;
+/**
+ * Check if a row passes all filters in a filter model.
+ */
+declare function rowPassesFilter<TData extends Row>(row: TData, filterModel: FilterModel, getFieldValue: (row: TData, field: string) => CellValue): boolean;
+//#endregion
+//#region src/transaction-manager.d.ts
+interface AddTransaction<TData> {
+  type: "ADD";
+  rows: TData[];
+}
+interface RemoveTransaction {
+  type: "REMOVE";
+  rowIds: RowId[];
+}
+interface UpdateCellTransaction {
+  type: "UPDATE_CELL";
+  rowId: RowId;
+  field: string;
+  value: CellValue;
+}
+interface UpdateRowTransaction<TData> {
+  type: "UPDATE_ROW";
+  rowId: RowId;
+  data: Partial<TData>;
+}
+type Transaction<TData> = AddTransaction<TData> | RemoveTransaction | UpdateCellTransaction | UpdateRowTransaction<TData>;
+interface TransactionResult {
+  added: number;
+  removed: number;
+  updated: number;
+}
+interface TransactionManagerOptions<TData extends Row> {
+  /** Debounce time in milliseconds. Default 50. Set to 0 for sync. */
+  debounceMs: number;
+  /** The indexed data store to apply transactions to */
+  store: IndexedDataStore<TData>;
+  /** Callback when transactions are processed */
+  onProcessed?: (result: TransactionResult) => void;
+}
+/**
+ * Manages a queue of data mutations with debounced batch processing.
+ * Supports ADD, REMOVE, UPDATE_CELL, and UPDATE_ROW operations.
+ */
+declare class TransactionManager<TData extends Row = Row> {
+  private queue;
+  private debounceTimer;
+  private pendingPromise;
+  private options;
+  constructor(options: TransactionManagerOptions<TData>);
+  /**
+   * Queue rows to be added.
+   */
+  add(rows: TData[]): void;
+  /**
+   * Queue rows to be removed by ID.
+   */
+  remove(rowIds: RowId[]): void;
+  /**
+   * Queue a cell update.
+   */
+  updateCell(rowId: RowId, field: string, value: CellValue): void;
+  /**
+   * Queue a row update (multiple fields).
+   */
+  updateRow(rowId: RowId, data: Partial<TData>): void;
+  /**
+   * Force immediate processing of queued transactions.
+   * Returns a promise that resolves when processing is complete.
+   */
+  flush(): Promise<void>;
+  /**
+   * Check if there are pending transactions.
+   */
+  hasPending(): boolean;
+  /**
+   * Get count of pending transactions.
+   */
+  getPendingCount(): number;
+  /**
+   * Clear all pending transactions without processing.
+   */
+  clear(): void;
+  /**
+   * Schedule processing after throttle delay.
+   * Uses throttle pattern: if a timer is already pending, new transactions
+   * are added to the queue but don't reset the timer. This ensures updates
+   * are processed even when they arrive faster than the throttle interval.
+   */
+  private scheduleProcessing;
+  /**
+   * Process all queued transactions.
+   */
+  private processQueue;
+}
+//#endregion
+//#region src/data-source/mutable-data-source.d.ts
+/** Callback for data change notifications */
+type DataChangeListener = (result: TransactionResult) => void;
+/**
+ * Data source with mutation capabilities.
+ * Extends DataSource with add, remove, and update operations.
+ */
+interface MutableDataSource<TData = Row> extends DataSource<TData> {
+  /** Add rows to the data source. Queued and processed after debounce. */
+  addRows(rows: TData[]): void;
+  /** Remove rows by ID. Queued and processed after debounce. */
+  removeRows(ids: RowId[]): void;
+  /** Update a cell value. Queued and processed after debounce. */
+  updateCell(id: RowId, field: string, value: CellValue): void;
+  /** Update multiple fields on a row. Queued and processed after debounce. */
+  updateRow(id: RowId, data: Partial<TData>): void;
+  /** Force immediate processing of queued transactions. */
+  flushTransactions(): Promise<void>;
+  /** Check if there are pending transactions. */
+  hasPendingTransactions(): boolean;
+  /** Get distinct values for a field (for filter UI). */
+  getDistinctValues(field: string): CellValue[];
+  /** Get a row by ID. */
+  getRowById(id: RowId): TData | undefined;
+  /** Get total row count. */
+  getTotalRowCount(): number;
+  /** Subscribe to data change notifications. Returns unsubscribe function. */
+  subscribe(listener: DataChangeListener): () => void;
+}
+interface MutableClientDataSourceOptions<TData> {
+  /** Function to extract unique ID from row. Required. */
+  getRowId: (row: TData) => RowId;
+  /** Custom field accessor for nested properties. */
+  getFieldValue?: (row: TData, field: string) => CellValue;
+  /** Debounce time for transactions in ms. Default 50. Set to 0 for sync. */
+  debounceMs?: number;
+  /** Callback when transactions are processed. */
+  onTransactionProcessed?: (result: TransactionResult) => void;
+}
+/**
+ * Creates a mutable client-side data source with transaction support.
+ * Uses IndexedDataStore for efficient incremental operations.
+ */
+declare function createMutableClientDataSource<TData extends Row = Row>(data: TData[], options: MutableClientDataSourceOptions<TData>): MutableDataSource<TData>;
 //#endregion
 //#region src/worker-manager.d.ts
 /**
@@ -603,7 +1420,9 @@ declare class SortWorkerManager {
    */
   sortStringHashes(hashChunks: Float64Array[], direction: SortDirection, originalStrings: string[]): Promise<Uint32Array>;
   /**
-   * Resolve hash collisions by re-sorting collision groups using localeCompare.
+   * Resolve hash collisions by re-sorting collision runs using localeCompare.
+   * collisionRuns format: [start1, end1, start2, end2, ...] where each pair
+   * defines a run of indices in the sorted array with identical hashes.
    */
   private resolveCollisions;
   /**
@@ -630,5 +1449,144 @@ declare function getSharedSortWorker(): SortWorkerManager;
  */
 declare function terminateSharedSortWorker(): void;
 //#endregion
-export { type AssignSlotInstruction, type BatchInstructionListener, type CancelFillInstruction, type CellDataType, type CellPosition, type CellRange, type CellRendererParams, type CellValue, type ColumnDefinition, type CommitEditInstruction, type CommitFillInstruction, type CreateSlotInstruction, type DataErrorInstruction, type DataLoadedInstruction, type DataLoadingInstruction, type DataSource, type DataSourceRequest, type DataSourceResponse, type DestroySlotInstruction, type Direction, type EditRendererParams, type EditState, type FillHandleState, FillManager, type FilterModel, GridCore, type GridCoreOptions, type GridInstruction, type HeaderRendererParams, type InstructionListener, type MoveSlotInstruction, type Row, SelectionManager, type SelectionState, type SetActiveCellInstruction, type SetContentSizeInstruction, type SetSelectionRangeInstruction, type SlotState, type SortDirection, type SortModel, SortWorkerManager, type StartEditInstruction, type StartFillInstruction, type StopEditInstruction, type UpdateFillInstruction, type UpdateHeaderInstruction, createClientDataSource, createDataSourceFromArray, createServerDataSource, getSharedSortWorker, terminateSharedSortWorker };
-//# sourceMappingURL=index.d.ts.map
+//#region src/styles/variables.d.ts
+declare const variablesStyles = "\n/* =============================================================================\n   GP Grid - CSS Variables for Theming\n   ============================================================================= */\n\n.gp-grid-container {\n  /* Colors - Light Mode (default) */\n  --gp-grid-bg: #ffffff;\n  --gp-grid-bg-alt: #f8f9fa;\n  --gp-grid-text: #212529;\n  --gp-grid-text-secondary: #6c757d;\n  --gp-grid-text-muted: #adb5bd;\n  --gp-grid-border: #dee2e6;\n  --gp-grid-border-light: #e9ecef;\n\n  /* Header */\n  --gp-grid-header-bg: #f1f3f5;\n  --gp-grid-header-text: #212529;\n\n  /* Selection */\n  --gp-grid-primary: #228be6;\n  --gp-grid-primary-light: #e7f5ff;\n  --gp-grid-primary-border: #74c0fc;\n  --gp-grid-hover: #f1f3f5;\n\n  /* Filter */\n  --gp-grid-filter-bg: #f8f9fa;\n  --gp-grid-input-bg: #ffffff;\n  --gp-grid-input-border: #ced4da;\n\n  /* Error */\n  --gp-grid-error-bg: #fff5f5;\n  --gp-grid-error-text: #c92a2a;\n\n  /* Loading */\n  --gp-grid-loading-bg: rgba(255, 255, 255, 0.95);\n  --gp-grid-loading-text: #495057;\n\n  /* Scrollbar */\n  --gp-grid-scrollbar-track: #f1f3f5;\n  --gp-grid-scrollbar-thumb: #ced4da;\n  --gp-grid-scrollbar-thumb-hover: #adb5bd;\n}\n\n/* Dark Mode */\n.gp-grid-container--dark {\n  --gp-grid-bg: #1a1b1e;\n  --gp-grid-bg-alt: #25262b;\n  --gp-grid-text: #c1c2c5;\n  --gp-grid-text-secondary: #909296;\n  --gp-grid-text-muted: #5c5f66;\n  --gp-grid-border: #373a40;\n  --gp-grid-border-light: #2c2e33;\n\n  /* Header */\n  --gp-grid-header-bg: #25262b;\n  --gp-grid-header-text: #c1c2c5;\n\n  /* Selection */\n  --gp-grid-primary: #339af0;\n  --gp-grid-primary-light: #1c3d5a;\n  --gp-grid-primary-border: #1c7ed6;\n  --gp-grid-hover: #2c2e33;\n\n  /* Filter */\n  --gp-grid-filter-bg: #25262b;\n  --gp-grid-input-bg: #1a1b1e;\n  --gp-grid-input-border: #373a40;\n\n  /* Error */\n  --gp-grid-error-bg: #2c1a1a;\n  --gp-grid-error-text: #ff6b6b;\n\n  /* Loading */\n  --gp-grid-loading-bg: rgba(26, 27, 30, 0.95);\n  --gp-grid-loading-text: #c1c2c5;\n\n  /* Scrollbar */\n  --gp-grid-scrollbar-track: #25262b;\n  --gp-grid-scrollbar-thumb: #373a40;\n  --gp-grid-scrollbar-thumb-hover: #4a4d52;\n}\n";
+//#endregion
+//#region src/styles/container.d.ts
+declare const containerStyles = "\n/* =============================================================================\n   GP Grid - Clean Flat Design\n   ============================================================================= */\n\n/* Grid Container */\n.gp-grid-container {\n  outline: none;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--gp-grid-text);\n  background-color: var(--gp-grid-bg);\n  border: 1px solid var(--gp-grid-border);\n  border-radius: 6px;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.gp-grid-container:focus {\n  outline: none;\n  border-color: var(--gp-grid-primary);\n}\n";
+//#endregion
+//#region src/styles/header.d.ts
+declare const headerStyles = "\n/* =============================================================================\n   Header\n   ============================================================================= */\n\n.gp-grid-header {\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  background-color: var(--gp-grid-header-bg);\n  border-bottom: 1px solid var(--gp-grid-border);\n}\n\n.gp-grid-container .gp-grid-header-cell {\n  position: absolute;\n  box-sizing: border-box;\n  border-right: 1px solid var(--gp-grid-border);\n  font-weight: 600;\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--gp-grid-header-text);\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  padding: 0 12px;\n  background-color: transparent;\n  transition: background-color 0.1s ease;\n}\n\n.gp-grid-container .gp-grid-header-cell:hover {\n  background-color: var(--gp-grid-hover);\n}\n\n.gp-grid-container .gp-grid-header-cell:active {\n  background-color: var(--gp-grid-border-light);\n}\n\n.gp-grid-container .gp-grid-header-text {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--gp-grid-header-text);\n}\n\n/* Header icons container */\n.gp-grid-header-icons {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: auto;\n}\n\n/* Stacked sort arrows */\n.gp-grid-sort-arrows {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 2px;\n  margin-left: 6px;\n}\n\n.gp-grid-sort-arrows-stack {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n}\n\n.gp-grid-sort-arrow-up,\n.gp-grid-sort-arrow-down {\n  opacity: 0.35;\n  transition: opacity 0.15s ease, color 0.15s ease;\n  color: var(--gp-grid-text);\n}\n\n.gp-grid-sort-arrow-up.active,\n.gp-grid-sort-arrow-down.active {\n  opacity: 1;\n  color: var(--gp-grid-primary);\n}\n\n.gp-grid-sort-index {\n  font-size: 9px;\n  color: var(--gp-grid-primary);\n  font-weight: 600;\n}\n\n/* Filter icon */\n.gp-grid-filter-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--gp-grid-text-secondary);\n  transition: background-color 0.15s ease, color 0.15s ease;\n  margin-left: 2px;\n}\n\n.gp-grid-filter-icon:hover {\n  background-color: var(--gp-grid-hover);\n  color: var(--gp-grid-primary);\n}\n\n.gp-grid-filter-icon.active {\n  color: var(--gp-grid-primary);\n  background-color: var(--gp-grid-primary-light);\n}\n";
+//#endregion
+//#region src/styles/cells.d.ts
+declare const cellStyles = "\n/* =============================================================================\n   Data Cells\n   ============================================================================= */\n\n.gp-grid-row {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.gp-grid-cell {\n  position: absolute;\n  top: 0;\n  box-sizing: border-box;\n  padding: 0 12px;\n  display: flex;\n  align-items: center;\n  cursor: cell;\n  color: var(--gp-grid-text);\n  border-right: 1px solid var(--gp-grid-border-light);\n  border-bottom: 1px solid var(--gp-grid-border-light);\n  background-color: var(--gp-grid-bg);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n/* Alternating row colors */\n.gp-grid-row--even .gp-grid-cell {\n  background-color: var(--gp-grid-bg-alt);\n}\n\n.gp-grid-cell:hover {\n  background-color: var(--gp-grid-hover) !important;\n}\n\n/* Active cell (focused) */\n.gp-grid-cell--active {\n  background-color: var(--gp-grid-primary-light) !important;\n  border: 2px solid var(--gp-grid-primary) !important;\n  outline: none;\n  z-index: 5;\n  padding: 0 11px;\n}\n\n/* Selected cells (range selection) */\n.gp-grid-cell--selected {\n  background-color: var(--gp-grid-primary-light) !important;\n}\n\n/* Editing cell */\n.gp-grid-cell--editing {\n  background-color: var(--gp-grid-bg) !important;\n  border: 2px solid var(--gp-grid-primary) !important;\n  padding: 0 !important;\n  z-index: 10;\n}\n\n/* =============================================================================\n   Fill Handle (drag to fill)\n   ============================================================================= */\n\n.gp-grid-fill-handle {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background-color: var(--gp-grid-primary);\n  border: 2px solid var(--gp-grid-bg);\n  cursor: crosshair;\n  z-index: 100;\n  pointer-events: auto;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n\n.gp-grid-fill-handle:hover {\n  transform: scale(1.2);\n}\n\n/* Fill preview (cells being filled) */\n.gp-grid-cell--fill-preview {\n  background-color: var(--gp-grid-primary-light) !important;\n  border: 1px dashed var(--gp-grid-primary) !important;\n}\n\n/* =============================================================================\n   Edit Input\n   ============================================================================= */\n\n.gp-grid-edit-input {\n  width: 100%;\n  height: 100%;\n  padding: 0 11px;\n  font-family: inherit;\n  font-size: inherit;\n  color: var(--gp-grid-text);\n  border: none;\n  background-color: transparent;\n}\n\n.gp-grid-edit-input:focus {\n  outline: none;\n}\n";
+//#endregion
+//#region src/styles/states.d.ts
+declare const statesStyles = "\n/* =============================================================================\n   Loading & Error States\n   ============================================================================= */\n\n.gp-grid-loading {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 12px 20px;\n  background-color: var(--gp-grid-loading-bg);\n  color: var(--gp-grid-loading-text);\n  border-radius: 6px;\n  border: 1px solid var(--gp-grid-border);\n  font-weight: 500;\n  font-size: 13px;\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.gp-grid-loading-spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--gp-grid-border);\n  border-top-color: var(--gp-grid-primary);\n  border-radius: 50%;\n  animation: gp-grid-spin 0.7s linear infinite;\n}\n\n@keyframes gp-grid-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.gp-grid-error {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 12px 20px;\n  background-color: var(--gp-grid-error-bg);\n  color: var(--gp-grid-error-text);\n  border-radius: 6px;\n  border: 1px solid var(--gp-grid-error-text);\n  font-weight: 500;\n  font-size: 13px;\n  z-index: 1000;\n  max-width: 80%;\n  text-align: center;\n}\n\n/* =============================================================================\n   Empty State\n   ============================================================================= */\n\n.gp-grid-empty {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--gp-grid-text-muted);\n  font-size: 14px;\n  text-align: center;\n}\n";
+//#endregion
+//#region src/styles/scrollbar.d.ts
+declare const scrollbarStyles = "\n/* =============================================================================\n   Scrollbar Styling\n   ============================================================================= */\n\n.gp-grid-container::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n.gp-grid-container::-webkit-scrollbar-track {\n  background-color: var(--gp-grid-scrollbar-track);\n}\n\n.gp-grid-container::-webkit-scrollbar-thumb {\n  background-color: var(--gp-grid-scrollbar-thumb);\n  border-radius: 4px;\n}\n\n.gp-grid-container::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gp-grid-scrollbar-thumb-hover);\n}\n\n.gp-grid-container::-webkit-scrollbar-corner {\n  background-color: var(--gp-grid-scrollbar-track);\n}\n";
+//#endregion
+//#region src/styles/filters.d.ts
+declare const filtersStyles = "\n/* =============================================================================\n   Filter Popup\n   ============================================================================= */\n\n.gp-grid-filter-popup {\n  background-color: var(--gp-grid-bg);\n  border: 1px solid var(--gp-grid-border);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  max-height: 400px;\n  display: flex;\n  flex-direction: column;\n  font-size: 13px;\n}\n\n.gp-grid-filter-header {\n  padding: 10px 12px;\n  font-weight: 600;\n  border-bottom: 1px solid var(--gp-grid-border-light);\n  color: var(--gp-grid-header-text);\n}\n\n.gp-grid-filter-content {\n  padding: 10px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  overflow: hidden;\n}\n\n/* Mode toggle (Values / Condition) */\n.gp-grid-filter-mode-toggle {\n  display: flex;\n  gap: 4px;\n  background-color: var(--gp-grid-bg-alt);\n  border-radius: 4px;\n  padding: 2px;\n}\n\n.gp-grid-filter-mode-toggle button {\n  flex: 1;\n  padding: 6px 10px;\n  font-size: 11px;\n  font-family: inherit;\n  border: none;\n  border-radius: 3px;\n  background-color: transparent;\n  color: var(--gp-grid-text-secondary);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n.gp-grid-filter-mode-toggle button:hover {\n  color: var(--gp-grid-text);\n}\n\n.gp-grid-filter-mode-toggle button.active {\n  background-color: var(--gp-grid-bg);\n  color: var(--gp-grid-text);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n/* Info message for too many values */\n.gp-grid-filter-info {\n  font-size: 11px;\n  color: var(--gp-grid-text-secondary);\n  padding: 6px 8px;\n  background-color: var(--gp-grid-bg-alt);\n  border-radius: 4px;\n}\n\n/* Search input in filter */\n.gp-grid-filter-search {\n  width: 100%;\n  height: 30px;\n  padding: 0 10px;\n  font-family: inherit;\n  font-size: 12px;\n  border: 1px solid var(--gp-grid-input-border);\n  border-radius: 4px;\n  background-color: var(--gp-grid-input-bg);\n  color: var(--gp-grid-text);\n  box-sizing: border-box;\n}\n\n.gp-grid-filter-search:focus {\n  outline: none;\n  border-color: var(--gp-grid-primary);\n}\n\n/* Select All / Deselect All actions */\n.gp-grid-filter-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.gp-grid-filter-actions button {\n  flex: 1;\n  padding: 4px 8px;\n  font-size: 11px;\n  font-family: inherit;\n  border: 1px solid var(--gp-grid-input-border);\n  border-radius: 3px;\n  background-color: var(--gp-grid-bg);\n  color: var(--gp-grid-text);\n  cursor: pointer;\n}\n\n.gp-grid-filter-actions button:hover:not(:disabled) {\n  background-color: var(--gp-grid-hover);\n}\n\n.gp-grid-filter-actions button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Checkbox list */\n.gp-grid-filter-list {\n  max-height: 200px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  border: 1px solid var(--gp-grid-border-light);\n  border-radius: 4px;\n  padding: 6px;\n}\n\n.gp-grid-filter-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 6px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.gp-grid-filter-option:hover {\n  background-color: var(--gp-grid-hover);\n}\n\n.gp-grid-filter-option input[type=\"checkbox\"] {\n  margin: 0;\n  cursor: pointer;\n}\n\n.gp-grid-filter-option span {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.gp-grid-filter-blank {\n  font-style: italic;\n  color: var(--gp-grid-text-muted);\n}\n\n/* Filter condition row (for number/date filters) */\n.gp-grid-filter-condition {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.gp-grid-filter-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.gp-grid-filter-row select {\n  height: 30px;\n  padding: 0 6px;\n  font-family: inherit;\n  font-size: 12px;\n  border: 1px solid var(--gp-grid-input-border);\n  border-radius: 4px;\n  background-color: var(--gp-grid-input-bg);\n  color: var(--gp-grid-text);\n  cursor: pointer;\n}\n\n.gp-grid-filter-row input[type=\"number\"],\n.gp-grid-filter-row input[type=\"date\"],\n.gp-grid-filter-row input[type=\"text\"],\n.gp-grid-filter-text-input {\n  flex: 1;\n  height: 30px;\n  padding: 0 8px;\n  font-family: inherit;\n  font-size: 12px;\n  border: 1px solid var(--gp-grid-input-border);\n  border-radius: 4px;\n  background-color: var(--gp-grid-input-bg);\n  color: var(--gp-grid-text);\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.gp-grid-filter-row input:focus {\n  outline: none;\n  border-color: var(--gp-grid-primary);\n}\n\n.gp-grid-filter-to {\n  font-size: 11px;\n  color: var(--gp-grid-text-secondary);\n}\n\n.gp-grid-filter-remove {\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  font-size: 16px;\n  line-height: 1;\n  border: none;\n  border-radius: 3px;\n  background-color: transparent;\n  color: var(--gp-grid-text-muted);\n  cursor: pointer;\n}\n\n.gp-grid-filter-remove:hover {\n  background-color: var(--gp-grid-error-bg);\n  color: var(--gp-grid-error-text);\n}\n\n/* AND/OR combination toggle */\n.gp-grid-filter-combination {\n  display: flex;\n  gap: 4px;\n  margin-bottom: 4px;\n}\n\n.gp-grid-filter-combination button {\n  flex: 1;\n  padding: 4px 8px;\n  font-size: 10px;\n  font-family: inherit;\n  border: 1px solid var(--gp-grid-input-border);\n  border-radius: 3px;\n  background-color: var(--gp-grid-bg);\n  color: var(--gp-grid-text-secondary);\n  cursor: pointer;\n}\n\n.gp-grid-filter-combination button.active {\n  background-color: var(--gp-grid-primary);\n  border-color: var(--gp-grid-primary);\n  color: #fff;\n}\n\n/* Add condition button */\n.gp-grid-filter-add {\n  width: 100%;\n  padding: 6px;\n  font-size: 11px;\n  font-family: inherit;\n  border: 1px dashed var(--gp-grid-border);\n  border-radius: 4px;\n  background-color: transparent;\n  color: var(--gp-grid-text-secondary);\n  cursor: pointer;\n}\n\n.gp-grid-filter-add:hover {\n  background-color: var(--gp-grid-hover);\n  border-color: var(--gp-grid-primary);\n  color: var(--gp-grid-primary);\n}\n\n/* Apply / Clear buttons */\n.gp-grid-filter-buttons {\n  display: flex;\n  gap: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--gp-grid-border-light);\n}\n\n.gp-grid-filter-btn-clear,\n.gp-grid-filter-btn-apply {\n  flex: 1;\n  padding: 8px 12px;\n  font-size: 12px;\n  font-family: inherit;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.gp-grid-filter-btn-clear {\n  border: 1px solid var(--gp-grid-input-border);\n  background-color: var(--gp-grid-bg);\n  color: var(--gp-grid-text);\n}\n\n.gp-grid-filter-btn-clear:hover {\n  background-color: var(--gp-grid-hover);\n}\n\n.gp-grid-filter-btn-apply {\n  border: 1px solid var(--gp-grid-primary);\n  background-color: var(--gp-grid-primary);\n  color: #fff;\n}\n\n.gp-grid-filter-btn-apply:hover {\n  opacity: 0.9;\n}\n";
+//#endregion
+//#region src/styles/index.d.ts
+/**
+ * Combined grid styles from all modules
+ */
+declare const gridStyles: string;
+/**
+ * Inject grid styles into the document head.
+ * This is called automatically when the Grid component mounts.
+ * Styles are only injected once, even if multiple Grid instances exist.
+ */
+declare function injectStyles(): void;
+//#endregion
+//#region src/utils/positioning.d.ts
+/**
+ * Calculate cumulative column positions (prefix sums)
+ * Returns an array where positions[i] is the left position of column i
+ * positions[columns.length] is the total width
+ */
+declare function calculateColumnPositions(columns: ColumnDefinition[]): number[];
+/**
+ * Get total width from column positions
+ */
+declare function getTotalWidth(columnPositions: number[]): number;
+/**
+ * Find column index at a given X coordinate
+ */
+declare function findColumnAtX(x: number, columnPositions: number[]): number;
+//#endregion
+//#region src/utils/classNames.d.ts
+/**
+ * Check if a cell is within the selection range
+ */
+declare function isCellSelected(row: number, col: number, selectionRange: CellRange | null): boolean;
+/**
+ * Check if a cell is the active cell
+ */
+declare function isCellActive(row: number, col: number, activeCell: CellPosition | null): boolean;
+/**
+ * Check if a row is within the visible range (not in overscan)
+ */
+declare function isRowVisible(row: number, visibleRowRange: {
+  start: number;
+  end: number;
+} | null): boolean;
+/**
+ * Check if a cell is being edited
+ */
+declare function isCellEditing(row: number, col: number, editingCell: {
+  row: number;
+  col: number;
+} | null): boolean;
+/**
+ * Check if a cell is in the fill preview range (vertical-only fill)
+ */
+declare function isCellInFillPreview(row: number, col: number, isDraggingFill: boolean, fillSourceRange: {
+  startRow: number;
+  startCol: number;
+  endRow: number;
+  endCol: number;
+} | null, fillTarget: {
+  row: number;
+  col: number;
+} | null): boolean;
+/**
+ * Build cell CSS classes based on state
+ */
+declare function buildCellClasses(isActive: boolean, isSelected: boolean, isEditing: boolean, inFillPreview: boolean): string;
+//#endregion
+//#region src/types/ui-state.d.ts
+interface SlotData {
+  slotId: string;
+  rowIndex: number;
+  rowData: Row;
+  translateY: number;
+}
+interface HeaderData {
+  column: ColumnDefinition;
+  sortDirection?: SortDirection;
+  sortIndex?: number;
+  sortable: boolean;
+  filterable: boolean;
+  hasFilter: boolean;
+}
+interface FilterPopupState {
+  isOpen: boolean;
+  colIndex: number;
+  column: ColumnDefinition | null;
+  anchorRect: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  } | null;
+  distinctValues: CellValue[];
+  currentFilter?: ColumnFilterModel;
+}
+interface GridState {
+  slots: Map<string, SlotData>;
+  activeCell: CellPosition | null;
+  selectionRange: CellRange | null;
+  editingCell: {
+    row: number;
+    col: number;
+    initialValue: CellValue;
+  } | null;
+  contentWidth: number;
+  contentHeight: number;
+  headers: Map<number, HeaderData>;
+  filterPopup: FilterPopupState | null;
+  isLoading: boolean;
+  error: string | null;
+  totalRows: number;
+  /** Visible row range (start inclusive, end inclusive). Used to prevent selection showing in overscan. */
+  visibleRowRange: {
+    start: number;
+    end: number;
+  } | null;
+}
+//#endregion
+export { type AssignSlotInstruction, type BatchInstructionListener, type CancelFillInstruction, type CellDataType, type CellPosition, type CellRange, type CellRendererParams, type CellValue, type CloseFilterPopupInstruction, type ColumnDefinition, type ColumnFilterModel, type CommitEditInstruction, type CommitFillInstruction, type ContainerBounds, type CreateSlotInstruction, type DataChangeListener, type DataErrorInstruction, type DataLoadedInstruction, type DataLoadingInstruction, type DataSource, type DataSourceRequest, type DataSourceResponse, type DateFilterCondition, type DateFilterOperator, type DestroySlotInstruction, type Direction, type DragMoveResult, type DragState, EditManager, type EditManagerOptions, type EditRendererParams, type EditState, type FillHandleState, FillManager, type FilterCombination, type FilterCondition, type FilterModel, type FilterPopupState, GridCore, type GridCoreOptions, type GridInstruction, type GridState, type HeaderData, type HeaderRendererParams, IndexedDataStore, type IndexedDataStoreOptions, InputHandler, type InputHandlerDeps, type InputResult, type InstructionListener, type KeyEventData, type KeyboardResult, type MoveSlotInstruction, type MutableClientDataSourceOptions, type MutableDataSource, type NumberFilterCondition, type NumberFilterOperator, type OpenFilterPopupInstruction, type PointerEventData, type Row, type RowId, type RowSortCache, type RowsAddedInstruction, type RowsRemovedInstruction, type RowsUpdatedInstruction, SelectionManager, type SelectionState, type SetActiveCellInstruction, type SetContentSizeInstruction, type SetSelectionRangeInstruction, type SlotData, type BatchInstructionListener$1 as SlotPoolBatchListener, SlotPoolManager, type SlotPoolManagerOptions, type SlotState, type SortDirection, type SortModel, SortWorkerManager, type StartEditInstruction, type StartFillInstruction, type StopEditInstruction, type TextFilterCondition, type TextFilterOperator, type Transaction, TransactionManager, type TransactionManagerOptions, type TransactionProcessedInstruction, type TransactionResult, type UpdateFillInstruction, type UpdateHeaderInstruction, buildCellClasses, calculateColumnPositions, cellStyles, compareValues, computeValueHash, containerStyles, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource, evaluateColumnFilter, evaluateDateCondition, evaluateNumberCondition, evaluateTextCondition, filtersStyles, findColumnAtX, getFieldValue, getSharedSortWorker, getTotalWidth, gridStyles, headerStyles, injectStyles, isCellActive, isCellEditing, isCellInFillPreview, isCellSelected, isRowVisible, isSameDay, rowPassesFilter, scrollbarStyles, setFieldValue, statesStyles, stringToSortableNumber, terminateSharedSortWorker, variablesStyles };