@bongos/core 1.24.58 → 1.24.60

package/scripts/bongos/design-generators-fresh.js

@@ -4,7 +4,8 @@
 // check; kept in its own file because fitness.js sits at the 1,500-line budget.
 //
 // Both generated files read the shared token sheet (modules/ui-design/public/tokens.css) and the brand pack; the public
-// reference also reads the hall's sheets and DESIGN.md. A stylesheet edit without a
+// reference also reads the hall's sheets and DESIGN.md. The logo set (scripts/bongos/gen-brand.js)
+// reads mark.svg and the pack, and checks its two PNGs by hash (task 1005133). A stylesheet edit without a
 // regeneration used to surface only as a failing unit test; this names it in fitness.
 // Skipped when the ui-design module is not in the checkout. `root` is injectable for
 // tests/design_counts_ratchet.mjs, which runs it against a copied tree.
@@ -17,14 +18,21 @@ const { REPO_ROOT } = require('./fitness-lib.js');
 
 function checkDesignGeneratorsFresh(root = REPO_ROOT) {
   const violations = [];
-  for (const [script, out, task] of [
-    ['gen-design-tokens.js', 'config/design-tokens.neutral.json', '1005082'],
-    ['gen-design-reference.js', 'modules/ui-design/public/brand.html (the public /brand page)', '1005083'],
+  const UI = ['modules', 'ui-design', 'scripts'];
+  for (const [dir, script, out, why, task] of [
+    [UI, 'gen-design-tokens.js', 'config/design-tokens.neutral.json', 'a design source (the token sheet, the brand pack, a hall sheet or DESIGN.md)', '1005082'],
+    [UI, 'gen-design-reference.js', 'modules/ui-design/public/brand.html (the public /brand page)', 'a design source (the token sheet, the brand pack, a hall sheet or DESIGN.md)', '1005083'],
+    // The logo and favicon set, and the two PNGs by hash (task 1005133): mark.svg or the
+    // pack's colours changed without a regeneration. A PNG needs `--png` (a system browser).
+    [['scripts', 'bongos'], 'gen-brand.js', 'the logo set in modules/ui-design/public/brand/', 'mark.svg or the brand pack', '1005133'],
   ]) {
-    const gen = path.join(root, 'modules', 'ui-design', 'scripts', script);
+    const gen = path.join(root, ...dir, script);
     if (!fs.existsSync(gen)) continue;
     try { execFileSync(process.execPath, [gen, '--check'], { cwd: root, stdio: 'pipe' }); }
-    catch { violations.push(`${out} is STALE — a design source (the token sheet, the brand pack, a hall sheet or DESIGN.md) changed without a regeneration. Run \`node modules/ui-design/scripts/${script}\` and commit (task ${task}).`); }
+    catch (e) {
+      const said = String((e && e.stderr) || '').trim().split('\n').filter(Boolean).join(' ');
+      violations.push(`${out} is STALE — ${why} changed without a regeneration. Run \`node ${[...dir, script].join('/')}\`${script === 'gen-brand.js' ? ' (with --png for a PNG)' : ''} and commit (task ${task}).${said ? ` [${said}]` : ''}`);
+    }
   }
   return violations;
 }

package/scripts/bongos/gen-brand.js

@@ -17,17 +17,23 @@
 //   og-card.png      1200x630, the link-preview card every public page names (task 1005091):
 //                    the dark mark and the lowercase wordmark on the void (--png; needs a browser)
 //
-// Deterministic text, so `--check` is a clean gate (tests/brand_mark.mjs runs it). The PNG is
-// rendered by the system browser and only written with --png.
+// Deterministic text, so `--check` is a clean gate (tests/brand_mark.mjs runs it; fitness runs it
+// through scripts/bongos/design-generators-fresh.js). The PNGs are rendered by the system browser
+// and only written with --png; a browser's pixels are not byte-stable across machines, so they
+// are checked by hash instead (task 1005133): --png records, in png-sources.json beside them,
+// a hash of the exact page each was rendered from and a hash of the PNG written. --check fails
+// when the page a PNG would be rendered from today differs from the one recorded (a source or a
+// colour moved without a re-render), or when the PNG is not the one that render wrote.
 //
 // Usage:
 //   node scripts/bongos/gen-brand.js          # write the SVG variants
 //   node scripts/bongos/gen-brand.js --png    # … and render apple-touch-icon.png + og-card.png
-//   node scripts/bongos/gen-brand.js --check  # write nothing; exit 2 if a variant is stale
+//   node scripts/bongos/gen-brand.js --check  # write nothing; exit 2 if a variant or a PNG is stale
 
 const fs = require('node:fs');
 const path = require('node:path');
-const { NIGHT_INK, readMarkSource, markParts, markFile, faviconSvg } = require('../../src/brand-mark');
+const crypto = require('node:crypto');
+const { readMarkSource, markParts, markFile, faviconSvg } = require('../../src/brand-mark');
 const { escapeHtml } = require('../../src/html-escape');
 
 const ROOT = path.resolve(__dirname, '..', '..');
@@ -59,22 +65,71 @@ function ogCardHtml({ markSvg, name, fontLinks = [], fontFamily = 'sans-serif' }
     '</body></html>';
 }
 
-async function renderOgCard(dir) {
+// The page apple-touch-icon.png is rendered from: the light mark on the pack's ground. Pure.
+function touchIconHtml({ markSvg, bg }) {
+  return `<html><body style="margin:0;background:${bg}">` +
+    `<img src="data:image/svg+xml;base64,${Buffer.from(markSvg).toString('base64')}" style="display:block;width:128px;height:128px;margin:26px">` +
+    '</body></html>';
+}
+
+// Each PNG as the exact page and viewport it is rendered from, given the SVG variants it
+// draws (the text gen-brand writes, not the files on disk, so a stale SVG shows here too).
+function pngPages(files, pack) {
+  return {
+    'apple-touch-icon.png': {
+      width: 180, height: 180, wait: 'load',
+      html: touchIconHtml({ markSvg: files['mark-light.svg'], bg: pack.theme.ui.colors.bg }),
+    },
+    'og-card.png': {
+      width: 1200, height: 630, wait: 'networkidle',
+      html: ogCardHtml({
+        markSvg: files['mark-dark.svg'],
+        name: pack.identity.productName,
+        fontLinks: pack.theme.ui.fonts.links,
+        fontFamily: pack.theme.ui.fonts.display,
+      }),
+    },
+  };
+}
+
+const sha256 = (buf) => crypto.createHash('sha256').update(buf).digest('hex');
+// The hash of a render's input: the page and the viewport it is shot at.
+function pageHash(p) { return sha256(JSON.stringify([p.width, p.height, p.html])); }
+
+const PNG_MANIFEST = 'png-sources.json';
+
+// The PNGs that do not match what --png would write today, each with the reason. Pure I/O
+// read of the brand folder; writes nothing.
+function stalePngs(dir, pages) {
+  let manifest = {};
+  try { manifest = JSON.parse(fs.readFileSync(path.join(dir, PNG_MANIFEST), 'utf8')); } catch { manifest = {}; }
+  const stale = [];
+  for (const [name, p] of Object.entries(pages)) {
+    const rec = manifest[name];
+    const file = path.join(dir, name);
+    if (!rec || !fs.existsSync(file)) { stale.push(`${name} (not recorded in ${PNG_MANIFEST})`); continue; }
+    if (rec.page !== pageHash(p)) stale.push(`${name} (its source page changed since it was rendered)`);
+    else if (rec.png !== sha256(fs.readFileSync(file))) stale.push(`${name} (the file is not the one --png wrote)`);
+  }
+  return stale;
+}
+
+async function renderPngs(dir, pages) {
   const { launchBrowser } = require('../../modules/ui-design/kit/lib'); // eslint-disable-line global-require
-  const pack = readPack();
   const browser = await launchBrowser();
+  const manifest = {};
   try {
-    const page = await browser.newPage({ viewport: { width: 1200, height: 630 }, deviceScaleFactor: 1 });
-    await page.setContent(ogCardHtml({
-      markSvg: fs.readFileSync(path.join(dir, 'mark-dark.svg'), 'utf8'),
-      name: pack.identity.productName,
-      fontLinks: pack.theme.ui.fonts.links,
-      fontFamily: pack.theme.ui.fonts.display,
-    }));
-    await page.waitForLoadState('networkidle');
-    await page.evaluate(() => document.fonts.ready);
-    await page.screenshot({ path: path.join(dir, 'og-card.png'), omitBackground: false });
+    for (const [name, p] of Object.entries(pages)) {
+      const page = await browser.newPage({ viewport: { width: p.width, height: p.height }, deviceScaleFactor: 1 });
+      await page.setContent(p.html);
+      await page.waitForLoadState(p.wait);
+      await page.evaluate(() => document.fonts.ready);
+      await page.screenshot({ path: path.join(dir, name), omitBackground: false });
+      await page.close();
+      manifest[name] = { page: pageHash(p), png: sha256(fs.readFileSync(path.join(dir, name))) };
+    }
   } finally { await browser.close(); }
+  fs.writeFileSync(path.join(dir, PNG_MANIFEST), JSON.stringify(manifest, null, 2) + '\n');
 }
 
 // { filename: text } for every SVG variant. Pure given the source and the colours.
@@ -84,33 +139,21 @@ function brandFiles(src, colors) {
   const mono = '#000000';
   return {
     'mark-light.svg': markFile(parts, { ink: colors.ink, dot: colors.accent, label: 'logo' }),
-    'mark-dark.svg': markFile(parts, { ink: NIGHT_INK, dot: colors.accent, label: 'logo' }),
+    'mark-dark.svg': markFile(parts, { ink: colors.bgDeep, dot: colors.accent, label: 'logo' }),
     'mark-mono.svg': markFile(parts, { ink: mono, dot: mono, label: 'logo' }),
     'mark-body.svg': markFile(parts, { ink: mono, dot: mono, only: ['ring', 'disc'] }),
     'mark-dot.svg': markFile(parts, { ink: mono, dot: mono, only: ['dot'] }),
-    'favicon.svg': faviconSvg({ ink: colors.ink, accent: colors.accent }, src) + '\n',
+    'favicon.svg': faviconSvg({ ink: colors.ink, accent: colors.accent, night: colors.bgDeep }, src) + '\n',
   };
 }
 
-async function renderTouchIcon(dir, colors) {
-  const { launchBrowser } = require('../../modules/ui-design/kit/lib'); // eslint-disable-line global-require
-  const svg = fs.readFileSync(path.join(dir, 'mark-light.svg'), 'utf8');
-  const browser = await launchBrowser();
-  try {
-    const page = await browser.newPage({ viewport: { width: 180, height: 180 }, deviceScaleFactor: 1 });
-    await page.setContent(`<html><body style="margin:0;background:${colors.bg}">` +
-      `<img src="data:image/svg+xml;base64,${Buffer.from(svg).toString('base64')}" style="display:block;width:128px;height:128px;margin:26px">` +
-      '</body></html>');
-    await page.waitForLoadState('load');
-    await page.screenshot({ path: path.join(dir, 'apple-touch-icon.png'), omitBackground: false });
-  } finally { await browser.close(); }
-}
-
 async function main() {
   const args = process.argv.slice(2);
   const dir = brandDir();
-  const colors = packColors();
+  const pack = readPack();
+  const colors = pack.theme.ui.colors;
   const files = brandFiles(readMarkSource({ root: ROOT }), colors);
+  const pages = pngPages(files, pack);
   const stale = [];
   for (const [name, text] of Object.entries(files)) {
     const file = path.join(dir, name);
@@ -120,11 +163,14 @@ async function main() {
     if (!args.includes('--check')) fs.writeFileSync(file, text);
   }
   if (args.includes('--check')) {
-    if (stale.length) { process.stderr.write(`gen-brand: stale — ${stale.join(', ')}. Run: node scripts/bongos/gen-brand.js\n`); process.exit(2); }
-    process.stdout.write('gen-brand: the logo and favicon set match mark.svg\n');
+    const pngs = stalePngs(dir, pages);
+    if (stale.length) process.stderr.write(`gen-brand: stale — ${stale.join(', ')}. Run: node scripts/bongos/gen-brand.js\n`);
+    if (pngs.length) process.stderr.write(`gen-brand: stale PNG — ${pngs.join('; ')}. Run: node scripts/bongos/gen-brand.js --png\n`);
+    if (stale.length || pngs.length) process.exit(2);
+    process.stdout.write('gen-brand: the logo and favicon set match mark.svg, and the PNGs match their sources\n');
     return;
   }
-  if (args.includes('--png')) { await renderTouchIcon(dir, colors); await renderOgCard(dir); }
+  if (args.includes('--png')) await renderPngs(dir, pages);
   process.stdout.write(`gen-brand: ${stale.length ? `wrote ${stale.join(', ')}` : 'nothing to write'}${args.includes('--png') ? ' + apple-touch-icon.png + og-card.png' : ''}\n`);
 }
 

package/scripts/status-mirror-sync.js

@@ -12,7 +12,10 @@
 // outage resilience (ADR 0029) from a SEPARATE repo. Before this script there
 // was no sync, so every change to the status surface silently missed the live page
 // (that's how #726's reorg + #731's theming never showed up). This makes the
-// publish deterministic and CI-driven.
+// publish deterministic. It is NOT CI-driven: no workflow in .github/workflows/ runs
+// it (there is no sync-status-mirror.yml in this repo), so a status-surface change reaches the
+// off-box page only when someone runs this by hand with a mirror checkout — see USAGE
+// and docs/recipes/ops-gotchas.md (task 1005131 / task 1005133).
 //
 // CONFIG (task 1002510 — no host identity is baked in here; ADR 0062 §3):
 //   domains.publicOrigin  — the origin the mirror calls cross-origin

package/src/bongos/routes/auth.js

@@ -51,7 +51,7 @@ const { escapeHtml } = require('../../html-escape'); // the one server escaper (
 // the browser-approved device flow the CLI gets when Google is offered.
 const { googleConfigured } = require('../auth-google');
 const { startBrowserDeviceFlow, isBrowserDeviceCode, pollBrowserDeviceFlow } = require('../device-approval');
-const { renderSignInChooser } = require('../sign-in-pages');
+const { renderSignInChooser, signInHead } = require('../sign-in-pages');
 
 // Render a small standalone HTML page in the builders' hall palette. Used for
 // OAuth error branches so the visitor sees something coherent rather than a
@@ -103,10 +103,7 @@ function renderAuthErrorPage(heading, detail, opts = {}) {
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>${escapeHtml(worldName)} — ${escapeHtml(copy.titleSuffix)}</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=EB+Garamond:ital,wght@0,400;0,500&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="/builders/style.css">
+${signInHead()}
 </head><body>
 <header class="hall">
   <p class="hall__epigraph">${escapeHtml(copy.epigraph)}</p>
@@ -167,10 +164,7 @@ function renderAccessPendingPage(login, startHref) {
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>${escapeHtml(worldName)} — confirming access</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=EB+Garamond:ital,wght@0,400;0,500&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="/builders/style.css">
+${signInHead()}
 </head><body>
 <header class="hall">
   <p class="hall__epigraph">${escapeHtml(epigraph)}</p>
@@ -1494,6 +1488,7 @@ module.exports.webRedirectOrigin = () => WEB_REDIRECT_ORIGIN;
 // The auth-error page renderer (task 1439): pure over the branding pack, so a
 // test can prove every visible string is brand-owned (no OTB lore baked in).
 module.exports.renderAuthErrorPage = renderAuthErrorPage;
+module.exports.renderAccessPendingPage = renderAccessPendingPage;
 // The admitting-rank label for per-branch strings (task 1002616) — exported for
 // the same reason: the test proves the label is pack-owned, never "Archon".
 module.exports.admitterLabel = admitterLabel;

package/src/bongos/serve-internal.js

@@ -44,7 +44,7 @@ const { buildStampedHtml, hashFile } = require('../asset-version');
 const { buildInfo } = require('../build-info');
 const { buildBongosDownloads, installScriptReader } = require('../bongos-downloads');
 const { clientBranding, branding, applyBrandConditionals } = require('../branding');
-const { nightTintCss } = require('../night-tint');
+const { themeMarkup } = require('../theme-markup');
 const { linkPreviewTags } = require('../link-preview');
 const { prelaunchGate } = require('./prelaunch-gate');
 const { platformVisibilityGate } = require('./platform-visibility-gate');
@@ -84,75 +84,10 @@ function tryLoadInstanceConfig(name, roots = [resolveInstanceRoot(), ROOT]) {
   return null;
 }
 
-// Map the pack's camelCase theme color keys → the kebab-case CSS custom
-// properties the hall/status stylesheets read (public-{builders,status}/style.css
-// :root). R57 (task 1196).
-const COLOR_VARS = {
-  bg: '--bg', bgCard: '--bg-card', bgDeep: '--bg-deep', bgFrame: '--bg-frame',
-  ink: '--ink', inkSoft: '--ink-soft', inkFaint: '--ink-faint',
-  rule: '--rule', ruleSoft: '--rule-soft',
-  accent: '--accent', accentDeep: '--accent-deep', sea: '--sea', terracotta: '--terracotta',
-};
-
-// Build the THEME markup for a served page from the client-safe pack's theme:
-// a <style> overriding the :root palette + font-family vars, the web-font <link>s,
-// and the favicon <link>. Returns '' when the pack carries no theme (so a pack
-// without a `theme.ui` block is a no-op and the stylesheet's own defaults stand).
-// The <style> is emitted so it lands AFTER the page's own stylesheet <link>
-// (which sits earlier in <head>) — equal specificity, later wins — making the
-// pack authoritative over style.css. For OTB the values equal style.css's
-// parchment defaults, so the render is byte-identical; a neutral instance gets
-// its plain palette + system fonts. R57 (task 1196, ADR 0062 §3).
-function themeMarkup(theme) {
-  if (!theme) return '';
-  const decls = [];
-  for (const [key, cssVar] of Object.entries(COLOR_VARS)) {
-    const v = cssSafe(theme.colors?.[key]);
-    if (v) decls.push(`${cssVar}:${v};`);
-  }
-  const display = cssSafe(theme.fonts?.display);
-  if (display) decls.push(`--font-display:${display};`);
-  const body = cssSafe(theme.fonts?.body);
-  if (body) decls.push(`--font-body:${body};`);
-  let out = '';
-  for (const href of theme.fonts?.links || []) {
-    out += `<link rel="stylesheet" href="${esc(href)}">`;
-  }
-  // `backdrop` paints the page background (e.g. the Cloud Bongos sunrise gradient,
-  // ADR 0064 / R74) over the flat var(--bg); omitted packs (OTB) keep --bg.
-  const css = [];
-  if (decls.length) css.push(`:root{${decls.join('')}}`);
-  const backdrop = cssSafe(theme.backdrop);
-  if (backdrop) css.push(`body{background:${backdrop};}`);
-  // The night tint (ADR 0358): a hall wearing a look takes a hint of its accent into
-  // its dark grounds. Written as the sheet's own two dark twins, after the sheet, so
-  // equal specificity wins on order. clientBranding only sets it with a look, so a
-  // hall that chose none keeps the sheet's pure black.
-  if (theme.nightTint === true) css.push(nightTintCss());
-  if (css.length) out += `<style>${css.join('')}</style>`;
-  // esc() is lossless in an attribute: the HTML parser decodes the entities back
-  // before anything reads the URL, so the neutral pack's inline `data:image/svg+xml,
-  // <svg …>` favicon resolves to exactly the same bytes it does today.
-  if (theme.favicon) out += `<link rel="icon" href="${esc(theme.favicon)}">`;
-  if (theme.appleTouchIcon) out += `<link rel="apple-touch-icon" href="${esc(theme.appleTouchIcon)}">`;
-  return out;
-}
-
-// A pack-supplied value on its way into <style> TEXT. esc() is the wrong tool
-// here and would corrupt the output: CSS is not entity-decoded, so a font stack
-// like `"Cinzel", serif` would reach the browser as `&quot;Cinzel&quot;, serif`
-// and simply not parse. There is no encoding that both survives CSS and
-// neutralizes markup, so this fails closed instead. The only way out of a <style>
-// element is a literal `</style`, every route to it begins with `<`, and no
-// colour, font stack, or backdrop has a legitimate use for one — so a value
-// carrying `<` is dropped whole rather than emitted half-escaped. Dropping one
-// declaration loses that pack's colour and falls back to style.css's default;
-// emitting it loses the page.
-function cssSafe(v) {
-  const s = String(v == null ? '' : v);
-  return s.includes('<') ? '' : s;
-}
-
+// The pack's THEME markup (the :root palette + faces <style>, the font links, the
+// favicon) is built by src/theme-markup.js, so a page rendered outside this file —
+// the sign-in screens — gets the identical splice without requiring the server
+// (task 1005135). Re-exported below for every caller that already reads it here.
 // Serialize a pack value for injection INSIDE a <script> element. JSON.stringify
 // alone is not enough: its output is valid JSON, but the browser reads a script
 // body as raw text FIRST, so a `</script>` anywhere in the pack ends the element

package/src/bongos/sign-in-pages.js

@@ -10,8 +10,9 @@
 // auth error page in routes/auth.js, so every sign-in screen reads as one place.
 'use strict';
 
-const { branding } = require('../branding');
+const { branding, clientBranding } = require('../branding');
 const { escapeHtml } = require('../html-escape');
+const { themeMarkup } = require('../theme-markup');
 
 const GITHUB_MARK = '<svg aria-hidden="true" width="18" height="18" viewBox="0 0 16 16" style="vertical-align:-3px;margin-right:8px"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 .4 .07 .55-.17 .55-.38 0-.19-.01-.82-.01-1.49-2.01 .37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53 .63-.01 1.08 .58 1.23 .82 .72 1.21 1.87 .87 2.33 .66 .07-.52 .28-.87 .51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87 .31-1.59 .82-2.15-.08-.2-.36-1.02 .08-2.12 0 0 .67-.21 2.2 .82 .64-.18 1.32-.27 2-.27 .68 0 1.36 .09 2 .27 1.53-1.04 2.2-.82 2.2-.82 .44 1.1 .16 1.92 .08 2.12 .51 .56 .82 1.27 .82 2.15 0 3.07-1.87 3.75-3.65 3.95 .29 .25 .54 .73 .54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21 .15 .46 .55 .38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>';
 const GOOGLE_MARK = '<svg aria-hidden="true" width="18" height="18" viewBox="0 0 48 48" style="vertical-align:-3px;margin-right:8px"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>';
@@ -20,7 +21,22 @@ function worldName() {
   try { return branding().identity?.worldName || 'Sign in'; } catch { return 'Sign in'; }
 }
 
-// One page shell: the hall stylesheet, a header, and a body the caller built
+// The look every sign-in screen shares (task 1005135): the hall stylesheet, then
+// the pack's own palette, faces and favicon, spliced exactly as every served page
+// gets them (src/theme-markup.js, the same splice serve-internal applies). The pack's faces are the only faces;
+// these pages once loaded a retired pair of inscription faces on top of the hall sheet. The
+// header and main are lifted over the hall's fixed plate veil (body::after, black in
+// dark), which otherwise dims the whole page — the hall lifts its shell the same way.
+// A branding hiccup degrades to the hall sheet's own neutral values, never a crash.
+function signInHead() {
+  let theme = '';
+  try { theme = themeMarkup(clientBranding().theme); } catch { theme = ''; }
+  return `<link rel="stylesheet" href="/builders/style.css">
+${theme}
+<style>body > header, body > main { position: relative; z-index: 1; } body > header.hall { padding: var(--ds-space-md) var(--ds-space-gutter-narrow) 0; } body > main { padding: var(--ds-space-sm) var(--ds-space-gutter-narrow) var(--ds-space-xl); }</style>`;
+}
+
+// One page shell: the shared head, a header, and a body the caller built
 // (already escaped). Never a script: these pages work with forms and links alone.
 function renderPage({ title, heading, subtitle, bodyHtml }) {
   return `<!doctype html>
@@ -29,7 +45,7 @@ function renderPage({ title, heading, subtitle, bodyHtml }) {
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="referrer" content="no-referrer">
 <title>${escapeHtml(worldName())} — ${escapeHtml(title)}</title>
-<link rel="stylesheet" href="/builders/style.css">
+${signInHead()}
 <style>
   .signinChoices{display:flex;flex-direction:column;gap:12px;max-width:340px;margin:8px auto 0}
   .signinChoices .landing__btn{display:block;text-align:center}
@@ -154,4 +170,4 @@ ${choiceButtons(view)}
   });
 }
 
-module.exports = { renderSignInChooser, renderExistingAccountHint, renderDeviceApprovalPage };
+module.exports = { renderSignInChooser, renderExistingAccountHint, renderDeviceApprovalPage, signInHead };

package/src/brand-mark.js

@@ -16,7 +16,16 @@ const fs = require('node:fs');
 const path = require('node:path');
 
 // The Night ink: the chrome world's ink on a dark ground, which every dark twin of the mark uses.
-const NIGHT_INK = '#e2e1e4';
+// It is the pack's deep ground (theme.ui.colors.bgDeep in config/branding.neutral.json), read
+// from the pack the core ships rather than typed in here, so a palette change reaches the mark
+// (task 1005133). Read relative to this file: src/ sits in the core root beside config/.
+function readNightInk() {
+  try {
+    const pack = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'config', 'branding.neutral.json'), 'utf8'));
+    return pack.theme.ui.colors.bgDeep || 'currentColor';
+  } catch { return 'currentColor'; }
+}
+const NIGHT_INK = readNightInk();
 // The two custom properties the source colours itself by, exactly as written there.
 const INK_VAR = 'var(--mark-ink,currentColor)';
 const DOT_VAR = 'var(--mark-dot,var(--accent,currentColor))';

package/src/error-page.js

@@ -3,7 +3,9 @@
 // A person who mistypes an address, or lands on a page that broke, used to get a bare
 // "404 — not found" in plain text: the one screen of the product with no product on it.
 // This is that screen in the chrome world: the shared mark, the product name, a heading,
-// one sentence and a way back, on the pack's colours and faces in both modes.
+// one sentence and a way back, on the pack's colours and faces in both modes. The name
+// beside the mark is the pack's productName, shown lowercase (DESIGN.md "Naming"); the
+// colours are the hall sheet's tier, never a block of this page's own (task 1005135).
 //
 // WHO GETS IT: a browser asking for a page. An API-shaped path keeps its JSON (the
 // self-describing 404 of api-path-404.js; the trailing error net answers the R01
@@ -44,24 +46,23 @@ function errorPageTemplate(status, { notFound = 'Page not found.' } = {}) {
 <meta name="robots" content="noindex">
 <title>${escapeHtml(heading)} · {{productName}}</title>
 <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
-<link rel="stylesheet" href="/modules/ui-design/public/tokens.css">
+<!-- The hall's sheet carries the shared scales (tokens.css), the derived colour tier
+     and both dark twins, so this page declares no colour of its own (task 1005135). -->
+<link rel="stylesheet" href="/modules/hall-ui/public/style.css">
 <style>
-/* The fallback contract tier at zero specificity: the pack's spliced :root always wins. */
-:where(html){--bg:#edecee;--bg-card:#fbfafc;--ink:#17181a;--ink-soft:#55565a;--ink-faint:#65656a;--rule-soft:#dcdbdd;--accent:#fb9569;--accent-deep:#a3481a;--font-display:"Manrope","Segoe UI",system-ui,sans-serif;--font-body:"Manrope","Segoe UI",system-ui,sans-serif}
-html{color-scheme:light;--accent-ink:color-mix(in srgb,var(--accent) 45%,#240e00);--focus:color-mix(in srgb,var(--accent-deep) 82%,#3a1400)}
-html[data-theme="dark"]{color-scheme:dark;--bg:#000000;--bg-card:#101012;--ink:#ffffff;--ink-soft:#c0c0c0;--ink-faint:#a8a8a8;--rule-soft:rgba(255,255,255,.08);--accent-ink:var(--accent);--focus:var(--accent)}
-@media (prefers-color-scheme:dark){html:not([data-theme]){color-scheme:dark;--bg:#000000;--bg-card:#101012;--ink:#ffffff;--ink-soft:#c0c0c0;--ink-faint:#a8a8a8;--rule-soft:rgba(255,255,255,.08);--accent-ink:var(--accent);--focus:var(--accent)}}
 *{box-sizing:border-box}
 body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--ds-text-2xl,17px);line-height:1.5}
+header,main{position:relative;z-index:1}
 header{display:flex;align-items:center;gap:var(--ds-space-xs,10px);min-height:56px;padding:0 var(--ds-space-gutter-narrow,20px);border-bottom:var(--ds-line,1px) solid var(--rule-soft)}
 .mark{width:28px;height:28px;--mark-ink:var(--ink)}
-.name{font-family:var(--font-display);font-size:var(--ds-text-xl,16px);font-weight:500;color:var(--ink);text-decoration:none}
+.name{font-family:var(--font-display);font-size:var(--ds-text-lg,15px);font-weight:300;letter-spacing:-.01em;text-transform:lowercase;color:var(--ink);text-decoration:none}
 main{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--ds-space-xl,52px) var(--ds-space-gutter-narrow,20px)}
 .card{max-width:34rem}
-.code{margin:0 0 var(--ds-space-sm,14px);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:var(--ds-text-2xs,11px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
+.code{margin:0 0 var(--ds-space-sm,14px);font-family:var(--font-mono);font-size:var(--ds-text-2xs,11px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
 h1{margin:0 0 var(--ds-space-sm,14px);font-family:var(--font-display);font-size:var(--ds-text-headline,clamp(26px,3.1vw,42px));font-weight:300;line-height:1.06;letter-spacing:-.035em}
 p.sub{margin:0 0 var(--ds-space-md,22px);color:var(--ink-soft)}
-a.back{display:inline-flex;align-items:center;min-height:46px;padding:0 var(--ds-space-md,22px);border-radius:var(--ds-radius-pill,999px);background:var(--accent);color:#2a1305;font-weight:500;text-decoration:none}
+a.back{display:inline-flex;align-items:center;min-height:46px;padding:0 var(--ds-space-md,22px);border-radius:var(--ds-radius-pill,999px);background:var(--accent);color:var(--accent-on);font-weight:500;text-decoration:none}
+a.back:hover{background:var(--accent-lift);text-decoration:none}
 a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 8px var(--bg)}
 </style>
 </head>

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.58'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.24.60'; // 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/src/theme-markup.js

@@ -0,0 +1,81 @@
+// src/theme-markup.js — the branding pack's THEME markup for a served page (R57, task
+// 1196, ADR 0062 §3). Moved out of src/bongos/serve-internal.js (which re-exports it)
+// so a page built outside the server's HTML maps — the sign-in screens in
+// src/bongos/sign-in-pages.js — splices the pack exactly as every other page does,
+// without requiring the server module that mounts the routes that render it
+// (task 1005135). Pure over its input.
+'use strict';
+
+const { escapeHtml: esc } = require('./html-escape');
+const { nightTintCss } = require('./night-tint');
+
+// Map the pack's camelCase theme color keys → the kebab-case CSS custom
+// properties the hall/status stylesheets read (public-{builders,status}/style.css
+// :root). R57 (task 1196).
+const COLOR_VARS = {
+  bg: '--bg', bgCard: '--bg-card', bgDeep: '--bg-deep', bgFrame: '--bg-frame',
+  ink: '--ink', inkSoft: '--ink-soft', inkFaint: '--ink-faint',
+  rule: '--rule', ruleSoft: '--rule-soft',
+  accent: '--accent', accentDeep: '--accent-deep', sea: '--sea', terracotta: '--terracotta',
+};
+
+// Build the THEME markup for a served page from the client-safe pack's theme:
+// a <style> overriding the :root palette + font-family vars, the web-font <link>s,
+// and the favicon <link>. Returns '' when the pack carries no theme (so a pack
+// without a `theme.ui` block is a no-op and the stylesheet's own defaults stand).
+// The <style> is emitted so it lands AFTER the page's own stylesheet <link>
+// (which sits earlier in <head>) — equal specificity, later wins — making the
+// pack authoritative over style.css. For OTB the values equal style.css's
+// parchment defaults, so the render is byte-identical; a neutral instance gets
+// its plain palette + system fonts. R57 (task 1196, ADR 0062 §3).
+function themeMarkup(theme) {
+  if (!theme) return '';
+  const decls = [];
+  for (const [key, cssVar] of Object.entries(COLOR_VARS)) {
+    const v = cssSafe(theme.colors?.[key]);
+    if (v) decls.push(`${cssVar}:${v};`);
+  }
+  const display = cssSafe(theme.fonts?.display);
+  if (display) decls.push(`--font-display:${display};`);
+  const body = cssSafe(theme.fonts?.body);
+  if (body) decls.push(`--font-body:${body};`);
+  let out = '';
+  for (const href of theme.fonts?.links || []) {
+    out += `<link rel="stylesheet" href="${esc(href)}">`;
+  }
+  // `backdrop` paints the page background (e.g. the Cloud Bongos sunrise gradient,
+  // ADR 0064 / R74) over the flat var(--bg); omitted packs (OTB) keep --bg.
+  const css = [];
+  if (decls.length) css.push(`:root{${decls.join('')}}`);
+  const backdrop = cssSafe(theme.backdrop);
+  if (backdrop) css.push(`body{background:${backdrop};}`);
+  // The night tint (ADR 0358): a hall wearing a look takes a hint of its accent into
+  // its dark grounds. Written as the sheet's own two dark twins, after the sheet, so
+  // equal specificity wins on order. clientBranding only sets it with a look, so a
+  // hall that chose none keeps the sheet's pure black.
+  if (theme.nightTint === true) css.push(nightTintCss());
+  if (css.length) out += `<style>${css.join('')}</style>`;
+  // esc() is lossless in an attribute: the HTML parser decodes the entities back
+  // before anything reads the URL, so the neutral pack's inline `data:image/svg+xml,
+  // <svg …>` favicon resolves to exactly the same bytes it does today.
+  if (theme.favicon) out += `<link rel="icon" href="${esc(theme.favicon)}">`;
+  if (theme.appleTouchIcon) out += `<link rel="apple-touch-icon" href="${esc(theme.appleTouchIcon)}">`;
+  return out;
+}
+
+// A pack-supplied value on its way into <style> TEXT. esc() is the wrong tool
+// here and would corrupt the output: CSS is not entity-decoded, so a font stack
+// like `"Cinzel", serif` would reach the browser as `&quot;Cinzel&quot;, serif`
+// and simply not parse. There is no encoding that both survives CSS and
+// neutralizes markup, so this fails closed instead. The only way out of a <style>
+// element is a literal `</style`, every route to it begins with `<`, and no
+// colour, font stack, or backdrop has a legitimate use for one — so a value
+// carrying `<` is dropped whole rather than emitted half-escaped. Dropping one
+// declaration loses that pack's colour and falls back to style.css's default;
+// emitting it loses the page.
+function cssSafe(v) {
+  const s = String(v == null ? '' : v);
+  return s.includes('<') ? '' : s;
+}
+
+module.exports = { themeMarkup };

package/tests/brand_mark.mjs

@@ -100,7 +100,7 @@ test('the brand folder holds exactly what gen-brand.js writes from the source (l
   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.match(files['mark-dark.svg'], new RegExp(c.bgDeep), 'the dark logo is drawn in the pack\'s Night ink (bgDeep)');
   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'));
@@ -193,3 +193,13 @@ test('one favicon: every page fallback and the pack point at favicon.svg; a look
   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');
 });
+
+// task 1005133: the Night ink every dark twin of the mark uses is the pack's bgDeep, read
+// from config/branding.neutral.json — not a hex typed into src/brand-mark.js.
+test('the Night ink comes from the brand pack, not a typed-in colour', () => {
+  const { NIGHT_INK, faviconSvg } = require('../src/brand-mark.js');
+  const pack = JSON.parse(read('config', 'branding.neutral.json'));
+  assert.equal(NIGHT_INK, pack.theme.ui.colors.bgDeep);
+  assert.doesNotMatch(read('src', 'brand-mark.js').replace(/\/\/.*$/gm, ''), /#[0-9a-f]{3,8}\b/i, 'src/brand-mark.js types in no colour');
+  assert.match(faviconSvg({ ink: '#111111', accent: '#222222' }), new RegExp(`--i:${pack.theme.ui.colors.bgDeep}`), 'a looked favicon\'s night twin');
+});

package/tests/brand_surfaces.mjs

@@ -144,7 +144,7 @@ test('a page route that throws answers the branded 500 to a browser and JSON to
   assert.ok(errorPageTemplate(404, { notFound: 'Gone.' }).includes('<h1>Gone.</h1>'));
 });
 
-test('the error page and the docs write their dark tier twice, byte-identical', () => {
+test('the docs write their dark tier twice, byte-identical; the error page writes none of its own', () => {
   const twins = (src) => {
     const a = src.match(/html\[data-theme="dark"\]\s*\{([^}]*)\}/);
     const b = src.match(/@media \(prefers-color-scheme:\s*dark\)\s*\{\s*html:not\(\[data-theme\]\)\s*\{([^}]*)\}/);
@@ -152,7 +152,10 @@ test('the error page and the docs write their dark tier twice, byte-identical',
     const norm = (s) => s.replace(/\s+/g, ' ').trim();
     assert.equal(norm(b[1]), norm(a[1]));
   };
-  twins(errorPageTemplate(404));
+  // the error page takes its colours and both dark twins from the hall's sheet (task 1005135)
+  const ep = errorPageTemplate(404);
+  assert.ok(ep.includes('<link rel="stylesheet" href="/modules/hall-ui/public/style.css">'), 'the error page loads the shared sheet');
+  assert.doesNotMatch(ep, /data-theme="dark"|prefers-color-scheme/, 'no private dark tier');
   twins(fs.readFileSync(path.join(ROOT, 'public-docs', 'index.html'), 'utf8'));
 });