@alaarab/ogrid-mcp 2.6.0 → 2.7.0

package/bundled-docs/features/formulas.mdx

@@ -7,21 +7,21 @@ description: Excel-like formula support with 93 built-in functions, live recalcu
 
 # Formulas
 
-Type `=SUM(A1:A5)` into any editable cell and it evaluates instantly. Change a value in A1 and everything that depends on it recalculates. No external library, no backend call, no wiring required.
+Type `=SUM(A1:A5)` into any editable cell and it evaluates instantly. Change a value in A1 and everything that depends on it recalculates. It works like Excel, built right into your grid — no external library, no backend call, no wiring required.
 
-The engine adds ~12KB gzipped and is completely tree-shakeable. Grids without `formulas={true}` don't pay any cost.
+The engine adds ~12KB gzipped and is completely **tree-shakeable** — grids without `formulas={true}` don't pay any cost.
 
 ## Live Demo
 
 <FormulasDemo />
 
 :::tip Try it in your framework
-The demo uses Radix UI styling. The formula engine is framework-agnostic -- same behavior in React, Angular, Vue, and Vanilla JS.
+The demo uses Radix UI styling. The formula engine itself is framework-agnostic — same behavior in React, Angular, Vue, and Vanilla JS.
 :::
 
 ## Why bother with in-grid formulas?
 
-If you've ever had users copy grid data into Excel to calculate totals, then paste it back, formulas solve that. Users build their own calculations directly in the table, results stay live, and you don't have to ship a calculator UI.
+If you've ever had users copy grid data into Excel to calculate totals or derived fields — then paste it back — formulas solve that. Users can build their own calculations directly in the table, results stay live, and you don't have to build a calculator UI.
 
 ## Enable formulas
 
@@ -63,7 +63,7 @@ function App() {
 ```
 
 :::tip Switching UI libraries
-Same props across all React packages -- just change the import:
+Same props across all React packages — just change the import:
 
 - **Radix** (lightweight, default): `from '@alaarab/ogrid-react-radix'`
 - **Fluent UI** (Microsoft 365 / SPFx): `from '@alaarab/ogrid-react-fluent'`  -  wrap in `<FluentProvider>`
@@ -106,7 +106,7 @@ Same API across Angular packages. Change the import:
 - **Angular Material**: `from '@alaarab/ogrid-angular-material'`
 - **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
 
-All components are standalone, no NgModule required.
+All components are standalone — no NgModule required.
 :::
 
   </TabItem>
@@ -174,7 +174,7 @@ formulaState.setFormula(2, 0, '=A1+B1', grid.getApi().getDataAccessor());
 
 ## Entering formulas
 
-Type any value starting with `=` into an editable cell. The engine parses and evaluates it, then shows the result. The formula string is stored separately from your data. Your `data[]` array is never modified by formulas.
+Type any value starting with `=` into an editable cell. The engine parses and evaluates it, then shows the result. The formula string is stored separately from your data — your `data[]` array is never modified by formulas.
 
 ```
 =A1+B1                        → adds two cells
@@ -185,7 +185,7 @@ Type any value starting with `=` into an editable cell. The engine parses and ev
 
 ## Pre-loading formulas
 
-Use `initialFormulas` to seed formulas when the grid mounts, useful for reports with fixed summary rows:
+Use `initialFormulas` to seed formulas when the grid mounts — useful for reports with fixed summary rows:
 
 ```tsx
 <OGrid
@@ -202,24 +202,24 @@ Coordinates are 0-based: `col` is the position in your flat columns array, `row`
 
 ## How recalculation works
 
-The engine maintains a dependency graph. When A1 changes, it recalculates every formula that depends on it in topological order, including dependents of dependents. Circular references produce a `#CIRC!` error rather than an infinite loop.
+The engine builds a dependency graph. When A1 changes, it finds every formula that references A1, then recalculates them in topological order — dependents of dependents are handled correctly. Circular references produce a `#CIRC!` error instead of an infinite loop.
 
 ## Formula-aware copy, paste, and fill
 
 When `formulas` is enabled:
 
-- **Copy** -- copies the formula string (`=SUM(A1:A5)`), not the computed value
-- **Paste** -- if the pasted value starts with `=`, it becomes a formula in the target cell
-- **Fill handle** -- dragging a formula cell down adjusts relative references. `=A1+B1` dragged down becomes `=A2+B2`. Lock references with `$`: `=$A$1` never adjusts.
+- **Copy** — copies the formula string (`=SUM(A1:A5)`), not the computed value
+- **Paste** — if the pasted value starts with `=`, it becomes a formula in the target cell
+- **Fill handle** — dragging a formula cell down adjusts relative references. `=A1+B1` dragged down becomes `=A2+B2`. Lock references with `$`: `=$A$1` never adjusts.
 
 ## Cell reference syntax
 
 | Syntax | Example | What it means |
 |--------|---------|---------|
-| Relative | `A1` | Column A, Row 1 -- adjusts when filled |
+| Relative | `A1` | Column A, Row 1 — adjusts when filled |
 | Absolute column | `$A1` | Column A locked, row adjusts |
 | Absolute row | `A$1` | Row 1 locked, column adjusts |
-| Fully absolute | `$A$1` | Both locked -- never adjusts |
+| Fully absolute | `$A$1` | Both locked — never adjusts |
 | Range | `A1:B5` | Rectangular block from A1 to B5 |
 | Named range | `Revenue` | Resolves to a defined cell or range |
 | Cross-sheet | `Sheet2!A1` | Cell A1 from another sheet |
@@ -238,7 +238,7 @@ Give meaningful names to cells or ranges you reference often:
 />
 ```
 
-Now write `=SUM(Revenue)` or `=A1*TaxRate` instead of cryptic coordinates. Named ranges are case-insensitive -- `Revenue`, `revenue`, and `REVENUE` all resolve to the same range.
+Now write `=SUM(Revenue)` or `=A1*TaxRate` instead of cryptic coordinates. Named ranges are case-insensitive — `Revenue`, `revenue`, and `REVENUE` all resolve to the same range.
 
 You can also manage them at runtime:
 
@@ -293,9 +293,9 @@ Reference cells from other grids by registering sheet accessors:
 ```
 
 Then write:
-- `=Sheet2!A1` -- single cell from Sheet2
-- `=SUM(Sheet2!A1:A10)` -- range from Sheet2
-- `='Sales Data'!B5` -- quoted name for sheets with spaces
+- `=Sheet2!A1` — single cell from Sheet2
+- `=SUM(Sheet2!A1:A10)` — range from Sheet2
+- `='Sales Data'!B5` — quoted name for sheets with spaces
 
 Referencing an unregistered sheet produces a `#REF!` error.
 
@@ -320,15 +320,15 @@ Formula errors display in red (controlled by `--ogrid-formula-error-color`):
 |-------|---------|
 | `#REF!` | Cell reference points outside the grid, or unregistered sheet |
 | `#DIV/0!` | Division by zero |
-| `#VALUE!` | Wrong argument type -- text where a number was expected |
-| `#NAME?` | Unknown function name -- check spelling |
+| `#VALUE!` | Wrong argument type — text where a number was expected |
+| `#NAME?` | Unknown function name — check spelling |
 | `#CIRC!` | Circular reference detected |
 | `#N/A` | No match found (VLOOKUP, MATCH, XLOOKUP) |
-| `#NUM!` | Invalid numeric argument -- e.g., LARGE with k larger than the list |
+| `#NUM!` | Invalid numeric argument — e.g., LARGE with k larger than the list |
 | `#ERROR!` | General parse or eval error |
 
 :::tip Pro tip
-`#NAME?` is almost always a typo. Formula function names are case-insensitive (`sum`, `SUM`, and `Sum` all work), but `=SUMM(A1:A5)` gives `#NAME?`.
+`#NAME?` is almost always a typo. Formula function names are case-insensitive — `sum`, `SUM`, and `Sum` all work — but `=SUMM(A1:A5)` gives `#NAME?`.
 :::
 
 ## All 93 built-in functions
@@ -358,7 +358,7 @@ Formula errors display in red (controlled by `--ogrid-formula-error-color`):
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `formulas` | `boolean` | `false` | Enable formula support. Tree-shakeable -- zero cost when not used. |
+| `formulas` | `boolean` | `false` | Enable formula support. Tree-shakeable — zero cost when not used. |
 | `initialFormulas` | `Array<{ col, row, formula }>` | — | Pre-load formulas on mount (0-based col/row indices). |
 | `onFormulaRecalc` | `(result: IRecalcResult) => void` | — | Called after each recalculation with the updated cell list. |
 | `formulaFunctions` | `Record<string, IFormulaFunction>` | — | Custom functions to register alongside built-ins. |
@@ -367,10 +367,10 @@ Formula errors display in red (controlled by `--ogrid-formula-error-color`):
 
 ## Next steps
 
-- [Editing & Clipboard](./editing) -- formula-aware copy, paste, and fill handle
-- [Cell References](./cell-references) -- Excel-style column letters and the name box
-- [CSV Export](./csv-export) -- export formula strings or computed values
-- [Status Bar](./status-bar) -- live SUM/AVERAGE/COUNT on selected cells
+- [Editing & Clipboard](./editing) — formula-aware copy, paste, and fill handle
+- [Cell References](./cell-references) — Excel-style column letters and the name box
+- [CSV Export](./csv-export) — export formula strings or computed values
+- [Status Bar](./status-bar) — live SUM/AVERAGE/COUNT on selected cells
 
 ## Community
 

package/bundled-docs/features/grid-api.mdx

@@ -172,9 +172,9 @@ async function handleRefresh() {
   </TabItem>
 </Tabs>
 
-## API reference
+## How It Works
 
-Pass a `ref` to `OGrid`. It exposes the `IOGridApi<T>` interface.
+Pass a `ref` to the `OGrid` component. The ref exposes the `IOGridApi<T>` interface with methods for programmatic grid control.
 
 ### API Methods
 

package/bundled-docs/features/keyboard-navigation.mdx

@@ -7,7 +7,7 @@ description: Full keyboard support for navigating, editing, selecting, and opera
 
 # Keyboard Navigation
 
-Navigate, edit, select, and operate on cells entirely from the keyboard. Click a cell to make it active, then use the shortcuts below.
+OGrid supports comprehensive keyboard navigation for moving between cells, editing values, selecting ranges, and performing clipboard and undo operations -- all without touching the mouse.
 
 ## Live Demo
 
@@ -119,7 +119,7 @@ const grid = new OGrid(document.getElementById('grid'), {
   </TabItem>
 </Tabs>
 
-Click a cell to focus it, then use the keyboard to navigate and edit.
+Click any cell to make it the active cell, then use the keyboard to navigate and edit.
 
 ## Navigation
 
@@ -197,9 +197,9 @@ Copied data uses tab-separated format compatible with Excel and Google Sheets. M
 
 Undo/redo requires the `onUndo`, `onRedo`, `canUndo`, and `canRedo` props to be wired up (typically via the `useUndoRedo` hook).
 
-## How it works
+## How It Works
 
-The `useKeyboardNavigation` hook fires automatically when `cellSelection` is enabled (the default). It listens for `keydown` events on the grid wrapper and translates them into cell movement, selection range changes, or editing actions.
+Keyboard navigation is handled by the `useKeyboardNavigation` hook in core, which is automatically wired into the grid when `cellSelection` is enabled (the default). The hook listens for `keydown` events on the grid wrapper element and translates them into active cell movements, selection range changes, or editing actions.
 
 ### Disabling Cell Selection
 
@@ -233,4 +233,4 @@ On macOS, Ctrl is replaced by the Command key for all shortcuts (Cmd+C, Cmd+V, C
 
 - [Context Menu](./context-menu) -- right-click menu mirrors keyboard shortcuts
 - [Status Bar](./status-bar) -- shows aggregations for keyboard-selected ranges
-- [Column Pinning](./column-pinning) -- navigation works across pinned and scrollable columns
+- [Column Pinning](./column-pinning) -- navigation works seamlessly across pinned and scrollable columns

package/bundled-docs/features/pagination.mdx

@@ -7,7 +7,7 @@ description: Built-in pagination with configurable page sizes for client-side an
 
 # Pagination
 
-OGrid includes a built-in pagination bar with page navigation buttons, page size selector, and a row count summary. It works with both client-side data arrays and server-side data sources.
+OGrid includes a built-in pagination bar with page navigation buttons, page size selector, and a row count summary. It works seamlessly with both client-side data arrays and server-side data sources.
 
 ## Live Demo
 

package/bundled-docs/features/row-selection.mdx

@@ -149,8 +149,9 @@ const grid = new OGrid(document.getElementById('grid'), {
   rowSelection: 'multiple',
 });
 
-grid.on('selectionChange', ({ selectedRows }) => {
-  console.log(`${selectedRows.length} rows selected`);
+grid.on('selectionChange', ({ selectedItems, selectedRowIds }) => {
+  console.log(`${selectedItems.length} rows selected`);
+  console.log('Selected row IDs:', selectedRowIds);
 });
 
 // Programmatic access

package/bundled-docs/getting-started/overview.mdx

@@ -6,11 +6,11 @@ description: What is OGrid and why use it
 
 # Overview
 
-OGrid is an open-source data grid with spreadsheet-grade features and no enterprise paywall. It ships React, Angular, and Vue adapters -- each with multiple UI library choices -- plus a vanilla JS package, all driven by a shared TypeScript core.
+OGrid is a lightweight, open-source data grid library that delivers spreadsheet-grade features without the enterprise paywall. It ships with React, Angular, and Vue adapters -- each with multiple UI library implementations -- plus a vanilla JS package, all powered by a shared TypeScript core.
 
 ## Why OGrid?
 
-Most production-grade data grids are free but limited, or full-featured but expensive. OGrid is neither.
+Most production-grade React data grids fall into one of two camps: free but limited, or feature-rich but locked behind expensive licenses. OGrid bridges that gap.
 
 - **Free and MIT-licensed.** Every feature is included. No enterprise tier, no feature gating.
 - **25+ built-in features.** Sorting, filtering, pagination, cell editing, clipboard, undo/redo, fill handle, row selection, cell range selection, column pinning, column groups, CSV export, context menu, keyboard navigation, cell references, virtual scrolling, status bar, sidebar, and more.
@@ -80,11 +80,14 @@ Each UI package is a thin shell (~1,500 lines) that calls the same core logic an
 | `@alaarab/ogrid-vue-vuetify` | Vuetify 3 | Vue + Material Design |
 | `@alaarab/ogrid-vue-primevue` | PrimeVue 4 | Vue + PrimeVue ecosystem |
 
-All packages within a framework export the same `OGrid` component with the same props. Switching UI libraries is a one-line import change  -  your column definitions, event handlers, data sources, and API calls stay identical.
+All packages within a framework export the same `OGrid` component with the same props. Switching UI libraries is a one-line import change  -  your column definitions, event handlers, data sources, and API calls stay identical within that framework family.
 
 ### Why This Matters
 
-A bug fix in core lands across all frameworks instantly. You can migrate between React, Angular, and Vue without touching business logic. All packages share the same core, so behavior is consistent by construction, not by convention. There's no duplicated state that can quietly fall out of sync.
+- **Shared core, broad portability.** A core fix often benefits every package, while wrapper-specific UI behavior is verified in the browser matrix and documented per package.
+- **Zero lock-in.** Migrate between React, Angular, and Vue without rewriting business logic.
+- **Shared core, aligned behavior.** Most behavior is implemented once in core, with package-specific docs and tests calling out the remaining differences.
+- **Small surface area.** No duplicated state logic to drift out of sync.
 
 ## Packages
 
@@ -142,6 +145,15 @@ A bug fix in core lands across all frameworks instantly. You can migrate between
 
 OGrid is designed as a drop-in replacement for AG Grid with a simpler, more React-idiomatic API. If you are migrating from AG Grid, see the [Migration Guide](../guides/migration-from-ag-grid).
 
+## Browser verification
+
+OGrid's browser checks now have an explicit contract:
+
+- A fast smoke suite runs on every push through the main CI workflow
+- The broader Playwright matrix runs across all 10 example apps only when you dispatch it manually
+
+See the [Browser Support Matrix](../guides/browser-support-matrix) for the current coverage map and commands.
+
 ## Next Steps
 
 - [Installation](./installation) -- install OGrid for your framework

package/bundled-docs/getting-started/quick-start.mdx

@@ -7,7 +7,7 @@ description: A sortable, filterable, editable data grid in under 50 lines
 
 # Quick Start
 
-Here's a grid in 60 seconds. Sorting, filtering, editing, pagination, and keyboard navigation all work out of the box.
+Here's a grid in 60 seconds — sorting, filtering, editing, pagination, and keyboard navigation, all working out of the box.
 
 ## Install
 
@@ -213,7 +213,7 @@ All Angular packages share the same component API. Change one import:
 - **Angular Material**: `from '@alaarab/ogrid-angular-material'`
 - **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
 
-All components are standalone, no NgModule required.
+All components are standalone — no NgModule required.
 :::
 
   </TabItem>
@@ -321,11 +321,11 @@ The JS package has a class-based imperative API. See the [Vanilla JS guide](./va
 
 Paste those ~40 lines and you have:
 
-- **Sorting** -- click any column header, ascending/descending, shift-click for multi-sort
-- **Filtering** -- the Department column gets a multi-select dropdown filter
-- **Inline editing** -- double-click any salary cell to edit in place
-- **Currency formatting** -- `valueFormatter` formats numbers on display without affecting stored values
-- **Pagination, keyboard nav, cell selection, status bar** -- all there, no extra config
+- **Sorting** — click any column header, ascending/descending, shift-click for multi-sort
+- **Filtering** — the Department column gets a multi-select dropdown filter
+- **Inline editing** — double-click any salary cell to edit in place
+- **Currency formatting** — `valueFormatter` formats numbers on display without affecting stored values
+- **Pagination, keyboard nav, cell selection, status bar** — all there, no extra config
 
 ## Three concepts worth knowing
 
@@ -419,7 +419,7 @@ grid.destroy();
 
 ## What's next?
 
-- [Sorting](../features/sorting), [Filtering](../features/filtering), [Editing](../features/editing) -- dig into individual features
-- [Server-Side Data](../features/server-side-data) -- connect to a REST API or GraphQL endpoint
-- [Grid API](../api/js-api) -- full reference for programmatic control
-- [Column Definitions](../api/types) -- every column option explained
+- [Sorting](../features/sorting), [Filtering](../features/filtering), [Editing](../features/editing) — dig into individual features
+- [Server-Side Data](../features/server-side-data) — connect to a REST API or GraphQL endpoint
+- [Grid API](../api/js-api) — full reference for programmatic control
+- [Column Definitions](../api/types) — every column option explained

package/bundled-docs/getting-started/vanilla-js.mdx

@@ -1,13 +1,13 @@
 ---
 sidebar_position: 4
 title: Vanilla JS
-description: OGrid without a framework, pure JavaScript, class-based API
+description: OGrid without a framework — pure JavaScript, class-based API
 ---
 
 
 # Vanilla JS
 
-You don't need React, Angular, or Vue to use OGrid. The `@alaarab/ogrid-js` package gives you a full-featured data grid using a class-based API: pass a container element and an options object.
+You don't need React, Angular, or Vue to use OGrid. The `@alaarab/ogrid-js` package gives you a sortable, filterable, editable data grid with the shared OGrid core through a simple class-based API — just a container element and an options object.
 
 It's a good fit if you're working on an internal tool, a dashboard that can't take on a framework, or you're embedding a grid inside an existing non-framework app.
 
@@ -27,7 +27,7 @@ Or drop it into an HTML file directly using a CDN (no build tools needed):
 
 ## Build a real example
 
-Let's make an order management dashboard. It tracks orders by status, amount, and customer, with sorting, filtering, and inline editing.
+Let's make an order management dashboard. It tracks orders by status, amount, and customer — sortable, filterable, and editable inline.
 
 ```html
 <div id="orders-grid" style="height: 500px;"></div>
@@ -88,15 +88,17 @@ Let's make an order management dashboard. It tracks orders by status, amount, an
 
 ## What you get out of the box
 
-- **Sorting** -- click column headers
-- **Filtering** -- multi-select dropdown on the Status column
-- **Inline editing** -- double-click any Amount cell to edit
-- **Cell selection** -- click and drag to select ranges
-- **Keyboard navigation** -- arrow keys, Tab, Home/End, Ctrl+Arrow
-- **Clipboard** -- Ctrl+C/V/X works like a spreadsheet
-- **Undo/redo** -- Ctrl+Z/Y
-- **Status bar** -- row count and selection aggregations
-- **Pagination** -- page controls at the bottom
+The JS package shares the same data model and most feature concepts as the framework packages, but browser-level interaction parity is still tracked package by package.
+
+- **Sorting** — click column headers
+- **Filtering** — multi-select dropdown on the Status column
+- **Inline editing** — double-click any Amount cell to edit
+- **Cell selection** — click and drag to select ranges
+- **Keyboard navigation** — arrow keys, Tab, Home/End, Ctrl+Arrow
+- **Clipboard** — Ctrl+C/V/X works like a spreadsheet
+- **Undo/redo** — Ctrl+Z/Y
+- **Status bar** — row count and selection aggregations
+- **Pagination** — page controls at the bottom
 
 ## Constructor
 
@@ -104,7 +106,7 @@ Let's make an order management dashboard. It tracks orders by status, amount, an
 const grid = new OGrid(containerElement, options);
 ```
 
-The container element defines where the grid renders. OGrid fills it completely, so give it an explicit height (CSS or inline).
+The container element defines where the grid renders. OGrid fills it completely — give it an explicit height (CSS or inline).
 
 ## Key options
 
@@ -134,23 +136,24 @@ grid.on('cellValueChanged', ({ item, columnId, oldValue, newValue }) => {
   // save to backend
 });
 
-grid.on('selectionChange', ({ selectedRows }) => {
-  console.log(`${selectedRows.length} rows selected`);
-  updateActionBar(selectedRows);
+grid.on('selectionChange', ({ selectedItems, selectedRowIds }) => {
+  console.log(`${selectedItems.length} rows selected`);
+  updateActionBar(selectedItems, selectedRowIds);
 });
 
-grid.on('sortChange', ({ field, direction }) => {
-  console.log(`Sorted by ${field} ${direction}`);
+grid.on('sortChange', ({ sort }) => {
+  if (!sort) return;
+  console.log(`Sorted by ${sort.field} ${sort.direction}`);
 });
 ```
 
 | Event | Payload | When it fires |
 |-------|---------|---------------|
 | `cellValueChanged` | `{ item, columnId, oldValue, newValue }` | A cell edit is committed |
-| `sortChange` | `{ field, direction }` | User changes sort |
+| `sortChange` | `{ sort }` | User changes sort |
 | `filterChange` | `{ filters }` | User changes filters |
 | `pageChange` | `{ page }` | User navigates pages |
-| `selectionChange` | `{ selectedRows, selectedRowIds }` | Row selection changes |
+| `selectionChange` | `{ selectedItems, selectedRowIds }` | Row selection changes |
 
 ## Programmatic control
 
@@ -210,6 +213,6 @@ grid.destroy();
 
 ## What's next?
 
-- [JS API Reference](../api/js-api) -- full method and options reference
-- [Features](../features/sorting) -- all features work identically in the JS package
-- [Theming Guide](../guides/theming) -- deep dive into CSS customization
+- [JS API Reference](../api/js-api) — full method and options reference
+- [Features](../features/sorting) — feature guides, with JS notes where behavior differs from framework packages
+- [Theming Guide](../guides/theming) — deep dive into CSS customization

package/bundled-docs/guides/accessibility.mdx

@@ -5,21 +5,21 @@ title: Accessibility
 
 # Accessibility
 
-Good accessibility isn't just compliance. It's building software that works for everyone. A keyboard user in a tight workflow shouldn't have to reach for the mouse. A screen reader user deserves the same experience as anyone else.
+Good accessibility isn't just compliance — it's building software that works for everyone. A keyboard user in a tight workflow shouldn't have to reach for the mouse. A screen reader user deserves the same experience as anyone else.
 
-OGrid is built with this in mind. Keyboard navigation, screen reader support, high contrast mode, and ARIA semantics are all baked in. You don't configure them; you just benefit from them.
+OGrid is built with this in mind. Keyboard navigation, screen reader support, high contrast mode, and ARIA semantics are all baked in — you don't configure them, you just benefit from them.
 
 ## What's built in by default
 
 You get all of this without any extra setup:
 
-- Full keyboard navigation: arrow keys, Tab, Home/End, Ctrl+Arrow, all working like a spreadsheet
+- Full keyboard navigation — arrow keys, Tab, Home/End, Ctrl+Arrow, all working like a spreadsheet
 - Screen reader announcements for sort, filter, edit, selection, and pagination changes
 - Proper ARIA roles and attributes on the grid, rows, cells, and headers
 - `:focus-visible` indicators so keyboard users always know where they are
 - Focus trapping in dropdowns and popovers (Escape always gets you out)
 - High contrast mode support via CSS custom properties with system color fallbacks
-- Semantic HTML: real `<table>`, `<thead>`, `<th>`, `<td>` elements that assistive tech understands
+- Semantic HTML — real `<table>`, `<thead>`, `<th>`, `<td>` elements that assistive tech understands
 
 The one thing you do need to add: an `aria-label` on the grid. It's one prop.
 
@@ -113,7 +113,7 @@ Key attributes and what they do:
 | `aria-expanded` | Open/closed state of filter dropdowns |
 | `aria-current="page"` | Current page in pagination |
 
-The status bar uses `role="status"` with `aria-live="polite"`, so it announces changes without interrupting what the user is doing.
+The status bar uses `role="status"` with `aria-live="polite"` — it announces changes without interrupting what the user is doing.
 
 ## Screen reader support
 
@@ -221,22 +221,22 @@ npm install --save-dev jest-axe
 
 Automated tests catch structural issues but can't cover everything. Before shipping:
 
-- [ ] Navigate the entire grid using only the keyboard (no mouse)
+- [ ] Navigate the entire grid using only the keyboard — no mouse
 - [ ] Enable VoiceOver (`Cmd+F5`) or NVDA and navigate through sort, filter, edit
-- [ ] Test at 200% zoom: nothing should overflow or become unusable
-- [ ] Toggle Windows High Contrast Mode: all content should remain visible
+- [ ] Test at 200% zoom — nothing should overflow or become unusable
+- [ ] Toggle Windows High Contrast Mode — all content should remain visible
 - [ ] Verify `aria-label` is set on the grid (one of the most common misses)
 
 ## Known limitations
 
 **Virtual scrolling:** When `virtualScroll.enabled` is true, only visible rows are in the DOM. Screen readers won't know the full dataset size unless you set `aria-rowcount` on the grid wrapper manually.
 
-**Custom cell renderers:** If you use `renderCell` to render custom content inside cells, you're responsible for making that content accessible: ARIA attributes, keyboard interaction, announcements. The grid provides the structure; your custom content needs to carry its own accessibility.
+**Custom cell renderers:** If you use `renderCell` to render custom content inside cells, you're responsible for making that content accessible — ARIA attributes, keyboard interaction, announcements. The grid provides the structure; your custom content needs to carry its own accessibility.
 
 ## Resources
 
-- [ARIA Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) -- the spec OGrid follows
+- [ARIA Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) — the spec OGrid follows
 - [WCAG 2.1 Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
-- [axe DevTools Browser Extension](https://www.deque.com/axe/devtools/) -- free in-browser auditing
+- [axe DevTools Browser Extension](https://www.deque.com/axe/devtools/) — free in-browser auditing
 
 Found an accessibility issue? [Open an issue](https://github.com/alaarab/ogrid/issues) and tag it `accessibility` with your browser, screen reader version, and reproduction steps.

package/bundled-docs/guides/browser-support-matrix.mdx

@@ -0,0 +1,73 @@
+---
+sidebar_position: 6
+title: Browser Support Matrix
+description: What runs in browser CI today, what the smoke suite covers, and which projects are in the full Playwright matrix
+---
+
+# Browser Support Matrix
+
+OGrid ships 10 UI packages, but not every browser check needs to run on every push. The browser contract is split into two layers:
+
+- `npm run test:e2e:smoke` is the fast merge gate that runs on every push and pull request in the main `CI` workflow.
+- The `Playwright Matrix` GitHub workflow runs the broader browser suite across all 10 example apps only when you dispatch it manually.
+
+## Main CI smoke suite
+
+The merge gate is intentionally small. It covers the minimum set of user journeys that should fail the build immediately if they break:
+
+```bash
+npm run test:e2e:smoke
+```
+
+Projects in the smoke gate:
+
+- `react-radix`
+- `angular-material`
+- `vue-vuetify`
+- `js`
+
+Journeys covered by the smoke suite:
+
+- Grid renders with the shared demo columns and first page of rows
+- Sorting changes the visible row order
+- Text filtering narrows results and clearing the filter restores the page
+- Inline editing commits a new value
+
+This suite is the merge gate because it covers the shared spreadsheet contract through four different rendering stacks without turning every push into a full browser matrix run.
+
+## Full Playwright matrix
+
+The manual browser workflow runs the main browser suite against every example app:
+
+```bash
+npm run test:e2e:matrix
+```
+
+| Framework package | Playwright project | Example port | Main CI smoke | Full matrix |
+|---|---|---:|---|---|
+| `@alaarab/ogrid-react-fluent` | `react-fluent` | 3001 | No | Yes |
+| `@alaarab/ogrid-react-material` | `react-material` | 3002 | No | Yes |
+| `@alaarab/ogrid-react-radix` | `react-radix` | 3003 | Yes | Yes |
+| `@alaarab/ogrid-angular-radix` | `angular-radix` | 3010 | No | Yes |
+| `@alaarab/ogrid-angular-material` | `angular-material` | 3011 | Yes | Yes |
+| `@alaarab/ogrid-angular-primeng` | `angular-primeng` | 3012 | No | Yes |
+| `@alaarab/ogrid-vue-radix` | `vue-radix` | 3020 | No | Yes |
+| `@alaarab/ogrid-vue-vuetify` | `vue-vuetify` | 3021 | Yes | Yes |
+| `@alaarab/ogrid-vue-primevue` | `vue-primevue` | 3022 | No | Yes |
+| `@alaarab/ogrid-js` | `js` | 3030 | Yes | Yes |
+
+## Docs homepage coverage
+
+The docs homepage is verified separately because it runs against the built Docusaurus site under the `/ogrid/` base path:
+
+```bash
+npm run test:e2e:docs
+```
+
+That check currently runs in the `Deploy Docs` workflow after `npm run docs:build`.
+
+## Interpreting failures
+
+- A smoke suite failure is a release-blocking regression for the shared grid contract.
+- A full-matrix failure means one wrapper or example app diverged from the documented behavior and should be audited before the next release.
+- A docs homepage failure means the public site or deployment assumptions changed.