zz-meridian 0.25.1 → 0.27.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.27.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,48 @@
 
 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.27.0] · 2026-10-23
+
+### Breaking
+
+- **A chart's scale holds every value it draws, zero among them** ([#80](https://github.com/zhixuan312/zz-meridian/issues/80)). `ticksBetween` counts a floor under zero down to a step under it, where it used to clamp it to zero and draw every value below zero under the axis and out of the card.
+  - `TrendChart` without a `floor` now holds zero and every value: a series that goes under zero takes the axis down with it. An `area` is filled to the zero line from either side, not down to the lowest level.
+  - `TrendChart`'s top is the data's own. It was at least 1, so a ratio that peaks at 0.4% was drawn along the floor of an axis to 100%. A chart whose values are all under 1 now draws to a step over its highest value.
+  - Levels are rounded to a digit under their step, not to six places, so a ratio a millionth apart keeps one level per tick.
+- **`ColumnChart` draws a value under zero as a fall** ([#78](https://github.com/zhixuan312/zz-meridian/issues/78)). In the plain form, a value under zero used to draw nothing. Now the scale goes under zero, zero is drawn as the axis, and the column hangs from the zero line, rounded at its lower end, with its value under it. While no value is under zero the chart is drawn as before. Stacked, a part under zero is still no contribution: parts make a whole.
+
+### New
+
+- **`TrendChart`'s `format` may be a function, with an `axisFormat`** ([#78](https://github.com/zhixuan312/zz-meridian/issues/78)). From a client component, pass `(n: number) => string` for a figure no named format says exactly: a price to four decimals, a ratio to six, or an amount in a currency of its own. It reads the readout and the table, and the axis unless `axisFormat` says otherwise. A server component still passes a name, because a function cannot cross into a client component.
+- The Trend chart's Atlas page draws "Below zero" and "A format of its own". The Column chart's page draws "Rises and falls".
+
+### Fixed
+
+- **The rail keeps the whole product name and workspace in a `title`** ([#79](https://github.com/zhixuan312/zz-meridian/issues/79)). A name too long for the rail, such as 23 characters in three words, was cut with an ellipsis and nothing held the whole of it, so `scripts/audit.ts` failed every route at every width.
+- **The Now embed loads its body only when it draws it.** The inline view a chat shows first draws the open incident and the services; Now's whole body, with its charts, tables and feed, is the fullscreen view, now a chunk of its own (`next/dynamic`). In a created project, `/embed/now`'s first-load JS falls from 820 KiB, at the cap, to 712 KiB. `app/embed/now/view.tsx` is a sample file the team owns, so `update` leaves a project's own copy as it is: one whose embed nears the cap can take the release's.
+
+## [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/app/embed/now/view.tsx

@@ -8,10 +8,16 @@ import { Freshness } from '@/components/patterns/freshness';
 import { AskAbout } from '@/components/patterns/ask-about';
 import { StatusList } from '@/components/patterns/status-list';
 import { ShareContext } from '@/components/base/use-share-view';
-import { NoServices, NowBody } from '@/views/now';
+import dynamic from 'next/dynamic';
 import { nothingArrived, nowContext, unpackNow, type PackedNowData } from '@/views/now-context';
 import { formatRelative } from '@/lib/format-date';
 
+// Now's whole body is the fullscreen view, and the inline one only when nothing has arrived: its charts, tables and
+// feed are a chunk of their own, so the inline view a chat shows first downloads the banner and the list alone. In one
+// created project the embed's first-load JS was 820 KiB, at the cap, with the body in it.
+const NowBody = dynamic(() => import('@/views/now').then((m) => m.NowBody));
+const NoServices = dynamic(() => import('@/views/now').then((m) => m.NoServices));
+
 /**
  * Inline, the services and the open incident, the most severe first; fullscreen, and inline when nothing has arrived
  * yet, Now's whole body. With the services unread or none monitored, inline says so where the list would be, and never

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.27.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/charts/column-chart/README.md

@@ -7,10 +7,10 @@ Status: beta
 ## Anatomy
 
 1. **Legend** (stacked, two or more parts drawn): above the plot, in stack order from the bottom. A 10px square swatch (3px radius, as the Heatmap's) at the part's own strength, ringed by a 1px `ink-3` hairline, and the part's label in `ink-2` at `text-xs`.
-2. **Gridlines and y labels**: three or four "nice" ticks from zero, `chart-grid` lines (the one at zero `chart-axis`), `text-2xs` `ink-3` labels in a gutter sized to the longest. Each label is the value its tick stands at, written by an axis formatter. Stacked, the axis is the total's.
-3. **Columns**: equal width, 2px apart while the plot has room for it (see More columns than room), rounded 4px at the top, growing from the baseline. Plain, the population is `chart-neutral` and the highlighted column `accent`.
+2. **Gridlines and y labels**: three or four "nice" ticks from zero, or, for a signed series, from a step under its lowest value, `chart-grid` lines (the one at zero `chart-axis`), `text-2xs` `ink-3` labels in a gutter sized to the longest. Each label is the value its tick stands at, written by an axis formatter. Stacked, the axis is the total's.
+3. **Columns**: equal width, 2px apart while the plot has room for it (see More columns than room), rounded 4px at the top, growing from the zero line; a fall (a value under zero) hangs from it, rounded 4px at the bottom and growing down. Plain, the population is `chart-neutral` and the highlighted column `accent`.
 4. **Parts** (stacked): the first at the bottom, a 1px hairline of the card where two touch. Only the topmost part drawn is rounded. A part that is not zero is at least 3px tall; a part at zero is absent, with no line and no gap.
-5. **Value at rest**: the column's value, or its total, above it in `text-2xs` `ink-3`, while a column is at least 36px wide.
+5. **Value at rest**: the column's value, or its total, above it (under a fall) in `text-2xs` `ink-3`, while a column is at least 36px wide.
 6. **Dashed outline** (with a period still running): a 1px dashed `ink` line around the last column, open at the baseline, with 1px of the card between it and the fill, which is drawn at half strength. The outline has space of its own: it covers no part.
 7. **No-data mark** (a period with no data): no column, and a dashed `line-strong` hairline across the slot, 2px above the baseline. Nothing stands up from the baseline, so the tallest mark on the chart is always a value; the slot keeps its place, and its value reads "No data" just above the hairline.
 8. **Pointed column**: plain, it takes the accent and its value stands above it on `surface-inverse`. Stacked, it takes a 2px `ink` ring and the readout.
@@ -30,9 +30,12 @@ Status: beta
 | Stacked, outcomes | `parts` with a tone each: how something ended, such as passed, skipped and failed |
 | Stacked, identities | `parts` with a categorical `color` each: teams, or several usual outcomes (accepted, delivered and abandoned) that one grey would make one. No tone beside them |
 | Running | The last column is a period still in progress, in either form |
+| Rises and falls | A signed series in the plain form, such as a net change a day: values under zero are falls |
 
 **The colour of a part.** Parts with no tone are one whole, so they share the accent, mixed into the surface: deepest at the bottom and paler with each part above, between the theme's `chart-stack-hi` and `chart-stack-lo` (dark 92% to 20%, light 78% to 36%). It is the mix a stacked Trend chart takes, from the same function, so the two read as one family. Once any part names a tone the parts are outcomes: the usual outcome is `neutral` and takes `chart-neutral-strong`, and one that needs somebody takes `warning` or `critical`. A part with no tone among parts that have one is neutral too, so the accent never stands beside a status colour, and the positive colour is never used for the usual case. When a part already is the neutral (`tone: 'neutral'`), a second usual part, Other among them, takes no tone and is drawn in the quieter `chart-neutral`, so the two usual parts are told apart and Other stays the quietest; like the paler parts of one hue, it is not held to 3:1, and the swatch's hairline, the legend and the table carry it. When the parts are identities (teams), or more than one outcome is usual, give each a categorical slot, `color` 1 to 6 in order, as a Trend series takes one: each draws in `series-<n>`, and a part with no slot (Other among them) is neutral. Keep status colours out of such a chart, as the accent is kept out of a toned one: coral (2) and saffron (5) read as a warning beside a real one. A chart with an outcome that needs somebody is a toned chart.
 
+**Rises and falls.** A plain chart draws a signed series whole. When a value is under zero the scale goes down to a step under the lowest one, zero is one of its levels and is drawn as the axis (`chart-axis`), and the columns stand on it: a rise stands up from it and a fall hangs down from it, rounded at its lower end, its value at rest under it, its running outline open at the zero line. A fall is the same neutral as a rise, and the highlighted column the accent: which side of zero a column is on says the sign, and a second colour would say it twice. The plot keeps 28px under its lowest tick, as over its top one, for a fall's value. Format a change with its sign (`+12`, `−8`, with the true minus) so a figure read alone says which way it went. Stacked, the parts make up a whole, so a part under zero is no contribution and draws nothing; a signed series is plain. While no value is under zero, the scale is from zero as before.
+
 **At most four parts.** Past four, nobody tells the steps of one hue apart. Given more, the fourth drawn is "Other": the sum of the fourth and every later part, in the columns, the legend, the readout and the table alike. Among outcomes it has no tone of its own and is neutral.
 
 **The value at rest.** While `(plot width - 2 × (n - 1)) / n` is 36 or more for n columns, the plot width being the chart's width less the axis gutter, every column carries its value above it, or its total when stacked, as the chart formats it. Narrower, the figures would collide, so only the pointed column carries one. Pass a compact format: a figure wider than its column is cut with an ellipsis at rest, keeps the whole of itself in its column's title, and reads whole when the column is pointed at. A column that wide always has its whole gap, so the 2 in the rule is the gap as drawn.

package/payload/src/components/charts/column-chart/index.tsx

@@ -4,7 +4,7 @@ import { useState, type KeyboardEvent } from 'react';
 import { cn } from '@/lib/cn';
 import { useMeridian } from '@/components/charts/meridian';
 import { Readout } from '@/components/charts/readout';
-import { niceTicks, SERIES_VAR, stackPart } from '@/components/charts/scale';
+import { niceTicks, SERIES_VAR, stackPart, ticksBetween } from '@/components/charts/scale';
 import { useSize } from '@/components/charts/use-size';
 
 /** `null` is a period with no data: it keeps its slot, draws no column and reads `noData`, never zero. */
@@ -69,7 +69,7 @@ const opens = (n: number) => Array.from({ length: n > 1 ? GAP : 0 }, (_, k) => n
 const gapOf = (n: number) => (n > 1 ? `calc(${opens(n).map((w) => `clamp(0px, (100% - ${w}px) * 1000, 1px)`).join(' + ')})` : '0px');
 const TONES = { neutral: 'var(--chart-neutral-strong)', warning: 'var(--warning)', critical: 'var(--critical)' };
 const count = (n: number) => n.toLocaleString('en-US');
-/** A value that is missing, or below zero, is no contribution to its column. */
+/** A part that is missing, or below zero, is no contribution to its column: parts make up a whole. */
 const amount = (v: number | null | undefined) => (typeof v === 'number' && v > 0 ? v : 0);
 
 /** A column as drawn: its parts' values, `null` where a part has no data, and whether the whole column has none. */
@@ -149,9 +149,15 @@ export function ColumnChart({
   const fill = height === 'fill';
   const soFar = running ? n - 1 : -1;
 
-  // A period with no data has no height, so the scale is the periods that have one.
-  const ticks = niceTicks(Math.max(1, ...bars.filter((b) => !b.none).map((b) => b.total)), 3, whole);
-  const top = ticks[ticks.length - 1];
+  // A period with no data has no height, so the scale is the periods that have one. Plain, a value under zero is a
+  // fall: the scale goes under zero for it and the column hangs from the zero line (#78). Stacked, parts make a whole.
+  const read = bars.filter((b) => !b.none).map((b) => b.total);
+  const hi = Math.max(0, ...read), lo = Math.min(0, ...read);
+  const signed = !form.parts && lo < 0;
+  const ticks = signed ? ticksBetween(lo, hi, 3, whole) : niceTicks(hi > 0 ? hi : 1, 3, whole);
+  const low = ticks[0], top = ticks[ticks.length - 1];
+  /** A level's height in the scale, as a share of it from the bottom. */
+  const at100 = (v: number) => ((v - low) / (top - low)) * 100;
   const af = axisFormat ?? format;
   const left = Math.max(...ticks.map((t) => af(t).length)) * 6.4 + 10;
   const longest = Math.max(...bars.map((b) => b.label.length));
@@ -213,19 +219,21 @@ export function ColumnChart({
             It stands inside the plot's box with room for all it draws around itself: 28px over the top tick, the height of
             a pointed value and its 4px off the column, and 8px under the zero tick, the half line its label hangs. So the
             focus ring, 4px outside the box, crosses nothing the plot draws, and nothing moves when the width arrives. */}
-        <div className="absolute inset-x-0 top-7 bottom-2">
+        <div className={cn('absolute inset-x-0 top-7', signed ? 'bottom-7' : 'bottom-2')}>
           {ticks.map((t) => (
-            <div key={t} aria-hidden className="absolute right-0 flex items-center" style={{ left: 0, bottom: `${(t / top) * 100}%`, transform: 'translateY(50%)' }}>
+            <div key={t} aria-hidden className="absolute right-0 flex items-center" style={{ left: 0, bottom: `${at100(t)}%`, transform: 'translateY(50%)' }}>
               <span data-tick className="t-num w-(--w) pr-2.5 text-right text-2xs leading-4 text-ink-3" style={{ ['--w' as string]: `${left}px` }}>{af(t)}</span>
               <span className={cn('h-px flex-1', t === 0 ? 'bg-chart-axis' : 'bg-chart-grid')} />
             </div>
           ))}
-          <div className="absolute inset-y-0 right-0 flex items-end" style={{ left, columnGap: gapOf(n) }}>
+          <div className="absolute inset-y-0 right-0 flex" style={{ left, columnGap: gapOf(n) }}>
             {bars.map((b, i) => {
               const pointed = active === i;
               const hot = pointed || (active === null && b.key === highlight);
               const shown = drawn ? drawn.map((p, k) => ({ p, v: b.values[k] ?? 0 })).filter(({ v }) => v > 0) : [];
               const unfinished = i === soFar;
+              // A fall hangs from the zero line: it grows down, its round end and its value under it.
+              const fall = signed && !b.none && b.total < 0;
               // Plain, the pointed value is the chart's readout and takes the tooltip's plane; stacked, the panel is.
               const tip = pointed && !drawn;
               // At rest a label is held to its column. A running period with no data whose words do not fit says "So far",
@@ -241,7 +249,7 @@ export function ColumnChart({
                   data-no-data={b.none ? '' : undefined}
                   // A figure wider than its column is cut at rest, and keeps the whole of itself where the pointer finds it.
                   title={rest && text.length * 7 > column ? text : undefined}
-                  className="group/col relative flex h-full min-w-0 flex-1 items-end"
+                  className="group/col relative h-full min-w-0 flex-1"
                   onPointerEnter={() => set(i)}
                   onPointerDown={() => set(i)}
                 >
@@ -249,19 +257,29 @@ export function ColumnChart({
                       period with no data has no height: it keeps its slot with a dashed hairline just above the baseline,
                       and its word stands over it where a value would. A track the height of the scale was the tallest mark
                       on the chart, and the eye went to the one period that had nothing to say. */}
-                  <div data-box className="relative w-full" style={{ height: b.none ? '0%' : `${(Math.max(0, b.total) / top) * 100}%`, minHeight: (drawn ? Math.max(0, shown.length * 4 - 1) : b.total > 0 ? 2 : 0) + (unfinished ? 2 : 0) }}>
+                  <div
+                    data-box
+                    data-fall={fall ? '' : undefined}
+                    className="absolute inset-x-0"
+                    style={{
+                      ...(fall ? { top: `${100 - at100(0)}%` } : { bottom: `${at100(0)}%` }),
+                      height: b.none ? '0%' : `${(Math.abs(b.total) / (top - low)) * 100}%`,
+                      minHeight: (drawn ? Math.max(0, shown.length * 4 - 1) : b.total !== 0 ? 2 : 0) + (unfinished ? 2 : 0),
+                    }}
+                  >
                     <div
                       className={cn(
-                        'grow-y relative h-full rounded-t-[4px]',
+                        'grow-y relative h-full',
+                        fall ? 'rounded-b-[4px]' : 'rounded-t-[4px]',
                         drawn && 'transition-[box-shadow] duration-(--dur-hover)',
                         drawn && hot && 'z-1 ring-2 ring-ink',
                         // A period still running: a dashed outline, open at the baseline, around a fill at half strength. The
                         // outline has a pixel of its own and a pixel of the card inside it, so it covers no part and holds
                         // its contrast whatever it surrounds; it is what keeps a faded column a column on a dark card. It
                         // needs 4px of its own; in a narrower column it ends with the column and never runs past the plot.
-                        unfinished && 'ml-[min(0px,calc(100%-4px))] border border-b-0 border-dashed border-ink p-px pb-0',
+                        unfinished && cn('ml-[min(0px,calc(100%-4px))] border border-dashed border-ink p-px', fall ? 'border-t-0 pt-0' : 'border-b-0 pb-0'),
                       )}
-                      style={{ ['--i' as string]: i }}
+                      style={{ ['--i' as string]: i, ...(fall ? { transformOrigin: 'center top' } : null) }}
                     >
                       {b.none ? (
                         <div data-no-data-mark aria-hidden className="absolute inset-x-0 bottom-0.5 border-t border-dashed border-line-strong" />
@@ -281,13 +299,13 @@ export function ColumnChart({
                           ))}
                         </div>
                       ) : (
-                        <div className={cn('h-full w-full rounded-t-[4px] transition-colors duration-(--dur-hover)', hot ? 'bg-accent' : 'bg-chart-neutral group-hover/col:bg-chart-neutral-strong', unfinished && 'opacity-50')} />
+                        <div className={cn('h-full w-full transition-colors duration-(--dur-hover)', fall ? 'rounded-b-[4px]' : 'rounded-t-[4px]', hot ? 'bg-accent' : 'bg-chart-neutral group-hover/col:bg-chart-neutral-strong', unfinished && 'opacity-50')} />
                       )}
                     </div>
                     {rest || pointed ? (
                       // One element at rest and pointed at, so its entrance never replays. At rest the value is held to its
                       // column; the tooltip, and a total shown only on pointing, may be wider than theirs.
-                      <span aria-hidden className={cn('pointer-events-none absolute bottom-full mb-1', rest && 'fade-in', tip || !rest ? cn('z-10', placed(i)) : 'inset-x-0')}>
+                      <span aria-hidden className={cn('pointer-events-none absolute', fall ? 'top-full mt-1' : 'bottom-full mb-1', rest && 'fade-in', tip || !rest ? cn('z-10', placed(i)) : 'inset-x-0')}>
                         <span
                           className={cn(
                             't-num block text-2xs leading-4',

package/payload/src/components/charts/column-chart/preview.tsx

@@ -54,6 +54,11 @@ const byEndpoint = ENDPOINTS.map((e) => e.requests);
 // The sample's clock stands at 09:00 UTC on its last day, so that day has run nine hours of its twenty-four.
 const soFar = (d: DailyPoint) => (d === week[week.length - 1] ? Math.round((d.requests * DEMO_NOW.getUTCHours()) / 24) : d.requests);
 const errors = (days: DailyPoint[]) => days.map((d) => ({ key: d.date, label: formatShortDate(d.date), value: d.errors }));
+/** A day's errors less the day before's: a signed series, rises and falls about zero. */
+const lastEight = month.slice(-8);
+const errorChange = lastEight.slice(1).map((d, i) => ({ key: d.date, label: formatShortDate(d.date), value: d.errors - lastEight[i].errors }));
+/** A change reads with its sign, and a fall with the true minus sign, on the axis as at rest. */
+const signed = (read: (n: number) => string) => (n: number) => (n > 0 ? `+${read(n)}` : n < 0 ? `\u2212${read(-n)}` : read(0));
 // The sample has no day of zero, so the zero specimens make one: a day with no errors, a day with no requests at all,
 // and a day with none from one region.
 const noErrors = errors(week).map((c, i) => (i === 2 ? { ...c, value: 0 } : c));
@@ -85,6 +90,11 @@ export default function ColumnChartPreview() {
           <ColumnChart label="Errors per day, last 7 days" height={160} axisFormat={axis} highlight={week[week.length - 1].date} dates={dates(week)} columns={errors(week)} />
         </Plane>
       </Specimen>
+      <Specimen label="Rises and falls" note="A signed series, here each day's errors less the day before's: the scale goes under zero for it and zero is drawn as the axis. A rise stands on the zero line and a fall hangs from it, rounded at its lower end, its value under it. Parts make a whole, so a stacked column draws no part under zero; a signed series is plain.">
+        <Plane on="surface" className="max-w-lg">
+          <ColumnChart label="Change in errors, day on day" height={200} format={signed(formatCompact)} axisFormat={signed((n) => axis(n))} dates={dates(lastEight.slice(1))} columns={errorChange} />
+        </Plane>
+      </Specimen>
       <Specimen label="On the Meridian" note="Given dates, the columns share the page's cursor: point at a column, or move through them with the arrow keys, and the trend above follows.">
         <Meridian dates={dates(month)}>
           <Plane on="surface" className="flex flex-col gap-6">

package/payload/src/components/charts/scale.ts

@@ -13,10 +13,12 @@ export function niceTicks(max: number, count = 4, whole = false): number[] {
  * "Nice" levels from `floor` up to at least `max`: the same steps, counted from `floor` rather than from zero. For a
  * quantity that lives in a narrow band — uptime, a success rate, a cache hit rate — where a zero-based axis would make
  * the one thing the chart is about the smallest mark on it. Both ends land on a step, so the lowest level is the floor
- * the plot is drawn to and `ticks[0]` may be read as it. Returns `[0, 1]` like `niceTicks` when there is nothing to show.
+ * the plot is drawn to and `ticks[0]` may be read as it. A floor under zero is a step under zero, so a signed series
+ * (a net change, a net flow) is drawn on levels either side of it, zero among them. Returns `[0, 1]` like `niceTicks`
+ * when there is nothing to show.
  */
 export function ticksBetween(floor: number, max: number, count = 4, whole = false): number[] {
-  if (max <= 0) return [0, 1];
+  if (max <= 0 && floor >= 0) return [0, 1];
   const raw = (max - floor) / count;
   if (!(raw > 0)) return niceTicks(max, count, whole);
   const mag = 10 ** Math.floor(Math.log10(raw));
@@ -27,8 +29,11 @@ export function ticksBetween(floor: number, max: number, count = 4, whole = fals
   // and a floor of 70% on a 10% step would otherwise come out as 60% — a whole step of the plot spent on nothing.
   const steps = (n: number) => Math.round(n / step * 1e6) / 1e6;
   const top = Math.ceil(steps(max)) * step;
-  const low = floor > 0 ? Math.floor(steps(floor)) * step : 0;
-  return Array.from({ length: Math.round((top - low) / step) + 1 }, (_, i) => Math.round((low + i * step) * 1e6) / 1e6);
+  const low = Math.floor(steps(floor)) * step;
+  // Each level is rounded to a digit under its step, never to a fixed number of places: a ratio near 1.001061 steps
+  // in millionths, and six places would round two of its levels to one (#78).
+  const places = Math.max(0, 1 - Math.floor(Math.log10(step)));
+  return Array.from({ length: Math.round((top - low) / step) + 1 }, (_, i) => Number((low + i * step).toFixed(places)) || 0);
 }
 
 /**