@cdmx/wappler_ag_grid 2.1.7 → 2.1.8

package/tests/FINDINGS.md

@@ -0,0 +1,229 @@
+# AG Grid Wappler · Test Run Findings
+
+Latest run: **2026-05-27** · all 14 scenarios PASS against the unmodified
+`dmx-ag-grid.js` v2.1.4 · driven by puppeteer-core against system Chrome
+(`tests/run-all-puppeteer.cjs`). Scenario 13 now performs 11 colour-pixel
+assertions that verify every `rstyles` condition form added in commit
+[42ec4a8](../dmx-ag-grid.js) actually applies the expected number of coloured
+rows.
+
+The suite is intentionally tolerant: it verifies that each grid mounts, gets
+data, and renders rows. The state-flag observability bug below means only one
+of the three `onGrid*` flags is visible at a time, so the runner accepts any of
+them as proof the grid mounted.
+
+## Summary
+
+| # | Scenario | Status | Grids verified |
+|---|---|---|---|
+| 01 | basic-render          | PASS | 1 grid, 25 rows, 10 visible (paged) |
+| 02 | themes-locale         | PASS | 9 grids — Alpine/Balham/Material/Quartz/Custom/Dark/HE/RU/ES |
+| 03 | editing               | PASS | cell + row + static-select editors |
+| 04 | selection             | PASS | multi-row + single-row, checkbox + status events |
+| 05 | action-buttons        | PASS | edit/view/delete + button1..5 + condition |
+| 06 | export                | PASS | CSV/XLSX/PDF + no-export fallback |
+| 07 | import                | PASS | empty grid waiting for file upload (expectEmpty) |
+| 08 | formatting            | PASS | amount, date, ctypes, cnames, cwidths, wrap |
+| 09 | grouping              | PASS | group_config + columns_to_sum + columns_to_count |
+| 10 | state-persistence     | PASS | column state save + filter apply/clear |
+| 11 | layout                | PASS | autoHeight, fixed_header offset, horizontal scroll |
+| 12 | methods               | PASS | every imperative method exposed as a button |
+| 13 | flags-styles          | PASS | suppress_*, hide_filters, **rstyles ×6 forms (asserted)**, cstyles area:text/cell, data_changes |
+| 14 | compact-view          | PASS | compact_view + buttons 6–15 + class toggles |
+
+Full per-grid state and DOM-row counts are in `tests/findings.json`.
+
+## rstyles coverage for 2.1.4 (commit 42ec4a8)
+
+Scenario 13 now exercises the full condition matrix introduced by
+"feat: enhance row color formatting with dynamic conditions" and asserts the
+expected number of coloured rows in the DOM:
+
+| Form | Test grid | Sample config | Hand-derived count | Asserted? |
+|---|---|---|---|---|
+| Function — `myFn()` | `rsFn` | `{condition:'isRowVip()'}` (window-scoped) | 3 (rating≥4.7 & active) | ✓ |
+| Value/operator `>` | `rsOp` | `{condition:'salary > 90000'}` | 7 | ✓ |
+| Value/operator `<=` (2.1.4 parser fix) | `rsOp` | `{condition:'salary <= 65000'}` | 5 | ✓ |
+| Compound `&&` | `rsCompound` | `{condition:'active == true && department == Engineering'}` | 7 | ✓ |
+| Field + plain-value shorthand | `rsShort` | `{field:'department', condition:'Marketing'}` | 5 | ✓ |
+| First match wins | `rsFirst` | `[{>95000→orange}, {>90000→yellow}]` | 5 orange / 2 yellow | ✓ |
+| Legacy object form (backwards compat) | `rsLegacy` | `{sales:{…}, hr:{…}}` set programmatically | 5 / 4 | ✓ |
+| cstyles area:text with `>=` | `csCell` | `{field:'salary', condition:'salary >= 90000', area:'text'}` | 7 | ✓ |
+| cstyles area:cell with `<=` | `csCell` | `{field:'salary', condition:'salary <= 65000', area:'cell'}` | 5 | ✓ |
+
+### Real finding from this work
+
+**`rstyles` legacy object form is unreachable via `dmx-bind:`.** The 2.1.4 rewrite
+explicitly added a backwards-compat branch:
+```js
+const styles = Array.isArray(rstyles)
+  ? rstyles
+  : (rstyles && typeof rstyles === 'object' ? Object.values(rstyles) : []);
+```
+…but the schema is `rstyles: { type: Array, default: [] }`, and AppConnect's
+type coercion drops every key of an object-shaped binding value, so the runtime
+receives `[]` and the legacy branch is dead code. The branch only fires when
+`rstyles` is set programmatically (e.g. `component.props.rstyles = {…}` then
+`refreshGrid()`), which is what `rsLegacy` does to verify the branch still
+works. Worth either changing the schema to `Object` to make the binding path
+work, or removing the legacy branch.
+
+## Bugs observed in dmx-ag-grid.js
+
+The user reverted my proposed patches so the tests run against the production
+file as-is. These are the issues the suite surfaces — listed for the maintainer
+to decide whether to patch.
+
+### 1. `set('state', ...)` overwrites previous state flags
+
+**Where:** [dmx-ag-grid.js:1924-1930](../dmx-ag-grid.js#L1924-L1930)
+
+```js
+onGridReady:        () => this.set("state", { gridReady: true }),
+onFirstDataRendered:() => this.set("state", { firstDataRendered: true }),
+onRowDataUpdated:   () => this.set("state", { rowDataUpdated: true }),
+```
+
+Each call **replaces** the entire `state` object instead of merging. After all
+three fire, only `{ rowDataUpdated: true }` (or whichever fired last) is
+observable in the binding `grid.state.*`. The other two flags are lost.
+
+**Visible in the test output:** every passing grid now shows
+`state={"firstDataRendered":true}` — but the 09-grouping `aggGrid` shows
+`state={"rowDataUpdated":true}` because its data refresh fires last. Wappler
+templates that bind `dmx-show="grid.state.gridReady"` will flicker on and
+disappear.
+
+**Suggested fix (1 line × 3):**
+```js
+this.set("state", Object.assign({}, this.data.state, { gridReady: true }));
+// …same pattern for firstDataRendered, rowDataUpdated
+```
+
+---
+
+### 2. `cwidths[key]` with a non-object value freezes the page
+
+**Where:** [dmx-ag-grid.js:1637-1640](../dmx-ag-grid.js#L1637-L1640)
+
+```js
+...(cwidths.hasOwnProperty(key) && {
+  minWidth: parseInt(cwidths[key].min_width),   // NaN if cwidths[key] is a number
+  maxWidth: parseInt(cwidths[key].max_width),
+}),
+```
+
+The expected shape is `{ field: { min_width: N, max_width: M } }`. A user
+naturally typing `{ first_name: 120 }` (which matches the type declaration
+`Object` and feels intuitive) makes `parseInt(undefined) === NaN`. AG Grid then
+enters an infinite layout loop and **hangs the entire JS thread** — no console
+error, no recovery, just a frozen page.
+
+The 08-formatting scenario originally failed this way; the test page now uses
+the documented shape so it passes. But any real user typing a number will hit
+this.
+
+**Suggested fix:**
+```js
+...(cwidths.hasOwnProperty(key) && cwidths[key] && typeof cwidths[key] === 'object' && {
+  ...(Number.isFinite(parseInt(cwidths[key].min_width)) && { minWidth: parseInt(cwidths[key].min_width) }),
+  ...(Number.isFinite(parseInt(cwidths[key].max_width)) && { maxWidth: parseInt(cwidths[key].max_width) })
+}),
+```
+
+---
+
+### 3. `columns_to_count` entries assumed to be objects, crash on strings
+
+**Where:** [dmx-ag-grid.js:2007-2009](../dmx-ag-grid.js#L2007-L2009)
+
+```js
+columnsToCount.forEach(function (colObj) {
+  const col = colObj.field;
+  const uniqueValuesToCount = new Set(colObj.unique_values.split(','));  // crash if colObj is a string
+```
+
+The attribute is declared `type: Array, default: []` which suggests an array of
+column names — but each entry must actually be `{field, unique_values}`. Passing
+`['customer']` throws "Cannot read properties of undefined (reading 'split')".
+
+**Suggested fix:** validate + warn on malformed entries.
+
+---
+
+### 4. `action_button_class_toggles` entries crash on bad shape
+
+**Where:** [dmx-ag-grid.js:782, 787](../dmx-ag-grid.js#L782)
+
+```js
+if (toggle.btn_id.toLowerCase() === buttonConfig.id && ...) // crash if btn_id missing
+button.classList.add(...toggle.class.split(' '));            // crash if class missing
+```
+
+No type guards on the toggle entries. The expected shape is
+`{btn_id, condition, class}` but mis-shaped entries trigger
+"Cannot read properties of undefined".
+
+**Suggested fix:** validate `btn_id` and `class` are strings before using them.
+
+---
+
+### 5. No initial render when bound `data` is already populated at mount time
+
+**Where:** [dmx-ag-grid.js:2985-3015](../dmx-ag-grid.js#L2985-L3015) — `requestUpdate`
+
+`requestUpdate('data', oldValue)` is the only path that calls `refreshGrid()`.
+If `data` is already at its final value when the component mounts (i.e. the
+binding resolved synchronously before init), no `data` change event fires after
+mount and `refreshGrid()` never runs — the grid stays empty.
+
+In production Wappler apps this is masked because `serverConnect` data arrives
+**after** mount. Static fixtures hit it.
+
+**Workaround in the test suite:** `<dmx-test-data>` defers its `set('value', …)`
+to `dmx.nextTick` so the grid sees a transition from `[]` → `[…]`. See
+[tests/lib/test-helpers.js:24-31](lib/test-helpers.js#L24-L31).
+
+**Suggested upstream fix:** in `init(node)`, if `this.props.data?.length`, call
+`this.refreshGrid()` once. One line, in one place.
+
+## Schema-shape gotchas (worth documenting in components.hjson help text)
+
+- `cstatic_select_editors` — `{ field: { options: '<JSON-string>' } }` where
+  `options` is a **string** that parses to an object whose keys are the dropdown
+  values. Not an array.
+- `cdynamic_select_editors` — `{ field: { options_field: 'someRowField' } }`.
+- `cwidths` — `{ field: { min_width, max_width } }`. Plain numbers freeze the page.
+- `columns_to_count` — array of `{ field, unique_values: csv-string }`. Not array of strings.
+- `action_button_class_toggles` — array of `{ btn_id, condition, class }`. Not `button`/`class_when_true`.
+
+## Test-helper observation (not a module bug)
+
+`dmx.app.get(id)` in AppConnect 2.2.4 returns a **reactive-data proxy**, not the
+component instance. Direct field access (`g.state`, `g.count`) works; methods
+are exposed as `__methodName` (`__loadGrid`, `__reloadGrid`); calling `g.get(...)`
+throws "g.get is not a function". `tests/lib/test-helpers.js` documents this
+and exposes a friendlier `TestKit.callMethod('id', 'methodName', ...args)`.
+
+## Test infrastructure
+
+- [tests/run-all-puppeteer.cjs](run-all-puppeteer.cjs) — headless Chrome driver
+  via `puppeteer-core` against system Chrome. Recommended (~75 s for 14
+  scenarios, no daemon hassles).
+- [tests/run-all.cjs](run-all.cjs) — agent-browser CLI driver. Works on Windows
+  + Linux but its long-lived daemon can time out after ~7 heavy pages.
+- [tests/serve.cjs](serve.cjs) — static server (port 8765).
+
+## Files touched in this session
+
+**Test pages updated to use correct schemas:**
+- `tests/03-editing.html` — `cstatic_select_editors`
+- `tests/08-formatting.html` — `cwidths`
+- `tests/09-grouping.html` — `columns_to_count`
+- `tests/14-compact-view.html` — `action_button_class_toggles`
+
+**Test helpers:**
+- `tests/lib/test-helpers.js` — defer `<dmx-test-data>` set, TestKit uses direct field access
+- `tests/lib/page-template.js` — readiness signal accepts any state flag
+
+**Module (`dmx-ag-grid.js`):** reverted by user — runs as-shipped.

package/tests/README.md

@@ -18,6 +18,10 @@ node tests/serve.cjs                 # http://localhost:8765/tests/index.html
 node tests/run-all-puppeteer.cjs
 #    alternative — drives the agent-browser CLI (Windows + Linux):
 node tests/run-all.cjs
+
+# 3. CSP: print the style-src hash allow-list AG Grid + the module need, and
+#    (--verify) reload every scenario under that header. Starts its own server.
+node tests/csp-hashes.cjs --verify
 ```
 
 Both produce the same `tests/findings.json` and per-page status table.
@@ -50,9 +54,11 @@ tests/
 ├── 12-methods.html              ← every imperative method as a button
 ├── 13-flags-styles.html         ← suppress_*, rstyles, cstyles, data_changes
 ├── 14-compact-view.html         ← compact_view + buttons 6–15
+├── 15-csp.html                  ← nonce-only style-src, no 'unsafe-inline' (__cspCheck)
 ├── serve.cjs                    ← cross-platform static server
 ├── run-all.cjs                  ← agent-browser CLI driver (cross-platform)
 ├── run-all-puppeteer.cjs        ← headless Chrome driver (recommended)
+├── csp-hashes.cjs               ← CSP style-src hash allow-list generator (+ --verify)
 ├── data/
 │   └── sample-data.js           ← employees + orders fixtures
 ├── dmxAppConnect/

package/tests/VERSIONS.json

@@ -0,0 +1,29 @@
+{
+  "$comment": "Versions this test suite was written against. Bump these and re-run the suite when any dependency changes.",
+  "module": {
+    "name": "@cdmx/wappler_ag_grid",
+    "version": "2.1.3"
+  },
+  "appConnect": {
+    "expected": "2.2.4",
+    "build": "2026-01-19 14:03:35",
+    "file": "./dmxAppConnect/dmxAppConnect.js",
+    "detect": "window.dmx && dmx.version"
+  },
+  "vendor": {
+    "ag-grid-community": "~35.1.0",
+    "@ag-grid-community/locale": "~35.1.0",
+    "papaparse": "~5.5.2",
+    "pdfmake": "~0.2.18",
+    "read-excel-file": "~5.8.7",
+    "exceljs": "^4.4.0"
+  },
+  "compatibility": {
+    "policy": "If dmxAppConnect.js is replaced with a newer build, the suite should keep working as long as the dmx.Component API surface and dmx-bind:* attribute parsing remain backwards-compatible.",
+    "smokeCheck": "Open tests/index.html; the AppConnect version pill in the header should match expected. If it drifts, run all scenarios and update this manifest.",
+    "knownRisks": [
+      "performUpdate vs requestUpdate lifecycle — the grid still uses requestUpdate; AppConnect must keep supporting the older form.",
+      "dmx-bind:* attribute parser — any change to expression parsing would break data binding in every scenario."
+    ]
+  }
+}

package/tests/csp-hashes.cjs

@@ -0,0 +1,191 @@
+// Prints the CSP `style-src` hash allow-list that AG Grid (the with-styles UMD bundle) and
+// dmx-ag-grid.js need, so a page can drop 'unsafe-inline' without touching the module.
+//
+//   node tests/csp-hashes.cjs            → directive + helmet array form on stdout
+//   node tests/csp-hashes.cjs --verify   → also reload every scenario page under that header;
+//                                          exit 1 on any AG Grid/module violation or broken grid
+//
+// Regenerate after ANY upgrade of ag-grid-community or dmx-ag-grid.js: the hashes are bound to
+// the exact bytes of the injected CSS. Chrome auto-detection is the same as run-all-puppeteer.cjs
+// (set PUPPETEER_EXECUTABLE_PATH to override).
+const fs = require('fs');
+const path = require('path');
+const http = require('http');
+const crypto = require('crypto');
+const puppeteer = require('puppeteer-core');
+
+const ROOT = path.resolve(__dirname, '..');
+const PORT = Number(process.env.AG_TEST_PORT) || 8766;
+const VERIFY = process.argv.includes('--verify');
+// ponytail: coverage = whatever these pages (plus poke() below) make AG Grid inject. A feature
+// outside the suite can need one more hash; add a scenario page for it and re-run.
+const PAGES = fs.readdirSync(__dirname).filter(f => /^\d\d-.*\.html$/.test(f)).sort();
+const MIME = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.map': 'application/json' };
+const sha = s => crypto.createHash('sha256').update(s, 'utf8').digest('base64');
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+function findChrome() {
+  if (process.env.PUPPETEER_EXECUTABLE_PATH) return process.env.PUPPETEER_EXECUTABLE_PATH;
+  const candidates = process.platform === 'win32' ? [
+    'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+    'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+    'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
+    'C:\\Users\\Roney\\.agent-browser\\browsers\\chrome-148.0.7778.97\\chrome.exe'
+  ] : process.platform === 'darwin' ? [
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Chromium.app/Contents/MacOS/Chromium'
+  ] : [
+    '/usr/bin/google-chrome',
+    '/usr/bin/chromium',
+    '/usr/bin/chromium-browser',
+    '/snap/bin/chromium'
+  ];
+  return candidates.find(p => fs.existsSync(p));
+}
+
+// Static server over the repo root (serve.cjs cannot set headers). `csp` is sent on HTML responses.
+let csp = null;
+const server = http.createServer((req, res) => {
+  const file = path.normalize(path.join(ROOT, decodeURIComponent(req.url.split('?')[0])));
+  if (!file.startsWith(ROOT)) { res.writeHead(403); return res.end(); }
+  fs.readFile(file, (err, buf) => {
+    if (err) { res.writeHead(404); return res.end('404'); }
+    const headers = { 'content-type': MIME[path.extname(file).toLowerCase()] || 'application/octet-stream', 'cache-control': 'no-store' };
+    if (csp && file.endsWith('.html')) headers['content-security-policy'] = csp;
+    res.writeHead(200, headers);
+    res.end(buf);
+  });
+});
+
+// <style> blocks written into the scenario pages themselves are the pages' business, not the list's.
+const pageOwned = new Set();
+for (const f of PAGES) {
+  for (const m of fs.readFileSync(path.join(__dirname, f), 'utf8').matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)) {
+    pageOwned.add(sha(m[1]));
+    pageOwned.add(sha(m[1].replace(/\r\n/g, '\n')));
+  }
+}
+
+// The module's three static blocks, hashed from source (template literals normalise CRLF to LF),
+// so they are listed even when no scenario switches the option on.
+function moduleBlocks() {
+  const src = fs.readFileSync(path.join(ROOT, 'dmx-ag-grid.js'), 'utf8');
+  const wanted = [
+    ['dmx-ag-grid.js cell centering', /styleElement\.textContent \+= `([\s\S]*?)`;/],
+    ['dmx-ag-grid.js sticky h-scroll', /styleElement\.innerHTML = `([\s\S]*?)`;/],
+    ['dmx-ag-grid.js pagination panel', /const paginationPanelCss = `([\s\S]*?)`;/]
+  ];
+  const out = [];
+  for (const [tag, re] of wanted) {
+    const m = src.match(re);
+    if (m) out.push({ hash: sha(m[1].replace(/\r\n/g, '\n')), tag, len: m[1].length });
+    else console.warn('warning: "' + tag + '" block not found in dmx-ag-grid.js — the module changed; check the runtime <style> blocks');
+  }
+  return out;
+}
+
+// Best-effort clicks so AG Grid also injects the CSS of lazily created parts (menus, popups, editors).
+async function poke(page) {
+  const steps = [
+    async () => { await (await page.$('.ag-header-cell')).hover(); await sleep(150); await (await page.$('.ag-header-cell-menu-button')).click(); },
+    async () => { await (await page.$('.ag-floating-filter-button-button')).click(); },
+    async () => { await (await page.$('.ag-cell')).click({ clickCount: 2 }); },
+    async () => { await (await page.$('.ag-header-cell-label')).click(); },
+    async () => { await (await page.$('.ag-paging-button[data-ref="btNext"]')).click(); }
+  ];
+  for (const step of steps) {
+    try { await step(); await sleep(300); await page.keyboard.press('Escape'); } catch (_) { /* element absent on this page */ }
+  }
+}
+
+async function load(browser, file, policy) {
+  csp = policy;
+  const page = await browser.newPage();
+  page.setDefaultTimeout(30000);
+  const demanded = new Set(); // hashes Chrome names in its CSP console errors
+  page.on('console', m => {
+    const t = m.text();
+    if (/Content Security Policy/.test(t)) (t.match(/sha256-[A-Za-z0-9+/=]+/g) || []).forEach(h => demanded.add(h.slice(7)));
+  });
+  await page.evaluateOnNewDocument(() => {
+    window.__cspv = [];
+    window.__styles = new Map(); // text → origin
+    document.addEventListener('securitypolicyviolation', e => window.__cspv.push({ directive: e.violatedDirective, src: (e.sourceFile || '').split('/').pop() }));
+    const rec = el => {
+      if (!el || el.nodeType !== 1 || el.tagName !== 'STYLE' || window.__styles.has(el.textContent)) return;
+      window.__styles.set(el.textContent, el.getAttribute('data-ag-scope') ? 'ag-grid bundle (style-loader)' : el.dataset.agGlobalCss ? 'ag-grid theming api' : 'other');
+    };
+    new MutationObserver(ms => {
+      for (const m of ms) {
+        if (m.type === 'characterData') { rec(m.target.parentElement); continue; }
+        rec(m.target);
+        m.addedNodes.forEach(n => {
+          if (n.nodeType === 1) { rec(n); n.querySelectorAll && n.querySelectorAll('style').forEach(rec); }
+          else if (n.nodeType === 3) rec(n.parentElement);
+        });
+      }
+    }).observe(document, { childList: true, subtree: true, characterData: true });
+  });
+  await page.goto('http://127.0.0.1:' + PORT + '/tests/' + file, { waitUntil: 'domcontentloaded' });
+  try { await page.waitForFunction(() => document.body.dataset.gridsReady === 'true', { timeout: 8000 }); } catch (_) { /* empty-grid pages never set it */ }
+  await sleep(500);
+  await poke(page);
+  await sleep(400);
+  const result = await page.evaluate(() => {
+    document.querySelectorAll('style').forEach(s => { if (!window.__styles.has(s.textContent)) window.__styles.set(s.textContent, s.dataset.agGlobalCss ? 'ag-grid theming api' : 'other'); });
+    const grids = {};
+    document.querySelectorAll('dmx-ag-grid').forEach(g => { const w = document.querySelector('#' + g.id + '-grid .ag-root-wrapper'); grids[g.id] = w ? getComputedStyle(w).display : 'n/a'; });
+    return { styles: [...window.__styles.entries()], violations: window.__cspv, grids };
+  });
+  await page.close();
+  return { ...result, demanded: [...demanded] };
+}
+
+(async () => {
+  const exe = findChrome();
+  if (!exe) { console.error('No Chrome executable found — set PUPPETEER_EXECUTABLE_PATH'); process.exit(2); }
+  await new Promise(r => server.listen(PORT, '127.0.0.1', r));
+  const browser = await puppeteer.launch({ executablePath: exe, headless: 'new', args: ['--no-sandbox', '--disable-dev-shm-usage'] });
+
+  // 1. Harvest every <style> text the pages ever hold.
+  const blocks = new Map(); // hash → { tag, len }
+  for (const b of moduleBlocks()) blocks.set(b.hash, { tag: b.tag, len: b.len });
+  blocks.set(sha(''), { tag: 'empty <style> (style-loader inserts it empty, then fills it)', len: 0 });
+  for (const f of PAGES) {
+    for (const [text, tag] of (await load(browser, f, null)).styles) {
+      const h = sha(text);
+      if (!blocks.has(h) && !pageOwned.has(h)) blocks.set(h, { tag, len: text.length });
+    }
+  }
+  for (const [h, b] of blocks) if (b.tag === 'other') console.warn('note: allowing an unattributed <style> block of ' + b.len + ' chars: ' + h);
+
+  const rank = t => /^dmx-ag-grid/.test(t) ? 0 : /^empty/.test(t) ? 1 : /bundle/.test(t) ? 2 : /theming/.test(t) ? 3 : 4;
+  const ordered = [...blocks.entries()].sort((a, b) => rank(a[1].tag) - rank(b[1].tag) || a[0].localeCompare(b[0]));
+  const sources = ordered.map(([h]) => "'sha256-" + h + "'");
+  const directive = "style-src 'self' " + sources.join(' ');
+  const groups = ['dmx-ag-grid.js', 'empty', 'ag-grid bundle', 'ag-grid theming api', 'other'];
+  const counts = {};
+  for (const [, b] of ordered) counts[groups[rank(b.tag)]] = (counts[groups[rank(b.tag)]] || 0) + 1;
+  console.log('# ' + blocks.size + ' hashes ' + JSON.stringify(counts) + ' — also needed: img-src \'self\' data:; font-src \'self\' data:');
+  console.log(directive + '\n');
+  console.log('# helmet: styleSrc: ' + JSON.stringify(["'self'", ...sources]) + '\n');
+
+  // 2. Verify: every page under the header, no AG Grid/module violation, every grid laid out.
+  let failed = 0;
+  if (VERIFY) {
+    const header = directive + "; font-src 'self' data:; img-src 'self' data:";
+    for (const f of PAGES) {
+      const r = await load(browser, f, header);
+      const ours = r.violations.filter(v => !/^\d\d-.*\.html$/.test(v.src)); // the pages' own style= / <style> are excluded
+      const broken = Object.entries(r.grids).filter(([, d]) => d !== 'flex' && d !== 'n/a').map(([id]) => id);
+      const ok = !ours.length && !broken.length;
+      if (!ok) failed++;
+      console.log((ok ? 'PASS ' : 'FAIL ') + f.padEnd(28) + ' ag-grid/module violations=' + ours.length + ' broken grids=' + JSON.stringify(broken));
+      if (ours.length) console.log('     hashes Chrome asked for: ' + r.demanded.join(', '));
+    }
+    console.log(failed ? '\n' + failed + ' page(s) failed under the hash-only policy' : '\nall ' + PAGES.length + ' pages pass under the hash-only policy');
+  }
+  await browser.close();
+  server.close();
+  process.exit(failed ? 1 : 0);
+})().catch(e => { console.error(e); process.exit(1); });