@opencorestack/opengridx 3.5.0 → 3.6.0

package/docs/performance.md

@@ -87,7 +87,12 @@ import '@opencorestack/opengridx/styles';
 
 ## Know the browser's height limit
 
-The grid sizes its scroll content to `rowCount × rowHeight` pixels and does not scale scroll positions. Browsers cap an element's height (Chromium at 33,554,432 px, Firefox lower), so at the default 52 px row height rows past roughly 645,000 cannot be scrolled to. A dev-mode warning reports it. For more rows, use pagination, `paginationMode="server"` or infinite scroll with a `dataSource`.
+The grid sizes its scroll content to `rowCount × rowHeight` pixels and does not scale scroll positions. Browsers cap an element's height, and the [benchmark](#reach-the-browser-height-ceiling) measures what happens past the cap:
+
+- **Chromium and WebKit** clamp the content at 33,554,428 px. Rows below that cannot be scrolled to: at the default 52 px row height that is every row past 645,277.
+- **Firefox** has a lower limit, about 17.9M px, and collapses a taller element instead of clamping it. Up to 3.5.0 that made a grid with more content unscrollable in Firefox (only the first screen of rows was reachable). **Since 3.5.1 the grid measures the browser's limit once and caps its scroll content to it**, so Firefox scrolls normally and reaches the rows above the cap: about 344,000 rows at 52 px, 559,000 at 32 px.
+
+In development the grid warns when rows are cut off, naming how many can be scrolled to in that browser. For more rows, use pagination, `paginationMode="server"` or infinite scroll with a `dataSource`, or a smaller `rowHeight` (`density="compact"`, 32 px, keeps 1M rows under the Chromium and WebKit cap).
 
 ## Use server-side operations for very large datasets
 
@@ -116,9 +121,183 @@ Without a `dataSource`, fetch the rows yourself from the change callbacks and co
 In server modes the grid shows `rows` as given: it does not re-filter, re-sort or slice them (v3.0+; earlier versions did unless a `dataSource` was set).
 
 
+## Benchmarks
+
+Measured with `npm run bench` (`bench/`), which installs the packed npm package into a production Vite + React 19 app and drives it with Playwright in Chromium, Firefox and WebKit. The numbers below are from one machine (Apple M1, 8 GB RAM): compare them with each other and with your own runs, not with other machines.
+
+**In short** (Chromium, median; 100k and 1M rows from the run below, 10k and 500k from the 3.5.0 run of 2026-10-09, before the faster sort, quick filter and grouping):
+
+| Rows | Mount | Sort (number / string) | Filter | Quick filter | Group + sum | Scroll frames over 16.7 ms | JS heap |
+| ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
+| 10,000 (3.5.0) | 79 ms | 34 / 42 ms | 19 ms | 52 ms | 30 ms | 0 % | 2.9 MB |
+| 100,000 | 75 ms | 49 / 66 ms | 20 ms | 165 ms | 74 ms | 0 % | 10.4 MB |
+| 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)
+
+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.
+
+| 1M rows, 52 px | Chromium before → after | Firefox before → after | WebKit before → after |
+| :--- | ---: | ---: | ---: |
+| Sort, number column | 1,716 → 467 ms | 1,935 → 468 ms | 1,126 → 340 ms |
+| Sort, string column | 1,510 → 467 ms | 2,338 → 560 ms | 2,939 → 562 ms |
+| Quick filter, one term (first keystroke) | 2,127 → 1,813 ms | 3,283 → 2,789 ms | 3,646 → 3,166 ms |
+| Group by region + `sum` | 924 → 693 ms | 1,879 → 1,776 ms | 818 → 675 ms |
+| Filter, number `>` | 144 → 97 ms | 203 → 125 ms | 142 → 89 ms |
+| Mount | 804 → 621 ms | 1,216 → 925 ms | 620 → 547 ms |
+
+| 100k rows, 52 px | Chromium before → after | Firefox before → after | WebKit before → after |
+| :--- | ---: | ---: | ---: |
+| Sort, number column | 99 → 49 ms | 153 → 74 ms | 120 → 87 ms |
+| Sort, string column | 154 → 66 ms | 193 → 75 ms | 202 → 91 ms |
+| Quick filter, one term | 207 → 165 ms | 372 → 287 ms | 294 → 282 ms |
+| Group by region + `sum` | 79 → 74 ms | 108 → 78 ms | 103 → 107 ms |
+
+What changed: sort keys are read once per row into typed arrays and strings are ranked by sorting only their distinct values with the collator (the collator no longer runs in every comparison, which was most of WebKit's string sort); the row heights after a sort or filter are computed in one pass without id lookups when no detail panel is open; cells of plain columns are read without allocating; the quick filter keeps its texts by row position for the rows array it searched and matches with plain loops; aggregation reads cells row by row. The quick filter's first keystroke is still dominated by reading, formatting (`valueFormatter`) and lower-casing every cell, and Firefox's grouping by allocation of per-row tree nodes and metadata; the Firefox runs at 1M rows varied widely (up to several seconds) in both runs.
+
+- **Scrolling keeps up with the display at every size.** Chromium missed no frames; Firefox missed 0–2.4 %. The DOM holds about 19 row elements at rest (28 at 32 px) and at most 86 while scrolling fast, whatever the row count. WebKit scrolls steadily without missed frames too, but misses one or two frames each time the scroll position jumps far (the *during the jumps* rows below). Firefox's scroll numbers at 500k and 1M rows are not comparable: the grid cannot scroll there (see Reach).
+- **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).
+
+### 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).
+- **Data:** 12 columns (`id`, two strings, two `singleSelect`, four numbers of which two have a `valueFormatter`, a date, a boolean, a short code), `id` and `name` pinned left. Rows come from a seeded random generator in the page and are generated before any timer starts.
+- **Page:** 1280×800, the grid fills it, headless browsers launched by Playwright, one new browser context per run.
+- **Timing:** each operation is timed from the call (`root.render`, `apiRef.setSortModel`, `setFilterModel`, `setRowGroupingModel` + `setAggregationModel`) to the first painted frame that shows its result: the page waits on `requestAnimationFrame` until the grid's DOM shows the result, then one more frame so that frame has been painted. The time therefore includes React's render and commit, style, layout and paint, and up to one frame of waiting for the next refresh. The method is described in detail at the top of `bench/app/src/harness.tsx`.
+- **Operations:** sort ascending on `amount` (number) and on `name` (string); filter `name contains "nova"` (6 % of rows) and `amount > 5000` (50 %); one quick-filter term over all columns (the first search reads and formats every cell, so this is the first keystroke's cost); group by `region` (8 groups) with `sum` of `amount`. Each is undone before the next.
+- **Scroll:** 5 s driven from `requestAnimationFrame`: 3 s at a constant 2,400 px/s, then a jump to a random position anywhere in the scrollable range every 100 ms. Frame times are the gaps between consecutive animation frames. Headless browsers do not pace frames by a display, so idle frames already vary between about 16.6 and 18 ms (17–21 ms in WebKit); a frame therefore counts as *over 16.7 ms* when it took more than 1.5 refresh intervals (25 ms at 60 Hz, a missed refresh) and as *over 33 ms* above 2.5 intervals (41.7 ms, two or more missed).
+- **Chromium only:** long tasks (`PerformanceObserver('longtask')`; Firefox and WebKit have no such entries) and the JS heap (Chrome DevTools Protocol `Runtime.getHeapUsage` after a forced garbage collection, after mount minus the same page with the rows generated and no grid, so it is what the grid adds on top of your data).
+- **DOM size:** row elements and cells at the end of the scroll test, and row elements after scrolling back to the top and letting the grid settle.
+- **Repeats:** 6 runs per row count and engine; the first is discarded as warm-up, the tables show the median of the other 5 and the min–max range.
+- **Machine load:** the runner records the load average before and after. This machine had a steady load of about 3.5–4 from desktop apps (an IDE, a browser) during the run; nothing else heavy ran.
+
+### Results
+
+<!-- bench:start -->
+<!-- Generated by `node bench/report.mjs --write docs/performance.md` from bench/results/2026-10-12-apple-m1-darwin.json. Do not edit by hand. -->
+
+- **Machine:** Apple M1, 8 cores, 8 GB RAM, macOS 26.5.1 (arm64)
+- **Browsers:** Chromium 145.0.7632.6, Firefox 146.0.1, WebKit 26.0 (Playwright, headless, 1280×800 page)
+- **Package:** @opencorestack/opengridx 3.5.1 (commit `e1df2f1`), production build
+- **Date:** 2026-10-12; load average at start 4.61 / 5.66 / 5.46, at end 2.31 / 6.16 / 7.41
+- **Runs:** median of 5 runs after one discarded warm-up run, with the min–max range in brackets
+
+¹ Chromium only: Firefox and WebKit have no long-task entries, and the heap is read through the Chrome DevTools Protocol.
+
+#### 100,000 rows, 52 px rows
+
+| Metric | Chromium | Firefox | WebKit |
+| :--- | ---: | ---: | ---: |
+| Mount | 75 ms (68–131) | 142 ms (113–144) | 138 ms (126–194) |
+| Sort, number column | 49 ms (42–64) | 74 ms (64–85) | 87 ms (70–92) |
+| Sort, string column | 66 ms (61–87) | 75 ms (59–89) | 91 ms (81–126) |
+| Filter, string `contains` | 20 ms (18–37) | 34 ms (21–56) | 47 ms (43–47) |
+| Filter, number `>` | 16 ms (14–28) | 32 ms (24–37) | 30 ms (28–37) |
+| Quick filter, one term | 165 ms (156–190) | 287 ms (266–346) | 282 ms (257–339) |
+| Group by region + `sum` | 74 ms (70–77) | 78 ms (71–97) | 107 ms (94–148) |
+| Scroll frame time p50 | 16.7 ms | 16.7 ms | 17.0 ms |
+| Scroll frame time p95 | 18.4 ms (18.2–18.6) | 17.6 ms (17.3–33.3) | 49.0 ms (44.0–62.0) |
+| Scroll frame time p99 | 18.6 ms (18.6–18.7) | 33.3 ms (17.7–50.0) | 60.0 ms (53.0–92.0) |
+| Scroll frames over 16.7 ms | 0.0 % (0.0–0.3) | 2.7 % (0.7–7.6) | 11.8 % (8.1–20.8) |
+| Scroll frames over 33 ms | 0.0 % | 0.0 % (0.0–1.5) | 7.4 % (6.6–10.1) |
+| … over 16.7 ms while scrolling steadily | 0.0 % | 1.1 % (0.0–5.4) | 0.6 % (0.0–8.5) |
+| … over 16.7 ms during the jumps | 0.0 % (0.0–0.8) | 5.3 % (1.7–15.1) | 38.3 % (24.4–65.3) |
+| Long tasks during scroll ¹ | 0 | – | – |
+| Longest task during a sort ¹ | 59 ms (55–81) | – | – |
+| JS heap for the grid ¹ | 10.4 MB | – | – |
+| Row elements in the DOM, end of scroll | 76 | 76 | 76 |
+| Cells in the DOM, end of scroll | 912 | 912 | 912 |
+| Row elements in the DOM, at rest | 19 | 19 | 19 |
+| Reach: last row on screen at the bottom | all rows | all rows | all rows |
+
+#### 1,000,000 rows, 52 px rows
+
+| Metric | Chromium | Firefox | WebKit |
+| :--- | ---: | ---: | ---: |
+| Mount | 621 ms (522–1,024) | 925 ms (861–2,775) | 547 ms (490–616) |
+| Sort, number column | 467 ms (376–546) | 468 ms (430–1,287) | 340 ms (304–690) |
+| Sort, string column | 467 ms (415–530) | 560 ms (433–1,257) | 562 ms (461–639) |
+| Filter, string `contains` | 109 ms (92–113) | 89 ms (80–185) | 95 ms (89–194) |
+| Filter, number `>` | 97 ms (90–123) | 125 ms (102–434) | 89 ms (81–121) |
+| Quick filter, one term | 1,813 ms (1,430–2,183) | 2,789 ms (2,644–7,252) | 3,166 ms (2,877–3,463) |
+| Group by region + `sum` | 693 ms (599–818) | 1,776 ms (1,176–3,715) | 675 ms (614–854) |
+| Scroll frame time p50 | 16.7 ms | 16.7 ms (16.7–50.0) | 17.0 ms |
+| Scroll frame time p95 | 18.4 ms (18.4–18.5) | 33.3 ms (17.4–166.6) | 44.0 ms (44.0–46.0) |
+| Scroll frame time p99 | 18.6 ms (18.6–33.3) | 34.1 ms (33.3–283.4) | 47.0 ms (46.0–52.0) |
+| Scroll frames over 16.7 ms | 0.3 % (0.0–1.0) | 9.5 % (1.7–79.5) | 7.7 % (7.2–9.0) |
+| Scroll frames over 33 ms | 0.0 % (0.0–0.3) | 0.4 % (0.0–54.2) | 7.2 % (6.8–7.9) |
+| … over 16.7 ms while scrolling steadily | 0.0 % | 6.5 % (0.0–75.0) | 0.0 % (0.0–0.6) |
+| … over 16.7 ms during the jumps | 0.8 % (0.0–2.8) | 14.3 % (4.3–94.7) | 22.6 % (20.4–26.4) |
+| Long tasks during scroll ¹ | 0 | – | – |
+| Longest task during a sort ¹ | 462 ms (410–523) | – | – |
+| JS heap for the grid ¹ | 76.9 MB | – | – |
+| Row elements in the DOM, end of scroll | 77 | 76 | 77 |
+| Cells in the DOM, end of scroll | 924 | 912 | 924 |
+| Row elements in the DOM, at rest | 19 | 19 | 19 |
+| Reach: last row on screen at the bottom | 645,277 (64.5 %) | 344,139 (34.4 %) | 645,277 (64.5 %) |
+
+#### 1,000,000 rows, 32 px rows
+
+| Metric | Chromium | Firefox | WebKit |
+| :--- | ---: | ---: | ---: |
+| Mount | 741 ms (581–1,283) | 1,356 ms (968–5,966) | 475 ms (472–553) |
+| Sort, number column | 453 ms (403–523) | 627 ms (441–917) | 327 ms (321–338) |
+| Sort, string column | 497 ms (437–673) | 693 ms (489–6,628) | 504 ms (379–566) |
+| Filter, string `contains` | 106 ms (96–162) | 192 ms (147–268) | 100 ms (97–108) |
+| Filter, number `>` | 103 ms (86–136) | 179 ms (154–635) | 91 ms (87–190) |
+| Quick filter, one term | 1,621 ms (1,617–2,569) | 4,265 ms (3,490–10,444) | 3,082 ms (2,684–3,608) |
+| Group by region + `sum` | 880 ms (641–1,137) | 2,096 ms (957–3,309) | 640 ms (579–723) |
+| Scroll frame time p50 | 16.7 ms | 16.7 ms (16.7–49.4) | 17.0 ms |
+| Scroll frame time p95 | 17.6 ms (17.4–17.6) | 66.7 ms (33.2–199.3) | 49.0 ms (48.0–51.0) |
+| Scroll frame time p99 | 17.7 ms (17.6–33.3) | 100.0 ms (33.7–333.3) | 52.0 ms (50.0–55.0) |
+| Scroll frames over 16.7 ms | 0.7 % (0.0–1.0) | 38.4 % (6.7–82.7) | 15.5 % (15.4–15.8) |
+| Scroll frames over 33 ms | 0.0 % (0.0–0.7) | 18.6 % (0.0–50.6) | 7.8 % (7.7–8.8) |
+| … over 16.7 ms while scrolling steadily | 0.0 % (0.0–0.6) | 28.0 % (1.1–80.3) | 0.0 % (0.0–0.6) |
+| … over 16.7 ms during the jumps | 0.8 % (0.0–2.6) | 63.5 % (16.5–96.4) | 52.0 % (50.6–57.4) |
+| Long tasks during scroll ¹ | 0 (0–1) | – | – |
+| Longest task during a sort ¹ | 490 ms (429–655) | – | – |
+| JS heap for the grid ¹ | 77.3 MB | – | – |
+| Row elements in the DOM, end of scroll | 86 | 86 | 86 |
+| Cells in the DOM, end of scroll | 1,032 | 1,032 | 1,032 |
+| Row elements in the DOM, at rest | 28 | 28 | 28 |
+| Reach: last row on screen at the bottom | all rows | 559,224 (55.9 %) | all rows |
+
+#### Reach: rows that can be scrolled into view
+
+| Rows × row height | Content height | Chromium | Firefox | WebKit |
+| :--- | ---: | ---: | ---: | ---: |
+| 100,000 × 52 px | 5,200,000 px | all | all | all |
+| 1,000,000 × 52 px | 52,000,000 px | 645,277 (64.5 %) | 344,139 (34.4 %) | 645,277 (64.5 %) |
+| 1,000,000 × 32 px | 32,000,000 px | all | 559,224 (55.9 %) | all |
+<!-- bench:end -->
+
+### Reach: the browser height ceiling
+
+The grid makes its scroll area as tall as all the rows: `rowCount × rowHeight` pixels. It does not compress scroll positions, so every row keeps its real offset. Browsers limit how tall an element can be, and the *Reach* rows above report the last row that actually appears on screen after scrolling to the very bottom:
+
+- **Chromium and WebKit** stop the element at 33,554,428 px. Everything above that is reachable, everything below is not. At 52 px that is 645,277 rows, so 1M rows at 52 px reach 64.5 %. At 32 px (`density="compact"`), 1M rows need 32,000,000 px and are all reachable.
+- **Firefox** has a lower limit, about 17.9M px, and handles it differently: an element taller than that collapses instead of stopping at the limit. On 3.5.0, which these tables were measured on, the grid then had nothing to scroll: 500k rows at 52 px (26M px) and 1M rows at either height showed only their first screen of rows (24 or 33 rows). **3.5.1 fixes this**: the grid caps its scroll content to the limit it measures, so Firefox reaches about 344,000 rows at 52 px and 559,000 at 32 px, like Chromium and WebKit reach theirs.
+
+If you need more rows than this in one scrolling grid, page them (`pagination`), load them from the server (`paginationMode="server"`, or infinite scroll with a `dataSource`), or reduce the row height.
+
+### Rerun
+
+```bash
+npx playwright install chromium firefox webkit   # once
+npm run bench                                    # all engines, 10k/100k/500k/1M, about 30 min
+npm run bench -- --quick                         # 1 run per size, no 500k, a few minutes
+npm run bench -- --rows 100000 --engine firefox  # one size, one engine
+node bench/report.mjs                            # Markdown tables of the newest results file
+```
+
+Results are written to `bench/results/<date>-<machine>.json` with the machine, browser versions and package version. Close other heavy programs first and keep a laptop on power. More options: [Testing → The benchmark](contributing/testing.md#the-benchmark). A weekly CI job runs a quick Chromium pass and keeps the JSON as a build artifact; CI machines are shared and noisy, so it is for spotting trends, not for comparing with these numbers.
+
 ## Related
 
 - [Virtualization](./features/virtualization.md)
 - [Server-Side Data](./features/data-source.md)
 - [Sorting & Pagination](./features/sorting-pagination.md)
 - [Infinite Scroll](./features/infinite-scroll.md)
+- [Testing → The benchmark](./contributing/testing.md#the-benchmark)

package/docs/roadmap.md

@@ -89,9 +89,9 @@ This document tracks the current status of features in `OpenGridX` and outlines
 
 ### Across the quarter
 
-*   **Published benchmark**: reproducible 100k / 1M-row numbers (scroll frame rate, sort and filter time, memory) in `docs/performance.md`.
-*   **Next.js App Router guide**: using the grid from a `'use client'` component, with the stylesheet in `app/layout.tsx`.
-*   **RTL check**: verify right-to-left layouts and document the result.
+*   ✅ **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.
 
 ### Definition of done for each feature
@@ -117,6 +117,7 @@ This document tracks the current status of features in `OpenGridX` and outlines
 
 ## 🔭 Next (Q1 2027)
 
+
 *   **Row reordering inside tree data and row groups**, touch-friendly (MUI #4821, 405 👍, not in MUI X).
 *   **Find & highlight** (Ctrl+F through cells), **right-click context menu**, **Excel-style value (set) filter**.
 *   **Calculated columns** (`[price] * [qty]` defined by users).
@@ -124,6 +125,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.
 
 ### Not planned
 

package/lib/ai/promptHandler.ts

@@ -50,18 +50,22 @@ function emptyResult(errors: GridAiValidationError[], message?: string): GridAiP
 /** Validates a model reply into a branded result. Never throws. */
 export function readModelReply(reply: unknown, columns: readonly GridAiColumn[], parts: GridAiPartOptions): GridAiPromptResult {
   let json: unknown = reply;
-  let message = '';
+  let around = '';
   if (typeof reply === 'string') {
     const text = readModelText(reply);
     if (text.json === null) return emptyResult([], text.message || undefined);
-    json = text.json;
-    message = text.message;
-  } else if (isPlainObject(reply) && hasOwn(reply, 'message') && typeof reply.message === 'string') {
-    // A reply such as { filterModel, message: 'Showing paid orders' }: the message is not state.
-    const { message: text, ...rest } = reply;
-    json = rest;
-    message = text as string;
+    around = text.message;
+    // Parsed here so a `message` key inside the JSON is read as for an object reply. Bad JSON is
+    // passed on as text: validateGridAiState reports it.
+    try {
+      json = JSON.parse(text.json) as unknown;
+    } catch {
+      json = text.json;
+    }
   }
+  // A reply such as { filterModel, message: 'Showing paid orders' }: the validator skips the message.
+  const inner = isPlainObject(json) && hasOwn(json, 'message') && typeof json.message === 'string' ? json.message.trim() : '';
+  const message = [around, inner].filter(Boolean).join('\n\n');
   const result: GridAiPromptResult = validateGridAiState(json, columns, parts);
   if (message) result.message = message;
   return result;

package/lib/ai/validate.ts

@@ -241,8 +241,8 @@ function readPart(ctx: Ctx, part: GridAiPart, raw: unknown, path: string, state:
 
 /**
  * Checks a model's reply against the columns and returns the state that is safe to apply.
- * `json` is an object or a JSON string (bad JSON gives one error and an empty state). Unknown
- * parts, fields, operators and enum values are dropped, each with an error; values are coerced to
+ * `json` is an object or a JSON string (bad JSON gives one error and an empty state). A top-level
+ * string `message` (the model's reply text) is skipped, not reported. Unknown parts, fields, operators and enum values are dropped, each with an error; values are coerced to
  * the column type (`"1,200"` → 1200, a date → `"YYYY-MM-DD"`); filter groups left empty are
  * removed. Never throws, and never returns a field the columns do not allow.
  *
@@ -283,6 +283,9 @@ function validate(json: unknown, columns: readonly GridAiColumn[], options: Grid
       const part = ALL_PARTS.find((p) => PART_KEYS[p] === key);
       if (key === 'schemaVersion') {
         if (input[key] !== 1) fail(ctx, key, `Unsupported schemaVersion ${show(input[key])}`);
+      } else if (key === 'message') {
+        // The model's reply text next to the state (createGridAiPromptHandler shows it): not state.
+        if (typeof input[key] !== 'string') fail(ctx, key, `Expected text, got ${show(input[key])}`);
       } else if (!part) fail(ctx, key, 'Unknown part');
       else if (!allowed.includes(part)) fail(ctx, key, 'Part not allowed');
       else readPart(ctx, part, input[key], key, state);

package/lib/components/AiAssistant/GridAiAssistantPanel.css

@@ -157,7 +157,7 @@
   background: transparent;
   color: var(--ogx-color-primary);
   font: inherit;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
 }
 .ogx-toolbar__ai-btn {

package/lib/components/Cell/Cell.css

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   padding: var(--ogx-grid-cell-padding-y) var(--ogx-grid-cell-padding-x);
-  border-right: 1px solid var(--ogx-grid-border-color);
+  border-inline-end: 1px solid var(--ogx-grid-border-color);
   font-size: var(--ogx-grid-cell-font-size);
   color: var(--ogx-grid-row-text);
   line-height: var(--ogx-grid-line-height);
@@ -52,6 +52,19 @@
 .ogx__cell--range-right {
   --ogx-range-edge-right: inset -2px 0 0 0 var(--ogx-range-border);
 }
+/* Right to left: `--range-left` marks the range's first column, which is on the right. */
+.ogx__cell--range-left:dir(rtl) {
+  --ogx-range-edge-left: 0 0 0 0 transparent;
+  --ogx-range-edge-right: inset -2px 0 0 0 var(--ogx-range-border);
+}
+.ogx__cell--range-right:dir(rtl) {
+  --ogx-range-edge-right: 0 0 0 0 transparent;
+  --ogx-range-edge-left: inset 2px 0 0 0 var(--ogx-range-border);
+}
+.ogx__cell--range-left.ogx__cell--range-right:dir(rtl) {
+  --ogx-range-edge-left: inset 2px 0 0 0 var(--ogx-range-border);
+  --ogx-range-edge-right: inset -2px 0 0 0 var(--ogx-range-border);
+}
 /*
  * Fill handle (v3.5): the square on the bottom-right cell of the range. The cell clips its overflow,
  * so the 24px hit area lies inside the corner and the visible square sits in its corner.
@@ -59,7 +72,7 @@
  */
 .ogx__cell-fill-handle {
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   bottom: 0;
   width: 24px;
   height: 24px;
@@ -72,7 +85,7 @@
 .ogx__cell-fill-handle::after {
   content: '';
   position: absolute;
-  right: 1px;
+  inset-inline-end: 1px;
   bottom: 1px;
   width: 7px;
   height: 7px;
@@ -101,7 +114,7 @@
 }
 .ogx__cell--align-left {
   justify-content: flex-start;
-  text-align: left;
+  text-align: start;
 }
 .ogx__cell--align-center {
   justify-content: center;
@@ -109,7 +122,7 @@
 }
 .ogx__cell--align-right {
   justify-content: flex-end;
-  text-align: right;
+  text-align: end;
 }
 .ogx__cell--pinned-left,
 .ogx__cell--pinned-right {
@@ -119,11 +132,11 @@
   background-color: var(--ogx-grid-background); 
 }
 .ogx__cell--pinned-right {
-  border-left: 1px solid var(--ogx-grid-border-color);
+  border-inline-start: 1px solid var(--ogx-grid-border-color);
 }
 /* When the columns are narrower than the grid, the free space goes before the right-pinned section. */
 .ogx__cell--pinned-right-first {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .ogx:not(.ogx--row-spanning) .ogx__row:hover .ogx__cell--pinned-left,
 .ogx:not(.ogx--row-spanning) .ogx__row:hover .ogx__cell--pinned-right {
@@ -146,7 +159,7 @@
   content: '';
   position: absolute;
   top: 0;
-  right: -10px;
+  inset-inline-end: -10px;
   bottom: 0;
   width: 10px;
   pointer-events: none;
@@ -156,12 +169,19 @@
   content: '';
   position: absolute;
   top: 0;
-  left: -10px;
+  inset-inline-start: -10px;
   bottom: 0;
   width: 10px;
   pointer-events: none;
   box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.1);
 }
+/* Right to left: the start-pinned section is on the right, so its shadow falls on its left side. */
+.ogx__cell--pinned-left-last:dir(rtl)::after {
+  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.1);
+}
+.ogx__cell--pinned-right-first:dir(rtl)::before {
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
+}
 .ogx__cell--hidden {
   visibility: hidden;
   border: none;

package/lib/components/Cell/Cell.tsx

@@ -258,9 +258,9 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
 
     if (isPinned && pinnedOffset !== undefined) {
         if (pinnedPosition === 'left') {
-            style.left = pinnedOffset;
+            style.insetInlineStart = pinnedOffset;
         } else {
-            style.right = pinnedOffset;
+            style.insetInlineEnd = pinnedOffset;
         }
     }
 

package/lib/components/ColumnGroupHeader/ColumnGroupHeader.css

@@ -23,12 +23,12 @@
     box-sizing: border-box;
     position: relative;
     overflow: hidden;
-    /* Same border UI as primary header cells: half-height right divider */
+    /* Same border UI as primary header cells: half-height divider on the end edge */
 }
 .ogx-col-group-cell:not(:last-child)::after {
     content: '';
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     top: 25%;
     height: 50%;
     width: 1px;

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.css

@@ -2,7 +2,7 @@
   position: absolute;
   top: 0;
   /* Inside the header cell: the cell clips overflow, so a handle straddling the border lost its outer half. */
-  right: 0;
+  inset-inline-end: 0;
   width: 8px;
   height: 100%;
   cursor: col-resize;
@@ -16,8 +16,8 @@
 }
 /* Right-pinned columns grow leftwards: their handle sits on the left edge. */
 .ogx-column-resize-handle--start {
-  right: auto;
-  left: 0;
+  inset-inline-end: auto;
+  inset-inline-start: 0;
   justify-content: flex-start;
 }
 .ogx-column-resize-handle:focus-visible .ogx-column-resize-handle__line {

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { clampResizeWidth } from './clampResizeWidth';
+import { isRtl, logicalArrowKey } from '../../utils/direction';
 
 
 export interface ColumnResizeHandleProps {
@@ -23,6 +24,8 @@ interface ActiveResize {
     pointerId: number;
     startX: number;
     startWidth: number;
+    /** The grid lays out right to left: the handle's edge grows the column towards the left. */
+    rtl: boolean;
     lastUpdate: number;
     moved: boolean;
 }
@@ -53,7 +56,8 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
     useEffect(() => () => { activeRef.current = null; }, []);
 
     const widthAt = useCallback((active: ActiveResize, clientX: number) => {
-        const deltaX = clientX - active.startX;
+        // Pointer movement towards the column's end edge, in screen pixels.
+        const deltaX = (clientX - active.startX) * (active.rtl ? -1 : 1);
         const raw = active.startWidth + (edge === 'start' ? -deltaX : deltaX);
         return clampResizeWidth(raw, active.startWidth, minWidth, maxWidth);
     }, [edge, minWidth, maxWidth]);
@@ -67,6 +71,7 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
             startX: event.clientX,
             // The logical stored width: reliable for pinned, flex, and normal columns.
             startWidth: currentWidth,
+            rtl: isRtl(event.currentTarget),
             lastUpdate: 0,
             moved: false,
         };
@@ -97,6 +102,16 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
         if (!active || event.pointerId !== active.pointerId) return;
         activeRef.current = null;
         setIsDragging(false);
+        // Release explicitly: the implicit release only follows a real pointerup, and a capture left on
+        // this handle (a synthetic press on the live mouse pointer, or an interrupted drag) would keep
+        // the pointer's later events from reaching the rest of the page.
+        if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+            try {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+            } catch {
+                // Already released.
+            }
+        }
         if (active.moved || event.clientX !== active.startX) {
             // The drag may end over the header cell, which would take the synthesized click as a sort.
             suppressNextClick();
@@ -114,7 +129,8 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
         if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
         event.preventDefault();
         event.stopPropagation();
-        const step = (event.shiftKey ? 50 : 10) * (event.key === 'ArrowRight' ? 1 : -1);
+        const key = logicalArrowKey(event.key, isRtl(event.currentTarget));
+        const step = (event.shiftKey ? 50 : 10) * (key === 'ArrowRight' ? 1 : -1);
         onResize(field, clampResizeWidth(currentWidth + step, currentWidth, minWidth, maxWidth));
     }, [field, currentWidth, onResize, onAutosize, minWidth, maxWidth]);
 

package/lib/components/DataGrid/DataGrid.css

@@ -243,7 +243,7 @@
   justify-content: center;
   overflow: hidden;
   box-sizing: border-box;
-  border-right: 1px solid var(--ogx-grid-border-color);
+  border-inline-end: 1px solid var(--ogx-grid-border-color);
   position: relative;
 }
 .ogx__aggregation-cell--pinned-left,
@@ -265,7 +265,7 @@
   background: var(--ogx-grid-header-background);
 }
 .ogx__aggregation-cell--pinned-right {
-  border-left: 1px solid var(--ogx-grid-border-color);
+  border-inline-start: 1px solid var(--ogx-grid-border-color);
 }
 .ogx__aggregation-cell--pinned-left-last {
   overflow: visible;
@@ -274,26 +274,32 @@
   content: '';
   position: absolute;
   top: 0;
-  right: -10px;
+  inset-inline-end: -10px;
   bottom: 0;
   width: 10px;
   pointer-events: none;
   box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
 }
 .ogx__aggregation-cell--pinned-right-first {
-  margin-left: auto;
+  margin-inline-start: auto;
   overflow: visible;
 }
 .ogx__aggregation-cell--pinned-right-first::before {
   content: '';
   position: absolute;
   top: 0;
-  left: -10px;
+  inset-inline-start: -10px;
   bottom: 0;
   width: 10px;
   pointer-events: none;
   box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.1);
 }
+.ogx__aggregation-cell--pinned-left-last:dir(rtl)::after {
+  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.1);
+}
+.ogx__aggregation-cell--pinned-right-first:dir(rtl)::before {
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
+}
 .ogx__aggregation-label {
   font-size: 0.7em;
   text-transform: uppercase;
@@ -321,7 +327,7 @@
 }
 .ogx__group-cell-content {
   font-weight: 500;
-  text-align: left;
+  text-align: start;
   display: flex;
   align-items: center;
   gap: 4px;

package/lib/components/DataGrid/DataGrid.tsx

@@ -4,6 +4,8 @@ import { useGridKeyboardNavigation } from '../../hooks/core/useGridKeyboardNavig
 import { useGridControlledState } from '../../hooks/core/useGridControlledState';
 import { useGridThemeDimensions } from '../../hooks/core/useGridThemeDimensions';
 import { useGridRowPipeline, type GridRowPipelineResult } from '../../hooks/core/useGridRowPipeline';
+import { useGridMaxContentHeight } from '../../hooks/core/useGridMaxContentHeight';
+import { countReachableRows } from '../../utils/maxElementHeight';
 import { useGridVirtualization } from '../../hooks/core/useGridVirtualization';
 import { useGridColumns } from '../../hooks/core/useGridColumns';
 import { useGridVisibleRows } from '../../hooks/core/useGridVisibleRows';
@@ -585,12 +587,14 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         onRowsScrollEnd, overscanRowCount, rowCount: layout.unpinnedRowsLength, autoHeight, setDimensions, viewportRef,
     });
 
+    const maxContentHeight = useGridMaxContentHeight(containerRef);
     const virtualization = useGridVirtualization({
         layout, scrollTop, scrollLeft,
         viewportWidth: state.dimensions.viewportWidth,
         viewportHeight: state.dimensions.viewportHeight,
         autoHeight, rowReordering, hasDetailPanel, checkboxSelection, pinCheckboxColumn, pinExpandColumn,
         overscanRows,
+        maxContentHeight: maxContentHeight ?? Infinity,
     });
 
 
@@ -743,6 +747,9 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         totalRowCount: pinnedTopRows.length + centerRows.length + pinnedBottomRows.length,
         pinnedRowsIgnored: isHierarchyEnabled && Boolean(pinnedRows?.top?.length || pinnedRows?.bottom?.length),
         scrollHeight: virtualization.totalHeight,
+        maxContentHeight,
+        reachableRowCount: countReachableRows(virtualization.cumulativeHeights, virtualization.virtualContainerHeight),
+        unpinnedRowCount: virtualization.cumulativeHeights.length,
         listViewWithoutColumn: listViewRequested && !listViewColumn,
         listViewRowCount: listView && listViewColumn ? allRenderableRows.length : 0,
     });
@@ -984,6 +991,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                                 filterModel={filterModel}
                                 onFilterModelChange={handleFilterModelChange}
                                 onOpenFilterPanel={columnsPanel.openFiltersPanel}
+                                localeText={localeText}
                             />
 
                             <GridPinnedRows<R>
@@ -1008,7 +1016,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
                         <GridVirtualRows<R>
                             {...rowRenderProps}
-                            virtualContainerHeight={virtualization.totalHeight - virtualization.pinnedTopHeight - virtualization.pinnedBottomHeight}
+                            virtualContainerHeight={virtualization.virtualContainerHeight}
                             offsetTop={spanRowWindow.offsetTop}
                             effectiveLoading={effectiveLoading}
                             visibleRows={visibleRows}

package/lib/components/DataGrid/GridAggregationFooter.tsx

@@ -68,7 +68,7 @@ export function GridAggregationFooter({
         <div
             key={key}
             className={`ogx__aggregation-spacer${pinned ? ' ogx__aggregation-spacer--pinned' : ''}`}
-            style={pinned ? { left } : undefined}
+            style={pinned ? { insetInlineStart: left } : undefined}
             aria-hidden="true"
         />
     );
@@ -116,8 +116,8 @@ export function GridAggregationFooter({
                     maxWidth: colWidth,
                     textAlign: (col.align as React.CSSProperties['textAlign']) || 'left',
                 };
-                if (pinnedPosition === 'left'  && pinnedOffset !== undefined) style.left  = pinnedOffset;
-                if (pinnedPosition === 'right' && pinnedOffset !== undefined) style.right = pinnedOffset;
+                if (pinnedPosition === 'left'  && pinnedOffset !== undefined) style.insetInlineStart = pinnedOffset;
+                if (pinnedPosition === 'right' && pinnedOffset !== undefined) style.insetInlineEnd = pinnedOffset;
 
                 return (
                     <div