zz-meridian 0.26.0 → 0.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.26.0",
+  "version": "0.27.1",
   "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,37 @@
 
 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.1] · 2026-10-24
+
+### Fixed
+
+- **`verify` and `live` start the app they measure on loopback** ([#81](https://github.com/zhixuan312/zz-meridian/issues/81)). `next start` with no host bound every interface, so for the half hour a full run takes, the app under test — served with the fake data source — answered on the local network. Both start it with `-H 127.0.0.1`; every client of a run already reached it there.
+- **The keyboard walk and the presses open a disclosure before reaching into it** ([#82](https://github.com/zhixuan312/zz-meridian/issues/82)). A closed `<details>` lays its content out without drawing it, so a button inside was tagged as visible and never reached, and its press found nothing at its centre; `verify --full` failed a page with a folded table. Both suites open the disclosures they walk into, and the presses leave shut the one whose own `summary` holds the control.
+- **The shell's Search button keeps its name below 40rem** ([#83](https://github.com/zhixuan312/zz-meridian/issues/83)). The only word naming it was `display: none`, leaving an icon-only button with no accessible name on every view at 390px. It is `sr-only` now: the word is not drawn, and it is still the button's name.
+- **The rail's menu trigger separates the product name from the workspace** ([#84](https://github.com/zhixuan312/zz-meridian/issues/84)). Its visible text ran the two together, and WCAG 2.5.3 asks for the visible label inside the accessible name, where a comma alone kept them apart. A space now sits between them: invisible between two block spans, present for the name.
+- **A table written in a server component lays out like one written on the client** ([#85](https://github.com/zhixuan312/zz-meridian/issues/85)). `Table` found its columns by component identity, and a server component reaches the client table as lazy references, so it found none and drew every column as one. It counts them from the table's shape now: the first row of the first section that has one, its component cells, through fragments.
+- **The audit fails a strip that scrolls sideways at a phone width, and text drawn past a box that does not clip it** ([#86](https://github.com/zhixuan312/zz-meridian/issues/86)). A strip of chips wider than 390px hid its last items with nothing saying so, and a figure too long for its grid column passed while drawn over its neighbour and past its card. The first is reported unless it is the page's scroll region or draws the system's cut-edge fade (`scroll-fade-x`); the second is measured on the glyphs with a `Range`. The stricter reading found the Atlas counts row overflowing its cells at 1024, which now keeps four columns until `xl` and draws a rule only at the start of a row. The prose tables and code blocks that legitimately scroll now draw that fade.
+
+## [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

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/app/system/(atlas)/page.tsx

@@ -63,9 +63,12 @@ export default function AtlasHome() {
       </section>
 
       {/* Counts */}
-      <section aria-label="The system in numbers" className="mt-20 grid grid-cols-2 border-y border-line sm:grid-cols-4 lg:grid-cols-8">
+      {/* Eight columns only where the numbers and their labels fit them: at 1024 with the rail, eight cells were 49px wide
+          and five labels ran past the cell's edge and its neighbour's padding. Four until xl, and a rule only at the start
+          of a row, whichever count is in that row. */}
+      <section aria-label="The system in numbers" className="mt-20 grid grid-cols-2 border-y border-line sm:grid-cols-4 xl:grid-cols-8">
         {counts.map(([n, l], i) => (
-          <div key={l} className={'px-1 py-6 sm:px-5 ' + (i > 0 ? 'lg:border-l lg:border-line' : '')}>
+          <div key={l} className={'border-line px-1 py-6 sm:px-5 ' + (i % 2 ? 'border-l ' : '') + (i % 4 === 0 ? 'sm:border-l-0 ' : 'sm:border-l ') + (i > 0 ? 'xl:border-l' : 'xl:border-l-0')}>
             <p className="t-figure t-num">{n}</p>
             <p className="t-eyebrow mt-2">{l}</p>
           </div>

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.26.0",
+  "version": "0.27.1",
   "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/audit.ts

@@ -18,8 +18,9 @@
  * light-DOM content, and one that is still undefined after the settle wait, are reported as `unmeasured:` instead of passed.
  *
  * Fails (exit 1) on: a route that served another page or dropped a parameter it was asked for, a page whose content
- * region rendered nothing or that threw or logged a failure while it rendered, sideways scroll, text clipped without an
- * ellipsis, text cut with an ellipsis that keeps the whole of it nowhere, two pieces of text in the same place or a line
+ * region rendered nothing or that threw or logged a failure while it rendered, sideways scroll (a strip that scrolls at a
+ * phone width included), text clipped without an ellipsis, text drawn past a box that does not clip it, text cut with an
+ * ellipsis that keeps the whole of it nowhere, two pieces of text in the same place or a line
  * drawn through one, a control with no accessible name or one under 44px on touch, a heading two levels below the one
  * before it, more than one page scroller, and rendered text under its WCAG minimum, an SVG's text included, read by its
  * `fill` against whatever the SVG paints behind it. Prints the design metrics per page: distinct type sizes, weights and
@@ -83,13 +84,13 @@ if (atlasLine) console.log(atlasLine);
 
 type Report = {
   path: string; href: string; text: number;
-  sideways: string[]; clipped: string[]; truncated: string[]; overlap: string[]; focusless: string[]; unnamed: string[]; unmeasured: string[]; scrollers: string[]; contrast: string[]; targets: string[]; headings: string[];
+  sideways: string[]; clipped: string[]; spills: string[]; truncated: string[]; overlap: string[]; focusless: string[]; unnamed: string[]; unmeasured: string[]; scrollers: string[]; contrast: string[]; targets: string[]; headings: string[];
   sizes: number[]; weights: number[]; radii: number[]; ratio: number;
 };
 
 /** Runs inside the page. Plain JavaScript: it is serialised into the browser. */
 const MEASURE = `(() => {
-  const W = innerWidth, out = { path: location.pathname, href: location.href, text: 0, sideways: [], clipped: [], truncated: [], overlap: [], unnamed: [], unmeasured: [], scrollers: [], contrast: [], targets: [], headings: [], sizes: [], weights: [], radii: [], ratio: 0 };
+  const W = innerWidth, out = { path: location.pathname, href: location.href, text: 0, sideways: [], clipped: [], spills: [], truncated: [], overlap: [], unnamed: [], unmeasured: [], scrollers: [], contrast: [], targets: [], headings: [], sizes: [], weights: [], radii: [], ratio: 0 };
   const label = (el) => (el.tagName.toLowerCase() + (el.id ? '#' + el.id : '') + (el.className && typeof el.className === 'string' ? '.' + el.className.trim().split(/\\s+/).slice(0, 3).join('.') : '')).slice(0, 90);
   /* closest() across open roots and slots: deepParent (injected from scripts/lib/deep.ts) steps through both */
   const deepClosest = (el, sel) => { for (let n = el; n; n = deepParent(n)) if (n.matches(sel)) return n; return null; };
@@ -98,6 +99,10 @@ const MEASURE = `(() => {
   if (sr.scrollWidth > W + 1) out.sideways.push('document ' + sr.scrollWidth + 'px wide at ' + W);
   const all = deepAll(document.body).filter((n) => n !== document.body);
   all.filter((n) => n.matches('[data-scroll-region]')).forEach((s) => { if (s.scrollWidth > s.clientWidth + 1) out.sideways.push('scroll region ' + s.scrollWidth + ' > ' + s.clientWidth); });
+  // At a phone width nothing may hide off a sideways edge: a strip that scrolls holds items a reader cannot see, and the
+  // page cannot be scrolled to them. Two are not reported here: the page's own scroll region, which the check above owns,
+  // and a strip that fades at the cut edge (.scroll-fade-x), the system's own way of saying there is more this way.
+  if (W <= 400) all.filter((n) => !n.matches('[data-scroll-region], .scroll-fade-x') && n.clientWidth > 0 && /auto|scroll/.test(getComputedStyle(n).overflowX) && n.scrollWidth > n.clientWidth + 1).forEach((n) => out.sideways.push('strip ' + label(n) + ' ' + n.scrollWidth + ' > ' + n.clientWidth));
   // A dashboard fills its canvas at every size: a data page narrower than the scroll region (less the gutters) is a
   // centred strip on a wide screen.
   all.filter((n) => n.matches('[data-page-width="data"]')).forEach((p) => { const region = deepClosest(p, '[data-scroll-region]'); if (region && p.getBoundingClientRect().width < region.clientWidth - 2) out.sideways.push('data page ' + Math.round(p.getBoundingClientRect().width) + 'px wide in a ' + region.clientWidth + 'px canvas (it should fill it)'); });
@@ -170,6 +175,29 @@ const MEASURE = `(() => {
       texts.push(fs); out.sizes.push(Math.round(fs)); out.weights.push(+c.fontWeight);
       if (el.scrollWidth > el.clientWidth + 1 && c.textOverflow !== 'ellipsis' && /hidden|clip/.test(c.overflow) && el.clientWidth > 0) out.clipped.push(label(el) + ' "' + el.textContent.trim().slice(0, 30) + '"');
       if (el.scrollWidth > el.clientWidth + 1 && c.textOverflow === 'ellipsis' && /hidden|clip/.test(c.overflowX) && el.clientWidth > 0 && !titled(el)) out.truncated.push(label(el) + ' "' + el.textContent.trim().slice(0, 30) + '"');
+      // Text drawn past a box that does not clip it runs over whatever is beside that box: a figure too long for its grid
+      // column, over its neighbour and past its card's edge. Measured on the glyphs with a Range, since scrollWidth also
+      // counts an enlarged touch target. A clipping box ends the walk: what it hides is the clipped check's business, and
+      // a positioned box may overhang on purpose.
+      if (!(el instanceof SVGElement) && !/absolute|fixed/.test(c.position)) {
+        let left = Infinity, right = -Infinity;
+        for (const node of el.childNodes) {
+          if (node.nodeType !== 3 || !node.textContent.trim()) continue;
+          const range = document.createRange(); range.selectNodeContents(node);
+          const b = range.getBoundingClientRect();
+          left = Math.min(left, b.left); right = Math.max(right, b.right);
+        }
+        if (right > left) for (let n = el; n && n !== document.documentElement; n = deepParent(n)) {
+          const nc = getComputedStyle(n);
+          if (/hidden|clip|auto|scroll/.test(nc.overflowX) || /absolute|fixed/.test(nc.position)) break;
+          const b = n.getBoundingClientRect();
+          // display: contents draws no box of its own (a card's phone layout uses it to unwrap a tile): its rect is at
+          // the origin and zero wide, and comparing glyphs to it reported every figure on the page.
+          if (nc.display === 'contents' || (!b.width && !b.height)) continue;
+          const past = Math.max(right - (b.right - (parseFloat(nc.borderRightWidth) || 0)), b.left + (parseFloat(nc.borderLeftWidth) || 0) - left);
+          if (past > 1) { out.spills.push(label(el) + ' "' + el.textContent.trim().slice(0, 30) + '" spills its box by ' + Math.round(past) + 'px'); break; }
+        }
+      }
       inked.push(el);
       // Gradient text paints its glyphs with a clipped background (color is transparent); both ends sit at accent-ink's
       // lightness, which the contrast gate already holds, so it is not measured here.
@@ -274,7 +302,7 @@ const MEASURE = `(() => {
     // Sampled every two pixels: four samples is eight pixels of line inside the text.
     for (const [el, k] of inside) if (k >= 4) out.overlap.push('a line (' + label(g) + ') is drawn through ' + quote(el));
   }
-  out.overlap = [...new Set(out.overlap)].slice(0, 8); out.truncated = [...new Set(out.truncated)].slice(0, 8);
+  out.overlap = [...new Set(out.overlap)].slice(0, 8); out.truncated = [...new Set(out.truncated)].slice(0, 8); out.spills = [...new Set(out.spills)].slice(0, 8);
   // Headings descend one level at a time, so a screen reader's outline has no holes.
   // A specimen's headings are the card's own, at the level the card uses where it is placed, not the documentation page's.
   const levels = [...document.querySelectorAll('h1,h2,h3,h4,h5,h6')].filter((h) => !h.closest('[aria-hidden="true"]') && !h.closest('[data-specimen]')).map((h) => +h.tagName[1]);
@@ -370,6 +398,7 @@ const run = async (route: string, width: number, theme: string, embed: boolean)
     ...(r.text < 24 ? [`the page holds ${r.text} characters of text — it rendered nothing, or only its loading state`] : []),
     ...r.sideways.map((x) => 'sideways: ' + x),
     ...r.clipped.map((x) => 'clipped: ' + x),
+    ...r.spills.map((x) => 'spills: ' + x),
     ...r.truncated.map((x) => 'truncated: ' + x + ' is cut with an ellipsis and no title holds the whole of it'),
     ...r.overlap.map((x) => 'overlap: ' + x),
     ...r.unnamed.map((x) => 'unnamed: ' + x),

package/payload/scripts/interactions.ts

@@ -77,6 +77,14 @@ const LIST = `(() => {${CONTROLS}
 const ARM = (name: string, nth: number, key: string, keyNth: number) => `(() => {${CONTROLS}
   const all = pressable(deepAll(document.body));
   const el = all.filter((b) => nameOf(b) === ${JSON.stringify(name)})[${nth}] ?? all.filter((b) => keyOf(b) === ${JSON.stringify(key)})[${keyNth}]; if (!el) return null;
+  // A control inside a closed disclosure is laid out but not drawn: open the ones it sits in, as a reader does before
+  // pressing it. The one whose own summary holds the control stays shut, since pressing that summary is the control (#82).
+  for (let n = deepParent(el); n; n = deepParent(n)) {
+    if (n.localName !== 'details' || n.open) continue;
+    const own = [...n.children].find((c) => c.localName === 'summary');
+    if (own && own.contains(el)) continue;
+    n.open = true;
+  }
   el.scrollIntoView({ block: 'center', inline: 'nearest' });
   const r = el.getBoundingClientRect(), x = r.left + r.width / 2, y = r.top + r.height / 2;
   const hit = document.elementFromPoint(x, y);

package/payload/scripts/keyboard.ts

@@ -51,6 +51,9 @@ const TAG = `(() => {
   // :disabled, not [disabled]: the attribute is only the control's own, and a fieldset with disabled disables every
   // control inside it without touching their attributes. A FormSection in its read-only or saving state is exactly
   // that, so the attribute form expected a correctly-disabled input to be reachable, and failed on a page that was right.
+  // A reader opens a disclosure to reach what is in it. A closed <details> lays its content out without drawing it, so
+  // the content has a real box while Tab skips it: tagged, it was reported as never reached (#82).
+  for (const n of deepAll(document.body)) if (n.localName === 'details' && !n.open) n.open = true;
   const every = deepAll(document.body).filter((n) => n !== document.body);
   const all = every.filter((el) => el.matches('a[href], button:not(:disabled), input:not([type=hidden]):not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])'))
     .filter((el) => vis(el) && el.tabIndex >= 0);

package/payload/scripts/live.ts

@@ -66,7 +66,8 @@ const status = (port: number) => new Promise<number | null>((resolve) => {
 });
 
 async function serve(port: number): Promise<ChildProcess> {
-  const server = spawn(bin('next'), ['start', '-p', String(port)], { cwd: ROOT, env: process.env, stdio: 'ignore', detached: true });
+  // Loopback only, as scripts/verify.ts starts it: every client here is on this machine (#81).
+  const server = spawn(bin('next'), ['start', '-H', '127.0.0.1', '-p', String(port)], { cwd: ROOT, env: process.env, stdio: 'ignore', detached: true });
   started.push(server);
   for (let i = 0; i < 120; i++) {
     const code = await status(port);

package/payload/scripts/verify.ts

@@ -391,10 +391,10 @@ process.on('exit', stopAll);
 // An interrupted run does not emit 'exit' by itself, and the detached servers and running suites would outlive it.
 for (const sig of ['SIGINT', 'SIGTERM'] as const) process.on(sig, () => process.exit(sig === 'SIGINT' ? 130 : 143));
 
-/** Start the built app on a free port with the given environment and wait until it answers. */
+/** Start the built app on a free port, loopback only, and wait until it answers: every client here reaches 127.0.0.1 (#81). */
 async function start(env: NodeJS.ProcessEnv) {
   const port = await freePort();
-  const server = spawn(bin('next'), ['start', '-p', String(port)], { cwd: ROOT, env, stdio: 'ignore', detached: true });
+  const server = spawn(bin('next'), ['start', '-H', '127.0.0.1', '-p', String(port)], { cwd: ROOT, env, stdio: 'ignore', detached: true });
   children.push(server);
   for (let i = 0; i < 120; i++) {
     try { if ((await fetch(`http://127.0.0.1:${port}/`)).status < 500) return { port, server }; } catch { await new Promise((r) => setTimeout(r, 500)); }

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);
 }
 
 /**

package/payload/src/components/charts/trend-chart/README.md

@@ -7,7 +7,7 @@ Status: beta
 ## Anatomy
 
 1. **Plot**: horizontal gridlines in `chart-grid`, the baseline in `chart-axis`, 1px, crisp.
-2. **Y axis**: 3 or 4 "nice" ticks from zero (whole numbers only with `whole`, for a chart of counts or a stack of them, so a top of 10 draws no level at 2.5 or 7.5), labels `text-2xs` `ink-3`, tabular, right-aligned in a gutter sized to the longest label. Axis labels drop cents and exact digits (`$12`, `1.2M`), and money from $10,000 reads at a glance (`$25K`, `$5.0B`) so a large scale does not widen the gutter; the tooltip and table carry the exact amounts.
+2. **Y axis**: 3 or 4 "nice" ticks from zero, or from a step under zero when a value falls under it, up to a step at or over the highest value (whole numbers only with `whole`, for a chart of counts or a stack of them, so a top of 10 draws no level at 2.5 or 7.5), labels `text-2xs` `ink-3`, tabular, right-aligned in a gutter sized to the longest label. Axis labels drop cents and exact digits (`$12`, `1.2M`), and money from $10,000 reads at a glance (`$25K`, `$5.0B`) so a large scale does not widen the gutter; the tooltip and table carry the exact amounts.
 3. **X axis**: dates, `text-2xs` `ink-3`, one label per 92px, counted back from today so the last day is always labelled.
 4. **Series**: monotone curves that never overshoot their data.
 5. **Band** (with `band`): the region from the floor up to the band's ceiling, in `fill-track`, under the gridlines, its top edge drawn as the axis is, and its label at an end of that edge — in `ink-2`, since it stands over the fill as often as over the card and `ink-3` on `fill-track` is 4.43:1 in light.
@@ -34,6 +34,10 @@ Status: beta
 
 **A band is a region; a baseline is a line.** They are not interchangeable and a chart may carry both: a median is one level, a band is everything under one. Where a chart has both, the band's label is placed first, so what the page is judged against is named before what is usual.
 
+**Below zero.** A signed series, such as a net change or a net flow, is drawn whole: without a floor the axis holds zero and every value, so it goes down to a step under the lowest one, zero is one of its levels and is drawn as the axis (`chart-axis`), and an `area` is filled to the zero line from either side, never down to the lowest level. The top is the data's own: a ratio that peaks at 0.4% is drawn to a step over 0.4%, not along the floor of a scale to 100%.
+
+**A format of its own** (`format` as a function, with `axisFormat`): the named formats are what a server component passes, since a function cannot cross into a client one. From a client component, `format` may be a function for a figure no name says exactly: a price to four decimals, a ratio to six, an amount in a currency other than the product's. It reads the readout and the table, and the axis too unless `axisFormat` says otherwise, which is right only while the format is exact: one that rounds prints a tick it does not stand at. A missing value reads `—` whichever format is given. The levels are told apart however fine they are: each is rounded to a digit under its step, so a ratio a millionth apart keeps one level per tick.
+
 **Floor** (`floor`): the lowest level the axis shows, for a quantity that lives in a narrow band. Uptime, a success rate and a cache hit rate are 100% on almost every day and never near zero, so an axis from zero spends most of the plot on a range no day reaches and leaves the one thing the card is about as a shallow dent — Services' uptime line sat pinned to the 100% gridline with 82% of the panel empty and its dips 32px of 180. The floor is snapped *down* to a step, so the level the plot is drawn to is one the axis names, and it is held at or under the lowest value drawn: a hint, never a crop, so the scale widens to the data and never hides a day below its own axis. For `line` and `dashed` series only — an `area` and every stack are read by their height, which a floor changes the meaning of. A caption should name the rule ("on an axis that starts under its lowest day rather than at zero") and not the number, which the next bad day would make wrong.
 
 **Marks** (`marks: { dates, tone, label }`): the days the page names in its own words — the days a band left out, a change of state — marked so a reader finds them rather than hunting for one among 360 points. Each is a dot on the first series' own point, ringed in `surface` as the cursor's dots are, and a stem from the point down to the axis at 45% of the same tone. The stem is the load-bearing half: a day can leave a band on a measure the chart does not draw — its error rate, not its p95 — and then its point stands *inside* the band's region, where a 3px dot is lost in the line. A date the chart does not draw, and a day with no value, are skipped rather than marked at the wrong point. The tone is the caller's to say, as a finding's is: `warning` for a day worth a look, `neutral` for one that is only worth knowing. The caption names the count ("Marked: 3 days outside the band").
@@ -125,7 +129,7 @@ import { TrendChart } from '@/components/charts/trend-chart';
 />
 ```
 
-Props: `dates`, `series` (`key`, `label`, `values`, `color`, `kind`), `format` (`count` | `compact` | `cost` | `cost-compact` | `duration` | `percent`), `height` (number or `fill`), `label`, `legend` (defaults to two or more series), `tick`, `stacked`, `whole` (the values are counts: whole levels only), `baseline`, `band`, `floor`, `marks`, `running` (the last point is still in progress).
+Props: `dates`, `series` (`key`, `label`, `values`, `color`, `kind`), `format` (`count` | `compact` | `cost` | `cost-compact` | `duration` | `percent`, or a function from a client component), `axisFormat` (with a function `format`), `height` (number or `fill`), `label`, `legend` (defaults to two or more series), `tick`, `stacked`, `whole` (the values are counts: whole levels only), `baseline`, `band`, `floor`, `marks`, `running` (the last point is still in progress).
 
 The colour of a stacked part is `stackPart(place, parts)` from `@/components/charts/scale`, the one mix every one-hue stack takes: the accent into the surface, by the part's place from the bottom.
 

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

@@ -92,6 +92,7 @@ export function TrendChart({
   dates,
   series,
   format = 'count',
+  axisFormat,
   height = 248,
   label,
   legend,
@@ -108,7 +109,16 @@ export function TrendChart({
 }: {
   dates: string[];
   series: TrendSeries[];
-  format?: NumberFormat;
+  /**
+   * How a value reads, in the readout and in the table, and on the axis unless `axisFormat` says otherwise. A name
+   * (`'cost'`, `'percent'`) is what a server component passes, since a function cannot cross into a client one; a
+   * function is for a figure no name says exactly, from a client component: a price to four decimals, a ratio to six,
+   * an amount in its own currency (#78).
+   */
+  format?: NumberFormat | ((n: number) => string);
+  /** How a tick reads, when `format` is a function: an axis formatter, true at every tick. Without one the axis reads
+   * as `format` does, which is right only while `format` is exact: one that rounds prints a tick it does not stand at. */
+  axisFormat?: (n: number) => string;
   /** Pixels, or `fill` to take the height its card gives it (never under 220px). */
   height?: number | 'fill';
   /** What the chart shows, for screen readers: "Requests per day". */
@@ -158,8 +168,9 @@ export function TrendChart({
   const gid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
   const h = fill ? Math.max(220, size.height) : height;
 
-  const fmt = FORMATTERS[format];
-  const axis = AXIS_FORMATTERS[format];
+  const named = typeof format === 'string';
+  const fmt = named ? FORMATTERS[format] : (n: number | null) => (n === null ? '—' : format(n));
+  const axis = axisFormat ?? (named ? AXIS_FORMATTERS[format] : format);
   // Stacked, each band sits on the sum of the ones below it; a missing value is no contribution that day.
   const bases = useMemo(() => {
     if (!stacked) return null;
@@ -174,10 +185,13 @@ export function TrendChart({
   // Stacked parts are one whole, so they share one hue, each by its place in the stack. A series given its own colour keeps it.
   const colorOf = (s: TrendSeries, k: number) => (stacked && !s.color ? stackPart(k, series.length) : SERIES_VAR(s.color ?? (s.kind === 'dashed' ? 'neutral' : 'accent')));
   const values = totals ?? series.flatMap((s) => s.values.filter((v): v is number => v !== null));
-  const max = Math.max(1, baseline?.value ?? 0, band?.value ?? 0, ...values);
   // A floor is a hint and never a crop: it is held at or under the lowest value drawn, or a day that fell further than
-  // the floor would be drawn below the plot's own axis. So the scale widens to the data and never hides it.
-  const from = floor === undefined ? 0 : Math.min(floor, ...values);
+  // the floor would be drawn below the plot's own axis. So the scale widens to the data and never hides it. Without a
+  // floor the axis holds zero, and a value under zero, a net change or a net flow, takes the axis down with it (#80).
+  const from = Math.min(floor ?? 0, ...values);
+  // The top is the data's, never a fixed 1: a ratio that peaks at 0.004 is drawn to its own top, not lost along the
+  // floor of a scale to 1. A scale with nothing above its floor falls back to the unit one.
+  const max = Math.max(floor === undefined ? 0 : -Infinity, baseline?.value ?? -Infinity, band?.value ?? -Infinity, ...values);
   // The levels, and the floor the plot is drawn to: `ticks[0]` is 0 unless the chart was given a floor, and the two ends
   // of the scale are what every point, area, band and level line is measured against.
   const ticks = ticksBetween(from, max, h < 200 ? 3 : 4, whole);
@@ -221,11 +235,14 @@ export function TrendChart({
         const open = running && s.kind !== 'dashed' && typeof s.values[n - 1] === 'number' && last.length > 1;
         const end = (r: [number, number][]) => r.length - (open && r === last ? 2 : 1);
         const line = segs.map((r) => monotonePath(r, 0, end(r))).join('');
-        const area = segs.map((r) => `${monotonePath(r, 0, end(r))}L${r[end(r)][0]},${pad.t + H}L${r[0][0]},${pad.t + H}Z`).join('');
+        // An area is filled down to zero, which is the floor of the plot unless the axis goes under it: a signed area
+        // is filled to its zero line from either side, never down to the lowest level.
+        const base = y(Math.min(Math.max(0, low), top));
+        const area = segs.map((r) => `${monotonePath(r, 0, end(r))}L${r[end(r)][0]},${base}L${r[0][0]},${base}Z`).join('');
         return { s, line, area, tail: open ? monotonePath(last, last.length - 2) : '' };
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [series, width, h, top, running],
+    [series, width, h, low, top, running],
   );
 
   // What the plot draws, as the label placer needs it: every line, and the top of every band of a stack.

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

@@ -3,6 +3,7 @@
 import { Specimen, State, Plane } from '@/system/specimen';
 import { DEMO_NOW } from '@/system/fixtures/sample';
 import { demoSeries, REGIONS } from '@/system/fixtures/company';
+import { AXIS_FORMATTERS } from '@/lib/format';
 import { TrendChart } from '.';
 
 const { current, previous } = demoSeries('30d');
@@ -18,6 +19,15 @@ const banded = current.map((d, i) => (i === 26 ? Math.round(d.p95 * 0.7) : SPIKE
 const DOWN = new Set([3, 11, 12, 19, 27]);
 const uptime = current.map((_, i) => (DOWN.has(i) ? 5 / 6 : 1));
 
+/** A day's requests less the day before's: rises and falls about zero. */
+const change = current.slice(1).map((d, i) => d.requests - current[i].requests);
+/** A change reads with its sign, and a fall with the true minus sign: exact in the readout, short on the axis. */
+const sign = (read: (n: number) => string) => (n: number) => (n > 0 ? `+${read(n)}` : n < 0 ? `\u2212${read(-n)}` : read(0));
+const signed = sign((n) => n.toLocaleString('en-US'));
+const signedAxis = sign((n) => AXIS_FORMATTERS.count(n));
+/** A price that lives a few ten-thousandths about par, which no named format reads exactly. */
+const price = current.map((d, i) => Math.round((1 + Math.sin(i / 3) * 0.0004 + (d.requests % 7) * 0.00002) * 10_000) / 10_000);
+
 export default function TrendChartPreview() {
   return (
     <>
@@ -62,6 +72,16 @@ export default function TrendChartPreview() {
           />
         </Plane>
       </Specimen>
+      <Specimen label="Below zero" note="A signed series, here each day's requests less the day before's. Without a floor the axis holds zero and every value: it goes under zero for a fall, zero is drawn as the axis, and an area is filled to the zero line from either side. The readout is exact and signed; axisFormat keeps the ticks short.">
+        <Plane on="surface">
+          <TrendChart label="Change in requests, day on day" height={168} format={signed} axisFormat={signedAxis} dates={dates.slice(1)} series={[{ key: 'c', label: 'Change', values: change, kind: 'area' }]} />
+        </Plane>
+      </Specimen>
+      <Specimen label="A format of its own" note="format as a function, from a client component: for a figure no name says exactly, here a price to four decimals, read in the readout and the table, with axisFormat for the ticks. A server component names its format, since a function cannot cross into a client one.">
+        <Plane on="surface">
+          <TrendChart label="Price a day" height={168} format={(n) => n.toFixed(4)} axisFormat={(n) => n.toFixed(4)} floor={0.999} dates={dates} series={[{ key: 'p', label: 'Price', values: price, kind: 'line' }]} />
+        </Plane>
+      </Specimen>
       <Specimen label="Inside a band" note="band: the region the page is judged against, from the floor up to its ceiling, in the track's own wash, its top edge drawn as the axis is and named at an end of it. marks: the days the page names, a dot on the day's own point and a stem to the axis. The third day here left the band on something this chart does not draw, so its point stands inside the region — which is why a mark is a stem and not only a dot.">
         <Plane on="surface">
           <TrendChart

package/payload/src/components/patterns/prose/index.tsx

@@ -54,7 +54,7 @@ const COMPONENTS: Components = {
   code: ({ children, className }) =>
     className ? <code className={className}>{children}</code> : <code className="rounded-xs border border-line bg-surface-sunk px-1 py-px font-mono text-[0.86em] text-ink [overflow-wrap:anywhere]">{children}</code>,
   pre: ({ children }) => <pre className="my-4 rounded-lg border border-line bg-surface-sunk p-4 font-mono text-sm leading-relaxed whitespace-pre-wrap text-ink [overflow-wrap:anywhere] [&_code]:border-0 [&_code]:bg-transparent [&_code]:p-0">{children}</pre>,
-  table: ({ children }) => <div className="my-5 overflow-x-auto rounded-lg border border-line"><table className="w-full text-left text-sm leading-normal">{children}</table></div>,
+  table: ({ children }) => <div className="scroll-fade-x my-5 overflow-x-auto rounded-lg border border-line"><table className="w-full text-left text-sm leading-normal">{children}</table></div>,
   thead: ({ children }) => <thead className="border-b border-line bg-surface-sunk">{children}</thead>,
   th: ({ children }) => <th className="px-3 py-2 text-xs font-medium whitespace-nowrap text-ink-3">{children}</th>,
   tr: ({ children }) => <tr className="border-b border-line last:border-0">{children}</tr>,
@@ -79,7 +79,7 @@ const COMPONENTS: Components = {
 const STACKED: Components = {
   ...COMPONENTS,
   table: ({ children }) => (
-    <div className="my-5 overflow-x-auto rounded-lg border border-line @container">
+    <div className="scroll-fade-x my-5 overflow-x-auto rounded-lg border border-line @container">
       <table className={cn('w-full text-left text-sm leading-normal',
         '@max-[480px]:block @max-[480px]:[&>thead]:hidden @max-[480px]:[&>tbody]:block @max-[480px]:[&_tr]:block @max-[480px]:[&_tr]:px-3 @max-[480px]:[&_tr]:py-2.5',
         '@max-[480px]:[&_td]:block @max-[480px]:[&_td]:p-0 @max-[480px]:[&_td+td]:mt-2 @max-[480px]:[&_td:first-child]:font-medium @max-[480px]:[&_td:first-child]:text-ink',

package/payload/src/components/patterns/rail/index.tsx

@@ -144,8 +144,9 @@ export function Rail({
             <button type="button" aria-label={`${app.name}, ${workspace}: ${switcher ? 'workspace menu' : 'account menu'}`} className="group -mx-1.5 flex min-w-0 flex-1 items-center gap-2.5 rounded-md px-1.5 py-1.5 text-left hover:bg-fill-hover data-[state=open]:bg-fill-hover">
               <AppMark size={28} />
               <span className="min-w-0 flex-1">
-                <span className="block truncate text-md leading-tight font-semibold tracking-[-0.015em]">{app.name}</span>
-                <span className="t-eyebrow mt-0.5 block truncate">{workspace}</span>
+                {/* Either may be cut to the rail's width; the title holds the whole of it, as every cut text keeps (#79). */}
+                <span title={app.name} className="block truncate text-md leading-tight font-semibold tracking-[-0.015em]">{app.name}</span>{' '}
+                <span title={workspace} className="t-eyebrow mt-0.5 block truncate">{workspace}</span>
               </span>
               {/* `ChevronsUpDown` is the glyph for choosing between things; with nothing to switch, the row is the menu. */}
               {switcher ? <ChevronsUpDown className="size-3.5 text-ink-3 group-hover:text-ink-2" /> : <ChevronDown className="size-3.5 text-ink-3 group-hover:text-ink-2" />}

package/payload/src/components/patterns/shell-tools/index.tsx

@@ -31,7 +31,8 @@ export function ShellTools({ alerts = [], now }: { alerts?: Alert[]; /** The dat
         className="press hit flex h-9 items-center gap-2.5 rounded-full border border-line-strong bg-surface/60 pr-1.5 pl-3 text-sm text-ink-3 shadow-control backdrop-blur-md transition-[color,background-color,border-color,transform] hover:border-line-control/40 hover:text-ink-2 @max-[40rem]:w-9 @max-[40rem]:justify-center @max-[40rem]:px-0"
       >
         <Search className="size-4" strokeWidth={1.75} />
-        <span className="w-36 text-left @max-[48rem]:w-20 @max-[40rem]:hidden">Search</span>
+        {/* Below 40rem the word is only its own name: `sr-only`, never `hidden`, so the icon-only button is still announced (#83). */}
+        <span className="w-36 text-left @max-[48rem]:w-20 @max-[40rem]:sr-only">Search</span>
         <Kbd className="keyboard-only @max-[40rem]:hidden">⌘K</Kbd>
       </button>
       <Popover open={open} onOpenChange={setOpen}>

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react';
-import { Children, isValidElement, type CSSProperties, type HTMLAttributes, type ReactNode, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
+import { Children, Fragment, isValidElement, type CSSProperties, type HTMLAttributes, type ReactElement, type ReactNode, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
 import { cn } from '@/lib/cn';
 
 /**
@@ -13,8 +13,9 @@ import { cn } from '@/lib/cn';
  * 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.
+ * the table's columns, so a row's border, hover and selection run across the gaps. The columns are counted from the shape
+ * of the table as its own JSX writes it — the first row of its first section that has one — so a table written in a server
+ * component lays out exactly as one written on the client.
  *
  * `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.
@@ -27,14 +28,26 @@ const JUSTIFY = { left: undefined, right: 'justify-end', center: 'justify-center
 
 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. */
+/** The elements a node writes, through fragments: the table's own JSX as a list. */
+function elementsOf(node: ReactNode): ReactElement<Props>[] {
+  return Children.toArray(node).flatMap((c) => {
+    if (!isValidElement<Props>(c)) return [];
+    return c.type === Fragment ? elementsOf(c.props.children) : [c];
+  });
+}
+
+/**
+ * Which columns the table draws, read from its shape and never from which component a cell is: the first row of its
+ * first section that has one, and that row's component cells (a raw `<th data-check>` is DataTable's selection box, not a
+ * column). A server component renders the same parts as lazy references rather than these functions, and a table whose
+ * columns were counted by identity laid every one of them out as a single column (#85).
+ */
 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;
+  for (const section of elementsOf(node)) {
+    const row = elementsOf(section.props.children)[0];
+    if (!row) continue;
+    const cells = elementsOf(row.props.children).filter((c) => typeof c.type !== 'string');
+    if (cells.length > 0) return cells.map((c) => c.props.hideBelow);
   }
   return undefined;
 }

package/payload/src/system/markdown.tsx

@@ -34,9 +34,9 @@ export function Doc({ md, className }: { md: string; className?: string }) {
           a: ({ href, children }) => <a href={href} className="link">{children}</a>,
           code: ({ children, className: c }) =>
             c ? <code className={c}>{children}</code> : <code className="t-code">{children}</code>,
-          pre: ({ children }) => <pre className="my-5 overflow-x-auto rounded-lg border border-line bg-surface-sunk p-5 font-mono text-sm leading-relaxed text-ink [&_code]:border-0 [&_code]:bg-transparent [&_code]:p-0">{children}</pre>,
+          pre: ({ children }) => <pre className="scroll-fade-x my-5 overflow-x-auto rounded-lg border border-line bg-surface-sunk p-5 font-mono text-sm leading-relaxed text-ink [&_code]:border-0 [&_code]:bg-transparent [&_code]:p-0">{children}</pre>,
           table: ({ children }) => (
-            <div className="my-6 overflow-x-auto rounded-lg border border-line bg-surface/60">
+            <div className="scroll-fade-x my-6 overflow-x-auto rounded-lg border border-line bg-surface/60">
               <table className="w-full min-w-[560px] text-left text-sm leading-normal">{children}</table>
             </div>
           ),

package/payload/tests/chart-scale.test.ts

@@ -40,6 +40,20 @@ describe('ticksBetween: the levels a chart is drawn on', () => {
   });
 });
 
+describe('ticksBetween for a signed series and a fine one (#78)', () => {
+  it('counts a floor under zero down to a step under it, with zero among the levels', () => {
+    expect(ticksBetween(-35, 80, 4)).toEqual([-50, 0, 50, 100]);
+    expect(ticksBetween(-12, 0, 3)).toEqual([-15, -10, -5, 0]);
+    expect(ticksBetween(-0.3, 0.2, 4)).toContain(0);
+    expect(Object.is(ticksBetween(-0.3, 0.2, 4).find((t) => t === 0), 0)).toBe(true);
+  });
+  it('tells levels a millionth apart from one another', () => {
+    const ticks = ticksBetween(1.00106, 1.00108, 4);
+    expect(ticks).toEqual([1.00106, 1.001065, 1.00107, 1.001075, 1.00108]);
+    expect(new Set(ticksBetween(0.99970, 1.0001, 4)).size).toBe(ticksBetween(0.99970, 1.0001, 4).length);
+  });
+});
+
 describe('niceTicks for counts (#72)', () => {
   it('steps by whole numbers only, so a top of 1 is ticked 0 and 1 and nothing between', () => {
     expect(niceTicks(1, 3)).toEqual([0, 0.5, 1]);

package/payload/tests/column-chart-signed.test.tsx

@@ -0,0 +1,59 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('@/components/charts/use-size', async () => {
+  const { useRef } = await import('react');
+  return { useSize: () => [useRef(null), { width: 720, height: 0 }] as const };
+});
+
+import { ColumnChart } from '@/components/charts/column-chart';
+
+// A daily net change: rises and falls about zero (#78).
+const net = [12, -8, 20, -35, 5].map((value, i) => ({ key: `d${i}`, label: `Day ${i + 1}`, value }));
+const box = (c: HTMLElement, key: string) => c.querySelector<HTMLElement>(`[data-column="${key}"] [data-box]`)!;
+const ticks = (c: HTMLElement) => [...c.querySelectorAll('[data-tick]')].map((t) => t.textContent);
+const level = (c: HTMLElement, text: string) => [...c.querySelectorAll<HTMLElement>('[data-tick]')].find((t) => t.textContent === text)!.parentElement!.style.bottom;
+
+describe('a column chart of a signed series (#78)', () => {
+  it('takes its scale under zero, with zero a level, and stands every column on the zero line', () => {
+    const { container } = render(<ColumnChart label="Net change a day" columns={net} />);
+    // From -35 to 20 in three steps: a step of 20, so the levels run -40 to 20 and zero stands two thirds up.
+    expect(ticks(container)).toEqual(['-40', '-20', '0', '20']);
+    const pct = (v: string) => parseFloat(v);
+    expect(pct(level(container, '0'))).toBeCloseTo(66.667, 2);
+    // A rise stands on the zero line; a fall hangs from it, to its own depth.
+    expect(pct(box(container, 'd0').style.bottom)).toBeCloseTo(66.667, 2);
+    expect(box(container, 'd0').hasAttribute('data-fall')).toBe(false);
+    expect(pct(box(container, 'd0').style.height)).toBeCloseTo(20, 2);
+    expect(pct(box(container, 'd3').style.top)).toBeCloseTo(33.333, 2);
+    expect(box(container, 'd3').hasAttribute('data-fall')).toBe(true);
+    expect(pct(box(container, 'd3').style.height)).toBeCloseTo(58.333, 2);
+    expect(pct(box(container, 'd1').style.height)).toBeCloseTo(13.333, 2);
+  });
+
+  it('writes a fall\'s value under it and rounds its lower end', () => {
+    const { container } = render(<ColumnChart label="Net change a day" columns={net} />);
+    const fall = box(container, 'd3');
+    expect(fall.querySelector('[data-value]')).toHaveTextContent('-35');
+    expect(fall.querySelector('[data-value]')!.closest('.top-full')).not.toBeNull();
+    expect(fall.querySelector('.rounded-b-\\[4px\\]')).not.toBeNull();
+    expect(box(container, 'd0').querySelector('[data-value]')!.closest('.bottom-full')).not.toBeNull();
+  });
+
+  it('reads a fall as its value in the table, signed', () => {
+    const { container } = render(<ColumnChart label="Net change a day" columns={net} />);
+    expect([...container.querySelectorAll('table tbody td')].map((t) => t.textContent)).toEqual(['12', '-8', '20', '-35', '5']);
+  });
+
+  it('keeps a scale from zero while no value falls under it', () => {
+    const { container } = render(<ColumnChart label="Count a day" columns={net.map((c) => ({ ...c, value: Math.abs(c.value) }))} />);
+    expect(ticks(container)[0]).toBe('0');
+    expect(level(container, '0')).toBe('0%');
+  });
+
+  it('leaves a stacked column\'s parts a whole: a part under zero is no contribution', () => {
+    const { container } = render(<ColumnChart label="Calls by region" parts={[{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }]} columns={[{ key: 'x', label: 'X', values: [10, -4] }]} />);
+    expect(ticks(container)[0]).toBe('0');
+    expect([...container.querySelectorAll('table tbody td')].map((t) => t.textContent)).toEqual(['10', '0', '10']);
+  });
+});

package/payload/tests/rail-name-title.test.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useRouter: () => ({ push() {}, replace() {}, refresh() {}, back() {}, forward() {}, prefetch() {} }),
+}));
+// A product name of 23 characters, three words: the rail's head cuts it at every width (#79).
+vi.mock('@/app.config', async (real) => ({ ...(await real<typeof import('@/app.config')>()), app: { ...(await real<typeof import('@/app.config')>()).app, name: 'Northwind Treasury Console' } }));
+
+import { Home } from 'lucide-react';
+import { Rail } from '@/components/patterns/rail';
+
+const nav = [{ label: 'Group', items: [{ href: '/', label: 'Home', icon: Home, needs: 'public' as const }] }];
+
+describe('the rail\'s head (#79)', () => {
+  it('keeps the whole product name and workspace in a title, so a name cut to the rail is still read whole', () => {
+    const { container } = render(<Rail nav={nav} user={null} workspace="Treasury operations, Europe and Asia" />);
+    const name = [...container.querySelectorAll('span.truncate')].find((s) => s.textContent === 'Northwind Treasury Console');
+    const workspace = [...container.querySelectorAll('span.truncate')].find((s) => s.textContent === 'Treasury operations, Europe and Asia');
+    expect(name).toHaveAttribute('title', 'Northwind Treasury Console');
+    expect(workspace).toHaveAttribute('title', 'Treasury operations, Europe and Asia');
+  });
+
+  // WCAG 2.5.3: the visible text of the menu trigger has to be in its name. The name is "<app>, <workspace>: account
+  // menu"; with no space between the two spans the visible text ran them together and axe read a word that name does
+  // not hold (#84). The blocks make the space invisible, so it costs the layout nothing.
+  it('separates the product name and the workspace, so the trigger\'s visible text is in its name', () => {
+    const { container } = render(<Rail nav={nav} user={null} workspace="Treasury operations, Europe and Asia" />);
+    const trigger = container.querySelector('button[aria-label$="account menu"]')!;
+    expect(trigger.textContent).toContain('Northwind Treasury Console Treasury operations, Europe and Asia');
+  });
+});

package/payload/tests/shell-search-name.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { ShellTools } from '@/components/patterns/shell-tools';
+
+// Below 40rem the button draws only its icon; the word stays in the DOM as its name. `display: none` on the only text
+// left an icon-only button with no accessible name, which axe reported on every view at 390px (#83).
+describe('the shell\'s Search button at a phone width (#83)', () => {
+  it('keeps "Search" as its name, visually hidden rather than removed', () => {
+    render(<ShellTools alerts={[]} now={new Date('2026-10-05T09:00:00Z')} />);
+    // The name is "Search ⌘K": the shortcut is drawn beside the word, which is what keeps the icon-only state named.
+    const button = screen.getAllByRole('button', { name: /Search/ })[0];
+    const word = [...button.querySelectorAll('span')].find((s) => s.textContent === 'Search')!;
+    expect(word.className).toContain('@max-[40rem]:sr-only');
+    expect(word.className).not.toContain('@max-[40rem]:hidden');
+  });
+});

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

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import type { ReactNode } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 vi.mock('next/navigation', () => ({ useRouter: () => ({ push() {}, refresh() {}, replace() {} }), usePathname: () => '/' }));
@@ -34,6 +35,36 @@ describe('the table counts its columns from its head', () => {
     expect(cols(container.querySelector('table')!)).toEqual(['repeat(2, auto)', 'repeat(2, auto)', 'repeat(2, auto)', 'repeat(2, auto)', 'repeat(1, auto)']);
   });
 
+  // A server component's JSX reaches the client Table as references to the client module, not as the functions it
+  // exported; only the props survive. A wrapper of another type reproduces that here: the Table cannot match a cell by
+  // identity, so it reads the shape, and a table that counted columns by identity laid every one out as a single
+  // column (#85).
+  it('counts a table a server component wrote, where no child is the component the client module exports', () => {
+    const Head = ({ children }: { children?: ReactNode }) => <TableHead>{children}</TableHead>;
+    const Body = ({ children }: { children?: ReactNode }) => <TableBody>{children}</TableBody>;
+    const Row = ({ children }: { children?: ReactNode }) => <TableRow>{children}</TableRow>;
+    const Th = ({ children, hideBelow, grow, align }: { children?: ReactNode; hideBelow?: 'xl' | 'md'; grow?: boolean; align?: 'left' | 'right' }) => (
+      <TableHeader hideBelow={hideBelow} grow={grow} align={align}>{children}</TableHeader>
+    );
+    const Td = ({ children }: { children?: ReactNode }) => <TableCell>{children}</TableCell>;
+    const { container } = render(
+      <Table>
+        <>
+          <Head>
+            <Row>
+              <Th grow>Request</Th>
+              <Th hideBelow="xl">Region</Th>
+              <Th hideBelow="md">Customer</Th>
+              <Th align="right">Latency</Th>
+            </Row>
+          </Head>
+        </>
+        <Body><Row><Td>a</Td><Td>b</Td><Td>c</Td><Td>d</Td></Row></Body>
+      </Table>,
+    );
+    expect(cols(container.querySelector('table')!)).toEqual(['repeat(4, auto)', 'repeat(3, auto)', 'repeat(3, auto)', 'repeat(2, auto)', 'repeat(2, 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>[] = [

package/payload/tests/trend-chart-signed.test.tsx

@@ -0,0 +1,54 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+// The plot is drawn at a stated width: the size hook is replaced, as the Column chart's tests do.
+vi.mock('@/components/charts/use-size', async () => {
+  const { useRef } = await import('react');
+  return { useSize: () => [useRef(null), { width: 600, height: 0 }] as const };
+});
+
+import { TrendChart } from '@/components/charts/trend-chart';
+
+const dates = ['2026-10-01', '2026-10-02', '2026-10-03', '2026-10-04'];
+const ticks = (c: HTMLElement) => [...c.querySelectorAll('svg text')].map((t) => t.textContent ?? '').filter((t) => /\d/.test(t) && !/Oct|Sep/.test(t));
+/** Every y a path passes through. */
+const ys = (c: HTMLElement) => [...c.querySelectorAll('svg path')].flatMap((p) => [...(p.getAttribute('d') ?? '').matchAll(/-?\d+(?:\.\d+)?,(-?\d+(?:\.\d+)?)/g)].map((m) => Number(m[1])));
+const cells = (c: HTMLElement) => [...c.querySelectorAll('table tbody td:not(:first-child)')].map((t) => t.textContent);
+
+describe('a trend chart of a signed series (#80)', () => {
+  it('takes its axis under zero, with zero a level, and draws every value inside the plot', () => {
+    const { container } = render(<TrendChart label="Net change a day" height={248} dates={dates} series={[{ key: 'n', label: 'Net change', values: [3, -2, 4, -3], kind: 'line' }]} />);
+    expect(ticks(container)).toContain('0');
+    expect(ticks(container).some((t) => t.startsWith('-') || t.startsWith('−'))).toBe(true);
+    for (const y of ys(container)) { expect(y).toBeGreaterThanOrEqual(0); expect(y).toBeLessThanOrEqual(248); }
+  });
+
+  it('holds a series below zero on every day', () => {
+    const { container } = render(<TrendChart label="Net flow a day" height={248} dates={dates} series={[{ key: 'n', label: 'Net flow', values: [-3, -8, -5, -12], kind: 'area' }]} />);
+    expect(ticks(container)).toContain('0');
+    for (const y of ys(container)) { expect(y).toBeGreaterThanOrEqual(0); expect(y).toBeLessThanOrEqual(248); }
+  });
+});
+
+describe('a trend chart given a format of its own (#78)', () => {
+  it('reads each value with it, and the axis with axisFormat', () => {
+    const price = (n: number) => n.toFixed(4);
+    const { container } = render(<TrendChart label="Price a day" height={248} floor={0.999} format={price} axisFormat={(n) => n.toFixed(4)} dates={dates.slice(0, 3)} series={[{ key: 'p', label: 'Price', values: [0.99986, 0.9997, 1.0001], kind: 'line' }]} />);
+    expect(cells(container)).toEqual(['0.9999', '0.9997', '1.0001']);
+    // Every level is its own figure: no two ticks read alike.
+    expect(new Set(ticks(container)).size).toBe(ticks(container).length);
+    expect(ticks(container).length).toBeGreaterThanOrEqual(3);
+  });
+
+  it('reads the axis as the format does when no axisFormat is given, and a missing value as a dash', () => {
+    const ratio = (n: number) => n.toFixed(6);
+    const { container } = render(<TrendChart label="Ratio a day" height={248} floor={1.001} format={ratio} dates={dates.slice(0, 3)} series={[{ key: 'r', label: 'Ratio', values: [1.001061, null, 1.001064], kind: 'line' }]} />);
+    expect(cells(container)).toEqual(['1.001061', '—', '1.001064']);
+    expect(ticks(container).every((t) => /^\d\.\d{6}$/.test(t))).toBe(true);
+  });
+
+  it('draws a ratio that peaks under 1 to its own top, not along the floor of a scale to 1', () => {
+    const { container } = render(<TrendChart label="Error rate a day" height={248} format="percent" dates={dates.slice(0, 3)} series={[{ key: 'e', label: 'Errors', values: [0.002, 0.004, 0.003], kind: 'line' }]} />);
+    expect(ticks(container)).not.toContain('100%');
+  });
+});

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

@@ -0,0 +1,18 @@
+// @vitest-environment node
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const ROOT = path.resolve(import.meta.dirname, '..');
+const source = (file: string) => fs.readFileSync(path.join(ROOT, file), 'utf8');
+
+// The built app a run starts is for that run: the readiness probe, the browser, the assistant and the live run all
+// reach it at 127.0.0.1. `next start` with no host binds every interface, so for the half hour a full run takes the
+// app under test answered on the network (#81).
+describe('the built app a run starts for itself (#81)', () => {
+  for (const file of ['scripts/verify.ts', 'scripts/live.ts']) {
+    it(`${file} binds loopback`, () => {
+      expect(source(file)).toContain("['start', '-H', '127.0.0.1', '-p', String(port)]");
+    });
+  }
+});