@bongos/core 1.19.387 → 1.19.389

package/tests/platform_boot.mjs

@@ -115,7 +115,9 @@ test('the apex host serves the landing page — not the game — on a game-less
   assert.match(res.body, /window\.__BRANDING__=/);
   // task 1002934: the doors became two bare buttons; "Find a Project" is the
   // portable landing marker now ("Enter the Hall" left with the door cards).
-  assert.match(res.body, /Find a Project/);
+  // task 1003298: the chrome-world landing sets its doors in sentence case
+  // ("Find a project") — the marker is the phrase, not its capitalisation.
+  assert.match(res.body, /Find a [Pp]roject/);
   // the per-project landing carries the top-right identity chip + hall entry
   // (goal 35, task 2094). "Create a project" is an ORG-level action that lives
   // only on the gate now — it must NOT appear on a project's own landing.

package/tests/projects_hub.mjs

@@ -419,13 +419,17 @@ test('the wordmark rests on the real product name, not on a joke', () => {
   assert.ok(home > hold, 'the resting state must outlast the alternates');
 });
 
-test('the hub and the landing hero share one typing cadence', () => {
-  // two surfaces, one system — a divergence here is a visible inconsistency
+test('the hub wordmark keeps its own typing cadence; the landing hero no longer types (task 1003298)', () => {
+  // The landing's self-typing eyebrow ("type bongos in any AI") retired with the
+  // chrome world: its hero is the h1, the lede and the doors, and its only motion is
+  // the CSS breath. The hub's typing wordmark stays; a shared cadence is no longer a
+  // thing to keep in step, so this pins the hub half and the landing's silence.
   const LANDING = fs.readFileSync(path.join(ROOT, 'public-landing', 'index.html'), 'utf8');
-  const heroHolds = [...LANDING.matchAll(/\?\s*(\d+)\s*:\s*(\d+)\)/g)].map(m => [m[1], m[2]]).flat();
+  assert.doesNotMatch(LANDING, /id="typed"|setTimeout\(type\b/, 'the landing hero does not type');
   const mark = (SCRIPT.match(/function typeMark\(\)([\s\S]*?)\n  \}\)\(\);/) || [, ''])[1];
-  for (const n of [mark.match(/HOLD_HOME\s*=\s*(\d+)/)[1], mark.match(/HOLD\s*=\s*(\d+)/)[1]]) {
-    assert.ok(heroHolds.includes(n), `hold ${n}ms should match the hero's cadence (${heroHolds.join('/')})`);
+  assert.ok(mark, 'the hub wordmark still types');
+  for (const name of ['HOLD_HOME', 'HOLD']) {
+    assert.match(mark, new RegExp(name + '\\s*=\\s*\\d+'), `the hub declares ${name}`);
   }
 });
 

package/tests/projects_hub_pre_uat.mjs

@@ -305,7 +305,9 @@ test('decision 9 — only mouse-driven focus on a wizard heading goes ringless',
 test('decision 10 — both footers carry the open-source (AGPL-3.0) link, in link ink', () => {
   const AGPL = /<a href="https:\/\/www\.gnu\.org\/licenses\/agpl-3\.0\.html" target="_blank" rel="noopener">Open source \(AGPL-3\.0\)<\/a>\./;
   const hubFoot = (HUB.match(/<footer class="foot">[\s\S]*?<\/footer>/) || [''])[0];
-  const indexFoot = (INDEX.match(/<div class="foot">[\s\S]*?<\/div>/) || [''])[0];
+  // task 1003298: the chrome-world landing's footer is a real <footer>; the
+  // pre-world page used <div class="foot">. Either element is the footer.
+  const indexFoot = (INDEX.match(/<footer(?:\s[^>]*)?>[\s\S]*?<\/footer>|<div class="foot">[\s\S]*?<\/div>/) || [''])[0];
   assert.match(hubFoot, AGPL, 'projects.html');
   assert.match(indexFoot, AGPL, 'index.html');
   // the link sits OUTSIDE the apex-only span, so a child instance keeps it too

package/tests/world_tokens.mjs

@@ -0,0 +1,351 @@
+// tests/world_tokens.mjs — the chrome world's token layer (task 1003298, goal 1000080).
+//
+// public-landing/assets/world.css is the world the apex landing is built in: a
+// contract tier of fifteen tokens a host branding pack overrides, and a derived
+// tier (the void, the glass, the accent behaviours, the state colours, the
+// plates) that must be a var() or a color-mix() of those fifteen so a re-themed
+// instance still gets a coherent world.
+//
+// This file mirrors tests/cosmos_token_contrast.mjs's method for that sheet: the
+// TOKENS are the only input — it parses world.css and resolves var()/color-mix()
+// itself, so it measures what the surfaces actually paint. Duplicating the hex
+// values here would prove nothing. The resolver is COPIED rather than imported
+// because cosmos_token_contrast.mjs is a test file, not a module, and exporting
+// from it would make one file's failure silence the other's.
+//
+// What it locks, all of it silent in a browser:
+//   * DRIFT — the contract tier is a dead default (the pack always wins), so a
+//     value can rot here and nobody sees the colour they audited;
+//   * LOCKSTEP — dark is written twice (a data-mode hook and a
+//     prefers-color-scheme twin); a change to one only works for half of users;
+//   * RE-THEMEABILITY — both dark blocks are (0,2,0) and the pack's :root is
+//     (0,1,0), so a literal --accent in a dark block outranks every pack forever;
+//   * THE PLATES — a url() inside a custom property resolves against the
+//     DOCUMENT, not this sheet, so a relative path 404s from every other route;
+//   * CONTRAST — every pair the landing paints, in both modes;
+//   * THE KILL SWITCH — the whole world's reduced-motion stop, which must be
+//     present and LAST, because a later rule re-declaring animation would
+//     outrank it on source order.
+
+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 LANDING = path.join(ROOT, 'public-landing');
+const CSS = path.join(LANDING, 'assets', 'world.css');
+const src = fs.readFileSync(CSS, 'utf8');
+const PAGE = fs.readFileSync(path.join(LANDING, 'index.html'), 'utf8');
+
+// ── parse ────────────────────────────────────────────────────────────────────
+const declarations = (body) => {
+  const out = {};
+  // strip comments, then take --name:value up to the ; that ends the declaration
+  for (const m of body.replace(/\/\*[\s\S]*?\*\//g, '').matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)) {
+    // collapse the whitespace of multi-line values so the lockstep check compares
+    // meaning, not indentation
+    out[m[1]] = m[2].replace(/\s+/g, ' ').trim();
+  }
+  return out;
+};
+
+const bodyAt = (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 at offset ${open}`);
+};
+
+const endOf = (open) => {
+  let depth = 0;
+  for (let i = open; i < src.length; i++) {
+    if (src[i] === '{') depth++;
+    else if (src[i] === '}' && --depth === 0) return i;
+  }
+  throw new Error(`unbalanced braces at offset ${open}`);
+};
+
+const blockAfter = (marker) => {
+  const at = src.indexOf(marker);
+  assert.notEqual(at, -1, `world.css no longer contains ${marker} — update this test`);
+  return bodyAt(src.indexOf('{', at));
+};
+
+// The top-level bare :root — the contract tier and the derived tier in one
+// block. The narrow-width `--top-h` override is INDENTED inside a @media, so the
+// anchored newline is what keeps it out of the map (it is a geometry token and
+// carries no colour).
+const bareRoots = [...src.matchAll(/\n:root\s*\{/g)];
+assert.equal(bareRoots.length, 1, 'expected exactly one top-level :root block in world.css');
+const contractTier = declarations(bodyAt(src.indexOf('{', bareRoots[0].index)));
+
+const darkExplicit = declarations(blockAfter(':root[data-mode="dark"] {'));
+const darkMedia = declarations(blockAfter(':root:not([data-mode="light"]) {'));
+
+// THE CASCADE THAT ACTUALLY SHIPS. injectBrandingGlobal splices the branding
+// pack's theme <style> at the END of <head> — after the world.css <link> — as a
+// plain :root. Equal specificity, later in document order, so for the tokens the
+// 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(
+  fs.readFileSync(path.join(ROOT, 'config', 'branding.neutral.json'), 'utf8'),
+).theme.ui;
+
+// mirrors COLOR_VARS in src/bongos/serve-internal.js
+const camelToVar = (k) => '--' + k.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
+const PACK = Object.fromEntries(
+  Object.entries(packUi.colors).map(([k, v]) => [camelToVar(k), v]),
+);
+
+const RAW = {
+  light: { ...contractTier, ...PACK },
+  dark: { ...contractTier, ...PACK, ...darkExplicit },
+};
+
+// ── color resolution ─────────────────────────────────────────────────────────
+const clamp = (v) => Math.min(255, Math.max(0, v));
+
+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(/^#([0-9a-f]{3})$/i);
+  if (m) return [...m[1]].map((c) => parseInt(c + c, 16)).concat(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) {
+    const name = m[1];
+    assert.ok(!seen.has(name), `cyclic var reference at ${name}`);
+    const next = RAW[mode][name] ?? m[2];
+    assert.ok(next !== undefined, `${name} is not defined for ${mode} mode`);
+    return resolve(next, mode, new Set([...seen, name]));
+  }
+
+  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;
+    const a = resolve(m[1], mode, seen);
+    const b = resolve(m[3], mode, seen);
+    // color-mix premultiplies by alpha; every pair asserted below resolves
+    // opaque, and `transparent` correctly drags the result toward the other operand.
+    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 color expression: ${e}`);
+}
+
+// flatten a possibly-translucent color onto an opaque backdrop
+const over = (fg, bg) =>
+  fg[3] === 1 ? fg : [0, 1, 2].map((i) => clamp(fg[i] * fg[3] + bg[i] * (1 - fg[3]))).concat(1);
+
+const lin = (c) => { c /= 255; return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; };
+const lum = ([r, g, b]) => 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+const contrast = (fg, bg) => {
+  const [hi, lo] = [lum(fg), lum(bg)].sort((a, b) => b - a);
+  return (hi + 0.05) / (lo + 0.05);
+};
+
+const hex = (c) => '#' + c.slice(0, 3).map((v) => Math.round(v).toString(16).padStart(2, '0')).join('');
+
+// ── (a) the contract tier is the pack ────────────────────────────────────────
+
+test('world.css defaults do not drift from the branding pack', () => {
+  // For the pack-owned tokens, world.css's :root is a DEAD DEFAULT — the pack
+  // always overrides it. That makes silent drift easy and dangerous: anyone
+  // auditing the sheet alone would measure colours no visitor ever sees, and the
+  // 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 };
+  for (const [name, packValue] of Object.entries(expected)) {
+    const cssValue = contractTier[name];
+    if (cssValue === undefined) {
+      drift.push(`${name}: absent from world.css :root — the sheet cannot stand alone`);
+      continue;
+    }
+    if (cssValue.toLowerCase() !== String(packValue).toLowerCase()) {
+      drift.push(`${name}: world.css ${cssValue} vs pack ${packValue}`);
+    }
+  }
+  assert.deepEqual(drift, [], `\n  ${drift.join('\n  ')}\n`);
+});
+
+// ── (b) the two dark blocks are one block, written twice ─────────────────────
+
+test('the two dark blocks stay in lockstep', () => {
+  // world.css carries dark twice — an explicit data-mode hook (the toggle) and a
+  // prefers-color-scheme twin (the OS setting). A change to one and not the
+  // other is the classic regression here, and it only shows up for half of users.
+  assert.deepEqual(
+    darkMedia,
+    darkExplicit,
+    'the @media (prefers-color-scheme: dark) twin drifted from :root[data-mode="dark"]',
+  );
+});
+
+// ── (c) dark never pins a token the pack owns ────────────────────────────────
+
+test('the dark blocks never pin a token the branding pack owns', () => {
+  // The pack injects a plain :root — specificity (0,1,0). Both dark selectors are
+  // (0,2,0), so ANY literal declared there outranks the pack forever and that
+  // instance wears Cloud Bongos' salmon in dark mode. A dark override of a
+  // pack-settable token is only safe if it DERIVES from one (var(--…)) — which is
+  // exactly what --accent-deep does here, brightening the accent for a black ground.
+  const PACK_OWNED = ['--accent', '--sea', '--terracotta', '--accent-deep'];
+  for (const [where, block] of [
+    [':root[data-mode="dark"]', darkExplicit],
+    ['the prefers-color-scheme twin', darkMedia],
+  ]) {
+    for (const name of PACK_OWNED) {
+      const v = block[name];
+      if (v === undefined) continue; // absent = the pack reaches dark. Ideal.
+      assert.match(
+        v,
+        /var\(--/,
+        `${where}: ${name} is pinned to a literal — a re-themed instance can never reach dark`,
+      );
+    }
+  }
+});
+
+// ── (d) the plates ───────────────────────────────────────────────────────────
+
+test('every plate is root-absolute and the file is there', () => {
+  // Chromium resolves a url() inside a CUSTOM PROPERTY against the document, not
+  // against the stylesheet that declared it. A relative path here would load from
+  // / and 404 on every route but this file's own folder — and a missing plate is
+  // an empty box, not an error, so nothing tells you.
+  const urls = [...src.matchAll(/url\(\s*(["']?)([^)"']+)\1\s*\)/g)]
+    .map((m) => m[2].trim())
+    .filter((u) => !u.startsWith('data:'));
+  assert.ok(urls.length >= 6, 'the world names six plates in pairs — update this test');
+  const bad = [];
+  for (const u of urls) {
+    if (!u.startsWith('/')) { bad.push(`${u} is not root-absolute`); continue; }
+    const abs = path.join(LANDING, u.replace(/^\//, ''));
+    if (!fs.existsSync(abs)) bad.push(`${u} does not exist under public-landing/`);
+  }
+  assert.deepEqual(bad, [], `\n  ${bad.join('\n  ')}\n`);
+  // the pairs the world promises: a black-ground plate for dark, its alpha cutout
+  // for light. A half-pair means one mode silently falls back to the other's material.
+  for (const token of ['--plate-set', '--plate-bead', '--plate-bongos']) {
+    assert.ok(contractTier[token], `${token} is gone`);
+    assert.ok(contractTier[`${token}-cut`], `${token}-cut is gone — light has no cutout`);
+  }
+});
+
+// ── (e) the pairs the landing paints ─────────────────────────────────────────
+// need: 4.5 normal text · 3.0 large text and meaningful non-text.
+// world.css's own comments name no ratios, so this list is the landing's real
+// paint, read off public-landing/index.html: --ink/--ink-soft/--ink-faint on the
+// page ground and on the card, the accent inks, the focus ring and the void.
+const PAIRS = [
+  // the hero and every band: h1/.fig/.orb-name are --ink, .lede/.cap/.sub/.clause
+  // are --ink-soft, .label/.beat .step/.rows .id are --ink-faint, all on --bg.
+  ['--ink on the page ground',        'var(--ink)',           'var(--bg)',        4.5],
+  ['--ink-soft on the page ground',   'var(--ink-soft)',      'var(--bg)',        4.5],
+  ['--ink-faint on the page ground',  'var(--ink-faint)',     'var(--bg)',        4.5],
+  // the pills: .pill and the skip link sit on --bg-card (light) / a glass over
+  // the ground (dark); --bg-card is the opaque worst case for both.
+  ['--ink on a card',                 'var(--ink)',           'var(--bg-card)',   4.5],
+  ['--ink-soft on a card',            'var(--ink-soft)',      'var(--bg-card)',   4.5],
+  // the underlined links: .more ("Open the map") and every footer link.
+  ['--accent-ink link on the ground', 'var(--accent-ink)',    'var(--bg)',        4.5],
+  // the primary door's label on its accent FILL, and ::selection. The world's
+  // salmon carries white at 2.19:1, which is why --accent-on is a dark ink.
+  ['--accent-on on the accent fill',  'var(--accent-on)',     'var(--accent)',    4.5],
+  // hover keeps the same ink on the lifted fill
+  ['--accent-on on the hover lift',   'var(--accent-on)',     'var(--accent-lift)', 4.5],
+  // the void is dark-only: in light no black panel is painted anywhere (that IS
+  // the light answer), so measuring --void there would measure a pairing nothing
+  // renders.
+  ['--void-ink on the void',          'var(--void-ink)',      'var(--void)',      4.5, 'dark'],
+  ['--void-ink-soft on the void',     'var(--void-ink-soft)', 'var(--void)',      4.5, 'dark'],
+  // :focus-visible — non-text at WCAG 1.4.11's 3:1. The ring rides inside a --bg
+  // halo, so the ground is what it must clear.
+  ['--focus ring on the ground',      'var(--focus)',         'var(--bg)',        3.0],
+  // the lit rail dot, non-text at 3:1 — DARK ONLY. See the companion test below:
+  // in light the world's salmon is 1.86:1 on the pale ground, and the lit step is
+  // identified there by FILL (an empty ring becomes a solid disc) rather than by
+  // hue, which is what 1.4.1 and 1.4.11 actually ask for.
+  ['the lit rail dot on the ground',  'var(--accent)',        'var(--bg)',        3.0, 'dark'],
+];
+
+for (const mode of ['light', 'dark']) {
+  test(`world.css tokens clear WCAG AA in ${mode} mode`, () => {
+    const ground = resolve('var(--bg)', mode);
+    const failures = [];
+    for (const [what, fgExpr, bgExpr, need, onlyMode] of PAIRS) {
+      if (onlyMode && onlyMode !== mode) continue;
+      const bg = over(resolve(bgExpr, mode), ground);
+      const fg = over(resolve(fgExpr, mode), bg);
+      const got = contrast(fg, bg);
+      if (got < need) {
+        failures.push(`${what}: ${got.toFixed(2)}:1 (needs ${need}) — ${hex(fg)} on ${hex(bg)}`);
+      }
+    }
+    assert.deepEqual(failures, [], `\n  ${failures.join('\n  ')}\n`);
+  });
+}
+
+test('the lit rail step is identified in light by fill, not by the accent alone', () => {
+  // The companion to the dark-only accent row above, and the reason it is
+  // dark-only. On the pale ground the accent measures 1.86:1, so if the lit step
+  // were told from the idle ones by HUE it would fail both 1.4.1 (use of colour)
+  // and 1.4.11. It is not: the idle dot is an unfilled ring, the lit dot is a
+  // solid disc, and the idle ring's own --ink-faint border clears 3:1 on the
+  // ground — so the state reads as a shape difference with the accent as
+  // reinforcement. If the dots ever become the same shape, this test is the one
+  // that has to fail before the contrast row can be re-armed.
+  const css = PAGE.match(/<style>([\s\S]*?)<\/style>/)[1].replace(/\/\*[\s\S]*?\*\//g, '');
+  const idle = css.match(/\.beat \.dot\{([^}]*)\}/);
+  const lit = css.match(/\.beat \.lit \.dot\{([^}]*)\}/);
+  assert.ok(idle && lit, 'the rail dots moved — update this test');
+  assert.doesNotMatch(idle[1], /background/, 'the idle dot must stay an unfilled ring');
+  assert.match(idle[1], /border:[^;]*var\(--ink-faint\)/);
+  assert.match(lit[1], /background:\s*var\(--accent\)/, 'the lit dot must be a filled disc');
+  const ground = resolve('var(--bg)', 'light');
+  const ring = contrast(over(resolve('var(--ink-faint)', 'light'), ground), ground);
+  assert.ok(ring >= 3.0, `the idle ring is ${ring.toFixed(2)}:1 on the ground (needs 3.0)`);
+});
+
+// ── (f) the kill switch ──────────────────────────────────────────────────────
+
+test('the reduced-motion kill switch is present, universal, and LAST', () => {
+  // Every animation in this world is authored on a plate or a control, and this
+  // one block is what stops all of them — the page itself carries no
+  // prefers-reduced-motion rule (tests/landing_page.mjs locks that half). It has
+  // to be last: `animation: none !important` loses to a LATER !important
+  // declaration on source order, so a rule appended below it would escape.
+  const at = src.search(/@media\s*\(prefers-reduced-motion:\s*reduce\)/);
+  assert.notEqual(at, -1, 'world.css must keep a prefers-reduced-motion block');
+  const open = src.indexOf('{', at);
+  const body = bodyAt(open);
+  assert.match(
+    body,
+    /\*\s*,\s*\*::before\s*,\s*\*::after\s*\{[^}]*animation:\s*none\s*!important/,
+    'the universal selector + !important is what stops the sculpture',
+  );
+  assert.match(body, /transition:\s*none\s*!important/, 'the transitions stop too');
+  assert.equal(
+    src.slice(endOf(open) + 1).trim(),
+    '',
+    'a rule follows the kill switch — anything after it can outrank it on source order',
+  );
+});