@nano133/nanoterra 0.8.1 → 0.9.3

package/src/shop/nodes.ts

@@ -0,0 +1,115 @@
+// Talking to Nano nodes, with failover (the game starter's src/worker/nodes.ts). The shop holds no key and sends nothing: it only READS the ledger, to see
+// whether the creator's address received a payment.
+//
+// The order of the list (`nodesFor`, the starter's defaults):
+// 1. Nanswap Nodes, when the game gives its API key (the starter's secret NODE_API_KEY; a free key: https://nanswap.com/nano-node).
+// 2. The game's own list of node addresses (the starter's setting NANO_NODES), or else the public nodes that need no key. Those are run by volunteers,
+//    with no promise of uptime.
+// A node that does not answer, answers with an HTTP error or answers with an error is skipped, and the next one is asked. When none answers, the check
+// fails closed: nothing is credited, and the order waits.
+
+/** The `fetch` the shop uses (a test gives its own). */
+export type Fetch = (input: string, init?: RequestInit) => Promise<Response>;
+
+export type NanoNode = { name: string; url: string; headers?: Record<string, string> };
+
+/** The keyed provider. Its key is a secret: the game reads it from its secret store and passes it, never writes it in code. */
+export const KEYED_NODE = { name: "Nanswap Nodes", url: "https://nodes.nanswap.com/XNO", keyHeader: "nodes-api-key" } as const;
+
+/** Public nodes with no key (from the community list at publicnodes.somenano.com, read 2026-10-21). */
+export const PUBLIC_NODES: readonly NanoNode[] = [
+  { name: "rpc.nano.to", url: "https://rpc.nano.to" },
+  { name: "Rainstorm", url: "https://rainstorm.city/api" },
+  { name: "NanOslo", url: "https://nanoslo.0x.no/proxy" },
+];
+
+/**
+ * An optional setting or secret: its value without spaces around it, or undefined when it is not set. A setup page that needs a value in every field
+ * (Cloudflare's "Deploy" page) gets "none", "skip", "off" or "-" (in any case), which also mean "not set".
+ */
+export function settingValue(v?: string | null): string | undefined {
+  const s = (v ?? "").trim();
+  return s && !/^(none|skip|off|-)$/i.test(s) ? s : undefined;
+}
+
+/**
+ * The nodes to ask, in order. `NODE_API_KEY`: the keyed provider's key (it goes first). `NANO_NODES`: the game's own node addresses, separated by
+ * commas, instead of the public list: https only, and plain http only for a node on this computer (local development with a mock node). The names are
+ * the game starter's, so `nodesFor(env)` works as it is.
+ */
+export function nodesFor(settings: { NODE_API_KEY?: string | null; NANO_NODES?: string | null } = {}): NanoNode[] {
+  const list: NanoNode[] = [];
+  const key = settingValue(settings.NODE_API_KEY);
+  if (key) list.push({ name: KEYED_NODE.name, url: KEYED_NODE.url, headers: { [KEYED_NODE.keyHeader]: key } });
+  const own = (settings.NANO_NODES ?? "")
+    .split(",")
+    .map((s) => s.trim())
+    .filter((s) => /^https:\/\/[^\s]+$/.test(s) || /^http:\/\/(127\.0\.0\.1|localhost)(:\d+)?(\/[^\s]*)?$/.test(s));
+  list.push(...(own.length ? own.map((url) => ({ name: new URL(url).host, url })) : PUBLIC_NODES.map((n) => ({ ...n }))));
+  return list;
+}
+
+export class NodeDown extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "NodeDown";
+  }
+}
+
+/** Nodes that failed lately are asked last for a short time (in this copy of the server only). */
+const restUntil = new Map<string, number>();
+const REST_MS = 30_000;
+
+export type RpcOptions = { fetch?: Fetch; timeoutMs?: number; now?: () => number };
+
+/**
+ * Sends one RPC call to the first node that answers. Returns its answer, or null when the node says the thing does not exist ("Account not found",
+ * "Block not found"). Throws NodeDown when no node answers.
+ */
+export async function rpc(nodes: readonly NanoNode[], body: Record<string, unknown>, o: RpcOptions = {}): Promise<{ node: string; answer: Record<string, any> | null }> {
+  if (!nodes.length) throw new NodeDown("no Nano node is set");
+  const fetchFn: Fetch = o.fetch ?? ((input, init) => fetch(input, init));
+  const now = o.now ?? Date.now;
+  const resting = (n: NanoNode) => (restUntil.get(n.url) ?? 0) > now();
+  const order = [...nodes.filter((n) => !resting(n)), ...nodes.filter(resting)];
+  const why: string[] = [];
+  for (const node of order) {
+    try {
+      const res = await fetchFn(node.url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Accept: "application/json", "User-Agent": "nano-game-starter", ...node.headers },
+        body: JSON.stringify(body),
+        redirect: "manual",
+        signal: AbortSignal.timeout(o.timeoutMs ?? 5000),
+      });
+      const text = await res.text();
+      let answer: unknown;
+      try {
+        answer = JSON.parse(text);
+      } catch {
+        throw new Error(`HTTP ${res.status}, not JSON`);
+      }
+      if (!answer || typeof answer !== "object") throw new Error(`HTTP ${res.status}, not an object`);
+      const error = (answer as { error?: unknown }).error;
+      if (error !== undefined) {
+        if (/not found/i.test(String(error))) {
+          restUntil.delete(node.url);
+          return { node: node.name, answer: null };
+        }
+        throw new Error(String(error).slice(0, 80));
+      }
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      restUntil.delete(node.url);
+      return { node: node.name, answer: answer as Record<string, any> };
+    } catch (e) {
+      restUntil.set(node.url, now() + REST_MS);
+      why.push(`${node.name}: ${e instanceof Error ? e.message : String(e)}`);
+    }
+  }
+  throw new NodeDown(`no Nano node answered (${why.join("; ")})`);
+}
+
+/** For tests: forget which nodes failed. */
+export function forgetNodeHealth(): void {
+  restUntil.clear();
+}

package/src/shop/orders.ts

@@ -0,0 +1,93 @@
+// Orders: the clean amount and its reservation (the game starter's src/worker/orders.ts; the writes are the store's, ./store.ts).
+// DO NOT CHANGE THE MONEY RULES HERE without the tests that pin them (the conformance suite, test/shop-*.test.ts).
+//
+// The reservation (the same rule as the Nano Unlock WordPress plugin):
+// - An order asks for its price, rounded up to 0.0001 XNO. While another held order has that exact amount, it asks for one step (0.0001 XNO) more, and so
+//   on: at most a tenth of the price more, and at most 99 steps. When every step is held, the player is asked to try again in a moment.
+// - No two held orders can ever ask for the same amount (the store's unique rule), so one payment can only match one order. Two orders made at the same
+//   instant cannot both take an amount: the store refuses the second, and it moves on to the next step.
+// - The amount stays held from the order's start to LATE_HOLD_MS after it expires, so a late payment is still recognised (as "paid late") and never counts
+//   for a newer order. A paid order frees its amount at once (its payment's hash is recorded, so that payment never counts again).
+
+import { compareRaw, isClean, plusSteps, STEP_RAW } from "./amount.js";
+import { CLOCK_SLACK_MS } from "./match.js";
+import type { OrderStatus, ShopOrder, ShopStore } from "./store.js";
+
+export const ORDER_TTL_MS = 15 * 60_000;
+export const LATE_HOLD_MS = 60 * 60_000;
+export const MAX_STEPS = 100;
+export const MAX_EXTRA_PERCENT = 10;
+/** One player can wait on this many orders at once. */
+export const MAX_OPEN_PER_PLAYER = 3;
+/** An order's id: 24 hex characters. */
+export const ORDER_ID_PATTERN = /^[0-9a-f]{24}$/;
+
+/** Every amount for this price is held by another order: ask the player to try again in a minute. */
+export class ShopBusy extends Error {
+  constructor(message = "every amount for this price is held") {
+    super(message);
+    this.name = "ShopBusy";
+  }
+}
+
+/** How many amounts a price may use: the price and the steps above it. At least 1. */
+export function stepsFor(price: string): number {
+  const base = BigInt(price) / STEP_RAW;
+  return Math.max(1, Math.min(MAX_STEPS, Number((base * BigInt(MAX_EXTRA_PERCENT)) / 100n) + 1));
+}
+
+/** The amounts an order of this price may ask for, smallest first. */
+export function amountsFor(price: string): string[] {
+  if (!isClean(price)) throw new Error("the price must be a clean amount");
+  return Array.from({ length: stepsFor(price) }, (_, k) => plusSteps(price, k));
+}
+
+/** A new order id: 12 random bytes as hex. */
+export const newOrderId = (): string => Array.from(globalThis.crypto.getRandomValues(new Uint8Array(12)), (x) => x.toString(16).padStart(2, "0")).join("");
+
+export type ReserveInput = { player: string; lookId: string; usd: string; rate: number; price: string; visitor: string | null; now: number; ttlMs?: number };
+
+/** Makes an order with the smallest free amount at or above `p.price` (a clean amount in raw). Throws ShopBusy when every allowed amount is held. */
+export async function reserveOrder(store: ShopStore, p: ReserveInput): Promise<ShopOrder> {
+  const amounts = amountsFor(p.price);
+  await store.tidy(p.now);
+  const held = await store.heldAmounts(amounts);
+  const expiresAt = p.now + (p.ttlMs ?? ORDER_TTL_MS);
+  for (const amount of amounts) {
+    if (held.has(amount)) continue;
+    const order: ShopOrder = {
+      id: newOrderId(),
+      player: p.player,
+      lookId: p.lookId,
+      usd: p.usd,
+      rate: p.rate,
+      amount,
+      amountLock: amount,
+      status: "open",
+      createdAt: p.now,
+      expiresAt,
+      holdUntil: expiresAt + LATE_HOLD_MS,
+      hash: null,
+      payer: null,
+      paidAt: null,
+      visitor: p.visitor,
+    };
+    // False: another order took this amount since the read. Go on to the next step.
+    if (await store.insert(order)) return order;
+  }
+  throw new ShopBusy();
+}
+
+/** "paid" when the send was first seen while the order was open (with the clock allowance), else "paid_late". Every store uses this one rule. */
+export const paidStatus = (order: Pick<ShopOrder, "expiresAt">, seenMs: number): "paid" | "paid_late" => (seenMs > order.expiresAt + CLOCK_SLACK_MS ? "paid_late" : "paid");
+
+/** The status as the player reads it now: an open order past its time is "expired". */
+export const statusAt = (o: Pick<ShopOrder, "status" | "expiresAt">, now: number): OrderStatus => (o.status === "open" && o.expiresAt < now ? "expired" : o.status);
+
+/** The orders' smallest amount, or null (the scan's threshold). */
+export const smallestAmount = (orders: readonly Pick<ShopOrder, "amount">[]): string | null => orders.map((o) => o.amount).sort(compareRaw)[0] ?? null;
+
+/** The order as its player sees it (the starter's `orderView`). The pay screen adds the XNO text, the test mode, the address and the link. */
+export function orderView(o: ShopOrder, now: number): { id: string; lookId: string; usd: string; amount: string; status: OrderStatus; createdAt: number; expiresAt: number } {
+  return { id: o.id, lookId: o.lookId, usd: o.usd, amount: o.amount, status: statusAt(o, now), createdAt: o.createdAt, expiresAt: o.expiresAt };
+}

package/src/shop/panel/index.ts

@@ -0,0 +1,19 @@
+// "@nano133/nanoterra/shop/panel": the Looks key and the shop's sheet, drawn in the browser. Plain DOM, no framework, no Three.js, no QR library.
+//
+//   import { mountShop } from "@nano133/nanoterra/shop/panel";
+//   import "@nano133/nanoterra/shop/style.css";
+//   const shop = mountShop(document.getElementById("shop")!, { looks, owned: () => me.owned, signedIn: () => !!me.address, signIn, worn, wear, onOwned });
+//
+// Every word of the two sheets can be the game's own: `mountShop(el, { ..., words: { sendExactly: "Pay exactly" } })` (ShopWords; SHOP_WORDS are the defaults).
+//
+// The server part is "@nano133/nanoterra/shop" (the handler and the stores): it must not load this one.
+
+export { mountShop } from "./mount.js";
+export type { MountedShop, ShopMountOptions } from "./mount.js";
+export { looksView, slotsOf } from "./looks.js";
+export type { LooksViewOptions, SlotWords } from "./looks.js";
+export { PAY_TIMING, isTestOrder, payPanel } from "./pay.js";
+export type { PayOptions, PayPanel } from "./pay.js";
+export { qrModules, qrSvg, qrVersionFor } from "./qr.js";
+export { COINGECKO_CREDIT, SHOP_WORDS, priceLine, shopWords } from "./words.js";
+export type { ShopWords } from "./words.js";

package/src/shop/panel/looks.ts

@@ -0,0 +1,106 @@
+// The looks sheet (the game starter's src/client/ui/looks.ts, with Echo Island's tabs for a game with wear slots): wear a look you own, or buy one.
+// Every look is shown with its price before any step: nothing is random, and there are no loot boxes.
+//
+// A game that sells only outfits gets one list. A game with items of its own wear slots ("wear": "shovel") gets a tab for each slot, the outfits first;
+// with `takeOff`, each item tab starts with its plain choice (free, "No charm").
+
+import { h } from "../../admin/panel/dom.js";
+import { OUTFIT, isOutfit, usdText, wearOf, type Look } from "../../looks/look.js";
+import { shopWords, type ShopWords } from "./words.js";
+
+/** A tab's words: its key's word, and its plain choice's name (an item slot's: "Plain shovel", "No charm"). */
+export type SlotWords = { tab: string; plain?: string };
+
+export type LooksViewOptions = {
+  looks: readonly Look[];
+  owned: ReadonlySet<string>;
+  signedIn: boolean;
+  /** Whether the player wears this look now. */
+  worn(look: Look): boolean;
+  wear(look: Look): void;
+  /** Takes off the item of a wear slot (back to the plain tool, or none). With it, each item tab starts with the plain choice. */
+  takeOff?: (slot: string) => void;
+  /** Whether nothing is worn in this slot (the plain choice is worn). Default: no look of the slot is worn. */
+  plainWorn?: (slot: string) => boolean;
+  buy(look: Look): void;
+  /** The game's own picture of a look (a canvas, an image), or null for the kit's swatch. */
+  picture?: (look: Look) => HTMLElement | null;
+  /** Words for the tabs, by wear slot ("outfit" and the game's own). Default: "Outfits", then each slot's name. */
+  slots?: Record<string, SlotWords>;
+  /** The tab that is open (a wear slot). Default: the first. */
+  tab?: string;
+  /** A tab was chosen: the sheet draws again with it. */
+  onTab?: (slot: string) => void;
+  /** The game's words (./words.ts): the keys it leaves out keep the defaults. */
+  words?: Partial<ShopWords>;
+};
+
+/** The wear slots of a list, in the order they first show (the outfits first). */
+export function slotsOf(looks: readonly Look[]): string[] {
+  const out: string[] = [OUTFIT];
+  for (const l of looks) if (!out.includes(wearOf(l))) out.push(wearOf(l));
+  return looks.some((l) => wearOf(l) === OUTFIT) ? out : out.slice(1);
+}
+
+function swatchOf(look: Look): HTMLElement {
+  const swatch = h("span", { class: "n133s-swatch", "aria-hidden": "true" });
+  if (isOutfit(look)) {
+    swatch.style.background = look.change.body;
+    if (look.change.hat) {
+      const hat = h("span", { class: `n133s-swatch-hat n133s-hat-${look.change.hat}` });
+      hat.style.background = look.change.hatColor ?? "#333";
+      swatch.append(hat);
+    }
+  } else {
+    swatch.classList.add("n133s-swatch-item");
+    swatch.textContent = look.name.charAt(0).toUpperCase();
+  }
+  return swatch;
+}
+
+export function looksView(p: LooksViewOptions): HTMLElement {
+  const slots = slotsOf(p.looks);
+  const tab = p.tab && slots.includes(p.tab) ? p.tab : slots[0];
+  const w = shopWords(p.words);
+  const words = (slot: string): SlotWords => p.slots?.[slot] ?? (slot === OUTFIT ? { tab: w.outfits } : { tab: w.slotTab(slot), plain: w.slotPlain(slot) });
+  const list = h("ul", { class: "n133s-looks" });
+  const row = (pic: HTMLElement, name: string, line: string, action: HTMLElement, worn: boolean) =>
+    h("li", { class: `n133s-look${worn ? " n133s-look-worn" : ""}` }, pic, h("span", { class: "n133s-look-text" }, h("strong", {}, name), h("small", {}, line)), action);
+
+  if (tab !== OUTFIT && p.takeOff) {
+    const plain = p.plainWorn ? p.plainWorn(tab) : !p.looks.some((l) => wearOf(l) === tab && p.worn(l));
+    const action = h("button", { class: `n133s-btn${plain ? "" : " n133s-primary"}`, type: "button", disabled: plain, onclick: () => p.takeOff!(tab) }, plain ? w.wearing : w.wear);
+    list.append(row(h("span", { class: "n133s-swatch n133s-swatch-plain", "aria-hidden": "true" }), words(tab).plain ?? w.slotPlain(tab), w.free, action, plain));
+  }
+  for (const look of p.looks) {
+    if (wearOf(look) !== tab) continue;
+    const mine = look.priceUsd === 0 || p.owned.has(look.id);
+    const worn = p.worn(look);
+    const action = mine
+      ? h("button", { class: `n133s-btn${worn ? "" : " n133s-primary"}`, type: "button", disabled: worn, onclick: () => p.wear(look) }, worn ? w.wearing : w.wear)
+      : h("button", { class: "n133s-btn n133s-buy", type: "button", onclick: () => p.buy(look) }, w.buy(usdText(look.priceUsd)));
+    const what = isOutfit(look) ? w.outfitLine(look.change.hat ?? null) : w.itemLine(tab);
+    const state = mine ? ` · ${look.priceUsd === 0 ? w.free : w.yours}` : "";
+    list.append(row(p.picture?.(look) ?? swatchOf(look), look.name, `${what}${state}`, action, worn));
+  }
+
+  const tabs =
+    slots.length > 1
+      ? h(
+          "div",
+          { class: "n133s-tabs", role: "tablist", "aria-label": w.kinds },
+          ...slots.map((s) =>
+            h("button", { class: "n133s-tab", type: "button", role: "tab", "aria-selected": s === tab ? "true" : "false", onclick: () => p.onTab?.(s) }, words(s).tab),
+          ),
+        )
+      : null;
+
+  return h(
+    "div",
+    { class: "n133s-looks-view" },
+    tabs,
+    list,
+    h("p", { class: "n133s-fine" }, w.looksNote),
+    p.signedIn ? null : h("p", { class: "n133s-fine" }, w.signInFirst),
+  );
+}

package/src/shop/panel/mount.ts

@@ -0,0 +1,280 @@
+// The Looks key and the shop's sheet: `mountShop(element, options)`. Plain DOM, no framework, no Three.js. The sheet holds the looks (wear or buy) and,
+// after Buy, the pay sheet of the order. It talks to the shop's routes ("@nano133/nanoterra/shop", `base`), and to the game only through its hooks:
+//
+//   owned()      the looks the player owns (the game's GET /api/me gives them)    signedIn()  whether a player is signed in
+//   signIn()     the game's own sign-in (the kit's sign-in path, or the game's): true when the player is signed in after it. The shop draws no sign-in.
+//   worn/wear    what the player wears; `onOwned(lookId)` when a paid order gave a look (wear it)
+//   onSignInCancel(lookId)  the game's own Buy (`buy(lookId)`) asked for a sign-in and the player closed it: the game shows its own sheet again
+//
+// `key: false` draws no key: the game opens the sheet from its own key with `open()`, as the options panel allows. `buy(lookId)` starts on the next frame:
+// a game's own <dialog> that closed just before has had its `close` event by then (Chromium fires it at the frame), so its handler cannot take the focus.
+// The sheet is a <dialog>: it rises from the bottom on a phone held upright and stands in the middle on a wide screen; on a phone held sideways the pay
+// sheet puts the QR code beside the words. Phone first: text 16 px, every key 48 px or more each way.
+//
+// `words` changes any word of the two sheets (./words.ts: SHOP_WORDS are the defaults), for a game's own words or language.
+
+import { ApiError, createApi } from "../../admin/panel/api.js";
+import { h, releaseFocus } from "../../admin/panel/dom.js";
+import { icon } from "../../admin/panel/icons.js";
+import { checkLooks, wearOf, type Look } from "../../looks/look.js";
+import type { PayView } from "../handler.js";
+import { looksView, slotsOf, type SlotWords } from "./looks.js";
+import { payPanel } from "./pay.js";
+import { shopWords, type ShopWords } from "./words.js";
+
+export type ShopMountOptions = {
+  /** The game's looks (looks.json as it was read). The server decides every price; these are for the list. */
+  looks: unknown;
+  /** Where the shop's routes are. Default "/api/orders" (the starter's). */
+  base?: string;
+  /** The ids of the looks the player owns (free looks need not be listed). Read each time the sheet draws. */
+  owned(): readonly string[];
+  signedIn(): boolean;
+  /** The game's sign-in: true when a player is signed in after it. With none, Buy asks the player to sign in and stops. */
+  signIn?: () => Promise<boolean>;
+  /**
+   * The game's own Buy (`buy(lookId)`) asked for a sign-in, and the player closed it without signing in: the game shows its own looks sheet again.
+   * The kit's list does not open then (the kit's sheet closes if it was open). A Buy in the kit's own list goes back to that list, as before.
+   */
+  onSignInCancel?: (lookId: string, look: Look) => void;
+  /**
+   * The server refused an order with 401: the player's session ended, though `signedIn()` said yes. The game marks the player signed out. The sheet's
+   * "Sign in" key then calls `signIn()` without asking `signedIn()` first, so a stale "yes" cannot post the same refused order again.
+   */
+  onSessionEnd?: () => void;
+  /** Whether the player wears this look now. */
+  worn(look: Look): boolean;
+  /** Wear a look the player owns. */
+  wear(look: Look): void;
+  /** Take off the item of a wear slot (back to the plain tool, or none). */
+  takeOff?: (slot: string) => void;
+  /** A paid order gave this look: the game adds it to the player's looks (and wears it). */
+  onOwned?: (lookId: string, look: Look) => void;
+  /** The person check (Turnstile): draws the check in `box` and gives its token, or null when the game has none. */
+  personCheck?: (box: HTMLElement) => Promise<string | null>;
+  /** The game's own picture of a look, or null for the kit's swatch. */
+  picture?: (look: Look) => HTMLElement | null;
+  /** Words for the tabs of the wear slots. */
+  slots?: Record<string, SlotWords>;
+  /** The sheet's title. Default: `words.title` ("Looks"). */
+  title?: string;
+  /** The game's words for the two sheets, over the defaults (SHOP_WORDS): `{ buyTitle: (look) => look, sendExactly: "Pay exactly" }`. */
+  words?: Partial<ShopWords>;
+  /** Draw the Looks key. Default true; false: the game calls `open()` from its own key. */
+  key?: boolean;
+  /** "light", "dark", or "device" (the default): the page's `data-n133-theme` when it has one, else the device's setting. */
+  theme?: "light" | "dark" | "device";
+  onOpen?: () => void;
+  onClose?: () => void;
+  /** Where the keyboard focus goes when the sheet closes: "game" (the default: out of the sheet, to the page) or "key". */
+  focusAfterClose?: "game" | "key";
+  /** The `fetch` to use (default: the page's). */
+  fetch?: typeof fetch;
+};
+
+export type MountedShop = {
+  /** Opens the sheet on the looks. */
+  open(): void;
+  close(): void;
+  /**
+   * Opens the sheet on Buy for one look (the game's own "Buy" elsewhere), on the next frame: close the game's own <dialog> first. A sign-in closed
+   * without a sign-in calls `onSignInCancel` and opens nothing.
+   */
+  buy(lookId: string): void;
+  /** Draws the looks again (after the player signed in, or wore something). */
+  refresh(): void;
+  readonly isOpen: boolean;
+  /** Removes the key and the sheet, and stops every timer. */
+  destroy(): void;
+};
+
+export function mountShop(root: HTMLElement, options: ShopMountOptions): MountedShop {
+  const looks = checkLooks(options.looks);
+  const api = createApi(options.base ?? "/api/orders", options.fetch);
+  const bought = new Set<string>();
+  let tab: string | undefined;
+  let stopPay: (() => void) | null = null;
+  let destroyed = false;
+  const cleanup: (() => void)[] = [];
+  const words = shopWords(options.words);
+  const sheetTitle = options.title ?? words.title;
+
+  const title = h("h2", { class: "n133s-title", tabindex: "-1" });
+  const closeKey = h("button", { class: "n133s-close", type: "button", "aria-label": words.close }, icon("close", 20));
+  const body = h("div", { class: "n133s-body" });
+  const dialog = h("dialog", { class: "n133s-sheet", "aria-label": sheetTitle }, h("header", { class: "n133s-head" }, title, closeKey), body);
+  const key = options.key === false ? null : h("button", { class: "n133s-key", type: "button", "aria-haspopup": "dialog" }, icon("shirt", 20), h("span", { class: "n133s-key-word" }, sheetTitle));
+  const wrap = h("div", { class: "n133-shop" }, key, dialog);
+  root.append(wrap);
+
+  // The theme: the game's word, or the page's (data-n133-theme), or the device's setting.
+  let media: MediaQueryList | null = null;
+  try {
+    media = typeof globalThis.matchMedia === "function" ? globalThis.matchMedia("(prefers-color-scheme: dark)") : null;
+  } catch {
+    media = null;
+  }
+  const drawTheme = () => {
+    const want = options.theme ?? "device";
+    const page = globalThis.document?.documentElement?.getAttribute("data-n133-theme");
+    const dark = want === "device" ? (page === "dark" || page === "light" ? page === "dark" : media?.matches === true) : want === "dark";
+    wrap.setAttribute("data-theme", dark ? "dark" : "light");
+  };
+  drawTheme();
+  media?.addEventListener?.("change", drawTheme);
+  cleanup.push(() => media?.removeEventListener?.("change", drawTheme));
+
+  const isOpen = () => dialog.open || dialog.hasAttribute("open");
+  const stopTimers = () => {
+    stopPay?.();
+    stopPay = null;
+  };
+  const show = (heading: string, content: Node) => {
+    stopTimers();
+    title.textContent = heading;
+    body.replaceChildren(content);
+    body.scrollTop = 0;
+    if (!isOpen()) {
+      if (typeof dialog.showModal === "function") dialog.showModal();
+      else dialog.setAttribute("open", "");
+      // The first focus is on the title (a screen reader reads it), not on the close key: a ring on Close at every open draws the eye from the looks.
+      title.focus();
+      key?.setAttribute("aria-expanded", "true");
+      options.onOpen?.();
+    }
+  };
+  const closed = () => {
+    stopTimers();
+    key?.setAttribute("aria-expanded", "false");
+    options.onClose?.();
+    if (options.focusAfterClose === "key" && key) key.focus();
+    else releaseFocus(wrap);
+  };
+  const close = () => {
+    if (!isOpen()) return;
+    if (typeof dialog.close === "function" && dialog.open) dialog.close();
+    else {
+      dialog.removeAttribute("open");
+      closed();
+    }
+  };
+  dialog.addEventListener("close", closed);
+  dialog.addEventListener("click", (e) => {
+    if (e.target === dialog) close();
+  });
+  closeKey.addEventListener("click", close);
+  key?.addEventListener("click", () => (isOpen() ? close() : showLooks()));
+
+  const ownedNow = () => new Set([...options.owned(), ...bought]);
+
+  function showLooks() {
+    if (destroyed) return;
+    show(
+      sheetTitle,
+      looksView({
+        looks,
+        owned: ownedNow(),
+        signedIn: options.signedIn(),
+        worn: options.worn,
+        wear: (l) => {
+          options.wear(l);
+          showLooks();
+        },
+        takeOff: options.takeOff
+          ? (slot) => {
+              options.takeOff!(slot);
+              showLooks();
+            }
+          : undefined,
+        buy: (l) => void buy(l, false),
+        picture: options.picture,
+        slots: options.slots,
+        words,
+        tab,
+        onTab: (s) => {
+          tab = s;
+          showLooks();
+          body.querySelector<HTMLElement>('.n133s-tab[aria-selected="true"]')?.focus();
+        },
+      }),
+    );
+  }
+
+  const back = (message: string, extra?: HTMLElement | null) =>
+    h("div", { class: "n133s-message" }, h("p", { class: "n133s-status" }, message), extra ?? null, h("button", { class: "n133s-btn n133s-wide", type: "button", onclick: () => showLooks() }, words.back));
+
+  /**
+   * `game`: the game's own Buy started it (`buy(lookId)`), not the kit's list: a closed sign-in goes back to the game, not to the list.
+   * `ended`: the server said the session ended (401): sign in again whatever `signedIn()` says.
+   */
+  async function buy(look: Look, game: boolean, ended = false) {
+    if (destroyed) return;
+    tab = slotsOf(looks).length > 1 ? wearOf(look) : undefined;
+    if (ended || !options.signedIn()) {
+      if (!options.signIn) return show(words.buyTitle(look.name), back(words.signInFirst));
+      let ok = false;
+      try {
+        ok = await options.signIn();
+      } catch {
+        ok = false;
+      }
+      if (!ok || !options.signedIn()) {
+        if (!game) return showLooks();
+        close();
+        return options.onSignInCancel?.(look.id, look);
+      }
+    }
+    const box = h("div", { class: "n133s-turnstile", hidden: true });
+    show(words.buyTitle(look.name), h("div", {}, h("p", { class: "n133s-status" }, words.making), box));
+    try {
+      const turnstile = options.personCheck ? await options.personCheck(box) : null;
+      const order = await api.post<PayView>("", { lookId: look.id, turnstile });
+      if (destroyed) return;
+      const pay = payPanel(order, {
+        lookName: look.name,
+        check: (id) => api.post<PayView>(`/${id}/check`),
+        errorText: (e) => (e instanceof ApiError ? words.refusal(e.message, e.status) : null),
+        words,
+        onPaid: () => {
+          bought.add(look.id);
+          options.onOwned?.(look.id, look);
+        },
+      });
+      show(words.buyTitle(look.name), pay.node);
+      stopPay = pay.stop;
+    } catch (e) {
+      const message = e instanceof ApiError ? words.refusal(e.message, e.status) : e instanceof Error && e.message ? words.refusal(e.message, 0) : words.orderFailed;
+      const gone = e instanceof ApiError && e.status === 401;
+      if (gone) options.onSessionEnd?.();
+      const again = gone && options.signIn ? h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", onclick: () => void buy(look, game, true) }, words.signIn) : null;
+      show(words.buyTitle(look.name), back(message, again));
+    }
+  }
+
+  return {
+    open: showLooks,
+    close,
+    buy(lookId) {
+      const look = looks.find((l) => l.id === lookId);
+      // On the next frame (rAF; a hidden page has none): a <dialog> of the game's that closed just before has had its `close` event by then.
+      if (!look) return;
+      const go = () => void buy(look, true);
+      if (typeof requestAnimationFrame === "function" && !globalThis.document?.hidden) requestAnimationFrame(go);
+      else setTimeout(go, 0);
+    },
+    refresh() {
+      if (isOpen() && body.querySelector(".n133s-looks-view")) showLooks();
+    },
+    get isOpen() {
+      return isOpen();
+    },
+    destroy() {
+      if (destroyed) return;
+      close();
+      destroyed = true;
+      stopTimers();
+      for (const fn of cleanup.splice(0)) fn();
+      wrap.remove();
+    },
+  };
+}