@runmu.sh/ext-scene 1.0.3 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.1.0
+
+- Present now comes before Exits, and a room with no exits shows no Exits heading at all, as on Underspire.
+- The Scene adds itself the first time a session knows its room, however the game sends it (GMCP, MSDP or another extension), not only on GMCP Room messages. A new **Show panel** setting per world (off / auto / on) controls it.
+- Someone arriving or an item dropping no longer scrolls the panel back to the top; moving to another room still does.
+- Right-click or long-press an exit or a room item for the actions other extensions offer on them.
+- Exit buttons are at least 24px tall and show the standard focus ring.
+- Needs μClient with extension API 1.12. It no longer asks to read game output; it only sends the exits you click.
+
 ## 1.0.3
 
 - No longer bundled with μClient: `builtin` and `defaultEnabled` are gone from the manifest. Install Scene from Extensions → Discover like any other extension. The panel is unchanged.

package/README.md

@@ -1,8 +1,8 @@
 # Scene (`@runmu.sh/ext-scene`, id `scene`)
 
-The Scene panel of [μClient](https://runmu.sh) (R-SCENE): the room you are in, its exits and who is there.
+The Scene panel of [μClient](https://runmu.sh): the room you are in, who is there and its exits.
 
-First-party, on the [marketplace](https://runmu.sh/marketplace/x/scene). Install it from **☰ → Extensions → Discover**; once installed it is on in every world and takes the Scene slot of the default layout (right top). Turn it off per world in **Extensions → Installed**.
+First-party, on the [marketplace](https://runmu.sh/marketplace/x/scene). Install it from **☰ → Extensions → Discover**; once installed it is on in every world and adds itself (right top) the first time a session knows its room. Turn it off per world in **Extensions → Installed**.
 
 Until 2026-09-29 the panel was part of the client core, and until 1.0.3 it was bundled with the client. The core still tracks the room for every session; this extension only draws it.
 
@@ -20,17 +20,31 @@ The host keeps one scene per session and fills it from:
 Package names are case-insensitive. Entering a new room clears Present. The room title is also the session's location (the world switcher shows it).
 
 ## What it looks like
-On `--bg-elev`: the title in uppercase `--accent-bright` with a glow and a `--border-bright` rule under it, the area in small faint capitals, the atmosphere in italic `--fg-dim`, the description, and the pose line in italic with a 2px left rule. Then `┤EXITS├` and `┤PRESENT├` section heads (gold, the host's `.sec-head`) over `▸` lists. Each exit is a button: clicking it sends the direction as if typed. A hostile item carries a small `hostile` tag in `--alert`. An empty list says `none`, and before any room arrives the panel says NO ROOM YET (an upright, uppercase, tracked faint label).
+On `--bg-elev`: the title in uppercase `--accent-bright` with a glow and a `--border-bright` rule under it, the area in small faint capitals, the atmosphere in italic `--fg-dim`, the description, and the pose line in italic with a 2px left rule. Then `┤PRESENT├` over a `▸` list of the people and room items present (a hostile item carries a small `hostile` tag in `--alert`; nobody reads `none`), and, when the room has exits, `┤EXITS├` over a `▸` list. Each exit is a button: clicking it sends the direction as if typed. Before any room arrives the panel says NO ROOM YET (an upright, uppercase, tracked faint label).
 
 The panel is the region `scene`, so **Alt+R** (*Go to scene*) focuses it.
 
 ## Behaviour
 - Panel `scene`, singleton, default position right top, Views order 10 (after Terminal, before Channels).
-- The first `Room.*` package of a session adds the panel if it is not open (R-AUTO-PANELS), once per world on this device, so a Scene you closed stays closed.
-- It sends nothing to the game except the exits you click. It adds no `Core.Supports` of its own (the backend's base set already has `Room 1`).
+- **Show panel: auto** (per world, on the extension's settings page: off / auto / on). On auto the Scene joins Views and adds itself the first time a session knows its room, whatever the room came from (GMCP, MSDP, another extension); once per world on this device, so a Scene you closed stays closed.
+- A redraw in the same room (someone arrives, an item drops) keeps your scroll position; moving to another room scrolls back to the top. When the game sends no room id, every update counts as a move.
+- Right-click (or long-press) an exit or a room item for the menus other extensions add to them (`scene-exit` and `scene-item` targets).
+- It sends nothing to the game except the exits you click, and reads no GMCP itself: the room adapters fill the scene.
+
+## Contract
+The extension reads no GMCP and sends none, so it declares no GMCP packages or payload contracts; the room adapters declare `Room 1` and feed `mu.scene` (`SceneView`). Capability: `send-commands` (the exit buttons).
+
+## Exported API (`@runmu.sh/ext-scene`, types in `src/types.ts`)
+No `ctx.exports` API. The module exports, for tests and other renderers:
+
+| Export | |
+|---|---|
+| `renderScene(scene, go, opts?)` | The panel's children for one `SceneView` (`null` or `known: false` → NO ROOM YET). `go(dir)` is called on an exit click. `opts.css` passes the host classes (`mu.ui.css`), `opts.target(el, what)` is called for each exit button and present row (to mark context targets). The 1.0 two-argument form still works. |
+| `presentOf(scene)` | People first, then room items, each name once: `{ name, hostile? }[]`. |
+| `COPY`, `SCENE_CSS` | The drawn copy and the stylesheet (every rule under `.ext-panel[data-ext="scene"] .mu-scene`). |
 
 ## SDK
-Uses `mu.panels.register` (with `order`, SDK 1.4), `mu.scene.watch` (SDK 1.4), `mu.sessions.send`, `mu.gmcp.on`, `mu.panels.autoAdd` and `mu.ui.style`. It exports no API. `renderScene` and `presentOf` are exported for tests.
+SDK 1.12: `mu.panels.register` with `show: 'auto'`, `mu.panels.touch`, `mu.sessions.each`, `mu.scene.watch` (and `SceneView.id`), `mu.sessions.send(dir, { sid })`, `mu.menus.target`, `h` and `mu.ui.css`, `mu.ui.style`.
 
 ## Develop
 Made with `npm create @runmu.sh/extension` ([the quickstart](https://runmu.sh/docs/extensions/quickstart)).
@@ -39,6 +53,7 @@ Made with `npm create @runmu.sh/extension` ([the quickstart](https://runmu.sh/do
 npm install
 npm run build        # src/index.ts → dist/index.js, then the manifest check
 npm run typecheck    # against @muclient/sdk (npm:@runmu.sh/sdk)
+npm test             # the headless host (@runmu.sh/dev/test) with happy-dom
 npm run dev          # dev server on http://localhost:5199/ with hot reload
 ```
 

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-import { defineExtension } from "@muclient/sdk";
+import { defineExtension, h } from "@muclient/sdk";
 var COPY = {
   title: "Scene",
   awaiting: "No room yet",
@@ -9,98 +9,128 @@ var COPY = {
   hostile: "hostile",
   go: (dir) => `go ${dir}`
 };
+var R = '.ext-panel[data-ext="scene"] .mu-scene';
 var SCENE_CSS = `
-.mu-scene { height: 100%; overflow-y: auto; background: var(--bg-elev); padding: .7rem .85rem 1rem; font-size: .9rem; color: var(--fg); box-sizing: border-box; }
-.mu-scene:focus { outline: none; }
-.mu-scene .title { margin: 0 0 .5rem; padding-bottom: .4rem; font-weight: 400; font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-bright); border-bottom: 1px solid var(--border-bright); }
-.mu-scene .area { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); margin: -.2rem 0 .4rem; }
-.mu-scene .atmo { color: var(--fg-dim); font-style: italic; margin: 0 0 .4rem; }
-.mu-scene .desc { margin: 0 0 .4rem; white-space: pre-wrap; }
-.mu-scene .pose { color: var(--fg-dim); font-style: italic; margin: 0 0 .5rem; padding-left: .5rem; border-left: 2px solid var(--border-bright); }
-.mu-scene .list { list-style: none; margin: 0; padding: 0; }
-.mu-scene .list li { padding: .08rem 0; color: var(--fg); }
-.mu-scene .sigil { color: var(--accent); margin-right: .6ch; }
-.mu-scene .exit { color: inherit; text-align: left; transition: color .12s ease; }
-.mu-scene .exit:hover { color: var(--accent-bright); }
-.mu-scene .exit:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
-.mu-scene .hostile { color: var(--alert); font-size: .72rem; margin-left: 6px; }
-.mu-scene .none { margin: .1rem 0; font-style: normal; }
-.mu-scene .awaiting { margin: 0; color: var(--fg-faint); font-style: normal; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
+${R} { height: 100%; overflow-y: auto; background: var(--bg-elev); padding: .7rem .85rem 1rem; font-family: var(--font-mono); font-size: .9rem; color: var(--fg); box-sizing: border-box; }
+${R}:focus { outline: none; }
+${R} .title { margin: 0 0 .5rem; padding-bottom: .4rem; font-weight: 400; font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-bright); border-bottom: 1px solid var(--border-bright); }
+${R} .area { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); margin: -.2rem 0 .4rem; }
+${R} .atmo { color: var(--fg-dim); font-style: italic; margin: 0 0 .4rem; }
+${R} .desc { margin: 0 0 .4rem; white-space: pre-wrap; }
+${R} .pose { color: var(--fg-dim); font-style: italic; margin: 0 0 .5rem; padding-left: .5rem; border-left: 2px solid var(--border-bright); }
+${R} .list { list-style: none; margin: 0; padding: 0; }
+${R} .list li { padding: .08rem 0; color: var(--fg); }
+${R} .sigil { color: var(--accent); margin-right: .6ch; }
+${R} .exit { display: inline-flex; align-items: center; min-height: 24px; color: inherit; text-align: left; transition: color .12s ease; }
+${R} .exit:hover { color: var(--accent-bright); }
+${R} .exit:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
+${R} .hostile { color: var(--alert); font-size: .72rem; margin-left: 6px; }
+${R} .none { margin: .1rem 0; font-style: normal; color: var(--fg-faint); }
+${R} .awaiting { margin: 0; color: var(--fg-faint); font-style: normal; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
 `;
-function el(tag, props = {}, ...kids) {
-  const e = document.createElement(tag);
-  for (const [k, v] of Object.entries(props)) {
-    if (v === void 0 || v === false) continue;
-    if (k === "class") e.className = String(v);
-    else e.setAttribute(k, v === true ? "" : String(v));
-  }
-  for (const k of kids) if (k !== null && k !== false) e.append(k);
-  return e;
-}
+var HOST_CSS = { secHead: "sec-head", secClose: "sec-close", empty: "empty", glow: "glow-text" };
 function presentOf(s) {
   const seen = /* @__PURE__ */ new Set();
   const out = [];
-  for (const n of s.present) if (!seen.has(n)) {
+  for (const n of s.present ?? []) if (!seen.has(n)) {
     seen.add(n);
     out.push({ name: n });
   }
-  for (const it of s.items) if (!seen.has(it.name)) {
+  for (const it of s.items ?? []) if (!seen.has(it.name)) {
     seen.add(it.name);
     out.push(it.hostile ? { name: it.name, hostile: true } : { name: it.name });
   }
   return out;
 }
-var sectionHead = (label) => el("div", { class: "sec-head", role: "heading", "aria-level": "3" }, label, el("span", { class: "sec-close", "aria-hidden": "true" }));
-var sigil = () => el("span", { class: "sigil", "aria-hidden": "true" }, "\u25B8");
-function renderScene(s, go) {
-  if (!s || !s.known) return [el("p", { class: "empty awaiting", "data-testid": "scene-empty" }, COPY.awaiting)];
-  const out = [el("h3", { class: "title glow-text", role: "heading", "aria-level": "2", "data-testid": "scene-title" }, s.title)];
-  if (s.area) out.push(el("div", { class: "area", "data-testid": "scene-area" }, s.area));
-  if (s.atmosphere) out.push(el("p", { class: "atmo" }, s.atmosphere));
-  if (s.desc) out.push(el("p", { class: "desc" }, s.desc));
-  if (s.pose) out.push(el("p", { class: "pose" }, s.pose));
-  out.push(sectionHead(COPY.exits));
+var sigil = () => h("span", { class: "sigil", "aria-hidden": "true" }, "\u25B8");
+function renderScene(s, go, opts = {}) {
+  const c = { ...HOST_CSS, ...opts.css };
+  const mark = (el, what) => {
+    opts.target?.(el, what);
+    return el;
+  };
+  if (!s || !s.known) return [h("p", { class: `${c.empty} awaiting`, "data-testid": "scene-empty" }, COPY.awaiting)];
+  const head = (label) => h("div", { class: c.secHead, role: "heading", "aria-level": "3" }, label, h("span", { class: c.secClose, "aria-hidden": "true" }));
+  const out = [h("h3", { class: `title ${c.glow}`, role: "heading", "aria-level": "2", "data-testid": "scene-title" }, s.title)];
+  if (s.area) out.push(h("div", { class: "area", "data-testid": "scene-area" }, s.area));
+  if (s.atmosphere) out.push(h("p", { class: "atmo" }, s.atmosphere));
+  if (s.desc) out.push(h("p", { class: "desc" }, s.desc));
+  if (s.pose) out.push(h("p", { class: "pose" }, s.pose));
+  out.push(head(COPY.present));
+  const items = new Map((s.items ?? []).map((it) => [it.name, it]));
+  const people = new Set(s.present ?? []);
+  const present = presentOf(s);
+  if (present.length) {
+    const ul = h("ul", { class: "list", "data-testid": "scene-present" });
+    for (const p of present) {
+      const it = people.has(p.name) ? void 0 : items.get(p.name);
+      const li = h("li", { class: "entity-ref", "data-item-id": it?.id || void 0 }, sigil(), p.name, p.hostile ? h("span", { class: "hostile" }, COPY.hostile) : null);
+      ul.append(it ? mark(li, { item: it }) : mark(li, { person: p.name }));
+    }
+    out.push(ul);
+  } else out.push(h("p", { class: `${c.empty} none` }, COPY.none));
   if (s.exits.length) {
-    const ul = el("ul", { class: "list", "data-testid": "scene-exits" });
+    out.push(head(COPY.exits));
+    const ul = h("ul", { class: "list", "data-testid": "scene-exits" });
     for (const dir of s.exits) {
-      const b = el("button", { class: "exit", type: "button", title: COPY.go(dir) }, sigil(), dir);
-      b.addEventListener("click", () => go(dir));
-      ul.append(el("li", {}, b));
+      const b = h("button", { class: "exit", type: "button", title: COPY.go(dir), onclick: () => go(dir) }, sigil(), dir);
+      ul.append(h("li", {}, mark(b, { exit: dir })));
     }
     out.push(ul);
-  } else out.push(el("p", { class: "empty none" }, COPY.none));
-  out.push(sectionHead(COPY.present));
-  const present = presentOf(s);
-  if (present.length) {
-    const ul = el("ul", { class: "list", "data-testid": "scene-present" });
-    for (const p of present) ul.append(el("li", {}, sigil(), p.name, p.hostile ? el("span", { class: "hostile" }, COPY.hostile) : null));
-    out.push(ul);
-  } else out.push(el("p", { class: "empty none" }, COPY.none));
+  }
   return out;
 }
 var index_default = defineExtension({
   activate(ctx) {
     const mu = ctx.mu;
     mu.ui.style(SCENE_CSS);
+    const css = { secHead: mu.ui.css.secHead, secClose: mu.ui.css.secClose, empty: mu.ui.css.empty, glow: mu.ui.css.glow };
     const mount = (host, pc) => {
-      const root = el("section", { class: "mu-scene", "aria-label": COPY.title, "data-focus-region": "scene", tabindex: "-1", "data-testid": "scene" });
+      const root = h("section", { class: "mu-scene", "aria-label": COPY.title, "data-focus-region": "scene", tabindex: "-1", "data-testid": "scene" });
       host.append(root);
       const sid = pc.sid;
-      const go = (dir) => {
-        if (sid) void mu.sessions.send(dir, sid);
-      };
       if (!sid) {
-        root.replaceChildren(...renderScene(null, go));
+        root.replaceChildren(...renderScene(null, () => {
+        }, { css }));
         return () => root.remove();
       }
-      const off = mu.scene.watch((s) => root.replaceChildren(...renderScene(s, go)), sid);
+      const go = (dir) => {
+        void mu.sessions.send(dir, { sid });
+      };
+      let targets = [];
+      const untarget = () => {
+        for (const d of targets) d();
+        targets = [];
+      };
+      const target = (el, what) => {
+        if ("exit" in what) targets.push(mu.menus.target(el, { kind: "scene-exit", sid, exit: what.exit }));
+        else if ("item" in what) targets.push(mu.menus.target(el, { kind: "scene-item", sid, item: what.item }));
+      };
+      let room = null;
+      const off = mu.scene.watch((s) => {
+        const moved = !s.known || !s.id || s.id !== room;
+        room = s.known && s.id ? s.id : null;
+        const top = root.scrollTop;
+        untarget();
+        root.replaceChildren(...renderScene(s, go, { css, target }));
+        root.scrollTop = moved ? 0 : top;
+      }, sid);
       return () => {
         off();
+        untarget();
         root.remove();
       };
     };
-    mu.panels.register({ id: "scene", title: COPY.title, singleton: true, defaultPosition: "right-top", order: 10, mount });
-    mu.gmcp.on("Room", (_d, { sid }) => mu.panels.autoAdd("scene", sid));
+    mu.panels.register({ id: "scene", title: COPY.title, singleton: true, defaultPosition: "right-top", order: 10, show: "auto", mount });
+    ctx.subscriptions.push(mu.sessions.each((s) => {
+      let done = false;
+      return mu.scene.watch((v) => {
+        if (!done && v.known) {
+          done = true;
+          mu.panels.touch("scene", s.id);
+        }
+      }, s.id);
+    }));
   }
 });
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runmu.sh/ext-scene",
-  "version": "1.0.3",
-  "description": "The Scene panel: the room you are in (title, area, atmosphere, description, pose), its exits as buttons and who is present, from GMCP Room.*, Char.Items.*, MSDP or another extension.",
+  "version": "1.1.0",
+  "description": "The Scene panel: the room you are in (title, area, atmosphere, description, pose), who is present and its exits as buttons, from GMCP Room.*, Char.Items.*, MSDP or another extension.",
   "keywords": [
     "scene",
     "room",
@@ -23,6 +23,7 @@
   "exports": "./dist/index.js",
   "files": [
     "dist",
+    "src/types.ts",
     "README.md",
     "CHANGELOG.md"
   ],
@@ -30,23 +31,25 @@
     "build": "node scripts/build.mjs",
     "dev": "node scripts/dev.mjs",
     "typecheck": "tsc --noEmit",
-    "check": "node scripts/build.mjs --check"
+    "check": "node scripts/build.mjs --check",
+    "test": "node --test test/*.test.mjs"
   },
   "devDependencies": {
-    "@muclient/sdk": "npm:@runmu.sh/sdk@^1.6.0",
-    "@runmu.sh/dev": "^0.1.0",
+    "@muclient/sdk": "npm:@runmu.sh/sdk@^1.12.0",
+    "@runmu.sh/dev": "^0.2.0",
     "esbuild": "^0.28.2",
-    "typescript": "^5.9.0"
+    "typescript": "^5.9.0",
+    "happy-dom": "^20.0.0"
   },
   "engines": {
     "node": ">=20"
   },
   "muclient": {
     "id": "scene",
-    "api": "^1.4",
+    "api": "^1.12",
     "source": "src/index.ts",
     "displayName": "Scene",
-    "description": "The Scene panel: the current room, its exits as buttons and who is present, from GMCP Room.*, Char.Items.*, MSDP or another extension.",
+    "description": "The Scene panel: the current room, who is present and its exits as buttons, from GMCP Room.*, Char.Items.*, MSDP or another extension.",
     "categories": [
       "interface",
       "mapping"
@@ -55,17 +58,17 @@
       "panels": [
         {
           "id": "scene",
-          "title": "Scene"
+          "title": "Scene",
+          "order": 10,
+          "defaultPosition": "right-top",
+          "singleton": true
         }
-      ],
-      "gmcp": [
-        "Room 1"
       ]
     },
     "capabilities": [
-      "read-output",
       "send-commands"
     ],
     "publisher": "bitmuse"
-  }
+  },
+  "types": "./src/types.ts"
 }

package/src/types.ts

@@ -0,0 +1,45 @@
+/**
+ * The exported API of `@runmu.sh/ext-scene` (id `scene`). The extension reads no GMCP and sends none: it draws the
+ * host's scene model (`mu.scene.watch`, `SceneView`), which the room adapters fill from GMCP `Room.*`,
+ * `Char.Items.*`, MSDP and other extensions (`mu.scene.set`). This file and the README change together.
+ */
+import type { SceneView } from '@muclient/sdk';
+
+/** One row of ┤PRESENT├: a person (from `present`) or a room item (from `items`). */
+export interface PresentEntry {
+  name: string;
+  /** Set on hostile room items; drawn as a small `hostile` tag. */
+  hostile?: boolean;
+  /** The room item's id, when the row is an item with one (people have none). @since 1.1.0 */
+  id?: string;
+}
+
+/** The class names `renderScene` uses for the host primitives; defaults are the host's (`mu.ui.css`). @since 1.1.0 */
+export interface SceneCss {
+  secHead: string;
+  secClose: string;
+  empty: string;
+  glow: string;
+}
+
+/** Options for {@link renderScene} beyond the 1.0 signature. @since 1.1.0 */
+export interface RenderOptions {
+  /** `mu.ui.css` (or the part of it used). */
+  css?: Partial<SceneCss>;
+  /**
+   * Called for every exit button and every present row as it is created, so the caller can mark it as a context
+   * target (`mu.menus.target`). Return a function to undo it; those run on the next render or unmount.
+   */
+  target?: (el: HTMLElement, what: { exit: string } | { item: SceneView['items'][number] } | { person: string }) => void | (() => void);
+}
+
+/** Drawn copy. */
+export interface SceneCopy {
+  title: string;
+  awaiting: string;
+  present: string;
+  exits: string;
+  none: string;
+  hostile: string;
+  go(dir: string): string;
+}