@stargazeryan/poker-ui 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -22,22 +22,62 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   BB: () => BB,
+  COUNT_UP_MS: () => COUNT_UP_MS,
   CardBack: () => CardBack,
   CardTable: () => CardTable,
+  Chip: () => Chip,
+  ChipStack: () => ChipStack,
   CommunityCards: () => CommunityCards,
+  DEAL_STAGGER_MS: () => DEAL_STAGGER_MS,
+  DEFAULT_BET_SCALE: () => DEFAULT_BET_SCALE,
+  DEFAULT_DENOMINATIONS: () => DEFAULT_DENOMINATIONS,
+  DEFAULT_FELT_GAP: () => DEFAULT_FELT_GAP,
+  DEFAULT_MARGIN_X: () => DEFAULT_MARGIN_X,
+  DEFAULT_MARGIN_Y: () => DEFAULT_MARGIN_Y,
+  DEFAULT_SEAT_GAP: () => DEFAULT_SEAT_GAP,
+  DEFAULT_SEAT_H: () => DEFAULT_SEAT_H,
+  DEFAULT_SEAT_W: () => DEFAULT_SEAT_W,
+  DESIGN_H: () => DESIGN_H,
+  DESIGN_W: () => DESIGN_W,
+  FLIP_STAGGER_MS: () => FLIP_STAGGER_MS,
+  GLOW_GAP: () => GLOW_GAP,
   HoleCards: () => HoleCards,
   PlayingCard: () => PlayingCard,
   PokerTable: () => CardTable,
   Pot: () => Pot,
+  RIM_GAP: () => RIM_GAP,
+  SEAT_SHRINK_FLOOR: () => SEAT_SHRINK_FLOOR,
+  SIZES: () => SIZES,
   Seat: () => Seat,
+  chipBreakdown: () => chipBreakdown,
+  chipCount: () => chipCount,
+  chipSpotColor: () => chipSpotColor,
+  chipsTotal: () => chipsTotal,
   cn: () => cn,
+  contrastRatio: () => contrastRatio,
+  describeCard: () => describeCard,
+  ellipseBox: () => ellipseBox,
   ellipsePoint: () => ellipsePoint,
+  fitSeatScale: () => fitSeatScale,
+  flatten: () => flatten,
   formatBB: () => formatBB,
+  getRankName: () => getRankName,
+  getSuitName: () => getSuitName,
   getSuitSymbol: () => getSuitSymbol,
+  isKnownSuit: () => isKnownSuit,
+  isRedSuit: () => isRedSuit,
+  layoutSeats: () => layoutSeats,
+  minSeatSeparation: () => minSeatSeparation,
+  mostVisible: () => mostVisible,
   nextSeatIndex: () => nextSeatIndex,
   parseCard: () => parseCard,
+  parseColor: () => parseColor,
+  relativeLuminance: () => relativeLuminance,
   ringPoints: () => ringPoints,
-  seatAngle: () => seatAngle
+  seatAngle: () => seatAngle,
+  seatPoint: () => seatPoint,
+  seatRingRadii: () => seatRingRadii,
+  tableRadii: () => tableRadii
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -49,17 +89,147 @@ function cn(...parts) {
 
 // src/format.ts
 var BB = 20;
-function formatBB(amount) {
-  const bb = amount / BB;
-  return `${Number.isInteger(bb) ? bb : bb.toFixed(1)} BB`;
+function formatBB(amount, bb = BB) {
+  const value = amount / bb;
+  return `${Number.isInteger(value) ? value : value.toFixed(1)} BB`;
+}
+
+// src/color.ts
+function parseColor(color) {
+  const input = color.trim();
+  const hex = input.match(/^#([0-9a-f]{3,8})$/i);
+  if (hex) {
+    const raw = hex[1];
+    if (raw.length === 3 || raw.length === 4) {
+      const [r, g, b, a] = raw.split("").map((c) => parseInt(c + c, 16));
+      return { r, g, b, a: raw.length === 4 ? a / 255 : 1 };
+    }
+    if (raw.length === 6 || raw.length === 8) {
+      return {
+        r: parseInt(raw.slice(0, 2), 16),
+        g: parseInt(raw.slice(2, 4), 16),
+        b: parseInt(raw.slice(4, 6), 16),
+        a: raw.length === 8 ? parseInt(raw.slice(6, 8), 16) / 255 : 1
+      };
+    }
+    return null;
+  }
+  const fn = input.match(/^rgba?\(([^)]+)\)$/i);
+  if (!fn) return null;
+  const parts = fn[1].split(/[,\s/]+/).filter(Boolean).map(Number);
+  if (parts.length < 3 || parts.slice(0, 3).some((n) => !Number.isFinite(n))) return null;
+  return { r: parts[0], g: parts[1], b: parts[2], a: Number.isFinite(parts[3]) ? parts[3] : 1 };
+}
+function relativeLuminance(color) {
+  const parsed = parseColor(color);
+  if (!parsed) return null;
+  const channel = (c) => {
+    const s = Math.min(255, Math.max(0, c)) / 255;
+    return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(parsed.r) + 0.7152 * channel(parsed.g) + 0.0722 * channel(parsed.b);
+}
+function flatten(foreground, background) {
+  const fg = parseColor(foreground);
+  const bg = parseColor(background);
+  if (!fg || !bg) return null;
+  const mix = (f, b) => fg.a * f + (1 - fg.a) * b;
+  return { r: mix(fg.r, bg.r), g: mix(fg.g, bg.g), b: mix(fg.b, bg.b), a: 1 };
+}
+function contrastRatio(foreground, background) {
+  const composited = flatten(foreground, background);
+  if (!composited) return null;
+  const a = relativeLuminance(`rgb(${composited.r}, ${composited.g}, ${composited.b})`);
+  const b = relativeLuminance(background);
+  if (a === null || b === null) return null;
+  const [hi, lo] = a > b ? [a, b] : [b, a];
+  return (hi + 0.05) / (lo + 0.05);
+}
+function mostVisible(candidates, background) {
+  let best = candidates[0];
+  let bestRatio = -1;
+  for (const candidate of candidates) {
+    const ratio = contrastRatio(candidate, background);
+    if (ratio !== null && ratio > bestRatio) {
+      best = candidate;
+      bestRatio = ratio;
+    }
+  }
+  return best;
+}
+
+// src/sizes.ts
+var SIZES = ["xs", "sm", "md", "lg"];
+
+// src/motion.ts
+var COUNT_UP_MS = 500;
+var DEAL_STAGGER_MS = 100;
+var FLIP_STAGGER_MS = 70;
+
+// src/cards.ts
+var RANK_NAMES = {
+  A: "Ace",
+  K: "King",
+  Q: "Queen",
+  J: "Jack",
+  "10": "Ten",
+  "9": "Nine",
+  "8": "Eight",
+  "7": "Seven",
+  "6": "Six",
+  "5": "Five",
+  "4": "Four",
+  "3": "Three",
+  "2": "Two"
+};
+var SUIT_NAMES = {
+  s: "spades",
+  h: "hearts",
+  d: "diamonds",
+  c: "clubs"
+};
+var SUIT_SYMBOLS = {
+  s: "\u2660",
+  h: "\u2665",
+  d: "\u2666",
+  c: "\u2663"
+};
+function parseCard(card) {
+  if (!card || card.length < 2) return { rank: "", suit: "" };
+  return { rank: card.slice(0, -1), suit: card.slice(-1).toLowerCase() };
+}
+function getSuitSymbol(suit) {
+  return SUIT_SYMBOLS[suit.toLowerCase()] ?? suit;
+}
+function getRankName(rank) {
+  return RANK_NAMES[rank.toUpperCase()] ?? rank;
+}
+function getSuitName(suit) {
+  return SUIT_NAMES[suit.toLowerCase()] ?? suit;
+}
+function isRedSuit(suit) {
+  const s = suit.toLowerCase();
+  return s === "h" || s === "d";
+}
+function isKnownSuit(suit) {
+  return suit.toLowerCase() in SUIT_SYMBOLS;
+}
+function describeCard(card) {
+  if (card === null || card === "") return "face-down card";
+  const { rank, suit } = parseCard(card);
+  const rankName = RANK_NAMES[rank.toUpperCase()];
+  const suitName = SUIT_NAMES[suit];
+  if (!rankName || !suitName) return card;
+  return `${rankName} of ${suitName}`;
 }
 
 // src/seat.ts
 function nextSeatIndex(current, seatCount, opts = {}) {
-  const n = Math.max(1, Math.floor(seatCount));
+  const floored = Math.floor(seatCount);
+  const n = Number.isFinite(floored) && floored > 0 ? floored : 1;
   const dir = opts.dir ?? 1;
   const skip = opts.skip;
-  const start = (Math.floor(current) % n + n) % n;
+  const start = ((Math.floor(current) || 0) % n + n) % n;
   let i = start;
   for (let step = 0; step < n - 1; step++) {
     i = (i + dir + n) % n;
@@ -86,6 +256,112 @@ function ringPoints(count, cx, cy, rx, ry, startAngle = 90) {
   return Array.from({ length: n }, (_, i) => ellipsePoint(cx, cy, rx, ry, seatAngle(i, n, startAngle)));
 }
 
+// src/layout.ts
+var DESIGN_W = 1200;
+var DESIGN_H = 900;
+var DEFAULT_MARGIN_X = 164 / DESIGN_W;
+var DEFAULT_MARGIN_Y = 196 / DESIGN_H;
+var DEFAULT_FELT_GAP = 11;
+var DEFAULT_BET_SCALE = 0.72;
+var DEFAULT_SEAT_GAP = 24;
+var DEFAULT_SEAT_W = 160;
+var DEFAULT_SEAT_H = 176;
+var RIM_GAP = 6;
+var GLOW_GAP = 2;
+var SEAT_SHRINK_FLOOR = 0.5;
+function tableRadii(designWidth, designHeight, marginX, marginY) {
+  return {
+    rx: Math.max(0, designWidth / 2 - marginX * designWidth),
+    ry: Math.max(0, designHeight / 2 - marginY * designHeight)
+  };
+}
+function seatRingRadii(designWidth, designHeight, tableRx, tableRy, seatW, seatH, feltGap) {
+  const rx = Math.min(tableRx - feltGap + seatW / 2 + 6, designWidth / 2 - seatW / 2);
+  const ry = Math.min(tableRy - feltGap + seatH / 2 + 6, designHeight / 2 - seatH / 2);
+  return { rx: Math.max(0, rx), ry: Math.max(0, ry) };
+}
+function seatPoint(index, count, cx, cy, ringRx, ringRy, startAngle = 90) {
+  return ellipsePoint(cx, cy, ringRx, ringRy, seatAngle(index, count, startAngle));
+}
+function ellipseBox(designWidth, designHeight, rx, ry) {
+  const top = designHeight / 2 - ry;
+  const left = designWidth / 2 - rx;
+  return { top, right: left, bottom: top, left };
+}
+function boxSeparation(a, b) {
+  const dx = Math.max(b.x - a.x - (a.width + b.width) / 2, a.x - b.x - (a.width + b.width) / 2);
+  const dy = Math.max(b.y - a.y - (a.height + b.height) / 2, a.y - b.y - (a.height + b.height) / 2);
+  if (dx > 0 && dy > 0) return Math.hypot(dx, dy);
+  if (dx > 0) return dx;
+  if (dy > 0) return dy;
+  return Math.max(dx, dy);
+}
+function minSeatSeparation(seats) {
+  let worst = Infinity;
+  for (let i = 0; i < seats.length; i++) {
+    for (let j = i + 1; j < seats.length; j++) {
+      const s = boxSeparation(seats[i], seats[j]);
+      if (s < worst) worst = s;
+    }
+  }
+  return worst;
+}
+function positionsFor(count, cx, cy, ringRx, ringRy, seatW, seatH, startAngle) {
+  return Array.from({ length: count }, (_, index) => {
+    const p = seatPoint(index, count, cx, cy, ringRx, ringRy, startAngle);
+    return { index, x: p.x, y: p.y, width: seatW, height: seatH };
+  });
+}
+function fitSeatScale(opts) {
+  if (opts.seatGap <= 0) return 1;
+  const { rx, ry } = tableRadii(opts.designWidth, opts.designHeight, opts.marginX, opts.marginY);
+  const cx = opts.designWidth / 2;
+  const cy = opts.designHeight / 2;
+  for (let step = 0; step <= 50; step++) {
+    const scale = 1 - step * 0.01;
+    const w = Math.max(1, Math.round(opts.seatWidth * scale));
+    const h = Math.max(1, Math.round(opts.seatHeight * scale));
+    const ring = seatRingRadii(opts.designWidth, opts.designHeight, rx, ry, w, h, opts.feltGap);
+    const seats = positionsFor(opts.count, cx, cy, ring.rx, ring.ry, w, h, opts.startAngle);
+    if (minSeatSeparation(seats) >= opts.seatGap) return scale;
+    if (scale <= SEAT_SHRINK_FLOOR) break;
+  }
+  return SEAT_SHRINK_FLOOR;
+}
+function layoutSeats(opts) {
+  const { rx, ry } = tableRadii(opts.designWidth, opts.designHeight, opts.marginX, opts.marginY);
+  const cx = opts.designWidth / 2;
+  const cy = opts.designHeight / 2;
+  const scale = fitSeatScale(opts);
+  const seatW = Math.max(1, Math.round(opts.seatWidth * scale));
+  const seatH = Math.max(1, Math.round(opts.seatHeight * scale));
+  const ring = seatRingRadii(opts.designWidth, opts.designHeight, rx, ry, seatW, seatH, opts.feltGap);
+  const betScale = Math.min(1, Math.max(0.2, opts.betRadiusScale ?? DEFAULT_BET_SCALE));
+  const betRx = rx * betScale;
+  const betRy = ry * betScale;
+  const box = (bx, by) => ellipseBox(opts.designWidth, opts.designHeight, bx, by);
+  return {
+    cx,
+    cy,
+    tableRx: rx,
+    tableRy: ry,
+    ringRx: ring.rx,
+    ringRy: ring.ry,
+    betRx,
+    betRy,
+    seatW,
+    seatH,
+    seats: positionsFor(opts.count, cx, cy, ring.rx, ring.ry, seatW, seatH, opts.startAngle),
+    boxes: {
+      table: box(rx, ry),
+      felt: box(rx - opts.feltGap, ry - opts.feltGap),
+      rim: box(rx - RIM_GAP, ry - RIM_GAP),
+      glow: box(rx - GLOW_GAP, ry - GLOW_GAP),
+      bettingLine: box(betRx, betRy)
+    }
+  };
+}
+
 // src/components/PlayingCard.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var SIZE_CLASSES = {
@@ -126,82 +402,77 @@ var BACK_EMBLEM_SIZE = {
   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 "";
-  }
+  if (isRedSuit(suit)) return "text-red-600";
+  return isKnownSuit(suit) ? "text-neutral-900" : "";
 }
 var CARD_FACE = "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)]";
-function PlayingCard({ card, size = "md", className }) {
-  if (!card) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardBack, { size, className });
+function PlayingCard({ card, size = "md", label, className }) {
+  if (!card) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardBack, { size, className, label });
+  const name = label ?? describeCard(card);
   const { rank, suit } = parseCard(card);
   const suitSymbol = getSuitSymbol(suit);
   const suitClass = getSuitClass(suit);
   const large = size === "md" || size === "lg";
   if (!large) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn(SIZE_CLASSES[size], CARD_FACE, className), style: { aspectRatio: "10/14" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("absolute inset-0 flex flex-col leading-none", suitClass), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(SMALL_RANK[size], "font-bold tracking-tight"), children: rank }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: SMALL_SUIT[size], children: suitSymbol }) })
-    ] }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        role: "img",
+        "aria-label": name,
+        className: cn(SIZE_CLASSES[size], CARD_FACE, className),
+        style: { aspectRatio: "10/14" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("absolute inset-0 flex flex-col leading-none", suitClass), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(SMALL_RANK[size], "font-bold tracking-tight"), children: rank }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: SMALL_SUIT[size], children: suitSymbol }) })
+        ] })
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn(SIZE_CLASSES[size], CARD_FACE, 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 })
-    ] }),
-    /* @__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 }) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "img",
+      "aria-label": name,
+      className: cn(SIZE_CLASSES[size], CARD_FACE, 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 })
+        ] }),
+        /* @__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.jsxs)("g", { fill: "var(--color-card-back-emblem, #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" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "20", r: "3.2", fill: "var(--color-card-back, #5a0c18)" })
   ] });
 }
-function CardBack({ size = "md", className }) {
+function CardBack({ size = "md", label = "face-down card", className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      role: "img",
+      "aria-label": label,
       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)]",
+        "bg-gradient-to-br from-card-back-light via-card-back to-card-back-dark",
+        "border-2 border-card-back-ink/70 shadow-[0_2px_6px_rgba(0,0,0,0.45)]",
         className
       ),
       style: { aspectRatio: "10/14" },
@@ -209,8 +480,23 @@ function CardBack({ size = "md", className }) {
     }
   );
 }
-function HoleCards({ cards, size = "lg", className, deal = true }) {
-  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)("div", { className: cn(deal && "animate-deal-in"), style: deal ? { animationDelay: `${i * 100}ms` } : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlayingCard, { card, size }) }, i)) });
+function HoleCards({ cards, size = "lg", className, deal = true, dealKey }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("flex gap-2", className), children: cards.map((card, i) => (
+    /*
+     * Keying on the card rather than the index is what makes the deal
+     * animation replay: React reuses an element whose key is unchanged, and
+     * a reused element never restarts its CSS animation.
+     */
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: cn(deal && "animate-deal-in"),
+        style: deal ? { animationDelay: `${i * DEAL_STAGGER_MS}ms` } : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlayingCard, { card, size })
+      },
+      dealKey !== void 0 ? `${dealKey}:${i}` : `${i}:${card ?? "back"}`
+    )
+  )) });
 }
 function CommunityCards({ cards, size = "md", className, animated = true, slots }) {
   const count = slots ?? cards.length;
@@ -219,14 +505,171 @@ function CommunityCards({ cards, size = "md", className, animated = true, slots
     "div",
     {
       className: cn("h-full w-full", animated && "animate-card-flip"),
-      style: animated ? { animationDelay: `${i * 70}ms` } : void 0,
+      style: animated ? { animationDelay: `${i * FLIP_STAGGER_MS}ms` } : void 0,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlayingCard, { card, size })
     }
   ) : null }, i)) });
 }
 
-// src/components/Seat.tsx
+// src/chips.ts
+var DEFAULT_DENOMINATIONS = [
+  { value: 100, color: "#1a1a2e", className: "fill-chip-black" },
+  { value: 25, color: "#27ae60", className: "fill-chip-green" },
+  { value: 10, color: "#2980b9", className: "fill-chip-blue" },
+  { value: 5, color: "#c0392b", className: "fill-chip-red" },
+  { value: 1, color: "#ecf0f1", className: "fill-chip-white" }
+];
+var SPOT_CANDIDATES = ["rgba(255,255,255,0.9)", "rgba(0,0,0,0.45)"];
+function chipSpotColor(bodyColor) {
+  return mostVisible(SPOT_CANDIDATES, bodyColor);
+}
+function chipBreakdown(amount, denominations = DEFAULT_DENOMINATIONS) {
+  const usable = denominations.filter((d) => Number.isFinite(d.value) && d.value >= 1);
+  const sorted = [...usable].sort((a, b) => b.value - a.value);
+  let remaining = Math.max(0, Math.floor(Number.isFinite(amount) ? amount : 0));
+  const entries = [];
+  for (const denomination of sorted) {
+    const count = Math.floor(remaining / denomination.value);
+    if (count > 0) {
+      entries.push({ ...denomination, count });
+      remaining -= count * denomination.value;
+    }
+  }
+  return entries;
+}
+function chipsTotal(entries) {
+  return entries.reduce((sum, e) => sum + e.value * e.count, 0);
+}
+function chipCount(entries) {
+  return entries.reduce((sum, e) => sum + e.count, 0);
+}
+
+// src/components/Chip.tsx
+var import_react = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var CHIP_WIDTH = { sm: 22, md: 30, lg: 42 };
+var SPOT_ANGLES = [0, 45, 90, 135, 180, 225, 270, 315];
+function Chip({
+  value,
+  color = "#2980b9",
+  colorClassName,
+  spotColor,
+  size = "md",
+  label,
+  className
+}) {
+  const clipId = `chip-clip-${(0, import_react.useId)().replace(/:/g, "")}`;
+  const width = CHIP_WIDTH[size];
+  const spots = spotColor ?? chipSpotColor(color);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      width,
+      height: width * 0.625,
+      viewBox: "0 0 48 30",
+      role: "img",
+      "aria-label": label ?? (value !== void 0 ? `${value} chip` : "chip"),
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "24", cy: "15", rx: "22", ry: "13" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "24", cy: "18", rx: "22", ry: "13", className: colorClassName, fill: color }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "24", cy: "18", rx: "22", ry: "13", fill: "rgba(0,0,0,0.32)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "24", cy: "15", rx: "22", ry: "13", className: colorClassName, fill: color }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { clipPath: `url(#${clipId})`, children: SPOT_ANGLES.map((angle) => {
+          const rad = angle * Math.PI / 180;
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "rect",
+            {
+              x: -1.7,
+              y: -3,
+              width: 3.4,
+              height: 6,
+              rx: 1.3,
+              fill: spots,
+              transform: `translate(${24 + 19.3 * Math.cos(rad)} ${15 + 10.7 * Math.sin(rad)}) rotate(${angle})`
+            },
+            angle
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "24", cy: "15", rx: "21", ry: "12.1", fill: "none", stroke: "rgba(255,255,255,0.3)", strokeWidth: "1.2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "24", cy: "15", rx: "13.4", ry: "7.9", fill: "rgba(255,255,255,0.94)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "24", cy: "15", rx: "13.4", ry: "7.9", fill: "none", stroke: "rgba(0,0,0,0.18)", strokeWidth: "0.8" }),
+        value !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "text",
+          {
+            x: "24",
+            y: "18.3",
+            textAnchor: "middle",
+            fontSize: "9.5",
+            fontWeight: "700",
+            fill: "#171717",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+function ChipStack({
+  amount,
+  size = "md",
+  denominations = DEFAULT_DENOMINATIONS,
+  maxChips = 12,
+  label,
+  className
+}) {
+  const entries = chipBreakdown(amount, denominations);
+  const total = chipCount(entries);
+  const drawn = [];
+  for (const entry of entries) {
+    for (let i = 0; i < entry.count && drawn.length < maxChips; i++) drawn.push(entry);
+    if (drawn.length >= maxChips) break;
+  }
+  const hidden = total - drawn.length;
+  const offset = Math.max(3, Math.round(CHIP_WIDTH[size] * 0.17));
+  const breakdown = entries.map((e) => `${e.count}x${e.label ?? e.value}`).join(", ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: cn("inline-flex flex-col items-center gap-1", className),
+      role: "img",
+      "aria-label": `${amount} in ${total} ${total === 1 ? "chip" : "chips"}${breakdown ? `: ${breakdown}` : ""}`,
+      children: [
+        drawn.length > 0 && // Presentation only — the stack already carries the accessible name.
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "aria-hidden": "true", className: "flex flex-col items-center drop-shadow-[0_3px_4px_rgba(0,0,0,0.5)]", children: drawn.map((entry, i) => (
+          // Later chips are tucked under the ones above them, so z-index has
+          // to descend as the stack grows.
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative", style: { marginTop: i === 0 ? 0 : -offset, zIndex: drawn.length - i }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Chip,
+            {
+              value: entry.label ?? entry.value,
+              color: entry.color,
+              colorClassName: entry.className,
+              spotColor: entry.spotColor,
+              size
+            }
+          ) }, i)
+        )) }),
+        hidden > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "font-mono text-[10px] leading-none text-neutral-400", children: [
+          "+",
+          hidden
+        ] }),
+        label !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "leading-none", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/seatSize.ts
+var import_react2 = require("react");
+var SeatSizeContext = (0, import_react2.createContext)(null);
+function useSeatSize() {
+  return (0, import_react2.useContext)(SeatSizeContext);
+}
+
+// src/components/Seat.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Seat({
   isActive = false,
   isWinner = false,
@@ -244,21 +687,24 @@ function Seat({
   topLeft,
   topRight,
   topCenter,
-  width = 160,
-  height = 176,
+  width,
+  height,
   className,
   frameClassName,
   frameStyle
 }) {
-  const activeClass = animated ? "border-amber-400 animate-turn-glow" : "border-amber-400 shadow-[0_0_18px_rgba(243,156,18,0.5)]";
-  const winnerClass = animated ? "border-amber-400 animate-winner-glow" : "border-amber-400 shadow-[0_0_0_3px_rgba(243,156,18,0.9)]";
-  const effTopLeft = topLeft !== void 0 ? topLeft : isWinner && winnerCrown ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-3xl drop-shadow-[0_2px_4px_rgba(0,0,0,0.6)] animate-bounce", children: "\u{1F451}" }) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("relative flex flex-col items-center", className), style: { width }, children: [
-    topCenter !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute -top-2 left-1/2 z-20 flex -translate-x-1/2 gap-1", children: topCenter }),
-    effTopLeft !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute -top-3 -left-2 z-40", children: effTopLeft }),
-    topRight !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute -top-2 -right-2 z-40", children: topRight }),
-    above !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pointer-events-none absolute -top-12 left-1/2 z-30 -translate-x-1/2", children: above }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  const laidOut = useSeatSize();
+  const frameWidth = width ?? laidOut?.width ?? DEFAULT_SEAT_W;
+  const frameHeight = height ?? laidOut?.height ?? DEFAULT_SEAT_H;
+  const activeClass = animated ? "border-gold animate-turn-glow" : "border-gold shadow-[0_0_18px_color-mix(in_oklab,var(--color-gold)_50%,transparent)]";
+  const winnerClass = animated ? "border-gold animate-winner-glow" : "border-gold shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-gold)_90%,transparent)]";
+  const effTopLeft = topLeft !== void 0 ? topLeft : isWinner && winnerCrown ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-3xl drop-shadow-[0_2px_4px_rgba(0,0,0,0.6)] animate-bounce", children: "\u{1F451}" }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("relative flex flex-col items-center", className), style: { width: frameWidth }, children: [
+    topCenter !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute -top-2 left-1/2 z-20 flex -translate-x-1/2 gap-1", children: topCenter }),
+    effTopLeft !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute -top-3 -left-2 z-40", children: effTopLeft }),
+    topRight !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute -top-2 -right-2 z-40", children: topRight }),
+    above !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pointer-events-none absolute -top-12 left-1/2 z-30 -translate-x-1/2", children: above }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         role: onClick ? "button" : void 0,
@@ -267,98 +713,86 @@ function Seat({
         onKeyDown: onClick ? (e) => {
           if (e.key === "Enter" || e.key === " ") onClick();
         } : void 0,
-        style: { width, height, ...frameStyle },
+        style: { width: frameWidth, height: frameHeight, ...frameStyle },
         className: cn(
           "relative flex flex-col items-center justify-between gap-1 rounded-2xl border bg-neutral-900/80 p-2 text-neutral-100 transition",
           "border-neutral-700",
           isActive && activeClass,
           isWinner && winnerClass,
           isDimmed && "opacity-50",
-          onClick && "cursor-pointer hover:border-neutral-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400",
+          onClick && "cursor-pointer hover:border-neutral-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-gold",
           frameClassName
         ),
         children: [
-          header !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex w-full shrink-0 items-center justify-between gap-1 text-[11px]", children: header }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex min-h-0 flex-1 items-center justify-center", children }),
-          footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex w-full shrink-0 items-center justify-between text-[11px] text-neutral-300", children: footer }),
-          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 })
+          header !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex w-full shrink-0 items-center justify-between gap-1 text-[11px]", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex min-h-0 flex-1 items-center justify-center", children }),
+          footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex w-full shrink-0 items-center justify-between text-[11px] text-neutral-300", children: footer }),
+          overlay !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 text-center", children: overlay })
         ]
       }
     ),
-    badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute top-0 right-0 z-40", children: badge }),
-    below !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-1 flex flex-col items-center gap-1", children: below })
+    badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute top-0 right-0 z-40", children: badge }),
+    below !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-1 flex flex-col items-center gap-1", children: below })
   ] });
 }
 
 // src/components/Pot.tsx
-var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var defaultFormat = (amount) => amount.toLocaleString();
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 function CountUp({ value, format }) {
-  const [shown, setShown] = (0, import_react.useState)(value);
-  const fromRef = (0, import_react.useRef)(value);
-  (0, import_react.useEffect)(() => {
-    const from = fromRef.current;
+  const [shown, setShown] = (0, import_react3.useState)(value);
+  const shownRef = (0, import_react3.useRef)(value);
+  (0, import_react3.useEffect)(() => {
+    const from = shownRef.current;
     const to = value;
     if (from === to) return;
+    if (prefersReducedMotion()) {
+      shownRef.current = to;
+      setShown(to);
+      return;
+    }
     let raf = 0;
-    const start = performance.now();
-    const dur = 500;
+    const dur = COUNT_UP_MS;
+    let origin = null;
     const tick = (now) => {
-      const t = Math.min(1, (now - start) / dur);
+      if (origin === null) origin = now;
+      const t = Math.min(1, Math.max(0, (now - origin) / dur));
       const eased = 1 - Math.pow(1 - t, 3);
-      setShown(Math.round(from + (to - from) * eased));
+      const next = Math.round(from + (to - from) * eased);
+      shownRef.current = next;
+      setShown(next);
       if (t < 1) raf = requestAnimationFrame(tick);
-      else fromRef.current = to;
     };
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: format(shown) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: format(shown) });
 }
-function Pot({ amount, label, format = formatBB, animate = true, 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: animate ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CountUp, { value: amount, format }) : format(amount) })
+function Pot({ amount, label, format = defaultFormat, animate = true, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex items-center gap-2 font-mono text-sm text-gold", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-neutral-400", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "whitespace-nowrap rounded-full border border-gold/50 bg-neutral-900/80 px-3 py-1 shadow-inner", children: animate ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CountUp, { value: amount, format }) : format(amount) })
   ] });
 }
 
 // src/components/CardTable.tsx
-var import_react2 = 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;
-var CONFETTI_COLORS = ["#f39c12", "#e74c3c", "#2ecc71", "#3498db", "#f1c40f", "#9b59b6"];
-function calculateSeatLayouts(seatCount, seatWidth, seatHeight, startAngle) {
-  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 layouts = [];
-  for (let i = 0; i < seatCount; i++) {
-    const pt = ellipsePoint(cx, cy, ringX, ringY, seatAngle(i, seatCount, startAngle));
-    layouts.push({
-      x: pt.x - seatWidth / 2,
-      y: pt.y - seatHeight / 2,
-      index: i
-    });
-  }
-  return layouts;
-}
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MIN_FIT_ASPECT = 0.5;
+var MAX_FIT_ASPECT = 2.5;
+var DEFAULT_CONFETTI_COLORS = ["#f39c12", "#e74c3c", "#2ecc71", "#3498db", "#f1c40f", "#9b59b6"];
 function CardTable({
   seatCount = 6,
   seats,
   renderSeat,
   bets,
   renderBet,
-  betRadiusScale = BET_SCALE,
+  betRadiusScale = DEFAULT_BET_SCALE,
   startAngle = 90,
   yourSeatIndex = null,
   center,
@@ -366,96 +800,142 @@ function CardTable({
   yourTurn = false,
   winnerSeats = [],
   confetti = true,
-  seatWidth = 160,
-  seatHeight = 176,
+  confettiColors = DEFAULT_CONFETTI_COLORS,
+  seatWidth = DEFAULT_SEAT_W,
+  seatHeight = DEFAULT_SEAT_H,
+  seatGap = DEFAULT_SEAT_GAP,
+  designWidth = DESIGN_W,
+  designHeight = DESIGN_H,
+  marginX = DEFAULT_MARGIN_X,
+  marginY = DEFAULT_MARGIN_Y,
+  feltGap = DEFAULT_FELT_GAP,
+  fit = "design",
   className
 }) {
-  const count = Math.max(2, Math.min(10, Math.floor(seatCount)));
-  const outerRef = (0, import_react2.useRef)(null);
-  const [scale, setScale] = (0, import_react2.useState)(1);
-  const layouts = (0, import_react2.useMemo)(
-    () => calculateSeatLayouts(count, seatWidth, seatHeight, startAngle),
-    [count, seatWidth, seatHeight, startAngle]
-  );
-  const betRx = TABLE_RX * betRadiusScale;
-  const betRy = TABLE_RY * betRadiusScale;
-  const hasBets = bets !== void 0 || renderBet !== void 0;
-  (0, import_react2.useLayoutEffect)(() => {
+  const requested = Math.floor(seatCount);
+  const count = Number.isFinite(requested) ? Math.max(1, requested) : 1;
+  const outerRef = (0, import_react4.useRef)(null);
+  const [box, setBox] = (0, import_react4.useState)({ w: 0, h: 0 });
+  (0, import_react4.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));
+      setBox({ w, 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 ringInset = { inset: `${MARGIN_Y + 2}px ${MARGIN_X + 2}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)(
+  const geo = (0, import_react4.useMemo)(() => {
+    const dh = designHeight;
+    const dw = fit === "container" && box.w > 0 && box.h > 0 ? dh * Math.min(MAX_FIT_ASPECT, Math.max(MIN_FIT_ASPECT, box.w / box.h)) : designWidth;
+    const layout2 = layoutSeats({
+      count,
+      designWidth: dw,
+      designHeight: dh,
+      marginX,
+      marginY,
+      feltGap,
+      seatWidth,
+      seatHeight,
+      // Always applied. Every Seat inside the table is told its frame size
+      // through context, so the shrink is no longer limited to `renderSeat`.
+      seatGap,
+      startAngle,
+      betRadiusScale
+    });
+    const scale2 = box.w > 0 && box.h > 0 ? Math.min(box.w / dw, box.h / dh) : 1;
+    return { designW: dw, designH: dh, scale: scale2, layout: layout2 };
+  }, [
+    count,
+    designWidth,
+    designHeight,
+    marginX,
+    marginY,
+    feltGap,
+    seatWidth,
+    seatHeight,
+    seatGap,
+    startAngle,
+    fit,
+    betRadiusScale,
+    box.w,
+    box.h
+  ]);
+  const { designW, designH, scale, layout } = geo;
+  const { cx, cy, seatW, seatH, betRx, betRy, boxes } = layout;
+  const hasBets = bets !== void 0 || renderBet !== void 0;
+  const px = (b) => ({
+    top: `${b.top}px`,
+    right: `${b.right}px`,
+    bottom: `${b.bottom}px`,
+    left: `${b.left}px`
+  });
+  const tableFrameInset = px(boxes.table);
+  const feltInset = px(boxes.felt);
+  const rimInset = px(boxes.rim);
+  const ringInset = px(boxes.glow);
+  const betLineInset = px(boxes.bettingLine);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.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)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: designW * scale, height: designH * scale }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           className: "relative",
-          style: { width: DESIGN_W, height: DESIGN_H, transform: `scale(${scale})`, transformOrigin: "top left" },
+          style: { width: designW, height: designH, transform: `scale(${scale})`, transformOrigin: "top left" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "div",
               {
-                className: "absolute -inset-6 rounded-[50%] bg-[radial-gradient(closest-side,rgba(240,192,74,0.16),transparent_72%)] blur-3xl",
+                className: "absolute -inset-6 rounded-[50%] bg-[radial-gradient(closest-side,color-mix(in_oklab,var(--color-gold-light)_16%,transparent),transparent_72%)] blur-3xl",
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.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)]",
+                className: "absolute rounded-[50%] bg-gradient-to-b from-rail via-rail-dark to-rail-deep 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)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.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)]",
+                className: "absolute rounded-[50%] bg-[radial-gradient(ellipse_at_50%_32%,var(--color-felt-light),var(--color-felt)_55%,var(--color-felt-dark))] 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"
               }
             ),
-            ambient && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            ambient && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "div",
                 {
-                  className: "absolute animate-spotlight rounded-[50%] bg-[radial-gradient(closest-side,rgba(255,214,120,0.14),transparent_70%)] blur-2xl",
+                  className: "absolute animate-spotlight rounded-[50%] bg-[radial-gradient(closest-side,color-mix(in_oklab,var(--color-gold-glow)_14%,transparent),transparent_70%)] blur-2xl",
                   style: feltInset,
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute overflow-hidden rounded-[50%]", style: feltInset, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 animate-felt-shimmer bg-[linear-gradient(115deg,transparent_42%,rgba(255,255,255,0.06)_50%,transparent_58%)] bg-[length:220%_100%]" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute overflow-hidden rounded-[50%]", style: feltInset, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute inset-0 animate-felt-shimmer bg-[linear-gradient(115deg,transparent_42%,rgba(255,255,255,0.06)_50%,transparent_58%)] bg-[length:220%_100%]" }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "div",
               {
+                "data-part": "betting-line",
                 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" }) }),
-            yourTurn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute flex items-center justify-center pointer-events-none", style: feltInset, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-white/[0.05] text-[110px] font-black tracking-[0.2em] select-none leading-none", children: "\u2660\u2665\u2666\u2663" }) }),
+            yourTurn && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "div",
               {
                 className: "pointer-events-none absolute z-10 animate-turn-glow rounded-[50%]",
@@ -463,20 +943,33 @@ function CardTable({
                 "aria-hidden": "true"
               }
             ),
-            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 }) => {
+            center !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: center }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute inset-0 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SeatSizeContext.Provider, { value: { width: seatW, height: seatH }, children: layout.seats.map((seat) => {
+              const { index, x, y } = seat;
               const isYou = index === yourSeatIndex;
-              const content = seats ? seats[index] ?? null : renderSeat ? renderSeat(index, isYou) : null;
+              const box2 = { index, isYou, x, y, width: seatW, height: seatH };
+              const content = seats ? seats[index] ?? null : renderSeat ? renderSeat(index, isYou, box2) : 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);
-            }) }),
-            hasBets && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pointer-events-none absolute inset-0 z-20", children: Array.from({ length: count }).map((_, index) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "div",
+                {
+                  "data-part": "seat",
+                  "data-seat": index,
+                  className: "absolute",
+                  style: { left: `${x - seatW / 2}px`, top: `${y - seatH / 2}px` },
+                  children: content
+                },
+                index
+              );
+            }) }) }),
+            hasBets && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pointer-events-none absolute inset-0 z-20", children: layout.seats.map(({ index }) => {
               const content = bets ? bets[index] ?? null : renderBet ? renderBet(index) : null;
               if (content === null || content === void 0) return null;
-              const pt = ellipsePoint(DESIGN_W / 2, DESIGN_H / 2, betRx, betRy, seatAngle(index, count, startAngle));
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              const pt = ellipsePoint(cx, cy, betRx, betRy, seatAngle(index, count, startAngle));
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "div",
                 {
+                  "data-seat-bet": index,
                   className: "absolute",
                   style: { left: `${pt.x}px`, top: `${pt.y}px`, transform: "translate(-50%, -50%)" },
                   children: content
@@ -484,12 +977,12 @@ function CardTable({
                 index
               );
             }) }),
-            confetti && winnerSeats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pointer-events-none absolute inset-0 z-30 overflow-hidden", "aria-hidden": "true", children: Array.from({ length: 44 }).map((_, i) => {
+            confetti && winnerSeats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pointer-events-none absolute inset-0 z-30 overflow-hidden", "aria-hidden": "true", children: Array.from({ length: 44 }).map((_, i) => {
               const w = 5 + i % 4 * 2;
               const h = 9 + i % 3 * 4;
               const dur = 1.7 + i % 5 * 0.28;
               const delay = i % 12 * 0.14;
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "span",
                 {
                   className: "absolute top-[26%] animate-confetti rounded-[2px]",
@@ -497,7 +990,7 @@ function CardTable({
                     left: `${i * 37 % 96}%`,
                     width: w,
                     height: h,
-                    backgroundColor: CONFETTI_COLORS[i % CONFETTI_COLORS.length],
+                    backgroundColor: confettiColors[i % confettiColors.length],
                     animationDuration: `${dur}s`,
                     animationDelay: `${delay}s`,
                     animationIterationCount: "infinite"
@@ -506,7 +999,7 @@ function CardTable({
                 i
               );
             }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute rounded-[50%] border border-white/10 pointer-events-none", style: rimInset, "aria-hidden": "true" })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute rounded-[50%] border border-white/10 pointer-events-none", style: rimInset, "aria-hidden": "true" })
           ]
         }
       ) })
@@ -516,21 +1009,61 @@ function CardTable({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BB,
+  COUNT_UP_MS,
   CardBack,
   CardTable,
+  Chip,
+  ChipStack,
   CommunityCards,
+  DEAL_STAGGER_MS,
+  DEFAULT_BET_SCALE,
+  DEFAULT_DENOMINATIONS,
+  DEFAULT_FELT_GAP,
+  DEFAULT_MARGIN_X,
+  DEFAULT_MARGIN_Y,
+  DEFAULT_SEAT_GAP,
+  DEFAULT_SEAT_H,
+  DEFAULT_SEAT_W,
+  DESIGN_H,
+  DESIGN_W,
+  FLIP_STAGGER_MS,
+  GLOW_GAP,
   HoleCards,
   PlayingCard,
   PokerTable,
   Pot,
+  RIM_GAP,
+  SEAT_SHRINK_FLOOR,
+  SIZES,
   Seat,
+  chipBreakdown,
+  chipCount,
+  chipSpotColor,
+  chipsTotal,
   cn,
+  contrastRatio,
+  describeCard,
+  ellipseBox,
   ellipsePoint,
+  fitSeatScale,
+  flatten,
   formatBB,
+  getRankName,
+  getSuitName,
   getSuitSymbol,
+  isKnownSuit,
+  isRedSuit,
+  layoutSeats,
+  minSeatSeparation,
+  mostVisible,
   nextSeatIndex,
   parseCard,
+  parseColor,
+  relativeLuminance,
   ringPoints,
-  seatAngle
+  seatAngle,
+  seatPoint,
+  seatRingRadii,
+  tableRadii
 });
 //# sourceMappingURL=index.cjs.map