@joystyk/cards-ui 0.0.0 → 0.2.0

package/dist/face-styles.js

@@ -0,0 +1,106 @@
+import { css } from "@gyral/core";
+//#region src/face-styles.ts
+var faceStyles = css`
+  @layer components {
+    .defs {
+      position: absolute;
+      inline-size: 0;
+      block-size: 0;
+      overflow: hidden;
+    }
+
+    .cface,
+    .cback {
+      box-sizing: border-box;
+      aspect-ratio: 5 / 7;
+      border-radius: 9%/6.5%;
+      box-shadow: 0 1px 2px oklch(0% 0 0 / 0.28);
+    }
+
+    .cface {
+      background: var(--card-paper, oklch(98.5% 0.008 90));
+      border: 1px solid color-mix(in oklch, var(--card-ink, oklch(24% 0.02 260)) 22%, transparent);
+      color: var(--card-ink, oklch(24% 0.02 260));
+    }
+
+    .cback {
+      background-color: var(--back-a, oklch(42% 0.07 250));
+      background-image:
+        radial-gradient(circle at 50% 50%, var(--back-c, oklch(80% 0.11 85)) 0 9%, transparent 10%),
+        repeating-linear-gradient(45deg, var(--back-b, oklch(62% 0.08 250)) 0 1.5px, transparent 1.5px 8px),
+        repeating-linear-gradient(-45deg, var(--back-b, oklch(62% 0.08 250)) 0 1.5px, transparent 1.5px 8px);
+      border: 1px solid color-mix(in oklch, var(--back-a, oklch(42% 0.07 250)) 70%, black);
+    }
+
+    .face {
+      display: block;
+      inline-size: 100%;
+      block-size: 100%;
+      fill: var(--suit);
+      font-family: var(--card-font, var(--jy-font-sans, system-ui, sans-serif));
+      font-weight: 700;
+    }
+
+    .face .index {
+      font-size: 21px;
+      letter-spacing: -0.5px;
+    }
+
+    .face .corner {
+      font-size: 14px;
+    }
+
+    .face .letter {
+      font-size: 11px;
+      font-weight: 600;
+    }
+
+    .face .monogram {
+      font-family: var(--card-serif, Georgia, 'Times New Roman', serif);
+      font-size: 46px;
+    }
+
+    .face .frame {
+      fill: color-mix(in oklch, var(--suit) 9%, transparent);
+      stroke: var(--suit);
+      stroke-width: 2.5;
+    }
+
+    .face .crest {
+      fill: var(--suit);
+    }
+
+    .s-S,
+    .s-C {
+      --suit: var(--suit-black, oklch(24% 0.02 260));
+    }
+
+    .s-H,
+    .s-D {
+      --suit: var(--suit-red, oklch(52% 0.2 25));
+    }
+
+    .four .s-D {
+      --suit: var(--suit-blue, oklch(47% 0.17 255));
+    }
+
+    .four .s-C {
+      --suit: var(--suit-green, oklch(48% 0.13 150));
+    }
+
+    @media (forced-colors: active) {
+      .face {
+        fill: CanvasText;
+      }
+
+      .cface,
+      .cback {
+        border-color: CanvasText;
+      }
+    }
+  }
+`;
+//#endregion
+export { faceStyles };
+
+//# sourceMappingURL=face-styles.js.map

package/dist/face-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"face-styles.js","names":[],"sources":["../src/face-styles.ts"],"sourcesContent":["// The card art's styles on their own, for components that draw single cards rather than a\n// whole table: the hand widget (<jy-card-hand>) and a game's trick or discard area. Put\n// `suitDefs()` once in the same shadow root, then a card is\n// `<div class=\"cface s-${suit}\">${cardFace(rank, suit)}</div>` and a back is `<div class=\"cback\"></div>`.\n//\n// Every color has a fallback instead of a default on `:host`, so a game themes these cards by\n// setting the custom properties on its own element; they inherit into the hand's shadow root:\n//   --card-paper, --card-ink, --suit-black, --suit-red, --suit-blue, --suit-green,\n//   --back-a, --back-b, --back-c, --card-font, --card-serif.\n// A `.four` ancestor turns on the four-color deck (blue diamonds, green clubs); the suit's\n// shape and letter always carry the suit, so color is only a second cue.\nimport { css } from '@gyral/core';\n\nexport const faceStyles = css`\n  @layer components {\n    .defs {\n      position: absolute;\n      inline-size: 0;\n      block-size: 0;\n      overflow: hidden;\n    }\n\n    .cface,\n    .cback {\n      box-sizing: border-box;\n      aspect-ratio: 5 / 7;\n      border-radius: 9%/6.5%;\n      box-shadow: 0 1px 2px oklch(0% 0 0 / 0.28);\n    }\n\n    .cface {\n      background: var(--card-paper, oklch(98.5% 0.008 90));\n      border: 1px solid color-mix(in oklch, var(--card-ink, oklch(24% 0.02 260)) 22%, transparent);\n      color: var(--card-ink, oklch(24% 0.02 260));\n    }\n\n    .cback {\n      background-color: var(--back-a, oklch(42% 0.07 250));\n      background-image:\n        radial-gradient(circle at 50% 50%, var(--back-c, oklch(80% 0.11 85)) 0 9%, transparent 10%),\n        repeating-linear-gradient(45deg, var(--back-b, oklch(62% 0.08 250)) 0 1.5px, transparent 1.5px 8px),\n        repeating-linear-gradient(-45deg, var(--back-b, oklch(62% 0.08 250)) 0 1.5px, transparent 1.5px 8px);\n      border: 1px solid color-mix(in oklch, var(--back-a, oklch(42% 0.07 250)) 70%, black);\n    }\n\n    .face {\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      fill: var(--suit);\n      font-family: var(--card-font, var(--jy-font-sans, system-ui, sans-serif));\n      font-weight: 700;\n    }\n\n    .face .index {\n      font-size: 21px;\n      letter-spacing: -0.5px;\n    }\n\n    .face .corner {\n      font-size: 14px;\n    }\n\n    .face .letter {\n      font-size: 11px;\n      font-weight: 600;\n    }\n\n    .face .monogram {\n      font-family: var(--card-serif, Georgia, 'Times New Roman', serif);\n      font-size: 46px;\n    }\n\n    .face .frame {\n      fill: color-mix(in oklch, var(--suit) 9%, transparent);\n      stroke: var(--suit);\n      stroke-width: 2.5;\n    }\n\n    .face .crest {\n      fill: var(--suit);\n    }\n\n    .s-S,\n    .s-C {\n      --suit: var(--suit-black, oklch(24% 0.02 260));\n    }\n\n    .s-H,\n    .s-D {\n      --suit: var(--suit-red, oklch(52% 0.2 25));\n    }\n\n    .four .s-D {\n      --suit: var(--suit-blue, oklch(47% 0.17 255));\n    }\n\n    .four .s-C {\n      --suit: var(--suit-green, oklch(48% 0.13 150));\n    }\n\n    @media (forced-colors: active) {\n      .face {\n        fill: CanvasText;\n      }\n\n      .cface,\n      .cback {\n        border-color: CanvasText;\n      }\n    }\n  }\n`;\n"],"mappings":";;AAaA,IAAa,aAAa,GAAG"}

package/dist/faces.d.ts

@@ -0,0 +1,11 @@
+import type { Rank, Suit } from '@joystyk/kit/cards';
+/** Suit shapes in a 100 × 100 box, each its own silhouette. */
+export declare const SUIT_PATHS: Readonly<Record<Suit, string>>;
+/** The rank as the card prints it: "A", "7", "10", "Q". */
+export declare const rankLabel: (rank: Rank) => string;
+/** The suit symbols, once per table; faces refer to them with `<use>`. */
+export declare const suitDefs: () => import("@gyral/core").TemplateResult;
+/** Pip centers for 2–10, in the area below the top strip. Lower pips print upside down. */
+export declare const PIPS: Readonly<Record<number, readonly (readonly [number, number])[]>>;
+/** A face-up card's art. Decoration only: the pile's accessible name says what the card is. */
+export declare const cardFace: (rank: Rank, suit: Suit) => import("@gyral/core").TemplateResult;

package/dist/faces.js

@@ -0,0 +1,403 @@
+import "@gyral/core";
+import { compiled, compiledSvg } from "@gyral/core/compiled";
+//#region src/faces.ts
+var _gyral$t0 = {
+	"id": "22xok3v97av",
+	"html": "<svg class=\"defs\" width=\"0\" height=\"0\" aria-hidden=\"true\" focusable=\"false\"><defs><symbol id=\"suit-S\" viewBox=\"0 0 100 100\"><path/></symbol><symbol id=\"suit-H\" viewBox=\"0 0 100 100\"><path/></symbol><symbol id=\"suit-D\" viewBox=\"0 0 100 100\"><path/></symbol><symbol id=\"suit-C\" viewBox=\"0 0 100 100\"><path/></symbol></defs></svg>",
+	"parts": [
+		[
+			3,
+			[
+				0,
+				0,
+				0,
+				0
+			],
+			"d"
+		],
+		[
+			3,
+			[
+				0,
+				0,
+				1,
+				0
+			],
+			"d"
+		],
+		[
+			3,
+			[
+				0,
+				0,
+				2,
+				0
+			],
+			"d"
+		],
+		[
+			3,
+			[
+				0,
+				0,
+				3,
+				0
+			],
+			"d"
+		]
+	],
+	"segments": [
+		"<svg class=\"defs\" width=\"0\" height=\"0\" aria-hidden=\"true\" focusable=\"false\"><defs><symbol id=\"suit-S\" viewBox=\"0 0 100 100\"><path",
+		{
+			"k": "attr",
+			"name": "d"
+		},
+		"/></symbol><symbol id=\"suit-H\" viewBox=\"0 0 100 100\"><path",
+		{
+			"k": "attr",
+			"name": "d"
+		},
+		"/></symbol><symbol id=\"suit-D\" viewBox=\"0 0 100 100\"><path",
+		{
+			"k": "attr",
+			"name": "d"
+		},
+		"/></symbol><symbol id=\"suit-C\" viewBox=\"0 0 100 100\"><path",
+		{
+			"k": "attr",
+			"name": "d"
+		},
+		"/></symbol></defs></svg>"
+	]
+};
+var _gyral$t1 = {
+	"id": "j1b5og2pav",
+	"html": "<use/>",
+	"parts": [
+		[
+			3,
+			[0],
+			"class"
+		],
+		[
+			3,
+			[0],
+			"href"
+		],
+		[
+			3,
+			[0],
+			"x"
+		],
+		[
+			3,
+			[0],
+			"y"
+		],
+		[
+			3,
+			[0],
+			"width"
+		],
+		[
+			3,
+			[0],
+			"height"
+		],
+		[
+			3,
+			[0],
+			"transform"
+		]
+	],
+	"svg": true,
+	"segments": [
+		"<use",
+		{
+			"k": "attr",
+			"name": "class"
+		},
+		{
+			"k": "attr",
+			"name": "href"
+		},
+		{
+			"k": "attr",
+			"name": "x"
+		},
+		{
+			"k": "attr",
+			"name": "y"
+		},
+		{
+			"k": "attr",
+			"name": "width"
+		},
+		{
+			"k": "attr",
+			"name": "height"
+		},
+		{
+			"k": "attr",
+			"name": "transform"
+		},
+		"/>"
+	]
+};
+var _gyral$t2 = {
+	"id": "1fjawzfzu4a",
+	"html": "<path class=\"crest\" d=\"M30 62L34 44L42 54L50 38L58 54L66 44L70 62Z\"/>",
+	"parts": [],
+	"svg": true,
+	"segments": ["<path class=\"crest\" d=\"M30 62L34 44L42 54L50 38L58 54L66 44L70 62Z\"/>"]
+};
+var _gyral$t3 = {
+	"id": "1k3rr19hgb6",
+	"html": "<g class=\"crest\"><path d=\"M30 60Q50 40 70 60Z\"/><circle cx=\"30\" cy=\"54\" r=\"4\"/><circle cx=\"50\" cy=\"42\" r=\"4.5\"/><circle cx=\"70\" cy=\"54\" r=\"4\"/></g>",
+	"parts": [],
+	"svg": true,
+	"segments": ["<g class=\"crest\"><path d=\"M30 60Q50 40 70 60Z\"/><circle cx=\"30\" cy=\"54\" r=\"4\"/><circle cx=\"50\" cy=\"42\" r=\"4.5\"/><circle cx=\"70\" cy=\"54\" r=\"4\"/></g>"]
+};
+var _gyral$t4 = {
+	"id": "7d8qbh9elk",
+	"html": "<path class=\"crest\" d=\"M30 48L50 60L70 48L70 56L50 68L30 56Z\"/>",
+	"parts": [],
+	"svg": true,
+	"segments": ["<path class=\"crest\" d=\"M30 48L50 60L70 48L70 56L50 68L30 56Z\"/>"]
+};
+var _gyral$t5 = {
+	"id": "1sphrc3jsqw",
+	"html": "<rect class=\"frame\" x=\"17\" y=\"32\" width=\"66\" height=\"96\" rx=\"9\"/><!----> <text class=\"monogram\" x=\"50\" y=\"108\" text-anchor=\"middle\"></text> <!---->",
+	"parts": [
+		[
+			2,
+			[],
+			1
+		],
+		[1, [3]],
+		[
+			2,
+			[],
+			5
+		],
+		[0, []]
+	],
+	"svg": true,
+	"segments": [
+		"<rect class=\"frame\" x=\"17\" y=\"32\" width=\"66\" height=\"96\" rx=\"9\"/>",
+		{ "k": "child" },
+		"<!----> <text class=\"monogram\" x=\"50\" y=\"108\" text-anchor=\"middle\">",
+		{
+			"k": "child",
+			"in": "text",
+			"svg": true
+		},
+		"</text> ",
+		{ "k": "child" },
+		"<!---->",
+		{ "k": "child" }
+	]
+};
+var _gyral$t6 = {
+	"id": "1b8fkoq43rf",
+	"html": "<svg class=\"face\" viewBox=\"0 0 100 140\" aria-hidden=\"true\" focusable=\"false\"><text class=\"index\" x=\"7\" y=\"22\"></text> <g class=\"middle\"></g><g transform=\"rotate(180 50 70)\"><text class=\"corner\" x=\"7\" y=\"16\"></text> <text class=\"letter\" x=\"7\" y=\"29\"></text></g></svg>",
+	"parts": [
+		[1, [0, 0]],
+		[
+			2,
+			[0],
+			2
+		],
+		[1, [0, 2]],
+		[1, [
+			0,
+			3,
+			0
+		]],
+		[1, [
+			0,
+			3,
+			2
+		]]
+	],
+	"segments": [
+		"<svg class=\"face\" viewBox=\"0 0 100 140\" aria-hidden=\"true\" focusable=\"false\"><text class=\"index\" x=\"7\" y=\"22\">",
+		{
+			"k": "child",
+			"in": "text",
+			"svg": true
+		},
+		"</text> ",
+		{
+			"k": "child",
+			"in": "svg",
+			"svg": true
+		},
+		"<g class=\"middle\">",
+		{
+			"k": "child",
+			"in": "g",
+			"svg": true
+		},
+		"</g><g transform=\"rotate(180 50 70)\"><text class=\"corner\" x=\"7\" y=\"16\">",
+		{
+			"k": "child",
+			"in": "text",
+			"svg": true
+		},
+		"</text> <text class=\"letter\" x=\"7\" y=\"29\">",
+		{
+			"k": "child",
+			"in": "text",
+			"svg": true
+		},
+		"</text></g></svg>"
+	]
+};
+/** Suit shapes in a 100 × 100 box, each its own silhouette. */
+var SUIT_PATHS = {
+	S: "M50 4C64 26 94 40 94 62C94 76 84 85 72 85C63 85 56 80 53 73C54 83 59 91 67 96H33C41 91 46 83 47 73C44 80 37 85 28 85C16 85 6 76 6 62C6 40 36 26 50 4Z",
+	H: "M50 92C22 70 4 52 4 30C4 14 16 4 29 4C39 4 46 10 50 19C54 10 61 4 71 4C84 4 96 14 96 30C96 52 78 70 50 92Z",
+	D: "M50 2Q64 28 88 50Q64 72 50 98Q36 72 12 50Q36 28 50 2Z",
+	C: "M50 8A19 19 0 1 1 49.9 8ZM27 38A19 19 0 1 1 26.9 38ZM73 38A19 19 0 1 1 72.9 38ZM46 58Q46 84 33 96H67Q54 84 54 58Z"
+};
+var RANK_LABELS = {
+	1: "A",
+	2: "2",
+	3: "3",
+	4: "4",
+	5: "5",
+	6: "6",
+	7: "7",
+	8: "8",
+	9: "9",
+	10: "10",
+	11: "J",
+	12: "Q",
+	13: "K"
+};
+/** The rank as the card prints it: "A", "7", "10", "Q". */
+var rankLabel = (rank) => RANK_LABELS[rank];
+/** The suit symbols, once per table; faces refer to them with `<use>`. */
+var suitDefs = () => compiled(_gyral$t0, [
+	SUIT_PATHS.S,
+	SUIT_PATHS.H,
+	SUIT_PATHS.D,
+	SUIT_PATHS.C
+]);
+/** One suit shape, `size` wide, centered on (x, y); `flip` turns it upside down. */
+var pip = (suit, x, y, size, flip = false, cls = null) => compiledSvg(_gyral$t1, [
+	cls,
+	`#suit-${suit}`,
+	x - size / 2,
+	y - size / 2,
+	size,
+	size,
+	flip ? `rotate(180 ${x} ${y})` : null
+]);
+var L = 31;
+var C = 50;
+var R = 69;
+/** Pip centers for 2–10, in the area below the top strip. Lower pips print upside down. */
+var PIPS = {
+	2: [[C, 44], [C, 118]],
+	3: [
+		[C, 44],
+		[C, 81],
+		[C, 118]
+	],
+	4: [
+		[L, 44],
+		[R, 44],
+		[L, 118],
+		[R, 118]
+	],
+	5: [
+		[L, 44],
+		[R, 44],
+		[C, 81],
+		[L, 118],
+		[R, 118]
+	],
+	6: [
+		[L, 44],
+		[R, 44],
+		[L, 81],
+		[R, 81],
+		[L, 118],
+		[R, 118]
+	],
+	7: [
+		[L, 44],
+		[R, 44],
+		[C, 62],
+		[L, 81],
+		[R, 81],
+		[L, 118],
+		[R, 118]
+	],
+	8: [
+		[L, 44],
+		[R, 44],
+		[C, 62],
+		[L, 81],
+		[R, 81],
+		[C, 100],
+		[L, 118],
+		[R, 118]
+	],
+	9: [
+		[L, 44],
+		[R, 44],
+		[L, 69],
+		[R, 69],
+		[C, 81],
+		[L, 93],
+		[R, 93],
+		[L, 118],
+		[R, 118]
+	],
+	10: [
+		[L, 44],
+		[R, 44],
+		[C, 56],
+		[L, 69],
+		[R, 69],
+		[L, 93],
+		[R, 93],
+		[C, 106],
+		[L, 118],
+		[R, 118]
+	]
+};
+/** A geometric crest above a court card's letter: a crown's points, a band of beads, a chevron. */
+var crest = (rank) => {
+	switch (rank) {
+		case 13: return compiledSvg(_gyral$t2, []);
+		case 12: return compiledSvg(_gyral$t3, []);
+		case 11: return compiledSvg(_gyral$t4, []);
+	}
+};
+/** The middle of a face: pips, the ace's single large shape, or a court card's monogram. */
+var middle = (rank, suit) => {
+	if (rank === 1) return pip(suit, 50, 82, 46);
+	if (rank >= 11) return compiledSvg(_gyral$t5, [
+		crest(rank),
+		RANK_LABELS[rank],
+		pip(suit, 27, 120, 12),
+		pip(suit, 73, 120, 12)
+	]);
+	return (PIPS[rank] ?? []).map(([x, y]) => pip(suit, x, y, 17, y > 82));
+};
+/** A face-up card's art. Decoration only: the pile's accessible name says what the card is. */
+var cardFace = (rank, suit) => compiled(_gyral$t6, [
+	RANK_LABELS[rank],
+	pip(suit, 82, 13, 22, false, "suit-index"),
+	middle(rank, suit),
+	RANK_LABELS[rank],
+	suit
+]);
+//#endregion
+export { PIPS, SUIT_PATHS, cardFace, rankLabel, suitDefs };
+
+//# sourceMappingURL=faces.js.map

package/dist/faces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"faces.js","names":["_gyral$compiled","_gyral$compiledSvg1","court"],"sources":["../src/faces.ts"],"sourcesContent":["// The card art, drawn for Joystyk (klondike.md, \"Theme\"): four suit shapes with distinct\n// silhouettes, number cards with pip layouts, and monogram court cards (a framed letter\n// under a simple geometric crest), never traditional court figures. Every face shows its\n// rank and suit shape in a top strip, the part a fanned column leaves visible, and the rank\n// with the suit's letter in the opposite corner, so a suit never depends on color or on one\n// glyph alone. Faces are SVG in a 100 × 140 box; the card's shape and back are CSS. The\n// strip's rank (`.index`) and suit (`.suit-index`) and the middle (`.middle`) carry classes,\n// so the card table can enlarge the strip on narrow cards (styles.ts).\nimport { html, svg } from '@gyral/core';\nimport type { Rank, Suit } from '@joystyk/kit/cards';\n\n/** Suit shapes in a 100 × 100 box, each its own silhouette. */\nexport const SUIT_PATHS: Readonly<Record<Suit, string>> = {\n  // A spade: a pointed leaf over a flared stem.\n  S: 'M50 4C64 26 94 40 94 62C94 76 84 85 72 85C63 85 56 80 53 73C54 83 59 91 67 96H33C41 91 46 83 47 73C44 80 37 85 28 85C16 85 6 76 6 62C6 40 36 26 50 4Z',\n  // A heart: two round lobes meeting in a point.\n  H: 'M50 92C22 70 4 52 4 30C4 14 16 4 29 4C39 4 46 10 50 19C54 10 61 4 71 4C84 4 96 14 96 30C96 52 78 70 50 92Z',\n  // A diamond with gently curved sides.\n  D: 'M50 2Q64 28 88 50Q64 72 50 98Q36 72 12 50Q36 28 50 2Z',\n  // A club: three round leaves over a flared stem.\n  C: 'M50 8A19 19 0 1 1 49.9 8ZM27 38A19 19 0 1 1 26.9 38ZM73 38A19 19 0 1 1 72.9 38ZM46 58Q46 84 33 96H67Q54 84 54 58Z',\n};\n\nconst RANK_LABELS: Readonly<Record<Rank, string>> = {\n  1: 'A',\n  2: '2',\n  3: '3',\n  4: '4',\n  5: '5',\n  6: '6',\n  7: '7',\n  8: '8',\n  9: '9',\n  10: '10',\n  11: 'J',\n  12: 'Q',\n  13: 'K',\n};\n\n/** The rank as the card prints it: \"A\", \"7\", \"10\", \"Q\". */\nexport const rankLabel = (rank: Rank): string => RANK_LABELS[rank];\n\n/** The suit symbols, once per table; faces refer to them with `<use>`. */\nexport const suitDefs = () =>\n  html`<svg class=\"defs\" width=\"0\" height=\"0\" aria-hidden=\"true\" focusable=\"false\">\n    <defs>\n      <symbol id=\"suit-S\" viewBox=\"0 0 100 100\"><path d=${SUIT_PATHS.S} /></symbol>\n      <symbol id=\"suit-H\" viewBox=\"0 0 100 100\"><path d=${SUIT_PATHS.H} /></symbol>\n      <symbol id=\"suit-D\" viewBox=\"0 0 100 100\"><path d=${SUIT_PATHS.D} /></symbol>\n      <symbol id=\"suit-C\" viewBox=\"0 0 100 100\"><path d=${SUIT_PATHS.C} /></symbol>\n    </defs>\n  </svg>`;\n\n/** One suit shape, `size` wide, centered on (x, y); `flip` turns it upside down. */\nconst pip = (suit: Suit, x: number, y: number, size: number, flip = false, cls: string | null = null) =>\n  svg`<use class=${cls} href=${`#suit-${suit}`} x=${x - size / 2} y=${y - size / 2} width=${size} height=${size} transform=${flip ? `rotate(180 ${x} ${y})` : null} />`;\n\nconst L = 31;\nconst C = 50;\nconst R = 69;\n\n/** Pip centers for 2–10, in the area below the top strip. Lower pips print upside down. */\nexport const PIPS: Readonly<Record<number, readonly (readonly [number, number])[]>> = {\n  2: [\n    [C, 44],\n    [C, 118],\n  ],\n  3: [\n    [C, 44],\n    [C, 81],\n    [C, 118],\n  ],\n  4: [\n    [L, 44],\n    [R, 44],\n    [L, 118],\n    [R, 118],\n  ],\n  5: [\n    [L, 44],\n    [R, 44],\n    [C, 81],\n    [L, 118],\n    [R, 118],\n  ],\n  6: [\n    [L, 44],\n    [R, 44],\n    [L, 81],\n    [R, 81],\n    [L, 118],\n    [R, 118],\n  ],\n  7: [\n    [L, 44],\n    [R, 44],\n    [C, 62],\n    [L, 81],\n    [R, 81],\n    [L, 118],\n    [R, 118],\n  ],\n  8: [\n    [L, 44],\n    [R, 44],\n    [C, 62],\n    [L, 81],\n    [R, 81],\n    [C, 100],\n    [L, 118],\n    [R, 118],\n  ],\n  9: [\n    [L, 44],\n    [R, 44],\n    [L, 69],\n    [R, 69],\n    [C, 81],\n    [L, 93],\n    [R, 93],\n    [L, 118],\n    [R, 118],\n  ],\n  10: [\n    [L, 44],\n    [R, 44],\n    [C, 56],\n    [L, 69],\n    [R, 69],\n    [L, 93],\n    [R, 93],\n    [C, 106],\n    [L, 118],\n    [R, 118],\n  ],\n};\n\n/** A geometric crest above a court card's letter: a crown's points, a band of beads, a chevron. */\nconst crest = (rank: 11 | 12 | 13) => {\n  switch (rank) {\n    case 13:\n      return svg`<path class=\"crest\" d=\"M30 62L34 44L42 54L50 38L58 54L66 44L70 62Z\" />`;\n    case 12:\n      return svg`<g class=\"crest\">\n        <path d=\"M30 60Q50 40 70 60Z\" />\n        <circle cx=\"30\" cy=\"54\" r=\"4\" /><circle cx=\"50\" cy=\"42\" r=\"4.5\" /><circle cx=\"70\" cy=\"54\" r=\"4\" />\n      </g>`;\n    case 11:\n      return svg`<path class=\"crest\" d=\"M30 48L50 60L70 48L70 56L50 68L30 56Z\" />`;\n  }\n};\n\n/** The middle of a face: pips, the ace's single large shape, or a court card's monogram. */\nconst middle = (rank: Rank, suit: Suit) => {\n  if (rank === 1) return pip(suit, 50, 82, 46);\n  if (rank >= 11) {\n    const court = rank as 11 | 12 | 13;\n    return svg`<rect class=\"frame\" x=\"17\" y=\"32\" width=\"66\" height=\"96\" rx=\"9\" />\n      ${crest(court)}\n      <text class=\"monogram\" x=\"50\" y=\"108\" text-anchor=\"middle\">${RANK_LABELS[rank]}</text>\n      ${pip(suit, 27, 120, 12)}${pip(suit, 73, 120, 12)}`;\n  }\n  return (PIPS[rank] ?? []).map(([x, y]) => pip(suit, x, y, 17, y > 82));\n};\n\n/** A face-up card's art. Decoration only: the pile's accessible name says what the card is. */\nexport const cardFace = (rank: Rank, suit: Suit) =>\n  html`<svg class=\"face\" viewBox=\"0 0 100 140\" aria-hidden=\"true\" focusable=\"false\">\n    <text class=\"index\" x=\"7\" y=\"22\">${RANK_LABELS[rank]}</text>\n    ${pip(suit, 82, 13, 22, false, 'suit-index')}\n    <g class=\"middle\">${middle(rank, suit)}</g>\n    <g transform=\"rotate(180 50 70)\">\n      <text class=\"corner\" x=\"7\" y=\"16\">${RANK_LABELS[rank]}</text>\n      <text class=\"letter\" x=\"7\" y=\"29\">${suit}</text>\n    </g>\n  </svg>`;\n"],"mappings":"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"}

package/dist/hand-styles.d.ts

@@ -0,0 +1 @@
+export declare const handStyles: import("@gyral/core").StyleSource;

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"}