@stargazeryan/poker-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ryan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,98 @@
-# Temporary Holding Version
+# @stargazeryan/poker-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Themable **React + Tailwind CSS v4** components for poker tables and playing cards.
+
+- 🃏 `PlayingCard` / `CardBack` / `HoleCards` / `CommunityCards`
+- 🎴 `PokerTable` — a responsive, scale-to-fit oval table with six seats
+- 💺 `Seat` — presentational, fully controlled by a view-model
+- 🎨 Theme tokens via Tailwind v4 `@theme`
+
+## Install
+
+```bash
+npm install @stargazeryan/poker-ui
+```
+
+Peer requirements: `react` >= 18, `react-dom` >= 18, and Tailwind CSS v4.
+
+## Setup (Tailwind v4) — important
+
+This is a **compiled package**, so your app's Tailwind build cannot see the
+class names used inside it. Add the package as a content source and import its
+theme CSS:
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import "@stargazeryan/poker-ui/styles.css";
+
+@source "../node_modules/@stargazeryan/poker-ui";
+```
+
+> Without the `@source` line, the components render unstyled. Adjust the path to
+> wherever your `node_modules` lives.
+
+## Usage
+
+```tsx
+import { PokerTable, PlayingCard, CardBack, type SeatView } from "@stargazeryan/poker-ui";
+
+const seats: (SeatView | null)[] = [
+  { nickname: "You", stack: 2000, holeCards: ["As", "Kh"], isYou: true, isDealer: true },
+  { nickname: "Bot", stack: 1500, holeCards: [null, null] },
+  null, null, null, null,
+];
+
+export function Table() {
+  return (
+    <div style={{ height: 640 }}>
+      <PokerTable
+        seats={seats}
+        yourSeatIndex={0}
+        communityCards={["Ah", "Kd", "7c", null, null]}
+        pot={240}
+      />
+    </div>
+  );
+}
+```
+
+Cards use a compact code: rank + suit, suit as `s | h | d | c` — e.g. `"As"`,
+`"10h"`, `"kd"`. Pass `null` for a face-down card back.
+
+## Components
+
+| Component | Purpose |
+| --- | --- |
+| `PlayingCard` | One card (`card`, `size`: `xs \| sm \| md \| lg`) |
+| `CardBack` | Face-down card |
+| `HoleCards` | A row of hole cards |
+| `CommunityCards` | Five community cards with a staggered deal animation |
+| `Seat` | Presentational seat (`seat: SeatView \| null`) |
+| `PokerTable` | Full table; `seats`, `yourSeatIndex`, `communityCards`, `pot`/`pots`, `seatSize`, `renderSeat` |
+
+Also exported: `cn`, `formatBB`, `BB`, `parseCard`, `getSuitSymbol`,
+and the types `SeatView`, `PokerTableProps`, `PotRow`, `CardSize`.
+
+## Theming
+
+Override the tokens in your own `@theme` block, or pass `className` props:
+
+```css
+@theme {
+  --color-felt: #0b3d2e;
+  --color-gold: #ffcc33;
+}
+```
+
+## Demo
+
+```bash
+npm install
+npm run demo        # Vite dev server
+npm run demo:build  # static build
+```
+
+## License
+
+MIT © 2026 Ryan

package/dist/index.cjs

@@ -0,0 +1,386 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BB: () => BB,
+  CardBack: () => CardBack,
+  CommunityCards: () => CommunityCards,
+  HoleCards: () => HoleCards,
+  PlayingCard: () => PlayingCard,
+  PokerTable: () => PokerTable,
+  Seat: () => Seat,
+  cn: () => cn,
+  formatBB: () => formatBB,
+  getSuitSymbol: () => getSuitSymbol,
+  parseCard: () => parseCard
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/cn.ts
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/format.ts
+var BB = 20;
+function formatBB(amount) {
+  const bb = amount / BB;
+  return `${Number.isInteger(bb) ? bb : bb.toFixed(1)} BB`;
+}
+
+// src/components/PlayingCard.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SIZE_CLASSES = {
+  xs: "w-8 h-11",
+  sm: "w-10 h-14",
+  md: "w-16 h-22",
+  lg: "w-24 h-32"
+};
+var CORNER_RANK = {
+  xs: "text-[11px]",
+  sm: "text-sm",
+  md: "text-lg",
+  lg: "text-2xl"
+};
+var CORNER_SUIT = {
+  xs: "text-[9px]",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var CENTER_SUIT = {
+  xs: "text-base",
+  sm: "text-xl",
+  md: "text-3xl",
+  lg: "text-5xl"
+};
+var BACK_EMBLEM_SIZE = {
+  xs: 14,
+  sm: 18,
+  md: 28,
+  lg: 42
+};
+function parseCard(card) {
+  if (!card || card.length < 2) return { rank: "", suit: "" };
+  return { rank: card.slice(0, -1), suit: card.slice(-1) };
+}
+function getSuitSymbol(suit) {
+  switch (suit) {
+    case "s":
+      return "\u2660";
+    case "h":
+      return "\u2665";
+    case "d":
+      return "\u2666";
+    case "c":
+      return "\u2663";
+    default:
+      return suit;
+  }
+}
+function getSuitClass(suit) {
+  switch (suit) {
+    case "s":
+    case "c":
+      return "text-neutral-900";
+    case "h":
+    case "d":
+      return "text-red-600";
+    default:
+      return "";
+  }
+}
+function PlayingCard({ card, size = "md", className }) {
+  if (!card) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardBack, { size, className });
+  const { rank, suit } = parseCard(card);
+  const suitSymbol = getSuitSymbol(suit);
+  const suitClass = getSuitClass(suit);
+  const showCenter = size === "md" || size === "lg";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cn(
+        SIZE_CLASSES[size],
+        "relative bg-gradient-to-br from-white via-white to-neutral-100",
+        "rounded-md border border-neutral-300/90 overflow-hidden",
+        "shadow-[0_2px_6px_rgba(0,0,0,0.45),inset_0_1px_0_rgba(255,255,255,0.9)]",
+        className
+      ),
+      style: { aspectRatio: "10/14" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("absolute top-[3px] left-[5px] flex flex-col items-center leading-none", suitClass), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(CORNER_RANK[size], "font-bold tracking-tight"), children: rank }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(CORNER_SUIT[size], "-mt-[1px]"), children: suitSymbol })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("absolute bottom-[3px] right-[5px] flex flex-col items-center leading-none rotate-180", suitClass), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(CORNER_RANK[size], "font-bold tracking-tight"), children: rank }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(CORNER_SUIT[size], "-mt-[1px]"), children: suitSymbol })
+        ] }),
+        showCenter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("absolute inset-0 flex items-center justify-center opacity-90", suitClass), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: CENTER_SUIT[size], children: suitSymbol }) })
+      ]
+    }
+  );
+}
+function CardBackEmblem({ size }) {
+  const s = BACK_EMBLEM_SIZE[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: s, height: s, viewBox: "0 0 40 40", className: "drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { fill: "#f0c04a", opacity: "0.92", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "20", cy: "11", rx: "4", ry: "7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "20", cy: "29", rx: "4", ry: "7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "11", cy: "20", rx: "7", ry: "4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "29", cy: "20", rx: "7", ry: "4" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "20", r: "3.2", fill: "#5a0c18" })
+  ] });
+}
+function CardBack({ size = "md", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: cn(
+        SIZE_CLASSES[size],
+        "relative rounded-md p-[3px] overflow-hidden",
+        "bg-gradient-to-br from-[#7a1020] via-[#5a0c18] to-[#3f0810]",
+        "border-2 border-[#c9a24b]/70 shadow-[0_2px_6px_rgba(0,0,0,0.45)]",
+        className
+      ),
+      style: { aspectRatio: "10/14" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full rounded-[4px] border border-white/20 flex items-center justify-center bg-[repeating-linear-gradient(45deg,rgba(255,255,255,0.09)_0_6px,transparent_6px_12px),repeating-linear-gradient(-45deg,rgba(255,255,255,0.06)_0_6px,transparent_6px_12px)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardBackEmblem, { size }) })
+    }
+  );
+}
+function HoleCards({ cards, size = "lg", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("flex gap-2", className), children: cards.map((card, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlayingCard, { card, size }, i)) });
+}
+function CommunityCards({ cards, size = "md", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("flex gap-1.5", className), children: cards.map((card, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-card-deal", style: { animationDelay: `${i * 90}ms` }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlayingCard, { card, size }) }, i)) });
+}
+
+// src/components/Seat.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Seat({ seat, size = "sm", className }) {
+  if (!seat) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: cn(
+          "w-40 h-44 rounded-2xl border-2 border-dashed border-white/10",
+          "flex items-center justify-center text-white/20 text-xs",
+          className
+        ),
+        children: "Empty seat"
+      }
+    );
+  }
+  const showCards = !seat.folded && !seat.busted && !!seat.holeCards && seat.holeCards.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("relative w-40 h-44", className), children: [
+    seat.actionLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "animate-bubble-pop absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-white px-2.5 py-1 text-[11px] font-semibold text-neutral-900 shadow-lg", children: seat.actionLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className: cn(
+          "flex h-full w-full flex-col items-center justify-between rounded-2xl border bg-neutral-900/80 p-2 backdrop-blur",
+          seat.isTurn ? "border-cyan-400 shadow-[0_0_18px_rgba(34,211,238,0.55)]" : "border-neutral-700",
+          seat.isWinner && "border-amber-400 shadow-[0_0_18px_rgba(251,191,36,0.6)]",
+          seat.folded && "opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex w-full items-center justify-between text-[11px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "truncate font-semibold text-neutral-100", children: [
+              seat.isWinner ? "\u{1F451} " : "",
+              seat.nickname,
+              seat.isYou ? " \u{1F448}" : ""
+            ] }),
+            seat.isDealer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-white text-[9px] font-bold text-neutral-900", children: "D" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-1 items-center justify-center", children: seat.busted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-semibold text-red-400", children: "Busted" }) : showCards ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HoleCards, { cards: seat.holeCards, size }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CardBack, { size }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CardBack, { size })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex w-full items-center justify-between text-[11px] text-neutral-300", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-mono", children: formatBB(seat.stack) }),
+            seat.allIn ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rounded bg-red-600/80 px-1.5 text-[10px] font-bold text-white", children: "ALL-IN" }) : seat.currentBet && seat.currentBet > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-mono text-amber-300", children: formatBB(seat.currentBet) }) : null
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/PokerTable.tsx
+var import_react = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SEAT_COUNT = 6;
+var SEAT_W = 160;
+var SEAT_H = 176;
+var DESIGN_W = 1200;
+var DESIGN_H = 900;
+var MARGIN_X = 164;
+var MARGIN_Y = 196;
+var TABLE_RX = DESIGN_W / 2 - MARGIN_X;
+var TABLE_RY = DESIGN_H / 2 - MARGIN_Y;
+var FELT_GAP = 11;
+var BET_SCALE = 0.72;
+var BET_RX = TABLE_RX * BET_SCALE;
+var BET_RY = TABLE_RY * BET_SCALE;
+var SEAT_RING_X = TABLE_RX - FELT_GAP + SEAT_W / 2 + 6;
+var SEAT_RING_Y = TABLE_RY - FELT_GAP + SEAT_H / 2 + 6;
+var BASE_ANGLES = [-90, -30, 30, 90, 150, 210];
+function getEllipsePoint(cx, cy, rx, ry, angleDeg) {
+  const rad = angleDeg * Math.PI / 180;
+  return { x: cx + rx * Math.cos(rad), y: cy + ry * Math.sin(rad) };
+}
+function calculateSeatLayouts(seats, yourSeatIndex) {
+  const cx = DESIGN_W / 2;
+  const cy = DESIGN_H / 2;
+  const rotationOffset = yourSeatIndex !== null ? BASE_ANGLES[3] - BASE_ANGLES[yourSeatIndex] : 0;
+  const layouts = [];
+  for (let i = 0; i < SEAT_COUNT; i++) {
+    const pt = getEllipsePoint(cx, cy, SEAT_RING_X, SEAT_RING_Y, BASE_ANGLES[i] + rotationOffset);
+    layouts.push({
+      x: pt.x - SEAT_W / 2,
+      y: pt.y - SEAT_H / 2,
+      logicalIndex: i,
+      isYou: i === yourSeatIndex,
+      seat: seats[i] ?? null
+    });
+  }
+  return layouts;
+}
+function PokerTable({
+  seats,
+  yourSeatIndex = null,
+  communityCards = [],
+  pot = 0,
+  pots = [],
+  isWaiting = false,
+  winnerSeats = [],
+  seatSize = "sm",
+  renderSeat,
+  className
+}) {
+  const outerRef = (0, import_react.useRef)(null);
+  const [scale, setScale] = (0, import_react.useState)(1);
+  const layouts = (0, import_react.useMemo)(
+    () => calculateSeatLayouts(seats, yourSeatIndex),
+    [seats, yourSeatIndex]
+  );
+  (0, import_react.useLayoutEffect)(() => {
+    const el = outerRef.current;
+    if (!el) return;
+    const compute = () => {
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      if (!w || !h) return;
+      setScale(Math.min(w / DESIGN_W, h / DESIGN_H));
+    };
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const tableFrameInset = { inset: `${MARGIN_Y}px ${MARGIN_X}px` };
+  const feltInset = { inset: `${MARGIN_Y + FELT_GAP}px ${MARGIN_X + FELT_GAP}px` };
+  const rimInset = { inset: `${MARGIN_Y + 6}px ${MARGIN_X + 6}px` };
+  const betLineInset = {
+    inset: `${MARGIN_Y + (TABLE_RY - BET_RY)}px ${MARGIN_X + (TABLE_RX - BET_RX)}px`
+  };
+  const potRows = pots.length > 0 ? pots : pot > 0 ? [{ label: "Pot", amount: pot }] : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref: outerRef,
+      className: cn("relative flex h-full w-full items-center justify-center overflow-hidden min-h-0", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { width: DESIGN_W * scale, height: DESIGN_H * scale }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: "relative",
+          style: { width: DESIGN_W, height: DESIGN_H, transform: `scale(${scale})`, transformOrigin: "top left" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: "absolute -inset-6 rounded-[50%] bg-[radial-gradient(closest-side,rgba(240,192,74,0.16),transparent_72%)] blur-3xl",
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: "absolute rounded-[50%] bg-gradient-to-b from-[#a5744a] via-[#6b3f22] to-[#38200f] shadow-[0_26px_70px_-12px_rgba(0,0,0,0.85),inset_0_3px_0_rgba(255,255,255,0.20),inset_0_-6px_16px_rgba(0,0,0,0.5)]",
+                style: tableFrameInset,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: "absolute rounded-[50%] bg-[radial-gradient(ellipse_at_50%_32%,#23804b,#0f4d2e_55%,#093b22)] shadow-[inset_0_0_90px_rgba(0,0,0,0.55),inset_0_3px_10px_rgba(255,255,255,0.06)]",
+                style: feltInset,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: "absolute rounded-[50%] border-2 border-white/10 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.25)]",
+                style: betLineInset,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute flex items-center justify-center pointer-events-none", style: feltInset, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-white/[0.05] text-[110px] font-black tracking-[0.2em] select-none leading-none", children: "\u2660\u2665\u2666\u2663" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CommunityCards, { cards: communityCards, size: "lg", className: "filter drop-shadow-lg" }),
+                potRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col items-center gap-1", children: potRows.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 font-mono text-sm text-amber-400", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-neutral-400", children: p.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "whitespace-nowrap rounded-full border border-amber-400/50 bg-neutral-900/80 px-3 py-1 shadow-inner", children: formatBB(p.amount) })
+                ] }, i)) })
+              ] }),
+              isWaiting && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded-full border border-neutral-700 bg-neutral-900/70 px-3 py-1 text-xs text-neutral-400", children: "Waiting to start" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 z-20 pointer-events-none", children: layouts.map(({ x, y, logicalIndex, isYou, seat }) => {
+              const merged = seat ? { ...seat, isYou, isWinner: winnerSeats.includes(logicalIndex) || seat.isWinner } : null;
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute", style: { left: `${x}px`, top: `${y}px` }, children: renderSeat ? renderSeat(merged, logicalIndex) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Seat, { seat: merged, size: seatSize }) }, logicalIndex);
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute rounded-[50%] border border-white/10 pointer-events-none", style: rimInset, "aria-hidden": "true" })
+          ]
+        }
+      ) })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BB,
+  CardBack,
+  CommunityCards,
+  HoleCards,
+  PlayingCard,
+  PokerTable,
+  Seat,
+  cn,
+  formatBB,
+  getSuitSymbol,
+  parseCard
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/cn.ts","../src/format.ts","../src/components/PlayingCard.tsx","../src/components/Seat.tsx","../src/components/PokerTable.tsx"],"sourcesContent":["export { cn } from \"./cn\";\nexport { BB, formatBB } from \"./format\";\n\nexport {\n  PlayingCard,\n  CardBack,\n  HoleCards,\n  CommunityCards,\n  parseCard,\n  getSuitSymbol,\n  type PlayingCardProps,\n  type CardBackProps,\n  type HoleCardsProps,\n  type CommunityCardsProps,\n  type CardSize,\n} from \"./components/PlayingCard\";\n\nexport { Seat, type SeatProps, type SeatView } from \"./components/Seat\";\n\nexport { PokerTable, type PokerTableProps, type PotRow } from \"./components/PokerTable\";\n","export function cn(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(\" \");\n}\n","/** Big Blind value used for stack display. */\nexport const BB = 20;\n\n/** Format a chip amount as a Big-Blind string, e.g. 1234 -> \"61.7 BB\". */\nexport function formatBB(amount: number): string {\n  const bb = amount / BB;\n  return `${Number.isInteger(bb) ? bb : bb.toFixed(1)} BB`;\n}\n","import { cn } from \"../cn\";\n\nexport type CardSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nconst SIZE_CLASSES: Record<CardSize, string> = {\n  xs: \"w-8 h-11\",\n  sm: \"w-10 h-14\",\n  md: \"w-16 h-22\",\n  lg: \"w-24 h-32\",\n};\n\nconst CORNER_RANK: Record<CardSize, string> = {\n  xs: \"text-[11px]\",\n  sm: \"text-sm\",\n  md: \"text-lg\",\n  lg: \"text-2xl\",\n};\nconst CORNER_SUIT: Record<CardSize, string> = {\n  xs: \"text-[9px]\",\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n};\nconst CENTER_SUIT: Record<CardSize, string> = {\n  xs: \"text-base\",\n  sm: \"text-xl\",\n  md: \"text-3xl\",\n  lg: \"text-5xl\",\n};\nconst BACK_EMBLEM_SIZE: Record<CardSize, number> = {\n  xs: 14,\n  sm: 18,\n  md: 28,\n  lg: 42,\n};\n\n/** Parse a compact card code like \"As\", \"10h\", \"kd\" into rank + suit. */\nexport function parseCard(card: string): { rank: string; suit: string } {\n  if (!card || card.length < 2) return { rank: \"\", suit: \"\" };\n  return { rank: card.slice(0, -1), suit: card.slice(-1) };\n}\n\nexport function getSuitSymbol(suit: string): string {\n  switch (suit) {\n    case \"s\": return \"♠\";\n    case \"h\": return \"♥\";\n    case \"d\": return \"♦\";\n    case \"c\": return \"♣\";\n    default: return suit;\n  }\n}\n\nfunction getSuitClass(suit: string): string {\n  switch (suit) {\n    case \"s\":\n    case \"c\":\n      return \"text-neutral-900\";\n    case \"h\":\n    case \"d\":\n      return \"text-red-600\";\n    default:\n      return \"\";\n  }\n}\n\nexport interface PlayingCardProps {\n  /** Compact card code (\"As\", \"10h\") or null to render a face-down card back. */\n  card: string | null;\n  size?: CardSize;\n  className?: string;\n}\n\n/**\n * A single playing card. Size is driven by the `size` prop (never viewport\n * breakpoints) so cards scale predictably inside any container.\n */\nexport function PlayingCard({ card, size = \"md\", className }: PlayingCardProps) {\n  if (!card) return <CardBack size={size} className={className} />;\n\n  const { rank, suit } = parseCard(card);\n  const suitSymbol = getSuitSymbol(suit);\n  const suitClass = getSuitClass(suit);\n  const showCenter = size === \"md\" || size === \"lg\";\n\n  return (\n    <div\n      className={cn(\n        SIZE_CLASSES[size],\n        \"relative bg-gradient-to-br from-white via-white to-neutral-100\",\n        \"rounded-md border border-neutral-300/90 overflow-hidden\",\n        \"shadow-[0_2px_6px_rgba(0,0,0,0.45),inset_0_1px_0_rgba(255,255,255,0.9)]\",\n        className,\n      )}\n      style={{ aspectRatio: \"10/14\" }}\n    >\n      <div className={cn(\"absolute top-[3px] left-[5px] flex flex-col items-center leading-none\", suitClass)}>\n        <span className={cn(CORNER_RANK[size], \"font-bold tracking-tight\")}>{rank}</span>\n        <span className={cn(CORNER_SUIT[size], \"-mt-[1px]\")}>{suitSymbol}</span>\n      </div>\n      <div className={cn(\"absolute bottom-[3px] right-[5px] flex flex-col items-center leading-none rotate-180\", suitClass)}>\n        <span className={cn(CORNER_RANK[size], \"font-bold tracking-tight\")}>{rank}</span>\n        <span className={cn(CORNER_SUIT[size], \"-mt-[1px]\")}>{suitSymbol}</span>\n      </div>\n      {showCenter && (\n        <div className={cn(\"absolute inset-0 flex items-center justify-center opacity-90\", suitClass)}>\n          <span className={CENTER_SUIT[size]}>{suitSymbol}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface CardBackProps {\n  size?: CardSize;\n  className?: string;\n}\n\nfunction CardBackEmblem({ size }: { size: CardSize }) {\n  const s = BACK_EMBLEM_SIZE[size];\n  return (\n    <svg width={s} height={s} viewBox=\"0 0 40 40\" className=\"drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]\" aria-hidden=\"true\">\n      <g fill=\"#f0c04a\" opacity=\"0.92\">\n        <ellipse cx=\"20\" cy=\"11\" rx=\"4\" ry=\"7\" />\n        <ellipse cx=\"20\" cy=\"29\" rx=\"4\" ry=\"7\" />\n        <ellipse cx=\"11\" cy=\"20\" rx=\"7\" ry=\"4\" />\n        <ellipse cx=\"29\" cy=\"20\" rx=\"7\" ry=\"4\" />\n      </g>\n      <circle cx=\"20\" cy=\"20\" r=\"3.2\" fill=\"#5a0c18\" />\n    </svg>\n  );\n}\n\n/** The face-down card back (dark red + gold rosette). */\nexport function CardBack({ size = \"md\", className }: CardBackProps) {\n  return (\n    <div\n      className={cn(\n        SIZE_CLASSES[size],\n        \"relative rounded-md p-[3px] overflow-hidden\",\n        \"bg-gradient-to-br from-[#7a1020] via-[#5a0c18] to-[#3f0810]\",\n        \"border-2 border-[#c9a24b]/70 shadow-[0_2px_6px_rgba(0,0,0,0.45)]\",\n        className,\n      )}\n      style={{ aspectRatio: \"10/14\" }}\n    >\n      <div className=\"h-full w-full rounded-[4px] border border-white/20 flex items-center justify-center bg-[repeating-linear-gradient(45deg,rgba(255,255,255,0.09)_0_6px,transparent_6px_12px),repeating-linear-gradient(-45deg,rgba(255,255,255,0.06)_0_6px,transparent_6px_12px)]\">\n        <CardBackEmblem size={size} />\n      </div>\n    </div>\n  );\n}\n\nexport interface HoleCardsProps {\n  cards: (string | null)[];\n  size?: CardSize;\n  className?: string;\n}\n\n/** A row of a player's two hole cards. */\nexport function HoleCards({ cards, size = \"lg\", className }: HoleCardsProps) {\n  return (\n    <div className={cn(\"flex gap-2\", className)}>\n      {cards.map((card, i) => (\n        <PlayingCard key={i} card={card} size={size} />\n      ))}\n    </div>\n  );\n}\n\nexport interface CommunityCardsProps {\n  cards: (string | null)[];\n  size?: CardSize;\n  className?: string;\n}\n\n/** The five community cards, each dealt with a staggered flip animation. */\nexport function CommunityCards({ cards, size = \"md\", className }: CommunityCardsProps) {\n  return (\n    <div className={cn(\"flex gap-1.5\", className)}>\n      {cards.map((card, i) => (\n        <div key={i} className=\"animate-card-deal\" style={{ animationDelay: `${i * 90}ms` }}>\n          <PlayingCard card={card} size={size} />\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { cn } from \"../cn\";\nimport { formatBB } from \"../format\";\nimport { CardBack, HoleCards, type CardSize } from \"./PlayingCard\";\n\n/** Presentational view-model for one seat (no game logic). */\nexport interface SeatView {\n  nickname: string;\n  stack: number;\n  holeCards?: (string | null)[] | null;\n  isDealer?: boolean;\n  isTurn?: boolean;\n  folded?: boolean;\n  busted?: boolean;\n  allIn?: boolean;\n  currentBet?: number;\n  isYou?: boolean;\n  isWinner?: boolean;\n  /** Optional short label shown in a bubble (e.g. \"Raise 500\"). */\n  actionLabel?: string | null;\n}\n\nexport interface SeatProps {\n  seat: SeatView | null;\n  size?: CardSize;\n  className?: string;\n}\n\n/**\n * A presentational seat: nickname, stack, hole cards, dealer/turn/winner\n * markers. It is fully controlled — all state arrives through `seat`.\n */\nexport function Seat({ seat, size = \"sm\", className }: SeatProps) {\n  if (!seat) {\n    return (\n      <div\n        className={cn(\n          \"w-40 h-44 rounded-2xl border-2 border-dashed border-white/10\",\n          \"flex items-center justify-center text-white/20 text-xs\",\n          className,\n        )}\n      >\n        Empty seat\n      </div>\n    );\n  }\n\n  const showCards = !seat.folded && !seat.busted && !!seat.holeCards && seat.holeCards.length > 0;\n\n  return (\n    <div className={cn(\"relative w-40 h-44\", className)}>\n      {seat.actionLabel && (\n        <div className=\"animate-bubble-pop absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-white px-2.5 py-1 text-[11px] font-semibold text-neutral-900 shadow-lg\">\n          {seat.actionLabel}\n        </div>\n      )}\n\n      <div\n        className={cn(\n          \"flex h-full w-full flex-col items-center justify-between rounded-2xl border bg-neutral-900/80 p-2 backdrop-blur\",\n          seat.isTurn ? \"border-cyan-400 shadow-[0_0_18px_rgba(34,211,238,0.55)]\" : \"border-neutral-700\",\n          seat.isWinner && \"border-amber-400 shadow-[0_0_18px_rgba(251,191,36,0.6)]\",\n          seat.folded && \"opacity-50\",\n        )}\n      >\n        <div className=\"flex w-full items-center justify-between text-[11px]\">\n          <span className=\"truncate font-semibold text-neutral-100\">\n            {seat.isWinner ? \"👑 \" : \"\"}\n            {seat.nickname}\n            {seat.isYou ? \" 👈\" : \"\"}\n          </span>\n          {seat.isDealer && (\n            <span className=\"flex h-4 w-4 items-center justify-center rounded-full bg-white text-[9px] font-bold text-neutral-900\">\n              D\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex flex-1 items-center justify-center\">\n          {seat.busted ? (\n            <span className=\"text-xs font-semibold text-red-400\">Busted</span>\n          ) : showCards ? (\n            <HoleCards cards={seat.holeCards as (string | null)[]} size={size} />\n          ) : (\n            <div className=\"flex gap-2\">\n              <CardBack size={size} />\n              <CardBack size={size} />\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex w-full items-center justify-between text-[11px] text-neutral-300\">\n          <span className=\"font-mono\">{formatBB(seat.stack)}</span>\n          {seat.allIn ? (\n            <span className=\"rounded bg-red-600/80 px-1.5 text-[10px] font-bold text-white\">ALL-IN</span>\n          ) : seat.currentBet && seat.currentBet > 0 ? (\n            <span className=\"font-mono text-amber-300\">{formatBB(seat.currentBet)}</span>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import { useRef, useLayoutEffect, useState, useMemo } from \"react\";\nimport { cn } from \"../cn\";\nimport { formatBB } from \"../format\";\nimport { CommunityCards, type CardSize } from \"./PlayingCard\";\nimport { Seat, type SeatView } from \"./Seat\";\n\nexport interface PotRow {\n  label: string;\n  amount: number;\n}\n\nexport interface PokerTableProps {\n  /** Six seats (some may be empty). */\n  seats: (SeatView | null)[];\n  /** Which seat belongs to the viewer; rotates that seat to the bottom. */\n  yourSeatIndex?: number | null;\n  communityCards?: (string | null)[];\n  pot?: number;\n  pots?: PotRow[];\n  isWaiting?: boolean;\n  winnerSeats?: number[];\n  seatSize?: CardSize;\n  /** Optional override for rendering a seat. */\n  renderSeat?: (seat: SeatView | null, index: number) => React.ReactNode;\n  className?: string;\n}\n\nconst SEAT_COUNT = 6;\nconst SEAT_W = 160;\nconst SEAT_H = 176;\nconst DESIGN_W = 1200;\nconst DESIGN_H = 900;\nconst MARGIN_X = 164;\nconst MARGIN_Y = 196;\nconst TABLE_RX = DESIGN_W / 2 - MARGIN_X;\nconst TABLE_RY = DESIGN_H / 2 - MARGIN_Y;\nconst FELT_GAP = 11;\nconst BET_SCALE = 0.72;\nconst BET_RX = TABLE_RX * BET_SCALE;\nconst BET_RY = TABLE_RY * BET_SCALE;\nconst SEAT_RING_X = TABLE_RX - FELT_GAP + SEAT_W / 2 + 6;\nconst SEAT_RING_Y = TABLE_RY - FELT_GAP + SEAT_H / 2 + 6;\n\nconst BASE_ANGLES = [-90, -30, 30, 90, 150, 210];\n\ninterface SeatLayout {\n  x: number;\n  y: number;\n  logicalIndex: number;\n  isYou: boolean;\n  seat: SeatView | null;\n}\n\nfunction getEllipsePoint(cx: number, cy: number, rx: number, ry: number, angleDeg: number) {\n  const rad = (angleDeg * Math.PI) / 180;\n  return { x: cx + rx * Math.cos(rad), y: cy + ry * Math.sin(rad) };\n}\n\nfunction calculateSeatLayouts(\n  seats: (SeatView | null)[],\n  yourSeatIndex: number | null,\n): SeatLayout[] {\n  const cx = DESIGN_W / 2;\n  const cy = DESIGN_H / 2;\n  const rotationOffset =\n    yourSeatIndex !== null ? BASE_ANGLES[3] - BASE_ANGLES[yourSeatIndex] : 0;\n\n  const layouts: SeatLayout[] = [];\n  for (let i = 0; i < SEAT_COUNT; i++) {\n    const pt = getEllipsePoint(cx, cy, SEAT_RING_X, SEAT_RING_Y, BASE_ANGLES[i] + rotationOffset);\n    layouts.push({\n      x: pt.x - SEAT_W / 2,\n      y: pt.y - SEAT_H / 2,\n      logicalIndex: i,\n      isYou: i === yourSeatIndex,\n      seat: seats[i] ?? null,\n    });\n  }\n  return layouts;\n}\n\n/**\n * A responsive, themable poker table. It scales a fixed 1200x900 design onto\n * its container and arranges six seats around the felt. Purely presentational:\n * pass seat view-models and card codes in.\n */\nexport function PokerTable({\n  seats,\n  yourSeatIndex = null,\n  communityCards = [],\n  pot = 0,\n  pots = [],\n  isWaiting = false,\n  winnerSeats = [],\n  seatSize = \"sm\",\n  renderSeat,\n  className,\n}: PokerTableProps) {\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [scale, setScale] = useState(1);\n\n  const layouts = useMemo(\n    () => calculateSeatLayouts(seats, yourSeatIndex),\n    [seats, yourSeatIndex],\n  );\n\n  useLayoutEffect(() => {\n    const el = outerRef.current;\n    if (!el) return;\n    const compute = () => {\n      const w = el.clientWidth;\n      const h = el.clientHeight;\n      if (!w || !h) return;\n      setScale(Math.min(w / DESIGN_W, h / DESIGN_H));\n    };\n    compute();\n    const ro = new ResizeObserver(compute);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const tableFrameInset = { inset: `${MARGIN_Y}px ${MARGIN_X}px` };\n  const feltInset = { inset: `${MARGIN_Y + FELT_GAP}px ${MARGIN_X + FELT_GAP}px` };\n  const rimInset = { inset: `${MARGIN_Y + 6}px ${MARGIN_X + 6}px` };\n  const betLineInset = {\n    inset: `${MARGIN_Y + (TABLE_RY - BET_RY)}px ${MARGIN_X + (TABLE_RX - BET_RX)}px`,\n  };\n\n  const potRows: PotRow[] = pots.length > 0 ? pots : pot > 0 ? [{ label: \"Pot\", amount: pot }] : [];\n\n  return (\n    <div\n      ref={outerRef}\n      className={cn(\"relative flex h-full w-full items-center justify-center overflow-hidden min-h-0\", className)}\n    >\n      <div style={{ width: DESIGN_W * scale, height: DESIGN_H * scale }}>\n        <div\n          className=\"relative\"\n          style={{ width: DESIGN_W, height: DESIGN_H, transform: `scale(${scale})`, transformOrigin: \"top left\" }}\n        >\n          {/* ambient spotlight */}\n          <div\n            className=\"absolute -inset-6 rounded-[50%] bg-[radial-gradient(closest-side,rgba(240,192,74,0.16),transparent_72%)] blur-3xl\"\n            aria-hidden=\"true\"\n          />\n\n          {/* wooden rail */}\n          <div\n            className=\"absolute rounded-[50%] bg-gradient-to-b from-[#a5744a] via-[#6b3f22] to-[#38200f] shadow-[0_26px_70px_-12px_rgba(0,0,0,0.85),inset_0_3px_0_rgba(255,255,255,0.20),inset_0_-6px_16px_rgba(0,0,0,0.5)]\"\n            style={tableFrameInset}\n            aria-hidden=\"true\"\n          />\n\n          {/* felt */}\n          <div\n            className=\"absolute rounded-[50%] bg-[radial-gradient(ellipse_at_50%_32%,#23804b,#0f4d2e_55%,#093b22)] shadow-[inset_0_0_90px_rgba(0,0,0,0.55),inset_0_3px_10px_rgba(255,255,255,0.06)]\"\n            style={feltInset}\n            aria-hidden=\"true\"\n          />\n\n          {/* betting line */}\n          <div\n            className=\"absolute rounded-[50%] border-2 border-white/10 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.25)]\"\n            style={betLineInset}\n            aria-hidden=\"true\"\n          />\n\n          {/* center suit watermark */}\n          <div className=\"absolute flex items-center justify-center pointer-events-none\" style={feltInset} aria-hidden=\"true\">\n            <span className=\"text-white/[0.05] text-[110px] font-black tracking-[0.2em] select-none leading-none\">\n              ♠♥♦♣\n            </span>\n          </div>\n\n          {/* center: community cards + pots */}\n          <div className=\"absolute inset-0 flex flex-col items-center justify-center pointer-events-none\">\n            <div className=\"mb-4 flex flex-col items-center gap-3\">\n              <CommunityCards cards={communityCards} size=\"lg\" className=\"filter drop-shadow-lg\" />\n              {potRows.length > 0 && (\n                <div className=\"flex flex-col items-center gap-1\">\n                  {potRows.map((p, i) => (\n                    <div key={i} className=\"flex items-center gap-2 font-mono text-sm text-amber-400\">\n                      <span className=\"text-neutral-400\">{p.label}</span>\n                      <span className=\"whitespace-nowrap rounded-full border border-amber-400/50 bg-neutral-900/80 px-3 py-1 shadow-inner\">\n                        {formatBB(p.amount)}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n            {isWaiting && (\n              <div className=\"rounded-full border border-neutral-700 bg-neutral-900/70 px-3 py-1 text-xs text-neutral-400\">\n                Waiting to start\n              </div>\n            )}\n          </div>\n\n          {/* seats */}\n          <div className=\"absolute inset-0 z-20 pointer-events-none\">\n            {layouts.map(({ x, y, logicalIndex, isYou, seat }) => {\n              const merged: SeatView | null = seat\n                ? { ...seat, isYou, isWinner: winnerSeats.includes(logicalIndex) || seat.isWinner }\n                : null;\n              return (\n                <div key={logicalIndex} className=\"absolute\" style={{ left: `${x}px`, top: `${y}px` }}>\n                  {renderSeat ? renderSeat(merged, logicalIndex) : <Seat seat={merged} size={seatSize} />}\n                </div>\n              );\n            })}\n          </div>\n\n          {/* outer rim highlight */}\n          <div className=\"absolute rounded-[50%] border border-white/10 pointer-events-none\" style={rimInset} aria-hidden=\"true\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -0,0 +1,102 @@
+import * as react from 'react';
+
+declare function cn(...parts: Array<string | false | null | undefined>): string;
+
+/** Big Blind value used for stack display. */
+declare const BB = 20;
+/** Format a chip amount as a Big-Blind string, e.g. 1234 -> "61.7 BB". */
+declare function formatBB(amount: number): string;
+
+type CardSize = "xs" | "sm" | "md" | "lg";
+/** Parse a compact card code like "As", "10h", "kd" into rank + suit. */
+declare function parseCard(card: string): {
+    rank: string;
+    suit: string;
+};
+declare function getSuitSymbol(suit: string): string;
+interface PlayingCardProps {
+    /** Compact card code ("As", "10h") or null to render a face-down card back. */
+    card: string | null;
+    size?: CardSize;
+    className?: string;
+}
+/**
+ * A single playing card. Size is driven by the `size` prop (never viewport
+ * breakpoints) so cards scale predictably inside any container.
+ */
+declare function PlayingCard({ card, size, className }: PlayingCardProps): react.JSX.Element;
+interface CardBackProps {
+    size?: CardSize;
+    className?: string;
+}
+/** The face-down card back (dark red + gold rosette). */
+declare function CardBack({ size, className }: CardBackProps): react.JSX.Element;
+interface HoleCardsProps {
+    cards: (string | null)[];
+    size?: CardSize;
+    className?: string;
+}
+/** A row of a player's two hole cards. */
+declare function HoleCards({ cards, size, className }: HoleCardsProps): react.JSX.Element;
+interface CommunityCardsProps {
+    cards: (string | null)[];
+    size?: CardSize;
+    className?: string;
+}
+/** The five community cards, each dealt with a staggered flip animation. */
+declare function CommunityCards({ cards, size, className }: CommunityCardsProps): react.JSX.Element;
+
+/** Presentational view-model for one seat (no game logic). */
+interface SeatView {
+    nickname: string;
+    stack: number;
+    holeCards?: (string | null)[] | null;
+    isDealer?: boolean;
+    isTurn?: boolean;
+    folded?: boolean;
+    busted?: boolean;
+    allIn?: boolean;
+    currentBet?: number;
+    isYou?: boolean;
+    isWinner?: boolean;
+    /** Optional short label shown in a bubble (e.g. "Raise 500"). */
+    actionLabel?: string | null;
+}
+interface SeatProps {
+    seat: SeatView | null;
+    size?: CardSize;
+    className?: string;
+}
+/**
+ * A presentational seat: nickname, stack, hole cards, dealer/turn/winner
+ * markers. It is fully controlled — all state arrives through `seat`.
+ */
+declare function Seat({ seat, size, className }: SeatProps): react.JSX.Element;
+
+interface PotRow {
+    label: string;
+    amount: number;
+}
+interface PokerTableProps {
+    /** Six seats (some may be empty). */
+    seats: (SeatView | null)[];
+    /** Which seat belongs to the viewer; rotates that seat to the bottom. */
+    yourSeatIndex?: number | null;
+    communityCards?: (string | null)[];
+    pot?: number;
+    pots?: PotRow[];
+    isWaiting?: boolean;
+    winnerSeats?: number[];
+    seatSize?: CardSize;
+    /** Optional override for rendering a seat. */
+    renderSeat?: (seat: SeatView | null, index: number) => React.ReactNode;
+    className?: string;
+}
+/**
+ * A responsive, themable poker table. It scales a fixed 1200x900 design onto
+ * its container and arranges six seats around the felt. Purely presentational:
+ * pass seat view-models and card codes in.
+ */
+declare function PokerTable({ seats, yourSeatIndex, communityCards, pot, pots, isWaiting, winnerSeats, seatSize, renderSeat, className, }: PokerTableProps): react.JSX.Element;
+
+export { BB, CardBack, type CardBackProps, type CardSize, CommunityCards, type CommunityCardsProps, HoleCards, type HoleCardsProps, PlayingCard, type PlayingCardProps, PokerTable, type PokerTableProps, type PotRow, Seat, type SeatProps, type SeatView, cn, formatBB, getSuitSymbol, parseCard };

package/dist/index.d.ts

@@ -0,0 +1,102 @@
+import * as react from 'react';
+
+declare function cn(...parts: Array<string | false | null | undefined>): string;
+
+/** Big Blind value used for stack display. */
+declare const BB = 20;
+/** Format a chip amount as a Big-Blind string, e.g. 1234 -> "61.7 BB". */
+declare function formatBB(amount: number): string;
+
+type CardSize = "xs" | "sm" | "md" | "lg";
+/** Parse a compact card code like "As", "10h", "kd" into rank + suit. */
+declare function parseCard(card: string): {
+    rank: string;
+    suit: string;
+};
+declare function getSuitSymbol(suit: string): string;
+interface PlayingCardProps {
+    /** Compact card code ("As", "10h") or null to render a face-down card back. */
+    card: string | null;
+    size?: CardSize;
+    className?: string;
+}
+/**
+ * A single playing card. Size is driven by the `size` prop (never viewport
+ * breakpoints) so cards scale predictably inside any container.
+ */
+declare function PlayingCard({ card, size, className }: PlayingCardProps): react.JSX.Element;
+interface CardBackProps {
+    size?: CardSize;
+    className?: string;
+}
+/** The face-down card back (dark red + gold rosette). */
+declare function CardBack({ size, className }: CardBackProps): react.JSX.Element;
+interface HoleCardsProps {
+    cards: (string | null)[];
+    size?: CardSize;
+    className?: string;
+}
+/** A row of a player's two hole cards. */
+declare function HoleCards({ cards, size, className }: HoleCardsProps): react.JSX.Element;
+interface CommunityCardsProps {
+    cards: (string | null)[];
+    size?: CardSize;
+    className?: string;
+}
+/** The five community cards, each dealt with a staggered flip animation. */
+declare function CommunityCards({ cards, size, className }: CommunityCardsProps): react.JSX.Element;
+
+/** Presentational view-model for one seat (no game logic). */
+interface SeatView {
+    nickname: string;
+    stack: number;
+    holeCards?: (string | null)[] | null;
+    isDealer?: boolean;
+    isTurn?: boolean;
+    folded?: boolean;
+    busted?: boolean;
+    allIn?: boolean;
+    currentBet?: number;
+    isYou?: boolean;
+    isWinner?: boolean;
+    /** Optional short label shown in a bubble (e.g. "Raise 500"). */
+    actionLabel?: string | null;
+}
+interface SeatProps {
+    seat: SeatView | null;
+    size?: CardSize;
+    className?: string;
+}
+/**
+ * A presentational seat: nickname, stack, hole cards, dealer/turn/winner
+ * markers. It is fully controlled — all state arrives through `seat`.
+ */
+declare function Seat({ seat, size, className }: SeatProps): react.JSX.Element;
+
+interface PotRow {
+    label: string;
+    amount: number;
+}
+interface PokerTableProps {
+    /** Six seats (some may be empty). */
+    seats: (SeatView | null)[];
+    /** Which seat belongs to the viewer; rotates that seat to the bottom. */
+    yourSeatIndex?: number | null;
+    communityCards?: (string | null)[];
+    pot?: number;
+    pots?: PotRow[];
+    isWaiting?: boolean;
+    winnerSeats?: number[];
+    seatSize?: CardSize;
+    /** Optional override for rendering a seat. */
+    renderSeat?: (seat: SeatView | null, index: number) => React.ReactNode;
+    className?: string;
+}
+/**
+ * A responsive, themable poker table. It scales a fixed 1200x900 design onto
+ * its container and arranges six seats around the felt. Purely presentational:
+ * pass seat view-models and card codes in.
+ */
+declare function PokerTable({ seats, yourSeatIndex, communityCards, pot, pots, isWaiting, winnerSeats, seatSize, renderSeat, className, }: PokerTableProps): react.JSX.Element;
+
+export { BB, CardBack, type CardBackProps, type CardSize, CommunityCards, type CommunityCardsProps, HoleCards, type HoleCardsProps, PlayingCard, type PlayingCardProps, PokerTable, type PokerTableProps, type PotRow, Seat, type SeatProps, type SeatView, cn, formatBB, getSuitSymbol, parseCard };

package/dist/index.js

@@ -0,0 +1,350 @@
+"use client";
+
+// src/cn.ts
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/format.ts
+var BB = 20;
+function formatBB(amount) {
+  const bb = amount / BB;
+  return `${Number.isInteger(bb) ? bb : bb.toFixed(1)} BB`;
+}
+
+// src/components/PlayingCard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SIZE_CLASSES = {
+  xs: "w-8 h-11",
+  sm: "w-10 h-14",
+  md: "w-16 h-22",
+  lg: "w-24 h-32"
+};
+var CORNER_RANK = {
+  xs: "text-[11px]",
+  sm: "text-sm",
+  md: "text-lg",
+  lg: "text-2xl"
+};
+var CORNER_SUIT = {
+  xs: "text-[9px]",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var CENTER_SUIT = {
+  xs: "text-base",
+  sm: "text-xl",
+  md: "text-3xl",
+  lg: "text-5xl"
+};
+var BACK_EMBLEM_SIZE = {
+  xs: 14,
+  sm: 18,
+  md: 28,
+  lg: 42
+};
+function parseCard(card) {
+  if (!card || card.length < 2) return { rank: "", suit: "" };
+  return { rank: card.slice(0, -1), suit: card.slice(-1) };
+}
+function getSuitSymbol(suit) {
+  switch (suit) {
+    case "s":
+      return "\u2660";
+    case "h":
+      return "\u2665";
+    case "d":
+      return "\u2666";
+    case "c":
+      return "\u2663";
+    default:
+      return suit;
+  }
+}
+function getSuitClass(suit) {
+  switch (suit) {
+    case "s":
+    case "c":
+      return "text-neutral-900";
+    case "h":
+    case "d":
+      return "text-red-600";
+    default:
+      return "";
+  }
+}
+function PlayingCard({ card, size = "md", className }) {
+  if (!card) return /* @__PURE__ */ jsx(CardBack, { size, className });
+  const { rank, suit } = parseCard(card);
+  const suitSymbol = getSuitSymbol(suit);
+  const suitClass = getSuitClass(suit);
+  const showCenter = size === "md" || size === "lg";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        SIZE_CLASSES[size],
+        "relative bg-gradient-to-br from-white via-white to-neutral-100",
+        "rounded-md border border-neutral-300/90 overflow-hidden",
+        "shadow-[0_2px_6px_rgba(0,0,0,0.45),inset_0_1px_0_rgba(255,255,255,0.9)]",
+        className
+      ),
+      style: { aspectRatio: "10/14" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("absolute top-[3px] left-[5px] flex flex-col items-center leading-none", suitClass), children: [
+          /* @__PURE__ */ jsx("span", { className: cn(CORNER_RANK[size], "font-bold tracking-tight"), children: rank }),
+          /* @__PURE__ */ jsx("span", { className: cn(CORNER_SUIT[size], "-mt-[1px]"), children: suitSymbol })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cn("absolute bottom-[3px] right-[5px] flex flex-col items-center leading-none rotate-180", suitClass), children: [
+          /* @__PURE__ */ jsx("span", { className: cn(CORNER_RANK[size], "font-bold tracking-tight"), children: rank }),
+          /* @__PURE__ */ jsx("span", { className: cn(CORNER_SUIT[size], "-mt-[1px]"), children: suitSymbol })
+        ] }),
+        showCenter && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 flex items-center justify-center opacity-90", suitClass), children: /* @__PURE__ */ jsx("span", { className: CENTER_SUIT[size], children: suitSymbol }) })
+      ]
+    }
+  );
+}
+function CardBackEmblem({ size }) {
+  const s = BACK_EMBLEM_SIZE[size];
+  return /* @__PURE__ */ jsxs("svg", { width: s, height: s, viewBox: "0 0 40 40", className: "drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxs("g", { fill: "#f0c04a", opacity: "0.92", children: [
+      /* @__PURE__ */ jsx("ellipse", { cx: "20", cy: "11", rx: "4", ry: "7" }),
+      /* @__PURE__ */ jsx("ellipse", { cx: "20", cy: "29", rx: "4", ry: "7" }),
+      /* @__PURE__ */ jsx("ellipse", { cx: "11", cy: "20", rx: "7", ry: "4" }),
+      /* @__PURE__ */ jsx("ellipse", { cx: "29", cy: "20", rx: "7", ry: "4" })
+    ] }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "3.2", fill: "#5a0c18" })
+  ] });
+}
+function CardBack({ size = "md", className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        SIZE_CLASSES[size],
+        "relative rounded-md p-[3px] overflow-hidden",
+        "bg-gradient-to-br from-[#7a1020] via-[#5a0c18] to-[#3f0810]",
+        "border-2 border-[#c9a24b]/70 shadow-[0_2px_6px_rgba(0,0,0,0.45)]",
+        className
+      ),
+      style: { aspectRatio: "10/14" },
+      children: /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-[4px] border border-white/20 flex items-center justify-center bg-[repeating-linear-gradient(45deg,rgba(255,255,255,0.09)_0_6px,transparent_6px_12px),repeating-linear-gradient(-45deg,rgba(255,255,255,0.06)_0_6px,transparent_6px_12px)]", children: /* @__PURE__ */ jsx(CardBackEmblem, { size }) })
+    }
+  );
+}
+function HoleCards({ cards, size = "lg", className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", className), children: cards.map((card, i) => /* @__PURE__ */ jsx(PlayingCard, { card, size }, i)) });
+}
+function CommunityCards({ cards, size = "md", className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-1.5", className), children: cards.map((card, i) => /* @__PURE__ */ jsx("div", { className: "animate-card-deal", style: { animationDelay: `${i * 90}ms` }, children: /* @__PURE__ */ jsx(PlayingCard, { card, size }) }, i)) });
+}
+
+// src/components/Seat.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Seat({ seat, size = "sm", className }) {
+  if (!seat) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn(
+          "w-40 h-44 rounded-2xl border-2 border-dashed border-white/10",
+          "flex items-center justify-center text-white/20 text-xs",
+          className
+        ),
+        children: "Empty seat"
+      }
+    );
+  }
+  const showCards = !seat.folded && !seat.busted && !!seat.holeCards && seat.holeCards.length > 0;
+  return /* @__PURE__ */ jsxs2("div", { className: cn("relative w-40 h-44", className), children: [
+    seat.actionLabel && /* @__PURE__ */ jsx2("div", { className: "animate-bubble-pop absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-white px-2.5 py-1 text-[11px] font-semibold text-neutral-900 shadow-lg", children: seat.actionLabel }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(
+          "flex h-full w-full flex-col items-center justify-between rounded-2xl border bg-neutral-900/80 p-2 backdrop-blur",
+          seat.isTurn ? "border-cyan-400 shadow-[0_0_18px_rgba(34,211,238,0.55)]" : "border-neutral-700",
+          seat.isWinner && "border-amber-400 shadow-[0_0_18px_rgba(251,191,36,0.6)]",
+          seat.folded && "opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex w-full items-center justify-between text-[11px]", children: [
+            /* @__PURE__ */ jsxs2("span", { className: "truncate font-semibold text-neutral-100", children: [
+              seat.isWinner ? "\u{1F451} " : "",
+              seat.nickname,
+              seat.isYou ? " \u{1F448}" : ""
+            ] }),
+            seat.isDealer && /* @__PURE__ */ jsx2("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-white text-[9px] font-bold text-neutral-900", children: "D" })
+          ] }),
+          /* @__PURE__ */ jsx2("div", { className: "flex flex-1 items-center justify-center", children: seat.busted ? /* @__PURE__ */ jsx2("span", { className: "text-xs font-semibold text-red-400", children: "Busted" }) : showCards ? /* @__PURE__ */ jsx2(HoleCards, { cards: seat.holeCards, size }) : /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx2(CardBack, { size }),
+            /* @__PURE__ */ jsx2(CardBack, { size })
+          ] }) }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex w-full items-center justify-between text-[11px] text-neutral-300", children: [
+            /* @__PURE__ */ jsx2("span", { className: "font-mono", children: formatBB(seat.stack) }),
+            seat.allIn ? /* @__PURE__ */ jsx2("span", { className: "rounded bg-red-600/80 px-1.5 text-[10px] font-bold text-white", children: "ALL-IN" }) : seat.currentBet && seat.currentBet > 0 ? /* @__PURE__ */ jsx2("span", { className: "font-mono text-amber-300", children: formatBB(seat.currentBet) }) : null
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/PokerTable.tsx
+import { useRef, useLayoutEffect, useState, useMemo } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SEAT_COUNT = 6;
+var SEAT_W = 160;
+var SEAT_H = 176;
+var DESIGN_W = 1200;
+var DESIGN_H = 900;
+var MARGIN_X = 164;
+var MARGIN_Y = 196;
+var TABLE_RX = DESIGN_W / 2 - MARGIN_X;
+var TABLE_RY = DESIGN_H / 2 - MARGIN_Y;
+var FELT_GAP = 11;
+var BET_SCALE = 0.72;
+var BET_RX = TABLE_RX * BET_SCALE;
+var BET_RY = TABLE_RY * BET_SCALE;
+var SEAT_RING_X = TABLE_RX - FELT_GAP + SEAT_W / 2 + 6;
+var SEAT_RING_Y = TABLE_RY - FELT_GAP + SEAT_H / 2 + 6;
+var BASE_ANGLES = [-90, -30, 30, 90, 150, 210];
+function getEllipsePoint(cx, cy, rx, ry, angleDeg) {
+  const rad = angleDeg * Math.PI / 180;
+  return { x: cx + rx * Math.cos(rad), y: cy + ry * Math.sin(rad) };
+}
+function calculateSeatLayouts(seats, yourSeatIndex) {
+  const cx = DESIGN_W / 2;
+  const cy = DESIGN_H / 2;
+  const rotationOffset = yourSeatIndex !== null ? BASE_ANGLES[3] - BASE_ANGLES[yourSeatIndex] : 0;
+  const layouts = [];
+  for (let i = 0; i < SEAT_COUNT; i++) {
+    const pt = getEllipsePoint(cx, cy, SEAT_RING_X, SEAT_RING_Y, BASE_ANGLES[i] + rotationOffset);
+    layouts.push({
+      x: pt.x - SEAT_W / 2,
+      y: pt.y - SEAT_H / 2,
+      logicalIndex: i,
+      isYou: i === yourSeatIndex,
+      seat: seats[i] ?? null
+    });
+  }
+  return layouts;
+}
+function PokerTable({
+  seats,
+  yourSeatIndex = null,
+  communityCards = [],
+  pot = 0,
+  pots = [],
+  isWaiting = false,
+  winnerSeats = [],
+  seatSize = "sm",
+  renderSeat,
+  className
+}) {
+  const outerRef = useRef(null);
+  const [scale, setScale] = useState(1);
+  const layouts = useMemo(
+    () => calculateSeatLayouts(seats, yourSeatIndex),
+    [seats, yourSeatIndex]
+  );
+  useLayoutEffect(() => {
+    const el = outerRef.current;
+    if (!el) return;
+    const compute = () => {
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      if (!w || !h) return;
+      setScale(Math.min(w / DESIGN_W, h / DESIGN_H));
+    };
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const tableFrameInset = { inset: `${MARGIN_Y}px ${MARGIN_X}px` };
+  const feltInset = { inset: `${MARGIN_Y + FELT_GAP}px ${MARGIN_X + FELT_GAP}px` };
+  const rimInset = { inset: `${MARGIN_Y + 6}px ${MARGIN_X + 6}px` };
+  const betLineInset = {
+    inset: `${MARGIN_Y + (TABLE_RY - BET_RY)}px ${MARGIN_X + (TABLE_RX - BET_RX)}px`
+  };
+  const potRows = pots.length > 0 ? pots : pot > 0 ? [{ label: "Pot", amount: pot }] : [];
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: outerRef,
+      className: cn("relative flex h-full w-full items-center justify-center overflow-hidden min-h-0", className),
+      children: /* @__PURE__ */ jsx3("div", { style: { width: DESIGN_W * scale, height: DESIGN_H * scale }, children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: "relative",
+          style: { width: DESIGN_W, height: DESIGN_H, transform: `scale(${scale})`, transformOrigin: "top left" },
+          children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: "absolute -inset-6 rounded-[50%] bg-[radial-gradient(closest-side,rgba(240,192,74,0.16),transparent_72%)] blur-3xl",
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: "absolute rounded-[50%] bg-gradient-to-b from-[#a5744a] via-[#6b3f22] to-[#38200f] shadow-[0_26px_70px_-12px_rgba(0,0,0,0.85),inset_0_3px_0_rgba(255,255,255,0.20),inset_0_-6px_16px_rgba(0,0,0,0.5)]",
+                style: tableFrameInset,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: "absolute rounded-[50%] bg-[radial-gradient(ellipse_at_50%_32%,#23804b,#0f4d2e_55%,#093b22)] shadow-[inset_0_0_90px_rgba(0,0,0,0.55),inset_0_3px_10px_rgba(255,255,255,0.06)]",
+                style: feltInset,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: "absolute rounded-[50%] border-2 border-white/10 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.25)]",
+                style: betLineInset,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx3("div", { className: "absolute flex items-center justify-center pointer-events-none", style: feltInset, "aria-hidden": "true", children: /* @__PURE__ */ jsx3("span", { className: "text-white/[0.05] text-[110px] font-black tracking-[0.2em] select-none leading-none", children: "\u2660\u2665\u2666\u2663" }) }),
+            /* @__PURE__ */ jsxs3("div", { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "mb-4 flex flex-col items-center gap-3", children: [
+                /* @__PURE__ */ jsx3(CommunityCards, { cards: communityCards, size: "lg", className: "filter drop-shadow-lg" }),
+                potRows.length > 0 && /* @__PURE__ */ jsx3("div", { className: "flex flex-col items-center gap-1", children: potRows.map((p, i) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 font-mono text-sm text-amber-400", children: [
+                  /* @__PURE__ */ jsx3("span", { className: "text-neutral-400", children: p.label }),
+                  /* @__PURE__ */ jsx3("span", { className: "whitespace-nowrap rounded-full border border-amber-400/50 bg-neutral-900/80 px-3 py-1 shadow-inner", children: formatBB(p.amount) })
+                ] }, i)) })
+              ] }),
+              isWaiting && /* @__PURE__ */ jsx3("div", { className: "rounded-full border border-neutral-700 bg-neutral-900/70 px-3 py-1 text-xs text-neutral-400", children: "Waiting to start" })
+            ] }),
+            /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 z-20 pointer-events-none", children: layouts.map(({ x, y, logicalIndex, isYou, seat }) => {
+              const merged = seat ? { ...seat, isYou, isWinner: winnerSeats.includes(logicalIndex) || seat.isWinner } : null;
+              return /* @__PURE__ */ jsx3("div", { className: "absolute", style: { left: `${x}px`, top: `${y}px` }, children: renderSeat ? renderSeat(merged, logicalIndex) : /* @__PURE__ */ jsx3(Seat, { seat: merged, size: seatSize }) }, logicalIndex);
+            }) }),
+            /* @__PURE__ */ jsx3("div", { className: "absolute rounded-[50%] border border-white/10 pointer-events-none", style: rimInset, "aria-hidden": "true" })
+          ]
+        }
+      ) })
+    }
+  );
+}
+export {
+  BB,
+  CardBack,
+  CommunityCards,
+  HoleCards,
+  PlayingCard,
+  PokerTable,
+  Seat,
+  cn,
+  formatBB,
+  getSuitSymbol,
+  parseCard
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cn.ts","../src/format.ts","../src/components/PlayingCard.tsx","../src/components/Seat.tsx","../src/components/PokerTable.tsx"],"sourcesContent":["export function cn(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(\" \");\n}\n","/** Big Blind value used for stack display. */\nexport const BB = 20;\n\n/** Format a chip amount as a Big-Blind string, e.g. 1234 -> \"61.7 BB\". */\nexport function formatBB(amount: number): string {\n  const bb = amount / BB;\n  return `${Number.isInteger(bb) ? bb : bb.toFixed(1)} BB`;\n}\n","import { cn } from \"../cn\";\n\nexport type CardSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nconst SIZE_CLASSES: Record<CardSize, string> = {\n  xs: \"w-8 h-11\",\n  sm: \"w-10 h-14\",\n  md: \"w-16 h-22\",\n  lg: \"w-24 h-32\",\n};\n\nconst CORNER_RANK: Record<CardSize, string> = {\n  xs: \"text-[11px]\",\n  sm: \"text-sm\",\n  md: \"text-lg\",\n  lg: \"text-2xl\",\n};\nconst CORNER_SUIT: Record<CardSize, string> = {\n  xs: \"text-[9px]\",\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n};\nconst CENTER_SUIT: Record<CardSize, string> = {\n  xs: \"text-base\",\n  sm: \"text-xl\",\n  md: \"text-3xl\",\n  lg: \"text-5xl\",\n};\nconst BACK_EMBLEM_SIZE: Record<CardSize, number> = {\n  xs: 14,\n  sm: 18,\n  md: 28,\n  lg: 42,\n};\n\n/** Parse a compact card code like \"As\", \"10h\", \"kd\" into rank + suit. */\nexport function parseCard(card: string): { rank: string; suit: string } {\n  if (!card || card.length < 2) return { rank: \"\", suit: \"\" };\n  return { rank: card.slice(0, -1), suit: card.slice(-1) };\n}\n\nexport function getSuitSymbol(suit: string): string {\n  switch (suit) {\n    case \"s\": return \"♠\";\n    case \"h\": return \"♥\";\n    case \"d\": return \"♦\";\n    case \"c\": return \"♣\";\n    default: return suit;\n  }\n}\n\nfunction getSuitClass(suit: string): string {\n  switch (suit) {\n    case \"s\":\n    case \"c\":\n      return \"text-neutral-900\";\n    case \"h\":\n    case \"d\":\n      return \"text-red-600\";\n    default:\n      return \"\";\n  }\n}\n\nexport interface PlayingCardProps {\n  /** Compact card code (\"As\", \"10h\") or null to render a face-down card back. */\n  card: string | null;\n  size?: CardSize;\n  className?: string;\n}\n\n/**\n * A single playing card. Size is driven by the `size` prop (never viewport\n * breakpoints) so cards scale predictably inside any container.\n */\nexport function PlayingCard({ card, size = \"md\", className }: PlayingCardProps) {\n  if (!card) return <CardBack size={size} className={className} />;\n\n  const { rank, suit } = parseCard(card);\n  const suitSymbol = getSuitSymbol(suit);\n  const suitClass = getSuitClass(suit);\n  const showCenter = size === \"md\" || size === \"lg\";\n\n  return (\n    <div\n      className={cn(\n        SIZE_CLASSES[size],\n        \"relative bg-gradient-to-br from-white via-white to-neutral-100\",\n        \"rounded-md border border-neutral-300/90 overflow-hidden\",\n        \"shadow-[0_2px_6px_rgba(0,0,0,0.45),inset_0_1px_0_rgba(255,255,255,0.9)]\",\n        className,\n      )}\n      style={{ aspectRatio: \"10/14\" }}\n    >\n      <div className={cn(\"absolute top-[3px] left-[5px] flex flex-col items-center leading-none\", suitClass)}>\n        <span className={cn(CORNER_RANK[size], \"font-bold tracking-tight\")}>{rank}</span>\n        <span className={cn(CORNER_SUIT[size], \"-mt-[1px]\")}>{suitSymbol}</span>\n      </div>\n      <div className={cn(\"absolute bottom-[3px] right-[5px] flex flex-col items-center leading-none rotate-180\", suitClass)}>\n        <span className={cn(CORNER_RANK[size], \"font-bold tracking-tight\")}>{rank}</span>\n        <span className={cn(CORNER_SUIT[size], \"-mt-[1px]\")}>{suitSymbol}</span>\n      </div>\n      {showCenter && (\n        <div className={cn(\"absolute inset-0 flex items-center justify-center opacity-90\", suitClass)}>\n          <span className={CENTER_SUIT[size]}>{suitSymbol}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface CardBackProps {\n  size?: CardSize;\n  className?: string;\n}\n\nfunction CardBackEmblem({ size }: { size: CardSize }) {\n  const s = BACK_EMBLEM_SIZE[size];\n  return (\n    <svg width={s} height={s} viewBox=\"0 0 40 40\" className=\"drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]\" aria-hidden=\"true\">\n      <g fill=\"#f0c04a\" opacity=\"0.92\">\n        <ellipse cx=\"20\" cy=\"11\" rx=\"4\" ry=\"7\" />\n        <ellipse cx=\"20\" cy=\"29\" rx=\"4\" ry=\"7\" />\n        <ellipse cx=\"11\" cy=\"20\" rx=\"7\" ry=\"4\" />\n        <ellipse cx=\"29\" cy=\"20\" rx=\"7\" ry=\"4\" />\n      </g>\n      <circle cx=\"20\" cy=\"20\" r=\"3.2\" fill=\"#5a0c18\" />\n    </svg>\n  );\n}\n\n/** The face-down card back (dark red + gold rosette). */\nexport function CardBack({ size = \"md\", className }: CardBackProps) {\n  return (\n    <div\n      className={cn(\n        SIZE_CLASSES[size],\n        \"relative rounded-md p-[3px] overflow-hidden\",\n        \"bg-gradient-to-br from-[#7a1020] via-[#5a0c18] to-[#3f0810]\",\n        \"border-2 border-[#c9a24b]/70 shadow-[0_2px_6px_rgba(0,0,0,0.45)]\",\n        className,\n      )}\n      style={{ aspectRatio: \"10/14\" }}\n    >\n      <div className=\"h-full w-full rounded-[4px] border border-white/20 flex items-center justify-center bg-[repeating-linear-gradient(45deg,rgba(255,255,255,0.09)_0_6px,transparent_6px_12px),repeating-linear-gradient(-45deg,rgba(255,255,255,0.06)_0_6px,transparent_6px_12px)]\">\n        <CardBackEmblem size={size} />\n      </div>\n    </div>\n  );\n}\n\nexport interface HoleCardsProps {\n  cards: (string | null)[];\n  size?: CardSize;\n  className?: string;\n}\n\n/** A row of a player's two hole cards. */\nexport function HoleCards({ cards, size = \"lg\", className }: HoleCardsProps) {\n  return (\n    <div className={cn(\"flex gap-2\", className)}>\n      {cards.map((card, i) => (\n        <PlayingCard key={i} card={card} size={size} />\n      ))}\n    </div>\n  );\n}\n\nexport interface CommunityCardsProps {\n  cards: (string | null)[];\n  size?: CardSize;\n  className?: string;\n}\n\n/** The five community cards, each dealt with a staggered flip animation. */\nexport function CommunityCards({ cards, size = \"md\", className }: CommunityCardsProps) {\n  return (\n    <div className={cn(\"flex gap-1.5\", className)}>\n      {cards.map((card, i) => (\n        <div key={i} className=\"animate-card-deal\" style={{ animationDelay: `${i * 90}ms` }}>\n          <PlayingCard card={card} size={size} />\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { cn } from \"../cn\";\nimport { formatBB } from \"../format\";\nimport { CardBack, HoleCards, type CardSize } from \"./PlayingCard\";\n\n/** Presentational view-model for one seat (no game logic). */\nexport interface SeatView {\n  nickname: string;\n  stack: number;\n  holeCards?: (string | null)[] | null;\n  isDealer?: boolean;\n  isTurn?: boolean;\n  folded?: boolean;\n  busted?: boolean;\n  allIn?: boolean;\n  currentBet?: number;\n  isYou?: boolean;\n  isWinner?: boolean;\n  /** Optional short label shown in a bubble (e.g. \"Raise 500\"). */\n  actionLabel?: string | null;\n}\n\nexport interface SeatProps {\n  seat: SeatView | null;\n  size?: CardSize;\n  className?: string;\n}\n\n/**\n * A presentational seat: nickname, stack, hole cards, dealer/turn/winner\n * markers. It is fully controlled — all state arrives through `seat`.\n */\nexport function Seat({ seat, size = \"sm\", className }: SeatProps) {\n  if (!seat) {\n    return (\n      <div\n        className={cn(\n          \"w-40 h-44 rounded-2xl border-2 border-dashed border-white/10\",\n          \"flex items-center justify-center text-white/20 text-xs\",\n          className,\n        )}\n      >\n        Empty seat\n      </div>\n    );\n  }\n\n  const showCards = !seat.folded && !seat.busted && !!seat.holeCards && seat.holeCards.length > 0;\n\n  return (\n    <div className={cn(\"relative w-40 h-44\", className)}>\n      {seat.actionLabel && (\n        <div className=\"animate-bubble-pop absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-white px-2.5 py-1 text-[11px] font-semibold text-neutral-900 shadow-lg\">\n          {seat.actionLabel}\n        </div>\n      )}\n\n      <div\n        className={cn(\n          \"flex h-full w-full flex-col items-center justify-between rounded-2xl border bg-neutral-900/80 p-2 backdrop-blur\",\n          seat.isTurn ? \"border-cyan-400 shadow-[0_0_18px_rgba(34,211,238,0.55)]\" : \"border-neutral-700\",\n          seat.isWinner && \"border-amber-400 shadow-[0_0_18px_rgba(251,191,36,0.6)]\",\n          seat.folded && \"opacity-50\",\n        )}\n      >\n        <div className=\"flex w-full items-center justify-between text-[11px]\">\n          <span className=\"truncate font-semibold text-neutral-100\">\n            {seat.isWinner ? \"👑 \" : \"\"}\n            {seat.nickname}\n            {seat.isYou ? \" 👈\" : \"\"}\n          </span>\n          {seat.isDealer && (\n            <span className=\"flex h-4 w-4 items-center justify-center rounded-full bg-white text-[9px] font-bold text-neutral-900\">\n              D\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex flex-1 items-center justify-center\">\n          {seat.busted ? (\n            <span className=\"text-xs font-semibold text-red-400\">Busted</span>\n          ) : showCards ? (\n            <HoleCards cards={seat.holeCards as (string | null)[]} size={size} />\n          ) : (\n            <div className=\"flex gap-2\">\n              <CardBack size={size} />\n              <CardBack size={size} />\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex w-full items-center justify-between text-[11px] text-neutral-300\">\n          <span className=\"font-mono\">{formatBB(seat.stack)}</span>\n          {seat.allIn ? (\n            <span className=\"rounded bg-red-600/80 px-1.5 text-[10px] font-bold text-white\">ALL-IN</span>\n          ) : seat.currentBet && seat.currentBet > 0 ? (\n            <span className=\"font-mono text-amber-300\">{formatBB(seat.currentBet)}</span>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import { useRef, useLayoutEffect, useState, useMemo } from \"react\";\nimport { cn } from \"../cn\";\nimport { formatBB } from \"../format\";\nimport { CommunityCards, type CardSize } from \"./PlayingCard\";\nimport { Seat, type SeatView } from \"./Seat\";\n\nexport interface PotRow {\n  label: string;\n  amount: number;\n}\n\nexport interface PokerTableProps {\n  /** Six seats (some may be empty). */\n  seats: (SeatView | null)[];\n  /** Which seat belongs to the viewer; rotates that seat to the bottom. */\n  yourSeatIndex?: number | null;\n  communityCards?: (string | null)[];\n  pot?: number;\n  pots?: PotRow[];\n  isWaiting?: boolean;\n  winnerSeats?: number[];\n  seatSize?: CardSize;\n  /** Optional override for rendering a seat. */\n  renderSeat?: (seat: SeatView | null, index: number) => React.ReactNode;\n  className?: string;\n}\n\nconst SEAT_COUNT = 6;\nconst SEAT_W = 160;\nconst SEAT_H = 176;\nconst DESIGN_W = 1200;\nconst DESIGN_H = 900;\nconst MARGIN_X = 164;\nconst MARGIN_Y = 196;\nconst TABLE_RX = DESIGN_W / 2 - MARGIN_X;\nconst TABLE_RY = DESIGN_H / 2 - MARGIN_Y;\nconst FELT_GAP = 11;\nconst BET_SCALE = 0.72;\nconst BET_RX = TABLE_RX * BET_SCALE;\nconst BET_RY = TABLE_RY * BET_SCALE;\nconst SEAT_RING_X = TABLE_RX - FELT_GAP + SEAT_W / 2 + 6;\nconst SEAT_RING_Y = TABLE_RY - FELT_GAP + SEAT_H / 2 + 6;\n\nconst BASE_ANGLES = [-90, -30, 30, 90, 150, 210];\n\ninterface SeatLayout {\n  x: number;\n  y: number;\n  logicalIndex: number;\n  isYou: boolean;\n  seat: SeatView | null;\n}\n\nfunction getEllipsePoint(cx: number, cy: number, rx: number, ry: number, angleDeg: number) {\n  const rad = (angleDeg * Math.PI) / 180;\n  return { x: cx + rx * Math.cos(rad), y: cy + ry * Math.sin(rad) };\n}\n\nfunction calculateSeatLayouts(\n  seats: (SeatView | null)[],\n  yourSeatIndex: number | null,\n): SeatLayout[] {\n  const cx = DESIGN_W / 2;\n  const cy = DESIGN_H / 2;\n  const rotationOffset =\n    yourSeatIndex !== null ? BASE_ANGLES[3] - BASE_ANGLES[yourSeatIndex] : 0;\n\n  const layouts: SeatLayout[] = [];\n  for (let i = 0; i < SEAT_COUNT; i++) {\n    const pt = getEllipsePoint(cx, cy, SEAT_RING_X, SEAT_RING_Y, BASE_ANGLES[i] + rotationOffset);\n    layouts.push({\n      x: pt.x - SEAT_W / 2,\n      y: pt.y - SEAT_H / 2,\n      logicalIndex: i,\n      isYou: i === yourSeatIndex,\n      seat: seats[i] ?? null,\n    });\n  }\n  return layouts;\n}\n\n/**\n * A responsive, themable poker table. It scales a fixed 1200x900 design onto\n * its container and arranges six seats around the felt. Purely presentational:\n * pass seat view-models and card codes in.\n */\nexport function PokerTable({\n  seats,\n  yourSeatIndex = null,\n  communityCards = [],\n  pot = 0,\n  pots = [],\n  isWaiting = false,\n  winnerSeats = [],\n  seatSize = \"sm\",\n  renderSeat,\n  className,\n}: PokerTableProps) {\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [scale, setScale] = useState(1);\n\n  const layouts = useMemo(\n    () => calculateSeatLayouts(seats, yourSeatIndex),\n    [seats, yourSeatIndex],\n  );\n\n  useLayoutEffect(() => {\n    const el = outerRef.current;\n    if (!el) return;\n    const compute = () => {\n      const w = el.clientWidth;\n      const h = el.clientHeight;\n      if (!w || !h) return;\n      setScale(Math.min(w / DESIGN_W, h / DESIGN_H));\n    };\n    compute();\n    const ro = new ResizeObserver(compute);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const tableFrameInset = { inset: `${MARGIN_Y}px ${MARGIN_X}px` };\n  const feltInset = { inset: `${MARGIN_Y + FELT_GAP}px ${MARGIN_X + FELT_GAP}px` };\n  const rimInset = { inset: `${MARGIN_Y + 6}px ${MARGIN_X + 6}px` };\n  const betLineInset = {\n    inset: `${MARGIN_Y + (TABLE_RY - BET_RY)}px ${MARGIN_X + (TABLE_RX - BET_RX)}px`,\n  };\n\n  const potRows: PotRow[] = pots.length > 0 ? pots : pot > 0 ? [{ label: \"Pot\", amount: pot }] : [];\n\n  return (\n    <div\n      ref={outerRef}\n      className={cn(\"relative flex h-full w-full items-center justify-center overflow-hidden min-h-0\", className)}\n    >\n      <div style={{ width: DESIGN_W * scale, height: DESIGN_H * scale }}>\n        <div\n          className=\"relative\"\n          style={{ width: DESIGN_W, height: DESIGN_H, transform: `scale(${scale})`, transformOrigin: \"top left\" }}\n        >\n          {/* ambient spotlight */}\n          <div\n            className=\"absolute -inset-6 rounded-[50%] bg-[radial-gradient(closest-side,rgba(240,192,74,0.16),transparent_72%)] blur-3xl\"\n            aria-hidden=\"true\"\n          />\n\n          {/* wooden rail */}\n          <div\n            className=\"absolute rounded-[50%] bg-gradient-to-b from-[#a5744a] via-[#6b3f22] to-[#38200f] shadow-[0_26px_70px_-12px_rgba(0,0,0,0.85),inset_0_3px_0_rgba(255,255,255,0.20),inset_0_-6px_16px_rgba(0,0,0,0.5)]\"\n            style={tableFrameInset}\n            aria-hidden=\"true\"\n          />\n\n          {/* felt */}\n          <div\n            className=\"absolute rounded-[50%] bg-[radial-gradient(ellipse_at_50%_32%,#23804b,#0f4d2e_55%,#093b22)] shadow-[inset_0_0_90px_rgba(0,0,0,0.55),inset_0_3px_10px_rgba(255,255,255,0.06)]\"\n            style={feltInset}\n            aria-hidden=\"true\"\n          />\n\n          {/* betting line */}\n          <div\n            className=\"absolute rounded-[50%] border-2 border-white/10 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.25)]\"\n            style={betLineInset}\n            aria-hidden=\"true\"\n          />\n\n          {/* center suit watermark */}\n          <div className=\"absolute flex items-center justify-center pointer-events-none\" style={feltInset} aria-hidden=\"true\">\n            <span className=\"text-white/[0.05] text-[110px] font-black tracking-[0.2em] select-none leading-none\">\n              ♠♥♦♣\n            </span>\n          </div>\n\n          {/* center: community cards + pots */}\n          <div className=\"absolute inset-0 flex flex-col items-center justify-center pointer-events-none\">\n            <div className=\"mb-4 flex flex-col items-center gap-3\">\n              <CommunityCards cards={communityCards} size=\"lg\" className=\"filter drop-shadow-lg\" />\n              {potRows.length > 0 && (\n                <div className=\"flex flex-col items-center gap-1\">\n                  {potRows.map((p, i) => (\n                    <div key={i} className=\"flex items-center gap-2 font-mono text-sm text-amber-400\">\n                      <span className=\"text-neutral-400\">{p.label}</span>\n                      <span className=\"whitespace-nowrap rounded-full border border-amber-400/50 bg-neutral-900/80 px-3 py-1 shadow-inner\">\n                        {formatBB(p.amount)}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n            {isWaiting && (\n              <div className=\"rounded-full border border-neutral-700 bg-neutral-900/70 px-3 py-1 text-xs text-neutral-400\">\n                Waiting to start\n              </div>\n            )}\n          </div>\n\n          {/* seats */}\n          <div className=\"absolute inset-0 z-20 pointer-events-none\">\n            {layouts.map(({ x, y, logicalIndex, isYou, seat }) => {\n              const merged: SeatView | null = seat\n                ? { ...seat, isYou, isWinner: winnerSeats.includes(logicalIndex) || seat.isWinner }\n                : null;\n              return (\n                <div key={logicalIndex} className=\"absolute\" style={{ left: `${x}px`, top: `${y}px` }}>\n                  {renderSeat ? renderSeat(merged, logicalIndex) : <Seat seat={merged} size={seatSize} />}\n                </div>\n              );\n            })}\n          </div>\n\n          {/* outer rim highlight */}\n          <div className=\"absolute rounded-[50%] border border-white/10 pointer-events-none\" style={rimInset} aria-hidden=\"true\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAAO,SAAS,MAAM,OAAyD;AAC7E,SAAO,MAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AACvC;;;ACDO,IAAM,KAAK;AAGX,SAAS,SAAS,QAAwB;AAC/C,QAAM,KAAK,SAAS;AACpB,SAAO,GAAG,OAAO,UAAU,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,CAAC;AACrD;;;ACsEoB,cAkBd,YAlBc;AAzEpB,IAAM,eAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,cAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AACA,IAAM,cAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AACA,IAAM,cAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AACA,IAAM,mBAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,SAAS,UAAU,MAA8C;AACtE,MAAI,CAAC,QAAQ,KAAK,SAAS,EAAG,QAAO,EAAE,MAAM,IAAI,MAAM,GAAG;AAC1D,SAAO,EAAE,MAAM,KAAK,MAAM,GAAG,EAAE,GAAG,MAAM,KAAK,MAAM,EAAE,EAAE;AACzD;AAEO,SAAS,cAAc,MAAsB;AAClD,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAK,aAAO;AAAA,IACjB,KAAK;AAAK,aAAO;AAAA,IACjB,KAAK;AAAK,aAAO;AAAA,IACjB,KAAK;AAAK,aAAO;AAAA,IACjB;AAAS,aAAO;AAAA,EAClB;AACF;AAEA,SAAS,aAAa,MAAsB;AAC1C,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAaO,SAAS,YAAY,EAAE,MAAM,OAAO,MAAM,UAAU,GAAqB;AAC9E,MAAI,CAAC,KAAM,QAAO,oBAAC,YAAS,MAAY,WAAsB;AAE9D,QAAM,EAAE,MAAM,KAAK,IAAI,UAAU,IAAI;AACrC,QAAM,aAAa,cAAc,IAAI;AACrC,QAAM,YAAY,aAAa,IAAI;AACnC,QAAM,aAAa,SAAS,QAAQ,SAAS;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,aAAa,IAAI;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,QAAQ;AAAA,MAE9B;AAAA,6BAAC,SAAI,WAAW,GAAG,yEAAyE,SAAS,GACnG;AAAA,8BAAC,UAAK,WAAW,GAAG,YAAY,IAAI,GAAG,0BAA0B,GAAI,gBAAK;AAAA,UAC1E,oBAAC,UAAK,WAAW,GAAG,YAAY,IAAI,GAAG,WAAW,GAAI,sBAAW;AAAA,WACnE;AAAA,QACA,qBAAC,SAAI,WAAW,GAAG,wFAAwF,SAAS,GAClH;AAAA,8BAAC,UAAK,WAAW,GAAG,YAAY,IAAI,GAAG,0BAA0B,GAAI,gBAAK;AAAA,UAC1E,oBAAC,UAAK,WAAW,GAAG,YAAY,IAAI,GAAG,WAAW,GAAI,sBAAW;AAAA,WACnE;AAAA,QACC,cACC,oBAAC,SAAI,WAAW,GAAG,gEAAgE,SAAS,GAC1F,8BAAC,UAAK,WAAW,YAAY,IAAI,GAAI,sBAAW,GAClD;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAOA,SAAS,eAAe,EAAE,KAAK,GAAuB;AACpD,QAAM,IAAI,iBAAiB,IAAI;AAC/B,SACE,qBAAC,SAAI,OAAO,GAAG,QAAQ,GAAG,SAAQ,aAAY,WAAU,2CAA0C,eAAY,QAC5G;AAAA,yBAAC,OAAE,MAAK,WAAU,SAAQ,QACxB;AAAA,0BAAC,aAAQ,IAAG,MAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,MACvC,oBAAC,aAAQ,IAAG,MAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,MACvC,oBAAC,aAAQ,IAAG,MAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,MACvC,oBAAC,aAAQ,IAAG,MAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,OACzC;AAAA,IACA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM,MAAK,WAAU;AAAA,KACjD;AAEJ;AAGO,SAAS,SAAS,EAAE,OAAO,MAAM,UAAU,GAAkB;AAClE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,aAAa,IAAI;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,QAAQ;AAAA,MAE9B,8BAAC,SAAI,WAAU,mQACb,8BAAC,kBAAe,MAAY,GAC9B;AAAA;AAAA,EACF;AAEJ;AASO,SAAS,UAAU,EAAE,OAAO,OAAO,MAAM,UAAU,GAAmB;AAC3E,SACE,oBAAC,SAAI,WAAW,GAAG,cAAc,SAAS,GACvC,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,eAAoB,MAAY,QAAf,CAA2B,CAC9C,GACH;AAEJ;AASO,SAAS,eAAe,EAAE,OAAO,OAAO,MAAM,UAAU,GAAwB;AACrF,SACE,oBAAC,SAAI,WAAW,GAAG,gBAAgB,SAAS,GACzC,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,SAAY,WAAU,qBAAoB,OAAO,EAAE,gBAAgB,GAAG,IAAI,EAAE,KAAK,GAChF,8BAAC,eAAY,MAAY,MAAY,KAD7B,CAEV,CACD,GACH;AAEJ;;;ACxJM,gBAAAA,MA+BI,QAAAC,aA/BJ;AAHC,SAAS,KAAK,EAAE,MAAM,OAAO,MAAM,UAAU,GAAc;AAChE,MAAI,CAAC,MAAM;AACT,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACD;AAAA;AAAA,IAED;AAAA,EAEJ;AAEA,QAAM,YAAY,CAAC,KAAK,UAAU,CAAC,KAAK,UAAU,CAAC,CAAC,KAAK,aAAa,KAAK,UAAU,SAAS;AAE9F,SACE,gBAAAC,MAAC,SAAI,WAAW,GAAG,sBAAsB,SAAS,GAC/C;AAAA,SAAK,eACJ,gBAAAD,KAAC,SAAI,WAAU,yKACZ,eAAK,aACR;AAAA,IAGF,gBAAAC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,KAAK,SAAS,4DAA4D;AAAA,UAC1E,KAAK,YAAY;AAAA,UACjB,KAAK,UAAU;AAAA,QACjB;AAAA,QAEA;AAAA,0BAAAA,MAAC,SAAI,WAAU,wDACb;AAAA,4BAAAA,MAAC,UAAK,WAAU,2CACb;AAAA,mBAAK,WAAW,eAAQ;AAAA,cACxB,KAAK;AAAA,cACL,KAAK,QAAQ,eAAQ;AAAA,eACxB;AAAA,YACC,KAAK,YACJ,gBAAAD,KAAC,UAAK,WAAU,wGAAuG,eAEvH;AAAA,aAEJ;AAAA,UAEA,gBAAAA,KAAC,SAAI,WAAU,2CACZ,eAAK,SACJ,gBAAAA,KAAC,UAAK,WAAU,sCAAqC,oBAAM,IACzD,YACF,gBAAAA,KAAC,aAAU,OAAO,KAAK,WAAgC,MAAY,IAEnE,gBAAAC,MAAC,SAAI,WAAU,cACb;AAAA,4BAAAD,KAAC,YAAS,MAAY;AAAA,YACtB,gBAAAA,KAAC,YAAS,MAAY;AAAA,aACxB,GAEJ;AAAA,UAEA,gBAAAC,MAAC,SAAI,WAAU,yEACb;AAAA,4BAAAD,KAAC,UAAK,WAAU,aAAa,mBAAS,KAAK,KAAK,GAAE;AAAA,YACjD,KAAK,QACJ,gBAAAA,KAAC,UAAK,WAAU,iEAAgE,oBAAM,IACpF,KAAK,cAAc,KAAK,aAAa,IACvC,gBAAAA,KAAC,UAAK,WAAU,4BAA4B,mBAAS,KAAK,UAAU,GAAE,IACpE;AAAA,aACN;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;;;ACrGA,SAAS,QAAQ,iBAAiB,UAAU,eAAe;AA6IjD,gBAAAE,MAwCU,QAAAC,aAxCV;AAlHV,IAAM,aAAa;AACnB,IAAM,SAAS;AACf,IAAM,SAAS;AACf,IAAM,WAAW;AACjB,IAAM,WAAW;AACjB,IAAM,WAAW;AACjB,IAAM,WAAW;AACjB,IAAM,WAAW,WAAW,IAAI;AAChC,IAAM,WAAW,WAAW,IAAI;AAChC,IAAM,WAAW;AACjB,IAAM,YAAY;AAClB,IAAM,SAAS,WAAW;AAC1B,IAAM,SAAS,WAAW;AAC1B,IAAM,cAAc,WAAW,WAAW,SAAS,IAAI;AACvD,IAAM,cAAc,WAAW,WAAW,SAAS,IAAI;AAEvD,IAAM,cAAc,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG;AAU/C,SAAS,gBAAgB,IAAY,IAAY,IAAY,IAAY,UAAkB;AACzF,QAAM,MAAO,WAAW,KAAK,KAAM;AACnC,SAAO,EAAE,GAAG,KAAK,KAAK,KAAK,IAAI,GAAG,GAAG,GAAG,KAAK,KAAK,KAAK,IAAI,GAAG,EAAE;AAClE;AAEA,SAAS,qBACP,OACA,eACc;AACd,QAAM,KAAK,WAAW;AACtB,QAAM,KAAK,WAAW;AACtB,QAAM,iBACJ,kBAAkB,OAAO,YAAY,CAAC,IAAI,YAAY,aAAa,IAAI;AAEzE,QAAM,UAAwB,CAAC;AAC/B,WAAS,IAAI,GAAG,IAAI,YAAY,KAAK;AACnC,UAAM,KAAK,gBAAgB,IAAI,IAAI,aAAa,aAAa,YAAY,CAAC,IAAI,cAAc;AAC5F,YAAQ,KAAK;AAAA,MACX,GAAG,GAAG,IAAI,SAAS;AAAA,MACnB,GAAG,GAAG,IAAI,SAAS;AAAA,MACnB,cAAc;AAAA,MACd,OAAO,MAAM;AAAA,MACb,MAAM,MAAM,CAAC,KAAK;AAAA,IACpB,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAOO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,gBAAgB;AAAA,EAChB,iBAAiB,CAAC;AAAA,EAClB,MAAM;AAAA,EACN,OAAO,CAAC;AAAA,EACR,YAAY;AAAA,EACZ,cAAc,CAAC;AAAA,EACf,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAEpC,QAAM,UAAU;AAAA,IACd,MAAM,qBAAqB,OAAO,aAAa;AAAA,IAC/C,CAAC,OAAO,aAAa;AAAA,EACvB;AAEA,kBAAgB,MAAM;AACpB,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AACT,UAAM,UAAU,MAAM;AACpB,YAAM,IAAI,GAAG;AACb,YAAM,IAAI,GAAG;AACb,UAAI,CAAC,KAAK,CAAC,EAAG;AACd,eAAS,KAAK,IAAI,IAAI,UAAU,IAAI,QAAQ,CAAC;AAAA,IAC/C;AACA,YAAQ;AACR,UAAM,KAAK,IAAI,eAAe,OAAO;AACrC,OAAG,QAAQ,EAAE;AACb,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,EAAE,OAAO,GAAG,QAAQ,MAAM,QAAQ,KAAK;AAC/D,QAAM,YAAY,EAAE,OAAO,GAAG,WAAW,QAAQ,MAAM,WAAW,QAAQ,KAAK;AAC/E,QAAM,WAAW,EAAE,OAAO,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,KAAK;AAChE,QAAM,eAAe;AAAA,IACnB,OAAO,GAAG,YAAY,WAAW,OAAO,MAAM,YAAY,WAAW,OAAO;AAAA,EAC9E;AAEA,QAAM,UAAoB,KAAK,SAAS,IAAI,OAAO,MAAM,IAAI,CAAC,EAAE,OAAO,OAAO,QAAQ,IAAI,CAAC,IAAI,CAAC;AAEhG,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,GAAG,mFAAmF,SAAS;AAAA,MAE1G,0BAAAA,KAAC,SAAI,OAAO,EAAE,OAAO,WAAW,OAAO,QAAQ,WAAW,MAAM,GAC9D,0BAAAC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,OAAO,UAAU,QAAQ,UAAU,WAAW,SAAS,KAAK,KAAK,iBAAiB,WAAW;AAAA,UAGtG;AAAA,4BAAAD;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAY;AAAA;AAAA,YACd;AAAA,YAGA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,gBACP,eAAY;AAAA;AAAA,YACd;AAAA,YAGA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,gBACP,eAAY;AAAA;AAAA,YACd;AAAA,YAGA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,gBACP,eAAY;AAAA;AAAA,YACd;AAAA,YAGA,gBAAAA,KAAC,SAAI,WAAU,iEAAgE,OAAO,WAAW,eAAY,QAC3G,0BAAAA,KAAC,UAAK,WAAU,uFAAsF,sCAEtG,GACF;AAAA,YAGA,gBAAAC,MAAC,SAAI,WAAU,kFACb;AAAA,8BAAAA,MAAC,SAAI,WAAU,yCACb;AAAA,gCAAAD,KAAC,kBAAe,OAAO,gBAAgB,MAAK,MAAK,WAAU,yBAAwB;AAAA,gBAClF,QAAQ,SAAS,KAChB,gBAAAA,KAAC,SAAI,WAAU,oCACZ,kBAAQ,IAAI,CAAC,GAAG,MACf,gBAAAC,MAAC,SAAY,WAAU,4DACrB;AAAA,kCAAAD,KAAC,UAAK,WAAU,oBAAoB,YAAE,OAAM;AAAA,kBAC5C,gBAAAA,KAAC,UAAK,WAAU,sGACb,mBAAS,EAAE,MAAM,GACpB;AAAA,qBAJQ,CAKV,CACD,GACH;AAAA,iBAEJ;AAAA,cACC,aACC,gBAAAA,KAAC,SAAI,WAAU,+FAA8F,8BAE7G;AAAA,eAEJ;AAAA,YAGA,gBAAAA,KAAC,SAAI,WAAU,6CACZ,kBAAQ,IAAI,CAAC,EAAE,GAAG,GAAG,cAAc,OAAO,KAAK,MAAM;AACpD,oBAAM,SAA0B,OAC5B,EAAE,GAAG,MAAM,OAAO,UAAU,YAAY,SAAS,YAAY,KAAK,KAAK,SAAS,IAChF;AACJ,qBACE,gBAAAA,KAAC,SAAuB,WAAU,YAAW,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,KAAK,GAAG,CAAC,KAAK,GACjF,uBAAa,WAAW,QAAQ,YAAY,IAAI,gBAAAA,KAAC,QAAK,MAAM,QAAQ,MAAM,UAAU,KAD7E,YAEV;AAAA,YAEJ,CAAC,GACH;AAAA,YAGA,gBAAAA,KAAC,SAAI,WAAU,qEAAoE,OAAO,UAAU,eAAY,QAAO;AAAA;AAAA;AAAA,MACzH,GACF;AAAA;AAAA,EACF;AAEJ;","names":["jsx","jsxs","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,38 @@
 {
   "name": "@stargazeryan/poker-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Themable React + Tailwind CSS v4 components for poker tables and playing cards.",
+  "license": "MIT",
+  "author": "Ryan",
+  "type": "module",
+  "sideEffects": ["**/*.css"],
+  "files": ["dist", "src/styles.css", "README.md", "LICENSE"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js", "require": "./dist/index.cjs" },
+    "./styles.css": "./src/styles.css"
+  },
+  "publishConfig": { "access": "public" },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "demo": "vite --config demo/vite.config.ts",
+    "demo:build": "vite build --config demo/vite.config.ts"
+  },
+  "keywords": ["poker", "playing-cards", "tailwindcss", "react", "component", "card", "table"],
+  "peerDependencies": { "react": ">=18", "react-dom": ">=18" },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}

package/src/styles.css

@@ -0,0 +1,62 @@
+/*
+ * Styles for @stargazeryan/poker-ui.
+ *
+ * IMPORTANT (Tailwind v4): because this is a compiled package, your app's
+ * Tailwind build cannot see the class names used inside it. Add this package
+ * as a content source so the utilities are generated:
+ *
+ *   @import "tailwindcss";
+ *   @source "../node_modules/@stargazeryan/poker-ui";
+ *   @import "@stargazeryan/poker-ui/styles.css";
+ *
+ * The directives below add theme tokens and the two keyframe animations the
+ * components rely on.
+ */
+
+@theme {
+  --color-felt: #0f4d2e;
+  --color-felt-light: #1a6b3d;
+  --color-wood: #8b5e3c;
+  --color-wood-dark: #5d3f1f;
+  --color-chip-red: #c0392b;
+  --color-chip-blue: #2980b9;
+  --color-chip-green: #27ae60;
+  --color-chip-black: #1a1a2e;
+  --color-chip-white: #ecf0f1;
+  --color-gold: #f39c12;
+
+  --animate-card-deal: card-deal 0.35s ease-out both;
+  --animate-bubble-pop: bubble-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes card-deal {
+  0% {
+    opacity: 0;
+    transform: translateY(-14px) rotateY(90deg) scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) rotateY(0) scale(1);
+  }
+}
+
+@keyframes bubble-pop {
+  0% {
+    opacity: 0;
+    transform: translateY(8px) scale(0.6);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}