@opencorestack/opengridx 3.6.0 → 3.7.0

package/docs/API_REFERENCE.md

@@ -648,8 +648,9 @@ Context provider for overriding the grid's visual system.
 - **`colors`**: `primary`, `primaryDark`, `primaryLight`, `primaryFocus`, `secondary*`, `success`, `warning`, `error`, `info`, `white`, `black`, `gray` (`{ 50 … 900 }`). Toolbar, menu, selection and focus accents derive from `primary*` unless set directly.
 - **`typography`**: `fontFamily`, `fontFamilyMono`, `fontSizeXs` … `fontSizeXl`.
 - **`spacing`**: `xs` … `xxl`. **`borders`**: `widthThin/Medium/Thick`, `radiusSm` … `radiusXl`, `color`, `colorHover`. **`shadows`**: `sm` … `xl`.
-- **`grid`**: surfaces (`background`, `borderColor`, `headerBackground`, `headerText`, `headerHoverBackground`, `headerSortedBackground`, `rowText`, `rowHoverBackground`, `rowAlternateBackground`, `rowSelectedBackground`, `rowSelectedHoverBackground`, `cellFocusBorder`, `rangeBackground`, `rangeBorder` (v3.3), `pinnedLeftShadow`, `pinnedRightShadow`, `checkboxBg`, `checkboxBorder`), sizing (`rowHeightCompact`, `rowHeightStandard`, `rowHeightComfortable`, `headerHeight` in px, read by the grid's layout; the `rowHeight` / `headerHeight` props win), `cellPaddingX`, `cellPaddingY`, `cellFontSize`, `headerFontSize`.
-- **`toolbar`**, **`overlays`**, **`scrollbar`** (`thumbColor`, `trackColor`, `size`), **`skeleton`** (`baseColor`, `highlightColor`), **`transitions`**.
+- **`grid`**: surfaces (`background`, `borderColor`, `headerBackground`, `headerText`, `headerHoverBackground`, `headerSortedBackground`, `rowText`, `rowHoverBackground`, `rowAlternateBackground`, `rowSelectedBackground`, `rowSelectedHoverBackground`, `cellFocusBorder`, `rangeBackground`, `rangeBorder` (v3.3), `pinnedLeftShadow`, `pinnedRightShadow`, `checkboxBg`, `checkboxBorder`), sizing (`rowHeightCompact`, `rowHeightStandard`, `rowHeightComfortable`, `headerHeight` in px, read by the grid's layout; the `rowHeight` / `headerHeight` props win), `cellPaddingX`, `cellPaddingY`, `cellFontSize`, `headerFontSize`; v3.7: fonts (`headerFontFamily`, `headerFontWeight`, `cellFontFamily`, `cellFontWeight`), `headerPaddingX`, outer `borderWidth` and `borderRadius`, dividers (`columnDividerWidth`, `headerColumnDividerWidth`, `rowDividerWidth`, `columnDividerColor`, `rowDividerColor`; `0` hides a divider).
+- **`overlays`**: colours (`background`, `text`, `border`, `shadow`, `item*`) and, v3.7, `fontFamily`, `fontWeight`, `fontSize` for menus and panels.
+- **`toolbar`**, **`scrollbar`** (`thumbColor`, `trackColor`, `size`), **`skeleton`** (`baseColor`, `highlightColor`), **`transitions`**.
 
 Presets: `darkTheme`, `roseTheme`, `emeraldTheme`, `amberTheme`, `compactTheme`. See [Theming](customization/theming.md).
 

package/docs/architecture/datagrid-orchestration.md

@@ -1,8 +1,23 @@
 # DataGrid orchestration
 
 `lib/components/DataGrid/DataGrid.tsx` is the orchestration layer: it destructures the props, calls
-hooks and pure utils in a fixed order, and renders JSX. Feature logic lives in the hooks and utils
-listed here; add new logic there, not in the component.
+hooks and pure utils in a fixed order, and renders `GridRoot` with one props object. Feature logic lives
+in the hooks and utils listed here; add new logic there, not in the component.
+
+Some contiguous runs of hooks are wrapped in a **composite hook** (`hooks/core/`) that calls its members in
+the same order, so `DataGrid.tsx` calls one hook where the table below lists several (marked with the
+composite's name). A composite only ever wraps consecutive steps: a hook that has to run between two of its
+members goes inside it at that position, never before or after the composite.
+
+| Composite | Steps |
+| :--- | :--- |
+| `useGridEditPipeline` | 12a–13 |
+| `useGridSelectionAndStateApi` | 23–24 |
+| `useGridViewApis` | 30–31a |
+| `useGridScrollViewport` | 32–33 |
+| `useGridRangeEditing` | 36a–36d |
+| `useGridRenderWindow` | 38–41 |
+| `useGridToolbarStack` | 44–46 |
 
 ## Why the order matters
 
@@ -47,9 +62,9 @@ in an effect, so **keep the call order when you move or add a hook**. In particu
 | 10 | `useGridRowIdOf` | `hooks/core/useGridRowIdOf.ts` | `getRowIdOf` and its stable event-handler twin |
 | 11 | `useGridApiRefBinding` | `hooks/core/useGridApiRefBinding.ts` | Binds the `apiRef` prop (layout effect) |
 | 12 | `useGridHierarchy` | `hooks/core/useGridHierarchy.ts` | `useTreeData` + `useRowGrouping`, the active handlers and `rowMetaMap` |
-| 12a | `useGridEditCommitChannel` | `hooks/core/useGridUndoRedo.ts` | Stable `emit` / `setListener` pair: the commit paths below report stored changes through `emit`, and `useGridUndoRedo` (36c) registers the listener (v3.4) |
-| 12b | `useGridBatchEdit` | `hooks/features/useGridBatchEdit.ts` | Batch edits (v3.4): `applyEdits` runs `valueSetter` → `processRowUpdate` once per row (rows in parallel, failures isolated and sent to `onProcessRowUpdateError`) and stores every successful row in one `replaceRows` update; `getRow` sees rows stored since the last render; `storeRow` stores a single edit |
-| 13 | `useGridEditing` | `hooks/features/useGridEditing.ts` | Cell editing state and handlers; stores through `useGridBatchEdit.storeRow` and reports the committed change to the channel |
+| 12a | `useGridEditCommitChannel` (in `useGridEditPipeline`) | `hooks/core/useGridUndoRedo.ts` | Stable `emit` / `setListener` pair: the commit paths below report stored changes through `emit`, and `useGridUndoRedo` (36c) registers the listener (v3.4) |
+| 12b | `useGridBatchEdit` (in `useGridEditPipeline`) | `hooks/features/useGridBatchEdit.ts` | Batch edits (v3.4): `applyEdits` runs `valueSetter` → `processRowUpdate` once per row (rows in parallel, failures isolated and sent to `onProcessRowUpdateError`) and stores every successful row in one `replaceRows` update; `getRow` sees rows stored since the last render; `storeRow` stores a single edit |
+| 13 | `useGridEditing` (in `useGridEditPipeline`) | `hooks/features/useGridEditing.ts` | Cell editing state and handlers; stores through `useGridBatchEdit.storeRow` and reports the committed change to the channel |
 | 14 | `useGridLiveRowSelection` | `hooks/core/useGridLiveRowSelection.ts` | Selection without removed rows |
 | 15 | `useGridDataSource` | `hooks/features/useGridDataSource.ts` | Server fetching |
 | 16 | `useServerTreeChildren` | `hooks/features/useServerTreeChildren.ts` | Lazy server tree children |
@@ -59,46 +74,48 @@ in an effect, so **keep the call order when you move or add a hook**. In particu
 | 20 | `useGridRowPipeline` | `hooks/core/useGridRowPipeline.ts` | Filter → pin → sort → paginate |
 | 21 | `useGridPageCorrection` | `hooks/core/useGridPageCorrection.ts` | Moves a page left past the end back to the last page |
 | 22 | `getPaginationRowCount` (pure) | `utils/pagination/index.ts` | What the pager pages through |
-| 23 | `useGridRowInteractions` | `hooks/core/useGridRowInteractions.ts` | Row selection, `handleRowClick`, `handleSelectionChange` |
-| 24 | `useGridApiMethods` | `hooks/core/useGridApiMethods.ts` | State API methods (`getAllFilteredRows` via `utils/gridApiRows.ts`); since v3.5 also `setSortModel`, `setRowGroupingModel`, `setAggregationModel`, `setColumnVisibilityModel`, `setPivotModel` and `getGridAiState` |
+| 23 | `useGridRowInteractions` (in `useGridSelectionAndStateApi`) | `hooks/core/useGridRowInteractions.ts` | Row selection, `handleRowClick`, `handleSelectionChange` |
+| 24 | `useGridApiMethods` (in `useGridSelectionAndStateApi`) | `hooks/core/useGridApiMethods.ts` | State API methods (`getAllFilteredRows` via `utils/gridApiRows.ts`); since v3.5 also `setSortModel`, `setRowGroupingModel`, `setAggregationModel`, `setColumnVisibilityModel`, `setPivotModel` and `getGridAiState` |
 | 25 | `useRowReorder` | `hooks/useRowReorder.ts` | Row drag-reorder |
 | 26 | `useAggregation` | `hooks/features/useAggregation.ts` | Footer aggregation result |
 | 27 | `useGridAggregationApi` | `hooks/core/useGridAggregationApi.ts` | `getAggregationResult`, `getAggregationModel`, `getGroupedExportRows` |
 | 28 | `useLayout` | `hooks/core/useLayout.ts` | Row heights, pinned column split, widths |
 | 29 | `useGridSpanning` | `hooks/features/useGridSpanning.ts` | Row/column spans |
 | 29a | `useGridCellSelection` | `hooks/core/useGridCellSelection.ts` | Cell range (v3.3): the model's range resolved against `allRenderableRows` and the data columns of `navigationColumns` (grown over spans), the render rectangle, pointer drag with auto-scroll and Shift+click, the Shift-key handlers for the keyboard hook, copy text, status-bar totals and the debounced live-region text. Inert while `cellSelection` is off |
-| 30 | `useGridClipboardApi` | `hooks/core/useGridClipboardApi.ts` | Ctrl/Cmd+C and `copySelectedRows`; with `cellSelection` the shortcut copies the range (`getCellRangeCopyText`) |
-| 31 | `useGridScrollToIndexesApi` | `hooks/core/useGridScrollToIndexesApi.ts` | `scrollToIndexes` |
-| 31a | `useGridColumnAutosize` | `hooks/core/useGridColumnAutosize.ts` | `autosizeColumn` / `autosizeColumns` on the API, and the resize handle's auto-size handler (v3.1) |
-| 32 | `useGridViewport` | `hooks/core/useGridViewport.ts` | Scroll sync, viewport measurement, viewport callback ref |
-| 32a | `useGridMaxContentHeight` | `hooks/core/useGridMaxContentHeight.ts` | The tallest element this browser lays out (`utils/maxElementHeight.ts`, measured once per document after mount; `undefined` until then, `Infinity` without a layout engine) |
-| 33 | `useGridVirtualization` | `hooks/core/useGridVirtualization.ts` | Render window; `virtualContainerHeight` caps the rows' container to `maxContentHeight` (Firefox collapses taller elements) |
+| 30 | `useGridClipboardApi` (in `useGridViewApis`) | `hooks/core/useGridClipboardApi.ts` | Ctrl/Cmd+C and `copySelectedRows`; with `cellSelection` the shortcut copies the range (`getCellRangeCopyText`) |
+| 31 | `useGridScrollToIndexesApi` (in `useGridViewApis`) | `hooks/core/useGridScrollToIndexesApi.ts` | `scrollToIndexes` |
+| 31a | `useGridColumnAutosize` (in `useGridViewApis`) | `hooks/core/useGridColumnAutosize.ts` | `autosizeColumn` / `autosizeColumns` on the API, and the resize handle's auto-size handler (v3.1) |
+| 32 | `useGridViewport` (in `useGridScrollViewport`) | `hooks/core/useGridViewport.ts` | Scroll sync, viewport measurement, viewport callback ref |
+| 32a | `useGridMaxContentHeight` (in `useGridScrollViewport`) | `hooks/core/useGridMaxContentHeight.ts` | The tallest element this browser lays out (`utils/maxElementHeight.ts`, measured once per document after mount; `undefined` until then, `Infinity` without a layout engine) |
+| 33 | `useGridVirtualization` (in `useGridScrollViewport`) | `hooks/core/useGridVirtualization.ts` | Render window; `virtualContainerHeight` caps the rows' container to `maxContentHeight` (Firefox collapses taller elements) |
 | 34 | `useGridSortHandlers` | `hooks/core/useGridHeaderHandlers.ts` | Header sort / shift-sort |
 | 35 | `useGridKeyboardNavigation` | `hooks/core/useGridKeyboardNavigation.ts` | Focus and keyboard handling; takes `cellSelection.keyboard` (Shift+navigation, Escape, Ctrl/Cmd+A) |
 | 36 | `useGridPointerFocusHandlers` | `hooks/core/useGridFocusHandlers.ts` | Cell and header click focus |
-| 36a | `useGridCellSelectionApi` | `hooks/core/useGridCellSelectionApi.ts` | Keeps the range anchor and the focused cell together (layout effect: a new anchor moves focus; focus moved to another data cell collapses the range), clears a range whose corner is gone (`'dataChange'`), and installs `getCellSelectionModel`, `setCellSelectionModel`, `selectCellRange`, `clearCellSelection`, `getSelectedCells`, `copySelectedCells` (once per `apiRef`, reading the latest values from a ref) |
-| 36b | `useGridClipboardPaste` | `hooks/core/useGridClipboardPaste.ts` | Paste and range clear (v3.4): `paste` and Delete/Backspace listeners on the grid root (only for cell targets, not editors or nested grids), TSV parsing (`utils/parsing.ts`), placement against the renderable rows and range columns (`utils/editing/targets.ts`), the batch edit, the new selection, `onBeforeClipboardPaste` / `onClipboardPaste`, and `apiRef.pasteText`. Inert without `cellSelection` except for `pasteText` |
-| 36c | `useGridUndoRedo` | `hooks/core/useGridUndoRedo.ts` | History (v3.4, `undoRedo`): records the channel's changes, replays them as batch edits with an `expect` value per cell (stale cells skipped), queues undo/redo, selects and scrolls to the affected cells, Ctrl/Cmd+Z / Shift+Z / Ctrl+Y on the grid root, `onHistoryChange`, and `apiRef.undo` / `redo` / `canUndo` / `canRedo` / `clearHistory` |
-| 36d | `useGridFillHandle` | `hooks/core/useGridFillHandle.ts` | Fill handle (v3.5, `cellSelection` without `disableFillHandle`): where the handle is drawn (`rowRenderProps.fillHandle`, the range's bottom-right cell or its span origin), a `pointerdown` listener on the viewport for `.ogx__cell-fill-handle` that runs `cellSelection.startTrackedDrag` (the range drag's hit testing, auto-scroll and slow-machine fallback, on pointer events so touch works), the fill itself (`utils/editing/fill.ts`: series detection, lines, `GridColDef.fillValue`) as one batch edit with source `'fill'`, the new selection, `onFill`, and Ctrl/Cmd+D / Ctrl/Cmd+R on the grid root |
+| 36a | `useGridCellSelectionApi` (in `useGridRangeEditing`) | `hooks/core/useGridCellSelectionApi.ts` | Keeps the range anchor and the focused cell together (layout effect: a new anchor moves focus; focus moved to another data cell collapses the range), clears a range whose corner is gone (`'dataChange'`), and installs `getCellSelectionModel`, `setCellSelectionModel`, `selectCellRange`, `clearCellSelection`, `getSelectedCells`, `copySelectedCells` (once per `apiRef`, reading the latest values from a ref) |
+| 36b | `useGridClipboardPaste` (in `useGridRangeEditing`) | `hooks/core/useGridClipboardPaste.ts` | Paste and range clear (v3.4): `paste` and Delete/Backspace listeners on the grid root (only for cell targets, not editors or nested grids), TSV parsing (`utils/parsing.ts`), placement against the renderable rows and range columns (`utils/editing/targets.ts`), the batch edit, the new selection, `onBeforeClipboardPaste` / `onClipboardPaste`, and `apiRef.pasteText`. Inert without `cellSelection` except for `pasteText` |
+| 36c | `useGridUndoRedo` (in `useGridRangeEditing`) | `hooks/core/useGridUndoRedo.ts` | History (v3.4, `undoRedo`): records the channel's changes, replays them as batch edits with an `expect` value per cell (stale cells skipped), queues undo/redo, selects and scrolls to the affected cells, Ctrl/Cmd+Z / Shift+Z / Ctrl+Y on the grid root, `onHistoryChange`, and `apiRef.undo` / `redo` / `canUndo` / `canRedo` / `clearHistory` |
+| 36d | `useGridFillHandle` (in `useGridRangeEditing`) | `hooks/core/useGridFillHandle.ts` | Fill handle (v3.5, `cellSelection` without `disableFillHandle`): where the handle is drawn (`rowRenderProps.fillHandle`, the range's bottom-right cell or its span origin), a `pointerdown` listener on the viewport for `.ogx__cell-fill-handle` that runs `cellSelection.startTrackedDrag` (the range drag's hit testing, auto-scroll and slow-machine fallback, on pointer events so touch works), the fill itself (`utils/editing/fill.ts`: series detection, lines, `GridColDef.fillValue`) as one batch edit with source `'fill'`, the new selection, `onFill`, and Ctrl/Cmd+D / Ctrl/Cmd+R on the grid root |
 | 37 | `useGridColumnMenuHandlers` | `hooks/core/useGridHeaderHandlers.ts` | Column menu Hide / Pin (`pinColumnTo` in `utils/pinning`) |
-| 38 | `useGridAriaRows` | `hooks/core/useGridAriaRows.ts` | `aria-rowcount` and `aria-rowindex` bases |
-| 39 | `useGridSpanRowWindow` | `hooks/features/useGridSpanRenderWindow.ts` | Render window widened to whole row spans |
-| 40 | `useGridVisibleRows` | `hooks/core/useGridVisibleRows.ts` | Pinned + virtual centre rows to render |
-| 41 | `useGridSpanColumnWindow` | `hooks/features/useGridSpanRenderWindow.ts` | Columns to render, widened to whole column spans |
+| 38 | `useGridAriaRows` (in `useGridRenderWindow`) | `hooks/core/useGridAriaRows.ts` | `aria-rowcount` and `aria-rowindex` bases |
+| 39 | `useGridSpanRowWindow` (in `useGridRenderWindow`) | `hooks/features/useGridSpanRenderWindow.ts` | Render window widened to whole row spans |
+| 40 | `useGridVisibleRows` (in `useGridRenderWindow`) | `hooks/core/useGridVisibleRows.ts` | Pinned + virtual centre rows to render |
+| 41 | `useGridSpanColumnWindow` (in `useGridRenderWindow`) | `hooks/features/useGridSpanRenderWindow.ts` | Columns to render, widened to whole column spans |
 | 42 | `useGridDevWarnings` | `hooks/core/useGridDevWarnings.ts` | Dev-only warnings |
 | 43 | `useColumnGroupReorderGuard` | `hooks/features/useColumnGroupReorderGuard.ts` | Header drag-reorder kept inside column groups |
-| 44 | `useGridColumnsPanel` | `hooks/core/useGridColumnsPanel.ts` | Columns panel (toolbar or standalone) |
-| 45 | `useGridStylesheetWarning` | `hooks/core/useGridDevWarnings.ts` | Warns when the stylesheet is missing |
-| 45a | `useGridAiAssistant` | `hooks/features/useGridAiAssistant.ts` | The `aiAssistant` panel (v3.5): open state, the request and its `AbortController` (Stop), applying a branded reply through the `apiRef` setters of step 24 (`utils/aiAssistant.ts`: allowed parts, the Undo snapshot, chips, chip removal), the live-region status, and `apiRef.openAiAssistant` / `closeAiAssistant`. Inert without `aiAssistant`; it runs before step 46 because the toolbar gets its Ask AI button from it |
-| 46 | `useGridToolbarProps` | `hooks/core/useGridToolbarProps.ts` | Props for `slots.toolbar` |
+| 44 | `useGridColumnsPanel` (in `useGridToolbarStack`) | `hooks/core/useGridColumnsPanel.ts` | Columns panel (toolbar or standalone) |
+| 45 | `useGridStylesheetWarning` (in `useGridToolbarStack`) | `hooks/core/useGridDevWarnings.ts` | Warns when the stylesheet is missing |
+| 45a | `useGridAiAssistant` (in `useGridToolbarStack`) | `hooks/features/useGridAiAssistant.ts` | The `aiAssistant` panel (v3.5): open state, the request and its `AbortController` (Stop), applying a branded reply through the `apiRef` setters of step 24 (`utils/aiAssistant.ts`: allowed parts, the Undo snapshot, chips, chip removal), the live-region status, and `apiRef.openAiAssistant` / `closeAiAssistant`. Inert without `aiAssistant`; it runs before step 46 because the toolbar gets its Ask AI button from it |
+| 46 | `useGridToolbarProps` (in `useGridToolbarStack`) | `hooks/core/useGridToolbarProps.ts` | Props for `slots.toolbar` |
 
 ## Rendered components
 
-`GridToolbarSlot`, `GridAiAssistantArea` (the `aiAssistant` panel or `slots.aiAssistantPanel` while open, anchored under the toolbar), `GridStandaloneColumnPanel`, `GridListView` (list view) or the viewport
-(`Header`, `GridPinnedRows` top, `GridEmptyState`, `GridVirtualRows`, `GridPinnedRows` bottom,
+`DataGrid.tsx` renders `GridRoot` (`components/DataGrid/GridRoot.tsx`): the root element with, in this order,
+`GridToolbarSlot`, `GridAiAssistantArea` (the `aiAssistant` panel or `slots.aiAssistantPanel` while open, anchored under the toolbar), `GridStandaloneColumnPanel`, `GridListView` (list view) or `GridViewport` (`components/DataGrid/GridViewport.tsx`, the `role="grid"` viewport:
+`Header`, `GridPinnedRows` top, `GridEmptyState`, `GridVirtualRows`, `GridPinnedRows` bottom,
 `GridAggregationFooter`), `GridCellSelectionStatsArea` (`showCellSelectionStats` with `cellSelection`), then `slots.footer` or `GridPaginationArea`, `GridLiveRegion`,
-`GridLoadingOverlay` and `GridErrorOverlay`. The props all three row renderers take alike are built
-once in `DataGrid.tsx` (`rowRenderProps`) and spread into each. `rowRenderProps.cellRange` is the cell range's
+`GridLoadingOverlay` and `GridErrorOverlay`. `GridRoot` builds the overlay slot elements and passes the
+rest of its props on to `GridViewport`. The props all three row renderers take alike are built once in
+`GridViewport` (`rowRenderProps`) and spread into each. `rowRenderProps.cellRange` is the cell range's
 render rectangle; each row renderer turns it into a per-row `cellRange` (`getRowCellRange`), `null` for rows
 outside it, and `Row` is memoised with a value comparison of that prop, so a drag only re-renders the rows the
 range enters or leaves. `rowRenderProps.fillHandle` (v3.5) adds `fillHandleCol` to the one row that draws the fill

package/docs/architecture/grid-row-meta.md

@@ -2,7 +2,7 @@
 
 Hierarchy metadata for a grid row, available via `params.rowMeta` in `renderCell` since v1.1.
 
-**File:** `lib/types/index.ts`
+**File:** `lib/types/rows.ts` (re-exported from `lib/types/index.ts`)
 
 ---
 

package/docs/customization/slots-api.md

@@ -288,4 +288,4 @@ function CustomPagination(props: Record<string, unknown>) {
 ## See Also
 
 - [Custom Pagination Guide](../features/custom-pagination.md) - Detailed examples with Ant Design and MUI
-- [DataGrid Props](../../lib/types/index.ts) - Full TypeScript definitions
+- [DataGrid Props](../../lib/types/props.ts) - Full TypeScript definitions

package/docs/customization/theming.md

@@ -5,6 +5,8 @@ OpenGridX ships with a complete design-token system built on CSS custom properti
 1. **`DataGridThemeProvider`** — the recommended React API (maps a typed `GridTheme` object → CSS variables)
 2. **Raw CSS override** — set any `--ogx-*` variable yourself on a wrapper element or `:root`
 
+To design a theme without writing code, use the **[Theme Builder](https://opencorestack.github.io/OpenGridX/theme-builder)** demo page: controls for colours, fonts, sizes, borders and dividers, buttons and menus, edited separately for light and dark mode on a live grid, with WCAG AA contrast hints. It copies or downloads the result as a `GridTheme` (only the values that differ from the defaults) and can share it as a link (`#theme=…`).
+
 ---
 
 ## Quick Start — `DataGridThemeProvider`
@@ -198,6 +200,47 @@ All sub-theme types (`GridThemeColors`, `GridThemeGrayScale`, `GridThemeTypograp
 | `--ogx-grid-header-font-size` | `13px` | Header cell font size (`grid.headerFontSize`) |
 | `--ogx-grid-line-height` | `var(--ogx-line-height-normal)` | Row line height |
 
+### Fonts, dividers and corners (v3.7)
+
+These keys were added for the [Theme Builder](https://opencorestack.github.io/OpenGridX/theme-builder). Each defaults to exactly what the grid drew before, so a theme that leaves them out looks unchanged. The variables without a stylesheet value are read with a fallback, so they follow the token in the Default column when only that one is set.
+
+| Theme key | CSS variable | Default | Styles |
+|---|---|---|---|
+| `grid.headerFontFamily` | `--ogx-grid-header-font-family` | the grid font | Header cells |
+| `grid.headerFontWeight` | `--ogx-grid-header-font-weight` | `600` | Header cells |
+| `grid.cellFontFamily` | `--ogx-grid-cell-font-family` | the grid font | Body cells |
+| `grid.cellFontWeight` | `--ogx-grid-cell-font-weight` | inherited (`400`) | Body cells |
+| `grid.headerPaddingX` | `--ogx-grid-header-padding-x` | `--ogx-grid-cell-padding-x` | Horizontal padding of header cells |
+| `grid.borderWidth` | `--ogx-grid-border-width` | `1px` | The grid's outer border |
+| `grid.borderRadius` | `--ogx-grid-border-radius` | `--ogx-border-radius-lg` (`12px`) | The grid's corners (inner corners follow: radius minus border width) |
+| `grid.columnDividerWidth` | `--ogx-grid-column-divider-width` | `1px` | Lines between body cells and aggregation footer cells, and the edge of the right-pinned section |
+| `grid.headerColumnDividerWidth` | `--ogx-grid-header-column-divider-width` | `1px` | The short separators between header cells and column-group cells |
+| `grid.rowDividerWidth` | `--ogx-grid-row-divider-width` | `1px` | Lines under rows, the header row, column-group rows and the header filter row |
+| `grid.columnDividerColor` | `--ogx-grid-column-divider-color` | `--ogx-grid-border-color` | Colour of the column dividers |
+| `grid.rowDividerColor` | `--ogx-grid-row-divider-color` | `--ogx-grid-border-color` | Colour of the row dividers |
+| `overlays.fontFamily` | `--ogx-overlay-font-family` | the grid font | Column menu, header filter menu, toolbar panels (columns, filters, summaries, pivot), AI panel |
+| `overlays.fontWeight` | `--ogx-overlay-font-weight` | each item's own (`400`, labels `500`) | Menu items and panel labels; section titles and active items stay bold |
+| `overlays.fontSize` | `--ogx-overlay-font-size` | `--ogx-font-size-xs` (AI panel `--ogx-font-size-sm`) | Menu items and panel labels |
+
+The header-cell separators keep their own colour (`--ogx-color-gray-300` at 50% opacity); only their width is themable.
+
+#### Recipe: hide the dividers
+
+A width of `0` removes a divider without changing any cell's size or position:
+
+```tsx
+const borderless: GridTheme = {
+  grid: {
+    columnDividerWidth: '0',        // body and footer cells
+    headerColumnDividerWidth: '0',  // header and column-group cells
+    rowDividerWidth: '0',           // under rows and header rows
+    rowAlternateBackground: '#f8fafc', // optional: zebra rows instead of lines
+  },
+};
+```
+
+For visible gaps between cells instead of lines, set the divider colour to the grid background (`columnDividerColor: '#ffffff'`) and widen it. Cells have no margin setting: they are positioned to the pixel for virtualization, pinning and spanning, so use padding for room inside them.
+
 ### Grid Colors
 
 | Token | Default (light) | Dark override | Description |

package/docs/features/virtualization.md

@@ -33,7 +33,7 @@ The grid calculates which rows are visible based on:
 - ✅ About 19 row elements at rest in an 800 px page at 52 px rows, at most about 86 while scrolling fast, whatever the row count (10k to 1M)
 - ✅ Scrolling keeps up with a 60 Hz display at 1M rows in Chromium (no missed frames) and Firefox; WebKit misses a frame or two on each long jump of the scroll position
 - ✅ The grid itself adds about 10 MB of JS heap at 100k rows and 79 MB at 1M (Chromium), on top of your row data
-- ⚠️ Not millions of rows at the default height. Browsers cap an element's height and the grid does no scroll scaling: it lays every row out at its real height. Chromium and WebKit stop at 33,554,428 px, so rows past about `33,554,428 / rowHeight` cannot be scrolled to (645,277 at the default 52 px; 1M rows fit at 32 px). Firefox's limit is about 17.9M px (about 344,000 rows at 52 px); since 3.5.1 the grid caps its content to the limit it measures, so Firefox scrolls normally up to there (on 3.5.0 and earlier, content past the limit collapsed and the grid did not scroll at all). Beyond that, use pagination, or server-side paging / infinite scroll. In development the grid warns when rows are cut off and names how many can be scrolled to. Measured reach per browser: [Performance → Reach](../performance.md#reach-the-browser-height-ceiling).
+- ⚠️ Not millions of rows at the default height: browsers cap an element's height. See [The browser height limit](#the-browser-height-limit) for how many rows fit and what to use beyond that.
 
 ### Column Virtualization
 
@@ -89,6 +89,20 @@ In development builds the grid logs a `console.warn` when it is rendering every
 
 Pagination can hide this problem, because a paginated grid only has one page of rows to render. Row grouping switches pagination off (see below), so an unbounded container that looked fine with pagination can freeze the tab once grouping is enabled.
 
+### The browser height limit
+
+**How many rows can one scrolling grid hold?**
+
+| Rows (at the default 52 px) | Use |
+| :--- | :--- |
+| up to about 300,000 | client-side rows: they fit in every browser |
+| up to about 600,000 | client-side rows in Chromium and WebKit only; Firefox users cannot scroll past about 344,000 |
+| more | a [`dataSource`](data-source.md) (server-side pages or infinite scroll), or `pagination` |
+
+`density="compact"` (32 px rows) stretches each limit by about 1.6×: about 559,000 rows in Firefox and 1,048,000 in Chromium and WebKit.
+
+Why: the grid lays every row out at its real height (`rowCount × rowHeight` pixels) and does no scroll scaling, and browsers cap an element's height. Chromium and WebKit stop at 33,554,428 px, so rows past about `33,554,428 / rowHeight` cannot be scrolled to (645,277 at 52 px). Firefox's limit is about 17.9M px (about 344,000 rows at 52 px); since 3.5.1 the grid caps its content to the limit it measures, so Firefox scrolls normally up to there (on 3.5.0 and earlier, content past the limit collapsed and the grid did not scroll at all). In development the grid warns when rows are cut off, names how many can be scrolled to and points to `dataSource`. Measured reach per browser: [Performance → Reach](../performance.md#reach-the-browser-height-ceiling).
+
 ## Configuration
 
 ### Row Height
@@ -243,7 +257,7 @@ You should see console logs only for visible rows + overscan buffer.
 ## Known Limitations
 
 1. **Unbounded containers** - Virtualization needs a bounded viewport height (see above)
-2. **Browser height cap** - Rows past roughly `33,554,432 / rowHeight` (Chromium; less in Firefox) cannot be scrolled to (see above)
+2. **Browser height cap** - Rows past roughly `33,554,428 / rowHeight` (Chromium and WebKit; less in Firefox) cannot be scrolled to ([see above](#the-browser-height-limit))
 3. **Uniform row heights** - Only detail panels vary the height; cumulative heights are recomputed over all rows when panels change
 4. **Horizontal scrolling** - May show brief flicker with very wide grids
 

package/docs/performance.md

@@ -87,12 +87,14 @@ import '@opencorestack/opengridx/styles';
 
 ## Know the browser's height limit
 
+In short: up to about 300,000 rows at 52 px fit in every browser, up to about 600,000 in Chromium and WebKit; beyond that load rows with a [`dataSource`](features/data-source.md) or use pagination. The decision guide is in [Virtualization → The browser height limit](features/virtualization.md#the-browser-height-limit).
+
 The grid sizes its scroll content to `rowCount × rowHeight` pixels and does not scale scroll positions. Browsers cap an element's height, and the [benchmark](#reach-the-browser-height-ceiling) measures what happens past the cap:
 
 - **Chromium and WebKit** clamp the content at 33,554,428 px. Rows below that cannot be scrolled to: at the default 52 px row height that is every row past 645,277.
 - **Firefox** has a lower limit, about 17.9M px, and collapses a taller element instead of clamping it. Up to 3.5.0 that made a grid with more content unscrollable in Firefox (only the first screen of rows was reachable). **Since 3.5.1 the grid measures the browser's limit once and caps its scroll content to it**, so Firefox scrolls normally and reaches the rows above the cap: about 344,000 rows at 52 px, 559,000 at 32 px.
 
-In development the grid warns when rows are cut off, naming how many can be scrolled to in that browser. For more rows, use pagination, `paginationMode="server"` or infinite scroll with a `dataSource`, or a smaller `rowHeight` (`density="compact"`, 32 px, keeps 1M rows under the Chromium and WebKit cap).
+In development the grid warns when rows are cut off, naming how many can be scrolled to in that browser and pointing to `dataSource`. For more rows, use a [`dataSource`](features/data-source.md) (`paginationMode="server"` or infinite scroll), `pagination`, or a smaller `rowHeight` (`density="compact"`, 32 px, keeps 1M rows under the Chromium and WebKit cap).
 
 ## Use server-side operations for very large datasets
 

package/lib/components/AiAssistant/GridAiAssistantPanel.css

@@ -21,7 +21,9 @@
   border: 1px solid var(--ogx-overlay-border, var(--ogx-grid-border-color));
   border-radius: var(--ogx-border-radius-lg, 8px);
   box-shadow: var(--ogx-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
-  font-size: var(--ogx-font-size-sm);
+  font-family: var(--ogx-overlay-font-family, inherit);
+  font-size: var(--ogx-overlay-font-size, var(--ogx-font-size-sm));
+  font-weight: var(--ogx-overlay-font-weight, inherit);
 }
 .ogx-ai-panel__header {
   display: flex;

package/lib/components/Cell/Cell.css

@@ -3,8 +3,10 @@
   display: flex;
   align-items: center;
   padding: var(--ogx-grid-cell-padding-y) var(--ogx-grid-cell-padding-x);
-  border-inline-end: 1px solid var(--ogx-grid-border-color);
+  border-inline-end: var(--ogx-grid-column-divider-width) solid var(--ogx-grid-column-divider-color, var(--ogx-grid-border-color));
+  font-family: var(--ogx-grid-cell-font-family, inherit);
   font-size: var(--ogx-grid-cell-font-size);
+  font-weight: var(--ogx-grid-cell-font-weight, inherit);
   color: var(--ogx-grid-row-text);
   line-height: var(--ogx-grid-line-height);
   white-space: nowrap;
@@ -132,7 +134,7 @@
   background-color: var(--ogx-grid-background); 
 }
 .ogx__cell--pinned-right {
-  border-inline-start: 1px solid var(--ogx-grid-border-color);
+  border-inline-start: var(--ogx-grid-column-divider-width) solid var(--ogx-grid-column-divider-color, var(--ogx-grid-border-color));
 }
 /* When the columns are narrower than the grid, the free space goes before the right-pinned section. */
 .ogx__cell--pinned-right-first {

package/lib/components/ColumnGroupHeader/ColumnGroupHeader.css

@@ -8,7 +8,7 @@
     display: flex;
     align-items: stretch;
     background: var(--ogx-grid-header-background);
-    border-bottom: 1px solid var(--ogx-grid-border-color);
+    border-bottom: var(--ogx-grid-row-divider-width) solid var(--ogx-grid-row-divider-color, var(--ogx-grid-border-color));
     /* No overflow clipping: it would make the row the scroll container of its sticky (pinned) cells. */
     flex-shrink: 0;
     min-height: var(--ogx-header-height, 48px);
@@ -31,7 +31,7 @@
     inset-inline-end: 0;
     top: 25%;
     height: 50%;
-    width: 1px;
+    width: var(--ogx-grid-header-column-divider-width);
     background-color: var(--ogx-color-gray-300, #cbd5e1);
     opacity: 0.5;
 }

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.css

@@ -2,6 +2,7 @@
   background: var(--ogx-overlay-background, var(--ogx-color-white));
   border: var(--ogx-border-width-thin) solid var(--ogx-overlay-border, var(--ogx-border-color));
   border-radius: var(--ogx-border-radius-sm);
+  font-family: var(--ogx-overlay-font-family, inherit);
   min-width: 250px;
   max-width: 350px;
   box-shadow: var(--ogx-shadow-lg);
@@ -120,7 +121,8 @@
 }
 
 .ogx-column-visibility-panel__label {
-  font-size: var(--ogx-font-size-xs);
+  font-size: var(--ogx-overlay-font-size, var(--ogx-font-size-xs));
+  font-weight: var(--ogx-overlay-font-weight, inherit);
   color: var(--ogx-overlay-text, var(--ogx-color-gray-900));
   user-select: none;
   cursor: inherit;

package/lib/components/DataGrid/DataGrid.css

@@ -3,8 +3,8 @@
   flex-direction: column;
   width: 100%;
   background: var(--ogx-grid-background);
-  border: 1px solid var(--ogx-grid-border-color);
-  border-radius: var(--ogx-border-radius-lg);
+  border: var(--ogx-grid-border-width) solid var(--ogx-grid-border-color);
+  border-radius: var(--ogx-grid-border-radius, var(--ogx-border-radius-lg));
   font-family: var(--ogx-font-family);
   position: relative;
   box-shadow: var(--ogx-shadow-sm);
@@ -12,12 +12,12 @@
   overflow: hidden;
 }
 .ogx > :first-child {
-  border-top-left-radius: calc(var(--ogx-border-radius-lg) - 1px);
-  border-top-right-radius: calc(var(--ogx-border-radius-lg) - 1px);
+  border-top-left-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
+  border-top-right-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
 }
 .ogx > :last-child {
-  border-bottom-left-radius: calc(var(--ogx-border-radius-lg) - 1px);
-  border-bottom-right-radius: calc(var(--ogx-border-radius-lg) - 1px);
+  border-bottom-left-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
+  border-bottom-right-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
 }
 .ogx:hover {
   box-shadow: var(--ogx-shadow-md);
@@ -150,7 +150,7 @@
   min-height: 0;
   pointer-events: none;
   z-index: var(--ogx-z-index-modal);
-  border-radius: var(--ogx-border-radius-lg);
+  border-radius: var(--ogx-grid-border-radius, var(--ogx-border-radius-lg));
   overflow: hidden;
 }
 .ogx__loading-overlay--custom {
@@ -243,7 +243,7 @@
   justify-content: center;
   overflow: hidden;
   box-sizing: border-box;
-  border-inline-end: 1px solid var(--ogx-grid-border-color);
+  border-inline-end: var(--ogx-grid-column-divider-width) solid var(--ogx-grid-column-divider-color, var(--ogx-grid-border-color));
   position: relative;
 }
 .ogx__aggregation-cell--pinned-left,
@@ -265,7 +265,7 @@
   background: var(--ogx-grid-header-background);
 }
 .ogx__aggregation-cell--pinned-right {
-  border-inline-start: 1px solid var(--ogx-grid-border-color);
+  border-inline-start: var(--ogx-grid-column-divider-width) solid var(--ogx-grid-column-divider-color, var(--ogx-grid-border-color));
 }
 .ogx__aggregation-cell--pinned-left-last {
   overflow: visible;