@joystyk/cards-ui 0.0.0 → 0.2.0

package/dist/hand.d.ts

@@ -0,0 +1,100 @@
+import { type Rank, type Suit } from '@joystyk/kit/cards';
+import { type TileFace } from '@joystyk/kit/tiles';
+/** One card in the hand, with what the player may do with it now. */
+export type HandCard = ({
+    readonly tile?: never;
+    readonly id: string;
+    readonly rank: Rank;
+    readonly suit: Suit;
+} | {
+    readonly tile: TileFace;
+    readonly rank?: never;
+    readonly suit?: never;
+}) & {
+    readonly id: string;
+    /** It may be played (or chosen) now. A card that may not is aria-disabled. */
+    readonly playable: boolean;
+    /** Chosen for a multi-card choice (aria-pressed), drawn lifted. */
+    readonly chosen?: boolean;
+    /** Added to the card's name and marked on its face: "just received". */
+    readonly note?: string;
+};
+export type HandMode = 'play' | 'choose';
+export type HandLayout = {
+    /** The hand's name: "Your hand, 13 cards". */
+    readonly label: string;
+    /** In display order. */
+    readonly cards: readonly HandCard[];
+    readonly mode: HandMode;
+};
+export type HandOptions = {
+    /** Reduced motion: chosen cards lift without a transition. */
+    readonly calm: boolean;
+    /** Blue diamonds and green clubs. */
+    readonly fourColor: boolean;
+    readonly numbers?: boolean;
+    readonly draggable?: boolean;
+};
+/** What the hand tells the game. */
+export type HandOut = {
+    readonly _tag: 'Play';
+    readonly id: string;
+} | {
+    readonly _tag: 'Refused';
+    readonly id: string;
+} | {
+    readonly _tag: 'Toggle';
+    readonly id: string;
+} | {
+    readonly _tag: 'Commit';
+};
+export type HandState = {
+    /** The index of the card the Tab stop is on. */
+    readonly focus: number;
+    /** The ids last rendered, to keep the focus on the same card when the hand changes. */
+    readonly ids: readonly string[];
+    /** Focus is inside the hand, so a card that leaves it hands the focus on. */
+    readonly inside: boolean;
+};
+export type HandMsg = {
+    readonly _tag: 'Key';
+    readonly key: string;
+} | {
+    readonly _tag: 'Press';
+    readonly id: string;
+} | {
+    readonly _tag: 'Enter';
+    readonly id: string;
+} | {
+    readonly _tag: 'Leave';
+};
+export declare const EMPTY_HAND: HandLayout;
+export declare const DEFAULT_HAND_OPTIONS: HandOptions;
+export declare const isHandLayout: (value: unknown) => value is HandLayout;
+export declare const isHandOptions: (value: unknown) => value is HandOptions;
+/** A card's accessible name: "Queen of spades", "9 of hearts, just received". */
+export declare const handCardLabel: (card: HandCard) => string;
+export declare const initialHand: (layout: HandLayout) => HandState;
+/** One step of the hand's controller: the new state, outputs, and a card to focus after rendering. */
+export type HandStep = {
+    readonly state: HandState;
+    readonly outs: readonly HandOut[];
+    readonly focus: string | null;
+};
+/**
+ * Brings the state in line with a new hand. The focus stays on the same card if it is still
+ * there, otherwise on the card now at its place; if focus was inside the hand and its card
+ * left, the new card takes the focus.
+ */
+export declare const syncHand: (s: HandState, layout: HandLayout) => HandStep;
+/** The hand's reducer, pure, so its behavior is tested without a DOM. */
+export declare const handStep: (before: HandState, layout: HandLayout, m: HandMsg) => HandStep;
+export declare const CardHand: import("@gyral/core").GyralElementClass<HandState, HandMsg, {
+    readonly layout: HandLayout;
+    readonly options: HandOptions;
+}, HandOut, "Key" | "Enter" | "Press" | "Leave">;
+declare global {
+    interface HTMLElementTagNameMap {
+        'jy-card-hand': InstanceType<typeof CardHand>;
+    }
+}

package/dist/hand.js

@@ -0,0 +1,480 @@
+import { faceStyles } from "./face-styles.js";
+import { cardFace, suitDefs } from "./faces.js";
+import { handStyles } from "./hand-styles.js";
+import { tileFace } from "./tiles.js";
+import { cardName } from "@joystyk/kit/cards";
+import { define, each, focus, intentsOf, outputs, prop } from "@gyral/core";
+import { compiled } from "@gyral/core/compiled";
+import { tileName } from "@joystyk/kit/tiles";
+//#region src/hand.ts
+var _gyral$t0 = {
+	"id": "ak2gvt1npv",
+	"html": "<button type=\"button\"><span></span></button>",
+	"parts": [
+		[
+			4,
+			[0],
+			"class",
+			[
+				"slot ",
+				" ",
+				" ",
+				""
+			]
+		],
+		[
+			3,
+			[0],
+			"data-card"
+		],
+		[
+			3,
+			[0],
+			"draggable"
+		],
+		[
+			3,
+			[0],
+			"tabindex"
+		],
+		[
+			3,
+			[0],
+			"aria-label"
+		],
+		[
+			3,
+			[0],
+			"aria-disabled"
+		],
+		[
+			3,
+			[0],
+			"aria-pressed"
+		],
+		[
+			3,
+			[0],
+			"data-intent"
+		],
+		[
+			4,
+			[0, 0],
+			"class",
+			["cface s-", ""]
+		],
+		[1, [0, 0]]
+	],
+	"segments": [
+		"<button type=\"button\"",
+		{
+			"k": "attr",
+			"name": "class",
+			"strings": [
+				"slot ",
+				" ",
+				" ",
+				""
+			]
+		},
+		{
+			"k": "attr",
+			"name": "data-card"
+		},
+		{
+			"k": "attr",
+			"name": "draggable"
+		},
+		{
+			"k": "attr",
+			"name": "tabindex"
+		},
+		{
+			"k": "attr",
+			"name": "aria-label"
+		},
+		{
+			"k": "attr",
+			"name": "aria-disabled"
+		},
+		{
+			"k": "attr",
+			"name": "aria-pressed"
+		},
+		{
+			"k": "attr",
+			"name": "data-intent"
+		},
+		"><span",
+		{
+			"k": "attr",
+			"name": "class",
+			"strings": ["cface s-", ""]
+		},
+		">",
+		{
+			"k": "child",
+			"in": "span"
+		},
+		"</span></button>"
+	]
+};
+var _gyral$t1 = {
+	"id": "wiy3aoavqm",
+	"html": "<div class=\"h-enter\" data-intent-on=\"focusin\"><div class=\"h-leave\" data-intent-on=\"focusout\"><div role=\"toolbar\" data-intent-on=\"keydown\"></div></div></div>",
+	"parts": [
+		[
+			2,
+			[],
+			0
+		],
+		[
+			3,
+			[0],
+			"data-intent"
+		],
+		[
+			3,
+			[0, 0],
+			"data-intent"
+		],
+		[
+			4,
+			[
+				0,
+				0,
+				0
+			],
+			"class",
+			[
+				"hand ",
+				" n-",
+				" ",
+				" ",
+				" mode-",
+				""
+			]
+		],
+		[
+			3,
+			[
+				0,
+				0,
+				0
+			],
+			"aria-label"
+		],
+		[
+			3,
+			[
+				0,
+				0,
+				0
+			],
+			"data-intent"
+		],
+		[1, [
+			0,
+			0,
+			0
+		]]
+	],
+	"segments": [
+		{ "k": "child" },
+		"<div class=\"h-enter\" data-intent-on=\"focusin\"",
+		{
+			"k": "attr",
+			"name": "data-intent"
+		},
+		"><div class=\"h-leave\" data-intent-on=\"focusout\"",
+		{
+			"k": "attr",
+			"name": "data-intent"
+		},
+		"><div role=\"toolbar\" data-intent-on=\"keydown\"",
+		{
+			"k": "attr",
+			"name": "class",
+			"strings": [
+				"hand ",
+				" n-",
+				" ",
+				" ",
+				" mode-",
+				""
+			]
+		},
+		{
+			"k": "attr",
+			"name": "aria-label"
+		},
+		{
+			"k": "attr",
+			"name": "data-intent"
+		},
+		">",
+		{
+			"k": "child",
+			"in": "div"
+		},
+		"</div></div></div>"
+	]
+};
+var EMPTY_HAND = {
+	label: "Your hand",
+	cards: [],
+	mode: "play"
+};
+var DEFAULT_HAND_OPTIONS = {
+	calm: false,
+	fourColor: false
+};
+var isRecord = (value) => typeof value === "object" && value !== null;
+var isHandLayout = (value) => isRecord(value) && typeof value["label"] === "string" && Array.isArray(value["cards"]) && (value["mode"] === "play" || value["mode"] === "choose");
+var isHandOptions = (value) => isRecord(value) && typeof value["calm"] === "boolean" && typeof value["fourColor"] === "boolean";
+/** A card's accessible name: "Queen of spades", "9 of hearts, just received". */
+var handCardLabel = (card) => card.note === void 0 ? card.tile === void 0 ? cardName(card) : tileName(card.tile) : `${card.tile === void 0 ? cardName(card) : tileName(card.tile)}, ${card.note}`;
+var clamp = (n, max) => Math.max(0, Math.min(max, n));
+var initialHand = (layout) => ({
+	focus: 0,
+	ids: layout.cards.map((c) => c.id),
+	inside: false
+});
+/**
+* Brings the state in line with a new hand. The focus stays on the same card if it is still
+* there, otherwise on the card now at its place; if focus was inside the hand and its card
+* left, the new card takes the focus.
+*/
+var syncHand = (s, layout) => {
+	const ids = layout.cards.map((c) => c.id);
+	if (ids.length === s.ids.length && ids.every((id, k) => id === s.ids[k])) return {
+		state: s,
+		outs: [],
+		focus: null
+	};
+	const was = s.ids[s.focus];
+	const kept = was === void 0 ? -1 : ids.indexOf(was);
+	const index = kept >= 0 ? kept : clamp(s.focus, ids.length - 1);
+	const target = ids[index] ?? null;
+	const refocus = s.inside && kept < 0 && target !== null;
+	return {
+		state: {
+			focus: index,
+			ids,
+			inside: s.inside && target !== null
+		},
+		outs: [],
+		focus: refocus ? target : null
+	};
+};
+var activate = (layout, card, via) => {
+	if (layout.mode === "choose") {
+		if (via === "enter") return [{ _tag: "Commit" }];
+		return card.playable ? [{
+			_tag: "Toggle",
+			id: card.id
+		}] : [{
+			_tag: "Refused",
+			id: card.id
+		}];
+	}
+	return card.playable ? [{
+		_tag: "Play",
+		id: card.id
+	}] : [{
+		_tag: "Refused",
+		id: card.id
+	}];
+};
+/** The hand's reducer, pure, so its behavior is tested without a DOM. */
+var handStep = (before, layout, m) => {
+	const s = syncHand(before, layout).state;
+	const cards = layout.cards;
+	const last = cards.length - 1;
+	switch (m._tag) {
+		case "Key": {
+			const card = cards[s.focus];
+			if (card === void 0) return {
+				state: s,
+				outs: [],
+				focus: null
+			};
+			const moveTo = (index) => {
+				const next = clamp(index, last);
+				return {
+					state: {
+						...s,
+						focus: next,
+						inside: true
+					},
+					outs: [],
+					focus: cards[next].id
+				};
+			};
+			switch (m.key) {
+				case "ArrowLeft": return moveTo(s.focus - 1);
+				case "ArrowRight": return moveTo(s.focus + 1);
+				case "Home": return moveTo(0);
+				case "End": return moveTo(last);
+				case "Enter": return {
+					state: s,
+					outs: activate(layout, card, "enter"),
+					focus: null
+				};
+				case " ": return {
+					state: s,
+					outs: activate(layout, card, "space"),
+					focus: null
+				};
+				default: return {
+					state: s,
+					outs: [],
+					focus: null
+				};
+			}
+		}
+		case "Press": {
+			const index = cards.findIndex((c) => c.id === m.id);
+			const card = cards[index];
+			if (card === void 0) return {
+				state: s,
+				outs: [],
+				focus: null
+			};
+			return {
+				state: {
+					...s,
+					focus: index,
+					inside: true
+				},
+				outs: activate(layout, card, "pointer"),
+				focus: null
+			};
+		}
+		case "Enter": {
+			const index = cards.findIndex((c) => c.id === m.id);
+			return {
+				state: {
+					...s,
+					focus: index >= 0 ? index : s.focus,
+					inside: true
+				},
+				outs: [],
+				focus: null
+			};
+		}
+		case "Leave": return {
+			state: {
+				...s,
+				inside: false
+			},
+			outs: [],
+			focus: null
+		};
+	}
+};
+/** Keys the hand handles; their default actions (scrolling, a button's click) are suppressed. */
+var HAND_KEYS = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End",
+	"Enter",
+	" "
+]);
+var emit = outputs();
+var i = intentsOf();
+var CardButton = (card, v) => compiled(_gyral$t0, [
+	card.chosen === true ? "chosen" : "",
+	card.playable ? "" : "off",
+	card.note === void 0 ? "" : "noted",
+	card.id,
+	v.draggable ? "true" : "false",
+	v.focused ? 0 : -1,
+	handCardLabel(card),
+	card.playable ? null : "true",
+	v.mode === "choose" ? String(card.chosen === true) : null,
+	i.Press,
+	card.suit ?? "tile",
+	card.tile === void 0 ? cardFace(card.rank, card.suit) : tileFace(card.tile, v.numbers)
+]);
+var run = (s, layout, m) => {
+	const step = handStep(s, layout, m);
+	const commands = step.outs.map((out) => emit(out));
+	if (step.focus !== null) commands.push(focus(`[data-card="${step.focus}"]`));
+	return commands.length === 0 ? step.state : [step.state, commands];
+};
+var CardHand = define()("jy-card-hand", {
+	props: {
+		layout: prop.value(isHandLayout, { default: EMPTY_HAND }),
+		options: prop.value(isHandOptions, { default: DEFAULT_HAND_OPTIONS })
+	},
+	init: (p) => initialHand(p.layout),
+	intent: {
+		Key: ({ key, event }) => {
+			if (key === void 0 || !(event instanceof KeyboardEvent) || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return void 0;
+			if (!HAND_KEYS.has(key)) return void 0;
+			event.preventDefault();
+			return {
+				_tag: "Key",
+				key
+			};
+		},
+		Press: ({ event }) => {
+			const id = event.target instanceof Element ? event.target.closest("[data-card]")?.getAttribute("data-card") : null;
+			return typeof id === "string" ? {
+				_tag: "Press",
+				id
+			} : void 0;
+		},
+		Enter: ({ event }) => {
+			const id = event.target instanceof Element ? event.target.closest("[data-card]")?.getAttribute("data-card") : null;
+			return typeof id === "string" ? {
+				_tag: "Enter",
+				id
+			} : void 0;
+		},
+		Leave: ({ event, target }) => {
+			const next = event instanceof FocusEvent ? event.relatedTarget : null;
+			return next instanceof Node && target instanceof Node && target.contains(next) ? void 0 : { _tag: "Leave" };
+		}
+	},
+	update: {
+		Key: (s, m, { props: p }) => run(s, p.layout, m),
+		Press: (s, m, { props: p }) => run(s, p.layout, m),
+		Enter: (s, m, { props: p }) => run(s, p.layout, m),
+		Leave: (s, m, { props: p }) => run(s, p.layout, m),
+		PropsChanged: (s, { props: p }) => {
+			const step = syncHand(s, p.layout);
+			return step.focus === null ? step.state : [step.state, [focus(`[data-card="${step.focus}"]`)]];
+		}
+	},
+	view: (s, _i, { props: p }) => {
+		const { layout, options } = p;
+		const focusIndex = clamp(s.focus, layout.cards.length - 1);
+		return compiled(_gyral$t1, [
+			suitDefs(),
+			i.Enter,
+			i.Leave,
+			layout.cards.some((c) => c.tile !== void 0) ? "tiles" : "",
+			Math.min(layout.cards.length, 32),
+			options.fourColor ? "four" : "",
+			options.calm ? "calm" : "",
+			layout.mode,
+			layout.label,
+			i.Key,
+			each(layout.cards, (card) => card.id, CardButton, (card) => ({
+				focused: layout.cards[focusIndex]?.id === card.id,
+				mode: layout.mode,
+				calm: options.calm,
+				numbers: options.numbers === true,
+				draggable: options.draggable === true
+			}))
+		]);
+	},
+	styles: [faceStyles, handStyles]
+});
+//#endregion
+export { CardHand, DEFAULT_HAND_OPTIONS, EMPTY_HAND, handCardLabel, handStep, initialHand, isHandLayout, isHandOptions, syncHand };
+
+//# sourceMappingURL=hand.js.map

package/dist/hand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hand.js","names":["_gyral$compiled"],"sources":["../src/hand.ts"],"sourcesContent":["import type { ChildValue } from '@gyral/core';\n// <jy-card-hand>: the player's own hand in a multiplayer card game (hearts.md, \"Shared needs\"\n// and \"Keyboard and pointer controls\"). The hand is one Tab stop, a toolbar of card buttons\n// with a roving focus: Left and Right move along it, Home and End jump to its ends. Each card\n// is a real <button> named in full (\"Queen of spades\"), never by glyph.\n//\n// Two modes, chosen by the game for the current decision:\n// - `play`: Enter, Space or a tap plays the card. A card that can't be played now is\n//   `aria-disabled`; activating it reports `Refused`, so the game can say why.\n// - `choose`: a multi-card choice such as Hearts' pass. Space or a tap toggles a card\n//   (`aria-pressed`), and Enter reports `Commit`.\n//\n// The hand knows no rules: the game passes the cards with what each may do, and the engine\n// still decides. Other keys bubble to the game, which adds its own (H, T, S…). Cards are\n// fanned and overlap; each keeps at least a 44 px strip, and the fan wraps onto a second row\n// on narrow screens rather than shrink below it. Focus follows the hand when a played card\n// leaves it.\nimport { define, each, focus, html, intentsOf, outputs, prop, type Command } from '@gyral/core';\nimport { cardName, type Rank, type Suit } from '@joystyk/kit/cards';\nimport { cardFace, suitDefs } from './faces.ts';\nimport { tileName, type TileFace } from '@joystyk/kit/tiles';\nimport { tileFace } from './tiles.ts';\nimport { handStyles } from './hand-styles.ts';\nimport { faceStyles } from './face-styles.ts';\n\n/** One card in the hand, with what the player may do with it now. */\nexport type HandCard = (\n  | {\n      readonly tile?: never;\n      readonly id: string;\n      readonly rank: Rank;\n      readonly suit: Suit;\n    }\n  | { readonly tile: TileFace; readonly rank?: never; readonly suit?: never }\n) & {\n  readonly id: string;\n  /** It may be played (or chosen) now. A card that may not is aria-disabled. */\n  readonly playable: boolean;\n  /** Chosen for a multi-card choice (aria-pressed), drawn lifted. */\n  readonly chosen?: boolean;\n  /** Added to the card's name and marked on its face: \"just received\". */\n  readonly note?: string;\n};\n\nexport type HandMode = 'play' | 'choose';\n\nexport type HandLayout = {\n  /** The hand's name: \"Your hand, 13 cards\". */\n  readonly label: string;\n  /** In display order. */\n  readonly cards: readonly HandCard[];\n  readonly mode: HandMode;\n};\n\nexport type HandOptions = {\n  /** Reduced motion: chosen cards lift without a transition. */\n  readonly calm: boolean;\n  /** Blue diamonds and green clubs. */\n  readonly fourColor: boolean;\n  readonly numbers?: boolean;\n  readonly draggable?: boolean;\n};\n\n/** What the hand tells the game. */\nexport type HandOut =\n  | { readonly _tag: 'Play'; readonly id: string }\n  | { readonly _tag: 'Refused'; readonly id: string }\n  | { readonly _tag: 'Toggle'; readonly id: string }\n  | { readonly _tag: 'Commit' };\n\nexport type HandState = {\n  /** The index of the card the Tab stop is on. */\n  readonly focus: number;\n  /** The ids last rendered, to keep the focus on the same card when the hand changes. */\n  readonly ids: readonly string[];\n  /** Focus is inside the hand, so a card that leaves it hands the focus on. */\n  readonly inside: boolean;\n};\n\nexport type HandMsg =\n  | { readonly _tag: 'Key'; readonly key: string }\n  | { readonly _tag: 'Press'; readonly id: string }\n  | { readonly _tag: 'Enter'; readonly id: string }\n  | { readonly _tag: 'Leave' };\n\nexport const EMPTY_HAND: HandLayout = { label: 'Your hand', cards: [], mode: 'play' };\nexport const DEFAULT_HAND_OPTIONS: HandOptions = { calm: false, fourColor: false };\n\nconst isRecord = (value: unknown): value is Record<string, unknown> => typeof value === 'object' && value !== null;\n\nexport const isHandLayout = (value: unknown): value is HandLayout =>\n  isRecord(value) &&\n  typeof value['label'] === 'string' &&\n  Array.isArray(value['cards']) &&\n  (value['mode'] === 'play' || value['mode'] === 'choose');\n\nexport const isHandOptions = (value: unknown): value is HandOptions =>\n  isRecord(value) && typeof value['calm'] === 'boolean' && typeof value['fourColor'] === 'boolean';\n\n/** A card's accessible name: \"Queen of spades\", \"9 of hearts, just received\". */\nexport const handCardLabel = (card: HandCard): string =>\n  card.note === undefined\n    ? card.tile === undefined\n      ? cardName(card)\n      : tileName(card.tile)\n    : `${card.tile === undefined ? cardName(card) : tileName(card.tile)}, ${card.note}`;\n\nconst clamp = (n: number, max: number): number => Math.max(0, Math.min(max, n));\n\nexport const initialHand = (layout: HandLayout): HandState => ({\n  focus: 0,\n  ids: layout.cards.map((c) => c.id),\n  inside: false,\n});\n\n/** One step of the hand's controller: the new state, outputs, and a card to focus after rendering. */\nexport type HandStep = { readonly state: HandState; readonly outs: readonly HandOut[]; readonly focus: string | null };\n\n/**\n * Brings the state in line with a new hand. The focus stays on the same card if it is still\n * there, otherwise on the card now at its place; if focus was inside the hand and its card\n * left, the new card takes the focus.\n */\nexport const syncHand = (s: HandState, layout: HandLayout): HandStep => {\n  const ids = layout.cards.map((c) => c.id);\n  const same = ids.length === s.ids.length && ids.every((id, k) => id === s.ids[k]);\n  if (same) return { state: s, outs: [], focus: null };\n  const was = s.ids[s.focus];\n  const kept = was === undefined ? -1 : ids.indexOf(was);\n  const index = kept >= 0 ? kept : clamp(s.focus, ids.length - 1);\n  const target = ids[index] ?? null;\n  const refocus = s.inside && kept < 0 && target !== null;\n  return {\n    state: { focus: index, ids, inside: s.inside && target !== null },\n    outs: [],\n    focus: refocus ? target : null,\n  };\n};\n\nconst activate = (layout: HandLayout, card: HandCard, via: 'enter' | 'space' | 'pointer'): HandOut[] => {\n  if (layout.mode === 'choose') {\n    if (via === 'enter') return [{ _tag: 'Commit' }];\n    return card.playable ? [{ _tag: 'Toggle', id: card.id }] : [{ _tag: 'Refused', id: card.id }];\n  }\n  return card.playable ? [{ _tag: 'Play', id: card.id }] : [{ _tag: 'Refused', id: card.id }];\n};\n\n/** The hand's reducer, pure, so its behavior is tested without a DOM. */\nexport const handStep = (before: HandState, layout: HandLayout, m: HandMsg): HandStep => {\n  const s = syncHand(before, layout).state;\n  const cards = layout.cards;\n  const last = cards.length - 1;\n  switch (m._tag) {\n    case 'Key': {\n      const card = cards[s.focus];\n      if (card === undefined) return { state: s, outs: [], focus: null };\n      const moveTo = (index: number): HandStep => {\n        const next = clamp(index, last);\n        return { state: { ...s, focus: next, inside: true }, outs: [], focus: cards[next]!.id };\n      };\n      switch (m.key) {\n        case 'ArrowLeft':\n          return moveTo(s.focus - 1);\n        case 'ArrowRight':\n          return moveTo(s.focus + 1);\n        case 'Home':\n          return moveTo(0);\n        case 'End':\n          return moveTo(last);\n        case 'Enter':\n          return { state: s, outs: activate(layout, card, 'enter'), focus: null };\n        case ' ':\n          return { state: s, outs: activate(layout, card, 'space'), focus: null };\n        default:\n          return { state: s, outs: [], focus: null };\n      }\n    }\n    case 'Press': {\n      const index = cards.findIndex((c) => c.id === m.id);\n      const card = cards[index];\n      if (card === undefined) return { state: s, outs: [], focus: null };\n      return { state: { ...s, focus: index, inside: true }, outs: activate(layout, card, 'pointer'), focus: null };\n    }\n    case 'Enter': {\n      const index = cards.findIndex((c) => c.id === m.id);\n      return { state: { ...s, focus: index >= 0 ? index : s.focus, inside: true }, outs: [], focus: null };\n    }\n    case 'Leave':\n      return { state: { ...s, inside: false }, outs: [], focus: null };\n  }\n};\n\n/** Keys the hand handles; their default actions (scrolling, a button's click) are suppressed. */\nconst HAND_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter', ' ']);\n\nconst emit = outputs<HandOut>();\nconst i = intentsOf<typeof CardHand>();\n\ntype CardView = {\n  readonly focused: boolean;\n  readonly mode: HandMode;\n  readonly calm: boolean;\n  readonly numbers: boolean;\n  readonly draggable: boolean;\n};\n\nconst CardButton = (card: HandCard, v: CardView) =>\n  html`<button\n    type=\"button\"\n    class=\"slot ${card.chosen === true ? 'chosen' : ''} ${card.playable ? '' : 'off'} ${card.note === undefined ? '' : 'noted'}\"\n    data-card=${card.id}\n    draggable=${v.draggable ? 'true' : 'false'}\n    tabindex=${v.focused ? 0 : -1}\n    aria-label=${handCardLabel(card)}\n    aria-disabled=${card.playable ? null : 'true'}\n    aria-pressed=${v.mode === 'choose' ? String(card.chosen === true) : null}\n    data-intent=${i.Press}\n  >\n    <span class=\"cface s-${card.suit ?? 'tile'}\">${card.tile === undefined ? cardFace(card.rank, card.suit) : tileFace(card.tile, v.numbers)}</span>\n  </button>`;\n\nconst run = (s: HandState, layout: HandLayout, m: HandMsg): HandState | readonly [HandState, Command<HandMsg>[]] => {\n  const step = handStep(s, layout, m);\n  const commands: Command<HandMsg>[] = step.outs.map((out) => emit(out));\n  if (step.focus !== null) commands.push(focus(`[data-card=\"${step.focus}\"]`));\n  return commands.length === 0 ? step.state : [step.state, commands];\n};\n\nexport const CardHand = define<\n  HandState,\n  HandMsg,\n  { readonly layout: HandLayout; readonly options: HandOptions },\n  HandOut\n>()('jy-card-hand', {\n  props: {\n    layout: prop.value(isHandLayout, { default: EMPTY_HAND }),\n    options: prop.value(isHandOptions, { default: DEFAULT_HAND_OPTIONS }),\n  },\n  init: (p) => initialHand(p.layout),\n  intent: {\n    Key: ({ key, event }) => {\n      if (\n        key === undefined ||\n        !(event instanceof KeyboardEvent) ||\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.shiftKey\n      )\n        return undefined;\n      if (!HAND_KEYS.has(key)) return undefined;\n      event.preventDefault();\n      return { _tag: 'Key', key };\n    },\n    Press: ({ event }) => {\n      const id =\n        event.target instanceof Element ? event.target.closest('[data-card]')?.getAttribute('data-card') : null;\n      return typeof id === 'string' ? { _tag: 'Press', id } : undefined;\n    },\n    Enter: ({ event }) => {\n      const id =\n        event.target instanceof Element ? event.target.closest('[data-card]')?.getAttribute('data-card') : null;\n      return typeof id === 'string' ? { _tag: 'Enter', id } : undefined;\n    },\n    Leave: ({ event, target }) => {\n      const next = event instanceof FocusEvent ? event.relatedTarget : null;\n      return next instanceof Node && target instanceof Node && target.contains(next) ? undefined : { _tag: 'Leave' };\n    },\n  },\n  update: {\n    Key: (s, m, { props: p }) => run(s, p.layout, m),\n    Press: (s, m, { props: p }) => run(s, p.layout, m),\n    Enter: (s, m, { props: p }) => run(s, p.layout, m),\n    Leave: (s, m, { props: p }) => run(s, p.layout, m),\n    PropsChanged: (s, { props: p }) => {\n      const step = syncHand(s, p.layout);\n      return step.focus === null ? step.state : [step.state, [focus(`[data-card=\"${step.focus}\"]`)]];\n    },\n  },\n  view: (s, _i, { props: p }): ChildValue => {\n    const { layout, options } = p;\n    const focusIndex = clamp(s.focus, layout.cards.length - 1);\n    return html`${suitDefs()}\n      <div class=\"h-enter\" data-intent=${i.Enter} data-intent-on=\"focusin\">\n        <div class=\"h-leave\" data-intent=${i.Leave} data-intent-on=\"focusout\">\n          <div\n            class=\"hand ${layout.cards.some((c) => c.tile !== undefined) ? 'tiles' : ''} n-${Math.min(layout.cards.length, 32)} ${options.fourColor ? 'four' : ''} ${options.calm ? 'calm' : ''} mode-${layout.mode}\"\n            role=\"toolbar\"\n            aria-label=${layout.label}\n            data-intent=${i.Key}\n            data-intent-on=\"keydown\"\n          >\n            ${each(\n              layout.cards,\n              (card) => card.id,\n              CardButton,\n              (card): CardView => ({\n                focused: layout.cards[focusIndex]?.id === card.id,\n                mode: layout.mode,\n                calm: options.calm,\n                numbers: options.numbers === true,\n                draggable: options.draggable === true,\n              }),\n            )}\n          </div>\n        </div>\n      </div>`;\n  },\n  styles: [faceStyles, handStyles],\n});\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'jy-card-hand': InstanceType<typeof CardHand>;\n  }\n}\n"],"mappings":";;;;;;;;;AAAA,IAAA,YAAA;CAAA,MAAA;CAAA,QAAA;CAAA,SAAA;EAAA;GAAA;GAAA,CAAA,CAAA;GAAA;GAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA;EAAA;GAAA;GAAA,CAAA,CAAA;GAAA;EAAA;EAAA;GAAA;GAAA,CAAA,CAAA;GAAA;EAAA;EAAA;GAAA;GAAA,CAAA,CAAA;GAAA;EAAA;EAAA;GAAA;GAAA,CAAA,CAAA;GAAA;EAAA;EAAA;GAAA;GAAA,CAAA,CAAA;GAAA;EAAA;EAAA;GAAA;GAAA,CAAA,CAAA;GAAA;EAAA;EAAA;GAAA;GAAA,CAAA,CAAA;GAAA;EAAA;EAAA;GAAA;GAAA,CAAA,GAAA,CAAA;GAAA;GAAA,CAAA,YAAA,EAAA;EAAA;EAAA,CAAA,GAAA,CAAA,GAAA,CAAA,CAAA;CAAA;CAAA,YAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;GAAA,WAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;GAAA,WAAA,CAAA,YAAA,EAAA;EAAA;EAAA;EAAA;GAAA,KAAA;GAAA,MAAA;EAAA;EAAA;CAAA;AAAA;AAAA,IAAA,YAAA;CAAA,MAAA;CAAA,QAAA;CAAA,SAAA;EAAA;GAAA;GAAA,CAAA;GAAA;EAAA;EAAA;GAAA;GAAA,CAAA,CAAA;GAAA;EAAA;EAAA;GAAA;GAAA,CAAA,GAAA,CAAA;GAAA;EAAA;EAAA;GAAA;GAAA;IAAA;IAAA;IAAA;GAAA;GAAA;GAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA;EAAA;GAAA;GAAA;IAAA;IAAA;IAAA;GAAA;GAAA;EAAA;EAAA;GAAA;GAAA;IAAA;IAAA;IAAA;GAAA;GAAA;EAAA;EAAA,CAAA,GAAA;GAAA;GAAA;GAAA;EAAA,CAAA;CAAA;CAAA,YAAA;EAAA,EAAA,KAAA,QAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;GAAA,WAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;EAAA;GAAA,KAAA;GAAA,MAAA;EAAA;EAAA;CAAA;AAAA;AAqFA,IAAA,aAAA;CAAA,OAAA;CAAA,OAAA,CAAA;CAAA,MAAA;AAAA;AACA,IAAA,uBAAA;CAAA,MAAA;CAAA,WAAA;AAAA;AAEA,IAAA,YAAA,UAAA,OAAA,UAAA,YAAA,UAAA;AAEA,IAAA,gBAAA,UACA,SAAA,KAAA,KACA,OAAA,MAAA,aAAA,YACA,MAAA,QAAA,MAAA,QAAA,MACA,MAAA,YAAA,UAAA,MAAA,YAAA;AAEA,IAAA,iBAAA,UACA,SAAA,KAAA,KAAA,OAAA,MAAA,YAAA,aAAA,OAAA,MAAA,iBAAA;;AAGA,IAAA,iBAAA,SACA,KAAA,SAAA,KAAA,IACA,KAAA,SAAA,KAAA,IACA,SAAA,IAAA,IACA,SAAA,KAAA,IAAA,IACA,GAAA,KAAA,SAAA,KAAA,IAAA,SAAA,IAAA,IAAA,SAAA,KAAA,IAAA,EAAA,IAAA,KAAA;AAEA,IAAA,SAAA,GAAA,QAAA,KAAA,IAAA,GAAA,KAAA,IAAA,KAAA,CAAA,CAAA;AAEA,IAAA,eAAA,YAAA;CACA,OAAA;CACA,KAAA,OAAA,MAAA,KAAA,MAAA,EAAA,EAAA;CACA,QAAA;AACA;;;;;;AAUA,IAAA,YAAA,GAAA,WAAA;CACA,MAAA,MAAA,OAAA,MAAA,KAAA,MAAA,EAAA,EAAA;CAEA,IADA,IAAA,WAAA,EAAA,IAAA,UAAA,IAAA,OAAA,IAAA,MAAA,OAAA,EAAA,IAAA,EAAA,GACA,OAAA;EAAA,OAAA;EAAA,MAAA,CAAA;EAAA,OAAA;CAAA;CACA,MAAA,MAAA,EAAA,IAAA,EAAA;CACA,MAAA,OAAA,QAAA,KAAA,IAAA,KAAA,IAAA,QAAA,GAAA;CACA,MAAA,QAAA,QAAA,IAAA,OAAA,MAAA,EAAA,OAAA,IAAA,SAAA,CAAA;CACA,MAAA,SAAA,IAAA,UAAA;CACA,MAAA,UAAA,EAAA,UAAA,OAAA,KAAA,WAAA;CACA,OAAA;EACA,OAAA;GAAA,OAAA;GAAA;GAAA,QAAA,EAAA,UAAA,WAAA;EAAA;EACA,MAAA,CAAA;EACA,OAAA,UAAA,SAAA;CACA;AACA;AAEA,IAAA,YAAA,QAAA,MAAA,QAAA;CACA,IAAA,OAAA,SAAA,UAAA;EACA,IAAA,QAAA,SAAA,OAAA,CAAA,EAAA,MAAA,SAAA,CAAA;EACA,OAAA,KAAA,WAAA,CAAA;GAAA,MAAA;GAAA,IAAA,KAAA;EAAA,CAAA,IAAA,CAAA;GAAA,MAAA;GAAA,IAAA,KAAA;EAAA,CAAA;CACA;CACA,OAAA,KAAA,WAAA,CAAA;EAAA,MAAA;EAAA,IAAA,KAAA;CAAA,CAAA,IAAA,CAAA;EAAA,MAAA;EAAA,IAAA,KAAA;CAAA,CAAA;AACA;;AAGA,IAAA,YAAA,QAAA,QAAA,MAAA;CACA,MAAA,IAAA,SAAA,QAAA,MAAA,CAAA,CAAA;CACA,MAAA,QAAA,OAAA;CACA,MAAA,OAAA,MAAA,SAAA;CACA,QAAA,EAAA,MAAA;EACA,KAAA,OAAA;GACA,MAAA,OAAA,MAAA,EAAA;GACA,IAAA,SAAA,KAAA,GAAA,OAAA;IAAA,OAAA;IAAA,MAAA,CAAA;IAAA,OAAA;GAAA;GACA,MAAA,UAAA,UAAA;IACA,MAAA,OAAA,MAAA,OAAA,IAAA;IACA,OAAA;KAAA,OAAA;MAAA,GAAA;MAAA,OAAA;MAAA,QAAA;KAAA;KAAA,MAAA,CAAA;KAAA,OAAA,MAAA,KAAA,CAAA;IAAA;GACA;GACA,QAAA,EAAA,KAAA;IACA,KAAA,aACA,OAAA,OAAA,EAAA,QAAA,CAAA;IACA,KAAA,cACA,OAAA,OAAA,EAAA,QAAA,CAAA;IACA,KAAA,QACA,OAAA,OAAA,CAAA;IACA,KAAA,OACA,OAAA,OAAA,IAAA;IACA,KAAA,SACA,OAAA;KAAA,OAAA;KAAA,MAAA,SAAA,QAAA,MAAA,OAAA;KAAA,OAAA;IAAA;IACA,KAAA,KACA,OAAA;KAAA,OAAA;KAAA,MAAA,SAAA,QAAA,MAAA,OAAA;KAAA,OAAA;IAAA;IACA,SACA,OAAA;KAAA,OAAA;KAAA,MAAA,CAAA;KAAA,OAAA;IAAA;GACA;EACA;EACA,KAAA,SAAA;GACA,MAAA,QAAA,MAAA,WAAA,MAAA,EAAA,OAAA,EAAA,EAAA;GACA,MAAA,OAAA,MAAA;GACA,IAAA,SAAA,KAAA,GAAA,OAAA;IAAA,OAAA;IAAA,MAAA,CAAA;IAAA,OAAA;GAAA;GACA,OAAA;IAAA,OAAA;KAAA,GAAA;KAAA,OAAA;KAAA,QAAA;IAAA;IAAA,MAAA,SAAA,QAAA,MAAA,SAAA;IAAA,OAAA;GAAA;EACA;EACA,KAAA,SAAA;GACA,MAAA,QAAA,MAAA,WAAA,MAAA,EAAA,OAAA,EAAA,EAAA;GACA,OAAA;IAAA,OAAA;KAAA,GAAA;KAAA,OAAA,SAAA,IAAA,QAAA,EAAA;KAAA,QAAA;IAAA;IAAA,MAAA,CAAA;IAAA,OAAA;GAAA;EACA;EACA,KAAA,SACA,OAAA;GAAA,OAAA;IAAA,GAAA;IAAA,QAAA;GAAA;GAAA,MAAA,CAAA;GAAA,OAAA;EAAA;CACA;AACA;;AAGA,IAAA,4BAAA,IAAA,IAAA;CAAA;CAAA;CAAA;CAAA;CAAA;CAAA;AAAA,CAAA;AAEA,IAAA,OAAA,QAAA;AACA,IAAA,IAAA,UAAA;AAUA,IAAA,cAAA,MAAA,MACEA,SAAA,WAAA;CAAA,KAEgB,WAAA,OAAA,WAAA;CAAwC,KAAA,WAAA,KAAA;CAA8B,KAAA,SAAA,KAAA,IAAA,KAAA;CAAsC,KAC9G;CAAO,EACP,YAAA,SAAA;CAA8B,EAC/B,UAAA,IAAA;CAAkB,cAChB,IAAA;CAAmB,KAChB,WAAA,OAAA;CAA6B,EAC9B,SAAA,WAAA,OAAA,KAAA,WAAA,IAAA,IAAA;CAAyD,EAC1D;CAAO,KAEE,QAAA;CAAwB,KAAA,SAAA,KAAA,IAAA,SAAA,KAAA,MAAA,KAAA,IAAA,IAAA,SAAA,KAAA,MAAA,EAAA,OAAA;AAAyF,CAAA;AAG5I,IAAA,OAAA,GAAA,QAAA,MAAA;CACA,MAAA,OAAA,SAAA,GAAA,QAAA,CAAA;CACA,MAAA,WAAA,KAAA,KAAA,KAAA,QAAA,KAAA,GAAA,CAAA;CACA,IAAA,KAAA,UAAA,MAAA,SAAA,KAAA,MAAA,eAAA,KAAA,MAAA,GAAA,CAAA;CACA,OAAA,SAAA,WAAA,IAAA,KAAA,QAAA,CAAA,KAAA,OAAA,QAAA;AACA;AAEA,IAAA,WAAA,OAKA,CAAA,CAAA,gBAAA;CACA,OAAA;EACA,QAAA,KAAA,MAAA,cAAA,EAAA,SAAA,WAAA,CAAA;EACA,SAAA,KAAA,MAAA,eAAA,EAAA,SAAA,qBAAA,CAAA;CACA;CACA,OAAA,MAAA,YAAA,EAAA,MAAA;CACA,QAAA;EACA,MAAA,EAAA,KAAA,YAAA;GACA,IACA,QAAA,KAAA,KACA,EAAA,iBAAA,kBACA,MAAA,UACA,MAAA,WACA,MAAA,WACA,MAAA,UAEA,OAAA,KAAA;GACA,IAAA,CAAA,UAAA,IAAA,GAAA,GAAA,OAAA,KAAA;GACA,MAAA,eAAA;GACA,OAAA;IAAA,MAAA;IAAA;GAAA;EACA;EACA,QAAA,EAAA,YAAA;GACA,MAAA,KACA,MAAA,kBAAA,UAAA,MAAA,OAAA,QAAA,aAAA,CAAA,EAAA,aAAA,WAAA,IAAA;GACA,OAAA,OAAA,OAAA,WAAA;IAAA,MAAA;IAAA;GAAA,IAAA,KAAA;EACA;EACA,QAAA,EAAA,YAAA;GACA,MAAA,KACA,MAAA,kBAAA,UAAA,MAAA,OAAA,QAAA,aAAA,CAAA,EAAA,aAAA,WAAA,IAAA;GACA,OAAA,OAAA,OAAA,WAAA;IAAA,MAAA;IAAA;GAAA,IAAA,KAAA;EACA;EACA,QAAA,EAAA,OAAA,aAAA;GACA,MAAA,OAAA,iBAAA,aAAA,MAAA,gBAAA;GACA,OAAA,gBAAA,QAAA,kBAAA,QAAA,OAAA,SAAA,IAAA,IAAA,KAAA,IAAA,EAAA,MAAA,QAAA;EACA;CACA;CACA,QAAA;EACA,MAAA,GAAA,GAAA,EAAA,OAAA,QAAA,IAAA,GAAA,EAAA,QAAA,CAAA;EACA,QAAA,GAAA,GAAA,EAAA,OAAA,QAAA,IAAA,GAAA,EAAA,QAAA,CAAA;EACA,QAAA,GAAA,GAAA,EAAA,OAAA,QAAA,IAAA,GAAA,EAAA,QAAA,CAAA;EACA,QAAA,GAAA,GAAA,EAAA,OAAA,QAAA,IAAA,GAAA,EAAA,QAAA,CAAA;EACA,eAAA,GAAA,EAAA,OAAA,QAAA;GACA,MAAA,OAAA,SAAA,GAAA,EAAA,MAAA;GACA,OAAA,KAAA,UAAA,OAAA,KAAA,QAAA,CAAA,KAAA,OAAA,CAAA,MAAA,eAAA,KAAA,MAAA,GAAA,CAAA,CAAA;EACA;CACA;CACA,OAAA,GAAA,IAAA,EAAA,OAAA,QAAA;EACA,MAAA,EAAA,QAAA,YAAA;EACA,MAAA,aAAA,MAAA,EAAA,OAAA,OAAA,MAAA,SAAA,CAAA;EACA,OAAWA,SAAA,WAAA;GAAO,SAAA;GAAU,EACa;GAAO,EACL;GAAO,OAExB,MAAA,MAAA,MAAA,EAAA,SAAA,KAAA,CAAA,IAAA,UAAA;GAAmE,KAAA,IAAA,OAAA,MAAA,QAAA,EAAA;GAAqC,QAAA,YAAA,SAAA;GAAmC,QAAA,OAAA,SAAA;GAAmC,OAAA;GAAW,OAE1L;GAAY,EACX;GAAK,KAI/B,OAAA,QACA,SAAA,KAAA,IACA,aACA,UAAA;IACA,SAAA,OAAA,MAAA,WAAA,EAAA,OAAA,KAAA;IACA,MAAA,OAAA;IACA,MAAA,QAAA;IACA,SAAA,QAAA,YAAA;IACA,WAAA,QAAA,cAAA;GACA,EACA;EAAa,CAAA;CAIb;CACA,QAAA,CAAA,YAAA,UAAA;AACA,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { CardTable, FLIGHT_MS, density, shownCards, type TableMsg, type TableProps, type TableState } from './table.js';
+export { DRAG_THRESHOLD, describe, focusedPile, initialCtl, spoken, step, sync, type Ctl, type CtlMsg, type Held, type Press, type Step, type TableOut, type Via, } from './controller.js';
+export { DEFAULT_OPTIONS, EMPTY_LAYOUT, allPiles, findPile, isFaceCard, isTableLayout, isTableOptions, isTarget, topCards, type Back, type DownCard, type FaceCard, type Fan, type HintSpec, type PileCard, type PileSpec, type Place, type RegionSpec, type TableLayout, type TableOptions, } from './layout.js';
+export { PIPS, SUIT_PATHS, cardFace, rankLabel, suitDefs } from './faces.js';
+export { tableStyles } from './styles.js';
+export { faceStyles } from './face-styles.js';
+export { CardHand, DEFAULT_HAND_OPTIONS, EMPTY_HAND, handCardLabel, handStep, initialHand, isHandLayout, isHandOptions, syncHand, type HandCard, type HandLayout, type HandMode, type HandMsg, type HandOptions, type HandOut, type HandState, type HandStep, } from './hand.js';
+export { tileFace } from './tiles.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+import { DEFAULT_OPTIONS, EMPTY_LAYOUT, allPiles, findPile, isFaceCard, isTableLayout, isTableOptions, isTarget, topCards } from "./layout.js";
+import { DRAG_THRESHOLD, describe, focusedPile, initialCtl, spoken, step, sync } from "./controller.js";
+import { faceStyles } from "./face-styles.js";
+import { PIPS, SUIT_PATHS, cardFace, rankLabel, suitDefs } from "./faces.js";
+import { tileFace } from "./tiles.js";
+import { CardHand, DEFAULT_HAND_OPTIONS, EMPTY_HAND, handCardLabel, handStep, initialHand, isHandLayout, isHandOptions, syncHand } from "./hand.js";
+import { tableStyles } from "./styles.js";
+import { CardTable, FLIGHT_MS, density, shownCards } from "./table.js";
+export { CardHand, CardTable, DEFAULT_HAND_OPTIONS, DEFAULT_OPTIONS, DRAG_THRESHOLD, EMPTY_HAND, EMPTY_LAYOUT, FLIGHT_MS, PIPS, SUIT_PATHS, allPiles, cardFace, density, describe, faceStyles, findPile, focusedPile, handCardLabel, handStep, initialCtl, initialHand, isFaceCard, isHandLayout, isHandOptions, isTableLayout, isTableOptions, isTarget, rankLabel, shownCards, spoken, step, suitDefs, sync, syncHand, tableStyles, tileFace, topCards };