@dreamboard-games/sdk 0.4.0-alpha.1 → 0.4.0-alpha.2

package/dist/{chunk-7W6TQO3X.js → chunk-45FI6XII.js}

@@ -3631,7 +3631,8 @@ function CardDropTargetView({
   className,
   style,
   order,
-  role = "button"
+  role = "button",
+  browserInteractionAttributes
 }) {
   const surface = useCardDragSurface();
   const ref = useRef4(null);
@@ -3715,6 +3716,7 @@ function CardDropTargetView({
     "div",
     {
       ref,
+      ...browserInteractionAttributes,
       "data-dreamboard-card-drop-target": "",
       "data-target-id": targetId,
       "data-keyboard-focused": keyboardFocused ? "true" : void 0,
@@ -4711,6 +4713,9 @@ import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var MobileHandTrayContext = createContext4(
   null
 );
+var OverlayInsetContext = createContext4(
+  null
+);
 var MobileHandTrayStateContext = createContext4({
   active: false
 });
@@ -4728,6 +4733,7 @@ var DOCK_SNAP_MAX_HEIGHT = {
 };
 function MobileHandTrayProvider({ children }) {
   const [handsById, setHandsById] = useState11(() => /* @__PURE__ */ new Map());
+  const [bottomOverlayInsets, setBottomOverlayInsets] = useState11(() => /* @__PURE__ */ new Map());
   const isMobile = useIsMobile();
   const registerHand = useCallback10((hand) => {
     setHandsById((current) => {
@@ -4752,6 +4758,38 @@ function MobileHandTrayProvider({ children }) {
     () => ({ registerHand }),
     [registerHand]
   );
+  const registerBottomOverlayInset = useCallback10(
+    (id, height) => {
+      const normalizedHeight = Math.max(0, Math.ceil(height));
+      setBottomOverlayInsets((current) => {
+        if (current.get(id) === normalizedHeight) return current;
+        const next = new Map(current);
+        if (normalizedHeight === 0) next.delete(id);
+        else next.set(id, normalizedHeight);
+        return next;
+      });
+      return () => {
+        setBottomOverlayInsets((current) => {
+          if (!current.has(id)) return current;
+          const next = new Map(current);
+          next.delete(id);
+          return next;
+        });
+      };
+    },
+    []
+  );
+  const bottomInset = useMemo9(
+    () => [...bottomOverlayInsets.values()].reduce(
+      (total, height) => total + height,
+      0
+    ),
+    [bottomOverlayInsets]
+  );
+  const overlayValue = useMemo9(
+    () => ({ bottomInset, registerBottomOverlayInset }),
+    [bottomInset, registerBottomOverlayInset]
+  );
   const hands = useMemo9(
     () => [...handsById.values()].sort(
       (a, b) => (a.order ?? ROLE_PRIORITY[a.role]) - (b.order ?? ROLE_PRIORITY[b.role]) || ROLE_PRIORITY[a.role] - ROLE_PRIORITY[b.role] || a.label.localeCompare(b.label)
@@ -4760,22 +4798,19 @@ function MobileHandTrayProvider({ children }) {
   );
   const trayActive = isMobile && hands.length > 0;
   const stateValue = useMemo9(() => ({ active: trayActive }), [trayActive]);
-  return /* @__PURE__ */ jsx14(MobileHandTrayContext.Provider, { value, children: /* @__PURE__ */ jsxs6(MobileHandTrayStateContext.Provider, { value: stateValue, children: [
+  return /* @__PURE__ */ jsx14(MobileHandTrayContext.Provider, { value, children: /* @__PURE__ */ jsx14(OverlayInsetContext.Provider, { value: overlayValue, children: /* @__PURE__ */ jsxs6(MobileHandTrayStateContext.Provider, { value: stateValue, children: [
     /* @__PURE__ */ jsx14(
       "div",
       {
         "data-dreamboard-mobile-hand-shell": "",
         "data-mobile-hand-count": hands.length,
         "data-mobile-hand-tray-active": trayActive ? "true" : void 0,
-        style: {
-          minHeight: "100%",
-          paddingBottom: trayActive ? "calc(92px + env(safe-area-inset-bottom, 0px))" : void 0
-        },
+        style: { minHeight: "100%" },
         children
       }
     ),
     trayActive ? /* @__PURE__ */ jsx14(MobileHandTray, { hands }) : null
-  ] }) });
+  ] }) }) });
 }
 function useRegisterMobileHand(hand) {
   const context = useContext4(MobileHandTrayContext);
@@ -4789,6 +4824,17 @@ function useRegisterMobileHand(hand) {
 function useMobileHandTrayActive() {
   return useContext4(MobileHandTrayStateContext).active;
 }
+function useOverlayInsets() {
+  const context = useContext4(OverlayInsetContext);
+  return { bottom: context?.bottomInset ?? 0 };
+}
+function useRegisterBottomOverlayInset(id, height) {
+  const context = useContext4(OverlayInsetContext);
+  useEffect10(() => {
+    if (!context) return void 0;
+    return context.registerBottomOverlayInset(id, height);
+  }, [context, height, id]);
+}
 function MobileHandTray({
   hands
 }) {
@@ -4806,6 +4852,7 @@ function MobileHandTray({
   }, []);
   const [activeId, setActiveId] = useState11(null);
   const themeCssVars = useThemeCssVars();
+  const panelRef = useRef7(null);
   const preferredHand = hands.find((hand) => hand.id === activeId) ?? hands.find((hand) => hand.active) ?? hands.find((hand) => hand.role === "primary") ?? hands[0] ?? null;
   const selectedHand = hands.find((hand) => hand.id === activeId) ?? preferredHand;
   useEffect10(() => {
@@ -4837,6 +4884,50 @@ function MobileHandTray({
   const activeBadges = hands.filter(
     (hand) => hand.id !== selectedHand.id && hand.active
   );
+  return /* @__PURE__ */ jsx14(
+    MobileHandTrayFrame,
+    {
+      panelRef,
+      snap,
+      selectedHand,
+      hands,
+      open,
+      active,
+      activeBadges,
+      bindDrag,
+      setSnap,
+      setActiveId,
+      themeCssVars
+    }
+  );
+}
+function MobileHandTrayFrame({
+  panelRef,
+  snap,
+  selectedHand,
+  hands,
+  open,
+  active,
+  activeBadges,
+  bindDrag,
+  setSnap,
+  setActiveId,
+  themeCssVars
+}) {
+  const [measuredHeight, setMeasuredHeight] = useState11(0);
+  useEffect10(() => {
+    const node = panelRef.current;
+    if (!node) {
+      setMeasuredHeight(0);
+      return void 0;
+    }
+    const update = () => setMeasuredHeight(node.getBoundingClientRect().height);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [panelRef, snap, selectedHand.id, hands.length]);
+  useRegisterBottomOverlayInset("dreamboard-mobile-hand-tray", measuredHeight);
   return /* @__PURE__ */ jsx14(
     "div",
     {
@@ -4859,6 +4950,7 @@ function MobileHandTray({
       children: /* @__PURE__ */ jsxs6(
         "div",
         {
+          ref: panelRef,
           className: "flex w-full flex-col overflow-hidden rounded-t-2xl",
           style: {
             pointerEvents: "auto",
@@ -4974,7 +5066,7 @@ function MobileHandTray({
                     {
                       className: "px-3 pt-2 sm:px-4",
                       style: {
-                        paddingBottom: "calc(20px + env(safe-area-inset-bottom, 0px))"
+                        paddingBottom: 20
                       },
                       children: selectedHand.content
                     }
@@ -6449,6 +6541,172 @@ function PrimaryButton({
   );
 }
 
+// src/ui/components/Panel.tsx
+import { clsx as clsx13 } from "clsx";
+import { jsx as jsx29 } from "react/jsx-runtime";
+function PanelRoot({
+  tone = "card",
+  className,
+  children,
+  style,
+  ...props
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx29(
+    "section",
+    {
+      "data-dreamboard-panel": "",
+      "data-tone": tone,
+      className,
+      style: {
+        ...surfaceStyle(theme, { tone, radius: "hud" }),
+        boxShadow: theme.elevation.rest,
+        overflow: "hidden",
+        fontFamily: theme.typography.fontFamily.body,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function PanelHeader({
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx29(
+    "div",
+    {
+      "data-dreamboard-panel-header": "",
+      className,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.space[1],
+        padding: `${theme.space[3]} ${theme.space[4]}`,
+        borderBottom: `1px solid ${theme.semantic.border.subtle}`,
+        background: theme.semantic.surface.hud,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function PanelTitle({
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx29(
+    "h2",
+    {
+      "data-dreamboard-panel-title": "",
+      className,
+      style: {
+        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,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function PanelDescription({
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx29(
+    "p",
+    {
+      "data-dreamboard-panel-description": "",
+      className,
+      style: {
+        margin: 0,
+        color: theme.semantic.text.muted,
+        fontSize: theme.typography.fontSize.sm,
+        lineHeight: theme.typography.lineHeight.normal,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function PanelBody({
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx29(
+    "div",
+    {
+      "data-dreamboard-panel-body": "",
+      className: clsx13("min-w-0", className),
+      style: {
+        padding: theme.space[4],
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.space[4],
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function PanelActions({
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx29(
+    "div",
+    {
+      "data-dreamboard-panel-actions": "",
+      className,
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: theme.space[2],
+        padding: `${theme.space[3]} ${theme.space[4]}`,
+        borderTop: `1px solid ${theme.semantic.border.subtle}`,
+        background: theme.semantic.surface.inset,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+var Panel = {
+  Root: PanelRoot,
+  Header: PanelHeader,
+  Title: PanelTitle,
+  Description: PanelDescription,
+  Body: PanelBody,
+  Actions: PanelActions
+};
+
 // src/ui/components/PrimaryActionButton.tsx
 import {
   useEffect as useEffect11,
@@ -6456,7 +6714,7 @@ import {
   useState as useState13
 } from "react";
 import { motion as motion5 } from "framer-motion";
-import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
 function PrimaryActionButton({
   variant = "primary",
   size = "lg",
@@ -6493,7 +6751,7 @@ function PrimaryActionButton({
   const haloEnabled = !reducedMotion && available && attention !== "off" && !submitted;
   const tooltip = available ? void 0 : formatUnavailableReason(unavailableReason);
   const resolvedLabel = submitted ? whenSubmitted?.label ?? label : label;
-  const resolvedIcon = submitted && whenSubmitted?.icon ? /* @__PURE__ */ jsx29("span", { "aria-hidden": true, style: { fontSize: "1.15em" }, children: whenSubmitted.icon }) : icon ?? null;
+  const resolvedIcon = submitted && whenSubmitted?.icon ? /* @__PURE__ */ jsx30("span", { "aria-hidden": true, style: { fontSize: "1.15em" }, children: whenSubmitted.icon }) : icon ?? null;
   return /* @__PURE__ */ jsxs14(
     "span",
     {
@@ -6513,7 +6771,7 @@ function PrimaryActionButton({
       },
       children: [
         haloEnabled ? /* @__PURE__ */ jsxs14(Fragment4, { children: [
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             motion5.span,
             {
               "aria-hidden": true,
@@ -6536,7 +6794,7 @@ function PrimaryActionButton({
               }
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             motion5.span,
             {
               "aria-hidden": true,
@@ -6593,7 +6851,7 @@ function PrimaryActionButton({
             },
             children: [
               resolvedIcon,
-              /* @__PURE__ */ jsx29("span", { children: resolvedLabel })
+              /* @__PURE__ */ jsx30("span", { children: resolvedLabel })
             ]
           }
         )
@@ -6631,7 +6889,7 @@ function withAlpha(color, alpha) {
 import { useId as useId4, useState as useState14 } from "react";
 import { motion as motion6, AnimatePresence as AnimatePresence4 } from "framer-motion";
 import { ChevronUp } from "lucide-react";
-import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
 function ActionPanel({
   title = "Actions",
   state,
@@ -6647,154 +6905,134 @@ function ActionPanel({
   const [isExpanded, setIsExpanded] = useState14(defaultExpanded);
   const [isHovered, setIsHovered] = useState14(false);
   const stateLabel = state ? stateLabels?.[state] || state.replace(/([A-Z])/g, " $1").trim() : void 0;
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx31(
     motion6.div,
     {
       initial: reducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 },
       animate: reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 },
       className,
-      "data-dreamboard-action-panel": "",
-      "data-state": isExpanded ? "open" : "closed",
-      "data-collapsible": collapsible ? "true" : void 0,
-      style: {
-        ...surfaceStyle(theme, { tone: "card", radius: "hud" }),
-        boxShadow: theme.elevation.rest,
-        overflow: "hidden"
-      },
-      role: "region",
-      "aria-label": title,
-      children: [
-        /* @__PURE__ */ jsxs15(
-          "button",
-          {
-            type: "button",
-            onClick: () => collapsible && setIsExpanded(!isExpanded),
-            onMouseEnter: () => setIsHovered(true),
-            onMouseLeave: () => setIsHovered(false),
-            disabled: !collapsible,
-            "aria-expanded": isExpanded,
-            "aria-controls": contentId,
-            style: {
-              width: "100%",
-              padding: `${theme.space[3]} ${theme.space[4]}`,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: theme.space[3],
-              borderBottom: isExpanded ? `1px dashed ${theme.semantic.border.subtle}` : "1px solid transparent",
-              background: collapsible && isHovered ? theme.semantic.surface.inset : theme.semantic.surface.hud,
-              color: theme.semantic.text.primary,
-              fontFamily: theme.typography.fontFamily.body,
-              cursor: collapsible ? "pointer" : "default",
-              transition: `background ${theme.motion.duration.fast} ${theme.motion.easing.out}`,
-              // Reset native button look.
-              border: "none",
-              textAlign: "left",
-              appearance: "none"
-            },
-            children: [
-              /* @__PURE__ */ jsxs15("div", { children: [
-                /* @__PURE__ */ jsx30(
-                  "h2",
-                  {
-                    style: {
-                      margin: 0,
-                      fontFamily: theme.typography.fontFamily.display,
-                      fontSize: theme.typography.fontSize.xl,
-                      fontWeight: theme.typography.fontWeight.bold,
-                      color: theme.semantic.text.primary,
-                      lineHeight: theme.typography.lineHeight.tight
-                    },
-                    children: title
-                  }
-                ),
-                stateLabel && /* @__PURE__ */ jsxs15(
-                  "p",
+      children: /* @__PURE__ */ jsxs15(
+        Panel.Root,
+        {
+          "data-dreamboard-action-panel": "",
+          "data-state": isExpanded ? "open" : "closed",
+          "data-collapsible": collapsible ? "true" : void 0,
+          role: "region",
+          "aria-label": title,
+          children: [
+            /* @__PURE__ */ jsx31(
+              "button",
+              {
+                type: "button",
+                onClick: () => collapsible && setIsExpanded(!isExpanded),
+                onMouseEnter: () => setIsHovered(true),
+                onMouseLeave: () => setIsHovered(false),
+                disabled: !collapsible,
+                "aria-expanded": isExpanded,
+                "aria-controls": contentId,
+                style: {
+                  width: "100%",
+                  display: "block",
+                  background: collapsible && isHovered ? theme.semantic.surface.inset : "transparent",
+                  color: theme.semantic.text.primary,
+                  cursor: collapsible ? "pointer" : "default",
+                  transition: `background ${theme.motion.duration.fast} ${theme.motion.easing.out}`,
+                  border: "none",
+                  textAlign: "left",
+                  appearance: "none",
+                  padding: 0
+                },
+                children: /* @__PURE__ */ jsxs15(
+                  Panel.Header,
                   {
                     style: {
-                      margin: 0,
-                      marginTop: theme.space[1],
-                      fontSize: theme.typography.fontSize.sm,
-                      fontWeight: theme.typography.fontWeight.medium,
-                      color: theme.semantic.text.muted,
-                      display: "flex",
                       alignItems: "center",
-                      gap: theme.space[2]
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      gap: theme.space[3],
+                      borderBottom: isExpanded ? `1px dashed ${theme.semantic.border.subtle}` : "1px solid transparent",
+                      background: "transparent"
                     },
                     children: [
-                      /* @__PURE__ */ jsx30(
-                        "span",
+                      /* @__PURE__ */ jsxs15("div", { children: [
+                        /* @__PURE__ */ jsx31(Panel.Title, { style: { fontSize: theme.typography.fontSize.xl }, children: title }),
+                        stateLabel && /* @__PURE__ */ jsxs15(
+                          Panel.Description,
+                          {
+                            style: {
+                              marginTop: theme.space[1],
+                              fontWeight: theme.typography.fontWeight.medium,
+                              display: "flex",
+                              alignItems: "center",
+                              gap: theme.space[2]
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx31(
+                                "span",
+                                {
+                                  style: {
+                                    width: 8,
+                                    height: 8,
+                                    borderRadius: theme.radius.pill,
+                                    background: theme.semantic.intent.primary.solid,
+                                    border: `1px solid ${theme.semantic.intent.primary.border}`,
+                                    display: "inline-block"
+                                  }
+                                }
+                              ),
+                              "Phase: ",
+                              stateLabel
+                            ]
+                          }
+                        )
+                      ] }),
+                      collapsible && /* @__PURE__ */ jsx31(
+                        motion6.span,
                         {
+                          animate: reducedMotion ? void 0 : { rotate: isExpanded ? 0 : 180 },
+                          transition: { duration: 0.2 },
                           style: {
-                            width: 8,
-                            height: 8,
-                            borderRadius: theme.radius.pill,
-                            background: theme.semantic.intent.primary.solid,
-                            border: `1px solid ${theme.semantic.intent.primary.border}`,
-                            display: "inline-block"
-                          }
+                            padding: theme.space[1],
+                            borderRadius: theme.radius.md,
+                            border: `1px solid ${theme.semantic.border.default}`,
+                            background: theme.semantic.surface.card,
+                            color: theme.semantic.text.primary,
+                            display: "inline-flex"
+                          },
+                          children: /* @__PURE__ */ jsx31(
+                            ChevronUp,
+                            {
+                              size: 20,
+                              strokeWidth: 2.5,
+                              "aria-hidden": "true",
+                              style: { display: "block" }
+                            }
+                          )
                         }
-                      ),
-                      "Phase: ",
-                      stateLabel
+                      )
                     ]
                   }
                 )
-              ] }),
-              collapsible && /* @__PURE__ */ jsx30(
-                motion6.div,
-                {
-                  animate: reducedMotion ? void 0 : { rotate: isExpanded ? 0 : 180 },
-                  transition: { duration: 0.2 },
-                  style: {
-                    padding: theme.space[1],
-                    borderRadius: theme.radius.md,
-                    border: `1px solid ${theme.semantic.border.default}`,
-                    background: theme.semantic.surface.card,
-                    color: theme.semantic.text.primary,
-                    display: "inline-flex"
-                  },
-                  children: /* @__PURE__ */ jsx30(
-                    ChevronUp,
-                    {
-                      size: 20,
-                      strokeWidth: 2.5,
-                      "aria-hidden": "true",
-                      style: { display: "block" }
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx30(AnimatePresence4, { initial: false, children: isExpanded && /* @__PURE__ */ jsx30(
-          motion6.div,
-          {
-            id: contentId,
-            initial: reducedMotion ? { opacity: 0 } : { height: 0, opacity: 0 },
-            animate: reducedMotion ? { opacity: 1 } : { height: "auto", opacity: 1 },
-            exit: reducedMotion ? { opacity: 0 } : { height: 0, opacity: 0 },
-            transition: { duration: 0.2, ease: "easeInOut" },
-            style: {
-              overflow: "hidden",
-              background: theme.semantic.surface.card
-            },
-            children: /* @__PURE__ */ jsx30(
-              "div",
+              }
+            ),
+            /* @__PURE__ */ jsx31(AnimatePresence4, { initial: false, children: isExpanded && /* @__PURE__ */ jsx31(
+              motion6.div,
               {
+                id: contentId,
+                initial: reducedMotion ? { opacity: 0 } : { height: 0, opacity: 0 },
+                animate: reducedMotion ? { opacity: 1 } : { height: "auto", opacity: 1 },
+                exit: reducedMotion ? { opacity: 0 } : { height: 0, opacity: 0 },
+                transition: { duration: 0.2, ease: "easeInOut" },
                 style: {
-                  padding: theme.space[4],
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: theme.space[6]
+                  overflow: "hidden",
+                  background: theme.semantic.surface.card
                 },
-                children
+                children: /* @__PURE__ */ jsx31(Panel.Body, { style: { gap: theme.space[6] }, children })
               }
-            )
-          }
-        ) })
-      ]
+            ) })
+          ]
+        }
+      )
     }
   );
 }
@@ -6847,7 +7085,7 @@ function ActionGroup({
       role: "group",
       "aria-labelledby": `action-group-${title.toLowerCase().replace(/\s+/g, "-")}`,
       children: [
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           "span",
           {
             style: {
@@ -6860,7 +7098,7 @@ function ActionGroup({
             children: "Group"
           }
         ),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           "h3",
           {
             id: `action-group-${title.toLowerCase().replace(/\s+/g, "-")}`,
@@ -6875,7 +7113,7 @@ function ActionGroup({
             children: title
           }
         ),
-        description && /* @__PURE__ */ jsx30(
+        description && /* @__PURE__ */ jsx31(
           "p",
           {
             style: {
@@ -6889,7 +7127,7 @@ function ActionGroup({
             children: description
           }
         ),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           "div",
           {
             style: {
@@ -6908,7 +7146,7 @@ function ActionGroup({
 // src/ui/components/MoreActions.tsx
 import { useId as useId5, useState as useState15 } from "react";
 import { ChevronDown, MoreHorizontal } from "lucide-react";
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
 function MoreActions({
   children,
   label = "More",
@@ -6952,8 +7190,8 @@ function MoreActions({
               ...style
             },
             children: [
-              /* @__PURE__ */ jsx31(MoreHorizontal, { size: 16, "aria-hidden": true }),
-              /* @__PURE__ */ jsx31("span", { children: label }),
+              /* @__PURE__ */ jsx32(MoreHorizontal, { size: 16, "aria-hidden": true }),
+              /* @__PURE__ */ jsx32("span", { children: label }),
               showCount ? /* @__PURE__ */ jsxs16(
                 "span",
                 {
@@ -6969,7 +7207,7 @@ function MoreActions({
                   ]
                 }
               ) : null,
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx32(
                 ChevronDown,
                 {
                   size: 14,
@@ -6983,7 +7221,7 @@ function MoreActions({
             ]
           }
         ),
-        open ? /* @__PURE__ */ jsx31(
+        open ? /* @__PURE__ */ jsx32(
           "div",
           {
             id: regionId,
@@ -7010,7 +7248,7 @@ function MoreActions({
 }
 
 // src/ui/components/DiceRoller.tsx
-import { clsx as clsx13 } from "clsx";
+import { clsx as clsx14 } from "clsx";
 import { motion as motion7 } from "framer-motion";
 import {
   useCallback as useCallback12,
@@ -7021,7 +7259,7 @@ import {
 
 // src/ui/primitives/dice.tsx
 import { createContext as createContext7, useContext as useContext7 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var DiceContext = createContext7(null);
 function normalizeDiceState({
   values,
@@ -7042,7 +7280,7 @@ function normalizeDiceState({
 }
 
 // src/ui/components/DiceRoller.tsx
-import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
 var DEFAULT_MIN_SPIN_MS = 1200;
 var DEFAULT_REVEAL_HOLD_MS = 1400;
 var FACE_SEQUENCE = [1, 2, 3, 4, 5, 6];
@@ -7057,12 +7295,12 @@ function DiceRoller({
   return /* @__PURE__ */ jsxs17(
     "div",
     {
-      className: clsx13("flex flex-col items-center gap-4", className),
+      className: clsx14("flex flex-col items-center gap-4", className),
       role: "region",
       "aria-label": "Dice roller",
       children: [
-        render ? render(renderProps) : /* @__PURE__ */ jsx33(DefaultDiceReadout, { ...renderProps }),
-        rollAction ? /* @__PURE__ */ jsx33(
+        render ? render(renderProps) : /* @__PURE__ */ jsx34(DefaultDiceReadout, { ...renderProps }),
+        rollAction ? /* @__PURE__ */ jsx34(
           DiceRollDialog,
           {
             action: rollAction,
@@ -7070,7 +7308,7 @@ function DiceRoller({
             diceCount: renderProps.diceCount
           }
         ) : null,
-        /* @__PURE__ */ jsx33("div", { className: "sr-only", "aria-live": "polite", children: renderProps.allRolled && renderProps.values ? `Rolled ${renderProps.values.join(", ")}. Total: ${renderProps.sum}` : "Dice not rolled yet" })
+        /* @__PURE__ */ jsx34("div", { className: "sr-only", "aria-live": "polite", children: renderProps.allRolled && renderProps.values ? `Rolled ${renderProps.values.join(", ")}. Total: ${renderProps.sum}` : "Dice not rolled yet" })
       ]
     }
   );
@@ -7108,7 +7346,7 @@ function DefaultDiceReadout({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx33(DiceRow, { values: dice, size: 44, rolling: false })
+        /* @__PURE__ */ jsx34(DiceRow, { values: dice, size: 44, rolling: false })
       ]
     }
   );
@@ -7219,7 +7457,7 @@ function DiceRollDialog({
   const rollLabel = action.rollLabel ?? "Roll dice";
   const disabled = action.available === false || phase === "rolling";
   const canClose = true;
-  return /* @__PURE__ */ jsx33(Dialog, { open, onOpenChange: canClose ? setOpen : void 0, children: /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsx34(Dialog, { open, onOpenChange: canClose ? setOpen : void 0, children: /* @__PURE__ */ jsxs17(
     DialogContent,
     {
       "data-dismiss-behavior": "dismiss",
@@ -7235,7 +7473,7 @@ function DiceRollDialog({
       onInteractOutside: canClose ? void 0 : (event) => event.preventDefault(),
       children: [
         /* @__PURE__ */ jsxs17(DialogHeader, { className: "text-center sm:text-center", children: [
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             DialogTitle,
             {
               style: {
@@ -7245,7 +7483,7 @@ function DiceRollDialog({
               children: title
             }
           ),
-          /* @__PURE__ */ jsx33(DialogDescription, { children: description })
+          /* @__PURE__ */ jsx34(DialogDescription, { children: description })
         ] }),
         /* @__PURE__ */ jsxs17(
           "div",
@@ -7257,8 +7495,8 @@ function DiceRollDialog({
               gap: theme.space[4]
             },
             children: [
-              /* @__PURE__ */ jsx33(RollResult, { label: resultLabel, sum: displaySum, phase }),
-              /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx34(RollResult, { label: resultLabel, sum: displaySum, phase }),
+              /* @__PURE__ */ jsx34(
                 DiceRow,
                 {
                   values: displayValues,
@@ -7266,7 +7504,7 @@ function DiceRollDialog({
                   rolling: phase === "rolling"
                 }
               ),
-              error ? /* @__PURE__ */ jsx33(
+              error ? /* @__PURE__ */ jsx34(
                 "span",
                 {
                   role: "alert",
@@ -7278,7 +7516,7 @@ function DiceRollDialog({
                   children: error
                 }
               ) : null,
-              /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx34(
                 ThemedButton,
                 {
                   type: "button",
@@ -7318,7 +7556,7 @@ function RollResult({
         textAlign: "center"
       },
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "div",
           {
             style: {
@@ -7331,7 +7569,7 @@ function RollResult({
             children: label
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "div",
           {
             style: {
@@ -7355,7 +7593,7 @@ function DiceRow({
   rolling
 }) {
   const gap = Math.max(8, Math.round(size * 0.18));
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       role: "list",
@@ -7366,7 +7604,7 @@ function DiceRow({
         gap,
         flexWrap: "wrap"
       },
-      children: values.map((value, index) => /* @__PURE__ */ jsx33(
+      children: values.map((value, index) => /* @__PURE__ */ jsx34(
         DieFace,
         {
           value,
@@ -7402,7 +7640,7 @@ function DieFace({
     flex: "0 0 auto",
     overflow: "hidden"
   };
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     motion7.div,
     {
       role: "listitem",
@@ -7419,7 +7657,7 @@ function DieFace({
         delay: index * 0.06,
         ease: "easeInOut"
       } : { duration: 0.2 },
-      children: showPips ? /* @__PURE__ */ jsx33(PipFace, { value }) : /* @__PURE__ */ jsx33(
+      children: showPips ? /* @__PURE__ */ jsx34(PipFace, { value }) : /* @__PURE__ */ jsx34(
         "span",
         {
           style: {
@@ -7437,7 +7675,7 @@ function DieFace({
 function PipFace({ value }) {
   const theme = useTheme();
   const pips = pipPositions(value);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "span",
     {
       "aria-hidden": true,
@@ -7445,7 +7683,7 @@ function PipFace({ value }) {
         position: "absolute",
         inset: "18%"
       },
-      children: pips.map(([left, top], index) => /* @__PURE__ */ jsx33(
+      children: pips.map(([left, top], index) => /* @__PURE__ */ jsx34(
         "span",
         {
           style: {
@@ -7521,8 +7759,8 @@ function sumValues(values) {
 
 // src/ui/components/PhaseIndicator.tsx
 import { motion as motion8 } from "framer-motion";
-import { clsx as clsx14 } from "clsx";
-import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { clsx as clsx15 } from "clsx";
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 function PhaseIndicator({
   currentPhase,
   phaseLabels,
@@ -7535,7 +7773,7 @@ function PhaseIndicator({
   const reducedMotion = theme.motion.reducedMotion === "true";
   const label = phaseLabels?.[currentPhase] ?? formatPhase(currentPhase);
   if (variant === "minimal") {
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(
       "span",
       {
         className,
@@ -7570,10 +7808,10 @@ function PhaseIndicator({
     reducedMotion
   });
   const ariaLabel = state === "your-turn" ? `Your turn \u2014 ${label}` : state === "waiting" ? `Waiting for ${formatPlayerList(activePlayerNames ?? [])} \u2014 ${label}` : label;
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
-      className: clsx14("flex items-center gap-3 flex-wrap", className),
+      className: clsx15("flex items-center gap-3 flex-wrap", className),
       style: containerStyle,
       role: "status",
       "aria-live": "polite",
@@ -7601,7 +7839,7 @@ function renderHeadline({
   reducedMotion
 }) {
   if (state === "phase-only") {
-    return /* @__PURE__ */ jsx34("div", { style: textBlockStyle(theme), children: /* @__PURE__ */ jsx34("span", { style: titleTextStyle(theme), children: label }) });
+    return /* @__PURE__ */ jsx35("div", { style: textBlockStyle(theme), children: /* @__PURE__ */ jsx35("span", { style: titleTextStyle(theme), children: label }) });
   }
   const isYourTurn = state === "your-turn";
   const intent = isYourTurn ? theme.semantic.intent.success : theme.semantic.intent.info;
@@ -7617,7 +7855,7 @@ function renderHeadline({
         gap: theme.space[3]
       },
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           StatusIndicator,
           {
             intent,
@@ -7626,8 +7864,8 @@ function renderHeadline({
           }
         ),
         /* @__PURE__ */ jsxs18("div", { style: textBlockStyle(theme), children: [
-          /* @__PURE__ */ jsx34("span", { style: titleTextStyle(theme), children: titleText }),
-          /* @__PURE__ */ jsx34("span", { style: subtitleTextStyle(theme), children: label })
+          /* @__PURE__ */ jsx35("span", { style: titleTextStyle(theme), children: titleText }),
+          /* @__PURE__ */ jsx35("span", { style: subtitleTextStyle(theme), children: label })
         ] })
       ]
     }
@@ -7683,7 +7921,7 @@ function StatusIndicator({
           flexShrink: 0
         },
         children: [
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             motion8.span,
             {
               style: {
@@ -7700,7 +7938,7 @@ function StatusIndicator({
               }
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             "span",
             {
               style: {
@@ -7731,7 +7969,7 @@ function StatusIndicator({
         flexShrink: 0
       },
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           "span",
           {
             style: {
@@ -7742,7 +7980,7 @@ function StatusIndicator({
             }
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           motion8.span,
           {
             style: {
@@ -7770,7 +8008,7 @@ function StatusIndicator({
 import { motion as motion9 } from "framer-motion";
 import { Trophy, Home, Crown, Medal } from "lucide-react";
 import { useEffect as useEffect13, useState as useState17 } from "react";
-import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 function rankIntent(rank) {
   if (rank === 1) return "warning";
   if (rank === 2) return "secondary";
@@ -7780,7 +8018,7 @@ function rankIntent(rank) {
 function RankIcon({ rank, theme }) {
   const intent = intentForVariant(theme, rankIntent(rank));
   if (rank === 1) {
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx36(
       Trophy,
       {
         width: 20,
@@ -7792,7 +8030,7 @@ function RankIcon({ rank, theme }) {
     );
   }
   if (rank === 2 || rank === 3) {
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx36(
       Medal,
       {
         width: 20,
@@ -7839,7 +8077,7 @@ function GameEndDisplay({
   const sortedScores = [...scores].sort((a, b) => b.score - a.score);
   const winningIntent = theme.semantic.intent.warning;
   const title = `${winner?.name ?? "Game"} Wins!`;
-  return /* @__PURE__ */ jsx35(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs19(
+  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 ?? ""}`,
@@ -7857,8 +8095,8 @@ function GameEndDisplay({
         fontFamily: theme.typography.fontFamily.body
       },
       children: [
-        /* @__PURE__ */ jsx35(DialogTitle, { className: "sr-only", children: title }),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsx36(
           motion9.div,
           {
             initial: reducedMotion ? { scale: 1 } : { scale: 0.95, rotate: -180, opacity: 0 },
@@ -7881,7 +8119,7 @@ function GameEndDisplay({
               border: `3px solid ${winningIntent.border}`,
               boxShadow: theme.elevation.lifted
             },
-            children: /* @__PURE__ */ jsx35(
+            children: /* @__PURE__ */ jsx36(
               Trophy,
               {
                 width: 48,
@@ -7900,7 +8138,7 @@ function GameEndDisplay({
             animate: reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 },
             transition: { delay: reducedMotion ? 0 : 0.4 },
             children: [
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx36(
                 "h2",
                 {
                   "aria-hidden": "true",
@@ -7916,7 +8154,7 @@ function GameEndDisplay({
                   children: title
                 }
               ),
-              winnerMessage && /* @__PURE__ */ jsx35(
+              winnerMessage && /* @__PURE__ */ jsx36(
                 "p",
                 {
                   style: {
@@ -7932,7 +8170,7 @@ function GameEndDisplay({
             ]
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           motion9.div,
           {
             initial: { opacity: 0 },
@@ -7980,8 +8218,8 @@ function GameEndDisplay({
                           gap: theme.space[3]
                         },
                         children: [
-                          /* @__PURE__ */ jsx35(RankIcon, { rank, theme }),
-                          /* @__PURE__ */ jsx35(
+                          /* @__PURE__ */ jsx36(RankIcon, { rank, theme }),
+                          /* @__PURE__ */ jsx36(
                             "span",
                             {
                               style: {
@@ -7993,7 +8231,7 @@ function GameEndDisplay({
                               children: player.name
                             }
                           ),
-                          isWinner && /* @__PURE__ */ jsx35(
+                          isWinner && /* @__PURE__ */ jsx36(
                             Crown,
                             {
                               width: 20,
@@ -8006,7 +8244,7 @@ function GameEndDisplay({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx35(
+                    /* @__PURE__ */ jsx36(
                       "span",
                       {
                         style: {
@@ -8060,7 +8298,7 @@ function GameEndDisplay({
                     gap: theme.space[2]
                   },
                   children: [
-                    /* @__PURE__ */ jsx35(
+                    /* @__PURE__ */ jsx36(
                       "span",
                       {
                         style: {
@@ -8076,7 +8314,7 @@ function GameEndDisplay({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx36(
                 "div",
                 {
                   style: {
@@ -8094,8 +8332,8 @@ function GameEndDisplay({
                         color: theme.semantic.text.primary
                       },
                       children: [
-                        /* @__PURE__ */ jsx35("span", { style: { textTransform: "capitalize" }, children: key.replace(/([A-Z])/g, " $1") }),
-                        /* @__PURE__ */ jsx35(
+                        /* @__PURE__ */ jsx36("span", { style: { textTransform: "capitalize" }, children: key.replace(/([A-Z])/g, " $1") }),
+                        /* @__PURE__ */ jsx36(
                           "span",
                           {
                             style: {
@@ -8114,7 +8352,7 @@ function GameEndDisplay({
             ]
           }
         ),
-        onReturnToLobby && /* @__PURE__ */ jsx35(
+        onReturnToLobby && /* @__PURE__ */ jsx36(
           motion9.div,
           {
             initial: reducedMotion ? { opacity: 0 } : { opacity: 0, y: 10 },
@@ -8132,7 +8370,7 @@ function GameEndDisplay({
                   gap: theme.space[2]
                 },
                 children: [
-                  /* @__PURE__ */ jsx35(Home, { size: 20, strokeWidth: 3, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx36(Home, { size: 20, strokeWidth: 3, "aria-hidden": "true" }),
                   "Return to Lobby"
                 ]
               }
@@ -8146,7 +8384,7 @@ function GameEndDisplay({
 
 // src/ui/components/board/NetworkGraph.tsx
 import { useMemo as useMemo11 } from "react";
-import { clsx as clsx15 } from "clsx";
+import { clsx as clsx16 } from "clsx";
 
 // src/ui/components/board/interaction-accessibility.ts
 function handleKeyboardActivation(event, onActivate, options) {
@@ -8164,7 +8402,7 @@ function handleKeyboardActivation(event, onActivate, options) {
 }
 
 // src/ui/components/board/NetworkGraph.tsx
-import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
 var EMPTY_NETWORK_EDGES = [];
 var EMPTY_NETWORK_PIECES = [];
 function DefaultNetworkNode({
@@ -8192,7 +8430,7 @@ function DefaultNetworkNode({
       onPointerEnter,
       onPointerLeave,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx15(
+      className: clsx16(
         "transition-all duration-150",
         onClick && "cursor-pointer",
         className
@@ -8201,7 +8439,7 @@ function DefaultNetworkNode({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Network node" : void 0,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "circle",
           {
             r: radius,
@@ -8210,7 +8448,7 @@ function DefaultNetworkNode({
             strokeWidth: effectiveStrokeWidth
           }
         ),
-        displayLabel && /* @__PURE__ */ jsx36(
+        displayLabel && /* @__PURE__ */ jsx37(
           "text",
           {
             textAnchor: "middle",
@@ -8249,7 +8487,7 @@ function DefaultNetworkEdge({
       onPointerEnter,
       onPointerLeave,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx15(
+      className: clsx16(
         "transition-all duration-150",
         onClick && "cursor-pointer",
         className
@@ -8258,7 +8496,7 @@ function DefaultNetworkEdge({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label !== void 0 ? `Network edge ${label}` : "Network edge" : void 0,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "line",
           {
             x1: from.x,
@@ -8271,7 +8509,7 @@ function DefaultNetworkEdge({
           }
         ),
         label !== void 0 && /* @__PURE__ */ jsxs20(Fragment5, { children: [
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             "circle",
             {
               cx: midX,
@@ -8282,7 +8520,7 @@ function DefaultNetworkEdge({
               strokeWidth: 1
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             "text",
             {
               x: midX,
@@ -8307,16 +8545,16 @@ function DefaultNetworkPiece({
   onClick,
   className
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "g",
     {
       onClick,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx15(onClick && "cursor-pointer", className),
+      className: clsx16(onClick && "cursor-pointer", className),
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Network piece" : void 0,
-      children: shape === "square" ? /* @__PURE__ */ jsx36(
+      children: shape === "square" ? /* @__PURE__ */ jsx37(
         "rect",
         {
           x: -radius,
@@ -8327,7 +8565,7 @@ function DefaultNetworkPiece({
           stroke: "white",
           strokeWidth: 1.5
         }
-      ) : /* @__PURE__ */ jsx36("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 1.5 })
+      ) : /* @__PURE__ */ jsx37("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 1.5 })
     }
   );
 }
@@ -8400,7 +8638,7 @@ function NetworkGraph({
       width,
       height,
       viewBox,
-      className: clsx15(
+      className: clsx16(
         "overflow-visible",
         enablePanZoom && "touch-none",
         isDragging && "cursor-grabbing",
@@ -8411,11 +8649,11 @@ function NetworkGraph({
       role: "img",
       "aria-label": "Network graph",
       children: [
-        /* @__PURE__ */ jsx36("g", { className: "network-edges", role: "list", "aria-label": "Network connections", children: edges.map((edge) => {
+        /* @__PURE__ */ jsx37("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__ */ jsx36(
+          return /* @__PURE__ */ jsx37(
             "g",
             {
               role: "listitem",
@@ -8425,7 +8663,7 @@ function NetworkGraph({
             edge.id
           );
         }) }),
-        /* @__PURE__ */ jsx36("g", { className: "network-nodes", role: "list", "aria-label": "Network nodes", children: nodes.map((node) => {
+        /* @__PURE__ */ jsx37("g", { className: "network-nodes", role: "list", "aria-label": "Network nodes", children: nodes.map((node) => {
           const nodePieces = piecesByNode[node.id] ?? [];
           return /* @__PURE__ */ jsxs20(
             "g",
@@ -8435,11 +8673,11 @@ function NetworkGraph({
               "aria-label": node.label ?? node.id,
               children: [
                 renderNode(node, nodePieces),
-                nodePieces.length > 0 && /* @__PURE__ */ jsx36("g", { className: "node-pieces", children: nodePieces.map((piece, i) => {
+                nodePieces.length > 0 && /* @__PURE__ */ jsx37("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__ */ jsx36(
+                  return /* @__PURE__ */ jsx37(
                     "g",
                     {
                       transform: `translate(${pieceX}, ${pieceY})`,
@@ -8458,7 +8696,7 @@ function NetworkGraph({
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx37(
                 "rect",
                 {
                   x: 0,
@@ -8483,8 +8721,8 @@ function NetworkGraph({
 
 // src/ui/components/board/ZoneMap.tsx
 import { useMemo as useMemo12 } from "react";
-import { clsx as clsx16 } from "clsx";
-import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+import { clsx as clsx17 } from "clsx";
+import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var HIGHLIGHT_COLORS = {
   valid: "rgba(34, 197, 94, 0.4)",
   // Green
@@ -8537,7 +8775,7 @@ function DefaultZone({
     switch (zone.shape.type) {
       case "polygon":
         if (!zone.shape.points) return null;
-        return /* @__PURE__ */ jsx37(
+        return /* @__PURE__ */ jsx38(
           "polygon",
           {
             points: zone.shape.points.map((p) => `${p.x},${p.y}`).join(" "),
@@ -8548,7 +8786,7 @@ function DefaultZone({
         );
       case "path":
         if (!zone.shape.path) return null;
-        return /* @__PURE__ */ jsx37(
+        return /* @__PURE__ */ jsx38(
           "path",
           {
             d: zone.shape.path,
@@ -8559,7 +8797,7 @@ function DefaultZone({
         );
       case "circle":
         if (!zone.shape.center) return null;
-        return /* @__PURE__ */ jsx37(
+        return /* @__PURE__ */ jsx38(
           "circle",
           {
             cx: zone.shape.center.x,
@@ -8581,13 +8819,13 @@ function DefaultZone({
       onMouseEnter: () => onHover?.(true),
       onMouseLeave: () => onHover?.(false),
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx16(onClick && "cursor-pointer", className),
+      className: clsx17(onClick && "cursor-pointer", className),
       role: onClick ? "button" : "listitem",
       "aria-label": zone.name,
       tabIndex: onClick ? 0 : void 0,
       children: [
         renderShape(),
-        showLabel && zone.shape?.center && /* @__PURE__ */ jsx37(
+        showLabel && zone.shape?.center && /* @__PURE__ */ jsx38(
           "text",
           {
             x: zone.shape.center.x,
@@ -8647,7 +8885,7 @@ function DefaultZonePieces({
   });
   const owners = Object.keys(piecesByOwner);
   const startOffset = -((owners.length - 1) * spacing) / 2;
-  return /* @__PURE__ */ jsx37("g", { className: clsx16("zone-pieces", className), children: owners.map((owner, i) => {
+  return /* @__PURE__ */ jsx38("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),
@@ -8659,7 +8897,7 @@ function DefaultZonePieces({
       {
         transform: `translate(${centerX + offsetX}, ${centerY + yOffset})`,
         children: [
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             "circle",
             {
               r: radius,
@@ -8668,7 +8906,7 @@ function DefaultZonePieces({
               strokeWidth: 2
             }
           ),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             "text",
             {
               textAnchor: "middle",
@@ -8704,13 +8942,13 @@ function DefaultZonePiece({
         onClick?.();
       },
       onKeyDown: (event) => handleKeyboardActivation(event, onClick, { stopPropagation: true }),
-      className: clsx16(onClick && "cursor-pointer", className),
+      className: clsx17(onClick && "cursor-pointer", className),
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       "aria-label": `Piece ${piece.id}`,
       children: [
-        /* @__PURE__ */ jsx37("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 2 }),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 2 }),
+        /* @__PURE__ */ jsx38(
           "text",
           {
             textAnchor: "middle",
@@ -8769,7 +9007,7 @@ function ZoneMap({
       width,
       height,
       viewBox: `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`,
-      className: clsx16(
+      className: clsx17(
         "overflow-visible",
         enablePanZoom && "touch-none",
         isDragging && "cursor-grabbing",
@@ -8780,17 +9018,17 @@ function ZoneMap({
       role: "img",
       "aria-label": "Zone map",
       children: [
-        backgroundImage && /* @__PURE__ */ jsx37("image", { href: backgroundImage, width, height }),
-        /* @__PURE__ */ jsx37("g", { className: "zones", role: "list", "aria-label": "Map zones", children: zones.map((zone) => {
+        backgroundImage && /* @__PURE__ */ jsx38("image", { href: backgroundImage, width, height }),
+        /* @__PURE__ */ jsx38("g", { className: "zones", role: "list", "aria-label": "Map zones", children: zones.map((zone) => {
           const zonePieces = piecesByZone[zone.id] || [];
-          return /* @__PURE__ */ jsx37("g", { children: renderZone(zone, zonePieces) }, zone.id);
+          return /* @__PURE__ */ jsx38("g", { children: renderZone(zone, zonePieces) }, zone.id);
         }) }),
         enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs21(
           "g",
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 "rect",
                 {
                   x: 0,
@@ -8815,8 +9053,8 @@ function ZoneMap({
 
 // src/ui/components/board/TrackBoard.tsx
 import { useMemo as useMemo13 } from "react";
-import { clsx as clsx17 } from "clsx";
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { clsx as clsx18 } from "clsx";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 function DefaultTrackSpace({
   space,
   size = 50,
@@ -8842,12 +9080,12 @@ function DefaultTrackSpace({
       onMouseEnter: () => onHover?.(true),
       onMouseLeave: () => onHover?.(false),
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx17(onClick && "cursor-pointer", className),
+      className: clsx18(onClick && "cursor-pointer", className),
       role: onClick ? "button" : "listitem",
       "aria-label": space.name || `Space ${space.index}`,
       tabIndex: onClick ? 0 : void 0,
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           "rect",
           {
             x: -halfSize,
@@ -8860,7 +9098,7 @@ function DefaultTrackSpace({
             strokeWidth: computedStrokeWidth
           }
         ),
-        space.name ? /* @__PURE__ */ jsx38(
+        space.name ? /* @__PURE__ */ jsx39(
           "text",
           {
             textAnchor: "middle",
@@ -8870,7 +9108,7 @@ function DefaultTrackSpace({
             fontWeight: "bold",
             children: space.name.length > 8 ? space.name.slice(0, 7) + "\u2026" : space.name
           }
-        ) : /* @__PURE__ */ jsx38(
+        ) : /* @__PURE__ */ jsx39(
           "text",
           {
             textAnchor: "middle",
@@ -8882,8 +9120,8 @@ function DefaultTrackSpace({
           }
         ),
         showJumpIndicator && space.jumpTo && /* @__PURE__ */ jsxs22("g", { transform: `translate(${halfSize - 6}, ${-halfSize + 6})`, children: [
-          /* @__PURE__ */ jsx38("circle", { r: 6, fill: "#fbbf24" }),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39("circle", { r: 6, fill: "#fbbf24" }),
+          /* @__PURE__ */ jsx39(
             "text",
             {
               textAnchor: "middle",
@@ -8914,7 +9152,7 @@ function DefaultTrackPiece({
   const offset = total > 1 ? spacing : 0;
   const px = Math.cos(angle) * offset;
   const py = Math.sin(angle) * offset;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "circle",
     {
       cx: px,
@@ -8928,7 +9166,7 @@ function DefaultTrackPiece({
         onClick?.();
       },
       onKeyDown: (event) => handleKeyboardActivation(event, onClick, { stopPropagation: true }),
-      className: clsx17(onClick && "cursor-pointer", className),
+      className: clsx18(onClick && "cursor-pointer", className),
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       "aria-label": `Piece ${piece.id} owned by ${piece.owner}`
@@ -8942,7 +9180,7 @@ function DefaultTrackConnection({
   strokeWidth = 2,
   className
 }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "line",
     {
       x1: from.x,
@@ -8978,7 +9216,7 @@ function DefaultTrackJump({
   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__ */ jsx38("defs", { children: /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39("defs", { children: /* @__PURE__ */ jsx39(
       "marker",
       {
         id: markerId,
@@ -8987,10 +9225,10 @@ function DefaultTrackJump({
         refX: "9",
         refY: "3.5",
         orient: "auto",
-        children: /* @__PURE__ */ jsx38("polygon", { points: "0 0, 10 3.5, 0 7", fill: color })
+        children: /* @__PURE__ */ jsx39("polygon", { points: "0 0, 10 3.5, 0 7", fill: color })
       }
     ) }),
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       "line",
       {
         x1: startX,
@@ -9054,7 +9292,7 @@ function TrackBoard({
       return nextSpaceIds.map((nextId) => {
         const targetSpace = spaceMap.get(nextId);
         if (!targetSpace) return null;
-        return /* @__PURE__ */ jsx38("g", { children: renderConnection(
+        return /* @__PURE__ */ jsx39("g", { children: renderConnection(
           space.position,
           targetSpace.position,
           space,
@@ -9071,7 +9309,7 @@ function TrackBoard({
       if (!targetSpace) return [];
       const isUp = targetSpace.index > space.index;
       return [
-        /* @__PURE__ */ jsx38("g", { children: renderJump(
+        /* @__PURE__ */ jsx39("g", { children: renderJump(
           space.position,
           targetSpace.position,
           space,
@@ -9093,7 +9331,7 @@ function TrackBoard({
       width,
       height,
       viewBox: `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`,
-      className: clsx17(
+      className: clsx18(
         "overflow-visible",
         enablePanZoom && "touch-none",
         isDragging && "cursor-grabbing",
@@ -9104,11 +9342,11 @@ function TrackBoard({
       role: "img",
       "aria-label": "Track board",
       children: [
-        /* @__PURE__ */ jsx38("g", { className: "track-connections", children: renderConnections() }),
-        /* @__PURE__ */ jsx38("g", { className: "track-jumps", children: renderJumps() }),
-        /* @__PURE__ */ jsx38("g", { className: "track-spaces", role: "list", "aria-label": "Track spaces", children: spaces.map((space) => {
+        /* @__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) => {
           const spacePieces = piecesBySpace[space.id] || [];
-          return /* @__PURE__ */ jsx38(
+          return /* @__PURE__ */ jsx39(
             "g",
             {
               transform: `translate(${space.position.x}, ${space.position.y})`,
@@ -9122,7 +9360,7 @@ function TrackBoard({
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 "rect",
                 {
                   x: 0,
@@ -9147,9 +9385,9 @@ function TrackBoard({
 
 // src/ui/components/board/SlotSystem.tsx
 import { useMemo as useMemo14 } from "react";
-import { clsx as clsx18 } from "clsx";
+import { clsx as clsx19 } from "clsx";
 import { Users, Lock, Gift, Coins } from "lucide-react";
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 var EMPTY_SLOT_OCCUPANTS = [];
 function DefaultSlotItem({
   name,
@@ -9180,7 +9418,7 @@ function DefaultSlotItem({
       onPointerEnter,
       onPointerLeave,
       onKeyDown: (event) => handleKeyboardActivation(event, isAvailable ? onClick : void 0),
-      className: clsx18(
+      className: clsx19(
         "p-4 rounded-lg border-2 transition-all",
         isAvailable && onClick && "cursor-pointer hover:opacity-90",
         className
@@ -9197,7 +9435,7 @@ function DefaultSlotItem({
       children: [
         /* @__PURE__ */ jsxs23("div", { className: "flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ jsxs23("div", { children: [
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               "h3",
               {
                 className: "font-bold",
@@ -9205,7 +9443,7 @@ function DefaultSlotItem({
                 children: name
               }
             ),
-            description && /* @__PURE__ */ jsx39(
+            description && /* @__PURE__ */ jsx40(
               "p",
               {
                 className: "text-xs mt-0.5",
@@ -9215,7 +9453,7 @@ function DefaultSlotItem({
             )
           ] }),
           /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1", children: [
-            isExclusive && /* @__PURE__ */ jsx39(
+            isExclusive && /* @__PURE__ */ jsx40(
               Lock,
               {
                 className: "w-4 h-4",
@@ -9230,8 +9468,8 @@ function DefaultSlotItem({
                 style: { color: theme.semantic.text.muted },
                 title: `Capacity: ${capacity}`,
                 children: [
-                  /* @__PURE__ */ jsx39(Users, { className: "w-3 h-3" }),
-                  /* @__PURE__ */ jsx39("span", { children: capacity })
+                  /* @__PURE__ */ jsx40(Users, { className: "w-3 h-3" }),
+                  /* @__PURE__ */ jsx40("span", { children: capacity })
                 ]
               }
             )
@@ -9244,8 +9482,8 @@ function DefaultSlotItem({
               className: "flex items-center gap-1",
               style: { color: theme.semantic.intent.danger.solid },
               children: [
-                /* @__PURE__ */ jsx39(Coins, { className: "w-3 h-3", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx39("span", { children: costLabel })
+                /* @__PURE__ */ jsx40(Coins, { className: "w-3 h-3", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx40("span", { children: costLabel })
               ]
             }
           ),
@@ -9255,14 +9493,14 @@ function DefaultSlotItem({
               className: "flex items-center gap-1",
               style: { color: theme.semantic.intent.success.solid },
               children: [
-                /* @__PURE__ */ jsx39(Gift, { className: "w-3 h-3", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx39("span", { children: rewardLabel })
+                /* @__PURE__ */ jsx40(Gift, { className: "w-3 h-3", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx40("span", { children: rewardLabel })
               ]
             }
           )
         ] }),
-        renderOccupants && /* @__PURE__ */ jsx39("div", { className: "mt-2", children: renderOccupants() }),
-        !isAvailable && !isFull && /* @__PURE__ */ jsx39(
+        renderOccupants && /* @__PURE__ */ jsx40("div", { className: "mt-2", children: renderOccupants() }),
+        !isAvailable && !isFull && /* @__PURE__ */ jsx40(
           "div",
           {
             className: "mt-2 text-xs",
@@ -9282,12 +9520,12 @@ function DefaultSlotOccupant({
   onClick,
   className
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       onClick,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx18(
+      className: clsx19(
         "transition-all",
         shape === "circle" ? "rounded-full" : "rounded",
         onClick && "cursor-pointer hover:scale-110",
@@ -9310,10 +9548,10 @@ function DefaultEmptySlot({
   className
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
-      className: clsx18("rounded-full border-2 border-dashed", className),
+      className: clsx19("rounded-full border-2 border-dashed", className),
       style: {
         width: size,
         height: size,
@@ -9365,18 +9603,18 @@ function SlotSystem({
   }, [slots, layout]);
   const renderSlotItem = (slot) => {
     const slotOccupants = occupantsBySlot[slot.id] ?? [];
-    return /* @__PURE__ */ jsx39("div", { role: "listitem", "aria-label": slot.name, children: renderSlot(slot, slotOccupants) }, slot.id);
+    return /* @__PURE__ */ jsx40("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__ */ jsx39("div", { style: { width, height }, className: clsx18("slot-system", className), children: content });
+  const wrapContent = (content) => /* @__PURE__ */ jsx40("div", { style: { width, height }, className: clsx19("slot-system", className), children: content });
   if (layout === "grouped" && slotGroups) {
     return wrapContent(
-      /* @__PURE__ */ jsx39("div", { className: "space-y-6", role: "list", children: Object.entries(slotGroups).map(([groupName, groupSlots]) => /* @__PURE__ */ jsxs23("div", { children: [
-        /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40("div", { className: "space-y-6", role: "list", children: Object.entries(slotGroups).map(([groupName, groupSlots]) => /* @__PURE__ */ jsxs23("div", { children: [
+        /* @__PURE__ */ jsx40(
           "h3",
           {
             className: "text-lg font-semibold mb-3",
@@ -9384,23 +9622,23 @@ function SlotSystem({
             children: groupName
           }
         ),
-        /* @__PURE__ */ jsx39("div", { style: responsiveGridStyle, children: groupSlots.map(renderSlotItem) })
+        /* @__PURE__ */ jsx40("div", { style: responsiveGridStyle, children: groupSlots.map(renderSlotItem) })
       ] }, groupName)) })
     );
   }
   if (layout === "list") {
     return wrapContent(
-      /* @__PURE__ */ jsx39("div", { className: "flex flex-col gap-2", role: "list", children: slots.map(renderSlotItem) })
+      /* @__PURE__ */ jsx40("div", { className: "flex flex-col gap-2", role: "list", children: slots.map(renderSlotItem) })
     );
   }
   return wrapContent(
-    /* @__PURE__ */ jsx39("div", { style: responsiveGridStyle, role: "list", children: slots.map(renderSlotItem) })
+    /* @__PURE__ */ jsx40("div", { style: responsiveGridStyle, role: "list", children: slots.map(renderSlotItem) })
   );
 }
 
 // src/ui/components/board/SquareGrid.tsx
 import { useMemo as useMemo15 } from "react";
-import { clsx as clsx20 } from "clsx";
+import { clsx as clsx21 } from "clsx";
 
 // src/ui/components/board/tiled-grid/use-grid-svg-frame.ts
 import {
@@ -9489,7 +9727,7 @@ function GridZoomIndicator({
 }
 
 // src/ui/components/board/tiled-grid/interactive-layer.tsx
-import { clsx as clsx19 } from "clsx";
+import { clsx as clsx20 } from "clsx";
 
 // src/ui/components/board/target-layer.ts
 function interactiveTargetRenderState(layer, targetId, isHovered) {
@@ -9516,7 +9754,7 @@ function isInteractiveTargetSelectable(layer, state) {
 }
 
 // src/ui/components/board/tiled-grid/interactive-layer.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function InteractiveTargetLayerGroup({
   layer,
   targets,
@@ -9532,7 +9770,7 @@ function InteractiveTargetLayerGroup({
   renderTargetContent
 }) {
   const { hoveredTargetId, setHoveredTargetId } = hover;
-  return /* @__PURE__ */ jsx40("g", { className: groupClassName, role: groupRole, "aria-label": groupAriaLabel, children: targets.map((target) => {
+  return /* @__PURE__ */ jsx41("g", { className: groupClassName, role: groupRole, "aria-label": groupAriaLabel, children: targets.map((target) => {
     const targetId = getTargetId(target);
     const state = interactiveTargetRenderState(
       layer,
@@ -9549,13 +9787,13 @@ function InteractiveTargetLayerGroup({
       // HexGrid markup variant: browserAttributes spread first, then
       // transform, role, className (preserves HexGrid's rendered
       // attribute order).
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx41(
         "g",
         {
           ...state.browserAttributes,
           ...getTargetTransform ? { transform: getTargetTransform(target) } : {},
           role: isSelectable ? "button" : void 0,
-          className: clsx19(isSelectable && "cursor-pointer"),
+          className: clsx20(isSelectable && "cursor-pointer"),
           onPointerEnter: () => setHoveredTargetId(targetId),
           onPointerLeave: () => setHoveredTargetId(
             (currentId) => currentId === targetId ? null : currentId
@@ -9575,7 +9813,7 @@ function InteractiveTargetLayerGroup({
       // SquareGrid markup variant: no browserAttributes spread;
       // transform, className, role (preserves SquareGrid's rendered
       // attribute order).
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx41(
         "g",
         {
           ...getTargetTransform ? { transform: getTargetTransform(target) } : {},
@@ -9588,7 +9826,7 @@ function InteractiveTargetLayerGroup({
           onPointerLeave: () => setHoveredTargetId(
             (currentId) => currentId === targetId ? null : currentId
           ),
-          className: clsx19(isSelectable && "cursor-pointer"),
+          className: clsx20(isSelectable && "cursor-pointer"),
           role: isSelectable ? "button" : void 0,
           tabIndex: isSelectable ? 0 : void 0,
           "aria-label": isSelectable ? `Select ${targetKind} ${targetId}` : void 0,
@@ -9606,7 +9844,7 @@ function resolveBoardProp(props, buildInlineBoard) {
 }
 
 // src/ui/components/board/SquareGrid.tsx
-import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
 function DefaultGridCell({
   size,
   isLight = true,
@@ -9631,7 +9869,7 @@ function DefaultGridCell({
       onPointerEnter,
       onPointerLeave,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx20(
+      className: clsx21(
         "transition-colors duration-100",
         onClick && "cursor-pointer",
         className
@@ -9640,8 +9878,8 @@ function DefaultGridCell({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Grid cell" : void 0,
       children: [
-        /* @__PURE__ */ jsx41("rect", { width: size, height: size, fill: baseColor }),
-        isSelected && /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42("rect", { width: size, height: size, fill: baseColor }),
+        isSelected && /* @__PURE__ */ jsx42(
           "rect",
           {
             width: size,
@@ -9650,7 +9888,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isHighlighted && !isSelected && /* @__PURE__ */ jsx41(
+        isHighlighted && !isSelected && /* @__PURE__ */ jsx42(
           "rect",
           {
             width: size,
@@ -9659,7 +9897,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isValidMove && !isCapture && /* @__PURE__ */ jsx41(
+        isValidMove && !isCapture && /* @__PURE__ */ jsx42(
           "circle",
           {
             cx: size / 2,
@@ -9669,7 +9907,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isCapture && /* @__PURE__ */ jsx41(
+        isCapture && /* @__PURE__ */ jsx42(
           "circle",
           {
             cx: size / 2,
@@ -9703,7 +9941,7 @@ function DefaultGridPiece({
       onClick,
       onPointerDown,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx20(
+      className: clsx21(
         "transition-transform duration-150",
         (onClick || onPointerDown) && "cursor-pointer hover:scale-105",
         className
@@ -9713,7 +9951,7 @@ function DefaultGridPiece({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Grid piece" : void 0,
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           "circle",
           {
             r: isDragging ? radius * 1.1 : radius,
@@ -9723,7 +9961,7 @@ function DefaultGridPiece({
             style: { filter: "drop-shadow(1px 2px 2px rgba(0,0,0,0.4))" }
           }
         ),
-        label && /* @__PURE__ */ jsx41(
+        label && /* @__PURE__ */ jsx42(
           "text",
           {
             y: 4,
@@ -9768,20 +10006,20 @@ 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__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "g",
     {
       onClick,
       onPointerDown,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx20(
+      className: clsx21(
         (onClick || onPointerDown) && "cursor-pointer",
         className
       ),
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? `${owner} ${type}` : void 0,
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx42(
         "text",
         {
           textAnchor: "middle",
@@ -10044,7 +10282,7 @@ function SquareGridImpl(props) {
       width: svgWidth,
       height: svgHeight,
       viewBox,
-      className: clsx20(
+      className: clsx21(
         "square-grid",
         enablePanZoom && "touch-none",
         isPanning && "cursor-grabbing",
@@ -10055,11 +10293,11 @@ function SquareGridImpl(props) {
       role: "img",
       "aria-label": `${rows}x${cols} game grid`,
       children: [
-        /* @__PURE__ */ jsx41("defs", { children: /* @__PURE__ */ jsx41("filter", { id: "pieceShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx41("feDropShadow", { dx: "1", dy: "2", stdDeviation: "2", floodOpacity: "0.4" }) }) }),
-        /* @__PURE__ */ jsx41("g", { className: "cells", role: "list", "aria-label": "Grid cells", children: renderableCells.map(({ row, col }) => {
+        /* @__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 }) => {
           const x = labelMargin + col * cellSize;
           const y = row * cellSize;
-          return /* @__PURE__ */ jsx41(
+          return /* @__PURE__ */ jsx42(
             "g",
             {
               transform: `translate(${x}, ${y})`,
@@ -10070,7 +10308,7 @@ function SquareGridImpl(props) {
             `${row}-${col}`
           );
         }) }),
-        interactiveSpaces && /* @__PURE__ */ jsx41(
+        interactiveSpaces && /* @__PURE__ */ jsx42(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveSpaces,
@@ -10084,7 +10322,7 @@ function SquareGridImpl(props) {
             hover: spaceHover,
             getTargetTransform: (space) => `translate(${labelMargin + space.col * cellSize}, ${space.row * cellSize})`,
             renderTargetContent: (space, state, isSelectable) => /* @__PURE__ */ jsxs24(Fragment6, { children: [
-              isSelectable && /* @__PURE__ */ jsx41(
+              isSelectable && /* @__PURE__ */ jsx42(
                 "rect",
                 {
                   x: 0,
@@ -10099,8 +10337,8 @@ function SquareGridImpl(props) {
             ] })
           }
         ),
-        renderEdge && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx41("g", { className: "edges", "aria-label": "Board edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => /* @__PURE__ */ jsx41("g", { children: renderEdge(edge, interactiveEdge.position) }, edge.id)) }),
-        interactiveEdges && /* @__PURE__ */ jsx41(
+        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(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveEdges,
@@ -10112,7 +10350,7 @@ function SquareGridImpl(props) {
             spreadBrowserAttributes: false,
             selectMode: "layer-direct",
             hover: edgeHover,
-            renderTargetContent: ({ interactiveEdge: edge }, state) => renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx41(
+            renderTargetContent: ({ interactiveEdge: edge }, state) => renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx42(
               "line",
               {
                 x1: edge.position.x1,
@@ -10126,8 +10364,8 @@ function SquareGridImpl(props) {
             ) : null
           }
         ),
-        renderVertex && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx41("g", { className: "vertices", "aria-label": "Board vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => /* @__PURE__ */ jsx41("g", { children: renderVertex(vertex, interactiveVertex.position) }, vertex.id)) }),
-        interactiveVertices && /* @__PURE__ */ jsx41(
+        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(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveVertices,
@@ -10139,7 +10377,7 @@ function SquareGridImpl(props) {
             spreadBrowserAttributes: false,
             selectMode: "layer-direct",
             hover: vertexHover,
-            renderTargetContent: ({ interactiveVertex: vertex }, state) => renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx41(
+            renderTargetContent: ({ interactiveVertex: vertex }, state) => renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx42(
               "circle",
               {
                 cx: vertex.position.x,
@@ -10154,7 +10392,7 @@ function SquareGridImpl(props) {
         showCoordinates && coordinateStyle !== "none" && /* @__PURE__ */ jsxs24("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__ */ jsx41(
+            return /* @__PURE__ */ jsx42(
               "text",
               {
                 x: labelMargin + col * cellSize + cellSize / 2,
@@ -10170,7 +10408,7 @@ function SquareGridImpl(props) {
           }),
           Array.from({ length: rows }).map((_, row) => {
             const label = coordinateStyle === "algebraic" ? String(rows - row) : String(row + 1);
-            return /* @__PURE__ */ jsx41(
+            return /* @__PURE__ */ jsx42(
               "text",
               {
                 x: 10,
@@ -10185,10 +10423,10 @@ function SquareGridImpl(props) {
             );
           })
         ] }),
-        /* @__PURE__ */ jsx41("g", { className: "pieces", role: "list", "aria-label": "Game pieces", children: resolvedPieces.map((piece) => {
+        /* @__PURE__ */ jsx42("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__ */ jsx41(
+          return /* @__PURE__ */ jsx42(
             "g",
             {
               transform: `translate(${x}, ${y})`,
@@ -10199,7 +10437,7 @@ function SquareGridImpl(props) {
             piece.id
           );
         }) }),
-        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx41(
+        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx42(
           GridZoomIndicator,
           {
             viewBoxX,
@@ -10216,8 +10454,8 @@ var SquareGrid = SquareGridImpl;
 
 // src/ui/components/board/HexGrid.tsx
 import { useMemo as useMemo16 } from "react";
-import { clsx as clsx21 } from "clsx";
-import { Fragment as Fragment7, jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { clsx as clsx22 } from "clsx";
+import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
 function DefaultHexTile({
   size,
   fill,
@@ -10245,7 +10483,7 @@ function DefaultHexTile({
       onPointerEnter,
       onPointerLeave,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx21(
+      className: clsx22(
         "transition-all duration-150",
         onClick && "cursor-pointer hover:brightness-110",
         className
@@ -10254,7 +10492,7 @@ function DefaultHexTile({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Hex tile" : void 0,
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           "polygon",
           {
             points,
@@ -10264,7 +10502,7 @@ function DefaultHexTile({
             filter: "url(#hexShadow)"
           }
         ),
-        label && /* @__PURE__ */ jsx42(
+        label && /* @__PURE__ */ jsx43(
           "text",
           {
             x: 0,
@@ -10318,7 +10556,7 @@ function DefaultHexEdge({
     {
       onClick,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx21(
+      className: clsx22(
         "transition-all duration-150",
         onClick && "cursor-pointer",
         className
@@ -10327,7 +10565,7 @@ function DefaultHexEdge({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Hex edge" : void 0,
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           "rect",
           {
             x: position.midX - touchTargetLength / 2,
@@ -10340,7 +10578,7 @@ function DefaultHexEdge({
             pointerEvents: "all"
           }
         ),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           "line",
           {
             x1: position.x1,
@@ -10383,7 +10621,7 @@ function DefaultHexVertex({
       onPointerEnter,
       onPointerLeave,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx21(
+      className: clsx22(
         "transition-all duration-150",
         onClick && "cursor-pointer hover:scale-110",
         className
@@ -10393,7 +10631,7 @@ function DefaultHexVertex({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Hex vertex" : void 0,
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           "circle",
           {
             cx: position.x,
@@ -10403,7 +10641,7 @@ function DefaultHexVertex({
             pointerEvents: "all"
           }
         ),
-        shape === "square" ? /* @__PURE__ */ jsx42(
+        shape === "square" ? /* @__PURE__ */ jsx43(
           "rect",
           {
             x: position.x - size,
@@ -10415,7 +10653,7 @@ function DefaultHexVertex({
             strokeWidth: effectiveStrokeWidth,
             className: hasOwner ? "" : "opacity-30"
           }
-        ) : /* @__PURE__ */ jsx42(
+        ) : /* @__PURE__ */ jsx43(
           "circle",
           {
             cx: position.x,
@@ -10439,7 +10677,7 @@ function DefaultInteractiveVertex({
   hoverColor = "rgba(34, 197, 94, 0.8)",
   className
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "circle",
     {
       cx: position.x,
@@ -10448,7 +10686,7 @@ function DefaultInteractiveVertex({
       fill: isHovered ? hoverColor : color,
       stroke: isHovered ? "#22c55e" : "rgba(255,255,255,0.4)",
       strokeWidth: isHovered ? 2 : 1,
-      className: clsx21("transition-all duration-150", className)
+      className: clsx22("transition-all duration-150", className)
     }
   );
 }
@@ -10460,7 +10698,7 @@ function DefaultInteractiveEdge({
   hoverColor = "rgba(251, 146, 60, 0.8)",
   className
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "line",
     {
       x1: position.x1,
@@ -10470,7 +10708,7 @@ function DefaultInteractiveEdge({
       stroke: isHovered ? hoverColor : color,
       strokeWidth: isHovered ? strokeWidth * 1.5 : strokeWidth,
       strokeLinecap: "round",
-      className: clsx21("transition-all duration-150", className)
+      className: clsx22("transition-all duration-150", className)
     }
   );
 }
@@ -10746,7 +10984,7 @@ function HexGridImpl(props) {
       width,
       height,
       viewBox,
-      className: clsx21(
+      className: clsx22(
         "hex-grid",
         effectivePanZoom && "touch-none",
         isDragging && "cursor-grabbing",
@@ -10759,16 +10997,16 @@ function HexGridImpl(props) {
       children: [
         /* @__PURE__ */ jsxs25("defs", { children: [
           /* @__PURE__ */ jsxs25("linearGradient", { id: "oceanGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-            /* @__PURE__ */ jsx42("stop", { offset: "0%", stopColor: "#0ea5e9" }),
-            /* @__PURE__ */ jsx42("stop", { offset: "100%", stopColor: "#0284c7" })
+            /* @__PURE__ */ jsx43("stop", { offset: "0%", stopColor: "#0ea5e9" }),
+            /* @__PURE__ */ jsx43("stop", { offset: "100%", stopColor: "#0284c7" })
           ] }),
-          /* @__PURE__ */ jsx42("filter", { id: "hexShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx42("feDropShadow", { dx: "1", dy: "1", stdDeviation: "2", floodOpacity: "0.3" }) })
+          /* @__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__ */ jsx42("g", { className: "tiles", role: "list", "aria-label": "Hex tiles", children: resolvedTiles.map((tile) => {
+        /* @__PURE__ */ jsx43("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__ */ jsx42(
+          return /* @__PURE__ */ jsx43(
             "g",
             {
               transform: `translate(${pos.x}, ${pos.y})`,
@@ -10779,7 +11017,7 @@ function HexGridImpl(props) {
             tile.id
           );
         }) }),
-        interactiveSpaces && resolvedTiles.length > 0 && /* @__PURE__ */ jsx42(
+        interactiveSpaces && resolvedTiles.length > 0 && /* @__PURE__ */ jsx43(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveSpaces,
@@ -10794,7 +11032,7 @@ function HexGridImpl(props) {
             hover: spaceHover,
             getTargetTransform: ({ pos }) => `translate(${pos.x}, ${pos.y})`,
             renderTargetContent: ({ space, pos }, state, isSelectable) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
-              isSelectable && /* @__PURE__ */ jsx42(
+              isSelectable && /* @__PURE__ */ jsx43(
                 "polygon",
                 {
                   points: buildTileGeometry(pos).points({
@@ -10808,13 +11046,13 @@ function HexGridImpl(props) {
             ] })
           }
         ),
-        resolvedEdges.length > 0 && /* @__PURE__ */ jsx42("g", { className: "edges", role: "list", "aria-label": "Hex edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => {
-          return /* @__PURE__ */ jsx42("g", { role: "listitem", children: renderEdge(edge, interactiveEdge.position) }, edge.id);
+        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);
         }) }),
-        resolvedVertices.length > 0 && /* @__PURE__ */ jsx42("g", { className: "vertices", role: "list", "aria-label": "Hex vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => {
-          return /* @__PURE__ */ jsx42("g", { role: "listitem", children: renderVertex(vertex, interactiveVertex.position) }, vertex.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);
         }) }),
-        interactiveEdges && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx42(
+        interactiveEdges && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx43(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveEdges,
@@ -10833,7 +11071,7 @@ function HexGridImpl(props) {
                 edge.position.y2 - edge.position.y1
               );
               return /* @__PURE__ */ jsxs25(Fragment7, { children: [
-                isSelectable && /* @__PURE__ */ jsx42(
+                isSelectable && /* @__PURE__ */ jsx43(
                   "rect",
                   {
                     x: edge.position.midX - touchTargetLength / 2,
@@ -10846,7 +11084,7 @@ function HexGridImpl(props) {
                     pointerEvents: "all"
                   }
                 ),
-                renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx42(
+                renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx43(
                   DefaultInteractiveEdge,
                   {
                     position: edge.position,
@@ -10858,7 +11096,7 @@ function HexGridImpl(props) {
             }
           }
         ),
-        interactiveVertices && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx42(
+        interactiveVertices && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx43(
           InteractiveTargetLayerGroup,
           {
             layer: interactiveVertices,
@@ -10872,7 +11110,7 @@ function HexGridImpl(props) {
             selectMode: "render-state",
             hover: vertexHover,
             renderTargetContent: ({ interactiveVertex: vertex }, state, isSelectable) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
-              isSelectable && /* @__PURE__ */ jsx42(
+              isSelectable && /* @__PURE__ */ jsx43(
                 "circle",
                 {
                   cx: vertex.position.x,
@@ -10882,7 +11120,7 @@ function HexGridImpl(props) {
                   pointerEvents: "all"
                 }
               ),
-              renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx42(
+              renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx43(
                 DefaultInteractiveVertex,
                 {
                   position: vertex.position,
@@ -10893,7 +11131,7 @@ function HexGridImpl(props) {
             ] })
           }
         ),
-        effectivePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx42(
+        effectivePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx43(
           GridZoomIndicator,
           {
             viewBoxX,
@@ -10997,6 +11235,8 @@ export {
   MobileHandTrayProvider,
   useRegisterMobileHand,
   useMobileHandTrayActive,
+  useOverlayInsets,
+  useRegisterBottomOverlayInset,
   PlayArea,
   GameSkeleton,
   ToastProvider,
@@ -11029,6 +11269,13 @@ export {
   CostDisplay,
   ActionButton,
   PrimaryButton,
+  PanelRoot,
+  PanelHeader,
+  PanelTitle,
+  PanelDescription,
+  PanelBody,
+  PanelActions,
+  Panel,
   PrimaryActionButton,
   ActionPanel,
   ActionGroup,
@@ -11066,4 +11313,4 @@ export {
   HexGrid,
   createHexBoardView
 };
-//# sourceMappingURL=chunk-7W6TQO3X.js.map
+//# sourceMappingURL=chunk-45FI6XII.js.map