@bongos/core 1.20.59 → 1.20.60

package/tests/look_night_tint.mjs

@@ -0,0 +1,169 @@
+// tests/look_night_tint.mjs — the look a hall wears, its night tint and its logo, hall
+// side (task 1004421, BV2.PS06; ADR 0358).
+//
+// The load-bearing assertions:
+//   • THE BLEND RULE: a hall that never chose a look is exactly today's hall — the
+//     same theme, the same markup, pure black at night — whatever its tint setting;
+//   • a pushed look name becomes that look's fifteen on the instance, read from the
+//     style library the core ships; an unknown name or a malformed accent leaves the
+//     hall on its own pack rather than half-applying;
+//   • the night tint is emitted only with a look, as both dark twins, after the sheet;
+//   • CONTRAST: the hall's own token suite (tests/hall_tokens.mjs) passes under every
+//     library look with the tint on, and under custom accents round the hue wheel
+//     after the platform's nudge — light, dark and tinted dark;
+//   • a logo address reaches the hall mark and the favicon only when it is a plain
+//     https URL.
+//
+// Run:  node --test tests/look_night_tint.mjs
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { spawnSync } from 'node:child_process';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const { resolveBranding, clientBranding } = require('../src/branding.js');
+const { themeMarkup } = require('../src/bongos/serve-internal.js');
+const { NIGHT_TINT, nightTintCss } = require('../src/night-tint.js');
+const { lookAdjustAccent, LIBRARY_LOOKS } = require('../modules/provisioning/look.js');
+
+const neutral = JSON.parse(fs.readFileSync(path.join(ROOT, 'config', 'branding.neutral.json'), 'utf8'));
+const brand = (env = {}) => clientBranding(resolveBranding({ neutral, env }));
+const packOf = (name) => JSON.parse(fs.readFileSync(path.join(ROOT, 'modules', 'ui-design', 'styles', name, 'pack.json'), 'utf8')).theme.ui;
+
+test('the blend rule: no look means today\'s hall, whatever the tint setting says', () => {
+  const today = brand();
+  for (const env of [{ BONGOS_LOOK: 'own' }, { BONGOS_NIGHT_TINT: 'on' }, { BONGOS_LOOK: 'own', BONGOS_NIGHT_TINT: 'on' }]) {
+    const b = brand(env);
+    assert.deepEqual(b.theme, today.theme, JSON.stringify(env));
+    assert.equal(themeMarkup(b.theme), themeMarkup(today.theme));
+  }
+  assert.equal(today.theme.nightTint, false);
+  assert.equal(today.theme.look, '');
+  assert.ok(!themeMarkup(today.theme).includes('data-theme'), 'no dark block is injected for a hall without a look');
+  assert.deepEqual(today.theme.colors, neutral.theme.ui.colors);
+});
+
+test('a library look becomes its fifteen, and the manifest reads back what was pushed', () => {
+  for (const name of LIBRARY_LOOKS) {
+    const b = brand({ BONGOS_LOOK: name });
+    const ui = packOf(name);
+    assert.deepEqual(b.theme.colors, ui.colors, name);
+    assert.deepEqual(b.theme.fonts, { display: ui.fonts.display, body: ui.fonts.body, links: ui.fonts.links }, name);
+    assert.equal(b.theme.look, name);
+    assert.equal(b.project.look, name, 'the settings read-back (settingsConsumed) sees the pushed name');
+    assert.equal(b.theme.nightTint, true, 'the tint is on by default with a look');
+    assert.match(b.theme.favicon, new RegExp(encodeURIComponent(ui.colors.accent)), 'the tab icon is drawn in the look\'s accent');
+  }
+  assert.equal(brand({ BONGOS_LOOK: 'grove', BONGOS_NIGHT_TINT: 'off' }).theme.nightTint, false, 'the founder can switch back to pure black');
+  assert.equal(brand({ BONGOS_LOOK: 'grove', BONGOS_NIGHT_TINT: 'off' }).project.nightTint, 'off');
+});
+
+test('a custom look is the chrome world with one accent; an unusable accent or an unknown look leaves the hall alone', () => {
+  const b = brand({ BONGOS_LOOK: 'custom', BONGOS_LOOK_ACCENT: '#B48CF2' });
+  assert.deepEqual(b.theme.colors, { ...packOf('chrome-world').colors, accent: '#b48cf2' });
+  assert.equal(b.theme.look, 'custom');
+  const today = brand();
+  for (const env of [{ BONGOS_LOOK: 'custom' }, { BONGOS_LOOK: 'custom', BONGOS_LOOK_ACCENT: 'red;}body{x' }, { BONGOS_LOOK: 'neon' }, { BONGOS_LOOK: '../../etc' }]) {
+    assert.deepEqual(brand(env).theme, today.theme, JSON.stringify(env));
+  }
+});
+
+test('the night tint is emitted with a look, as both dark twins, and nowhere else', () => {
+  const on = themeMarkup(brand({ BONGOS_LOOK: 'expedition' }).theme);
+  assert.ok(on.includes(nightTintCss()), 'the tint block is in the markup');
+  assert.ok(on.indexOf(':root{') < on.indexOf(nightTintCss()), 'after the palette, so the dark grounds win on order');
+  assert.equal(nightTintCss().split('--bg:').length - 1, 2, 'written twice: the [data-theme] switch and the media twin');
+  assert.match(nightTintCss(), /html\[data-theme="dark"\]\{/);
+  assert.match(nightTintCss(), /@media \(prefers-color-scheme: dark\)\{html:not\(\[data-theme\]\)\{/);
+  for (const v of Object.values(NIGHT_TINT)) assert.match(v, /^color-mix\(in srgb, var\(--accent\) \d+%, #[0-9a-f]{6}\)$/, 'derived from the look\'s own accent, never a literal colour');
+  assert.ok(!themeMarkup(brand({ BONGOS_LOOK: 'expedition', BONGOS_NIGHT_TINT: 'off' }).theme).includes('data-theme'));
+});
+
+test('a logo reaches the hall only as a plain https address, and becomes its favicon', () => {
+  const url = 'https://platform.test/api/bongos/provisioning/logos/' + 'a'.repeat(64) + '.png';
+  const b = brand({ BONGOS_LOGO_URL: url });
+  assert.equal(b.theme.logo, url);
+  assert.equal(b.theme.favicon, url);
+  assert.equal(b.theme.nightTint, false, 'a logo alone tints nothing');
+  assert.deepEqual(b.theme.colors, neutral.theme.ui.colors, 'a logo alone changes no colour');
+  for (const bad of ['http://x.test/a.png', 'javascript:alert(1)', 'https://x.test/a.png"><script>', 'https://x.test/a b.png', 'https://x.test/a.png)']) {
+    assert.equal(brand({ BONGOS_LOGO_URL: bad }).theme.logo, '', bad);
+  }
+  const shell = fs.readFileSync(path.join(ROOT, 'modules', 'hall-ui', 'public', 'shell.js'), 'utf8');
+  assert.match(shell, /brand\.theme && brand\.theme\.logo\s*\?\s*'<img class="brand-mark__logo" src="' \+ esc\(brand\.theme\.logo\)/, 'the hall mark shows the logo, escaped, in the dot\'s place');
+  assert.match(fs.readFileSync(path.join(ROOT, 'modules', 'hall-ui', 'public', 'style.css'), 'utf8'), /\.brand-mark__logo \{/);
+});
+
+// ── contrast: the hall's own suite, under each look, with the tint on ──────────────
+const childEnv = (extra) => {
+  const env = { ...process.env, ...extra };
+  delete env.NODE_TEST_CONTEXT; // a nested node --test must run its own tests, not report to ours
+  return env;
+};
+function hallSuite(extra) {
+  const r = spawnSync(process.execPath, ['--test', '--test-reporter=tap', 'tests/hall_tokens.mjs'], {
+    cwd: ROOT, encoding: 'utf8', env: childEnv({ UI_DESIGN_TINT: '1', ...extra }), timeout: 120000,
+  });
+  const fails = (r.stdout || '').split('\n').filter((l) => /= \d+\.\d+:1/.test(l)).map((l) => l.trim());
+  return { status: r.status, fails };
+}
+
+test('the hall clears AA under every library look with the night tint on', () => {
+  for (const name of LIBRARY_LOOKS) {
+    const r = hallSuite({ UI_DESIGN_PACK: path.join(ROOT, 'modules', 'ui-design', 'styles', name, 'pack.json') });
+    assert.equal(r.status, 0, `${name}, tinted night:\n${r.fails.join('\n')}`);
+  }
+});
+
+test('the hall clears AA under custom accents round the hue wheel, once the platform has nudged them', () => {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'look-tint-'));
+  const chrome = JSON.parse(fs.readFileSync(path.join(ROOT, 'modules', 'ui-design', 'styles', 'chrome-world', 'pack.json'), 'utf8'));
+  const hsl = (h, s, l) => {
+    const a = s * Math.min(l, 1 - l), k = (n) => (n + h / 30) % 12;
+    const f = (n) => Math.round(255 * (l - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1))));
+    return '#' + [f(0), f(8), f(4)].map((x) => x.toString(16).padStart(2, '0')).join('');
+  };
+  // Saturated hues at three lightnesses, plus the greys — the corners of the space.
+  const raw = [];
+  for (let h = 0; h < 360; h += 45) for (const l of [0.25, 0.5, 0.8]) raw.push(hsl(h, 1, l));
+  raw.push('#000000', '#808080', '#ffffff');
+  const failures = [];
+  try {
+    for (const hex of raw) {
+      const kept = lookAdjustAccent(hex).hex;
+      const pack = structuredClone(chrome);
+      pack.theme.ui.colors.accent = kept;
+      const file = path.join(tmp, `${hex.slice(1)}.json`);
+      fs.writeFileSync(file, JSON.stringify(pack));
+      for (const tint of ['0', '1']) {
+        const r = hallSuite({ UI_DESIGN_PACK: file, UI_DESIGN_TINT: tint });
+        if (r.status !== 0) failures.push(`${hex} → ${kept} (${tint === '1' ? 'tinted' : 'black'} night): ${r.fails.join('; ') || 'suite failed'}`);
+      }
+    }
+  } finally { fs.rmSync(tmp, { recursive: true, force: true }); }
+  assert.deepEqual(failures, []);
+});
+
+test('UI_DESIGN_TINT is honoured, not decorative: a tint that is too strong fails the hall suite', () => {
+  // Proves the knob reaches the resolver: the same suite, with the card tinted far past
+  // the shipped share, must go red on the pair the 8% draft already failed.
+  const src = fs.readFileSync(path.join(ROOT, 'tests', 'hall_tokens.mjs'), 'utf8');
+  assert.match(src, /process\.env\.UI_DESIGN_TINT === '1'/);
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'look-tint-strong-'));
+  try {
+    const strong = path.join(tmp, 'night-tint.js');
+    fs.writeFileSync(strong, fs.readFileSync(path.join(ROOT, 'src', 'night-tint.js'), 'utf8').replace(/var\(--accent\) 5%, #101012/, 'var(--accent) 30%, #101012'));
+    const probe = path.join(tmp, 'hall_tokens.mjs');
+    fs.writeFileSync(probe, src.replace("'../src/night-tint.js'", JSON.stringify(strong)).replace(
+      "path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')", JSON.stringify(ROOT)));
+    const r = spawnSync(process.execPath, ['--test', '--test-reporter=tap', probe], { cwd: ROOT, encoding: 'utf8', env: childEnv({ UI_DESIGN_TINT: '1' }), timeout: 120000 });
+    assert.notEqual(r.status, 0, 'a 30% card tint must fail the hall suite');
+    assert.match(r.stdout, /dark --[\w-]+ on --[\w-]+ = \d/);
+  } finally { fs.rmSync(tmp, { recursive: true, force: true }); }
+});

package/tests/nav_permission_atoms.mjs

@@ -87,7 +87,7 @@ test('the hall-preview fixture carries every atom /me resolves', () => {
 // the file and left the query alone, so a returning browser kept the cached copy —
 // a fix that reaches nobody looks identical to a fix that does not work.
 
-const SHELL_SHA = 'c05e9d87594aca3c';
+const SHELL_SHA = '51a13ea563542113';
 
 test('shell.js has not changed without its cache-bust being bumped', () => {
   const actual = crypto.createHash('sha256').update(SHELL).digest('hex').slice(0, 16);

package/tests/projects_hub.mjs

@@ -715,8 +715,9 @@ test('a renumbering of the wizard invalidates old drafts — the key carries the
   const panels = (SCRIPT.match(/var panels = \{([^}]*)\}/) || [, ''])[1];
   const count = [...panels.matchAll(/\d+:\s*'panel-/g)].length;
   // task 1004417 put the front door's two screens (terms, fork) in front: the sixth renumbering
-  assert.equal(count, 12, 'gate + the front door\'s two + eight numbered steps + done — bump DRAFT_KEY when this changes');
-  assert.equal(key, 'cb-create-draft-v6', 'and the key moved with the front door');
+  // task 1004421 put the Look step between App and Review: the seventh
+  assert.equal(count, 13, 'gate + the front door\'s two + nine numbered steps + done — bump DRAFT_KEY when this changes');
+  assert.equal(key, 'cb-create-draft-v7', 'and the key moved with the Look step');
 });
 
 test('every row lays the same five parts — the ledger has no ragged row', () => {
@@ -2137,7 +2138,7 @@ test('the wizard takes the world by scope: no card ground, the six-step strip as
   assert.match(block, /#view-new \.card\{background:none;border-radius:0;box-shadow:none;/, 'no card ground');
   // eight tracks since task 1004351 added the App step (seven since 1002339); the count is the
   // rail's own, so it moves with the panels map rather than being a magic number
-  assert.match(block, /#view-new \.steps\{display:grid;grid-template-columns:repeat\(8,1fr\);/, 'the strip lays a track per numbered step');
+  assert.match(block, /#view-new \.steps\{display:grid;grid-template-columns:repeat\(9,1fr\);/, 'the strip lays a track per numbered step');
   assert.match(block, /#view-new \.steps li::before\{content:"";position:absolute;top:-4px;left:0;right:auto;width:7px;height:7px;/, 'the connector becomes the 7px dot');
   assert.match(block, /#view-new \.steps li\.now::before\{background:var\(--accent\);border-color:var\(--accent\);outline:4px solid/, 'the lit step carries the accent and an outline halo');
   assert.match(block, /#view-new \.panel h1\{font-weight:300;[^}]*text-transform:lowercase;/, 'the step title in the display voice, lowercase');
@@ -2184,7 +2185,7 @@ test('the wizard\'s own structures wear the world: hairline fields, cells of one
   assert.match(block, /\.addrBig code\{display:block;font-family:var\(--font-display\);/, 'the address stands in the display voice');
   assert.doesNotMatch(block, /linear-gradient/, 'no tinted plates');
   assert.doesNotMatch(block, /box-shadow:(?!none)/, 'no box shadow in the wizard block');
-  assert.match(HUB, /<div class="nav">\s*<button type="button" class="btn ghost" data-back="9">← Back<\/button>\s*<button type="button" class="btn big" id="doCreate">Create my project<\/button>/, 'the review\'s doors sit on one row, back then the primary');
+  assert.match(HUB, /<div class="nav">\s*<button type="button" class="btn ghost" data-back="10">← Back<\/button>\s*<button type="button" class="btn big" id="doCreate">Create my project<\/button>/, 'the review\'s doors sit on one row, back then the primary');
   assert.match(HUB, /<h2 class="stepsHead" id="doneStepsHead">Your steps — the parts only you can play<\/h2>/, 'the steps heading is the label face by class, not an inline style (the id is where a skipped invite step hands focus on, task 1002346)');
   // what is enqueued is unchanged (ADR 0111): the filing body the control plane reads
   assert.match(SCRIPT, /body: JSON\.stringify\(\{\s*slug: state\.slug,/, 'the filing still carries the slug first');

package/tests/projects_hub_app_status.mjs

@@ -240,7 +240,7 @@ test('a repaint never lands on top of an open Retry — from this watch or a fre
 });
 
 test('both surfaces use it: the done panel and the project page', () => {
-  assert.match(HUB, /if \(box\) watchApp\(instanceId, box, function \(\) \{ return state\.step === 11; \}, 5000\);/);
+  assert.match(HUB, /if \(box\) watchApp\(instanceId, box, function \(\) \{ return state\.step === 12; \}, 5000\);/);
   assert.match(HUB, /<div id="doneApp" hidden><\/div>/);
   assert.match(HUB, /<div class="card mSec" id="mAppCard" hidden>\n\s*<h2>Where its app runs<\/h2>\n\s*<div id="mApp"><\/div>/);
   assert.match(HUB, /loadAppStatus\(inst\.id \|\| asked, inst\);/);

package/tests/projects_hub_app_step.mjs

@@ -142,16 +142,17 @@ test('the panel is real markup: Render and Decide later, Decide later the defaul
   assert.doesNotMatch(PANEL, /Coming soon/, 'and is no longer marked soon');
   assert.match(PANEL, /<input type="radio" name="appPlatform" value="later" checked>/, 'Decide later is the default');
   assert.match(PANEL, /We host your Builders' hall/, 'the step says the hall is ours to host (ADR 0345 D1), in the page\'s one spelling of it');
-  assert.match(PANEL, /<form data-next="10">/, 'Next leads to the review');
+  assert.match(PANEL, /<form data-next="10">/, 'Next leads to the Look step (task 1004421), then the review');
   assert.match(PANEL, /data-back="8"/, 'Back returns to the address step');
 });
 
-test('the step sits between Address and Review in the panels map and on the rail', () => {
-  assert.match(HUB, /8: 'panel-address', 9: 'panel-app', 10: 'panel-review', 11: 'panel-done'/);
+test('the step sits between Address and the Look step in the panels map and on the rail', () => {
+  assert.match(HUB, /8: 'panel-address', 9: 'panel-app', 10: 'panel-look', 11: 'panel-review', 12: 'panel-done'/);
   assert.match(HUB, /<li data-step="9"><span class="snum">7<\/span><span class="slbl">App<\/span><\/li>/);
-  assert.match(HUB, /<li data-step="10"><span class="snum">8<\/span><span class="slbl">Create<\/span><\/li>/);
-  assert.match(HUB, /data-back="9">← Back<\/button>\n\s*<button type="button" class="btn big" id="doCreate">/, "the review's Back returns to the app step");
-  assert.match(HUB, /if \(step === 9\) \{ syncAppStep\(\); syncRenderSetup\(\); \}\n\s*if \(step === 10\) renderReview\(\);/, 'entering the step repaints it, Render setup included');
+  assert.match(HUB, /<li data-step="10"><span class="snum">8<\/span><span class="slbl">Look<\/span><\/li>/);
+  assert.match(HUB, /<li data-step="11"><span class="snum">9<\/span><span class="slbl">Create<\/span><\/li>/);
+  assert.match(HUB, /data-back="10">← Back<\/button>\n\s*<button type="button" class="btn big" id="doCreate">/, "the review's Back returns to the Look step");
+  assert.match(HUB, /if \(step === 9\) \{ syncAppStep\(\); syncRenderSetup\(\); \}\n\s*if \(step === 10\) renderLook\(\);\n\s*if \(step === 11\) renderReview\(\);/, 'entering the step repaints it, Render setup included');
   assert.match(HUB, /if \(step === 9\) return validateRender\(\);/, 'Next on the step runs the Render check');
 });
 
@@ -455,5 +456,5 @@ test('the review names exactly what was chosen, prices included', () => {
 });
 
 test('Create hands the app to Render straight after the project is filed', () => {
-  assert.match(HUB, /show\(11, true\);\n\s*sendRenderSetup\(data\.instance && data\.instance\.id\);/);
+  assert.match(HUB, /show\(12, true\);\n\s*sendRenderSetup\(data\.instance && data\.instance\.id\);/);
 });

package/tests/projects_hub_look.mjs

@@ -0,0 +1,255 @@
+// tests/projects_hub_look.mjs — the Look step in the create wizard and "Its look" on the
+// manage page (task 1004421, BV2.PS06; ADR 0358; spec D2 + D8).
+//
+// The load-bearing assertions:
+//   • the previews paint the REAL looks: every colour lookKit carries equals its
+//     pack.json, and the night shares equal src/night-tint.js — a preview that drifted
+//     from the hall would promise a look the hall does not wear;
+//   • the step sits between App and Review (look 10, review 11, done 12, draft v7), on
+//     the rail as a beat of its own, and every kit walk past App passes it;
+//   • EXECUTED by the vm-slice idiom: the picker offers the four looks and "make your
+//     own", shows the accent only for your own, shows the ADJUSTED colour in the
+//     preview and says so, paints a black night when the tint is off, refuses an SVG
+//     or oversized logo before reading it, and sends the look then the logo;
+//   • Create sends the look right after the project is filed, and the review names it;
+//   • the manage page reads the look once per project, never on the minute tick.
+//
+// Run:  node --test tests/projects_hub_look.mjs
+
+import { test } 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 { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const LANDING = path.join(ROOT, 'modules', 'public-landing', 'public');
+const HUB = fs.readFileSync(path.join(LANDING, 'projects.html'), 'utf8').replace(/\r\n/g, '\n');
+const { NIGHT_TINT } = require('../src/night-tint.js');
+const { LIBRARY_LOOKS, lookAdjustAccent } = require('../modules/provisioning/look.js');
+
+// ── the lookKit slice, run in a vm under a small DOM stub ───────────────────────
+const KIT_START = '  var lookKit = (function () {';
+const KIT_END = '\n  })();\n';
+const kitStart = HUB.indexOf(KIT_START);
+const kitEnd = HUB.indexOf(KIT_END, kitStart);
+const KIT_SRC = HUB.slice(kitStart, kitEnd + KIT_END.length);
+
+function makeDom() {
+  const all = [];
+  function node(tag) {
+    const n = {
+      tagName: String(tag).toUpperCase(), children: [], parentNode: null, style: { props: {}, setProperty(k, v) { this.props[k] = v; } },
+      attrs: {}, listeners: {}, hidden: false, value: '', checked: false, textContent: '', className: '', id: '', type: '', name: '', src: '', files: null,
+      get firstChild() { return this.children[0] || null; },
+      classList: null,
+      appendChild(c) { c.parentNode = this; this.children.push(c); return c; },
+      removeChild(c) { this.children = this.children.filter((x) => x !== c); c.parentNode = null; return c; },
+      setAttribute(k, v) { this.attrs[k] = String(v); },
+      addEventListener(ev, fn) { (this.listeners[ev] ||= []).push(fn); },
+      fire(ev) { (this.listeners[ev] || []).forEach((fn) => fn.call(this, { target: this })); },
+      querySelector(sel) { return find(this, (x) => x.className.split(' ').includes(sel.replace(/^\./, ''))); },
+    };
+    n.classList = {
+      add(c) { const s = new Set(n.className.split(' ').filter(Boolean)); s.add(c); n.className = [...s].join(' '); },
+      remove(c) { n.className = n.className.split(' ').filter((x) => x && x !== c).join(' '); },
+      toggle(c, on) { if (on) this.add(c); else this.remove(c); },
+      contains(c) { return n.className.split(' ').includes(c); },
+    };
+    all.push(n);
+    return n;
+  }
+  function find(root, pred) {
+    for (const c of root.children) { if (pred(c)) return c; const d = find(c, pred); if (d) return d; }
+    return null;
+  }
+  const document = { createElement: node };
+  const byId = (root, id) => find(root, (x) => x.id === id);
+  return { document, node, byId, find };
+}
+
+function bootKit({ fetchImpl, reader } = {}) {
+  const dom = makeDom();
+  const sandbox = {
+    document: dom.document, API: '/api/bongos', JSON, Math, String, Number, Object, Array, Promise, parseInt,
+    fetch: fetchImpl || (() => Promise.reject(new Error('no fetch'))),
+    FileReader: reader || function FileReader() { this.readAsDataURL = (f) => { this.result = 'data:' + f.type + ';base64,QUJD'; this.onload(); }; },
+  };
+  vm.createContext(sandbox);
+  vm.runInContext(KIT_SRC.replace('var lookKit =', 'this.lookKit ='), sandbox);
+  return { kit: sandbox.lookKit, dom };
+}
+
+test('the slice is findable: a rename must fail here, not silently test nothing', () => {
+  assert.ok(kitStart > -1, 'var lookKit = (function () { is in the page');
+  assert.ok(kitEnd > kitStart, 'and it closes');
+  assert.match(KIT_SRC, /function buildLookPicker\(host, model, onChange, idp, projectName\)/);
+});
+
+test('every colour the previews paint is its pack\'s, and the night shares are the hall\'s', () => {
+  const { kit } = bootKit();
+  assert.deepEqual(Object.keys(kit.LOOKS).sort(), [...LIBRARY_LOOKS].sort(), 'one preview per library look');
+  for (const name of LIBRARY_LOOKS) {
+    const pack = JSON.parse(fs.readFileSync(path.join(ROOT, 'modules', 'ui-design', 'styles', name, 'pack.json'), 'utf8')).theme.ui.colors;
+    assert.equal(JSON.stringify(kit.LOOKS[name].colors), JSON.stringify(pack), `${name}: the client copy equals pack.json, key for key`);
+  }
+  const share = (k) => Number(/var\(--accent\) (\d+)%/.exec(NIGHT_TINT[k])[1]);
+  assert.equal(kit.NIGHT.bgShare, share('--bg'));
+  assert.equal(kit.NIGHT.cardShare, share('--bg-card'));
+  assert.match(NIGHT_TINT['--bg'], /#000000\)$/);
+  assert.match(NIGHT_TINT['--bg-card'], /#101012\)$/);
+  assert.equal(kit.NIGHT.bg, '#000000');
+  assert.equal(kit.NIGHT.card, '#101012');
+});
+
+test('the step sits between App and Review: look 10, review 11, done 12, draft v7, a beat on the rail', () => {
+  assert.match(HUB, /9: 'panel-app', 10: 'panel-look', 11: 'panel-review', 12: 'panel-done' \};/);
+  assert.match(HUB, /var DRAFT_KEY = 'cb-create-draft-v7';/);
+  assert.match(HUB, /<li data-step="10"><span class="snum">8<\/span><span class="slbl">Look<\/span><\/li>\n\s*<li data-step="11"><span class="snum">9<\/span><span class="slbl">Create<\/span><\/li>/);
+  const panel = (HUB.match(/<section class="panel" id="panel-look"[\s\S]*?<\/section>/) || [''])[0];
+  assert.match(panel, /<h1 id="look-h">Give it a look<\/h1>/);
+  assert.match(panel, /<form data-next="11">/);
+  assert.match(panel, /data-back="9"/);
+  assert.match(panel, /<div class="lookPick" id="wizLook"><\/div>/);
+  assert.ok(HUB.indexOf('id="panel-app"') < HUB.indexOf('id="panel-look"') && HUB.indexOf('id="panel-look"') < HUB.indexOf('id="panel-review"'), 'in document order too');
+  assert.match(HUB, /if \(step === 10\) renderLook\(\);\n\s*if \(step === 11\) renderReview\(\);/);
+  assert.match(fs.readFileSync(path.join(LANDING, 'assets', 'cosmos.css'), 'utf8'), /#view-new \.steps\{display:grid;grid-template-columns:repeat\(9,1fr\);/, 'a track per numbered step');
+});
+
+test('every kit walk past the App step passes the Look step, and the kit has a state on it', () => {
+  const states = JSON.parse(fs.readFileSync(path.join(LANDING, 'projects.states.json'), 'utf8')).states;
+  const probes = JSON.parse(fs.readFileSync(path.join(LANDING, 'projects.probes.json'), 'utf8')).probes;
+  const walks = [...Object.entries(states).map(([k, v]) => [k, v.actions]), ...probes.map((p) => [p.name, p.steps])];
+  let past = 0;
+  for (const [name, steps] of walks) {
+    const at = (steps || []).findIndex((a) => a[1] === '#panel-app button[type=submit]');
+    if (at < 0 || /^in-new-look/.test(name)) continue;   // the Look states stop ON the step
+    past++;
+    const look = steps.findIndex((a) => a[1] === '#panel-look button[type=submit]');
+    assert.ok(look > at, `${name}: submits the Look step after the App step`);
+  }
+  assert.ok(past >= 5, `sanity: the walks that reach the review were found (${past})`);
+  assert.deepEqual(states['in-new-look'].expect.visible.slice(0, 2), ['#panel-look', '#wizLook']);
+  assert.ok(states['in-new-look-custom'].actions.some((a) => a[1] === '#wizLook-custom'), 'a state pictures "make your own"');
+});
+
+test('executed: the picker offers the four looks and your own, and the accent shows only for your own', () => {
+  const { kit, dom } = bootKit();
+  const host = dom.node('div');
+  const model = { look: 'chrome-world', nightTint: true, accent: '#b48cf2', logo: null };
+  let changes = 0;
+  kit.buildLookPicker(host, model, () => { changes++; }, 'wiz', () => 'Kestrel');
+  const radios = ['chrome-world', 'expedition', 'grove', 'blueprint', 'custom'].map((k) => dom.byId(host, 'wizLook-' + k));
+  assert.ok(radios.every(Boolean), 'five radios, one per choice');
+  assert.equal(radios[0].checked, true, 'the current look is ticked');
+  const accentWrap = dom.byId(host, 'wizAccent').parentNode.parentNode;
+  assert.equal(accentWrap.hidden, true, 'no accent for a library look');
+  radios[4].checked = true; radios[4].fire('change');
+  assert.equal(model.look, 'custom');
+  assert.equal(accentWrap.hidden, false, 'the accent appears for your own');
+  assert.equal(changes, 1, 'onChange ran');
+  const name = dom.find(host, (x) => x.className === 'mhName');
+  assert.equal(name.textContent, 'Kestrel', 'the preview names the project');
+});
+
+test('executed: an unreadable accent is shown ADJUSTED in the preview, with a sentence saying so', () => {
+  const { kit, dom } = bootKit();
+  const host = dom.node('div');
+  const model = { look: 'custom', nightTint: true, accent: '#112233', logo: null };
+  kit.buildLookPicker(host, model, null, 'wiz');
+  const kept = lookAdjustAccent('#112233').hex;
+  const note = dom.byId(host, 'wizAccentNote');
+  assert.match(note.textContent, new RegExp(`Adjusted to ${kept} so text stays readable in both modes`));
+  const light = dom.find(host, (x) => x.className === 'mh light');
+  assert.equal(light.style.props['--mh-accent'], kept, 'the preview paints the colour the server will keep');
+  model.accent = '#b48cf2';
+  const picker = kit.buildLookPicker(host, model, null, 'wiz');
+  picker.repaint();
+  assert.equal(dom.byId(host, 'wizAccentNote').textContent, ' ', 'a readable colour needs no sentence');
+});
+
+test('executed: the dark preview is the look\'s tinted night, or pure black with the tint off', () => {
+  const { kit, dom } = bootKit();
+  const host = dom.node('div');
+  const model = { look: 'grove', nightTint: true, accent: '#b48cf2', logo: null };
+  kit.buildLookPicker(host, model, null, 'wiz');
+  const dark = () => dom.find(host, (x) => x.className === 'mh dark');
+  const accent = kit.LOOKS.grove.colors.accent;
+  const mix = (hex, p, base) => '#' + [16, 8, 0].map((sh) => Math.round(((parseInt(hex.slice(1), 16) >> sh) & 255) * p / 100 + ((parseInt(base.slice(1), 16) >> sh) & 255) * (100 - p) / 100).toString(16).padStart(2, '0')).join('');
+  assert.equal(dark().style.props['--mh-bg'], mix(accent, 6, '#000000'));
+  assert.equal(dark().style.props['--mh-card'], mix(accent, 5, '#101012'));
+  const tint = dom.byId(host, 'wizTint');
+  tint.checked = false; tint.fire('change');
+  assert.equal(model.nightTint, false);
+  assert.equal(dark().style.props['--mh-bg'], '#000000');
+  assert.equal(dark().style.props['--mh-card'], '#101012');
+  // a project on its own colours (manage page) never shows a tinted night
+  const own = { look: 'own', nightTint: true, accent: '#b48cf2', logo: null };
+  const h2 = dom.node('div');
+  kit.buildLookPicker(h2, own, null, 'mLk');
+  assert.equal(dom.find(h2, (x) => x.className === 'mh dark').style.props['--mh-bg'], '#000000');
+  assert.ok(['chrome-world', 'expedition', 'grove', 'blueprint', 'custom'].every((k) => !dom.byId(h2, 'mLkLook-' + k).checked), 'no look is ticked for a project that never chose');
+});
+
+test('executed: a logo is refused before it is read unless it is a small PNG, JPEG or WebP', () => {
+  let reads = 0;
+  const reader = function FileReader() { this.readAsDataURL = (f) => { reads++; this.result = 'data:' + f.type + ';base64,QUJD'; this.onload(); }; };
+  const { kit, dom } = bootKit({ reader });
+  const host = dom.node('div');
+  const model = { look: 'grove', nightTint: true, accent: '#b48cf2', logo: null };
+  kit.buildLookPicker(host, model, null, 'wiz');
+  const file = dom.byId(host, 'wizLogo');
+  const note = file.parentNode.parentNode.children.find((c) => c.attrs.role === 'status');
+  file.files = [{ type: 'image/svg+xml', size: 100, name: 'k.svg' }]; file.fire('change');
+  assert.match(note.textContent, /PNG, JPEG or WebP/);
+  file.files = [{ type: 'image/png', size: 300 * 1024, name: 'k.png' }]; file.fire('change');
+  assert.match(note.textContent, /at most 256 KB/);
+  assert.equal(reads, 0, 'neither was read');
+  assert.equal(model.logo, null);
+  file.files = [{ type: 'image/png', size: 2000, name: 'k.png' }]; file.fire('change');
+  assert.equal(reads, 1);
+  assert.deepEqual(JSON.parse(JSON.stringify(model.logo)), { type: 'image/png', b64: 'QUJD', name: 'k.png' });
+  const mark = dom.find(host, (x) => x.className === 'mhMark logo');
+  assert.ok(mark && mark.children[0].src.startsWith('data:image/png;base64,'), 'the preview\'s hall mark shows the logo');
+});
+
+test('executed: sendLook sends the look, then the logo — and a removed logo is deleted', async () => {
+  const calls = [];
+  const fetchImpl = (url, opts) => {
+    calls.push({ url, method: opts.method, body: opts.body ? JSON.parse(opts.body) : null });
+    return Promise.resolve({ ok: true, json: () => Promise.resolve({ ok: true, look: { look: 'custom' }, push: { message: 'Saved.' }, adjusted: null }) });
+  };
+  const { kit } = bootKit({ fetchImpl });
+  await kit.sendLook(42, { look: 'custom', nightTint: false, accent: '#b48cf2', logo: { type: 'image/webp', b64: 'QUJD', name: 'k.webp' } });
+  assert.deepEqual(JSON.parse(JSON.stringify(calls)), [
+    { url: '/api/bongos/provisioning/instances/42/look', method: 'PATCH', body: { look: 'custom', night_tint: 'off', accent: '#b48cf2' } },
+    { url: '/api/bongos/provisioning/instances/42/logo', method: 'PUT', body: { image_b64: 'QUJD', content_type: 'image/webp' } },
+  ]);
+  calls.length = 0;
+  await kit.sendLook(42, { look: 'grove', nightTint: true, accent: '#b48cf2', logo: null, logoDropped: true });
+  assert.deepEqual(calls.map((c) => [c.method, c.url.split('/').pop(), c.body]), [['PATCH', 'look', { look: 'grove', night_tint: 'on' }], ['DELETE', 'logo', null]]);
+});
+
+test('Create sends the look right after the project is filed, and the review names it', () => {
+  assert.match(HUB, /sendRenderSetup\(data\.instance && data\.instance\.id\);[^\n]*\n\s*sendLookSetup\(data\.instance && data\.instance\.id\);/);
+  assert.match(HUB, /lookKit\.sendLook\(instanceId, state\.look \|\| defaultLook\(\)\)/);
+  assert.match(HUB, /function defaultLook\(\) \{ return \{ look: 'chrome-world', nightTint: true, accent: '#b48cf2', logo: null \}; \}/, 'the default is the platform\'s look with the tint ON (owner D2)');
+  assert.match(HUB, /\['Look', lookRow\(\)\]/);
+  assert.match(HUB, /<p class="hint" id="doneLook" role="status" hidden><\/p>/, 'a refused look is said on the done panel');
+  assert.match(HUB, /look: null, termsAck: false \};/, 'the draft carries the look (and its reset clears it)');
+});
+
+test('the manage page has "Its look", read once per project — never on the minute tick', () => {
+  const sec = (HUB.match(/<div class="card mSec" id="mLook">[\s\S]*?\n {6}<\/div>/) || [''])[0];
+  assert.match(sec, /<h2>Its look<\/h2>/);
+  assert.match(sec, /<div id="mLookPick">/);
+  assert.match(sec, /id="mLookSave">Save the look<\/button>/);
+  assert.match(sec, /Saving restarts your project once/);
+  assert.match(HUB, /renderCardPick\(inst\);\n\s*renderLookCard\(inst\);/);
+  assert.match(HUB, /function renderLookCard\(inst\) \{\n\s*if \(mLookFor === inst\.id\) return;/, 'the tick does not re-read or rebuild it');
+  assert.match(HUB, /lookKit\.buildLookPicker\(host, mLookModel,/, 'the wizard\'s own picker');
+  assert.match(HUB, /lookKit\.sendLook\(manageId, mLookModel\)/, 'and its own send');
+});

package/tests/projects_hub_module_picker.mjs

@@ -415,7 +415,7 @@ test('the review names the set even when the picker was never opened (task 10023
   // and the module NAMES are not known. "None — just the core" would be a false
   // promise on the last screen before Create: the server is about to apply the
   // type's bundle. The row says that instead, then repaints when the read lands.
-  const h = boot({ state: { projType: 'game', step: 10 } });   // 10 = the review since task 1004417 (8 since 1004351)
+  const h = boot({ state: { projType: 'game', step: 11 } });   // 11 = the review since task 1004421 (10 since 1004417, 8 since 1004351)
 
   // Arrange + Act — the review asks for the value before the read can answer
   const first = h.extrasRow();
@@ -821,7 +821,7 @@ test('with nothing switched on the count says only what is shown', async () => {
 });
 
 test('the review names the hidden picks too — a filter never reaches the create request', async () => {
-  const h = boot({ state: { projType: 'game', step: 10 } });   // 10 = the review since task 1004417 (8 since 1004351)
+  const h = boot({ state: { projType: 'game', step: 11 } });   // 11 = the review since task 1004421 (10 since 1004417, 8 since 1004351)
   await h.open();
   h.click('agents');
   assert.deepEqual(h.forCreate(), ['agents', 'npm-release', 'discord']);

package/tests/provision_settings_apply.mjs

@@ -70,7 +70,11 @@ ${NEUTRAL_PREFIX}_VISIBILITY=public
 ${NEUTRAL_PREFIX}_JOIN_GRANT=full
 ${NEUTRAL_PREFIX}_ARTIST_GATE=strict
 ${NEUTRAL_PREFIX}_SPEND_PAYER=none
+${NEUTRAL_PREFIX}_LOOK=own
+${NEUTRAL_PREFIX}_NIGHT_TINT=on
 ${NEUTRAL_PREFIX}_ARTIST_GATE_SINCE=
+${NEUTRAL_PREFIX}_LOOK_ACCENT=
+${NEUTRAL_PREFIX}_LOGO_URL=
 `;
 
 t('replaces an existing KEY= line where it stands; every other line survives byte-for-byte', () => {
@@ -134,6 +138,10 @@ t('settingsEnvVarsFor: the runner pushes the SAME pair webEnvBody writes at stan
     // must already hold it in web.env before its first require
     [`${NEUTRAL_PREFIX}_SPEND_PAYER`]: 'none',
     [`${NEUTRAL_PREFIX}_ARTIST_GATE_SINCE`]: '',
+    // the look a hall wears and its night tint (task 1004421, ADR 0358), with the
+    // custom accent and the logo address as companions, empty when there is none
+    [`${NEUTRAL_PREFIX}_LOOK`]: 'own', [`${NEUTRAL_PREFIX}_NIGHT_TINT`]: 'on',
+    [`${NEUTRAL_PREFIX}_LOOK_ACCENT`]: '', [`${NEUTRAL_PREFIX}_LOGO_URL`]: '',
   });
   const body = P.webEnvBody(inst, {});
   for (const [k, v] of Object.entries(vars)) assert.match(body, new RegExp(`^${k}=${v}$`, 'm'), `${k} at standup`);
@@ -145,7 +153,7 @@ const GATED = { settings: { platform_visibility: 'gated', joinability: 'invite_o
 const manifestWith = (project) => JSON.stringify({ schema: 'instance-manifest/v1', brand: project === undefined ? {} : { project } });
 
 t('true when every pushed key matches brand.project (camelCase, the ENV_OVERRIDES targets)', () => {
-  assert.equal(P.settingsConsumed(manifestWith({ platformVisibility: 'gated', joinability: 'invite_only', visibility: 'public', joinGrant: 'full', artistGate: 'strict', spendPayer: 'none' }), GATED), true);
+  assert.equal(P.settingsConsumed(manifestWith({ platformVisibility: 'gated', joinability: 'invite_only', visibility: 'public', joinGrant: 'full', artistGate: 'strict', spendPayer: 'none', look: 'own', nightTint: 'on' }), GATED), true);
 });
 t('false when the instance still reports a different value', () => {
   assert.equal(P.settingsConsumed(manifestWith({ platformVisibility: 'public', joinability: 'invite_only', visibility: 'public', joinGrant: 'full', artistGate: 'strict', spendPayer: 'none' }), GATED), false);
@@ -166,7 +174,7 @@ t('instanceManifestCmd asks the instance on loopback, like healthzCmd', () => {
 function recorder({ apply = false, envBody = LIVE_ENV, readFails = false, healthzFails = false, privileged = false,
   manifest = 'match', restartThrows = false, writeThrows = false } = {}) {
   const cmds = [], writes = [], events = [], probes = [], cleared = [], logs = [];
-  const manifestOut = manifest === 'match' ? manifestWith({ platformVisibility: 'gated', joinability: 'invite_only', visibility: 'public', joinGrant: 'full', artistGate: 'strict', spendPayer: 'none' })
+  const manifestOut = manifest === 'match' ? manifestWith({ platformVisibility: 'gated', joinability: 'invite_only', visibility: 'public', joinGrant: 'full', artistGate: 'strict', spendPayer: 'none', look: 'own', nightTint: 'on' })
     : manifest === 'mismatch' ? manifestWith({ platformVisibility: 'public', joinability: 'apply', visibility: 'public' })
     : manifest === 'none' ? manifestWith(undefined) : 'nope';
   const exec = (cmd, opts = {}) => {
@@ -234,7 +242,7 @@ await ta('dry-run PLANS the patch: reads nothing real, writes NOTHING (no synthe
   assert.equal(r.ok, true);
   assert.equal(r.healthy, null, 'nothing ran, nothing observed');
   assert.equal(writes.length, 0, 'a dry-run must not plan a two-line overwrite of web.env');
-  assert.ok(logs.some((l) => /would patch .*_PLATFORM_VISIBILITY, .*_JOINABILITY, .*_VISIBILITY, .*_JOIN_GRANT, .*_ARTIST_GATE, .*_SPEND_PAYER, .*_ARTIST_GATE_SINCE in \/etc\/spike\/web\.env in place/.test(l)), logs.join('\n'));
+  assert.ok(logs.some((l) => /would patch .*_PLATFORM_VISIBILITY, .*_JOINABILITY, .*_VISIBILITY, .*_JOIN_GRANT, .*_ARTIST_GATE, .*_SPEND_PAYER, .*_LOOK, .*_NIGHT_TINT, .*_ARTIST_GATE_SINCE, .*_LOOK_ACCENT, .*_LOGO_URL in \/etc\/spike\/web\.env in place/.test(l)), logs.join('\n'));
   assert.ok(cmds.some((c) => /restart spike/.test(c)), 'the restart is still in the plan');
   assert.ok(logs.some((l) => /dry-run — nothing ran/.test(l)), 'the closing line does not claim a restart happened');
 });
@@ -354,7 +362,7 @@ await ta('--apply, the control-plane row: its OWN /etc/<slug>/web.env on the con
   const mk = (bucket) => (cmd) => {
     seen[bucket].push(cmd);
     if (/\bcat /.test(cmd)) return { ok: true, stdout: selfEnv };
-    if (/api\/bongos\/instance/.test(cmd)) return { ok: true, stdout: manifestWith({ platformVisibility: 'public', joinability: 'apply', visibility: 'public', joinGrant: 'full', artistGate: 'off', spendPayer: 'none' }) };
+    if (/api\/bongos\/instance/.test(cmd)) return { ok: true, stdout: manifestWith({ platformVisibility: 'public', joinability: 'apply', visibility: 'public', joinGrant: 'full', artistGate: 'off', spendPayer: 'none', look: 'own', nightTint: 'on' }) };
     return { ok: true, stdout: '{"ok":true}' };
   };
   try {