@bongos/core 1.25.9 → 1.25.11

package/tests/hall_smoke.mjs

@@ -0,0 +1,116 @@
+// tests/hall_smoke.mjs — the smoke family across the hall (task 1005267, follow-up to task 1005252).
+//
+// The owner picked "all six" from the Smoke across Helm lab: the hall's glass is one family.
+// Light smoke (--smoke) for small things (a toast, the city's labels), deep smoke (--smoke-deep)
+// for big ones (panels over art, the visor's sheet and card, a dialog, the top bar and rail), a
+// smoke scrim behind a dialog. A phone and "less transparency" turn the family back to solid night
+// by its TOKENS, so no rule needs a twin. The status page links controls.css without the hall's
+// tier, so the one rule there falls back to no blur.
+import assert from 'node:assert/strict';
+import { test, after } from 'node:test';
+import { createRequire } from 'node:module';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+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').replace(/\r\n/g, '\n');
+const STYLE = read('style.css');
+const CONTROLS = read('controls.css');
+
+const familyAt = STYLE.indexOf('/* THE SMOKE FAMILY ON THE HALL');
+const FAMILY = STYLE.slice(familyAt, STYLE.indexOf('/* The Kill Switch Rule', familyAt));
+const ruleFor = (sel) => { const at = FAMILY.indexOf(sel); assert.ok(at >= 0, sel + ' is in the family'); return FAMILY.slice(at, FAMILY.indexOf('}', at)); };
+
+test('source: one family block, behind @supports, lifted by the hall\'s own stamp', () => {
+  assert.ok(familyAt > 0, 'the family block exists');
+  assert.match(FAMILY, /@supports \(\(backdrop-filter: blur\(1px\)\) or \(-webkit-backdrop-filter: blur\(1px\)\)\) \{/, 'a browser without blur keeps today\'s surfaces');
+  const sels = FAMILY.replace(/\/\*[\s\S]*?\*\//g, '').match(/[^{}]+\{/g).join(' ');
+  for (const s of sels.match(/\.[a-z][\w-]*/g)) {
+    if (/^\.(app|game|gs|opt|craft|visor|hall|toast|city|page|hc)/.test(s)) continue;
+    assert.fail('unexpected selector in the family: ' + s);
+  }
+  for (const line of FAMILY.replace(/\/\*[\s\S]*?\*\//g, '').split('\n').filter((l) => /\{\s*$/.test(l) && !/@supports/.test(l))) {
+    for (const part of line.replace(/\{\s*$/, '').split(',').map((p) => p.trim()).filter(Boolean)) {
+      assert.match(part, /^html\[data-theme="dark"\]/, 'every selector starts at the hall\'s stamp: ' + part);
+    }
+  }
+});
+
+test('source: the six surfaces spend the right weight of smoke', () => {
+  for (const sel of ['.game-menu__box', '.gs__menu', '.gs__load', '.opt-rail', '.craft-door', '.visor__sheet', '.visor__focus']) {
+    const r = ruleFor(sel);
+    assert.ok(r.includes('var(--smoke-deep)') && r.includes('backdrop-filter: var(--smoke-deep-blur)'), sel + ' takes deep smoke');
+  }
+  assert.ok(ruleFor('.hall-dialog {').includes('box-shadow: var(--smoke-edge), var(--ds-shadow-pop)'), 'a dialog keeps its lift under the pane');
+  const bars = ruleFor('.app-topbar');
+  assert.ok(bars.includes('.app-sidebar') && bars.includes('background: var(--smoke-deep);') && !bars.includes('sheen'), 'the bars: deep smoke, no sheen');
+  assert.ok(ruleFor('.hall-scrim {').includes('backdrop-filter: var(--smoke-scrim)'), 'a div overlay\'s scrim blurs the world');
+  const toast = ruleFor('.toast:not([data-kind="error"])');
+  assert.ok(toast.includes('var(--smoke)') && toast.includes('color: var(--ink)'), 'a toast is light smoke with white words; an error keeps its colour');
+  const labels = ruleFor('.city-line');
+  for (const s of ['.city-mark', '.city-plaque', '.city-archived', '.page-head__h', '.hc-ladder::before']) assert.ok(labels.includes(s), s + ' is a city label');
+  assert.ok(labels.includes('backdrop-filter: var(--smoke-blur)'), 'the city labels take the visor\'s light smoke');
+});
+
+test('source: the native dialog\'s scrim blurs in the hall and nowhere else', () => {
+  assert.match(CONTROLS, /\.hall-dialog::backdrop \{ background: var\(--scrim\); \}/, 'the flat scrim stays the base');
+  assert.match(CONTROLS, /\.hall-dialog::backdrop \{ -webkit-backdrop-filter: var\(--smoke-scrim, none\); backdrop-filter: var\(--smoke-scrim, none\); \}/,
+    'no --smoke-scrim (the status page) falls back to no blur');
+});
+
+test('source: the fallbacks are tokens — less transparency and a phone turn every pane to solid night', () => {
+  const NIGHT = 'html:root { --smoke: var(--night-plate); --smoke-deep: var(--bg); --smoke-sheen: none; --smoke-edge: 0 0 0 0 transparent;\n    --smoke-blur: none; --smoke-deep-blur: none; --smoke-scrim: none; }';
+  const rt = STYLE.indexOf('@media (prefers-reduced-transparency: reduce) {');
+  assert.ok(STYLE.indexOf(NIGHT, rt) > rt && STYLE.indexOf(NIGHT, rt) < familyAt, 'less transparency: solid night, by the tokens');
+  const phone = STYLE.match(/tasks 1005148 and 1005195, the visor[\s\S]*?\n\}/)[0];
+  assert.ok(phone.includes(NIGHT), 'a phone: solid night, by the tokens (no live blur on the weakest GPU)');
+  assert.ok(STYLE.match(/--smoke-edge: 0 0 0 0 transparent/g).length === 2, 'the edge falls back to a no-op shadow, so the dialog\'s pair stays valid');
+});
+
+// ---------- in a browser: the computed glass ----------
+const lib = require(path.join(ROOT, 'modules', 'ui-design', 'kit', 'lib.js'));
+let browser = null;
+try { browser = await lib.launchBrowser(); } catch (e) { if (!(e instanceof lib.NoBrowserError)) throw e; }
+after(() => browser && browser.close());
+const skip = !browser && 'no system Edge or Chrome';
+const ORIGIN = 'http://hall.test';
+const PAGE = `<!doctype html><html data-theme="dark" data-faces="helm"><head><meta charset="utf-8">
+<link rel="stylesheet" href="/builders/style.css"><link rel="stylesheet" href="/builders/controls.css"></head>
+<body><div class="app-topbar">t</div><div class="app-sidebar">r</div><div class="game-menu__box">m</div><div class="opt-rail">o</div>
+<div class="visor__sheet">s</div><div class="toast" data-visible="1">ok</div><div class="toast" data-kind="error">no</div>
+<div class="city-plaque">p</div><dialog class="hall-dialog">d</dialog></body></html>`;
+
+async function computed(width) {
+  const ctx = await browser.newContext({ viewport: { width, height: 800 } });
+  await ctx.route(ORIGIN + '/**', (route) => {
+    const p = new URL(route.request().url()).pathname;
+    if (p === '/') return route.fulfill({ contentType: 'text/html', body: PAGE });
+    const f = path.join(HALL, p.replace(/^\/builders\//, ''));
+    if (p.endsWith('.css') && fs.existsSync(f)) return route.fulfill({ contentType: 'text/css', body: fs.readFileSync(f) });
+    return route.fulfill({ status: 404, body: '' });
+  });
+  const page = await ctx.newPage();
+  await page.goto(ORIGIN + '/');
+  const out = await page.evaluate(() => {
+    const bf = (s) => getComputedStyle(document.querySelector(s)).backdropFilter;
+    return { bar: bf('.app-topbar'), rail: bf('.app-sidebar'), menu: bf('.game-menu__box'), opt: bf('.opt-rail'), sheet: bf('.visor__sheet'),
+      dialog: bf('.hall-dialog'), toast: bf('.toast[data-visible]'), err: bf('.toast[data-kind="error"]'), plaque: bf('.city-plaque') };
+  });
+  await ctx.close();
+  return out;
+}
+
+test('on a desk the six surfaces are smoked; an error toast is not', { skip }, async () => {
+  const g = await computed(1280);
+  for (const k of ['bar', 'rail', 'menu', 'opt', 'sheet', 'dialog']) assert.match(g[k], /blur\(24px\)/, k + ' is deep smoke');
+  for (const k of ['toast', 'plaque']) assert.match(g[k], /blur\(14px\)/, k + ' is light smoke');
+  assert.equal(g.err, 'none', 'an error toast keeps its own colour and no glass');
+});
+
+test('on a phone every pane is solid night', { skip }, async () => {
+  const g = await computed(390);
+  for (const k of ['bar', 'rail', 'menu', 'opt', 'sheet', 'dialog', 'toast', 'plaque']) assert.equal(g[k], 'none', k + ' has no live blur on a phone');
+});

package/tests/hall_street_desk.mjs

@@ -190,7 +190,7 @@ test('a row\'s buttons are the card\'s acts under the board\'s words, and send t
   assert.equal(ana.name, 'Ana Ruiz', 'a person is named by their name');
   assert.deepEqual(ana.actions.map((a) => [a.key, a.label, a.tone]), [['fine', 'let in', 'primary'], ['refuse', 'not now', 'quiet']]);
   assert.deepEqual(j(C.request(ana.card, 'fine')), { method: 'PATCH', url: '/api/bongos/access-requests/11', body: { status: 'invited' } });
-  assert.deepEqual(j(C.request(row('people', 6).card, 'refuse')), { method: 'POST', url: '/api/bongos/goals/42/requests/12/respond', body: { action: 'deny' } });
+  assert.deepEqual(j(C.request(row('people', 7).card, 'refuse')), { method: 'POST', url: '/api/bongos/goals/42/requests/12/respond', body: { action: 'deny' } });
   const rel = D.rowsFor('release', 0, dk, { now: NOW });
   assert.deepEqual(rel[0].actions.map((a) => a.label), ['release', 'hold']);
   assert.equal(C.request(rel[0].card, 'release').url, '/api/bongos/override-requests/13/decide');

package/tests/hall_street_inside.mjs

@@ -587,7 +587,7 @@ test('a building address draws the interior in place of the street, from the doc
   assert.equal(p.byId.get('streetInside').hidden, false);
   assert.equal(p.byId.get('streetSizer').hidden, true, 'the street gives way');
   assert.equal(p.byId.get('insideName').textContent, 'People');
-  assert.equal(p.byId.get('insideFloors').children.length, 7, 'a button per floor in use');
+  assert.equal(p.byId.get('insideFloors').children.length, 8, 'a button per floor in use');
   assert.equal(p.byId.get('insideFloors').children[4].attrs['aria-pressed'], 'true', 'the floor being decided is chosen');
   assert.equal(p.byId.get('insideLift').style.transform, 'translateY(-208px)');
   assert.equal(p.byId.get('insideTable'), undefined, 'no separate list of matters');

package/tests/hall_visor.mjs

@@ -219,7 +219,9 @@ test('source: the minimal visor spends the Helm tokens and types in no colour, s
   assert.ok(plainAt >= 0 && plain.includes('html .visor__place, html .visor__who, html .visor__hint, html .visor__progress-words {'), 'less transparency is answered in style.css, lifted over visor.css');
   assert.ok(plain.includes('background: var(--night-plate);') && plain.includes(' backdrop-filter: none;'), 'less transparency: the night plate again');
   const smokeTokens = STYLE.match(/--smoke[a-z-]*:[^;]*;/g) || [];
-  assert.equal(smokeTokens.length, 4, 'four smoke tokens: the tint, the blur, the sheen, the edge');
+  const smokeNames = [...new Set(smokeTokens.map((t) => t.split(':')[0]))].sort();
+  assert.deepEqual(smokeNames, ['--smoke', '--smoke-blur', '--smoke-deep', '--smoke-deep-blur', '--smoke-edge', '--smoke-scrim', '--smoke-sheen'],
+    'one smoke family: the light pane, the deep pane, the scrim, the sheen and the edge (tasks 1005252, 1005267)');
   assert.doesNotMatch(smokeTokens.join(' '), /rgba?\(|#[0-9a-f]{3,8}\b/i, 'every smoke colour derives from a Helm token, no literal');
   assert.ok(STYLE.includes('html[data-game="on"] .visor__who, html[data-game="on"] .visor__hint { background: var(--night-plate); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }'), 'a phone keeps the night plate: no live blur on the weakest GPU');
   assert.ok(STYLE.indexOf('backdrop-filter: none; }') > STYLE.indexOf('tasks 1005148 and 1005195, the visor'), 'and that rule sits in the shared phone block');