@bongos/core 1.21.5 → 1.21.7

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

@@ -0,0 +1,438 @@
+// modules/hall-ui/public/city-draw.js — THE GOVERNOR CITY's drawing, as data
+// (task 1004524, goal 1000125; R02 of the Governor City).
+//
+// WHAT THIS IS. The home view of the reference design, docs/design/mocks/
+// governor-city/Street.dc.html: the isometric kit (isoKit / P(), isoBox,
+// isoGable, isoHip, isoSaw, isoTree, isoLight), the nine civic recipes
+// (isoInstitution), the district work (isoWork), the decision glyphs (glyph)
+// and homeView(), which lays out the 16 x 16 city. Every function below is the
+// prototype's, ported verbatim (same tile maths, same heights, same tones),
+// with ONE change of input: homeView() read the prototype's sample docket and
+// its four hand-placed districts; cityModel() reads the real governor docket
+// (GET /api/bongos/government/docket, task 1004523) for the pins and the open
+// goals with their task rollups (GET /goals, GET /goals/rollups) for the
+// districts. Anything else that differs from the prototype is a defect.
+//
+// PURE. No DOM, no fetch, no clock: the same inputs give the same path list,
+// so tests/hall_city.mjs can pin the model without a browser, and city.js only
+// turns the lists into SVG nodes and spans.
+//
+// THE PALETTE. isoTheme() is the prototype's theme().iso sub-palette for both
+// modes, verbatim. It is drawing data (the faces of a white architectural model
+// on paper in light, dark blocks in the black in dark), the way the sky's
+// canvas carries its own ink channels; the page chrome around the drawing takes
+// the hall's tokens (city.css).
+//
+// REAL DATA, AND WHERE IT HAD TO BEND (each said once, here and in the ship
+// notes):
+//  * Districts. The prototype has four hand-placed goal districts (north, east,
+//    west, south of the ring road). The city draws one per OPEN goal: the four
+//    prototype plots first, then the four empty corners of the 16 x 16 ground,
+//    and past eight goals plots are halved along their long side, in the same
+//    order, up to sixteen. Goals past sixteen are not drawn (cityModel reports
+//    them in `unplaced`).
+//  * A building per task. Each task of a goal is one building on its plot
+//    (shipped work built as a tower, setback or shed in the prototype's shares,
+//    work being built as a scaffold, work not started as a staked slab) until
+//    the plot is full. Past that, one building stands for several tasks and
+//    grows taller, which is the reference design's own answer to scale
+//    (Growth.dc.html: the city fills, then rises).
+//  * Review. The prototype's story opens with Review a vacant lot; in this
+//    project Review is held (the grader and the testers sign work off), so the
+//    held recipe is drawn and the parcels leave through Release.
+//  * Pins. A building can hold more matters than the prototype's one; up to
+//    three pins stand side by side over it (needs first, the docket's own
+//    order), and the line under the button carries the full counts.
+
+(function (root) {
+  'use strict';
+
+  // ---------- the iso sub-palette (Street.dc.html theme(mode).iso) ----------
+  function isoTheme(mode) {
+    if (mode === 'light') {
+      return {
+        civic: { t: '#fbfafc', l: '#ecebee', r: '#d9d8dd', s: 'rgba(23,24,26,0.34)' },
+        work: { t: '#f4f3f6', l: '#e6e5e9', r: '#d4d3d8', s: 'rgba(23,24,26,0.24)' },
+        plinth: { t: '#efeef1', l: '#e2e1e5', r: '#cfced3', s: 'rgba(23,24,26,0.28)' },
+        roof: { t: '#e9e8ec', l: '#dddce1', r: '#cbcad0', s: 'rgba(23,24,26,0.34)' },
+        glass: { t: 'rgba(91,111,208,0.10)', l: 'rgba(91,111,208,0.14)', r: 'rgba(91,111,208,0.22)', s: 'rgba(60,80,180,0.50)' },
+        scaffold: { t: 'rgba(23,24,26,0.03)', l: 'rgba(23,24,26,0.02)', r: 'rgba(23,24,26,0.02)', s: 'rgba(23,24,26,0.45)', dash: '3 3' },
+        crate: { t: 'rgba(23,24,26,0.06)', l: 'rgba(23,24,26,0.04)', r: 'rgba(23,24,26,0.07)', s: 'rgba(23,24,26,0.55)', dash: '3 2' },
+        sign: { t: '#e2e1e5', l: '#e2e1e5', r: '#cfced3', s: 'rgba(23,24,26,0.45)' },
+        ground: 'rgba(23,24,26,0.025)', groundLine: 'rgba(23,24,26,0.10)', road: 'rgba(23,24,26,0.05)', lane: 'rgba(23,24,26,0.22)',
+        plaza: 'rgba(23,24,26,0.05)', plazaLine: 'rgba(23,24,26,0.16)', plot: 'rgba(23,24,26,0.035)', plotLine: 'rgba(23,24,26,0.14)', grid: 'rgba(23,24,26,0.06)',
+        detail: 'rgba(23,24,26,0.18)', wc: 'rgba(23,24,26,0.16)', wcLit: 'rgba(214,140,80,0.60)', door: '#cfced3', beacon: '#fb9569',
+        vacantFill: 'rgba(23,24,26,0.02)', vacantLine: 'rgba(23,24,26,0.45)', tree: 'rgba(91,111,208,0.22)', treeLine: 'rgba(60,80,180,0.45)',
+      };
+    }
+    return {
+      civic: { t: '#3b3b41', l: '#25252a', r: '#18181c', s: 'rgba(255,255,255,0.14)' },
+      work: { t: '#2d2d32', l: '#19191c', r: '#0f0f12', s: 'rgba(255,255,255,0.12)' },
+      plinth: { t: '#27272c', l: '#141417', r: '#0b0b0d', s: 'rgba(255,255,255,0.10)' },
+      roof: { t: '#38383e', l: '#2b2b31', r: '#1d1d22', s: 'rgba(255,255,255,0.14)' },
+      glass: { t: 'rgba(150,170,255,0.22)', l: 'rgba(120,140,230,0.17)', r: 'rgba(100,120,210,0.12)', s: 'rgba(170,190,255,0.42)' },
+      scaffold: { t: 'rgba(255,255,255,0.03)', l: 'rgba(255,255,255,0.02)', r: 'rgba(255,255,255,0.015)', s: 'rgba(255,255,255,0.45)', dash: '3 3' },
+      crate: { t: 'rgba(255,255,255,0.07)', l: 'rgba(255,255,255,0.04)', r: 'rgba(255,255,255,0.03)', s: 'rgba(255,255,255,0.55)', dash: '3 2' },
+      sign: { t: '#202024', l: '#202024', r: '#141417', s: 'rgba(255,255,255,0.4)' },
+      ground: 'rgba(255,255,255,0.012)', groundLine: 'rgba(255,255,255,0.05)', road: 'rgba(255,255,255,0.025)', lane: 'rgba(255,255,255,0.12)',
+      plaza: 'rgba(255,255,255,0.045)', plazaLine: 'rgba(255,255,255,0.16)', plot: 'rgba(255,255,255,0.03)', plotLine: 'rgba(255,255,255,0.13)', grid: 'rgba(255,255,255,0.045)',
+      detail: 'rgba(255,255,255,0.10)', wc: 'rgba(255,255,255,0.10)', wcLit: 'rgba(255,214,170,0.80)', door: '#050506', beacon: '#fff4e6',
+      vacantFill: 'rgba(255,255,255,0.02)', vacantLine: 'rgba(255,255,255,0.4)', tree: 'rgba(91,111,208,0.32)', treeLine: 'rgba(140,155,230,0.45)',
+    };
+  }
+
+  // ---------- the prototype's primitives ----------
+  function push(out, d, f, s, dash, w) { out.push({ d: d, f: f, s: s, dash: dash || 'none', w: w || 1 }); }
+  function ellipse(cx, cy, rx, ry) { return 'M' + (cx - rx) + ' ' + cy + 'a' + rx + ' ' + ry + ' 0 1 0 ' + (2 * rx) + ' 0a' + rx + ' ' + ry + ' 0 1 0 ' + (-2 * rx) + ' 0Z'; }
+  function rnd(n) {
+    const s = Math.sin(n * 12.9898 + 78.233) * 43758.5453;
+    return s - Math.floor(s);
+  }
+
+  function isoKit(TW, TH, OX, OY, S, I, lit) {
+    const r1 = (n) => Math.round(n * 10) / 10;
+    const P = (x, y, z) => [OX + (x - y) * TW / 2, OY + (x + y) * TH / 2 - (z || 0) * S];
+    const poly = (pts) => 'M' + pts.map((p) => r1(p[0]) + ' ' + r1(p[1])).join('L') + 'Z';
+    const seg = (a, b) => 'M' + r1(a[0]) + ' ' + r1(a[1]) + 'L' + r1(b[0]) + ' ' + r1(b[1]);
+    return { P: P, poly: poly, seg: seg, S: S, I: I, wc: lit ? I.wcLit : I.wc };
+  }
+
+  function isoBox(out, k, x0, y0, x1, y1, z0, h, tone, o) {
+    o = o || {};
+    const P = k.P, z1 = z0 + h, dash = tone.dash || 'none';
+    push(out, k.poly([P(x0, y1, z1), P(x1, y1, z1), P(x1, y1, z0), P(x0, y1, z0)]), tone.l, tone.s, dash);
+    push(out, k.poly([P(x1, y1, z1), P(x1, y0, z1), P(x1, y0, z0), P(x1, y1, z0)]), tone.r, tone.s, dash);
+    push(out, k.poly([P(x0, y0, z1), P(x1, y0, z1), P(x1, y1, z1), P(x0, y1, z1)]), tone.t, tone.s, dash);
+    let det = '';
+    const ix = Math.min(0.08, (x1 - x0) / 6), iy = Math.min(0.08, (y1 - y0) / 6);
+    if (o.rows || o.grid) for (let z = z0 + 8; z < z1 - 5; z += 8) det += k.seg(P(x0 + ix, y1, z), P(x1 - ix, y1, z)) + k.seg(P(x1, y1 - iy, z), P(x1, y0 + iy, z));
+    if (o.fins || o.grid) {
+      const n = o.n || 6;
+      for (let i = 1; i < n; i++) { const fx = x0 + (x1 - x0) * i / n, fy = y0 + (y1 - y0) * i / n; det += k.seg(P(fx, y1, z0 + 2), P(fx, y1, z1 - 2)) + k.seg(P(x1, fy, z0 + 2), P(x1, fy, z1 - 2)); }
+    }
+    if (det) push(out, det, 'none', o.wc || (o.rows ? k.wc : k.I.detail), o.rows && !o.grid ? '4 3' : 'none');
+    if (o.door) {
+      const xm = (x0 + x1) / 2, dw = Math.min(0.12, (x1 - x0) / 5), dh = Math.min(14, h * 0.45);
+      push(out, k.poly([P(xm - dw, y1, z0), P(xm + dw, y1, z0), P(xm + dw, y1, z0 + dh), P(xm - dw, y1, z0 + dh)]), k.I.door, tone.s);
+    }
+  }
+
+  function isoGable(out, k, x0, y0, x1, y1, z, hr, tone) {
+    const P = k.P, ym = (y0 + y1) / 2;
+    push(out, k.poly([P(x0, y0, z), P(x1, y0, z), P(x1, ym, z + hr), P(x0, ym, z + hr)]), tone.r, tone.s);
+    push(out, k.poly([P(x0, ym, z + hr), P(x1, ym, z + hr), P(x1, y1, z), P(x0, y1, z)]), tone.t, tone.s);
+    push(out, k.poly([P(x1, y0, z), P(x1, ym, z + hr), P(x1, y1, z)]), tone.l, tone.s);
+  }
+
+  function isoHip(out, k, x0, y0, x1, y1, z, hr, tone) {
+    const P = k.P, a = P((x0 + x1) / 2, (y0 + y1) / 2, z + hr);
+    push(out, k.poly([P(x0, y0, z), P(x1, y0, z), a]), tone.r, tone.s);
+    push(out, k.poly([P(x0, y0, z), P(x0, y1, z), a]), tone.l, tone.s);
+    push(out, k.poly([P(x0, y1, z), P(x1, y1, z), a]), tone.t, tone.s);
+    push(out, k.poly([P(x1, y1, z), P(x1, y0, z), a]), tone.l, tone.s);
+  }
+
+  function isoSaw(out, k, x0, y0, x1, y1, z, hr, n, tone, glass) {
+    const P = k.P, step = (x1 - x0) / n;
+    for (let i = 0; i < n; i++) {
+      const xa = x0 + step * i, xb = xa + step;
+      push(out, k.poly([P(xa, y0, z), P(xb, y0, z + hr), P(xb, y1, z + hr), P(xa, y1, z)]), tone.t, tone.s);
+      push(out, k.poly([P(xa, y1, z), P(xb, y1, z + hr), P(xb, y1, z)]), tone.l, tone.s);
+      push(out, k.poly([P(xb, y0, z), P(xb, y0, z + hr), P(xb, y1, z + hr), P(xb, y1, z)]), glass.r, glass.s);
+    }
+  }
+
+  function isoTree(out, k, x, y, size) {
+    const P = k.P, c = P(x, y, size * 1.15);
+    push(out, k.seg(P(x, y, 0), P(x, y, size * 0.9)), 'none', k.I.treeLine);
+    push(out, ellipse(Math.round(c[0]), Math.round(c[1]), Math.round(size * 0.42 * k.S * 10) / 10, Math.round(size * 0.42 * k.S * 10) / 10), k.I.tree, k.I.treeLine);
+  }
+
+  function isoLight(out, k, x, y, z, r) {
+    const c = k.P(x, y, z);
+    push(out, ellipse(Math.round(c[0]), Math.round(c[1]), r * 2.6, r * 2.6), 'rgba(251,149,105,0.10)', 'none');
+    push(out, ellipse(Math.round(c[0]), Math.round(c[1]), r, r), k.I.beacon, 'none');
+  }
+
+  function isoInstitution(out, k, kind, ox, oy, st) {
+    const I = k.I;
+    const b = (x0, y0, x1, y1, z, h, t, o) => isoBox(out, k, ox + x0, oy + y0, ox + x1, oy + y1, z, h, t, o);
+    if (kind === 'charter') {
+      b(0.15, 0.15, 1.85, 1.85, 0, 6, I.plinth); b(0.3, 0.3, 1.7, 1.7, 6, 46, I.civic, { rows: true }); b(0.45, 0.45, 1.55, 1.55, 52, 40, I.civic, { rows: true });
+      b(0.6, 0.6, 1.4, 1.4, 92, 34, I.civic, { fins: true, n: 5 }); b(0.75, 0.75, 1.25, 1.25, 126, 18, I.glass, { grid: true, n: 3 }); isoLight(out, k, ox + 1, oy + 1, 152, 3.2);
+    } else if (kind === 'rules') {
+      b(0.1, 0.5, 1.9, 1.5, 0, 4, I.plinth); b(0.22, 0.62, 1.78, 1.38, 4, 28, I.civic, { fins: true, n: 12, wc: st.fixes ? I.wcLit : null }); b(0.12, 0.52, 1.88, 1.48, 32, 4, I.roof);
+    } else if (kind === 'treasury') {
+      b(0.22, 0.22, 1.78, 1.78, 0, 8, I.plinth); b(0.4, 0.4, 1.6, 1.6, 8, 44, I.civic, { door: true }); b(0.33, 0.33, 1.67, 1.67, 52, 5, I.roof); b(0.62, 0.62, 1.38, 1.38, 57, 9, I.civic);
+    } else if (kind === 'planning') {
+      b(0.3, 0.3, 1.7, 1.7, 0, 38, I.civic, { rows: true, door: true }); isoSaw(out, k, ox + 0.3, oy + 0.3, ox + 1.7, oy + 1.7, 38, 13, 3, I.roof, I.glass);
+    } else if (kind === 'review') {
+      b(0.3, 0.3, 1.7, 1.7, 0, 14, I.civic, { door: true }); b(0.38, 0.38, 1.62, 1.62, 14, 36, I.glass, { grid: true, n: 5 }); b(0.34, 0.34, 1.66, 1.66, 50, 3, I.roof);
+    } else if (kind === 'release') {
+      b(0.3, 0.75, 0.75, 1.25, 0, 66, I.civic, { rows: true }); isoLight(out, k, ox + 0.52, oy + 1, 72, 2.6);
+      b(0.75, 0.85, 1.25, 1.15, 44, 12, I.civic); b(1.25, 0.75, 1.7, 1.25, 0, 66, I.civic, { rows: true }); isoLight(out, k, ox + 1.47, oy + 1, 72, 2.6);
+    } else if (kind === 'people') {
+      b(0.2, 0.2, 0.85, 0.8, 0, 16, I.civic, { door: true }); isoGable(out, k, ox + 0.2, oy + 0.2, ox + 0.85, oy + 0.8, 16, 11, I.roof);
+      b(1.1, 0.3, 1.75, 0.9, 0, 20, I.civic, { door: true }); isoGable(out, k, ox + 1.1, oy + 0.3, ox + 1.75, oy + 0.9, 20, 11, I.roof);
+      isoTree(out, k, ox + 1.45, oy + 1.45, 12);
+      b(0.35, 1.1, 1.0, 1.7, 0, 14, I.civic, { door: true }); isoGable(out, k, ox + 0.35, oy + 1.1, ox + 1.0, oy + 1.7, 14, 10, I.roof);
+    } else if (kind === 'disputes') {
+      b(0.25, 0.7, 0.75, 1.3, 0, 22, I.civic, { rows: true }); b(0.75, 0.55, 1.25, 1.45, 0, 48, I.civic, { fins: true, n: 4, door: true });
+      isoHip(out, k, ox + 0.75, oy + 0.55, ox + 1.25, oy + 1.45, 48, 12, I.roof); b(1.25, 0.7, 1.75, 1.3, 0, 22, I.civic, { rows: true });
+    } else if (kind === 'commons') {
+      b(0.85, 0.85, 1.15, 1.15, 0, 3, I.plinth);
+      isoTree(out, k, ox + 0.45, oy + 0.5, 14); isoTree(out, k, ox + 1.5, oy + 0.45, 12); isoTree(out, k, ox + 0.5, oy + 1.5, 12); isoTree(out, k, ox + 1.5, oy + 1.55, 15);
+    } else if (kind === 'automation') {
+      b(0.25, 0.3, 1.75, 1.6, 0, 6, I.plinth); b(0.35, 0.4, 1.65, 1.5, 6, 30, I.civic, { rows: true, door: true });
+      b(1.15, 0.55, 1.45, 0.85, 36, 42, I.civic); isoLight(out, k, ox + 1.3, oy + 0.7, 84, 2.8);
+      b(0.5, 0.9, 1.0, 1.4, 36, 8, I.roof, { fins: true, n: 4 });
+    } else if (kind === 'vacant') {
+      const P = k.P;
+      push(out, k.poly([P(ox + 0.2, oy + 0.2, 0), P(ox + 1.8, oy + 0.2, 0), P(ox + 1.8, oy + 1.8, 0), P(ox + 0.2, oy + 1.8, 0)]), I.vacantFill, I.vacantLine, '4 4');
+      push(out, k.seg(P(ox + 0.45, oy + 1.55, 0), P(ox + 0.45, oy + 1.55, 30)), 'none', I.vacantLine);
+      b(0.3, 1.52, 0.6, 1.58, 22, 12, I.sign);
+      b(1.0, 0.7, 1.35, 1.05, 0, 9, I.crate); b(1.05, 0.75, 1.3, 1.0, 9, 8, I.crate); b(1.25, 1.05, 1.55, 1.35, 0, 9, I.crate);
+    }
+  }
+
+  // The prototype's five work kinds, plus `slab`: a task not started yet, drawn
+  // as the staked plot the README names for backlog (a low dashed footing).
+  function isoWork(out, k, x, y, kind, h) {
+    const I = k.I;
+    if (kind === 'tower') isoBox(out, k, x + 0.16, y + 0.16, x + 0.84, y + 0.84, 0, h, I.work, { rows: true });
+    else if (kind === 'setback') {
+      isoBox(out, k, x + 0.12, y + 0.12, x + 0.88, y + 0.88, 0, Math.round(h * 0.55), I.work, { rows: true });
+      isoBox(out, k, x + 0.3, y + 0.3, x + 0.7, y + 0.7, Math.round(h * 0.55), Math.round(h * 0.45), I.work, { rows: true });
+    } else if (kind === 'shed') {
+      isoBox(out, k, x + 0.1, y + 0.2, x + 0.9, y + 0.8, 0, 12, I.work, { door: true });
+      isoGable(out, k, x + 0.1, y + 0.2, x + 0.9, y + 0.8, 12, 8, I.roof);
+    } else if (kind === 'trees') { isoTree(out, k, x + 0.35, y + 0.4, 10); isoTree(out, k, x + 0.68, y + 0.7, 8); }
+    else if (kind === 'scaffold') isoBox(out, k, x + 0.16, y + 0.16, x + 0.84, y + 0.84, 0, h, I.scaffold);
+    else if (kind === 'slab') isoBox(out, k, x + 0.2, y + 0.2, x + 0.8, y + 0.8, 0, 3, I.scaffold);
+  }
+
+  // The decision glyphs (Street.dc.html glyph()), with Guide.dc.html's two extras
+  // (first, signoff), verbatim, so every rule the docket can carry has its mark.
+  function glyph(kind, cx, cy, s) {
+    const c = (x, y, r) => 'M' + (x - r) + ' ' + y + 'a' + r + ' ' + r + ' 0 1 0 ' + (2 * r) + ' 0a' + r + ' ' + r + ' 0 1 0 ' + (-2 * r) + ' 0Z';
+    const arcDots = (n, rad, r, yo) => { let d = ''; for (let i = 0; i < n; i++) { const a = Math.PI - (Math.PI * i) / (n - 1); d += c(cx + Math.cos(a) * rad, cy + yo - Math.sin(a) * rad, r); } return d; };
+    let fill = '', line = '';
+    if (kind === 'decide') fill = c(cx, cy, s * 0.3);
+    else if (kind === 'majority') fill = arcDots(5, s * 0.4, s * 0.085, s * 0.2);
+    else if (kind === 'unanimous') { const rad = s * 0.4, yo = s * 0.2; fill = arcDots(5, rad, s * 0.085, yo); line = 'M' + (cx - rad) + ' ' + (cy + yo) + 'A' + rad + ' ' + rad + ' 0 0 1 ' + (cx + rad) + ' ' + (cy + yo); }
+    else if (kind === 'consent') { fill = c(cx, cy, s * 0.1); const r = s * 0.36; line = 'M' + cx + ' ' + (cy - r) + 'A' + r + ' ' + r + ' 0 1 1 ' + (cx - r) + ' ' + cy; }
+    else if (kind === 'rule') { const h = s * 0.22; fill = 'M' + (cx - h) + ' ' + (cy - h) + 'h' + (2 * h) + 'v' + (2 * h) + 'h' + (-2 * h) + 'Z'; }
+    else if (kind === 'first') { fill = c(cx - s * 0.3, cy, s * 0.12); line = c(cx, cy, s * 0.1) + c(cx + s * 0.3, cy, s * 0.1); }
+    else if (kind === 'signoff') { fill = c(cx - s * 0.26, cy, s * 0.11) + c(cx + s * 0.26, cy, s * 0.11); line = 'M' + (cx - s * 0.15) + ' ' + cy + 'L' + (cx + s * 0.15) + ' ' + cy; }
+    return { fill: fill, line: line };
+  }
+
+  // ---------- the city's fixed layout (Street.dc.html homeView) ----------
+  const CIVIC_SLOTS = Object.freeze([['planning', 5, 5], ['rules', 7, 5], ['treasury', 9, 5], ['people', 5, 7], ['charter', 7, 7], ['release', 9, 7], ['disputes', 5, 9], ['automation', 7, 9], ['review', 9, 9]]);
+  const ROOF = Object.freeze({ charter: 158, rules: 36, treasury: 66, planning: 51, people: 31, release: 72, disputes: 60, review: 53, automation: 86 });
+
+  // The four prototype districts (route = the parcel road it feeds), then the
+  // four empty corners of the ground. Tiles x0..x1, y0..y1 inclusive.
+  const BASE_LOTS = Object.freeze([
+    Object.freeze({ x0: 5, x1: 10, y0: 0, y1: 3, tall: 60, route: 0 }),
+    Object.freeze({ x0: 12, x1: 15, y0: 5, y1: 10, tall: 100, route: 1 }),
+    Object.freeze({ x0: 0, x1: 3, y0: 5, y1: 10, tall: 120, route: 2 }),
+    Object.freeze({ x0: 5, x1: 10, y0: 12, y1: 15, tall: 50, route: 3 }),
+    Object.freeze({ x0: 0, x1: 3, y0: 0, y1: 3, tall: 80, route: null }),
+    Object.freeze({ x0: 12, x1: 15, y0: 0, y1: 3, tall: 90, route: null }),
+    Object.freeze({ x0: 0, x1: 3, y0: 12, y1: 15, tall: 70, route: null }),
+    Object.freeze({ x0: 12, x1: 15, y0: 12, y1: 15, tall: 60, route: null }),
+  ]);
+  const MAX_DISTRICTS = BASE_LOTS.length * 2;
+  const MAX_PINS_PER_BUILDING = 3;
+
+  function halve(L) {
+    const w = L.x1 - L.x0 + 1, h = L.y1 - L.y0 + 1;
+    if (w >= h) {
+      const m = L.x0 + Math.floor(w / 2) - 1;
+      return [Object.assign({}, L, { x1: m }), Object.assign({}, L, { x0: m + 1 })];
+    }
+    const m = L.y0 + Math.floor(h / 2) - 1;
+    return [Object.assign({}, L, { y1: m }), Object.assign({}, L, { y0: m + 1 })];
+  }
+
+  // n open goals → n plots (at most sixteen), in the order the goals come.
+  function lotsFor(n) {
+    const count = Math.max(0, Math.min(Math.floor(Number(n) || 0), MAX_DISTRICTS));
+    if (count <= BASE_LOTS.length) return BASE_LOTS.slice(0, count).map((L) => Object.assign({}, L));
+    let splits = count - BASE_LOTS.length;
+    const out = [];
+    BASE_LOTS.forEach((L) => {
+      if (splits > 0) { splits -= 1; halve(L).forEach((h) => out.push(h)); } else out.push(Object.assign({}, L));
+    });
+    return out;
+  }
+
+  // A goal's tasks in the order they fill its plot: shipped first, then the
+  // work being built, then what has not started.
+  const TASK_ORDER = Object.freeze(['done', 'active', 'ready', 'blocked', 'backlog']);
+  function taskList(rollup) {
+    const list = [];
+    if (!rollup) return list;
+    TASK_ORDER.forEach((s) => {
+      const n = Math.max(0, Math.floor(Number(rollup[s]) || 0));
+      for (let i = 0; i < n; i++) list.push(s);
+    });
+    return list;
+  }
+
+  // One goal on one plot → the buildings on it. A building per task until the
+  // plot is full; past that each building carries `per` tasks and rises.
+  function districtWork(lot, rollup) {
+    const tasks = taskList(rollup);
+    const tiles = [];
+    for (let gx = lot.x0; gx <= lot.x1; gx++) for (let gy = lot.y0; gy <= lot.y1; gy++) tiles.push({ gx: gx, gy: gy, r: rnd(gx * 31 + gy * 7 + 1) });
+    tiles.sort((a, b) => a.r - b.r || a.gx - b.gx || a.gy - b.gy);
+    const per = Math.max(1, Math.ceil(tasks.length / Math.max(1, tiles.length)));
+    // The rise is capped low: the civic quarter stays the tallest thing in the city.
+    const grow = per > 1 ? Math.min(1.25, 1 + 0.05 * (per - 1)) : 1;
+    const out = [];
+    let t = 0;
+    tiles.forEach((tile) => {
+      const gx = tile.gx, gy = tile.gy;
+      const r2 = rnd(gx * 13 + gy * 29 + 5);
+      if (t >= tasks.length) {
+        // An empty tile keeps the prototype's trees where its draw would have planted them.
+        if (tile.r >= 0.52 && tile.r < 0.6) out.push({ gx: gx, gy: gy, kind: 'trees', h: 0, tasks: 0 });
+        return;
+      }
+      const chunk = tasks.slice(t, t + per);
+      t += per;
+      let kind;
+      if (chunk.indexOf('active') >= 0) kind = 'scaffold';
+      else if (chunk.every((s) => s === 'done')) {
+        const r3 = rnd(gx * 17 + gy * 11 + 3);
+        kind = r3 < 0.58 ? 'tower' : r3 < 0.8 ? 'setback' : 'shed';
+      } else kind = 'slab';
+      out.push({ gx: gx, gy: gy, kind: kind, h: Math.round((20 + r2 * lot.tall) * grow), tasks: chunk.length });
+    });
+    return out;
+  }
+
+  function pinState(state) {
+    return state === 'needs' || state === 'moving' || state === 'settled' ? state : 'moving';
+  }
+
+  // The home line, when the docket could not be read.
+  const FALLBACK_LINE = 'the docket could not be read just now';
+
+  // The whole home view as data.
+  //   docket   the GET /government/docket body, or null when it failed
+  //   goals    GET /goals goals[] (any status; only 'open' ones are drawn)
+  //   rollups  GET /goals/rollups rollups[] (goal_id → task counts)
+  //   mode     'dark' | 'light'
+  function cityModel(input) {
+    const opts = input || {};
+    const docket = opts.docket && typeof opts.docket === 'object' ? opts.docket : null;
+    const mode = opts.mode === 'light' ? 'light' : 'dark';
+    const I = isoTheme(mode);
+    const counts = docket && docket.counts ? docket.counts : { needs: 0, moving: 0, settled: 0 };
+    const evening = !!docket && !(Number(counts.needs) > 0);
+    const k = isoKit(60, 30, 720, 176, 30 / 28, I, evening);
+    const P = k.P, r1 = (n) => Math.round(n * 10) / 10;
+
+    // ground, the ring road and its lanes, the plaza
+    const flat = [];
+    push(flat, k.poly([P(0, 0), P(16, 0), P(16, 16), P(0, 16)]), I.ground, I.groundLine);
+    [[4, 0, 5, 16], [11, 0, 12, 16], [0, 4, 16, 5], [0, 11, 16, 12]].forEach((q) => push(flat, k.poly([P(q[0], q[1]), P(q[2], q[1]), P(q[2], q[3]), P(q[0], q[3])]), I.road, 'none'));
+    push(flat, k.seg(P(4.5, 0), P(4.5, 16)) + k.seg(P(11.5, 0), P(11.5, 16)) + k.seg(P(0, 4.5), P(16, 4.5)) + k.seg(P(0, 11.5), P(16, 11.5)), 'none', I.lane, '2 7');
+    push(flat, k.poly([P(5, 5), P(11, 5), P(11, 11), P(5, 11)]), I.plaza, I.plazaLine);
+
+    // one district per open goal
+    const goals = (Array.isArray(opts.goals) ? opts.goals : []).filter((g) => g && g.status === 'open' && g.id != null);
+    const byGoal = {};
+    (Array.isArray(opts.rollups) ? opts.rollups : []).forEach((r) => { if (r && r.goal_id != null) byGoal[String(r.goal_id)] = r; });
+    const lots = lotsFor(goals.length);
+    const districts = lots.map((lot, i) => ({ goal_id: String(goals[i].id), title: String(goals[i].title || ''), lot: lot, work: districtWork(lot, byGoal[String(goals[i].id)]) }));
+    const unplaced = goals.slice(lots.length).map((g) => String(g.id));
+
+    let grid = '';
+    districts.forEach((D) => {
+      const L = D.lot;
+      push(flat, k.poly([P(L.x0, L.y0), P(L.x1 + 1, L.y0), P(L.x1 + 1, L.y1 + 1), P(L.x0, L.y1 + 1)]), I.plot, I.plotLine);
+      for (let gx = L.x0 + 1; gx <= L.x1; gx++) grid += k.seg(P(gx, L.y0), P(gx, L.y1 + 1));
+      for (let gy = L.y0 + 1; gy <= L.y1; gy++) grid += k.seg(P(L.x0, gy), P(L.x1 + 1, gy));
+    });
+    if (grid) push(flat, grid, 'none', I.grid);
+
+    // the civic quarter, then the districts' work, painted back to front
+    const blds = [];
+    CIVIC_SLOTS.forEach((s) => {
+      const polys = [];
+      isoInstitution(polys, k, s[0], s[1], s[2], { fixes: false });
+      blds.push({ key: s[0], depth: s[1] + s[2] + 2, polys: polys });
+    });
+    districts.forEach((D) => {
+      D.work.forEach((w) => {
+        const polys = [];
+        isoWork(polys, k, w.gx, w.gy, w.kind, w.h);
+        blds.push({ key: w.gx + ',' + w.gy, depth: w.gx + w.gy + 1, polys: polys });
+      });
+    });
+    blds.sort((a, b) => a.depth - b.depth);
+
+    // a pin over each open matter's building (up to three abreast)
+    const slotOf = {};
+    CIVIC_SLOTS.forEach((s) => { slotOf[s[0]] = s; });
+    const matters = docket && Array.isArray(docket.matters) ? docket.matters : [];
+    const atBuilding = {};
+    matters.forEach((m) => {
+      if (!m || !slotOf[m.building]) return;
+      (atBuilding[m.building] = atBuilding[m.building] || []).push(m);
+    });
+    const pins = [];
+    let n = 0;
+    CIVIC_SLOTS.forEach((s) => {
+      const here = (atBuilding[s[0]] || []).slice(0, MAX_PINS_PER_BUILDING);
+      const top = P(s[1] + 1, s[2] + 1, ROOF[s[0]] + 8);
+      here.forEach((m, i) => {
+        const g = glyph(m.rule, 7, 7, 13);
+        const dx = (i - (here.length - 1) / 2) * 26;
+        pins.push({ key: String(m.id), building: s[0], state: pinState(m.state), title: String(m.short || m.title || ''), x: r1(top[0] - 15 + dx), y: r1(top[1] - 52), h: 52, gf: g.fill, gl: g.line, delay: -(n * 0.9) });
+        n += 1;
+      });
+    });
+
+    // work on the move: parcels ride the ring road to Review, and leave through Release
+    const route = (pts) => pts.map((p, i) => { const q = P(p[0], p[1]); return (i ? 'L' : 'M') + r1(q[0]) + ' ' + r1(q[1]); }).join('');
+    const toReview = [
+      route([[8, 3.6], [8, 4.5], [11.5, 4.5], [11.5, 10], [10.7, 10]]),
+      route([[12.4, 8], [11.5, 8], [11.5, 10.2], [10.7, 10.2]]),
+      route([[3.6, 7.5], [4.5, 7.5], [4.5, 11.5], [9.8, 11.5], [9.8, 10.8]]),
+      route([[7.5, 12.4], [7.5, 11.5], [10.2, 11.5], [10.2, 10.8]]),
+    ];
+    const fed = {};
+    districts.forEach((D) => { if (D.lot.route != null) fed[D.lot.route] = true; });
+    const parcels = [];
+    toReview.forEach((d, i) => { if (fed[i]) [0, 1].forEach((j) => parcels.push({ key: 'p' + i + j, d: d, dur: 12 + i, delay: -(i * 2.7 + j * 6.2), out: false })); });
+    if (districts.length) [0, 1].forEach((j) => parcels.push({ key: 'out' + j, d: route([[10.6, 9.6], [11.5, 9.6], [11.5, 8], [11.5, 0]]), dur: 10, delay: -(j * 5), out: true }));
+
+    const line = docket && docket.line ? String(docket.line) : FALLBACK_LINE;
+    const pinCount = { needs: 0, moving: 0, settled: 0 };
+    pins.forEach((p) => { pinCount[p.state] += 1; });
+    const label = 'The governor city: the nine civic buildings round the plaza and '
+      + (districts.length === 1 ? 'one district' : districts.length + ' districts') + ', one for each open goal'
+      + (pins.length ? '. Pins: ' + pinCount.needs + ' need you, ' + pinCount.moving + ' moving, ' + pinCount.settled + ' settled.' : '.');
+
+    return { mode: mode, evening: evening, crate: { fill: I.crate.t, edge: I.crate.s }, flat: flat, blds: blds, pins: pins, parcels: parcels, districts: districts, unplaced: unplaced, line: line, label: label };
+  }
+
+  // Where the start governing button goes: the street (task 1004525 builds it),
+  // a hall page of its own beside this one.
+  const STREET_HREF = '/builders/street';
+
+  const api = {
+    isoTheme: isoTheme, isoKit: isoKit, isoBox: isoBox, isoGable: isoGable, isoHip: isoHip, isoSaw: isoSaw,
+    isoTree: isoTree, isoLight: isoLight, isoInstitution: isoInstitution, isoWork: isoWork, glyph: glyph, rnd: rnd,
+    lotsFor: lotsFor, districtWork: districtWork, cityModel: cityModel,
+    CIVIC_SLOTS: CIVIC_SLOTS, ROOF: ROOF, BASE_LOTS: BASE_LOTS, MAX_DISTRICTS: MAX_DISTRICTS, MAX_PINS_PER_BUILDING: MAX_PINS_PER_BUILDING,
+    FALLBACK_LINE: FALLBACK_LINE, STREET_HREF: STREET_HREF,
+  };
+  root.GovCity = api;
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+}(typeof window !== 'undefined' ? window : globalThis));

package/modules/hall-ui/public/city.css

@@ -0,0 +1,110 @@
+/* modules/hall-ui/public/city.css — THE GOVERNOR CITY's home (task 1004524,
+   goal 1000125, R02). The home branch of the <style> in
+   docs/design/mocks/governor-city/Street.dc.html: the same keyframes (ring,
+   zoom, travel, bob, drift), the same wordmark, mode switch, start button and
+   line, the same sizes. What changed is where the colours come from: the
+   prototype wrote its theme() values inline; here every colour is one of the
+   hall's tokens (style.css + the branding pack), whose values ARE the
+   prototype's (bg #000 / #edecee, ink, ink-soft, the rule, the accent
+   #fb9569 and its dark ink #2a1305). The drawing's own faces are drawing data
+   in city-draw.js (the prototype's iso sub-palette).
+   No :root here (tests/hall_reading_world.mjs): page tokens live on the body.
+   The two dark blocks below are byte-identical twins (the hall's switch is
+   html[data-theme], set by city.js from the same 'hall-theme' preference
+   every hall page reads; the media block is first paint). */
+
+body[data-page="city"] {
+  --city-contact: drop-shadow(0 6px 8px color-mix(in srgb, var(--ink) 10%, transparent));
+  --city-glow: none;
+  --city-crate: color-mix(in srgb, var(--ink) 7%, transparent);
+  --city-crate-edge: color-mix(in srgb, var(--ink) 55%, transparent);
+  /* the hall's ground plate and its dark veil (style.css body::before/::after) are
+     the hall chrome's; the city is its own ground, so both are off here */
+  --plate: none;
+  --plate-veil: none;
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-body);
+}
+html[data-theme="dark"] body[data-page="city"] {
+  --city-contact: none;
+  --city-glow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) body[data-page="city"] {
+    --city-contact: none;
+    --city-glow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
+  }
+}
+html:has(body[data-page="city"]) { height: 100%; }
+
+/* the header: wordmark left, the sun/moon switch right */
+.city-top { position: absolute; left: 32px; right: 32px; top: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; z-index: 3; }
+.city-mark { font-weight: 500; font-size: 17px; letter-spacing: -0.015em; text-transform: lowercase; }
+.city-mode { background: none; border: 1px solid var(--rule); border-radius: 999px; height: 36px; padding: 0 11px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); font-family: var(--font-body); }
+.city-mode svg { display: block; stroke-width: 1.4; }
+
+/* the stage: the prototype's 1440 x 900 artboard, scaled to the window by
+   city.js (--city-scale) and centred, so 1440 x 900 is the prototype pixel
+   for pixel */
+.city-main { position: fixed; inset: 0; z-index: 1; }
+.city-frame { position: absolute; inset: 0; overflow: hidden; }
+.city-stage { position: absolute; left: 50%; top: 50%; width: 1440px; height: 900px; transform: translate(-50%, -50%) scale(var(--city-scale, 1)); transform-origin: 50% 50%; }
+.city-zoom, .city-drift { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; }
+.city-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
+.city-blds { filter: var(--city-contact); }
+.city-parcels, .city-pins { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; pointer-events: none; }
+
+/* parcels: crates riding the ring road on offset-path */
+.city-parcel { position: absolute; left: 0; top: 0; width: 9px; height: 7px; margin: -4px 0 0 -5px; box-sizing: border-box; border-radius: 2px; background: var(--city-crate); border: 1px solid var(--city-crate-edge); offset-rotate: 0deg; }
+.city-parcel--out { background: var(--accent); border-color: var(--accent); }
+
+/* pins: orange and pulsing waits on you; ink and bobbing is moving; grey is settled */
+.city-pin { position: absolute; width: 30px; height: 52px; display: flex; flex-direction: column; align-items: center; }
+.city-pin__head { position: relative; width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
+.city-pin__head svg { display: block; }
+.city-pin__head path { fill: currentColor; }
+.city-pin__head path + path { fill: none; stroke: currentColor; stroke-width: 1.2; }
+.city-pin__stem { width: 0; flex-grow: 1; border-left: 1px solid transparent; }
+.city-pin__ring { position: absolute; inset: -1px; border-radius: 999px; border: 1px solid var(--accent); }
+.city-pin--needs .city-pin__head { background: var(--accent); color: var(--accent-on); box-shadow: var(--city-glow); }
+.city-pin--needs .city-pin__stem { border-left-color: color-mix(in srgb, var(--accent) 60%, transparent); }
+.city-pin--moving .city-pin__head { background: var(--ink); color: var(--bg-card); }
+.city-pin--moving .city-pin__stem { border-left-color: color-mix(in srgb, var(--ink) 45%, transparent); }
+.city-pin--settled .city-pin__head { background: color-mix(in srgb, var(--ink) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); color: var(--ink-faint); }
+.city-pin--settled .city-pin__stem { border-left-color: color-mix(in srgb, var(--ink) 22%, transparent); }
+
+/* the one door and the one line */
+.city-door { position: absolute; left: 0; right: 0; bottom: 70px; display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2; }
+.city-start { display: inline-flex; align-items: center; box-sizing: border-box; font-family: var(--font-body); font-size: 17px; font-weight: 500; height: 56px; padding: 0 38px; border-radius: 999px; border: 0; cursor: pointer; background: var(--accent); color: var(--accent-on); text-transform: lowercase; text-decoration: none; transition: transform 200ms cubic-bezier(.2,.7,.3,1); }
+.city-start:hover { background: var(--accent-lift); transform: translateY(-2px); }
+.city-line { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: center; }
+.city-mode:focus-visible, .city-start:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+
+@media (max-width: 560px) {
+  .city-top { left: 16px; right: 16px; }
+  .city-door { bottom: 40px; padding: 0 16px; }
+}
+
+/* the prototype's motion, verbatim */
+@keyframes city-ring { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
+@keyframes city-zoom { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
+@keyframes city-travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
+@keyframes city-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
+@keyframes city-drift { from { transform: translate(0, 0); } to { transform: translate(-8px, 5px); } }
+.city-zoom { animation: city-zoom 420ms cubic-bezier(.16,1,.3,1) both; transform-origin: 50% 60%; }
+.city-drift { animation: city-drift 46s ease-in-out infinite alternate; }
+.city-pin { animation: city-bob 6s ease-in-out infinite; }
+.city-pin__ring { animation: city-ring 2.8s cubic-bezier(.2,.7,.3,1) infinite; }
+.city-parcel { animation-name: city-travel; animation-timing-function: linear; animation-iteration-count: infinite; }
+
+/* The Kill Switch: under reduced motion nothing moves. The rest frame is the
+   whole city with its pins standing still; the parcels, which only mean
+   something while they travel, are left out of it. */
+@media (prefers-reduced-motion: reduce) {
+  body[data-page="city"] *, body[data-page="city"] *::before, body[data-page="city"] *::after { animation: none !important; transition: none !important; }
+  .city-parcels { display: none; }
+}

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

@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>The city — {{worldName}}</title>
+  <meta name="description" content="The governor's home: the project drawn as a small city, a pin over every matter that waits on you, and one door into the street.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <!-- The faces (Manrope, JetBrains Mono) come from the branding pack's font
+       links, injected into this head by the server like every hall page's
+       (tests/hall_tokens.mjs: no hall page hardcodes a web-font stylesheet).
+       The prototype carried its own Google Fonts link for the same two faces. -->
+  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/city.css?v=2026-10-02-city1">
+</head>
+<!-- THE GOVERNOR CITY, HOME (task 1004524, goal 1000125, R02). The home view
+     of docs/design/mocks/governor-city/Street.dc.html (homeView and the home
+     branch of its template), built over the governor docket (GET
+     /api/bongos/government/docket, task 1004523) and the open goals with their
+     task rollups. The markup below is the prototype's home: the wordmark and
+     the sun/moon switch in the header, the city, one button and one line.
+     Nothing else is on the page, on purpose: no hall sidebar, no top bar.
+
+     The drawing is city-draw.js (the prototype's iso kit, verbatim, as pure
+     data); city.js reads the three feeds and turns the lists into SVG paths
+     and the pin and parcel spans; city.css is the template's <style> on the
+     hall's tokens.
+
+     The button is a link to /builders/street, the street's own hall page,
+     which task 1004525 builds. It is an <a>, not the prototype's <button>,
+     because pressing it goes to another page.
+
+     The page is gated on board.vote.cast (src/bongos/serve-internal.js), the
+     same atom the docket read checks, so whoever reaches the city can read
+     what it draws. -->
+<body data-page="city" class="city">
+
+<header class="city-top">
+  <span class="city-mark">{{productName}}</span>
+  <button type="button" class="city-mode" id="cityMode" aria-label="Switch to light mode" title="Switch to light mode">
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" aria-hidden="true"><path id="cityModeIcon" d=""></path></svg>
+  </button>
+</header>
+
+<main class="city-main" id="cityMain">
+  <div class="city-frame" id="cityFrame">
+    <div class="city-stage" id="cityStage" role="img" aria-label="The governor city">
+      <div class="city-zoom">
+        <div class="city-drift">
+          <svg class="city-svg" id="citySvg" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true" focusable="false">
+            <g id="cityFlat"></g>
+            <g id="cityBlds" class="city-blds"></g>
+          </svg>
+          <div class="city-parcels" id="cityParcels" aria-hidden="true"></div>
+          <div class="city-pins" id="cityPins" aria-hidden="true"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="city-door">
+    <a class="city-start" id="cityStart" href="/builders/street" aria-label="Start governing: enter the street view">start governing</a>
+    <h1 class="city-line" id="cityLine" aria-live="polite">reading the docket</h1>
+  </div>
+</main>
+
+<script src="/builders/city-draw.js?v=2026-10-02-city1"></script>
+<script src="/builders/city.js?v=2026-10-02-city1"></script>
+</body>
+</html>