@bongos/core 1.21.43 → 1.21.44

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

@@ -40,9 +40,11 @@
 //  * Review. The prototype's story opens with Review a vacant lot; in this
 //    project Review is held (the grader and the testers sign work off), so the
 //    held recipe is drawn and the parcels leave through Release.
-//  * Pins. A building can hold more matters than the prototype's one; up to
-//    three pins stand side by side over it (needs first, the docket's own
-//    order), and the line under the button carries the full counts.
+//  * Pins (task 1004569). A building can hold more matters than the prototype's
+//    one, and three pins abreast crowded each other; now ONE pin stands over a
+//    building, where the prototype stands its pin, in the importance tier of
+//    its most important matter (buildingPin below, shared with the street so
+//    both views agree), with a count when more than one matter is open there.
 
 (function (root) {
   'use strict';
@@ -244,7 +246,6 @@
     Object.freeze({ x0: 12, x1: 15, y0: 12, y1: 15, tall: 60, route: null }),
   ]);
   const MAX_DISTRICTS = BASE_LOTS.length * 2;
-  const MAX_PINS_PER_BUILDING = 3;
 
   function halve(L) {
     const w = L.x1 - L.x0 + 1, h = L.y1 - L.y0 + 1;
@@ -327,6 +328,39 @@
     return state === 'needs' || state === 'moving' || state === 'settled' ? state : 'moving';
   }
 
+  // ---------- importance tiers (task 1004569) ----------
+  // One pin per building, in the tier of its most important matter, so the city
+  // and the street read the same at a glance. Colour AND size carry the tier
+  // (city.css, street.css), so it also reads without colour:
+  //   urgent   needs you and due within 24 hours (or overdue): largest, orange, pulsing
+  //   needs    needs you: orange, medium (the prototype's pin)
+  //   moving   others are deciding: ink, small
+  //   settled  settled recently: a small grey dot, no label, no count
+  const TIERS = Object.freeze(['urgent', 'needs', 'moving', 'settled']);
+  const URGENT_MS = 24 * 3600 * 1000;
+  function matterTier(m, now) {
+    const st = pinState(m && m.state);
+    if (st !== 'needs') return st;
+    const t = m.deadline ? Date.parse(m.deadline) : NaN;
+    return Number(now) > 0 && isFinite(t) && t - Number(now) <= URGENT_MS ? 'urgent' : 'needs';
+  }
+  // A building's matters → its one pin: the tier of the most important, the
+  // count of the open ones (settled is not open), and every matter, most
+  // important first (the docket's own order inside a tier), for the card pager.
+  function buildingPin(matters, now) {
+    const ranked = (Array.isArray(matters) ? matters : []).filter(Boolean)
+      .map((m, i) => ({ m: m, t: matterTier(m, now), i: i }))
+      .sort((a, b) => TIERS.indexOf(a.t) - TIERS.indexOf(b.t) || a.i - b.i);
+    if (!ranked.length) return null;
+    return { tier: ranked[0].t, top: ranked[0].m, count: ranked.filter((r) => r.t !== 'settled').length, matters: ranked.map((r) => r.m) };
+  }
+  // What a pin says to a screen reader: '3 open at charter, the first needs you within a day'.
+  const TIER_WORDS = Object.freeze({ urgent: 'needs you within a day', needs: 'needs you', moving: 'is moving without you', settled: 'is settled' });
+  function pinAria(building, bp) {
+    const lead = bp.count > 1 ? bp.count + ' open at ' + building + ', the first ' : bp.count === 1 ? 'One open at ' + building + ': it ' : 'At ' + building + ': ';
+    return lead + TIER_WORDS[bp.tier] + '. ' + String(bp.top.title || bp.top.short || '');
+  }
+
   // The home line, when the docket could not be read.
   const FALLBACK_LINE = 'the docket could not be read just now';
 
@@ -335,6 +369,7 @@
   //   goals    GET /goals goals[] (any status; only 'open' ones are drawn)
   //   rollups  GET /goals/rollups rollups[] (goal_id → task counts)
   //   mode     'dark' | 'light'
+  //   now      ms since the epoch (a deadline inside a day is urgent)
   function cityModel(input) {
     const opts = input || {};
     const docket = opts.docket && typeof opts.docket === 'object' ? opts.docket : null;
@@ -385,7 +420,7 @@
     });
     blds.sort((a, b) => a.depth - b.depth);
 
-    // a pin over each open matter's building (up to three abreast)
+    // one pin over each building with a matter, in its most important matter's tier
     const slotOf = {};
     CIVIC_SLOTS.forEach((s) => { slotOf[s[0]] = s; });
     const matters = docket && Array.isArray(docket.matters) ? docket.matters : [];
@@ -397,14 +432,16 @@
     const pins = [];
     let n = 0;
     CIVIC_SLOTS.forEach((s) => {
-      const here = (atBuilding[s[0]] || []).slice(0, MAX_PINS_PER_BUILDING);
+      const bp = buildingPin(atBuilding[s[0]], opts.now);
+      if (!bp) return;
       const top = P(s[1] + 1, s[2] + 1, ROOF[s[0]] + 8);
-      here.forEach((m, i) => {
-        const g = glyph(m.rule, 7, 7, 13);
-        const dx = (i - (here.length - 1) / 2) * 26;
-        pins.push({ key: String(m.id), building: s[0], state: pinState(m.state), title: String(m.short || m.title || ''), x: r1(top[0] - 15 + dx), y: r1(top[1] - 52), h: 52, gf: g.fill, gl: g.line, delay: -(n * 0.9) });
-        n += 1;
+      const m = bp.top;
+      const g = glyph(m.rule, 7, 7, 13);
+      pins.push({
+        key: String(m.id), building: s[0], state: bp.tier, count: bp.tier === 'settled' ? 0 : bp.count, matters: bp.matters.map((x) => String(x.id)),
+        title: String(m.short || m.title || ''), aria: pinAria(s[0], bp), x: r1(top[0] - 15), y: r1(top[1] - 52), h: 52, gf: g.fill, gl: g.line, delay: -(n * 0.9),
       });
+      n += 1;
     });
 
     // work on the move: parcels ride the ring road to Review, and leave through Release
@@ -423,7 +460,7 @@
 
     const line = docket && docket.line ? String(docket.line) : FALLBACK_LINE;
     const pinCount = { needs: 0, moving: 0, settled: 0 };
-    pins.forEach((p) => { pinCount[p.state] += 1; });
+    pins.forEach((p) => { pinCount[p.state === 'urgent' ? 'needs' : p.state] += 1; });
     const label = 'The governor city: the nine civic buildings round the plaza and '
       + (districts.length === 1 ? 'one district' : districts.length + ' districts') + ', one for each open goal'
       + (pins.length ? '. Pins: ' + pinCount.needs + ' need you, ' + pinCount.moving + ' moving, ' + pinCount.settled + ' settled.' : '.');
@@ -439,7 +476,8 @@
     isoTheme: isoTheme, isoKit: isoKit, isoBox: isoBox, isoGable: isoGable, isoHip: isoHip, isoSaw: isoSaw,
     isoTree: isoTree, isoLight: isoLight, isoInstitution: isoInstitution, isoWork: isoWork, glyph: glyph, rnd: rnd,
     lotsFor: lotsFor, districtWork: districtWork, cityModel: cityModel, rulesAtWork: rulesAtWork,
-    CIVIC_SLOTS: CIVIC_SLOTS, ROOF: ROOF, BASE_LOTS: BASE_LOTS, MAX_DISTRICTS: MAX_DISTRICTS, MAX_PINS_PER_BUILDING: MAX_PINS_PER_BUILDING,
+    matterTier: matterTier, buildingPin: buildingPin, pinAria: pinAria, TIERS: TIERS, URGENT_MS: URGENT_MS,
+    CIVIC_SLOTS: CIVIC_SLOTS, ROOF: ROOF, BASE_LOTS: BASE_LOTS, MAX_DISTRICTS: MAX_DISTRICTS,
     FALLBACK_LINE: FALLBACK_LINE, STREET_HREF: STREET_HREF,
   };
   root.GovCity = api;

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

@@ -84,8 +84,15 @@ html[data-fullscreen="on"] .city-top { right: 184px; }
 .city-pin__head path + path { fill: none; stroke: currentColor; stroke-width: 1.2; }
 .city-pin__stem { width: 0; flex-grow: 1; border-left: 1px solid transparent; }
 .city-pin__ring { position: absolute; inset: -1px; border-radius: 999px; border: 1px solid var(--accent); }
-.city-pin--needs .city-pin__head { background: var(--accent); color: var(--accent-on); box-shadow: var(--city-glow); }
-.city-pin--needs .city-pin__stem { border-left-color: color-mix(in srgb, var(--accent) 60%, transparent); }
+/* importance tiers (task 1004569): colour AND size, so a tier reads without colour.
+   urgent 26 > needs 22 (the prototype's) > moving 16 > settled 8, a plain dot */
+.city-pin--urgent .city-pin__head, .city-pin--needs .city-pin__head { background: var(--accent); color: var(--accent-on); box-shadow: var(--city-glow); }
+.city-pin--urgent .city-pin__head { width: 26px; height: 26px; }
+.city-pin--urgent .city-pin__stem, .city-pin--needs .city-pin__stem { border-left-color: color-mix(in srgb, var(--accent) 60%, transparent); }
+.city-pin--moving .city-pin__head { width: 16px; height: 16px; }
+.city-pin--moving .city-pin__head svg { width: 10px; height: 10px; }
+.city-pin--settled .city-pin__head { width: 8px; height: 8px; margin-top: 14px; }
+.city-pin__count { position: absolute; top: -6px; right: -9px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 999px; background: var(--bg-card); color: var(--ink); border: 1px solid currentColor; font-size: 9.5px; font-weight: 600; line-height: 12px; text-align: center; font-variant-numeric: tabular-nums; }
 .city-pin--moving .city-pin__head { background: var(--ink); color: var(--bg-card); }
 .city-pin--moving .city-pin__stem { border-left-color: color-mix(in srgb, var(--ink) 45%, transparent); }
 .city-pin--settled .city-pin__head { background: color-mix(in srgb, var(--ink) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); color: var(--ink-faint); }

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

@@ -12,7 +12,7 @@
        (tests/hall_tokens.mjs: no hall page hardcodes a web-font stylesheet).
        The prototype carried its own Google Fonts link for the same two faces. -->
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
-  <link rel="stylesheet" href="/builders/city.css?v=2026-10-02-city1">
+  <link rel="stylesheet" href="/builders/city.css?v=2026-10-04-pins1">
 </head>
 <!-- THE GOVERNOR CITY, HOME (task 1004524, goal 1000125, R02). The home view
      of docs/design/mocks/governor-city/Street.dc.html (homeView and the home
@@ -87,7 +87,7 @@
 <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/palette.js" defer></script>
-<script src="/builders/city-draw.js?v=2026-10-02-city1"></script>
-<script src="/builders/city.js?v=2026-10-02-city1"></script>
+<script src="/builders/city-draw.js?v=2026-10-04-pins1"></script>
+<script src="/builders/city.js?v=2026-10-04-pins1"></script>
 </body>
 </html>

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

@@ -132,22 +132,33 @@
     var el = span('city-pin city-pin--' + pin.state);
     el.setAttribute('data-matter', pin.key);
     el.setAttribute('data-building', pin.building);
+    if (pin.aria) el.setAttribute('title', pin.aria);
     el.style.left = pin.x + 'px';
     el.style.top = pin.y + 'px';
     el.style.height = pin.h + 'px';
     el.style.animationDelay = pin.delay + 's';
     var head = span('city-pin__head');
-    if (pin.state === 'needs') head.appendChild(span('city-pin__ring'));
-    var svg = document.createElementNS(SVG_NS, 'svg');
-    svg.setAttribute('width', '14');
-    svg.setAttribute('height', '14');
-    var fill = document.createElementNS(SVG_NS, 'path');
-    fill.setAttribute('d', pin.gf || '');
-    var line = document.createElementNS(SVG_NS, 'path');
-    line.setAttribute('d', pin.gl || '');
-    svg.appendChild(fill);
-    svg.appendChild(line);
-    head.appendChild(svg);
+    // only the urgent tier pulses; a settled pin is a plain grey dot, no mark (task 1004569)
+    if (pin.state === 'urgent') head.appendChild(span('city-pin__ring'));
+    if (pin.state !== 'settled') {
+      var svg = document.createElementNS(SVG_NS, 'svg');
+      svg.setAttribute('width', '14');
+      svg.setAttribute('height', '14');
+      svg.setAttribute('viewBox', '0 0 14 14');
+      var fill = document.createElementNS(SVG_NS, 'path');
+      fill.setAttribute('d', pin.gf || '');
+      var line = document.createElementNS(SVG_NS, 'path');
+      line.setAttribute('d', pin.gl || '');
+      svg.appendChild(fill);
+      svg.appendChild(line);
+      head.appendChild(svg);
+    }
+    // the count of the building's open matters, when there is more than one
+    if (pin.count > 1) {
+      var badge = span('city-pin__count');
+      badge.textContent = String(pin.count);
+      head.appendChild(badge);
+    }
     el.appendChild(head);
     el.appendChild(span('city-pin__stem'));
     return el;
@@ -162,7 +173,7 @@
   }
 
   function draw(mode) {
-    var model = City.cityModel({ docket: data.docket, goals: data.goals, rollups: data.rollups, mode: mode });
+    var model = City.cityModel({ docket: data.docket, goals: data.goals, rollups: data.rollups, mode: mode, now: Date.now() });
     var flat = $('cityFlat'), blds = $('cityBlds'), parcels = $('cityParcels'), pins = $('cityPins');
     clear(flat); clear(blds); clear(parcels); clear(pins);
     model.flat.forEach(function (p) { flat.appendChild(pathEl(p)); });

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

@@ -2,35 +2,169 @@
   "_": "THE GOVERNOR CITY's home (task 1004524, goal 1000125) through modules/ui-design/kit/render.js. The page draws GET /government/docket, GET /goals and GET /goals/rollups; against the kit's own stub none exists, so every state renders the city with no districts and no pins and the line saying the docket could not be read: a real state the floors must hold in. To look at the populated city, run it against the hall-preview harness, whose government__docket.json fixture carries the reference design's seven sample matters (3 need you, 2 moving, 2 settled) and whose goals fixtures carry the open goals:\n\n  node scripts/hall-preview/server.js --port 4624 --fixture-me\n  node modules/ui-design/kit/render.js --states modules/hall-ui/public/city.states.json --base-in http://localhost:4624 --base-out http://localhost:4624\n\nThe page follows the OS mode until the switch is pressed (then the hall's own 'hall-theme' preference), so the kit's dark/light emulation renders both modes.",
   "page": "/builders/city",
   "surface": "hall-ui",
-  "stub": { "prefix": "/builders/" },
+  "stub": {
+    "prefix": "/builders/"
+  },
   "modeQuery": false,
-  "ignoreRequests": ["/api/(gds|bongos)/", "fonts\\.g(oogleapis|static)\\.com"],
-  "ignoreConsole": ["/api/(gds|bongos)/", "\\b401\\b", "\\b403\\b", "\\b404\\b", "Unauthorized", "Forbidden", "Not Found", "load failed", "fonts\\.g(oogleapis|static)\\.com"],
+  "ignoreRequests": [
+    "/api/(gds|bongos)/",
+    "fonts\\.g(oogleapis|static)\\.com"
+  ],
+  "ignoreConsole": [
+    "/api/(gds|bongos)/",
+    "\\b401\\b",
+    "\\b403\\b",
+    "\\b404\\b",
+    "Unauthorized",
+    "Forbidden",
+    "Not Found",
+    "load failed",
+    "fonts\\.g(oogleapis|static)\\.com"
+  ],
   "states": {
     "city": {
       "auth": true,
       "_": "The home: the wordmark, the switch, the city, start governing and the one line.",
-      "actions": [["wait", 900]],
-      "expect": { "visible": ["#cityStage", "#cityStart", "#cityLine", "#cityMode", "#app-topbar", "#fullscreen-toggle"], "href": [["#cityStart", "/builders/street"]] }
+      "actions": [
+        [
+          "wait",
+          900
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#cityStage",
+          "#cityStart",
+          "#cityLine",
+          "#cityMode",
+          "#app-topbar",
+          "#fullscreen-toggle"
+        ],
+        "href": [
+          [
+            "#cityStart",
+            "/builders/street"
+          ]
+        ]
+      }
     },
     "fullscreen": {
       "auth": true,
       "_": "In the hall since task 1004544: the shell's full-screen switch pressed, the sidebar and the top bar gone, the city filling the window and the one exit in the corner (the sky's mechanism, task 1004327).",
-      "actions": [["wait", 900], ["click", "#fullscreen-toggle"], ["wait", 500]],
-      "expect": { "visible": ["#cityStage", "#cityStart", "#cityMode", "#fullscreen-toggle"], "hidden": ["#app-sidebar", "#topbar-title"], "attr": [["#fullscreen-toggle", "aria-pressed", "true"]] }
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "click",
+          "#fullscreen-toggle"
+        ],
+        [
+          "wait",
+          500
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#cityStage",
+          "#cityStart",
+          "#cityMode",
+          "#fullscreen-toggle"
+        ],
+        "hidden": [
+          "#app-sidebar",
+          "#topbar-title"
+        ],
+        "attr": [
+          [
+            "#fullscreen-toggle",
+            "aria-pressed",
+            "true"
+          ]
+        ]
+      }
     },
     "switched": {
       "auth": true,
       "_": "The sun/moon switch pressed once: the other mode, the city redrawn in it.",
-      "actions": [["wait", 600], ["click", "#cityMode"], ["wait", 400]],
-      "expect": { "visible": ["#cityStage", "#cityStart"] }
+      "actions": [
+        [
+          "wait",
+          600
+        ],
+        [
+          "click",
+          "#cityMode"
+        ],
+        [
+          "wait",
+          400
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#cityStage",
+          "#cityStart"
+        ]
+      }
     },
     "focus": {
       "auth": true,
       "_": "Keyboard: the start button focused, its ring drawn.",
-      "actions": [["wait", 600], ["focus", "#cityStart"], ["wait", 100]],
-      "expect": { "activeId": "cityStart" }
+      "actions": [
+        [
+          "wait",
+          600
+        ],
+        [
+          "focus",
+          "#cityStart"
+        ],
+        [
+          "wait",
+          100
+        ]
+      ],
+      "expect": {
+        "activeId": "cityStart"
+      }
+    },
+    "pins": {
+      "auth": true,
+      "_": "The home city over the dense docket with the same pin tiers as the street (task 1004569): one pin per building, urgent largest and pulsing, needs you orange, moving small and ink, a count where a building holds more than one open matter.",
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "clickIfVisible",
+          "[data-craft-close]"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#cityPins",
+          ".city-pin--urgent",
+          ".city-pin--needs",
+          ".city-pin--moving",
+          ".city-pin__count"
+        ]
+      }
     }
   },
-  "reducedMotion": { "auth": true, "actions": [["wait", 600]] }
+  "reducedMotion": {
+    "auth": true,
+    "actions": [
+      [
+        "wait",
+        600
+      ]
+    ]
+  }
 }

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

@@ -84,6 +84,12 @@ body[data-page="street"] {
 
 /* more: the detail, in place */
 .mcard-more__toggle { margin-top: -2px; }
+/* the pager: "1 of N" with previous and next, when a pin holds more than one matter (task 1004569) */
+.mcard-pager { display: flex; align-items: center; gap: 4px; margin: -4px 0 2px; }
+.mcard-pager__btn { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--street-rule-strong); background: none; color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 2px; }
+.mcard-pager__btn:hover { border-color: var(--ink-faint); }
+.mcard-pager__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.mcard-pager__at { min-width: 52px; text-align: center; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
 .mcard-more { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--street-rule); }
 .mcard-more__text { margin: 0 0 4px; font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
 .mcard-more__meta { margin: 0; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

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;