@scriptonita/chess-football-ui 0.7.0 → 0.9.0

package/dist/index.js

@@ -1,4 +1,5 @@
-import { useGameStore, getInitialBoardState } from './chunk-N24LGLLO.js';
+import { useGameStore, DEFAULT_MAX_AP, getInitialBoardState } from './chunk-C5HCN7O5.js';
+import { useShallow } from 'zustand/react/shallow';
 import { SHORT_KEY, LONG_KEY, getValidMoves, getValidPasses, isInEnemyArea, getPath, RANK_LABELS, FILE_LABELS, squareName } from '@scriptonita/chess-football-engine';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -83,7 +84,10 @@ function GamePiece({ piece, isSelected, hasBall, onClick, isMoving = false }) {
       style: piece.hasMovedThisTurn ? MOVED_STYLE : void 0,
       className: cn(
         "relative w-[88%] h-[88%] rounded-full cursor-pointer z-10 transition-transform duration-200 ease-out motion-reduce:transition-none",
-        isSelected && "ring-4 ring-primary scale-110 z-30",
+        // `--primary` was the package's one remaining shadcn token, and
+        // CrazyGames had to define it by hand just to make the selection
+        // ring visible. It is part of the design system now.
+        isSelected && "ring-4 ring-accent-green scale-110 z-30",
         isMoving && "scale-[1.08] z-40",
         piece.hasMovedThisTurn && "opacity-70"
       ),
@@ -169,6 +173,7 @@ var STATIC_I18N_KEYS = [
   "actionPointsAriaLabel",
   "actionPointsShort",
   "ballHolder",
+  "boardAriaLabel",
   "endTurn",
   "endTurnConfirm",
   "endTurnConfirmDescription",
@@ -182,11 +187,13 @@ var STATIC_I18N_KEYS = [
   "history.pass",
   "history.tackle",
   "history.title",
+  "history.close",
   "history.turn",
   "history.viewAll",
   "move",
   "offsideWarning",
   "pass",
+  "scoreAriaLabel",
   "selectedPiece.alreadyMoved",
   "selectedPiece.atSquare",
   "selectedPiece.empty",
@@ -198,6 +205,14 @@ var STATIC_I18N_KEYS = [
   "shortcuts.pass",
   "shortcuts.select",
   "shortcuts.title",
+  "square.empty",
+  "square.emptyWithBall",
+  "square.moveOrPassTarget",
+  "square.moveTarget",
+  "square.passTarget",
+  "square.piece",
+  "square.pieceWithBall",
+  "square.selected",
   "teamBlack",
   "teamWhite",
   "waitingRival",
@@ -207,6 +222,7 @@ var PIECE_I18N_KEYS = [...Object.values(SHORT_KEY), ...Object.values(LONG_KEY)].
   (label) => `pieces.${label}`
 );
 var EVENT_TOAST_I18N_KEYS = [
+  "eventToast.goal",
   "eventToast.interception",
   "eventToast.offside",
   "eventToast.tackle"
@@ -216,7 +232,13 @@ var GAME_I18N_KEYS = [
   ...PIECE_I18N_KEYS,
   ...EVENT_TOAST_I18N_KEYS
 ];
-var fallback = (key) => key;
+var nodeEnv = globalThis.process?.env?.NODE_ENV;
+var fallback = (key) => {
+  if (nodeEnv && nodeEnv !== "production") {
+    console.warn(`[chess-football-ui] missing game i18n key: "${key}" (no GameI18nProvider?)`);
+  }
+  return key;
+};
 var GameI18nContext = createContext(fallback);
 function GameI18nProvider({ t, children }) {
   return /* @__PURE__ */ jsx(GameI18nContext.Provider, { value: t, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion: "user", children }) });
@@ -421,17 +443,29 @@ var cellX = (x) => `${x * 100}%`;
 var cellY = (y) => `${(ROWS - 1 - y) * 100}%`;
 var PIECE_SLIDE = { type: "spring", stiffness: 190, damping: 28, mass: 1 };
 var BALL_SLIDE = { type: "spring", stiffness: 300, damping: 26, mass: 0.6 };
-function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, toolbar = true }) {
+function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, toolbar = true, className }) {
   const t = useGameT();
+  const boardId = useId();
   const prefersReducedMotion = useReducedMotion();
   const {
     boardState,
     selectedPieceId,
+    interactionMode,
     setSelectedPieceId,
     setInteractionMode,
     movePiece,
     passBall
-  } = useGameStore();
+  } = useGameStore(
+    useShallow((s) => ({
+      boardState: s.boardState,
+      selectedPieceId: s.selectedPieceId,
+      interactionMode: s.interactionMode,
+      setSelectedPieceId: s.setSelectedPieceId,
+      setInteractionMode: s.setInteractionMode,
+      movePiece: s.movePiece,
+      passBall: s.passBall
+    }))
+  );
   const [cursor, setCursor] = useState(null);
   const [disambiguateAt, setDisambiguateAt] = useState(null);
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
@@ -499,21 +533,21 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
     return () => clearTimeout(id);
   }, [replay]);
   const validMoves = useMemo(() => {
-    if (!boardState) return [];
+    if (!boardState || interactionMode === "pass") return [];
     const sp = boardState.pieces.find((p) => p.id === selectedPieceId);
     if (sp && !sp.hasMovedThisTurn) {
       return getValidMoves(sp, boardState);
     }
     return [];
-  }, [boardState, selectedPieceId]);
+  }, [boardState, selectedPieceId, interactionMode]);
   const validPasses = useMemo(() => {
-    if (!boardState) return [];
+    if (!boardState || interactionMode === "move") return [];
     const sp = boardState.pieces.find((p) => p.id === selectedPieceId);
     if (sp && boardState.ball.holderId === sp.id) {
       return getValidPasses(sp, boardState);
     }
     return [];
-  }, [boardState, selectedPieceId]);
+  }, [boardState, selectedPieceId, interactionMode]);
   if (!boardState) return null;
   const lastMove = boardState.lastMove;
   const ball = boardState.ball;
@@ -627,8 +661,11 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
         activate(c.x, c.y);
         break;
       }
+      // Bare M / P only: Cmd+P is Print and Ctrl+M is a browser shortcut,
+      // and both used to resolve the popover behind the user's back.
       case "m":
       case "M":
+        if (e.ctrlKey || e.metaKey || e.altKey) break;
         if (disambiguateAt && selectedPieceId) {
           movePiece(selectedPieceId, disambiguateAt);
           setDisambiguateAt(null);
@@ -636,6 +673,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
         break;
       case "p":
       case "P":
+        if (e.ctrlKey || e.metaKey || e.altKey) break;
         if (disambiguateAt) {
           passBall(disambiguateAt);
           setDisambiguateAt(null);
@@ -653,9 +691,28 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
         break;
     }
   };
-  const renderSquares = () => {
-    const squares = [];
+  const cellId = (x, y) => `${boardId}-sq-${x}-${y}`;
+  const squareLabel = (x, y, pieceAt, isValidMove, isValidPass) => {
+    const square = squareName({ x, y });
+    const ballHere = ball.pos.x === x && ball.pos.y === y;
+    const parts = [];
+    if (pieceAt) {
+      const piece = t(`pieces.${LONG_KEY[pieceAt.type]}`);
+      const team = pieceAt.side === "white" ? t("teamWhite") : t("teamBlack");
+      parts.push(t(ballHere ? "square.pieceWithBall" : "square.piece", { square, piece, team }));
+    } else {
+      parts.push(t(ballHere ? "square.emptyWithBall" : "square.empty", { square }));
+    }
+    if (isValidMove && isValidPass) parts.push(t("square.moveOrPassTarget"));
+    else if (isValidMove) parts.push(t("square.moveTarget"));
+    else if (isValidPass) parts.push(t("square.passTarget"));
+    if (pieceAt && pieceAt.id === selectedPieceId) parts.push(t("square.selected"));
+    return parts.join(", ");
+  };
+  const renderRows = () => {
+    const rows = [];
     for (let y = ROWS - 1; y >= 0; y--) {
+      const squares = [];
       for (let x = 0; x < COLS; x++) {
         const isValidMove = validMoves.some((m) => m.x === x && m.y === y);
         const isValidPass = validPasses.some((p) => p.x === x && p.y === y);
@@ -672,27 +729,38 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
           /* @__PURE__ */ jsxs(
             "div",
             {
+              id: cellId(x, y),
+              role: "gridcell",
+              "aria-label": squareLabel(x, y, pieceAt, isValidMove, isValidPass),
+              "aria-selected": !!pieceAt && pieceAt.id === selectedPieceId,
               onClick: () => handleSquareClick(x, y),
               onMouseEnter: () => {
                 if (isValidPass) setHoveredPassAt({ x, y });
               },
               onMouseLeave: () => setHoveredPassAt(null),
+              onTouchStart: () => {
+                if (isValidPass) setHoveredPassAt({ x, y });
+              },
               className: cn(
                 pitchSquareClass(x, y),
                 "flex items-center justify-center cursor-pointer",
                 !isValidMove && !isValidPass && isLastMove && "bg-last-move-highlight/20",
                 // §8: pulsing warning ring on enemy goal area
                 isOffsideRisk && isEnemyGoalArea && !isValidMove && !isValidPass && "ring-2 ring-inset ring-warning/60",
-                isAmbiguous && "ring-[3px] ring-inset ring-yellow-400/90 bg-yellow-400/20",
-                !isAmbiguous && isValidMove && "ring-[3px] ring-inset ring-yellow-400/80 bg-yellow-400/15",
-                !isAmbiguous && isValidPass && "ring-[3px] ring-inset ring-sky-400/80 bg-sky-400/15"
+                // Move and pass used raw yellow-400/sky-400 here while
+                // the popover a few lines below used the
+                // move-highlight/pass-highlight tokens — two palettes
+                // for the same two concepts. One palette now: tokens.
+                isAmbiguous && "ring-[3px] ring-inset ring-move-highlight/90 bg-move-highlight/20",
+                !isAmbiguous && isValidMove && "ring-[3px] ring-inset ring-move-highlight/80 bg-move-highlight/15",
+                !isAmbiguous && isValidPass && "ring-[3px] ring-inset ring-pass-highlight/80 bg-pass-highlight/15"
               ),
               children: [
-                !isAmbiguous && isValidMove && !pieceAt && /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-yellow-400/65" }),
-                !isAmbiguous && isValidPass && !pieceAt && /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-sky-400/65" }),
-                isAmbiguous && !pieceAt && /* @__PURE__ */ jsxs("div", { className: "flex gap-0.5", children: [
-                  /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-yellow-400/80" }),
-                  /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-sky-400/80" })
+                !isAmbiguous && isValidMove && !pieceAt && /* @__PURE__ */ jsx("div", { "data-testid": "move-marker", className: "w-3 h-3 rounded-full bg-move-highlight/65" }),
+                !isAmbiguous && isValidPass && !pieceAt && /* @__PURE__ */ jsx("div", { "data-testid": "pass-marker", className: "w-3.5 h-3.5 rounded-full border-2 border-pass-highlight/80" }),
+                isAmbiguous && !pieceAt && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+                  /* @__PURE__ */ jsx("div", { "data-testid": "move-marker", className: "w-2.5 h-2.5 rounded-full bg-move-highlight/80" }),
+                  /* @__PURE__ */ jsx("div", { "data-testid": "pass-marker", className: "w-2.5 h-2.5 rounded-full border-2 border-pass-highlight/90" })
                 ] }),
                 isCursor && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 ring-2 ring-inset ring-white pointer-events-none z-20", "aria-hidden": "true" }),
                 isDisambiguateTarget && selectedPieceId && /* @__PURE__ */ jsxs(
@@ -745,26 +813,27 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
           )
         );
       }
+      rows.push(
+        /* @__PURE__ */ jsx("div", { role: "row", className: "contents", children: squares }, `row-${y}`)
+      );
     }
-    return squares;
+    return rows;
   };
   const board = /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-testid": "board-root",
       className: cn(
         // §6: Mobile edge-to-edge — thin 2px margin, no border, no radius
-        "w-full mx-0.5 bg-[#1a3317] overflow-hidden",
+        // The frame was hardcoded #1a3317 in three files, hand-tuned for
+        // the webapp's darker grass and visibly wrong against the
+        // CrazyGames pitch. It is a token now (see README).
+        "w-full mx-0.5 bg-field-frame overflow-hidden",
         // §5+§6: Desktop — centered, rounded, bordered, height-based max-width
-        "md:mx-auto md:rounded-xl md:shadow-2xl md:border-4 md:border-[#1a3317]",
+        "md:mx-auto md:rounded-xl md:shadow-2xl md:border-4 md:border-field-frame",
         "md:max-w-[min(700px,calc((100dvh_-_150px)*0.75))]",
-        keyboardNav && "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-green focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary"
+        !showCoordinates && className
       ),
-      ...keyboardNav ? {
-        tabIndex: 0,
-        role: "application",
-        "aria-label": "Game board \u2014 arrow keys to move the cursor, Enter to act",
-        onKeyDown: handleKeyDown
-      } : {},
       children: [
         toolbar && /* @__PURE__ */ jsxs("div", { className: "hidden md:flex items-center justify-between gap-2 px-2.5 py-1", "data-testid": "board-toolbar", children: [
           /* @__PURE__ */ jsx(BallHolderChip, {}),
@@ -773,7 +842,12 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
             {
               ref: shortcutsRef,
               className: "relative",
-              onKeyDown: (e) => e.stopPropagation(),
+              onKeyDown: (e) => {
+                if (e.key === "Escape" && shortcutsOpen) {
+                  e.stopPropagation();
+                  setShortcutsOpen(false);
+                }
+              },
               children: [
                 /* @__PURE__ */ jsx(
                   "button",
@@ -805,7 +879,25 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative", style: { containerType: "inline-size" }, children: [
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-9 gap-[1px]", children: renderSquares() }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "grid",
+              "aria-label": t("boardAriaLabel"),
+              "aria-rowcount": ROWS,
+              "aria-colcount": COLS,
+              className: cn(
+                "grid grid-cols-9 gap-[1px]",
+                keyboardNav && "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent-green"
+              ),
+              ...keyboardNav ? {
+                tabIndex: 0,
+                onKeyDown: handleKeyDown,
+                "aria-activedescendant": cursor ? cellId(cursor.x, cursor.y) : void 0
+              } : {},
+              children: renderRows()
+            }
+          ),
           /* @__PURE__ */ jsx(GrassOverlay, {}),
           /* @__PURE__ */ jsx(PitchMarkings, {}),
           /* @__PURE__ */ jsx(
@@ -831,7 +923,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
               )
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none", "data-testid": "pieces-layer", children: [
+          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none", "data-testid": "pieces-layer", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: boardState.pieces.map((piece) => {
               const isPickupCarrier = pickupCarrierId === piece.id;
               const pieceTransition = isPickupCarrier ? { duration: PICKUP_DURATION, ease: "linear" } : PIECE_SLIDE;
@@ -937,7 +1029,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
   );
   if (!showCoordinates) return board;
   const ranksTopToBottom = [...RANK_LABELS].reverse();
-  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-[540px] md:max-w-none mx-auto", "aria-hidden": "false", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full max-w-[540px] md:max-w-none mx-auto", className), children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: "grid gap-1 select-none",
@@ -969,8 +1061,20 @@ function Avatar({ className, children }) {
   return /* @__PURE__ */ jsx("div", { className: cn("relative w-9 h-9 rounded-full overflow-hidden shrink-0", className), children });
 }
 function AvatarImage({ src, alt, className }) {
-  if (!src) return null;
-  return /* @__PURE__ */ jsx("img", { src, alt: alt ?? "", className: cn("w-full h-full object-cover", className) });
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    setFailed(false);
+  }, [src]);
+  if (!src || failed) return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: alt ?? "",
+      onError: () => setFailed(true),
+      className: cn("w-full h-full object-cover", className)
+    }
+  );
 }
 function AvatarFallback({ className, children }) {
   return /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 flex items-center justify-center text-xs font-semibold", className), children });
@@ -1026,6 +1130,51 @@ function ActionPoints({ total, remaining, size = 20, className, kingMustRelease
     );
   }) });
 }
+function PlayerIdentity({
+  name,
+  team,
+  variant = "full",
+  isActive = false,
+  align = "left",
+  adornment,
+  className
+}) {
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "font-inter text-[11px] font-medium truncate max-w-[160px]",
+          isActive ? "text-fg-secondary" : "text-fg-muted",
+          className
+        ),
+        children: [
+          name,
+          /* @__PURE__ */ jsxs("span", { className: "font-mono uppercase tracking-[0.5px] text-fg-muted", children: [
+            " \xB7 ",
+            team
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1 min-w-0", align === "right" && "items-end", className), children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "font-inter text-[13px] font-semibold leading-none truncate transition-colors duration-300",
+          isActive ? "text-fg-primary" : "text-fg-muted"
+        ),
+        children: name
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", align === "right" && "flex-row-reverse"), children: [
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-fg-muted uppercase tracking-[0.5px]", children: team }),
+      adornment
+    ] })
+  ] });
+}
 function initials(name) {
   return (name?.split(" ").map((w) => w[0]).join("").toUpperCase() || "?").slice(0, 2);
 }
@@ -1034,10 +1183,11 @@ function Scoreboard({
   opponentUsername,
   creatorAvatarUrl,
   opponentAvatarUrl,
-  userSide
+  userSide,
+  className
 }) {
   const t = useGameT();
-  const { boardState } = useGameStore();
+  const boardState = useGameStore((s) => s.boardState);
   if (!boardState?.score) return null;
   const { score, turn, actionPoints, kingMustRelease } = boardState;
   const myScore = userSide === "white" ? score.white : score.black;
@@ -1051,8 +1201,8 @@ function Scoreboard({
   const isMyTurn = turn === userSide;
   const myKingMustRelease = isMyTurn && kingMustRelease === turn;
   const rivalKingMustRelease = !isMyTurn && kingMustRelease === turn;
-  const maxAP = boardState.maxActionPoints ?? 5;
-  return /* @__PURE__ */ jsxs("div", { className: "w-full bg-bg-secondary flex items-center justify-between px-5 py-2.5", children: [
+  const maxAP = boardState.maxActionPoints ?? DEFAULT_MAX_AP;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full bg-bg-secondary flex items-center justify-between px-5 py-2.5", className), children: [
     /* @__PURE__ */ jsx(
       PlayerInfo,
       {
@@ -1066,10 +1216,11 @@ function Scoreboard({
         align: "left"
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-anton text-[32px] leading-none text-fg-primary tabular-nums", children: myScore }),
-      /* @__PURE__ */ jsx("span", { className: "font-anton text-2xl text-fg-muted", children: "\u2014" }),
-      /* @__PURE__ */ jsx("span", { className: "font-anton text-[32px] leading-none text-fg-primary tabular-nums", children: rivalScore })
+    /* @__PURE__ */ jsxs("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "font-anton text-[32px] leading-none text-fg-primary tabular-nums", children: myScore }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "font-anton text-2xl text-fg-muted", children: "\u2014" }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "font-anton text-[32px] leading-none text-fg-primary tabular-nums", children: rivalScore }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("scoreAriaLabel", { me: myName, myScore, rival: rivalName, rivalScore }) })
     ] }),
     /* @__PURE__ */ jsx(
       PlayerInfo,
@@ -1096,14 +1247,16 @@ function PlayerInfo({ name, team, avatarUrl, isActive, actionPoints, maxActionPo
       /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-bg-surface-elevated text-fg-secondary text-xs font-semibold", children: initials(name) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", align === "right" && "items-end"), children: [
-      /* @__PURE__ */ jsx("span", { className: cn(
-        "font-inter text-[13px] font-semibold leading-none transition-colors duration-300",
-        isActive ? "text-fg-primary" : "text-fg-muted"
-      ), children: name }),
-      /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", align === "right" && "flex-row-reverse"), children: [
-        /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-fg-muted uppercase", children: team }),
-        isActive && /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-accent-green animate-pulse motion-reduce:animate-none", "aria-hidden": "true" })
-      ] }),
+      /* @__PURE__ */ jsx(
+        PlayerIdentity,
+        {
+          name,
+          team,
+          isActive,
+          align,
+          adornment: isActive ? /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-accent-green animate-pulse motion-reduce:animate-none", "aria-hidden": "true" }) : void 0
+        }
+      ),
       /* @__PURE__ */ jsx(
         ActionPoints,
         {
@@ -1124,7 +1277,7 @@ function MiniScoreboard({
   className
 }) {
   const t = useGameT();
-  const { boardState } = useGameStore();
+  const boardState = useGameStore((s) => s.boardState);
   if (!boardState?.score) return null;
   const { score, turn } = boardState;
   const myScore = userSide === "white" ? score.white : score.black;
@@ -1137,29 +1290,28 @@ function MiniScoreboard({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
       className: cn(
         "w-full max-w-[540px] rounded-xl bg-bg-surface border border-border-subtle",
         "flex items-center justify-between gap-4 px-5 py-3",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(SideCell, { name: myName, team: myTeam, score: myScore, isActive: isMyTurn, align: "left" }),
-        /* @__PURE__ */ jsx("span", { className: "font-anton text-base text-fg-muted uppercase tracking-[2px]", "aria-hidden": "true", children: "vs" }),
-        /* @__PURE__ */ jsx(SideCell, { name: rivalName, team: rivalTeam, score: rivalScore, isActive: !isMyTurn, align: "right" })
+        /* @__PURE__ */ jsxs("div", { className: "contents", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx(SideCell, { name: myName, team: myTeam, score: myScore, isActive: isMyTurn, align: "left" }),
+          /* @__PURE__ */ jsx("span", { className: "font-anton text-base text-fg-muted uppercase tracking-[2px]", children: "vs" }),
+          /* @__PURE__ */ jsx(SideCell, { name: rivalName, team: rivalTeam, score: rivalScore, isActive: !isMyTurn, align: "right" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("scoreAriaLabel", { me: myName, myScore, rival: rivalName, rivalScore }) })
       ]
     }
   );
 }
 function SideCell({ name, team, score, isActive, align }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col min-w-0", align === "right" ? "items-end" : "items-start"), children: [
-    /* @__PURE__ */ jsxs("span", { className: cn(
-      "font-mono text-[10px] uppercase tracking-[0.5px] truncate max-w-[160px]",
-      isActive ? "text-fg-secondary" : "text-fg-muted"
-    ), children: [
-      name,
-      " \xB7 ",
-      team
-    ] }),
+    /* @__PURE__ */ jsx(PlayerIdentity, { name, team, variant: "compact", isActive }),
     /* @__PURE__ */ jsx("span", { className: cn(
       "font-anton text-[32px] leading-none tabular-nums",
       isActive ? "text-fg-primary" : "text-fg-secondary"
@@ -1167,7 +1319,12 @@ function SideCell({ name, team, score, isActive, align }) {
   ] });
 }
 var VARIANT = {
-  primary: "bg-accent-green text-fg-primary font-anton tracking-widest rounded-md hover:bg-accent-green-light active:bg-accent-green-dark",
+  // White on `--accent-green` is 4.27:1 — under WCAG AA for the Anton 400 the
+  // primary CTA is set in. `--accent-green-dark` clears it (~6.5:1), so the
+  // resting state is the dark green and interaction brightens it rather than
+  // darkening it. Hover/active are transient; the resting state is the one a
+  // player reads.
+  primary: "bg-accent-green-dark text-fg-primary font-anton tracking-widest rounded-md hover:bg-accent-green active:bg-accent-green-light",
   secondary: "bg-bg-surface text-fg-primary font-inter font-semibold rounded-md border border-border-subtle hover:bg-bg-surface-elevated active:bg-bg-secondary",
   ghost: "bg-transparent text-fg-secondary font-inter font-medium rounded-md hover:text-fg-primary active:text-fg-muted",
   destructive: "bg-danger/10 text-danger font-inter font-semibold rounded-md border border-danger hover:bg-danger/20 active:bg-danger/30"
@@ -1197,24 +1354,97 @@ var Button = React.forwardRef(
   )
 );
 Button.displayName = "Button";
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function focusableWithin(panel) {
+  return Array.from(panel.querySelectorAll(FOCUSABLE)).filter(
+    (el) => !el.closest("[hidden]") && !el.closest('[aria-hidden="true"]')
+  );
+}
+function useDialogA11y({ open, onClose }) {
+  const panelRef = useRef(null);
+  const restoreToRef = useRef(null);
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  });
+  useEffect(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    if (!panel) return;
+    restoreToRef.current = document.activeElement;
+    const initial = focusableWithin(panel)[0];
+    if (initial) {
+      initial.focus();
+    } else {
+      panel.tabIndex = -1;
+      panel.focus();
+    }
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onCloseRef.current();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const items = focusableWithin(panel);
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !panel.contains(active))) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown, true);
+      restoreToRef.current?.focus?.();
+    };
+  }, [open]);
+  return panelRef;
+}
 function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, onConfirm, onCancel }) {
+  const baseId = useId();
+  const titleId = `${baseId}-title`;
+  const descId = `${baseId}-desc`;
+  const panelRef = useDialogA11y({ open, onClose: onCancel });
   if (!open) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm",
-      role: "dialog",
-      "aria-modal": "true",
+      onClick: onCancel,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": description ? descId : void 0,
+          onClick: (e) => e.stopPropagation(),
           className: cn(
             "bg-bg-surface border border-border-subtle rounded-xl p-6 mx-4 max-w-sm w-full",
-            "flex flex-col gap-4 shadow-2xl"
+            "flex flex-col gap-4 shadow-2xl",
+            "focus:outline-none"
           ),
           children: [
-            /* @__PURE__ */ jsx("h2", { className: "font-anton text-lg text-fg-primary uppercase tracking-wide", children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: "font-inter text-sm text-fg-secondary", children: description }),
+            /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-anton text-lg text-fg-primary uppercase tracking-wide", children: title }),
+            description && /* @__PURE__ */ jsx("p", { id: descId, className: "font-inter text-sm text-fg-secondary", children: description }),
             /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
               /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "flex-1", onClick: onCancel, children: cancelLabel }),
               /* @__PURE__ */ jsx(Button, { variant: "primary", className: "flex-1", onClick: onConfirm, children: confirmLabel })
@@ -1225,11 +1455,9 @@ function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, on
     }
   );
 }
-function GameControls({ isMyTurn }) {
-  const {
-    boardState,
-    endTurn
-  } = useGameStore();
+function GameControls({ isMyTurn, className }) {
+  const boardState = useGameStore((s) => s.boardState);
+  const endTurn = useGameStore((s) => s.endTurn);
   const t = useGameT();
   const [showEndTurnConfirm, setShowEndTurnConfirm] = useState(false);
   if (!boardState) return null;
@@ -1241,7 +1469,7 @@ function GameControls({ isMyTurn }) {
       endTurn();
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "w-full bg-bg-secondary flex flex-col gap-3 px-5 pt-3 pb-5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full bg-bg-secondary flex flex-col gap-3 px-5 pt-3 pb-5", className), children: [
     isMyTurn && /* @__PURE__ */ jsxs(
       Button,
       {
@@ -1261,7 +1489,15 @@ function GameControls({ isMyTurn }) {
         ]
       }
     ),
-    !isMyTurn && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-11 rounded-md bg-bg-surface border border-border-subtle", children: /* @__PURE__ */ jsx("span", { className: "font-inter text-sm text-fg-muted", children: t("waitingRival") }) }),
+    !isMyTurn && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        className: "flex items-center justify-center h-11 rounded-md bg-bg-surface border border-border-subtle",
+        children: /* @__PURE__ */ jsx("span", { className: "font-inter text-sm text-fg-muted", children: t("waitingRival") })
+      }
+    ),
     /* @__PURE__ */ jsx(
       ConfirmDialog,
       {
@@ -1288,7 +1524,9 @@ var PIECE_ICON2 = {
 };
 function SelectedPieceDetail({ isMyTurn, className }) {
   const t = useGameT();
-  const { boardState, selectedPieceId } = useGameStore();
+  const { boardState, selectedPieceId } = useGameStore(
+    useShallow((s) => ({ boardState: s.boardState, selectedPieceId: s.selectedPieceId }))
+  );
   if (!boardState) return null;
   const piece = boardState.pieces.find((p) => p.id === selectedPieceId);
   if (!piece) {
@@ -1322,7 +1560,6 @@ function SelectedPieceDetail({ isMyTurn, className }) {
       ),
       role: "status",
       "aria-live": "polite",
-      "aria-label": `${longName} ${square}`,
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -1351,7 +1588,7 @@ function SelectedPieceDetail({ isMyTurn, className }) {
 }
 function MoveHistory({ scrollable = true, limit, className }) {
   const t = useGameT();
-  const { boardState } = useGameStore();
+  const boardState = useGameStore((s) => s.boardState);
   const scrollRef = useRef(null);
   const history = boardState?.moveHistory ?? [];
   const visible = limit ? history.slice(-limit) : history;
@@ -1458,9 +1695,9 @@ function HistoryRow({ entry, isLatest }) {
 }
 var COLS2 = 9;
 var ROWS2 = 12;
-function StaticGameBoard() {
+function StaticGameBoard({ className } = {}) {
   const boardState = useMemo(() => getInitialBoardState("white"), []);
-  return /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden rounded-xl shadow-2xl border-4 border-[#1a3317] bg-[#1a3317]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full overflow-hidden rounded-xl shadow-2xl border-4 border-field-frame bg-field-frame", className), children: [
     /* @__PURE__ */ jsx(PitchSurface, { children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none", children: boardState.pieces.map((piece) => /* @__PURE__ */ jsx(
       "div",
       {
@@ -1504,9 +1741,10 @@ function StaticGameBoard() {
 }
 function TurnBanner({ isMyTurn, waitingLabel, className }) {
   const t = useGameT();
-  const { boardState } = useGameStore();
+  const boardState = useGameStore((s) => s.boardState);
   if (!boardState) return null;
-  const { actionPoints, maxActionPoints } = boardState;
+  const { actionPoints, turnNumber } = boardState;
+  const maxActionPoints = boardState.maxActionPoints ?? DEFAULT_MAX_AP;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1518,16 +1756,19 @@ function TurnBanner({ isMyTurn, waitingLabel, className }) {
       "aria-live": "polite",
       "aria-atomic": "true",
       children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "font-anton text-sm tracking-[1.5px] uppercase",
-              isMyTurn ? "text-accent-green" : "text-fg-muted"
-            ),
-            children: isMyTurn ? t("yourTurn") : waitingLabel ?? t("waitingRival")
-          }
-        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 min-w-0", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "font-anton text-sm tracking-[1.5px] uppercase truncate",
+                isMyTurn ? "text-accent-green" : "text-fg-muted"
+              ),
+              children: isMyTurn ? t("yourTurn") : waitingLabel ?? t("waitingRival")
+            }
+          ),
+          typeof turnNumber === "number" && /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-fg-muted uppercase tracking-[0.5px] shrink-0", children: t("history.turn", { n: turnNumber }) })
+        ] }),
         isMyTurn && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", "aria-label": t("actionPointsAriaLabel", { remaining: actionPoints, total: maxActionPoints }), children: [
           /* @__PURE__ */ jsx(Zap, { size: 12, className: "text-accent-green", "aria-hidden": "true" }),
           /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs text-fg-secondary tabular-nums", children: [
@@ -1540,15 +1781,16 @@ function TurnBanner({ isMyTurn, waitingLabel, className }) {
     }
   );
 }
-var TOASTABLE = /* @__PURE__ */ new Set(["interception", "offside", "tackle"]);
+var TOASTABLE = /* @__PURE__ */ new Set(["goal", "interception", "offside", "tackle"]);
 var TOAST_CONFIG = {
+  goal: "bg-accent-green/20 border-accent-green/60 text-accent-green-light",
   interception: "bg-danger/20 border-danger/50 text-danger",
   offside: "bg-warning/20 border-warning/50 text-warning",
   tackle: "bg-warning/20 border-warning/50 text-warning"
 };
 function EventToast({ className }) {
   const t = useGameT();
-  const { boardState } = useGameStore();
+  const boardState = useGameStore((s) => s.boardState);
   const [toast, setToast] = useState(null);
   useEffect(() => {
     const lastMove = boardState?.lastMove;
@@ -1587,8 +1829,10 @@ function EventToast({ className }) {
   );
 }
 function MobileHistory({ className }) {
-  const { boardState } = useGameStore();
+  const boardState = useGameStore((s) => s.boardState);
   const [open, setOpen] = useState(false);
+  const titleId = `${useId()}-title`;
+  const panelRef = useDialogA11y({ open, onClose: () => setOpen(false) });
   const lastMove = boardState?.moveHistory?.at(-1);
   if (!lastMove) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1614,11 +1858,13 @@ function MobileHistory({ className }) {
           animate: { y: 0 },
           exit: { y: "100%" },
           transition: { type: "spring", stiffness: 300, damping: 32 },
-          className: "fixed bottom-0 left-0 right-0 z-50 bg-bg-secondary rounded-t-2xl border-t border-border-subtle shadow-xl",
+          ref: panelRef,
+          className: "fixed bottom-0 left-0 right-0 z-50 bg-bg-secondary rounded-t-2xl border-t border-border-subtle shadow-xl focus:outline-none",
           role: "dialog",
           "aria-modal": "true",
+          "aria-labelledby": titleId,
           children: [
-            /* @__PURE__ */ jsx(SheetHeader, { onClose: () => setOpen(false) }),
+            /* @__PURE__ */ jsx(SheetHeader, { titleId, onClose: () => setOpen(false) }),
             /* @__PURE__ */ jsx("div", { className: "px-4 pb-6 max-h-[50dvh] overflow-y-auto", children: /* @__PURE__ */ jsx(MoveHistory, { scrollable: false }) })
           ]
         },
@@ -1627,17 +1873,17 @@ function MobileHistory({ className }) {
     ] }) })
   ] });
 }
-function SheetHeader({ onClose }) {
+function SheetHeader({ titleId, onClose }) {
   const t = useGameT();
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 pt-4 pb-3 border-b border-border-subtle", children: [
-    /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] tracking-[0.5px] uppercase text-fg-muted", children: t("history.title") }),
+    /* @__PURE__ */ jsx("span", { id: titleId, className: "font-mono text-[10px] tracking-[0.5px] uppercase text-fg-muted", children: t("history.title") }),
     /* @__PURE__ */ jsx(
       "button",
       {
         onClick: onClose,
         className: "w-8 h-8 flex items-center justify-center rounded-full bg-bg-surface hover:bg-bg-surface-elevated text-fg-muted hover:text-fg-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-green",
-        "aria-label": "Close",
-        children: /* @__PURE__ */ jsx(X, { size: 14 })
+        "aria-label": t("history.close"),
+        children: /* @__PURE__ */ jsx(X, { size: 14, "aria-hidden": "true" })
       }
     )
   ] });
@@ -1690,6 +1936,35 @@ function HistoryChip({ lastMove, onClick, className }) {
   );
 }
 
-export { ActionPoints, Avatar, AvatarFallback, AvatarImage, BallHolderChip, Button, ConfirmDialog, EventToast, Football, GAME_I18N_KEYS, GOAL_AREA_SHADE_CLASS, GameBoard, GameControls, GameI18nProvider, GamePiece, GrassOverlay, KeyboardShortcutsList, MiniScoreboard, MobileHistory, MoveHistory, PITCH_COLS, PITCH_ROWS, PitchMarkings, PitchSurface, Scoreboard, SelectedPieceDetail, StaticGameBoard, TurnBanner, cn, isGoalAreaSquare, pitchSquareClass, useGameT };
+// src/tokens.ts
+var REQUIRED_TOKENS = [
+  // Surfaces
+  "--bg-primary",
+  "--bg-secondary",
+  "--bg-surface",
+  "--bg-surface-elevated",
+  // Text
+  "--fg-primary",
+  "--fg-secondary",
+  "--fg-muted",
+  // Accent (the primary CTA rests on the dark step — see Button)
+  "--accent-green",
+  "--accent-green-light",
+  "--accent-green-dark",
+  // Borders
+  "--border-subtle",
+  // Semantic
+  "--danger",
+  "--warning",
+  // Board
+  "--field-green-1",
+  "--field-green-2",
+  "--field-frame",
+  "--move-highlight",
+  "--pass-highlight",
+  "--last-move-highlight"
+];
+
+export { ActionPoints, Avatar, AvatarFallback, AvatarImage, BallHolderChip, Button, ConfirmDialog, EventToast, Football, GAME_I18N_KEYS, GOAL_AREA_SHADE_CLASS, GameBoard, GameControls, GameI18nProvider, GamePiece, GrassOverlay, KeyboardShortcutsList, MiniScoreboard, MobileHistory, MoveHistory, PITCH_COLS, PITCH_ROWS, PitchMarkings, PitchSurface, PlayerIdentity, REQUIRED_TOKENS, Scoreboard, SelectedPieceDetail, StaticGameBoard, TurnBanner, cn, isGoalAreaSquare, pitchSquareClass, useDialogA11y, useGameT };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map