@stargazeryan/poker-ui 0.1.0 → 0.3.0

package/dist/index.d.cts

@@ -1,5 +1,7 @@
 import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
+/** Join class names and resolve conflicting Tailwind utilities (last wins). */
 declare function cn(...parts: Array<string | false | null | undefined>): string;
 
 /** Big Blind value used for stack display. */
@@ -7,6 +9,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 +64,83 @@ 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 inside the frame — name / badges. */
+    header?: ReactNode;
+    /** Slot: center content — 0..N cards, avatar, anything. */
+    children?: ReactNode;
+    /** Slot: bottom row inside the frame — stack / status. */
+    footer?: ReactNode;
+    /** Slot: floating element at the frame's top-right (legacy alias of topRight). */
+    badge?: ReactNode;
+    /** Slot: overlay centered over the frame. */
+    overlay?: ReactNode;
+    /** Slot: floating content above the frame, centered (e.g. an action bubble). */
+    above?: ReactNode;
+    /** Slot: content below the frame, centered (e.g. countdown / bet pill). */
+    below?: ReactNode;
+    /** Slot: floating content at the frame's top-left corner (e.g. a crown). */
+    topLeft?: ReactNode;
+    /** Slot: floating content at the frame's top-right corner (e.g. a kick button). */
+    topRight?: ReactNode;
+    /** Slot: floating content centered above the top edge (e.g. D/SB/BB badges). */
+    topCenter?: ReactNode;
+    width?: number;
+    height?: number;
     className?: string;
+    /** Extra classes for the inner frame, to override visuals. */
+    frameClassName?: string;
+    /** Inline styles for the inner frame. */
+    frameStyle?: CSSProperties;
 }
 /**
- * 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. Put
+ * whatever you want into `header` / `children` / `footer`, and use
+ * `above` / `below` / `topLeft` / `topRight` / `topCenter` / `overlay` for
+ * floating bits. It knows nothing about any particular game.
  */
-declare function Seat({ seat, size, className }: SeatProps): react.JSX.Element;
+declare function Seat({ isActive, isWinner, isDimmed, onClick, header, children, footer, badge, overlay, above, below, topLeft, topRight, topCenter, width, height, className, frameClassName, frameStyle, }: 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,5 +1,7 @@
 import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
+/** Join class names and resolve conflicting Tailwind utilities (last wins). */
 declare function cn(...parts: Array<string | false | null | undefined>): string;
 
 /** Big Blind value used for stack display. */
@@ -7,6 +9,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 +64,83 @@ 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 inside the frame — name / badges. */
+    header?: ReactNode;
+    /** Slot: center content — 0..N cards, avatar, anything. */
+    children?: ReactNode;
+    /** Slot: bottom row inside the frame — stack / status. */
+    footer?: ReactNode;
+    /** Slot: floating element at the frame's top-right (legacy alias of topRight). */
+    badge?: ReactNode;
+    /** Slot: overlay centered over the frame. */
+    overlay?: ReactNode;
+    /** Slot: floating content above the frame, centered (e.g. an action bubble). */
+    above?: ReactNode;
+    /** Slot: content below the frame, centered (e.g. countdown / bet pill). */
+    below?: ReactNode;
+    /** Slot: floating content at the frame's top-left corner (e.g. a crown). */
+    topLeft?: ReactNode;
+    /** Slot: floating content at the frame's top-right corner (e.g. a kick button). */
+    topRight?: ReactNode;
+    /** Slot: floating content centered above the top edge (e.g. D/SB/BB badges). */
+    topCenter?: ReactNode;
+    width?: number;
+    height?: number;
     className?: string;
+    /** Extra classes for the inner frame, to override visuals. */
+    frameClassName?: string;
+    /** Inline styles for the inner frame. */
+    frameStyle?: CSSProperties;
 }
 /**
- * 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. Put
+ * whatever you want into `header` / `children` / `footer`, and use
+ * `above` / `below` / `topLeft` / `topRight` / `topCenter` / `overlay` for
+ * floating bits. It knows nothing about any particular game.
  */
-declare function Seat({ seat, size, className }: SeatProps): react.JSX.Element;
+declare function Seat({ isActive, isWinner, isDimmed, onClick, header, children, footer, badge, overlay, above, below, topLeft, topRight, topCenter, width, height, className, frameClassName, frameStyle, }: 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

@@ -1,8 +1,9 @@
 "use client";
 
 // src/cn.ts
+import { twMerge } from "tailwind-merge";
 function cn(...parts) {
-  return parts.filter(Boolean).join(" ");
+  return twMerge(parts.filter(Boolean).join(" "));
 }
 
 // src/format.ts
@@ -12,6 +13,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 +157,75 @@ 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,
+  children,
+  footer,
+  badge,
+  overlay,
+  above,
+  below,
+  topLeft,
+  topRight,
+  topCenter,
+  width = 160,
+  height = 176,
+  className,
+  frameClassName,
+  frameStyle
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("relative flex flex-col items-center", className), style: { width }, children: [
+    topCenter !== void 0 && /* @__PURE__ */ jsx2("div", { className: "absolute -top-2 left-1/2 z-20 flex -translate-x-1/2 gap-1", children: topCenter }),
+    topLeft !== void 0 && /* @__PURE__ */ jsx2("div", { className: "absolute -top-3 -left-2 z-40", children: topLeft }),
+    topRight !== void 0 && /* @__PURE__ */ jsx2("div", { className: "absolute -top-2 -right-2 z-40", children: topRight }),
+    above !== void 0 && /* @__PURE__ */ jsx2("div", { className: "pointer-events-none absolute -top-12 left-1/2 z-30 -translate-x-1/2", children: above }),
     /* @__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,
+        style: { width, height, ...frameStyle },
         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"
+          "relative flex flex-col items-center justify-between gap-1 rounded-2xl border bg-neutral-900/80 p-2 text-neutral-100 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",
+          frameClassName
         ),
         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 shrink-0 items-center justify-between gap-1 text-[11px]", children: header }),
+          /* @__PURE__ */ jsx2("div", { className: "flex min-h-0 flex-1 items-center justify-center", children }),
+          footer !== void 0 && /* @__PURE__ */ jsx2("div", { className: "flex w-full shrink-0 items-center justify-between text-[11px] text-neutral-300", children: footer }),
+          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 })
         ]
       }
-    )
+    ),
+    badge !== void 0 && /* @__PURE__ */ jsx2("div", { className: "absolute top-0 right-0 z-40", children: badge }),
+    below !== void 0 && /* @__PURE__ */ jsx2("div", { className: "mt-1 flex flex-col items-center gap-1", children: below })
   ] });
 }
 
-// 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 +236,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 +297,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 +323,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 +331,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 +339,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 +356,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