@joystyk/cards-ui 0.0.0-stage → 0.2.0

package/dist/hand-styles.js

@@ -0,0 +1,121 @@
+import { css } from "@gyral/core";
+//#region src/hand-styles.ts
+var counts = Array.from({ length: 32 }, (_, k) => `.n-${k + 1} { --n: ${k + 1}; }`).join("\n");
+var handStyles = css`
+  @layer components {
+    ${counts}
+
+    :host {
+      display: block;
+      container-type: inline-size;
+    }
+
+    .hand {
+      --card-w: clamp(3.6rem, 16cqi, 6.5rem);
+      --card-h: calc(var(--card-w) * 1.4);
+      --step: clamp(2.75rem, calc((100cqi - var(--card-w) - 0.5rem) / max(1, var(--n, 1) - 1)), calc(var(--card-w) * 0.66));
+
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      row-gap: 0.4rem;
+      padding-block-start: calc(var(--card-h) * 0.2);
+      padding-inline-end: calc(var(--card-w) - var(--step));
+      user-select: none;
+      -webkit-user-select: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .hand.tiles { --card-h: calc(var(--card-w) * 2); }
+    .hand.tiles .slot { touch-action: none; }
+    .hand.tiles .slot:not(.off) .cface { outline: 2px solid var(--hand-select, oklch(40% .06 170)); outline-offset: 1px; translate: 0 -.25rem; }
+
+    .slot {
+      position: relative;
+      flex: none;
+      inline-size: var(--step);
+      block-size: var(--card-h);
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+      touch-action: manipulation;
+    }
+
+    .slot .cface {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--card-w);
+      block-size: var(--card-h);
+      transition: translate 140ms ease-out;
+    }
+
+    .slot:focus-visible {
+      outline: none;
+    }
+
+    .slot:focus-visible .cface {
+      outline: 3px solid var(--hand-focus, oklch(55% 0.2 255));
+      outline-offset: 2px;
+      z-index: 1;
+    }
+
+    .chosen .cface {
+      translate: 0 calc(var(--card-h) * -0.18);
+      outline: 3px solid var(--hand-select, oklch(62% 0.19 45));
+      outline-offset: 1px;
+    }
+
+    .off .cface {
+      translate: 0 calc(var(--card-h) * 0.06);
+      cursor: not-allowed;
+    }
+
+    .off .cface::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: repeating-linear-gradient(135deg, oklch(40% 0.02 260 / 0.22) 0 3px, transparent 3px 7px);
+      pointer-events: none;
+    }
+
+    /* A noted card (just received) carries a corner tab, besides the word in its name. */
+    .noted .cface::before {
+      content: '';
+      position: absolute;
+      inset-block-start: -0.35rem;
+      inset-inline-end: 0.3rem;
+      inline-size: 0.7rem;
+      block-size: 0.7rem;
+      border-radius: 50%;
+      background: var(--hand-note, oklch(62% 0.19 45));
+      border: 2px solid var(--card-paper, oklch(98.5% 0.008 90));
+    }
+
+    .calm .slot .cface {
+      transition: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .slot .cface {
+        transition: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .slot:focus-visible .cface,
+      .chosen .cface {
+        outline-color: Highlight;
+      }
+    }
+  }
+`;
+//#endregion
+export { handStyles };
+
+//# sourceMappingURL=hand-styles.js.map

package/dist/hand-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hand-styles.js","names":[],"sources":["../src/hand-styles.ts"],"sourcesContent":["// The hand widget's layout: a fan of overlapping cards that fits its container. Each card\n// shows at least a 44 px strip (hearts.md, \"Keyboard and pointer controls\"); when the fan\n// can't fit at that, it wraps onto another row. Chosen cards lift with an outline, cards that\n// can't be played sit lower behind a hatch, and the focused card gets a thick ring: none of\n// these rely on color alone. Theme with --hand-focus, --hand-select and --hand-note.\n// The site's Content Security Policy refuses style attributes, so the card count is a class.\nimport { css } from '@gyral/core';\n\nconst counts = Array.from({ length: 32 }, (_, k) => `.n-${k + 1} { --n: ${k + 1}; }`).join('\\n');\n\nexport const handStyles = css`\n  @layer components {\n    ${counts}\n\n    :host {\n      display: block;\n      container-type: inline-size;\n    }\n\n    .hand {\n      --card-w: clamp(3.6rem, 16cqi, 6.5rem);\n      --card-h: calc(var(--card-w) * 1.4);\n      --step: clamp(2.75rem, calc((100cqi - var(--card-w) - 0.5rem) / max(1, var(--n, 1) - 1)), calc(var(--card-w) * 0.66));\n\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      row-gap: 0.4rem;\n      padding-block-start: calc(var(--card-h) * 0.2);\n      padding-inline-end: calc(var(--card-w) - var(--step));\n      user-select: none;\n      -webkit-user-select: none;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .hand.tiles { --card-h: calc(var(--card-w) * 2); }\n    .hand.tiles .slot { touch-action: none; }\n    .hand.tiles .slot:not(.off) .cface { outline: 2px solid var(--hand-select, oklch(40% .06 170)); outline-offset: 1px; translate: 0 -.25rem; }\n\n    .slot {\n      position: relative;\n      flex: none;\n      inline-size: var(--step);\n      block-size: var(--card-h);\n      margin: 0;\n      padding: 0;\n      border: 0;\n      background: none;\n      color: inherit;\n      font: inherit;\n      cursor: pointer;\n      touch-action: manipulation;\n    }\n\n    .slot .cface {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      inline-size: var(--card-w);\n      block-size: var(--card-h);\n      transition: translate 140ms ease-out;\n    }\n\n    .slot:focus-visible {\n      outline: none;\n    }\n\n    .slot:focus-visible .cface {\n      outline: 3px solid var(--hand-focus, oklch(55% 0.2 255));\n      outline-offset: 2px;\n      z-index: 1;\n    }\n\n    .chosen .cface {\n      translate: 0 calc(var(--card-h) * -0.18);\n      outline: 3px solid var(--hand-select, oklch(62% 0.19 45));\n      outline-offset: 1px;\n    }\n\n    .off .cface {\n      translate: 0 calc(var(--card-h) * 0.06);\n      cursor: not-allowed;\n    }\n\n    .off .cface::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      background: repeating-linear-gradient(135deg, oklch(40% 0.02 260 / 0.22) 0 3px, transparent 3px 7px);\n      pointer-events: none;\n    }\n\n    /* A noted card (just received) carries a corner tab, besides the word in its name. */\n    .noted .cface::before {\n      content: '';\n      position: absolute;\n      inset-block-start: -0.35rem;\n      inset-inline-end: 0.3rem;\n      inline-size: 0.7rem;\n      block-size: 0.7rem;\n      border-radius: 50%;\n      background: var(--hand-note, oklch(62% 0.19 45));\n      border: 2px solid var(--card-paper, oklch(98.5% 0.008 90));\n    }\n\n    .calm .slot .cface {\n      transition: none;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .slot .cface {\n        transition: none;\n      }\n    }\n\n    @media (forced-colors: active) {\n      .slot:focus-visible .cface,\n      .chosen .cface {\n        outline-color: Highlight;\n      }\n    }\n  }\n`;\n"],"mappings":";;AAQA,IAAM,SAAS,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,MAAM,IAAI,EAAE,UAAU,IAAI,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI;AAE/F,IAAa,aAAa,GAAG;;MAEvB,OAAO"}

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