@bongos/core 1.21.4 → 1.21.6

package/tests/wizard_front_door.mjs

@@ -1,16 +1,19 @@
 // tests/wizard_front_door.mjs — the create wizard's front door (task 1004417, BV2.PS05;
 // goal 1000121, docs/design/project-startup-direction.md "Front door").
 //
-// Two screens now stand in front of the wizard's numbered steps:
-//   1 · terms — "anything you want to make": one tick, recorded on the project against
-//       the terms version the SERVER stamps (tests/provisioning_terms_ack.mjs holds that half);
-//   2 · fork  — "you are now creating a digital planet": the world's door pill, two equal
-//       doors, try the demo / begin planet creation. The demo is its own task (BV2.PS09), so
-//       its door says the demo is not open yet rather than leading anywhere.
+// Since the six blended screens (task 1004504, the design of record
+// docs/design/mocks/combined-onboarding/) the front door is ONE screen:
+//   1 · fork — "You’re about to start a digital planet.": the terms as its one tick, recorded
+//       on the project against the terms version the SERVER stamps
+//       (tests/provisioning_terms_ack.mjs holds that half), and the world's door pill, two
+//       equal doors, try the demo / start my project, both waiting for the tick. The demo is
+//       its own route (BV2.PS09). The separate terms screen is gone.
+// The wizard carries no progress rail: an eyebrow names the screen, one Back walks back, and
+// the night room (#wizRoom) stands behind every screen in place of the planet and bongo pair.
 // Sign-in stays where it was: the gate (step 0) comes first.
 //
 // Most of this RUNS the page's own script, the vm-slice idiom of tests/wizard_draft_resume.mjs:
-// validateStep(), the front door's wiring, and show()'s class toggles are sliced out of the
+// validateStep(), the front door's wiring, and show()'s screen bookkeeping are sliced out of the
 // inline script and executed under a minimal DOM stub. Every slice boundary is asserted, so a
 // rename fails loudly instead of leaving this file quietly testing nothing.
 //
@@ -32,74 +35,73 @@ const SCRIPT = HUB.slice(HUB.lastIndexOf('<script>'), HUB.lastIndexOf('</script>
 const STYLE = HUB.slice(HUB.indexOf('<style>'), HUB.indexOf('</style>'));
 
 const panel = (id) => (HUB.match(new RegExp(`<section class="panel[^"]*" id="${id}"[\\s\\S]*?\\n {10}</section>`)) || [''])[0];
-const TERMS = panel('panel-terms');
 const FORK = panel('panel-fork');
+const VIEW_NEW = (HUB.match(/<section id="view-new" hidden>[\s\S]*?\n<\/section>/) || [''])[0];
 const MAP = {};
 for (const m of ((SCRIPT.match(/var panels = \{([^}]*)\}/) || [, ''])[1]).matchAll(/(\d+):\s*'([a-z-]+)'/g)) MAP[m[2]] = Number(m[1]);
 
 // ── the order ───────────────────────────────────────────────────────────────────
-test('the front door stands between sign-in and the name step: gate 0, terms 1, fork 2, name 3', () => {
+test('the front door stands between sign-in and the first question: gate 0, fork 1, what 2', () => {
   assert.equal(MAP['panel-gate'], 0, 'sign-in stays where it is today, first');
-  assert.equal(MAP['panel-terms'], 1);
-  assert.equal(MAP['panel-fork'], 2);
-  // task 1004418: planet physics (questions 1 to 4) sits between the fork and the name step
-  assert.equal(MAP['panel-physics'], 3, 'the fork opens planet creation with the physics questions');
-  assert.equal(MAP['panel-name'], 4, 'and today\'s wizard continues unchanged after them');
-  assert.ok(HUB.indexOf('id="panel-gate"') < HUB.indexOf('id="panel-terms"')
-    && HUB.indexOf('id="panel-terms"') < HUB.indexOf('id="panel-fork"')
-    && HUB.indexOf('id="panel-fork"') < HUB.indexOf('id="panel-physics"')
-    && HUB.indexOf('id="panel-physics"') < HUB.indexOf('id="panel-name"'), 'the markup reads in the same order');
-  assert.match(TERMS, /<form data-next="2">/, 'the terms go on to the fork');
-  assert.match(FORK, /<form data-next="3">/, 'the fork\'s primary door goes on to planet physics');
-  assert.match(FORK, /data-back="1"/, 'and the way back is the terms');
+  assert.equal(MAP['panel-fork'], 1, 'the fork, with the terms as its tick, is the first screen after sign-in');
+  assert.equal(MAP['panel-what'], 2, 'the real-project door goes on to "What are you making?"');
+  assert.equal(MAP['panel-checks'], 3, 'then the quick checks (task 1004504)');
+  assert.equal(MAP['panel-terms'], undefined, 'the separate terms screen is gone — the tick lives on the fork');
+  assert.doesNotMatch(HUB, /id="panel-terms"/, 'and no markup is left for it');
+  assert.ok(HUB.indexOf('id="panel-gate"') < HUB.indexOf('id="panel-fork"')
+    && HUB.indexOf('id="panel-fork"') < HUB.indexOf('id="panel-what"')
+    && HUB.indexOf('id="panel-what"') < HUB.indexOf('id="panel-checks"'), 'the markup reads in the same order');
+  assert.match(FORK, /<form data-next="2">/, 'the fork\'s primary door goes on to the first question');
+  assert.ok(VIEW_NEW, 'the ?view=new section is findable');
+  assert.doesNotMatch(VIEW_NEW, /data-back=/, 'no per-panel Back buttons — one #wizBack walks the screens');
+  assert.equal((VIEW_NEW.match(/id="wizBack"/g) || []).length, 1, 'one Back, in the wizard\'s top row');
 });
 
-test('the rail is the numbered steps\' — it steps aside on both front-door screens, statically too', () => {
+test('the numbered rail is gone (task 1004504) — no steps list, no painter, no rule hiding it', () => {
   const beats = [...HUB.matchAll(/<li[^>]*data-step="(\d+)"/g)].map((m) => Number(m[1]));
-  assert.deepEqual(beats, [3, 4, 5, 6, 7, 8, 9, 10, 11, 12], 'the rail numbers physics…create, never the front door');
-  assert.match(HUB, /<div class="card wizFront">/, 'a no-script visitor on the static first screen sees no rail');
-  assert.match(STYLE, /#view-new \.card\.wizFront \.steps\{display:none;\}/);
+  assert.deepEqual(beats, [], 'no rail beat is left anywhere on the page');
+  assert.doesNotMatch(HUB, /class="steps"/, 'no <ol class="steps"> in the wizard');
+  assert.doesNotMatch(SCRIPT, /paintRail\(/, 'no rail painter, and no call to one');
+  assert.doesNotMatch(STYLE, /\.wizFront \.steps|#view-new \.steps/, 'no rule left styling or hiding a rail');
 });
 
-// ── screen 1 · the terms ────────────────────────────────────────────────────────
-test('screen 1 is the canvas\'s "anything you want to make": two ledes, one tick, a read-the-terms link, one door', () => {
-  assert.ok(TERMS, '#panel-terms ships as real markup (C7)');
-  assert.match(TERMS, /^<section class="panel on" id="panel-terms"/, 'it carries the static `on` — step 1 for a no-script visitor');
-  assert.match(TERMS, /<h1 id="terms-h">Anything you want to make<\/h1>/);
-  assert.equal((TERMS.match(/<p class="lede">/g) || []).length, 2, 'two lede paragraphs');
-  assert.match(TERMS, /<input type="checkbox" id="termsAck" aria-describedby="h-terms">/, 'one checkbox, named by its hint');
-  assert.match(TERMS, /<label class="termsAck">\s*<input[^>]*>\s*<span>I can sign legally, or can get a signature, for the use of this platform, and I acknowledge the terms and conditions\.<\/span>/,
-    'the whole row is its label, so the target is the sentence, not a 20px box');
-  assert.match(TERMS, /<a class="termsRead" href="\/terms" target="_blank" rel="noopener">Read the terms<\/a>/,
-    'the platform\'s own /terms, in a new tab so the draft is not left behind');
-  assert.equal((TERMS.match(/type="submit"/g) || []).length, 1, 'one primary door');
-  assert.match(TERMS, /<span data-brand-product-inline>Cloud Bongos<\/span>/, 'the product name is the pack\'s, re-branded on a child');
+// ── screen 1 · the fork, with the terms as its one tick ─────────────────────────
+test('screen 1 is the fork: one short lede, one tick that links the terms, one submit door', () => {
+  assert.ok(FORK, '#panel-fork ships as real markup (C7)');
+  assert.match(FORK, /^<section class="panel on" id="panel-fork"/, 'it carries the static `on` — step 1 for a no-script visitor');
+  assert.match(FORK, /<h1 id="fork-h">You’re about to start a digital planet\.<\/h1>/);
+  assert.equal((FORK.match(/<div id="forkIntro">[\s\S]*?<\/form>/)?.[0].match(/<p class="lede">/g) || []).length, 1, 'one short lede paragraph');
+  assert.match(FORK, /<input type="checkbox" id="termsAck" aria-describedby="h-terms">/, 'one checkbox, named by its hint');
+  assert.match(FORK, /<label class="termsAck">\s*<input[^>]*>\s*<span>I can sign for this project, and I accept the <a class="termsRead" href="\/terms" target="_blank" rel="noopener">terms<\/a>\.<\/span>/,
+    'the whole row is its label, so the target is the sentence, not a 20px box — and the terms are the platform\'s own /terms, in a new tab so the draft is not left behind');
+  assert.equal((FORK.match(/type="submit"/g) || []).length, 1, 'one primary door');
+  assert.doesNotMatch(FORK, /\bBongos\b/, 'no product name baked where a child instance would ship it');
 });
 
 test('the page never names a terms version — the server stamps which text was acknowledged', () => {
   // A version baked here would be a second copy of TERMS_VERSION that drifts, and worse, a
   // value a caller could send. The create request carries only the tick.
   assert.doesNotMatch(HUB, /terms_version|termsVersion|terms_ack_version/, 'no version travels from the page');
-  assert.doesNotMatch(TERMS, /\b20\d\d-\d\d-\d\d\b/, 'and none is printed on the screen');
+  assert.doesNotMatch(FORK, /\b20\d\d-\d\d-\d\d\b/, 'and none is printed on the screen');
 });
 
-test('the resume offer moved with step 1 — it lives on the terms screen, once', () => {
+test('the resume offer lives on step 1 — the fork, once', () => {
   assert.equal((HUB.match(/id="wizResume"/g) || []).length, 1);
-  assert.ok(TERMS.includes('id="wizResume"'), 'a deliberate "New project" lands here, so the offer does too');
+  assert.ok(FORK.includes('id="wizResume"'), 'a deliberate "New project" lands here, so the offer does too');
 });
 
 // ── the validator, executed ────────────────────────────────────────────────────
 const VALIDATE_RE = /function validateStep\(step\) \{[\s\S]*?\n {4}\}/;
 const validateSlice = (SCRIPT.match(VALIDATE_RE) || [null])[0];
 
-function runValidate(step, termsAck) {
+function runValidate(step, termsAck, extra = {}) {
   const els = {};
   const $ = (id) => (els[id] = els[id] || { textContent: '', className: '', classList: { add() {} }, focus() {} });
-  const sandbox = { $, state: { termsAck, name: 'Mercury', projType: 'game' }, validateRender: () => true, repoAccess: true };
+  const sandbox = { $, state: { termsAck, name: 'Mercury', projType: 'game', demo: null, confirmed: {}, ...extra }, validateRender: () => true, repoAccess: true };
   sandbox.globalThis = sandbox;
   vm.createContext(sandbox);
   vm.runInContext(`${validateSlice}\nvar ok = validateStep(${step});`, sandbox);
-  return { ok: sandbox.ok, hint: els['h-terms'] };
+  return { ok: sandbox.ok, hint: els['h-terms'], state: sandbox.state };
 }
 
 test('validateStep is still findable, with the terms clause inside it', () => {
@@ -107,35 +109,44 @@ test('validateStep is still findable, with the terms clause inside it', () => {
   assert.match(validateSlice, /if \(step === 1\) \{\s*if \(!state\.termsAck\)/, 'the clause is part of the slice');
 });
 
-test('Proceed is refused until the box is ticked, and the refusal says why in the hint', () => {
+test('Start my project is refused until the box is ticked, and the refusal says why in the hint', () => {
   const refused = runValidate(1, false);
-  assert.equal(refused.ok, false, 'no tick, no fork');
+  assert.equal(refused.ok, false, 'no tick, no way past the fork');
   assert.equal(refused.hint.className, 'hint err');
   assert.match(refused.hint.textContent, /Tick the box to go on/);
   const given = runValidate(1, true);
   assert.equal(given.ok, true, 'a tick goes on');
 });
 
-test('the fork refuses nothing — its doors are the answer, and Begin clears a demo started earlier', () => {
-  assert.equal(runValidate(2, false).ok, true, 'the fork asks nothing a validator could refuse');
-  // task 1004420: "Begin planet creation" is a real project, so a demo the founder
+test('Start my project clears a demo started earlier — the submit door is a real project', () => {
+  // task 1004420: "Start my project" is a real project, so a demo the founder
   // set up and then walked back from must not ride the create
-  assert.match(validateSlice, /if \(step === 2\) \{ state\.demo = null; return true; \}/);
+  const r = runValidate(1, true, { demo: { people: 3, hours_each: 4 }, confirmed: { team: true } });
+  assert.equal(r.ok, true);
+  assert.equal(r.state.demo, null, 'the walked-back demo does not ride the create');
+  assert.deepEqual(JSON.parse(JSON.stringify(r.state.confirmed)), {}, 'and its rows are asked again');
+  assert.equal(runValidate(1, false, { demo: { people: 3 } }).state.demo !== null, true, 'an unticked box changes nothing');
+});
+
+test('"What are you making?" asks a name and a kind (task 1004504)', () => {
+  assert.equal(runValidate(2, true).ok, true, 'a name and a kind go on');
+  assert.equal(runValidate(2, true, { name: '  ' }).ok, false, 'no name, no way on');
+  assert.equal(runValidate(2, true, { projType: null }).ok, false, 'no kind, no way on — Not sure is a fine answer');
 });
 
 // ── the wiring, executed ───────────────────────────────────────────────────────
-const WIRE_START = "    $('termsAck').checked = !!state.termsAck;";
+const WIRE_START = '    function paintDoors() {';
 const WIRE_END = '    /* ── the demo route (task 1004420, BV2.PS09) ──';
-const wireSlice = SCRIPT.includes(WIRE_START) ? SCRIPT.slice(SCRIPT.indexOf(WIRE_START), SCRIPT.indexOf(WIRE_END)) : null;
+const wireSlice = SCRIPT.includes(WIRE_START) && SCRIPT.includes(WIRE_END) ? SCRIPT.slice(SCRIPT.indexOf(WIRE_START), SCRIPT.indexOf(WIRE_END)) : null;
 
 function runWiring(initialAck) {
   const handlers = {};
   const mk = (id) => ({
-    id, checked: false, hidden: false, textContent: '', className: '', attrs: {},
+    id, checked: false, hidden: false, disabled: true, textContent: '', className: '', attrs: {},
     addEventListener(type, fn) { handlers[id + ':' + type] = fn; },
     setAttribute(k, v) { this.attrs[k] = v; },
   });
-  const els = { termsAck: mk('termsAck'), 'h-terms': mk('h-terms') };
+  const els = { termsAck: mk('termsAck'), 'h-terms': mk('h-terms'), wizDemo: mk('wizDemo'), wizStart: mk('wizStart') };
   let saves = 0;
   const sandbox = { $: (id) => els[id], state: { termsAck: initialAck }, saveDraft: () => { saves += 1; } };
   sandbox.globalThis = sandbox;
@@ -147,6 +158,25 @@ function runWiring(initialAck) {
 test('the front door\'s wiring is still findable', () => {
   assert.ok(wireSlice && wireSlice.length > 100, 'the wiring block was not found in projects.html');
   assert.match(wireSlice, /\$\('termsAck'\)\.addEventListener\('change'/, 'the tick is part of the slice');
+  assert.match(wireSlice, /\$\('wizStart'\)\.disabled = !state\.termsAck;/, 'and so is the door painter');
+});
+
+test('both doors wait for the tick: disabled in the markup, and painted from the answer', () => {
+  assert.match(FORK, /<button type="button" class="btn big ghost" id="wizDemo"[^>]*\bdisabled>/, 'the demo door ships disabled');
+  assert.match(FORK, /<button type="submit" class="btn big" id="wizStart" disabled>/, 'and so does Start my project');
+  const fresh = runWiring(false);
+  assert.equal(fresh.els.wizDemo.disabled, true, 'an unticked draft keeps the demo door shut');
+  assert.equal(fresh.els.wizStart.disabled, true, 'and the real-project door');
+  fresh.els.termsAck.checked = true; fresh.handlers['termsAck:change'].call(fresh.els.termsAck);
+  assert.equal(fresh.els.wizDemo.disabled, false, 'ticking opens both doors');
+  assert.equal(fresh.els.wizStart.disabled, false);
+  fresh.els.termsAck.checked = false; fresh.handlers['termsAck:change'].call(fresh.els.termsAck);
+  assert.ok(fresh.els.wizDemo.disabled && fresh.els.wizStart.disabled, 'unticking shuts them again');
+  const resumed = runWiring(true);
+  assert.ok(!resumed.els.wizDemo.disabled && !resumed.els.wizStart.disabled, 'a draft that ticked comes back with its doors open');
+  assert.match(STYLE, /#view-new \.doorPill \.btn\[disabled\]\{opacity:\.35;cursor:default;\}/, 'a shut door reads as shut');
+  assert.match(SCRIPT, /\$\('wizDemo'\)\.addEventListener\('click', function \(\) \{ if \(state\.termsAck\) demoShow\('setup'\); \}\);/,
+    'and the demo door refuses an unticked box even if the attribute is stripped');
 });
 
 test('the tick mirrors into the draft both ways, and a resumed draft paints its own answer', () => {
@@ -167,14 +197,14 @@ test('the demo door names what it opens: the demo route\'s setup screen (task 10
   assert.doesNotMatch(FORK, /demoSoon|isn’t open yet/, 'the placeholder that said the demo was not open is gone');
 });
 
-// ── screen 2 · the fork ─────────────────────────────────────────────────────────
-test('screen 2 is the door pill: two equal doors in one object, the accent only on the one that goes on', () => {
-  assert.match(FORK, /<h1 id="fork-h">You are now creating a digital planet<\/h1>/);
+// ── the fork's door pill ────────────────────────────────────────────────────────
+test('the fork is the door pill: two equal doors in one object, the accent only on the one that goes on', () => {
+  assert.match(FORK, /<h1 id="fork-h">You’re about to start a digital planet\.<\/h1>/);
   const pill = (FORK.match(/<div class="doorPill" role="group" aria-label="How to begin">[\s\S]*?<\/div>/) || [''])[0];
   assert.ok(pill, 'one grouped pill');
   const doors = [...pill.matchAll(/<button type="(button|submit)" class="([^"]+)"[^>]*>([^<]+)<\/button>/g)];
   assert.equal(doors.length, 2, 'exactly two doors');
-  assert.deepEqual(doors.map((d) => d[3]), ['Try the demo', 'Begin planet creation']);
+  assert.deepEqual(doors.map((d) => d[3]), ['Try the demo', 'Start my project']);
   assert.equal(doors[0][2], 'btn big ghost', 'the demo door is the secondary: transparent at rest');
   assert.equal(doors[1][2], 'btn big', 'begin carries the accent');
   assert.equal(doors[1][1], 'submit', 'and is the form\'s one submit, so Enter goes on');
@@ -183,58 +213,94 @@ test('screen 2 is the door pill: two equal doors in one object, the accent only
   assert.match(STYLE, /@media \(max-width:520px\)\{\s*\.doorPill\{display:grid;grid-template-columns:1fr;/, 'at a phone width the two stack, still one object');
 });
 
-test('the seed stands on the world\'s own field plate — nothing drawn but hairlines', () => {
-  assert.match(FORK, /<div class="forkStage" id="forkStage" aria-hidden="true">/, 'decorative, so hidden from a screen reader');
-  assert.match(FORK, /<img class="forkSeed" src="\/assets\/world\/r2-chrome-blob-one-cut\.webp" alt="">/, 'a real plate, root-absolute so it is stamped');
+test('the night room stands behind every screen — the planet stage and the bongo pair are gone (task 1004504)', () => {
+  assert.match(VIEW_NEW, /<div class="wizRoom" id="wizRoom" data-screen="fork" aria-hidden="true">/, 'decorative, so hidden from a screen reader, and baked at the fork for a no-script visitor');
+  assert.match(VIEW_NEW, /<span class="rmSeed"><img src="\/assets\/world\/r2-chrome-blob-one-cut\.webp" alt=""><\/span>/, 'the seed is a real plate, root-absolute so it is stamped');
   assert.ok(fs.existsSync(path.join(LANDING, 'assets', 'world', 'r2-chrome-blob-one-cut.webp')), 'and it exists on disk');
-  assert.match(STYLE, /\.forkStage\{[^}]*background:var\(--sky-bg\) var\(--field-plate\) center\/cover no-repeat;/, 'the field is the plate token, not a new image');
-  assert.match(STYLE, /\.forkOrbit\{[^}]*border:1px solid var\(--rule\);border-radius:50%;/, 'the orbits are hairline circles');
-  const at = STYLE.indexOf('the front door (task 1004417');
-  const block = STYLE.slice(at, STYLE.indexOf('/* a field:', at));
-  assert.ok(at > -1 && block.includes('.forkStage{'), 'the front door\'s CSS block is findable');
-  assert.doesNotMatch(block, /#[0-9a-f]{3,8}\b|box-shadow:(?!none)|linear-gradient/i, 'every colour a token, no shadow, no gradient');
+  assert.doesNotMatch(HUB, /id="forkStage"|class="forkSeed"|class="forkRoutes"|bongoCell|id="physStage"/, 'no fork stage, seed orbit, route list, bongo pair or forming planet left in the markup');
+  assert.doesNotMatch(STYLE, /\.forkStage\{|\.forkOrbit\{|\.bongoCell|\.physStage/, 'and no rule left for them');
+  const at = STYLE.indexOf('#view-new .wizRoom{');
+  const end = STYLE.indexOf('/* under 900 the window', at);
+  assert.ok(at > -1 && end > at, 'the night room\'s CSS block is findable');
+  const block = STYLE.slice(at, end);
+  const hexes = [...block.matchAll(/#[0-9a-f]{3,8}\b/gi)].map((m) => m[0].toLowerCase());
+  assert.ok(hexes.length > 0 && hexes.every((h) => h === '#000' || h === '#fff'), `every colour a mix of the fifteen with black or white (${[...new Set(hexes)]})`);
+  for (const m of block.matchAll(/--rm-[a-z0-9-]+:([^;]+);/g)) {
+    assert.match(m[1], /^color-mix\(in srgb,var\(--(sea|accent)\)|^rgba\(255,255,255,/, `a room token is derived, never a new literal: ${m[0]}`);
+  }
+  const motion = block.indexOf('@media (prefers-reduced-motion:no-preference){');
+  assert.ok(motion > -1, 'the room\'s motion sits inside the kill switch');
+  assert.doesNotMatch(block.slice(0, motion), /animation:|transition:/, 'and none outside it: the rest frame is the whole composition');
+  assert.doesNotMatch(block, /:root/, 'room tokens live on the room, never a page :root');
 });
 
 test('the two routes are described honestly for today: the demo is open (task 1004420), creation promises no questions that do not exist yet', () => {
-  const routes = (FORK.match(/<div class="forkRoutes">[\s\S]*$/) || [''])[0];
-  assert.match(routes, /Route 1 · demo<\/p>/);
-  assert.doesNotMatch(routes, /coming soon/, 'the demo is built, so the route no longer says it is coming');
-  assert.match(routes, /Route 2 · planet creation/);
-  assert.doesNotMatch(routes, /seven questions/i, 'the seven planet questions are PS07\'s — the copy must not promise them before they ship');
-  assert.doesNotMatch(FORK, /\bBongos\b(?! pair)/, 'no product name baked where a child instance would ship it');
+  const intro = (FORK.match(/<div id="forkIntro">[\s\S]*?<\/form>/) || [''])[0];
+  assert.match(intro, /<p class="lede">Try a small demo first, or start your real project\.<\/p>/);
+  assert.doesNotMatch(FORK, /coming soon/, 'the demo is built, so nothing says it is coming');
+  assert.doesNotMatch(FORK, /seven questions/i, 'the copy promises no question count');
+  assert.doesNotMatch(FORK, /\bBongos\b/, 'no product name baked where a child instance would ship it');
 });
 
-// ── show(): the class toggles, executed ────────────────────────────────────────
+// ── show(): the room, the eyebrow and the one Back, executed ───────────────────
+// The slice runs from the SCREEN map through show(), so eyebrowFor() and prevStep() ride
+// along; both ends are asserted.
+const SHOW_START = '    var SCREEN = {';
 const SHOW_RE = /function show\(step, moveFocus\) \{[\s\S]*?\n {4}\}/;
-const showSlice = (SCRIPT.match(SHOW_RE) || [null])[0];
+const showMatch = SCRIPT.match(SHOW_RE);
+const showSlice = showMatch && SCRIPT.includes(SHOW_START) && SCRIPT.indexOf(SHOW_START) < showMatch.index
+  ? SCRIPT.slice(SCRIPT.indexOf(SHOW_START), showMatch.index + showMatch[0].length) : null;
 
-function runShow(step) {
+function runShow(step, { demo = null, demoOpen = false } = {}) {
   const cls = (name) => { const set = new Set(); return { name, set, toggle(c, on) { if (on) set.add(c); else set.delete(c); } }; };
-  const card = cls('card'), split = cls('split');
-  const panels = {};
-  const $ = (id) => (panels[id] = panels[id] || { classList: cls(id), querySelector: () => null });
+  const els = {};
+  const $ = (id) => (els[id] = els[id] || {
+    id, classList: cls(id), hidden: id === 'demoSetup' ? !demoOpen : false, textContent: '', attrs: {},
+    setAttribute(k, v) { this.attrs[k] = v; }, querySelector: () => null,
+  });
   const sandbox = {
-    $, state: {}, panels: Object.fromEntries(Object.entries(MAP).map(([id, n]) => [n, id])),
-    root: { querySelector: (sel) => (sel === '.card' ? { classList: card } : { classList: split }) },
-    paintRail() {}, saveDraft() {}, authKnown: false, repoAccess: null,
+    $, state: { demo }, panels: Object.fromEntries(Object.entries(MAP).map(([id, n]) => [n, id])),
+    saveDraft() {}, authKnown: false, repoAccess: null,
+    paintDoors() {}, physLoadAccountOnce() {}, paintChecks() {}, physDefaults() {},
     renderModules() {}, syncHome() {}, ensureRepoAccess() {}, checkSlugAvailable() {}, renderAddrPanel() {},
-    syncAppStep() {}, syncRenderSetup() {}, renderReview() {}, renderLook() {}, paintPhysics() {},
+    syncAppStep() {}, syncRenderSetup() {}, paintSetup() {}, renderLook() {}, renderRecap() {},
   };
   sandbox.globalThis = sandbox;
   vm.createContext(sandbox);
   vm.runInContext(`${showSlice}\nshow(${step}, false);`, sandbox);
-  return { card: card.set, split: split.set, on: Object.keys(panels).filter((id) => panels[id].classList.set.has('on')) };
+  return {
+    on: Object.keys(els).filter((id) => els[id].classList.set.has('on')),
+    screen: els.wizRoom.attrs['data-screen'], eyebrow: els.wizEyebrow.textContent,
+    back: !els.wizBack.hidden, tag: !els.demoTag.hidden,
+  };
 }
 
-test('show() takes the rail away on the two front-door screens only, and gives the fork the whole card', () => {
-  assert.ok(showSlice, 'show() was not found in projects.html');
-  const terms = runShow(1), fork = runShow(2), physics = runShow(3), name = runShow(4), done = runShow(MAP['panel-done']);
-  assert.deepEqual(terms.on, ['panel-terms']);
-  assert.ok(terms.card.has('wizFront') && !terms.split.has('wizFork'), 'terms: no rail, the bongo pair stays');
-  assert.ok(fork.card.has('wizFront') && fork.split.has('wizFork'), 'fork: no rail, and the seed takes the pair\'s place');
-  assert.ok(!physics.card.has('wizFront') && physics.split.has('wizFork'), 'physics (task 1004418): the rail is back, and the forming planet keeps the whole card');
-  assert.ok(!name.card.has('wizFront') && !name.split.has('wizFork'), 'the name step has its rail back');
-  assert.ok(done.split.has('wizDone') && !done.card.has('wizFront'), 'the done panel is untouched by the front door');
+test('show() turns one screen on, tells the room which screen it is, and names it in the eyebrow', () => {
+  assert.ok(showSlice, 'the SCREEN map through show() was not found in projects.html');
+  assert.match(showSlice, /function eyebrowFor\(step\)/, 'the eyebrow is part of the slice');
+  assert.doesNotMatch(showSlice, /paintRail|wizFront|wizFork|wizDone/, 'show() paints no rail and toggles no front-door or done layout (task 1004504)');
+  const screens = { 0: 'signin', 1: 'fork', 2: 'what', 3: 'checks', 4: 'review', 5: 'look', 6: 'done' };
+  for (const [n, screen] of Object.entries(screens)) {
+    const r = runShow(Number(n));
+    const id = Object.keys(MAP).find((k) => MAP[k] === Number(n));
+    assert.deepEqual(r.on, [id], `step ${n}: only ${id} is on`);
+    assert.equal(r.screen, screen, `step ${n}: the room grows to "${screen}"`);
+  }
+  assert.equal(runShow(1).eyebrow, 'New project');
+  assert.equal(runShow(1, { demoOpen: true }).eyebrow, 'Demo', 'the demo\'s own screen says so');
+  assert.equal(runShow(2, { demo: { people: 3 } }).eyebrow, 'New demo', 'and a demo past the fork stays marked');
+  assert.equal(runShow(6).eyebrow, 'Founding');
+});
+
+test('one Back: hidden at sign-in, on the fork and on done; shown on every screen between', () => {
+  assert.equal(runShow(0).back, false, 'sign-in has nowhere to go back to');
+  assert.equal(runShow(1).back, false, 'the fork is the first screen');
+  assert.equal(runShow(1, { demoOpen: true }).back, true, 'the demo screen walks back to the fork');
+  for (const n of [2, 3, 4, 5]) assert.equal(runShow(n).back, true, `step ${n} walks back`);
+  assert.equal(runShow(6).back, false, 'a created project is not walked back into the wizard');
+  assert.equal(runShow(2).tag, false, 'no demo tag on a real project');
+  assert.equal(runShow(2, { demo: { people: 3 } }).tag, true, 'the demo tag rides every screen of a demo');
+  assert.match(SCRIPT, /function prevStep\(step\) \{\s*if \(step === 4 && state\.demo\) return 2;/, 'a demo, which skipped the checks, walks back past them too');
 });
 
 // ── the create ──────────────────────────────────────────────────────────────────
@@ -243,29 +309,33 @@ test('the create carries the tick, and is never filed without it', () => {
   assert.match(create, /terms_acknowledged: state\.termsAck \? true : undefined,/,
     'a real boolean when ticked, absent otherwise — the route refuses anything but a boolean');
   const guard = create.indexOf('if (!state.termsAck) { show(1, true); validateStep(1); return; }');
-  assert.ok(guard > -1, 'an unticked draft is sent back to the terms');
+  assert.ok(guard > -1, 'an unticked draft is sent back to the fork\'s tick');
   assert.ok(guard < create.indexOf('ensureFreshRepo()'), 'BEFORE anything is created — the repo included');
 });
 
 test('the tick is part of the draft and of the reset, and the draft key moved with the renumbering', () => {
-  assert.match(SCRIPT, /var state = \{ step: 0,[^}]*termsAck: false \};/, 'the initial state declares it');
-  assert.match(SCRIPT, /state = \{ step: 1,[^}]*termsAck: false \};/, 'and "start another project" clears it — each project records its own');
-  assert.match(SCRIPT, /var DRAFT_KEY = 'cb-create-draft-v8';/, 'a draft saved under the old numbering is ignored, not replayed onto the wrong screen');
+  assert.match(SCRIPT, /var state = \{ step: 0,[^}]*termsAck: false, confirmed: \{\} \};/, 'the initial state declares it');
+  assert.match(SCRIPT, /state = \{ step: 1,[^}]*termsAck: false, confirmed: \{\} \};/, 'and "start another project" clears it — each project records its own');
+  assert.match(SCRIPT, /\$\('termsAck'\)\.checked = false; paintDoors\(\);/, 'and the reset shuts the doors with it');
+  assert.match(SCRIPT, /var DRAFT_KEY = 'cb-create-draft-v9';/, 'a draft saved under the old numbering is ignored, not replayed onto the wrong screen');
 });
 
 // ── the look-before-you-ship kit walks it ─────────────────────────────────────
-test('the kit has a state for each front-door screen, and every walk past it ticks and chooses first', () => {
+// Every walk past the fork opens the way a founder does: the tick, then a door — Start my
+// project, or the demo door and the demo screen's Continue.
+test('every kit walk past the fork ticks first, then takes a door', () => {
   const states = JSON.parse(fs.readFileSync(path.join(LANDING, 'projects.states.json'), 'utf8')).states;
-  for (const s of ['in-new', 'in-new-terms-refused', 'in-new-fork', 'in-new-fork-demo', 'in-new-name']) assert.ok(states[s], `the ${s} state exists`);
-  assert.deepEqual(states['in-new'].expect.visible, ['#panel-terms', '#termsAck'], 'arriving at ?view=new pictures the terms');
-  const FRONT = ['#termsAck', '#panel-terms button[type=submit]', '#panel-fork button[type=submit]'];
+  assert.ok(states['in-new'], 'the in-new state exists');
+  for (const sel of ['#panel-fork', '#termsAck']) assert.ok((states['in-new'].expect.visible || []).includes(sel), `arriving at ?view=new pictures the fork and its tick (${sel})`);
+  const REAL = ['#termsAck', '#wizStart'];
+  const DEMO = ['#termsAck', '#wizDemo', '#demoStart'];
   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])]
     .filter(([, steps]) => steps.some((st) => st[1] === '#newName'));
   assert.ok(walks.length >= 12, `every wizard walk is found (${walks.length})`);
   for (const [name, steps] of walks) {
     const clicks = steps.filter((st) => st[0] === 'click').map((st) => st[1]);
-    assert.deepEqual(clicks.slice(0, 3), FRONT, `${name}: the front door comes first`);
+    const door = clicks[1] === '#wizDemo' ? DEMO : REAL;
+    assert.deepEqual(clicks.slice(0, door.length), door, `${name}: the tick, then a door, come first`);
   }
-  assert.ok(probes.some((p) => /the front door \(task 1004417\)/.test(p.name)), 'a probe drives the refusal, the demo door and the way on');
 });

package/tests/wizard_intent_resume.mjs

@@ -15,12 +15,13 @@
 // ruled out the task's other option (drop the record at a terminal state).
 //
 // The reset fires only when there is a SECOND DRAFT to lose, and the draft's own step is
-// what says so. A landed create clears DRAFT_KEY — but show(12) then persists the done
+// what says so. A landed create clears DRAFT_KEY — but show(6) then persists the done
 // panel's position straight back into it, so a plain "is there a draft?" test is always
 // yes and would skip the reset forever, leaving the finished project's name sitting in
 // the fresh form. (That is exactly what the first cut of this change shipped into a
 // render: "still watching Mercury" above a name field still reading "Mercury".) Only
-// steps 1-11 are wizard steps (1-10 before task 1004421's Look step, 1-8 before task 1004417's front door took 1 and 2);
+// steps 1-5 are wizard steps since task 1004504's six blended screens (1-11 before them, 1-10
+// before task 1004421's Look step, 1-8 before task 1004417's front door took 1 and 2);
 // anything else is the done panel's own bookkeeping.
 //
 // Harness: there is no jsdom in this repo, so this follows tests/wizard_draft_resume.mjs
@@ -58,8 +59,8 @@ test('both slices are still findable (a rename must fail loudly, not silently pa
   assert.ok(offerSlice, 'paintResumeOffer() was not found in projects.html');
   assert.match(enterSlice, /if \(focus && !resumeIntent\) \{/, 'the intent branch is part of the slice');
   assert.match(enterSlice, /startProgress\(created\.id\);/, 'so is the resume branch it guards');
-  assert.match(enterSlice, /draft\.step >= 1 && draft\.step <= 12/,
-    'the STORED draft\'s step decides, not state.step — state.step is 13 for the whole life of a finished standup');
+  assert.match(enterSlice, /draft\.step >= 1 && draft\.step <= 5 \?/,
+    'the STORED draft\'s step decides, not state.step — state.step is 6 for the whole life of a finished standup');
   assert.match(SCRIPT, /if \(created && created\.id\) \{ enterCreated\(created, !!focus\); return; \}/,
     'enter() still hands the created record straight to it');
 });
@@ -73,7 +74,7 @@ function runEnter({ focus, resumeIntent = false, draft = null, record }) {
   const calls = { show: [], resets: 0, offer: [], done: 0, progress: [], polls: 0, focused: 0 };
   // state.step is the DONE step for the whole life of a finished standup — the value
   // a draft-blind reading would have trusted
-  const state = { step: draft ? draft.step : 13, name: 'Mercury', slug: 'mercury', domain: '', mode: 'greenfield', noAddress: false, modules: null };
+  const state = { step: draft ? draft.step : 6, name: 'Mercury', slug: 'mercury', domain: '', mode: 'greenfield', noAddress: false, modules: null };
   const sandbox = {
     record, focus, resumeIntent, state,
     DRAFT_KEY: 'draft',
@@ -99,7 +100,7 @@ const REC = { id: 'inst-1', name: 'Acme', slug: 'acme', domain: 'acme.example',
 
 test('a reload / Back / identity settle (focus false) still resumes the done panel, watch and all', () => {
   const { calls, state } = runEnter({ focus: false, record: REC });
-  assert.deepEqual(calls.show, [[13, false]], 'the done panel, and no focus steal on a non-deliberate arrival');
+  assert.deepEqual(calls.show, [[6, false]], 'the done panel, and no focus steal on a non-deliberate arrival');
   assert.equal(calls.resets, 0, 'nothing is reset — this is the same standup continuing');
   assert.equal(calls.done, 1, 'the checklist is re-rendered');
   assert.deepEqual(calls.progress, ['inst-1'], 'the progress watch is restarted from the record');
@@ -114,7 +115,7 @@ test('a deliberate "New project" click after a finished standup opens a FRESH st
   assert.equal(calls.progress.length, 0, 'and its watch is not restarted');
   assert.equal(calls.resets, 1, 'with no second draft to lose, the wizard forgets the finished project');
   assert.deepEqual(calls.show, [[1, false]], 'step 1, and step 1 does not take the heading focus');
-  assert.equal(calls.focused, 1, 'its one control, the terms tick, does — the deliberate-nav rule enter() already applies');
+  assert.equal(calls.focused, 1, 'its first control, the fork\'s terms tick, does — the deliberate-nav rule enter() already applies');
   assert.equal(state.name, '', 'the old name is gone from the form');
 });
 
@@ -127,7 +128,7 @@ test('…and the standup stays one click away, named, on the resume link', () =>
 
 test('the resume link gets the done panel back — the record was never cleared', () => {
   const { calls, sandbox } = runEnter({ focus: true, resumeIntent: true, record: REC });
-  assert.deepEqual(calls.show, [[13, true]], 'a deliberate resume moves focus to the done panel');
+  assert.deepEqual(calls.show, [[6, true]], 'a deliberate resume moves focus to the done panel');
   assert.deepEqual(calls.progress, ['inst-1'], 'the watch comes back with it');
   assert.equal(sandbox.resumeIntent, false, 'the flag is ONE-SHOT — the next plain nav click must mean "new" again');
   assert.deepEqual(calls.offer, [null], 'and the offer comes down behind it');
@@ -137,29 +138,30 @@ test('a second draft already under way is NOT wiped by navigating back to the wi
   // The regression this guards: with the reset unconditional, typing a name, stepping
   // away to "Your projects" and clicking "New project" again would blank the draft —
   // trading the reported bug for a worse one.
-  const { calls, state } = runEnter({ focus: true, record: REC, draft: { step: 5 } });
+  const { calls, state } = runEnter({ focus: true, record: REC, draft: { step: 3 } });
   assert.equal(calls.resets, 0, 'a live draft is never reset');
-  assert.deepEqual(calls.show, [[5, true]], 'the second draft resumes where it was left, heading focused');
-  assert.equal(state.step, 5);
+  assert.deepEqual(calls.show, [[3, true]], 'the second draft resumes where it was left, heading focused');
+  assert.equal(state.step, 3);
   assert.deepEqual(calls.offer, ['Acme'], 'the offer stays up beside it');
 });
 
 test('the done panel\'s own saved step is NOT a second draft — it must not block the reset', () => {
-  // Caught in a render, not in a unit test: show(12) calls saveDraft(), so DRAFT_KEY is
+  // Caught in a render, not in a unit test: show(6) calls saveDraft(), so DRAFT_KEY is
   // non-empty again the moment a create lands. Reading "is there a draft?" left the
   // finished project's name in the fresh form, under a line offering to resume it.
-  const { calls, state } = runEnter({ focus: true, record: REC, draft: { step: 13, name: 'Mercury' } });
+  const { calls, state } = runEnter({ focus: true, record: REC, draft: { step: 6, name: 'Mercury' } });
   assert.equal(calls.resets, 1, 'the done step is bookkeeping, not a project being typed');
   assert.deepEqual(calls.show, [[1, false]], 'out-of-range steps land on step 1, the front door');
   assert.equal(state.name, '', 'and the finished project\'s name does not survive into it');
   assert.equal(calls.done, 0, 'never back onto the done panel');
 });
 
-test('a draft on the app step, the Look step or the review is live too — the last three numbered steps (task 1004351)', () => {
-  // The app step moved the review from 7 to 8, the front door (task 1004417) to 10 and the
-  // Look step (task 1004421) to 11. A guard left behind would reset a second project
-  // sitting on its review, silently wiping it.
-  for (const step of [10, 11, 12]) {
+test('a draft on the checks, the review or the look is live too — the last three screens (tasks 1004351, 1004504)', () => {
+  // Every renumbering has moved the review: 7 to 8 for the app step, 10 for the front door
+  // (task 1004417), 11 for the Look step (task 1004421), 4 for the six blended screens
+  // (task 1004504). A guard left behind would reset a second project sitting on its
+  // review, silently wiping it.
+  for (const step of [3, 4, 5]) {
     const { calls, state } = runEnter({ focus: true, record: REC, draft: { step } });
     assert.equal(calls.resets, 0, `step ${step} is a live draft`);
     assert.deepEqual(calls.show, [[step, true]]);
@@ -167,7 +169,7 @@ test('a draft on the app step, the Look step or the review is live too — the l
   }
 });
 
-test('a draft on the front door is live too — a founder part-way through it keeps their place (task 1004417)', () => {
+test('a draft on the fork or the first question is live too — a founder part-way through keeps their place (tasks 1004417, 1004504)', () => {
   for (const step of [1, 2]) {
     const { calls, state } = runEnter({ focus: true, record: REC, draft: { step } });
     assert.equal(calls.resets, 0, `step ${step} is a live draft`);
@@ -175,8 +177,8 @@ test('a draft on the front door is live too — a founder part-way through it ke
   }
 });
 
-test('a draft whose step is missing or junk resets too — only 1-12 preserves anything', () => {
-  for (const draft of [{ step: 0 }, { step: 13 }, { name: 'half-typed' }]) {
+test('a draft whose step is missing or junk resets too — only 1-5 preserves anything', () => {
+  for (const draft of [{ step: 0 }, { step: 6 }, { name: 'half-typed' }]) {
     const { calls } = runEnter({ focus: true, record: REC, draft });
     assert.equal(calls.resets, 1, `step ${JSON.stringify(draft.step)} is not a wizard step`);
     assert.deepEqual(calls.show, [[1, false]]);
@@ -201,13 +203,14 @@ test('paintResumeOffer names the project by textContent and hides on null (no li
 });
 
 test('the offer ships as real markup inside step 1, hidden until there is something to resume', () => {
-  // step 1 is the front door's terms screen since task 1004417 — the offer moved with it
-  const panel = HUB.slice(HUB.indexOf('id="panel-terms"'), HUB.indexOf('id="panel-fork"'));
+  // step 1 is the fork since task 1004504 (the terms are its tick) — the offer lives there
+  const panel = HUB.slice(HUB.indexOf('id="panel-fork"'), HUB.indexOf('id="panel-what"'));
+  assert.ok(HUB.indexOf('id="panel-fork"') > -1 && HUB.indexOf('id="panel-what"') > HUB.indexOf('id="panel-fork"'), 'step 1 is findable');
   assert.match(panel, /<p class="resumeOffer" id="wizResume" hidden>still watching <strong id="wizResumeName">your project<\/strong> — <a href="#" id="wizResumeGo">resume it<\/a><\/p>/,
     'baked into the panel (C7), carrying its own hidden state');
   assert.ok(panel.indexOf('id="wizResume"') < panel.indexOf('<form data-next="2">'),
-    'it sits above the terms form, where a visitor reads it before anything else');
-  assert.doesNotMatch(HUB.slice(HUB.indexOf('id="panel-name"'), HUB.indexOf('id="panel-type"')), /id="wizResume"/,
+    'it sits above the fork\'s form, where a visitor reads it before anything else');
+  assert.equal((HUB.match(/id="wizResume"/g) || []).length, 1,
     'and only once — a second copy would be a duplicate id');
   assert.match(SCRIPT, /\$\('wizResumeGo'\)\.addEventListener\('click', function \(ev\) \{\n\s*ev\.preventDefault\(\);\n\s*resumeIntent = true;\n\s*enter\(true\);/,
     'the link raises the one-shot intent and re-enters, rather than href-navigating');