@bongos/core 1.21.113 → 1.21.114

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

@@ -0,0 +1,712 @@
+// modules/hall-ui/public/street-depth.js — THE LIVING STREET's exterior: its
+// depth, as data, and the painters that put it on the page (task 1004685, the
+// living-city prototype; carved out of street-draw.js and street.js).
+//
+// WHY ITS OWN FILE. The living street made street.js cross the 1,500-line
+// ratchet and gave street-draw.js a require cycle with street-inside.js (the
+// floor plan the needs-you windows light). So the living street's exterior is
+// here, in the shape street-deck.js has: two halves.
+//
+//  MODEL (pure: no DOM, no fetch, no clock, node-require-safe). The three
+//  planes over a street street-draw.js has already laid out: structureOf (a
+//  civic building's capsule floors and its construction), skylineOf (every
+//  open goal as a cluster on a hazed skyline), readingTiles (the six readings
+//  as one number and two words) and depthOf (the skylanes, the road, the
+//  sittings, the windows that need you, the plates, the key). street-draw.js
+//  finds this file on its global when a street is drawn deep (it never
+//  requires it, so there is no cycle); this file requires street-draw.js for
+//  the front-on kit and street-inside.js for the floor plan.
+//
+//  PAGE (`page`, browser only). street.js hands it the street's data, its card
+//  opener and a redraw: pin(p) and sign(sg, tile) are the exterior's two
+//  controls, depth(dm, W) paints the planes, and loadLiving / livingModel read
+//  the living model's other feeds once through gov-feeds.js (the same reads the
+//  city, the deck and the shell's tally stand on). No innerHTML anywhere.
+//
+// Motion lives in street.css, and only says "this is live": no number here is
+// a speed or a blink.
+
+(function (root) {
+  'use strict';
+  const S = root.GovStreet || (typeof require === 'function' ? require('./street-draw.js') : null);
+  const City = root.GovCity || (typeof require === 'function' ? require('./city-draw.js') : null);
+  const push = S.push, rect = S.rect, ellipse = S.ellipse, box = S.box, money = S.money, count = S.count;
+  const G = S.G, CIVIC_KEYS = S.CIVIC_KEYS, MORE_KEY = S.MORE_KEY;
+
+  // ---------- THE DEPTH (task 1004685, the living-city prototype) ----------
+  // The street was one flat row; it now stands in three planes, front-on, in
+  // the street's own drawing style:
+  //  BACK    a skyline of EVERY open goal, one cluster each, its height from
+  //          the goal's real rollup (its size, sqrt-scaled to the largest goal,
+  //          times how much of it is built), in two rows the page hazes toward
+  //          the void (the faces mixed 25% and 50% into the ground; the civic
+  //          row is 0%). No detail: no windows, no names.
+  //  MIDDLE  the nine civic buildings with a deeper side face (DEPTH.side) and
+  //          a height that is structure: one capsule floor plugs into the core
+  //          for a seated Lead and each committee room (gov-living.js, over GET
+  //          /government/leads), so a Lead's added floor makes the
+  //          building taller. Under it, at street level, the Lead's name plate,
+  //          or "owner" where the building is unseated.
+  //  FRONT   the road: an agent whose claim answers to a building but to no
+  //          goal on the street works on the road in front of it, and the
+  //          parcels (the crates at Review) stay where they were.
+  //  SKY     the skylanes: an agent whose claim belongs to a goal travels a
+  //          lane between that goal's plot (or the plot that stands for the
+  //          other goals) and the building it answers to. One pod per active
+  //          claim, wherever it rides, at a fixed spacing, so they count.
+  // Construction is the city's: an authorised build-out is a live site (its
+  // finished floors, the scaffold at its % complete, a crane whose jib swings);
+  // a proposal waiting on a vote is a parked crane, a dashed-glass ghost annex
+  // and a tally arc of one dot per seat; an open sitting is a light shaft from
+  // the roof; and a matter that needs you lights SALMON windows on the floor
+  // that holds it (street-inside.js PLAN), with a ring that fills as it ages.
+  // Motion lives in street.css, and only says "this is live": no number here is
+  // a speed or a blink.
+  const DEPTH = Object.freeze({
+    side: 12, // the civic row's side face (the prototype's is 7)
+    cap: 13, // one capsule floor: an 11 px pod and its 2 px joint
+    siteFloors: 3, // an authorised build-out, finished
+    ghostFloors: 3, // a proposal's ghost annex, as tall as the build-out it would be
+    siteW: 40, // a build-out's footprint: wider than the core, so it reads as a site
+    craneRise: 30, // the crane's mast stands this far over the finished height
+    jib: 58, // the jib's reach from the mast
+    tallyR: 18, // the council's tally arc
+    skyTop: 236, // the first skylane's crest (just under the band's top, street.js BAND_TOP)
+    laneStep: 16, // each next lane crests this much lower
+    laneDrop: 30, // a lane's way back runs this much under its crest
+    podGap: 7, // pods on a skylane, in % of its loop
+    trainGap: 13, // pods on the road, in px
+    shaftTop: 200, // a sitting's light shaft reaches up to here
+    ageFull: 30, // days: an age ring is full at a month
+    period: 28, // s: one lap of a skylane (street.css street-depth-travel)
+  });
+  // Where a building's capsule floors plug in: the core's centre from the
+  // building's left edge, and the height its first floor sits at, on the
+  // recipe's own roof (a gable's apex, the sawtooth's teeth, Release's bridge).
+  const PLUG = Object.freeze({
+    charter: [42, 212], rules: [48, 58], disputes: [40, 100], people: [60, 54], planning: [40, 90],
+    automation: [62, 72], review: [43, 86], release: [46, 122], treasury: [42, 114],
+  });
+  // The face whose storeys stand for a building's floors (street-inside.js
+  // PLAN, bottom first): [x0, x1] from its left edge, [y0, y1] above the street.
+  const FACE = Object.freeze({
+    charter: [14, 70, 10, 136], rules: [8, 88, 8, 50], disputes: [25, 55, 4, 82], people: [41, 79, 6, 34],
+    planning: [3, 77, 6, 70], automation: [3, 77, 10, 52], review: [7, 79, 4, 80], release: [2, 24, 6, 146], treasury: [10, 74, 12, 90],
+  });
+  const CAP_W = Object.freeze({ lead: 30, committee: 24 });
+  const DECK_HREF = '/builders/street#deck';
+
+  // The street-inside.js floor plan, read when a street is drawn (it requires
+  // this file, so it is found on its global, or required late in node).
+  function floorPlan() {
+    const I = root.GovInside || (typeof require === 'function' ? require('./street-inside.js') : null);
+    return I && I.PLAN ? I.PLAN : {};
+  }
+  function floorOfSource(kind, source) {
+    const plan = floorPlan()[kind];
+    const floors = plan && Array.isArray(plan.floors) ? plan.floors : [];
+    for (let i = 0; i < floors.length; i++) if (floors[i][2] && floors[i][2].source === source) return { index: i, of: floors.length, name: floors[i][0] };
+    return null;
+  }
+
+  // A building's structure, standing on its recipe's roof: the core, one
+  // capsule floor per seat, then what is being built on top. Returns the
+  // polys, the site and proposal parts the page draws in front (the crane,
+  // the tally), and the heights above the street.
+  function structureOf(T, kind, x, b, ctx) {
+    const polys = [];
+    const plug = PLUG[kind];
+    const cx = x + plug[0];
+    const floors = [];
+    if (b) {
+      if (b.lead) floors.push({ role: 'lead' });
+      ((b.structure && b.structure.committees) || []).forEach(() => floors.push({ role: 'committee' }));
+    }
+    let h = plug[1];
+    if (floors.length) {
+      const coreTop = h + floors.length * DEPTH.cap + 4;
+      push(polys, rect(cx - 3, G - coreTop, 6, coreTop - h + 6), T.civic.r, T.civic.s);
+      floors.forEach((f, i) => {
+        const cw = CAP_W[f.role];
+        const off = i % 2 ? 3 : -3;
+        const z = h + i * DEPTH.cap + 1;
+        const x0 = cx - cw / 2 + off;
+        box(polys, T, x0, G, cw, 11, T.civic, { z: z, d: 5 });
+        // its window: a Lead's office is a strip, a committee two portholes
+        const wy = G - z - 5.5;
+        if (f.role === 'lead') push(polys, rect(x0 + 5, wy - 1.5, cw - 10, 3), T.win, 'none');
+        else push(polys, ellipse(cx + off - 5, wy, 2.2, 2.2) + ellipse(cx + off + 5, wy, 2.2, 2.2), T.win, 'none');
+      });
+      h += floors.length * DEPTH.cap;
+    }
+    const stack = h;
+    // the top capsule's own top face (d 5) is part of the building's height
+    let top = floors.length ? h + 5 : h;
+    const cons = (b && Array.isArray(b.construction)) ? b.construction : [];
+    const siteOf = cons.find((c) => c && c.kind === 'buildout' && c.authorised);
+    const propOf = cons.find((c) => c && !c.authorised);
+    let site = null;
+    let proposal = null;
+    // Construction reads at a glance and is the city's family: the same parts at the
+    // same proportions (a footprint wider than the core, a lattice mast standing
+    // clear of it, a jib with its ties and counterweight, a hook and its load).
+    const fw = DEPTH.siteW;
+    if (siteOf) {
+      // a live site: the finished floors, the scaffold up to its share built, a crane past the finished height
+      const p = siteOf.progress == null ? 0 : Math.max(0, Math.min(1, Number(siteOf.progress) || 0));
+      const target = DEPTH.siteFloors * DEPTH.cap;
+      const built = Math.floor(p * DEPTH.siteFloors + 1e-9);
+      for (let i = 0; i < built; i++) box(polys, T, cx - fw / 2, G, fw, 11, T.civic, { z: h + i * DEPTH.cap + 1, d: 5, fins: 3 });
+      const sh = Math.max(4, Math.round(p * target));
+      box(polys, T, cx - fw / 2 - 3, G, fw + 6, sh, T.scaffold, { z: h, d: 5, brace: true });
+      const mx = cx + fw / 2 + 10, base = G - h, mastTop = base - target - DEPTH.craneRise, hookY = base - sh - 12;
+      let mast = 'M' + (mx - 2.5) + ' ' + base + 'V' + mastTop + 'M' + (mx + 2.5) + ' ' + base + 'V' + mastTop;
+      for (let y = base - 8, k = 0; y > mastTop + 6; y -= 8, k++) mast += 'M' + (mx - 2.5) + ' ' + y + 'L' + (mx + 2.5) + ' ' + (k % 2 ? y + 8 : y - 8);
+      mast += rect(mx - 4, mastTop + 1, 8, 6);
+      const tip = mx - DEPTH.jib, tail = mx + 18;
+      site = {
+        key: 'site:' + kind, building: kind, label: String(siteOf.label || ''), progress: p,
+        mast: mast,
+        jib: 'M' + tip + ' ' + mastTop + 'H' + tail + 'M' + tip + ' ' + mastTop + 'L' + mx + ' ' + (mastTop - 12) + 'L' + tail + ' ' + mastTop
+          + 'M' + (tip + 14) + ' ' + mastTop + 'L' + (tip + 14) + ' ' + (mastTop + 3) + 'M' + (tip + 28) + ' ' + mastTop + 'L' + (tip + 28) + ' ' + (mastTop + 3),
+        weight: rect(tail - 9, mastTop, 9, 7),
+        line: 'M' + (tip + 8) + ' ' + mastTop + 'V' + hookY,
+        slab: rect(tip + 1, hookY, 16, 4),
+        ox: mx, oy: mastTop, hx: tip + 8, lift: Math.round((hookY - mastTop) / 2),
+        platform: { x: cx - fw / 2 - 2, y: base - sh, w: fw + 4, rise: Math.max(0, sh - 3) },
+      };
+      h += target;
+      top = Math.max(top, h + DEPTH.craneRise + 14);
+    }
+    if (propOf) {
+      // a proposal waiting on a vote: a dashed-glass ghost annex, a parked crane, a tally arc
+      const gh = DEPTH.ghostFloors * DEPTH.cap;
+      const ghost = { f: T.glass.f, r: T.glass.r, t: T.glass.t, s: T.glass.s, dash: '3 3' };
+      box(polys, T, cx - fw / 2, G, fw, gh, ghost, { z: h, d: 5, grid: 3 });
+      const base = G - h, mx = cx + fw / 2 + 10, mastTop = base - gh - 20;
+      const t = ctx.tallyOf(propOf);
+      const r = DEPTH.tallyR, acx = cx, acy = base - gh - 14;
+      const dots = [];
+      for (let i = 0; i < t.seats; i++) {
+        const a = Math.PI * (1 - (t.seats === 1 ? 0.5 : i / (t.seats - 1)));
+        dots.push({ cx: Math.round((acx + r * Math.cos(a)) * 10) / 10, cy: Math.round((acy - r * Math.sin(a)) * 10) / 10, vote: i < t.for ? 'for' : i < t.for + t.against ? 'against' : 'open' });
+      }
+      let mast = 'M' + (mx - 2.5) + ' ' + base + 'V' + mastTop + 'M' + (mx + 2.5) + ' ' + base + 'V' + mastTop + 'M' + (mx - 2.5) + ' ' + mastTop + 'H' + (mx + 2.5);
+      for (let y = base - 8, k = 0; y > mastTop + 6; y -= 8, k++) mast += 'M' + (mx - 2.5) + ' ' + y + 'L' + (mx + 2.5) + ' ' + (k % 2 ? y + 8 : y - 8);
+      proposal = {
+        key: 'proposal:' + kind, building: kind, label: String(propOf.label || ''),
+        // parked: the jib folded down along the mast, no hook, no load
+        crane: mast + 'M' + mx + ' ' + mastTop + 'L' + (mx - 9) + ' ' + (mastTop + 30) + 'M' + mx + ' ' + mastTop + 'L' + (mx + 7) + ' ' + (mastTop - 7),
+        arc: 'M' + (acx - r) + ' ' + acy + 'A' + r + ' ' + r + ' 0 0 1 ' + (acx + r) + ' ' + acy,
+        dots: dots, tally: t,
+      };
+      h += gh;
+      top = Math.max(top, h + 14 + r + 4);
+    }
+    return { polys: polys, cx: cx, floors: floors, stack: stack, top: top, site: site, proposal: proposal };
+  }
+
+  // Every open goal as a cluster on the skyline, in two rows (near, far): the
+  // tallest tower of the largest, most-built goal stands SKY_MAX high.
+  const SKY_MIN = 24, SKY_MAX = 196;
+  function skylineOf(goals, byGoal, W) {
+    const total = (g) => {
+      const r = byGoal[String(g.id)];
+      return count(r, 'total') || (count(r, 'done') + count(r, 'active') + count(r, 'ready') + count(r, 'blocked') + count(r, 'backlog'));
+    };
+    const max = Math.max(1, ...goals.map(total), 1);
+    const rows = { near: { face: '', side: '' }, far: { face: '', side: '' } };
+    const clusters = [];
+    const lists = [['near', goals.filter((_, i) => i % 2 === 0), 0.5], ['far', goals.filter((_, i) => i % 2 === 1), 1]];
+    lists.forEach((l) => {
+      const row = l[0], list = l[1], shift = l[2];
+      const slot = W / Math.max(1, list.length);
+      list.forEach((g, j) => {
+        const tot = total(g), done = count(byGoal[String(g.id)], 'done');
+        const seed = String(g.id).split('').reduce((a, c) => (a * 31 + c.charCodeAt(0)) % 9973, 7);
+        // never above the Charter's own height, so the civic row stays the subject
+        const H = Math.round(SKY_MIN + (SKY_MAX - SKY_MIN) * Math.sqrt(tot / max) * (0.45 + 0.55 * (tot ? Math.min(1, done / tot) : 0)));
+        const n = 2 + Math.min(2, Math.floor(tot / 60));
+        const tw = [];
+        for (let t = 0; t < n; t++) tw.push(16 + Math.round(City.rnd(seed + t * 7) * 14));
+        const width = tw.reduce((a, b) => a + b, 0) + (n - 1) * 3;
+        const cx = (((j + shift) * slot) % W + W) % W;
+        let x = Math.round(cx - width / 2);
+        const x0 = x;
+        const tallest = Math.floor(City.rnd(seed + 3) * n) % n;
+        tw.forEach((w, t) => {
+          const h = t === tallest ? H : Math.max(14, Math.round(H * (0.45 + 0.4 * City.rnd(seed + t * 11 + 5))));
+          const y = G - h, d = 6;
+          rows[row].face += rect(x, y, w, h) + 'M' + x + ' ' + y + 'L' + (x + d) + ' ' + (y - d) + 'L' + (x + w + d) + ' ' + (y - d) + 'L' + (x + w) + ' ' + y + 'Z';
+          rows[row].side += 'M' + (x + w) + ' ' + y + 'L' + (x + w + d) + ' ' + (y - d) + 'L' + (x + w + d) + ' ' + (G - d) + 'L' + (x + w) + ' ' + G + 'Z';
+          x += w + 3;
+        });
+        clusters.push({ goal: String(g.id), row: row, x0: x0, x1: x, h: H, total: tot, done: done });
+      });
+    });
+    const paths = (r) => (rows[r].face ? [{ d: rows[r].side, c: 'street-depth-sil__side' }, { d: rows[r].face, c: 'street-depth-sil__face' }] : []);
+    return { near: paths('near'), far: paths('far'), clusters: clusters };
+  }
+
+  // The six readings as the desk's tiles: one number and two words, or null
+  // (hidden) at zero or when nothing real holds the number. The living model
+  // drives the four it can read (flow: agents working; money: spend this
+  // month; people: the roster; rules: the laws in force); promises and
+  // fairness are the docket's own readings.
+  function readingTiles(docket, living, roster) {
+    const reading = {};
+    (docket && Array.isArray(docket.readings) ? docket.readings : []).forEach((r) => { if (r && r.key) reading[r.key] = r; });
+    const live = (k) => (reading[k] && reading[k].status === 'live' ? reading[k] : null);
+    const num = (v) => (typeof v === 'number' && isFinite(v) ? v : null);
+    const tile = (n, one, many, title) => (n == null || n === 0 || n === '$0' ? null : { n: typeof n === 'number' ? n.toLocaleString('en-US') : String(n), words: n === 1 ? one : many, title: String(title || '') });
+    // a live reading's own figure, split into its number and the rest
+    const fromFigure = (k) => {
+      const r = live(k);
+      const m = r && /^\s*(\$?[\d,.]+)\s+(.+)$/.exec(String(r.figure || ''));
+      // a figure that is not one number and at most two words is no tile
+      return m && !/^\$?0$/.test(m[1]) && m[2].trim().split(/\s+/).length <= 2 && !/\d/.test(m[2]) ? { n: m[1], words: m[2].trim(), title: String(r.line || '') } : null;
+    };
+    const city = living && living.city ? living.city : null;
+    const out = {};
+    // flow: the agents working right now (the count every surface prints, gov-living.js)
+    const atWork = city && city.counts ? num(city.counts.agents_at_work) : city && city.traffic ? num(city.traffic.agents) : null;
+    out.flow = city && (city.counts || city.traffic) ? tile(atWork, 'agent working', 'agents working', 'active claims right now') : fromFigure('flow');
+    // promises: the criteria the goals say they deliver, kept
+    const pv = live('promises') && live('promises').value;
+    out.promises = pv && typeof pv === 'object' ? tile(num(pv.kept), 'promise kept', 'promises kept', live('promises').figure) : fromFigure('promises');
+    // money: the AI spend this month
+    const spend = city && city.spend ? num(city.spend.month_usd) : null;
+    out.money = spend != null ? tile(spend > 0 ? money(spend) : 0, 'this month', 'this month', 'spent on AI this month') : fromFigure('money');
+    // people: who builds here
+    const list = roster && Array.isArray(roster.builders) ? roster.builders : null;
+    const active = list ? list.filter((b) => b && (b.status == null || b.status === 'active')).length : null;
+    out.people = active != null ? tile(active, 'builder here', 'builders here', 'active builders on the roster') : fromFigure('people');
+    // fairness: the disputes still open
+    const fv = live('fairness') && num(live('fairness').value);
+    const fd = docket && Array.isArray(docket.matters) ? docket.matters.filter((m) => m && m.building === 'disputes' && m.state !== 'settled').length : null;
+    out.fairness = fv != null ? tile(fv, 'dispute open', 'disputes open', live('fairness').line) : fd != null ? tile(fd, 'dispute open', 'disputes open', 'open at Disputes') : null;
+    // rules: the laws in force (GET /government/laws, and the rule the project runs)
+    const laws = city && Array.isArray(city.laws) ? city.laws : null;
+    out.rules = laws ? tile(laws.length, 'standing law', 'standing laws', laws.map((l) => l.text).join(' · ')) : fromFigure('rules');
+    return out;
+  }
+
+  // The depth layers over a street already laid out (see the header above).
+  function depthOf(c) {
+    const segs = c.segs, at = c.at, roofs = c.roofs, struct = c.struct, living = c.living, docket = c.docket;
+    const openGoal = {};
+    c.goals.forEach((g) => { openGoal[String(g.id)] = true; });
+    const W = c.W;
+    const sky = skylineOf(c.goals, c.byGoal, W);
+
+    // the plates: the Lead's name, or the owner where nobody holds it
+    const plates = [];
+    const viewerId = living && living.viewer ? String(living.viewer.id) : null;
+    if (living) {
+      segs.forEach((s) => {
+        if (!s.k) return;
+        const b = c.lb[s.k];
+        if (!b) return;
+        const lead = b.lead;
+        const holder = lead || b.holder;
+        if (!holder) return;
+        const you = viewerId != null && String(holder.id) === viewerId;
+        const text = lead ? (you ? 'you' : String(lead.name || lead.login || 'a Lead')) : (you ? 'you · owner' : 'owner');
+        plates.push({ key: 'plate:' + s.k, building: s.k, x: s.x - 3, y: G + 3, w: s.w + 6, text: text, seat: lead ? 'lead' : 'owner', you: you });
+      });
+    }
+
+    // the agents: one pod per active claim
+    const claims = living && living.city && living.city.traffic && Array.isArray(living.city.traffic.claims) ? living.city.traffic.claims : [];
+    const lanes = [];
+    const laneBy = {};
+    const trains = {};
+    claims.forEach((cl) => {
+      const b = cl && cl.building && at[cl.building] ? cl.building : null;
+      // its goal's own plot, or the plot that stands for the open goals past the eighth
+      const plot = cl && cl.goal_id != null && openGoal[String(cl.goal_id)] ? (at['d:' + cl.goal_id] || at['d:' + MORE_KEY] || null) : null;
+      if (b && plot) {
+        const k = plot.d + '>' + b;
+        if (!laneBy[k]) { laneBy[k] = { key: 'lane:' + k, from: plot.d, building: b, n: 0 }; lanes.push(laneBy[k]); }
+        laneBy[k].n += 1;
+      } else {
+        const k = b || '*';
+        trains[k] = (trains[k] || 0) + 1;
+      }
+    });
+    lanes.sort((a, b) => at[a.building].x - at[b.building].x || a.key.localeCompare(b.key));
+    const pods = [];
+    lanes.forEach((ln, i) => {
+      const from = at['d:' + ln.from], to = at[ln.building];
+      const sx = Math.round(from.x + from.w / 2), sy = G - (roofs['d:' + ln.from] || 0) - 4;
+      const ex = struct[ln.building] ? Math.round(struct[ln.building].cx) : Math.round(to.x + to.w / 2), ey = G - (struct[ln.building] ? struct[ln.building].stack : roofs[ln.building]) - 3;
+      const yA = DEPTH.skyTop + i * DEPTH.laneStep, yB = yA + DEPTH.laneDrop;
+      ln.d = 'M' + sx + ' ' + sy + 'C' + sx + ' ' + yA + ' ' + ex + ' ' + yA + ' ' + ex + ' ' + ey + 'C' + ex + ' ' + yB + ' ' + sx + ' ' + yB + ' ' + sx + ' ' + sy;
+      const gap = Math.min(DEPTH.podGap, 100 / ln.n);
+      for (let j = 0; j < ln.n; j++) {
+        const pct = Math.round((25 + (j - (ln.n - 1) / 2) * gap) * 100) / 100;
+        const atPct = ((pct % 100) + 100) % 100;
+        pods.push({ key: ln.key + ':' + j, lane: ln.key, path: ln.d, at: atPct, delay: -Math.round(atPct / 100 * DEPTH.period * 100) / 100 });
+      }
+    });
+    const road = Object.keys(trains).map((k) => {
+      const s = k === '*' ? null : at[k];
+      const n = trains[k];
+      const len = (n - 1) * DEPTH.trainGap + 9;
+      const x0 = s ? s.x + 4 : 43, x1 = s ? s.x + s.w - 4 : W - 43;
+      const half = len / 2;
+      const a = Math.min(x0 + half, (x0 + x1) / 2), b = Math.max(x1 - half, (x0 + x1) / 2);
+      return { key: 'road:' + k, building: s ? k : null, n: n, path: 'M' + a + ' ' + (G + 22) + 'H' + b, w: len, gap: DEPTH.trainGap };
+    });
+
+    // an open sitting: a light shaft from the roof (a board sitting still open,
+    // or a building whose way of deciding is being voted)
+    const sitting = {};
+    (docket && Array.isArray(docket.matters) ? docket.matters : []).forEach((m) => {
+      if (m && m.source === 'board' && m.state !== 'settled' && at[m.building]) sitting[m.building] = true;
+    });
+    (docket && Array.isArray(docket.buildings) ? docket.buildings : []).forEach((b) => {
+      if (b && b.decision && b.decision.sitting && at[b.key]) sitting[b.key] = true;
+    });
+    const shafts = CIVIC_KEYS.filter((k) => sitting[k]).map((k) => {
+      const cx = struct[k] ? struct[k].cx : at[k].x + at[k].w / 2;
+      const y1 = G - (struct[k] ? struct[k].stack : roofs[k]) + 4;
+      return { key: 'shaft:' + k, building: k, x: Math.round(cx - 10), y: DEPTH.shaftTop, w: 20, h: Math.max(40, y1 - DEPTH.shaftTop) };
+    });
+
+    // what needs you lights the windows of the floor that holds it (c.matters: the
+    // matters as the living street sees them, a seat's asks for someone else in ink)
+    const windows = [];
+    const byFloor = {};
+    (Array.isArray(c.matters) ? c.matters : docket && Array.isArray(docket.matters) ? docket.matters : []).forEach((m) => {
+      if (!m || m.state !== 'needs' || !at[m.building] || !FACE[m.building]) return;
+      const f = floorOfSource(m.building, m.source);
+      if (!f) return;
+      const k = m.building + ':' + f.index;
+      (byFloor[k] = byFloor[k] || { building: m.building, floor: f, matters: [] }).matters.push(m);
+    });
+    Object.keys(byFloor).sort().forEach((k) => {
+      const g = byFloor[k];
+      const s = at[g.building], face = FACE[g.building];
+      const y = Math.round(G - (face[2] + (g.floor.index + 0.5) * (face[3] - face[2]) / g.floor.of));
+      const ringX = s.x + face[0] + 4;
+      const room = Math.max(1, Math.floor((face[1] - face[0] - 10) / 7));
+      const n = Math.min(g.matters.length, room);
+      let d = '';
+      for (let i = 0; i < n; i++) d += rect(s.x + face[0] + 10 + i * 7, y - 1.5, 4, 3);
+      const opened = g.matters.map((m) => (m.opened_at ? Date.parse(m.opened_at) : NaN)).filter((t) => isFinite(t));
+      const age = opened.length && c.now ? Math.max(0, Math.floor((c.now - Math.min(...opened)) / 86400000)) : null;
+      const frac = age == null ? 0 : Math.min(1, age / DEPTH.ageFull);
+      const r = 3.6;
+      let arc = '';
+      if (frac >= 1) arc = ellipse(ringX, y, r, r);
+      else if (frac > 0) {
+        const a = -Math.PI / 2 + frac * 2 * Math.PI;
+        arc = 'M' + ringX + ' ' + Math.round((y - r) * 100) / 100 + 'A' + r + ' ' + r + ' 0 ' + (frac > 0.5 ? 1 : 0) + ' 1 ' + Math.round((ringX + r * Math.cos(a)) * 100) / 100 + ' ' + Math.round((y + r * Math.sin(a)) * 100) / 100;
+      }
+      windows.push({ key: 'needs:' + k, building: g.building, floor: g.floor.name, count: g.matters.length, lit: n, d: d, ring: ellipse(ringX, y, r, r), arc: arc, age: age, frac: Math.round(frac * 1000) / 1000 });
+    });
+
+    // where agents are at work the road is lit: a pool under the building or the
+    // district, as strong as it is busy (an ink wash on paper: paper cannot glow)
+    const pools = [];
+    if (living) {
+      const byDistrict = {};
+      (Array.isArray(living.districts) ? living.districts : []).forEach((d) => { if (d && d.goal_id != null) byDistrict[String(d.goal_id)] = d; });
+      segs.forEach((s) => {
+        const b = s.k ? c.lb[s.k] : byDistrict[String(s.d)];
+        const a = b ? Math.max(0, Math.min(1, Number(b.activity) || 0)) : 0;
+        if (a > 0) pools.push({ key: 'pool:' + (s.k || 'd:' + s.d), building: s.k || null, x: Math.round(s.x - 14), y: G - 10, w: Math.round(s.w + 28), a: Math.round(a * 100) / 100 });
+      });
+    }
+    const sites = CIVIC_KEYS.map((k) => struct[k] && struct[k].site).filter(Boolean);
+    const proposals = CIVIC_KEYS.map((k) => struct[k] && struct[k].proposal).filter(Boolean);
+    const capsules = CIVIC_KEYS.filter((k) => struct[k] && struct[k].floors.length).map((k) => ({ building: k, floors: struct[k].floors.length, roles: struct[k].floors.map((f) => f.role) }));
+    const tiles = readingTiles(docket, living, c.roster);
+    const roadN = road.reduce((a, t) => a + t.n, 0);
+    const label = (sky.clusters.length ? 'Behind the street, ' + (sky.clusters.length === 1 ? 'one goal stands' : sky.clusters.length + ' goals stand') + ' as a skyline. ' : '')
+      + (claims.length ? (claims.length === 1 ? 'One agent is' : claims.length + ' agents are') + ' at work: ' + pods.length + ' on the skylanes, ' + roadN + ' on the road.' : 'No agent is at work.');
+    return {
+      far: sky.far, near: sky.near, clusters: sky.clusters,
+      lanes: lanes.map((l) => ({ key: l.key, from: l.from, building: l.building, n: l.n, d: l.d })), pods: pods, road: road,
+      shafts: shafts, windows: windows, sites: sites, proposals: proposals, capsules: capsules, plates: plates, pools: pools,
+      tiles: tiles, agents: claims.length,
+      label: label, period: DEPTH.period,
+    };
+  }
+
+  // =====================================================================
+  // THE PAGE HALF. street.js calls these with its own data and callbacks;
+  // nothing here runs until it does, so node can require the model above.
+  // =====================================================================
+  const page = (function () {
+    const SVG_NS = 'http://www.w3.org/2000/svg';
+    // the page's document (a global in the browser and in the tests' vm alike)
+    const doc = () => (typeof document !== 'undefined' ? document : root.document);
+    const $ = (id) => doc().getElementById(id);
+    function clear(el) { while (el && el.firstChild) el.removeChild(el.firstChild); }
+    function node(tag, cls, text) {
+      const el = doc().createElement(tag);
+      if (cls) el.className = cls;
+      if (text != null) el.textContent = String(text);
+      return el;
+    }
+    function svgEl(tag) { return doc().createElementNS(SVG_NS, tag); }
+    function at(el, x, y, w, h) {
+      el.style.left = x + 'px';
+      el.style.top = y + 'px';
+      if (w != null) el.style.width = w + 'px';
+      if (h != null) el.style.height = h + 'px';
+      return el;
+    }
+    // a CSS offset path from path data this file computed; anything but path data is refused
+    function offsetPathOf(d) { return /^[MLHVCQAZmlhvcqaz0-9 .,-]+$/.test(String(d)) ? "path('" + d + "')" : "none"; }
+    function pathEl(p) {
+      const el = svgEl('path');
+      el.setAttribute('d', p.d);
+      el.setAttribute('fill', p.f);
+      el.setAttribute('stroke', p.s);
+      if (p.dash && p.dash !== 'none') el.setAttribute('stroke-dasharray', p.dash);
+      el.setAttribute('stroke-width', String(p.w || 1));
+      return el;
+    }
+
+    // One pin per building (task 1004569): its tier is its class, a label shows
+    // only when the collision pass placed it (street-pin--shown; the rest show
+    // on hover or focus), and a count badge says how many matters are open there.
+    // env { open: the matter whose card is open, openCard(key, el, keys) }
+    function pin(p, env) {
+      const keys = p.matters && p.matters.length ? p.matters : [p.key];
+      const el = node('button', 'street-pin street-pin--' + p.state + (p.shown ? ' street-pin--shown' : ''));
+      el.setAttribute('type', 'button');
+      el.setAttribute('aria-label', p.aria);
+      el.setAttribute('aria-expanded', keys.indexOf(env.open) >= 0 ? 'true' : 'false');
+      el.setAttribute('aria-controls', 'streetCard');
+      el.setAttribute('data-matter', p.key);
+      el.setAttribute('data-matters', keys.join(' '));
+      el.setAttribute('data-building', p.building);
+      at(el, p.x, p.y, S.PIN_W, p.h);
+      const label = node('span', 'street-pin__label', p.label);
+      if (p.label) label.setAttribute('title', p.label);
+      el.appendChild(label);
+      const head = node('span', 'street-pin__head');
+      if (p.state === 'urgent') head.appendChild(node('span', 'street-pin__ring'));
+      if (p.isCount) head.appendChild(node('span', 'street-pin__count', p.count));
+      else if (p.state !== 'settled') {
+        const svg = svgEl('svg');
+        svg.setAttribute('width', '18');
+        svg.setAttribute('height', '18');
+        svg.setAttribute('viewBox', '0 0 18 18');
+        svg.setAttribute('aria-hidden', 'true');
+        const fill = svgEl('path');
+        fill.setAttribute('d', p.gf || '');
+        const line = svgEl('path');
+        line.setAttribute('d', p.gl || '');
+        svg.appendChild(fill);
+        svg.appendChild(line);
+        head.appendChild(svg);
+      }
+      if (!p.isCount && Number(p.count) > 1) head.appendChild(node('span', 'street-pin__badge', p.count));
+      el.appendChild(head);
+      el.appendChild(node('span', 'street-pin__stem'));
+      el.addEventListener('click', function () { env.openCard(keys[0], el, keys); });
+      return el;
+    }
+
+    // A reading is a tile (task 1004685): one number and two words, hidden at
+    // zero or when nothing real holds it (the living model's tiles); without a
+    // tile it is the docket's own figure and line, as before.
+    function sign(sg, tile) {
+      const a = node('a', 'street-sign' + (sg.hot ? ' street-sign--hot' : '') + (sg.here ? ' street-sign--here' : '') + (tile !== undefined ? ' street-depth-tile' : ''));
+      a.setAttribute('href', sg.href);
+      a.setAttribute('aria-label', tile ? sg.label + ': ' + tile.n + ' ' + tile.words + '. Go to ' + sg.building : sg.aria);
+      a.setAttribute('data-reading', sg.key);
+      if (sg.here) a.setAttribute('aria-current', 'location');
+      const top = node('span', 'street-sign__top');
+      top.appendChild(node('span', 'street-sign__dot'));
+      top.appendChild(node('span', 'street-label', sg.label));
+      a.appendChild(top);
+      if (tile === undefined) {
+        a.appendChild(node('span', 'street-sign__figure', sg.figure));
+        a.appendChild(node('span', 'street-sign__line', sg.line));
+        return a;
+      }
+      if (!tile) { a.hidden = true; return a; }
+      const fig = node('span', 'street-sign__figure street-depth-tile__fig');
+      const n = node('span', 'street-depth-tile__n', tile.n);
+      fig.appendChild(n);
+      fig.appendChild(node('span', 'street-depth-tile__words', tile.words));
+      a.appendChild(fig);
+      if (tile.title) a.setAttribute('title', tile.title);
+      return a;
+    }
+
+    // ---------- the living model's reads ----------
+    // The street's own three feeds are street.js's load(); these are the living
+    // model's others, read once through gov-feeds.js and again only after an act
+    // refreshed one (the memo hands back the same bodies until then, so a redraw
+    // never re-reads and never loops). GovLiving or GovFeeds missing (an old cached
+    // page) draws the deep street from real data alone. The model is data.living,
+    // which the deck and the offices draw from; its feeds are data.livingFeeds.
+    // laws: the project's law book (task 1004706)
+    // counts: the server's one read of the counts every surface prints (task 1004716)
+    const LIVING_KEYS = Object.freeze(['counts', 'claims', 'tasks', 'cost', 'roster', 'me', 'blockers', 'moving', 'fence', 'constitution', 'laws', 'leads', 'treasury', 'presets']);
+    const living = { asking: false, feeds: null };
+    function loadLiving(data, redraw) {
+      const F = root.GovFeeds;
+      if (living.asking || !root.GovLiving || !F || !data.loaded) return null;
+      living.asking = true;
+      return F.read(LIVING_KEYS.slice()).then(function (f) {
+        living.asking = false;
+        const same = living.feeds && LIVING_KEYS.every(function (k) { return living.feeds[k] === f[k]; });
+        if (same) return;
+        living.feeds = f;
+        redraw();
+      });
+    }
+    function livingModel(data) {
+      if (!living.feeds || !root.GovFeeds) return null;
+      data.livingFeeds = living.feeds;
+      const raw = Object.assign({ docket: data.docket, goals: data.goals, rollups: data.rollups }, living.feeds);
+      return root.GovFeeds.model(raw, Date.now());
+    }
+
+    // ---------- the planes ----------
+    // A skyline row's svg is a 1 px box that paints its whole row as overflow:
+    // a deep, scaled-up layer's own box would otherwise widen the street's
+    // sideways scroll (a 3D transform counts toward it; an svg's painted
+    // overflow does not), and clipping it would flatten the parallax.
+    function depthSvg(host, W, point) {
+      const svg = svgEl('svg');
+      svg.setAttribute('class', 'street-depth-svg');
+      svg.setAttribute('width', point ? '1' : String(W));
+      svg.setAttribute('height', point ? '1' : '900');
+      if (!point) svg.setAttribute('viewBox', '0 0 ' + W + ' 900');
+      svg.setAttribute('aria-hidden', 'true');
+      svg.setAttribute('focusable', 'false');
+      host.appendChild(svg);
+      return svg;
+    }
+    // a path the page colours by class (the hall's tokens), or one in the drawing's own palette
+    function depthPath(p, cls) {
+      const el = p.c || cls ? svgEl('path') : pathEl(p);
+      if (p.c || cls) { el.setAttribute('d', p.d); el.setAttribute('class', p.c || cls); }
+      return el;
+    }
+    function depth(dm, W) {
+      const far = $('streetDepthFar'), near = $('streetDepthNear'), sky = $('streetDepthSky'), front = $('streetDepthFront');
+      [far, near, sky, front].forEach(clear);
+      if (!dm) return;
+      // BACK: the goals' skyline, two rows hazed toward the void
+      const board = $('streetBoard');
+      if (board) board.style.setProperty('--street-depth-ox', (W / 2) + 'px');
+      if (far) { const fs = depthSvg(far, W, true); dm.far.forEach(function (p) { fs.appendChild(depthPath(p)); }); }
+      if (near) { const ns = depthSvg(near, W, true); dm.near.forEach(function (p) { ns.appendChild(depthPath(p)); }); }
+      // SKY: the sittings' light shafts and the skylanes, behind the civic row
+      if (sky) {
+        dm.shafts.forEach(function (sh) {
+          const el = at(node('span', 'street-depth-shaft'), sh.x, sh.y, sh.w, sh.h);
+          el.setAttribute('data-building', sh.building);
+          el.style.setProperty('--street-depth-climb', sh.h + 'px');
+          // the ring rises inside a track that fades at both ends, so it never pops
+          const track = node('span', 'street-depth-shaft__track');
+          track.appendChild(node('span', 'street-depth-shaft__ring'));
+          el.appendChild(track);
+          sky.appendChild(el);
+        });
+        const ls = depthSvg(sky, W);
+        dm.lanes.forEach(function (ln) { const p = depthPath({ d: ln.d }, 'street-depth-lane'); p.setAttribute('data-lane', ln.key); ls.appendChild(p); });
+        dm.pods.forEach(function (pd) {
+          const el = node('span', 'street-depth-pod');
+          el.style.offsetPath = offsetPathOf(pd.path);
+          el.style.offsetDistance = pd.at + '%';
+          el.style.animationDelay = pd.delay + 's';
+          el.setAttribute('data-lane', pd.lane);
+          sky.appendChild(el);
+        });
+      }
+      if (!front) return;
+      // FRONT: what needs you, construction, the plates and the road
+      const fsv = depthSvg(front, W);
+      dm.windows.forEach(function (w) {
+        const g = svgEl('g');
+        g.setAttribute('data-building', w.building);
+        g.appendChild(depthPath({ d: w.d }, 'street-depth-needs'));
+        g.appendChild(depthPath({ d: w.ring }, 'street-depth-age'));
+        if (w.arc) g.appendChild(depthPath({ d: w.arc }, 'street-depth-age__arc'));
+        fsv.appendChild(g);
+      });
+      dm.sites.forEach(function (st) {
+        const g = svgEl('g');
+        g.setAttribute('class', 'street-depth-site');
+        g.setAttribute('data-building', st.building);
+        const pf = svgEl('rect');
+        pf.setAttribute('class', 'street-depth-platform');
+        pf.setAttribute('x', String(st.platform.x)); pf.setAttribute('y', String(st.platform.y - 1));
+        pf.setAttribute('width', String(st.platform.w)); pf.setAttribute('height', '2');
+        pf.style.setProperty('--street-depth-rise', st.platform.rise + 'px');
+        g.appendChild(pf);
+        g.appendChild(depthPath({ d: st.mast }, 'street-depth-crane'));
+        const jib = svgEl('g');
+        jib.setAttribute('class', 'street-depth-jib');
+        jib.style.transformOrigin = st.ox + 'px ' + st.oy + 'px';
+        jib.appendChild(depthPath({ d: st.jib }, 'street-depth-crane'));
+        jib.appendChild(depthPath({ d: st.weight }, 'street-depth-weight'));
+        // the hook: its line reels in from the jib while the slab rises with it
+        const line = depthPath({ d: st.line }, 'street-depth-crane street-depth-line');
+        line.style.transformOrigin = st.hx + 'px ' + st.oy + 'px';
+        const slab = depthPath({ d: st.slab }, 'street-depth-slab');
+        slab.style.setProperty('--street-depth-lift', (-st.lift) + 'px');
+        jib.appendChild(line);
+        jib.appendChild(slab);
+        g.appendChild(jib);
+        fsv.appendChild(g);
+      });
+      dm.proposals.forEach(function (pr) {
+        const g = svgEl('g');
+        g.setAttribute('class', 'street-depth-proposal');
+        g.setAttribute('data-building', pr.building);
+        g.appendChild(depthPath({ d: pr.crane }, 'street-depth-crane'));
+        g.appendChild(depthPath({ d: pr.arc }, 'street-depth-tally'));
+        pr.dots.forEach(function (dt) {
+          const c = svgEl('circle');
+          c.setAttribute('class', 'street-depth-seat street-depth-seat--' + dt.vote);
+          c.setAttribute('cx', String(dt.cx)); c.setAttribute('cy', String(dt.cy)); c.setAttribute('r', '2.4');
+          g.appendChild(c);
+        });
+        fsv.appendChild(g);
+      });
+      // the light pools sit on the road, under the plates
+      (dm.pools || []).forEach(function (pl) {
+        const el = at(node('span', 'street-depth-pool'), pl.x, pl.y, pl.w);
+        el.style.setProperty('--street-depth-pool-a', String(pl.a));
+        if (pl.building) el.setAttribute('data-building', pl.building);
+        front.appendChild(el);
+      });
+      dm.plates.forEach(function (pl) {
+        const el = at(node('span', 'street-depth-plate street-depth-plate--' + pl.seat + (pl.you ? ' street-depth-plate--you' : '')), pl.x, pl.y, pl.w);
+        el.setAttribute('data-building', pl.building);
+        el.appendChild(node('span', 'street-depth-plate__t', pl.text));
+        front.appendChild(el);
+      });
+      dm.road.forEach(function (rd) {
+        const tr = node('span', 'street-depth-train');
+        tr.style.offsetPath = offsetPathOf(rd.path);
+        tr.style.width = rd.w + 'px';
+        if (rd.building) tr.setAttribute('data-building', rd.building);
+        for (let i = 0; i < rd.n; i++) tr.appendChild(at(node('span', 'street-depth-pod street-depth-pod--road'), i * rd.gap, 0));
+        front.appendChild(tr);
+      });
+    }
+
+    return { pin: pin, sign: sign, depth: depth, loadLiving: loadLiving, livingModel: livingModel, living: living, LIVING_KEYS: LIVING_KEYS };
+  }());
+
+  const api = {
+    structureOf: structureOf, skylineOf: skylineOf, readingTiles: readingTiles, floorOfSource: floorOfSource, depthOf: depthOf,
+    DEPTH: DEPTH, PLUG: PLUG, FACE: FACE, CAP_W: CAP_W, DECK_HREF: DECK_HREF, SKY_MIN: SKY_MIN, SKY_MAX: SKY_MAX,
+    page: page,
+  };
+  root.GovStreetDepth = api;
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+}(typeof window !== 'undefined' ? window : globalThis));