@bongos/core 1.21.7 → 1.21.8

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

@@ -0,0 +1,188 @@
+/* modules/hall-ui/public/street.css — THE STREET (task 1004525, goal 1000125,
+   R03). The street branch of the <style> and template of
+   docs/design/mocks/governor-city/Street.dc.html: the same header strip, names
+   and state lines, group brackets, pins with their labels, crates, doors, six
+   readings and card, at the same sizes, and the same keyframes (ring, enter,
+   bob). What changed is where the colours come from: the prototype wrote its
+   theme() values inline; here every colour is one of the hall's tokens
+   (style.css + the branding pack), whose values ARE the prototype's (bg #000 /
+   #edecee, ink, ink-soft, ink-faint, the rules, the accent #fb9569 and its
+   dark ink #2a1305). The drawing's own faces are drawing data in
+   street-draw.js (the prototype's front-on palette).
+   Nothing else is on the page, as on the city (task 1004524): no hall
+   sidebar, no top bar; the stage is the window.
+   No :root here (tests/hall_reading_world.mjs): page tokens live on the body.
+   The two dark blocks below are byte-identical twins. */
+
+body[data-page="street"] {
+  /* the hall's ground plate and its veil are the hall chrome's; the street is its own ground */
+  --plate: none;
+  --plate-veil: none;
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-body);
+  --street-rule: var(--rule-soft);
+  --street-rule-strong: var(--rule);
+  --street-accent-text: var(--accent-deep);
+  --street-glow: none;
+  --street-wash: color-mix(in srgb, var(--ink) 4.5%, transparent);
+  --street-crate: color-mix(in srgb, var(--ink) 55%, transparent);
+  --street-crate-fill: color-mix(in srgb, var(--ink) 4%, transparent);
+}
+html[data-theme="dark"] body[data-page="street"] {
+  --street-rule: color-mix(in srgb, var(--ink) 12%, transparent);
+  --street-rule-strong: color-mix(in srgb, var(--ink) 18%, transparent);
+  --street-accent-text: color-mix(in srgb, var(--accent) 70%, #ffffff);
+  --street-glow: 0 0 20px color-mix(in srgb, var(--accent) 50%, transparent);
+  --street-crate: color-mix(in srgb, var(--ink) 60%, transparent);
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) body[data-page="street"] {
+    --street-rule: color-mix(in srgb, var(--ink) 12%, transparent);
+    --street-rule-strong: color-mix(in srgb, var(--ink) 18%, transparent);
+    --street-accent-text: color-mix(in srgb, var(--accent) 70%, #ffffff);
+    --street-glow: 0 0 20px color-mix(in srgb, var(--accent) 50%, transparent);
+    --street-crate: color-mix(in srgb, var(--ink) 60%, transparent);
+  }
+}
+
+html:has(body[data-page="street"]) { height: 100%; }
+
+/* the stage: the window */
+.street-stage { position: fixed; inset: 0; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--font-body); overflow: hidden; }
+
+.street-label { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
+
+/* the header strip: wordmark and kicker left; needs you, moving, your share and the switch right */
+.street-top { flex: none; height: 64px; box-sizing: border-box; display: flex; align-items: center; gap: 16px; padding: 0 32px; border-bottom: 1px solid var(--street-rule); background: var(--bg); position: relative; z-index: 9; }
+.street-top__brand { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
+.street-mark { font-weight: 500; font-size: 17px; letter-spacing: -0.015em; text-transform: lowercase; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
+.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); }
+.street-hud__dot--hot { background: var(--accent); }
+.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; }
+
+/* the street band: the prototype's 1440-wide artboard, scaled by street.js */
+.street-window { flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0; box-sizing: border-box; display: flex; overflow-x: auto; overflow-y: hidden; position: relative; }
+.street-sizer { position: relative; margin: auto; flex: none; overflow: hidden; }
+.street-board { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; transform: scale(var(--street-scale, 1)) translateY(-64px); }
+.street-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
+.street-layer { position: absolute; left: 0; top: 0; width: 100%; height: 900px; pointer-events: none; }
+.street-layer > * { pointer-events: auto; }
+
+.street-hint { position: absolute; left: 0; right: 0; top: 84px; margin: 0; text-align: center; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); pointer-events: none; z-index: 2; }
+.street-evening { position: absolute; left: 0; right: 0; top: 104px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: 2; }
+.street-evening[hidden] { display: none; }
+.street-evening__h { margin: 0; font-size: 46px; font-weight: 300; letter-spacing: -0.042em; line-height: 1; }
+.street-evening__line { margin: 0; font-size: 16px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+
+/* work waiting at Review: dashed crates by its door */
+.street-crate { position: absolute; width: 15px; height: 13px; box-sizing: border-box; border: 1px dashed var(--street-crate); background: var(--street-crate-fill); border-radius: 2px; pointer-events: none !important; }
+
+/* a name and one line of state under every building */
+.street-col { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; pointer-events: none !important; }
+.street-col__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
+.street-col__name--strong { color: var(--ink); }
+.street-col__state { font-size: 12.5px; color: var(--ink-soft); line-height: 1.3; }
+
+/* the group brackets */
+.street-group { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none !important; }
+.street-group__bracket { width: 100%; height: 6px; box-sizing: border-box; border: 1px solid var(--street-rule-strong); border-top: 0; }
+
+/* doors: every building and district */
+.street-door { position: absolute; z-index: 1; border-radius: 8px; }
+.street-door:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
+.street-door--here { outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -3px; }
+
+/* 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__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; }
+.street-pin__head path { fill: currentColor; }
+.street-pin__head path + path { fill: none; stroke: currentColor; stroke-width: 1.4; }
+.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; }
+.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--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__stem { border-left-color: color-mix(in srgb, var(--ink) 22%, transparent); }
+.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); }
+
+/* the six readings */
+.street-signs { flex: none; height: 128px; box-sizing: border-box; margin: 0 32px; border-top: 1px solid var(--street-rule); background: var(--bg); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; z-index: 5; }
+.street-sign { display: flex; flex-direction: column; gap: 5px; padding: 12px 16px 0; text-align: left; color: var(--ink); text-decoration: none; border-left: 1px solid var(--street-rule); transition: transform 200ms cubic-bezier(.2,.7,.3,1); min-width: 0; }
+.street-sign:hover { transform: translateY(-2px); }
+.street-sign--here { background: var(--street-wash); }
+.street-sign__top { display: flex; align-items: center; gap: 8px; }
+.street-sign__top .street-label { font-size: 11px; }
+.street-sign__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--street-rule-strong); flex: none; }
+.street-sign--hot .street-sign__dot { background: var(--accent); }
+.street-sign__figure { font-size: 26px; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
+.street-sign__line { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
+
+/* the matter card, over the street (short form until task 1004528) */
+.street-card { position: absolute; left: var(--street-card-x, 32px); bottom: 16px; width: 390px; max-height: 300px; overflow-y: auto; box-sizing: border-box; background: var(--bg-card); border: 1px solid var(--street-rule-strong); border-radius: 16px; z-index: 8; padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 11px; }
+.street-card[hidden] { display: none; }
+.street-card__head { display: flex; align-items: center; gap: 10px; }
+.street-card__head .street-label { font-size: 11px; }
+.street-card__fill { flex-grow: 1; }
+.street-card__close { background: none; border: 0; width: 34px; height: 34px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink-faint); }
+.street-card__close svg { stroke-width: 1.5; }
+.street-card__title { margin: 0; font-size: 21px; font-weight: 300; letter-spacing: -0.025em; line-height: 1.2; }
+.street-card__meta { margin: 0; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.street-card__lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
+.street-card__lines li { padding: 8px 0; border-top: 1px solid var(--street-rule); font-size: 14px; line-height: 1.4; }
+.street-card__result { margin: 0; font-size: 15px; line-height: 1.45; }
+.street-card__open { align-self: flex-start; display: inline-flex; align-items: center; min-height: 24px; padding: 6px 0; font-size: 14px; color: var(--street-accent-text); text-decoration: underline; text-underline-offset: 4px; }
+.street-card__open[hidden] { display: none; }
+
+.street-mark:focus-visible, .street-mode:focus-visible, .street-pin:focus-visible, .street-door:focus-visible, .street-sign:focus-visible, .street-card__close:focus-visible, .street-card__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+
+/* narrower: the strip tightens, then wraps; the readings scroll sideways */
+@media (max-width: 1180px) {
+  .street-hud { gap: 20px; }
+  .street-hud__n { font-size: 20px; }
+  .street-mode { margin-left: 20px; }
+}
+/* narrow: two rows inside the 80 px top-bar floor, the wordmark and the switch
+   on the first, the three figures on the second as their own sideways strip */
+@media (max-width: 900px) {
+  .street-top { height: auto; max-height: 80px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand mode" "hud hud"; row-gap: 2px; padding: 5px 16px; }
+  .street-top__brand { grid-area: brand; }
+  .street-mode { grid-area: mode; margin-left: 0; height: 34px; }
+  .street-hud { grid-area: hud; margin-left: 0; gap: 18px; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; height: 30px; }
+  .street-hud__item { gap: 6px; flex: none; }
+  .street-hud .street-label { font-size: 11px; }
+  .street-hud__n { font-size: 16px; }
+  .street-signs { margin: 0 16px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 180px; overflow-x: auto; overflow-y: hidden; }
+}
+@media (max-width: 560px) {
+  .street-card { left: 16px; right: 16px; width: auto; }
+}
+
+/* the prototype's motion, verbatim */
+@keyframes street-ring { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
+@keyframes street-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.street-pin__ring { animation: street-ring 2.8s cubic-bezier(.2,.7,.3,1) infinite; }
+.street-card, .street-evening { animation: street-enter 320ms cubic-bezier(.16,1,.3,1) both; }
+
+/* The Kill Switch: under reduced motion nothing moves. The rest frame is the
+   whole street with its pins standing still. */
+@media (prefers-reduced-motion: reduce) {
+  body[data-page="street"] *, body[data-page="street"] *::before, body[data-page="street"] *::after { animation: none !important; transition: none !important; }
+}

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

@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>The street — {{worldName}}</title>
+  <meta name="description" content="The governor's street: every part of the project's government as a building, in the order work moves, a pin over every matter, and six readings along the bottom.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <!-- The faces (Manrope, JetBrains Mono) come from the branding pack's font
+       links, injected into this head by the server like every hall page's
+       (tests/hall_tokens.mjs: no hall page hardcodes a web-font stylesheet). -->
+  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/street.css?v=2026-10-02-street1">
+</head>
+<!-- THE STREET (task 1004525, goal 1000125, R03). The street view of
+     docs/design/mocks/governor-city/Street.dc.html (renderVals' street branch,
+     signsOf and the street half of its template), built over the governor
+     docket (GET /api/bongos/government/docket, task 1004523), the open goals
+     with their task rollups, and the viewer's earnings this month.
+
+     Nothing else is on the page, on purpose, as on the city (task 1004524):
+     no hall sidebar, no top bar. It has no menu link of its own: the way in is
+     the city's start governing, and the wordmark is the way back.
+
+     The markup is the prototype's: its header (the wordmark back to the city,
+     the kicker, needs you, moving, your share, the light/dark switch), the
+     street drawn on its 1440-wide artboard (street.js scales it to the
+     window), and the six readings along the bottom. Every
+     building and district is a door (an <a>) to where its interior lives —
+     /builders/street#building=<key> and #district=<goal id> (README "Where the
+     screens live"; task 1004526 builds them). A pin opens the matter's short
+     card (task 1004528 makes it act).
+
+     The drawing is street-draw.js (the prototype's front-on kit, verbatim, as
+     pure data) over city-draw.js (the glyphs and the seeded random, shared with
+     the city); street.js reads the feeds and builds the nodes; street.css is
+     the template's <style> on the hall's tokens.
+
+     The page is gated on board.vote.cast (src/bongos/serve-internal.js), the
+     same atom the docket read checks, so whoever reaches the street can read
+     what it draws. -->
+<body data-page="street" class="street">
+
+<div class="street-stage">
+
+<header class="street-top">
+  <div class="street-top__brand">
+    <a class="street-mark" id="streetHome" href="/builders/city" aria-label="Back to the city overview">{{productName}}</a>
+    <h1 class="street-kicker">the street</h1>
+  </div>
+  <div class="street-hud">
+    <div class="street-hud__item">
+      <span class="street-hud__dot" id="hudDot"></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-label">moving</span>
+      <span class="street-hud__n" id="hudMoving">—</span>
+    </div>
+    <div class="street-hud__item">
+      <span class="street-label">your share this month</span>
+      <span class="street-hud__n" id="hudShare">—</span>
+    </div>
+  </div>
+  <button type="button" class="street-mode" id="streetMode" aria-label="Switch to light mode" title="Switch to light mode">
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" aria-hidden="true"><path id="streetModeIcon" d=""></path></svg>
+    <span id="streetModeWord">light</span>
+  </button>
+</header>
+
+<main class="street-window" id="streetWindow">
+  <div class="street-sizer" id="streetSizer">
+  <div class="street-board" id="streetBoard" role="group" aria-label="The street">
+    <p class="street-hint" id="streetHint"></p>
+    <div class="street-evening" id="streetEvening" hidden>
+      <p class="street-evening__h">nothing waits on you.</p>
+      <p class="street-evening__line" id="streetEveningLine"></p>
+    </div>
+    <svg class="street-svg" id="streetSvg" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true" focusable="false">
+      <g id="streetFlat"></g>
+      <g id="streetBlds" class="street-blds"></g>
+    </svg>
+    <div class="street-layer" id="streetCrates" aria-hidden="true"></div>
+    <div class="street-layer" id="streetCols"></div>
+    <div class="street-layer" id="streetGroups" aria-hidden="true"></div>
+    <div class="street-layer" id="streetDoors"></div>
+    <div class="street-layer" id="streetPins"></div>
+  </div>
+  </div>
+</main>
+
+<nav class="street-signs" id="streetSigns" aria-label="The six readings"></nav>
+
+<div class="street-card" id="streetCard" role="dialog" aria-modal="false" aria-labelledby="streetCardTitle" hidden>
+  <div class="street-card__head">
+    <span class="street-label" id="streetCardWhere"></span>
+    <span class="street-card__fill"></span>
+    <span class="street-label" id="streetCardWhen"></span>
+    <button type="button" class="street-card__close" id="streetCardClose" aria-label="Close">
+      <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" aria-hidden="true"><path d="M2 2L12 12M12 2L2 12"></path></svg>
+    </button>
+  </div>
+  <h2 class="street-card__title" id="streetCardTitle"></h2>
+  <p class="street-card__meta" id="streetCardMeta" hidden></p>
+  <ul class="street-card__lines" id="streetCardLines" hidden></ul>
+  <p class="street-card__result" id="streetCardResult"></p>
+  <a class="street-card__open" id="streetCardOpen" href="/builders/street" hidden>open it where it lives</a>
+</div>
+
+</div>
+
+<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.js?v=2026-10-02-street1"></script>
+</body>
+</html>