@bongos/core 1.24.79 → 1.24.81

package/modules/hall-ui/public/tweak-editor.html

@@ -10,7 +10,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm">
   <link rel="stylesheet" href="/builders/tweak-editor.css?v=2026-09-29-tw27-aqfix">
 </head>
 <!-- THE TWEAK EDITOR (task 1004321 / BV2.TW10, goal 1000095; ADR 0341 D4 and
@@ -143,14 +143,14 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-09-game-mode"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-helm"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
-<script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
-<script src="/builders/shell.js?v=2026-11-09-game-mode"></script>
+<script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
+<script src="/builders/shell.js?v=2026-11-11-helm"></script>
 <script src="/builders/hall-dialog.js"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/brand-holes.js?v=2026-09-29-aqfix"></script>
 <script src="/builders/tweak-editor-lib.js?v=2026-09-29-tw27"></script>
-<script src="/builders/tweak-editor.js?v=2026-09-29-tw27-aqfix"></script>
+<script src="/builders/tweak-editor.js?v=2026-11-10-options"></script>
 </body>
 </html>

package/modules/hall-ui/public/tweak-editor.js

@@ -647,7 +647,11 @@
     if (ev.target && ev.target.classList && ev.target.classList.contains('tw-line')) flush();
   });
   document.addEventListener('keydown', (ev) => {
-    if (ev.key === 'Escape') { closeRefused(); setMenu(false); }
+    if (ev.key === 'Escape') {
+      // Spent only when it closed something (ADR 0399 §2.4 row 5, task 1005144).
+      if (!$('tw-refused').hidden || $('tw-openwrap').classList.contains('is-open')) ev.preventDefault();
+      closeRefused(); setMenu(false);
+    }
     if (ev.target && ev.target.id === 'tw-divider') {
       const next = lib.splitFromKey(st.splitSize, ev.key);
       if (next !== null) { ev.preventDefault(); setSize(next); remember(SIZE_KEY, String(st.splitSize)); }

package/modules/hall-ui/public/tweak-editor.states.json

@@ -1,6 +1,7 @@
 {
   "_": "The tweak editor (task 1004321 / BV2.TW10), built 1:1 on docs/design/mocks/tweak-mode/Editor.dc.html. Against the kit's own stub the page renders its could-not-read state (no /copy-desk feed), a state the floors must hold in. TO SEE IT POPULATED, point the kit at the hall-preview harness: `node scripts/hall-preview/server.js --port 4631 --fixture-me`, then `render.js --page '/builders/tweak-editor?page=landing:index' --base-in http://builders.localhost:4631 --base-out http://builders.localhost:4631`. The harness answers the read from fixtures/copy-desk__pages__draft.json (the real landing:index reading with the artboard's two rewrites as the saved draft), next up from copy-desk__next.json, and the autosave, the submit and the claim from its canned writes.",
   "page": "/builders/tweak-editor?page=landing:index",
+  "modes": ["dark"],
   "_storage": "The hall asks a first-visit question (the session mode picker, craft-mode.js) over every page; seeding \"already asked\" renders the page a returning builder sees (task 1005080).",
   "storage": { "session": { "hall-craft-asked": "1" } },
   "surface": "hall-ui",

package/modules/hall-ui/public/update-pill.js

@@ -38,6 +38,8 @@
   'use strict';
 
   var RUN_KEY = 'bongos.update.run';
+  var LATER_KEY = 'bongos.update.later';
+  var LATER_MS = 24 * 60 * 60 * 1000;
   var MSG = 'bongos-update'; // the tag deploy-handoff.js answers to; both sides check it
   var VERSION_RE = /^\d+\.\d+\.\d+$/;
   // A hub door as the server words it (core-update.js updateDoor): an origin and
@@ -152,12 +154,34 @@
     return slow ? 'slow' : 'starting';
   }
 
+  // THE POP-UP (task 1005191). The owner, 2026-11-10: the pill alone was not seen. Game mode
+  // opens every page without its bars, and a project sat 3 minor versions behind. So an
+  // update that is ready also ASKS, once, in the hall's own dialog. Any way of closing it
+  // other than Update now is "later": that version is not asked about again in this browser
+  // for a day. The pill stays, so later never means lost.
+  function readLater(storage) {
+    var l = null;
+    try { l = JSON.parse((storage && storage.getItem(LATER_KEY)) || 'null'); } catch (e) { l = null; }
+    return l && isVersion(l.v) && isFinite(l.at) ? l : null;
+  }
+  function keepLater(storage, version, now) {
+    try { if (storage && isVersion(version)) storage.setItem(LATER_KEY, JSON.stringify({ v: version, at: now })); } catch (e) { /* it asks again next page */ }
+  }
+  /** Whether the pop-up opens: only for an update that is ready, and not for a version the
+   *  owner already said "later" to inside the last day. A newer version asks again at once. */
+  function askDue(o) {
+    if (!o || o.face !== 'ready' || !isVersion(o.offered)) return false;
+    var l = o.later;
+    if (l && l.v === o.offered && o.now >= l.at && o.now - l.at < LATER_MS) return false;
+    return true;
+  }
+
   // ---------- the page half ----------
 
   var state = {
     api: null, update: null, held: null, sw: null, swAsked: null, swError: null, ended: null, note: null,
     face: 'none', stage: null, run: null, error: null, pill: null, card: null,
-    popup: null, plan: null, offered: null, looks: 0, timer: null, popupTimer: null, listening: false,
+    popup: null, plan: null, offered: null, asked: false, looks: 0, timer: null, popupTimer: null, listening: false,
   };
 
   function doc() { return root && root.document; }
@@ -316,7 +340,7 @@
       d.body.appendChild(c);
       state.card = c;
       if (root.addEventListener) root.addEventListener('resize', function () { if (state.card && !state.card.hidden) placeCard(); });
-      d.addEventListener('keydown', function (e) { if (e.key === 'Escape' && state.card && !state.card.hidden) { closeCard(); if (state.pill) state.pill.focus(); } });
+      d.addEventListener('keydown', function (e) { if (e.key === 'Escape' && state.card && !state.card.hidden) { e.preventDefault(); closeCard(); if (state.pill) state.pill.focus(); } }); // spent: ADR 0399 §2.4, task 1005144
       d.addEventListener('click', function (e) {
         if (!state.card || state.card.hidden) return;
         var t = e.target;
@@ -556,6 +580,69 @@
     if (root.location && root.location.reload) root.location.reload();
   }
 
+  // ---------- the pop-up ----------
+
+  // Not in the hub's handoff window, not on the update door itself, and not over the setup
+  // screen: each of those is already the thing the owner is doing.
+  function askAllowed() {
+    var d = doc();
+    if (!d || !root.OTBDialog || typeof root.OTBDialog.open !== 'function' || state.asked) return false;
+    var el = d.documentElement;
+    if (el && el.dataset && el.dataset.handoff === 'on') return false;
+    if (root.OTBSetupGate) return false;
+    return !(root.location && root.location.pathname === '/deploy');
+  }
+
+  function askBodyHtml(plan) {
+    var u = state.update || {};
+    var h = highlights((state.sw.update || {}).whats_new, HIGHLIGHTS);
+    var list = h.lines.length ? '<ul class="upd-card__list">' + h.lines.map(function (l) { return '<li>' + esc(l) + '</li>'; }).join('') + '</ul>' : '';
+    var note = plan.kind === 'cli'
+      ? 'This project is updated on the server that runs it: <code>bongos upgrade</code> there takes this version, and puts the old one back if it fails.'
+      : 'Takes a few minutes. The project restarts once, and goes back to the version it runs now on its own if the new one is not healthy.';
+    var versions = isVersion(u.running) && isVersion(state.offered) ? '<p class="upd-card__ver">' + mono(u.running) + ' → ' + mono(state.offered) + '</p>' : '';
+    return '<p>A newer version of Bongos is ready, with the latest changes and bug fixes.</p>' + list +
+      '<p class="upd-card__note">' + note + '</p>' + versions;
+  }
+
+  // Asked from the same reading the card uses, so the pop-up and the card name one version
+  // and the two-step rule holds: the pop-up shows the version, Update now sends that one.
+  function maybeAsk() {
+    if (!askAllowed() || !askDue({ face: state.face, offered: state.offered, later: readLater(store()), now: now() })) return;
+    var read = readSoftwareUpdate();
+    if (!read) { ask(); return; }
+    read.then(ask);
+  }
+  function ask() {
+    if (!state.sw || !askAllowed() || !askDue({ face: state.face, offered: state.offered, later: readLater(store()), now: now() })) return;
+    var plan = doorPlan(state.sw);
+    if (plan.kind === 'none') return; // a viewer the door would refuse is not asked
+    var d = doc();
+    var body = d.createElement('div');
+    body.className = 'upd-ask';
+    body.innerHTML = askBodyHtml(plan);
+    var canGo = plan.kind === 'local' || plan.kind === 'hub';
+    var offered = state.offered;
+    var actions = canGo
+      ? [{ label: 'Later', value: 'later', kind: 'ghost' }, { label: 'Update now', value: 'go' }]
+      : [{ label: 'Close', value: 'later', kind: 'ghost' }];
+    state.asked = true;
+    var dlg = root.OTBDialog.open({ title: 'Update the builders hall?', body: body, actions: actions, initialFocus: '[data-dialog-value="' + (actions.length - 1) + '"]' });
+    // Update now runs inside the press itself: a hosted project opens the hub's window, and
+    // a browser allows that only from the click, not from the dialog's settled promise.
+    if (canGo && dlg && dlg.el && dlg.el.addEventListener) {
+      dlg.el.addEventListener('click', function (e) {
+        var t = e && e.target;
+        var b = t && t.closest ? t.closest('[data-dialog-value]') : null;
+        if (!b || b.getAttribute('data-dialog-value') !== '1') return;
+        if (updateNow()) openCard();
+      });
+    }
+    if (dlg && dlg.result && dlg.result.then) {
+      dlg.result.then(function (v) { if (v !== 'go') keepLater(store(), offered, now()); });
+    }
+  }
+
   /** shell.js hands over GET /core-update's answer; the pill decides what, if anything, to show. */
   function mount(data, opts) {
     state.api = opts && opts.api;
@@ -575,6 +662,7 @@
     state.face = face;
     drawPill();
     if (face === 'running') schedule();
+    if (face === 'ready') maybeAsk();
     return face;
   }
 
@@ -590,6 +678,7 @@
     // the pure half, for the tests
     highlights: highlights, doorPlan: doorPlan, pillState: pillState, stageOf: stageOf,
     readRun: readRun, keepRun: keepRun, forgetRun: forgetRun, isVersion: isVersion,
+    askDue: askDue, readLater: readLater, keepLater: keepLater, LATER_KEY: LATER_KEY, LATER_MS: LATER_MS,
     RUN_KEY: RUN_KEY, MSG: MSG, SLOW_MS: SLOW_MS, GIVE_UP_MS: GIVE_UP_MS,
     _state: state,
   };

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

@@ -0,0 +1,80 @@
+/* visor.css — the first-person visor (task 1005148, visor.js; ADR 0399). Glass over the scene:
+   the frame lines, the place, three pills and the actions sheet. It shows in game mode only, and
+   it is an overlay, never layout, so the stage under it never changes size (ADR 0399 §2.1).
+   Colours are the hall's tokens; the frame is hairline ink, never a glow (DESIGN.md: no
+   near-black-plus-neon HUD). Record: modules/hall-ui/records/visor.md. */
+.visor { display: none; }
+html[data-game="on"] .visor:not([hidden]) {
+  display: block; position: fixed; inset: 0; z-index: 4; pointer-events: none;
+  /* where the glass sits, so a scene's pop-up can keep clear of it (ADR 0399 §2.3) */
+  --visor-inset-top: 64px; --visor-inset-right: 40px; --visor-inset-bottom: 76px; --visor-inset-left: 40px;
+  color: var(--ink); font-family: var(--font-body);
+}
+
+/* the frame: stretched over the stage, every stroke one hairline at any size */
+.visor__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+.visor__frame path { vector-effect: non-scaling-stroke; }
+.visor__line { fill: none; stroke: var(--rule); stroke-width: var(--ds-line); }
+.visor__line--side { stroke: var(--rule-soft); }
+.visor__cell { fill: color-mix(in srgb, var(--ink) 12%, transparent); stroke: var(--rule); stroke-width: var(--ds-line); }
+.visor__mark { fill: var(--accent); stroke: none; }
+
+/* the place, under the compass */
+.visor__place {
+  position: absolute; left: 50%; top: max(9.5%, 84px); transform: translateX(-50%); margin: 0;
+  font-family: var(--font-mono); font-size: var(--ds-text-2xs); letter-spacing: .14em; text-transform: uppercase;
+  color: var(--ink-soft); white-space: nowrap;
+}
+
+/* the pills: the only parts of the glass that take a pointer */
+.visor__pill, .visor__me {
+  position: absolute; pointer-events: auto; box-sizing: border-box;
+  display: inline-flex; align-items: center; gap: var(--ds-space-xs);
+  min-height: 46px; padding: 0 var(--ds-space-sm);
+  background: var(--bg-card); color: var(--ink); border: var(--ds-line) solid var(--rule);
+  border-radius: var(--ds-radius-pill); font: inherit; font-size: var(--ds-text-sm); text-decoration: none;
+}
+.visor__pill { cursor: pointer; }
+.visor__pill:hover { border-color: var(--ink-faint); }
+.visor__pill:focus-visible, .visor__row:focus-visible, .visor__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.visor__pill--main { left: var(--visor-inset-left); bottom: var(--visor-inset-bottom); background: var(--accent); color: var(--accent-on); border-color: var(--accent); font-weight: 500; }
+.visor__pill--main:hover { border-color: var(--accent-deep); }
+.visor__pill--actions { right: var(--visor-inset-right); top: var(--visor-inset-top); }
+.visor__pill[hidden] { display: none; }
+.visor__dots { width: 14px; height: 4px; background: radial-gradient(circle, currentColor 1.5px, transparent 2px) 0 0 / 5px 4px repeat-x; }
+.visor__me { right: var(--visor-inset-right); bottom: var(--visor-inset-bottom); padding: 4px var(--ds-space-sm) 4px 4px; pointer-events: none; }
+.visor__sprite { width: 38px; height: 38px; border-radius: var(--ds-radius-pill); object-fit: cover; object-position: 50% 12%; background: var(--bg-deep); }
+.visor__who { display: flex; flex-direction: column; line-height: 1.2; }
+.visor__name { font-weight: 500; }
+.visor__credits { font-size: var(--ds-text-2xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.visor__key {
+  font-family: var(--font-mono); font-size: var(--ds-text-2xs); line-height: 1; padding: 3px 5px;
+  border: var(--ds-line) solid currentColor; border-radius: var(--ds-radius-pill); opacity: .75;
+}
+
+/* the sheet: above the scene's pop-ups, under the modals (ADR 0399 §2.3 layer 4) */
+.visor__sheet {
+  position: absolute; right: var(--visor-inset-right); top: var(--visor-inset-top); z-index: 1;
+  pointer-events: auto; box-sizing: border-box; width: min(18rem, calc(100vw - 2 * var(--ds-space-gutter-narrow)));
+  max-height: calc(100% - var(--visor-inset-top) - var(--visor-inset-bottom)); overflow-y: auto;
+  padding: var(--ds-space-sm); background: var(--bg-card); border: var(--ds-line) solid var(--rule);
+  border-radius: var(--ds-radius-panel); box-shadow: var(--ds-shadow-pop);
+}
+.visor__sheet-head { display: flex; align-items: center; justify-content: space-between; }
+.visor__sheet-title { margin: 0; font-size: var(--ds-text-md); font-weight: 500; }
+.visor__close { min-width: 32px; min-height: 32px; background: none; border: 0; color: var(--ink-soft); cursor: pointer; }
+.visor__cap { margin: var(--ds-space-xs) 0 2px; font-family: var(--font-mono); font-size: var(--ds-text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
+.visor__rows { list-style: none; margin: 0; padding: 0; }
+.visor__rows + .visor__rows { margin-top: var(--ds-space-xs); }
+.visor__row {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-xs);
+  box-sizing: border-box; width: 100%; min-height: 36px; padding: 0 2px;
+  background: none; border: 0; border-top: var(--ds-line) solid var(--rule-soft);
+  color: var(--ink); font: inherit; font-size: var(--ds-text-sm); text-align: left; text-decoration: none; cursor: pointer;
+}
+.visor__row:hover { color: var(--accent-deep); }
+.visor__row--hint { cursor: default; color: var(--ink-soft); }
+.visor__row--hint:hover { color: var(--ink-soft); }
+
+/* a phone (640px and narrower): the rules live in style.css’s shared phone block, so the
+   visor adds no breakpoint of its own (the design-count ratchet). */

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

@@ -0,0 +1,316 @@
+// visor.js — the first-person visor: glass over the scene (task 1005148, BONGOS-V3 R08,
+// goal 1000142, criterion `you-are-a-character-in-first-person`). Built to ADR 0399.
+//
+// What is on the glass (the design the owner agreed on 2026-11-10, task 1005148):
+//   - the frame: thin curved visor lines at the top, the bottom and both sides, a small
+//     centre cross, and a compass of nine slanted cells along the top line with the one
+//     salmon marker under its centre. Drawn once as SVG; it is ornament, never a control.
+//   - the place, in a mono line under the compass ("THE SKY", "GOVERNOR CITY", …).
+//   - bottom-left: your character's main action, the one accent pill, with its key.
+//   - bottom-right: your sprite (third person) with your character's name and your credits
+//     (builders.total_credits — credits only, never a payout; the spec's "does not exist").
+//   - top-right: "Actions" (key A), which opens the sheet: your character's actions, then
+//     the keys of the place you are in, then Options on Escape.
+//
+// The rules it keeps (ADR 0399):
+//   - one overlay, #visor, with pointer-events: none; only its pills take a pointer, so a
+//     drag, a wheel or a click on the world reaches the scene unchanged (§2.1).
+//   - no camera: a scene registers itself once with OTBVisor.scene({ name, place, actions,
+//     keys }) and a movement action calls the scene's own function (§2.2). A page with no
+//     scene registered shows no visor.
+//   - Escape (§2.4): an OPEN SHEET takes the press in capture and stops it (row 4), so the
+//     star under it stays picked; the ambient glass never takes one, so the last press
+//     still reaches the options menu (shell-game.js onEscape).
+//   - it hides nothing and gates nothing (§2.5): every action is a link or tool a page
+//     already offers, and the server's rank checks answer exactly as before.
+//   - game mode only: html[data-game="on"] shows it (visor.css). Outside it, the hall is
+//     exactly as it was.
+//
+// The character comes from craft-mode.js (task 1005147): the held character, or this
+// session's mode on a core that has no characters yet. With neither, no visor.
+// R09 (task 1005149) turns the keys below into the one rebindable registry.
+(function () {
+  'use strict';
+
+  // ---------- each character's actions ----------
+  // `href` opens a page the hall already has; `tool` opens one of craft-mode's tools on
+  // this page. The first is the character's main action (the accent pill).
+  var ACTIONS = {
+    artisan: [
+      { id: 'claim', label: 'Claim a task', key: 'c', href: '/work' },
+      { id: 'blockers', label: 'Blockers', key: 'b', href: '/blockers' },
+      { id: 'sky', label: 'Goal sky', key: 'g', href: '/goal-map' },
+      { id: 'thinking', label: 'Your thinking', key: 't', href: '/thinking' },
+    ],
+    artist: [
+      { id: 'review', label: 'Review this page', key: 'r', tool: 'palette' },
+      { id: 'words', label: 'Edit its words', key: 'e', tool: 'paintbrush' },
+      { id: 'idea', label: 'Write an idea', key: 'i', tool: 'lightbulb' },
+      { id: 'studio', label: 'Studio', key: 's', href: '/studio' },
+    ],
+    patron: [
+      { id: 'board', label: 'Board room', key: 'o', href: '/board-room' },
+      { id: 'city', label: 'Governor city', key: 'v', href: '/city' },
+      { id: 'blockers', label: 'Blockers', key: 'b', href: '/blockers' },
+      { id: 'watch', label: 'Watch', key: 'w', href: '/watch' },
+    ],
+  };
+  var SHEET_KEY = 'a';
+  var NAMES = { artisan: 'Artisan', artist: 'Artist', patron: 'Patron' };
+
+  function esc(v) { return window.OTB && window.OTB.escapeHtml ? window.OTB.escapeHtml(v) : String(v == null ? '' : v).replace(/[^\w .,:'-]/g, ''); }
+  function craft() { return window.OTBCraftMode || null; }
+  // The character on the glass: the held one, else this session's mode, else none.
+  function character() {
+    var C = craft();
+    if (!C) return null;
+    var held = typeof C.character === 'function' ? C.character() : undefined;
+    if (typeof held === 'string' && ACTIONS[held]) return held;
+    var mode = typeof C.current === 'function' ? C.current() : null;
+    return ACTIONS[mode] ? mode : null;
+  }
+  function actionsFor(id) { return ACTIONS[id] ? ACTIONS[id].slice() : []; }
+  function credits() {
+    var C = craft();
+    var me = C && typeof C.me === 'function' ? C.me() : null;
+    var n = me && me.builder ? Number(me.builder.total_credits) : NaN;
+    return isFinite(n) ? n : null;
+  }
+  function creditsText(n) {
+    if (n == null) return '';
+    var v = Math.round(n);
+    var s = String(Math.abs(v)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return (v < 0 ? '−' : '') + s + (Math.abs(v) === 1 ? ' credit' : ' credits');
+  }
+  // A link on the hall's own host: '/work' on the builders host, '/builders/work' on the apex.
+  function hallHref(p) {
+    var here = String((window.location && window.location.pathname) || '');
+    return (here.indexOf('/builders/') === 0 || here === '/builders' ? '/builders' : '') + p;
+  }
+
+  // ---------- the scene ----------
+  var scene = null;
+  // A scene says what it is and, if it has a camera, the actions that move it (ADR 0399
+  // §2.2). `keys` are lines for the sheet's "this place" list: keys the scene already binds.
+  function registerScene(s) {
+    if (!s || typeof s !== 'object') return;
+    scene = {
+      name: String(s.name || ''),
+      place: String(s.place || ''),
+      actions: (Array.isArray(s.actions) ? s.actions : []).filter(function (a) { return a && a.label && typeof a.run === 'function'; }),
+      keys: (Array.isArray(s.keys) ? s.keys : []).filter(function (k) { return k && k.label && k.key; }),
+    };
+    render();
+  }
+
+  // ---------- drawing ----------
+  var root = null, sheet = null, returnFocus = null;
+  var NS = 'http://www.w3.org/2000/svg';
+  // The frame is drawn in a 1000×1000 box stretched over the stage (preserveAspectRatio
+  // none), with non-scaling strokes so every line stays one hairline at any size.
+  function frameSvg() {
+    var cells = '';
+    for (var i = -4; i <= 4; i++) {
+      var x = 500 + i * 38, y = 30 + Math.pow(i / 4, 2) * 14, s = i * 2;
+      cells += '<path class="visor__cell" d="M' + (x - 15) + ' ' + (y + 4 - s / 2) + 'l30 ' + s + 'l-6 15l-30 ' + (-s) + 'z"/>';
+    }
+    return '<svg class="visor__frame" viewBox="0 0 1000 1000" preserveAspectRatio="none" aria-hidden="true" focusable="false" xmlns="' + NS + '">' +
+      '<path class="visor__line" d="M0 120Q500 -10 1000 120"/>' +
+      '<path class="visor__line" d="M0 880Q500 1010 1000 880"/>' +
+      '<path class="visor__line visor__line--side" d="M18 120Q4 500 18 880M982 120Q996 500 982 880"/>' +
+      '<path class="visor__line" d="M490 500h-12M510 500h12M500 490v-14M500 510v14"/>' +
+      cells + '<path class="visor__mark" d="M494 76l6 9l6 -9z"/>' +
+    '</svg>';
+  }
+  function keyHtml(k) { k = String(k); return '<kbd class="visor__key">' + esc(k.length === 1 ? k.toUpperCase() : k) + '</kbd>'; }
+  function actionAttrs(a) {
+    return a.href ? 'href="' + esc(hallHref(a.href)) + '"' : 'href="#" role="button"';
+  }
+  function glassHtml(id) {
+    var acts = actionsFor(id), main = acts[0], C = craft();
+    var sprite = C && typeof C.spriteSrc === 'function' ? C.spriteSrc(id) : '';
+    var n = credits();
+    return frameSvg() +
+      (scene.place ? '<p class="visor__place">' + esc(scene.place) + '</p>' : '') +
+      '<a class="visor__pill visor__pill--main" data-visor-act="' + esc(main.id) + '" ' + actionAttrs(main) + '>' +
+        '<span>' + esc(main.label) + '</span>' + keyHtml(main.key) + '</a>' +
+      '<button class="visor__pill visor__pill--actions" type="button" data-visor-sheet aria-expanded="false" aria-controls="visor-sheet">' +
+        '<span class="visor__dots" aria-hidden="true"></span><span>Actions</span>' + keyHtml(SHEET_KEY) + '</button>' +
+      '<div class="visor__me">' +
+        (sprite ? '<img class="visor__sprite" src="' + esc(sprite) + '" alt="" width="250" height="290" decoding="async">' : '') +
+        '<span class="visor__who"><span class="visor__name">' + esc(NAMES[id]) + '</span>' +
+        '<span class="visor__credits" data-visor-credits>' + esc(creditsText(n)) + '</span></span>' +
+      '</div>';
+  }
+  function sheetHtml(id) {
+    var rows = actionsFor(id).map(function (a) {
+      return '<li><a class="visor__row" data-visor-act="' + esc(a.id) + '" ' + actionAttrs(a) + '><span>' + esc(a.label) + '</span>' + keyHtml(a.key) + '</a></li>';
+    }).join('');
+    var place = scene.actions.map(function (a, i) {
+      return '<li><button class="visor__row" type="button" data-visor-scene="' + i + '"><span>' + esc(a.label) + '</span>' + (a.key ? keyHtml(a.key) : '') + '</button></li>';
+    }).concat(scene.keys.map(function (k) {
+      return '<li><span class="visor__row visor__row--hint"><span>' + esc(k.label) + '</span>' + keyHtml(k.key) + '</span></li>';
+    })).join('');
+    return '<div class="visor__sheet-head"><h2 class="visor__sheet-title" id="visor-sheet-title">Actions</h2>' +
+        '<button class="visor__close" type="button" data-visor-close aria-label="Close actions">' + keyHtml('Esc') + '</button></div>' +
+      '<p class="visor__cap">' + esc(NAMES[id]) + '</p><ul class="visor__rows">' + rows + '</ul>' +
+      (place ? '<p class="visor__cap">This place</p><ul class="visor__rows">' + place + '</ul>' : '') +
+      '<ul class="visor__rows"><li><a class="visor__row" href="' + esc(hallHref('/settings')) + '"><span>Options</span>' + keyHtml('Esc') + '</a></li></ul>';
+  }
+  function shown() { return !!(root && !root.hidden); }
+  function render() {
+    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; }
+    // 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) {
+      root = document.createElement('div');
+      root.id = 'visor';
+      root.className = 'visor';
+      root.setAttribute('role', 'region');
+      root.setAttribute('aria-label', 'Visor');
+      root.addEventListener('click', onClick);
+      document.body.appendChild(root);
+    }
+    var open = !!sheet;
+    closeSheet(false);
+    root.hidden = false;
+    root.setAttribute('data-character', id);
+    root.innerHTML = glassHtml(id);
+    if (open) openSheet();
+  }
+  function embedded() {
+    var G = window.OTBShellGame;
+    return !!(G && typeof G.embedded === 'function' && G.embedded());
+  }
+
+  // ---------- the sheet ----------
+  function openSheet() {
+    var id = character();
+    if (!shown() || sheet || !id) return;
+    returnFocus = document.activeElement;
+    sheet = document.createElement('div');
+    sheet.id = 'visor-sheet';
+    sheet.className = 'visor__sheet';
+    sheet.setAttribute('role', 'dialog');
+    sheet.setAttribute('aria-labelledby', 'visor-sheet-title');
+    sheet.innerHTML = sheetHtml(id);
+    sheet.addEventListener('click', onClick);
+    root.appendChild(sheet);
+    var btn = root.querySelector('[data-visor-sheet]');
+    if (btn) { btn.setAttribute('aria-expanded', 'true'); btn.hidden = true; }
+    document.addEventListener('keydown', onSheetKey, true);
+    var first = sheet.querySelector('.visor__rows a, .visor__rows button');
+    if (first && first.focus) first.focus();
+  }
+  function closeSheet(refocus) {
+    if (!sheet) return;
+    document.removeEventListener('keydown', onSheetKey, true);
+    if (sheet.parentNode) sheet.parentNode.removeChild(sheet);
+    sheet = null;
+    var btn = root && root.querySelector('[data-visor-sheet]');
+    if (btn) { btn.setAttribute('aria-expanded', 'false'); btn.hidden = false; }
+    if (refocus !== false) {
+      var to = returnFocus && returnFocus.isConnected !== false && returnFocus !== document.body ? returnFocus : btn;
+      if (to && to.focus) { try { to.focus(); } catch (_) { /* gone */ } }
+    }
+    returnFocus = null;
+  }
+  // ADR 0399 §2.4 row 4: capture on document, and stop the press, so no scene listener
+  // below (the sky's unpick) and not the options menu also spends it.
+  function onSheetKey(e) {
+    if (!sheet || e.key !== 'Escape') return;
+    e.preventDefault();
+    e.stopPropagation();
+    closeSheet(true);
+  }
+
+  // ---------- running an action ----------
+  function run(a) {
+    if (!a) return;
+    if (a.tool) {
+      var C = craft();
+      if (C && typeof C.openTool === 'function') C.openTool(a.tool);
+      return;
+    }
+    if (a.href) window.location.assign(hallHref(a.href));
+  }
+  function find(id) {
+    var acts = actionsFor(character());
+    for (var i = 0; i < acts.length; i++) if (acts[i].id === id) return acts[i];
+    return null;
+  }
+  function onClick(e) {
+    var t = e.target && e.target.closest ? e.target : null;
+    if (!t) return;
+    if (t.closest('[data-visor-close]')) { closeSheet(true); return; }
+    if (t.closest('[data-visor-sheet]')) { openSheet(); return; }
+    var sc = t.closest('[data-visor-scene]');
+    if (sc && scene) { var a = scene.actions[Number(sc.getAttribute('data-visor-scene'))]; closeSheet(false); if (a) a.run(); return; }
+    var act = t.closest('[data-visor-act]');
+    if (!act) return;
+    var found = find(act.getAttribute('data-visor-act'));
+    if (found && found.tool) { e.preventDefault(); closeSheet(false); run(found); }
+    else closeSheet(false); // a link: the browser follows it
+  }
+
+  // ---------- the keys ----------
+  function inField(el) {
+    var tag = el && el.tagName ? String(el.tagName).toLowerCase() : '';
+    return tag === 'input' || tag === 'textarea' || tag === 'select' || !!(el && el.isContentEditable);
+  }
+  // Something above the glass has the keyboard: the character picker, a modal dialog, the
+  // palette, the start screen. The visor's keys wait while any of them is up.
+  function busy() {
+    var html = document.documentElement;
+    if (html.classList && (html.classList.contains('craft-picker-open') || html.classList.contains('gs-open'))) return true;
+    return !!document.querySelector('dialog[open], [aria-modal="true"]');
+  }
+  // Which action (or the sheet) a key press means, or null. Pure, for the tests.
+  function keyFor(id, e) {
+    if (!e || e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey || typeof e.key !== 'string' || e.key.length !== 1) return null;
+    var k = e.key.toLowerCase();
+    if (k === SHEET_KEY) return 'sheet';
+    var acts = actionsFor(id);
+    for (var i = 0; i < acts.length; i++) if (acts[i].key === k) return acts[i];
+    return null;
+  }
+  // Bubble, on window: a scene or pop-up that used the key has called preventDefault by now.
+  function onKey(e) {
+    if (!shown() || inField(e.target) || busy()) return;
+    var hit = keyFor(character(), e);
+    if (!hit) return;
+    e.preventDefault();
+    if (hit === 'sheet') { if (sheet) closeSheet(true); else openSheet(); return; }
+    closeSheet(false);
+    run(hit);
+  }
+
+  function start() {
+    window.addEventListener('keydown', onKey);
+    // A scene whose script ran before this file left its registration here.
+    if (window.__visorScene && !scene) registerScene(window.__visorScene);
+    // The character and the credits settle when /me answers (craft-mode.js), after this file.
+    document.addEventListener('otbcraft:me', render);
+    document.addEventListener('otb:craft', render);
+    render();
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
+  else start();
+
+  window.OTBVisor = {
+    scene: registerScene,
+    render: render,
+    open: openSheet,
+    close: function () { closeSheet(true); },
+    isOpen: function () { return !!sheet; },
+    // pure parts, for the tests
+    ACTIONS: ACTIONS,
+    actionsFor: actionsFor,
+    keyFor: keyFor,
+    creditsText: creditsText,
+    character: character,
+  };
+})();