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

package/data/docs/patterns-catalog.md

@@ -82,7 +82,7 @@ These mistakes apply across **all** patterns and components. Avoid them everywhe
 2. DataGrid — the table itself, configured with autoHeight, pagination, checkboxSelection, and GridColDef[] columns
 3. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell`, `StatefulDataGrid` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridRowSelectionModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox` from `@redsift/design-system`
+**Key imports:** `DataGrid`, `TextCell`, `StatefulDataGrid` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridRowSelectionModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox` from `@redsift/design-system`
 **Components:** DataGrid, TextCell, StatefulDataGrid (from @redsift/table), Flexbox, Button, Pill, Text, Badge, Icon, IconButton, IconButtonLink (from @redsift/design-system)
 **Layout:** DataGrid with `autoHeight`, `pagination`, `pageSize`, built-in Toolbar (Columns | Filters | Density | Export | Search via `componentsProps.toolbar.showQuickFilter`). Columns use `GridColDef[]` with `createColumn()` for typed filter operators (e.g. `...createColumn('string')`, `...createColumn('number')`, `...createColumn('singleSelect')`), `renderCell` returning `TextCell`, `Pill`, `Badge`. Optional bulk actions bar above grid shown when `selectionModel.length > 0`.
 
@@ -153,7 +153,7 @@ type Row = {
 2. DataGrid — the table configured with paginationMode='server', sortingMode='server', filterMode='server', loading, and rowCount
 3. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridSortModel`, `GridSelectionModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox`, `Icon`, `IconButtonLink` from `@redsift/design-system`
+**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridSortModel`, `GridSelectionModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox`, `Icon`, `IconButtonLink` from `@redsift/design-system`
 **Components:** DataGrid, TextCell (from @redsift/table), Flexbox, Button, Pill, Text, Badge, Icon, IconButton, IconButtonLink (from @redsift/design-system)
 **Layout:** DataGrid with `autoHeight`, `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `rowCount`, `loading`, built-in Toolbar (Columns | Filters | Density | Export | Search). Same column types as Datagrid Page.
 
@@ -256,29 +256,29 @@ type FetchResult = {
 
 **Anatomy:**
 
-1. DataCard Row — Flexbox with 1-N DataCards, each containing DataCard.Header and DataCard.Listbox or DataCard.Body with DataRow children
+1. DataCard Row — Flexbox with 1-N DataCards, each containing DataCard.Header and DataCard.Listbox or DataCard.Body with DrilldownItem children
 2. Toolbar — Flexbox wrapping GridToolbarContainer with filter, columns, density, export, quick search controls
 3. DataGrid — the table with controlled filterModel + onFilterModelChange
 4. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DataRow` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
-**Components:** DataGrid, TextCell (from @redsift/table), DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (from @redsift/design-system)
+**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DrilldownItem` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
+**Components:** DataGrid, TextCell (from @redsift/table), DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DrilldownItem (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (from @redsift/design-system)
 **Layout:** Flexbox column: DataCard row (Flexbox gap=12px flexWrap=wrap with 1-N DataCards), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Optional bulk actions bar.
 
 **Features:**
 
-| Feature               | Required | Description                                                                      |
-| --------------------- | -------- | -------------------------------------------------------------------------------- |
-| DataCard aggregation  | Yes      | DataCard components showing aggregate counts per field from the full dataset     |
-| DataRow filter push   | Yes      | Clicking a DataRow adds an isAnyOf filter to the DataGrid filterModel            |
-| Listbox multi-select  | Yes      | DataCard.Listbox with selectionMode=multiple and controlled values               |
-| is/isNot clearing     | Yes      | When filter panel has is/isNot for a card's field, the DataCard selection clears |
-| Column definitions    | Yes      | GridColDef[] with custom types                                                   |
-| Toolbar               | Yes      | Built-in toolbar with filter, columns, density, export, and quick search         |
-| Custom cell renderers | Yes      | renderCell returning TextCell, Pill, Icon, IconButtonLink                        |
-| Boolean toggle        | No       | DataCard.Body with DataRow onClick for boolean fields                            |
-| Checkbox selection    | No       | checkboxSelection + rowSelectionModel                                            |
-| Bulk action bar       | No       | Contextual buttons shown when rows are selected                                  |
+| Feature                   | Required | Description                                                                      |
+| ------------------------- | -------- | -------------------------------------------------------------------------------- |
+| DataCard aggregation      | Yes      | DataCard components showing aggregate counts per field from the full dataset     |
+| DrilldownItem filter push | Yes      | Clicking a DrilldownItem adds an isAnyOf filter to the DataGrid filterModel      |
+| Listbox multi-select      | Yes      | DataCard.Listbox with selectionMode=multiple and controlled values               |
+| is/isNot clearing         | Yes      | When filter panel has is/isNot for a card's field, the DataCard selection clears |
+| Column definitions        | Yes      | GridColDef[] with custom types                                                   |
+| Toolbar                   | Yes      | Built-in toolbar with filter, columns, density, export, and quick search         |
+| Custom cell renderers     | Yes      | renderCell returning TextCell, Pill, Icon, IconButtonLink                        |
+| Boolean toggle            | No       | DataCard.Body with DrilldownItem onClick for boolean fields                      |
+| Checkbox selection        | No       | checkboxSelection + rowSelectionModel                                            |
+| Bulk action bar           | No       | Contextual buttons shown when rows are selected                                  |
 
 **Filter helpers:**
 
@@ -312,7 +312,7 @@ type AggregateCounts = {
 
 1. Define your row type — every row must have a unique id field.
 2. Compute aggregate counts — useAggregateCounts(allRows) counts from the full dataset.
-3. Build DataCards with DataCard.Header, DataCard.Listbox (multi-select) or DataCard.Body (boolean toggle) containing DataRow children.
+3. Build DataCards with DataCard.Header, DataCard.Listbox (multi-select) or DataCard.Body (boolean toggle) containing DrilldownItem children.
 4. Write filter helpers — getSelectedFromFilterModel and updateFilterModel.
 5. Wire DataCard handlers — onChange to updateFilterModel, onClick to updateBooleanFilter.
 6. Render the DataGrid with controlled filterModel and onFilterModelChange.
@@ -332,7 +332,7 @@ type AggregateCounts = {
 - DataCard counts should recalculate as filters change — reflecting the current filter context
 - Clicking a card value should add a filter to the datagrid (bidirectional)
 - Changing the filter panel should update the card selection
-- The dataset is small enough to load entirely (under ~50,000 rows — crossfilter2 handles this efficiently)
+- The dataset is small enough to load entirely (under ~1,000 rows)
 
 **When NOT to use:**
 
@@ -345,11 +345,10 @@ type AggregateCounts = {
 1. DataCard Row — Flexbox with 1-N DataCards. Counts are cross-filtered: each card excludes its own field from the filter calculation
 2. Toolbar — Flexbox wrapping GridToolbarContainer with filter, columns, density, export, quick search controls
 3. DataGrid — the table with controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side
-4. Dashboard wrapper — `Dashboard` component wraps everything, providing the crossfilter2 context
-5. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
+4. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DataRow` from `@redsift/dashboard`; `Dashboard`, `WithFilters` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
-**Components:** DataGrid, TextCell (from @redsift/table), Dashboard, WithFilters, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (from @redsift/design-system)
+**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DrilldownItem` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
+**Components:** DataGrid, TextCell (from @redsift/table), DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DrilldownItem (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (from @redsift/design-system)
 **Layout:** Flexbox column: DataCard row (cross-filtered counts), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side via applyFilters. Optional bulk actions bar.
 
 **Features:**
@@ -358,14 +357,14 @@ type AggregateCounts = {
 | -------------------------- | -------- | -------------------------------------------------------------------------------- |
 | Cross-filtered aggregation | Yes      | DataCard counts recompute from rows filtered by all fields except the card's own |
 | Two-way filter sync        | Yes      | DataCard selections derive from filterModel; DataCard clicks update filterModel  |
-| DataRow filter push        | Yes      | Clicking a DataRow adds an isAnyOf filter to the DataGrid filterModel            |
+| DrilldownItem filter push  | Yes      | Clicking a DrilldownItem adds an isAnyOf filter to the DataGrid filterModel      |
 | Listbox multi-select       | Yes      | DataCard.Listbox with selectionMode=multiple and controlled values               |
 | is/isNot clearing          | Yes      | When filter panel has is/isNot for a card's field, the DataCard selection clears |
 | Client-side row filtering  | Yes      | applyFilters function filters the full row set by the current filterModel        |
 | Column definitions         | Yes      | GridColDef[] with custom types                                                   |
 | Toolbar                    | Yes      | Built-in toolbar with filter, columns, density, export, and quick search         |
 | Custom cell renderers      | Yes      | renderCell returning TextCell, Pill, Icon, IconButtonLink                        |
-| Boolean toggle             | No       | DataCard.Body with DataRow onClick for boolean fields (active/inactive)          |
+| Boolean toggle             | No       | DataCard.Body with DrilldownItem onClick for boolean fields                      |
 | Checkbox selection         | No       | checkboxSelection + rowSelectionModel                                            |
 | Bulk action bar            | No       | Contextual buttons shown when rows are selected                                  |
 

package/data/docs/patterns.json

@@ -16,7 +16,7 @@
       "IconButton",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-premium"],
     "layout": "DataGrid with autoHeight, pagination, pageSize, built-in Toolbar via componentsProps.toolbar.showQuickFilter. Optional bulk actions bar when selectionModel.length > 0.",
     "tags": [
       "table",
@@ -181,7 +181,7 @@
       "IconButton",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-premium"],
     "layout": "DataGrid with autoHeight, paginationMode='server', sortingMode='server', filterMode='server', rowCount, loading, built-in Toolbar. Optional bulk actions bar when selectionModel.length > 0.",
     "tags": [
       "table",
@@ -493,7 +493,7 @@
       "Icon",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-premium"],
     "layout": "Flexbox column: DataCard row (Flexbox gap=12px flexWrap=wrap with 1-N DataCards), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Optional bulk actions bar when selectionModel.length > 0.",
     "tags": [
       "table",
@@ -662,7 +662,7 @@
       "Icon",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-premium"],
     "layout": "Flexbox column: DataCard row (cross-filtered counts), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side via applyFilters. Optional bulk actions bar.",
     "tags": [
       "table",

package/data/metadata.json

@@ -1,4 +1,4 @@
 {
-  "generatedAt": "2026-09-08T08:54:35.689Z",
-  "commitSha": "d74e2cdc17fef3dbb15bef33f79880b024afa978"
+  "generatedAt": "2026-09-08T09:16:07.232Z",
+  "commitSha": "55b7e4976e3595f1788080def19d08f5dcff2403"
 }

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
 
@@ -124,10 +124,10 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useState } from 'react';
-import { GridSelectionModel } 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<GridSelectionModel>([]);
+const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
 
 // Page size — controlled if you need to persist it
 // (DataGrid manages page/pageSize internally for client-side mode)
@@ -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<GridSelectionModel>([])` for checkbox selection (if needed).
-5. **Render the DataGrid** — Pass `rows`, `columns`, `autoHeight`, `pagination`, `pageSize`, `rowsPerPageOptions`, `checkboxSelection`, `components={{ 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, GridSelectionModel, 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[]>([]);
@@ -175,7 +175,7 @@ const [sortModel, setSortModel] = useState<GridSortModel>([]);
 const [filterModel, setFilterModel] = useState<GridFilterModel>({ items: [] });
 
 // Selection state
-const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]);
+const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
 
 // Quick search
 const [quickFilterText, setQuickFilterText] = useState('');
@@ -269,7 +269,7 @@ The fetch function rejects with an error. The component shows an error banner ab
 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 (`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,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.13-muiv6",
+  "version": "12.5.13",
   "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.",
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d74e2cdc17fef3dbb15bef33f79880b024afa978"
+  "gitHead": "55b7e4976e3595f1788080def19d08f5dcff2403"
 }