zz-meridian 0.25.1 → 0.26.0

package/dist/migrations.js

@@ -470,6 +470,14 @@ export const RELEASE_MIGRATIONS = [
         instructions: 'Bring `tests/column-chart-no-data.test.tsx` over from the release as it has it. Since 0.19.0 `src/components/charts/column-chart/index.tsx` draws no column for a `null` period: its box has no height, a dashed hairline (`data-no-data-mark`) keeps the slot, and the word stands over it, because the track was the tallest mark on the chart. A test of your own that finds `.bg-fill-track` or `[data-track]` in a no-data column finds `[data-no-data-mark]` instead.',
         checks: ['gate'],
     },
+    {
+        id: 'table-grid',
+        since: '0.26.0',
+        applies: (root) => matching(root, (rel, src) => importsOf(rel, src).some(({ from }) => from === 'src/components/ui/table' || from === 'src/components/patterns/data-table') && (/@min-\[672px\]:min-w-64/.test(src) || /<TableCell\b[^>]*\bcolSpan\s*=/.test(src))),
+        summary: 'A table is a grid since 0.26.0: its spare width sits in the gaps, a `grow` column\'s floor is 160px at every width, and a cell spans no columns.',
+        instructions: 'Bring `tests/table-cut-cell.test.tsx` over from the release as it has it. Since 0.26.0 `src/components/ui/table/index.tsx` lays a table out as a grid whose rows are subgrids: every column is as wide as its content, the spare is shared equally between the gaps, and a `grow` column\'s floor is `min-w-40` at every width, without the `@min-[672px]:min-w-64` it had from a 672px table. A test of your own that expects that class expects `min-w-40` alone. A `TableCell` of your own with a `colSpan` takes one track of the grid, so it draws in the first column only: a row that should run the width of the table, such as an empty state, is drawn outside the table, or as a `DataTable` `empty`.',
+        checks: ['gate'],
+    },
 ];
 /**
  * A test of the rail that stands over a fake `ResizeObserver` answering `observe` with nothing (0.16.2). The lookbehind

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "description": "Bring ZZ Meridian, a dashboard design system, into a Next.js project, or start a new dashboard on it. Copies the files in; nothing depends on this package at runtime.",
   "license": "MIT",
   "type": "module",

package/payload/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 Every release of ZZ Meridian, newest first. Versions follow semver: a removed or renamed token, prop or card is major; a new card, token or variant is minor; a corrected value is a patch. Each entry says what breaks and what to do instead.
 
+## [0.26.0] · 2026-10-22
+
+### Breaking
+
+- **A table puts its spare width in the gaps between its columns, an equal share in each.** `Table` is laid out as a CSS grid now, not by the table algorithm. Every column is as wide as its content. `justify-content: space-between` spreads the spare across the gaps, so every gap is the same whatever each column's alignment. In 0.25 the table algorithm put a column's spare inside the column, after a left-aligned value and before a right-aligned one. So a gap between a text column and a number held both columns' shares, and the gap after the number held none. Measured from the ink of one column to the ink of the next at 1920px, the gaps on /customers, /members and /tests now vary by 0 to 3% (a coefficient of variation of 0.00 to 0.03), against 42 to 53% in 0.25.1.
+  - **Rows are subgrids** of the table's columns, so a row's border, its hover and its selection run across the gaps. The header row carries the sunk background and the rules.
+  - **The table counts its columns** from the cells of its first row as its own JSX writes them: the head's `TableHeader` cells when it has a head, otherwise the first row's `TableCell` cells. It counts one track per column at each `hideBelow` step. Write that row's cells in the table's own JSX, not inside a component of your own, or the table cannot count them.
+  - **Cells are blocks in a grid.** A cell no longer sets the row height or centres itself: the row is at least `--row-height` tall and centres its cells. A cell you styled as a table cell (`align-middle`, a fixed height, a `colSpan`) is now laid out by its row; drop those classes.
+  - **The `grow` floor is 160px at every width.** It was 256px from a 672px table. A floor is also a width the column claims when its names are shorter, so the gap after the lead was half as wide again as every other gap.
+  - **A text column after a number no longer takes extra left padding** (`pl-8`). With equal gaps it made one gap wider than the rest.
+  - **`DataTable`'s selection checkbox sits over the lead column's left padding**, not in a column of its own, so no gap stands between a checkbox and the name it selects. It is still its own cell, first in the row, marked `data-check`. The table does not count it.
+  - **`update` lists `migration:table-grid`** for a project whose own files expect the old floor (`@min-[672px]:min-w-64`, as `tests/table-cut-cell.test.tsx` did in a project created before 0.26.0) or give a `TableCell` a `colSpan`, which a grid row draws in one track. Bring the release's `tests/table-cut-cell.test.tsx` over, and draw a row that spans the table, such as an empty state, outside it or as a `DataTable` `empty`.
+  - Rows, cells and row groups carry their ARIA roles (`row`, `cell`, `columnheader`, `rowgroup`, `table`), since a table laid out as a grid can lose its native semantics in some browsers.
+
+### New
+
+- **`pnpm verify --browsers <n>`: one run holds at most `n` browsers at once** ([#77](https://github.com/zhixuan312/zz-meridian/issues/77)).
+  - Without the flag, the ceiling is one browser per two CPUs and per 4 GiB of memory, whichever is fewer. `--full`'s audit, presses, keyboard walk and product checks start under the ceiling, not all at once.
+  - A check in `browserChecks` holds one browser, or the number its entry names: `{ script, browsers }`, the whole ceiling at most. It starts once that many are free and is told in `VERIFY_BROWSERS` how many it holds, so a check that pools browsers sizes its pool from that number, not from the machine. The sample's journey drives three people at once and declares `browsers: 3`.
+  - The trace header prints the ceiling used, for example `browsers: at most 5 at once (10 CPUs and 32 GiB)`.
+  - Without a ceiling, one run on a 32 GB laptop held about 70 Chrome processes and pushed the machine about 17 GB into swap.
+
 ## [0.25.1] · 2026-10-21
 
 ### Fixed

package/payload/docs/distribution.md

@@ -148,10 +148,10 @@ Two environment variables exist for the updater's own tests and are used only wh
 reports as `migration:<id>` because it cannot make them. An entry applies when the project's recorded version is older
 than its `since` and the target is not, and its `applies(root)` returns the paths that still have the old shape, or
 null. It only reads, and only team-owned files (the ownership rule's managed paths are skipped); a file it cannot read is
-absent. A project already on the new shape gets no line. Every entry carries `gate` and `build` as its checks (`verify-modes`, `agent-reads-section`, `nav-needs`, `agent-reads-own-group`, `agent-does-here-section`, `marker-measured-on-observe`, `view-page-matched-as-next`, `journey-moved`, `today-in-timezone`, `verify-tiers` and `no-data-mark`, `gate` alone), and its
+absent. A project already on the new shape gets no line. Every entry carries `gate` and `build` as its checks (`verify-modes`, `agent-reads-section`, `nav-needs`, `agent-reads-own-group`, `agent-does-here-section`, `marker-measured-on-observe`, `view-page-matched-as-next`, `journey-moved`, `today-in-timezone`, `verify-tiers`, `no-data-mark` and `table-grid`, `gate` alone), and its
 instructions name the section of a reference (`cache.md`, `live.md`, `validation.md`, `agents.md`, `customize.md`), of the Start guide or of `docs/assistant.md` to follow.
 
-Sixteen arrived after 0.5.0 and are resolved as the skill's `references/update.md` says: `share-view-context` and `agent-reads-section` (0.9.0), `assistant-view-tools` (0.10.0), `nav-needs` (0.13.0), `agent-reads-own-group` (0.15.0), `refusal-declared`, `managed-exports-removed`, `view-tool-page-explore`, `agent-does-here-section` and `sample-pages-renamed` (0.16.0), `marker-measured-on-observe` (0.16.2), `view-page-matched-as-next`, `journey-moved` and `today-in-timezone` (0.16.3), `verify-tiers` (0.17.0), and `no-data-mark` (0.19.0). The ten of 0.5.0 are:
+Seventeen arrived after 0.5.0 and are resolved as the skill's `references/update.md` says: `share-view-context` and `agent-reads-section` (0.9.0), `assistant-view-tools` (0.10.0), `nav-needs` (0.13.0), `agent-reads-own-group` (0.15.0), `refusal-declared`, `managed-exports-removed`, `view-tool-page-explore`, `agent-does-here-section` and `sample-pages-renamed` (0.16.0), `marker-measured-on-observe` (0.16.2), `view-page-matched-as-next`, `journey-moved` and `today-in-timezone` (0.16.3), `verify-tiers` (0.17.0), `no-data-mark` (0.19.0), and `table-grid` (0.26.0). The ten of 0.5.0 are:
 
 | Id | Reported when a team-owned file still has | Completion step |
 |----|-------------------------------------------|-----------------|

package/payload/docs/testing.md

@@ -34,6 +34,7 @@ A tier is when a check runs, ordered by speed and scope. The first four are one
 - **on request**: a command no tier runs, run at the moment `## When each runs` gives it. The combinations that exist:
   - `pnpm verify --perf` is the 20-sample navigation protocol, and the whole of it runs only in CI, split by route with `--shard <i>/<n>`, each shard on its own runner. It refuses to run elsewhere, and a shard runs alone or beside the other tiers. Locally, perf runs only narrowed, `node scripts/perf.ts --routes <route>`, to diagnose one route or to sample a recalibration.
   - `pnpm verify --as <persona>` signs the browser in as each persona it names (a comma-separated list), alone or beside `--full`. It is refused beside `--timed` or `--perf`, before anything runs.
+  - `pnpm verify --browsers <n>` holds at most `n` browsers at once in the complete tier. Without it the ceiling is one browser per two CPUs and per 4 GiB of memory, whichever is fewer, and the trace header prints the one a run used (`browsers: at most 5 at once (10 CPUs and 32 GiB)`). The audit, the presses and the keyboard walk take one each; a product check in `browserChecks` takes one, or the `browsers` its entry names (`{ script, browsers: 3 }`), the whole ceiling at most, and is told in `VERIFY_BROWSERS` how many it holds.
   - `node scripts/audit.ts --atlas` and `node scripts/vitals.ts --atlas` run against a served app, outside `pnpm verify`, over every Design Atlas entry.
   - The browser-fixture tests of the checks, `pnpm exec vitest run tests/deep- --no-file-parallelism`, run beside `pnpm verify --full` after a change to a check script. Meridian's repository only.
   - `node cli/scripts/smoke.ts --tarball <tarball>` is the consumer smoke, a packed tarball adopted, created and updated end to end. Meridian's repository only.

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "private": true,
   "license": "MIT",
   "description": "ZZ Meridian: a dashboard design system and starter. Six layers, from DTCG tokens through four layers of React components to product workspaces, and a Design Atlas, in a light and a dark theme.",

package/payload/scripts/check.ts

@@ -57,7 +57,7 @@ function walk(dir: string, ext: RegExp, out: string[] = []) {
 const css = read('src/styles/tokens.css') + read('src/styles/base.css') + read('src/styles/motion.css');
 const defined = new Set([...css.matchAll(/--([a-z0-9-]+)\s*:/g)].map((m) => m[1]));
 /** Local custom properties a component sets for itself, and the host's bridged variables. */
-const LOCAL = /^(i|w|m-len|readout-(cursor|width)|safe-(top|right|bottom|left)|font-face-(sans|mono)|color-[a-z-]+|border-radius-[a-z]+|tw-.*|radix-.*)$/;
+const LOCAL = /^(i|w|m-len|cols(-(xl|lg|md|sm))?|readout-(cursor|width)|safe-(top|right|bottom|left)|font-face-(sans|mono)|color-[a-z-]+|border-radius-[a-z]+|tw-.*|radix-.*)$/;
 
 // ── Cards ────────────────────────────────────────────────────────────────────────────────────────────
 const CARD_SECTIONS = ['## Surfaces', '## Agents', '## Accessibility'];

package/payload/scripts/lib/slots.ts

@@ -0,0 +1,34 @@
+/**
+ * A ceiling on how many browsers one verify run holds at once (#77). Each suite asks for the browsers it will open and
+ * starts when that many are free; one that asks for more than the ceiling is given the whole ceiling. Without it the
+ * browser suites all started together, and a product check that pools its own browsers added its pool on top.
+ */
+import os from 'node:os';
+
+/** What a machine can hold: one browser for every two CPUs and every 4 GiB of memory, whichever is fewer, and at least one. */
+export function browserCeiling(cpus = os.availableParallelism(), memory = os.totalmem()) {
+  return Math.max(1, Math.min(Math.floor(cpus / 2), Math.floor(memory / 2 ** 32)));
+}
+
+export function slots(ceiling: number) {
+  let free = ceiling;
+  const waiting: { want: number; go: () => void }[] = [];
+  const next = () => {
+    while (waiting.length && waiting[0].want <= free) {
+      const w = waiting.shift()!;
+      free -= w.want;
+      w.go();
+    }
+  };
+  /** Run `job` once `want` browsers are free, and free them when it ends, however it ends. */
+  return async function hold<T>(want: number, job: () => Promise<T>): Promise<T> {
+    const n = Math.max(1, Math.min(want, ceiling));
+    await new Promise<void>((go) => { waiting.push({ want: n, go }); next(); });
+    try {
+      return await job();
+    } finally {
+      free += n;
+      next();
+    }
+  };
+}

package/payload/scripts/verify.config.ts

@@ -73,9 +73,12 @@ type VerifyConfig = {
   allowRemoteData?: true;
   /**
    * The product's own browser checks, beside Meridian's audit, presses and keyboard walk: scripts verify runs with
-   * `--base <url>` against the built app, failing when one exits non-zero.
+   * `--base <url>` against the built app, failing when one exits non-zero. An entry is the script's path, for a check that
+   * opens one browser, or `{ script, browsers }` for one that opens more at once. Verify holds that many of the run's
+   * browsers (`--browsers`), the whole ceiling at most, while it runs, and tells it in `VERIFY_BROWSERS` how many that
+   * is: a check that pools browsers sizes its pool from it, not from the machine.
    */
-  browserChecks?: string[];
+  browserChecks?: (string | { script: string; browsers: number })[];
   /**
    * The product's own browser checks that judge a time, run by `pnpm verify --timed` alone and one at a time, after the
    * live data and before Web Vitals, each with `--base <url>` like `browserChecks`. A check that judges a time under the
@@ -154,8 +157,9 @@ const config: VerifyConfig = {
     '/customers/missing', // no customer has this id: the not-found screen in the shell
   ],
   smokeRoutes: ['/', '/requests', '/settings'],
-  // The sample's own journeys across its three workspaces, run beside the audit, the presses and the keyboard walk.
-  browserChecks: ['journeys/workspaces.ts'],
+  // The sample's own journeys across its three workspaces, run beside the audit, the presses and the keyboard walk; three
+  // people at once, so three browsers.
+  browserChecks: [{ script: 'journeys/workspaces.ts', browsers: 3 }],
   navigationChecks: [
     { path: '/', title: 'Home', readySelector: 'main table tbody tr', probe: 'toggle', controlSelector: 'main [role="radio"][aria-checked="false"]', resultSelector: 'main [role="radio"]' },
     { path: '/members', title: 'Members', readySelector: 'main table tbody tr', probe: 'toggle', controlSelector: 'main button[aria-haspopup="menu"]', resultSelector: '[role="menu"]' },

package/payload/scripts/verify.ts

@@ -16,6 +16,9 @@
  *                         and through the phone drawer, warm, cold and right after a live refresh, the p95 reported
  *                         The whole protocol runs only where CI is `true`, a share of it with `--shard <i>/<n>` (with --perf alone)
  *   pnpm verify --full --perf   the deep suites together; the gate and the build are shared, so each runs once
+ *   --browsers <n>        the most browsers the run holds at once (default: one per two CPUs and per 4 GiB of memory,
+ *                         whichever is fewer); --full's browser suites start under it, and a product check is told in
+ *                         VERIFY_BROWSERS how many it holds
  *
  * It prints one line per phase (`ok`, `warn`, `FAIL` or `not run`, and the seconds), then one coverage line saying what
  * ran and what did not, then the outcome. Nothing that did not run is reported as passed. The trace, with the commit, the
@@ -41,6 +44,7 @@ import net from 'node:net';
 import os from 'node:os';
 import path from 'node:path';
 
+import { browserCeiling, slots } from './lib/slots.ts';
 import { bin } from './lib/bin.ts';
 import { launch } from './lib/chrome.ts';
 import type { BudgetsConfig, NavigationCheck } from './lib/budgets.ts';
@@ -59,7 +63,7 @@ type VerifyConfig = BudgetsConfig & {
   noLiveApi?: true;
   dataUrls?: string[];
   allowRemoteData?: true;
-  browserChecks?: string[];
+  browserChecks?: (string | { script: string; browsers: number })[];
   timedChecks?: string[];
   fakeModel?: FakeModelStep[];
   navigationChecks?: NavigationCheck[];
@@ -70,17 +74,19 @@ type VerifyConfig = BudgetsConfig & {
 const config = verifyConfig as VerifyConfig;
 
 const ROOT = path.resolve(import.meta.dirname, '..');
-const OPTIONS = ['--full', '--timed', '--perf', '--as'];
+const OPTIONS = ['--full', '--timed', '--perf', '--as', '--browsers'];
 
-// `--as` is the one option that consumes the argument after it: a comma-separated persona list is its value, not a stray
-// argument. Every other argument must be a known option. An unknown option is refused here, before anything runs.
+// `--as` and `--browsers` consume the argument after them: a comma-separated persona list, a number of browsers. Every
+// other argument must be a known option. An unknown option is refused here, before anything runs.
 const argv = process.argv.slice(2);
 const unknown: string[] = [];
 let asList = '';
 let shardText: string | undefined;
+let browsersText: string | undefined;
 for (let i = 0; i < argv.length; i++) {
   const a = argv[i];
   if (a === '--as') { asList = argv[++i] ?? ''; continue; }
+  if (a === '--browsers') { browsersText = argv[++i] ?? ''; continue; }
   if (a === '--shard') { shardText = argv[++i] ?? ''; continue; }
   if (!OPTIONS.includes(a)) unknown.push(a);
 }
@@ -88,6 +94,13 @@ if (unknown.length) {
   console.error(`verify: ${unknown.join(', ')} ${unknown.length === 1 ? 'is not an option' : 'are not options'}. pnpm verify takes ${OPTIONS.join(', ')}.`);
   process.exit(1);
 }
+if (browsersText !== undefined && !/^[1-9]\d*$/.test(browsersText)) {
+  console.error(`verify: --browsers takes a whole number of browsers, at least 1, not "${browsersText}".`);
+  process.exit(1);
+}
+/** The most browsers this run holds at once: `--browsers`, or what the machine can hold. */
+const ceiling = browsersText ? Number(browsersText) : browserCeiling();
+const ceilingFrom = browsersText ? '--browsers' : `${os.availableParallelism()} CPUs and ${Math.round(os.totalmem() / 2 ** 30)} GiB`;
 const full = argv.includes('--full');
 const timed = argv.includes('--timed');
 const perf = argv.includes('--perf');
@@ -145,7 +158,8 @@ const hasAssistant = fs.existsSync(path.join(ROOT, APP_DIR, 'api/assistant/route
 // The stream itself is Meridian's, proven on the sample in Meridian's own runs; a product's own live pages prove
 // themselves through `browserChecks`.
 const hasLiveSample = sampleSurfaces(ROOT, APP_DIR).members;
-const own = config.browserChecks ?? [];
+/** Each product check with the browsers it opens at once: one, unless its entry says more. */
+const own = (config.browserChecks ?? []).map((c) => (typeof c === 'string' ? { script: c, browsers: 1 } : c));
 const ownTimed = config.timedChecks ?? [];
 const absent = new Set<string>([...(hasAssistant ? [] : ['assistant']), ...(hasLiveSample ? [] : ['live']), ...(own.length ? [] : ['browserChecks']), ...(ownTimed.length ? [] : ['timedChecks']), ...(perf ? [] : ['perf'])]);
 const SUITES = SUITE_NAMES.filter((name) => !absent.has(name));
@@ -203,6 +217,7 @@ function traceHeader(code: number): string[] {
     `commit: ${sha ? `${sha}${dirty ? ' (working tree has changes)' : ''}` : 'not a git checkout'}`,
     `toolchain: node ${process.version}; next ${nextVersion()}; ${process.env.npm_config_user_agent?.split(' ')[0] ?? 'no package manager'}`,
     `browser: ${chrome}; profile: ${os.platform()} ${os.arch()}, ${cpus.length} CPUs (${cpus[0]?.model ?? 'unknown'}), local, not the reference profile`,
+    `browsers: at most ${ceiling} at once (${ceilingFrom})`,
     `selected routes: ${selected.length ? selected.join(', ') : 'none'}`,
     `gate runs: ${gates}`,
     `build runs: ${builds}`,
@@ -620,20 +635,24 @@ if (full && browser.ran && baseUrl) {
     if (suiteOutcome(on.status) === 'FAIL') ok = false;
   }
 
-  // The audit, the presses and the keyboard walk each run their own browser, so they run side by side against the one built app.
+  // The audit, the presses and the keyboard walk each run one browser of their own, side by side against the one built
+  // app, as many at once as the ceiling allows (#77). A product check holds the browsers its entry says it opens, the
+  // whole ceiling at most, and is told in VERIFY_BROWSERS how many that is, so a check that pools browsers sizes its pool
+  // from that and not from the machine; it starts once that many are free.
   current = 'the browser suites';
-  announce('the audit, every control and link, the keyboard path' + (own.length ? ', and the product\'s own checks' : ''));
+  announce('the audit, every control and link, the keyboard path' + (own.length ? ', and the product\'s own checks' : '') + `, at most ${ceiling} browsers at once`);
   const here = `http://127.0.0.1:${server!.port}`;
+  const hold = slots(ceiling);
   const [audit, presses, keys, ...extras] = await Promise.all([
-    run('scripts/audit.ts', ['--base', here]),
-    run('scripts/interactions.ts', ['--base', here]),
-    run('scripts/keyboard.ts', ['--base', here]),
-    ...own.map((script) => run(script, ['--base', here])),
+    hold(1, () => run('scripts/audit.ts', ['--base', here])),
+    hold(1, () => run('scripts/interactions.ts', ['--base', here])),
+    hold(1, () => run('scripts/keyboard.ts', ['--base', here])),
+    ...own.map((c) => hold(c.browsers, () => run(c.script, ['--base', here], { ...process.env, VERIFY_BROWSERS: String(Math.min(c.browsers, ceiling)) }))),
   ]);
   reportSuite('audit', 'audit: every page at 5 widths in both themes', audit);
   reportSuite('presses', 'every control pressed and every link followed', presses);
   reportSuite('keyboard', 'the whole keyboard path', keys);
-  extras.forEach((r, i) => reportSuite('browserChecks', own[i], r));
+  extras.forEach((r, i) => reportSuite('browserChecks', own[i].script, r));
   if ([audit, presses, keys, ...extras].some((r) => suiteOutcome(r.status) === 'FAIL')) ok = false;
 }
 

package/payload/skills/zz-meridian/references/update.md

@@ -169,7 +169,7 @@ update (`2` pending, `0` finalized, `1` failure). `--abort`: `0` aborted, `1` re
 
 ## Resolving 0.9.0's migrations
 
-Moving a project to 0.9.0 can report two more `migration:<id>` items, to 0.10.0 a third for an assistant kept from before, to 0.13.0 a fourth for a navigation item without a `needs`, to 0.15.0 a fifth for a page under the project's own route group, and to 0.16.0 five more, for a configuration that does not declare `refusal`, an export gone from a managed module, a view tool without its page or its prepared query, a view tool's page whose specification does not say what the agent does there, and the sample's pages under their old names; to 0.16.2 one more, for a test of the rail standing over a `ResizeObserver` that answers `observe` with nothing, to 0.16.3 three more, for the assistant route's local `onPage`, a file importing the journey from `scripts/navigate.ts` and a route or a read that cuts today at the UTC date, to 0.17.0 one more, for a file calling `finalOutcome` with a boolean, and to 0.19.0 one more, for a test that expects a Column chart's period with no data to draw a track. Each is resolved the same way as those below:
+Moving a project to 0.9.0 can report two more `migration:<id>` items, to 0.10.0 a third for an assistant kept from before, to 0.13.0 a fourth for a navigation item without a `needs`, to 0.15.0 a fifth for a page under the project's own route group, and to 0.16.0 five more, for a configuration that does not declare `refusal`, an export gone from a managed module, a view tool without its page or its prepared query, a view tool's page whose specification does not say what the agent does there, and the sample's pages under their old names; to 0.16.2 one more, for a test of the rail standing over a `ResizeObserver` that answers `observe` with nothing, to 0.16.3 three more, for the assistant route's local `onPage`, a file importing the journey from `scripts/navigate.ts` and a route or a read that cuts today at the UTC date, to 0.17.0 one more, for a file calling `finalOutcome` with a boolean, and to 0.19.0 one more, for a test that expects a Column chart's period with no data to draw a track, and to 0.26.0 one more, for a test that expects a table's 256px floor or a table cell that spans columns. Each is resolved the same way as those below:
 
 | Id | The old shape it found | The change |
 |----|------------------------|------------|
@@ -189,6 +189,7 @@ Moving a project to 0.9.0 can report two more `migration:<id>` items, to 0.10.0
 | `today-in-timezone` (0.16.3) | `optional:app/api/assistant/route.ts` or `optional:src/data/metrics.ts` cutting today with `clock().toISOString().slice(0, 10)` | `dayOf(clock())` from `src/lib/format-date.ts`, so today is the day in `app.timezone`; a file of your own comparing an instant's day with a day row asks `dayOf` too; checked by the gate |
 | `verify-tiers` (0.17.0) | a file of the team's importing `finalOutcome` from `scripts/lib/coverage.ts` and calling it with a boolean, such as a copy of `optional:tests/verify-suite-outcome.test.ts` from before the tiers | `finalOutcome` takes `{ full, timed }` since verify has a timed tier: bring `optional:tests/verify-suite-outcome.test.ts` over from the release as it has it, and call `finalOutcome({ full, timed }, notRun)` in a file of your own, as `validation.md` describes; checked by the gate |
 | `no-data-mark` (0.19.0) | a test of the team's importing the Column chart and expecting a `.bg-fill-track` in a period with no data, such as `optional:tests/column-chart-no-data.test.tsx` as the template wrote it | a `null` period draws a dashed hairline on the baseline since 0.19.0, not a track the height of the scale, which was the tallest mark on the chart: bring `optional:tests/column-chart-no-data.test.tsx` over from the release as it has it, and find `[data-no-data-mark]` where a test of your own found `.bg-fill-track` or `[data-track]`; checked by the gate |
+| `table-grid` (0.26.0) | a file of the team's importing the Table or the DataTable that expects a `grow` column's `@min-[672px]:min-w-64`, such as `optional:tests/table-cut-cell.test.tsx` as the template wrote it, or passes a `colSpan` to a `TableCell` | a table is a grid since 0.26.0, its spare shared equally between the gaps, and a `grow` column's floor is `min-w-40` at every width: bring `optional:tests/table-cut-cell.test.tsx` over from the release as it has it, expect `min-w-40` alone where a test of your own expected the wider floor, and draw a row that spans the table, such as an empty state, outside it or as a `DataTable` `empty`, since a cell takes one track; checked by the gate |
 
 A created project that never changed the template's pages brings the release's version of each affected file over, with
 the files that arrived with them: the view contexts `optional:src/views/home-context.ts` and its siblings, the view
@@ -218,7 +219,7 @@ each one in the project, then record it as above, with the hashes of the files a
 | `live-provider` | collections without `optional:src/data/live-actions.ts`, or a console layout without the provider | add the live files: `live.md`, "The live starters" and "Refreshing" |
 | `authorized-endpoints` | the assistant route or an actions file that never calls `resolveAccess` | resolve the caller first, and bring `optional:src/lib/assistant/tools.ts` and `optional:src/lib/assistant/respond.ts` over, which take the guard: "The assistant route" |
 
-Every migration but `verify-modes` is checked by the gate and a build; `verify-modes` by the gate alone. After 0.5.0 the gate alone checks `agent-reads-section`, `nav-needs`, `agent-reads-own-group`, `agent-does-here-section`, `marker-measured-on-observe`, `view-page-matched-as-next`, `journey-moved`, `today-in-timezone`, `verify-tiers` and `no-data-mark`.
+Every migration but `verify-modes` is checked by the gate and a build; `verify-modes` by the gate alone. After 0.5.0 the gate alone checks `agent-reads-section`, `nav-needs`, `agent-reads-own-group`, `agent-does-here-section`, `marker-measured-on-observe`, `view-page-matched-as-next`, `journey-moved`, `today-in-timezone`, `verify-tiers`, `no-data-mark` and `table-grid`.
 
 How to make the change depends on whose file it is:
 

package/payload/skills/zz-meridian/references/validation.md

@@ -84,7 +84,9 @@ line naming the command that runs them. Steps in order:
    border (or the frame around it, or any ancestor up to its host inside a shadow root) differs when it has focus. A ring
    that is always there does not count. With them run the
    product's own browser checks (`browserChecks` in `scripts/verify.config.ts`), each given `--base` and the served
-   app's address; none of them judges a time.
+   app's address; none of them judges a time. The run holds at most `--browsers` browsers at once (one per two CPUs and
+   per 4 GiB by default): each suite takes one, a check whose entry is `{ script, browsers }` takes that many, and a
+   check reads how many it holds from `VERIFY_BROWSERS`.
 7. **Live data** (`--timed` only; `scripts/live.ts`), alone after the presses, which change members: two tabs, a quiet
    or restarted stream, a hidden or offline tab and a burst, against a second server that drops its change hints. A case
    that cannot run is `not run` and the suite exits 2. It drives the sample Members page; a product without it prints
@@ -138,7 +140,7 @@ and supply-chain check before a script runs; that is pnpm, not an install, and n
 | `unmeasured: x-card (no open shadow root)` | A custom element shows a box but exposes no open root and no content in the page, so nothing inside it was measured | Attach its root open (`attachShadow({ mode: 'open' })`), or render its content as light DOM in a slot; the audit fails until it can look |
 | `unmeasured: x-card (not defined)` | A custom element was still not registered after the settle wait | Register it (`customElements.define`) before the page settles, or remove the tag from the page |
 | `"Export" does nothing when pressed` | A control with no action, or one that only works on hover | Wire it, or remove it; an info button uses `Tooltip toggle` so a tap opens it |
-| `table … > its frame` | A table wider than its card, its last columns clipped | `hideBelow` one more column, or `truncate` a long column. Every column asks for its content width, the spare is shared in proportion, and a cut column shrinks only when the table lacks room; a fixed `width` keeps its width, and the `grow` floor is 160px, 256px from a 672px table |
+| `table … > its frame` | A table wider than its card, its last columns clipped | `hideBelow` one more column, or `truncate` a long column. Every column is as wide as its content, the spare sits in the gaps between columns, an equal share in each, and a cut column shrinks only when the table lacks room; a fixed `width` keeps its width, and the `grow` floor is 160px |
 | `exception:` / `console.error:` | A runtime error or a hydration mismatch | Hydration: no `Date.now()`, `Math.random()` or locale-dependent formatting in render; use the demo clock and `src/lib/format*` |
 
 ## Keyboard walk failures

package/payload/src/components/patterns/data-table/README.md

@@ -27,7 +27,7 @@ Status: beta
 
 ## Sizes
 
-Row height and card padding come from the density: comfortable 52px and 24px, compact 38px and 16px. The table never sets its own width. Every column asks for its content width, and the spare is shared across all columns in proportion to those widths, with the `grow` column's floor (the record's name: 160px, 256px once the table is 672px wide) counted as its preferred width. A column whose cells `truncate` asks for its whole content width too and shrinks only when the table lacks room for every column; every column that must show its whole value keeps its content width. A column whose content is short and fixed (an ID, a key, a date) can take `width` (`w-28`), which it keeps, taking no spare, so a two-column table does not hand the short column most of the row.
+Row height and card padding come from the density: comfortable 52px and 24px, compact 38px and 16px. The table never sets its own width. Every column is as wide as its content, and the spare sits between the columns, an equal share in every gap, so the gaps read even (the Table's Sizes). The `grow` column (the record's name) is at least 160px. A column whose cells `truncate` asks for its whole content width too and shrinks only when the table lacks room for every column; every column that must show its whole value keeps its content width. A column whose content is short and fixed (an ID, a key, a date) can take `width` (`w-28`), which it keeps. The selection checkbox sits over the lead column's left padding rather than in a column of its own, so no gap stands between a checkbox and the name it selects.
 
 ## States
 
@@ -85,7 +85,7 @@ Rows arrive whole for client-side sorting and paging (a few hundred at most), or
 
 ## Do and do not
 
-- Do give the record's name `grow`: it sets the floor and the phone card's title, and claims no spare. A column may be cut (`truncate`) if its values are long, since it shows them whole while the table has room and shrinks only when it has not.
+- Do give the record's name `grow`: it sets the floor and the phone card's title. A column may be cut (`truncate`) if its values are long, since it shows them whole while the table has room and shrinks only when it has not.
 - Do drop columns with `hideBelow` rather than letting the table scroll sideways.
 - Do not put more than one action per row; a row with several actions opens a record that has them.
 - Do not show pagination for a list that fits on one page.

package/payload/src/components/patterns/data-table/index.tsx

@@ -36,9 +36,9 @@ export type Column<R> = {
   title?: (row: R) => string;
   /** Drop the column below this width (the least important columns go first). */
   hideBelow?: Breakpoint;
-  /** The record's name: the one column with a floor, so the last to be cut. It claims no spare width. */
+  /** The record's name: the one column with a floor, so the last to be cut. */
   grow?: boolean;
-  /** A width class for a column whose content is short and fixed (an ID, a key, a date), so the spare is shared by the others: `w-28`. */
+  /** A width class for a column whose content is short and fixed (an ID, a key, a date), which it keeps: `w-28`. */
   width?: string;
   /**
    * Its place in the card a row becomes on phones: the `title` (one column, the record's name), a `status` at the end
@@ -75,10 +75,10 @@ type Mobile = 'check' | 'title' | 'status' | 'fact' | 'hidden';
  */
 const CELLS = [
   'text-ink',
-  '[&_td]:h-(--row-height) [&_td]:px-4 [&_td]:align-middle [&_td]:text-left',
+  '[&_td]:px-4 [&_td]:py-2 [&_td]:text-left',
   '[&_td[data-num]]:text-right [&_td[data-num=num]]:whitespace-nowrap',
   '[&_[data-sep]]:hidden',
-  '[&_tbody_tr]:transition-colors [&_tbody_tr]:duration-(--dur-hover) [&_tbody_td]:border-b [&_tbody_td]:border-line [&_tbody_tr:last-child_td]:border-0',
+  '[&_tbody_tr]:transition-colors [&_tbody_tr]:duration-(--dur-hover)',
 ].join(' ');
 
 /**
@@ -95,8 +95,8 @@ const PHONE_ROWS = [
   '@max-[640px]:[&_tbody_tr]:px-(--card-pad) @max-[640px]:[&_tbody_tr]:py-3.5 @max-[640px]:[&_tbody_td]:border-0 @max-[640px]:[&_tbody_tr]:border-b @max-[640px]:[&_tbody_tr]:border-line @max-[640px]:[&_tbody_tr:last-child]:border-b-0',
 ].join(' ');
 
-/** The resets a cell needs once the row is a card: not a row height, not a padding box, free to shrink and to clip. */
-const PHONE_CELLS = '@max-[640px]:[&_td:not([data-mobile=hidden])]:!h-auto @max-[640px]:[&_td:not([data-mobile=hidden])]:!p-0 @max-[640px]:[&_td:not([data-mobile=hidden])]:min-w-0 @max-[640px]:[&_td:not([data-mobile=hidden]):not([data-mobile=fact])]:!block @max-[640px]:[&_[data-sep]]:inline';
+/** The resets a cell needs once the row is a card: not a padding box, free to shrink and to clip. */
+const PHONE_CELLS = '@max-[640px]:[&_td:not([data-mobile=hidden])]:!p-0 @max-[640px]:[&_td:not([data-mobile=hidden])]:min-w-0 @max-[640px]:[&_td:not([data-mobile=hidden]):not([data-mobile=fact])]:!block @max-[640px]:[&_[data-sep]]:inline';
 
 /** Where a role sits in the card, and how it reads there.
  *
@@ -119,6 +119,16 @@ const PHONE_ROLES = [
   '@max-[640px]:[&_tr[aria-selected]_td[data-mobile=fact]]:text-ink-2',
 ].join(' ');
 
+/**
+ * The selection checkbox sits inside the lead column's area, over its left padding, rather than in a column of its own:
+ * the table puts an equal share of its spare width in every gap between columns, and a column of checkboxes would stand
+ * that far from the names it selects. It is still its own cell, first in the row, and the table does not count it.
+ */
+const SELECT = [
+  '[&_[data-check]]:relative [&_[data-check]]:z-1 [&_[data-check]]:col-start-1 [&_[data-check]]:row-start-1 [&_[data-check]]:justify-self-start',
+  '[&_[data-check]+*]:col-start-1 [&_[data-check]+*]:row-start-1 [&_[data-check]+*]:pl-[calc(var(--card-pad)+--spacing(7))]',
+].join(' ');
+
 /* Literal strings, as in the Table: Tailwind finds classes by reading the source. */
 const HIDE: Record<Breakpoint, string> = { sm: '@max-[512px]:hidden', md: '@max-[672px]:hidden', lg: '@max-[896px]:hidden', xl: '@max-[1152px]:hidden' };
 
@@ -293,13 +303,13 @@ export function DataTable<R>({
   } else {
     const roleOf = (c: Column<R>): Mobile => (c === titleColumn ? 'title' : c === status ? 'status' : facts.includes(c) ? 'fact' : 'hidden');
     body = (
-      <Table caption={caption} aria-busy={loading || busy || undefined} className={cn('@max-[640px]:block @max-[640px]:[&>thead]:hidden @max-[640px]:[&>tbody]:block', CELLS, PHONE_ROWS, PHONE_CELLS, PHONE_ROLES, '[&>tbody]:transition-opacity [&>tbody]:duration-(--dur-hover)', busy && '[&>tbody]:opacity-60')}>
+      <Table caption={caption} aria-busy={loading || busy || undefined} className={cn('@max-[640px]:block @max-[640px]:[&>thead]:hidden @max-[640px]:[&>tbody]:block', CELLS, selectable && SELECT, PHONE_ROWS, PHONE_CELLS, PHONE_ROLES, '[&>tbody]:transition-opacity [&>tbody]:duration-(--dur-hover)', busy && '[&>tbody]:opacity-60')}>
         <TableHead>
-          <tr>
+          <tr role="row">
             {selectable ? (
-              <TableHeader className="w-10 !pr-0">
+              <th scope="col" role="columnheader" data-check className="w-10 !pr-0">
                 <Checkbox aria-label={`Select every ${noun.replace(/s$/, '')} on this page`} checked={allOn ? true : someOn ? 'indeterminate' : false} onCheckedChange={toggleAll} />
-              </TableHeader>
+              </th>
             ) : null}
             {columns.map((c) => (
               <TableHeader key={c.key} align={c.align ?? (c.numeric ? 'right' : 'left')} hideBelow={c.hideBelow} grow={c.grow} className={c.width} sort={c.sortValue ? dirOf(c) : undefined} onSort={c.sortValue ? () => toggleSort(c) : undefined}>
@@ -311,10 +321,10 @@ export function DataTable<R>({
         <TableBody>
           {loading
             ? Array.from({ length: Math.min(size, 8) }, (_, i) => (
-                <tr key={i} className="group/row">
-                  {selectable ? <td data-mobile="check"><Skeleton className="size-4" /></td> : null}
+                <tr key={i} role="row" className="group/row">
+                  {selectable ? <td role="cell" data-check data-mobile="check"><Skeleton className="size-4" /></td> : null}
                   {columns.map((c, j) => (
-                    <td key={c.key} data-mobile={roleOf(c)} data-num={c.numeric ? 'num' : undefined} data-hide-below={c.hideBelow} className={cellClass({ numeric: c.numeric, hideBelow: c.hideBelow })}>
+                    <td key={c.key} role="cell" data-mobile={roleOf(c)} data-num={c.numeric ? 'num' : undefined} data-hide-below={c.hideBelow} className={cellClass({ numeric: c.numeric, hideBelow: c.hideBelow })}>
                       <Skeleton className={cn('h-3', c.numeric ? 'ml-auto w-12' : c.grow ? ['w-48', 'w-40', 'w-56'][i % 3] : ['w-20', 'w-16', 'w-24'][(i + j) % 3])} />
                     </td>
                   ))}
@@ -324,9 +334,9 @@ export function DataTable<R>({
                 const k = rowKey(r);
                 const href = rowHref?.(r);
                 return (
-                  <tr key={k} aria-selected={sel.has(k) || undefined} onClick={(e) => open(e, href)} className={cn('group/row', href && 'cursor-pointer hover:bg-fill-hover', sel.has(k) && 'bg-accent-tint hover:bg-accent-tint')}>
+                  <tr key={k} role="row" aria-selected={sel.has(k) || undefined} onClick={(e) => open(e, href)} className={cn('group/row', href && 'cursor-pointer hover:bg-fill-hover', sel.has(k) && 'bg-accent-tint hover:bg-accent-tint')}>
                     {selectable ? (
-                      <td data-mobile="check" className="!pr-0">
+                      <td role="cell" data-check data-mobile="check" className="!pr-0">
                         <Checkbox aria-label={`Select ${k}`} checked={sel.has(k)} onCheckedChange={() => toggle(k)} />
                       </td>
                     ) : null}
@@ -340,7 +350,7 @@ export function DataTable<R>({
                       const value = c.cell(r);
                       const content = c === titleColumn && href ? <Link href={href}>{value}</Link> : value;
                       return (
-                        <td key={c.key} data-mobile={role} data-num={c.numeric ? 'num' : c.align === 'right' ? 'true' : undefined} data-hide-below={c.hideBelow} title={c.title ? c.title(r) : c.truncate && (typeof value === 'string' || typeof value === 'number') ? String(value) : undefined} className={cellClass(c) || undefined}>
+                        <td key={c.key} role="cell" data-mobile={role} data-num={c.numeric ? 'num' : c.align === 'right' ? 'true' : undefined} data-hide-below={c.hideBelow} title={c.title ? c.title(r) : c.truncate && (typeof value === 'string' || typeof value === 'number') ? String(value) : undefined} className={cellClass(c) || undefined}>
                           {/* The dot that separates two facts, on a phone only — the table has a column for each of
                               them, where a dot would be noise. It leads the fact it separates, in that fact's own
                               cell: each fact is a flex item, so a line that runs out of room wraps whole ones and a

package/payload/src/components/ui/table/README.md

@@ -24,7 +24,7 @@ The names follow the HTML elements: `TableHead` is the `thead`, `TableHeader` is
 
 ## Sizes
 
-Column widths follow content. Every column asks for its content width, and a table with spare width shares it across all of its columns in proportion to those widths, so no column holds the spare alone; `grow` on the head marks the record's name, whose floor counts as its preferred width when the floor is wider than the text. A column whose cells can be cut (`truncate`) asks for its whole content width too, and shrinks only when the table lacks room for every column; then the cut columns give way, which is what a table with three long columns (a verification, its release, the reason it failed) needs. Every column that must show its whole value keeps its content width. A column given `width` keeps that width and takes no spare. A cut cell carries the full text in its `title`, or opens the record. Other text columns stay on one line. The `grow` column is at least 160px, 256px once the table is 672px wide. `hideBelow` drops a column when the table itself is narrower than `sm` 512, `md` 672, `lg` 896 or `xl` 1152px, on its head and its cells alike, and marks each `data-hide-below`, so the column drawn last at that width, not the dropped one after it, takes the card's padding on its right.
+Column widths follow content, and the spare goes between the columns. The table is a grid: every column is as wide as its content, and a table with spare width puts an equal share of it in every gap between two columns, so the gaps read even whatever each column's alignment, a number beside a name as much as two names. Each row is a subgrid of the table's columns, so its border, hover and selection run across the gaps. The columns are counted from the cells of the table's first row as its own JSX writes them, the head's `TableHeader` cells when it has a head: write that row's cells there, not inside a component of your own, or the table cannot count them. `grow` on the head marks the record's name, the last column to be cut. A column whose cells can be cut (`truncate`) asks for its whole content width too, and shrinks only when the table lacks room for every column; then the cut columns give way, which is what a table with three long columns (a verification, its release, the reason it failed) needs. Every column that must show its whole value keeps its content width. A column given `width` keeps that width. A cut cell carries the full text in its `title`, or opens the record. Other text columns stay on one line. The `grow` column is at least 160px. `hideBelow` drops a column when the table itself is narrower than `sm` 512, `md` 672, `lg` 896 or `xl` 1152px, on its head and its cells alike, and marks each `data-hide-below`, so the column drawn last at that width, not the dropped one after it, takes the card's padding on its right.
 
 ## States
 

package/payload/src/components/ui/table/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react';
-import type { HTMLAttributes, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { Children, isValidElement, type CSSProperties, type HTMLAttributes, type ReactNode, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
 import { cn } from '@/lib/cn';
 
 /**
@@ -9,6 +9,13 @@ import { cn } from '@/lib/cn';
  * too narrow, the least important columns drop (`hideBelow` on the head and the cells alike), and a DataTable's rows
  * become cards on phones. Numbers align right in tabular figures.
  *
+ * It is laid out as a grid, not by the table algorithm: each column is as wide as its content, and the spare width sits
+ * between the columns, an equal share in every gap, so the gaps read even whatever each column's alignment. The table
+ * algorithm put each column's spare inside it, after a left-aligned value and before a right-aligned one, so a text
+ * column beside a number held both shares in one gap and a number beside a text column none. Each row is a subgrid of
+ * the table's columns, so a row's border, hover and selection run across the gaps. The columns are counted from the
+ * cells of the table's first row as its own JSX writes them, the head's `TableHeader` cells when it has a head.
+ *
  * `hideBelow` reads the table's own width, not the window's: the rail, a split row or an embed all narrow the table
  * without narrowing the window. sm under 512px, md under 672px, lg under 896px, xl under 1152px.
  */
@@ -18,20 +25,48 @@ const HIDE: Record<Breakpoint, string> = { sm: '@max-[512px]:hidden', md: '@max-
 const ALIGN = { left: 'text-left', right: 'text-right', center: 'text-center' } as const;
 const JUSTIFY = { left: undefined, right: 'justify-end', center: 'justify-center' } as const;
 
-export function Table({ className, caption, children, ...rest }: HTMLAttributes<HTMLTableElement> & { caption?: string }) {
+type Props = { children?: ReactNode; hideBelow?: Breakpoint };
+
+/** Which columns the table draws: the `hideBelow` of each cell in its first row, the head's when it has one. */
+function columnsOf(node: ReactNode): (Breakpoint | undefined)[] | undefined {
+  const kids = Children.toArray(node).filter((c) => isValidElement<Props>(c));
+  const cells = kids.filter((c) => c.type === TableHeader || c.type === TableCell);
+  if (cells.length > 0) return cells.map((c) => c.props.hideBelow);
+  for (const c of kids) {
+    const found = columnsOf(c.props.children);
+    if (found) return found;
+  }
+  return undefined;
+}
+
+/* Below each step a column with that `hideBelow`, or a wider one, is dropped. */
+const DROPPED: Record<Breakpoint, Breakpoint[]> = { xl: ['xl'], lg: ['xl', 'lg'], md: ['xl', 'lg', 'md'], sm: ['xl', 'lg', 'md', 'sm'] };
+
+/** One `auto` track per column the table draws at each step: as wide as its content, shrinking when there is no room. */
+function columns(heads: (Breakpoint | undefined)[]) {
+  const at = (drop: Breakpoint[]) => `repeat(${Math.max(1, heads.filter((h) => !h || !drop.includes(h)).length)}, auto)`;
+  return { '--cols': at([]), '--cols-xl': at(DROPPED.xl), '--cols-lg': at(DROPPED.lg), '--cols-md': at(DROPPED.md), '--cols-sm': at(DROPPED.sm) } as CSSProperties;
+}
+
+export function Table({ className, caption, children, style, ...rest }: HTMLAttributes<HTMLTableElement> & { caption?: string }) {
+  const heads = columnsOf(children) ?? [];
   return (
     <div className="@container w-full min-w-0 overflow-x-clip">
       <table
+        role="table"
+        style={{ ...columns(heads), ...style }}
         className={cn(
-          'w-full border-separate border-spacing-0 text-sm',
+          'grid w-full justify-between text-sm',
+          'grid-cols-(--cols) @max-[1152px]:grid-cols-(--cols-xl) @max-[896px]:grid-cols-(--cols-lg) @max-[672px]:grid-cols-(--cols-md) @max-[512px]:grid-cols-(--cols-sm)',
+          '[&>thead]:contents [&>tbody]:contents [&_tr]:col-span-full [&_tr]:grid [&_tr]:grid-cols-subgrid [&_tr]:items-center',
+          '[&_thead_tr]:min-h-9 [&_thead_tr]:border-y [&_thead_tr]:border-line [&_thead_tr]:bg-surface-sunk',
+          '[&_tbody_tr]:min-h-(--row-height) [&_tbody_tr]:border-b [&_tbody_tr]:border-line [&_tbody_tr:last-child]:border-b-0',
           '[&_tr>*:first-child]:pl-(--card-pad) [&_tr>*:last-child]:pr-(--card-pad)',
           /* The column drawn last takes the card's padding, whichever columns the table's width hides after it (#70). */
           '@max-[1152px]:[&_tr>:nth-last-child(1_of_:not([data-hide-below=xl]))]:pr-(--card-pad)',
           '@max-[896px]:[&_tr>:nth-last-child(1_of_:not([data-hide-below=xl]):not([data-hide-below=lg]))]:pr-(--card-pad)',
           '@max-[672px]:[&_tr>:nth-last-child(1_of_:not([data-hide-below=xl]):not([data-hide-below=lg]):not([data-hide-below=md]))]:pr-(--card-pad)',
           '@max-[512px]:[&_tr>:nth-last-child(1_of_:not([data-hide-below]))]:pr-(--card-pad)',
-          /* A text column after a right-aligned number gets room to breathe, so "234ms" and "Example Co" read as two facts. */
-          '[&_[data-num]+:not([data-num])]:pl-8',
           className,
         )}
         {...rest}
@@ -44,19 +79,20 @@ export function Table({ className, caption, children, ...rest }: HTMLAttributes<
 }
 
 export function TableHead({ className, sticky, ...rest }: HTMLAttributes<HTMLTableSectionElement> & { sticky?: boolean }) {
-  return <thead className={cn(sticky && '[&_th]:sticky [&_th]:top-0 [&_th]:z-10', className)} {...rest} />;
+  return <thead role="rowgroup" className={cn(sticky && '[&_tr]:sticky [&_tr]:top-0 [&_tr]:z-10', className)} {...rest} />;
 }
 
 export function TableBody(props: HTMLAttributes<HTMLTableSectionElement>) {
-  return <tbody {...props} />;
+  return <tbody role="rowgroup" {...props} />;
 }
 
 export function TableRow({ className, selected, interactive, ...rest }: HTMLAttributes<HTMLTableRowElement> & { selected?: boolean; interactive?: boolean }) {
   return (
     <tr
+      role="row"
       aria-selected={selected || undefined}
       className={cn(
-        'group/row transition-colors duration-(--dur-hover) [&>td]:border-b [&>td]:border-line last:[&>td]:border-0',
+        'group/row transition-colors duration-(--dur-hover)',
         interactive && 'cursor-pointer hover:bg-fill-hover',
         selected && 'bg-accent-tint hover:bg-accent-tint',
         className,
@@ -82,7 +118,7 @@ export function TableHeader({
   hideBelow?: Breakpoint;
   sort?: SortDirection;
   onSort?: () => void;
-  /** The record's name: the one column with a floor, so it is the last to be cut. It claims no spare width. */
+  /** The record's name: the one column with a floor, so it is the last to be cut. */
   grow?: boolean;
 }) {
   const sortable = onSort !== undefined;
@@ -90,19 +126,22 @@ export function TableHeader({
   return (
     <th
       scope="col"
+      role="columnheader"
       data-num={align === 'right' || undefined}
       data-hide-below={hideBelow}
       aria-sort={sortable ? (sort === 'asc' ? 'ascending' : sort === 'desc' ? 'descending' : 'none') : undefined}
       className={cn(
-        'h-9 border-y border-line bg-surface-sunk px-4 text-xs font-medium whitespace-nowrap text-ink-3 first:border-l-0',
+        'px-4 text-xs font-medium whitespace-nowrap text-ink-3',
         ALIGN[align],
         hideBelow && HIDE[hideBelow],
-        /* No head claims the spare. A cut column asks for its content's width through its cells (`Cut`), so auto layout
-           shares the spare across every column in proportion to that ask; a head with `w-full` took all of it for the
-           lead and left the rest at their minimum, the uneven spacing this replaced. */
-        // The floor belongs to the lead column alone (c8eccdc): a second column with a minimum cannot shrink, and the
-        // Releases table held 837px inside a 713px frame at 1024 and 768 when two columns had one.
-        grow && 'min-w-40 @min-[672px]:min-w-64',
+        /* No head claims the spare: every column is as wide as its content, a cut column's asked for through its cells
+           (`Cut`), and the spare sits in the gaps between columns, an equal share in each. A cut column shrinks only when
+           the table lacks room, and a head given a width keeps it. */
+        // The floor, 160px, belongs to the lead column alone (c8eccdc): a second column with a minimum cannot shrink, and
+        // the Releases table held 837px inside a 713px frame at 1024 and 768 when two had one. A floor is also a width the
+        // column claims when its names are shorter, so it is no wider than a short name: 256px from a 672px table gave the
+        // gap after the lead half as much again as every other gap.
+        grow && 'min-w-40',
         className,
       )}
       {...rest}
@@ -131,9 +170,8 @@ export function TableHeader({
 
 /**
  * A cut value: it asks for its whole content's width and shrinks only when the table has no room. One grid track of
- * `minmax(0, max-content)` gives the cell that ask, where `max-w-0` on the cell zeroed it and sent every spare pixel to
- * the lead column. The track is as wide as the value and the cell's `text-align` does not move it, so it takes the
- * cell's alignment itself.
+ * `minmax(0, max-content)` gives the cell that ask and lets it shrink to nothing. The track is as wide as the value and
+ * the cell's `text-align` does not move it, so it takes the cell's alignment itself.
  */
 export function Cut({ align = 'left', children }: { align?: keyof typeof ALIGN; children?: ReactNode }) {
   return (
@@ -155,6 +193,7 @@ export function TableCell({
 }: TdHTMLAttributes<HTMLTableCellElement> & { align?: keyof typeof ALIGN; numeric?: boolean; muted?: boolean; truncate?: boolean; hideBelow?: Breakpoint; children?: ReactNode }) {
   return (
     <td
+      role="cell"
       data-num={numeric || align === 'right' || undefined}
       data-hide-below={hideBelow}
       // A cut value is cut everywhere on the page, and this README has always said the cell carries the whole one in its
@@ -162,7 +201,7 @@ export function TableCell({
       // node is its author's, and a `title` passed in wins over this one because the spread comes after.
       title={truncate && (typeof children === 'string' || typeof children === 'number') ? String(children) : undefined}
       className={cn(
-        'h-(--row-height) px-4 align-middle',
+        'px-4 py-2',
         ALIGN[align ?? (numeric ? 'right' : 'left')],
         numeric && 't-num whitespace-nowrap',
         muted ? 'text-ink-2' : 'text-ink',

package/payload/src/views/members.tsx

@@ -198,8 +198,9 @@ export function MembersView({ rows, now, revisions, actions, access, roles, work
     },
     // The name is the row's identifier and the table's floor; the email is not a second one, and it is a fixed-width
     // thing (a domain and a local part), so it is drawn whole on one line at the width its longest one needs. Every
-    // column asks for its content width and the table shares the spare in proportion to those widths, so neither
-    // column claims the room. Held on one line, the email column is as wide as the longest address and nothing is cut.
+    // column is as wide as its content and the table puts its spare in the gaps between columns, an equal share in each,
+    // so neither column claims the room. Held on one line, the email column is as wide as the longest address and
+    // nothing is cut.
     { key: 'email', header: 'Email', muted: true, hideBelow: 'lg', sortValue: (m) => m.email, cell: (m) => <span className="whitespace-nowrap">{m.email}</span> },
     // The role as a person reads it, add-ons and all, as a column and as a fact on the phone card (AC-3.2).
     { key: 'role', header: 'Role', hideBelow: 'sm', mobile: 'fact', sortValue: (m) => m.role, cell: (m) => roleLabel(m), mobileCell: (m) => roleLabel(m) },

package/payload/tests/table-cut-align.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 
 const wrapOf = (td: Element) => td.firstElementChild!.getAttribute('class')?.split(/\s+/) ?? [];
 
@@ -9,6 +9,7 @@ describe('a cut cell keeps its alignment', () => {
   it('justifies a right-aligned, numeric or centred value and leaves a left one alone', () => {
     const { container } = render(
       <Table>
+        <TableHead><TableRow><TableHeader grow>Name</TableHeader><TableHeader align="right">Region</TableHeader><TableHeader align="right">Calls</TableHeader><TableHeader align="center">Tier</TableHeader></TableRow></TableHead>
         <TableBody>
           <TableRow>
             <TableCell truncate>left</TableCell>

package/payload/tests/table-cut-cell.test.tsx

@@ -34,7 +34,7 @@ describe('a cut cell keeps its content width (spec AC-1.4)', () => {
     expect(td.getAttribute('title')).toBe('/v1/messages/with/a/long/tail');
     const heads = [...container.querySelectorAll('th')];
     expect(heads.some((th) => classes(th).includes('w-full'))).toBe(false);
-    expect(classes(heads[0])).toEqual(expect.arrayContaining(['min-w-40', '@min-[672px]:min-w-64']));
+    expect(classes(heads[0])).toEqual(expect.arrayContaining(['min-w-40']));
   });
 });
 
@@ -58,8 +58,9 @@ describe('DataTable shares the spare (spec AC-1.4, AC-1.6)', () => {
     const heads = [...container.querySelectorAll('thead th')];
     expect(heads.some((th) => classes(th).includes('w-full'))).toBe(false);
     expect(classes(heads[0])).toContain('w-10');
+    expect(heads[0].hasAttribute('data-check')).toBe(true);
     const customer = heads.find((th) => th.textContent?.includes('Customer'))!;
-    expect(classes(customer)).toEqual(expect.arrayContaining(['min-w-40', '@min-[672px]:min-w-64']));
+    expect(classes(customer)).toEqual(expect.arrayContaining(['min-w-40']));
     expect(classes(heads.find((th) => th.textContent?.includes('ID'))!)).toContain('w-28');
   });
 

package/payload/tests/table-grid.test.tsx

@@ -0,0 +1,49 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('next/navigation', () => ({ useRouter: () => ({ push() {}, refresh() {}, replace() {} }), usePathname: () => '/' }));
+import { DataTable, type Column } from '@/components/patterns/data-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+
+const cols = (table: HTMLElement) => ['--cols', '--cols-xl', '--cols-lg', '--cols-md', '--cols-sm'].map((v) => table.style.getPropertyValue(v));
+
+/** The table is a grid of one auto track per column it draws at each width; the spare sits between them. */
+describe('the table counts its columns from its head', () => {
+  it('drops a column from the count below its hideBelow step and every narrower one', () => {
+    const { container } = render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader grow>Request</TableHeader>
+            <TableHeader hideBelow="xl">Region</TableHeader>
+            <TableHeader hideBelow="md">Customer</TableHeader>
+            <TableHeader align="right">Latency</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody><TableRow><TableCell>a</TableCell><TableCell>b</TableCell><TableCell>c</TableCell><TableCell>d</TableCell></TableRow></TableBody>
+      </Table>,
+    );
+    const table = container.querySelector('table')!;
+    expect(cols(table)).toEqual(['repeat(4, auto)', 'repeat(3, auto)', 'repeat(3, auto)', 'repeat(2, auto)', 'repeat(2, auto)']);
+    expect(table.getAttribute('class')).toContain('justify-between');
+    expect(container.querySelector('tbody tr')!.getAttribute('role')).toBe('row');
+  });
+
+  it('counts a headless table from its first row', () => {
+    const { container } = render(<Table><TableBody><TableRow><TableCell>a</TableCell><TableCell hideBelow="sm">b</TableCell></TableRow></TableBody></Table>);
+    expect(cols(container.querySelector('table')!)).toEqual(['repeat(2, auto)', 'repeat(2, auto)', 'repeat(2, auto)', 'repeat(2, auto)', 'repeat(1, auto)']);
+  });
+
+  it("does not count DataTable's selection column, which sits over the lead's padding", () => {
+    type Row = { id: string; name: string };
+    const columns: Column<Row>[] = [
+      { key: 'name', header: 'Name', grow: true, mobile: 'title', cell: (r) => r.name },
+      { key: 'id', header: 'ID', cell: (r) => r.id },
+    ];
+    const { container } = render(<DataTable caption="Things" noun="things" rows={[{ id: 't1', name: 'One' }]} columns={columns} rowKey={(r) => r.id} selectable selected={new Set()} onSelectedChange={() => {}} />);
+    const table = container.querySelector('table')!;
+    expect(cols(table)[0]).toBe('repeat(2, auto)');
+    expect(container.querySelector('thead th')!.hasAttribute('data-check')).toBe(true);
+    expect(container.querySelector('tbody td')!.hasAttribute('data-check')).toBe(true);
+  });
+});

package/payload/tests/verify-browsers.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { browserCeiling, slots } from '../scripts/lib/slots.ts';
+
+const GiB = 2 ** 30;
+const tick = () => new Promise((r) => setTimeout(r, 5));
+
+/** One verify run holds no more browsers at once than its ceiling (#77). */
+describe('the browser ceiling', () => {
+  it('is what the machine holds: a browser per two CPUs and per 4 GiB, whichever is fewer, at least one', () => {
+    expect(browserCeiling(10, 32 * GiB)).toBe(5);
+    expect(browserCeiling(4, 15.6 * GiB)).toBe(2);
+    expect(browserCeiling(16, 8 * GiB)).toBe(2);
+    expect(browserCeiling(1, 1 * GiB)).toBe(1);
+  });
+
+  it('starts a suite only when the browsers it asks for are free, and frees them however it ends', async () => {
+    const hold = slots(3);
+    let open = 0;
+    let most = 0;
+    const suite = (want: number, fail = false) =>
+      hold(want, async () => {
+        open += Math.min(want, 3);
+        most = Math.max(most, open);
+        await tick();
+        open -= Math.min(want, 3);
+        if (fail) throw new Error('red');
+        return want;
+      });
+    const runs = await Promise.allSettled([suite(1, true), suite(1), suite(1), suite(2), suite(9)]);
+    expect(most).toBeLessThanOrEqual(3);
+    expect(runs.map((r) => r.status)).toEqual(['rejected', 'fulfilled', 'fulfilled', 'fulfilled', 'fulfilled']);
+    expect(await hold(1, async () => 'free again')).toBe('free again');
+  });
+});