@bongos/core 1.24.48 → 1.24.50

package/tests/brand_mark.mjs

@@ -0,0 +1,195 @@
+// tests/brand_mark.mjs — one logo and one favicon set, served from one place (task 1005088,
+// goal 1000138 "One Cloud Bongos design system").
+//
+// The ring-and-dot mark used to be pasted ~22 times (the landing pages, the gates, the hall
+// shell, hall-render, welcome-boot, raise, three loaders' masks) beside four favicon schemes.
+// Now it lives in modules/ui-design/public/brand/mark.svg and nothing else draws it by hand.
+// What this pins, DB-free and browser-free:
+//   * grep finds ONE source: no file outside the brand folder carries the mark's geometry
+//     (comments stripped), and the brand folder's variants are exactly what
+//     scripts/bongos/gen-brand.js writes from the source (so they are outputs, not copies);
+//   * every page uses it: the landing and hub pages, the hall shell, hall-render and the
+//     welcome reference mark.svg; the three loaders mask with mark-body/mark-dot; raise shows
+//     mark-light/mark-dark; the gates and a looked hall's favicon draw it through
+//     src/brand-mark.js; every page's fallback favicon and the pack's favicon are the one
+//     favicon.svg, with the apple-touch-icon beside it;
+//   * a project's own logo (theme.logo) still takes the mark's place.
+//
+// Run:  node --test tests/brand_mark.mjs
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const read = (...p) => fs.readFileSync(path.join(ROOT, ...p), 'utf8');
+const BRAND = '/modules/ui-design/public/brand/';
+const BRAND_DIR = path.join('modules', 'ui-design', 'public', 'brand');
+
+// The mark's fingerprints: the ring's arc and the moon's centre, in any quoting or spacing.
+const FINGERPRINTS = [/A\s*78[\s,]+78\b/, /cx=\\?['"]156\\?['"]\s+cy=\\?['"]46\\?['"]/, /\bcx%3D%27156/];
+// Strip comments so a doc line naming the arc is not a copy (block, line and HTML comments).
+const decomment = (s) => s
+  .replace(/\/\*[\s\S]*?\*\//g, '')
+  .replace(/<!--[\s\S]*?-->/g, '')
+  .replace(/(^|[^:'"\\])\/\/.*$/gm, '$1');
+
+const SCAN_ROOTS = ['src', 'modules', 'scripts', 'config', 'public', 'public-docs', 'server.js'];
+const TEXT = /\.(js|mjs|cjs|html|css|json|svg)$/;
+function walk(rel, out = []) {
+  const abs = path.join(ROOT, rel);
+  if (!fs.existsSync(abs)) return out;
+  const st = fs.statSync(abs);
+  if (st.isFile()) { if (TEXT.test(rel)) out.push(rel); return out; }
+  for (const name of fs.readdirSync(abs)) {
+    if (name === 'node_modules' || name.startsWith('.')) continue;
+    walk(path.join(rel, name), out);
+  }
+  return out;
+}
+
+// Pure: the files (outside the brand folder) that carry the mark's geometry.
+function pastedCopies(files, readFile) {
+  return files.filter((f) => !f.startsWith(BRAND_DIR + path.sep))
+    .filter((f) => { const code = decomment(readFile(f)); return FINGERPRINTS.some((re) => re.test(code)); });
+}
+
+test('grep finds one source for the mark: no pasted copy outside the brand folder', () => {
+  const files = SCAN_ROOTS.flatMap((r) => walk(r));
+  assert.ok(files.length > 500, 'the scan reads the tree');
+  assert.deepEqual(pastedCopies(files, (f) => read(f)), [],
+    'draw the mark by reference to modules/ui-design/public/brand/mark.svg (or src/brand-mark.js on the server), never a pasted copy');
+});
+
+test('the guard is real: a pasted copy in any of the three spellings is found', () => {
+  const fake = {
+    'modules/x/public/a.html': '<svg><path d="M137 31 A78 78 0 1 0 170 66"/></svg>',
+    'modules/x/public/b.css': ".l{--s:url(\"data:image/svg+xml,%3Csvg%3E%3Ccircle cx='156' cy='46' r='12'/%3E%3C/svg%3E\")}",
+    'src/c.js': "const s = \"<path class='r' d='M137 31A78 78 0 1 0 170 66'/>\";",
+    'src/d.js': '// the arc A78 78 is the ring\nconst ok = 1;',
+    [path.join(BRAND_DIR, 'mark.svg')]: '<path d="M137 31 A78 78 0 1 0 170 66"/>',
+  };
+  assert.deepEqual(pastedCopies(Object.keys(fake), (f) => fake[f]).sort(),
+    ['modules/x/public/a.html', 'modules/x/public/b.css', 'src/c.js']);
+});
+
+test('the source carries the three parts and their two colours', () => {
+  const src = read(BRAND_DIR, 'mark.svg');
+  for (const id of ['mark', 'mark-ring', 'mark-disc', 'mark-dot']) assert.match(src, new RegExp(`id="${id}"`));
+  // A browser reads a referenced SVG as XML: a comment holding "--" (say, a custom property's
+  // name) makes the whole file unreadable and every page's mark silently vanishes.
+  for (const [, body] of src.matchAll(/<!--([\s\S]*?)-->/g)) assert.ok(!body.includes('--'), 'no "--" inside an XML comment');
+  assert.equal((src.match(/<!--/g) || []).length, (src.match(/-->/g) || []).length, 'every comment closes');
+  const { markParts } = require('../src/brand-mark.js');
+  const parts = markParts(src);
+  assert.ok(parts, 'src/brand-mark.js reads the parts');
+  assert.match(parts.ring + parts.disc, /var\(--mark-ink,currentColor\)/);
+  assert.match(parts.dot, /var\(--mark-dot,var\(--accent,currentColor\)\)/);
+});
+
+test('the brand folder holds exactly what gen-brand.js writes from the source (light, dark, mono, favicon)', () => {
+  const { brandFiles, packColors } = require('../scripts/bongos/gen-brand.js');
+  const files = brandFiles(read(BRAND_DIR, 'mark.svg'), packColors());
+  for (const [name, text] of Object.entries(files)) {
+    assert.equal(read(BRAND_DIR, name), text, `${name} is stale — run node scripts/bongos/gen-brand.js`);
+  }
+  const c = packColors();
+  assert.match(files['mark-light.svg'], new RegExp(c.ink));
+  assert.match(files['mark-light.svg'], new RegExp(c.accent));
+  assert.match(files['mark-dark.svg'], /#e2e1e4/);
+  assert.doesNotMatch(files['mark-mono.svg'], new RegExp(c.accent), 'mono is one ink');
+  assert.match(files['favicon.svg'], /prefers-color-scheme:dark/, 'the tab icon has its night twin');
+  const png = fs.readFileSync(path.join(ROOT, BRAND_DIR, 'apple-touch-icon.png'));
+  assert.equal(png.toString('ascii', 1, 4), 'PNG');
+  assert.deepEqual([png.readUInt32BE(16), png.readUInt32BE(20)], [180, 180], 'the home-screen icon is 180x180');
+});
+
+test('every landing and hub page draws the mark by reference', () => {
+  const dir = path.join('modules', 'public-landing', 'public');
+  const pages = fs.readdirSync(path.join(ROOT, dir)).filter((n) => n.endsWith('.html'))
+    .filter((n) => read(dir, n).includes('class="bongosMark"'));
+  assert.ok(pages.length >= 10, `the landing pages with a lockup (${pages.length})`);
+  for (const n of pages) {
+    assert.match(read(dir, n), new RegExp(`<svg class="bongosMark"[^>]*><use href="${BRAND}mark\\.svg#mark"/></svg>`), n);
+  }
+});
+
+test('the hall shell, hall-render and the welcome reference the mark, and a project logo still wins', () => {
+  const shell = read('modules', 'hall-ui', 'public', 'shell.js');
+  assert.ok(shell.includes(`<use href="${BRAND}mark.svg#mark"/>`), 'the sidebar mark');
+  assert.match(shell, /brand\.theme && brand\.theme\.logo\s*\?\s*'<img class="brand-mark__logo"/, 'the logo override');
+  const render = read('modules', 'hall-ui', 'public', 'hall-render.js');
+  assert.ok(render.includes(`<use href="${BRAND}mark.svg#mark"/>`), 'the signed-out card mark');
+  assert.match(render, /logo\s*\?\s*`<img class="landing__logo"/, 'the logo override');
+  const wb = read('modules', 'hall-ui', 'public', 'welcome-boot.js');
+  assert.ok(wb.includes(`var MARK = '${BRAND}mark.svg'`), 'the welcome banner');
+  for (const part of ['#mark-ring', '#mark-disc', '#mark-dot']) assert.ok(wb.includes(part), `the welcome animates ${part}`);
+  assert.match(wb, /logo \? '<img class="wb__logo"/, 'the logo override');
+});
+
+test('the three loaders cut their shapes from the brand files', () => {
+  for (const [file, v] of [
+    [['modules', 'hall-ui', 'public', 'style.css'], '--hl-shape'],
+    [['modules', 'status-ui', 'public', 'style.css'], '--lm-shape'],
+    [['modules', 'public-landing', 'public', 'assets', 'cosmos.css'], '--lm-shape'],
+  ]) {
+    const css = read(...file);
+    assert.ok(new RegExp(`${v}:\\s*url\\("${BRAND}mark-body\\.svg"\\)`).test(css), `${file.join('/')} ring and planet`);
+    assert.ok(new RegExp(`${v}:\\s*url\\("${BRAND}mark-dot\\.svg"\\)`).test(css), `${file.join('/')} moon`);
+  }
+});
+
+test('raise shows the shared logo pair and favicon', () => {
+  for (const v of ['gate', 'page', 'nda']) {
+    const html = read('modules', 'raise', 'views', `${v}.html`);
+    assert.ok(html.includes(`<link rel="icon" href="${BRAND}favicon.svg"`), `${v}: favicon`);
+    assert.ok(html.includes(`<link rel="apple-touch-icon" href="${BRAND}apple-touch-icon.png">`), `${v}: touch icon`);
+    if (html.includes('class="logo')) {
+      assert.ok(html.includes(`src="${BRAND}mark-light.svg"`) && html.includes(`src="${BRAND}mark-dark.svg"`), `${v}: logo pair`);
+    }
+  }
+});
+
+test('the gates draw the mark from the source and still load nothing', () => {
+  const { markSvg } = require('../src/brand-mark.js');
+  const svg = markSvg({ className: 'mark' });
+  assert.match(svg, /^<svg class="mark" viewBox="0 0 200 200" aria-hidden="true"><path [^>]*\/><circle [^>]*\/><circle [^>]*\/><\/svg>$/);
+  assert.doesNotMatch(svg, /\sid=/, 'an inline copy carries no ids');
+  for (const f of ['prelaunch-gate.js', 'platform-visibility-gate.js']) {
+    const src = read('src', 'bongos', f);
+    assert.ok(src.includes("${markSvg({ className: 'mark' })}"), `${f} draws the mark`);
+    assert.match(src, /\.mark\{[^}]*--mark-ink:#17181a;--mark-dot:#fb9569\}/, `${f} colours it`);
+    assert.match(src, /prefers-color-scheme:dark\)\{\.mark\{--mark-ink:#e2e1e4\}\}/, `${f} night twin`);
+    assert.doesNotMatch(src, /<use href=/, `${f} references nothing — it is served before any asset`);
+  }
+});
+
+test('one favicon: every page fallback and the pack point at favicon.svg; a look or a logo overrides', () => {
+  for (const dir of [['modules', 'hall-ui', 'public'], ['modules', 'status-ui', 'public']]) {
+    for (const n of fs.readdirSync(path.join(ROOT, ...dir)).filter((x) => x.endsWith('.html'))) {
+      const icons = read(...dir, n).match(/<link rel="icon"[^>]*>/g) || [];
+      for (const l of icons) assert.ok(l.includes(`href="${BRAND}favicon.svg"`), `${dir.join('/')}/${n}: ${l.slice(0, 80)}`);
+    }
+  }
+  const pack = JSON.parse(read('config', 'branding.neutral.json')).theme.ui;
+  assert.equal(pack.favicon, `${BRAND}favicon.svg`);
+  assert.equal(pack.appleTouchIcon, `${BRAND}apple-touch-icon.png`);
+
+  const { themeMarkup } = require('../src/bongos/serve-internal.js');
+  const m = themeMarkup({ favicon: pack.favicon, appleTouchIcon: pack.appleTouchIcon, fonts: { links: [] } });
+  assert.ok(m.includes(`<link rel="icon" href="${BRAND}favicon.svg">`));
+  assert.ok(m.includes(`<link rel="apple-touch-icon" href="${BRAND}apple-touch-icon.png">`));
+  assert.ok(!themeMarkup({ favicon: 'x', fonts: { links: [] } }).includes('apple-touch-icon'), 'no touch icon unless the pack names one');
+
+  const { applyLook } = require('../src/hall-look.js');
+  const looked = applyLook({ theme: { ui: { ...pack } }, project: { look: 'custom', lookAccent: '#3366cc' } },
+    () => ({ colors: { ink: '#101010', accent: '#fb9569' }, fonts: {} }));
+  assert.match(looked.theme.ui.favicon, /^data:image\/svg\+xml;utf8,<svg /);
+  assert.match(looked.theme.ui.favicon, /%233366cc/, 'drawn in the look\'s accent');
+  assert.match(looked.theme.ui.favicon, /stroke-width='24'/, 'the small cut');
+  assert.equal(looked.theme.ui.appleTouchIcon, '', 'the pack-coloured touch icon steps aside');
+});

package/tests/cloud_bongos_pack.mjs

@@ -43,7 +43,9 @@ test('R74: the vanilla pack carries the Cloud Bongos LOOK (chrome palette, Manro
   assert.match(c.theme.fonts.display, /Manrope/);
   assert.match(c.theme.fonts.body, /Manrope/);
   assert.ok(c.theme.fonts.links.some((l) => /JetBrains\+Mono/.test(l) && /Manrope/.test(l)), 'loads Manrope + JetBrains Mono');
-  assert.match(c.theme.favicon, /circle/, 'the moon-in-the-gap favicon (circles), not the Greek Α');
+  // the one favicon set (task 1005088): the moon-in-the-gap mark, served from the brand folder
+  assert.equal(c.theme.favicon, '/modules/ui-design/public/brand/favicon.svg', 'the moon-in-the-gap favicon, not the Greek Α');
+  assert.equal(c.theme.appleTouchIcon, '/modules/ui-design/public/brand/apple-touch-icon.png');
   assert.doesNotMatch(c.theme.favicon, /font-family='serif'>Α/);
   // the backdrop is the TOKEN, not a hex: the served body follows the mode,
   // because the sheets' dark blocks are (0,2,0) and outrank the injected :root.
@@ -60,7 +62,8 @@ test('R74: serving the hall on a vanilla boot injects the Cloud Bongos chrome th
   // palette override + the token-valued body backdrop + bongo favicon + the type links
   assert.match(out, /:root\{[^}]*--accent:#fb9569;/);
   assert.match(out, /body\{background:var\(--bg\);\}/);
-  assert.match(out, /<link rel="icon" href="data:image\/svg\+xml[^"]*circle/);
+  assert.match(out, /<link rel="icon" href="\/modules\/ui-design\/public\/brand\/favicon\.svg">/);
+  assert.match(out, /<link rel="apple-touch-icon" href="\/modules\/ui-design\/public\/brand\/apple-touch-icon\.png">/);
   assert.match(out, /fonts\.googleapis\.com\/css2\?family=JetBrains\+Mono/);
   // and it lands AFTER the stylesheet so the Cloud Bongos look wins
   assert.ok(out.indexOf('/builders/style.css') < out.indexOf('--accent:#fb9569'));

package/tests/hall_loading.mjs

@@ -36,13 +36,11 @@ test('the loader is drawn from the Bongos mark, in three sizes', () => {
   for (const sel of ['.hall-loading {', '.hall-loading::before {', '.hall-loading::after {', '.hall-loading--page {', '.hall-loading--inline {']) {
     assert.ok(LOADER.includes(sel), `${sel} is declared`);
   }
-  // The same ring arc, core and dot the shell's brand mark draws, so the loader IS the logo.
-  const ring = SHELL.match(/<path class="mr" d="([^"]+)"/)[1];
-  assert.ok(LOADER.includes(`d='${ring}'`), 'the ring is the brand mark\'s arc');
-  assert.ok(SHELL.includes('<circle class="mp" cx="100" cy="100" r="55"'), 'the brand mark\'s core');
-  assert.ok(LOADER.includes("circle cx='100' cy='100' r='55'"), 'is the loader\'s core');
-  assert.ok(SHELL.includes('<circle cx="156" cy="46" r="12" fill="#fb9569"/>'), 'the brand mark\'s dot');
-  assert.ok(LOADER.includes("circle cx='156' cy='46' r='12'"), 'is the loader\'s dot');
+  // The shell's brand mark and the loader are cut from the one mark (task 1005088), so the
+  // loader IS the logo: the shell references mark.svg, the masks are its ring-and-core and dot.
+  assert.ok(SHELL.includes('<use href="/modules/ui-design/public/brand/mark.svg#mark"/>'), 'the brand mark is the one mark');
+  assert.ok(LOADER.includes('--hl-shape: url("/modules/ui-design/public/brand/mark-body.svg")'), 'the loader\'s ring and core');
+  assert.ok(LOADER.includes('--hl-shape: url("/modules/ui-design/public/brand/mark-dot.svg")'), 'the loader\'s dot');
 });
 
 test('it moves in CSS only, on transform and filter only, and rests on the logo', () => {
@@ -74,9 +72,9 @@ test('every colour is a token; the black in the masks is alpha, not paint', () =
   for (const p of paints) assert.match(p, /^(var\(--[a-z-]+\)|color-mix\(in srgb, var\(--ink\) \d+%, var\(--bg-card\)\))$/, `${p} is a token or a mix of one`);
   // The one accent is the dot: the live thing on a waiting page (the One Warm Thing Rule).
   assert.equal((css.match(/var\(--accent\)/g) || []).length, 1, 'the accent paints the dot alone');
-  const masks = [...css.matchAll(/url\("data:image\/svg\+xml,([^"]+)"\)/g)].map((m) => decodeURIComponent(m[1]));
-  assert.equal(masks.length, 2, 'two masks: the ring and core, and the dot');
-  for (const m of masks) assert.doesNotMatch(m.replace(/stroke='black'|fill='none'/g, ''), /fill='|stroke='|#/, 'a mask carries no colour of its own');
+  // The two masks are the brand folder's one-ink shapes (task 1005088): only their alpha counts.
+  const masks = [...css.matchAll(/url\("\/modules\/ui-design\/public\/brand\/(mark-[a-z]+\.svg)"\)/g)].map((m) => m[1]);
+  assert.deepEqual(masks, ['mark-body.svg', 'mark-dot.svg'], 'two masks: the ring and core, and the dot');
 });
 
 test('the page loaders step aside by themselves, and never show without :has()', () => {

package/tests/loading_mark.mjs

@@ -38,7 +38,8 @@ const SURFACES = {
   status: { css: STATUS_CSS, loader: section(STATUS_CSS, '/* ---------- The loader (task 1005053') },
 };
 const flat = (s) => s.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\s+/g, ' ');
-const masksOf = (css) => [...css.matchAll(/url\("data:image\/svg\+xml,([^"]+)"\)/g)].map((m) => decodeURIComponent(m[1]));
+// The masks are the brand folder's one-ink shapes (task 1005088), named by file.
+const masksOf = (css) => [...css.matchAll(/url\("\/modules\/ui-design\/public\/brand\/(mark-[a-z]+\.svg)"\)/g)].map((m) => m[1]);
 function keyframes(css, name) {
   const m = css.match(new RegExp(`@keyframes ${name} ?\\{`));
   assert.ok(m, `@keyframes ${name} exists`);
@@ -48,16 +49,11 @@ function keyframes(css, name) {
 }
 
 test('the apex loader is the bar\'s own Bongos mark, and the status loader is the same mark', () => {
-  // The apex bar draws the mark inline (account.html's .bongosMark); the loader's
-  // two masks carry exactly its arc, core and dot, so the loader IS the logo.
+  // The apex bar and the loader are cut from the one mark (task 1005088): the bar references
+  // mark.svg, and the loader's two masks are its ring-and-core and its dot, so the loader IS the logo.
   const bar = read(LANDING, 'account.html');
-  const arc = bar.match(/<path class="mr" d="([^"]+)"/)[1];
-  assert.match(bar, /<circle class="mp" cx="100" cy="100" r="55"/);
-  assert.match(bar, /<circle cx="156" cy="46" r="12" style="fill:var\(--accent\)"\/>/);
-  const [ring, dot] = masksOf(SURFACES.apex.loader);
-  assert.ok(ring.includes(`d='${arc}'`), 'the ring is the bar mark\'s arc');
-  assert.ok(ring.includes("<circle cx='100' cy='100' r='55'/>"), 'the core is the bar mark\'s core');
-  assert.ok(dot.includes("<circle cx='156' cy='46' r='12'/>"), 'the dot is the bar mark\'s dot');
+  assert.match(bar, /<svg class="bongosMark"[^>]*><use href="\/modules\/ui-design\/public\/brand\/mark\.svg#mark"\/><\/svg>/);
+  assert.deepEqual(masksOf(SURFACES.apex.loader), ['mark-body.svg', 'mark-dot.svg']);
   // The status page has no Bongos mark of its own: its loader carries the apex's two
   // masks byte for byte, so the two surfaces cannot drift into two logos.
   assert.deepEqual(masksOf(SURFACES.status.loader), masksOf(SURFACES.apex.loader));
@@ -91,9 +87,7 @@ for (const [name, { css, loader }] of Object.entries(SURFACES)) {
     for (const p of paints) assert.match(p, /^(var\(--[a-z-]+\)|color-mix\(in srgb, ?var\(--ink\) 30%, ?var\(--bg-card\)\))$/, `${p} is a token or a mix of one`);
     // The one accent is the dot: the live thing on a waiting page (the One Warm Thing Rule).
     assert.equal((css.match(/var\(--accent\)/g) || []).length, 1, 'the accent paints the dot alone');
-    const masks = masksOf(loader);
-    assert.equal(masks.length, 2, 'two masks: the ring and core, and the dot');
-    for (const m of masks) assert.doesNotMatch(m.replace(/stroke='black'|fill='none'/g, ''), /fill='|stroke='|#/, 'a mask carries no colour of its own');
+    assert.deepEqual(masksOf(loader), ['mark-body.svg', 'mark-dot.svg'], 'two masks: the ring and core, and the dot');
   });
 
   test(`${name}: the dot shares the ring's grid cell, so no page padding can knock it off`, () => {

package/tests/nav_permission_atoms.mjs

@@ -101,7 +101,8 @@ test('the hall-preview fixture carries every atom /me resolves', () => {
 // task 1005050: Accomplishments left it (folded into Profile; its hashes redirect);
 // task 1005051: Roadmap left it (folded into Goals; /roadmap redirects).
 // task 1005070: the remembered nav (the rail paints before /me).
-const SHELL_SHA = 'dbbe6f2eb49a65c3';
+// task 1005088: the sidebar mark is drawn by reference to the one brand mark.
+const SHELL_SHA = '2845bfedfaf7846f';
 
 test('shell.js has not changed without its cache-bust being bumped', () => {
   const actual = crypto.createHash('sha256').update(SHELL).digest('hex').slice(0, 16);

package/tests/raise.mjs

@@ -157,7 +157,9 @@ test('a stranger gets the gate, never the copy', async () => {
   assert.doesNotMatch(html, /gamification of capitalism/);
   assert.equal(r.headers.get('x-robots-tag'), 'noindex, nofollow, noarchive');
   assert.equal((await get('/raise/media/x.mp4')).status, 401);
-  assert.equal((await get('/raise/assets/logo-ink.svg')).status, 200, 'the gate needs its logo');
+  // the gate's logo is the shared one (task 1005088), served on every host, never a raise copy
+  assert.match(html, /src="\/modules\/ui-design\/public\/brand\/mark-light\.svg"/, 'the gate needs its logo');
+  assert.equal((await get('/raise/assets/logo-ink.svg')).status, 404, 'the old pasted copy is gone');
   assert.match(await (await get('/raise/nda')).text(), /CONFIDENTIALITY|Confidential/i);
 });
 

package/tests/status_page_chrome.mjs

@@ -0,0 +1,195 @@
+// tests/status_page_chrome.mjs — the status page on the chrome world (task 1005089,
+// goal 1000138; DESIGN.md "Naming": the owner moved the status page onto this world,
+// keeping its fixed status vocabulary as the hall does).
+//
+// What this pins, DB-free and browser-free:
+//   * nothing of the retired Greek ledger look survives in the surface: no parchment
+//     colours, no Cinzel / EB Garamond, no bronze cursors, no amphora or laurel
+//     sprite, no double-ruled frame;
+//   * every page title carries the product name from the branding pack;
+//   * the sheet declares no page :root, writes its dark tier twice byte-identical,
+//     and carries the hall's status vocabulary value for value;
+//   * explore is served through the branding injection, so it loads the pack's faces;
+//   * the off-box mirror IS the live page: the server's response for "/" on the
+//     status host, and the mirror's index built from the same source, are equal once
+//     each side's own injections are taken out — and every file the page links is one
+//     the mirror publishes.
+//
+// Run:  node --test tests/status_page_chrome.mjs
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import http from 'node:http';
+import path from 'node:path';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const DIR = path.join(ROOT, 'modules', 'status-ui', 'public');
+const read = (...p) => fs.readFileSync(path.join(ROOT, ...p), 'utf8').replace(/\r\n/g, '\n');
+const decomment = (s) => s.replace(/\/\*[\s\S]*?\*\//g, '');
+const CSS = read('modules', 'status-ui', 'public', 'style.css');
+const CODE = decomment(CSS);
+
+function surfaceFiles(dir = DIR, out = []) {
+  for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+    const p = path.join(dir, e.name);
+    if (e.isDirectory()) surfaceFiles(p, out);
+    else if (/\.(html|css|js)$/.test(e.name)) out.push(p);
+  }
+  return out;
+}
+
+// The retired look, as literals. The parchment hexes are the old sheet's :root.
+const RETIRED = [
+  /Cinzel/i, /Garamond/i, /cursors\//, /hand-pointer\.png/, /sigil-amphora/, /orn-(laurel|column|coin|scroll|map|diamond)/,
+  /#ece0c2|#f6ecd2|#ddc99c|#e3d0a4|#2a2110|#6e5b3a|#735f3d|#8b6f2c|#b89a55|#4a7d5c|#2f5a3f|#2d6e7e|#a85530/i,
+  /rgba\(\s*(139, 111, 44|60, 40, 10|42, 33, 16|243, 230, 198)/,
+  /upper-roman/,
+];
+
+test('nothing of the Greek ledger look is left in the status surface', () => {
+  const hits = [];
+  for (const f of surfaceFiles()) {
+    const text = fs.readFileSync(f, 'utf8');
+    for (const re of RETIRED) if (re.test(text)) hits.push(`${path.relative(ROOT, f)}: ${re}`);
+  }
+  assert.deepEqual(hits, []);
+  assert.equal(fs.existsSync(path.join(DIR, 'cursors')), false, 'the bronze cursors are gone');
+  // no double-ruled frame: a panel is one hairline, no inset rule, no shadow
+  const panel = CODE.match(/\n\.tablet \{([^}]*)\}/);
+  assert.ok(panel, 'the panel rule exists');
+  assert.match(panel[1], /border: var\(--line\) solid var\(--rule-soft\);/);
+  assert.match(panel[1], /border-radius: var\(--ds-radius-panel\);/);
+  assert.doesNotMatch(panel[1], /box-shadow/);
+  assert.doesNotMatch(CODE, /\.tablet::(before|after)/, 'no carved corner ornaments');
+});
+
+test('every page title carries the product name from the pack', () => {
+  const pages = fs.readdirSync(DIR).filter((f) => f.endsWith('.html'));
+  assert.ok(pages.length >= 2);
+  for (const p of pages) {
+    const title = fs.readFileSync(path.join(DIR, p), 'utf8').match(/<title>([^<]*)<\/title>/);
+    assert.ok(title, `${p} has a title`);
+    assert.match(title[1], /\{\{productName\}\}/, `${p}: the title names the product`);
+  }
+});
+
+test('the page draws the shared mark and favicon, and names no face of its own', () => {
+  const html = read('modules', 'status-ui', 'public', 'index.html');
+  assert.ok(html.includes('<use href="/modules/ui-design/public/brand/mark.svg#mark"/>'), 'the top bar draws the one mark by reference');
+  assert.ok(html.includes('<link rel="icon" href="/modules/ui-design/public/brand/favicon.svg"'));
+  assert.doesNotMatch(html, /fonts\.googleapis\.com/, 'the faces come from the pack splice, not the page');
+  assert.ok(html.indexOf('/modules/hall-ui/public/controls.css') > html.indexOf('/modules/ui-design/public/tokens.css'), 'the shared controls follow the scales');
+  assert.ok(html.indexOf('/modules/hall-ui/public/controls.css') < html.indexOf('href="/style.css'), 'and precede the page sheet');
+  // exactly one header (the top bar), one main, one h1
+  assert.equal((html.match(/<header\b/g) || []).length, 1);
+  assert.equal((html.match(/<main\b/g) || []).length, 1);
+  assert.equal((html.match(/<h1\b/g) || []).length, 1);
+});
+
+test('the sheet declares no page :root, and its dark tier is written twice, byte-identical', () => {
+  assert.doesNotMatch(CODE, /(^|[\s,}]):root\b/, 'no :root — the pack splices the only one');
+  assert.match(CODE, /:where\(html\) \{/, 'the fallback contract tier sits at zero specificity');
+  const switchBody = CODE.match(/\nhtml\[data-theme="dark"\] \{([^}]*)\}/);
+  const mediaBody = CODE.match(/@media \(prefers-color-scheme: dark\) \{\s*html:not\(\[data-theme\]\) \{([^}]*)\}/);
+  assert.ok(switchBody && mediaBody, 'both dark twins exist');
+  const norm = (s) => s.split('\n').map((l) => l.trim()).filter(Boolean).join('\n');
+  assert.equal(norm(mediaBody[1]), norm(switchBody[1]));
+  // the dark tier re-pins no accent (the Unpinned Accent Rule)
+  assert.doesNotMatch(switchBody[1], /--(accent|accent-deep|sea|terracotta):/);
+});
+
+test('the status vocabulary is the hall\'s, value for value, in both modes', () => {
+  const hall = decomment(read('modules', 'hall-ui', 'public', 'style.css'));
+  const NAMES = ['--ok', '--ok-weak', '--warn', '--warn-weak', '--danger', '--danger-weak', '--info', '--info-weak'];
+  const valuesIn = (body) => Object.fromEntries(NAMES.map((n) => {
+    const m = body.match(new RegExp(`\\n\\s*${n}:\\s*([^;]+);`));
+    assert.ok(m, `${n} is declared`);
+    return [n, m[1].trim()];
+  }));
+  const lightOf = (src, open) => { const at = src.indexOf(open); assert.ok(at > -1, open); return src.slice(at, src.indexOf('}', at)); };
+  assert.deepEqual(valuesIn(lightOf(CODE, '\nhtml {')), valuesIn(lightOf(hall, '\n:root {')));
+  assert.deepEqual(valuesIn(lightOf(CODE, '\nhtml[data-theme="dark"] {')), valuesIn(lightOf(hall, '\nhtml[data-theme="dark"] {')));
+});
+
+// ── served ────────────────────────────────────────────────────────────────────
+// node:http, not fetch: fetch silently drops a Host override (tests/module_asset_subdomain.mjs).
+function get(port, p, host) {
+  return new Promise((resolve, reject) => {
+    const req = http.request({ host: '127.0.0.1', port, path: p, headers: { Host: host } }, (res) => {
+      let body = '';
+      res.setEncoding('utf8');
+      res.on('data', (c) => { body += c; });
+      res.on('end', () => resolve({ status: res.statusCode, body }));
+    });
+    req.on('error', reject);
+    req.end();
+  });
+}
+async function withServer(fn) {
+  const express = require('express');
+  const { mountInternalSurfaces } = require('../src/bongos/serve-internal.js');
+  const app = express();
+  mountInternalSurfaces(app);
+  const server = await new Promise((resolve) => { const s = app.listen(0, () => resolve(s)); });
+  try { return await fn(server.address().port); } finally { await new Promise((r) => server.close(r)); }
+}
+
+test('explore is served through the branding injection: the pack\'s faces, the product name', async () => {
+  const { clientBranding } = require('../src/branding.js');
+  const brand = clientBranding();
+  await withServer(async (port) => {
+    for (const p of ['/explore', '/explore.html']) {
+      const r = await get(port, p, 'status.example.com');
+      assert.equal(r.status, 200, p);
+      // the href is attribute-escaped on the way in (themeMarkup), so & arrives as &amp;
+      for (const href of brand.theme.fonts.links) assert.ok(r.body.includes(`<link rel="stylesheet" href="${href.replace(/&/g, '&amp;')}">`), `${p} loads the pack's faces`);
+      assert.ok(r.body.includes(`<title>Explore — projects on the map · ${brand.identity.productName}</title>`), `${p} names the product`);
+      assert.doesNotMatch(r.body, /\{\{productName\}\}/);
+    }
+    // an asset still comes off disk
+    assert.equal((await get(port, '/explore.js', 'status.example.com')).status, 200);
+  });
+});
+
+test('the off-box mirror is the live page, and publishes every file the page links', async () => {
+  const mirror = require('../scripts/status-mirror-sync.js');
+  const { stampHtml } = require('../src/asset-version.js');
+  const { clientBranding, branding } = require('../src/branding.js');
+  const brand = clientBranding();
+  const src = stampHtml(read('modules', 'status-ui', 'public', 'index.html'), { assetDir: DIR, urlPrefix: '/' });
+  const apiBase = branding().domains.publicOrigin || 'https://origin.example.test';
+  const built = mirror.buildMirrorIndex({ srcHtml: src, apiBase, statusDataUrl: 'https://data.example.test/status.json', brand });
+
+  const live = await withServer(async (port) => (await get(port, '/', 'status.example.com')).body);
+  assert.ok(live.includes(brand.theme.fonts.links[0].replace(/&/g, '&amp;')), 'the live page splices the pack');
+
+  // each side minus its own injections: the server's client bundle + globals, and the
+  // mirror's three off-box additions + its globals
+  const liveCore = live
+    .replace(/<script src="\/lib\/bongos-client\.js[^"]*"><\/script>/, '')
+    .replace(/<script>window\.__BRANDING__=[\s\S]*?<\/script>/, '');
+  const mirrorCore = built
+    .replace(/ {2}<!-- #737: off-box mirror runs cross-origin against the droplet\. -->\n {2}<script>window\.STATUS_API_BASE = [^\n]*<\/script>\n {2}<script>window\.__BRANDING__ = [^\n]*<\/script>\n/, '')
+    .replace(/\n<!-- Off-box availability banner \(ADR 0029\)[\s\S]*?<div id="offbox-status" role="status" aria-live="polite"><\/div>\n/, '')
+    .replace(/<!-- Off-box availability banner driver \(ADR 0029\)[\s\S]*?<\/script>\n/, '');
+  // the origin token is the one value the two resolve from different places on a
+  // checkout with no domains; normalise it before comparing
+  const norm = (s) => s.split(apiBase).join('{{origin}}');
+  assert.equal(norm(mirrorCore), norm(liveCore));
+
+  // every root-absolute file the page links is published: its own files are copied
+  // from the surface dir, the shared ones at the same path
+  const refs = [...src.matchAll(/\b(?:href|src)="(\/[^"?#]+)/g)].map((m) => m[1]).filter((u) => !u.startsWith('//'));
+  assert.ok(refs.length >= 5);
+  for (const u of refs) {
+    const rel = u.slice(1).replace(/#.*$/, '');
+    const own = ['status.js', 'style.css'].includes(rel);
+    const shared = mirror.SHARED_ASSETS.some((a) => rel === a || rel.startsWith(`${a}/`));
+    assert.ok(own || shared, `the mirror publishes ${u}`);
+    assert.ok(fs.existsSync(path.join(own ? DIR : ROOT, rel)), `${u} exists to publish`);
+  }
+});

package/tests/welcome_boot.mjs

@@ -79,8 +79,11 @@ test('the banner is the logo, named from the branding pack, never a hardcoded wo
   assert.equal(W.bannerText, undefined, 'the "Working on the core of" banner is gone');
   const harbor = W.logoHtml({ identity: { worldName: 'Harbor', productName: 'Cloud Bongos' } });
   assert.match(harbor, /<svg class="wb__mark"/, 'no project logo: the Bongos mark');
-  assert.match(harbor, /class="wb__ring"[^>]*pathLength="100"/, 'the ring can draw in');
-  assert.match(harbor, /class="wb__moonlet"[^>]*fill="#fb9569"/, 'the salmon moon');
+  // the parts come from the one mark (task 1005088), whose ring carries pathLength="100"
+  assert.match(harbor, /<use class="wb__ring" href="\/modules\/ui-design\/public\/brand\/mark\.svg#mark-ring"\/>/, 'the ring can draw in');
+  assert.match(harbor, /<use class="wb__planet" href="[^"]*#mark-disc"\/>/, 'the planet');
+  assert.match(harbor, /<use class="wb__moonlet" href="[^"]*#mark-dot"\/>/, 'the moon');
+  assert.match(fs.readFileSync(path.join(ROOT, 'modules', 'ui-design', 'public', 'brand', 'mark.svg'), 'utf8'), /id="mark-ring"[^>]*pathLength="100"/);
   assert.match(harbor, /<span class="wb__name">Harbor<\/span>/);
   assert.match(W.logoHtml(undefined), /<span class="wb__name">this project<\/span>/, 'no branding: still a name');
   const own = W.logoHtml({ identity: { worldName: 'Harbor' }, theme: { logo: '/logo.png?a="b"' } });

package/modules/raise/public/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><style>.p{fill:#17181a}.r{stroke:#17181a}@media (prefers-color-scheme:dark){.p{fill:#e2e1e4}.r{stroke:#e2e1e4}}</style><path class="r" d="M137 31 A78 78 0 1 0 170 66" fill="none" stroke-width="24" stroke-linecap="round"/><circle class="p" cx="100" cy="100" r="50"/><circle cx="156" cy="46" r="18" fill="#fb9569"/></svg>

package/modules/raise/public/logo-ink.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" role="img" aria-label="Cloud Bongos"><path d="M137 31 A78 78 0 1 0 170 66" fill="none" stroke="#17181a" stroke-width="15" stroke-linecap="round"/><circle cx="100" cy="100" r="55" fill="#17181a"/><circle cx="156" cy="46" r="12" fill="#fb9569"/></svg>

package/modules/raise/public/logo-night.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" role="img" aria-label="Cloud Bongos"><path d="M137 31 A78 78 0 1 0 170 66" fill="none" stroke="#e2e1e4" stroke-width="15" stroke-linecap="round"/><circle cx="100" cy="100" r="55" fill="#e2e1e4"/><circle cx="156" cy="46" r="12" fill="#fb9569"/></svg>