@bongos/core 1.24.61 → 1.24.62

package/modules/hall-ui/public/approval-queue.css

@@ -67,9 +67,11 @@ html.aq-open { overflow: hidden; }
   min-width: 0;
   box-sizing: border-box;
   padding: 26px 30px;
-  border-radius: 30px;
+  /* the shared dialog's corner and hairline (controls.css .hall-dialog, task
+     1005137): the glass is the artboard's, the shape is the hall's one dialog */
+  border-radius: var(--ds-radius-panel);
   background: var(--aq-glass);
-  border: 1px solid var(--aq-glass-edge);
+  border: var(--line) solid var(--aq-glass-edge);
   backdrop-filter: blur(30px) saturate(160%);
   -webkit-backdrop-filter: blur(30px) saturate(160%);
   box-shadow: inset 0 1px 0 var(--aq-glass-rim), var(--ds-shadow-pop);
@@ -309,7 +311,7 @@ html.aq-open { overflow: hidden; }
   .aq-overlay { padding: 8px; align-items: stretch; --aq-scrim: rgba(4, 5, 9, .88); }
   html[data-theme] .aq-overlay,
   html:not([data-theme]) .aq-overlay { --aq-scrim: rgba(4, 5, 9, .88); }
-  .aq-dialog { width: min(100%, calc(100vw - 16px)); height: min(100%, calc(100dvh - 16px)); padding: 18px 16px; border-radius: 22px; overflow-y: auto; gap: 14px; }
+  .aq-dialog { width: min(100%, calc(100vw - 16px)); height: min(100%, calc(100dvh - 16px)); padding: 18px 16px; overflow-y: auto; gap: 14px; }
   .aq-dialog > * { flex-shrink: 0; }
   .aq-head { flex-wrap: wrap; row-gap: 10px; }
   .aq-eyebrow { order: 1; flex: 1 1 auto; }

package/modules/hall-ui/public/studio.css

@@ -25,6 +25,11 @@
    in the window, lighter towers with unlit panes, a warm wall and floor, the
    lamp off and a patch of sun on the floor. The glass panels over the room
    follow its sky; the hall chrome still keeps its own light and dark.
+   EXCEPT IN DARK (task 1005137): the day room is a light-theme room. Under the
+   hall's dark theme a cream room sat beside a black rail and bar, so every day
+   rule below is scoped html:not([data-theme="dark"]) and dark keeps the night
+   room at any hour. data-sky is only ever set by studio.js after shell.js has
+   set data-theme, so the one selector covers first paint too.
 
    The second half is the older reviews' garden (R06 of goal 1000074, task
    1003117), which still answers the reviews filed before Tweak Mode (TW14) in
@@ -85,8 +90,8 @@ body[data-page="studio"] {
    inks are set darker than the mockup's so they hold AA on the glass over a
    light wall (records/studio.md): the link, and the credits figure and focus
    ring, which by night are the accent. */
-body[data-page="ai-studio"][data-sky="day"],
-body[data-page="studio"][data-sky="day"] {
+html:not([data-theme="dark"]) body[data-page="ai-studio"][data-sky="day"],
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] {
   --st-room: #efe7dc;
   --st-frame: #d6c9b7;
   --st-night: #bfdaf0;
@@ -132,17 +137,17 @@ body[data-page="studio"][data-sky="day"] {
 }
 /* The panels' scrim is the day wall's own tint, whatever the hall's theme, set
    on the overlay so it outranks the theme's .42 and the phone's .88. */
-body[data-page="studio"][data-sky="day"] .st-overlay {
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .st-overlay {
   --st-scrim: rgba(239, 231, 220, .9);
   color-scheme: light;
 }
-body[data-page="ai-studio"][data-sky="day"] .studio,
-body[data-page="studio"][data-sky="day"] .studio { color-scheme: light; }
+html:not([data-theme="dark"]) body[data-page="ai-studio"][data-sky="day"] .studio,
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .studio { color-scheme: light; }
 /* The Approval queue (approval-queue.css) is night glass on its own root; over
    the day room it wears the same day glass as the studio's own panels. Its
    rendered page stays on its paper frame, and its accent button stays the
    accent, which carries black words at AA in either sky. */
-body[data-page="studio"][data-sky="day"] .aq-overlay {
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .aq-overlay {
   color-scheme: light;
   --aq-scrim: rgba(239, 231, 220, .9);
   --aq-glass: rgba(255, 255, 255, .75);
@@ -159,7 +164,7 @@ body[data-page="studio"][data-sky="day"] .aq-overlay {
   --aq-link: var(--accent-deep);
   --aq-rule: rgba(60, 40, 20, .12);
 }
-body[data-page="studio"][data-sky="day"] .aq-overlay :focus-visible { outline-color: var(--st-focus); }
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .aq-overlay :focus-visible { outline-color: var(--st-focus); }
 
 /* The stage fills the content box: the hall's content column is a reading
    width, and the artboard is the whole window. */
@@ -288,11 +293,11 @@ html[data-fullscreen="on"] body[data-page="studio"] .fullscreen-toggle {
 
 /* The day room: the sun rides higher and larger than the moon, the stars and
    the lamp's glow are gone, the clouds and the patch of sun are there. */
-body[data-sky="day"] .st-moon { left: 394px; top: 42px; width: 76px; height: 76px; box-shadow: 0 0 80px 26px var(--st-moon-halo); }
-body[data-sky="day"] .st-star,
-body[data-sky="day"] .st-glow { opacity: 0; }
-body[data-sky="day"] .st-cloud { opacity: .9; }
-body[data-sky="day"] .st-sunpatch { opacity: .7; }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-moon { left: 394px; top: 42px; width: 76px; height: 76px; box-shadow: 0 0 80px 26px var(--st-moon-halo); }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-star,
+html:not([data-theme="dark"]) body[data-sky="day"] .st-glow { opacity: 0; }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-cloud { opacity: .9; }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-sunpatch { opacity: .7; }
 
 /* The room's only motion: the clouds drift, and a change of sky fades over
    .8s. Both live only without a reduced-motion preference, and style.css's
@@ -312,16 +317,10 @@ body[data-sky="day"] .st-sunpatch { opacity: .7; }
 .st-actions { position: relative; z-index: 1; }
 
 /* ---------------------------------------------------------------------------
-   The top row: the room's name, and the tally pill.
+   The top row: the tally pill. (The room's name, a mono eyebrow above the
+   greeting, went in task 1005137: DESIGN.md bans a label block over the h1.)
    --------------------------------------------------------------------------- */
 .st-top { display: flex; align-items: center; min-height: 48px; gap: 16px; flex-wrap: wrap; }
-.st-eyebrow {
-  font-family: var(--st-mono);
-  font-size: 11px;
-  letter-spacing: .14em;
-  text-transform: uppercase;
-  color: var(--st-ink-faint);
-}
 .st-tally {
   margin-left: auto;
   display: flex;

package/modules/hall-ui/public/studio.html

@@ -80,11 +80,10 @@
           <div class="st-leaf st-leaf--2"></div>
         </div>
 
-        <!-- The name of the room, and the artist's tally (GET /copy-desk/tally)
+        <!-- The artist's tally (GET /copy-desk/tally)
              in a glass pill top right. The shell's full-screen button keeps the
              window's corner above it. -->
         <div class="st-top">
-          <span class="st-eyebrow">{{worldName}} · studio</span>
           <div class="st-tally" id="st-tally" hidden>
             <span class="st-tally__item"><span class="st-tally__n st-tally__n--credits" id="st-tally-credits">0</span><span class="st-tally__label">credits</span></span>
             <span class="st-tally__rule" aria-hidden="true"></span>

package/modules/hall-ui/public/style.css

@@ -1307,7 +1307,7 @@ html[data-fullscreen="on"][data-fullscreen-plain="on"] .app-content { padding-to
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  padding: 3px;
+  padding: 2px;
   border-radius: var(--radius-pill);
   box-shadow: inset 0 0 0 1px var(--glass-edge);
   flex-shrink: 0;
@@ -1959,6 +1959,15 @@ html.pb-editing main { padding-bottom: 180px; }
   .topbar-trail .topbar-back svg { display: block; }
   .topbar-trail .topbar-back { padding: 0 8px; }
   .topbar-trail ~ .topbar-title { display: block; }
+  /* The 320 top bar (task 1005137): the menu, the Update pill, the search, the
+     mode switch and the three toggles measured 340px in a 320px bar, so the
+     theme and full-screen icons were cut off at the edge. Here the bar packs
+     tighter and each icon button is 28px — still above the 24px floor — so the
+     whole row fits with room to spare. Pinned in tests/hall_topbar_320.mjs. */
+  .app-topbar { gap: var(--ds-space-hair); padding: 0 var(--ds-space-xs); }
+  .topbar-menu, .theme-toggle, .fullscreen-toggle { width: 28px; height: 28px; }
+  .zoom-toggle { min-width: 28px; height: 28px; padding: 0 6px; }
+  .topbar-side .topbar-jump { min-width: 28px; padding: 0 6px; }
 }
 .zoom-toggle__pct {
   font-size: 12px;
@@ -4335,15 +4344,18 @@ a.stat-tile:hover .stat-tile__sub { color: var(--ink-soft); }
    no new theme vars, so dark mode follows the neutral flip for free. The overlay
    mirrors .deeplink-card's posture (fixed scrim + centred panel, z above the
    drawer) so the two modal surfaces read as one system. */
+/* One shape with its neighbour (task 1005137): the search slot and the mode
+   switch beside it are both a 32px pill with the same glass hairline, where the
+   slot used to be a squarer, filled box next to a round one. */
 .topbar-jump {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 32px;
-  padding: 0 10px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface);
+  padding: 0 12px 0 10px;
+  border: 1px solid var(--glass-edge);
+  border-radius: var(--radius-pill);
+  background: none;
   color: var(--ink-faint);
   font: inherit;
   font-size: 13px;

package/modules/hall-ui/public/thinking.css

@@ -109,6 +109,21 @@ html[data-fullscreen="on"] .sky-stage .top { padding-right: 184px; }
 
 .top { position: fixed; left: 0; right: 0; top: 0; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 0; display: flex; align-items: flex-start; gap: 16px; pointer-events: none; z-index: 5; }
 .top > * { pointer-events: auto; }
+/* The sky is pannable, so its marks will always pass under the header strip and
+   the legend. Each band stands on a veil of the void that fades into the sky
+   (task 1005137: dots painted over the counts, the what-if pill and the legend).
+   The veil sits inside the band's own stacking layer, under its words and above
+   the canvas, and never catches the pointer. */
+.top::before, .foot::before { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
+.top::before { top: 0; bottom: -24px; background: linear-gradient(to bottom, var(--void) 62%, transparent); }
+.foot::before { bottom: 0; top: -24px; background: linear-gradient(to top, var(--void) 62%, transparent); }
+/* the ground the sky's own words stand on: a glow of the void itself, so a dot
+   passing under a count or a legend word dims instead of painting over it — in
+   both modes, since the void is the mode's ground */
+.top, .foot, .composer { --sky-halo: 0 0 6px var(--void), 0 0 14px var(--void), 0 0 2px var(--void); }
+.stats, .gravity, .obj, .alt { text-shadow: var(--sky-halo); }
+/* the composer's hint floats lower than the strip's veil, so it carries its own */
+.gravity:not(:empty) { padding: 2px 12px; border-radius: var(--ds-radius-tile); background: color-mix(in srgb, var(--void) 78%, transparent); }
 .brand { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
 .brand h1 { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -.035em; line-height: 1.05; white-space: nowrap; }
 .brand h1 em { font-style: normal; color: var(--ink-dim); }
@@ -262,7 +277,9 @@ html[data-fullscreen="on"] .sky-stage .top { padding-right: 184px; }
 .mk.settled { width: 12px; height: 12px; background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent); box-shadow: inset 0 0 0 3px var(--void), inset 0 0 0 4px color-mix(in srgb, var(--ink) 35%, transparent), 0 0 8px color-mix(in srgb, var(--ink) 25%, transparent); }
 .mk.collapsed { width: 9px; height: 9px; background: var(--void); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); box-shadow: 0 0 0 2px var(--void), 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent); }
 .mk.unseen { width: 12px; height: 12px; background: transparent; border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
-.mk.task { width: 4px; height: 4px; background: color-mix(in srgb, var(--ink) 60%, var(--void)); }
+/* `task` is also the hall's task-card class (style.css): its card padding blew the
+   legend's 4px dot up into a 48px blob over its own word, so it is zeroed here. */
+.mk.task { width: 4px; height: 4px; padding: 0; border: 0; background: color-mix(in srgb, var(--ink) 60%, var(--void)); }
 .mk.task.live { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
 .mk.born { width: 10px; height: 10px; background: transparent; border: 1px solid var(--accent); box-shadow: inset 0 0 0 2px var(--void), inset 0 0 0 5px var(--accent); }
 .mk.route { width: 14px; height: 2px; border-radius: 1px; background: var(--chart); box-shadow: 0 0 6px var(--chart); }

package/modules/hall-ui/records/studio.md

@@ -34,7 +34,8 @@ Where it differs from the mockup, and why:
 - **The link, the credits figure and the focus ring are #96410f by day**, not the mockup's #a3481a link and #fb9569 accent: #a3481a on Resume's tint over the wall is 4.3:1, under AA, and the accent is 1.8:1 on the wall.
 - **The quiet inks are #5a595f (faint) and #66656b (dim, hint)** where the mockup has the one #66656b: the studio has three quiet tiers, and each holds AA on the glass and the bare wall (the hint is the lowest, 4.7:1).
 - **The sun, clouds and sun patch are placed for the studio's 560px window** (the mockup's is 520px): the sun at 394/42 and 76px, the clouds about 8% larger, the patch 20px right to sit under the studio's lamp.
-- **The panels follow the sky**: by day the two glass panels and the Approval queue wear white glass (.75) over a scrim of the wall's own tint (.9) in either hall theme and on a phone. The queue's rendered page stays on its paper frame. The mockup draws no panel.
+- **The day room is a light-theme room (task 1005137).** Under the hall's dark theme a cream room sat beside the black rail and bar, so every day rule is scoped `html:not([data-theme="dark"])`: in dark the room is the night room at any hour, and the clock only changes the greeting. The room's mono eyebrow ("{{worldName}} · studio") went in the same task, since DESIGN.md bans a label above the h1, and the Approval queue took the shared dialog's corner and hairline.
+- **The panels follow the sky**: by day the two glass panels and the Approval queue wear white glass (.75) over a scrim of the wall's own tint (.9) on a phone and in the light theme. The queue's rendered page stays on its paper frame. The mockup draws no panel.
 - **"Good morning." while being typed over shows the page's greeting line**, "Good evening.", the one line a tweak can rewrite. Rewritten, it is the greeting at every hour.
 - **On a phone the sun patch lies on the phone's floor** (bottom right, 300 by 70); the mockup hides it under 900px, but the studio's phone keeps its desk.
 - **The stars do not twinkle and the lamp does not breathe at night**: the night room stays as it shipped. This task adds only the day room's drift.

package/modules/hall-ui/specimens/components.css

@@ -3,6 +3,13 @@
    sheets; this lays them out in sections and stops the live toast and the
    dialog from floating, so each sits at rest where it can be looked at. */
 body[data-page="components"] { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--font-body); }
+/* The hall layering (task 1005137): style.css paints the plate and its veil as
+   fixed body::before / body::after at z-index 0, and a hall page lifts its
+   content above them (.app-body is position: relative; z-index: 1). The
+   specimen has no .app-body, so in dark the veil (--plate-veil, black at .82-.93)
+   lay OVER every section and the page read as near-black. Its two blocks take
+   the same lift. Pinned in tests/hall_topbar_320.mjs. */
+.spec-head, .spec-main { position: relative; z-index: 1; }
 .spec-head, .spec-main { box-sizing: border-box; max-width: 980px; margin: 0 auto; padding: 0 var(--ds-space-md); }
 .spec-head { padding-top: var(--ds-space-sm); padding-bottom: var(--ds-space-hair); }
 .spec-kicker { display: inline-block; margin: 0 var(--ds-space-xs) 0 0; vertical-align: middle; font-family: var(--label-face); font-size: var(--label-size); font-weight: 400; letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.61",
+  "version": "1.24.62",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.24.61",
+      "version": "1.24.62",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.61",
+  "version": "1.24.62",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/release-notes.json

@@ -11341,5 +11341,11 @@
       "id": "1005139",
       "text": "The design docs now describe what is actually live, and the landing page shows a company's logo only when that company's settings provide one, so other projects no longer show the Verro Labs medallion."
     }
+  ],
+  "1.24.62": [
+    {
+      "id": "1005137",
+      "text": "On a phone the hall's top bar now fits without cutting off buttons, the Studio stays a night room in dark mode, the sky page's dots no longer cover its labels, and the components reference page is readable in dark mode."
+    }
   ]
 }

package/src/module-api.js

@@ -81,7 +81,7 @@ const { sleep } = require('./sleep');
 // MAJOR (see allowBoxScope below): passes the request through untouched.
 function deprecatedNoopMiddleware(_req, _res, next) { next(); }
 
-const CORE_VERSION = '1.24.61'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.24.62'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('discord'); log.info('mounted');

package/tests/hall_studio_home.mjs

@@ -639,7 +639,14 @@ try {
     assert.match(CSS, /\.st-light \{[^}]*background: var\(--st-pane\)/, 'the panes are lit by night and unlit by day through one token');
     assert.match(CSS, /body\[data-sky="day"\] \.st-cloud \{ opacity: \.9; \}/);
     assert.match(CSS, /body\[data-sky="day"\] \.st-sunpatch \{ opacity: \.7; \}/);
-    assert.match(CSS, /body\[data-sky="day"\] \.st-star,\s*body\[data-sky="day"\] \.st-glow \{ opacity: 0; \}/, 'no stars, and the lamp is off');
+    assert.match(CSS, /body\[data-sky="day"\] \.st-star,\s*html:not\(\[data-theme="dark"\]\) body\[data-sky="day"\] \.st-glow \{ opacity: 0; \}/, 'no stars, and the lamp is off');
+    // task 1005137: the day room is a light-theme room. Under the hall's dark theme a cream room
+    // sat beside the black rail, so EVERY day rule is scoped off dark and dark keeps the night room.
+    const daySelectors = CSS.replace(/\/\*[\s\S]*?\*\//g, '').split(/[{}]/).filter((_, i) => i % 2 === 0)
+      .flatMap((sel) => sel.split(',')).map((x) => x.trim()).filter((x) => x.includes('[data-sky="day"]'));
+    assert.ok(daySelectors.length >= 10, `the day rules are found (${daySelectors.length})`);
+    for (const sel of daySelectors) assert.ok(sel.startsWith('html:not([data-theme="dark"]) '), `${sel} is scoped off the dark theme`);
+    assert.ok(!/st-eyebrow/.test(CSS + HTML), 'no mono eyebrow above the greeting (DESIGN.md bans a label over the h1)');
     assert.match(HTML, /class="st-cloud st-cloud--1"/);
     assert.match(HTML, /class="st-sunpatch"/);
     const anims = [...CSS.matchAll(/animation:\s*[^;]+;|transition:\s*[^;]+;/g)].map((m) => m.index);

package/tests/hall_topbar_320.mjs

@@ -0,0 +1,145 @@
+// tests/hall_topbar_320.mjs — the hall's top bar fits a 320px phone, and the components
+// specimen sits above the plate veil (task 1005137, goal 1000138).
+//
+// WHY. A visual check of the design system found every hall page 340px wide at 320: the menu, the
+// Update pill, the search, the mode switch and the three toggles did not fit, so the theme and
+// full-screen icons were cut off at the edge. And modules/hall-ui/specimens/components.html read as
+// near-black in dark mode, because style.css's body::after veil (--plate-veil) covered the page: a
+// hall page lifts its content over the plate (.app-body, z-index 1) and the specimen did not.
+// Both are layout, so both are measured in a real browser on the REAL markup and the REAL sheets:
+// the shell's own top bar on the Tasks page with the widest set of buttons a page can carry (the
+// Update pill, the search, the full-screen switch), and the specimen as the kit renders it.
+// Skips when the machine has no system Edge or Chrome, as welcome_boot_browser does.
+import assert from 'node:assert/strict';
+import { test, after } from 'node:test';
+import { createRequire } from 'node:module';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules', 'hall-ui', 'public');
+const SPEC = path.join(ROOT, 'modules', 'hall-ui', 'specimens');
+const lib = require(path.join(ROOT, 'modules', 'ui-design', 'kit', 'lib.js'));
+
+let browser = null;
+try { browser = await lib.launchBrowser(); } catch (e) { if (!(e instanceof lib.NoBrowserError)) throw e; }
+after(() => browser && browser.close());
+const skip = !browser && 'no system Edge or Chrome';
+
+const ORIGIN = 'http://hall.test';
+const TYPES = { '.js': 'text/javascript', '.css': 'text/css', '.html': 'text/html' };
+
+// The Tasks page's real markup, its scripts swapped for the shell's own, on a page that opts into
+// the full-screen switch (Studio and Thinking do), so the bar carries every button it can.
+const WORK = fs.readFileSync(path.join(HALL, 'work.html'), 'utf8')
+  .replace(/<script\b[^>]*>[\s\S]*?<\/script>/g, '')
+  .replace(/\{\{[^}]*\}\}/g, '')
+  .replace('<body data-page="work"', '<body data-page="work" data-fullscreen-switch');
+const STUB = '<script>window.__BRANDING__ = { identity: { worldName: "Harbor" } }; window.BongosClient = { createClient: () => ({ request: async () => ({ ok: false, status: 404, data: null }) }) };</script>';
+const SCRIPTS = ['dom-utils.js', 'shell-trail.js', 'craft-mode.js', 'shell.js'].map((f) => `<script src="/builders/${f}"></script>`).join('');
+const PAGE = WORK.replace('</body>', STUB + SCRIPTS + '</body>');
+
+async function context(width, scheme) {
+  const ctx = await browser.newContext({ viewport: { width, height: 700 }, colorScheme: scheme });
+  await ctx.route(ORIGIN + '/**', (route) => {
+    const p = new URL(route.request().url()).pathname;
+    if (p === '/work') return route.fulfill({ contentType: 'text/html', body: PAGE });
+    let f = null;
+    if (p.startsWith('/builders/')) f = path.join(HALL, p.slice('/builders/'.length));
+    else if (p.startsWith('/modules/hall-ui/public/')) f = path.join(HALL, p.slice('/modules/hall-ui/public/'.length));
+    else if (p.startsWith('/modules/ui-design/public/')) f = path.join(ROOT, 'modules', 'ui-design', 'public', p.slice('/modules/ui-design/public/'.length));
+    else if (p.startsWith('/specimens/')) f = path.join(SPEC, p.slice('/specimens/'.length));
+    if (f && TYPES[path.extname(f)] && fs.existsSync(f)) return route.fulfill({ contentType: TYPES[path.extname(f)], body: fs.readFileSync(f) });
+    return route.fulfill({ status: 404, body: '' });
+  });
+  return ctx;
+}
+
+// The bar as update-pill.js and palette.js leave it: the Update pill first in the side, the search
+// shown. Then every button's box, and how wide the document is.
+async function measureBar(width, scheme) {
+  const ctx = await context(width, scheme);
+  const page = await ctx.newPage();
+  await page.goto(ORIGIN + '/work');
+  await page.waitForSelector('#app-topbar .topbar-side #theme-toggle');
+  return page.evaluate(() => {
+    const side = document.querySelector('#app-topbar .topbar-side');
+    if (!document.getElementById('upd-pill')) {
+      const b = document.createElement('button');
+      b.type = 'button'; b.id = 'upd-pill'; b.className = 'upd-pill'; b.setAttribute('data-face', 'ready');
+      b.innerHTML = '<span class="upd-pill__dot" aria-hidden="true"></span><span class="upd-pill__label">Update</span>';
+      side.insertBefore(b, side.firstChild);
+    }
+    const jump = document.getElementById('topbar-jump'); if (jump) jump.hidden = false;
+    const fs = document.getElementById('fullscreen-toggle'); if (fs) fs.hidden = false;
+    const buttons = [...document.querySelectorAll('#app-topbar button')]
+      .filter((b) => getComputedStyle(b).display !== 'none' && b.getClientRects().length)
+      .map((b) => { const r = b.getBoundingClientRect(); return { id: b.id || b.className, left: r.left, right: r.right, w: r.width, h: r.height }; });
+    const bar = document.getElementById('app-topbar').getBoundingClientRect();
+    return { scrollWidth: document.documentElement.scrollWidth, bar: { left: bar.left, right: bar.right }, buttons };
+  }).finally(() => ctx.close());
+}
+
+for (const scheme of ['light', 'dark']) {
+  test(`at 320px the top bar fits, every button inside it and at least 24px (${scheme})`, { skip }, async () => {
+    const m = await measureBar(320, scheme);
+    const ids = m.buttons.map((b) => b.id);
+    for (const want of ['upd-pill', 'topbar-jump', 'zoom-toggle', 'theme-toggle', 'fullscreen-toggle']) {
+      assert.ok(ids.includes(want), `${want} is on the bar (got ${ids.join(', ')})`);
+    }
+    assert.ok(m.scrollWidth <= 320, `the page is ${m.scrollWidth}px wide at 320 (the top bar spills)`);
+    for (const b of m.buttons) {
+      assert.ok(b.left >= 0 && b.right <= 320, `${b.id} sits at ${Math.round(b.left)}..${Math.round(b.right)}, outside 0..320`);
+      assert.ok(b.w >= 24 && b.h >= 24, `${b.id} is ${Math.round(b.w)}x${Math.round(b.h)}, under the 24px floor`);
+    }
+  });
+}
+
+test('the top bar search and the mode switch are one shape: a pill with the same hairline', { skip }, async () => {
+  const ctx = await context(1440, 'dark');
+  const page = await ctx.newPage();
+  await page.goto(ORIGIN + '/work');
+  await page.waitForSelector('#app-topbar #topbar-jump', { state: 'attached' });
+  const s = await page.evaluate(() => {
+    const css = (el) => getComputedStyle(el);
+    const jump = document.getElementById('topbar-jump');
+    jump.hidden = false;   // palette.js shows it; the shape is the sheet's either way
+    const sw = document.getElementById('craft-switch');
+    const root = css(document.documentElement);
+    return {
+      jumpRadius: css(jump).borderTopLeftRadius,
+      switchRadius: css(sw).borderTopLeftRadius,
+      jumpEdge: css(jump).borderTopColor,
+      switchShadow: css(sw).boxShadow,
+      pill: root.getPropertyValue('--ds-radius-pill').trim(),
+    };
+  }).finally(() => ctx.close());
+  assert.equal(s.jumpRadius, s.pill, 'the search is a full pill');
+  assert.equal(s.switchRadius, s.pill, 'the mode switch is a full pill');
+  assert.ok(s.switchShadow.startsWith(s.jumpEdge), `the two share one hairline colour (${s.jumpEdge} vs ${s.switchShadow})`);
+});
+
+test('the components specimen sits above the plate veil in dark (the hall layering)', { skip }, async () => {
+  const ctx = await context(1440, 'dark');
+  const page = await ctx.newPage();
+  await page.goto(ORIGIN + '/specimens/components.html');
+  await page.waitForSelector('.spec-main');
+  const r = await page.evaluate(() => {
+    const veil = getComputedStyle(document.body, '::after');
+    const blocks = [...document.body.children].filter((el) => !/^(SCRIPT|TEMPLATE)$/.test(el.tagName) && getComputedStyle(el).display !== 'none')
+      .map((el) => { const cs = getComputedStyle(el); return { el: el.tagName.toLowerCase() + '.' + el.className, position: cs.position, z: cs.zIndex }; });
+    return { veilImage: veil.backgroundImage, veilZ: veil.zIndex, veilPosition: veil.position, blocks };
+  }).finally(() => ctx.close());
+  // The veil is really there in dark — otherwise this test proves nothing.
+  assert.notEqual(r.veilImage, 'none', 'dark paints the plate veil');
+  assert.equal(r.veilPosition, 'fixed');
+  const veilZ = Number(r.veilZ) || 0;
+  assert.ok(r.blocks.length >= 2, 'the specimen has its head and its main');
+  for (const b of r.blocks) {
+    if (b.position === 'fixed' || b.position === 'absolute') continue;
+    assert.notEqual(b.position, 'static', `${b.el} is static, so the fixed veil paints over it`);
+    assert.ok(Number(b.z) > veilZ, `${b.el} has z-index ${b.z}, not above the veil's ${veilZ}`);
+  }
+});