@ankhorage/zora 21.0.22 → 21.1.0

package/src/features/game/utils/useGameEntityMotionProgress.ts

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Animated, Easing } from 'react-native';
+
+import type { GameEntityEasing } from '../../../types/gamePresentation';
+import type { GameEntityMotionPlan } from './resolveGameEntityMotionPlan';
+
+interface MotionAnimationInput {
+  readonly durationMs: number;
+  readonly delayMs: number;
+  readonly easing: GameEntityEasing;
+  readonly repeat: boolean;
+  readonly alternate: boolean;
+}
+
+/*** Drive one optional relative GameEntity motion timeline without changing game-session state. */
+export function useGameEntityMotionProgress(plan: GameEntityMotionPlan): Animated.Value {
+  const [progress] = React.useState(() => new Animated.Value(0));
+  const signature = createMotionSignature(plan);
+  const previousSignature = React.useRef(signature);
+  const {
+    motionEnabled,
+    motionPaused,
+    motionDurationMs,
+    motionDelayMs,
+    motionEasing,
+    motionRepeat,
+    motionAlternate,
+  } = plan;
+
+  React.useEffect(() => {
+    progress.stopAnimation();
+
+    if (!motionEnabled) {
+      progress.setValue(0);
+      return undefined;
+    }
+
+    if (previousSignature.current !== signature) {
+      progress.setValue(0);
+      previousSignature.current = signature;
+    }
+
+    if (motionPaused) return undefined;
+
+    const animation = createMotionAnimation(progress, {
+      durationMs: motionDurationMs,
+      delayMs: motionDelayMs,
+      easing: motionEasing,
+      repeat: motionRepeat,
+      alternate: motionAlternate,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [
+    motionAlternate,
+    motionDelayMs,
+    motionDurationMs,
+    motionEasing,
+    motionEnabled,
+    motionPaused,
+    motionRepeat,
+    progress,
+    signature,
+  ]);
+
+  return progress;
+}
+
+/*** Create the one-shot or repeating React Native motion sequence for one entity. */
+function createMotionAnimation(progress: Animated.Value, input: MotionAnimationInput) {
+  const forward = () =>
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: input.durationMs,
+      easing: resolveMotionEasing(input.easing),
+      useNativeDriver: false,
+    });
+  const reverse = () =>
+    Animated.timing(progress, {
+      toValue: 0,
+      duration: input.durationMs,
+      easing: resolveMotionEasing(input.easing),
+      useNativeDriver: false,
+    });
+  const movement = input.alternate
+    ? Animated.loop(Animated.sequence([forward(), reverse()]))
+    : input.repeat
+      ? Animated.loop(forward())
+      : forward();
+
+  return input.delayMs === 0
+    ? movement
+    : Animated.sequence([Animated.delay(input.delayMs), movement]);
+}
+
+/*** Create a stable signature for motion parameters that should restart the relative timeline. */
+function createMotionSignature(plan: GameEntityMotionPlan): string {
+  return [
+    plan.motionDurationMs,
+    plan.motionDelayMs,
+    plan.motionEasing,
+    plan.motionEnabled,
+    plan.motionRepeat,
+    plan.motionAlternate,
+  ].join(':');
+}
+
+/*** Map serializable timeline easing names onto React Native easing functions. */
+function resolveMotionEasing(easing: GameEntityEasing) {
+  if (easing === 'ease-in') return Easing.in(Easing.ease);
+  if (easing === 'ease-out') return Easing.out(Easing.ease);
+  if (easing === 'ease-in-out') return Easing.inOut(Easing.ease);
+  return Easing.linear;
+}

package/src/features/game/utils/useGameReducedMotion.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+/*** Track the cross-platform system reduced-motion preference for game presentation. */
+export function useGameReducedMotion(): boolean {
+  const [reduceMotion, setReduceMotion] = React.useState(false);
+
+  React.useEffect(() => {
+    void AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
+    const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);
+    return () => subscription.remove();
+  }, []);
+
+  return reduceMotion;
+}

package/src/features/graph-view/adapters/inbound/web-artifact/GraphView.tsx

@@ -124,13 +124,13 @@ type GraphContainer = NonNullable<CytoscapeOptions['container']>;
 
 /***
  * Render a browser graph while one runtime owns Cytoscape layout, viewport, and disposal.
- * @config zoomMode Use `fit-relative` to make controller zoom, events and min/max limits relative
+ * zoomMode Use `fit-relative` to make controller zoom, events and min/max limits relative
  * to the visible-node fit (1 = fit). The default `absolute` keeps engine-space zoom units.
- * @config sizeNodesToLabels Opt in to renderer-measured plain labels, including bold and Unicode
+ * sizeNodesToLabels Opt in to renderer-measured plain labels, including bold and Unicode
  * text. Keep padding in styleRules. Compound and rich-node dimensions retain their existing owners.
- * @config minReadableLabelSize Expand the manual zoom ceiling until plain labels reach this CSS-pixel size.
- * @config maxFitLabelSize Cap automatic fitting at this plain-label CSS-pixel size, leaving whitespace for tiny graphs.
- * @config onSpacingFactorChange Receive the spacing accepted by explicit fit({ optimizeSpacing: true }).
+ * minReadableLabelSize Expand the manual zoom ceiling until plain labels reach this CSS-pixel size.
+ * maxFitLabelSize Cap automatic fitting at this plain-label CSS-pixel size, leaving whitespace for tiny graphs.
+ * onSpacingFactorChange Receive the spacing accepted by explicit fit({ optimizeSpacing: true }).
  * Ordinary zoom never adjusts spacing or relayouts. Explicit optimization preserves layout ordering
  * and uses bounded collision checks including labels and compound siblings; it can recover uniformly
  * cramped layouts but cannot repair non-uniform overlaps.

package/src/features/graph-view/adapters/inbound/web-artifact/compactGraphSpacing.ts

@@ -10,7 +10,7 @@ const SEARCH_ITERATIONS = 8;
 /***
  * Optimize settled layout spacing around readable label bounds instead of full node clearance.
  * Compound containment stays intentional while sibling groups retain non-overlapping boundaries.
- * @performance Cytoscape geometry is measured once, then bounded pure numeric trials reuse the
+ * Cytoscape geometry is measured once, then bounded pure numeric trials reuse the
  * immutable snapshot. No layout reruns, zoom work, or intermediate frames are painted.
  */
 export function compactGraphSpacing(cy: Core, spacingFactor: number): number {

package/src/features/graph-view/adapters/inbound/web-artifact/createGraphController.ts

@@ -112,7 +112,7 @@ function positiveSize(value: number | undefined, fallback: number): number {
 
 /***
  * Recompute the fit reference only after layout or resize, never on every pan/zoom event.
- * @performance Cache the geometry-derived scale in the viewport owner; labels are included, edges excluded.
+ * Cache the geometry-derived scale in the viewport owner; labels are included, edges excluded.
  */
 function getNodeFitZoom(cy: Core, padding: number): number {
   if (cy.nodes().empty()) return 1;

package/src/features/graph-view/adapters/inbound/web-artifact/createGraphLoopSizer.ts

@@ -2,7 +2,7 @@ import type { Core } from 'cytoscape';
 
 /***
  * Keeps self-loop control points outside the rendered node, independent of label size and direction.
- * @performance Reconcile loop geometry only after size/style/layout changes, never on pan or zoom.
+ * Reconcile loop geometry only after size/style/layout changes, never on pan or zoom.
  * Preserve valid dependencies and configured larger loops; do not hide edges or silence warnings.
  */
 export function createGraphLoopSizer(cy: Core) {

package/src/features/graph-view/adapters/inbound/web-artifact/createGraphRuntime.ts

@@ -150,7 +150,7 @@ function createRuntimeState(
 
 /***
  * Reconcile presentation in place and relayout only when graph geometry or layout policy changes.
- * @performance Batch reconciliation and skip layout for presentation-only updates.
+ * Batch reconciliation and skip layout for presentation-only updates.
  */
 function updateRuntime(state: GraphRuntimeState, input: GraphRuntimeUpdate) {
   if (state.cy.destroyed()) return;
@@ -227,7 +227,7 @@ function startCurrentLayout(state: GraphRuntimeState, input: GraphRuntimeUpdate)
 
 /***
  * Settle only the latest layout generation and fit once from node bounds.
- * @performance Discard stale completions and avoid repeated automatic fits.
+ * Discard stale completions and avoid repeated automatic fits.
  */
 function completeCurrentLayout(state: GraphRuntimeState, generation: number) {
   scheduleGraphFrame(() => {
@@ -265,7 +265,7 @@ function completeCurrentLayout(state: GraphRuntimeState, generation: number) {
 
 /***
  * Handle explicit readable-fit intent in the runtime owner, never from zoom or React effects.
- * @performance Bounded spacing optimization preserves the settled algorithm instead of repeatedly running it.
+ * Bounded spacing optimization preserves the settled algorithm instead of repeatedly running it.
  */
 function requestOptimizedFit(state: GraphRuntimeState, options: GraphViewFitOptions) {
   if (state.cy.destroyed()) return;
@@ -319,7 +319,7 @@ function applyGraphStyles(
 
 /***
  * Synchronize controlled selection without rerunning layout.
- * @performance Selection updates must not trigger graph reconstruction or layout.
+ * Selection updates must not trigger graph reconstruction or layout.
  */
 function setSelectedNodeIds(state: GraphRuntimeState, nodeIds: readonly string[] | undefined) {
   if (state.cy.destroyed() || nodeIds === undefined) return;
@@ -333,7 +333,7 @@ function setSelectedNodeIds(state: GraphRuntimeState, nodeIds: readonly string[]
 
 /***
  * Persist one rich-node size and schedule at most one relayout for changed geometry.
- * @performance Ignore unchanged measurements before scheduling layout work.
+ * Ignore unchanged measurements before scheduling layout work.
  */
 function setNodeSize(state: GraphRuntimeState, id: string, size: GraphViewSize) {
   const previous = state.nodeSizes.get(id);
@@ -357,7 +357,7 @@ function applyNodeSize(cy: Core, id: string, size: GraphViewSize) {
 
 /***
  * Coalesce DOM measurements into one follow-up layout generation.
- * @performance Keep one scheduled layout per frame instead of one per measured node.
+ * Keep one scheduled layout per frame instead of one per measured node.
  */
 function scheduleMeasuredNodeRelayout(state: GraphRuntimeState) {
   if (state.relayoutScheduledRef.current) return;
@@ -382,7 +382,7 @@ function subscribeRenderedNodes(state: GraphRuntimeState, listener: RenderedNode
 
 /***
  * Publish current rendered node positions only to active rich-node subscribers.
- * @performance Skip snapshot preparation when no overlay is subscribed.
+ * Skip snapshot preparation when no overlay is subscribed.
  */
 function emitRenderedNodes(
   state: Pick<GraphRuntimeState, 'cy' | 'hoveredNodeIds' | 'renderedNodeListeners'>,

package/src/features/graph-view/adapters/inbound/web-artifact/getGraphGeometryKey.ts

@@ -2,7 +2,6 @@ import type { Core } from 'cytoscape';
 
 /***
  * Identifies layout-relevant leaf dimensions without including positions or presentation colors.
- * @performance
  * Adding viewport, color or arbitrary data to this key turns interaction updates into relayouts.
  * Measure after style reconciliation; actual size changes still require layout. Compound bounds
  * follow child positions, so keying their measured bounds would feed layout output back into input.

package/src/features/graph-view/adapters/inbound/web-artifact/getGraphTopologyKey.ts

@@ -2,7 +2,7 @@ import type { GraphViewEdge, GraphViewNode } from './GraphView';
 
 /***
  * Identify visible graph membership and hierarchy independently of presentation metadata.
- * @performance Keep presentation-only changes out of the relayout decision.
+ * Keep presentation-only changes out of the relayout decision.
  */
 export function getGraphTopologyKey(
   nodes: readonly GraphViewNode[],

package/src/features/graph-view/adapters/inbound/web-artifact/hasGraphLayoutChanged.ts

@@ -3,7 +3,6 @@ import { getGraphTopologyKey } from './getGraphTopologyKey';
 
 /***
  * Detects topology and explicit layout-policy changes independently of highlight metadata.
- * @performance
  * New node/edge array identities alone are not a layout request: consumers may update classes
  * and colors on hover or selection. Keep structural identity separate from presentation and
  * combine this decision with measured geometry in the single runtime owner, not consumer effects.

package/src/features/graph-view/adapters/inbound/web-artifact/runDetachedGraphLayout.ts

@@ -3,7 +3,7 @@ import cytoscape, { type Core, type LayoutOptions } from 'cytoscape';
 
 /***
  * Isolate an uncancellable layout from the displayed core and discard stopped generations.
- * @performance Apply current positions in one batch without rebuilding the displayed graph.
+ * Apply current positions in one batch without rebuilding the displayed graph.
  * A stopped ELK computation still runs to completion; this guard does not cancel its CPU work.
  */
 export function runDetachedGraphLayout(cy: Core, options: LayoutOptions, onComplete: () => void) {

package/src/features/graph-view/adapters/inbound/web-artifact/sizeGraphNodesToLabels.ts

@@ -2,7 +2,7 @@ import type { Core } from 'cytoscape';
 
 /***
  * Size plain leaf nodes from the renderer's styled label bounds, keeping padding in the stylesheet.
- * @performance Reuse Cytoscape's cached text measurements during reconciliation, never a per-element
+ * Reuse Cytoscape's cached text measurements during reconciliation, never a per-element
  * style callback or a pan/zoom listener. Only write changed dimensions; bold and Unicode labels must
  * not regress to character-count estimates. Compound dimensions remain owned by child bounds.
  */

package/src/features/graph-view/adapters/inbound/web-artifact/syncGraphElements.ts

@@ -6,7 +6,6 @@ import type { GraphViewEdge, GraphViewNode } from './GraphView';
 
 /***
  * Reconciles graph data in one batch while retaining positions, selection and element identity.
- * @performance
  * Do not replace this with remove-all/add-all: presentation updates must not discard interaction
  * state or force the runtime to rebuild the graph. Use direct ID lookups for obsolete metadata;
  * per-element selector scans would add avoidable work. Runtime tests cover hover/selection updates.

package/src/features/layout/gridMeta.ts

@@ -1,12 +1,22 @@
 import type { ZoraComponentMeta } from '../../types/authoring';
-import { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
+import {
+  CHESS_ALLOWED_CHILDREN,
+  CONTAINER_ALLOWED_CHILDREN,
+  GAME_ALLOWED_CHILDREN,
+  TABLETOP_ALLOWED_CHILDREN,
+} from '../authoring/allowedChildren';
 import { LAYOUT_PROPS } from './constants';
 
 export const gridMeta = {
   name: 'Grid',
   category: 'foundation',
   directManifestNode: true,
-  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  allowedChildren: [
+    ...CONTAINER_ALLOWED_CHILDREN,
+    ...CHESS_ALLOWED_CHILDREN,
+    ...GAME_ALLOWED_CHILDREN,
+    ...TABLETOP_ALLOWED_CHILDREN,
+  ],
   props: {
     ...LAYOUT_PROPS,
     cols: { type: 'number', category: 'Layout', default: 1 },

package/src/features/layout/viewMeta.ts

@@ -1,12 +1,20 @@
 import type { ZoraComponentMeta } from '../../types/authoring';
-import { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
+import {
+  CHESS_ALLOWED_CHILDREN,
+  CONTAINER_ALLOWED_CHILDREN,
+  GAME_ALLOWED_CHILDREN,
+} from '../authoring/allowedChildren';
 import { LAYOUT_PROPS } from './constants';
 
 export const viewMeta = {
   name: 'View',
   category: 'foundation',
   directManifestNode: true,
-  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  allowedChildren: [
+    ...CONTAINER_ALLOWED_CHILDREN,
+    ...CHESS_ALLOWED_CHILDREN,
+    ...GAME_ALLOWED_CHILDREN,
+  ],
   props: {
     ...LAYOUT_PROPS,
     direction: { type: 'enum', category: 'Layout', enum: ['row', 'column'] },

package/src/features/registry/ZORA_COMPONENT_REGISTRY.ts

@@ -20,6 +20,7 @@ import { Breadcrumbs } from '../breadcrumbs/public';
 import { Button, ButtonGroup, IconButton } from '../button/public';
 import { Card, MediaCard, MetricCard, PostCard, ProductCard } from '../card/public';
 import { ChatListItem, MessageBubble } from '../chat/public';
+import { ChessBoard, OpeningBook } from '../chess/public';
 import { Chip, ChipGroup } from '../chip/public';
 import { CollectionEditor } from '../collection-editor/public';
 import { ContentRail } from '../content-rail/public';
@@ -34,6 +35,14 @@ import { SearchInput } from '../form/search-input/public';
 import { Select } from '../form/select/public';
 import { Switch } from '../form/switch/public';
 import { TextInput } from '../form/text-input/public';
+import {
+  Game,
+  GameEntity,
+  GameField,
+  GameInputZone,
+  GameMeasurementProbe,
+  GameOverlay,
+} from '../game/public';
 import { Gradient } from '../gradient/public';
 import { Hero } from '../hero/public';
 import { Icon } from '../icon/public';
@@ -53,6 +62,13 @@ import { ScreenSection, SectionHeader } from '../section/public';
 import { SelectableItem } from '../selection/public';
 import { Skeleton, SkeletonCard, SkeletonList, SkeletonText } from '../skeleton/public';
 import { Surface } from '../surface/public';
+import {
+  CardBack,
+  CardHand,
+  PlayingCard,
+  PokerTrainingTable,
+  TabletopTable,
+} from '../tabletop/public';
 import { Tab, TabList, TabPanel, Tabs } from '../tabs/public';
 import { ThemeModeToggle } from '../theme/adapters/inbound/ThemeModeToggle';
 import { TimePicker } from '../time-picker/public';
@@ -110,6 +126,12 @@ const _ZORA_COMPONENT_REGISTRY = {
   FormError,
   Field,
   Gradient,
+  Game,
+  GameEntity,
+  GameField,
+  GameInputZone,
+  GameMeasurementProbe,
+  GameOverlay,
   Heading,
   Icon,
   IconButton,
@@ -160,6 +182,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   SignInForm,
   SignUpForm,
   ChatListItem,
+  ChessBoard,
   CollectionEditor,
   ContentRail,
   EmptyState,
@@ -168,6 +191,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   ListItem,
   ListSection,
   MessageBubble,
+  OpeningBook,
   MissingElement,
   PostCard,
   ProductCard,
@@ -178,6 +202,11 @@ const _ZORA_COMPONENT_REGISTRY = {
   SectionHeader,
   SelectableItem,
   PaletteItem,
+  CardBack,
+  CardHand,
+  PlayingCard,
+  TabletopTable,
+  PokerTrainingTable,
   Timeline,
   TreeItem,
   TreeView,

package/src/features/tabletop/adapters/inbound/CardBack.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { CardBackProps } from '../../../../types/tabletop';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
+import { createTabletopColorScheme } from '../../utils/createTabletopColorScheme';
+import { getTabletopCardDimensions } from '../../utils/getTabletopCardDimensions';
+
+/*** Renders a face-down card with a non-revealing accessible label. */
+export const CardBack = withZoraThemeScope(CardBackInner);
+
+/*** Renders the card back using the active ZORA theme. */
+function CardBackInner({
+  size = 'medium',
+  muted = false,
+  accessibilityLabel,
+  colorScheme,
+  testID,
+}: CardBackProps) {
+  const { theme } = useZoraTheme();
+  const colors = React.useMemo(
+    () => createTabletopColorScheme(theme, colorScheme),
+    [colorScheme, theme],
+  );
+  const dimensions = getTabletopCardDimensions(size);
+
+  return (
+    <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={testID}
+    >
+      <View
+        style={[
+          styles.inner,
+          {
+            borderColor: colors.cardBackBorder,
+            borderRadius: Math.max(2, dimensions.radius - 3),
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: 'center',
+    borderWidth: 1,
+    justifyContent: 'center',
+  },
+  inner: {
+    borderWidth: 1,
+    height: '68%',
+    opacity: 0.48,
+    width: '68%',
+  },
+});

package/src/features/tabletop/adapters/inbound/CardHand.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { CardHandProps } from '../../../../types/tabletop';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { CardBack } from './CardBack';
+import { PlayingCard } from './PlayingCard';
+
+/*** Renders a compact row of face-up and face-down cards. */
+export const CardHand = withZoraThemeScope(CardHandInner);
+
+/*** Creates stable indices for non-revealing card backs. */
+function createFaceDownCards(count: number): readonly number[] {
+  return Array.from({ length: Math.max(0, count) }, (_, index) => index);
+}
+
+/*** Renders the card row from caller-owned values. */
+function CardHandInner({
+  cards = [],
+  faceDownCards = 0,
+  size = 'medium',
+  muted = false,
+  colorScheme,
+  accessibilityLabel,
+  testID,
+}: CardHandProps) {
+  const hiddenCards = createFaceDownCards(faceDownCards);
+
+  return (
+    <View accessibilityLabel={accessibilityLabel} style={styles.hand} testID={testID}>
+      {cards.map((card, index) => (
+        <PlayingCard
+          card={card}
+          colorScheme={colorScheme}
+          key={`${card.rank}-${card.suit}-${index}`}
+          muted={muted}
+          size={size}
+          testID={testID ? `${testID}-card-${index}` : undefined}
+        />
+      ))}
+      {hiddenCards.map((index) => (
+        <CardBack
+          colorScheme={colorScheme}
+          key={`hidden-${index}`}
+          muted={muted}
+          size={size}
+          testID={testID ? `${testID}-hidden-${index}` : undefined}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  hand: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 4,
+    justifyContent: 'center',
+  },
+});

package/src/features/tabletop/adapters/inbound/PlayingCard.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { PlayingCardProps } from '../../../../types/tabletop';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
+import { createTabletopColorScheme } from '../../utils/createTabletopColorScheme';
+import { getPlayingCardLabel } from '../../utils/getPlayingCardLabel';
+import { getTabletopCardDimensions } from '../../utils/getTabletopCardDimensions';
+
+const suitMarks = { clubs: '♣', diamonds: '♦', hearts: '♥', spades: '♠' } as const;
+
+/*** Renders a face-up playing card with an accessible rank and suit. */
+export const PlayingCard = withZoraThemeScope(PlayingCardInner);
+
+/*** Renders the card face using the active ZORA theme. */
+function PlayingCardInner({
+  card,
+  size = 'medium',
+  selected = false,
+  muted = false,
+  accessibilityLabel,
+  colorScheme,
+  testID,
+}: PlayingCardProps) {
+  const { theme } = useZoraTheme();
+  const colors = React.useMemo(
+    () => createTabletopColorScheme(theme, colorScheme),
+    [colorScheme, theme],
+  );
+  const dimensions = getTabletopCardDimensions(size);
+  const suitColor =
+    card.suit === 'hearts' || card.suit === 'diamonds' ? colors.redSuitText : colors.cardText;
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel ?? getPlayingCardLabel(card)}
+      accessibilityRole="image"
+      style={[
+        styles.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={testID}
+    >
+      <Text
+        selectable={false}
+        style={[
+          styles.rank,
+          {
+            color: suitColor,
+            fontSize: dimensions.rankFontSize,
+            lineHeight: dimensions.rankFontSize + 4,
+          },
+        ]}
+      >
+        {card.rank}
+      </Text>
+      <Text
+        selectable={false}
+        style={[
+          styles.suit,
+          {
+            color: suitColor,
+            fontSize: dimensions.suitFontSize,
+            lineHeight: dimensions.suitFontSize + 3,
+          },
+        ]}
+      >
+        {suitMarks[card.suit]}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: 'center',
+    borderWidth: 1,
+    justifyContent: 'center',
+  },
+  rank: {
+    fontWeight: '800',
+  },
+  suit: {
+    fontWeight: '700',
+    marginTop: -2,
+  },
+});