@alaarab/ogrid-mcp 2.5.8 → 2.5.9

package/bundled-docs/api/components-column-chooser.mdx

@@ -226,7 +226,7 @@ The trigger button shows the current visibility count: `"Column Visibility (3 of
 
 ## Accessibility
 
-`ColumnChooser` implements WCAG 2.1 AA standards with full keyboard and screen reader support.
+`ColumnChooser` meets WCAG 2.1 AA with full keyboard and screen reader support.
 
 ### ARIA Attributes
 

package/bundled-docs/api/components-column-header-filter.mdx

@@ -258,7 +258,7 @@ const handleFilterChange = (values: string[]) => {
 
 ## Accessibility
 
-`ColumnHeaderFilter` implements WCAG 2.1 AA standards with full keyboard and screen reader support.
+`ColumnHeaderFilter` meets WCAG 2.1 AA with full keyboard and screen reader support.
 
 ### ARIA Attributes
 

package/bundled-docs/api/components-datagrid-table.mdx

@@ -183,7 +183,7 @@ In Vue Radix, `DataGridTable` uses individual props via `defineProps<IOGridProps
 
 ## Accessibility
 
-`DataGridTable` implements WCAG 2.1 AA standards with comprehensive keyboard navigation and screen reader support.
+`DataGridTable` meets WCAG 2.1 AA with full keyboard navigation and screen reader support.
 
 ### ARIA Attributes
 

package/bundled-docs/api/components-pagination-controls.mdx

@@ -249,7 +249,7 @@ Showing {startItem} to {endItem} of {totalCount} {entityLabelPlural}
 
 ## Accessibility
 
-`PaginationControls` implements WCAG 2.1 AA standards with full keyboard and screen reader support.
+`PaginationControls` meets WCAG 2.1 AA with full keyboard and screen reader support.
 
 ### ARIA Attributes
 

package/bundled-docs/api/components-sidebar.mdx

@@ -303,7 +303,7 @@ The panel content area has a fixed width (240px) and scrollable content. The pan
 
 ## Accessibility
 
-`SideBar` implements WCAG 2.1 AA standards with full keyboard and screen reader support.
+`SideBar` meets WCAG 2.1 AA with full keyboard and screen reader support.
 
 ### ARIA Attributes
 

package/bundled-docs/api/components-status-bar.mdx

@@ -237,7 +237,7 @@ When `statusBar` is `true`, the grid automatically computes the counts from the
 
 ## Accessibility
 
-`StatusBar` implements WCAG 2.1 AA standards with screen reader support for dynamic content announcements.
+`StatusBar` meets WCAG 2.1 AA with screen reader support for dynamic content announcements.
 
 ### ARIA Attributes
 

package/bundled-docs/features/cell-references.mdx

@@ -171,13 +171,13 @@ const grid = new OGrid(document.getElementById('grid'), {
   </TabItem>
 </Tabs>
 
-## How It Works
+## How it works
 
-Setting `cellReferences` on the `OGrid` component enables three visual features together:
+`cellReferences` turns on three things at once:
 
-### 1. Column Letter Headers
+### 1. Column letter headers
 
-A row of Excel-style column letters (A, B, C, ..., Z, AA, AB, ...) appears above the normal header row. These letters use base-26 encoding, matching the Excel convention:
+A row of Excel-style column letters (A, B, C, ..., Z, AA, AB, ...) appears above the normal header row. They use base-26 encoding:
 
 | Columns | Letters |
 |---------|---------|
@@ -186,9 +186,9 @@ A row of Excel-style column letters (A, B, C, ..., Z, AA, AB, ...) appears above
 | 53--78 | BA--BZ |
 | 703+ | AAA, AAB, ... |
 
-### 2. Row Numbers
+### 2. Row numbers
 
-A numbered gutter column appears on the left side of the grid showing the absolute row number (1, 2, 3, ...). Row numbers are consistent across pages -- page 2 with a page size of 25 starts at row 26, not row 1.
+A numbered gutter column on the left shows the absolute row number (1, 2, 3, ...). Numbers are consistent across pages -- page 2 with a page size of 25 starts at row 26, not row 1.
 
 :::info Row numbers without cell references
 You can show row numbers independently without the full cell references feature by using the `showRowNumbers` prop:
@@ -205,11 +205,11 @@ You can show row numbers independently without the full cell references feature
 This gives you the numbered gutter column without column letters or the name box.
 :::
 
-### 3. Name Box
+### 3. Name box
 
-A small read-only text field appears in the toolbar showing the currently active cell reference (e.g. "A1", "C15", "G3"). It updates automatically when you click a cell or navigate with the keyboard.
+A read-only field in the toolbar shows the active cell reference (e.g. "A1", "C15"). It updates on click or keyboard navigation.
 
-The name box uses the column letter and absolute row number, so clicking the third column on row 5 of page 2 (with a page size of 10) shows "C15", not "C5".
+The name box uses the absolute row number, so clicking the third column on row 5 of page 2 (page size 10) shows "C15", not "C5".
 
 ## Props
 

package/bundled-docs/features/column-chooser.mdx

@@ -201,10 +201,7 @@ const grid = new OGrid(document.getElementById('grid'), {
   </TabItem>
 </Tabs>
 
-In this example:
-- **Name** is always visible (cannot be unchecked because `required: true`).
-- **Age** and **Start Date** are hidden by default but the user can enable them.
-- **Email**, **Department**, and **Salary** are visible by default and can be toggled.
+Name is always visible (`required: true` locks its checkbox). Age and Start Date are hidden by default but users can show them. Email, Department, and Salary are visible by default and can be toggled.
 
 ## How It Works
 

package/bundled-docs/features/column-groups.mdx

@@ -217,9 +217,9 @@ const grid = new OGrid(document.getElementById('grid'), {
 
 This renders a two-row header: the first row shows "Personal Info" spanning three columns and "Employment" spanning three columns, with the individual column names in the second row.
 
-## How It Works
+## How it works
 
-Column groups use the `IColumnGroupDef<T>` type. A group has a `headerName` (the text displayed in the group header cell) and a `children` array that can contain either `IColumnDef` items or nested `IColumnGroupDef` items.
+Column groups use the `IColumnGroupDef<T>` type. A group has a `headerName` and a `children` array that can contain `IColumnDef` items or nested `IColumnGroupDef` items.
 
 ```tsx
 // IColumnGroupDef<T>
@@ -267,14 +267,7 @@ Standalone `IColumnDef` items at the top level are valid alongside groups. They
 
 ## Group Header Behavior
 
-Group headers are display-only:
-
-- **Not sortable.** Clicking a group header does nothing.
-- **Not filterable.** No filter icon or popover appears on group headers.
-- **Not resizable.** Group headers cannot be dragged to resize.
-- **Centered text.** Group header labels are centered over their children by default.
-
-Sorting, filtering, and resizing remain available on the leaf column headers beneath the groups.
+Group headers are display-only. Clicking them does nothing -- no sort, no filter icon, no resize handle. Labels are centered over their children by default. Sorting, filtering, and resizing all work normally on the leaf column headers below.
 
 ## Props Reference
 

package/bundled-docs/features/column-pinning.mdx

@@ -182,19 +182,15 @@ const grid = new OGrid(document.getElementById('grid'), {
 
 The "Name" column stays fixed on the left while all other columns scroll normally.
 
-## How It Works
+## How it works
 
-Set `pinned: 'left'` on any `IColumnDef` to pin it. The grid renders pinned columns with CSS `position: sticky` and a calculated `left` offset so multiple pinned columns stack correctly.
+Set `pinned: 'left'` on any `IColumnDef`. The grid uses CSS `position: sticky` with a calculated `left` offset so multiple pinned columns stack correctly.
 
 ```tsx
 { columnId: 'name', name: 'Name', pinned: 'left' }
 ```
 
-Pinned columns:
-
-- Use **sticky positioning** so they stay visible during horizontal scroll.
-- Stack left-to-right in the order they appear in the `columns` array.
-- Work with all grid features: sorting, filtering, editing, cell selection, and context menu.
+Pinned columns use sticky positioning, stack in the order they appear in the `columns` array, and work with all features: sorting, filtering, editing, cell selection, and context menu.
 
 ### With Row Selection
 

package/bundled-docs/features/column-reordering.mdx

@@ -170,9 +170,9 @@ const grid = new OGrid(document.getElementById('grid'), {
 
 Drag any column header to rearrange it. A vertical indicator line shows where the column will be placed.
 
-## How It Works
+## How it works
 
-Set `columnReorder` to `true` on the grid to enable drag-and-drop column reordering. When a user presses and drags a column header at least 5 pixels horizontally, the grid enters reorder mode:
+Set `columnReorder` to `true`. When a user drags a column header at least 5 pixels horizontally, the grid enters reorder mode:
 
 1. A vertical drop indicator appears between columns as the user drags.
 2. On mouse-up, the column is moved to the target position.
@@ -300,11 +300,9 @@ const columns = [
 
 In this example, "ID" and "Name" can be swapped with each other but cannot be dragged into the unpinned section. The unpinned columns ("Email", "Department", "Salary") can be freely rearranged among themselves.
 
-### Edge Cases
+### Edge cases
 
-- **Column groups:** Group headers are not draggable. Only leaf columns (with a `columnId`) participate in reordering.
-- **Resize handle zone:** The rightmost 8 pixels of each header cell are reserved for column resizing. Dragging in that zone starts a resize, not a reorder.
-- **Minimum drag distance:** A 5-pixel horizontal threshold prevents accidental reorders from clicks.
+Group headers are not draggable -- only leaf columns with a `columnId` can be reordered. The rightmost 8 pixels of each header cell are reserved for column resizing, so dragging there starts a resize instead. The 5-pixel horizontal threshold prevents accidental reorders from ordinary clicks.
 
 ## Grid API
 

package/bundled-docs/features/column-types.mdx

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 12.5
 title: Column Types
-description: Built-in column types for common data patterns  -  text, numeric, date, and boolean.
+description: Built-in column types for common data patterns -- text, numeric, date, and boolean.
 ---
 
 

package/bundled-docs/features/context-menu.mdx

@@ -150,9 +150,9 @@ const grid = new OGrid(document.getElementById('grid'), {
 
 Right-click a cell to see the context menu with all available actions.
 
-## How It Works
+## How it works
 
-The context menu is built in and requires no additional configuration. It appears when the user right-clicks on a data cell. Right-clicking on headers, empty space, or outside the grid does not open the menu.
+The context menu is built in. It appears on data cell right-clicks -- no configuration needed.
 
 ### Built-in Menu Items
 
@@ -187,13 +187,9 @@ The Undo and Redo items reflect their availability through the `canUndo` and `ca
 
 If `onUndo` and `onRedo` are not provided, the undo/redo items still appear but do nothing.
 
-### Cell-Only Activation
+### Cell-only activation
 
-The context menu only opens on cell right-clicks. This is intentional:
-
-- **Header right-click**: default browser context menu (no grid menu).
-- **Empty space right-click**: default browser context menu.
-- **Cell right-click**: grid context menu with actions scoped to the current selection.
+Right-clicking a header or empty space shows the browser's default context menu. The grid menu only appears on data cell right-clicks, with actions scoped to the current selection.
 
 ### Copy/Cut Disabled State
 

package/bundled-docs/features/csv-export.mdx

@@ -156,9 +156,9 @@ document.getElementById('export-btn').addEventListener('click', () => {
   </TabItem>
 </Tabs>
 
-## How It Works
+## How it works
 
-### The `exportToCsv` Function
+### The `exportToCsv` function
 
 ```tsx
 exportToCsv<T>(
@@ -182,11 +182,11 @@ The function:
 3. Escapes values containing commas, quotes, or newlines.
 4. Triggers a browser download with the specified filename.
 
-### Context Menu Integration
+### Context menu
 
-When `cellSelection` is enabled (the default), the context menu does not include a dedicated "Export to CSV" item. Use the `exportToCsv` utility directly from a toolbar button or custom UI element.
+The context menu doesn't include an "Export to CSV" item. Use `exportToCsv` from a toolbar button or any other UI you control.
 
-### Exporting Visible Columns Only
+### Exporting visible columns only
 
 Filter the columns array to only include visible columns before passing to `exportToCsv`.
 
@@ -201,9 +201,9 @@ exportToCsv(
 );
 ```
 
-### Formatted Values
+### Matching display formatting
 
-Use `valueFormatter` in your `getValue` function so exported data matches the display. For example, a currency column that shows "$1,234.56" in the grid will export that same string.
+Apply `valueFormatter` in your `getValue` so the export matches what users see -- a currency column showing "$1,234.56" will export that same string.
 
 ```tsx
 const getValue = (item: Row, columnId: string) => {

package/bundled-docs/features/editing.mdx

@@ -7,17 +7,17 @@ description: Inline editing, clipboard operations, fill handle, and undo/redo
 
 # Editing & Clipboard
 
-Double-click a cell to edit it. Hit Enter to save, Escape to cancel. It feels like a spreadsheet because it's built to work like one — with clipboard paste, drag-to-fill, and full undo/redo out of the box.
+Double-click a cell to edit it. Enter saves, Escape cancels. Clipboard paste, drag-to-fill, and full undo/redo are all included.
 
 <CellEditingDemo />
 
 :::tip Try it in your framework
-The demo above uses Radix UI for styling. Each framework renders editors with its native components — dropdowns, date pickers, and inputs that match your design system.
+The demo above uses Radix UI for styling. Each framework renders editors with its native components: dropdowns, date pickers, and inputs that match your design system.
 :::
 
 ## Get started in 5 minutes
 
-Here's a realistic setup: an employee table with text, dropdown, and numeric columns — including validation that rejects bad salary values before they're saved.
+Here's a realistic setup: an employee table with text, dropdown, and numeric columns, including validation that rejects bad salary values before they're saved.
 
 <Tabs groupId="framework">
   <TabItem value="react" label="React" default>
@@ -79,7 +79,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>`
@@ -134,7 +134,7 @@ Same component 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>
@@ -243,18 +243,18 @@ That single setup gives you inline editing, clipboard paste, fill handle, and fu
 
 Double-click or press **F2** to open the editor. When you're done:
 
-- **Enter** — saves and moves focus down
-- **Tab** — saves and moves focus right
-- **Escape** — cancels, restores the original value
+- **Enter** -- saves and moves focus down
+- **Tab** -- saves and moves focus right
+- **Escape** -- cancels, restores the original value
 
 ### Which editor should I use?
 
 | `cellEditor` | When to use it |
 |--------------|----------------|
-| `'text'` (default) | Freeform text — names, notes, anything open-ended |
+| `'text'` (default) | Freeform text -- names, notes, anything open-ended |
 | `'select'` | Small, fixed list where the user picks exactly one value |
-| `'richSelect'` | Longer list with keyboard search — much nicer UX than a plain dropdown |
-| `'checkbox'` | Boolean toggle — renders as a checkbox, commits on click |
+| `'richSelect'` | Longer list with keyboard search -- much nicer UX than a plain dropdown |
+| `'checkbox'` | Boolean toggle -- renders as a checkbox, commits on click |
 
 ### Searchable dropdown (richSelect)
 
@@ -280,7 +280,7 @@ Use a function for `editable` to make it conditional:
 { columnId: 'name', editable: (item) => item.status !== 'locked' }
 ```
 
-The cell still renders normally — it just won't open an editor when you click it.
+The cell still renders normally. It just won't open an editor when you click it.
 
 ### Custom editor (popup)
 
@@ -308,7 +308,7 @@ function DateEditor({ value, onValueChange, onCommit, onCancel }: ICellEditorPro
 
 ### Validating input with `valueParser`
 
-`valueParser` runs on every edit, paste, fill, and delete. Return `undefined` to silently reject the value — the cell snaps back to its previous state:
+`valueParser` runs on every edit, paste, fill, and delete. Return `undefined` to silently reject the value. The cell snaps back to its previous state:
 
 ```tsx
 {
@@ -323,14 +323,14 @@ function DateEditor({ value, onValueChange, onCommit, onCancel }: ICellEditorPro
 ```
 
 :::tip Pro tip
-`valueParser` is your single source of truth for validation — it runs on inline edits, clipboard paste, fill handle, and delete. You don't need separate logic for each.
+`valueParser` is your single validation point -- it covers inline edits, clipboard paste, fill handle, and delete. You don't need separate logic for each.
 :::
 
 ## Clipboard
 
 <ClipboardDemo />
 
-Standard shortcuts work on any selection — no configuration needed:
+Standard shortcuts work on any selection with no configuration:
 
 | Key | Action | Requires `editable` |
 |-----|--------|-------------------|
@@ -339,13 +339,13 @@ Standard shortcuts work on any selection — no configuration needed:
 | Ctrl+X / Cmd+X | Cut (copy then clear) | Yes |
 | Delete / Backspace | Clear selected cells | Yes |
 
-Copy respects `valueFormatter` — what you see is what you get in the clipboard. Paste calls `valueParser` on each value, so bad data is rejected before it lands in your rows.
+Copy respects `valueFormatter`, so what you see is what ends up in the clipboard. Paste calls `valueParser` on each value, so bad data is rejected before it lands in your rows.
 
 ## Fill handle
 
 <FillHandleDemo />
 
-The small square in the bottom-right corner of a selection — drag it down to fill cells. Works exactly like Excel. Each filled cell goes through `valueParser`, so validation still applies.
+The small square in the bottom-right corner of a selection. Drag it down to fill cells, just like Excel. Each filled cell goes through `valueParser`, so validation still applies.
 
 :::tip Pro tip
 Select a range of cells before dragging the fill handle to populate multiple columns at once. The fill handle uses `requestAnimationFrame` internally, so it stays smooth even on large selections.
@@ -363,7 +363,7 @@ const { handleCellValueChanged, undo, redo, canUndo, canRedo } = useUndoRedo({
 });
 ```
 
-Pass `handleCellValueChanged` as `onCellValueChanged` — it intercepts changes and pushes them onto the undo stack before updating your state. Undo/redo are also available in the right-click [context menu](./context-menu).
+Pass `handleCellValueChanged` as `onCellValueChanged`. It intercepts changes and pushes them onto the undo stack before updating your state. Undo/redo are also available in the right-click [context menu](./context-menu).
 
 ## Props reference
 
@@ -382,6 +382,6 @@ Pass `handleCellValueChanged` as `onCellValueChanged` — it intercepts changes
 
 ## Next steps
 
-- [Spreadsheet Selection](./spreadsheet-selection) — select ranges before editing or pasting
-- [Context Menu](./context-menu) — right-click to undo, copy, and more
-- [Formulas](./formulas) — formula-aware editing with `=SUM(A1:A5)` syntax
+- [Spreadsheet Selection](./spreadsheet-selection) -- select ranges before editing or pasting
+- [Context Menu](./context-menu) -- right-click to undo, copy, and more
+- [Formulas](./formulas) -- formula-aware editing with `=SUM(A1:A5)` syntax

package/bundled-docs/features/filtering.mdx

@@ -7,12 +7,12 @@ description: Column-level filtering with text, multi-select, date, and people fi
 
 # Filtering
 
-You have 3,000 support tickets and need to find the ones assigned to Alice that were opened last week. Click the filter icon on "Assignee", pick Alice. Click the filter on "Created Date", set the range. Done — two clicks, no code.
+You have 3,000 support tickets and need to find the ones assigned to Alice that were opened last week. Click the filter icon on "Assignee", pick Alice. Click the filter on "Created Date", set the range. Two clicks, no code.
 
 <FilteringDemo />
 
 :::tip Framework-Specific Styling
-The demo uses React Radix styling. Each framework renders filter UI with its native components — dropdowns, date pickers, and inputs that match your design system.
+The demo uses React Radix styling. Each framework renders filter UI with its native components: dropdowns, date pickers, and inputs that match your design system.
 :::
 
 ## Add filters to any column
@@ -61,7 +61,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>`
@@ -109,7 +109,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>
@@ -203,7 +203,7 @@ Type "john" and it matches "John Smith", "Johnny", and "Johnathan".
 
 ### Multi-select filter
 
-A checkbox list — users pick one or more values, the grid shows only matching rows. Has built-in "Select All" and "Clear All" buttons.
+A checkbox list. Users pick one or more values and the grid shows only matching rows. Has built-in "Select All" and "Clear All" buttons.
 
 ```tsx
 {
@@ -223,8 +223,8 @@ A checkbox list — users pick one or more values, the grid shows only matching
 | `optionsSource` | How it works |
 |-----------------|----------|
 | _(omitted)_ | Client-side: unique values extracted from your data. Server-side: calls your API. |
-| `'static'` | Uses the `options` array you provide — great for known enums. |
-| `'api'` | Calls `dataSource.fetchFilterOptions(field)` — for dynamic option lists. |
+| `'static'` | Uses the `options` array you provide -- great for known enums. |
+| `'api'` | Calls `dataSource.fetchFilterOptions(field)` -- for dynamic option lists. |
 | `'years'` | Auto-generates a year list from the current year down. |
 
 ### Date filter
@@ -241,7 +241,7 @@ A date range picker with "From" and "To" inputs. Shows only rows where the colum
 ```
 
 :::tip
-A column with `type: 'date'` automatically gets date formatting, chronological sorting, and a native date input editor — you don't need to configure those separately.
+A column with `type: 'date'` automatically gets date formatting, chronological sorting, and a native date input editor. You don't need to configure those separately.
 :::
 
 ### People filter
@@ -262,7 +262,7 @@ The people filter requires a `dataSource` with a `searchPeople` method that retu
 
 ## Keeping filter state outside the grid
 
-By default the grid owns its filter state — filters reset when the component unmounts. To persist them (URL sync, page reload survival), pass `filters` and `onFiltersChange`:
+By default the grid owns its filter state, and filters reset when the component unmounts. To persist them (URL sync, page reload survival), pass `filters` and `onFiltersChange`:
 
 ```tsx
 function App() {
@@ -283,11 +283,11 @@ function App() {
 }
 ```
 
-Now you can serialize `filters` to the URL, localStorage, or a server — and the grid will restore the exact filter state when the user comes back.
+Now you can serialize `filters` to the URL, localStorage, or a server. The grid will restore the exact filter state when the user comes back.
 
 ## Server-side filtering
 
-When you're using a `dataSource`, the grid hands off filter values to your `fetchPage()` function. You decide what to do with them — query params, request body, whatever your API expects:
+When you're using a `dataSource`, the grid passes filter values to your `fetchPage()` function. You decide what to do with them -- query params, request body, whatever your API expects:
 
 ```tsx
 const dataSource: IDataSource<Task> = {
@@ -323,7 +323,7 @@ const dataSource: IDataSource<Task> = {
 ```
 
 :::tip Pro tip
-Server-side filtering pairs naturally with [pagination](./pagination). The `totalCount` in your `fetchPage` response tells the grid how many pages there are — so pagination stays accurate even when filters narrow the result set.
+Server-side filtering pairs naturally with [pagination](./pagination). The `totalCount` in your `fetchPage` response tells the grid how many pages exist, so pagination stays accurate even when filters narrow the result set.
 :::
 
 ## Props reference
@@ -341,6 +341,6 @@ Server-side filtering pairs naturally with [pagination](./pagination). The `tota
 
 ## Next steps
 
-- [Sorting](./sorting) — sort filtered results by any column
-- [Pagination](./pagination) — paginate filtered results server-side or client-side
-- [Server-Side Data](./server-side-data) — move all filtering, sorting, and paging to the server
+- [Sorting](./sorting) -- sort filtered results by any column
+- [Pagination](./pagination) -- paginate filtered results server-side or client-side
+- [Server-Side Data](./server-side-data) -- move all filtering, sorting, and paging to the server

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. It works like Excel, built right into your grid — 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. 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 itself is framework-agnostic — same behavior in React, Angular, Vue, and Vanilla JS.
+The demo uses Radix UI styling. The formula engine 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 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.
+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.
 
 ## 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 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.
+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.
 
 ## 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>
 
-## How It Works
+## API reference
 
-Pass a `ref` to the `OGrid` component. The ref exposes the `IOGridApi<T>` interface with methods for programmatic grid control.
+Pass a `ref` to `OGrid`. It exposes the `IOGridApi<T>` interface.
 
 ### 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
 
-OGrid supports comprehensive keyboard navigation for moving between cells, editing values, selecting ranges, and performing clipboard and undo operations -- all without touching the mouse.
+Navigate, edit, select, and operate on cells entirely from the keyboard. Click a cell to make it active, then use the shortcuts below.
 
 ## Live Demo
 
@@ -119,7 +119,7 @@ const grid = new OGrid(document.getElementById('grid'), {
   </TabItem>
 </Tabs>
 
-Click any cell to make it the active cell, then use the keyboard to navigate and edit.
+Click a cell to focus it, 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
 
-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.
+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.
 
 ### 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 seamlessly across pinned and scrollable columns
+- [Column Pinning](./column-pinning) -- navigation works 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 seamlessly 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 with both client-side data arrays and server-side data sources.
 
 ## Live Demo
 

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

@@ -6,11 +6,11 @@ description: What is OGrid and why use it
 
 # Overview
 
-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.
+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.
 
 ## Why OGrid?
 
-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.
+Most production-grade data grids are free but limited, or full-featured but expensive. OGrid is neither.
 
 - **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.
@@ -84,10 +84,7 @@ All packages within a framework export the same `OGrid` component with the same
 
 ### Why This Matters
 
-- **Write once, render anywhere.** A bug fix or feature in core lands across all frameworks instantly.
-- **Zero lock-in.** Migrate between React, Angular, and Vue without rewriting business logic.
-- **Guaranteed parity.** Shared core ensures all packages behave identically.
-- **Small surface area.** No duplicated state logic to drift out of sync.
+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.
 
 ## 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 working out of the box.
+Here's a grid in 60 seconds. Sorting, filtering, editing, pagination, and keyboard navigation all work 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, sortable, filterable, editable data grid using a simple class-based API — just 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 full-featured data grid using a class-based API: pass 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 — sortable, filterable, and editable inline.
+Let's make an order management dashboard. It tracks orders by status, amount, and customer, with sorting, filtering, and inline editing.
 
 ```html
 <div id="orders-grid" style="height: 500px;"></div>
@@ -88,15 +88,15 @@ 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
+- **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 +104,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 — give it an explicit height (CSS or inline).
+The container element defines where the grid renders. OGrid fills it completely, so give it an explicit height (CSS or inline).
 
 ## Key options
 
@@ -210,6 +210,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) -- all features work identically in the JS package
+- [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"` — it announces changes without interrupting what the user is doing.
+The status bar uses `role="status"` with `aria-live="polite"`, so 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

@@ -7,9 +7,9 @@ description: OGrid in React, Angular, Vue, and Vanilla JS — same API, native c
 
 # 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 features stay in sync across all of them.
 
-Every grid below is live. Sort, filter, edit, select, copy-paste, undo — it all works.
+Every grid below is live. Sort, filter, edit, select, copy-paste, undo. It all works.
 
 ---
 
@@ -17,11 +17,11 @@ Every grid below is live. Sort, filter, edit, select, copy-paste, undo — it al
 
 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 ecosystem
+### Fluent UI — Microsoft stack
 
 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 in the PrimeFaces ecosystem, PrimeNG integration means dialogs, dropdowns, and inputs all look native.
+For teams already on PrimeFaces, the 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
@@ -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

package/bundled-docs/guides/mcp.mdx

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 # Editor Integration (MCP)
 
-`@alaarab/ogrid-mcp` connects your AI coding assistant to OGrid documentation — so instead of switching tabs to look things up, you can just ask your editor while you code.
+`@alaarab/ogrid-mcp` connects your AI coding assistant to OGrid documentation. Instead of switching tabs to look things up, you can ask your editor while you code.
 
 It also includes a **live testing bridge** that lets your editor read and control an OGrid instance running in your browser in real time.
 
@@ -18,7 +18,7 @@ MCP (Model Context Protocol) is a standard that lets editors like Claude Code an
 - Pull up specific API references without leaving your editor
 - Inspect and interact with a running grid during development
 
-You don't need to understand the protocol to use it — just run one command and your editor gains access.
+You don't need to understand the protocol to use it. Run one command and your editor gains access.
 
 ## Connect to your editor
 
@@ -28,7 +28,7 @@ You don't need to understand the protocol to use it — just run one command and
 claude mcp add ogrid -- npx -y @alaarab/ogrid-mcp
 ```
 
-That's it. The docs are bundled in the package — no config file needed.
+That's it. The docs are bundled in the package, no config file needed.
 
 ### Claude Desktop
 
@@ -72,13 +72,13 @@ Show me how to use the formula engine in Vue.
 Help me migrate from AG Grid to OGrid.
 ```
 
-The MCP server searches through the full documentation — features, API references, getting started guides, and code examples — and returns the relevant sections along with your context.
+The MCP server searches through the full documentation (features, API references, getting started guides, and code examples) and returns the relevant sections along with your context.
 
 ---
 
 ## Available tools
 
-These are what the MCP server provides to your editor. You don't call them directly — your editor uses them automatically when you ask questions.
+These are what the MCP server provides to your editor. You don't call them directly; your editor uses them automatically when you ask questions.
 
 ### `search_docs`
 
@@ -89,9 +89,9 @@ search_docs query="server-side data" framework="react"
 ```
 
 Parameters:
-- `query` (required) — what you're looking for
-- `framework` (optional) — `react`, `angular`, `vue`, or `js`
-- `category` (optional) — `features`, `getting-started`, `guides`, or `api`
+- `query` (required): what you're looking for
+- `framework` (optional): `react`, `angular`, `vue`, or `js`
+- `category` (optional): `features`, `getting-started`, `guides`, or `api`
 
 ### `list_docs`
 
@@ -133,7 +133,7 @@ Resources can be read by your editor without calling a tool explicitly.
 
 | Resource | Description |
 |----------|-------------|
-| `ogrid://quick-reference` | Key API overview — props, column definitions, IOGridApi, filter types |
+| `ogrid://quick-reference` | Key API overview: props, column definitions, IOGridApi, filter types |
 | `ogrid://docs/{path}` | Any documentation page by path (e.g. `ogrid://docs/features/filtering`) |
 | `ogrid://migration-guide` | Step-by-step guide for migrating from AG Grid to OGrid |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-mcp",
-  "version": "2.5.8",
+  "version": "2.5.9",
   "description": "MCP server for OGrid documentation",
   "type": "module",
   "bin": {