@johnmorrisdotca/kumimoji 1.0.1

package/dist/play.js

@@ -0,0 +1,165 @@
+import { decodeGrid, encodeGrid, lettersOf, sameLetters } from "./grid.js";
+import { tileFace } from "./tileFace.js";
+import { KUMIMOJI_DRAW, KUMIMOJI_TRADE } from "./tiles.constants.js";
+import { tileWords } from "./tileWords.js";
+/** The opening hand: the first `handSize` tiles of the bag, and an empty table. */
+export function deal(bag, handSize) {
+    const taken = Math.min(handSize, bag.length);
+    return { bag, returned: "", taken, tiles: new Map(), hand: [...bag.slice(0, taken)] };
+}
+/** How many tiles are still in the bag. */
+export function tilesLeft(play) {
+    return play.bag.length + play.returned.length - play.taken;
+}
+function withTiles(play, change) {
+    const tiles = new Map(play.tiles);
+    change(tiles);
+    return tiles;
+}
+/** A tile from the hand onto an empty square. */
+export function placeFromHand(play, handAt, square) {
+    const letter = play.hand[handAt];
+    if (letter === undefined || play.tiles.has(square))
+        return play;
+    return { ...play, tiles: withTiles(play, (tiles) => tiles.set(square, letter)), hand: play.hand.filter((_, at) => at !== handAt) };
+}
+/** Give a hand tile its chosen reading, without changing which physical tile it is. */
+export function assignHandTile(play, handAt, face) {
+    if (play.hand[handAt] === undefined || face.length !== 1)
+        return play;
+    const hand = [...play.hand];
+    hand[handAt] = face;
+    return { ...play, hand };
+}
+/** Give a tile on the table its chosen reading, without changing its square. */
+export function assignTableTile(play, square, face) {
+    if (!play.tiles.has(square) || face.length !== 1)
+        return play;
+    return { ...play, tiles: withTiles(play, (tiles) => tiles.set(square, face)) };
+}
+/** A tile on the table to another square: to an empty one it moves, onto a tile the two change places. */
+export function moveOnTable(play, from, to) {
+    const moving = play.tiles.get(from);
+    if (from === to || moving === undefined)
+        return play;
+    const there = play.tiles.get(to);
+    return {
+        ...play,
+        tiles: withTiles(play, (tiles) => {
+            tiles.delete(from);
+            if (there !== undefined)
+                tiles.set(from, there);
+            tiles.set(to, moving);
+        }),
+    };
+}
+/** A tile from the hand onto a square that holds one: they change places, the table's tile going to the hand where the other was. */
+export function swapWithHand(play, handAt, square) {
+    const letter = play.hand[handAt];
+    const lifted = play.tiles.get(square);
+    if (letter === undefined || lifted === undefined)
+        return play;
+    const hand = [...play.hand];
+    hand[handAt] = lifted;
+    return { ...play, tiles: withTiles(play, (tiles) => tiles.set(square, letter)), hand };
+}
+/** A tile on the table back to the end of the hand. */
+export function liftToHand(play, square) {
+    const letter = play.tiles.get(square);
+    if (letter === undefined)
+        return play;
+    return { ...play, tiles: withTiles(play, (tiles) => tiles.delete(square)), hand: [...play.hand, letter] };
+}
+/** Every tile on the table back to the hand. */
+export function liftAll(play) {
+    return { ...play, tiles: new Map(), hand: [...play.hand, ...play.tiles.values()] };
+}
+/**
+ * The hand in order (John, 2026-09-28: "it gets sorted for letters
+ * alphabetically"): English A to Z, Japanese あいうえお, which is the order
+ * of the kana's tile codes, and the wilds last as they came.
+ */
+export function sortHand(play) {
+    const hand = [...play.hand].sort((a, b) => Number(tileFace(a).wild) - Number(tileFace(b).wild) || (tileFace(a).wild ? 0 : a < b ? -1 : a > b ? 1 : 0));
+    return { ...play, hand };
+}
+/** Whether Draw may be pressed: the hand used, the grid sound, and a tile left to draw. */
+export function mayDraw(play, verdict) {
+    return play.hand.length === 0 && verdict.sound && tilesLeft(play) > 0;
+}
+/** The next tile or tiles out of the bag into the hand. */
+export function draw(play, count = KUMIMOJI_DRAW) {
+    const coming = (play.bag + play.returned).slice(play.taken, play.taken + count);
+    if (coming.length === 0)
+        return play;
+    return { ...play, taken: play.taken + coming.length, hand: [...play.hand, ...coming] };
+}
+/** Whether a trade may be made: the bag holds as many as a trade takes. */
+export function mayTrade(play) {
+    return tilesLeft(play) >= KUMIMOJI_TRADE.take;
+}
+/** One tile from the hand to the bottom of the bag, and the next three out of it. */
+export function trade(play, handAt) {
+    const letter = play.hand[handAt];
+    if (letter === undefined || !mayTrade(play))
+        return play;
+    const returned = play.returned + letter;
+    const coming = (play.bag + returned).slice(play.taken, play.taken + KUMIMOJI_TRADE.take);
+    return { ...play, returned, taken: play.taken + coming.length, hand: [...play.hand.filter((_, at) => at !== handAt), ...coming] };
+}
+/** Whether the game is over: the bag empty, the hand used, and the grid sound. */
+export function isFinished(play, verdict) {
+    return play.hand.length === 0 && tilesLeft(play) === 0 && verdict.sound;
+}
+/*
+ * A GAME KEPT half way, as one string (`PuzzleRun.progress`): how many tiles
+ * were taken, the tiles traded back, the hand in its order and the grid
+ * (`encodeGrid`), as `12:q:ae:cat/2o/2w`. The bag is the puzzle's own, from
+ * its seed, so it is not written again, and where on the table the grid stood
+ * is the view's and not kept.
+ */
+export function encodeTileProgress(play) {
+    return `${play.taken}:${play.returned}:${play.hand.join("")}:${encodeGrid(play.tiles)}`;
+}
+/** The parts of a kept game, or null for a string that is not one: its shape only, with no bag to check it against. */
+export function readTileProgress(code) {
+    const parts = code.split(":");
+    if (parts.length !== 4)
+        return null;
+    const [takenText, returned, hand, grid] = parts;
+    if (!/^\d{1,3}$/.test(takenText) || !/^[a-zA-Z*\uE000-\uF8FF]*$/.test(returned) || !/^[a-zA-Z*\uE000-\uF8FF]*$/.test(hand))
+        return null;
+    const tiles = decodeGrid(grid);
+    if (tiles === null)
+        return null;
+    return { taken: Number(takenText), returned, hand: [...hand], tiles };
+}
+/**
+ * A kept game opened again on its own bag, or null where it does not belong
+ * to it: every tile held — hand and table — must be one taken from the bag
+ * and not given back. Null opens the game fresh rather than on a grid that
+ * never came out of this bag.
+ */
+export function decodeTileProgress(code, bag, language = "english") {
+    const read = readTileProgress(code);
+    if (read === null)
+        return null;
+    const words = tileWords(language);
+    const line = bag + read.returned;
+    if (read.taken > line.length)
+        return null;
+    const held = lettersOf([...line.slice(0, read.taken)].map(words.familyKey).filter((tile) => tile !== null));
+    for (const tile of read.returned) {
+        const identity = words.familyKey(tile);
+        if (identity === null)
+            return null;
+        held.set(identity, (held.get(identity) ?? 0) - 1);
+    }
+    for (const [tile, count] of held)
+        if (count === 0)
+            held.delete(tile);
+    const played = [...read.hand, ...read.tiles.values()].map(words.familyKey);
+    if (played.some((tile) => tile === null) || !sameLetters(held, lettersOf(played)))
+        return null;
+    return { bag, returned: read.returned, taken: read.taken, tiles: read.tiles, hand: read.hand };
+}

package/dist/random.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A seeded random, so that one seed deals one game in every browser: two
+ * players racing the same bag, or one game opened again tomorrow. mulberry32
+ * is small, fast and good enough for shuffling tiles; nothing here is a
+ * credential.
+ */
+/** A number in [0, 1), like `Math.random`, from a stream a seed fixes. */
+export type Random = () => number;
+export declare function seededRandom(seed: number): Random;
+/** A copy of the list in a random order (Fisher–Yates). */
+export declare function shuffled<T>(items: readonly T[], random: Random): T[];

package/dist/random.js

@@ -0,0 +1,25 @@
+/**
+ * A seeded random, so that one seed deals one game in every browser: two
+ * players racing the same bag, or one game opened again tomorrow. mulberry32
+ * is small, fast and good enough for shuffling tiles; nothing here is a
+ * credential.
+ */
+export function seededRandom(seed) {
+    let state = seed >>> 0;
+    return () => {
+        state = (state + 0x6d2b79f5) >>> 0;
+        let t = state;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+/** A copy of the list in a random order (Fisher–Yates). */
+export function shuffled(items, random) {
+    const out = [...items];
+    for (let i = out.length - 1; i > 0; i -= 1) {
+        const j = Math.floor(random() * (i + 1));
+        [out[i], out[j]] = [out[j], out[i]];
+    }
+    return out;
+}

package/dist/react.d.ts

@@ -0,0 +1,32 @@
+import { type HTMLAttributes } from "react";
+import type { GridVerdict, Tiles } from "./grid.ts";
+import { type KumimojiTableOptions } from "./ui/mount.ts";
+export type KumimojiBoardProps = {
+    tiles: Tiles;
+    /** From `judgeWithWords`: marks the runs that are not words and the tiles apart. Without it, no marks. */
+    verdict?: GridVerdict | null;
+    /** What to print on a tile: `words.glyphOf` for the language played. */
+    glyphOf?: (tile: string) => string;
+    /** A square pressed, empty or not. Without it the board is only a picture. */
+    onSquare?: (square: string) => void;
+    /** A square to ring, such as the one holding a tile picked up. */
+    held?: string | null;
+    /** The side of a square in pixels. */
+    square?: number;
+} & Omit<HTMLAttributes<HTMLDivElement>, "onClick">;
+/**
+ * A KUMIMOJI TABLE, AS A REACT COMPONENT: the tiles of a grid with a margin
+ * of empty squares round them, a run that is not a word ringed red and a tile
+ * apart from the crossword faded, and a press on any square reported by its
+ * key (`squareAt(row, col)`). It draws; what a press does is yours to decide
+ * with `placeFromHand`, `moveOnTable` and the rest.
+ */
+export declare function KumimojiBoard({ tiles, verdict, glyphOf, onSquare, held, square, style, ...element }: KumimojiBoardProps): import("react").JSX.Element;
+export type KumimojiTableProps = KumimojiTableOptions & Omit<HTMLAttributes<HTMLDivElement>, keyof KumimojiTableOptions>;
+/**
+ * A whole game alone, as a React component: the plain-DOM table
+ * (`mountKumimoji`) mounted into this component's element once the browser
+ * has it. Options are read when it mounts; give it a new `key` to start over
+ * with different ones.
+ */
+export declare function KumimojiTable({ language, hand, level, gameLength, diagonals, seed, onFinish, ...element }: KumimojiTableProps): import("react").JSX.Element;

package/dist/react.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { boardModel } from "./ui/board.js";
+import { mountKumimoji } from "./ui/mount.js";
+const TILE = {
+    display: "grid",
+    placeItems: "center",
+    borderRadius: 6,
+    background: "#f3e6c8",
+    color: "#2a2118",
+    fontWeight: 700,
+    boxShadow: "0 2px 0 rgba(0,0,0,.35)",
+};
+/**
+ * A KUMIMOJI TABLE, AS A REACT COMPONENT: the tiles of a grid with a margin
+ * of empty squares round them, a run that is not a word ringed red and a tile
+ * apart from the crossword faded, and a press on any square reported by its
+ * key (`squareAt(row, col)`). It draws; what a press does is yours to decide
+ * with `placeFromHand`, `moveOnTable` and the rest.
+ */
+export function KumimojiBoard({ tiles, verdict = null, glyphOf, onSquare, held = null, square = 36, style, ...element }) {
+    const model = boardModel(tiles, verdict, glyphOf);
+    return (_jsx("div", { role: "grid", style: { display: "grid", gap: 2, gridTemplateColumns: `repeat(${model.cols}, ${square}px)`, width: "max-content", ...style }, ...element, children: model.squares.map((cell) => {
+            const ring = cell.square === held ? "0 0 0 3px #ffcf3f" : cell.mark === "misspelt" ? "0 0 0 3px #d9534f inset" : undefined;
+            const look = cell.tile === null
+                ? { width: square, height: square, borderRadius: 5, background: "rgba(127,127,127,.18)", boxShadow: ring }
+                : { ...TILE, width: square, height: square, fontSize: square * 0.55, background: cell.wild ? "#f6d27a" : TILE.background, opacity: cell.mark === "apart" ? 0.6 : 1, boxShadow: ring ?? TILE.boxShadow };
+            return (_jsx("button", { type: "button", "data-square": cell.square, "aria-label": cell.tile === null ? "Empty square" : cell.glyph, onClick: onSquare === undefined ? undefined : () => onSquare(cell.square), style: { border: 0, padding: 0, cursor: onSquare === undefined ? "default" : "pointer", ...look }, children: cell.glyph.toUpperCase() }, cell.square));
+        }) }));
+}
+/**
+ * A whole game alone, as a React component: the plain-DOM table
+ * (`mountKumimoji`) mounted into this component's element once the browser
+ * has it. Options are read when it mounts; give it a new `key` to start over
+ * with different ones.
+ */
+export function KumimojiTable({ language, hand, level, gameLength, diagonals, seed, onFinish, ...element }) {
+    const host = useRef(null);
+    const latest = useRef(onFinish);
+    useEffect(() => {
+        latest.current = onFinish;
+    });
+    useEffect(() => {
+        const target = host.current;
+        if (target === null)
+            return;
+        const table = mountKumimoji(target, { language, hand, level, gameLength, diagonals, seed, onFinish: (result) => latest.current?.(result) });
+        return () => table.destroy();
+        // Mounted once per key, as documented above.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return _jsx("div", { ref: host, ...element });
+}

package/dist/showcase.d.ts

@@ -0,0 +1,51 @@
+import type { KumimojiLanguage, KumimojiLength } from "./kumimoji.types.ts";
+/**
+ * WHAT THE KUMIMOJI PAGES SHOW OF THE GAME, worked out from the tables the
+ * game is played by and never typed a second time: the two tile sets with
+ * their counts, every form a kana tile plays as, and how many tiles and wilds
+ * each length of game deals. Pure, so the rules page draws it at build time
+ * and the tests hold it to the constants.
+ */
+/** One kind of tile in a set: the code the game deals, what is printed on it, what shows in its corner, and how many the set holds. */
+export type MixTile = {
+    code: string;
+    glyph: string;
+    forms: string;
+    count: number;
+};
+/** A whole set, in its own order (a to z, あ to ん), with what a reader needs to see how uneven it is. */
+export type MixShown = {
+    tiles: MixTile[];
+    total: number;
+    /** The most of any one tile, which the bars are drawn against. */
+    most: number;
+    /** The fewest of any one tile, and the tiles with only that many: the hard ones. */
+    fewest: number;
+    rarest: string[];
+    /** The tiles with the most, the ones a hand is full of. */
+    commonest: string[];
+};
+export declare function mixShown(language: KumimojiLanguage): MixShown;
+export declare function formsOfTile(kana: string): string[];
+/** One length of game at one opening hand: how many tiles it deals from one set and from two, and how many of them are wild at each level. */
+export type LengthRow = {
+    length: KumimojiLength;
+    tiles: number;
+    /** With the Double set, English only. */
+    doubleTiles: number;
+    wilds: Record<"easy" | "medium" | "hard", number>;
+};
+export declare const LENGTHS: readonly KumimojiLength[];
+export declare function lengthRows(hand?: number): LengthRow[];
+/**
+ * THE TRY-IT ON THE FRONT DOOR: a Kumimoji of ten tiles, played in the
+ * reader's browser with the game's own moves and the game's own word check.
+ * A hand of seven, then three to draw, the last of them a wild. The bag is
+ * fixed rather than dealt, so the page is the same for everybody and needs no
+ * generator; `showcase.test.ts` proves it can be finished, with a crossword
+ * checked against the real list.
+ */
+export declare const TRY_IT: {
+    readonly bag: "rotenasdi*";
+    readonly hand: 7;
+};

package/dist/showcase.js

@@ -0,0 +1,59 @@
+import { BASE_KANA, CORNER_FORMS, tileKana } from "./kana.js";
+import { kanaTileCode } from "./tileFace.js";
+import { JAPANESE_TILE_MIX, KUMIMOJI_HANDS, TILE_MIX, kumimojiTileCount, kumimojiWildCount } from "./tiles.constants.js";
+export function mixShown(language) {
+    const tiles = language === "english"
+        ? Object.entries(TILE_MIX).map(([letter, count]) => ({ code: letter, glyph: letter, forms: "", count }))
+        : [...BASE_KANA].map((kana) => ({ code: kanaTileCode(kana), glyph: kana, forms: CORNER_FORMS[kana] ?? "", count: JAPANESE_TILE_MIX[kana] ?? 0 }));
+    const counts = tiles.map((tile) => tile.count);
+    const most = Math.max(...counts);
+    const fewest = Math.min(...counts);
+    return {
+        tiles,
+        total: counts.reduce((sum, count) => sum + count, 0),
+        most,
+        fewest,
+        rarest: tiles.filter((tile) => tile.count === fewest).map((tile) => tile.glyph),
+        commonest: tiles.filter((tile) => tile.count === most).map((tile) => tile.glyph),
+    };
+}
+/**
+ * EVERY HIRAGANA A TILE PLAYS AS, itself first: は is は, ば and ぱ; つ is つ,
+ * っ and づ; お is お, ぉ and を. Read off the rule the word check uses
+ * (`tileKana`) over the whole hiragana block, so the list is what the game
+ * accepts — the rare forms the corner leaves out (ぁ, ゎ, ゔ) included.
+ */
+const HIRAGANA_FIRST = 0x3041;
+const HIRAGANA_LAST = 0x3096;
+export function formsOfTile(kana) {
+    if (tileKana(kana) !== kana)
+        return [];
+    const forms = [kana];
+    for (let point = HIRAGANA_FIRST; point <= HIRAGANA_LAST; point += 1) {
+        const form = String.fromCodePoint(point);
+        if (form !== kana && tileKana(form) === kana)
+            forms.push(form);
+    }
+    return forms;
+}
+export const LENGTHS = ["short", "medium", "full"];
+export function lengthRows(hand = KUMIMOJI_HANDS.classic) {
+    return LENGTHS.map((length) => {
+        const tiles = kumimojiTileCount(hand, length);
+        return {
+            length,
+            tiles,
+            doubleTiles: kumimojiTileCount(hand, length, undefined, true),
+            wilds: { easy: kumimojiWildCount(hand, "easy", tiles), medium: kumimojiWildCount(hand, "medium", tiles), hard: kumimojiWildCount(hand, "hard", tiles) },
+        };
+    });
+}
+/**
+ * THE TRY-IT ON THE FRONT DOOR: a Kumimoji of ten tiles, played in the
+ * reader's browser with the game's own moves and the game's own word check.
+ * A hand of seven, then three to draw, the last of them a wild. The bag is
+ * fixed rather than dealt, so the page is the same for everybody and needs no
+ * generator; `showcase.test.ts` proves it can be finished, with a crossword
+ * checked against the real list.
+ */
+export const TRY_IT = { bag: "rotenasdi*", hand: 7 };

package/dist/tableView.d.ts

@@ -0,0 +1,92 @@
+import { type Tiles } from "./grid.ts";
+/**
+ * HOW THE TABLE IS LOOKED AT: which squares are shown, how big a tile is
+ * drawn and where. Pure, and apart from the game (`play.ts`): the tiles are
+ * where the player put them whatever the view, and a view is a function of
+ * the tiles, the screen and the player's own zooming and panning.
+ *
+ * John, 2026-09-26: no board — "literally there is no board in the real world
+ * game." The table shown is the tiles' own extent plus a margin all round, so
+ * there is always room to build outward, and it zooms to fit the crossword:
+ * big tiles for a first word, smaller as the grid spreads, never smaller than
+ * a thumb can press (`TABLE.tileLeast`). Past that the table pans instead.
+ */
+export declare const TABLE: {
+    /** Empty squares shown beyond the tiles on every side. */
+    readonly margin: 2;
+    /** The smallest a tile is drawn, in CSS pixels: a comfortable thumb. */
+    readonly tileLeast: 32;
+    /**
+     * The smallest a player may zoom a tile to by hand, to see a big crossword
+     * whole: too small to press, and not meant to be (John, 2026-09-28: "I would
+     * like to zoom out even further"). Fit never goes below `tileLeast`.
+     */
+    readonly zoomLeast: 12;
+    /** The largest a fitted tile is drawn: a first word does not fill a desk. */
+    readonly tileMost: 56;
+    /**
+     * The shorter side of a table past which `tileMost` grows with it (`fittedMost`):
+     * the Regular desk table's height, 34rem. No phone's or tablet's table is taller
+     * or wider across its shorter side, so none changes; only a table the player made
+     * bigger with the board size chooser (`BoardScale`) grows its squares, in
+     * proportion to the table everybody had.
+     */
+    readonly growsFrom: 544;
+    /** The largest a player may zoom a tile to by hand. */
+    readonly zoomMost: 88;
+    /** How near an edge of the table a dragged tile starts it panning, and how fast, in pixels a frame. */
+    readonly edge: 36;
+    readonly edgeStep: 8;
+    /** How long a dragged tile must stay near an edge before the table pans: crossing an edge on the way in is not asking to pan. */
+    readonly edgeDwellMs: 350;
+};
+/** The squares shown: from `top`/`left`, `rows` by `cols`. */
+export type Area = {
+    top: number;
+    left: number;
+    rows: number;
+    cols: number;
+};
+/** A view: a tile's side in pixels, and where the corner of square (0, 0) is drawn. */
+export type View = {
+    tile: number;
+    x: number;
+    y: number;
+};
+/** The squares to show: the tiles' extent and the margin, or the margin round square (0, 0) on an empty table. Extra squares (the one a typed letter goes to) are kept in. */
+export declare function tableArea(tiles: Tiles, also?: readonly string[]): Area;
+/**
+ * The largest a fitted tile is drawn in a table this big. `tileMost` in any
+ * table up to `growsFrom` across its shorter side, which is every phone's and
+ * the Regular desk table; past that, in proportion, so a table the player asked
+ * to be Large or Full (`BoardScale`) draws bigger squares rather than only more
+ * of them — never past what a hand may zoom to.
+ */
+export declare function fittedMost(width: number, height: number): number;
+/**
+ * The view that shows the whole area, centred, its tiles as big as fit between
+ * the least and the most. A picture nobody presses (a finished grid, the
+ * set-up preview) passes a smaller least, so a whole grid fits its box.
+ */
+export declare function fitView(area: Area, width: number, height: number, least?: number): View;
+/** Whether the area, at this view's size, is bigger than the screen: then the table pans. */
+export declare function overflows(area: Area, view: View, width: number, height: number): boolean;
+/** Zoomed by `factor` about the point (px, py) on the screen, which stays over the same spot of the table. */
+export declare function zoomView(view: View, factor: number, px: number, py: number): View;
+export declare function panView(view: View, dx: number, dy: number): View;
+/**
+ * Kept within reach: some of the area always on the screen, so a pan can
+ * never lose the crossword. A quarter of the screen or two tiles, whichever
+ * is less, stays in view on every side.
+ */
+export declare function keepInReach(view: View, area: Area, width: number, height: number): View;
+/** The square under a point on the screen. */
+export declare function squareUnder(view: View, px: number, py: number): {
+    row: number;
+    col: number;
+};
+/** Which way, and how far, the table pans this frame for a tile dragged to (px, py): toward the edge it is near. */
+export declare function edgePan(px: number, py: number, width: number, height: number): {
+    dx: number;
+    dy: number;
+};

package/dist/tableView.js

@@ -0,0 +1,127 @@
+import { boundsOf, placeOf } from "./grid.js";
+/**
+ * HOW THE TABLE IS LOOKED AT: which squares are shown, how big a tile is
+ * drawn and where. Pure, and apart from the game (`play.ts`): the tiles are
+ * where the player put them whatever the view, and a view is a function of
+ * the tiles, the screen and the player's own zooming and panning.
+ *
+ * John, 2026-09-26: no board — "literally there is no board in the real world
+ * game." The table shown is the tiles' own extent plus a margin all round, so
+ * there is always room to build outward, and it zooms to fit the crossword:
+ * big tiles for a first word, smaller as the grid spreads, never smaller than
+ * a thumb can press (`TABLE.tileLeast`). Past that the table pans instead.
+ */
+export const TABLE = {
+    /** Empty squares shown beyond the tiles on every side. */
+    margin: 2,
+    /** The smallest a tile is drawn, in CSS pixels: a comfortable thumb. */
+    tileLeast: 32,
+    /**
+     * The smallest a player may zoom a tile to by hand, to see a big crossword
+     * whole: too small to press, and not meant to be (John, 2026-09-28: "I would
+     * like to zoom out even further"). Fit never goes below `tileLeast`.
+     */
+    zoomLeast: 12,
+    /** The largest a fitted tile is drawn: a first word does not fill a desk. */
+    tileMost: 56,
+    /**
+     * The shorter side of a table past which `tileMost` grows with it (`fittedMost`):
+     * the Regular desk table's height, 34rem. No phone's or tablet's table is taller
+     * or wider across its shorter side, so none changes; only a table the player made
+     * bigger with the board size chooser (`BoardScale`) grows its squares, in
+     * proportion to the table everybody had.
+     */
+    growsFrom: 544,
+    /** The largest a player may zoom a tile to by hand. */
+    zoomMost: 88,
+    /** How near an edge of the table a dragged tile starts it panning, and how fast, in pixels a frame. */
+    edge: 36,
+    edgeStep: 8,
+    /** How long a dragged tile must stay near an edge before the table pans: crossing an edge on the way in is not asking to pan. */
+    edgeDwellMs: 350,
+};
+/** The squares to show: the tiles' extent and the margin, or the margin round square (0, 0) on an empty table. Extra squares (the one a typed letter goes to) are kept in. */
+export function tableArea(tiles, also = []) {
+    const bounds = boundsOf(tiles) ?? { top: 0, left: 0, bottom: 0, right: 0 };
+    let { top, left, bottom, right } = bounds;
+    for (const square of also) {
+        const { row, col } = placeOf(square);
+        top = Math.min(top, row);
+        left = Math.min(left, col);
+        bottom = Math.max(bottom, row);
+        right = Math.max(right, col);
+    }
+    const m = TABLE.margin;
+    return { top: top - m, left: left - m, rows: bottom - top + 1 + 2 * m, cols: right - left + 1 + 2 * m };
+}
+/**
+ * The largest a fitted tile is drawn in a table this big. `tileMost` in any
+ * table up to `growsFrom` across its shorter side, which is every phone's and
+ * the Regular desk table; past that, in proportion, so a table the player asked
+ * to be Large or Full (`BoardScale`) draws bigger squares rather than only more
+ * of them — never past what a hand may zoom to.
+ */
+export function fittedMost(width, height) {
+    const side = Math.min(width, height);
+    if (!(side > TABLE.growsFrom))
+        return TABLE.tileMost;
+    return Math.min(TABLE.zoomMost, Math.floor((TABLE.tileMost * side) / TABLE.growsFrom));
+}
+/**
+ * The view that shows the whole area, centred, its tiles as big as fit between
+ * the least and the most. A picture nobody presses (a finished grid, the
+ * set-up preview) passes a smaller least, so a whole grid fits its box.
+ */
+export function fitView(area, width, height, least = TABLE.tileLeast) {
+    const fits = Math.min(width / area.cols, height / area.rows);
+    const tile = Math.max(least, Math.min(fittedMost(width, height), Math.floor(fits)));
+    return {
+        tile,
+        x: Math.round((width - area.cols * tile) / 2 - area.left * tile),
+        y: Math.round((height - area.rows * tile) / 2 - area.top * tile),
+    };
+}
+/** Whether the area, at this view's size, is bigger than the screen: then the table pans. */
+export function overflows(area, view, width, height) {
+    return area.cols * view.tile > width + 0.5 || area.rows * view.tile > height + 0.5;
+}
+/** Zoomed by `factor` about the point (px, py) on the screen, which stays over the same spot of the table. */
+export function zoomView(view, factor, px, py) {
+    const tile = Math.max(TABLE.zoomLeast, Math.min(TABLE.zoomMost, view.tile * factor));
+    const scale = tile / view.tile;
+    return { tile, x: px - (px - view.x) * scale, y: py - (py - view.y) * scale };
+}
+export function panView(view, dx, dy) {
+    return { ...view, x: view.x + dx, y: view.y + dy };
+}
+/**
+ * Kept within reach: some of the area always on the screen, so a pan can
+ * never lose the crossword. A quarter of the screen or two tiles, whichever
+ * is less, stays in view on every side.
+ */
+export function keepInReach(view, area, width, height) {
+    const hold = (span) => Math.min(span / 4, view.tile * 2);
+    const left = view.x + area.left * view.tile;
+    const top = view.y + area.top * view.tile;
+    const right = left + area.cols * view.tile;
+    const bottom = top + area.rows * view.tile;
+    let { x, y } = view;
+    if (right < hold(width))
+        x += hold(width) - right;
+    if (left > width - hold(width))
+        x -= left - (width - hold(width));
+    if (bottom < hold(height))
+        y += hold(height) - bottom;
+    if (top > height - hold(height))
+        y -= top - (height - hold(height));
+    return { ...view, x, y };
+}
+/** The square under a point on the screen. */
+export function squareUnder(view, px, py) {
+    return { row: Math.floor((py - view.y) / view.tile), col: Math.floor((px - view.x) / view.tile) };
+}
+/** Which way, and how far, the table pans this frame for a tile dragged to (px, py): toward the edge it is near. */
+export function edgePan(px, py, width, height) {
+    const step = (near) => (near < TABLE.edge ? TABLE.edgeStep * (1 - Math.max(0, near) / TABLE.edge) : 0);
+    return { dx: step(px) - step(width - px), dy: step(py) - step(height - py) };
+}

package/dist/tileFace.d.ts

@@ -0,0 +1,25 @@
+/**
+ * WHAT A TILE CODE SHOWS, without the word list. A bag, a kept game and a
+ * finished grid hold one character a tile: an English letter as itself (a wild
+ * given a letter is that letter in capitals, a wild with none is `*`), and a
+ * Japanese kana as a private-use character, its place in `BASE_KANA` above
+ * `KANA_TILE_START`, or above `KANA_WILD_START` for a wild given that kana.
+ * So the set-up's preview and a finished game's page draw Japanese tiles
+ * without fetching the dictionary, and `tileWords` reads the same codes.
+ */
+export declare const KANA_TILE_START = 57344;
+export declare const KANA_WILD_START = 61440;
+/** The code of a base kana's tile, or of a wild given that kana. */
+export declare function kanaTileCode(kana: string, wild?: boolean): string | null;
+export type TileFaceOf = {
+    /** The letter or kana printed on it: 五 on a wild nobody has given one. */
+    glyph: string;
+    /** The other forms it plays as, small in its corner (`CORNER_FORMS`). */
+    forms: string;
+    wild: boolean;
+    /** A wild with no letter yet. */
+    blank: boolean;
+};
+export declare function tileFace(tile: string): TileFaceOf;
+/** What a screen reader says for a tile: its letter, or that it is a wild and what it stands for. */
+export declare function tileDescription(tile: string): string;