@nano133/nanoterra 0.8.1 → 0.9.3

package/dist/shop/panel/mount.js

@@ -0,0 +1,221 @@
+// 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 } from "../../looks/look.js";
+import { looksView, slotsOf } from "./looks.js";
+import { payPanel } from "./pay.js";
+import { shopWords } from "./words.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 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 = 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(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('.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() }, 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, game, 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("", { 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 ? 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();
+        },
+    };
+}

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

@@ -0,0 +1,27 @@
+import type { PayView } from "../handler.js";
+import { type ShopWords } from "./words.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;
+    /** The game's words (./words.ts): the keys it leaves out keep the defaults. */
+    words?: Partial<ShopWords>;
+};
+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,128 @@
+// 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. The stamp's words are not among the game's words (./words.ts).
+import { h } from "../../admin/panel/dom.js";
+import { usdText } from "../../looks/look.js";
+import { qrSvg } from "./qr.js";
+import { priceLine, shopWords } from "./words.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 w = shopWords(options.words);
+    const test = isTestOrder(order);
+    /** The order's state. In test mode nothing is checked, so it has nothing to say and takes no room. */
+    const status = h("p", { class: "n133s-status", role: "status", "aria-live": "polite", hidden: test });
+    const again = h("button", { class: "n133s-btn n133s-wide", type: "button", hidden: true }, w.checkAgain);
+    /** The time left, live only: in test mode nothing is paid, so nothing waits for the end. */
+    const ends = h("p", { class: "n133s-fine n133s-time-left", hidden: test });
+    const amount = h("div", { class: "n133s-amount" }, test ? null : h("span", { class: "n133s-exact" }, w.sendExactly), h("strong", {}, w.amount(order.xno)), h("span", {}, w.usd(usdText(Number(order.usd)))));
+    const copyKey = (value) => {
+        const key = h("button", { class: "n133s-btn n133s-small", type: "button" }, w.copy);
+        key.addEventListener("click", async () => {
+            try {
+                await navigator.clipboard.writeText(value);
+                key.textContent = w.copied;
+            }
+            catch {
+                key.textContent = w.copyFailed;
+            }
+            setTimeout(() => (key.textContent = w.copy), 1500);
+        });
+        return key;
+    };
+    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;
+    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" }, w.testNote));
+        wallet = h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", disabled: true }, w.walletOff);
+    }
+    else {
+        payArea = h("div", { class: "n133s-live-pay" }, h("div", { class: "n133s-qr" }, qrSvg(order.uri, w.qrLabel(order.xno))), h("details", { class: "n133s-by-hand" }, h("summary", {}, w.byHand), h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, w.amountLabel), h("code", {}, w.amount(order.xno)), copyKey(order.xno)), h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, w.toLabel), h("code", { class: "n133s-address" }, order.address), copyKey(order.address)), h("p", { class: "n133s-fine" }, w.byHandNote)));
+        wallet = h("a", { class: "n133s-btn n133s-primary n133s-wide", href: order.uri }, w.wallet);
+    }
+    const node = h("div", { class: `n133s-pay${test ? " n133s-is-test" : ""}` }, h("div", { class: "n133s-pay-main" }, h("p", { class: "n133s-pay-what" }, w.lookLine(options.lookName)), amount, payArea), h("div", { class: "n133s-pay-side" }, ends, status, again, h("p", { class: "n133s-fine n133s-prices" }, priceLine(w, order.prices)), 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);
+        ends.textContent = w.endsIn(`${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", {}, w.paid), h("p", {}, w.paidLine(options.lookName))));
+            wallet.hidden = true;
+            status.textContent = "";
+            again.hidden = true;
+            options.onPaid(o);
+            return true;
+        }
+        if (o.status === "paid_late") {
+            stop();
+            status.textContent = w.paidLate;
+            again.hidden = true;
+            return true;
+        }
+        if (o.status === "expired") {
+            stop();
+            status.textContent = w.expired;
+            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 ? "" : w.waiting;
+        }
+        catch (e) {
+            status.textContent = options.errorText?.(e) ?? w.noConnection;
+        }
+        if (now() < checkingUntil)
+            timer = setTimeout(poll, PAY_TIMING.pollMs);
+        else if (!stopped) {
+            status.textContent = w.stillWaiting;
+            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);
+    // Test mode makes no checks: nothing can be paid, so nothing is waited for.
+    if (!test)
+        startChecking();
+    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;
+}