@bongos/core 1.21.113 → 1.21.115

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

@@ -18,6 +18,20 @@ body[data-page="city"] {
   --city-glow: none;
   --city-crate: color-mix(in srgb, var(--ink) 7%, transparent);
   --city-crate-edge: color-mix(in srgb, var(--ink) 55%, transparent);
+  /* THE LIVING CITY (task 1004685). Paper cannot glow, so in light every glow
+     is an ink wash and a lit window is ink-filled; the dark twins below turn
+     the same names into light in the black. Salmon (the accent) is spent only
+     on what waits on the viewer: its windows, its pins and their age rings. */
+  --city-win-lit: color-mix(in srgb, var(--ink) 58%, transparent);
+  --city-shaft: color-mix(in srgb, var(--ink) 8%, transparent);
+  --city-shaft-ring: color-mix(in srgb, var(--ink) 34%, transparent);
+  --city-pod-hi: color-mix(in srgb, var(--ink) 62%, var(--bg));
+  --city-pod-lo: var(--ink);
+  --city-lane: color-mix(in srgb, var(--ink) 32%, transparent);
+  --city-conduit: color-mix(in srgb, var(--sea) 62%, transparent);
+  --city-hover: brightness(.96);
+  --city-crane: color-mix(in srgb, var(--ink) 62%, transparent);
+  --city-ghost-edge: color-mix(in srgb, var(--sea) 72%, transparent);
   /* the hall's ground plate and its dark veil (style.css body::before/::after) are
      the hall chrome's; the city is its own ground, so both are off here */
   --plate: none;
@@ -32,11 +46,31 @@ body[data-page="city"] {
 html[data-theme="dark"] body[data-page="city"] {
   --city-contact: none;
   --city-glow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
+  --city-win-lit: color-mix(in srgb, var(--ink) 40%, transparent);
+  --city-shaft: color-mix(in srgb, var(--ink) 14%, transparent);
+  --city-shaft-ring: color-mix(in srgb, var(--ink) 48%, transparent);
+  --city-pod-hi: var(--ink);
+  --city-pod-lo: color-mix(in srgb, var(--ink) 42%, var(--bg));
+  --city-lane: color-mix(in srgb, var(--ink) 28%, transparent);
+  --city-conduit: color-mix(in srgb, var(--sea) 78%, transparent);
+  --city-hover: brightness(1.4);
+  --city-crane: color-mix(in srgb, var(--ink) 70%, transparent);
+  --city-ghost-edge: color-mix(in srgb, var(--sea) 55%, var(--ink));
 }
 @media (prefers-color-scheme: dark) {
   html:not([data-theme]) body[data-page="city"] {
     --city-contact: none;
     --city-glow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
+    --city-win-lit: color-mix(in srgb, var(--ink) 40%, transparent);
+    --city-shaft: color-mix(in srgb, var(--ink) 14%, transparent);
+    --city-shaft-ring: color-mix(in srgb, var(--ink) 48%, transparent);
+    --city-pod-hi: var(--ink);
+    --city-pod-lo: color-mix(in srgb, var(--ink) 42%, var(--bg));
+    --city-lane: color-mix(in srgb, var(--ink) 28%, transparent);
+    --city-conduit: color-mix(in srgb, var(--sea) 78%, transparent);
+    --city-hover: brightness(1.4);
+    --city-crane: color-mix(in srgb, var(--ink) 70%, transparent);
+    --city-ghost-edge: color-mix(in srgb, var(--sea) 55%, var(--ink));
   }
 }
 html:has(body[data-page="city"]) { height: 100%; }
@@ -74,7 +108,8 @@ html[data-fullscreen="on"] .city-top { right: 184px; }
 
 /* parcels: crates riding the ring road on offset-path */
 .city-parcel { position: absolute; left: 0; top: 0; width: 9px; height: 7px; margin: -4px 0 0 -5px; box-sizing: border-box; border-radius: 2px; background: var(--city-crate); border: 1px solid var(--city-crate-edge); offset-rotate: 0deg; }
-.city-parcel--out { background: var(--accent); border-color: var(--accent); }
+/* work leaving through Release is live, not yours to answer: ink, not salmon (task 1004685) */
+.city-parcel--out { background: var(--ink-soft); border-color: var(--ink-soft); }
 
 /* pins: orange and pulsing waits on you; ink and bobbing is moving; grey is settled */
 .city-pin { position: absolute; width: 30px; height: 52px; display: flex; flex-direction: column; align-items: center; }
@@ -110,6 +145,100 @@ html[data-fullscreen="on"] .city-top { right: 184px; }
   .city-door { bottom: 40px; padding: 0 16px; }
 }
 
+/* ======================================================================
+   THE LIVING CITY (task 1004685): three levels, each with one meaning.
+   ====================================================================== */
+
+/* ground: the spend conduit, in the reserve blue; the trunk's width is the
+   real spend rate, a spur's its pot's share; a dry pot's spur is starved */
+.city-conduit { fill: none; stroke: var(--city-conduit); stroke-linecap: round; stroke-linejoin: round; }
+.city-conduit--dry { stroke: color-mix(in srgb, var(--sea) 50%, transparent); }
+
+/* civic: windows. Ink for how busy a building is; salmon only for what waits on you */
+.city-win--lit { fill: var(--city-win-lit); }
+.city-win--you { fill: var(--accent); }
+/* the council's tally over a ghost annex: a dot per seat, filled as they vote */
+.city-tally--yes { fill: var(--ink); }
+.city-tally--no { fill: var(--ink-faint); }
+.city-tally--open { fill: none; stroke: var(--ink-soft); stroke-width: 1; }
+
+/* sky: one dotted lane per building-to-district route, one chrome pod per agent;
+   a dry pot's reserve-borrow beacon */
+.city-lane { fill: none; stroke: var(--city-lane); stroke-width: 2; stroke-dasharray: 0.1 7; stroke-linecap: round; }
+.city-beacon { fill: var(--sea); stroke: none; }
+.city-beacon--stem { fill: none; stroke: var(--sea); }
+.city-beacon--ring { fill: none; stroke: color-mix(in srgb, var(--sea) 60%, transparent); }
+.city-sky, .city-hits { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; pointer-events: none; }
+.city-pod { position: absolute; left: 0; top: 0; width: 11px; height: 5px; margin: -2.5px 0 0 -5.5px; box-sizing: border-box; border-radius: 999px; background: linear-gradient(180deg, var(--city-pod-hi), var(--city-pod-lo)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 55%, transparent); offset-rotate: auto; offset-distance: var(--pod-at, 30%); }
+
+.city-lane__more { position: absolute; transform: translate(-50%, -150%); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
+
+/* an open sitting: a light shaft from the roof, a ring rising slowly through it */
+.city-shaft { position: absolute; width: 30px; margin-left: -15px; overflow: hidden; background: linear-gradient(to top, var(--city-shaft), transparent); -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%); }
+.city-shaft__ring { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; margin-bottom: -5px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--city-shaft-ring); transform: translateY(-34px); }
+
+/* each building's Lead, or "owner" where it has none (GET /government/leads) */
+.city-plate { position: absolute; transform: translateY(-50%); height: 18px; padding: 0 8px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--rule-soft); background: color-mix(in srgb, var(--bg) 78%, transparent); font-family: var(--font-body); font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap; color: var(--ink-soft); }
+.city-plate--owner { border-style: dashed; color: var(--ink-faint); visibility: hidden; }
+/* "owner" is the absence of a Lead: it shows only while its building is pointed
+   at, focused or open (city.js), so the seated Leads read at a glance */
+.city-plate--owner.city-plate--shown { visibility: visible; }
+
+/* construction reads at a glance, the street's family: a solid lattice crane and
+   a firmer scaffold over the live site; the ghost annex a crisp dashed glass */
+.city-crane path, .city-jib path { stroke: var(--city-crane); stroke-width: 1.3; }
+.city-scaffold path { stroke: var(--city-crane); stroke-width: 1.1; }
+.city-ghost path { stroke: var(--city-ghost-edge); stroke-width: 1.2; }
+
+/* the building you tap. A pointer finds it by its own painted faces (the one in
+   front wins, as the eye sees it), its pin or its plate; the button over its
+   core is the keyboard's and the screen reader's way in, and where the card is
+   placed beside. */
+.city-blds g[data-civic] { pointer-events: visiblePainted; cursor: pointer; }
+.city-blds g[data-civic]:hover { filter: var(--city-hover); }
+.city-pin__head, .city-plate { pointer-events: auto; cursor: pointer; }
+.city-hit { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; pointer-events: none; }
+.city-hit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+
+/* the pins' age ring: how long the oldest ask on you has waited, full at two weeks */
+.city-pin__age { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); overflow: visible; }
+.city-pin__age-track { fill: none; stroke: color-mix(in srgb, var(--accent) 24%, transparent); stroke-width: 2; }
+.city-pin__age-arc { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
+
+/* the gate plaque: the government at a glance, one number and two words a tile */
+.city-plaque { position: absolute; left: 32px; top: 62px; z-index: 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; max-width: calc(100% - 64px); }
+.city-plaque[hidden] { display: none; }
+.city-plaque__tile { display: inline-flex; align-items: baseline; gap: 7px; }
+.city-plaque__figure { font-size: 22px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
+.city-plaque__words { font-family: var(--label-face); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
+.city-plaque__tile[data-key="you"] .city-plaque__figure { color: var(--accent-deep); }
+
+/* the card a building opens in place, in the desk line: who, one fact, its count, two doors */
+/* the building's card (task 1004702): a glass panel beside the building, the
+   glass and its tokens street-deck.css's (the ask inside is the deck's card) */
+.city-card { position: absolute; left: 50%; top: 96px; z-index: 8; width: min(432px, calc(100% - 32px)); max-height: calc(100% - 80px); overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 18px; border-radius: 28px; color: var(--ink); }
+.city-card[hidden] { display: none; }
+.city-card__head { display: flex; flex-direction: column; gap: 4px; }
+.city-card__top { display: flex; align-items: center; gap: 10px; }
+.city-card__name { flex: 1; min-width: 0; margin: 0; font-size: 24px; font-weight: 400; letter-spacing: -0.02em; }
+.city-card__close { flex: none; display: inline-flex; background: none; border: 0; padding: 0; min-width: 24px; min-height: 24px; cursor: pointer; }
+.city-card__f { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
+.city-card__count--you { color: var(--you-ink); }
+.city-card__said { margin: -4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
+.city-card__close:focus-visible, .city-card__go:focus-visible, .city-card__enter:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.city-card__acts { display: flex; align-items: center; gap: 14px; }
+.city-card__go { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; box-sizing: border-box; border-radius: 999px; font-size: 15px; text-decoration: none; background: var(--ink); color: var(--bg); }
+.city-card__enter { display: inline-flex; align-items: center; min-height: 24px; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
+.city-spot { z-index: 7; }
+
+@media (max-width: 640px) {
+  /* the plates are in the card on a phone; the card is a sheet along the foot */
+  .city-plate { display: none; }
+  .city-card { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; max-height: 72%; overflow-y: auto; }
+  .city-plaque { left: 16px; max-width: calc(100% - 32px); gap: 2px 14px; }
+  .city-plaque__figure { font-size: 18px; }
+}
+
 /* the prototype's motion, verbatim */
 @keyframes city-ring { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
 @keyframes city-zoom { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@@ -122,6 +251,33 @@ html[data-fullscreen="on"] .city-top { right: 184px; }
 .city-pin__ring { animation: city-ring 2.8s cubic-bezier(.2,.7,.3,1) infinite; }
 .city-parcel { animation-name: city-travel; animation-timing-function: linear; animation-iteration-count: infinite; }
 
+/* THE LIVING CITY's motion (task 1004685). It only says "this is live": data
+   is in count, size, position and colour, never in speed or a blink, so every
+   lane runs the same period and every loop is 20s or longer. Pods ride
+   offset-distance (the traffic exception the parcels already hold); the rest
+   is transform alone. Each moving part's still frame is set on the part
+   itself (--pod-at, --rise, --climb-at), so the Kill Switch leaves a whole
+   composition: the pods standing on their lanes at fixed spacing, the
+   scaffold at its share built, the rings at the foot of their shafts. */
+@keyframes city-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
+@keyframes city-rise { 0% { transform: scaleY(.04); } 72%, 100% { transform: scaleY(1); } }
+@keyframes city-climb { from { transform: translateY(0); } to { transform: translateY(var(--climb, -40px)); } }
+@keyframes city-swing { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
+@keyframes city-shaft { from { transform: translateY(0); } to { transform: translateY(-140px); } }
+@keyframes city-plug { from { transform: scaleY(0); } to { transform: none; } }
+@keyframes city-plug-in { from { transform: scale(0); } to { transform: none; } }
+.city-pod { animation: city-fly 26s linear infinite alternate; }
+.city-rise { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--rise, 1)); animation: city-rise 24s cubic-bezier(.2,.7,.3,1) infinite; }
+.city-climb { transform: translateY(var(--climb-at, 0px)); animation: city-climb 26s ease-in-out infinite alternate; }
+.city-jib { transform-box: view-box; transform-origin: var(--pivot, 0 0); animation: city-swing 28s ease-in-out infinite alternate; }
+.city-shaft__ring { animation: city-shaft 22s linear infinite; }
+/* government adds structure: a capsule plugs in on the world's arrive curve, the
+   shape first, then its windows; once, on the first drawing (city.js marks the
+   stage data-drawn so a redraw does not replay it) */
+.city-plug { transform-box: fill-box; transform-origin: 50% 100%; animation: city-plug 700ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(500ms + var(--i, 0) * 160ms); }
+.city-plug--detail { transform-origin: 50% 50%; animation-name: city-plug-in; animation-delay: calc(900ms + var(--i, 0) * 160ms); }
+.city-stage[data-drawn] .city-plug { animation: none; }
+
 /* The Kill Switch: under reduced motion nothing moves. The rest frame is the
    whole city with its pins standing still; the parcels, which only mean
    something while they travel, are left out of it. */

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

@@ -12,7 +12,9 @@
        (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-04-pins1">
+  <link rel="stylesheet" href="/builders/city.css?v=2026-10-13-glass1">
+  <!-- the ask card in the glass language, shared with the street's deck (task 1004702) -->
+  <link rel="stylesheet" href="/builders/street-deck.css?v=2026-10-13-glass1">
 </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
@@ -43,7 +45,19 @@
 
      The page is gated on board.vote.cast (src/bongos/serve-internal.js), the
      same atom the docket read checks, so whoever reaches the city can read
-     what it draws. -->
+     what it draws.
+
+     THE LIVING CITY (task 1004685, a prototype parked for the owner). The
+     same drawing in three levels: the ground (the goal districts, hazed by
+     depth, and the spend conduit), the civic quarter (each building a core
+     whose capsule floors are its Lead, committee rooms and built floors, its windows
+     ink for activity and salmon for what waits on you, a live build site or a
+     ghost annex on a vote, a light shaft over an open sitting) and the sky
+     (one pod per agent at work, on a lane to its goal's district). The plaque
+     under the wordmark is the government at a glance; a building opens its
+     card in place (who holds it, one fact, its count, two doors); the door is
+     "decide N in a row". gov-living.js is the model under it, all of it real
+     reads (task 1004717: the prototype overlay and its key are gone). -->
 <body data-page="city" data-page-title="The city" class="city" data-fullscreen-switch>
 
 <div class="app">
@@ -59,22 +73,28 @@
       <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" aria-hidden="true"><path id="cityModeIcon" d=""></path></svg>
     </button>
   </div>
+  <div class="city-plaque" id="cityPlaque" aria-label="The government at a glance" hidden></div>
 
   <div class="city-frame" id="cityFrame">
-    <div class="city-stage" id="cityStage" role="img" aria-label="The governor city">
+    <div class="city-stage" id="cityStage" role="group" aria-label="The governor city">
       <div class="city-zoom">
         <div class="city-drift">
           <svg class="city-svg" id="citySvg" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true" focusable="false">
             <g id="cityFlat"></g>
             <g id="cityBlds" class="city-blds"></g>
+            <g id="citySkyLanes" class="city-sky-lanes"></g>
           </svg>
           <div class="city-parcels" id="cityParcels" aria-hidden="true"></div>
+          <div class="city-sky" id="citySky" aria-hidden="true"></div>
           <div class="city-pins" id="cityPins" aria-hidden="true"></div>
+          <div class="city-hits" id="cityHits"></div>
         </div>
       </div>
     </div>
   </div>
 
+  <div class="city-card" id="cityCard" role="dialog" aria-label="A building" hidden></div>
+
   <div class="city-door">
     <a class="city-start" id="cityStart" href="/builders/street" aria-label="Start governing: enter the street view">start governing</a>
     <h1 class="city-line" id="cityLine" aria-live="polite">reading the docket</h1>
@@ -84,10 +104,20 @@
 </div>
 
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/craft-mode.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/shell.js?v=2026-10-08-glyph-fix"></script>
+<script src="/builders/craft-mode.js?v=2026-10-09-living3"></script>
+<script src="/builders/shell.js?v=2026-10-10-hall-keys1"></script>
 <script src="/builders/palette.js" defer></script>
-<script src="/builders/city-draw.js?v=2026-10-04-pins1"></script>
-<script src="/builders/city.js?v=2026-10-04-pins1"></script>
+<script src="/builders/gov-living.js?v=2026-10-09-positions1"></script>
+<script src="/builders/gov-feeds.js?v=2026-10-09-living3"></script>
+<script src="/builders/city-draw.js?v=2026-10-09-living3"></script>
+<!-- a building's card answers its first ask in place through the deck's own
+     route (task 1004702): the desk rows (street-desk.js over the street's kit)
+     and the deck's card and sender (street-deck.js) -->
+<script src="/builders/street-draw.js?v=2026-10-09-living3"></script>
+<script src="/builders/street-card.js?v=2026-10-04-record1"></script>
+<script src="/builders/street-inside.js?v=2026-10-09-living3"></script>
+<script src="/builders/street-desk.js?v=2026-10-04-record1"></script>
+<script src="/builders/street-deck.js?v=2026-10-13-glass1"></script>
+<script src="/builders/city.js?v=2026-10-13-glass1"></script>
 </body>
 </html>