@johnmorrisdotca/kumimoji 1.0.1 → 1.1.0

package/dist/ui/style.js

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

package/dist/ui.d.ts

@@ -6,3 +6,4 @@
 export { mountKumimoji, type KumimojiTableHandle, type KumimojiTableOptions } from "./ui/mount.ts";
 export { BOARD_LEAST, BOARD_MARGIN, boardModel, type BoardModel, type BoardSquare, type TileMark } from "./ui/board.ts";
 export { KUMIMOJI_STYLE } from "./ui/style.ts";
+export { KUMIMOJI_STRINGS, kumimojiSay, kumimojiStrings, type KumimojiLocale, type KumimojiStrings } from "./strings.ts";

package/dist/ui.js

@@ -6,3 +6,4 @@
 export { mountKumimoji } from "./ui/mount.js";
 export { BOARD_LEAST, BOARD_MARGIN, boardModel } from "./ui/board.js";
 export { KUMIMOJI_STYLE } from "./ui/style.js";
+export { KUMIMOJI_STRINGS, kumimojiSay, kumimojiStrings } from "./strings.js";

package/dist/version.d.ts

@@ -0,0 +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";

package/dist/version.js

@@ -0,0 +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";

package/package.json

@@ -1,36 +1,91 @@
 {
   "name": "@johnmorrisdotca/kumimoji",
-  "version": "1.0.1",
-  "description": "Kumimoji 組み文字: the race to build a crossword from a bag of letter tiles, in English or Japanese, alone or at a table of two to eight. Seeded deals, word checking, wild tiles, trades, a computer player, a plain-DOM table and React views.",
-  "license": "MIT",
-  "author": "John Morris <john@johnmorris.ca>",
-  "homepage": "https://johnmorrisdotca.github.io/kumimoji/",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/johnmorrisdotca/kumimoji.git"
-  },
-  "bugs": {
-    "url": "https://github.com/johnmorrisdotca/kumimoji/issues"
-  },
-  "type": "module",
-  "sideEffects": [
-    "./dist/words.js",
-    "./dist/tileWordsModule.js"
-  ],
-  "engines": {
-    "node": ">=20"
-  },
+  "version": "1.1.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",
+    "word-puzzle",
     "crossword",
+    "crossword-game",
+    "crossword-builder",
+    "tile-game",
+    "letter-tiles",
     "tiles",
+    "word-tiles",
     "anagram",
+    "anagrams",
+    "word-race",
+    "spelling",
+    "vocabulary",
+    "dictionary",
+    "word-list",
+    "word-check",
+    "word-validation",
+    "english",
     "japanese",
     "kana",
+    "hiragana",
+    "nihongo",
+    "language-learning",
+    "scowl",
+    "jmdict",
+    "wild-tiles",
+    "blank-tiles",
+    "game",
     "game-engine",
+    "rules-engine",
+    "game-logic",
+    "puzzle",
+    "puzzle-generator",
     "seeded",
-    "react"
+    "deterministic",
+    "prng",
+    "ai",
+    "computer-player",
+    "bot",
+    "multiplayer",
+    "pass-and-play",
+    "hotseat",
+    "party-game",
+    "save-game",
+    "json",
+    "export",
+    "import",
+    "browser-game",
+    "html5-game",
+    "typescript",
+    "javascript",
+    "esm",
+    "react",
+    "react-component",
+    "vue",
+    "svelte",
+    "angular",
+    "vanilla-js",
+    "dom",
+    "i18n",
+    "theming",
+    "dark-mode",
+    "zero-dependencies"
   ],
+  "homepage": "https://johnmorrisdotca.github.io/kumimoji/",
+  "bugs": {
+    "url": "https://github.com/johnmorrisdotca/kumimoji/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/johnmorrisdotca/kumimoji.git"
+  },
+  "license": "MIT AND CC-BY-SA-4.0",
+  "author": {
+    "name": "John Morris",
+    "email": "john@johnmorris.ca",
+    "url": "https://johnmorris.ca"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -57,17 +112,37 @@
     "CHANGELOG.md",
     "CONTRIBUTING.md"
   ],
+  "sideEffects": [
+    "./dist/words.js",
+    "./dist/tileWordsModule.js"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
   "scripts": {
     "build": "tsc -p tsconfig.json",
-    "test": "vitest run",
     "lint": "eslint .",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "check": "pnpm run lint && pnpm run typecheck && pnpm test",
-    "site": "pnpm run build && node scripts/site.mjs",
-    "prepublishOnly": "pnpm run check && pnpm run build"
+    "test": "vitest run",
+    "test:table": "pnpm site && playwright test",
+    "test:package": "pnpm build && node scripts/check-package.mjs",
+    "test:frameworks": "pnpm build && node scripts/check-frameworks.mjs",
+    "check": "pnpm lint && pnpm typecheck && pnpm test",
+    "site": "pnpm build && node scripts/site.mjs",
+    "docs:make": "node scripts/docs.mjs",
+    "prepublishOnly": "pnpm check && pnpm build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
+    "@playwright/test": "^1.63.0",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "eslint": "^9.0.0",
@@ -78,13 +153,8 @@
     "typescript-eslint": "^8.0.0",
     "vitest": "^5.0.0"
   },
-  "peerDependencies": {
-    "react": ">=18"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
+  "publishConfig": {
+    "access": "public"
   },
   "packageManager": "pnpm@10.11.0"
 }