@bongos/core 1.20.58 → 1.20.60

package/modules/public-landing/public/projects.html

@@ -357,6 +357,45 @@ summary{min-height:24px;padding:3px 0;}
 .appOpt span span{display:block;font-size:14px;font-weight:400;color:var(--ink-soft);line-height:1.5;max-width:62ch;}
 .appOpt.soon{cursor:default;}
 .appOpt.soon b{color:var(--ink-soft);}
+/* a look (task 1004421, ADR 0358): the picker beside two mini halls. The halls are
+   painted from the chosen look's own values through --mh-* properties lookKit sets
+   on each one; nothing here names a colour, and the page's own tokens are the
+   fallback before a choice is painted. */
+.lookGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:28px;align-items:start;}
+@media (max-width:760px){.lookGrid{grid-template-columns:minmax(0,1fr);}}
+.lookSw{flex:none;display:inline-flex;gap:3px;margin-top:3px;}
+.lookSw i{display:block;width:14px;height:14px;border-radius:50%;border:1px solid var(--rule);}
+.lookSw.custom i{background:conic-gradient(var(--sea),var(--accent),var(--terracotta),var(--sea));}
+.lookAccent{margin:14px 0 0;}
+.lookAccent input[type=color]{display:block;width:56px;height:36px;padding:2px;border:1px solid var(--rule);border-radius:8px;background:var(--bg-card);cursor:pointer;}
+.addrOpt.lookTint{color:var(--ink-soft);}
+.lookTint b{font-weight:500;color:var(--ink);}
+.lookLogo{margin:18px 0 0;}
+.lookLogo input[type=file]{display:block;max-width:100%;min-height:32px;padding:4px 0;font:inherit;font-size:14px;color:var(--ink-soft);}
+.lookLogo input[type=file]::file-selector-button{min-height:32px;margin-right:12px;padding:0 16px;font:inherit;font-size:14px;color:var(--ink);background:none;border:1px solid var(--rule);border-radius:999px;cursor:pointer;}
+.lookLogoRow{display:flex;align-items:center;gap:12px;margin:10px 0 0;}
+.lookLogoImg{width:44px;height:44px;border-radius:10px;object-fit:contain;background:var(--bg-deep);}
+.lookLogoName{flex:1;min-width:0;font-size:14px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.lookPrev{display:grid;gap:14px;}
+.lookPrevHead{margin:0;font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint);}
+.lookFig{margin:0;display:grid;gap:6px;}
+.lookFig figcaption{font-size:12.5px;color:var(--ink-faint);}
+.mh{border-radius:12px;overflow:hidden;border:1px solid var(--rule);background:var(--mh-bg,var(--bg));color:var(--mh-ink,var(--ink));font-size:12px;}
+.mh .mhBar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--mh-rule,var(--rule));}
+.mh .mhMark{display:inline-flex;width:14px;height:14px;border-radius:50%;border:1px solid var(--mh-ink,var(--ink));}
+.mh .mhMark.logo{border:0;border-radius:4px;width:18px;height:18px;}
+.mh .mhMark img{width:100%;height:100%;object-fit:contain;}
+.mh .mhName{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.mh .mhBody{display:grid;grid-template-columns:40px minmax(0,1fr);}
+.mh .mhRail{display:grid;align-content:start;gap:9px;padding:12px 10px;border-right:1px solid var(--mh-rule,var(--rule));}
+.mh .mhRail i{display:block;height:6px;border-radius:3px;background:var(--mh-rule,var(--rule));}
+.mh .mhRail i.on{background:var(--mh-accent,var(--accent));}
+.mh .mhMain{display:grid;gap:8px;padding:12px;}
+.mh .mhH{font-size:17px;font-weight:300;letter-spacing:-.02em;}
+.mh .mhCard{display:grid;gap:7px;padding:10px 12px;border-radius:9px;background:var(--mh-card,var(--bg-card));}
+.mh .mhLn{display:block;height:6px;border-radius:3px;background:var(--mh-rule,var(--rule));}
+.mh .mhLn.s{width:60%;}
+.mh .mhBtn{justify-self:start;padding:4px 11px;border-radius:999px;background:var(--mh-accent,var(--accent));color:var(--mh-on,var(--accent-on));font-weight:600;}
 /* the Render setup (task 1004352): shown only while Render is the choice. Every
    list in it is a native radio group, and nothing in it is pre-picked for the owner. */
 /* the app's setup status (task 1004353): the same block in the wizard's done panel and
@@ -1086,6 +1125,24 @@ summary{min-height:24px;padding:3px 0;}
         </details>
       </div>
 
+      <!-- its look (task 1004421, ADR 0358; spec D8): the same picker the create wizard's
+           Look step uses — colours for light and dark, the night tint, a logo. Unlike the
+           planet and the card above, this one IS pushed to the project: the hall wears it,
+           so a save restarts the project once, and the receipt says so. Fetched once per
+           project, never on the once-a-minute tick, so a choice in progress stands. -->
+      <div class="card mSec" id="mLook">
+        <h2>Its look</h2>
+        <div id="mLookBody">
+          <div id="mLookPick"><p class="finePrint">Reading the project…</p></div>
+          <div class="actions" id="mLookActions" hidden><button type="button" class="btn small" id="mLookSave">Save the look</button></div>
+          <div class="projMsg" id="mLookMsg" role="status" aria-live="polite"></div>
+        </div>
+        <details class="finePrint" id="mLookWhat">
+          <summary>What the choice changes</summary>
+          <p>How your project’s own hall looks: its colours in light and dark mode, whether its dark mode takes a tint of your colour or stays pure black, and the logo at the top of the hall and in the browser tab. Saving restarts your project once to put it on. Until you choose, the hall keeps the colours it has today.</p>
+        </details>
+      </div>
+
       <!-- live since task 1003042: the teardown control, for a project in ANY
            state that still holds something. The server used to refuse a
            'requested' or an 'error' project outright — and force-teardown reused
@@ -1143,7 +1200,8 @@ summary{min-height:24px;padding:3px 0;}
         <li data-step="7"><span class="snum">5</span><span class="slbl">Home</span></li>
         <li data-step="8"><span class="snum">6</span><span class="slbl">Address</span></li>
         <li data-step="9"><span class="snum">7</span><span class="slbl">App</span></li>
-        <li data-step="10"><span class="snum">8</span><span class="slbl">Create</span></li>
+        <li data-step="10"><span class="snum">8</span><span class="slbl">Look</span></li>
+        <li data-step="11"><span class="snum">9</span><span class="slbl">Create</span></li>
       </ol>
 
       <div class="createSplit">
@@ -1568,14 +1626,30 @@ summary{min-height:24px;padding:3px 0;}
             </form>
           </section>
 
-          <!-- step 8 · review + create -->
+          <!-- step 8 · a look (task 1004421, ADR 0358): colours for light and dark, the
+               night tint and a logo, so builders in several projects always know which hall
+               they are in. lookKit.buildLookPicker fills it — the same picker the manage
+               page's "Its look" uses — and the choice is sent right after Create (sendLook). -->
+          <section class="panel" id="panel-look" aria-labelledby="look-h">
+            <h1 id="look-h">Give it a look</h1>
+            <p class="lede">Colours for light and dark mode, and a logo, so builders who work in several projects always know which hall they’re in.</p>
+            <form data-next="11">
+              <div class="lookPick" id="wizLook"></div>
+              <div class="nav">
+                <button type="button" class="btn ghost" data-back="9">← Back</button>
+                <button type="submit" class="btn">Next →</button>
+              </div>
+            </form>
+          </section>
+
+          <!-- step 9 · review + create -->
           <section class="panel" id="panel-review" aria-labelledby="rev-h">
             <h1 id="rev-h">Ready to roll</h1>
             <p class="lede">One tap files the request and the platform starts standing your project up — server, database, address. Here's the beat you're about to drop:</p>
             <ul class="review" id="reviewList"></ul>
             <div class="alert" id="createAlert" role="alert"></div>
             <div class="nav">
-              <button type="button" class="btn ghost" data-back="9">← Back</button>
+              <button type="button" class="btn ghost" data-back="10">← Back</button>
               <button type="button" class="btn big" id="doCreate">Create my project</button>
             </div>
             <p class="finePrint">This files the request; the control plane does the real standup and nothing touches servers from this page. You'll get the few steps only you can do right after.</p>
@@ -1589,6 +1663,7 @@ summary{min-height:24px;padding:3px 0;}
             </div>
             <p class="lede" id="doneLede"></p>
             <p class="hint" id="doneRender" role="status" hidden></p>
+            <p class="hint" id="doneLook" role="status" hidden></p>
             <div id="doneApp" hidden></div>
             <!-- the STABLE live region: the strip inside is rebuilt every 5s tick,
                  and a live region that is itself replaced never announces -->
@@ -3899,6 +3974,312 @@ summary{min-height:24px;padding:3px 0;}
     } else { stopSky(); hideHover(); }
   }
 
+  /* ══ A LOOK (task 1004421, BV2.PS06; ADR 0358) — colours for light and dark, the
+     night tint, a logo. One picker, two homes: the create wizard's Look step and
+     the manage page's "Its look" (spec D8). It only ever describes a choice; the
+     platform stores it (PATCH …/look, PUT/DELETE …/logo) and the hall restarts once
+     to wear it.
+     LOOKS is the style library's thirteen per look (modules/ui-design/styles/
+     <name>/pack.json), copied for the previews — tests/projects_hub_look.mjs pins every
+     value to its pack. NIGHT holds src/night-tint.js's shares, pinned the same way.
+     lookAdjustAccent is modules/provisioning/look.js's own text, pinned character for
+     character by tests/provisioning_look.mjs: the preview shows exactly the colour
+     the server will keep. ══ */
+  var lookKit = (function () {
+    var LOOKS = {
+      'chrome-world': { title: 'The chrome world', summary: 'Salmon on pale grey. The platform’s own look.',
+        colors: { bg: '#edecee', bgCard: '#fbfafc', bgDeep: '#e2e1e4', bgFrame: '#f6f5f7', ink: '#17181a', inkSoft: '#55565a', inkFaint: '#65656a', rule: '#c6c6c8', ruleSoft: '#dcdbdd', accent: '#fb9569', accentDeep: '#a3481a', sea: '#5b6fd0', terracotta: '#c9512c' } },
+      expedition: { title: 'The expedition', summary: 'Lamp yellow on warm paper, like a field journal.',
+        colors: { bg: '#f4f3ef', bgCard: '#ffffff', bgDeep: '#e9e7e0', bgFrame: '#eceae3', ink: '#141412', inkSoft: '#55544f', inkFaint: '#66645b', rule: '#d9d7cf', ruleSoft: '#e8e6df', accent: '#ffd214', accentDeep: '#7f6209', sea: '#427d97', terracotta: '#b4592f' } },
+      grove: { title: 'The grove', summary: 'Tan and sea green on pale sage.',
+        colors: { bg: '#e1eadb', bgCard: '#f6f9f3', bgDeep: '#cad8c2', bgFrame: '#eaf0e5', ink: '#0f3226', inkSoft: '#2f5240', inkFaint: '#3f5a48', rule: '#9db69a', ruleSoft: '#d0ddcb', accent: '#e3c39c', accentDeep: '#6d4b34', sea: '#3d8562', terracotta: '#b07a4e' } },
+      blueprint: { title: 'The blueprint', summary: 'Cyanotype blue on cool grey-blue paper.',
+        colors: { bg: '#e6ebf0', bgCard: '#f7fafc', bgDeep: '#d3dae2', bgFrame: '#edf1f5', ink: '#10161d', inkSoft: '#464f5a', inkFaint: '#566069', rule: '#aeb9c4', ruleSoft: '#cfd7de', accent: '#4f9fd6', accentDeep: '#17527e', sea: '#3f7f6a', terracotta: '#b04a2c' } }
+    };
+    var ORDER = ['chrome-world', 'expedition', 'grove', 'blueprint', 'custom'];
+    /* the dark tier the hall's sheet paints, and the tint's shares of the accent */
+    var NIGHT = { bg: '#000000', card: '#101012', bgShare: 6, cardShare: 5 };
+    var LOGO_TYPES = ['image/png', 'image/jpeg', 'image/webp'];
+    var LOGO_MAX = 256 * 1024;
+
+    function lookAdjustAccent(hex) {
+      var m = /^#?([0-9a-f]{6})$/i.exec(String(hex || '').trim());
+      if (!m) return null;
+      var n = parseInt(m[1], 16);
+      var rgb = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+      function mix(a, p, b) { return [0, 1, 2].map(function (i) { return a[i] * p + b[i] * (1 - p); }); }
+      function lum(c) {
+        var v = c.map(function (x) { x /= 255; return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4); });
+        return 0.2126 * v[0] + 0.7152 * v[1] + 0.0722 * v[2];
+      }
+      function ratio(a, b) { var x = lum(a), y = lum(b); return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05); }
+      function reads(c) {
+        var ink = mix(c, 0.45, [36, 14, 0]);
+        var darks = [[0, 0, 0], [16, 16, 18], mix(c, 0.06, [0, 0, 0]), mix(c, 0.05, [16, 16, 18])];
+        var info = mix([91, 111, 208], 0.8, [255, 255, 255]);
+        return ratio([42, 19, 5], c) >= 4.6 && ratio(ink, [237, 236, 238]) >= 4.6 && ratio(ink, [251, 250, 252]) >= 4.6 &&
+          darks.every(function (d) { return ratio(c, d) >= 4.6; }) && ratio(info, mix(info, 0.14, darks[3])) >= 4.5;
+      }
+      function toHex(c) { return '#' + c.map(function (x) { var s = Math.round(x).toString(16); return s.length < 2 ? '0' + s : s; }).join(''); }
+      var r = rgb[0] / 255, g = rgb[1] / 255, b = rgb[2] / 255;
+      var max = Math.max(r, g, b), min = Math.min(r, g, b), l = (max + min) / 2, h = 0, s = 0, d = max - min;
+      if (d) {
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+        h /= 6;
+      }
+      function hsl(L) {
+        function f(p, q, t) { t = (t + 1) % 1; return t < 1 / 6 ? p + (q - p) * 6 * t : t < 1 / 2 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p; }
+        if (!s) return [L * 255, L * 255, L * 255];
+        var q = L < 0.5 ? L * (1 + s) : L + s - L * s, p = 2 * L - q;
+        return [f(p, q, h + 1 / 3) * 255, f(p, q, h) * 255, f(p, q, h - 1 / 3) * 255];
+      }
+      if (reads(rgb)) return { hex: toHex(rgb), adjusted: false };
+      for (var step = 1; step <= 200; step++) {
+        var tries = [l + step / 200, l - step / 200];
+        for (var t = 0; t < 2; t++) {
+          if (tries[t] < 0 || tries[t] > 1) continue;
+          var c = hsl(tries[t]).map(Math.round);
+          if (reads(c)) return { hex: toHex(c), adjusted: true };
+        }
+      }
+      return null;
+    }
+
+    /* srgb mix of two #rrggbb, p% of the first — what color-mix(in srgb) paints */
+    function mixHex(a, p, b) {
+      var x = parseInt(a.slice(1), 16), y = parseInt(b.slice(1), 16), out = '#';
+      [16, 8, 0].forEach(function (sh) {
+        var v = Math.round(((x >> sh) & 255) * p / 100 + ((y >> sh) & 255) * (100 - p) / 100).toString(16);
+        out += v.length < 2 ? '0' + v : v;
+      });
+      return out;
+    }
+    /* the thirteen a choice paints: a library look's own, or the chrome world with the
+       custom accent (already nudged) — what src/hall-look.js resolves on the hall */
+    function colorsFor(choice) {
+      var base = LOOKS[choice.look] || LOOKS['chrome-world'];
+      var out = {};
+      Object.keys(base.colors).forEach(function (k) { out[k] = base.colors[k]; });
+      if (choice.look === 'custom') {
+        var a = lookAdjustAccent(choice.accent);
+        if (a) out.accent = a.hex;
+      }
+      return out;
+    }
+    function el(tag, cls, text) {
+      var e = document.createElement(tag);
+      if (cls) e.className = cls;
+      if (text != null) e.textContent = text;
+      return e;
+    }
+    /* one mini hall: a rail, a heading, a card and the accent's door */
+    function miniHall(mode, name) {
+      var box = el('div', 'mh ' + mode);
+      box.setAttribute('aria-hidden', 'true');
+      var bar = el('div', 'mhBar');
+      var mark = el('span', 'mhMark');
+      bar.appendChild(mark);
+      bar.appendChild(el('span', 'mhName', name));
+      box.appendChild(bar);
+      var body = el('div', 'mhBody');
+      var rail = el('div', 'mhRail');
+      for (var i = 0; i < 3; i++) rail.appendChild(el('i', i === 0 ? 'on' : ''));
+      body.appendChild(rail);
+      var main = el('div', 'mhMain');
+      main.appendChild(el('span', 'mhH', 'genesis'));
+      var card = el('div', 'mhCard');
+      card.appendChild(el('i', 'mhLn'));
+      card.appendChild(el('i', 'mhLn s'));
+      card.appendChild(el('span', 'mhBtn', 'use this plan'));
+      main.appendChild(card);
+      body.appendChild(main);
+      box.appendChild(body);
+      return { box: box, mark: mark };
+    }
+    function paintHall(h, c, mode, tint, logoUrl) {
+      var dark = mode === 'dark';
+      var p = {
+        '--mh-bg': dark ? (tint ? mixHex(c.accent, NIGHT.bgShare, NIGHT.bg) : NIGHT.bg) : c.bg,
+        '--mh-card': dark ? (tint ? mixHex(c.accent, NIGHT.cardShare, NIGHT.card) : NIGHT.card) : c.bgCard,
+        '--mh-rule': dark ? 'rgba(255, 255, 255, .16)' : c.ruleSoft,
+        '--mh-ink': dark ? '#ffffff' : c.ink,
+        '--mh-soft': dark ? '#c0c0c0' : c.inkSoft,
+        '--mh-accent': c.accent,
+        /* the hall's own --accent-on: the dark ink every accent fill carries */
+        '--mh-on': '#2a1305'
+      };
+      Object.keys(p).forEach(function (k) { h.box.style.setProperty(k, p[k]); });
+      while (h.mark.firstChild) h.mark.removeChild(h.mark.firstChild);
+      if (logoUrl) { var img = el('img'); img.src = logoUrl; img.alt = ''; h.mark.appendChild(img); h.mark.classList.add('logo'); }
+      else h.mark.classList.remove('logo');
+    }
+
+    /* The picker. `model` = { look, nightTint, accent, logo: { type, b64, name } | null,
+       logoUrl } and is edited in place; onChange runs after every edit. `idp` keeps two
+       pickers' ids apart. Returns { repaint } for a model changed from outside. */
+    function buildLookPicker(host, model, onChange, idp, projectName) {
+      while (host.firstChild) host.removeChild(host.firstChild);
+      var grid = el('div', 'lookGrid');
+      var left = el('div', 'lookLeft');
+      var set = el('fieldset', 'appOpts lookOpts');
+      set.appendChild(el('legend', null, 'Pick a look'));
+      var radios = {};
+      ORDER.forEach(function (key) {
+        var lab = el('label', 'appOpt lookOpt');
+        var r = el('input');
+        r.type = 'radio'; r.name = idp + 'Look'; r.value = key; r.id = idp + 'Look-' + key;
+        radios[key] = r;
+        r.addEventListener('change', function () { if (r.checked) { model.look = key; changed(); } });
+        lab.appendChild(r);
+        var sw = el('span', 'lookSw');
+        sw.setAttribute('aria-hidden', 'true');
+        var c = key === 'custom' ? null : LOOKS[key].colors;
+        (c ? [c.bg, c.accent, c.sea] : ['']).forEach(function (v) {
+          var dot = el('i'); if (v) dot.style.background = v; sw.appendChild(dot);
+        });
+        if (key === 'custom') sw.classList.add('custom');
+        lab.appendChild(sw);
+        var txt = el('span');
+        txt.appendChild(el('b', null, key === 'custom' ? 'Make your own' : LOOKS[key].title));
+        txt.appendChild(el('span', null, key === 'custom' ? 'Pick one accent colour. We use it in light and dark mode.' : LOOKS[key].summary));
+        lab.appendChild(txt);
+        set.appendChild(lab);
+      });
+      left.appendChild(set);
+
+      var acc = el('div', 'lookAccent');
+      var accLab = el('label', 'wizField');
+      accLab.appendChild(el('span', null, 'Your accent colour'));
+      var accIn = el('input');
+      accIn.type = 'color'; accIn.id = idp + 'Accent';
+      accIn.addEventListener('input', function () { model.accent = accIn.value; changed(); });
+      accLab.appendChild(accIn);
+      acc.appendChild(accLab);
+      var accNote = el('div', 'hint');
+      accNote.id = idp + 'AccentNote'; accNote.setAttribute('role', 'status');
+      acc.appendChild(accNote);
+      left.appendChild(acc);
+
+      var tintLab = el('label', 'addrOpt lookTint');
+      var tintIn = el('input');
+      tintIn.type = 'checkbox'; tintIn.id = idp + 'Tint';
+      tintIn.addEventListener('change', function () { model.nightTint = !!tintIn.checked; changed(); });
+      tintLab.appendChild(tintIn);
+      var tintTxt = el('span');
+      tintTxt.appendChild(el('b', null, 'Tint dark mode'));
+      tintTxt.appendChild(el('span', null, ' Dark backgrounds take a hint of your colour, so halls look different at night too. Untick for pure black.'));
+      tintLab.appendChild(tintTxt);
+      left.appendChild(tintLab);
+
+      var logo = el('div', 'lookLogo');
+      var logoLab = el('label', 'wizField');
+      logoLab.appendChild(el('span', null, 'Logo (optional) — PNG, JPEG or WebP, up to 256 KB'));
+      var file = el('input');
+      file.type = 'file'; file.accept = LOGO_TYPES.join(','); file.id = idp + 'Logo';
+      logoLab.appendChild(file);
+      logo.appendChild(logoLab);
+      var logoRow = el('div', 'lookLogoRow');
+      var logoImg = el('img', 'lookLogoImg'); logoImg.alt = 'Your logo';
+      var logoName = el('span', 'lookLogoName');
+      var logoDrop = el('button', 'btn ghost small', 'Remove logo');
+      logoDrop.type = 'button'; logoDrop.id = idp + 'LogoDrop';
+      logoRow.appendChild(logoImg); logoRow.appendChild(logoName); logoRow.appendChild(logoDrop);
+      logo.appendChild(logoRow);
+      var logoNote = el('div', 'hint');
+      logoNote.setAttribute('role', 'status');
+      logo.appendChild(logoNote);
+      logo.appendChild(el('p', 'finePrint', 'It shows at the top of your hall and in the browser tab.'));
+      left.appendChild(logo);
+      file.addEventListener('change', function () {
+        var f = file.files && file.files[0];
+        logoNote.className = 'hint'; logoNote.textContent = '';
+        if (!f) return;
+        if (LOGO_TYPES.indexOf(f.type) === -1) { logoNote.className = 'hint err'; logoNote.textContent = 'A logo has to be a PNG, JPEG or WebP image.'; file.value = ''; return; }
+        if (f.size > LOGO_MAX) { logoNote.className = 'hint err'; logoNote.textContent = 'That image is ' + Math.round(f.size / 1024) + ' KB — a logo can be at most 256 KB.'; file.value = ''; return; }
+        var rd = new FileReader();
+        rd.onload = function () {
+          var url = String(rd.result || '');
+          model.logo = { type: f.type, b64: url.slice(url.indexOf(',') + 1), name: f.name };
+          model.logoUrl = '';
+          changed();
+        };
+        rd.readAsDataURL(f);
+      });
+      logoDrop.addEventListener('click', function () { model.logo = null; model.logoUrl = ''; model.logoDropped = true; file.value = ''; changed(); });
+
+      left.appendChild(el('p', 'finePrint', 'Whatever you pick, we keep text readable in both modes.'));
+      grid.appendChild(left);
+
+      var prev = el('div', 'lookPrev');
+      var prevHead = el('p', 'lookPrevHead');
+      prev.appendChild(prevHead);
+      var halls = {};
+      ['light', 'dark'].forEach(function (mode) {
+        var fig = el('figure', 'lookFig');
+        halls[mode] = miniHall(mode, projectName ? projectName() : 'Your project');
+        fig.appendChild(halls[mode].box);
+        fig.appendChild(el('figcaption', null, mode === 'light' ? 'Light mode' : 'Dark mode'));
+        prev.appendChild(fig);
+      });
+      grid.appendChild(prev);
+      host.appendChild(grid);
+
+      function repaint() {
+        Object.keys(radios).forEach(function (k) { radios[k].checked = model.look === k; });
+        var custom = model.look === 'custom';
+        acc.hidden = !custom;
+        var a = lookAdjustAccent(model.accent) || { hex: '#b48cf2', adjusted: false };
+        if (accIn.value !== a.hex && !a.adjusted) accIn.value = a.hex;
+        accNote.className = 'hint';
+        accNote.textContent = custom && a.adjusted ? 'Adjusted to ' + a.hex + ' so text stays readable in both modes — the preview shows it.' : ' ';
+        tintIn.checked = model.nightTint !== false;
+        var src = model.logo ? 'data:' + model.logo.type + ';base64,' + model.logo.b64 : (model.logoUrl || '');
+        logoRow.hidden = !src;
+        if (src) { logoImg.src = src; logoName.textContent = model.logo ? model.logo.name : 'Your current logo'; }
+        var c = colorsFor(model);
+        prevHead.textContent = 'Preview — ' + (custom ? 'your own look' : LOOKS[model.look] ? LOOKS[model.look].title.toLowerCase() : 'its colours today');
+        /* only a chosen look tints the night (ADR 0358 D2): a project on its own colours stays black */
+        var tints = model.nightTint !== false && (custom || !!LOOKS[model.look]);
+        ['light', 'dark'].forEach(function (mode) { paintHall(halls[mode], c, mode, tints, src); });
+        if (projectName) halls.light.box.querySelector('.mhName').textContent = halls.dark.box.querySelector('.mhName').textContent = projectName() || 'Your project';
+      }
+      function changed() { repaint(); if (onChange) onChange(model); }
+      repaint();
+      return { repaint: repaint };
+    }
+
+    /* Send a choice to the platform: the look first, then the logo (PUT or DELETE).
+       Resolves to { message, adjusted } or rejects with the server's own sentence. */
+    function sendLook(instanceId, model) {
+      var base = API + '/provisioning/instances/' + encodeURIComponent(instanceId);
+      function req(method, path, body) {
+        return fetch(base + path, {
+          method: method, credentials: 'same-origin',
+          headers: body ? { 'Content-Type': 'application/json' } : {},
+          body: body ? JSON.stringify(body) : undefined
+        }).then(function (res) {
+          return res.json().catch(function () { return {}; }).then(function (data) {
+            if (!res.ok) throw new Error((data.error && data.error.message) || 'The look could not be saved.');
+            return data;
+          });
+        });
+      }
+      var body = { look: model.look, night_tint: model.nightTint === false ? 'off' : 'on' };
+      if (model.look === 'custom') body.accent = model.accent;
+      return req('PATCH', '/look', body).then(function (first) {
+        var then = model.logo ? req('PUT', '/logo', { image_b64: model.logo.b64, content_type: model.logo.type })
+          : model.logoDropped ? req('DELETE', '/logo') : Promise.resolve(null);
+        return then.then(function (last) {
+          var out = last || first;
+          return { message: out.push && out.push.message, adjusted: first.adjusted, look: out.look };
+        });
+      });
+    }
+
+    return { LOOKS: LOOKS, NIGHT: NIGHT, lookAdjustAccent: lookAdjustAccent, buildLookPicker: buildLookPicker, sendLook: sendLook };
+  })();
+
   /* ══ THE CREATE WIZARD (task 1002763) — absorbed whole from /create, which
      now 302s here. An inner scope so its ~40 helpers stay out of the hub's
      namespace; it shares the hub's $, esc, API and `me`, so there is one
@@ -3916,11 +4297,12 @@ summary{min-height:24px;padding:3px 0;}
        reinterpreted — a stale step 4 meant Address under v1 and Home under v3,
        and replaying it would land on the wrong panel with the rail already
        marking the skipped ones done. Bump this key on EVERY renumbering
-       (-v6: the front door's two screens took steps 1 and 2, task 1004417). */
+       (-v6: the front door's two screens took steps 1 and 2, task 1004417;
+       -v7: the Look step took 10, so review is 11 and done 12, task 1004421). */
     /* `termsAck` is the front door's one tick (task 1004417). It is the founder's
        own answer, so it lives in the draft like every other one and survives the
        GitHub round-trip; the server, not this page, names the terms version. */
-    var DRAFT_KEY = 'cb-create-draft-v6';
+    var DRAFT_KEY = 'cb-create-draft-v7';
     var CREATED_KEY = 'cb-created-instance';
     /* `description` + `teamShape` are the optional About step (task 1002334) —
        both legitimately stay empty, and empty is what the create request omits. */
@@ -3929,7 +4311,7 @@ summary{min-height:24px;padding:3px 0;}
        request omits the field), [] = the owner switched them all off, [...] =
        what they picked. Never seed it with the preselect — that would store an
        answer nobody gave. */
-    var state = { step: 0, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later', termsAck: false };
+    var state = { step: 0, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later', look: null, termsAck: false };
     try { Object.assign(state, JSON.parse(sessionStorage.getItem(DRAFT_KEY) || '{}')); } catch (e) {}
     var authKnown = false;   /* flips true when the boot's /me settles, either way */
 
@@ -3943,7 +4325,7 @@ summary{min-height:24px;padding:3px 0;}
         state.name = handedName.trim().slice(0, 80);
         state.slug = deriveSlug(state.name); state.slugTouched = false;
         state.repo = deriveRepo(state.name); state.repoTouched = false;
-        state.step = state.step >= 1 && state.step <= 10 ? state.step : 1;
+        state.step = state.step >= 1 && state.step <= 11 ? state.step : 1;
         try { sessionStorage.setItem(DRAFT_KEY, JSON.stringify(state)); } catch (e) {}
       }
     } catch (e) {}
@@ -4136,18 +4518,18 @@ summary{min-height:24px;padding:3px 0;}
 
     /* ── step navigation ──
        Since task 1004417 the front door comes first: gate 0 · terms 1 · fork 2 ·
-       name 3 · type 4 · about 5 · modules 6 · home 7 · address 8 · app 9 · review 10 ·
-       done 11. The rail numbers 3-10 as its 1-8 and steps aside on 1 and 2; done
-       marks it all. About and Modules are the two steps Next can pass with nothing
-       filled in. */
-    var panels = { 0: 'panel-gate', 1: 'panel-terms', 2: 'panel-fork', 3: 'panel-name', 4: 'panel-type', 5: 'panel-detail', 6: 'panel-modules', 7: 'panel-home', 8: 'panel-address', 9: 'panel-app', 10: 'panel-review', 11: 'panel-done' };
+       name 3 · type 4 · about 5 · modules 6 · home 7 · address 8 · app 9 · look 10 ·
+       review 11 · done 12 (the Look step joined at 10, task 1004421). The rail numbers
+       3-11 as its 1-9 and steps aside on 1 and 2; done marks it all. About, Modules and
+       Look are the steps Next can pass with nothing changed — Look has a default. */
+    var panels = { 0: 'panel-gate', 1: 'panel-terms', 2: 'panel-fork', 3: 'panel-name', 4: 'panel-type', 5: 'panel-detail', 6: 'panel-modules', 7: 'panel-home', 8: 'panel-address', 9: 'panel-app', 10: 'panel-look', 11: 'panel-review', 12: 'panel-done' };
     /* the rail at the done panel (task 1003244): "done" is the Create step
        still running — the marker stays on 5 until the project actually
        answers, and only then does the whole rail read finished. aria-current
        tells a screen reader the same thing. */
     function paintRail(step) {
-      var landed = step === 11 && !!(live && live.instStatus === 'active');
-      var cur = step === 11 ? 10 : step;
+      var landed = step === 12 && !!(live && live.instStatus === 'active');
+      var cur = step === 12 ? 11 : step;
       root.querySelectorAll('.steps li').forEach(function (li) {
         var n = Number(li.getAttribute('data-step'));
         var now = !landed && n === cur;
@@ -4158,7 +4540,7 @@ summary{min-height:24px;padding:3px 0;}
            the button role, the tab stop and the data-goto the delegated handler
            below reads. The done panel offers none — the project is filed, and
            there is nothing behind it to change. */
-        if (step < 11 && n < cur) {
+        if (step < 12 && n < cur) {
           li.setAttribute('role', 'button');
           li.setAttribute('tabindex', '0');
           li.setAttribute('data-goto', String(n));
@@ -4177,7 +4559,7 @@ summary{min-height:24px;padding:3px 0;}
       paintRail(step);
       saveDraft();
       /* the done step takes the whole card — the bongo pair steps aside */
-      root.querySelector('.createSplit').classList.toggle('wizDone', step === 11);
+      root.querySelector('.createSplit').classList.toggle('wizDone', step === 12);
       /* the front door (task 1004417): no rail on its two screens, and the fork
          takes the whole card for the seed on its plate */
       root.querySelector('.card').classList.toggle('wizFront', step === 1 || step === 2);
@@ -4197,13 +4579,14 @@ summary{min-height:24px;padding:3px 0;}
       if (step === 7) { syncHome(); if (authKnown) ensureRepoAccess(); }
       /* a resumed draft can land PAST the Home step with the probe never run —
          Create would then file a repo it promised to make but never did */
-      else if (step > 7 && step < 11 && authKnown && repoAccess === null) ensureRepoAccess();
+      else if (step > 7 && step < 12 && authKnown && repoAccess === null) ensureRepoAccess();
       /* re-check on every entry, not just on typing: a resumed draft arrives here with
          a handle nobody has asked the server about, and a handle free ten minutes ago
          may not be now (task 1002898 N10) */
       if (step === 8) { checkSlugAvailable(); renderAddrPanel(); }
       if (step === 9) { syncAppStep(); syncRenderSetup(); }
-      if (step === 10) renderReview();
+      if (step === 10) renderLook();
+      if (step === 11) renderReview();
     }
 
     /* One delegated pair on the rail, so paintRail can add and drop data-goto
@@ -4411,7 +4794,7 @@ summary{min-height:24px;padding:3px 0;}
        prevent, one screen before Create. */
     function repaintForBundles() {
       if (state.step === 6) renderModules();
-      else if (state.step === 10) renderReview();
+      else if (state.step === 11) renderReview();
     }
     /* The row for the declared type, or null before the read lands / for a type
        the table has no row for (including no type at all). */
@@ -4975,7 +5358,7 @@ summary{min-height:24px;padding:3px 0;}
             : 'Once the project is up, we create your app on your Render account. Your key is used once, then thrown away.';
           /* then the app's own progress, from the same read the project's page uses (task 1004353) */
           var box = $('doneApp');
-          if (box) watchApp(instanceId, box, function () { return state.step === 11; }, 5000);
+          if (box) watchApp(instanceId, box, function () { return state.step === 12; }, 5000);
         });
       }).catch(function (err) {
         note.className = 'hint err';
@@ -4983,6 +5366,42 @@ summary{min-height:24px;padding:3px 0;}
       });
       body.key = '';
     }
+    /* ── the Look step (task 1004421, ADR 0358) ── the shared picker, built once on
+       first entry and repainted after; the choice lives in the draft (state.look) like
+       every other answer, logo included, so it survives the GitHub round-trip. */
+    var lookPicker = null, lookPickerModel = null;
+    /* the default: the platform's own look with the night tint on (owner D2), no logo */
+    function defaultLook() { return { look: 'chrome-world', nightTint: true, accent: '#b48cf2', logo: null }; }
+    function renderLook() {
+      if (!state.look) { state.look = defaultLook(); saveDraft(); }
+      /* rebuilt when the draft object itself was replaced (a fresh "New project" resets
+         state wholesale), so the picker never edits an orphaned copy */
+      if (!lookPicker || lookPickerModel !== state.look) {
+        lookPickerModel = state.look;
+        lookPicker = lookKit.buildLookPicker($('wizLook'), state.look, function () { saveDraft(); }, 'wiz',
+          function () { return state.name; });
+      } else lookPicker.repaint();
+    }
+    function lookRow() {
+      var l = state.look || defaultLook();
+      var name = l.look === 'custom'
+        ? 'Your own — ' + ((lookKit.lookAdjustAccent(l.accent) || {}).hex || '')
+        : (lookKit.LOOKS[l.look] || lookKit.LOOKS['chrome-world']).title;
+      return esc(name) + ', ' + (l.nightTint === false ? 'pure black at night' : 'a tinted night') +
+        (l.logo ? ', with your logo' : ', no logo');
+    }
+    /* Send the look a moment after Create, like the Render key: the project exists, so a
+       refusal here is the LOOK's, and the done panel says so in plain words. */
+    function sendLookSetup(instanceId) {
+      if (!instanceId) return;
+      var note = $('doneLook');
+      lookKit.sendLook(instanceId, state.look || defaultLook()).then(function () {
+        note.hidden = true;
+      }).catch(function (err) {
+        note.hidden = false; note.className = 'hint err';
+        note.textContent = 'Your project is being created, but its look was not saved: ' + err.message + ' You can choose it again on the project’s page.';
+      });
+    }
     function renderReview() {
       /* every road back to this step gets a live button — the create path
          disables it and only the failure branch used to restore it, which
@@ -5012,7 +5431,8 @@ summary{min-height:24px;padding:3px 0;}
         /* The wizard creates hosting_shape 'cloud-host', which since ADR 0345 means the
            HALL is hosted by us; where the owner's APP runs is its own row (task 1004351). */
         ['Builders\' hall', 'Hosted by us, on the platform’s current release'],
-        ['App', appRow()]
+        ['App', appRow()],
+        ['Look', lookRow()]
       ];
       $('reviewList').innerHTML = rows.map(function (r) {
         return '<li><span class="k">' + r[0] + '</span><span class="v">' + r[1] + '</span></li>';
@@ -5159,8 +5579,9 @@ summary{min-height:24px;padding:3px 0;}
           sessionStorage.removeItem(DRAFT_KEY);
         } catch (e) {}
         renderDone();
-        show(11, true);
+        show(12, true);
         sendRenderSetup(data.instance && data.instance.id);   // the key rides the new project's own setup run (task 1004352)
+        sendLookSetup(data.instance && data.instance.id);   // the look + logo, like the Render key: right after Create (task 1004421)
         startProgress(data.instance && data.instance.id);
       }).catch(function (err) {
         if (String(err && err.message) === 'signing in') return;
@@ -5735,7 +6156,7 @@ summary{min-height:24px;padding:3px 0;}
                5s tick never clobbers an open dropdown or mid-flight button) */
             if (inst && inst.status !== live.instStatus) {
               live.instStatus = inst.status; renderSteps();
-              if (state.step === 11) paintRail(11);   /* the rail finishes only when the project answers */
+              if (state.step === 12) paintRail(12);   /* the rail finishes only when the project answers */
             }
             var terminal = renderProgress(inst);
             if (!terminal) pollTimer = setTimeout(tick, 5000);
@@ -5775,7 +6196,7 @@ summary{min-height:24px;padding:3px 0;}
          is three-valued and null is its "nothing said" sentinel; leaving the key out
          left it UNDEFINED, which is not null — so pickedModules() reached .slice()
          on it and the second project's Modules step threw. */
-      state = { step: 1, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later', termsAck: false };
+      state = { step: 1, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later', look: null, termsAck: false };
       $('newName').value = ''; $('f-owner').value = ''; $('f-repo').value = ''; $('f-slug').value = ''; $('f-domain').value = '';
       $('f-noaddr').checked = false; $('f-desc').value = '';
       /* Re-seed the owner from the signed-in account for the next project. */
@@ -5854,7 +6275,7 @@ summary{min-height:24px;padding:3px 0;}
       if (focus && !resumeIntent) {
         var draft = null;
         try { draft = JSON.parse(sessionStorage.getItem(DRAFT_KEY) || 'null'); } catch (e) {}
-        var at = draft && draft.step >= 1 && draft.step <= 10 ? draft.step : 0;
+        var at = draft && draft.step >= 1 && draft.step <= 11 ? draft.step : 0;
         if (!at) { resetForNewProject(); at = 1; }
         paintResumeOffer(created);
         /* step 1's own focus target is its one control, the terms tick, not the
@@ -5878,7 +6299,7 @@ summary{min-height:24px;padding:3px 0;}
         manifestState = created.manifest_state; manifestPending = true;
       }
       renderDone();
-      show(11, !!focus);
+      show(12, !!focus);
       startProgress(created.id);
       resumePolls();
     }
@@ -5895,7 +6316,7 @@ summary{min-height:24px;padding:3px 0;}
       /* before identity settles, never render past step 1 (the terms, since task
          1004417): deeper steps carry authenticated side effects (the Home-step repo
          probe), and onAuth() re-enters to the real draft step the moment /me answers */
-      var step = authKnown && state.step >= 1 && state.step <= 10 ? state.step : 1;
+      var step = authKnown && state.step >= 1 && state.step <= 11 ? state.step : 1;
       if (step === 1) {
         /* Pre-auth, step 1 is a PLACEHOLDER, not where the visitor is — but show()
            persists whatever step it renders, so it used to overwrite the draft's real
@@ -5904,7 +6325,7 @@ summary{min-height:24px;padding:3px 0;}
            step back after rendering the placeholder, in memory AND in the draft. */
         var resumeStep = state.step;
         show(1, false);
-        if (!authKnown && resumeStep >= 1 && resumeStep <= 10) { state.step = resumeStep; saveDraft(); }
+        if (!authKnown && resumeStep >= 1 && resumeStep <= 11) { state.step = resumeStep; saveDraft(); }
         if (focus) $('termsAck').focus();
       } else {
         show(step, !!focus);
@@ -6701,6 +7122,7 @@ summary{min-height:24px;padding:3px 0;}
        progress survives the tick because only a different project re-renders it */
     renderPick(inst);
     renderCardPick(inst);
+    renderLookCard(inst);
     /* invite a builder (task 1002346): fetch-free too — the widget needs only the
        slug, and the API is the wall. This read is own-scoped and 404s for anyone
        who is not the owner, so reaching renderManage at all IS the ownership
@@ -7694,6 +8116,55 @@ summary{min-height:24px;padding:3px 0;}
   function backdropPlate(key) {
     return CARD_PLATES[key] ? '/assets/world/' + CARD_PLATES[key] : '';
   }
+  /* ── its look (task 1004421, spec D8): the wizard's picker on an existing project.
+     Read once per project (GET …/look) — the tick re-renders the page every minute and
+     must not throw away a choice in progress — and saved through lookKit.sendLook, the
+     wizard's own send. A project that never chose has look 'own': no look is ticked and
+     the preview shows the chrome world it already wears. ── */
+  var mLookFor = null, mLookModel = null, mLookPicker = null;
+  function renderLookCard(inst) {
+    if (mLookFor === inst.id) return;
+    mLookFor = inst.id; mLookModel = null; mLookPicker = null;
+    var host = $('mLookPick');
+    $('mLookActions').hidden = true;
+    $('mLookMsg').textContent = ''; $('mLookMsg').className = 'projMsg';
+    while (host.firstChild) host.removeChild(host.firstChild);
+    var wait = document.createElement('p'); wait.className = 'finePrint'; wait.textContent = 'Reading the project…';
+    host.appendChild(wait);
+    var forId = inst.id;
+    fetch(API + '/provisioning/instances/' + encodeURIComponent(inst.id) + '/look', { credentials: 'same-origin' })
+      .then(function (res) { return jsonOrEmpty(res).then(function (data) { if (!res.ok) throw apiError(data, res.status); return data; }); })
+      .then(function (data) {
+        if (mLookFor !== forId) return;
+        var l = data.look || {};
+        mLookModel = { look: l.look || 'own', nightTint: l.night_tint !== 'off', accent: l.look_accent || '#b48cf2', logo: null, logoUrl: l.logo_url || '' };
+        mLookPicker = lookKit.buildLookPicker(host, mLookModel, function () { $('mLookMsg').textContent = ''; }, 'mLk',
+          function () { return (manageInst && manageInst.slug) || ''; });
+        $('mLookActions').hidden = false;
+      })
+      .catch(function (err) {
+        if (mLookFor !== forId) return;
+        wait.textContent = (err && err.message) || 'The look could not be read — reload to try again.';
+      });
+  }
+  $('mLookSave').addEventListener('click', function () {
+    if (!mLookModel || !manageInst) return;
+    var btn = this, box = $('mLookMsg');
+    if (mLookModel.look === 'own' && !mLookModel.logo && !mLookModel.logoDropped) { box.className = 'projMsg err'; box.textContent = 'Pick a look first.'; return; }
+    btn.disabled = true; box.className = 'projMsg'; box.textContent = 'Saving…';
+    lookKit.sendLook(manageId, mLookModel).then(function (r) {
+      var l = r.look || {};
+      mLookModel.logo = null; mLookModel.logoDropped = false; mLookModel.logoUrl = l.logo_url || '';
+      if (l.look_accent) mLookModel.accent = l.look_accent;
+      if (mLookPicker) mLookPicker.repaint();
+      box.className = 'projMsg ok';
+      box.textContent = (r.adjusted ? 'Your colour was adjusted to ' + r.adjusted.to + ' so text stays readable. ' : '') + (r.message || 'Saved.');
+    }).catch(function (err) {
+      box.className = 'projMsg err';
+      box.textContent = (err && err.message) || 'The look could not be saved — try again in a moment.';
+    }).then(function () { btn.disabled = false; });
+  });
+
   var mPick = null;         /* the pending choice: { shape, material, style, accent } */
   var mPickFor = null;      /* which project it belongs to — a different one starts afresh */
   var mPickTouched = false; /* the owner changed something since the seed — a late catalog must not undo it */