@johnmorrisdotca/kumimoji 1.3.0 → 1.4.0

package/dist/element.js

@@ -1,23 +1,12 @@
-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_options, _KumimojiTable_revision, _KumimojiTable_widthBefore, _KumimojiTable_widthOwned, _KumimojiTable_labelBefore, _KumimojiTable_write, _KumimojiTable_frame, _KumimojiTable_refresh;
-import { embedDay } from "./embed-day.js";
-import { KUMIMOJI_STYLE } from "./ui/style.js";
 import { kumimojiDailySeed } from "./daily.js";
+import { embedDay } from "./embed-day.js";
 import { KUMIMOJI_HANDS } from "./tiles.constants.js";
+import { isCloth } from "./ui/cloth.js";
 import { mountKumimoji } from "./ui/mount.js";
+import { KUMIMOJI_STYLE } from "./ui/style.js";
 const ElementBase = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
-const oneOf = (value, allowed) => (allowed.includes(value) ? value : undefined);
+const oneOf = (value, allowed) => allowed.includes(value) ? value : undefined;
 const isOn = (value, fallback = false) => value === null ? fallback : !["false", "off", "no", "0"].includes(value.trim().toLowerCase());
 const HANDS = Object.values(KUMIMOJI_HANDS);
 /**
@@ -53,7 +42,24 @@ const HANDS = Object.values(KUMIMOJI_HANDS);
  * console.log(KUMIMOJI_EMBED_OPTION_KEYS.includes("saved"));
  * ```
  */
-export const KUMIMOJI_EMBED_OPTION_KEYS = Object.keys({ language: true, hand: true, level: true, gameLength: true, diagonals: true, seed: true, onFinish: true, onChange: true, locale: true, strings: true, theme: true, keep: true, controls: true, saved: true, onError: true });
+export const KUMIMOJI_EMBED_OPTION_KEYS = Object.keys({
+    language: true,
+    hand: true,
+    level: true,
+    gameLength: true,
+    diagonals: true,
+    seed: true,
+    onFinish: true,
+    onChange: true,
+    locale: true,
+    strings: true,
+    theme: true,
+    cloth: true,
+    keep: true,
+    controls: true,
+    saved: true,
+    onError: true,
+});
 /**
  * A reflected crossword table with the native table handle and saved-state getter.
  * @example
@@ -63,187 +69,349 @@ export const KUMIMOJI_EMBED_OPTION_KEYS = Object.keys({ language: true, hand: tr
  * ```
  */
 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);
-        _KumimojiTable_options.set(this, {});
-        _KumimojiTable_revision.set(this, 0);
-        _KumimojiTable_widthBefore.set(this, null);
-        _KumimojiTable_widthOwned.set(this, false);
-        _KumimojiTable_labelBefore.set(this, null);
-    }
+    static observedAttributes = [
+        "language",
+        "hand",
+        "level",
+        "length",
+        "diagonals",
+        "seed",
+        "lang",
+        "keep",
+        "daily",
+        "controls",
+        "theme",
+        "size",
+        "width",
+        "label",
+        "cloth",
+    ];
+    #table = null;
+    #key = "";
+    #queued = false;
+    #seed = null;
+    #options = {};
+    #revision = 0;
+    #widthBefore = null;
+    #widthOwned = false;
+    #labelBefore = null;
     /** Native host options. Callback/presentation changes preserve the current game. */
-    get options() { return __classPrivateFieldGet(this, _KumimojiTable_options, "f"); }
-    set options(value) { __classPrivateFieldSet(this, _KumimojiTable_options, value ?? {}, "f"); if (this.isConnected)
-        __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_refresh).call(this); }
+    get options() {
+        return this.#options;
+    }
+    set options(value) {
+        this.#options = value ?? {};
+        if (this.isConnected)
+            this.#refresh();
+    }
+    #write(name, value) {
+        if (value === null || value === undefined)
+            this.removeAttribute(name);
+        else
+            this.setAttribute(name, String(value));
+    }
     connectedCallback() {
-        __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_refresh).call(this);
+        this.#refresh();
     }
     disconnectedCallback() {
-        var _a;
-        __classPrivateFieldSet(this, _KumimojiTable_revision, (_a = __classPrivateFieldGet(this, _KumimojiTable_revision, "f"), ++_a), "f");
-        __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.destroy();
-        __classPrivateFieldSet(this, _KumimojiTable_table, null, "f");
-        __classPrivateFieldSet(this, _KumimojiTable_key, "", "f");
+        ++this.#revision;
+        this.#table?.destroy();
+        this.#table = null;
+        this.#key = "";
     }
     attributeChangedCallback() {
-        if (!this.isConnected || __classPrivateFieldGet(this, _KumimojiTable_queued, "f"))
+        if (!this.isConnected || this.#queued)
             return;
-        __classPrivateFieldSet(this, _KumimojiTable_queued, true, "f");
+        this.#queued = true;
         queueMicrotask(() => {
-            __classPrivateFieldSet(this, _KumimojiTable_queued, false, "f");
+            this.#queued = false;
             if (this.isConnected)
-                __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_refresh).call(this);
+                this.#refresh();
         });
     }
     /** 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");
+        return this.#table;
     }
     /** 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;
+        return this.#table?.saved() ?? null;
     }
     /** A new game at the same table: see `KumimojiTableHandle.newGame`. */
     newGame(options) {
-        return __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.newGame(options) ?? Promise.resolve();
+        return this.#table?.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();
+        return this.#table?.setGame(saved) ?? Promise.resolve();
     }
     /** The `language` attribute, reflected. */
-    get language() { return this.getAttribute("language"); }
-    set language(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "language", value); }
+    get language() {
+        return this.getAttribute("language");
+    }
+    set language(value) {
+        this.#write("language", value);
+    }
     /** The `hand` attribute, reflected. */
-    get hand() { return this.getAttribute("hand"); }
-    set hand(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "hand", value); }
+    get hand() {
+        return this.getAttribute("hand");
+    }
+    set hand(value) {
+        this.#write("hand", value);
+    }
     /** The `level` attribute, reflected. */
-    get level() { return this.getAttribute("level"); }
-    set level(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "level", value); }
+    get level() {
+        return this.getAttribute("level");
+    }
+    set level(value) {
+        this.#write("level", value);
+    }
     /** The `length` attribute, reflected. */
-    get length() { return this.getAttribute("length"); }
-    set length(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "length", value); }
+    get length() {
+        return this.getAttribute("length");
+    }
+    set length(value) {
+        this.#write("length", value);
+    }
     /** The `diagonals` attribute, reflected. */
-    get diagonals() { return this.getAttribute("diagonals"); }
-    set diagonals(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "diagonals", value); }
+    get diagonals() {
+        return this.getAttribute("diagonals");
+    }
+    set diagonals(value) {
+        this.#write("diagonals", value);
+    }
     /** The `seed` attribute, reflected. */
-    get seed() { return this.getAttribute("seed"); }
-    set seed(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "seed", value); }
+    get seed() {
+        return this.getAttribute("seed");
+    }
+    set seed(value) {
+        this.#write("seed", value);
+    }
     /** The `keep` attribute, reflected. */
-    get keep() { return this.getAttribute("keep"); }
-    set keep(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "keep", value); }
+    get keep() {
+        return this.getAttribute("keep");
+    }
+    set keep(value) {
+        this.#write("keep", value);
+    }
     /** The `daily` attribute, reflected. */
-    get daily() { return this.getAttribute("daily"); }
-    set daily(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "daily", value); }
+    get daily() {
+        return this.getAttribute("daily");
+    }
+    set daily(value) {
+        this.#write("daily", value);
+    }
     /** The `controls` attribute, reflected. */
-    get controls() { return this.getAttribute("controls"); }
-    set controls(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "controls", value); }
+    get controls() {
+        return this.getAttribute("controls");
+    }
+    set controls(value) {
+        this.#write("controls", value);
+    }
+    /** The `cloth` attribute, reflected: green, blue, red, black or wood. */
+    get cloth() {
+        return this.getAttribute("cloth");
+    }
+    set cloth(value) {
+        this.#write("cloth", value);
+    }
     /** The `theme` attribute, reflected. */
-    get theme() { return this.getAttribute("theme"); }
-    set theme(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "theme", value); }
+    get theme() {
+        return this.getAttribute("theme");
+    }
+    set theme(value) {
+        this.#write("theme", value);
+    }
     /** The `size` attribute, reflected. */
-    get size() { return this.getAttribute("size"); }
-    set size(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "size", value); }
+    get size() {
+        return this.getAttribute("size");
+    }
+    set size(value) {
+        this.#write("size", value);
+    }
     /** The `width` attribute, reflected. */
-    get width() { return this.getAttribute("width"); }
-    set width(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "width", value); }
+    get width() {
+        return this.getAttribute("width");
+    }
+    set width(value) {
+        this.#write("width", value);
+    }
     /** The `label` attribute, reflected. */
-    get label() { return this.getAttribute("label"); }
-    set label(value) { __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_write).call(this, "label", value); }
-}
-_KumimojiTable_table = new WeakMap(), _KumimojiTable_key = new WeakMap(), _KumimojiTable_queued = new WeakMap(), _KumimojiTable_seed = new WeakMap(), _KumimojiTable_options = new WeakMap(), _KumimojiTable_revision = new WeakMap(), _KumimojiTable_widthBefore = new WeakMap(), _KumimojiTable_widthOwned = new WeakMap(), _KumimojiTable_labelBefore = new WeakMap(), _KumimojiTable_instances = new WeakSet(), _KumimojiTable_write = function _KumimojiTable_write(name, value) { if (value === null || value === undefined)
-    this.removeAttribute(name);
-else
-    this.setAttribute(name, String(value)); }, _KumimojiTable_frame = function _KumimojiTable_frame() {
-    this.style.display = "block";
-    this.style.maxWidth = "100%";
-    const width = Number(this.getAttribute("width")), size = this.getAttribute("size");
-    const pixels = this.hasAttribute("width") && width > 0 && Number.isFinite(width) ? Math.min(width, 2000) : size === "small" ? 320 : size === "medium" ? 480 : size === "large" ? 640 : null;
-    if (pixels !== null) {
-        if (!__classPrivateFieldGet(this, _KumimojiTable_widthOwned, "f"))
-            __classPrivateFieldSet(this, _KumimojiTable_widthBefore, this.style.width, "f");
-        __classPrivateFieldSet(this, _KumimojiTable_widthOwned, true, "f");
-        this.style.width = `${pixels}px`;
-    }
-    else if (__classPrivateFieldGet(this, _KumimojiTable_widthOwned, "f")) {
-        this.style.width = __classPrivateFieldGet(this, _KumimojiTable_widthBefore, "f") ?? "";
-        __classPrivateFieldSet(this, _KumimojiTable_widthOwned, false, "f");
-    }
-    const theme = this.getAttribute("theme");
-    this.style.colorScheme = theme === "light" || theme === "dark" ? theme : "light dark";
-    this.setAttribute("data-kumimoji-embed", "");
-    const root = this.getRootNode(), target = typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot ? root : this.ownerDocument.head;
-    if (target.querySelector("style[data-kumimoji-embed-style]") === null) {
-        const style = this.ownerDocument.createElement("style");
-        style.setAttribute("data-kumimoji-embed-style", "");
-        const light = KUMIMOJI_STYLE.match(/\.km-root \{([^}]+)\}/)?.[1] ?? "";
-        const dark = KUMIMOJI_STYLE.match(/@media \(prefers-color-scheme: dark\) \{\s*\.km-root \{([^}]+)\}/)?.[1] ?? "";
-        style.textContent = `[data-kumimoji-embed][theme="light"] .km-root{${light}}[data-kumimoji-embed][theme="dark"] .km-root{${dark}}[data-kumimoji-embed]>.km-root{background:var(--km-panel);padding:12px;border-radius:12px}[data-kumimoji-embed] .km-controls[hidden]{display:none}`;
-        target.append(style);
-    }
-    if (this.hasAttribute("label")) {
-        __classPrivateFieldSet(this, _KumimojiTable_labelBefore, __classPrivateFieldGet(this, _KumimojiTable_labelBefore, "f") ?? { role: this.getAttribute("role"), label: this.getAttribute("aria-label") }, "f");
-        this.setAttribute("role", "group");
-        this.setAttribute("aria-label", this.getAttribute("label"));
-    }
-    else if (__classPrivateFieldGet(this, _KumimojiTable_labelBefore, "f") !== null) {
-        for (const [name, value] of [["role", __classPrivateFieldGet(this, _KumimojiTable_labelBefore, "f").role], ["aria-label", __classPrivateFieldGet(this, _KumimojiTable_labelBefore, "f").label]]) {
-            if (value === null)
-                this.removeAttribute(name);
-            else
-                this.setAttribute(name, value);
+    get label() {
+        return this.getAttribute("label");
+    }
+    set label(value) {
+        this.#write("label", value);
+    }
+    #frame() {
+        this.style.display = "block";
+        this.style.maxWidth = "100%";
+        const width = Number(this.getAttribute("width"));
+        const size = this.getAttribute("size");
+        const pixels = this.hasAttribute("width") && width > 0 && Number.isFinite(width)
+            ? Math.min(width, 2000)
+            : size === "small"
+                ? 320
+                : size === "medium"
+                    ? 480
+                    : size === "large"
+                        ? 640
+                        : null;
+        if (pixels !== null) {
+            if (!this.#widthOwned)
+                this.#widthBefore = this.style.width;
+            this.#widthOwned = true;
+            this.style.width = `${pixels}px`;
         }
-        __classPrivateFieldSet(this, _KumimojiTable_labelBefore, null, "f");
-    }
-}, _KumimojiTable_refresh = function _KumimojiTable_refresh() {
-    var _a;
-    __classPrivateFieldGet(this, _KumimojiTable_instances, "m", _KumimojiTable_frame).call(this);
-    try {
-        const language = oneOf(this.getAttribute("language"), ["english", "japanese"]) ?? __classPrivateFieldGet(this, _KumimojiTable_options, "f").language;
-        const hand = this.hasAttribute("hand") ? Number(this.getAttribute("hand")) : __classPrivateFieldGet(this, _KumimojiTable_options, "f").hand;
-        const level = oneOf(this.getAttribute("level"), ["easy", "medium", "hard"]) ?? __classPrivateFieldGet(this, _KumimojiTable_options, "f").level;
-        const gameLength = oneOf(this.getAttribute("length"), ["short", "medium", "full"]) ?? __classPrivateFieldGet(this, _KumimojiTable_options, "f").gameLength;
-        const diagonals = isOn(this.getAttribute("diagonals"), __classPrivateFieldGet(this, _KumimojiTable_options, "f").diagonals ?? false);
-        const seedAttribute = this.getAttribute("seed"), asked = Number(seedAttribute);
-        const day = embedDay(this.hasAttribute("daily") ? this.getAttribute("daily") : seedAttribute === "daily" ? "today" : null);
-        const seed = day !== null ? kumimojiDailySeed(new Date(`${day}T00:00:00Z`)) : seedAttribute !== null && Number.isInteger(asked) && asked >= 0 && asked <= 0xffffffff ? asked : __classPrivateFieldGet(this, _KumimojiTable_options, "f").seed ?? (__classPrivateFieldSet(this, _KumimojiTable_seed, __classPrivateFieldGet(this, _KumimojiTable_seed, "f") ?? Math.floor(Math.random() * 2 ** 31), "f"));
-        const lang = this.getAttribute("lang"), locale = lang === "en" || lang === "ja" ? lang : __classPrivateFieldGet(this, _KumimojiTable_options, "f").locale ?? (this.ownerDocument.documentElement.lang.toLowerCase().startsWith("ja") ? "ja" : "en");
-        const keep = isOn(this.getAttribute("keep"), __classPrivateFieldGet(this, _KumimojiTable_options, "f").keep ?? true), controls = isOn(this.getAttribute("controls"), __classPrivateFieldGet(this, _KumimojiTable_options, "f").controls ?? true);
-        const key = JSON.stringify([language, hand, level, gameLength, diagonals, seed, day, __classPrivateFieldGet(this, _KumimojiTable_options, "f").saved]);
-        if (key === __classPrivateFieldGet(this, _KumimojiTable_key, "f") && __classPrivateFieldGet(this, _KumimojiTable_table, "f") !== null) {
-            __classPrivateFieldGet(this, _KumimojiTable_table, "f").set({ locale, strings: __classPrivateFieldGet(this, _KumimojiTable_options, "f").strings, theme: __classPrivateFieldGet(this, _KumimojiTable_options, "f").theme ?? {}, keep, controls });
-            return;
+        else if (this.#widthOwned) {
+            this.style.width = this.#widthBefore ?? "";
+            this.#widthOwned = false;
+        }
+        const theme = this.getAttribute("theme");
+        this.style.colorScheme = theme === "light" || theme === "dark" ? theme : "light dark";
+        this.setAttribute("data-kumimoji-embed", "");
+        const root = this.getRootNode();
+        const target = typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot ? root : this.ownerDocument.head;
+        if (target.querySelector("style[data-kumimoji-embed-style]") === null) {
+            const style = this.ownerDocument.createElement("style");
+            style.setAttribute("data-kumimoji-embed-style", "");
+            const light = KUMIMOJI_STYLE.match(/\.km-root \{([^}]+)\}/)?.[1] ?? "";
+            const dark = KUMIMOJI_STYLE.match(/@media \(prefers-color-scheme: dark\) \{\s*\.km-root \{([^}]+)\}/)?.[1] ?? "";
+            style.textContent = `[data-kumimoji-embed][theme="light"] .km-root{${light}}[data-kumimoji-embed][theme="dark"] .km-root{${dark}}[data-kumimoji-embed]>.km-root{background:var(--km-panel);padding:12px;border-radius:12px}[data-kumimoji-embed] .km-controls[hidden]{display:none}`;
+            target.append(style);
+        }
+        if (this.hasAttribute("label")) {
+            this.#labelBefore ??= { role: this.getAttribute("role"), label: this.getAttribute("aria-label") };
+            this.setAttribute("role", "group");
+            this.setAttribute("aria-label", this.getAttribute("label"));
+        }
+        else if (this.#labelBefore !== null) {
+            for (const [name, value] of [
+                ["role", this.#labelBefore.role],
+                ["aria-label", this.#labelBefore.label],
+            ]) {
+                if (value === null)
+                    this.removeAttribute(name);
+                else
+                    this.setAttribute(name, value);
+            }
+            this.#labelBefore = null;
+        }
+    }
+    #refresh() {
+        this.#frame();
+        try {
+            const language = oneOf(this.getAttribute("language"), ["english", "japanese"]) ?? this.#options.language;
+            const hand = this.hasAttribute("hand") ? Number(this.getAttribute("hand")) : this.#options.hand;
+            const level = oneOf(this.getAttribute("level"), ["easy", "medium", "hard"]) ?? this.#options.level;
+            const gameLength = oneOf(this.getAttribute("length"), ["short", "medium", "full"]) ?? this.#options.gameLength;
+            const diagonals = isOn(this.getAttribute("diagonals"), this.#options.diagonals ?? false);
+            const seedAttribute = this.getAttribute("seed");
+            const asked = Number(seedAttribute);
+            const day = embedDay(this.hasAttribute("daily") ? this.getAttribute("daily") : seedAttribute === "daily" ? "today" : null);
+            let seed;
+            if (day !== null)
+                seed = kumimojiDailySeed(new Date(`${day}T00:00:00Z`));
+            else if (seedAttribute !== null && Number.isInteger(asked) && asked >= 0 && asked <= 0xffffffff)
+                seed = asked;
+            else if (this.#options.seed !== undefined && this.#options.seed !== null)
+                seed = this.#options.seed;
+            else {
+                let held = this.#seed;
+                if (held === null) {
+                    held = Math.floor(Math.random() * 2 ** 31);
+                    this.#seed = held;
+                }
+                seed = held;
+            }
+            const lang = this.getAttribute("lang");
+            const locale = lang === "en" || lang === "ja"
+                ? lang
+                : (this.#options.locale ??
+                    (this.ownerDocument.documentElement.lang.toLowerCase().startsWith("ja") ? "ja" : "en"));
+            const cloth = isCloth(this.getAttribute("cloth")) ? this.getAttribute("cloth") : this.#options.cloth;
+            const keep = isOn(this.getAttribute("keep"), this.#options.keep ?? true);
+            const controls = isOn(this.getAttribute("controls"), this.#options.controls ?? true);
+            const key = JSON.stringify([language, hand, level, gameLength, diagonals, seed, day, this.#options.saved]);
+            if (key === this.#key && this.#table !== null) {
+                this.#table.set({
+                    locale,
+                    strings: this.#options.strings,
+                    cloth,
+                    theme: this.#options.theme ?? {},
+                    keep,
+                    controls,
+                });
+                return;
+            }
+            if (hand !== undefined && !HANDS.includes(hand))
+                throw new RangeError("Choose a hand of 3, 7 or 11 tiles.");
+            this.#table?.destroy();
+            this.#table = null;
+            this.#key = "";
+            this.replaceChildren();
+            const revision = ++this.#revision;
+            const table = mountKumimoji(this, {
+                ...this.#options,
+                language,
+                hand,
+                level,
+                gameLength,
+                diagonals,
+                seed,
+                locale,
+                cloth,
+                keep,
+                controls,
+                onChange: (saved) => {
+                    this.dispatchEvent(new CustomEvent("kumimoji-change", {
+                        detail: JSON.parse(JSON.stringify({ saved })),
+                        bubbles: true,
+                        composed: true,
+                    }));
+                    this.#options.onChange?.(saved);
+                },
+                onFinish: (result) => {
+                    this.dispatchEvent(new CustomEvent("kumimoji-finish", {
+                        detail: JSON.parse(JSON.stringify(result)),
+                        bubbles: true,
+                        composed: true,
+                    }));
+                    this.#options.onFinish?.(result);
+                },
+                onError: (error) => {
+                    this.dispatchEvent(new CustomEvent("kumimoji-error", { detail: { message: error.message }, bubbles: true, composed: true }));
+                    this.#options.onError?.(error);
+                },
+            });
+            this.#table = table;
+            this.#key = key;
+            void table.ready
+                .then(() => {
+                if (this.isConnected && revision === this.#revision && table.saved() !== null)
+                    this.dispatchEvent(new CustomEvent("kumimoji-load", {
+                        bubbles: true,
+                        composed: true,
+                        detail: { seed: table.saved().deal.seed, day },
+                    }));
+            })
+                .catch(() => {
+                /* The native ready error handler reports the load failure. */
+            });
+        }
+        catch (error) {
+            this.#table?.destroy();
+            this.#table = null;
+            this.#key = "";
+            const message = error instanceof Error ? error.message : String(error);
+            const status = this.ownerDocument.createElement("p");
+            status.setAttribute("role", "status");
+            status.textContent = message;
+            this.replaceChildren(status);
+            this.dispatchEvent(new CustomEvent("kumimoji-error", { detail: { message }, bubbles: true, composed: true }));
         }
-        if (hand !== undefined && !HANDS.includes(hand))
-            throw new RangeError("Choose a hand of 3, 7 or 11 tiles.");
-        __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.destroy();
-        __classPrivateFieldSet(this, _KumimojiTable_table, null, "f");
-        __classPrivateFieldSet(this, _KumimojiTable_key, "", "f");
-        this.replaceChildren();
-        const revision = __classPrivateFieldSet(this, _KumimojiTable_revision, (_a = __classPrivateFieldGet(this, _KumimojiTable_revision, "f"), ++_a), "f");
-        const table = mountKumimoji(this, { ...__classPrivateFieldGet(this, _KumimojiTable_options, "f"), language, hand, level, gameLength, diagonals, seed, locale, keep, controls, onChange: saved => { this.dispatchEvent(new CustomEvent("kumimoji-change", { detail: JSON.parse(JSON.stringify({ saved })), bubbles: true, composed: true })); __classPrivateFieldGet(this, _KumimojiTable_options, "f").onChange?.(saved); }, onFinish: result => { this.dispatchEvent(new CustomEvent("kumimoji-finish", { detail: JSON.parse(JSON.stringify(result)), bubbles: true, composed: true })); __classPrivateFieldGet(this, _KumimojiTable_options, "f").onFinish?.(result); }, onError: error => { this.dispatchEvent(new CustomEvent("kumimoji-error", { detail: { message: error.message }, bubbles: true, composed: true })); __classPrivateFieldGet(this, _KumimojiTable_options, "f").onError?.(error); } });
-        __classPrivateFieldSet(this, _KumimojiTable_table, table, "f");
-        __classPrivateFieldSet(this, _KumimojiTable_key, key, "f");
-        void table.ready.then(() => { if (this.isConnected && revision === __classPrivateFieldGet(this, _KumimojiTable_revision, "f") && table.saved() !== null)
-            this.dispatchEvent(new CustomEvent("kumimoji-load", { bubbles: true, composed: true, detail: { seed: table.saved().deal.seed, day } })); }).catch(() => { });
-    }
-    catch (error) {
-        __classPrivateFieldGet(this, _KumimojiTable_table, "f")?.destroy();
-        __classPrivateFieldSet(this, _KumimojiTable_table, null, "f");
-        __classPrivateFieldSet(this, _KumimojiTable_key, "", "f");
-        const message = error instanceof Error ? error.message : String(error), status = this.ownerDocument.createElement("p");
-        status.setAttribute("role", "status");
-        status.textContent = message;
-        this.replaceChildren(status);
-        this.dispatchEvent(new CustomEvent("kumimoji-error", { detail: { message }, bubbles: true, composed: true }));
-    }
-};
-KumimojiTable.observedAttributes = ["language", "hand", "level", "length", "diagonals", "seed", "lang", "keep", "daily", "controls", "theme", "size", "width", "label"];
+    }
+}
 /**
  * Defines the table or a subclass under a custom tag. Server-safe and idempotent.
  * @param tagName - The tag name; kumimoji-table by default.
@@ -256,6 +424,8 @@ KumimojiTable.observedAttributes = ["language", "hand", "level", "length", "diag
  * console.log(typeof defineTable);
  * ```
  */
-export function defineTable(tagName = "kumimoji-table", registry = typeof customElements === "undefined" ? undefined : customElements) { if (registry !== undefined && registry.get(tagName) === undefined)
-    registry.define(tagName, tagName === "kumimoji-table" ? KumimojiTable : class extends KumimojiTable {
-    }); }
+export function defineTable(tagName = "kumimoji-table", registry = typeof customElements === "undefined" ? undefined : customElements) {
+    if (registry !== undefined && registry.get(tagName) === undefined)
+        registry.define(tagName, tagName === "kumimoji-table" ? KumimojiTable : class extends KumimojiTable {
+        });
+}

package/dist/export.js

@@ -1,5 +1,5 @@
-import { boundsOf, squareAt } from "./grid.js";
 import { generateKumimoji } from "./generate.js";
+import { boundsOf, squareAt } from "./grid.js";
 import { judgeWithWords } from "./judge.js";
 import { decodeTileProgress, encodeTileProgress, isFinished, tilesLeft } from "./play.js";
 import { KUMIMOJI_STRINGS, kumimojiSay } from "./strings.js";
@@ -145,7 +145,12 @@ export async function kumimojiFromJSON(text) {
     await loadTileWords(language);
     let deal;
     try {
-        deal = generateKumimoji(size, level, seed, { language, gameLength: gameLength, doubleSet, diagonals });
+        deal = generateKumimoji(size, level, seed, {
+            language,
+            gameLength: gameLength,
+            doubleSet,
+            diagonals,
+        });
     }
     catch {
         return null;
@@ -231,13 +236,21 @@ export function gridToText(tiles, language = "english") {
 export function kumimojiToText(saved, strings = KUMIMOJI_STRINGS.en) {
     const { deal, play } = saved;
     const words = tileWords(deal.language);
-    const face = (tile) => (tileFace(tile).blank ? "*" : deal.language === "japanese" ? words.glyphOf(tile) : words.glyphOf(tile).toUpperCase());
-    const lines = [kumimojiSay(strings.textTitle, { language: deal.language === "japanese" ? strings.japanese : strings.english, hand: deal.size, seed: deal.seed })];
+    const face = (tile) => tileFace(tile).blank ? "*" : deal.language === "japanese" ? words.glyphOf(tile) : words.glyphOf(tile).toUpperCase();
+    const lines = [
+        kumimojiSay(strings.textTitle, {
+            language: deal.language === "japanese" ? strings.japanese : strings.english,
+            hand: deal.size,
+            seed: deal.seed,
+        }),
+    ];
     lines.push(play.tiles.size === 0 ? strings.textEmpty : gridToText(play.tiles, deal.language));
     if (isFinished(play, judgeWithWords(play.tiles, words, { diagonals: deal.diagonals === true })))
         lines.push(strings.textFinished);
     else {
-        lines.push(play.hand.length === 0 ? strings.textHandEmpty : kumimojiSay(strings.textHand, { tiles: play.hand.map(face).join(" ") }));
+        lines.push(play.hand.length === 0
+            ? strings.textHandEmpty
+            : kumimojiSay(strings.textHand, { tiles: play.hand.map(face).join(" ") }));
         lines.push(kumimojiSay(strings.textLeft, { n: tilesLeft(play) }));
     }
     lines.push(kumimojiSay(strings.textTime, { time: kumimojiClock(saved.elapsedMs) }));