@johnmorrisdotca/kumimoji 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -6,6 +6,38 @@ All notable changes to this project are written down here. The format follows
 
 ## [Unreleased]
 
+## [1.2.0] - 2026-10-01
+
+Nothing that was exported has changed; the rules, the word lists, every deal and every saved game are exactly as they were.
+
+### Added
+
+- **`<kumimoji-table>`**, a game alone as a tag, with no framework: `@johnmorrisdotca/kumimoji/element/define` defines it (or `…/element` holds the class alone), and `language`, `hand`, `level`, `length`, `diagonals`, `seed`, `lang` and `keep` are attributes, read again when they change. It fires `kumimoji-change` after every change to the game and `kumimoji-finish` when it is won. A table the rules do not offer draws nothing.
+- **A bag a day**: `kumimojiDailySeed(date)` is the UTC date as a number (2026-10-01 is `20261001`), the same seed for everybody and the same number as Tane's `dailySeed`; `kumimojiDay(date)` writes the day. The tag takes `seed="daily"`, and the demo has Today's game.
+- **Played from a keyboard.** Tab lands on one square of the table and one tile of the hand; the arrow keys move between squares, and Left, Right, Home and End between the hand's tiles; Enter or Space picks up and lays; Escape lets go of a tile. The keyboard stays where it was after each move, on the squares, the hand and the buttons under the table. The table's notes are a polite live region. One new word in both languages (`tableKeys`) describes the table for a screen reader.
+- **Demo:** a table in a tag, Today's game, and Copy link, which copies an address that deals the same game (its seed, tiles, hand, wilds, length and diagonals).
+- **README:** an Accessibility section, "The element", "The day's seed", and the list of all sixteen packages of the family.
+- A *word list* issue template, a pull request template, SECURITY.md and CODE_OF_CONDUCT.md as the family's shared text (held equal by a test), and the family's house rules in CONTRIBUTING.md.
+
+### Changed
+
+- **Node 22 or later** (`engines`), where it said 20, which is out of support and was never tested. The package's `sideEffects` also names the file that defines the tag.
+- **A Help switch in the demo.** Beside the language chooser in the family header, shared by every demo. Off (the default) the page is as it was; on, each option row (the tiles, the hand, the wilds) says in one plain line what it does, in English or Japanese, and every button in it has the same words as its hover text. Kept on the device.
+- The README's pictures are taken again, with the Help switch in the header.
+
+## [1.1.1] - 2026-10-01
+
+Nothing that was exported has changed.
+
+### Added
+
+- **An API reference page**, `api.html` on the demo site: every export of every entry point, with its signature and its doc comment, made from the source when the site is built so it cannot fall behind the code. The README and the demo's header link to it, and a test holds it to the source.
+- **An Architecture section in the README**: how the source is split and what each file is for, held to the real files by a test.
+
+### Changed
+
+- The family's footer lists Jarajara.
+
 ## [1.1.0] - 2026-09-30
 
 Nothing that was exported has changed, a seed deals the bag it always dealt,
@@ -94,7 +126,8 @@ The first release.
   `@johnmorrisdotca/kumimoji/react`.
 - A static demo for GitHub Pages.
 
-[Unreleased]: https://github.com/johnmorrisdotca/kumimoji/compare/v1.1.0...HEAD
+[Unreleased]: https://github.com/johnmorrisdotca/kumimoji/compare/v1.1.1...HEAD
+[1.1.1]: https://github.com/johnmorrisdotca/kumimoji/compare/v1.1.0...v1.1.1
 [1.1.0]: https://github.com/johnmorrisdotca/kumimoji/releases/tag/v1.1.0
 [1.0.1]: https://github.com/johnmorrisdotca/kumimoji/releases/tag/v1.0.1
 [1.0.0]: https://github.com/johnmorrisdotca/kumimoji/releases/tag/v1.0.0

package/CONTRIBUTING.md

@@ -21,6 +21,7 @@ pnpm test:table       # the demo in real browsers: builds it, then taps it
 pnpm test:package     # npm pack, install the tarball, import and require every entry, read both lists
 pnpm test:frameworks  # the README's examples built in React, Vue, Svelte, Angular and a plain page
 pnpm site             # builds the demo into ./site
+pnpm pictures         # re-takes the README's two pictures from the built demo
 pnpm dlx serve site   # or any static server
 ```
 
@@ -68,6 +69,16 @@ pnpm dlx serve site   # or any static server
 - One change per pull request, with a line in `CHANGELOG.md` under
   *Unreleased*.
 
+## House rules, shared by every package of the family
+
+- Open an issue first for anything bigger than a typo, so that we can agree on the shape before you spend time on it.
+- No runtime dependencies. Every function that plays or checks a game is pure: it returns new values and never changes what it was given.
+- Tests sit beside the code they test. A rule you change has a test that would have caught it.
+- Words a player reads come in English and Japanese. If you cannot write the Japanese, say so in the pull request and someone will.
+- Option values and names are kebab case.
+- Art and sound are CC0 or public domain only, checked at the source, and credited in the README. No GPL or LGPL code.
+- Needs Node 22 or later. A change a user would notice gets a line in `CHANGELOG.md`.
+
 ## Releasing
 
 Maintainers bump the version in `package.json` and `src/version.ts` and move

package/README.md

@@ -12,11 +12,11 @@ In English and in Japanese kana. The rules as pure, seeded TypeScript, two word
   <img alt="TypeScript" src="https://img.shields.io/badge/types-TypeScript-3178c6">
 </p>
 
-<p align="center"><a href="https://johnmorrisdotca.github.io/kumimoji/"><strong>Play a game →</strong></a></p>
+<p align="center"><a href="https://johnmorrisdotca.github.io/kumimoji/"><strong>Play a game →</strong></a> · <a href="https://johnmorrisdotca.github.io/kumimoji/api.html">API reference</a></p>
 
 <p align="center">
-  <img src="docs/desktop.jpg" alt="An English game half way: a crossword on the green table, a hand of tiles under it, and the buttons to draw, trade and sort" width="720">
-  <img src="docs/phone.jpg" alt="A game in Japanese kana on a phone in dark mode" width="220">
+  <img src="docs/desktop.jpg" alt="An English game half way, under the demo's header with its language chooser, five cloth patches and Help switch: the set-up choices, a crossword of SYNDIC and the words that cross it on the green table, a tile in hand under it, and the buttons to draw, trade and sort" width="720">
+  <img src="docs/phone.jpg" alt="A game in Japanese kana on a phone in dark mode, in Japanese: a crossword half built on the green table, with a tile in hand and the buttons to draw, trade and sort" width="220">
 </p>
 
 A word game engine for the race to build a crossword. Every player lays their
@@ -92,9 +92,11 @@ Or with nothing to install, [play a game in the demo](https://johnmorrisdotca.gi
 
 ## Use it in your project
 
-Kumimoji is four things, each usable without the others: **the rules**, plain
+Kumimoji is five things, each usable without the others: **the rules**, plain
 functions over plain values; **the word lists**, loaded when first needed;
-**a table** you mount into any element; and **React components**.
+**a table** you mount into any element; **the same table as a tag**,
+`<kumimoji-table>`, for a page with no script of its own; and **React
+components**.
 
 ### 1. The API alone
 
@@ -134,7 +136,22 @@ encodeGrid(tiles); // → "cat/2o/2w"
 Without a bundler, import from the files as they are published:
 `./node_modules/@johnmorrisdotca/kumimoji/dist/ui.js`, or a copy of `dist/`.
 
-### 3. React
+### 3. As a tag
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/kumimoji@1/dist/element-define.js"></script>
+
+<kumimoji-table language="english" hand="7" seed="2026"></kumimoji-table>
+<kumimoji-table language="japanese" level="easy" seed="daily"></kumimoji-table>
+```
+
+The first is a game of English tiles dealt from a seed; the second is the
+day's bag in kana. A table in a tag needs no framework and no bundler, and a
+page with a framework can use it the same way. Every attribute is listed under
+[The element](#the-element); the table fires `kumimoji-change` after each
+change to the game and `kumimoji-finish` when it is won.
+
+### 4. React
 
 ```jsx
 import { useState } from "react";
@@ -157,7 +174,7 @@ draws an empty box and nothing needs a provider. In Next.js, use it from a
 client component (`"use client"`). `KumimojiBoard` is the grid alone, for a
 table of your own: see [The React components](#the-react-components).
 
-### 4. Vue
+### 5. Vue
 
 ```vue
 <script setup>
@@ -179,7 +196,7 @@ onBeforeUnmount(() => table?.destroy());
 </template>
 ```
 
-### 5. Svelte
+### 6. Svelte
 
 ```svelte
 <script>
@@ -198,7 +215,7 @@ onBeforeUnmount(() => table?.destroy());
 <p id="left">{left}</p>
 ```
 
-### 6. Angular
+### 7. Angular
 
 ```typescript
 import { Component, ElementRef, OnDestroy, afterNextRender, provideZonelessChangeDetection, signal, viewChild } from "@angular/core";
@@ -226,7 +243,7 @@ class App implements OnDestroy {
 bootstrapApplication(App, { providers: [provideZonelessChangeDetection()] });
 ```
 
-Each of the five is taken from this page as it is written, built from the
+Each of the six is taken from this page as it is written, built from the
 packed tarball in a project of its own, and played by taps in Chromium and
 WebKit, by `scripts/check-frameworks.mjs`, before a release names it. In each
 the bundler splits the word lists into files of their own, which the browser
@@ -240,16 +257,77 @@ fetches when a game is first dealt.
   text; what is read back is dealt again from its seed and checked against
   its bag, never trusted.
 - **No dependencies**, ES modules, a `default` export condition so that
-  `require()` loads it too (Node 22 and later).
+  `require()` loads it too (Node 22 and later), and a `sideEffects` list that
+  names only the files that define the tag and register the word lists.
 - **Sizes.** The rules, the computer player and the table of players are
   about 44 kB minified (16 kB gzipped); the table for a page is 34 kB (13 kB).
   The English list is 606 kB (277 kB gzipped) and the Japanese 718 kB
   (396 kB), each a file of its own that is fetched only when a game in that
   language is first dealt.
 - **Where it runs.** Current Chrome, Edge, Firefox and Safari, on a desk or a
-  phone. The rules have no DOM in them and run in Node 20 and later, Deno,
+  phone. The rules have no DOM in them and run in Node 22 and later, Deno,
   Bun and web workers.
 
+## Architecture
+
+The rules are plain functions over plain data with no DOM: a game is a value,
+every move returns the next one, and the same seed deals the same bag in every
+browser. Word lists are loaded only when a game opens, and the table is its own
+entry (`/ui` for plain DOM, `/element` for a tag, `/react` for React), so a page that wants only the
+rules carries none of it. A computer player is pure too, so its turn replays
+exactly after a reload.
+
+```text
+src/
+├── check.ts            whether a finished grid completes a game: the one check a server also runs
+├── computer.types.ts   what a computer did in one step of its turn
+├── computerPlay.ts     the word a computer player lays: from its own hand, with no randomness
+├── computerTurn.ts     a computer's whole turn, planned as steps the page can show one at a time
+├── daily.ts            one seed a day, the same for everybody
+├── element-define.ts   the "/element/define" entry: defines <kumimoji-table> on the page by being imported
+├── element.ts          the "/element" entry: the <kumimoji-table> element, a game alone in a tag
+├── export.ts           a game written out as JSON or plain text, and read back
+├── generate.ts         making a game from a seed: a crossword laid first, then its tiles become the bag
+├── grid.ts             the grid of tiles on a table with no edges, and how it is written as a string
+├── help.ts             arranging the hand into a word, for a player who asks for help
+├── index.ts            the main entry: the rules, the generator, the computer player and the table's pure helpers
+├── judge.ts            judging a grid against its language's word list, run by run
+├── kana.ts             Japanese tiles: the 45 base kana, and how every other kana is played as one of them
+├── kumimoji.types.ts   the game's types: how much of the set a bag holds, and the rest
+├── party.ts            pass and play: two to eight people round one device, one bag, a hand and a table each
+├── party.types.ts      what a pass-and-play game was set up as
+├── partyKept.ts        a pass-and-play game kept in the browser as one string of JSON
+├── partySeats.ts       people and computers joining and leaving a pass-and-play game between turns
+├── partyTurns.ts       how a pass-and-play turn ends, and how the game does, and who won
+├── placement.ts        where a word can cross a crossword without spoiling it
+├── play.ts             a game being played: the bag, the hand and the table, and every move on them
+├── random.ts           a seeded random, so one seed deals one game in every browser
+├── react.tsx           the "/react" entry: a grid to draw in React
+├── showcase.ts         what the rules page shows of the game, worked out from the game's own tables
+├── strings.ts          every word Kumimoji shows a person, in English and Japanese
+├── tableView.ts        how the table is looked at: which squares are shown, and how big a tile is drawn
+├── tileFace.ts         what a tile code shows, without loading a word list
+├── tileFamily.ts       which tile of the set a tile is, without loading a word list
+├── tileWords.ts        the word list, loaded once when a game opens
+├── tileWordsModule.ts  the same lists where there is no browser, imported only by a server or a test
+├── tiles.constants.ts  every number the game is played by: tile mixes, hand sizes, lengths of a game
+├── turn.ts             turning the table while every tile stays upright
+├── ui.ts               the "/ui" entry: Kumimoji played in the browser, in plain DOM
+├── version.ts          the version of this package, as package.json has it
+├── wilds.ts            a wild tile with no letter read as whatever makes the grid words
+├── words.en.data.ts    the English word list
+├── words.ja.data.ts    the Japanese word list and tile mix
+├── words.ts            the "/words" entry: the word lists, for a place with no browser, such as a server or a test
+└── ui/  the table that draws and plays a game
+    ├── board.ts  how a tile on the table is drawn: sound, in a run that is not a word, or apart
+    ├── mount.ts  the table itself: mounting it on a page, the options it takes, and playing it from a keyboard
+    └── style.ts  the table's own styles, every colour and size a CSS variable so a page can restyle it
+```
+
+Tests sit beside the code they test (`*.test.ts`). `scripts/` builds the demo
+and checks the package as npm packs it, `demo/` is the page published on
+GitHub Pages, and `table/` taps it in real browsers.
+
 ## The name
 
 *Kumimoji* (組み文字) is made of *kumi* (組み, from 組む, to put together or
@@ -278,25 +356,27 @@ issue and we will add you.
 
 ### The family
 
-Kumimoji has siblings, each made for the same site, each MIT, each at
+Kumimoji is one of sixteen packages, each made for the same site, each MIT, each at
 [github.com/johnmorrisdotca](https://github.com/johnmorrisdotca):
 
-- [Korokoro](https://github.com/johnmorrisdotca/korokoro) (コロコロ, the sound
-  of something small rolling along): a dice roller and a dice notation
-  parser, with the exact odds of every roll.
-- [Kyuubu](https://github.com/johnmorrisdotca/kyuubu) (キューブ, how Japanese
-  says "cube"): a turning cube for the browser, 2×2 to 7×7, drawn in CSS 3D.
-- [Hitotsu](https://github.com/johnmorrisdotca/hitotsu) (一つ, "one"): a
-  colour-card game, named for the call a player makes with one card left.
-- [Toranpu](https://github.com/johnmorrisdotca/toranpu) (トランプ, the everyday
-  Japanese word for a deck of playing cards): ten card games, complete, with a
-  computer for every seat.
-- [Tane](https://github.com/johnmorrisdotca/tane) (種, a seed, the kind you
-  plant): seeded random numbers and daily seeds.
-- [Narabe](https://github.com/johnmorrisdotca/narabe) (並べ, "line them up"):
-  a rules engine for forty-eight board games, from five in a row to Go.
-- [Tenka](https://github.com/johnmorrisdotca/tenka) (天下, "all under
-  heaven"): world conquest for two to six, on a map of the real world.
+- [Korokoro](https://github.com/johnmorrisdotca/korokoro) (コロコロ, the sound of something small rolling): dice, with notation, exact odds and games.
+- [Kyuubu](https://github.com/johnmorrisdotca/kyuubu) (キューブ, how Japanese says "cube"): a turning cube for the browser, 2×2 to 7×7.
+- [Hitotsu](https://github.com/johnmorrisdotca/hitotsu) (一つ, "one"): a colour-card game, named for the call a player makes with one card left.
+- [Toranpu](https://github.com/johnmorrisdotca/toranpu) (トランプ, the everyday Japanese word for a deck of playing cards): card games as pure rules.
+- [Tane](https://github.com/johnmorrisdotca/tane) (種, a seed, the kind you plant): seeded random numbers and daily seeds.
+- [Narabe](https://github.com/johnmorrisdotca/narabe) (並べ, "line them up"): a rules engine for gomoku, Reversi, Go, checkers and many more.
+- [Tenka](https://github.com/johnmorrisdotca/tenka) (天下, "under heaven"): a world-conquest game for two to six.
+- [Kumimoji](https://github.com/johnmorrisdotca/kumimoji) (組み文字, "letters put together"): a crossword tile race in English and Japanese.
+- [Tsunagi](https://github.com/johnmorrisdotca/tsunagi) (繋ぎ, "joining"): a line-joining puzzle.
+- [Jarajara](https://github.com/johnmorrisdotca/jarajara) (ジャラジャラ, the rattle of mahjong tiles being shuffled): mahjong tiles and a matching solitaire.
+- [Suido](https://github.com/johnmorrisdotca/suido) (水道, "waterworks"): a pipe puzzle.
+- [Domino](https://github.com/johnmorrisdotca/domino) (ドミノ, the Japanese word for dominoes): dominoes and Mexican Train.
+- [Kotoba](https://github.com/johnmorrisdotca/kotoba) (言葉, "words"): word lists and word-game rules.
+- [Sugoroku](https://github.com/johnmorrisdotca/sugoroku) (双六, backgammon's Japanese name): backgammon and its variants.
+- [Kazu](https://github.com/johnmorrisdotca/kazu) (数, "number"): grid number puzzles, Sudoku and five more.
+- [Meikyuu](https://github.com/johnmorrisdotca/meikyuu) (迷宮, "labyrinth"): mazes to draw a line through.
+
+**This package is Kumimoji.** The demos of all sixteen share one header and footer, so each links the rest.
 
 ## Features
 
@@ -320,6 +400,12 @@ Kumimoji has siblings, each made for the same site, each MIT, each at
 - **Help**, if chosen: the words the hand's own tiles spell.
 - **A table to play on.** `mountKumimoji` plays a whole game alone in plain
   DOM, saves it and loads it back; `KumimojiBoard` draws a grid in React.
+- **A tag.** `<kumimoji-table>` is the same game in one element, with no
+  framework.
+- **One bag a day.** `kumimojiDailySeed(new Date())` is the same seed for
+  everybody, worldwide.
+- **Played from a keyboard.** Arrow keys between squares and tiles, Enter or
+  Space to pick up and lay; see [Accessibility](#accessibility).
 - **The table's words in English and Japanese**, and any other language by a
   table of your own. **Themeable**: every colour is a CSS variable.
 
@@ -428,6 +514,26 @@ The tiles are the 45 base hiragana. A word is spelt with the base of each of
 its kana, so ことば is played, and listed, as ことは: a tile shows the other
 forms it plays as in its corner (`CORNER_FORMS`, `formsOfTile`).
 
+### The day's seed
+
+| Export | What it does |
+| --- | --- |
+| `kumimojiDay(date)` | The day a moment falls on, in UTC, written `YYYY-MM-DD` |
+| `kumimojiDailySeed(date)` | That day's seed: the date as a number, so 2026-10-01 is `20261001` |
+
+```ts
+import { kumimojiDailySeed } from "@johnmorrisdotca/kumimoji";
+
+kumimojiDailySeed(new Date("2026-10-01T12:00:00Z")); // → 20261001
+kumimojiDailySeed(new Date("2026-10-01T23:59:59Z")); // → 20261001
+```
+
+The day is the UTC date, so it changes at one moment for the whole world, and
+everybody who deals from it with the same settings (language, hand, level and
+length) gets the same bag in the same order. It is the same number as Tane's
+`dailySeed`, so a page that uses both agrees; Kumimoji does not need Tane. The
+race against the clock is each player's own.
+
 ### A table of players
 
 ```ts
@@ -495,7 +601,7 @@ The JSON, as `kumimojiToJSON` writes it:
 {
   "format": 1,
   "game": "kumimoji",
-  "generator": "kumimoji 1.1.0",
+  "generator": "kumimoji 1.2.0",
   "size": 3,
   "level": "hard",
   "seed": 44,
@@ -557,6 +663,11 @@ What that means for a project that uses this package:
 This is a description, not legal advice; the licences themselves are what
 hold.
 
+A real word the table calls "not a word", or a word it accepts that it should
+not: open a [*word list*](https://github.com/johnmorrisdotca/kumimoji/issues/new?template=word-list.md)
+issue. The lists are not edited by hand, so a word may have to be changed at
+its source.
+
 ### Loading them
 
 In a browser, `loadTileWords(language)` fetches the list as its own module
@@ -586,6 +697,8 @@ turn tiles into words: `glyphOf`, `soundOf`, `wordOf`, `wildFor`, `isWild`,
 
 ## API
 
+The [API reference](https://johnmorrisdotca.github.io/kumimoji/api.html) lists every export of every entry point with its signature and its doc comment. It is made from the source by `pnpm site`, so it cannot fall behind the code.
+
 Every function, type and constant has a doc comment, so an editor shows this
 as you type. The entries:
 
@@ -594,6 +707,8 @@ as you type. The entries:
 | `@johnmorrisdotca/kumimoji` | Dealing, playing, judging, the table of players, the computer player, keeping and export, and the table's words |
 | `@johnmorrisdotca/kumimoji/words` | Reads both word lists from this package's files, for a server, a test or a script: `loadTileWordsFromModule` |
 | `@johnmorrisdotca/kumimoji/ui` | `mountKumimoji`, a whole game alone in plain DOM, and `boardModel` |
+| `@johnmorrisdotca/kumimoji/element` | `KumimojiTable`, the `<kumimoji-table>` element's class, to extend or to define under another name |
+| `@johnmorrisdotca/kumimoji/element/define` | Defines `<kumimoji-table>` on the page by being imported; exports nothing |
 | `@johnmorrisdotca/kumimoji/react` | `KumimojiBoard` and `KumimojiTable` |
 
 ### Dealing and judging
@@ -712,6 +827,32 @@ entry has `boardModel(tiles, verdict, glyphOf?)`, which works out the squares
 to draw and how each tile stands, with `BOARD_MARGIN` and `BOARD_LEAST`, and
 `KUMIMOJI_STYLE`, the table's stylesheet as a string.
 
+### The element
+
+`<kumimoji-table>` is `mountKumimoji` as a tag: `@johnmorrisdotca/kumimoji/element/define`
+defines it, and `@johnmorrisdotca/kumimoji/element` holds the class alone. Each
+attribute is read again when it changes, and a change to any but `lang` deals a
+new game. A table the rules do not offer (a hand of 5, say) draws nothing.
+
+| Attribute | Default | What it does |
+| --- | --- | --- |
+| `language` | `english` | The tiles: `english` or `japanese` kana |
+| `hand` | `7` | The opening hand: 3, 7 or 11 |
+| `level` | `medium` | Wild tiles: `easy` the most, `medium` some, `hard` none |
+| `length` | `short` | `short`, `medium` or `full`, all 144 tiles |
+| `diagonals` | off | `on` to read every diagonal run of three or more too |
+| `seed` | a new one each game | A whole number to deal from, or `daily` for the day's seed |
+| `lang` | the page's | The language of the table's words: `en` or `ja` |
+| `keep` | on | `off` leaves saving and loading out |
+
+It fires `kumimoji-change` after every change to the game, with the game as it
+would be saved as `event.detail.saved`, and `kumimoji-finish` when the last
+tile is laid and every run is a word, with the deal, the play and the time it
+took as `event.detail`; both bubble. It has `saved` (the game as it would be
+saved), `table` (the handle `mountKumimoji` returns), `newGame(options?)` and
+`setGame(saved)`. To style it, set the table's variables on `kumimoji-table
+.km-root`: see [Theming](#theming).
+
 ### The React components
 
 ```jsx
@@ -749,10 +890,31 @@ export function Board() {
 else for its `<div>`. Options are read when it mounts; give it a new `key` to
 start over with different ones.
 
+## Accessibility
+
+- **A keyboard plays it.** Every square and every tile in the hand is a button
+  with a name. Tab lands on one square of the table and on one tile of the
+  hand, the arrow keys move between squares (and Left, Right, Home and End
+  between the hand's tiles), Enter or Space picks a tile up and lays it, and
+  Escape lets go of a tile you have picked up. The keyboard stays where it was
+  after each move, including on the buttons under the table, and the table's
+  description says so.
+- **What is happening is said.** The line above the table, with the tiles left
+  and the time, and the line saying which runs are not words, are polite live
+  regions, and so is the note after saving or loading.
+- **Targets are big enough.** Every button is at least 44 pixels each way,
+  which a test holds at a phone's width.
+- **Not by colour alone.** A run that is not a word is ringed and listed in
+  words; a tile apart from the crossword is faded and said so.
+- **Motion.** There is none to reduce: the table has no animation.
+- **Not yet.** Letters cannot be typed to lay a tile, and a screen reader hears
+  the table as a grid of squares, not as the words they make.
+
 ## Theming
 
-Every colour is a CSS variable on `.km-root`. Set them in your stylesheet, on
-the table's element or any ancestor, or pass them as `theme`, which sets them
+Every colour is a CSS variable on `.km-root`. Set them in your stylesheet on
+`.km-root` with a selector more specific than the table's own, such as
+`#table .km-root`, or pass them as `theme`, which sets them
 on the table itself and so wins in light and dark alike.
 
 | Variable | What it sets | Light | Dark |
@@ -827,7 +989,7 @@ that language, whose licence lets its words be shipped.
 Any current browser: Chrome, Edge, Firefox and Safari, on a desk or a phone.
 It needs ES2020 and dynamic `import()`. The table is tested in Chromium and in
 WebKit, Safari's engine, at phone size with touch and on a desktop. The rules
-run in Node 20 and later, Deno, Bun and web workers, and load by `import` and
+run in Node 22 and later, Deno, Bun and web workers, and load by `import` and
 by `require()`.
 
 ## The command line
@@ -848,12 +1010,12 @@ words.allowed.has("snowy"); // → true
 ## Roadmap
 
 - More languages for the tiles, each from a real dictionary of that language.
-- Playing the plain-DOM table from a keyboard, as the React one on Itsutsu
-  can be.
+- Typing a letter to lay that tile, in the plain-DOM table, which is
+  otherwise played from a keyboard.
 - A table of players in plain DOM, beside the game alone.
 - A computer player at three strengths.
 - Word definitions for a finished crossword.
-- A Vue wrapper and a web component, beside the React one.
+- A Vue wrapper, beside the React one and the tag.
 
 Left out on purpose: play between devices, which needs a server (a table is
 kept as text made to be sent, and Itsutsu sends it; the sending is yours); a
@@ -871,9 +1033,10 @@ pnpm install
 pnpm check        # lint, types and tests
 pnpm test:table   # the demo in real browsers, by taps
 pnpm site         # build the demo into ./site, then serve it
+pnpm pictures     # take the README's two pictures from the built demo
 ```
 
-Please follow the [code of conduct](./CODE_OF_CONDUCT.md).
+Please follow the [code of conduct](./CODE_OF_CONDUCT.md). A way to make a check or a deal run for long, or markup that gets out of the drawing, is for the [security policy](./SECURITY.md), not a public issue.
 
 ## Changes
 

package/dist/daily.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ONE SEED A DAY, THE SAME FOR EVERYBODY. A day is a calendar date in UTC and
+ * its seed is that date as a number: 2026-10-01 is 20261001, which
+ * `generateKumimoji` accepts. It is the same number Tane's `dailySeed` gives,
+ * so a page that uses both agrees; nothing here needs Tane.
+ *
+ * Everybody who deals from the day's seed with the same settings (language,
+ * hand, level, length) gets the same bag, in the same order. The race against
+ * the clock is then theirs.
+ */
+/** The day a moment falls on, in UTC, written `YYYY-MM-DD`. Throws a `RangeError` for an invalid `Date`. */
+export declare function kumimojiDay(at: Date): string;
+/** Today's seed, the date as a number: 2026-10-01 is 20261001. The day is UTC, so it is one seed worldwide. */
+export declare function kumimojiDailySeed(at: Date): number;

package/dist/daily.js

@@ -0,0 +1,22 @@
+/**
+ * ONE SEED A DAY, THE SAME FOR EVERYBODY. A day is a calendar date in UTC and
+ * its seed is that date as a number: 2026-10-01 is 20261001, which
+ * `generateKumimoji` accepts. It is the same number Tane's `dailySeed` gives,
+ * so a page that uses both agrees; nothing here needs Tane.
+ *
+ * Everybody who deals from the day's seed with the same settings (language,
+ * hand, level, length) gets the same bag, in the same order. The race against
+ * the clock is then theirs.
+ */
+const pad = (value, width) => String(value).padStart(width, "0");
+/** The day a moment falls on, in UTC, written `YYYY-MM-DD`. Throws a `RangeError` for an invalid `Date`. */
+export function kumimojiDay(at) {
+    if (Number.isNaN(at.getTime()))
+        throw new RangeError("kumimoji: an invalid Date has no day");
+    return `${pad(at.getUTCFullYear(), 4)}-${pad(at.getUTCMonth() + 1, 2)}-${pad(at.getUTCDate(), 2)}`;
+}
+/** Today's seed, the date as a number: 2026-10-01 is 20261001. The day is UTC, so it is one seed worldwide. */
+export function kumimojiDailySeed(at) {
+    const [year, month, day] = kumimojiDay(at).split("-").map(Number);
+    return year * 10000 + month * 100 + day;
+}

package/dist/element-define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/element-define.js

@@ -0,0 +1,13 @@
+/**
+ * Defines the `<kumimoji-table>` element on the page. Import it for its effect:
+ *
+ * ```html
+ * <script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/kumimoji@1/dist/element-define.js"></script>
+ * <kumimoji-table language="english" hand="7"></kumimoji-table>
+ * ```
+ *
+ * A tag already defined is left as it is, and on a server, where there is no page, nothing happens.
+ */
+import { KumimojiTable } from "./element.js";
+if (typeof customElements !== "undefined" && customElements.get("kumimoji-table") === undefined)
+    customElements.define("kumimoji-table", KumimojiTable);

package/dist/element.d.ts

@@ -0,0 +1,45 @@
+import { type KumimojiTableHandle } from "./ui/mount.ts";
+import type { KumimojiSaved } from "./export.ts";
+declare const ElementBase: typeof HTMLElement;
+/**
+ * THE `<kumimoji-table>` ELEMENT: a game of Kumimoji alone in a tag, with no
+ * framework. `@johnmorrisdotca/kumimoji/element/define` defines it; this entry
+ * holds the class alone, to extend or to define under another name. Safe to
+ * import on a server, where there is no page: the class then extends nothing.
+ *
+ * ```html
+ * <kumimoji-table language="english" hand="7" seed="2026"></kumimoji-table>
+ * <kumimoji-table language="japanese" level="easy" seed="daily"></kumimoji-table>
+ * ```
+ *
+ * Attributes (each is read again when it changes; a change to any but `lang`
+ * deals a new game):
+ *  - `language`: the tiles, `english` (default) or `japanese` kana.
+ *  - `hand`: the opening hand, 3, 7 (default) or 11.
+ *  - `level`: how many tiles are wild, `easy` (most), `medium` (default) or `hard` (none).
+ *  - `length`: how much of the set the bag holds, `short` (default), `medium` or `full`.
+ *  - `diagonals`: `on` to read every diagonal run of three or more too.
+ *  - `seed`: a whole number to deal from, or `daily` for the day's seed (`kumimojiDailySeed`); a new one if left out.
+ *  - `lang`: the language of the table's words, `en` or `ja`, or the page's. `keep`: `off` to leave saving and loading out.
+ *
+ * It fires `kumimoji-change` after every change to the game, with the game as it would
+ * be saved as `event.detail.saved`, and `kumimoji-finish` when the last tile is laid and every run
+ * is a word, with `event.detail` the deal, the play and the time it took. It has the methods
+ * `newGame()` and `setGame()`. A table the rules do not offer (a hand of 5, say) draws nothing.
+ */
+export declare class KumimojiTable extends ElementBase {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** The mounted table's handle (`mountKumimoji`), or null while the attributes name no table the rules offer. */
+    get table(): KumimojiTableHandle | null;
+    /** The game as it would be saved, or null while there is none (or it is still being dealt). */
+    get saved(): KumimojiSaved | null;
+    /** A new game at the same table: see `KumimojiTableHandle.newGame`. */
+    newGame(options?: Parameters<KumimojiTableHandle["newGame"]>[0]): Promise<void>;
+    /** Put a game on the table: see `KumimojiTableHandle.setGame`. */
+    setGame(saved: KumimojiSaved): Promise<void>;
+}
+export {};

package/dist/element.js

@@ -0,0 +1,130 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _KumimojiTable_instances, _KumimojiTable_table, _KumimojiTable_key, _KumimojiTable_queued, _KumimojiTable_seed, _KumimojiTable_refresh;
+import { kumimojiDailySeed } from "./daily.js";
+import { KUMIMOJI_HANDS } from "./tiles.constants.js";
+import { mountKumimoji } from "./ui/mount.js";
+const ElementBase = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+const oneOf = (value, allowed) => (allowed.includes(value) ? value : undefined);
+const isOn = (value) => value !== null && ["true", "on", "1", "yes"].includes(value.toLowerCase());
+const HANDS = Object.values(KUMIMOJI_HANDS);
+/**
+ * THE `<kumimoji-table>` ELEMENT: a game of Kumimoji alone in a tag, with no
+ * framework. `@johnmorrisdotca/kumimoji/element/define` defines it; this entry
+ * holds the class alone, to extend or to define under another name. Safe to
+ * import on a server, where there is no page: the class then extends nothing.
+ *
+ * ```html
+ * <kumimoji-table language="english" hand="7" seed="2026"></kumimoji-table>
+ * <kumimoji-table language="japanese" level="easy" seed="daily"></kumimoji-table>
+ * ```
+ *
+ * Attributes (each is read again when it changes; a change to any but `lang`
+ * deals a new game):
+ *  - `language`: the tiles, `english` (default) or `japanese` kana.
+ *  - `hand`: the opening hand, 3, 7 (default) or 11.
+ *  - `level`: how many tiles are wild, `easy` (most), `medium` (default) or `hard` (none).
+ *  - `length`: how much of the set the bag holds, `short` (default), `medium` or `full`.
+ *  - `diagonals`: `on` to read every diagonal run of three or more too.
+ *  - `seed`: a whole number to deal from, or `daily` for the day's seed (`kumimojiDailySeed`); a new one if left out.
+ *  - `lang`: the language of the table's words, `en` or `ja`, or the page's. `keep`: `off` to leave saving and loading out.
+ *
+ * It fires `kumimoji-change` after every change to the game, with the game as it would
+ * be saved as `event.detail.saved`, and `kumimoji-finish` when the last tile is laid and every run
+ * is a word, with `event.detail` the deal, the play and the time it took. It has the methods
+ * `newGame()` and `setGame()`. A table the rules do not offer (a hand of 5, say) draws nothing.
+ */
+export class KumimojiTable extends ElementBase {
+    constructor() {
+        super(...arguments);
+        _KumimojiTable_instances.add(this);
+        _KumimojiTable_table.set(this, null);
+        _KumimojiTable_key.set(this, "");
+        _KumimojiTable_queued.set(this, false);
+        _KumimojiTable_seed.set(this, null);
+    }
+    connectedCallback() {
+        __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_refresh).call(this);
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.destroy();
+        __classPrivateFieldSet(this, _KumimojiTable_table, null, "f");
+        __classPrivateFieldSet(this, _KumimojiTable_key, "", "f");
+    }
+    attributeChangedCallback() {
+        if (!this.isConnected || __classPrivateFieldGet(this, _KumimojiTable_queued, "f"))
+            return;
+        __classPrivateFieldSet(this, _KumimojiTable_queued, true, "f");
+        queueMicrotask(() => {
+            __classPrivateFieldSet(this, _KumimojiTable_queued, false, "f");
+            __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_refresh).call(this);
+        });
+    }
+    /** The mounted table's handle (`mountKumimoji`), or null while the attributes name no table the rules offer. */
+    get table() {
+        return __classPrivateFieldGet(this, _KumimojiTable_table, "f");
+    }
+    /** The game as it would be saved, or null while there is none (or it is still being dealt). */
+    get saved() {
+        return __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.saved() ?? null;
+    }
+    /** A new game at the same table: see `KumimojiTableHandle.newGame`. */
+    newGame(options) {
+        return __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.newGame(options) ?? Promise.resolve();
+    }
+    /** Put a game on the table: see `KumimojiTableHandle.setGame`. */
+    setGame(saved) {
+        return __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.setGame(saved) ?? Promise.resolve();
+    }
+}
+_KumimojiTable_table = new WeakMap(), _KumimojiTable_key = new WeakMap(), _KumimojiTable_queued = new WeakMap(), _KumimojiTable_seed = new WeakMap(), _KumimojiTable_instances = new WeakSet(), _KumimojiTable_refresh = function _KumimojiTable_refresh() {
+    const language = oneOf(this.getAttribute("language"), ["english", "japanese"]);
+    const handAttribute = this.getAttribute("hand");
+    const hand = handAttribute === null ? undefined : Number(handAttribute);
+    const level = oneOf(this.getAttribute("level"), ["easy", "medium", "hard"]);
+    const gameLength = oneOf(this.getAttribute("length"), ["short", "medium", "full"]);
+    const diagonals = isOn(this.getAttribute("diagonals"));
+    const seedAttribute = this.getAttribute("seed");
+    const asked = Number(seedAttribute);
+    const seed = seedAttribute === "daily"
+        ? kumimojiDailySeed(new Date())
+        : seedAttribute !== null && Number.isInteger(asked) && asked >= 0 && asked <= 0xffffffff
+            ? asked
+            : (__classPrivateFieldSet(this, _KumimojiTable_seed, __classPrivateFieldGet(this, _KumimojiTable_seed, "f") ?? Math.floor(Math.random() * 2 ** 31), "f"));
+    const lang = this.getAttribute("lang");
+    const locale = lang === "en" || lang === "ja" ? lang : undefined;
+    const keep = !["false", "off", "0", "no"].includes((this.getAttribute("keep") ?? "").toLowerCase());
+    const key = JSON.stringify([language, hand, level, gameLength, diagonals, seed, keep]);
+    if (key === __classPrivateFieldGet(this, _KumimojiTable_key, "f") && __classPrivateFieldGet(this, _KumimojiTable_table, "f") !== null) {
+        __classPrivateFieldGet(this, _KumimojiTable_table, "f").setLocale(locale ?? (document.documentElement.lang.toLowerCase().startsWith("ja") ? "ja" : "en"));
+        return;
+    }
+    __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.destroy();
+    __classPrivateFieldSet(this, _KumimojiTable_table, null, "f");
+    __classPrivateFieldSet(this, _KumimojiTable_key, key, "f");
+    if (hand !== undefined && !HANDS.includes(hand))
+        return;
+    __classPrivateFieldSet(this, _KumimojiTable_table, mountKumimoji(this, {
+        language,
+        hand,
+        level,
+        gameLength,
+        diagonals,
+        seed,
+        locale,
+        keep,
+        onChange: (saved) => this.dispatchEvent(new CustomEvent("kumimoji-change", { detail: { saved }, bubbles: true })),
+        onFinish: (result) => this.dispatchEvent(new CustomEvent("kumimoji-finish", { detail: result, bubbles: true })),
+    }), "f");
+};
+KumimojiTable.observedAttributes = ["language", "hand", "level", "length", "diagonals", "seed", "lang", "keep"];

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export * from "./computer.types.ts";
 export * from "./computerPlay.ts";
 export * from "./computerTurn.ts";
 export * from "./random.ts";
+export * from "./daily.ts";
 export * from "./export.ts";
 export * from "./strings.ts";
 export { KUMIMOJI_VERSION } from "./version.ts";

package/dist/index.js

@@ -42,6 +42,7 @@ export * from "./computer.types.js";
 export * from "./computerPlay.js";
 export * from "./computerTurn.js";
 export * from "./random.js";
+export * from "./daily.js";
 export * from "./export.js";
 export * from "./strings.js";
 export { KUMIMOJI_VERSION } from "./version.js";

package/dist/strings.d.ts

@@ -19,6 +19,7 @@ declare const EN: {
     left: string;
     finished: string;
     tableLabel: string;
+    tableKeys: string;
     handLabel: string;
     emptySquare: string;
     wildTile: string;

package/dist/strings.js

@@ -17,6 +17,7 @@ const EN = {
     left: "{n} tiles left in the bag · {time}",
     finished: "Finished in {time}. Every tile laid, every run a word.",
     tableLabel: "The table",
+    tableKeys: "Arrow keys move between squares, Enter or Space taps one, and Escape lets go of a tile you have picked up.",
     handLabel: "Your hand",
     emptySquare: "Empty square",
     wildTile: "{tile}, wild",
@@ -53,6 +54,7 @@ const JA = {
     left: "袋の残り{n}枚 · {time}",
     finished: "{time}で完成しました。すべてのタイルを置き、どの並びも単語になっています。",
     tableLabel: "テーブル",
+    tableKeys: "矢印キーでマスを移動し、Enterキーかスペースキーでタップします。Escapeキーで、選んだタイルの選択を解除します。",
     handLabel: "手札",
     emptySquare: "空きマス",
     wildTile: "{tile}（ワイルド）",

package/dist/ui/mount.js

@@ -58,6 +58,9 @@ export function mountKumimoji(target, options = {}) {
     let dealt = null;
     let play = null;
     let held = null;
+    // 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;
@@ -77,6 +80,7 @@ export function mountKumimoji(target, options = {}) {
     board.dataset.testid = "km-board";
     const notes = node("p", "km-notes");
     notes.dataset.testid = "km-notes";
+    notes.setAttribute("aria-live", "polite");
     const hand = node("div", "km-hand");
     hand.dataset.testid = "km-hand";
     hand.setAttribute("role", "group");
@@ -195,6 +199,62 @@ export function mountKumimoji(target, options = {}) {
         if (at !== null && at !== undefined)
             tapHand(Number(at));
     });
+    // Keyboard play. The squares and the hand's tiles are buttons, so Enter and Space tap them; each is one stop for
+    // Tab, and the arrow keys move between squares (by the grid) and between the hand's tiles. Escape puts a held tile down.
+    board.addEventListener("keydown", (event) => {
+        const cell = event.target.closest("[data-square]");
+        const grid = board.querySelector(".km-grid");
+        if (cell === null || grid === null || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        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;
+        if (step === null)
+            return;
+        event.preventDefault();
+        const next = cells[at + step];
+        if (step === 0 || next === undefined)
+            return;
+        cell.tabIndex = -1;
+        next.tabIndex = 0;
+        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;
+    });
+    hand.addEventListener("focusin", (event) => {
+        const at = event.target.closest("[data-hand]")?.getAttribute("data-hand");
+        if (at !== null && at !== undefined)
+            onHand = Number(at);
+    });
+    hand.addEventListener("keydown", (event) => {
+        const tile = event.target.closest("[data-hand]");
+        if (tile === null || event.altKey || event.ctrlKey || event.metaKey)
+            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;
+        if (to === null)
+            return;
+        event.preventDefault();
+        const next = tiles[to];
+        if (next === undefined)
+            return;
+        tile.tabIndex = -1;
+        next.tabIndex = 0;
+        onHand = to;
+        next.focus();
+    });
+    root.addEventListener("keydown", (event) => {
+        if (event.key !== "Escape" || held === null)
+            return;
+        held = null;
+        render();
+    });
     function renderStatus() {
         root.dataset.state = play === null ? "dealing" : finishedAt !== null ? "finished" : "playing";
         if (play === null) {
@@ -212,6 +272,9 @@ export function mountKumimoji(target, options = {}) {
         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";
@@ -231,8 +294,16 @@ export function mountKumimoji(target, options = {}) {
             }
             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 : "";
     }
@@ -251,6 +322,7 @@ export function mountKumimoji(target, options = {}) {
                 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)
@@ -309,9 +381,35 @@ export function mountKumimoji(target, options = {}) {
         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();
@@ -322,6 +420,7 @@ export function mountKumimoji(target, options = {}) {
         renderPicker();
         renderHand();
         renderControls(verdict);
+        keyboardBack(where);
     }
     const handle = {
         play: () => play,

package/dist/ui/style.d.ts

@@ -4,4 +4,4 @@
  * or any ancestor, or pass them as `theme`). Light and dark follow the
  * reader's system. Everything to be tapped is at least 44px.
  */
-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-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 { 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

@@ -28,7 +28,7 @@ export const KUMIMOJI_STYLE = `
 .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-square:focus-visible, .km-button:focus-visible, .km-keep-title:focus-visible { outline: 3px solid var(--km-held); outline-offset: 2px; }
+.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; }
 .km-notes { margin: 0; min-height: 1.4em; font-size: 14px; opacity: .8; overflow-wrap: anywhere; }
 .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); }
 .km-empty { opacity: .6; font-size: 14px; }

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** The version of this package, as `package.json` has it. A test holds the two together. */
-export declare const KUMIMOJI_VERSION = "1.1.0";
+export declare const KUMIMOJI_VERSION = "1.2.0";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** The version of this package, as `package.json` has it. A test holds the two together. */
-export const KUMIMOJI_VERSION = "1.1.0";
+export const KUMIMOJI_VERSION = "1.2.0";

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@johnmorrisdotca/kumimoji",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Crossword tile race: a word game engine where each player builds a crossword from a bag of letter tiles, in English or Japanese kana, alone against the clock or at a table of two to eight. Seeded deals, word checking, wild tiles, a computer player, and a playable table for React, Vue, Svelte, Angular or plain HTML. Zero dependencies.",
   "keywords": [
     "word-game",
+    "custom-element",
+    "web-component",
     "word-puzzle",
     "crossword",
     "crossword-game",
@@ -102,6 +104,14 @@
     "./react": {
       "types": "./dist/react.d.ts",
       "default": "./dist/react.js"
+    },
+    "./element": {
+      "types": "./dist/element.d.ts",
+      "default": "./dist/element.js"
+    },
+    "./element/define": {
+      "types": "./dist/element-define.d.ts",
+      "default": "./dist/element-define.js"
     }
   },
   "files": [
@@ -114,10 +124,11 @@
   ],
   "sideEffects": [
     "./dist/words.js",
-    "./dist/tileWordsModule.js"
+    "./dist/tileWordsModule.js",
+    "./dist/element-define.js"
   ],
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
@@ -129,6 +140,7 @@
     "test:frameworks": "pnpm build && node scripts/check-frameworks.mjs",
     "check": "pnpm lint && pnpm typecheck && pnpm test",
     "site": "pnpm build && node scripts/site.mjs",
+    "pictures": "pnpm site && node scripts/readme-pictures.mjs",
     "docs:make": "node scripts/docs.mjs",
     "prepublishOnly": "pnpm check && pnpm build"
   },