@polycode-projects/the-mechanical-code-talker 3.3.0 → 4.0.1

package/src/services/adventure-viz.mjs

@@ -33,7 +33,10 @@
 // ancestor walk, then floor), `roomSceneLayout` (the room split into a wall
 // band and floor stacks, over `roomSceneObjects` and `scenePlacement`),
 // `roomKindForRoom` (a room's border treatment, from its own rdf:type),
-// `carriedItems` (every object placed with the player), and `visitedRoomGraph`
+// `carriedItems` (every object placed with the player), `exitDoorways` (the
+// written ways out of one room, in compass order, each marked with whether
+// this session has walked it — what the room view's own door plates are
+// drawn from), and `visitedRoomGraph`
 // (a directions-only layout of the rooms a session has actually visited —
 // see its own header for the exposure discipline). None of these import
 // anything beyond this module's own exports, which is what keeps a raw
@@ -81,7 +84,7 @@
 // an edit implies run through the browser bundle's own `session.applyEdit`
 // (adventure-browser-entry.mjs), never here — this module only renders and
 // reads.
-import { THEME_TOKENS_CSS, SERIF_STACK, MONO_STACK, escapeHtml, embedJson, embedScriptText } from "./viz-theme.mjs";
+import { THEME_TOKENS_CSS, SERIF_STACK, MONO_STACK, escapeHtml, embedJson, embedScriptText, scenarioLabel } from "./viz-theme.mjs";
 import { createTicker } from "./viz-ticker.mjs";
 import { worldDigestRows, roomAffordances, foldWorldState } from "./adventure.mjs";
 import { exposedFacts } from "./adventure-autoplay.mjs";
@@ -109,22 +112,41 @@ export function spriteClassForObject(rows, subject) {
   return typeRow ? typeRow.object : "portable";
 }
 
-/** `rows` plus one synthetic rdfs:subClassOf edge from `subject`'s own name
- *  to its declared sprite class (spriteClassForObject's own result) — never
- *  written back to the corpus, just handed to sprite-templates.mjs's
- *  resolver so a NAMED object (`cabinet`, `butler`) can carry its own sprite
- *  template while an unauthored object of the same declared class still
- *  falls back through it cleanly. Ashcombe Hall's own objects have no
- *  rdfs:subClassOf chain of their own (each is directly typed, e.g. `cabinet
- *  rdf:type furniture`); this is the exact same ancestor-walk mechanism
- *  spider-fly's real poodle-IsA-dog taxonomy already exercises, just
- *  synthesized at render time for a world whose taxonomy doesn't reach this
- *  deep. A no-op when the subject's own name already IS its declared class
- *  (nothing to synthesize). Pure. */
+/** `rows` plus synthetic rdfs:subClassOf edges covering `subject`'s whole
+ *  class chain — never written back to the corpus, just handed to
+ *  sprite-templates.mjs's resolver so a NAMED object (`cabinet`, `butler`)
+ *  can carry its own sprite template while an unauthored object of the same
+ *  class still falls back cleanly, one ancestor at a time, to the nearest
+ *  ancestor that HAS a sprite. Two kinds of edge are synthesized: one from
+ *  the subject's own name to its declared sprite class
+ *  (spriteClassForObject's own result), and one mirroring every `rdf:type`
+ *  hop further up the chain. The mirroring is what makes the fallback reach
+ *  past the first hop: the resolver walks rdfs:subClassOf only, so a world
+ *  that writes `turnip rdf:type vegetable` would otherwise stop at `turnip`
+ *  and skip a perfectly good `vegetable` sprite. Ashcombe Hall's own objects
+ *  have no rdfs:subClassOf chain at all (each is directly typed, e.g.
+ *  `cabinet rdf:type furniture`); this is the same ancestor-walk mechanism
+ *  spider-fly's real poodle-IsA-dog taxonomy already exercises, synthesized
+ *  at render time for a world whose taxonomy doesn't reach that deep. Returns
+ *  `rows` itself when there is nothing to synthesize. Pure. */
 export function spriteAncestryRows(rows, subject) {
   const declaredClass = spriteClassForObject(rows, subject);
-  if (subject === declaredClass) return rows;
-  return [...(rows || []), { subject, predicate: "rdfs:subClassOf", object: declaredClass }];
+  const synthesized = [];
+  if (subject !== declaredClass) synthesized.push({ subject, predicate: "rdfs:subClassOf", object: declaredClass });
+  const seen = new Set([subject]);
+  const queue = [declaredClass];
+  while (queue.length) {
+    const node = queue.shift();
+    if (seen.has(node)) continue;
+    seen.add(node);
+    for (const row of rows || []) {
+      if (row.subject !== node || row.object === node) continue;
+      if (row.predicate === "rdf:type") synthesized.push({ subject: node, predicate: "rdfs:subClassOf", object: row.object });
+      else if (row.predicate !== "rdfs:subClassOf") continue;
+      queue.push(row.object);
+    }
+  }
+  return synthesized.length ? [...(rows || []), ...synthesized] : rows;
 }
 
 /** Every fact row belonging to `subject` — the small `{predicate, object}`
@@ -146,15 +168,21 @@ export function factsForSubject(rows, subject) {
  *  feeding it an exposure-filtered pair (as `goalStatusLines` does) is what
  *  keeps a not-yet-visited location unknown. Pure, self-contained — no
  *  reference to adventure.mjs's own private helpers, since those aren't
- *  exported. */
-export function visibleRoomOf(rows, state, subject) {
+ *  exported. `actingSubject` is the identity the world places as the
+ *  carrier/viewer — a parameter, not a baked-in name, the same way
+ *  adventure.mjs's own `runWorldCommand`/`roomAffordances` take it; it
+ *  defaults to "player" because that's the one identity Ashcombe Hall's own
+ *  world facts actually use, not because this function only ever means
+ *  that individual (mud-viz.mjs threads its own per-character viewer through
+ *  the same shape, see `mudRoomSceneObjects`/`carriedItemsFor`). */
+export function visibleRoomOf(rows, state, subject, actingSubject = "player") {
   const isRoom = (id) => (rows || []).some((r) => r.subject === id && r.predicate === "rdf:type" && r.object === "room");
   if (isRoom(subject)) return subject;
   const place = state.placements.get(subject);
   if (!place || place.predicate === "mgx:hidden-in") return null;
   if (place.predicate === "mgx:currently-in" || isRoom(place.object)) return place.object;
   const holder = place.object;
-  if (holder === "player") return null;
+  if (holder === actingSubject) return null;
   if (!state.openness.get(holder)?.open) return null;
   const holderPlace = state.placements.get(holder);
   return holderPlace && holderPlace.predicate !== "mgx:hidden-in" ? holderPlace.object : null;
@@ -163,13 +191,14 @@ export function visibleRoomOf(rows, state, subject) {
 /** Every subject actually visible in `here`, sorted, each with its sprite
  *  class — built over `visibleRoomOf` (one containment hop through an OPEN
  *  container) so this can never draw a hidden or carried object the text
- *  digest wouldn't also mention. `player` is excluded; the caller draws the
- *  player's own adventurer sprite separately. Pure. */
-export function roomSceneObjects(rows, state, here) {
+ *  digest wouldn't also mention. `actingSubject` is excluded (default
+ *  "player"); the caller draws that individual's own adventurer sprite
+ *  separately. Pure. */
+export function roomSceneObjects(rows, state, here, actingSubject = "player") {
   const out = [];
   for (const subject of [...state.placements.keys()].sort()) {
-    if (subject === "player") continue;
-    if (visibleRoomOf(rows, state, subject) !== here) continue;
+    if (subject === actingSubject) continue;
+    if (visibleRoomOf(rows, state, subject, actingSubject) !== here) continue;
     out.push({ subject, spriteClass: spriteClassForObject(rows, subject) });
   }
   return out;
@@ -307,13 +336,13 @@ export function roomKindForRoom(rows, roomId) {
   return "indoor";
 }
 
-/** Every object currently `mgx:located-in` "player", sorted, each with its
- *  sprite class — the exact placement `worldDigestRows`'/`inventoryAnswer`'s
- *  own "carries the" branch already reads, just returned as a plain list
- *  instead of prose. Pure. */
-export function carriedItems(rows, state) {
+/** Every object currently `mgx:located-in` `actingSubject` (default
+ *  "player"), sorted, each with its sprite class — the exact placement
+ *  `worldDigestRows`'/`inventoryAnswer`'s own "carries the" branch already
+ *  reads, just returned as a plain list instead of prose. Pure. */
+export function carriedItems(rows, state, actingSubject = "player") {
   return [...state.placements]
-    .filter(([, p]) => p.predicate === "mgx:located-in" && p.object === "player")
+    .filter(([, p]) => p.predicate === "mgx:located-in" && p.object === actingSubject)
     .map(([subject]) => ({ subject, spriteClass: spriteClassForObject(rows, subject) }))
     .sort((a, b) => a.subject.localeCompare(b.subject));
 }
@@ -333,10 +362,10 @@ export function carriedItems(rows, state) {
  *  Disconnected visited rooms (not reachable from each other by traveled
  *  edges) lay out as separate side-by-side blocks rather than overlapping.
  *  Pure. */
-export function visitedRoomGraph(state, visitedRoomIds) {
+export function visitedRoomGraph(state, visitedRoomIds, actingSubject = "player") {
   const DELTA = { north: [0, -1], south: [0, 1], east: [1, 0], west: [-1, 0], up: [0, -1], down: [0, 1] };
   const visited = new Set(visitedRoomIds || []);
-  const here = state.placements.get("player")?.object ?? null;
+  const here = state.placements.get(actingSubject)?.object ?? null;
   const positions = new Map();
   const edges = [];
   const edgeKeys = new Set();
@@ -415,6 +444,28 @@ export function goalStatusLines(rows, state, visitedRoomIds) {
   });
 }
 
+/** Every written way out of `here`, in a fixed compass order, each with the
+ *  room it leads to and whether this session has already walked there:
+ *  `[{ direction, target, walked }]`. Only exits the world actually writes
+ *  appear, so a doorway drawn from this list can never offer a `go` the
+ *  engine would then refuse. `walked` reads the SAME visited set the manor
+ *  map and the goal lines already do — the rooms the player has stood in, so
+ *  marking a door as new tells them nothing they haven't earned. Ashcombe
+ *  Hall teaches no `dig` action family, so unlike the burrow's own compass
+ *  ring there is no second kind of way out to draw. Pure and
+ *  `.toString()`-splice-safe. */
+export function exitDoorways(state, here, visitedRoomIds) {
+  const compass = ["north", "east", "south", "west", "up", "down"];
+  const walked = new Set(visitedRoomIds || []);
+  const exits = state.exits.get(here);
+  if (!exits) return [];
+  return compass.filter((direction) => exits.has(direction)).map((direction) => ({
+    direction,
+    target: exits.get(direction),
+    walked: walked.has(exits.get(direction)),
+  }));
+}
+
 /** The clickable command suggestions for the room the player is CURRENTLY
  *  in — a thin, testable wrapper over adventure.mjs's own `roomAffordances`
  *  (the exact same data take/open/talk/examine already check), so a pill can
@@ -514,12 +565,16 @@ export function roomCaptionText(rows, state, here) {
 export function renderAdventureHtml({
   title = DEFAULT_TITLE,
   worldPayload = { facts: [], rules: [], opening: "" },
+  scenarios = [],
   spriteTemplates = [],
   largeSpriteTemplates = [],
   engineBundleJs = "",
 } = {}) {
+  const scenarioList = scenarios.length
+    ? scenarios
+    : [{ label: scenarioLabel(worldPayload?.name), worldPayload }];
   const pageData = embedJson({
-    world: worldPayload,
+    scenarios: scenarioList,
     previewMaxTicks: PREVIEW_MAX_TICKS,
     tickWaitMs: TICK_WAIT_MS,
     spriteTemplates,
@@ -667,10 +722,72 @@ ${THEME_TOKENS_CSS}
      falls back through room's own ancestor chain to the generic room icon).
      Rendered at 120px — twice a room-object sprite's own 60px frame
      (.sprite-frame below) — so the room itself reads as the biggest thing
-     drawn in its own scene. */
-  .room-kind-icon { position: absolute; top: .5rem; right: .6rem; width: 120px; height: 120px; opacity: .92; }
+     drawn in its own scene. It takes the wall's own brass rather than the
+     page ink: at that size an ink-black icon out-shouts every person and
+     prop standing in front of it, and this is a mark ON the wall, not
+     another thing in the room. */
+  .room-kind-icon { position: absolute; top: .5rem; right: .6rem; width: 120px; height: 120px; color: var(--gilt); opacity: .5; }
   .room-kind-icon svg { width: 100%; height: 100%; display: block; }
   .room-kind-icon:empty { display: none; }
+  /* the doorways — every written way out drawn where it actually points,
+     as a brass door plate set into the wall it leads through. The plate
+     borrows the room plaque's own treatment above (parchment ground, gilt
+     rule, inset mat): a manor has one brass vocabulary, and a door plate and
+     a room plate are the same object. North and south sit in a band OUTSIDE
+     the frame so neither fights the plaque or the room-kind icon; west and
+     east sit just inside their own walls. Stairs get a round chip instead —
+     neither up nor down is a compass point, and neither hangs on a wall. */
+  .room-stage { position: relative; padding: 1.85rem 0; }
+  /* the "ways out" eyebrow — this ring is the ONLY place movement controls
+     exist on the page (the pill row deliberately drops every "go", see
+     renderPills), so a first-time player needs a named affordance here, not
+     just brass plates they have to guess at. */
+  .ways-out-label {
+    font-family: ${MONO_STACK}; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
+    color: var(--gilt); opacity: .85; margin: 0 0 -.3rem .1rem;
+  }
+  .dir-ring { position: absolute; inset: 0; pointer-events: none; }
+  .dir-slot { position: absolute; pointer-events: auto; }
+  .dir-north { top: 0; left: 50%; transform: translateX(-50%); }
+  .dir-south { bottom: 0; left: 50%; transform: translateX(-50%); }
+  .dir-west { left: .4rem; top: 50%; transform: translateY(-50%); }
+  .dir-east { right: .4rem; top: 50%; transform: translateY(-50%); }
+  /* the stairs stand at the left of each band: the frame's own corner
+     flourishes sit top-left and bottom-right, and this is the one inset that
+     clears both. */
+  .dir-up { top: 0; left: 1.5rem; }
+  .dir-down { bottom: 0; left: 1.5rem; }
+  /* a brass PUSH-plate, not a name plate: real button chrome (an outer drop
+     shadow, not just the inset highlight the static room/door plaques use),
+     a bigger touch target, and a lift on hover/press — so this reads as
+     clickable at a glance instead of blending into the wallpaper the way a
+     plain brass label would. The leading triangle is a direction-neutral
+     "go" cue, the same role an arrow plays on any door-push icon. */
+  .dir-door {
+    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
+    font-family: ${MONO_STACK}; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
+    color: var(--gilt); background: var(--parchment); border: 1px solid var(--gilt); border-radius: 3px;
+    box-shadow: inset 0 0 0 2px var(--parchment-strong), 0 2px 4px rgba(0, 0, 0, .25);
+    padding: .5rem .95rem; white-space: nowrap;
+    transition: transform .08s ease, box-shadow .08s ease, background .08s ease, color .08s ease;
+  }
+  .dir-door::before { content: "\\25B8"; font-size: .62em; opacity: .9; }
+  .dir-door:hover, .dir-door:focus-visible {
+    background: var(--gilt); color: var(--parchment);
+    box-shadow: inset 0 0 0 2px var(--parchment-strong), 0 4px 7px rgba(0, 0, 0, .32);
+    transform: translateY(-1.5px);
+  }
+  .dir-door:active {
+    transform: translateY(0);
+    box-shadow: inset 0 0 0 2px var(--parchment-strong), 0 1px 2px rgba(0, 0, 0, .28);
+  }
+  .dir-door.stair { border-radius: 50%; width: 2.15rem; height: 2.15rem; padding: 0; font-size: .86rem; letter-spacing: 0; }
+  .dir-door.stair::before { content: ""; }
+  /* a door onto a room this session has not stood in yet, marked with the
+     same gilt dot the manor board prints for a direction it cannot draw a
+     room for — one hint shape, two surfaces. */
+  .dir-door .unwalked { position: absolute; top: -.2rem; right: -.2rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gilt); border: 1px solid var(--parchment); }
+
   .sprite-row { display: flex; align-items: flex-end; gap: .9rem .7rem; min-height: 2.5rem; }
   /* the floor band: every non-wall-mounted stack, wrapping and pinned to the
      left edge of the room, as the flat sprite row always has. */
@@ -849,6 +966,9 @@ ${THEME_TOKENS_CSS}
   .controls-row button { font-family: ${MONO_STACK}; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; padding: .38rem .85rem; border: 1px solid var(--gilt); background: var(--parchment); color: var(--ink); }
   .controls-row button:hover:not(:disabled) { background: var(--parchment-strong); }
   .controls-row button:disabled { opacity: .4; cursor: default; }
+  .controls-row select { font-family: ${MONO_STACK}; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; padding: .38rem .85rem; border: 1px solid var(--gilt); background: var(--parchment); color: var(--ink); }
+  .controls-row select:hover:not(:disabled) { background: var(--parchment-strong); }
+  .controls-row select:disabled { opacity: .4; cursor: default; }
   .controls-row .turn { margin-left: auto; font-family: ${MONO_STACK}; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--parchment); border: 1px solid var(--gilt); padding: .3rem .6rem; font-variant-numeric: tabular-nums; }
   .goal-line { font-family: ${MONO_STACK}; font-size: .78rem; color: var(--muted); margin-top: .5rem; }
   .status { font-family: ${MONO_STACK}; font-size: .74rem; color: var(--muted); margin-top: .3rem; }
@@ -874,6 +994,10 @@ ${THEME_TOKENS_CSS}
   #legendList { display: flex; flex-wrap: wrap; gap: .5rem .3rem; }
 
   body.preview .side, body.preview .stage-left > .panel, body.preview .controls-row, body.preview .status { display: none; }
+  /* the hero iframe is a picture of a room, not a control surface — every
+     other control is hidden there, and the doorways go with them. */
+  body.preview .room-stage { padding: 0; }
+  body.preview .dir-ring { display: none; }
   body.preview main { padding: 0; max-width: none; }
   body.preview .stage { display: block; }
   body.preview .eyebrow, body.preview .mode-toggle, body.preview #editStage, body.preview .page-note { display: none; }
@@ -885,11 +1009,14 @@ ${THEME_TOKENS_CSS}
     <div class="eyebrow">tmct &middot; the adventure</div>
     <button id="editModeBtn" type="button" class="mode-toggle" disabled>edit the world</button>
   </div>
-  <p class="page-note">${escapeHtml(worldPayload.opening)}</p>
+  <p class="page-note" id="pageNote">${escapeHtml(scenarioList[0].worldPayload.opening || "")}</p>
   <div class="stage" id="playStage">
     <div class="stage-left">
       <div class="controls-row" id="playControls">
         <button id="resetBtn" type="button" disabled>reset</button>
+${scenarioList.length > 1 ? `        <select id="scenarioSelect" aria-label="which world to play" disabled>
+${scenarioList.map((s, i) => `          <option value="${i}"${i === 0 ? " selected" : ""}>${escapeHtml(s.label || scenarioLabel(s.worldPayload?.name))}</option>`).join("\n")}
+        </select>` : ""}
         <button id="playBtn" type="button" disabled>&#9654; play</button>
         <button id="stepBtn" type="button" disabled>step</button>
         <span class="turn mono" id="turnLabel">turn: 0</span>
@@ -904,13 +1031,24 @@ ${THEME_TOKENS_CSS}
         <h2>satchel</h2>
         <div class="chips" id="carryList"></div>
       </div>
-      <div class="room-frame" id="roomFrame">
-        <div class="room-plaque mono" id="roomName"></div>
-        <div class="room-kind-icon" id="roomKindIcon"></div>
-        <div class="wall-row" id="wallRow"></div>
-        <div class="sprite-row" id="spriteRow">
-          <div class="floor-row" id="floorRow"></div>
-          <div class="you-slot" id="youSlot"></div>
+      <div class="ways-out-label" aria-hidden="true">ways out</div>
+      <div class="room-stage">
+        <div class="room-frame" id="roomFrame">
+          <div class="room-plaque mono" id="roomName"></div>
+          <div class="room-kind-icon" id="roomKindIcon"></div>
+          <div class="wall-row" id="wallRow"></div>
+          <div class="sprite-row" id="spriteRow">
+            <div class="floor-row" id="floorRow"></div>
+            <div class="you-slot" id="youSlot"></div>
+          </div>
+        </div>
+        <div class="dir-ring" id="dirRing" aria-label="the ways out of this room">
+          <div class="dir-slot dir-north" id="dir-north"></div>
+          <div class="dir-slot dir-east" id="dir-east"></div>
+          <div class="dir-slot dir-south" id="dir-south"></div>
+          <div class="dir-slot dir-west" id="dir-west"></div>
+          <div class="dir-slot dir-up" id="dir-up"></div>
+          <div class="dir-slot dir-down" id="dir-down"></div>
         </div>
       </div>
       <div class="panel command">
@@ -995,15 +1133,23 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   const visitedRoomGraph = ${visitedRoomGraph.toString()};
   const allRoomIds = ${allRoomIds.toString()};
   const groundedPlaceholder = ${groundedPlaceholder.toString()};
+  const exitDoorways = ${exitDoorways.toString()};
   const spriteAncestryRows = ${spriteAncestryRows.toString()};
   const factsForSubject = ${factsForSubject.toString()};
   const renderWorldEditorText = ${renderWorldEditorText.toString()};
   const wordBeforeCursor = ${wordBeforeCursor.toString()};
   const esc = ${escapeHtml.toString()};
+  // The identity Ashcombe Hall's own world facts place as the carrier/viewer
+  // — one named constant standing in for what was six separate "player"
+  // string literals scattered through the room/inventory/map drawing calls
+  // below, so a future scenario shipping a differently-named single
+  // character never falls out of step with the calls that use it.
+  const ACTING_SUBJECT = "player";
   const el = (id) => document.getElementById(id);
   const roomFrameEl = el("roomFrame");
   const roomNameEl = el("roomName");
   const roomKindIconEl = el("roomKindIcon");
+  const dirRingEl = el("dirRing");
   const wallRowEl = el("wallRow");
   const floorRowEl = el("floorRow");
   const youSlotEl = el("youSlot");
@@ -1042,6 +1188,15 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   const roomDetailSpritesEl = el("roomDetailSprites");
   const roomDetailCaptionEl = el("roomDetailCaption");
   const legendListEl = el("legendList");
+  const scenarioSelectEl = el("scenarioSelect");
+  const pageNoteEl = el("pageNote");
+
+  // Which of the shipped worlds is loaded. Every read of the world — the
+  // session it is opened over, its opening line, the provenance prefix edit
+  // mode filters on, the key its progress is saved under — goes through this
+  // one index, so picking another world needs no second copy of any of them.
+  let worldIndex = 0;
+  const world = () => ADVENTURE.scenarios[worldIndex].worldPayload;
 
   const params = new URLSearchParams(location.search);
   const preview = params.get("preview") === "1";
@@ -1171,12 +1326,12 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   // holding it has actually been visited this session.
   function goalStatusLinesFor(rows, state, visitedRoomIds) {
     const ids = Array.from(new Set(rows.filter((r) => r.predicate === "mgx:is-objective" && r.object === "true").map((r) => r.subject)));
-    const carriedIds = new Set(carriedItems(rows, state).map((o) => o.subject));
+    const carriedIds = new Set(carriedItems(rows, state, ACTING_SUBJECT).map((o) => o.subject));
     const exposedRows = tmctAdventure.exposedFacts(rows, visitedRoomIds);
     const exposedState = tmctAdventure.foldWorldState(exposedRows);
     return ids.map((id) => {
       if (carriedIds.has(id)) return { subject: id, status: "carried", text: "carrying the " + id + " \\u2014 the adventure is won." };
-      const room = visibleRoomOf(exposedRows, exposedState, id);
+      const room = visibleRoomOf(exposedRows, exposedState, id, ACTING_SUBJECT);
       return room
         ? { subject: id, status: "known", text: "last known: the " + id + " is in the " + room + "." }
         : { subject: id, status: "unknown", text: "there's a sought-after " + id + " somewhere." };
@@ -1187,7 +1342,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   // the same non-interactive chip shape the room's own pills use for
   // actions, so the sidebar reads as one visual family.
   function renderCarrying(rows, state) {
-    const items = carriedItems(rows, state);
+    const items = carriedItems(rows, state, ACTING_SUBJECT);
     carryListEl.innerHTML = items.length
       ? items.map((o) => '<span class="chip">' + esc(o.subject) + "</span>").join("")
       : '<span class="empty-note">nothing yet</span>';
@@ -1232,7 +1387,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
       + edgesSvg + hintsSvg + nodesSvg + "</svg>";
   }
   function renderRoomMap(rows, state, visitedRoomIds) {
-    mapWrapEl.innerHTML = roomMapSvg(visitedRoomGraph(state, visitedRoomIds), false) || '<span class="empty-note">nowhere yet</span>';
+    mapWrapEl.innerHTML = roomMapSvg(visitedRoomGraph(state, visitedRoomIds, ACTING_SUBJECT), false) || '<span class="empty-note">nowhere yet</span>';
   }
 
   // ---- the map lightbox — clicking the fixed-square play-mode map redraws
@@ -1240,7 +1395,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   // backdrop (not the board itself) or pressing Escape closes it.
   function openMapLightbox() {
     if (!lastSnapshot) return;
-    const svg = roomMapSvg(visitedRoomGraph(lastSnapshot.state, lastSnapshot.visitedRoomIds), false);
+    const svg = roomMapSvg(visitedRoomGraph(lastSnapshot.state, lastSnapshot.visitedRoomIds, ACTING_SUBJECT), false);
     if (!svg) return;
     mapLightboxInnerEl.innerHTML = svg;
     mapLightboxEl.hidden = false;
@@ -1348,7 +1503,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   document.addEventListener("keydown", (e) => { if (e.key === "Escape" && !objLightboxEl.hidden) closeObjectLightbox(); });
 
   function renderEditMap(rows, state) {
-    editMapWrapEl.innerHTML = roomMapSvg(visitedRoomGraph(state, allRoomIds(rows)), true) || '<span class="empty-note">this world defines no rooms</span>';
+    editMapWrapEl.innerHTML = roomMapSvg(visitedRoomGraph(state, allRoomIds(rows), ACTING_SUBJECT), true) || '<span class="empty-note">this world defines no rooms</span>';
   }
   editMapWrapEl.addEventListener("click", (e) => {
     const g = e.target.closest("[data-room]");
@@ -1386,11 +1541,16 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   // Clicking one inserts its exact command text into the input and focuses
   // it; it never auto-submits, so free typing still works and a clicked
   // suggestion can still be edited first.
+  //
+  // The row shows what to do with the things IN the room; the doorways above
+  // own every way OUT of it. A "go" command is the one affordance no player
+  // ever wants to edit before running, and drawing it in both places would
+  // make one control a suggestion and its twin an action.
   function pillsFor(rows, state, here) {
     return tmctAdventure.roomAffordances(rows, state, here);
   }
   function renderPills(rows, state, here) {
-    const actions = pillsFor(rows, state, here);
+    const actions = pillsFor(rows, state, here).filter((a) => a.indexOf("go ") !== 0);
     pillsEl.innerHTML = actions.map((a) => '<button type="button" class="pill">' + esc(a) + "</button>").join("");
     // The empty input teaches the grounded noun form off the same affordance
     // list the pills read — real props from THIS room, so a first-time player
@@ -1422,11 +1582,19 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   // stay keyed on that declared class unchanged. The player's own "you" row
   // has no backing fact row, so it resolves directly by its fixed
   // "adventurer" class with no ancestry/property rows to check.
+  //
+  // When the whole chain misses, the root the resolver lands on is chosen by
+  // what KIND of thing the class is, never the resolver's own "animal"
+  // default: an unknown prop in a manor should read as a plain parcel and an
+  // unknown character as a figure, and neither should ever draw a creature.
+  const ROOT_FALLBACK_BY_CLASS = { adventurer: "person", person: "person", room: "room" };
+  const rootFallbackFor = (cls) => ROOT_FALLBACK_BY_CLASS[cls] || "portable";
   function resolveObjectSprite(rows, s) {
-    if (s.subject === "you") return tmctAdventure.resolveSpriteAsset("adventurer", [], [], activeSpriteTemplates, tmctAdventure.SPRITE_REGISTRY, { instanceKey: "you" });
+    if (s.subject === "you") return tmctAdventure.resolveSpriteAsset("adventurer", [], [], activeSpriteTemplates, tmctAdventure.SPRITE_REGISTRY, { rootFallback: "person", instanceKey: "you" });
     return tmctAdventure.resolveSpriteAsset(
       s.subject, spriteAncestryRows(rows, s.subject), factsForSubject(rows, s.subject),
-      activeSpriteTemplates, tmctAdventure.SPRITE_REGISTRY, { instanceKey: s.subject },
+      activeSpriteTemplates, tmctAdventure.SPRITE_REGISTRY,
+      { rootFallback: rootFallbackFor(s.spriteClass), instanceKey: s.subject },
     );
   }
 
@@ -1438,10 +1606,38 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   function roomKindIconSvg(rows, here) {
     return tmctAdventure.resolveSpriteAsset(
       here, spriteAncestryRows(rows, here), factsForSubject(rows, here),
-      activeSpriteTemplates, tmctAdventure.SPRITE_REGISTRY, { instanceKey: "roomkind-" + here },
+      activeSpriteTemplates, tmctAdventure.SPRITE_REGISTRY,
+      { rootFallback: "room", instanceKey: "roomkind-" + here },
     );
   }
 
+  // ---- the doorways — one brass plate per written exit, in the slot that
+  // exit actually points at, drawn from exitDoorways over the SAME snapshot
+  // the room scene reads. A direction the world writes no exit for draws
+  // nothing at all, so the ring never offers a "go" the engine would refuse.
+  const STAIR_GLYPH = { up: "\\u2191", down: "\\u2193" };
+  function renderDoorways(state, here, visitedRoomIds) {
+    const bySlot = {};
+    exitDoorways(state, here, visitedRoomIds).forEach((d) => { bySlot[d.direction] = d; });
+    for (const direction of ["north", "east", "south", "west", "up", "down"]) {
+      const slot = el("dir-" + direction);
+      const doorway = bySlot[direction];
+      if (!doorway) { slot.innerHTML = ""; continue; }
+      const stair = direction === "up" || direction === "down";
+      const label = "go " + direction + (doorway.walked ? "" : " (not walked yet)");
+      slot.innerHTML = '<button type="button" class="dir-door' + (stair ? " stair" : "") + '"'
+        + ' data-direction="' + esc(direction) + '" title="' + esc(label) + '" aria-label="' + esc(label) + '">'
+        + (stair ? STAIR_GLYPH[direction] : esc(direction))
+        + (doorway.walked ? "" : '<span class="unwalked" aria-hidden="true"></span>') + "</button>";
+    }
+  }
+  // A door is not a suggestion to edit — clicking one walks through it.
+  dirRingEl.addEventListener("click", (e) => {
+    const btn = e.target.closest(".dir-door");
+    if (!btn || !session) return;
+    runTurn("go " + btn.getAttribute("data-direction"));
+  });
+
   function redraw(snap) {
     lastSnapshot = snap;
     const layout = roomSceneLayout(snap.rows, snap.state, snap.here);
@@ -1460,27 +1656,34 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
     captionEl.textContent = captionFor(snap.rows, snap.state, snap.here);
     turnLabelEl.textContent = "turn: " + snap.turn;
     renderPills(snap.rows, snap.state, snap.here);
+    renderDoorways(snap.state, snap.here, snap.visitedRoomIds);
     renderCarrying(snap.rows, snap.state);
     renderRoomMap(snap.rows, snap.state, snap.visitedRoomIds);
     renderGoals(snap.rows, snap.state, snap.visitedRoomIds);
     schedulePersistSave();
   }
 
-  chatformEl.addEventListener("submit", (e) => {
-    e.preventDefault();
-    const q = chatqEl.value.trim();
-    if (!q || !session) return;
-    chatqEl.value = "";
-    // A manual command lands mid-tick otherwise — pause first, and stay
-    // paused until the visitor presses play again.
+  // Every command a visitor issues by hand — typed, or walked through a
+  // doorway — runs here, so the transcript, the pause and the redraw are the
+  // same for both. A manual command lands mid-tick otherwise, so this pauses
+  // first, and stays paused until the visitor presses play again.
+  function runTurn(line) {
     ticker.pause();
-    addChatLine("u", esc(q));
-    withLock(async () => {
-      const result = await session.turn(q);
+    addChatLine("u", esc(line));
+    return withLock(async () => {
+      const result = await session.turn(line);
       addChatLine("a", esc(result.answer).replace(/\\n/g, "<br>"));
       const snap = await session.snapshot();
       redraw(snap);
     });
+  }
+
+  chatformEl.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const q = chatqEl.value.trim();
+    if (!q || !session) return;
+    chatqEl.value = "";
+    runTurn(q);
   });
 
   // ---- edit mode ---------------------------------------------------------
@@ -1498,7 +1701,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   // diff + write; this page only ever reads its result back.
 
   function worldOnlyRows(rows) {
-    const prefix = "world:" + ADVENTURE.world.name;
+    const prefix = "world:" + world().name;
     return (rows || []).filter((r) => typeof r.provenance === "string" && r.provenance.indexOf(prefix) === 0);
   }
 
@@ -1512,7 +1715,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
     }
     roomDetailPanelEl.setAttribute("data-room-kind", roomKindForRoom(editRows, selectedRoomId));
     roomDetailTitleEl.textContent = selectedRoomId;
-    const objects = roomSceneObjects(editRows, editState, selectedRoomId);
+    const objects = roomSceneObjects(editRows, editState, selectedRoomId, ACTING_SUBJECT);
     roomDetailSpritesEl.innerHTML = objects.length
       ? objects.map((o) => spriteCardHtml(o.subject, o.spriteClass, resolveObjectSprite(editRows, o))).join("")
       : '<span class="empty-note">nothing placed here yet</span>';
@@ -1522,12 +1725,20 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   // ---- legend — every known object/character class this world actually
   // uses, by its real icon. Scoped to worldOnlyRows so the background
   // corpus's own (unrelated) rdf:type vocabulary never floods the list.
+  // Each class resolves through the SAME ancestry walk and kind-aware root
+  // the room's own cards use, so a class an edited world invents climbs to
+  // the nearest ancestor that has a picture instead of dropping straight to
+  // a generic one.
   function renderLegend(rows) {
     const subjects = new Set(rows.filter((r) => r.predicate === "rdf:type").map((r) => r.subject));
     const classes = new Set(["adventurer"]);
-    subjects.forEach((s) => { if (s !== "player") classes.add(spriteClassForObject(rows, s)); });
+    subjects.forEach((s) => { if (s !== ACTING_SUBJECT) classes.add(spriteClassForObject(rows, s)); });
     legendListEl.innerHTML = Array.from(classes).sort().map((cls) => {
-      const svg = tmctAdventure.resolveSpriteAsset(cls, [], [], activeSpriteTemplates, tmctAdventure.SPRITE_REGISTRY, { instanceKey: "legend-" + cls });
+      const svg = tmctAdventure.resolveSpriteAsset(
+        cls, spriteAncestryRows(rows, cls), factsForSubject(rows, cls),
+        activeSpriteTemplates, tmctAdventure.SPRITE_REGISTRY,
+        { rootFallback: rootFallbackFor(cls), instanceKey: "legend-" + cls },
+      );
       return spriteCardHtml(cls, cls, svg);
     }).join("");
   }
@@ -1639,7 +1850,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   async function boot({ fresh = false } = {}) {
     const saved = !fresh && persist ? await persist.load() : null;
     session = await tmctAdventure.createAdventureSession(
-      ADVENTURE.world,
+      world(),
       saved && saved.payload && saved.payload.memoryPayload
         ? { restoredPayload: saved.payload.memoryPayload, restoredVisitedRoomIds: saved.payload.visitedRoomIds }
         : {},
@@ -1650,12 +1861,14 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
     goalLineEl.textContent = "";
     chatlogEl.innerHTML = "";
     statusEl.textContent = "";
-    addChatLine("t", esc(ADVENTURE.world.opening || "the adventure begins."));
+    if (pageNoteEl) pageNoteEl.textContent = world().opening || "";
+    addChatLine("t", esc(world().opening || "the adventure begins."));
     if (saved && snap.turn > 0) {
       addChatLine("t", "resumed where you left off (turn " + snap.turn + ") \\u2014 progress kept best-effort on this device; reset starts the manor over.");
     }
     chatqEl.disabled = false;
     resetBtn.disabled = false; playBtn.disabled = false; stepBtn.disabled = false; editModeBtn.disabled = false;
+    if (scenarioSelectEl) scenarioSelectEl.disabled = false;
   }
 
   const ticker = createTicker({
@@ -1690,11 +1903,34 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   stepBtn.addEventListener("click", () => ticker.stepOnce());
   resetBtn.addEventListener("click", () => ticker.reset());
 
+  // Each world keeps its own saved progress, so the stamp carries the world's
+  // name and a switch opens the store belonging to the world being switched
+  // to. Without that, one world's snapshot would restore into another's graph.
+  let siteVersion = "";
+  async function openPersistFor(worldName) {
+    if (preview || !tmctAdventure.openPersistedStore) return;
+    if (!siteVersion) siteVersion = await fetchSiteVersion();
+    persist = tmctAdventure.openPersistedStore({ storeKey: "adventure", stamp: siteVersion + ":" + worldName });
+  }
+
+  if (scenarioSelectEl) {
+    scenarioSelectEl.addEventListener("change", () => withLock(async () => {
+      const picked = Number(scenarioSelectEl.value);
+      if (!ADVENTURE.scenarios[picked] || picked === worldIndex) return;
+      ticker.pause();
+      // The pending save belongs to the world being left, and it is about to
+      // be written under the world being opened. Cancel it rather than let it
+      // land in the wrong store.
+      clearTimeout(persistSaveTimer);
+      persistSaveTimer = null;
+      worldIndex = picked;
+      await openPersistFor(world().name);
+      await boot();
+    }));
+  }
+
   (async () => {
-    if (!preview && tmctAdventure.openPersistedStore) {
-      const siteVersion = await fetchSiteVersion();
-      persist = tmctAdventure.openPersistedStore({ storeKey: "adventure", stamp: siteVersion + ":" + ADVENTURE.world.name });
-    }
+    await openPersistFor(world().name);
     await boot();
     if (preview) ticker.play();
   })();