@azrico/reactgrid 1.3.52 → 1.4.0

package/README.md

@@ -1,3 +1,198 @@
 **DISCLAIMER :**
 DO NOT USE THIS PACKAGE FOR ANY REASON
 THIS IS A PRIVATE PACKAGE
+
+## Grid themes
+
+`AzGrid` always uses Inovua's `default-light` base for layout and icons. Its
+token stylesheet is optional and shipped in `dist/src/themes`. Import it once
+in your host's entry point to enable the variable theme; without it the grid
+uses Inovua's default-light appearance. The old dark/amber theme stylesheets
+are no longer imported by the package.
+Use `theme="light"` (default), `theme="dark"`, or any custom name such as
+`theme="deco"`. The actual grid root and its surrounding scope receive
+`azgrid-theme-<name>`. `theme` takes precedence over the deprecated `dark` boolean;
+`dark={true}` still selects dark and `dark={false}` selects light.
+`gridOptions.theme` is ignored to keep one consistent base for layout.
+
+Set public `--azgrid-*` variables on `:root`, a wrapper, or the theme class.
+Different wrappers can theme multiple grids independently. Neutral light/dark
+presets set only internal `--azgrid-preset-*` fallbacks, so grid defaults
+never mask variables inherited from your wrapper. Custom names use light
+fallbacks for unspecified tokens; set the complete palette for a custom dark theme.
+No daisyUI dependency or variables are required.
+
+```tsx
+import { AzGrid } from '@azrico/reactgrid';
+import '@azrico/reactgrid/dist/src/themes/azgrid-theme.css';
+
+<div className="my-grid">
+  <AzGrid theme="light" columns={columns} dataSource={rows} />
+</div>
+```
+
+```css
+.my-grid {
+  --azgrid-accent: #345b93;
+  --azgrid-header-bg: #edf2f8;
+  --azgrid-row-bg-hover: #e4ecf7;
+}
+```
+
+### Public variables
+
+Every use has a neutral preset fallback. Values can be any valid CSS value for
+the indicated property. Fallbacks expressed using another token follow host
+overrides of that token. `--azgrid-preset-*` variables are internal implementation
+details and should not be overridden.
+
+<!-- azgrid-tokens -->
+| Variable | Controls | Light / dark fallback |
+| --- | --- | --- |
+| `--azgrid-bg` | Grid background | `#fff` / `#313943` |
+| `--azgrid-fg` | Grid text | `#555e68` / `#c5cae9` |
+| `--azgrid-border` | Grid border and separators | `#e4e3e2` / `#4f575f` |
+| `--azgrid-font-family` | Grid and control font family | `'Nunito Sans', 'Iran Sans', sans-serif` |
+| `--azgrid-radius` | Grid, input and menu corner radius | `0` |
+| `--azgrid-accent` | Focus indicators, sort arrows, checkboxes and selection handles | `#7986cb` / `#caae53` |
+| `--azgrid-transparent` | Transparent structural surfaces | `transparent` |
+| `--azgrid-muted-fg` | Disabled text and secondary icons | `#99a1aa` / `#9ca6b0` |
+| `--azgrid-shadow-color` | Menu and input shadow colour | `rgba(0, 0, 0, .2)` / `rgba(0, 0, 0, .4)` |
+| `--azgrid-header-bg` | Header and grouped header background | `#fff` / `#3b444f` |
+| `--azgrid-header-fg` | Header text | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
+| `--azgrid-header-border` | Header separators | `var(--azgrid-border, var(--azgrid-preset-border))` |
+| `--azgrid-header-font-size` | Header font size | `14px` |
+| `--azgrid-header-text-transform` | Header text transform | `none` |
+| `--azgrid-header-letter-spacing` | Header letter spacing | `normal` |
+| `--azgrid-header-font-weight` | Header font weight | `500` |
+| `--azgrid-row-bg-even` | Even and non-zebra rows | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
+| `--azgrid-row-bg-odd` | Odd rows | `#fafafa` / `#353e48` |
+| `--azgrid-row-bg-hover` | Hovered rows and cells | `#ebedf7` / `#454f5b` |
+| `--azgrid-row-fg-hover` | Hovered row text | `var(--azgrid-fg, var(--azgrid-preset-fg))` / `#ececec` |
+| `--azgrid-row-bg-selected` | Selected rows and cells | `#dce0f2` / `#655c3e` |
+| `--azgrid-row-fg-selected` | Selected row text | `var(--azgrid-fg, var(--azgrid-preset-fg))` / `#fff` |
+| `--azgrid-row-bg-active` | Active rows | `#ebedf7` / `#4f575f` |
+| `--azgrid-cell-border` | Cell borders | `rgba(1, 1, 1, .1)` / `#4f575f` |
+| `--azgrid-cell-border-width` | Cell border width | `0.1px` |
+| `--azgrid-cell-padding` | Ordinary data cell padding; expand/reorder tools keep their layout | `0 8px` |
+| `--azgrid-filter-bg` | Filter row and input background, also editors and search | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
+| `--azgrid-filter-fg` | Filter input and editor text | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
+| `--azgrid-filter-border` | Filter input borders | `var(--azgrid-border, var(--azgrid-preset-border))` |
+| `--azgrid-filter-placeholder` | Input placeholder text | `var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg))` |
+| `--azgrid-filter-focus-ring` | Focused input border and ring | `var(--azgrid-accent, var(--azgrid-preset-accent))` |
+| `--azgrid-pagination-bg` | Pagination toolbar, page number and page size controls | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
+| `--azgrid-pagination-fg` | Pagination text and icons | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
+| `--azgrid-pagination-border` | Pagination control borders | `var(--azgrid-border, var(--azgrid-preset-border))` |
+| `--azgrid-menu-bg` | Column, filter, context, select menus and date pickers | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
+| `--azgrid-menu-fg` | Menu text and icons | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
+| `--azgrid-menu-border` | Menu borders and separators | `var(--azgrid-border, var(--azgrid-preset-border))` |
+| `--azgrid-menu-bg-hover` | Hovered/focused menu entries | `var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover))` |
+| `--azgrid-scrollbar-track` | Native and Inovua scrollbar tracks | `#f1f1f1` / `#313943` |
+| `--azgrid-scrollbar-thumb` | Native and Inovua scrollbar thumbs | `#b5b5b5` / `#697582` |
+| `--azgrid-empty-bg` | Empty state background | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
+| `--azgrid-empty-fg` | No records text | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
+| `--azgrid-loading-bg` | Loading overlay background | `rgba(255, 255, 255, .8)` / `rgba(49, 57, 67, .8)` |
+| `--azgrid-loading-fg` | Loading text and spinner | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
+| `--azgrid-tree-bg` | Tree/group row background | `var(--azgrid-row-bg-even, var(--azgrid-preset-row-bg-even))` |
+| `--azgrid-tree-fg` | Tree/group text and expand icons | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
+| `--azgrid-details-bg` | Row details background | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
+| `--azgrid-locked-column-shadow` | Locked column separator shadow (complete CSS box-shadow value) | `0 0 5px rgba(0, 0, 0, .2)` / `0 0 5px rgba(0, 0, 0, .5)` |
+<!-- /azgrid-tokens -->
+
+### Dark Art Deco host preset
+
+Square corners, obsidian surfaces, gold accents and uppercase widely spaced
+headers are host choices, separate from the neutral theme. Set variables on
+`.azgrid-theme-deco` to support `theme="deco"`, or on a host wrapper.
+
+```tsx
+<AzGrid theme="deco" columns={columns} dataSource={rows} />
+```
+
+<!-- azgrid-deco -->
+```css
+/* Example host preset; separate from the neutral grid theme. */
+.azgrid-example-deco, .azgrid-theme-deco {
+	--azgrid-bg: #0A0A0A;
+	--azgrid-fg: #eee7d6;
+	--azgrid-border: #6b5824;
+	--azgrid-accent: #D4AF37;
+	--azgrid-muted-fg: #9b8a5b;
+	--azgrid-radius: 0;
+	--azgrid-font-family: Georgia, serif;
+	--azgrid-header-bg: #0A0A0A;
+	--azgrid-header-fg: #D4AF37;
+	--azgrid-header-border: #6b5824;
+	--azgrid-header-text-transform: uppercase;
+	--azgrid-header-letter-spacing: .1em;
+	--azgrid-header-font-weight: 600;
+	--azgrid-row-bg-even: #0A0A0A;
+	--azgrid-row-bg-odd: #12110e;
+	--azgrid-row-bg-hover: #282211;
+	--azgrid-row-fg-hover: #fff6dc;
+	--azgrid-row-bg-selected: #423619;
+	--azgrid-row-fg-selected: #fff6dc;
+	--azgrid-row-bg-active: #332a15;
+	--azgrid-cell-border: #6b5824;
+	--azgrid-cell-border-width: 1px;
+	--azgrid-cell-padding: 0 10px;
+	--azgrid-filter-bg: #12110e;
+	--azgrid-filter-fg: #eee7d6;
+	--azgrid-filter-border: #6b5824;
+	--azgrid-filter-placeholder: #9b8a5b;
+	--azgrid-filter-focus-ring: #D4AF37;
+	--azgrid-pagination-bg: #0A0A0A;
+	--azgrid-pagination-fg: #D4AF37;
+	--azgrid-pagination-border: #6b5824;
+	--azgrid-menu-bg: #12110e;
+	--azgrid-menu-fg: #eee7d6;
+	--azgrid-menu-border: #6b5824;
+	--azgrid-menu-bg-hover: #282211;
+	--azgrid-scrollbar-track: #0A0A0A;
+	--azgrid-scrollbar-thumb: #6b5824;
+	--azgrid-empty-bg: #0A0A0A;
+	--azgrid-empty-fg: #9b8a5b;
+	--azgrid-loading-bg: rgba(10, 10, 10, .85);
+	--azgrid-loading-fg: #D4AF37;
+	--azgrid-tree-bg: #12110e;
+	--azgrid-tree-fg: #D4AF37;
+	--azgrid-details-bg: #12110e;
+	--azgrid-shadow-color: rgba(0, 0, 0, .6);
+	--azgrid-locked-column-shadow: 0 0 5px #6b5824;
+}
+
+```
+<!-- /azgrid-deco -->
+
+`src/example.tsx` renders light, dark and this host palette together, with
+filter inputs, editable cells, tree rows, selection, context menus and pagination.
+
+### Scope and maintenance
+
+The wrapper's MUI context menu portal stays inside the owning theme scope.
+Inovua's default column/filter menus and page-size dropdown render in
+the grid. If you explicitly use `gridOptions.menuPortalContainer` or
+`gridOptions.renderInPortal` to move UI elsewhere, that external container must
+also carry `azgrid-scope`, the owning `azgrid-theme-<name>` class and host
+variables. Arbitrary custom cell,
+editor, menu and row-detail content must use these variables in its own CSS;
+the package cannot replace colours deliberately supplied by a host renderer or
+inline `gridOptions.style`/column styles.
+
+Inovua's base layout, animations, icon geometry and state selectors remain
+intact. `config/generate-theme.cjs` extracts only colour/font declarations and
+adds scope specificity. Run `node config/generate-theme.cjs` after an Inovua
+upgrade and inspect selector changes. Run `yarn check:theme` to audit upstream
+colour coverage, token defaults/documentation and commented important rules.
+`config/theme-extras.css` handles surfaces
+without upstream colour declarations. The only colour-related upstream
+`!important` rules are footer cell border colour and first-row cell top border;
+our matching overrides explain each use. Native scrollbar presentation remains
+subject to browser/OS support.
+
+### Styling dependencies
+
+`@azrico/controls` 1.6.1 provides the context menu. MUI's default styled engine
+uses `@emotion/react` and `@emotion/styled` for those components; the grid does
+not use Emotion to implement its CSS variable theme. Removing Emotion requires
+replacing the MUI menu or configuring another supported MUI styling engine.

package/config/check-theme.cjs

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const assert = require('assert');
+const postcss = require('postcss');
+const cssTree = require('css-tree');
+const css = fs.readFileSync('src/themes/azgrid-theme.css', 'utf8');
+cssTree.parse(css);
+const theme = postcss.parse(css);
+const presets = new Set();
+const used = new Set();
+let important = [];
+theme.walkDecls(d => {
+ if(d.prop.startsWith('--azgrid-preset-')) presets.add(d.prop.slice('--azgrid-preset-'.length));
+ else {
+  assert(!/#[\da-f]{3,8}\b|rgba?\(|hsla?\(/i.test(d.value), 'literal outside presets: '+d);
+  for(const match of d.value.matchAll(/var\(--azgrid-(?!preset-)([\w-]+)/g)) used.add(match[1]);
+ }
+ if(d.important) { assert(d.prev().type === 'comment', 'comment required for !important'); important.push(d.parent.selector); }
+});
+for(const name of presets) assert(used.has(name), 'unused public token '+name);
+for(const name of used) assert(presets.has(name), 'missing fallback '+name);
+const readme = fs.readFileSync('README.md','utf8');
+for(const name of used) assert(readme.includes('`--azgrid-'+name+'`'), 'undocumented '+name);
+assert.equal(important.length,2);
+// Every literal paint declaration in Inovua must have a scoped override.
+const upstream = postcss.parse(fs.readFileSync('node_modules/@inovua/reactdatagrid-enterprise/index.css','utf8'));
+let count = 0;
+upstream.walkRules(r => {
+ const colour = r.nodes.some(d => /^(color|background.*|.*border.*|outline.*|fill|stroke|.*shadow)$/.test(d.prop) && /#[\da-f]{3,8}\b|rgba?\(|hsla?\(|\b(?:transparent|white|black|grey|gray|red|blue|silver)\b/i.test(d.value));
+ if(!colour || r.parent.type === 'atrule') return;
+ for(const selector of r.selectors) {
+  const scoped = selector.startsWith('.InovuaReactDataGrid--') || /^\.InovuaReactDataGrid(?=[\s.:#>]|$)/.test(selector) ? '.azgrid'+selector : '.azgrid-scope '+selector;
+  assert(theme.nodes.some(n=>n.type==='rule' && n.selectors.includes(scoped)), 'missing selector '+selector);
+ }
+ count++;
+});
+console.log('PASS:',used.size,'documented tokens;',count,'upstream paint rules covered; only two commented !important selectors');
+console.log(important.join('\n'));

package/config/generate-theme.cjs

@@ -0,0 +1,132 @@
+// Regenerate after upgrading Inovua: node config/generate-theme.cjs
+// Keep upstream layout, icon geometry, state specificity and selector order.
+const fs = require('fs');
+const postcss = require('postcss');
+
+// [light fallback, dark fallback, description]. Presets define fallback tokens,
+// never public tokens: variables inherited from a host wrapper must win.
+const tokens = {
+	bg: ['#fff', '#313943', 'Grid background'],
+	fg: ['#555e68', '#c5cae9', 'Grid text'],
+	border: ['#e4e3e2', '#4f575f', 'Grid border and separators'],
+	'font-family': ["'Nunito Sans', 'Iran Sans', sans-serif", "'Nunito Sans', 'Iran Sans', sans-serif", 'Grid and control font family'],
+	radius: ['0', '0', 'Grid, input and menu corner radius'],
+	accent: ['#7986cb', '#caae53', 'Focus indicators, sort arrows, checkboxes and selection handles'],
+	transparent: ['transparent', 'transparent', 'Transparent structural surfaces'],
+	'muted-fg': ['#99a1aa', '#9ca6b0', 'Disabled text and secondary icons'],
+	'shadow-color': ['rgba(0, 0, 0, .2)', 'rgba(0, 0, 0, .4)', 'Menu and input shadow colour'],
+	'header-bg': ['#fff', '#3b444f', 'Header and grouped header background'],
+	'header-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Header text'],
+	'header-border': ['var(--azgrid-border, var(--azgrid-preset-border))', 'var(--azgrid-border, var(--azgrid-preset-border))', 'Header separators'],
+	'header-font-size': ['14px', '14px', 'Header font size'],
+	'header-text-transform': ['none', 'none', 'Header text transform'],
+	'header-letter-spacing': ['normal', 'normal', 'Header letter spacing'],
+	'header-font-weight': ['500', '500', 'Header font weight'],
+	'row-bg-even': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Even and non-zebra rows'],
+	'row-bg-odd': ['#fafafa', '#353e48', 'Odd rows'],
+	'row-bg-hover': ['#ebedf7', '#454f5b', 'Hovered rows and cells'],
+	'row-fg-hover': ['var(--azgrid-fg, var(--azgrid-preset-fg))', '#ececec', 'Hovered row text'],
+	'row-bg-selected': ['#dce0f2', '#655c3e', 'Selected rows and cells'],
+	'row-fg-selected': ['var(--azgrid-fg, var(--azgrid-preset-fg))', '#fff', 'Selected row text'],
+	'row-bg-active': ['#ebedf7', '#4f575f', 'Active rows'],
+	'cell-border': ['rgba(1, 1, 1, .1)', '#4f575f', 'Cell borders'],
+	'cell-border-width': ['0.1px', '0.1px', 'Cell border width'],
+	'cell-padding': ['0 8px', '0 8px', 'Ordinary data cell padding; expand/reorder tools keep their layout'],
+	'filter-bg': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Filter row and input background, also editors and search'],
+	'filter-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Filter input and editor text'],
+	'filter-border': ['var(--azgrid-border, var(--azgrid-preset-border))', 'var(--azgrid-border, var(--azgrid-preset-border))', 'Filter input borders'],
+	'filter-placeholder': ['var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg))', 'var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg))', 'Input placeholder text'],
+	'filter-focus-ring': ['var(--azgrid-accent, var(--azgrid-preset-accent))', 'var(--azgrid-accent, var(--azgrid-preset-accent))', 'Focused input border and ring'],
+	'pagination-bg': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Pagination toolbar, page number and page size controls'],
+	'pagination-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Pagination text and icons'],
+	'pagination-border': ['var(--azgrid-border, var(--azgrid-preset-border))', 'var(--azgrid-border, var(--azgrid-preset-border))', 'Pagination control borders'],
+	'menu-bg': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Column, filter, context, select menus and date pickers'],
+	'menu-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Menu text and icons'],
+	'menu-border': ['var(--azgrid-border, var(--azgrid-preset-border))', 'var(--azgrid-border, var(--azgrid-preset-border))', 'Menu borders and separators'],
+	'menu-bg-hover': ['var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover))', 'var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover))', 'Hovered/focused menu entries'],
+	'scrollbar-track': ['#f1f1f1', '#313943', 'Native and Inovua scrollbar tracks'],
+	'scrollbar-thumb': ['#b5b5b5', '#697582', 'Native and Inovua scrollbar thumbs'],
+	'empty-bg': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Empty state background'],
+	'empty-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'No records text'],
+	'loading-bg': ['rgba(255, 255, 255, .8)', 'rgba(49, 57, 67, .8)', 'Loading overlay background'],
+	'loading-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Loading text and spinner'],
+	'tree-bg': ['var(--azgrid-row-bg-even, var(--azgrid-preset-row-bg-even))', 'var(--azgrid-row-bg-even, var(--azgrid-preset-row-bg-even))', 'Tree/group row background'],
+	'tree-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Tree/group text and expand icons'],
+	'details-bg': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Row details background'],
+	'locked-column-shadow': ['0 0 5px rgba(0, 0, 0, .2)', '0 0 5px rgba(0, 0, 0, .5)', 'Locked column separator shadow (complete CSS box-shadow value)'],
+};
+const variable = name => `var(--azgrid-${name}, var(--azgrid-preset-${name}))`;
+const colour = /#[\da-f]{3,8}\b|(?:rgba?|hsla?)\([^)]*\)|\b(?:transparent|white|black|grey|gray|red|blue|silver)\b/gi;
+function tokenFor(selector, prop, literal) {
+	const bg = /background/.test(prop);
+	const border = /border|outline/.test(prop);
+	if (literal === 'transparent') return 'transparent';
+	if (/shadow/.test(prop)) return 'shadow-color';
+	if (/scroll.*(?:thumb)|(?:thumb).*scroll/.test(selector)) return 'scrollbar-thumb';
+	if (/scroll.*(?:track)|scrollbar/.test(selector)) return 'scrollbar-track';
+	if (/loader-spinner/.test(selector)) return literal === '#7986cb' ? 'accent' : 'muted-fg';
+	if (/loader-loadbar/.test(selector)) return 'loading-fg';
+	if (/load-mask|loading/.test(selector)) return bg ? 'loading-bg' : 'loading-fg';
+	if (/empty/.test(selector)) return bg ? 'empty-bg' : 'empty-fg';
+	if (/placeholder/.test(selector)) return 'filter-placeholder';
+	if (/sort-icon|selection-dragger|active-borders|checkbox/.test(selector)) {
+		if (/unchecked|disabled/.test(selector)) return 'muted-fg';
+		if (prop === 'stroke') return 'bg';
+		return /color/.test(prop) ? 'fg' : 'accent';
+	}
+	if (/cell__selection/.test(selector)) return bg ? 'row-bg-selected' : 'accent';
+	if (/menu|combo-box__list|calendar|date-input__picker/.test(selector) && !/column-header__menu-tool/.test(selector)) {
+		return border ? 'menu-border' : bg ? (/over|hover|focused|selected|active/.test(selector) ? 'menu-bg-hover' : 'menu-bg') : 'menu-fg';
+	}
+	if (/pagination/.test(selector)) return border ? 'pagination-border' : bg ? 'pagination-bg' : 'pagination-fg';
+	if (/focused|:focus/.test(selector) && border) return 'filter-focus-ring';
+	if (/filter|text-input|number-input|numeric-input|date-input|combo-box|editor/.test(selector)) return border ? 'filter-border' : bg ? 'filter-bg' : 'filter-fg';
+	if (/row-details/.test(selector)) return border ? 'border' : bg ? 'details-bg' : 'fg';
+	if (border) return /header/.test(selector) ? 'header-border' : /cell/.test(selector) ? 'cell-border' : 'border';
+	if (/row.*(?:selected)|cell--cell-selected/.test(selector)) return bg ? 'row-bg-selected' : 'row-fg-selected';
+	if (/hover|--over/.test(selector)) return bg ? 'row-bg-hover' : 'row-fg-hover';
+	if (/row--active|cell--cell-active/.test(selector)) return bg ? 'row-bg-active' : 'fg';
+	if (/header/.test(selector)) return bg ? 'header-bg' : 'header-fg';
+	if (/group-row|node-tool|tree/.test(selector)) return bg ? 'tree-bg' : 'tree-fg';
+	if (/row--odd/.test(selector)) return bg ? 'row-bg-odd' : 'fg';
+	if (/row--even|row--no-zebra/.test(selector)) return bg ? 'row-bg-even' : 'fg';
+	return bg ? 'bg' : /fill|stroke/.test(prop) ? 'muted-fg' : 'fg';
+}
+let css = '/* Token overrides for Inovua 5.10.2. Generated by config/generate-theme.cjs.\n * index.css retains layout and icons. Public tokens are inherited; preset tokens\n * are fallback implementation details. Do not set public defaults on the root. */\n';
+for (const [index, selector] of [[0, '.azgrid-scope, .azgrid, .azgrid-theme-light'], [1, '.azgrid-theme-dark']]) {
+	css += `${selector} {\n`;
+	for (const [name, values] of Object.entries(tokens)) css += `\t--azgrid-preset-${name}: ${values[index]};\n`;
+	css += '}\n\n';
+}
+const upstream = postcss.parse(fs.readFileSync('node_modules/@inovua/reactdatagrid-enterprise/index.css', 'utf8'));
+upstream.walkRules(rule => {
+	if (!rule.selector || rule.parent.type === 'atrule') return;
+	const declarations = [];
+	for (const d of rule.nodes) {
+		// The configurable first-row border is supplied in theme-extras.css.
+		if (/__row--first /.test(rule.selector) && d.prop === 'border-top') continue;
+		if (d.type !== 'decl' || !/^(color|background.*|.*border.*|outline.*|fill|stroke|.*shadow|font-family)$/.test(d.prop)) continue;
+		let value = d.value.replace(colour, literal => variable(tokenFor(rule.selector, d.prop, literal.toLowerCase())));
+		if (/^border(?:-(?:top|right|bottom|left))?$|^border.*width$/.test(d.prop)
+			&& /\.InovuaReactDataGrid__cell(?=[\s.:]|$)/.test(rule.selector)
+			&& !/selection/.test(rule.selector)) {
+			value = value.replace(/\b\d*\.?\d+(?:px|em|rem)\b/g, variable('cell-border-width'));
+		}
+		if (d.prop === 'font-family') value = variable('font-family');
+		if (value === d.value) continue;
+		if (d.important) declarations.push('\t/* Inovua declares this border !important; specificity cannot override it. */');
+		declarations.push(`\t${d.prop}: ${value}${d.important ? ' !important' : ''};`);
+	}
+	if (!declarations.length) return;
+	const selectors = rule.selectors.map(selector => selector.startsWith('.InovuaReactDataGrid--') || /^\.InovuaReactDataGrid(?=[\s.:#>]|$)/.test(selector)
+		? '.azgrid' + selector : '.azgrid-scope ' + selector);
+	css += `${selectors.join(',\n')} {\n${declarations.join('\n')}\n}\n\n`;
+});
+css += fs.readFileSync('config/theme-extras.css', 'utf8');
+fs.writeFileSync('src/themes/azgrid-theme.css', css);
+// The same manifest supplies the complete public API table in the README.
+const readme = fs.readFileSync('README.md', 'utf8');
+const table = '| Variable | Controls | Light / dark fallback |\n| --- | --- | --- |\n' + Object.entries(tokens).map(([name, values]) => `| \`--azgrid-${name}\` | ${values[2]} | ${values[0] === values[1] ? `\`${values[0]}\`` : `\`${values[0]}\` / \`${values[1]}\``} |`).join('\n');
+fs.writeFileSync('README.md', readme
+	.replace(/<!-- azgrid-tokens -->[\s\S]*?<!-- \/azgrid-tokens -->/, `<!-- azgrid-tokens -->\n${table}\n<!-- /azgrid-tokens -->`)
+	.replace(/<!-- azgrid-deco -->[\s\S]*?<!-- \/azgrid-deco -->/, '<!-- azgrid-deco -->\n```css\n' + fs.readFileSync('src/themes/example-palettes.css', 'utf8') + '\n```\n<!-- /azgrid-deco -->'));

package/config/theme-extras.css

@@ -0,0 +1,107 @@
+/* Additional surfaces and typography not assigned colours by Inovua. */
+.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
+	background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
+}
+.azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
+.azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
+	background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
+	color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
+}
+.azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
+.azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
+	fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
+}
+.azgrid.InovuaReactDataGrid {
+	background: var(--azgrid-bg, var(--azgrid-preset-bg));
+	color: var(--azgrid-fg, var(--azgrid-preset-fg));
+	border-color: var(--azgrid-border, var(--azgrid-preset-border));
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
+}
+.azgrid .InovuaReactDataGrid__column-header__content,
+.azgrid .InovuaReactDataGrid__header-group__title {
+	color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
+	font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
+	font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
+	text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
+	letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
+	border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
+	/* Inovua's first-row border-top is !important. Keep the same border API on this row. */
+	border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
+	padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
+}
+.azgrid .InovuaReactDataGrid__empty-wrapper {
+	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
+	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
+	background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
+}
+.azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
+.azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
+	box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
+}
+.azgrid-scope input,
+.azgrid-scope select,
+.azgrid-scope .azgrid-searcharea {
+	color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
+	background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
+	border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
+}
+.azgrid-scope input::placeholder {
+	color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
+}
+.azgrid-scope input:focus-visible,
+.azgrid-scope select:focus-visible {
+	outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
+}
+.azgrid-scope .inovua-react-pagination-toolbar input,
+.azgrid-scope .inovua-react-pagination-toolbar select {
+	background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
+	color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
+	border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
+}
+.azgrid-scope .inovua-react-toolkit-text-input,
+.azgrid-scope .inovua-react-toolkit-combo-box,
+.azgrid-scope .inovua-react-toolkit-menu {
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+}
+/* Three classes exceed MUI's generated Paper/MenuItem selector specificity. */
+.azgrid-scope .azgrid-context-menu.MuiPaper-root {
+	background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
+	color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
+	border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	box-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
+	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
+}
+.azgrid-scope .azgrid-context-menu .MuiTypography-root,
+.azgrid-scope .azgrid-context-menu .MuiMenuItem-root {
+	color: inherit;
+	font-family: inherit;
+}
+.azgrid-scope .azgrid-context-menu .MuiMenuItem-root:hover,
+.azgrid-scope .azgrid-context-menu .MuiMenuItem-root.Mui-focusVisible {
+	background: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
+}
+.azgrid-scope, .azgrid-scope * {
+	accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
+	scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
+}
+.azgrid-scope ::-webkit-scrollbar-track {
+	background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
+}
+.azgrid-scope ::-webkit-scrollbar-thumb {
+	background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
+}
+.azgrid .InovuaReactDataGrid__row.deleted:after {
+	border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
+}

package/dist/src/example.d.ts

@@ -1,4 +1,6 @@
 export * from './views/DataGrid';
 import React from 'react';
+import './themes/azgrid-theme.css';
+import './themes/example-palettes.css';
 export declare function ExampleGrid(): React.JSX.Element;
 export default ExampleGrid;

package/dist/src/example.js

@@ -21,9 +21,10 @@ Object.keys(_DataGrid).forEach(function (key) {
   });
 });
 var _react = _interopRequireDefault(require("react"));
+require("./themes/azgrid-theme.css");
+require("./themes/example-palettes.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const columns = [{
   name: 'name',
   title: 'Name',
@@ -139,9 +140,24 @@ function ExampleGrid() {
       content: product.name
     }];
   }, []);
-  return _react.default.createElement(_DataGrid.default, {
+  return _react.default.createElement("div", {
+    style: {
+      display: 'grid',
+      gap: 20,
+      height: '100%',
+      overflow: 'auto'
+    }
+  }, ['light', 'dark', 'deco'].map(theme => _react.default.createElement("section", {
+    key: theme,
+    className: theme === 'deco' ? 'azgrid-example-deco' : undefined,
+    style: {
+      height: 360,
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, _react.default.createElement("h3", null, theme === 'deco' ? 'Art Deco (host variables)' : `Default ${theme}`), _react.default.createElement(_DataGrid.default, {
+    theme: theme,
     delayedSize: true,
-    dark: true,
     // details_dataSource={details_dataSource}
     dataSource: dataSource,
     details_columns: columns,
@@ -159,6 +175,17 @@ function ExampleGrid() {
     advancedFilterFields: ['name'],
     // leftColumns={leftColumns}
     gridOptions: {
+      defaultFilterValue: [{
+        name: 'name',
+        operator: 'contains',
+        type: 'string',
+        value: ''
+      }],
+      pagination: 'local',
+      defaultLimit: 10,
+      pageSizes: [10, 25, 50],
+      checkboxColumn: true,
+      multiSelect: true
       // defaultFilterValue: filterValue,
       // remoteFilter: false,
       // multiSelect: true,
@@ -169,6 +196,6 @@ function ExampleGrid() {
       // rowIndexColumn: true,
       // checkboxColumn: true,
     }
-  });
+  }))));
 }
 var _default = exports.default = ExampleGrid;

package/dist/src/index.js

@@ -59,17 +59,18 @@ Object.keys(_types).forEach(function (key) {
   });
 });
 var _func_grid = require("./func/func_grid");
-var _example = _interopRequireDefault(require("./example"));
 var _react = _interopRequireDefault(require("react"));
 var _client = _interopRequireDefault(require("react-dom/client"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /* -------------------------------------------------------------------------- */
 //
 var _default = exports.default = _DataGrid.default;
-const testroot = document.getElementById('testroot');
+const testroot = typeof document === 'undefined' ? null : document.getElementById('testroot');
 if (testroot) {
-  const root = _client.default.createRoot(document.getElementById('testroot'));
-  root.render(_react.default.createElement(_example.default, null));
+  const root = _client.default.createRoot(testroot);
+  // Example styles, including the optional token theme, load only for the demo.
+  Promise.resolve().then(() => _interopRequireWildcard(require('./example'))).then(({
+    default: ExampleGrid
+  }) => root.render(_react.default.createElement(ExampleGrid, null)));
 }