@johnmorrisdotca/kumimoji 1.2.2 → 1.3.1

package/dist/ui/mount.js

@@ -1,31 +1,12 @@
-import { kumimojiClock, kumimojiFromJSON, kumimojiToJSON, kumimojiToText } from "../export.js";
+import { kumimojiFromJSON, kumimojiToJSON, kumimojiToText } from "../export.js";
 import { generateKumimoji } from "../generate.js";
 import { judgeWithWords } from "../judge.js";
-import { assignHandTile, deal, draw, isFinished, liftAll, liftToHand, mayDraw, mayTrade, moveOnTable, placeFromHand, sortHand, swapWithHand, tilesLeft, trade } from "../play.js";
-import { kumimojiSay, kumimojiStrings } from "../strings.js";
+import { deal, isFinished, liftToHand, moveOnTable, placeFromHand, swapWithHand } from "../play.js";
+import { kumimojiStrings } from "../strings.js";
 import { KUMIMOJI_HANDS } from "../tiles.constants.js";
-import { tileFace } from "../tileFace.js";
 import { loadTileWords } from "../tileWords.js";
-import { boardModel } from "./board.js";
+import { button, node, tableDrawing } from "./draw.js";
 import { KUMIMOJI_STYLE } from "./style.js";
-/** What a wild nobody has given a letter yet shows in the hand. */
-const WILD_MARK = "★";
-function node(name, className, text) {
-    const made = document.createElement(name);
-    if (className !== undefined)
-        made.className = className;
-    if (text !== undefined)
-        made.textContent = text;
-    return made;
-}
-function button(text, onClick, primary = false, testId) {
-    const made = node("button", primary ? "km-button km-primary" : "km-button", text);
-    made.type = "button";
-    if (testId !== undefined)
-        made.dataset.testid = testId;
-    made.addEventListener("click", onClick);
-    return made;
-}
 /** Hand a string to the person as a file of that name. */
 function save(name, type, text) {
     const url = URL.createObjectURL(new Blob([text], { type }));
@@ -46,30 +27,60 @@ function save(name, type, text) {
  * game loads back.
  *
  * The word list is fetched the first time a game in its language is dealt.
+ * @param target - The host element for this table.
+ * @param options - Initial deal or saved state, presentation and callbacks.
+ * @returns The native handle, including ready and presentation updates without redealing.
+ * @example
+ * ```ts
+ * import { mountKumimoji } from "@johnmorrisdotca/kumimoji/ui";
+ * if (typeof document !== "undefined") {
+ *   const table = mountKumimoji(document.createElement("div"), { keep: false });
+ *   void table.ready.then(() => table.destroy());
+ * }
+ * console.log(typeof mountKumimoji);
+ * ```
  */
 export function mountKumimoji(target, options = {}) {
-    let settings = { language: options.language, hand: options.hand, level: options.level, gameLength: options.gameLength, diagonals: options.diagonals, seed: options.seed };
-    const pageLocale = () => (typeof document !== "undefined" && document.documentElement.lang.toLowerCase().startsWith("ja") ? "ja" : "en");
-    let locale = options.locale ?? pageLocale();
-    let own = options.strings ?? {};
-    let say = kumimojiStrings(locale, own);
-    let note = "";
-    let words = null;
-    let dealt = null;
-    let play = null;
-    let held = null;
+    let current = options;
+    let settings = {
+        language: current.language,
+        hand: current.hand,
+        level: current.level,
+        gameLength: current.gameLength,
+        diagonals: current.diagonals,
+        seed: current.seed,
+    };
+    const pageLocale = () => typeof document !== "undefined" && document.documentElement.lang.toLowerCase().startsWith("ja") ? "ja" : "en";
+    let own = current.strings ?? {};
+    const openingLocale = current.locale ?? pageLocale();
     // Where a keyboard is: the square and the hand tile that Tab lands on, and the one the arrow keys move from.
-    let onSquare = null;
-    let onHand = 0;
-    let started = 0;
-    let finishedAt = null;
-    let destroyed = false;
+    const session = {
+        play: null,
+        finishedAt: null,
+        started: 0,
+        words: null,
+        held: null,
+        onSquare: null,
+        onHand: 0,
+        say: kumimojiStrings(openingLocale, own),
+        locale: openingLocale,
+        note: "",
+        destroyed: false,
+    };
+    let dealt = null;
     // Each deal and each game put on the table takes a number; one that is overtaken while its list loads gives way.
     let asked = 0;
+    // The drawing is built once the elements exist. Until then nothing calls these.
+    const bridge = {
+        render: () => { },
+        renderStatus: () => { },
+        newGame: () => { },
+    };
+    const render = () => bridge.render();
     const root = node("div", "km-root");
     root.dataset.testid = "km-root";
     root.dataset.state = "dealing";
-    for (const [name, value] of Object.entries(options.theme ?? {}))
+    for (const [name, value] of Object.entries(current.theme ?? {}))
         root.style.setProperty(name, value);
     const style = node("style");
     style.textContent = KUMIMOJI_STYLE;
@@ -87,14 +98,20 @@ export function mountKumimoji(target, options = {}) {
     const picker = node("div", "km-picker");
     picker.dataset.testid = "km-picker";
     const controls = node("div", "km-controls");
+    controls.hidden = current.controls === false;
     controls.dataset.testid = "km-controls";
     const keep = node("details", "km-keep");
     keep.dataset.testid = "km-keep";
     root.append(style, status, board, notes, picker, hand, controls);
-    if (options.keep !== false)
+    if (current.keep !== false)
         root.append(keep);
     target.append(root);
-    const savedNow = () => (play === null || dealt === null ? null : { deal: dealt, play, elapsedMs: (finishedAt ?? Date.now()) - started });
+    const savedNow = () => {
+        const now = session.play;
+        if (now === null || dealt === null)
+            return null;
+        return { deal: dealt, play: now, elapsedMs: (session.finishedAt ?? Date.now()) - session.started };
+    };
     // The saving and loading are made once, so the fold stays open or shut as the person left it; only their words change.
     const keepTitle = node("summary", "km-keep-title");
     const keepNote = node("p", "km-note");
@@ -107,15 +124,15 @@ export function mountKumimoji(target, options = {}) {
     file.dataset.testid = "km-file";
     const read = async (text) => {
         const loaded = await kumimojiFromJSON(text).catch(() => null);
-        if (destroyed)
+        if (session.destroyed)
             return;
         if (loaded === null) {
-            note = say.loadBad;
+            session.note = session.say.loadBad;
             render();
             return;
         }
         await handle.setGame(loaded);
-        note = say.loaded;
+        session.note = session.say.loaded;
         render();
     };
     file.addEventListener("change", () => {
@@ -133,60 +150,59 @@ export function mountKumimoji(target, options = {}) {
     const saveText = button("", () => {
         const now = savedNow();
         if (now !== null)
-            save(`kumimoji-${now.deal.seed}.txt`, "text/plain", kumimojiToText(now, say));
+            save(`kumimoji-${now.deal.seed}.txt`, "text/plain", kumimojiToText(now, session.say));
     }, false, "km-save-text");
     const load = button("", () => file.click(), false, "km-load");
     const keepButtons = node("div", "km-controls");
     keepButtons.append(saveJson, saveText, load);
     keep.append(keepTitle, keepButtons, keepNote, file);
-    const tick = setInterval(() => {
-        if (play !== null && finishedAt === null)
-            renderStatus();
-    }, 1000);
-    const verdictOf = (now) => judgeWithWords(now.tiles, words, { diagonals: settings.diagonals === true });
+    const verdictOf = (now) => judgeWithWords(now.tiles, session.words, { diagonals: settings.diagonals === true });
     const change = (next) => {
-        play = next;
+        session.play = next;
         const verdict = verdictOf(next);
-        if (finishedAt === null && isFinished(next, verdict)) {
-            finishedAt = Date.now();
-            options.onFinish?.({ deal: dealt, play: next, elapsedMs: finishedAt - started });
+        if (session.finishedAt === null && isFinished(next, verdict)) {
+            session.finishedAt = Date.now();
+            current.onFinish?.({ deal: dealt, play: next, elapsedMs: session.finishedAt - session.started });
         }
-        note = "";
+        session.note = "";
         const now = savedNow();
         if (now !== null)
-            options.onChange?.(now);
+            current.onChange?.(now);
         render();
     };
     const tapSquare = (square) => {
-        if (play === null || finishedAt !== null)
+        const now = session.play;
+        if (now === null || session.finishedAt !== null)
             return;
-        const there = play.tiles.get(square);
+        const there = now.tiles.get(square);
+        const held = session.held;
         if (held === null) {
             if (there !== undefined)
-                held = { from: "table", square };
+                session.held = { from: "table", square };
             render();
             return;
         }
         if (held.from === "hand") {
             const at = held.at;
-            const tile = play.hand[at];
+            const tile = now.hand[at];
             if (tile === undefined)
                 return;
             // A wild is given a letter before it is laid.
             if (tile === "*")
                 return;
-            held = null;
-            change(there === undefined ? placeFromHand(play, at, square) : swapWithHand(play, at, square));
+            session.held = null;
+            change(there === undefined ? placeFromHand(now, at, square) : swapWithHand(now, at, square));
             return;
         }
         const from = held.square;
-        held = null;
-        change(from === square ? liftToHand(play, square) : moveOnTable(play, from, square));
+        session.held = null;
+        change(from === square ? liftToHand(now, square) : moveOnTable(now, from, square));
     };
     const tapHand = (at) => {
-        if (play === null || finishedAt !== null)
+        if (session.play === null || session.finishedAt !== null)
             return;
-        held = held?.from === "hand" && held.at === at ? null : { from: "hand", at };
+        const held = session.held;
+        session.held = held?.from === "hand" && held.at === at ? null : { from: "hand", at };
         render();
     };
     board.addEventListener("click", (event) => {
@@ -209,7 +225,23 @@ export function mountKumimoji(target, options = {}) {
         const cells = [...grid.children];
         const cols = Number(grid.dataset.cols);
         const at = cells.indexOf(cell);
-        const step = event.key === "ArrowLeft" ? (at % cols > 0 ? -1 : 0) : event.key === "ArrowRight" ? (at % cols < cols - 1 ? 1 : 0) : event.key === "ArrowUp" ? (at - cols >= 0 ? -cols : 0) : event.key === "ArrowDown" ? (at + cols < cells.length ? cols : 0) : null;
+        const step = event.key === "ArrowLeft"
+            ? at % cols > 0
+                ? -1
+                : 0
+            : event.key === "ArrowRight"
+                ? at % cols < cols - 1
+                    ? 1
+                    : 0
+                : event.key === "ArrowUp"
+                    ? at - cols >= 0
+                        ? -cols
+                        : 0
+                    : event.key === "ArrowDown"
+                        ? at + cols < cells.length
+                            ? cols
+                            : 0
+                        : null;
         if (step === null)
             return;
         event.preventDefault();
@@ -218,18 +250,18 @@ export function mountKumimoji(target, options = {}) {
             return;
         cell.tabIndex = -1;
         next.tabIndex = 0;
-        onSquare = next.dataset.square ?? null;
+        session.onSquare = next.dataset.square ?? null;
         next.focus();
     });
     board.addEventListener("focusin", (event) => {
         const square = event.target.closest("[data-square]")?.getAttribute("data-square");
         if (square !== null && square !== undefined)
-            onSquare = square;
+            session.onSquare = square;
     });
     hand.addEventListener("focusin", (event) => {
         const at = event.target.closest("[data-hand]")?.getAttribute("data-hand");
         if (at !== null && at !== undefined)
-            onHand = Number(at);
+            session.onHand = Number(at);
     });
     hand.addEventListener("keydown", (event) => {
         const tile = event.target.closest("[data-hand]");
@@ -237,7 +269,15 @@ export function mountKumimoji(target, options = {}) {
             return;
         const tiles = [...hand.querySelectorAll("[data-hand]")];
         const at = tiles.indexOf(tile);
-        const to = event.key === "ArrowLeft" ? at - 1 : event.key === "ArrowRight" ? at + 1 : event.key === "Home" ? 0 : event.key === "End" ? tiles.length - 1 : null;
+        const to = event.key === "ArrowLeft"
+            ? at - 1
+            : event.key === "ArrowRight"
+                ? at + 1
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? tiles.length - 1
+                        : null;
         if (to === null)
             return;
         event.preventDefault();
@@ -246,212 +286,83 @@ export function mountKumimoji(target, options = {}) {
             return;
         tile.tabIndex = -1;
         next.tabIndex = 0;
-        onHand = to;
+        session.onHand = to;
         next.focus();
     });
     root.addEventListener("keydown", (event) => {
-        if (event.key !== "Escape" || held === null)
+        if (event.key !== "Escape" || session.held === null)
             return;
-        held = null;
+        session.held = null;
         render();
     });
-    function renderStatus() {
-        root.dataset.state = play === null ? "dealing" : finishedAt !== null ? "finished" : "playing";
-        if (play === null) {
-            status.textContent = say.dealing;
-            return;
-        }
-        const left = tilesLeft(play);
-        root.dataset.left = String(left);
-        const time = kumimojiClock((finishedAt ?? Date.now()) - started);
-        status.textContent = finishedAt !== null ? kumimojiSay(say.finished, { time }) : kumimojiSay(left === 1 ? say.leftOne : say.left, { n: left, time });
-    }
-    function renderBoard(verdict) {
-        const model = boardModel(play.tiles, play.tiles.size === 0 ? null : verdict, words.glyphOf);
-        const grid = node("div", "km-grid");
-        grid.style.gridTemplateColumns = `repeat(${model.cols}, var(--km-square))`;
-        grid.setAttribute("role", "group");
-        grid.setAttribute("aria-label", say.tableLabel);
-        grid.setAttribute("aria-description", say.tableKeys);
-        grid.dataset.cols = String(model.cols);
-        const cells = [];
-        for (const square of model.squares) {
-            const cell = node("button", "km-square");
-            cell.type = "button";
-            cell.dataset.square = square.square;
-            if (square.tile !== null) {
-                cell.classList.add("km-tile");
-                if (square.wild)
-                    cell.classList.add("km-wild");
-                if (square.mark !== null)
-                    cell.classList.add(`km-${square.mark}`);
-                cell.textContent = square.glyph;
-                cell.dataset.tile = square.glyph;
-                cell.setAttribute("aria-label", square.wild ? kumimojiSay(say.wildTile, { tile: square.glyph }) : square.glyph);
-            }
-            else {
-                cell.setAttribute("aria-label", say.emptySquare);
-            }
-            if (held?.from === "table" && held.square === square.square)
-                cell.classList.add("km-held");
-            cell.tabIndex = -1;
-            cells.push(cell);
-            grid.append(cell);
-        }
-        // The one Tab lands on: where the keyboard was, else a tile, else the middle.
-        const stop = cells.find((cell) => cell.dataset.square === onSquare) ?? cells.find((cell) => cell.classList.contains("km-tile")) ?? cells[Math.floor(cells.length / 2)];
-        if (stop !== undefined) {
-            stop.tabIndex = 0;
-            onSquare = stop.dataset.square ?? null;
-        }
-        board.replaceChildren(grid);
-        notes.textContent = verdict.notWords.length > 0 ? kumimojiSay(say.notWords, { words: verdict.notWords.join(", ") }) : verdict.apart.size > 0 ? say.apart : "";
-    }
-    function renderHand() {
-        hand.replaceChildren();
-        hand.setAttribute("aria-label", say.handLabel);
-        play.hand.forEach((tile, at) => {
-            const face = tileFace(tile);
-            const made = node("button", "km-tile km-in-hand");
-            made.type = "button";
-            made.dataset.hand = String(at);
-            made.textContent = face.blank ? WILD_MARK : words.glyphOf(tile);
-            if (face.wild)
-                made.classList.add("km-wild");
-            if (held?.from === "hand" && held.at === at)
-                made.classList.add("km-held");
-            made.dataset.tile = face.blank ? "*" : words.glyphOf(tile);
-            made.setAttribute("aria-label", face.blank ? say.wildBlank : face.wild ? kumimojiSay(say.wildTile, { tile: words.glyphOf(tile) }) : words.glyphOf(tile));
-            made.tabIndex = at === Math.min(onHand, play.hand.length - 1) ? 0 : -1;
-            hand.append(made);
-        });
-        if (play.hand.length === 0 && finishedAt === null)
-            hand.append(node("span", "km-empty", say.noTiles));
-    }
-    function renderPicker() {
-        picker.replaceChildren();
-        if (held?.from !== "hand" || play === null)
-            return;
-        const at = held.at;
-        const tile = play.hand[at];
-        if (tile === undefined || !tileFace(tile).wild)
-            return;
-        picker.append(node("span", "km-picker-title", tile === "*" ? say.giveWild : say.changeWild));
-        for (const sound of words.wildOptions) {
-            const code = words.wildFor(sound);
-            if (code === null)
-                continue;
-            picker.append(button(sound, () => {
-                held = { from: "hand", at };
-                change(assignHandTile(play, at, code));
-            }));
-        }
-    }
-    function renderControls(verdict) {
-        controls.replaceChildren();
-        if (finishedAt !== null) {
-            controls.append(button(say.newGame, () => void handle.newGame(), true, "km-new"));
-            return;
-        }
-        const now = play;
-        const drawButton = button(say.draw, () => {
-            held = null;
-            change(draw(now));
-        }, true, "km-draw");
-        drawButton.disabled = !mayDraw(now, verdict);
-        const tradeButton = button(say.trade, () => {
-            if (held?.from !== "hand")
-                return;
-            const at = held.at;
-            held = null;
-            change(trade(now, at));
-        }, false, "km-trade");
-        tradeButton.disabled = held?.from !== "hand" || !mayTrade(now);
-        controls.append(drawButton, tradeButton, button(say.sort, () => change(sortHand(now)), false, "km-sort"), button(say.liftAll, () => {
-            held = null;
-            change(liftAll(now));
-        }, false, "km-lift"), button(say.newGame, () => void handle.newGame(), false, "km-new"));
-    }
-    function renderKeep() {
-        keepTitle.textContent = say.keep;
-        saveJson.textContent = say.saveJson;
-        saveText.textContent = say.saveText;
-        load.textContent = say.load;
-        saveJson.disabled = play === null;
-        saveText.disabled = play === null;
-        keepNote.textContent = note;
-    }
-    /** Where the keyboard is, so that it can be put back after everything is drawn again: the zone, and which of it. */
-    function keyboardAt() {
-        const on = document.activeElement;
-        if (on === null || !root.contains(on))
-            return null;
-        const mark = (zone, id) => (id === undefined ? null : { zone, id });
-        if (board.contains(on))
-            return mark("board", on.dataset.square);
-        if (hand.contains(on))
-            return mark("hand", on.dataset.hand);
-        if (controls.contains(on))
-            return mark("controls", on.dataset.testid);
-        if (picker.contains(on))
-            return mark("picker", String([...picker.querySelectorAll("button")].indexOf(on)));
-        return null;
-    }
-    function keyboardBack(at) {
-        if (at === null)
-            return;
-        const zone = { board, hand, controls, picker }[at.zone];
-        const found = at.zone === "board" ? zone.querySelector(`[data-square="${at.id}"]`) : at.zone === "hand" ? zone.querySelector(`[data-hand="${at.id}"]`) : at.zone === "controls" ? zone.querySelector(`[data-testid="${at.id}"]`) : zone.querySelectorAll("button")[Number(at.id)];
-        // A button that has become disabled cannot hold the focus; the table keeps it rather than dropping it on the page.
-        if (found !== undefined && found !== null && !found.disabled)
-            found.focus({ preventScroll: true });
-    }
-    function render() {
-        if (destroyed)
-            return;
-        const where = keyboardAt();
-        root.lang = locale;
-        renderStatus();
-        renderKeep();
-        if (play === null || words === null)
-            return;
-        const verdict = verdictOf(play);
-        renderBoard(verdict);
-        renderPicker();
-        renderHand();
-        renderControls(verdict);
-        keyboardBack(where);
-    }
+    const drawing = tableDrawing(session, { root, status, board, notes, hand, picker, controls, keepTitle, saveJson, saveText, load, keepNote }, { verdictOf, change, newGame: () => bridge.newGame() });
+    bridge.render = () => drawing.render();
+    bridge.renderStatus = () => drawing.renderStatus();
+    const tick = setInterval(() => {
+        if (session.play !== null && session.finishedAt === null)
+            bridge.renderStatus();
+    }, 1000);
+    let initialReady = Promise.resolve();
     const handle = {
-        play: () => play,
+        get ready() {
+            return initialReady;
+        },
+        set: (changes) => {
+            for (const name of Object.keys(current.theme ?? {}))
+                if (changes.theme !== undefined && !(name in changes.theme))
+                    root.style.removeProperty(name);
+            if (changes.theme !== undefined)
+                for (const [name, value] of Object.entries(changes.theme))
+                    root.style.setProperty(name, value);
+            current = { ...current, ...changes };
+            if (changes.locale !== undefined)
+                session.locale = changes.locale;
+            if (changes.strings !== undefined)
+                own = changes.strings;
+            session.say = kumimojiStrings(session.locale, own);
+            if (current.keep === false)
+                keep.remove();
+            else if (keep.parentNode !== root)
+                root.append(keep);
+            controls.hidden = current.controls === false;
+            render();
+        },
+        play: () => session.play,
         saved: savedNow,
         setGame: async (saved) => {
             const mine = ++asked;
             const language = saved.deal.language;
-            settings = { language, hand: saved.deal.size, level: saved.deal.level, gameLength: saved.deal.gameLength, diagonals: saved.deal.diagonals === true, seed: undefined };
+            settings = {
+                language,
+                hand: saved.deal.size,
+                level: saved.deal.level,
+                gameLength: saved.deal.gameLength,
+                diagonals: saved.deal.diagonals === true,
+                seed: undefined,
+            };
             const list = await loadTileWords(language);
-            if (destroyed || mine !== asked)
+            if (session.destroyed || mine !== asked)
                 return;
-            words = list;
+            session.words = list;
             root.classList.toggle("km-japanese", language === "japanese");
             dealt = saved.deal;
             root.dataset.seed = String(saved.deal.seed);
-            held = null;
-            finishedAt = null;
-            started = Date.now() - saved.elapsedMs;
+            session.held = null;
+            session.finishedAt = null;
+            session.started = Date.now() - saved.elapsedMs;
             // A game loaded already finished stays finished, at the time it took, and is not announced again.
-            if (isFinished(saved.play, judgeWithWords(saved.play.tiles, words, { diagonals: settings.diagonals === true })))
-                finishedAt = Date.now();
-            play = saved.play;
-            note = "";
-            options.onChange?.(saved);
+            if (isFinished(saved.play, judgeWithWords(saved.play.tiles, list, { diagonals: settings.diagonals === true })))
+                session.finishedAt = Date.now();
+            session.play = saved.play;
+            session.note = "";
+            current.onChange?.(saved);
             render();
         },
         setLocale: (next, strings) => {
-            locale = next;
+            session.locale = next;
             if (strings !== undefined)
                 own = strings;
-            say = kumimojiStrings(locale, own);
+            session.say = kumimojiStrings(session.locale, own);
             render();
         },
         newGame: async (changed = {}) => {
@@ -459,29 +370,43 @@ export function mountKumimoji(target, options = {}) {
             settings = { ...settings, ...changed, seed: undefined };
             const language = settings.language ?? "english";
             const size = settings.hand ?? KUMIMOJI_HANDS.quick;
-            play = null;
-            held = null;
-            finishedAt = null;
-            note = "";
+            session.play = null;
+            session.held = null;
+            session.finishedAt = null;
+            session.note = "";
             render();
             const list = await loadTileWords(language);
-            if (destroyed || mine !== asked)
+            if (session.destroyed || mine !== asked)
                 return;
-            words = list;
+            session.words = list;
             // A seed deals one game: the next is dealt from a new one unless asked for by seed again.
             const seed = changed.seed ?? Math.floor(Math.random() * 2 ** 31);
             root.classList.toggle("km-japanese", language === "japanese");
             root.dataset.seed = String(seed);
-            dealt = generateKumimoji(size, settings.level ?? "medium", seed, { language, gameLength: settings.gameLength, diagonals: settings.diagonals });
-            started = Date.now();
+            dealt = generateKumimoji(size, settings.level ?? "medium", seed, {
+                language,
+                gameLength: settings.gameLength,
+                diagonals: settings.diagonals,
+            });
+            session.started = Date.now();
             change(deal(dealt.givens, size));
         },
         destroy: () => {
-            destroyed = true;
+            session.destroyed = true;
             clearInterval(tick);
             root.remove();
         },
     };
-    void handle.newGame(settings);
+    bridge.newGame = () => {
+        void handle.newGame();
+    };
+    initialReady = current.saved === undefined ? handle.newGame(settings) : handle.setGame(current.saved);
+    void initialReady.catch((error) => {
+        if (session.destroyed)
+            return;
+        const problem = error instanceof Error ? error : new Error(String(error));
+        status.textContent = session.say.loadError;
+        current.onError?.(problem);
+    });
     return handle;
 }

package/dist/ui/style.d.ts

@@ -3,5 +3,10 @@
  * variable so a page can wear it in its own colours (set them on the element
  * or any ancestor, or pass them as `theme`). Light and dark follow the
  * reader's system. Everything to be tapped is at least 44px.
+ * @example
+ * ```ts
+ * import { KUMIMOJI_STYLE } from "@johnmorrisdotca/kumimoji/ui";
+ * console.log(KUMIMOJI_STYLE.includes(".km-root")); // true
+ * ```
  */
-export declare const KUMIMOJI_STYLE = "\n.km-root {\n  --km-square: 44px; --km-felt: #2f5d4a; --km-grid-line: rgba(255,255,255,.12); --km-tile: #f3e6c8; --km-tile-ink: #2a2118;\n  --km-wild: #f6d27a; --km-wrong: #d9534f; --km-held: #ffcf3f; --km-ink: #1f2320; --km-panel: #f7f3ea;\n  --km-line: rgba(20,20,20,.35); --km-accent: #2f5d4a; --km-accent-ink: #fff;\n  --km-radius: 12px; --km-font: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  display: grid; gap: 10px; min-width: 0; color: var(--km-ink); font-family: var(--km-font); font-size: 15px;\n}\n@media (prefers-color-scheme: dark) {\n  .km-root { --km-felt: #1e3a2f; --km-ink: #ece8dc; --km-panel: #1d201e; --km-line: rgba(255,255,255,.25); --km-accent: #6fb08f; --km-accent-ink: #10150f; }\n}\n.km-root > * { min-width: 0; }\n.km-status { margin: 0; min-height: 1.4em; font-variant-numeric: tabular-nums; }\n.km-board { background: var(--km-felt); border-radius: var(--km-radius); padding: 10px; overflow: auto; max-height: 70vh; }\n.km-grid { display: grid; gap: 2px; width: max-content; margin: 0 auto; }\n.km-square { width: var(--km-square); height: var(--km-square); border: 0; border-radius: 5px; background: var(--km-grid-line); padding: 0; cursor: pointer; touch-action: manipulation; }\n.km-tile { display: grid; place-items: center; width: var(--km-square); height: var(--km-square); border-radius: 6px; border: 0; padding: 0;\n  background: var(--km-tile); color: var(--km-tile-ink); font: 700 calc(var(--km-square) * .55)/1 var(--km-font); text-transform: uppercase;\n  box-shadow: 0 2px 0 rgba(0,0,0,.35); cursor: pointer; touch-action: manipulation; }\n.km-japanese .km-tile { font-size: calc(var(--km-square) * .52); text-transform: none; }\n.km-wild { background: var(--km-wild); }\n.km-misspelt { box-shadow: 0 0 0 3px var(--km-wrong) inset, 0 2px 0 rgba(0,0,0,.35); }\n.km-apart { opacity: .6; }\n.km-held { outline: 3px solid var(--km-held); outline-offset: 1px; }\n.km-square:focus-visible, .km-in-hand:focus-visible, .km-button:focus-visible, .km-keep-title:focus-visible { outline: 3px solid var(--km-held); outline-offset: 2px; }\n.km-notes { margin: 0; min-height: 1.4em; font-size: 14px; opacity: .8; overflow-wrap: anywhere; }\n.km-hand { display: flex; flex-wrap: wrap; gap: 6px; min-height: calc(var(--km-square) + 16px); align-items: center; padding: 8px; border-radius: 10px; background: var(--km-panel); }\n.km-empty { opacity: .6; font-size: 14px; }\n.km-picker { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }\n.km-picker:empty { display: none; }\n.km-picker-title { width: 100%; font-size: 14px; }\n.km-picker .km-button { padding: 0 8px; text-transform: uppercase; }\n.km-japanese .km-picker .km-button { text-transform: none; }\n.km-controls { display: flex; flex-wrap: wrap; gap: 8px; }\n.km-button { font: inherit; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--km-line); background: var(--km-panel); color: var(--km-ink); cursor: pointer; touch-action: manipulation; }\n.km-button:disabled { opacity: .45; cursor: default; }\n.km-primary { background: var(--km-accent); color: var(--km-accent-ink); border-color: transparent; }\n.km-keep { border-radius: 10px; background: var(--km-panel); padding: 0 10px; }\n.km-keep[open] { padding-bottom: 10px; }\n.km-keep-title { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }\n.km-note { margin: 8px 0 0; min-height: 1.4em; font-size: 13px; }\n";
+export declare const KUMIMOJI_STYLE = "\n.km-root {\n  --km-square: 44px; --km-felt: #2f5d4a; --km-grid-line: rgba(255,255,255,.12); --km-tile: #f3e6c8; --km-tile-ink: #2a2118;\n  --km-wild: #f6d27a; --km-wrong: #d9534f; --km-held: #ffcf3f; --km-ink: #1f2320; --km-panel: #f7f3ea;\n  --km-line: rgba(20,20,20,.35); --km-accent: #2f5d4a; --km-accent-ink: #fff;\n  --km-radius: 12px; --km-font: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  display: grid; gap: 10px; min-width: 0; color: var(--km-ink); font-family: var(--km-font); font-size: 15px;\n}\n@media (prefers-color-scheme: dark) {\n  .km-root { --km-felt: #1e3a2f; --km-ink: #ece8dc; --km-panel: #1d201e; --km-line: rgba(255,255,255,.25); --km-accent: #6fb08f; --km-accent-ink: #10150f; }\n}\n.km-root > * { min-width: 0; }\n.km-status { margin: 0; min-height: 1.4em; font-variant-numeric: tabular-nums; }\n.km-board { background: var(--km-felt); border-radius: var(--km-radius); padding: 10px; overflow: auto; max-height: 70vh; }\n.km-grid { display: grid; gap: 2px; width: max-content; margin: 0 auto; }\n.km-square { width: var(--km-square); height: var(--km-square); border: 0; border-radius: 5px; background: var(--km-grid-line); padding: 0; cursor: pointer; touch-action: manipulation; }\n.km-tile { display: grid; place-items: center; width: var(--km-square); height: var(--km-square); border-radius: 6px; border: 0; padding: 0;\n  background: var(--km-tile); color: var(--km-tile-ink); font: 700 calc(var(--km-square) * .55)/1 var(--km-font); text-transform: uppercase;\n  box-shadow: 0 2px 0 rgba(0,0,0,.35); cursor: pointer; touch-action: manipulation; }\n.km-japanese .km-tile { font-size: calc(var(--km-square) * .52); text-transform: none; }\n.km-wild { background: var(--km-wild); }\n.km-misspelt { box-shadow: 0 0 0 3px var(--km-wrong) inset, 0 2px 0 rgba(0,0,0,.35); }\n.km-apart { opacity: .6; }\n.km-held { outline: 3px solid var(--km-held); outline-offset: 1px; }\n.km-square:focus-visible, .km-in-hand:focus-visible, .km-button:focus-visible, .km-keep-title:focus-visible { outline: 3px solid var(--km-held); outline-offset: 2px; }\n.km-notes { margin: 0; min-height: 1.4em; font-size: 14px; opacity: .8; overflow-wrap: anywhere; }\n.km-hand { display: flex; flex-wrap: wrap; gap: 6px; min-height: calc(var(--km-square) + 16px); align-items: center; padding: 8px; border-radius: 10px; background: var(--km-panel); }\n.km-empty { opacity: .6; font-size: 14px; }\n.km-picker { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }\n.km-picker:empty { display: none; }\n.km-picker-title { width: 100%; font-size: 14px; }\n.km-picker .km-button { padding: 0 8px; text-transform: uppercase; }\n.km-japanese .km-picker .km-button { text-transform: none; }\n.km-controls[hidden] { display: none; }\n.km-controls { display: flex; flex-wrap: wrap; gap: 8px; }\n.km-button { font: inherit; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--km-line); background: var(--km-panel); color: var(--km-ink); cursor: pointer; touch-action: manipulation; }\n.km-button:disabled { opacity: .45; cursor: default; }\n.km-primary { background: var(--km-accent); color: var(--km-accent-ink); border-color: transparent; }\n.km-keep { border-radius: 10px; background: var(--km-panel); padding: 0 10px; }\n.km-keep[open] { padding-bottom: 10px; }\n.km-keep-title { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }\n.km-note { margin: 8px 0 0; min-height: 1.4em; font-size: 13px; }\n";

package/dist/ui/style.js

@@ -3,6 +3,11 @@
  * variable so a page can wear it in its own colours (set them on the element
  * or any ancestor, or pass them as `theme`). Light and dark follow the
  * reader's system. Everything to be tapped is at least 44px.
+ * @example
+ * ```ts
+ * import { KUMIMOJI_STYLE } from "@johnmorrisdotca/kumimoji/ui";
+ * console.log(KUMIMOJI_STYLE.includes(".km-root")); // true
+ * ```
  */
 export const KUMIMOJI_STYLE = `
 .km-root {
@@ -37,6 +42,7 @@ export const KUMIMOJI_STYLE = `
 .km-picker-title { width: 100%; font-size: 14px; }
 .km-picker .km-button { padding: 0 8px; text-transform: uppercase; }
 .km-japanese .km-picker .km-button { text-transform: none; }
+.km-controls[hidden] { display: none; }
 .km-controls { display: flex; flex-wrap: wrap; gap: 8px; }
 .km-button { font: inherit; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--km-line); background: var(--km-panel); color: var(--km-ink); cursor: pointer; touch-action: manipulation; }
 .km-button:disabled { opacity: .45; cursor: default; }