@bongos/core 1.24.29 → 1.24.31

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

@@ -0,0 +1,583 @@
+// 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,
+// as tall as what has shipped there; artist work clads it in glass; the sites
+// worked in a week carry a crane and the face of who built there; that week's
+// ideas are lights in the sky; a salmon dot marks where something waits on the
+// viewer. Beside it, the ladder: each builder's week as one line split by craft.
+// 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).
+//
+// THE PALETTE is the city's own drawing data (city-draw.js isoTheme, trimmed to
+// what this scene spends: the dark blocks in the black, the white paper model in
+// light). Everything around the drawing takes the hall's tokens; salmon
+// (var(--accent)) is spent only on what waits on the viewer.
+(function (root) {
+  'use strict';
+
+  const FOOT = 1.8;          // a tower's footprint, in tiles
+  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 {
+        work: { t: '#f6f5f8', l: '#e6e5e9', r: '#d2d1d6', s: 'rgba(23,24,26,0.22)' },
+        plinth: { t: '#efeef1', l: '#e2e1e5', r: '#cfced3', s: 'rgba(23,24,26,0.22)' },
+        glassL: 'rgba(91,111,208,0.30)', glassR: 'rgba(91,111,208,0.42)', glassT: 'rgba(91,111,208,0.22)',
+        floor: 'rgba(23,24,26,0.10)', steel: 'rgba(23,24,26,0.62)', scaffold: 'rgba(23,24,26,0.40)', lit: 'rgba(226,150,90,0.55)',
+        slab: { t: '#d9d8dd', l: '#c4c3c9', r: '#b2b1b8', s: 'rgba(23,24,26,0.4)' },
+        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 {
+      work: { t: '#34343a', l: '#1c1c20', r: '#111114', s: 'rgba(255,255,255,0.12)' },
+      plinth: { t: '#27272c', l: '#141417', r: '#0b0b0d', s: 'rgba(255,255,255,0.08)' },
+      glassL: 'rgba(110,130,230,0.30)', glassR: 'rgba(110,130,230,0.20)', glassT: 'rgba(150,170,255,0.30)',
+      floor: 'rgba(255,255,255,0.06)', steel: 'rgba(255,255,255,0.70)', scaffold: 'rgba(255,255,255,0.40)', lit: 'rgba(255,200,150,0.55)',
+      slab: { t: '#5a5a62', l: '#3a3a40', r: '#2a2a2f', s: 'rgba(255,255,255,0.2)' },
+      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)',
+    };
+  }
+
+  // The summary as the drawing needs it: areas placed on the ground (tallest at
+  // the back), one shared height scale, people by id. A summary the server could
+  // not fill (no version being built, no areas) gives a model with no areas and
+  // the page renders nothing rather than an empty plate.
+  function cityModel(data) {
+    const d = data || {};
+    const weeks = Array.isArray(d.weeks) ? d.weeks : [];
+    const W = weeks.length;
+    const all = (Array.isArray(d.areas) ? d.areas : []).map((a) => {
+      const build = Array.from({ length: W }, (_, i) => num(a.build && a.build[i]));
+      const art = Array.from({ length: W }, (_, i) => num(a.art && a.art[i]));
+      const lead = Array.from({ length: W }, (_, i) => (a.lead && a.lead[i] != null ? String(a.lead[i]) : null));
+      return { id: String(a.goal_id), title: a.title == null ? 'A private area' : String(a.title), baseBuild: num(a.base_build), baseArt: num(a.base_art), build, art, lead };
+    });
+    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);
+    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'), 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,
+      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, 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). 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;
+    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 };
+  }
+
+  // The sites worked in week i, goal → { builder, agent }: the latest week shows
+  // who is on each site now (open claims; an Autobongos runner working one makes it
+  // an agent's site); an earlier week shows its four busiest areas and the builder
+  // who shipped most there.
+  function sitesFor(m, i) {
+    if (i === m.W - 1 && Object.keys(m.sites).length) return Object.assign({}, m.sites);
+    const out = {};
+    m.areas.map((a) => ({ a, n: a.build[i] + a.art[i] }))
+      .filter((x) => x.n > 0 && x.a.lead[i])
+      .sort((p, q) => q.n - p.n || p.a.id.localeCompare(q.a.id))
+      .slice(0, 4)
+      .forEach((x) => { out[x.a.id] = { builder: x.a.lead[i], agent: false }; });
+    return out;
+  }
+
+  // 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").
+  // 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 = 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);
+    const me = rows.find((r) => r.me);
+    if (me && !top.includes(me)) top.push(me);
+    return top;
+  }
+
+  // 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 = 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 };
+  }
+
+  // The scene for week i as SHAPES, never markup: a tree of { tag, attrs, kids,
+  // text } that home-city.js turns into SVG nodes with createElementNS and
+  // 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, t, opts) {
+    const o = opts || {};
+    const I = theme(o.mode);
+    const Gov = o.gov || null;
+    const vb = viewBoxOf(m);
+    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, tn) => {
+      const z1 = z0 + h;
+      return [
+        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 = [];
+    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 = [];
+      g.push(...box(x0 - 0.12, y0 - 0.12, x1 + 0.12, y1 + 0.12, 0, base, I.plinth));
+      g.push(...box(x0, y0, x1, y1, base, built, I.work));
+      if (clad > 1) {
+        const c = base + Math.min(clad, built);
+        g.push(face([P(x0, y1, c), P(x1, y1, c), P(x1, y1, base), P(x0, y1, base)], I.glassL));
+        g.push(face([P(x1, y1, c), P(x1, y0, c), P(x1, y0, base), P(x1, y1, base)], I.glassR));
+        if (clad >= built - 0.5) g.push(face([P(x0, y0, base + built), P(x1, y0, base + built), P(x1, y1, base + built), P(x0, y1, base + built)], I.glassT));
+      }
+      for (let z = base + 16; z < base + built - 2; z += 16) g.push(line(P(x0, y1, z), P(x1, y1, z), I.floor), line(P(x1, y1, z), P(x1, y0, z), I.floor));
+      const top = base + built;
+      tops[a.id] = P((x0 + x1) / 2, (y0 + y1) / 2, top);
+      if (site) {
+        // the floor going up: lit, wrapped in scaffolding, a crane lifting the next slab
+        if (built > 14) {
+          const zt = top - 9, zb = top - 3;
+          g.push(face([P(x0 + 0.15, y1, zb), P(x1 - 0.15, y1, zb), P(x1 - 0.15, y1, zt), P(x0 + 0.15, y1, zt)], I.lit));
+          g.push(face([P(x1, y1 - 0.15, zb), P(x1, y0 + 0.15, zb), P(x1, y0 + 0.15, zt), P(x1, y1 - 0.15, zt)], I.lit));
+        }
+        const ov = 0.14, s0 = Math.max(base, top - 12), s1 = top + 22;
+        [x0 - ov, (x0 + x1) / 2, x1 + ov].forEach((x) => g.push(line(P(x, y1 + ov, s0), P(x, y1 + ov, s1), I.scaffold)));
+        [y1 + ov, (y0 + y1) / 2, y0 - ov].forEach((y) => g.push(line(P(x1 + ov, y, s0), P(x1 + ov, y, s1), I.scaffold)));
+        for (let zz = s0; zz <= s1 + 0.1; zz += 11) g.push(line(P(x0 - ov, y1 + ov, zz), P(x1 + ov, y1 + ov, zz), I.scaffold), line(P(x1 + ov, y1 + ov, zz), P(x1 + ov, y0 - ov, zz), I.scaffold));
+        const mx = x0 + 0.5, my = y0 + 0.5, ct = top + 56;
+        g.push(line(P(mx - 0.08, my, top), P(mx - 0.08, my, ct), I.steel, 1.3), line(P(mx + 0.08, my, top), P(mx + 0.08, my, ct), I.steel, 1.3));
+        for (let zc = top, k = 0; zc + 8 <= ct; zc += 8, k++) g.push(line(P(mx + (k % 2 ? 0.08 : -0.08), my, zc), P(mx + (k % 2 ? -0.08 : 0.08), my, zc + 8), I.steel, 0.8));
+        g.push(line(P(mx - 0.9, my, ct), P(mx + 2.2, my, ct), I.steel, 1.5));
+        g.push(line(P(mx, my, ct + 11), P(mx + 2.2, my, ct), I.steel, 0.9), line(P(mx, my, ct + 11), P(mx - 0.9, my, ct), I.steel, 0.9));
+        g.push(...box(mx - 0.95, my - 0.12, mx - 0.6, my + 0.12, ct - 8, 8, I.slab));
+        const hx = mx + 1.8;
+        g.push(line(P(hx, my, ct), P(hx, my, top - 6), I.steel, 1));
+        g.push(node('g', { class: 'hc-slab' }, box(hx - 0.3, my - 0.2, hx + 0.3, my + 0.2, top - 38, 3, I.slab)));
+        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 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) => {
+      if (v.k === 'face') { out.push(avatarNode(v.p, v.who, v.agent, v.a, I, n, node, line, circle)); return; }
+      const cx = v.p[0] - 30, cy = v.p[1];
+      out.push(node('g', { class: 'hc-wait', 'data-tip': v.a.title, 'data-tip-body': `${v.n} waiting on you` }, [
+        circle(cx, cy, 11, { fill: 'var(--accent)', stroke: 'var(--bg-card)', 'stroke-width': 2.5 }),
+        node('text', { x: r1(cx), y: r1(cy + 4), 'text-anchor': 'middle', class: 'hc-wait__n' }, [], v.n),
+      ]));
+    });
+    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
+  // initial (so a picture that fails to load still leaves a face), or the robot
+  // glyph when an agent is building the site.
+  function avatarNode(p, who, agent, a, I, n, node, line, circle) {
+    const x = p[0], y = p[1], id = `hc-av-${n}`;
+    const g = [line([x, y + 16], [x, y + 28], I.steel, 1), circle(x, y, 16, { fill: agent ? I.avAgent : I.av, stroke: 'var(--bg-card)', 'stroke-width': 3 })];
+    if (agent) {
+      g.push(node('rect', { x: r1(x - 7), y: r1(y - 5), width: 14, height: 11, rx: 3, fill: 'none', stroke: I.avInk, 'stroke-width': 1.5 }));
+      g.push(circle(x - 3, y + 0.5, 1.5, { fill: I.avInk }), circle(x + 3, y + 0.5, 1.5, { fill: I.avInk }));
+    } else {
+      g.push(node('text', { x: r1(x), y: r1(y + 5), 'text-anchor': 'middle', fill: I.avInk, class: 'hc-av__i' }, [], initial(who.name)));
+      if (who.avatar && /^https:\/\//.test(who.avatar)) {
+        g.push(node('clipPath', { id }, [circle(x, y, 14.5, {})]));
+        g.push(node('image', { href: who.avatar, x: r1(x - 14.5), y: r1(y - 14.5), width: 29, height: 29, 'clip-path': `url(#${id})`, preserveAspectRatio: 'xMidYMid slice' }));
+      }
+    }
+    return node('g', { class: 'hc-face-pin', 'data-tip': agent ? `${who.name}'s agent` : who.name, 'data-tip-body': a.title }, g);
+  }
+
+  function initial(name) { const s = String(name || '').trim(); return s ? s[0].toUpperCase() : '?'; }
+  // 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, 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);