@dreamboard-games/sdk 0.4.0-alpha.5 → 0.4.0-alpha.7

package/dist/{chunk-E3X552YM.js → chunk-2TRZSZGD.js}

@@ -6,13 +6,14 @@ import {
 // src/ui/hooks/usePanZoom.ts
 import { useState, useCallback, useEffect, useMemo } from "react";
 import { useGesture } from "@use-gesture/react";
+var DEFAULT_INITIAL_PAN = { x: 0, y: 0 };
 function usePanZoom(options = {}) {
   const {
     enabled = true,
     initialZoom = 1,
     minZoom = 0.5,
     maxZoom = 3,
-    initialPan = { x: 0, y: 0 },
+    initialPan = DEFAULT_INITIAL_PAN,
     mode = "viewbox",
     wheelSensitivity = 2e-3,
     onTransformChange
@@ -29,7 +30,9 @@ function usePanZoom(options = {}) {
     (newZoom, newPan) => {
       const clampedZoom = clampZoom(newZoom);
       setZoomState(clampedZoom);
-      setPanState(newPan);
+      setPanState(
+        (current) => current.x === newPan.x && current.y === newPan.y ? current : newPan
+      );
       onTransformChange?.({ zoom: clampedZoom, pan: newPan });
     },
     [clampZoom, onTransformChange]
@@ -89,10 +92,10 @@ function usePanZoom(options = {}) {
   );
   const resetTransform = useCallback(() => {
     updateTransform(initialZoom, initialPan);
-  }, [initialZoom, initialPan, updateTransform]);
+  }, [initialZoom, initialPan.x, initialPan.y, updateTransform]);
   useEffect(() => {
     updateTransform(initialZoom, initialPan);
-  }, [initialZoom, initialPan, updateTransform]);
+  }, [initialZoom, initialPan.x, initialPan.y, updateTransform]);
   const setZoom = useCallback(
     (newZoom) => {
       updateTransform(clampZoom(newZoom), pan);
@@ -7446,7 +7449,7 @@ function DiceRollDialog({
   const displaySum = sumValues(displayValues);
   const title = action.title ?? "Roll dice";
   const description = action.description ?? "Roll to resolve the current turn.";
-  const resultLabel = action.resultLabel ?? "Roll result";
+  const resultLabel2 = action.resultLabel ?? "Roll result";
   const rollLabel = action.rollLabel ?? "Roll dice";
   const disabled = action.available === false || phase === "rolling";
   const canClose = true;
@@ -7488,7 +7491,7 @@ function DiceRollDialog({
               gap: theme.space[4]
             },
             children: [
-              /* @__PURE__ */ jsx34(RollResult, { label: resultLabel, sum: displaySum, phase }),
+              /* @__PURE__ */ jsx34(RollResult, { label: resultLabel2, sum: displaySum, phase }),
               /* @__PURE__ */ jsx34(
                 DiceRow,
                 {
@@ -7997,21 +8000,351 @@ function StatusIndicator({
   );
 }
 
-// src/ui/components/GameEndDisplay.tsx
+// src/ui/components/Guidance.tsx
+import {
+  AlertCircle as AlertCircle2,
+  CheckCircle2,
+  Circle,
+  HelpCircle,
+  Info as Info2
+} from "lucide-react";
+import { useId as useId6 } from "react";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+function GuidancePanel({
+  phase,
+  actions = [],
+  className,
+  style
+}) {
+  const theme = useTheme();
+  const titleId = useId6();
+  const summaryId = useId6();
+  const hasSummary = phase.summary !== void 0 && phase.summary !== null;
+  const hasObjective = phase.objective !== void 0 && phase.objective !== null;
+  const describedBy = [
+    hasSummary || hasObjective ? summaryId : void 0
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsxs19(
+    "section",
+    {
+      className,
+      "aria-labelledby": titleId,
+      "aria-describedby": describedBy.join(" ") || void 0,
+      style: {
+        ...guidanceContainerStyle(theme),
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs19("header", { style: headerStyle(theme), children: [
+          /* @__PURE__ */ jsx36(
+            Info2,
+            {
+              size: 20,
+              strokeWidth: 2.5,
+              "aria-hidden": "true",
+              style: { color: theme.semantic.intent.info.solid, flex: "0 0 auto" }
+            }
+          ),
+          /* @__PURE__ */ jsxs19("div", { style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx36("h2", { id: titleId, style: titleStyle(theme), children: phase.label }),
+            /* @__PURE__ */ jsxs19("div", { id: summaryId, style: bodyStackStyle(theme), children: [
+              hasSummary ? /* @__PURE__ */ jsx36("p", { style: bodyTextStyle(theme), children: phase.summary }) : null,
+              hasObjective ? /* @__PURE__ */ jsx36("p", { style: objectiveTextStyle(theme), children: phase.objective }) : null
+            ] })
+          ] })
+        ] }),
+        actions.length > 0 ? /* @__PURE__ */ jsx36(
+          "div",
+          {
+            "aria-label": "Available action guidance",
+            style: {
+              display: "grid",
+              gap: theme.space[2]
+            },
+            children: actions.map((action, index) => /* @__PURE__ */ jsx36(
+              ActionHelp,
+              {
+                label: action.label,
+                help: action.help,
+                unavailableReason: action.unavailableReason
+              },
+              `${String(action.label)}:${index}`
+            ))
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function SetupChecklist({
+  guidance,
+  completedStepIds = [],
+  className,
+  style
+}) {
+  const theme = useTheme();
+  const titleId = useId6();
+  const completed = new Set(completedStepIds);
+  if (!guidance) return null;
+  return /* @__PURE__ */ jsxs19(
+    "section",
+    {
+      className,
+      "aria-labelledby": titleId,
+      style: {
+        ...guidanceContainerStyle(theme),
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs19("header", { style: headerStyle(theme), children: [
+          /* @__PURE__ */ jsx36(
+            CheckCircle2,
+            {
+              size: 20,
+              strokeWidth: 2.5,
+              "aria-hidden": "true",
+              style: {
+                color: theme.semantic.intent.success.solid,
+                flex: "0 0 auto"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs19("div", { style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx36("h2", { id: titleId, style: titleStyle(theme), children: guidance.name }),
+            guidance.summary ? /* @__PURE__ */ jsx36("p", { style: bodyTextStyle(theme), children: guidance.summary }) : null
+          ] })
+        ] }),
+        guidance.steps.length > 0 ? /* @__PURE__ */ jsx36(
+          "ol",
+          {
+            style: {
+              display: "grid",
+              gap: theme.space[2],
+              margin: 0,
+              padding: 0,
+              listStyle: "none"
+            },
+            children: guidance.steps.map((step) => {
+              const isComplete = completed.has(step.id);
+              return /* @__PURE__ */ jsxs19(
+                "li",
+                {
+                  "aria-current": isComplete ? void 0 : "step",
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: "24px minmax(0, 1fr)",
+                    gap: theme.space[3],
+                    alignItems: "start",
+                    minWidth: 0
+                  },
+                  children: [
+                    isComplete ? /* @__PURE__ */ jsx36(
+                      CheckCircle2,
+                      {
+                        size: 20,
+                        strokeWidth: 2.5,
+                        "aria-label": "Complete",
+                        style: { color: theme.semantic.intent.success.solid }
+                      }
+                    ) : /* @__PURE__ */ jsx36(
+                      Circle,
+                      {
+                        size: 20,
+                        strokeWidth: 2.5,
+                        "aria-label": "Not complete",
+                        style: { color: theme.semantic.text.muted }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs19("div", { style: bodyStackStyle(theme), children: [
+                      /* @__PURE__ */ jsx36("span", { style: stepTitleStyle(theme), children: step.label }),
+                      step.description ? /* @__PURE__ */ jsx36("span", { style: bodyTextStyle(theme), children: step.description }) : null
+                    ] })
+                  ]
+                },
+                step.id
+              );
+            })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ActionHelp({
+  label,
+  help,
+  unavailableReason,
+  className,
+  style
+}) {
+  const theme = useTheme();
+  const helpId = useId6();
+  const reasonId = useId6();
+  const hasHelp = help !== void 0 && help !== null;
+  const hasReason = unavailableReason !== void 0 && unavailableReason !== null;
+  const describedBy = [
+    hasHelp ? helpId : void 0,
+    hasReason ? reasonId : void 0
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsxs19(
+    "article",
+    {
+      className,
+      "aria-describedby": describedBy.join(" ") || void 0,
+      style: {
+        display: "grid",
+        gap: theme.space[2],
+        minWidth: 0,
+        padding: theme.space[3],
+        borderRadius: theme.radius.md,
+        border: `1px solid ${theme.semantic.border.subtle}`,
+        background: theme.semantic.surface.inset,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs19(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: theme.space[2],
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx36(
+                HelpCircle,
+                {
+                  size: 18,
+                  strokeWidth: 2.5,
+                  "aria-hidden": "true",
+                  style: {
+                    color: theme.semantic.intent.info.solid,
+                    flex: "0 0 auto"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx36("h3", { style: actionTitleStyle(theme), children: label })
+            ]
+          }
+        ),
+        hasHelp ? /* @__PURE__ */ jsx36("p", { id: helpId, style: bodyTextStyle(theme), children: help }) : null,
+        hasReason ? /* @__PURE__ */ jsxs19(
+          "div",
+          {
+            id: reasonId,
+            role: "status",
+            style: {
+              ...chipStyle(theme, { variant: "warning" }),
+              justifySelf: "start",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: theme.space[1],
+              maxWidth: "100%",
+              whiteSpace: "normal"
+            },
+            children: [
+              /* @__PURE__ */ jsx36(AlertCircle2, { size: 14, strokeWidth: 2.5, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx36("span", { children: unavailableReason })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function guidanceContainerStyle(theme) {
+  return {
+    display: "grid",
+    gap: theme.space[4],
+    minWidth: 0,
+    color: theme.semantic.text.primary,
+    fontFamily: theme.typography.fontFamily.body
+  };
+}
+function headerStyle(theme) {
+  return {
+    display: "grid",
+    gridTemplateColumns: "24px minmax(0, 1fr)",
+    gap: theme.space[3],
+    alignItems: "start",
+    minWidth: 0
+  };
+}
+function bodyStackStyle(theme) {
+  return {
+    display: "grid",
+    gap: theme.space[1],
+    minWidth: 0
+  };
+}
+function titleStyle(theme) {
+  return {
+    margin: 0,
+    fontFamily: theme.typography.fontFamily.display,
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.bold,
+    lineHeight: theme.typography.lineHeight.tight,
+    color: theme.semantic.text.primary
+  };
+}
+function actionTitleStyle(theme) {
+  return {
+    margin: 0,
+    minWidth: 0,
+    overflowWrap: "anywhere",
+    fontFamily: theme.typography.fontFamily.body,
+    fontSize: theme.typography.fontSize.md,
+    fontWeight: theme.typography.fontWeight.bold,
+    lineHeight: theme.typography.lineHeight.tight,
+    color: theme.semantic.text.primary
+  };
+}
+function stepTitleStyle(theme) {
+  return {
+    minWidth: 0,
+    overflowWrap: "anywhere",
+    fontFamily: theme.typography.fontFamily.body,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.bold,
+    lineHeight: theme.typography.lineHeight.tight,
+    color: theme.semantic.text.primary
+  };
+}
+function bodyTextStyle(theme) {
+  return {
+    margin: 0,
+    minWidth: 0,
+    overflowWrap: "anywhere",
+    color: theme.semantic.text.muted,
+    fontSize: theme.typography.fontSize.sm,
+    lineHeight: theme.typography.lineHeight.normal
+  };
+}
+function objectiveTextStyle(theme) {
+  return {
+    ...bodyTextStyle(theme),
+    color: theme.semantic.text.primary,
+    fontWeight: theme.typography.fontWeight.medium
+  };
+}
+
+// src/ui/components/OutcomeDialog.tsx
 import { motion as motion9 } from "framer-motion";
-import { Trophy, Home, Crown, Medal } from "lucide-react";
+import { Home, Medal, Trophy } from "lucide-react";
 import { useEffect as useEffect13, useState as useState17 } from "react";
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
-function rankIntent(rank) {
-  if (rank === 1) return "warning";
-  if (rank === 2) return "secondary";
-  if (rank === 3) return "info";
+import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+function rankIntent(row) {
+  if (row.result === "win") return "warning";
+  if (row.result === "draw") return "info";
+  if (row.result === "eliminated") return "danger";
+  if (row.rank === 1) return "secondary";
   return "secondary";
 }
-function RankIcon({ rank, theme }) {
-  const intent = intentForVariant(theme, rankIntent(rank));
-  if (rank === 1) {
-    return /* @__PURE__ */ jsx36(
+function RankIcon({ row, theme }) {
+  const intent = intentForVariant(theme, rankIntent(row));
+  if (row.result === "win") {
+    return /* @__PURE__ */ jsx37(
       Trophy,
       {
         width: 20,
@@ -8022,8 +8355,8 @@ function RankIcon({ rank, theme }) {
       }
     );
   }
-  if (rank === 2 || rank === 3) {
-    return /* @__PURE__ */ jsx36(
+  if (row.rank <= 3) {
+    return /* @__PURE__ */ jsx37(
       Medal,
       {
         width: 20,
@@ -8034,7 +8367,7 @@ function RankIcon({ rank, theme }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "span",
     {
       style: {
@@ -8046,313 +8379,375 @@ function RankIcon({ rank, theme }) {
       },
       children: [
         "#",
-        rank
+        row.rank
       ]
     }
   );
 }
-function GameEndDisplay({
-  isGameOver,
-  scores,
-  winnerMessage,
-  showDetails = false,
-  onReturnToLobby,
-  className
+function resultLabel(result) {
+  if (result === "win") return "Win";
+  if (result === "draw") return "Draw";
+  if (result === "loss") return "Loss";
+  return "Eliminated";
+}
+function outcomeTitle(outcome) {
+  const rows = outcome.standings;
+  const rankOneRows = rows.filter((row) => row.rank === 1);
+  if (rankOneRows.length > 1 && rankOneRows.every((row) => row.result === "draw")) {
+    return "Draw";
+  }
+  if (rows.length > 0 && rows.every((row) => row.result === "win")) {
+    return "Team Victory";
+  }
+  if (rankOneRows.length === 1 && rankOneRows[0]?.result === "win") {
+    return "Game Complete";
+  }
+  return "Game Complete";
+}
+function DetailsList({
+  label,
+  entries
 }) {
   const theme = useTheme();
-  const reducedMotion = theme.motion.reducedMotion === "true";
-  const [isOpen, setIsOpen] = useState17(isGameOver);
-  useEffect13(() => {
-    setIsOpen(isGameOver);
-  }, [isGameOver]);
-  if (!isGameOver) return null;
-  const winner = scores.find((s) => s.isWinner) || scores[0];
-  const sortedScores = [...scores].sort((a, b) => b.score - a.score);
-  const winningIntent = theme.semantic.intent.warning;
-  const title = `${winner?.name ?? "Game"} Wins!`;
-  return /* @__PURE__ */ jsx36(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs19(
-    DialogContent,
-    {
-      className: `border-0 p-6 text-center shadow-none sm:max-w-lg ${className ?? ""}`,
-      overlayClassName: "bg-black/50 backdrop-blur-md",
-      "aria-describedby": void 0,
-      style: {
-        ...surfaceStyle(theme, { tone: "sheet", radius: "hud" }),
-        width: "100%",
-        maxWidth: 480,
-        padding: `${theme.space[8]} ${theme.space[6]}`,
-        textAlign: "center",
-        boxShadow: theme.elevation.overlay,
-        overflow: "hidden",
-        backgroundImage: `radial-gradient(circle at top, ${winningIntent.soft} 0%, ${theme.semantic.surface.sheet} 60%)`,
-        fontFamily: theme.typography.fontFamily.body
-      },
-      children: [
-        /* @__PURE__ */ jsx36(DialogTitle, { className: "sr-only", children: title }),
-        /* @__PURE__ */ jsx36(
-          motion9.div,
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsxs20("div", { children: [
+    /* @__PURE__ */ jsx37(
+      "div",
+      {
+        style: {
+          marginBottom: theme.space[1],
+          color: theme.semantic.text.muted,
+          fontSize: theme.typography.fontSize.xs,
+          fontWeight: theme.typography.fontWeight.bold,
+          textTransform: "uppercase"
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx37(
+      "dl",
+      {
+        style: {
+          display: "grid",
+          gap: theme.space[1],
+          margin: 0
+        },
+        children: entries.map((entry) => /* @__PURE__ */ jsxs20(
+          "div",
           {
-            initial: reducedMotion ? { scale: 1 } : { scale: 0.95, rotate: -180, opacity: 0 },
-            animate: reducedMotion ? { scale: 1 } : { scale: 1, rotate: 0, opacity: 1 },
-            transition: {
-              type: "spring",
-              stiffness: 200,
-              damping: 15,
-              delay: reducedMotion ? 0 : 0.2
-            },
             style: {
-              marginBottom: theme.space[6],
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: 96,
-              height: 96,
-              borderRadius: theme.radius.pill,
-              background: winningIntent.soft,
-              border: `3px solid ${winningIntent.border}`,
-              boxShadow: theme.elevation.lifted
+              display: "flex",
+              justifyContent: "space-between",
+              gap: theme.space[3],
+              color: theme.semantic.text.muted,
+              fontSize: theme.typography.fontSize.sm
             },
-            children: /* @__PURE__ */ jsx36(
-              Trophy,
-              {
-                width: 48,
-                height: 48,
-                strokeWidth: 2.5,
-                "aria-hidden": "true",
-                style: { color: winningIntent.solid }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs19(
-          motion9.div,
-          {
-            initial: reducedMotion ? { opacity: 0 } : { opacity: 0, y: 10 },
-            animate: reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 },
-            transition: { delay: reducedMotion ? 0 : 0.4 },
             children: [
-              /* @__PURE__ */ jsx36(
-                "h2",
+              /* @__PURE__ */ jsx37("dt", { children: entry.label }),
+              /* @__PURE__ */ jsx37(
+                "dd",
                 {
-                  "aria-hidden": "true",
                   style: {
                     margin: 0,
-                    fontFamily: theme.typography.fontFamily.display,
-                    fontSize: theme.typography.fontSize["3xl"],
-                    fontWeight: theme.typography.fontWeight.bold,
-                    color: theme.semantic.text.primary,
-                    marginBottom: theme.space[2],
-                    lineHeight: theme.typography.lineHeight.tight
-                  },
-                  children: title
-                }
-              ),
-              winnerMessage && /* @__PURE__ */ jsx36(
-                "p",
-                {
-                  style: {
-                    margin: 0,
-                    marginBottom: theme.space[6],
-                    display: "inline-block",
-                    ...chipStyle(theme, { variant: "warning", size: "md" }),
-                    fontSize: theme.typography.fontSize.sm
+                    fontFamily: theme.typography.fontFamily.tabular,
+                    fontWeight: theme.typography.fontWeight.bold
                   },
-                  children: winnerMessage
+                  children: entry.value
                 }
               )
             ]
-          }
-        ),
-        /* @__PURE__ */ jsx36(
-          motion9.div,
+          },
+          entry.id
+        ))
+      }
+    )
+  ] });
+}
+function StandingsTable({
+  rows,
+  playerName,
+  provisional = false,
+  className
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx37(
+    "div",
+    {
+      className,
+      role: "table",
+      "aria-label": provisional ? "Provisional standings" : "Final standings",
+      style: {
+        display: "grid",
+        gap: theme.space[3]
+      },
+      children: rows.map((row) => {
+        const intent = intentForVariant(theme, rankIntent(row));
+        const emphasized = row.result === "win" || row.result === "draw";
+        return /* @__PURE__ */ jsxs20(
+          "div",
           {
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            transition: { delay: reducedMotion ? 0 : 0.6 },
+            role: "row",
             style: {
-              display: "flex",
-              flexDirection: "column",
+              display: "grid",
+              gridTemplateColumns: "minmax(0, 1fr) auto",
               gap: theme.space[3],
-              marginBottom: theme.space[8],
-              textAlign: "left"
+              alignItems: "start",
+              padding: theme.space[3],
+              background: emphasized ? intent.soft : theme.semantic.surface.card,
+              border: `1px solid ${emphasized ? intent.border : theme.semantic.border.subtle}`,
+              borderRadius: theme.radius.lg,
+              boxShadow: emphasized ? theme.elevation.hover : theme.elevation.rest
             },
-            role: "list",
-            "aria-label": "Final scores",
-            children: sortedScores.map((player, index) => {
-              const rank = index + 1;
-              const intent = intentForVariant(theme, rankIntent(rank));
-              const isWinner = player.isWinner ?? rank === 1;
-              return /* @__PURE__ */ jsxs19(
-                motion9.div,
+            children: [
+              /* @__PURE__ */ jsxs20(
+                "div",
                 {
-                  initial: reducedMotion ? { opacity: 0 } : { opacity: 0, x: -20 },
-                  animate: reducedMotion ? { opacity: 1 } : { opacity: 1, x: 0 },
-                  transition: {
-                    delay: reducedMotion ? 0 : 0.6 + index * 0.1
-                  },
                   style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    padding: theme.space[3],
-                    background: isWinner ? intent.soft : theme.semantic.surface.card,
-                    border: `1px solid ${isWinner ? intent.border : theme.semantic.border.subtle}`,
-                    borderRadius: theme.radius.lg,
-                    boxShadow: isWinner ? theme.elevation.hover : theme.elevation.rest
+                    display: "grid",
+                    gap: theme.space[2],
+                    minWidth: 0
                   },
-                  role: "listitem",
                   children: [
-                    /* @__PURE__ */ jsxs19(
+                    /* @__PURE__ */ jsxs20(
                       "div",
                       {
                         style: {
                           display: "flex",
                           alignItems: "center",
-                          gap: theme.space[3]
+                          gap: theme.space[3],
+                          minWidth: 0
                         },
                         children: [
-                          /* @__PURE__ */ jsx36(RankIcon, { rank, theme }),
-                          /* @__PURE__ */ jsx36(
+                          /* @__PURE__ */ jsx37(RankIcon, { row, theme }),
+                          /* @__PURE__ */ jsx37(
                             "span",
                             {
                               style: {
+                                minWidth: 0,
+                                overflowWrap: "anywhere",
+                                color: emphasized ? intent.onSoft : theme.semantic.text.primary,
                                 fontFamily: theme.typography.fontFamily.body,
                                 fontSize: theme.typography.fontSize.lg,
-                                fontWeight: theme.typography.fontWeight.bold,
-                                color: isWinner ? intent.onSoft : theme.semantic.text.primary
+                                fontWeight: theme.typography.fontWeight.bold
                               },
-                              children: player.name
+                              children: playerName(row.playerId)
                             }
                           ),
-                          isWinner && /* @__PURE__ */ jsx36(
-                            Crown,
+                          /* @__PURE__ */ jsx37(
+                            "span",
                             {
-                              width: 20,
-                              height: 20,
-                              strokeWidth: 3,
-                              "aria-label": "Winner",
-                              style: { color: intent.solid }
+                              style: {
+                                ...chipStyle(theme, {
+                                  variant: rankIntent(row),
+                                  size: "sm"
+                                }),
+                                flexShrink: 0
+                              },
+                              children: resultLabel(row.result)
                             }
                           )
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
+                      DetailsList,
+                      {
+                        label: "Breakdown",
+                        entries: row.scoreBreakdown ?? []
+                      }
+                    ),
+                    /* @__PURE__ */ jsx37(DetailsList, { label: "Tie-breaks", entries: row.tieBreaks ?? [] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs20(
+                "div",
+                {
+                  role: "cell",
+                  "aria-label": `Rank ${row.rank}${row.score === void 0 ? "" : `, score ${row.score}`}`,
+                  style: {
+                    display: "grid",
+                    gap: theme.space[1],
+                    justifyItems: "end",
+                    flexShrink: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs20(
                       "span",
                       {
                         style: {
-                          fontFamily: theme.typography.fontFamily.tabular,
-                          fontSize: theme.typography.fontSize["2xl"],
+                          color: theme.semantic.text.muted,
+                          fontSize: theme.typography.fontSize.xs,
                           fontWeight: theme.typography.fontWeight.bold,
-                          color: isWinner ? intent.onSoft : theme.semantic.text.primary,
+                          textTransform: "uppercase"
+                        },
+                        children: [
+                          "Rank ",
+                          row.rank
+                        ]
+                      }
+                    ),
+                    row.score !== void 0 && /* @__PURE__ */ jsx37(
+                      "span",
+                      {
+                        style: {
                           paddingInline: theme.space[2],
                           paddingBlock: theme.space[0.5],
                           background: theme.semantic.surface.inset,
+                          border: `1px solid ${theme.semantic.border.subtle}`,
                           borderRadius: theme.radius.md,
-                          border: `1px solid ${theme.semantic.border.subtle}`
+                          color: theme.semantic.text.primary,
+                          fontFamily: theme.typography.fontFamily.tabular,
+                          fontSize: theme.typography.fontSize["2xl"],
+                          fontWeight: theme.typography.fontWeight.bold
                         },
-                        children: player.score
+                        children: row.score
                       }
                     )
                   ]
-                },
-                player.playerId
-              );
-            })
-          }
-        ),
-        showDetails && winner?.details && /* @__PURE__ */ jsxs19(
+                }
+              )
+            ]
+          },
+          row.playerId
+        );
+      })
+    }
+  );
+}
+function OutcomeDialog({
+  outcome,
+  playerName,
+  onReturnToLobby,
+  className
+}) {
+  const theme = useTheme();
+  const reducedMotion = theme.motion.reducedMotion === "true";
+  const [isOpen, setIsOpen] = useState17(Boolean(outcome));
+  useEffect13(() => {
+    setIsOpen(Boolean(outcome));
+  }, [outcome]);
+  if (!outcome) return null;
+  const title = outcomeTitle(outcome);
+  const message = outcome.reason.message ?? outcome.reason.code;
+  const titleIntent = intentForVariant(
+    theme,
+    outcome.standings.some((row) => row.result === "win") ? "warning" : "info"
+  );
+  return /* @__PURE__ */ jsx37(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs20(
+    DialogContent,
+    {
+      className: `border-0 p-6 text-center shadow-none sm:max-w-lg ${className ?? ""}`,
+      overlayClassName: "bg-black/50 backdrop-blur-md",
+      "aria-describedby": void 0,
+      style: {
+        ...surfaceStyle(theme, { tone: "sheet", radius: "hud" }),
+        width: "100%",
+        maxWidth: 560,
+        padding: `${theme.space[8]} ${theme.space[6]}`,
+        textAlign: "center",
+        boxShadow: theme.elevation.overlay,
+        overflow: "hidden",
+        backgroundImage: `radial-gradient(circle at top, ${titleIntent.soft} 0%, ${theme.semantic.surface.sheet} 60%)`,
+        fontFamily: theme.typography.fontFamily.body
+      },
+      children: [
+        /* @__PURE__ */ jsx37(DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsx37(
           motion9.div,
           {
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            transition: { delay: reducedMotion ? 0 : 0.8 },
+            initial: reducedMotion ? { scale: 1 } : { scale: 0.95, rotate: -180, opacity: 0 },
+            animate: reducedMotion ? { scale: 1 } : { scale: 1, rotate: 0, opacity: 1 },
+            transition: {
+              type: "spring",
+              stiffness: 200,
+              damping: 15,
+              delay: reducedMotion ? 0 : 0.2
+            },
             style: {
-              marginBottom: theme.space[8],
-              padding: theme.space[4],
-              background: theme.semantic.surface.inset,
-              border: `1px dashed ${theme.semantic.border.default}`,
-              borderRadius: theme.radius.lg,
-              textAlign: "left"
+              marginBottom: theme.space[6],
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 96,
+              height: 96,
+              borderRadius: theme.radius.pill,
+              background: titleIntent.soft,
+              border: `3px solid ${titleIntent.border}`,
+              boxShadow: theme.elevation.lifted
             },
+            children: /* @__PURE__ */ jsx37(
+              Trophy,
+              {
+                width: 48,
+                height: 48,
+                strokeWidth: 2.5,
+                "aria-hidden": "true",
+                style: { color: titleIntent.solid }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs20(
+          motion9.div,
+          {
+            initial: reducedMotion ? { opacity: 0 } : { opacity: 0, y: 10 },
+            animate: reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 },
+            transition: { delay: reducedMotion ? 0 : 0.4 },
             children: [
-              /* @__PURE__ */ jsxs19(
-                "h3",
+              /* @__PURE__ */ jsx37(
+                "h2",
                 {
+                  "aria-hidden": "true",
                   style: {
                     margin: 0,
-                    marginBottom: theme.space[3],
+                    marginBottom: theme.space[2],
+                    color: theme.semantic.text.primary,
                     fontFamily: theme.typography.fontFamily.display,
-                    fontSize: theme.typography.fontSize.md,
+                    fontSize: theme.typography.fontSize["3xl"],
                     fontWeight: theme.typography.fontWeight.bold,
-                    color: theme.semantic.text.primary,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: theme.space[2]
+                    lineHeight: theme.typography.lineHeight.tight
                   },
-                  children: [
-                    /* @__PURE__ */ jsx36(
-                      "span",
-                      {
-                        style: {
-                          width: 8,
-                          height: 8,
-                          background: theme.semantic.intent.primary.solid,
-                          borderRadius: theme.radius.pill,
-                          display: "inline-block"
-                        }
-                      }
-                    ),
-                    "Score Breakdown"
-                  ]
+                  children: title
                 }
               ),
-              /* @__PURE__ */ jsx36(
-                "div",
+              /* @__PURE__ */ jsx37(
+                "p",
                 {
                   style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: theme.space[2]
+                    margin: 0,
+                    marginBottom: theme.space[6],
+                    display: "inline-block",
+                    ...chipStyle(theme, { variant: "secondary", size: "md" }),
+                    fontSize: theme.typography.fontSize.sm
                   },
-                  children: Object.entries(winner.details).map(([key, value]) => /* @__PURE__ */ jsxs19(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        fontSize: theme.typography.fontSize.md,
-                        color: theme.semantic.text.primary
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx36("span", { style: { textTransform: "capitalize" }, children: key.replace(/([A-Z])/g, " $1") }),
-                        /* @__PURE__ */ jsx36(
-                          "span",
-                          {
-                            style: {
-                              fontFamily: theme.typography.fontFamily.tabular,
-                              fontWeight: theme.typography.fontWeight.bold
-                            },
-                            children: value
-                          }
-                        )
-                      ]
-                    },
-                    key
-                  ))
+                  children: message
                 }
               )
             ]
           }
         ),
-        onReturnToLobby && /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
+          motion9.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            transition: { delay: reducedMotion ? 0 : 0.6 },
+            style: {
+              marginBottom: onReturnToLobby ? theme.space[8] : 0,
+              textAlign: "left"
+            },
+            children: /* @__PURE__ */ jsx37(StandingsTable, { rows: outcome.standings, playerName })
+          }
+        ),
+        onReturnToLobby && /* @__PURE__ */ jsx37(
           motion9.div,
           {
             initial: reducedMotion ? { opacity: 0 } : { opacity: 0, y: 10 },
             animate: reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 },
             transition: { delay: reducedMotion ? 0 : 1 },
             style: { display: "flex", justifyContent: "center" },
-            children: /* @__PURE__ */ jsxs19(
+            children: /* @__PURE__ */ jsxs20(
               ThemedButton,
               {
                 type: "button",
@@ -8363,7 +8758,7 @@ function GameEndDisplay({
                   gap: theme.space[2]
                 },
                 children: [
-                  /* @__PURE__ */ jsx36(Home, { size: 20, strokeWidth: 3, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx37(Home, { size: 20, strokeWidth: 3, "aria-hidden": "true" }),
                   "Return to Lobby"
                 ]
               }
@@ -8375,6 +8770,240 @@ function GameEndDisplay({
   ) });
 }
 
+// src/ui/components/GameEventLog.tsx
+import { Activity, ChevronDown as ChevronDown2 } from "lucide-react";
+import { useId as useId7 } from "react";
+import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
+function formatDetailValue(value) {
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return String(value);
+}
+function eventKey(event) {
+  return `${event.version}:${event.index}`;
+}
+function SystemActionSummary({
+  event,
+  className,
+  style
+}) {
+  const theme = useTheme();
+  const titleId = useId7();
+  const summaryId = useId7();
+  return /* @__PURE__ */ jsxs21(
+    "article",
+    {
+      className,
+      "aria-labelledby": titleId,
+      "aria-describedby": event.summary ? summaryId : void 0,
+      style: {
+        ...eventItemStyle(theme),
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx38(
+          Activity,
+          {
+            "aria-hidden": "true",
+            size: 18,
+            strokeWidth: 2.5,
+            style: {
+              color: theme.semantic.intent.info.solid,
+              flex: "0 0 auto",
+              marginTop: 2
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs21("div", { style: { display: "grid", gap: theme.space[2], minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs21("div", { style: { display: "grid", gap: theme.space[1] }, children: [
+            /* @__PURE__ */ jsx38("h3", { id: titleId, style: eventTitleStyle(theme), children: event.title }),
+            event.summary ? /* @__PURE__ */ jsx38("p", { id: summaryId, style: eventBodyStyle(theme), children: event.summary }) : null
+          ] }),
+          event.details && event.details.length > 0 ? /* @__PURE__ */ jsx38("dl", { style: detailGridStyle(theme), children: event.details.map((detail, index) => /* @__PURE__ */ jsxs21(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                gap: theme.space[3],
+                minWidth: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx38("dt", { style: detailLabelStyle(theme), children: detail.label }),
+                /* @__PURE__ */ jsx38("dd", { style: detailValueStyle(theme), children: formatDetailValue(detail.value) })
+              ]
+            },
+            `${detail.label}:${index}`
+          )) }) : null
+        ] })
+      ]
+    }
+  );
+}
+function GameEventLog({
+  events,
+  empty = "No automated actions yet.",
+  maxVisible,
+  className,
+  style
+}) {
+  const theme = useTheme();
+  const titleId = useId7();
+  const visibleEvents = maxVisible === void 0 ? events : events.slice(0, maxVisible);
+  const hiddenCount = Math.max(0, events.length - visibleEvents.length);
+  return /* @__PURE__ */ jsxs21(
+    "section",
+    {
+      className,
+      "aria-labelledby": titleId,
+      style: {
+        ...logContainerStyle(theme),
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs21("header", { style: logHeaderStyle(theme), children: [
+          /* @__PURE__ */ jsx38("h2", { id: titleId, style: logTitleStyle(theme), children: "Automated actions" }),
+          /* @__PURE__ */ jsx38("span", { style: logCountStyle(theme), children: events.length })
+        ] }),
+        visibleEvents.length === 0 ? /* @__PURE__ */ jsx38("p", { style: emptyStyle(theme), children: empty }) : /* @__PURE__ */ jsx38(
+          "ol",
+          {
+            "aria-live": "polite",
+            style: {
+              display: "grid",
+              gap: theme.space[2],
+              margin: 0,
+              padding: 0,
+              listStyle: "none"
+            },
+            children: visibleEvents.map((event) => /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(SystemActionSummary, { event }) }, eventKey(event)))
+          }
+        ),
+        hiddenCount > 0 ? /* @__PURE__ */ jsxs21("div", { style: moreStyle(theme), children: [
+          /* @__PURE__ */ jsx38(ChevronDown2, { "aria-hidden": "true", size: 16 }),
+          /* @__PURE__ */ jsxs21("span", { children: [
+            hiddenCount,
+            " earlier actions hidden"
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+function logContainerStyle(theme) {
+  return {
+    ...surfaceStyle(theme, { tone: "card" }),
+    display: "grid",
+    gap: theme.space[3],
+    padding: theme.space[4],
+    borderRadius: theme.radius.lg,
+    border: `1px solid ${theme.semantic.border.subtle}`,
+    minWidth: 0
+  };
+}
+function logHeaderStyle(theme) {
+  return {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: theme.space[3],
+    minWidth: 0
+  };
+}
+function logTitleStyle(theme) {
+  return {
+    margin: 0,
+    color: theme.semantic.text.primary,
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.bold
+  };
+}
+function logCountStyle(theme) {
+  return {
+    minWidth: 28,
+    height: 28,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.pill,
+    background: theme.semantic.intent.info.soft,
+    color: theme.semantic.intent.info.onSoft,
+    fontFamily: theme.typography.fontFamily.tabular,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.bold
+  };
+}
+function eventItemStyle(theme) {
+  return {
+    display: "grid",
+    gridTemplateColumns: "20px minmax(0, 1fr)",
+    gap: theme.space[3],
+    padding: theme.space[3],
+    borderRadius: theme.radius.md,
+    border: `1px solid ${theme.semantic.intent.info.border}`,
+    background: theme.semantic.intent.info.soft,
+    minWidth: 0
+  };
+}
+function eventTitleStyle(theme) {
+  return {
+    margin: 0,
+    color: theme.semantic.text.primary,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.bold
+  };
+}
+function eventBodyStyle(theme) {
+  return {
+    margin: 0,
+    color: theme.semantic.text.muted,
+    fontSize: theme.typography.fontSize.sm,
+    lineHeight: theme.typography.lineHeight.normal
+  };
+}
+function detailGridStyle(theme) {
+  return {
+    display: "grid",
+    gap: theme.space[1],
+    margin: 0,
+    paddingTop: theme.space[2],
+    borderTop: `1px solid ${theme.semantic.intent.info.border}`
+  };
+}
+function detailLabelStyle(theme) {
+  return {
+    color: theme.semantic.text.muted,
+    fontSize: theme.typography.fontSize.xs,
+    minWidth: 0
+  };
+}
+function detailValueStyle(theme) {
+  return {
+    margin: 0,
+    color: theme.semantic.text.primary,
+    fontFamily: theme.typography.fontFamily.tabular,
+    fontSize: theme.typography.fontSize.xs,
+    fontWeight: theme.typography.fontWeight.bold,
+    textAlign: "right",
+    minWidth: 0
+  };
+}
+function emptyStyle(theme) {
+  return {
+    margin: 0,
+    color: theme.semantic.text.muted,
+    fontSize: theme.typography.fontSize.sm
+  };
+}
+function moreStyle(theme) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.space[1],
+    color: theme.semantic.text.muted,
+    fontSize: theme.typography.fontSize.xs
+  };
+}
+
 // src/ui/components/board/NetworkGraph.tsx
 import { useMemo as useMemo11 } from "react";
 import { clsx as clsx16 } from "clsx";
@@ -8395,7 +9024,7 @@ function handleKeyboardActivation(event, onActivate, options) {
 }
 
 // src/ui/components/board/NetworkGraph.tsx
-import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 var EMPTY_NETWORK_EDGES = [];
 var EMPTY_NETWORK_PIECES = [];
 function DefaultNetworkNode({
@@ -8416,7 +9045,7 @@ function DefaultNetworkNode({
   const effectiveStroke = isSelected ? "#60a5fa" : isHighlighted ? "#4ade80" : stroke;
   const effectiveStrokeWidth = isSelected || isHighlighted ? 3 : strokeWidth;
   const displayLabel = label ? label.length > maxLabelLength ? label.slice(0, maxLabelLength - 1) + "\u2026" : label : void 0;
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs22(
     "g",
     {
       onClick,
@@ -8432,7 +9061,7 @@ function DefaultNetworkNode({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Network node" : void 0,
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx39(
           "circle",
           {
             r: radius,
@@ -8441,7 +9070,7 @@ function DefaultNetworkNode({
             strokeWidth: effectiveStrokeWidth
           }
         ),
-        displayLabel && /* @__PURE__ */ jsx37(
+        displayLabel && /* @__PURE__ */ jsx39(
           "text",
           {
             textAnchor: "middle",
@@ -8473,7 +9102,7 @@ function DefaultNetworkEdge({
   const effectiveWidth = isSelected || isHighlighted ? strokeWidth + 2 : strokeWidth;
   const midX = (from.x + to.x) / 2;
   const midY = (from.y + to.y) / 2;
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs22(
     "g",
     {
       onClick,
@@ -8489,7 +9118,7 @@ function DefaultNetworkEdge({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label !== void 0 ? `Network edge ${label}` : "Network edge" : void 0,
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx39(
           "line",
           {
             x1: from.x,
@@ -8501,8 +9130,8 @@ function DefaultNetworkEdge({
             strokeLinecap: "round"
           }
         ),
-        label !== void 0 && /* @__PURE__ */ jsxs20(Fragment5, { children: [
-          /* @__PURE__ */ jsx37(
+        label !== void 0 && /* @__PURE__ */ jsxs22(Fragment5, { children: [
+          /* @__PURE__ */ jsx39(
             "circle",
             {
               cx: midX,
@@ -8513,7 +9142,7 @@ function DefaultNetworkEdge({
               strokeWidth: 1
             }
           ),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx39(
             "text",
             {
               x: midX,
@@ -8538,7 +9167,7 @@ function DefaultNetworkPiece({
   onClick,
   className
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     "g",
     {
       onClick,
@@ -8547,7 +9176,7 @@ function DefaultNetworkPiece({
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Network piece" : void 0,
-      children: shape === "square" ? /* @__PURE__ */ jsx37(
+      children: shape === "square" ? /* @__PURE__ */ jsx39(
         "rect",
         {
           x: -radius,
@@ -8558,7 +9187,7 @@ function DefaultNetworkPiece({
           stroke: "white",
           strokeWidth: 1.5
         }
-      ) : /* @__PURE__ */ jsx37("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 1.5 })
+      ) : /* @__PURE__ */ jsx39("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 1.5 })
     }
   );
 }
@@ -8625,7 +9254,7 @@ function NetworkGraph({
   const viewBoxX = viewBoxParts[0] ?? 0;
   const viewBoxY = viewBoxParts[1] ?? 0;
   const viewBoxHeight = viewBoxParts[3] ?? 0;
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       width,
@@ -8642,11 +9271,11 @@ function NetworkGraph({
       role: "img",
       "aria-label": "Network graph",
       children: [
-        /* @__PURE__ */ jsx37("g", { className: "network-edges", role: "list", "aria-label": "Network connections", children: edges.map((edge) => {
+        /* @__PURE__ */ jsx39("g", { className: "network-edges", role: "list", "aria-label": "Network connections", children: edges.map((edge) => {
           const fromNode = nodeMap[edge.from];
           const toNode = nodeMap[edge.to];
           if (!fromNode || !toNode) return null;
-          return /* @__PURE__ */ jsx37(
+          return /* @__PURE__ */ jsx39(
             "g",
             {
               role: "listitem",
@@ -8656,9 +9285,9 @@ function NetworkGraph({
             edge.id
           );
         }) }),
-        /* @__PURE__ */ jsx37("g", { className: "network-nodes", role: "list", "aria-label": "Network nodes", children: nodes.map((node) => {
+        /* @__PURE__ */ jsx39("g", { className: "network-nodes", role: "list", "aria-label": "Network nodes", children: nodes.map((node) => {
           const nodePieces = piecesByNode[node.id] ?? [];
-          return /* @__PURE__ */ jsxs20(
+          return /* @__PURE__ */ jsxs22(
             "g",
             {
               transform: `translate(${node.position.x}, ${node.position.y})`,
@@ -8666,11 +9295,11 @@ function NetworkGraph({
               "aria-label": node.label ?? node.id,
               children: [
                 renderNode(node, nodePieces),
-                nodePieces.length > 0 && /* @__PURE__ */ jsx37("g", { className: "node-pieces", children: nodePieces.map((piece, i) => {
+                nodePieces.length > 0 && /* @__PURE__ */ jsx39("g", { className: "node-pieces", children: nodePieces.map((piece, i) => {
                   const angle = i / nodePieces.length * 2 * Math.PI - Math.PI / 2;
                   const pieceX = Math.cos(angle) * (nodeRadius + 8);
                   const pieceY = Math.sin(angle) * (nodeRadius + 8);
-                  return /* @__PURE__ */ jsx37(
+                  return /* @__PURE__ */ jsx39(
                     "g",
                     {
                       transform: `translate(${pieceX}, ${pieceY})`,
@@ -8684,12 +9313,12 @@ function NetworkGraph({
             node.id
           );
         }) }),
-        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs20(
+        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs22(
           "g",
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx39(
                 "rect",
                 {
                   x: 0,
@@ -8700,7 +9329,7 @@ function NetworkGraph({
                   fill: "rgba(0,0,0,0.6)"
                 }
               ),
-              /* @__PURE__ */ jsxs20("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [
+              /* @__PURE__ */ jsxs22("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [
                 Math.round(transform.zoom * 100),
                 "%"
               ] })
@@ -8715,7 +9344,7 @@ function NetworkGraph({
 // src/ui/components/board/ZoneMap.tsx
 import { useMemo as useMemo12 } from "react";
 import { clsx as clsx17 } from "clsx";
-import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 var HIGHLIGHT_COLORS = {
   valid: "rgba(34, 197, 94, 0.4)",
   // Green
@@ -8768,7 +9397,7 @@ function DefaultZone({
     switch (zone.shape.type) {
       case "polygon":
         if (!zone.shape.points) return null;
-        return /* @__PURE__ */ jsx38(
+        return /* @__PURE__ */ jsx40(
           "polygon",
           {
             points: zone.shape.points.map((p) => `${p.x},${p.y}`).join(" "),
@@ -8779,7 +9408,7 @@ function DefaultZone({
         );
       case "path":
         if (!zone.shape.path) return null;
-        return /* @__PURE__ */ jsx38(
+        return /* @__PURE__ */ jsx40(
           "path",
           {
             d: zone.shape.path,
@@ -8790,7 +9419,7 @@ function DefaultZone({
         );
       case "circle":
         if (!zone.shape.center) return null;
-        return /* @__PURE__ */ jsx38(
+        return /* @__PURE__ */ jsx40(
           "circle",
           {
             cx: zone.shape.center.x,
@@ -8805,7 +9434,7 @@ function DefaultZone({
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs23(
     "g",
     {
       onClick,
@@ -8818,7 +9447,7 @@ function DefaultZone({
       tabIndex: onClick ? 0 : void 0,
       children: [
         renderShape(),
-        showLabel && zone.shape?.center && /* @__PURE__ */ jsx38(
+        showLabel && zone.shape?.center && /* @__PURE__ */ jsx40(
           "text",
           {
             x: zone.shape.center.x,
@@ -8832,7 +9461,7 @@ function DefaultZone({
             children: zone.name
           }
         ),
-        showValue && zone.value !== void 0 && zone.shape?.center && /* @__PURE__ */ jsxs21(
+        showValue && zone.value !== void 0 && zone.shape?.center && /* @__PURE__ */ jsxs23(
           "text",
           {
             x: zone.shape.center.x,
@@ -8878,19 +9507,19 @@ function DefaultZonePieces({
   });
   const owners = Object.keys(piecesByOwner);
   const startOffset = -((owners.length - 1) * spacing) / 2;
-  return /* @__PURE__ */ jsx38("g", { className: clsx17("zone-pieces", className), children: owners.map((owner, i) => {
+  return /* @__PURE__ */ jsx40("g", { className: clsx17("zone-pieces", className), children: owners.map((owner, i) => {
     const ownerPieces = piecesByOwner[owner] || [];
     const totalCount = ownerPieces.reduce(
       (sum, p) => sum + (p.count || 1),
       0
     );
     const offsetX = startOffset + i * spacing;
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs23(
       "g",
       {
         transform: `translate(${centerX + offsetX}, ${centerY + yOffset})`,
         children: [
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx40(
             "circle",
             {
               r: radius,
@@ -8899,7 +9528,7 @@ function DefaultZonePieces({
               strokeWidth: 2
             }
           ),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx40(
             "text",
             {
               textAnchor: "middle",
@@ -8926,7 +9555,7 @@ function DefaultZonePiece({
   className
 }) {
   const count = piece.count || 1;
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs23(
     "g",
     {
       transform: `translate(${x}, ${y})`,
@@ -8940,8 +9569,8 @@ function DefaultZonePiece({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": `Piece ${piece.id}`,
       children: [
-        /* @__PURE__ */ jsx38("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 2 }),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx40("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 2 }),
+        /* @__PURE__ */ jsx40(
           "text",
           {
             textAnchor: "middle",
@@ -8994,7 +9623,7 @@ function ZoneMap({
   const viewBoxHeight = baseHeight / transform.zoom;
   const viewBoxX = (baseWidth - viewBoxWidth) / 2 - transform.pan.x;
   const viewBoxY = (baseHeight - viewBoxHeight) / 2 - transform.pan.y;
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs23(
     "svg",
     {
       width,
@@ -9011,17 +9640,17 @@ function ZoneMap({
       role: "img",
       "aria-label": "Zone map",
       children: [
-        backgroundImage && /* @__PURE__ */ jsx38("image", { href: backgroundImage, width, height }),
-        /* @__PURE__ */ jsx38("g", { className: "zones", role: "list", "aria-label": "Map zones", children: zones.map((zone) => {
+        backgroundImage && /* @__PURE__ */ jsx40("image", { href: backgroundImage, width, height }),
+        /* @__PURE__ */ jsx40("g", { className: "zones", role: "list", "aria-label": "Map zones", children: zones.map((zone) => {
           const zonePieces = piecesByZone[zone.id] || [];
-          return /* @__PURE__ */ jsx38("g", { children: renderZone(zone, zonePieces) }, zone.id);
+          return /* @__PURE__ */ jsx40("g", { children: renderZone(zone, zonePieces) }, zone.id);
         }) }),
-        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs21(
+        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs23(
           "g",
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx40(
                 "rect",
                 {
                   x: 0,
@@ -9032,7 +9661,7 @@ function ZoneMap({
                   fill: "rgba(0,0,0,0.6)"
                 }
               ),
-              /* @__PURE__ */ jsxs21("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [
+              /* @__PURE__ */ jsxs23("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [
                 Math.round(transform.zoom * 100),
                 "%"
               ] })
@@ -9047,7 +9676,7 @@ function ZoneMap({
 // src/ui/components/board/TrackBoard.tsx
 import { useMemo as useMemo13 } from "react";
 import { clsx as clsx18 } from "clsx";
-import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 function DefaultTrackSpace({
   space,
   size = 50,
@@ -9066,7 +9695,7 @@ function DefaultTrackSpace({
   const computedFill = isHighlighted ? "rgba(59, 130, 246, 0.3)" : fill;
   const computedStroke = isSelected ? "#3b82f6" : isHighlighted ? "#60a5fa" : stroke;
   const computedStrokeWidth = isHighlighted || isSelected ? 3 : strokeWidth;
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs24(
     "g",
     {
       onClick,
@@ -9078,7 +9707,7 @@ function DefaultTrackSpace({
       "aria-label": space.name || `Space ${space.index}`,
       tabIndex: onClick ? 0 : void 0,
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx41(
           "rect",
           {
             x: -halfSize,
@@ -9091,7 +9720,7 @@ function DefaultTrackSpace({
             strokeWidth: computedStrokeWidth
           }
         ),
-        space.name ? /* @__PURE__ */ jsx39(
+        space.name ? /* @__PURE__ */ jsx41(
           "text",
           {
             textAnchor: "middle",
@@ -9101,7 +9730,7 @@ function DefaultTrackSpace({
             fontWeight: "bold",
             children: space.name.length > 8 ? space.name.slice(0, 7) + "\u2026" : space.name
           }
-        ) : /* @__PURE__ */ jsx39(
+        ) : /* @__PURE__ */ jsx41(
           "text",
           {
             textAnchor: "middle",
@@ -9112,9 +9741,9 @@ function DefaultTrackSpace({
             children: space.index
           }
         ),
-        showJumpIndicator && space.jumpTo && /* @__PURE__ */ jsxs22("g", { transform: `translate(${halfSize - 6}, ${-halfSize + 6})`, children: [
-          /* @__PURE__ */ jsx39("circle", { r: 6, fill: "#fbbf24" }),
-          /* @__PURE__ */ jsx39(
+        showJumpIndicator && space.jumpTo && /* @__PURE__ */ jsxs24("g", { transform: `translate(${halfSize - 6}, ${-halfSize + 6})`, children: [
+          /* @__PURE__ */ jsx41("circle", { r: 6, fill: "#fbbf24" }),
+          /* @__PURE__ */ jsx41(
             "text",
             {
               textAnchor: "middle",
@@ -9145,7 +9774,7 @@ function DefaultTrackPiece({
   const offset = total > 1 ? spacing : 0;
   const px = Math.cos(angle) * offset;
   const py = Math.sin(angle) * offset;
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     "circle",
     {
       cx: px,
@@ -9173,7 +9802,7 @@ function DefaultTrackConnection({
   strokeWidth = 2,
   className
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     "line",
     {
       x1: from.x,
@@ -9208,8 +9837,8 @@ function DefaultTrackJump({
   const endX = to.x - unitX * (spaceSize / 2 + 5);
   const endY = to.y - unitY * (spaceSize / 2 + 5);
   const markerId = `arrow-${isUp ? "up" : "down"}-${from.x}-${from.y}`;
-  return /* @__PURE__ */ jsxs22("g", { className, children: [
-    /* @__PURE__ */ jsx39("defs", { children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs24("g", { className, children: [
+    /* @__PURE__ */ jsx41("defs", { children: /* @__PURE__ */ jsx41(
       "marker",
       {
         id: markerId,
@@ -9218,10 +9847,10 @@ function DefaultTrackJump({
         refX: "9",
         refY: "3.5",
         orient: "auto",
-        children: /* @__PURE__ */ jsx39("polygon", { points: "0 0, 10 3.5, 0 7", fill: color })
+        children: /* @__PURE__ */ jsx41("polygon", { points: "0 0, 10 3.5, 0 7", fill: color })
       }
     ) }),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx41(
       "line",
       {
         x1: startX,
@@ -9285,7 +9914,7 @@ function TrackBoard({
       return nextSpaceIds.map((nextId) => {
         const targetSpace = spaceMap.get(nextId);
         if (!targetSpace) return null;
-        return /* @__PURE__ */ jsx39("g", { children: renderConnection(
+        return /* @__PURE__ */ jsx41("g", { children: renderConnection(
           space.position,
           targetSpace.position,
           space,
@@ -9302,7 +9931,7 @@ function TrackBoard({
       if (!targetSpace) return [];
       const isUp = targetSpace.index > space.index;
       return [
-        /* @__PURE__ */ jsx39("g", { children: renderJump(
+        /* @__PURE__ */ jsx41("g", { children: renderJump(
           space.position,
           targetSpace.position,
           space,
@@ -9318,7 +9947,7 @@ function TrackBoard({
   const viewBoxHeight = baseHeight / transform.zoom;
   const viewBoxX = (baseWidth - viewBoxWidth) / 2 - transform.pan.x;
   const viewBoxY = (baseHeight - viewBoxHeight) / 2 - transform.pan.y;
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs24(
     "svg",
     {
       width,
@@ -9335,11 +9964,11 @@ function TrackBoard({
       role: "img",
       "aria-label": "Track board",
       children: [
-        /* @__PURE__ */ jsx39("g", { className: "track-connections", children: renderConnections() }),
-        /* @__PURE__ */ jsx39("g", { className: "track-jumps", children: renderJumps() }),
-        /* @__PURE__ */ jsx39("g", { className: "track-spaces", role: "list", "aria-label": "Track spaces", children: spaces.map((space) => {
+        /* @__PURE__ */ jsx41("g", { className: "track-connections", children: renderConnections() }),
+        /* @__PURE__ */ jsx41("g", { className: "track-jumps", children: renderJumps() }),
+        /* @__PURE__ */ jsx41("g", { className: "track-spaces", role: "list", "aria-label": "Track spaces", children: spaces.map((space) => {
           const spacePieces = piecesBySpace[space.id] || [];
-          return /* @__PURE__ */ jsx39(
+          return /* @__PURE__ */ jsx41(
             "g",
             {
               transform: `translate(${space.position.x}, ${space.position.y})`,
@@ -9348,12 +9977,12 @@ function TrackBoard({
             space.id
           );
         }) }),
-        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs22(
+        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs24(
           "g",
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx41(
                 "rect",
                 {
                   x: 0,
@@ -9364,7 +9993,7 @@ function TrackBoard({
                   fill: "rgba(0,0,0,0.6)"
                 }
               ),
-              /* @__PURE__ */ jsxs22("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [
+              /* @__PURE__ */ jsxs24("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [
                 Math.round(transform.zoom * 100),
                 "%"
               ] })
@@ -9380,7 +10009,7 @@ function TrackBoard({
 import { useMemo as useMemo14 } from "react";
 import { clsx as clsx19 } from "clsx";
 import { Users, Lock, Gift, Coins } from "lucide-react";
-import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 var EMPTY_SLOT_OCCUPANTS = [];
 function DefaultSlotItem({
   name,
@@ -9404,7 +10033,7 @@ function DefaultSlotItem({
   const borderColor = isSelected ? theme.semantic.intent.primary.border : isFull ? theme.semantic.border.strong : isAvailable ? theme.semantic.border.default : theme.semantic.border.subtle;
   const background = isSelected ? theme.semantic.intent.primary.soft : isFull ? theme.semantic.surface.inset : theme.semantic.surface.card;
   const ringColor = isSelected ? theme.semantic.intent.primary.border : isHighlighted ? theme.semantic.intent.warning.border : void 0;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       onClick: isAvailable ? onClick : void 0,
@@ -9426,9 +10055,9 @@ function DefaultSlotItem({
       "aria-disabled": !isAvailable,
       tabIndex: isAvailable && onClick ? 0 : void 0,
       children: [
-        /* @__PURE__ */ jsxs23("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ jsxs23("div", { children: [
-            /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsxs25("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs25("div", { children: [
+            /* @__PURE__ */ jsx42(
               "h3",
               {
                 className: "font-bold",
@@ -9436,7 +10065,7 @@ function DefaultSlotItem({
                 children: name
               }
             ),
-            description && /* @__PURE__ */ jsx40(
+            description && /* @__PURE__ */ jsx42(
               "p",
               {
                 className: "text-xs mt-0.5",
@@ -9445,8 +10074,8 @@ function DefaultSlotItem({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1", children: [
-            isExclusive && /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-1", children: [
+            isExclusive && /* @__PURE__ */ jsx42(
               Lock,
               {
                 className: "w-4 h-4",
@@ -9454,46 +10083,46 @@ function DefaultSlotItem({
                 "aria-label": "Exclusive slot"
               }
             ),
-            capacity > 1 && /* @__PURE__ */ jsxs23(
+            capacity > 1 && /* @__PURE__ */ jsxs25(
               "div",
               {
                 className: "flex items-center gap-0.5 text-xs",
                 style: { color: theme.semantic.text.muted },
                 title: `Capacity: ${capacity}`,
                 children: [
-                  /* @__PURE__ */ jsx40(Users, { className: "w-3 h-3" }),
-                  /* @__PURE__ */ jsx40("span", { children: capacity })
+                  /* @__PURE__ */ jsx42(Users, { className: "w-3 h-3" }),
+                  /* @__PURE__ */ jsx42("span", { children: capacity })
                 ]
               }
             )
           ] })
         ] }),
-        (costLabel || rewardLabel) && /* @__PURE__ */ jsxs23("div", { className: "mt-2 flex flex-wrap gap-2 text-xs", children: [
-          costLabel && /* @__PURE__ */ jsxs23(
+        (costLabel || rewardLabel) && /* @__PURE__ */ jsxs25("div", { className: "mt-2 flex flex-wrap gap-2 text-xs", children: [
+          costLabel && /* @__PURE__ */ jsxs25(
             "div",
             {
               className: "flex items-center gap-1",
               style: { color: theme.semantic.intent.danger.solid },
               children: [
-                /* @__PURE__ */ jsx40(Coins, { className: "w-3 h-3", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx40("span", { children: costLabel })
+                /* @__PURE__ */ jsx42(Coins, { className: "w-3 h-3", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx42("span", { children: costLabel })
               ]
             }
           ),
-          rewardLabel && /* @__PURE__ */ jsxs23(
+          rewardLabel && /* @__PURE__ */ jsxs25(
             "div",
             {
               className: "flex items-center gap-1",
               style: { color: theme.semantic.intent.success.solid },
               children: [
-                /* @__PURE__ */ jsx40(Gift, { className: "w-3 h-3", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx40("span", { children: rewardLabel })
+                /* @__PURE__ */ jsx42(Gift, { className: "w-3 h-3", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx42("span", { children: rewardLabel })
               ]
             }
           )
         ] }),
-        renderOccupants && /* @__PURE__ */ jsx40("div", { className: "mt-2", children: renderOccupants() }),
-        !isAvailable && !isFull && /* @__PURE__ */ jsx40(
+        renderOccupants && /* @__PURE__ */ jsx42("div", { className: "mt-2", children: renderOccupants() }),
+        !isAvailable && !isFull && /* @__PURE__ */ jsx42(
           "div",
           {
             className: "mt-2 text-xs",
@@ -9513,7 +10142,7 @@ function DefaultSlotOccupant({
   onClick,
   className
 }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       onClick,
@@ -9541,7 +10170,7 @@ function DefaultEmptySlot({
   className
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       className: clsx19("rounded-full border-2 border-dashed", className),
@@ -9596,18 +10225,18 @@ function SlotSystem({
   }, [slots, layout]);
   const renderSlotItem = (slot) => {
     const slotOccupants = occupantsBySlot[slot.id] ?? [];
-    return /* @__PURE__ */ jsx40("div", { role: "listitem", "aria-label": slot.name, children: renderSlot(slot, slotOccupants) }, slot.id);
+    return /* @__PURE__ */ jsx42("div", { role: "listitem", "aria-label": slot.name, children: renderSlot(slot, slotOccupants) }, slot.id);
   };
   const responsiveGridStyle = {
     display: "grid",
     gridTemplateColumns: `repeat(auto-fit, minmax(${minSlotWidth}px, 1fr))`,
     gap: "1rem"
   };
-  const wrapContent = (content) => /* @__PURE__ */ jsx40("div", { style: { width, height }, className: clsx19("slot-system", className), children: content });
+  const wrapContent = (content) => /* @__PURE__ */ jsx42("div", { style: { width, height }, className: clsx19("slot-system", className), children: content });
   if (layout === "grouped" && slotGroups) {
     return wrapContent(
-      /* @__PURE__ */ jsx40("div", { className: "space-y-6", role: "list", children: Object.entries(slotGroups).map(([groupName, groupSlots]) => /* @__PURE__ */ jsxs23("div", { children: [
-        /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx42("div", { className: "space-y-6", role: "list", children: Object.entries(slotGroups).map(([groupName, groupSlots]) => /* @__PURE__ */ jsxs25("div", { children: [
+        /* @__PURE__ */ jsx42(
           "h3",
           {
             className: "text-lg font-semibold mb-3",
@@ -9615,17 +10244,17 @@ function SlotSystem({
             children: groupName
           }
         ),
-        /* @__PURE__ */ jsx40("div", { style: responsiveGridStyle, children: groupSlots.map(renderSlotItem) })
+        /* @__PURE__ */ jsx42("div", { style: responsiveGridStyle, children: groupSlots.map(renderSlotItem) })
       ] }, groupName)) })
     );
   }
   if (layout === "list") {
     return wrapContent(
-      /* @__PURE__ */ jsx40("div", { className: "flex flex-col gap-2", role: "list", children: slots.map(renderSlotItem) })
+      /* @__PURE__ */ jsx42("div", { className: "flex flex-col gap-2", role: "list", children: slots.map(renderSlotItem) })
     );
   }
   return wrapContent(
-    /* @__PURE__ */ jsx40("div", { style: responsiveGridStyle, role: "list", children: slots.map(renderSlotItem) })
+    /* @__PURE__ */ jsx42("div", { style: responsiveGridStyle, role: "list", children: slots.map(renderSlotItem) })
   );
 }
 
@@ -9747,7 +10376,7 @@ function isInteractiveTargetSelectable(layer, state) {
 }
 
 // src/ui/components/board/tiled-grid/interactive-layer.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function InteractiveTargetLayerGroup({
   layer,
   targets,
@@ -9756,14 +10385,14 @@ function InteractiveTargetLayerGroup({
   groupClassName,
   groupAriaLabel,
   groupRole,
-  spreadBrowserAttributes,
+  browserAttributeOrder,
   selectMode,
   hover,
   getTargetTransform,
   renderTargetContent
 }) {
   const { hoveredTargetId, setHoveredTargetId } = hover;
-  return /* @__PURE__ */ jsx41("g", { className: groupClassName, role: groupRole, "aria-label": groupAriaLabel, children: targets.map((target) => {
+  return /* @__PURE__ */ jsx43("g", { className: groupClassName, role: groupRole, "aria-label": groupAriaLabel, children: targets.map((target) => {
     const targetId = getTargetId(target);
     const state = interactiveTargetRenderState(
       layer,
@@ -9776,11 +10405,11 @@ function InteractiveTargetLayerGroup({
     } : () => {
       void layer.selectTargetId?.(targetId);
     };
-    return spreadBrowserAttributes ? (
+    return browserAttributeOrder === "before-transform" ? (
       // HexGrid markup variant: browserAttributes spread first, then
       // transform, role, className (preserves HexGrid's rendered
       // attribute order).
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx43(
         "g",
         {
           ...state.browserAttributes,
@@ -9803,13 +10432,14 @@ function InteractiveTargetLayerGroup({
         targetId
       )
     ) : (
-      // SquareGrid markup variant: no browserAttributes spread;
-      // transform, className, role (preserves SquareGrid's rendered
-      // attribute order).
-      /* @__PURE__ */ jsx41(
+      // SquareGrid markup variant: transform first, then browser
+      // attributes, className, role (preserves SquareGrid's rendered
+      // attribute order while exposing semantic replay metadata).
+      /* @__PURE__ */ jsx43(
         "g",
         {
           ...getTargetTransform ? { transform: getTargetTransform(target) } : {},
+          ...state.browserAttributes,
           onClick: isSelectable ? activate : void 0,
           onKeyDown: (event) => handleKeyboardActivation(
             event,
@@ -9837,7 +10467,7 @@ function resolveBoardProp(props, buildInlineBoard) {
 }
 
 // src/ui/components/board/SquareGrid.tsx
-import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
 function DefaultGridCell({
   size,
   isLight = true,
@@ -9855,7 +10485,7 @@ function DefaultGridCell({
   className
 }) {
   const baseColor = isLight ? lightColor : darkColor;
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs26(
     "g",
     {
       onClick,
@@ -9871,8 +10501,8 @@ function DefaultGridCell({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Grid cell" : void 0,
       children: [
-        /* @__PURE__ */ jsx42("rect", { width: size, height: size, fill: baseColor }),
-        isSelected && /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx44("rect", { width: size, height: size, fill: baseColor }),
+        isSelected && /* @__PURE__ */ jsx44(
           "rect",
           {
             width: size,
@@ -9881,7 +10511,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isHighlighted && !isSelected && /* @__PURE__ */ jsx42(
+        isHighlighted && !isSelected && /* @__PURE__ */ jsx44(
           "rect",
           {
             width: size,
@@ -9890,7 +10520,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isValidMove && !isCapture && /* @__PURE__ */ jsx42(
+        isValidMove && !isCapture && /* @__PURE__ */ jsx44(
           "circle",
           {
             cx: size / 2,
@@ -9900,7 +10530,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isCapture && /* @__PURE__ */ jsx42(
+        isCapture && /* @__PURE__ */ jsx44(
           "circle",
           {
             cx: size / 2,
@@ -9928,7 +10558,7 @@ function DefaultGridPiece({
 }) {
   const radius = size * 0.38;
   const effectiveStroke = strokeColor ?? (color === "#f8fafc" || color === "#ffffff" ? "#1e293b" : "#f8fafc");
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs26(
     "g",
     {
       onClick,
@@ -9944,7 +10574,7 @@ function DefaultGridPiece({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Grid piece" : void 0,
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx44(
           "circle",
           {
             r: isDragging ? radius * 1.1 : radius,
@@ -9954,7 +10584,7 @@ function DefaultGridPiece({
             style: { filter: "drop-shadow(1px 2px 2px rgba(0,0,0,0.4))" }
           }
         ),
-        label && /* @__PURE__ */ jsx42(
+        label && /* @__PURE__ */ jsx44(
           "text",
           {
             y: 4,
@@ -9999,7 +10629,7 @@ function DefaultChessPiece({
   const symbol = CHESS_SYMBOLS[owner]?.[type] ?? "?";
   const textColor = owner === "white" ? "#f8fafc" : "#1e293b";
   const shadowFilter = owner === "white" ? "drop-shadow(1px 1px 1px rgba(0,0,0,0.5))" : "drop-shadow(1px 1px 1px rgba(255,255,255,0.3))";
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     "g",
     {
       onClick,
@@ -10012,7 +10642,7 @@ function DefaultChessPiece({
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? `${owner} ${type}` : void 0,
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx44(
         "text",
         {
           textAnchor: "middle",
@@ -10269,7 +10899,7 @@ function SquareGridImpl(props) {
     bounds: { minX: 0, minY: 0, width: totalWidth, height: totalHeight },
     viewBoxMode: "static-when-disabled"
   });
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs26(
     "svg",
     {
       width: svgWidth,
@@ -10286,11 +10916,11 @@ function SquareGridImpl(props) {
       role: "img",
       "aria-label": `${rows}x${cols} game grid`,
       children: [
-        /* @__PURE__ */ jsx42("defs", { children: /* @__PURE__ */ jsx42("filter", { id: "pieceShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx42("feDropShadow", { dx: "1", dy: "2", stdDeviation: "2", floodOpacity: "0.4" }) }) }),
-        /* @__PURE__ */ jsx42("g", { className: "cells", role: "list", "aria-label": "Grid cells", children: renderableCells.map(({ row, col }) => {
+        /* @__PURE__ */ jsx44("defs", { children: /* @__PURE__ */ jsx44("filter", { id: "pieceShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx44("feDropShadow", { dx: "1", dy: "2", stdDeviation: "2", floodOpacity: "0.4" }) }) }),
+        /* @__PURE__ */ jsx44("g", { className: "cells", role: "list", "aria-label": "Grid cells", children: renderableCells.map(({ row, col }) => {
           const x = labelMargin + col * cellSize;
           const y = row * cellSize;
-          return /* @__PURE__ */ jsx42(
+          return /* @__PURE__ */ jsx44(
             "g",
             {
               transform: `translate(${x}, ${y})`,
@@ -10301,7 +10931,7 @@ function SquareGridImpl(props) {
             `${row}-${col}`
           );
         }) }),
-        interactiveSpaces && /* @__PURE__ */ jsx42(
+        interactiveSpaces && /* @__PURE__ */ jsx44(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveSpaces,
@@ -10310,12 +10940,12 @@ function SquareGridImpl(props) {
             targetKind: "space",
             groupClassName: "interactive-spaces",
             groupAriaLabel: "Interactive spaces",
-            spreadBrowserAttributes: false,
+            browserAttributeOrder: "after-transform",
             selectMode: "layer-direct",
             hover: spaceHover,
             getTargetTransform: (space) => `translate(${labelMargin + space.col * cellSize}, ${space.row * cellSize})`,
-            renderTargetContent: (space, state, isSelectable) => /* @__PURE__ */ jsxs24(Fragment6, { children: [
-              isSelectable && /* @__PURE__ */ jsx42(
+            renderTargetContent: (space, state, isSelectable) => /* @__PURE__ */ jsxs26(Fragment6, { children: [
+              isSelectable && /* @__PURE__ */ jsx44(
                 "rect",
                 {
                   x: 0,
@@ -10330,8 +10960,8 @@ function SquareGridImpl(props) {
             ] })
           }
         ),
-        renderEdge && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx42("g", { className: "edges", "aria-label": "Board edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => /* @__PURE__ */ jsx42("g", { children: renderEdge(edge, interactiveEdge.position) }, edge.id)) }),
-        interactiveEdges && /* @__PURE__ */ jsx42(
+        renderEdge && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx44("g", { className: "edges", "aria-label": "Board edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => /* @__PURE__ */ jsx44("g", { children: renderEdge(edge, interactiveEdge.position) }, edge.id)) }),
+        interactiveEdges && /* @__PURE__ */ jsx44(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveEdges,
@@ -10340,10 +10970,10 @@ function SquareGridImpl(props) {
             targetKind: "edge",
             groupClassName: "interactive-edges",
             groupAriaLabel: "Interactive edges",
-            spreadBrowserAttributes: false,
+            browserAttributeOrder: "after-transform",
             selectMode: "layer-direct",
             hover: edgeHover,
-            renderTargetContent: ({ interactiveEdge: edge }, state) => renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx42(
+            renderTargetContent: ({ interactiveEdge: edge }, state) => renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx44(
               "line",
               {
                 x1: edge.position.x1,
@@ -10357,8 +10987,8 @@ function SquareGridImpl(props) {
             ) : null
           }
         ),
-        renderVertex && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx42("g", { className: "vertices", "aria-label": "Board vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => /* @__PURE__ */ jsx42("g", { children: renderVertex(vertex, interactiveVertex.position) }, vertex.id)) }),
-        interactiveVertices && /* @__PURE__ */ jsx42(
+        renderVertex && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx44("g", { className: "vertices", "aria-label": "Board vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => /* @__PURE__ */ jsx44("g", { children: renderVertex(vertex, interactiveVertex.position) }, vertex.id)) }),
+        interactiveVertices && /* @__PURE__ */ jsx44(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveVertices,
@@ -10367,10 +10997,10 @@ function SquareGridImpl(props) {
             targetKind: "vertex",
             groupClassName: "interactive-vertices",
             groupAriaLabel: "Interactive vertices",
-            spreadBrowserAttributes: false,
+            browserAttributeOrder: "after-transform",
             selectMode: "layer-direct",
             hover: vertexHover,
-            renderTargetContent: ({ interactiveVertex: vertex }, state) => renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx42(
+            renderTargetContent: ({ interactiveVertex: vertex }, state) => renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx44(
               "circle",
               {
                 cx: vertex.position.x,
@@ -10382,10 +11012,10 @@ function SquareGridImpl(props) {
             ) : null
           }
         ),
-        showCoordinates && coordinateStyle !== "none" && /* @__PURE__ */ jsxs24("g", { className: "coordinates", "aria-hidden": "true", children: [
+        showCoordinates && coordinateStyle !== "none" && /* @__PURE__ */ jsxs26("g", { className: "coordinates", "aria-hidden": "true", children: [
           Array.from({ length: cols }).map((_, col) => {
             const label = coordinateStyle === "algebraic" ? String.fromCharCode(97 + col) : String(col + 1);
-            return /* @__PURE__ */ jsx42(
+            return /* @__PURE__ */ jsx44(
               "text",
               {
                 x: labelMargin + col * cellSize + cellSize / 2,
@@ -10401,7 +11031,7 @@ function SquareGridImpl(props) {
           }),
           Array.from({ length: rows }).map((_, row) => {
             const label = coordinateStyle === "algebraic" ? String(rows - row) : String(row + 1);
-            return /* @__PURE__ */ jsx42(
+            return /* @__PURE__ */ jsx44(
               "text",
               {
                 x: 10,
@@ -10416,10 +11046,10 @@ function SquareGridImpl(props) {
             );
           })
         ] }),
-        /* @__PURE__ */ jsx42("g", { className: "pieces", role: "list", "aria-label": "Game pieces", children: resolvedPieces.map((piece) => {
+        /* @__PURE__ */ jsx44("g", { className: "pieces", role: "list", "aria-label": "Game pieces", children: resolvedPieces.map((piece) => {
           const x = labelMargin + piece.col * cellSize + cellSize / 2;
           const y = piece.row * cellSize + cellSize / 2;
-          return /* @__PURE__ */ jsx42(
+          return /* @__PURE__ */ jsx44(
             "g",
             {
               transform: `translate(${x}, ${y})`,
@@ -10430,7 +11060,7 @@ function SquareGridImpl(props) {
             piece.id
           );
         }) }),
-        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx42(
+        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx44(
           GridZoomIndicator,
           {
             viewBoxX,
@@ -10448,7 +11078,7 @@ var SquareGrid = SquareGridImpl;
 // src/ui/components/board/HexGrid.tsx
 import { useMemo as useMemo16 } from "react";
 import { clsx as clsx22 } from "clsx";
-import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
 function DefaultHexTile({
   size,
   fill,
@@ -10469,7 +11099,7 @@ function DefaultHexTile({
   const effectiveStroke = isSelected ? "#3b82f6" : isHighlighted ? "#22c55e" : stroke;
   const effectiveStrokeWidth = isSelected || isHighlighted ? 3 : strokeWidth;
   const points = hexUtils.getHexPoints(0, 0, size * 0.95, orientation);
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "g",
     {
       onClick,
@@ -10485,7 +11115,7 @@ function DefaultHexTile({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Hex tile" : void 0,
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45(
           "polygon",
           {
             points,
@@ -10495,7 +11125,7 @@ function DefaultHexTile({
             filter: "url(#hexShadow)"
           }
         ),
-        label && /* @__PURE__ */ jsx43(
+        label && /* @__PURE__ */ jsx45(
           "text",
           {
             x: 0,
@@ -10510,7 +11140,7 @@ function DefaultHexTile({
             children: label
           }
         ),
-        showCoordinates && coordinates && /* @__PURE__ */ jsxs25(
+        showCoordinates && coordinates && /* @__PURE__ */ jsxs27(
           "text",
           {
             x: 0,
@@ -10544,7 +11174,7 @@ function DefaultHexEdge({
     position.x2 - position.x1,
     position.y2 - position.y1
   );
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "g",
     {
       onClick,
@@ -10558,7 +11188,7 @@ function DefaultHexEdge({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Hex edge" : void 0,
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45(
           "rect",
           {
             x: position.midX - touchTargetLength / 2,
@@ -10571,7 +11201,7 @@ function DefaultHexEdge({
             pointerEvents: "all"
           }
         ),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45(
           "line",
           {
             x1: position.x1,
@@ -10607,7 +11237,7 @@ function DefaultHexVertex({
   const effectiveColor = isSelected ? "rgba(59, 130, 246, 0.8)" : isHighlighted ? "rgba(34, 197, 94, 0.8)" : color;
   const effectiveStroke = isSelected ? "#3b82f6" : isHighlighted ? "#22c55e" : stroke;
   const effectiveStrokeWidth = isSelected || isHighlighted ? 3 : strokeWidth;
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "g",
     {
       onClick,
@@ -10624,7 +11254,7 @@ function DefaultHexVertex({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Hex vertex" : void 0,
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45(
           "circle",
           {
             cx: position.x,
@@ -10634,7 +11264,7 @@ function DefaultHexVertex({
             pointerEvents: "all"
           }
         ),
-        shape === "square" ? /* @__PURE__ */ jsx43(
+        shape === "square" ? /* @__PURE__ */ jsx45(
           "rect",
           {
             x: position.x - size,
@@ -10646,7 +11276,7 @@ function DefaultHexVertex({
             strokeWidth: effectiveStrokeWidth,
             className: hasOwner ? "" : "opacity-30"
           }
-        ) : /* @__PURE__ */ jsx43(
+        ) : /* @__PURE__ */ jsx45(
           "circle",
           {
             cx: position.x,
@@ -10670,7 +11300,7 @@ function DefaultInteractiveVertex({
   hoverColor = "rgba(34, 197, 94, 0.8)",
   className
 }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx45(
     "circle",
     {
       cx: position.x,
@@ -10691,7 +11321,7 @@ function DefaultInteractiveEdge({
   hoverColor = "rgba(251, 146, 60, 0.8)",
   className
 }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx45(
     "line",
     {
       x1: position.x1,
@@ -10971,7 +11601,7 @@ function HexGridImpl(props) {
     bounds,
     viewBoxMode: "transformed"
   });
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "svg",
     {
       width,
@@ -10988,18 +11618,18 @@ function HexGridImpl(props) {
       role: "img",
       "aria-label": "Hex grid game board",
       children: [
-        /* @__PURE__ */ jsxs25("defs", { children: [
-          /* @__PURE__ */ jsxs25("linearGradient", { id: "oceanGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-            /* @__PURE__ */ jsx43("stop", { offset: "0%", stopColor: "#0ea5e9" }),
-            /* @__PURE__ */ jsx43("stop", { offset: "100%", stopColor: "#0284c7" })
+        /* @__PURE__ */ jsxs27("defs", { children: [
+          /* @__PURE__ */ jsxs27("linearGradient", { id: "oceanGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ jsx45("stop", { offset: "0%", stopColor: "#0ea5e9" }),
+            /* @__PURE__ */ jsx45("stop", { offset: "100%", stopColor: "#0284c7" })
           ] }),
-          /* @__PURE__ */ jsx43("filter", { id: "hexShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx43("feDropShadow", { dx: "1", dy: "1", stdDeviation: "2", floodOpacity: "0.3" }) })
+          /* @__PURE__ */ jsx45("filter", { id: "hexShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx45("feDropShadow", { dx: "1", dy: "1", stdDeviation: "2", floodOpacity: "0.3" }) })
         ] }),
-        /* @__PURE__ */ jsx43("g", { className: "tiles", role: "list", "aria-label": "Hex tiles", children: resolvedTiles.map((tile) => {
+        /* @__PURE__ */ jsx45("g", { className: "tiles", role: "list", "aria-label": "Hex tiles", children: resolvedTiles.map((tile) => {
           const pos = tilePositions.get(tile.id);
           if (!pos) return null;
           const geometry = buildTileGeometry(pos);
-          return /* @__PURE__ */ jsx43(
+          return /* @__PURE__ */ jsx45(
             "g",
             {
               transform: `translate(${pos.x}, ${pos.y})`,
@@ -11010,7 +11640,7 @@ function HexGridImpl(props) {
             tile.id
           );
         }) }),
-        interactiveSpaces && resolvedTiles.length > 0 && /* @__PURE__ */ jsx43(
+        interactiveSpaces && resolvedTiles.length > 0 && /* @__PURE__ */ jsx45(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveSpaces,
@@ -11020,12 +11650,12 @@ function HexGridImpl(props) {
             groupClassName: "interactive-spaces",
             groupAriaLabel: "Interactive spaces",
             groupRole: "list",
-            spreadBrowserAttributes: true,
+            browserAttributeOrder: "before-transform",
             selectMode: "render-state",
             hover: spaceHover,
             getTargetTransform: ({ pos }) => `translate(${pos.x}, ${pos.y})`,
-            renderTargetContent: ({ space, pos }, state, isSelectable) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
-              isSelectable && /* @__PURE__ */ jsx43(
+            renderTargetContent: ({ space, pos }, state, isSelectable) => /* @__PURE__ */ jsxs27(Fragment7, { children: [
+              isSelectable && /* @__PURE__ */ jsx45(
                 "polygon",
                 {
                   points: buildTileGeometry(pos).points({
@@ -11039,13 +11669,13 @@ function HexGridImpl(props) {
             ] })
           }
         ),
-        resolvedEdges.length > 0 && /* @__PURE__ */ jsx43("g", { className: "edges", role: "list", "aria-label": "Hex edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => {
-          return /* @__PURE__ */ jsx43("g", { role: "listitem", children: renderEdge(edge, interactiveEdge.position) }, edge.id);
+        resolvedEdges.length > 0 && /* @__PURE__ */ jsx45("g", { className: "edges", role: "list", "aria-label": "Hex edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => {
+          return /* @__PURE__ */ jsx45("g", { role: "listitem", children: renderEdge(edge, interactiveEdge.position) }, edge.id);
         }) }),
-        resolvedVertices.length > 0 && /* @__PURE__ */ jsx43("g", { className: "vertices", role: "list", "aria-label": "Hex vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => {
-          return /* @__PURE__ */ jsx43("g", { role: "listitem", children: renderVertex(vertex, interactiveVertex.position) }, vertex.id);
+        resolvedVertices.length > 0 && /* @__PURE__ */ jsx45("g", { className: "vertices", role: "list", "aria-label": "Hex vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => {
+          return /* @__PURE__ */ jsx45("g", { role: "listitem", children: renderVertex(vertex, interactiveVertex.position) }, vertex.id);
         }) }),
-        interactiveEdges && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx43(
+        interactiveEdges && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx45(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveEdges,
@@ -11055,7 +11685,7 @@ function HexGridImpl(props) {
             groupClassName: "interactive-edges",
             groupAriaLabel: "Interactive edges for placement",
             groupRole: "list",
-            spreadBrowserAttributes: true,
+            browserAttributeOrder: "before-transform",
             selectMode: "render-state",
             hover: edgeHover,
             renderTargetContent: ({ interactiveEdge: edge }, state, isSelectable) => {
@@ -11063,8 +11693,8 @@ function HexGridImpl(props) {
                 edge.position.x2 - edge.position.x1,
                 edge.position.y2 - edge.position.y1
               );
-              return /* @__PURE__ */ jsxs25(Fragment7, { children: [
-                isSelectable && /* @__PURE__ */ jsx43(
+              return /* @__PURE__ */ jsxs27(Fragment7, { children: [
+                isSelectable && /* @__PURE__ */ jsx45(
                   "rect",
                   {
                     x: edge.position.midX - touchTargetLength / 2,
@@ -11077,7 +11707,7 @@ function HexGridImpl(props) {
                     pointerEvents: "all"
                   }
                 ),
-                renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx43(
+                renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx45(
                   DefaultInteractiveEdge,
                   {
                     position: edge.position,
@@ -11089,7 +11719,7 @@ function HexGridImpl(props) {
             }
           }
         ),
-        interactiveVertices && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx43(
+        interactiveVertices && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx45(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveVertices,
@@ -11099,11 +11729,11 @@ function HexGridImpl(props) {
             groupClassName: "interactive-vertices",
             groupAriaLabel: "Interactive vertices for placement",
             groupRole: "list",
-            spreadBrowserAttributes: true,
+            browserAttributeOrder: "before-transform",
             selectMode: "render-state",
             hover: vertexHover,
-            renderTargetContent: ({ interactiveVertex: vertex }, state, isSelectable) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
-              isSelectable && /* @__PURE__ */ jsx43(
+            renderTargetContent: ({ interactiveVertex: vertex }, state, isSelectable) => /* @__PURE__ */ jsxs27(Fragment7, { children: [
+              isSelectable && /* @__PURE__ */ jsx45(
                 "circle",
                 {
                   cx: vertex.position.x,
@@ -11113,7 +11743,7 @@ function HexGridImpl(props) {
                   pointerEvents: "all"
                 }
               ),
-              renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx43(
+              renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx45(
                 DefaultInteractiveVertex,
                 {
                   position: vertex.position,
@@ -11124,7 +11754,7 @@ function HexGridImpl(props) {
             ] })
           }
         ),
-        effectivePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx43(
+        effectivePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx45(
           GridZoomIndicator,
           {
             viewBoxX,
@@ -11274,7 +11904,13 @@ export {
   MoreActions,
   DiceRoller,
   PhaseIndicator,
-  GameEndDisplay,
+  GuidancePanel,
+  SetupChecklist,
+  ActionHelp,
+  StandingsTable,
+  OutcomeDialog,
+  SystemActionSummary,
+  GameEventLog,
   DefaultNetworkNode,
   DefaultNetworkEdge,
   DefaultNetworkPiece,
@@ -11305,4 +11941,4 @@ export {
   HexGrid,
   createHexBoardView
 };
-//# sourceMappingURL=chunk-E3X552YM.js.map
+//# sourceMappingURL=chunk-2TRZSZGD.js.map