@nano133/nanoterra 0.8.0 → 0.9.0

package/dist/shop/panel/mount.js

@@ -0,0 +1,194 @@
+// 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)
+//
+// `key: false` draws no key: the game opens the sheet from its own key with `open()`, as the options panel allows. 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.
+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 } from "../../looks/look.js";
+import { looksView, slotsOf } from "./looks.js";
+import { payPanel } from "./pay.js";
+export function mountShop(root, options) {
+    const looks = checkLooks(options.looks);
+    const api = createApi(options.base ?? "/api/orders", options.fetch);
+    const bought = new Set();
+    let tab;
+    let stopPay = null;
+    let destroyed = false;
+    const cleanup = [];
+    const title = h("h2", { class: "n133s-title", tabindex: "-1" });
+    const closeKey = h("button", { class: "n133s-close", type: "button", "aria-label": "Close" }, icon("close", 20));
+    const body = h("div", { class: "n133s-body" });
+    const dialog = h("dialog", { class: "n133s-sheet", "aria-label": options.title ?? "Looks" }, 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" }, options.title ?? "Looks"));
+    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 = 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, content) => {
+        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(options.title ?? "Looks", 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),
+            picture: options.picture,
+            slots: options.slots,
+            tab,
+            onTab: (s) => {
+                tab = s;
+                showLooks();
+                body.querySelector('.n133s-tab[aria-selected="true"]')?.focus();
+            },
+        }));
+    }
+    const back = (message, extra) => h("div", { class: "n133s-message" }, h("p", { class: "n133s-status" }, message), extra ?? null, h("button", { class: "n133s-btn n133s-wide", type: "button", onclick: () => showLooks() }, "Back to looks"));
+    async function buy(look) {
+        if (destroyed)
+            return;
+        tab = slotsOf(looks).length > 1 ? wearOf(look) : undefined;
+        if (!options.signedIn()) {
+            if (!options.signIn)
+                return show(`Buy ${look.name}`, back("To buy a look, sign in with Nano first: your looks belong to your Nano address."));
+            let ok = false;
+            try {
+                ok = await options.signIn();
+            }
+            catch {
+                ok = false;
+            }
+            if (!ok || !options.signedIn())
+                return showLooks();
+        }
+        const box = h("div", { class: "n133s-turnstile", hidden: true });
+        show(`Buy ${look.name}`, h("div", {}, h("p", { class: "n133s-status" }, "Making your order…"), box));
+        try {
+            const turnstile = options.personCheck ? await options.personCheck(box) : null;
+            const order = await api.post("", { lookId: look.id, turnstile });
+            if (destroyed)
+                return;
+            const pay = payPanel(order, {
+                lookName: look.name,
+                check: (id) => api.post(`/${id}/check`),
+                errorText: (e) => (e instanceof ApiError ? e.message : null),
+                onPaid: () => {
+                    bought.add(look.id);
+                    options.onOwned?.(look.id, look);
+                },
+            });
+            show(`Buy ${look.name}`, pay.node);
+            stopPay = pay.stop;
+        }
+        catch (e) {
+            const message = e instanceof ApiError ? e.message : e instanceof Error && e.message ? e.message : "The order did not start. Try again.";
+            const again = e instanceof ApiError && e.status === 401 && options.signIn ? h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", onclick: () => void buy(look) }, "Sign in") : null;
+            show(`Buy ${look.name}`, back(message, again));
+        }
+    }
+    return {
+        open: showLooks,
+        close,
+        buy(lookId) {
+            const look = looks.find((l) => l.id === lookId);
+            if (look)
+                void buy(look);
+        },
+        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();
+        },
+    };
+}

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

@@ -0,0 +1,24 @@
+import type { PayView } from "../handler.js";
+export declare const PAY_TIMING: {
+    readonly pollMs: 5000;
+    readonly checkForMs: number;
+};
+export type PayOptions = {
+    /** The look's name, for the line at the top. */
+    lookName: string;
+    /** POST {base}/{id}/check: the order again, after a payment scan. */
+    check(id: string): Promise<PayView>;
+    /** The order is paid: the look is the player's now. */
+    onPaid(order: PayView): void;
+    /** Words of a failed check (an ApiError's message), or null for "No connection". */
+    errorText?(e: unknown): string | null;
+    /** The time now in ms (a test gives its own). */
+    now?: () => number;
+};
+export type PayPanel = {
+    node: HTMLElement;
+    stop(): void;
+};
+/** True when this order must show the test stamp: the server said test mode, or it sent no address or no link. */
+export declare const isTestOrder: (o: Pick<PayView, "test" | "uri" | "address">) => boolean;
+export declare function payPanel(start: PayView, options: PayOptions): PayPanel;

package/dist/shop/panel/pay.js

@@ -0,0 +1,115 @@
+// The pay sheet for one order (the game starter's src/client/ui/pay.ts). It shows the exact amount, a QR code and a "nano:" link for the wallet, and asks
+// the game every 5 seconds whether the payment arrived, for 2 minutes per check.
+//
+// TEST MODE: the server sends no address and no link, and this sheet shows a large "TEST MODE: DO NOT PAY" stamp where the QR code would be, with the
+// wallet key off. Never change that: a payment to an address that nobody holds the key for is lost for good. The sheet decides it from the ORDER (its
+// `test`, a missing `uri` or a missing `address`), never from a setting of the page.
+import { copy, h } from "../../admin/panel/dom.js";
+import { usdText } from "../../looks/look.js";
+import { qrSvg } from "./qr.js";
+export const PAY_TIMING = { pollMs: 5000, checkForMs: 2 * 60_000 };
+/** True when this order must show the test stamp: the server said test mode, or it sent no address or no link. */
+export const isTestOrder = (o) => o.test || !o.uri || !o.address;
+export function payPanel(start, options) {
+    let order = start;
+    const now = options.now ?? (() => Date.now());
+    let stopped = false;
+    let timer;
+    let clockTimer;
+    let checkingUntil = 0;
+    const status = h("p", { class: "n133s-status", role: "status", "aria-live": "polite" });
+    const again = h("button", { class: "n133s-btn n133s-wide", type: "button", hidden: true }, "Check again");
+    const left = h("span", { class: "n133s-time-left" });
+    const amount = h("div", { class: "n133s-amount" }, h("strong", {}, `${order.xno} XNO`), h("span", {}, ` = ${usdText(Number(order.usd))}`));
+    let payArea;
+    /** The main key (the wallet link; off in test mode): it stands in a foot that stays in view, so a phone on its side never hides it. */
+    let wallet;
+    const test = isTestOrder(order);
+    if (test) {
+        payArea = h("div", { class: "n133s-test-pay" }, h("div", { class: "n133s-qr n133s-qr-blocked", "aria-hidden": "true" }, h("div", { class: "n133s-qr-fake" })), h("div", { class: "n133s-stamp", role: "alert" }, h("span", {}, "TEST MODE:"), " ", h("span", {}, "DO NOT PAY")), h("p", { class: "n133s-fine" }, "This game is in test mode, so nothing can be paid here. To sell for real, the creator sets their own receive address and turns test mode off."));
+        wallet = h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", disabled: true }, "Open wallet (off in test mode)");
+    }
+    else {
+        const copyAmount = h("button", { class: "n133s-btn n133s-small", type: "button" }, "Copy");
+        copyAmount.addEventListener("click", () => copy(order.xno, copyAmount));
+        const copyAddress = h("button", { class: "n133s-btn n133s-small", type: "button" }, "Copy");
+        copyAddress.addEventListener("click", () => copy(order.address, copyAddress));
+        payArea = h("div", { class: "n133s-live-pay" }, h("div", { class: "n133s-qr" }, qrSvg(order.uri, `QR code to pay ${order.xno} XNO`)), h("details", { class: "n133s-by-hand" }, h("summary", {}, "Enter it by hand"), h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, "Amount"), h("code", {}, `${order.xno} XNO`), copyAmount), h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, "To"), h("code", { class: "n133s-address" }, order.address), copyAddress), h("p", { class: "n133s-fine" }, "Send exactly this amount, with every digit. Another amount does not match this order.")));
+        wallet = h("a", { class: "n133s-btn n133s-primary n133s-wide", href: order.uri }, "Open wallet");
+    }
+    const node = h("div", { class: `n133s-pay${test ? " n133s-is-test" : ""}` }, h("div", { class: "n133s-pay-main" }, h("p", { class: "n133s-pay-what" }, `${options.lookName}: a look for your character. It changes how you look, not how you play.`), amount, payArea), h("div", { class: "n133s-pay-side" }, h("p", { class: "n133s-fine" }, "This order ends in ", left, "."), status, again, h("p", { class: "n133s-fine n133s-prices" }, `Price in XNO from ${order.prices.join(", ")}. Powered by CoinGecko.`), h("div", { class: "n133s-foot" }, wallet)));
+    const stop = () => {
+        stopped = true;
+        if (timer)
+            clearTimeout(timer);
+        if (clockTimer)
+            clearInterval(clockTimer);
+        clockTimer = undefined;
+    };
+    const tick = () => {
+        const ms = Math.max(0, order.expiresAt - now());
+        const m = Math.floor(ms / 60_000);
+        const s = Math.floor((ms % 60_000) / 1000);
+        left.textContent = `${m}:${String(s).padStart(2, "0")}`;
+    };
+    tick();
+    clockTimer = setInterval(tick, 1000);
+    function show(o) {
+        order = o;
+        if (o.status === "paid") {
+            stop();
+            payArea.replaceChildren(h("div", { class: "n133s-paid" }, h("strong", {}, "Paid. Thank you!"), h("p", {}, `${options.lookName} is yours now.`)));
+            wallet.hidden = true;
+            status.textContent = "";
+            again.hidden = true;
+            options.onPaid(o);
+            return true;
+        }
+        if (o.status === "paid_late") {
+            stop();
+            status.textContent = "This payment came after the order ended. The look was not given. The creator sees it and can send it back.";
+            again.hidden = true;
+            return true;
+        }
+        if (o.status === "expired") {
+            stop();
+            status.textContent = "This order ended. If you already paid, wait here: a payment sent in time still counts.";
+            again.hidden = false;
+            return false;
+        }
+        return false;
+    }
+    async function poll() {
+        if (stopped)
+            return;
+        try {
+            const o = await options.check(order.id);
+            if (show(o))
+                return;
+            if (o.status === "open")
+                status.textContent = test ? "Test mode: the game does not wait for a payment." : "Waiting for your payment…";
+        }
+        catch (e) {
+            status.textContent = options.errorText?.(e) ?? "No connection. Trying again…";
+        }
+        if (now() < checkingUntil)
+            timer = setTimeout(poll, PAY_TIMING.pollMs);
+        else if (!stopped) {
+            status.textContent = "Still waiting. Already paid? Press Check again.";
+            again.hidden = false;
+        }
+    }
+    function startChecking() {
+        stopped = false;
+        again.hidden = true;
+        checkingUntil = now() + PAY_TIMING.checkForMs;
+        clockTimer ??= setInterval(tick, 1000);
+        void poll();
+    }
+    again.addEventListener("click", startChecking);
+    if (!test)
+        startChecking();
+    else
+        status.textContent = "Test mode: the game does not wait for a payment.";
+    return { node, stop };
+}

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

@@ -0,0 +1,9 @@
+/** The smallest version that holds `length` bytes at level M, or 0. */
+export declare const qrVersionFor: (length: number) => number;
+/**
+ * The modules of the QR code of `text` (UTF-8): `true` is dark, `[row][column]`, without the quiet zone. `mask` forces a mask (0 to 7); by default the
+ * one with the lowest penalty. Throws when the text is longer than version 10 holds (213 bytes).
+ */
+export declare function qrModules(text: string, mask?: number): boolean[][];
+/** The QR code of `text` as an SVG element: dark modules on white, with a quiet zone of 4 modules. `label` names it for a screen reader. */
+export declare function qrSvg(text: string, label: string): SVGSVGElement;

package/dist/shop/panel/qr.js

@@ -0,0 +1,281 @@
+// A QR code for the pay sheet, made in the browser: no outside service sees the payment request, and the package needs no QR library. Byte mode, error
+// correction level M (as the game starter's qrcode-generator used), versions 1 to 10: up to 213 bytes, and a nano: link with a raw amount is at most 117.
+// The steps are ISO/IEC 18004's (and Project Nayuki's reference code): the data and its Reed-Solomon codes, the fixed patterns, the zig-zag placement, and
+// the mask with the lowest penalty. `qrModules` has no DOM; `qrSvg` draws it as one SVG path (crisp at any size, fine under a strict CSP).
+/** For each version 1 to 10 at level M: the EC codewords per block, and the data codewords of each block. */
+const BLOCKS = [
+    [10, [16]],
+    [16, [28]],
+    [26, [44]],
+    [18, [32, 32]],
+    [24, [43, 43]],
+    [16, [27, 27, 27, 27]],
+    [18, [31, 31, 31, 31]],
+    [22, [38, 38, 39, 39]],
+    [22, [36, 36, 36, 37, 37]],
+    [26, [43, 43, 43, 43, 44]],
+];
+const ALIGN = [[], [6, 18], [6, 22], [6, 26], [6, 30], [6, 34], [6, 22, 38], [6, 24, 42], [6, 26, 46], [6, 28, 50]];
+const gfMul = (x, y) => {
+    let z = 0;
+    for (let i = 7; i >= 0; i--) {
+        z = (z << 1) ^ ((z >>> 7) * 0x11d);
+        z ^= ((y >>> i) & 1) * x;
+    }
+    return z & 0xff;
+};
+function rsDivisor(degree) {
+    const out = new Array(degree).fill(0);
+    out[degree - 1] = 1;
+    let root = 1;
+    for (let i = 0; i < degree; i++) {
+        for (let j = 0; j < degree; j++) {
+            out[j] = gfMul(out[j], root);
+            if (j + 1 < degree)
+                out[j] ^= out[j + 1];
+        }
+        root = gfMul(root, 0x02);
+    }
+    return out;
+}
+function rsRemainder(data, divisor) {
+    const out = new Array(divisor.length).fill(0);
+    for (const b of data) {
+        const factor = b ^ out.shift();
+        out.push(0);
+        divisor.forEach((c, i) => (out[i] ^= gfMul(c, factor)));
+    }
+    return out;
+}
+/** The codewords (data and EC, interleaved) of `bytes` in `version`. */
+function codewords(bytes, version) {
+    const [ecLen, blocks] = BLOCKS[version - 1];
+    const capacity = blocks.reduce((a, b) => a + b, 0);
+    const bits = [];
+    const put = (value, n) => {
+        for (let i = n - 1; i >= 0; i--)
+            bits.push((value >>> i) & 1);
+    };
+    put(0b0100, 4);
+    put(bytes.length, version < 10 ? 8 : 16);
+    for (const b of bytes)
+        put(b, 8);
+    put(0, Math.min(4, capacity * 8 - bits.length));
+    while (bits.length % 8)
+        bits.push(0);
+    const data = [];
+    for (let i = 0; i < bits.length; i += 8)
+        data.push(bits.slice(i, i + 8).reduce((a, b) => (a << 1) | b, 0));
+    for (let pad = 0xec; data.length < capacity; pad ^= 0xec ^ 0x11)
+        data.push(pad);
+    const divisor = rsDivisor(ecLen);
+    const parts = [];
+    let at = 0;
+    for (const n of blocks) {
+        parts.push(data.slice(at, at + n));
+        at += n;
+    }
+    const ecs = parts.map((p) => rsRemainder(p, divisor));
+    const out = [];
+    const longest = Math.max(...blocks);
+    for (let i = 0; i < longest; i++)
+        for (const p of parts)
+            if (i < p.length)
+                out.push(p[i]);
+    for (let i = 0; i < ecLen; i++)
+        for (const e of ecs)
+            out.push(e[i]);
+    return out;
+}
+const MASKS = [
+    (x, y) => (x + y) % 2 === 0,
+    (_x, y) => y % 2 === 0,
+    (x) => x % 3 === 0,
+    (x, y) => (x + y) % 3 === 0,
+    (x, y) => (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0,
+    (x, y) => ((x * y) % 2) + ((x * y) % 3) === 0,
+    (x, y) => (((x * y) % 2) + ((x * y) % 3)) % 2 === 0,
+    (x, y) => (((x + y) % 2) + ((x * y) % 3)) % 2 === 0,
+];
+/** The penalty of a finished matrix (the four rules of the standard). */
+function penalty(m) {
+    const n = m.length;
+    let score = 0;
+    const lines = [];
+    for (let i = 0; i < n; i++) {
+        lines.push(m[i]);
+        lines.push(m.map((row) => row[i]));
+    }
+    const finder = [true, false, true, true, true, false, true];
+    for (const line of lines) {
+        let run = 1;
+        for (let i = 1; i <= n; i++) {
+            if (i < n && line[i] === line[i - 1])
+                run++;
+            else {
+                if (run >= 5)
+                    score += 3 + (run - 5);
+                run = 1;
+            }
+        }
+        for (let i = 0; i + 7 <= n; i++) {
+            if (!finder.every((v, k) => line[i + k] === v))
+                continue;
+            const lightBefore = i >= 4 && [1, 2, 3, 4].every((k) => !line[i - k]);
+            const lightAfter = i + 11 <= n && [7, 8, 9, 10].every((k) => !line[i + k]);
+            if (lightBefore)
+                score += 40;
+            if (lightAfter)
+                score += 40;
+        }
+    }
+    for (let y = 0; y + 1 < n; y++)
+        for (let x = 0; x + 1 < n; x++)
+            if (m[y][x] === m[y][x + 1] && m[y][x] === m[y + 1][x] && m[y][x] === m[y + 1][x + 1])
+                score += 3;
+    const dark = m.reduce((a, row) => a + row.filter(Boolean).length, 0);
+    score += Math.floor(Math.abs((dark * 100) / (n * n) - 50) / 5) * 10;
+    return score;
+}
+/** The smallest version that holds `length` bytes at level M, or 0. */
+export const qrVersionFor = (length) => BLOCKS.findIndex(([, b], i) => 4 + (i + 1 < 10 ? 8 : 16) + 8 * length <= 8 * b.reduce((x, y) => x + y, 0)) + 1;
+/**
+ * The modules of the QR code of `text` (UTF-8): `true` is dark, `[row][column]`, without the quiet zone. `mask` forces a mask (0 to 7); by default the
+ * one with the lowest penalty. Throws when the text is longer than version 10 holds (213 bytes).
+ */
+export function qrModules(text, mask) {
+    const bytes = new TextEncoder().encode(text);
+    const version = qrVersionFor(bytes.length);
+    if (version < 1)
+        throw new Error("qrModules: the text is longer than this QR code holds (213 bytes)");
+    const size = version * 4 + 17;
+    const m = Array.from({ length: size }, () => new Array(size).fill(false));
+    const fixed = Array.from({ length: size }, () => new Array(size).fill(false));
+    const set = (x, y, dark) => {
+        m[y][x] = dark;
+        fixed[y][x] = true;
+    };
+    for (let i = 0; i < size; i++) {
+        set(6, i, i % 2 === 0);
+        set(i, 6, i % 2 === 0);
+    }
+    for (const [cx, cy] of [[3, 3], [size - 4, 3], [3, size - 4]]) {
+        for (let dy = -4; dy <= 4; dy++)
+            for (let dx = -4; dx <= 4; dx++) {
+                const x = cx + dx;
+                const y = cy + dy;
+                const d = Math.max(Math.abs(dx), Math.abs(dy));
+                if (x >= 0 && x < size && y >= 0 && y < size)
+                    set(x, y, d !== 2 && d !== 4);
+            }
+    }
+    const pos = ALIGN[version - 1];
+    for (let i = 0; i < pos.length; i++)
+        for (let j = 0; j < pos.length; j++) {
+            const corner = (i === 0 && j === 0) || (i === 0 && j === pos.length - 1) || (i === pos.length - 1 && j === 0);
+            if (corner)
+                continue;
+            for (let dy = -2; dy <= 2; dy++)
+                for (let dx = -2; dx <= 2; dx++)
+                    set(pos[i] + dx, pos[j] + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+        }
+    const drawFormat = (maskNo) => {
+        const data = (0 << 3) | maskNo; // level M is 00
+        let rem = data;
+        for (let i = 0; i < 10; i++)
+            rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
+        const bits = ((data << 10) | rem) ^ 0x5412;
+        const bit = (i) => ((bits >>> i) & 1) === 1;
+        for (let i = 0; i <= 5; i++)
+            set(8, i, bit(i));
+        set(8, 7, bit(6));
+        set(8, 8, bit(7));
+        set(7, 8, bit(8));
+        for (let i = 9; i < 15; i++)
+            set(14 - i, 8, bit(i));
+        for (let i = 0; i < 8; i++)
+            set(size - 1 - i, 8, bit(i));
+        for (let i = 8; i < 15; i++)
+            set(8, size - 15 + i, bit(i));
+        set(8, size - 8, true);
+    };
+    drawFormat(0);
+    if (version >= 7) {
+        let rem = version;
+        for (let i = 0; i < 12; i++)
+            rem = (rem << 1) ^ ((rem >>> 11) * 0x1f25);
+        const bits = (version << 12) | rem;
+        for (let i = 0; i < 18; i++) {
+            const dark = ((bits >>> i) & 1) === 1;
+            const a = size - 11 + (i % 3);
+            const b = Math.floor(i / 3);
+            set(a, b, dark);
+            set(b, a, dark);
+        }
+    }
+    const words = codewords(bytes, version);
+    let i = 0;
+    for (let right = size - 1; right >= 1; right -= 2) {
+        if (right === 6)
+            right = 5;
+        for (let vert = 0; vert < size; vert++)
+            for (let j = 0; j < 2; j++) {
+                const x = right - j;
+                const upward = ((right + 1) & 2) === 0;
+                const y = upward ? size - 1 - vert : vert;
+                if (!fixed[y][x] && i < words.length * 8) {
+                    m[y][x] = ((words[i >>> 3] >>> (7 - (i & 7))) & 1) === 1;
+                    i++;
+                }
+            }
+    }
+    const masked = (k) => {
+        const out = m.map((row) => row.slice());
+        for (let y = 0; y < size; y++)
+            for (let x = 0; x < size; x++)
+                if (!fixed[y][x] && MASKS[k](x, y))
+                    out[y][x] = !out[y][x];
+        return out;
+    };
+    const pick = (k) => {
+        drawFormat(k);
+        return masked(k);
+    };
+    if (mask !== undefined) {
+        if (!Number.isInteger(mask) || mask < 0 || mask > 7)
+            throw new Error("qrModules: a mask is 0 to 7");
+        return pick(mask);
+    }
+    let best = 0;
+    let bestScore = Infinity;
+    for (let k = 0; k < 8; k++) {
+        const s = penalty(pick(k));
+        if (s < bestScore)
+            (best = k), (bestScore = s);
+    }
+    return pick(best);
+}
+const SVG = "http://www.w3.org/2000/svg";
+/** The QR code of `text` as an SVG element: dark modules on white, with a quiet zone of 4 modules. `label` names it for a screen reader. */
+export function qrSvg(text, label) {
+    const m = qrModules(text);
+    const quiet = 4;
+    const n = m.length + quiet * 2;
+    const svg = document.createElementNS(SVG, "svg");
+    svg.setAttribute("viewBox", `0 0 ${n} ${n}`);
+    svg.setAttribute("class", "n133s-qr-code");
+    svg.setAttribute("role", "img");
+    svg.setAttribute("aria-label", label);
+    svg.setAttribute("shape-rendering", "crispEdges");
+    const back = document.createElementNS(SVG, "rect");
+    back.setAttribute("width", String(n));
+    back.setAttribute("height", String(n));
+    back.setAttribute("fill", "#ffffff");
+    let d = "";
+    m.forEach((row, y) => row.forEach((dark, x) => (d += dark ? `M${x + quiet} ${y + quiet}h1v1h-1z` : "")));
+    const path = document.createElementNS(SVG, "path");
+    path.setAttribute("d", d);
+    path.setAttribute("fill", "#111318");
+    svg.append(back, path);
+    return svg;
+}

package/dist/shop/price.d.ts

@@ -0,0 +1,23 @@
+import type { Fetch } from "./nodes.js";
+import type { ShopStore } from "./store.js";
+export type PriceFeed = {
+    name: string;
+    url: string;
+    read: (j: any) => unknown;
+};
+export declare const PRICE_FEEDS: readonly PriceFeed[];
+export declare const RATE_FRESH_MS: number;
+export declare const RATE_LAST_GOOD_MS: number;
+export type Rate = {
+    usd: number;
+    at: number;
+    sources: string[];
+    stale: boolean;
+};
+/** Asks every feed at once and returns the median of the believable answers, or null. */
+export declare function readFeeds(fetchFn: Fetch, feeds?: readonly PriceFeed[], timeoutMs?: number): Promise<{
+    usd: number;
+    sources: string[];
+} | null>;
+/** Dollars per XNO now, or null when no believable price is known. */
+export declare function usdPerXno(store: Pick<ShopStore, "readRate" | "saveRate">, fetchFn: Fetch, now?: number, feeds?: readonly PriceFeed[]): Promise<Rate | null>;