@buoy-gg/core 1.7.7 → 2.1.1

package/lib/commonjs/floatingMenu/floatingTools.js

@@ -104,8 +104,9 @@ const STORAGE_KEYS = {
  * @param props.enabled - Whether position persistence is enabled
  * @param props.visibleHandleWidth - Width of visible handle when bubble is hidden
  * @param props.listenersSuspended - Pause automatic listeners without disabling manual saves
+ * @param props.onPositionLoaded - Callback fired once position is loaded and set
  *
- * @returns Object containing position management functions
+ * @returns Object containing position management functions and loading state
  *
  * @performance Uses debounced saving to avoid excessive storage operations
  * @performance Validates positions against screen boundaries and safe areas
@@ -116,26 +117,57 @@ function useFloatingToolsPosition({
   bubbleHeight = 32,
   enabled = true,
   visibleHandleWidth = 32,
-  listenersSuspended = false
+  listenersSuspended = false,
+  onPositionLoaded
 }) {
-  const isInitialized = (0, _react.useRef)(false);
+  // Use state instead of ref so we can react to changes and prevent races
+  const [isInitialized, setIsInitialized] = (0, _react.useState)(false);
   const saveTimeoutRef = (0, _react.useRef)(undefined);
+  // Track if component is mounted to prevent state updates after unmount
+  const isMountedRef = (0, _react.useRef)(true);
+
+  // Cleanup on unmount - cancel any pending saves
+  (0, _react.useEffect)(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      // Clear any pending debounced saves on unmount to prevent saving stale/invalid positions
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+        saveTimeoutRef.current = undefined;
+      }
+    };
+  }, []);
   const savePosition = (0, _react.useCallback)(async (x, y) => {
     if (!enabled) return;
+    // Don't save if component unmounted or position is clearly invalid
+    if (!isMountedRef.current) return;
+    // Guard against saving invalid positions (e.g., during HMR with stale dimensions)
+    const {
+      width: screenWidth
+    } = _reactNative.Dimensions.get("window");
+    if (screenWidth <= 0 || x < 0 || y < 0) return;
     try {
-      await Promise.all([(0, _sharedUi.safeSetItem)(STORAGE_KEYS.BUBBLE_POSITION_X, x.toString()), (0, _sharedUi.safeSetItem)(STORAGE_KEYS.BUBBLE_POSITION_Y, y.toString())]);
+      await Promise.all([_sharedUi.persistentStorage.setItem(STORAGE_KEYS.BUBBLE_POSITION_X, x.toString()), _sharedUi.persistentStorage.setItem(STORAGE_KEYS.BUBBLE_POSITION_Y, y.toString())]);
     } catch (error) {
       // Failed to save position - continue without persistence
     }
   }, [enabled]);
   const debouncedSavePosition = (0, _react.useCallback)((x, y) => {
+    // Don't schedule saves if unmounted
+    if (!isMountedRef.current) return;
     if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
-    saveTimeoutRef.current = setTimeout(() => savePosition(x, y), 500);
+    saveTimeoutRef.current = setTimeout(() => {
+      // Double-check mount status before saving
+      if (isMountedRef.current) {
+        savePosition(x, y);
+      }
+    }, 500);
   }, [savePosition]);
   const loadPosition = (0, _react.useCallback)(async () => {
     if (!enabled) return null;
     try {
-      const [xStr, yStr] = await Promise.all([(0, _sharedUi.safeGetItem)(STORAGE_KEYS.BUBBLE_POSITION_X), (0, _sharedUi.safeGetItem)(STORAGE_KEYS.BUBBLE_POSITION_Y)]);
+      const [xStr, yStr] = await Promise.all([_sharedUi.persistentStorage.getItem(STORAGE_KEYS.BUBBLE_POSITION_X), _sharedUi.persistentStorage.getItem(STORAGE_KEYS.BUBBLE_POSITION_Y)]);
       if (xStr !== null && yStr !== null) {
         const x = parseFloat(xStr);
         const y = parseFloat(yStr);
@@ -155,6 +187,16 @@ function useFloatingToolsPosition({
       height: screenHeight
     } = _reactNative.Dimensions.get("window");
     const safeArea = (0, _sharedUi.getSafeAreaInsets)();
+
+    // Guard against invalid screen dimensions (can happen during HMR)
+    // Return the position as-is but mark as invalid so caller knows not to trust it
+    if (screenWidth <= 0 || screenHeight <= 0) {
+      return {
+        ...position,
+        isValid: false
+      };
+    }
+
     // Prevent going off left, top, and bottom edges with safe area
     // Allow pushing off-screen to the right so only the grab handle remains visible
     const minX = safeArea.left; // Respect safe area left
@@ -164,53 +206,103 @@ function useFloatingToolsPosition({
     const maxY = screenHeight - bubbleHeight - safeArea.bottom; // Respect safe area bottom
     const clamped = {
       x: Math.max(minX, Math.min(position.x, maxX)),
-      y: Math.max(minY, Math.min(position.y, maxY))
+      y: Math.max(minY, Math.min(position.y, maxY)),
+      isValid: true
     };
     return clamped;
   }, [visibleHandleWidth, bubbleHeight]);
   (0, _react.useEffect)(() => {
-    if (!enabled || isInitialized.current) return;
+    if (!enabled || isInitialized) return;
+    let cancelled = false;
     const restore = async () => {
       const saved = await loadPosition();
+
+      // Check if cancelled or unmounted before updating state
+      if (cancelled || !isMountedRef.current) return;
+      const {
+        width: screenWidth,
+        height: screenHeight
+      } = _reactNative.Dimensions.get("window");
+      const safeArea = (0, _sharedUi.getSafeAreaInsets)();
+
+      // If dimensions are invalid (HMR scenario), wait and retry
+      if (screenWidth <= 0 || screenHeight <= 0) {
+        // Schedule a retry after a short delay
+        setTimeout(() => {
+          if (isMountedRef.current && !cancelled) {
+            restore();
+          }
+        }, 100);
+        return;
+      }
+      let finalPosition;
+      let wasHidden = false;
       if (saved) {
         const validated = validatePosition(saved);
+
+        // If validation returned invalid, retry later
+        if (!validated.isValid) {
+          setTimeout(() => {
+            if (isMountedRef.current && !cancelled) {
+              restore();
+            }
+          }, 100);
+          return;
+        }
+
         // Check if the saved position is out of bounds
         const wasOutOfBounds = Math.abs(saved.x - validated.x) > 5 || Math.abs(saved.y - validated.y) > 5;
         if (wasOutOfBounds) {
           // Save the corrected position
           await savePosition(validated.x, validated.y);
         }
-        animatedPosition.setValue(validated);
+        finalPosition = {
+          x: validated.x,
+          y: validated.y
+        };
+
+        // Check if loaded in hidden state (bubble pushed to right edge)
+        wasHidden = validated.x >= screenWidth - visibleHandleWidth - 5;
       } else {
-        const {
-          width: screenWidth,
-          height: screenHeight
-        } = _reactNative.Dimensions.get("window");
-        const safeArea = (0, _sharedUi.getSafeAreaInsets)();
         const defaultY = Math.max(safeArea.top + 20, Math.min(100, screenHeight - bubbleHeight - safeArea.bottom));
-        animatedPosition.setValue({
+        finalPosition = {
           x: screenWidth - bubbleWidth - 20,
-          y: defaultY // Ensure it's within safe area bounds
-        });
+          y: defaultY
+        };
       }
-      isInitialized.current = true;
+
+      // Final mount check before updating
+      if (cancelled || !isMountedRef.current) return;
+      animatedPosition.setValue(finalPosition);
+      setIsInitialized(true);
+      onPositionLoaded?.(finalPosition, wasHidden);
     };
     restore();
-  }, [enabled, animatedPosition, loadPosition, validatePosition, savePosition, bubbleWidth, bubbleHeight]);
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, isInitialized, animatedPosition, loadPosition, validatePosition, savePosition, bubbleWidth, bubbleHeight, visibleHandleWidth, onPositionLoaded]);
+
+  // Listener effect - now properly depends on isInitialized state
   (0, _react.useEffect)(() => {
-    if (!enabled || !isInitialized.current || listenersSuspended) return;
+    // Don't attach listener until position is loaded
+    if (!enabled || !isInitialized || listenersSuspended) return;
     const listener = animatedPosition.addListener(value => {
       debouncedSavePosition(value.x, value.y);
     });
     return () => {
       animatedPosition.removeListener(listener);
-      if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
+      // Clear debounce timer when listener is removed
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+        saveTimeoutRef.current = undefined;
+      }
     };
-  }, [enabled, listenersSuspended, animatedPosition, debouncedSavePosition]);
+  }, [enabled, isInitialized, listenersSuspended, animatedPosition, debouncedSavePosition]);
   return {
     savePosition,
     loadPosition,
-    isInitialized: isInitialized.current
+    isInitialized
   };
 }
 
@@ -391,26 +483,41 @@ function FloatingTools({
 
   // Track previous pushToSide value to detect transitions
   const prevPushToSideRef = (0, _react.useRef)(pushToSide);
+
+  // Track previous bubble width for auto-adjustment when tools are added/removed
+  const prevBubbleWidthRef = (0, _react.useRef)(null);
   const safeAreaInsets = (0, _sharedUi.useSafeAreaInsets)();
   const {
     width: screenWidth,
     height: screenHeight
   } = _reactNative.Dimensions.get("window");
 
+  // Callback when position is loaded - sets hidden state properly without racing
+  const handlePositionLoaded = (0, _react.useCallback)((position, wasHidden) => {
+    if (wasHidden) {
+      setIsHidden(true);
+    }
+  }, []);
+
   // Position persistence (state/IO extracted to hook)
   const {
-    savePosition
+    savePosition,
+    isInitialized: isPositionInitialized
   } = useFloatingToolsPosition({
     animatedPosition,
     bubbleWidth: bubbleSize.width,
     bubbleHeight: bubbleSize.height,
     enabled: enablePositionPersistence,
     visibleHandleWidth: 32,
-    listenersSuspended: isDragging
+    listenersSuspended: isDragging,
+    onPositionLoaded: handlePositionLoaded
   });
 
   // Effect to handle pushToSide prop changes
   (0, _react.useEffect)(() => {
+    // Don't process pushToSide until position is initialized (when persistence enabled)
+    if (enablePositionPersistence && !isPositionInitialized) return;
+
     // Reset user override when pushToSide becomes true (dial/modal opens)
     // This allows auto-hide to work after user manually showed the menu
     if (!prevPushToSideRef.current && pushToSide) {
@@ -468,22 +575,77 @@ function FloatingTools({
         });
       }
     }
-  }, [pushToSide, isHidden, isDragging, screenWidth, animatedPosition, savePosition]);
+  }, [enablePositionPersistence, isPositionInitialized, pushToSide, isHidden, isDragging, screenWidth, animatedPosition, savePosition]);
+
+  // Hidden state is now set via onPositionLoaded callback - no racing effect needed
 
-  // Check if bubble is in hidden position on load
+  // Auto-adjust position when bubble width changes (tools added/removed)
+  // This keeps the bubble's right edge in the same relative position
   (0, _react.useEffect)(() => {
-    if (!enablePositionPersistence) return;
-    const checkHiddenState = () => {
-      const currentX = animatedPosition.x.__getValue();
-      // Check if bubble is at the hidden position (showing only grabber)
-      if (currentX >= screenWidth - 32 - 5) {
-        setIsHidden(true);
+    // Skip if not initialized or first measurement
+    if (!isPositionInitialized || prevBubbleWidthRef.current === null) {
+      prevBubbleWidthRef.current = bubbleSize.width;
+      return;
+    }
+
+    // Skip if currently dragging - let drag handle position
+    if (isDragging) {
+      prevBubbleWidthRef.current = bubbleSize.width;
+      return;
+    }
+    const prevWidth = prevBubbleWidthRef.current;
+    const newWidth = bubbleSize.width;
+    const widthDelta = newWidth - prevWidth;
+
+    // Skip if no significant change (avoid jitter)
+    if (Math.abs(widthDelta) < 2) {
+      return;
+    }
+
+    // Update ref first
+    prevBubbleWidthRef.current = newWidth;
+
+    // If hidden, only adjust the saved position (not the current animated position)
+    if (isHidden) {
+      if (savedPositionRef.current) {
+        const adjustedX = savedPositionRef.current.x - widthDelta;
+        // Clamp to valid bounds
+        savedPositionRef.current.x = Math.max(safeAreaInsets.left, Math.min(adjustedX, screenWidth - newWidth - 20));
       }
-    };
-    // Delay check to ensure position is loaded
-    const timer = setTimeout(checkHiddenState, 100);
-    return () => clearTimeout(timer);
-  }, [enablePositionPersistence, animatedPosition, screenWidth]);
+      return;
+    }
+
+    // Get current position
+    const currentX = animatedPosition.x.__getValue();
+    const currentY = animatedPosition.y.__getValue();
+
+    // Calculate new X position
+    // If bubble grew (positive delta), move left (decrease X)
+    // If bubble shrunk (negative delta), move right (increase X)
+    const newX = currentX - widthDelta;
+
+    // Validate new position is within bounds
+    const clampedX = Math.max(safeAreaInsets.left, Math.min(newX, screenWidth - 32) // Ensure handle still visible
+    );
+
+    // Only animate if position actually changed
+    if (Math.abs(clampedX - currentX) > 1) {
+      _reactNative.Animated.timing(animatedPosition, {
+        toValue: {
+          x: clampedX,
+          y: currentY
+        },
+        duration: 150,
+        useNativeDriver: false
+      }).start(() => {
+        savePosition(clampedX, currentY);
+        // Update savedPositionRef so show/hide works correctly
+        if (savedPositionRef.current) {
+          savedPositionRef.current.x = clampedX;
+        }
+      });
+    }
+  }, [bubbleSize.width, isPositionInitialized, isDragging, isHidden, animatedPosition, screenWidth, safeAreaInsets.left, savePosition]);
 
   // Default position when persistence disabled or during onboarding
   (0, _react.useEffect)(() => {
@@ -594,6 +756,18 @@ function FloatingTools({
       // Animate to hidden position (only grabber visible)
       const hiddenX = screenWidth - 32; // Only show the 32px grabber
       setIsHidden(true);
+
+      // Update savedPositionRef to preserve the Y position when dragging while hidden
+      // This ensures that when showing, the bubble restores to the new Y position
+      if (savedPositionRef.current) {
+        savedPositionRef.current.y = currentY;
+      } else {
+        // If no saved position exists, create one with default visible X
+        savedPositionRef.current = {
+          x: screenWidth - bubbleSize.width - 20,
+          y: currentY
+        };
+      }
       _reactNative.Animated.timing(animatedPosition, {
         toValue: {
           x: hiddenX,
@@ -694,6 +868,12 @@ function FloatingTools({
 
   // Width for the minimized tools stack - match the drag handle width
   const minimizedStackWidth = 32;
+
+  // Don't render until position is initialized (when persistence enabled)
+  // This prevents the bubble from appearing at {0,0} before position loads
+  if (enablePositionPersistence && !isPositionInitialized) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
     style: bubbleStyle,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {