zz-meridian 0.13.0 → 0.14.0

package/package.json

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

package/payload/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 Every release of ZZ Meridian, newest first. Versions follow semver: a removed or renamed token, prop or card is major; a new card, token or variant is minor; a corrected value is a patch. Each entry says what breaks and what to do instead.
 
+## [0.14.0] · 2026-10-11
+
+### Added
+
+- **A form page has a width of its own, and the token layer documents the layout.** `tokens/core.tokens.json` gains `field-width` (64rem: the widest a form's card may be, in rem so the measure grows with the reader's text size) and `form-width` (a form page: its head column, the column gap, a `field-width` card and the page's gutter — written as `calc()` over the parts, so it holds at any root size). `PageFrame` gains `width="form"` and Settings is the page that uses it: the page fills the canvas until the canvas is wider than a form needs, then centres, so the remainder splits evenly instead of leaving the canvas's right side empty — visible on a window wider than about 1470px (with the card capped at 896px, the empty band beside it was about 430px at 1920px and about 1050px at 2560px, measured from the card's right edge to the page's content edge), invisible at 1440px and below. The card's own measure is unchanged (`FormSection`'s `64rem` is now `var(--field-width)`), and a field still never stretches across a wide screen. `LoadingPage` takes the same `width`, and Settings' `loading.tsx` passes it, so the skeleton stands where the page will be instead of moving it when the page arrives. `reading-width`'s description said it was for "forms, documents and settings", which nothing did; it now says what it is — one long document — and the Atlas has a seventh token view, **Layout**, drawing every width role to scale in one place. Additive apart from that description: a product that passes no `width` renders exactly as before.
+
+- **The token layer documents the groups it never showed, and the specs stop contradicting it.** Three of the eight core groups had no view in the Atlas at all, so a reader looking for how high a dialog sits or what the rail's glass does found nothing: `Elevation` now carries **Stacking** (the six `layer-*` tokens in order, drawn) and **Glass** (both blurs, over something moving), and the token layer's own prose is corrected — `motion`'s opening said "four durations" where the file has six plus three loops, `float-in` said it leaves over 120ms where the CSS uses `dur-exit` 140ms (the same claim stood in Popover, Menu, Select and Tooltip), and three cards said the system allows two loops where a Spinner's ring is a third. Nothing a product renders changes: every one of these is a description, a spec or an Atlas view.
+
+### Fixed
+
+- **`audit.ts --atlas` also measures the Atlas's other entries.** The token views, the page specs and the guides live under `[section]/[id]`, so `discover()` skips them as dynamic segments and `--atlas` read only the card registry: a defect in a token view or a guide failed no suite at all. It now reads the entries through the module the Atlas renders from, so a new one is measured without being listed. Measured: 0 issues across the seven entries checked (the token views, two page specs, a guide and the changelog) at five widths in both themes.
+- **The Members table fits its frame again, and the assistant walk-through passes every step.** `Joined` dropped a column too late (the table's own 672px, not 896): under it the table measured 759px in a 713px frame, so the audit failed `/members` at two widths in both themes — a table wider than its card is clipped, not scrolled — and with the assistant panel open the actions column sat outside the card, where a real click cannot reach it and the walk-through's row-menu step timed out. Found by `pnpm verify --full` (four audit issues) and by the walk-through, one cause behind both.
+- **`scripts/assistant.ts` says when a control has no box.** A control hidden by a container query answers `getBoundingClientRect()` with 0x0, so the harness clicked the page's top-left corner and reported a timeout somewhere else; it now fails with "the control is in the DOM but has no box at 0x0 — hidden at this width?", which is what another session needed twenty minutes to work out.
+- **An agent's approved change to a member no longer fails in a built app.** `src/data/member-mutations.ts` invalidated its tags with `updateTag`, which Next allows **only in a Server Action** — so the assistant's route handler and an adopter's MCP server, the two callers the module's own doc names, threw `updateTag can only be called from within a Server Action` the moment a change was applied: the Proposal was approved, the rows never moved, and the app answered with an error. The boundary now invalidates with `updateTag` where it is legal and `revalidateTag` where it is not, so a page action keeps its read-your-writes and an agent's write reaches the page. Found by the assistant walk-through, which timed out waiting for the rows to read Suspended — a suite that had not run since the member boundary landed (`585349a`, after the last full run).
+- **A busy button is drawn as working, at the size of its own icon.** It was drawn at the same 45% opacity as one nobody may press, so it read as unavailable while it was working — the spec said only a disabled button greys out, and the code did not agree. It keeps its colour and its shadow now, with the spinner as the answer. The spinner was also always 14px, so a `lg` or `md` button that carries an icon moved by 4px or 2px the moment it went busy — the one case `busy` exists to make steady (Replay on a failed request, for instance). The Button now composes `Spinner` instead of drawing a second ring of its own, and the Spinner's third step is 18px rather than 20px, so its three steps are the icon scale's (14, 16, 18) and one stands in for the other exactly. `Spinner` gains a decorative form (`label={null}`) for the case where the control announces itself — a busy button's accessible name is unchanged, which a check confirmed — and the spec says plainly that a button with no icon gains the slot and widens by it.
+
+- **Specimens and specs were sizing controls from the retired scale, and three page specs quoted the window's breakpoints for a table rule.** Five files still drew controls at 30/36/44 and 26/30/36 where the tokens are 32/38/46 and 28/32/38, and Members, Customers and API keys said their columns drop at 768/1024/1280 — the window's breakpoints — where `hideBelow` reads the table's own 672/896/1152; the four thresholds are now stated once, in the Table card. A suspended persona in the rail's specimen used the disabled ink without saying it was disabled, which the audit measured at 1.38:1 in dark and 2.31:1 in light; it is now a row with `aria-disabled` and the words "Not active", as the product draws one.
+
+### Changed
+
+- **With one workspace or none, the rail's row is the account menu, not a switcher.** A product that passes no `scopes` still opened a menu headed `Workspace` holding a single disabled, checked row — a chevron that promises a choice, opening a list with no choice in it (#20). The row now says `account menu` to a screen reader and carries a plain `ChevronDown` unless more than one scope is passed, and the menu renders no `Show` group and no checked row of its own unless there is something to switch between. A product passing several scopes is unchanged: the `Show` group, the radio items and the switcher glyph are as they were. The card's preview draws both states, and `README.md` states the rule.
+
 ## [0.13.0] · 2026-10-11
 
 ### Added

package/payload/CONTRIBUTING.md

@@ -85,6 +85,7 @@ Write the status on the line under the title: `Status: beta`.
 | `pnpm tokens` | Generates the token CSS and the Tailwind bridge from `tokens/` (`--check` only compares) | After any token change |
 | `node scripts/contrast.ts [--all]` | Every specified foreground on its background, in every theme and accent, and the chart palette's colour-vision checks | Gate |
 | `node scripts/registry.ts` | Regenerates the Atlas registry from the card folders (`--check` only compares) | After adding or renaming a card |
+| `rm -rf .next` before the next build, after editing a card's `README.md` | A production build in a working `.next` can serve the prerendered copy of the old text while the client hydrates the new one, which React reports as error #418 on that Atlas page. `pnpm dev` has no such copy, and a fresh clone (CI, a deployment) has none either | After changing what a card's page says |
 | `node scripts/check.ts` | Every card has its README and preview, every README follows the anatomy, no literal colour in components, every token a spec names exists and is written with its own value, every embed view a document offers is a route, and an element that claims a control's role has a key handler | Gate |
 | `pnpm typecheck`, `pnpm test` | TypeScript and the behaviour tests | Gate |
 | `node scripts/audit.ts` | With the app running: every page and embed view at 2560, 1440, 1024, 768 and 390px in both themes (embeds at 720 and 420 on a simulated host ground). It measures inside open shadow roots too. Fails on sideways scroll, text clipped without an ellipsis, a control with no accessible name, more than one page scroller, rendered text under its WCAG minimum, a Tab stop with no focus ring (a change of outline, shadow or border when focus arrives), a custom element it cannot look inside (`unmeasured:`), and any uncaught exception or console error. Prints the design metrics: type sizes, weights, radii and the hierarchy ratio | Before release |

package/payload/README.md

@@ -16,7 +16,7 @@ These govern every layer. When two choices both fit the specs, pick the one that
 
 **Numbers are exact and honest.** A missing value reads as a dash, never as zero. Every figure says its period and its unit; every chart has a table behind it; a stale feed says it is stale. Large figures are set tight, with the unit and the fraction stepped down so the number reads first.
 
-**Calm, then precise.** The ground is quiet and lit; motion explains a change and stops. Data arrives once, in reading order; nothing loops but a live dot and a skeleton; reduced motion shows the final state.
+**Calm, then precise.** The ground is quiet and lit; motion explains a change and stops. Data arrives once, in reading order; nothing loops but a spinner, a skeleton and a live dot; reduced motion shows the final state.
 
 **Every surface, every operator.** A view holds on the console, on a phone and as an MCP App in a host. It is addressable, legible to a model, and safe to share with an agent: the agent reads anything, changes nothing without a person, and leaves its name on what it did.
 

package/payload/app/(dashboard)/_loading.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { PageFrame, Row, Stack } from '@/components/base/shell';
+import { PageFrame, Row, Stack, type PageWidth } from '@/components/base/shell';
 import { Card } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 
@@ -7,11 +7,12 @@ import { Skeleton } from '@/components/ui/skeleton';
  * The frame every console route's loading state shares: one masthead skeleton, then the page's own body, announced once
  * as busy under the page's name. Each route's `loading.tsx` composes its body from these rows, in the shape of its page.
  * The title is the page's own heading, so the shell is acknowledged the moment this state commits; a detail page whose
- * title depends on the record leaves it out and keeps a skeleton.
+ * title depends on the record leaves it out and keeps a skeleton. `width` follows the page it stands in for: a
+ * skeleton at another width would move the content when the page arrives.
  */
-export function LoadingPage({ name, title, children }: { name: string; title?: string; children: ReactNode }) {
+export function LoadingPage({ name, title, width, children }: { name: string; title?: string; width?: PageWidth; children: ReactNode }) {
   return (
-    <PageFrame kicker={<Skeleton className="h-2.5 w-32" />} title={title ?? <Skeleton className="mt-3 h-10 w-64 rounded-md" />} description={<Skeleton className="mt-2 h-3.5 w-96 max-w-full" />}>
+    <PageFrame width={width} kicker={<Skeleton className="h-2.5 w-32" />} title={title ?? <Skeleton className="mt-3 h-10 w-64 rounded-md" />} description={<Skeleton className="mt-2 h-3.5 w-96 max-w-full" />}>
       <Busy name={name}>{children}</Busy>
     </PageFrame>
   );

package/payload/app/(dashboard)/customers/README.md

@@ -10,7 +10,7 @@ Status: beta
 |---|---|---|---|
 | Masthead | PageFrame: kicker, "Customers", one sentence, Invite customer (primary) | One band | Stacked |
 | 1 | Row `tiles`: Customers (with combined requests over 14 days), Spend, last 30 days (emphasis, with its 14-day shape), Past due | Three across | One column |
-| 2 | Data table: search and Status in the Filter bar, the plan as a Segmented view; columns Customer (avatar and name, grow), Plan, Status, Requests, Last 14 days (sparkline, from 1024px), Error rate (from 1280px), Spend, Customer since (from 1280px) | Columns | Cards: name and status, then plan, requests and spend |
+| 2 | Data table: search and Status in the Filter bar, the plan as a Segmented view; columns Customer (avatar and name, grow), Plan, Status, Requests, Last 14 days (sparkline, from 896px), Error rate (from 1152px), Spend, Customer since (from 1152px) | Columns | Cards: name and status, then plan, requests and spend |
 
 ## States
 

package/payload/app/(dashboard)/keys/README.md

@@ -10,7 +10,7 @@ Status: beta
 |---|---|---|---|
 | Masthead | PageFrame: kicker, "API keys", one sentence, Create key (primary) | One band | Stacked |
 | 1 | Banner (accent), only right after a key is created: "Copy {name} now", the full key in a Copy field, dismissable | Full width | Full width |
-| 2 | Data table: Name with its environment, Key (its hint, `zzm_live_…f601`, in mono, from 768px), Scopes (two and "+N", from 1280px), Created by (from 1024px), Created, Last used, and Revoke | Columns | Cards: name and environment, "Created …" and "Used …", Revoke |
+| 2 | Data table: Name with its environment, Key (its hint, `zzm_live_…f601`, in mono, from 672px), Scopes (two and "+N", from 1152px), Created by (from 896px), Created, Last used, and Revoke | Columns | Cards: name and environment, "Created …" and "Used …", Revoke |
 | Sheet | Create a key: Name (required), Environment (Live or Test), Scopes (checkboxes); Cancel and Create key | From the right, 440px | From the bottom |
 | Dialog | Revoke: "Revoke {name}?", what fails and that it cannot be undone, when it was last used; Cancel and Revoke key (danger) | Centred | Bottom sheet |
 

package/payload/app/(dashboard)/members/README.md

@@ -9,7 +9,7 @@ Status: beta
 | Row | Pattern | Console | Mobile |
 |---|---|---|---|
 | Masthead | PageFrame: kicker, "Members", one sentence, Invite member (primary), shown only to a person who may invite (`invitableRoles()` is not empty) | One band | Stacked |
-| 1 | Data table: Name (avatar and name, grow), Email (from 896px), Role as a person reads it, add-ons and all (as a column from 512px, and on the card at every width below), Team (from 1440px), Status, Joined (from 768px), Last active, and a row action menu | Columns | Cards: name and the menu, then the role with its add-ons, status and last active |
+| 1 | Data table: Name (avatar and name, grow), Email (from 896px), Role as a person reads it, add-ons and all (as a column from 512px, and on the card at every width below), Team (from 1152px), Status, Joined (from 896px), Last active, and a row action menu | Columns | Cards: name and the menu, then the role with its add-ons, status and last active |
 | 2 | Roles & access matrix: a card whose table ticks each role, main roles first and add-ons after, against every non-public feature and then every action; a legend under it says that an add-on adds to a main role and that the member rules still apply. Generated from `GRANTS`, `FEATURES` and `ACTIONS`, never written by hand; at a phone's width the table scrolls inside its own frame | Columns, scrolling inside the card | The same table, scrolling inside the card |
 | Sheet | Invite a member: Name and Email (required), Role, Team; Cancel and Send invitation | From the right, 440px | From the bottom |
 | Sheet | Change {name}'s role: Role and Add-ons, offering only the choices the row's boundary allowed; a refusal reopens it with the reason in a critical Banner; Cancel and Save role | From the right, 440px | From the bottom |

package/payload/app/(dashboard)/settings/README.md

@@ -6,7 +6,7 @@ Status: beta
 
 ## Structure
 
-At the data width like every console page, sections 56px apart, each a Form section (its card stops at 64rem):
+On a form page's own measure (`form-width`), which fills the canvas until it is wider than the form needs and then centres, sections 56px apart, each a Form section (its card stops at `field-width`):
 
 | Section | Saves | Controls |
 |---|---|---|
@@ -20,7 +20,7 @@ At the data width like every console page, sections 56px apart, each a Form sect
 
 | State | What shows |
 |---|---|
-| Loading | `loading.tsx`: a stack of skeleton sections |
+| Loading | `loading.tsx`: a stack of skeleton sections, at the page's own width (`form`), so nothing moves when the page arrives |
 | Assistant not resolved yet | The Assistant section keeps its place as a skeleton; once the request says the assistant is configured it becomes the section, and when it is not the place closes |
 | Editing Workspace | The save bar; Save confirms with a toast "Workspace saved" |
 | Empty name | The field's error; Save does nothing until it is fixed |

package/payload/app/(dashboard)/settings/loading.tsx

@@ -4,7 +4,7 @@ import { LoadingPage } from '../_loading';
 /** Settings on its way: a stack of sections, each a title, a sentence and its controls. */
 export default function SettingsLoading() {
   return (
-    <LoadingPage name="settings" title="Settings">
+    <LoadingPage name="settings" title="Settings" width="form">
       <div className="flex flex-col gap-14">
         {[3, 4, 3, 2].map((n, i) => (
           <div key={i} className="flex flex-col gap-4">

package/payload/app/(dashboard)/settings/page.tsx

@@ -52,6 +52,7 @@ export default async function SettingsPage() {
   const workspace = permissions.workspaceRead ? await workspaceRecord() : null;
   return (
     <PageFrame
+      width="form"
       kicker={<>{app.name} · {app.workspace}</>}
       title="Settings"
       description={`The workspace, what you hear about, how ${app.name} looks, and what assistants may do.`}

package/payload/app/not-found/README.md

@@ -17,7 +17,7 @@ For an address outside the console, a standalone screen on the lit ground, from
 | Address | A sunk field, body-size mono: the part that exists as a link to that page, the part that does not under a dashed critical rule, and one line saying which is which |
 | Actions | Back to the nearest page (primary, `lg`), then a link to the home page when that is somewhere else (`nav`'s label for `/`) |
 
-Inside the console the screen is `MissingPage` (`src/views/missing-page.tsx`): a record page renders it itself when its ID is missing (`/requests/<id>`), and `app/(dashboard)/not-found.tsx` renders it for any other `notFound()`. A record page renders rather than throws because a `notFound()` thrown inside the dashboard's loading boundary shows only once the JavaScript arrives, which on a slow phone put the largest paint past 2.5s; the page keeps `noindex`. The rail stays; the sentence becomes the page title over the same lead at the data width, on the same left edge as every page, and one card holds the address at `text-xl` as the protagonist and the same actions (`md`). A miss at the root there offers Search pages (the command palette) as the second action.
+Inside the console the screen is `MissingPage` (`src/views/missing-page.tsx`): a record page renders it itself when its ID is missing (`/requests/<id>`), and `app/(dashboard)/not-found.tsx` renders it for any other `notFound()`. A record page renders rather than throws because a `notFound()` thrown inside the dashboard's loading boundary shows only once the JavaScript arrives, which on a slow phone put the largest paint past 2.5s; the page keeps `noindex`. The rail stays; the sentence becomes the page title over the same lead at the data width, on the same left edge as every data page, and one card holds the address at `text-xl` as the protagonist and the same actions (`md`). A miss at the root there offers Search pages (the command palette) as the second action.
 
 The words come from `src/views/not-found.tsx`; the address and the actions from `src/views/not-found-address.tsx`, once. The home page's own name is read from `nav` (`homeLabel`), not written here: a product whose front page is a ranked list, not "Overview", names it once in `src/app.config.ts` and both buttons follow.
 

package/payload/decisions/0013-a-form-page-has-a-measure.md

@@ -0,0 +1,49 @@
+# 0013 · A form page has a measure of its own
+
+Date: 2026-10-11 · Status: accepted
+
+## Context
+
+Every console page took the data width — 100% of the canvas — and one card, the Form section's, capped itself at
+`64rem` so a field never stretched across a wide screen. On a 1440px window the two met and nothing showed. On a
+wider one they did not: Settings ran its masthead and its sections out to the canvas's right edge while the cards
+inside stopped at 64rem, so the page ended in a strip — 280px at 1920px, 1108px at 2560px. The owner asked why
+Settings alone was not full width, and the honest answer was that nothing in the repository said what a form page
+should do; the token layer's own `reading-width` described itself as "forms, documents and settings" while no page,
+Settings included, used it.
+
+## Decision
+
+- **A form page's measure is a token, derived from its parts.** `form-width` is `calc(15rem + 2.5rem +
+  var(--field-width) + 2 * var(--gutter))` — the head column, the column gap, a card at its cap, and the page's own
+  gutter — and `field-width` (64rem, in rem so it grows with the reader's text size) is the card's cap. The card's
+  measure is unchanged from before; only its name is new. *Why:* the number was a literal in a component and a
+  paragraph in a token file, which is how the two came to disagree in the first place.
+- **A page names one width, and a form page names this one.** `PageFrame` gains `width="form"`; `data` stays the
+  default and the right answer for an analytical page, where a wider screen should show more. *Why:* the strip was
+  not caused by a page being narrow; it was caused by nobody having decided.
+- **It fills the canvas until the canvas is wider than a form needs, then centres.** Below about 1470px of window
+  nothing changes at all; above it the remainder splits evenly instead of collecting at one side. *Why:* a form's
+  parts have a maximum useful width, and centring is what makes the rest read as a margin rather than as a mistake.
+- **`reading-width` says what it is.** One long document, 832px, centred. It never described forms, and nothing
+  used it.
+- **The Atlas names every width role in one place.** A seventh token view, **Layout**, draws them to scale
+  (`rail-width`, `assistant-width`, `data-width`, `stage-width`, `reading-width`, `field-width`, `form-width`,
+  `gutter`), so the question this record answers has one place to be looked up.
+
+**Rejected.** Making the card fill the canvas: it would have made Settings "full width" and every field 1500px
+wide, which is the outcome `64rem` exists to prevent. Filling the freed space with a sticky section index on the
+page's left edge: it is a genuine option — the Atlas's own articles carry such an index — but it adds an element
+nobody asked for and a scroll-spy to keep it honest, and it changes the page more than the defect warranted. It
+stays available: the measure and the token do not depend on which of the two a product chooses.
+
+## Consequences
+
+- A form page's title sits on the canvas's centre axis rather than its left edge above ~1470px, so it no longer
+  lines up with an analytical page's title on a very wide screen. That is the cost of the choice, and it is why
+  it is written down.
+- `LoadingPage` takes the same `width`, and a page's `loading.tsx` passes it: a skeleton at another width moves the
+  content when the page arrives.
+- `FormSection`'s card is capped at `var(--field-width)`; a form page's band is sized so the card reaches that cap
+  exactly, at any root size and gutter.
+- The field measure still holds: a field is never wider than 64rem, on any window.

package/payload/docs/benchmark.md

@@ -7,10 +7,10 @@ Meridian held to the bar of award-winning sites (Awwwards, Webby, FWA) and of th
 | Criterion | Verdict | Evidence |
 |---|---|---|
 | Typography | Strong | One family (Geist) with a mono for kickers and identifiers; 52px page titles, 76px hero figures, 40px metric figures set at −0.035em with the unit and fraction stepped down to half size in `ink-3`. Eleven sizes in the scale; a page uses 5 to 8 of them; three weights everywhere on the product |
-| Whitespace | Strong | A 4px scale; 20px between cards, 24–28px inside them; 32px between table columns with the card's padding on the outer edges; every console page on one left edge, forms included, with a reading width of 832px for long documents |
+| Whitespace | Strong | A 4px scale; 20px between cards, 24–28px inside them; 32px between table columns with the card's padding on the outer edges; every analytical console page on one left edge, a form page centred on its own measure once the canvas is wider than a form needs, and a reading width of 832px for long documents |
 | Visual hierarchy | Strong | One protagonist per page. Hierarchy ratio (largest text over median) on analytical pages: Overview 6×, Health 6.5×, Requests 4.6×, Analytics 4.6×; standalone screens 7.2–7.8× |
 | Colour | Strong | A night-sky neutral leaning indigo; one accent that is two numbers (hue, chroma), four presets; status trio reserved; six categorical chart slots validated for colour-vision deficiency (worst adjacent ΔE 10.2 light, 8.7 dark). 328 contrast pairs pass in every theme and accent |
-| Motion | Good | Three jobs (arrive, answer, float), four durations, three curves; data arrives once (a line draws, an area reveals, bars grow); nothing loops but a live dot and a skeleton; reduced motion shows the final state at once |
+| Motion | Good | Three jobs (arrive, answer, float), a duration for each, three curves; data arrives once (a line draws, an area reveals, bars grow); nothing loops but a spinner, a skeleton and a live dot; reduced motion shows the final state at once |
 | Micro-interaction | Good | The rail's pill springs between items; the Segmented thumb slides; a lit edge fades in under the pointer; a linked row takes a hover fill and a link changes colour, never underlined; the Meridian cursor answers pointer, touch and arrow keys with a readout on every chart and tile. Every control on every page is pressed by `scripts/interactions.ts`, with taps at 390px; none does nothing |
 | Responsive | Strong | Zero sideways scroll, zero clipped text and no table wider than its card at 390–1440px on every page (the last was missed until 2026-10-03: see below); tables become card lists under 768px; phone tiles put the sparkline beside the figure; dialogs become bottom sheets |
 | Originality | Strong | The Meridian (one time cursor shared by every chart, tile and the model); three surfaces including MCP Apps with a working host simulator; two operators with consent, provenance and handoff built into components |

package/payload/docs/start-a-dashboard.md

@@ -63,7 +63,7 @@ The rail and the command palette draw only the destinations the signed-in person
 
 ## 6. Arrange your pages
 
-Every page is a `PageFrame` holding a `Stack` of `Row`s. Start from the closest preset and change what it shows, not how it is laid out:
+Every page is a `PageFrame` holding a `Stack` of `Row`s. Start from the closest preset and change what it shows, not how it is laid out. A dashboard page leaves its width alone — `data` fills the canvas; a page that is mostly a form takes `width="form"`, whose band centres once the canvas is wider than a form needs; a page that is one long document takes `width="reading"`:
 
 | You need | Start from |
 |---|---|

package/payload/docs/surfaces.md

@@ -14,7 +14,7 @@ The surface is a fact about the container, not the device: a console on a 900px
 
 ### Console
 
-The default. The rail sits on the `frame`; each page is a `PageFrame` on the canvas: the masthead (title, one-sentence head-note, freshness, actions) above the one scroll region. Rows of cards follow the four splits.
+The default. The rail sits on the `frame`; each page is a `PageFrame` on the canvas: the masthead (title, one-sentence head-note, freshness, actions) above the one scroll region. Rows of cards follow the four splits. A page names its own width: `data` fills the canvas (an analytical page), `form` is a form page's measure, which fills the canvas until the canvas is wider than a form needs and then centres, and `reading` is one long document. Settings is the page that takes `form`.
 
 ### Mobile
 
@@ -99,10 +99,10 @@ What exists, by layer, and how it changes per surface. "Same" means the card nee
 |---|---|---|---|
 | Planes | Frame, canvas and surface: three planes of depth instead of borders | Frame hidden; canvas full-bleed | Frame and canvas transparent |
 | Text roles | Display, page, section and card titles; figure; lead, body, small, caption, eyebrow, mono | Page title 28px holds; display steps down by clamp | Same; host font when given |
-| Shell | AppShell, PageFrame, Stack, Row, the two widths | Drawer, stacked rows | Replaced by EmbedFrame |
+| Shell | AppShell, PageFrame, Stack, Row, the three page widths | Drawer, stacked rows | Replaced by EmbedFrame |
 | Icons | Lucide at 1.75 stroke: 14, 16 and 18px | Same | Same |
 | Motion | Arrive, answer, float; reduced motion collapses all | Same | Arrive only on first render, so a re-render in the thread never replays |
-| App mark | The product mark at 20, 24 and 32px | Same | 20px in the embed head |
+| App mark | The product mark at 20, 24, 28 and 32px | Same | 20px in the embed head |
 
 ### Layer 2 · Components
 

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "private": true,
   "license": "MIT",
   "description": "ZZ Meridian: a dashboard design system and starter. DTCG tokens, five layers of React components and a Design Atlas, in a light and a dark theme.",

package/payload/scripts/assistant.ts

@@ -89,6 +89,10 @@ async function press(find: string) {
     at = next;
   }
   if (!at) return fail(`nothing to press: ${find}`);
+  // A control the layout has hidden at this width still answers a rect of 0x0, so the click below would land at the
+  // page's top-left corner and the step would fail somewhere else entirely (another session lost twenty minutes to
+  // exactly that on a pager hidden by a container query). Say which it is.
+  if (at.x === 0 && at.y === 0) return fail(`the control is in the DOM but has no box at 0x0 — hidden at this width?: ${find}`);
   for (const type of ['mouseMoved', 'mousePressed', 'mouseReleased'] as const) await page.send('Input.dispatchMouseEvent', { type, x: at.x, y: at.y, button: 'left', clickCount: 1 });
 }
 /** Press the button named `label` in the open Proposal card. */
@@ -241,12 +245,23 @@ try {
       if (!kept) fail('the dismissed removal took Alice Moreno out of the table');
       ok('the dismissed removal left Alice Moreno in the table');
 
-      await press(`deepQuery('button[aria-label="Actions for Amara Okafor"]')`);
+      // Which member, read from the first page rather than written here: the roster is ordered by last active, so a
+      // name in this line moves to page 2 the moment the sample's activity changes, and the row menu is then simply
+      // absent (found by a full run: "Actions for Amara Okafor" is on the second page).
+      const who = await until('a first-page row that offers its menu', () => page.eval<string | null>(`(() => {
+        for (const tr of deepQueryAll('tbody tr')) {
+          if (!/Active/.test(deepText(tr))) continue;
+          const b = deepQueryAll('button[aria-label^="Actions for "]', tr)[0];
+          if (b && !b.disabled) return (b.getAttribute('aria-label') || '').slice('Actions for '.length);
+        }
+        return null;
+      })()`), (v) => v !== null);
+      await press(`deepQueryAll('button[aria-label="Actions for ' + ${JSON.stringify(who)} + '"]')[0]`);
       await until('the row menu', () => page.eval<boolean>(`!!deepQuery('[role="menu"]')`), Boolean);
       await press(`deepQueryAll('[role="menuitem"]').find((i) => deepText(i).trim() === 'Suspend')`);
-      await until('Amara Okafor to read Suspended', () => row('Amara Okafor'), (t) => !!t?.includes('Suspended'));
+      await until(`${who} to read Suspended`, () => row(who as string), (t) => !!t?.includes('Suspended'));
       await ask('Who is suspended?');
-      const found = await until('the answer to name Amara Okafor', said, (t) => t.includes('Amara Okafor'));
+      const found = await until(`the answer to name ${who}`, said, (t) => t.includes(who as string));
       ok(`a member suspended from the row menu is found by the assistant's next query ("${found}")`);
 
       // The page context: the title and path, and the page's text, capped.

package/payload/scripts/audit.ts

@@ -6,7 +6,8 @@
  * Routes are discovered from app/ (every static page; embeds under /embed), with the detail pages in
  * scripts/verify.config.ts beside them; --routes replaces the pages for one run.
  *
- * --atlas audits the Design Atlas instead: every card's page and its bare preview, at 1440 and 390px in both themes.
+ * --atlas audits the Design Atlas instead: every card's page and its bare preview, and every other entry the Atlas
+ * serves — the token views, the page specs and the guides — at 1440 and 390px in both themes.
  * A card's preview is the one place it is drawn alone, so a defect in its own box shows there and nowhere else. It is
  * not part of `pnpm verify` (the default stays fast); run it when the question is the component surface. It takes
  * about ten minutes, and a project without the Atlas has nothing for it to read.
@@ -21,6 +22,8 @@
  * an analytical page.
  */
 import fs from 'node:fs';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
 import { launch } from './lib/chrome.ts';
 import { DEEP_SOURCE } from './lib/deep.ts';
 import { discover } from './lib/routes.ts';
@@ -38,18 +41,32 @@ if (as && !cookie) { console.error(`audit: --as ${as} is not a declared persona.
 const EMBEDS_ONLY = args.includes('--embeds-only');
 const ATLAS = args.includes('--atlas');
 
-/** Every card's Atlas page and bare preview, from the keys scripts/registry.ts generates; only the template has them. */
-function atlasRoutes(): string[] {
+/**
+ * Every Atlas page: each card's page and its bare preview (from the keys scripts/registry.ts generates), plus every
+ * other entry the Atlas serves — the token views, the page specs and the guides. Those live under `[section]/[id]`, so
+ * `discover()` skips them as dynamic segments and nothing measured them: a defect in a token view, a page spec or a
+ * guide failed no suite. They are read through the module the Atlas itself renders from, so a new entry is audited
+ * without being listed. Only the template has an Atlas.
+ */
+async function atlasRoutes(): Promise<string[]> {
   const file = 'app/system/preview/[section]/[card]/keys.ts';
   if (!fs.existsSync(file)) { console.error('audit --atlas: this project has no Design Atlas to audit'); process.exit(1); }
   const keys = [...fs.readFileSync(file, 'utf8').matchAll(/'([a-z]+\/[a-z0-9-]+)'/g)].map((m) => m[1]);
-  return keys.flatMap((k) => [`/system/${k}`, `/system/preview/${k}`]);
+  const cards = keys.flatMap((k) => [`/system/${k}`, `/system/preview/${k}`]);
+  let entries: string[] = [];
+  try {
+    const mod = (await import(pathToFileURL(path.resolve('src/system/content.ts')).href)) as { entries?: () => { href: string }[] };
+    entries = (mod.entries?.() ?? []).map((e) => e.href);
+  } catch {
+    // A content module that plain node cannot read: the card routes alone, as before, rather than no audit at all.
+  }
+  return [...new Set([...cards, ...entries])];
 }
 
 const found = discover();
 // verify.config.ts is the team's, so read the one field this needs through its own type.
 const detailRoutes = (config as { detailRoutes?: string[] }).detailRoutes ?? [];
-const ROUTES = EMBEDS_ONLY ? [] : ATLAS ? atlasRoutes() : (opt('--routes', '') ? opt('--routes', '').split(',') : [...found.filter((r) => !r.startsWith('/embed')), ...detailRoutes]);
+const ROUTES = EMBEDS_ONLY ? [] : ATLAS ? await atlasRoutes() : (opt('--routes', '') ? opt('--routes', '').split(',') : [...found.filter((r) => !r.startsWith('/embed')), ...detailRoutes]);
 const EMBEDS = ATLAS ? [] : found.filter((r) => r.startsWith('/embed/'));
 const WIDTHS = ATLAS ? [1440, 390] : [2560, 1440, 1024, 768, 390];
 const THEMES = ['dark', 'light'];

package/payload/scripts/check.ts

@@ -78,7 +78,7 @@ for (const p of PAGE_SPECS) {
 }
 
 // ── Token names in specifications ────────────────────────────────────────────────────────────────────
-const TOKEN_LIKE = /`((?:ground|frame|surface|line|fill|ink|accent|on-accent|on-critical|positive|warning|critical|series|chart|shadow|highlight|glow|edge|text|weight|leading|tracking|space|radius|control|row-height|card-pad|stack-gap|rail|data-width|reading-width|gutter|layer|dur|stagger|ease|stretch)(?:-[a-z0-9-]+)?)`/g;
+const TOKEN_LIKE = /`((?:ground|frame|surface|line|fill|ink|accent|on-accent|on-critical|positive|warning|critical|series|chart|shadow|highlight|glow|edge|text|weight|leading|tracking|space|radius|control|row-height|card-pad|stack-gap|rail|assistant-width|data-width|stage-width|reading-width|form-width|field-width|gutter|layer|dur|stagger|ease|stretch)(?:-[a-z0-9-]+)?)`/g;
 const NOT_TOKENS = new Set(['leading', 'trailing', 'fill', 'text-wrap', 'text-pretty', 'text-balance', 'line-clamp', 'ease-out', 'ease-in-out', 'ease-spring', 'layer-1', 'text-left', 'text-right', 'text-center', 'surface-sunk/60', 'fill-hover', 'glow', 'edge', 'chart', 'series', 'shadow', 'surface', 'line', 'ink', 'accent', 'frame', 'ground']);
 const SPECS = [...cards().map((c) => `${c.dir}/README.md`), ...PAGE_SPECS, ...walk('docs', /\.md$/), 'README.md', 'CONTRIBUTING.md'].filter((f) => fs.existsSync(path.join(ROOT, f)));
 for (const f of SPECS) {

package/payload/scripts/verify.config.ts

@@ -125,7 +125,12 @@ const config: VerifyConfig = {
     '/requests/req_missing', // no such request: the not-found screen in the shell
   ],
   smokeRoutes: ['/', '/requests', '/settings'],
-  budgets: { htmlKb: { '/health': 100, '/requests': 150 } },
+  // Sizes to hold. /health is the longest streamed document of the analytical pages: ninety days of bars, six
+  // services each with their own strip, an incident timeline, and a screen-reader table behind every chart. It
+  // measured 99-100 KiB when this cap was set, so the cap sat exactly on the measurement and the next legitimate
+  // byte failed: the access work that gave every page a gate added 0.6% (101 KiB, 103,025 bytes), which is markup
+  // the page needs rather than fat to trim. Held at 104 — above the measurement, so the next few KiB still fail.
+  budgets: { htmlKb: { '/health': 104, '/requests': 150 } },
   navigationChecks: [
     { path: '/', title: 'Overview', readySelector: 'main table tbody tr', probe: 'toggle', controlSelector: 'main [role="radio"][aria-checked="false"]', resultSelector: 'main [role="radio"]' },
     { path: '/requests', title: 'Requests', readySelector: 'main table tbody tr', probe: 'filter', controlSelector: 'main input[type="search"]', resultSelector: 'main table tbody tr' },

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

@@ -83,7 +83,11 @@ its change compares with in `compare` ("vs the 3 days before") and takes a `note
 Rules that make every page look like it belongs:
 
 - **`PageFrame`** with `kicker` (where it sits: "Product · Workspace" or the parent record), `title`, one-sentence
-  `description`, then `meta` (Freshness) and `actions` (one primary at most).
+  `description`, then `meta` (Freshness) and `actions` (one primary at most). A dashboard page leaves `width` alone:
+  `data` fills the canvas, so a wider screen shows more. A page that is mostly a form takes `width="form"`, whose band
+  fills the canvas until the canvas is wider than a form needs and then centres — a field never stretches across a wide
+  screen, and the remainder splits evenly instead of leaving a strip at one side. A page that is one long document takes
+  `width="reading"`. A `loading.tsx` passes the same `width` its page does, or the skeleton moves the page when it arrives.
 - **`Stack` of `Row`s.** Splits are `full`, `1/2`, `2/3`, `1/3` and `tiles`. Cards in a row are the same height; one card
   per cell (a column of tiles is fine in a 1/3 cell).
 - **One protagonist.** At most one `FeaturedMetric` per page; everything else is a `MetricTile` or a `Card`.

package/payload/src/components/base/motion/README.md

@@ -1,6 +1,7 @@
 # Motion
 
-Motion has three jobs and no others: data arriving, a control answering the pointer, and things floating above the page, with four durations, three curves, and nothing at all under reduced motion.
+Motion has three jobs and no others: data arriving, a control answering the pointer, and things floating above the page, with a duration for each job, three curves, three things that loop while they wait, and nothing at all
+under reduced motion.
 
 Status: beta
 
@@ -14,9 +15,9 @@ Status: beta
 | Answer | A control gives 0.5px and 98.5% | `press` | `dur-press` 110ms · `ease-out` |
 | Answer | Colour and outline change | transitions | `dur-hover` 160ms |
 | Answer | An indicator slides (the rail marker, a segmented thumb) | transitions | `dur-enter` · `ease-spring` |
-| Float | Menus and popovers rise 4px from 97% | `float-in` | `dur-enter` in, 120ms out |
-| Float | Dialogs rise 10px from 98% | `dialog-in` | `dur-enter` in, 140ms out |
-| Float | The drawer slides in from the left | `sheet-in` | `dur-enter` in, 200ms out |
+| Float | Menus and popovers rise 4px from 97% | `float-in` | `dur-enter` in, `dur-exit` out |
+| Float | Dialogs rise 10px from 98% | `dialog-in` | `dur-enter` in, `dur-exit` out |
+| Float | The drawer slides in from the left | `sheet-in` | `dur-enter` in, `dur-exit-sheet` out |
 
 ## Curves
 
@@ -30,12 +31,12 @@ Status: beta
 
 - An animation plays when its data lands, once. Nothing moves while it is being read.
 - A page arrives with motion only on the first load of a visit. A page reached by a click in the app, or one the router kept and shows again, is already there: the shell marks its main area `data-still` when the path changes, every arrival inside takes no time and ends in its final state, and the mark lifts after `dur-grow` + `dur-enter` so a change made on the page afterwards (a new period) still animates. A change of query alone is not a navigation.
-- Two loops exist, and only two: a Skeleton's shimmer and a fresh Freshness dot's pulse.
+- Three things loop, and only three, each while something waits: a Spinner's ring, a Skeleton's shimmer, and a fresh Freshness dot's pulse.
 - Every keyframe lives in `src/styles/motion.css`.
 
 ## States
 
-Under `prefers-reduced-motion: reduce` every duration and delay collapses, and arrivals (`arrive`, `rise`, `grow-*`, `draw`, `reveal-x`) show their final state outright; both loops stop.
+Under `prefers-reduced-motion: reduce` every duration and delay collapses, and arrivals (`arrive`, `rise`, `grow-*`, `draw`, `reveal-x`) show their final state outright; all three loops stop.
 
 ## Surfaces
 

package/payload/src/components/base/motion/preview.tsx

@@ -12,7 +12,9 @@ const CURVES = [
 ];
 const DURS = [
   { name: 'dur-press', ms: 110, use: 'A control giving under the pointer' },
+  { name: 'dur-exit', ms: 140, use: 'A menu, a dialog or a scrim leaving' },
   { name: 'dur-hover', ms: 160, use: 'Colour and outline changes' },
+  { name: 'dur-exit-sheet', ms: 200, use: 'The phone drawer leaving' },
   { name: 'dur-enter', ms: 320, use: 'Overlays, rows, sliding indicators' },
   { name: 'dur-grow', ms: 820, use: 'Bars growing, lines drawing' },
 ];
@@ -71,7 +73,12 @@ export default function MotionPreview() {
           <State key={c.name} label={`${c.name} · ${c.use}`}><Curve v={c.v} /></State>
         ))}
       </Specimen>
-      <Specimen label="Reduced motion" note="Every duration and delay collapses; arrivals show their final state outright. Two loops exist (a skeleton's shimmer, a live dot's pulse) and both stop.">
+      <Specimen label="Loops" note="Three things loop, and only three, each while something waits: a spinner's ring, a skeleton's shimmer and a live dot's pulse.">
+        <State label="spin · a ring while it waits"><span className="spin block size-4 rounded-full border-2 border-current border-r-transparent" /></State>
+        <State label="shimmer · a skeleton"><span className="shimmer block h-3 w-32 rounded-sm" /></State>
+        <State label="pulse · a fresh dot"><span className="pulse block size-2 rounded-full bg-positive" /></State>
+      </Specimen>
+      <Specimen label="Reduced motion" note="Every duration and delay collapses; arrivals show their final state outright; all three loops stop.">
         <p className="t-small max-w-[60ch] text-ink-2">Nothing in Meridian moves to decorate. If motion does not explain a change, it is cut.</p>
       </Specimen>
     </>

package/payload/src/components/base/shell/README.md

@@ -1,6 +1,6 @@
 # Shell
 
-The shell is the layout contract every console page shares: a fixed frame where only one region scrolls, a rail, a top bar, a masthead that scrolls away, and rows of cards in four splits and two widths.
+The shell is the layout contract every console page shares: a fixed frame where only one region scrolls, a rail, a top bar, a masthead that scrolls away, and rows of cards in four splits and a width per kind of page.
 
 Status: beta
 
@@ -21,7 +21,7 @@ Status: beta
 1. **One scroller.** PageFrame is the only element on a page that scrolls, and only vertically. No card, table or list scrolls on its own.
 2. **Cards are their content's height.** A list that can pass ten rows pages; a "top N" list stays at N.
 3. **Four splits.** Full, `1/2`, `2/3`, `1/3`; and `tiles`, whose columns follow how many tiles it holds and its own width (four are four or two, three are three or one, never a hole). Cards in a row are the same height; every card is a direct child.
-4. **Two widths.** `data` fills the canvas at every size (`data-width` is 100%), so a wider screen shows more, not a centred strip. Every console page uses it, settings and forms included, so every page's title sits on the same left edge; a form keeps its own measure inside (a Form section's card stops at 64rem). `reading` (`reading-width` 832px, centred) is for a page that is one long document, such as an article rendered with Prose. The top bar always takes the canvas width, so the tools never move; past the reading width the light fills the margins.
+4. **Three widths, one per kind of page.** `data` fills the canvas at every size (`data-width` is 100%), so a wider screen shows more, not a centred strip: every analytical page uses it, and their titles sit on the same left edge. `form` is a form page's own measure (`form-width`: a 15rem head column, the column gap, a `field-width` card and the page's gutter). It fills the canvas until the canvas is wider than a form needs, then centres — the remainder splits evenly instead of leaving a strip at one side. Settings is the page that uses it. `reading` (`reading-width` 832px, centred) is for a page that is one long document, such as an article rendered with Prose. The top bar always takes the canvas width, so the tools never move; past a page's own width the light fills the margins.
 
 ## Sizes
 
@@ -29,6 +29,10 @@ Status: beta
 |---|---|
 | Rail | `rail-width` 260px |
 | Assistant | `assistant-width` 400px (from 1024px) |
+| Data width | `data-width` 100%: the canvas, for every analytical page |
+| Form width | `form-width` 1253px at the template's own root: a `field-width` card and its head column; a form page centres on it past that |
+| Reading width | `reading-width` 832px: one long document |
+| Stage width | `stage-width` 1560px: a standalone screen (sign in, not found) |
 | Gutter | `gutter`: 16px on phones to 40px on wide screens (fluid) |
 | Top bar | 56px |
 | Masthead | 16px under the top bar (24px from 1024px), 32px (40px) under the title block |

package/payload/src/components/base/shell/index.tsx

@@ -30,8 +30,9 @@ const AssistantLauncher = dynamic(() => import('@/components/patterns/assistant/
  *   └─ assistant         optional, and the person can switch it off: a third column from 1024px, a sheet below; not in the page while closed
  *                        whether it exists arrives as a promise: the layout never waits for it, and its launcher and column resolve it behind their own boundaries
  *
- * Four rules: one scroller; cards are their content's height; four splits; two widths (data, the whole canvas, for every
- * console page; reading, 832px and centred, for one long document).
+ * Four rules: one scroller; cards are their content's height; four splits; three widths, one per kind of page (data, the
+ * whole canvas, for an analytical page; form, a form page's own measure, centred once the canvas is wider than it needs;
+ * reading, 832px and centred, for one long document).
  */
 
 const ShellCtx = createContext<{ openNav: () => void; tools: ReactNode; assistant: Promise<boolean> }>({ openNav: () => {}, tools: null, assistant: Promise.resolve(false) });
@@ -198,7 +199,7 @@ export function NavTrigger({ className }: { className?: string }) {
   );
 }
 
-export const WIDTH = { data: 'max-w-(--data-width)', reading: 'max-w-(--reading-width)' } as const;
+export const WIDTH = { data: 'max-w-(--data-width)', reading: 'max-w-(--reading-width)', form: 'max-w-(--form-width)' } as const;
 export type PageWidth = keyof typeof WIDTH;
 
 /**

package/payload/src/components/base/shell/preview.tsx

@@ -47,10 +47,13 @@ export default function ShellPreview() {
           <Row split="tiles"><Cell label="Tile" /><Cell label="Tile" /><Cell label="Tile" /><Cell label="Tile" /></Row>
         </div>
       </Specimen>
-      <Specimen label="Two widths">
+      <Specimen label="Three widths" note="A page names one. `data` is the canvas; `form` and `reading` are narrower measures that fill it until the canvas is wider than the page needs, then centre. The bar is each width against the 1560px the layout is designed at.">
         <State label="data · fills the canvas at every width" className="w-full">
           <div className="h-8 w-full rounded-md border border-dashed border-line-strong bg-fill-hover" />
         </State>
+        <State label="form · a form page's measure: its head column, a `field-width` card and the gutter" className="w-full">
+          <div className="mx-auto h-8 w-[80%] rounded-md border border-dashed border-line-strong bg-fill-hover" />
+        </State>
         <State label="reading · 832px, centred: one long document, such as an article" className="w-full">
           <div className="mx-auto h-8 w-[53%] rounded-md border border-dashed border-line-strong bg-fill-hover" />
         </State>

package/payload/src/components/base/surface/README.md

@@ -10,7 +10,7 @@ Status: beta
 2. **`EmbedSurface`**: wraps every route under `app/embed/`. It starts the host bridge, applies the host's theme (`data-theme`), style variables and safe-area insets, marks the root `data-surface="embed"`, and reports the body's height.
 3. **When the host refuses.** A refused `ui/update-model-context` is sent once more a second later; refused again, every Ask from the view carries the context's first line (the view, its scope and its address), so the question keeps its referent. A refused `ui/message` tells the person in a toast, with the question to ask in the chat themselves. A refused fullscreen opens the console page.
 4. **`useShareView(context)`**: keeps both agents told what is on screen, with one shared context (decision 0011). In an MCP host it is re-sent as `ui/update-model-context` 250ms after it settles; on the console `share` publishes it for the assistant, which reads it with the next question (`sharedContextOn`). `SurfaceOverride` shares with nobody unless given a `share`, so an Atlas specimen never speaks for the page. `<ShareContext context={…} />` is the same hook as a component, for a server page with no client view to call it from.
-4. **`SurfaceOverride`**: puts a subtree on a given surface without a host, for the Atlas and tests.
+5. **`SurfaceOverride`**: puts a subtree on a given surface without a host, for the Atlas and tests.
 
 ## The host bridge
 

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

@@ -65,7 +65,7 @@ export default function TrendChartPreview() {
           />
         </Plane>
       </Specimen>
-      <Specimen label="Short" note="180px or less: three gridlines. On phones the chart drops to 180px and to three or four date labels.">
+      <Specimen label="Short" note="Under 200px the chart draws three gridlines instead of four, and three or four date labels; drawn here at 150px. A chart told to `fill` takes the height its card gives it, never under 220px.">
         <Plane on="surface" className="max-w-md">
           <TrendChart label="Spend per day" dates={dates} height={150} format="cost" series={[{ key: 's', label: 'Spend', values: current.map((d) => d.spend), kind: 'line', color: 'accent' }]} />
         </Plane>