koin.js 1.0.12 → 1.0.14

package/dist/index.js

@@ -2282,7 +2282,8 @@ var SIX_BUTTON_LAYOUT = {
     { type: "y", label: "A", x: 72, y: 64, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
     { type: "b", label: "B", x: 82, y: 60, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
     { type: "a", label: "C", x: 92, y: 56, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
 var SATURN_LAYOUT = {
@@ -2301,7 +2302,8 @@ var SATURN_LAYOUT = {
     // Triggers (L2/R2 for Saturn L/R)
     { type: "l2", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
     { type: "r2", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
-    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
 var NEOGEO_LAYOUT = {
@@ -2350,9 +2352,10 @@ var N64_LAYOUT = {
     // Shoulders
     { type: "l", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
     { type: "r", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
-    // Z trigger (use select as workaround since it's a unique button)
-    { type: "select", label: "Z", x: 8, y: 35, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
-    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+    // Z trigger (use l3 button for Z trigger)
+    { type: "l3", label: "Z", x: 8, y: 35, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
 var DREAMCAST_LAYOUT = {
@@ -2367,7 +2370,8 @@ var DREAMCAST_LAYOUT = {
     // Triggers
     { type: "l", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
     { type: "r", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
-    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
 function getLayoutForSystem(system) {
@@ -2389,26 +2393,49 @@ function getLayoutForSystem(system) {
   if (s.includes("ATARI")) return TWO_BUTTON_LAYOUT;
   return TWO_BUTTON_LAYOUT;
 }
-var DRAG_HOLD_DELAY = 350;
+
+// src/components/VirtualController/utils/dragConstraints.ts
+function constrainToViewport({
+  newXPercent,
+  newYPercent,
+  elementSize,
+  containerWidth,
+  containerHeight
+}) {
+  const xMargin = elementSize / 2 / containerWidth * 100;
+  const yMargin = elementSize / 2 / containerHeight * 100;
+  return {
+    x: Math.max(xMargin, Math.min(100 - xMargin, newXPercent)),
+    y: Math.max(yMargin, Math.min(100 - yMargin, newYPercent))
+  };
+}
+
+// src/components/VirtualController/hooks/useDrag.ts
+var DEFAULT_HOLD_DELAY = 350;
+var DEFAULT_CENTER_THRESHOLD = 0.4;
 var DRAG_MOVE_THRESHOLD = 10;
-var DRAG_CENTER_THRESHOLD = 0.4;
-function useTouchHandlers({
-  buttonType,
-  isSystemButton,
-  buttonSize,
+function useDrag({
+  elementSize,
   displayX,
   displayY,
   containerWidth,
   containerHeight,
-  onPress,
-  onPressDown,
-  onRelease,
-  onPositionChange
+  onPositionChange,
+  holdDelay = DEFAULT_HOLD_DELAY,
+  centerThreshold = DEFAULT_CENTER_THRESHOLD,
+  onDragStart,
+  onDragEnd
 }) {
+  const [isDragging, setIsDragging] = React2.useState(false);
   const isDraggingRef = React2.useRef(false);
-  const dragStartRef = React2.useRef({ x: 0, y: 0 });
   const dragTimerRef = React2.useRef(null);
   const touchStartPosRef = React2.useRef({ x: 0, y: 0 });
+  const dragStartRef = React2.useRef({
+    elementX: 0,
+    elementY: 0,
+    touchX: 0,
+    touchY: 0
+  });
   const clearDragTimer = React2.useCallback(() => {
     if (dragTimerRef.current) {
       clearTimeout(dragTimerRef.current);
@@ -2418,23 +2445,129 @@ function useTouchHandlers({
   const startDragging = React2.useCallback(
     (touchX, touchY) => {
       isDraggingRef.current = true;
+      setIsDragging(true);
       dragStartRef.current = {
-        x: touchX - displayX / 100 * containerWidth,
-        y: touchY - displayY / 100 * containerHeight
+        elementX: displayX,
+        elementY: displayY,
+        touchX,
+        touchY
       };
       if (navigator.vibrate) {
         navigator.vibrate([10, 30, 10]);
       }
+      onDragStart?.();
+    },
+    [displayX, displayY, onDragStart]
+  );
+  const checkDragStart = React2.useCallback(
+    (touchX, touchY, elementRect) => {
+      if (!onPositionChange) return false;
+      touchStartPosRef.current = { x: touchX, y: touchY };
+      const centerX = elementRect.left + elementRect.width / 2;
+      const centerY = elementRect.top + elementRect.height / 2;
+      const distFromCenter = Math.sqrt(
+        Math.pow(touchX - centerX, 2) + Math.pow(touchY - centerY, 2)
+      );
+      const centerRadius = elementSize * centerThreshold;
+      if (distFromCenter < centerRadius) {
+        dragTimerRef.current = setTimeout(() => {
+          if (!isDraggingRef.current) {
+            startDragging(touchX, touchY);
+          }
+        }, holdDelay);
+        return true;
+      }
+      return false;
+    },
+    [onPositionChange, elementSize, centerThreshold, holdDelay, startDragging]
+  );
+  const checkMoveThreshold = React2.useCallback(
+    (touchX, touchY) => {
+      if (!onPositionChange || isDraggingRef.current) return false;
+      const moveDistance = Math.sqrt(
+        Math.pow(touchX - touchStartPosRef.current.x, 2) + Math.pow(touchY - touchStartPosRef.current.y, 2)
+      );
+      if (moveDistance > DRAG_MOVE_THRESHOLD) {
+        clearDragTimer();
+        startDragging(touchX, touchY);
+        return true;
+      }
+      return false;
+    },
+    [onPositionChange, clearDragTimer, startDragging]
+  );
+  const handleDragMove = React2.useCallback(
+    (touchX, touchY) => {
+      if (!isDraggingRef.current || !onPositionChange) return;
+      const deltaX = touchX - dragStartRef.current.touchX;
+      const deltaY = touchY - dragStartRef.current.touchY;
+      const newXPercent = dragStartRef.current.elementX + deltaX / containerWidth * 100;
+      const newYPercent = dragStartRef.current.elementY + deltaY / containerHeight * 100;
+      const constrained = constrainToViewport({
+        newXPercent,
+        newYPercent,
+        elementSize,
+        containerWidth,
+        containerHeight
+      });
+      onPositionChange(constrained.x, constrained.y);
+    },
+    [onPositionChange, containerWidth, containerHeight, elementSize]
+  );
+  const handleDragEnd = React2.useCallback(() => {
+    clearDragTimer();
+    if (isDraggingRef.current) {
+      isDraggingRef.current = false;
+      setIsDragging(false);
+      onDragEnd?.();
+    }
+  }, [clearDragTimer, onDragEnd]);
+  return {
+    isDragging,
+    checkDragStart,
+    handleDragMove,
+    handleDragEnd,
+    clearDragTimer,
+    checkMoveThreshold
+  };
+}
+
+// src/components/VirtualController/hooks/useTouchHandlers.ts
+function useTouchHandlers({
+  buttonType,
+  isSystemButton,
+  buttonSize,
+  displayX,
+  displayY,
+  containerWidth,
+  containerHeight,
+  onPress,
+  onPressDown,
+  onRelease,
+  onPositionChange
+}) {
+  const isDraggingRef = React2.useRef(false);
+  const drag = useDrag({
+    elementSize: buttonSize,
+    displayX,
+    displayY,
+    containerWidth,
+    containerHeight,
+    onPositionChange,
+    centerThreshold: 0.4,
+    onDragStart: () => {
+      isDraggingRef.current = true;
       if (!isSystemButton) {
         onRelease(buttonType);
       }
     },
-    [displayX, displayY, containerWidth, containerHeight, isSystemButton, buttonType, onRelease]
-  );
+    onDragEnd: () => {
+      isDraggingRef.current = false;
+    }
+  });
   const handleTouchStart = React2.useCallback(
     (e) => {
       const touch = e.touches[0];
-      touchStartPosRef.current = { x: touch.clientX, y: touch.clientY };
       e.preventDefault();
       e.stopPropagation();
       if (navigator.vibrate) {
@@ -2449,57 +2582,32 @@ function useTouchHandlers({
         const target = e.currentTarget;
         if (!target) return;
         const rect = target.getBoundingClientRect();
-        const centerX = rect.left + rect.width / 2;
-        const centerY = rect.top + rect.height / 2;
-        const distance = Math.sqrt(
-          Math.pow(touch.clientX - centerX, 2) + Math.pow(touch.clientY - centerY, 2)
-        );
-        const dragThreshold = buttonSize * DRAG_CENTER_THRESHOLD;
-        if (distance < dragThreshold) {
-          dragTimerRef.current = setTimeout(() => {
-            if (!isDraggingRef.current) {
-              startDragging(touch.clientX, touch.clientY);
-            }
-          }, DRAG_HOLD_DELAY);
-        }
+        drag.checkDragStart(touch.clientX, touch.clientY, rect);
       }
     },
-    [isSystemButton, buttonType, onPress, onPressDown, onPositionChange, buttonSize, startDragging]
+    [isSystemButton, buttonType, onPress, onPressDown, onPositionChange, drag]
   );
   const handleTouchMove = React2.useCallback(
     (e) => {
       const touch = e.touches[0];
       if (onPositionChange && !isDraggingRef.current) {
-        const moveDistance = Math.sqrt(
-          Math.pow(touch.clientX - touchStartPosRef.current.x, 2) + Math.pow(touch.clientY - touchStartPosRef.current.y, 2)
-        );
-        if (moveDistance > DRAG_MOVE_THRESHOLD) {
-          clearDragTimer();
-          startDragging(touch.clientX, touch.clientY);
-        }
+        drag.checkMoveThreshold(touch.clientX, touch.clientY);
       }
-      if (isDraggingRef.current && onPositionChange) {
+      if (isDraggingRef.current) {
         e.preventDefault();
         e.stopPropagation();
-        const newX = touch.clientX - dragStartRef.current.x;
-        const newY = touch.clientY - dragStartRef.current.y;
-        const newXPercent = newX / containerWidth * 100;
-        const newYPercent = newY / containerHeight * 100;
-        const margin = buttonSize / 2 / Math.min(containerWidth, containerHeight) * 100;
-        const constrainedX = Math.max(margin, Math.min(100 - margin, newXPercent));
-        const constrainedY = Math.max(margin, Math.min(100 - margin, newYPercent));
-        onPositionChange(constrainedX, constrainedY);
+        drag.handleDragMove(touch.clientX, touch.clientY);
       }
     },
-    [onPositionChange, clearDragTimer, startDragging, containerWidth, containerHeight, buttonSize]
+    [onPositionChange, drag]
   );
   const handleTouchEnd = React2.useCallback(
     (e) => {
-      clearDragTimer();
+      drag.clearDragTimer();
       if (isDraggingRef.current) {
         e.preventDefault();
         e.stopPropagation();
-        isDraggingRef.current = false;
+        drag.handleDragEnd();
         return;
       }
       e.preventDefault();
@@ -2508,15 +2616,15 @@ function useTouchHandlers({
         onRelease(buttonType);
       }
     },
-    [clearDragTimer, isSystemButton, buttonType, onRelease]
+    [drag, isSystemButton, buttonType, onRelease]
   );
   const handleTouchCancel = React2.useCallback(
     (e) => {
-      clearDragTimer();
+      drag.clearDragTimer();
       if (isDraggingRef.current) {
         e.preventDefault();
         e.stopPropagation();
-        isDraggingRef.current = false;
+        drag.handleDragEnd();
         return;
       }
       e.preventDefault();
@@ -2525,11 +2633,11 @@ function useTouchHandlers({
         onRelease(buttonType);
       }
     },
-    [clearDragTimer, isSystemButton, buttonType, onRelease]
+    [drag, isSystemButton, buttonType, onRelease]
   );
   const cleanup = React2.useCallback(() => {
-    clearDragTimer();
-  }, [clearDragTimer]);
+    drag.clearDragTimer();
+  }, [drag]);
   return {
     handleTouchStart,
     handleTouchMove,
@@ -3385,7 +3493,6 @@ function dispatchKeyboardEvent(type, code) {
   canvas.dispatchEvent(event);
   return true;
 }
-var DRAG_HOLD_DELAY2 = 350;
 var CENTER_TOUCH_RADIUS = 0.25;
 var Dpad = React2__default.default.memo(function Dpad2({
   size = 180,
@@ -3402,10 +3509,6 @@ var Dpad = React2__default.default.memo(function Dpad2({
   const dpadRef = React2.useRef(null);
   const activeTouchRef = React2.useRef(null);
   const activeDirectionsRef = React2.useRef(/* @__PURE__ */ new Set());
-  const [isDragging, setIsDragging] = React2.useState(false);
-  const dragTimerRef = React2.useRef(null);
-  const dragStartRef = React2.useRef({ x: 0, y: 0, touchX: 0, touchY: 0 });
-  const touchStartPosRef = React2.useRef({ x: 0, y: 0, time: 0 });
   const upPathRef = React2.useRef(null);
   const downPathRef = React2.useRef(null);
   const leftPathRef = React2.useRef(null);
@@ -3413,6 +3516,13 @@ var Dpad = React2__default.default.memo(function Dpad2({
   const centerCircleRef = React2.useRef(null);
   const displayX = customPosition ? customPosition.x : x;
   const displayY = customPosition ? customPosition.y : y;
+  const releaseAllDirections = React2.useCallback((getKeyCode2) => {
+    activeDirectionsRef.current.forEach((dir) => {
+      const keyCode = getKeyCode2(dir);
+      if (keyCode) dispatchKeyboardEvent("keyup", keyCode);
+    });
+    activeDirectionsRef.current = /* @__PURE__ */ new Set();
+  }, []);
   const getKeyCode = React2.useCallback((direction) => {
     if (!controls) {
       const defaults = {
@@ -3425,6 +3535,19 @@ var Dpad = React2__default.default.memo(function Dpad2({
     }
     return controls[direction] || "";
   }, [controls]);
+  const drag = useDrag({
+    elementSize: size,
+    displayX,
+    displayY,
+    containerWidth,
+    containerHeight,
+    onPositionChange,
+    centerThreshold: CENTER_TOUCH_RADIUS,
+    onDragStart: () => {
+      releaseAllDirections(getKeyCode);
+      updateVisuals(/* @__PURE__ */ new Set());
+    }
+  });
   const getDirectionsFromTouch = React2.useCallback((touchX, touchY, rect) => {
     const centerX = rect.left + rect.width / 2;
     const centerY = rect.top + rect.height / 2;
@@ -3486,51 +3609,20 @@ var Dpad = React2__default.default.memo(function Dpad2({
     activeDirectionsRef.current = newDirections;
     updateVisuals(newDirections);
   }, [getKeyCode, updateVisuals]);
-  const clearDragTimer = React2.useCallback(() => {
-    if (dragTimerRef.current) {
-      clearTimeout(dragTimerRef.current);
-      dragTimerRef.current = null;
-    }
-  }, []);
-  const startDragging = React2.useCallback((touchX, touchY) => {
-    setIsDragging(true);
-    dragStartRef.current = {
-      x: displayX,
-      y: displayY,
-      touchX,
-      touchY
-    };
-    activeDirectionsRef.current.forEach((dir) => {
-      const keyCode = getKeyCode(dir);
-      if (keyCode) dispatchKeyboardEvent("keyup", keyCode);
-    });
-    activeDirectionsRef.current = /* @__PURE__ */ new Set();
-    updateVisuals(/* @__PURE__ */ new Set());
-    if (navigator.vibrate) navigator.vibrate([10, 30, 10]);
-  }, [displayX, displayY, getKeyCode, updateVisuals]);
   const handleTouchStart = React2.useCallback((e) => {
     e.preventDefault();
     if (activeTouchRef.current !== null) return;
     const touch = e.changedTouches[0];
     activeTouchRef.current = touch.identifier;
-    touchStartPosRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
     const rect = dpadRef.current?.getBoundingClientRect();
     if (!rect) return;
-    const centerX = rect.left + rect.width / 2;
-    const centerY = rect.top + rect.height / 2;
-    const distFromCenter = Math.sqrt(
-      Math.pow(touch.clientX - centerX, 2) + Math.pow(touch.clientY - centerY, 2)
-    );
-    const centerRadius = size * CENTER_TOUCH_RADIUS;
-    if (distFromCenter < centerRadius && onPositionChange) {
-      dragTimerRef.current = setTimeout(() => {
-        startDragging(touch.clientX, touch.clientY);
-      }, DRAG_HOLD_DELAY2);
+    if (onPositionChange) {
+      drag.checkDragStart(touch.clientX, touch.clientY, rect);
     }
-    if (!isDragging) {
+    if (!drag.isDragging) {
       updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
     }
-  }, [getDirectionsFromTouch, updateDirections, isDragging, size, onPositionChange, startDragging]);
+  }, [getDirectionsFromTouch, updateDirections, onPositionChange, drag]);
   const handleTouchMove = React2.useCallback((e) => {
     e.preventDefault();
     let touch = null;
@@ -3541,31 +3633,19 @@ var Dpad = React2__default.default.memo(function Dpad2({
       }
     }
     if (!touch) return;
-    if (isDragging && onPositionChange) {
-      const deltaX = touch.clientX - dragStartRef.current.touchX;
-      const deltaY = touch.clientY - dragStartRef.current.touchY;
-      const newXPercent = dragStartRef.current.x + deltaX / containerWidth * 100;
-      const newYPercent = dragStartRef.current.y + deltaY / containerHeight * 100;
-      const margin = size / 2 / Math.min(containerWidth, containerHeight) * 100;
-      const constrainedX = Math.max(margin, Math.min(100 - margin, newXPercent));
-      const constrainedY = Math.max(margin, Math.min(100 - margin, newYPercent));
-      onPositionChange(constrainedX, constrainedY);
+    if (drag.isDragging) {
+      drag.handleDragMove(touch.clientX, touch.clientY);
     } else {
-      const moveDistance = Math.sqrt(
-        Math.pow(touch.clientX - touchStartPosRef.current.x, 2) + Math.pow(touch.clientY - touchStartPosRef.current.y, 2)
-      );
-      if (moveDistance > 15) {
-        clearDragTimer();
-      }
       const rect = dpadRef.current?.getBoundingClientRect();
       if (rect) {
+        drag.clearDragTimer();
         updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
       }
     }
-  }, [isDragging, onPositionChange, containerWidth, containerHeight, size, getDirectionsFromTouch, updateDirections, clearDragTimer]);
+  }, [drag, getDirectionsFromTouch, updateDirections]);
   const handleTouchEnd = React2.useCallback((e) => {
     e.preventDefault();
-    clearDragTimer();
+    drag.clearDragTimer();
     let touchEnded = false;
     for (let i = 0; i < e.changedTouches.length; i++) {
       if (e.changedTouches[i].identifier === activeTouchRef.current) {
@@ -3575,8 +3655,8 @@ var Dpad = React2__default.default.memo(function Dpad2({
     }
     if (touchEnded) {
       activeTouchRef.current = null;
-      if (isDragging) {
-        setIsDragging(false);
+      if (drag.isDragging) {
+        drag.handleDragEnd();
       } else {
         activeDirectionsRef.current.forEach((dir) => {
           const keyCode = getKeyCode(dir);
@@ -3586,7 +3666,7 @@ var Dpad = React2__default.default.memo(function Dpad2({
         updateVisuals(/* @__PURE__ */ new Set());
       }
     }
-  }, [getKeyCode, updateVisuals, isDragging, clearDragTimer]);
+  }, [getKeyCode, updateVisuals, drag]);
   React2.useEffect(() => {
     const dpad = dpadRef.current;
     if (!dpad) return;
@@ -3599,9 +3679,9 @@ var Dpad = React2__default.default.memo(function Dpad2({
       dpad.removeEventListener("touchmove", handleTouchMove);
       dpad.removeEventListener("touchend", handleTouchEnd);
       dpad.removeEventListener("touchcancel", handleTouchEnd);
-      clearDragTimer();
+      drag.clearDragTimer();
     };
-  }, [handleTouchStart, handleTouchMove, handleTouchEnd, clearDragTimer]);
+  }, [handleTouchStart, handleTouchMove, handleTouchEnd, drag]);
   const leftPx = displayX / 100 * containerWidth - size / 2;
   const topPx = displayY / 100 * containerHeight - size / 2;
   const dUp = "M 35,5 L 65,5 L 65,35 L 50,50 L 35,35 Z";
@@ -3612,21 +3692,21 @@ var Dpad = React2__default.default.memo(function Dpad2({
     "div",
     {
       ref: dpadRef,
-      className: `absolute pointer-events-auto touch-manipulation select-none ${isDragging ? "opacity-60" : ""}`,
+      className: `absolute pointer-events-auto touch-manipulation select-none ${drag.isDragging ? "opacity-60" : ""}`,
       style: {
         top: 0,
         left: 0,
-        transform: `translate3d(${leftPx}px, ${topPx}px, 0)${isDragging ? " scale(1.05)" : ""}`,
+        transform: `translate3d(${leftPx}px, ${topPx}px, 0)${drag.isDragging ? " scale(1.05)" : ""}`,
         width: size,
         height: size,
         opacity: isLandscape ? 0.75 : 0.9,
         WebkitTouchCallout: "none",
         WebkitUserSelect: "none",
         touchAction: "none",
-        transition: isDragging ? "none" : "transform 0.1s ease-out"
+        transition: drag.isDragging ? "none" : "transform 0.1s ease-out"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-0 rounded-full bg-black/40 backdrop-blur-md border shadow-lg ${isDragging ? "border-white/50 ring-2 ring-white/30" : "border-white/10"}` }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-0 rounded-full bg-black/40 backdrop-blur-md border shadow-lg ${drag.isDragging ? "border-white/50 ring-2 ring-white/30" : "border-white/10"}` }),
         /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 100 100", className: "drop-shadow-xl relative z-10", children: [
           /* @__PURE__ */ jsxRuntime.jsx("path", { ref: upPathRef, d: dUp, fill: "rgba(255,255,255,0.05)", stroke: "rgba(255,255,255,0.2)", strokeWidth: "1", className: "transition-all duration-75" }),
           /* @__PURE__ */ jsxRuntime.jsx("path", { ref: rightPathRef, d: dRight, fill: "rgba(255,255,255,0.05)", stroke: "rgba(255,255,255,0.2)", strokeWidth: "1", className: "transition-all duration-75" }),
@@ -3639,9 +3719,9 @@ var Dpad = React2__default.default.memo(function Dpad2({
               cx: "50",
               cy: "50",
               r: "12",
-              fill: isDragging ? systemColor : "rgba(0,0,0,0.5)",
-              stroke: isDragging ? "#fff" : "rgba(255,255,255,0.3)",
-              strokeWidth: isDragging ? 2 : 1
+              fill: drag.isDragging ? systemColor : "rgba(0,0,0,0.5)",
+              stroke: drag.isDragging ? "#fff" : "rgba(255,255,255,0.3)",
+              strokeWidth: drag.isDragging ? 2 : 1
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 50,15 L 50,25 M 45,20 L 50,15 L 55,20", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", opacity: "0.8", pointerEvents: "none" }),
@@ -4069,6 +4149,45 @@ function FloatingFullscreenButton({ onClick, disabled = false }) {
     }
   );
 }
+function FloatingPauseButton({
+  isPaused,
+  onClick,
+  disabled = false,
+  systemColor = "#00FF41"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: `
+                fixed top-3 left-3 z-50
+                px-3 py-2 rounded-xl
+                bg-black/80 backdrop-blur-md
+                border-2
+                shadow-xl
+                flex items-center gap-2
+                transition-all duration-300
+                hover:scale-105
+                active:scale-95
+                disabled:opacity-40 disabled:cursor-not-allowed
+                touch-manipulation
+            `,
+      style: {
+        paddingTop: "max(env(safe-area-inset-top, 0px), 8px)",
+        borderColor: isPaused ? systemColor : "rgba(255,255,255,0.3)"
+      },
+      "aria-label": isPaused ? "Resume game" : "Pause game",
+      children: isPaused ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { size: 16, style: { color: systemColor }, fill: systemColor }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-xs font-bold uppercase tracking-wider", children: "Play" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { size: 16, className: "text-white/80" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-xs font-bold uppercase tracking-wider", children: "Pause" })
+      ] })
+    }
+  );
+}
 function LoadingSpinner({ color, size = "lg" }) {
   const sizeClass = size === "lg" ? "w-12 h-12" : "w-8 h-8";
   return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: `${sizeClass} animate-spin`, style: { color } });
@@ -9202,6 +9321,14 @@ var GamePlayerInner = React2.memo(function GamePlayerInner2(props) {
               disabled: status === "loading" || status === "error"
             }
           ),
+          isFullscreen2 && isMobile && (status === "running" || status === "paused") && /* @__PURE__ */ jsxRuntime.jsx(
+            FloatingPauseButton,
+            {
+              isPaused,
+              onClick: handlePauseToggle,
+              systemColor
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 z-40 flex flex-col items-end gap-2 pointer-events-auto", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               RecordingIndicator_default,