@bongos/core 1.21.43 → 1.21.45

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

@@ -852,12 +852,40 @@
     return b;
   }
 
+  // THE PAGER (task 1004569). A street pin stands for every matter at its
+  // building; the card opens on the most important, and when there are more it
+  // carries "1 of N" with previous and next, which wrap, so every matter there
+  // is reachable without leaving the street. Pure: the pin's keys (most
+  // important first) and the open key → the pager, or null for one matter.
+  function pager(keys, key) {
+    var ks = Array.isArray(keys) ? keys.map(str) : [];
+    var n = ks.length, i = ks.indexOf(str(key));
+    if (n < 2 || i < 0) return null;
+    return { i: i, n: n, words: (i + 1) + ' of ' + n, prev: ks[(i - 1 + n) % n], next: ks[(i + 1) % n] };
+  }
+  function pagerRow(doc, pg, on) {
+    var row = el(doc, 'div', 'mcard-pager');
+    var arrow = function (dir, glyph, words) {
+      var b = button(doc, 'mcard-pager__btn', glyph, 'page-' + dir, function () { on.page(pg[dir], dir); }, false);
+      b.setAttribute('aria-label', words);
+      return b;
+    };
+    row.appendChild(arrow('prev', '‹', 'Previous matter here'));
+    var at = el(doc, 'span', 'mcard-pager__at', pg.words);
+    at.setAttribute('aria-live', 'polite');
+    row.appendChild(at);
+    row.appendChild(arrow('next', '›', 'Next matter here'));
+    return row;
+  }
+
   // Build the card's body into `host` (emptied first). on: { act(key, input),
-  // openForm(name), ask(key), more() }. ui: { form: 'revise'|null, ask: actKey|null,
-  // more: false, error: '', busy: false, fresh: seatKey|null }.
+  // openForm(name), ask(key), more(), page(key, dir) }. ui: { form: 'revise'|null,
+  // ask: actKey|null, more: false, error: '', busy: false, fresh: seatKey|null,
+  // pager: pager()|null }.
   function render(doc, host, cv, on, ui) {
     var u = ui || {};
     while (host.firstChild) host.removeChild(host.firstChild);
+    if (u.pager && on && on.page) host.appendChild(pagerRow(doc, u.pager, on));
     if (cv.fact) host.appendChild(el(doc, 'p', 'mcard-fact', cv.fact));
     if (cv.quote && cv.quote.words) host.appendChild(el(doc, 'p', 'mcard-quote', (cv.quote.by ? cv.quote.by + ': ' : '') + cv.quote.words));
     if (cv.lines && cv.lines.length) {
@@ -1048,7 +1076,7 @@
 
   var api = {
     API: API, SECTIONS: SECTIONS, needsRoom: needsRoom, itemIdOf: itemIdOf, subjectKind: subjectKind,
-    model: model, actsCard: actsCard, moreOf: moreOf, request: request, orderRequest: orderRequest, check: check, answer: answer, refusal: refusal, render: render,
+    model: model, actsCard: actsCard, moreOf: moreOf, request: request, orderRequest: orderRequest, check: check, answer: answer, refusal: refusal, render: render, pager: pager,
     memberWords: memberWords, windowWords: windowWords, LINE: LINE, compact: compact,
     // the wording change, for a drafted amendment's struck and inserted text (task 1004530)
     change: changeOf,

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

@@ -38,9 +38,20 @@
 //    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.
+//  * Pins (task 1004569). A building can hold more matters than the prototype's
+//    one, and three stacked labels per building ran into their neighbours'.
+//    Now ONE pin stands over a building, where the prototype stands its pin,
+//    in the importance tier of its most important matter (GovCity.buildingPin,
+//    shared with the home city so both views agree): urgent (needs you within
+//    a day) largest and pulsing, needs you orange, moving small and ink,
+//    settled a grey dot. It carries the count of the building's open matters.
+//    Only urgent and needs-you pins show a label (cut by the line rule's fit(),
+//    street-desk.js); a moving pin shows its label on hover or focus. A
+//    collision pass (placeLabels) keeps every shown label clear of every other:
+//    two that would meet stand on two alternating heights, and when they still
+//    meet the lower tier's label waits for hover (its count and colour stay).
+//    Tapping a pin opens its most important matter's card, with "1 of N" and
+//    previous/next inside the card when the building holds more.
 //  * 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.
@@ -264,8 +275,19 @@
   const MORE_KEY = 'more';
   const GOALS_HREF = '/builders/goals';
   const ARTBOARD_W = 1440;
-  const MAX_PINS_PER_BUILDING = 3;
+  // A pin's label: at most PIN_LABEL characters (the line rule's fit()), about
+  // LABEL_CH px a character at 12 px (a little over, so the box never
+  // undercounts), centred on the stem and never wider than LABEL_MAX_W. A
+  // label that has to step aside stands PIN_STACK higher.
+  const PIN_W = 110;
+  const PIN_LABEL = 22;
+  const LABEL_CH = 6.6;
+  const LABEL_MAX_W = 150;
+  const LABEL_H = 15;
+  const LABEL_GAP = 4;
   const PIN_STACK = 40;
+  // the tiers whose label shows without a hover, most important first
+  const LABEL_TIERS = Object.freeze(['urgent', 'needs', 'queue']);
   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']);
@@ -381,6 +403,56 @@
     return state === 'needs' || state === 'moving' || state === 'settled' ? state : 'moving';
   }
 
+  // The line rule's one formatter (street-desk.js), read when a street is
+  // drawn: street-desk.js loads after this file and itself requires this one,
+  // so it is found on the global it hangs itself on, never required from here
+  // (that would be a require cycle). The page always loads it before it draws.
+  function lineFit(s, n) {
+    const D = root.GovDesk;
+    return D && D.fit ? D.fit(s, n) : String(s == null ? '' : s);
+  }
+  // One short label: the matter's short name, then its deadline in the
+  // prototype's words, the name cut so the deadline always survives.
+  function pinLabel(short, when) {
+    if (!when) return lineFit(short, PIN_LABEL);
+    return lineFit(short, Math.max(4, PIN_LABEL - when.length - 3)) + ' · ' + when;
+  }
+  // The box a shown label takes on the board, padded by LABEL_GAP: it sits at
+  // the top of the pin's column, centred on the stem.
+  function labelBox(p) {
+    const w = Math.min(LABEL_MAX_W, Math.ceil(String(p.label).length * LABEL_CH));
+    const cx = p.x + PIN_W / 2;
+    return { x0: cx - w / 2 - LABEL_GAP, x1: cx + w / 2 + LABEL_GAP, y0: p.y - LABEL_GAP / 2, y1: p.y + LABEL_H + LABEL_GAP / 2 };
+  }
+  function meets(a, b) { return a.x0 < b.x1 && b.x0 < a.x1 && a.y0 < b.y1 && b.y0 < a.y1; }
+  // The collision pass. Labels are placed most important first (then left to
+  // right): each takes the pin's own height if it is clear there, else the
+  // alternate height PIN_STACK above, else it is quiet (shown on hover or
+  // focus only; the count and colour stay). Moving and settled pins never
+  // show a label without a hover, so they take no room. Mutates pins.
+  function placeLabels(pins) {
+    const rank = (p) => LABEL_TIERS.indexOf(p.rank);
+    const placed = [];
+    pins.filter((p) => p.label && LABEL_TIERS.indexOf(p.rank) >= 0)
+      .sort((a, b) => rank(a) - rank(b) || a.x - b.x)
+      .forEach((p) => {
+        const base = { y: p.y, h: p.h };
+        for (const lift of [0, PIN_STACK]) {
+          const q = { x: p.x, y: base.y - lift, label: p.label };
+          const bx = labelBox(q);
+          if (!placed.some((o) => meets(o, bx))) {
+            p.y = q.y; p.h = base.h + lift; p.shown = true; p.lifted = lift > 0;
+            placed.push(bx);
+            return;
+          }
+        }
+        p.shown = false;
+      });
+    return pins;
+  }
+  // Every shown label's box, for the tests and the proof renders.
+  function shownLabels(pins) { return (pins || []).filter((p) => p.shown).map((p) => Object.assign({ key: p.key }, labelBox(p))); }
+
   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
@@ -498,28 +570,33 @@
       return { key: n, name: n, x: x0, w: x1 - x0 };
     });
 
-    // pins, each with its label always showing (up to three stacked per building)
+    // one pin per building, in the tier of its most important matter (task 1004569)
     const pins = [];
     const byB = {};
     matters.forEach((m) => { if (m.building !== 'review') (byB[m.building] = byB[m.building] || []).push(m); });
     CIVIC_KEYS.forEach((k) => {
+      const bp = City.buildingPin(byB[k], now);
+      if (!bp) return;
       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,
-        });
+      const m = bp.top;
+      const g = City.glyph(m.rule, 9, 9, 16);
+      const short = String(m.short || m.title || '');
+      pins.push({
+        key: String(m.id), building: k, state: bp.tier, rank: bp.tier, isCount: false,
+        count: bp.tier === 'settled' ? '' : String(bp.count), matters: bp.matters.map((x) => String(x.id)),
+        x: Math.round(s.x + s.w / 2 - 55 + (k === 'release' ? 4 : 0)), y: top - 78, h: 78,
+        label: bp.tier === 'settled' ? '' : pinLabel(short, whenWord(m.deadline, now)), shown: false, lifted: false,
+        aria: City.pinAria(k, bp), 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: '' });
+      // the queue's dashed count pin keeps the prototype's look; its label is
+      // placed in the rank of the most important work waiting
+      const qt = City.buildingPin(queue, now).tier;
+      pins.push({ key: 'queue', building: 'review', state: 'queue', rank: qt === 'urgent' || qt === 'needs' ? 'queue' : qt, isCount: true, count: String(queue.length), matters: ['queue'], x: Math.round(rv.x - 58), y: G - 70, h: 64, label: 'waiting for a tester', shown: false, lifted: false, aria: (queue.length === 1 ? 'One piece of work waits' : queue.length + ' pieces of work wait') + ' for a tester at Review', gf: '', gl: '' });
     }
+    placeLabels(pins);
 
     // every building and district on the street is a door
     const doors = segs.map((s) => s.k
@@ -543,7 +620,7 @@
     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; });
+    pins.forEach((p) => { const t = p.state === 'urgent' ? 'needs' : p.state; if (pinCount[t] != null) pinCount[t] += 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,
@@ -582,9 +659,9 @@
     theme: theme, push: push, rect: rect, ellipse: ellipse, 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, reviewHeldOf: reviewHeldOf, monthShare: monthShare, money: money, parseHash: parseHash, buildingHref: buildingHref, districtHref: districtHref,
-    streetModel: streetModel, cardFor: cardFor,
+    streetModel: streetModel, cardFor: cardFor, placeLabels: placeLabels, labelBox: labelBox, shownLabels: shownLabels, pinLabel: pinLabel,
     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',
+    PIN_W: PIN_W, PIN_LABEL: PIN_LABEL, LABEL_MAX_W: LABEL_MAX_W, PIN_STACK: PIN_STACK, 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;

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

@@ -76,8 +76,11 @@ html[data-fullscreen="on"] .street-top { padding-right: 184px; }
 .street-kicker { margin: 0; font-size: 11.5px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
 .street-hud { display: flex; align-items: center; gap: 36px; margin-left: auto; }
 .street-hud__item { display: flex; align-items: center; gap: 12px; }
-.street-hud__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--street-rule-strong); }
+/* the header's dots are the pins' colours, so the counts double as the legend
+   (task 1004569): orange for needs you (a ring while nothing does), ink for moving */
+.street-hud__dot { width: 8px; height: 8px; border-radius: 999px; box-sizing: border-box; background: transparent; border: 1.5px solid var(--accent); flex: none; }
 .street-hud__dot--hot { background: var(--accent); }
+.street-hud__dot--moving { width: 6px; height: 6px; border: 0; background: var(--ink); }
 .street-hud__n { font-size: 24px; font-weight: 300; font-variant-numeric: tabular-nums; }
 .street-mode { margin-left: 36px; flex: none; background: none; border: 1px solid var(--street-rule-strong); border-radius: 999px; height: 36px; padding: 0 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); font-family: var(--font-body); font-size: 13px; text-transform: lowercase; }
 .street-mode svg { display: block; stroke-width: 1.4; }
@@ -116,7 +119,7 @@ html[data-fullscreen="on"] .street-top { padding-right: 184px; }
 
 /* pins: orange and pulsing waits on you; ink is moving; grey is settled; dashed is the queue */
 .street-pin { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; background: transparent; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body); color: var(--ink); }
-.street-pin__label { max-width: 110px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 1.2; white-space: nowrap; }
+.street-pin__label { max-width: 150px; flex-shrink: 0; min-height: 15px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 1.2; white-space: nowrap; visibility: hidden; }
 .street-pin__head { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; transition: transform 200ms cubic-bezier(.2,.7,.3,1); }
 .street-pin:hover .street-pin__head { transform: scale(1.12); }
 .street-pin__head svg { display: block; }
@@ -125,14 +128,27 @@ html[data-fullscreen="on"] .street-top { padding-right: 184px; }
 .street-pin__stem { width: 0; flex-grow: 1; border-left: 1px solid transparent; }
 .street-pin__ring { position: absolute; inset: -1px; border-radius: 999px; border: 1px solid var(--accent); }
 .street-pin__count { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
+/* importance tiers (task 1004569): one pin per building, colour AND size, so a
+   tier reads without colour. urgent 34 > needs 28 (the prototype's) > moving 20
+   > settled 10, a plain grey dot. A label shows only where the collision pass
+   placed it (--shown); any other shows on hover or focus, on a card so it reads
+   over its neighbours. */
+.street-pin--shown .street-pin__label, .street-pin:hover .street-pin__label, .street-pin:focus-visible .street-pin__label { visibility: visible; }
+.street-pin:hover, .street-pin:focus-visible { z-index: 4; }
+.street-pin:not(.street-pin--shown):hover .street-pin__label, .street-pin:not(.street-pin--shown):focus-visible .street-pin__label { background: var(--bg-card); border-radius: 4px; padding: 0 4px; }
+.street-pin--urgent .street-pin__label { color: var(--street-accent-text); font-weight: 500; }
 .street-pin--needs .street-pin__label { color: var(--street-accent-text); }
-.street-pin--needs .street-pin__head { background: var(--accent); color: var(--accent-on); box-shadow: var(--street-glow); }
-.street-pin--needs .street-pin__stem { border-left-color: color-mix(in srgb, var(--accent) 65%, transparent); }
-.street-pin--moving .street-pin__head { background: var(--ink); color: var(--bg-card); }
+.street-pin--urgent .street-pin__head, .street-pin--needs .street-pin__head { background: var(--accent); color: var(--accent-on); box-shadow: var(--street-glow); }
+.street-pin--urgent .street-pin__head { width: 34px; height: 34px; }
+.street-pin--urgent .street-pin__head svg { width: 21px; height: 21px; }
+.street-pin--urgent .street-pin__stem, .street-pin--needs .street-pin__stem { border-left-color: color-mix(in srgb, var(--accent) 65%, transparent); }
+.street-pin--moving .street-pin__head { width: 20px; height: 20px; background: var(--ink); color: var(--bg-card); }
+.street-pin--moving .street-pin__head svg { width: 13px; height: 13px; }
 .street-pin--moving .street-pin__stem { border-left-color: color-mix(in srgb, var(--ink) 45%, transparent); }
-.street-pin--settled .street-pin__label { color: var(--ink-faint); }
-.street-pin--settled .street-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); }
+.street-pin--settled .street-pin__head { width: 10px; height: 10px; margin-top: 9px; background: color-mix(in srgb, var(--ink) 38%, var(--bg)); }
 .street-pin--settled .street-pin__stem { border-left-color: color-mix(in srgb, var(--ink) 22%, transparent); }
+.street-pin__badge { position: absolute; top: -7px; right: -12px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--bg-card); border: 1px solid currentColor; color: var(--ink); font-size: 10.5px; font-weight: 600; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; }
+.street-pin--urgent .street-pin__badge, .street-pin--needs .street-pin__badge { color: var(--street-accent-text); }
 .street-pin--queue .street-pin__head { background: transparent; border: 1px dashed var(--street-crate); color: var(--ink); }
 .street-pin--queue .street-pin__stem { border-left-color: color-mix(in srgb, var(--ink) 22%, transparent); }
 

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

@@ -11,8 +11,8 @@
        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). -->
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
-  <link rel="stylesheet" href="/builders/street.css?v=2026-10-03-desk1">
-  <link rel="stylesheet" href="/builders/street-card.css?v=2026-10-02-card1">
+  <link rel="stylesheet" href="/builders/street.css?v=2026-10-04-pins1">
+  <link rel="stylesheet" href="/builders/street-card.css?v=2026-10-04-pins1">
 </head>
 <!-- THE STREET (task 1004525, goal 1000125, R03). The street view of
      docs/design/mocks/governor-city/Street.dc.html (renderVals' street branch,
@@ -73,11 +73,12 @@
       <span class="street-today__n" id="streetTodayN">0 decided</span>
     </div>
     <div class="street-hud__item">
-      <span class="street-hud__dot" id="hudDot"></span>
+      <span class="street-hud__dot" id="hudDot" aria-hidden="true"></span>
       <span class="street-label">needs you</span>
       <span class="street-hud__n" id="hudNeeds">—</span>
     </div>
     <div class="street-hud__item">
+      <span class="street-hud__dot street-hud__dot--moving" aria-hidden="true"></span>
       <span class="street-label">moving</span>
       <span class="street-hud__n" id="hudMoving">—</span>
     </div>
@@ -203,16 +204,16 @@
   </div>
 </div>
 
-<script src="/builders/shell-trail.js?v=2026-10-04-nolegacy"></script>
-<script src="/builders/craft-mode.js?v=2026-10-04-nolegacy"></script>
-<script src="/builders/shell.js?v=2026-10-04-nolegacy"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-paintbrush"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-paintbrush"></script>
+<script src="/builders/shell.js?v=2026-10-04-paintbrush"></script>
 <script src="/builders/palette.js" defer></script>
-<script src="/builders/city-draw.js?v=2026-10-02-street1"></script>
-<script src="/builders/street-draw.js?v=2026-10-02-street1"></script>
-<script src="/builders/street-card.js?v=2026-10-02-amend1"></script>
+<script src="/builders/city-draw.js?v=2026-10-04-pins1"></script>
+<script src="/builders/street-draw.js?v=2026-10-04-pins1"></script>
+<script src="/builders/street-card.js?v=2026-10-04-pins1"></script>
 <script src="/builders/street-inside.js?v=2026-10-03-desk1"></script>
 <script src="/builders/street-desk.js?v=2026-10-03-desk1"></script>
 <script src="/builders/street-amend.js?v=2026-10-02-amend1"></script>
-<script src="/builders/street.js?v=2026-10-03-desk1"></script>
+<script src="/builders/street.js?v=2026-10-04-pins1"></script>
 </body>
 </html>

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

@@ -80,7 +80,9 @@
   var data = { docket: null, goals: [], rollups: [], earnings: null, loaded: false, tasks: {}, room: null, constitution: null };
   // ask: the act whose chips stand open; more: the detail is open in place;
   // pick: which of the review queue the queue's card shows (task 1004566)
-  var card = { cv: null, form: null, ask: null, more: false, pick: null, error: '', busy: false, fresh: null, answer: null };
+  // page: the matters of the pin that opened the card, most important first,
+  // for its "1 of N" pager (task 1004569); null when one matter or a desk row.
+  var card = { cv: null, form: null, ask: null, more: false, pick: null, error: '', busy: false, fresh: null, answer: null, page: null };
   var view = { open: null, opener: null, model: null, scale: 1, mode: null, inside: null, insideModel: null };
   // the desk's own state: rows you acted on this visit, what you did per floor,
   // the floors you cleared, the row whose facts or chips are open
@@ -247,25 +249,31 @@
     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.
   function drawPin(p) {
-    var el = node('button', 'street-pin street-pin--' + p.state);
+    var keys = p.matters && p.matters.length ? p.matters : [p.key];
+    var 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', view.open === p.key ? 'true' : 'false');
+    el.setAttribute('aria-expanded', keys.indexOf(view.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, 110, p.h);
+    at(el, p.x, p.y, S.PIN_W, p.h);
     var label = node('span', 'street-pin__label', p.label);
-    label.setAttribute('title', p.label);
+    if (p.label) label.setAttribute('title', p.label);
     el.appendChild(label);
     var head = node('span', 'street-pin__head');
-    if (p.state === 'needs') head.appendChild(node('span', 'street-pin__ring'));
+    if (p.state === 'urgent') head.appendChild(node('span', 'street-pin__ring'));
     if (p.isCount) head.appendChild(node('span', 'street-pin__count', p.count));
-    else {
+    else if (p.state !== 'settled') {
       var svg = document.createElementNS(SVG_NS, 'svg');
       svg.setAttribute('width', '18');
       svg.setAttribute('height', '18');
+      svg.setAttribute('viewBox', '0 0 18 18');
       svg.setAttribute('aria-hidden', 'true');
       var fill = document.createElementNS(SVG_NS, 'path');
       fill.setAttribute('d', p.gf || '');
@@ -275,9 +283,10 @@
       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 () { openCard(p.key, el); });
+    el.addEventListener('click', function () { openCard(keys[0], el, keys); });
     return el;
   }
 
@@ -366,6 +375,7 @@
     $('hudMoving').textContent = m.hud.moving;
     $('hudShare').textContent = m.hud.share;
     var dot = $('hudDot');
+    // the header's dots are the pins' own colours, so they double as the legend
     if (dot) dot.className = 'street-hud__dot' + (m.hud.hot ? ' street-hud__dot--hot' : '');
     var board = $('streetBoard');
     if (board) board.setAttribute('aria-label', data.loaded ? m.label : 'The street, reading the docket');
@@ -1055,7 +1065,8 @@
     $('streetCardWhere').textContent = cv.where;
     $('streetCardWhen').textContent = cv.when;
     $('streetCardTitle').textContent = cv.title;
-    C.render(document, $('streetCardBody'), cv, { act: actOn, openForm: openForm, ask: askFor, more: toggleMore, pick: pickQueued }, { form: card.form, ask: card.ask, more: card.more, error: card.error, busy: card.busy, fresh: card.fresh });
+    var pager = C.pager ? C.pager(card.page, view.open) : null;
+    C.render(document, $('streetCardBody'), cv, { act: actOn, openForm: openForm, ask: askFor, more: toggleMore, pick: pickQueued, page: turnPage }, { form: card.form, ask: card.ask, more: card.more, error: card.error, busy: card.busy, fresh: card.fresh, pager: pager });
     var frame = $('streetCard'); if (frame) frame.setAttribute('data-more', card.more ? 'open' : 'closed');
     placeCard();
     return cv;
@@ -1073,6 +1084,26 @@
     var mb = $('streetCardBody'), t = mb && mb.querySelector ? mb.querySelector('[data-act="more"]') : null;
     if (t && t.focus) t.focus();
   }
+  // The pager turns the card to another matter of the same pin, in place.
+  function turnPage(key, dir) {
+    view.open = key;
+    card.form = null; card.ask = null; card.more = false; card.pick = null; card.error = ''; card.fresh = null;
+    if (!fillCard()) return;
+    draw();
+    var b = findAct($('streetCardBody'), 'page-' + dir);
+    if (b && b.focus) b.focus();
+    if (card.cv && card.cv.loading) loadRoom();
+  }
+  // The first node under `host` with data-act=`act` (a walk, so it needs no selector engine).
+  function findAct(host, act) {
+    var kids = host && host.children ? Array.prototype.slice.call(host.children) : [];
+    for (var i = 0; i < kids.length; i++) {
+      if (kids[i].getAttribute && kids[i].getAttribute('data-act') === act) return kids[i];
+      var hit = findAct(kids[i], act);
+      if (hit) return hit;
+    }
+    return null;
+  }
   function pickQueued(key) {
     card.pick = key; card.ask = null; card.more = false; card.form = null; card.error = '';
     fillCard();
@@ -1083,7 +1114,7 @@
     var card = $('streetCard');
     if (!card || !view.open || !view.model) return;
     var pin = null;
-    view.model.pins.forEach(function (p) { if (p.key === view.open) pin = p; });
+    view.model.pins.forEach(function (p) { if (p.key === view.open || (p.matters && p.matters.indexOf(view.open) >= 0)) pin = p; });
     var win = $('streetWindow'), sizer = $('streetSizer');
     var stageW = (card.parentNode && card.parentNode.clientWidth) || window.innerWidth || 1440;
     var originX = (sizer && sizer.offsetLeft != null ? sizer.offsetLeft : 0) - (win && win.scrollLeft ? win.scrollLeft : 0);
@@ -1091,9 +1122,10 @@
     var x = Math.max(16, Math.min(stageW - CARD_W - 16, Math.round(cx - CARD_W / 2)));
     card.style.setProperty('--street-card-x', x + 'px');
   }
-  function openCard(key, opener) {
+  function openCard(key, opener, keys) {
     view.open = key;
     view.opener = opener || null;
+    card.page = keys && keys.length > 1 ? keys.slice() : null;
     card.form = null; card.ask = null; card.more = false; card.pick = null; card.error = ''; card.fresh = null;
     var el = $('streetCard');
     if (!fillCard()) return;
@@ -1107,7 +1139,7 @@
     var was = view.opener;
     view.open = null;
     view.opener = null;
-    card.cv = null; card.form = null; card.ask = null; card.more = false; card.pick = null; card.error = ''; card.busy = false; card.fresh = null;
+    card.cv = null; card.form = null; card.ask = null; card.more = false; card.pick = null; card.error = ''; card.busy = false; card.fresh = null; card.page = null;
     var el = $('streetCard');
     if (el) el.hidden = true;
     draw();
@@ -1195,7 +1227,7 @@
     var blds = ($('streetBlds') && $('streetBlds').children) || [];
     for (var i = 0; i < blds.length; i++) if (blds[i].getAttribute('data-key') === a.building) blds[i].setAttribute('class', 'street-answer street-answer--' + a.kind);
     var pins = ($('streetPins') && $('streetPins').children) || [];
-    for (var j = 0; j < pins.length; j++) if (pins[j].getAttribute('data-matter') === a.matter) pins[j].className += ' street-pin--answer';
+    for (var j = 0; j < pins.length; j++) if (String(pins[j].getAttribute('data-matters') || pins[j].getAttribute('data-matter')).split(' ').indexOf(a.matter) >= 0) pins[j].className += ' street-pin--answer';
   }
   var toastTimer = null;
   function say(text) {

package/modules/hall-ui/public/street.states.json

@@ -805,6 +805,74 @@
           ".desk-status--hot"
         ]
       }
+    },
+    "pins": {
+      "auth": true,
+      "_": "The street over the dense docket (task 1004569): one pin per building in the tier of its most important matter — urgent (needs you within a day: people, rules) largest and pulsing, needs you orange, moving small and ink, settled a grey dot — with a count where a building holds more than one open matter. Only urgent and needs-you pins show a label, and no two labels meet. Render at 1440 and 390 in both modes.",
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "clickIfVisible",
+          "[data-craft-close]"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#streetBoard",
+          ".street-pin--urgent",
+          ".street-pin--needs",
+          ".street-pin__badge"
+        ]
+      }
+    },
+    "pins-pager": {
+      "auth": true,
+      "_": "Planning holds four matters: its pin opens the most important one with \"1 of 4\" and previous/next inside the card; next turns to the second without leaving the street (task 1004569).",
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "clickIfVisible",
+          "[data-craft-close]"
+        ],
+        [
+          "wait",
+          300
+        ],
+        [
+          "dispatchClick",
+          ".street-pin[data-building=\"planning\"]"
+        ],
+        [
+          "wait",
+          600
+        ],
+        [
+          "click",
+          "[data-act=\"page-next\"]"
+        ],
+        [
+          "wait",
+          400
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#streetCard",
+          ".mcard-pager",
+          "[data-act=\"page-prev\"]",
+          "[data-act=\"page-next\"]"
+        ]
+      }
     }
   },
   "reducedMotion": {

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

@@ -176,9 +176,9 @@
 
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
-<script src="/builders/shell-trail.js?v=2026-10-04-nolegacy"></script>
-<script src="/builders/craft-mode.js?v=2026-10-04-nolegacy"></script>
-<script src="/builders/shell.js?v=2026-10-04-nolegacy"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-paintbrush"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-paintbrush"></script>
+<script src="/builders/shell.js?v=2026-10-04-paintbrush"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
 <!-- The kit, for its ONE renderer: the full-size ship-time visual figure