@opencorestack/opengridx 3.5.1 → 3.7.0

package/docs/API_REFERENCE.md

@@ -243,7 +243,7 @@ Public CSS: `ogx__cell-fill-handle` (24 × 24 px hit area in the corner cell; th
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
-| `localeText` | `GridLocaleText` | — | Override user-visible strings: the Pagination labels, the empty-state label (`noRowsLabel`, which wins over the `noRowsLabel` prop), the cell-range announcement and the Ask AI button (`aiAssistantButton`). See [`GridLocaleText`](#gridlocaletext). |
+| `localeText` | `GridLocaleText` | — | Override user-visible strings: the Pagination labels, the empty-state label (`noRowsLabel`, which wins over the `noRowsLabel` prop), the cell-range announcement, the Ask AI button (`aiAssistantButton`) and the header filter row (`headerFilter*`, v3.6). See [`GridLocaleText`](#gridlocaletext). |
 
 #### Imperative Ref
 
@@ -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).
 
@@ -889,6 +890,19 @@ interface GridLocaleText {
   cellSelectionAnnouncement?: (cellCount: number, rowCount: number, columnCount: number) => string;
   /** v3.5: label of the toolbar's Ask AI button. Default "Ask AI". */
   aiAssistantButton?: string;
+  /** v3.6: header filter row strings (defaults in English). See features/header-filters.md#translating-the-row. */
+  headerFilterCustom?: string;                      // "Custom filter"
+  headerFilterCustomTooltip?: string;               // "Set in the filter panel"
+  headerFilterCellLabel?: (header: string) => string;           // "Filter Qty"
+  headerFilterValueLabel?: (header: string) => string;          // "Filter value for Qty"
+  headerFilterOperatorButtonLabel?: (header: string, operatorLabel: string) => string; // "Filter operator for Qty: Equals"
+  headerFilterOperatorMenuLabel?: (header: string) => string;   // "Filter operator for Qty"
+  headerFilterClearLabel?: (header: string) => string;          // "Clear filter for Qty"
+  headerFilterClearTooltip?: string;                // "Clear"
+  headerFilterAny?: string;                         // "Any"
+  headerFilterTrue?: string;                        // "Yes"
+  headerFilterFalse?: string;                       // "No"
+  headerFilterOperators?: Partial<Record<GridFilterOperator, string>>; // operator names
 }
 ```
 

package/docs/README.md

@@ -48,9 +48,11 @@ In-depth guides on the grid's functional capabilities.
 - **[Cell Spanning](features/cell-spanning.md)** - Row and Col span spanning
 - **[Master-Detail](features/master-detail.md)** - Expandable Detail Panels
 - **[Keyboard & Accessibility](features/keyboard-navigation.md)** - Keys, focus behaviour and ARIA structure
+- **[Right-to-Left (RTL)](features/rtl.md)** - What works in `dir="rtl"`, what was fixed, and the known limitations (pinned columns)
 - **[List View](features/list-view.md)** - Card-based responsive layout
 - **[Infinite Scroll](features/infinite-scroll.md)** - Advanced performance loading
 - **[Data Source](features/data-source.md)** - Server-side fetching and SSR
+- **[Next.js (App Router)](features/nextjs.md)** - Client components, server-fetched rows, Route Handlers, the AI toolkit on server and client, common errors
 - **[Export Guide](features/export-guide.md)** - Excel, CSV, JSON, and Print
 - **[AI Toolkit](features/ai-toolkit.md)** - JSON Schema of the grid state for your own model, a validator for its replies, the **Ask AI** panel (`aiAssistant`) and tools for AI agents (`@opencorestack/opengridx/ai`)
 

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/ai-toolkit.md

@@ -104,7 +104,7 @@ getGridAiSchema(
 
 ## `validateGridAiState(json, columns, options?)`
 
-Returns `{ state, errors }`, where `state` is a `GridAiState` (`filterModel`, `sortModel`, `rowGroupingModel`, `aggregationModel`, `pivotModel`, `columnVisibilityModel`, each present only when the reply contained it) and `errors` is a list of `{ path, message }`, such as `{ path: 'filterModel.items[2].field', message: 'Unknown field "revenue"' }`.
+Returns `{ state, errors }`, where `state` is a `GridAiState` (`filterModel`, `sortModel`, `rowGroupingModel`, `aggregationModel`, `pivotModel`, `columnVisibilityModel`, each present only when the reply contained it) and `errors` is a list of `{ path, message }`, such as `{ path: 'filterModel.items[2].field', message: 'Unknown field "revenue"' }`. A top-level string `message` key (the model's reply text, which `createGridAiPromptHandler` shows) is skipped in both object and JSON string input, so you can validate a whole reply without removing it first; a `message` that is not a string is reported.
 
 - `json` may be an object or a JSON string. Bad JSON gives one error and an empty state.
 - Unknown parts, unknown fields, fields a column does not allow (`filterable: false` …), operators that do not fit the column type, and functions or enum values outside the allowed list are **dropped**, each with an error. Parts outside `options.include` / `options.exclude` are dropped too.
@@ -172,7 +172,7 @@ A copied state (`{ ...result.state }`) or a hand-built one is not branded.
 Returns the `onPrompt` function. It builds the schema once (from `columns`, limited to `parts` and `schemaOptions`), then for each prompt:
 
 1. calls `callModel({ prompt, schema, currentState, history }, { signal })`;
-2. reads the reply: a state object, a JSON string, or text with a fenced `json` block (the text around the block becomes `result.message`). An object's string `message` key is the message, not state. Plain text with no JSON becomes the message with nothing to apply;
+2. reads the reply: a state object, a JSON string, or text with a fenced `json` block (the text around the block becomes `result.message`). A string `message` key in the state object (or in the JSON of a string reply) is the message, not state; when a fenced block has text around it and a `message` key inside, both are kept, joined by a blank line. Plain text with no JSON becomes the message with nothing to apply;
 3. validates it with `validateGridAiState` (same `parts`) and returns the branded `{ state, errors, message? }`.
 
 A `callModel` throw or rejection becomes `{ state: {}, errors: [{ path: '', message: 'The model call failed: …' }] }`. An abort (Stop, a new prompt, closing the panel) rejects with an `AbortError`, even when `callModel` ignores the signal.

package/docs/features/export-guide.md

@@ -2,6 +2,8 @@
 
 The DataGrid provides built-in export utilities for multiple formats. The standard exports (CSV, JSON, Print, basic Excel) have **zero dependencies**. The advanced Excel export uses [ExcelJS](https://github.com/exceljs/exceljs) loaded lazily.
 
+`exceljs` is an optional peer dependency: install it (`npm install exceljs`) only if you call `exportToExcelAdvanced`. Apps without it still build in Vite, webpack 5 and Next.js (Turbopack and webpack; webpack prints a `Module not found` warning for the optional import), and `exportToExcelAdvanced` then rejects with `exportToExcelAdvanced requires 'exceljs'. Run: npm install exceljs`. Before v3.6, webpack and Next.js builds failed without it.
+
 ## Available Export Formats
 
 | Format | Function | Deps | Description |

package/docs/features/header-filters.md

@@ -107,6 +107,40 @@ The filter row is a header row (`role="row"`) between the column headers and the
 
 Inside a control, arrow keys edit the text (or move through a select) and do not move the grid's focus, as in a cell editor. **Escape** returns focus to the filter cell. **Tab** leaves the grid: the grid stays a single Tab stop and every control in the row has `tabIndex={-1}`.
 
+## Translating the row
+
+Every string the row shows or announces comes from `localeText` (v3.6). Each key defaults to the English text below.
+
+| `GridLocaleText` key | Type | Default |
+| :--- | :--- | :--- |
+| `headerFilterCustom` | `string` | `"Custom filter"` |
+| `headerFilterCustomTooltip` | `string` | `"Set in the filter panel"` |
+| `headerFilterCellLabel` | `(header) => string` | `` `Filter ${header}` `` (the cell's `aria-label`) |
+| `headerFilterValueLabel` | `(header) => string` | `` `Filter value for ${header}` `` |
+| `headerFilterOperatorButtonLabel` | `(header, operatorLabel) => string` | `` `Filter operator for ${header}: ${operatorLabel}` `` |
+| `headerFilterOperatorMenuLabel` | `(header) => string` | `` `Filter operator for ${header}` `` |
+| `headerFilterClearLabel` | `(header) => string` | `` `Clear filter for ${header}` `` |
+| `headerFilterClearTooltip` | `string` | `"Clear"` |
+| `headerFilterAny` | `string` | `"Any"` (boolean and `singleSelect` selects) |
+| `headerFilterTrue` / `headerFilterFalse` | `string` | `"Yes"` / `"No"` |
+| `headerFilterOperators` | `Partial<Record<GridFilterOperator, string>>` | English names ("Contains", "Is empty", ...); operators left out keep them |
+
+```tsx
+<DataGrid
+    headerFilters
+    localeText={{
+        headerFilterAny: 'Tous',
+        headerFilterTrue: 'Oui',
+        headerFilterFalse: 'Non',
+        headerFilterCellLabel: (h) => `Filtrer ${h}`,
+        headerFilterOperators: { contains: 'Contient', isEmpty: 'Est vide' },
+    }}
+    /* ... */
+/>
+```
+
+The operator symbols on the buttons (`=`, `≠`, `>`) are not translated. Demo: *Locale Text* (`/locale-text`).
+
 ## Layout
 
 - The row sits inside the sticky header block (`.ogx__header-wrap`), under any column group rows and the column header row, so it stays at the top while rows scroll.

package/docs/features/keyboard-navigation.md

@@ -108,6 +108,8 @@ In `listView`, focus moves between whole rows instead of cells:
 
 Keys pressed in content your `renderCell` puts in a row (inputs, buttons) are left to that content.
 
+In a right-to-left grid (`dir="rtl"`, v3.6) ArrowLeft and ArrowRight follow the screen: ArrowLeft moves to the next column, and the Alt+Arrow shortcuts (expand / collapse, header resize) are mirrored the same way. See [Right-to-Left](rtl.md).
+
 ## ARIA structure
 
 | Element | Attributes |

package/docs/features/nextjs.md

@@ -0,0 +1,241 @@
+# Next.js (App Router)
+
+OpenGridX is a client component: it uses state, effects, context and the DOM. In the App Router you render it from a file marked `'use client'`, and fetch the data in Server Components or Route Handlers.
+
+Everything on this page was built with `next build`, served with `next start` and loaded in Chromium, Firefox and WebKit without console errors, on Next.js 16.4 (Turbopack; `next build --webpack` also builds) and 15.5 (webpack), React 19.3.
+
+## 1. Install and import the stylesheet
+
+```bash
+npm install @opencorestack/opengridx
+```
+
+Import the stylesheet once, in the root layout:
+
+```tsx
+// app/layout.tsx
+import type { ReactNode } from 'react';
+import '@opencorestack/opengridx/styles';
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+    return (
+        <html lang="en">
+            <body>{children}</body>
+        </html>
+    );
+}
+```
+
+### The optional export peers
+
+`exportToExcelAdvanced` needs `exceljs`, and `exportToPdf` needs `jspdf` + `jspdf-autotable`. The grid loads them with `import()` only when you call those functions. Install them if you use those exports:
+
+```bash
+npm install exceljs jspdf jspdf-autotable
+```
+
+If you do not install them, the app still builds (Turbopack and webpack treat these imports as optional; webpack prints a `Module not found` **warning**, not an error) and every other export works. Calling `exportToExcelAdvanced` or `exportToPdf` then rejects with an install hint such as `exportToExcelAdvanced requires 'exceljs'. Run: npm install exceljs`. No `next.config` alias is needed from v3.6. In 3.5.1 and earlier `next build` failed with `Module not found: Can't resolve 'exceljs'` without the peers.
+
+## 2. Render the grid from a client component
+
+Column definitions usually hold functions (`valueFormatter`, `renderCell`, `valueGetter`). Functions cannot cross from a Server Component to a Client Component, so **define the columns in the client file**:
+
+```tsx
+// app/OrdersGrid.tsx
+'use client';
+
+import { DataGrid, GridToolbar, type GridColDef } from '@opencorestack/opengridx';
+import type { Order } from '../lib/orders';
+
+const columns: GridColDef<Order>[] = [
+    { field: 'id', headerName: 'ID', type: 'number', width: 80 },
+    { field: 'customer', headerName: 'Customer', flex: 1 },
+    {
+        field: 'amount',
+        headerName: 'Amount',
+        type: 'number',
+        width: 140,
+        valueFormatter: ({ value }) => `$${Number(value).toFixed(2)}`,
+    },
+    { field: 'shipped', headerName: 'Shipped', type: 'boolean', width: 110 },
+];
+
+export function OrdersGrid({ rows }: { rows: Order[] }) {
+    return (
+        <DataGrid
+            rows={rows}
+            columns={columns}
+            height={480}
+            checkboxSelection
+            headerFilters
+            slots={{ toolbar: GridToolbar }}
+        />
+    );
+}
+```
+
+Give the grid a `height` (or a parent with a bounded height): without one it fills its container, and in an auto-height page that means every row renders. See [Virtualization](virtualization.md).
+
+## 3. Fetch rows in a Server Component
+
+The page stays a Server Component. It loads the rows and passes them as props. Props must be serialisable: plain objects, arrays, strings, numbers, booleans, `null`. `Date` objects survive; class instances, `Map`s with functions and functions do not.
+
+```tsx
+// app/page.tsx (Server Component, no 'use client')
+import { getOrders } from '../lib/orders';
+import { OrdersGrid } from './OrdersGrid';
+
+export default async function Page() {
+    const rows = await getOrders(); // a database query, fetch() to your API, ...
+    return <OrdersGrid rows={rows} />;
+}
+```
+
+The grid renders on the server (the first screen of rows is in the HTML) and hydrates in the browser.
+
+**Rendering `<DataGrid>` straight from a Server Component** works from v3.6, whose bundle starts with `'use client'`, as long as every prop is serialisable (`columns={[{ field: 'name' }]}`, no functions). In 3.5.1 and earlier it fails with `TypeError: createContext is not a function`. Wrapping the grid in your own client file, as above, works in every version and is where your column functions belong anyway.
+
+## 4. Server-side data with `dataSource` and a Route Handler
+
+For large tables, let the server sort, filter and page. The `dataSource` lives in the client file and calls a Route Handler:
+
+```tsx
+// app/orders/ServerOrdersGrid.tsx
+'use client';
+
+import { DataGrid, GridToolbar, type GridColDef, type GridDataSource } from '@opencorestack/opengridx';
+import type { Order } from '../../lib/orders';
+
+const columns: GridColDef<Order>[] = [
+    { field: 'id', headerName: 'ID', type: 'number', width: 80 },
+    { field: 'customer', headerName: 'Customer', flex: 1 },
+    { field: 'amount', headerName: 'Amount', type: 'number', width: 140 },
+];
+
+// Module scope (or useMemo): a new dataSource object on every render refetches.
+const dataSource: GridDataSource<Order> = {
+    getRows: async (params) => {
+        const res = await fetch('/api/orders', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(params),
+        });
+        if (!res.ok) throw new Error(`Orders request failed: ${res.status}`);
+        return res.json();
+    },
+};
+
+export function ServerOrdersGrid() {
+    return (
+        <DataGrid
+            rows={[]}
+            columns={columns}
+            dataSource={dataSource}
+            sortingMode="server"
+            filterMode="server"
+            paginationMode="server"
+            pagination
+            initialState={{ pagination: { paginationModel: { page: 0, pageSize: 25 } } }}
+            height={480}
+            slots={{ toolbar: GridToolbar }}
+        />
+    );
+}
+```
+
+```ts
+// app/api/orders/route.ts
+import type { GridGetRowsParams, GridGetRowsResponse } from '@opencorestack/opengridx';
+import { queryOrders } from '../../../lib/orders';
+
+export async function POST(request: Request) {
+    const params = (await request.json()) as GridGetRowsParams;
+    // params: startRow, endRow, sortModel, filterModel (items, quickFilterValues), groupKeys
+    const { rows, total } = await queryOrders(params);
+    const body: GridGetRowsResponse = { rows, rowCount: total };
+    return Response.json(body);
+}
+```
+
+Importing types from the package in a Route Handler is free: they are erased at build time. See [Data Source](data-source.md) for the request and response shapes.
+
+## 5. The AI toolkit (`@opencorestack/opengridx/ai`)
+
+`@opencorestack/opengridx/ai` has no React code and no imports, so it runs anywhere: Server Components, Route Handlers, middleware and the browser.
+
+- **On the server**: build the schema (`getGridAiSchema`) for your model call, and keep your API key there. You may also run `validateGridAiState` on the reply to log or reject bad answers.
+- **In the browser**: the grid applies a reply only if `validateGridAiState` branded it, and the brand is a `Symbol` that does not survive JSON. So the reply must be validated again on the client. `createGridAiPromptHandler` does that for you:
+
+```tsx
+// app/ai/AiOrdersGrid.tsx
+'use client';
+
+import { DataGrid, GridToolbar } from '@opencorestack/opengridx';
+import { createGridAiPromptHandler } from '@opencorestack/opengridx/ai';
+import { aiColumns } from '../../lib/aiColumns'; // plain column data, shared with the route
+import type { Order } from '../../lib/orders';
+
+const onPrompt = createGridAiPromptHandler({
+    columns: aiColumns,
+    callModel: async (request, { signal }) => {
+        // request: { prompt, schema, currentState, history }
+        const res = await fetch('/api/grid-ai', { method: 'POST', body: JSON.stringify(request), signal });
+        return res.json(); // e.g. { filterModel, sortModel, message }
+    },
+});
+
+export function AiOrdersGrid({ rows }: { rows: Order[] }) {
+    return <DataGrid rows={rows} columns={aiColumns} height={480} slots={{ toolbar: GridToolbar }} aiAssistant={{ onPrompt }} />;
+}
+```
+
+```ts
+// app/api/grid-ai/route.ts
+import { validateGridAiState } from '@opencorestack/opengridx/ai';
+import { aiColumns } from '../../../lib/aiColumns';
+
+export async function POST(request: Request) {
+    const { prompt, schema, currentState } = await request.json();
+    const reply = await callYourModel({ prompt, schema, currentState }); // your SDK, with `schema` as structured output
+    // Optional server-side check. A string `message` key is skipped, not reported as an error.
+    const { errors } = validateGridAiState(reply, aiColumns);
+    if (errors.length) console.info('Model reply had invalid parts:', errors);
+    return Response.json(reply);
+}
+```
+
+Columns shared between the route and the client must be plain data (no functions), or the server gets a client reference instead of the array. Keep a function-free list such as `aiColumns` in a module without `'use client'`, and spread extra function fields onto it in the client file if the grid needs them.
+
+## Pages Router
+
+The Pages Router has no Server Components: every page is a client component that also renders on the server. Import the grid directly in the page, and the stylesheet in `pages/_app.tsx`:
+
+```tsx
+// pages/_app.tsx
+import type { AppProps } from 'next/app';
+import '@opencorestack/opengridx/styles';
+
+export default function App({ Component, pageProps }: AppProps) {
+    return <Component {...pageProps} />;
+}
+```
+
+Column functions can stay in the page. Rows from `getServerSideProps` / `getStaticProps` must be JSON-serialisable (no `Date`; send ISO strings and use `valueGetter`).
+
+## Common errors
+
+| Error | Cause and fix |
+| :--- | :--- |
+| `You're importing a module that depends on useState into a React Server Component module` (webpack: `…needs useState. This React hook only works in a Client Component`) | A file of yours that calls hooks (or wraps the grid) has no `'use client'`. Add it at the top of the file that renders `<DataGrid>`. |
+| `TypeError: createContext is not a function` (build: "Failed to collect page data") | 3.5.1 or earlier, imported from a Server Component. Render the grid from a `'use client'` file, or upgrade. |
+| `Functions cannot be passed directly to Client Components` … `{field: "name", valueFormatter: function}` | Columns with functions built in a Server Component. Define them in the client file. |
+| `Module not found: Can't resolve 'exceljs'` (or `jspdf`) | 3.5.1 or earlier without the optional export peers. Upgrade, or install them (section 1). From v3.6 webpack shows this as a warning only. |
+| Unstyled grid, every row rendered, dev warning `[OpenGridX] The grid stylesheet is not loaded` | The stylesheet is not imported. Add `import '@opencorestack/opengridx/styles'` to `app/layout.tsx` (or `pages/_app.tsx`). |
+| `Hydration failed because the server rendered HTML didn't match the client` | Usually rows or cell text that differ between server and client: `Math.random()`, `Date.now()`, `toLocaleString()` without a fixed locale and time zone in a `valueFormatter`. Fetch rows on the server and pass them as props, and format with an explicit locale (`toLocaleString('en-US', { timeZone: 'UTC' })`). Rows created in an effect or with `typeof window` branches render differently on the server; build them once on the server instead. |
+| The grid refetches in a loop with `dataSource` | The `dataSource` object is recreated on every render. Define it at module scope or with `useMemo`. |
+
+## See also
+
+- [Data Source](data-source.md)
+- [AI Toolkit](ai-toolkit.md)
+- [Export Guide](export-guide.md)

package/docs/features/pdf-export.md

@@ -10,6 +10,8 @@ Generate a styled PDF report from grid data using `exportToPdf()`.
 npm install jspdf jspdf-autotable
 ```
 
+They are optional: an app that never calls `exportToPdf` need not install them, and still builds in Vite, webpack 5 and Next.js (webpack prints a `Module not found` warning for the optional import, not an error). Without them `exportToPdf` rejects with the install hint below.
+
 > **Currency symbols such as `₹` print as `?` by default.** The built-in Helvetica font only covers Latin-1. Pass the [`font` option](#non-latin-text-and-unicode-fonts) with a Unicode `.ttf`:
 >
 > ```ts

package/docs/features/pinning.md

@@ -35,6 +35,8 @@ Pinned column headers are not draggable and are not drop targets for header drag
 
 ---
 
+> **Right-to-left:** `left` and `right` are the inline **start** and **end** sides. In a `dir="rtl"` grid `pinnedColumns.left` (and the pinned checkbox, expand and reorder columns) stick to the right edge, `pinnedColumns.right` to the left edge, and the shadows fall towards the scrolling columns. The column menu's *Pin to Left* / *Pin to Right* items pin by screen side, so in RTL *Pin to Left* adds the column to `pinnedColumns.right`. See [Right-to-Left](rtl.md#pinned-columns).
+
 ## ⬆️ Row Pinning
 
 Rows can be pinned to the top or bottom of the grid. Pinned rows remain visible while the user scrolls vertically through the grid body.