@bongos/core 1.24.61 → 1.24.63

package/modules/raise/page.js

@@ -131,7 +131,9 @@ async function renderPage({ editor }) {
   return R.fill(view('page.html'), {
     base: BASE,
     assetVersion: v,
-    editorAssets: editor ? `<script src="${BASE}/assets/edit.js?v=${v}" defer></script>` : '',
+    // the editor asks its questions in the hall's one dialog: the shared escaper first,
+    // then the dialog, then the editor (task 1005136)
+    editorAssets: editor ? `<script src="/modules/hall-ui/public/dom-utils.js" defer></script><script src="/modules/hall-ui/public/hall-dialog.js" defer></script><script src="${BASE}/assets/edit.js?v=${v}" defer></script>` : '',
     draftBanner: c.draft ? '<div class="draft" role="note">DRAFT</div>' : '',
     editBar: editor ? editBar(editor, c) : '',
     entity: R.esc(c.entity),

package/modules/raise/public/edit.js

@@ -120,10 +120,17 @@
 
   startBtn.addEventListener('click', function () { status.textContent = ''; setEditing(true); });
 
+  // Cancel with edits asks in the hall's own dialog (hall-dialog.js, loaded with this
+  // file for an editor; task 1005136), never the browser's box.
   cancelBtn.addEventListener('click', function () {
-    if (changes().count && !confirm('Discard your unsaved changes?')) return;
-    editing = false;
-    location.reload();
+    var asked = changes().count
+      ? window.OTBDialog.confirm({ title: 'Discard your unsaved changes?', confirmLabel: 'Discard', trigger: cancelBtn })
+      : Promise.resolve(true);
+    asked.then(function (yes) {
+      if (!yes) return;
+      editing = false;
+      location.reload();
+    });
   });
 
   saveBtn.addEventListener('click', function () {

package/modules/raise/public/raise.css

@@ -66,9 +66,9 @@ p { margin: 0 0 16px; max-width: 64ch; }
 
 .btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 8px;
-  font: 600 16px var(--font); color: var(--on-accent); background: var(--accent);
-  border: 0; border-radius: 999px; padding: 13px 26px; cursor: pointer;
-  transition: transform .12s ease, filter .12s ease;
+  font: 600 var(--ds-text-xl) var(--font); color: var(--on-accent); background: var(--accent);
+  border: 0; border-radius: var(--ds-radius-pill); padding: 13px 26px; cursor: pointer;
+  transition: transform var(--ds-dur-fast) var(--ds-ease), filter var(--ds-dur-fast) var(--ds-ease);
 }
 .btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
 .btn:disabled { background: var(--deep); color: var(--ink-faint); cursor: not-allowed; }
@@ -198,7 +198,7 @@ section { padding: 72px 0; border-bottom: 1px solid var(--rule-soft); }
 .draft { letter-spacing: .2em; }
 
 /* ── team: Sign in with Bongos + in-place editing ───────── */
-.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); padding: 10px 20px; font-size: 15px; }
+.btn--ghost { background: transparent; color: var(--ink); border: var(--ds-line) solid var(--rule); padding: 10px 20px; font-size: var(--ds-text-lg); }
 .btn--ghost:hover { border-color: var(--accent); }
 .gate__team { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); text-decoration: none; }
 .gate__team a { text-decoration: none; }
@@ -232,3 +232,30 @@ section { padding: 72px 0; border-bottom: 1px solid var(--rule-soft); }
 .tok { white-space: nowrap; }
 .is-editing .tok, .is-editing .cite { background: color-mix(in srgb, var(--sea) 18%, transparent); border-radius: 3px; padding: 0 2px; cursor: default; }
 .is-editing [data-kind="para"], .is-editing [data-kind="list"] { padding: 4px 6px; margin-left: -6px; margin-right: -6px; }
+
+/* ── the dialog ─────────────────────────────────────────────
+   The editor's "discard your changes?" is the hall's one dialog (hall-dialog.js,
+   OTBDialog.confirm; task 1005136), drawn here on this page's tokens and the shared
+   scales: the card ground, one hairline, the panel corner, the one floating shadow,
+   the modal layer, over a black scrim (the one literal the Fifteen Rule allows). */
+.hall-dialog {
+  z-index: var(--ds-z-modal); box-sizing: border-box;
+  width: min(480px, calc(100vw - 2 * var(--ds-space-sm)));
+  max-height: calc(100dvh - 2 * var(--ds-space-md)); overflow-y: auto;
+  margin: auto; padding: var(--ds-space-md);
+  color: var(--ink); background: var(--card);
+  border: var(--ds-line) solid var(--rule); border-radius: var(--ds-radius-panel);
+  box-shadow: var(--ds-shadow-pop);
+}
+.hall-dialog::backdrop { background: rgba(0, 0, 0, .55); }
+.hall-dialog__head { display: flex; align-items: flex-start; gap: var(--ds-space-xs); margin: 0 0 var(--ds-space-xs); }
+.hall-dialog__title { flex: 1; margin: 0; font-size: var(--ds-text-3xl); font-weight: 500; line-height: 1.25; }
+.hall-dialog__x {
+  flex: none; min-width: 32px; min-height: 32px; padding: 0;
+  font: inherit; font-size: var(--ds-text-4xl); line-height: 1; color: var(--ink-soft);
+  background: transparent; border: 0; border-radius: var(--ds-radius-pill); cursor: pointer;
+}
+.hall-dialog__x:hover { color: var(--ink); }
+.hall-dialog__body p { margin: 0 0 var(--ds-space-xs); font-size: var(--ds-text-md); line-height: 1.5; color: var(--ink-soft); }
+.hall-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-xs); margin-top: var(--ds-space-md); }
+.hall-dialog__actions .btn { font-size: var(--ds-text-lg); padding: 10px 20px; }

package/modules/render-deploy/public/deploy.js

@@ -197,7 +197,7 @@
   });
 
   // Step two. Closes over `p`, the press that was shown, so what is sent is what was displayed.
-  const confirm = () => {
+  const confirmAction = () => {
     const p = state.pending;
     if (!p) return;
     return run(async () => {
@@ -218,7 +218,7 @@
     const rb = t.closest('[data-rollback]');
     if (rb) { state.pending = { action: 'rollback', deployId: rb.getAttribute('data-rollback'), liveWas: state.hist.liveDeployId }; state.error = null; state.done = null; return paint(); }
     if (t.closest('#rd-cancel')) { state.pending = null; return paint(); }
-    if (t.closest('#rd-confirm')) return confirm();
+    if (t.closest('#rd-confirm')) return confirmAction();
     const v = t.closest('[data-view]');
     if (v) { state.viewing = v.getAttribute('data-view'); return paint(); }
     if (t.closest('#rd-unview')) { state.viewing = null; return paint(); }

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.61",
+  "version": "1.24.63",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.24.61",
+      "version": "1.24.63",
       "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.63",
   "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,17 @@
       "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."
+    }
+  ],
+  "1.24.63": [
+    {
+      "id": "1005136",
+      "text": "The last browser pop-up boxes are gone: every question the site asks (rename, give a reason, are you sure) now opens in Cloud Bongos's own dialog, and on a phone the signed-in front page no longer squeezes the logo under the m"
+    }
   ]
 }

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.63'; // 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_dialog.mjs

@@ -10,6 +10,9 @@
 //      branded confirm (what will happen, in words) and runs its write only when the answer is yes;
 //   3. the guards: no window.confirm anywhere in modules/hall-ui, and each of the six builds now
 //      runs on OTBDialog with no scrim/backdrop rule of its own.
+// Task 1005136 adds the prompt variant (OTBDialog.prompt, which replaced every window.prompt), its
+// flows, and widens the guard repo-wide: no browser confirm, alert or prompt in any served page
+// (every module's public/ and views/, the API docs, and the pages src/ renders).
 import assert from 'node:assert/strict';
 import { test, after } from 'node:test';
 import { createRequire } from 'node:module';
@@ -55,9 +58,13 @@ async function runFlow(file, name, args, { answer, globals = {} } = {}) {
   const writes = [];
   const record = (m, u, b) => { writes.push({ method: m, url: String(u), body: b }); return { ok: true, status: 200, data: { permission_count: 3 } }; };
   const window = {
-    OTBDialog: { confirm: async (o) => { asked.push(o); return answer; } },
+    OTBDialog: {
+      confirm: async (o) => { asked.push(o); return answer; },
+      prompt: async (o) => { asked.push(o); return answer; },
+    },
     location: { assign() {} },
     confirm: () => { throw new Error('window.confirm was called'); },
+    prompt: () => { throw new Error('window.prompt was called'); },
   };
   const ctx = vm.createContext({
     window,
@@ -135,6 +142,37 @@ for (const f of FLOWS) {
   });
 }
 
+// Every replaced window.prompt whose flow is a named function: the branded prompt is asked, a
+// dismissal (null) sends nothing, and the typed text is what the write carries.
+const PROMPT_FLOWS = [
+  { flow: 'name a passkey card', file: 'settings-passkeys.js', fn: 'rename',
+    args: () => ['cred-1', { querySelector: (q) => (q === 'strong' ? { textContent: 'Old card' } : {}) }],
+    write: /passkeys\/rename/, carries: (w, text) => w.body.nickname === text },
+  { flow: 'release a studio round', file: 'studio.js', fn: 'releasePage', args: () => ['page-1', 77, fakeBtn()],
+    globals: { lib: { PAGE_ID_RE: /^[a-z0-9-]+$/ }, WRITE_ROUTES: { release: (id) => `/tweak/${id}/release` }, loadPages: async () => {}, paintPanel() {}, byId: () => null },
+    write: /tweak\/page-1\/release/, carries: (w, text) => w.body.note === text && w.body.task_id === 77 },
+  { flow: 'rename a saved view', file: 'hall-kit.js', fn: 'renameView', args: () => [{ id: 5, name: 'Mine' }],
+    viewCall: true, globals: { act: (fn) => fn(), views: { page: 'work' } },
+    write: /^\/5$/, carries: (w, text) => w.body.name === text },
+];
+
+for (const f of PROMPT_FLOWS) {
+  test(`${f.flow}: the branded prompt asks, a dismissal sends nothing, the typed text is sent`, async () => {
+    let sent = [];
+    const extra = { ...(f.globals || {}) };
+    if (f.viewCall) extra.call = (m, u, b) => { sent.push({ method: m, url: u, body: b }); };
+    const no = await runFlow(f.file, f.fn, f.args(), { answer: null, globals: extra });
+    assert.equal(no.asked.length, 1, 'the prompt is shown once');
+    assert.ok(no.asked[0].title && no.asked[0].confirmLabel, 'it has a title and names its act');
+    assert.equal([...no.writes, ...sent].filter((w) => f.write.test(w.url)).length, 0, 'a dismissal sends nothing');
+    sent = [];
+    const yes = await runFlow(f.file, f.fn, f.args(), { answer: 'A new line', globals: extra });
+    const hits = [...yes.writes, ...sent].filter((w) => f.write.test(w.url));
+    assert.equal(hits.length, 1, 'the answer sends the write, once');
+    assert.ok(f.carries(hits[0], 'A new line'), 'the write carries the typed text');
+  });
+}
+
 test('a verify-kind confirm attests the verification; any other kind asks nothing', async () => {
   const sent = [];
   const runLifecycle = (b, u, body) => sent.push({ u, body });
@@ -182,35 +220,74 @@ test('the bulk release on the shared toolbar asks first, and releases only on ye
 
 // ── the guards ──────────────────────────────────────────────────────────────
 
-function hallFiles() {
+// Every file a browser is served, repo-wide (task 1005136): each module's public/ and views/, the
+// API docs, and src/ (whose server-rendered pages carry inline scripts). Vendored bundles excluded.
+function servedFiles() {
   const out = [];
   const walk = (d) => {
+    if (!fs.existsSync(d)) return;
     for (const e of fs.readdirSync(d, { withFileTypes: true })) {
       const p = path.join(d, e.name);
-      if (e.isDirectory()) walk(p);
-      else if (/\.(js|html|mjs|cjs)$/.test(e.name)) out.push(p);
+      if (e.isDirectory()) { if (!/^(node_modules|vendor|fixtures)$/.test(e.name)) walk(p); }
+      else if (/\.(js|html|mjs|cjs)$/.test(e.name) && !/\.(standalone|min)\.js$/.test(e.name)) out.push(p);
     }
   };
-  walk(path.join(ROOT, 'modules', 'hall-ui'));
+  for (const m of fs.readdirSync(path.join(ROOT, 'modules'))) {
+    walk(path.join(ROOT, 'modules', m, 'public'));
+    walk(path.join(ROOT, 'modules', m, 'views'));
+  }
+  walk(path.join(ROOT, 'public-docs'));
+  walk(path.join(ROOT, 'src'));
   return out;
 }
 
-test('no window.confirm anywhere in modules/hall-ui (comments stripped)', () => {
-  const hits = [];
-  for (const f of hallFiles()) {
-    const src = stripComments(fs.readFileSync(f, 'utf8'));
-    // a call to the browser's box: window.confirm, or a bare confirm( that is not a method or a definition
-    if (/\bwindow\s*\.\s*confirm\b/.test(src) || /(^|[^.\w$])(?<!function\s)confirm\s*\(/m.test(src.replace(/function\s+confirm\s*\(/g, ''))) {
-      hits.push(path.relative(ROOT, f));
+// A call to one of the browser's three boxes: window.confirm/alert/prompt, or a bare confirm( /
+// alert( / prompt( that is not a method (OTBDialog.confirm) or the definition of one. Read line
+// by line, comments out: a whole-file comment stripper eats code across a `/*` inside a string
+// ('/api/bongos/*'), which would let a real call hide behind it. A block comment is one that
+// OPENS a line (how every file here writes them); a same-line /* */, <!-- --> and a trailing
+// // comment are cut where they stand.
+const BOX = /\bwindow\s*\.\s*(confirm|alert|prompt)\b|(^|[^.\w$])(confirm|alert|prompt)\s*\(/;
+function browserBoxCall(rawSrc) {
+  let block = null;
+  for (const raw of String(rawSrc).split('\n')) {
+    let t = raw.trim();
+    if (block) {
+      const end = t.indexOf(block);
+      if (end === -1) continue;
+      t = t.slice(end + block.length);
+      block = null;
     }
+    if (t.startsWith('/*') && !t.includes('*/')) { block = '*/'; continue; }
+    if (t.startsWith('<!--') && !t.includes('-->')) { block = '-->'; continue; }
+    if (/^(\/\/|\*)/.test(t)) continue;
+    const code = t.replace(/\/\*.*?\*\//g, '').replace(/<!--.*?-->/g, '')
+      .replace(/(^|[^:'"`\\])\/\/.*$/, '$1').replace(/function\s+(confirm|alert|prompt)\s*\(/g, '');
+    if (BOX.test(code)) return true;
   }
-  assert.deepEqual(hits, [], 'use OTBDialog.confirm (hall-dialog.js) instead of the browser confirm');
+  return false;
+}
+
+test('no browser confirm, alert or prompt in any served page (comments stripped)', () => {
+  const files = servedFiles();
+  assert.ok(files.length > 200 && files.some((f) => f.includes(`${path.sep}public-landing${path.sep}`)) && files.some((f) => f.includes(`${path.sep}raise${path.sep}`)),
+    'the scan reaches beyond the hall');
+  const hits = files.filter((f) => browserBoxCall(fs.readFileSync(f, 'utf8'))).map((f) => path.relative(ROOT, f));
+  assert.deepEqual(hits, [], 'use OTBDialog.confirm / OTBDialog.prompt (hall-dialog.js) instead of the browser\'s box');
 });
 
-test('the guard catches a window.confirm when one comes back', () => {
-  const src = stripComments("// window.confirm('old') is history\nif (!window.confirm('Delete?')) return;");
-  assert.ok(/\bwindow\s*\.\s*confirm\b/.test(src));
-  assert.ok(!/\bwindow\s*\.\s*confirm\b/.test(stripComments('/* window.confirm() was here */ OTBDialog.confirm({})')));
+test('the guard catches a browser box when one comes back, and leaves the shared dialog alone', () => {
+  for (const bad of ["if (!window.confirm('Delete?')) return;", "const n = window.prompt('Name');", "alert('done')",
+    "if (x && !confirm('Discard?')) return;", "var r = prompt('Why?') || null;"]) {
+    assert.ok(browserBoxCall(bad), `caught: ${bad}`);
+  }
+  // a `/*` inside a string must not hide a real call on a later line
+  assert.ok(browserBoxCall("const p = '/api/bongos/*';\nif (!confirm('Go?')) return;\nconst q = 'a */ b';"), 'caught past a /* in a string');
+  for (const ok of ["// window.confirm('old') is history\nOTBDialog.confirm({})", '/* window.prompt() was here */ await window.OTBDialog.prompt({ title: "x" })',
+    '/* the browser box:\n   window.confirm() calls whose box\n*/ OTBDialog.confirm({})', '<!-- an old\n  confirm() lived here -->',
+    'function confirm(opts) {}', 'const confirmAction = () => {}; confirmAction();']) {
+    assert.ok(!browserBoxCall(ok), `left alone: ${ok}`);
+  }
 });
 
 test('every hall page loads the shared dialog right after the shell, deferred alike', () => {
@@ -399,3 +476,78 @@ test('a confirm over a bound overlay: Escape closes the confirm only, then the o
   assert.equal(ov.modal, 'true');
   await ctx.close();
 });
+
+// ── the prompt (task 1005136) ────────────────────────────────────────────────
+
+test('the prompt: a labelled field in the shared dialog, focused with its text selected; Enter answers with what was typed', { skip }, async () => {
+  const { ctx, page } = await boot();
+  await page.focus('#go');
+  await page.evaluate(() => { window.__r = window.OTBDialog.prompt({ title: 'Name this card', label: 'Shown on your sign-in list', value: 'Old name', confirmLabel: 'Save' }); });
+  const s = await page.evaluate(() => {
+    const d = document.querySelector('dialog.hall-dialog');
+    const f = d.querySelector('input.hall-dialog__field');
+    const lab = document.querySelector(`label[for="${f.id}"]`);
+    return {
+      modal: d.matches(':modal'), title: document.getElementById(d.getAttribute('aria-labelledby')).textContent,
+      label: lab && lab.textContent, focused: document.activeElement === f,
+      selected: f.value.slice(f.selectionStart, f.selectionEnd), buttons: [...d.querySelectorAll('.hall-dialog__actions button')].map((b) => b.textContent),
+      width: Math.round(f.getBoundingClientRect().width), panel: Math.round(d.querySelector('.hall-dialog__body').getBoundingClientRect().width),
+    };
+  });
+  assert.equal(s.modal, true);
+  assert.equal(s.title, 'Name this card');
+  assert.equal(s.label, 'Shown on your sign-in list', 'the field is labelled');
+  assert.equal(s.focused, true, 'the field takes focus');
+  assert.equal(s.selected, 'Old name', 'its text is selected, so typing replaces it');
+  assert.deepEqual(s.buttons, ['Cancel', 'Save']);
+  assert.equal(s.width, s.panel, 'the field spans the dialog');
+  await page.keyboard.type('New name');
+  await page.keyboard.press('Enter');
+  assert.equal(await page.evaluate(() => window.__r), 'New name', 'Enter answers with the typed text');
+  assert.equal(await page.evaluate(() => document.querySelector('dialog.hall-dialog')), null, 'and the dialog is gone');
+  assert.equal(await page.evaluate(() => document.activeElement.id), 'go', 'focus is back on the trigger');
+  await ctx.close();
+});
+
+test('the prompt: Cancel, Escape and the scrim answer null; an empty answer is still an answer', { skip }, async () => {
+  const { ctx, page } = await boot();
+  const ask = (o) => page.evaluate((opts) => { window.__r = window.OTBDialog.prompt(opts); }, o);
+  await ask({ title: 'Why?' });
+  assert.equal(await page.evaluate(() => document.querySelector('input.hall-dialog__field').getAttribute('aria-label')), 'Why?', 'no label: the title names the field');
+  await page.click('.hall-dialog__actions .btn--ghost');
+  assert.equal(await page.evaluate(() => window.__r), null, 'Cancel is null');
+  await ask({ title: 'Why?' });
+  await page.keyboard.press('Escape');
+  assert.equal(await page.evaluate(() => window.__r), null, 'Escape is null');
+  await ask({ title: 'Why?' });
+  await page.mouse.click(5, 5);
+  assert.equal(await page.evaluate(() => window.__r), null, 'the scrim is null');
+  await ask({ title: 'Why?', confirmLabel: 'Go' });
+  await page.click('.hall-dialog__actions .btn:not(.btn--ghost)');
+  assert.equal(await page.evaluate(() => window.__r), '', 'confirming a blank field answers the empty string, not null');
+  await ctx.close();
+});
+
+test('the prompt: a required field keeps its confirm off until something is typed', { skip }, async () => {
+  const { ctx, page } = await boot();
+  await page.evaluate(() => { window.__r = window.OTBDialog.prompt({ title: 'New name for this view', required: true, confirmLabel: 'Rename' }); });
+  const ok = '.hall-dialog__actions .btn:not(.btn--ghost)';
+  assert.equal(await page.$eval(ok, (b) => b.disabled), true, 'blank: the confirm is off');
+  await page.keyboard.press('Enter');
+  assert.ok(await page.evaluate(() => !!document.querySelector('dialog.hall-dialog')), 'Enter on a blank required field does not answer');
+  await page.keyboard.type('   ');
+  assert.equal(await page.$eval(ok, (b) => b.disabled), true, 'spaces are still blank');
+  await page.keyboard.type('Mine');
+  assert.equal(await page.$eval(ok, (b) => b.disabled), false, 'typed: the confirm is on');
+  await page.click(ok);
+  assert.equal(await page.evaluate(() => window.__r), '   Mine', 'the text is handed back exactly as typed');
+  await ctx.close();
+});
+
+test('the prompt\'s title, body and label are text, never markup', { skip }, async () => {
+  const { ctx, page } = await boot();
+  await page.evaluate(() => { window.OTBDialog.prompt({ title: '<b>t</b>', body: '<img src=x onerror="window.__x=1">', label: '<i>l</i>' }); });
+  const s = await page.evaluate(() => ({ img: !!document.querySelector('.hall-dialog img'), i: !!document.querySelector('.hall-dialog i'), b: !!document.querySelector('.hall-dialog b'), x: window.__x }));
+  assert.deepEqual(s, { img: false, i: false, b: false, x: undefined });
+  await ctx.close();
+});

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}`);
+  }
+});