@bongos/core 1.21.7 → 1.21.9

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

@@ -0,0 +1,585 @@
+// modules/hall-ui/public/street-draw.js — THE STREET's drawing, as data (task
+// 1004525, goal 1000125; R03 of the Governor City).
+//
+// WHAT THIS IS. The street view of the reference design, docs/design/mocks/
+// governor-city/Street.dc.html: its front-on drawing kit (box, gable, sawtooth,
+// tree, light), the nine civic recipes (civic), the district work (work), the
+// prototype's `ready` slab (workItem), the street's theme (theme() minus its iso
+// half, which city-draw.js already carries) and the street branch of
+// renderVals(): the segs order, the road, the crates, the names and state lines,
+// the group brackets, the pins, the doors and the six readings (signsOf). Every
+// kit function is the prototype's, ported verbatim; tests/hall_street.mjs holds
+// them equal by running the prototype's own Component class beside this file.
+// The decision glyphs and the seeded random are city-draw.js's (GovCity), which
+// are the prototype's too: one copy, never a fork.
+//
+// ONE CHANGE OF INPUT. renderVals() drew the prototype's sample docket and its
+// four hand-placed districts. streetModel() reads the real governor docket (GET
+// /api/bongos/government/docket, task 1004523) for the buildings, pins, state
+// lines and readings, the open goals and their task rollups (GET /goals, GET
+// /goals/rollups) for the districts, and the viewer's earnings for "your share
+// this month". Where the real data had to bend the design, it is said once here
+// and in the ship notes:
+//  * Districts. One per OPEN goal, in the order the goals come, between
+//    Automation and Review. Up to four keep the prototype's 90 px plots; past
+//    four each plot narrows (never under 56 px) and past that the street grows
+//    longer than the 1440 px artboard, so the page scrolls it sideways rather
+//    than drop a goal.
+//  * A district's work. The prototype hand-placed four buildings per district.
+//    Here the plot's slots (one per ~21 px) are shared among the goal's tasks in
+//    proportion: shipped work stands built (tower, setback or shed, in the
+//    city's shares), work being built is a braced scaffold, work not started is
+//    the prototype's `ready` slab (workItem). A goal with no tasks keeps the
+//    prototype's trees.
+//  * Review. The prototype opens with Review a vacant lot. Here Review is held
+//    (drawn glass) while any source that stands in it can be read; it draws as
+//    the empty seat only when none can (every Review source off or still to
+//    come). The matters standing at Review (criteria awaiting a tester's UAT)
+//    are the work queued at its door: up to three crates outside it and the
+//    prototype's dashed count pin, "waiting for a tester", instead of one pin
+//    each.
+//  * Pins. A building can hold more matters than the prototype's one; up to
+//    three stand over it, stacked one label above the other, needs first (the
+//    docket's own order). The building's state line carries the full count.
+//  * State lines. The reading that reads a building gives its line when it is
+//    live (people, money, fairness, rules at work); Planning says how many goals
+//    are open; otherwise the line counts the building's matters.
+//  * Your share. The sum of the viewer's earnings this calendar month (UTC), in
+//    dollars at the platform's peg of one credit to one dollar (ADR 0054). The
+//    prototype's "+$24" flash on a release waits for the card that releases
+//    (task 1004528).
+//
+// PURE. No DOM, no fetch, no clock (the month for "your share" is passed in):
+// the same inputs give the same street, so the tests pin the model without a
+// browser and street.js only turns the lists into nodes.
+
+(function (root) {
+  'use strict';
+  const City = root.GovCity || (typeof require === 'function' ? require('./city-draw.js') : null);
+
+  // ---------- the street's palette (Street.dc.html theme(mode), less .iso) ----------
+  function theme(mode) {
+    if (mode === 'light') {
+      return {
+        bg: '#edecee', card: '#fbfafc', ink: '#17181a', soft: '#55565a', faint: '#65656a', rule: '#dcdbdd', ruleStrong: '#c6c6c8',
+        accentText: '#a3481a', wash: 'rgba(23,24,26,0.045)', line: 'rgba(23,24,26,0.30)', road: 'rgba(23,24,26,0.045)', lane: 'rgba(23,24,26,0.22)',
+        shadow: 'rgba(23,24,26,0.10)',
+        civic: { f: '#fbfafc', r: '#dedde2', t: '#f1f0f3', s: 'rgba(23,24,26,0.34)' },
+        work: { f: '#f4f3f6', r: '#d9d8dd', t: '#e9e8ec', s: 'rgba(23,24,26,0.24)' },
+        roof: { f: '#e6e5e9', r: '#cfced4', t: '#dcdbe0', s: 'rgba(23,24,26,0.34)' },
+        glass: { f: 'rgba(91,111,208,0.13)', r: 'rgba(91,111,208,0.22)', t: 'rgba(91,111,208,0.10)', s: 'rgba(60,80,180,0.50)' },
+        ghost: { f: 'rgba(23,24,26,0.02)', r: 'none', t: 'none', s: 'rgba(23,24,26,0.40)', dash: '4 4' },
+        scaffold: { f: 'rgba(23,24,26,0.02)', r: 'rgba(23,24,26,0.02)', t: 'rgba(23,24,26,0.02)', s: 'rgba(23,24,26,0.45)', dash: '3 3' },
+        win: 'rgba(23,24,26,0.13)', winLit: 'rgba(214,140,80,0.60)', tree: 'rgba(91,111,208,0.22)', treeLine: 'rgba(60,80,180,0.45)', beacon: '#fb9569',
+        pinMoving: { bg: '#17181a', gc: '#ffffff', stem: 'rgba(23,24,26,0.45)' }, pinSettled: { bg: '#e2e1e4', border: '1px solid rgba(23,24,26,0.22)', gc: '#65656a', stem: 'rgba(23,24,26,0.25)' },
+        seatFor: { bg: '#17181a', fg: '#ffffff' }, seatOpen: 'rgba(23,24,26,0.40)', crate: 'rgba(23,24,26,0.55)', crateFill: 'rgba(23,24,26,0.04)',
+      };
+    }
+    return {
+      bg: '#000000', card: '#101012', ink: '#ffffff', soft: '#c0c0c0', faint: '#a8a8a8', rule: 'rgba(255,255,255,0.12)', ruleStrong: 'rgba(255,255,255,0.18)',
+      accentText: '#fcb596', wash: 'rgba(255,255,255,0.045)', line: 'rgba(255,255,255,0.26)', road: 'rgba(255,255,255,0.03)', lane: 'rgba(255,255,255,0.18)',
+      shadow: 'none',
+      civic: { f: '#25252a', r: '#16161a', t: '#3b3b41', s: 'rgba(255,255,255,0.15)' },
+      work: { f: '#1b1b1f', r: '#0f0f12', t: '#2d2d32', s: 'rgba(255,255,255,0.12)' },
+      roof: { f: '#2f2f35', r: '#1d1d22', t: '#38383e', s: 'rgba(255,255,255,0.15)' },
+      glass: { f: 'rgba(120,140,230,0.16)', r: 'rgba(100,120,210,0.12)', t: 'rgba(150,170,255,0.22)', s: 'rgba(170,190,255,0.42)' },
+      ghost: { f: 'rgba(255,255,255,0.02)', r: 'none', t: 'none', s: 'rgba(255,255,255,0.40)', dash: '4 4' },
+      scaffold: { f: 'rgba(255,255,255,0.02)', r: 'rgba(255,255,255,0.015)', t: 'rgba(255,255,255,0.03)', s: 'rgba(255,255,255,0.45)', dash: '3 3' },
+      win: 'rgba(255,255,255,0.08)', winLit: 'rgba(255,214,170,0.80)', tree: 'rgba(91,111,208,0.32)', treeLine: 'rgba(140,155,230,0.45)', beacon: '#fff4e6',
+      pinMoving: { bg: '#ffffff', gc: '#17181a', stem: 'rgba(255,255,255,0.45)' }, pinSettled: { bg: '#1e1e22', border: '1px solid rgba(255,255,255,0.22)', gc: '#a8a8a8', stem: 'rgba(255,255,255,0.22)' },
+      seatFor: { bg: '#ffffff', fg: '#17181a' }, seatOpen: 'rgba(255,255,255,0.40)', crate: 'rgba(255,255,255,0.60)', crateFill: 'rgba(255,255,255,0.04)',
+    };
+  }
+
+  // ---------- the front-on kit (verbatim) ----------
+  function push(out, d, f, s, dash, w) { out.push({ d: d, f: f, s: s, dash: dash || 'none', w: w || 1 }); }
+  function rect(x, y, w, h) { return 'M' + x + ' ' + y + 'h' + w + 'v' + h + 'h' + (-w) + 'Z'; }
+  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 box(out, T, x, G, w, h, tone, o) {
+    o = o || {};
+    const d = o.d === undefined ? 7 : o.d, z = o.z || 0, base = G - z, y = base - h, dash = tone.dash || 'none';
+    push(out, 'M' + (x + w) + ' ' + y + 'L' + (x + w + d) + ' ' + (y - d) + 'L' + (x + w + d) + ' ' + (base - d) + 'L' + (x + w) + ' ' + base + 'Z', tone.r, tone.s, dash);
+    push(out, 'M' + x + ' ' + y + 'L' + (x + d) + ' ' + (y - d) + 'L' + (x + w + d) + ' ' + (y - d) + 'L' + (x + w) + ' ' + y + 'Z', tone.t, tone.s, dash);
+    push(out, rect(x, y, w, h), tone.f, tone.s, dash);
+    if (o.win) {
+      let p = '';
+      for (let wy = y + 7; wy < base - 9; wy += 9) for (let wx = x + 5; wx < x + w - 6; wx += 8) p += rect(wx, wy, 4, 4);
+      if (p) push(out, p, o.lit ? T.winLit : T.win, 'none');
+    }
+    if (o.fins) {
+      let p = '';
+      for (let i = 1; i < o.fins; i++) { const fx = Math.round(x + w * i / o.fins) + 0.5; p += 'M' + fx + ' ' + (y + 3) + 'L' + fx + ' ' + (base - 3); }
+      push(out, p, 'none', tone.s);
+    }
+    if (o.grid) {
+      let p = '';
+      for (let gy = y + 10; gy < base - 2; gy += 10) p += 'M' + x + ' ' + gy + 'h' + w;
+      for (let i = 1; i < o.grid; i++) p += 'M' + Math.round(x + w * i / o.grid) + ' ' + y + 'V' + base;
+      push(out, p, 'none', tone.s);
+    }
+    if (o.door) {
+      const dw = Math.max(6, Math.round(w * 0.16)), dh = Math.min(15, Math.round(h * 0.42));
+      push(out, rect(Math.round(x + w / 2 - dw / 2), base - dh, dw, dh), T.bg === '#000000' ? '#050506' : '#cfced3', tone.s);
+    }
+    if (o.brace) push(out, 'M' + x + ' ' + y + 'L' + (x + w) + ' ' + base + 'M' + (x + w) + ' ' + y + 'L' + x + ' ' + base, 'none', tone.s, '3 3');
+  }
+
+  function gable(out, x, yTop, w, hr, tone) {
+    const d = 7;
+    push(out, 'M' + (x + w / 2) + ' ' + (yTop - hr) + 'L' + (x + w / 2 + d) + ' ' + (yTop - hr - d) + 'L' + (x + w + d) + ' ' + (yTop - d) + 'L' + (x + w) + ' ' + yTop + 'Z', tone.r, tone.s);
+    push(out, 'M' + x + ' ' + yTop + 'L' + (x + w / 2) + ' ' + (yTop - hr) + 'L' + (x + w) + ' ' + yTop + 'Z', tone.f, tone.s);
+  }
+
+  function sawtooth(out, x, yTop, w, n, hr, tone, glass) {
+    for (let i = 0; i < n; i++) {
+      const x0 = x + w * i / n, x1 = x0 + w / n;
+      push(out, 'M' + x0 + ' ' + yTop + 'L' + x1 + ' ' + (yTop - hr) + 'L' + x1 + ' ' + yTop + 'Z', tone.f, tone.s);
+      push(out, rect(x1 - 3, yTop - hr + 3, 3, hr - 3), glass.f, glass.s);
+    }
+  }
+
+  function tree(out, T, cx, G, size) {
+    push(out, 'M' + cx + ' ' + G + 'V' + (G - size), 'none', T.treeLine);
+    push(out, ellipse(cx, G - size - size * 0.35, size * 0.5, size * 0.5), T.tree, T.treeLine);
+  }
+
+  function light(out, cx, cy, r, color) {
+    push(out, ellipse(cx, cy, r * 2.6, r * 2.6), 'rgba(251,149,105,0.10)', 'none');
+    push(out, ellipse(cx, cy, r, r), color, 'none');
+  }
+
+  // Each civic building, drawn front-on inside its own width w with its base on
+  // the street G. Returns its roof height.
+  function civic(out, T, kind, x, G, w, st) {
+    const C = T.civic, R = T.roof, Gl = T.glass, lit = st.evening;
+    if (kind === 'charter') {
+      box(out, T, x, G, w, 8, C);
+      box(out, T, x + 6, G, w - 12, 70, C, { z: 8, win: true, lit: lit });
+      box(out, T, x + 14, G, w - 28, 60, C, { z: 78, win: true, lit: lit });
+      box(out, T, x + 22, G, w - 44, 50, C, { z: 138, fins: 4 });
+      box(out, T, x + 30, G, w - 60, 24, Gl, { z: 188, grid: 2 });
+      light(out, x + w / 2 + 3, G - 222, 3.2, T.beacon);
+      return 226;
+    }
+    if (kind === 'rules') {
+      box(out, T, x, G, w, 6, C);
+      box(out, T, x + 6, G, w - 12, 46, C, { z: 6, fins: 10, win: false });
+      box(out, T, x + 2, G, w - 4, 6, R, { z: 52 });
+      if (st.fixes) push(out, rect(x + 10, G - 46, w - 20, 3), T.winLit, 'none');
+      return 64;
+    }
+    if (kind === 'disputes') {
+      box(out, T, x, G, 24, 40, C, { win: true, lit: lit });
+      box(out, T, x + 24, G, 32, 84, C, { fins: 3, door: true });
+      gable(out, x + 24, G - 84, 32, 16, R);
+      box(out, T, x + 56, G, 24, 40, C, { win: true, lit: lit });
+      return 102;
+    }
+    if (kind === 'people') {
+      box(out, T, x, G, 34, 28, C, { door: true });
+      gable(out, x, G - 28, 34, 15, R);
+      box(out, T, x + 40, G, 40, 36, C, { door: true, win: true, lit: lit });
+      gable(out, x + 40, G - 36, 40, 18, R);
+      return 58;
+    }
+    if (kind === 'planning') {
+      box(out, T, x, G, w, 72, C, { win: true, lit: lit, door: true });
+      sawtooth(out, x, G - 72, w, 3, 18, R, Gl);
+      return 92;
+    }
+    if (kind === 'review') {
+      if (!st.reviewHeld) {
+        box(out, T, x + 3, G, w - 6, 82, T.ghost, { d: 0 });
+        push(out, 'M' + (x + 14) + ' ' + G + 'V' + (G - 34), 'none', T.ghost.s);
+        push(out, rect(x + 6, G - 46, 30, 12), T.bg, T.ghost.s);
+        return 86;
+      }
+      box(out, T, x, G, w, 22, C, { door: true });
+      box(out, T, x + 5, G, w - 10, 60, Gl, { z: 22, grid: 5 });
+      box(out, T, x + 2, G, w - 4, 4, R, { z: 82 });
+      return 90;
+    }
+    if (kind === 'release') {
+      box(out, T, x, G, 26, 150, C, { win: true, lit: lit });
+      light(out, x + 16, G - 160, 2.6, T.beacon);
+      box(out, T, x + 26, G, 40, 18, C, { z: 104 });
+      box(out, T, x + 66, G, 26, 150, C, { win: true, lit: lit });
+      light(out, x + 82, G - 160, 2.6, T.beacon);
+      return 166;
+    }
+    if (kind === 'treasury') {
+      box(out, T, x, G, w, 10, C);
+      box(out, T, x + 8, G, w - 16, 82, C, { z: 10, fins: 5, door: true });
+      box(out, T, x + 4, G, w - 8, 8, R, { z: 92 });
+      box(out, T, x + 20, G, w - 40, 14, C, { z: 100 });
+      return 120;
+    }
+    if (kind === 'automation') {
+      box(out, T, x, G, w, 54, C, { win: true, lit: lit, door: true });
+      box(out, T, x + 10, G, 14, 46, C, { z: 54 });
+      box(out, T, x + w - 30, G, 24, 18, R, { z: 54, fins: 4 });
+      light(out, x + 20, G - 108, 2.8, T.beacon);
+      return 112;
+    }
+    return 60;
+  }
+
+  // The prototype's district work, plus `slab`: its workItem 'ready' stage (a
+  // task not started yet), drawn at the street's base.
+  function work(out, T, kind, x, G, w, h, lit) {
+    if (kind === 'tower') box(out, T, x, G, w, h, T.work, { win: true, lit: lit, d: 5 });
+    else if (kind === 'setback') {
+      box(out, T, x, G, w, Math.round(h * 0.6), T.work, { win: true, lit: lit, d: 5 });
+      box(out, T, x + 4, G, w - 8, Math.round(h * 0.4), T.work, { z: Math.round(h * 0.6), win: true, lit: lit, d: 5 });
+    } else if (kind === 'shed') {
+      box(out, T, x, G, w, 16, T.work, { d: 5, door: true });
+      gable(out, x, G - 16, w, 10, T.roof);
+    } else if (kind === 'scaffold') box(out, T, x, G, w, h, T.scaffold, { d: 5, brace: true });
+    else if (kind === 'trees') { tree(out, T, x + w * 0.35, G, 12); tree(out, T, x + w * 0.75, G, 9); }
+    else if (kind === 'slab') box(out, T, x, G, w, 6, T.work, { d: 6 });
+    else if (kind === 'stakes') {
+      // workItem's 'backlog' stage (a staked plot), set on the street line
+      push(out, 'M' + x + ' ' + G + 'L' + (x + 7) + ' ' + (G - 7) + 'L' + (x + w + 7) + ' ' + (G - 7) + 'L' + (x + w) + ' ' + G + 'Z', 'none', T.ghost.s, '3 3');
+      push(out, 'M' + (x + 3) + ' ' + G + 'V' + (G - 16) + 'M' + (x + w - 3) + ' ' + G + 'V' + (G - 16), 'none', T.ghost.s);
+    }
+  }
+
+  // ---------- the street's fixed layout (renderVals) ----------
+  const G = 556;
+  const SEGS = Object.freeze([
+    Object.freeze({ k: 'charter', w: 84, g: 0 }), Object.freeze({ k: 'rules', w: 96, g: 0 }), Object.freeze({ k: 'disputes', w: 80, g: 0 }),
+    Object.freeze({ k: 'people', w: 80, g: 1 }), Object.freeze({ k: 'planning', w: 80, g: 1 }),
+    Object.freeze({ k: 'automation', w: 80, g: 2 }),
+    Object.freeze({ districts: true, g: 2 }),
+    Object.freeze({ k: 'review', w: 86, g: 3 }), Object.freeze({ k: 'release', w: 92, g: 3 }),
+    Object.freeze({ k: 'treasury', w: 84, g: 4 }),
+  ]);
+  const GROUP_NAMES = Object.freeze(['how we decide', 'who and what', 'the work', 'checks and going live', 'money']);
+  const CIVIC_KEYS = Object.freeze(['charter', 'rules', 'disputes', 'people', 'planning', 'automation', 'review', 'release', 'treasury']);
+  const DISTRICT_W = 90;
+  const DISTRICT_MIN_W = 56;
+  const DISTRICT_SPAN = 4 * DISTRICT_W + 3 * 10; // the prototype's four plots and their gaps
+  const MAX_DISTRICTS = 8;
+  const MORE_KEY = 'more';
+  const GOALS_HREF = '/builders/goals';
+  const ARTBOARD_W = 1440;
+  const MAX_PINS_PER_BUILDING = 3;
+  const PIN_STACK = 40;
+  const MAX_CRATES = 3;
+  const HINT = 'work moves left to right · orange waits on you · white is moving without you';
+  const READING_KEYS = Object.freeze(['flow', 'promises', 'money', 'people', 'fairness', 'rules']);
+  const READING_LABELS = Object.freeze({ flow: 'flow', promises: 'promises', money: 'money', people: 'people', fairness: 'fairness', rules: 'rules at work' });
+  const READING_BUILDING = Object.freeze({ flow: 'review', promises: 'planning', money: 'treasury', people: 'people', fairness: 'disputes', rules: 'rules' });
+  // Review's own sources (docket.js EXPECTED_SOURCES): while none can be read,
+  // no one holds the seat.
+  const REVIEW_SOURCES_HELD = Object.freeze(['live', 'not_yours', 'unavailable']);
+
+  // Where a door opens. The interiors are task 1004526's; until they land the
+  // street marks the building the address names (README "Where the screens live").
+  function buildingHref(key) { return '/builders/street#building=' + encodeURIComponent(key); }
+  function districtHref(goalId) { return '/builders/street#district=' + encodeURIComponent(goalId); }
+  // `#building=charter` / `#district=1000125` → { kind, key }, else null.
+  function parseHash(hash) {
+    const m = /^#(building|district)=([^&]+)$/.exec(String(hash || ''));
+    if (!m) return null;
+    let key;
+    try { key = decodeURIComponent(m[2]); } catch (_) { return null; }
+    if (m[1] === 'building' && CIVIC_KEYS.indexOf(key) < 0) return null;
+    return { kind: m[1], key: key };
+  }
+
+  function districtWidth(n) {
+    if (n <= 4) return DISTRICT_W;
+    return Math.max(DISTRICT_MIN_W, Math.floor((DISTRICT_SPAN - (n - 1) * 10) / n));
+  }
+
+  // The segs with x filled in: renderVals()' spacing (30 between groups, 10
+  // between districts, 18 otherwise), starting at 43. Past MAX_DISTRICTS open
+  // goals the first seven stand as districts and the eighth plot is the rest,
+  // staked out, a door to the goals page.
+  function layout(goals) {
+    const shown = goals.length > MAX_DISTRICTS ? goals.slice(0, MAX_DISTRICTS - 1) : goals;
+    const more = goals.length - shown.length;
+    const dw = districtWidth(shown.length + (more ? 1 : 0));
+    const segs = [];
+    SEGS.forEach((s) => {
+      if (s.districts) {
+        shown.forEach((g) => segs.push({ d: String(g.id), title: String(g.title || ''), w: dw, g: 2 }));
+        if (more) segs.push({ d: MORE_KEY, more: more, title: more + ' more goals', w: dw, g: 2 });
+      } else segs.push({ k: s.k, w: s.w, g: s.g });
+    });
+    let x = 43;
+    segs.forEach((s, i) => {
+      if (i > 0) x += segs[i - 1].g !== s.g ? 30 : (s.d ? 10 : 18);
+      s.x = x; x += s.w;
+    });
+    return { segs: segs, width: Math.max(ARTBOARD_W, x + 43), districtW: dw };
+  }
+
+  function count(rollup, k) { return Math.max(0, Math.floor(Number(rollup && rollup[k]) || 0)); }
+
+  // A goal's tasks as the buildings on its plot (see the header).
+  function districtItems(goalId, w, rollup) {
+    const done = count(rollup, 'done'), active = count(rollup, 'active');
+    const waiting = count(rollup, 'ready') + count(rollup, 'blocked') + count(rollup, 'backlog');
+    const total = done + active + waiting;
+    const seed = String(goalId).split('').reduce((a, c) => a + c.charCodeAt(0), 0);
+    if (!total) return [{ kind: 'trees', w: Math.round(20 * 0.78), h: 0 }];
+    const slots = Math.max(1, Math.floor((w - 2) / 21));
+    // Every class that has work gets a slot when there is room, then the rest by share.
+    const classes = [['done', done], ['active', active], ['waiting', waiting]].filter((c) => c[1] > 0);
+    const n = {};
+    classes.forEach((c) => { n[c[0]] = 0; });
+    let left = slots;
+    classes.forEach((c) => { if (left > 0) { n[c[0]] += 1; left -= 1; } });
+    while (left > 0) {
+      let best = null, gap = -Infinity;
+      classes.forEach((c) => { const g2 = c[1] / total - n[c[0]] / slots; if (g2 > gap) { gap = g2; best = c[0]; } });
+      n[best] += 1; left -= 1;
+    }
+    const items = [];
+    let i = 0;
+    const raw = (j) => 20 + Math.round(City.rnd(seed * 7 + j * 13 + 1) * 6);
+    for (let j = 0; j < (n.done || 0); j++, i++) {
+      const r = City.rnd(seed * 17 + i * 11 + 3), r2 = City.rnd(seed * 13 + i * 29 + 5);
+      const kind = r < 0.58 ? 'tower' : r < 0.8 ? 'setback' : 'shed';
+      items.push({ kind: kind, w: Math.round(raw(i) * 0.78), h: kind === 'shed' ? 0 : Math.round(46 + r2 * 74) });
+    }
+    for (let j = 0; j < (n.active || 0); j++, i++) items.push({ kind: 'scaffold', w: Math.round(raw(i) * 0.78), h: Math.round(56 + City.rnd(seed * 5 + i) * 18) });
+    for (let j = 0; j < (n.waiting || 0); j++, i++) items.push({ kind: 'slab', w: Math.round(raw(i) * 0.78), h: 6 });
+    return items;
+  }
+
+  function districtLine(rollup) {
+    const done = count(rollup, 'done'), active = count(rollup, 'active');
+    const waiting = count(rollup, 'ready') + count(rollup, 'blocked') + count(rollup, 'backlog');
+    if (done) return done + ' built';
+    if (active) return active + ' being built';
+    if (waiting) return waiting + ' waiting';
+    return 'no work yet';
+  }
+
+  function countsLine(c) {
+    const n = (k) => Math.max(0, Number(c && c[k]) || 0);
+    if (n('needs')) return n('needs') + (n('needs') === 1 ? ' needs you' : ' need you');
+    if (n('moving')) return n('moving') + ' moving';
+    if (n('settled')) return n('settled') + ' settled';
+    return 'nothing open';
+  }
+
+  function pinState(state) {
+    return state === 'needs' || state === 'moving' || state === 'settled' ? state : 'moving';
+  }
+
+  const DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+  const MONTHS = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
+  // A deadline in the prototype's words: 'today', a weekday inside the week, else
+  // 'oct 9'. Read in UTC against `now` (passed in, so the model stays pure).
+  function whenWord(deadline, now) {
+    if (!deadline) return '';
+    const d = new Date(deadline);
+    if (isNaN(d.getTime())) return '';
+    const day = (t) => Math.floor(t / 86400000);
+    const diff = day(d.getTime()) - day(now);
+    if (diff === 0) return 'today';
+    if (diff > 0 && diff < 7) return DAYS[d.getUTCDay()];
+    return MONTHS[d.getUTCMonth()] + ' ' + d.getUTCDate();
+  }
+
+  // The viewer's share this month: the sum of GET /builders/:id/earnings days
+  // inside the calendar month of `now` (UTC). null when the read failed.
+  function monthShare(earnings, now) {
+    if (!earnings || !Array.isArray(earnings.days)) return null;
+    const t = new Date(now);
+    const ym = t.getUTCFullYear() + '-' + String(t.getUTCMonth() + 1).padStart(2, '0');
+    return earnings.days.reduce((s, d) => s + (d && String(d.day || '').slice(0, 7) === ym ? Math.round(Number(d.credits) || 0) : 0), 0);
+  }
+  function money(n) { return n == null ? '—' : '$' + Math.round(n).toLocaleString('en-US'); }
+
+  const FALLBACK_LINE = 'the docket could not be read just now';
+
+  // The whole street view as data.
+  //   docket    GET /government/docket body, or null when it failed
+  //   goals     GET /goals goals[] (only 'open' ones are drawn)
+  //   rollups   GET /goals/rollups rollups[]
+  //   earnings  GET /builders/:viewer/earnings body, or null
+  //   mode      'dark' | 'light'
+  //   now       ms since the epoch (for deadlines and the month)
+  //   here      parseHash() of the address, or null
+  function streetModel(input) {
+    const opts = input || {};
+    const docket = opts.docket && typeof opts.docket === 'object' && Array.isArray(opts.docket.matters) ? opts.docket : null;
+    const mode = opts.mode === 'light' ? 'light' : 'dark';
+    const T = theme(mode);
+    const now = Number(opts.now) || 0;
+    const here = opts.here || null;
+    const counts = docket && docket.counts ? docket.counts : { needs: 0, moving: 0, settled: 0 };
+    const needs = Math.max(0, Number(counts.needs) || 0);
+    const evening = !!docket && needs === 0;
+
+    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 L = layout(goals);
+    const segs = L.segs, W = L.width;
+    const at = {};
+    segs.forEach((s) => { at[s.k || ('d:' + s.d)] = s; });
+
+    const matters = docket ? docket.matters.filter((m) => m && CIVIC_KEYS.indexOf(m.building) >= 0) : [];
+    const bInfo = {};
+    (docket && Array.isArray(docket.buildings) ? docket.buildings : []).forEach((b) => { if (b && b.key) bInfo[b.key] = b; });
+    const reviewSources = (docket && Array.isArray(docket.sources) ? docket.sources : []).filter((s) => s && s.building === 'review');
+    // An unread docket keeps Review held: the empty seat is a claim about the
+    // project, and nothing has been read to make it.
+    const reviewHeld = !docket || !reviewSources.length || reviewSources.some((s) => REVIEW_SOURCES_HELD.indexOf(s.status) >= 0);
+    const queue = matters.filter((m) => m.building === 'review' && pinState(m.state) !== 'settled');
+
+    // the road
+    const flat = [];
+    push(flat, rect(32, G, W - 64, 30), T.road, 'none');
+    push(flat, 'M32 ' + G + 'H' + (W - 32), 'none', T.line);
+    push(flat, 'M32 ' + (G + 15) + 'H' + (W - 32), 'none', T.lane, '6 10');
+
+    // the buildings, and every district's work
+    const blds = [];
+    const roofs = {};
+    segs.forEach((s) => {
+      if (T.shadow !== 'none') push(flat, ellipse(s.x + s.w / 2 + 4, G + 2, s.w * 0.56, 5), T.shadow, 'none');
+      if (s.k) {
+        const polys = [];
+        roofs[s.k] = civic(polys, T, s.k, s.x, G, s.w, { evening: evening, reviewHeld: reviewHeld, fixes: City.rulesAtWork(docket) });
+        blds.push({ key: s.k, polys: polys });
+      } else {
+        let wx = s.x + 2;
+        const items = s.more ? [{ kind: 'stakes', w: s.w - 10, h: 0 }] : districtItems(s.d, s.w, byGoal[s.d]);
+        let top = 0;
+        items.forEach((it, j) => {
+          if (wx + it.w > s.x + s.w) return;
+          const polys = [];
+          work(polys, T, it.kind, wx, G, it.w, it.h, evening);
+          blds.push({ key: 'd:' + s.d + ':' + j, polys: polys });
+          top = Math.max(top, it.kind === 'shed' ? 26 : it.kind === 'trees' ? 22 : it.kind === 'stakes' ? 16 : it.h);
+          wx += it.w + 3;
+        });
+        roofs['d:' + s.d] = top;
+      }
+    });
+
+    // work queued at Review: crates outside its door
+    const rv = at.review;
+    const crates = queue.slice(0, MAX_CRATES).map((m, i) => ({ key: 'c' + i, x: rv.x - 20 - i * 19, y: G + 9, matter: String(m.id) }));
+
+    // names and one line of state under every building
+    const reading = {};
+    (docket && Array.isArray(docket.readings) ? docket.readings : []).forEach((r) => { if (r && r.key) reading[r.key] = r; });
+    const readingFor = {};
+    READING_KEYS.forEach((k) => { const r = reading[k]; if (r && r.status === 'live' && r.figure) readingFor[r.building || READING_BUILDING[k]] = r; });
+    function civicState(k) {
+      if (!docket) return '';
+      if (k === 'review') return !reviewHeld ? 'empty seat' : queue.length ? queue.length + ' waiting' : 'nothing waiting';
+      if (k === 'planning') return goals.length + (goals.length === 1 ? ' goal open' : ' goals open');
+      if (readingFor[k]) return readingFor[k].figure;
+      return countsLine(bInfo[k] ? bInfo[k].counts : null);
+    }
+    const cols = segs.map((s) => s.k
+      ? { key: s.k, x: s.x - 10, w: s.w + 20, name: s.k, title: s.k, state: civicState(s.k), strong: s.k === 'review' && !reviewHeld }
+      // districts stand 10 apart, so their names keep to their own plot (and ellipsis there)
+      : { key: 'd:' + s.d, x: s.x - 4, w: s.w + 8, name: s.title, title: s.title, state: s.more ? 'on the goals page' : districtLine(byGoal[s.d]), strong: false });
+    const groups = GROUP_NAMES.map((n, gi) => {
+      const mem = segs.filter((s) => s.g === gi);
+      const x0 = mem[0].x, x1 = mem[mem.length - 1].x + mem[mem.length - 1].w;
+      return { key: n, name: n, x: x0, w: x1 - x0 };
+    });
+
+    // pins, each with its label always showing (up to three stacked per building)
+    const pins = [];
+    const byB = {};
+    matters.forEach((m) => { if (m.building !== 'review') (byB[m.building] = byB[m.building] || []).push(m); });
+    CIVIC_KEYS.forEach((k) => {
+      const s = at[k];
+      const here2 = (byB[k] || []).slice(0, MAX_PINS_PER_BUILDING);
+      const top = G - roofs[k] - 10;
+      here2.forEach((m, i) => {
+        const g = City.glyph(m.rule, 9, 9, 16);
+        const when = whenWord(m.deadline, now);
+        const short = String(m.short || m.title || '');
+        pins.push({
+          key: String(m.id), building: k, state: pinState(m.state), isCount: false, count: '',
+          x: Math.round(s.x + s.w / 2 - 55 + (k === 'release' ? 4 : 0)), y: top - 78 - i * PIN_STACK, h: 78 + i * PIN_STACK,
+          label: when ? short + ' · ' + when : short, aria: String(m.title || short), gf: g.fill, gl: g.line,
+        });
+      });
+    });
+    if (queue.length) {
+      pins.push({ key: 'queue', building: 'review', state: 'queue', isCount: true, count: String(queue.length), x: Math.round(rv.x - 58), y: G - 70, h: 64, label: 'waiting for a tester', aria: (queue.length === 1 ? 'One piece of work waits' : queue.length + ' pieces of work wait') + ' for a tester at Review', gf: '', gl: '' });
+    }
+
+    // every building and district on the street is a door
+    const doors = segs.map((s) => s.k
+      ? { key: s.k, x: s.x - 4, y: G - roofs[s.k] - 6, w: s.w + 14, h: roofs[s.k] + 10, href: buildingHref(s.k), aria: 'Go inside ' + s.k, here: !!here && here.kind === 'building' && here.key === s.k }
+      : s.more
+        ? { key: 'd:' + MORE_KEY, x: s.x - 2, y: G - 130, w: s.w + 4, h: 132, href: GOALS_HREF, aria: 'See the other ' + s.more + ' open goals', here: false }
+        : { key: 'd:' + s.d, x: s.x - 2, y: G - 130, w: s.w + 4, h: 132, href: districtHref(s.d), aria: 'Go into the ' + (s.title || 'goal') + ' district', here: !!here && here.kind === 'district' && here.key === s.d });
+
+    // the six readings
+    const signs = READING_KEYS.map((k) => {
+      const r = reading[k] || { key: k, status: 'unavailable' };
+      const b = r.building || READING_BUILDING[k];
+      const live = r.status === 'live';
+      const bNeeds = bInfo[b] && bInfo[b].counts ? Number(bInfo[b].counts.needs) > 0 : false;
+      const figure = live && r.figure ? String(r.figure) : '—';
+      const line = live ? String(r.line || '') : r.status === 'not_yours' ? 'not yours to read here' : String(r.reason || (docket ? 'It could not be read just now.' : FALLBACK_LINE));
+      const label = String(r.label || READING_LABELS[k]);
+      return { key: k, label: label, figure: figure, line: line, building: b, href: buildingHref(b), hot: !!docket && (r.hot === true || bNeeds), here: !!here && here.kind === 'building' && here.key === b, aria: label + ': ' + figure + '. Go to ' + b };
+    });
+
+    const moving = Math.max(0, Number(counts.moving) || 0), settled = Math.max(0, Number(counts.settled) || 0);
+    const share = monthShare(opts.earnings, now);
+    const pinCount = { needs: 0, moving: 0, settled: 0 };
+    pins.forEach((p) => { if (pinCount[p.state] != null) pinCount[p.state] += 1; });
+    return {
+      mode: mode, width: W, evening: evening, reviewHeld: reviewHeld,
+      flat: flat, blds: blds, crates: crates, cols: cols, groups: groups, pins: pins, doors: doors, signs: signs,
+      hud: { needs: docket ? String(needs) : '—', moving: docket ? String(moving) : '—', share: money(share), hot: needs > 0 },
+      line: docket ? String(docket.line || '') : FALLBACK_LINE,
+      hint: docket && !evening ? HINT : '',
+      eveningLine: 'this month · ' + moving + ' moving · ' + settled + ' settled · ' + money(share) + ' to your share',
+      label: 'The street: the nine civic buildings in the order work moves, and '
+        + (goals.length === 1 ? 'one district' : goals.length + ' districts') + ', one for each open goal'
+        + (docket ? '. Pins: ' + pinCount.needs + ' need you, ' + pinCount.moving + ' moving, ' + pinCount.settled + ' settled.' : '.'),
+    };
+  }
+
+  // The short card a pin opens (task 1004528 makes it act). null for an unknown key.
+  const STATE_WORDS = Object.freeze({ needs: 'This waits on you.', moving: 'This is moving without you.', settled: 'Settled, or not yours to act on.' });
+  function cardFor(docket, key, now) {
+    const matters = docket && Array.isArray(docket.matters) ? docket.matters : [];
+    if (key === 'queue') {
+      const q = matters.filter((m) => m && m.building === 'review' && pinState(m.state) !== 'settled');
+      if (!q.length) return null;
+      return { key: 'queue', building: 'review', where: 'review', when: q.length + ' waiting', title: 'Waiting for a tester', lines: q.slice(0, 5).map((m) => String(m.title || m.short || '')), result: 'Each waits for someone who did not build it to sign it off.', href: q[0].href || null, proposer: '', tally: '' };
+    }
+    const m = matters.find((x) => x && String(x.id) === String(key));
+    if (!m) return null;
+    const p = m.proposer && (m.proposer.name || m.proposer.login) ? 'raised by ' + (m.proposer.name || m.proposer.login) : '';
+    const t = m.tally && typeof m.tally === 'object' ? m.tally : null;
+    // The card's tally line, in the prototype's order: '4 for · 1 against · needs everyone'.
+    const tally = t ? [t.for != null ? t.for + ' for' : null, t.against != null ? t.against + ' against' : null, t.needs ? String(t.needs) : null].filter(Boolean).join(' · ') : '';
+    return {
+      key: String(m.id), building: m.building, where: String(m.where || m.building || '').toLowerCase(), when: whenWord(m.deadline, now),
+      title: String(m.title || m.short || ''), lines: [], result: STATE_WORDS[pinState(m.state)], href: typeof m.href === 'string' && m.href.charAt(0) === '/' ? m.href : null, proposer: p, tally: tally,
+    };
+  }
+
+  const api = {
+    theme: theme, box: box, gable: gable, sawtooth: sawtooth, tree: tree, light: light, civic: civic, work: work,
+    layout: layout, districtWidth: districtWidth, districtItems: districtItems, districtLine: districtLine, countsLine: countsLine,
+    whenWord: whenWord, monthShare: monthShare, money: money, parseHash: parseHash, buildingHref: buildingHref, districtHref: districtHref,
+    streetModel: streetModel, cardFor: cardFor,
+    G: G, SEGS: SEGS, GROUP_NAMES: GROUP_NAMES, CIVIC_KEYS: CIVIC_KEYS, READING_KEYS: READING_KEYS, ARTBOARD_W: ARTBOARD_W,
+    MAX_PINS_PER_BUILDING: MAX_PINS_PER_BUILDING, MAX_CRATES: MAX_CRATES, MAX_DISTRICTS: MAX_DISTRICTS, GOALS_HREF: GOALS_HREF, HINT: HINT, FALLBACK_LINE: FALLBACK_LINE, HOME_HREF: '/builders/city',
+  };
+  root.GovStreet = api;
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+}(typeof window !== 'undefined' ? window : globalThis));