@redsift/ds-mcp-server 12.5.2-muiv7 → 12.5.2

package/data/patterns/crossfiltered-datagrid-server-side.mdx

@@ -99,7 +99,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 // Server-driven state
 const [rows, setRows] = useState<Row[]>([]);

package/data/patterns/drilldowned-datagrid-client-side.mdx

@@ -114,7 +114,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useMemo, useState } from 'react';
-import { GridFilterModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel } from '@mui/x-data-grid-premium';
 
 // Filter state — controlled, shared between DataCards and DataGrid
 const [filterModel, setFilterModel] = useState<GridFilterModel>({ items: [] });

package/data/patterns/drilldowned-datagrid-server-side.mdx

@@ -91,7 +91,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 // Server-driven state
 const [rows, setRows] = useState<Row[]>([]);

package/data/patterns/single-datagrid-client-side.mdx

@@ -33,7 +33,7 @@ When **not** to use:
 
 1. **Toolbar** — `Flexbox` wrapping MUI's `GridToolbarContainer` with `GridToolbarFilterButton`, `GridToolbarColumnsButton`, `GridToolbarDensitySelector`, `GridToolbarExport`, and `GridToolbarQuickFilter`
 2. **DataGrid** — the table itself from `@redsift/table`, configured with `autoHeight`, `pagination`, `checkboxSelection`, and `GridColDef[]` columns
-3. **Bulk Action Bar** — a `Flexbox` row shown when `selectionModel.length > 0`, containing a `Pill` with the selection count and action `Button` components
+3. **Bulk Action Bar** — a `Flexbox` row shown when rows are selected, containing a `Pill` with the selection count and action `Button` components
 
 ## Features
 
@@ -60,7 +60,7 @@ When **not** to use:
       required: true,
       description: (
         <>
-          Client-side pagination with configurable page size (<code>pageSizeOptions</code>)
+          Client-side pagination with configurable page size (<code>rowsPerPageOptions</code>)
         </>
       ),
     },
@@ -124,13 +124,13 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useState } from 'react';
-import { GridRowSelectionModel } from '@mui/x-data-grid-pro';
+import { GridRowSelectionModel } from '@mui/x-data-grid-premium';
 
 // Selection state — tracks which rows are checked
 const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
 
-// Pagination — DataGrid v7 uses a paginationModel object
-// (DataGrid manages pagination internally for client-side mode)
+// Page size — controlled if you need to persist it
+// (DataGrid manages page/pageSize internally for client-side mode)
 `} />
 
 ## Data Contract
@@ -149,7 +149,7 @@ type Row = {
 };
 
 // Column definitions — use createColumn() for built-in filter operators
-import { GridColDef } from '@mui/x-data-grid-pro';
+import { GridColDef } from '@mui/x-data-grid-premium';
 import { createColumn } from '@redsift/table';
 
 const columns: GridColDef[] = [
@@ -184,9 +184,9 @@ When data fetching fails, replace the DataGrid area with an error message and a
 1. **Define your row type** — Create a TypeScript `type Row` per the Data Contract section. Every row must have a unique `id` field.
 2. **Define column definitions** — Create a `GridColDef[]` array. Use `createColumn()` (e.g. `...createColumn('string')`, `...createColumn('number')`, `...createColumn('singleSelect')`, `...createColumn('multiSelect')`) for built-in filter operators. Add `renderCell` for rich content (pills, icons, links).
 3. **Create the toolbar** — Build a `CustomToolbar` component using `GridToolbarContainer` with `GridToolbarFilterButton`, `GridToolbarColumnsButton`, `GridToolbarDensitySelector`, `GridToolbarExport`, and optionally `GridToolbarQuickFilter`.
-4. **Set up state** — Add `useState<GridRowSelectionModel>([])` for checkbox selection (if needed).
-5. **Render the DataGrid** — Pass `rows`, `columns`, `autoHeight`, `pagination`, `pageSizeOptions`, `checkboxSelection`, `slots={{ toolbar: CustomToolbar }}`.
-6. **Add bulk action bar** — Conditionally render a `Flexbox` with a `Pill` (selection count) and action `Button` components when `selectionModel.length > 0`.
+4. **Set up state** — Add `useState<GridRowSelectionModel>` for checkbox selection (if needed).
+5. **Render the DataGrid** — Pass `rows`, `columns`, `autoHeight`, `pagination`, `pageSize`, `rowsPerPageOptions`, `checkboxSelection`, `slots={{ toolbar: CustomToolbar }}`.
+6. **Add bulk action bar** — Conditionally render a `Flexbox` with a `Pill` (selection count) and action `Button` components when rows are selected.
 7. **Handle edge cases** — Add loading state (`loading` prop), empty state (custom `NoRowsOverlay`), and error state (conditional render with retry).
 8. **Verify** — Test pagination breakpoints, filter operators, column visibility toggle, density switching, and export.
 

package/data/patterns/single-datagrid-server-side.mdx

@@ -34,7 +34,7 @@ When **not** to use:
 
 1. **Toolbar** — `Flexbox` wrapping MUI's `GridToolbarContainer` with `GridToolbarFilterButton`, `GridToolbarColumnsButton`, `GridToolbarDensitySelector`, `GridToolbarExport`, and `GridToolbarQuickFilter`
 2. **DataGrid** — the table configured with `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `loading`, and `rowCount`
-3. **Bulk Action Bar** — a `Flexbox` row shown when `selectionModel.length > 0`, containing a `Pill` with the selection count and action `Button` components
+3. **Bulk Action Bar** — a `Flexbox` row shown when rows are selected, containing a `Pill` with the selection count and action `Button` components
 
 ## Features
 
@@ -159,7 +159,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useEffect, useRef, useState } from 'react';
-import { GridFilterModel, GridRowSelectionModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 // Data state — rows returned from the server for the current page
 const [rows, setRows] = useState<Row[]>([]);
@@ -267,9 +267,9 @@ The fetch function rejects with an error. The component shows an error banner ab
 4. **Create the toolbar** — Build a `CustomToolbar` component using `GridToolbarContainer` with filter, columns, density, export, and quick search controls.
 5. **Set up state** — Add all hooks from the State Management section: `rows`, `totalRows`, `loading`, `page`, `pageSize`, `sortModel`, `filterModel`, `selectionModel`, `quickFilterText`, and the debounce ref.
 6. **Wire the fetch effect** — Use `useEffect` to call your fetch function whenever `page`, `pageSize`, `sortModel`, `filterModel`, or `quickFilterText` changes.
-7. **Configure the DataGrid** — Pass `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `loading`, `rowCount={totalRows}`, and all controlled state handlers (`onPaginationModelChange`, `onSortModelChange`, `onFilterModelChange`).
+7. **Configure the DataGrid** — Pass `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `loading`, `rowCount={totalRows}`, and all controlled state handlers (`onPageChange`, `onPageSizeChange`, `onSortModelChange`, `onFilterModelChange`).
 8. **Debounce filter changes** — Use a 300ms `setTimeout` in `onFilterModelChange` to avoid excessive requests during rapid typing. Reset to page 0 on filter change.
-9. **Add bulk action bar** — Conditionally render when `selectionModel.length > 0`.
+9. **Add bulk action bar** — Conditionally render when rows are selected.
 10. **Handle edge cases** — Add loading state (`loading` prop), empty state (custom `NoRowsOverlay`), and error state (conditional render with retry).
 11. **Verify** — Test page navigation, sort toggling, filter operators, debounced quick search, loading overlay, empty results, and error recovery.
 

package/data/patterns/stateful-single-datagrid-client-side.mdx

@@ -6,7 +6,7 @@ import { RouterLink } from '../../components/RouterLink';
 
 ## Introduction
 
-The Stateful Datagrid Page extends the [Single Datagrid (client)](/patterns/single-datagrid-client-side) pattern with **automatic state persistence to URL and localStorage**. It uses `StatefulDataGrid` from `@redsift/table` instead of `DataGrid`. Filters, sorting, pagination, column visibility, column order, and density survive page refreshes and can be shared via URL — users bookmark a filtered view and anyone opening the link sees the same grid state.
+The Stateful Datagrid Page extends the [Single Datagrid (client)](/patterns/single-datagrid-client-side) pattern with **automatic state persistence to URL and localStorage**. It uses `StatefulDataGrid` from `@redsift/table` instead of `DataGrid`. Filters, sorting, pagination, column visibility, column order, row grouping, aggregation, pivot, and density survive page refreshes and can be shared via URL — users bookmark a filtered view and anyone opening the link sees the same grid state.
 
 All filtering, sorting, and pagination happen **client-side** — all rows are loaded at once. For server-side data handling with URL state persistence, see the [Stateful Single Datagrid (server)](/patterns/stateful-single-datagrid-server-side) pattern.
 
@@ -116,7 +116,21 @@ When **not** to use:
       required: false,
       description: 'Column arrangement persisted to URL and localStorage (only when different from default)',
     },
-
+    {
+      feature: 'Row grouping persistence',
+      required: false,
+      description: 'Row grouping model persisted to URL and localStorage',
+    },
+    {
+      feature: 'Aggregation persistence',
+      required: false,
+      description: 'Aggregation functions per column persisted to URL and localStorage',
+    },
+    {
+      feature: 'Pivot persistence',
+      required: false,
+      description: 'Pivot configuration (columns, rows, value aggregations) persisted to URL and localStorage',
+    },
     {
       feature: 'URL compression',
       required: false,
@@ -126,8 +140,7 @@ When **not** to use:
         </>
       ),
     },
-
-]}
+  ]}
 />
 
 ### Components
@@ -209,17 +222,20 @@ export const useRouter = () => {
 
 `StatefulDataGrid` writes grid state to URL query params in a human-readable display format.
 
-| State             | URL Parameter                     | Example                                 |
-| ----------------- | --------------------------------- | --------------------------------------- |
-| Filter (string)   | `field.operator=value`            | `Items.contains=Bread`                  |
-| Filter (list)     | `field.operator=a,b,c`            | `Category.isAnyOf=Bakery,Pastry`        |
-| Sort              | `_sortColumn=field.direction`     | `_sortColumn=DateTime.desc`             |
-| Pagination        | `_pagination=page.size.direction` | `_pagination=0.10.next`                 |
-| Column visibility | `_columnVisibility=col1,col2,...` | `_columnVisibility=Items,Category,Paid` |
-| Column order      | `_columnOrder=col1,col2,...`      | `_columnOrder=Category,Items,Paid`      |
-| Pinned columns    | `_pinnedColumnsLeft=col1,col2`    | `_pinnedColumnsLeft=__check__,Items`    |
-| Density           | `_density=value`                  | `_density=compact`                      |
-| Version           | `v=N`                             | `v=1`                                   |
+| State             | URL Parameter                       | Example                                         |
+| ----------------- | ----------------------------------- | ----------------------------------------------- |
+| Filter (string)   | `field.operator=value`              | `Items.contains=Bread`                          |
+| Filter (list)     | `field.operator=a,b,c`              | `Category.isAnyOf=Bakery,Pastry`                |
+| Sort              | `_sortColumn=field.direction`       | `_sortColumn=DateTime.desc`                     |
+| Pagination        | `_pagination=page.size.direction`   | `_pagination=0.10.next`                         |
+| Column visibility | `_columnVisibility=col1,col2,...`   | `_columnVisibility=Items,Category,Paid`         |
+| Column order      | `_columnOrder=col1,col2,...`        | `_columnOrder=Category,Items,Paid`              |
+| Pinned columns    | `_pinnedColumnsLeft=col1,col2`      | `_pinnedColumnsLeft=__check__,Items`            |
+| Row grouping      | `_rowGrouping=col1,col2`            | `_rowGrouping=Category`                         |
+| Aggregation       | `_aggregation=field.func,...`       | `_aggregation=Paid.sum,Score.avg`               |
+| Pivot             | `_pivot=cols:...;rows:...;vals:...` | `_pivot=cols:Category;rows:Items;vals:Paid.sum` |
+| Density           | `_density=value`                    | `_density=compact`                              |
+| Version           | `v=N`                               | `v=1`                                           |
 
 Special characters in values (`:`, `,`, `~`) are percent-encoded (`%3A`, `%2C`, `%7E`).
 
@@ -227,7 +243,7 @@ Column order is only written to the URL when it differs from the default column
 
 ### URL Compression
 
-When the total URL length exceeds ~2,000 characters, `StatefulDataGrid` automatically compresses query params using `lz-string`. Parameters are compressed in priority order — column order and visibility first — so the most important configuration stays human-readable. Compressed values are prefixed with `~` for self-describing format.
+When the total URL length exceeds ~2,000 characters, `StatefulDataGrid` automatically compresses query params using `lz-string`. Parameters are compressed in priority order — column order and visibility first, pivot last — so the most important configuration stays human-readable. Compressed values are prefixed with `~` for self-describing format.
 
 ## State Management
 
@@ -238,7 +254,7 @@ When the total URL length exceeds ~2,000 characters, `StatefulDataGrid` automati
 
 // Persisted states:
 // filters, sorting, pagination, column visibility, column order,
-// pinned columns, density
+// pinned columns, density, row grouping, aggregation, pivot
 
 // On every interaction:
 // grid updates internal state
@@ -265,7 +281,7 @@ type Row = {
 };
 
 // Column definitions — use createColumn() for built-in filter operators
-import { GridColDef } from '@mui/x-data-grid-pro';
+import { GridColDef } from '@mui/x-data-grid-premium';
 import { createColumn } from '@redsift/table';
 
 const columns: GridColDef[] = [
@@ -301,11 +317,11 @@ When data fetching fails, replace the grid area with an error message and a retr
 2. **Define column definitions** — Create a `GridColDef[]` array using `createColumn()` for built-in filter operators.
 3. **Create a router adapter** — Implement a `useRouter` hook for your framework (react-router, Next.js, or plain browser). See the Router Adapter section above.
 4. **Create the toolbar** — Build a `CustomToolbar` component using `GridToolbarContainer`.
-5. **Render StatefulDataGrid** — Pass `useRouter`, `localStorageVersion`, `initialState` (filter, sort, pagination defaults), `pagination`, `pageSizeOptions`, `rows`, `columns`.
+5. **Render StatefulDataGrid** — Pass `useRouter`, `localStorageVersion`, `initialState` (filter, sort, pagination, row grouping, aggregation, pivot defaults), `pagination`, `pageSizeOptions`, `rows`, `columns`.
 6. **Add bulk action bar** — Conditionally render when `selectionModel.length > 0`.
 7. **Handle edge cases** — Loading state (`loading` prop), empty state (custom `NoRowsOverlay`), and error state (conditional render with retry).
 8. **Set localStorageVersion** — Increment when column definitions change to force a clean localStorage. Set `previousLocalStorageVersions` to clean up old keys.
-9. **Verify** — Test pagination, filter operators, column visibility, density, column order, URL sharing (copy URL → paste in new tab), and page refresh persistence. Verify that long URLs trigger compression automatically.
+9. **Verify** — Test pagination, filter operators, column visibility, density, column order, row grouping, aggregation, pivot, URL sharing (copy URL → paste in new tab), and page refresh persistence. Verify that long URLs trigger compression automatically.
 
 ## Keyboard & Accessibility
 

package/data/patterns/stateful-single-datagrid-server-side.mdx

@@ -6,7 +6,7 @@ import { RouterLink } from '../../components/RouterLink';
 
 ## Introduction
 
-The Stateful Server Datagrid Page extends the [Single Datagrid (server)](/patterns/single-datagrid-server-side) pattern with **automatic state persistence to URL and localStorage**. It uses `StatefulDataGrid` from `@redsift/table` instead of `DataGrid`. All filtering, sorting, and pagination happen **server-side**, and the grid state (filters, sort, page, column visibility, column order, pinned columns, and density) is written to the URL so users can share filtered views via bookmarks or links. When the URL exceeds 2 000 characters, state is automatically compressed with lz-string.
+The Stateful Server Datagrid Page extends the [Single Datagrid (server)](/patterns/single-datagrid-server-side) pattern with **automatic state persistence to URL and localStorage**. It uses `StatefulDataGrid` from `@redsift/table` instead of `DataGrid`. All filtering, sorting, and pagination happen **server-side**, and the grid state (filters, sort, page, column visibility, column order, pinned columns, density, row grouping, aggregation, and pivot) is written to the URL so users can share filtered views via bookmarks or links. When the URL exceeds 2 000 characters, state is automatically compressed with lz-string.
 
 Because `StatefulDataGrid` manages filter/sort/pagination state internally, the consumer uses **refs to track the latest model values** and **fetches data from callbacks** rather than controlled state.
 
@@ -135,7 +135,33 @@ When **not** to use:
         </>
       ),
     },
-
+    {
+      feature: 'Row grouping',
+      required: false,
+      description: (
+        <>
+          <code>rowGroupingModel</code> persisted to URL via <code>_rowGrouping</code> param
+        </>
+      ),
+    },
+    {
+      feature: 'Aggregation',
+      required: false,
+      description: (
+        <>
+          <code>aggregationModel</code> persisted to URL via <code>_aggregation</code> param
+        </>
+      ),
+    },
+    {
+      feature: 'Pivot',
+      required: false,
+      description: (
+        <>
+          <code>pivotModel</code> persisted to URL via <code>_pivotModel</code> param. Forwarded to DataGridPremium.
+        </>
+      ),
+    },
     {
       feature: 'URL compression',
       required: false,
@@ -146,8 +172,7 @@ When **not** to use:
         </>
       ),
     },
-
-]}
+  ]}
 />
 
 ### Components
@@ -229,17 +254,20 @@ export const useRouter = () => {
 
 `StatefulDataGrid` writes grid state to URL query params in a human-readable display format. The format is identical for both client-side and server-side grids.
 
-| State             | URL Parameter                     | Example                                 |
-| ----------------- | --------------------------------- | --------------------------------------- |
-| Filter (string)   | `field.operator=value`            | `Items.contains=Bread`                  |
-| Filter (list)     | `field.operator=a,b,c`            | `Category.isAnyOf=Bakery,Pastry`        |
-| Sort              | `_sortColumn=field.direction`     | `_sortColumn=DateTime.desc`             |
-| Pagination        | `_pagination=page.size.direction` | `_pagination=0.10.next`                 |
-| Column visibility | `_columnVisibility=col1,col2,...` | `_columnVisibility=Items,Category,Paid` |
-| Pinned columns    | `_pinnedColumnsLeft=col1,col2`    | `_pinnedColumnsLeft=__check__,Items`    |
-| Column order      | `_columnOrder=col1,col2,...`      | `_columnOrder=Paid,Items,Category`      |
-| Density           | `_density=value`                  | `_density=compact`                      |
-| Version           | `v=N`                             | `v=1`                                   |
+| State             | URL Parameter                     | Example                                                                                             |
+| ----------------- | --------------------------------- | --------------------------------------------------------------------------------------------------- |
+| Filter (string)   | `field.operator=value`            | `Items.contains=Bread`                                                                              |
+| Filter (list)     | `field.operator=a,b,c`            | `Category.isAnyOf=Bakery,Pastry`                                                                    |
+| Sort              | `_sortColumn=field.direction`     | `_sortColumn=DateTime.desc`                                                                         |
+| Pagination        | `_pagination=page.size.direction` | `_pagination=0.10.next`                                                                             |
+| Column visibility | `_columnVisibility=col1,col2,...` | `_columnVisibility=Items,Category,Paid`                                                             |
+| Pinned columns    | `_pinnedColumnsLeft=col1,col2`    | `_pinnedColumnsLeft=__check__,Items`                                                                |
+| Column order      | `_columnOrder=col1,col2,...`      | `_columnOrder=Paid,Items,Category`                                                                  |
+| Row grouping      | `_rowGrouping=col1,col2`          | `_rowGrouping=Category`                                                                             |
+| Aggregation       | `_aggregation=col:func,...`       | `_aggregation=Paid:sum,Quantity:avg`                                                                |
+| Pivot model       | `_pivotModel={json}`              | `_pivotModel={"columns":["Category"],"rows":["Items"],"values":[{"field":"Paid","aggFunc":"sum"}]}` |
+| Density           | `_density=value`                  | `_density=compact`                                                                                  |
+| Version           | `v=N`                             | `v=1`                                                                                               |
 
 ### URL Compression
 
@@ -297,7 +325,7 @@ setLoading(false);
 
 // Persisted states (URL + localStorage):
 // filters, sort, pagination, column visibility, column order,
-// pinned columns, density
+// pinned columns, density, row grouping, aggregation, pivot
 //
 // URL compression:
 // When the URL exceeds 2 000 chars, all state params are
@@ -353,11 +381,11 @@ When data fetching fails, replace the grid area with an error message and a retr
 4. **Create the fetch function** — Accept filter/sort/page params, return `{ rows, totalRows }`.
 5. **Set up refs** — `useRef` for filterModel, sortModel, page, pageSize.
 6. **Create the toolbar** — Build a `CustomToolbar` component using `GridToolbarContainer`.
-7. **Render StatefulDataGrid** — Pass `useRouter`, `localStorageVersion`, `initialState` (filter, sort, pagination defaults), `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `loading`, `rows`, `rowCount`, callbacks for `onFilterModelChange`/`onSortModelChange`/`onPaginationModelChange`.
+7. **Render StatefulDataGrid** — Pass `useRouter`, `localStorageVersion`, `initialState` (filter, sort, pagination, row grouping, aggregation, pivot defaults), `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `loading`, `rows`, `rowCount`, callbacks for `onFilterModelChange`/`onSortModelChange`/`onPaginationModelChange`.
 8. **Add bulk action bar** — Conditionally render when `selectionModel.length > 0`.
 9. **Handle edge cases** — Loading overlay, empty state, and error state with retry.
 10. **Set localStorageVersion** — Increment when column definitions change. Set `previousLocalStorageVersions` to clean up old keys.
-11. **Verify** — Test pagination, filter operators, column visibility, density, column order, URL sharing, page refresh persistence. Verify that long URLs trigger compression automatically.
+11. **Verify** — Test pagination, filter operators, column visibility, density, column order, row grouping, aggregation, pivot, URL sharing, page refresh persistence. Verify that long URLs trigger compression automatically.
 
 ## Keyboard & Accessibility
 

package/data/patterns/tabbed-datagrid-server-side.mdx

@@ -62,7 +62,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useEffect, useRef, useState } from 'react';
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 // Active tab
 const [activeTab, setActiveTab] = useState<string>('all');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redsift/ds-mcp-server",
-  "version": "12.5.2-muiv7",
+  "version": "12.5.2",
   "private": false,
   "type": "module",
   "description": "MCP server for the Red Sift Design System — provides component lookup, prop documentation, and code generation tools for AI assistants.",
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "restricted"
   },
-  "gitHead": "13324e3299b72c872629ed84537f0080908545c5"
+  "gitHead": "3dd5b1120b0eab67de52a7942c5b8b16fa520abd"
 }