@bongos/core 1.24.46 → 1.24.48

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');
+});

package/tests/hall_oversight_world.mjs

@@ -104,10 +104,13 @@ test('the shared confirm modal sits on --z-modal, closed by one hairline and no
 });
 
 test('a number input inside a family field clears the 24px floor', () => {
-  const css = read('oversight.css');
-  const i = css.indexOf('.ov-field input, .ov-field select, .ov-field textarea {');
-  assert.ok(i > 0, 'the field rule exists');
-  assert.match(css.slice(i, i + 500), /min-height: 30px/, 'the field restates the shell\'s 30px pill');
+  // task 1005084: the shared field (controls.css) reaches a number input itself,
+  // at 40px; the family field only stretches it to the row.
+  const shared = read('controls.css').replace(/\/\*[\s\S]*?\*\//g, '');
+  const m = shared.match(/([^{}]*input\[type="number"\][^{}]*)\{([^{}]*min-height[^{}]*)\}/);
+  assert.ok(m, 'the shared field rule covers a number input');
+  assert.ok(Number((m[2].match(/min-height:\s*(\d+)px/) || [])[1]) >= 24, 'and clears the 24px floor');
+  assert.match(read('oversight.css'), /\.ov-field input, \.ov-field select, \.ov-field textarea \{ width: 100%/, 'the family field stretches it');
   assert.match(read('government.html'), /id="gov-assign-builder" type="number"/, 'the builder id is still a number input');
 });
 

package/tests/hall_record_world.mjs

@@ -66,6 +66,7 @@ const read = (f) => fs.readFileSync(path.join(HALL, f), 'utf8');
 
 const styleCss = read('style.css');
 const recordCss = read('record.css');
+const controlsCss = read('controls.css');
 const taskCss = read('task.css');
 const ideaCss = read('idea.css');
 const ideasCss = read('ideas.css');
@@ -83,6 +84,16 @@ const rule = (css, selector) => {
   return m ? m[2] : null;
 };
 const decomment = (css) => css.replace(/\/\*[\s\S]*?\*\//g, '');
+// The body of the first rule in `css` whose selector LIST holds `selector` and
+// declares `prop` (task 1005084: the shared controls.css lists the hall's button
+// names together, so a name is rarely the last selector before the brace).
+const ruleHolding = (css, selector, prop) => {
+  for (const m of css.replace(/\/\*[\s\S]*?\*\//g, '').matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const sels = m[1].split(',').map((s) => s.trim());
+    if (sels.includes(selector) && new RegExp(`(^|;)\\s*${prop}\\s*:`).test(m[2])) return m[2];
+  }
+  return null;
+};
 
 // ---- 1. the right rail belongs to the shell --------------------------------
 
@@ -134,30 +145,33 @@ test('the ideas composer OPTS IN, and since the fold it opts in WITH THE METER',
 // ---- 2. the button vocabulary that had no rule -----------------------------
 
 test('.btn and .btn--ghost are defined, and say what .btn-accent / .btn-ghost say', () => {
-  const btn = rule(styleCss, '.btn');
+  // task 1005084 moved the hall's buttons into the shared controls.css
+  const btn = ruleHolding(controlsCss, '.btn', 'background');
   assert.ok(btn, '.btn has a rule — six pages rendered browser-default buttons without one');
   assert.match(btn, /background:\s*var\(--accent\)/, '.btn is the accent door');
   assert.match(btn, /color:\s*var\(--accent-on\)/, '--accent-on is the dark ink for the salmon');
-  assert.match(btn, /border-radius:\s*var\(--radius-pill\)/, 'pill or nothing (DESIGN.md, Shapes)');
+  const shape = ruleHolding(controlsCss, '.btn', 'border-radius');
+  assert.match(shape, /border-radius:\s*var\(--radius-pill\)/, 'pill or nothing (DESIGN.md, Shapes)');
   // collab.css's .btn--quiet sets only a border-COLOUR; a modifier cannot paint
   // an edge that was never reserved, so the base has to carry a transparent one.
-  assert.match(btn, /border:\s*var\(--line\)\s+solid\s+transparent/,
+  assert.match(shape, /border:\s*var\(--line\)\s+solid\s+transparent/,
     'the edge is reserved so a modifier that sets only border-color still draws');
-  const ghost = rule(styleCss, '.btn--ghost');
+  const ghost = ruleHolding(controlsCss, '.btn--ghost', 'background');
   assert.ok(ghost, '.btn--ghost has a rule');
-  assert.match(ghost, /background:\s*none/, 'the quiet sibling is a hairline pill, not a fill');
+  assert.match(ghost, /background:\s*transparent/, 'the quiet sibling is a hairline pill, not a fill');
+  assert.equal(ghost, ruleHolding(controlsCss, '.btn-ghost', 'background'), 'and .btn-ghost says the same, in the same rule');
   assert.match(ghost, /border-color:\s*var\(--rule\)/, 'and it takes the reserved edge');
 });
 
 // ---- 3. the world's own bans ------------------------------------------------
 
 test('nothing in the record family paints text white on the accent', () => {
-  const primary = rule(styleCss, '.td-btn--primary');
+  const primary = ruleHolding(controlsCss, '.td-btn--primary', 'background');
   assert.ok(primary, '.td-btn--primary has a rule');
   assert.match(primary, /color:\s*var\(--accent-on\)/, 'the dark ink, not white');
   // Match white as a VALUE, not anywhere in the block: `white-space: nowrap` is
   // a property name and would be read as a colour by a bare /\bwhite\b/.
-  for (const [name, css] of [['style.css .td-btn--primary', primary], ['record.css', decomment(recordCss)],
+  for (const [name, css] of [['controls.css .td-btn--primary', primary], ['record.css', decomment(recordCss)],
     ['task.css', decomment(taskCss)], ['idea.css', decomment(ideaCss)], ['ideas.css', decomment(ideasCss)]]) {
     assert.doesNotMatch(css, /(background|color):\s*(#fff\b|#ffffff\b|white\b)/i,
       `${name} paints a white literal — DESIGN.md bans white on the salmon, and every other ground has a token`);

package/tests/hall_settings_world.mjs

@@ -290,11 +290,14 @@ test('white on the accent is gone, and the Discord mark is the one named excepti
   // base pill rule AND the save rule, so the save rule is found by its own name
   // and the member is asserted against it. (`.pair-approve` was its sibling here
   // until task 1003890 removed the pair page.)
-  const save = ruleOf(panelCss, '.pbtn--save');
+  // task 1005084: the family's buttons are the hall's shared ones (controls.css)
+  const controlsCss = read('controls.css');
+  const saveRule = stripComments(controlsCss).match(/([^{}]*\.pbtn--save[^{}]*)\{([^{}]*background[^{}]*)\}/);
+  const save = saveRule && saveRule[2];
   assert.ok(save, '.pbtn--save has a rule');
   assert.match(save, /background:\s*var\(--accent\)/);
   assert.match(save, /color:\s*var\(--accent-on\)/, 'the dark ink for the salmon — white on it fails AA');
-  const saveSelector = stripComments(panelCss).match(/([^{}]*\.pbtn--save[^{}]*)\{/);
+  const saveSelector = saveRule;
   assert.ok(saveSelector, 'the save rule\'s selector list is readable');
   for (const member of ['.craft-save']) {
     assert.ok(saveSelector[1].split(',').map((s) => s.trim()).includes(member), `${member} is the accent door on its page`);