@bongos/core 1.24.48 → 1.24.49

package/scripts/bongos/gen-brand.js

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+'use strict';
+// gen-brand.js — the logo and favicon set, written from the one mark (task 1005088).
+//
+// The mark's one source is a shipped module's public/brand/mark.svg (src/brand-mark.js finds
+// it). Pages that can colour it themselves reference it with <use>; everything that cannot —
+// an <img>, a CSS mask, a browser tab, a home-screen icon — gets a fixed-colour file written
+// here, beside the source, in the neutral pack's colours (config/branding.neutral.json):
+//
+//   mark-light.svg   the mark in Ink with the accent moon (light grounds)
+//   mark-dark.svg    the mark in the Night ink with the accent moon (dark grounds)
+//   mark-mono.svg    the whole mark in one ink (black), for a print or a stamp
+//   mark-body.svg    the ring and planet only, one ink   (the loaders' mask shapes:
+//   mark-dot.svg     the moon only, one ink               the ring breathes, the moon turns)
+//   favicon.svg      the small cut, Ink by day and the Night ink by night
+//   apple-touch-icon.png  180x180, the light mark on the pack's ground (--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.
+//
+// Usage:
+//   node scripts/bongos/gen-brand.js          # write the SVG variants
+//   node scripts/bongos/gen-brand.js --png    # … and render apple-touch-icon.png
+//   node scripts/bongos/gen-brand.js --check  # write nothing; exit 2 if a variant is stale
+
+const fs = require('node:fs');
+const path = require('node:path');
+const { NIGHT_INK, readMarkSource, markParts, markFile, faviconSvg } = require('../../src/brand-mark');
+
+const ROOT = path.resolve(__dirname, '..', '..');
+
+function brandDir() {
+  const modulesDir = path.join(ROOT, 'modules');
+  const hit = fs.readdirSync(modulesDir).sort()
+    .map((m) => path.join(modulesDir, m, 'public', 'brand'))
+    .find((d) => fs.existsSync(path.join(d, 'mark.svg')));
+  if (!hit) throw new Error('no module ships public/brand/mark.svg');
+  return hit;
+}
+
+function packColors() {
+  const pack = JSON.parse(fs.readFileSync(path.join(ROOT, 'config', 'branding.neutral.json'), 'utf8'));
+  return pack.theme.ui.colors;
+}
+
+// { filename: text } for every SVG variant. Pure given the source and the colours.
+function brandFiles(src, colors) {
+  const parts = markParts(src);
+  if (!parts) throw new Error('mark.svg is missing #mark-ring, #mark-disc or #mark-dot');
+  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-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',
+  };
+}
+
+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 files = brandFiles(readMarkSource({ root: ROOT }), colors);
+  const stale = [];
+  for (const [name, text] of Object.entries(files)) {
+    const file = path.join(dir, name);
+    const cur = fs.existsSync(file) ? fs.readFileSync(file, 'utf8') : null;
+    if (cur === text) continue;
+    stale.push(name);
+    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');
+    return;
+  }
+  if (args.includes('--png')) await renderTouchIcon(dir, colors);
+  process.stdout.write(`gen-brand: ${stale.length ? `wrote ${stale.join(', ')}` : 'nothing to write'}${args.includes('--png') ? ' + apple-touch-icon.png' : ''}\n`);
+}
+
+if (require.main === module) main().catch((e) => { process.stderr.write(`${e.message}\n`); process.exit(1); });
+
+module.exports = { brandFiles, packColors };

package/scripts/gds/gen-brand.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+// scripts/gds/gen-brand.js — @bongos-forwarder (task 1004848). Generated by
+// scripts/bongos/codemod-rename-scripts-gds.js; do not edit.
+// The real script is scripts/bongos/gen-brand.js. This forwarder keeps callers that still name
+// the old path working, and warns once so they get repointed. Task 1003706 removes it.
+'use strict';
+require('../bongos/forwarder.js').forward(module, 'gen-brand.js');

package/src/bongos/platform-visibility-gate.js

@@ -179,6 +179,9 @@ function relativeReturn(raw) {
 
 // The one server escaper (task 1004876); it also escapes ' , which this copy did not.
 const { escapeHtml: escAttr } = require('../html-escape');
+// The mark, inlined from its one source (task 1005088) so the door still loads nothing;
+// coloured by .mark's --mark-ink / --mark-dot below.
+const { markSvg } = require('../brand-mark');
 
 // The door. Self-contained on purpose (the pre-launch gate's shape): it is
 // served to someone who may not see the project, so it pulls no stylesheet, no
@@ -198,8 +201,8 @@ body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;
   background:#edecee;color:#17181a}
 @media(prefers-color-scheme:dark){body{background:#000000;color:#ffffff}}
 .box{width:min(380px,100%);text-align:center}
-.mark{display:block;width:48px;height:48px;margin:0 auto 22px}
-@media(prefers-color-scheme:dark){.mark .mr{stroke:#e2e1e4}.mark .mp{fill:#e2e1e4}}
+.mark{display:block;width:48px;height:48px;margin:0 auto 22px;--mark-ink:#17181a;--mark-dot:#fb9569}
+@media(prefers-color-scheme:dark){.mark{--mark-ink:#e2e1e4}}
 h1{font-size:20px;font-weight:700;margin:0 0 6px}
 p{margin:0 0 20px;opacity:.72;font-size:14px}
 /* dark ink on the accent fill: the chrome world's salmon carries white at 2.19:1 */
@@ -207,7 +210,7 @@ a.btn{display:inline-block;padding:11px 22px;border-radius:999px;background:#fb9
   font:700 14px/1 inherit;text-decoration:none}
 a.btn:focus{outline:2px solid #a3481a;outline-offset:2px}
 </style></head><body><div class="box">
-<svg class="mark" viewBox="0 0 200 200" aria-hidden="true"><path class="mr" d="M137 31 A78 78 0 1 0 170 66" fill="none" stroke="#17181a" stroke-width="15" stroke-linecap="round"/><circle class="mp" cx="100" cy="100" r="55" fill="#17181a"/><circle cx="156" cy="46" r="12" fill="#fb9569"/></svg>
+${markSvg({ className: 'mark' })}
 <h1>${safe}</h1>
 <p>This project’s pages are open to its members. Sign in to continue.</p>
 <a class="btn" href="${escAttr(signIn)}">Sign in</a>

package/src/bongos/prelaunch-gate.js

@@ -180,6 +180,9 @@ function relativeReturn(raw) {
 
 // The one server escaper (task 1004876); it also escapes ' , which this copy did not.
 const { escapeHtml: escAttr } = require('../html-escape');
+// The mark, inlined from its one source (task 1005088) so the form still loads nothing;
+// coloured by .mark's --mark-ink / --mark-dot below.
+const { markSvg } = require('../brand-mark');
 
 // The form. Self-contained and token-free on purpose: it is served BEFORE the
 // visitor is allowed to see anything, so it must not pull the branding bundle,
@@ -198,8 +201,8 @@ body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;
   background:#edecee;color:#17181a}
 @media(prefers-color-scheme:dark){body{background:#000000;color:#ffffff}}
 .box{width:min(380px,100%);text-align:center}
-.mark{display:block;width:48px;height:48px;margin:0 auto 22px}
-@media(prefers-color-scheme:dark){.mark .mr{stroke:#e2e1e4}.mark .mp{fill:#e2e1e4}}
+.mark{display:block;width:48px;height:48px;margin:0 auto 22px;--mark-ink:#17181a;--mark-dot:#fb9569}
+@media(prefers-color-scheme:dark){.mark{--mark-ink:#e2e1e4}}
 h1{font-size:20px;font-weight:700;margin:0 0 6px}
 p{margin:0 0 20px;opacity:.72;font-size:14px}
 form{display:flex;gap:8px}
@@ -213,7 +216,7 @@ button{padding:11px 20px;border:0;border-radius:999px;background:#fb9569;color:#
 .err{margin:14px 0 0;color:#b3261e;font-size:13.5px}
 @media(prefers-color-scheme:dark){.err{color:#ffb4a8}}
 </style></head><body><div class="box">
-<svg class="mark" viewBox="0 0 200 200" aria-hidden="true"><path class="mr" d="M137 31 A78 78 0 1 0 170 66" fill="none" stroke="#17181a" stroke-width="15" stroke-linecap="round"/><circle class="mp" cx="100" cy="100" r="55" fill="#17181a"/><circle cx="156" cy="46" r="12" fill="#fb9569"/></svg>
+${markSvg({ className: 'mark' })}
 <h1>${name}</h1>
 <p>Not open to the world yet. Enter the password to have a look.</p>
 <form method="POST" action="${SUBMIT_PATH}">

package/src/bongos/serve-internal.js

@@ -133,6 +133,7 @@ function themeMarkup(theme) {
   // 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;
 }
 

package/src/brand-mark.js

@@ -0,0 +1,96 @@
+// src/brand-mark.js — the Bongos mark for the server, read from its one source (task 1005088).
+//
+// The ring-and-dot mark lives in exactly one file, a shipped module's public/brand/mark.svg.
+// A browser page draws it by reference (<use href="…/brand/mark.svg#mark">); the server needs
+// the markup itself in two places that load nothing — the pre-launch and members-only gates,
+// which are self-contained on purpose — and in a looked hall's favicon, drawn in the look's own
+// colours. This file reads that source and hands those out, and scripts/bongos/gen-brand.js
+// writes the static variants (light, dark, mono, the favicon) from the same functions.
+//
+// The source is found by its SHAPE — any shipped module's public/brand/mark.svg — never by a
+// module key, which core may not name (ADR 0083 §Decision #4), as src/hall-look.js finds the
+// style library. PURE given the source text; the default reader is the only I/O.
+'use strict';
+
+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';
+// 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))';
+// The favicon cut: at 16px the display weights blur, so the tab icon draws a heavier ring, a
+// slightly smaller planet and a larger moon. Same geometry, other weights.
+const SMALL_CUT = { ring: { 'stroke-width': '24' }, disc: { r: '50' }, dot: { r: '18' } };
+
+let _source = null;
+function findSource(root) {
+  const base = root || require('./instance-config').resolveCoreRoot(); // eslint-disable-line global-require
+  const modulesDir = path.join(base, 'modules');
+  return fs.readdirSync(modulesDir).sort()
+    .map((m) => path.join(modulesDir, m, 'public', 'brand', 'mark.svg'))
+    .find((f) => fs.existsSync(f)) || null;
+}
+// The source text, read once. null when no shipped module carries it.
+function readMarkSource({ root } = {}) {
+  if (_source !== null && !root) return _source;
+  let text = '';
+  try { const file = findSource(root); text = file ? fs.readFileSync(file, 'utf8') : ''; } catch { text = ''; }
+  if (!root) _source = text;
+  return text;
+}
+
+// The three parts as the source writes them, ids dropped (an inline copy must not collide
+// with the source's ids on a page). null when the source is missing or misshapen.
+function markParts(src = readMarkSource()) {
+  const pick = (id) => {
+    const m = String(src || '').match(new RegExp(`<(path|circle)\\s+id="mark-${id}"([^>]*?)\\s*/>`));
+    return m ? `<${m[1]}${m[2]}/>` : null;
+  };
+  const parts = { ring: pick('ring'), disc: pick('disc'), dot: pick('dot') };
+  return parts.ring && parts.disc && parts.dot ? parts : null;
+}
+
+function setAttrs(el, attrs) {
+  let out = el;
+  for (const [k, v] of Object.entries(attrs || {})) out = out.replace(new RegExp(`\\s${k}="[^"]*"`), ` ${k}="${v}"`);
+  return out;
+}
+
+// The parts' markup with the two colours set: each a CSS value (a hex, or a var()).
+function partsMarkup(parts, { ink = INK_VAR, dot = DOT_VAR, cut = null, only = null } = {}) {
+  const names = only || ['ring', 'disc', 'dot'];
+  return names.map((n) => setAttrs(parts[n], cut && cut[n]).split(INK_VAR).join(ink).split(DOT_VAR).join(dot)).join('');
+}
+
+// The mark as inline markup for a server-rendered page. Coloured by --mark-ink / --mark-dot on
+// the element (or its ancestors), exactly as a page's <use> reference is.
+function markSvg({ className = 'mark', src } = {}) {
+  const parts = markParts(src === undefined ? readMarkSource() : src);
+  if (!parts) return '';
+  return `<svg class="${className}" viewBox="0 0 200 200" aria-hidden="true">${partsMarkup(parts)}</svg>`;
+}
+
+// A standalone SVG file of the mark in fixed colours (the light, dark and mono logos, and the
+// two mask shapes the loaders cut from it).
+function markFile(parts, { ink, dot, only, label = '' } = {}) {
+  const a11y = label ? ` role="img" aria-label="${label}"` : ' aria-hidden="true"';
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"${a11y}>${partsMarkup(parts, { ink, dot, only })}</svg>\n`;
+}
+
+// The favicon: the small cut, in the pack's ink by day and the Night ink by night.
+function faviconSvg({ ink, accent, night = NIGHT_INK }, src = readMarkSource()) {
+  const parts = markParts(src);
+  if (!parts) return '';
+  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">' +
+    `<style>svg{--i:${ink};--d:${accent}}@media (prefers-color-scheme:dark){svg{--i:${night}}}</style>` +
+    partsMarkup(parts, { ink: 'var(--i)', dot: 'var(--d)', cut: SMALL_CUT }) + '</svg>';
+}
+
+// An SVG as a data: URI for a <link rel="icon"> (single quotes, # escaped), or '' for ''.
+function svgDataUri(svg) {
+  return svg ? 'data:image/svg+xml;utf8,' + svg.replace(/"/g, "'").replace(/#/g, '%23') : '';
+}
+
+module.exports = { NIGHT_INK, readMarkSource, markParts, markSvg, markFile, faviconSvg, svgDataUri };

package/src/branding.js

@@ -268,6 +268,8 @@ function clientBranding(b = branding()) {
         links: Array.isArray(ui.fonts?.links) ? ui.fonts.links : [],
       },
       favicon: ui.favicon || '',
+      // the home-screen icon (a 180x180 PNG; task 1005088), '' when the pack names none
+      appleTouchIcon: ui.appleTouchIcon || '',
       backdrop: ui.backdrop || '',
       // The look (ADR 0358): which one this hall wears ('' = its own pack), whether
       // its night is tinted (only ever true with a look), and its logo address.

package/src/hall-look.js

@@ -23,6 +23,7 @@
 
 const fs = require('node:fs');
 const path = require('node:path');
+const { faviconSvg, svgDataUri } = require('./brand-mark');
 
 const HEX = /^#[0-9a-f]{6}$/i;
 const LOOK_NAME = /^[a-z][a-z-]{0,39}$/;
@@ -53,13 +54,10 @@ function readLibraryLook(name, { root } = {}) {
 }
 
 // The favicon a looked hall shows without a logo: the Bongos mark (task 1004846) in the
-// look's own ink with its accent as the moon, and the Night ink twin in dark mode.
+// look's own ink with its accent as the moon, and the Night ink twin in dark mode. Drawn from
+// the mark's one source (task 1005088); the colours are the look's validated hex.
 function lookFavicon(colors) {
-  const c = (k) => encodeURIComponent(colors[k]);
-  return "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>" +
-    `<style>.r{stroke:${c('ink')}}.p{fill:${c('ink')}}@media (prefers-color-scheme:dark){.r{stroke:%23e2e1e4}.p{fill:%23e2e1e4}}</style>` +
-    "<path class='r' d='M137 31A78 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='${c('accent')}'/></svg>`;
+  return svgDataUri(faviconSvg({ ink: colors.ink, accent: colors.accent }));
 }
 
 // What the hall wears: { name, ui } or null for its own pack. PURE given readLook.
@@ -91,8 +89,10 @@ function applyLook(resolved, readLook = readLibraryLook) {
     ui.look = look.name;
     ui.nightTint = project.nightTint !== 'off';
     ui.favicon = lookFavicon(ui.colors);
+    // the home-screen icon is the pack's own colours; a hall in other colours goes without
+    ui.appleTouchIcon = '';
   }
-  if (logo) { ui.logo = logo; ui.favicon = logo; }
+  if (logo) { ui.logo = logo; ui.favicon = logo; ui.appleTouchIcon = ''; }
   resolved.theme.ui = ui;
   return resolved;
 }

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.48'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.24.49'; // 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/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()', () => {