@lowdefy/blocks-aggrid 5.5.0 → 5.6.0

package/README.md

@@ -1,25 +1,62 @@
 # Lowdefy Blocks for Ag-Grid
 
-This repository provides blocks for [Ag-Grid](https://www.ag-grid.com/), a feature rich javascript grid and table library.
+This repository provides blocks for [AG Grid](https://www.ag-grid.com/), a feature rich javascript grid and table library.
 
-The implementation of these blocks is a minimal wrapper for the [@ag-grid-community/core
-](https://www.npmjs.com/package/@ag-grid-community/core) package. This means you write normal Ag-Grid config to create tables.
+The implementation of these blocks is a minimal wrapper for the [ag-grid-community](https://www.npmjs.com/package/ag-grid-community) package, on AG Grid v33. This means you write normal AG Grid config to create tables.
 
-See the [Ag-Grid docs](https://www.ag-grid.com/documentation/react/getting-started/) for the table settings API.
+See the [AG Grid docs](https://www.ag-grid.com/react-data-grid/) for the table settings API.
 
 ## Blocks
 
-Block types for supported [Ag-Grid themes](https://www.ag-grid.com/documentation/javascript/themes-provided/) are available for for `dispay` and `input` block categories.
+Each grid is available as a `display` block and as an `input` block. The display blocks render data; the input blocks additionally hold the table data as the block's value.
 
 ### Block types
 
-The availible ag-gird block types are:
+Display blocks:
 
-- [`AgGridAlpine`](https://www.ag-grid.com/example?theme=ag-theme-alpine)
-- [`AgGridAlpineDark`](https://www.ag-grid.com/example?theme=ag-theme-alpine-dark)
-- [`AgGridBalham`](https://www.ag-grid.com/example?theme=ag-theme-balham)
-- [`AgGridBalhamDark`](https://www.ag-grid.com/example?theme=ag-theme-balham-dark)
-- [`AgGridMaterial`](https://www.ag-grid.com/example?theme=ag-theme-material)
+- `AgGridLowdefy` — themed from the app's antd design tokens. Recommended for Lowdefy apps.
+- `AgGridAlpine`
+- `AgGridBalham`
+- `AgGridMaterial`
+
+Input blocks:
+
+- `AgGridLowdefyInput` — themed from the app's antd design tokens. Recommended for Lowdefy apps.
+- `AgGridInputAlpine`
+- `AgGridInputBalham`
+- `AgGridInputMaterial`
+
+## Themes
+
+All eight blocks render through [AG Grid's Theming API](https://www.ag-grid.com/react-data-grid/theming/). No block imports an AG Grid stylesheet and no block uses `theme="legacy"`.
+
+**`AgGridLowdefy` is the recommended grid for Lowdefy apps.** It adopts the app's antd theme tokens — primary colour, surfaces, fonts and radius — and follows light/dark mode automatically, with no configuration. It takes a `size` property (`small | middle | large`, default `middle`) matching antd Table's densities, which sets row and header height to 36 / 44 / 54 pixels.
+
+`AgGridBalham`, `AgGridAlpine` and `AgGridMaterial` remain first-class built-ins for users who want those looks, and are kept indefinitely with the same API. On v33 they render AG Grid's prebuilt Theming API equivalents of those themes (`themeBalham` / `themeAlpine` / `themeMaterial`) with the same antd colour mapping applied as theme parameters, so they look very close to before but are no longer pixel-identical.
+
+### Adopting `AgGridLowdefy`
+
+To adopt, change `type: AgGridBalham` to `type: AgGridLowdefy` (or `type: AgGridInputBalham` to `type: AgGridLowdefyInput`). Every property carries over unchanged, and the grid will deliberately look different afterwards — that is the point. This is a visual opt-in, not a migration.
+
+### `size` and explicit heights
+
+A `rowHeight` or `headerHeight` grid option overrides what `size` sets — use one or the other, not both. `size` sets the theme parameters `rowHeight` and `headerHeight`, and an AG Grid grid option always beats a theme parameter, so `size: large` together with `rowHeight: 30` gives 30 pixel rows under a 54 pixel header.
+
+### `themeParams`
+
+All eight blocks take a `themeParams` object property: [AG Grid theming parameter](https://www.ag-grid.com/react-data-grid/theming-parameters/) names merged onto the block's own theme, for retinting a single grid.
+
+```yaml
+- id: my_table
+  type: AgGridLowdefy
+  properties:
+    themeParams:
+      headerBackgroundColor: '#1a1a2e'
+      headerTextColor: '#e0e0ff'
+      borderColor: var(--ant-color-border)
+```
+
+Values are CSS strings and may reference antd tokens. Neither Lowdefy nor AG Grid validates parameter names, so a misspelled key is a silent no-op — check spelling against AG Grid's theming parameter reference.
 
 ### Events
 
@@ -72,9 +109,7 @@ The availible ag-gird block types are:
 
 - `exportDataAsCsv`: When called, table data will be downloaded in csv format.
 - `sizeColumnsToFit`: When called, size table column widths to fit all columns to table width.
-- `autoSize`: When called, auto size columns. The following can be passed as the first argument of `args`.
-      - `skipHeader: boolean`: Do not consider header content width when auto-sizing columns.
-      - `columnIds: string[]`: List of `colId`s for which to calculate auto-size when called.
+- `autoSize`: When called, auto size columns. The following can be passed as the first argument of `args`. - `skipHeader: boolean`: Do not consider header content width when auto-sizing columns. - `columnIds: string[]`: List of `colId`s for which to calculate auto-size when called.
 - `setFilterModel`: When called, apply filter model to table. See https://www.ag-grid.com/javascript-data-grid/filter-api/ for model details.
 - `setQuickFilter`: When called, pass a quick filter text into the grid for filtering. See https://www.ag-grid.com/javascript-data-grid/filter-quick/ for details.
 
@@ -299,12 +334,14 @@ pages:
             sortable: true
             resizable: true
             filter: true
-          rowSelection: 'multiple'
+          rowSelection:
+            mode: multiRow
+            enableClickSelection: true
+            checkboxes: true
           columnDefs:
             - headerName: Title
               field: title
               width: 350
-              checkboxSelection: true
             - headerName: Year
               field: year
               width: 100
@@ -379,13 +416,15 @@ pages:
             sortable: true
             resizable: true
             filter: true
-          rowSelection: 'multiple'
+          rowSelection:
+            mode: multiRow
+            enableClickSelection: true
+            checkboxes: true
+            headerCheckbox: true
           columnDefs:
             - headerName: Title
               field: title
               width: 350
-              checkboxSelection: true
-              headerCheckboxSelection: true
             - headerName: Year
               field: year
               width: 100

package/dist/AgGrid.js

@@ -13,22 +13,25 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { AgGridReact } from '@ag-grid-community/react';
-import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import { CsvExportModule } from '@ag-grid-community/csv-export';
+import { AgGridReact } from 'ag-grid-react';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
 import processColDefs from './processColDefs.js';
 import assignRowId from './assignRowId.js';
 import LoadingOverlay from './LoadingOverlay.js';
-const AgGrid = ({ properties, methods, loading, events, components })=>{
-    const { quickFilterValue, columnDefs, defaultColDef, rowData: newRowData, suppressCellFocus = true, ...someProperties } = properties;
+// Registration is idempotent, so each core registers independently to stay standalone.
+ModuleRegistry.registerModules([
+    AllCommunityModule
+]);
+const AgGrid = ({ components, events, loading, methods, properties, theme })=>{
+    const { quickFilterValue, columnDefs, defaultColDef, height, rowData: newRowData, rowId, size, suppressCellFocus = true, themeParams, ...someProperties } = properties;
     const [rowData, setRowData] = useState(newRowData ?? []);
     const gridRef = useRef();
     const memoDefaultColDef = useMemo(()=>defaultColDef);
     const getRowId = useCallback((params)=>{
-        if (properties.rowId && params.data[properties.rowId] !== undefined) return params.data[properties.rowId];
+        if (rowId && params.data[rowId] !== undefined) return params.data[rowId];
         return assignRowId(params);
     }, [
-        properties.rowId
+        rowId
     ]);
     const onRowClick = useCallback((event)=>{
         if (events.onRowClick) {
@@ -60,7 +63,9 @@ const AgGrid = ({ properties, methods, loading, events, components })=>{
         }
     }, []);
     const onRowSelected = useCallback((event)=>{
-        if (!event.node.selected) return; // see https://stackoverflow.com/a/63265775/2453657
+        // AG Grid fires onRowSelected for deselection too, which the Lowdefy event does not represent.
+        // See https://stackoverflow.com/a/63265775/2453657
+        if (!event.node.isSelected()) return;
         if (events.onRowSelected) {
             methods.triggerEvent({
                 name: 'onRowSelected',
@@ -144,6 +149,7 @@ const AgGrid = ({ properties, methods, loading, events, components })=>{
     }, /*#__PURE__*/ React.createElement(AgGridReact, {
         columnMenu: "legacy",
         ...someProperties,
+        theme: theme,
         suppressCellFocus: suppressCellFocus,
         rowData: rowData,
         defaultColDef: memoDefaultColDef,
@@ -153,10 +159,6 @@ const AgGrid = ({ properties, methods, loading, events, components })=>{
         onRowSelected: onRowSelected,
         onRowClicked: onRowClick,
         onCellClicked: onCellClicked,
-        modules: [
-            ClientSideRowModelModule,
-            CsvExportModule
-        ],
         columnDefs: processColDefs(columnDefs, methods, components),
         ref: gridRef,
         getRowId: getRowId,

package/dist/AgGridInput.js

@@ -13,22 +13,25 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { AgGridReact } from '@ag-grid-community/react';
-import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import { CsvExportModule } from '@ag-grid-community/csv-export';
+import { AgGridReact } from 'ag-grid-react';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
 import processColDefs from './processColDefs.js';
 import assignRowId from './assignRowId.js';
 import LoadingOverlay from './LoadingOverlay.js';
-const AgGridInput = ({ properties, methods, loading, events, value })=>{
-    const { quickFilterValue, columnDefs, defaultColDef, ...someProperties } = properties;
+// Registration is idempotent, so each core registers independently to stay standalone.
+ModuleRegistry.registerModules([
+    AllCommunityModule
+]);
+const AgGridInput = ({ events, loading, methods, properties, theme, value })=>{
+    const { quickFilterValue, columnDefs, defaultColDef, height, rowId, size, themeParams, ...someProperties } = properties;
     const [rowData, setRowData] = useState(value ?? []);
     const gridRef = useRef();
     const memoDefaultColDef = useMemo(()=>defaultColDef);
     const getRowId = useCallback((params)=>{
-        if (properties.rowId && params.data[properties.rowId] !== undefined) return params.data[properties.rowId];
+        if (rowId && params.data[rowId] !== undefined) return params.data[rowId];
         return assignRowId(params);
     }, [
-        properties.rowId
+        rowId
     ]);
     const onRowClick = useCallback((event)=>{
         if (events.onRowClick) {
@@ -60,7 +63,9 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
         }
     }, []);
     const onRowSelected = useCallback((event)=>{
-        if (!event.node.selected) return; // see https://stackoverflow.com/a/63265775/2453657
+        // AG Grid fires onRowSelected for deselection too, which the Lowdefy event does not represent.
+        // See https://stackoverflow.com/a/63265775/2453657
+        if (!event.node.isSelected()) return;
         if (events.onRowSelected) {
             methods.triggerEvent({
                 name: 'onRowSelected',
@@ -192,6 +197,7 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
     }, /*#__PURE__*/ React.createElement(AgGridReact, {
         columnMenu: "legacy",
         ...someProperties,
+        theme: theme,
         rowData: rowData,
         onCellClicked: onCellClicked,
         onCellValueChanged: onCellValueChanged,
@@ -202,10 +208,6 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
         onSortChanged: onSortChanged,
         onRowDragEnd: onRowDragEnd,
         defaultColDef: memoDefaultColDef,
-        modules: [
-            ClientSideRowModelModule,
-            CsvExportModule
-        ],
         columnDefs: processColDefs(columnDefs, methods),
         ref: gridRef,
         getRowId: getRowId,

package/dist/ag-grid-antd.module.css

@@ -1,44 +1,22 @@
-.antdTheme.antdTheme {
-  --ag-background-color: var(--ant-color-bg-container);
-  --ag-foreground-color: var(--ant-color-text);
-  --ag-secondary-foreground-color: var(--ant-color-text-secondary);
-  --ag-border-color: var(--ant-color-border);
-  --ag-secondary-border-color: var(--ant-color-border-secondary);
-  --ag-header-background-color: var(--ant-color-fill-quaternary);
-  --ag-header-foreground-color: var(--ant-color-text);
-  --ag-header-cell-hover-background-color: var(--ant-color-fill-tertiary);
-  --ag-header-cell-moving-background-color: var(--ant-color-fill-secondary);
-  --ag-tooltip-background-color: var(--ant-color-bg-spotlight);
-  --ag-odd-row-background-color: var(--ant-color-fill-quaternary);
-  --ag-control-panel-background-color: var(--ant-color-bg-elevated);
-  --ag-subheader-background-color: var(--ant-color-bg-layout);
-  --ag-subheader-toolbar-background-color: var(--ant-color-bg-layout);
-  --ag-selected-row-background-color: var(--ant-color-primary-bg);
-  --ag-row-hover-color: var(--ant-color-primary-bg-hover);
-  --ag-column-hover-color: var(--ant-color-primary-bg-hover);
-  --ag-range-selection-highlight-color: var(--ant-color-primary-bg-hover);
-  --ag-modal-overlay-background-color: var(--ant-color-bg-mask);
-  --ag-input-disabled-background-color: var(--ant-color-bg-container-disabled);
-  --ag-input-disabled-border-color: var(--ant-color-border);
-  --ag-disabled-foreground-color: var(--ant-color-text-disabled);
-  --ag-chip-background-color: var(--ant-color-fill-secondary);
-  --ag-input-focus-box-shadow: 0 0 0 2px var(--ant-color-primary-bg);
-  --ag-input-focus-border-color: var(--ant-color-primary);
-  --ag-range-selection-border-color: var(--ant-color-primary);
-  --ag-range-selection-background-color: var(--ant-color-primary-bg);
-  --ag-checkbox-checked-color: var(--ant-color-primary);
-  --ag-checkbox-unchecked-color: var(--ant-color-text-quaternary);
-  --ag-checkbox-background-color: var(--ant-color-bg-container);
-  --ag-card-shadow: var(--ant-box-shadow-secondary);
-  --ag-popup-shadow: var(--ant-box-shadow);
-  --ag-font-family: var(--ant-font-family);
-  --ag-font-size: var(--ant-font-size);
-}
+/*
+  Copyright 2020-2026 Lowdefy, Inc
 
-.antdTheme :global(.ag-root-wrapper) {
-  border-radius: var(--ant-border-radius);
-  overflow: hidden;
-}
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+/* Lowdefy's own cell-rendering and layout helpers for all AgGrid blocks. Colours come from the
+   theme params in src/theme/themeLowdefy.js, not from this file: the Theming API honours AG Grid
+   custom properties inherited from an ancestor, so declaring any here would override those params. */
 
 /* Avatar sizing per ag-grid theme — reads row-height via the wrapper class. */
 .antdTheme:global(.ag-theme-balham),
@@ -56,15 +34,6 @@
   --lf-avatar-font-size: var(--ant-font-size-sm, 12px);
 }
 
-.antdTheme :global(.ag-overlay-loading-wrapper) {
-  background-color: color-mix(in srgb, var(--ant-color-bg-container) 70%, transparent);
-}
-
-.antdTheme :global(.ag-overlay-loading-center) {
-  border-radius: var(--ant-border-radius);
-  box-shadow: var(--ant-box-shadow-secondary);
-}
-
 .antdTheme :global(.ag-overlay-no-rows-wrapper) {
   color: var(--ant-color-text-secondary);
 }

package/dist/blocks/AgGridAlpine/AgGridAlpine.js

@@ -14,11 +14,11 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
-import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-alpine.css';
 import antdStyles from '../../ag-grid-antd.module.css';
+import { themeAlpineAntd, useGridTheme } from '../../theme/themeLowdefy.js';
 import AgGrid from '../../AgGrid.js';
 const AgGridAlpine = ({ blockId, components, events, loading, methods, properties, styles })=>{
+    const theme = useGridTheme(themeAlpineAntd, properties.themeParams);
     return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
         className: `ag-theme-alpine ${antdStyles.antdTheme}`,
@@ -32,7 +32,8 @@ const AgGridAlpine = ({ blockId, components, events, loading, methods, propertie
         events: events,
         loading: loading,
         methods: methods,
-        properties: properties
+        properties: properties,
+        theme: theme
     }));
 };
 export default withBlockDefaults(AgGridAlpine);

package/dist/blocks/AgGridAlpine/e2e.js

@@ -13,4 +13,4 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import createAgGridDisplayHelper from '../../createAgGridDisplayHelper.js';
-export default createAgGridDisplayHelper('alpine');
+export default createAgGridDisplayHelper();

package/dist/blocks/AgGridBalham/AgGridBalham.js

@@ -14,11 +14,11 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
-import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-balham.css';
 import antdStyles from '../../ag-grid-antd.module.css';
+import { themeBalhamAntd, useGridTheme } from '../../theme/themeLowdefy.js';
 import AgGrid from '../../AgGrid.js';
 const AgGridBalham = ({ blockId, components, events, loading, methods, properties, styles })=>{
+    const theme = useGridTheme(themeBalhamAntd, properties.themeParams);
     return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
         className: `ag-theme-balham ${antdStyles.antdTheme}`,
@@ -32,7 +32,8 @@ const AgGridBalham = ({ blockId, components, events, loading, methods, propertie
         events: events,
         loading: loading,
         methods: methods,
-        properties: properties
+        properties: properties,
+        theme: theme
     }));
 };
 export default withBlockDefaults(AgGridBalham);

package/dist/blocks/AgGridBalham/e2e.js

@@ -13,4 +13,4 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import createAgGridDisplayHelper from '../../createAgGridDisplayHelper.js';
-export default createAgGridDisplayHelper('balham');
+export default createAgGridDisplayHelper();

package/dist/blocks/AgGridInputAlpine/AgGridInputAlpine.js

@@ -14,11 +14,11 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
-import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-alpine.css';
 import antdStyles from '../../ag-grid-antd.module.css';
+import { themeAlpineAntd, useGridTheme } from '../../theme/themeLowdefy.js';
 import AgGridInput from '../../AgGridInput.js';
 const AgGridInputAlpine = ({ blockId, events, loading, methods, properties, required, styles, validation, value })=>{
+    const theme = useGridTheme(themeAlpineAntd, properties.themeParams);
     return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
         className: `ag-theme-alpine ${antdStyles.antdTheme}`,
@@ -34,6 +34,7 @@ const AgGridInputAlpine = ({ blockId, events, loading, methods, properties, requ
         methods: methods,
         properties: properties,
         required: required,
+        theme: theme,
         validation: validation,
         value: value
     }));

package/dist/blocks/AgGridInputAlpine/e2e.js

@@ -13,4 +13,4 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import createAgGridInputHelper from '../../createAgGridInputHelper.js';
-export default createAgGridInputHelper('alpine');
+export default createAgGridInputHelper();

package/dist/blocks/AgGridInputBalham/AgGridInputBalham.js

@@ -14,11 +14,11 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
-import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-balham.css';
 import antdStyles from '../../ag-grid-antd.module.css';
+import { themeBalhamAntd, useGridTheme } from '../../theme/themeLowdefy.js';
 import AgGridInput from '../../AgGridInput.js';
 const AgGridInputBalham = ({ blockId, events, loading, methods, properties, required, styles, validation, value })=>{
+    const theme = useGridTheme(themeBalhamAntd, properties.themeParams);
     return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
         className: `ag-theme-balham ${antdStyles.antdTheme}`,
@@ -34,6 +34,7 @@ const AgGridInputBalham = ({ blockId, events, loading, methods, properties, requ
         methods: methods,
         properties: properties,
         required: required,
+        theme: theme,
         validation: validation,
         value: value
     }));

package/dist/blocks/AgGridInputBalham/e2e.js

@@ -13,4 +13,4 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import createAgGridInputHelper from '../../createAgGridInputHelper.js';
-export default createAgGridInputHelper('balham');
+export default createAgGridInputHelper();

package/dist/blocks/AgGridInputMaterial/AgGridInputMaterial.js

@@ -14,11 +14,11 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
-import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-material.css';
 import antdStyles from '../../ag-grid-antd.module.css';
+import { themeMaterialAntd, useGridTheme } from '../../theme/themeLowdefy.js';
 import AgGridInput from '../../AgGridInput.js';
 const AgGridInputMaterial = ({ blockId, events, loading, methods, properties, required, styles, validation, value })=>{
+    const theme = useGridTheme(themeMaterialAntd, properties.themeParams);
     return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
         className: `ag-theme-material ${antdStyles.antdTheme}`,
@@ -34,6 +34,7 @@ const AgGridInputMaterial = ({ blockId, events, loading, methods, properties, re
         methods: methods,
         properties: properties,
         required: required,
+        theme: theme,
         validation: validation,
         value: value
     }));

package/dist/blocks/AgGridInputMaterial/e2e.js

@@ -13,4 +13,4 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import createAgGridInputHelper from '../../createAgGridInputHelper.js';
-export default createAgGridInputHelper('material');
+export default createAgGridInputHelper();

package/dist/blocks/AgGridLowdefy/AgGridLowdefy.js

@@ -0,0 +1,45 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import antdStyles from '../../ag-grid-antd.module.css';
+import { sizeConfig, themeForSize, useGridTheme } from '../../theme/themeLowdefy.js';
+import AgGrid from '../../AgGrid.js';
+const AgGridLowdefy = ({ blockId, components, events, loading, methods, properties, styles })=>{
+    // The shared module's avatar rules key on the file-theme wrapper class the legacy blocks carry,
+    // which this block does not have. Setting the vars inline is also what makes avatars track size,
+    // since this block's density is not fixed.
+    const { avatarSize, avatarFontSize } = sizeConfig(properties.size);
+    const theme = useGridTheme(themeForSize(properties.size), properties.themeParams);
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        className: antdStyles.antdTheme,
+        style: {
+            width: '100%',
+            height: properties.height ?? 500,
+            '--lf-avatar-size': `${avatarSize}px`,
+            '--lf-avatar-font-size': `${avatarFontSize}px`,
+            ...styles?.element
+        }
+    }, /*#__PURE__*/ React.createElement(AgGrid, {
+        components: components,
+        events: events,
+        loading: loading,
+        methods: methods,
+        properties: properties,
+        theme: theme
+    }));
+};
+export default withBlockDefaults(AgGridLowdefy);

package/dist/blocks/AgGridLowdefy/e2e.js

@@ -0,0 +1,16 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import createAgGridDisplayHelper from '../../createAgGridDisplayHelper.js';
+export default createAgGridDisplayHelper();

package/dist/blocks/AgGridLowdefy/meta.js

@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import createDisplayMeta from '../../createDisplayMeta.js';
+export default createDisplayMeta('AgGridLowdefy', {
+    size: true
+});

package/dist/blocks/AgGridLowdefyInput/AgGridLowdefyInput.js

@@ -0,0 +1,48 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import antdStyles from '../../ag-grid-antd.module.css';
+import { sizeConfig, themeForSize, useGridTheme } from '../../theme/themeLowdefy.js';
+import AgGridInput from '../../AgGridInput.js';
+const AgGridLowdefyInput = ({ blockId, events, loading, methods, properties, required, styles, validation, value })=>{
+    // The shared module's avatar rules key on the file-theme wrapper class the legacy blocks carry,
+    // which this block does not have. Setting the vars inline is also what makes avatars track size,
+    // since this block's density is not fixed.
+    const { avatarSize, avatarFontSize } = sizeConfig(properties.size);
+    const theme = useGridTheme(themeForSize(properties.size), properties.themeParams);
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        className: antdStyles.antdTheme,
+        style: {
+            width: '100%',
+            height: properties.height ?? 500,
+            '--lf-avatar-size': `${avatarSize}px`,
+            '--lf-avatar-font-size': `${avatarFontSize}px`,
+            ...styles?.element
+        }
+    }, /*#__PURE__*/ React.createElement(AgGridInput, {
+        blockId: blockId,
+        events: events,
+        loading: loading,
+        methods: methods,
+        properties: properties,
+        required: required,
+        theme: theme,
+        validation: validation,
+        value: value
+    }));
+};
+export default withBlockDefaults(AgGridLowdefyInput);

package/dist/blocks/AgGridLowdefyInput/e2e.js

@@ -0,0 +1,16 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import createAgGridInputHelper from '../../createAgGridInputHelper.js';
+export default createAgGridInputHelper();

package/dist/blocks/AgGridLowdefyInput/meta.js

@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import createInputMeta from '../../createInputMeta.js';
+export default createInputMeta('AgGridLowdefyInput', {
+    size: true
+});

package/dist/blocks/AgGridMaterial/AgGridMaterial.js

@@ -14,11 +14,11 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
-import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-material.css';
 import antdStyles from '../../ag-grid-antd.module.css';
+import { themeMaterialAntd, useGridTheme } from '../../theme/themeLowdefy.js';
 import AgGrid from '../../AgGrid.js';
 const AgGridMaterial = ({ blockId, components, events, loading, methods, properties, styles })=>{
+    const theme = useGridTheme(themeMaterialAntd, properties.themeParams);
     return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
         className: `ag-theme-material ${antdStyles.antdTheme}`,
@@ -32,7 +32,8 @@ const AgGridMaterial = ({ blockId, components, events, loading, methods, propert
         events: events,
         loading: loading,
         methods: methods,
-        properties: properties
+        properties: properties,
+        theme: theme
     }));
 };
 export default withBlockDefaults(AgGridMaterial);

package/dist/blocks/AgGridMaterial/e2e.js

@@ -13,4 +13,4 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import createAgGridDisplayHelper from '../../createAgGridDisplayHelper.js';
-export default createAgGridDisplayHelper('material');
+export default createAgGridDisplayHelper();

package/dist/blocks.js

@@ -17,4 +17,6 @@ export { default as AgGridBalham } from './blocks/AgGridBalham/AgGridBalham.js';
 export { default as AgGridInputAlpine } from './blocks/AgGridInputAlpine/AgGridInputAlpine.js';
 export { default as AgGridInputBalham } from './blocks/AgGridInputBalham/AgGridInputBalham.js';
 export { default as AgGridInputMaterial } from './blocks/AgGridInputMaterial/AgGridInputMaterial.js';
+export { default as AgGridLowdefy } from './blocks/AgGridLowdefy/AgGridLowdefy.js';
+export { default as AgGridLowdefyInput } from './blocks/AgGridLowdefyInput/AgGridLowdefyInput.js';
 export { default as AgGridMaterial } from './blocks/AgGridMaterial/AgGridMaterial.js';

package/dist/createAgGridDisplayHelper.js

@@ -14,7 +14,7 @@
   limitations under the License.
 */ import { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
 import { expect } from '@playwright/test';
-function createAgGridDisplayHelper(theme) {
+function createAgGridDisplayHelper() {
     const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)} .ag-root-wrapper`);
     return createBlockHelper({
         locator,
@@ -26,7 +26,6 @@ function createAgGridDisplayHelper(theme) {
             rowCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ag-row')).toHaveCount(count),
             headerCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ag-header-cell-text')).toHaveCount(count),
             cellText: (page, blockId, rowIndex, colIndex, text)=>expect(locator(page, blockId).locator(`.ag-row[row-index="${rowIndex}"] .ag-cell`).nth(colIndex)).toHaveText(text),
-            themeClass: (page, blockId)=>expect(page.locator(`#${escapeId(blockId)}`)).toHaveClass(new RegExp(`ag-theme-${theme}`)),
             emptyOverlay: (page, blockId)=>expect(locator(page, blockId).locator('.ag-overlay-no-rows-center')).toBeVisible()
         }
     });

package/dist/createAgGridInputHelper.js

@@ -14,7 +14,7 @@
   limitations under the License.
 */ import { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
 import { expect } from '@playwright/test';
-function createAgGridInputHelper(theme) {
+function createAgGridInputHelper() {
     const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)} .ag-root-wrapper`);
     return createBlockHelper({
         locator,
@@ -33,7 +33,6 @@ function createAgGridInputHelper(theme) {
             rowCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ag-row')).toHaveCount(count),
             headerCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ag-header-cell-text')).toHaveCount(count),
             cellText: (page, blockId, rowIndex, colIndex, text)=>expect(locator(page, blockId).locator(`.ag-row[row-index="${rowIndex}"] .ag-cell`).nth(colIndex)).toHaveText(text),
-            themeClass: (page, blockId)=>expect(page.locator(`#${escapeId(blockId)}`)).toHaveClass(new RegExp(`ag-theme-${theme}`)),
             emptyOverlay: (page, blockId)=>expect(locator(page, blockId).locator('.ag-overlay-no-rows-center')).toBeVisible(),
             dragHandle: (page, blockId, rowIndex)=>expect(locator(page, blockId).locator(`.ag-row[row-index="${rowIndex}"] .ag-drag-handle`)).toBeVisible()
         }

package/dist/createDisplayMeta.js

@@ -12,10 +12,11 @@
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-*/ // Shared meta for the display AgGrid theme blocks (AgGridAlpine / AgGridMaterial / AgGridBalham).
-// They are identical apart from the theme name in the css key description, so each block's meta.js
-// is a one-line call to this factory rather than a duplicated copy of the whole schema.
-function createDisplayMeta(blockName) {
+*/ // Shared meta for the display AgGrid theme blocks (AgGridAlpine / AgGridMaterial / AgGridBalham /
+// AgGridLowdefy). They are identical apart from the theme name in the css key description and
+// whether they take a size property, so each block's meta.js is a one-line call to this factory
+// rather than a duplicated copy of the whole schema.
+function createDisplayMeta(blockName, { size = false } = {}) {
     return {
         category: 'display',
         icons: [],
@@ -92,6 +93,22 @@ function createDisplayMeta(blockName) {
             type: 'object',
             additionalProperties: false,
             properties: {
+                ...size ? {
+                    size: {
+                        type: 'string',
+                        enum: [
+                            'small',
+                            'middle',
+                            'large'
+                        ],
+                        default: 'middle',
+                        description: "Row density, mirroring antd Table sizes. `small` is compact, `middle` (the Lowdefy default) matches antd Table's `middle`, `large` matches antd Table's default density. Changes spacing and row/header height only — colours and font size are identical across sizes."
+                    }
+                } : {},
+                themeParams: {
+                    type: 'object',
+                    description: "AG Grid Theming API parameters merged onto this block's theme, for per-grid overrides. Keys are AG Grid param names, e.g. `headerBackgroundColor`, `rowHoverColor`, `borderColor`. Values are CSS strings and may reference antd tokens, e.g. `var(--ant-color-primary)`. An unrecognised param name has no effect — neither Lowdefy nor AG Grid validates the names — so check spelling against AG Grid's theming parameter reference."
+                },
                 height: {
                     type: [
                         'number',

package/dist/createInputMeta.js

@@ -13,9 +13,10 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ // Shared meta for the input AgGrid theme blocks (AgGridInputAlpine / AgGridInputMaterial /
-// AgGridInputBalham). They are identical apart from the theme name in the css key description, so
-// each block's meta.js is a one-line call to this factory rather than a duplicated copy.
-function createInputMeta(blockName) {
+// AgGridInputBalham / AgGridLowdefyInput). They are identical apart from the theme name in the css
+// key description and whether they take a size property, so each block's meta.js is a one-line call
+// to this factory rather than a duplicated copy of the whole schema.
+function createInputMeta(blockName, { size = false } = {}) {
     return {
         category: 'input',
         icons: [],
@@ -104,6 +105,22 @@ function createInputMeta(blockName) {
             type: 'object',
             additionalProperties: false,
             properties: {
+                ...size ? {
+                    size: {
+                        type: 'string',
+                        enum: [
+                            'small',
+                            'middle',
+                            'large'
+                        ],
+                        default: 'middle',
+                        description: "Row density, mirroring antd Table sizes. `small` is compact, `middle` (the Lowdefy default) matches antd Table's `middle`, `large` matches antd Table's default density. Changes spacing and row/header height only — colours and font size are identical across sizes."
+                    }
+                } : {},
+                themeParams: {
+                    type: 'object',
+                    description: "AG Grid Theming API parameters merged onto this block's theme, for per-grid overrides. Keys are AG Grid param names, e.g. `headerBackgroundColor`, `rowHoverColor`, `borderColor`. Values are CSS strings and may reference antd tokens, e.g. `var(--ant-color-primary)`. An unrecognised param name has no effect — neither Lowdefy nor AG Grid validates the names — so check spelling against AG Grid's theming parameter reference."
+                },
                 height: {
                     type: [
                         'number',

package/dist/e2e.js

@@ -17,4 +17,6 @@ export { default as AgGridBalham } from './blocks/AgGridBalham/e2e.js';
 export { default as AgGridInputAlpine } from './blocks/AgGridInputAlpine/e2e.js';
 export { default as AgGridInputBalham } from './blocks/AgGridInputBalham/e2e.js';
 export { default as AgGridInputMaterial } from './blocks/AgGridInputMaterial/e2e.js';
+export { default as AgGridLowdefy } from './blocks/AgGridLowdefy/e2e.js';
+export { default as AgGridLowdefyInput } from './blocks/AgGridLowdefyInput/e2e.js';
 export { default as AgGridMaterial } from './blocks/AgGridMaterial/e2e.js';

package/dist/metas.js

@@ -17,4 +17,6 @@ export { default as AgGridBalham } from './blocks/AgGridBalham/meta.js';
 export { default as AgGridInputAlpine } from './blocks/AgGridInputAlpine/meta.js';
 export { default as AgGridInputBalham } from './blocks/AgGridInputBalham/meta.js';
 export { default as AgGridInputMaterial } from './blocks/AgGridInputMaterial/meta.js';
+export { default as AgGridLowdefy } from './blocks/AgGridLowdefy/meta.js';
+export { default as AgGridLowdefyInput } from './blocks/AgGridLowdefyInput/meta.js';
 export { default as AgGridMaterial } from './blocks/AgGridMaterial/meta.js';

package/dist/theme/themeLowdefy.js

@@ -0,0 +1,165 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { useMemo } from 'react';
+import { themeAlpine, themeBalham, themeMaterial, themeQuartz } from 'ag-grid-community';
+import { type } from '@lowdefy/helpers';
+// Mirrors antd Table's small / middle / default densities. spacing, rowHeight and headerHeight feed
+// the theme size variants; avatarSize and avatarFontSize feed the wrapper's inline CSS custom
+// properties. One table serves both consumers.
+const SIZES = {
+    small: {
+        spacing: 4,
+        rowHeight: 36,
+        headerHeight: 36,
+        avatarSize: 20,
+        avatarFontSize: 10
+    },
+    middle: {
+        spacing: 6,
+        rowHeight: 44,
+        headerHeight: 44,
+        avatarSize: 24,
+        avatarFontSize: 12
+    },
+    large: {
+        spacing: 8,
+        rowHeight: 54,
+        headerHeight: 54,
+        avatarSize: 28,
+        avatarFontSize: 14
+    }
+};
+// Every colour is a var(--ant-*) reference rather than a resolved value, so antd's cssVar mode
+// regenerates the grid's colours on each theme or dark-mode change with no JS.
+//
+// Four of these tokens carry a fallback chain even though antd's cssVar mode emits its whole alias
+// token set on `.lowdefy` regardless of which components a page renders — so in practice the primary
+// --ant-* reference always resolves and the fallback never fires. The chains are defensive, not
+// load-bearing: they guard against an antd alias no longer being emitted. That defensiveness is not
+// free — tooltipBackgroundColor's and modalOverlayBackgroundColor's fallbacks land on the grid's
+// normal surface colour, which would flatten the tooltip onto the grid and make the loading mask
+// opaque if either ever fired. They stay because removing them is not this fix's call.
+//
+// Applied to all four bases: this is what the antd CSS overlay (src/ag-grid-antd.module.css) imposes
+// on the six original theme blocks today, fontFamily / fontSize / oddRowBackgroundColor included; its
+// --ag-* colour block is superseded by these params once that file's colours are removed.
+const antdParams = {
+    accentColor: 'var(--ant-color-primary)',
+    backgroundColor: 'var(--ant-color-bg-container)',
+    foregroundColor: 'var(--ant-color-text)',
+    borderColor: 'var(--ant-color-border-secondary)',
+    chromeBackgroundColor: 'var(--ant-color-fill-quaternary)',
+    headerBackgroundColor: 'var(--ant-color-fill-quaternary)',
+    headerTextColor: 'var(--ant-color-text)',
+    headerCellHoverBackgroundColor: 'var(--ant-color-fill-tertiary)',
+    oddRowBackgroundColor: 'var(--ant-color-fill-quaternary)',
+    rowHoverColor: 'var(--ant-color-fill-tertiary)',
+    selectedRowBackgroundColor: 'var(--ant-color-primary-bg)',
+    checkboxCheckedBackgroundColor: 'var(--ant-color-primary)',
+    checkboxUncheckedBorderColor: 'var(--ant-color-border)',
+    fontFamily: 'var(--ant-font-family)',
+    fontSize: 'var(--ant-font-size)',
+    menuBackgroundColor: 'var(--ant-color-bg-elevated, var(--ant-color-bg-container))',
+    menuShadow: 'var(--ant-box-shadow-secondary)',
+    popupShadow: 'var(--ant-box-shadow-secondary)',
+    // dropdownShadow and cellEditingShadow both ref cardShadow, whose v33 default is a hardcoded
+    // light-mode literal, so leaving it unset renders wrong in dark mode.
+    cardShadow: 'var(--ant-box-shadow-secondary)',
+    tooltipBackgroundColor: 'var(--ant-color-bg-spotlight, var(--ant-color-bg-container))',
+    // AG Grid's default tooltipTextColor refs textColor, which foregroundColor above sets to antd's
+    // normal (non-inverted) text colour — unreadable against the spotlight surface tooltipBackgroundColor
+    // uses. antd always pairs colorBgSpotlight with colorTextLightSolid, a token that is #fff in both
+    // light and dark mode, so the fallback here is a literal #fff rather than another --ant-* alias:
+    // aliasing to e.g. --ant-color-text would just reintroduce this same inversion.
+    tooltipTextColor: 'var(--ant-color-text-light-solid, #fff)',
+    modalOverlayBackgroundColor: 'var(--ant-color-bg-mask, var(--ant-color-bg-container))',
+    // Not a colour. AG Grid's own dark value lives under a data-ag-theme-mode="dark" attribute Lowdefy
+    // never sets, and this param has no antd token to ride on, so the decision is handed to the
+    // document and set as color-scheme on <html> from the app's dark-mode state.
+    browserColorScheme: 'inherit'
+};
+// Lowdefy blocks only — the four structural choices the antd overlay never made. Applying these to a
+// legacy base would overwrite the params that base sets to define itself (Balham's borderRadius: 2 and
+// headerFontWeight: 'bold', Material's borderRadius: 0) and, because a param set in the default mode
+// is deleted from every non-default mode, erase that base's light/dark variants for those names too.
+const lowdefyParams = {
+    headerFontWeight: 600,
+    borderRadius: 'var(--ant-border-radius)',
+    wrapperBorderRadius: 'var(--ant-border-radius-lg, var(--ant-border-radius, 8px))',
+    oddRowBackgroundColor: 'transparent'
+};
+const base = themeQuartz.withParams({
+    ...antdParams,
+    ...lowdefyParams
+});
+// Sizes differ only in spacing and heights, matching antd, where size changes padding rather than
+// the type scale. Built once at module scope so switching size only swaps which object is passed.
+const themes = Object.fromEntries(Object.entries(SIZES).map(([size, { spacing, rowHeight, headerHeight }])=>[
+        size,
+        base.withParams({
+            spacing,
+            rowHeight,
+            headerHeight
+        })
+    ]));
+// Bounded by the number of distinct bad values in the app's config, not by render count.
+const warned = new Set();
+// Object.hasOwn rather than `in`: `in` walks the prototype chain, so size: 'toString' would resolve
+// themes['toString'] to a function and AG Grid would be handed a function as its theme.
+//
+// size is normalised to a string before the hasOwn check, the warned Set and the message: a
+// non-primitive size (e.g. an object or array from a config mistake) is a fresh reference every
+// render, so keying on the raw value would warn once per render instead of once per distinct value.
+const resolveSize = (size)=>{
+    if (type.isNone(size)) return 'middle';
+    const key = String(size);
+    if (Object.hasOwn(SIZES, key)) return key;
+    if (!warned.has(key)) {
+        warned.add(key);
+        console.warn(`Lowdefy AG Grid property "size" received "${key}", which is not a valid size. Use one of ${Object.keys(SIZES).join(', ')}. Falling back to "middle".`);
+    }
+    return 'middle';
+};
+const themeForSize = (size)=>themes[resolveSize(size)];
+const sizeConfig = (size)=>SIZES[resolveSize(size)];
+// The six original blocks take antdParams and only antdParams, on AG Grid's prebuilt reproductions of
+// their file themes. Their type scale, radii, header weight and zebra come from the base theme, which
+// is what keeps them recognisably Balham / Alpine / Material.
+const themeBalhamAntd = themeBalham.withParams(antdParams);
+const themeAlpineAntd = themeAlpine.withParams(antdParams);
+// Material's styleMaterial part sets its own primaryColor and refs it for the tab underline, button
+// text, input focus border and cell editing border. antdParams sets accentColor, a different param,
+// so without this those stay Material indigo. primaryColor exists only on Material's param type, so
+// the shared map cannot carry it.
+const themeMaterialAntd = themeMaterial.withParams({
+    ...antdParams,
+    primaryColor: 'var(--ant-color-primary)'
+});
+// Returns the base object untouched when there is nothing to merge, so the module-scope themes stay
+// shared and identity-stable. An empty object counts as absent: {} is what an operator-driven
+// themeParams produces when nothing applies. type.isObject rejects anything that is not a plain
+// object (a string, array, number or boolean from a config mistake) instead of letting
+// Object.keys coerce it — Object.keys('dark') is truthy and would make withParams emit junk
+// --ag-0 / --ag-1 style variables from the string's characters. Keyed on the serialised params
+// rather than object identity because Lowdefy re-evaluates block properties each render, so
+// themeParams is a fresh reference every time.
+const useGridTheme = (baseTheme, themeParams)=>{
+    const key = type.isObject(themeParams) && Object.keys(themeParams).length ? JSON.stringify(themeParams) : null;
+    return useMemo(()=>key ? baseTheme.withParams(JSON.parse(key)) : baseTheme, [
+        baseTheme,
+        key
+    ]);
+};
+export { SIZES, sizeConfig, themeAlpineAntd, themeBalhamAntd, themeForSize, themeMaterialAntd, useGridTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-aggrid",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "license": "Apache-2.0",
   "description": "AgGrid Blocks for Lowdefy.",
   "homepage": "https://lowdefy.com",
@@ -44,14 +44,11 @@
     "dist/*"
   ],
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "32.3.9",
-    "@ag-grid-community/core": "32.3.9",
-    "@ag-grid-community/csv-export": "32.3.9",
-    "@ag-grid-community/react": "32.3.9",
-    "@ag-grid-community/styles": "32.3.9",
-    "@lowdefy/block-utils": "5.5.0",
-    "@lowdefy/blocks-antd": "5.5.0",
-    "@lowdefy/helpers": "5.5.0"
+    "@lowdefy/block-utils": "5.6.0",
+    "@lowdefy/blocks-antd": "5.6.0",
+    "@lowdefy/helpers": "5.6.0",
+    "ag-grid-community": "33.3.2",
+    "ag-grid-react": "33.3.2"
   },
   "peerDependencies": {
     "@ant-design/icons": ">=6",
@@ -61,8 +58,8 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.5.0",
-    "@lowdefy/e2e-utils": "5.5.0",
+    "@lowdefy/block-dev-e2e": "5.6.0",
+    "@lowdefy/e2e-utils": "5.6.0",
     "@playwright/test": "1.50.1",
     "@swc/cli": "0.8.0",
     "@swc/core": "1.15.18",