@dreamboard-games/sdk 0.4.0-alpha.9 → 0.5.0-alpha.1

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

@@ -1721,7 +1721,6 @@ function CardFace({
       "data-face-down": faceDown ? "true" : void 0,
       className: clsx("relative", CARD_SIZE_CLASSES[size], className),
       style: {
-        opacity: disabled ? 0.5 : submitted ? 0.85 : 1,
         transitionProperty: "transform, box-shadow, border-color",
         transitionDuration: motionDuration(theme, "normal"),
         transitionTimingFunction: theme.motion.easing.out,
@@ -4653,9 +4652,11 @@ function HandView({
           "div",
           {
             role: "row",
+            tabIndex: 0,
             className: clsx8(
               "flex items-end gap-3 overflow-x-auto px-4",
-              "snap-x scroll-px-4"
+              "snap-x scroll-px-4",
+              "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
             ),
             style: {
               touchAction: pointer.scrollLocked ? "none" : "pan-x",
@@ -7843,8 +7844,8 @@ function renderHeadline({
   return /* @__PURE__ */ jsxs18(
     motion8.div,
     {
-      initial: reducedMotion ? { opacity: 0 } : { opacity: 0, y: -4 },
-      animate: reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 },
+      initial: reducedMotion ? false : { opacity: 0, y: -4 },
+      animate: { opacity: 1, y: 0 },
       style: {
         display: "flex",
         alignItems: "center",
@@ -8770,240 +8771,6 @@ function OutcomeDialog({
   ) });
 }
 
-// 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";
@@ -9024,7 +8791,7 @@ function handleKeyboardActivation(event, onActivate, options) {
 }
 
 // src/ui/components/board/NetworkGraph.tsx
-import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var EMPTY_NETWORK_EDGES = [];
 var EMPTY_NETWORK_PIECES = [];
 function DefaultNetworkNode({
@@ -9045,7 +8812,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__ */ jsxs22(
+  return /* @__PURE__ */ jsxs21(
     "g",
     {
       onClick,
@@ -9061,7 +8828,7 @@ function DefaultNetworkNode({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Network node" : void 0,
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx38(
           "circle",
           {
             r: radius,
@@ -9070,7 +8837,7 @@ function DefaultNetworkNode({
             strokeWidth: effectiveStrokeWidth
           }
         ),
-        displayLabel && /* @__PURE__ */ jsx39(
+        displayLabel && /* @__PURE__ */ jsx38(
           "text",
           {
             textAnchor: "middle",
@@ -9102,7 +8869,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__ */ jsxs22(
+  return /* @__PURE__ */ jsxs21(
     "g",
     {
       onClick,
@@ -9118,7 +8885,7 @@ function DefaultNetworkEdge({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label !== void 0 ? `Network edge ${label}` : "Network edge" : void 0,
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx38(
           "line",
           {
             x1: from.x,
@@ -9130,8 +8897,8 @@ function DefaultNetworkEdge({
             strokeLinecap: "round"
           }
         ),
-        label !== void 0 && /* @__PURE__ */ jsxs22(Fragment5, { children: [
-          /* @__PURE__ */ jsx39(
+        label !== void 0 && /* @__PURE__ */ jsxs21(Fragment5, { children: [
+          /* @__PURE__ */ jsx38(
             "circle",
             {
               cx: midX,
@@ -9142,7 +8909,7 @@ function DefaultNetworkEdge({
               strokeWidth: 1
             }
           ),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx38(
             "text",
             {
               x: midX,
@@ -9167,7 +8934,7 @@ function DefaultNetworkPiece({
   onClick,
   className
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx38(
     "g",
     {
       onClick,
@@ -9176,7 +8943,7 @@ function DefaultNetworkPiece({
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Network piece" : void 0,
-      children: shape === "square" ? /* @__PURE__ */ jsx39(
+      children: shape === "square" ? /* @__PURE__ */ jsx38(
         "rect",
         {
           x: -radius,
@@ -9187,7 +8954,7 @@ function DefaultNetworkPiece({
           stroke: "white",
           strokeWidth: 1.5
         }
-      ) : /* @__PURE__ */ jsx39("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 1.5 })
+      ) : /* @__PURE__ */ jsx38("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 1.5 })
     }
   );
 }
@@ -9254,7 +9021,7 @@ function NetworkGraph({
   const viewBoxX = viewBoxParts[0] ?? 0;
   const viewBoxY = viewBoxParts[1] ?? 0;
   const viewBoxHeight = viewBoxParts[3] ?? 0;
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs21(
     "svg",
     {
       width,
@@ -9271,11 +9038,11 @@ function NetworkGraph({
       role: "img",
       "aria-label": "Network graph",
       children: [
-        /* @__PURE__ */ jsx39("g", { className: "network-edges", role: "list", "aria-label": "Network connections", children: edges.map((edge) => {
+        /* @__PURE__ */ jsx38("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__ */ jsx39(
+          return /* @__PURE__ */ jsx38(
             "g",
             {
               role: "listitem",
@@ -9285,9 +9052,9 @@ function NetworkGraph({
             edge.id
           );
         }) }),
-        /* @__PURE__ */ jsx39("g", { className: "network-nodes", role: "list", "aria-label": "Network nodes", children: nodes.map((node) => {
+        /* @__PURE__ */ jsx38("g", { className: "network-nodes", role: "list", "aria-label": "Network nodes", children: nodes.map((node) => {
           const nodePieces = piecesByNode[node.id] ?? [];
-          return /* @__PURE__ */ jsxs22(
+          return /* @__PURE__ */ jsxs21(
             "g",
             {
               transform: `translate(${node.position.x}, ${node.position.y})`,
@@ -9295,11 +9062,11 @@ function NetworkGraph({
               "aria-label": node.label ?? node.id,
               children: [
                 renderNode(node, nodePieces),
-                nodePieces.length > 0 && /* @__PURE__ */ jsx39("g", { className: "node-pieces", children: nodePieces.map((piece, i) => {
+                nodePieces.length > 0 && /* @__PURE__ */ jsx38("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__ */ jsx39(
+                  return /* @__PURE__ */ jsx38(
                     "g",
                     {
                       transform: `translate(${pieceX}, ${pieceY})`,
@@ -9313,12 +9080,12 @@ function NetworkGraph({
             node.id
           );
         }) }),
-        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs22(
+        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs21(
           "g",
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx38(
                 "rect",
                 {
                   x: 0,
@@ -9329,7 +9096,7 @@ function NetworkGraph({
                   fill: "rgba(0,0,0,0.6)"
                 }
               ),
-              /* @__PURE__ */ jsxs22("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [
+              /* @__PURE__ */ jsxs21("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [
                 Math.round(transform.zoom * 100),
                 "%"
               ] })
@@ -9344,7 +9111,7 @@ function NetworkGraph({
 // src/ui/components/board/ZoneMap.tsx
 import { useMemo as useMemo12 } from "react";
 import { clsx as clsx17 } from "clsx";
-import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 var HIGHLIGHT_COLORS = {
   valid: "rgba(34, 197, 94, 0.4)",
   // Green
@@ -9397,7 +9164,7 @@ function DefaultZone({
     switch (zone.shape.type) {
       case "polygon":
         if (!zone.shape.points) return null;
-        return /* @__PURE__ */ jsx40(
+        return /* @__PURE__ */ jsx39(
           "polygon",
           {
             points: zone.shape.points.map((p) => `${p.x},${p.y}`).join(" "),
@@ -9408,7 +9175,7 @@ function DefaultZone({
         );
       case "path":
         if (!zone.shape.path) return null;
-        return /* @__PURE__ */ jsx40(
+        return /* @__PURE__ */ jsx39(
           "path",
           {
             d: zone.shape.path,
@@ -9419,7 +9186,7 @@ function DefaultZone({
         );
       case "circle":
         if (!zone.shape.center) return null;
-        return /* @__PURE__ */ jsx40(
+        return /* @__PURE__ */ jsx39(
           "circle",
           {
             cx: zone.shape.center.x,
@@ -9434,7 +9201,7 @@ function DefaultZone({
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     "g",
     {
       onClick,
@@ -9447,7 +9214,7 @@ function DefaultZone({
       tabIndex: onClick ? 0 : void 0,
       children: [
         renderShape(),
-        showLabel && zone.shape?.center && /* @__PURE__ */ jsx40(
+        showLabel && zone.shape?.center && /* @__PURE__ */ jsx39(
           "text",
           {
             x: zone.shape.center.x,
@@ -9461,7 +9228,7 @@ function DefaultZone({
             children: zone.name
           }
         ),
-        showValue && zone.value !== void 0 && zone.shape?.center && /* @__PURE__ */ jsxs23(
+        showValue && zone.value !== void 0 && zone.shape?.center && /* @__PURE__ */ jsxs22(
           "text",
           {
             x: zone.shape.center.x,
@@ -9507,19 +9274,19 @@ function DefaultZonePieces({
   });
   const owners = Object.keys(piecesByOwner);
   const startOffset = -((owners.length - 1) * spacing) / 2;
-  return /* @__PURE__ */ jsx40("g", { className: clsx17("zone-pieces", className), children: owners.map((owner, i) => {
+  return /* @__PURE__ */ jsx39("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__ */ jsxs23(
+    return /* @__PURE__ */ jsxs22(
       "g",
       {
         transform: `translate(${centerX + offsetX}, ${centerY + yOffset})`,
         children: [
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx39(
             "circle",
             {
               r: radius,
@@ -9528,7 +9295,7 @@ function DefaultZonePieces({
               strokeWidth: 2
             }
           ),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx39(
             "text",
             {
               textAnchor: "middle",
@@ -9555,7 +9322,7 @@ function DefaultZonePiece({
   className
 }) {
   const count = piece.count || 1;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     "g",
     {
       transform: `translate(${x}, ${y})`,
@@ -9569,8 +9336,8 @@ function DefaultZonePiece({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": `Piece ${piece.id}`,
       children: [
-        /* @__PURE__ */ jsx40("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 2 }),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx39("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 2 }),
+        /* @__PURE__ */ jsx39(
           "text",
           {
             textAnchor: "middle",
@@ -9623,7 +9390,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__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       width,
@@ -9640,17 +9407,17 @@ function ZoneMap({
       role: "img",
       "aria-label": "Zone map",
       children: [
-        backgroundImage && /* @__PURE__ */ jsx40("image", { href: backgroundImage, width, height }),
-        /* @__PURE__ */ jsx40("g", { className: "zones", role: "list", "aria-label": "Map zones", children: zones.map((zone) => {
+        backgroundImage && /* @__PURE__ */ jsx39("image", { href: backgroundImage, width, height }),
+        /* @__PURE__ */ jsx39("g", { className: "zones", role: "list", "aria-label": "Map zones", children: zones.map((zone) => {
           const zonePieces = piecesByZone[zone.id] || [];
-          return /* @__PURE__ */ jsx40("g", { children: renderZone(zone, zonePieces) }, zone.id);
+          return /* @__PURE__ */ jsx39("g", { children: renderZone(zone, zonePieces) }, zone.id);
         }) }),
-        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs23(
+        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs22(
           "g",
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx40(
+              /* @__PURE__ */ jsx39(
                 "rect",
                 {
                   x: 0,
@@ -9661,7 +9428,7 @@ function ZoneMap({
                   fill: "rgba(0,0,0,0.6)"
                 }
               ),
-              /* @__PURE__ */ jsxs23("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),
                 "%"
               ] })
@@ -9676,7 +9443,7 @@ function ZoneMap({
 // src/ui/components/board/TrackBoard.tsx
 import { useMemo as useMemo13 } from "react";
 import { clsx as clsx18 } from "clsx";
-import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 function DefaultTrackSpace({
   space,
   size = 50,
@@ -9695,7 +9462,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__ */ jsxs24(
+  return /* @__PURE__ */ jsxs23(
     "g",
     {
       onClick,
@@ -9707,7 +9474,7 @@ function DefaultTrackSpace({
       "aria-label": space.name || `Space ${space.index}`,
       tabIndex: onClick ? 0 : void 0,
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx40(
           "rect",
           {
             x: -halfSize,
@@ -9720,7 +9487,7 @@ function DefaultTrackSpace({
             strokeWidth: computedStrokeWidth
           }
         ),
-        space.name ? /* @__PURE__ */ jsx41(
+        space.name ? /* @__PURE__ */ jsx40(
           "text",
           {
             textAnchor: "middle",
@@ -9730,7 +9497,7 @@ function DefaultTrackSpace({
             fontWeight: "bold",
             children: space.name.length > 8 ? space.name.slice(0, 7) + "\u2026" : space.name
           }
-        ) : /* @__PURE__ */ jsx41(
+        ) : /* @__PURE__ */ jsx40(
           "text",
           {
             textAnchor: "middle",
@@ -9741,9 +9508,9 @@ function DefaultTrackSpace({
             children: space.index
           }
         ),
-        showJumpIndicator && space.jumpTo && /* @__PURE__ */ jsxs24("g", { transform: `translate(${halfSize - 6}, ${-halfSize + 6})`, children: [
-          /* @__PURE__ */ jsx41("circle", { r: 6, fill: "#fbbf24" }),
-          /* @__PURE__ */ jsx41(
+        showJumpIndicator && space.jumpTo && /* @__PURE__ */ jsxs23("g", { transform: `translate(${halfSize - 6}, ${-halfSize + 6})`, children: [
+          /* @__PURE__ */ jsx40("circle", { r: 6, fill: "#fbbf24" }),
+          /* @__PURE__ */ jsx40(
             "text",
             {
               textAnchor: "middle",
@@ -9774,7 +9541,7 @@ function DefaultTrackPiece({
   const offset = total > 1 ? spacing : 0;
   const px = Math.cos(angle) * offset;
   const py = Math.sin(angle) * offset;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx40(
     "circle",
     {
       cx: px,
@@ -9802,7 +9569,7 @@ function DefaultTrackConnection({
   strokeWidth = 2,
   className
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx40(
     "line",
     {
       x1: from.x,
@@ -9837,8 +9604,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__ */ jsxs24("g", { className, children: [
-    /* @__PURE__ */ jsx41("defs", { children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs23("g", { className, children: [
+    /* @__PURE__ */ jsx40("defs", { children: /* @__PURE__ */ jsx40(
       "marker",
       {
         id: markerId,
@@ -9847,10 +9614,10 @@ function DefaultTrackJump({
         refX: "9",
         refY: "3.5",
         orient: "auto",
-        children: /* @__PURE__ */ jsx41("polygon", { points: "0 0, 10 3.5, 0 7", fill: color })
+        children: /* @__PURE__ */ jsx40("polygon", { points: "0 0, 10 3.5, 0 7", fill: color })
       }
     ) }),
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx40(
       "line",
       {
         x1: startX,
@@ -9914,7 +9681,7 @@ function TrackBoard({
       return nextSpaceIds.map((nextId) => {
         const targetSpace = spaceMap.get(nextId);
         if (!targetSpace) return null;
-        return /* @__PURE__ */ jsx41("g", { children: renderConnection(
+        return /* @__PURE__ */ jsx40("g", { children: renderConnection(
           space.position,
           targetSpace.position,
           space,
@@ -9931,7 +9698,7 @@ function TrackBoard({
       if (!targetSpace) return [];
       const isUp = targetSpace.index > space.index;
       return [
-        /* @__PURE__ */ jsx41("g", { children: renderJump(
+        /* @__PURE__ */ jsx40("g", { children: renderJump(
           space.position,
           targetSpace.position,
           space,
@@ -9947,7 +9714,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__ */ jsxs24(
+  return /* @__PURE__ */ jsxs23(
     "svg",
     {
       width,
@@ -9964,11 +9731,11 @@ function TrackBoard({
       role: "img",
       "aria-label": "Track board",
       children: [
-        /* @__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) => {
+        /* @__PURE__ */ jsx40("g", { className: "track-connections", children: renderConnections() }),
+        /* @__PURE__ */ jsx40("g", { className: "track-jumps", children: renderJumps() }),
+        /* @__PURE__ */ jsx40("g", { className: "track-spaces", role: "list", "aria-label": "Track spaces", children: spaces.map((space) => {
           const spacePieces = piecesBySpace[space.id] || [];
-          return /* @__PURE__ */ jsx41(
+          return /* @__PURE__ */ jsx40(
             "g",
             {
               transform: `translate(${space.position.x}, ${space.position.y})`,
@@ -9977,12 +9744,12 @@ function TrackBoard({
             space.id
           );
         }) }),
-        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs24(
+        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs23(
           "g",
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx40(
                 "rect",
                 {
                   x: 0,
@@ -9993,7 +9760,7 @@ function TrackBoard({
                   fill: "rgba(0,0,0,0.6)"
                 }
               ),
-              /* @__PURE__ */ jsxs24("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),
                 "%"
               ] })
@@ -10009,7 +9776,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 jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 var EMPTY_SLOT_OCCUPANTS = [];
 function DefaultSlotItem({
   name,
@@ -10033,7 +9800,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__ */ jsxs25(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       onClick: isAvailable ? onClick : void 0,
@@ -10055,9 +9822,9 @@ function DefaultSlotItem({
       "aria-disabled": !isAvailable,
       tabIndex: isAvailable && onClick ? 0 : void 0,
       children: [
-        /* @__PURE__ */ jsxs25("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ jsxs25("div", { children: [
-            /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs24("div", { children: [
+            /* @__PURE__ */ jsx41(
               "h3",
               {
                 className: "font-bold",
@@ -10065,7 +9832,7 @@ function DefaultSlotItem({
                 children: name
               }
             ),
-            description && /* @__PURE__ */ jsx42(
+            description && /* @__PURE__ */ jsx41(
               "p",
               {
                 className: "text-xs mt-0.5",
@@ -10074,8 +9841,8 @@ function DefaultSlotItem({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-1", children: [
-            isExclusive && /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1", children: [
+            isExclusive && /* @__PURE__ */ jsx41(
               Lock,
               {
                 className: "w-4 h-4",
@@ -10083,46 +9850,46 @@ function DefaultSlotItem({
                 "aria-label": "Exclusive slot"
               }
             ),
-            capacity > 1 && /* @__PURE__ */ jsxs25(
+            capacity > 1 && /* @__PURE__ */ jsxs24(
               "div",
               {
                 className: "flex items-center gap-0.5 text-xs",
                 style: { color: theme.semantic.text.muted },
                 title: `Capacity: ${capacity}`,
                 children: [
-                  /* @__PURE__ */ jsx42(Users, { className: "w-3 h-3" }),
-                  /* @__PURE__ */ jsx42("span", { children: capacity })
+                  /* @__PURE__ */ jsx41(Users, { className: "w-3 h-3" }),
+                  /* @__PURE__ */ jsx41("span", { children: capacity })
                 ]
               }
             )
           ] })
         ] }),
-        (costLabel || rewardLabel) && /* @__PURE__ */ jsxs25("div", { className: "mt-2 flex flex-wrap gap-2 text-xs", children: [
-          costLabel && /* @__PURE__ */ jsxs25(
+        (costLabel || rewardLabel) && /* @__PURE__ */ jsxs24("div", { className: "mt-2 flex flex-wrap gap-2 text-xs", children: [
+          costLabel && /* @__PURE__ */ jsxs24(
             "div",
             {
               className: "flex items-center gap-1",
               style: { color: theme.semantic.intent.danger.solid },
               children: [
-                /* @__PURE__ */ jsx42(Coins, { className: "w-3 h-3", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx42("span", { children: costLabel })
+                /* @__PURE__ */ jsx41(Coins, { className: "w-3 h-3", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx41("span", { children: costLabel })
               ]
             }
           ),
-          rewardLabel && /* @__PURE__ */ jsxs25(
+          rewardLabel && /* @__PURE__ */ jsxs24(
             "div",
             {
               className: "flex items-center gap-1",
               style: { color: theme.semantic.intent.success.solid },
               children: [
-                /* @__PURE__ */ jsx42(Gift, { className: "w-3 h-3", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx42("span", { children: rewardLabel })
+                /* @__PURE__ */ jsx41(Gift, { className: "w-3 h-3", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx41("span", { children: rewardLabel })
               ]
             }
           )
         ] }),
-        renderOccupants && /* @__PURE__ */ jsx42("div", { className: "mt-2", children: renderOccupants() }),
-        !isAvailable && !isFull && /* @__PURE__ */ jsx42(
+        renderOccupants && /* @__PURE__ */ jsx41("div", { className: "mt-2", children: renderOccupants() }),
+        !isAvailable && !isFull && /* @__PURE__ */ jsx41(
           "div",
           {
             className: "mt-2 text-xs",
@@ -10142,7 +9909,7 @@ function DefaultSlotOccupant({
   onClick,
   className
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       onClick,
@@ -10170,7 +9937,7 @@ function DefaultEmptySlot({
   className
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       className: clsx19("rounded-full border-2 border-dashed", className),
@@ -10225,18 +9992,18 @@ function SlotSystem({
   }, [slots, layout]);
   const renderSlotItem = (slot) => {
     const slotOccupants = occupantsBySlot[slot.id] ?? [];
-    return /* @__PURE__ */ jsx42("div", { role: "listitem", "aria-label": slot.name, children: renderSlot(slot, slotOccupants) }, slot.id);
+    return /* @__PURE__ */ jsx41("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__ */ jsx42("div", { style: { width, height }, className: clsx19("slot-system", className), children: content });
+  const wrapContent = (content) => /* @__PURE__ */ jsx41("div", { style: { width, height }, className: clsx19("slot-system", className), children: content });
   if (layout === "grouped" && slotGroups) {
     return wrapContent(
-      /* @__PURE__ */ jsx42("div", { className: "space-y-6", role: "list", children: Object.entries(slotGroups).map(([groupName, groupSlots]) => /* @__PURE__ */ jsxs25("div", { children: [
-        /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx41("div", { className: "space-y-6", role: "list", children: Object.entries(slotGroups).map(([groupName, groupSlots]) => /* @__PURE__ */ jsxs24("div", { children: [
+        /* @__PURE__ */ jsx41(
           "h3",
           {
             className: "text-lg font-semibold mb-3",
@@ -10244,17 +10011,17 @@ function SlotSystem({
             children: groupName
           }
         ),
-        /* @__PURE__ */ jsx42("div", { style: responsiveGridStyle, children: groupSlots.map(renderSlotItem) })
+        /* @__PURE__ */ jsx41("div", { style: responsiveGridStyle, children: groupSlots.map(renderSlotItem) })
       ] }, groupName)) })
     );
   }
   if (layout === "list") {
     return wrapContent(
-      /* @__PURE__ */ jsx42("div", { className: "flex flex-col gap-2", role: "list", children: slots.map(renderSlotItem) })
+      /* @__PURE__ */ jsx41("div", { className: "flex flex-col gap-2", role: "list", children: slots.map(renderSlotItem) })
     );
   }
   return wrapContent(
-    /* @__PURE__ */ jsx42("div", { style: responsiveGridStyle, role: "list", children: slots.map(renderSlotItem) })
+    /* @__PURE__ */ jsx41("div", { style: responsiveGridStyle, role: "list", children: slots.map(renderSlotItem) })
   );
 }
 
@@ -10376,7 +10143,7 @@ function isInteractiveTargetSelectable(layer, state) {
 }
 
 // src/ui/components/board/tiled-grid/interactive-layer.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function InteractiveTargetLayerGroup({
   layer,
   targets,
@@ -10384,7 +10151,6 @@ function InteractiveTargetLayerGroup({
   targetKind,
   groupClassName,
   groupAriaLabel,
-  groupRole,
   browserAttributeOrder,
   selectMode,
   hover,
@@ -10392,7 +10158,7 @@ function InteractiveTargetLayerGroup({
   renderTargetContent
 }) {
   const { hoveredTargetId, setHoveredTargetId } = hover;
-  return /* @__PURE__ */ jsx43("g", { className: groupClassName, role: groupRole, "aria-label": groupAriaLabel, children: targets.map((target) => {
+  return /* @__PURE__ */ jsx42("g", { className: groupClassName, role: "group", "aria-label": groupAriaLabel, children: targets.map((target) => {
     const targetId = getTargetId(target);
     const state = interactiveTargetRenderState(
       layer,
@@ -10409,7 +10175,7 @@ function InteractiveTargetLayerGroup({
       // HexGrid markup variant: browserAttributes spread first, then
       // transform, role, className (preserves HexGrid's rendered
       // attribute order).
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx42(
         "g",
         {
           ...state.browserAttributes,
@@ -10435,7 +10201,7 @@ function InteractiveTargetLayerGroup({
       // SquareGrid markup variant: transform first, then browser
       // attributes, className, role (preserves SquareGrid's rendered
       // attribute order while exposing semantic replay metadata).
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx42(
         "g",
         {
           ...getTargetTransform ? { transform: getTargetTransform(target) } : {},
@@ -10467,7 +10233,7 @@ function resolveBoardProp(props, buildInlineBoard) {
 }
 
 // src/ui/components/board/SquareGrid.tsx
-import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
 function DefaultGridCell({
   size,
   isLight = true,
@@ -10485,7 +10251,7 @@ function DefaultGridCell({
   className
 }) {
   const baseColor = isLight ? lightColor : darkColor;
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     "g",
     {
       onClick,
@@ -10501,8 +10267,8 @@ function DefaultGridCell({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Grid cell" : void 0,
       children: [
-        /* @__PURE__ */ jsx44("rect", { width: size, height: size, fill: baseColor }),
-        isSelected && /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx43("rect", { width: size, height: size, fill: baseColor }),
+        isSelected && /* @__PURE__ */ jsx43(
           "rect",
           {
             width: size,
@@ -10511,7 +10277,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isHighlighted && !isSelected && /* @__PURE__ */ jsx44(
+        isHighlighted && !isSelected && /* @__PURE__ */ jsx43(
           "rect",
           {
             width: size,
@@ -10520,7 +10286,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isValidMove && !isCapture && /* @__PURE__ */ jsx44(
+        isValidMove && !isCapture && /* @__PURE__ */ jsx43(
           "circle",
           {
             cx: size / 2,
@@ -10530,7 +10296,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isCapture && /* @__PURE__ */ jsx44(
+        isCapture && /* @__PURE__ */ jsx43(
           "circle",
           {
             cx: size / 2,
@@ -10558,7 +10324,7 @@ function DefaultGridPiece({
 }) {
   const radius = size * 0.38;
   const effectiveStroke = strokeColor ?? (color === "#f8fafc" || color === "#ffffff" ? "#1e293b" : "#f8fafc");
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     "g",
     {
       onClick,
@@ -10574,7 +10340,7 @@ function DefaultGridPiece({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Grid piece" : void 0,
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx43(
           "circle",
           {
             r: isDragging ? radius * 1.1 : radius,
@@ -10584,7 +10350,7 @@ function DefaultGridPiece({
             style: { filter: "drop-shadow(1px 2px 2px rgba(0,0,0,0.4))" }
           }
         ),
-        label && /* @__PURE__ */ jsx44(
+        label && /* @__PURE__ */ jsx43(
           "text",
           {
             y: 4,
@@ -10629,7 +10395,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__ */ jsx44(
+  return /* @__PURE__ */ jsx43(
     "g",
     {
       onClick,
@@ -10642,7 +10408,7 @@ function DefaultChessPiece({
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? `${owner} ${type}` : void 0,
-      children: /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsx43(
         "text",
         {
           textAnchor: "middle",
@@ -10899,7 +10665,7 @@ function SquareGridImpl(props) {
     bounds: { minX: 0, minY: 0, width: totalWidth, height: totalHeight },
     viewBoxMode: "static-when-disabled"
   });
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     "svg",
     {
       width: svgWidth,
@@ -10913,14 +10679,14 @@ function SquareGridImpl(props) {
         className
       ),
       ...bind(),
-      role: "img",
+      role: "group",
       "aria-label": `${rows}x${cols} game grid`,
       children: [
-        /* @__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 }) => {
+        /* @__PURE__ */ jsx43("defs", { children: /* @__PURE__ */ jsx43("filter", { id: "pieceShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx43("feDropShadow", { dx: "1", dy: "2", stdDeviation: "2", floodOpacity: "0.4" }) }) }),
+        /* @__PURE__ */ jsx43("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__ */ jsx44(
+          return /* @__PURE__ */ jsx43(
             "g",
             {
               transform: `translate(${x}, ${y})`,
@@ -10931,7 +10697,7 @@ function SquareGridImpl(props) {
             `${row}-${col}`
           );
         }) }),
-        interactiveSpaces && /* @__PURE__ */ jsx44(
+        interactiveSpaces && /* @__PURE__ */ jsx43(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveSpaces,
@@ -10944,8 +10710,8 @@ function SquareGridImpl(props) {
             selectMode: "layer-direct",
             hover: spaceHover,
             getTargetTransform: (space) => `translate(${labelMargin + space.col * cellSize}, ${space.row * cellSize})`,
-            renderTargetContent: (space, state, isSelectable) => /* @__PURE__ */ jsxs26(Fragment6, { children: [
-              isSelectable && /* @__PURE__ */ jsx44(
+            renderTargetContent: (space, state, isSelectable) => /* @__PURE__ */ jsxs25(Fragment6, { children: [
+              isSelectable && /* @__PURE__ */ jsx43(
                 "rect",
                 {
                   x: 0,
@@ -10960,8 +10726,8 @@ function SquareGridImpl(props) {
             ] })
           }
         ),
-        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(
+        renderEdge && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx43("g", { className: "edges", "aria-label": "Board edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => /* @__PURE__ */ jsx43("g", { children: renderEdge(edge, interactiveEdge.position) }, edge.id)) }),
+        interactiveEdges && /* @__PURE__ */ jsx43(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveEdges,
@@ -10973,7 +10739,7 @@ function SquareGridImpl(props) {
             browserAttributeOrder: "after-transform",
             selectMode: "layer-direct",
             hover: edgeHover,
-            renderTargetContent: ({ interactiveEdge: edge }, state) => renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx44(
+            renderTargetContent: ({ interactiveEdge: edge }, state) => renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx43(
               "line",
               {
                 x1: edge.position.x1,
@@ -10987,8 +10753,8 @@ function SquareGridImpl(props) {
             ) : null
           }
         ),
-        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(
+        renderVertex && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx43("g", { className: "vertices", "aria-label": "Board vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => /* @__PURE__ */ jsx43("g", { children: renderVertex(vertex, interactiveVertex.position) }, vertex.id)) }),
+        interactiveVertices && /* @__PURE__ */ jsx43(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveVertices,
@@ -11000,7 +10766,7 @@ function SquareGridImpl(props) {
             browserAttributeOrder: "after-transform",
             selectMode: "layer-direct",
             hover: vertexHover,
-            renderTargetContent: ({ interactiveVertex: vertex }, state) => renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx44(
+            renderTargetContent: ({ interactiveVertex: vertex }, state) => renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx43(
               "circle",
               {
                 cx: vertex.position.x,
@@ -11012,10 +10778,10 @@ function SquareGridImpl(props) {
             ) : null
           }
         ),
-        showCoordinates && coordinateStyle !== "none" && /* @__PURE__ */ jsxs26("g", { className: "coordinates", "aria-hidden": "true", children: [
+        showCoordinates && coordinateStyle !== "none" && /* @__PURE__ */ jsxs25("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__ */ jsx44(
+            return /* @__PURE__ */ jsx43(
               "text",
               {
                 x: labelMargin + col * cellSize + cellSize / 2,
@@ -11031,7 +10797,7 @@ function SquareGridImpl(props) {
           }),
           Array.from({ length: rows }).map((_, row) => {
             const label = coordinateStyle === "algebraic" ? String(rows - row) : String(row + 1);
-            return /* @__PURE__ */ jsx44(
+            return /* @__PURE__ */ jsx43(
               "text",
               {
                 x: 10,
@@ -11046,10 +10812,10 @@ function SquareGridImpl(props) {
             );
           })
         ] }),
-        /* @__PURE__ */ jsx44("g", { className: "pieces", role: "list", "aria-label": "Game pieces", children: resolvedPieces.map((piece) => {
+        /* @__PURE__ */ jsx43("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__ */ jsx44(
+          return /* @__PURE__ */ jsx43(
             "g",
             {
               transform: `translate(${x}, ${y})`,
@@ -11060,7 +10826,7 @@ function SquareGridImpl(props) {
             piece.id
           );
         }) }),
-        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx44(
+        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx43(
           GridZoomIndicator,
           {
             viewBoxX,
@@ -11078,7 +10844,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 jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
 function DefaultHexTile({
   size,
   fill,
@@ -11099,7 +10865,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__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26(
     "g",
     {
       onClick,
@@ -11115,7 +10881,7 @@ function DefaultHexTile({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Hex tile" : void 0,
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx44(
           "polygon",
           {
             points,
@@ -11125,7 +10891,7 @@ function DefaultHexTile({
             filter: "url(#hexShadow)"
           }
         ),
-        label && /* @__PURE__ */ jsx45(
+        label && /* @__PURE__ */ jsx44(
           "text",
           {
             x: 0,
@@ -11140,7 +10906,7 @@ function DefaultHexTile({
             children: label
           }
         ),
-        showCoordinates && coordinates && /* @__PURE__ */ jsxs27(
+        showCoordinates && coordinates && /* @__PURE__ */ jsxs26(
           "text",
           {
             x: 0,
@@ -11174,7 +10940,7 @@ function DefaultHexEdge({
     position.x2 - position.x1,
     position.y2 - position.y1
   );
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26(
     "g",
     {
       onClick,
@@ -11188,7 +10954,7 @@ function DefaultHexEdge({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Hex edge" : void 0,
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx44(
           "rect",
           {
             x: position.midX - touchTargetLength / 2,
@@ -11201,7 +10967,7 @@ function DefaultHexEdge({
             pointerEvents: "all"
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx44(
           "line",
           {
             x1: position.x1,
@@ -11237,7 +11003,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__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26(
     "g",
     {
       onClick,
@@ -11254,7 +11020,7 @@ function DefaultHexVertex({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Hex vertex" : void 0,
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx44(
           "circle",
           {
             cx: position.x,
@@ -11264,7 +11030,7 @@ function DefaultHexVertex({
             pointerEvents: "all"
           }
         ),
-        shape === "square" ? /* @__PURE__ */ jsx45(
+        shape === "square" ? /* @__PURE__ */ jsx44(
           "rect",
           {
             x: position.x - size,
@@ -11276,7 +11042,7 @@ function DefaultHexVertex({
             strokeWidth: effectiveStrokeWidth,
             className: hasOwner ? "" : "opacity-30"
           }
-        ) : /* @__PURE__ */ jsx45(
+        ) : /* @__PURE__ */ jsx44(
           "circle",
           {
             cx: position.x,
@@ -11300,7 +11066,7 @@ function DefaultInteractiveVertex({
   hoverColor = "rgba(34, 197, 94, 0.8)",
   className
 }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44(
     "circle",
     {
       cx: position.x,
@@ -11321,7 +11087,7 @@ function DefaultInteractiveEdge({
   hoverColor = "rgba(251, 146, 60, 0.8)",
   className
 }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44(
     "line",
     {
       x1: position.x1,
@@ -11601,7 +11367,7 @@ function HexGridImpl(props) {
     bounds,
     viewBoxMode: "transformed"
   });
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26(
     "svg",
     {
       width,
@@ -11615,21 +11381,21 @@ function HexGridImpl(props) {
         className
       ),
       ...bind(),
-      role: "img",
+      role: "group",
       "aria-label": "Hex grid game board",
       children: [
-        /* @__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__ */ jsxs26("defs", { children: [
+          /* @__PURE__ */ jsxs26("linearGradient", { id: "oceanGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ jsx44("stop", { offset: "0%", stopColor: "#0ea5e9" }),
+            /* @__PURE__ */ jsx44("stop", { offset: "100%", stopColor: "#0284c7" })
           ] }),
-          /* @__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__ */ jsx44("filter", { id: "hexShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx44("feDropShadow", { dx: "1", dy: "1", stdDeviation: "2", floodOpacity: "0.3" }) })
         ] }),
-        /* @__PURE__ */ jsx45("g", { className: "tiles", role: "list", "aria-label": "Hex tiles", children: resolvedTiles.map((tile) => {
+        /* @__PURE__ */ jsx44("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__ */ jsx45(
+          return /* @__PURE__ */ jsx44(
             "g",
             {
               transform: `translate(${pos.x}, ${pos.y})`,
@@ -11640,7 +11406,7 @@ function HexGridImpl(props) {
             tile.id
           );
         }) }),
-        interactiveSpaces && resolvedTiles.length > 0 && /* @__PURE__ */ jsx45(
+        interactiveSpaces && resolvedTiles.length > 0 && /* @__PURE__ */ jsx44(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveSpaces,
@@ -11649,13 +11415,12 @@ function HexGridImpl(props) {
             targetKind: "space",
             groupClassName: "interactive-spaces",
             groupAriaLabel: "Interactive spaces",
-            groupRole: "list",
             browserAttributeOrder: "before-transform",
             selectMode: "render-state",
             hover: spaceHover,
             getTargetTransform: ({ pos }) => `translate(${pos.x}, ${pos.y})`,
-            renderTargetContent: ({ space, pos }, state, isSelectable) => /* @__PURE__ */ jsxs27(Fragment7, { children: [
-              isSelectable && /* @__PURE__ */ jsx45(
+            renderTargetContent: ({ space, pos }, state, isSelectable) => /* @__PURE__ */ jsxs26(Fragment7, { children: [
+              isSelectable && /* @__PURE__ */ jsx44(
                 "polygon",
                 {
                   points: buildTileGeometry(pos).points({
@@ -11669,13 +11434,13 @@ function HexGridImpl(props) {
             ] })
           }
         ),
-        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);
+        resolvedEdges.length > 0 && /* @__PURE__ */ jsx44("g", { className: "edges", role: "list", "aria-label": "Hex edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => {
+          return /* @__PURE__ */ jsx44("g", { role: "listitem", children: renderEdge(edge, interactiveEdge.position) }, edge.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);
+        resolvedVertices.length > 0 && /* @__PURE__ */ jsx44("g", { className: "vertices", role: "list", "aria-label": "Hex vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => {
+          return /* @__PURE__ */ jsx44("g", { role: "listitem", children: renderVertex(vertex, interactiveVertex.position) }, vertex.id);
         }) }),
-        interactiveEdges && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx45(
+        interactiveEdges && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx44(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveEdges,
@@ -11684,7 +11449,6 @@ function HexGridImpl(props) {
             targetKind: "edge",
             groupClassName: "interactive-edges",
             groupAriaLabel: "Interactive edges for placement",
-            groupRole: "list",
             browserAttributeOrder: "before-transform",
             selectMode: "render-state",
             hover: edgeHover,
@@ -11693,8 +11457,8 @@ function HexGridImpl(props) {
                 edge.position.x2 - edge.position.x1,
                 edge.position.y2 - edge.position.y1
               );
-              return /* @__PURE__ */ jsxs27(Fragment7, { children: [
-                isSelectable && /* @__PURE__ */ jsx45(
+              return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+                isSelectable && /* @__PURE__ */ jsx44(
                   "rect",
                   {
                     x: edge.position.midX - touchTargetLength / 2,
@@ -11707,7 +11471,7 @@ function HexGridImpl(props) {
                     pointerEvents: "all"
                   }
                 ),
-                renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx45(
+                renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx44(
                   DefaultInteractiveEdge,
                   {
                     position: edge.position,
@@ -11719,7 +11483,7 @@ function HexGridImpl(props) {
             }
           }
         ),
-        interactiveVertices && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx45(
+        interactiveVertices && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx44(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveVertices,
@@ -11728,12 +11492,11 @@ function HexGridImpl(props) {
             targetKind: "vertex",
             groupClassName: "interactive-vertices",
             groupAriaLabel: "Interactive vertices for placement",
-            groupRole: "list",
             browserAttributeOrder: "before-transform",
             selectMode: "render-state",
             hover: vertexHover,
-            renderTargetContent: ({ interactiveVertex: vertex }, state, isSelectable) => /* @__PURE__ */ jsxs27(Fragment7, { children: [
-              isSelectable && /* @__PURE__ */ jsx45(
+            renderTargetContent: ({ interactiveVertex: vertex }, state, isSelectable) => /* @__PURE__ */ jsxs26(Fragment7, { children: [
+              isSelectable && /* @__PURE__ */ jsx44(
                 "circle",
                 {
                   cx: vertex.position.x,
@@ -11743,7 +11506,7 @@ function HexGridImpl(props) {
                   pointerEvents: "all"
                 }
               ),
-              renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx45(
+              renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx44(
                 DefaultInteractiveVertex,
                 {
                   position: vertex.position,
@@ -11754,7 +11517,7 @@ function HexGridImpl(props) {
             ] })
           }
         ),
-        effectivePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx45(
+        effectivePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx44(
           GridZoomIndicator,
           {
             viewBoxX,
@@ -11909,8 +11672,6 @@ export {
   ActionHelp,
   StandingsTable,
   OutcomeDialog,
-  SystemActionSummary,
-  GameEventLog,
   DefaultNetworkNode,
   DefaultNetworkEdge,
   DefaultNetworkPiece,
@@ -11941,4 +11702,4 @@ export {
   HexGrid,
   createHexBoardView
 };
-//# sourceMappingURL=chunk-2TRZSZGD.js.map
+//# sourceMappingURL=chunk-32PFKDV7.js.map