@bongos/core 1.24.29 → 1.24.31

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

@@ -0,0 +1,102 @@
+/* modules/hall-ui/public/home-city.css — Home's project city (task 1005054; v16, task 1005058).
+   The scene card, the ladder of builders beside it and the time slider under it
+   (home-city.js; record modules/hall-ui/records/home-city.md). Every colour is a
+   hall token or a mix of one; the tower faces are drawing data in
+   home-city-draw.js. One sky for both the city and the ladder, so the two read
+   as one scene. No :root here; motion is CSS and the hall's reduced-motion rule (style.css, `prefers-reduced-motion: reduce`)
+   stops it. */
+
+.home-city { padding: 0; overflow: hidden; background: linear-gradient(var(--bg-card), var(--bg)); }
+.hc-stage { display: flex; align-items: center; gap: 4px; }
+.hc-svg { display: block; flex: 1; min-width: 0; height: auto; }
+.hc-svg .hc-wait__n { font: 700 11px var(--font-display); fill: var(--accent-on); }
+.hc-svg .hc-av__i { font: 600 13px var(--font-display); }
+.hc-svg [data-tip] { cursor: default; }
+.hc-svg a[href] { cursor: pointer; }
+.hc-svg a:focus { outline: none; }
+.hc-svg a:focus-visible .hc-face { filter: brightness(1.35); }
+.hc-svg .hc-tower:hover .hc-face { filter: brightness(1.3); }
+/* the core and the museum stay quiet on the builder's Home so the new buildings lead;
+   each comes back to full colour under the pointer or the keyboard */
+.hc-svg .hc-quiet { opacity: .3; filter: saturate(0) brightness(.85); transition: opacity .3s, filter .3s; }
+.hc-svg .hc-quiet:hover, .hc-svg .hc-quiet:focus-visible { opacity: .95; filter: none; }
+.hc-svg .hc-core:hover .hc-face, .hc-svg .hc-museum:hover .hc-face { filter: brightness(1.15); }
+.hc-svg .hc-sky:hover circle, .hc-svg .hc-sky:focus-visible circle { opacity: 1; }
+
+/* the ideator's sky (task 1005059): night falls over the same city, seen from the street.
+   The sky is the page's own ground tinted toward the sea, deeper at the horizon; the
+   skyline's outlines are hidden until one of the three groups is pointed at or focused,
+   then the whole group lights at once. */
+.home-city.hc-is-sky { background: linear-gradient(color-mix(in srgb, var(--bg) 86%, var(--sea)), color-mix(in srgb, var(--bg-card) 86%, var(--accent))); }
+html[data-theme="dark"] .home-city.hc-is-sky { background: linear-gradient(color-mix(in srgb, var(--bg) 92%, var(--sea)), var(--bg) 40%, color-mix(in srgb, var(--bg) 58%, var(--sea))); }
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) .home-city.hc-is-sky { background: linear-gradient(color-mix(in srgb, var(--bg) 92%, var(--sea)), var(--bg) 40%, color-mix(in srgb, var(--bg) 58%, var(--sea))); }
+}
+.hc-is-sky .hc-time { background: color-mix(in srgb, var(--bg-card) 70%, transparent); }
+.hc-svg .hc-sky__label { font: 500 11px var(--font-display); letter-spacing: .06em; }
+.hc-svg .hc-ol { stroke-opacity: 0; transition: stroke-opacity .25s; }
+.hc-svg:has(.hc-hit[data-group="area"]:hover, .hc-hit[data-group="area"]:focus-visible) .hc-ol-area,
+.hc-svg:has(.hc-hit[data-group="civic"]:hover, .hc-hit[data-group="civic"]:focus-visible) .hc-ol-civic,
+.hc-svg:has(.hc-hit[data-group="museum"]:hover, .hc-hit[data-group="museum"]:focus-visible) .hc-ol-museum { stroke-opacity: .9; }
+
+/* the ladder: a small face and one thin line split by craft */
+.hc-ladder { position: relative; flex: none; width: 230px; margin: 24px 28px 24px 0; }
+.hc-rung { position: absolute; left: 0; right: 0; height: 34px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; transition: top .55s cubic-bezier(.2, .7, .2, 1); }
+.hc-av { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--rule-soft); display: grid; place-items: center; overflow: hidden; font: 600 11px var(--font-display); color: var(--ink-soft); }
+.hc-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.hc-av--agent { background: color-mix(in srgb, var(--sea) 26%, var(--bg-card)); }
+.hc-av svg { width: 15px; height: 15px; }
+.hc-rung--me .hc-av { color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink-soft); }
+.hc-line { display: flex; gap: 3px; align-items: flex-end; height: 22px; transition: width .55s cubic-bezier(.2, .7, .2, 1); }
+.hc-seg { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 26px; color: var(--ink-faint); }
+.hc-seg b { display: flex; align-items: center; gap: 3px; font: 600 10.5px/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.hc-seg .hc-ico { width: 11px; height: 11px; flex: none; opacity: .8; }
+.hc-seg i { display: block; height: 3px; border-radius: 2px; background: var(--rule); }
+.hc-rung--me .hc-seg { color: var(--ink-soft); }
+.hc-rung--me .hc-seg i { background: var(--ink-soft); }
+.hc-seg:hover { color: var(--ink); }
+.hc-seg:hover i { background: var(--ink); }
+
+/* the time slider: live at its right end, a quiet player beside it */
+.hc-time { display: flex; align-items: center; gap: 12px; padding: 18px 24px 16px; background: var(--bg-card); }
+.hc-player { display: flex; gap: 2px; flex: none; }
+.hc-p { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer; display: grid; place-items: center; }
+.hc-p svg { width: 13px; height: 13px; }
+.hc-p:hover { color: var(--ink); background: var(--rule-soft); }
+.hc-p[aria-pressed="true"] { color: var(--ink); }
+.hc-p:disabled { opacity: .3; cursor: default; background: transparent; }
+.hc-p-play .hc-play__off, .hc-p-play.is-playing .hc-play__on { display: none; }
+.hc-p-play.is-playing .hc-play__off { display: block; }
+.hc-p:focus-visible, .hc-slider:focus-visible, .hc-live:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.hc-track { position: relative; flex: 1; min-width: 0; }
+.hc-when { position: absolute; top: -18px; transform: translateX(-50%); font: 600 11px/1 var(--font-display); padding: 3px 8px; border-radius: var(--radius-pill); background: var(--ink); color: var(--bg-card); opacity: 0; transition: opacity .25s; white-space: nowrap; pointer-events: none; }
+.hc-when.is-on { opacity: 1; }
+.hc-live { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; font: 600 11px var(--font-display); color: var(--ink-soft); }
+.hc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
+.hc-live.is-live { color: var(--ink); }
+.hc-live.is-live i { background: var(--ok); animation: hc-live 2.4s ease-out infinite; }
+.hc-slider { width: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; height: 24px; cursor: pointer; }
+.hc-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--rule-soft); }
+.hc-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--rule-soft); }
+.hc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); margin-top: -8px; border: 3px solid var(--bg-card); }
+.hc-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg-card); }
+.hc-ticks { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
+
+.hc-tip { position: fixed; pointer-events: none; z-index: var(--z-modal); background: var(--ink); color: var(--bg-card); font-size: 12px; line-height: 1.35; padding: 8px 11px; border-radius: 9px; max-width: 260px; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); }
+.hc-tip.is-on { opacity: 1; }
+.hc-tip b { display: block; font-size: 13px; }
+
+/* live, and nothing more: a crane's slab climbs, this week's ideas glow (20s+) */
+@keyframes hc-lift { 0%, 12% { transform: translateY(0); } 55%, 70% { transform: translateY(-24px); } 100% { transform: translateY(0); } }
+@keyframes hc-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
+@keyframes hc-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
+.hc-slab { animation: hc-lift 20s ease-in-out infinite; }
+.hc-orb, .hc-twinkle { animation: hc-glow 24s ease-in-out infinite; }
+
+/* a phone: the ladder runs full width under the city */
+@media (max-width: 700px) {
+  .hc-stage { flex-direction: column; align-items: stretch; }
+  .hc-svg { width: 100%; }
+  .hc-ladder { width: auto; margin: 12px 18px 4px; }
+  .hc-time { padding: 6px 16px 16px; }
+}

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

@@ -0,0 +1,339 @@
+// modules/hall-ui/public/home-city.js — Home's project city (task 1005054).
+//
+// The page half of the owner's Home redesign (docs/design/mocks/hall/home/v14.html,
+// record modules/hall-ui/records/home-city.md): the city scene, the ladder of
+// builders beside it, and the time slider under it. It asks the server for ONE
+// bounded weekly summary (GET /home/city) and never a feed it would slice — the
+// rule tests/home_bounded_reads.mjs holds Home to. The drawing is
+// home-city-draw.js (pure); this file owns the read, the DOM, the slider and hover.
+//
+// v16 (task 1005058): the city is the one city of every craft (home-city-draw.js), so
+// this file also hands the drawing the Governor City (window.GovCity, city-draw.js)
+// and turns its district doors into craft switches. The time slider is LIVE at its
+// right end; moving it, or the quiet player under it (rewind, play, fast forward),
+// glides the city through every week in between — the owner asked for a rewind, not
+// a jump. That glide is the one motion here driven from script (a requestAnimationFrame
+// loop that redraws the city at a fractional week); under prefers-reduced-motion it
+// does not run at all and every control jumps straight to where it was going. The
+// ladder's rows and a crane's slab still move in CSS, which the hall's rule stops.
+//
+// The ideator's Home (task 1005059): while the craft is Ideating (OTBCraftMode, its
+// otb:craft event) the same widget draws the sky over the city's skyline
+// (home-city-draw.js skySvg) from the same read, and the ladder ranks the week's
+// ideators — ideas filed, votes cast, ideas that became work. Every other craft keeps
+// the builder's city exactly as it was.
+(function () {
+  'use strict';
+  if (!window.OTB || typeof window.OTB.contributeHallWidget !== 'function') return;
+  const Draw = window.OTBHomeCityDraw;
+  if (!Draw) return;
+  const API = '/api/bongos';
+  const WEEKS = 10;
+  const RUNG = 40;
+  // the player's speeds, in weeks per frame at 60 fps: rewind and fast forward cross the
+  // whole slider in about five and four seconds; play is about a week every 1.6 s
+  const SPEED = { rw: -1 / 34, play: 1 / 96, ff: 1 / 26 };
+  const STILL = () => !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+  const CRAFTS = [
+    ['art', 'artistry', 'Art', 'pages designed'],
+    ['build', 'building', 'Build', 'shipped'],
+    ['idea', 'ideating', 'Ideas', 'ideas'],
+    ['gov', 'governing', 'Govern', 'votes and decisions'],
+  ];
+  // the ideator's line: a lightbulb, a star, and an arrow into the work
+  const IDEATOR = [
+    ['idea', 'ideating', 'Ideas', 'ideas filed'],
+    ['vote', '#vote', 'Votes', 'votes cast'],
+    ['work', '#work', 'Became work', 'ideas became work'],
+  ];
+  const GLYPH = {
+    '#vote': '<path d="M8 2.2l1.7 3.6 3.9.5-2.9 2.7.8 3.9L8 11l-3.5 1.9.8-3.9L2.4 6.3l3.9-.5z"/>',
+    '#work': '<path d="M2.5 2.5l7 7M9.5 9.5l-1 4 5-5-4 1z"/>',
+  };
+  const SKY_LABEL = 'The project\'s ideas as a night sky over the city\'s real skyline, with this week\'s ideators ranked beside it';
+  const CITY_LABEL = 'The project as a city: one tower per working area, as tall as what has shipped there, with the builders of the week beside it';
+
+  let host = null, model = null, viewerId = null, t = 0, target = 0, raf = null, run = null, lastWeek = -1, shown = false, gallery = null;
+  const rungs = new Map();
+
+  function mode() {
+    const t = document.documentElement.dataset.theme;
+    if (t === 'light' || t === 'dark') return t;
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function atLive(v) { return !model || v >= model.W - 1 - 1e-3; }
+  function weekName(i) {
+    if (!model || i === model.W - 1) return 'this week';
+    const w = model.weeks[i];
+    const d = w && w.start ? new Date(w.start + 'T00:00:00Z') : null;
+    return d && !isNaN(d) ? 'week of ' + d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', timeZone: 'UTC' }) : 'that week';
+  }
+
+  // Ideating draws the sky; every other craft (or none) the builder's city.
+  function craft() {
+    const CM = window.OTBCraftMode;
+    const m = CM && typeof CM.current === 'function' ? CM.current() : document.documentElement.dataset.craft;
+    return m === 'ideating' ? 'ideating' : null;
+  }
+
+  function craftIcon(key) {
+    if (GLYPH[key]) return '<svg class="hc-ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + GLYPH[key] + '</svg>';
+    const CM = window.OTBCraftMode;
+    return CM && typeof CM.iconHtml === 'function' ? CM.iconHtml(key, 'hc-ico') : '';
+  }
+
+  // ---- the scene: the drawing's shapes built as SVG nodes (city.js's split),
+  // so every name and title lands as an attribute value or text, never markup ----
+  const NS = 'http://www.w3.org/2000/svg';
+  function build(n) {
+    const e = document.createElementNS(NS, n.tag);
+    Object.keys(n.attrs).forEach((k) => e.setAttribute(k, String(n.attrs[k])));
+    if (n.text != null) e.textContent = n.text;
+    n.kids.forEach((c) => e.appendChild(build(c)));
+    return e;
+  }
+  function drawScene() {
+    const svg = host.querySelector('.hc-svg');
+    const sky = craft() === 'ideating';
+    const draw = sky ? Draw.skySvg : Draw.citySvg;
+    const out = draw(model, atLive(t) ? model.W - 1 : t, { mode: mode(), gov: window.GovCity || null });
+    host.classList.toggle('hc-is-sky', sky);
+    svg.setAttribute('aria-label', sky ? SKY_LABEL : CITY_LABEL);
+    host.querySelector('#home-city-h').textContent = sky ? 'The project\'s ideas this week' : 'The project this week';
+    svg.setAttribute('viewBox', out.viewBox);
+    svg.replaceChildren(...out.nodes.map(build));
+  }
+
+  // ---- the ladder: a small face and one line split by craft, ranked ----
+  function rungFor(row) {
+    let r = rungs.get(row.id);
+    if (r) return r;
+    r = document.createElement('div');
+    r.className = 'hc-rung';
+    const av = document.createElement('span');
+    av.className = 'hc-av' + (row.agent ? ' hc-av--agent' : '');
+    if (row.agent) av.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="8" width="14" height="11" rx="3" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="9.5" cy="13.5" r="1.5" fill="currentColor"/><circle cx="14.5" cy="13.5" r="1.5" fill="currentColor"/><path d="M12 8V5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
+    else {
+      av.textContent = Draw.initial(row.name);
+      if (row.avatar && /^https:\/\//.test(row.avatar)) {
+        const img = document.createElement('img');
+        img.src = row.avatar; img.alt = ''; img.loading = 'lazy';
+        img.addEventListener('error', () => img.remove());
+        av.appendChild(img);
+      }
+    }
+    const line = document.createElement('span');
+    line.className = 'hc-line';
+    r.append(av, line);
+    host.querySelector('.hc-ladder').appendChild(r);
+    rungs.set(row.id, r);
+    return r;
+  }
+
+  function drawLadder() {
+    const week = Math.floor(t + 1e-6);
+    const who = craft();
+    const rows = Draw.ladderFor(model, week, viewerId, who);
+    const kinds = who === 'ideating' ? IDEATOR : CRAFTS;
+    const ladder = host.querySelector('.hc-ladder');
+    ladder.setAttribute('aria-label', who === 'ideating' ? 'This week\'s ideators, ranked by what they did' : 'This week\'s builders, ranked by what they did');
+    ladder.style.height = (Math.max(1, rows.length) * RUNG) + 'px';
+    const top = Math.max(1, ...rows.map((r) => r.total));
+    const room = Math.max(60, ladder.clientWidth - 40);
+    const shown = new Set();
+    rows.forEach((row, n) => {
+      const r = rungFor(row);
+      shown.add(row.id);
+      r.hidden = false;
+      r.classList.toggle('hc-rung--me', row.me);
+      r.style.top = (n * RUNG) + 'px';
+      r.dataset.tip = row.name + (row.me ? ' (you)' : '') + ' · ' + row.total;
+      r.dataset.tipBody = weekName(week);
+      const line = r.querySelector('.hc-line');
+      line.textContent = '';
+      const crafts = kinds.filter((c) => row.v[c[0]] > 0);
+      line.style.width = Math.max(crafts.length * 29, room * row.total / top).toFixed(1) + 'px';
+      crafts.forEach((c) => {
+        const seg = document.createElement('span');
+        seg.className = 'hc-seg';
+        seg.style.flex = row.v[c[0]] + ' 1 0';
+        seg.dataset.tip = row.name + ' · ' + c[2];
+        seg.dataset.tipBody = row.v[c[0]] + ' ' + c[3] + ' ' + weekName(week);
+        const lab = document.createElement('b');
+        lab.innerHTML = craftIcon(c[1]);
+        lab.appendChild(document.createTextNode(String(row.v[c[0]])));
+        seg.append(lab, document.createElement('i'));
+        line.appendChild(seg);
+      });
+    });
+    rungs.forEach((r, id) => { if (!shown.has(id)) r.hidden = true; });
+  }
+
+  // ---- time: live at the right end; the city glides to wherever the slider is sent ----
+  function when(v) {
+    if (atLive(v)) return 'Live';
+    const w0 = model.weeks[0] && model.weeks[0].start ? Date.parse(model.weeks[0].start + 'T00:00:00Z') : NaN;
+    return isNaN(w0) ? weekName(Math.floor(v)) : new Date(w0 + v * 7 * 864e5).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', timeZone: 'UTC' });
+  }
+  function setT(v) {
+    t = Math.max(0, Math.min(model.W - 1, v));
+    const live = atLive(t);
+    const s = host.querySelector('.hc-slider');
+    s.value = String(t);
+    s.setAttribute('aria-valuetext', live ? 'Live' : when(t));
+    const pill = host.querySelector('.hc-when');
+    pill.textContent = when(t);
+    pill.style.left = (t / Math.max(1, model.W - 1) * 100) + '%';
+    pill.classList.toggle('is-on', !live);
+    const l = host.querySelector('.hc-live');
+    l.classList.toggle('is-live', live);
+    l.querySelector('span').textContent = live ? 'Live' : 'Back to live';
+    drawScene();
+    const w = Math.floor(t + 1e-6);
+    if (w !== lastWeek) { lastWeek = w; drawLadder(); }
+    buttons();
+  }
+  function buttons() {
+    const b = (k) => host.querySelector(`.hc-p-${k}`);
+    b('play').classList.toggle('is-playing', run === 'play');
+    b('play').setAttribute('aria-label', run === 'play' ? 'Pause' : atLive(t) ? 'Play from the start' : 'Play');
+    ['rw', 'play', 'ff'].forEach((k) => b(k).setAttribute('aria-pressed', String(run === k)));
+    b('rw').disabled = t <= 1e-3 && run !== 'rw';
+    b('ff').disabled = atLive(t) && run !== 'ff';
+  }
+  function halt() { if (raf) cancelAnimationFrame(raf); raf = null; run = null; target = t; if (host) buttons(); }
+  function tick() {
+    raf = requestAnimationFrame(() => {
+      let v;
+      if (run) { v = t + SPEED[run]; if (v <= 0 || v >= model.W - 1) { v = Math.max(0, Math.min(model.W - 1, v)); run = null; } target = v; }
+      else { v = t + (target - t) * 0.16; if (Math.abs(target - v) < 0.004) v = target; }
+      setT(v);
+      if (run || v !== target) tick(); else { raf = null; buttons(); }
+    });
+  }
+  function glideTo(v) {
+    run = null; target = Math.max(0, Math.min(model.W - 1, v));
+    if (STILL()) { const v = target; halt(); setT(v); return; }
+    if (!raf) tick();
+  }
+  function press(k) {
+    if (run === k) { halt(); return; }
+    if (k === 'play' && atLive(t)) setT(0);
+    if (STILL()) { halt(); setT(k === 'rw' ? 0 : model.W - 1); return; }
+    run = k; buttons();
+    if (!raf) tick();
+  }
+
+  // ---- the doors: the museum and the stars switch the craft (the craft's own Home); the
+  // core is a plain link to the street and a building a plain link to its goal ----
+  function wireDoors() {
+    host.addEventListener('click', (e) => {
+      const d = e.target.closest('[data-craft-door]');
+      if (!d || !host.contains(d)) return;
+      const CM = window.OTBCraftMode;
+      if (!CM || typeof CM.choose !== 'function') return;
+      e.preventDefault();
+      CM.choose(d.getAttribute('data-craft-door'));
+      window.scrollTo(0, 0);
+    });
+  }
+
+  // ---- one tooltip for the whole widget; labels are ledger data, so text only ----
+  function wireTip() {
+    let tip = document.getElementById('hc-tip');
+    if (!tip) { tip = document.createElement('div'); tip.id = 'hc-tip'; tip.className = 'hc-tip'; tip.setAttribute('role', 'tooltip'); document.body.appendChild(tip); }
+    host.addEventListener('pointerover', (e) => {
+      const n = e.target.closest('[data-tip]');
+      if (!n || !host.contains(n)) return;
+      const r = n.getBoundingClientRect();
+      tip.textContent = '';
+      const b = document.createElement('b'); b.textContent = n.dataset.tip; tip.appendChild(b);
+      if (n.dataset.tipBody) tip.appendChild(document.createTextNode(n.dataset.tipBody));
+      tip.style.left = (r.left + r.width / 2) + 'px';
+      tip.style.top = r.top + 'px';
+      tip.classList.add('is-on');
+    });
+    host.addEventListener('pointerout', (e) => { if (e.target.closest('[data-tip]')) tip.classList.remove('is-on'); });
+  }
+
+  function ticks() {
+    const tk = host.querySelector('.hc-ticks');
+    const first = model.weeks[0] && model.weeks[0].start ? new Date(model.weeks[0].start + 'T00:00:00Z') : null;
+    const mid = model.weeks[Math.floor(model.W / 2)] && model.weeks[Math.floor(model.W / 2)].start ? new Date(model.weeks[Math.floor(model.W / 2)].start + 'T00:00:00Z') : null;
+    const mon = (d) => (d && !isNaN(d) ? d.toLocaleDateString('en-GB', { month: 'short', timeZone: 'UTC' }) : '');
+    const live = host.querySelector('.hc-live');
+    tk.textContent = '';
+    [mon(first), mon(mid)].forEach((s) => { const sp = document.createElement('span'); sp.textContent = s; tk.appendChild(sp); });
+    tk.appendChild(live);
+  }
+
+  async function load() {
+    const api = window.BongosClient && window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+    if (!api) return;
+    let res;
+    try { res = await api.request('GET', `${API}/home/city?weeks=${WEEKS}`); } catch (_) { return; }
+    if (!res || !res.ok || !res.data) return; // signed out, gated or failed: Home keeps its other cards, never an empty plate
+    model = Draw.cityModel(res.data);
+    viewerId = res.data.viewer && res.data.viewer.id != null ? String(res.data.viewer.id) : null;
+    if (!model.W || !model.areas.length) return;
+    const s = host.querySelector('.hc-slider');
+    s.max = String(model.W - 1);
+    ticks();
+    shown = true;
+    craftHome();
+    target = model.W - 1;
+    setT(model.W - 1);
+  }
+
+  // ---- the artist's Home (task 1005060): in Artistry the same section is the gallery,
+  // home-gallery.js, the bench in the museum the city's art district opens onto ----
+  function craftHome() {
+    const art = !!gallery && document.documentElement.dataset.craft === 'artistry';
+    host.classList.toggle('hc--gallery', art);
+    if (gallery) gallery.show(art);
+    host.hidden = !(art || shown);
+  }
+
+  function mount(hostEl) {
+    host = hostEl;
+    host.innerHTML =
+      '<h2 id="home-city-h" class="sr-only">The project this week</h2>' +
+      '<div class="hc-stage">' +
+        '<svg class="hc-svg" role="img"></svg>' +
+        '<div class="hc-ladder" aria-label="This week\'s builders, ranked by what they did"></div>' +
+      '</div>' +
+      '<div class="hc-time">' +
+        '<div class="hc-player" role="group" aria-label="Time">' +
+          '<button type="button" class="hc-p hc-p-rw" aria-label="Rewind"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5v9L2.5 8zM14 3.5v9L8.5 8z" fill="currentColor"/></svg></button>' +
+          '<button type="button" class="hc-p hc-p-play" aria-label="Play">' +
+            '<svg class="hc-play__on" viewBox="0 0 16 16" aria-hidden="true"><path d="M4.5 3v10l8-5z" fill="currentColor"/></svg>' +
+            '<svg class="hc-play__off" viewBox="0 0 16 16" aria-hidden="true"><path d="M4.5 3h2.4v10H4.5zM9.1 3h2.4v10H9.1z" fill="currentColor"/></svg>' +
+          '</button>' +
+          '<button type="button" class="hc-p hc-p-ff" aria-label="Fast forward"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2 3.5v9L7.5 8zM8 3.5v9L13.5 8z" fill="currentColor"/></svg></button>' +
+        '</div>' +
+        '<div class="hc-track"><div class="hc-when" aria-hidden="true"></div>' +
+          '<input type="range" class="hc-slider" min="0" max="0" step="any" value="0" aria-label="Time, from the start of the version to live">' +
+          '<div class="hc-ticks"></div>' +
+          '<button type="button" class="hc-live is-live"><i aria-hidden="true"></i><span>Live</span></button>' +
+        '</div>' +
+      '</div>';
+    host.querySelector('.hc-slider').addEventListener('input', (e) => { if (model) glideTo(Number(e.target.value)); });
+    ['rw', 'play', 'ff'].forEach((k) => host.querySelector(`.hc-p-${k}`).addEventListener('click', () => { if (model) press(k); }));
+    host.querySelector('.hc-live').addEventListener('click', () => { if (model) glideTo(model.W - 1); });
+    wireTip();
+    wireDoors();
+    if (window.OTBHomeGallery) gallery = window.OTBHomeGallery.attach(host);
+    document.addEventListener('otb:craft', craftHome);
+    craftHome();
+    new MutationObserver(() => { if (model) drawScene(); }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    document.addEventListener('otb:craft', () => { if (model) { drawScene(); drawLadder(); } });
+    window.addEventListener('resize', () => { if (model) drawLadder(); });
+    load();
+  }
+
+  window.OTB.contributeHallWidget({
+    id: 'home-city', label: 'The project', order: 15, core: true, mount,
+    view: 'home', zone: 'home-stats', sectionClass: 'scroll home-city', labelledby: 'home-city-h', hiddenByDefault: true,
+  });
+})();

package/modules/hall-ui/public/home-gallery.css

@@ -0,0 +1,129 @@
+/* modules/hall-ui/public/home-gallery.css — the artist's Home: a bench in the museum
+   (task 1005060; mock docs/design/mocks/hall/home/v16-artistry.html, record
+   modules/hall-ui/records/home-city.md § "The gallery"). A quiet wall, a floor and a
+   bench barely there, and the art the largest thing in the room in a thin frame.
+   Every colour is a hall token or a mix of one; the only literal is black with alpha,
+   as a shadow. The tokens carry both modes, so no rule here is written per mode.
+   No :root; motion is CSS and the hall's reduced-motion rule stops it. */
+
+/* home-city.js shows the gallery in Artistry and the city otherwise */
+.home-city.hc--gallery > :not(.hg) { display: none; }
+.home-city:not(.hc--gallery) > .hg { display: none; }
+
+.hg-room {
+  --hg-wall: color-mix(in srgb, var(--bg-card) 94%, var(--accent));
+  --hg-wall-low: color-mix(in srgb, var(--bg) 90%, var(--accent-deep));
+  --hg-floor: color-mix(in srgb, var(--bg-deep) 86%, var(--accent-deep));
+  --hg-spot: color-mix(in srgb, var(--accent) 14%, transparent);
+  --hg-frame: rgba(0, 0, 0, .82);
+  --hg-shadow: rgba(0, 0, 0, .45);
+  position: relative; height: 760px; overflow: hidden; user-select: none; touch-action: pan-y; outline: none;
+  color: var(--ink);
+  background: linear-gradient(var(--hg-wall), var(--hg-wall-low) 88%, transparent 88%), var(--hg-floor);
+}
+.hg-room:focus-visible { box-shadow: inset 0 0 0 2px var(--focus, var(--accent)); }
+.hg-room::before { content: ""; position: absolute; inset: 0 0 12% 0; background: radial-gradient(ellipse 40% 64% at 46% 44%, var(--hg-spot), transparent 70%); pointer-events: none; }
+/* the skirting board and the floorboards */
+.hg-room::after { content: ""; position: absolute; left: 0; right: 0; top: 88%; bottom: 0; border-top: 2px solid color-mix(in srgb, var(--hg-wall-low) 82%, var(--ink)); background: repeating-linear-gradient(90deg, transparent 0 160px, color-mix(in srgb, var(--ink) 5%, transparent) 160px 161px); pointer-events: none; }
+.hg-bench { position: absolute; left: 50%; bottom: -30px; width: 46%; height: 44px; transform: translateX(-50%); border-radius: 14px 14px 0 0; background: linear-gradient(color-mix(in srgb, var(--ink) 70%, var(--accent-deep)), var(--ink)); opacity: .22; filter: blur(1.2px); z-index: 3; pointer-events: none; }
+
+/* the wall title, in vinyl lettering */
+.hg-vinyl { position: absolute; left: 44px; top: 34px; z-index: 4; }
+.hg-h { margin: 0; font: 300 30px/1.2 var(--font-display); letter-spacing: .01em; color: var(--ink); }
+.hg-sub { margin: 6px 0 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
+.hg-sort { display: flex; gap: 18px; margin-top: 16px; }
+.hg-sort button, .hg-way { all: unset; cursor: pointer; box-sizing: border-box; min-height: 24px; min-width: 24px; display: inline-flex; align-items: center; color: var(--ink-soft); }
+.hg-sort button { font-size: 12.5px; letter-spacing: .04em; border-bottom: 1px solid transparent; }
+.hg-sort button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
+.hg-ways { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 22px; }
+.hg-way { font-size: 13px; letter-spacing: .01em; text-decoration: none; gap: 6px; }
+.hg-way:hover, .hg-way[aria-pressed="true"] { color: var(--ink); }
+.hg-sort button:focus-visible, .hg-way:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
+
+/* the wall, one work at a time along it */
+.hg-wall { position: absolute; inset: 0 0 12% 0; overflow: hidden; }
+.hg-track { position: absolute; inset: 0; display: flex; transition: transform .7s cubic-bezier(.22, .7, .2, 1); }
+.hg-track.is-drag { transition: none; }
+.hg-hang { flex: 0 0 100%; position: relative; }
+.hg-work { position: absolute; left: 49%; top: 188px; transform: translateX(-50%); width: min(700px, 56%); transition: opacity .3s; }
+.hg-canvas { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-deep); border: 3px solid var(--hg-frame); box-shadow: 0 18px 34px -20px var(--hg-shadow); }
+.hg-canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; -webkit-user-drag: none; }
+
+/* the wall label: small, at the work's foot to its right; click to read it closer */
+.hg-label { position: absolute; left: calc(100% + 28px); bottom: 0; width: 158px; font-size: 10px; line-height: 1.4; color: var(--ink); }
+.hg-text { display: block; cursor: zoom-in; transform-origin: 100% 100%; transition: transform .35s cubic-bezier(.2, .7, .2, 1); border-radius: 4px; outline-offset: 6px; }
+.hg-text:focus-visible { outline: 2px solid var(--focus, var(--accent)); }
+.hg-who { display: block; font-weight: 700; font-size: 10.5px; }
+.hg-bio { display: block; margin-bottom: 6px; color: var(--ink-soft); }
+.hg-title { display: block; }
+.hg-medium, .hg-place { display: block; color: var(--ink-soft); }
+.hg-words, .hg-credit { display: none; margin: 8px 0 0; }
+.hg-credit { color: var(--ink-soft); }
+.hg-hang.is-reading .hg-text { transform: scale(1.85); cursor: zoom-out; }
+.hg-hang.is-reading .hg-words, .hg-hang.is-reading .hg-credit { display: block; }
+.hg-hang.is-reading .hg-work > .hg-canvas { opacity: .4; }
+/* the signature, in the artist's hand, on the wall below the label; the heart never changes size */
+.hg-sigline { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
+.hg-sig { font: 500 17px/1 "Caveat", "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive; color: var(--ink); opacity: .82; transform: rotate(-2deg); white-space: nowrap; }
+.hg-heart { all: unset; cursor: pointer; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); }
+.hg-heart svg { width: 15px; height: 15px; }
+.hg-heart:hover { color: var(--ink); }
+.hg-heart[aria-pressed="true"] { color: var(--accent-deep); }
+.hg-heart[aria-pressed="true"] path { fill: currentColor; }
+.hg-heart:focus-visible { outline: 2px solid var(--focus, var(--accent)); }
+
+/* moving along the wall */
+.hg-edge { all: unset; position: absolute; top: 0; bottom: 12%; width: 9%; min-width: 44px; z-index: 4; cursor: pointer; display: grid; place-items: center; color: var(--ink-soft); opacity: .55; transition: opacity .2s; }
+.hg-edge:hover, .hg-edge:focus-visible { opacity: 1; }
+.hg-edge:focus-visible svg { outline: 2px solid var(--focus, var(--accent)); outline-offset: 6px; border-radius: 50%; }
+.hg-edge svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
+.hg-prev { left: 0; } .hg-next { right: 0; }
+.hg-edge[disabled] { opacity: 0; pointer-events: none; }
+.hg-count { position: absolute; left: 49%; top: calc(88% - 30px); transform: translateX(-50%); z-index: 4; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
+.hg-empty { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(440px, 80%); margin: 0; text-align: center; font-size: 14px; color: var(--ink-soft); }
+.hg-room.is-empty .hg-edge, .hg-room.is-empty .hg-fsbtn { display: none; }
+
+/* full screen: only the art, its caption, the signature and the heart */
+.hg-fsbtn { all: unset; position: absolute; right: 16px; top: 16px; z-index: 5; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); cursor: pointer; opacity: .6; }
+.hg-fsbtn:hover, .hg-fsbtn:focus-visible { opacity: 1; }
+.hg-fsbtn:focus-visible { outline: 2px solid var(--focus, var(--accent)); }
+.hg-fsbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
+.hg-cap { display: none; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 12px; color: var(--ink-soft); white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
+.hg-room:fullscreen, .hg-room.is-fs { --hg-spot: transparent; background: var(--hg-wall-low); }
+.hg-room.is-fs { position: fixed; inset: 0; height: auto; z-index: 1000; }
+.hg-room:fullscreen::after, .hg-room.is-fs::after, .hg-room:fullscreen .hg-bench, .hg-room.is-fs .hg-bench,
+.hg-room:fullscreen .hg-vinyl, .hg-room.is-fs .hg-vinyl, .hg-room:fullscreen .hg-count, .hg-room.is-fs .hg-count { display: none; }
+.hg-room:fullscreen .hg-wall, .hg-room.is-fs .hg-wall, .hg-room:fullscreen .hg-edge, .hg-room.is-fs .hg-edge { bottom: 0; }
+.hg-room:fullscreen .hg-work, .hg-room.is-fs .hg-work { left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 22px)); width: min(86vw, calc((100vh - 130px) * 1.6)); }
+.hg-room:fullscreen .hg-canvas, .hg-room.is-fs .hg-canvas { border: 0; box-shadow: none; opacity: 1; }
+.hg-room:fullscreen .hg-label, .hg-room.is-fs .hg-label { position: absolute; left: auto; right: 0; top: calc(100% + 10px); bottom: auto; width: auto; margin: 0; }
+.hg-room:fullscreen .hg-text, .hg-room.is-fs .hg-text { display: none; }
+.hg-room:fullscreen .hg-cap, .hg-room.is-fs .hg-cap { display: block; }
+
+/* the full gallery: every work on the wall at once, hung salon-style */
+.hg-salon { position: absolute; left: 44px; right: 44px; top: 210px; bottom: calc(12% + 20px); overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 34px 30px; align-content: start; padding: 4px; z-index: 4; }
+.hg-salon[hidden] { display: none; }
+.hg-room.is-all .hg-wall, .hg-room.is-all .hg-edge, .hg-room.is-all .hg-count, .hg-room.is-all .hg-fsbtn { display: none; }
+.hg-piece { all: unset; cursor: pointer; display: block; width: 100%; }
+.hg-pc { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-deep); border: 2px solid var(--hg-frame); box-shadow: 0 12px 22px -16px var(--hg-shadow); transition: transform .25s; }
+.hg-pc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
+.hg-piece:hover .hg-pc, .hg-piece:focus-visible .hg-pc { transform: translateY(-3px); }
+.hg-piece:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 6px; }
+.hg-pt { display: block; margin-top: 9px; font-size: 10.5px; color: var(--ink); }
+.hg-pl { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 10px; color: var(--ink-soft); }
+.hg-pl svg { width: 11px; height: 11px; }
+
+@media (max-width: 860px) {
+  .hg-room { height: 660px; }
+  .hg-vinyl { left: 20px; right: 20px; top: 20px; }
+  .hg-h { font-size: 24px; }
+  .hg-work { top: 196px; left: 50%; width: 86%; }
+  .hg-label { position: static; width: auto; margin-top: 14px; }
+  /* a phone has no room to scale the label: read closer, it opens over the dimmed picture */
+  .hg-hang.is-reading .hg-text { transform: none; }
+  .hg-hang.is-reading .hg-label { position: absolute; left: 0; right: 0; top: 0; margin: 0; font-size: 12px; }
+  .hg-hang.is-reading .hg-who { font-size: 12.5px; }
+  .hg-hang.is-reading .hg-work > .hg-canvas { opacity: 0; }
+  .hg-count { left: 50%; }
+  .hg-salon { left: 20px; right: 20px; top: 196px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 16px; }
+}