@bongos/core 1.25.31 → 1.25.32

package/modules/hall-ui/public/index.html

@@ -20,8 +20,8 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <link rel="stylesheet" href="/builders/visor.css?v=2026-11-14-world">
-  <link rel="stylesheet" href="/builders/welcome-boot.css?v=2026-11-07-brand-mark">
-  <link rel="stylesheet" href="/builders/shell-game.css?v=2026-11-11-view2">
+  <link rel="stylesheet" href="/builders/welcome-boot.css?v=2026-11-14-cloud">
+  <link rel="stylesheet" href="/builders/shell-game.css?v=2026-11-14-cloud">
   <link rel="stylesheet" href="/builders/hall-ask.css">
   <link rel="stylesheet" href="/builders/home-city.css?v=2026-11-14-world">
   <link rel="stylesheet" href="/builders/home-gallery.css">
@@ -102,8 +102,8 @@
      BEFORE builders.js so the chrome ids exist when events are wired. -->
 <!-- task 1004785: the first-visit-of-the-day welcome (the tower). Before shell.js, which asks it
      before the craft picker so the two never stack. Home only. -->
-<script src="/builders/welcome-boot.js?v=2026-11-07-brand-mark" defer></script>
-<script src="/builders/shell-game.js?v=2026-11-11-view2" defer></script>
+<script src="/builders/welcome-boot.js?v=2026-11-14-cloud" defer></script>
+<script src="/builders/shell-game.js?v=2026-11-14-cloud" defer></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers" defer></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor" defer></script>
 <script src="/builders/shell.js?v=2026-11-13-founding" defer></script>

package/modules/hall-ui/public/shell-game.css

@@ -1,5 +1,5 @@
 /* shell-game.css — the game's start screen and load screen (task 1005143; shell-game.js start()),
-   in the Helm look (task 1005192, ADR 0402). Both stand over the welcome's painting. The start
+   in the Helm look (task 1005192, ADR 0402). Both stand over the city in the clouds (task 1005308). The start
    screen is one full-height night panel on the left, closed left and right by an ice hairline:
    the mark and the project's name in the name voice, the five choices as full-width rows, one
    line at the foot. The load screen is the same panel language, centred: the week in the name
@@ -18,11 +18,10 @@ html.gs-open { overflow: hidden; }
 .gs--leaving { opacity: 0; pointer-events: none; }
 .gs--load { align-items: center; justify-content: center; padding: var(--ds-space-lg) var(--ds-space-gutter-narrow); }
 
-/* the still: the painting, covering the screen. The start screen leaves it bare (the panel is
+/* the still: the city in the clouds (.cloud-scene, welcome-boot.css), covering the screen. The start screen leaves it bare (the panel is
    its own ground); the load screen lays the scrim over it so the centred panel reads anywhere. */
 .gs__art { position: absolute; inset: 0; }
 .gs--load .gs__art::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
-.gs__img { width: 100%; height: 100%; object-fit: cover; display: block; }
 
 /* the two panels: night over the art, an ice hairline left and right, no corner, no shadow */
 .gs__menu, .gs__load {

package/modules/hall-ui/public/shell-game.js

@@ -87,9 +87,9 @@
 
   // ---------- the start screen and the load screen (task 1005143, BONGOS-V3 R03) ----------
   // A fresh sign-in opens on the start screen: Start, Options, Achievements, Extras, Quit over a
-  // still. Start turns game mode on and passes through the load screen, where the project city
+  // the city in the clouds (task 1005308; the painting before it is retired). Start turns game mode on and passes through the load screen, where the project city
   // builds itself up week by week under a tip, and then the world is there. welcome-boot.js calls
-  // start() on Home (where a sign-in lands) and hands in the still; this file draws both screens.
+  // start() on Home (where a sign-in lands) and hands in the scene's painter; this file draws both screens.
   // Rules are in modules/hall-ui/records/start-screen.md.
   var MENU = [
     { id: 'start', label: 'Start' },
@@ -155,7 +155,7 @@
   }
   // The Helm panel (task 1005192, ADR 0402): the mark and the name, the choices, one line at the foot.
   function screenHtml(o) {
-    return '<div class="gs__art" aria-hidden="true">' + (o.art ? '<img class="gs__img" alt="" src="' + esc(o.art) + '" decoding="async">' : '') + '</div>' +
+    return '<div class="gs__art" aria-hidden="true"></div>' +
       '<div class="gs__menu">' +
         '<div class="gs__top">' +
           '<div class="gs__head">' + markHtml() +
@@ -369,8 +369,8 @@
     return v === 'game' || v === 'classic' ? v : null;
   }
 
-  // Put the start screen up. `o`: { name, art, done, signIn } — the project's name, the still to
-  // stand behind both screens, what to do once the world is showing, and (signed out) how to sign
+  // Put the start screen up. `o`: { name, scene, done, signIn } — the project's name, the painter of
+  // the city that stands behind both screens (scene(host), welcome-boot.js paintScene), what to do once the world is showing, and (signed out) how to sign
   // in once a view is picked. True when it is up; false for a classic pick made before sign-in,
   // which goes straight to the hall.
   function start(o) {
@@ -387,6 +387,7 @@
     root.setAttribute('aria-modal', 'true');
     root.setAttribute('aria-labelledby', 'gs-title');
     root.innerHTML = screenHtml(opts);
+    if (typeof opts.scene === 'function') { try { opts.scene(root.querySelector('.gs__art')); } catch (_) { /* the ground stands */ } }
     root.addEventListener('click', onClick);
     document.addEventListener('keydown', onKey, true);
     document.body.appendChild(root);

package/modules/hall-ui/public/welcome-boot.css

@@ -1,7 +1,8 @@
 /* welcome-boot.css — the first-visit-of-the-day welcome (tasks 1004785, 1004818; welcome-boot.js).
-   The scene is the owner's painting of a circuit city (welcome-day.webp / welcome-night.webp) with
-   motion laid over it. Its palette is the painting's, by time of day rather than by hall theme, so its
-   ink is fixed here rather than --ink (which flips with the theme). */
+   The scene is the city in the clouds, drawn in the hour's sky (task 1005308; the circuit-city
+   painting it replaced is retired). Its ink follows day or night rather than the hall theme, so it
+   is fixed here rather than --ink. .cloud-scene is also the ground of the game's start and load
+   screens (shell-game.js), which this sheet shares the page with. */
 html.wb-open { overflow: hidden; }
 .wb {
   position: fixed; inset: 0; z-index: 1000; overflow: hidden;
@@ -10,35 +11,21 @@ html.wb-open { overflow: hidden; }
 }
 .wb--day { color: #14161c; background: linear-gradient(180deg, #a9d6dc 0%, #f1d9d0 55%, #e9cfc6 100%); }
 
-/* the painting: covers the screen at its own 1024x572 shape, so the motion layer stays on its marks */
+/* the scene: the city in the clouds (welcome-boot.js paintScene), on the hour's sky. It covers the
+   screen; the city stands on the bottom edge, so a tall screen shows more sky and a wide one crops it. */
 .wb__art {
-  position: absolute; left: 50%; top: 50%; z-index: 1;
-  width: max(100vw, calc(100vh * 1024 / 572)); aspect-ratio: 1024 / 572;
-  transform: translate(-50%, -50%);
+  position: absolute; inset: 0; z-index: 1;
   transition: transform 2.2s cubic-bezier(.45, 0, .25, 1);
 }
-.wb__pan { position: absolute; inset: 0; transform-origin: 62% 42%; animation: wb-pan 40s ease-in-out infinite alternate; }
-@keyframes wb-pan { from { transform: scale(1); } to { transform: scale(1.07) translateX(-1.2%); } }
-.wb__img, .wb__fx, .wb-motion { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
-.wb__img { object-fit: cover; }
-.wb__img[hidden] { display: none; }
-
-/* the motion: pulses climb the circuit towers, cars cross, and at night the lights blink */
-.wb-pulses { opacity: 0; transition: opacity 1.6s ease-out; }
-.wb--live .wb-pulses { opacity: 1; }
-.wb-pulse { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 100; stroke-dashoffset: 7; animation: wb-climb linear infinite; }
-@keyframes wb-climb { to { stroke-dashoffset: -100; } }
-.wb--night .wb-pulse { filter: drop-shadow(0 0 3px currentColor); }
-.wb--day .wb-pulse { opacity: .8; stroke-width: 1.8; }
-.wb-car { animation: wb-car linear infinite; }
-@keyframes wb-car {
-  0% { transform: translate(0, 0); opacity: 0; }
-  10%, 88% { opacity: 1; }
-  100% { transform: translate(var(--wb-dx), var(--wb-dy)); opacity: 0; }
+.wb__pan { position: absolute; inset: 0; transform-origin: 50% 70%; animation: wb-pan 40s ease-in-out infinite alternate; }
+@keyframes wb-pan { from { transform: scale(1); } to { transform: scale(1.05) translateX(-1%); } }
+.cloud-scene { background: linear-gradient(to bottom, var(--sky-now-top), var(--sky-now-mid) 46%, var(--sky-now-haze)); }
+.cloud-scene__svg {
+  position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
+  background: radial-gradient(ellipse 70% 60% at 50% 72%, var(--sky-now-cloud), var(--sky-now-base) 30%, var(--sky-now-haze) 62%, transparent);
 }
-.wb-star { opacity: .6; }
-.wb-moon { animation: wb-moon 6s ease-in-out infinite alternate; filter: blur(6px); }
-@keyframes wb-moon { from { opacity: .35; } to { opacity: .8; } }
+.cloud-scene__svg .hc-stars { opacity: var(--sky-now-stars); }
+
 .wb__cloud { position: absolute; z-index: 2; border-radius: 50%; background: rgba(255, 255, 255, .06); filter: blur(30px); animation: wb-drift linear infinite; pointer-events: none; }
 .wb--day .wb__cloud { background: rgba(255, 255, 255, .35); filter: blur(28px); }
 .wb__cloud--a { top: 8vh; width: 40vw; height: 7vh; animation-duration: 80s; animation-delay: -20s; }
@@ -71,7 +58,7 @@ html.wb-open { overflow: hidden; }
   font-family: var(--font-display); font-size: clamp(18px, 2.6vw, 26px); font-weight: 300;
   letter-spacing: -.01em; text-transform: lowercase; white-space: nowrap;
 }
-/* the mark's ink follows the painting: pale by night, dark by day; the moon stays salmon */
+/* the mark's ink follows the hour: pale by night, dark by day; the moon stays salmon */
 .wb__mark { --mark-ink: rgba(255, 255, 255, .88); }
 .wb__planet { transform-box: fill-box; transform-origin: center; }
 .wb__moonlet { transform-box: view-box; transform-origin: 100px 100px; }
@@ -137,7 +124,7 @@ html.wb-open { overflow: hidden; }
 .wb__role small { display: block; margin-top: 3px; }
 .wb__role i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
 
-/* the veil: white by day, black by night, lifting slowly once the painting is in */
+/* the veil: white by day, black by night, lifting slowly once the scene is painted */
 .wb__veil { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: #000; opacity: 1; transition: opacity 1.6s ease-out; }
 .wb--day .wb__veil { background: #fff; }
 .wb--lit .wb__veil { opacity: 0; }
@@ -145,7 +132,7 @@ html.wb-open { overflow: hidden; }
 /* the way out: the view sinks past the rooftops and the welcome fades into the hall underneath;
    bound for another room, the veil comes back instead */
 .wb--leaving { pointer-events: none; }
-.wb--leaving .wb__art { transform: translate(-50%, calc(-50% - 30vh)) scale(1.12); }
+.wb--leaving .wb__art { transform: translateY(-30vh) scale(1.12); }
 .wb--leaving .wb__banner { transform: translate(-50%, -40vh); }
 .wb--done.wb--leaving .wb__after { opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s; }
 .wb--leaving:not(.wb--to-room) { opacity: 0; transition: opacity 1.8s ease-in .5s; }

package/modules/hall-ui/public/welcome-boot.js

@@ -1,13 +1,16 @@
 // welcome-boot.js — the welcome on a builder's first visit of the day (tasks 1004785, 1004818; idea 1001262).
 //
-// Home only. The scene is the owner's own painting of a circuit city (welcome-day.webp and
-// welcome-night.webp, 2026-10-23), brought to life: a slow drift across the skyline, data pulses
-// climbing the circuit towers, hover cars crossing, and by night blinking aircraft lights, a breathing
-// moon and twinkling stars. The banner at the top is the logo, animated, and a "Built on
-// cloudbongos.com" credit sits in the bottom-right corner (task 1004953). The picture follows the local time of day: the day painting from 06:00 to 17:59, the
-// night one otherwise. It opens from a white (day) or black (night) veil, then "Good morning, <name>"
-// comes up with two choices. The way out is slow: the view sinks past the rooftops and fades into the
-// hall underneath.
+// Home only. The scene is the city in the clouds (task 1005196), drawn by home-city-draw.js and
+// city-draw.js in the hour's sky (sky-time.js): the Cloud Bongos core and the museum standing in
+// cloud, with a slow drift. It replaced the owner's circuit-city painting (a day and a
+// night WebP still), retired everywhere by task 1005308 (owner, 2026-11-14), and with it the
+// lights that were pinned to the painting's pixels. paintScene() is also what the game's start and
+// load screens stand on (shell-game.js), so every screen before the hall shows the same city.
+// The banner at the top is the logo, animated, and a "Built on cloudbongos.com" credit sits in the
+// bottom-right corner (task 1004953). The ink follows the local time of day: day from 06:00 to
+// 17:59, night otherwise. It opens from a white (day) or black (night) veil, then
+// "Good morning, <name>" comes up with two choices. The way out is slow: the view sinks past the
+// rooftops and fades into the hall underneath.
 //
 // Rules:
 //   - A signed-in builder sees it once per LOCAL day. A fresh sign-in (the sign-in click leaves a
@@ -22,10 +25,11 @@
 //     picker asked (OTBCraftMode.markAsked), so the two never stack.
 //   - Picking a role also sets the hall's craft mode. Governing is a seat (craft-mode.js), so the
 //     Owner role shows only when OTBCraftMode offers it.
-//   - A painting that will not load leaves the sky gradient behind it, and the welcome works the same.
-//   - prefers-reduced-motion: no motion; the still painting and the greeting at once, leaving is immediate.
+//   - Without the city's painters (a page that does not load them) the hour's sky gradient stands alone,
+//     and the welcome works the same.
+//   - prefers-reduced-motion: no motion; the still city and the greeting at once, leaving is immediate.
 //
-// The pure parts (the day rule, the logo, the roles, the motion layout) are exported for
+// The pure parts (the day rule, the logo, the roles, the scene's node rewrite) are exported for
 // tests/welcome_boot.mjs; tests/welcome_boot_browser.mjs runs the overlay itself in a real browser.
 (function () {
   'use strict';
@@ -33,8 +37,7 @@
   var DAY_KEY = 'hall-welcome-day:';
   var SIGNIN_KEY = 'hall-welcome-signin';
   var SIGNIN_HREF = '/api/bongos/auth/web/start';
-  var ART = { day: '/builders/welcome-day.webp', night: '/builders/welcome-night.webp' };
-  var ART_WAIT = 1500;       // the veil lifts once the painting is in, or after this long
+  var ART_WAIT = 1500;       // the veil lifts once the scene is painted, or after this long
   var RUN_MS = 3400;         // the city powering up before the greeting
   var LEAVE_MS = 2400;       // the way down into the hall
 
@@ -46,9 +49,9 @@
     var h = now.getHours();
     return h < 12 ? 'Good morning' : h < 18 ? 'Good afternoon' : 'Good evening';
   }
-  // Day is 06:00 to 17:59 local: a white veil and the day painting. Night: a black veil and the night one.
+  // Day is 06:00 to 17:59 local: a white veil and dark ink. Night: a black veil and pale ink.
+  // (The scene's own colours follow the hour more finely: sky-time.js.)
   function timeOfDay(now) { var h = now.getHours(); return h >= 6 && h < 18 ? 'day' : 'night'; }
-  function artFor(when) { return when === 'day' ? ART.day : ART.night; }
   function nameOf(builder) {
     return String((builder && (builder.display_name || builder.github_login)) || 'builder');
   }
@@ -88,73 +91,61 @@
   }
   function roleById(id) { return ROLES.filter(function (r) { return r.id === id; })[0] || null; }
 
-  // ---------- the motion, laid over the painting ----------
-  // In the painting's own pixels (1024x572; both paintings share one layout), so every light sits on
-  // the thing it belongs to however the picture is cropped to the screen.
-  var AW = 1024, AH = 572;
-  // The circuit towers: a box each, and the colour its traces glow in the night painting.
-  var TOWERS = [
-    { x: 140, y: 168, w: 62, h: 118, glow: '#60a5fa' },
-    { x: 280, y: 150, w: 58, h: 200, glow: '#22d3ee' },
-    { x: 184, y: 296, w: 100, h: 196, glow: 'var(--accent)' },
-    { x: 636, y: 222, w: 42, h: 140, glow: 'color-mix(in srgb, var(--sea) 55%, #ffffff)' },
-    { x: 702, y: 212, w: 84, h: 190, glow: 'color-mix(in srgb, var(--sea) 55%, #ffffff)' },
-    { x: 2, y: 196, w: 52, h: 150, glow: 'color-mix(in srgb, var(--sea) 55%, #ffffff)' },
-    { x: 910, y: 410, w: 110, h: 160, glow: '#22d3ee' },
-  ];
-  // The hover-car lanes on the right (the masts' blinking lights went in task 1005087).
-  var LANES = [
-    { x1: 770, y1: 350, x2: 1040, y2: 362, dur: 5.5 },
-    { x1: 1040, y1: 340, x2: 760, y2: 352, dur: 7 },
-    { x1: 820, y1: 258, x2: 1040, y2: 254, dur: 6.5 },
-  ];
-  var MOON = [665, 82];
-  function seeded(s) { return function () { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }
-  // Where each data pulse climbs: a vertical run inside a tower, bottom to top. Pure, so it is testable.
-  function pulseRuns(towers, perTower, seed) {
-    var rnd = seeded(seed || 7), out = [];
-    towers.forEach(function (t, ti) {
-      for (var i = 0; i < perTower; i++) {
-        var x = Math.round((t.x + 6 + rnd() * (t.w - 12)) * 10) / 10;
-        var y1 = Math.round((t.y + t.h * (0.75 + rnd() * 0.25)) * 10) / 10;
-        var y0 = Math.round((t.y + t.h * rnd() * 0.3) * 10) / 10;
-        out.push({ tower: ti, x: x, y0: y0, y1: y1, glow: t.glow, dur: Math.round((2.2 + rnd() * 2.4) * 100) / 100, delay: Math.round(rnd() * 400) / 100 });
-      }
-    });
-    return out;
-  }
-
+  // ---------- the scene: the city in the clouds (task 1005308) ----------
+  // Home's own painters draw it (window.OTBHomeCityDraw + window.GovCity), from an empty week: the
+  // Cloud Bongos core and the museum, standing in cloud, in the hour's --sky-now-* tokens. It is a
+  // backdrop, so every door the city carries on Home (a link, a tooltip, a goal) becomes a plain
+  // group, nothing in it takes focus, and its ids are prefixed so they never meet Home's own city's.
   var NS = 'http://www.w3.org/2000/svg';
-  function el(t, a, p) { var e = document.createElementNS(NS, t); for (var k in a) e.setAttribute(k, a[k]); if (p) p.appendChild(e); return e; }
-
-  function drawMotion(host, when) {
-    var night = when !== 'day';
-    var rnd = seeded(11);
-    var svg = el('svg', { viewBox: '0 0 ' + AW + ' ' + AH, preserveAspectRatio: 'none', 'class': 'wb-motion' }, host);
-    if (night) {
-      // the moon breathes; the stars stand still (task 1005087: no twinkle, no beacons)
-      el('circle', { 'class': 'wb-moon', cx: MOON[0], cy: MOON[1], r: 26, fill: 'rgba(226,232,255,.25)' }, svg);
-      for (var i = 0; i < 40; i++) {
-        var sx = rnd() * AW, sy = rnd() * 140;
-        if (Math.abs(sx - MOON[0]) < 50 && Math.abs(sy - MOON[1]) < 50) continue;
-        el('circle', { 'class': 'wb-star', cx: sx.toFixed(1), cy: sy.toFixed(1), r: (0.6 + rnd() * 0.9).toFixed(2), fill: '#e0e7ff' }, svg);
-        rnd(); rnd(); // the two draws the twinkle timing took, so every star keeps its place
-      }
-    }
-    // data pulses climbing the circuit towers (the whole set brightens as the city powers up)
-    var pulses = el('g', { 'class': 'wb-pulses' }, svg);
-    pulseRuns(TOWERS, 3, 7).forEach(function (r) {
-      el('line', { 'class': 'wb-pulse', x1: r.x, y1: r.y1, x2: r.x, y2: r.y0, pathLength: 100, stroke: night ? r.glow : '#ffffff',
-        style: 'color:' + r.glow + ';animation-duration:' + r.dur + 's;animation-delay:' + (-r.delay) + 's' }, pulses);
-    });
-    // hover cars, each a light with a short trail, crossing on its lane
-    LANES.forEach(function (l, i) {
-      var g = el('g', { 'class': 'wb-car', style: '--wb-dx:' + (l.x2 - l.x1) + 'px;--wb-dy:' + (l.y2 - l.y1) + 'px;animation-duration:' + l.dur + 's;animation-delay:' + (-i * 1.7) + 's' }, svg);
-      var dir = l.x2 > l.x1 ? -1 : 1;
-      el('line', { x1: l.x1, y1: l.y1, x2: l.x1 + dir * 26, y2: l.y1, stroke: night ? 'rgba(125,211,252,.55)' : 'rgba(255,255,255,.7)', 'stroke-width': 2, 'stroke-linecap': 'round' }, g);
-      el('circle', { cx: l.x1, cy: l.y1, r: 2.4, fill: night ? '#e0f2fe' : '#ffffff' }, g);
+  var SCENE_ID = 'cs-';
+  var DOOR_ATTRS = /^(href|tabindex|aria-label|data-tip|data-tip-body|data-goal|data-group|data-building|data-craft-door)$/;
+  var QUIET_RE = /\bhc-quiet\b/g, SPACES_RE = /\s+/g, URL_REF_RE = /url\(#/g;
+  // One shape node rewritten for the backdrop: { tag, attrs, kids, text } -> the same, door-free. Pure.
+  function sceneShape(n) {
+    var attrs = {};
+    Object.keys(n.attrs || {}).forEach(function (k) {
+      if (DOOR_ATTRS.test(k)) return;
+      var v = String(n.attrs[k]);
+      if (k === 'id') v = SCENE_ID + v;
+      else if (k === 'class') v = v.replace(QUIET_RE, '').replace(SPACES_RE, ' ').trim();
+      else v = v.replace(URL_REF_RE, 'url(#' + SCENE_ID);
+      if (k === 'class' && !v) return;
+      attrs[k] = v;
     });
-    return svg;
+    return { tag: n.tag === 'a' ? 'g' : n.tag, attrs: attrs, kids: (n.kids || []).map(sceneShape), text: n.text == null ? null : n.text };
+  }
+  // The scene as shapes, or null when the painters are not on the page. Pure given the painters.
+  function sceneShapes(Draw, Gov) {
+    if (!Draw || typeof Draw.citySvg !== 'function' || typeof Draw.cityModel !== 'function') return null;
+    var out = Draw.citySvg(Draw.cityModel({ weeks: [{}] }), 0, { gov: Gov || null });
+    return { viewBox: out.viewBox, nodes: out.nodes.map(sceneShape) };
+  }
+  function build(n) {
+    var e = document.createElementNS(NS, n.tag);
+    Object.keys(n.attrs).forEach(function (k) { e.setAttribute(k, n.attrs[k]); });
+    if (n.text != null) e.textContent = n.text;
+    n.kids.forEach(function (c) { e.appendChild(build(c)); });
+    return e;
+  }
+  // Paint the city into host (it covers it; the host's class gives it the hour's sky). True when
+  // the city is drawn; false leaves the sky alone, which is still the right picture.
+  function paintScene(host) {
+    if (!host || typeof document === 'undefined') return false;
+    host.classList.add('cloud-scene');
+    var sky = window.OTBSkyTime;
+    if (sky && typeof sky.apply === 'function') { try { sky.apply(document); } catch (_) { /* the tokens' night default stands */ } }
+    var shapes;
+    try { shapes = sceneShapes(window.OTBHomeCityDraw, window.GovCity); } catch (_) { shapes = null; }
+    if (!shapes) return false;
+    var svg = document.createElementNS(NS, 'svg');
+    svg.setAttribute('class', 'cloud-scene__svg');
+    svg.setAttribute('viewBox', shapes.viewBox);
+    svg.setAttribute('preserveAspectRatio', 'xMidYMax slice');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    shapes.nodes.forEach(function (n) { svg.appendChild(build(n)); });
+    host.appendChild(svg);
+    return true;
   }
 
   // ---------- the overlay ----------
@@ -170,10 +161,7 @@
 
   function bannerTag(builder) { return builder ? 'div' : 'header'; }
   function overlayHtml(builder, now, when) {
-    return '<div class="wb__art" aria-hidden="true"><div class="wb__pan">' +
-        '<img class="wb__img" alt="" src="' + artFor(when) + '" decoding="async">' +
-        '<div class="wb__fx" id="wb-fx"></div>' +
-      '</div></div>' +
+    return '<div class="wb__art" aria-hidden="true"><div class="wb__pan" id="wb-clouds"></div></div>' +
       '<div class="wb__cloud wb__cloud--a" aria-hidden="true"></div><div class="wb__cloud wb__cloud--b" aria-hidden="true"></div>' +
       // For a visitor the welcome IS the page (the shell draws no header for them), so its logo
       // banner is the page's one <header>; over a signed-in hall the shell's header stands, and the
@@ -224,7 +212,7 @@
     if (first && first.focus) first.focus();
   }
 
-  // The veil lifts once the painting is in (or after ART_WAIT), then the city powers up.
+  // The veil lifts once the scene is painted (or after ART_WAIT), then the city powers up.
   function begin() {
     if (!root || root.classList.contains('wb--lit')) return;
     root.classList.add('wb--lit');
@@ -324,13 +312,9 @@
     document.addEventListener('keydown', onKey, true);
     document.body.appendChild(root);
     document.documentElement.classList.add('wb-open');
-    drawMotion(root.querySelector('#wb-fx'), when);
-    var img = root.querySelector('.wb__img');
-    // A painting that fails to load is hidden, leaving the sky gradient; the welcome goes on regardless.
-    var go1 = function () { if (window.requestAnimationFrame) window.requestAnimationFrame(function () { window.requestAnimationFrame(begin); }); else begin(); };
-    img.addEventListener('load', go1);
-    img.addEventListener('error', function () { img.hidden = true; if (root) root.classList.add('wb--bare'); go1(); });
-    if (img.complete && img.naturalWidth) go1();
+    // No city painters on the page: the hour's sky stands alone; the welcome goes on regardless.
+    if (!paintScene(root.querySelector('#wb-clouds'))) root.classList.add('wb--bare');
+    if (window.requestAnimationFrame) window.requestAnimationFrame(function () { window.requestAnimationFrame(begin); });
     at(ART_WAIT, begin);
     var skip = root.querySelector('[data-wb-skip]');
     if (skip && skip.focus) skip.focus();
@@ -378,7 +362,7 @@
       // The hall's front opens on Game or Classic (task 1005219): the pick is kept, the visitor
       // signs in, and comes back to that menu (shell-game.js). Without that file, the welcome.
       if (canChoose && game.start({
-        name: projectName(window.__BRANDING__), art: artFor(timeOfDay(new Date())),
+        name: projectName(window.__BRANDING__), scene: paintScene,
         signIn: function () { markSigningIn(); go(SIGNIN_HREF); },
       })) return true;
       show(null);
@@ -398,11 +382,11 @@
     shown = true;
     var c = craft();
     // A fresh sign-in, or a new visit to Home, opens on the game's start screen instead (tasks
-    // 1005143, 1005219; shell-game.js): the same still behind it, and the craft picker asked once
+    // 1005143, 1005219; shell-game.js): the same city behind it, and the craft picker asked once
     // the world is showing. Classic picked before signing in: no screen, straight to the hall.
     if ((fresh || ask) && canChoose) {
       if (game.start({
-        name: projectName(window.__BRANDING__), art: artFor(timeOfDay(now)),
+        name: projectName(window.__BRANDING__), scene: paintScene,
         done: function () { if (c && typeof c.onAccess === 'function') c.onAccess(access, builder); },
       })) return true;
       if (fresh) return false;
@@ -413,9 +397,9 @@
   }
 
   var api = {
-    DAY_KEY: DAY_KEY, SIGNIN_KEY: SIGNIN_KEY, ROLES: ROLES, ART: ART, TOWERS: TOWERS, LANES: LANES, AW: AW, AH: AH,
+    DAY_KEY: DAY_KEY, SIGNIN_KEY: SIGNIN_KEY, ROLES: ROLES, SCENE_ID: SCENE_ID,
     localDay: localDay, firstVisitToday: firstVisitToday, greetingFor: greetingFor, nameOf: nameOf, timeOfDay: timeOfDay,
-    artFor: artFor, projectName: projectName, logoHtml: logoHtml, BUILT_ON: BUILT_ON, rolesFor: rolesFor, pulseRuns: pulseRuns,
+    projectName: projectName, logoHtml: logoHtml, BUILT_ON: BUILT_ON, rolesFor: rolesFor, sceneShape: sceneShape, sceneShapes: sceneShapes, paintScene: paintScene,
     onAccess: onAccess, finish: finish, close: close,
   };
   if (typeof window !== 'undefined') { window.OTBWelcome = api; watchSignInLinks(); }

package/modules/hall-ui/records/start-screen.md

@@ -4,23 +4,23 @@ Covers: Home (`shell-game.js` `start()`, `shell-game.css`, the hand-off in `welc
 
 ## What it settled
 
-- **A fresh sign-in opens on the start screen, on Home.** Home is where a sign-in lands (`postLoginLanding`), and `welcome-boot.js` already knows a fresh sign-in from a return visit (the flag the sign-in click leaves). On one, `OTBWelcome.onAccess` calls `OTBShellGame.start({ name, art, done })` in place of its own greeting. The day's first visit without a sign-in keeps the welcome; a signed-out visitor keeps the welcome. A sign-in that returns to a deep link or another page goes straight there, as the welcome always did. `shell.js` is untouched.
+- **A fresh sign-in opens on the start screen, on Home.** Home is where a sign-in lands (`postLoginLanding`), and `welcome-boot.js` already knows a fresh sign-in from a return visit (the flag the sign-in click leaves). On one, `OTBWelcome.onAccess` calls `OTBShellGame.start({ name, scene, done })` in place of its own greeting. The day's first visit without a sign-in keeps the welcome; a signed-out visitor keeps the welcome. A sign-in that returns to a deep link or another page goes straight there, as the welcome always did. `shell.js` is untouched.
 - **Five choices, one column: Start, Options, Achievements, Extras, Quit.** Start is the one filled pill. Options is a link to `/settings`, which IS the one options menu since task 1005144 (`records/options-menu.md`); Achievements is `/profile`. Extras opens three links under the menu (the thinking sky, the atlas, the docs). Quit calls `window.close()`; a browser only closes a tab a script opened, so when the tab is still there 300ms later the screen says "Close it to quit" instead of doing nothing.
 - **Start turns game mode on** (`set(true)`), then shows the load screen. Nothing else in the hall's interface sets it.
-- **The load screen is the still, a tip, and the city building up.** The still is the welcome's painting for the time of day, handed in by `welcome-boot.js` (this file names no picture). In a card of the hall's own tokens, the project city is drawn by `home-city-draw.js` `citySvg` from the one bounded read Home already uses (`GET /home/city?weeks=10`), at 31 stops from the oldest week to now, about three seconds, with "The city, N weeks ago" under it. Each stop is a whole drawing set as state; nothing animates in JavaScript. With reduced motion it is the finished city at once. With no city to draw (the read failed, the scripts are missing) the still and the tip stand for 1.4s. Either way the world opens.
+- **The load screen is the still, a tip, and the city building up.** The still is the city in the clouds in the hour's sky, painted by `welcome-boot.js` `paintScene`, which is handed in as `scene` (this file draws no city of its own for it; task 1005308). In a card of the hall's own tokens, the project city is drawn by `home-city-draw.js` `citySvg` from the one bounded read Home already uses (`GET /home/city?weeks=10`), at 31 stops from the oldest week to now, about three seconds, with "The city, N weeks ago" under it. Each stop is a whole drawing set as state; nothing animates in JavaScript. With reduced motion it is the finished city at once. With no city to draw (the read failed, the scripts are missing) the still and the tip stand for 1.4s. Either way the world opens.
 - **Tips rotate** (`localStorage 'hall-game-tip'` counts them), so each load shows the next one. A tip must be true of the hall today; the first one is the Escape rule from `game-mode.md` (rewritten by task 1005144, and again by task 1005250: Escape opens the game menu).
 - **The craft picker waits for the world.** While the start screen is up the shell asks no picker (`onAccess` returned true). `done` runs once the screen is gone and asks `OTBCraftMode.onAccess` then.
 - **Keys.** While either screen is up it keeps every key: the arrows and Tab walk the menu, Escape folds Extras away and does nothing else, so the shell's Escape cannot flip the bars underneath. Once the world shows, the last Escape opens the game menu (task 1005250; the options menu until then); the screen's capture listener calls `preventDefault`, so the menu never opens from under it.
-- **The look is Helm (task 1005192, [ADR 0402](../../../docs/adr/0402-helm-is-the-halls-look-and-the-hall-is-dark-only.md)).** The start screen is one full-height night panel over the painting (`--night-glass`, an ice hairline left and right at `--line-strong`), `--helm-panel-w` wide. On a desk it stands off the left edge by `--helm-inset`; that token is a `clamp`, so on a phone the panel is the whole width and the sheet still has no `@media`. In it: the mark (the project's logo when it has one) over the name in the name voice; Start as a full-width accent bar under `--accent-on` that names its key ("Enter", drawn by CSS so the choice's own text stays "Start"); the other four as quiet rows on `--rule-soft` hairlines; and at the foot, over the strong hairline, the tip the load screen will show next (`#gs-line`), with the Quit note under it when the browser keeps the tab. The rows are list rows in a panel, so they are bars, not cut buttons. A row's focus is the inset two-tone ring (`--press-focus`), which is what makes focus visible on the accent bar.
-- **The load screen is the same panel, centred** over the painting under the hall's `--scrim`: the week in the name voice (`#gs-when`), one segment per week of the history (`#gs-segs`, the shared `.segs` / `.seg`; filled up to the week being shown, counted the way the sentence words it, and hidden from a screen reader because the sentence says the same), the city, and the tip under a hairline. With no city there are no segments.
+- **The look is Helm (task 1005192, [ADR 0402](../../../docs/adr/0402-helm-is-the-halls-look-and-the-hall-is-dark-only.md)).** The start screen is one full-height night panel over the city in the clouds (`--night-glass`, an ice hairline left and right at `--line-strong`), `--helm-panel-w` wide. On a desk it stands off the left edge by `--helm-inset`; that token is a `clamp`, so on a phone the panel is the whole width and the sheet still has no `@media`. In it: the mark (the project's logo when it has one) over the name in the name voice; Start as a full-width accent bar under `--accent-on` that names its key ("Enter", drawn by CSS so the choice's own text stays "Start"); the other four as quiet rows on `--rule-soft` hairlines; and at the foot, over the strong hairline, the tip the load screen will show next (`#gs-line`), with the Quit note under it when the browser keeps the tab. The rows are list rows in a panel, so they are bars, not cut buttons. A row's focus is the inset two-tone ring (`--press-focus`), which is what makes focus visible on the accent bar.
+- **The load screen is the same panel, centred** over the city in the clouds under the hall's `--scrim`: the week in the name voice (`#gs-when`), one segment per week of the history (`#gs-segs`, the shared `.segs` / `.seg`; filled up to the week being shown, counted the way the sentence words it, and hidden from a screen reader because the sentence says the same), the city, and the tip under a hairline. With no city there are no segments.
 - **The literal floor is zero.** Every colour, size, corner, shadow, face and measure in `shell-game.css` is a hall-tier token (`style.css`); `tests/hall_start_screen.mjs` fails on a typed one. The fade into the world is one CSS opacity transition, stopped by the hall's reduced-motion rule.
 
 ## For the tasks after this one
 
 - R04 (task 1005144): point Options at the options menu and move Achievements/Extras targets if those pages lose their interfaces. Escape on the start screen is free for the menu to use.
-- `shell-game.js` is loaded on every hall page but only Home calls `start()`; `shell-game.css` is linked on Home only. A second page that wants the start screen links the sheet and calls `start()` with its own still.
+- `shell-game.js` is loaded on every hall page but only Home calls `start()`; `shell-game.css` is linked on Home only. A second page that wants the start screen links the sheet and calls `start()` with its own `scene` painter.
 
-- New art for the start screen (the city in the clouds) is task 1005196; `welcome-boot.js` still hands in the welcome's painting.
+- Since task 1005308 (owner, 2026-11-14) both screens stand on the city in the clouds from task 1005196; the circuit-city painting is retired everywhere.
 
 Tests: `tests/hall_start_screen.mjs` (the hand-off and pure parts in a vm; both screens, the panel's place at desk and phone widths, the segments, Quit, the no-city and reduced-motion paths in a real browser).
 

package/modules/hall-ui/records/welcome-tower.md

@@ -1,15 +1,21 @@
 # The welcome — Home's first visit of the day (tasks 1004785, 1004818)
 
 The owner's Builders' Hall idea 1001262, second half (the first is [`home-reshuffle.md`](home-reshuffle.md)).
-Files: `public/welcome-boot.js` + `public/welcome-boot.css`, and the owner's two paintings
-`public/welcome-day.webp` / `public/welcome-night.webp`, on Home only.
+Files: `public/welcome-boot.js` + `public/welcome-boot.css`, on Home only. The scene is drawn by
+Home's own city painters (`sky-time.js`, `city-draw.js`, `home-city-draw.js`).
 
 **How the look got here (2026-10-23, one day of owner rounds).** Task 1004785 built v5 "the tower"
 ([`docs/design/mocks/hall/welcome/v5.src.html`](../../../docs/design/mocks/hall/welcome/v5.src.html)),
 drawn live from the Repo Atlas. The owner then asked for day and night and a slow way out, then
 swapped the tower for a glowing module city with a lunch crew on a beam, dropped the crew, and
 finally had Gemini paint the city by day and by night and asked for those to be animated (task
-1004818). The atlas-drawn scene is gone; the painting is the scene.
+1004818). The atlas-drawn scene is gone.
+
+**The painting is retired too (task 1005308, owner 2026-11-14: "retire it everywhere").** The scene
+is now the city in the clouds from task 1005196, the same city Home and the City page draw, in the
+hour's sky. The two WebP paintings and every light that was pinned to their pixels (the circuit
+towers' pulses, the hover cars, the moon and stars) are deleted. The game's start and load screens
+stand on the same scene (`records/start-screen.md`).
 
 - **When.** A signed-in builder's first Home load of the LOCAL day, per builder id
   (`localStorage['hall-welcome-day:<id>']`). Storage that throws is never shown it, because it could not
@@ -20,15 +26,16 @@ finally had Gemini paint the city by day and by night and asked for those to be
   `welcome-boot.js` loads before the `shell-trail.js` / `craft-mode.js` / `shell.js` trio, which
   `tests/craft_mode.mjs` keeps adjacent.
 - **Day and night.** `timeOfDay` makes 06:00 to 17:59 local `day`, the rest `night`; the root wears
-  `.wb--day` or `.wb--night` and shows the matching painting. It opens from a veil (`.wb__veil`),
-  white by day and black by night, that lifts once the painting has loaded (or after 1.5s).
-- **The motion is laid on the painting, in its own pixels.** `.wb__art` covers the screen at the
-  paintings' 1024x572 shape (both share one layout), so the SVG over it (`viewBox 0 0 1024 572`) keeps
-  every light on its mark however the screen crops: `TOWERS` (the circuit towers, where `pulseRuns`
-  climbs), `BEACONS` (mast lights, night), `LANES` (hover cars), the moon and stars (night), plus a
-  slow drift of the whole picture and two clouds. **A new painting must keep that layout, or the
-  coordinates in welcome-boot.js move with it** — `tests/welcome_boot.mjs` checks both files are
-  1024x572 WebP.
+  `.wb--day` or `.wb--night`, which sets the ink. It opens from a veil (`.wb__veil`), white by day
+  and black by night, that lifts two frames after the scene is painted (or after 1.5s). The scene's
+  own colours follow the hour more finely (`sky-time.js`: night, dawn, midday, dusk, blended).
+- **The scene is the city, as a backdrop.** `paintScene(host)` asks `OTBHomeCityDraw.citySvg` for an
+  empty week (the Cloud Bongos core and the museum, standing in cloud) and rewrites it with
+  `sceneShape`: every link becomes a plain group, tooltips and goal hooks are dropped, the faded
+  `hc-quiet` look is lifted so the core leads, and every id is prefixed `cs-` so it never meets the
+  ids of Home's own city on the same page. It covers the screen, standing on the bottom edge
+  (`xMidYMax slice`), over `.cloud-scene`'s sky gradient, with a slow drift and two clouds. The same
+  `paintScene` is handed to the game's start screen as `scene`.
 - **Banner.** "Working on the core of <project>" from `__BRANDING__.identity` (never a hardcoded word),
   with `core <version>` under it when the public `GET /version` reports one.
 - **Sequence.** Veil lifts, the city powers up (pulses brighten), the greeting comes up at ~3.4s.
@@ -40,11 +47,13 @@ finally had Gemini paint the city by day and by night and asked for those to be
   Artisan → stays on Home (the Ideator door, once `/thinking`, folded into Artist). A pick also calls
   `OTBCraftMode.choose()` with patron / artist / artisan. **Patron shows only where
   `OTBCraftMode.offered('patron')`** — the patron craft is a seat — and the list is built when "Start with your role" is pressed, after the seats have settled.
-- **No painting** (a 404) hides the image and leaves the sky gradient; everything else works.
-- **Colours are the paintings'**, in both hall themes: `welcome-boot.css` and `welcome-boot.js` are on
-  `tests/hall_audit.mjs`'s literal exemptions with that reason.
-- **Tests.** `tests/welcome_boot.mjs` (the day rule, the paintings' files and shape, every light inside
-  the painting and every pulse inside its tower, the banner, the role map, the load order);
-  `tests/welcome_boot_browser.mjs` runs Home's markup with the real shell, craft mode, welcome and
-  paintings in a browser: once a day, Skip, Esc, no double picker, the seat rule, no painting, reduced
-  motion, the veil by day and night, the slow exit, and that the old drawn scene is gone.
+- **No city painters** on the page: the root wears `.wb--bare`, the hour's sky gradient stands alone,
+  and everything else works.
+- **The scene's colours are the hour's sky tokens only** (`--sky-now-*`); the welcome's ink, veil and
+  panels keep their fixed day/night literals, on `tests/hall_audit.mjs`'s literal exemptions.
+- **Tests.** `tests/welcome_boot.mjs` (the day rule, that the painting and its lights are gone, the
+  scene's shapes with no door, no unprefixed id and no typed colour, the banner, the role map, the
+  load order); `tests/welcome_boot_browser.mjs` runs Home's markup with the real shell, craft mode,
+  welcome and city painters in a browser: once a day, Skip, Esc, no double picker, the seat rule, no
+  painters, reduced motion, the city in the hour's sky by day and night, the slow exit, and that the
+  painting's lights are gone.

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.25.31",
+  "version": "1.25.32",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.25.31",
+      "version": "1.25.32",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.25.31",
+  "version": "1.25.32",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/release-notes.json

@@ -11961,5 +11961,11 @@
       "id": "1005310",
       "text": "The governor's street asks the server for less and gets its answers sooner."
     }
+  ],
+  "1.25.32": [
+    {
+      "id": "1005308",
+      "text": "The old circuit-city painting is gone. The welcome screen and the game's start screens now open on the city in the clouds, coloured for the time of day: deep night with lit windows, a warm dawn, a bright midday."
+    }
   ]
 }