@opencorestack/opengridx 3.9.0 → 3.10.0

package/docs/API_REFERENCE.md

@@ -988,6 +988,10 @@ interface GridLocaleText {
   aiAssistantAppliedChanges; aiAssistantRemoveChange(label); aiAssistantUndo; aiAssistantIgnored; aiAssistantIgnoredItem(message);
   aiAssistantEarlier; aiAssistantThinking; aiAssistantStopped; aiAssistantUndone; aiAssistantChangeRemoved;
   aiAssistantApplied(applied, ignored); aiAssistantNotValidated; aiAssistantFailed(message); aiAssistantUnknownError;
+  // AI assistant change chips (v3.10; filter operators in the chips use filterPanelOperators)
+  aiAssistantChipSearch(words); aiAssistantChipNoFilters; aiAssistantChipSort(field, 'asc' | 'desc'); aiAssistantChipNoSorting;
+  aiAssistantChipGroup(field); aiAssistantChipNoGrouping; aiAssistantChipSummary(fn, field); aiAssistantChipNoSummaries;
+  aiAssistantChipPivot(fields); aiAssistantChipNoPivot; aiAssistantChipVisibility(field, visible);
   // Pagination buttons
   paginationLabel; paginationFirstPageLabel; paginationFirstPageTooltip; paginationPreviousPageLabel;
   paginationPreviousPageTooltip; paginationNextPageLabel; paginationNextPageTooltip;

package/docs/architecture/datagrid-orchestration.md

@@ -113,10 +113,12 @@ in an effect, so **keep the call order when you move or add a hook**. In particu
 `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`. `GridRoot` builds the overlay slot elements and passes the
+`GridLoadingOverlay` and `GridErrorOverlay`. `GridRoot` also provides `GridLocaleContext` (v3.9) around all of them: `localeText`, kept stable while shallowly equal (`useShallowStableValue`), resolved once by `resolveGridLocale` (`lib/utils/gridLocale.ts`); components and `Row` read it with `useGridLocale()` instead of a prop, so `Row` gets no prop that changes per render. `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
+range enters or leaves. The same rule holds for every row prop (v3.9): `editingCell` goes only to the row being
+edited, `focusedCellField` only to the focused row, and the row click and checkbox handlers keep one identity
+(`useGridRowInteractions` reads the latest handlers when called). `DataGrid.rowMemo.test.tsx` guards it. `rowRenderProps.fillHandle` (v3.5) adds `fillHandleCol` to the one row that draws the fill
 handle (a single selected cell gets an empty column interval, so it draws the handle but no range).

package/docs/architecture/use-grid-virtualization.md

@@ -90,6 +90,8 @@ Row heights include an expanded detail panel's height, so the prefix sums accoun
 
 Columns use the same search on `unpinnedAccWidths` (also inclusive), relative to the left edge of the unpinned area (`scrollLeft - leftPinnedWidth`), widened by 6 columns on each side. The skipped widths become `__spacer_left__` / `__spacer_right__` entries (`isSpacer: true`) in `virtualColumns`.
 
+The column window is computed in its own `useMemo` (v3.9), over the column parts of the layout (`unpinnedAccWidths`, `unpinnedColsWithWidth`, the pinned column lists and widths), `scrollLeft` and the viewport width only. A row change (an edit), a vertical scroll or a row-height change therefore keeps the same `virtualColumns` array, and `Row`, which is memoised on its props, does not re-render for it. `useLayout` returns the row and column parts from separate memos (v3.7.1), so the column fields keep their identity while rows change.
+
 When a column declares `colSpan` / `rowSpan`, `DataGrid` widens this window afterwards (`useGridSpanRowWindow` / `useGridSpanColumnWindow`) so a span whose origin is outside the window is not cut.
 
 ---

package/docs/components/pagination.md

@@ -41,7 +41,7 @@ You can replace the internal pagination UI using the `pagination` slot:
 
 ## 🌍 Internationalisation
 
-Pass `localeText` on `<DataGrid />` to override the text labels in the Pagination component (rows-per-page, range, and page-counter labels). The rows-per-page select takes its accessible name from the `paginationRowsPerPage` label. The navigation landmark label (`aria-label="Pagination"`) and the button labels and titles (`Go to next page`, `Next page`, …) are hardcoded and not overrideable via `localeText`.
+Pass `localeText` on `<DataGrid />` to override the text labels in the Pagination component (rows-per-page, range, and page-counter labels). The rows-per-page select takes its accessible name from the `paginationRowsPerPage` label. Since v3.9 the navigation landmark label (`paginationLabel`, default `"Pagination"`) and each button's label and tooltip (`paginationNextPageLabel` / `paginationNextPageTooltip` → `"Go to next page"` / `"Next page"`, and the same for First, Previous and Last) are `localeText` keys as well.
 
 | Key | Type | Default |
 | :--- | :--- | :--- |

package/docs/features/ai-toolkit.md

@@ -146,6 +146,7 @@ const onPrompt = createGridAiPromptHandler({
 - **Applying.** The reply is applied immediately as one undoable step. Each change shows as a removable chip: a filter item, the quick-filter words, a sort key, a grouping field, an aggregation, a column shown or hidden, the pivot. Removing a chip re-applies the reply without it (a part with no chip left returns to its value from before the reply). **Undo** restores the state from before the reply. This view-state undo is separate from the cell-edit undo history (`undoRedo`).
 - **What is applied.** Each part in `result.state` replaces the grid's model, except column visibility, which is merged over the current model (`{ tax: false }` hides one column and leaves the others). Parts outside `aiAssistant.parts` are ignored. A part the validator emptied (every entry dropped, such as a sort on an unknown field) is not applied, so it cannot clear the grid's model by accident. Changes go through the same handlers as the UI, so `onSortModelChange`, `onRowGroupingModelChange` and the rest fire; with a controlled model, update your state from them.
 - **What was dropped** is listed under the chips, such as `Ignored: Unknown field "revnue"`.
+- **Translating.** Every string of the panel is a `localeText` key (v3.9), including the chips' own texts since v3.10: `aiAssistantChipSort: (field, direction) => \`Tri : ${field}, ${direction === 'desc' ? 'décroissant' : 'croissant'}\``, `aiAssistantChipSummary: (fn, field) => …` (`fn` is the function id, such as `avg`), and the other `aiAssistantChip*` keys in the API reference. Filter operators in the chips use `filterPanelOperators`.
 - **Accessibility.** The panel is a `role="dialog"` labelled "Ask AI". Focus moves to the input when it opens and back to the toolbar button (or wherever it was) when it closes. Escape closes it. The status ("Thinking…", "Applied 3 changes", errors) is announced through the grid's live region.
 - **Events.** `onAiAssistantApply(result)` after a reply was applied; `onAiAssistantError(error)` when `onPrompt` rejects (Stop does not count) or its result was not validated.
 

package/docs/features/rtl.md

@@ -42,7 +42,7 @@ The column menu is labelled by screen side: in RTL *Pin to Left* adds the column
 
 ## Known limitations
 
-- **Menu and panel labels are hard-coded English** ("Pin to Left", "Sort Ascending"); there is no `localeText` key for the column menu yet.
+- ~~Menu and panel labels are hard-coded English~~: since v3.9 every built-in string, including the column menu (`columnMenuPinLeft`, `columnMenuSortAscending`, …), is a `localeText` key. See *Locale text for every UI string* in [`API_REFERENCE.md`](../API_REFERENCE.md).
 - **Header filter operator symbols** are mirrored by the browser's bidi rules (`∋` shows as `∈`), as in any RTL text.
 - **`direction` set through CSS** (a class or stylesheet, not the `dir` attribute) and changed at runtime is not detected; scroll the grid or remount it with a `key`.
 - **Headless Chromium tests:** Playwright launches Chromium with `--hide-scrollbars`. With classic scrollbars (Linux) `scrollbar-gutter: stable` still reserves the gutter, and in RTL Chromium then cannot scroll the last gutter-width of the start into view (`scrollLeft` stops at minus the gutter). A plain scroller without the grid does the same and real browsers with visible scrollbars do not. Tests must compare with the browser's scroll origin, as `DataGrid.rtl.browser.test.tsx` does. To reproduce on macOS: `defaults write chrome-headless-shell AppleShowScrollBars Always` (undo with `defaults delete chrome-headless-shell`).

package/docs/performance.md

@@ -136,7 +136,7 @@ Measured with `npm run bench` (`bench/`), which installs the packed npm package
 | 500,000 (3.5.0) | 295 ms | 493 / 641 ms | 59 ms | 958 ms | 331 ms | 0 % | 39.4 MB |
 | 1,000,000 | 621 ms | 467 / 467 ms | 109 ms | 1,813 ms | 693 ms | 0 % | 76.9 MB |
 
-### Before and after the faster sort, quick filter and grouping (unreleased)
+### Before and after the faster sort, quick filter and grouping (3.6.0)
 
 Medians of 5 runs, the same machine, the 3.5.1 code (`122d431`) and the changed code (`e1df2f1`) measured back to back on 2026-10-12 (`bench/results/2026-10-12-apple-m1-darwin-before.json` and `bench/results/2026-10-12-apple-m1-darwin.json`). Load average at the start of each run: 2.9 (before) and 4.6 (after); an IDE, a browser and other tools were open. Row counts after every filter and grouping were identical in both runs.
 
@@ -162,6 +162,24 @@ What changed: sort keys are read once per row into typed arrays and strings are
 - **Sorting, the quick filter and grouping run on the main thread in one piece.** Up to 100k rows they finish in a few frames; at 1M a sort blocks the page for about 0.35–0.6 s in every engine, grouping for 0.7 s (1.8 s in Firefox), and the first quick-filter keystroke for about 1.8–3 s. For sorting or searching a million rows interactively, use server-side sorting and filtering.
 - **Reach:** past the browser's height cap rows cannot be scrolled to, and in Firefox the grid stops scrolling altogether. See [Reach](#reach-the-browser-height-ceiling).
 
+### Editing, selection and grouping at 1M rows (3.8 – 3.9)
+
+Measured in Chromium on an Apple M1, 1,000,000 rows, from the event to the end of its long task (best of three; not part of `npm run bench`, which covers mount, scroll, sort and filter).
+
+| Interaction | 3.7.0 | 3.8.0 | |
+| :--- | ---: | ---: | :--- |
+| Edit one cell | 561 ms | ~35 ms | the row store is updated in place; id lists over the visible rows are reused |
+| Paste 1,000 × 10 cells | ~790 ms | ~45 ms | |
+| Undo / redo of that paste | ~790 ms | ~45 ms | |
+| Fill 1,000 cells | 809 ms | ~50 ms | |
+| Expand a group | 279 ms | ~135 ms | leaf row metadata built once per tree |
+| Collapse a group | ~120 ms | ~1 ms | |
+| Select all | ~270 ms | ~270 ms (~130 ms in 3.10) | 3.10 builds the 1M-id set once and reuses it for the model it returns; the rest is the live-selection check |
+
+3.9.0 keeps rows memoised: selecting a row, starting or committing an edit, and vertical scrolling re-render only the rows they change (a click re-rendered every visible row, now one). React's own work per interaction is about 3–5 ms at 100k rows.
+
+To keep this, change rows by passing new row objects (never mutate them), keep `columns` and `localeText` shallowly stable (inline objects of plain values are fine; define function entries outside the render). Handlers such as `onRowClick` may be inline: the grid passes rows its own stable handlers.
+
 ### Method
 
 - **The app is the built package.** `bench/app` installs the tarball from `npm pack`, like a consumer, and is a production build (no React development checks).

package/docs/roadmap.md

@@ -85,14 +85,32 @@ This document tracks the current status of features in `OpenGridX` and outlines
 | **3.3.0** ✅ | shipped 7 Oct | **Cell range selection** (opt-in `cellSelection` prop): mouse drag, Shift+click, Shift+arrows; Ctrl+C / Cmd+C copies the block as TSV | Selection status bar (count, sum, average of selected cells); wrapped header text; React Compiler compatibility check |
 | **3.4.0** ✅ | shipped 8 Oct | **Paste from Excel / Google Sheets** into the selection, through `processRowUpdate` (values parsed per column type or `valueParser`, non-editable cells skipped, `onClipboardPaste` summary); **Delete clears a range**; built-in inputs and editors use the shared `Input` / `Checkbox` (`Input variant="cell"`). **Undo / redo** for cell edits and pastes (Ctrl+Z, Ctrl+Shift+Z / Ctrl+Y, `apiRef.undo()` / `redo()`) | **AI toolkit, part 1** in a new `@opencorestack/opengridx/ai` entry point: `getGridAiSchema(columns)` (JSON Schema of the filter, sort, grouping, aggregation, pivot and visibility models the columns allow) and `validateGridAiState(json, columns)` (drops unknown fields and operators, coerces values, returns errors) |
 | **3.5.0** ✅ | shipped 9 Oct | **AI toolkit, part 2**: `aiAssistant={{ onPrompt }}` Ask AI panel (chips, Undo, voice) that calls the app's own model through `createGridAiPromptHandler`; only validated replies apply; `createGridAgentTools(apiRef, columns)` (plain tool objects for CopilotKit, the Vercel AI SDK, provider tool calling or WebMCP) | **Header filter row** (`headerFilters`); **fill handle** (series, Alt copy, Ctrl/Cmd+D / R); `rowGroupingModel` controlled/uncontrolled pair |
+| **3.5.1** ✅ | shipped 10 Oct | **Content height capped to the browser's limit** (Firefox collapsed grids taller than ~17.9M px) | Dev warning names the reachable row count |
+| **3.6.0** ✅ | shipped 12 Oct | **Sorting 3–5× faster** (typed-array keys) | Next.js `'use client'` banner; optional peers safe in webpack / Turbopack; **RTL parts 1 and 2** (pinned columns); header filter `localeText` |
+| **3.7.0** ✅ | shipped 13 Oct | **Theme Builder** demo page + 16 theme keys | `DataGrid.tsx` split (`GridRoot` / `GridViewport`, composite hooks); types split per domain; demo smoke test |
+| **3.7.1** ✅ | shipped 13 Oct | Audit fixes: exports survive a throwing `valueGetter`; **formula escaping of `valueFormatter` text** (security) | Quick filter matches shown text; date paste fixes; list view theme; CSS reset scoped to the grid |
+| **3.8.0** ✅ | shipped 13 Oct | **Edits at 1M rows 10–20× faster** (in-place row store; edit ~35 ms, paste ~45 ms) | Group expand ~2×, collapse ~1 ms |
+| **3.8.1** ✅ | shipped 13 Oct | **Grid buttons keep their own styles** (AI panel, toolbar active states) | Exact `bigint` sort; stricter number text; dead-code cleanup; every export documented |
+| **3.9.0** ✅ | shipped 13 Oct | **`localeText` for every UI string** (~200 keys) | 9 theme keys + Theme Builder controls; rows stay memoised through selection and editing; demo sidebar by priority |
+| **3.9.1** ✅ | shipped 13 Oct | **npm package no longer ships 1.6 MB of test baselines** | `check:package` guard in CI; version badges read `package.json`; docs brought up to date |
+| **3.10.0** ✅ | shipped 13 Oct | **Backlog cleared**: refactors (R4–R6), CI guards, select-all ~2× faster | AI change chips translatable; demo syntax highlighting |
 | Freeze | 19 Dec – 5 Jan | Bug fixes only | — |
 
+### Now: backlog first (feature hold since 13 Oct; backlog cleared in 3.10)
+
+New features (the *Next* list below) wait until the open fixes, refactors and performance work are done. Tracked in [`superpowers/plans/2026-10-13-audit-tracker.md`](superpowers/plans/2026-10-13-audit-tracker.md):
+
+*   ✅ **Refactors** (no behaviour change, 3.10): `as unknown as` casts 43 → 15 (R4), files over 600 lines split (R5), keydown handling as a typed, tested function (R6); CI guards against regressions (`check:compiler`, `check:versions`, ESLint `no-explicit-any` and no new `as unknown as`).
+*   **Performance**: ✅ select-all at 1M rows ~260 → ~130 ms (3.10, no API change). ❌ The time-sliced filter / sort pipeline is closed: it was 1.5–2× slower in total (target ≤ 20 %) and the remaining 1M-row sort pause is better served by a `dataSource`; see the [proposal's status](superpowers/specs/2026-10-12-nonblocking-pipeline-proposal.md).
+*   ✅ **Demo**: syntax highlighting in the source viewer (3.10).
+*   **Bundle size (4.0)**: an app using only `DataGrid` ships 87 KB gzipped; opt-in [feature modules](superpowers/specs/2026-10-13-feature-modules-proposal.md) would save ~20 KB. Breaking, so planned for 4.0.
+
 ### Across the quarter
 
 *   ✅ **Published benchmark** (done 9 Oct): reproducible 10k / 100k / 500k / 1M-row numbers (scroll frame times, sort, filter and grouping time, memory, the reachable row) in [`docs/performance.md`](performance.md#benchmarks); rerun with `npm run bench`.
 *   ✅ **Next.js App Router guide** (done 12 Oct): [`docs/features/nextjs.md`](features/nextjs.md), verified with `next build` / `next start` on Next.js 15.5 and 16.4. The ES bundle now starts with `'use client'`.
-*   ✅ **RTL check** (done 12 Oct): [`docs/features/rtl.md`](features/rtl.md). Fixed: text alignment, horizontal scrolling and column virtualization, arrow keys, the resize and fill handles, range outlines and auto-scroll, toolbar panel placement. Pinned columns remain a limitation (Q1 2027).
-*   **Demo site**: source viewer on all examples (`DocsLayout` with Vite `?raw`) and syntax highlighting, done alongside each release's demo page.
+*   ✅ **RTL check** (done 12 Oct): [`docs/features/rtl.md`](features/rtl.md). Fixed: text alignment, horizontal scrolling and column virtualization, arrow keys, the resize and fill handles, range outlines and auto-scroll, toolbar panel placement; pinned columns followed in RTL part 2.
+*   **Demo site**: ✅ source viewer on every example (`DocsLayout` with Vite `?raw`); syntax highlighting still open.
 
 ### Definition of done for each feature
 
@@ -115,7 +133,7 @@ This document tracks the current status of features in `OpenGridX` and outlines
 *   **Undo must cover rejected updates**: a `processRowUpdate` that throws or a paste that partly fails must leave the history consistent.
 *   **Wrong AI filters** that look plausible: the validator, visible chips and undo are required, not optional.
 
-## 🔭 Next (Q1 2027)
+## 🔭 Next (Q1 2027) — on hold until the backlog above is closed
 
 
 *   **Row reordering inside tree data and row groups**, touch-friendly (MUI #4821, 405 👍, not in MUI X).
@@ -125,7 +143,7 @@ This document tracks the current status of features in `OpenGridX` and outlines
 *   **Sparklines** and a charts adapter that passes grid state to any chart library.
 *   **AI toolkit, part 3**: smart paste (unstructured text → pending rows) and `apiRef.getAiContext()` for "summarise selection"; an `opengridx-mcp` docs server for coding assistants.
 *   **Tailwind / shadcn theme preset**, sticky header against page scroll.
-*   ✅ **RTL, part 2** (done 12 Oct, [`rtl.md`](features/rtl.md)): pinned columns and pinned system columns with logical sticky offsets and mirrored shadows, column menu pinning by screen side, mirrored pagination arrows and tree chevrons, a direction change on a mounted grid, column reorder by drag checked. Remaining: hard-coded English menu labels (no `localeText` yet), and the bidi-mirrored header filter operator symbols.
+*   ✅ **RTL, part 2** (done 12 Oct, [`rtl.md`](features/rtl.md)): pinned columns and pinned system columns with logical sticky offsets and mirrored shadows, column menu pinning by screen side, mirrored pagination arrows and tree chevrons, a direction change on a mounted grid, column reorder by drag checked. Remaining: the bidi-mirrored header filter operator symbols (the menu labels became `localeText` keys in 3.9).
 
 ### Not planned
 
@@ -136,6 +154,9 @@ This document tracks the current status of features in `OpenGridX` and outlines
 
 ## ✅ Implemented Features (Recent)
 
+### 3.3 – 3.9 *(2026-10-07 → 2026-10-13)*
+- Spreadsheet editing (range selection, paste, undo / redo, fill handle), the AI toolkit (schema, validator, Ask AI panel, agent tools), header filters, the 1M-row benchmark and height cap, 3–5× faster sorting, RTL, the Theme Builder, a full audit with security and correctness fixes, 10–20× faster edits at 1M rows and `localeText` for every string. See the release table above and [CHANGELOG.md](../CHANGELOG.md).
+
 ### 3.x releases *(2026-09-29 → 2026-10-01)*
 - **3.0.0** correctness release (rows never modified, typed generics, React 18 support), **3.0.1** fill-height layout fix, **3.1.0** `sortComparator` and column auto-size, **3.2.0** non-blocking PDF export, **3.2.1** Safari boolean editor fix, **3.2.2** linear-time export regexes. Details in [CHANGELOG.md](../CHANGELOG.md); upgrade guide in [migration/v2-to-v3.md](migration/v2-to-v3.md).
 - Package smoke suite against the packed tarball in React 18 and 19 apps, pull-request CI, community files and a wiki generated from these docs.
@@ -158,5 +179,5 @@ This document tracks the current status of features in `OpenGridX` and outlines
 - **Core hook tests**: `useGridRowPipeline`, `useGridControlledState`, `useGridKeyboardNavigation` now have full test coverage (25 new tests).
 - **`CLAUDE.md`**: Root-level AI context file auto-loaded by Claude Code and other AI coding assistants.
 
-*   **Demo app (partial)**: 32 interactive examples across 6 categories (Main features, Advanced features, Components, Customization, Tutorials, Resources) with categorized sidebar navigation and per-page Table of Contents. Source code viewer present on 6 of 32 examples. Syntax highlighting and public deployment are in the upcoming Demo Site section above.
+*   **Demo app**: 56 pages in 13 categories ordered by what developers look for first (3.9), a per-page table of contents, the source viewer on every example, and public deployment on GitHub Pages with a smoke test of every route. Syntax highlighting is still open.
 *   **Quickstart & Installation Guides**: Comprehensive onboarding documentation for developers.

package/lib/components/Cell/Cell.tsx

@@ -8,6 +8,7 @@ import { CellErrorBoundary } from './CellErrorBoundary';
 import { formatValueByType } from '../../utils/values';
 import { attempt } from '../../utils/attempt';
 import { RANGE_BOTTOM, RANGE_CELL, RANGE_FILL_HANDLE, RANGE_LEFT, RANGE_RIGHT, RANGE_TOP } from '../../utils/cellSelection';
+import { untypedColumn } from '../../utils/untypedColumns';
 
 export interface CellProps<R extends GridRowModel = GridRowModel> {
     onCellClick?: (params: GridCellParams<R>) => void;
@@ -306,7 +307,7 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
                             formattedValue={formattedValue}
                             row={row}
                             field={colDef.field}
-                            colDef={colDef as unknown as GridColDef}
+                            colDef={untypedColumn(colDef)}
                             rowIndex={rowIndex}
                             colIndex={colIndex}
                             rowMeta={rowMeta}

package/lib/components/DataGrid/DataGrid.tsx

@@ -3,7 +3,7 @@ import { useLayout } from '../../hooks/core/useLayout';
 import { useGridKeyboardNavigation } from '../../hooks/core/useGridKeyboardNavigation';
 import { useGridControlledState } from '../../hooks/core/useGridControlledState';
 import { useGridThemeDimensions } from '../../hooks/core/useGridThemeDimensions';
-import { useGridRowPipeline, type GridRowPipelineResult } from '../../hooks/core/useGridRowPipeline';
+import { useGridRowPipeline } from '../../hooks/core/useGridRowPipeline';
 import { countReachableRows } from '../../utils/maxElementHeight';
 import { useGridColumns } from '../../hooks/core/useGridColumns';
 import { useGridDetailPanel } from '../../hooks/core/useGridDetailPanel';
@@ -44,7 +44,8 @@ import { useGridKeyboardMode, useGridPointerFocusHandlers } from '../../hooks/co
 import { getPaginationRowCount } from '../../utils/pagination';
 import { useGridToolbarStack } from '../../hooks/core/useGridToolbarStack';
 import { DEFAULT_HEADER_FILTER_HEIGHT } from '../../utils/headerFilters';
-import type { DataGridProps, DataGridUntypedColumnsProps, GridValidRowModel, GridRowModel, GridRowId, GridColDef } from '../../types';
+import type { DataGridProps, DataGridUntypedColumnsProps, GridValidRowModel, GridRowModel, GridColDef } from '../../types';
+import { untypedColumns } from '../../utils/untypedColumns';
 
 /**
  * The grid. `R` is your row type: any object type (an interface works), inferred from `rows`. `columns`
@@ -133,7 +134,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
     const pivot = useGridPivot({
         rows: rows as GridRowModel[],
-        columns: columns as unknown as GridColDef[],
+        columns: untypedColumns(columns),
         pivotMode,
         pivotModel: currentPivotModel,
         filterModel,
@@ -166,7 +167,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     });
 
     const activeRows = pivot.rows as unknown as R[];
-    const baseColumns = pivot.columns as unknown as GridColDef<R>[];
+    const baseColumns = pivot.columns as GridColDef<R>[];
 
     const { activeColumns, effectivePinnedColumns } = useGridGroupingColumn<R>({
         baseColumns, pinnedColumns, hasGroupingColumn, groupingColDef, isTreeData, getTreeDataPath,
@@ -222,13 +223,13 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
     // Steps 12a–13: the edit commit channel, the batch edit and single-cell editing.
     const { editCommitChannel, batchEdit, editingHandlers } = useGridEditPipeline<R>({
-        rowsLookup: state.rows.idRowsLookup as unknown as ReadonlyMap<GridRowId, R>,
+        rowsLookup: gridData.rowsLookup,
         rows: effectiveRows,
         getRowId: getRowIdOf,
         columns: activeColumns,
         processRowUpdate,
         onProcessRowUpdateError,
-        replaceRows: replaceRows as unknown as (rows: ReadonlyMap<GridRowId, R>) => void,
+        replaceRows,
     });
 
     // The selection without ids of removed rows. Only client-owned rows are pruned: a server page
@@ -241,12 +242,12 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         onSelectionModelChange: handleRowSelectionModelChange,
     });
 
-    const dataSourceHandlers = useGridDataSource({
+    const dataSourceHandlers = useGridDataSource<R>({
         dataSource, sortModel, filterModel,
         paginationModel: effectivePaginationModel,
         paginationMode, sortingMode, filterMode, aggregationModel,
         rowGroupingActive: isRowGrouping,
-        getRowId: effectiveGetRowId as unknown as (row: GridRowModel) => GridRowId,
+        getRowId: effectiveGetRowId,
         setRows, setRowCount, setDataSourceLoading, setDataSourceError,
         onAggregationResults: setServerAggregationResults,
         onPaginationModelChange: handlePaginationModelChange,
@@ -290,8 +291,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         density: effectiveDensity,
     });
 
-    const rowPipeline = useGridRowPipeline<GridRowModel>({
-        effectiveRows: effectiveRows as GridRowModel[],
+    const rowPipeline = useGridRowPipeline<R>({
+        effectiveRows,
         activeHierarchyHandlers,
         filterMode,
         filterModel: pivot.pipelineFilterModel,
@@ -303,7 +304,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     });
     const {
         filteredRows, dataRows, pinnedTopRows, pinnedBottomRows, sortedUnpinnedRows, paginatedUnpinnedRows, allRenderableRows,
-    } = rowPipeline as unknown as GridRowPipelineResult<R>;
+    } = rowPipeline;
     // The unpinned rows on screen: the current page, or every row without pagination.
     const centerRows = pagination ? paginatedUnpinnedRows : sortedUnpinnedRows;
 
@@ -345,7 +346,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                 hierarchyField,
                 dataRows,
             }),
-            visibleColumns: renderOrderedColumns as unknown as GridColDef[],
+            visibleColumns: renderOrderedColumns,
         },
     });
 
@@ -359,7 +360,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
     const { aggregationResult, isLoading: isAggregationLoading } = useAggregation({
         rows: dataRows,
-        columns: activeColumns as unknown as GridColDef[],
+        columns: untypedColumns(activeColumns),
         // The pivot's Grand Total row is the aggregate in pivot mode: nothing to total here.
         aggregationModel: isPivotActive ? NO_AGGREGATION_MODEL : aggregationModel,
         // When the server drives the rows (paginates, sorts or filters them), the grid only holds
@@ -437,8 +438,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     // Steps 30–31a: copy, scrollToIndexes and column auto-size on the API.
     const handleColumnAutosize = useGridViewApis<R>({
         apiRef, containerRef, viewportRef,
-        copyColumns: renderedDataColumns as unknown as GridColDef[],
-        getRowId: getRowIdOf as unknown as (row: GridRowModel) => GridRowId,
+        copyColumns: renderedDataColumns,
+        getRowId: getRowIdOf,
         disableClipboardCopy,
         getCellRangeCopyText: cellSelection.enabled ? cellSelection.getCopyText : undefined,
         layout,
@@ -497,7 +498,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         getPendingModel: controlledState.getPendingCellSelectionModel,
         focusedCell, setFocusedCell, allRenderableRows,
         getRowId: getRowIdOf,
-        navigationColumns: navigationColumns as unknown as GridColDef<R>[],
+        navigationColumns,
         columnIndexMap, isCellEditable, rowMetaMap,
         getSpanOrigin: spanning.getSpanOrigin,
         isEditing: editingHandlers.editingCell !== null,
@@ -559,7 +560,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         apiRef, containerRef, localeText,
         aiAssistant: {
             options: aiAssistant,
-            columns: activeColumns as unknown as GridColDef[],
+            columns: untypedColumns(activeColumns),
             onApply: onAiAssistantApply,
             onError: onAiAssistantError,
         },
@@ -598,7 +599,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         pinnedTopRows, pinnedBottomRows, pinnedRows, getRowIdOf,
         showEmptyState: !effectiveLoading && !state.dataSource.error && filteredRows.length === 0,
         effectiveNoRowsLabel, spanRowWindow, visibleRows,
-        baseColumns: columns as unknown as GridColDef<R>[], viewportWidth: state.dimensions.viewportWidth,
+        baseColumns: columns as GridColDef<R>[], viewportWidth: state.dimensions.viewportWidth,
         rowReorderHandlers, paginationMode, dataSourceLoading: state.dataSource.loading,
         sortedUnpinnedRowCount: sortedUnpinnedRows.length, pageSize: effectivePaginationModel.pageSize,
         unpinnedRowsLength: layout.unpinnedRowsLength,

package/lib/components/DataGrid/GridListView.tsx

@@ -35,7 +35,7 @@ export interface GridListViewProps<R extends GridRowModel> {
     /** The page actually shown (the requested page clamped to the last page). */
     currentPage: number;
     pageSizeOptions: number[];
-    selectedRowIds: Set<GridRowId>;
+    selectedRowIds: ReadonlySet<GridRowId>;
     listViewColumn: GridListViewColDef<R>;
     /** Grid columns by field; a list field that names one gets its valueGetter / valueFormatter. */
     columnsByField: ReadonlyMap<string, GridColDef>;

package/lib/components/DataGrid/GridPinnedRows.tsx

@@ -31,7 +31,7 @@ export interface GridPinnedRowsProps<R extends GridRowModel> {
     rows: R[];
     position: 'top' | 'bottom';
     columns: GridColDef<R>[];
-    selectedRowIds: Set<GridRowId>;
+    selectedRowIds: ReadonlySet<GridRowId>;
     checkboxSelection: boolean;
     onRowClick: (params: GridRowParams<R>) => void;
     onRowDoubleClick?: (params: GridRowParams<R>) => void;

package/lib/components/DataGrid/GridViewport.tsx

@@ -15,6 +15,7 @@ import type { UseGridViewportResult } from '../../hooks/core/useGridViewport';
 import type { GridVirtualizationResult } from '../../hooks/core/useGridVirtualization';
 import type { UseColumnReorderReturn } from '../../hooks/useColumnReorder';
 import type { GridSpanningResult } from '../../hooks/features/useGridSpanning';
+import { untypedColumns } from '../../utils/untypedColumns';
 
 /** The props the row renderers (top-pinned, centre and bottom-pinned rows) all take. */
 export type GridRowRenderProps<R extends GridRowModel> = Pick<GridVirtualRowsProps<R>,
@@ -294,7 +295,7 @@ export function GridViewport<R extends GridRowModel>(props: GridViewportProps<R>
                          hidden, pinned and scrolled columns line up. Off in pivot mode (hasAggregation). */}
                     {showAggregationFooter && (
                         <GridAggregationFooter
-                            columns={virtualization.virtualColumns as unknown as GridColDef[]}
+                            columns={untypedColumns(virtualization.virtualColumns)}
                             aggregationModel={aggregationModel}
                             aggregationResult={aggregationResult}
                             columnWidths={columnWidths}

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -41,7 +41,7 @@ export interface GridVirtualRowsProps<R extends GridRowModel> {
     hasDetailPanel: boolean;
     rowReordering: boolean;
     rowHeight: number;
-    selectedRowIds: Set<GridRowId>;
+    selectedRowIds: ReadonlySet<GridRowId>;
     onRowClick: (params: GridRowParams<R>) => void;
     onRowDoubleClick?: (params: GridRowParams<R>) => void;
     onCellClick: (params: GridCellParams<R>) => void;

package/lib/components/Header/Header.tsx

@@ -12,6 +12,7 @@ import { getHeaderColumnStyle } from './headerColumnStyle';
 import { HeaderFilterRow } from '../HeaderFilter/HeaderFilterRow';
 import { isRtl, logicalArrowKey } from '../../utils/direction';
 import { useGridLocale } from '../DataGrid/gridLocaleContext';
+import { untypedColumn, untypedColumns } from '../../utils/untypedColumns';
 
 
 function MenuIcon() {
@@ -469,7 +470,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                     };
 
                     const headerContent = colDef.renderHeader
-                        ? colDef.renderHeader({ field: colDef.field, colDef: colDef as unknown as GridColDef, colIndex })
+                        ? colDef.renderHeader({ field: colDef.field, colDef: untypedColumn(colDef), colIndex })
                         : colDef.headerName || colDef.field;
 
                     const handleHeaderClick = (e: React.MouseEvent) => {
@@ -560,7 +561,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
 
                 {menuOpenParams && (
                     <ColumnMenu
-                        colDef={menuOpenParams.colDef as unknown as GridColDef<GridRowModel>}
+                        colDef={untypedColumn(menuOpenParams.colDef)}
                         sortModel={sortModel}
                         onSort={onSort || onSortAdd ? handleMenuSort : undefined}
                         onHide={onHideColumn}
@@ -576,7 +577,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
             {/* ── Header filter row ── */}
             {headerFilters && (
                 <HeaderFilterRow
-                    columns={columns as unknown as GridColDef[]}
+                    columns={untypedColumns(columns)}
                     columnWidths={columnWidths}
                     pinnedColumns={pinnedColumns}
                     pinnedPositions={pinnedPositions}

package/lib/components/Row/Row.tsx

@@ -108,6 +108,10 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
     cellRange?: GridRowCellRange | null;
 }
 
+// The system columns' definitions passed to error params of their cells (stable, module level).
+const EXPAND_COLUMN: GridColDef = { field: '__expand_col__', width: 48 };
+const CHECKBOX_COLUMN: GridColDef = { field: '__checkbox_col__', width: 48 };
+
 function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     const locale = useGridLocale();
     const {
@@ -341,7 +345,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                                 row,
                                 field: '__expand_col__',
                                 value: isDetailPanelExpanded,
-                                colDef: { field: '__expand_col__', width: 48 } as unknown as GridColDef<R>,
+                                colDef: EXPAND_COLUMN as GridColDef<R>,
                                 rowIndex,
                                 colIndex: -1
                             });
@@ -379,7 +383,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                                 row,
                                 field: '__checkbox_col__',
                                 value: isSelected,
-                                colDef: { field: '__checkbox_col__', width: 48 } as unknown as GridColDef<R>,
+                                colDef: CHECKBOX_COLUMN as GridColDef<R>,
                                 rowIndex,
                                 colIndex: -1
                             });

package/lib/components/Toolbar/AggregationPanel.tsx

@@ -0,0 +1,90 @@
+import ReactDOM from 'react-dom';
+import type { GridAggregationModel, GridColDef } from '../../types';
+import { getOfferedAggregationFunctions } from '../../utils/aggregation';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
+import { SigmaIcon } from './ToolbarIcons';
+import { useToolbarPanel } from './useToolbarPanel';
+
+/** The toolbar's Summaries panel: one row of function pills per aggregable column. */
+export function AggregationPanel({
+    anchorRef,
+    aggregationModel,
+    aggregableColumns,
+    onFunctionChange,
+    onClearAll,
+    onClose,
+    activeCount,
+}: {
+    anchorRef: React.RefObject<HTMLElement | null>;
+    aggregationModel: GridAggregationModel;
+    aggregableColumns: GridColDef[];
+    onFunctionChange: (field: string, fn: string) => void;
+    onClearAll: () => void;
+    onClose: () => void;
+    activeCount: number;
+}) {
+    const locale = useGridLocale();
+    const { panelRef, position: pos, portalContainer } = useToolbarPanel(anchorRef, onClose);
+
+    const panel = (
+        <div
+            ref={panelRef}
+            className="ogx-toolbar__panel"
+            role="dialog"
+            aria-label={locale.toolbarSummariesPanelLabel}
+            style={{ top: pos.top, right: pos.right, left: pos.left, width: 400, maxWidth: 'calc(100vw - 24px)' }}
+        >
+            <div className="ogx-toolbar__panel-header">
+                <span className="ogx-toolbar__panel-title">
+                    <SigmaIcon />
+                    {locale.toolbarSummaries}
+                </span>
+                {activeCount > 0 && (
+                    <button
+                        type="button"
+                        className="ogx-toolbar__clear-btn"
+                        onClick={onClearAll}
+                        title={locale.toolbarSummariesClearAllTooltip}
+                    >
+                        {locale.toolbarSummariesClearAll}
+                    </button>
+                )}
+            </div>
+
+            <div className="ogx-toolbar__panel-body">
+                {aggregableColumns.length === 0 ? (
+                    <p className="ogx-toolbar__empty">
+                        {locale.toolbarSummariesEmpty}<br />
+                        {`${locale.toolbarSummariesEmptyHintBefore} `}<code>aggregable: true</code>{` ${locale.toolbarSummariesEmptyHintAfter}`}
+                    </p>
+                ) : (
+                    aggregableColumns.map((col) => {
+                        const currentFn = aggregationModel[col.field] || 'none';
+                        return (
+                            <div key={col.field} className="ogx-toolbar__agg-row">
+                                <span className="ogx-toolbar__agg-label" title={col.field}>
+                                    {col.headerName || col.field}
+                                </span>
+                                <div className="ogx-toolbar__agg-pills">
+                                    {['none', ...getOfferedAggregationFunctions(col)].map((fn) => (
+                                        <button
+                                            type="button"
+                                            key={fn}
+                                            className={`ogx-toolbar__pill${currentFn === fn ? ' ogx-toolbar__pill--active' : ''}`}
+                                            onClick={() => onFunctionChange(col.field, fn)}
+                                            aria-pressed={currentFn === fn}
+                                        >
+                                            {locale.toolbarAggregationFunction(fn)}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        );
+                    })
+                )}
+            </div>
+        </div>
+    );
+
+    return portalContainer ? ReactDOM.createPortal(panel, portalContainer) : null;
+}

package/lib/components/Toolbar/ColumnsPanelWrapper.tsx

@@ -0,0 +1,56 @@
+import ReactDOM from 'react-dom';
+import type { GridColDef } from '../../types';
+import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibilityPanel';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
+import { useToolbarPanel } from './useToolbarPanel';
+
+/** The toolbar's Columns panel: `ColumnVisibilityPanel` in a positioned, portalled popover. */
+export function ColumnsPanelWrapper({
+    anchorRef,
+    columns,
+    visibleColumns,
+    onVisibilityChange,
+    onShowAll,
+    onHideAll,
+    onColumnReorder,
+    onColumnOrderReset,
+    onClose,
+    showNonHideableColumns,
+}: {
+    anchorRef: React.RefObject<HTMLElement | null>;
+    columns: GridColDef[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (field: string, isVisible: boolean) => void;
+    onShowAll: () => void;
+    onHideAll: () => void;
+    onColumnReorder?: (fromField: string, toField: string) => void;
+    onColumnOrderReset?: () => void;
+    onClose: () => void;
+    showNonHideableColumns?: boolean;
+}) {
+    const locale = useGridLocale();
+    const { panelRef, position: pos, portalContainer } = useToolbarPanel(anchorRef, onClose);
+
+    const panel = (
+        <div
+            ref={panelRef}
+            className="ogx-toolbar__panel"
+            role="dialog"
+            aria-label={locale.toolbarColumnsPanelLabel}
+            style={{ top: pos.top, right: pos.right, left: pos.left, width: 280, padding: 0 }}
+        >
+            <ColumnVisibilityPanel
+                columns={columns}
+                visibleColumns={visibleColumns}
+                onVisibilityChange={onVisibilityChange}
+                onShowAll={onShowAll}
+                onHideAll={onHideAll}
+                onColumnReorder={onColumnReorder}
+                onColumnOrderReset={onColumnOrderReset}
+                showNonHideableColumns={showNonHideableColumns}
+            />
+        </div>
+    );
+
+    return portalContainer ? ReactDOM.createPortal(panel, portalContainer) : null;
+}