@opencorestack/opengridx 3.5.1 → 3.7.0

package/docs/features/rtl.md

@@ -0,0 +1,58 @@
+# Right-to-Left (RTL)
+
+Put the grid inside an element with `dir="rtl"`, or set `dir="rtl"` on `<html>` (`document.dir = 'rtl'`). There is no prop: the grid follows the CSS `direction` it inherits.
+
+```tsx
+<div dir="rtl" lang="ar">
+    <DataGrid rows={rows} columns={columns} height={480} />
+</div>
+```
+
+**Status (v3.6):** RTL grids work: column order, text, horizontal scrolling with column virtualization, keyboard, cell ranges, the fill handle, resizing, the toolbar panels, pinned columns (see [Pinned columns](#pinned-columns)), mirrored icons and switching `dir` at runtime. Remaining gaps are under [Known limitations](#known-limitations). Checked in Chromium, Firefox and WebKit; `lib/components/DataGrid/DataGrid.rtl.browser.test.tsx` covers what is listed as working or fixed.
+
+Demo: *Right-to-Left* (`/rtl`), with Arabic and Hebrew sample data and an RTL toggle.
+
+## What was checked
+
+| Area | Result | Notes |
+| :--- | :--- | :--- |
+| Column order | Works | The first column is on the right. |
+| Header and cell text alignment | **Fixed in v3.6** | Cells used `text-align: left`; `align: 'left'` / `'right'` now mean start / end (`text-align: start` / `end`), so default text starts on the right and number columns end on the left, matching the header. |
+| Horizontal scrolling and column virtualization | **Fixed in v3.6** | Browsers report `scrollLeft` from 0 down to a negative number in RTL. The grid counted it as 0, so after a horizontal scroll it rendered the first columns (now scrolled out of view) and the body was blank. It now measures the scroll offset from the start edge. |
+| Keyboard ArrowLeft / ArrowRight | **Fixed in v3.6** | ArrowLeft moves to the column on the left (the next column), ArrowRight to the right; Home / End go to the first / last column and scroll it into view. Shift+Arrow extends a cell range the same way. Alt+ArrowLeft / Alt+ArrowRight on a tree or group row expand / collapse in the screen direction (ArrowLeft expands), as do Alt+Arrow column resizing on a header (ArrowLeft widens) and Arrow keys on a focused resize handle. |
+| Column resize handle | **Fixed in v3.6** | It was on the column's right edge (its start edge in RTL) and dragging it right narrowed the column. It now sits on the left (end) edge and dragging left widens the column. |
+| Cell range selection | **Fixed in v3.6** | The range outline was drawn on the inner edges in RTL (the `--range-left` / `--range-right` modifiers mark the first and last column); it now outlines the range's outer edges. Dragging past the left edge of the grid auto-scrolls towards the later columns (it did not scroll at all before). |
+| Fill handle | **Fixed in v3.6** | The square was on the bottom-right corner of the range; it is now on the bottom-left, where the range ends. Dragging it fills towards the pointer as in LTR. |
+| Toolbar panels (columns, filters, summaries, pivot) | **Fixed in v3.6** | They opened leftwards from the button, off the screen when the toolbar is on the left. In RTL they now open rightwards, lined up with the button's left edge. |
+| Column menu, header filter operator menu | Works | Placed under their button. |
+| Header filter row | Works | Filter cells line up with their columns. Operator symbols are mirrored by the browser's bidi rules (`∋` shows as `∈`), as in any RTL text. |
+| Ask AI panel | Works | Opens over the grid. |
+| Left / right pinned columns, pinned system columns | **Fixed in v3.6** | Sticky offsets were physical `left` / `right`, so pinned columns scrolled away. They are now logical (`inset-inline-start` / `-end`) in the header, column group rows, header filter row, body, skeleton rows and aggregation footer. See [Pinned columns](#pinned-columns). |
+| Pinned shadows and section borders | **Fixed in v3.6** | Mirrored: they face the scrolling columns. |
+| Range drag with pinned columns | **Fixed in v3.6** | Auto-scroll starts at the inner edge of the pinned section on each side. |
+| Pagination arrows, tree / group chevrons | **Fixed in v3.6** | Mirrored with `scaleX(-1)` under `:dir(rtl)`; tree indentation is on the start side. Sort arrows, search, close and other non-directional icons are not mirrored. |
+| Switching `dir` on a mounted grid | **Fixed in v3.6** | Firefox resets `scrollLeft` without a scroll event, which left the body blank; the grid re-reads the position when any `dir` attribute changes. Changing `direction` through a class or stylesheet is not observed: scroll the grid or remount it. |
+| Column reordering by drag | Works | Drops use the target header, not pointer offsets; the drop marker is on the target's start edge. |
+
+## Pinned columns
+
+`pinnedColumns.left` and `pinnedColumns.right` are **logical**: the inline start and end. In a right-to-left grid left-pinned columns, and the checkbox, expand and reorder columns pinned with `pinCheckboxColumn` / `pinExpandColumn`, stick to the **right** edge; right-pinned columns stick to the left edge. This is what MUI X and AG Grid do (AG Grid's `pinned: 'left'` and MUI's `pinnedColumns.left` move to the right in RTL), and it keeps one configuration for both directions: the identifier column a user reads first stays pinned where reading starts, and the system columns stay next to it.
+
+The column menu is labelled by screen side: in RTL *Pin to Left* adds the column to `pinnedColumns.right`. `onPinnedColumnsChange` and `apiRef` report the logical lists. Shadow tokens are swapped in RTL (`--ogx-grid-pinned-right-shadow` is used for the start section, which casts its shadow leftwards).
+
+## 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.
+- **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`).
+
+## Left-to-right grids
+
+Every fix uses CSS logical properties (`text-align: start`, `inset-inline-end`, `margin-inline-start`) or applies only when the computed `direction` is `rtl`, so LTR grids are unchanged. A browser test measured 415 element positions (headers, cells, resize and fill handles, header filter controls, toolbar buttons and panels, before and after a horizontal scroll, with pinned columns) in all three engines before and after the change and found no difference; RTL part 2 repeated this with 2,211 boxes, shadows, borders and pseudo-element offsets (pinned and system columns, column groups, header filters, aggregation footer, before and after a scroll and with a range); `DataGrid.rtl.browser.test.tsx` keeps an LTR layout check.
+
+## See also
+
+- [Keyboard & Accessibility](keyboard-navigation.md)
+- [Pinning](pinning.md)
+- [Cell Range Selection](cell-selection.md)

package/docs/features/virtualization.md

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

package/docs/performance.md

@@ -87,12 +87,14 @@ import '@opencorestack/opengridx/styles';
 
 ## Know the browser's height limit
 
+In short: up to about 300,000 rows at 52 px fit in every browser, up to about 600,000 in Chromium and WebKit; beyond that load rows with a [`dataSource`](features/data-source.md) or use pagination. The decision guide is in [Virtualization → The browser height limit](features/virtualization.md#the-browser-height-limit).
+
 The grid sizes its scroll content to `rowCount × rowHeight` pixels and does not scale scroll positions. Browsers cap an element's height, and the [benchmark](#reach-the-browser-height-ceiling) measures what happens past the cap:
 
 - **Chromium and WebKit** clamp the content at 33,554,428 px. Rows below that cannot be scrolled to: at the default 52 px row height that is every row past 645,277.
 - **Firefox** has a lower limit, about 17.9M px, and collapses a taller element instead of clamping it. Up to 3.5.0 that made a grid with more content unscrollable in Firefox (only the first screen of rows was reachable). **Since 3.5.1 the grid measures the browser's limit once and caps its scroll content to it**, so Firefox scrolls normally and reaches the rows above the cap: about 344,000 rows at 52 px, 559,000 at 32 px.
 
-In development the grid warns when rows are cut off, naming how many can be scrolled to in that browser. For more rows, use pagination, `paginationMode="server"` or infinite scroll with a `dataSource`, or a smaller `rowHeight` (`density="compact"`, 32 px, keeps 1M rows under the Chromium and WebKit cap).
+In development the grid warns when rows are cut off, naming how many can be scrolled to in that browser and pointing to `dataSource`. For more rows, use a [`dataSource`](features/data-source.md) (`paginationMode="server"` or infinite scroll), `pagination`, or a smaller `rowHeight` (`density="compact"`, 32 px, keeps 1M rows under the Chromium and WebKit cap).
 
 ## Use server-side operations for very large datasets
 
@@ -125,17 +127,39 @@ In server modes the grid shows `rows` as given: it does not re-filter, re-sort o
 
 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):
+**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 | 79 ms | 34 / 42 ms | 19 ms | 52 ms | 30 ms | 0 % | 2.9 MB |
-| 100,000 | 89 ms | 102 / 160 ms | 28 ms | 205 ms | 87 ms | 0 % | 10.4 MB |
-| 500,000 | 295 ms | 493 / 641 ms | 59 ms | 958 ms | 331 ms | 0 % | 39.4 MB |
-| 1,000,000 | 688 ms | 1,105 / 1,316 ms | 95 ms | 1,845 ms | 681 ms | 0 % | 79.1 MB |
+| 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 1.1–1.3 s in Chromium (up to 2.9 s for a string sort in WebKit), and the first quick-filter keystroke for about 2–3 s. For sorting or searching a million rows interactively, use server-side sorting and filtering.
+- **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
@@ -154,155 +178,101 @@ Measured with `npm run bench` (`bench/`), which installs the packed npm package
 ### Results
 
 <!-- bench:start -->
-<!-- Generated by `node bench/report.mjs --write docs/performance.md` from bench/results/2026-10-09-apple-m1-darwin.json. Do not edit by hand. -->
+<!-- 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.0 (commit `f2ad5cb`), production build
-- **Date:** 2026-10-09; load average at start 3.88 / 3.73 / 4.04, at end 3.46 / 3.71 / 3.77
+- **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.
 
-#### 10,000 rows, 52 px rows
-
-| Metric | Chromium | Firefox | WebKit |
-| :--- | ---: | ---: | ---: |
-| Mount | 79 ms (59–88) | 84 ms (82–85) | 116 ms (110–128) |
-| Sort, number column | 34 ms (28–38) | 44 ms (43–46) | 81 ms (72–85) |
-| Sort, string column | 42 ms (22–45) | 56 ms (36–58) | 83 ms (76–108) |
-| Filter, string `contains` | 19 ms (14–31) | 31 ms (26–40) | 51 ms (47–57) |
-| Filter, number `>` | 18 ms (13–19) | 25 ms (24–28) | 37 ms (34–39) |
-| Quick filter, one term | 52 ms (33–60) | 76 ms (68–83) | 96 ms (84–110) |
-| Group by region + `sum` | 30 ms (22–37) | 41 ms (31–47) | 77 ms (72–126) |
-| Scroll frame time p50 | 16.7 ms | 16.7 ms | 17.0 ms |
-| Scroll frame time p95 | 17.6 ms (17.5–17.6) | 17.6 ms (17.6–18.6) | 45.0 ms (43.0–46.0) |
-| Scroll frame time p99 | 17.6 ms (17.6–17.7) | 33.3 ms (33.3–34.1) | 49.0 ms (47.0–58.0) |
-| Scroll frames over 16.7 ms | 0.0 % (0.0–0.3) | 1.7 % (1.4–4.2) | 8.6 % (7.6–9.7) |
-| Scroll frames over 33 ms | 0.0 % | 0.0 % (0.0–0.7) | 6.5 % (5.4–7.1) |
-| … over 16.7 ms while scrolling steadily | 0.0 % | 0.6 % (0.0–4.7) | 0.0 % |
-| … over 16.7 ms during the jumps | 0.0 % (0.0–0.8) | 3.5 % (2.6–4.3) | 26.1 % (21.9–29.9) |
-| Long tasks during scroll ¹ | 0 | – | – |
-| Longest task during a sort ¹ | none | – | – |
-| JS heap for the grid ¹ | 2.9 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 |
-
 #### 100,000 rows, 52 px rows
 
 | Metric | Chromium | Firefox | WebKit |
 | :--- | ---: | ---: | ---: |
-| Mount | 89 ms (86–100) | 138 ms (133–155) | 157 ms (138–204) |
-| Sort, number column | 102 ms (85–119) | 129 ms (120–136) | 159 ms (126–237) |
-| Sort, string column | 160 ms (152–165) | 213 ms (180–224) | 241 ms (211–259) |
-| Filter, string `contains` | 28 ms (20–34) | 42 ms (28–46) | 56 ms (47–109) |
-| Filter, number `>` | 33 ms (27–39) | 39 ms (24–57) | 48 ms (31–60) |
-| Quick filter, one term | 205 ms (193–232) | 348 ms (322–359) | 323 ms (269–340) |
-| Group by region + `sum` | 87 ms (81–91) | 107 ms (99–109) | 118 ms (105–143) |
+| 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 | 17.4 ms (17.3–17.5) | 17.5 ms (17.4–17.6) | 44.0 ms (43.0–45.0) |
-| Scroll frame time p99 | 17.6 ms (17.6–17.7) | 33.3 ms | 48.0 ms (47.0–55.0) |
-| Scroll frames over 16.7 ms | 0.0 % (0.0–0.3) | 2.4 % (1.0–2.7) | 7.9 % (7.1–9.3) |
-| Scroll frames over 33 ms | 0.0 % | 0.0 % (0.0–0.3) | 6.4 % (5.4–7.0) |
-| … over 16.7 ms while scrolling steadily | 0.0 % | 0.6 % (0.0–1.7) | 0.0 % (0.0–0.6) |
-| … over 16.7 ms during the jumps | 0.0 % (0.0–0.8) | 4.3 % (1.7–6.2) | 22.7 % (20.2–26.1) |
+| 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 ¹ | 155 ms (144–160) | – | – |
+| 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 |
 
-#### 500,000 rows, 52 px rows
-
-| Metric | Chromium | Firefox | WebKit |
-| :--- | ---: | ---: | ---: |
-| Mount | 295 ms (287–307) | 482 ms (473–505) | 402 ms (338–463) |
-| Sort, number column | 493 ms (485–567) | 660 ms (629–936) | 483 ms (413–564) |
-| Sort, string column | 641 ms (600–807) | 1,105 ms (1,045–1,188) | 1,407 ms (1,203–1,568) |
-| Filter, string `contains` | 59 ms (51–67) | 63 ms (56–68) | 75 ms (72–87) |
-| Filter, number `>` | 80 ms (70–111) | 100 ms (92–111) | 89 ms (77–101) |
-| Quick filter, one term | 958 ms (836–976) | 1,565 ms (1,503–1,828) | 1,442 ms (1,275–1,619) |
-| Group by region + `sum` | 331 ms (307–338) | 641 ms (419–675) | 386 ms (351–1,244) |
-| Scroll frame time p50 | 16.7 ms | 16.7 ms | 17.0 ms |
-| Scroll frame time p95 | 17.6 ms (17.5–17.6) | 17.5 ms (17.5–17.6) | 45.0 ms (44.0–46.0) |
-| Scroll frame time p99 | 17.7 ms (17.6–17.7) | 17.6 ms (17.6–17.7) | 49.0 ms (46.0–50.0) |
-| Scroll frames over 16.7 ms | 0.0 % (0.0–0.7) | 0.0 % | 7.7 % (7.6–10.1) |
-| Scroll frames over 33 ms | 0.0 % (0.0–0.3) | 0.0 % | 7.3 % (5.8–7.8) |
-| … over 16.7 ms while scrolling steadily | 0.0 % | 0.0 % | 0.0 % (0.0–1.1) |
-| … over 16.7 ms during the jumps | 0.0 % (0.0–1.8) | 0.0 % | 23.1 % (20.6–28.4) |
-| Long tasks during scroll ¹ | 0 | – | – |
-| Longest task during a sort ¹ | 635 ms (595–799) | – | – |
-| JS heap for the grid ¹ | 39.4 MB | – | – |
-| Row elements in the DOM, end of scroll | 76 | 22 | 76 |
-| Cells in the DOM, end of scroll | 912 | 264 | 912 |
-| Row elements in the DOM, at rest | 19 | 19 | 19 |
-| Reach: last row on screen at the bottom | all rows | 24 (<0.1 %) | all rows |
-
 #### 1,000,000 rows, 52 px rows
 
 | Metric | Chromium | Firefox | WebKit |
 | :--- | ---: | ---: | ---: |
-| Mount | 688 ms (673–715) | 1,097 ms (1,011–1,503) | 589 ms (576–735) |
-| Sort, number column | 1,105 ms (1,094–1,140) | 1,540 ms (1,477–1,795) | 1,023 ms (956–1,075) |
-| Sort, string column | 1,316 ms (1,227–1,463) | 2,434 ms (2,371–2,716) | 2,913 ms (2,715–3,277) |
-| Filter, string `contains` | 95 ms (87–152) | 100 ms (90–108) | 102 ms (102–112) |
-| Filter, number `>` | 144 ms (129–149) | 192 ms (175–237) | 136 ms (123–242) |
-| Quick filter, one term | 1,845 ms (1,761–1,977) | 3,161 ms (2,920–3,327) | 2,914 ms (2,762–3,272) |
-| Group by region + `sum` | 681 ms (664–703) | 1,754 ms (1,695–2,059) | 764 ms (720–901) |
-| Scroll frame time p50 | 16.7 ms | 16.7 ms | 17.0 ms |
-| Scroll frame time p95 | 17.4 ms (17.4–17.6) | 17.6 ms (17.4–17.6) | 44.0 ms (44.0–46.0) |
-| Scroll frame time p99 | 17.7 ms (17.6–17.7) | 17.6 ms (17.6–17.7) | 46.0 ms (45.0–48.0) |
-| Scroll frames over 16.7 ms | 0.0 % (0.0–0.7) | 0.0 % (0.0–0.3) | 7.2 % (7.1–9.3) |
-| Scroll frames over 33 ms | 0.0 % | 0.0 % | 7.0 % (6.5–7.1) |
-| … over 16.7 ms while scrolling steadily | 0.0 % | 0.0 % (0.0–0.6) | 0.0 % |
-| … over 16.7 ms during the jumps | 0.0 % (0.0–1.7) | 0.0 % | 20.8 % (20.0–28.1) |
+| 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 ¹ | 1,307 ms (1,220–1,455) | – | – |
-| JS heap for the grid ¹ | 79.1 MB | – | – |
-| Row elements in the DOM, end of scroll | 77 | 22 | 77 |
-| Cells in the DOM, end of scroll | 924 | 264 | 924 |
+| 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 %) | 24 (<0.1 %) | 645,277 (64.5 %) |
+| 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 | 674 ms (668–680) | 1,106 ms (1,032–1,329) | 604 ms (585–621) |
-| Sort, number column | 1,143 ms (1,090–1,254) | 1,475 ms (1,462–1,837) | 1,077 ms (986–1,137) |
-| Sort, string column | 1,295 ms (1,236–1,456) | 2,517 ms (2,268–2,675) | 2,758 ms (2,720–2,947) |
-| Filter, string `contains` | 92 ms (91–109) | 99 ms (99–109) | 107 ms (106–121) |
-| Filter, number `>` | 137 ms (133–140) | 206 ms (172–232) | 140 ms (126–161) |
-| Quick filter, one term | 1,818 ms (1,651–1,855) | 2,960 ms (2,910–3,200) | 2,750 ms (2,677–2,776) |
-| Group by region + `sum` | 694 ms (673–758) | 2,071 ms (1,224–2,745) | 749 ms (689–798) |
-| Scroll frame time p50 | 16.7 ms | 16.7 ms | 17.0 ms |
-| Scroll frame time p95 | 17.5 ms (17.5–18.5) | 17.5 ms (17.3–17.5) | 49.0 ms (48.0–49.0) |
-| Scroll frame time p99 | 17.6 ms (17.6–18.7) | 17.6 ms (17.6–17.7) | 52.0 ms (51.0–52.0) |
-| Scroll frames over 16.7 ms | 0.0 % (0.0–0.3) | 0.0 % (0.0–0.3) | 15.5 % (15.4–15.8) |
-| Scroll frames over 33 ms | 0.0 % | 0.0 % | 7.7 % (7.7–7.8) |
-| … over 16.7 ms while scrolling steadily | 0.0 % (0.0–0.6) | 0.0 % (0.0–0.6) | 0.0 % (0.0–0.6) |
-| … over 16.7 ms during the jumps | 0.0 % | 0.0 % | 51.3 % (50.6–53.3) |
-| Long tasks during scroll ¹ | 0 | – | – |
-| Longest task during a sort ¹ | 1,286 ms (1,229–1,436) | – | – |
-| JS heap for the grid ¹ | 79.5 MB | – | – |
-| Row elements in the DOM, end of scroll | 86 | 32 | 86 |
-| Cells in the DOM, end of scroll | 1,032 | 384 | 1,032 |
+| 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 | 33 (<0.1 %) | all rows |
+| 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 |
 | :--- | ---: | ---: | ---: | ---: |
-| 10,000 × 52 px | 520,000 px | all | all | all |
 | 100,000 × 52 px | 5,200,000 px | all | all | all |
-| 500,000 × 52 px | 26,000,000 px | all | 24 (<0.1 %) | all |
-| 1,000,000 × 52 px | 52,000,000 px | 645,277 (64.5 %) | 24 (<0.1 %) | 645,277 (64.5 %) |
-| 1,000,000 × 32 px | 32,000,000 px | all | 33 (<0.1 %) | 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

package/docs/roadmap.md

@@ -90,8 +90,8 @@ This document tracks the current status of features in `OpenGridX` and outlines
 ### 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**: 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.
+*   ✅ **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

@@ -21,7 +21,9 @@
   border: 1px solid var(--ogx-overlay-border, var(--ogx-grid-border-color));
   border-radius: var(--ogx-border-radius-lg, 8px);
   box-shadow: var(--ogx-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
-  font-size: var(--ogx-font-size-sm);
+  font-family: var(--ogx-overlay-font-family, inherit);
+  font-size: var(--ogx-overlay-font-size, var(--ogx-font-size-sm));
+  font-weight: var(--ogx-overlay-font-weight, inherit);
 }
 .ogx-ai-panel__header {
   display: flex;
@@ -157,7 +159,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,8 +3,10 @@
   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: var(--ogx-grid-column-divider-width) solid var(--ogx-grid-column-divider-color, var(--ogx-grid-border-color));
+  font-family: var(--ogx-grid-cell-font-family, inherit);
   font-size: var(--ogx-grid-cell-font-size);
+  font-weight: var(--ogx-grid-cell-font-weight, inherit);
   color: var(--ogx-grid-row-text);
   line-height: var(--ogx-grid-line-height);
   white-space: nowrap;
@@ -52,6 +54,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 +74,7 @@
  */
 .ogx__cell-fill-handle {
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   bottom: 0;
   width: 24px;
   height: 24px;
@@ -72,7 +87,7 @@
 .ogx__cell-fill-handle::after {
   content: '';
   position: absolute;
-  right: 1px;
+  inset-inline-end: 1px;
   bottom: 1px;
   width: 7px;
   height: 7px;
@@ -101,7 +116,7 @@
 }
 .ogx__cell--align-left {
   justify-content: flex-start;
-  text-align: left;
+  text-align: start;
 }
 .ogx__cell--align-center {
   justify-content: center;
@@ -109,7 +124,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 +134,11 @@
   background-color: var(--ogx-grid-background); 
 }
 .ogx__cell--pinned-right {
-  border-left: 1px solid var(--ogx-grid-border-color);
+  border-inline-start: var(--ogx-grid-column-divider-width) solid var(--ogx-grid-column-divider-color, var(--ogx-grid-border-color));
 }
 /* When the columns are narrower than the grid, the free space goes before the right-pinned section. */
 .ogx__cell--pinned-right-first {
-  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 +161,7 @@
   content: '';
   position: absolute;
   top: 0;
-  right: -10px;
+  inset-inline-end: -10px;
   bottom: 0;
   width: 10px;
   pointer-events: none;
@@ -156,12 +171,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;