@bongos/core 1.25.27 → 1.25.28

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

@@ -178,13 +178,110 @@
         return { label: String(a.label), key: a.key ? String(a.key).toLowerCase() : '', bind: !!a.bind, lead: !!a.lead, run: a.run };
       }),
       keys: (Array.isArray(s.keys) ? s.keys : []).filter(function (k) { return k && k.label && k.key; }),
+      aim: !!s.aim,
     };
+    if (!scene.aim) aimAt(null);
     // Arriving at a place shows the whole glass for a moment; a scene that only registers
     // again (a toggle's row changed) does not.
     if (scene.name !== arrived) { arrived = scene.name; wake(ARRIVE_FOR); }
     render();
   }
 
+  // ---------- the sight is the cursor (task 1005305) ----------
+  // A scene that asks for it (`aim: true`: Home's city) has the sight follow the mouse, and the
+  // arrow is not drawn over the scene (visor.css html.visor-aim): the cursor IS the crosshair.
+  // Over anything that is not the scene (the glass's own controls, a window, a dialog, a field)
+  // the arrow is back and the sight steps aside. Before the mouse first moves, on touch, and
+  // when the mouse leaves the view, the sight rests at the centre as it always did.
+  var NOT_SCENE = '#visor, dialog, [aria-modal="true"], .opt-window, .game-menu, .hall-scrim, .toast, input, textarea, select, [contenteditable]';
+  function aimAt(e) {
+    var html = document.documentElement;
+    if (!html.classList) return;
+    var on = !!(e && scene && scene.aim && shown() && html.dataset.game === 'on');
+    var ui = on && !!(e.target && e.target.closest && e.target.closest(NOT_SCENE));
+    html.classList.toggle('visor-aim', on && !ui);
+    if (!root) return;
+    if (!on) { root.removeAttribute('data-aim'); root.style.removeProperty('--sight-x'); root.style.removeProperty('--sight-y'); return; }
+    root.setAttribute('data-aim', ui ? 'ui' : 'scene');
+    root.style.setProperty('--sight-x', e.clientX + 'px');
+    root.style.setProperty('--sight-y', e.clientY + 'px');
+  }
+  function onAimMove(e) { if (scene && scene.aim && (!e.pointerType || e.pointerType === 'mouse')) aimAt(e); }
+
+  // ---------- the scene's time (task 1005305) ----------
+  // A scene with a past (Home's city) hands the visor where it is in time: the strip under the
+  // top arc becomes a slider you drag, and while you are back in time the glass shows the date,
+  // play or pause, the speed and Back to live. { value 0…1, live, label, playing, speed, seek(f),
+  // play(), faster(), toLive() }, or null to take it away. The scene calls it on every change,
+  // so it paints in place and only re-renders the glass when a timeline comes or goes.
+  var timeline = null, scrubbing = false;
+  var ARC_X0 = 0.076, ARC_W = 0.848; // where the top arc starts and how wide it runs, of its box
+  function setTimeline(tl) {
+    var had = !!timeline;
+    timeline = tl && typeof tl.seek === 'function' ? tl : null;
+    if (!timeline) scrubbing = false;
+    if (had !== !!timeline || (timeline && root && !timeParts())) render();
+    else paintTimeline();
+    if (inPast()) wake(); // back in time, the date and the player stay on the glass
+  }
+  // The glass's time parts, found once per render (render drops them), not on every frame of a glide.
+  var tparts = null;
+  function timeParts() {
+    if (tparts && tparts.scrub.isConnected) return tparts;
+    var q = function (s) { return root.querySelector(s); };
+    var scrub = q('[data-visor-scrub]');
+    tparts = scrub ? { scrub: scrub, box: q('[data-visor-progress]'), words: q('[data-visor-progress-now]'), when: q('[data-visor-when]'), time: q('[data-visor-time]'), play: q('[data-visor-play]'), speed: q('[data-visor-speed]') } : null;
+    return tparts;
+  }
+  function paintTimeline() {
+    if (!timeline || !root) return;
+    var P = timeParts();
+    if (!P) return;
+    var scrub = P.scrub;
+    var pct = Math.max(0, Math.min(1, Number(timeline.value) || 0)) * 100, back = !timeline.live || !!timeline.playing;
+    var f = pct / 100;
+    scrub.style.setProperty('--scrub-x', (ARC_X0 + f * ARC_W) * 100 + '%');
+    scrub.style.setProperty('--scrub-y', Math.pow(1 - 2 * f, 2) * 100 + '%');
+    scrub.setAttribute('aria-valuenow', String(Math.round(pct)));
+    scrub.setAttribute('aria-valuetext', String(timeline.label || ''));
+    var box = P.box, words = P.words, when = P.when, time = P.time;
+    if (box) box.classList.toggle('visor__progress--back', back);
+    if (words) words.hidden = back;
+    if (when) { when.hidden = !back; when.textContent = String(timeline.label || ''); }
+    if (time) time.hidden = !back;
+    var play = P.play, speed = P.speed;
+    if (play) { play.setAttribute('aria-label', timeline.playing ? 'Pause' : 'Play'); play.classList.toggle('is-playing', !!timeline.playing); }
+    if (speed) { speed.textContent = String(timeline.speed || ''); speed.setAttribute('aria-label', 'Speed, ' + String(timeline.speed || '')); }
+  }
+  function seekTo(clientX) {
+    var P = timeline && root ? timeParts() : null;
+    if (!P) return;
+    var r = P.scrub.getBoundingClientRect();
+    if (r.width > 0) timeline.seek(Math.max(0, Math.min(1, ((clientX - r.left) / r.width - ARC_X0) / ARC_W)));
+  }
+  function onScrubDown(e) {
+    if (!timeline || e.button !== 0 || !e.target.closest || !e.target.closest('[data-visor-scrub]')) return;
+    e.preventDefault();
+    scrubbing = true;
+    wake();
+    seekTo(e.clientX);
+  }
+  function onScrubMove(e) { if (scrubbing) seekTo(e.clientX); }
+  function onScrubUp() { scrubbing = false; }
+  // On the strip, the arrows step through time (and are spent there, so the city does not move).
+  function onScrubKey(e) {
+    if (!timeline || !e.target.closest || !e.target.closest('[data-visor-scrub]')) return;
+    var v = Number(timeline.value) || 0, to = null;
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') to = v - 0.02;
+    else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') to = v + 0.02;
+    else if (e.key === 'Home') to = 0;
+    else if (e.key === 'End') to = 1;
+    if (to == null) return;
+    e.preventDefault();
+    e.stopPropagation();
+    timeline.seek(Math.max(0, Math.min(1, to)));
+  }
+
   // ---------- resting and waking (task 1005266, owner 2026-11-13) ----------
   // The glass took a third of a laptop's height, so while you look, pan and scroll it RESTS:
   // only the arcs, the sight and your picture stay (visor.css .visor--rest). It WAKES when you
@@ -194,7 +291,7 @@
   // pointer is still there and while the keyboard is on it; it rests the moment you press or
   // wheel on the scene, and after a few idle seconds. Only on a desk with a pointer: a touch
   // screen has nothing to reach with, so a phone or tablet keeps the whole glass.
-  var REST_AFTER = 3000, ARRIVE_FOR = 4000, REACH = 160;
+  var REST_AFTER = 3000, ARRIVE_FOR = 4000, REACH = 160, REACH_TOP = 110;
   var awake = true, reaching = false, restTimer = null, arrived = null, until = 0;
   // The two questions are asked of the browser once; each list keeps its own answer current,
   // so the pointer's every move reads two booleans and builds nothing.
@@ -207,7 +304,8 @@
   function keyboardOn() { return !!(root && document.activeElement && root.contains(document.activeElement)); }
   // A window the glass opened (the options, your profile, the game menu; task 1005253) holds it too.
   function windowUp() { var c = document.documentElement.classList; return !!(c && (c.contains('opt-window-open') || c.contains('game-menu-open'))); }
-  function held() { return !!sheet || !!focus || reaching || keyboardOn() || windowUp(); }
+  function inPast() { return scrubbing || !!(timeline && (!timeline.live || timeline.playing)); } // task 1005305
+  function held() { return !!sheet || !!focus || reaching || keyboardOn() || windowUp() || inPast(); }
   function resting() { return !awake && canRest(); }
   function paintRest() { if (root && root.classList) root.classList.toggle('visor--rest', resting()); }
   // Waking only moves the hour it may rest at; one clock is ever running, so a pointer
@@ -254,7 +352,7 @@
   function onRoot(e) { return !!(root && e.target && e.target.nodeType === 1 && root.contains(e.target)); }
   function onPointerMove(e) {
     if (!shown() || e.buttons || e.pointerType === 'touch') return; // a drag is looking, not reaching
-    reaching = onRoot(e) || e.clientY >= window.innerHeight - REACH;
+    reaching = onRoot(e) || e.clientY >= window.innerHeight - REACH || (!!timeline && e.clientY <= REACH_TOP);
     if (reaching) wake();
   }
   function onPointerDown(e) { if (!shown()) return; if (onRoot(e)) wake(); else rest(); }
@@ -417,6 +515,7 @@
     var sprite = C && typeof C.portraitSrc === 'function' ? C.portraitSrc(id) : (C && typeof C.spriteSrc === 'function' ? C.spriteSrc(id) : '');
     var n = credits();
     return frameSvg() +
+      scrubHtml() + // before the top line, so the line's buttons stand over the drag band
       '<div class="visor__top">' + (scene.place ? '<p class="visor__place">' + esc(scene.place) + '</p>' : '') + progressHtml() + '</div>' +
       focusHtml() +
       '<div class="visor__foot">' +
@@ -452,13 +551,30 @@
       '<span class="visor__card-open">Open your profile</span></span>';
   }
   // The version's reading in words, beside the place; the four segments are the top arc
-  // (arcSegs, task 1005266), so the bars are never the only reading.
+  // (arcSegs, task 1005266), so the bars are never the only reading. With a scene's time
+  // (task 1005305) the date and the player stand beside it while you are back in time.
   function progressHtml() {
-    if (!progress) return '';
-    var said = progress.id + (progress.name ? ', ' + progress.name : '') + ': ' + progress.pct + '% built';
-    return '<div class="visor__progress" data-visor-progress title="' + esc(said) + '">' +
-      '<p class="visor__progress-words"><span class="sr-only">' + esc(said) + '</span>' +
-      '<span aria-hidden="true">' + esc(progress.id) + ' · ' + progress.pct + '%</span></p></div>';
+    if (!progress && !timeline) return '';
+    var said = progress ? progress.id + (progress.name ? ', ' + progress.name : '') + ': ' + progress.pct + '% built' : '';
+    var words = progress ? '<p class="visor__progress-words" data-visor-progress-now><span class="sr-only">' + esc(said) + '</span>' +
+      '<span aria-hidden="true">' + esc(progress.id) + ' · ' + progress.pct + '%</span></p>' : '';
+    if (!timeline) return '<div class="visor__progress" data-visor-progress title="' + esc(said) + '">' + words + '</div>';
+    return '<div class="visor__progress visor__progress--time" data-visor-progress>' + words +
+      '<p class="visor__progress-words visor__when" data-visor-when hidden></p>' +
+      '<div class="visor__time" data-visor-time role="group" aria-label="Time" hidden>' +
+        '<button class="visor__tbtn visor__tbtn--play" type="button" data-visor-play aria-label="Play">' +
+          '<svg class="visor__tplay" viewBox="0 0 16 16" aria-hidden="true"><path d="M4.5 3v10l8-5z"/></svg>' +
+          '<svg class="visor__tpause" viewBox="0 0 16 16" aria-hidden="true"><path d="M4.5 3h2.4v10H4.5zM9.1 3h2.4v10H9.1z"/></svg></button>' +
+        '<button class="visor__tbtn" type="button" data-visor-speed></button>' +
+        '<button class="visor__tbtn" type="button" data-visor-live>Back to live</button>' +
+      '</div></div>';
+  }
+  // The top arc is the slider (task 1005305): a band over it takes the drag, and a mark rides
+  // the curve where you are in time. Same box as the arc's own svg, so the two always line up.
+  function scrubHtml() {
+    if (!timeline) return '';
+    return '<div class="visor__frame visor__frame--top visor__scrub" data-visor-scrub role="slider" tabindex="0" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" ' +
+      'aria-label="Time: drag along the top arc to go back through the weeks" title="Drag to go back in time"><i class="visor__scrub-at" aria-hidden="true"></i></div>';
   }
   // Options lives only in here (the owner, 2026-11-12), on a key of its own: Escape is Close.
   function sheetHtml(id) {
@@ -482,7 +598,7 @@
     if (!document.body) return;
     var id = scene && !embedded() ? character() : null;
     var html = document.documentElement;
-    if (!id) { if (html.classList) html.classList.remove('visor-on'); if (root) { closeSheet(false); root.hidden = true; } return; }
+    if (!id) { if (html.classList) html.classList.remove('visor-on'); if (root) { closeSheet(false); root.hidden = true; } aimAt(null); return; }
     // A scene's own layers read this to keep clear of the glass (thinking.css), in game mode only.
     if (html.classList) html.classList.toggle('visor-on', html.dataset.game === 'on');
     if (!root) {
@@ -492,6 +608,8 @@
       root.setAttribute('role', 'region');
       root.setAttribute('aria-label', 'Visor');
       root.addEventListener('click', onClick);
+      root.addEventListener('pointerdown', onScrubDown);
+      root.addEventListener('keydown', onScrubKey);
       root.addEventListener('focusin', function (e) { wake(); nameHint(e); });
       root.addEventListener('focusout', nameHint);
       root.addEventListener('mouseover', nameHint);
@@ -504,6 +622,8 @@
     root.hidden = false;
     root.setAttribute('data-character', id);
     root.innerHTML = glassHtml(id);
+    tparts = null;
+    paintTimeline();
     if (open) openSheet();
   }
   function embedded() {
@@ -582,6 +702,9 @@
     if (t.closest('[data-visor-unfocus]')) { dropFocus(); return; }
     if (t.closest('[data-visor-lead]')) { if (focus && focus.lead && !focus.lead.busy) { closeSheet(false); focus.lead.run(); } return; }
     if (t.closest('[data-visor-sheet]')) { openSheet(); return; }
+    if (timeline && t.closest('[data-visor-play]')) { timeline.play(); return; }
+    if (timeline && t.closest('[data-visor-speed]')) { timeline.faster(); return; }
+    if (timeline && t.closest('[data-visor-live]')) { timeline.toLive(); return; }
     if (t.closest('[data-game-menu]')) { closeSheet(false); return; } // shell-game.js opens the menu
     // You: your profile in the game's window, the place still drawn behind it. With no
     // window (shell-game.js absent), the link opens the profile page.
@@ -644,6 +767,11 @@
 
   function start() {
     window.addEventListener('keydown', onKey);
+    window.addEventListener('pointermove', onAimMove);
+    window.addEventListener('pointermove', onScrubMove);
+    window.addEventListener('pointerup', onScrubUp);
+    window.addEventListener('pointercancel', onScrubUp);
+    document.addEventListener('pointerleave', function (e) { if (e.target === document.documentElement) aimAt(null); }, true);
     // Resting and waking: all three listen in capture and are passive, so they see a press or
     // a wheel a scene stops, and never slow or change one (ADR 0399 §2.1: the glass is not layout).
     window.addEventListener('pointermove', onPointerMove, { capture: true, passive: true });
@@ -666,6 +794,8 @@
     // a scene's pick: OTBVisor.focus({ title, status, lines, lead: { label, run }, onClose }) or focus(null)
     focus: setFocus,
     focused: function () { return focus ? focus.key : null; },
+    // a scene's time: OTBVisor.timeline({ value, live, label, playing, speed, seek, play, faster, toLive }) or timeline(null)
+    timeline: setTimeline,
     render: render,
     open: openSheet,
     close: function () { closeSheet(true); },

package/modules/hall-ui/records/home-city.md

@@ -221,6 +221,17 @@ The same city, repainted (owner direction, 2026-11-11; ADR 0402's amendment and
 - **The hour** is `sky-time.js` (loaded before the painter): the viewer's clock, or `/?hour=13` to pin it.
 - Pinned by `tests/home_city.mjs` (tokens only, the cloud's place in the draw order) and `tests/hall_sky_time.mjs`.
 
+## Game mode: the city is the whole view (task 1005305)
+
+The owner, 2026-11-14: in game mode the builder's Home is only the city, moved like a base-building game, with no scroll.
+
+- **Where it applies.** Game mode, and Home showing the city (`home-city.js` `world()`, which stamps `html.hc-world`). The artist's gallery and classic mode are unchanged.
+- **What left the scene.** The greeting, the banner, band and main zones (the cards under the city), the foot, the ladder and the time slider (`home-city.css`). The page cannot scroll. The cards hold actions (join requests, invitations, triage) that game mode now reaches nowhere; classic mode still shows them.
+- **The camera** is `home-camera.js`, the scene's own (ADR 0399: the visor owns none). The city's `<svg>` is sized to 1.35 views at least on both axes and moved with a transform: the arrow keys, a drag (a drag's closing click is not a tap on a tower), and the cursor resting within 56px of an edge of the view. It never shows past an edge. It waits while a window, a dialog or the visor's sheet is up, and the cursor pushes only from the scene, never from over the glass's buttons.
+- **Time is the visor's** (ADR 0403): `OTBVisor.timeline` gets the week, and the scene's rows are Play (P), Speed (S, 1× 2× 4×), Back to live (L) and Back to the middle of the city (H). See `visor.md`.
+- **Not done:** zoom; the other game places (the gallery, the Governor City, the windows) still scroll where they did; a phone has no time strip on the glass (the rows in the Actions sheet work).
+- Tests: `tests/home_camera.mjs` (the maths), `tests/home_city_world.mjs` (a real browser, game and classic).
+
 ## Private areas
 
 A private goal the viewer is neither a member of nor an Archon over still stands as a tower (its counts are structure), but the server sends no title for it or for the ideas tied to it; the drawing labels them "A private area" and "A private idea" (ADR 0112, as the goal map and the sky apply it). Pinned in `tests/home_city.mjs`.

package/modules/hall-ui/records/visor.md

@@ -20,6 +20,12 @@ The owner: the design and the theme are right, but the glass took too much of th
 
 Tests: `tests/hall_visor.mjs` (rest, wake, the drag that is not a reach, the sheet holding it awake, the unseen control, the key's name, the arc's pieces, a phone).
 
+## The sight is the cursor, and a scene's time is on the glass (task 1005305, owner 2026-11-14)
+
+- **The sight follows the mouse** in a scene registered with `aim: true` (Home's city is the first), and the arrow is not drawn over the scene (`html.visor-aim`), so the cursor is the crosshair. Over the glass's own controls, a window, a dialog or a field the arrow is back and the sight steps aside. Before the mouse moves, on touch, and when the mouse leaves the view, the sight rests at the centre. Other scenes are unchanged until they ask.
+- **`OTBVisor.timeline({ value, live, label, playing, speed, seek, play, faster, toLive })`** (or `null`): the top arc, which is the version's progress (task 1005266), is also the slider. A band over the arc (`.visor__scrub`, `role="slider"`, the arc's own box) takes the drag, and a mark rides the curve where you are in time; focused, the arrows, Home and End step it. Back in time the version words give way to the date, with play or pause, the speed and Live beside it on the top line, and the glass stays awake; with a timeline, the pointer near the top of the view wakes the glass too. The scene calls it on every change, so it paints in place; the glass re-renders only when a timeline comes or goes.
+- Tests: `tests/hall_visor.mjs` (a real mouse: the sight follows it and the arrow is gone over the scene and back over a control; a drag along the arc, the mark on the curve, the date, play, speed, Back to live, and the arrow keys on the slider) and `tests/home_city_world.mjs` (Home's side).
+
 ## A window the glass opens opens in the glass (task 1005253, owner 2026-11-13)
 
 - **The bug.** The options window and your profile window (`shell-game.js` `openOverlay`, `.opt-window`), and the game menu (`openMenu`, `.game-menu`, task 1005250), are reached from the visor, yet they opened as a box over the whole screen and covered the visor itself: the arcs, the place, your credits, the accent button and the hints.

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.25.27",
+  "version": "1.25.28",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.25.27",
+      "version": "1.25.28",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.25.27",
+  "version": "1.25.28",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/release-notes.json

@@ -11934,5 +11934,11 @@
       "id": "1005197",
       "text": "A hall check that always failed on Windows computers now works there, so it can again spot a page loading its scripts in the wrong order."
     }
+  ],
+  "1.25.28": [
+    {
+      "id": "1005305",
+      "text": "In game mode the builder's Home is now just the city: no scrolling, you move around with the arrow keys, by dragging, or by resting the cursor at a screen edge, and you rewind and replay the city's history from the visor's top"
+    }
   ]
 }

package/src/module-api.js

@@ -81,7 +81,7 @@ const { sleep } = require('./sleep');
 // MAJOR (see allowBoxScope below): passes the request through untouched.
 function deprecatedNoopMiddleware(_req, _res, next) { next(); }
 
-const CORE_VERSION = '1.25.27'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.25.28'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('discord'); log.info('mounted');

package/tests/hall_visor.mjs

@@ -653,3 +653,77 @@ test('a phone keeps the whole glass: there is no pointer to reach with (task 100
   assert.deepEqual(await page.evaluate(() => [OTBVisor.resting(), document.getElementById('visor').classList.contains('visor--rest'), getComputedStyle(document.querySelector('.visor__main')).opacity]), [false, false, '1']);
   await ctx.close();
 });
+
+// ---------- the sight is the cursor, and a scene's time rides the top arc (task 1005305) ----------
+const withTime = (page) => page.evaluate(() => {
+  window.tl = { value: 1, live: true, label: 'Live', playing: false, speed: '1×', plays: 0, lives: 0 };
+  const hand = () => window.OTBVisor.timeline({
+    value: window.tl.value, live: window.tl.live, label: window.tl.label, playing: window.tl.playing, speed: window.tl.speed,
+    seek(f) { window.tl.value = f; window.tl.live = f > 0.999; window.tl.label = window.tl.live ? 'Live' : 'week ' + Math.round(f * 10); hand(); },
+    play() { window.tl.plays++; window.tl.playing = !window.tl.playing; hand(); },
+    faster() { window.tl.speed = '2×'; hand(); },
+    toLive() { window.tl.lives++; window.tl.playing = false; window.tl.value = 1; window.tl.live = true; window.tl.label = 'Live'; hand(); },
+  });
+  window.OTBVisor.scene(Object.assign({}, window.__visorScene, { aim: true }));
+  hand();
+});
+
+test('a scene that asks has the sight follow the mouse with no arrow over it; over a control of the glass the arrow is back', { skip }, async () => {
+  const { ctx, page, errors } = await open();
+  const before = await page.evaluate(() => { const r = document.querySelector('.visor__sight').getBoundingClientRect(); return [Math.round(r.x + r.width / 2), Math.round(r.y + r.height / 2)]; });
+  await page.mouse.move(300, 420);
+  const plain = await page.evaluate(() => ({ aim: document.documentElement.classList.contains('visor-aim'), cursor: getComputedStyle(document.getElementById('world')).cursor }));
+  await withTime(page);
+  await page.mouse.move(310, 430);
+  const scene = await page.evaluate(() => { const r = document.querySelector('.visor__sight').getBoundingClientRect(); return { at: [Math.round(r.x + r.width / 2), Math.round(r.y + r.height / 2)], cursor: getComputedStyle(document.getElementById('world')).cursor, aim: document.getElementById('visor').dataset.aim }; });
+  const main = await page.evaluate(() => { const r = document.querySelector('.visor__main').getBoundingClientRect(); return [r.x + r.width / 2, r.y + r.height / 2]; });
+  await page.mouse.move(main[0], main[1]);
+  const ui = await page.evaluate(() => ({ aim: document.getElementById('visor').dataset.aim, on: document.documentElement.classList.contains('visor-aim'), sight: getComputedStyle(document.querySelector('.visor__sight')).visibility }));
+  await ctx.close();
+  assert.deepEqual(before, [640, 400], 'before the mouse moves the sight rests at the centre');
+  assert.deepEqual(plain, { aim: false, cursor: 'auto' }, 'a scene that does not ask keeps the arrow and the centred sight');
+  assert.deepEqual(scene, { at: [310, 430], cursor: 'none', aim: 'scene' }, 'the sight is where the mouse is, and the arrow is not drawn');
+  assert.deepEqual(ui, { aim: 'ui', on: false, sight: 'hidden' }, 'over the accent button the arrow is back and the sight steps aside');
+  assert.deepEqual(errors, []);
+});
+
+test('dragging along the top arc goes back in time; the date and the player show, and its buttons and the arrow keys work', { skip }, async () => {
+  const { ctx, page, errors } = await open();
+  const none = await page.evaluate(() => !!document.querySelector('[data-visor-scrub]'));
+  await withTime(page);
+  const band = await page.evaluate(() => { const r = document.querySelector('[data-visor-scrub]').getBoundingClientRect(); return { x: r.x, y: r.y, w: r.width, h: r.height, timeHidden: document.querySelector('[data-visor-time]').hidden, role: document.querySelector('[data-visor-scrub]').getAttribute('role') }; });
+  const xAt = (f) => band.x + band.w * (0.076 + 0.848 * f);
+  await page.mouse.move(xAt(0.8), band.y + band.h / 2);
+  await page.mouse.down();
+  await page.mouse.move(xAt(0.5), band.y + band.h / 2 + 200, { steps: 4 }); // the drag holds off the band too
+  await page.mouse.up();
+  const back = await page.evaluate(() => { const m = document.querySelector('.visor__scrub-at').getBoundingClientRect(), b = document.querySelector('[data-visor-scrub]').getBoundingClientRect(); return { value: window.tl.value, when: document.querySelector('[data-visor-when]').textContent, whenHidden: document.querySelector('[data-visor-when]').hidden, timeHidden: document.querySelector('[data-visor-time]').hidden, now: document.querySelector('[data-visor-scrub]').getAttribute('aria-valuenow'), markX: (m.x + m.width / 2 - b.x) / b.width, live: document.querySelector('[data-visor-live]').textContent, rest: document.getElementById('visor').classList.contains('visor--rest') }; });
+  await page.mouse.move(640, 400); // let go: moving on does not drag
+  const after = await page.evaluate(() => window.tl.value);
+  await page.click('[data-visor-play]');
+  await page.click('[data-visor-speed]');
+  const played = await page.evaluate(() => ({ plays: window.tl.plays, label: document.querySelector('[data-visor-play]').getAttribute('aria-label'), speed: document.querySelector('[data-visor-speed]').textContent }));
+  await page.focus('[data-visor-scrub]');
+  await page.keyboard.press('ArrowLeft');
+  const stepped = await page.evaluate(() => window.tl.value);
+  await page.keyboard.press('Home');
+  const home = await page.evaluate(() => window.tl.value);
+  await page.click('[data-visor-live]');
+  const live = await page.evaluate(() => ({ lives: window.tl.lives, timeHidden: document.querySelector('[data-visor-time]').hidden }));
+  await page.evaluate(() => window.OTBVisor.timeline(null));
+  const gone = await page.evaluate(() => !!document.querySelector('[data-visor-scrub]'));
+  await ctx.close();
+  assert.equal(none, false, 'a scene with no time has no slider');
+  assert.equal(band.role, 'slider');
+  assert.equal(band.timeHidden, true, 'at live the player is not shown');
+  assert.ok(Math.abs(back.value - 0.5) < 0.02, 'the drag ends half way back: ' + back.value);
+  assert.ok(Math.abs(back.markX - (0.076 + 0.848 * 0.5)) < 0.02, 'the mark rides the arc at the same place');
+  assert.deepEqual([back.when, back.whenHidden, back.timeHidden, back.now, back.live, back.rest], ['week 5', false, false, '50', 'Back to live', false]);
+  assert.equal(after, back.value, 'after the press ends, moving the mouse changes nothing');
+  assert.deepEqual(played, { plays: 1, label: 'Pause', speed: '2×' });
+  assert.ok(stepped < back.value && stepped > back.value - 0.05, 'the left arrow steps back a little');
+  assert.equal(home, 0, 'Home goes to the start');
+  assert.deepEqual(live, { lives: 1, timeHidden: true });
+  assert.equal(gone, false, 'the scene taking its time away takes the slider away');
+  assert.deepEqual(errors, []);
+});

package/tests/home_camera.mjs

@@ -0,0 +1,34 @@
+// tests/home_camera.mjs — the camera over Home's city in game mode (task 1005305).
+// Runs home-camera.js's own maths: the world is always larger than the view, the camera
+// never shows past an edge, and the cursor pushes only when it rests near a side.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const Cam = require('../modules/hall-ui/public/home-camera.js');
+
+test('the world keeps the drawing\'s shape and is larger than the view on both axes', () => {
+  for (const [vw, vh] of [[1280, 800], [390, 844], [2560, 1080]]) {
+    const s = Cam.worldSize(vw, vh, 1000, 793);
+    assert.ok(s.w >= vw * Cam.OVER - 1 && s.h >= vh * Cam.OVER - 1, `${vw}x${vh} -> ${s.w}x${s.h}`);
+    assert.ok(Math.abs(s.w / s.h - 1000 / 793) < 0.01, 'the drawing is not stretched');
+  }
+  assert.deepEqual(Cam.worldSize(0, 800, 1000, 793), { w: 0, h: 0 }, 'no view, no world');
+});
+
+test('the camera never shows past an edge of the world', () => {
+  assert.equal(Cam.clamp(50, 1280, 2000), 0, 'not past the left edge');
+  assert.equal(Cam.clamp(-5000, 1280, 2000), -720, 'not past the right edge');
+  assert.equal(Cam.clamp(-300, 1280, 2000), -300, 'anywhere between is kept');
+});
+
+test('the cursor pushes only near a side, harder the closer it is, and toward that side', () => {
+  assert.equal(Cam.edgePush(640, 1280), 0, 'the middle of the view does not move the city');
+  assert.equal(Cam.edgePush(Cam.EDGE + 1, 1280), 0);
+  assert.ok(Cam.edgePush(10, 1280) > Cam.edgePush(40, 1280) && Cam.edgePush(40, 1280) > 0, 'left side: the view goes left');
+  assert.ok(Cam.edgePush(1275, 1280) < Cam.edgePush(1240, 1280) && Cam.edgePush(1240, 1280) < 0, 'right side: the view goes right');
+  assert.equal(Cam.edgePush(0, 1280), 1);
+  assert.equal(Cam.edgePush(1280, 1280), -1);
+  assert.equal(Cam.edgePush(null, 1280), 0, 'no cursor, no push');
+});

package/tests/home_city_world.mjs

@@ -0,0 +1,119 @@
+// tests/home_city_world.mjs — game mode: Home's city is the whole view (task 1005305).
+//
+// Runs city-draw.js + home-city-draw.js + home-camera.js + home-city.js in a real page with
+// html[data-game="on"]: the page holds nothing but the city and cannot scroll, the arrow keys
+// move the world and never past its edge, the time is handed to the visor (OTBVisor.timeline)
+// and a drag on it sends the city back through the weeks, and classic mode is as it was.
+// Skips where no system Edge or Chrome is installed.
+//
+// Run:  node --test tests/home_city_world.mjs
+import assert from 'node:assert/strict';
+import { test, after } from 'node:test';
+import { createRequire } from 'node:module';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const lib = require(path.join(ROOT, 'modules', 'ui-design', 'kit', 'lib.js'));
+const pub = (f) => fs.readFileSync(path.join(ROOT, 'modules', 'hall-ui', 'public', f), 'utf8');
+const FIXTURE = fs.readFileSync(path.join(ROOT, 'scripts', 'hall-preview', 'fixtures', 'home__city.json'), 'utf8');
+
+let browser = null;
+try { browser = await lib.launchBrowser(); } catch (e) { if (!(e instanceof lib.NoBrowserError)) throw e; }
+after(() => browser && browser.close());
+const skip = !browser && 'no system Edge or Chrome';
+
+const stubs = `
+  window.__CITY = ${FIXTURE};
+  window.BongosClient = { createClient: () => ({ request: async (m, p) =>
+    (p.startsWith('/api/bongos/home/city') ? { ok: true, status: 200, data: window.__CITY } : { ok: false, status: 404, data: null }) }) };
+  window.OTBCraftMode = { iconHtml: () => '', choose: () => {}, current: () => 'artisan' };
+  document.documentElement.dataset.craft = 'artisan';
+  window.__tl = []; window.__scenes = [];
+  window.OTBVisor = { timeline: (t) => window.__tl.push(t), scene: (s) => window.__scenes.push(s), isOpen: () => false };
+  window.OTB = { contributeHallWidget(w) { window.__widget = w; } };`;
+
+async function boot({ game = true } = {}) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 }, reducedMotion: 'reduce' });
+  const page = await ctx.newPage();
+  await page.setContent(`<!doctype html><html${game ? ' data-game="on"' : ''}><head><style>[hidden]{display:none!important}${pub('home-city.css')}</style></head><body>
+    <div class="page-head--hall">Hello</div><section id="home-city" class="scroll home-city" hidden></section>
+    <div id="zone-home-main" style="height:3000px">cards</div><footer class="app-foot">foot</footer></body></html>`);
+  await page.addScriptTag({ content: stubs });
+  for (const f of ['city-draw.js', 'home-city-draw.js', 'home-camera.js', 'home-city.js']) await page.addScriptTag({ content: pub(f) });
+  await page.evaluate(() => window.__widget.mount(document.getElementById('home-city')));
+  await page.waitForFunction(() => document.querySelector('.hc-svg').childNodes.length > 0);
+  return { ctx, page };
+}
+const shown = (page, sel) => page.evaluate((s) => { const e = document.querySelector(s); return !!e && getComputedStyle(e).display !== 'none'; }, sel);
+const worldX = (page) => page.evaluate(() => Math.round(document.querySelector('.hc-svg').getBoundingClientRect().x));
+const lastTl = (page, pick) => page.evaluate(pick);
+
+test('game mode: the page is only the city, it cannot scroll, and the world is larger than the view', { skip }, async () => {
+  const { ctx, page } = await boot();
+  const s = await page.evaluate(() => {
+    const r = document.querySelector('.hc-svg').getBoundingClientRect(), h = document.documentElement;
+    window.scrollTo(0, 500);
+    return { world: h.classList.contains('hc-world'), overflow: getComputedStyle(h).overflowY, scrolled: window.scrollY, w: r.width, h: r.height, x: r.x, y: r.y };
+  });
+  const parts = {};
+  for (const sel of ['.page-head--hall', '#zone-home-main', '.app-foot', '.hc-ladder', '.hc-time', '.hc-svg']) parts[sel] = await shown(page, sel);
+  await ctx.close();
+  assert.equal(s.world, true);
+  assert.equal(s.overflow, 'hidden');
+  assert.equal(s.scrolled, 0, 'the page does not scroll');
+  assert.ok(s.w > 1280 && s.h > 800, 'the city is a world larger than the view');
+  assert.ok(s.x < 0 && s.y < 0, 'the view opens on the middle of it');
+  assert.deepEqual(parts, { '.page-head--hall': false, '#zone-home-main': false, '.app-foot': false, '.hc-ladder': false, '.hc-time': false, '.hc-svg': true });
+});
+
+test('game mode: the arrow keys move the city, and never past its edge', { skip }, async () => {
+  const { ctx, page } = await boot();
+  const start = await worldX(page);
+  await page.keyboard.down('ArrowRight');
+  await page.waitForFunction((x0) => Math.round(document.querySelector('.hc-svg').getBoundingClientRect().x) < x0 - 40, start);
+  await page.keyboard.up('ArrowRight');
+  await page.keyboard.down('ArrowLeft');
+  await page.waitForFunction(() => Math.round(document.querySelector('.hc-svg').getBoundingClientRect().x) === 0, null, { timeout: 15000 });
+  await page.waitForTimeout(200);
+  const end = await worldX(page);
+  const scrolled = await page.evaluate(() => window.scrollX + window.scrollY);
+  await page.keyboard.up('ArrowLeft');
+  await ctx.close();
+  assert.equal(end, 0, 'held against the left edge, the world stops at it');
+  assert.equal(scrolled, 0);
+});
+
+test('game mode: time is on the visor; a drag sends the city back, and Home registers its rows, keys and the cursor sight', { skip }, async () => {
+  const { ctx, page } = await boot();
+  const read = () => lastTl(page, () => { const t = window.__tl[window.__tl.length - 1]; return { live: t.live, value: t.value, label: t.label, speed: t.speed, len: document.querySelector('.hc-svg').innerHTML.length }; });
+  const before = await read();
+  await page.evaluate(() => window.__tl[window.__tl.length - 1].seek(0.3));
+  const back = await read();
+  await page.evaluate(() => window.__tl[window.__tl.length - 1].faster());
+  const sped = (await read()).speed;
+  const scene = await page.evaluate(() => { const s = window.__visorScene; return { aim: s.aim, keys: s.keys.map((k) => k.key), rows: s.actions.map((a) => a.label) }; });
+  await page.evaluate(() => window.__tl[window.__tl.length - 1].toLive());
+  const live = (await read()).live;
+  await ctx.close();
+  assert.deepEqual([before.live, before.value, before.label, before.speed], [true, 1, 'Live', '1×']);
+  assert.equal(back.live, false);
+  assert.ok(Math.abs(back.value - 0.3) < 0.01 && back.label !== 'Live', 'the city is where the drag sent it: ' + back.label);
+  assert.notEqual(back.len, before.len, 'the city is redrawn for that week');
+  assert.equal(sped, '2×');
+  assert.equal(scene.aim, true);
+  assert.deepEqual(scene.keys, ['Arrows']);
+  assert.ok(scene.rows.includes('Play the city over time') && scene.rows.includes('Back to live') && scene.rows.some((r) => r.startsWith('Speed')), scene.rows.join(' | '));
+  assert.equal(live, true);
+});
+
+test('classic mode is as it was: the ladder, the slider and the cards are on the page, and no timeline is handed over', { skip }, async () => {
+  const { ctx, page } = await boot({ game: false });
+  const s = await page.evaluate(() => ({ world: document.documentElement.classList.contains('hc-world'), tl: window.__tl.filter(Boolean).length, aim: window.__visorScene.aim, transform: document.querySelector('.hc-svg').style.transform }));
+  const parts = { ladder: await shown(page, '.hc-ladder'), time: await shown(page, '.hc-time'), cards: await shown(page, '#zone-home-main') };
+  await ctx.close();
+  assert.deepEqual(s, { world: false, tl: 0, aim: false, transform: '' });
+  assert.deepEqual(parts, { ladder: true, time: true, cards: true });
+});