@ornery/ui-grid-react 0.1.5 → 0.1.6

package/src/ui-grid.css

@@ -20,6 +20,17 @@
   --ui-grid-status-enterprise-color: var(--app-ui-grid-status-enterprise-color, #115e59);
   --ui-grid-status-pilot-bg: var(--app-ui-grid-status-pilot-bg, rgba(234, 88, 12, 0.14));
   --ui-grid-status-pilot-color: var(--app-ui-grid-status-pilot-color, #c2410c);
+  --ui-grid-pin-menu-open-z-index: var(--app-ui-grid-pin-menu-open-z-index, 8);
+  --ui-grid-pin-menu-z-index: var(--app-ui-grid-pin-menu-z-index, 20);
+  --ui-grid-pin-menu-gap: var(--app-ui-grid-pin-menu-gap, 0.25rem);
+  --ui-grid-pin-menu-padding: var(--app-ui-grid-pin-menu-padding, 0.25rem);
+  --ui-grid-pin-menu-radius: var(--app-ui-grid-pin-menu-radius, 999px);
+  --ui-grid-pin-menu-shadow: var(--app-ui-grid-pin-menu-shadow, 0 10px 24px color-mix(in srgb, var(--ui-grid-cell-color) 10%, transparent));
+  --ui-grid-pin-menu-action-size: var(--app-ui-grid-pin-menu-action-size, 1.75rem);
+  --ui-grid-pin-control-collapsed-size: var(--app-ui-grid-pin-control-collapsed-size, 1px);
+  --ui-grid-pin-control-transition-duration: var(--app-ui-grid-pin-control-transition-duration, 160ms);
+  --ui-grid-pin-control-transition-easing: var(--app-ui-grid-pin-control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1));
+  --ui-grid-pin-menu-scale-closed: var(--app-ui-grid-pin-menu-scale-closed, 0.72);
   display: block;
   color: var(--ui-grid-cell-color);
 }
@@ -39,12 +50,18 @@
 .grid-hero {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 1.5rem;
-  align-items: end;
+  align-items: flex-start;
   padding: 1rem 0;
   color: var(--ui-grid-cell-color);
 }
 
+.grid-hero > :first-child {
+  flex: 1 1 28rem;
+  min-width: min(100%, 20rem);
+}
+
 .ui-grid-host .eyebrow {
   margin: 0 0 0.5rem;
   text-transform: uppercase;
@@ -70,6 +87,9 @@
   gap: 1rem;
   align-items: center;
   flex-wrap: wrap;
+  flex: 0 1 auto;
+  margin-left: auto;
+  justify-content: flex-end;
 }
 
 .action {
@@ -168,6 +188,22 @@
 .filter-grid,
 .body-grid {
   display: grid;
+  width: max-content;
+  min-width: 100%;
+}
+
+.header-grid,
+.filter-grid {
+  position: sticky;
+  z-index: 3;
+}
+
+.header-grid {
+  top: 0;
+}
+
+.filter-grid {
+  top: var(--ui-grid-header-sticky-top, 0px);
 }
 
 .header-cell,
@@ -192,8 +228,18 @@
   background: color-mix(in srgb, var(--ui-grid-accent) 8%, var(--ui-grid-header-background));
 }
 
+.header-cell.is-pin-menu-open {
+  z-index: var(--ui-grid-pin-menu-open-z-index);
+}
+
 .header-label {
   min-width: 0;
+  display: block;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+  hyphens: none;
 }
 
 .header-actions {
@@ -201,6 +247,8 @@
   align-items: center;
   gap: 0.4rem;
   justify-self: end;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
 }
 
 .header-action,
@@ -250,14 +298,115 @@
   color: var(--ui-grid-accent);
 }
 
+.pin-control {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  justify-items: center;
+  min-width: 2rem;
+  overflow: hidden;
+}
+
+.pin-trigger {
+  grid-area: 1 / 1;
+  transform-origin: center;
+  transition:
+    width var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),
+    height var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),
+    opacity var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),
+    transform var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),
+    border-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),
+    background-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),
+    color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing);
+}
+
+.pin-menu {
+  grid-area: 1 / 1;
+  z-index: var(--ui-grid-pin-menu-z-index);
+  display: grid;
+  grid-auto-rows: var(--ui-grid-pin-menu-action-size);
+  gap: var(--ui-grid-pin-menu-gap);
+  padding: var(--ui-grid-pin-menu-padding);
+  border: 1px solid var(--ui-grid-border-color);
+  border-radius: var(--ui-grid-pin-menu-radius);
+  background: var(--ui-grid-surface);
+  box-shadow: var(--ui-grid-pin-menu-shadow);
+  justify-items: center;
+  align-items: center;
+  width: 2rem;
+  max-height: var(--ui-grid-pin-control-collapsed-size);
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(var(--ui-grid-pin-menu-scale-closed));
+  transform-origin: center;
+  transition:
+    max-height var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),
+    opacity var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),
+    transform var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),
+    padding var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),
+    border-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),
+    box-shadow var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing);
+}
+
+.pin-control-open {
+  align-items: start;
+}
+
+.pin-control-open .pin-trigger {
+  width: var(--ui-grid-pin-control-collapsed-size);
+  height: var(--ui-grid-pin-control-collapsed-size);
+  opacity: 0;
+  transform: scale(0.72);
+  pointer-events: none;
+}
+
+.pin-control-open .pin-menu {
+  max-height: calc((var(--ui-grid-pin-menu-action-size) * 2) + var(--ui-grid-pin-menu-gap) + (var(--ui-grid-pin-menu-padding) * 2));
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+.pin-menu-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-grid-pin-menu-action-size);
+  height: var(--ui-grid-pin-menu-action-size);
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ui-grid-cell-color);
+  cursor: pointer;
+}
+
+.pin-menu-action:hover,
+.pin-menu-action:focus-visible {
+  outline: 0;
+  background: color-mix(in srgb, var(--ui-grid-accent) 12%, var(--ui-grid-surface));
+  color: var(--ui-grid-accent);
+}
+
+.pin-menu-action svg {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
+
 .filter-cell {
   padding: 0.75rem 1rem 1rem;
   border-bottom: 1px solid var(--ui-grid-border-color);
   background: var(--ui-grid-header-background);
+  overflow: hidden;
 }
 
 .filter-cell input {
+  display: block;
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
   border: 1px solid var(--ui-grid-border-color);
   border-radius: var(--ui-grid-radius);
   background: var(--ui-grid-surface);
@@ -390,6 +539,17 @@
   width: 100%;
 }
 
+.grid-virtual-spacer {
+  position: relative;
+  width: max-content;
+  min-width: 100%;
+}
+
+.grid-virtual-body {
+  position: absolute;
+  left: 0;
+}
+
 .body-cell.align-center {
   text-align: center;
 }

package/src/useGridState.ts

@@ -88,19 +88,10 @@ import {
   FEATURE_AUTO_RESIZE,
   FEATURE_SAVE_STATE,
   FEATURE_PINNING,
-} from '@ornery/ui-grid';
-import type {
-  DisplayItem,
-  GroupItem,
-  ExpandableItem,
-  RowItem,
-  PipelineResult,
-  GridInfiniteScrollState,
-  GridMoveDirection,
-  GridCellTemplateContext,
-  GridExpandableTemplateContext,
-} from '@ornery/ui-grid';
-import {
+  buildInitialPinnedState,
+  computePinnedOffset,
+  isColumnPinnable,
+  isPinningEnabled,
   applyGridSortStateCommand,
   updateGridFilterCommand,
   clearGridFiltersCommand,
@@ -127,16 +118,6 @@ import {
   setGridInfiniteScrollDirectionsCommand,
   restoreGridStateCommand,
   pinGridColumnCommand,
-} from '../../ui-grid/src/lib/grid/ui-grid.commands';
-import {
-  buildInitialPinnedState,
-  computePinnedOffset,
-  isColumnPinnable,
-  isPinningEnabled,
-  PinDirection,
-  PinnedColumnState,
-} from '../../ui-grid/src/lib/grid/grid.core';
-import {
   raiseGridRenderingComplete,
   raiseGridRowsRendered,
   raiseGridRowsVisibleChanged,
@@ -145,8 +126,22 @@ import {
   raiseGridScrollBegin,
   raiseGridScrollEnd,
   raiseGridBenchmarkComplete,
-} from '../../ui-grid/src/lib/grid/ui-grid.events';
-import { downloadGridCsvFile, observeGridHostSize } from '../../ui-grid/src/lib/grid/ui-grid.host';
+  downloadGridCsvFile,
+  observeGridHostSize,
+} from '@ornery/ui-grid';
+import type {
+  DisplayItem,
+  GroupItem,
+  ExpandableItem,
+  RowItem,
+  PipelineResult,
+  GridInfiniteScrollState,
+  GridMoveDirection,
+  GridCellTemplateContext,
+  GridExpandableTemplateContext,
+  PinDirection,
+  PinnedColumnState,
+} from '@ornery/ui-grid';
 
 function escapeCssSelectorValue(value: string): string {
   const nativeEscape = globalThis.CSS?.escape;
@@ -398,8 +393,25 @@ export function useGridState(
   const rowSize = options.rowHeight ?? 44;
 
   const visibleColumns = useMemo(() => {
-    return orderVisibleColumns(options.columnDefs, columnOrder);
-  }, [options.columnDefs, columnOrder]);
+    const orderedColumns = orderVisibleColumns(options.columnDefs, columnOrder);
+    const pinnedEntries = Object.entries(pinnedColumns);
+    if (pinnedEntries.length === 0) {
+      return orderedColumns;
+    }
+
+    const columnByName = new Map(orderedColumns.map((column) => [column.name, column]));
+    const pinnedLeft = pinnedEntries
+      .filter(([, direction]) => direction === 'left')
+      .map(([columnName]) => columnByName.get(columnName))
+      .filter((column): column is GridColumnDef => column !== undefined);
+    const pinnedRight = pinnedEntries
+      .filter(([, direction]) => direction === 'right')
+      .map(([columnName]) => columnByName.get(columnName))
+      .filter((column): column is GridColumnDef => column !== undefined);
+    const centerColumns = orderedColumns.filter((column) => pinnedColumns[column.name] === undefined);
+
+    return [...pinnedLeft, ...centerColumns, ...pinnedRight];
+  }, [options.columnDefs, columnOrder, pinnedColumns]);
 
   const visibleColumnsRef = useRef(visibleColumns);
   visibleColumnsRef.current = visibleColumns;

package/src/useVirtualScroll.ts

@@ -13,6 +13,7 @@ export interface UseVirtualScrollResult {
   totalHeight: number;
   offsetY: number;
   onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
+  setScrollTop: (scrollTop: number) => void;
   viewportRef: React.RefObject<HTMLDivElement | null>;
   scrollTop: number;
 }
@@ -39,6 +40,7 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
     totalHeight: virtualWindow.totalHeight,
     offsetY: virtualWindow.offsetY,
     onScroll,
+    setScrollTop,
     viewportRef,
     scrollTop,
   };

package/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "paths": {}
+  }
+}

package/tsconfig.dts.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "paths": {
+      "@ornery/ui-grid": ["../../dist/ui-grid"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
+}

package/CLAUDE.md

@@ -1,283 +0,0 @@
-# @ornery/ui-grid-react — React Wrapper
-
-## What to build
-
-A React wrapper for the `@ornery/ui-grid` Angular library's pure-TypeScript core. This package publishes as `@ornery/ui-grid-react` and reuses 100% of the core logic — no code duplication. The React wrapper is a thin rendering layer.
-
-## Critical: Core reuse
-
-The entire core is pure TypeScript with ZERO Angular dependencies. Import everything from the sibling library path. In this monorepo, the path alias `@ornery/ui-grid` maps to `projects/ui-grid/src/public-api.ts`.
-
-**Core files to reuse (all pure TS, no Angular):**
-
-- `grid.core.pipeline.ts` → `buildGridPipeline()` — the entire data pipeline
-- `grid.api.ts` → `createGridApi()`, `UiGridApi` — the API object
-- `grid.models.ts` → `GridOptions`, `GridColumnDef`, `GridRow`, `GridLabels`, `DEFAULT_GRID_LABELS`, etc.
-- `grid.features.ts` → `FEATURE_SORTING`, `FEATURE_FILTERING`, etc. — build-time feature flags
-- `grid.core.viewmodel.ts` → `resolveGridLabels()`, `gridSortButtonLabel()`, `gridSortAriaSort()`, all label functions
-- `grid.core.display.ts` → `buildGridCellContext()`, `formatGridCellDisplayValue()`
-- `grid.core.edit.ts` → `findNextGridCell()`, `isPrintableGridKey()`, `buildGridFocusCellResult()`, etc.
-- `grid.core.export.ts` → `exportCsvRows()`, `headerLabel()`
-- `grid.core.types.ts` → `DisplayItem`, `GroupItem`, `RowItem`, `ExpandableItem`, `PipelineResult`, `BuildGridPipelineContext`
-- `grid.constants.ts` → `SORT_DIRECTIONS`, `FILTER_CONDITIONS`
-- `grid.utils.ts` → `getCellValue`, `getPathValue`, `setPathValue`, `titleize`, etc.
-- `row-searcher.ts` → `runColumnFilter`, `setupFilters`
-- `row-sorter.ts` → `getSortFn`
-- `ui-grid.commands.ts` → All command functions (pure TS, depends only on grid.api + grid.core)
-- `ui-grid.events.ts` → All event raisers (pure TS, depends only on grid.api)
-- `ui-grid.host.ts` → `downloadGridCsvFile()` (pure TS), `observeGridHostSize()` (pure TS)
-- `i18n/en-US.json` → Default labels
-
-**Do NOT copy any core files. Import them.**
-
-## File structure to create
-
-```
-projects/ui-grid-react/
-  package.json
-  tsconfig.json
-  CLAUDE.md              ← this file
-  src/
-    index.ts             ← public API exports
-    UiGrid.tsx           ← main React component
-    useGridState.ts      ← state management hook (replaces Angular signals)
-    useVirtualScroll.ts  ← fixed-size row virtualization hook
-    ui-grid.css          ← styles adapted from grid.core.styles.scss
-    UiGrid.test.tsx      ← tests with vitest + @testing-library/react
-```
-
-## package.json
-
-```json
-{
-  "name": "@ornery/ui-grid-react",
-  "version": "0.1.0",
-  "description": "React wrapper for @ornery/ui-grid",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./styles": "./dist/ui-grid.css"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "@ornery/ui-grid": "^0.1.0"
-  },
-  "devDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "@testing-library/react": "^16.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "typescript": "~5.8.0",
-    "vitest": "^4.1.0",
-    "jsdom": "^26.0.0",
-    "tsup": "^8.0.0"
-  },
-  "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --external react --external react-dom --external @ornery/ui-grid",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  }
-}
-```
-
-## tsconfig.json
-
-Extend the root tsconfig. Add path alias for `@ornery/ui-grid`:
-
-```json
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "outDir": "./dist",
-    "declaration": true,
-    "declarationMap": true,
-    "paths": {
-      "@ornery/ui-grid": ["../ui-grid/src/public-api.ts"]
-    }
-  },
-  "include": ["src"]
-}
-```
-
-## useVirtualScroll hook
-
-A lightweight fixed-size virtualizer (~50 lines). No external dependency.
-
-**Interface:**
-```ts
-interface UseVirtualScrollOptions {
-  itemCount: number;
-  itemSize: number;       // row height in px
-  viewportHeight: number; // container height in px
-  overscan?: number;      // extra items above/below (default: 3)
-}
-
-interface UseVirtualScrollResult {
-  visibleRange: { start: number; end: number };
-  totalHeight: number;
-  offsetY: number;
-  onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
-  viewportRef: React.RefObject<HTMLDivElement>;
-  scrollTop: number;
-}
-```
-
-**Implementation:**
-- Track `scrollTop` via `useState`
-- Calculate `start = Math.floor(scrollTop / itemSize) - overscan`
-- Calculate `end = start + Math.ceil(viewportHeight / itemSize) + 2 * overscan`
-- Clamp to `[0, itemCount)`
-- `totalHeight = itemCount * itemSize`
-- `offsetY = start * itemSize`
-- Return a div ref and onScroll handler
-
-## useGridState hook
-
-Replaces Angular signals with React state. This is the core bridge.
-
-**Maps the Angular component's state 1:1:**
-
-| Angular signal | React state |
-|----------------|-------------|
-| `activeFilters` | `useState<Record<string, string>>({})` |
-| `groupByColumns` | `useState<string[]>([])` |
-| `collapsedGroups` | `useState<Record<string, boolean>>({})` |
-| `columnOrder` | `useState<string[]>([])` |
-| `hiddenRowReasons` | `useState<Record<string, string[]>>({})` |
-| `sortState` | `useState<SortState>(...)` |
-| `focusedCell` | `useState<GridCellPosition \| null>(null)` |
-| `editingCell` | `useState<GridCellPosition \| null>(null)` |
-| `editingValue` | `useState('')` |
-| `expandedRows` | `useState<Record<string, boolean>>({})` |
-| `expandedTreeRows` | `useState<Record<string, boolean>>({})` |
-| `currentPage` | `useState(1)` |
-| `pageSize` | `useState(0)` |
-| `benchmarkResult` | `useState<GridBenchmarkResult \| null>(null)` |
-| `infiniteScrollState` | `useState<GridInfiniteScrollState>(...)` |
-
-**Key behaviors:**
-- Call `createGridApi()` once in a `useRef` with bindings that dispatch state updates
-- Memoize `buildGridPipeline()` via `useMemo` dependent on all state inputs
-- Memoize `visibleColumns` via `useMemo`
-- Resolve `labels` via `useMemo(() => resolveGridLabels(options.labels), [options.labels])`
-- Reset state when `options.id` changes (same as the Angular effect)
-- Call `options.onRegisterApi?.(gridApi)` once
-
-**Returns:**
-- All computed values: `pipeline`, `visibleColumns`, `labels`, `gridTemplateColumns`, etc.
-- All action dispatchers: `toggleSort()`, `updateFilter()`, `toggleGrouping()`, etc.
-- `gridApi` ref
-
-## UiGrid.tsx component
-
-**Props:**
-```tsx
-interface UiGridProps {
-  options: GridOptions;
-  onRegisterApi?: (api: UiGridApi) => void;
-  /** Render prop for custom cell content. Return null to use default text. */
-  cellRenderer?: (context: GridCellTemplateContext) => React.ReactNode;
-  /** Render prop for expandable row content. */
-  expandableRenderer?: (context: GridExpandableTemplateContext) => React.ReactNode;
-  className?: string;
-}
-```
-
-**Rendering structure:** Match the Angular template exactly — same CSS classes, same `data-*` attributes, same ARIA roles/attributes, same part attributes. Reference the Angular template at `projects/ui-grid/src/lib/grid/ui-grid.component.html`.
-
-**Key sections:**
-1. Hero header with title, benchmark button, export button, stats
-2. Metrics strip
-3. Grid frame (`role="grid"`) with:
-   - Header row (`role="row"`) with column headers (`role="columnheader"`, `aria-sort`)
-   - Sort buttons with SVG icons
-   - Group toggle buttons with SVG icons
-   - Filter row
-   - Display items via `ng-template` equivalent (just inline JSX):
-     - Group rows with disclosure chevron SVGs
-     - Expandable rows
-     - Data rows with cells (`role="gridcell"`, `tabindex="0"`)
-       - Tree toggle buttons with chevron SVGs
-       - Expand toggle buttons with chevron SVGs
-       - Cell editor input (when editing)
-       - Cell template / display value
-   - Virtual scroll viewport OR plain list
-   - Empty state
-   - Pagination footer with arrow SVG icons
-
-**Feature flag guards:** Same pattern as Angular template — wrap sections in `{FEATURE_SORTING && ...}` etc.
-
-**Focus management:** For cell focus/editor focus, use `useRef` + `useEffect` instead of the Angular `focusGridRenderedCell`/`focusGridEditor` (those use shadowRoot which React won't have). Query the grid container ref directly.
-
-**Keyboard handling:** Port `handleCellKeyDown` and `handleEditorKeyDown` logic directly — it's all pure key checking + command dispatch.
-
-## Styles (ui-grid.css)
-
-Adapt from `projects/ui-grid/src/lib/grid/grid.core.styles.scss`:
-- Replace `:host` selectors with `.ui-grid-host`
-- Replace `:host *` with `.ui-grid-host *`
-- Keep ALL CSS custom properties identical (same `--ui-grid-*` variables)
-- Keep all class names identical
-- Add `.ui-grid-host { display: block; color: var(--ui-grid-cell-color); }`
-- Ship as plain CSS (no modules needed — class names are scoped by convention)
-
-## Tests
-
-Use vitest + @testing-library/react + jsdom.
-
-**Port these key scenarios from the Angular spec:**
-1. Registers the API and renders headers and rows
-2. Filters rows and renders empty state
-3. Sorts rows and cycles sort state from header button
-4. Groups rows and collapses groups
-5. Exports visible rows as CSV
-6. Virtualizes rows when count crosses threshold
-7. Paginates rows
-8. Keyboard cell editing (commit, navigate, cancel)
-9. Resolves custom i18n label overrides
-10. Feature flags disable unused template sections
-
-## Public API (index.ts)
-
-```ts
-export { UiGrid } from './UiGrid';
-export type { UiGridProps } from './UiGrid';
-export { useGridState } from './useGridState';
-export { useVirtualScroll } from './useVirtualScroll';
-
-// Re-export core types consumers need
-export type {
-  GridOptions,
-  GridColumnDef,
-  GridRow,
-  GridRecord,
-  GridLabels,
-  GridCellTemplateContext,
-  GridExpandableTemplateContext,
-  GridCellEditableContext,
-  GridBenchmarkResult,
-  GridSavedState,
-  SortState,
-} from '@ornery/ui-grid';
-
-export type { UiGridApi } from '@ornery/ui-grid';
-export { DEFAULT_GRID_LABELS } from '@ornery/ui-grid';
-```
-
-## Important notes
-
-- Do NOT use Shadow DOM — React doesn't support it well. Use a regular div with `className="ui-grid-host"`.
-- Do NOT add any Angular dependencies.
-- The `GridOptions.cellTemplate` field is `TemplateRef` (Angular-specific). The React wrapper ignores it and uses the `cellRenderer` prop instead.
-- Same for `expandableRowTemplate` → use `expandableRenderer` prop.
-- The `GridOptions.onRegisterApi` still works — it's called with the same `UiGridApi` object.
-- Keep the `GridColumnDef.cellRenderer` function (returns string) — it's already framework-agnostic.