zz-meridian 0.27.0 → 0.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.27.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,17 @@
 
 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

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.27.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/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

@@ -145,7 +145,7 @@ export function Rail({
               <AppMark size={28} />
               <span className="min-w-0 flex-1">
                 {/* 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={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. */}

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/rail-name-title.test.tsx

@@ -21,4 +21,13 @@ describe('the rail\'s head (#79)', () => {
     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/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)]");
+    });
+  }
+});