@dreamboard-games/sdk 0.2.1-alpha.0 → 0.3.0-alpha.1

package/dist/{chunk-WYPQ3GG5.js → chunk-QZ6X4B5P.js}

@@ -2964,25 +2964,235 @@ function StagingZone({
   );
 }
 
-// src/ui/components/CardDragSurface.tsx
+// src/ui/components/card-drag/use-drop-target-registry.ts
+import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useRef as useRef2 } from "react";
+var CardDragSurfaceContext = createContext3(null);
+function useCardDragSurface() {
+  return useContext3(CardDragSurfaceContext);
+}
+function useDropTargetRegistry({
+  hitTestInsetPx,
+  activeDragRef,
+  setActive
+}) {
+  const targetsRef = useRef2(/* @__PURE__ */ new Map());
+  const orderCounterRef = useRef2(0);
+  const registerTarget = useCallback5(
+    (target) => {
+      targetsRef.current.set(target.targetId, {
+        ...target,
+        order: target.order || ++orderCounterRef.current
+      });
+      return () => {
+        targetsRef.current.delete(target.targetId);
+        const active = activeDragRef.current;
+        if (active && active.keyboardFocusedTargetId === target.targetId) {
+          setActive({ ...active, keyboardFocusedTargetId: null });
+        }
+      };
+    },
+    [activeDragRef, setActive]
+  );
+  const updateTarget = useCallback5(
+    (targetId, patch) => {
+      const existing = targetsRef.current.get(targetId);
+      if (!existing) return;
+      targetsRef.current.set(targetId, { ...existing, ...patch });
+    },
+    []
+  );
+  const isTargetUsable = useCallback5((target) => {
+    return !target.disabled && target.eligible !== false;
+  }, []);
+  const resolveDropTarget = useCallback5(
+    (point) => {
+      for (const target of targetsRef.current.values()) {
+        if (!isTargetUsable(target)) continue;
+        const rect = target.element.getBoundingClientRect();
+        if (point.x >= rect.left + hitTestInsetPx && point.x <= rect.right - hitTestInsetPx && point.y >= rect.top + hitTestInsetPx && point.y <= rect.bottom - hitTestInsetPx) {
+          return target.targetId;
+        }
+      }
+      return null;
+    },
+    [hitTestInsetPx, isTargetUsable]
+  );
+  const sortedUsableTargetIds = useCallback5(() => {
+    const entries = Array.from(targetsRef.current.values()).filter(
+      (t) => isTargetUsable(t)
+    );
+    entries.sort((a, b) => a.order - b.order);
+    return entries.map((t) => t.targetId);
+  }, [isTargetUsable]);
+  return {
+    targetsRef,
+    registerTarget,
+    updateTarget,
+    isTargetUsable,
+    resolveDropTarget,
+    sortedUsableTargetIds
+  };
+}
+
+// src/ui/components/card-drag/CardDragSurface.tsx
 import {
-  createContext as createContext3,
-  useCallback as useCallback5,
-  useContext as useContext3,
+  useCallback as useCallback6,
   useEffect as useEffect6,
   useId as useId2,
   useMemo as useMemo5,
-  useRef as useRef2,
+  useRef as useRef3,
   useState as useState8
 } from "react";
 import { createPortal } from "react-dom";
 import { clsx as clsx7 } from "clsx";
-import { AnimatePresence, motion } from "framer-motion";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var CardDragSurfaceContext = createContext3(null);
-function useCardDragSurface() {
-  return useContext3(CardDragSurfaceContext);
+import { AnimatePresence } from "framer-motion";
+
+// src/ui/components/card-drag/overlays.tsx
+import { motion } from "framer-motion";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var REDUCED_TRANSITION = { duration: 0 };
+function DragOverlay({ session, reducedMotion }) {
+  if (session.source === "keyboard") {
+    return /* @__PURE__ */ jsx10(
+      motion.div,
+      {
+        "data-dreamboard-card-drag-overlay": "",
+        "data-source": "keyboard",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: reducedMotion ? REDUCED_TRANSITION : { duration: 0.12 },
+        style: {
+          position: "fixed",
+          left: session.sourceRect.left,
+          top: session.sourceRect.top,
+          width: session.sourceRect.width,
+          height: session.sourceRect.height,
+          pointerEvents: "none",
+          zIndex: 1e3,
+          boxShadow: reducedMotion ? "none" : "0 12px 32px rgba(0,0,0,0.18)",
+          borderRadius: 12
+        },
+        children: session.content
+      },
+      "overlay-keyboard"
+    );
+  }
+  const liftedAnimate = reducedMotion ? {
+    scale: 1,
+    rotate: 0,
+    filter: "drop-shadow(0 0 0 rgba(0,0,0,0))"
+  } : {
+    scale: [1, 1.42, 1.35],
+    rotate: [0, -3, 3, -1.8, 1.8, 0],
+    filter: [
+      "drop-shadow(0 4px 8px rgba(0,0,0,0.18))",
+      "drop-shadow(0 24px 36px rgba(0,0,0,0.36))"
+    ]
+  };
+  const liftedTransition = reducedMotion ? REDUCED_TRANSITION : {
+    scale: { type: "spring", stiffness: 420, damping: 22, mass: 0.7 },
+    rotate: { duration: 0.55, ease: "easeInOut" },
+    filter: { duration: 0.18, ease: "easeOut" }
+  };
+  return /* @__PURE__ */ jsx10(
+    motion.div,
+    {
+      "data-dreamboard-card-drag-overlay": "",
+      "data-source": "pointer",
+      initial: {
+        scale: 1,
+        rotate: 0,
+        opacity: 1,
+        filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.15))"
+      },
+      animate: liftedAnimate,
+      exit: { opacity: 0 },
+      transition: liftedTransition,
+      style: {
+        position: "fixed",
+        left: session.pointerX - session.sourceRect.width / 2,
+        top: session.pointerY - session.sourceRect.height / 2,
+        width: session.sourceRect.width,
+        height: session.sourceRect.height,
+        zIndex: 1e3,
+        pointerEvents: "none",
+        touchAction: "none",
+        transformOrigin: "center center",
+        willChange: "transform, filter"
+      },
+      children: session.content
+    },
+    "overlay-pointer"
+  );
+}
+function SettleOverlay({
+  session,
+  transition,
+  onDone
+}) {
+  const startLeft = session.pointerX - session.sourceRect.width / 2;
+  const startTop = session.pointerY - session.sourceRect.height / 2;
+  const endLeft = session.targetRect.left + session.targetRect.width / 2 - session.sourceRect.width / 2;
+  const endTop = session.targetRect.top + session.targetRect.height / 2 - session.sourceRect.height / 2;
+  return /* @__PURE__ */ jsx10(
+    motion.div,
+    {
+      "data-dreamboard-card-drag-overlay": "",
+      "data-source": session.source,
+      "data-drag-phase": "settling",
+      initial: { left: startLeft, top: startTop, scale: 1.06, opacity: 1 },
+      animate: { left: endLeft, top: endTop, scale: 0.92, opacity: 0 },
+      transition,
+      onAnimationComplete: onDone,
+      style: {
+        position: "fixed",
+        width: session.sourceRect.width,
+        height: session.sourceRect.height,
+        zIndex: 1e3,
+        pointerEvents: "none"
+      },
+      children: session.content
+    }
+  );
+}
+function ReturnOverlay({
+  session,
+  transition,
+  onDone
+}) {
+  const startLeft = session.pointerX - session.sourceRect.width / 2;
+  const startTop = session.pointerY - session.sourceRect.height / 2;
+  return /* @__PURE__ */ jsx10(
+    motion.div,
+    {
+      "data-dreamboard-card-drag-overlay": "",
+      "data-source": session.source,
+      "data-drag-phase": "returning",
+      initial: { left: startLeft, top: startTop, scale: 1.06, opacity: 1 },
+      animate: {
+        left: session.sourceRect.left,
+        top: session.sourceRect.top,
+        scale: 1,
+        opacity: 1
+      },
+      exit: { opacity: 0 },
+      transition,
+      onAnimationComplete: onDone,
+      style: {
+        position: "fixed",
+        width: session.sourceRect.width,
+        height: session.sourceRect.height,
+        zIndex: 1e3,
+        pointerEvents: "none"
+      },
+      children: session.content
+    }
+  );
 }
+
+// src/ui/components/card-drag/CardDragSurface.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var SETTLE_TRANSITION = {
   type: "spring",
   stiffness: 380,
@@ -2995,7 +3205,6 @@ var RETURN_TRANSITION = {
   damping: 26,
   mass: 0.8
 };
-var REDUCED_TRANSITION = { duration: 0 };
 function CardDragSurface({
   onCardIntent,
   hitTestInsetPx = 8,
@@ -3008,10 +3217,8 @@ function CardDragSurface({
   const theme = useTheme();
   const reducedMotion = theme.motion.reducedMotion === "true";
   const liveRegionId = useId2();
-  const targetsRef = useRef2(/* @__PURE__ */ new Map());
-  const orderCounterRef = useRef2(0);
-  const activeDragRef = useRef2(null);
-  const inspectingRef = useRef2(null);
+  const activeDragRef = useRef3(null);
+  const inspectingRef = useRef3(null);
   const [activeDrag, setActiveDrag] = useState8(null);
   const [inspectingCardId, setInspectingCardId] = useState8(null);
   const [settlingState, setSettlingState] = useState8(
@@ -3020,19 +3227,27 @@ function CardDragSurface({
   const [returningState, setReturningState] = useState8(
     null
   );
-  const onIntentRef = useRef2(onCardIntent);
+  const onIntentRef = useRef3(onCardIntent);
   onIntentRef.current = onCardIntent;
   const settleTransition = motionTransition ?? SETTLE_TRANSITION;
   const returnTransition = motionTransition ?? RETURN_TRANSITION;
-  const setActive = useCallback5((next) => {
+  const setActive = useCallback6((next) => {
     activeDragRef.current = next;
     setActiveDrag(next);
   }, []);
-  const setInspecting = useCallback5((next) => {
+  const setInspecting = useCallback6((next) => {
     inspectingRef.current = next;
     setInspectingCardId(next);
   }, []);
-  const finalizeInteraction = useCallback5((sourceFocus) => {
+  const {
+    targetsRef,
+    registerTarget,
+    updateTarget,
+    isTargetUsable,
+    resolveDropTarget,
+    sortedUsableTargetIds
+  } = useDropTargetRegistry({ hitTestInsetPx, activeDragRef, setActive });
+  const finalizeInteraction = useCallback6((sourceFocus) => {
     if (sourceFocus) {
       queueMicrotask(() => {
         try {
@@ -3042,76 +3257,29 @@ function CardDragSurface({
       });
     }
   }, []);
-  const registerTarget = useCallback5(
-    (target) => {
-      targetsRef.current.set(target.targetId, {
-        ...target,
-        order: target.order || ++orderCounterRef.current
-      });
-      return () => {
-        targetsRef.current.delete(target.targetId);
-        const active = activeDragRef.current;
-        if (active && active.keyboardFocusedTargetId === target.targetId) {
-          setActive({ ...active, keyboardFocusedTargetId: null });
-        }
-      };
-    },
-    [setActive]
-  );
-  const updateTarget = useCallback5(
-    (targetId, patch) => {
-      const existing = targetsRef.current.get(targetId);
-      if (!existing) return;
-      targetsRef.current.set(targetId, { ...existing, ...patch });
-    },
-    []
-  );
-  const isTargetUsable = useCallback5((target) => {
-    return !target.disabled && target.eligible !== false;
-  }, []);
-  const resolveDropTarget = useCallback5(
-    (point) => {
-      for (const target of targetsRef.current.values()) {
-        if (!isTargetUsable(target)) continue;
-        const rect = target.element.getBoundingClientRect();
-        if (point.x >= rect.left + hitTestInsetPx && point.x <= rect.right - hitTestInsetPx && point.y >= rect.top + hitTestInsetPx && point.y <= rect.bottom - hitTestInsetPx) {
-          return target.targetId;
-        }
-      }
-      return null;
-    },
-    [hitTestInsetPx, isTargetUsable]
-  );
-  const sortedUsableTargetIds = useCallback5(() => {
-    const entries = Array.from(targetsRef.current.values()).filter(
-      (t) => isTargetUsable(t)
-    );
-    entries.sort((a, b) => a.order - b.order);
-    return entries.map((t) => t.targetId);
-  }, [isTargetUsable]);
-  const recordTap = useCallback5(
+  const recordTap = useCallback6(
     (input) => {
       if (input.cardDisabled || !input.cardEligible) return;
       setInspecting(input.cardId);
     },
     [setInspecting]
   );
-  const recordPreviewStart = useCallback5((cardId) => {
+  const recordPreviewStart = useCallback6((cardId) => {
     onIntentRef.current?.({ type: "previewStart", cardId });
   }, []);
-  const recordPreviewEnd = useCallback5((cardId) => {
+  const recordPreviewEnd = useCallback6((cardId) => {
     onIntentRef.current?.({ type: "previewEnd", cardId });
   }, []);
-  const recordActivate = useCallback5(
+  const recordActivate = useCallback6(
     (cardId, source) => {
       onIntentRef.current?.({ type: "activate", cardId, source });
     },
     []
   );
-  const clearInspect = useCallback5(() => {
+  const clearInspect = useCallback6(() => {
     if (inspectingRef.current !== null) setInspecting(null);
   }, [setInspecting]);
-  const startPointerDrag = useCallback5(
+  const startPointerDrag = useCallback6(
     (input) => {
       if (activeDragRef.current) return false;
       if (inspectingRef.current) setInspecting(null);
@@ -3139,7 +3307,7 @@ function CardDragSurface({
     },
     [resolveDropTarget, setActive, setInspecting]
   );
-  const updatePointer = useCallback5(
+  const updatePointer = useCallback6(
     (point) => {
       const active = activeDragRef.current;
       if (!active || active.source !== "pointer") return;
@@ -3153,7 +3321,7 @@ function CardDragSurface({
     },
     [resolveDropTarget, setActive]
   );
-  const completeWithDrop = useCallback5(
+  const completeWithDrop = useCallback6(
     (active, targetId, releaseX, releaseY) => {
       const target = targetsRef.current.get(targetId);
       const targetRect = target?.element.getBoundingClientRect();
@@ -3184,9 +3352,9 @@ function CardDragSurface({
       setActive(null);
       finalizeInteraction(active.sourceFocus);
     },
-    [finalizeInteraction, setActive]
+    [finalizeInteraction, setActive, targetsRef]
   );
-  const completeWithReturn = useCallback5(
+  const completeWithReturn = useCallback6(
     (active, releaseX, releaseY) => {
       const returning = {
         cardId: active.cardId,
@@ -3205,7 +3373,7 @@ function CardDragSurface({
     },
     [finalizeInteraction, setActive]
   );
-  const releasePointer = useCallback5(
+  const releasePointer = useCallback6(
     (point) => {
       const active = activeDragRef.current;
       if (!active || active.source !== "pointer") return;
@@ -3218,12 +3386,12 @@ function CardDragSurface({
     },
     [completeWithDrop, completeWithReturn, resolveDropTarget]
   );
-  const cancelDrag = useCallback5(() => {
+  const cancelDrag = useCallback6(() => {
     const active = activeDragRef.current;
     if (!active) return;
     completeWithReturn(active, active.pointerX, active.pointerY);
   }, [completeWithReturn]);
-  const startKeyboardDrag = useCallback5(
+  const startKeyboardDrag = useCallback6(
     (input) => {
       if (activeDragRef.current) return false;
       if (!input.cardEligible) return false;
@@ -3251,9 +3419,9 @@ function CardDragSurface({
       setActive(next);
       return true;
     },
-    [setActive, setInspecting, sortedUsableTargetIds]
+    [setActive, setInspecting, sortedUsableTargetIds, targetsRef]
   );
-  const moveKeyboardFocus = useCallback5(
+  const moveKeyboardFocus = useCallback6(
     (direction) => {
       const active = activeDragRef.current;
       if (!active || active.source !== "keyboard") return;
@@ -3272,9 +3440,9 @@ function CardDragSurface({
         pointerY: rect ? rect.top + rect.height / 2 : active.pointerY
       });
     },
-    [setActive, sortedUsableTargetIds]
+    [setActive, sortedUsableTargetIds, targetsRef]
   );
-  const commitKeyboardDrop = useCallback5(() => {
+  const commitKeyboardDrop = useCallback6(() => {
     const active = activeDragRef.current;
     if (!active || active.source !== "keyboard") return;
     const targetId = active.keyboardFocusedTargetId;
@@ -3288,7 +3456,7 @@ function CardDragSurface({
       rect.left + rect.width / 2,
       rect.top + rect.height / 2
     );
-  }, [completeWithDrop, isTargetUsable]);
+  }, [completeWithDrop, isTargetUsable, targetsRef]);
   const phase = useMemo5(() => {
     if (activeDrag) return "dragging";
     if (settlingState) return "settling";
@@ -3350,230 +3518,107 @@ function CardDragSurface({
       registerTarget,
       updateTarget,
       controller,
-      activeCardId: controller.activeCardId,
-      overTargetId: activeDrag?.overTargetId ?? null,
-      dragActive: activeDrag !== null,
-      keyboardFocusedTargetId: activeDrag?.keyboardFocusedTargetId ?? null
-    }),
-    [activeDrag, controller, registerTarget, updateTarget]
-  );
-  useEffect6(() => {
-    if (!activeDrag) return;
-    function onKeyDown(event) {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        cancelDrag();
-      }
-    }
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [activeDrag, cancelDrag]);
-  const announcement = useMemo5(() => {
-    if (!activeDrag) return null;
-    const overTarget = activeDrag.overTargetId ? targetsRef.current.get(activeDrag.overTargetId) : null;
-    const overLabel = overTarget?.label ?? null;
-    const cardLabel = activeDrag.cardLabel ?? "Card";
-    if (overLabel) {
-      return `${cardLabel} over ${overLabel}. Press Enter to drop or Escape to cancel.`;
-    }
-    return `${cardLabel} picked up. Move to a target or press Escape to cancel.`;
-  }, [activeDrag]);
-  const overlayContent = activeDrag ? /* @__PURE__ */ jsx10(DragOverlay, { session: activeDrag, reducedMotion }) : null;
-  const settleOverlay = settlingState ? /* @__PURE__ */ jsx10(
-    SettleOverlay,
-    {
-      session: settlingState,
-      transition: reducedMotion ? REDUCED_TRANSITION : settleTransition,
-      onDone: () => setSettlingState(null)
-    },
-    `settle-${settlingState.cardId}`
-  ) : null;
-  const returnOverlay = returningState ? /* @__PURE__ */ jsx10(
-    ReturnOverlay,
-    {
-      session: returningState,
-      transition: reducedMotion ? REDUCED_TRANSITION : returnTransition,
-      onDone: () => setReturningState(null)
-    },
-    `return-${returningState.cardId}`
-  ) : null;
-  const portalRoot = typeof document !== "undefined" ? document.body : null;
-  return /* @__PURE__ */ jsxs5(CardDragSurfaceContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ jsx10(
-      "div",
-      {
-        "data-dreamboard-card-drag-surface": "",
-        "data-drag-active": activeDrag ? "true" : void 0,
-        "data-drag-source": activeDrag?.source,
-        "data-drag-phase": phase,
-        className: clsx7("relative", className),
-        style,
-        children
-      }
-    ),
-    portalRoot ? createPortal(
-      /* @__PURE__ */ jsxs5(AnimatePresence, { initial: false, children: [
-        overlayContent,
-        settleOverlay,
-        returnOverlay
-      ] }),
-      portalRoot
-    ) : null,
-    !suppressLiveAnnouncement ? /* @__PURE__ */ jsx10(
-      "div",
-      {
-        id: liveRegionId,
-        role: "status",
-        "aria-live": "polite",
-        className: "sr-only",
-        "data-dreamboard-card-drag-announcement": "",
-        style: {
-          position: "absolute",
-          width: 1,
-          height: 1,
-          padding: 0,
-          margin: -1,
-          overflow: "hidden",
-          clip: "rect(0,0,0,0)",
-          whiteSpace: "nowrap",
-          border: 0
-        },
-        children: announcement ?? ""
-      }
-    ) : null
-  ] });
-}
-function DragOverlay({ session, reducedMotion }) {
-  if (session.source === "keyboard") {
-    return /* @__PURE__ */ jsx10(
-      motion.div,
-      {
-        "data-dreamboard-card-drag-overlay": "",
-        "data-source": "keyboard",
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: reducedMotion ? REDUCED_TRANSITION : { duration: 0.12 },
-        style: {
-          position: "fixed",
-          left: session.sourceRect.left,
-          top: session.sourceRect.top,
-          width: session.sourceRect.width,
-          height: session.sourceRect.height,
-          pointerEvents: "none",
-          zIndex: 1e3,
-          boxShadow: reducedMotion ? "none" : "0 12px 32px rgba(0,0,0,0.18)",
-          borderRadius: 12
-        },
-        children: session.content
-      },
-      "overlay-keyboard"
-    );
-  }
-  const liftedAnimate = reducedMotion ? {
-    scale: 1,
-    rotate: 0,
-    filter: "drop-shadow(0 0 0 rgba(0,0,0,0))"
-  } : {
-    scale: [1, 1.42, 1.35],
-    rotate: [0, -3, 3, -1.8, 1.8, 0],
-    filter: [
-      "drop-shadow(0 4px 8px rgba(0,0,0,0.18))",
-      "drop-shadow(0 24px 36px rgba(0,0,0,0.36))"
-    ]
-  };
-  const liftedTransition = reducedMotion ? REDUCED_TRANSITION : {
-    scale: { type: "spring", stiffness: 420, damping: 22, mass: 0.7 },
-    rotate: { duration: 0.55, ease: "easeInOut" },
-    filter: { duration: 0.18, ease: "easeOut" }
-  };
-  return /* @__PURE__ */ jsx10(
-    motion.div,
-    {
-      "data-dreamboard-card-drag-overlay": "",
-      "data-source": "pointer",
-      initial: {
-        scale: 1,
-        rotate: 0,
-        opacity: 1,
-        filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.15))"
-      },
-      animate: liftedAnimate,
-      exit: { opacity: 0 },
-      transition: liftedTransition,
-      style: {
-        position: "fixed",
-        left: session.pointerX - session.sourceRect.width / 2,
-        top: session.pointerY - session.sourceRect.height / 2,
-        width: session.sourceRect.width,
-        height: session.sourceRect.height,
-        zIndex: 1e3,
-        pointerEvents: "none",
-        touchAction: "none",
-        transformOrigin: "center center",
-        willChange: "transform, filter"
-      },
-      children: session.content
-    },
-    "overlay-pointer"
-  );
-}
-function SettleOverlay({ session, transition, onDone }) {
-  const startLeft = session.pointerX - session.sourceRect.width / 2;
-  const startTop = session.pointerY - session.sourceRect.height / 2;
-  const endLeft = session.targetRect.left + session.targetRect.width / 2 - session.sourceRect.width / 2;
-  const endTop = session.targetRect.top + session.targetRect.height / 2 - session.sourceRect.height / 2;
-  return /* @__PURE__ */ jsx10(
-    motion.div,
-    {
-      "data-dreamboard-card-drag-overlay": "",
-      "data-source": session.source,
-      "data-drag-phase": "settling",
-      initial: { left: startLeft, top: startTop, scale: 1.06, opacity: 1 },
-      animate: { left: endLeft, top: endTop, scale: 0.92, opacity: 0 },
-      transition,
-      onAnimationComplete: onDone,
-      style: {
-        position: "fixed",
-        width: session.sourceRect.width,
-        height: session.sourceRect.height,
-        zIndex: 1e3,
-        pointerEvents: "none"
-      },
-      children: session.content
-    }
-  );
-}
-function ReturnOverlay({ session, transition, onDone }) {
-  const startLeft = session.pointerX - session.sourceRect.width / 2;
-  const startTop = session.pointerY - session.sourceRect.height / 2;
-  return /* @__PURE__ */ jsx10(
-    motion.div,
-    {
-      "data-dreamboard-card-drag-overlay": "",
-      "data-source": session.source,
-      "data-drag-phase": "returning",
-      initial: { left: startLeft, top: startTop, scale: 1.06, opacity: 1 },
-      animate: {
-        left: session.sourceRect.left,
-        top: session.sourceRect.top,
-        scale: 1,
-        opacity: 1
-      },
-      exit: { opacity: 0 },
-      transition,
-      onAnimationComplete: onDone,
-      style: {
-        position: "fixed",
-        width: session.sourceRect.width,
-        height: session.sourceRect.height,
-        zIndex: 1e3,
-        pointerEvents: "none"
-      },
-      children: session.content
-    }
+      activeCardId: controller.activeCardId,
+      overTargetId: activeDrag?.overTargetId ?? null,
+      dragActive: activeDrag !== null,
+      keyboardFocusedTargetId: activeDrag?.keyboardFocusedTargetId ?? null
+    }),
+    [activeDrag, controller, registerTarget, updateTarget]
   );
+  useEffect6(() => {
+    if (!activeDrag) return;
+    function onKeyDown(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        cancelDrag();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [activeDrag, cancelDrag]);
+  const announcement = useMemo5(() => {
+    if (!activeDrag) return null;
+    const overTarget = activeDrag.overTargetId ? targetsRef.current.get(activeDrag.overTargetId) : null;
+    const overLabel = overTarget?.label ?? null;
+    const cardLabel = activeDrag.cardLabel ?? "Card";
+    if (overLabel) {
+      return `${cardLabel} over ${overLabel}. Press Enter to drop or Escape to cancel.`;
+    }
+    return `${cardLabel} picked up. Move to a target or press Escape to cancel.`;
+  }, [activeDrag, targetsRef]);
+  const overlayContent = activeDrag ? /* @__PURE__ */ jsx11(DragOverlay, { session: activeDrag, reducedMotion }) : null;
+  const settleOverlay = settlingState ? /* @__PURE__ */ jsx11(
+    SettleOverlay,
+    {
+      session: settlingState,
+      transition: reducedMotion ? REDUCED_TRANSITION : settleTransition,
+      onDone: () => setSettlingState(null)
+    },
+    `settle-${settlingState.cardId}`
+  ) : null;
+  const returnOverlay = returningState ? /* @__PURE__ */ jsx11(
+    ReturnOverlay,
+    {
+      session: returningState,
+      transition: reducedMotion ? REDUCED_TRANSITION : returnTransition,
+      onDone: () => setReturningState(null)
+    },
+    `return-${returningState.cardId}`
+  ) : null;
+  const portalRoot = typeof document !== "undefined" ? document.body : null;
+  return /* @__PURE__ */ jsxs5(CardDragSurfaceContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        "data-dreamboard-card-drag-surface": "",
+        "data-drag-active": activeDrag ? "true" : void 0,
+        "data-drag-source": activeDrag?.source,
+        "data-drag-phase": phase,
+        className: clsx7("relative", className),
+        style,
+        children
+      }
+    ),
+    portalRoot ? createPortal(
+      /* @__PURE__ */ jsxs5(AnimatePresence, { initial: false, children: [
+        overlayContent,
+        settleOverlay,
+        returnOverlay
+      ] }),
+      portalRoot
+    ) : null,
+    !suppressLiveAnnouncement ? /* @__PURE__ */ jsx11(
+      "div",
+      {
+        id: liveRegionId,
+        role: "status",
+        "aria-live": "polite",
+        className: "sr-only",
+        "data-dreamboard-card-drag-announcement": "",
+        style: {
+          position: "absolute",
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clip: "rect(0,0,0,0)",
+          whiteSpace: "nowrap",
+          border: 0
+        },
+        children: announcement ?? ""
+      }
+    ) : null
+  ] });
 }
+
+// src/ui/components/card-drag/CardDropTargetView.tsx
+import {
+  useCallback as useCallback7,
+  useEffect as useEffect7,
+  useRef as useRef4
+} from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function CardDropTargetView({
   targetId,
   state,
@@ -3585,16 +3630,16 @@ function CardDropTargetView({
   role = "button"
 }) {
   const surface = useCardDragSurface();
-  const ref = useRef2(null);
+  const ref = useRef4(null);
   const disabled = state?.disabled ?? false;
   const baseEligible = state?.eligible ?? true;
   const baseLabel = label ?? null;
   const orderProp = order ?? 0;
-  const registerTargetRef = useRef2(surface?.registerTarget);
+  const registerTargetRef = useRef4(surface?.registerTarget);
   registerTargetRef.current = surface?.registerTarget;
-  const updateTargetRef = useRef2(surface?.updateTarget);
+  const updateTargetRef = useRef4(surface?.updateTarget);
   updateTargetRef.current = surface?.updateTarget;
-  useEffect6(() => {
+  useEffect7(() => {
     const element = ref.current;
     const register = registerTargetRef.current;
     if (!register || !element) return;
@@ -3608,7 +3653,7 @@ function CardDropTargetView({
     });
     return unregister;
   }, [targetId]);
-  useEffect6(() => {
+  useEffect7(() => {
     updateTargetRef.current?.(targetId, {
       disabled,
       eligible: baseEligible,
@@ -3619,7 +3664,7 @@ function CardDropTargetView({
   const dragActive = surface?.dragActive ?? false;
   const overTargetId = surface?.overTargetId ?? null;
   const keyboardFocused = surface?.keyboardFocusedTargetId === targetId;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!keyboardFocused) return;
     const el = ref.current;
     if (!el) return;
@@ -3635,7 +3680,7 @@ function CardDropTargetView({
     active: dragActive ? true : state?.active,
     over: overTargetId === targetId && baseEligible ? true : state?.over ?? false
   };
-  const handleKeyDown = useCallback5(
+  const handleKeyDown = useCallback7(
     (event) => {
       if (!surface) return;
       const controller = surface.controller;
@@ -3662,7 +3707,7 @@ function CardDropTargetView({
     },
     [surface]
   );
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       ref,
@@ -3684,14 +3729,14 @@ function CardDropTargetView({
 
 // src/ui/components/HandView.tsx
 import {
-  useCallback as useCallback7,
+  useCallback as useCallback9,
   useId as useId3,
   useMemo as useMemo8
 } from "react";
 import { clsx as clsx8 } from "clsx";
 
 // src/ui/hooks/useHandPresentation.ts
-import { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef3, useState as useState9 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef5, useState as useState9 } from "react";
 
 // src/ui/components/hand-layout-math.ts
 function computeFanLayout(options) {
@@ -3777,9 +3822,9 @@ function useHandPresentation({
   mobile = "tray",
   containerPadding = DEFAULT_PADDING
 }) {
-  const containerRef = useRef3(null);
+  const containerRef = useRef5(null);
   const [containerWidth, setContainerWidth] = useState9(0);
-  useEffect7(() => {
+  useEffect8(() => {
     const node = containerRef.current;
     if (!node) return;
     let frame = 0;
@@ -3844,7 +3889,7 @@ function useHandPresentation({
 }
 
 // src/ui/hooks/useHandCardPointer.ts
-import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo7, useRef as useRef4, useState as useState10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo7, useRef as useRef6, useState as useState10 } from "react";
 
 // src/ui/components/hand-pointer-engine.ts
 var DEFAULT_POINTER_THRESHOLDS = {
@@ -4083,21 +4128,21 @@ function useHandCardPointer({
   renderLiftedCard,
   resolveCardLabel
 } = {}) {
-  const intentRef = useRef4(onIntent);
+  const intentRef = useRef6(onIntent);
   intentRef.current = onIntent;
-  const policyRef = useRef4(policy);
+  const policyRef = useRef6(policy);
   policyRef.current = policy;
-  const surfaceRef = useRef4(surface);
+  const surfaceRef = useRef6(surface);
   surfaceRef.current = surface;
-  const renderLiftedCardRef = useRef4(renderLiftedCard);
+  const renderLiftedCardRef = useRef6(renderLiftedCard);
   renderLiftedCardRef.current = renderLiftedCard;
-  const resolveCardLabelRef = useRef4(resolveCardLabel);
+  const resolveCardLabelRef = useRef6(resolveCardLabel);
   resolveCardLabelRef.current = resolveCardLabel;
-  const cardElementsRef = useRef4(/* @__PURE__ */ new Map());
-  const cardRefsRef = useRef4(
+  const cardElementsRef = useRef6(/* @__PURE__ */ new Map());
+  const cardRefsRef = useRef6(
     /* @__PURE__ */ new Map()
   );
-  const getCardRef = useCallback6((cardId) => {
+  const getCardRef = useCallback8((cardId) => {
     let stable = cardRefsRef.current.get(cardId);
     if (!stable) {
       stable = (element) => {
@@ -4116,7 +4161,7 @@ function useHandCardPointer({
     kind: "idle"
   });
   const [scrollLocked, setScrollLocked] = useState10(false);
-  const captureSourceRect = useCallback6((cardId) => {
+  const captureSourceRect = useCallback8((cardId) => {
     const el = cardElementsRef.current.get(cardId);
     if (!el) return { left: 0, top: 0, width: 0, height: 0 };
     const rect = el.getBoundingClientRect();
@@ -4217,8 +4262,8 @@ function useHandCardPointer({
     ),
     [captureSourceRect, thresholds]
   );
-  useEffect8(() => () => engine.dispose(), [engine]);
-  const bindCard = useCallback6(
+  useEffect9(() => () => engine.dispose(), [engine]);
+  const bindCard = useCallback8(
     (card) => {
       const isActive = activeCardId === card.cardId;
       const pointerStateKind = isActive ? recognitionState.kind : "idle";
@@ -4329,7 +4374,7 @@ function useHandCardPointer({
       scrollLocked
     ]
   );
-  const activateKeyboard = useCallback6((card) => {
+  const activateKeyboard = useCallback8((card) => {
     if (card.disabled || !card.eligible) return;
     if (policyRef.current === "drag-to-target") return;
     if (surfaceRef.current) {
@@ -4352,7 +4397,7 @@ function useHandCardPointer({
 }
 
 // src/ui/components/HandView.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var CARD_DIMENSIONS2 = {
   sm: { width: 80, height: 112 },
   md: { width: 96, height: 144 },
@@ -4404,7 +4449,7 @@ function HandView({
   });
   const surface = useCardDragSurface();
   const surfaceController = surface?.controller ?? null;
-  const emit = useCallback7(
+  const emit = useCallback9(
     (intent) => {
       onCardIntent?.(intent);
     },
@@ -4417,7 +4462,7 @@ function HandView({
     }),
     [cards, stateForCard]
   );
-  const renderLiftedCard = useCallback7(
+  const renderLiftedCard = useCallback9(
     (cardId) => {
       const found = items.find((item) => item.card.id === cardId);
       if (!found) return null;
@@ -4425,7 +4470,7 @@ function HandView({
     },
     [items, renderCard]
   );
-  const resolveCardLabel = useCallback7(
+  const resolveCardLabel = useCallback9(
     (cardId) => {
       const found = items.find((item) => item.card.id === cardId);
       if (!found) return null;
@@ -4442,7 +4487,7 @@ function HandView({
     resolveCardLabel
   });
   if (cards.length === 0) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         ref: presentation.containerRef,
@@ -4502,7 +4547,7 @@ function HandView({
     const transform = transformParts.length ? transformParts.join(" ") : void 0;
     const liftVisualOpacity = isLifted ? 0.25 : 1;
     const inspectShadow = isInspecting && !reducedMotion ? "0 14px 28px rgba(0,0,0,0.18)" : void 0;
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         role: "gridcell",
@@ -4539,7 +4584,7 @@ function HandView({
   };
   if (presentation.mode === "fan" || presentation.mode === "compressed-fan") {
     const totalHeight = dims.height + 24;
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         ref: presentation.containerRef,
@@ -4560,7 +4605,7 @@ function HandView({
           touchAction: "pan-x",
           ...style
         },
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx13(
           "div",
           {
             role: "row",
@@ -4580,7 +4625,7 @@ function HandView({
     );
   }
   if (presentation.mode === "tray") {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         ref: presentation.containerRef,
@@ -4595,7 +4640,7 @@ function HandView({
         "aria-colcount": cards.length,
         className: clsx8("relative w-full min-w-0", className),
         style,
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx13(
           "div",
           {
             role: "row",
@@ -4609,7 +4654,7 @@ function HandView({
               paddingBottom: "max(1rem, env(safe-area-inset-bottom, 0px))",
               scrollBehavior: reducedMotion ? "auto" : "smooth"
             },
-            children: items.map((item) => /* @__PURE__ */ jsx11(
+            children: items.map((item) => /* @__PURE__ */ jsx13(
               "div",
               {
                 className: "snap-start shrink-0",
@@ -4623,7 +4668,7 @@ function HandView({
       }
     );
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       ref: presentation.containerRef,
@@ -4641,7 +4686,7 @@ function HandView({
         className
       ),
       style: { touchAction: "pan-x", ...style },
-      children: /* @__PURE__ */ jsx11("div", { role: "row", className: "flex flex-wrap justify-center gap-1", children: items.map((item) => renderItem(item)) })
+      children: /* @__PURE__ */ jsx13("div", { role: "row", className: "flex flex-wrap justify-center gap-1", children: items.map((item) => renderItem(item)) })
     }
   );
 }
@@ -4649,16 +4694,16 @@ function HandView({
 // src/ui/components/MobileHandTray.tsx
 import {
   createContext as createContext4,
-  useCallback as useCallback8,
+  useCallback as useCallback10,
   useContext as useContext4,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useMemo as useMemo9,
-  useRef as useRef5,
+  useRef as useRef7,
   useState as useState11
 } from "react";
 import { useDrag as useDrag2 } from "@use-gesture/react";
 import { clsx as clsx9 } from "clsx";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var MobileHandTrayContext = createContext4(
   null
 );
@@ -4680,7 +4725,7 @@ var DOCK_SNAP_MAX_HEIGHT = {
 function MobileHandTrayProvider({ children }) {
   const [handsById, setHandsById] = useState11(() => /* @__PURE__ */ new Map());
   const isMobile = useIsMobile();
-  const registerHand = useCallback8((hand) => {
+  const registerHand = useCallback10((hand) => {
     setHandsById((current) => {
       const previous = current.get(hand.id);
       if (previous && previous.zone === hand.zone && previous.label === hand.label && previous.role === hand.role && previous.order === hand.order && previous.version === hand.version && previous.count === hand.count && previous.active === hand.active && previous.autoOpen === hand.autoOpen) {
@@ -4711,8 +4756,8 @@ function MobileHandTrayProvider({ children }) {
   );
   const trayActive = isMobile && hands.length > 0;
   const stateValue = useMemo9(() => ({ active: trayActive }), [trayActive]);
-  return /* @__PURE__ */ jsx12(MobileHandTrayContext.Provider, { value, children: /* @__PURE__ */ jsxs6(MobileHandTrayStateContext.Provider, { value: stateValue, children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(MobileHandTrayContext.Provider, { value, children: /* @__PURE__ */ jsxs6(MobileHandTrayStateContext.Provider, { value: stateValue, children: [
+    /* @__PURE__ */ jsx14(
       "div",
       {
         "data-dreamboard-mobile-hand-shell": "",
@@ -4725,7 +4770,7 @@ function MobileHandTrayProvider({ children }) {
         children
       }
     ),
-    trayActive ? /* @__PURE__ */ jsx12(MobileHandTray, { hands }) : null
+    trayActive ? /* @__PURE__ */ jsx14(MobileHandTray, { hands }) : null
   ] }) });
 }
 function useRegisterMobileHand(hand) {
@@ -4735,7 +4780,7 @@ function useRegisterMobileHand(hand) {
       "Generated hand surfaces must be rendered inside <UI.Root>; mobile hand tray registration is unavailable."
     );
   }
-  useEffect9(() => context.registerHand(hand), [context, hand]);
+  useEffect10(() => context.registerHand(hand), [context, hand]);
 }
 function useMobileHandTrayActive() {
   return useContext4(MobileHandTrayStateContext).active;
@@ -4745,7 +4790,7 @@ function MobileHandTray({
 }) {
   const [snap, setSnap] = useState11("peek");
   const open = snap !== "peek";
-  const advanceSnap = useCallback8((direction) => {
+  const advanceSnap = useCallback10((direction) => {
     setSnap((current) => {
       const index = DOCK_SNAPS.indexOf(current);
       const next = Math.min(
@@ -4759,7 +4804,7 @@ function MobileHandTray({
   const themeCssVars = useThemeCssVars();
   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;
-  useEffect9(() => {
+  useEffect10(() => {
     if (!preferredHand) {
       setActiveId(null);
       return;
@@ -4769,8 +4814,8 @@ function MobileHandTray({
     );
   }, [hands, preferredHand]);
   const active = selectedHand?.active ?? false;
-  const prevActiveRef = useRef5(false);
-  useEffect9(() => {
+  const prevActiveRef = useRef7(false);
+  useEffect10(() => {
     if (active !== prevActiveRef.current) {
       prevActiveRef.current = active;
       setSnap(active ? "raised" : "peek");
@@ -4788,7 +4833,7 @@ function MobileHandTray({
   const activeBadges = hands.filter(
     (hand) => hand.id !== selectedHand.id && hand.active
   );
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       "data-dreamboard-mobile-hand-tray": "",
@@ -4841,7 +4886,7 @@ function MobileHandTray({
                   cursor: "pointer"
                 },
                 children: [
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx14(
                     "span",
                     {
                       "aria-hidden": true,
@@ -4851,8 +4896,8 @@ function MobileHandTray({
                   ),
                   /* @__PURE__ */ jsxs6("span", { className: "flex items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs6("span", { className: "flex min-w-0 items-center gap-2 text-sm font-semibold", children: [
-                      /* @__PURE__ */ jsx12("span", { className: "truncate", children: selectedHand.label }),
-                      /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx14("span", { className: "truncate", children: selectedHand.label }),
+                      /* @__PURE__ */ jsx14(
                         "span",
                         {
                           className: "rounded-full px-2 py-0.5 text-xs font-bold",
@@ -4860,9 +4905,9 @@ function MobileHandTray({
                           children: selectedHand.count
                         }
                       ),
-                      active ? /* @__PURE__ */ jsx12("span", { className: "rounded-full bg-amber-400 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-950", children: "your turn" }) : null
+                      active ? /* @__PURE__ */ jsx14("span", { className: "rounded-full bg-amber-400 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-950", children: "your turn" }) : null
                     ] }),
-                    activeBadges.length > 0 ? /* @__PURE__ */ jsx12(
+                    activeBadges.length > 0 ? /* @__PURE__ */ jsx14(
                       "span",
                       {
                         "aria-label": `${activeBadges.length} other active hand sections`,
@@ -4889,7 +4934,7 @@ function MobileHandTray({
                   transition: "max-height 240ms ease"
                 },
                 children: [
-                  hands.length > 1 ? /* @__PURE__ */ jsx12(
+                  hands.length > 1 ? /* @__PURE__ */ jsx14(
                     "div",
                     {
                       role: "tablist",
@@ -4920,7 +4965,7 @@ function MobileHandTray({
                       ))
                     }
                   ) : null,
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx14(
                     "div",
                     {
                       className: "px-3 pt-2 sm:px-4",
@@ -4943,7 +4988,7 @@ function MobileHandTray({
 // src/ui/components/PlayArea.tsx
 import { motion as motion2, AnimatePresence as AnimatePresence2 } from "framer-motion";
 import { clsx as clsx10 } from "clsx";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function PlayArea({
   cards,
   filter,
@@ -4962,7 +5007,7 @@ function PlayArea({
     grid: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-6",
     row: "flex flex-wrap items-center justify-center gap-3 sm:gap-6"
   };
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       className: clsx10(
@@ -4978,7 +5023,7 @@ function PlayArea({
       },
       role: "region",
       "aria-label": `${ariaLabel} - ${visibleCards.length} item${visibleCards.length !== 1 ? "s" : ""}`,
-      children: /* @__PURE__ */ jsx13(AnimatePresence2, { mode: "popLayout", children: visibleCards.length === 0 ? /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx15(AnimatePresence2, { mode: "popLayout", children: visibleCards.length === 0 ? /* @__PURE__ */ jsx15(
         motion2.div,
         {
           className: "flex items-center justify-center h-full absolute inset-0 pointer-events-none",
@@ -4987,7 +5032,7 @@ function PlayArea({
           exit: { opacity: 0 },
           role: "status",
           "aria-live": "polite",
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx15(
             "div",
             {
               style: {
@@ -5000,7 +5045,7 @@ function PlayArea({
             }
           )
         }
-      ) : /* @__PURE__ */ jsx13("div", { className: layoutClasses[layout], children: visibleCards.map((card, index) => /* @__PURE__ */ jsx13(
+      ) : /* @__PURE__ */ jsx15("div", { className: layoutClasses[layout], children: visibleCards.map((card, index) => /* @__PURE__ */ jsx15(
         motion2.div,
         {
           layout: !reducedMotion,
@@ -5013,7 +5058,7 @@ function PlayArea({
             damping: 20,
             delay: reducedMotion ? 0 : index * 0.05
           },
-          children: interactive && onCardClick ? /* @__PURE__ */ jsx13(
+          children: interactive && onCardClick ? /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -5027,7 +5072,7 @@ function PlayArea({
               },
               className: "border-0 bg-transparent p-0 cursor-pointer focus-visible:outline-none",
               style: { all: "unset", cursor: "pointer" },
-              children: /* @__PURE__ */ jsx13(
+              children: /* @__PURE__ */ jsx15(
                 CardFace,
                 {
                   card,
@@ -5036,7 +5081,7 @@ function PlayArea({
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx13(
+          ) : /* @__PURE__ */ jsx15(
             CardFace,
             {
               card,
@@ -5056,7 +5101,7 @@ function PlayArea({
 import { motion as motion3 } from "framer-motion";
 import { clsx as clsx11 } from "clsx";
 import { Loader2 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var CARD_SKELETON_KEYS = ["card-1", "card-2", "card-3", "card-4", "card-5"];
 var PLAYER_SKELETON_KEYS = ["player-1", "player-2", "player-3", "player-4"];
 var HAND_SKELETON_KEYS = [
@@ -5071,7 +5116,7 @@ function SkeletonBox({
   className,
   animate = true
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     motion3.div,
     {
       className: clsx11("bg-slate-200 rounded", className),
@@ -5093,7 +5138,7 @@ function CardSkeleton({ size = "md" }) {
     md: "w-20 h-32 sm:w-24 sm:h-36",
     lg: "w-24 h-36 sm:w-32 sm:h-48"
   };
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     motion3.div,
     {
       className: clsx11(
@@ -5103,16 +5148,16 @@ function CardSkeleton({ size = "md" }) {
       initial: { opacity: 0, y: 20 },
       animate: { opacity: 1, y: 0 },
       transition: { type: "spring", stiffness: 300, damping: 25 },
-      children: /* @__PURE__ */ jsx14(SkeletonBox, { className: "w-full h-full" })
+      children: /* @__PURE__ */ jsx16(SkeletonBox, { className: "w-full h-full" })
     }
   );
 }
 function PlayerSkeleton() {
   return /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 p-3 bg-white/80 rounded-xl border-2 border-slate-200", children: [
-    /* @__PURE__ */ jsx14(SkeletonBox, { className: "w-12 h-12 sm:w-14 sm:h-14 rounded-full" }),
+    /* @__PURE__ */ jsx16(SkeletonBox, { className: "w-12 h-12 sm:w-14 sm:h-14 rounded-full" }),
     /* @__PURE__ */ jsxs7("div", { className: "flex-1 space-y-2", children: [
-      /* @__PURE__ */ jsx14(SkeletonBox, { className: "h-4 w-24 sm:w-32" }),
-      /* @__PURE__ */ jsx14(SkeletonBox, { className: "h-3 w-16 sm:w-20" })
+      /* @__PURE__ */ jsx16(SkeletonBox, { className: "h-4 w-24 sm:w-32" }),
+      /* @__PURE__ */ jsx16(SkeletonBox, { className: "h-3 w-16 sm:w-20" })
     ] })
   ] });
 }
@@ -5133,15 +5178,15 @@ function GameSkeleton({
         "aria-live": "polite",
         "aria-label": message,
         children: [
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx16(
             motion3.div,
             {
               animate: { rotate: 360 },
               transition: { duration: 1, repeat: Infinity, ease: "linear" },
-              children: /* @__PURE__ */ jsx14(Loader2, { size: 48, className: "text-blue-500", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx16(Loader2, { size: 48, className: "text-blue-500", "aria-hidden": "true" })
             }
           ),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx16(
             motion3.p,
             {
               className: "mt-4 text-slate-600 text-lg font-medium",
@@ -5167,17 +5212,17 @@ function GameSkeleton({
         "aria-live": "polite",
         "aria-label": message,
         children: [
-          /* @__PURE__ */ jsx14("div", { className: "flex gap-2 sm:gap-4 mb-8", children: CARD_SKELETON_KEYS.map((key, i) => /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx16("div", { className: "flex gap-2 sm:gap-4 mb-8", children: CARD_SKELETON_KEYS.map((key, i) => /* @__PURE__ */ jsx16(
             motion3.div,
             {
               initial: { opacity: 0, y: 20 },
               animate: { opacity: 1, y: 0 },
               transition: { delay: i * 0.1 },
-              children: /* @__PURE__ */ jsx14(CardSkeleton, {})
+              children: /* @__PURE__ */ jsx16(CardSkeleton, {})
             },
             key
           )) }),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx16(
             motion3.p,
             {
               className: "text-slate-600 text-sm sm:text-base",
@@ -5203,17 +5248,17 @@ function GameSkeleton({
         "aria-live": "polite",
         "aria-label": message,
         children: [
-          /* @__PURE__ */ jsx14("div", { className: "w-full max-w-md space-y-4 mb-8", children: PLAYER_SKELETON_KEYS.map((key, i) => /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx16("div", { className: "w-full max-w-md space-y-4 mb-8", children: PLAYER_SKELETON_KEYS.map((key, i) => /* @__PURE__ */ jsx16(
             motion3.div,
             {
               initial: { opacity: 0, x: -20 },
               animate: { opacity: 1, x: 0 },
               transition: { delay: i * 0.1 },
-              children: /* @__PURE__ */ jsx14(PlayerSkeleton, {})
+              children: /* @__PURE__ */ jsx16(PlayerSkeleton, {})
             },
             key
           )) }),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx16(
             motion3.p,
             {
               className: "text-slate-600 text-sm sm:text-base",
@@ -5239,27 +5284,27 @@ function GameSkeleton({
       "aria-label": message,
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between mb-6 sm:mb-8", children: [
-          /* @__PURE__ */ jsx14(SkeletonBox, { className: "h-8 w-32 sm:w-48" }),
-          /* @__PURE__ */ jsx14(SkeletonBox, { className: "h-8 w-20 sm:w-32" })
+          /* @__PURE__ */ jsx16(SkeletonBox, { className: "h-8 w-32 sm:w-48" }),
+          /* @__PURE__ */ jsx16(SkeletonBox, { className: "h-8 w-20 sm:w-32" })
         ] }),
-        /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8", children: PLAYER_SKELETON_KEYS.map((key, i) => /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8", children: PLAYER_SKELETON_KEYS.map((key, i) => /* @__PURE__ */ jsx16(
           motion3.div,
           {
             initial: { opacity: 0, scale: 0.9 },
             animate: { opacity: 1, scale: 1 },
             transition: { delay: i * 0.1 },
-            children: /* @__PURE__ */ jsx14(PlayerSkeleton, {})
+            children: /* @__PURE__ */ jsx16(PlayerSkeleton, {})
           },
           key
         )) }),
-        /* @__PURE__ */ jsx14("div", { className: "mb-6 sm:mb-8", children: /* @__PURE__ */ jsx14(SkeletonBox, { className: "w-full h-48 sm:h-64 rounded-2xl" }) }),
-        /* @__PURE__ */ jsx14("div", { className: "flex justify-center gap-2 sm:gap-4", children: HAND_SKELETON_KEYS.map((key, i) => /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16("div", { className: "mb-6 sm:mb-8", children: /* @__PURE__ */ jsx16(SkeletonBox, { className: "w-full h-48 sm:h-64 rounded-2xl" }) }),
+        /* @__PURE__ */ jsx16("div", { className: "flex justify-center gap-2 sm:gap-4", children: HAND_SKELETON_KEYS.map((key, i) => /* @__PURE__ */ jsx16(
           motion3.div,
           {
             initial: { opacity: 0, y: 20 },
             animate: { opacity: 1, y: 0 },
             transition: { delay: 0.4 + i * 0.05 },
-            children: /* @__PURE__ */ jsx14(CardSkeleton, {})
+            children: /* @__PURE__ */ jsx16(CardSkeleton, {})
           },
           key
         )) }),
@@ -5271,7 +5316,7 @@ function GameSkeleton({
             animate: { opacity: 1 },
             transition: { delay: 0.8 },
             children: [
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx16(
                 Loader2,
                 {
                   size: 24,
@@ -5279,7 +5324,7 @@ function GameSkeleton({
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ jsx14("p", { className: "text-slate-600 text-sm sm:text-base font-medium", children: message })
+              /* @__PURE__ */ jsx16("p", { className: "text-slate-600 text-sm sm:text-base font-medium", children: message })
             ]
           }
         )
@@ -5293,13 +5338,13 @@ import { motion as motion4, AnimatePresence as AnimatePresence3 } from "framer-m
 import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from "lucide-react";
 
 // src/ui/internal/ui/alert.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Alert({
   className,
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "alert",
@@ -5317,7 +5362,7 @@ function AlertDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "alert-description",
@@ -5332,13 +5377,13 @@ import {
   createContext as createContext5,
   useContext as useContext5,
   useState as useState12,
-  useCallback as useCallback9
+  useCallback as useCallback11
 } from "react";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var ToastContext = createContext5(null);
 function ToastProvider({ children }) {
   const [toasts, setToasts] = useState12([]);
-  const show = useCallback9(
+  const show = useCallback11(
     (message, type = "info", duration = 3e3) => {
       const id = `toast-${Date.now()}-${Math.random()}`;
       const toast = { id, type, message, duration };
@@ -5356,22 +5401,22 @@ function ToastProvider({ children }) {
     },
     []
   );
-  const dismiss = useCallback9((id) => {
+  const dismiss = useCallback11((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const success = useCallback9(
+  const success = useCallback11(
     (message, duration) => show(message, "success", duration),
     [show]
   );
-  const error = useCallback9(
+  const error = useCallback11(
     (message, duration) => show(message, "error", duration),
     [show]
   );
-  const info = useCallback9(
+  const info = useCallback11(
     (message, duration) => show(message, "info", duration),
     [show]
   );
-  const warning = useCallback9(
+  const warning = useCallback11(
     (message, duration) => show(message, "warning", duration),
     [show]
   );
@@ -5381,7 +5426,7 @@ function ToastProvider({ children }) {
       value: { toasts, show, dismiss, success, error, info, warning },
       children: [
         children,
-        /* @__PURE__ */ jsx16(ToastContainer, { toasts, onDismiss: dismiss })
+        /* @__PURE__ */ jsx18(ToastContainer, { toasts, onDismiss: dismiss })
       ]
     }
   );
@@ -5394,7 +5439,7 @@ function useToast() {
   return context;
 }
 function ToastActions({ children }) {
-  return /* @__PURE__ */ jsx16(Fragment2, { children: children(useToast()) });
+  return /* @__PURE__ */ jsx18(Fragment2, { children: children(useToast()) });
 }
 var Toast = {
   Actions: ToastActions
@@ -5403,14 +5448,14 @@ function ToastContainer({
   toasts,
   onDismiss
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       className: "fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none",
       role: "region",
       "aria-live": "polite",
       "aria-label": "Notifications",
-      children: /* @__PURE__ */ jsx16(AnimatePresence3, { children: toasts.map((toast) => /* @__PURE__ */ jsx16(ToastItem, { toast, onDismiss }, toast.id)) })
+      children: /* @__PURE__ */ jsx18(AnimatePresence3, { children: toasts.map((toast) => /* @__PURE__ */ jsx18(ToastItem, { toast, onDismiss }, toast.id)) })
     }
   );
 }
@@ -5454,7 +5499,7 @@ function ToastItem({
   const Icon2 = TOAST_ICONS[toast.type];
   const intent = intentForVariant(theme, TOAST_VARIANT[toast.type]);
   const surfaceStyle2 = toastSurfaceStyle(theme, toast.type);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     motion4.div,
     {
       style: { pointerEvents: "auto" },
@@ -5468,7 +5513,7 @@ function ToastItem({
           variant: toast.type === "error" ? "destructive" : "default",
           style: surfaceStyle2,
           children: [
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx18(
               Icon2,
               {
                 size: 20,
@@ -5480,7 +5525,7 @@ function ToastItem({
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx18(
               AlertDescription,
               {
                 style: {
@@ -5493,7 +5538,7 @@ function ToastItem({
                 children: toast.message
               }
             ),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx18(
               ThemedButton,
               {
                 type: "button",
@@ -5508,7 +5553,7 @@ function ToastItem({
                   color: intent.onSoft
                 },
                 "aria-label": "Close notification",
-                children: /* @__PURE__ */ jsx16(X, { size: 16, "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx18(X, { size: 16, "aria-hidden": "true" })
               }
             )
           ]
@@ -5523,7 +5568,7 @@ import {
   Component
 } from "react";
 import { AlertTriangle as AlertTriangle2, RefreshCw } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -5544,7 +5589,7 @@ var ErrorBoundary = class extends Component {
       if (this.props.fallback) {
         return this.props.fallback(this.state.error, this.handleReset);
       }
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx19(
         DefaultErrorFallback,
         {
           error: this.state.error,
@@ -5698,7 +5743,7 @@ function DefaultErrorFallback({
       width: "100%"
     }
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       "data-dreamboard-error-fallback": "",
@@ -5706,7 +5751,7 @@ function DefaultErrorFallback({
       role: "alert",
       "aria-live": "assertive",
       children: /* @__PURE__ */ jsxs9("div", { style: styles.panel, children: [
-        /* @__PURE__ */ jsx17("div", { style: styles.iconWrap, children: /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx19("div", { style: styles.iconWrap, children: /* @__PURE__ */ jsx19(
           AlertTriangle2,
           {
             size: 28,
@@ -5715,11 +5760,11 @@ function DefaultErrorFallback({
             "aria-hidden": "true"
           }
         ) }),
-        /* @__PURE__ */ jsx17("p", { style: styles.eyebrow, children: "Runtime error" }),
-        /* @__PURE__ */ jsx17("h1", { style: styles.title, children: "Game failed to start" }),
-        /* @__PURE__ */ jsx17("p", { style: styles.body, children: "The game encountered an error and couldn't continue. You can try reloading to start fresh." }),
+        /* @__PURE__ */ jsx19("p", { style: styles.eyebrow, children: "Runtime error" }),
+        /* @__PURE__ */ jsx19("h1", { style: styles.title, children: "Game failed to start" }),
+        /* @__PURE__ */ jsx19("p", { style: styles.body, children: "The game encountered an error and couldn't continue. You can try reloading to start fresh." }),
         /* @__PURE__ */ jsxs9("details", { style: styles.details, children: [
-          /* @__PURE__ */ jsx17("summary", { style: styles.summary, children: "Technical details" }),
+          /* @__PURE__ */ jsx19("summary", { style: styles.summary, children: "Technical details" }),
           /* @__PURE__ */ jsxs9("pre", { style: styles.pre, children: [
             error.message,
             error.stack && /* @__PURE__ */ jsxs9(Fragment3, { children: [
@@ -5729,7 +5774,7 @@ function DefaultErrorFallback({
           ] })
         ] }),
         /* @__PURE__ */ jsxs9("button", { type: "button", onClick: onReset, style: styles.button, children: [
-          /* @__PURE__ */ jsx17(RefreshCw, { size: 18, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx19(RefreshCw, { size: 18, "aria-hidden": "true" }),
           "Try again"
         ] })
       ] })
@@ -5740,24 +5785,24 @@ function DefaultErrorFallback({
 // src/ui/internal/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function Dialog(props) {
-  return /* @__PURE__ */ jsx18(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx20(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger(props) {
-  return /* @__PURE__ */ jsx18(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx20(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal(props) {
-  return /* @__PURE__ */ jsx18(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx20(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose(props) {
-  return /* @__PURE__ */ jsx18(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ jsx20(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -5774,7 +5819,7 @@ function DialogContent({
   ...props
 }) {
   return /* @__PURE__ */ jsxs10(DialogPortal, { children: [
-    /* @__PURE__ */ jsx18(DialogOverlay, { className: overlayClassName }),
+    /* @__PURE__ */ jsx20(DialogOverlay, { className: overlayClassName }),
     /* @__PURE__ */ jsxs10(
       DialogPrimitive.Content,
       {
@@ -5792,8 +5837,8 @@ function DialogContent({
               "data-slot": "dialog-close",
               className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400",
               children: [
-                /* @__PURE__ */ jsx18(XIcon, { "aria-hidden": "true", className: "size-4" }),
-                /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx20(XIcon, { "aria-hidden": "true", className: "size-4" }),
+                /* @__PURE__ */ jsx20("span", { className: "sr-only", children: "Close" })
               ]
             }
           ) : null
@@ -5806,7 +5851,7 @@ function DialogHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       "data-slot": "dialog-header",
@@ -5819,7 +5864,7 @@ function DialogFooter({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -5835,7 +5880,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -5848,7 +5893,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -5859,13 +5904,13 @@ function DialogDescription({
 }
 
 // src/ui/internal/ui/input.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function Input({
   className,
   type,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "input",
     {
       type,
@@ -5882,12 +5927,12 @@ function Input({
 
 // src/ui/internal/ui/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function Label({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     LabelPrimitive.Root,
     {
       "data-slot": "label",
@@ -5903,9 +5948,9 @@ function Label({
 // src/ui/internal/ui/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 function Select(props) {
-  return /* @__PURE__ */ jsx21(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx23(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectTrigger({
   className,
@@ -5927,7 +5972,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx21(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx21(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ jsx23(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx23(ChevronDownIcon, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -5939,7 +5984,7 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs11(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
@@ -5951,9 +5996,9 @@ function SelectContent({
       align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx21(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx21(SelectPrimitive.Viewport, { className: "p-1", children }),
-        /* @__PURE__ */ jsx21(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx23(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx23(SelectPrimitive.Viewport, { className: "p-1", children }),
+        /* @__PURE__ */ jsx23(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -5973,8 +6018,8 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx21("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx21(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx21(CheckIcon, { className: "size-4" }) }) }),
-        /* @__PURE__ */ jsx21(SelectPrimitive.ItemText, { children })
+        /* @__PURE__ */ jsx23("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx23(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx23(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx23(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -5983,7 +6028,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -5992,7 +6037,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx21(ChevronUpIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx23(ChevronUpIcon, { className: "size-4" })
     }
   );
 }
@@ -6000,7 +6045,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -6009,7 +6054,7 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx21(ChevronDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx23(ChevronDownIcon, { className: "size-4" })
     }
   );
 }
@@ -6021,7 +6066,7 @@ import {
   useContext as useContext6,
   useMemo as useMemo10
 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ResourceCounterItemContext = createContext6(null);
 function useResourceCounterItemContext() {
   const value = useContext6(ResourceCounterItemContext);
@@ -6045,7 +6090,7 @@ function renderResourceIcon(icon, props = {}) {
     "aria-hidden": ariaHidden,
     ...spanProps
   } = props;
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     "span",
     {
       "aria-hidden": ariaHidden === void 0 ? true : ariaHidden !== "false",
@@ -6091,7 +6136,7 @@ function ResourceCounterRoot({
     "aria-label": ariaLabel ?? "Resource counts",
     "data-dreamboard-resource-counter": "",
     ...props,
-    children: items.map((resource) => /* @__PURE__ */ jsx22(ResourceCounterItemContext.Provider, { value: resource, children }, resource.type))
+    children: items.map((resource) => /* @__PURE__ */ jsx24(ResourceCounterItemContext.Provider, { value: resource, children }, resource.type))
   });
 }
 function ResourceCounterItem({
@@ -6174,12 +6219,12 @@ import { clsx as clsx12 } from "clsx";
 
 // src/ui/internal/ui/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -6189,17 +6234,17 @@ function TooltipProvider({
   );
 }
 function Tooltip(props) {
-  return /* @__PURE__ */ jsx23(TooltipProvider, { children: /* @__PURE__ */ jsx23(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ jsx25(TooltipProvider, { children: /* @__PURE__ */ jsx25(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
 }
 function TooltipTrigger(props) {
-  return /* @__PURE__ */ jsx23(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx25(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
   sideOffset = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx25(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -6214,7 +6259,7 @@ function TooltipContent({
 }
 
 // src/ui/components/CostDisplay.tsx
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 function CostDisplay({
   cost,
   currentResources,
@@ -6238,7 +6283,7 @@ function CostDisplay({
   if (costEntries.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: clsx12(
@@ -6250,14 +6295,14 @@ function CostDisplay({
       ),
       role: "list",
       "aria-label": `Cost: ${costEntries.map(([type, amount]) => `${amount} ${resourceMap[type]?.label || type}`).join(", ")}${currentResources ? canAffordAll ? " (affordable)" : " (cannot afford)" : ""}`,
-      children: /* @__PURE__ */ jsx24(TooltipProvider, { delayDuration: 200, children: costEntries.map(([type, amount]) => {
+      children: /* @__PURE__ */ jsx26(TooltipProvider, { delayDuration: 200, children: costEntries.map(([type, amount]) => {
         const def = resourceMap[type];
         const have = currentResources?.[type] ?? Infinity;
         const canAfford = have >= amount;
         const Icon2 = def?.icon;
         const label = def?.label || type;
         return /* @__PURE__ */ jsxs12(Tooltip, { children: [
-          /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(
+          /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(
             "div",
             {
               className: clsx12(
@@ -6271,9 +6316,9 @@ function CostDisplay({
               role: "listitem",
               tabIndex: 0,
               children: [
-                Icon2 && /* @__PURE__ */ jsx24(Icon2, { className: styles.icon, "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx24("span", { className: "font-semibold", children: amount }),
-                !Icon2 && /* @__PURE__ */ jsx24("span", { className: "text-[10px] opacity-70", children: def?.label?.slice(0, 3) || type.slice(0, 3) })
+                Icon2 && /* @__PURE__ */ jsx26(Icon2, { className: styles.icon, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx26("span", { className: "font-semibold", children: amount }),
+                !Icon2 && /* @__PURE__ */ jsx26("span", { className: "text-[10px] opacity-70", children: def?.label?.slice(0, 3) || type.slice(0, 3) })
               ]
             }
           ) }),
@@ -6284,8 +6329,8 @@ function CostDisplay({
               sideOffset: 6,
               className: "max-w-xs text-left",
               children: [
-                /* @__PURE__ */ jsx24("p", { className: "font-sans text-sm font-bold", children: label }),
-                /* @__PURE__ */ jsx24("p", { className: "font-sans mt-1 text-xs font-normal opacity-90", children: formatCostAvailability({
+                /* @__PURE__ */ jsx26("p", { className: "font-sans text-sm font-bold", children: label }),
+                /* @__PURE__ */ jsx26("p", { className: "font-sans mt-1 text-xs font-normal opacity-90", children: formatCostAvailability({
                   amount,
                   canAfford,
                   have
@@ -6311,7 +6356,7 @@ function formatCostAvailability({
 }
 
 // src/ui/components/ActionButton.tsx
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
 function ActionButton({
   label,
   description,
@@ -6361,11 +6406,11 @@ function ActionButton({
       onClick: handleClick,
       ...rest,
       children: [
-        Icon2 ? /* @__PURE__ */ jsx25(Icon2, { className: "h-4 w-4", "aria-hidden": "true" }) : null,
+        Icon2 ? /* @__PURE__ */ jsx27(Icon2, { className: "h-4 w-4", "aria-hidden": "true" }) : null,
         /* @__PURE__ */ jsxs13("span", { className: "inline-flex min-w-0 flex-col items-start gap-0.5", children: [
-          /* @__PURE__ */ jsx25("span", { children: children ?? label ?? "Action" }),
-          description ? /* @__PURE__ */ jsx25("span", { className: "text-xs font-normal opacity-75", children: description }) : null,
-          cost && resourceDefs ? /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27("span", { children: children ?? label ?? "Action" }),
+          description ? /* @__PURE__ */ jsx27("span", { className: "text-xs font-normal opacity-75", children: description }) : null,
+          cost && resourceDefs ? /* @__PURE__ */ jsx27(
             CostDisplay,
             {
               cost,
@@ -6374,14 +6419,14 @@ function ActionButton({
             }
           ) : null
         ] }),
-        loading ? /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", children: "..." }) : null
+        loading ? /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", children: "..." }) : null
       ]
     }
   );
 }
 
 // src/ui/components/PrimaryButton.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function PrimaryButton({
   children,
   disabled,
@@ -6390,7 +6435,7 @@ function PrimaryButton({
   size = "md",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28(
     ThemedButton,
     {
       type: "button",
@@ -6406,12 +6451,12 @@ function PrimaryButton({
 
 // src/ui/components/PrimaryActionButton.tsx
 import {
-  useEffect as useEffect10,
-  useRef as useRef6,
+  useEffect as useEffect11,
+  useRef as useRef8,
   useState as useState13
 } from "react";
 import { motion as motion5 } from "framer-motion";
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
 function PrimaryActionButton({
   variant = "primary",
   size = "lg",
@@ -6437,9 +6482,9 @@ function PrimaryActionButton({
   const resolvedVariant = submitted ? whenSubmitted?.variant ?? "submitted" : variant;
   const disabled = !available;
   const intent = intentForVariant(theme, resolvedVariant);
-  const previouslyAvailableRef = useRef6(available);
+  const previouslyAvailableRef = useRef8(available);
   const [pulseKey, setPulseKey] = useState13(0);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!previouslyAvailableRef.current && available) {
       setPulseKey((n) => n + 1);
     }
@@ -6448,7 +6493,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__ */ jsx27("span", { "aria-hidden": true, style: { fontSize: "1.15em" }, children: whenSubmitted.icon }) : icon ?? null;
+  const resolvedIcon = submitted && whenSubmitted?.icon ? /* @__PURE__ */ jsx29("span", { "aria-hidden": true, style: { fontSize: "1.15em" }, children: whenSubmitted.icon }) : icon ?? null;
   return /* @__PURE__ */ jsxs14(
     "span",
     {
@@ -6468,7 +6513,7 @@ function PrimaryActionButton({
       },
       children: [
         haloEnabled ? /* @__PURE__ */ jsxs14(Fragment4, { children: [
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx29(
             motion5.span,
             {
               "aria-hidden": true,
@@ -6491,7 +6536,7 @@ function PrimaryActionButton({
               }
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx29(
             motion5.span,
             {
               "aria-hidden": true,
@@ -6548,7 +6593,7 @@ function PrimaryActionButton({
             },
             children: [
               resolvedIcon,
-              /* @__PURE__ */ jsx27("span", { children: resolvedLabel })
+              /* @__PURE__ */ jsx29("span", { children: resolvedLabel })
             ]
           }
         )
@@ -6586,7 +6631,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 jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 function ActionPanel({
   title = "Actions",
   state,
@@ -6649,7 +6694,7 @@ function ActionPanel({
             },
             children: [
               /* @__PURE__ */ jsxs15("div", { children: [
-                /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsx30(
                   "h2",
                   {
                     style: {
@@ -6677,7 +6722,7 @@ function ActionPanel({
                       gap: theme.space[2]
                     },
                     children: [
-                      /* @__PURE__ */ jsx28(
+                      /* @__PURE__ */ jsx30(
                         "span",
                         {
                           style: {
@@ -6696,7 +6741,7 @@ function ActionPanel({
                   }
                 )
               ] }),
-              collapsible && /* @__PURE__ */ jsx28(
+              collapsible && /* @__PURE__ */ jsx30(
                 motion6.div,
                 {
                   animate: reducedMotion ? void 0 : { rotate: isExpanded ? 0 : 180 },
@@ -6709,7 +6754,7 @@ function ActionPanel({
                     color: theme.semantic.text.primary,
                     display: "inline-flex"
                   },
-                  children: /* @__PURE__ */ jsx28(
+                  children: /* @__PURE__ */ jsx30(
                     ChevronUp,
                     {
                       size: 20,
@@ -6723,7 +6768,7 @@ function ActionPanel({
             ]
           }
         ),
-        /* @__PURE__ */ jsx28(AnimatePresence4, { initial: false, children: isExpanded && /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx30(AnimatePresence4, { initial: false, children: isExpanded && /* @__PURE__ */ jsx30(
           motion6.div,
           {
             id: contentId,
@@ -6735,7 +6780,7 @@ function ActionPanel({
               overflow: "hidden",
               background: theme.semantic.surface.card
             },
-            children: /* @__PURE__ */ jsx28(
+            children: /* @__PURE__ */ jsx30(
               "div",
               {
                 style: {
@@ -6802,7 +6847,7 @@ function ActionGroup({
       role: "group",
       "aria-labelledby": `action-group-${title.toLowerCase().replace(/\s+/g, "-")}`,
       children: [
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx30(
           "span",
           {
             style: {
@@ -6815,7 +6860,7 @@ function ActionGroup({
             children: "Group"
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx30(
           "h3",
           {
             id: `action-group-${title.toLowerCase().replace(/\s+/g, "-")}`,
@@ -6830,7 +6875,7 @@ function ActionGroup({
             children: title
           }
         ),
-        description && /* @__PURE__ */ jsx28(
+        description && /* @__PURE__ */ jsx30(
           "p",
           {
             style: {
@@ -6844,7 +6889,7 @@ function ActionGroup({
             children: description
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx30(
           "div",
           {
             style: {
@@ -6863,7 +6908,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 jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 function MoreActions({
   children,
   label = "More",
@@ -6907,8 +6952,8 @@ function MoreActions({
               ...style
             },
             children: [
-              /* @__PURE__ */ jsx29(MoreHorizontal, { size: 16, "aria-hidden": true }),
-              /* @__PURE__ */ jsx29("span", { children: label }),
+              /* @__PURE__ */ jsx31(MoreHorizontal, { size: 16, "aria-hidden": true }),
+              /* @__PURE__ */ jsx31("span", { children: label }),
               showCount ? /* @__PURE__ */ jsxs16(
                 "span",
                 {
@@ -6924,7 +6969,7 @@ function MoreActions({
                   ]
                 }
               ) : null,
-              /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx31(
                 ChevronDown,
                 {
                   size: 14,
@@ -6938,7 +6983,7 @@ function MoreActions({
             ]
           }
         ),
-        open ? /* @__PURE__ */ jsx29(
+        open ? /* @__PURE__ */ jsx31(
           "div",
           {
             id: regionId,
@@ -6968,15 +7013,15 @@ function MoreActions({
 import { clsx as clsx13 } from "clsx";
 import { motion as motion7 } from "framer-motion";
 import {
-  useCallback as useCallback10,
-  useEffect as useEffect11,
-  useRef as useRef7,
+  useCallback as useCallback12,
+  useEffect as useEffect12,
+  useRef as useRef9,
   useState as useState16
 } from "react";
 
 // src/ui/primitives/dice.tsx
 import { createContext as createContext7, useContext as useContext7 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var DiceContext = createContext7(null);
 function normalizeDiceState({
   values,
@@ -6997,7 +7042,7 @@ function normalizeDiceState({
 }
 
 // src/ui/components/DiceRoller.tsx
-import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx33, 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];
@@ -7016,8 +7061,8 @@ function DiceRoller({
       role: "region",
       "aria-label": "Dice roller",
       children: [
-        render ? render(renderProps) : /* @__PURE__ */ jsx31(DefaultDiceReadout, { ...renderProps }),
-        rollAction ? /* @__PURE__ */ jsx31(
+        render ? render(renderProps) : /* @__PURE__ */ jsx33(DefaultDiceReadout, { ...renderProps }),
+        rollAction ? /* @__PURE__ */ jsx33(
           DiceRollDialog,
           {
             action: rollAction,
@@ -7025,7 +7070,7 @@ function DiceRoller({
             diceCount: renderProps.diceCount
           }
         ) : null,
-        /* @__PURE__ */ jsx31("div", { className: "sr-only", "aria-live": "polite", children: renderProps.allRolled && renderProps.values ? `Rolled ${renderProps.values.join(", ")}. Total: ${renderProps.sum}` : "Dice not rolled yet" })
+        /* @__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" })
       ]
     }
   );
@@ -7063,7 +7108,7 @@ function DefaultDiceReadout({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx31(DiceRow, { values: dice, size: 44, rolling: false })
+        /* @__PURE__ */ jsx33(DiceRow, { values: dice, size: 44, rolling: false })
       ]
     }
   );
@@ -7083,14 +7128,14 @@ function DiceRollDialog({
     () => nextAnimatedValues(diceCount)
   );
   const [revealedValues, setRevealedValues] = useState16(void 0);
-  const startedAtRef = useRef7(0);
-  const revealedRollKeyRef = useRef7(null);
+  const startedAtRef = useRef9(0);
+  const revealedRollKeyRef = useRef9(null);
   const shouldPresentDialog = Boolean(action.onRoll);
   const minSpinMs = reducedMotion ? 0 : action.minSpinMs ?? DEFAULT_MIN_SPIN_MS;
   const revealHoldMs = action.revealHoldMs ?? DEFAULT_REVEAL_HOLD_MS;
   const rolledValuesKey = values?.join(",") ?? "";
   const valuesAreReady = values !== void 0 && values.length > 0 && values.every((value) => typeof value === "number");
-  useEffect11(() => {
+  useEffect12(() => {
     if (!shouldPresentDialog) {
       setOpen(false);
       return;
@@ -7118,7 +7163,7 @@ function DiceRollDialog({
     shouldPresentDialog,
     valuesAreReady
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (phase !== "rolling") return;
     if (reducedMotion) return;
     const interval = setInterval(() => {
@@ -7126,7 +7171,7 @@ function DiceRollDialog({
     }, 120);
     return () => clearInterval(interval);
   }, [diceCount, phase, reducedMotion]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (phase !== "rolling" || !valuesAreReady || !values) return;
     const remaining = Math.max(
       0,
@@ -7139,7 +7184,7 @@ function DiceRollDialog({
     }, remaining);
     return () => clearTimeout(timeout);
   }, [minSpinMs, phase, rolledValuesKey, values, valuesAreReady]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (phase !== "revealed") return;
     const timeout = setTimeout(() => {
       setOpen(false);
@@ -7147,7 +7192,7 @@ function DiceRollDialog({
     }, revealHoldMs);
     return () => clearTimeout(timeout);
   }, [phase, revealHoldMs]);
-  const roll = useCallback10(async () => {
+  const roll = useCallback12(async () => {
     if (!action.onRoll || action.available === false || phase === "rolling") {
       return;
     }
@@ -7174,7 +7219,7 @@ function DiceRollDialog({
   const rollLabel = action.rollLabel ?? "Roll dice";
   const disabled = action.available === false || phase === "rolling";
   const canClose = true;
-  return /* @__PURE__ */ jsx31(Dialog, { open, onOpenChange: canClose ? setOpen : void 0, children: /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsx33(Dialog, { open, onOpenChange: canClose ? setOpen : void 0, children: /* @__PURE__ */ jsxs17(
     DialogContent,
     {
       "data-dismiss-behavior": "dismiss",
@@ -7190,7 +7235,7 @@ function DiceRollDialog({
       onInteractOutside: canClose ? void 0 : (event) => event.preventDefault(),
       children: [
         /* @__PURE__ */ jsxs17(DialogHeader, { className: "text-center sm:text-center", children: [
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx33(
             DialogTitle,
             {
               style: {
@@ -7200,7 +7245,7 @@ function DiceRollDialog({
               children: title
             }
           ),
-          /* @__PURE__ */ jsx31(DialogDescription, { children: description })
+          /* @__PURE__ */ jsx33(DialogDescription, { children: description })
         ] }),
         /* @__PURE__ */ jsxs17(
           "div",
@@ -7212,8 +7257,8 @@ function DiceRollDialog({
               gap: theme.space[4]
             },
             children: [
-              /* @__PURE__ */ jsx31(RollResult, { label: resultLabel, sum: displaySum, phase }),
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx33(RollResult, { label: resultLabel, sum: displaySum, phase }),
+              /* @__PURE__ */ jsx33(
                 DiceRow,
                 {
                   values: displayValues,
@@ -7221,7 +7266,7 @@ function DiceRollDialog({
                   rolling: phase === "rolling"
                 }
               ),
-              error ? /* @__PURE__ */ jsx31(
+              error ? /* @__PURE__ */ jsx33(
                 "span",
                 {
                   role: "alert",
@@ -7233,7 +7278,7 @@ function DiceRollDialog({
                   children: error
                 }
               ) : null,
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx33(
                 ThemedButton,
                 {
                   type: "button",
@@ -7273,7 +7318,7 @@ function RollResult({
         textAlign: "center"
       },
       children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx33(
           "div",
           {
             style: {
@@ -7286,7 +7331,7 @@ function RollResult({
             children: label
           }
         ),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx33(
           "div",
           {
             style: {
@@ -7310,7 +7355,7 @@ function DiceRow({
   rolling
 }) {
   const gap = Math.max(8, Math.round(size * 0.18));
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       role: "list",
@@ -7321,7 +7366,7 @@ function DiceRow({
         gap,
         flexWrap: "wrap"
       },
-      children: values.map((value, index) => /* @__PURE__ */ jsx31(
+      children: values.map((value, index) => /* @__PURE__ */ jsx33(
         DieFace,
         {
           value,
@@ -7357,7 +7402,7 @@ function DieFace({
     flex: "0 0 auto",
     overflow: "hidden"
   };
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     motion7.div,
     {
       role: "listitem",
@@ -7374,7 +7419,7 @@ function DieFace({
         delay: index * 0.06,
         ease: "easeInOut"
       } : { duration: 0.2 },
-      children: showPips ? /* @__PURE__ */ jsx31(PipFace, { value }) : /* @__PURE__ */ jsx31(
+      children: showPips ? /* @__PURE__ */ jsx33(PipFace, { value }) : /* @__PURE__ */ jsx33(
         "span",
         {
           style: {
@@ -7392,7 +7437,7 @@ function DieFace({
 function PipFace({ value }) {
   const theme = useTheme();
   const pips = pipPositions(value);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     "span",
     {
       "aria-hidden": true,
@@ -7400,7 +7445,7 @@ function PipFace({ value }) {
         position: "absolute",
         inset: "18%"
       },
-      children: pips.map(([left, top], index) => /* @__PURE__ */ jsx31(
+      children: pips.map(([left, top], index) => /* @__PURE__ */ jsx33(
         "span",
         {
           style: {
@@ -7477,7 +7522,7 @@ function sumValues(values) {
 // src/ui/components/PhaseIndicator.tsx
 import { motion as motion8 } from "framer-motion";
 import { clsx as clsx14 } from "clsx";
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 function PhaseIndicator({
   currentPhase,
   phaseLabels,
@@ -7490,7 +7535,7 @@ function PhaseIndicator({
   const reducedMotion = theme.motion.reducedMotion === "true";
   const label = phaseLabels?.[currentPhase] ?? formatPhase(currentPhase);
   if (variant === "minimal") {
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx34(
       "span",
       {
         className,
@@ -7525,7 +7570,7 @@ function PhaseIndicator({
     reducedMotion
   });
   const ariaLabel = state === "your-turn" ? `Your turn \u2014 ${label}` : state === "waiting" ? `Waiting for ${formatPlayerList(activePlayerNames ?? [])} \u2014 ${label}` : label;
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       className: clsx14("flex items-center gap-3 flex-wrap", className),
@@ -7556,7 +7601,7 @@ function renderHeadline({
   reducedMotion
 }) {
   if (state === "phase-only") {
-    return /* @__PURE__ */ jsx32("div", { style: textBlockStyle(theme), children: /* @__PURE__ */ jsx32("span", { style: titleTextStyle(theme), children: label }) });
+    return /* @__PURE__ */ jsx34("div", { style: textBlockStyle(theme), children: /* @__PURE__ */ jsx34("span", { style: titleTextStyle(theme), children: label }) });
   }
   const isYourTurn = state === "your-turn";
   const intent = isYourTurn ? theme.semantic.intent.success : theme.semantic.intent.info;
@@ -7572,7 +7617,7 @@ function renderHeadline({
         gap: theme.space[3]
       },
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           StatusIndicator,
           {
             intent,
@@ -7581,8 +7626,8 @@ function renderHeadline({
           }
         ),
         /* @__PURE__ */ jsxs18("div", { style: textBlockStyle(theme), children: [
-          /* @__PURE__ */ jsx32("span", { style: titleTextStyle(theme), children: titleText }),
-          /* @__PURE__ */ jsx32("span", { style: subtitleTextStyle(theme), children: label })
+          /* @__PURE__ */ jsx34("span", { style: titleTextStyle(theme), children: titleText }),
+          /* @__PURE__ */ jsx34("span", { style: subtitleTextStyle(theme), children: label })
         ] })
       ]
     }
@@ -7638,7 +7683,7 @@ function StatusIndicator({
           flexShrink: 0
         },
         children: [
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx34(
             motion8.span,
             {
               style: {
@@ -7655,7 +7700,7 @@ function StatusIndicator({
               }
             }
           ),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx34(
             "span",
             {
               style: {
@@ -7686,7 +7731,7 @@ function StatusIndicator({
         flexShrink: 0
       },
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           "span",
           {
             style: {
@@ -7697,7 +7742,7 @@ function StatusIndicator({
             }
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           motion8.span,
           {
             style: {
@@ -7724,8 +7769,8 @@ function StatusIndicator({
 // src/ui/components/GameEndDisplay.tsx
 import { motion as motion9 } from "framer-motion";
 import { Trophy, Home, Crown, Medal } from "lucide-react";
-import { useEffect as useEffect12, useState as useState17 } from "react";
-import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useState as useState17 } from "react";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 function rankIntent(rank) {
   if (rank === 1) return "warning";
   if (rank === 2) return "secondary";
@@ -7735,7 +7780,7 @@ function rankIntent(rank) {
 function RankIcon({ rank, theme }) {
   const intent = intentForVariant(theme, rankIntent(rank));
   if (rank === 1) {
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx35(
       Trophy,
       {
         width: 20,
@@ -7747,7 +7792,7 @@ function RankIcon({ rank, theme }) {
     );
   }
   if (rank === 2 || rank === 3) {
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx35(
       Medal,
       {
         width: 20,
@@ -7786,7 +7831,7 @@ function GameEndDisplay({
   const theme = useTheme();
   const reducedMotion = theme.motion.reducedMotion === "true";
   const [isOpen, setIsOpen] = useState17(isGameOver);
-  useEffect12(() => {
+  useEffect13(() => {
     setIsOpen(isGameOver);
   }, [isGameOver]);
   if (!isGameOver) return null;
@@ -7794,7 +7839,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__ */ jsx33(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx35(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs19(
     DialogContent,
     {
       className: `border-0 p-6 text-center shadow-none sm:max-w-lg ${className ?? ""}`,
@@ -7812,8 +7857,8 @@ function GameEndDisplay({
         fontFamily: theme.typography.fontFamily.body
       },
       children: [
-        /* @__PURE__ */ jsx33(DialogTitle, { className: "sr-only", children: title }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx35(DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsx35(
           motion9.div,
           {
             initial: reducedMotion ? { scale: 1 } : { scale: 0.95, rotate: -180, opacity: 0 },
@@ -7836,7 +7881,7 @@ function GameEndDisplay({
               border: `3px solid ${winningIntent.border}`,
               boxShadow: theme.elevation.lifted
             },
-            children: /* @__PURE__ */ jsx33(
+            children: /* @__PURE__ */ jsx35(
               Trophy,
               {
                 width: 48,
@@ -7855,7 +7900,7 @@ function GameEndDisplay({
             animate: reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 },
             transition: { delay: reducedMotion ? 0 : 0.4 },
             children: [
-              /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx35(
                 "h2",
                 {
                   "aria-hidden": "true",
@@ -7871,7 +7916,7 @@ function GameEndDisplay({
                   children: title
                 }
               ),
-              winnerMessage && /* @__PURE__ */ jsx33(
+              winnerMessage && /* @__PURE__ */ jsx35(
                 "p",
                 {
                   style: {
@@ -7887,7 +7932,7 @@ function GameEndDisplay({
             ]
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx35(
           motion9.div,
           {
             initial: { opacity: 0 },
@@ -7935,8 +7980,8 @@ function GameEndDisplay({
                           gap: theme.space[3]
                         },
                         children: [
-                          /* @__PURE__ */ jsx33(RankIcon, { rank, theme }),
-                          /* @__PURE__ */ jsx33(
+                          /* @__PURE__ */ jsx35(RankIcon, { rank, theme }),
+                          /* @__PURE__ */ jsx35(
                             "span",
                             {
                               style: {
@@ -7948,7 +7993,7 @@ function GameEndDisplay({
                               children: player.name
                             }
                           ),
-                          isWinner && /* @__PURE__ */ jsx33(
+                          isWinner && /* @__PURE__ */ jsx35(
                             Crown,
                             {
                               width: 20,
@@ -7961,7 +8006,7 @@ function GameEndDisplay({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx33(
+                    /* @__PURE__ */ jsx35(
                       "span",
                       {
                         style: {
@@ -8015,7 +8060,7 @@ function GameEndDisplay({
                     gap: theme.space[2]
                   },
                   children: [
-                    /* @__PURE__ */ jsx33(
+                    /* @__PURE__ */ jsx35(
                       "span",
                       {
                         style: {
@@ -8031,7 +8076,7 @@ function GameEndDisplay({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx35(
                 "div",
                 {
                   style: {
@@ -8049,8 +8094,8 @@ function GameEndDisplay({
                         color: theme.semantic.text.primary
                       },
                       children: [
-                        /* @__PURE__ */ jsx33("span", { style: { textTransform: "capitalize" }, children: key.replace(/([A-Z])/g, " $1") }),
-                        /* @__PURE__ */ jsx33(
+                        /* @__PURE__ */ jsx35("span", { style: { textTransform: "capitalize" }, children: key.replace(/([A-Z])/g, " $1") }),
+                        /* @__PURE__ */ jsx35(
                           "span",
                           {
                             style: {
@@ -8069,7 +8114,7 @@ function GameEndDisplay({
             ]
           }
         ),
-        onReturnToLobby && /* @__PURE__ */ jsx33(
+        onReturnToLobby && /* @__PURE__ */ jsx35(
           motion9.div,
           {
             initial: reducedMotion ? { opacity: 0 } : { opacity: 0, y: 10 },
@@ -8087,7 +8132,7 @@ function GameEndDisplay({
                   gap: theme.space[2]
                 },
                 children: [
-                  /* @__PURE__ */ jsx33(Home, { size: 20, strokeWidth: 3, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx35(Home, { size: 20, strokeWidth: 3, "aria-hidden": "true" }),
                   "Return to Lobby"
                 ]
               }
@@ -8119,7 +8164,7 @@ function handleKeyboardActivation(event, onActivate, options) {
 }
 
 // src/ui/components/board/NetworkGraph.tsx
-import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var EMPTY_NETWORK_EDGES = [];
 var EMPTY_NETWORK_PIECES = [];
 function DefaultNetworkNode({
@@ -8156,7 +8201,7 @@ function DefaultNetworkNode({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Network node" : void 0,
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           "circle",
           {
             r: radius,
@@ -8165,7 +8210,7 @@ function DefaultNetworkNode({
             strokeWidth: effectiveStrokeWidth
           }
         ),
-        displayLabel && /* @__PURE__ */ jsx34(
+        displayLabel && /* @__PURE__ */ jsx36(
           "text",
           {
             textAnchor: "middle",
@@ -8213,7 +8258,7 @@ function DefaultNetworkEdge({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label !== void 0 ? `Network edge ${label}` : "Network edge" : void 0,
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           "line",
           {
             x1: from.x,
@@ -8226,7 +8271,7 @@ function DefaultNetworkEdge({
           }
         ),
         label !== void 0 && /* @__PURE__ */ jsxs20(Fragment5, { children: [
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx36(
             "circle",
             {
               cx: midX,
@@ -8237,7 +8282,7 @@ function DefaultNetworkEdge({
               strokeWidth: 1
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx36(
             "text",
             {
               x: midX,
@@ -8262,7 +8307,7 @@ function DefaultNetworkPiece({
   onClick,
   className
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     "g",
     {
       onClick,
@@ -8271,7 +8316,7 @@ function DefaultNetworkPiece({
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Network piece" : void 0,
-      children: shape === "square" ? /* @__PURE__ */ jsx34(
+      children: shape === "square" ? /* @__PURE__ */ jsx36(
         "rect",
         {
           x: -radius,
@@ -8282,7 +8327,7 @@ function DefaultNetworkPiece({
           stroke: "white",
           strokeWidth: 1.5
         }
-      ) : /* @__PURE__ */ jsx34("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 1.5 })
+      ) : /* @__PURE__ */ jsx36("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 1.5 })
     }
   );
 }
@@ -8366,11 +8411,11 @@ function NetworkGraph({
       role: "img",
       "aria-label": "Network graph",
       children: [
-        /* @__PURE__ */ jsx34("g", { className: "network-edges", role: "list", "aria-label": "Network connections", children: edges.map((edge) => {
+        /* @__PURE__ */ jsx36("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__ */ jsx34(
+          return /* @__PURE__ */ jsx36(
             "g",
             {
               role: "listitem",
@@ -8380,7 +8425,7 @@ function NetworkGraph({
             edge.id
           );
         }) }),
-        /* @__PURE__ */ jsx34("g", { className: "network-nodes", role: "list", "aria-label": "Network nodes", children: nodes.map((node) => {
+        /* @__PURE__ */ jsx36("g", { className: "network-nodes", role: "list", "aria-label": "Network nodes", children: nodes.map((node) => {
           const nodePieces = piecesByNode[node.id] ?? [];
           return /* @__PURE__ */ jsxs20(
             "g",
@@ -8390,11 +8435,11 @@ function NetworkGraph({
               "aria-label": node.label ?? node.id,
               children: [
                 renderNode(node, nodePieces),
-                nodePieces.length > 0 && /* @__PURE__ */ jsx34("g", { className: "node-pieces", children: nodePieces.map((piece, i) => {
+                nodePieces.length > 0 && /* @__PURE__ */ jsx36("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__ */ jsx34(
+                  return /* @__PURE__ */ jsx36(
                     "g",
                     {
                       transform: `translate(${pieceX}, ${pieceY})`,
@@ -8413,7 +8458,7 @@ function NetworkGraph({
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx36(
                 "rect",
                 {
                   x: 0,
@@ -8439,7 +8484,7 @@ function NetworkGraph({
 // src/ui/components/board/ZoneMap.tsx
 import { useMemo as useMemo12 } from "react";
 import { clsx as clsx16 } from "clsx";
-import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 var HIGHLIGHT_COLORS = {
   valid: "rgba(34, 197, 94, 0.4)",
   // Green
@@ -8492,7 +8537,7 @@ function DefaultZone({
     switch (zone.shape.type) {
       case "polygon":
         if (!zone.shape.points) return null;
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx37(
           "polygon",
           {
             points: zone.shape.points.map((p) => `${p.x},${p.y}`).join(" "),
@@ -8503,7 +8548,7 @@ function DefaultZone({
         );
       case "path":
         if (!zone.shape.path) return null;
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx37(
           "path",
           {
             d: zone.shape.path,
@@ -8514,7 +8559,7 @@ function DefaultZone({
         );
       case "circle":
         if (!zone.shape.center) return null;
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx37(
           "circle",
           {
             cx: zone.shape.center.x,
@@ -8542,7 +8587,7 @@ function DefaultZone({
       tabIndex: onClick ? 0 : void 0,
       children: [
         renderShape(),
-        showLabel && zone.shape?.center && /* @__PURE__ */ jsx35(
+        showLabel && zone.shape?.center && /* @__PURE__ */ jsx37(
           "text",
           {
             x: zone.shape.center.x,
@@ -8602,7 +8647,7 @@ function DefaultZonePieces({
   });
   const owners = Object.keys(piecesByOwner);
   const startOffset = -((owners.length - 1) * spacing) / 2;
-  return /* @__PURE__ */ jsx35("g", { className: clsx16("zone-pieces", className), children: owners.map((owner, i) => {
+  return /* @__PURE__ */ jsx37("g", { className: clsx16("zone-pieces", className), children: owners.map((owner, i) => {
     const ownerPieces = piecesByOwner[owner] || [];
     const totalCount = ownerPieces.reduce(
       (sum, p) => sum + (p.count || 1),
@@ -8614,7 +8659,7 @@ function DefaultZonePieces({
       {
         transform: `translate(${centerX + offsetX}, ${centerY + yOffset})`,
         children: [
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx37(
             "circle",
             {
               r: radius,
@@ -8623,7 +8668,7 @@ function DefaultZonePieces({
               strokeWidth: 2
             }
           ),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx37(
             "text",
             {
               textAnchor: "middle",
@@ -8664,8 +8709,8 @@ function DefaultZonePiece({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": `Piece ${piece.id}`,
       children: [
-        /* @__PURE__ */ jsx35("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 2 }),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx37("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 2 }),
+        /* @__PURE__ */ jsx37(
           "text",
           {
             textAnchor: "middle",
@@ -8735,17 +8780,17 @@ function ZoneMap({
       role: "img",
       "aria-label": "Zone map",
       children: [
-        backgroundImage && /* @__PURE__ */ jsx35("image", { href: backgroundImage, width, height }),
-        /* @__PURE__ */ jsx35("g", { className: "zones", role: "list", "aria-label": "Map zones", children: zones.map((zone) => {
+        backgroundImage && /* @__PURE__ */ jsx37("image", { href: backgroundImage, width, height }),
+        /* @__PURE__ */ jsx37("g", { className: "zones", role: "list", "aria-label": "Map zones", children: zones.map((zone) => {
           const zonePieces = piecesByZone[zone.id] || [];
-          return /* @__PURE__ */ jsx35("g", { children: renderZone(zone, zonePieces) }, zone.id);
+          return /* @__PURE__ */ jsx37("g", { children: renderZone(zone, zonePieces) }, zone.id);
         }) }),
         enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs21(
           "g",
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx37(
                 "rect",
                 {
                   x: 0,
@@ -8771,7 +8816,7 @@ function ZoneMap({
 // src/ui/components/board/TrackBoard.tsx
 import { useMemo as useMemo13 } from "react";
 import { clsx as clsx17 } from "clsx";
-import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 function DefaultTrackSpace({
   space,
   size = 50,
@@ -8802,7 +8847,7 @@ function DefaultTrackSpace({
       "aria-label": space.name || `Space ${space.index}`,
       tabIndex: onClick ? 0 : void 0,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx38(
           "rect",
           {
             x: -halfSize,
@@ -8815,7 +8860,7 @@ function DefaultTrackSpace({
             strokeWidth: computedStrokeWidth
           }
         ),
-        space.name ? /* @__PURE__ */ jsx36(
+        space.name ? /* @__PURE__ */ jsx38(
           "text",
           {
             textAnchor: "middle",
@@ -8825,7 +8870,7 @@ function DefaultTrackSpace({
             fontWeight: "bold",
             children: space.name.length > 8 ? space.name.slice(0, 7) + "\u2026" : space.name
           }
-        ) : /* @__PURE__ */ jsx36(
+        ) : /* @__PURE__ */ jsx38(
           "text",
           {
             textAnchor: "middle",
@@ -8837,8 +8882,8 @@ function DefaultTrackSpace({
           }
         ),
         showJumpIndicator && space.jumpTo && /* @__PURE__ */ jsxs22("g", { transform: `translate(${halfSize - 6}, ${-halfSize + 6})`, children: [
-          /* @__PURE__ */ jsx36("circle", { r: 6, fill: "#fbbf24" }),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx38("circle", { r: 6, fill: "#fbbf24" }),
+          /* @__PURE__ */ jsx38(
             "text",
             {
               textAnchor: "middle",
@@ -8869,7 +8914,7 @@ function DefaultTrackPiece({
   const offset = total > 1 ? spacing : 0;
   const px = Math.cos(angle) * offset;
   const py = Math.sin(angle) * offset;
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx38(
     "circle",
     {
       cx: px,
@@ -8897,7 +8942,7 @@ function DefaultTrackConnection({
   strokeWidth = 2,
   className
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx38(
     "line",
     {
       x1: from.x,
@@ -8933,7 +8978,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__ */ jsx36("defs", { children: /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx38("defs", { children: /* @__PURE__ */ jsx38(
       "marker",
       {
         id: markerId,
@@ -8942,10 +8987,10 @@ function DefaultTrackJump({
         refX: "9",
         refY: "3.5",
         orient: "auto",
-        children: /* @__PURE__ */ jsx36("polygon", { points: "0 0, 10 3.5, 0 7", fill: color })
+        children: /* @__PURE__ */ jsx38("polygon", { points: "0 0, 10 3.5, 0 7", fill: color })
       }
     ) }),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx38(
       "line",
       {
         x1: startX,
@@ -9009,7 +9054,7 @@ function TrackBoard({
       return nextSpaceIds.map((nextId) => {
         const targetSpace = spaceMap.get(nextId);
         if (!targetSpace) return null;
-        return /* @__PURE__ */ jsx36("g", { children: renderConnection(
+        return /* @__PURE__ */ jsx38("g", { children: renderConnection(
           space.position,
           targetSpace.position,
           space,
@@ -9026,7 +9071,7 @@ function TrackBoard({
       if (!targetSpace) return [];
       const isUp = targetSpace.index > space.index;
       return [
-        /* @__PURE__ */ jsx36("g", { children: renderJump(
+        /* @__PURE__ */ jsx38("g", { children: renderJump(
           space.position,
           targetSpace.position,
           space,
@@ -9059,11 +9104,11 @@ function TrackBoard({
       role: "img",
       "aria-label": "Track board",
       children: [
-        /* @__PURE__ */ jsx36("g", { className: "track-connections", children: renderConnections() }),
-        /* @__PURE__ */ jsx36("g", { className: "track-jumps", children: renderJumps() }),
-        /* @__PURE__ */ jsx36("g", { className: "track-spaces", role: "list", "aria-label": "Track spaces", children: spaces.map((space) => {
+        /* @__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) => {
           const spacePieces = piecesBySpace[space.id] || [];
-          return /* @__PURE__ */ jsx36(
+          return /* @__PURE__ */ jsx38(
             "g",
             {
               transform: `translate(${space.position.x}, ${space.position.y})`,
@@ -9077,7 +9122,7 @@ function TrackBoard({
           {
             transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
             children: [
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx38(
                 "rect",
                 {
                   x: 0,
@@ -9104,7 +9149,7 @@ function TrackBoard({
 import { useMemo as useMemo14 } from "react";
 import { clsx as clsx18 } from "clsx";
 import { Users, Lock, Gift, Coins } from "lucide-react";
-import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var EMPTY_SLOT_OCCUPANTS = [];
 function DefaultSlotItem({
   name,
@@ -9152,7 +9197,7 @@ function DefaultSlotItem({
       children: [
         /* @__PURE__ */ jsxs23("div", { className: "flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ jsxs23("div", { children: [
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx39(
               "h3",
               {
                 className: "font-bold",
@@ -9160,7 +9205,7 @@ function DefaultSlotItem({
                 children: name
               }
             ),
-            description && /* @__PURE__ */ jsx37(
+            description && /* @__PURE__ */ jsx39(
               "p",
               {
                 className: "text-xs mt-0.5",
@@ -9170,7 +9215,7 @@ function DefaultSlotItem({
             )
           ] }),
           /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1", children: [
-            isExclusive && /* @__PURE__ */ jsx37(
+            isExclusive && /* @__PURE__ */ jsx39(
               Lock,
               {
                 className: "w-4 h-4",
@@ -9185,8 +9230,8 @@ function DefaultSlotItem({
                 style: { color: theme.semantic.text.muted },
                 title: `Capacity: ${capacity}`,
                 children: [
-                  /* @__PURE__ */ jsx37(Users, { className: "w-3 h-3" }),
-                  /* @__PURE__ */ jsx37("span", { children: capacity })
+                  /* @__PURE__ */ jsx39(Users, { className: "w-3 h-3" }),
+                  /* @__PURE__ */ jsx39("span", { children: capacity })
                 ]
               }
             )
@@ -9199,8 +9244,8 @@ function DefaultSlotItem({
               className: "flex items-center gap-1",
               style: { color: theme.semantic.intent.danger.solid },
               children: [
-                /* @__PURE__ */ jsx37(Coins, { className: "w-3 h-3", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx37("span", { children: costLabel })
+                /* @__PURE__ */ jsx39(Coins, { className: "w-3 h-3", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx39("span", { children: costLabel })
               ]
             }
           ),
@@ -9210,14 +9255,14 @@ function DefaultSlotItem({
               className: "flex items-center gap-1",
               style: { color: theme.semantic.intent.success.solid },
               children: [
-                /* @__PURE__ */ jsx37(Gift, { className: "w-3 h-3", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx37("span", { children: rewardLabel })
+                /* @__PURE__ */ jsx39(Gift, { className: "w-3 h-3", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx39("span", { children: rewardLabel })
               ]
             }
           )
         ] }),
-        renderOccupants && /* @__PURE__ */ jsx37("div", { className: "mt-2", children: renderOccupants() }),
-        !isAvailable && !isFull && /* @__PURE__ */ jsx37(
+        renderOccupants && /* @__PURE__ */ jsx39("div", { className: "mt-2", children: renderOccupants() }),
+        !isAvailable && !isFull && /* @__PURE__ */ jsx39(
           "div",
           {
             className: "mt-2 text-xs",
@@ -9237,7 +9282,7 @@ function DefaultSlotOccupant({
   onClick,
   className
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       onClick,
@@ -9265,7 +9310,7 @@ function DefaultEmptySlot({
   className
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       className: clsx18("rounded-full border-2 border-dashed", className),
@@ -9320,18 +9365,18 @@ function SlotSystem({
   }, [slots, layout]);
   const renderSlotItem = (slot) => {
     const slotOccupants = occupantsBySlot[slot.id] ?? [];
-    return /* @__PURE__ */ jsx37("div", { role: "listitem", "aria-label": slot.name, children: renderSlot(slot, slotOccupants) }, slot.id);
+    return /* @__PURE__ */ jsx39("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__ */ jsx37("div", { style: { width, height }, className: clsx18("slot-system", className), children: content });
+  const wrapContent = (content) => /* @__PURE__ */ jsx39("div", { style: { width, height }, className: clsx18("slot-system", className), children: content });
   if (layout === "grouped" && slotGroups) {
     return wrapContent(
-      /* @__PURE__ */ jsx37("div", { className: "space-y-6", role: "list", children: Object.entries(slotGroups).map(([groupName, groupSlots]) => /* @__PURE__ */ jsxs23("div", { children: [
-        /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx39("div", { className: "space-y-6", role: "list", children: Object.entries(slotGroups).map(([groupName, groupSlots]) => /* @__PURE__ */ jsxs23("div", { children: [
+        /* @__PURE__ */ jsx39(
           "h3",
           {
             className: "text-lg font-semibold mb-3",
@@ -9339,22 +9384,111 @@ function SlotSystem({
             children: groupName
           }
         ),
-        /* @__PURE__ */ jsx37("div", { style: responsiveGridStyle, children: groupSlots.map(renderSlotItem) })
+        /* @__PURE__ */ jsx39("div", { style: responsiveGridStyle, children: groupSlots.map(renderSlotItem) })
       ] }, groupName)) })
     );
   }
   if (layout === "list") {
     return wrapContent(
-      /* @__PURE__ */ jsx37("div", { className: "flex flex-col gap-2", role: "list", children: slots.map(renderSlotItem) })
+      /* @__PURE__ */ jsx39("div", { className: "flex flex-col gap-2", role: "list", children: slots.map(renderSlotItem) })
     );
   }
   return wrapContent(
-    /* @__PURE__ */ jsx37("div", { style: responsiveGridStyle, role: "list", children: slots.map(renderSlotItem) })
+    /* @__PURE__ */ jsx39("div", { style: responsiveGridStyle, role: "list", children: slots.map(renderSlotItem) })
   );
 }
 
 // src/ui/components/board/SquareGrid.tsx
-import { useMemo as useMemo15, useState as useState18 } from "react";
+import { useMemo as useMemo15 } from "react";
+import { clsx as clsx20 } from "clsx";
+
+// src/ui/components/board/tiled-grid/use-grid-svg-frame.ts
+import {
+  createElement as createElement2,
+  useState as useState18
+} from "react";
+function useGridSvgFrame(options) {
+  const { panZoomEnabled, initialZoom, minZoom, maxZoom, bounds, viewBoxMode } = options;
+  const [hoveredSpaceId, setHoveredSpaceId] = useState18(null);
+  const [hoveredEdgeId, setHoveredEdgeId] = useState18(null);
+  const [hoveredVertexId, setHoveredVertexId] = useState18(null);
+  const { transform, bind, isDragging } = usePanZoom({
+    enabled: panZoomEnabled,
+    initialZoom,
+    minZoom,
+    maxZoom,
+    mode: "viewbox"
+  });
+  let viewBox;
+  let viewBoxX;
+  let viewBoxY;
+  let viewBoxHeight;
+  if (viewBoxMode === "transformed") {
+    viewBox = calculateViewBox(bounds, transform);
+    const viewBoxParts = viewBox.split(" ").map(Number);
+    viewBoxX = viewBoxParts[0] ?? 0;
+    viewBoxY = viewBoxParts[1] ?? 0;
+    viewBoxHeight = viewBoxParts[3] ?? 0;
+  } else {
+    const totalWidth = bounds.width;
+    const totalHeight = bounds.height;
+    const viewBoxWidth = totalWidth / transform.zoom;
+    viewBoxHeight = totalHeight / transform.zoom;
+    viewBoxX = (totalWidth - viewBoxWidth) / 2 - transform.pan.x;
+    viewBoxY = (totalHeight - viewBoxHeight) / 2 - transform.pan.y;
+    viewBox = panZoomEnabled ? `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}` : `0 0 ${totalWidth} ${totalHeight}`;
+  }
+  return {
+    transform,
+    bind,
+    isDragging,
+    viewBox,
+    viewBoxX,
+    viewBoxY,
+    viewBoxHeight,
+    spaceHover: {
+      hoveredTargetId: hoveredSpaceId,
+      setHoveredTargetId: setHoveredSpaceId
+    },
+    edgeHover: {
+      hoveredTargetId: hoveredEdgeId,
+      setHoveredTargetId: setHoveredEdgeId
+    },
+    vertexHover: {
+      hoveredTargetId: hoveredVertexId,
+      setHoveredTargetId: setHoveredVertexId
+    }
+  };
+}
+function GridZoomIndicator({
+  viewBoxX,
+  viewBoxY,
+  viewBoxHeight,
+  zoom
+}) {
+  return createElement2(
+    "g",
+    {
+      transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`
+    },
+    createElement2("rect", {
+      x: 0,
+      y: 0,
+      width: 60,
+      height: 20,
+      rx: 4,
+      fill: "rgba(0,0,0,0.6)"
+    }),
+    createElement2(
+      "text",
+      { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12 },
+      Math.round(zoom * 100),
+      "%"
+    )
+  );
+}
+
+// src/ui/components/board/tiled-grid/interactive-layer.tsx
 import { clsx as clsx19 } from "clsx";
 
 // src/ui/components/board/target-layer.ts
@@ -9377,12 +9511,102 @@ function interactiveTargetRenderState(layer, targetId, isHovered) {
     isHovered
   };
 }
-function isInteractiveTargetSelectable(layer, state) {
-  return state.isEnabled && state.selectable && !!(state.select ?? layer.selectTargetId);
+function isInteractiveTargetSelectable(layer, state) {
+  return state.isEnabled && state.selectable && !!(state.select ?? layer.selectTargetId);
+}
+
+// src/ui/components/board/tiled-grid/interactive-layer.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+function InteractiveTargetLayerGroup({
+  layer,
+  targets,
+  getTargetId,
+  targetKind,
+  groupClassName,
+  groupAriaLabel,
+  groupRole,
+  spreadBrowserAttributes,
+  selectMode,
+  hover,
+  getTargetTransform,
+  renderTargetContent
+}) {
+  const { hoveredTargetId, setHoveredTargetId } = hover;
+  return /* @__PURE__ */ jsx40("g", { className: groupClassName, role: groupRole, "aria-label": groupAriaLabel, children: targets.map((target) => {
+    const targetId = getTargetId(target);
+    const state = interactiveTargetRenderState(
+      layer,
+      targetId,
+      hoveredTargetId === targetId
+    );
+    const isSelectable = isInteractiveTargetSelectable(layer, state);
+    const activate = selectMode === "render-state" ? () => {
+      void state.select?.();
+    } : () => {
+      void layer.selectTargetId?.(targetId);
+    };
+    return spreadBrowserAttributes ? (
+      // HexGrid markup variant: browserAttributes spread first, then
+      // transform, role, className (preserves HexGrid's rendered
+      // attribute order).
+      /* @__PURE__ */ jsx40(
+        "g",
+        {
+          ...state.browserAttributes,
+          ...getTargetTransform ? { transform: getTargetTransform(target) } : {},
+          role: isSelectable ? "button" : void 0,
+          className: clsx19(isSelectable && "cursor-pointer"),
+          onPointerEnter: () => setHoveredTargetId(targetId),
+          onPointerLeave: () => setHoveredTargetId(
+            (currentId) => currentId === targetId ? null : currentId
+          ),
+          onClick: isSelectable ? activate : void 0,
+          onKeyDown: (event) => handleKeyboardActivation(
+            event,
+            isSelectable ? activate : void 0
+          ),
+          tabIndex: isSelectable ? 0 : void 0,
+          "aria-label": isSelectable ? `Select ${targetKind} ${targetId}` : void 0,
+          children: renderTargetContent(target, state, isSelectable)
+        },
+        targetId
+      )
+    ) : (
+      // SquareGrid markup variant: no browserAttributes spread;
+      // transform, className, role (preserves SquareGrid's rendered
+      // attribute order).
+      /* @__PURE__ */ jsx40(
+        "g",
+        {
+          ...getTargetTransform ? { transform: getTargetTransform(target) } : {},
+          onClick: isSelectable ? activate : void 0,
+          onKeyDown: (event) => handleKeyboardActivation(
+            event,
+            isSelectable ? activate : void 0
+          ),
+          onPointerEnter: () => setHoveredTargetId(targetId),
+          onPointerLeave: () => setHoveredTargetId(
+            (currentId) => currentId === targetId ? null : currentId
+          ),
+          className: clsx19(isSelectable && "cursor-pointer"),
+          role: isSelectable ? "button" : void 0,
+          tabIndex: isSelectable ? 0 : void 0,
+          "aria-label": isSelectable ? `Select ${targetKind} ${targetId}` : void 0,
+          children: renderTargetContent(target, state, isSelectable)
+        },
+        targetId
+      )
+    );
+  }) });
+}
+
+// src/ui/components/board/tiled-grid/resolve-board-prop.ts
+function resolveBoardProp(props, buildInlineBoard) {
+  return "board" in props ? props.board : buildInlineBoard(props);
 }
 
 // src/ui/components/board/SquareGrid.tsx
-import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 function DefaultGridCell({
   size,
   isLight = true,
@@ -9407,7 +9631,7 @@ function DefaultGridCell({
       onPointerEnter,
       onPointerLeave,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx19(
+      className: clsx20(
         "transition-colors duration-100",
         onClick && "cursor-pointer",
         className
@@ -9416,8 +9640,8 @@ function DefaultGridCell({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Grid cell" : void 0,
       children: [
-        /* @__PURE__ */ jsx38("rect", { width: size, height: size, fill: baseColor }),
-        isSelected && /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx41("rect", { width: size, height: size, fill: baseColor }),
+        isSelected && /* @__PURE__ */ jsx41(
           "rect",
           {
             width: size,
@@ -9426,7 +9650,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isHighlighted && !isSelected && /* @__PURE__ */ jsx38(
+        isHighlighted && !isSelected && /* @__PURE__ */ jsx41(
           "rect",
           {
             width: size,
@@ -9435,7 +9659,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isValidMove && !isCapture && /* @__PURE__ */ jsx38(
+        isValidMove && !isCapture && /* @__PURE__ */ jsx41(
           "circle",
           {
             cx: size / 2,
@@ -9445,7 +9669,7 @@ function DefaultGridCell({
             pointerEvents: "none"
           }
         ),
-        isCapture && /* @__PURE__ */ jsx38(
+        isCapture && /* @__PURE__ */ jsx41(
           "circle",
           {
             cx: size / 2,
@@ -9479,7 +9703,7 @@ function DefaultGridPiece({
       onClick,
       onPointerDown,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx19(
+      className: clsx20(
         "transition-transform duration-150",
         (onClick || onPointerDown) && "cursor-pointer hover:scale-105",
         className
@@ -9489,7 +9713,7 @@ function DefaultGridPiece({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Grid piece" : void 0,
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx41(
           "circle",
           {
             r: isDragging ? radius * 1.1 : radius,
@@ -9499,7 +9723,7 @@ function DefaultGridPiece({
             style: { filter: "drop-shadow(1px 2px 2px rgba(0,0,0,0.4))" }
           }
         ),
-        label && /* @__PURE__ */ jsx38(
+        label && /* @__PURE__ */ jsx41(
           "text",
           {
             y: 4,
@@ -9544,20 +9768,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__ */ jsx38(
+  return /* @__PURE__ */ jsx41(
     "g",
     {
       onClick,
       onPointerDown,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx19(
+      className: clsx20(
         (onClick || onPointerDown) && "cursor-pointer",
         className
       ),
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? `${owner} ${type}` : void 0,
-      children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx41(
         "text",
         {
           textAnchor: "middle",
@@ -9684,35 +9908,24 @@ function SquareGridImpl(props) {
     renderInteractiveEdge,
     renderInteractiveVertex
   } = props;
-  const board = "board" in props ? props.board : "spaces" in props ? {
-    id: "__square-grid__",
-    spaces: props.spaces,
-    pieces: props.pieces ?? [],
-    edges: props.edges ?? [],
-    vertices: props.vertices ?? []
-  } : {
-    id: "__square-grid__",
-    rows: props.rows ?? 0,
-    cols: props.cols ?? 0,
-    cells: props.cells,
-    pieces: props.pieces ?? [],
-    edges: props.edges ?? [],
-    vertices: props.vertices ?? []
-  };
-  const [hoveredInteractiveSpaceId, setHoveredInteractiveSpaceId] = useState18(null);
-  const [hoveredInteractiveEdgeId, setHoveredInteractiveEdgeId] = useState18(null);
-  const [hoveredInteractiveVertexId, setHoveredInteractiveVertexId] = useState18(null);
-  const {
-    transform,
-    bind,
-    isDragging: isPanning
-  } = usePanZoom({
-    enabled: enablePanZoom,
-    initialZoom,
-    minZoom,
-    maxZoom,
-    mode: "viewbox"
-  });
+  const board = resolveBoardProp(
+    props,
+    (inlineProps) => "spaces" in inlineProps ? {
+      id: "__square-grid__",
+      spaces: inlineProps.spaces,
+      pieces: inlineProps.pieces ?? [],
+      edges: inlineProps.edges ?? [],
+      vertices: inlineProps.vertices ?? []
+    } : {
+      id: "__square-grid__",
+      rows: inlineProps.rows ?? 0,
+      cols: inlineProps.cols ?? 0,
+      cells: inlineProps.cells,
+      pieces: inlineProps.pieces ?? [],
+      edges: inlineProps.edges ?? [],
+      vertices: inlineProps.vertices ?? []
+    }
+  );
   const labelMargin = showCoordinates && coordinateStyle !== "none" ? 24 : 0;
   const normalizedBoard = useMemo15(
     () => normalizeSquareBoardInput(board),
@@ -9804,19 +10017,34 @@ function SquareGridImpl(props) {
     }),
     [cellSize, cellsById, labelMargin, resolvedVertices]
   );
-  const viewBoxWidth = totalWidth / transform.zoom;
-  const viewBoxHeight = totalHeight / transform.zoom;
-  const viewBoxX = (totalWidth - viewBoxWidth) / 2 - transform.pan.x;
-  const viewBoxY = (totalHeight - viewBoxHeight) / 2 - transform.pan.y;
   const svgWidth = width ?? totalWidth;
   const svgHeight = height ?? totalHeight;
+  const {
+    transform,
+    bind,
+    isDragging: isPanning,
+    viewBox,
+    viewBoxX,
+    viewBoxY,
+    viewBoxHeight,
+    spaceHover,
+    edgeHover,
+    vertexHover
+  } = useGridSvgFrame({
+    panZoomEnabled: enablePanZoom,
+    initialZoom,
+    minZoom,
+    maxZoom,
+    bounds: { minX: 0, minY: 0, width: totalWidth, height: totalHeight },
+    viewBoxMode: "static-when-disabled"
+  });
   return /* @__PURE__ */ jsxs24(
     "svg",
     {
       width: svgWidth,
       height: svgHeight,
-      viewBox: enablePanZoom ? `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}` : `0 0 ${totalWidth} ${totalHeight}`,
-      className: clsx19(
+      viewBox,
+      className: clsx20(
         "square-grid",
         enablePanZoom && "touch-none",
         isPanning && "cursor-grabbing",
@@ -9827,11 +10055,11 @@ function SquareGridImpl(props) {
       role: "img",
       "aria-label": `${rows}x${cols} game grid`,
       children: [
-        /* @__PURE__ */ jsx38("defs", { children: /* @__PURE__ */ jsx38("filter", { id: "pieceShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx38("feDropShadow", { dx: "1", dy: "2", stdDeviation: "2", floodOpacity: "0.4" }) }) }),
-        /* @__PURE__ */ jsx38("g", { className: "cells", role: "list", "aria-label": "Grid cells", children: renderableCells.map(({ row, col }) => {
+        /* @__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 }) => {
           const x = labelMargin + col * cellSize;
           const y = row * cellSize;
-          return /* @__PURE__ */ jsx38(
+          return /* @__PURE__ */ jsx41(
             "g",
             {
               transform: `translate(${x}, ${y})`,
@@ -9842,153 +10070,91 @@ function SquareGridImpl(props) {
             `${row}-${col}`
           );
         }) }),
-        interactiveSpaces && /* @__PURE__ */ jsx38("g", { className: "interactive-spaces", "aria-label": "Interactive spaces", children: resolvedCells.map((space) => {
-          const state = interactiveTargetRenderState(
-            interactiveSpaces,
-            space.id,
-            hoveredInteractiveSpaceId === space.id
-          );
-          const isSelectable = isInteractiveTargetSelectable(
-            interactiveSpaces,
-            state
-          );
-          const x = labelMargin + space.col * cellSize;
-          const y = space.row * cellSize;
-          return /* @__PURE__ */ jsxs24(
-            "g",
-            {
-              transform: `translate(${x}, ${y})`,
-              onClick: isSelectable ? () => {
-                void interactiveSpaces.selectTargetId?.(space.id);
-              } : void 0,
-              onKeyDown: (event) => handleKeyboardActivation(
-                event,
-                isSelectable ? () => {
-                  void interactiveSpaces.selectTargetId?.(space.id);
-                } : void 0
-              ),
-              onPointerEnter: () => setHoveredInteractiveSpaceId(space.id),
-              onPointerLeave: () => setHoveredInteractiveSpaceId(
-                (currentId) => currentId === space.id ? null : currentId
-              ),
-              className: clsx19(isSelectable && "cursor-pointer"),
-              role: isSelectable ? "button" : void 0,
-              tabIndex: isSelectable ? 0 : void 0,
-              "aria-label": isSelectable ? `Select space ${space.id}` : void 0,
-              children: [
-                isSelectable && /* @__PURE__ */ jsx38(
-                  "rect",
-                  {
-                    x: 0,
-                    y: 0,
-                    width: cellSize,
-                    height: cellSize,
-                    fill: "rgba(255,255,255,0.001)",
-                    pointerEvents: "all"
-                  }
-                ),
-                renderInteractiveSpace ? renderInteractiveSpace(space, state) : null
-              ]
-            },
-            space.id
-          );
-        }) }),
-        renderEdge && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx38("g", { className: "edges", "aria-label": "Board edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => /* @__PURE__ */ jsx38("g", { children: renderEdge(edge, interactiveEdge.position) }, edge.id)) }),
-        interactiveEdges && /* @__PURE__ */ jsx38("g", { className: "interactive-edges", "aria-label": "Interactive edges", children: resolvedEdgePositions.map(({ interactiveEdge: edge }) => {
-          const state = interactiveTargetRenderState(
-            interactiveEdges,
-            edge.id,
-            hoveredInteractiveEdgeId === edge.id
-          );
-          const isSelectable = isInteractiveTargetSelectable(
-            interactiveEdges,
-            state
-          );
-          return /* @__PURE__ */ jsx38(
-            "g",
-            {
-              onClick: isSelectable ? () => {
-                void interactiveEdges.selectTargetId?.(edge.id);
-              } : void 0,
-              onKeyDown: (event) => handleKeyboardActivation(
-                event,
-                isSelectable ? () => {
-                  void interactiveEdges.selectTargetId?.(edge.id);
-                } : void 0
-              ),
-              onPointerEnter: () => setHoveredInteractiveEdgeId(edge.id),
-              onPointerLeave: () => setHoveredInteractiveEdgeId(
-                (currentId) => currentId === edge.id ? null : currentId
-              ),
-              className: clsx19(isSelectable && "cursor-pointer"),
-              role: isSelectable ? "button" : void 0,
-              tabIndex: isSelectable ? 0 : void 0,
-              "aria-label": isSelectable ? `Select edge ${edge.id}` : void 0,
-              children: renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx38(
-                "line",
-                {
-                  x1: edge.position.x1,
-                  y1: edge.position.y1,
-                  x2: edge.position.x2,
-                  y2: edge.position.y2,
-                  stroke: "rgba(255,255,255,0.001)",
-                  strokeWidth: Math.max(12, cellSize * 0.18),
-                  pointerEvents: "stroke"
-                }
-              ) : null
-            },
-            edge.id
-          );
-        }) }),
-        renderVertex && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx38("g", { className: "vertices", "aria-label": "Board vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => /* @__PURE__ */ jsx38("g", { children: renderVertex(vertex, interactiveVertex.position) }, vertex.id)) }),
-        interactiveVertices && /* @__PURE__ */ jsx38("g", { className: "interactive-vertices", "aria-label": "Interactive vertices", children: resolvedVertexPositions.map(({ interactiveVertex: vertex }) => {
-          const state = interactiveTargetRenderState(
-            interactiveVertices,
-            vertex.id,
-            hoveredInteractiveVertexId === vertex.id
-          );
-          const isSelectable = isInteractiveTargetSelectable(
-            interactiveVertices,
-            state
-          );
-          return /* @__PURE__ */ jsx38(
-            "g",
-            {
-              onClick: isSelectable ? () => {
-                void interactiveVertices.selectTargetId?.(vertex.id);
-              } : void 0,
-              onKeyDown: (event) => handleKeyboardActivation(
-                event,
-                isSelectable ? () => {
-                  void interactiveVertices.selectTargetId?.(vertex.id);
-                } : void 0
-              ),
-              onPointerEnter: () => setHoveredInteractiveVertexId(vertex.id),
-              onPointerLeave: () => setHoveredInteractiveVertexId(
-                (currentId) => currentId === vertex.id ? null : currentId
-              ),
-              className: clsx19(isSelectable && "cursor-pointer"),
-              role: isSelectable ? "button" : void 0,
-              tabIndex: isSelectable ? 0 : void 0,
-              "aria-label": isSelectable ? `Select vertex ${vertex.id}` : void 0,
-              children: renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx38(
-                "circle",
+        interactiveSpaces && /* @__PURE__ */ jsx41(
+          InteractiveTargetLayerGroup,
+          {
+            layer: interactiveSpaces,
+            targets: resolvedCells,
+            getTargetId: (space) => space.id,
+            targetKind: "space",
+            groupClassName: "interactive-spaces",
+            groupAriaLabel: "Interactive spaces",
+            spreadBrowserAttributes: false,
+            selectMode: "layer-direct",
+            hover: spaceHover,
+            getTargetTransform: (space) => `translate(${labelMargin + space.col * cellSize}, ${space.row * cellSize})`,
+            renderTargetContent: (space, state, isSelectable) => /* @__PURE__ */ jsxs24(Fragment6, { children: [
+              isSelectable && /* @__PURE__ */ jsx41(
+                "rect",
                 {
-                  cx: vertex.position.x,
-                  cy: vertex.position.y,
-                  r: Math.max(8, cellSize * 0.12),
+                  x: 0,
+                  y: 0,
+                  width: cellSize,
+                  height: cellSize,
                   fill: "rgba(255,255,255,0.001)",
                   pointerEvents: "all"
                 }
-              ) : null
-            },
-            vertex.id
-          );
-        }) }),
+              ),
+              renderInteractiveSpace ? renderInteractiveSpace(space, state) : null
+            ] })
+          }
+        ),
+        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(
+          InteractiveTargetLayerGroup,
+          {
+            layer: interactiveEdges,
+            targets: resolvedEdgePositions,
+            getTargetId: ({ interactiveEdge }) => interactiveEdge.id,
+            targetKind: "edge",
+            groupClassName: "interactive-edges",
+            groupAriaLabel: "Interactive edges",
+            spreadBrowserAttributes: false,
+            selectMode: "layer-direct",
+            hover: edgeHover,
+            renderTargetContent: ({ interactiveEdge: edge }, state) => renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx41(
+              "line",
+              {
+                x1: edge.position.x1,
+                y1: edge.position.y1,
+                x2: edge.position.x2,
+                y2: edge.position.y2,
+                stroke: "rgba(255,255,255,0.001)",
+                strokeWidth: Math.max(12, cellSize * 0.18),
+                pointerEvents: "stroke"
+              }
+            ) : 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(
+          InteractiveTargetLayerGroup,
+          {
+            layer: interactiveVertices,
+            targets: resolvedVertexPositions,
+            getTargetId: ({ interactiveVertex }) => interactiveVertex.id,
+            targetKind: "vertex",
+            groupClassName: "interactive-vertices",
+            groupAriaLabel: "Interactive vertices",
+            spreadBrowserAttributes: false,
+            selectMode: "layer-direct",
+            hover: vertexHover,
+            renderTargetContent: ({ interactiveVertex: vertex }, state) => renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx41(
+              "circle",
+              {
+                cx: vertex.position.x,
+                cy: vertex.position.y,
+                r: Math.max(8, cellSize * 0.12),
+                fill: "rgba(255,255,255,0.001)",
+                pointerEvents: "all"
+              }
+            ) : null
+          }
+        ),
         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__ */ jsx38(
+            return /* @__PURE__ */ jsx41(
               "text",
               {
                 x: labelMargin + col * cellSize + cellSize / 2,
@@ -10004,7 +10170,7 @@ function SquareGridImpl(props) {
           }),
           Array.from({ length: rows }).map((_, row) => {
             const label = coordinateStyle === "algebraic" ? String(rows - row) : String(row + 1);
-            return /* @__PURE__ */ jsx38(
+            return /* @__PURE__ */ jsx41(
               "text",
               {
                 x: 10,
@@ -10019,10 +10185,10 @@ function SquareGridImpl(props) {
             );
           })
         ] }),
-        /* @__PURE__ */ jsx38("g", { className: "pieces", role: "list", "aria-label": "Game pieces", children: resolvedPieces.map((piece) => {
+        /* @__PURE__ */ jsx41("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__ */ jsx38(
+          return /* @__PURE__ */ jsx41(
             "g",
             {
               transform: `translate(${x}, ${y})`,
@@ -10033,27 +10199,13 @@ function SquareGridImpl(props) {
             piece.id
           );
         }) }),
-        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs24(
-          "g",
+        enablePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx41(
+          GridZoomIndicator,
           {
-            transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
-            children: [
-              /* @__PURE__ */ jsx38(
-                "rect",
-                {
-                  x: 0,
-                  y: 0,
-                  width: 60,
-                  height: 20,
-                  rx: 4,
-                  fill: "rgba(0,0,0,0.6)"
-                }
-              ),
-              /* @__PURE__ */ jsxs24("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [
-                Math.round(transform.zoom * 100),
-                "%"
-              ] })
-            ]
+            viewBoxX,
+            viewBoxY,
+            viewBoxHeight,
+            zoom: transform.zoom
           }
         )
       ]
@@ -10063,9 +10215,9 @@ function SquareGridImpl(props) {
 var SquareGrid = SquareGridImpl;
 
 // src/ui/components/board/HexGrid.tsx
-import { useMemo as useMemo16, useState as useState19 } from "react";
-import { clsx as clsx20 } from "clsx";
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+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";
 function DefaultHexTile({
   size,
   fill,
@@ -10093,7 +10245,7 @@ function DefaultHexTile({
       onPointerEnter,
       onPointerLeave,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx20(
+      className: clsx21(
         "transition-all duration-150",
         onClick && "cursor-pointer hover:brightness-110",
         className
@@ -10102,7 +10254,7 @@ function DefaultHexTile({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? label ?? "Hex tile" : void 0,
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx42(
           "polygon",
           {
             points,
@@ -10112,7 +10264,7 @@ function DefaultHexTile({
             filter: "url(#hexShadow)"
           }
         ),
-        label && /* @__PURE__ */ jsx39(
+        label && /* @__PURE__ */ jsx42(
           "text",
           {
             x: 0,
@@ -10166,7 +10318,7 @@ function DefaultHexEdge({
     {
       onClick,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx20(
+      className: clsx21(
         "transition-all duration-150",
         onClick && "cursor-pointer",
         className
@@ -10175,7 +10327,7 @@ function DefaultHexEdge({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Hex edge" : void 0,
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx42(
           "rect",
           {
             x: position.midX - touchTargetLength / 2,
@@ -10188,7 +10340,7 @@ function DefaultHexEdge({
             pointerEvents: "all"
           }
         ),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx42(
           "line",
           {
             x1: position.x1,
@@ -10231,7 +10383,7 @@ function DefaultHexVertex({
       onPointerEnter,
       onPointerLeave,
       onKeyDown: (event) => handleKeyboardActivation(event, onClick),
-      className: clsx20(
+      className: clsx21(
         "transition-all duration-150",
         onClick && "cursor-pointer hover:scale-110",
         className
@@ -10241,7 +10393,7 @@ function DefaultHexVertex({
       tabIndex: onClick ? 0 : void 0,
       "aria-label": onClick ? "Hex vertex" : void 0,
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx42(
           "circle",
           {
             cx: position.x,
@@ -10251,7 +10403,7 @@ function DefaultHexVertex({
             pointerEvents: "all"
           }
         ),
-        shape === "square" ? /* @__PURE__ */ jsx39(
+        shape === "square" ? /* @__PURE__ */ jsx42(
           "rect",
           {
             x: position.x - size,
@@ -10263,7 +10415,7 @@ function DefaultHexVertex({
             strokeWidth: effectiveStrokeWidth,
             className: hasOwner ? "" : "opacity-30"
           }
-        ) : /* @__PURE__ */ jsx39(
+        ) : /* @__PURE__ */ jsx42(
           "circle",
           {
             cx: position.x,
@@ -10287,7 +10439,7 @@ function DefaultInteractiveVertex({
   hoverColor = "rgba(34, 197, 94, 0.8)",
   className
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx42(
     "circle",
     {
       cx: position.x,
@@ -10296,7 +10448,7 @@ function DefaultInteractiveVertex({
       fill: isHovered ? hoverColor : color,
       stroke: isHovered ? "#22c55e" : "rgba(255,255,255,0.4)",
       strokeWidth: isHovered ? 2 : 1,
-      className: clsx20("transition-all duration-150", className)
+      className: clsx21("transition-all duration-150", className)
     }
   );
 }
@@ -10308,7 +10460,7 @@ function DefaultInteractiveEdge({
   hoverColor = "rgba(251, 146, 60, 0.8)",
   className
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx42(
     "line",
     {
       x1: position.x1,
@@ -10318,7 +10470,7 @@ function DefaultInteractiveEdge({
       stroke: isHovered ? hoverColor : color,
       strokeWidth: isHovered ? strokeWidth * 1.5 : strokeWidth,
       strokeLinecap: "round",
-      className: clsx20("transition-all duration-150", className)
+      className: clsx21("transition-all duration-150", className)
     }
   );
 }
@@ -10417,19 +10569,22 @@ function HexGridImpl(props) {
     interactiveVertexSize = 12,
     interactiveEdgeSize = 10
   } = props;
-  const board = "board" in props ? props.board : "spaces" in props ? {
-    id: "__hex-grid__",
-    orientation,
-    spaces: props.spaces,
-    edges: props.edges ?? [],
-    vertices: props.vertices ?? []
-  } : {
-    id: "__hex-grid__",
-    orientation,
-    tiles: props.tiles,
-    edges: props.edges ?? [],
-    vertices: props.vertices ?? []
-  };
+  const board = resolveBoardProp(
+    props,
+    (inlineProps) => "spaces" in inlineProps ? {
+      id: "__hex-grid__",
+      orientation,
+      spaces: inlineProps.spaces,
+      edges: inlineProps.edges ?? [],
+      vertices: inlineProps.vertices ?? []
+    } : {
+      id: "__hex-grid__",
+      orientation,
+      tiles: inlineProps.tiles,
+      edges: inlineProps.edges ?? [],
+      vertices: inlineProps.vertices ?? []
+    }
+  );
   const isMobile = useIsMobile();
   const effectivePanZoom = enablePanZoom && isMobile;
   const normalizedBoard = useMemo16(
@@ -10440,16 +10595,6 @@ function HexGridImpl(props) {
   const resolvedEdges = normalizedBoard.edges;
   const resolvedVertices = normalizedBoard.vertices;
   const resolvedOrientation = normalizedBoard.orientation ?? orientation;
-  const [hoveredSpaceId, setHoveredSpaceId] = useState19(null);
-  const [hoveredVertexId, setHoveredVertexId] = useState19(null);
-  const [hoveredEdgeId, setHoveredEdgeId] = useState19(null);
-  const { transform, bind, isDragging } = usePanZoom({
-    enabled: effectivePanZoom,
-    initialZoom,
-    minZoom,
-    maxZoom,
-    mode: "viewbox"
-  });
   const tilePositions = useMemo16(() => {
     const positions = /* @__PURE__ */ new Map();
     resolvedTiles.forEach((tile) => {
@@ -10561,18 +10706,39 @@ function HexGridImpl(props) {
       height: maxY - minY + padding * 2
     };
   }, [resolvedTiles, tilePositions, hexSize]);
-  const viewBox = calculateViewBox(bounds, transform);
-  const viewBoxParts = viewBox.split(" ").map(Number);
-  const viewBoxX = viewBoxParts[0] ?? 0;
-  const viewBoxY = viewBoxParts[1] ?? 0;
-  const viewBoxHeight = viewBoxParts[3] ?? 0;
+  const interactiveSpaceTargets = useMemo16(
+    () => resolvedTiles.flatMap((space) => {
+      const pos = tilePositions.get(space.id);
+      return pos ? [{ space, pos }] : [];
+    }),
+    [resolvedTiles, tilePositions]
+  );
+  const {
+    transform,
+    bind,
+    isDragging,
+    viewBox,
+    viewBoxX,
+    viewBoxY,
+    viewBoxHeight,
+    spaceHover,
+    edgeHover,
+    vertexHover
+  } = useGridSvgFrame({
+    panZoomEnabled: effectivePanZoom,
+    initialZoom,
+    minZoom,
+    maxZoom,
+    bounds,
+    viewBoxMode: "transformed"
+  });
   return /* @__PURE__ */ jsxs25(
     "svg",
     {
       width,
       height,
       viewBox,
-      className: clsx20(
+      className: clsx21(
         "hex-grid",
         effectivePanZoom && "touch-none",
         isDragging && "cursor-grabbing",
@@ -10585,16 +10751,16 @@ function HexGridImpl(props) {
       children: [
         /* @__PURE__ */ jsxs25("defs", { children: [
           /* @__PURE__ */ jsxs25("linearGradient", { id: "oceanGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-            /* @__PURE__ */ jsx39("stop", { offset: "0%", stopColor: "#0ea5e9" }),
-            /* @__PURE__ */ jsx39("stop", { offset: "100%", stopColor: "#0284c7" })
+            /* @__PURE__ */ jsx42("stop", { offset: "0%", stopColor: "#0ea5e9" }),
+            /* @__PURE__ */ jsx42("stop", { offset: "100%", stopColor: "#0284c7" })
           ] }),
-          /* @__PURE__ */ jsx39("filter", { id: "hexShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx39("feDropShadow", { dx: "1", dy: "1", stdDeviation: "2", floodOpacity: "0.3" }) })
+          /* @__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__ */ jsx39("g", { className: "tiles", role: "list", "aria-label": "Hex tiles", children: resolvedTiles.map((tile) => {
+        /* @__PURE__ */ jsx42("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__ */ jsx39(
+          return /* @__PURE__ */ jsx42(
             "g",
             {
               transform: `translate(${pos.x}, ${pos.y})`,
@@ -10605,222 +10771,127 @@ function HexGridImpl(props) {
             tile.id
           );
         }) }),
-        interactiveSpaces && resolvedTiles.length > 0 && /* @__PURE__ */ jsx39(
-          "g",
+        interactiveSpaces && resolvedTiles.length > 0 && /* @__PURE__ */ jsx42(
+          InteractiveTargetLayerGroup,
           {
-            className: "interactive-spaces",
-            role: "list",
-            "aria-label": "Interactive spaces",
-            children: resolvedTiles.map((space) => {
-              const pos = tilePositions.get(space.id);
-              if (!pos) return null;
-              const state = interactiveTargetRenderState(
-                interactiveSpaces,
-                space.id,
-                hoveredSpaceId === space.id
-              );
-              const isSelectable = isInteractiveTargetSelectable(
-                interactiveSpaces,
-                state
-              );
-              return /* @__PURE__ */ jsxs25(
-                "g",
+            layer: interactiveSpaces,
+            targets: interactiveSpaceTargets,
+            getTargetId: ({ space }) => space.id,
+            targetKind: "space",
+            groupClassName: "interactive-spaces",
+            groupAriaLabel: "Interactive spaces",
+            groupRole: "list",
+            spreadBrowserAttributes: true,
+            selectMode: "render-state",
+            hover: spaceHover,
+            getTargetTransform: ({ pos }) => `translate(${pos.x}, ${pos.y})`,
+            renderTargetContent: ({ space, pos }, state, isSelectable) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
+              isSelectable && /* @__PURE__ */ jsx42(
+                "polygon",
                 {
-                  transform: `translate(${pos.x}, ${pos.y})`,
-                  role: isSelectable ? "button" : void 0,
-                  className: clsx20(isSelectable && "cursor-pointer"),
-                  onPointerEnter: () => setHoveredSpaceId(space.id),
-                  onPointerLeave: () => setHoveredSpaceId(
-                    (currentId) => currentId === space.id ? null : currentId
-                  ),
-                  onClick: isSelectable ? () => {
-                    void state.select?.();
-                  } : void 0,
-                  onKeyDown: (event) => handleKeyboardActivation(
-                    event,
-                    isSelectable ? () => {
-                      void state.select?.();
-                    } : void 0
-                  ),
-                  tabIndex: isSelectable ? 0 : void 0,
-                  "aria-label": isSelectable ? `Select space ${space.id}` : void 0,
-                  children: [
-                    isSelectable && /* @__PURE__ */ jsx39(
-                      "polygon",
-                      {
-                        points: buildTileGeometry(pos).points({
-                          inset: hexSize * 0.05
-                        }),
-                        fill: "rgba(255,255,255,0.001)",
-                        pointerEvents: "all"
-                      }
-                    ),
-                    renderInteractiveSpace ? renderInteractiveSpace(space, state) : null
-                  ]
-                },
-                space.id
-              );
-            })
+                  points: buildTileGeometry(pos).points({
+                    inset: hexSize * 0.05
+                  }),
+                  fill: "rgba(255,255,255,0.001)",
+                  pointerEvents: "all"
+                }
+              ),
+              renderInteractiveSpace ? renderInteractiveSpace(space, state) : null
+            ] })
           }
         ),
-        resolvedEdges.length > 0 && /* @__PURE__ */ jsx39("g", { className: "edges", role: "list", "aria-label": "Hex edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => {
-          return /* @__PURE__ */ jsx39("g", { role: "listitem", children: renderEdge(edge, interactiveEdge.position) }, edge.id);
+        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);
         }) }),
-        resolvedVertices.length > 0 && /* @__PURE__ */ jsx39("g", { className: "vertices", role: "list", "aria-label": "Hex vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => {
-          return /* @__PURE__ */ jsx39("g", { role: "listitem", children: renderVertex(vertex, interactiveVertex.position) }, vertex.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);
         }) }),
-        interactiveEdges && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx39(
-          "g",
+        interactiveEdges && resolvedEdgePositions.length > 0 && /* @__PURE__ */ jsx42(
+          InteractiveTargetLayerGroup,
           {
-            className: "interactive-edges",
-            role: "list",
-            "aria-label": "Interactive edges for placement",
-            children: resolvedEdgePositions.map(({ interactiveEdge: edge }) => {
-              const state = interactiveTargetRenderState(
-                interactiveEdges,
-                edge.id,
-                hoveredEdgeId === edge.id
-              );
-              const isSelectable = isInteractiveTargetSelectable(
-                interactiveEdges,
-                state
-              );
+            layer: interactiveEdges,
+            targets: resolvedEdgePositions,
+            getTargetId: ({ interactiveEdge }) => interactiveEdge.id,
+            targetKind: "edge",
+            groupClassName: "interactive-edges",
+            groupAriaLabel: "Interactive edges for placement",
+            groupRole: "list",
+            spreadBrowserAttributes: true,
+            selectMode: "render-state",
+            hover: edgeHover,
+            renderTargetContent: ({ interactiveEdge: edge }, state, isSelectable) => {
               const touchTargetLength = Math.hypot(
                 edge.position.x2 - edge.position.x1,
                 edge.position.y2 - edge.position.y1
               );
-              return /* @__PURE__ */ jsxs25(
-                "g",
-                {
-                  role: isSelectable ? "button" : void 0,
-                  className: clsx20(isSelectable && "cursor-pointer"),
-                  onPointerEnter: () => setHoveredEdgeId(edge.id),
-                  onPointerLeave: () => setHoveredEdgeId(
-                    (currentId) => currentId === edge.id ? null : currentId
-                  ),
-                  onClick: isSelectable ? () => {
-                    void state.select?.();
-                  } : void 0,
-                  onKeyDown: (event) => handleKeyboardActivation(
-                    event,
-                    isSelectable ? () => {
-                      void state.select?.();
-                    } : void 0
-                  ),
-                  tabIndex: isSelectable ? 0 : void 0,
-                  "aria-label": isSelectable ? `Select edge ${edge.id}` : void 0,
-                  children: [
-                    isSelectable && /* @__PURE__ */ jsx39(
-                      "rect",
-                      {
-                        x: edge.position.midX - touchTargetLength / 2,
-                        y: edge.position.midY - interactiveEdgeSize,
-                        width: touchTargetLength,
-                        height: interactiveEdgeSize * 2,
-                        rx: interactiveEdgeSize,
-                        fill: "rgba(255,255,255,0.001)",
-                        transform: `rotate(${edge.position.edgeAngle} ${edge.position.midX} ${edge.position.midY})`,
-                        pointerEvents: "all"
-                      }
-                    ),
-                    renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx39(
-                      DefaultInteractiveEdge,
-                      {
-                        position: edge.position,
-                        isHovered: state.isHovered,
-                        strokeWidth: interactiveEdgeSize * 0.6
-                      }
-                    ) : null
-                  ]
-                },
-                edge.id
-              );
-            })
+              return /* @__PURE__ */ jsxs25(Fragment7, { children: [
+                isSelectable && /* @__PURE__ */ jsx42(
+                  "rect",
+                  {
+                    x: edge.position.midX - touchTargetLength / 2,
+                    y: edge.position.midY - interactiveEdgeSize,
+                    width: touchTargetLength,
+                    height: interactiveEdgeSize * 2,
+                    rx: interactiveEdgeSize,
+                    fill: "rgba(255,255,255,0.001)",
+                    transform: `rotate(${edge.position.edgeAngle} ${edge.position.midX} ${edge.position.midY})`,
+                    pointerEvents: "all"
+                  }
+                ),
+                renderInteractiveEdge ? renderInteractiveEdge(edge, edge.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx42(
+                  DefaultInteractiveEdge,
+                  {
+                    position: edge.position,
+                    isHovered: state.isHovered,
+                    strokeWidth: interactiveEdgeSize * 0.6
+                  }
+                ) : null
+              ] });
+            }
           }
         ),
-        interactiveVertices && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx39(
-          "g",
+        interactiveVertices && resolvedVertexPositions.length > 0 && /* @__PURE__ */ jsx42(
+          InteractiveTargetLayerGroup,
           {
-            className: "interactive-vertices",
-            role: "list",
-            "aria-label": "Interactive vertices for placement",
-            children: resolvedVertexPositions.map(({ interactiveVertex: vertex }) => {
-              const state = interactiveTargetRenderState(
-                interactiveVertices,
-                vertex.id,
-                hoveredVertexId === vertex.id
-              );
-              const isSelectable = isInteractiveTargetSelectable(
-                interactiveVertices,
-                state
-              );
-              return /* @__PURE__ */ jsxs25(
-                "g",
+            layer: interactiveVertices,
+            targets: resolvedVertexPositions,
+            getTargetId: ({ interactiveVertex }) => interactiveVertex.id,
+            targetKind: "vertex",
+            groupClassName: "interactive-vertices",
+            groupAriaLabel: "Interactive vertices for placement",
+            groupRole: "list",
+            spreadBrowserAttributes: true,
+            selectMode: "render-state",
+            hover: vertexHover,
+            renderTargetContent: ({ interactiveVertex: vertex }, state, isSelectable) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
+              isSelectable && /* @__PURE__ */ jsx42(
+                "circle",
                 {
-                  role: isSelectable ? "button" : void 0,
-                  className: clsx20(isSelectable && "cursor-pointer"),
-                  onPointerEnter: () => setHoveredVertexId(vertex.id),
-                  onPointerLeave: () => setHoveredVertexId(
-                    (currentId) => currentId === vertex.id ? null : currentId
-                  ),
-                  onClick: isSelectable ? () => {
-                    void state.select?.();
-                  } : void 0,
-                  onKeyDown: (event) => handleKeyboardActivation(
-                    event,
-                    isSelectable ? () => {
-                      void state.select?.();
-                    } : void 0
-                  ),
-                  tabIndex: isSelectable ? 0 : void 0,
-                  "aria-label": isSelectable ? `Select vertex ${vertex.id}` : void 0,
-                  children: [
-                    isSelectable && /* @__PURE__ */ jsx39(
-                      "circle",
-                      {
-                        cx: vertex.position.x,
-                        cy: vertex.position.y,
-                        r: interactiveVertexSize * 1.5,
-                        fill: "rgba(255,255,255,0.001)",
-                        pointerEvents: "all"
-                      }
-                    ),
-                    renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx39(
-                      DefaultInteractiveVertex,
-                      {
-                        position: vertex.position,
-                        isHovered: state.isHovered,
-                        size: interactiveVertexSize * 0.6
-                      }
-                    ) : null
-                  ]
-                },
-                vertex.id
-              );
-            })
+                  cx: vertex.position.x,
+                  cy: vertex.position.y,
+                  r: interactiveVertexSize * 1.5,
+                  fill: "rgba(255,255,255,0.001)",
+                  pointerEvents: "all"
+                }
+              ),
+              renderInteractiveVertex ? renderInteractiveVertex(vertex, vertex.position, state) : state.isEnabled && state.isEligible ? /* @__PURE__ */ jsx42(
+                DefaultInteractiveVertex,
+                {
+                  position: vertex.position,
+                  isHovered: state.isHovered,
+                  size: interactiveVertexSize * 0.6
+                }
+              ) : null
+            ] })
           }
         ),
-        effectivePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsxs25(
-          "g",
+        effectivePanZoom && transform.zoom !== 1 && /* @__PURE__ */ jsx42(
+          GridZoomIndicator,
           {
-            transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`,
-            children: [
-              /* @__PURE__ */ jsx39(
-                "rect",
-                {
-                  x: 0,
-                  y: 0,
-                  width: 60,
-                  height: 20,
-                  rx: 4,
-                  fill: "rgba(0,0,0,0.6)"
-                }
-              ),
-              /* @__PURE__ */ jsxs25("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [
-                Math.round(transform.zoom * 100),
-                "%"
-              ] })
-            ]
+            viewBoxX,
+            viewBoxY,
+            viewBoxHeight,
+            zoom: transform.zoom
           }
         )
       ]
@@ -10987,4 +11058,4 @@ export {
   HexGrid,
   createHexBoardView
 };
-//# sourceMappingURL=chunk-WYPQ3GG5.js.map
+//# sourceMappingURL=chunk-QZ6X4B5P.js.map