@ankhorage/zora 21.0.22 → 21.1.0

package/web-dist/chunks/Accordion-rt13cqr7.js

@@ -0,0 +1,830 @@
+'use client';
+import {
+  require_cjs,
+  parseHexColor,
+  getReadableForeground
+} from "./Accordion-cjht9dyv.js";
+import {
+  withZoraThemeScope
+} from "./Accordion-4fkjn6r5.js";
+import {
+  useZoraTheme2
+} from "./Accordion-sv87mbqa.js";
+import {
+  __toESM
+} from "./Accordion-9qvmwkxe.js";
+
+// src/features/tabletop/adapters/inbound/CardBack.tsx
+var import_react_native = __toESM(require_cjs(), 1);
+import React from "react";
+
+// src/features/tabletop/utils/createTabletopColorScheme.ts
+var MINIMUM_READABLE_CONTRAST = 4.5;
+function createTabletopColorScheme(theme, overrides = {}) {
+  const cardSurface = overrides.cardSurface ?? theme.semantics.neutral.surface;
+  const seatSurface = overrides.seatSurface ?? theme.semantics.neutral.surface;
+  const tableFelt = overrides.tableFelt ?? theme.semantics.action.primary.softBg;
+  const tokenSurface = overrides.tokenSurface ?? theme.semantics.warning.softBg;
+  const cardText = overrides.cardText ?? resolveReadableTextColor(cardSurface, theme.semantics.content.default, theme.semantics.content.muted);
+  const seatText = overrides.seatText ?? resolveReadableTextColor(seatSurface, theme.semantics.content.default, theme.semantics.content.muted);
+  const tableText = overrides.tableText ?? resolveReadableTextColor(tableFelt, theme.semantics.content.default, theme.semantics.content.muted);
+  const tokenText = overrides.tokenText ?? resolveReadableTextColor(tokenSurface, theme.semantics.content.default, theme.semantics.content.muted);
+  return {
+    cardBack: overrides.cardBack ?? theme.semantics.warning.base,
+    cardBackBorder: overrides.cardBackBorder ?? theme.semantics.neutral.border,
+    cardBorder: overrides.cardBorder ?? theme.semantics.neutral.border,
+    cardSurface,
+    cardText,
+    mutedText: overrides.mutedText ?? resolveReadableTextColor(cardSurface, theme.semantics.content.muted, cardText),
+    redSuitText: overrides.redSuitText ?? resolveReadableTextColor(cardSurface, theme.semantics.warning.base, cardText),
+    seatBorder: overrides.seatBorder ?? theme.semantics.neutral.divider,
+    seatMutedText: overrides.seatMutedText ?? resolveReadableTextColor(seatSurface, theme.semantics.content.muted, seatText),
+    seatSelectedBorder: overrides.seatSelectedBorder ?? theme.semantics.action.primary.base,
+    seatSurface,
+    seatText,
+    tableBorder: overrides.tableBorder ?? theme.semantics.warning.base,
+    tableFelt,
+    tableInnerBorder: overrides.tableInnerBorder ?? theme.semantics.neutral.divider,
+    tableMutedText: overrides.tableMutedText ?? resolveReadableTextColor(tableFelt, theme.semantics.content.muted, tableText),
+    tableText,
+    tokenSurface,
+    tokenText
+  };
+}
+function resolveReadableTextColor(background, preferred, fallback) {
+  const preferredContrast = getContrastRatio(background, preferred);
+  if (preferredContrast !== null && preferredContrast >= MINIMUM_READABLE_CONTRAST) {
+    return preferred;
+  }
+  const parsedBackground = parseHexColor2(background);
+  const normalizedBackground = parsedBackground === null ? null : parseHexColor(toHexColor(parsedBackground));
+  const strongestForeground = normalizedBackground === null ? undefined : getReadableForeground(normalizedBackground).foreground;
+  const candidates = uniqueColors([
+    preferred,
+    fallback,
+    ...strongestForeground === undefined ? [] : [strongestForeground]
+  ]);
+  const [readableCandidate] = candidates.map((candidate) => ({ candidate, contrast: getContrastRatio(background, candidate) })).filter((entry) => entry.contrast !== null).sort((left, right) => right.contrast - left.contrast);
+  return readableCandidate?.candidate ?? preferred;
+}
+function toHexColor(color) {
+  return `#${[color.red, color.green, color.blue].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+}
+function uniqueColors(colors) {
+  return [...new Set(colors)];
+}
+function getContrastRatio(background, foreground) {
+  const backgroundColor = parseHexColor2(background);
+  const foregroundColor = parseHexColor2(foreground);
+  if (backgroundColor === null || foregroundColor === null)
+    return null;
+  const backgroundLuminance = getRelativeLuminance(backgroundColor);
+  const foregroundLuminance = getRelativeLuminance(foregroundColor);
+  const lighter = Math.max(backgroundLuminance, foregroundLuminance);
+  const darker = Math.min(backgroundLuminance, foregroundLuminance);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function parseHexColor2(color) {
+  const value = color.trim();
+  const hex = value.startsWith("#") ? value.slice(1) : "";
+  if (!isSupportedHexLength(hex) || !isHexColorValue(hex))
+    return null;
+  if (hex.length === 3) {
+    const red = hex.slice(0, 1);
+    const green = hex.slice(1, 2);
+    const blue = hex.slice(2, 3);
+    return {
+      red: parseInt(red + red, 16),
+      green: parseInt(green + green, 16),
+      blue: parseInt(blue + blue, 16)
+    };
+  }
+  return {
+    red: parseInt(hex.slice(0, 2), 16),
+    green: parseInt(hex.slice(2, 4), 16),
+    blue: parseInt(hex.slice(4, 6), 16)
+  };
+}
+function isSupportedHexLength(hex) {
+  return hex.length === 3 || hex.length === 6 || hex.length === 8;
+}
+function isHexColorValue(hex) {
+  return [...hex].every((character) => isHexCharacter(character));
+}
+function isHexCharacter(character) {
+  const code = character.charCodeAt(0);
+  const isDigit = code >= 48 && code <= 57;
+  const isUpperHex = code >= 65 && code <= 70;
+  const isLowerHex = code >= 97 && code <= 102;
+  return isDigit || isUpperHex || isLowerHex;
+}
+function getRelativeLuminance(color) {
+  const red = normalizeColorChannel(color.red);
+  const green = normalizeColorChannel(color.green);
+  const blue = normalizeColorChannel(color.blue);
+  return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+}
+function normalizeColorChannel(value) {
+  const normalized = value / 255;
+  if (normalized <= 0.03928)
+    return normalized / 12.92;
+  return ((normalized + 0.055) / 1.055) ** 2.4;
+}
+
+// src/features/tabletop/utils/getTabletopCardDimensions.ts
+var cardDimensions = {
+  large: {
+    width: 56,
+    height: 80,
+    radius: 8,
+    rankFontSize: 20,
+    suitFontSize: 16
+  },
+  medium: {
+    width: 40,
+    height: 56,
+    radius: 6,
+    rankFontSize: 15,
+    suitFontSize: 12
+  },
+  small: {
+    width: 28,
+    height: 40,
+    radius: 5,
+    rankFontSize: 11,
+    suitFontSize: 9
+  }
+};
+function getTabletopCardDimensions(size) {
+  switch (size) {
+    case "small":
+      return cardDimensions.small;
+    case "large":
+      return cardDimensions.large;
+    case "medium":
+      return cardDimensions.medium;
+  }
+}
+
+// src/features/tabletop/adapters/inbound/CardBack.tsx
+import { jsx } from "react/jsx-runtime";
+var CardBack2 = withZoraThemeScope(CardBackInner);
+function CardBackInner({
+  size = "medium",
+  muted = false,
+  accessibilityLabel,
+  colorScheme,
+  testID
+}) {
+  const { theme } = useZoraTheme2();
+  const colors = React.useMemo(() => createTabletopColorScheme(theme, colorScheme), [colorScheme, theme]);
+  const dimensions = getTabletopCardDimensions(size);
+  return /* @__PURE__ */ jsx(import_react_native.View, {
+    accessibilityLabel: accessibilityLabel ?? "Hidden card",
+    accessibilityRole: "image",
+    style: [
+      styles.card,
+      {
+        backgroundColor: colors.cardBack,
+        borderColor: colors.cardBackBorder,
+        borderRadius: dimensions.radius,
+        height: dimensions.height,
+        opacity: muted ? 0.48 : 1,
+        width: dimensions.width
+      }
+    ],
+    testID,
+    children: /* @__PURE__ */ jsx(import_react_native.View, {
+      style: [
+        styles.inner,
+        {
+          borderColor: colors.cardBackBorder,
+          borderRadius: Math.max(2, dimensions.radius - 3)
+        }
+      ]
+    })
+  });
+}
+var styles = import_react_native.StyleSheet.create({
+  card: {
+    alignItems: "center",
+    borderWidth: 1,
+    justifyContent: "center"
+  },
+  inner: {
+    borderWidth: 1,
+    height: "68%",
+    opacity: 0.48,
+    width: "68%"
+  }
+});
+
+// src/features/tabletop/adapters/inbound/PlayingCard.tsx
+var import_react_native2 = __toESM(require_cjs(), 1);
+import React2 from "react";
+
+// src/features/tabletop/utils/getPlayingCardLabel.ts
+var rankLabels = { A: "ace", J: "jack", K: "king", Q: "queen" };
+function getPlayingCardLabel(card) {
+  return `${rankLabels[card.rank] ?? card.rank} of ${card.suit}`;
+}
+
+// src/features/tabletop/adapters/inbound/PlayingCard.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var suitMarks = { clubs: "♣", diamonds: "♦", hearts: "♥", spades: "♠" };
+var PlayingCard2 = withZoraThemeScope(PlayingCardInner);
+function PlayingCardInner({
+  card,
+  size = "medium",
+  selected = false,
+  muted = false,
+  accessibilityLabel,
+  colorScheme,
+  testID
+}) {
+  const { theme } = useZoraTheme2();
+  const colors = React2.useMemo(() => createTabletopColorScheme(theme, colorScheme), [colorScheme, theme]);
+  const dimensions = getTabletopCardDimensions(size);
+  const suitColor = card.suit === "hearts" || card.suit === "diamonds" ? colors.redSuitText : colors.cardText;
+  return /* @__PURE__ */ jsxs(import_react_native2.View, {
+    accessibilityLabel: accessibilityLabel ?? getPlayingCardLabel(card),
+    accessibilityRole: "image",
+    style: [
+      styles2.card,
+      {
+        backgroundColor: colors.cardSurface,
+        borderColor: selected ? colors.seatSelectedBorder : colors.cardBorder,
+        borderRadius: dimensions.radius,
+        height: dimensions.height,
+        opacity: muted ? 0.48 : 1,
+        width: dimensions.width
+      }
+    ],
+    testID,
+    children: [
+      /* @__PURE__ */ jsx2(import_react_native2.Text, {
+        selectable: false,
+        style: [
+          styles2.rank,
+          {
+            color: suitColor,
+            fontSize: dimensions.rankFontSize,
+            lineHeight: dimensions.rankFontSize + 4
+          }
+        ],
+        children: card.rank
+      }),
+      /* @__PURE__ */ jsx2(import_react_native2.Text, {
+        selectable: false,
+        style: [
+          styles2.suit,
+          {
+            color: suitColor,
+            fontSize: dimensions.suitFontSize,
+            lineHeight: dimensions.suitFontSize + 3
+          }
+        ],
+        children: suitMarks[card.suit]
+      })
+    ]
+  });
+}
+var styles2 = import_react_native2.StyleSheet.create({
+  card: {
+    alignItems: "center",
+    borderWidth: 1,
+    justifyContent: "center"
+  },
+  rank: {
+    fontWeight: "800"
+  },
+  suit: {
+    fontWeight: "700",
+    marginTop: -2
+  }
+});
+
+// src/features/tabletop/adapters/inbound/CardHand.tsx
+var import_react_native3 = __toESM(require_cjs(), 1);
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var CardHand2 = withZoraThemeScope(CardHandInner);
+function createFaceDownCards(count) {
+  return Array.from({ length: Math.max(0, count) }, (_, index) => index);
+}
+function CardHandInner({
+  cards = [],
+  faceDownCards = 0,
+  size = "medium",
+  muted = false,
+  colorScheme,
+  accessibilityLabel,
+  testID
+}) {
+  const hiddenCards = createFaceDownCards(faceDownCards);
+  return /* @__PURE__ */ jsxs2(import_react_native3.View, {
+    accessibilityLabel,
+    style: styles3.hand,
+    testID,
+    children: [
+      cards.map((card, index) => /* @__PURE__ */ jsx3(PlayingCard2, {
+        card,
+        colorScheme,
+        muted,
+        size,
+        testID: testID ? `${testID}-card-${index}` : undefined
+      }, `${card.rank}-${card.suit}-${index}`)),
+      hiddenCards.map((index) => /* @__PURE__ */ jsx3(CardBack2, {
+        colorScheme,
+        muted,
+        size,
+        testID: testID ? `${testID}-hidden-${index}` : undefined
+      }, `hidden-${index}`))
+    ]
+  });
+}
+var styles3 = import_react_native3.StyleSheet.create({
+  hand: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 4,
+    justifyContent: "center"
+  }
+});
+
+// src/features/tabletop/adapters/inbound/TabletopTable.tsx
+var import_react_native4 = __toESM(require_cjs(), 1);
+import React3 from "react";
+
+// src/features/tabletop/utils/getTabletopSeatPosition.ts
+var fallbackSeatPosition = { top: "82%", left: "50%" };
+var seatPositions = {
+  2: [fallbackSeatPosition, { top: "18%", left: "50%" }],
+  3: [fallbackSeatPosition, { top: "28%", left: "18%" }, { top: "28%", left: "82%" }],
+  4: [
+    fallbackSeatPosition,
+    { top: "50%", left: "12%" },
+    { top: "18%", left: "50%" },
+    { top: "50%", left: "88%" }
+  ],
+  5: [
+    { top: "84%", left: "50%" },
+    { top: "62%", left: "12%" },
+    { top: "18%", left: "24%" },
+    { top: "18%", left: "76%" },
+    { top: "62%", left: "88%" }
+  ],
+  6: [
+    { top: "84%", left: "50%" },
+    { top: "68%", left: "16%" },
+    { top: "26%", left: "16%" },
+    { top: "16%", left: "50%" },
+    { top: "26%", left: "84%" },
+    { top: "68%", left: "84%" }
+  ],
+  7: [
+    { top: "86%", left: "50%" },
+    { top: "70%", left: "14%" },
+    { top: "34%", left: "10%" },
+    { top: "14%", left: "34%" },
+    { top: "14%", left: "66%" },
+    { top: "34%", left: "90%" },
+    { top: "70%", left: "86%" }
+  ],
+  8: [
+    { top: "86%", left: "50%" },
+    { top: "72%", left: "16%" },
+    { top: "50%", left: "8%" },
+    { top: "20%", left: "20%" },
+    { top: "14%", left: "50%" },
+    { top: "20%", left: "80%" },
+    { top: "50%", left: "92%" },
+    { top: "72%", left: "84%" }
+  ],
+  9: [
+    { top: "88%", left: "50%" },
+    { top: "78%", left: "12%" },
+    { top: "50%", left: "4%" },
+    { top: "18%", left: "10%" },
+    { top: "8%", left: "28%" },
+    { top: "8%", left: "50%" },
+    { top: "8%", left: "72%" },
+    { top: "18%", left: "90%" },
+    { top: "50%", left: "96%" }
+  ],
+  10: [
+    { top: "88%", left: "50%" },
+    { top: "80%", left: "20%" },
+    { top: "58%", left: "6%" },
+    { top: "30%", left: "8%" },
+    { top: "10%", left: "30%" },
+    { top: "8%", left: "50%" },
+    { top: "10%", left: "70%" },
+    { top: "30%", left: "92%" },
+    { top: "58%", left: "94%" },
+    { top: "80%", left: "80%" }
+  ]
+};
+function normalizeTabletopSeatCount(count) {
+  const rounded = Math.round(count);
+  if (rounded <= 2)
+    return 2;
+  if (rounded >= 10)
+    return 10;
+  return rounded;
+}
+function getTabletopSeatPositions(count) {
+  return seatPositions[normalizeTabletopSeatCount(count)];
+}
+function getTabletopSeatPosition(index, count) {
+  const positions = getTabletopSeatPositions(count);
+  const position = positions[index % positions.length];
+  return position ?? fallbackSeatPosition;
+}
+
+// src/features/tabletop/adapters/inbound/TabletopTable.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var TabletopTable2 = withZoraThemeScope(TabletopTableInner);
+function createSeatAccessibilityLabel(seat) {
+  if (seat.accessibilityLabel !== undefined)
+    return seat.accessibilityLabel;
+  if (typeof seat.label !== "string")
+    return;
+  const parts = [seat.label];
+  if (typeof seat.sublabel === "string")
+    parts.push(seat.sublabel);
+  if (typeof seat.tokenLabel === "string")
+    parts.push(seat.tokenLabel);
+  if (seat.selected)
+    parts.push("selected");
+  if (seat.muted)
+    parts.push("muted");
+  return parts.join(", ");
+}
+function TabletopTableInner({
+  seats,
+  centerCards = [],
+  centerLabel,
+  centerSublabel,
+  shape = "oval",
+  seatCount,
+  cardSize = "small",
+  disabled = false,
+  colorScheme,
+  accessibilityLabel,
+  testID
+}) {
+  const { theme } = useZoraTheme2();
+  const colors = React3.useMemo(() => createTabletopColorScheme(theme, colorScheme), [colorScheme, theme]);
+  const resolvedSeatCount = seatCount ?? seats.length;
+  return /* @__PURE__ */ jsxs3(import_react_native4.View, {
+    accessibilityLabel,
+    style: [
+      styles4.root,
+      { aspectRatio: shape === "circle" ? 1 : 1.6, opacity: disabled ? 0.56 : 1 }
+    ],
+    testID,
+    children: [
+      /* @__PURE__ */ jsxs3(import_react_native4.View, {
+        style: [
+          styles4.surface,
+          shape === "circle" ? styles4.circleSurface : styles4.ovalSurface,
+          shape === "rounded" ? styles4.roundedSurface : null,
+          {
+            backgroundColor: colors.tableFelt,
+            borderColor: colors.tableBorder
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx4(import_react_native4.View, {
+            pointerEvents: "none",
+            style: [
+              styles4.innerSurface,
+              shape === "circle" ? styles4.circleSurface : styles4.ovalSurface,
+              shape === "rounded" ? styles4.roundedSurface : null,
+              { borderColor: colors.tableInnerBorder }
+            ]
+          }),
+          /* @__PURE__ */ jsxs3(import_react_native4.View, {
+            style: styles4.centerContent,
+            children: [
+              centerCards.length > 0 ? /* @__PURE__ */ jsx4(CardHand2, {
+                cards: centerCards,
+                colorScheme,
+                size: cardSize
+              }) : null,
+              centerLabel !== undefined ? /* @__PURE__ */ jsx4(import_react_native4.View, {
+                style: [styles4.centerLabel, { backgroundColor: colors.seatSurface }],
+                children: /* @__PURE__ */ jsx4(import_react_native4.Text, {
+                  style: [styles4.centerLabelText, { color: colors.seatText }],
+                  children: centerLabel
+                })
+              }) : null,
+              centerSublabel !== undefined ? /* @__PURE__ */ jsx4(import_react_native4.Text, {
+                style: [styles4.centerSublabel, { color: colors.tableMutedText }],
+                children: centerSublabel
+              }) : null
+            ]
+          })
+        ]
+      }),
+      seats.map((seat, index) => {
+        const position = getTabletopSeatPosition(index, resolvedSeatCount);
+        const hasCards = seat.cards !== undefined || seat.faceDownCards !== undefined;
+        const seatCardSize = seat.selected && cardSize === "small" ? "medium" : cardSize;
+        return /* @__PURE__ */ jsxs3(import_react_native4.View, {
+          accessibilityLabel: createSeatAccessibilityLabel(seat),
+          accessibilityRole: "summary",
+          style: [
+            styles4.seatSlot,
+            {
+              left: position.left,
+              opacity: seat.muted ? 0.48 : 1,
+              top: position.top
+            }
+          ],
+          testID: testID ? `${testID}-seat-${seat.id}` : undefined,
+          children: [
+            /* @__PURE__ */ jsxs3(import_react_native4.View, {
+              style: [
+                styles4.seatPanel,
+                seat.selected ? styles4.selectedSeatPanel : null,
+                {
+                  borderColor: seat.selected ? colors.seatSelectedBorder : colors.seatBorder,
+                  backgroundColor: colors.seatSurface
+                }
+              ],
+              children: [
+                hasCards ? /* @__PURE__ */ jsx4(CardHand2, {
+                  cards: seat.cards,
+                  colorScheme,
+                  faceDownCards: seat.faceDownCards,
+                  muted: seat.muted ?? seat.disabled,
+                  size: seatCardSize
+                }) : null,
+                /* @__PURE__ */ jsxs3(import_react_native4.View, {
+                  style: styles4.seatTextGroup,
+                  children: [
+                    /* @__PURE__ */ jsx4(import_react_native4.Text, {
+                      style: [styles4.seatLabel, { color: colors.seatText }],
+                      children: seat.label
+                    }),
+                    seat.sublabel !== undefined ? /* @__PURE__ */ jsx4(import_react_native4.Text, {
+                      style: [styles4.seatSublabel, { color: colors.seatMutedText }],
+                      children: seat.sublabel
+                    }) : null
+                  ]
+                })
+              ]
+            }),
+            seat.tokenLabel !== undefined ? /* @__PURE__ */ jsx4(import_react_native4.View, {
+              style: [
+                styles4.token,
+                {
+                  backgroundColor: colors.tokenSurface,
+                  borderColor: seat.selected ? colors.seatSelectedBorder : colors.tableInnerBorder
+                }
+              ],
+              children: /* @__PURE__ */ jsx4(import_react_native4.Text, {
+                style: [styles4.tokenText, { color: colors.tokenText }],
+                children: seat.tokenLabel
+              })
+            }) : null
+          ]
+        }, seat.id);
+      })
+    ]
+  });
+}
+var styles4 = import_react_native4.StyleSheet.create({
+  centerContent: {
+    alignItems: "center",
+    gap: 6,
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: "35%"
+  },
+  centerLabel: {
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 4
+  },
+  centerLabelText: {
+    fontSize: 12,
+    fontWeight: "800"
+  },
+  centerSublabel: {
+    fontSize: 11,
+    fontWeight: "700"
+  },
+  circleSurface: {
+    borderRadius: 999
+  },
+  innerSurface: {
+    borderWidth: 1,
+    bottom: 10,
+    left: 10,
+    opacity: 0.44,
+    position: "absolute",
+    right: 10,
+    top: 10
+  },
+  ovalSurface: {
+    borderRadius: 999
+  },
+  root: {
+    maxWidth: 760,
+    position: "relative",
+    width: "100%"
+  },
+  roundedSurface: {
+    borderRadius: 28
+  },
+  seatLabel: {
+    fontSize: 11,
+    fontWeight: "800"
+  },
+  seatPanel: {
+    alignItems: "center",
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 4,
+    minWidth: 68,
+    paddingHorizontal: 7,
+    paddingVertical: 6
+  },
+  seatSlot: {
+    alignItems: "center",
+    gap: 4,
+    minWidth: 78,
+    position: "absolute",
+    transform: [{ translateX: -39 }, { translateY: -34 }]
+  },
+  seatSublabel: {
+    fontSize: 10,
+    fontWeight: "700"
+  },
+  seatTextGroup: {
+    alignItems: "center",
+    gap: 1
+  },
+  selectedSeatPanel: {
+    borderWidth: 2,
+    paddingHorizontal: 9,
+    paddingVertical: 7
+  },
+  surface: {
+    borderWidth: 8,
+    bottom: 28,
+    left: 24,
+    position: "absolute",
+    right: 24,
+    top: 24
+  },
+  token: {
+    borderRadius: 999,
+    borderWidth: 1,
+    paddingHorizontal: 7,
+    paddingVertical: 2
+  },
+  tokenText: {
+    fontSize: 10,
+    fontWeight: "800"
+  }
+});
+
+// src/features/tabletop/adapters/inbound/PokerTrainingTable.tsx
+import React4 from "react";
+
+// src/features/tabletop/utils/createTabletopGameSeats.ts
+function createTabletopGameSeats({
+  seats,
+  participants,
+  missingParticipantState = { disabled: true, muted: true }
+}) {
+  const participantsBySeat = new Map(participants.map((participant) => [participant.seatId, participant]));
+  return seats.map((seat) => {
+    const participant = participantsBySeat.get(seat.id);
+    return {
+      id: seat.id,
+      ...seat.defaultState,
+      ...participant === undefined ? missingParticipantState : participant.state
+    };
+  });
+}
+
+// src/features/tabletop/utils/createPokerTrainingTableState.ts
+function createPokerTrainingTableState(task, { defaultStackBigBlinds = 100 } = {}) {
+  const tableSize = task.tableSize ?? "9max";
+  const positions = tableSize === "6max" ? sixMaxPokerPositions : nineMaxPokerPositions;
+  const bigBlind = task.blinds?.big;
+  const heroPosition = task.heroPosition ?? task.players?.find((player) => player.isHero)?.position;
+  const orderedPositions = rotatePokerPositions(positions, heroPosition);
+  const defaultStack = `${formatAmount(defaultStackBigBlinds)} BB`;
+  const participants = (task.players ?? []).map((player) => createPokerParticipantState(player, task, bigBlind));
+  const seats = createTabletopGameSeats({
+    seats: orderedPositions.map((position) => ({
+      id: position,
+      defaultState: {
+        label: position,
+        tokenLabel: position === "BTN" ? "D" : undefined
+      }
+    })),
+    participants,
+    missingParticipantState: {
+      disabled: true,
+      muted: true,
+      sublabel: `${defaultStack} · Folded`
+    }
+  });
+  return {
+    seatCount: positions.length,
+    seats,
+    centerCards: task.communityCards ?? [],
+    centerLabel: task.pot === undefined ? undefined : `Pot ${formatAmount(task.pot)}`,
+    centerSublabel: task.blinds === undefined ? undefined : `Blinds ${formatAmount(task.blinds.small)} / ${formatAmount(task.blinds.big)}`,
+    accessibilityLabel: createPokerAccessibilityLabel(tableSize, heroPosition, task)
+  };
+}
+var sixMaxPokerPositions = ["BTN", "SB", "BB", "UTG", "HJ", "CO"];
+var nineMaxPokerPositions = [
+  "BTN",
+  "SB",
+  "BB",
+  "UTG",
+  "UTG+1",
+  "UTG+2",
+  "MP",
+  "HJ",
+  "CO"
+];
+function rotatePokerPositions(positions, heroPosition) {
+  const heroIndex = positions.findIndex((position) => position === heroPosition);
+  if (heroIndex <= 0)
+    return positions;
+  return [...positions.slice(heroIndex), ...positions.slice(0, heroIndex)];
+}
+function createPokerParticipantState(player, task, bigBlind) {
+  const isHero = player.isHero === true || player.position === task.heroPosition;
+  const cards = player.cards ?? (isHero ? task.heroCards : undefined);
+  const folded = player.folded === true;
+  return {
+    seatId: player.position,
+    state: {
+      cards,
+      disabled: folded,
+      faceDownCards: cards === undefined && !folded && !isHero ? 2 : undefined,
+      muted: folded,
+      selected: isHero,
+      sublabel: formatPlayerSublabel(player, bigBlind)
+    }
+  };
+}
+function formatPlayerSublabel(player, bigBlind) {
+  const stack = player.stack === undefined ? undefined : formatChipStack(player.stack, bigBlind);
+  const bet = player.bet === undefined ? undefined : `Bet ${formatChipStack(player.bet, bigBlind)}`;
+  const parts = [stack, bet, player.folded === true ? "Folded" : undefined].filter((part) => part !== undefined);
+  return parts.length === 0 ? undefined : parts.join(" · ");
+}
+function formatChipStack(amount, bigBlind) {
+  if (bigBlind !== undefined && bigBlind > 0) {
+    return `${formatAmount(amount / bigBlind)} BB`;
+  }
+  return `${formatAmount(amount)} chips`;
+}
+function formatAmount(amount) {
+  return new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(amount);
+}
+function createPokerAccessibilityLabel(tableSize, heroPosition, task) {
+  const parts = [`${tableSize === "6max" ? "Six" : "Nine"}-player poker table`];
+  if (heroPosition !== undefined)
+    parts.push(`Hero ${heroPosition}`);
+  if (task.pot !== undefined)
+    parts.push(`Pot ${formatAmount(task.pot)}`);
+  if (task.blinds !== undefined) {
+    parts.push(`Blinds ${formatAmount(task.blinds.small)} / ${formatAmount(task.blinds.big)}`);
+  }
+  return `${parts.join(". ")}.`;
+}
+
+// src/features/tabletop/adapters/inbound/PokerTrainingTable.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var PokerTrainingTable2 = withZoraThemeScope(PokerTrainingTableInner);
+function PokerTrainingTableInner({
+  task = {},
+  defaultStackBigBlinds = 100,
+  accessibilityLabel,
+  ...tableProps
+}) {
+  const state = React4.useMemo(() => createPokerTrainingTableState(task, { defaultStackBigBlinds }), [defaultStackBigBlinds, task]);
+  return /* @__PURE__ */ jsx5(TabletopTable2, {
+    ...tableProps,
+    accessibilityLabel: accessibilityLabel ?? state.accessibilityLabel,
+    centerCards: state.centerCards,
+    centerLabel: state.centerLabel,
+    centerSublabel: state.centerSublabel,
+    seatCount: state.seatCount,
+    seats: state.seats
+  });
+}
+export { CardBack2, PlayingCard2, CardHand2, TabletopTable2, PokerTrainingTable2 };