@nano133/nanoterra 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.8.1 (2026-11-01)
+
+- **A closed panel gives the keys back to the game.** The options panel, the friends panel and the emote wheel put the focus back on their key when they
+  closed; Space (a game's jump) then pressed that key and opened the panel again (in the starter, after the player moved Jump off Space). Now the focus
+  leaves the key and the panel. `focusAfterClose: "key"` (on `mountOptions`, `mountFriends` and `mountEmotes`) keeps the old way, for a page with no keys of
+  its own.
+
 ## 0.8.0 (2026-11-01)
 
 - **An options menu for a game** (`@nano133/nanoterra/options`, `/options/panel` and `/options/style.css`). Wes: "build options menu and emotes in kit"

package/LICENSE

@@ -19,3 +19,6 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+The emote clips (src/emotes/clips.ts, dist/emotes/clips.js) and the emote icons (src/emotes/icons.webp) are
+nano133's own work, made in Blender, and are covered by this licence like the code.

package/README.md

@@ -10,9 +10,9 @@ themselves. This package gives your game these things:
 - **The player's character** (`/character`): the same toon body that the player has on the island, drawn with Three.js. Six bases, faces, hair, clothes, sizes and colours.
 - **The looks ladder** (`/looks`): the rules of `looks.json`, the price steps, and what a change does to the players who own a look.
 - **Held input that does not stick** (`/input`, since 0.3.1): lets go of the keys and the stick when the player leaves the page, so the character never walks on by itself, and pauses a free round.
-- **A friends list** (`/friends`, unreleased): a Friends key that holds the player's Nanoterra friends (a nano133 window), or a full friends list of the game's own players on the game's own database, as the admin's Game card chooses.
-- **An options menu** (`/options`, unreleased): the game's settings as data, with defaults for each device, kept in the player's browser, and a ready Options key and panel (Basic and Advanced); common settings to opt into, and a section another module adds.
-- **Emotes** (`/emotes`, unreleased): Nano Island's eleven emotes on the player's character (the Wave, Cheer, Clap, Dance and seven more, made in Blender), and the emote wheel of eight that the player picks, which also plays a game's own animations.
+- **A friends list** (`/friends`, since 0.6.0): a Friends key that holds the player's Nanoterra friends (a nano133 window), or a full friends list of the game's own players on the game's own database, as the admin's Game card chooses.
+- **An options menu** (`/options`, since 0.8.0): the game's settings as data, with defaults for each device, kept in the player's browser, and a ready Options key and panel (Basic and Advanced); common settings to opt into, and a section another module adds.
+- **Emotes** (`/emotes`, since 0.8.0): Nano Island's eleven emotes on the player's character (the Wave, Cheer, Clap, Dance and seven more, made in Blender), and the emote wheel of eight that the player picks, which also plays a game's own animations.
 
 It replaces `@nano133/character` 0.1.0, `@nano133/ticket` 0.1.0 and `@nano133/looks` 0.1.0
 (see "Moving from the three old packages"). Sign-in, checkout and late returns stay in their own packages
@@ -71,15 +71,15 @@ Each path loads only what it needs. A page that reads a ticket loads no Three.js
 | `@nano133/nanoterra/admin/d1`, `/admin/firestore` | the admin store for D1 (the starter's tables) or Firestore (a small interface, no Firebase dependency): `createD1Store`, `createFirestoreStore` (since 0.2.0) | no | 1.5 kB each |
 | `@nano133/nanoterra/admin/panel` | the admin page, drawn in the browser into one element, and its stylesheet `@nano133/nanoterra/admin/style.css` (since 0.2.0) | no | 18.9 kB with the tabbed layout (10.6 kB on 0.3.0, 8.5 kB on 0.2.0) + 5.9 kB of CSS (minified) |
 | `@nano133/nanoterra/admin/conformance` | test cases that a game runs against its own admin (a dev dependency in practice; since 0.2.0) | no | n/a |
-| `@nano133/nanoterra/friends` | the game's own friends list: the handler, the rules, a memory store (server code; unreleased) | no | 3.7 kB |
-| `@nano133/nanoterra/friends/d1`, `/friends/firestore` | the friends store for D1 (with the migration `/friends/d1.sql`) or Firestore (a small interface, no Firebase dependency): `createD1Friends`, `createFirestoreFriends` (unreleased) | no | 3.0 kB each |
-| `@nano133/nanoterra/friends/panel` | the Friends key and panel: the nano133 window, or the game's own list, and its stylesheet `@nano133/nanoterra/friends/style.css` (unreleased) | no | 5.0 kB + 4.8 kB of CSS (minified) |
-| `@nano133/nanoterra/friends/conformance` | the friends rules as test cases, for a store a game writes itself (unreleased) | no | n/a |
-| `@nano133/nanoterra/options` | the options store (no DOM), the common settings, `reflectOptions` and the panel's `mountOptions` (unreleased) | no | 2.9 kB (`createOptions` alone), 8.7 kB (all) |
-| `@nano133/nanoterra/options/panel` | the Options key and panel alone, and its stylesheet `@nano133/nanoterra/options/style.css` (unreleased) | no | 2.3 kB of CSS (9.4 kB minified) |
-| `@nano133/nanoterra/emotes` | the emotes' list, the wheel's eight places, the multiplayer message and the player's options: no DOM, no Three.js (unreleased) | no | 1.4 kB |
-| `@nano133/nanoterra/emotes/player` | the emotes on the kit's character: `createEmotes`, `playRemote`, `loadEmotes` (unreleased) | yes | 2.9 kB; the clips load on the first emote, a chunk of their own: 84 kB, 18.8 kB gzip |
-| `@nano133/nanoterra/emotes/wheel` | the Emotes key and the emote wheel: `mountEmotes`, and its stylesheet `@nano133/nanoterra/emotes/style.css` (unreleased) | no | 5.9 kB + 7.4 kB of CSS (minified); the pictures (`/emotes/icons.webp`, 34 kB) load when the wheel first opens |
+| `@nano133/nanoterra/friends` | the game's own friends list: the handler, the rules, a memory store (server code; since 0.6.0) | no | 3.7 kB |
+| `@nano133/nanoterra/friends/d1`, `/friends/firestore` | the friends store for D1 (with the migration `/friends/d1.sql`) or Firestore (a small interface, no Firebase dependency): `createD1Friends`, `createFirestoreFriends` (since 0.6.0) | no | 3.0 kB each |
+| `@nano133/nanoterra/friends/panel` | the Friends key and panel: the nano133 window, or the game's own list, and its stylesheet `@nano133/nanoterra/friends/style.css` (since 0.6.0) | no | 5.0 kB + 4.8 kB of CSS (minified) |
+| `@nano133/nanoterra/friends/conformance` | the friends rules as test cases, for a store a game writes itself (since 0.6.0) | no | n/a |
+| `@nano133/nanoterra/options` | the options store (no DOM), the common settings, `reflectOptions` and the panel's `mountOptions` (since 0.8.0) | no | 2.9 kB (`createOptions` alone), 8.7 kB (all) |
+| `@nano133/nanoterra/options/panel` | the Options key and panel alone, and its stylesheet `@nano133/nanoterra/options/style.css` (since 0.8.0) | no | 2.3 kB of CSS (9.4 kB minified) |
+| `@nano133/nanoterra/emotes` | the emotes' list, the wheel's eight places, the multiplayer message and the player's options: no DOM, no Three.js (since 0.8.0) | no | 1.4 kB |
+| `@nano133/nanoterra/emotes/player` | the emotes on the kit's character: `createEmotes`, `playRemote`, `loadEmotes` (since 0.8.0) | yes | 2.9 kB; the clips load on the first emote, a chunk of their own: 84 kB, 18.8 kB gzip |
+| `@nano133/nanoterra/emotes/wheel` | the Emotes key and the emote wheel: `mountEmotes`, and its stylesheet `@nano133/nanoterra/emotes/style.css` (since 0.8.0) | no | 5.9 kB + 7.4 kB of CSS (minified); the pictures (`/emotes/icons.webp`, 34 kB) load when the wheel first opens |
 
 Measured 2026-10-26 (the friends paths 2026-10-30, the options and the emotes paths 2026-11-01): `esbuild --bundle --minify --format=esm --external:three`, then `gzip -9`, without Three.js.
 All four paths together: 23.6 kB. A test of the package proves that the record, the ticket, the looks and the small part import no package at all.
@@ -672,7 +672,7 @@ width (a container query), not the window's: on a phone two cards a row and the
 
 The wallet sign-in stays yours (`signIn`), because only your game can start a request in the ADMIN scope with its own cookie. The panel never signs anyone in.
 
-**Light and dark** (unreleased). The top bar has a theme key (44 px, a half circle, a sun or a moon; its name says the choice: "Theme: Dark", "Theme: Device (dark
+**Light and dark** (since 0.7.0). The top bar has a theme key (44 px, a half circle, a sun or a moon; its name says the choice: "Theme: Dark", "Theme: Device (dark
 now)"). A press opens a menu of three: **Device** (the default: it follows the device's setting, `prefers-color-scheme`, and a live change of it), **Light** and **Dark**.
 The signed-out screen has the same key. The choice is kept in this browser only, in `localStorage` under `n133-admin-theme`: no server call and no admin setting. A
 browser that refuses storage (some private windows) reads Device, and a choice there holds for the page.
@@ -703,7 +703,7 @@ html[data-n133-theme="dark"] body.admin-page {
 The pictures: a look's flat picture and the character previews (`createLookPreview` draws with a clear background) stand on the `stage` colour, which is a mid grey
 blue in dark, so a dark outfit and the outlines still show. The panel draws no QR code.
 
-## The friends list (`/friends`; unreleased)
+## The friends list (`/friends`; since 0.6.0)
 
 A Friends key for the game, and a list behind it. The admin's **Game** card chooses which list (`friends` in the settings; Nanoterra by default):
 
@@ -826,7 +826,7 @@ no live connection: only Nanoterra's do.
 **Questions.** Remove, Block and (in both modes) Join ask the player first, in the panel itself: the question and a key for each answer; Escape or closing the
 panel answers no. The kit never opens a browser dialog. To ask in your game's own dialog, pass `confirm(question)`, which returns a boolean or a promise of one.
 
-## The options menu (`/options`; unreleased)
+## The options menu (`/options`; since 0.8.0)
 
 A game's settings as data, kept in the player's browser, and a ready Options key and panel. A game declares its settings; the kit resolves their defaults for
 the device, keeps only what the player changed, and draws them in two tabs, **Basic** and **Advanced**. A game with its own menu uses the store alone.
@@ -907,8 +907,10 @@ sheet from the bottom on a phone held upright, from the right on a wide or sidew
 (the arrow keys, Home and End; one tab alone has no tab bar); each tab draws its rows without a group first, then each group under its heading. **A change applies
 at once** (there is no Save key), and a change from elsewhere shows in place: the rows are drawn once, a slider under a finger is never drawn again, and the panel
 never scrolls back to the top. **Reset to defaults** asks in the panel ("Put every option back to its default?", Reset and Cancel), never in a browser dialog;
-Escape answers the question first, then closes the panel. `key: false` draws no key, for a game that puts "Options" in its own pause menu and calls `open()`;
-the focus goes back where it was. `onOpen` and `onClose` let a game pause under the panel; `onRangeDone(key, value)` hears a slider let go (play a sound at the new
+Escape answers the question first, then closes the panel. `key: false` draws no key, for a game that puts "Options" in its own pause menu and calls `open()`.
+**When it closes, the focus leaves the key and the panel** (to the page), so Space and the game's other keys reach the game again: a focused key would take
+Space and open the panel again. The friends panel and the emote wheel do the same. `focusAfterClose: "key"` gives the focus back to the key (or, with no
+key, to what had it before), for a page with no keys of its own. `onOpen` and `onClose` let a game pause under the panel; `onRangeDone(key, value)` hears a slider let go (play a sound at the new
 level). The panel holds the focus while it is open. Every key, switch, choice and slider is 44 px or more, and a row's label is 16 px.
 
 **Light and dark.** The panel follows `data-n133-theme="light" | "dark"` on the page's `<html>` when the page sets it (the admin panel does), else the device's
@@ -923,7 +925,7 @@ returns the call that stops it:
 html[data-n133-opt-reduced-motion="true"] .my-hud * { animation: none !important; transition: none !important; }
 ```
 
-## Emotes (`/emotes`; unreleased)
+## Emotes (`/emotes`; since 0.8.0)
 
 Nano Island's emotes for a game: the same eleven, on the same character, with the same wheel. **The Wave** is the character's own `wave()`; **Cheer, Clap,
 Dance, Bow, Shrug, Laugh, Point, Sit, Facepalm and Spin** are clips made in Blender on the character's own skeleton (the island makes them from this package's
@@ -995,7 +997,7 @@ middle disc with the name of the place under the finger and **Edit**.
   panel sets too, else `prefers-color-scheme`). It returns `open()`, `close()`, `isOpen`, `slots` and `destroy()`.
 - Theme it with the same `--n133-*` properties as the admin panel (and their `--n133-dark-*` twins), and `--n133-emotes-z` for its z-index (default 1000).
 
-The clips and the icons are part of the package and under its MIT licence.
+The clips and the icons are nano133's own work, made in Blender for Nano Island, and are part of the package under its MIT licence.
 
 **The admin's switch.** The Game card has **"Allow Nanoterra emotes"** (`emotes` in the settings: `"on"`, the default, or `"off"`). Read it with
 `loadGameSettings` and pass it to the wheel as `nanoterraEmotes`. When it is off, also do not call `playRemote` and do not send the player's emotes: the game shows no

package/dist/admin/panel/dom.d.ts

@@ -1,6 +1,8 @@
 type Attrs = Record<string, string | number | boolean | undefined | ((e: Event) => void)>;
 type Child = Node | string | null | undefined | false;
 export declare function h<K extends keyof HTMLElementTagNameMap>(tag: K, attrs?: Attrs, ...children: Child[]): HTMLElementTagNameMap[K];
+/** Takes the keyboard focus out of `within` (to the page), so a game's own keys reach the game again. */
+export declare function releaseFocus(within: Element): void;
 /** "nano_1abc…wxyz" */
 export declare const shortAddress: (a: string) => string;
 export declare function copy(text: string, button: HTMLButtonElement): Promise<void>;

package/dist/admin/panel/dom.js

@@ -18,6 +18,12 @@ export function h(tag, attrs = {}, ...children) {
             el.append(c);
     return el;
 }
+/** Takes the keyboard focus out of `within` (to the page), so a game's own keys reach the game again. */
+export function releaseFocus(within) {
+    const now = document.activeElement;
+    if (now instanceof HTMLElement && within.contains(now))
+        now.blur();
+}
 /** "nano_1abc…wxyz" */
 export const shortAddress = (a) => `${a.slice(0, 10)}…${a.slice(-6)}`;
 export async function copy(text, button) {

package/dist/emotes/panel/mount.d.ts

@@ -34,6 +34,11 @@ export type EmotesMountOptions = {
     theme?: "light" | "dark" | "device";
     /** Where the wheel is kept (default: the page's localStorage). null keeps it only for the life of the page. */
     storage?: Pick<Storage, "getItem" | "setItem"> | null;
+    /**
+     * Where the keyboard focus goes when the wheel closes. "game" (the default): out of the key and the wheel, to the page, so Space and the game's
+     * other keys reach the game again (a focused key would take Space and open the wheel again). "key": back to the key, for a page with no keys of its own.
+     */
+    focusAfterClose?: "game" | "key";
 };
 export type MountedEmotes = {
     open(): void;

package/dist/emotes/panel/mount.js

@@ -9,7 +9,7 @@
 //
 // The list is Nanoterra's (each id names one of EMOTES: its name and picture come from the kit), the game's own ({ id, label, icon }), or both. The
 // wheel only calls `onPlay(id)`: the game plays it (Nanoterra's on the kit's character: createEmotes(...).play, from "@nano133/nanoterra/emotes/player").
-import { h } from "../../admin/panel/dom.js";
+import { h, releaseFocus } from "../../admin/panel/dom.js";
 import { icon } from "../../admin/panel/icons.js";
 import { EMOTE_ICONS_URL } from "../icons.js";
 import { EMOTES, emoteOf, isEmote } from "../list.js";
@@ -242,8 +242,12 @@ export function mountEmotes(root, options) {
         layer.hidden = true;
         layer.dataset.open = "false";
         key.setAttribute("aria-expanded", "false");
-        if (focusKey && !key.hidden)
-            key.focus();
+        if (options.focusAfterClose === "key") {
+            if (focusKey && !key.hidden)
+                key.focus();
+        }
+        else
+            releaseFocus(wrap);
     }
     editKey.addEventListener("click", () => {
         edit = !edit;

package/dist/friends/panel/mount.d.ts

@@ -21,6 +21,11 @@ export type FriendsMountOptions = {
     fetch?: typeof fetch;
     /** Asks the player a yes or no question (default: a question in the panel, with a key for each answer; never a browser dialog). */
     confirm?: (question: string) => boolean | Promise<boolean>;
+    /**
+     * Where the keyboard focus goes when the panel closes. "game" (the default): out of the key and the panel, to the page, so Space and the game's
+     * other keys reach the game again (a focused key would take Space and open the panel again). "key": back to the key, for a page with no keys of its own.
+     */
+    focusAfterClose?: "game" | "key";
 };
 export type MountedFriends = {
     /** Sets where the player is (friends see it). Null: no place. */

package/dist/friends/panel/mount.js

@@ -11,7 +11,7 @@
 //
 // The panel is phone first: a sheet from the bottom on a phone held upright, from the side on a wide or sideways screen; every key is 44 px.
 import { ApiError, createApi } from "../../admin/panel/api.js";
-import { h } from "../../admin/panel/dom.js";
+import { h, releaseFocus } from "../../admin/panel/dom.js";
 import { icon } from "../../admin/panel/icons.js";
 import { readWindowMessage, toWindow, whereText, windowUrl } from "./window.js";
 export const FRIENDS_TIMING = { viewOpenMs: 20_000, viewClosedMs: 60_000, pulseMs: 45_000 };
@@ -69,7 +69,10 @@ export function mountFriends(root, options) {
         panel.dataset.open = "false";
         key.setAttribute("aria-expanded", "false");
         onClose();
-        key.focus();
+        if (options.focusAfterClose === "key")
+            key.focus();
+        else
+            releaseFocus(wrap);
     };
     key.addEventListener("click", () => (isOpen ? close() : open()));
     closeKey.addEventListener("click", close);

package/dist/options/panel/mount.d.ts

@@ -11,6 +11,11 @@ export type OptionsMountOptions = {
     onRangeDone?: (key: string, value: number) => void;
     /** Asks the player a yes or no question (default: a question in the panel, with a key for each answer; never a browser dialog). */
     confirm?: (question: string) => boolean | Promise<boolean>;
+    /**
+     * Where the keyboard focus goes when the panel closes. "game" (the default): out of the key and the panel, to the page, so Space and the game's
+     * other keys reach the game again (a focused key would take Space and open the panel again). "key": back to the key, for a page with no keys of its own.
+     */
+    focusAfterClose?: "game" | "key";
 };
 export type MountedOptions = {
     open(): void;

package/dist/options/panel/mount.js

@@ -11,7 +11,7 @@
 // "Reset to defaults" asks in the panel (a question and a key for each answer), never in a browser dialog. Escape answers the question first, then closes.
 // The panel is phone first: a sheet from the bottom on a phone held upright, from the right on a wide or sideways screen; every key is 44 px or more.
 // `key: false` draws no key, for a game that opens the panel from its own pause menu (`open()`).
-import { h } from "../../admin/panel/dom.js";
+import { h, releaseFocus } from "../../admin/panel/dom.js";
 import { icon } from "../../admin/panel/icons.js";
 import { keyLabel } from "../core.js";
 export const TAB_WORDS = { basic: "Basic", advanced: "Advanced" };
@@ -273,8 +273,10 @@ export function mountOptions(root, store, options = {}) {
         panel.dataset.open = scrim.dataset.open = "false";
         key?.setAttribute("aria-expanded", "false");
         options.onClose?.();
-        const back = key ?? (returnTo?.isConnected ? returnTo : null);
-        back?.focus();
+        if (options.focusAfterClose === "key")
+            (key ?? (returnTo?.isConnected ? returnTo : null))?.focus();
+        else
+            releaseFocus(wrap);
     };
     key?.addEventListener("click", () => (isOpen ? close() : open()));
     closeKey.addEventListener("click", close);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nano133/nanoterra",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Nanoterra for a creator's game, in one package: the player's sign-in ticket, the player's character (a toon body on the island's skeleton), the looks ladder, the admin, the friends list and an options menu.",
   "type": "module",
   "main": "dist/index.js",

package/src/admin/panel/dom.ts

@@ -16,6 +16,12 @@ export function h<K extends keyof HTMLElementTagNameMap>(tag: K, attrs: Attrs =
   return el;
 }
 
+/** Takes the keyboard focus out of `within` (to the page), so a game's own keys reach the game again. */
+export function releaseFocus(within: Element): void {
+  const now = document.activeElement;
+  if (now instanceof HTMLElement && within.contains(now)) now.blur();
+}
+
 /** "nano_1abc…wxyz" */
 export const shortAddress = (a: string): string => `${a.slice(0, 10)}…${a.slice(-6)}`;
 

package/src/emotes/panel/mount.ts

@@ -10,7 +10,7 @@
 // The list is Nanoterra's (each id names one of EMOTES: its name and picture come from the kit), the game's own ({ id, label, icon }), or both. The
 // wheel only calls `onPlay(id)`: the game plays it (Nanoterra's on the kit's character: createEmotes(...).play, from "@nano133/nanoterra/emotes/player").
 
-import { h } from "../../admin/panel/dom.js";
+import { h, releaseFocus } from "../../admin/panel/dom.js";
 import { icon } from "../../admin/panel/icons.js";
 import { EMOTE_ICONS_URL } from "../icons.js";
 import { EMOTES, emoteOf, isEmote, type EmoteId } from "../list.js";
@@ -47,6 +47,11 @@ export type EmotesMountOptions = {
   theme?: "light" | "dark" | "device";
   /** Where the wheel is kept (default: the page's localStorage). null keeps it only for the life of the page. */
   storage?: Pick<Storage, "getItem" | "setItem"> | null;
+  /**
+   * Where the keyboard focus goes when the wheel closes. "game" (the default): out of the key and the wheel, to the page, so Space and the game's
+   * other keys reach the game again (a focused key would take Space and open the wheel again). "key": back to the key, for a page with no keys of its own.
+   */
+  focusAfterClose?: "game" | "key";
 };
 
 export type MountedEmotes = {
@@ -288,7 +293,9 @@ export function mountEmotes(root: HTMLElement, options: EmotesMountOptions): Mou
     layer.hidden = true;
     layer.dataset.open = "false";
     key.setAttribute("aria-expanded", "false");
-    if (focusKey && !key.hidden) key.focus();
+    if (options.focusAfterClose === "key") {
+      if (focusKey && !key.hidden) key.focus();
+    } else releaseFocus(wrap);
   }
 
   editKey.addEventListener("click", () => {

package/src/friends/panel/mount.ts

@@ -12,7 +12,7 @@
 // The panel is phone first: a sheet from the bottom on a phone held upright, from the side on a wide or sideways screen; every key is 44 px.
 
 import { ApiError, createApi, type Api } from "../../admin/panel/api.js";
-import { h } from "../../admin/panel/dom.js";
+import { h, releaseFocus } from "../../admin/panel/dom.js";
 import { icon } from "../../admin/panel/icons.js";
 import type { FriendRow, FriendView } from "../types.js";
 import { readWindowMessage, toWindow, whereText, windowUrl, type ToWindow } from "./window.js";
@@ -39,6 +39,11 @@ export type FriendsMountOptions = {
   fetch?: typeof fetch;
   /** Asks the player a yes or no question (default: a question in the panel, with a key for each answer; never a browser dialog). */
   confirm?: (question: string) => boolean | Promise<boolean>;
+  /**
+   * Where the keyboard focus goes when the panel closes. "game" (the default): out of the key and the panel, to the page, so Space and the game's
+   * other keys reach the game again (a focused key would take Space and open the panel again). "key": back to the key, for a page with no keys of its own.
+   */
+  focusAfterClose?: "game" | "key";
 };
 
 export type MountedFriends = {
@@ -108,7 +113,8 @@ export function mountFriends(root: HTMLElement, options: FriendsMountOptions): M
     panel.dataset.open = "false";
     key.setAttribute("aria-expanded", "false");
     onClose();
-    key.focus();
+    if (options.focusAfterClose === "key") key.focus();
+    else releaseFocus(wrap);
   };
   key.addEventListener("click", () => (isOpen ? close() : open()));
   closeKey.addEventListener("click", close);

package/src/options/panel/mount.ts

@@ -12,7 +12,7 @@
 // The panel is phone first: a sheet from the bottom on a phone held upright, from the right on a wide or sideways screen; every key is 44 px or more.
 // `key: false` draws no key, for a game that opens the panel from its own pause menu (`open()`).
 
-import { h } from "../../admin/panel/dom.js";
+import { h, releaseFocus } from "../../admin/panel/dom.js";
 import { icon } from "../../admin/panel/icons.js";
 import { keyLabel, type ChoiceDef, type KeyDef, type OptionDef, type OptionsStore, type OptionValue, type RangeDef, type Tab, type ToggleDef } from "../core.js";
 
@@ -28,6 +28,11 @@ export type OptionsMountOptions = {
   onRangeDone?: (key: string, value: number) => void;
   /** Asks the player a yes or no question (default: a question in the panel, with a key for each answer; never a browser dialog). */
   confirm?: (question: string) => boolean | Promise<boolean>;
+  /**
+   * Where the keyboard focus goes when the panel closes. "game" (the default): out of the key and the panel, to the page, so Space and the game's
+   * other keys reach the game again (a focused key would take Space and open the panel again). "key": back to the key, for a page with no keys of its own.
+   */
+  focusAfterClose?: "game" | "key";
 };
 
 export type MountedOptions = {
@@ -318,8 +323,8 @@ export function mountOptions(root: HTMLElement, store: OptionsStore, options: Op
     panel.dataset.open = scrim.dataset.open = "false";
     key?.setAttribute("aria-expanded", "false");
     options.onClose?.();
-    const back = key ?? (returnTo?.isConnected ? returnTo : null);
-    back?.focus();
+    if (options.focusAfterClose === "key") (key ?? (returnTo?.isConnected ? returnTo : null))?.focus();
+    else releaseFocus(wrap);
   };
   key?.addEventListener("click", () => (isOpen ? close() : open()));
   closeKey.addEventListener("click", close);