@bongos/core 1.19.458 → 1.19.460

package/tests/hall_collab_world.mjs

@@ -0,0 +1,214 @@
+// tests/hall_collab_world.mjs — the collaboration pages in the chrome world
+// (task 1003471, goal 1000081): collab and the copy desk, redesigned on the
+// hall's row archetype (oversight.css) rather than re-skinned. Static pins over
+// the shipped source: the family sheet is linked and the page sheets spend only
+// the fifteen, every list is the family's row and the card-in-a-card is gone,
+// state is colour and never opacity, the facts the audit found thrown away (who
+// is asking; the duplicate total; the surface count) are rendered, the server
+// names the asker, the dialogs are the family modal, the lists that grow are
+// paged through the kit, and the harness carries what the pages read.
+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';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const PUB = path.join(ROOT, 'modules', 'hall-ui', 'public');
+const FIX = path.join(ROOT, 'scripts', 'hall-preview', 'fixtures');
+const read = (f) => fs.readFileSync(path.join(PUB, f), 'utf8').replace(/\r\n/g, '\n');
+const readRoot = (...p) => fs.readFileSync(path.join(ROOT, ...p), 'utf8').replace(/\r\n/g, '\n');
+const PAGES = ['collab', 'copy-desk'];
+
+// collab-lib.js is pure, so RUN it rather than grep it.
+function lib() {
+  const win = {};
+  new Function('window', read('collab-lib.js'))(win);
+  return win.OTBCollabLib;
+}
+
+test('both pages link the family sheet, before their own', () => {
+  for (const p of PAGES) {
+    const html = read(`${p}.html`);
+    const fam = html.indexOf('/builders/oversight.css');
+    const own = html.indexOf(`/builders/${p}.css`);
+    assert.ok(fam > 0, `${p}.html links oversight.css`);
+    assert.ok(own > fam, `${p}.html links its own sheet after the family's`);
+  }
+});
+
+test('the page sheets spend only the fifteen, in px, and never opacity', () => {
+  for (const p of PAGES) {
+    const css = read(`${p}.css`);
+    const hexes = css.match(/#[0-9a-f]{3,8}\b/gi) || [];
+    assert.deepEqual(hexes, [], `${p}.css carries literal colours: ${hexes.join(', ')}`);
+    assert.ok(!/\d(\.\d+)?rem\b/.test(css), `${p}.css sizes in px plus tokens, not rem`);
+    assert.ok(!/opacity\s*:/.test(css), `${p}.css carries state as colour, never opacity`);
+    assert.ok(!/border-left/.test(css), `${p}.css paints no coloured band`);
+  }
+  // The one literal the copy desk keeps: the native dialog's scrim.
+  const cd = read('copy-desk.css');
+  const literals = cd.match(/rgba?\([^)]*\)/g) || [];
+  assert.deepEqual(literals, ['rgba(0, 0, 0, 0.55)'], 'black with alpha as a scrim, and nothing else');
+  assert.match(cd, /\.cd-dialog::backdrop \{ background: rgba\(0, 0, 0, 0\.55\); \}/, 'and it is spent on ::backdrop');
+});
+
+test('every list is the family\'s row, and the card-in-a-card is gone', () => {
+  for (const p of PAGES) assert.match(read(`${p}.js`), /class="ov-row/, `${p}.js renders .ov-row`);
+  // A class name, whole: `cd-stat` must not match the `cd-status` filter id.
+  const gone = (src, cls) => !new RegExp(`${cls}(?![a-z])`).test(src);
+  for (const old of ['cb-item', 'cb-list', 'cb-ctx']) {
+    assert.ok(gone(read('collab.js'), old) && gone(read('collab.css'), `\\.${old}`), `collab no longer emits ${old}`);
+  }
+  for (const old of ['cd-card', 'cd-stat', 'cd-tag', 'cd-filters__select', 'cd-browse', 'cd-empty']) {
+    assert.ok(gone(read('copy-desk.js'), old) && gone(read('copy-desk.css'), `\\.${old}`), `copy desk no longer emits ${old}`);
+  }
+  for (const p of PAGES) assert.match(read(`${p}.html`), /class="empty-state"/, `${p}.html empties with the kit's own state`);
+});
+
+// ---- collab: the facts the audit found thrown away ---------------------------
+test('collab renders WHO IS ASKING, as a door to their profile', () => {
+  const L = lib();
+  assert.equal(L.askerOf({ requested_by: 92, requested_by_name: 'Preview Gamma', requested_by_login: 'preview-gamma' }), 'Preview Gamma');
+  assert.equal(L.askerOf({ requested_by: 92, requested_by_login: 'preview-gamma' }), 'preview-gamma', 'the login when there is no display name');
+  assert.equal(L.askerOf({ requested_by: 92 }), 'builder 92', 'an older server\'s bare id is still a name, never nothing');
+  const js = read('collab.js');
+  assert.match(js, /L\.askerOf\(req\)/, 'the row asks the lib who is asking');
+  assert.match(js, /\/builders\/profile\?id=\$\{escapeHtml\(String\(req\.requested_by\)\)\}/, 'and links the hall\'s per-builder profile');
+  assert.match(js, /asked by \$\{who\}/, 'as a fact on the row');
+});
+
+test('the server names the people on a row through a join, and the writes stay bare', () => {
+  const src = readRoot('modules', 'lifecycle', 'help-requests.js');
+  assert.match(src, /requested_by_login, a\.display_name AS requested_by_name/, 'the asker is joined');
+  assert.match(src, /needs_builder_login, n\.display_name AS needs_builder_name/, 'and the by-name addressee');
+  assert.match(src, /LEFT JOIN builders a ON a\.id = h\.requested_by/, 'a LEFT join, so a row never vanishes with its builder');
+  for (const fn of ['listOpenForBuilder', 'listMine']) {
+    const body = src.slice(src.indexOf(`async function ${fn}`));
+    assert.match(body.slice(0, 700), /SELECT \$\{LIST_COLS\} \$\{LIST_FROM\}/, `${fn} reads the joined columns`);
+  }
+  const upd = src.slice(src.indexOf('async function setHelpRequestStatus'));
+  assert.match(upd.slice(0, 600), /RETURNING \$\{COLS\}/, 'the UPDATE cannot reach a joined alias, so it returns the bare columns');
+});
+
+test('the first line is decided: the ask\'s first sentence is the title, the rest the sub, no word lost', () => {
+  const L = lib();
+  const two = L.titleOf('The record exits to the board. I cannot tell which link does it.');
+  assert.deepEqual(two, { title: 'The record exits to the board.', rest: 'I cannot tell which link does it.' });
+  const one = L.titleOf('Is there a safe order of operations?');
+  assert.deepEqual(one, { title: 'Is there a safe order of operations?', rest: '' }, 'one sentence is the whole title');
+  const long = 'A'.repeat(150) + '. Then more.';
+  assert.equal(L.titleOf(long).title, long, 'a first sentence too long to be a line keeps the whole ask together');
+  assert.equal(L.titleOf('docs/x.md is stale and y.js too').title, 'docs/x.md is stale and y.js too', 'a dot inside a path is not a sentence break');
+  const t = L.titleOf('  padded.  and trailing   ');
+  assert.equal(`${t.title} ${t.rest}`, 'padded. and trailing', 'nothing is clipped');
+  const js = read('collab.js');
+  assert.match(js, /L\.titleOf\(req\.what_is_stuck\)/);
+  assert.match(js, /class="ov-row__title">\$\{escapeHtml\(t\.title\)\}/);
+  assert.match(js, /class="ov-row__sub">\$\{escapeHtml\(t\.rest\)\}/);
+});
+
+test('"asked of you" reads in runs — by name first, then each craft', () => {
+  const L = lib();
+  assert.equal(L.groupOf({ needs_builder_id: 95 }).id, 'you');
+  assert.equal(L.groupOf({ needs_craft: 'artist' }).label, 'asked of artists');
+  assert.match(L.addressedTo({ needs_builder_id: 7, needs_builder_name: 'Preview Alpha' }, 9), /Preview Alpha by name/, 'a named addressee is named');
+  const js = read('collab.js');
+  assert.match(js, /ov-group__head/, 'each run has the family\'s group head');
+  assert.match(js, /Number\(b\.id === 'you'\) - Number\(a\.id === 'you'\)/, 'and the personal run sorts first');
+});
+
+test('the age is a state pill in the row\'s right column, and every band has its own colour', () => {
+  const css = read('collab.css');
+  const L = lib();
+  for (const b of L.BANDS) assert.match(css, new RegExp(`^\\.cb-age--${b.id}\\s*\\{[^}]*color: var\\(--`, 'm'), `${b.id} has its own colour rule`);
+  assert.match(css, /\.cb-age--stale\s*\{[^}]*var\(--danger\)/, 'stale is the danger ink');
+  assert.match(css, /\.cb-age--aging\s*\{[^}]*var\(--warn\)/, 'aging is the warn ink');
+  const js = read('collab.js');
+  assert.match(js, /class="fact-pill cb-age cb-age--\$\{band\.id\}"/, 'the pill is the shell\'s fact-pill');
+  assert.match(js, /<div class="ov-row__right">\$\{ageChip\(req, nowMs\)\}/, 'in the right column, so a glance down the list reads the ages');
+});
+
+// ---- the copy desk: quieter, and no fact lost ----------------------------------
+test('the copy desk\'s counts are the shell\'s glass strip, carrying two facts the boxes dropped', () => {
+  assert.match(read('copy-desk.html'), /class="stat-row ov-summary cd-summary" id="cd-summary-scroll"/);
+  const js = read('copy-desk.js');
+  assert.match(js, /stat-tile__num/, 'the figure is the shell\'s tile');
+  assert.match(js, /of \$\{int\(c\.duplicates_total\)\} said more than once/, 'the duplicate total was never shown before');
+  assert.match(js, /across \$\{int\(surfaces\)\} surface/, 'nor the surface count');
+  assert.ok(!/cd-stat__n/.test(js), 'the bordered box is gone');
+});
+
+test('state is colour from the verification vocabulary, never opacity', () => {
+  const js = read('copy-desk.js');
+  assert.match(js, /pill\('fact-pill--open', 'already flagged'\)/);
+  assert.match(js, /pill\('fact-pill--ok', 'looked at'\)/);
+  assert.match(js, /pill\('', 'untouched'\)/, 'the untouched row is the plain pill: colour marks the exception in a list that is mostly work');
+  assert.match(js, /pill\('fact-pill--warn', 'target gone'/);
+  assert.match(js, /f\.status === 'resolved' \? 'fact-pill--ok' : 'fact-pill--quiet'/);
+});
+
+test('the filters and the search are the kit\'s bar; the duplicates are paged through the kit', () => {
+  const js = read('copy-desk.js');
+  assert.equal((js.match(/kit\.makeFilterBar\(\{/g) || []).length, 2, 'two bars: the queue\'s filters and the search');
+  for (const id of ['cd-status', 'cd-surface', 'cd-search']) assert.match(js, new RegExp(`id: '${id}'`), `${id} is a kit control`);
+  assert.match(js, /kit\.makePager\('cd-dupes'/);
+  assert.match(js, /kit\.paginate\(ordered, dupePager\)/);
+  assert.match(js, /kit\.wirePager\(dupePager, rerender\)/);
+  assert.match(read('copy-desk.html'), /src="\/builders\/hall-kit\.js/, 'the page loads the kit');
+});
+
+test('the two dialogs are the family modal on a native <dialog>, with the number input in a field', () => {
+  const html = read('copy-desk.html');
+  assert.equal((html.match(/<dialog id="cd-(close-)?dialog" class="ov-modal cd-dialog">/g) || []).length, 2);
+  assert.match(html, /<div class="ov-field ov-field--wide">\s*<label class="ov-field__l" for="cd-close-task">[^<]*<\/label>\s*<input type="number" id="cd-close-task"/, 'the number input sits in the family field, which restates the 30px pill');
+  assert.ok(!/<label[^>]*>[^<]*<span class="cd-dialog__hint"/.test(html), 'no hint lives inside a label (the label voice would uppercase it)');
+  assert.equal((html.match(/class="ov-form__why"/g) || []).length, 3, 'the three hints are the form\'s own explainer line');
+  assert.match(html, /class="btn-accent" id="cd-submit"/, 'the accent door files the flag');
+});
+
+test('the copy desk renders MORE facts per row than any other page, and lost none', () => {
+  const js = read('copy-desk.js');
+  for (const fact of ['flagged_by_name', 'flagged_by_login', 'flagged_at', 'resolution_note', 'resolved_task_id',
+    'text_at_flag', 'file_at_flag', 'line_at_flag', 'f.current.file', 'f.current.line', 'f.moved', 'target_state',
+    'd.at', 'd.occurrences', 'd.surface', 'e.origin', 'e.file', 'truncated', 'blind_spots', 'freshness_check', 'r.at']) {
+    assert.ok(js.includes(fact), `${fact} is still rendered`);
+  }
+  assert.match(js, /said, when flagged:/, 'the snapshot is still labelled as the snapshot');
+  assert.match(js, /whole surface/, 'a surface-scope flag still says so');
+});
+
+test('the closing floor is the pack\'s rank label, not a Greek name in the markup', () => {
+  assert.ok(!/Metic\+/.test(read('copy-desk.html')), 'no "Metic+" in the lede');
+  assert.match(read('copy-desk.html'), /<span id="cd-close-rank">/);
+  assert.match(read('copy-desk.js'), /rankLabel\('metic'\)/);
+});
+
+// ---- the harness carries what the pages read ------------------------------------
+test('the harness fixtures exist and carry the shapes the pages read', () => {
+  const fx = (n) => JSON.parse(fs.readFileSync(path.join(FIX, `${n}.json`), 'utf8'));
+  const forMe = fx('help-requests__for-me');
+  assert.ok(Array.isArray(forMe.help_requests) && forMe.help_requests.length >= 4, 'four asks, one per band');
+  assert.ok(forMe.help_requests.every((r) => r.requested_by_name && r.what_is_stuck && r.created_at), 'each names its asker');
+  assert.ok(forMe.help_requests.some((r) => r.needs_builder_id != null), 'one is by name');
+  assert.deepEqual(forMe.crafts, ['builder']);
+  const mine = fx('help-requests__mine');
+  assert.ok(mine.help_requests.length >= 2 && mine.help_requests.every((r) => String(r.requested_by) === '95'), 'the viewer\'s own (me.json is builder 95)');
+  const q = fx('copy-desk__queue');
+  assert.ok(q.flags.some((f) => f.target_state === 'gone') && q.flags.some((f) => f.moved) && q.flags.some((f) => f.scope === 'surface'), 'a gone target, a moved one, a whole-surface one');
+  assert.ok(q.flags.some((f) => f.status === 'resolved') && q.flags.some((f) => f.status === 'dismissed'), 'and both closed outcomes');
+  assert.ok(q.duplicates.length >= 8 && q.duplicates.every((d) => Array.isArray(d.at) && d.at.length === d.occurrences), 'real duplicates with their places');
+  assert.ok(q.registry.at && q.registry.freshness_check && q.registry.counts && q.registry.surfaces, 'the registry block the note reads');
+  const s = fx('copy-desk__strings');
+  assert.ok(Array.isArray(s.entries) && s.entries.length > 0 && typeof s.matched === 'number' && 'truncated' in s && 'limit' in s);
+});
+
+test('the states files walk the new states', () => {
+  const cd = JSON.parse(read('copy-desk.states.json'));
+  assert.deepEqual(Object.keys(cd.states), ['queue', 'out', 'search', 'composer', 'closer']);
+  assert.deepEqual(cd.states.search.actions[1], ['fill', '#cd-search', 'save']);
+  assert.deepEqual(cd.states.composer.actions[1], ['clickIfVisible', '.cd-flag-btn'], 'clickIfVisible: against the kit\'s stub the button does not exist');
+  assert.deepEqual(cd.states.closer.actions[1], ['clickIfVisible', '.cd-close-btn']);
+  const cb = JSON.parse(read('collab.states.json'));
+  assert.deepEqual(cb.states.board.expect.visible, ['#cb-for-me']);
+});

package/tests/hall_tokens.mjs

@@ -86,9 +86,15 @@ const darkMedia = declarations(blockAfter('html:not([data-theme]) {'));
 // Equal specificity, later in document order, so for the tokens the pack emits
 // the PACK wins and style.css's own value never renders. html[data-theme="dark"]
 // is (0,1,1) and wins back.
-const packUi = JSON.parse(
+// UI_DESIGN_PACK=<pack.json> measures the sheet under a look from the style library
+// (tests/ui_design_styles.mjs runs this file once per pack, task 1003323); the DRIFT test
+// below always compares the sheet against the neutral pack, which is what it must equal.
+const neutralUi = JSON.parse(
   fs.readFileSync(path.join(ROOT, 'config', 'branding.neutral.json'), 'utf8'),
 ).theme.ui;
+const packUi = process.env.UI_DESIGN_PACK
+  ? JSON.parse(fs.readFileSync(path.resolve(process.env.UI_DESIGN_PACK), 'utf8')).theme.ui
+  : neutralUi;
 
 // mirrors COLOR_VARS in src/bongos/serve-internal.js
 const camelToVar = (k) => '--' + k.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
@@ -166,12 +172,13 @@ test('style.css defaults do not drift from the branding pack', () => {
   // always overrides it. That makes silent drift easy and dangerous: anyone
   // auditing the sheet alone would measure colours no builder ever sees.
   const drift = [];
-  for (const [name, value] of Object.entries(PACK)) {
+  const NEUTRAL = Object.fromEntries(Object.entries(neutralUi.colors).map(([k, v]) => [camelToVar(k), v]));
+  for (const [name, value] of Object.entries(NEUTRAL)) {
     if (contractTier[name] !== value) drift.push(`${name}: sheet ${contractTier[name]} vs pack ${value}`);
   }
   for (const [key, cssVar] of [['display', '--font-display'], ['body', '--font-body']]) {
-    if (contractTier[cssVar] !== packUi.fonts[key]) {
-      drift.push(`${cssVar}: sheet ${contractTier[cssVar]} vs pack ${packUi.fonts[key]}`);
+    if (contractTier[cssVar] !== neutralUi.fonts[key]) {
+      drift.push(`${cssVar}: sheet ${contractTier[cssVar]} vs pack ${neutralUi.fonts[key]}`);
     }
   }
   assert.deepEqual(drift, [], 'the contract tier must equal config/branding.neutral.json theme.ui');
@@ -273,8 +280,10 @@ test('each state reads against its own weak fill', () => {
 
 test('the contrast probe would CATCH the values that failed', () => {
   // The shipped-before values, measured against the world's paper. If this ever
-  // passes, the probe has stopped measuring what it claims to.
-  const bg = paint('--bg', 'light');
+  // passes, the probe has stopped measuring what it claims to. The NEUTRAL paper on
+  // purpose: this calibrates the probe, and a look's own ground (UI_DESIGN_PACK) is
+  // measured by the pair tests above, not by this one.
+  const bg = resolve(neutralUi.colors.bg, 'light');
   for (const [name, hex] of [['ok', '#1a7f4b'], ['warn', '#9a6700']]) {
     const r = contrast(resolve(hex, 'light'), bg);
     assert.ok(r < 4.5, `the retired ${name} ${hex} must still measure under AA here (got ${r.toFixed(2)}:1)`);

package/tests/ui_design_styles.mjs

@@ -0,0 +1,218 @@
+// tests/ui_design_styles.mjs — the ui-design module's style library (task 1003323, ADR 0219)
+// is a pinned contract, not a folder of ideas: every style dir carries a pack (exactly the
+// fifteen), a DESIGN.md whose frontmatter holds the same thirteen value for value, and a
+// specimen mock that passes the platform's rules under its own colours; the chrome world
+// entry IS the neutral pack; every pack clears the pack floor; the three served sheets
+// (world.css, cosmos.css, the hall's style.css) clear AA under every alternate in both modes
+// (their own suites run once per pack through UI_DESIGN_PACK, and a bad pack is proven to
+// fail them); the stub serves a page under a style with the look's fifteen spliced in and the
+// instance's identity untouched; the CLIs refuse an unknown style; and the doors (the styles
+// README, the module CLAUDE.md, /design) name every look. DB-free; the one browser-free stub
+// round-trip is the same the kit test already makes.
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { spawnSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import { listStyles, resolveStyle, styleBrandingFile, packColors, startStub, STYLES_DIR, EXIT } from '../modules/ui-design/kit/lib.js';
+import { packContrast, PACK_PAIRS } from '../modules/ui-design/kit/contrast.js';
+import { checkMock, readDesignBans } from '../modules/ui-design/kit/check-mock.js';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const KIT = path.join(ROOT, 'modules', 'ui-design', 'kit');
+const read = (p) => fs.readFileSync(p, 'utf8').replace(/\r\n/g, '\n');
+const readJson = (p) => JSON.parse(fs.readFileSync(p, 'utf8'));
+const neutralUi = readJson(path.join(ROOT, 'config', 'branding.neutral.json')).theme.ui;
+const THIRTEEN = Object.keys(neutralUi.colors).sort();
+const camelToKebab = (k) => k.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
+const styles = listStyles().map((name) => resolveStyle(name));
+const alternates = styles.filter((s) => s.name !== 'chrome-world');
+// a child `node --test` must not inherit NODE_TEST_CONTEXT, or it reports to this runner's
+// channel instead of its own stdout (an empty stdout and exit 0: a silent pass)
+const childEnv = (extra = {}) => { const e = { ...process.env, ...extra }; delete e.NODE_TEST_CONTEXT; return e; };
+const run = (file, args, env = {}) => spawnSync(process.execPath, [path.join(KIT, file), ...args], { encoding: 'utf8', env: childEnv(env), timeout: 60000 });
+
+// The `colors:` block of a DESIGN.md frontmatter → { 'bg': '#…', … } (quoted scalars only;
+// comments and the nested keys of other blocks are skipped).
+function frontmatterColors(md) {
+  const fm = md.match(/^---\n([\s\S]*?)\n---\n/);
+  assert.ok(fm, 'DESIGN.md opens with a frontmatter block');
+  const lines = fm[1].split('\n');
+  const start = lines.findIndex((l) => /^colors:\s*$/.test(l));
+  assert.ok(start >= 0, 'the frontmatter carries a colors: block');
+  const out = {};
+  for (const line of lines.slice(start + 1)) {
+    if (/^[a-z]/.test(line)) break;
+    const m = line.match(/^\s+([a-z][a-z0-9-]*):\s*"([^"]*)"/);
+    if (m) out[m[1]] = m[2];
+  }
+  return out;
+}
+
+// ── the catalogue ─────────────────────────────────────────────────────────────
+test('the catalogue: the chrome world plus at least two alternates, each dir carrying pack.json, DESIGN.md and mock.html', () => {
+  assert.ok(styles.some((s) => s.name === 'chrome-world'), 'the chrome world is the first entry');
+  assert.ok(alternates.length >= 2, `at least two alternates (found ${alternates.map((s) => s.name).join(', ') || 'none'})`);
+  for (const s of styles) {
+    for (const f of ['pack.json', 'DESIGN.md', 'mock.html']) assert.ok(fs.existsSync(path.join(s.dir, f)), `${s.name}: ${f}`);
+    assert.equal(s.name, path.basename(s.dir), `${s.name}: pack.json names its own dir`);
+    assert.match(s.name, /^[a-z0-9][a-z0-9-]*$/, `${s.name}: kebab-case`);
+  }
+});
+
+test('a pack is exactly the fifteen: the thirteen colour keys of the neutral pack, the two font stacks and a links line, with a title, a summary and an origin', () => {
+  for (const s of styles) {
+    const ui = s.pack.theme && s.pack.theme.ui;
+    assert.ok(ui && ui.colors && ui.fonts, `${s.name}: theme.ui.colors + theme.ui.fonts`);
+    assert.deepEqual(Object.keys(ui.colors).sort(), THIRTEEN, `${s.name}: exactly the thirteen`);
+    for (const [k, v] of Object.entries(ui.colors)) assert.match(v, /^#[0-9a-f]{6}$/i, `${s.name}: ${k} is a plain hex (the sheets do hex maths on the contract tier)`);
+    assert.ok(typeof ui.fonts.display === 'string' && ui.fonts.display && typeof ui.fonts.body === 'string' && ui.fonts.body, `${s.name}: both font stacks`);
+    assert.ok(Array.isArray(ui.fonts.links) && ui.fonts.links.length && ui.fonts.links.every((l) => /^https:\/\//.test(l)), `${s.name}: fonts.links carries the face stylesheet(s)`);
+    assert.deepEqual(Object.keys(ui).sort(), ['colors', 'fonts'], `${s.name}: a look sets the fifteen and nothing else (favicon and backdrop stay the instance's)`);
+    for (const k of ['title', 'summary', 'origin']) assert.ok(typeof s.pack[k] === 'string' && s.pack[k].length > 8, `${s.name}: ${k}`);
+  }
+});
+
+test('the chrome world pack IS the neutral pack, and every alternate is a different look', () => {
+  const chrome = styles.find((s) => s.name === 'chrome-world');
+  assert.deepEqual(chrome.pack.theme.ui.colors, neutralUi.colors, 'chrome-world colours = config/branding.neutral.json theme.ui.colors');
+  assert.equal(chrome.pack.theme.ui.fonts.display, neutralUi.fonts.display);
+  assert.equal(chrome.pack.theme.ui.fonts.body, neutralUi.fonts.body);
+  assert.deepEqual(chrome.pack.theme.ui.fonts.links, neutralUi.fonts.links);
+  for (const s of alternates) {
+    assert.notEqual(s.pack.theme.ui.colors.accent.toLowerCase(), neutralUi.colors.accent.toLowerCase(), `${s.name}: a look has its own accent`);
+    assert.notEqual(s.pack.theme.ui.fonts.display, neutralUi.fonts.display, `${s.name}: a look has its own display face`);
+  }
+});
+
+test('every DESIGN.md frontmatter carries its pack\'s thirteen, value for value, and its prose names the look\'s adoption path', () => {
+  for (const s of styles) {
+    const md = read(path.join(s.dir, 'DESIGN.md'));
+    const colors = frontmatterColors(md);
+    for (const [k, v] of Object.entries(s.pack.theme.ui.colors)) {
+      assert.equal((colors[camelToKebab(k)] || '').toLowerCase(), v.toLowerCase(), `${s.name}: DESIGN.md ${camelToKebab(k)} = pack ${k}`);
+    }
+    assert.match(md, /config\/branding\.json/, `${s.name}: DESIGN.md says how an instance adopts the look`);
+  }
+});
+
+// ── the floors ────────────────────────────────────────────────────────────────
+test('every pack clears the pack floor: every ink on every ground at 4.5:1', () => {
+  for (const s of styles) {
+    const rows = packContrast(s.pack);
+    assert.equal(rows.length, PACK_PAIRS.length);
+    for (const r of rows) assert.equal(r.ok, true, `${s.name}: ${r.fg} on ${r.bg} = ${r.ratio} (need ${r.need})`);
+  }
+});
+
+test('every mock passes the platform rules under its own colours and its own DESIGN.md bans, is stamped by the transform, and declares no colour of its own', () => {
+  for (const s of styles) {
+    const html = read(path.join(s.dir, 'mock.html'));
+    const bans = readDesignBans(read(path.join(s.dir, 'DESIGN.md')));
+    const results = checkMock(html, { bans, packColors: packColors(s.pack) });
+    const fails = results.filter((r) => r[0] === 'FAIL').map((r) => `${r[1]} (${r[2]})`);
+    assert.deepEqual(fails, [], `${s.name}: mock.html`);
+    assert.ok(results.some((r) => r[1].startsWith('every dark rule written twice') && r[0] === 'PASS'), `${s.name}: the mock carries a dark tier, written twice`);
+    assert.ok(html.includes('{{productName}}'), `${s.name}: the mock carries the identity token the transform stamps`);
+    assert.ok(bans.has('em-dash') && bans.has('emoji'), `${s.name}: the look's DESIGN.md declares the copy bans`);
+  }
+});
+
+test('the world, hub and hall sheets clear AA under every alternate in both modes: the three token suites run once per pack', () => {
+  // relative, forward-slash paths: `node --test <path>` reads its positionals as globs, and a
+  // Windows absolute path matches nothing (zero tests, exit 0 — a silent pass)
+  const suites = ['tests/world_tokens.mjs', 'tests/cosmos_token_contrast.mjs', 'tests/hall_tokens.mjs'];
+  for (const s of alternates) {
+    const r = spawnSync(process.execPath, ['--test', '--test-reporter=tap', ...suites], { cwd: ROOT, encoding: 'utf8', env: childEnv({ UI_DESIGN_PACK: s.file }), timeout: 120000 });
+    assert.match(r.stdout, /# tests [1-9]/, `${s.name}: the suites actually ran`);
+    const fails = (r.stdout.match(/^not ok .*$/gm) || []).join('\n');
+    assert.equal(r.status, 0, `${s.name}: a sheet fails under this pack\n${fails}\n${(r.stdout.split('\n').filter((l) => /^\s+(\+|-|\*|actual|expected|error|message)/.test(l) || /:1 \(need|vs pack| = \d/.test(l)).slice(0, 30).join('\n'))}`);
+    assert.match(r.stdout, /# pass \d+/);
+  }
+});
+
+test('UI_DESIGN_PACK is honoured, not decorative: a pack that thins ink-faint fails the same suites', () => {
+  const bad = structuredClone(readJson(path.join(STYLES_DIR, 'expedition', 'pack.json')));
+  bad.theme.ui.colors.inkFaint = '#c8c6bd';
+  const file = path.join(fs.mkdtempSync(path.join(os.tmpdir(), 'ui-style-bad-')), 'pack.json');
+  fs.writeFileSync(file, JSON.stringify(bad));
+  const r = spawnSync(process.execPath, ['--test', '--test-reporter=tap', 'tests/world_tokens.mjs'], { cwd: ROOT, encoding: 'utf8', env: childEnv({ UI_DESIGN_PACK: file }), timeout: 60000 });
+  assert.match(r.stdout, /# tests [1-9]/, 'the suite actually ran');
+  assert.notEqual(r.status, 0, 'a thinned ink-faint must fail the world suite under the env var');
+  assert.match(r.stdout, /ink-faint on the page ground/, 'the failing pair is named');
+  const drift = spawnSync(process.execPath, ['--test', '--test-reporter=tap', 'tests/world_tokens.mjs'], { cwd: ROOT, encoding: 'utf8', env: childEnv({ UI_DESIGN_PACK: path.join(STYLES_DIR, 'expedition', 'pack.json') }), timeout: 60000 });
+  assert.match(drift.stdout, /^ok .*do not drift/m, 'the drift test keeps measuring the sheet against the NEUTRAL pack under an alternate');
+  fs.rmSync(path.dirname(file), { recursive: true, force: true });
+});
+
+// ── the picker ────────────────────────────────────────────────────────────────
+test('resolveStyle: by name, by pack.json path, and nothing else; styleBrandingFile lays the look over the instance and keeps its identity', () => {
+  const byName = resolveStyle('expedition');
+  assert.equal(byName.name, 'expedition');
+  assert.equal(resolveStyle(byName.file).name, 'expedition', 'a pack.json path resolves too');
+  assert.equal(resolveStyle('no-such-look'), null);
+  assert.equal(resolveStyle('../kit/lib.js'), null, 'a path that is not a pack.json does not resolve');
+  assert.equal(resolveStyle(''), null);
+  const merged = readJson(styleBrandingFile(byName));
+  assert.equal(merged.theme.ui.colors.accent, '#ffd214', 'the look\'s fifteen');
+  assert.equal(merged.theme.ui.fonts.display, byName.pack.theme.ui.fonts.display);
+  assert.equal(merged.identity, undefined, 'a neutral checkout has no instance pack: only theme is written, so identity resolves from the neutral starter');
+  // a pack.json loaded by path names itself: the temp file the transform reads takes a slug, never the name
+  const hostile = path.join(fs.mkdtempSync(path.join(os.tmpdir(), 'ui-style-name-')), 'pack.json');
+  fs.writeFileSync(hostile, JSON.stringify({ ...byName.pack, name: '../../escape' }));
+  const written = styleBrandingFile(resolveStyle(hostile));
+  assert.equal(path.dirname(written), path.join(os.tmpdir(), 'ui-design-kit', 'styles'), "the merged pack is written inside the kit's temp dir whatever the pack calls itself");
+  assert.match(path.basename(written), /^[A-Za-z0-9_-]+\.branding\.json$/);
+  fs.rmSync(path.dirname(hostile), { recursive: true, force: true });
+});
+
+test('the stub serves a real surface and a specimen under a style: the spliced :root carries the look\'s fifteen, the instance\'s name is stamped, the feeds still answer', async () => {
+  const s = await startStub({ surface: 'public-landing', style: 'grove' });
+  try {
+    const html = await (await fetch(s.base + '/')).text();
+    assert.ok(html.includes('--accent:#e3c39c;'), 'the grove\'s accent is in the spliced :root');
+    assert.ok(html.includes('--font-display:"Nunito"'), 'the grove\'s display face');
+    assert.ok(html.includes('family=Nunito'), 'the look\'s font link is injected');
+    assert.ok(html.includes('window.__BRANDING__'), 'the pack is injected');
+    assert.ok(!html.includes('#fb9569'), 'the neutral accent does not leak into the served page');
+    assert.equal((await fetch(s.base + '/api/gds/public/progress')).status, 200);
+  } finally { s.stop(); }
+  const spec = await startStub({ surface: 'modules/ui-design/styles/expedition', style: 'expedition' });
+  try {
+    const html = await (await fetch(spec.base + '/mock')).text();
+    assert.ok(html.includes('--accent:#ffd214;'), 'the specimen is served under its own pack');
+    assert.ok(!html.includes('{{productName}}'), 'the identity token is stamped by the real transform');
+    assert.match(html, /<title>[^<]*the expedition, on a sheet<\/title>/);
+  } finally { spec.stop(); }
+});
+
+test('the CLIs refuse an unknown style with the catalogue named, before any browser; contrast --pack <name> measures a look', () => {
+  const bad = run('serve.js', [], { STYLE: 'no-such-look', STUB_PORT: '0' });
+  assert.equal(bad.status, EXIT.USAGE); assert.match(bad.stderr, /neither a style/); assert.match(bad.stderr, /chrome-world, expedition, grove/);
+  const render = run('render.js', ['--page', '/', '--style', 'no-such-look']);
+  assert.equal(render.status, EXIT.USAGE); assert.match(render.stderr, /--style "no-such-look" is not a style/);
+  const probe = run('probe.js', ['--page', '/projects', '--style', 'no-such-look']);
+  assert.equal(probe.status, EXIT.USAGE); assert.match(probe.stderr, /--style "no-such-look" is not a style/);
+  const c = run('contrast.js', ['--pack', 'expedition']);
+  assert.equal(c.status, EXIT.CLEAN, c.stdout + c.stderr); assert.match(c.stdout, /the expedition pack/); assert.match(c.stdout, /PACK CLEAN/);
+  const cBad = run('contrast.js', ['--pack', 'no-such-look']);
+  assert.equal(cBad.status, EXIT.USAGE); assert.match(cBad.stderr, /not a style/);
+  const mock = run('check-mock.js', ['--file', path.join(STYLES_DIR, 'grove', 'mock.html'), '--pack', 'grove']);
+  assert.equal(mock.status, EXIT.CLEAN, mock.stdout); assert.match(mock.stdout, /ALL RULES PASS/);
+});
+
+// ── the doors ─────────────────────────────────────────────────────────────────
+test('the styles README, the module CLAUDE.md and /design name every look', () => {
+  const readme = read(path.join(STYLES_DIR, 'README.md'));
+  const claude = read(path.join(ROOT, 'modules', 'ui-design', 'CLAUDE.md'));
+  const design = read(path.join(ROOT, '.claude', 'skills', 'design', 'SKILL.md'));
+  for (const s of styles) {
+    assert.ok(readme.includes(`\`${s.name}\``), `styles/README.md rosters ${s.name}`);
+    assert.ok(claude.includes(`\`${s.name}\``), `modules/ui-design/CLAUDE.md names ${s.name}`);
+    assert.ok(design.split('\n').some((l) => l.includes(`\`${s.name}\``)), `/design names ${s.name} on a line`);
+  }
+  assert.match(design, /STYLE=/, '/design says how to render under a look');
+  assert.match(readme, /GDS_BRANDING_FILE/, 'the README names the knob the picker rides');
+});

package/tests/world_tokens.mjs

@@ -93,9 +93,15 @@ const darkMedia = declarations(blockAfter(':root:not([data-mode="light"]) {'));
 // pack emits the PACK wins and world.css's own value never renders. Measuring
 // world.css alone would measure a page nobody sees. The dark blocks are (0,2,0)
 // and win back.
-const packUi = JSON.parse(
+// UI_DESIGN_PACK=<pack.json> measures the sheet under a look from the style library
+// (tests/ui_design_styles.mjs runs this file once per pack, task 1003323); the DRIFT test
+// below always compares the sheet against the neutral pack, which is what it must equal.
+const neutralUi = JSON.parse(
   fs.readFileSync(path.join(ROOT, 'config', 'branding.neutral.json'), 'utf8'),
 ).theme.ui;
+const packUi = process.env.UI_DESIGN_PACK
+  ? JSON.parse(fs.readFileSync(path.resolve(process.env.UI_DESIGN_PACK), 'utf8')).theme.ui
+  : neutralUi;
 
 // mirrors COLOR_VARS in src/bongos/serve-internal.js
 const camelToVar = (k) => '--' + k.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
@@ -173,7 +179,8 @@ test('world.css defaults do not drift from the branding pack', () => {
   // page reads correctly standalone (opened as a file, with no server) only while
   // the two agree. This is the fifteen: thirteen colours plus the two faces.
   const drift = [];
-  const expected = { ...PACK, '--font-display': packUi.fonts.display, '--font-body': packUi.fonts.body };
+  const NEUTRAL = Object.fromEntries(Object.entries(neutralUi.colors).map(([k, v]) => [camelToVar(k), v]));
+  const expected = { ...NEUTRAL, '--font-display': neutralUi.fonts.display, '--font-body': neutralUi.fonts.body };
   for (const [name, packValue] of Object.entries(expected)) {
     const cssValue = contractTier[name];
     if (cssValue === undefined) {