@nano133/nanoterra 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 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
+  `FRIENDS_LIMITS.nameMax` and the panel's name field.
+
 ## 0.6.0 (2026-10-30)
 
 - **A friends list for the game's players** (`@nano133/nanoterra/friends`, `/friends/d1`, `/friends/firestore`, `/friends/conformance`, `/friends/panel` and

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):
@@ -682,7 +713,7 @@ import "@nano133/nanoterra/friends/style.css";
 const settings = await (await fetch("/api/settings")).json();       // your route: loadGameSettings(store, defaults) from "@nano133/nanoterra/admin"
 const friends = mountFriends(document.getElementById("friends")!, {
   mode: settings.friends,          // "nanoterra" | "own" | "off"
-  game: "echo-island",             // your game's id on Nanoterra (its listing's id)
+  game: "my-game",                 // your game's id on Nanoterra (its listing's id: Echo Island's is "gem-island")
   where: "Lobby",                  // where the player is, in your words: friends see it
   onJoin: (target) => go(target),  // optional: "nanoterra" gives a friend's https address, "own" an invite's place (and the friend's name)
 });

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/handler.d.ts

@@ -22,8 +22,8 @@ export declare const FRIENDS_LIMITS: {
     };
     /** The biggest body of a POST. */
     readonly bodyMax: 1024;
-    /** The longest name a request may send. */
-    readonly nameMax: 64;
+    /** The longest name a request may send: room for a whole Nano address (65 characters with "nano_"), which a directory may accept as a name. */
+    readonly nameMax: 80;
 };
 export declare function createFriendsHandler(options: FriendsHandlerOptions): {
     base: string;

package/dist/friends/handler.js

@@ -19,8 +19,8 @@ export const FRIENDS_LIMITS = {
     calls: { limit: 30, windowMs: 60_000 },
     /** The biggest body of a POST. */
     bodyMax: 1024,
-    /** The longest name a request may send. */
-    nameMax: 64,
+    /** The longest name a request may send: room for a whole Nano address (65 characters with "nano_"), which a directory may accept as a name. */
+    nameMax: 80,
 };
 const sharedLimit = memoryLimiter();
 const OPS = new Set(["request", "accept", "decline", "remove", "block", "unblock", "invite", "pulse", "visibility"]);

package/dist/friends/panel/mount.js

@@ -173,7 +173,7 @@ function ownList(body, options, whereNow, setBadge, ask) {
     const api = createApi(options.base ?? "/friends", options.fetch);
     const lease = Array.from(globalThis.crypto.getRandomValues(new Uint8Array(16)), (b) => b.toString(16).padStart(2, "0")).join("");
     const status = h("p", { class: "n133f-status", role: "status", "aria-live": "polite" });
-    const nameInput = h("input", { class: "n133f-input", type: "text", name: "friend", maxlength: 64, autocomplete: "off", placeholder: "A player's name", "aria-label": "A player's name" });
+    const nameInput = h("input", { class: "n133f-input", type: "text", name: "friend", maxlength: 80, autocomplete: "off", placeholder: "A player's name", "aria-label": "A player's name" });
     const addKey = h("button", { class: "n133f-btn n133f-primary", type: "submit" }, "Add");
     const form = h("form", { class: "n133f-add" }, nameInput, addKey);
     const list = h("div", { class: "n133f-list" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nano133/nanoterra",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "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() };
 }
 

package/src/admin/panel/style.css

@@ -4,32 +4,106 @@
    orders as a table from 760 px.
    To theme it, set the --n133-* custom properties on the element that holds the panel (or on any parent): --n133-ink, --n133-ink-soft, --n133-paper, --n133-line,
    --n133-gem, --n133-gem-dark, --n133-sea, --n133-radius and --n133-font; and, with the tabbed layout, --n133-ground (the wells inside a card), --n133-warn and
-   --n133-bad (the amber and red of a warning and a problem) and --n133-shadow (the cards' shadow). */
+   --n133-bad (the amber and red of a warning and a problem) and --n133-shadow (the cards' shadow). Every other colour has a hook too (the list below, e.g.
+   --n133-ok-bg). Those set the LIGHT theme. The DARK theme reads the twins with "dark-" in the name: --n133-dark-ink, --n133-dark-paper, --n133-dark-shadow and so
+   on. The panel's theme key (theme.ts) sets data-theme="light" or "dark" on the panel. */
 
 .n133-admin {
   --font: var(--n133-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  --gem: var(--n133-gem, #20c9a6);
-  --gem-dark: var(--n133-gem-dark, #0e8a72);
+  --radius: var(--n133-radius, 18px);
   --ink: var(--n133-ink, #16202e);
   --ink-soft: var(--n133-ink-soft, #4a5568);
-  --line: var(--n133-line, #dbe4ee);
   --paper: var(--n133-paper, #ffffff);
-  --radius: var(--n133-radius, 18px);
-  --sea: var(--n133-sea, #1f8fc4);
   --ground: var(--n133-ground, #f4f7fb);
+  --line: var(--n133-line, #dbe4ee);
+  --gem: var(--n133-gem, #20c9a6);
+  --gem-dark: var(--n133-gem-dark, #0e8a72);
+  --on-gem: var(--n133-on-gem, #062b23);
+  --sea: var(--n133-sea, #1f8fc4);
   --warn: var(--n133-warn, #8a4b00);
   --bad: var(--n133-bad, #b4142f);
-  --shadow: var(--n133-shadow, 0 1px 2px rgb(16 24 40 / 0.05), 0 6px 18px -6px rgb(16 24 40 / 0.1));
+  --ok-bg: var(--n133-ok-bg, #dcf6ec);
+  --ok-ink: var(--n133-ok-ink, #0b6a52);
+  --info: var(--n133-info, #1d5fa8);
+  --info-bg: var(--n133-info-bg, #e3f0ff);
+  --info-ink: var(--n133-info-ink, #134e86);
+  --warn-bg: var(--n133-warn-bg, #fff1d6);
+  --bad-bg: var(--n133-bad-bg, #ffe3e8);
+  --bad-ink: var(--n133-bad-ink, #9e1029);
+  --neutral-bg: var(--n133-neutral-bg, #eef1f4);
+  --neutral-ink: var(--n133-neutral-ink, #3f4a5a);
+  --note-bg: var(--n133-note-bg, #fff7e8);
+  --note-line: var(--n133-note-line, #f3c27a);
+  --note-ink: var(--n133-note-ink, #4a2d00);
+  --alarm-bg: var(--n133-alarm-bg, #fff1f3);
+  --alarm-ink: var(--n133-alarm-ink, #5c0716);
+  --quiet: var(--n133-quiet, #6b7686);
+  --violet: var(--n133-violet, #6d3fc0);
+  --changed: var(--n133-changed, #c47a00);
+  --stage: var(--n133-stage, #ffffff);
+  --tint-empty: var(--n133-tint-empty, #9fb3c8);
+  --swatch-empty: var(--n133-swatch-empty, #c9d3df);
+  --swatch-edge: var(--n133-swatch-edge, rgb(0 0 0 / 0.18));
+  --code-bg: var(--n133-code-bg, #0f172a);
+  --code-ink: var(--n133-code-ink, #e6edf6);
+  /* The colour of every shadow (r g b), and the shadow of a card. */
+  --shade: 16 24 40;
+  --shadow: var(--n133-shadow, 0 1px 2px rgb(var(--shade) / 0.05), 0 6px 18px -6px rgb(var(--shade) / 0.1));
+  --gem-hover: color-mix(in srgb, var(--gem) 85%, #ffffff);
   --gap: 12px;
   container: n133 / inline-size;
   box-sizing: border-box;
   max-width: 1200px;
   margin: 0 auto;
   color: var(--ink);
+  color-scheme: light;
   font: 15px/1.45 var(--font);
   -webkit-text-size-adjust: 100%;
 }
 
+/* Dark: mountAdmin sets data-theme="dark" on the panel (the owner's choice, or the device's setting). Each colour has a --n133-dark-* twin; the shadows go
+   black and faint, so the cards stand on their borders. */
+.n133-admin[data-theme="dark"] {
+  --ink: var(--n133-dark-ink, #e7edf5);
+  --ink-soft: var(--n133-dark-ink-soft, #a9b5c5);
+  --paper: var(--n133-dark-paper, #171f2b);
+  --ground: var(--n133-dark-ground, #0f151e);
+  --line: var(--n133-dark-line, #303c4e);
+  --gem: var(--n133-dark-gem, #20c9a6);
+  --gem-dark: var(--n133-dark-gem-dark, #3fd8b6);
+  --on-gem: var(--n133-dark-on-gem, #062b23);
+  --sea: var(--n133-dark-sea, #62bcec);
+  --warn: var(--n133-dark-warn, #f2b45c);
+  --bad: var(--n133-dark-bad, #ff8293);
+  --ok-bg: var(--n133-dark-ok-bg, #14392f);
+  --ok-ink: var(--n133-dark-ok-ink, #7fe4c4);
+  --info: var(--n133-dark-info, #6eaaf0);
+  --info-bg: var(--n133-dark-info-bg, #172f4c);
+  --info-ink: var(--n133-dark-info-ink, #a3ccf6);
+  --warn-bg: var(--n133-dark-warn-bg, #3a2a12);
+  --bad-bg: var(--n133-dark-bad-bg, #45171f);
+  --bad-ink: var(--n133-dark-bad-ink, #ffa7b4);
+  --neutral-bg: var(--n133-dark-neutral-bg, #263040);
+  --neutral-ink: var(--n133-dark-neutral-ink, #c8d1dc);
+  --note-bg: var(--n133-dark-note-bg, #2a2113);
+  --note-line: var(--n133-dark-note-line, #7a5a22);
+  --note-ink: var(--n133-dark-note-ink, #f6dfb8);
+  --alarm-bg: var(--n133-dark-alarm-bg, #3a161d);
+  --alarm-ink: var(--n133-dark-alarm-ink, #ffcad2);
+  --quiet: var(--n133-dark-quiet, #98a5b7);
+  --violet: var(--n133-dark-violet, #bba3f6);
+  --changed: var(--n133-dark-changed, #e3a440);
+  --stage: var(--n133-dark-stage, #2a3546);
+  --tint-empty: var(--n133-dark-tint-empty, #6f86a0);
+  --swatch-empty: var(--n133-dark-swatch-empty, #66748a);
+  --swatch-edge: var(--n133-dark-swatch-edge, rgb(255 255 255 / 0.4));
+  --code-bg: var(--n133-dark-code-bg, #0a0f17);
+  --code-ink: var(--n133-dark-code-ink, #e6edf6);
+  --shade: 0 0 0;
+  --shadow: var(--n133-dark-shadow, 0 1px 2px rgb(0 0 0 / 0.3));
+  color-scheme: dark;
+}
+
 .n133-admin *,
 .n133-admin *::before,
 .n133-admin *::after {
@@ -93,7 +167,7 @@
 @media (hover: hover) {
   .n133-admin .btn:not(:disabled):hover {
     border-color: color-mix(in srgb, var(--ink) 30%, var(--line));
-    box-shadow: 0 1px 3px rgb(16 24 40 / 0.1);
+    box-shadow: 0 1px 3px rgb(var(--shade) / 0.1);
   }
 }
 
@@ -105,13 +179,13 @@
 .n133-admin .btn-primary {
   border-color: var(--gem-dark);
   background: var(--gem);
-  color: #062b23;
+  color: var(--on-gem);
 }
 
 @media (hover: hover) {
   .n133-admin .btn-primary:not(:disabled):hover {
     border-color: var(--gem-dark);
-    background: color-mix(in srgb, var(--gem) 85%, #ffffff);
+    background: var(--gem-hover);
   }
 }
 
@@ -386,30 +460,116 @@
 }
 
 .n133-admin .chip-ok {
-  background: #dcf6ec;
-  color: #0b6a52;
+  background: var(--ok-bg);
+  color: var(--ok-ink);
 }
 
 .n133-admin .chip-warn {
-  background: #fff1d6;
+  background: var(--warn-bg);
   color: var(--warn);
 }
 
 .n133-admin .topbar-keys {
   display: flex;
+  align-items: center;
+  gap: 6px;
   margin-left: auto;
 }
 
+/* ---- The theme key (theme.ts): a 44 px round key that opens a menu of Device, Light and Dark ---- */
+
+.n133-admin .theme-key {
+  position: relative;
+}
+
+.n133-admin .gate {
+  position: relative;
+}
+
+.n133-admin .gate > .theme-key {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.n133-admin .theme-summary {
+  width: 44px;
+  padding: 0;
+  color: var(--ink-soft);
+  list-style: none;
+}
+
+.n133-admin .theme-summary::-webkit-details-marker {
+  display: none;
+}
+
+.n133-admin .theme-key[open] > .theme-summary {
+  border-color: var(--line);
+  background: var(--ground);
+  color: var(--ink);
+}
+
+.n133-admin .theme-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 20;
+  display: grid;
+  gap: 2px;
+  min-width: 156px;
+  padding: 6px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--paper);
+  box-shadow: 0 10px 30px -10px rgb(var(--shade) / 0.35);
+  text-align: left;
+}
+
+.n133-admin .theme-choice {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--ink);
+  font: 650 15px/1 var(--font);
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+@media (hover: hover) {
+  .n133-admin .theme-choice:hover {
+    background: var(--ground);
+  }
+}
+
+.n133-admin .theme-choice[aria-pressed="true"] {
+  background: color-mix(in srgb, var(--gem) 16%, var(--paper));
+  color: var(--ink);
+}
+
+.n133-admin .theme-choice[aria-pressed="true"] .icon {
+  color: var(--gem-dark);
+}
+
+.n133-admin .theme-choice:focus-visible {
+  outline: 3px solid var(--sea);
+  outline-offset: -3px;
+}
+
 /* ---- What is still off: one banner ---- */
 
 .n133-admin .banner {
   display: flex;
   gap: 12px;
   padding: 14px 16px;
-  border: 1px solid #f3c27a;
+  border: 1px solid var(--note-line);
   border-radius: var(--radius);
-  background: #fff7e8;
-  color: #4a2d00;
+  background: var(--note-bg);
+  color: var(--note-ink);
 }
 
 .n133-admin .banner h2 {
@@ -461,11 +621,11 @@
 }
 
 .n133-admin .kpi-open {
-  --accent: #1d5fa8;
+  --accent: var(--info);
 }
 
 .n133-admin .kpi-late {
-  --accent: #6b7686;
+  --accent: var(--quiet);
 }
 
 .n133-admin .kpi-late.is-alert {
@@ -475,7 +635,7 @@
 }
 
 .n133-admin .kpi-players {
-  --accent: #6d3fc0;
+  --accent: var(--violet);
 }
 
 .n133-admin .kpi-top {
@@ -627,7 +787,7 @@
 .n133-admin .seg-btn.is-on {
   background: var(--paper);
   color: var(--ink);
-  box-shadow: 0 1px 3px rgb(16 24 40 / 0.14);
+  box-shadow: 0 1px 3px rgb(var(--shade) / 0.14);
 }
 
 .n133-admin .seg-btn.is-alert:not(.is-on) {
@@ -661,51 +821,51 @@
   align-items: center;
   padding: 3px 10px;
   border-radius: 999px;
-  background: #eef1f4;
-  color: #3f4a5a;
+  background: var(--neutral-bg);
+  color: var(--neutral-ink);
   font-size: 13px;
   font-weight: 700;
   white-space: nowrap;
 }
 
 .n133-admin .badge-paid {
-  background: #dcf6ec;
-  color: #0b6a52;
+  background: var(--ok-bg);
+  color: var(--ok-ink);
 }
 
 .n133-admin .badge-open {
-  background: #e3f0ff;
-  color: #134e86;
+  background: var(--info-bg);
+  color: var(--info-ink);
 }
 
 .n133-admin .badge-paid_late {
-  background: #ffe3e8;
-  color: #9e1029;
+  background: var(--bad-bg);
+  color: var(--bad-ink);
 }
 
 .n133-admin .pill {
   flex: none;
   padding: 3px 10px;
   border-radius: 999px;
-  background: #eef1f4;
-  color: #3f4a5a;
+  background: var(--neutral-bg);
+  color: var(--neutral-ink);
   font-size: 13px;
   font-weight: 700;
 }
 
 .n133-admin .pill-on {
-  background: #dcf6ec;
-  color: #0b6a52;
+  background: var(--ok-bg);
+  color: var(--ok-ink);
 }
 
 .n133-admin .look-dot,
 .n133-admin .swatch {
-  --swatch: #c9d3df;
+  --swatch: var(--swatch-empty);
   display: inline-block;
   flex: none;
   width: 12px;
   height: 12px;
-  border: 1px solid rgb(0 0 0 / 0.18);
+  border: 1px solid var(--swatch-edge);
   border-radius: 50%;
   background: var(--swatch);
 }
@@ -726,31 +886,31 @@
   gap: 4px;
   padding: 2px 8px;
   border-radius: 999px;
-  background: #eef1f4;
-  color: #3f4a5a;
+  background: var(--neutral-bg);
+  color: var(--neutral-ink);
   font-size: 12px;
   font-weight: 700;
   white-space: nowrap;
 }
 
 .n133-admin .mark-new {
-  background: #e3f0ff;
-  color: #134e86;
+  background: var(--info-bg);
+  color: var(--info-ink);
 }
 
 .n133-admin .mark-changed {
-  background: #fff1d6;
+  background: var(--warn-bg);
   color: var(--warn);
 }
 
 .n133-admin .mark-bad {
-  background: #ffe3e8;
+  background: var(--bad-bg);
   color: var(--bad);
 }
 
 .n133-admin .mark-ok {
-  background: #dcf6ec;
-  color: #0b6a52;
+  background: var(--ok-bg);
+  color: var(--ok-ink);
 }
 
 .n133-admin .share {
@@ -785,8 +945,8 @@
   gap: 6px 8px;
   padding: 10px 12px;
   border-radius: 12px;
-  background: #fff1f3;
-  color: #5c0716;
+  background: var(--alarm-bg);
+  color: var(--alarm-ink);
   font-size: 14px;
 }
 
@@ -1163,10 +1323,10 @@
   align-items: center;
   gap: 8px 10px;
   padding: 10px 12px;
-  border: 1px solid #f3c27a;
+  border: 1px solid var(--note-line);
   border-radius: 14px;
-  background: #fff7e8;
-  color: #4a2d00;
+  background: var(--note-bg);
+  color: var(--note-ink);
   font-size: 14px;
 }
 
@@ -1201,12 +1361,12 @@
 
 /* The stage: the picture on a soft tint of the look's own body colour. */
 .n133-admin .shelf-stage {
-  --tint: #9fb3c8;
+  --tint: var(--tint-empty);
   position: relative;
   display: grid;
   place-items: center;
   min-height: 128px;
-  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--tint) 30%, var(--paper)), color-mix(in srgb, var(--tint) 10%, var(--paper)) 70%);
+  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--tint) 30%, var(--stage)), color-mix(in srgb, var(--tint) 10%, var(--stage)) 70%);
 }
 
 .n133-admin .shelf-pic {
@@ -1244,7 +1404,7 @@
   padding: 4px 10px;
   border-radius: 999px;
   background: var(--paper);
-  box-shadow: 0 1px 3px rgb(16 24 40 / 0.15);
+  box-shadow: 0 1px 3px rgb(var(--shade) / 0.15);
   font-size: 13px;
   font-weight: 800;
   font-variant-numeric: tabular-nums;
@@ -1315,11 +1475,11 @@
 }
 
 .n133-admin .shelf-card.is-new {
-  border-color: color-mix(in srgb, #1d5fa8 45%, var(--line));
+  border-color: color-mix(in srgb, var(--info) 45%, var(--line));
 }
 
 .n133-admin .shelf-card.is-changed {
-  border-color: color-mix(in srgb, #c47a00 50%, var(--line));
+  border-color: color-mix(in srgb, var(--changed) 50%, var(--line));
 }
 
 .n133-admin .shelf-card.has-problem {
@@ -1331,7 +1491,7 @@
   gap: 0;
   border-width: 2px;
   border-color: var(--ink);
-  box-shadow: 0 10px 30px -10px rgb(16 24 40 / 0.25);
+  box-shadow: 0 10px 30px -10px rgb(var(--shade) / 0.25);
 }
 
 .n133-admin .shelf-editing:focus {
@@ -1379,8 +1539,8 @@
   margin: 12px 14px 0;
   padding: 10px 12px 10px 30px;
   border-radius: 12px;
-  background: #fff1f3;
-  color: #5c0716;
+  background: var(--alarm-bg);
+  color: var(--alarm-ink);
   font-size: 14px;
 }
 
@@ -1616,7 +1776,7 @@
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   background: color-mix(in srgb, var(--paper) 96%, transparent);
-  box-shadow: 0 -8px 24px -12px rgb(16 24 40 / 0.25);
+  box-shadow: 0 -8px 24px -12px rgb(var(--shade) / 0.25);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
 }
@@ -1674,8 +1834,8 @@
   padding: 12px;
   overflow: auto;
   border-radius: 12px;
-  background: #0f172a;
-  color: #e6edf6;
+  background: var(--code-bg);
+  color: var(--code-ink);
   font-size: 12px;
 }
 
@@ -1753,7 +1913,7 @@
   height: 30px;
   border-radius: 50%;
   background: var(--paper);
-  box-shadow: 0 1px 3px rgb(16 24 40 / 0.25);
+  box-shadow: 0 1px 3px rgb(var(--shade) / 0.25);
 }
 
 .n133-admin .switch.switch-on {
@@ -1761,7 +1921,7 @@
   padding: 0 6px 0 14px;
   border-color: var(--gem-dark);
   background: var(--gem);
-  color: #052b23;
+  color: var(--on-gem);
 }
 
 .n133-admin .switch:disabled {
@@ -1801,7 +1961,7 @@
   gap: 8px;
   padding: 12px;
   border-radius: 12px;
-  background: #fff1f3;
+  background: var(--alarm-bg);
 }
 
 .n133-admin .signout-confirm p {
@@ -2044,7 +2204,7 @@
 
   .n133-admin .tabbar-tab.is-on .tab-count {
     background: var(--gem);
-    color: #062b23;
+    color: var(--on-gem);
   }
 }
 

package/src/admin/panel/theme.ts

@@ -0,0 +1,179 @@
+// 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, type IconName } from "./icons.js";
+
+export type ThemeChoice = "device" | "light" | "dark";
+export type Theme = "light" | "dark";
+
+/** The localStorage key of the choice. */
+export const THEME_KEY = "n133-admin-theme";
+export const THEME_CHOICES: readonly ThemeChoice[] = ["device", "light", "dark"];
+const QUERY = "(prefers-color-scheme: dark)";
+
+/** The theme a choice gives: Device follows the device's setting. */
+export const resolveTheme = (choice: ThemeChoice, deviceDark: boolean): Theme => (choice === "device" ? (deviceDark ? "dark" : "light") : choice);
+
+const isChoice = (v: unknown): v is ThemeChoice => typeof v === "string" && (THEME_CHOICES as readonly string[]).includes(v);
+
+type Store = Pick<Storage, "getItem" | "setItem">;
+
+/** The page's localStorage, or null where reading it throws (some private windows, a blocked site). */
+function pageStorage(): Store | null {
+  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: Store | null = pageStorage()): ThemeChoice {
+  try {
+    const v = storage?.getItem(THEME_KEY);
+    return isChoice(v) ? v : "device";
+  } catch {
+    return "device";
+  }
+}
+
+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 function createTheme(root: HTMLElement, options: ThemeOptions = {}): ThemeControl {
+  const storage = options.storage === undefined ? pageStorage() : options.storage;
+  const host = options.host === undefined ? (globalThis.document?.documentElement ?? null) : options.host;
+  let media: ReturnType<NonNullable<ThemeOptions["matchMedia"]>> | null = 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: Theme = "light";
+  const listeners = new Set<(resolved: Theme, choice: ThemeChoice) => void>();
+
+  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: Record<ThemeChoice, string> = { device: "Device", light: "Light", dark: "Dark" };
+const ICONS: Record<ThemeChoice, IconName> = { device: "device", light: "sun", dark: "moon" };
+
+/** "Theme: Dark", or "Theme: Device (dark now)". */
+export const themeLabel = (choice: ThemeChoice, resolved: Theme): string => (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: ThemeControl): HTMLElement {
+  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: Event) => {
+    if (!box.contains(e.target as Node)) 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 as KeyboardEvent).key === "Escape" && box.open) {
+      box.open = false;
+      summary.focus();
+    }
+  });
+
+  const show = (resolved: Theme, choice: ThemeChoice) => {
+    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/src/friends/handler.ts

@@ -38,8 +38,8 @@ export const FRIENDS_LIMITS = {
   calls: { limit: 30, windowMs: 60_000 },
   /** The biggest body of a POST. */
   bodyMax: 1024,
-  /** The longest name a request may send. */
-  nameMax: 64,
+  /** The longest name a request may send: room for a whole Nano address (65 characters with "nano_"), which a directory may accept as a name. */
+  nameMax: 80,
 } as const;
 
 const sharedLimit = memoryLimiter();

package/src/friends/panel/mount.ts

@@ -202,7 +202,7 @@ function ownList(body: HTMLElement, options: FriendsMountOptions, whereNow: () =
   const api: Api = createApi(options.base ?? "/friends", options.fetch);
   const lease = Array.from(globalThis.crypto.getRandomValues(new Uint8Array(16)), (b) => b.toString(16).padStart(2, "0")).join("");
   const status = h("p", { class: "n133f-status", role: "status", "aria-live": "polite" });
-  const nameInput = h("input", { class: "n133f-input", type: "text", name: "friend", maxlength: 64, autocomplete: "off", placeholder: "A player's name", "aria-label": "A player's name" });
+  const nameInput = h("input", { class: "n133f-input", type: "text", name: "friend", maxlength: 80, autocomplete: "off", placeholder: "A player's name", "aria-label": "A player's name" });
   const addKey = h("button", { class: "n133f-btn n133f-primary", type: "submit" }, "Add");
   const form = h("form", { class: "n133f-add" }, nameInput, addKey);
   const list = h("div", { class: "n133f-list" });