@bongos/core 1.24.58 → 1.24.60

package/tests/design_counts_ratchet.mjs

@@ -28,7 +28,7 @@ const readReal = (f) => fs.readFileSync(path.join(ROOT, f), 'utf8');
 
 test('the detector counts typed-in values and leaves tokens alone', () => {
   const c = scan.countSheet(`
-    :root { --ds-x: 14px; --tone: #123456; }            /* token definitions: not counted */
+    :root { --ds-x: 14px; --tone: #123456; }            /* a token sheet's definitions: not counted */
     .a { font-size: 13px; border-radius: 6px; color: #abc; }
     .b { font-size: var(--ds-text-sm); border-radius: var(--ds-radius-tile); color: var(--ink); }
     .c { box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }      /* a shadow; the black scrim is allowed */
@@ -36,7 +36,7 @@ test('the detector counts typed-in values and leaves tokens alone', () => {
     .e { background: color-mix(in srgb, var(--ink) 40%, rgb(12 34 56)); padding: 0; }
     @media (max-width: 720px) { .f { border-radius: 0; } }
     @media (prefers-reduced-motion: reduce) { .g { transition: none; } }
-  `);
+  `, { tokens: true });
   assert.deepEqual(c, { colours: 2, font_sizes: 1, radii: 1, shadows: 1, breakpoints: 1 });
 });
 
@@ -99,6 +99,8 @@ const GENERATOR_SOURCES = [
   'modules/hall-ui/public/controls.css',
   'modules/hall-ui/public/dom-utils.js',
   'scripts/bongos/gen-brand.js',
+  'src/brand-mark.js',
+  'src/html-escape.js',
   'DESIGN.md',
 ];
 
@@ -132,3 +134,96 @@ test('the freshness gate passes on a fresh tree and fails when the token sheet c
     fs.rmSync(dir, { recursive: true, force: true });
   }
 });
+
+// task 1005133: the logo set joins the gate. Editing the one source (mark.svg) without
+// running gen-brand.js fails it; so does a PNG whose source page moved (the pack's ground)
+// or a PNG swapped by hand — the PNGs are checked by hash, not just their pixel size.
+test('the freshness gate covers the logo set: mark.svg, the pack and both PNGs', () => {
+  const dir = copiedTree();
+  const brand = path.join(dir, 'modules/ui-design/public/brand');
+  const gate = () => checkDesignGeneratorsFresh(dir).filter((x) => x.startsWith('the logo set'));
+  try {
+    assert.deepEqual(gate(), [], 'the copied logo set should start fresh');
+
+    const mark = path.join(brand, 'mark.svg');
+    const src = fs.readFileSync(mark, 'utf8');
+    const moved = src.replace(/(id="mark-dot"[^>]*?\br=")(\d+)/, (_, a, r) => a + (Number(r) + 1));
+    assert.notEqual(moved, src, 'mark.svg should carry the moon\'s radius');
+    fs.writeFileSync(mark, moved);
+    assert.ok(gate().some((x) => /mark-light\.svg/.test(x)), `editing mark.svg must fail the gate: ${gate().join('\n')}`);
+    fs.writeFileSync(mark, src);
+    assert.deepEqual(gate(), [], 'restoring mark.svg restores the gate');
+
+    const pngFile = path.join(brand, 'og-card.png');
+    const png = fs.readFileSync(pngFile);
+    const swapped = Buffer.from(png); swapped[swapped.length - 20] ^= 0xff; // same size, other bytes
+    fs.writeFileSync(pngFile, swapped);
+    assert.ok(gate().some((x) => /og-card\.png \(the file is not the one --png wrote\)/.test(x)), gate().join('\n'));
+    fs.writeFileSync(pngFile, png);
+
+    const packFile = path.join(dir, 'config/branding.neutral.json');
+    const pack = JSON.parse(fs.readFileSync(packFile, 'utf8'));
+    pack.theme.ui.colors.bg = '#edeced';
+    fs.writeFileSync(packFile, JSON.stringify(pack, null, 2));
+    assert.ok(gate().some((x) => /apple-touch-icon\.png \(its source page changed/.test(x)), gate().join('\n'));
+  } finally {
+    fs.rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+// task 1005134: two loopholes closed. (1) A sheet that names its colours as custom
+// properties used to count zero, so a new sheet could bypass its zero start; now
+// only the shared token definitions are exempt. (2) A page's inline <style> and the
+// error page's CSS string were never scanned; now they are, with baselines.
+const HALL_TOKENS = /^(?::root|html\[data-theme="dark"\]|html:not\(\[data-theme\]\))$/;
+
+test('a colour typed into a custom property counts, outside the shared token definitions', () => {
+  assert.equal(scan.countSheet(':root { --mine: #123456; }').colours, 1, ':root{--mine:#123456}');
+  assert.equal(scan.countSheet('body { --x: rgb(10, 20, 30); --y: hsl(1 2% 3%); }').colours, 2, 'body{--x:rgb(...)}');
+  assert.equal(scan.countSheet('.v { --veil: rgba(0, 0, 0, .4); --tone: var(--ink); }').colours, 0, 'a scrim and a reference are not typed-in colours');
+  assert.equal(scan.countSheet(':root { --mine: #123456; } .x { --y: #654321; }', { tokens: true }).colours, 0, 'the shared token sheet is exempt');
+  const hall = ':root { --a: #111111; } html[data-theme="dark"] { --a: #222222; } '
+    + '@media (prefers-color-scheme: dark) { html:not([data-theme]) { --a: #222222; } } '
+    + '.brand { --mark-ink: #333333; } @media (max-width: 1px) { .y { --z: #444444; } }';
+  assert.equal(scan.countSheet(hall, { tokens: HALL_TOKENS }).colours, 2, 'the hall token block is exempt; its other rules are not');
+});
+
+test('a NEW sheet that names its colours as custom properties fails fitness', () => {
+  const NEW = 'modules/x/public/new.css';
+  const { sheets } = scan.scanCssLiterals({ files: [NEW], read: () => ':root { --mine: #123456; } body { --x: rgb(1, 2, 3); }' });
+  const d = ratchets.compareDesignCounts(sheets, { _comment: 'note' });
+  assert.ok(d.violations.some((v) => v.includes(`colours in ${NEW} regressed: 2 > baseline 0`)), d.violations.join('\n'));
+  // …while a definition planted in the shared token sheet, or the hall's :root, stays exempt.
+  const planted = scan.scanCssLiterals({
+    read: (f) => readReal(f) + (f === 'modules/ui-design/public/tokens.css' || f === HALL_SHEET ? '\n:root { --mine: #123456; }\n' : ''),
+  });
+  assert.deepEqual(ratchets.checkQualityRatchets({ metrics: {}, designCounts: planted.sheets }).violations, []);
+  const leak = scan.scanCssLiterals({ read: (f) => readReal(f) + (f === HALL_SHEET ? '\n.planted { --mine: #123456; }\n' : '') });
+  const r = ratchets.checkQualityRatchets({ metrics: {}, designCounts: leak.sheets });
+  assert.ok(r.violations.some((v) => v.includes(`colours in ${HALL_SHEET} regressed`)), r.violations.join('\n'));
+});
+
+test('inline <style> blocks in served pages and the error page CSS are scanned', () => {
+  const PAGE = 'modules/public-landing/public/terms.html';
+  const ERR = 'src/error-page.js';
+  const { sheets } = scan.scanCssLiterals();
+  assert.ok(sheets[ERR], `${ERR} is scanned`);
+  assert.ok(sheets[PAGE], `${PAGE} is scanned`);
+  assert.ok(!Object.keys(sheets).some((f) => /\/styles\/[^/]+\/mock\.html$|\/specimens\/.*\.html$/.test(f)), 'unserved mocks and specimens are not');
+  assert.equal(scan.countSheet('').colours, 0);
+  const planted = scan.scanCssLiterals({
+    read: (f) => {
+      const t = readReal(f);
+      if (f === PAGE || f === ERR) return t.replace('</style>', '.planted { color: #123456; font-size: 13px; }\n</style>');
+      return t;
+    },
+  });
+  const r = ratchets.checkQualityRatchets({ metrics: {}, designCounts: planted.sheets });
+  for (const f of [PAGE, ERR]) {
+    assert.ok(r.violations.some((v) => v.includes(`colours in ${f} regressed`)), `${f} colours: ${r.violations.join('\n')}`);
+    assert.ok(r.violations.some((v) => v.includes(`font_sizes in ${f} regressed`)), `${f} sizes: ${r.violations.join('\n')}`);
+  }
+  // Text outside a <style> block is not CSS: a hex in a page's prose is not counted.
+  const prose = scan.scanCssLiterals({ read: (f) => readReal(f) + (f === PAGE ? '\n<p>color: #123456;</p>\n' : '') });
+  assert.deepEqual(prose.sheets[PAGE], sheets[PAGE]);
+});

package/tests/design_reference.mjs

@@ -88,7 +88,7 @@ test('the shared components, the logo and the naming rule are on the page', () =
   }
   assert.equal((PAGE.match(/data-ref="tones"[^>]*>(.*?)<\/div>/) || [])[1].match(/status-pill--/g).length, 6, 'six tones');
   assert.match(PAGE, /<use href="\/modules\/ui-design\/public\/brand\/mark\.svg#mark"\/>/, 'the mark is drawn from its one source');
-  assert.match(PAGE, /<span class="ref-lockup__name">cloud bongos<\/span>/, 'the wordmark is lowercase (DESIGN.md Naming)');
+  assert.match(PAGE, /<span class="ref-lockup__name">\{\{productName\}\}<\/span>/, 'the wordmark is the pack\'s name, stamped at serve time (task 1005135)');
   assert.match(PAGE, /Never &quot;CloudBongos&quot;/, 'the naming rule is read from DESIGN.md');
   for (const f of ['mark-light.svg', 'mark-dark.svg', 'mark-mono.svg', 'favicon.svg']) assert.ok(PAGE.includes(`brand/${f}"`), `lists ${f}`);
 });

package/tests/wordmark_and_faces.mjs

@@ -0,0 +1,111 @@
+// tests/wordmark_and_faces.mjs — the logo wordmark is the pack's name in lowercase, and
+// no served page loads a retired face (task 1005135, goal 1000138).
+//
+// DESIGN.md "Naming": beside the mark the name is lowercase ("cloud bongos"), and
+// platform code never hardcodes either spelling; it reads the pack. The UI check found
+// the status page, the 404/500 pages and the API docs showing "Cloud Bongos" beside the
+// mark, and /brand baking the neutral pack's name into its generated HTML. The sign-in
+// error and confirming-access pages still loaded Cinzel and EB Garamond. This pins:
+//   1. every wordmark beside the mark is the {{productName}} hole (stamped from the pack
+//      at serve time), never a typed-in name, and the rule that styles it lowercases it;
+//   2. no served page source (the auth pages, the sign-in shell, the error page, the API
+//      docs, the status page, the hall, the landing) names Cinzel or Garamond, and the
+//      rendered auth pages carry the pack's own font links instead;
+//   3. the error page declares no colour of its own: it reads the hall sheet's tier.
+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 require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const read = (rel) => fs.readFileSync(path.join(ROOT, rel), 'utf8');
+const stripComments = (s) => s.replace(/\/\*[\s\S]*?\*\//g, '').replace(/<!--[\s\S]*?-->/g, '').replace(/(^|[^:'"`\\])\/\/[^\n]*/g, '$1');
+
+const { errorPageTemplate } = require('../src/error-page.js');
+const { clientBranding } = require('../src/branding.js');
+const authRoutes = require('../src/bongos/routes/auth.js');
+const signIn = require('../src/bongos/sign-in-pages.js');
+
+// The CSS rule for a selector, from a sheet or an inline <style>. Throws when missing.
+function ruleOf(css, selector) {
+  const esc = selector.replace(/[.*+?^${}()|[\]\\#]/g, '\\$&');
+  const m = stripComments(css).match(new RegExp(`(?:^|[}\\s,])${esc}\\s*\\{([^}]*)\\}`));
+  assert.ok(m, `a rule for ${selector}`);
+  return m[1];
+}
+const lowercased = (body) => /text-transform\s*:\s*lowercase/.test(body);
+
+// Each wordmark beside the mark: [where, the markup that must carry the pack's hole, the
+// sheet that styles it, the selector of its rule].
+const WORDMARKS = [
+  ['the status page', read('modules/status-ui/public/index.html'), /<span class="topbar__name">\{\{productName\}\}<\/span>/, read('modules/status-ui/public/style.css'), '.topbar__name'],
+  ['the 404 page', errorPageTemplate(404), /<a class="name" href="\/">\{\{productName\}\}<\/a>/, errorPageTemplate(404), '.name'],
+  ['the 500 page', errorPageTemplate(500), /<a class="name" href="\/">\{\{productName\}\}<\/a>/, errorPageTemplate(500), '.name'],
+  ['the API docs', read('public-docs/index.html'), /<span class="wordmark">\{\{productName\}\}<\/span>/, read('public-docs/index.html'), '#topbar .wordmark'],
+  ['/brand (bar)', read('modules/ui-design/public/brand.html'), /<a class="ref-head__brand"[^>]*>.*<span>\{\{productName\}\}<\/span><\/a>/, read('modules/ui-design/public/brand.css'), '.ref-head__brand'],
+  ['/brand (lockup)', read('modules/ui-design/public/brand.html'), /<span class="ref-lockup__name">\{\{productName\}\}<\/span>/, read('modules/ui-design/public/brand.css'), '.ref-lockup'],
+  ['the hall', read('modules/hall-ui/public/style.css'), /\.brand-mark\s*\{/, read('modules/hall-ui/public/style.css'), '.brand-mark'],
+];
+
+test('every wordmark beside the mark is the pack\'s name, lowercased by its rule', () => {
+  for (const [where, markup, hole, css, selector] of WORDMARKS) {
+    assert.match(markup, hole, `${where}: the wordmark is the {{productName}} hole`);
+    assert.ok(lowercased(ruleOf(css, selector)), `${where}: ${selector} sets text-transform: lowercase`);
+  }
+});
+
+test('no typed-in product name beside the mark', () => {
+  // A capitalised (or any) literal in a wordmark element is exactly the regression.
+  const literal = /class="(?:topbar__name|name|wordmark|ref-lockup__name)"[^>]*>(?!\{\{)[^<]+</;
+  for (const [where, markup] of WORDMARKS) assert.doesNotMatch(markup, literal, `${where}: no literal name in the wordmark`);
+  assert.doesNotMatch(read('modules/ui-design/public/brand.html'), /ref-head__brand[^>]*>.*<span>(?!\{\{)[^<]+<\/span><\/a>/, '/brand bar: no literal name');
+  // the generator writes the hole, never the pack's name it happened to read
+  assert.doesNotMatch(read('modules/ui-design/scripts/gen-design-reference.js'), /productName\)?\.toLowerCase\(\)|product\.toLowerCase\(\)/);
+});
+
+const RETIRED = /Cinzel|Garamond/i;
+const SERVED = [
+  'src/bongos/routes/auth.js', 'src/bongos/sign-in-pages.js', 'src/bongos/routes/auth-google.js', 'src/error-page.js',
+  'public-docs/index.html', 'modules/status-ui/public/index.html', 'modules/status-ui/public/style.css',
+  'modules/ui-design/public/brand.html', 'modules/ui-design/public/brand.css',
+  'modules/hall-ui/public/style.css', 'modules/hall-ui/public/controls.css',
+];
+
+test('no served page source loads a retired face', () => {
+  for (const rel of SERVED) {
+    if (!fs.existsSync(path.join(ROOT, rel))) continue;
+    // read raw: a comment stripper over JS eats template strings (a `/*` in a URL glob),
+    // so these files name the retired faces nowhere at all, comments included
+    assert.doesNotMatch(read(rel), RETIRED, `${rel} names a retired face`);
+  }
+});
+
+test('the auth pages carry the pack\'s faces and the shared sheet, and nothing else', () => {
+  const links = (clientBranding().theme && clientBranding().theme.fonts && clientBranding().theme.fonts.links) || [];
+  const pages = [
+    ['sign-in error', authRoutes.renderAuthErrorPage('Sign-in failed', 'The sign-in did not complete.')],
+    ['confirming access', authRoutes.renderAccessPendingPage('someone', '/api/bongos/auth/web/start')],
+    ['sign-in chooser', signIn.renderSignInChooser({ githubHref: '/g', googleHref: '/o' })],
+  ];
+  for (const [name, html] of pages) {
+    assert.ok(html.includes('<link rel="stylesheet" href="/builders/style.css">'), `${name}: the hall sheet`);
+    for (const href of links) assert.ok(html.includes(href.replace(/&/g, '&amp;')), `${name}: the pack's font link ${href}`);
+    const own = html.match(/https:\/\/fonts\.googleapis\.com\/css2\?[^"]*/g) || [];
+    for (const href of own) assert.ok(links.some((l) => l.replace(/&/g, '&amp;') === href || l === href), `${name}: ${href} is not the pack's`);
+  }
+});
+
+test('the error page declares no colour of its own', () => {
+  for (const status of [404, 500]) {
+    const html = errorPageTemplate(status);
+    const style = (html.match(/<style>([\s\S]*?)<\/style>/) || [])[1] || '';
+    assert.ok(style, 'the page has its layout rules');
+    const declarations = style.replace(/--[\w-]+\s*:[^;}]*/g, '');
+    assert.doesNotMatch(style, /--(bg|ink|accent|rule)[\w-]*\s*:/, 'no colour token is defined on the page');
+    assert.doesNotMatch(declarations, /#[0-9a-f]{3,8}\b|rgba?\(/i, 'no typed-in colour');
+    assert.ok(html.includes('<link rel="stylesheet" href="/modules/hall-ui/public/style.css">'), 'the colours come from the shared sheet');
+  }
+});