@gp-grid/angular 0.10.3

package/src/lib/gp-grid-view-model.ts

@@ -0,0 +1,148 @@
+import { Signal, computed, signal } from '@angular/core';
+import {
+  calculateFillHandlePosition,
+  calculateScaledColumnPositions,
+  getTotalWidth,
+} from '@gp-grid/core';
+import type {
+  BatchChangeSetters,
+  CellPosition,
+  CellRange,
+  ColumnDefinition,
+  DragState,
+  FillHandlePosition,
+  FilterPopupState,
+  HeaderData,
+  SlotData,
+  VisibleColumnInfo,
+} from '@gp-grid/core';
+import type { ActiveFilterPopup, EditingCellState } from './components';
+import type { AngularColumnDefinition } from './types';
+
+export interface GpGridViewModelDeps {
+  getColumns: () => AngularColumnDefinition[];
+  getRows: () => unknown[];
+  getRowHeight: () => number;
+}
+
+const INITIAL_DRAG_STATE: DragState = {
+  isDragging: false,
+  dragType: null,
+  fillSourceRange: null,
+  fillTarget: null,
+  columnResize: null,
+  columnMove: null,
+  rowDrag: null,
+};
+
+/**
+ * Reactive view-state container for GpGridComponent.
+ *
+ * Owns every signal and computed the template binds against, plus the
+ * batch-change setters bag wired into those signals. The component
+ * becomes a thin shell that holds lifecycle, event handlers, and inputs.
+ *
+ * Angular-specific (uses signal/computed from @angular/core) — lives in
+ * the angular package, not core.
+ */
+export class GpGridViewModel {
+  readonly headerState = signal<Map<number, HeaderData>>(new Map());
+  readonly viewportWidth = signal<number>(0);
+  readonly scrollLeft = signal<number>(0);
+  readonly isLoading = signal<boolean>(false);
+  readonly errorMessage = signal<string | null>(null);
+  readonly filterPopup = signal<ActiveFilterPopup | null>(null);
+  readonly pendingScrollTop = signal<number | null>(null);
+  readonly activeCell = signal<CellPosition | null>(null);
+  readonly selectionRange = signal<CellRange | null>(null);
+  readonly editingCell = signal<EditingCellState | null>(null);
+  readonly hoverPosition = signal<CellPosition | null>(null);
+  readonly columnsOverride = signal<ColumnDefinition[] | null>(null);
+  readonly dragState = signal<DragState>(INITIAL_DRAG_STATE);
+  readonly contentWidth = signal<number>(0);
+  readonly contentHeight = signal<number>(0);
+  readonly rowsWrapperOffset = signal<number>(0);
+  readonly slots = signal<Map<string, SlotData>>(new Map());
+
+  readonly effectiveColumns: Signal<ColumnDefinition[]>;
+  readonly visibleColumnWithIndices: Signal<VisibleColumnInfo[]>;
+  readonly columnPositions: Signal<number[]>;
+  readonly columnWidths: Signal<number[]>;
+  readonly totalWidth: Signal<number>;
+  readonly fillHandlePosition: Signal<FillHandlePosition | null>;
+  readonly slotsArray: Signal<SlotData[]>;
+  readonly totalRows: Signal<number>;
+
+  readonly batchSetters: BatchChangeSetters;
+
+  private filterAnchorEl: HTMLElement | null = null;
+
+  constructor(deps: GpGridViewModelDeps) {
+    this.effectiveColumns = computed(() =>
+      this.columnsOverride() ?? (deps.getColumns() as unknown as ColumnDefinition[])
+    );
+    this.visibleColumnWithIndices = computed(() =>
+      this.effectiveColumns()
+        .map((col, index) => ({ column: col, originalIndex: index }))
+        .filter(({ column }) => !column.hidden)
+    );
+    const columnLayout = computed(() =>
+      calculateScaledColumnPositions(
+        this.visibleColumnWithIndices().map(v => v.column),
+        this.viewportWidth(),
+      )
+    );
+    this.columnPositions = computed(() => columnLayout().positions);
+    this.columnWidths = computed(() => columnLayout().widths);
+    this.totalWidth = computed(() => getTotalWidth(this.columnPositions()));
+    this.fillHandlePosition = computed(() =>
+      calculateFillHandlePosition({
+        activeCell: this.activeCell(),
+        selectionRange: this.selectionRange(),
+        slots: this.slots(),
+        columns: this.effectiveColumns(),
+        visibleColumnsWithIndices: this.visibleColumnWithIndices(),
+        columnPositions: this.columnPositions(),
+        columnWidths: this.columnWidths(),
+        rowHeight: deps.getRowHeight(),
+      })
+    );
+    this.slotsArray = computed(() => [...this.slots().values()]);
+    this.totalRows = computed(() => deps.getRows().length);
+
+    this.batchSetters = {
+      setContentWidth: (v) => this.contentWidth.set(v),
+      setContentHeight: (v) => this.contentHeight.set(v),
+      setRowsWrapperOffset: (v) => this.rowsWrapperOffset.set(v),
+      setIsLoading: (v) => this.isLoading.set(v),
+      setErrorMessage: (v) => this.errorMessage.set(v),
+      setPendingScrollTop: (v) => this.pendingScrollTop.set(v),
+      setActiveCell: (v) => this.activeCell.set(v),
+      setSelectionRange: (v) => this.selectionRange.set(v),
+      setEditingCell: (v) => this.editingCell.set(v),
+      setHoverPosition: (v) => this.hoverPosition.set(v),
+      setColumnsOverride: (v) => this.columnsOverride.set(v),
+      onFilterPopupChange: (v) => this.materializeFilterPopup(v),
+    };
+  }
+
+  setFilterAnchor(el: HTMLElement | null): void {
+    this.filterAnchorEl = el;
+  }
+
+  private materializeFilterPopup(state: FilterPopupState | null): void {
+    if (state === null) {
+      this.filterPopup.set(null);
+      return;
+    }
+    if (state.isOpen && state.column) {
+      this.filterPopup.set({
+        colIndex: state.colIndex,
+        column: state.column,
+        distinctValues: state.distinctValues,
+        currentFilter: state.currentFilter,
+        anchorEl: this.filterAnchorEl,
+      });
+    }
+  }
+}

package/src/lib/gp-grid.component.ts

@@ -0,0 +1,279 @@
+import {
+  Component,
+  ElementRef,
+  OnInit,
+  AfterViewInit,
+  OnDestroy,
+  ViewChild,
+  ChangeDetectionStrategy,
+  PLATFORM_ID,
+  inject,
+  input,
+  output,
+  effect,
+} from '@angular/core';
+import type { CellRendererTemplate, EditRendererTemplate, HeaderRendererTemplate, HeaderSortEvent } from './components';
+import type { AngularColumnDefinition } from './types';
+import { isPlatformBrowser } from '@angular/common';
+import type {
+  CellValueChangedEvent,
+  ColumnDefinition,
+  ColumnFilterModel,
+  DataSource,
+  HighlightingOptions,
+  RowId,
+} from '@gp-grid/core';
+import {
+  GridHeaderComponent,
+  GridBodyComponent,
+  GridOverlaysComponent,
+} from './components';
+import type {
+  HeaderPointerDownEvent,
+  FilterPointerDownEvent,
+  ResizePointerDownEvent,
+  CellPointerDownEvent,
+  CellPointerEnterEvent,
+  CellDoubleClickEvent,
+  FillHandlePointerDownEvent,
+} from './components';
+import { GP_GRID_TEMPLATE } from './gp-grid.template';
+import { GpGridViewModel } from './gp-grid-view-model';
+import { GpGridBindings } from './gp-grid-bindings';
+import { buildGridCore } from './gp-grid.factory';
+
+@Component({
+  selector: 'gp-grid',
+  standalone: true,
+  imports: [GridHeaderComponent, GridBodyComponent, GridOverlaysComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [`:host { display: block; height: 100%; min-height: 0; }`],
+  template: GP_GRID_TEMPLATE,
+})
+export class GpGridComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild('container', { static: true }) container!: ElementRef<HTMLDivElement>;
+  @ViewChild(GridBodyComponent) body!: GridBodyComponent;
+
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+
+  columns = input.required<AngularColumnDefinition[]>();
+  rows = input<unknown[]>([]);
+  dataSource = input<DataSource<unknown> | null>(null);
+  getRowId = input<((row: unknown) => RowId) | null>(null);
+  rowHeight = input<number>(32);
+  headerHeight = input<number>(32);
+  darkMode = input<boolean>(false);
+  cellRenderers = input<Record<string, CellRendererTemplate>>({});
+  headerRenderers = input<Record<string, HeaderRendererTemplate>>({});
+  editRenderers = input<Record<string, EditRendererTemplate>>({});
+  cellRenderer = input<CellRendererTemplate | null>(null);
+  headerRenderer = input<HeaderRendererTemplate | null>(null);
+  editRenderer = input<EditRendererTemplate | null>(null);
+  highlighting = input<HighlightingOptions | null>(null);
+  rowDragEntireRow = input<boolean>(false);
+  overscan = input<number>(3);
+  sortingEnabled = input<boolean>(true);
+  wheelDampening = input<number>(0.1);
+  onRowDragEnd = output<{ source: number; target: number }>();
+  onCellValueChanged = output<CellValueChangedEvent<unknown>>();
+  onColumnResized = output<{ colIndex: number; newWidth: number }>();
+  onColumnMoved = output<{ fromIndex: number; toIndex: number }>();
+
+  protected readonly vm = new GpGridViewModel({
+    getColumns: () => this.columns(),
+    getRows: () => this.rows(),
+    getRowHeight: () => this.rowHeight(),
+  });
+
+  private readonly bindings = new GpGridBindings<unknown>({
+    vm: this.vm,
+    isBrowser: this.isBrowser,
+    getContainer: () => this.container?.nativeElement ?? null,
+    getBody: () => this.body?.scrollContainer?.nativeElement ?? null,
+    getRowHeight: () => this.rowHeight(),
+    getHeaderHeight: () => this.headerHeight(),
+  });
+
+  constructor() {
+    effect(() => this.bindings.applyPendingScroll());
+    effect(() => this.bindings.syncHighlighting(this.highlighting()));
+    effect(() => this.bindings.syncColumns(this.columns() as unknown as ColumnDefinition[]));
+    effect(() => this.bindings.syncRows(this.rows(), this.dataSource()));
+  }
+
+  ngOnInit(): void {
+    const core = buildGridCore<unknown>(
+      {
+        columns: this.columns() as unknown as ColumnDefinition[],
+        dataSource: this.bindings.dataSourceOwner.initialize(this.dataSource(), this.rows()),
+        rowHeight: this.rowHeight(),
+        headerHeight: this.headerHeight(),
+        overscan: this.overscan(),
+        sortingEnabled: this.sortingEnabled(),
+        highlighting: (this.highlighting() ?? undefined) as HighlightingOptions<unknown> | undefined,
+        getRowId: this.getRowId() ?? undefined,
+        rowDragEntireRow: this.rowDragEntireRow(),
+      },
+      {
+        onRowDragEnd: (source, target) => this.onRowDragEnd.emit({ source, target }),
+        onCellValueChanged: (event) => this.onCellValueChanged.emit(event),
+        onColumnResized: (colIndex, newWidth) => this.onColumnResized.emit({ colIndex, newWidth }),
+        onColumnMoved: (fromIndex, toIndex) => this.onColumnMoved.emit({ fromIndex, toIndex }),
+      },
+    );
+    this.bindings.attach(core);
+  }
+
+  ngAfterViewInit(): void {
+    if (this.isBrowser === false) return;
+    this.bindings.observeViewport(
+      this.container.nativeElement,
+      this.body.scrollContainer.nativeElement,
+    );
+    document.addEventListener('pointermove', this.onDocumentPointerMove, { passive: false });
+    document.addEventListener('pointerup', this.onDocumentPointerUp);
+  }
+
+  ngOnDestroy(): void {
+    this.bindings.destroy();
+    if (this.isBrowser) {
+      document.removeEventListener('pointermove', this.onDocumentPointerMove);
+      document.removeEventListener('pointerup', this.onDocumentPointerUp);
+    }
+  }
+
+  protected onBodyScroll(scrollLeft: number): void {
+    this.vm.scrollLeft.set(scrollLeft);
+    const el = this.body.scrollContainer.nativeElement;
+    this.bindings.coreRef?.setViewport(el.scrollTop, scrollLeft, el.clientWidth, el.clientHeight);
+  }
+
+  protected onHeaderPointerDown(evt: HeaderPointerDownEvent): void {
+    if (this.bindings.input.headerPointerDown(evt.colIndex, evt.colWidth, evt.colHeight, evt.event)) {
+      evt.event.preventDefault();
+    }
+  }
+
+  protected onFilterPointerDown(evt: FilterPointerDownEvent): void {
+    this.vm.setFilterAnchor(evt.anchorEl);
+    const rect = evt.anchorEl.getBoundingClientRect();
+    this.bindings.coreRef?.openFilterPopup(evt.colIndex, {
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height,
+    });
+  }
+
+  protected onCellPointerDown(evt: CellPointerDownEvent): void {
+    const action = this.bindings.input.cellPointerDown(evt.rowIndex, evt.colIndex, evt.event);
+    if (action.preventDefault) evt.event.preventDefault();
+    if (action.focusContainer) {
+      this.container.nativeElement.focus({ preventScroll: true });
+    }
+  }
+
+  protected onCellPointerEnter(evt: CellPointerEnterEvent): void {
+    this.bindings.input.cellPointerEnter(evt.rowIndex, evt.colIndex);
+  }
+
+  protected onFillHandlePointerDown(evt: FillHandlePointerDownEvent): void {
+    const action = this.bindings.input.fillHandlePointerDown(
+      this.vm.activeCell(),
+      this.vm.selectionRange(),
+      evt.event,
+    );
+    if (action.preventDefault) evt.event.preventDefault();
+    if (action.stopPropagation) evt.event.stopPropagation();
+  }
+
+  protected onCellPointerLeave(): void {
+    this.bindings.input.cellPointerLeave();
+  }
+
+  protected computeRowClassesFn = (rowIndex: number, rowData: unknown): string[] => {
+    return this.bindings.coreRef?.highlight?.computeRowClasses(rowIndex, rowData) ?? [];
+  };
+
+  protected computeCellClassesFn = (
+    rowIndex: number,
+    colIndex: number,
+    column: ColumnDefinition,
+    rowData: unknown,
+  ): string[] => {
+    return this.bindings.coreRef?.highlight?.computeCombinedCellClasses(
+      rowIndex,
+      colIndex,
+      column,
+      rowData,
+    ) ?? [];
+  };
+
+  protected onCellDoubleClick(evt: CellDoubleClickEvent): void {
+    this.bindings.coreRef?.startEdit(evt.rowIndex, evt.colIndex);
+  }
+
+  protected onEditValueChange(value: string): void {
+    this.bindings.coreRef?.updateEditValue(value);
+  }
+
+  protected onEditCommit(): void {
+    this.bindings.coreRef?.commitEdit();
+  }
+
+  protected onEditCancel(): void {
+    this.bindings.coreRef?.cancelEdit();
+  }
+
+  protected onHeaderSort(evt: HeaderSortEvent): void {
+    this.bindings.coreRef?.setSort(evt.colId, evt.direction, evt.addToExisting);
+  }
+
+  protected onWheel(event: WheelEvent): void {
+    const bodyEl = this.body?.scrollContainer?.nativeElement;
+    if (!bodyEl) return;
+    const dampened = this.bindings.input.wheel(event.deltaY, event.deltaX, this.wheelDampening());
+    if (dampened) {
+      event.preventDefault();
+      bodyEl.scrollTop += dampened.dy;
+      bodyEl.scrollLeft += dampened.dx;
+    }
+  }
+
+  protected onKeyDown(event: KeyboardEvent): void {
+    const editing = this.vm.editingCell();
+    const result = this.bindings.input.keyDown(
+      event,
+      this.vm.activeCell(),
+      editing === null ? null : { row: editing.row, col: editing.col },
+      this.vm.filterPopup() !== null,
+    );
+    if (result.preventDefault) event.preventDefault();
+    if (result.scrollToCell) this.bindings.scrollToRow(result.scrollToCell.row);
+  }
+
+  protected onResizePointerDown(evt: ResizePointerDownEvent): void {
+    if (this.bindings.input.resizePointerDown(evt.colIndex, evt.colWidth, evt.event)) {
+      evt.event.preventDefault();
+    }
+  }
+
+  protected onFilterApply(event: { colId: string; filter: ColumnFilterModel | null }): void {
+    this.bindings.coreRef?.setFilter(event.colId, event.filter);
+    this.vm.filterPopup.set(null);
+  }
+
+  protected onFilterClose(): void {
+    this.bindings.coreRef?.closeFilterPopup();
+    this.vm.filterPopup.set(null);
+  }
+
+  private onDocumentPointerMove = (event: PointerEvent): void => {
+    if (this.bindings.input.documentPointerMove(event)) event.preventDefault();
+  };
+
+  private onDocumentPointerUp = (_event: PointerEvent): void => {
+    const { wasRowDrag } = this.bindings.input.documentPointerUp();
+    if (wasRowDrag) this.bindings.pendingRowDrag.releaseLocks();
+  };
+}

package/src/lib/gp-grid.factory.ts

@@ -0,0 +1,52 @@
+import { GridCore } from '@gp-grid/core';
+import type {
+  CellValueChangedEvent,
+  ColumnDefinition,
+  DataSource,
+  HighlightingOptions,
+  RowId,
+} from '@gp-grid/core';
+
+export interface BuildGridCoreInputs<TData> {
+  columns: ColumnDefinition[];
+  dataSource: DataSource<TData>;
+  rowHeight: number;
+  headerHeight: number;
+  overscan: number;
+  sortingEnabled: boolean;
+  highlighting: HighlightingOptions<TData> | undefined;
+  getRowId: ((row: TData) => RowId) | undefined;
+  rowDragEntireRow: boolean;
+}
+
+export interface BuildGridCoreEmitters<TData> {
+  onRowDragEnd: (source: number, target: number) => void;
+  onCellValueChanged: (event: CellValueChangedEvent<TData>) => void;
+  onColumnResized: (colIndex: number, newWidth: number) => void;
+  onColumnMoved: (fromIndex: number, toIndex: number) => void;
+}
+
+export const buildGridCore = <TData>(
+  inputs: BuildGridCoreInputs<TData>,
+  emitters: BuildGridCoreEmitters<TData>,
+): GridCore<TData> => {
+  const cellValueChanged = inputs.getRowId === undefined
+    ? undefined
+    : emitters.onCellValueChanged;
+
+  return new GridCore<TData>({
+    columns: inputs.columns,
+    dataSource: inputs.dataSource,
+    rowHeight: inputs.rowHeight,
+    headerHeight: inputs.headerHeight,
+    overscan: inputs.overscan,
+    sortingEnabled: inputs.sortingEnabled,
+    highlighting: inputs.highlighting,
+    getRowId: inputs.getRowId,
+    rowDragEntireRow: inputs.rowDragEntireRow,
+    onRowDragEnd: emitters.onRowDragEnd,
+    onCellValueChanged: cellValueChanged,
+    onColumnResized: emitters.onColumnResized,
+    onColumnMoved: emitters.onColumnMoved,
+  });
+};

package/src/lib/gp-grid.template.ts

@@ -0,0 +1,77 @@
+export const GP_GRID_TEMPLATE = `
+    <div #container
+      [class]="'gp-grid-container' + (darkMode() ? ' gp-grid-container--dark' : '')"
+      style="width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; outline: none;"
+      tabindex="0"
+      (keydown)="onKeyDown($event)"
+      (wheel)="onWheel($event)"
+    >
+      <gp-grid-header
+        [headerHeight]="headerHeight()"
+        [scrollLeft]="vm.scrollLeft()"
+        [contentWidth]="vm.contentWidth()"
+        [totalWidth]="vm.totalWidth()"
+        [isLoading]="vm.isLoading()"
+        [visibleColumnsWithIndices]="vm.visibleColumnWithIndices()"
+        [columnPositions]="vm.columnPositions()"
+        [columnWidths]="vm.columnWidths()"
+        [headers]="vm.headerState()"
+        [sortingEnabled]="sortingEnabled()"
+        [headerRenderers]="headerRenderers()"
+        [globalHeaderRenderer]="headerRenderer()"
+        (headerPointerDown)="onHeaderPointerDown($event)"
+        (filterPointerDown)="onFilterPointerDown($event)"
+        (resizePointerDown)="onResizePointerDown($event)"
+        (headerSort)="onHeaderSort($event)"
+      />
+      <gp-grid-body
+        [rowHeight]="rowHeight()"
+        [totalHeaderHeight]="headerHeight()"
+        [contentWidth]="vm.contentWidth()"
+        [contentHeight]="vm.contentHeight()"
+        [totalWidth]="vm.totalWidth()"
+        [rowsWrapperOffset]="vm.rowsWrapperOffset()"
+        [slotsArray]="vm.slotsArray()"
+        [visibleColumnWithIndices]="vm.visibleColumnWithIndices()"
+        [columnPositions]="vm.columnPositions()"
+        [columnWidths]="vm.columnWidths()"
+        [totalRows]="vm.totalRows()"
+        [activeCell]="vm.activeCell()"
+        [selectionRange]="vm.selectionRange()"
+        [editingCell]="vm.editingCell()"
+        [cellRenderers]="cellRenderers()"
+        [globalCellRenderer]="cellRenderer()"
+        [editRenderers]="editRenderers()"
+        [globalEditRenderer]="editRenderer()"
+        [hoverPosition]="vm.hoverPosition()"
+        [computeRowClasses]="computeRowClassesFn"
+        [computeCellClasses]="computeCellClassesFn"
+        [fillHandlePosition]="vm.fillHandlePosition()"
+        [dragState]="vm.dragState()"
+        (scrolled)="onBodyScroll($event)"
+        (cellPointerDown)="onCellPointerDown($event)"
+        (cellPointerEnter)="onCellPointerEnter($event)"
+        (cellPointerLeave)="onCellPointerLeave()"
+        (cellDoubleClick)="onCellDoubleClick($event)"
+        (editValueChange)="onEditValueChange($event)"
+        (editCommit)="onEditCommit()"
+        (editCancel)="onEditCancel()"
+        (fillHandlePointerDown)="onFillHandlePointerDown($event)"
+      />
+      <gp-grid-overlays
+        [filterPopup]="vm.filterPopup()"
+        [isLoading]="vm.isLoading()"
+        [errorMessage]="vm.errorMessage()"
+        [headerHeight]="headerHeight()"
+        [rowHeight]="rowHeight()"
+        [dragState]="vm.dragState()"
+        [visibleColumnWithIndices]="vm.visibleColumnWithIndices()"
+        [columnPositions]="vm.columnPositions()"
+        [scrollLeft]="vm.scrollLeft()"
+        [effectiveColumns]="vm.effectiveColumns()"
+        [totalWidth]="vm.totalWidth()"
+        (filterApply)="onFilterApply($event)"
+        (filterClose)="onFilterClose()"
+      />
+    </div>
+  `;

package/src/lib/types.ts

@@ -0,0 +1,28 @@
+import type { TemplateRef } from '@angular/core';
+import type {
+  ColumnDefinition,
+  CellRendererParams,
+  EditRendererParams,
+  HeaderRendererParams,
+} from '@gp-grid/core';
+
+/**
+ * Column definition extended for Angular — allows `cellRenderer`,
+ * `editRenderer`, and `headerRenderer` to be passed directly as
+ * `TemplateRef` references in addition to the core's string-key / function
+ * forms.
+ */
+export interface AngularColumnDefinition extends Omit<ColumnDefinition, 'cellRenderer' | 'editRenderer' | 'headerRenderer'> {
+  cellRenderer?:
+    | string
+    | TemplateRef<{ $implicit: CellRendererParams }>
+    | ((params: CellRendererParams) => unknown);
+  editRenderer?:
+    | string
+    | TemplateRef<{ $implicit: EditRendererParams }>
+    | ((params: EditRendererParams) => unknown);
+  headerRenderer?:
+    | string
+    | TemplateRef<{ $implicit: HeaderRendererParams }>
+    | ((params: HeaderRendererParams) => unknown);
+}

package/src/public-api.ts

@@ -0,0 +1,57 @@
+export * from './lib/gp-grid.component';
+export * from './lib/components';
+export * from './lib/types';
+export * from './lib/createGridData';
+
+// Re-export core types for convenience
+export type {
+  // Basic types
+  CellDataType,
+  CellValue,
+  SortDirection,
+  SortModel,
+  FilterModel,
+  FilterCondition,
+  ColumnFilterModel,
+
+  // Column definition
+  ColumnDefinition,
+
+  // Row ID
+  RowId,
+
+  // Cell position & range
+  CellPosition,
+  CellRange,
+
+  // Events
+  CellValueChangedEvent,
+
+  // DataSource
+  DataSource,
+  DataSourceRequest,
+  DataSourceResponse,
+
+  // Renderer params
+  CellRendererParams,
+  EditRendererParams,
+  HeaderRendererParams,
+
+  // Highlighting
+  HighlightingOptions,
+  HighlightContext,
+
+  // Instructions (for advanced use cases)
+  GridInstruction,
+} from '@gp-grid/core';
+
+// Re-export data source factories
+export {
+  createClientDataSource,
+  createServerDataSource,
+  createDataSourceFromArray,
+  createMutableClientDataSource,
+} from '@gp-grid/core';
+
+export type { MutableDataSource } from '@gp-grid/core';
+export { GridCore } from '@gp-grid/core';

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "paths": {
+      "@gp-grid/core": ["../core/src"]
+    }
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "node",
+    "ignoreDeprecations": "6.0",
+    "declaration": true,
+    "strict": true,
+    "lib": [
+      "ES2022",
+      "dom"
+    ],
+    "outDir": "../../dist/angular",
+    "paths": {
+      "@gp-grid/core": ["../core/src"]
+    }
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}