@alaarab/ogrid-mcp 2.8.1 → 2.11.0

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

@@ -6,7 +6,9 @@ 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 a lightweight, open-source React data grid library that delivers spreadsheet-grade features without the enterprise paywall. It ships React UI implementations for Radix and Fluent UI, all powered by a shared TypeScript core.
+
+> **Note:** Angular, Vue, vanilla JS, and Material UI adapters were available through earlier 2.9.x versions and remain on npm at those versions. New development is React-first (Radix / Fluent). See the project README's "Frozen adapters" section if you have an existing install on one of the frozen variants.
 
 ## Why OGrid?
 
@@ -14,26 +16,24 @@ Most production-grade React data grids fall into one of two camps: free but limi
 
 - **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.
-- **Multiple frameworks.** React, Angular, and Vue adapters with UI library choices for each -- switch later with zero logic changes.
+- **Two React UI flavors.** Pick Radix or Fluent — switch later with a one-line import change.
 - **TypeScript-first.** Full strict-mode TypeScript with exported types for every prop, event, and API method.
-- **Lightweight.** The Radix package has no heavy framework dependency. Fluent and Material packages use their respective component libraries as peer dependencies.
+- **Lightweight.** The Radix package has no heavy framework dependency. Fluent uses `@fluentui/react-components` as a peer dependency.
 
 ## Architecture
 
-OGrid is built on a **3-layer architecture**: a pure TypeScript core, framework adapter layers (React hooks, Angular services, Vue composables), and thin UI shells. No duplicated logic, no drift.
+OGrid is built on a **3-layer architecture**: a pure TypeScript core, a React adapter layer, and thin UI shells. No duplicated logic, no drift.
 
 
 <ArchitectureDiagram />
 
 ### Core Layer  -  `@alaarab/ogrid-core`
 
-Pure TypeScript with zero dependencies. Provides the type system (`IOGridProps`, `IColumnDef`, `IOGridApi`, `FilterValue`, etc.) and shared algorithms (`getCellValue`, `buildHeaderRows`, `parseValue`, `normalizeSelectionRange`, etc.) used by both the React and JS packages.
-
-### Framework Adapter Layers
+Pure TypeScript with zero dependencies. Provides the type system (`IOGridProps`, `IColumnDef`, `IOGridApi`, `FilterValue`, etc.) and shared algorithms (`getCellValue`, `buildHeaderRows`, `parseValue`, `normalizeSelectionRange`, etc.) consumed by the React adapter.
 
-Each framework adapter translates Core's algorithms into idiomatic framework patterns  -  React hooks, Angular services with signals, or Vue composables with refs.
+### React Adapter  -  `@alaarab/ogrid-react`
 
-**React**  -  `@alaarab/ogrid-react`
+Translates Core's algorithms into idiomatic React hooks.
 
 | Domain | Hooks |
 |---|---|
@@ -45,26 +45,7 @@ Each framework adapter translates Core's algorithms into idiomatic framework pat
 | **Layout** | `useColumnResize` · `useSideBarState` · `useColumnChooserState` |
 | **Filtering** | `useColumnHeaderFilterState` · `useFilterOptions` |
 
-**Angular**  -  `@alaarab/ogrid-angular`
-
-Angular v21 services using signals (`signal()`, `computed()`, `effect()`). Standalone components with inline templates. Zone-less by default.
-
-| Service | Equivalent |
-|---|---|
-| `OGridService` | `useOGrid`  -  pagination, sorting, filtering, visibility, editing |
-| `DataGridStateService` | `useDataGridState`  -  layout, selection, editing, interaction |
-
-**Vue**  -  `@alaarab/ogrid-vue`
-
-Vue 3 Composition API composables using `ref()`, `computed()`, `watch()`.
-
-| Composable | Equivalent |
-|---|---|
-| `useOGrid` | Pagination, sorting, filtering, column visibility |
-| `useDataGridState` | Layout, cell selection, editing, clipboard, keyboard nav |
-| 20+ feature composables | `useCellEditing`, `useCellSelection`, `useClipboard`, etc. |
-
-### UI Layer  -  Pick Your Framework
+### UI Layer  -  Pick Your Design System
 
 Each UI package is a thin shell (~1,500 lines) that calls the same core logic and renders into native components:
 
@@ -72,21 +53,13 @@ Each UI package is a thin shell (~1,500 lines) that calls the same core logic an
 |---|---|---|
 | `@alaarab/ogrid-react-radix` | Radix primitives | Lightweight apps, custom design systems |
 | `@alaarab/ogrid-react-fluent` | Fluent UI v9 | Microsoft 365, SharePoint, Teams apps |
-| `@alaarab/ogrid-react-material` | MUI v7 | Material Design apps, dashboards |
-| `@alaarab/ogrid-angular-radix` | Angular CDK | Lightweight Angular apps, custom design systems |
-| `@alaarab/ogrid-angular-material` | Angular Material v21 | Angular + Material Design |
-| `@alaarab/ogrid-angular-primeng` | PrimeNG v21 | Angular + PrimeNG ecosystem |
-| `@alaarab/ogrid-vue-radix` | Radix primitives (Vue) | Lightweight Vue apps, custom design systems |
-| `@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 within that framework family.
+Both packages export the same `OGrid` component with the same props. Switching design systems is a one-line import change  -  your column definitions, event handlers, data sources, and API calls stay identical.
 
 ### Why This Matters
 
-- **Shared core, broad portability.** A core fix often benefits every package, while wrapper-specific UI behavior is verified in the browser matrix and documented per package.
-- **Zero lock-in.** Migrate between React, Angular, and Vue without rewriting business logic.
 - **Shared core, aligned behavior.** Most behavior is implemented once in core, with package-specific docs and tests calling out the remaining differences.
+- **Zero lock-in.** Migrate between React UI flavors without rewriting business logic.
 - **Small surface area.** No duplicated state logic to drift out of sync.
 
 ## Packages
@@ -98,19 +71,6 @@ All packages within a framework export the same `OGrid` component with the same
 | `@alaarab/ogrid-react` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-react)](https://npmjs.com/package/@alaarab/ogrid-react) | React hooks, headless components, utilities |
 | `@alaarab/ogrid-react-radix` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-react-radix)](https://npmjs.com/package/@alaarab/ogrid-react-radix) | Radix UI implementation (default, lightweight) |
 | `@alaarab/ogrid-react-fluent` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-react-fluent)](https://npmjs.com/package/@alaarab/ogrid-react-fluent) | Fluent UI v9 implementation |
-| `@alaarab/ogrid-react-material` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-react-material)](https://npmjs.com/package/@alaarab/ogrid-react-material) | Material UI v7 implementation |
-| **Angular** | | |
-| `@alaarab/ogrid-angular` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-angular)](https://npmjs.com/package/@alaarab/ogrid-angular) | Angular v21 services with signals |
-| `@alaarab/ogrid-angular-radix` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-angular-radix)](https://npmjs.com/package/@alaarab/ogrid-angular-radix) | Angular CDK implementation (lightweight) |
-| `@alaarab/ogrid-angular-material` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-angular-material)](https://npmjs.com/package/@alaarab/ogrid-angular-material) | Angular Material v21 implementation |
-| `@alaarab/ogrid-angular-primeng` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-angular-primeng)](https://npmjs.com/package/@alaarab/ogrid-angular-primeng) | PrimeNG v21 implementation |
-| **Vue** | | |
-| `@alaarab/ogrid-vue` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-vue)](https://npmjs.com/package/@alaarab/ogrid-vue) | Vue 3 composables with Composition API |
-| `@alaarab/ogrid-vue-radix` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-vue-radix)](https://npmjs.com/package/@alaarab/ogrid-vue-radix) | Radix Vue implementation (lightweight) |
-| `@alaarab/ogrid-vue-vuetify` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-vue-vuetify)](https://npmjs.com/package/@alaarab/ogrid-vue-vuetify) | Vuetify 3 implementation |
-| `@alaarab/ogrid-vue-primevue` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-vue-primevue)](https://npmjs.com/package/@alaarab/ogrid-vue-primevue) | PrimeVue 4 implementation |
-| **Other** | | |
-| `@alaarab/ogrid-js` | [![npm](https://img.shields.io/npm/v/@alaarab/ogrid-js)](https://npmjs.com/package/@alaarab/ogrid-js) | Vanilla JS data grid (no framework) |
 
 ## Feature Highlights
 
@@ -150,11 +110,11 @@ OGrid is designed as a drop-in replacement for AG Grid with a simpler, more Reac
 OGrid's browser checks now have an explicit contract:
 
 - A fast smoke suite runs on every push through the main CI workflow
-- The broader Playwright matrix runs across all 10 example apps only when you dispatch it manually
+- The broader Playwright matrix runs across the active React example apps only when you dispatch it manually
 
 See the [Browser Support Matrix](../guides/browser-support-matrix) for the current coverage map and commands.
 
 ## Next Steps
 
-- [Installation](./installation) -- install OGrid for your framework
-- [Quick Start](./quick-start) -- build a grid with React, Angular, or Vue
+- [Installation](./installation) -- install OGrid
+- [Quick Start](./quick-start) -- build a React grid in 5 minutes

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

@@ -11,80 +11,20 @@ Here's a grid in 60 seconds — sorting, filtering, editing, pagination, and key
 
 ## Install
 
-Pick your framework and UI library:
-
-<Tabs groupId="framework">
-  <TabItem value="react" label="React" default>
+Pick the React UI flavor that matches your design system:
 
 <Tabs groupId="react-ui">
-  <TabItem value="radix" label="Radix (Default)" default>
+  <TabItem value="radix" label="React + Radix (Default)" default>
 
 ```bash
 npm install @alaarab/ogrid-react-radix
 ```
 
   </TabItem>
-  <TabItem value="fluent" label="Fluent UI">
+  <TabItem value="fluent" label="React + Fluent UI">
 
 ```bash
 npm install @alaarab/ogrid-react-fluent @fluentui/react-components
-```
-
-  </TabItem>
-  <TabItem value="material" label="Material UI">
-
-```bash
-npm install @alaarab/ogrid-react-material @mui/material @emotion/react @emotion/styled
-```
-
-  </TabItem>
-</Tabs>
-
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-<Tabs groupId="angular-ui">
-  <TabItem value="angular-material" label="Angular Material" default>
-
-```bash
-npm install @alaarab/ogrid-angular-material @angular/material @angular/cdk
-```
-
-  </TabItem>
-  <TabItem value="angular-primeng" label="PrimeNG">
-
-```bash
-npm install @alaarab/ogrid-angular-primeng primeng
-```
-
-  </TabItem>
-</Tabs>
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-<Tabs groupId="vue-ui">
-  <TabItem value="vue-vuetify" label="Vuetify" default>
-
-```bash
-npm install @alaarab/ogrid-vue-vuetify vuetify
-```
-
-  </TabItem>
-  <TabItem value="vue-primevue" label="PrimeVue">
-
-```bash
-npm install @alaarab/ogrid-vue-primevue primevue
-```
-
-  </TabItem>
-</Tabs>
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```bash
-npm install @alaarab/ogrid-js
 ```
 
   </TabItem>
@@ -153,165 +93,6 @@ The `OGrid` component has identical props across all React UI packages. To switc
 
 - **Radix** (lightweight, no peer deps): `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
-
-interface Employee {
-  id: number;
-  name: string;
-  department: string;
-  salary: number;
-}
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `<ogrid [props]="gridProps" />`
-})
-export class EmployeeGridComponent {
-  private readonly data: Employee[] = [
-    { id: 1, name: 'Alice Johnson', department: 'Engineering', salary: 95000 },
-    { id: 2, name: 'Bob Smith', department: 'Marketing', salary: 72000 },
-    { id: 3, name: 'Carol Williams', department: 'Engineering', salary: 110000 },
-    { id: 4, name: 'David Brown', department: 'Sales', salary: 68000 },
-    { id: 5, name: 'Eva Martinez', department: 'Marketing', salary: 78000 },
-  ];
-
-  private readonly columns: IColumnDef<Employee>[] = [
-    { columnId: 'name', name: 'Name', sortable: true },
-    {
-      columnId: 'department', name: 'Department', sortable: true,
-      filterable: { type: 'multiSelect', options: ['Engineering', 'Marketing', 'Sales'] },
-    },
-    {
-      columnId: 'salary', name: 'Salary', type: 'numeric', sortable: true, editable: true,
-      valueFormatter: (value) =>
-        new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value as number),
-    },
-  ];
-
-  gridProps = {
-    columns: this.columns,
-    data: this.data,
-    getRowId: (row: Employee) => row.id,
-    defaultPageSize: 10,
-    defaultSortBy: 'name',
-    statusBar: true,
-  };
-}
-```
-
-:::tip Switching UI libraries
-All Angular packages share the same component API. Change one import:
-
-- **Radix (CDK)** (lightweight): `from '@alaarab/ogrid-angular-radix'`
-- **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">
-
-interface Employee {
-  id: number;
-  name: string;
-  department: string;
-  salary: number;
-}
-
-const data: Employee[] = [
-  { id: 1, name: 'Alice Johnson', department: 'Engineering', salary: 95000 },
-  { id: 2, name: 'Bob Smith', department: 'Marketing', salary: 72000 },
-  { id: 3, name: 'Carol Williams', department: 'Engineering', salary: 110000 },
-  { id: 4, name: 'David Brown', department: 'Sales', salary: 68000 },
-  { id: 5, name: 'Eva Martinez', department: 'Marketing', salary: 78000 },
-];
-
-const columns: IColumnDef<Employee>[] = [
-  { columnId: 'name', name: 'Name', sortable: true },
-  {
-    columnId: 'department', name: 'Department', sortable: true,
-    filterable: { type: 'multiSelect', options: ['Engineering', 'Marketing', 'Sales'] },
-  },
-  {
-    columnId: 'salary', name: 'Salary', type: 'numeric', sortable: true, editable: true,
-    valueFormatter: (value) =>
-      new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value as number),
-  },
-];
-
-const gridProps = {
-  columns,
-  data,
-  getRowId: (row: Employee) => row.id,
-  defaultPageSize: 10,
-  defaultSortBy: 'name',
-  statusBar: true,
-};
-</script>
-
-<template>
-  <OGrid :gridProps="gridProps" />
-</template>
-```
-
-:::tip Switching UI libraries
-All Vue packages share the same API. Change one import:
-
-- **Radix (Headless UI)** (lightweight): `from '@alaarab/ogrid-vue-radix'`
-- **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,
-      filterable: { type: 'multiSelect', options: ['Engineering', 'Marketing', 'Sales'] },
-    },
-    {
-      columnId: 'salary',
-      name: 'Salary',
-      type: 'numeric',
-      sortable: true,
-      editable: true,
-      valueFormatter: (value) =>
-        new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value),
-    },
-  ],
-  data: [
-    { id: 1, name: 'Alice Johnson', department: 'Engineering', salary: 95000 },
-    { id: 2, name: 'Bob Smith', department: 'Marketing', salary: 72000 },
-    { id: 3, name: 'Carol Williams', department: 'Engineering', salary: 110000 },
-    { id: 4, name: 'David Brown', department: 'Sales', salary: 68000 },
-    { id: 5, name: 'Eva Martinez', department: 'Marketing', salary: 78000 },
-  ],
-  getRowId: (row) => row.id,
-  pageSize: 10,
-  editable: true,
-});
-```
-
-:::tip
-The JS package has a class-based imperative API. See the [Vanilla JS guide](./vanilla-js) for events, grid methods, and theming.
 :::
 
   </TabItem>
@@ -356,62 +137,6 @@ function App() {
     </>
   );
 }
-```
-
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `
-    <button (click)="exportCsv()">Export CSV</button>
-    <ogrid [props]="gridProps" />
-  `
-})
-export class AppComponent {
-  constructor(private gridService: OGridService) {}
-
-  exportCsv() {
-    this.gridService.exportToCsv('employees.csv');
-  }
-
-  gridProps = { columns, data, getRowId: (row: any) => row.id };
-}
-```
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup lang="ts">
-
-const { exportToCsv } = useOGrid({ columns, data, getRowId: (row) => row.id });
-</script>
-
-<template>
-  <button @click="exportToCsv('employees.csv')">Export CSV</button>
-  <OGrid :gridProps="{ columns, data, getRowId: (row) => row.id }" />
-</template>
-```
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-
-const grid = new OGrid(document.getElementById('grid'), {
-  columns, data, getRowId: (row) => row.id,
-});
-
-document.getElementById('export-btn').addEventListener('click', () => {
-  grid.api.exportToCsv('employees.csv');
-});
-
-// Cleanup when done
-grid.destroy();
 ```
 
   </TabItem>
@@ -421,5 +146,5 @@ grid.destroy();
 
 - [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
+- [Grid API](../api/grid-api) — full reference for programmatic control
 - [Column Definitions](../api/types) — every column option explained

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

@@ -6,25 +6,22 @@ description: What runs in browser CI today, what the smoke suite covers, and whi
 
 # Browser Support Matrix
 
-OGrid ships 10 UI packages, but not every browser check needs to run on every push. The browser contract is split into two layers:
+OGrid ships two React UI packages (Radix and Fluent), and not every browser check needs to run on every push. The browser contract is split into two layers:
 
-- `npm run test:e2e:smoke` is the fast merge gate that runs on every push and pull request in the main `CI` workflow.
-- The `Playwright Matrix` GitHub workflow runs the broader browser suite across all 10 example apps only when you dispatch it manually.
+- `bun run test:e2e:smoke` is the fast merge gate that runs on every push and pull request in the main `CI` workflow.
+- The `Playwright Matrix` GitHub workflow runs the broader browser suite across the React + JS example apps only when you dispatch it manually.
 
 ## Main CI smoke suite
 
 The merge gate is intentionally small. It covers the minimum set of user journeys that should fail the build immediately if they break:
 
 ```bash
-npm run test:e2e:smoke
+bun run test:e2e:smoke
 ```
 
 Projects in the smoke gate:
 
 - `react-radix`
-- `angular-material`
-- `vue-vuetify`
-- `js`
 
 Journeys covered by the smoke suite:
 
@@ -43,18 +40,10 @@ The manual browser workflow runs the main browser suite against every example ap
 npm run test:e2e:matrix
 ```
 
-| Framework package | Playwright project | Example port | Main CI smoke | Full matrix |
+| Package | Playwright project | Example port | Main CI smoke | Full matrix |
 |---|---|---:|---|---|
 | `@alaarab/ogrid-react-fluent` | `react-fluent` | 3001 | No | Yes |
-| `@alaarab/ogrid-react-material` | `react-material` | 3002 | No | Yes |
 | `@alaarab/ogrid-react-radix` | `react-radix` | 3003 | Yes | Yes |
-| `@alaarab/ogrid-angular-radix` | `angular-radix` | 3010 | No | Yes |
-| `@alaarab/ogrid-angular-material` | `angular-material` | 3011 | Yes | Yes |
-| `@alaarab/ogrid-angular-primeng` | `angular-primeng` | 3012 | No | Yes |
-| `@alaarab/ogrid-vue-radix` | `vue-radix` | 3020 | No | Yes |
-| `@alaarab/ogrid-vue-vuetify` | `vue-vuetify` | 3021 | Yes | Yes |
-| `@alaarab/ogrid-vue-primevue` | `vue-primevue` | 3022 | No | Yes |
-| `@alaarab/ogrid-js` | `js` | 3030 | Yes | Yes |
 
 ## Docs homepage coverage
 
@@ -64,7 +53,7 @@ The docs homepage is verified separately because it runs against the built Docus
 npm run test:e2e:docs
 ```
 
-That check currently runs in the `Deploy Docs` workflow after `npm run docs:build`.
+That check currently runs in the `Deploy Docs` workflow after `bun run docs:build`.
 
 ## Interpreting failures
 

package/bundled-docs/guides/mcp-live-testing.mdx

@@ -75,88 +75,6 @@ export function MyGrid() {
 }
 ```
 
-</TabItem>
-<TabItem value="angular" label="Angular">
-
-```typescript
-
-@Component({ /* ... */ })
-export class MyGridComponent implements OnInit, OnDestroy {
-  data = myRows;
-  columns = myColumns;
-  service = new OGridService();
-  private bridge?: BridgeConnection;
-
-  ngOnInit() {
-    if (!isDevMode()) return;
-    this.bridge = connectGridToBridge({
-      gridId: 'my-grid',
-      getData: () => this.data,
-      getColumns: () => this.columns,
-      onCellUpdate: (rowIndex, columnId, value) => {
-        this.data = this.data.map((row, i) =>
-          i === rowIndex ? { ...row, [columnId]: value } : row
-        );
-      },
-    });
-  }
-
-  ngOnDestroy() {
-    this.bridge?.disconnect();
-  }
-}
-```
-
-</TabItem>
-<TabItem value="vue" label="Vue">
-
-```vue
-<script setup lang="ts">
-
-const data = ref(myRows);
-let bridge: ReturnType<typeof connectGridToBridge> | null = null;
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    bridge = connectGridToBridge({
-      gridId: 'my-grid',
-      getData: () => data.value,
-      getColumns: () => columns,
-      onCellUpdate: (rowIndex, columnId, value) => {
-        data.value = data.value.map((row, i) =>
-          i === rowIndex ? { ...row, [columnId]: value } : row
-        );
-      },
-    });
-  }
-});
-
-onUnmounted(() => bridge?.disconnect());
-</script>
-```
-
-</TabItem>
-<TabItem value="js" label="Vanilla JS">
-
-```js
-
-const grid = new OGrid(container, { data: myRows, columns });
-
-// Only in development
-if (location.hostname === 'localhost') {
-  const bridge = connectGridToBridge({
-    gridId: 'my-grid',
-    getData: () => grid.getApi().getData(),
-    getColumns: () => columns,
-    onCellUpdate: (rowIndex, columnId, value) => {
-      // Update your data source and refresh
-      myRows[rowIndex][columnId] = value;
-      grid.getApi().refresh();
-    },
-  });
-}
-```
-
 </TabItem>
 </Tabs>
 

package/bundled-docs/guides/mcp.mdx

@@ -65,10 +65,10 @@ Add to your Cursor MCP settings:
 Once connected, you can ask your editor questions like:
 
 ```
-How do I set up server-side pagination in React?
-How do I pin columns in Angular Material?
+How do I set up server-side pagination?
+How do I pin columns?
 What's the difference between multiSelect and text filters?
-Show me how to use the formula engine in Vue.
+Show me how to use the formula engine.
 Help me migrate from AG Grid to OGrid.
 ```
 
@@ -166,7 +166,7 @@ See the [Live Testing Bridge guide](./mcp-live-testing) for the full setup and a
 
 ## Version
 
-The MCP server is published and versioned independently from the grid packages:
+The MCP server is published in lockstep with the grid packages (same version across the monorepo). Check what's installed:
 
 ```bash
 npx @alaarab/ogrid-mcp --version

package/bundled-docs/guides/migration-from-ag-grid.mdx

@@ -16,10 +16,9 @@ This guide maps every major AG Grid concept to its OGrid equivalent, so you can
 # Remove AG Grid
 npm uninstall ag-grid-react ag-grid-community ag-grid-enterprise
 
-# Install OGrid (pick your UI framework)
-npm install @alaarab/ogrid-react-radix          # Radix (lightweight, no framework dep)
+# Install OGrid (pick your UI implementation)
+npm install @alaarab/ogrid-react-radix    # Radix (lightweight, no framework dep)
 npm install @alaarab/ogrid-react-fluent   # Fluent UI v9
-npm install @alaarab/ogrid-react-material # Material UI v7
 ```
 
 ## Component Mapping