@stargazeryan/poker-ui 0.0.0-stage → 0.2.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,129 @@
-# 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.
+Game-agnostic **React + Tailwind CSS v4** card-table UI: tables, seats, and
+playing cards. Seats are neutral frames with **slots**, so you decide what goes
+in them (0 cards, N cards, avatars, anything). The table supports **2–10 seats**
+and an optional center slot.
+
+- 🎴 `PlayingCard` / `CardBack` / `HoleCards` / `CommunityCards`
+- 🎯 `CardTable` — responsive, scale-to-fit table with `seatCount` seats
+- 💺 `Seat` — a neutral seat frame with slots + generic states
+- 🪙 `Pot` — an optional pot pill (not required by the table)
+- 🔁 `nextSeatIndex()` — pure helper for "next seat on the ring"
+
+> Formerly `PokerTable`; kept as a back-compat alias for `CardTable`.
+
+## Install
+
+```bash
+npm install @stargazeryan/poker-ui
+```
+
+Peer requirements: `react` >= 18, `react-dom` >= 18, 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 { CardTable, Seat, HoleCards, CommunityCards, Pot } from "@stargazeryan/poker-ui";
+
+const seats = [
+  <Seat key={0} isActive header={<b>You</b>} footer={<span>100 BB</span>}>
+    <HoleCards cards={["As", "Kh"]} size="sm" />
+  </Seat>,
+  <Seat key={1} header={<b>Bot</b>} footer={<span>49 BB</span>}>
+    <HoleCards cards={[null, null]} size="sm" />
+  </Seat>,
+  null, null, null, null,
+];
+
+export function Table() {
+  return (
+    <div style={{ height: 640 }}>
+      <CardTable
+        seatCount={6}
+        seats={seats}
+        yourSeatIndex={0}
+        center={
+          <>
+            <CommunityCards cards={["Ah", "Kd", "7c", null, null]} size="lg" />
+            <Pot label="Main" amount={240} />
+          </>
+        }
+      />
+    </div>
+  );
+}
+```
+
+### 4-seat game with no pot and no community cards (e.g. Big Two)
+
+```tsx
+<CardTable
+  seatCount={4}
+  yourSeatIndex={2}
+  renderSeat={(i) => <Seat header={<b>P{i}</b>}>{/* 0..N cards */}</Seat>}
+/>
+```
+
+## Components
+
+| Component | Props |
+| --- | --- |
+| `CardTable` | `seatCount` (2–10), `seats` or `renderSeat(i, isYou)`, `yourSeatIndex`, `center`, `seatWidth`, `seatHeight` |
+| `Seat` | slots: `header`, `children`, `footer`, `badge`, `overlay`; states: `isActive`, `isWinner`, `isDimmed`; `onClick` |
+| `Pot` | `amount`, `label`, `format` |
+| `PlayingCard` | `card` (`"As"`, `"10h"`, `null` = back), `size`: `xs \| sm \| md \| lg` |
+| `CardBack` / `HoleCards` / `CommunityCards` | `size`, `cards` |
+
+Also exported: `nextSeatIndex`, `cn`, `formatBB`, `BB`, `parseCard`,
+`getSuitSymbol`, and the types `SeatProps`, `CardTableProps`, `PotProps`, `CardSize`.
+
+## "Whose turn is next?"
+
+Turn order is game logic, not UI. Compute it in your own engine and pass the
+result into `Seat`'s `isActive`. A generic helper is provided:
+
+```ts
+import { nextSeatIndex } from "@stargazeryan/poker-ui";
+const next = nextSeatIndex(current, seatCount, { skip: (i) => players[i].out });
+```
+
+## Theming
+
+Override the tokens in your own `@theme` block, or pass `className`:
+
+```css
+@theme {
+  --color-felt: #0b3d2e;
+  --color-gold: #ffcc33;
+}
+```
+
+## Demo
+
+```bash
+npm install --include=dev
+npm run demo        # Vite dev server
+npm run demo:build  # static build
+```
+
+## License
+
+MIT © 2026 Ryan

package/dist/index.cjs

@@ -0,0 +1,396 @@
+"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,
+  CardTable: () => CardTable,
+  CommunityCards: () => CommunityCards,
+  HoleCards: () => HoleCards,
+  PlayingCard: () => PlayingCard,
+  PokerTable: () => CardTable,
+  Pot: () => Pot,
+  Seat: () => Seat,
+  cn: () => cn,
+  formatBB: () => formatBB,
+  getSuitSymbol: () => getSuitSymbol,
+  nextSeatIndex: () => nextSeatIndex,
+  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/seat.ts
+function nextSeatIndex(current, seatCount, opts = {}) {
+  const n = Math.max(1, Math.floor(seatCount));
+  const dir = opts.dir ?? 1;
+  const skip = opts.skip;
+  const start = (Math.floor(current) % n + n) % n;
+  let i = start;
+  for (let step = 0; step < n - 1; step++) {
+    i = (i + dir + n) % n;
+    if (!skip || !skip(i)) return i;
+  }
+  return start;
+}
+
+// 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({
+  isActive = false,
+  isWinner = false,
+  isDimmed = false,
+  onClick,
+  header,
+  badge,
+  children,
+  footer,
+  overlay,
+  width = 160,
+  height = 176,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("relative", className), style: { width, height }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        role: onClick ? "button" : void 0,
+        tabIndex: onClick ? 0 : void 0,
+        onClick,
+        onKeyDown: onClick ? (e) => {
+          if (e.key === "Enter" || e.key === " ") onClick();
+        } : void 0,
+        className: cn(
+          "flex h-full w-full flex-col items-center justify-between gap-1 rounded-2xl border bg-neutral-900/80 p-2 text-neutral-100 backdrop-blur transition",
+          isActive ? "border-cyan-400 shadow-[0_0_18px_rgba(34,211,238,0.55)]" : "border-neutral-700",
+          isWinner && "border-amber-400 shadow-[0_0_18px_rgba(251,191,36,0.6)]",
+          isDimmed && "opacity-50",
+          onClick && "cursor-pointer hover:border-neutral-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400"
+        ),
+        children: [
+          header !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex w-full items-center justify-between gap-1 text-[11px]", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-1 items-center justify-center", children }),
+          footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex w-full items-center justify-between text-[11px] text-neutral-300", children: footer })
+        ]
+      }
+    ),
+    badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute -top-1 -right-1", children: badge }),
+    overlay !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 text-center", children: overlay })
+  ] });
+}
+
+// src/components/Pot.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Pot({ amount, label, format = formatBB, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex items-center gap-2 font-mono text-sm text-amber-400", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-neutral-400", children: 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: format(amount) })
+  ] });
+}
+
+// src/components/CardTable.tsx
+var import_react = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+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;
+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(seatCount, yourSeatIndex, seatWidth, seatHeight) {
+  const cx = DESIGN_W / 2;
+  const cy = DESIGN_H / 2;
+  const ringX = TABLE_RX - FELT_GAP + seatWidth / 2 + 6;
+  const ringY = TABLE_RY - FELT_GAP + seatHeight / 2 + 6;
+  const step = 360 / seatCount;
+  const angleOf = (i) => -90 + i * step;
+  const rotationOffset = yourSeatIndex !== null ? 90 - angleOf(yourSeatIndex) : 0;
+  const layouts = [];
+  for (let i = 0; i < seatCount; i++) {
+    const pt = getEllipsePoint(cx, cy, ringX, ringY, angleOf(i) + rotationOffset);
+    layouts.push({
+      x: pt.x - seatWidth / 2,
+      y: pt.y - seatHeight / 2,
+      index: i,
+      isYou: i === yourSeatIndex
+    });
+  }
+  return layouts;
+}
+function CardTable({
+  seatCount = 6,
+  seats,
+  renderSeat,
+  yourSeatIndex = null,
+  center,
+  seatWidth = 160,
+  seatHeight = 176,
+  className
+}) {
+  const count = Math.max(2, Math.min(10, Math.floor(seatCount)));
+  const outerRef = (0, import_react.useRef)(null);
+  const [scale, setScale] = (0, import_react.useState)(1);
+  const layouts = (0, import_react.useMemo)(
+    () => calculateSeatLayouts(count, yourSeatIndex, seatWidth, seatHeight),
+    [count, yourSeatIndex, seatWidth, seatHeight]
+  );
+  (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`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ref: outerRef,
+      className: cn("relative flex h-full w-full min-h-0 items-center justify-center overflow-hidden", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: DESIGN_W * scale, height: DESIGN_H * scale }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          className: "relative",
+          style: { width: DESIGN_W, height: DESIGN_H, transform: `scale(${scale})`, transformOrigin: "top left" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.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_runtime4.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_runtime4.jsx)("div", { className: "absolute flex items-center justify-center pointer-events-none", style: feltInset, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-white/[0.05] text-[110px] font-black tracking-[0.2em] select-none leading-none", children: "\u2660\u2665\u2666\u2663" }) }),
+            center !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: center }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 z-20", children: layouts.map(({ x, y, index, isYou }) => {
+              const content = seats ? seats[index] ?? null : renderSeat ? renderSeat(index, isYou) : null;
+              if (content === null) return null;
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute", style: { left: `${x}px`, top: `${y}px` }, children: content }, index);
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.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,
+  CardTable,
+  CommunityCards,
+  HoleCards,
+  PlayingCard,
+  PokerTable,
+  Pot,
+  Seat,
+  cn,
+  formatBB,
+  getSuitSymbol,
+  nextSeatIndex,
+  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/seat.ts","../src/components/PlayingCard.tsx","../src/components/Seat.tsx","../src/components/Pot.tsx","../src/components/CardTable.tsx"],"sourcesContent":["export { cn } from \"./cn\";\nexport { BB, formatBB } from \"./format\";\nexport { nextSeatIndex, type NextSeatOptions } from \"./seat\";\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 } from \"./components/Seat\";\nexport { Pot, type PotProps } from \"./components/Pot\";\nexport { CardTable, type CardTableProps } from \"./components/CardTable\";\n\n// Back-compat alias (the table is now game-agnostic).\nexport { CardTable as PokerTable, type CardTableProps as PokerTableProps } from \"./components/CardTable\";\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","/**\n * Seat-ring helpers. Pure functions — they contain no game-specific rules.\n */\n\nexport interface NextSeatOptions {\n  /** +1 for clockwise, -1 for counter-clockwise. Default +1. */\n  dir?: 1 | -1;\n  /** Return true to skip a seat (e.g. folded / empty / out). */\n  skip?: (index: number) => boolean;\n}\n\n/**\n * Return the index of the next seat on the ring after `current`, skipping any\n * seat matched by `opts.skip`. Wraps around. Returns `current` if every other\n * seat is skipped.\n */\nexport function nextSeatIndex(current: number, seatCount: number, opts: NextSeatOptions = {}): number {\n  const n = Math.max(1, Math.floor(seatCount));\n  const dir = opts.dir ?? 1;\n  const skip = opts.skip;\n  const start = ((Math.floor(current) % n) + n) % n;\n\n  let i = start;\n  for (let step = 0; step < n - 1; step++) {\n    i = (i + dir + n) % n;\n    if (!skip || !skip(i)) return i;\n  }\n  return start;\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 type { ReactNode } from \"react\";\nimport { cn } from \"../cn\";\n\nexport interface SeatProps {\n  /** Turn/active highlight (generic). */\n  isActive?: boolean;\n  /** Winner highlight (generic). */\n  isWinner?: boolean;\n  /** Dimmed, e.g. folded or out (generic). */\n  isDimmed?: boolean;\n  /** Optional click handler (e.g. \"sit here\"). */\n  onClick?: () => void;\n\n  /** Slot: top row — name / badges. */\n  header?: ReactNode;\n  /** Slot: top-right floating element — e.g. a dealer button. */\n  badge?: ReactNode;\n  /** Slot: center content — 0..N cards, avatar, anything. */\n  children?: ReactNode;\n  /** Slot: bottom row — stack / bet / status. */\n  footer?: ReactNode;\n  /** Slot: overlay — e.g. an \"All-in\" label. */\n  overlay?: ReactNode;\n\n  width?: number;\n  height?: number;\n  className?: string;\n}\n\n/**\n * A neutral seat: a frame with generic visual states and named slots.\n * It knows nothing about any particular game — put whatever you want into\n * `header` / `children` / `footer` / `badge` / `overlay`.\n */\nexport function Seat({\n  isActive = false,\n  isWinner = false,\n  isDimmed = false,\n  onClick,\n  header,\n  badge,\n  children,\n  footer,\n  overlay,\n  width = 160,\n  height = 176,\n  className,\n}: SeatProps) {\n  return (\n    <div className={cn(\"relative\", className)} style={{ width, height }}>\n      <div\n        role={onClick ? \"button\" : undefined}\n        tabIndex={onClick ? 0 : undefined}\n        onClick={onClick}\n        onKeyDown={\n          onClick\n            ? (e) => {\n                if (e.key === \"Enter\" || e.key === \" \") onClick();\n              }\n            : undefined\n        }\n        className={cn(\n          \"flex h-full w-full flex-col items-center justify-between gap-1 rounded-2xl border bg-neutral-900/80 p-2 text-neutral-100 backdrop-blur transition\",\n          isActive ? \"border-cyan-400 shadow-[0_0_18px_rgba(34,211,238,0.55)]\" : \"border-neutral-700\",\n          isWinner && \"border-amber-400 shadow-[0_0_18px_rgba(251,191,36,0.6)]\",\n          isDimmed && \"opacity-50\",\n          onClick && \"cursor-pointer hover:border-neutral-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400\",\n        )}\n      >\n        {header !== undefined && (\n          <div className=\"flex w-full items-center justify-between gap-1 text-[11px]\">{header}</div>\n        )}\n        <div className=\"flex flex-1 items-center justify-center\">{children}</div>\n        {footer !== undefined && (\n          <div className=\"flex w-full items-center justify-between text-[11px] text-neutral-300\">{footer}</div>\n        )}\n      </div>\n\n      {badge !== undefined && <div className=\"absolute -top-1 -right-1\">{badge}</div>}\n      {overlay !== undefined && (\n        <div className=\"pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 text-center\">{overlay}</div>\n      )}\n    </div>\n  );\n}\n","import { cn } from \"../cn\";\nimport { formatBB } from \"../format\";\n\nexport interface PotProps {\n  amount: number;\n  /** Optional label, e.g. \"Main\" / \"Side\". */\n  label?: string;\n  /** Formatter for the amount; defaults to Big-Blind formatting. */\n  format?: (amount: number) => string;\n  className?: string;\n}\n\n/** A small, standalone pot pill. Optional — the table does not require it. */\nexport function Pot({ amount, label, format = formatBB, className }: PotProps) {\n  return (\n    <div className={cn(\"flex items-center gap-2 font-mono text-sm text-amber-400\", className)}>\n      {label && <span className=\"text-neutral-400\">{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        {format(amount)}\n      </span>\n    </div>\n  );\n}\n","import { useRef, useLayoutEffect, useState, useMemo, type ReactNode } from \"react\";\nimport { cn } from \"../cn\";\n\nexport interface CardTableProps {\n  /** Number of seats (2–10). Default 6. */\n  seatCount?: number;\n  /** Optional per-seat content. Length should equal `seatCount`. */\n  seats?: (ReactNode | null)[];\n  /** Alternative to `seats`: render a seat by index. */\n  renderSeat?: (index: number, isYou: boolean) => ReactNode;\n  /** Which seat belongs to the viewer; rotates that seat to the bottom. */\n  yourSeatIndex?: number | null;\n  /** Optional content in the middle of the table (cards, pot, anything). */\n  center?: ReactNode;\n  /** Seat frame size used for layout. */\n  seatWidth?: number;\n  seatHeight?: number;\n  className?: string;\n}\n\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;\n\ninterface SeatLayout {\n  x: number;\n  y: number;\n  index: number;\n  isYou: boolean;\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  seatCount: number,\n  yourSeatIndex: number | null,\n  seatWidth: number,\n  seatHeight: number,\n): SeatLayout[] {\n  const cx = DESIGN_W / 2;\n  const cy = DESIGN_H / 2;\n  const ringX = TABLE_RX - FELT_GAP + seatWidth / 2 + 6;\n  const ringY = TABLE_RY - FELT_GAP + seatHeight / 2 + 6;\n\n  // Even angular distribution, first seat at the top (-90°).\n  const step = 360 / seatCount;\n  const angleOf = (i: number) => -90 + i * step;\n\n  // Rotate so the viewer's seat sits at the bottom (90°).\n  const rotationOffset = yourSeatIndex !== null ? 90 - angleOf(yourSeatIndex) : 0;\n\n  const layouts: SeatLayout[] = [];\n  for (let i = 0; i < seatCount; i++) {\n    const pt = getEllipsePoint(cx, cy, ringX, ringY, angleOf(i) + rotationOffset);\n    layouts.push({\n      x: pt.x - seatWidth / 2,\n      y: pt.y - seatHeight / 2,\n      index: i,\n      isYou: i === yourSeatIndex,\n    });\n  }\n  return layouts;\n}\n\n/**\n * A responsive, game-agnostic card table. It scales a fixed 1200x900 design\n * onto its container and arranges `seatCount` seats around the felt. Purely\n * presentational: supply seat content and an optional `center` slot.\n */\nexport function CardTable({\n  seatCount = 6,\n  seats,\n  renderSeat,\n  yourSeatIndex = null,\n  center,\n  seatWidth = 160,\n  seatHeight = 176,\n  className,\n}: CardTableProps) {\n  const count = Math.max(2, Math.min(10, Math.floor(seatCount)));\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [scale, setScale] = useState(1);\n\n  const layouts = useMemo(\n    () => calculateSeatLayouts(count, yourSeatIndex, seatWidth, seatHeight),\n    [count, yourSeatIndex, seatWidth, seatHeight],\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  return (\n    <div\n      ref={outerRef}\n      className={cn(\"relative flex h-full w-full min-h-0 items-center justify-center overflow-hidden\", 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          <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 slot (optional) */}\n          {center !== undefined && (\n            <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center\">\n              {center}\n            </div>\n          )}\n\n          {/* seats */}\n          <div className=\"absolute inset-0 z-20\">\n            {layouts.map(({ x, y, index, isYou }) => {\n              const content = seats ? (seats[index] ?? null) : renderSeat ? renderSeat(index, isYou) : null;\n              if (content === null) return null;\n              return (\n                <div key={index} className=\"absolute\" style={{ left: `${x}px`, top: `${y}px` }}>\n                  {content}\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","import_jsx_runtime"]}