@opencorestack/opengridx 3.9.1 → 3.10.0

package/docs/API_REFERENCE.md

@@ -988,6 +988,10 @@ interface GridLocaleText {
   aiAssistantAppliedChanges; aiAssistantRemoveChange(label); aiAssistantUndo; aiAssistantIgnored; aiAssistantIgnoredItem(message);
   aiAssistantEarlier; aiAssistantThinking; aiAssistantStopped; aiAssistantUndone; aiAssistantChangeRemoved;
   aiAssistantApplied(applied, ignored); aiAssistantNotValidated; aiAssistantFailed(message); aiAssistantUnknownError;
+  // AI assistant change chips (v3.10; filter operators in the chips use filterPanelOperators)
+  aiAssistantChipSearch(words); aiAssistantChipNoFilters; aiAssistantChipSort(field, 'asc' | 'desc'); aiAssistantChipNoSorting;
+  aiAssistantChipGroup(field); aiAssistantChipNoGrouping; aiAssistantChipSummary(fn, field); aiAssistantChipNoSummaries;
+  aiAssistantChipPivot(fields); aiAssistantChipNoPivot; aiAssistantChipVisibility(field, visible);
   // Pagination buttons
   paginationLabel; paginationFirstPageLabel; paginationFirstPageTooltip; paginationPreviousPageLabel;
   paginationPreviousPageTooltip; paginationNextPageLabel; paginationNextPageTooltip;

package/docs/features/ai-toolkit.md

@@ -146,6 +146,7 @@ const onPrompt = createGridAiPromptHandler({
 - **Applying.** The reply is applied immediately as one undoable step. Each change shows as a removable chip: a filter item, the quick-filter words, a sort key, a grouping field, an aggregation, a column shown or hidden, the pivot. Removing a chip re-applies the reply without it (a part with no chip left returns to its value from before the reply). **Undo** restores the state from before the reply. This view-state undo is separate from the cell-edit undo history (`undoRedo`).
 - **What is applied.** Each part in `result.state` replaces the grid's model, except column visibility, which is merged over the current model (`{ tax: false }` hides one column and leaves the others). Parts outside `aiAssistant.parts` are ignored. A part the validator emptied (every entry dropped, such as a sort on an unknown field) is not applied, so it cannot clear the grid's model by accident. Changes go through the same handlers as the UI, so `onSortModelChange`, `onRowGroupingModelChange` and the rest fire; with a controlled model, update your state from them.
 - **What was dropped** is listed under the chips, such as `Ignored: Unknown field "revnue"`.
+- **Translating.** Every string of the panel is a `localeText` key (v3.9), including the chips' own texts since v3.10: `aiAssistantChipSort: (field, direction) => \`Tri : ${field}, ${direction === 'desc' ? 'décroissant' : 'croissant'}\``, `aiAssistantChipSummary: (fn, field) => …` (`fn` is the function id, such as `avg`), and the other `aiAssistantChip*` keys in the API reference. Filter operators in the chips use `filterPanelOperators`.
 - **Accessibility.** The panel is a `role="dialog"` labelled "Ask AI". Focus moves to the input when it opens and back to the toolbar button (or wherever it was) when it closes. Escape closes it. The status ("Thinking…", "Applied 3 changes", errors) is announced through the grid's live region.
 - **Events.** `onAiAssistantApply(result)` after a reply was applied; `onAiAssistantError(error)` when `onPrompt` rejects (Stop does not count) or its result was not validated.
 

package/docs/performance.md

@@ -174,7 +174,7 @@ Measured in Chromium on an Apple M1, 1,000,000 rows, from the event to the end o
 | Fill 1,000 cells | 809 ms | ~50 ms | |
 | Expand a group | 279 ms | ~135 ms | leaf row metadata built once per tree |
 | Collapse a group | ~120 ms | ~1 ms | |
-| Select all | ~270 ms | ~270 ms | bounded by building 1M-id sets for the array `rowSelectionModel` |
+| Select all | ~270 ms | ~270 ms (~130 ms in 3.10) | 3.10 builds the 1M-id set once and reuses it for the model it returns; the rest is the live-selection check |
 
 3.9.0 keeps rows memoised: selecting a row, starting or committing an edit, and vertical scrolling re-render only the rows they change (a click re-rendered every visible row, now one). React's own work per interaction is about 3–5 ms at 100k rows.
 

package/docs/roadmap.md

@@ -93,16 +93,16 @@ This document tracks the current status of features in `OpenGridX` and outlines
 | **3.8.1** ✅ | shipped 13 Oct | **Grid buttons keep their own styles** (AI panel, toolbar active states) | Exact `bigint` sort; stricter number text; dead-code cleanup; every export documented |
 | **3.9.0** ✅ | shipped 13 Oct | **`localeText` for every UI string** (~200 keys) | 9 theme keys + Theme Builder controls; rows stay memoised through selection and editing; demo sidebar by priority |
 | **3.9.1** ✅ | shipped 13 Oct | **npm package no longer ships 1.6 MB of test baselines** | `check:package` guard in CI; version badges read `package.json`; docs brought up to date |
-| 3.10.0 | open | AI change chips translatable | Backlog work below |
+| **3.10.0** ✅ | shipped 13 Oct | **Backlog cleared**: refactors (R4–R6), CI guards, select-all ~2× faster | AI change chips translatable; demo syntax highlighting |
 | Freeze | 19 Dec – 5 Jan | Bug fixes only | — |
 
-### Now: backlog first (feature hold since 13 Oct)
+### Now: backlog first (feature hold since 13 Oct; backlog cleared in 3.10)
 
 New features (the *Next* list below) wait until the open fixes, refactors and performance work are done. Tracked in [`superpowers/plans/2026-10-13-audit-tracker.md`](superpowers/plans/2026-10-13-audit-tracker.md):
 
-*   **Refactors** (no behaviour change): about 40 `as unknown as` casts (R4), files over 600 lines such as `GridToolbar.tsx` (R5), hooks with very wide parameter lists such as keyboard navigation (R6).
-*   **Performance**: the time-sliced filter / sort pipeline (held: 1.5–2× slower in total, needs to be within ~20 %); select-all at 1M rows (~270 ms, bounded by the array `rowSelectionModel`).
-*   **Demo**: syntax highlighting in the source viewer.
+*   ✅ **Refactors** (no behaviour change, 3.10): `as unknown as` casts 43 → 15 (R4), files over 600 lines split (R5), keydown handling as a typed, tested function (R6); CI guards against regressions (`check:compiler`, `check:versions`, ESLint `no-explicit-any` and no new `as unknown as`).
+*   **Performance**: ✅ select-all at 1M rows ~260 → ~130 ms (3.10, no API change). ❌ The time-sliced filter / sort pipeline is closed: it was 1.5–2× slower in total (target ≤ 20 %) and the remaining 1M-row sort pause is better served by a `dataSource`; see the [proposal's status](superpowers/specs/2026-10-12-nonblocking-pipeline-proposal.md).
+*   ✅ **Demo**: syntax highlighting in the source viewer (3.10).
 *   **Bundle size (4.0)**: an app using only `DataGrid` ships 87 KB gzipped; opt-in [feature modules](superpowers/specs/2026-10-13-feature-modules-proposal.md) would save ~20 KB. Breaking, so planned for 4.0.
 
 ### Across the quarter

package/lib/components/Cell/Cell.tsx

@@ -8,6 +8,7 @@ import { CellErrorBoundary } from './CellErrorBoundary';
 import { formatValueByType } from '../../utils/values';
 import { attempt } from '../../utils/attempt';
 import { RANGE_BOTTOM, RANGE_CELL, RANGE_FILL_HANDLE, RANGE_LEFT, RANGE_RIGHT, RANGE_TOP } from '../../utils/cellSelection';
+import { untypedColumn } from '../../utils/untypedColumns';
 
 export interface CellProps<R extends GridRowModel = GridRowModel> {
     onCellClick?: (params: GridCellParams<R>) => void;
@@ -306,7 +307,7 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
                             formattedValue={formattedValue}
                             row={row}
                             field={colDef.field}
-                            colDef={colDef as unknown as GridColDef}
+                            colDef={untypedColumn(colDef)}
                             rowIndex={rowIndex}
                             colIndex={colIndex}
                             rowMeta={rowMeta}

package/lib/components/DataGrid/DataGrid.tsx

@@ -3,7 +3,7 @@ import { useLayout } from '../../hooks/core/useLayout';
 import { useGridKeyboardNavigation } from '../../hooks/core/useGridKeyboardNavigation';
 import { useGridControlledState } from '../../hooks/core/useGridControlledState';
 import { useGridThemeDimensions } from '../../hooks/core/useGridThemeDimensions';
-import { useGridRowPipeline, type GridRowPipelineResult } from '../../hooks/core/useGridRowPipeline';
+import { useGridRowPipeline } from '../../hooks/core/useGridRowPipeline';
 import { countReachableRows } from '../../utils/maxElementHeight';
 import { useGridColumns } from '../../hooks/core/useGridColumns';
 import { useGridDetailPanel } from '../../hooks/core/useGridDetailPanel';
@@ -44,7 +44,8 @@ import { useGridKeyboardMode, useGridPointerFocusHandlers } from '../../hooks/co
 import { getPaginationRowCount } from '../../utils/pagination';
 import { useGridToolbarStack } from '../../hooks/core/useGridToolbarStack';
 import { DEFAULT_HEADER_FILTER_HEIGHT } from '../../utils/headerFilters';
-import type { DataGridProps, DataGridUntypedColumnsProps, GridValidRowModel, GridRowModel, GridRowId, GridColDef } from '../../types';
+import type { DataGridProps, DataGridUntypedColumnsProps, GridValidRowModel, GridRowModel, GridColDef } from '../../types';
+import { untypedColumns } from '../../utils/untypedColumns';
 
 /**
  * The grid. `R` is your row type: any object type (an interface works), inferred from `rows`. `columns`
@@ -133,7 +134,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
     const pivot = useGridPivot({
         rows: rows as GridRowModel[],
-        columns: columns as unknown as GridColDef[],
+        columns: untypedColumns(columns),
         pivotMode,
         pivotModel: currentPivotModel,
         filterModel,
@@ -166,7 +167,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     });
 
     const activeRows = pivot.rows as unknown as R[];
-    const baseColumns = pivot.columns as unknown as GridColDef<R>[];
+    const baseColumns = pivot.columns as GridColDef<R>[];
 
     const { activeColumns, effectivePinnedColumns } = useGridGroupingColumn<R>({
         baseColumns, pinnedColumns, hasGroupingColumn, groupingColDef, isTreeData, getTreeDataPath,
@@ -222,13 +223,13 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
     // Steps 12a–13: the edit commit channel, the batch edit and single-cell editing.
     const { editCommitChannel, batchEdit, editingHandlers } = useGridEditPipeline<R>({
-        rowsLookup: state.rows.idRowsLookup as unknown as ReadonlyMap<GridRowId, R>,
+        rowsLookup: gridData.rowsLookup,
         rows: effectiveRows,
         getRowId: getRowIdOf,
         columns: activeColumns,
         processRowUpdate,
         onProcessRowUpdateError,
-        replaceRows: replaceRows as unknown as (rows: ReadonlyMap<GridRowId, R>) => void,
+        replaceRows,
     });
 
     // The selection without ids of removed rows. Only client-owned rows are pruned: a server page
@@ -241,12 +242,12 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         onSelectionModelChange: handleRowSelectionModelChange,
     });
 
-    const dataSourceHandlers = useGridDataSource({
+    const dataSourceHandlers = useGridDataSource<R>({
         dataSource, sortModel, filterModel,
         paginationModel: effectivePaginationModel,
         paginationMode, sortingMode, filterMode, aggregationModel,
         rowGroupingActive: isRowGrouping,
-        getRowId: effectiveGetRowId as unknown as (row: GridRowModel) => GridRowId,
+        getRowId: effectiveGetRowId,
         setRows, setRowCount, setDataSourceLoading, setDataSourceError,
         onAggregationResults: setServerAggregationResults,
         onPaginationModelChange: handlePaginationModelChange,
@@ -290,8 +291,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         density: effectiveDensity,
     });
 
-    const rowPipeline = useGridRowPipeline<GridRowModel>({
-        effectiveRows: effectiveRows as GridRowModel[],
+    const rowPipeline = useGridRowPipeline<R>({
+        effectiveRows,
         activeHierarchyHandlers,
         filterMode,
         filterModel: pivot.pipelineFilterModel,
@@ -303,7 +304,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     });
     const {
         filteredRows, dataRows, pinnedTopRows, pinnedBottomRows, sortedUnpinnedRows, paginatedUnpinnedRows, allRenderableRows,
-    } = rowPipeline as unknown as GridRowPipelineResult<R>;
+    } = rowPipeline;
     // The unpinned rows on screen: the current page, or every row without pagination.
     const centerRows = pagination ? paginatedUnpinnedRows : sortedUnpinnedRows;
 
@@ -345,7 +346,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                 hierarchyField,
                 dataRows,
             }),
-            visibleColumns: renderOrderedColumns as unknown as GridColDef[],
+            visibleColumns: renderOrderedColumns,
         },
     });
 
@@ -359,7 +360,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
     const { aggregationResult, isLoading: isAggregationLoading } = useAggregation({
         rows: dataRows,
-        columns: activeColumns as unknown as GridColDef[],
+        columns: untypedColumns(activeColumns),
         // The pivot's Grand Total row is the aggregate in pivot mode: nothing to total here.
         aggregationModel: isPivotActive ? NO_AGGREGATION_MODEL : aggregationModel,
         // When the server drives the rows (paginates, sorts or filters them), the grid only holds
@@ -437,8 +438,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     // Steps 30–31a: copy, scrollToIndexes and column auto-size on the API.
     const handleColumnAutosize = useGridViewApis<R>({
         apiRef, containerRef, viewportRef,
-        copyColumns: renderedDataColumns as unknown as GridColDef[],
-        getRowId: getRowIdOf as unknown as (row: GridRowModel) => GridRowId,
+        copyColumns: renderedDataColumns,
+        getRowId: getRowIdOf,
         disableClipboardCopy,
         getCellRangeCopyText: cellSelection.enabled ? cellSelection.getCopyText : undefined,
         layout,
@@ -497,7 +498,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         getPendingModel: controlledState.getPendingCellSelectionModel,
         focusedCell, setFocusedCell, allRenderableRows,
         getRowId: getRowIdOf,
-        navigationColumns: navigationColumns as unknown as GridColDef<R>[],
+        navigationColumns,
         columnIndexMap, isCellEditable, rowMetaMap,
         getSpanOrigin: spanning.getSpanOrigin,
         isEditing: editingHandlers.editingCell !== null,
@@ -559,7 +560,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         apiRef, containerRef, localeText,
         aiAssistant: {
             options: aiAssistant,
-            columns: activeColumns as unknown as GridColDef[],
+            columns: untypedColumns(activeColumns),
             onApply: onAiAssistantApply,
             onError: onAiAssistantError,
         },
@@ -598,7 +599,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         pinnedTopRows, pinnedBottomRows, pinnedRows, getRowIdOf,
         showEmptyState: !effectiveLoading && !state.dataSource.error && filteredRows.length === 0,
         effectiveNoRowsLabel, spanRowWindow, visibleRows,
-        baseColumns: columns as unknown as GridColDef<R>[], viewportWidth: state.dimensions.viewportWidth,
+        baseColumns: columns as GridColDef<R>[], viewportWidth: state.dimensions.viewportWidth,
         rowReorderHandlers, paginationMode, dataSourceLoading: state.dataSource.loading,
         sortedUnpinnedRowCount: sortedUnpinnedRows.length, pageSize: effectivePaginationModel.pageSize,
         unpinnedRowsLength: layout.unpinnedRowsLength,

package/lib/components/DataGrid/GridListView.tsx

@@ -35,7 +35,7 @@ export interface GridListViewProps<R extends GridRowModel> {
     /** The page actually shown (the requested page clamped to the last page). */
     currentPage: number;
     pageSizeOptions: number[];
-    selectedRowIds: Set<GridRowId>;
+    selectedRowIds: ReadonlySet<GridRowId>;
     listViewColumn: GridListViewColDef<R>;
     /** Grid columns by field; a list field that names one gets its valueGetter / valueFormatter. */
     columnsByField: ReadonlyMap<string, GridColDef>;

package/lib/components/DataGrid/GridPinnedRows.tsx

@@ -31,7 +31,7 @@ export interface GridPinnedRowsProps<R extends GridRowModel> {
     rows: R[];
     position: 'top' | 'bottom';
     columns: GridColDef<R>[];
-    selectedRowIds: Set<GridRowId>;
+    selectedRowIds: ReadonlySet<GridRowId>;
     checkboxSelection: boolean;
     onRowClick: (params: GridRowParams<R>) => void;
     onRowDoubleClick?: (params: GridRowParams<R>) => void;

package/lib/components/DataGrid/GridViewport.tsx

@@ -15,6 +15,7 @@ import type { UseGridViewportResult } from '../../hooks/core/useGridViewport';
 import type { GridVirtualizationResult } from '../../hooks/core/useGridVirtualization';
 import type { UseColumnReorderReturn } from '../../hooks/useColumnReorder';
 import type { GridSpanningResult } from '../../hooks/features/useGridSpanning';
+import { untypedColumns } from '../../utils/untypedColumns';
 
 /** The props the row renderers (top-pinned, centre and bottom-pinned rows) all take. */
 export type GridRowRenderProps<R extends GridRowModel> = Pick<GridVirtualRowsProps<R>,
@@ -294,7 +295,7 @@ export function GridViewport<R extends GridRowModel>(props: GridViewportProps<R>
                          hidden, pinned and scrolled columns line up. Off in pivot mode (hasAggregation). */}
                     {showAggregationFooter && (
                         <GridAggregationFooter
-                            columns={virtualization.virtualColumns as unknown as GridColDef[]}
+                            columns={untypedColumns(virtualization.virtualColumns)}
                             aggregationModel={aggregationModel}
                             aggregationResult={aggregationResult}
                             columnWidths={columnWidths}

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -41,7 +41,7 @@ export interface GridVirtualRowsProps<R extends GridRowModel> {
     hasDetailPanel: boolean;
     rowReordering: boolean;
     rowHeight: number;
-    selectedRowIds: Set<GridRowId>;
+    selectedRowIds: ReadonlySet<GridRowId>;
     onRowClick: (params: GridRowParams<R>) => void;
     onRowDoubleClick?: (params: GridRowParams<R>) => void;
     onCellClick: (params: GridCellParams<R>) => void;

package/lib/components/Header/Header.tsx

@@ -12,6 +12,7 @@ import { getHeaderColumnStyle } from './headerColumnStyle';
 import { HeaderFilterRow } from '../HeaderFilter/HeaderFilterRow';
 import { isRtl, logicalArrowKey } from '../../utils/direction';
 import { useGridLocale } from '../DataGrid/gridLocaleContext';
+import { untypedColumn, untypedColumns } from '../../utils/untypedColumns';
 
 
 function MenuIcon() {
@@ -469,7 +470,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                     };
 
                     const headerContent = colDef.renderHeader
-                        ? colDef.renderHeader({ field: colDef.field, colDef: colDef as unknown as GridColDef, colIndex })
+                        ? colDef.renderHeader({ field: colDef.field, colDef: untypedColumn(colDef), colIndex })
                         : colDef.headerName || colDef.field;
 
                     const handleHeaderClick = (e: React.MouseEvent) => {
@@ -560,7 +561,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
 
                 {menuOpenParams && (
                     <ColumnMenu
-                        colDef={menuOpenParams.colDef as unknown as GridColDef<GridRowModel>}
+                        colDef={untypedColumn(menuOpenParams.colDef)}
                         sortModel={sortModel}
                         onSort={onSort || onSortAdd ? handleMenuSort : undefined}
                         onHide={onHideColumn}
@@ -576,7 +577,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
             {/* ── Header filter row ── */}
             {headerFilters && (
                 <HeaderFilterRow
-                    columns={columns as unknown as GridColDef[]}
+                    columns={untypedColumns(columns)}
                     columnWidths={columnWidths}
                     pinnedColumns={pinnedColumns}
                     pinnedPositions={pinnedPositions}

package/lib/components/Row/Row.tsx

@@ -108,6 +108,10 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
     cellRange?: GridRowCellRange | null;
 }
 
+// The system columns' definitions passed to error params of their cells (stable, module level).
+const EXPAND_COLUMN: GridColDef = { field: '__expand_col__', width: 48 };
+const CHECKBOX_COLUMN: GridColDef = { field: '__checkbox_col__', width: 48 };
+
 function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     const locale = useGridLocale();
     const {
@@ -341,7 +345,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                                 row,
                                 field: '__expand_col__',
                                 value: isDetailPanelExpanded,
-                                colDef: { field: '__expand_col__', width: 48 } as unknown as GridColDef<R>,
+                                colDef: EXPAND_COLUMN as GridColDef<R>,
                                 rowIndex,
                                 colIndex: -1
                             });
@@ -379,7 +383,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                                 row,
                                 field: '__checkbox_col__',
                                 value: isSelected,
-                                colDef: { field: '__checkbox_col__', width: 48 } as unknown as GridColDef<R>,
+                                colDef: CHECKBOX_COLUMN as GridColDef<R>,
                                 rowIndex,
                                 colIndex: -1
                             });

package/lib/components/Toolbar/AggregationPanel.tsx

@@ -0,0 +1,90 @@
+import ReactDOM from 'react-dom';
+import type { GridAggregationModel, GridColDef } from '../../types';
+import { getOfferedAggregationFunctions } from '../../utils/aggregation';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
+import { SigmaIcon } from './ToolbarIcons';
+import { useToolbarPanel } from './useToolbarPanel';
+
+/** The toolbar's Summaries panel: one row of function pills per aggregable column. */
+export function AggregationPanel({
+    anchorRef,
+    aggregationModel,
+    aggregableColumns,
+    onFunctionChange,
+    onClearAll,
+    onClose,
+    activeCount,
+}: {
+    anchorRef: React.RefObject<HTMLElement | null>;
+    aggregationModel: GridAggregationModel;
+    aggregableColumns: GridColDef[];
+    onFunctionChange: (field: string, fn: string) => void;
+    onClearAll: () => void;
+    onClose: () => void;
+    activeCount: number;
+}) {
+    const locale = useGridLocale();
+    const { panelRef, position: pos, portalContainer } = useToolbarPanel(anchorRef, onClose);
+
+    const panel = (
+        <div
+            ref={panelRef}
+            className="ogx-toolbar__panel"
+            role="dialog"
+            aria-label={locale.toolbarSummariesPanelLabel}
+            style={{ top: pos.top, right: pos.right, left: pos.left, width: 400, maxWidth: 'calc(100vw - 24px)' }}
+        >
+            <div className="ogx-toolbar__panel-header">
+                <span className="ogx-toolbar__panel-title">
+                    <SigmaIcon />
+                    {locale.toolbarSummaries}
+                </span>
+                {activeCount > 0 && (
+                    <button
+                        type="button"
+                        className="ogx-toolbar__clear-btn"
+                        onClick={onClearAll}
+                        title={locale.toolbarSummariesClearAllTooltip}
+                    >
+                        {locale.toolbarSummariesClearAll}
+                    </button>
+                )}
+            </div>
+
+            <div className="ogx-toolbar__panel-body">
+                {aggregableColumns.length === 0 ? (
+                    <p className="ogx-toolbar__empty">
+                        {locale.toolbarSummariesEmpty}<br />
+                        {`${locale.toolbarSummariesEmptyHintBefore} `}<code>aggregable: true</code>{` ${locale.toolbarSummariesEmptyHintAfter}`}
+                    </p>
+                ) : (
+                    aggregableColumns.map((col) => {
+                        const currentFn = aggregationModel[col.field] || 'none';
+                        return (
+                            <div key={col.field} className="ogx-toolbar__agg-row">
+                                <span className="ogx-toolbar__agg-label" title={col.field}>
+                                    {col.headerName || col.field}
+                                </span>
+                                <div className="ogx-toolbar__agg-pills">
+                                    {['none', ...getOfferedAggregationFunctions(col)].map((fn) => (
+                                        <button
+                                            type="button"
+                                            key={fn}
+                                            className={`ogx-toolbar__pill${currentFn === fn ? ' ogx-toolbar__pill--active' : ''}`}
+                                            onClick={() => onFunctionChange(col.field, fn)}
+                                            aria-pressed={currentFn === fn}
+                                        >
+                                            {locale.toolbarAggregationFunction(fn)}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        );
+                    })
+                )}
+            </div>
+        </div>
+    );
+
+    return portalContainer ? ReactDOM.createPortal(panel, portalContainer) : null;
+}

package/lib/components/Toolbar/ColumnsPanelWrapper.tsx

@@ -0,0 +1,56 @@
+import ReactDOM from 'react-dom';
+import type { GridColDef } from '../../types';
+import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibilityPanel';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
+import { useToolbarPanel } from './useToolbarPanel';
+
+/** The toolbar's Columns panel: `ColumnVisibilityPanel` in a positioned, portalled popover. */
+export function ColumnsPanelWrapper({
+    anchorRef,
+    columns,
+    visibleColumns,
+    onVisibilityChange,
+    onShowAll,
+    onHideAll,
+    onColumnReorder,
+    onColumnOrderReset,
+    onClose,
+    showNonHideableColumns,
+}: {
+    anchorRef: React.RefObject<HTMLElement | null>;
+    columns: GridColDef[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (field: string, isVisible: boolean) => void;
+    onShowAll: () => void;
+    onHideAll: () => void;
+    onColumnReorder?: (fromField: string, toField: string) => void;
+    onColumnOrderReset?: () => void;
+    onClose: () => void;
+    showNonHideableColumns?: boolean;
+}) {
+    const locale = useGridLocale();
+    const { panelRef, position: pos, portalContainer } = useToolbarPanel(anchorRef, onClose);
+
+    const panel = (
+        <div
+            ref={panelRef}
+            className="ogx-toolbar__panel"
+            role="dialog"
+            aria-label={locale.toolbarColumnsPanelLabel}
+            style={{ top: pos.top, right: pos.right, left: pos.left, width: 280, padding: 0 }}
+        >
+            <ColumnVisibilityPanel
+                columns={columns}
+                visibleColumns={visibleColumns}
+                onVisibilityChange={onVisibilityChange}
+                onShowAll={onShowAll}
+                onHideAll={onHideAll}
+                onColumnReorder={onColumnReorder}
+                onColumnOrderReset={onColumnOrderReset}
+                showNonHideableColumns={showNonHideableColumns}
+            />
+        </div>
+    );
+
+    return portalContainer ? ReactDOM.createPortal(panel, portalContainer) : null;
+}

package/lib/components/Toolbar/FilterPanelWrapper.tsx

@@ -0,0 +1,82 @@
+import ReactDOM from 'react-dom';
+import type { GridColDef, GridFilterModel } from '../../types';
+import { FilterPanel } from '../FilterPanel/FilterPanel';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
+import { FilterIcon } from './ToolbarIcons';
+import { useToolbarPanel } from './useToolbarPanel';
+
+/** The toolbar's Filters panel: `FilterPanel` with a count, Clear all and Close. */
+export function FilterPanelWrapper({
+    anchorRef,
+    columns,
+    filterModel,
+    onFilterModelChange,
+    onClose
+}: {
+    anchorRef: React.RefObject<HTMLElement | null>;
+    columns: GridColDef[];
+    filterModel: GridFilterModel;
+    onFilterModelChange: (model: GridFilterModel) => void;
+    onClose: () => void;
+}) {
+    const locale = useGridLocale();
+    // Escape closes it; a press outside does not: users type in its inputs, and it has a Close button.
+    const { panelRef, position: pos, portalContainer } = useToolbarPanel(anchorRef, onClose, { closeOnOutsideClick: false });
+
+    const activeFilterCount = filterModel.items?.length ?? 0;
+
+    const handleClearAll = () => {
+        onFilterModelChange({ ...filterModel, items: [], logicOperator: 'and' });
+    };
+
+    const panel = (
+        <div
+            ref={panelRef}
+            className="ogx-toolbar__panel ogx-toolbar__panel--filter"
+            role="dialog"
+            aria-label={locale.toolbarFiltersLabel}
+            style={{ top: pos.top, right: pos.right, left: pos.left, width: 540, maxWidth: 'calc(100vw - 24px)' }}
+        >
+            <div className="ogx-toolbar__panel-header">
+                <span className="ogx-toolbar__panel-title">
+                    <FilterIcon />
+                    {locale.toolbarFilters}
+                    {activeFilterCount > 0 && (
+                        <span className="ogx-toolbar__panel-count">{activeFilterCount}</span>
+                    )}
+                </span>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    {activeFilterCount > 0 && (
+                        <button
+                            type="button"
+                            className="ogx-toolbar__clear-btn"
+                            onClick={handleClearAll}
+                            title={locale.toolbarFiltersClearAllTooltip}
+                        >
+                            {locale.toolbarFiltersClearAll}
+                        </button>
+                    )}
+                    <button
+                        type="button"
+                        className="ogx-toolbar__close-btn"
+                        onClick={onClose}
+                        title={locale.toolbarFiltersCloseTooltip}
+                        aria-label={locale.toolbarFiltersCloseLabel}
+                    >
+                        {locale.toolbarFiltersClose}
+                    </button>
+                </div>
+            </div>
+
+            <div className="ogx-toolbar__panel-body ogx-toolbar__panel-body--filter">
+                <FilterPanel
+                    columns={columns}
+                    filterModel={filterModel}
+                    onFilterModelChange={onFilterModelChange}
+                />
+            </div>
+        </div>
+    );
+
+    return portalContainer ? ReactDOM.createPortal(panel, portalContainer) : null;
+}