@bongos/core 1.24.47 → 1.24.49

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.47'; // 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/bulk_toolbar.mjs

@@ -196,7 +196,10 @@ test('goals.html no longer borrows work.css, and work.css no longer holds what i
     assert.ok(!new RegExp(`^${sel.replace('.', '\\.')}(\\s|:|,|\\{)`, 'm').test(work), `work.css must not restate ${sel}`);
   }
   const style = read('style.css');
-  for (const sel of ['.claim-count-line', '.wip__release', '.wip__select']) {
+  for (const sel of ['.claim-count-line', '.wip__select']) {
     assert.ok(new RegExp(`^${sel.replace('.', '\\.')} \\{`, 'm').test(style), `style.css carries ${sel}`);
   }
+  // task 1005084: .wip__release is the shared ghost (controls.css); style.css keeps its warning hover
+  assert.match(read('controls.css'), /\.wip__release/, 'the shared sheet draws .wip__release');
+  assert.match(style, /^\.wip__release:hover:not\(:disabled\) \{/m, 'style.css keeps the release\'s warning hover');
 });

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_board_world.mjs

@@ -42,6 +42,7 @@ const HALL = path.join(ROOT, 'modules', 'hall-ui', 'public');
 const read = (f) => fs.readFileSync(path.join(HALL, f), 'utf8');
 
 const styleCss = read('style.css');
+const controlsCss = read('controls.css');
 const workCss = read('work.css');
 const workHtml = read('work.html');
 
@@ -104,7 +105,8 @@ test('a prose link buys BOTH axes — padding for width, negative margin to give
 // ---- 3. the world's own bans ------------------------------------------------
 
 test('nothing on the board paints text white on the accent', () => {
-  const claim = rule(styleCss, '.task__claim');
+  // task 1005084: the claim is the shared primary door, drawn in controls.css
+  const claim = controlsCss.replace(/\/\*[\s\S]*?\*\//g, '').match(/([^{}]*\.task__claim\b[^{}]*)\{([^{}]*background:[^{}]*)\}/)?.[2] ?? null;
   assert.ok(claim, '.task__claim has a rule');
   assert.match(claim, /background:\s*var\(--accent\)/, 'the claim button is the page\'s one accent fill');
   assert.match(claim, /color:\s*var\(--accent-on\)/,
@@ -116,7 +118,9 @@ test('nothing on the board paints text white on the accent', () => {
 });
 
 test('the shared task + bulk-toolbar rules live in style.css (the shared base), not the page-local work.css', () => {
-  for (const sel of ['.task__age', '.task__age--stale', '.task__tag--newcomer', '.task__tag--mine', '.task__tag--rank', '.task__tag--rank-open', '.task__claim', '.task__touches', '.task', '.bulk-toolbar', '.bulk-toolbar__count', '.bulk-toolbar__actions', '.bulk-toolbar__btn', '.bulk-toolbar__clear']) {
+  // .task__claim left for the shared controls.css (task 1005084); work.css still must not restate it
+  assert.equal(rule(workCss, '.task__claim'), null, 'work.css must not restate .task__claim');
+  for (const sel of ['.task__age', '.task__age--stale', '.task__tag--newcomer', '.task__tag--mine', '.task__tag--rank', '.task__tag--rank-open', '.task__touches', '.task', '.bulk-toolbar', '.bulk-toolbar__count', '.bulk-toolbar__actions', '.bulk-toolbar__btn', '.bulk-toolbar__clear']) {
     assert.ok(rule(styleCss, sel), `style.css carries ${sel}, beside .task__tag`);
     assert.equal(rule(workCss, sel), null, `work.css must not restate ${sel}`);
   }

package/tests/hall_builders_page_pass.mjs

@@ -147,10 +147,12 @@ test('A: an older branding pack with no joinability falls back to the apply door
 });
 
 test('A: the quiet fill is a defined variant, not an inline colour', () => {
-  const css = read('style.css');
-  const i = css.indexOf('\n.landing__btn--quiet {');
-  assert.ok(i > 0, 'style.css defines .landing__btn--quiet');
-  const block = css.slice(i, css.indexOf('}', i));
+  // task 1005084: .landing__btn--quiet is the shared ghost in controls.css
+  const css = read('controls.css').replace(/\/\*[\s\S]*?\*\//g, '');
+  const m = css.match(/([^{}]*\.landing__btn--quiet[\s,][^{}]*)\{([^{}]*)\}/);
+  assert.ok(m, 'controls.css defines .landing__btn--quiet');
+  const block = m[2];
+  assert.match(block, /background:\s*transparent/, 'the quiet variant is the ghost');
   assert.deepEqual(block.match(/#[0-9a-f]{3,8}\b/gi) || [], [], 'the variant carries no literal colour');
   // Same geometry as the request button means it inherits .landing__btn's
   // min-height and padding rather than restating them.

package/tests/hall_controls.mjs

@@ -0,0 +1,274 @@
+// tests/hall_controls.mjs — the hall's one button and one field (task 1005084,
+// goal 1000138 "One Cloud Bongos design system").
+//
+// The UI audit counted eight main-button heights and five field styles in the
+// hall. modules/hall-ui/public/controls.css is the one of each that replaced
+// them, and this file is what keeps them one:
+//   * THE IMPORT — style.css pulls the sheet in right after the shared token
+//     sheet, so every hall page gets it and a page sheet can still place a
+//     button (it loads later) without re-drawing it;
+//   * THE SIZES — primary is DESIGN.md's 46–48px door, the row size and the
+//     text button keep the 24px floor, the field clears it;
+//   * CONTRAST, MEASURED — the button's ink on its fill (rest AND hover), the
+//     ghost's and the text button's ink on both grounds, the field's text and
+//     its edge (3:1, WCAG 1.4.11), in both modes, resolved from the real
+//     sheets' tokens the way tests/hall_tokens.mjs does. No white on the salmon;
+//   * THE MIGRATION — every older button name the pages still write sits in the
+//     shared rules, no page sheet re-draws one (its own height, fill, corner or
+//     type size), the dead white-on-salmon setup button stays gone, and the
+//     pages the task named (Goals, Work, the setup screen, Settings) write
+//     names the shared rules own.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules', 'hall-ui', 'public');
+const read = (f) => fs.readFileSync(path.join(HALL, f), 'utf8');
+const decomment = (css) => css.replace(/\/\*[\s\S]*?\*\//g, '');
+
+const styleSrc = read('style.css');
+const controls = decomment(read('controls.css'));
+
+// Every flat rule of a sheet as { sels: [selector…], body }. The hall's sheets
+// nest only @media / @supports, whose inner rules this still reaches (the
+// at-rule's own prelude is dropped by the [^{}] match).
+const rulesOf = (css) => {
+  const out = [];
+  for (const m of decomment(css).matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const sels = m[1].trim().split(/,(?![^(]*\))/).map((s) => s.trim().replace(/\s+/g, ' ')).filter(Boolean);
+    out.push({ sels, body: m[2] });
+  }
+  return out;
+};
+const prop = (body, name) => {
+  const m = body.match(new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`));
+  return m ? m[1].trim() : null;
+};
+// the body of the first controls.css rule whose selector list holds `sel`
+const sharedRule = (sel) => {
+  const r = rulesOf(controls).find((x) => x.sels.includes(sel));
+  assert.ok(r, `controls.css has a rule for ${sel}`);
+  return r.body;
+};
+// the body of the LAST controls.css rule that holds `sel` AND declares `name` —
+// the cascade's answer when the rules are equally specific
+const sharedWith = (sel, name) => {
+  const r = rulesOf(controls).filter((x) => x.sels.includes(sel) && prop(x.body, name) !== null);
+  assert.ok(r.length, `controls.css gives ${sel} a ${name}`);
+  return r[r.length - 1].body;
+};
+const px = (v) => { const m = String(v).match(/^([\d.]+)px$/); return m ? +m[1] : NaN; };
+
+// ── the tokens, resolved (the hall_tokens.mjs resolver, copied: a test file is
+//    not a module) ───────────────────────────────────────────────────────────
+const declarations = (body) => {
+  const out = {};
+  for (const m of decomment(body).matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)) out[m[1]] = m[2].replace(/\s+/g, ' ').trim();
+  return out;
+};
+const bodyAt = (src, open) => {
+  let depth = 0;
+  for (let i = open; i < src.length; i++) {
+    if (src[i] === '{') depth++;
+    else if (src[i] === '}' && --depth === 0) return src.slice(open + 1, i);
+  }
+  throw new Error('unbalanced braces');
+};
+const blockAfter = (src, marker) => {
+  const at = src.indexOf(marker);
+  assert.notEqual(at, -1, `missing ${marker}`);
+  return declarations(bodyAt(src, src.indexOf('{', at)));
+};
+const tokensSrc = fs.readFileSync(path.join(ROOT, 'modules', 'ui-design', 'public', 'tokens.css'), 'utf8');
+const camelToVar = (k) => '--' + k.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
+const PACK = Object.fromEntries(Object.entries(JSON.parse(
+  fs.readFileSync(path.join(ROOT, 'config', 'branding.neutral.json'), 'utf8')).theme.ui.colors)
+  .map(([k, v]) => [camelToVar(k), v]));
+const root = blockAfter(styleSrc, '\n:root {');
+const RAW = {
+  light: { ...blockAfter(tokensSrc, ':root {'), ...root, ...PACK },
+  dark: { ...blockAfter(tokensSrc, ':root {'), ...root, ...PACK, ...blockAfter(styleSrc, 'html[data-theme="dark"] {') },
+};
+
+function resolve(expr, mode, seen = new Set()) {
+  const e = String(expr).trim();
+  if (e === 'transparent') return [0, 0, 0, 0];
+  let m = e.match(/^#([0-9a-f]{6})$/i);
+  if (m) { const n = parseInt(m[1], 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255, 1]; }
+  m = e.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+  if (m) return [+m[1], +m[2], +m[3], m[4] === undefined ? 1 : +m[4]];
+  m = e.match(/^var\(\s*(--[\w-]+)\s*(?:,([\s\S]+))?\)$/);
+  if (m) {
+    assert.ok(!seen.has(m[1]), `cyclic ${m[1]}`);
+    const next = RAW[mode][m[1]] ?? m[2];
+    assert.ok(next !== undefined, `${m[1]} is not defined in ${mode}`);
+    return resolve(next, mode, new Set([...seen, m[1]]));
+  }
+  m = e.match(/^color-mix\(\s*in\s+srgb\s*,\s*([\s\S]+?)\s+([\d.]+)%\s*,\s*([\s\S]+?)\s*\)$/);
+  if (m) {
+    const p = +m[2] / 100, a = resolve(m[1], mode, seen), b = resolve(m[3], mode, seen);
+    const alpha = a[3] * p + b[3] * (1 - p);
+    if (alpha === 0) return [0, 0, 0, 0];
+    return [0, 1, 2].map((i) => (a[i] * a[3] * p + b[i] * b[3] * (1 - p)) / alpha).concat(alpha);
+  }
+  throw new Error(`cannot resolve ${e}`);
+}
+// The ratio is the KIT's own WCAG maths (modules/ui-design/kit/lib.js — what
+// render.js and contrast.js measure with), so "the kit passes AA" is the kit's
+// number, not a second implementation of it.
+const require = createRequire(import.meta.url);
+const kit = require('../modules/ui-design/kit/lib.js');
+const contrast = (fgExpr, bgExpr, mode) => {
+  const ground = resolve(bgExpr, mode);
+  return kit.contrastRatio(kit.composite(resolve(fgExpr, mode), ground), ground);
+};
+// a fill painted on a ground (the ghost's transparent fill is the ground itself)
+const onGround = (fill, ground, mode) => {
+  const f = resolve(fill, mode);
+  return f[3] === 0 ? ground : fill;
+};
+
+// ── 1. the sheet is the hall's ───────────────────────────────────────────────
+
+test('style.css imports controls.css right after the shared token sheet', () => {
+  const imports = [...styleSrc.matchAll(/@import\s+url\("([^"]+)"\)/g)].map((m) => m[1]);
+  const at = imports.indexOf('/modules/ui-design/public/tokens.css');
+  assert.notEqual(at, -1, 'the shared token sheet is still imported');
+  assert.equal(imports[at + 1], 'controls.css', 'the shared button + field come straight after the scales');
+});
+
+// ── 2. the sizes ─────────────────────────────────────────────────────────────
+
+test('primary is the 46–48px pill; the row size and the text button keep the 24px floor', () => {
+  const base = sharedRule('.btn');
+  const h = px(prop(base, 'min-height'));
+  assert.ok(h >= 46 && h <= 48, `.btn is ${h}px — DESIGN.md's door is 46–48px`);
+  assert.equal(prop(base, 'border-radius'), 'var(--radius-pill)', 'pill or nothing (DESIGN.md, Shapes)');
+  assert.match(prop(base, 'border'), /transparent$/, 'the edge is reserved, so a modifier that sets only its colour draws');
+  for (const sel of ['.btn--sm', '.btn--text']) {
+    assert.ok(px(prop(sharedWith(sel, 'min-height'), 'min-height')) >= 24, `${sel} keeps 24px of height`);
+    assert.ok(px(prop(sharedWith(sel, 'min-width'), 'min-width')) >= 24, `${sel} keeps 24px of width`);
+  }
+  const field = sharedRule('select');
+  assert.ok(px(prop(field, 'min-height')) >= 24, 'the field clears the floor');
+  assert.equal(prop(field, 'border-radius'), 'var(--radius-pill)', 'a field is a pill too');
+});
+
+// ── 3. AA, measured, in both modes ───────────────────────────────────────────
+
+for (const mode of ['light', 'dark']) {
+  test(`${mode}: every button and field pair clears AA`, () => {
+    const primary = sharedWith('.btn', 'background');
+    const hover = sharedRule('.btn:hover:not(:disabled)');
+    const ghost = sharedWith('.btn--ghost', 'color');
+    const text = sharedWith('.btn--text', 'color');
+    const field = sharedRule('select');
+    const fieldEdge = prop(field, 'border').replace(/^var\(--line\)\s+solid\s+/, '');
+    for (const ground of ['var(--bg)', 'var(--bg-card)']) {
+      const pairs = [
+        ['primary ink on the accent', prop(primary, 'color'), prop(primary, 'background'), 4.5],
+        ['primary ink on the hover lift', prop(hover, 'color'), prop(hover, 'background'), 4.5],
+        ['ghost ink', prop(ghost, 'color'), onGround(prop(ghost, 'background'), ground, mode), 4.5],
+        ['text-button ink', prop(text, 'color'), ground, 4.5],
+        ['field text', prop(field, 'color'), onGround(prop(field, 'background'), ground, mode), 4.5],
+        ['field edge (WCAG 1.4.11)', fieldEdge, ground, 3],
+      ];
+      for (const [what, fg, bg, floor] of pairs) {
+        const r = contrast(fg, bg, mode);
+        assert.ok(r >= floor, `${mode} ${what} on ${ground}: ${r.toFixed(2)}:1 < ${floor}:1`);
+      }
+    }
+  });
+}
+
+test('no hall sheet puts white ink on an accent fill', () => {
+  const sheets = fs.readdirSync(HALL).filter((f) => f.endsWith('.css'));
+  const hits = [];
+  for (const f of sheets) {
+    for (const { sels, body } of rulesOf(read(f))) {
+      if (!/background(-color)?:\s*var\(--accent\)\s*(;|$)/.test(body)) continue;
+      if (/(^|;)\s*color:\s*(#fff\b|#ffffff\b|white\b)/i.test(body)) hits.push(`${f}: ${sels.join(', ')}`);
+    }
+  }
+  assert.deepEqual(hits, [], 'white on the salmon fails AA and DESIGN.md bans it — --accent-on is the ink');
+});
+
+// ── 4. the migration ─────────────────────────────────────────────────────────
+
+const PRIMARY = ['.btn', '.btn-accent', '.landing__btn', '.task__claim', '.setup-gate__save', '.td-btn--primary', '.pbtn--save', '.craft-save'];
+const GHOST = ['.btn--ghost', '.btn-ghost', '.landing__btn--quiet', '.td-btn', '.wip__release', '.pbtn', '.settings-btn'];
+const SMALL = ['.btn--sm', '.btn-ghost', '.task__claim', '.td-btn', '.wip__release'];
+
+test('every older button name sits in the shared rule it means', () => {
+  const fill = (sel) => {
+    const r = rulesOf(controls).filter((x) => x.sels.includes(sel) && prop(x.body, 'background'));
+    return r.length ? prop(r[0].body, 'background') : null;
+  };
+  for (const sel of PRIMARY) assert.equal(fill(sel), 'var(--accent)', `${sel} is a primary door`);
+  for (const sel of GHOST) assert.equal(fill(sel), 'transparent', `${sel} is a ghost`);
+  for (const sel of SMALL) assert.equal(prop(sharedWith(sel, 'min-height'), 'min-height'), '30px', `${sel} is the row size`);
+  // and the primary-on-a-ghost-base names come AFTER the ghost rule, or the ghost wins on order
+  const list = rulesOf(controls);
+  const ghostAt = list.findIndex((x) => x.sels.includes('.td-btn') && prop(x.body, 'background') === 'transparent');
+  const primaryAt = list.findIndex((x) => x.sels.includes('.td-btn--primary') && prop(x.body, 'background'));
+  assert.ok(primaryAt > ghostAt, '.td-btn--primary follows .td-btn, so the shared order paints it');
+});
+
+test('no page sheet re-draws a shared button or field', () => {
+  const NAMES = [...new Set([...PRIMARY, ...GHOST, '.btn--sm', '.btn--text', '.goal-claim-btn', '.goal-release-btn', '.setup__btn',
+    '.pinput', '.psel', '.cb-reply-input', '.curve__filter-select'])];
+  const DRAW = ['min-height', 'height', 'padding', 'font-size', 'background', 'border', 'border-radius', 'color'];
+  const hits = [];
+  for (const f of fs.readdirSync(HALL).filter((x) => x.endsWith('.css') && x !== 'controls.css')) {
+    for (const { sels, body } of rulesOf(read(f))) {
+      for (const s of sels) {
+        // the bare name, or the name on an element (button.craft-save) — a
+        // descendant or a state selector is the page placing it, not re-drawing it
+        const bare = s.replace(/^[a-z]+(?=\.)/, '');
+        if (!NAMES.includes(bare)) continue;
+        const drawn = DRAW.filter((p) => prop(body, p) !== null);
+        if (drawn.length) hits.push(`${f}: ${s} { ${drawn.join(', ')} }`);
+      }
+    }
+  }
+  assert.deepEqual(hits, [], 'a page sheet re-draws a shared control — move the difference into controls.css or drop it');
+});
+
+test('the old field duplicates reduce to the shared field', () => {
+  const ov = rulesOf(read('oversight.css')).find((x) => x.sels.includes('.ov-field input'));
+  assert.ok(!ov || ['min-height', 'padding', 'border', 'border-radius', 'background'].every((p) => prop(ov.body, p) === null),
+    'oversight.css re-states the field the shared sheet already draws');
+  const uat = rulesOf(read('goals.css')).find((x) => x.sels.includes('.uat-field textarea'));
+  assert.ok(!uat || ['padding', 'border', 'border-radius', 'background'].every((p) => prop(uat.body, p) === null),
+    'goals.css re-draws the UAT textarea');
+  for (const sel of ['.filter select', '.filter input[type="search"]', '.td-field input', '.cb-reply-input', '.psel', '.pinput']) {
+    for (const f of ['style.css', 'collab.css', 'panel.css']) {
+      const r = rulesOf(read(f)).find((x) => x.sels.includes(sel));
+      if (!r) continue;
+      const drawn = ['min-height', 'padding', 'font-size', 'border', 'border-radius', 'background'].filter((p) => prop(r.body, p) !== null);
+      assert.deepEqual(drawn, [], `${f}: ${sel} re-draws the shared field`);
+    }
+  }
+});
+
+test('the pages the task named write names the shared rules own', () => {
+  const ALL = new Set([...PRIMARY, ...GHOST, ...SMALL].map((s) => s.slice(1)));
+  const cases = [
+    ['goals-render.js', /<button class="(task__claim)" type="button" data-claim-task/, 'the Goals claim'],
+    ['goals-render.js', /<button class="(wip__release)" type="button" data-release-claim/, 'the Goals release'],
+    ['setup-gate.js', /<button type="button" class="(setup-gate__save)" data-save-crafts/, 'the setup screen\'s save'],
+    ['work.js', /class="(task__claim)"/, 'the Work claim'],
+    ['settings.html', /class="(?:[^"]*\s)?(pbtn|settings-btn|btn)(?:\s[^"]*)?"/, 'a Settings button'],
+  ];
+  for (const [file, re, what] of cases) {
+    const m = read(file).match(re);
+    assert.ok(m, `${file}: ${what} is still where this test looks`);
+    assert.ok(ALL.has(m[1]), `${file}: ${what} writes .${m[1]}, which the shared rules own`);
+  }
+  assert.doesNotMatch(styleSrc, /\.setup__btn\b/, 'the dead white-on-salmon setup button stays gone');
+});