@stargazeryan/poker-ui 0.2.0 → 0.4.0

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { ReactNode } 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. */
@@ -39,7 +40,8 @@ interface PlayingCardProps {
 }
 /**
  * A single playing card. Size is driven by the `size` prop (never viewport
- * breakpoints) so cards scale predictably inside any container.
+ * breakpoints) so cards scale predictably inside any container. Small sizes
+ * (xs / sm) keep only the upright corner index.
  */
 declare function PlayingCard({ card, size, className }: PlayingCardProps): react.JSX.Element;
 interface CardBackProps {
@@ -52,46 +54,71 @@ interface HoleCardsProps {
     cards: (string | null)[];
     size?: CardSize;
     className?: string;
+    /** Animate the cards dealing in, one after another. Default true. */
+    deal?: boolean;
 }
-/** A row of a player's two hole cards. */
-declare function HoleCards({ cards, size, className }: HoleCardsProps): react.JSX.Element;
+/** A row of a player's hole cards. */
+declare function HoleCards({ cards, size, className, deal }: HoleCardsProps): react.JSX.Element;
 interface CommunityCardsProps {
     cards: (string | null)[];
     size?: CardSize;
     className?: string;
+    /** Animate each card with a 3D flip. Default true. */
+    animated?: boolean;
+    /** Reserve a fixed number of slots so the row width never changes. */
+    slots?: number;
 }
-/** The five community cards, each dealt with a staggered flip animation. */
-declare function CommunityCards({ cards, size, className }: CommunityCardsProps): react.JSX.Element;
+/** A row of community cards, each flipping in with a staggered delay. */
+declare function CommunityCards({ cards, size, className, animated, slots }: CommunityCardsProps): react.JSX.Element;
 
 interface SeatProps {
-    /** Turn/active highlight (generic). */
+    /** Turn/active highlight (generic). Animated by default. */
     isActive?: boolean;
-    /** Winner highlight (generic). */
+    /** Winner highlight (generic). Animated by default. */
     isWinner?: boolean;
     /** Dimmed, e.g. folded or out (generic). */
     isDimmed?: boolean;
+    /** Enable the turn/winner glow animations. Default true. */
+    animated?: boolean;
+    /** Render a default 👑 in the top-left corner when `isWinner`. Default false. */
+    winnerCrown?: boolean;
     /** Optional click handler (e.g. "sit here"). */
     onClick?: () => void;
-    /** Slot: top row — name / badges. */
+    /** Slot: top row inside the frame — 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. */
+    /** Slot: bottom row inside the frame — stack / status. */
     footer?: ReactNode;
-    /** Slot: overlay — e.g. an "All-in" label. */
+    /** 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 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`.
+ * 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({ isActive, isWinner, isDimmed, onClick, header, badge, children, footer, overlay, width, height, className, }: SeatProps): react.JSX.Element;
+declare function Seat({ isActive, isWinner, isDimmed, animated, winnerCrown, onClick, header, children, footer, badge, overlay, above, below, topLeft, topRight, topCenter, width, height, className, frameClassName, frameStyle, }: SeatProps): react.JSX.Element;
 
 interface PotProps {
     amount: number;
@@ -99,10 +126,12 @@ interface PotProps {
     label?: string;
     /** Formatter for the amount; defaults to Big-Blind formatting. */
     format?: (amount: number) => string;
+    /** Animate the amount counting up when it changes. Default true. */
+    animate?: boolean;
     className?: string;
 }
 /** A small, standalone pot pill. Optional — the table does not require it. */
-declare function Pot({ amount, label, format, className }: PotProps): react.JSX.Element;
+declare function Pot({ amount, label, format, animate, className }: PotProps): react.JSX.Element;
 
 interface CardTableProps {
     /** Number of seats (2–10). Default 6. */
@@ -115,6 +144,14 @@ interface CardTableProps {
     yourSeatIndex?: number | null;
     /** Optional content in the middle of the table (cards, pot, anything). */
     center?: ReactNode;
+    /** Ambient spotlight + felt shimmer. Default true. */
+    ambient?: boolean;
+    /** Highlight the table edge (e.g. when it is your turn). Default false. */
+    yourTurn?: boolean;
+    /** Winning seat indices; when non-empty, confetti falls. */
+    winnerSeats?: number[];
+    /** Show confetti for winners. Default true. */
+    confetti?: boolean;
     /** Seat frame size used for layout. */
     seatWidth?: number;
     seatHeight?: number;
@@ -125,6 +162,6 @@ interface CardTableProps {
  * onto its container and arranges `seatCount` seats around the felt. Purely
  * presentational: supply seat content and an optional `center` slot.
  */
-declare function CardTable({ seatCount, seats, renderSeat, yourSeatIndex, center, seatWidth, seatHeight, className, }: CardTableProps): react.JSX.Element;
+declare function CardTable({ seatCount, seats, renderSeat, yourSeatIndex, center, ambient, yourTurn, winnerSeats, confetti, seatWidth, seatHeight, className, }: CardTableProps): react.JSX.Element;
 
 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,6 +1,7 @@
 import * as react from 'react';
-import { ReactNode } 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. */
@@ -39,7 +40,8 @@ interface PlayingCardProps {
 }
 /**
  * A single playing card. Size is driven by the `size` prop (never viewport
- * breakpoints) so cards scale predictably inside any container.
+ * breakpoints) so cards scale predictably inside any container. Small sizes
+ * (xs / sm) keep only the upright corner index.
  */
 declare function PlayingCard({ card, size, className }: PlayingCardProps): react.JSX.Element;
 interface CardBackProps {
@@ -52,46 +54,71 @@ interface HoleCardsProps {
     cards: (string | null)[];
     size?: CardSize;
     className?: string;
+    /** Animate the cards dealing in, one after another. Default true. */
+    deal?: boolean;
 }
-/** A row of a player's two hole cards. */
-declare function HoleCards({ cards, size, className }: HoleCardsProps): react.JSX.Element;
+/** A row of a player's hole cards. */
+declare function HoleCards({ cards, size, className, deal }: HoleCardsProps): react.JSX.Element;
 interface CommunityCardsProps {
     cards: (string | null)[];
     size?: CardSize;
     className?: string;
+    /** Animate each card with a 3D flip. Default true. */
+    animated?: boolean;
+    /** Reserve a fixed number of slots so the row width never changes. */
+    slots?: number;
 }
-/** The five community cards, each dealt with a staggered flip animation. */
-declare function CommunityCards({ cards, size, className }: CommunityCardsProps): react.JSX.Element;
+/** A row of community cards, each flipping in with a staggered delay. */
+declare function CommunityCards({ cards, size, className, animated, slots }: CommunityCardsProps): react.JSX.Element;
 
 interface SeatProps {
-    /** Turn/active highlight (generic). */
+    /** Turn/active highlight (generic). Animated by default. */
     isActive?: boolean;
-    /** Winner highlight (generic). */
+    /** Winner highlight (generic). Animated by default. */
     isWinner?: boolean;
     /** Dimmed, e.g. folded or out (generic). */
     isDimmed?: boolean;
+    /** Enable the turn/winner glow animations. Default true. */
+    animated?: boolean;
+    /** Render a default 👑 in the top-left corner when `isWinner`. Default false. */
+    winnerCrown?: boolean;
     /** Optional click handler (e.g. "sit here"). */
     onClick?: () => void;
-    /** Slot: top row — name / badges. */
+    /** Slot: top row inside the frame — 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. */
+    /** Slot: bottom row inside the frame — stack / status. */
     footer?: ReactNode;
-    /** Slot: overlay — e.g. an "All-in" label. */
+    /** 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 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`.
+ * 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({ isActive, isWinner, isDimmed, onClick, header, badge, children, footer, overlay, width, height, className, }: SeatProps): react.JSX.Element;
+declare function Seat({ isActive, isWinner, isDimmed, animated, winnerCrown, onClick, header, children, footer, badge, overlay, above, below, topLeft, topRight, topCenter, width, height, className, frameClassName, frameStyle, }: SeatProps): react.JSX.Element;
 
 interface PotProps {
     amount: number;
@@ -99,10 +126,12 @@ interface PotProps {
     label?: string;
     /** Formatter for the amount; defaults to Big-Blind formatting. */
     format?: (amount: number) => string;
+    /** Animate the amount counting up when it changes. Default true. */
+    animate?: boolean;
     className?: string;
 }
 /** A small, standalone pot pill. Optional — the table does not require it. */
-declare function Pot({ amount, label, format, className }: PotProps): react.JSX.Element;
+declare function Pot({ amount, label, format, animate, className }: PotProps): react.JSX.Element;
 
 interface CardTableProps {
     /** Number of seats (2–10). Default 6. */
@@ -115,6 +144,14 @@ interface CardTableProps {
     yourSeatIndex?: number | null;
     /** Optional content in the middle of the table (cards, pot, anything). */
     center?: ReactNode;
+    /** Ambient spotlight + felt shimmer. Default true. */
+    ambient?: boolean;
+    /** Highlight the table edge (e.g. when it is your turn). Default false. */
+    yourTurn?: boolean;
+    /** Winning seat indices; when non-empty, confetti falls. */
+    winnerSeats?: number[];
+    /** Show confetti for winners. Default true. */
+    confetti?: boolean;
     /** Seat frame size used for layout. */
     seatWidth?: number;
     seatHeight?: number;
@@ -125,6 +162,6 @@ interface CardTableProps {
  * onto its container and arranges `seatCount` seats around the felt. Purely
  * presentational: supply seat content and an optional `center` slot.
  */
-declare function CardTable({ seatCount, seats, renderSeat, yourSeatIndex, center, seatWidth, seatHeight, className, }: CardTableProps): react.JSX.Element;
+declare function CardTable({ seatCount, seats, renderSeat, yourSeatIndex, center, ambient, yourTurn, winnerSeats, confetti, seatWidth, seatHeight, className, }: CardTableProps): react.JSX.Element;
 
 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
@@ -93,7 +94,7 @@ function PlayingCard({ card, size = "md", className }) {
   const { rank, suit } = parseCard(card);
   const suitSymbol = getSuitSymbol(suit);
   const suitClass = getSuitClass(suit);
-  const showCenter = size === "md" || size === "lg";
+  const large = size === "md" || size === "lg";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -110,11 +111,11 @@ function PlayingCard({ card, size = "md", className }) {
           /* @__PURE__ */ jsx("span", { className: cn(CORNER_RANK[size], "font-bold tracking-tight"), children: rank }),
           /* @__PURE__ */ jsx("span", { className: cn(CORNER_SUIT[size], "-mt-[1px]"), children: suitSymbol })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("absolute bottom-[3px] right-[5px] flex flex-col items-center leading-none rotate-180", suitClass), children: [
+        large && /* @__PURE__ */ jsxs("div", { className: cn("absolute bottom-[3px] right-[5px] flex flex-col items-center leading-none rotate-180", suitClass), children: [
           /* @__PURE__ */ jsx("span", { className: cn(CORNER_RANK[size], "font-bold tracking-tight"), children: rank }),
           /* @__PURE__ */ jsx("span", { className: cn(CORNER_SUIT[size], "-mt-[1px]"), children: suitSymbol })
         ] }),
-        showCenter && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 flex items-center justify-center opacity-90", suitClass), children: /* @__PURE__ */ jsx("span", { className: CENTER_SUIT[size], children: suitSymbol }) })
+        large && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 flex items-center justify-center opacity-90", suitClass), children: /* @__PURE__ */ jsx("span", { className: CENTER_SUIT[size], children: suitSymbol }) })
       ]
     }
   );
@@ -147,11 +148,20 @@ function CardBack({ size = "md", className }) {
     }
   );
 }
-function HoleCards({ cards, size = "lg", className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", className), children: cards.map((card, i) => /* @__PURE__ */ jsx(PlayingCard, { card, size }, i)) });
+function HoleCards({ cards, size = "lg", className, deal = true }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", className), children: cards.map((card, i) => /* @__PURE__ */ jsx("div", { className: cn(deal && "animate-deal-in"), style: deal ? { animationDelay: `${i * 100}ms` } : void 0, children: /* @__PURE__ */ jsx(PlayingCard, { card, size }) }, i)) });
 }
-function CommunityCards({ cards, size = "md", className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-1.5", className), children: cards.map((card, i) => /* @__PURE__ */ jsx("div", { className: "animate-card-deal", style: { animationDelay: `${i * 90}ms` }, children: /* @__PURE__ */ jsx(PlayingCard, { card, size }) }, i)) });
+function CommunityCards({ cards, size = "md", className, animated = true, slots }) {
+  const count = slots ?? cards.length;
+  const list = Array.from({ length: count }, (_, i) => cards[i] ?? null);
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-1.5", animated && "[perspective:800px]", className), children: list.map((card, i) => /* @__PURE__ */ jsx("div", { className: SIZE_CLASSES[size], style: { aspectRatio: "10/14" }, children: card ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("h-full w-full", animated && "animate-card-flip"),
+      style: animated ? { animationDelay: `${i * 70}ms` } : void 0,
+      children: /* @__PURE__ */ jsx(PlayingCard, { card, size })
+    }
+  ) : null }, i)) });
 }
 
 // src/components/Seat.tsx
@@ -160,17 +170,33 @@ function Seat({
   isActive = false,
   isWinner = false,
   isDimmed = false,
+  animated = true,
+  winnerCrown = false,
   onClick,
   header,
-  badge,
   children,
   footer,
+  badge,
   overlay,
+  above,
+  below,
+  topLeft,
+  topRight,
+  topCenter,
   width = 160,
   height = 176,
-  className
+  className,
+  frameClassName,
+  frameStyle
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: cn("relative", className), style: { width, height }, children: [
+  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__ */ jsx2("span", { className: "text-3xl drop-shadow-[0_2px_4px_rgba(0,0,0,0.6)] animate-bounce", children: "\u{1F451}" }) : void 0;
+  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 }),
+    effTopLeft !== void 0 && /* @__PURE__ */ jsx2("div", { className: "absolute -top-3 -left-2 z-40", children: effTopLeft }),
+    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",
       {
@@ -180,37 +206,64 @@ function Seat({
         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 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)]",
+          "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-cyan-400"
+          onClick && "cursor-pointer hover:border-neutral-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400",
+          frameClassName
         ),
         children: [
-          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 })
+          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-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 })
+    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/Pot.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function Pot({ amount, label, format = formatBB, className }) {
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function CountUp({ value, format }) {
+  const [shown, setShown] = useState(value);
+  const fromRef = useRef(value);
+  useEffect(() => {
+    const from = fromRef.current;
+    const to = value;
+    if (from === to) return;
+    let raf = 0;
+    const start = performance.now();
+    const dur = 500;
+    const tick = (now) => {
+      const t = Math.min(1, (now - start) / dur);
+      const eased = 1 - Math.pow(1 - t, 3);
+      setShown(Math.round(from + (to - from) * eased));
+      if (t < 1) raf = requestAnimationFrame(tick);
+      else fromRef.current = to;
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [value]);
+  return /* @__PURE__ */ jsx3(Fragment, { children: format(shown) });
+}
+function Pot({ amount, label, format = formatBB, animate = true, 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) })
+    /* @__PURE__ */ jsx3("span", { className: "whitespace-nowrap rounded-full border border-amber-400/50 bg-neutral-900/80 px-3 py-1 shadow-inner", children: animate ? /* @__PURE__ */ jsx3(CountUp, { value: amount, format }) : format(amount) })
   ] });
 }
 
 // src/components/CardTable.tsx
-import { useRef, useLayoutEffect, useState, useMemo } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useRef as useRef2, useLayoutEffect, useState as useState2, useMemo } from "react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var DESIGN_W = 1200;
 var DESIGN_H = 900;
 var MARGIN_X = 164;
@@ -221,6 +274,7 @@ 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 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) };
@@ -251,13 +305,17 @@ function CardTable({
   renderSeat,
   yourSeatIndex = null,
   center,
+  ambient = true,
+  yourTurn = false,
+  winnerSeats = [],
+  confetti = true,
   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 outerRef = useRef2(null);
+  const [scale, setScale] = useState2(1);
   const layouts = useMemo(
     () => calculateSeatLayouts(count, yourSeatIndex, seatWidth, seatHeight),
     [count, yourSeatIndex, seatWidth, seatHeight]
@@ -279,6 +337,7 @@ function CardTable({
   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`
   };
@@ -316,6 +375,17 @@ function CardTable({
                 "aria-hidden": "true"
               }
             ),
+            ambient && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+              /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  className: "absolute animate-spotlight rounded-[50%] bg-[radial-gradient(closest-side,rgba(255,214,120,0.14),transparent_70%)] blur-2xl",
+                  style: feltInset,
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx4("div", { className: "absolute overflow-hidden rounded-[50%]", style: feltInset, "aria-hidden": "true", children: /* @__PURE__ */ jsx4("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__ */ jsx4(
               "div",
               {
@@ -325,12 +395,34 @@ function CardTable({
               }
             ),
             /* @__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" }) }),
+            yourTurn && /* @__PURE__ */ jsx4(
+              "div",
+              {
+                className: "pointer-events-none absolute z-10 animate-turn-glow rounded-[50%]",
+                style: ringInset,
+                "aria-hidden": "true"
+              }
+            ),
             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);
             }) }),
+            confetti && winnerSeats.length > 0 && /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-0 z-30 overflow-hidden", "aria-hidden": "true", children: Array.from({ length: 16 }).map((_, i) => /* @__PURE__ */ jsx4(
+              "span",
+              {
+                className: "absolute top-[34%] animate-confetti rounded-[2px]",
+                style: {
+                  left: `${6 + i * 5.6}%`,
+                  width: 6,
+                  height: 11,
+                  backgroundColor: CONFETTI_COLORS[i % CONFETTI_COLORS.length],
+                  animationDelay: `${i % 8 * 90}ms`
+                }
+              },
+              i
+            )) }),
             /* @__PURE__ */ jsx4("div", { className: "absolute rounded-[50%] border border-white/10 pointer-events-none", style: rimInset, "aria-hidden": "true" })
           ]
         }