@alaarab/ogrid-mcp 2.5.9 → 2.6.1

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 still verified 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
 

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/framework-showcase.mdx

@@ -1,15 +1,15 @@
 ---
 sidebar_position: 5
 title: Framework Showcase
-description: OGrid in React, Angular, Vue, and Vanilla JS — same API, native components
+description: OGrid in React, Angular, Vue, and Vanilla JS — shared core, native components
 ---
 
 
 # Framework Showcase
 
-OGrid works with your existing design system, not against it. React, Angular, Vue, and Vanilla JS are all fully supported, and every framework shares the same headless core so features stay in sync across all of them.
+OGrid works with your existing design system — not against it. React, Angular, Vue, and Vanilla JS are all fully supported, and every framework shares the same headless core so most behavior stays aligned across them.
 
-Every grid below is live. Sort, filter, edit, select, copy-paste, undo. It all works.
+Every grid below is live. Core interactions like sorting, filtering, editing, and selection are wired up across the demos, while deeper browser parity still varies by package.
 
 ---
 
@@ -17,11 +17,11 @@ Every grid below is live. Sort, filter, edit, select, copy-paste, undo. It all w
 
 The short version:
 
-- **Starting from scratch?** Pick the Radix variant for your framework. It's the lightest, with no peer dependencies beyond the framework itself.
-- **Already using a design system?** Pick the matching package (Fluent, Material, Angular Material, PrimeNG, Vuetify, or PrimeVue) and the grid components will use your existing components for buttons, inputs, and popovers.
+- **Starting from scratch?** Pick the Radix variant for your framework — it's the lightest, with no peer dependencies beyond the framework itself.
+- **Already using a design system?** Pick the matching package — Fluent, Material, Angular Material, PrimeNG, Vuetify, or PrimeVue — and the grid components will use your existing components for buttons, inputs, and popovers.
 - **No framework?** Use `@alaarab/ogrid-js` for a full-featured grid with just a CDN import.
 
-Switching between UI libraries later is straightforward. You change the import and the wrapper provider if required. The grid configuration (columns, data, event handlers) doesn't change.
+Switching between UI libraries later is straightforward — you change the import and the wrapper provider if required. The grid configuration (columns, data, event handlers) doesn't change.
 
 ---
 
@@ -31,7 +31,7 @@ Three design systems, all sharing the same hooks from `@alaarab/ogrid-react`. Yo
 
 ### Radix UI — lightweight default
 
-The default React package. Radix primitives are bundled in, no separate peer dependency to install. It's a good starting point for new projects or when you want minimal overhead.
+The default React package. Radix primitives are bundled in — no separate peer dependency to install. It's a good starting point for new projects or when you want minimal overhead.
 
 ```bash
 npm install @alaarab/ogrid-react-radix
@@ -53,7 +53,7 @@ export default function App() {
 
 <ShowcaseRadixDemo />
 
-### Fluent UI — Microsoft stack
+### Fluent UI — Microsoft ecosystem
 
 If you're building for Microsoft Teams, SharePoint, or any Microsoft 365 integration, Fluent is your pick. The grid uses native Fluent components for headers, filters, and inputs so it blends naturally.
 
@@ -76,7 +76,7 @@ export default function App() {
 
 ### Material UI — Google's Material Design
 
-If your app already uses MUI, this drops right in. The grid uses MUI components and respects your `ThemeProvider`, including custom palettes and typography.
+If your app already uses MUI, this drops right in. The grid uses MUI components and respects your `ThemeProvider` — including custom palettes and typography.
 
 ```bash
 npm install @alaarab/ogrid-react-material @mui/material @emotion/react @emotion/styled
@@ -101,7 +101,7 @@ export default function App() {
 
 ## Angular
 
-Signals-based reactivity with standalone components. No NgModule, no boilerplate. All three packages share the same services from `@alaarab/ogrid-angular`.
+Signals-based reactivity with standalone components — no NgModule, no boilerplate. All three packages share the same services from `@alaarab/ogrid-angular`.
 
 ### Radix (Angular CDK) — lightweight default
 
@@ -137,7 +137,7 @@ npm install @alaarab/ogrid-angular-material @angular/material @angular/cdk
 
 ### PrimeNG
 
-For teams already on PrimeFaces, the PrimeNG integration means dialogs, dropdowns, and inputs all look native.
+For teams in the PrimeFaces ecosystem, PrimeNG integration means dialogs, dropdowns, and inputs all look native.
 
 ```bash
 npm install @alaarab/ogrid-angular-primeng primeng
@@ -155,7 +155,7 @@ Composition API composables built with `ref()` and `computed()`. All three packa
 
 ### Radix (Headless UI) — lightweight default
 
-Headless UI Vue components bundled in, no peer dependencies beyond Vue 3. Good starting point for new Vue projects.
+Headless UI Vue components bundled in — no peer dependencies beyond Vue 3. Good starting point for new Vue projects.
 
 ```bash
 npm install @alaarab/ogrid-vue-radix
@@ -204,7 +204,7 @@ npm install @alaarab/ogrid-vue-primevue primevue
 
 ## Vanilla JS / TypeScript
 
-No framework, no virtual DOM. Just a container element and a class constructor. A built-in CSS theme covers light and dark mode with CSS custom properties you can override.
+No framework, no virtual DOM — just a container element and a class constructor. A built-in CSS theme covers light and dark mode with CSS custom properties you can override.
 
 ```bash
 npm install @alaarab/ogrid-js
@@ -223,7 +223,7 @@ npm install @alaarab/ogrid-js
 | **Vue** 3.3+ | Radix (Headless UI) *(bundled)* · Vuetify 3 · PrimeVue 4 | Composition API |
 | **Vanilla JS/TS** | Built-in CSS theme *(zero deps)* | EventEmitter |
 
-All 10 packages share the same `@alaarab/ogrid-core` and pass the same test suite. Switching design systems is a one-line import change.
+All 10 packages share the same `@alaarab/ogrid-core`. Shared test factories cover the common contract, and package-specific browser coverage handles the remaining interaction differences. Switching design systems within a framework family is usually a one-line import change.
 
 ## Premium inputs (optional)
 
@@ -240,7 +240,7 @@ See [Premium Inputs](../features/premium-inputs) for usage and the full list of
 
 ## Related
 
-- [Quick Start](../getting-started/quick-start) -- get a grid running in 60 seconds
-- [Vanilla JS Guide](../getting-started/vanilla-js) -- full JS API documentation
-- [Theming Guide](./theming) -- customize colors and styling
-- [Premium Inputs](../features/premium-inputs) -- advanced cell editors
+- [Quick Start](../getting-started/quick-start) — get a grid running in 60 seconds
+- [Vanilla JS Guide](../getting-started/vanilla-js) — full JS API documentation
+- [Theming Guide](./theming) — customize colors and styling
+- [Premium Inputs](../features/premium-inputs) — advanced cell editors