@johnmorrisdotca/kumimoji 1.0.1

package/dist/turn.js

@@ -0,0 +1,96 @@
+/**
+ * TURNING THE TABLE, WITH EVERY TILE KEPT UPRIGHT. John, 2026-09-28: "if you
+ * rotate the board like flip it 180° for example then all the tiles will flip
+ * 180° to right themselves directly just so that they're not backwards for you
+ * or upside down."
+ *
+ * So the turn is a mapping of squares, never a rotation of the picture: the
+ * grid (its squares, `encodeGrid`, the kept game, the check) stays where the
+ * player built it, and only WHERE each square is drawn is turned — about the
+ * middle of square (0, 0), a quarter clockwise per press. A tile drawn at its
+ * turned place is drawn as it always is, so its letter reads the right way up
+ * whichever way the table faces. A point on the screen means the square drawn
+ * there, so a tap or a drop lands where the finger is.
+ *
+ * Pure, like the rest of the view (`tableView.ts`), which works on the turned
+ * squares unchanged: fitting, zooming and panning are all in screen terms.
+ */
+/** The next turn a press gives: a quarter clockwise, and four presses back to the start. */
+export function nextTurn(turn) {
+    return ((turn + 1) % 4);
+}
+/** `0 - n` rather than `-n`, so a square is never named "-0". */
+const negate = (n) => 0 - n;
+/**
+ * Where square (row, col) of the grid is drawn with the table turned: a
+ * quarter clockwise sends a word running right to one running down, and one
+ * running down to one running left. It is linear, so it turns a step (a
+ * direction) as well as a square.
+ */
+export function turnPlace(row, col, turn) {
+    switch (turn) {
+        case 0:
+            return { row, col };
+        case 1:
+            return { row: col, col: negate(row) };
+        case 2:
+            return { row: negate(row), col: negate(col) };
+        case 3:
+            return { row: negate(col), col: row };
+    }
+}
+/** The grid's square drawn at (row, col) of the turned table: `turnPlace` undone. */
+export function unturnPlace(row, col, turn) {
+    return turnPlace(row, col, ((4 - turn) % 4));
+}
+/** The squares a turned table shows: the grid's area, turned. */
+export function turnArea(area, turn) {
+    const a = turnPlace(area.top, area.left, turn);
+    const b = turnPlace(area.top + area.rows - 1, area.left + area.cols - 1, turn);
+    return { top: Math.min(a.row, b.row), left: Math.min(a.col, b.col), rows: Math.abs(a.row - b.row) + 1, cols: Math.abs(a.col - b.col) + 1 };
+}
+/**
+ * A view the player zoomed or panned, turned a quarter clockwise with the
+ * table about the middle of its box: the same zoom, and the spot of the table
+ * that was in the middle stays there. (A fitted view simply fits again.)
+ *
+ * On the screen a square's corner is `x + col * tile`; the turn takes a point
+ * (row v, col u) of the table to (row u, col 1 - v), which is a quarter turn
+ * about the middle of square (0, 0) — the same turn as `turnPlace`.
+ */
+export function turnView(view, width, height) {
+    const px = width / 2;
+    const py = height / 2;
+    const u = (px - view.x) / view.tile;
+    const v = (py - view.y) / view.tile;
+    return { tile: view.tile, x: px - (1 - v) * view.tile, y: py - u * view.tile };
+}
+/** The screen's four ways, as a step of one square, with the arrow that draws each and its name. */
+const WAYS = [
+    { row: 0, col: 1, arrow: "→", name: "right" },
+    { row: 1, col: 0, arrow: "↓", name: "down" },
+    { row: 0, col: -1, arrow: "←", name: "left" },
+    { row: -1, col: 0, arrow: "↑", name: "up" },
+];
+/**
+ * Which way typed letters run ON THE SCREEN. Typing lays a word across or
+ * down the grid, so that it reads as a word; with the table turned, that is
+ * another way on the screen, and the cursor's arrow points it.
+ */
+export function typingWay(across, turn) {
+    const step = turnPlace(across ? 0 : 1, across ? 1 : 0, turn);
+    const way = WAYS.find((one) => one.row === step.row && one.col === step.col);
+    return { arrow: way.arrow, name: way.name };
+}
+/** The keyboard's arrows, as a step on the screen. */
+const ARROW_KEYS = {
+    ArrowRight: { row: 0, col: 1 },
+    ArrowDown: { row: 1, col: 0 },
+    ArrowLeft: { row: 0, col: -1 },
+    ArrowUp: { row: -1, col: 0 },
+};
+/** The step in the grid an arrow key means: the square that way on the screen, with the table turned. Null for any other key. */
+export function arrowStep(key, turn) {
+    const step = ARROW_KEYS[key];
+    return step === undefined ? null : unturnPlace(step.row, step.col, turn);
+}

package/dist/ui/board.d.ts

@@ -0,0 +1,29 @@
+import { type GridVerdict, type Tiles } from "../grid.ts";
+/** How a tile on the table stands: part of a sound crossword, in a run that is not a word, or apart from the rest. */
+export type TileMark = "sound" | "misspelt" | "apart";
+export type BoardSquare = {
+    square: string;
+    row: number;
+    col: number;
+    /** The tile standing there, or null for an empty square. */
+    tile: string | null;
+    glyph: string;
+    wild: boolean;
+    mark: TileMark | null;
+};
+export type BoardModel = {
+    rows: number;
+    cols: number;
+    squares: BoardSquare[];
+};
+/** How many empty squares are kept round the tiles on every side, so there is always room to build out. */
+export declare const BOARD_MARGIN = 2;
+/** The fewest squares a side, so an empty or small table is still a table. */
+export declare const BOARD_LEAST = 7;
+/**
+ * THE PART OF THE TABLE TO DRAW, for a grid and its verdict: the tiles and a
+ * margin round them, at least `BOARD_LEAST` a side, each square with its tile,
+ * what is printed on it, and how it stands. Row by row, left to right. The
+ * grid itself has no edges; this is only the window a board shows it through.
+ */
+export declare function boardModel(tiles: Tiles, verdict: GridVerdict | null, glyphOf?: (tile: string) => string): BoardModel;

package/dist/ui/board.js

@@ -0,0 +1,37 @@
+import { boundsOf, squareAt } from "../grid.js";
+import { tileFace } from "../tileFace.js";
+/** How many empty squares are kept round the tiles on every side, so there is always room to build out. */
+export const BOARD_MARGIN = 2;
+/** The fewest squares a side, so an empty or small table is still a table. */
+export const BOARD_LEAST = 7;
+/**
+ * THE PART OF THE TABLE TO DRAW, for a grid and its verdict: the tiles and a
+ * margin round them, at least `BOARD_LEAST` a side, each square with its tile,
+ * what is printed on it, and how it stands. Row by row, left to right. The
+ * grid itself has no edges; this is only the window a board shows it through.
+ */
+export function boardModel(tiles, verdict, glyphOf = (tile) => tileFace(tile).glyph) {
+    const bounds = boundsOf(tiles) ?? { top: 0, left: 0, bottom: 0, right: 0 };
+    let top = bounds.top - BOARD_MARGIN;
+    let left = bounds.left - BOARD_MARGIN;
+    let rows = bounds.bottom - bounds.top + 1 + BOARD_MARGIN * 2;
+    let cols = bounds.right - bounds.left + 1 + BOARD_MARGIN * 2;
+    if (rows < BOARD_LEAST) {
+        top -= Math.floor((BOARD_LEAST - rows) / 2);
+        rows = BOARD_LEAST;
+    }
+    if (cols < BOARD_LEAST) {
+        left -= Math.floor((BOARD_LEAST - cols) / 2);
+        cols = BOARD_LEAST;
+    }
+    const squares = [];
+    for (let row = top; row < top + rows; row += 1) {
+        for (let col = left; col < left + cols; col += 1) {
+            const square = squareAt(row, col);
+            const tile = tiles.get(square) ?? null;
+            const mark = tile === null || verdict === null ? null : verdict.misspelt.has(square) ? "misspelt" : verdict.apart.has(square) ? "apart" : "sound";
+            squares.push({ square, row, col, tile, glyph: tile === null ? "" : glyphOf(tile), wild: tile !== null && tileFace(tile).wild, mark });
+        }
+    }
+    return { rows, cols, squares };
+}

package/dist/ui/mount.d.ts

@@ -0,0 +1,36 @@
+import type { KumimojiDeal, KumimojiLanguage, KumimojiLength, KumimojiLevel } from "../kumimoji.types.ts";
+import { type TilePlay } from "../play.ts";
+export type KumimojiTableOptions = {
+    language?: KumimojiLanguage;
+    /** The opening hand: 3, 7 or 11 tiles. */
+    hand?: number;
+    level?: KumimojiLevel;
+    gameLength?: KumimojiLength;
+    /** Every diagonal run of three or more must be a word too. */
+    diagonals?: boolean;
+    /** The seed the bag is dealt from; a new one each game when absent. */
+    seed?: number;
+    /** Told when the last tile is laid and every run is a word, with the time it took. */
+    onFinish?: (result: {
+        deal: KumimojiDeal;
+        play: TilePlay;
+        elapsedMs: number;
+    }) => void;
+};
+export type KumimojiTableHandle = {
+    play: () => TilePlay | null;
+    newGame: (options?: Omit<KumimojiTableOptions, "onFinish">) => Promise<void>;
+    destroy: () => void;
+};
+/**
+ * A GAME OF KUMIMOJI ALONE, IN PLAIN DOM: the bag dealt from a seed, your
+ * hand, and a table to build your crossword on, every run judged as you lay
+ * it. Tap a tile in your hand and then a square to lay it; tap a tile on the
+ * table and then a square to move it, or tap it again to take it back. When
+ * the hand is empty and every run is a word, Draw brings the next tile; a
+ * tile you cannot use can be traded for three. Use every tile in the bag to
+ * finish.
+ *
+ * The word list is fetched the first time a game in its language is dealt.
+ */
+export declare function mountKumimoji(target: HTMLElement, options?: KumimojiTableOptions): KumimojiTableHandle;

package/dist/ui/mount.js

@@ -0,0 +1,257 @@
+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 { KUMIMOJI_HANDS } from "../tiles.constants.js";
+import { tileFace } from "../tileFace.js";
+import { loadTileWords } from "../tileWords.js";
+import { boardModel } from "./board.js";
+import { KUMIMOJI_STYLE } from "./style.js";
+/** What is picked up: a tile in the hand, or one on the table. */
+/** 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) {
+    const made = node("button", primary ? "km-button km-primary" : "km-button", text);
+    made.type = "button";
+    made.addEventListener("click", onClick);
+    return made;
+}
+function clock(ms) {
+    const seconds = Math.floor(ms / 1000);
+    return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+}
+/**
+ * A GAME OF KUMIMOJI ALONE, IN PLAIN DOM: the bag dealt from a seed, your
+ * hand, and a table to build your crossword on, every run judged as you lay
+ * it. Tap a tile in your hand and then a square to lay it; tap a tile on the
+ * table and then a square to move it, or tap it again to take it back. When
+ * the hand is empty and every run is a word, Draw brings the next tile; a
+ * tile you cannot use can be traded for three. Use every tile in the bag to
+ * finish.
+ *
+ * The word list is fetched the first time a game in its language is dealt.
+ */
+export function mountKumimoji(target, options = {}) {
+    let settings = { ...options };
+    let words = null;
+    let dealt = null;
+    let play = null;
+    let held = null;
+    let started = 0;
+    let finishedAt = null;
+    let destroyed = false;
+    const root = node("div", "km-root");
+    const style = node("style");
+    style.textContent = KUMIMOJI_STYLE;
+    const status = node("p", "km-status");
+    status.setAttribute("aria-live", "polite");
+    const board = node("div", "km-board");
+    const notes = node("p", "km-notes");
+    const hand = node("div", "km-hand");
+    const picker = node("div", "km-picker");
+    const controls = node("div", "km-controls");
+    root.append(style, status, board, notes, picker, hand, controls);
+    target.append(root);
+    const tick = setInterval(() => {
+        if (play !== null && finishedAt === null)
+            renderStatus();
+    }, 1000);
+    const verdictOf = (now) => judgeWithWords(now.tiles, words, { diagonals: settings.diagonals === true });
+    const change = (next) => {
+        play = next;
+        const verdict = verdictOf(next);
+        if (finishedAt === null && isFinished(next, verdict)) {
+            finishedAt = Date.now();
+            options.onFinish?.({ deal: dealt, play: next, elapsedMs: finishedAt - started });
+        }
+        render();
+    };
+    const tapSquare = (square) => {
+        if (play === null || finishedAt !== null)
+            return;
+        const there = play.tiles.get(square);
+        if (held === null) {
+            if (there !== undefined)
+                held = { from: "table", square };
+            render();
+            return;
+        }
+        if (held.from === "hand") {
+            const at = held.at;
+            const tile = play.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));
+            return;
+        }
+        const from = held.square;
+        held = null;
+        change(from === square ? liftToHand(play, square) : moveOnTable(play, from, square));
+    };
+    const tapHand = (at) => {
+        if (play === null || finishedAt !== null)
+            return;
+        held = held?.from === "hand" && held.at === at ? null : { from: "hand", at };
+        render();
+    };
+    board.addEventListener("click", (event) => {
+        const square = event.target.closest("[data-square]")?.getAttribute("data-square");
+        if (square !== null && square !== undefined)
+            tapSquare(square);
+    });
+    hand.addEventListener("click", (event) => {
+        const at = event.target.closest("[data-hand]")?.getAttribute("data-hand");
+        if (at !== null && at !== undefined)
+            tapHand(Number(at));
+    });
+    function renderStatus() {
+        if (play === null) {
+            status.textContent = "Dealing…";
+            return;
+        }
+        const left = tilesLeft(play);
+        const time = clock((finishedAt ?? Date.now()) - started);
+        status.textContent = finishedAt !== null ? `Finished in ${time}. Every tile laid, every run a word.` : `${left} ${left === 1 ? "tile" : "tiles"} left in the bag · ${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", "grid");
+        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.setAttribute("aria-label", `${square.glyph}${square.wild ? ", wild" : ""}`);
+            }
+            else {
+                cell.setAttribute("aria-label", "Empty square");
+            }
+            if (held?.from === "table" && held.square === square.square)
+                cell.classList.add("km-held");
+            grid.append(cell);
+        }
+        board.replaceChildren(grid);
+        notes.textContent = verdict.notWords.length > 0 ? `Not words: ${verdict.notWords.join(", ")}` : verdict.apart.size > 0 ? "Every tile must join the one crossword." : "";
+    }
+    function renderHand() {
+        hand.replaceChildren();
+        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.setAttribute("aria-label", face.blank ? "Wild, no letter yet" : `${words.glyphOf(tile)}${face.wild ? ", wild" : ""}`);
+            hand.append(made);
+        });
+        if (play.hand.length === 0 && finishedAt === null)
+            hand.append(node("span", "km-empty", "No tiles in hand"));
+    }
+    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 === "*" ? "Give the wild a letter:" : "Change the wild's letter:"));
+        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("New game", () => void handle.newGame(), true));
+            return;
+        }
+        const now = play;
+        const drawButton = button("Draw", () => {
+            held = null;
+            change(draw(now));
+        }, true);
+        drawButton.disabled = !mayDraw(now, verdict);
+        const tradeButton = button("Trade for three", () => {
+            if (held?.from !== "hand")
+                return;
+            const at = held.at;
+            held = null;
+            change(trade(now, at));
+        });
+        tradeButton.disabled = held?.from !== "hand" || !mayTrade(now);
+        controls.append(drawButton, tradeButton, button("Sort", () => change(sortHand(now))), button("Lift all", () => {
+            held = null;
+            change(liftAll(now));
+        }), button("New game", () => void handle.newGame()));
+    }
+    function render() {
+        if (destroyed)
+            return;
+        renderStatus();
+        if (play === null || words === null)
+            return;
+        const verdict = verdictOf(play);
+        renderBoard(verdict);
+        renderPicker();
+        renderHand();
+        renderControls(verdict);
+    }
+    const handle = {
+        play: () => play,
+        newGame: async (changed = {}) => {
+            settings = { ...settings, ...changed, seed: undefined };
+            const language = settings.language ?? "english";
+            const size = settings.hand ?? KUMIMOJI_HANDS.quick;
+            play = null;
+            held = null;
+            finishedAt = null;
+            render();
+            words = await loadTileWords(language);
+            if (destroyed)
+                return;
+            // 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");
+            dealt = generateKumimoji(size, settings.level ?? "medium", seed, { language, gameLength: settings.gameLength, diagonals: settings.diagonals });
+            started = Date.now();
+            change(deal(dealt.givens, size));
+        },
+        destroy: () => {
+            destroyed = true;
+            clearInterval(tick);
+            root.remove();
+        },
+    };
+    void handle.newGame(settings);
+    return handle;
+}

package/dist/ui/style.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The table's own styles, scoped to `.km-root`, every colour a CSS variable
+ * so a page can wear it in its own colours. Light and dark follow the
+ * reader's system.
+ */
+export declare const KUMIMOJI_STYLE = "\n.km-root {\n  --km-square: 36px; --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-apart: #9aa3a0; --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  display: grid; gap: 10px; color: var(--km-ink); font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif; 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-status { margin: 0; min-height: 1.4em; font-variant-numeric: tabular-nums; }\n.km-board { background: var(--km-felt); border-radius: 12px; 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; }\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 20px/1 system-ui, sans-serif; text-transform: uppercase;\n  box-shadow: 0 2px 0 rgba(0,0,0,.35); cursor: pointer; }\n.km-japanese .km-tile { font-size: 19px; 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-notes { margin: 0; min-height: 1.4em; font-size: 14px; opacity: .8; }\n.km-hand { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; 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: 4px 8px; min-width: 32px; 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; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--km-line); background: var(--km-panel); color: var(--km-ink); cursor: pointer; }\n.km-button:disabled { opacity: .45; cursor: default; }\n.km-primary { background: var(--km-accent); color: var(--km-accent-ink); border-color: transparent; }\n";

package/dist/ui/style.js

@@ -0,0 +1,40 @@
+/**
+ * The table's own styles, scoped to `.km-root`, every colour a CSS variable
+ * so a page can wear it in its own colours. Light and dark follow the
+ * reader's system.
+ */
+export const KUMIMOJI_STYLE = `
+.km-root {
+  --km-square: 36px; --km-felt: #2f5d4a; --km-grid-line: rgba(255,255,255,.12); --km-tile: #f3e6c8; --km-tile-ink: #2a2118;
+  --km-wild: #f6d27a; --km-wrong: #d9534f; --km-apart: #9aa3a0; --km-held: #ffcf3f; --km-ink: #1f2320; --km-panel: #f7f3ea;
+  --km-line: rgba(20,20,20,.35); --km-accent: #2f5d4a; --km-accent-ink: #fff;
+  display: grid; gap: 10px; color: var(--km-ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px;
+}
+@media (prefers-color-scheme: dark) {
+  .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; }
+}
+.km-status { margin: 0; min-height: 1.4em; font-variant-numeric: tabular-nums; }
+.km-board { background: var(--km-felt); border-radius: 12px; padding: 10px; overflow: auto; max-height: 70vh; }
+.km-grid { display: grid; gap: 2px; width: max-content; margin: 0 auto; }
+.km-square { width: var(--km-square); height: var(--km-square); border: 0; border-radius: 5px; background: var(--km-grid-line); padding: 0; cursor: pointer; }
+.km-tile { display: grid; place-items: center; width: var(--km-square); height: var(--km-square); border-radius: 6px; border: 0; padding: 0;
+  background: var(--km-tile); color: var(--km-tile-ink); font: 700 20px/1 system-ui, sans-serif; text-transform: uppercase;
+  box-shadow: 0 2px 0 rgba(0,0,0,.35); cursor: pointer; }
+.km-japanese .km-tile { font-size: 19px; text-transform: none; }
+.km-wild { background: var(--km-wild); }
+.km-misspelt { box-shadow: 0 0 0 3px var(--km-wrong) inset, 0 2px 0 rgba(0,0,0,.35); }
+.km-apart { opacity: .6; }
+.km-held { outline: 3px solid var(--km-held); outline-offset: 1px; }
+.km-notes { margin: 0; min-height: 1.4em; font-size: 14px; opacity: .8; }
+.km-hand { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; align-items: center; padding: 8px; border-radius: 10px; background: var(--km-panel); }
+.km-empty { opacity: .6; font-size: 14px; }
+.km-picker { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+.km-picker:empty { display: none; }
+.km-picker-title { width: 100%; font-size: 14px; }
+.km-picker .km-button { padding: 4px 8px; min-width: 32px; text-transform: uppercase; }
+.km-japanese .km-picker .km-button { text-transform: none; }
+.km-controls { display: flex; flex-wrap: wrap; gap: 8px; }
+.km-button { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--km-line); background: var(--km-panel); color: var(--km-ink); cursor: pointer; }
+.km-button:disabled { opacity: .45; cursor: default; }
+.km-primary { background: var(--km-accent); color: var(--km-accent-ink); border-color: transparent; }
+`;

package/dist/ui.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Kumimoji played in the browser, in plain DOM: a whole game alone
+ * (`mountKumimoji`), and the window a board shows the grid through
+ * (`boardModel`). Its own entry, so the rules never carry a stylesheet.
+ */
+export { mountKumimoji, type KumimojiTableHandle, type KumimojiTableOptions } from "./ui/mount.ts";
+export { BOARD_LEAST, BOARD_MARGIN, boardModel, type BoardModel, type BoardSquare, type TileMark } from "./ui/board.ts";
+export { KUMIMOJI_STYLE } from "./ui/style.ts";

package/dist/ui.js

@@ -0,0 +1,8 @@
+/**
+ * Kumimoji played in the browser, in plain DOM: a whole game alone
+ * (`mountKumimoji`), and the window a board shows the grid through
+ * (`boardModel`). Its own entry, so the rules never carry a stylesheet.
+ */
+export { mountKumimoji } from "./ui/mount.js";
+export { BOARD_LEAST, BOARD_MARGIN, boardModel } from "./ui/board.js";
+export { KUMIMOJI_STYLE } from "./ui/style.js";

package/dist/wilds.d.ts

@@ -0,0 +1,27 @@
+import { type GridRules, type Tiles } from "./grid.ts";
+import type { TileWords } from "./tileWords.ts";
+/**
+ * A WILD LAID WITHOUT A LETTER READS AS WHATEVER MAKES THE GRID WORDS. John,
+ * 2026-09-29, having laid D, a blank wild, O, N, E and been told "Not a word:
+ * D*ONE": "Either we are smarter and use a regex or something to know that
+ * it's a valid possible word." Choosing the wild's letter is still offered,
+ * and a wild given one reads as that letter only; a blank one is any letter
+ * the list allows.
+ *
+ * One blank can stand in two runs, across and down, and two blanks can share
+ * a run, so the letters are chosen together: blank by blank, each letter
+ * kept only while every run through it could still be a word — a run with
+ * blanks left in it is asked whether any word of its length fits the letters
+ * it has, a run with none whether it is one. Blanks that share no run are
+ * settled apart, so one crossword's wilds never multiply another's.
+ *
+ * `readWilds` hands back the grid with each blank given the wild of a letter
+ * that works (`wildFor`), or null where no choice makes every run a word —
+ * and the grid is then judged as laid, blank and all, so the line under the
+ * table names the run as the player spelled it. It gives up, answering null,
+ * past `WILD_SEARCH_MOST` steps: a grid it could not settle is not called
+ * sound.
+ */
+export declare const WILD_SEARCH_MOST = 20000;
+/** The grid with every blank wild read as a letter that makes all its runs words, or null for none; the grid itself when it holds no blank. */
+export declare function readWilds(tiles: Tiles, words: TileWords, rules?: GridRules): Tiles | null;

package/dist/wilds.js

@@ -0,0 +1,111 @@
+import { runsOf } from "./grid.js";
+/**
+ * A WILD LAID WITHOUT A LETTER READS AS WHATEVER MAKES THE GRID WORDS. John,
+ * 2026-09-29, having laid D, a blank wild, O, N, E and been told "Not a word:
+ * D*ONE": "Either we are smarter and use a regex or something to know that
+ * it's a valid possible word." Choosing the wild's letter is still offered,
+ * and a wild given one reads as that letter only; a blank one is any letter
+ * the list allows.
+ *
+ * One blank can stand in two runs, across and down, and two blanks can share
+ * a run, so the letters are chosen together: blank by blank, each letter
+ * kept only while every run through it could still be a word — a run with
+ * blanks left in it is asked whether any word of its length fits the letters
+ * it has, a run with none whether it is one. Blanks that share no run are
+ * settled apart, so one crossword's wilds never multiply another's.
+ *
+ * `readWilds` hands back the grid with each blank given the wild of a letter
+ * that works (`wildFor`), or null where no choice makes every run a word —
+ * and the grid is then judged as laid, blank and all, so the line under the
+ * table names the run as the player spelled it. It gives up, answering null,
+ * past `WILD_SEARCH_MOST` steps: a grid it could not settle is not called
+ * sound.
+ */
+export const WILD_SEARCH_MOST = 20000;
+/** The grid with every blank wild read as a letter that makes all its runs words, or null for none; the grid itself when it holds no blank. */
+export function readWilds(tiles, words, rules = {}) {
+    const blanks = [...tiles].filter(([, tile]) => tile === "*").map(([square]) => square);
+    if (blanks.length === 0)
+        return tiles;
+    const runs = runsOf(tiles, rules);
+    const through = new Map(blanks.map((square) => [square, runs.filter((run) => run.squares.includes(square))]));
+    const choices = words.wildOptions.flatMap((face) => {
+        const code = words.wildFor(face);
+        const sound = code === null ? null : words.soundOf(code);
+        return code === null || sound === null ? [] : [{ code, sound }];
+    });
+    const fits = patternFits(words);
+    const read = new Map(tiles);
+    let steps = 0;
+    const possible = (run) => {
+        const sounds = run.squares.map((at) => {
+            const tile = read.get(at);
+            return tile === "*" ? null : words.soundOf(tile);
+        });
+        if (sounds.every((sound) => sound !== null))
+            return words.allowed.has(sounds.join(""));
+        return fits(sounds);
+    };
+    const settle = (group, at) => {
+        if (at === group.length)
+            return true;
+        const square = group[at];
+        for (const choice of choices) {
+            steps += 1;
+            if (steps > WILD_SEARCH_MOST)
+                return false;
+            read.set(square, choice.code);
+            if (through.get(square).every(possible) && settle(group, at + 1))
+                return true;
+        }
+        read.set(square, "*");
+        return false;
+    };
+    for (const group of blankGroups(blanks, through)) {
+        if (!settle(group, 0))
+            return null;
+    }
+    return read;
+}
+/** The blanks in groups that share a run, directly or through one another. */
+function blankGroups(blanks, through) {
+    const seen = new Set();
+    const groups = [];
+    for (const start of blanks) {
+        if (seen.has(start))
+            continue;
+        const group = [];
+        const queue = [start];
+        seen.add(start);
+        while (queue.length > 0) {
+            const square = queue.shift();
+            group.push(square);
+            for (const run of through.get(square)) {
+                for (const other of run.squares) {
+                    if (through.has(other) && !seen.has(other)) {
+                        seen.add(other);
+                        queue.push(other);
+                    }
+                }
+            }
+        }
+        groups.push(group);
+    }
+    return groups;
+}
+/** Whether any word of the list spells a run whose null places may be anything, remembered by pattern. */
+function patternFits(words) {
+    const known = new Map();
+    return (sounds) => {
+        const key = sounds.map((sound) => sound ?? "\u0000").join("\u0001");
+        const already = known.get(key);
+        if (already !== undefined)
+            return already;
+        const found = (words.byLength.get(sounds.length) ?? []).some((word) => {
+            const letters = [...word];
+            return letters.length === sounds.length && sounds.every((sound, at) => sound === null || words.soundOf(letters[at]) === sound);
+        });
+        known.set(key, found);
+        return found;
+    };
+}