@bongos/core 1.24.86 → 1.24.88

package/tests/hall_sky_time.mjs

@@ -0,0 +1,361 @@
+// tests/hall_sky_time.mjs — the city in the clouds keeps the hour (task 1005196; ADR 0402).
+//
+// WHAT IT GUARDS. The city on the City page and on Home is painted from four key
+// palettes — night, dawn, midday, dusk — blended for the hour by sky-time.js and spent
+// by the painters as --sky-now-* tokens. What can go wrong:
+//   * the blend: a key hour not giving its key palette, a midpoint that is not the
+//     midpoint, the clock not wrapping past midnight;
+//   * the hour source: a pinned hour (?hour=, #hour=, data-sky-hour-at) not winning, or
+//     a bad value moving the clock;
+//   * the tokens: a palette literal typed anywhere but the hall tier's :root, a key
+//     missing a role, a painter or a sheet typing a colour instead of spending a token,
+//     the art tokens leaking into a control or a sentence;
+//   * motion: the palette animating, or being recomputed more than once a minute;
+//   * the page: the City page failing to draw at one of the four hours (in a browser).
+//
+// Run:  node --test tests/hall_sky_time.mjs
+import { test, after } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+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 PUB = path.join(ROOT, 'modules', 'hall-ui', 'public');
+const read = (f) => fs.readFileSync(path.join(PUB, f), 'utf8').replace(/\r\n/g, '\n');
+const Sky = require(path.join(PUB, 'sky-time.js'));
+const kit = require('../modules/ui-design/kit/lib.js');
+const strip = (s) => s.replace(/\/\*[\s\S]*?\*\//g, '').replace(/<!--[\s\S]*?-->/g, '').replace(/(^|[^:'"`\\])\/\/[^\n]*/g, '$1');
+
+// ---- the token block, read out of style.css ----
+const STYLE = read('style.css');
+function rootBlock() {
+  const at = STYLE.indexOf('\n:root {');
+  let depth = 0;
+  for (let i = STYLE.indexOf('{', at); i < STYLE.length; i++) {
+    if (STYLE[i] === '{') depth += 1;
+    else if (STYLE[i] === '}' && --depth === 0) return STYLE.slice(at, i + 1);
+  }
+  throw new Error('style.css has no :root block');
+}
+const ROOT_BLOCK = rootBlock();
+const TOKENS = {};
+for (const m of strip(ROOT_BLOCK).matchAll(/(--sky-[\w-]+)\s*:\s*([^;]+);/g)) TOKENS[m[1]] = m[2].trim();
+const KEYS = {};
+for (const key of Sky.KEYS) {
+  KEYS[key] = {};
+  for (const role of Sky.ROLES) KEYS[key][role] = TOKENS[`--sky-${key}-${role}`];
+  for (const n of Sky.NUMBERS) KEYS[key][n] = Number(TOKENS[`--sky-${key}-${n}`]);
+}
+
+// ── the tokens ───────────────────────────────────────────────────────────────
+
+test('four key palettes, ten roles and two strengths each, as hex literals in the hall tier\'s :root', () => {
+  assert.deepEqual([...Sky.KEYS], ['night', 'dawn', 'midday', 'dusk']);
+  assert.ok(Sky.ROLES.length <= 10, 'the role count stays small');
+  for (const key of Sky.KEYS) {
+    for (const role of Sky.ROLES) assert.match(String(KEYS[key][role]), /^#[0-9a-f]{6}$/, `--sky-${key}-${role}`);
+    for (const n of Sky.NUMBERS) assert.ok(KEYS[key][n] >= 0 && KEYS[key][n] <= 1, `--sky-${key}-${n} is a strength, 0 to 1`);
+  }
+  const named = Object.keys(TOKENS).filter((t) => /^--sky-(night|dawn|midday|dusk)-/.test(t));
+  assert.equal(named.length, Sky.KEYS.length * (Sky.ROLES.length + Sky.NUMBERS.length), 'no key token the module does not read');
+  // the hour's palette rests at night until sky-time.js says otherwise, and carries two mixes
+  for (const name of [...Sky.ROLES, ...Sky.NUMBERS]) assert.equal(TOKENS[`--sky-now-${name}`], `var(--sky-night-${name})`, `--sky-now-${name} rests at night`);
+  assert.match(TOKENS['--sky-now-haze'], /^color-mix\(in srgb, var\(--sky-now-mid\) \d+%, var\(--sky-now-cloud\)\)$/);
+  assert.match(TOKENS['--sky-now-glow'], /var\(--sky-now-lamp\).*var\(--sky-now-windows\)/);
+  // night is deep and its windows are lit; midday is bright and warm, with no stars
+  const lum = (h) => { const v = Sky.rgbOf(h); return 0.2126 * v[0] + 0.7152 * v[1] + 0.0722 * v[2]; };
+  assert.ok(lum(KEYS.midday.cloud) > 245 && lum(KEYS.midday.mid) > lum(KEYS.dawn.mid) && lum(KEYS.night.mid) < 20);
+  const mid = Sky.rgbOf(KEYS.midday.cloud);
+  assert.ok(mid[0] > mid[2], 'midday\'s cloud is warm: more red than blue');
+  assert.ok(KEYS.night.windows > KEYS.dusk.windows && KEYS.dusk.windows > KEYS.midday.windows, 'windows glow strongest at night');
+  assert.equal(KEYS.night.stars, 1); assert.equal(KEYS.midday.stars, 0);
+  assert.ok(KEYS.dusk.stars > 0);
+});
+
+test('the palette literals live only in that block: no other sheet, page or script types a sky colour', () => {
+  const outside = STYLE.replace(ROOT_BLOCK, '');
+  assert.doesNotMatch(outside, /--sky-(night|dawn|midday|dusk)-[\w-]+\s*:/, 'style.css defines the four palettes once, in :root');
+  const hexes = new Set(Sky.KEYS.flatMap((k) => Sky.ROLES.map((r) => KEYS[k][r].toLowerCase())));
+  const hits = [];
+  for (const f of fs.readdirSync(PUB).filter((n) => /\.(css|js|html)$/.test(n) && n !== 'style.css')) {
+    const src = strip(read(f));
+    if (/--sky-(night|dawn|midday|dusk)-[\w-]+\s*:/.test(src)) hits.push(`${f} defines a key palette`);
+    for (const m of src.matchAll(/#[0-9a-f]{6}\b/gi)) if (hexes.has(m[0].toLowerCase())) hits.push(`${f}: ${m[0]}`);
+  }
+  assert.deepEqual(hits, []);
+});
+
+test('the two city painters and the hour module type in no colour at all', () => {
+  for (const f of ['city-draw.js', 'home-city-draw.js', 'sky-time.js']) {
+    const code = strip(read(f));
+    // sky-time.js parses colours, so its regexes name the notations; nothing else may
+    const body = f === 'sky-time.js' ? code.replace(/\/\^[^\n]*?\/i?\.exec/g, '') : code;
+    assert.deepEqual(body.match(/#[0-9a-f]{6}\b|#[0-9a-f]{3}\b(?![0-9a-z-])|rgba?\(\s*\d|hsla?\(\s*\d/gi) || [], [], `${f} holds no colour literal`);
+  }
+  for (const f of ['city-draw.js', 'home-city-draw.js']) {
+    const code = strip(read(f));
+    assert.match(code, /'var\(--sky-now-' \+ role \+ '\)'/, `${f} names the hour's tokens`);
+    assert.doesNotMatch(code, /--sky-(night|dawn|midday|dusk)-/, `${f} never reaches for a key palette: only the hour's`);
+    assert.doesNotMatch(code, /mode === 'light'/, `${f} has no light palette: the hall is dark only`);
+  }
+});
+
+test('the sky tokens are art: no control, no text and no chrome spends one', () => {
+  const hits = [];
+  for (const f of fs.readdirSync(PUB).filter((n) => /\.css$/.test(n))) {
+    for (const m of strip(read(f)).matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+      if (!/--sky-(now|night|dawn|midday|dusk)-/.test(m[2])) continue;
+      const sel = m[1].trim();
+      if (f === 'style.css' && /(^|\n):root$/.test(sel)) continue; // the token block itself
+      // only the two scenes spend them: the City page's frame, stage and cloud; Home's scene, its
+      // stage, and (in game mode) the ground of the Home view
+      if (!/^(\.city-frame|\.city-stage|\.city-cloud|\.city-stars|\.hc-svg|\.hc-cloud|\.hc-stage|html\[data-game="on"\] body\[data-page="home"\]$)/.test(sel)) { hits.push(`${f}: ${sel}`); continue; }
+      for (const d of m[2].split(';')) {
+        const prop = d.split(':')[0].trim();
+        if (/--sky-/.test(d) && (prop === 'color' || /^border|^outline|^caret|^text-/.test(prop))) hits.push(`${f}: ${sel} { ${prop} }`);
+      }
+    }
+  }
+  assert.deepEqual(hits, [], 'chrome, panels, text and controls stay Helm night at every hour');
+});
+
+// ── the blend (pure) ─────────────────────────────────────────────────────────
+
+test('a key hour gives its key palette exactly', () => {
+  for (const key of Sky.KEYS) {
+    const p = Sky.blend(Sky.KEY_HOURS[key], KEYS);
+    for (const role of Sky.ROLES) assert.equal(p[role], KEYS[key][role].toLowerCase(), `${key} ${role}`);
+    for (const n of Sky.NUMBERS) assert.equal(p[n], KEYS[key][n], `${key} ${n}`);
+  }
+  // a key holds across its plateau: deep night to 4, midday from 12 to 14
+  assert.deepEqual(Sky.blend(3, KEYS), Sky.blend(0, KEYS));
+  assert.deepEqual(Sky.blend(12, KEYS), Sky.blend(14, KEYS));
+});
+
+test('between two keys the palette is their blend: half-way is the midpoint, channel by channel', () => {
+  const half = (a, b) => '#' + Sky.rgbOf(a).map((v, i) => Math.round((v + Sky.rgbOf(b)[i]) / 2).toString(16).padStart(2, '0')).join('');
+  const morning = Sky.blend(9, KEYS), evening = Sky.blend(21, KEYS);
+  for (const role of Sky.ROLES) {
+    assert.equal(morning[role], half(KEYS.dawn[role], KEYS.midday[role]), `09:00 ${role} is half dawn, half midday`);
+    if (role !== 'line') assert.equal(evening[role], half(KEYS.dusk[role], KEYS.night[role]), `21:00 ${role} is half dusk, half night`);
+  }
+  // a line is drawn against the cloud, so it never passes through the cloud's own grey: it keeps
+  // its day colour until the cloud has gone most of the way dark, then turns to its night colour
+  assert.equal(evening.line, KEYS.dusk.line.toLowerCase(), '21:00: still the dusk line');
+  assert.equal(Sky.blend(5, KEYS).line, KEYS.dawn.line.toLowerCase(), '05:00: already the dawn line');
+  assert.equal(Sky.blend(23.5, KEYS).line, KEYS.night.line.toLowerCase(), 'by 23:30 it is the night line');
+  assert.equal(Sky.blend(22.5, KEYS).line, half(KEYS.dusk.line, KEYS.night.line), 'and it turns evenly in between');
+  assert.equal(morning.windows, Math.round((KEYS.dawn.windows + KEYS.midday.windows) / 2 * 1000) / 1000);
+  assert.deepEqual(Sky.spanAt(5), { a: 'night', b: 'dawn', t: 0.5 });
+  assert.deepEqual(Sky.spanAt(16), { a: 'midday', b: 'dusk', t: 0.5 });
+  // smooth: an hour's step never jumps a channel by more than the span's slope allows
+  for (let h = 0; h < 24; h += 0.25) {
+    const a = Sky.rgbOf(Sky.blend(h, KEYS).mid), b = Sky.rgbOf(Sky.blend(h + 0.25, KEYS).mid);
+    assert.ok(a.every((v, i) => Math.abs(v - b[i]) <= 40), `no jump in the sky between ${h} and ${h + 0.25}`);
+  }
+});
+
+test('the clock wraps past midnight, both ways', () => {
+  assert.deepEqual(Sky.blend(24, KEYS), Sky.blend(0, KEYS));
+  assert.deepEqual(Sky.blend(25.5, KEYS), Sky.blend(1.5, KEYS));
+  assert.deepEqual(Sky.blend(-3, KEYS), Sky.blend(21, KEYS));
+  assert.deepEqual(Sky.blend(37, KEYS), Sky.blend(13, KEYS));
+  assert.equal(Sky.wrap(24), 0); assert.equal(Sky.wrap(-0.5), 23.5); assert.equal(Sky.wrap('x'), 0);
+  // the last hour of the day runs into night, not back to dusk
+  assert.deepEqual(Sky.spanAt(23), { a: 'dusk', b: 'night', t: 5 / 6 });
+});
+
+test('the blend takes the colours however the page hands them over, and skips what a key lacks', () => {
+  const keys = { night: { top: 'rgb(0, 0, 0)', windows: 1 }, dawn: { top: [100, 200, 50], windows: 0 }, midday: {}, dusk: {} };
+  assert.deepEqual(Sky.blend(5, keys), { top: '#326419', windows: 0.5 });
+  assert.deepEqual(Sky.rgbOf('color(srgb 1 0.5 0)'), [255, 127.5, 0]);
+  assert.equal(Sky.rgbOf('var(--x)'), null);
+  assert.deepEqual(Sky.blend(13, keys), {}, 'a key with no roles gives nothing, never a guessed colour');
+});
+
+// ── the hour source ──────────────────────────────────────────────────────────
+
+test('a pinned hour wins: the root attribute, then the query, then the hash; a bad value is ignored', () => {
+  assert.equal(Sky.hourFrom(null, '?hour=13', ''), 13);
+  assert.equal(Sky.hourFrom(null, '?week=3&hour=6.5', ''), 6.5);
+  assert.equal(Sky.hourFrom(null, '', '#hour=21'), 21);
+  assert.equal(Sky.hourFrom(null, '', '#decide&hour=9'), 9, 'beside the page\'s own hash route');
+  assert.equal(Sky.hourFrom('18', '?hour=13', '#hour=21'), 18, 'the attribute first');
+  assert.equal(Sky.hourFrom(null, '?hour=13', '#hour=21'), 13, 'then the query');
+  assert.equal(Sky.hourFrom(null, '?hour=26', ''), 2, 'past 24 wraps');
+  for (const bad of ['?hour=', '?hour=noon', '?behaviour=3', '?hours=3']) assert.equal(Sky.hourFrom(null, bad, ''), null, bad);
+  assert.equal(Sky.hourFrom('', '', ''), null);
+});
+
+// The page half, run against a stand-in document whose computed styles are style.css's own tokens.
+function page({ search = '', hash = '', attr = null } = {}) {
+  const set = {}; const attrs = attr == null ? {} : { 'data-sky-hour-at': attr };
+  const timers = []; let probes = 0; let computed = 0;
+  const html = {
+    style: { setProperty(k, v) { set[k] = v; } },
+    setAttribute(k, v) { attrs[k] = v; }, getAttribute(k) { return k in attrs ? attrs[k] : null; },
+  };
+  const document = {
+    documentElement: html, readyState: 'complete', hidden: false, addEventListener() {},
+    body: { appendChild() { probes += 1; } },
+    createElement() { return { style: { color: '' }, hidden: false, remove() {} }; },
+  };
+  const window = { document, location: { search, hash } };
+  document.defaultView = window;
+  const ctx = {
+    window, document,
+    getComputedStyle(el) {
+      computed += 1;
+      if (el === html) return { getPropertyValue: (n) => TOKENS[n] || '' };
+      const name = /var\((--[\w-]+)\)/.exec(el.style.color);
+      const v = Sky.rgbOf(TOKENS[name[1]]);
+      return { color: `rgb(${v[0]}, ${v[1]}, ${v[2]})` };
+    },
+    setInterval(fn, ms) { timers.push({ fn, ms }); return timers.length; },
+    Date, Number, String, Math, Object, Array, parseInt, decodeURIComponent, isFinite,
+  };
+  vm.runInNewContext(read('sky-time.js'), ctx, { filename: 'sky-time.js' });
+  return { api: window.OTBSkyTime, set, attrs, timers, document, stats: () => ({ probes, computed }) };
+}
+
+test('on load the page wears the hour\'s palette as --sky-now-* on the root, from the tokens read once', () => {
+  const p = page({ search: '?hour=13' });
+  assert.equal(p.attrs['data-sky-hour'], '13');
+  for (const role of Sky.ROLES) assert.equal(p.set[`--sky-now-${role}`], KEYS.midday[role].toLowerCase(), role);
+  assert.equal(p.set['--sky-now-windows'], String(KEYS.midday.windows));
+  assert.equal(p.set['--sky-now-stars'], '0');
+  assert.deepEqual(Object.keys(p.set).sort(), [...Sky.ROLES, ...Sky.NUMBERS].map((n) => `--sky-now-${n}`).sort(), 'the two mixes (haze, glow) stay the sheet\'s to derive');
+  // one read of the tokens, cached: a later apply reads no computed style again
+  const before = p.stats();
+  assert.equal(before.probes, 1, 'one probe element');
+  p.api.apply(p.document, 0);
+  assert.deepEqual(p.stats(), before, 'the second palette costs no style read');
+  assert.equal(p.set['--sky-now-mid'], KEYS.night.mid.toLowerCase());
+  assert.equal(p.attrs['data-sky-hour'], '0');
+  assert.equal(p.api.hour(), 0);
+});
+
+test('the override reaches the page: the hash and the root attribute pin the hour too', () => {
+  assert.equal(page({ hash: '#hour=18' }).set['--sky-now-cloud'], KEYS.dusk.cloud.toLowerCase());
+  assert.equal(page({ attr: '6', search: '?hour=13' }).set['--sky-now-cloud'], KEYS.dawn.cloud.toLowerCase());
+  // with nothing pinned the viewer's clock is the source: a number from 0 up to 24
+  const live = page();
+  assert.ok(Number(live.attrs['data-sky-hour']) >= 0 && Number(live.attrs['data-sky-hour']) < 24);
+  assert.equal(live.api.hourNow({ document: live.document, location: { search: '?hour=4', hash: '' } }), 4);
+});
+
+test('no motion: the palette is recomputed at most once a minute and nothing animates between two', () => {
+  const p = page({ search: '?hour=6' });
+  assert.equal(p.timers.length, 1, 'one timer');
+  assert.ok(p.timers[0].ms >= 60000, 'a minute or longer');
+  p.api.start(p.document);
+  assert.equal(p.timers.length, 1, 'starting twice starts one clock');
+  const src = strip(read('sky-time.js'));
+  assert.doesNotMatch(src, /requestAnimationFrame|setTimeout|\.animate\(|transition/, 'no frame loop, no tween');
+  for (const f of ['city.css', 'home-city.css']) {
+    for (const m of strip(read(f)).matchAll(/([^{}]+)\{([^{}]*--sky-now-[^{}]*)\}/g)) {
+      assert.doesNotMatch(m[2], /transition|animation/, `${f} ${m[1].trim()}: a sky colour is set, never animated`);
+    }
+  }
+});
+
+test('a page without the hall\'s token tier keeps the sheet\'s own defaults', () => {
+  const html = { style: { setProperty() { throw new Error('nothing to set'); } }, setAttribute() { throw new Error('no hour to say'); }, getAttribute: () => null };
+  const document = { documentElement: html, readyState: 'complete', addEventListener() {}, body: { appendChild() {} }, createElement: () => ({ style: {}, remove() {} }) };
+  const window = { document, location: { search: '', hash: '' } };
+  vm.runInNewContext(read('sky-time.js'), { window, document, getComputedStyle: () => ({ getPropertyValue: () => '', color: 'rgb(1, 2, 3)' }), setInterval() { return 1; }, Date, Number, String, Math, Object, Array, parseInt, decodeURIComponent, isFinite });
+  assert.equal(window.OTBSkyTime.apply(document, 13), null);
+});
+
+// Owner, 2026-11-11: the hour's sky fills the whole view, edge to edge; nothing darkens its edges.
+test('the sky runs edge to edge: no vignette, no night falloff, and what is read on it stands on a plate', () => {
+  const city = strip(read('city.css')), home = strip(read('home-city.css'));
+  assert.doesNotMatch(city, /\.city-frame::(after|before)/, 'nothing lies over the city\'s frame');
+  const frame = /\.city-frame \{([^}]*)\}/.exec(city.slice(city.indexOf('.city-frame { background: radial-gradient')))[1];
+  assert.doesNotMatch(frame, /var\(--bg|transparent|rgba?\(/, 'the frame is sky from its centre to its corners');
+  assert.match(frame, /var\(--sky-now-cloud\).*var\(--sky-now-mid\)/);
+  assert.match(city, /\.city-line, \.city-mark, \.city-plaque, \.city-archived \{ background: var\(--night-plate\); clip-path: var\(--cut-path-sm\); \}/);
+  // Home: with the bars up the sky fills the city's panel; in game mode it is the ground of the whole view
+  assert.match(home, /\.hc-stage \{ background: linear-gradient\(to bottom, var\(--sky-now-top\), var\(--sky-now-mid\) 46%, var\(--sky-now-haze\)\); \}/);
+  assert.match(home, /html\[data-game="on"\] body\[data-page="home"\] \{ --plate: linear-gradient\(to bottom, var\(--sky-now-top\)[^;]*\); --plate-veil: none;/, 'the hall\'s own ground seam carries the sky, with no veil over it');
+  for (const m of home.matchAll(/([^{}]+)\{([^{}]*--sky-now-[^{}]*)\}/g)) assert.doesNotMatch(m[2], /var\(--bg(-card)?\)/, `${m[1].trim()}: the sky never fades to night`);
+  assert.match(home, /\.hc-ladder::before \{[^}]*background: var\(--night-plate\)/, 'the ladder stands on a plate');
+  assert.match(home, /html\[data-game="on"\] body\[data-page="home"\] \.page-head--hall \.page-head__h \{[^}]*background: var\(--night-plate\)/, 'so does the greeting, on the sky');
+  assert.match(home, /\.hc-time \{[^}]*background: var\(--bg-card\)/, 'and the slider keeps its night strip');
+  assert.equal(TOKENS['--night-plate'], undefined);
+  assert.match(strip(ROOT_BLOCK), /--night-plate: color-mix\(in srgb, var\(--bg\) 88%, transparent\);/, 'the plate is the night itself, nearly solid, so ice and white text hold AA on it over any sky');
+  assert.match(strip(STYLE), /html\[data-game="on"\] \.upd-pill:not\(\[data-face="done"\]\) \{ background: var\(--bg-card\); \}/, 'the Update pill floats on the sky in game mode: it is solid night');
+});
+
+test('both city pages load the hour before the painter that spends it', () => {
+  for (const [pageFile, painter] of [['city.html', 'city-draw'], ['index.html', 'home-city-draw']]) {
+    const scripts = [...read(pageFile).matchAll(/<script src="\/builders\/([a-z-]+)\.js[^"]*"( defer)?/g)].map((m) => m[1]);
+    assert.ok(scripts.includes('sky-time'), `${pageFile} loads sky-time.js`);
+    assert.ok(scripts.indexOf('sky-time') < scripts.indexOf(painter), `${pageFile}: before ${painter}.js`);
+    assert.match(read(pageFile), /<script src="\/builders\/sky-time\.js\?v=[\w-]+" defer><\/script>/, 'stamped and deferred');
+  }
+});
+
+// ── in a browser: the City page and Home draw at each of the four hours ──────
+// The ui-design kit's stub serves the hall; skips when the machine has no system Edge or
+// Chrome, as tests/hall_private_palettes.mjs does.
+let browser = null;
+try { browser = await kit.launchBrowser(); } catch (e) { if (!(e instanceof kit.NoBrowserError)) throw e; }
+after(() => browser && browser.close());
+
+test('the City page draws at night, dawn, midday and dusk with no error, in that hour\'s colours', { skip: !browser && 'no system Edge or Chrome', timeout: 180000 }, async () => {
+  const stub = await kit.startStub({ surface: 'hall-ui', prefix: '/builders/', auth: true });
+  try {
+    const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: 'dark' });
+    await ctx.addInitScript(() => { try { sessionStorage.setItem('hall-craft-asked', '1'); } catch (e) { /* private mode */ } });
+    for (const key of Sky.KEYS) {
+      const page = await ctx.newPage();
+      const errors = [];
+      page.on('pageerror', (e) => errors.push(String(e.message)));
+      await page.goto(`${stub.base}/builders/city?hour=${Sky.KEY_HOURS[key]}`, { waitUntil: 'load' });
+      await page.waitForFunction(() => document.querySelectorAll('#cityBlds g[data-key]').length >= 9, null, { timeout: 15000 });
+      const r = await page.evaluate(() => {
+        const rgb = (c) => { const m = /(\d+)[, ]+(\d+)[, ]+(\d+)/.exec(c); return m ? [+m[1], +m[2], +m[3]] : null; };
+        const css = (sel, prop) => { const el = document.querySelector(sel); return el ? getComputedStyle(el)[prop] : null; };
+        const html = document.documentElement;
+        return {
+          hour: html.getAttribute('data-sky-hour'), theme: html.getAttribute('data-theme'),
+          mid: html.style.getPropertyValue('--sky-now-mid'), cloud: html.style.getPropertyValue('--sky-now-cloud'),
+          buildings: document.querySelectorAll('#cityBlds g[data-key]').length,
+          grads: document.querySelectorAll('#cityDefs linearGradient').length,
+          rows: document.querySelectorAll('#cityBlds > path.city-cloud--row').length,
+          banks: document.querySelectorAll('#citySkyBack .city-cloud, #cityCloudFront .city-cloud').length,
+          cloudFill: rgb(css('.city-cloud--near', 'fill')), lampFill: rgb(css('.city-stars', 'fill')),
+          faceFill: css('#cityBlds g[data-key="charter"] path', 'fill'),
+          stars: css('.city-stars', 'opacity'), frame: css('.city-frame', 'backgroundImage'),
+          veil: getComputedStyle(document.querySelector('.city-frame'), '::after').content,
+          plates: ['.city-mark', '.city-plaque', '.city-line', '.city-archived'].map((s) => { const c = getComputedStyle(document.querySelector(s)); return c.backgroundColor !== 'rgba(0, 0, 0, 0)' && /^polygon/.test(c.clipPath); }),
+          ink: rgb(css('.city-line', 'color')), chip: css('.city-line', 'backgroundColor'), bodyBg: rgb(css('body', 'backgroundColor')),
+        };
+      });
+      await page.close();
+      assert.deepEqual(errors, [], `${key}: no page error`);
+      assert.equal(r.hour, String(Sky.KEY_HOURS[key]));
+      assert.equal(r.theme, 'dark', 'the hall stays dark at every hour');
+      assert.equal(r.mid, KEYS[key].mid.toLowerCase(), `${key}: the sky`);
+      assert.ok(r.buildings >= 9 && r.grads >= 2 && r.rows >= 5 && r.banks === 5, `${key}: the city and its cloud are drawn (${JSON.stringify(r)})`);
+      assert.deepEqual(r.cloudFill, Sky.rgbOf(KEYS[key].cloud), `${key}: the near bank is the hour's cloud`);
+      assert.deepEqual(r.lampFill, Sky.rgbOf(KEYS[key].lamp), `${key}: a point of light is the hour's`);
+      assert.match(r.faceFill, /url\(.*#sky-face-l/, `${key}: a face on the ground fades into the cloud`);
+      assert.equal(Number(r.stars), KEYS[key].stars, `${key}: the stars`);
+      assert.match(r.frame, /radial-gradient/, 'the frame is the sky');
+      // the sky runs to all four edges of the frame: nothing lies over it, and its corners are sky
+      assert.equal(r.veil, 'none', `${key}: no vignette or band over the frame`);
+      assert.deepEqual(r.plates, [true, true, true, true], `${key}: the wordmark, the plaque, the line and the archive note each stand on a night plate`);
+      // the words keep the hall's ink, on a night chip, whatever the sky is doing
+      assert.ok(r.ink.every((v) => v > 120), `${key}: the line under the door keeps its light ink`);
+      assert.notEqual(r.chip, 'rgba(0, 0, 0, 0)', 'on a night chip');
+      assert.ok(r.bodyBg.every((v) => v < 40), `${key}: the page ground under the chrome stays night`);
+    }
+    await ctx.close();
+  } finally { stub.stop(); }
+});

package/tests/hall_street.mjs

@@ -84,7 +84,8 @@ test('the street palette is the prototype theme() (less the iso half city-draw.j
     const t = new Proto({ mode }).theme(mode);
     delete t.iso;
     assert.deepEqual(S.theme(mode), t, mode);
-    assert.deepEqual(City.isoTheme(mode), cityTokens(new Proto({ mode }).theme(mode).iso), 'and the iso half is still city-draw.js\'s');
+    // the iso half is city-draw.js's, and since task 1005196 it is the hour's sky tokens (tests/hall_city.mjs)
+    assert.deepEqual(Object.keys(City.isoTheme(mode)).filter((k) => !(k in new Proto({ mode }).theme(mode).iso)), [], 'the iso half names nothing the prototype\'s did not');
   }
 });
 

package/tests/hall_visor.mjs

@@ -101,12 +101,16 @@ test('source: the minimal visor spends the Helm tokens and types in no colour, s
   for (const m of css.match(/transition:[^;]+/g) || []) assert.match(m, /var\(--ds-dur-/, `${m}: a duration token, so reduced motion stills it`);
   assert.match(css, /\.visor__main \{[^}]*background: var\(--accent\)[^}]*clip-path: var\(--cut-path\)/, 'the one accent button is cut');
   assert.match(css, /\.visor__main:focus-visible[^{]*\{[^}]*box-shadow: var\(--press-focus\)/, 'a cut control takes the inset ring');
-  assert.match(css, /\.visor__hint \{[^}]*background: none; border: 0/, 'a key hint has no box');
+  assert.match(css, /\.visor__hint \{[^}]*border: 0/, 'a key hint has no drawn box');
   assert.match(css, /\.visor__place, \.visor__name, \.visor__unit, \.visor__main, \.visor__hint[^{]*\{\s*font-family: var\(--name-face\)/, 'names are in the name voice');
-  // it reads over any sky with one treatment, never a per-hour style
-  assert.match(css, /html\[data-game="on"\] \.visor:not\(\[hidden\]\) \{[^}]*background: linear-gradient\(to bottom, var\(--night-glass\), transparent[^;]*var\(--night-glass\)\)/, 'the glass darkens toward its edges');
-  assert.match(css, /text-shadow: var\(--type-halo\); -webkit-text-stroke: 4px var\(--night-glass\); paint-order: stroke fill/, 'type wears the halo over a stroke of the night');
-  assert.match(css, /\.visor__line--under \{ stroke: var\(--night-glass\)/, 'every line is drawn over the night');
+  // it reads over any sky with one treatment, never a per-hour style, and it darkens none of the
+  // sky (task 1005196, owner: the hour's sky runs to every edge of the view)
+  const glass = /html\[data-game="on"\] \.visor:not\(\[hidden\]\) \{([^}]*)\}/.exec(css)[1];
+  assert.doesNotMatch(glass, /background|box-shadow|backdrop-filter|filter:/, 'the glass itself paints nothing: no edge band, no vignette, no veil');
+  assert.doesNotMatch(css, /--night-glass|linear-gradient|radial-gradient\((?!circle, currentColor)|--type-halo/, 'no band of the night anywhere on the glass, and no dark glow round its type');
+  assert.match(css, /\.visor__place, \.visor__who, \.visor__hint \{ background: var\(--night-plate\); clip-path: var\(--cut-path-sm\); \}/, 'the place, each hint and your credits stand on a small cut plate of the night');
+  assert.match(css, /\.visor__line--under \{ stroke: var\(--bg\); stroke-opacity: 1/, 'every line is drawn over a solid stroke of the night, so it reads on cloud and on night');
+  assert.match(css, /\.visor__key \{[^}]*background: var\(--bg\)/, 'a key sits on a chip of the night');
   assert.doesNotMatch(css, /data-hour|data-time|data-sky/, 'no per-hour style');
   // the frame is two arcs, a notch and a sight; the compass, the side lines and the pills are gone
   assert.equal((VISOR.match(/svgOpen\('visor__frame /g) || []).length, 2, 'two arcs');
@@ -318,6 +322,8 @@ test('the glass is the kit\'s: the cut accent button, ice hints with no box, the
     return {
       mainBg: cs('.visor__main').backgroundColor, accent: probe('var(--accent)'), mainClip: cs('.visor__main').clipPath,
       mainCase: cs('.visor__main').textTransform, hintBg: cs('.visor__hint').backgroundColor, hintBorder: cs('.visor__hint').borderTopWidth,
+      plate: probe('var(--night-plate)'), placeBg: cs('.visor__place').backgroundColor, whoBg: cs('.visor__who').backgroundColor, hintClip: cs('.visor__hint').clipPath,
+      glassBg: cs('#visor').backgroundImage + ' ' + cs('#visor').backgroundColor,
       hintColor: cs('.visor__hint').color, ice: probe('var(--ink-soft)'), num: cs('.visor__num').color, unit: cs('.visor__unit').color, white: probe('var(--ink)'),
       placeShadow: cs('.visor__place').textShadow, radius: cs('.visor__sprite').borderTopLeftRadius, spriteClip: cs('.visor__sprite').clipPath,
       cut: root.getPropertyValue('--cut-path').trim() !== '',
@@ -326,12 +332,16 @@ test('the glass is the kit\'s: the cut accent button, ice hints with no box, the
   assert.equal(g.mainBg, g.accent, 'the one accent fill is the button you press');
   assert.match(g.mainClip, /^polygon\(/, 'cut corner');
   assert.equal(g.mainCase, 'uppercase', 'the name voice');
-  assert.equal(g.hintBg, 'rgba(0, 0, 0, 0)');
-  assert.equal(g.hintBorder, '0px', 'a hint has no box');
+  assert.equal(g.glassBg, 'none rgba(0, 0, 0, 0)', 'the glass darkens nothing: the scene shows to every edge');
+  assert.equal(g.hintBg, g.plate, 'a hint stands on a plate of the night');
+  assert.equal(g.placeBg, g.plate, 'so does the place');
+  assert.equal(g.whoBg, g.plate, 'and your credits');
+  assert.match(g.hintClip, /^polygon\(/, 'the plate is cut');
+  assert.equal(g.hintBorder, '0px', 'a hint has no drawn box');
   assert.equal(g.hintColor, g.ice, 'hints are ice');
   assert.equal(g.num, g.white, 'the count is white');
   assert.equal(g.unit, g.ice, 'its word is ice');
-  assert.notEqual(g.placeShadow, 'none', 'type over the scene wears the halo');
+  assert.equal(g.placeShadow, 'none', 'type on a plate needs no halo');
   assert.equal(g.radius, '0px', 'no round thing on the glass');
   assert.match(g.spriteClip, /^polygon\(/, 'the sprite sits in a cut box');
   await page.keyboard.press('Tab');

package/tests/home_city.mjs

@@ -383,7 +383,7 @@ await test('ledger text is never markup: titles and names travel as attribute va
     people: [{ id: '9', name: '"><script>x</script>', build: [1], art: [0], idea: [0], gov: [0] }],
     ideas: [{ id: '3', week: 0, by: '9', title: '<b>idea</b>' }], now: { sites: [{ goal_id: '1', builder_id: '9' }] } };
   const ns = all(Draw.citySvg(Draw.cityModel(hostile), 0, { mode: 'light' }).nodes);
-  const SHAPES = new Set(['defs', 'radialGradient', 'stop', 'path', 'line', 'circle', 'ellipse', 'g', 'a', 'rect', 'text', 'clipPath', 'image']);
+  const SHAPES = new Set(['defs', 'radialGradient', 'linearGradient', 'filter', 'feGaussianBlur', 'stop', 'path', 'line', 'circle', 'ellipse', 'g', 'a', 'rect', 'text', 'clipPath', 'image']);
   assert.deepEqual([...new Set(ns.map((n) => n.tag))].filter((t) => !SHAPES.has(t)), [], 'only SVG shapes, whatever a title says');
   assert.ok(ns.some((n) => n.attrs['data-tip'] === '<img src=x onerror=alert(1)>'), 'the title rides as an attribute value, set with setAttribute');
   assert.ok(ns.some((n) => n.tag === 'text' && n.text === '"'), 'a name\'s initial is a text node');
@@ -415,7 +415,11 @@ await test('on the builder\'s Home the core and the museum are faded; a craft\'s
   assert.doesNotMatch(cls('museum', 'hc-museum'), /hc-quiet/);
   assert.doesNotMatch(cls('core', 'hc-core'), /hc-quiet/);
   const css = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/home-city.css'), 'utf8');
-  assert.match(css, /\.hc-quiet\s*\{[^}]*opacity:\s*\.3/, 'faded');
+  // quiet, and still readable against the cloud at every hour (task 1005196): part-faded and drained, never near-invisible
+  const quietRule = /\.hc-quiet\s*\{([^}]*)\}/.exec(css)[1];
+  const fade = Number(/opacity:\s*([.\d]+)/.exec(quietRule)[1]);
+  assert.ok(fade >= 0.55 && fade <= 0.75, 'faded, but it reads');
+  assert.match(quietRule, /saturate\(\.\d+\)/, 'and drained of colour');
   assert.match(css, /\.hc-quiet:hover,\s*\.hc-svg \.hc-quiet:focus-visible\s*\{[^}]*filter:\s*none/, 'back to colour under the pointer or the keyboard');
 });
 
@@ -445,10 +449,55 @@ await test('a week part-way through grows each tower part-way: the slider glides
   assert.equal(at(3.5), (at(3) + at(4)) / 2);
 });
 
-await test('both modes draw with their own faces', () => {
+// Task 1005196: the city in the clouds. One palette, the hour's sky tokens; the hall is dark only.
+await test('the city is painted from the hour\'s sky tokens: no colour literal, whatever the mode', () => {
   const m = Draw.cityModel(FIXTURE);
-  assert.ok(all(Draw.citySvg(m, m.W - 1, { mode: 'dark' }).nodes).some((n) => n.attrs.fill === '#34343a'));
-  assert.ok(all(Draw.citySvg(m, m.W - 1, { mode: 'light' }).nodes).some((n) => n.attrs.fill === '#f6f5f8'));
+  const dark = all(Draw.citySvg(m, m.W - 1, { mode: 'dark', gov: Gov }).nodes);
+  assert.deepEqual(all(Draw.citySvg(m, m.W - 1, { mode: 'light', gov: Gov }).nodes).map((n) => n.attrs.fill), dark.map((n) => n.attrs.fill), 'a mode argument changes nothing');
+  assert.deepEqual(Draw.theme('light'), Draw.theme('dark'));
+  const paints = dark.flatMap((n) => [n.attrs.fill, n.attrs.stroke, n.attrs['stop-color']]).filter((v) => v != null);
+  assert.ok(paints.length > 100);
+  for (const v of paints) assert.doesNotMatch(String(v), /#[0-9a-f]{3,8}\b|rgba?\(|hsla?\(/i, `${v}: no colour literal`);
+  assert.ok(paints.some((v) => v === 'var(--sky-now-roof)') && paints.some((v) => v === 'var(--sky-now-lit)') && paints.some((v) => v === 'var(--sky-now-shade)'), 'a tower\'s top, lit face and shade face are the sky\'s');
+  for (const draw of [Draw.theme(), Draw.skyTheme()]) {
+    (function walk(v) { if (typeof v === 'string') assert.doesNotMatch(v, /#[0-9a-f]{3,8}\b|rgba?\(/i, v); else if (v && typeof v === 'object') Object.values(v).forEach(walk); })(draw);
+  }
+});
+
+const viewOX = (m) => Draw.viewBoxOf(m).OX;
+await test('the city stands in cloud: no ground plane, banks behind and in front, a puff at each tower\'s foot', () => {
+  const m = Draw.cityModel(FIXTURE);
+  const out = Draw.citySvg(m, m.W - 1, { gov: Gov }).nodes;
+  const ns = all(out);
+  const clouds = ns.filter((n) => /\bhc-cloud\b/.test(n.attrs.class || ''));
+  const kinds = (k) => clouds.filter((n) => n.attrs.class === 'hc-cloud hc-cloud--' + k).length;
+  assert.deepEqual([kinds('far'), kinds('back'), kinds('near')], [1, 1, 1]);
+  assert.equal(kinds('row'), m.areas.length, 'one puff at the foot of each tower');
+  for (const c of clouds) { assert.equal(c.attrs.fill, undefined, 'the sheet gives a cloud its sky token'); assert.match(c.attrs.filter, /^url\(#hc-soft(er)?\)$/); }
+  // the banks behind come before every building, the banks in front after the last one
+  const idx = (re) => out.findIndex((n) => re.test(n.attrs.class || ''));
+  const lastTower = out.map((n) => /\bhc-tower\b/.test(n.attrs.class || '')).lastIndexOf(true);
+  assert.ok(idx(/hc-cloud--far/) < idx(/hc-tower|hc-core|hc-museum/) && idx(/hc-cloud--near/) > lastTower);
+  const defs = out[0];
+  assert.equal(defs.tag, 'defs');
+  assert.deepEqual(defs.kids.filter((k) => k.tag === 'linearGradient').map((k) => k.attrs.id), ['sky-face-l', 'sky-face-r'], 'the face gradients are the Governor City\'s own');
+  assert.deepEqual(defs.kids.filter((k) => k.tag === 'filter').map((k) => k.attrs.id), ['hc-soft', 'hc-softer']);
+  // a plinth stands in the cloud and fades into it; the tower above keeps its plain faces
+  const tower = out.find((n) => /\bhc-tower\b/.test(n.attrs.class || ''));
+  assert.equal(tower.kids[0].attrs.fill, 'url(#sky-face-l) var(--sky-now-lit)');
+  assert.equal(tower.kids[3].attrs.fill, 'var(--sky-now-lit)');
+  // the cloud's shape is city-draw.js's own, asked for and never copied
+  assert.equal(clouds.find((n) => /--far$/.test(n.attrs.class)).attrs.d.indexOf(Gov.cloudAt(viewOX(m) - 250, Draw.viewBoxOf(m).OY + 50, 0.55)), 0);
+  assert.doesNotMatch(fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/home-city-draw.js'), 'utf8'), /const CLOUD\b|0 1 0/, 'no cloud or ellipse formula in Home\'s painter');
+  // drawn without the Governor City the scene still paints: plain faces as the fallback, and no cloud
+  const bare = Draw.citySvg(m, m.W - 1, {}).nodes;
+  assert.equal(bare[0].kids.filter((k) => k.tag === 'linearGradient').length, 0);
+  assert.equal(all(bare).filter((n) => /\bhc-cloud\b/.test(n.attrs.class || '')).length, 0);
+  // the idea stars are one group, so the sheet can show them at the hour's star strength
+  const sky = out.find((n) => /\bhc-sky\b/.test(n.attrs.class || ''));
+  assert.deepEqual(sky.kids.map((k) => k.tag + (k.attrs.class ? '.' + k.attrs.class : '')), ['rect', 'g.hc-stars']);
+  assert.ok(sky.kids[1].kids.length > 0 && sky.kids[1].kids.every((k) => k.tag === 'circle'));
+  assert.match(fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/home-city.css'), 'utf8'), /\.hc-svg \.hc-stars \{ opacity: var\(--sky-now-stars\); \}/, 'gone by day');
 });
 
 // ---------------------------------------------------------------------------