@nano133/nanoterra 0.6.1 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.7.1 (2026-10-31)
+
+- **Friends: the panel asks in the panel, never in a browser dialog.** Remove, Block and Join (both modes) showed `window.confirm`; now the question and a key for
+  each answer show at the top of the panel, which opens for it. Escape or closing the panel answers no. The `confirm` option stays, and may return a promise.
+- **Friends, "own": no Invite key without `onJoin`.** A game with no way to join a friend gave an invite that led nowhere.
+
+## 0.7.0 (2026-10-30)
+
+- **The admin panel has a light and a dark theme** (`/admin/panel`, `/admin/style.css`). A theme key in the top bar (and on the signed-out screen) opens Device,
+  Light and Dark; Device is the default and follows `prefers-color-scheme` live. The choice is kept in this browser (`localStorage`, `n133-admin-theme`); a refused
+  storage reads Device. The panel gets `data-theme` and `color-scheme`; the page's `<html>` gets `data-n133-theme` while the panel is mounted, so the host page can
+  follow (README, "Light and dark"). Every colour of the stylesheet is a variable now: `--n133-*` sets the light value as before, and each has a `--n133-dark-*`
+  twin. `mountAdmin` returns `theme` and `destroy()` too. New exports: `createTheme`, `themeKey`, `resolveTheme`, `readThemeChoice`, `themeLabel`, `THEME_KEY`,
+  `THEME_CHOICES` and their types.
+
 ## 0.6.1 (2026-10-30)
 
 - **Friends: a name may be 80 characters** (it was 64), so a whole Nano address (65 with `nano_`) reaches the game's `PlayerDirectory`: the handler's

package/README.md

@@ -665,6 +665,37 @@ 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
+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.
+
+The panel gets `data-theme="light"` or `"dark"` on its root element and sets `color-scheme` to match (form controls, scroll bars, the colour picker). Every colour of the
+stylesheet is a variable with a hook: `--n133-<name>` sets the light value, as before, and its twin `--n133-dark-<name>` sets the dark value. The names: `ink`,
+`ink-soft`, `paper`, `ground`, `line`, `gem`, `gem-dark` (the green of text and marks), `on-gem` (text on a green fill), `sea` (links and the focus ring), `warn`, `bad`,
+`ok-bg`, `ok-ink`, `info`, `info-bg`, `info-ink`, `warn-bg`, `bad-bg`, `bad-ink`, `neutral-bg`, `neutral-ink` (the badges and chips), `note-bg`, `note-line`, `note-ink`
+(the "Check these" banner and the draft note), `alarm-bg`, `alarm-ink` (a late payment, a card's problems, Sign out everywhere), `quiet`, `violet`, `changed` (the accents
+of the numbers and of a changed look), `stage` (the backdrop of a look's picture), `tint-empty`, `swatch-empty`, `swatch-edge`, `code-bg`, `code-ink`, and `shadow`
+(`--n133-dark-shadow`). The dark defaults keep body text at 4.5:1 or more on the dark paper (most pairs are 7:1 or more).
+
+**The page around the panel.** While the panel is mounted, `mountAdmin` also sets `data-n133-theme="light" | "dark"` on the page's `<html>`, so your page can follow it
+with CSS alone. `destroy()` (on what `mountAdmin` returns) stops following the device and takes the attribute off. `theme` on the same object reads and sets the choice
+(`theme.choice`, `theme.resolved`, `theme.set("dark")`, `theme.onChange(fn)`). The starter's `src/client/admin.css`:
+
+```css
+html[data-n133-theme="dark"]:has(.admin-page) {
+  --ink: #e7edf5; --ink-soft: #a9b5c5; --paper: #171f2b; --line: #303c4e; --gem-dark: #3fd8b6; --sea: #62bcec;
+  color-scheme: dark;
+}
+html[data-n133-theme="dark"]:has(.admin-page),
+html[data-n133-theme="dark"] body.admin-page {
+  background: #0f151e;
+}
+```
+
+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)
 
 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):
@@ -781,10 +812,13 @@ for (const c of friendsStoreConformance(async () => ({ store: newEmptyStore(), d
 ```
 
 **The panel in `"own"` mode** reads the view at once, every 20 s while open and every 60 s while closed (for the badge), pulses every 45 s while it has a `where`, and
-sends a leaving pulse when the page goes away. It draws Requests (Accept, Decline), Friends (online and the place, Invite to your `where`, Join an invite when you
+sends a leaving pulse when the page goes away. It draws Requests (Accept, Decline), Friends (online and the place, Invite to your `where` and Join an invite, both only when you
 give `onJoin`, Remove, Block), Sent (Cancel) and Blocked (Unblock), an add-by-name field and the "show friends when I am online" choice. The game's own friends have
 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.
+
 ## Moving from the three old packages
 
 | Before | Now |

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

@@ -111,6 +111,24 @@ declare const SHAPES: {
     trash: [string, {
         d: string;
     }][];
+    sun: ([string, {
+        cx: number;
+        cy: number;
+        r: number;
+    }] | [string, {
+        d: string;
+    }])[];
+    moon: [string, {
+        d: string;
+    }][];
+    device: ([string, {
+        cx: number;
+        cy: number;
+        r: number;
+    }] | [string, {
+        d: string;
+        fill: string;
+    }])[];
     sparkle: [string, {
         d: string;
     }][];

package/dist/admin/panel/icons.js

@@ -24,6 +24,9 @@ const SHAPES = {
     close: [["path", { d: "M6 6l12 12M18 6 6 18" }]],
     dup: [["rect", { x: 8, y: 8, width: 13, height: 13, rx: 2.5 }], ["path", { d: "M14.5 11.5v6M11.5 14.5h6M16 8V5.5A2.5 2.5 0 0 0 13.5 3h-8A2.5 2.5 0 0 0 3 5.5v8A2.5 2.5 0 0 0 5.5 16H8" }]],
     trash: [["path", { d: "M4 7h16M9.5 7V4.5h5V7M6.5 7l1 13h9l1-13" }]],
+    sun: [["circle", { cx: 12, cy: 12, r: 4 }], ["path", { d: "M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6" }]],
+    moon: [["path", { d: "M20 14.5A8.5 8.5 0 1 1 9.5 4a6.8 6.8 0 0 0 10.5 10.5Z" }]],
+    device: [["circle", { cx: 12, cy: 12, r: 8.5 }], ["path", { d: "M12 3.5a8.5 8.5 0 0 1 0 17Z", fill: "currentColor" }]],
     sparkle: [["path", { d: "M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6" }]],
 };
 /** An icon of `size` CSS pixels (default 20). */

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

@@ -13,6 +13,8 @@ export type { BestSeller, OverviewView } from "./overview.js";
 export { playerMatches, playersView } from "./players.js";
 export { TABS, tabBar } from "./tabs.js";
 export type { TabBar, TabId } from "./tabs.js";
+export { THEME_CHOICES, THEME_KEY, createTheme, readThemeChoice, resolveTheme, themeKey, themeLabel } from "./theme.js";
+export type { Theme, ThemeChoice, ThemeControl, ThemeOptions } from "./theme.js";
 export { icon } from "./icons.js";
 export type { IconName } from "./icons.js";
 export { aiPrompt, centsOf, changeText, ownedIds, shelfStats, soldText } from "./shelfData.js";

package/dist/admin/panel/index.js

@@ -14,5 +14,6 @@ export { orderMatches, ordersView } from "./orders.js";
 export { bestSellers, overviewView } from "./overview.js";
 export { playerMatches, playersView } from "./players.js";
 export { TABS, tabBar } from "./tabs.js";
+export { THEME_CHOICES, THEME_KEY, createTheme, readThemeChoice, resolveTheme, themeKey, themeLabel } from "./theme.js";
 export { icon } from "./icons.js";
 export { aiPrompt, centsOf, changeText, ownedIds, shelfStats, soldText } from "./shelfData.js";

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

@@ -1,4 +1,5 @@
 import type { Look } from "../../looks/look.js";
+import { type ThemeControl } from "./theme.js";
 export type MountOptions = {
     /** The game's looks now (its looks.json). The Shelf starts from them. */
     looks: readonly Look[];
@@ -26,5 +27,9 @@ export type MountedAdmin = {
     reload(): Promise<void>;
     /** Resolves when the first read has been drawn (a test waits for it). */
     ready: Promise<void>;
+    /** The light or dark theme (the owner's choice in the top bar, kept in this browser). */
+    theme: Pick<ThemeControl, "choice" | "resolved" | "set" | "onChange">;
+    /** Stops following the device's theme and takes data-n133-theme off the page's <html>. */
+    destroy(): void;
 };
 export declare function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdmin;

package/dist/admin/panel/mount.js

@@ -1,7 +1,7 @@
 // The admin panel: orders, owned looks, totals and the two game switches, from the game's own database. Only the game's owner can read them (the
 // handler checks it on every call); this page only shows them. `mountAdmin(element, options)` draws the panel into `element`.
 //
-// The page: a top bar (who is signed in, Live or Test mode, Sign out), what is still off (one banner), four numbers (earned, open now, to send back, players;
+// The page: a top bar (who is signed in, Live or Test mode, the light/dark theme key, Sign out), what is still off (one banner), four numbers (earned, open now, to send back, players;
 // each opens its list), then five tabs: Overview, Cosmetics (the Shelf), Orders, Players and Settings (the Game card, the sign-ins, the facts). Every tab is
 // made once; a new read of the summary fills them again and keeps the chosen tab, the Shelf's draft, a search and the Game card.
 import { ApiError, createApi } from "./api.js";
@@ -14,6 +14,7 @@ import { playersView } from "./players.js";
 import { shelfView } from "./shelf.js";
 import { signinsCard } from "./signins.js";
 import { tabBar } from "./tabs.js";
+import { createTheme, themeKey } from "./theme.js";
 const when = (ms) => (ms ? new Date(ms).toLocaleString() : "");
 export function mountAdmin(root, options) {
     const api = createApi(options.api ?? "/api/admin", options.fetch);
@@ -22,6 +23,11 @@ export function mountAdmin(root, options) {
     data.hidden = true;
     root.classList.add("n133-admin");
     root.replaceChildren(gate, data);
+    // Before the first read, so the gate is drawn in the chosen theme too.
+    const theme = createTheme(root);
+    /** The two theme keys (the gate's and the top bar's), made once: each one listens to the theme for the life of the page. */
+    const gateKey = themeKey(theme);
+    const barKey = themeKey(theme);
     /** The Shelf keeps its draft while the page redraws (a tab, a payment check): one view for the life of the page. */
     let shelf = null;
     /** The "Game" card keeps its own state for the life of the page (a payment check redraws the rest, not this). */
@@ -51,7 +57,7 @@ export function mountAdmin(root, options) {
         data.replaceChildren();
         dash = null;
         gate.hidden = false;
-        gate.replaceChildren(h("div", { class: "gate-icon", "aria-hidden": "true" }, icon(kind, 28)), h("h2", {}, title), ...body.filter((b) => b !== null));
+        gate.replaceChildren(gateKey, h("div", { class: "gate-icon", "aria-hidden": "true" }, icon(kind, 28)), h("h2", {}, title), ...body.filter((b) => b !== null));
     }
     async function load() {
         try {
@@ -64,7 +70,7 @@ export function mountAdmin(root, options) {
             if (!(e instanceof ApiError)) {
                 // The data already drawn (if any) stays: a failed new read does not take it away.
                 gate.hidden = false;
-                gate.replaceChildren(h("div", { class: "gate-icon", "aria-hidden": "true" }, icon("alert", 28)), h("p", {}, "The game's server did not answer. Try again."), h("button", { class: "btn", type: "button", onclick: () => void load() }, "Try again"));
+                gate.replaceChildren(gateKey, h("div", { class: "gate-icon", "aria-hidden": "true" }, icon("alert", 28)), h("p", {}, "The game's server did not answer. Try again."), h("button", { class: "btn", type: "button", onclick: () => void load() }, "Try again"));
                 return;
             }
             if (e.status === 403 && e.body.signedInAs) {
@@ -127,7 +133,7 @@ export function mountAdmin(root, options) {
         tabs.panels.players.append(players.el);
         const who = h("div", { class: "who" });
         const chips = h("div", { class: "chips" });
-        const top = h("header", { class: "topbar" }, h("div", { class: "who-mark", "aria-hidden": "true" }, icon("lock", 18)), who, chips, h("div", { class: "topbar-keys" }, signOutButton()));
+        const top = h("header", { class: "topbar" }, h("div", { class: "who-mark", "aria-hidden": "true" }, icon("lock", 18)), who, chips, h("div", { class: "topbar-keys" }, barKey, signOutButton()));
         const banner = h("div", { class: "banner warnings", role: "alert" });
         const kpis = h("div", { class: "kpis", role: "group", "aria-label": "Your game in numbers" });
         const settings = h("div", { class: "settings-grid" });
@@ -177,5 +183,5 @@ export function mountAdmin(root, options) {
         dash ??= build();
         dash.update(s);
     }
-    return { reload: () => load(), ready: load() };
+    return { reload: () => load(), ready: load(), theme, destroy: () => theme.destroy() };
 }

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

@@ -0,0 +1,40 @@
+export type ThemeChoice = "device" | "light" | "dark";
+export type Theme = "light" | "dark";
+/** The localStorage key of the choice. */
+export declare const THEME_KEY = "n133-admin-theme";
+export declare const THEME_CHOICES: readonly ThemeChoice[];
+/** The theme a choice gives: Device follows the device's setting. */
+export declare const resolveTheme: (choice: ThemeChoice, deviceDark: boolean) => Theme;
+type Store = Pick<Storage, "getItem" | "setItem">;
+/** The kept choice; Device when there is none, it is not a choice, or the storage cannot be read. */
+export declare function readThemeChoice(storage?: Store | null): ThemeChoice;
+export type ThemeOptions = {
+    /** Where the choice is kept (default: the page's localStorage). null keeps it only for the life of the page. */
+    storage?: Store | null;
+    /** The device's setting (default: window.matchMedia). */
+    matchMedia?: ((query: string) => Pick<MediaQueryList, "matches" | "addEventListener" | "removeEventListener">) | null;
+    /** The page's root, which gets data-n133-theme (default: document.documentElement). null sets nothing outside the panel. */
+    host?: HTMLElement | null;
+};
+export type ThemeControl = {
+    /** What the owner chose. */
+    readonly choice: ThemeChoice;
+    /** The theme drawn now. */
+    readonly resolved: Theme;
+    /** Picks a theme, keeps it in this browser and draws it. */
+    set(choice: ThemeChoice): void;
+    /** Hears every change of the choice or the drawn theme (the device's setting too). Returns the call that stops it. */
+    onChange(listen: (resolved: Theme, choice: ThemeChoice) => void): () => void;
+    /** Stops following the device and takes data-n133-theme off the page. */
+    destroy(): void;
+};
+/** Reads the kept choice and draws it on `root` at once (data-theme), and on the page's <html> (data-n133-theme). */
+export declare function createTheme(root: HTMLElement, options?: ThemeOptions): ThemeControl;
+/** "Theme: Dark", or "Theme: Device (dark now)". */
+export declare const themeLabel: (choice: ThemeChoice, resolved: Theme) => string;
+/**
+ * The theme key: a 44 px round key with the choice's icon (a sun, a moon, a half circle for Device). A press opens a small menu of the three choices, each a
+ * 44 px row with its icon and word; the chosen one is pressed (aria-pressed). A choice, Escape or a press outside closes it.
+ */
+export declare function themeKey(theme: ThemeControl): HTMLElement;
+export {};

package/dist/admin/panel/theme.js

@@ -0,0 +1,142 @@
+// The panel's light and dark themes. The owner picks Light, Dark or Device (the device's own setting, `prefers-color-scheme`, followed live); Device is the
+// default. The choice is kept in this browser only (localStorage, `n133-admin-theme`): no server call, no admin setting. A private window, or a browser that
+// refuses storage, still works: it reads Device and keeps a choice for the life of the page.
+//
+// The resolved theme is set as data-theme="light" | "dark" on the panel's root (style.css reads it), and as data-n133-theme on the page's <html> while the panel
+// is mounted, so the page around the panel can follow it (README, "Light and dark").
+import { h } from "./dom.js";
+import { icon } from "./icons.js";
+/** The localStorage key of the choice. */
+export const THEME_KEY = "n133-admin-theme";
+export const THEME_CHOICES = ["device", "light", "dark"];
+const QUERY = "(prefers-color-scheme: dark)";
+/** The theme a choice gives: Device follows the device's setting. */
+export const resolveTheme = (choice, deviceDark) => (choice === "device" ? (deviceDark ? "dark" : "light") : choice);
+const isChoice = (v) => typeof v === "string" && THEME_CHOICES.includes(v);
+/** The page's localStorage, or null where reading it throws (some private windows, a blocked site). */
+function pageStorage() {
+    try {
+        return globalThis.localStorage ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+/** The kept choice; Device when there is none, it is not a choice, or the storage cannot be read. */
+export function readThemeChoice(storage = pageStorage()) {
+    try {
+        const v = storage?.getItem(THEME_KEY);
+        return isChoice(v) ? v : "device";
+    }
+    catch {
+        return "device";
+    }
+}
+/** Reads the kept choice and draws it on `root` at once (data-theme), and on the page's <html> (data-n133-theme). */
+export function createTheme(root, options = {}) {
+    const storage = options.storage === undefined ? pageStorage() : options.storage;
+    const host = options.host === undefined ? (globalThis.document?.documentElement ?? null) : options.host;
+    let media = null;
+    try {
+        const mm = options.matchMedia === undefined ? (typeof globalThis.matchMedia === "function" ? globalThis.matchMedia.bind(globalThis) : null) : options.matchMedia;
+        media = mm ? mm(QUERY) : null;
+    }
+    catch {
+        media = null;
+    }
+    let choice = readThemeChoice(storage);
+    let resolved = "light";
+    const listeners = new Set();
+    function draw() {
+        resolved = resolveTheme(choice, media?.matches === true);
+        root.setAttribute("data-theme", resolved);
+        host?.setAttribute("data-n133-theme", resolved);
+        for (const l of listeners)
+            l(resolved, choice);
+    }
+    const onDevice = () => {
+        if (choice === "device")
+            draw();
+    };
+    media?.addEventListener?.("change", onDevice);
+    draw();
+    return {
+        get choice() {
+            return choice;
+        },
+        get resolved() {
+            return resolved;
+        },
+        set(next) {
+            if (!isChoice(next))
+                return;
+            choice = next;
+            try {
+                storage?.setItem(THEME_KEY, next);
+            }
+            catch {
+                // A full or refused storage: the choice holds for this page only.
+            }
+            draw();
+        },
+        onChange(listen) {
+            listeners.add(listen);
+            return () => listeners.delete(listen);
+        },
+        destroy() {
+            media?.removeEventListener?.("change", onDevice);
+            listeners.clear();
+            host?.removeAttribute("data-n133-theme");
+        },
+    };
+}
+const WORDS = { device: "Device", light: "Light", dark: "Dark" };
+const ICONS = { device: "device", light: "sun", dark: "moon" };
+/** "Theme: Dark", or "Theme: Device (dark now)". */
+export const themeLabel = (choice, resolved) => (choice === "device" ? `Theme: Device (${resolved} now)` : `Theme: ${WORDS[choice]}`);
+/**
+ * The theme key: a 44 px round key with the choice's icon (a sun, a moon, a half circle for Device). A press opens a small menu of the three choices, each a
+ * 44 px row with its icon and word; the chosen one is pressed (aria-pressed). A choice, Escape or a press outside closes it.
+ */
+export function themeKey(theme) {
+    const summary = h("summary", { class: "btn btn-quiet theme-summary" });
+    const rows = THEME_CHOICES.map((c) => h("button", {
+        class: "theme-choice",
+        type: "button",
+        "data-choice": c,
+        onclick: () => {
+            theme.set(c);
+            box.open = false;
+            summary.focus();
+        },
+    }, icon(ICONS[c], 18), WORDS[c]));
+    const menu = h("div", { class: "theme-menu", role: "group", "aria-label": "Theme" }, ...rows);
+    const box = h("details", { class: "theme-key" }, summary, menu);
+    const outside = (e) => {
+        if (!box.contains(e.target))
+            box.open = false;
+    };
+    box.addEventListener("toggle", () => {
+        if (box.open)
+            document.addEventListener("pointerdown", outside, true);
+        else
+            document.removeEventListener("pointerdown", outside, true);
+    });
+    box.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && box.open) {
+            box.open = false;
+            summary.focus();
+        }
+    });
+    const show = (resolved, choice) => {
+        const label = themeLabel(choice, resolved);
+        summary.replaceChildren(icon(ICONS[choice], 20));
+        summary.title = label;
+        summary.setAttribute("aria-label", label);
+        for (const r of rows)
+            r.setAttribute("aria-pressed", String(r.dataset.choice === choice));
+    };
+    show(theme.resolved, theme.choice);
+    theme.onChange(show);
+    return box;
+}

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

@@ -12,15 +12,15 @@ export type FriendsMountOptions = {
     /**
      * The player chose to join a friend. "nanoterra": `target` is the friend's https address (the kit has asked the player already) and there is no
      * `friend` (the window sends no name); with no `onJoin` the page goes there. "own": `target` is the `where` of the friend's invite, for the game to
-     * move the player, and `friend` names them (with no `onJoin`, there is no Join key).
+     * move the player, and `friend` names them (with no `onJoin`, there is no Join key and no Invite key: an invite would lead nowhere).
      */
     onJoin?: (target: string, friend?: {
         name: string;
     }) => void;
     /** The `fetch` to use (default: the page's). */
     fetch?: typeof fetch;
-    /** Asks the player a yes or no question (default: `window.confirm`). */
-    confirm?: (question: string) => boolean;
+    /** 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>;
 };
 export type MountedFriends = {
     /** Sets where the player is (friends see it). Null: no place. */

package/dist/friends/panel/mount.js

@@ -22,7 +22,6 @@ export function mountFriends(root, options) {
         return NOTHING;
     const n = ++mounts;
     const origin = (options.origin ?? "https://nano133.com").replace(/\/+$/, "");
-    const ask = options.confirm ?? ((q) => window.confirm(q));
     let where = options.where === undefined ? null : whereText(options.where);
     let isOpen = false;
     let destroyed = false;
@@ -34,7 +33,12 @@ export function mountFriends(root, options) {
     const title = h("h2", { class: "n133f-title", id: `n133f-title-${n}` }, "Friends");
     const closeKey = h("button", { class: "n133f-close", type: "button", "aria-label": "Close friends" }, icon("close", 20));
     const body = h("div", { class: "n133f-body" });
-    const panel = h("section", { class: `n133f-panel n133f-${options.mode}`, id: `n133f-panel-${n}`, role: "dialog", "aria-labelledby": `n133f-title-${n}`, "data-open": "false" }, h("header", { class: "n133f-head" }, title, closeKey), body);
+    const question = h("p", { class: "n133f-ask-q", id: `n133f-ask-${n}` });
+    const yesKey = h("button", { class: "n133f-btn n133f-primary", type: "button" });
+    const noKey = h("button", { class: "n133f-btn", type: "button" }, "Cancel");
+    const askBox = h("div", { class: "n133f-ask", role: "alertdialog", "aria-labelledby": `n133f-ask-${n}` }, question, h("div", { class: "n133f-ask-keys" }, yesKey, noKey));
+    askBox.hidden = true;
+    const panel = h("section", { class: `n133f-panel n133f-${options.mode}`, id: `n133f-panel-${n}`, role: "dialog", "aria-labelledby": `n133f-title-${n}`, "data-open": "false" }, h("header", { class: "n133f-head" }, title, closeKey), askBox, body);
     const wrap = h("div", { class: "n133-friends" }, key, panel);
     root.append(wrap);
     /** The requests (the thing to do) when there are any, else the friends online (another colour). The key's name says both. */
@@ -60,6 +64,7 @@ export function mountFriends(root, options) {
     const close = () => {
         if (destroyed || !isOpen)
             return;
+        answer?.(false);
         isOpen = false;
         panel.dataset.open = "false";
         key.setAttribute("aria-expanded", "false");
@@ -68,8 +73,34 @@ export function mountFriends(root, options) {
     };
     key.addEventListener("click", () => (isOpen ? close() : open()));
     closeKey.addEventListener("click", close);
+    /** The question in the panel: one at a time (a new one answers the old with no), and closing the panel answers no. */
+    let answer = null;
+    const askInPanel = (q, yesWord) => new Promise((resolve) => {
+        answer?.(false);
+        question.textContent = q;
+        yesKey.textContent = yesWord;
+        askBox.hidden = false;
+        answer = (yes) => {
+            answer = null;
+            askBox.hidden = true;
+            resolve(yes);
+            if (isOpen && !destroyed)
+                closeKey.focus();
+        };
+        open();
+        yesKey.focus();
+    });
+    yesKey.addEventListener("click", () => answer?.(true));
+    noKey.addEventListener("click", () => answer?.(false));
+    const ask = (q, yesWord) => (options.confirm ? Promise.resolve(options.confirm(q)) : askInPanel(q, yesWord));
+    cleanup.push(() => answer?.(false));
     const onKey = (e) => {
-        if (e.key === "Escape" && isOpen)
+        if (e.key !== "Escape" || !isOpen)
+            return;
+        // Escape answers an open question first, then closes the panel.
+        if (answer)
+            answer(false);
+        else
             close();
     };
     document.addEventListener("keydown", onKey);
@@ -132,12 +163,15 @@ export function mountFriends(root, options) {
             else if (m.type === "badge")
                 setBadge(m);
             else if (m.type === "join") {
-                if (!ask("Leave this game to join your friend?"))
-                    return;
-                if (options.onJoin)
-                    options.onJoin(m.url);
-                else
-                    window.location.assign(m.url);
+                const url = m.url;
+                void ask("Leave this game to join your friend?", "Join").then((yes) => {
+                    if (!yes || destroyed)
+                        return;
+                    if (options.onJoin)
+                        options.onJoin(url);
+                    else
+                        window.location.assign(url);
+                });
             }
             // "signin": the window needs a tap (Storage Access) inside itself. The panel stays as it is; the kit does nothing else.
         };
@@ -228,10 +262,10 @@ function ownList(body, options, whereNow, setBadge, ask) {
             if (p.invite && options.onJoin)
                 keys.push(btn("Join", () => options.onJoin(p.invite.where, { name: p.name }), "n133f-primary"));
             const here = whereNow();
-            if (here)
+            if (here && options.onJoin)
                 keys.push(btn("Invite", () => void act({ op: "invite", edge: p.edge, where: here }, `Invited ${p.name}.`)));
-            keys.push(btn("Remove", () => ask(`Remove ${p.name} from your friends?`) && void act({ op: "remove", edge: p.edge })));
-            keys.push(btn("Block", () => ask(`Block ${p.name}? They will not see you or be able to ask you again.`) && void act({ op: "block", edge: p.edge }), "n133f-quiet"));
+            keys.push(btn("Remove", () => void ask(`Remove ${p.name} from your friends?`, "Remove").then((yes) => (yes ? act({ op: "remove", edge: p.edge }) : undefined))));
+            keys.push(btn("Block", () => void ask(`Block ${p.name}? They will not see you or be able to ask you again.`, "Block").then((yes) => (yes ? act({ op: "block", edge: p.edge }) : undefined)), "n133f-quiet"));
         }
         if (p.state === "outgoing")
             keys.push(btn("Cancel", () => void act({ op: "decline", edge: p.edge })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nano133/nanoterra",
-  "version": "0.6.1",
+  "version": "0.7.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 and the friends list.",
   "type": "module",
   "main": "dist/index.js",

package/src/admin/panel/icons.ts

@@ -28,6 +28,9 @@ const SHAPES = {
   close: [["path", { d: "M6 6l12 12M18 6 6 18" }]],
   dup: [["rect", { x: 8, y: 8, width: 13, height: 13, rx: 2.5 }], ["path", { d: "M14.5 11.5v6M11.5 14.5h6M16 8V5.5A2.5 2.5 0 0 0 13.5 3h-8A2.5 2.5 0 0 0 3 5.5v8A2.5 2.5 0 0 0 5.5 16H8" }]],
   trash: [["path", { d: "M4 7h16M9.5 7V4.5h5V7M6.5 7l1 13h9l1-13" }]],
+  sun: [["circle", { cx: 12, cy: 12, r: 4 }], ["path", { d: "M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6" }]],
+  moon: [["path", { d: "M20 14.5A8.5 8.5 0 1 1 9.5 4a6.8 6.8 0 0 0 10.5 10.5Z" }]],
+  device: [["circle", { cx: 12, cy: 12, r: 8.5 }], ["path", { d: "M12 3.5a8.5 8.5 0 0 1 0 17Z", fill: "currentColor" }]],
   sparkle: [["path", { d: "M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6" }]],
 } satisfies Record<string, Shape[]>;
 

package/src/admin/panel/index.ts

@@ -21,6 +21,8 @@ export type { BestSeller, OverviewView } from "./overview.js";
 export { playerMatches, playersView } from "./players.js";
 export { TABS, tabBar } from "./tabs.js";
 export type { TabBar, TabId } from "./tabs.js";
+export { THEME_CHOICES, THEME_KEY, createTheme, readThemeChoice, resolveTheme, themeKey, themeLabel } from "./theme.js";
+export type { Theme, ThemeChoice, ThemeControl, ThemeOptions } from "./theme.js";
 export { icon } from "./icons.js";
 export type { IconName } from "./icons.js";
 export { aiPrompt, centsOf, changeText, ownedIds, shelfStats, soldText } from "./shelfData.js";

package/src/admin/panel/mount.ts

@@ -1,7 +1,7 @@
 // The admin panel: orders, owned looks, totals and the two game switches, from the game's own database. Only the game's owner can read them (the
 // handler checks it on every call); this page only shows them. `mountAdmin(element, options)` draws the panel into `element`.
 //
-// The page: a top bar (who is signed in, Live or Test mode, Sign out), what is still off (one banner), four numbers (earned, open now, to send back, players;
+// The page: a top bar (who is signed in, Live or Test mode, the light/dark theme key, Sign out), what is still off (one banner), four numbers (earned, open now, to send back, players;
 // each opens its list), then five tabs: Overview, Cosmetics (the Shelf), Orders, Players and Settings (the Game card, the sign-ins, the facts). Every tab is
 // made once; a new read of the summary fills them again and keeps the chosen tab, the Shelf's draft, a search and the Game card.
 
@@ -18,6 +18,7 @@ import { playersView } from "./players.js";
 import { shelfView } from "./shelf.js";
 import { signinsCard } from "./signins.js";
 import { tabBar, type TabId } from "./tabs.js";
+import { createTheme, themeKey, type ThemeControl } from "./theme.js";
 
 export type MountOptions = {
   /** The game's looks now (its looks.json). The Shelf starts from them. */
@@ -47,6 +48,10 @@ export type MountedAdmin = {
   reload(): Promise<void>;
   /** Resolves when the first read has been drawn (a test waits for it). */
   ready: Promise<void>;
+  /** The light or dark theme (the owner's choice in the top bar, kept in this browser). */
+  theme: Pick<ThemeControl, "choice" | "resolved" | "set" | "onChange">;
+  /** Stops following the device's theme and takes data-n133-theme off the page's <html>. */
+  destroy(): void;
 };
 
 const when = (ms: number | null) => (ms ? new Date(ms).toLocaleString() : "");
@@ -61,6 +66,11 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
   data.hidden = true;
   root.classList.add("n133-admin");
   root.replaceChildren(gate, data);
+  // Before the first read, so the gate is drawn in the chosen theme too.
+  const theme = createTheme(root);
+  /** The two theme keys (the gate's and the top bar's), made once: each one listens to the theme for the life of the page. */
+  const gateKey = themeKey(theme);
+  const barKey = themeKey(theme);
 
   /** The Shelf keeps its draft while the page redraws (a tab, a payment check): one view for the life of the page. */
   let shelf: ReturnType<typeof shelfView> | null = null;
@@ -91,7 +101,7 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
     data.replaceChildren();
     dash = null;
     gate.hidden = false;
-    gate.replaceChildren(h("div", { class: "gate-icon", "aria-hidden": "true" }, icon(kind, 28)), h("h2", {}, title), ...body.filter((b): b is Node => b !== null));
+    gate.replaceChildren(gateKey, h("div", { class: "gate-icon", "aria-hidden": "true" }, icon(kind, 28)), h("h2", {}, title), ...body.filter((b): b is Node => b !== null));
   }
 
   async function load(): Promise<void> {
@@ -104,7 +114,7 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
       if (!(e instanceof ApiError)) {
         // The data already drawn (if any) stays: a failed new read does not take it away.
         gate.hidden = false;
-        gate.replaceChildren(h("div", { class: "gate-icon", "aria-hidden": "true" }, icon("alert", 28)), h("p", {}, "The game's server did not answer. Try again."), h("button", { class: "btn", type: "button", onclick: () => void load() }, "Try again"));
+        gate.replaceChildren(gateKey, h("div", { class: "gate-icon", "aria-hidden": "true" }, icon("alert", 28)), h("p", {}, "The game's server did not answer. Try again."), h("button", { class: "btn", type: "button", onclick: () => void load() }, "Try again"));
         return;
       }
       if (e.status === 403 && e.body.signedInAs) {
@@ -174,7 +184,7 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
 
     const who = h("div", { class: "who" });
     const chips = h("div", { class: "chips" });
-    const top = h("header", { class: "topbar" }, h("div", { class: "who-mark", "aria-hidden": "true" }, icon("lock", 18)), who, chips, h("div", { class: "topbar-keys" }, signOutButton()));
+    const top = h("header", { class: "topbar" }, h("div", { class: "who-mark", "aria-hidden": "true" }, icon("lock", 18)), who, chips, h("div", { class: "topbar-keys" }, barKey, signOutButton()));
     const banner = h("div", { class: "banner warnings", role: "alert" });
     const kpis = h("div", { class: "kpis", role: "group", "aria-label": "Your game in numbers" });
     const settings = h("div", { class: "settings-grid" });
@@ -241,6 +251,6 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
     dash.update(s);
   }
 
-  return { reload: () => load(), ready: load() };
+  return { reload: () => load(), ready: load(), theme, destroy: () => theme.destroy() };
 }