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

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,18 +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`).
 
@@ -228,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
 
@@ -239,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
@@ -266,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[] = [
@@ -302,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-muiv6",
+  "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": "6baea6f3d9ffdae6977a63827a537bf0661701d7"
+  "gitHead": "3dd5b1120b0eab67de52a7942c5b8b16fa520abd"
 }