@alaarab/ogrid-mcp 2.6.0 → 2.7.0

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, and the current browser verification split is documented in the [Browser Support Matrix](./browser-support-matrix).
 
 ---
 
@@ -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

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. Instead of switching tabs to look things up, you can ask your editor while you code.
+`@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.
 
 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. Run one command and your editor gains access.
+You don't need to understand the protocol to use it — just 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. Run one command and your ed
 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.6.0",
+  "version": "2.7.0",
   "description": "MCP server for OGrid documentation",
   "type": "module",
   "bin": {

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

@@ -1,313 +0,0 @@
----
-sidebar_position: 12
-title: Row Grouping
-description: Group rows by one or more columns with collapsible group headers
----
-
-
-# Row Grouping
-
-Group your data by one or more columns. Each group gets a collapsible header row showing the group value and item count. Multi-level grouping nests groups inside each other.
-
-## Basic usage
-
-Pass a `groupBy` array with the column IDs you want to group on. Groups start collapsed -- users click the header to expand.
-
-<Tabs groupId="framework">
-  <TabItem value="react" label="React" default>
-
-```tsx
-
-const columns = [
-  { columnId: 'name', name: 'Name', sortable: true },
-  { columnId: 'department', name: 'Department', sortable: true },
-  { columnId: 'country', name: 'Country', sortable: true },
-];
-
-function App() {
-  return (
-    <OGrid
-      columns={columns}
-      data={employees}
-      getRowId={(item) => item.id}
-      groupBy={['department']}
-    />
-  );
-}
-```
-
-:::tip Switching UI libraries
-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>`
-- **Material UI** (MUI v7): `from '@alaarab/ogrid-react-material'` - wrap in `<ThemeProvider>`
-:::
-
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `<ogrid [props]="gridProps" />`
-})
-export class GridComponent {
-  gridProps = {
-    columns: [
-      { columnId: 'name', name: 'Name', sortable: true },
-      { columnId: 'department', name: 'Department', sortable: true },
-      { columnId: 'country', name: 'Country', sortable: true },
-    ] as IColumnDef<Employee>[],
-    data: employees,
-    getRowId: (item: Employee) => item.id,
-    groupBy: ['department'],
-  };
-}
-```
-
-:::tip Switching UI libraries
-Same component API across Angular packages. Change the import:
-
-- **Radix (CDK)**: `from '@alaarab/ogrid-angular-radix'` *(default, lightweight)*
-- **Angular Material**: `from '@alaarab/ogrid-angular-material'`
-- **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
-
-All components are standalone, no NgModule required.
-:::
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup lang="ts">
-
-const columns: IColumnDef<Employee>[] = [
-  { columnId: 'name', name: 'Name', sortable: true },
-  { columnId: 'department', name: 'Department', sortable: true },
-  { columnId: 'country', name: 'Country', sortable: true },
-];
-
-const gridProps = {
-  columns,
-  data: employees,
-  getRowId: (item: Employee) => item.id,
-  groupBy: ['department'],
-};
-</script>
-
-<template>
-  <OGrid :gridProps="gridProps" />
-</template>
-```
-
-:::tip Switching UI libraries
-Same API across Vue packages. Change the import:
-
-- **Radix (Headless UI)**: `from '@alaarab/ogrid-vue-radix'` *(default, lightweight)*
-- **Vuetify**: `from '@alaarab/ogrid-vue-vuetify'` - wrap in `<v-app>` for theming
-- **PrimeVue**: `from '@alaarab/ogrid-vue-primevue'`
-:::
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-
-const grid = new OGrid(document.getElementById('grid'), {
-  columns: [
-    { columnId: 'name', name: 'Name', sortable: true },
-    { columnId: 'department', name: 'Department', sortable: true },
-    { columnId: 'country', name: 'Country', sortable: true },
-  ],
-  data: employees,
-  getRowId: (item) => item.id,
-  groupBy: ['department'],
-});
-```
-
-  </TabItem>
-</Tabs>
-
-## Multi-level grouping
-
-Pass multiple column IDs to create nested groups. The first column is the top-level group, the second is nested within it, and so on.
-
-<Tabs groupId="framework">
-  <TabItem value="react" label="React" default>
-
-```tsx
-<OGrid
-  columns={columns}
-  data={employees}
-  getRowId={(item) => item.id}
-  groupBy={['country', 'department']}
-/>
-```
-
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-gridProps = {
-  // ...columns, data, getRowId
-  groupBy: ['country', 'department'],
-};
-```
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup>
-const gridProps = {
-  // ...columns, data, getRowId
-  groupBy: ['country', 'department'],
-};
-</script>
-```
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-const grid = new OGrid(container, {
-  // ...columns, data, getRowId
-  groupBy: ['country', 'department'],
-});
-```
-
-  </TabItem>
-</Tabs>
-
-## Programmatic control
-
-You can expand, collapse, and toggle groups through the API.
-
-<Tabs groupId="framework">
-  <TabItem value="react" label="React" default>
-
-```tsx
-
-function App() {
-  const apiRef = useRef<IOGridApi<Employee>>(null);
-
-  return (
-    <>
-      <button onClick={() => apiRef.current?.expandAllGroups()}>
-        Expand All
-      </button>
-      <button onClick={() => apiRef.current?.collapseAllGroups()}>
-        Collapse All
-      </button>
-      <OGrid
-        ref={apiRef}
-        columns={columns}
-        data={employees}
-        getRowId={(item) => item.id}
-        groupBy={['department']}
-      />
-    </>
-  );
-}
-```
-
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `
-    <button (click)="expandAll()">Expand All</button>
-    <button (click)="collapseAll()">Collapse All</button>
-    <ogrid [props]="gridProps" />
-  `
-})
-export class GridComponent {
-  // Use the OGridService or template ref to access the API
-  expandAll() { /* apiRef.expandAllGroups() */ }
-  collapseAll() { /* apiRef.collapseAllGroups() */ }
-}
-```
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup>
-
-const ogridRef = ref(null);
-
-function expandAll() {
-  ogridRef.value?.api?.expandAllGroups();
-}
-function collapseAll() {
-  ogridRef.value?.api?.collapseAllGroups();
-}
-</script>
-
-<template>
-  <button @click="expandAll">Expand All</button>
-  <button @click="collapseAll">Collapse All</button>
-  <OGrid ref="ogridRef" :gridProps="gridProps" />
-</template>
-```
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-const grid = new OGrid(container, {
-  columns,
-  data: employees,
-  getRowId: (item) => item.id,
-  groupBy: ['department'],
-});
-
-// Expand/collapse all
-grid.expandAllGroups();
-grid.collapseAllGroups();
-
-// Toggle a specific group
-grid.toggleGroup('department::Engineering');
-
-// Change grouping at runtime
-grid.setGroupBy(['country', 'department']);
-
-// Clear grouping
-grid.setGroupBy([]);
-```
-
-  </TabItem>
-</Tabs>
-
-## API reference
-
-| Prop / Method | Type | Description |
-|---|---|---|
-| `groupBy` | `string[]` | Column IDs to group by. Order matters for nesting. |
-| `setGroupBy(ids)` | method | Change grouping at runtime. Resets expanded state. |
-| `toggleGroup(key)` | method | Toggle a specific group open/closed. |
-| `expandAllGroups()` | method | Expand every group at all nesting levels. |
-| `collapseAllGroups()` | method | Collapse every group. |
-
-### Group key format
-
-Group keys follow the pattern `columnId::value`. For nested groups, keys are joined with `>`:
-
-- Single level: `department::Engineering`
-- Nested: `country::US>department::Engineering`
-
-## Styling
-
-Group header rows use the `.ogrid-group-header-row` CSS class. Override the background with the `--ogrid-bg-row-group` CSS variable:
-
-```css
-:root {
-  --ogrid-bg-row-group: #f0f4f8;
-}
-```