@nano133/nanoterra 0.8.0 → 0.9.0

package/dist/shop/memory.d.ts

@@ -0,0 +1,13 @@
+import { type ShopOrder, type ShopStore } from "./store.js";
+export type MemoryShop = ShopStore & {
+    /** The rows as an adapter would keep them. */
+    readonly orders: Map<string, ShopOrder>;
+    /** "player\u0000lookId" -> the owned row. */
+    readonly ownedRows: Map<string, {
+        player: string;
+        lookId: string;
+        orderId: string;
+        grantedAt: number;
+    }>;
+};
+export declare function createMemoryShop(): MemoryShop;

package/dist/shop/memory.js

@@ -0,0 +1,106 @@
+// A shop store in memory, for tests (and a game's first try). Nothing is kept after the process ends, and nothing is shared between copies of a server:
+// never sell with it. It keeps the same rules as the real adapters (the conformance suite runs on it), so it is the reference for what a store does.
+import { paidStatus } from "./orders.js";
+import { FORGOTTEN } from "./store.js";
+export function createMemoryShop() {
+    const orders = new Map();
+    const ownedRows = new Map();
+    let rate = null;
+    let scanAt = null;
+    const copy = (o) => ({ ...o });
+    const holder = (amount) => [...orders.values()].find((o) => o.amountLock === amount);
+    const ownKey = (player, lookId) => `${player}\u0000${lookId}`;
+    const tidy = async (now) => {
+        for (const o of orders.values()) {
+            if (o.status === "open" && o.expiresAt < now)
+                o.status = "expired";
+            if (o.amountLock !== null && o.holdUntil < now)
+                o.amountLock = null;
+        }
+    };
+    return {
+        orders,
+        ownedRows,
+        tidy,
+        async heldAmounts(amounts) {
+            return new Set(amounts.filter((a) => holder(a)));
+        },
+        async insert(order) {
+            if (holder(order.amount) || orders.has(order.id))
+                return false;
+            orders.set(order.id, { ...copy(order), amountLock: order.amount });
+            return true;
+        },
+        async order(id) {
+            const o = orders.get(id);
+            return o ? copy(o) : null;
+        },
+        async openOrder(player, lookId, until) {
+            const list = [...orders.values()].filter((o) => o.player === player && o.lookId === lookId && o.status === "open" && o.expiresAt > until).sort((a, b) => b.createdAt - a.createdAt);
+            return list[0] ? copy(list[0]) : null;
+        },
+        async countOpen(player, now) {
+            return [...orders.values()].filter((o) => o.player === player && o.status === "open" && o.expiresAt > now).length;
+        },
+        async owns(player, lookId) {
+            return ownedRows.has(ownKey(player, lookId));
+        },
+        async owned(player) {
+            return [...ownedRows.values()].filter((r) => r.player === player).sort((a, b) => a.grantedAt - b.grantedAt).map((r) => r.lookId);
+        },
+        async held() {
+            return [...orders.values()].filter((o) => o.amountLock !== null).map(copy);
+        },
+        async usedHashes(hashes) {
+            const all = new Set([...orders.values()].map((o) => o.hash).filter((h) => h !== null));
+            return new Set(hashes.filter((h) => all.has(h)));
+        },
+        async settle(order, pay, now) {
+            const o = orders.get(order.id);
+            if (!o || (o.status !== "open" && o.status !== "expired") || o.amountLock === null)
+                return "taken";
+            if ([...orders.values()].some((x) => x.hash === pay.hash))
+                return "used";
+            const status = paidStatus(o, pay.seenMs);
+            Object.assign(o, { status, hash: pay.hash, payer: pay.payer, paidAt: pay.seenMs, amountLock: null });
+            if (status === "paid" && !ownedRows.has(ownKey(o.player, o.lookId)))
+                ownedRows.set(ownKey(o.player, o.lookId), { player: o.player, lookId: o.lookId, orderId: o.id, grantedAt: now });
+            return status;
+        },
+        async claimScan(now, gapMs) {
+            if (scanAt !== null && scanAt > now - gapMs)
+                return false;
+            scanAt = now;
+            return true;
+        },
+        async readRate() {
+            return rate ? { ...rate, sources: [...rate.sources] } : null;
+        },
+        async saveRate(r) {
+            rate = { usd: r.usd, sources: [...r.sources], at: r.at };
+        },
+        async forget(player, now) {
+            await tidy(now);
+            const mine = [...orders.values()].filter((o) => o.player === player);
+            const waiting = mine.filter((o) => o.amountLock !== null);
+            if (waiting.length)
+                return { deleted: 0, kept: 0, waitUntil: Math.max(...waiting.map((o) => o.holdUntil)) };
+            let deleted = 0;
+            let kept = 0;
+            for (const [k, r] of ownedRows)
+                if (r.player === player)
+                    (ownedRows.delete(k), deleted++);
+            for (const o of mine) {
+                if (o.hash === null)
+                    (orders.delete(o.id), deleted++);
+                else
+                    (Object.assign(o, { player: FORGOTTEN, visitor: null }), kept++);
+            }
+            // A paid order keeps no payer; a paid-late one keeps it: the creator sends that payment back by hand.
+            for (const o of orders.values())
+                if (o.payer === player && o.status === "paid")
+                    o.payer = FORGOTTEN;
+            return { deleted, kept, waitUntil: null };
+        },
+    };
+}

package/dist/shop/nodes.d.ts

@@ -0,0 +1,47 @@
+/** 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 declare const KEYED_NODE: {
+    readonly name: "Nanswap Nodes";
+    readonly url: "https://nodes.nanswap.com/XNO";
+    readonly keyHeader: "nodes-api-key";
+};
+/** Public nodes with no key (from the community list at publicnodes.somenano.com, read 2026-10-21). */
+export declare const PUBLIC_NODES: readonly NanoNode[];
+/**
+ * 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 declare function settingValue(v?: string | null): string | 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 declare function nodesFor(settings?: {
+    NODE_API_KEY?: string | null;
+    NANO_NODES?: string | null;
+}): NanoNode[];
+export declare class NodeDown extends Error {
+    constructor(message: string);
+}
+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 declare function rpc(nodes: readonly NanoNode[], body: Record<string, unknown>, o?: RpcOptions): Promise<{
+    node: string;
+    answer: Record<string, any> | null;
+}>;
+/** For tests: forget which nodes failed. */
+export declare function forgetNodeHealth(): void;

package/dist/shop/nodes.js

@@ -0,0 +1,106 @@
+// 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 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" };
+/** Public nodes with no key (from the community list at publicnodes.somenano.com, read 2026-10-21). */
+export const PUBLIC_NODES = [
+    { 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) {
+    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 = {}) {
+    const list = [];
+    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) {
+        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();
+const REST_MS = 30_000;
+/**
+ * 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, body, o = {}) {
+    if (!nodes.length)
+        throw new NodeDown("no Nano node is set");
+    const fetchFn = o.fetch ?? ((input, init) => fetch(input, init));
+    const now = o.now ?? Date.now;
+    const resting = (n) => (restUntil.get(n.url) ?? 0) > now();
+    const order = [...nodes.filter((n) => !resting(n)), ...nodes.filter(resting)];
+    const why = [];
+    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;
+            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.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 };
+        }
+        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() {
+    restUntil.clear();
+}

package/dist/shop/orders.d.ts

@@ -0,0 +1,47 @@
+import type { OrderStatus, ShopOrder, ShopStore } from "./store.js";
+export declare const ORDER_TTL_MS: number;
+export declare const LATE_HOLD_MS: number;
+export declare const MAX_STEPS = 100;
+export declare const MAX_EXTRA_PERCENT = 10;
+/** One player can wait on this many orders at once. */
+export declare const MAX_OPEN_PER_PLAYER = 3;
+/** An order's id: 24 hex characters. */
+export declare const ORDER_ID_PATTERN: RegExp;
+/** Every amount for this price is held by another order: ask the player to try again in a minute. */
+export declare class ShopBusy extends Error {
+    constructor(message?: string);
+}
+/** How many amounts a price may use: the price and the steps above it. At least 1. */
+export declare function stepsFor(price: string): number;
+/** The amounts an order of this price may ask for, smallest first. */
+export declare function amountsFor(price: string): string[];
+/** A new order id: 12 random bytes as hex. */
+export declare const newOrderId: () => string;
+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 declare function reserveOrder(store: ShopStore, p: ReserveInput): Promise<ShopOrder>;
+/** "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 declare const paidStatus: (order: Pick<ShopOrder, "expiresAt">, seenMs: number) => "paid" | "paid_late";
+/** The status as the player reads it now: an open order past its time is "expired". */
+export declare const statusAt: (o: Pick<ShopOrder, "status" | "expiresAt">, now: number) => OrderStatus;
+/** The orders' smallest amount, or null (the scan's threshold). */
+export declare const smallestAmount: (orders: readonly Pick<ShopOrder, "amount">[]) => string | 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 declare function orderView(o: ShopOrder, now: number): {
+    id: string;
+    lookId: string;
+    usd: string;
+    amount: string;
+    status: OrderStatus;
+    createdAt: number;
+    expiresAt: number;
+};

package/dist/shop/orders.js

@@ -0,0 +1,82 @@
+// 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";
+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) {
+    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) {
+    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 = () => Array.from(globalThis.crypto.getRandomValues(new Uint8Array(12)), (x) => x.toString(16).padStart(2, "0")).join("");
+/** 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, p) {
+    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 = {
+            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, seenMs) => (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, now) => (o.status === "open" && o.expiresAt < now ? "expired" : o.status);
+/** The orders' smallest amount, or null (the scan's threshold). */
+export const smallestAmount = (orders) => 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, now) {
+    return { id: o.id, lookId: o.lookId, usd: o.usd, amount: o.amount, status: statusAt(o, now), createdAt: o.createdAt, expiresAt: o.expiresAt };
+}

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

@@ -0,0 +1,7 @@
+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";

package/dist/shop/panel/index.js

@@ -0,0 +1,11 @@
+// "@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 });
+//
+// The server part is "@nano133/nanoterra/shop" (the handler and the stores): it must not load this one.
+export { mountShop } from "./mount.js";
+export { looksView, slotsOf } from "./looks.js";
+export { PAY_TIMING, isTestOrder, payPanel } from "./pay.js";
+export { qrModules, qrSvg, qrVersionFor } from "./qr.js";

package/dist/shop/panel/looks.d.ts

@@ -0,0 +1,30 @@
+import { type Look } from "../../looks/look.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 wear slots of a list, in the order they first show (the outfits first). */
+export declare function slotsOf(looks: readonly Look[]): string[];
+export declare function looksView(p: LooksViewOptions): HTMLElement;

package/dist/shop/panel/looks.js

@@ -0,0 +1,61 @@
+// 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 } from "../../looks/look.js";
+const HAT_WORDS = { cap: "with a cap", beanie: "with a beanie", crown: "with a crown", tophat: "with a top hat" };
+const titleCase = (s) => s.charAt(0).toUpperCase() + s.slice(1).replace(/-/g, " ");
+/** The wear slots of a list, in the order they first show (the outfits first). */
+export function slotsOf(looks) {
+    const out = [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) {
+    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) {
+    const slots = slotsOf(p.looks);
+    const tab = p.tab && slots.includes(p.tab) ? p.tab : slots[0];
+    const words = (slot) => p.slots?.[slot] ?? (slot === OUTFIT ? { tab: "Outfits" } : { tab: titleCase(slot), plain: `No ${slot.replace(/-/g, " ")}` });
+    const list = h("ul", { class: "n133s-looks" });
+    const row = (pic, name, line, action, worn) => 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 ? "Wearing" : "Wear");
+        list.append(row(h("span", { class: "n133s-swatch n133s-swatch-plain", "aria-hidden": "true" }), words(tab).plain ?? `No ${tab}`, "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 ? "Wearing" : "Wear")
+            : h("button", { class: "n133s-btn n133s-buy", type: "button", onclick: () => p.buy(look) }, `Buy ${usdText(look.priceUsd)}`);
+        const what = isOutfit(look) ? (look.change.hat ? HAT_WORDS[look.change.hat] : "colour only") : tab.replace(/-/g, " ");
+        const state = mine ? (look.priceUsd === 0 ? " · free" : " · 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": "Kinds of looks" }, ...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" }, "A look changes how your character looks. It never changes a score. You pay in Nano (XNO), straight to the game's creator."), p.signedIn ? null : h("p", { class: "n133s-fine" }, "To buy a look, sign in with Nano first: your looks belong to your Nano address."));
+}

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

@@ -0,0 +1,52 @@
+import { type Look } from "../../looks/look.js";
+import { type SlotWords } from "./looks.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>;
+    /** 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 "Looks". */
+    title?: string;
+    /** 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). */
+    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 declare function mountShop(root: HTMLElement, options: ShopMountOptions): MountedShop;