zz-meridian 0.28.0 → 0.29.0

package/dist/ownership.js

@@ -17,7 +17,7 @@ export const OWNERSHIP = [
     'Managed: the distributed scripts under `scripts/`, except `scripts/verify.config.ts`, the size baseline `optional:scripts/verify.baseline.json` (first-load JS and the HTML of each page) and a team-local `optional:scripts/check.local.ts`.',
     'Managed: the library helpers `src/lib/cn.ts`, `src/lib/format.ts`, `src/lib/format-date.ts`, `src/lib/period.ts`, `src/lib/color.ts`, `src/lib/host.ts`, `src/lib/preferences.ts`, `src/lib/csv.ts`, `src/lib/safe-markdown.ts`, `src/lib/logo.ts`, `src/lib/collection.ts`, `src/lib/explore.ts`, `src/lib/live.ts`, `src/lib/shared-context.ts`, `src/lib/agent-guidance.ts`, `src/lib/insight.ts` and `src/lib/facts.ts`, and the assistant prompt `src/lib/assistant/prompt.ts`.',
     'Managed: the three `src/logic/` helpers a shipped component imports — `src/logic/after-start.ts`, `src/logic/derivations.ts` and `src/logic/summarise.ts` — so a payload\'s cards build in an adopted project; every other module under `src/logic/` is the team\'s.',
-    'Managed: `src/views/console-chrome.tsx` and `tests/setup.ts`.',
+    'Managed: `src/views/console-chrome.tsx`, `tests/setup.ts`, and — in a project `create` made — every test the release ships. A shipped test pins the behaviour of the module it covers, so a release that changes one changes the other; a test the team edits is staged for its decision like any other edited file.',
     'Managed: `optional:scripts/package.json`, only when the adopt or create that set the project up generated it for this project shape.',
     'Managed: both installed skill trees, `optional:.agents/skills/zz-meridian/` and `optional:.claude/skills/zz-meridian/`, taken from the release\'s skill payload.',
     'Managed: the brand token and stylesheet paths under `tokens/` and `src/styles/` that the release generated from the recorded brand.',
@@ -27,6 +27,15 @@ export const OWNERSHIP = [
 ];
 /** The rule as a markdown bullet list, for `references/ownership.md`. */
 export const renderOwnership = () => OWNERSHIP.map((l) => `- ${l}`).join('\n');
+/**
+ * The managed set as one path pattern, for a caller that holds a manifest but no payload list — the consumer smoke checks
+ * a manifest read from a tarball it never enumerates. `managedPaths` is the rule; this is that rule said once more in a
+ * regex, and `tests/cli-ownership.test.ts` holds the two together over the payload paths it knows. The tests clause is the
+ * `create` route's, so it is permissive for an adopted project — whose manifest never names a test but `tests/setup.ts`.
+ */
+export const MANAGED_PATH = /^(tokens\/|src\/styles\/|src\/components\/|scripts\/|src\/lib\/|\.agents\/|\.claude\/)|^(src\/views\/console-chrome\.tsx|tests\/(?:[^/]+\.test\.tsx?|setup\.ts)|src\/logic\/(?:after-start|derivations|summarise)\.ts)$/;
+/** A path inside the managed folders that is the team's all the same: their own views, their app, their docs, their config. */
+export const NEVER_MANAGED = (p) => p === 'src/app.config.ts' || p === 'scripts/verify.config.ts' || p.startsWith('app/') || p.startsWith('docs/') || (p.startsWith('src/views/') && p !== 'src/views/console-chrome.tsx');
 /** The raw `.meridian/manifest.json`, checked field by field; anything off throws an Error that names it. */
 export function parseManifest(text) {
     let raw;
@@ -75,8 +84,16 @@ export function adoptSetOf(payloadFiles) {
  * routes. `generated` is every path a replay or a real run produced; only the ones under `tokens/` or `src/styles/`
  * and `scripts/package.json` become managed, so a generated page or config stays the team's.
  */
-export function managedPaths(payloadFiles, _route, generated = []) {
+export function managedPaths(payloadFiles, route, generated = []) {
     const out = new Set(adoptSetOf(payloadFiles));
+    // A created project's tests are Meridian's: it wrote every one of them, and each pins the behaviour of the module it
+    // covers. Left the team's, a release that changed `splitFigure` could not change the test that reads it, and the
+    // project's own gate failed after an update that was otherwise correct (0.29.0's consumer smoke). Adopt still copies
+    // none of them: that project has a test suite of its own.
+    if (route === 'create')
+        for (const f of payloadFiles)
+            if (/^tests\/[^/]+\.test\.tsx?$/.test(f))
+                out.add(f);
     for (const g of generated)
         if (g.startsWith('tokens/') || g.startsWith('src/styles/') || g === 'scripts/package.json')
             out.add(g);

package/dist/session.js

@@ -154,7 +154,15 @@ function plan(ctx, manifest, startedAt) {
         const inBase = baseManaged.has(p);
         const inTarget = targetManaged.has(p);
         const managed = inBase || inTarget;
-        const recorded = manifest.files[p] ?? (inBase && !sourcePayload.has(p) ? source.hashes.get(p) : undefined) ?? null;
+        // What the recorded release wrote at this path: the manifest's hash, or — for a project `create` made, which received
+        // every payload file — the recorded release's own bytes. The second term is what made 0.29.0's tests unclassifiable:
+        // a test that release shipped but did not record (it managed none but `tests/setup.ts` then) had no hash to compare
+        // with, so an unedited copy of it collided instead of being replaced, and the update stopped for a decision on a file
+        // nobody had touched.
+        const recorded = manifest.files[p]
+            ?? (manifest.route === 'create' && sourcePayload.has(p) ? source.hashes.get(p) : undefined)
+            ?? (inBase && !sourcePayload.has(p) ? source.hashes.get(p) : undefined)
+            ?? null;
         const targetHash = inTarget ? target.hashes.get(p) ?? null : null;
         if (targetHash)
             targetFiles[p] = targetHash;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.28.0",
+  "version": "0.29.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,26 @@
 
 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.29.0] · 2026-10-25
+
+### New
+
+- **A mark says what it encodes** ([#94](https://github.com/zhixuan312/zz-meridian/issues/94)). A colour, a fill or a size a reader is meant to decode now carries its words, built from the data the component already holds, so it is right at the call site rather than added page by page. A Bar list row names its row, its figure and its share (`Checkout · 420 · 42.0% of 1,000`, and without a total too); a Trend chart's marked day names the day and what it is marked for; its dashed stretch into a period still running says "Today so far, dashed"; a Sparkline says the range it draws, which was the one chart carrying no readout; a Delta says whether its colour reads better or worse, which the colour alone could not; a Status dot takes a `label` and becomes an image to assistive technology where it stands with no word beside it, and an activity's tone says what it means ("Went well", "Needs attention", "Failed"). `ColumnChart` and `BarList` take `highlightLabel` — what makes the accented row or column the one the card is about — and say it on that mark and in the hidden table's caption. `docs/data-display.md`'s `## Marks` now states the rule, so a new chart is held to it.
+
+### Fixed
+
+- **A card's head never draws its title over its controls** ([#87](https://github.com/zhixuan312/zz-meridian/issues/87)). `CardHeader` gave the title `min-w-0 flex-1` and the actions `shrink-0`, so in a narrow column the title's box collapsed: at 1024px the second column of `<Row split="2/3">` is 229px, a head with a `Select size="sm"` and two labels took 138 of them, and the title's first word was drawn 32px past its own box, across the controls. The head wraps now, and the title's box has a floor (8rem, the width a word or two needs), so the actions drop to their own line when the two cannot share one. A title that wraps breaks a word too long for the line instead of drawing it over its neighbour.
+- **A page headed by a sentence that opens with its own name announces it once** ([#88](https://github.com/zhixuan312/zz-meridian/issues/88)). `PageTitle` drew the name out of sight and then the sentence, so "USDC: no rule met…" was read as "USDC : USDC: no rule met…" in the heading and twice in a screen reader's list of headings. A sentence that is a plain string is compared with the name, and one that reads data takes `speaksName` on `PageTitle` or `PageFrame`; the name stays in the markup either way, so the heading is in the prerendered shell, and a sentence still to come leaves the name read.
+- **A Key value list wraps a value on a phone instead of cutting it behind a title no phone shows** ([#89](https://github.com/zhixuan312/zz-meridian/issues/89)). Every value truncated unless its item set `wrap`, with the whole of it in the row's `title` — which a pointer reads and a phone cannot. Below the width where a sentence value cannot fit beside its 8rem label (26rem of row) the value wraps as `wrap` asks for; above it the one line and the title stay.
+- **The CLS observer bounds a session window at 5 s** ([#90](https://github.com/zhixuan312/zz-meridian/issues/90)). It summed shifts into a session while each was within 1 s of the last, which is half of web-vitals' definition: a page that filled in over half a minute reported one session the length of the page, so `verify --timed` could fail a page inside its budget and the number could not be compared with another tool's. `scripts/lib/cls.ts` is the rule now, both bounds with it, and `tests/cli-vitals-cls.test.ts` runs the source the page runs.
+- **A collection may hide or page-own a field it computes** ([#91](https://github.com/zhixuan312/zz-meridian/issues/91)). `visibleFields` and `writableFields` built their `omit` masks from the names alone, so a `hidden` or `pageOnlyFields` entry for a joined label or a derived total — which both doc comments allow — threw on a key the shape never had, on every render. A name the shape does not hold is skipped; the ones it holds are still masked, and the write schema stays strict, so a hidden or page-owned field sent anyway is refused.
+- **An image's address is read the way the URL parser reads it** ([#92](https://github.com/zhixuan312/zz-meridian/issues/92)). `safe-markdown` accepted a `src` with no scheme that was not written `//`, so `\\host/p.png`, `/\host/p.png` and `\/host/p.png` passed while the browser resolved each to `//host/p.png` and fetched a third party — the case the rule exists to stop. The address is now resolved against a fixed origin with the backslashes normalised, and kept only when it lands back on it.
+- **A filter bar's search has a floor, so its hint reads the same on a 2x display as on a 1x one** ([#93](https://github.com/zhixuan312/zz-meridian/issues/93)). The field took whatever five facets left: 129px at a 1440px window on a Retina screen, where the placeholder needs 134, so the same page read "Headline, address, ru" there and the whole hint on a laptop. It is 10rem wide at least, and the facets truncate their own labels to make the room.
+- **The environment is put back before every test** ([#95](https://github.com/zhixuan312/zz-meridian/issues/95)). Files share a worker (`pool: 'vmThreads'`), so a file that stubbed a store's variables in a `beforeAll` left them set for the file beside it — seen as an intermittent gate where a view test found a store configured and asked a stub for a snapshot. `tests/setup.ts` restores the environment before each test, so a stub belongs in a `beforeEach`, which runs after it.
+- **A created project's tests move with the release that changes them.** A test the template ships pins the behaviour of the module it covers, and every shipped test but `tests/setup.ts` was the team's, so an update could change `src/lib/format.ts` and leave `tests/format.test.ts` asserting what it did before: a project created with 0.28.0 and updated to 0.29.0 failed its own gate on `splitFigure`. `create` now records the tests it writes as managed, so an update replaces an unedited one with the release's; a test your team edited is staged for your decision, as any other edited file is. `adopt` still copies none of them, because a project it joins has a suite of its own.
+
+- **A figure keeps its symbol and its sign when it is split or shortened, and an amount too small for 20 places never reads as zero** ([#96](https://github.com/zhixuan312/zz-meridian/issues/96)). `splitFigure` failed on a leading mark-and-sign figure (`-$298.43` came back whole), so a tile set it in its number face, or lost both the `$` and the minus when it shortened; `fitFigure` re-built a shortened figure with the app's own currency, so `HK$12,345,678` read `$12.3M`. The minus belongs to the mark, and a figure shortens with the mark and the sign it was given. `formatCost` below 5e-5 keeps its two leading digits in exponent form (`$1.0e-21`) where `toFixed` printed a row of zeroes.
+
 ## [0.28.0] · 2026-10-24
 
 ### Breaking

package/payload/app/system/(atlas)/page.tsx

@@ -148,10 +148,16 @@ export default function AtlasHome() {
               </Link>
             ) : null}
           </div>
+          {/* A digest, not the section: four headlines, and the rest one link away. Every headline used to be in this
+              page's HTML, so the page grew with the length of a release — 0.29.0's ten took it 5.8% over its HTML
+              baseline, which is a page whose size the changelog decides. The cap keeps the page's size its own. */}
           <ul className="grid content-start gap-x-6 gap-y-2.5 sm:grid-cols-2">
-            {release.headlines.map((h) => (
+            {release.headlines.slice(0, 4).map((h) => (
               <li key={h} className="flex items-center gap-2.5 text-sm text-ink"><span aria-hidden className="size-1.5 shrink-0 rounded-full bg-ink-3" />{h}</li>
             ))}
+            {release.headlines.length > 4 ? (
+              <li className="flex items-center gap-2.5 text-sm text-ink-3"><span aria-hidden className="size-1.5 shrink-0 rounded-full bg-ink-3" />and {release.headlines.length - 4} more in the changelog</li>
+            ) : null}
           </ul>
         </div>
       </section>

package/payload/docs/data-display.md

@@ -47,6 +47,7 @@ Text never wears a series colour; values and labels stay in ink.
 - A label inside a plot stands where no series is drawn. A Trend chart sets its baseline's label beside the dashed line at whichever end is clear, and draws no label when neither is.
 - Gridlines recessive (`chart-grid`), one baseline (`chart-axis`), axis labels at `text-2xs` in `ink-3`. Axis labels are a scale: `$12`, `1.2M`; the exact value is in the tooltip and the table.
 - A legend is always present for two or more series or parts; a single series is named by its title.
+- A mark that encodes something says what, and the component says it: on the pointer, and to a screen reader where the mark is the only carrier. A Bar list row names its row and its share, an accented column says why it is the accent (`highlightLabel`), a marked day says what it is marked for, a Sparkline says the range it draws, a Delta says whether its colour reads better or worse, and a Status dot or an activity's tone carries its word as its label. When the meaning is structural — a dashed stretch into a period still running, a delta's direction — the component draws the key or the sentence itself. A new chart is held to this by a reviewer: a colour, a fill or a size a reader is meant to decode, with nothing to decode it with, is not finished.
 - A column's value stands above it at rest, in `ink-3`, while a column is at least 36px wide; narrower, it shows for the column pointed at. Stacked, the value is the column's total.
 
 ## A period still in progress

package/payload/package.json

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

package/payload/scripts/lib/cls.ts

@@ -0,0 +1,19 @@
+/**
+ * Cumulative Layout Shift, as web-vitals defines it: the largest session window of shifts no input caused.
+ *
+ * A session window opens on a shift and keeps taking shifts while each lands within 1 s of the one before it AND within
+ * 5 s of the window's own first shift; the score is the largest window's sum, not the page's total (issue #90). Both
+ * bounds are the definition. With the 1 s gap alone, a page whose content arrives in small pieces — a table filling in,
+ * rows arriving — over half a minute reports one session the length of the page: it fails a page that is inside the
+ * budget, and its number cannot be compared with any other tool's.
+ *
+ * The body below is source, not a function: it is the layout-shift observer's body, added to the page before any page
+ * script runs (`scripts/vitals.ts`). It reads the shift entry as `e` and the accumulator as `v`, both the observer's own
+ * names — `v.started` is the window's first shift, `v.session` its sum, `v.last` the shift before this one.
+ * `tests/cli-vitals-cls.test.ts` builds the same text into a function so what it proves is what the page runs.
+ */
+export const CLS_SESSION = `
+    if (!v.session || e.startTime - v.last >= 1000 || e.startTime - v.started >= 5000) { v.started = e.startTime; v.session = e.value; }
+    else v.session += e.value;
+    v.last = e.startTime;
+    v.cls = Math.max(v.cls, v.session);`;

package/payload/scripts/vitals.ts

@@ -6,7 +6,8 @@
  * The phone is Lighthouse's mobile profile: the device of benchmark index 800, the CPU slowed by the host's own index
  * over 800 (scripts/lib/phone.ts), Slow 4G (150 ms round trip, 1.6 Mbps down, 750 kbps up), a 390px touch screen,
  * motion not reduced. LCP and CLS come from PerformanceObservers installed before the page loads (CLS as web-vitals
- * defines it: the largest session window of shifts no input caused). INP is the slowest of real taps on controls that
+ * defines it: the largest session window of shifts no input caused, each within 1 s of the last and the window within
+ * 5 s — scripts/lib/cls.ts). INP is the slowest of real taps on controls that
  * change the screen (a period, the alerts, the workspace menu, the drawer), from Event Timing, counting only the tap's
  * own pointer, touch and click events: the Escape that closes what a tap opened is not a person's interaction, and a
  * headless browser can hold a no-op key event open until something else paints. A dropped frame is a gap over 50 ms
@@ -31,6 +32,7 @@
  */
 import { atlasCoverage, atlasEntries } from './lib/atlas.ts';
 import { launch } from './lib/chrome.ts';
+import { CLS_SESSION } from './lib/cls.ts';
 import { DEEP_SOURCE } from './lib/deep.ts';
 import { frameCause, loafOf, type LoafEntry } from './lib/frame-cause.ts';
 import { measurePhone } from './lib/phone.ts';
@@ -55,13 +57,12 @@ const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 
 /** Installed before any page script: every vital the page produces lands on window.__v. */
 const OBSERVE = `(() => {
-  const v = window.__v = { lcp: 0, cls: 0, session: 0, last: 0, taps: [], frames: [], loafs: [], recording: false, since: 0, moved: {} };
+  const v = window.__v = { lcp: 0, cls: 0, session: 0, last: 0, started: 0, taps: [], frames: [], loafs: [], recording: false, since: 0, moved: {} };
   const named = (n) => !n || n.nodeType !== 1 ? 'an element since removed' : n.tagName.toLowerCase() + (n.id ? '#' + n.id : '') + (typeof n.className === 'string' && n.className.trim() ? '.' + n.className.trim().split(/\\s+/).slice(0, 2).join('.') : '');
   new PerformanceObserver((l) => { for (const e of l.getEntries()) v.lcp = e.startTime; }).observe({ type: 'largest-contentful-paint', buffered: true });
   new PerformanceObserver((l) => { for (const e of l.getEntries()) {
     if (e.hadRecentInput) continue;
-    v.session = e.startTime - v.last < 1000 && v.session ? v.session + e.value : e.value;
-    v.last = e.startTime; v.cls = Math.max(v.cls, v.session);
+    ${CLS_SESSION}
     for (const s of e.sources || []) { const k = named(s.node); v.moved[k] = (v.moved[k] || 0) + e.value; }
   } }).observe({ type: 'layout-shift', buffered: true });
   const TAP = /^(pointer|touch|mouse|click|gesture)/;

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

@@ -8,7 +8,7 @@ team's. This list is the rule the classifier itself uses; edit it in `cli/src/ow
 - Managed: the distributed scripts under `scripts/`, except `scripts/verify.config.ts`, the size baseline `optional:scripts/verify.baseline.json` (first-load JS and the HTML of each page) and a team-local `optional:scripts/check.local.ts`.
 - Managed: the library helpers `src/lib/cn.ts`, `src/lib/format.ts`, `src/lib/format-date.ts`, `src/lib/period.ts`, `src/lib/color.ts`, `src/lib/host.ts`, `src/lib/preferences.ts`, `src/lib/csv.ts`, `src/lib/safe-markdown.ts`, `src/lib/logo.ts`, `src/lib/collection.ts`, `src/lib/explore.ts`, `src/lib/live.ts`, `src/lib/shared-context.ts`, `src/lib/agent-guidance.ts`, `src/lib/insight.ts` and `src/lib/facts.ts`, and the assistant prompt `src/lib/assistant/prompt.ts`.
 - Managed: the three `src/logic/` helpers a shipped component imports — `src/logic/after-start.ts`, `src/logic/derivations.ts` and `src/logic/summarise.ts` — so a payload's cards build in an adopted project; every other module under `src/logic/` is the team's.
-- Managed: `src/views/console-chrome.tsx` and `tests/setup.ts`.
+- Managed: `src/views/console-chrome.tsx`, `tests/setup.ts`, and — in a project `create` made — every test the release ships. A shipped test pins the behaviour of the module it covers, so a release that changes one changes the other; a test the team edits is staged for its decision like any other edited file.
 - Managed: `optional:scripts/package.json`, only when the adopt or create that set the project up generated it for this project shape.
 - Managed: both installed skill trees, `optional:.agents/skills/zz-meridian/` and `optional:.claude/skills/zz-meridian/`, taken from the release's skill payload.
 - Managed: the brand token and stylesheet paths under `tokens/` and `src/styles/` that the release generated from the recorded brand.

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

@@ -368,6 +368,14 @@ function SentencePending() {
   );
 }
 
+/** Whether a sentence opens with the page's own name, which is the case it would then say twice: "Members: 12 joined".
+ *  A name that is only the first part of a word does not count — "Membership" is not "Members" — so the character after
+ *  it must end the word. */
+function opensWith(sentence: string, name: string): boolean {
+  const s = sentence.trim(), n = name.trim();
+  return n !== '' && s.length > n.length && s.slice(0, n.length).toLowerCase() === n.toLowerCase() && !/[a-z0-9]/i.test(s[n.length] ?? '');
+}
+
 /**
  * A page's heading, the one `h1`. With no `name` it is the title at the page-title size, a name such as "Members".
  *
@@ -379,13 +387,18 @@ function SentencePending() {
  * page, drawn as a page that passes no name draws its title. A loading state passes the name alone and draws the
  * placeholder.
  */
-export function PageTitle({ name, title, ref }: { name?: string; title?: ReactNode; ref?: Ref<HTMLHeadingElement> }) {
+export function PageTitle({ name, title, speaksName, ref }: { name?: string; title?: ReactNode; speaksName?: boolean; ref?: Ref<HTMLHeadingElement> }) {
   if (name === undefined) return <h1 ref={ref} className="t-page">{title}</h1>;
+  // A sentence that opens with the name announces it twice (issue #88): "USDC : USDC: no rule met", in a heading and
+  // in a screen reader's list of headings. The name stays in the markup either way — the heading is in the prerendered
+  // shell — but it is hidden from assistive technology, which reads the sentence. A sentence that is a plain string
+  // says so by itself; one that reads data cannot be asked before it arrives, so a page passes `speaksName`.
+  const repeats = title !== undefined && (speaksName ?? (typeof title === 'string' && opensWith(title, name)));
   return (
     <h1 ref={ref} className="@container text-xl">
       {/* The name stays out of sight while a sentence or its placeholder follows it, and heads the page when the sentence came to nothing. */}
-      <span className="t-page sr-only has-[~[data-title]:empty]:not-sr-only">{name}</span>
-      <span className="sr-only">: </span>
+      <span aria-hidden={repeats || undefined} className="t-page sr-only has-[~[data-title]:empty]:not-sr-only">{name}</span>
+      <span aria-hidden={repeats || undefined} className="sr-only">: </span>
       {title === undefined ? <SentencePending /> : (
         <Suspense fallback={<SentencePending />}>
           <span data-title className={cn(SENTENCE, 'empty:hidden')}>{title}</span>
@@ -406,6 +419,7 @@ export function PageTitle({ name, title, ref }: { name?: string; title?: ReactNo
 export function PageFrame({
   name,
   title,
+  speaksName,
   description,
   kicker,
   meta,
@@ -418,6 +432,9 @@ export function PageFrame({
   name?: string;
   /** The page's title: its name, or with `name` the sentence that heads it. Left out with `name`, the sentence is still to come. */
   title?: ReactNode;
+  /** The sentence speaks for the name — it opens with it — so the name is not announced beside it (`PageTitle`). Only
+   *  needed when the sentence reads data and cannot be compared with the name until it has arrived. */
+  speaksName?: boolean;
   /** One sentence under the title: what this page answers. */
   description?: ReactNode;
   /** Mono caps above the title: where this page sits ("ZZ Meridian · Production", or the parent record). */
@@ -487,7 +504,7 @@ export function PageFrame({
                 everything under it dropped. Now its width follows the viewport, the rail and the assistant alone. */}
             <div>
               {kicker ? <p className="t-kicker mb-4">{kicker}</p> : null}
-              <PageTitle ref={head} name={name} title={title} />
+              <PageTitle ref={head} name={name} title={title} speaksName={speaksName} />
             </div>
             {/* The description grows, so the meta and the actions end the row on its last line; with no description
                 nothing is left to grow in its place, and they stand at the row's start. */}

package/payload/src/components/charts/bar-list/index.tsx

@@ -15,6 +15,7 @@ export function BarList({
   items,
   format = (n) => n.toLocaleString('en-US'),
   highlight,
+  highlightLabel,
   limit = 6,
   total,
   label,
@@ -24,6 +25,9 @@ export function BarList({
   format?: (n: number) => string;
   /** The key of the one row worth pointing at. Omit it and every bar is neutral. */
   highlight?: string;
+  /** What makes that row the one worth pointing at, in a word: "The busiest hour". Said on its row, so the accent is
+   *  not a colour a reader has to guess (issue #94). */
+  highlightLabel?: string;
   limit?: number;
   /** The whole the rows are a share of: each bar's length is its value over this, and its share shows on hover. Left
    * out, bars are drawn against the largest row. */
@@ -42,8 +46,12 @@ export function BarList({
     <ul aria-label={label} className={cn('flex flex-col gap-3.5', className)}>
       {shown.map((it, n) => {
         const hot = it.key === highlight;
+        // The row says what it is as well as its share (issue #94): "42.1% of 1,204" on its own never named the row, and
+        // a list with no total had no title at all. The label is the row's own word, so it is used when it is text.
+        const named = typeof it.label === 'string' || typeof it.label === 'number' ? String(it.label) : null;
+        const share = total ? `${((it.value / Math.max(1, total)) * 100).toFixed(1)}% of ${format(total)}` : null;
         return (
-          <li key={it.key} className="group/bar" title={total ? `${((it.value / Math.max(1, total)) * 100).toFixed(1)}% of ${format(total)}` : undefined}>
+          <li key={it.key} className="group/bar" title={[named, format(it.value), share, hot ? highlightLabel : null].filter(Boolean).join(' · ')}>
             <div className="mb-1.5 flex items-baseline gap-3 text-sm">
               {it.href ? (
                 // The row's look at rest, the accent under the pointer and the focus ring on the keyboard. The hit area is

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

@@ -21,6 +21,9 @@ export type ColumnPart = { key: string; label: string; color?: number; tone?: 'n
 type Shared = {
   /** The key of the one column the card is about. */
   highlight?: string;
+  /** What makes that column the one the card is about, in a word: "the day of the incident", "the period on trial". The
+   *  chart says it wherever the column is read, so the accent is not a colour a reader has to guess (issue #94). */
+  highlightLabel?: string;
   /** One ISO date per column, to share the page's Meridian. */
   dates?: string[];
   /** The last column is a period still in progress: it is drawn unfinished and reads "so far". */
@@ -123,6 +126,7 @@ function stack(columns: StackedColumn[], parts: ColumnPart[]) {
  */
 export function ColumnChart({
   highlight,
+  highlightLabel,
   dates,
   running = false,
   format = count,
@@ -249,7 +253,8 @@ export function ColumnChart({
                   data-running={unfinished ? '' : undefined}
                   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}
+                  // The accented column says what makes it the one the card is about, beside its figure.
+                  title={[rest && text.length * 7 > column ? text : null, b.key === highlight ? highlightLabel : null].filter(Boolean).join(' · ') || undefined}
                   className="group/col relative h-full min-w-0 flex-1"
                   onPointerEnter={() => set(i)}
                   onPointerDown={() => set(i)}
@@ -361,7 +366,7 @@ export function ColumnChart({
       </div>
       <p className="sr-only" aria-live="polite">{reading}</p>
       <table className="sr-only">
-        <caption>{label}</caption>
+        <caption>{label}{highlight && highlightLabel ? `. Accented: ${highlightLabel}` : ''}</caption>
         {drawn ? <thead><tr><th scope="col">Period</th>{drawn.map((p) => <th key={p.key} scope="col">{p.label}</th>)}<th scope="col">Total</th></tr></thead> : null}
         <tbody>
           {bars.map((b, i) => (

package/payload/src/components/charts/sparkline/index.tsx

@@ -36,8 +36,11 @@ export function Sparkline({ values, color = 'accent', height = 36, className }:
   // Meridian by. Fourteen days of a customer on a page of thirty would otherwise mark the wrong day. A day with no value
   // is still that day: the hairline marks it, and there is no dot to stand on the line.
   const at = index !== null && values.length === dates.length ? { x: x(index), y: pts[index]?.[1] ?? null } : null;
+  // A shape with no readout says nothing about what it covers, and it is the one chart a page puts beside a figure
+  // without a table under it (issue #94). The range it draws is the words it has, on the pointer.
+  const range = `${Math.min(...numbers).toLocaleString('en-US')} to ${Math.max(...numbers).toLocaleString('en-US')}`;
   return (
-    <div ref={ref} aria-hidden className={className} style={{ height }}>
+    <div ref={ref} aria-hidden title={range} className={className} style={{ height }}>
       {W ? (
         <svg width={W} height={H} className="block overflow-visible">
           <defs>

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

@@ -451,7 +451,10 @@ export function TrendChart({
       ) : null}
       {active !== null && width > 0 ? (
         <Readout at={cx} after={cx <= width / 2} top={pad.t - 4} visible={local || previewIndex !== undefined}>
-          <p className="t-eyebrow mb-1.5 break-words">{tick ? tick(dates[active]) : formatDate(dates[active])}{active === soFar ? ' · so far' : null}</p>
+          {/* A marked day says what it is marked for where every other reading of the day is (#94): the dot and its stem
+              are a shape, the group they stand in takes no pointer, and the table's caption is read by a screen reader and
+              not by the person pointing at the chart. */}
+          <p className="t-eyebrow mb-1.5 break-words">{tick ? tick(dates[active]) : formatDate(dates[active])}{active === soFar ? ' · so far' : null}{marks?.dates.includes(dates[active]) ? ` · ${marks.label}` : null}</p>
           {/* Stacked, the readout lists the bands top to bottom, as they sit on the chart, then the total. */}
           {(stacked ? series.map((s, k) => ({ s, k })).reverse() : series.map((s, k) => ({ s, k }))).map(({ s, k }) => (
             <p key={s.key} className="flex flex-wrap items-start gap-x-2 text-xs leading-6">
@@ -479,5 +482,7 @@ export function TrendChart({
 
 /** The stretch into a point still running: the line's own colour, thinner and dashed, and it fades in as a reference does. */
 function Running({ d, stroke }: { d: string; stroke: string }) {
-  return <path data-running d={d} fill="none" stroke={stroke} strokeWidth={1.5} strokeDasharray="3 4" strokeLinecap="round" className="fade-in" />;
+  // The stretch is the chart's own mark and its meaning is not in its shape: the words are `SO_FAR`'s, which the caption
+  // says too. A page that passes `running` says them above the chart; the pointer says them here (issue #94).
+  return <path data-running d={d} fill="none" stroke={stroke} strokeWidth={1.5} strokeDasharray="3 4" strokeLinecap="round" className="fade-in"><title>{SO_FAR}</title></path>;
 }

package/payload/src/components/patterns/activity-feed/index.tsx

@@ -13,6 +13,8 @@ import { AgentMark } from '@/components/ui/agent-mark';
 export type ActivityEvent = { id: string; at: string; actor: string; system?: boolean; unknown?: boolean; via?: string; verb: string; object: string; href?: string; tone?: 'positive' | 'warning' | 'critical' };
 
 const DOT = { positive: 'bg-positive', warning: 'bg-warning', critical: 'bg-critical' } as const;
+/** What the tone means, in a word: the dot is the only thing carrying it, so it cannot be a colour alone (issue #94). */
+const TONE = { positive: 'Went well', warning: 'Needs attention', critical: 'Failed' } as const;
 
 /**
  * What happened, who did it, when: one line per event, newest first, on a quiet timeline. The actor is a person, the
@@ -25,7 +27,7 @@ export function ActivityFeed({ events, now, className }: { events: ActivityEvent
         <li key={e.id} className="relative flex gap-3 pb-4 last:pb-0">
           {i < events.length - 1 ? <span aria-hidden className="absolute top-7 bottom-0 left-3 w-px bg-line" /> : null}
           <span className="relative mt-0.5 shrink-0">
-            {e.via ? <AgentMark size="md" /> : e.system ? <span className="grid size-6 place-items-center rounded-full bg-fill-track"><span className={cn('size-2 rounded-full', e.tone ? DOT[e.tone] : 'bg-ink-3')} /></span> : e.unknown ? <span data-actor-unknown className="block size-6 rounded-full border border-dashed border-line-strong" /> : <Avatar name={e.actor} size="sm" />}
+            {e.via ? <AgentMark size="md" /> : e.system ? <span className="grid size-6 place-items-center rounded-full bg-fill-track"><span role={e.tone ? 'img' : undefined} aria-label={e.tone ? TONE[e.tone] : undefined} title={e.tone ? TONE[e.tone] : undefined} className={cn('size-2 rounded-full', e.tone ? DOT[e.tone] : 'bg-ink-3')} /></span> : e.unknown ? <span data-actor-unknown className="block size-6 rounded-full border border-dashed border-line-strong" /> : <Avatar name={e.actor} size="sm" />}
           </span>
           <div className="min-w-0 flex-1 pt-0.5">
             <p className="text-sm text-ink-2">

package/payload/src/components/patterns/filter-bar/index.tsx

@@ -85,7 +85,10 @@ export function FilterBar({
             onValueChange={search.onChange}
             placeholder={search.placeholder ?? 'Search'}
             shortcut="/"
-            className="min-w-0 flex-1 @min-[52rem]:max-w-72"
+            // A floor, so the hint is never cut to a different word on a 2x display than on a 1x one (issue #93): the bar
+            // gave the field whatever five facets left, 129px at a 1440px window on 2x, where the placeholder needs 134.
+            // The facets truncate their own labels to make the room.
+            className="min-w-40 flex-1 @min-[52rem]:max-w-72"
           />
         ) : null}
         <div className="flex min-w-0 items-center gap-2 @max-[52rem]:hidden">{selects('sm')}</div>

package/payload/src/components/patterns/incident-card/index.tsx

@@ -55,7 +55,9 @@ export function IncidentCard({ incident, now, variant = 'card', className }: { i
   const updates = [...incident.updates].sort((a, b) => b.at.localeCompare(a.at));
   return (
     <Card className={cn('overflow-hidden', live && st.border, className)}>
-      {live ? <span aria-hidden className={cn('absolute inset-x-0 top-0 h-0.5', st.edge)} /> : null}
+      {/* The edge's colour is the state's, and the state's word is the badge below; the line says it too, on the pointer,
+          because it is the first thing read and a colour is not a word (issue #94). */}
+      {live ? <span aria-hidden title={st.word} className={cn('absolute inset-x-0 top-0 h-0.5', st.edge)} /> : null}
       <div className="px-(--card-pad) pt-(--card-pad)">
         <div className="flex flex-wrap items-center gap-2">
           <Badge tone={st.tone} dot>{st.word}</Badge>

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

@@ -43,9 +43,14 @@ export function CardHeader({
   // as an attribute; a title built of elements is the caller's to keep short or to wrap.
   const whole = !wrap && typeof title === 'string' ? title : undefined;
   return (
-    <div className={cn('flex items-start gap-4 px-(--card-pad) pt-[calc(var(--card-pad)-4px)]', divided ? 'border-b border-line pb-3.5' : 'pb-1', className)}>
-      <div className="min-w-0 flex-1">
-        <h2 title={whole} className={cn('t-card', wrap ? 'text-pretty' : 'truncate')}>{title}</h2>
+    // The head wraps rather than squeezing the title to a sliver (issue #87). The title's box has a floor — the width it
+    // needs to keep a word or two whole — and the actions never shrink, so when the two cannot share a line the actions
+    // take the next one. Without the floor the box collapsed to nothing in a narrow column: at 1024px the second column
+    // of `<Row split="2/3">` is 229px, a head with a Select and two labels takes 138px of it, and the first word drew
+    // 32px past its own box, over the controls.
+    <div className={cn('flex flex-wrap items-start gap-x-4 gap-y-2 px-(--card-pad) pt-[calc(var(--card-pad)-4px)]', divided ? 'border-b border-line pb-3.5' : 'pb-1', className)}>
+      <div className="min-w-32 flex-1">
+        <h2 title={whole} className={cn('t-card', wrap ? 'text-pretty [overflow-wrap:anywhere]' : 'truncate')}>{title}</h2>
         {description ? <p className="t-caption mt-1 text-pretty">{description}</p> : null}
       </div>
       {actions ? <div className="-my-1 flex shrink-0 items-center gap-1.5">{actions}</div> : null}

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

@@ -34,8 +34,13 @@ export function Delta({
   const read = typeof format === 'function' ? format : DELTA_FORMATS[format ?? 'percent'];
   const up = value > 0;
   const good = intent === 'neutral' || flat ? null : (up && intent === 'up') || (!up && intent === 'down');
+  // The arrow says which way, and the colour says whether that is good or bad — a judgement a reader who does not know
+  // the intent cannot decode (issue #94). The sentence is the whole reading, on the pointer. It is not in the reading
+  // itself: a tile heard in a screen reader gets the direction and the figure, which are the facts.
+  const sentence = [`${up ? 'Up' : 'Down'} ${read(value)}`, good === null ? null : good ? 'better' : 'worse'].filter(Boolean).join(', ');
   return (
     <span
+      title={flat ? 'Unchanged' : sentence}
       className={cn(
         't-num inline-flex items-center gap-0.5 text-xs font-medium whitespace-nowrap',
         good === null ? 'text-ink-2' : good ? 'text-positive-ink' : 'text-critical-ink',

package/payload/src/components/ui/key-value/index.tsx

@@ -28,7 +28,14 @@ export function KeyValue({ items, columns = 1, className }: { items: KeyValueIte
             <dt className="w-32 shrink-0 text-sm text-ink-3">{it.label}</dt>
             <dd
               title={it.wrap ? undefined : (it.title ?? (typeof it.value === 'string' || typeof it.value === 'number' ? String(it.value) : undefined))}
-              className={cn('t-num min-w-0 flex-1 text-sm text-ink', it.wrap ? '[overflow-wrap:anywhere]' : 'truncate', it.mono && 'font-mono text-xs')}
+              className={cn(
+                't-num min-w-0 flex-1 text-sm text-ink',
+                // A value the row cuts keeps its whole text in its title, which a pointer reads and a phone cannot (issue
+                // #89). Below the width where a sentence value cannot fit beside its label the row wraps instead, the way
+                // `wrap` asks for, so nothing is left unreadable behind a hover that does not exist there.
+                it.wrap ? '[overflow-wrap:anywhere]' : 'truncate @max-[26rem]:whitespace-normal @max-[26rem]:[overflow-wrap:anywhere]',
+                it.mono && 'font-mono text-xs',
+              )}
             >
               {it.value}
             </dd>

package/payload/src/components/ui/status-dot/index.tsx

@@ -3,7 +3,15 @@ import type { Tone } from '@/components/ui/badge';
 
 const TONE: Record<Tone, string> = { neutral: 'bg-ink-3 text-ink-3', accent: 'bg-accent text-accent', positive: 'bg-positive text-positive', warning: 'bg-warning text-warning', critical: 'bg-critical text-critical' };
 
-/** A state at a glance, always beside its word. `live` pulses: the one loop allowed outside a skeleton. */
-export function StatusDot({ tone = 'neutral', live, className }: { tone?: Tone; live?: boolean; className?: string }) {
-  return <span aria-hidden className={cn('inline-block size-2 shrink-0 rounded-full', TONE[tone], live && 'pulse', className)} />;
+/**
+ * A state at a glance, always beside its word. `live` pulses: the one loop allowed outside a skeleton.
+ *
+ * Where there is no word beside it — a list row, a finding — the dot is the only thing carrying the state, so it takes
+ * one (issue #94): with `label` it is an image to assistive technology rather than a decoration, and the pointer reads
+ * the same word. Without one it stays out of the way, which is what a dot beside its word should do.
+ */
+export function StatusDot({ tone = 'neutral', live, label, className }: { tone?: Tone; live?: boolean; label?: string; className?: string }) {
+  const shape = cn('inline-block size-2 shrink-0 rounded-full', TONE[tone], live && 'pulse', className);
+  if (label) return <span role="img" aria-label={label} title={label} className={shape} />;
+  return <span aria-hidden className={shape} />;
 }

package/payload/src/lib/collection.ts

@@ -480,9 +480,19 @@ function withoutDefault(field: z.ZodType): z.ZodType {
     : field;
 }
 
+/**
+ * `fields` without the named ones, or `fields` itself when it names none of them (issue #91). A collection hides or
+ * page-owns a field it computes rather than declares — a joined label, a derived total — which the doc comments below
+ * allow: a name the shape does not have is named but not sent, and `omit` cannot mask a key that was never there.
+ */
+function without(fields: z.ZodObject, names: string[]): z.ZodObject {
+  const known = names.filter((f) => Object.hasOwn(fields.shape, f));
+  return known.length ? fields.omit(Object.fromEntries(known.map((f) => [f, true])) as Record<string, true>).strict() : fields.strict();
+}
+
 /** The collection's fields without its hidden ones. */
 export function visibleFields(c: AnyCollection): z.ZodObject {
-  return c.fields.omit(Object.fromEntries(((c.hidden ?? []) as string[]).map((f) => [f, true])) as Record<string, true>).strict();
+  return without(c.fields, (c.hidden ?? []) as string[]);
 }
 
 /**
@@ -494,7 +504,5 @@ export function visibleFields(c: AnyCollection): z.ZodObject {
  * same as on any other visible field. Reading a field and changing it are different rules, and this is the second.
  */
 export function writableFields(c: AnyCollection): z.ZodObject {
-  const base = visibleFields(c);
-  const pageOnly = (c.pageOnlyFields ?? []) as string[];
-  return pageOnly.length ? base.omit(Object.fromEntries(pageOnly.map((f) => [f, true])) as Record<string, true>).strict() : base;
+  return without(visibleFields(c), (c.pageOnlyFields ?? []) as string[]);
 }

package/payload/src/lib/format.ts

@@ -35,13 +35,20 @@ export function formatCost(amount: number | null): string {
   if (amount === 0) return `${CURRENCY}0`;
   const sign = amount < 0 ? '-' : '';
   const a = Math.abs(amount);
-  if (a < 0.00005) return `${sign}${CURRENCY}${a.toFixed(Math.min(20, 1 - Math.floor(Math.log10(a))))}`;
+  if (a < 0.00005) {
+    // The places grow with how small the amount is, one more than its leading zeroes, so a figure never reads as zero.
+    // Past 20 places `toFixed` prints only zeroes, which is an amount of nothing and not a small one: there the figure
+    // keeps its two leading digits in exponent form instead (`$1.2e-21`).
+    const places = 1 - Math.floor(Math.log10(a));
+    return `${sign}${CURRENCY}${places <= 20 ? a.toFixed(places) : a.toExponential(1)}`;
+  }
   if (a < 0.01) return `${sign}${CURRENCY}${a.toFixed(4)}`;
   // Two decimals at every size, so a column of amounts keeps one precision and its decimals line up.
   return `${sign}${CURRENCY}${CENTS.format(a)}`;
 }
 
-/** Money at a glance, for dense tables and tiles: $1.2M, $340K, $912. The exact amount belongs in the tooltip. */
+/** Money at a glance, for dense tables and tiles: $1.2M, $340K, $912. The exact amount belongs in the tooltip. A figure
+ *  that has to KEEP the mark its caller wrote is `fitFigure`'s, which shortens with that mark and not this one. */
 function formatCostCompact(amount: number | null): string {
   if (amount === null) return '—';
   const sign = amount < 0 ? '-' : '';
@@ -54,10 +61,12 @@ function formatCostCompact(amount: number | null): string {
  * ONE parser for the two figures that do this (the Featured metric and the Metric tile). It is total: a string it
  * cannot split comes back whole as `int`, so a caller never tests for a match — and never dereferences one that is
  * not there. The symbol is whatever abuts the number, not a list of currencies: `$`, `S$`, `CHF` — this
- *  repository's own `formatCost` concatenates the narrow symbol with no space, so it always abuts.
+ *  repository's own `formatCost` concatenates the narrow symbol with no space, so it always abuts. A credit's minus is
+ *  part of it too (issue #96): `-$298.43` splits as mark `-$` and number `298.43`, so the sign the column is sorted by
+ *  is still there when the figure is set in two faces.
  */
 export function splitFigure(s: string): { pre?: string; int: string; frac?: string; unit?: string } {
-  const m = s.match(/^([^\d\s.,-]*)([\d,]+)(\.\d+)?\s*([%a-zA-Z]*)$/);
+  const m = s.match(/^([-+]?[^\d\s.,-]*)([\d,]+)(\.\d+)?\s*([%a-zA-Z]*)$/);
   if (!m) return { int: s };
   // Cents step down; the decimal of a compact amount ("$1.2M") is part of the number, not cents.
   const cents = Boolean(m[1]) && !m[4];
@@ -76,8 +85,12 @@ export const FIGURE_MAX = 9;
 export function fitFigure(text: string, value: number): string {
   const { pre, int, frac, unit } = splitFigure(text);
   if ((int + (frac ?? '')).length <= FIGURE_MAX || !Number.isFinite(value)) return text;
+  // The mark and the sign are the ones the caller's text carries, not a generic cost formatter's (issue #96): a tile
+  // reads "HK$12.3M" and "-$1.2M", and a cost shortens the way the same amount shortens anywhere else. Where `pre`
+  // already carries the minus, the number does not repeat it.
+  const number = pre?.includes('-') ? formatCompact(Math.abs(value)) : formatCompact(value);
   // The unit keeps the space it had: "12.5M tokens", "12.5Mms" never arises (durations step up to hours first).
-  return pre ? formatCostCompact(value) : `${formatCompact(value)}${unit ? (/\s[%a-zA-Z]+$/.test(text) ? ' ' : '') + unit : ''}`;
+  return `${pre ?? ''}${number}${unit ? (/\s[%a-zA-Z]+$/.test(text) ? ' ' : '') + unit : ''}`;
 }
 
 /** The steps of a count at a glance from a million up, smallest first. */

package/payload/src/lib/safe-markdown.ts

@@ -14,12 +14,29 @@
  */
 const NAVIGABLE = new Set(['http:', 'https:', 'mailto:', 'tel:']);
 
+/** The origin every image is resolved against. Any host nothing can reach does: only an address that lands back on it
+ *  is kept, and the address is returned as it was written, never rewritten to this one. */
+const THIS_ORIGIN = 'https://meridian.invalid';
+
+/**
+ * Whether an image's address is a path on this page (issue #92). Read by resolution, not by looking for `//`: a
+ * backslash is a slash to the URL parser, so `\\host/p.png`, `/\host/p.png` and `\/host/p.png` are each `//host/p.png`
+ * to the fetch — a third party — while a check that reads them as written sees a relative path. Resolving and comparing
+ * the origin needs no list of the ways the parser folds one into the other, and a `//host` address resolves off-origin
+ * by the same rule.
+ */
+function sameOrigin(url: string): boolean {
+  try {
+    return new URL(url.replace(/\\/g, '/'), `${THIS_ORIGIN}/`).origin === THIS_ORIGIN;
+  } catch {
+    return false;
+  }
+}
+
 /** Returns the URL to use, or '' to drop it. `key` is the attribute being filled: `src` for an image, `href` for a link. */
 export function safeMarkdownUrl(url: string, key: string): string {
   const raw = url.trim();
   if (raw === '') return '';
-  // `//host/p.png` has no scheme and is not relative: the browser supplies one and fetches a third party.
-  const protocolRelative = raw.startsWith('//');
   // A scheme only counts before the first `/`, `?` or `#`, so `a/path:with-colon` is a path, not the scheme `a/path`.
   //
   // The scheme is read from a copy with the controls and spaces taken out, because that is what a browser does with a
@@ -28,7 +45,7 @@ export function safeMarkdownUrl(url: string, key: string): string {
   // returned exactly as it was written.
   const probe = raw.replace(/[\u0000- \u007F]/g, '');
   const scheme = /^([a-zA-Z][a-zA-Z0-9+.-]*):/.exec(probe.split(/[/?#]/, 1)[0] ?? '')?.[1];
-  if (key === 'src') return scheme !== undefined || protocolRelative ? '' : raw;
+  if (key === 'src') return scheme === undefined && sameOrigin(probe) ? raw : '';
   if (scheme === undefined) return raw;
   return NAVIGABLE.has(`${scheme.toLowerCase()}:`) ? raw : '';
 }

package/payload/src/views/home.tsx

@@ -180,6 +180,7 @@ function YearCard({ data, keys }: { data: HomeData; keys: string[] }) {
           label="Requests a window"
           columns={year.windows.map((w) => ({ key: w.to, label: formatShortDate(w.to), value: w.requests }))}
           highlight={keys.at(-1)}
+          highlightLabel="The latest window"
           dates={keys}
           format={formatCompact}
           axisFormat={AXIS_FORMATTERS.compact}
@@ -239,6 +240,7 @@ function RevenueWindows({ data, keys }: { data: HomeData; keys: string[] }) {
           label="Revenue a window"
           columns={data.year.windows.map((w: HomeWindow) => ({ key: w.to, label: formatShortDate(w.to), value: w.revenue }))}
           highlight={keys.at(-1)}
+          highlightLabel="The latest window"
           dates={keys}
           format={costCompact}
           axisFormat={AXIS_FORMATTERS['cost-compact']}

package/payload/src/views/now.tsx

@@ -215,6 +215,7 @@ function Compute({ compute }: { compute: NonNullable<NowData['compute']> }) {
           total={1}
           format={(n) => formatPercent(n, 1)}
           highlight={compute.fullest ?? undefined}
+          highlightLabel="The fullest region"
           items={compute.regions.map((r) => ({ key: r.region, label: <span className="font-mono text-xs">{r.region}</span>, value: r.share, meta: `${r.gpus} GPUs provisioned` }))}
         />
       </CardBody>

package/payload/src/views/usage.tsx

@@ -125,7 +125,7 @@ function WhenTheyCome({ figures }: { figures: UsageFigures }) {
       <CardBody className="flex flex-col gap-4">
         <Segmented label="Count when they come" size="sm" value={when} onChange={setWhen} options={WHEN} />
         {when === 'hour' ? (
-          <ColumnChart columns={figures.hours} highlight={busiest.key} format={formatCompact} axisFormat={AXIS_FORMATTERS.count} label="Requests by hour of day" labelEvery={6} height={220} />
+          <ColumnChart columns={figures.hours} highlight={busiest.key} highlightLabel="The busiest hour" format={formatCompact} axisFormat={AXIS_FORMATTERS.count} label="Requests by hour of day" labelEvery={6} height={220} />
         ) : (
           <Heatmap values={figures.heat} timezone={app.timezone} scale="quantile" label="Requests by weekday and hour" format={formatCompact} />
         )}

package/payload/tests/card-header-title.test.tsx

@@ -21,4 +21,19 @@ describe("a card heading's whole text", () => {
     const { container } = render(<CardHeader title={<span>Requests <em>by region</em></span>} />);
     expect(container.querySelector('h2')!.hasAttribute('title')).toBe(false);
   });
+
+  // A head that cannot hold a word of its title beside its actions puts the actions on their own line instead (#87).
+  // jsdom lays nothing out, so what it can hold is the rule: the row wraps, the title's box has a floor, and the
+  // actions never shrink. `scripts/audit.ts` at 1024px is what shows the heading inside its box.
+  it('wraps its actions below the title when the two cannot share a line', () => {
+    const { container } = render(<CardHeader title="Revenue by plan" wrap actions={<button>Export</button>} />);
+    const head = container.firstElementChild!;
+    expect(head.className).toMatch(/\bflex-wrap\b/);
+    const [title, actions] = [...head.children];
+    expect(title.className).toMatch(/\bmin-w-32\b/);
+    expect(title.className).toMatch(/\bflex-1\b/);
+    expect(actions.className).toMatch(/\bshrink-0\b/);
+    // A title that wraps breaks a word too long for the line rather than drawing it over what is beside it.
+    expect(container.querySelector('h2')!.className).toMatch(/\[overflow-wrap:anywhere\]/);
+  });
 });

package/payload/tests/collection.test.ts

@@ -1,7 +1,7 @@
 // @vitest-environment node
 import { describe, expect, test } from 'vitest';
 import { z } from 'zod';
-import { arrayCollection } from '@/lib/collection';
+import { arrayCollection, visibleFields, writableFields } from '@/lib/collection';
 
 type Person = { id: string; name: string; team: 'Support' | 'Sales'; seats: number; lastActive: string | null };
 const ROWS: Person[] = [
@@ -121,6 +121,43 @@ describe('derived fields', () => {
   });
 });
 
+describe('a field the collection names but does not declare', () => {
+  // A collection hides or page-owns a field its query computes rather than its `fields` declares — a joined label, a
+  // derived total — which the doc comments allow ("named but not sent"). The mask was built from the name alone, so
+  // `omit` threw on a key the shape never had, on every render (issue #91).
+  type Joined = Person & { displayName: string };
+  const joined = () =>
+    arrayCollection<Joined, 'id'>({
+      name: `joined${++n}`, label: 'People', description: 'd',
+      fields: z.object({ name: z.string(), team: z.enum(['Support', 'Sales']), seats: z.number(), lastActive: z.string().nullable() }),
+      hidden: ['displayName'],
+      pageOnlyFields: ['seats'],
+      key: 'id',
+      title: (r) => r.name,
+      rows: structuredClone(ROWS).map((r) => ({ ...r, displayName: r.name.toUpperCase() })),
+      allow: ['create', 'update'],
+    });
+
+  test('still masks what it can, and keeps the rest of the shape', () => {
+    const c = joined();
+    // A name the shape does not have is skipped; the ones it has are still masked.
+    const visible = visibleFields(c);
+    expect(Object.keys(visible.shape)).toEqual(['name', 'team', 'seats', 'lastActive']);
+    expect(Object.keys(writableFields(c).shape)).toEqual(['name', 'team', 'lastActive']);
+  });
+
+  test('reads, and still refuses a write the mask leaves out', async () => {
+    const c = joined();
+    expect((await c.query({ where: [] })).rows.map((r) => r.displayName)).toEqual(['ALICE MORENO', 'RAVI PATEL', 'AMARA OKAFOR']);
+    // The write schema has no key for a field the collection hid, nor for one a page owns, and being strict it refuses
+    // one that is sent rather than dropping it.
+    const write = writableFields(c);
+    expect(write.safeParse({ name: 'A', team: 'Sales', lastActive: null }).success).toBe(true);
+    expect(write.safeParse({ name: 'A', team: 'Sales', lastActive: null, displayName: 'A' }).success).toBe(false);
+    expect(write.safeParse({ name: 'A', team: 'Sales', lastActive: null, seats: 1 }).success).toBe(false);
+  });
+});
+
 describe('offset and ties', () => {
   test('offset skips before the limit applies, and total still counts every hit', async () => {
     const r = await people().query({ sort: { field: 'seats', dir: 'asc' }, offset: 1, limit: 1 });

package/payload/tests/env-not-shared.test.ts

@@ -0,0 +1,24 @@
+// @vitest-environment node
+// The environment is the process's, not the file's: files share a worker (`pool: 'vmThreads'`). A file that stubs a
+// store's variable for itself in a beforeAll — the natural way to exercise a stubbed Postgres — left it set for the
+// file beside it, which then found a store configured and died on `getaddrinfo ENOTFOUND`. `tests/setup.ts` puts the
+// environment back before every test; this is the proof, so the stub below is in a beforeAll on purpose (issue #95).
+import { beforeAll, beforeEach, describe, expect, test } from 'vitest';
+
+const NAME = 'DATABASE_URL';
+
+describe('the environment between test files', () => {
+  beforeAll(() => { process.env[NAME] = 'postgres://stub/db'; });
+
+  test('is the one the setup found, so a stub in a beforeAll reaches no test at all', () => {
+    expect(process.env[NAME]).toBeUndefined();
+  });
+});
+
+describe('a stub a file sets for itself', () => {
+  beforeEach(() => { process.env[NAME] = 'postgres://own/db'; });
+
+  test('is there for the test that set it, which is why the stub belongs in a beforeEach', () => {
+    expect(process.env[NAME]).toBe('postgres://own/db');
+  });
+});

package/payload/tests/filter-bar-search.test.tsx

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { FilterBar } from '@/components/patterns/filter-bar';
+
+/**
+ * A bar with more facets than room gave its search whatever the facets left: 129px at a 1440px window on a 2x display,
+ * where the placeholder needs 134, so the same page read "Headline, address, ru" on a Retina screen and the whole hint
+ * on a laptop (issue #93). The field now has a floor, and the facets truncate their own labels instead.
+ */
+const facets = ['Headline', 'Address', 'Route', 'Status', 'Owner'].map((label, i) => ({
+  key: `facet-${i}`,
+  label,
+  value: 'all',
+  options: [{ value: 'all', label: 'All' }, { value: 'some', label: label }],
+  onChange: () => {},
+}));
+
+describe('a filter bar beside five facets', () => {
+  it('gives its search a floor, and still lets it grow to its cap', () => {
+    const { container } = render(<FilterBar filters={facets} search={{ value: '', onChange: () => {}, placeholder: 'Headline, address, route' }} result={<span>214 requests</span>} />);
+    const field = [...container.querySelectorAll('*')].find((el) => /\bmin-w-40\b/.test(el.className))!;
+    expect(field, 'the search field').toBeDefined();
+    expect(field.className).toMatch(/\bflex-1\b/);
+    expect(field.className).toMatch(/@min-\[52rem\]:max-w-72/);
+    // Ten rem at Meridian's 14px root is 140px: the 134px hint and nothing cut off it.
+    expect(field.className).not.toMatch(/\bmin-w-0\b/);
+    expect(container.querySelectorAll('[aria-label]')).toHaveLength(5);
+  });
+});

package/payload/tests/format.test.ts

@@ -38,8 +38,13 @@ describe('formatters', () => {
     expect(splitFigure('0.90%')).toEqual({ pre: undefined, int: '0.90', frac: undefined, unit: '%' });
     // Total: a string it cannot split comes back whole, so no formatter a product passes can crash the figure.
     expect(splitFigure('—')).toEqual({ int: '—' });
-    expect(splitFigure('-1,234')).toEqual({ int: '-1,234' });
+    // A credit's minus belongs to the mark, with any symbol beside it (issue #96): `-$298.43` as one string was no split
+    // at all, so a tile set a sign-and-symbol figure whole in its number face, or lost both when it shortened.
+    expect(splitFigure('-1,234')).toEqual({ pre: '-', int: '1,234', frac: undefined, unit: undefined });
+    expect(splitFigure('-$298.43')).toEqual({ pre: '-$', int: '298', frac: '.43', unit: undefined });
     expect(splitFigure('CHF1,234.50')).toEqual({ pre: 'CHF', int: '1,234', frac: '.50', unit: undefined });
+    // A multi-letter mark before the symbol splits the same way.
+    expect(splitFigure('HK$12,345,678')).toEqual({ pre: 'HK$', int: '12,345,678', frac: undefined, unit: undefined });
     // A formatter that writes something else — a word, a space in the symbol — is never split, and never crashes.
     expect(splitFigure('CHF 1,234.50')).toEqual({ int: 'CHF 1,234.50' });
   });
@@ -53,10 +58,14 @@ describe('formatters', () => {
     expect(formatCost(1269.4)).toBe(`${symbol}1,269.40`);
     expect(formatCost(997)).toBe(`${symbol}997.00`);
     // A credit or a refund is negative, and the minus stands where a reader looks for it: before the mark, at every
-    // size, as `formatCostCompact` already writes it. `$-0.0050` reads as a typo, and hides the sign a column is sorted by.
+    // size. `$-0.0050` reads as a typo, and hides the sign a column is sorted by.
     expect(formatCost(-1269.4)).toBe(`-${symbol}1,269.40`);
     expect(formatCost(-0.005)).toBe(`-${symbol}0.0050`);
     expect(formatCost(-0.0000018)).toBe(`-${symbol}0.0000018`);
+    // An amount too small even for 20 places keeps two digits in exponent form: `toFixed` there prints only zeroes, and
+    // a figure that is not nothing must not read as nothing (issue #96).
+    expect(formatCost(1e-21)).toBe(`${symbol}1.0e-21`);
+    expect(formatCost(-2.5e-30)).toBe(`-${symbol}2.5e-30`);
     expect(formatDuration(294)).toBe('294ms');
     expect(formatDuration(1420)).toBe('1.4s');
     expect(formatPercent(0.0090, 2)).toBe('0.90%');
@@ -101,6 +110,15 @@ describe('fitFigure', () => {
     expect(fitFigure('12,480,000 tokens', 12_480_000)).toBe('12.5M tokens');
     expect(fitFigure('Likely new', NaN)).toBe('Likely new');
   });
+
+  // The figure shortens with the mark and the sign it was given, not with a generic cost formatter's (issue #96): a
+  // tile read "$12.3M" for an amount in Hong Kong dollars, and dropped a credit's minus altogether.
+  it('shortens with the mark and the sign the caller\'s own text carries', () => {
+    expect(fitFigure('HK$12,345,678', 12_345_678)).toBe('HK$12.3M');
+    expect(fitFigure('-$1,234,567.89', -1_234_567.89)).toBe('-$1.2M');
+    expect(fitFigure("-1,234,567.89", -1_234_567.89)).toBe('-1.2M');
+    expect(fitFigure('CHF12,943,120', 12_943_120)).toBe('CHF12.9M');
+  });
 });
 
 describe('formatDay', () => {

package/payload/tests/key-value.test.tsx

@@ -30,6 +30,19 @@ describe('a key value list', () => {
     expect(path.getAttribute('title')).toBeNull();
   });
 
+  // On a phone there is no hover, so a title is no answer there: below the width where a sentence value cannot fit
+  // beside its label, the value wraps the way `wrap` asks for (issue #89). Above it, the single line and its title stay.
+  it('wraps a value in a row too narrow to hold it, rather than cutting it behind a hover no phone has', () => {
+    const [region] = dd([{ label: 'Region', value: 'ap-southeast-1' }]);
+    expect(region.className).toMatch(/@max-\[26rem\]:whitespace-normal/);
+    expect(region.className).toMatch(/@max-\[26rem\]:\[overflow-wrap:anywhere\]/);
+    expect(region.className).toMatch(/\btruncate\b/);
+    // A value that already wraps asks for nothing more, and keeps its own rule.
+    const [path] = dd([{ label: 'Path', value: '/v1/a/long/path', wrap: true }]);
+    expect(path.className).toMatch(/\[overflow-wrap:anywhere\]/);
+    expect(path.className).not.toMatch(/\btruncate\b|@max-\[26rem\]/);
+  });
+
   // Two columns are for a wide card, and a card's width is not the window's: at a 1024px window the request card is
   // 458px wide, and two columns by the window's breakpoint left each value about 50px.
   it('counts its two columns from its own width, not the window\'s', () => {

package/payload/tests/marks-name-what-they-encode.test.tsx

@@ -0,0 +1,98 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+// The chart marks are drawn from a measured width, so the size hook is replaced with one, as the chart tests do.
+const size = vi.hoisted(() => ({ width: 720, height: 0 }));
+vi.mock('@/components/charts/use-size', async () => {
+  const { useRef } = await import('react');
+  return { useSize: () => [useRef(null), size] as const };
+});
+
+import { BarList } from '@/components/charts/bar-list';
+import { ColumnChart } from '@/components/charts/column-chart';
+import { Sparkline } from '@/components/charts/sparkline';
+import { TrendChart } from '@/components/charts/trend-chart';
+import { ActivityFeed } from '@/components/patterns/activity-feed';
+import { Delta } from '@/components/ui/delta';
+import { StatusDot } from '@/components/ui/status-dot';
+
+/**
+ * A colour, a fill or a size a reader is meant to decode, with nothing on the page to decode it with: the product's own
+ * answer was a title at every call site, page by page (issue #94). Each mark now says what it encodes, built from the
+ * data the component already holds, so it is right by default.
+ */
+describe('a mark says what it encodes', () => {
+  it('a Bar list row names the row, its figure and its share, and does so without a total too', () => {
+    const items = [{ key: 'a', label: 'Checkout', value: 420 }, { key: 'b', label: 'Search', value: 180 }];
+    const { container } = render(<BarList label="Requests by route" items={items} total={1000} />);
+    const rows = [...container.querySelectorAll('li')];
+    expect(rows[0].getAttribute('title')).toBe('Checkout · 420 · 42.0% of 1,000');
+    // A row with no total still names itself and its figure: the old title had nothing to say without one.
+    expect(render(<BarList label="Requests by route" items={items} />).container.querySelector('li')!.getAttribute('title')).toBe('Checkout · 420');
+  });
+
+  it('an accented column says why it is the accent, on the column and in the table', () => {
+    const columns = [{ key: 'd1', label: 'Mon', value: 10 }, { key: 'd2', label: 'Tue', value: 30 }];
+    const { container } = render(<ColumnChart label="Errors per day" columns={columns} highlight="d2" highlightLabel="The day of the incident" />);
+    expect(container.querySelector('[data-column="d2"]')!.getAttribute('title')).toBe('The day of the incident');
+    expect(container.querySelector('[data-column="d1"]')!.getAttribute('title')).toBeNull();
+    expect(screen.getByRole('table')).toHaveTextContent('Accented: The day of the incident');
+  });
+
+  it('a marked day says what it is marked for, where the day itself is read', () => {
+    // The readout is where a pointed day is named, and the mark group takes no pointer, so a tooltip on the dot would be
+    // markup nothing can reach. Pointed at the marked day, the reading names it.
+    const { container } = render(
+      <TrendChart
+        label="Uptime"
+        dates={['2026-10-01', '2026-10-02', '2026-10-03']}
+        series={[{ key: 'u', label: 'Uptime', values: [99.9, 97.2, 99.8] }]}
+        marks={{ dates: ['2026-10-02'], tone: 'warning', label: 'Dropped below 99%' }}
+        data-preview-index={1}
+      />,
+    );
+    expect(container.querySelector('[data-readout]')!.textContent).toContain('02 Oct 2026 · Dropped below 99%');
+    // The day beside it is nobody's mark, and the reading says nothing about marks for it.
+    document.body.innerHTML = '';
+    const other = render(
+      <TrendChart
+        label="Uptime"
+        dates={['2026-10-01', '2026-10-02', '2026-10-03']}
+        series={[{ key: 'u', label: 'Uptime', values: [99.9, 97.2, 99.8] }]}
+        marks={{ dates: ['2026-10-02'], tone: 'warning', label: 'Dropped below 99%' }}
+        data-preview-index={0}
+      />,
+    );
+    expect(other.container.querySelector('[data-readout]')!.textContent).not.toContain('Dropped below 99%');
+  });
+
+  it('a sparkline says the range it draws, since it carries no readout', () => {
+    const { container } = render(<Sparkline values={[12, 480, 61]} />);
+    expect(container.firstElementChild!.getAttribute('title')).toBe('12 to 480');
+  });
+
+  it('a delta says whether its colour reads better or worse', () => {
+    // Down is good for latency: the number says which way, the colour says whether that is good, and the sentence says both.
+    expect(render(<Delta value={-0.12} intent="down" />).container.firstElementChild!.getAttribute('title')).toBe('Down 12.0%, better');
+    // Up is good where up is what the page wants, and bad where it is not.
+    expect(render(<Delta value={0.12} />).container.firstElementChild!.getAttribute('title')).toBe('Up 12.0%, better');
+    expect(render(<Delta value={0.12} intent="down" />).container.firstElementChild!.getAttribute('title')).toBe('Up 12.0%, worse');
+    // A neutral intent paints both directions the same, so there is no judgement to state.
+    expect(render(<Delta value={0.12} intent="neutral" />).container.firstElementChild!.getAttribute('title')).toBe('Up 12.0%');
+    expect(render(<Delta value={0} />).container.firstElementChild!.getAttribute('title')).toBe('Unchanged');
+  });
+
+  it('a status dot is a decoration beside a word and an image when it stands alone', () => {
+    const { container } = render(<StatusDot tone="critical" label="Failing" />);
+    expect(screen.getByRole('img', { name: 'Failing' })).toBeInTheDocument();
+    expect(container.firstElementChild!.getAttribute('title')).toBe('Failing');
+    // Beside its word it stays out of the way.
+    expect(render(<StatusDot tone="critical" />).container.firstElementChild!.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('an activity\'s tone carries a word, which the dot never did', () => {
+    { const { container } = render(<ActivityFeed now={new Date('2026-10-24T10:00:00Z')} events={[{ id: 'e1', at: '2026-10-24T09:58:00Z', actor: 'Meridian', system: true, verb: 'failed to', object: 'sync the catalog', tone: 'critical' }]} />);
+      expect(container.querySelector('[role="img"]')!.getAttribute('aria-label')).toBe('Failed');
+    }
+  });
+});

package/payload/tests/page-frame-title.test.tsx

@@ -82,6 +82,37 @@ describe('a page headed by a sentence', () => {
   });
 });
 
+describe('a sentence that opens with the page\'s own name', () => {
+  // "USDC : USDC: no rule met" — the name, the colon and then the sentence saying the name again, in the heading and
+  // in a screen reader's list of headings. The name stays in the markup, hidden from assistive technology (#88).
+  it('is announced once, and the name is still in the markup', () => {
+    render(<PageFrame name="USDC" title="USDC: no rule met, price from par inside its band">body</PageFrame>);
+    const [name, colon, sentence] = [...h1().children];
+    expect(name.textContent).toBe('USDC');
+    expect(colon.getAttribute('aria-hidden')).toBe('true');
+    expect(name.getAttribute('aria-hidden')).toBe('true');
+    expect(sentence.getAttribute('aria-hidden')).toBeNull();
+    expect(h1().textContent).toBe('USDC: USDC: no rule met, price from par inside its band');
+  });
+
+  it('reads the name beside a sentence that only begins with the same letters', () => {
+    render(<PageFrame name="Members" title="Membership revenue: $12,480 this period">body</PageFrame>);
+    expect([...h1().children][0].getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('takes the page\'s word for a sentence it cannot read, and holds the name while the sentence is still to come', () => {
+    // A sentence that is a node — a part that reads data — cannot be compared with the name before it arrives, so the
+    // page says so. Without the prop the name is read, which is the safe default.
+    const spoken = render(<PageFrame name="USDC" title={<span>USDC: no rule met</span>} speaksName>body</PageFrame>);
+    const [name] = [...h1().children];
+    expect(name.getAttribute('aria-hidden')).toBe('true');
+    spoken.unmount();
+    // A sentence that has not arrived cannot be compared with the name, so the name is what the heading says.
+    render(<PageFrame name="USDC">body</PageFrame>);
+    expect([...h1().children][0].getAttribute('aria-hidden')).toBeNull();
+  });
+});
+
 describe('the masthead of a page headed by a sentence', () => {
   const kicker = <span data-testid="kicker">ZZ Meridian · Production</span>;
   const meta = <span data-testid="meta">Updated 4 min ago</span>;

package/payload/tests/prose.test.tsx

@@ -24,8 +24,15 @@ describe('safeMarkdownUrl', () => {
   });
   it('fetches an image only from this origin', () => {
     expect(safeMarkdownUrl('/images/chart.png', 'src')).toBe('/images/chart.png');
+    expect(safeMarkdownUrl('images/chart.png', 'src')).toBe('images/chart.png');
     for (const u of ['https://elsewhere.example/p.png', '//elsewhere.example/p.png', 'data:image/png;base64,AAAA']) expect(safeMarkdownUrl(u, 'src')).toBe('');
   });
+  it('reads an image address the way the URL parser does, backslashes and all', () => {
+    // A backslash is a slash to the parser, so each of these IS `//evil.example/p.png` to the fetch while a check that
+    // reads the text as written sees a relative path — the exact case the rule exists to stop (issue #92).
+    for (const u of ['\\\\evil.example/p.png', '/\\evil.example/p.png', '\\/evil.example/p.png', '/\\\\evil.example/p.png'])
+      expect(safeMarkdownUrl(u, 'src'), u).toBe('');
+  });
   it('reads a colon after a slash as part of a path', () => {
     expect(safeMarkdownUrl('a/path:with-colon', 'href')).toBe('a/path:with-colon');
   });

package/payload/tests/setup.ts

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom/vitest';
 import { cleanup, configure } from '@testing-library/react';
 import { ReadableStream, TransformStream, WritableStream } from 'node:stream/web';
-import { afterEach, vi } from 'vitest';
+import { afterEach, beforeEach, vi } from 'vitest';
 
 // A test file runs in a context of its own (the `vmThreads` pool in vitest.config.ts), and a jsdom context has no web
 // streams, which the assistant's client needs to read a reply: without them the panel never loads.
@@ -9,6 +9,17 @@ Object.assign(globalThis, { ReadableStream: globalThis.ReadableStream ?? Readabl
 
 afterEach(cleanup);
 
+// The environment is the process's, not the file's: files share a worker (`pool: 'vmThreads'`, vitest.config.ts), so a
+// file that stubs a store's variables for itself leaks the value into whatever file runs beside it — the intermittent
+// gate where a view test found a store configured and asked a stub for a snapshot (issue #95). Every variable is put
+// back as this file found it before each test, and this hook runs first, so a stub belongs in a beforeEach of the file's
+// own and never in a beforeAll.
+const ENV = { ...process.env };
+beforeEach(() => {
+  for (const k of Object.keys(process.env)) if (!Object.hasOwn(ENV, k)) delete process.env[k];
+  for (const [k, v] of Object.entries(ENV)) if (process.env[k] !== v) process.env[k] = v;
+});
+
 // The assistant loads on demand (next/dynamic); its first import can take over a second while the gate also runs the
 // type check and lint, so every waitFor and findBy allows five.
 configure({ asyncUtilTimeout: 5000 });