@stargazeryan/poker-ui 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 
 declare function cn(...parts: Array<string | false | null | undefined>): string;
 
@@ -7,6 +8,22 @@ 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;
 
+/**
+ * Seat-ring helpers. Pure functions — they contain no game-specific rules.
+ */
+interface NextSeatOptions {
+    /** +1 for clockwise, -1 for counter-clockwise. Default +1. */
+    dir?: 1 | -1;
+    /** Return true to skip a seat (e.g. folded / empty / out). */
+    skip?: (index: number) => boolean;
+}
+/**
+ * Return the index of the next seat on the ring after `current`, skipping any
+ * seat matched by `opts.skip`. Wraps around. Returns `current` if every other
+ * seat is skipped.
+ */
+declare function nextSeatIndex(current: number, seatCount: number, opts?: NextSeatOptions): number;
+
 type CardSize = "xs" | "sm" | "md" | "lg";
 /** Parse a compact card code like "As", "10h", "kd" into rank + suit. */
 declare function parseCard(card: string): {
@@ -46,57 +63,68 @@ interface CommunityCardsProps {
 /** 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;
+    /** Turn/active highlight (generic). */
+    isActive?: boolean;
+    /** Winner highlight (generic). */
+    isWinner?: boolean;
+    /** Dimmed, e.g. folded or out (generic). */
+    isDimmed?: boolean;
+    /** Optional click handler (e.g. "sit here"). */
+    onClick?: () => void;
+    /** Slot: top row — name / badges. */
+    header?: ReactNode;
+    /** Slot: top-right floating element — e.g. a dealer button. */
+    badge?: ReactNode;
+    /** Slot: center content — 0..N cards, avatar, anything. */
+    children?: ReactNode;
+    /** Slot: bottom row — stack / bet / status. */
+    footer?: ReactNode;
+    /** Slot: overlay — e.g. an "All-in" label. */
+    overlay?: ReactNode;
+    width?: number;
+    height?: number;
     className?: string;
 }
 /**
- * A presentational seat: nickname, stack, hole cards, dealer/turn/winner
- * markers. It is fully controlled — all state arrives through `seat`.
+ * A neutral seat: a frame with generic visual states and named slots.
+ * It knows nothing about any particular game — put whatever you want into
+ * `header` / `children` / `footer` / `badge` / `overlay`.
  */
-declare function Seat({ seat, size, className }: SeatProps): react.JSX.Element;
+declare function Seat({ isActive, isWinner, isDimmed, onClick, header, badge, children, footer, overlay, width, height, className, }: SeatProps): react.JSX.Element;
 
-interface PotRow {
-    label: string;
+interface PotProps {
     amount: number;
+    /** Optional label, e.g. "Main" / "Side". */
+    label?: string;
+    /** Formatter for the amount; defaults to Big-Blind formatting. */
+    format?: (amount: number) => string;
+    className?: string;
 }
-interface PokerTableProps {
-    /** Six seats (some may be empty). */
-    seats: (SeatView | null)[];
+/** A small, standalone pot pill. Optional — the table does not require it. */
+declare function Pot({ amount, label, format, className }: PotProps): react.JSX.Element;
+
+interface CardTableProps {
+    /** Number of seats (2–10). Default 6. */
+    seatCount?: number;
+    /** Optional per-seat content. Length should equal `seatCount`. */
+    seats?: (ReactNode | null)[];
+    /** Alternative to `seats`: render a seat by index. */
+    renderSeat?: (index: number, isYou: boolean) => ReactNode;
     /** 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;
+    /** Optional content in the middle of the table (cards, pot, anything). */
+    center?: ReactNode;
+    /** Seat frame size used for layout. */
+    seatWidth?: number;
+    seatHeight?: number;
     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.
+ * A responsive, game-agnostic card table. It scales a fixed 1200x900 design
+ * onto its container and arranges `seatCount` seats around the felt. Purely
+ * presentational: supply seat content and an optional `center` slot.
  */
-declare function PokerTable({ seats, yourSeatIndex, communityCards, pot, pots, isWaiting, winnerSeats, seatSize, renderSeat, className, }: PokerTableProps): react.JSX.Element;
+declare function CardTable({ seatCount, seats, renderSeat, yourSeatIndex, center, seatWidth, seatHeight, className, }: CardTableProps): 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 };
+export { BB, CardBack, type CardBackProps, type CardSize, CardTable, type CardTableProps, CommunityCards, type CommunityCardsProps, HoleCards, type HoleCardsProps, type NextSeatOptions, PlayingCard, type PlayingCardProps, CardTable as PokerTable, type CardTableProps as PokerTableProps, Pot, type PotProps, Seat, type SeatProps, cn, formatBB, getSuitSymbol, nextSeatIndex, parseCard };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 
 declare function cn(...parts: Array<string | false | null | undefined>): string;
 
@@ -7,6 +8,22 @@ 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;
 
+/**
+ * Seat-ring helpers. Pure functions — they contain no game-specific rules.
+ */
+interface NextSeatOptions {
+    /** +1 for clockwise, -1 for counter-clockwise. Default +1. */
+    dir?: 1 | -1;
+    /** Return true to skip a seat (e.g. folded / empty / out). */
+    skip?: (index: number) => boolean;
+}
+/**
+ * Return the index of the next seat on the ring after `current`, skipping any
+ * seat matched by `opts.skip`. Wraps around. Returns `current` if every other
+ * seat is skipped.
+ */
+declare function nextSeatIndex(current: number, seatCount: number, opts?: NextSeatOptions): number;
+
 type CardSize = "xs" | "sm" | "md" | "lg";
 /** Parse a compact card code like "As", "10h", "kd" into rank + suit. */
 declare function parseCard(card: string): {
@@ -46,57 +63,68 @@ interface CommunityCardsProps {
 /** 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;
+    /** Turn/active highlight (generic). */
+    isActive?: boolean;
+    /** Winner highlight (generic). */
+    isWinner?: boolean;
+    /** Dimmed, e.g. folded or out (generic). */
+    isDimmed?: boolean;
+    /** Optional click handler (e.g. "sit here"). */
+    onClick?: () => void;
+    /** Slot: top row — name / badges. */
+    header?: ReactNode;
+    /** Slot: top-right floating element — e.g. a dealer button. */
+    badge?: ReactNode;
+    /** Slot: center content — 0..N cards, avatar, anything. */
+    children?: ReactNode;
+    /** Slot: bottom row — stack / bet / status. */
+    footer?: ReactNode;
+    /** Slot: overlay — e.g. an "All-in" label. */
+    overlay?: ReactNode;
+    width?: number;
+    height?: number;
     className?: string;
 }
 /**
- * A presentational seat: nickname, stack, hole cards, dealer/turn/winner
- * markers. It is fully controlled — all state arrives through `seat`.
+ * A neutral seat: a frame with generic visual states and named slots.
+ * It knows nothing about any particular game — put whatever you want into
+ * `header` / `children` / `footer` / `badge` / `overlay`.
  */
-declare function Seat({ seat, size, className }: SeatProps): react.JSX.Element;
+declare function Seat({ isActive, isWinner, isDimmed, onClick, header, badge, children, footer, overlay, width, height, className, }: SeatProps): react.JSX.Element;
 
-interface PotRow {
-    label: string;
+interface PotProps {
     amount: number;
+    /** Optional label, e.g. "Main" / "Side". */
+    label?: string;
+    /** Formatter for the amount; defaults to Big-Blind formatting. */
+    format?: (amount: number) => string;
+    className?: string;
 }
-interface PokerTableProps {
-    /** Six seats (some may be empty). */
-    seats: (SeatView | null)[];
+/** A small, standalone pot pill. Optional — the table does not require it. */
+declare function Pot({ amount, label, format, className }: PotProps): react.JSX.Element;
+
+interface CardTableProps {
+    /** Number of seats (2–10). Default 6. */
+    seatCount?: number;
+    /** Optional per-seat content. Length should equal `seatCount`. */
+    seats?: (ReactNode | null)[];
+    /** Alternative to `seats`: render a seat by index. */
+    renderSeat?: (index: number, isYou: boolean) => ReactNode;
     /** 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;
+    /** Optional content in the middle of the table (cards, pot, anything). */
+    center?: ReactNode;
+    /** Seat frame size used for layout. */
+    seatWidth?: number;
+    seatHeight?: number;
     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.
+ * A responsive, game-agnostic card table. It scales a fixed 1200x900 design
+ * onto its container and arranges `seatCount` seats around the felt. Purely
+ * presentational: supply seat content and an optional `center` slot.
  */
-declare function PokerTable({ seats, yourSeatIndex, communityCards, pot, pots, isWaiting, winnerSeats, seatSize, renderSeat, className, }: PokerTableProps): react.JSX.Element;
+declare function CardTable({ seatCount, seats, renderSeat, yourSeatIndex, center, seatWidth, seatHeight, className, }: CardTableProps): 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 };
+export { BB, CardBack, type CardBackProps, type CardSize, CardTable, type CardTableProps, CommunityCards, type CommunityCardsProps, HoleCards, type HoleCardsProps, type NextSeatOptions, PlayingCard, type PlayingCardProps, CardTable as PokerTable, type CardTableProps as PokerTableProps, Pot, type PotProps, Seat, type SeatProps, cn, formatBB, getSuitSymbol, nextSeatIndex, parseCard };

package/dist/index.js

@@ -12,6 +12,20 @@ function formatBB(amount) {
   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
 import { jsx, jsxs } from "react/jsx-runtime";
 var SIZE_CLASSES = {
@@ -142,61 +156,61 @@ function CommunityCards({ cards, size = "md", className }) {
 
 // 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 }),
+function Seat({
+  isActive = false,
+  isWinner = false,
+  isDimmed = false,
+  onClick,
+  header,
+  badge,
+  children,
+  footer,
+  overlay,
+  width = 160,
+  height = 176,
+  className
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("relative", className), style: { width, height }, children: [
     /* @__PURE__ */ jsxs2(
       "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 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"
+          "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: [
-          /* @__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
-          ] })
+          header !== void 0 && /* @__PURE__ */ jsx2("div", { className: "flex w-full items-center justify-between gap-1 text-[11px]", children: header }),
+          /* @__PURE__ */ jsx2("div", { className: "flex flex-1 items-center justify-center", children }),
+          footer !== void 0 && /* @__PURE__ */ jsx2("div", { className: "flex w-full items-center justify-between text-[11px] text-neutral-300", children: footer })
         ]
       }
-    )
+    ),
+    badge !== void 0 && /* @__PURE__ */ jsx2("div", { className: "absolute -top-1 -right-1", children: badge }),
+    overlay !== void 0 && /* @__PURE__ */ jsx2("div", { className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 text-center", children: overlay })
   ] });
 }
 
-// src/components/PokerTable.tsx
-import { useRef, useLayoutEffect, useState, useMemo } from "react";
+// src/components/Pot.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var SEAT_COUNT = 6;
-var SEAT_W = 160;
-var SEAT_H = 176;
+function Pot({ amount, label, format = formatBB, className }) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex items-center gap-2 font-mono text-sm text-amber-400", className), children: [
+    label && /* @__PURE__ */ jsx3("span", { className: "text-neutral-400", children: 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: format(amount) })
+  ] });
+}
+
+// src/components/CardTable.tsx
+import { useRef, useLayoutEffect, useState, useMemo } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var DESIGN_W = 1200;
 var DESIGN_H = 900;
 var MARGIN_X = 164;
@@ -207,47 +221,46 @@ 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) {
+function calculateSeatLayouts(seatCount, yourSeatIndex, seatWidth, seatHeight) {
   const cx = DESIGN_W / 2;
   const cy = DESIGN_H / 2;
-  const rotationOffset = yourSeatIndex !== null ? BASE_ANGLES[3] - BASE_ANGLES[yourSeatIndex] : 0;
+  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 < SEAT_COUNT; i++) {
-    const pt = getEllipsePoint(cx, cy, SEAT_RING_X, SEAT_RING_Y, BASE_ANGLES[i] + rotationOffset);
+  for (let i = 0; i < seatCount; i++) {
+    const pt = getEllipsePoint(cx, cy, ringX, ringY, angleOf(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
+      x: pt.x - seatWidth / 2,
+      y: pt.y - seatHeight / 2,
+      index: i,
+      isYou: i === yourSeatIndex
     });
   }
   return layouts;
 }
-function PokerTable({
+function CardTable({
+  seatCount = 6,
   seats,
-  yourSeatIndex = null,
-  communityCards = [],
-  pot = 0,
-  pots = [],
-  isWaiting = false,
-  winnerSeats = [],
-  seatSize = "sm",
   renderSeat,
+  yourSeatIndex = null,
+  center,
+  seatWidth = 160,
+  seatHeight = 176,
   className
 }) {
+  const count = Math.max(2, Math.min(10, Math.floor(seatCount)));
   const outerRef = useRef(null);
   const [scale, setScale] = useState(1);
   const layouts = useMemo(
-    () => calculateSeatLayouts(seats, yourSeatIndex),
-    [seats, yourSeatIndex]
+    () => calculateSeatLayouts(count, yourSeatIndex, seatWidth, seatHeight),
+    [count, yourSeatIndex, seatWidth, seatHeight]
   );
   useLayoutEffect(() => {
     const el = outerRef.current;
@@ -269,26 +282,25 @@ function PokerTable({
   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(
+  return /* @__PURE__ */ jsx4(
     "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(
+      className: cn("relative flex h-full w-full min-h-0 items-center justify-center overflow-hidden", className),
+      children: /* @__PURE__ */ jsx4("div", { style: { width: DESIGN_W * scale, height: DESIGN_H * scale }, children: /* @__PURE__ */ jsxs4(
         "div",
         {
           className: "relative",
           style: { width: DESIGN_W, height: DESIGN_H, transform: `scale(${scale})`, transformOrigin: "top left" },
           children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "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(
+            /* @__PURE__ */ jsx4(
               "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)]",
@@ -296,7 +308,7 @@ function PokerTable({
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "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)]",
@@ -304,7 +316,7 @@ function PokerTable({
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "div",
               {
                 className: "absolute rounded-[50%] border-2 border-white/10 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.25)]",
@@ -312,22 +324,14 @@ function PokerTable({
                 "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__ */ jsx4("div", { className: "absolute flex items-center justify-center pointer-events-none", style: feltInset, "aria-hidden": "true", children: /* @__PURE__ */ jsx4("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__ */ jsx4("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: center }),
+            /* @__PURE__ */ jsx4("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__ */ jsx4("div", { className: "absolute", style: { left: `${x}px`, top: `${y}px` }, children: content }, index);
             }) }),
-            /* @__PURE__ */ jsx3("div", { className: "absolute rounded-[50%] border border-white/10 pointer-events-none", style: rimInset, "aria-hidden": "true" })
+            /* @__PURE__ */ jsx4("div", { className: "absolute rounded-[50%] border border-white/10 pointer-events-none", style: rimInset, "aria-hidden": "true" })
           ]
         }
       ) })
@@ -337,14 +341,17 @@ function PokerTable({
 export {
   BB,
   CardBack,
+  CardTable,
   CommunityCards,
   HoleCards,
   PlayingCard,
-  PokerTable,
+  CardTable as PokerTable,
+  Pot,
   Seat,
   cn,
   formatBB,
   getSuitSymbol,
+  nextSeatIndex,
   parseCard
 };
 //# sourceMappingURL=index.js.map