@nano133/nanoterra 0.3.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 0.5.0 (2026-10-30)
+
+- **Wear slots** (`@nano133/nanoterra/looks`, and the Shelf of `/admin/panel`): a look fills one wear slot, and a player wears one look in each slot at once. An outfit (no
+  `wear`, or `"outfit"`: `OUTFIT`) is the character's own look, with its `change` (the body colour and the hat), as before. Any other `wear` is the game's own slot (a tool's
+  skin, a charm: `"wear": "shovel"`): an item there has no `change`. `lookProblems` refuses a bad slot name (field `wear`) and a `change` on an item (field `change`), and
+  now asks for one free OUTFIT (a list of outfits only keeps the starter's words); `checkLooks` leaves `wear` out for an outfit and `change` out for an item; `looksJson`
+  writes `wear` after `priceUsd`; `removalProblems` refuses a changed wear slot on an owned look (field `wear`); `diffLooks` lists `"wear"`. New: `OUTFIT`, `wearOf`,
+  `isOutfit`, the type `Change`. **`Look.change` is optional in the type now** (read an outfit's colours after `isOutfit`): a game that reads `look.change.body` directly
+  changes that line. The Shelf shows an item's slot and a tag picture, edits its wear slot (locked for an owned look and the last free outfit) in place of the body and hat,
+  and its message for an AI assistant names the wear rule. A file of outfits only reads and writes exactly as before. Echo Island sells shovel and Pinger skins and charms
+  with it (Wes, 2026-10-30).
+
+## 0.4.0 (2026-10-30)
+
+- **The admin panel (`@nano133/nanoterra/admin/panel`) has a new layout: the game at a glance, in tabs.** A top bar (who is signed in, Live or Test mode, the bot
+  check, Sign out), the warnings as one banner, four numbers (Earned, Open now, To send back, Players; each opens its list), then five tabs: Overview (best sellers
+  with their share of the money, the last five orders, the switches as On or Off, the shelf in numbers, first steps for a game with no order), Cosmetics (the
+  Shelf), Orders (a filter with counts, a search, a table on a wide panel, 20 at a time), Players (with a search) and Settings (the Game card, the sign-ins, the
+  facts). Wes asked for less scrolling and reading, clear sections, and a much better cosmetics screen (2026-10-30).
+- **The Shelf**: a grid of cards with a big picture on a tint of the look's colour, the price with its ladder step, the share of the sales, slot chips; filters and a
+  sort. Its editor opens one card at a time, with grouped fields (the ladder's seven steps as keys, colour swatches, the hats as pictures), "New", "Changed",
+  "Owned" and problem marks on each card, a short change bar at the bottom of the screen, and "Put back" for a removed look. The editor's rules do not change: the
+  Shelf still writes nothing, and an owned look's id and slots stay.
+- New exports: `shelfFilter`, `shelfSort`, `BODY_COLOURS`, `ordersView`, `orderMatches`, `overviewView`, `bestSellers`, `playersView`, `playerMatches`, `tabBar`,
+  `TABS`, `icon`, and their types. `gameCard` takes an optional fourth argument, `onChange(state)`. `mountAdmin`'s options and the handler's routes do not change.
+- New CSS custom properties: `--n133-ground`, `--n133-warn`, `--n133-bad`, `--n133-shadow`. The stylesheet uses a container query on the panel (`container: n133`).
+  Words that changed: the totals are "Earned", "Open now" and "To send back"; "Owned looks" is "Players who own a look"; "Copy a message for my AI" is "Copy for
+  my AI" (its tooltip says the rest). A sign-out now takes the drawn data off the page.
+
 ## 0.3.2 (2026-10-29)
 
 - **The Game card's character switch says what On means when a game offers a choice.** Echo Island lets a player choose between the Nanoterra character

package/README.md

@@ -66,7 +66,7 @@ Each path loads only what it needs. A page that reads a ticket loads no Three.js
 | `@nano133/nanoterra/input` | let go of held keys and sticks when the player leaves the page, and pause: `releaseWhenLost`, `pauseWhenLeft`, `swallowsKeyup` (since 0.3.1) | no | 0.5 kB |
 | `@nano133/nanoterra/admin` | the admin of a game: the guard, the handler, the store type (server code; since 0.2.0) | no | 3.7 kB |
 | `@nano133/nanoterra/admin/d1`, `/admin/firestore` | the admin store for D1 (the starter's tables) or Firestore (a small interface, no Firebase dependency): `createD1Store`, `createFirestoreStore` (since 0.2.0) | no | 1.5 kB each |
-| `@nano133/nanoterra/admin/panel` | the admin page, drawn in the browser into one element, and its stylesheet `@nano133/nanoterra/admin/style.css` (since 0.2.0) | no | 10.6 kB on 0.3.0 (8.5 kB measured on 0.2.0) + 2.4 kB of CSS |
+| `@nano133/nanoterra/admin/panel` | the admin page, drawn in the browser into one element, and its stylesheet `@nano133/nanoterra/admin/style.css` (since 0.2.0) | no | 18.9 kB with the tabbed layout (10.6 kB on 0.3.0, 8.5 kB on 0.2.0) + 5.9 kB of CSS (minified) |
 | `@nano133/nanoterra/admin/conformance` | test cases that a game runs against its own admin (a dev dependency in practice; since 0.2.0) | no | n/a |
 
 Measured 2026-10-26: `esbuild --bundle --minify --format=esm --external:three`, then `gzip -9`, without Three.js.
@@ -380,11 +380,38 @@ type Look = {
   id: string; // 1 to 40 lowercase letters, digits or dashes: "mint-cap"
   name: string; // 1 to 40 characters
   priceUsd: number; // US dollars, at most 2 decimals; 0 is the free look
-  change: { body: string; hat?: "cap" | "beanie" | "crown" | "tophat"; hatColor?: string }; // colours are "#rrggbb"
+  wear?: string; // the wear slot it fills: none (an outfit), or your game's own slot ("shovel"): see "Wear slots" below
+  change?: { body: string; hat?: "cap" | "beanie" | "crown" | "tophat"; hatColor?: string }; // an outfit's colours ("#rrggbb"); an item of another slot has none
   slots?: Record<string, string>; // what YOUR game defines for itself: see "Slots" below. Optional.
 };
 ```
 
+### Wear slots: an outfit, and the items beside it
+
+A look fills one **wear slot**, and a player wears one look in each slot at once. An **outfit** (no `wear`, or `"wear": "outfit"`) is the character's own look: its body colour and
+its hat (`change`). Every other wear slot is **your game's own**: a tool's skin, a charm, a trail. An item there has **no `change`** (it does not change the body); your game knows
+what it is from its id or its `slots`:
+
+```json
+{ "id": "classic", "name": "Classic", "priceUsd": 0, "change": { "body": "#4aa8ff" } },
+{ "id": "toy-spade", "name": "Toy Spade", "priceUsd": 0.1, "wear": "shovel" },
+{ "id": "echo-bat", "name": "Echo Bat", "priceUsd": 1, "wear": "pinger", "slots": { "ring": "ripples" } }
+```
+
+- A wear slot's name is like a slot's: 1 to 24 lowercase letters, digits or dashes, starting with a letter (`SLOT_NAME_PATTERN`); `outfit` (`OUTFIT`) is the outfit's.
+- **Keep one free OUTFIT:** every player starts with it. A free item is fine beside it, but it does not count.
+- `"change"` on an item is a mistake (`lookProblems`, field `change`): an item never changes the body. An outfit still needs its `change.body`.
+- `checkLooks` leaves `wear` out for an outfit (no `wear` and `"wear": "outfit"` are the same look) and `change` out for an item; `looksJson` writes `wear` after `priceUsd`, on the
+  look's own line. `wearOf(look)` gives the slot (`OUTFIT` for an outfit); `isOutfit(look)` tells an outfit (with its `change`) from an item.
+- **Players own a look by its id, so the wear slot of a look that a player owns must not change:** a shovel that a player owns stays a shovel. `removalProblems` reports it with the
+  field `"wear"`; `diffLooks` lists it as `"wear"`.
+- The Shelf shows an item's slot on its card ("Worn in the shovel slot") and a tag in place of the character picture (give the Shelf your own `picture` to draw the real item), and
+  its editor has a **Wear slot** field (locked for an owned look and the last free outfit) in place of the body and hat of an outfit.
+- What a player wears in each slot is your game's to keep (the starter keeps the outfit in the browser); ownership stays by id, as before.
+
+A file of outfits only reads and writes exactly as it did. `change` is optional in the type now: read an outfit's colours after `isOutfit(look)` (or `look.change?.body`). This is a
+minor change (0.5.0); a game on 0.4 or before drops `wear`, so a game with items must move to the new version in the game, the server and the Shelf.
+
 ### Slots: what your game defines on a look
 
 A game with its own parts (a pair of wings, a trail colour) needs a place for them on a look. That place is `slots`, an optional object of names and values:
@@ -585,10 +612,24 @@ mountAdmin(document.getElementById("admin")!, {
 });
 ```
 
-The panel draws: the **Game** card (the two switches), what is still off (the status warnings), the totals, the **Shelf** (the looks with what each has sold, and a draft you can change),
-**Orders** (with "Paid late" and a "Check payments now" button when the game gave a check), the looks that players own, and Sign out. A visitor who is signed out gets the game's
-sign-in; a wrong wallet, a Nanoterra sign-in and a missing owner address each get their own screen and see no data. Options: `api` (the handler's base path), `noAddressHelp`,
-`lookPicture(look)` (your own picture of a look for the Shelf), `repoHelp`, and `fetch`.
+The panel draws, from the top: a bar with who is signed in (the short address and a copy key), Live or Test mode, the bot check and Sign out; what is still off (the
+status warnings, one banner); four numbers (Earned, Open now, To send back, Players: a press opens the list behind each); then five tabs. **Overview**: the best-selling
+looks with their share of the money, the last five orders, the two switches as On or Off and the shelf in numbers (a game with no order yet gets three first steps).
+**Cosmetics**: the **Shelf** (below). **Orders**: a filter by status with its count, a search (a look, an address or a block), "Check payments now" when the game gave a
+check, "Paid late" with the address to send the money back to, 20 orders at a time; a card each on a phone, a table on a wide panel. **Players**: each player who owns a
+look, with their looks. **Settings**: the **Game** card (the two switches), the Sign-ins card and the facts (the address, the mode, the nodes, the last price). The tabs are
+real tabs (the arrow keys, Home and End work); every tab is made once, so a draft, a search and a switch keep their state, and the panel never writes the page's address.
+A visitor who is signed out gets the game's sign-in; a wrong wallet, a Nanoterra sign-in and a missing owner address each get their own screen and see no data (a sign-out
+takes the drawn data off the page). Options: `api` (the handler's base path), `noAddressHelp`, `lookPicture(look)` (your own picture of a look for the Shelf), `repoHelp`,
+`loginsNote` and `fetch`.
+
+**The Shelf** shows the looks your game sells now in a grid of cards: a big picture on a soft tint of the look's colour, the price with its step on the ladder ("25¢ ·
+statement"), what it has sold and its share of the sales, its slots as chips; filters (All, For sale, Free, Not sold yet) and a sort (Best selling, price, name, the
+file's order). **Edit the shelf** opens the draft: one card at a time opens with its fields in groups (the name; the price, with the ladder's seven steps as keys; the
+look: body colour swatches and any colour, the hat as pictures, the hat colour; the slots), and each card says "New", "Changed", "Owned" or how many problems it has.
+A bar at the bottom of the screen holds the state of the draft and the two copy keys ("Copy looks.json", "Copy for my AI"); under the cards are the full list of
+problems, GitHub, Start over, what changed and the new file. A removed look can be put back. The pure helpers are exported for a game's own page: `shelfFilter`,
+`shelfSort`, `bestSellers`, `orderMatches`, `playerMatches`.
 
 **The Shelf's pictures on the real character** (since 0.3.0). The panel has no Three.js, so it takes the pictures from you, lazily:
 
@@ -612,7 +653,10 @@ flat picture stays. `createLookPreview({ size?, body?, record?, background?, key
 **The Shelf never writes.** It edits a draft in the owner's browser and gives text to copy (`looks.json`, or a message for an AI assistant): there is no call in the panel that
 changes a look, a price or an order, and a test proves that editing the Shelf sends no request. A change of looks is a change of your repository. The **Game** card writes only the
 two settings. The stylesheet is scoped under `.n133-admin`, so it cannot leak into your page; to theme it set `--n133-ink`, `--n133-ink-soft`, `--n133-paper`, `--n133-line`,
-`--n133-gem`, `--n133-gem-dark`, `--n133-sea`, `--n133-radius` or `--n133-font` on the element that holds it. Every control is at least 40 px high (the order tabs); the switches, the price chips, the inputs and the buttons are 44 px or more. One column on a phone, two from 640 px.
+`--n133-gem`, `--n133-gem-dark`, `--n133-sea`, `--n133-radius`, `--n133-font`, `--n133-ground` (the wells inside a card), `--n133-warn`, `--n133-bad` or `--n133-shadow` on the
+element that holds it. The keys, inputs, switches, swatches and price steps are 44 px or more; the tabs, filter keys and copy keys 40 px. The layout follows the panel's own
+width (a container query), not the window's: on a phone two cards a row and the five tabs as icons over their words; three cards a row and the orders as a table from
+760 px; four cards from 1000 px. The panel can be up to 1200 px wide: the page that holds it sets the width (the starter's admin page is 900 px).
 
 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.
 

package/ai/SPEC.md

@@ -100,9 +100,10 @@ export const LOOKS = checkLooks(rawLooksJson); // throws with the first mistake
 - One free look (`priceUsd: 0`) at least. Never change or remove the id of a look that someone owns. Prices in US dollars with at most 2 decimals; the server reads the price from the file.
 - A look only changes how the character looks. No random look, no loot box, no look that changes a score.
 - `slots` (optional, at most 8: a name and a word or a `#rrggbb` colour) is where the game keeps its own parts of a look. Read `look.slots` from `checkLooks`. Never change the slots of a look that someone owns: add a new look.
+- `wear` (optional) is the wear slot a look fills: none for an outfit (the character's colours and hat, `change`), or the game's own slot (`"shovel"`, `"charm"`) for an item, which has no `change`. A player wears one look in each slot. Keep one free outfit. Never change the wear slot of a look that someone owns. Read outfits with `isOutfit(look)`.
 - The game is the seller. Never send looks, prices or sales to another site.
 
-**Check:** `checkLooks` passes at start; a removed look that is owned is refused; a changed slot on an owned look is refused.
+**Check:** `checkLooks` passes at start; a removed look that is owned is refused; a changed slot or wear slot on an owned look is refused.
 
 ## 8. Leaving the page (any game that a player walks in with keys or a stick)
 

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

@@ -4,4 +4,15 @@ export declare function h<K extends keyof HTMLElementTagNameMap>(tag: K, attrs?:
 /** "nano_1abc…wxyz" */
 export declare const shortAddress: (a: string) => string;
 export declare function copy(text: string, button: HTMLButtonElement): Promise<void>;
+/**
+ * A small copy key: an icon and the word "Copy". A press puts `value` on the clipboard and says "Copied" for a moment; only the word changes, so the icon
+ * stays. `label` names what is copied, for a screen reader and the tooltip ("Copy the player's address").
+ */
+export declare function copyKey(value: string, label: string, icon?: Element): HTMLButtonElement;
+/** "just now", "5 min ago", "3 h ago", "2 days ago". A time in the future reads "just now". */
+export declare function ago(ms: number, now?: number): string;
+/** "3 orders", "1 order" */
+export declare const plural: (n: number, word: string) => string;
+/** "$1.25" from cents. */
+export declare const dollars: (cents: number) => string;
 export {};

package/dist/admin/panel/dom.js

@@ -31,3 +31,36 @@ export async function copy(text, button) {
     }
     setTimeout(() => (button.textContent = was), 1500);
 }
+/**
+ * A small copy key: an icon and the word "Copy". A press puts `value` on the clipboard and says "Copied" for a moment; only the word changes, so the icon
+ * stays. `label` names what is copied, for a screen reader and the tooltip ("Copy the player's address").
+ */
+export function copyKey(value, label, icon) {
+    const word = h("span", { class: "copy-word" }, "Copy");
+    const button = h("button", { class: "btn btn-small btn-quiet copy-key", type: "button", "aria-label": label, title: label }, icon ?? null, word);
+    button.addEventListener("click", async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            word.textContent = "Copied";
+        }
+        catch {
+            word.textContent = "Copy failed";
+        }
+        setTimeout(() => (word.textContent = "Copy"), 1500);
+    });
+    return button;
+}
+/** "just now", "5 min ago", "3 h ago", "2 days ago". A time in the future reads "just now". */
+export function ago(ms, now = Date.now()) {
+    const m = Math.max(0, Math.round((now - ms) / 60_000));
+    if (m < 1)
+        return "just now";
+    if (m < 60)
+        return `${m} min ago`;
+    const hours = Math.round(m / 60);
+    return hours < 48 ? `${hours} h ago` : `${Math.round(hours / 24)} days ago`;
+}
+/** "3 orders", "1 order" */
+export const plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
+/** "$1.25" from cents. */
+export const dollars = (cents) => `$${(cents / 100).toFixed(2)}`;

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

@@ -1,4 +1,7 @@
 import { type GameState } from "../switches.js";
 import { type Api } from "./api.js";
-/** The card for the settings `initial`. It keeps its own state: a press shows "Saving…", then "Saved." or the server's words. `defaultsFile` is where the game's defaults are written ("game.config.json"). */
-export declare function gameCard(api: Api, initial: GameState, defaultsFile?: string): HTMLElement;
+/**
+ * The card for the settings `initial`. It keeps its own state: a press shows "Saving…", then "Saved." or the server's words. `defaultsFile` is where the game's defaults are
+ * written ("game.config.json"). `onChange` hears each saved state (the panel's Overview shows the two switches too).
+ */
+export declare function gameCard(api: Api, initial: GameState, defaultsFile?: string, onChange?: (state: GameState) => void): HTMLElement;

package/dist/admin/panel/gameCard.js

@@ -4,14 +4,17 @@
 import { CHARACTER_NEEDS_SIGNIN, CHARACTER_SIGNIN_OFF, REVIEW_LINK, REVIEW_NOTE, SWITCHES, pressOf, signinOn, stateOf } from "../switches.js";
 import { ApiError } from "./api.js";
 import { h } from "./dom.js";
-/** The card for the settings `initial`. It keeps its own state: a press shows "Saving…", then "Saved." or the server's words. `defaultsFile` is where the game's defaults are written ("game.config.json"). */
-export function gameCard(api, initial, defaultsFile = "the game's own settings") {
+/**
+ * The card for the settings `initial`. It keeps its own state: a press shows "Saving…", then "Saved." or the server's words. `defaultsFile` is where the game's defaults are
+ * written ("game.config.json"). `onChange` hears each saved state (the panel's Overview shows the two switches too).
+ */
+export function gameCard(api, initial, defaultsFile = "the game's own settings", onChange) {
     let state = initial;
     const rows = new Map();
     /** Under the character switch: it works only through sign-in, so it says so, and says what a player gets while sign-in is Off. */
     const needs = h("p", { class: "fine switch-needs" });
-    const card = h("section", { class: "admin-card game-card", "aria-labelledby": "game-title" }, h("h2", { id: "game-title" }, "Game"));
-    card.append(h("p", { class: "fine" }, `Two choices about your game. A press saves at once: you push nothing and deploy nothing. They start from ${defaultsFile}, and a press here wins.`));
+    const card = h("section", { class: "admin-card game-card", "aria-labelledby": "game-title" }, h("div", { class: "card-head" }, h("h2", { id: "game-title" }, "Game")));
+    card.append(h("p", { class: "fine card-intro" }, `Two choices about your game. A press saves at once: you push nothing and deploy nothing. They start from ${defaultsFile}, and a press here wins.`));
     const draw = () => {
         for (const [id, row] of rows) {
             const on = stateOf(id, state);
@@ -31,6 +34,7 @@ export function gameCard(api, initial, defaultsFile = "the game's own settings")
             state = await api.post("/game", pressOf(id, state));
             row.status.textContent = "Saved.";
             draw();
+            onChange?.(state);
         }
         catch (e) {
             row.status.textContent = e instanceof ApiError ? e.message : "The game's server did not answer. Nothing was changed.";

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

@@ -0,0 +1,121 @@
+declare const SHAPES: {
+    overview: [string, {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        rx: number;
+    }][];
+    shirt: [string, {
+        d: string;
+    }][];
+    receipt: [string, {
+        d: string;
+    }][];
+    players: ([string, {
+        cx: number;
+        cy: number;
+        r: number;
+    }] | [string, {
+        d: string;
+    }])[];
+    settings: ([string, {
+        cx: number;
+        cy: number;
+        r: number;
+    }] | [string, {
+        d: string;
+    }])[];
+    coin: ([string, {
+        cx: number;
+        cy: number;
+        r: number;
+    }] | [string, {
+        d: string;
+    }])[];
+    clock: ([string, {
+        cx: number;
+        cy: number;
+        r: number;
+    }] | [string, {
+        d: string;
+    }])[];
+    back: [string, {
+        d: string;
+    }][];
+    tag: ([string, {
+        d: string;
+    }] | [string, {
+        cx: number;
+        cy: number;
+        r: number;
+    }])[];
+    copy: ([string, {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        rx: number;
+    }] | [string, {
+        d: string;
+    }])[];
+    lock: ([string, {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        rx: number;
+    }] | [string, {
+        d: string;
+    }])[];
+    plus: [string, {
+        d: string;
+    }][];
+    search: ([string, {
+        cx: number;
+        cy: number;
+        r: number;
+    }] | [string, {
+        d: string;
+    }])[];
+    alert: [string, {
+        d: string;
+    }][];
+    check: [string, {
+        d: string;
+    }][];
+    external: [string, {
+        d: string;
+    }][];
+    refresh: [string, {
+        d: string;
+    }][];
+    out: [string, {
+        d: string;
+    }][];
+    pencil: [string, {
+        d: string;
+    }][];
+    close: [string, {
+        d: string;
+    }][];
+    dup: ([string, {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        rx: number;
+    }] | [string, {
+        d: string;
+    }])[];
+    trash: [string, {
+        d: string;
+    }][];
+    sparkle: [string, {
+        d: string;
+    }][];
+};
+export type IconName = keyof typeof SHAPES;
+/** An icon of `size` CSS pixels (default 20). */
+export declare function icon(name: IconName, size?: number): SVGSVGElement;
+export {};

package/dist/admin/panel/icons.js

@@ -0,0 +1,41 @@
+// The panel's small line icons, drawn as inline SVG with createElementNS (no icon font, no innerHTML: fine under a strict CSP). Each is 24 units square, drawn
+// with the text colour (currentColor), and hidden from screen readers: the word next to it says what it is.
+const NS = "http://www.w3.org/2000/svg";
+const SHAPES = {
+    overview: [["rect", { x: 3, y: 3, width: 7.5, height: 7.5, rx: 2 }], ["rect", { x: 13.5, y: 3, width: 7.5, height: 7.5, rx: 2 }], ["rect", { x: 3, y: 13.5, width: 7.5, height: 7.5, rx: 2 }], ["rect", { x: 13.5, y: 13.5, width: 7.5, height: 7.5, rx: 2 }]],
+    shirt: [["path", { d: "M8.5 3.5 4 6 2.5 10.5l3.5 1.5V21h12v-9l3.5-1.5L20 6l-4.5-2.5a3.5 3.5 0 0 1-7 0Z" }]],
+    receipt: [["path", { d: "M5 3h14v18l-2.5-1.5L14 21l-2-1.5L10 21l-2.5-1.5L5 21Z" }], ["path", { d: "M9 8h6M9 12h6M9 16h3" }]],
+    players: [["circle", { cx: 9, cy: 8, r: 3.5 }], ["path", { d: "M2.5 20a6.5 6.5 0 0 1 13 0" }], ["path", { d: "M16 4.8a3.5 3.5 0 0 1 0 6.4M18 14.2a6.5 6.5 0 0 1 3.5 5.8" }]],
+    settings: [["circle", { cx: 12, cy: 12, r: 3 }], ["path", { d: "M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1" }]],
+    coin: [["circle", { cx: 12, cy: 12, r: 9 }], ["path", { d: "M12 6.5v11M14.8 9.2a2.6 2.6 0 0 0-2.6-1.7h-.6a2.2 2.2 0 0 0 0 4.4h.8a2.2 2.2 0 0 1 0 4.4h-.7a2.6 2.6 0 0 1-2.6-1.7" }]],
+    clock: [["circle", { cx: 12, cy: 12, r: 9 }], ["path", { d: "M12 7v5l3.5 2" }]],
+    back: [["path", { d: "M9 6 4 11l5 5" }], ["path", { d: "M4 11h10.5a5.5 5.5 0 0 1 0 11H11" }]],
+    tag: [["path", { d: "M3 12.2V4a1 1 0 0 1 1-1h8.2l8.6 8.6a1.5 1.5 0 0 1 0 2.1l-6.9 6.9a1.5 1.5 0 0 1-2.1 0Z" }], ["circle", { cx: 7.5, cy: 7.5, r: 1.5 }]],
+    copy: [["rect", { x: 8, y: 8, width: 13, height: 13, rx: 2.5 }], ["path", { d: "M16 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" }]],
+    lock: [["rect", { x: 4.5, y: 10.5, width: 15, height: 10.5, rx: 2.5 }], ["path", { d: "M8 10.5V7.5a4 4 0 0 1 8 0v3" }]],
+    plus: [["path", { d: "M12 5v14M5 12h14" }]],
+    search: [["circle", { cx: 10.5, cy: 10.5, r: 6.5 }], ["path", { d: "m15.5 15.5 5 5" }]],
+    alert: [["path", { d: "M10.3 3.9 2.4 17.6A2 2 0 0 0 4.1 20.6h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }], ["path", { d: "M12 9v4.5M12 17h.01" }]],
+    check: [["path", { d: "m4.5 12.5 5 5 10-11" }]],
+    external: [["path", { d: "M14 4h6v6M20 4l-9 9" }], ["path", { d: "M18 14v4.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10" }]],
+    refresh: [["path", { d: "M20 11a8 8 0 0 0-14.3-4.9L4 8M4 4v4h4" }], ["path", { d: "M4 13a8 8 0 0 0 14.3 4.9L20 16M20 20v-4h-4" }]],
+    out: [["path", { d: "M15 4h3.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H15" }], ["path", { d: "M10 8l-4 4 4 4M6 12h10" }]],
+    pencil: [["path", { d: "M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16Z" }], ["path", { d: "m13.5 6.5 4 4" }]],
+    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" }]],
+    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). */
+export function icon(name, size = 20) {
+    const svg = document.createElementNS(NS, "svg");
+    for (const [k, v] of Object.entries({ viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "currentColor", "stroke-width": 1.8, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", focusable: "false", class: `icon icon-${name}` }))
+        svg.setAttribute(k, String(v));
+    for (const [tag, attrs] of SHAPES[name]) {
+        const el = document.createElementNS(NS, tag);
+        for (const [k, v] of Object.entries(attrs))
+            el.setAttribute(k, String(v));
+        svg.append(el);
+    }
+    return svg;
+}

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

@@ -3,8 +3,17 @@ export type { MountedAdmin, MountOptions } from "./mount.js";
 export { ApiError, createApi } from "./api.js";
 export type { Api } from "./api.js";
 export { gameCard } from "./gameCard.js";
-export { lookPicture, previewPicture, shelfView } from "./shelf.js";
+export { BODY_COLOURS, lookPicture, previewPicture, shelfFilter, shelfSort, shelfView } from "./shelf.js";
 export { DEFAULT_LOGINS_NOTE, signinsCard } from "./signins.js";
-export type { ShelfData } from "./shelf.js";
+export type { ShelfData, ShelfFilter, ShelfSort } from "./shelf.js";
+export { orderMatches, ordersView } from "./orders.js";
+export type { OrderFilter, OrdersView } from "./orders.js";
+export { bestSellers, overviewView } from "./overview.js";
+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 { icon } from "./icons.js";
+export type { IconName } from "./icons.js";
 export { aiPrompt, centsOf, changeText, ownedIds, shelfStats, soldText } from "./shelfData.js";
 export type { LookStats, ShelfOrder, ShelfPlayer } from "./shelfData.js";

package/dist/admin/panel/index.js

@@ -8,6 +8,11 @@
 export { mountAdmin } from "./mount.js";
 export { ApiError, createApi } from "./api.js";
 export { gameCard } from "./gameCard.js";
-export { lookPicture, previewPicture, shelfView } from "./shelf.js";
+export { BODY_COLOURS, lookPicture, previewPicture, shelfFilter, shelfSort, shelfView } from "./shelf.js";
 export { DEFAULT_LOGINS_NOTE, signinsCard } from "./signins.js";
+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 { icon } from "./icons.js";
 export { aiPrompt, centsOf, changeText, ownedIds, shelfStats, soldText } from "./shelfData.js";