@bongos/core 1.24.30 → 1.24.31

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

@@ -1,4 +1,4 @@
-/* modules/hall-ui/public/home-city.css — Home's project city (task 1005054).
+/* 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
@@ -12,7 +12,32 @@
 .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; }
@@ -32,20 +57,30 @@
 .hc-seg:hover { color: var(--ink); }
 .hc-seg:hover i { background: var(--ink); }
 
-/* the time slider */
-.hc-time { display: flex; align-items: center; gap: 16px; padding: 6px 24px 18px; background: var(--bg-card); }
-.hc-play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
-.hc-play svg { width: 16px; height: 16px; }
-.hc-play .hc-play__off, .hc-play.is-playing .hc-play__on { display: none; }
-.hc-play.is-playing .hc-play__off { display: block; }
-.hc-play:focus-visible, .hc-slider:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
-.hc-track { flex: 1; min-width: 0; }
+/* 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; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
+.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; }
@@ -54,8 +89,9 @@
 /* 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 { animation: hc-glow 24s 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) {

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

@@ -7,9 +7,21 @@
 // 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.
 //
-// Motion stays CSS: play steps the slider a week at a time on a timer (state, not
-// animation); the ladder's rows slide and a crane's slab lifts in CSS, which the
-// hall's reduced-motion rule stops.
+// 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;
@@ -17,16 +29,31 @@
   if (!Draw) return;
   const API = '/api/bongos';
   const WEEKS = 10;
-  const STEP_MS = 800;
   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, week = 0, timer = null;
+  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() {
@@ -35,6 +62,7 @@
     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];
@@ -42,7 +70,15 @@
     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') : '';
   }
@@ -59,7 +95,12 @@
   }
   function drawScene() {
     const svg = host.querySelector('.hc-svg');
-    const out = Draw.citySvg(model, week, { mode: mode() });
+    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));
   }
@@ -91,8 +132,12 @@
   }
 
   function drawLadder() {
-    const rows = Draw.ladderFor(model, week, viewerId);
+    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);
@@ -107,7 +152,7 @@
       r.dataset.tipBody = weekName(week);
       const line = r.querySelector('.hc-line');
       line.textContent = '';
-      const crafts = CRAFTS.filter((c) => row.v[c[0]] > 0);
+      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');
@@ -125,29 +170,73 @@
     rungs.forEach((r, id) => { if (!shown.has(id)) r.hidden = true; });
   }
 
-  function setWeek(i) {
-    week = Math.max(0, Math.min(model.W - 1, i));
+  // ---- 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(week);
-    s.setAttribute('aria-valuetext', weekName(week));
+    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();
-    drawLadder();
+    const w = Math.floor(t + 1e-6);
+    if (w !== lastWeek) { lastWeek = w; drawLadder(); }
+    buttons();
   }
-
-  // ---- play: a week at a time, then stop on now ----
-  function stop() {
-    if (timer) clearTimeout(timer);
-    timer = null;
-    const b = host && host.querySelector('.hc-play');
-    if (b) { b.classList.remove('is-playing'); b.setAttribute('aria-label', 'Play the weeks from the start'); }
+  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 play() {
-    if (timer) { stop(); return; }
-    const b = host.querySelector('.hc-play');
-    b.classList.add('is-playing'); b.setAttribute('aria-label', 'Pause');
-    let i = 0;
-    const step = () => { setWeek(i); if (i++ < model.W - 1) timer = setTimeout(step, STEP_MS); else stop(); };
-    step();
+  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 ----
@@ -169,12 +258,14 @@
   }
 
   function ticks() {
-    const t = host.querySelector('.hc-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' }) : '');
-    t.innerHTML = '';
-    [mon(first), mon(mid), 'Now'].forEach((s) => { const sp = document.createElement('span'); sp.textContent = s; t.appendChild(sp); });
+    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() {
@@ -189,8 +280,19 @@
     const s = host.querySelector('.hc-slider');
     s.max = String(model.W - 1);
     ticks();
-    host.hidden = false;
-    setWeek(model.W - 1);
+    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) {
@@ -198,20 +300,34 @@
     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" aria-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"></svg>' +
+        '<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">' +
-        '<button type="button" class="hc-play" aria-label="Play the weeks from the start">' +
-          '<svg class="hc-play__on" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2.5v11l9-5.5z" fill="currentColor"/></svg>' +
-          '<svg class="hc-play__off" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 3h3v10H4zM9 3h3v10H9z" fill="currentColor"/></svg>' +
-        '</button>' +
-        '<div class="hc-track"><input type="range" class="hc-slider" min="0" max="0" step="1" value="0" aria-label="Week"><div class="hc-ticks"></div></div>' +
+        '<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) => { stop(); setWeek(Number(e.target.value)); });
-    host.querySelector('.hc-play').addEventListener('click', play);
+    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();
   }

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; }
+}