@bongos/core 1.24.30 → 1.24.32

package/modules/hall-ui/public/home-city-draw.js

@@ -1,4 +1,5 @@
-// modules/hall-ui/public/home-city-draw.js — Home's project city, as data (task 1005054).
+// modules/hall-ui/public/home-city-draw.js — Home's project city, as data (task 1005054;
+// v16, task 1005058).
 //
 // WHAT THIS IS. The drawing half of Home's city (the owner's v14 mock,
 // docs/design/mocks/hall/home/v14.html): one isometric tower per working area,
@@ -9,6 +10,29 @@
 // home-city.js owns the page half (the read, the slider, the ladder's DOM,
 // hover); this file only turns the weekly summary into shapes and rows.
 //
+// v16 (the owner's round of 2026-11-04, docs/design/mocks/hall/home/v16-building.html):
+// ONE city for every craft. The Governor City's nine civic buildings stand at the
+// centre, drawn by city-draw.js itself (GovCity.isoInstitution at GovCity.CIVIC_SLOTS,
+// handed in as opts.gov — never copied), always built: the Cloud Bongos core. The
+// working areas stand on a ring of plots around it, tallest at the back so none hides
+// the core; the art museum and its garden (after the Cleveland Museum of Art) stand on
+// the front edge. On the builder's Home the core and the museum are faded so the new
+// buildings lead (opts.focus names the one district that stays in colour, for the
+// other crafts' Homes). Each district is ONE link: the core opens the street, the
+// museum the artist's Home, the band of stars high above the city the ideator's
+// sky; a working area's building opens its goal. The week may be fractional — the
+// slider glides through the weeks in between, so a building grows smoothly.
+//
+// THE IDEATOR'S SKY (task 1005059, docs/design/mocks/hall/home/v16-ideating.html): the
+// same city seen from the street. skylineOf turns every building citySvg stands — the
+// working areas, the nine civic buildings, the museum — into a silhouette at the SAME
+// left-to-right place (the iso screen x of its footprint) and the same height, drawn
+// back to front so a nearer building covers the one behind it, outline included. Over
+// it skySvg hangs the ideas: a constellation per working area, a field for the ones no
+// area holds yet, size by votes, a salmon ring on what waits on the viewer, a falling
+// star and a lit window for an idea that became work; the moon is the version being
+// built, its phase how far along. Three hit groups lie over the skyline, one door each.
+//
 // PURE. No DOM, no fetch, no clock: the same summary and week give the same
 // shapes, so tests run it in node (the roadmap-timeline.js precedent). The scene
 // comes back as a tree of plain shape objects, never markup (see citySvg).
@@ -21,18 +45,42 @@
   'use strict';
 
   const FOOT = 1.8;          // a tower's footprint, in tiles
-  const PER_ROW = 5;         // towers per row; rows run back (tallest) to front
-  const ROW_GAP = 4.2;       // tiles between rows
-  const COL_GAP = 3.0;       // tiles between towers in a row
-  const MAX_AREAS = 15;      // three rows; the rest are reported, not drawn
-  const TOWER_PX = 170;      // the tallest tower at the latest week
-  const TW = 56, TH = 28;    // iso tile, in viewBox units
+  const GROUND = { w: 16, d: 19.4 };   // the city's ground, in tiles; the garden runs past y 16
+  const CORE = { x0: 4.3, y0: 4.3, x1: 11.7, y1: 11.7 };   // the civic plaza
+  const CIVIC_S = 0.82;      // the civic buildings' height scale (city-draw.js kit units)
+  // The ring of plots around the core: the back edges (y≈0 and x≈0) first, so the tallest
+  // areas stand where they hide nothing, then the sides, then the two front corners.
+  const RING = (function () {
+    const p = [];
+    [0.7, 3.3, 5.9, 8.5, 11.1, 13.7].forEach((x) => p.push([x, 0.7]));
+    [3.3, 5.9, 8.5, 11.1].forEach((y) => { p.push([0.7, y]); p.push([13.7, y]); });
+    p.push([0.7, 13.7], [13.7, 13.7]);
+    return p.sort((a, b) => (a[0] + a[1]) - (b[0] + b[1]) || a[0] - b[0]);
+  })();
+  const MAX_AREAS = RING.length;   // sixteen; the rest are reported, not drawn
+  const TOWER_PX = 150;      // the tallest tower at the latest week
+  const TW = 50, TH = 25;    // iso tile, in viewBox units
+  const SKY_H = 84;          // the band of stars above the city
   const LADDER_ROWS = 7;
+  const SKY = { w: 1000, h: 560 };   // the ideator's sky; the skyline stands on its bottom edge
+  const SKY_SLOTS = [[160, 95], [400, 78], [640, 92], [280, 205], [520, 190], [110, 310], [370, 318], [790, 176], [60, 196], [900, 270]];
+  const LOOSE = { cx: 690, cy: 312, rx: 150, ry: 54 };
+  const MOON = { x: 905, y: 70, r: 28 };
+  // the museum as the skyline sees it: the marble block with its portico, the atrium behind
+  const MUSEUM_SIL = [{ k: 'museum', x0: 4.9, y0: 12.4, x1: 11.1, y1: 13.7, h: 43, portico: true }, { k: 'museum', x0: 5.6, y0: 10.9, x1: 10.4, y1: 12.3, h: 40 }];
 
   const r1 = (n) => Math.round(n * 10) / 10;
   const num = (v) => (Number.isFinite(Number(v)) ? Number(v) : 0);
   const sum = (a) => (Array.isArray(a) ? a.reduce((s, v) => s + num(v), 0) : 0);
 
+  // The sky's own drawing data, as theme() is the city's: night over black, dusk over paper.
+  function skyTheme(mode) {
+    if (mode === 'light') {
+      return { star: '#b8732f', glow: 'rgba(214,140,70,0.28)', line: 'rgba(150,95,40,0.38)', label: 'rgba(23,24,26,0.58)', near: '#b9b6c2', far: '#d4d2dc', civic: '#c9bfb2', win: 'rgba(214,140,70,0.85)', moon: '#3b3f52', shade: '#e8eaf3', streak: 'rgba(214,140,70,0.9)', field: 'rgba(23,24,26,0.2)', beacon: '#fb9569', outline: '#8a5523' };
+    }
+    return { star: '#ffe2c2', glow: 'rgba(255,214,170,0.35)', line: 'rgba(255,214,170,0.32)', label: 'rgba(255,255,255,0.5)', near: '#060609', far: '#14141d', civic: '#0d0c12', win: 'rgba(255,214,160,0.9)', moon: '#f4ead8', shade: '#08080e', streak: 'rgba(255,226,194,0.95)', field: 'rgba(255,255,255,0.18)', beacon: '#fff4e6', outline: '#ffe2c2' };
+  }
+
   function theme(mode) {
     if (mode === 'light') {
       return {
@@ -44,6 +92,10 @@
         ground: 'rgba(23,24,26,0.035)', groundLine: 'rgba(23,24,26,0.08)',
         orb: '#d98a4e', orbGlow: 'rgba(217,138,78,0.30)', ideaLine: 'rgba(217,138,78,0.55)',
         av: '#e4e3e7', avAgent: '#d3d8f2', avInk: '#17181a',
+        star: '#b8732f',
+        marble: { t: '#fbfaf7', l: '#ece9e2', r: '#d8d4cb', s: 'rgba(23,24,26,0.28)' }, granite: { t: '#cfcdd2', l: '#bcbac0', r: '#a9a7ae', s: 'rgba(23,24,26,0.25)' },
+        mglass: { t: 'rgba(91,111,208,0.16)', l: 'rgba(91,111,208,0.22)', r: 'rgba(91,111,208,0.3)', s: 'rgba(60,80,180,0.5)' },
+        grass: '#c9ddbf', grassLine: 'rgba(40,70,40,0.2)', path: '#ece6da', water: '#a9cbe3', tree: ['#8fb27c', '#7aa36b', '#9dbd89'], col: '#ffffff', dark: 'rgba(23,24,26,0.35)',
       };
     }
     return {
@@ -55,6 +107,10 @@
       ground: 'rgba(255,255,255,0.018)', groundLine: 'rgba(255,255,255,0.05)',
       orb: '#ffe2c2', orbGlow: 'rgba(255,214,170,0.35)', ideaLine: 'rgba(255,214,170,0.45)',
       av: '#2c2c32', avAgent: '#2b3157', avInk: '#ffffff',
+      star: '#ffe2c2',
+      marble: { t: '#dcd8d0', l: '#bfbab0', r: '#9f9a90', s: 'rgba(255,255,255,0.22)' }, granite: { t: '#3c3c42', l: '#28282d', r: '#1c1c20', s: 'rgba(255,255,255,0.12)' },
+      mglass: { t: 'rgba(150,170,255,0.24)', l: 'rgba(120,140,230,0.2)', r: 'rgba(100,120,210,0.16)', s: 'rgba(170,190,255,0.45)' },
+      grass: '#273f2d', grassLine: 'rgba(160,220,160,0.10)', path: '#3d3a36', water: '#34577a', tree: ['#4f7a4c', '#43683f', '#5b8656'], col: '#e8e4dc', dark: 'rgba(0,0,0,0.55)',
     };
   }
 
@@ -75,35 +131,42 @@
     all.forEach((a) => { a.total = a.baseBuild + a.baseArt + sum(a.build) + sum(a.art); });
     all.sort((p, q) => q.total - p.total || p.id.localeCompare(q.id));
     const areas = all.slice(0, MAX_AREAS);
-    const rows = Math.max(1, Math.ceil(areas.length / PER_ROW));
-    areas.forEach((a, n) => {
-      const row = Math.floor(n / PER_ROW), col = n % PER_ROW;
-      a.x = 0.8 + col * COL_GAP + (row % 2 ? 1.5 : 0);
-      a.y = 0.8 + row * ROW_GAP;
-    });
+    areas.forEach((a, n) => { a.x = RING[n][0]; a.y = RING[n][1]; });
     const tallest = Math.max(1, ...areas.map((a) => a.total));
     const people = {};
     (Array.isArray(d.people) ? d.people : []).forEach((p) => {
       const row = (k) => Array.from({ length: W }, (_, i) => num(p[k] && p[k][i]));
-      people[String(p.id)] = { id: String(p.id), login: p.login || '', name: p.name || p.login || 'Builder', avatar: p.avatar_url || null, agent: !!p.agent, build: row('build'), art: row('art'), idea: row('idea'), gov: row('gov') };
+      people[String(p.id)] = { id: String(p.id), login: p.login || '', name: p.name || p.login || 'Builder', avatar: p.avatar_url || null, agent: !!p.agent, build: row('build'), art: row('art'), idea: row('idea'), gov: row('gov'), vote: row('vote') };
     });
     const now = d.now || {};
     const sites = {};
     (Array.isArray(now.sites) ? now.sites : []).forEach((s) => { if (s && s.goal_id != null && s.builder_id != null) sites[String(s.goal_id)] = { builder: String(s.builder_id), agent: !!s.agent }; });
     const waiting = {};
     (Array.isArray(now.waiting) ? now.waiting : []).forEach((w) => { if (w && w.goal_id != null && num(w.count) > 0) waiting[String(w.goal_id)] = num(w.count); });
-    const ideas = (Array.isArray(d.ideas) ? d.ideas : []).map((x) => ({ id: String(x.id), week: num(x.week), by: x.by != null ? String(x.by) : null, title: x.title == null ? 'A private idea' : String(x.title), goal: x.goal_id != null ? String(x.goal_id) : null }));
+    const ideas = (Array.isArray(d.ideas) ? d.ideas : []).map((x) => ({
+      id: String(x.id), week: num(x.week), by: x.by != null ? String(x.by) : null, title: x.title == null ? 'A private idea' : String(x.title),
+      goal: x.goal_id != null ? String(x.goal_id) : null,
+      area: x.area_id != null ? String(x.area_id) : (x.goal_id != null ? String(x.goal_id) : null),
+      became: x.became != null && x.goal_id != null && Number.isFinite(Number(x.became)) ? Number(x.became) : null,
+      votes: Math.max(0, num(x.votes)), waits: !!x.waits,
+    }));
+    const v = d.version || null;
+    const version = v ? { name: String(v.name || v.id || 'The version'), tasks: Number.isFinite(Number(v.tasks)) && Number(v.tasks) > 0 ? Number(v.tasks) : null } : null;
     return {
-      weeks, W, areas, rows, unplaced: all.length - areas.length,
-      px: TOWER_PX / tallest, people, sites, waiting, ideas,
-      width: 16.2, depth: rows * ROW_GAP - 0.6,
+      weeks, W, areas, unplaced: all.length - areas.length,
+      px: TOWER_PX / tallest, people, sites, waiting, ideas, version,
+      width: GROUND.w, depth: GROUND.d,
     };
   }
 
-  // What an area has built by the end of week i (the week's own ships included).
+  // What an area has built by the end of week i (the week's own ships included). A
+  // fractional i is part-way into the next week, so the slider's glide grows a tower
+  // smoothly instead of in weekly jumps.
   function doneAt(a, i) {
     let build = a.baseBuild, art = a.baseArt;
-    for (let w = 0; w <= i && w < a.build.length; w++) { build += a.build[w]; art += a.art[w]; }
+    const whole = Math.floor(i), f = i - whole;
+    for (let w = 0; w <= whole && w < a.build.length; w++) { build += a.build[w]; art += a.art[w]; }
+    if (f > 0 && whole + 1 < a.build.length) { build += a.build[whole + 1] * f; art += a.art[whole + 1] * f; }
     return { build, art };
   }
 
@@ -124,10 +187,14 @@
 
   // The ladder for week i: builders by what they did that week, the top seven,
   // and the viewer appended when they fall below (a phone leaderboard's "you").
-  function ladderFor(m, i, viewerId) {
+  // On the ideator's Home (craft 'ideating') the line is the ideator's week instead:
+  // ideas filed, votes cast, and ideas of theirs that became work that week.
+  function ladderFor(m, i, viewerId, craft) {
     const rows = Object.values(m.people).map((p) => {
-      const v = { art: p.art[i] || 0, build: p.build[i] || 0, idea: p.idea[i] || 0, gov: p.gov[i] || 0 };
-      return { id: p.id, name: p.name, avatar: p.avatar, agent: p.agent, me: viewerId != null && p.id === String(viewerId), v, total: v.art + v.build + v.idea + v.gov };
+      const v = craft === 'ideating'
+        ? { idea: p.idea[i] || 0, vote: (p.vote && p.vote[i]) || 0, work: m.ideas.filter((x) => x.by === p.id && x.became === i).length }
+        : { art: p.art[i] || 0, build: p.build[i] || 0, idea: p.idea[i] || 0, gov: p.gov[i] || 0 };
+      return { id: p.id, name: p.name, avatar: p.avatar, agent: p.agent, me: viewerId != null && p.id === String(viewerId), v, total: Object.values(v).reduce((a, b) => a + b, 0) };
     }).filter((r) => r.total > 0 || r.me)
       .sort((p, q) => q.total - p.total || p.name.localeCompare(q.name));
     const top = rows.slice(0, LADDER_ROWS);
@@ -139,7 +206,7 @@
   // The scene's viewBox for a model: the ground and the tallest tower plus room
   // for its crane and face, trimmed so no empty sky stands above it.
   function viewBoxOf(m) {
-    const OY = TOWER_PX + 110, h = OY + (m.width + m.depth) * TH / 2 + 24;
+    const OY = SKY_H + TOWER_PX + 100, h = OY + (m.width + m.depth) * TH / 2 + 16;
     return { w: 1000, h: Math.round(h), OX: 500 - (m.width - m.depth) * TW / 4, OY };
   }
 
@@ -148,36 +215,57 @@
   // setAttribute (city-draw.js's split exactly — "city.js only turns the lists into
   // SVG nodes"). So no ledger string is ever parsed as markup: a title is an
   // attribute value or a text node, which is also why this file needs no escaper.
-  function citySvg(m, i, opts) {
+  function citySvg(m, t, opts) {
     const o = opts || {};
     const I = theme(o.mode);
+    const Gov = o.gov || null;
     const vb = viewBoxOf(m);
-    const latest = i === m.W - 1;
+    const i = Math.max(0, Math.min(m.W - 1, Math.floor(t + 1e-6)));
+    const latest = t >= m.W - 1 - 1e-3;
     const P = (x, y, z) => [vb.OX + (x - y) * TW / 2, vb.OY + (x + y) * TH / 2 - (z || 0)];
     const pts = (a) => 'M' + a.map((p) => r1(p[0]) + ' ' + r1(p[1])).join('L') + 'Z';
     const node = (tag, attrs, kids, text) => ({ tag, attrs: attrs || {}, kids: kids || [], text: text == null ? null : String(text) });
     const face = (a, fill, stroke) => node('path', { d: pts(a), fill, stroke: stroke || 'none', 'stroke-width': 1, 'stroke-linejoin': 'round', class: 'hc-face' });
     const line = (a, b, s, w, dash) => node('line', Object.assign({ x1: r1(a[0]), y1: r1(a[1]), x2: r1(b[0]), y2: r1(b[1]), stroke: s, 'stroke-width': w || 1, 'stroke-linecap': 'round' }, dash ? { 'stroke-dasharray': dash } : {}));
     const circle = (cx, cy, r, attrs) => node('circle', Object.assign({ cx: r1(cx), cy: r1(cy), r }, attrs));
-    const box = (x0, y0, x1, y1, z0, h, t) => {
+    const box = (x0, y0, x1, y1, z0, h, tn) => {
       const z1 = z0 + h;
       return [
-        face([P(x0, y1, z1), P(x1, y1, z1), P(x1, y1, z0), P(x0, y1, z0)], t.l, t.s),
-        face([P(x1, y1, z1), P(x1, y0, z1), P(x1, y0, z0), P(x1, y1, z0)], t.r, t.s),
-        face([P(x0, y0, z1), P(x1, y0, z1), P(x1, y1, z1), P(x0, y1, z1)], t.t, t.s),
+        face([P(x0, y1, z1), P(x1, y1, z1), P(x1, y1, z0), P(x0, y1, z0)], tn.l, tn.s),
+        face([P(x1, y1, z1), P(x1, y0, z1), P(x1, y0, z0), P(x1, y1, z0)], tn.r, tn.s),
+        face([P(x0, y0, z1), P(x1, y0, z1), P(x1, y1, z1), P(x0, y1, z1)], tn.t, tn.s),
       ];
     };
+    const quiet = (key) => (o.focus === key ? '' : ' hc-quiet');
 
     const out = [
       node('defs', {}, [node('radialGradient', { id: 'hc-orb' }, [node('stop', { offset: 0, 'stop-color': I.orbGlow }), node('stop', { offset: 1, 'stop-color': 'transparent' })])]),
       face([P(0, 0), P(m.width, 0), P(m.width, m.depth), P(0, m.depth)], I.ground, I.groundLine),
     ];
 
+    // the ideas: a thin band of stars high above the city, apart from it — one door to the sky
+    const seen = m.ideas.filter((x) => x.week <= i);
+    const fresh = m.ideas.filter((x) => x.week === i).length;
+    const band = [node('rect', { x: 60, y: 8, width: 880, height: SKY_H - 16, fill: 'transparent' })];
+    seen.forEach((x) => {
+      const h = hash(x.id), recent = i - x.week <= 1;
+      band.push(circle(80 + (h % 1000) / 1000 * 840, 14 + (Math.floor(h / 1000) % 1000) / 1000 * (SKY_H - 34), recent ? 1.7 : 1.1, Object.assign({ fill: I.star, opacity: recent ? 0.75 : 0.28 }, x.week === i ? { class: 'hc-twinkle' } : {})));
+    });
+    out.push(node('a', { href: '/', class: 'hc-door hc-sky', 'data-craft-door': 'ideating', 'aria-label': `The ideas: ${fresh} new this week. Open the sky.`, 'data-tip': 'Ideas', 'data-tip-body': `${fresh} new this week. Click to look up at the sky.` }, band));
+
+    // every building on the ground, back to front; the civic core draws as one district
+    const items = m.areas.map((a) => ({ k: 'area', a, depth: a.x + a.y + FOOT }));
+    if (Gov) items.push({ k: 'core', depth: CORE.x0 + CORE.y0 + 1 });
+    items.push({ k: 'museum', depth: 15.8 });
+    items.sort((p, q) => p.depth - q.depth);
+
     const sites = sitesFor(m, i);
     const tops = {}, over = [];
-    m.areas.slice().sort((p, q) => (p.x + p.y) - (q.x + q.y)).forEach((a) => {
-      const x0 = a.x, y0 = a.y, x1 = x0 + FOOT, y1 = y0 + FOOT, base = 4;
-      const d = doneAt(a, i), built = Math.max(2, (d.build + d.art) * m.px), clad = d.art * m.px;
+    items.forEach((it) => {
+      if (it.k === 'core') { out.push(coreNode()); return; }
+      if (it.k === 'museum') { out.push(museumNode()); return; }
+      const a = it.a, x0 = a.x, y0 = a.y, x1 = x0 + FOOT, y1 = y0 + FOOT, base = 4;
+      const d = doneAt(a, t), built = Math.max(2, (d.build + d.art) * m.px), clad = d.art * m.px;
       const site = sites[a.id], who = site ? m.people[site.builder] : null, agent = !!(site && (site.agent || (who && who.agent)));
       const wait = latest ? (m.waiting[a.id] || 0) : 0;
       const g = [];
@@ -215,24 +303,9 @@
         if (who) over.push({ k: 'face', p: P(mx + 0.9, my, ct + 30), who, agent, a });
       }
       if (wait) over.push({ k: 'dot', p: P((x0 + x1) / 2, (y0 + y1) / 2, top + (site ? 12 : 22)), a, n: wait });
-      const tip = `${d.build + d.art} shipped${d.art ? ` · ${d.art} by artists` : ''}${who ? ` · ${agent ? `${who.name}'s agent` : who.name} on site` : ''}`;
-      out.push(node('g', { class: 'hc-tower', 'data-tip': a.title, 'data-tip-body': tip }, g));
-    });
-
-    // the sky: the week's ideas bright, the week before dim; one that became work
-    // drops a line to the tower it went into
-    m.ideas.forEach((x) => {
-      const age = i - x.week;
-      if (age < 0 || age > 1) return;
-      const h = hash(x.id), bright = age === 0;
-      const cx = vb.OX + 40 + (h % 1000) / 1000 * 300, cy = 40 + (Math.floor(h / 1000) % 1000) / 1000 * 150;
-      const by = x.by && m.people[x.by] ? m.people[x.by].name : '';
-      const g = [];
-      if (bright && x.goal && tops[x.goal]) g.push(line([cx, cy], tops[x.goal], I.ideaLine, 1, '2 4'));
-      g.push(circle(cx, cy, bright ? 14 : 9, Object.assign({ fill: 'url(#hc-orb)' }, bright ? { class: 'hc-orb' } : {})));
-      g.push(circle(cx, cy, bright ? 4 : 2.6, Object.assign({ fill: I.orb }, bright ? {} : { opacity: 0.45 })));
-      g.push(circle(cx, cy, 12, { fill: 'transparent' }));
-      out.push(node('g', { class: 'hc-idea', 'data-tip': x.title, 'data-tip-body': by ? `idea · ${by}` : 'idea' }, g));
+      const shipped = Math.round(d.build + d.art), byArt = Math.round(d.art);
+      const tip = `${shipped} shipped${byArt ? ` · ${byArt} by artists` : ''}${who ? ` · ${agent ? `${who.name}'s agent` : who.name} on site` : ''} · click to open the goal`;
+      out.push(node('a', { href: `/goals#/goal/${encodeURIComponent(a.id)}`, class: 'hc-tower', 'aria-label': `${a.title}: ${shipped} shipped. Open the goal.`, 'data-tip': a.title, 'data-tip-body': tip }, g));
     });
 
     over.forEach((v, n) => {
@@ -244,6 +317,241 @@
       ]));
     });
     return { viewBox: `0 0 ${vb.w} ${vb.h}`, nodes: out };
+
+    // The government district: the plaza and the nine civic buildings, drawn by
+    // city-draw.js's own recipes in its own palette — one hover, one door, to the street.
+    function coreNode() {
+      const CI = Gov.isoTheme(o.mode === 'light' ? 'light' : 'dark');
+      const k = Gov.isoKit(TW, TH, vb.OX, vb.OY, CIVIC_S, CI, o.mode !== 'light');
+      const kids = [face([P(CORE.x0, CORE.y0), P(CORE.x1, CORE.y0), P(CORE.x1, CORE.y1), P(CORE.x0, CORE.y1)], CI.plaza, CI.plazaLine)];
+      Gov.CIVIC_SLOTS.slice().sort((p, q) => (p[1] + p[2]) - (q[1] + q[2])).forEach((sl) => {
+        const list = [];
+        Gov.isoInstitution(list, k, sl[0], sl[1] - 0.6, sl[2] - 0.6, {});
+        list.forEach((pa) => kids.push(node('path', { d: pa.d, fill: pa.f, stroke: pa.s, 'stroke-width': pa.w, 'stroke-dasharray': pa.dash, 'stroke-linejoin': 'round', class: 'hc-face' })));
+      });
+      return node('a', { href: Gov.STREET_HREF || '/street', class: 'hc-door hc-core' + quiet('core'), 'aria-label': 'The government district: nine buildings, one for each part of the government. Walk the street.', 'data-tip': 'Government', 'data-tip-body': 'The Cloud Bongos core: nine buildings, one for each part of the government. Click to walk the street.' }, kids);
+    }
+
+    // The art museum and its garden, after the Cleveland Museum of Art: a long white
+    // marble block with a columned portico and wide steps facing the park, the glass
+    // atrium between two dark granite wings behind it, and in front the Fine Arts
+    // Garden — a fountain on the axis, the lagoon beyond, trees down both sides.
+    function museumNode() {
+      const g = [];
+      g.push(face([P(3.4, 15.0), P(12.6, 15.0), P(12.6, 19.2), P(3.4, 19.2)], I.grass, I.grassLine));
+      g.push(face([P(7.75, 14.9), P(8.25, 14.9), P(8.25, 19.2), P(7.75, 19.2)], I.path));
+      g.push(face([P(3.4, 15.9), P(12.6, 15.9), P(12.6, 16.25), P(3.4, 16.25)], I.path));
+      const lc = P(8, 17.9, 0);
+      g.push(node('ellipse', { cx: r1(lc[0]), cy: r1(lc[1]), rx: 75, ry: 16, fill: I.water, transform: `rotate(26.57 ${r1(lc[0])} ${r1(lc[1])})` }));
+      const fc = P(8, 16.07, 0);
+      g.push(node('ellipse', { cx: r1(fc[0]), cy: r1(fc[1]), rx: 11, ry: 5.5, fill: I.water }));
+      g.push(...box(4.6, 12.3, 11.4, 14.0, 0, 6, I.marble));
+      g.push(...box(5.6, 10.9, 10.4, 12.3, 0, 30, I.granite));
+      g.push(...box(6.2, 11.2, 9.8, 12.3, 30, 10, I.mglass));
+      g.push(...box(5.0, 12.5, 11.0, 13.6, 6, 34, I.marble));
+      for (let z = 14; z < 38; z += 9) g.push(face([P(5.25, 13.6, z), P(10.75, 13.6, z), P(10.75, 13.6, z + 0.8), P(5.25, 13.6, z + 0.8)], I.dark));
+      for (let wx = 5.45; wx < 10.7; wx += 0.62) if (wx < 7.1 || wx > 8.9) g.push(face([P(wx, 13.6, 16), P(wx + 0.22, 13.6, 16), P(wx + 0.22, 13.6, 30), P(wx, 13.6, 30)], I.dark));
+      g.push(...box(4.9, 12.4, 11.1, 13.7, 40, 3, I.marble));
+      for (let st = 0; st < 4; st++) g.push(...box(6.7 - st * 0.08, 13.6 + st * 0.3, 9.3 + st * 0.08, 13.9 + st * 0.3, 0, 6 - st * 1.5, I.marble));
+      g.push(...box(7.0, 13.6, 9.0, 14.05, 37, 6, I.marble));
+      for (let c = 0; c < 6; c++) {
+        const cx = 7.15 + c * 0.34, a = P(cx, 13.98, 6), b = P(cx, 13.98, 37);
+        g.push(line(a, b, I.col, 3.2), line([a[0] + 1.2, a[1]], [b[0] + 1.2, b[1]], I.dark, 0.8));
+      }
+      g.push(face([P(7.25, 13.62, 8), P(8.75, 13.62, 8), P(8.75, 13.62, 30), P(7.25, 13.62, 30)], I.dark));
+      [[3.9, 15.4], [4.6, 15.5], [11.4, 15.4], [12.1, 15.5], [3.8, 16.9], [12.2, 16.8], [4.2, 18.6], [11.8, 18.5], [5.1, 19.0], [10.9, 19.0], [3.9, 17.8], [12.1, 17.7]].forEach((tr, n) => {
+        const p = P(tr[0], tr[1], 0);
+        g.push(line(p, [p[0], p[1] - 9], I.dark, 1.6), circle(p[0], p[1] - 16, 8.5 + (n % 3) * 1.5, { fill: I.tree[n % 3] }));
+      });
+      return node('a', { href: '/', class: 'hc-door hc-museum' + quiet('museum'), 'data-craft-door': 'artistry', 'aria-label': 'The art museum, where the artists’ works hang. Go in.', 'data-tip': 'The art museum', 'data-tip-body': 'The art district: where the artists’ works hang, beside the park. Click to go in.' }, g);
+    }
+  }
+
+  // ---- the ideator's sky ----
+
+  // The skyline: every building of the city as seen from the street, back to front.
+  // A box from (x0,y0) to (x1,y1) spans screen x P(x0,y1) to P(x1,y0) in citySvg's own
+  // frame (viewBoxOf's OX), so a silhouette stands exactly where its building does.
+  // Heights are the city's: a tower its plinth plus what it has built by week t, a civic
+  // building city-draw.js's ROOF at the core's scale, the museum its marble and atrium.
+  function skylineOf(m, t, gov) {
+    const OX = viewBoxOf(m).OX;
+    const sx = (x, y) => OX + (x - y) * TW / 2;
+    const sil = [];
+    m.areas.forEach((a) => {
+      const d = doneAt(a, t);
+      sil.push({ k: 'area', id: a.id, title: a.title, l: sx(a.x, a.y + FOOT), r: sx(a.x + FOOT, a.y), h: 4 + Math.max(2, (d.build + d.art) * m.px), depth: a.x + a.y + FOOT });
+    });
+    if (gov && Array.isArray(gov.CIVIC_SLOTS) && gov.ROOF) {
+      gov.CIVIC_SLOTS.forEach((s) => {
+        const x = s[1] - 0.6, y = s[2] - 0.6;
+        sil.push({ k: 'civic', id: s[0], l: sx(x + 0.3, y + 1.7), r: sx(x + 1.7, y + 0.3), h: num(gov.ROOF[s[0]]) * CIVIC_S, depth: x + y + 2, charter: s[0] === 'charter' });
+      });
+    }
+    MUSEUM_SIL.forEach((b) => sil.push({ k: 'museum', id: b.portico ? 'museum' : 'atrium', l: sx(b.x0, b.y1), r: sx(b.x1, b.y0), h: b.h, depth: b.x1 + b.y1, portico: !!b.portico }));
+    return sil.sort((p, q) => p.depth - q.depth || p.l - q.l);
+  }
+
+  // The ideas placed in the sky: a constellation per working area that has any (the
+  // most ideas first, up to the slots), the rest of the sky's ideas in the loose field.
+  function skyPlaces(m) {
+    const count = {};
+    m.ideas.forEach((x) => { if (x.area) count[x.area] = (count[x.area] || 0) + 1; });
+    const byId = new Map(m.areas.map((a) => [a.id, a]));
+    const groups = Object.keys(count).filter((id) => byId.has(id))
+      .sort((p, q) => count[q] - count[p] || p.localeCompare(q)).slice(0, SKY_SLOTS.length)
+      .map((id, n) => ({ area: byId.get(id), cx: SKY_SLOTS[n][0], cy: SKY_SLOTS[n][1] }));
+    const slot = new Map(groups.map((g) => [g.area.id, g]));
+    const spread = groups.length > 6 ? 0.75 : 1;
+    const at = new Map();
+    m.ideas.forEach((x) => {
+      const h = hash(x.id), a = (h % 1000) / 1000 * Math.PI * 2, f = (Math.floor(h / 1000) % 1000) / 1000;
+      const g = x.area ? slot.get(x.area) : null;
+      if (g) { const r = (20 + f * 56) * spread; at.set(x.id, { x: g.cx + Math.cos(a) * r * 1.4, y: g.cy + Math.sin(a) * r * 0.7, g, a }); }
+      else { const r = Math.sqrt(f); at.set(x.id, { x: LOOSE.cx + Math.cos(a) * r * LOOSE.rx * 0.9, y: LOOSE.cy + Math.sin(a) * r * LOOSE.ry * 0.8, g: null, a }); }
+    });
+    return { groups, at };
+  }
+
+  // How far along the version is by week t: what its areas have shipped over every task
+  // under them. Null when the server could not say how many tasks there are.
+  function versionBuilt(m, t) {
+    if (!m.version || !m.version.tasks) return null;
+    const done = m.areas.reduce((s, a) => { const d = doneAt(a, t); return s + d.build + d.art; }, 0);
+    return Math.max(0, Math.min(1, done / m.version.tasks));
+  }
+
+  // The sky for week t as shapes (citySvg's contract: a tree of plain nodes, never markup).
+  function skySvg(m, t, opts) {
+    const o = opts || {};
+    const C = skyTheme(o.mode);
+    const Gov = o.gov || null;
+    const i = Math.max(0, Math.min(m.W - 1, Math.floor(t + 1e-6)));
+    const latest = t >= m.W - 1 - 1e-3;
+    const HOR = SKY.h;
+    const node = (tag, attrs, kids, text) => ({ tag, attrs: attrs || {}, kids: kids || [], text: text == null ? null : String(text) });
+    const circle = (cx, cy, r, attrs) => node('circle', Object.assign({ cx: r1(cx), cy: r1(cy), r: r1(r) }, attrs));
+    const label = (x, y, s) => node('text', { x: r1(x), y: r1(y), 'text-anchor': 'middle', fill: C.label, class: 'hc-sky__label' }, [], s);
+    const when = i === m.W - 1 ? 'this week' : 'that week';
+    const out = [node('defs', {}, [
+      node('radialGradient', { id: 'hc-sky-orb' }, [node('stop', { offset: 0, 'stop-color': C.glow }), node('stop', { offset: 1, 'stop-color': 'transparent' })]),
+      node('linearGradient', { id: 'hc-sky-tail', x1: 0, y1: 0, x2: 1, y2: 1 }, [node('stop', { offset: 0, 'stop-color': C.streak, 'stop-opacity': 0 }), node('stop', { offset: 1, 'stop-color': C.streak })]),
+    ])];
+
+    // the dust: the same faint field every week
+    for (let n = 0; n < 90; n++) { const h = hash('dust' + n); out.push(circle((h % 1000) / 1000 * SKY.w, (Math.floor(h / 1000) % 1000) / 1000 * (HOR - 170), (h % 7) ? 0.7 : 1.1, { fill: C.star, opacity: 0.18 })); }
+
+    // the moon: the version being built, its phase how far along
+    const built = versionBuilt(m, t);
+    if (m.version) {
+      const mk = [circle(MOON.x, MOON.y, MOON.r + 26, { fill: 'url(#hc-sky-orb)' }), circle(MOON.x, MOON.y, MOON.r, { fill: C.moon })];
+      if (built != null) mk.push(circle(MOON.x + MOON.r * 2 * built, MOON.y - 2, MOON.r, { fill: C.shade, opacity: 0.94 }));
+      out.push(node('g', { class: 'hc-moon', 'data-tip': `${m.version.name} — the version being built`, 'data-tip-body': built == null ? 'Its building has begun.' : `${Math.round(built * 100)}% built ${when}` }, mk));
+    }
+
+    // THE SKYLINE IS THE CITY: each silhouette's fill then its outline, back to front, so a
+    // nearer building covers the outline of the one behind it.
+    const sil = skylineOf(m, t, Gov);
+    const shape = (s, y) => {
+      if (s.charter) {
+        const w = s.r - s.l, h = HOR - y, at = (f) => r1(HOR - h * f);
+        return `M${r1(s.l)} ${HOR}V${at(0.33)}H${r1(s.l + w * 0.1)}V${at(0.58)}H${r1(s.l + w * 0.22)}V${at(0.8)}H${r1(s.l + w * 0.35)}V${r1(y)}H${r1(s.r - w * 0.35)}V${at(0.8)}H${r1(s.r - w * 0.22)}V${at(0.58)}H${r1(s.r - w * 0.1)}V${at(0.33)}H${r1(s.r)}V${HOR}Z`;
+      }
+      if (s.portico) { const pm = (s.l + s.r) / 2; return `M${r1(s.l)} ${HOR}V${r1(y)}H${r1(pm - 28)}V${r1(y - 4)}H${r1(pm + 28)}V${r1(y)}H${r1(s.r)}V${HOR}Z`; }
+      return `M${r1(s.l)} ${HOR}V${r1(y)}H${r1(s.r)}V${HOR}Z`;
+    };
+    const maxD = Math.max(1, ...sil.map((s) => s.depth));
+    const fills = [], hits = [], tops = {};
+    sil.forEach((s) => {
+      const y = HOR - s.h, d = shape(s, y);
+      const fill = s.k === 'area' ? (s.depth / maxD < 0.5 ? C.far : C.near) : C.civic;
+      fills.push(node('path', { d, fill, class: 'hc-sil' }));
+      fills.push(node('path', { d, fill: 'none', stroke: C.outline, 'stroke-width': 1.4, 'stroke-linejoin': 'round', class: `hc-ol hc-ol-${s.k}` }));
+      if (s.k === 'civic' && (s.id === 'charter' || s.id === 'automation' || s.id === 'release')) fills.push(circle((s.l + s.r) / 2, y - 4, 2.4, { fill: C.beacon }));
+      if (s.k === 'area') tops[s.id] = { s, y };
+      // the hit floor: a low silhouette still offers a band tall enough to point at
+      hits.push({ s, d: shape(s, Math.min(y, HOR - 30)) });
+    });
+    out.push(node('g', { class: 'hc-skyline' }, fills));
+
+    // a window lights in a working area for every one of its ideas that became work
+    const wins = [];
+    Object.values(tops).forEach(({ s, y }) => {
+      const lit = m.ideas.filter((x) => x.goal === s.id && x.became != null && x.became <= i).length;
+      const cols = Math.max(1, Math.floor((s.r - s.l - 8) / 9)), rows = Math.max(0, Math.floor((s.h - 14) / 12));
+      for (let q = 0; q < Math.min(lit, cols * rows); q++) wins.push(node('rect', { x: r1(s.l + 6 + (q % cols) * 9), y: r1(y + 8 + Math.floor(q / cols) * 12), width: 4.5, height: 6.5, fill: C.win }));
+    });
+    if (wins.length) out.push(node('g', { class: 'hc-wins', 'aria-hidden': 'true' }, wins));
+
+    // the three doors over the skyline: one link per silhouette, back to front like the
+    // fills, so the nearest building takes the pointer; hovering any of a group outlines
+    // the whole group (home-city.css). One stop per group on the keyboard.
+    const DOORS = {
+      area: { href: '/goals', tip: 'Building', body: 'Every goal building in the city. Click to open the goals.', aria: 'The goal buildings. Open the goals.' },
+      civic: { href: (Gov && Gov.STREET_HREF) || '/builders/street', tip: 'Government', body: 'The Cloud Bongos core. Click to walk the street.', aria: 'The government district. Walk the street.' },
+      museum: { href: '/', door: 'artistry', tip: 'Art', body: 'The art museum. Click to go into the gallery.', aria: 'The art museum. Go into the gallery.' },
+    };
+    const first = {};
+    out.push(node('g', { class: 'hc-hits' }, hits.map(({ s, d }) => {
+      const D = DOORS[s.k], lead = !first[s.k];
+      first[s.k] = true;
+      const attrs = { href: D.href, class: 'hc-hit', 'data-group': s.k, 'data-tip': D.tip, 'data-tip-body': D.body };
+      if (D.door) attrs['data-craft-door'] = D.door;
+      if (lead) attrs['aria-label'] = D.aria; else { attrs.tabindex = '-1'; attrs['aria-hidden'] = 'true'; }
+      return node('a', attrs, [node('path', { d, fill: 'transparent' })]);
+    })));
+
+    // the ideas: what was filed by week t and has not yet fallen into its tower
+    const { groups, at } = skyPlaces(m);
+    const live = m.ideas.filter((x) => x.week <= i && !(x.became != null && x.became < i));
+    groups.forEach((g) => {
+      const stars = live.filter((x) => at.get(x.id).g === g).sort((p, q) => at.get(p.id).a - at.get(q.id).a);
+      if (!stars.length) return;
+      const kids = [];
+      for (let q = 1; q < stars.length; q++) { const a = at.get(stars[q - 1].id), b = at.get(stars[q].id); kids.push(node('line', { x1: r1(a.x), y1: r1(a.y), x2: r1(b.x), y2: r1(b.y), stroke: C.line, 'stroke-width': 0.9 })); }
+      const top = Math.min(...stars.map((x) => at.get(x.id).y));
+      const name = g.area.title.length > 30 ? g.area.title.slice(0, 29) + '…' : g.area.title;
+      kids.push(label(g.cx, Math.max(14, Math.min(top, g.cy - 30) - 12), name.toUpperCase()));
+      out.push(node('g', { class: 'hc-const', 'data-tip': g.area.title, 'data-tip-body': `${stars.length} idea${stars.length === 1 ? '' : 's'} in this constellation` }, kids));
+    });
+    const loose = live.filter((x) => !at.get(x.id).g);
+    if (loose.length) {
+      out.push(node('g', { class: 'hc-loose', 'data-tip': 'Not placed yet', 'data-tip-body': `${loose.length} idea${loose.length === 1 ? '' : 's'} no working area holds yet` }, [
+        node('ellipse', { cx: LOOSE.cx, cy: LOOSE.cy, rx: LOOSE.rx, ry: LOOSE.ry, fill: 'none', stroke: C.field, 'stroke-dasharray': '2 6' }),
+        label(LOOSE.cx, LOOSE.cy - LOOSE.ry - 10, 'NOT PLACED YET'),
+      ]));
+    }
+    // a falling star: an idea that became work this week drops into its area's tower
+    m.ideas.forEach((x) => {
+      if (x.became !== i || !tops[x.goal]) return;
+      const p = at.get(x.id), tw = tops[x.goal], tx = tw.s.l + 14, ty = tw.y - 4;
+      out.push(node('g', { class: 'hc-fall', 'data-tip': x.title, 'data-tip-body': `became work ${when} · ${tw.s.title}` }, [
+        node('path', { d: `M${r1(p.x)} ${r1(p.y)}Q${r1((p.x + tx) / 2 + 40)} ${r1(p.y + 20)} ${r1(tx)} ${r1(ty)}`, fill: 'none', stroke: 'url(#hc-sky-tail)', 'stroke-width': 1.6, 'stroke-dasharray': '3 4' }),
+        circle(tx, ty, 3, { fill: C.streak }),
+      ]));
+    });
+    let waiting = 0;
+    const areaName = new Map(m.areas.map((a) => [a.id, a.title]));
+    live.forEach((x) => {
+      const p = at.get(x.id), fresh = x.week === i, size = 1.6 + Math.min(12, x.votes) * 0.32, ring = latest && x.waits;
+      const who = x.by && m.people[x.by] ? m.people[x.by].name : 'Someone';
+      const where = p.g ? areaName.get(x.area) : 'not placed yet';
+      const kids = [
+        circle(p.x, p.y, size * 4, Object.assign({ fill: 'url(#hc-sky-orb)' }, fresh ? { class: 'hc-twinkle' } : {})),
+        circle(p.x, p.y, size, { fill: C.star, opacity: fresh ? 1 : r1(0.55 + Math.min(0.4, x.votes / 20)) }),
+      ];
+      if (ring) { waiting++; kids.push(circle(p.x, p.y, size + 5, { fill: 'none', stroke: 'var(--accent)', 'stroke-width': 1.6, class: 'hc-ring' })); }
+      kids.push(circle(p.x, p.y, 12, { fill: 'transparent' }));
+      out.push(node('g', { class: 'hc-star', 'data-tip': x.title, 'data-tip-body': `${who} · ${x.votes} vote${x.votes === 1 ? '' : 's'} · ${where}${ring ? ' · waits on you' : ''}` }, kids));
+    });
+    if (waiting) {
+      const bx = LOOSE.cx + LOOSE.rx - 6, by = LOOSE.cy - LOOSE.ry + 8;
+      out.push(node('g', { class: 'hc-wait', 'data-tip': 'Waiting on you', 'data-tip-body': `${waiting} new idea${waiting === 1 ? '' : 's'} to place or vote on — the ringed stars` }, [
+        circle(bx, by, 11, { fill: 'var(--accent)', stroke: 'var(--bg-card)', 'stroke-width': 2.5 }),
+        node('text', { x: r1(bx), y: r1(by + 4), 'text-anchor': 'middle', class: 'hc-wait__n' }, [], waiting),
+      ]));
+    }
+    return { viewBox: `0 0 ${SKY.w} ${SKY.h}`, nodes: out };
   }
 
   // A face over a crane: the builder's avatar clipped to a circle over their
@@ -269,7 +577,7 @@
   // a stable spread for an idea's place in the sky (FNV-1a over its id)
   function hash(s) { let h = 2166136261; for (const c of String(s)) { h ^= c.charCodeAt(0); h = Math.imul(h, 16777619); } return Math.abs(h); }
 
-  const api = { cityModel, doneAt, sitesFor, ladderFor, citySvg, viewBoxOf, theme, initial, LADDER_ROWS, MAX_AREAS };
+  const api = { cityModel, doneAt, sitesFor, ladderFor, citySvg, viewBoxOf, theme, initial, LADDER_ROWS, MAX_AREAS, RING, CORE, skySvg, skylineOf, skyPlaces, versionBuilt, skyTheme, SKY };
   if (typeof module === 'object' && module.exports) module.exports = api;
   if (root) root.OTBHomeCityDraw = api;
 })(typeof window !== 'undefined' ? window : null);