@bongos/core 1.19.88 → 1.19.90

package/tests/cosmos_token_contrast.mjs

@@ -0,0 +1,268 @@
+// Guards the WCAG AA contrast of the cosmos.css token layer (task 1002749).
+//
+// The tokens are the ONLY input here: this test PARSES public-landing/assets/cosmos.css
+// and resolves var()/color-mix() itself, so it measures what the surfaces actually paint.
+// Duplicating the hex values would prove nothing.
+//
+// AA thresholds: 4.5:1 normal text, 3.0:1 large text (>=24px, or >=18.66px bold) and
+// meaningful non-text boundaries. Every pair below is a real selector in cosmos.css.
+
+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 CSS = path.join(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '..', 'public-landing', 'assets', 'cosmos.css'
+);
+const src = fs.readFileSync(CSS, '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 blockAfter = (marker) => {
+  const at = src.indexOf(marker);
+  assert.notEqual(at, -1, `cosmos.css no longer contains ${marker} — update this test`);
+  return bodyAt(src.indexOf('{', at));
+};
+
+// A bare :root appears twice: the contract/chrome tier first, the derived tier last.
+// Both feed both modes, so the two merge into one raw map per mode.
+const bareRoots = [...src.matchAll(/\n:root\{/g)].map((m) => bodyAt(src.indexOf('{', m.index)));
+assert.equal(bareRoots.length, 2, 'expected exactly two bare :root blocks in cosmos.css');
+const [contractTier, derivedTier] = bareRoots.map(declarations);
+const firstRoot = contractTier;
+const derived = derivedTier;
+
+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 cosmos.css <link> — as a plain
+// :root. Equal specificity, later in document order, so for the 13 tokens the pack
+// emits the PACK wins and cosmos.css's own :root value never renders. Measuring
+// cosmos.css alone would measure a page nobody sees.
+// The dark blocks are :root[data-mode="dark"] and :root:not([data-mode="light"]) —
+// both (0,2,0) — so they outrank the pack's (0,1,0) and win back.
+const packColors = JSON.parse(
+  fs.readFileSync(path.join(path.dirname(CSS), '..', '..', 'config', 'branding.neutral.json'), 'utf8')
+).theme.ui.colors;
+
+// 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(packColors).map(([k, v]) => [camelToVar(k), v])
+);
+
+const RAW = {
+  light: { ...firstRoot, ...derived, ...PACK },
+  dark: { ...firstRoot, ...derived, ...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 we assert on 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('');
+
+// ── the pairs cosmos.css actually paints ─────────────────────────────────────
+// need: 4.5 normal text · 3.0 large text and meaningful non-text
+const CARD = 'var(--bg-card)';
+const PAIRS = [
+  // primary + secondary action
+  ['.btn label on its fill',            '#ffffff',              'var(--accent)',        4.5],
+  ['.btn.ghost:hover label',            'var(--accent-deep)',   CARD,                   4.5],
+  ['.btn.danger label',                 'var(--err)',           CARD,                   4.5],
+  // Inline links: cosmos.css recolors its own to --sun-lit in dark (:179-262), but
+  // create.html has ELEVEN --accent-deep consumers and zero dark CSS rules (its only
+  // data-mode hits are the JS toggle), so there the token itself must carry dark.
+  ['inline link on a card',             'var(--accent-deep)',   CARD,                   4.5],
+  ['inline link on the page ground',    'var(--accent-deep)',   'var(--bg)',            4.5],
+  ['code chip on --bg-deep',            'var(--accent-deep)',   'var(--bg-deep)',       4.5],
+  ['cosmos.css dark link (--sun-lit)',  'var(--sun-lit)',       CARD,                   4.5, 'dark'],
+  // body copy
+  ['--ink body copy',                   'var(--ink)',           CARD,                   4.5],
+  ['--ink-soft secondary copy',         'var(--ink-soft)',      CARD,                   4.5],
+  ['--ink-faint .projMeta 13px',        'var(--ink-faint)',     CARD,                   4.5],
+  ['--ink-faint .finePrint on ground',  'var(--ink-faint)',     'var(--bg)',            4.5],
+  // chips: 12px/700 label on its own tint
+  ['.chip base label',                  'var(--ink-soft)',      'var(--neutral-soft)',  4.5],
+  ['.chip.calm label',                  'var(--ink-faint)',     'var(--neutral-soft)',  4.5],
+  ['.chip.live label',                  'var(--ok)',            'var(--ok-soft)',       4.5],
+  ['.chip.maybe label',                 'var(--warn)',          'var(--warn-soft)',     4.5],
+  ['.chip.down/.bad label',             'var(--err)',           'var(--err-soft)',      4.5],
+  // .chip.busy recolors in dark (cosmos.css:194-195) — assert what each mode paints
+  ['.chip.busy label',                  'var(--accent-deep)',   'var(--accent-soft)',   4.5, 'light'],
+  ['.chip.busy label',                  'var(--sun-lit)',       'var(--accent-soft)',   4.5, 'dark'],
+  // lifecycle strip: 12px/700
+  ['.strip .slbl idle',                 'var(--ink-faint)',     CARD,                   4.5],
+  ['.strip .slbl now/done',             'color-mix(in srgb,var(--sea) 40%,var(--ink))',       CARD, 4.5],
+  ['.strip.isLive .slbl',               'var(--ok)',            CARD,                   4.5],
+  // status messages
+  ['.projMsg.ok',                       'var(--ok)',            CARD,                   4.5],
+  ['.projMsg.err / .confirmRow',        'var(--err)',           CARD,                   4.5],
+  // chrome: wordmark + footer sit on the page ground, not on a card
+  // create.html page-local grounds — it carries its own <style> and its own
+  // darkest tints, so cosmos.css's pairs alone do not cover /create
+  ['create.html .ghrow .priv 11px',     'var(--ink-soft)',      'color-mix(in srgb,var(--ink) 8%,var(--bg-deep))', 4.5],
+  ['create.html ::placeholder',         'var(--ink-faint)',     CARD,                   4.5],
+  ['create.html .ghlist .hint on deep', 'var(--ink-faint)',     'var(--bg-deep)',       4.5],
+  ['--chrome-accent wordmark',          'var(--chrome-accent)', 'var(--page-bg)',       4.5],
+  ['--chrome-ink',                      'var(--chrome-ink)',    'var(--page-bg)',       4.5],
+  ['--foot-ink footer copy',            'var(--foot-ink)',      'var(--page-bg)',       4.5],
+  ['--foot-code footer code',           'var(--foot-code)',     'var(--page-bg)',       4.5],
+  ['--hero-b hero emphasis',            'var(--hero-b)',        'var(--bg)',            4.5],
+  ['--hero-lede hero lede',             'var(--hero-lede)',     'var(--bg)',            4.5],
+];
+
+for (const mode of ['light', 'dark']) {
+  test(`cosmos.css tokens clear WCAG AA in ${mode} mode`, () => {
+    const ground = resolve('var(--page-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 two dark blocks stay in lockstep', () => {
+  // cosmos.css carries dark twice — an explicit data-mode hook and a
+  // prefers-color-scheme twin. 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"]'
+  );
+});
+
+test('cosmos.css defaults do not drift from the branding pack', () => {
+  // For the 13 pack-owned tokens, cosmos.css's :root is a dead default — the pack
+  // always overrides it. That makes silent drift easy and dangerous: it was already
+  // real (cosmos.css said --ink-faint:#9c8d80, the pack shipped #857567), and it
+  // means anyone auditing cosmos.css alone measures colors no user ever sees.
+  const drift = [];
+  for (const [name, packValue] of Object.entries(PACK)) {
+    const cssValue = firstRoot[name];
+    if (cssValue === undefined) continue;
+    if (cssValue.toLowerCase() !== packValue.toLowerCase()) {
+      drift.push(`${name}: cosmos.css ${cssValue} vs pack ${packValue}`);
+    }
+  }
+  assert.deepEqual(drift, [], `\n  ${drift.join('\n  ')}\n`);
+});
+
+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 gets Cloud Bongos' color in dark mode. A dark override of a
+  // pack-settable token is only safe if it DERIVES from one (var(--…)).
+  const PACK_OWNED = ['--accent', '--accent-deep', '--sea', '--terracotta'];
+  for (const block of [darkExplicit, 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\(--/,
+        `${name} is pinned to a literal in a dark block — a re-themed instance can never override it`
+      );
+    }
+  }
+});
+
+test('every accent-derived chrome token follows its contract token', () => {
+  // A branding pack re-themes the contract tier. Any chrome token that hardcodes
+  // the platform orange instead of referencing --accent leaks Cloud Bongos orange
+  // into a re-themed instance (ADR 0062 §7).
+  for (const [name, expected] of [
+    ['--chrome-accent', /var\(--accent(-deep)?\)/],
+    ['--glass-border', /var\(--accent(-deep)?\)/],
+    ['--hero-b', /var\(--accent(-deep)?\)/],
+    ['--foot-code', /var\(--accent(-deep)?\)/],
+    ['--foot-ink', /var\(--ink[\w-]*\)/],
+  ]) {
+    assert.match(
+      firstRoot[name] ?? '',
+      expected,
+      `${name} hardcodes a color instead of following the contract tier`
+    );
+  }
+});

package/tests/gate_launch_metadata.mjs

@@ -0,0 +1,67 @@
+// tests/gate_launch_metadata.mjs — the landing gate is discoverable and degrades
+// without JavaScript (task 1002746).
+//
+// WHY THIS EXISTS. Until the front door moves to the landing page
+// (docs/design/front-door-and-hub-direction.md), public-landing/gate/index.html is
+// what answers cloudbongos.com/ — so it is what search results and link previews
+// describe, and what a JS-off visitor or a non-executing crawler receives. It
+// shipped with an internal-sounding <title>, no description, no social tags, and
+// no <noscript>, and the sky is entirely JS-built, so that visitor got a blank
+// page. The whole host is noindex pre-launch, which is exactly why the gap went
+// unnoticed — it costs nothing until the lock comes off, then it costs everything
+// at once.
+//
+// Pure disk read: no server boot, no DB, no network — this asserts the shipped
+// artifact, which is the thing that actually reaches a crawler.
+
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const REPO_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const GATE = path.join(REPO_ROOT, 'public-landing', 'gate', 'index.html');
+const html = fs.readFileSync(GATE, 'utf8');
+
+test('the gate carries a real product title, not an internal label', () => {
+  const title = (html.match(/<title>([^<]*)<\/title>/) || [])[1] || '';
+  assert.ok(title.trim().length > 0, 'the gate must have a <title>');
+  // "Cloud Bongos — landing gate" described the file to us, not the product to a
+  // stranger reading a search result.
+  assert.doesNotMatch(title, /landing gate/i, `<title> must not read as an internal label: ${title}`);
+  assert.match(title, /Cloud Bongos/);
+});
+
+test('the gate is describable by a crawler and a link preview', () => {
+  assert.match(html, /<meta\s+name="description"\s+content="[^"]{40,}"/, 'needs a meta description');
+  assert.match(html, /<link\s+rel="canonical"\s+href="https:\/\/cloudbongos\.com\/"/);
+  for (const prop of ['og:type', 'og:site_name', 'og:url', 'og:title', 'og:description', 'og:image']) {
+    assert.match(html, new RegExp(`property="${prop}"`), `missing ${prop}`);
+  }
+  for (const name of ['twitter:card', 'twitter:title', 'twitter:description', 'twitter:image']) {
+    assert.match(html, new RegExp(`name="${name}"`), `missing ${name}`);
+  }
+});
+
+test('the gate degrades to real content without JavaScript', () => {
+  const block = (html.match(/<noscript>([\s\S]*?)<\/noscript>/) || [])[1];
+  assert.ok(block, 'the JS-built sky must ship a <noscript> fallback');
+  // It has to SAY something, not just exist — a stranger with JS off should learn
+  // what this is and be able to leave through a real door.
+  assert.match(block, /Cloud&nbsp;Bongos|Cloud Bongos/);
+  assert.match(block, /href="\/projects"/, 'the fallback must reach the projects surface');
+  assert.match(block, /href="\/create"/, 'the fallback must reach project creation');
+  // Every rule in space.css is scoped to a body view-class the fallback must
+  // ignore, so its visibility cannot depend on the stylesheet.
+  assert.match(block, /style="/, 'the fallback must be inline-styled to survive the view-class CSS');
+});
+
+test('the gate still boots into a view class (the ritual removal has not landed yet)', () => {
+  // Guards the file's structural contract while task 1002743 is outstanding: the
+  // body carries a view class, and <head> closes before <body> opens. If the
+  // ritual removal lands, the expected class becomes view-space — update this
+  // assertion there rather than deleting it.
+  assert.match(html, /<body class="view-(entry|space)"/);
+  assert.ok(html.indexOf('</head>') < html.indexOf('<body class='), 'head must close before body opens');
+});