@buoy-gg/core 1.7.8 → 2.1.1

package/lib/commonjs/floatingMenu/AppHost.js

@@ -92,7 +92,7 @@ const AppHostProvider = ({
   (0, _react.useEffect)(() => {
     const restoreOpenApps = async () => {
       try {
-        const saved = await (0, _sharedUi.safeGetItem)(STORAGE_KEY_OPEN_APPS);
+        const saved = await _sharedUi.persistentStorage.getItem(STORAGE_KEY_OPEN_APPS);
         if (saved) {
           const parsed = JSON.parse(saved);
           // Handle both old format (string[]) and new format (PersistedAppState[])
@@ -138,7 +138,7 @@ const AppHostProvider = ({
         id: app.id,
         minimized: app.minimized ?? false
       }));
-      (0, _sharedUi.safeSetItem)(STORAGE_KEY_OPEN_APPS, JSON.stringify(appStates));
+      _sharedUi.persistentStorage.setItem(STORAGE_KEY_OPEN_APPS, JSON.stringify(appStates));
     }, PERSISTENCE_DELAY);
     return () => {
       if (persistenceTimeoutRef.current) {

package/lib/commonjs/floatingMenu/DevToolsSettingsModal.js

@@ -184,7 +184,7 @@ const DevToolsSettingsModal = ({
   (0, _react.useEffect)(() => {
     const loadActiveTab = async () => {
       try {
-        const savedTab = await (0, _sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.settings.activeTab());
+        const savedTab = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.settings.activeTab());
         if (savedTab && ["dial", "floating", "settings", "pro"].includes(savedTab)) {
           setActiveTab(savedTab);
         }
@@ -201,7 +201,7 @@ const DevToolsSettingsModal = ({
   (0, _react.useEffect)(() => {
     // Only persist after initial state is loaded to avoid overwriting with default
     if (!activeTabLoaded) return;
-    (0, _sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.settings.activeTab(), activeTab).catch(error => {
+    _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.settings.activeTab(), activeTab).catch(error => {
       // Failed to save active tab - continue without persistence
       console.warn("Failed to save settings active tab:", error);
     });
@@ -244,7 +244,7 @@ const DevToolsSettingsModal = ({
 
   const loadSettings = (0, _react.useCallback)(async () => {
     try {
-      const savedSettings = await (0, _sharedUi.safeGetItem)(STORAGE_KEY);
+      const savedSettings = await _sharedUi.persistentStorage.getItem(STORAGE_KEY);
       if (savedSettings) {
         const parsed = JSON.parse(savedSettings);
         const merged = mergeWithDefaults(defaultSettings, parsed, {
@@ -288,7 +288,7 @@ const DevToolsSettingsModal = ({
         ...newSettings,
         dialTools: enforceDialLimit(newSettings.dialTools)
       };
-      await (0, _sharedUi.safeSetItem)(STORAGE_KEY, JSON.stringify(limitedSettings));
+      await _sharedUi.persistentStorage.setItem(STORAGE_KEY, JSON.stringify(limitedSettings));
       setSettings(limitedSettings);
       onSettingsChange?.(limitedSettings);
       // Notify listeners (e.g., floating bubble) to refresh immediately
@@ -1438,7 +1438,7 @@ const useDevToolsSettings = () => {
   const [settings, setSettings] = (0, _react.useState)(effectiveDefaults);
   const loadSettings = (0, _react.useCallback)(async () => {
     try {
-      const savedSettings = await (0, _sharedUi.safeGetItem)(STORAGE_KEY);
+      const savedSettings = await _sharedUi.persistentStorage.getItem(STORAGE_KEY);
       if (savedSettings) {
         const parsed = JSON.parse(savedSettings);
         const merged = mergeWithDefaults(effectiveDefaults, parsed);

package/lib/commonjs/floatingMenu/FloatingDevTools.web.js

@@ -141,9 +141,8 @@ function FloatingDevTools({
       visible: isSettingsOpen,
       onClose: handleCloseSettings,
       availableTools: availableTools,
-      onSettingsChange: newSettings => {
+      onSettingsChange: _newSettings => {
         // Settings are already saved by the hook
-        console.log('Settings updated:', newSettings);
       }
     })]
   });

package/lib/commonjs/floatingMenu/FloatingMenu.js

@@ -53,7 +53,7 @@ const FloatingMenu = ({
   (0, _react.useEffect)(() => {
     const loadDialState = async () => {
       try {
-        const savedDialOpen = await (0, _sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.dial.isOpen());
+        const savedDialOpen = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.dial.isOpen());
         if (savedDialOpen === "true") {
           setShowDial(true);
         }
@@ -70,7 +70,7 @@ const FloatingMenu = ({
   (0, _react.useEffect)(() => {
     // Only persist after initial state is loaded to avoid overwriting with default
     if (!dialStateLoaded) return;
-    (0, _sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.dial.isOpen(), showDial ? "true" : "false").catch(error => {
+    _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.dial.isOpen(), showDial ? "true" : "false").catch(error => {
       // Failed to save dial state - continue without persistence
       console.warn("Failed to save dial state:", error);
     });
@@ -97,7 +97,7 @@ const FloatingMenu = ({
     }
     const checkOnboarding = async () => {
       try {
-        const hasSeenOnboarding = await (0, _sharedUi.safeGetItem)(FLOATING_MENU_ONBOARDING_KEY);
+        const hasSeenOnboarding = await _sharedUi.persistentStorage.getItem(FLOATING_MENU_ONBOARDING_KEY);
         if (!hasSeenOnboarding) {
           // Small delay to let the UI settle before showing tooltip
           setTimeout(() => {
@@ -202,7 +202,7 @@ const FloatingMenu = ({
     setOnboardingStep(null);
 
     // Save to storage asynchronously in the background
-    (0, _sharedUi.safeSetItem)(FLOATING_MENU_ONBOARDING_KEY, "true").catch(error => {
+    _sharedUi.persistentStorage.setItem(FLOATING_MENU_ONBOARDING_KEY, "true").catch(error => {
       // Silently fail - user already saw onboarding, just won't persist
       console.warn("Failed to save onboarding state:", error);
     });

package/lib/commonjs/floatingMenu/MinimizedToolsContext.js

@@ -115,7 +115,7 @@ function MinimizedToolsProvider({
   (0, _react.useEffect)(() => {
     const restoreMinimizedTools = async () => {
       try {
-        const saved = await (0, _sharedUi.safeGetItem)(STORAGE_KEY);
+        const saved = await _sharedUi.persistentStorage.getItem(STORAGE_KEY);
         if (saved) {
           const serialized = JSON.parse(saved);
           // Reconstruct tools with icons
@@ -145,7 +145,7 @@ function MinimizedToolsProvider({
         icon,
         ...rest
       }) => rest);
-      (0, _sharedUi.safeSetItem)(STORAGE_KEY, JSON.stringify(serialized));
+      _sharedUi.persistentStorage.setItem(STORAGE_KEY, JSON.stringify(serialized));
     }, PERSISTENCE_DELAY);
     return () => {
       if (persistenceTimeoutRef.current) {

package/lib/commonjs/floatingMenu/autoDiscoverPresets.js

@@ -194,6 +194,21 @@ function autoDiscoverPresets() {
         return null;
       }
     }
+  },
+  // Events Timeline
+  {
+    name: "@buoy-gg/events",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          eventsToolPreset
+        } = require("@buoy-gg/events");
+        return eventsToolPreset;
+      } catch {
+        return null;
+      }
+    }
   }];
 
   // Attempt to load each preset

package/lib/commonjs/floatingMenu/dial/DialDevTools.js

@@ -60,7 +60,7 @@ const DialDevTools = ({
   (0, _react.useEffect)(() => {
     const loadSettingsModalState = async () => {
       try {
-        const savedModalOpen = await (0, _sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.settings.modalOpen());
+        const savedModalOpen = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.settings.modalOpen());
         if (savedModalOpen === "true") {
           setIsSettingsModalOpen(true);
         }
@@ -77,7 +77,7 @@ const DialDevTools = ({
   (0, _react.useEffect)(() => {
     // Only persist after initial state is loaded to avoid overwriting with default
     if (!settingsModalStateLoaded) return;
-    (0, _sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.settings.modalOpen(), isSettingsModalOpen ? "true" : "false").catch(error => {
+    _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.settings.modalOpen(), isSettingsModalOpen ? "true" : "false").catch(error => {
       // Failed to save settings modal state - continue without persistence
       console.warn("Failed to save settings modal state:", error);
     });
@@ -112,7 +112,7 @@ const DialDevTools = ({
     }
     const checkOnboarding = async () => {
       try {
-        const hasSeenTooltip = await (0, _sharedUi.safeGetItem)(ONBOARDING_STORAGE_KEY);
+        const hasSeenTooltip = await _sharedUi.persistentStorage.getItem(ONBOARDING_STORAGE_KEY);
         if (!hasSeenTooltip) {
           // Small delay to let the entrance animations play first
           setTimeout(() => {
@@ -411,7 +411,7 @@ const DialDevTools = ({
     setShowOnboardingTooltip(false);
 
     // Save to storage asynchronously in the background
-    (0, _sharedUi.safeSetItem)(ONBOARDING_STORAGE_KEY, "true").catch(error => {
+    _sharedUi.persistentStorage.setItem(ONBOARDING_STORAGE_KEY, "true").catch(error => {
       // Silently fail - user already saw onboarding, just won't persist
       console.warn("Failed to save dial onboarding state:", error);
     });

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, {

package/lib/module/floatingMenu/AppHost.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { safeGetItem, safeSetItem } from "@buoy-gg/shared-ui";
+import { persistentStorage } from "@buoy-gg/shared-ui";
 import React, { createContext, useCallback, useContext, useMemo, useState, useEffect, useRef } from "react";
 import { BackHandler, Modal, StyleSheet, View } from "react-native";
 import { resolveOpenAppsState } from "./AppHostLogic.js";
@@ -87,7 +87,7 @@ export const AppHostProvider = ({
   useEffect(() => {
     const restoreOpenApps = async () => {
       try {
-        const saved = await safeGetItem(STORAGE_KEY_OPEN_APPS);
+        const saved = await persistentStorage.getItem(STORAGE_KEY_OPEN_APPS);
         if (saved) {
           const parsed = JSON.parse(saved);
           // Handle both old format (string[]) and new format (PersistedAppState[])
@@ -133,7 +133,7 @@ export const AppHostProvider = ({
         id: app.id,
         minimized: app.minimized ?? false
       }));
-      safeSetItem(STORAGE_KEY_OPEN_APPS, JSON.stringify(appStates));
+      persistentStorage.setItem(STORAGE_KEY_OPEN_APPS, JSON.stringify(appStates));
     }, PERSISTENCE_DELAY);
     return () => {
       if (persistenceTimeoutRef.current) {

package/lib/module/floatingMenu/DevToolsSettingsModal.js

@@ -3,10 +3,10 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Dimensions } from "react-native";
 import { settingsBus } from "./settingsBus.js";
-import { SentryBugIcon, WifiCircuitIcon, BenchmarkIcon, RenderCountIcon, Info, Layers, ChevronRightIcon, ChevronDown, safeGetItem, safeSetItem, getStorageBackendType, persistentStorage, Database, Trash2, CheckCircle2, AlertTriangle, Zap, FileText, HardDrive, Copy, FileCode, RefreshCw, Smartphone, Plus, copyToClipboard, LicenseEntryModal, SectionHeader } from "@buoy-gg/shared-ui";
+import { SentryBugIcon, WifiCircuitIcon, BenchmarkIcon, RenderCountIcon, Info, Layers, ChevronRightIcon, ChevronDown, getStorageBackendType, persistentStorage, Database, Trash2, CheckCircle2, AlertTriangle, Zap, FileText, HardDrive, Copy, FileCode, RefreshCw, Smartphone, Plus, copyToClipboard, LicenseEntryModal, SectionHeader } from "@buoy-gg/shared-ui";
 import { EnvIcon, StorageIcon, RoutesIcon, NetworkIcon, QueryIcon, HighlighterIcon, ReduxIcon } from "@buoy-gg/floating-tools-core";
 import { useDefaultConfig } from "./DefaultConfigContext.js";
-import { JsModal, devToolsStorageKeys, safeGetItem as sharedSafeGetItem, safeSetItem as sharedSafeSetItem } from "@buoy-gg/shared-ui";
+import { JsModal, devToolsStorageKeys } from "@buoy-gg/shared-ui";
 import { useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import { ModalHeader } from "@buoy-gg/shared-ui";
 import { TabSelector } from "@buoy-gg/shared-ui";
@@ -185,7 +185,7 @@ export const DevToolsSettingsModal = ({
   useEffect(() => {
     const loadActiveTab = async () => {
       try {
-        const savedTab = await sharedSafeGetItem(devToolsStorageKeys.settings.activeTab());
+        const savedTab = await persistentStorage.getItem(devToolsStorageKeys.settings.activeTab());
         if (savedTab && ["dial", "floating", "settings", "pro"].includes(savedTab)) {
           setActiveTab(savedTab);
         }
@@ -202,7 +202,7 @@ export const DevToolsSettingsModal = ({
   useEffect(() => {
     // Only persist after initial state is loaded to avoid overwriting with default
     if (!activeTabLoaded) return;
-    sharedSafeSetItem(devToolsStorageKeys.settings.activeTab(), activeTab).catch(error => {
+    persistentStorage.setItem(devToolsStorageKeys.settings.activeTab(), activeTab).catch(error => {
       // Failed to save active tab - continue without persistence
       console.warn("Failed to save settings active tab:", error);
     });
@@ -245,7 +245,7 @@ export const DevToolsSettingsModal = ({
 
   const loadSettings = useCallback(async () => {
     try {
-      const savedSettings = await safeGetItem(STORAGE_KEY);
+      const savedSettings = await persistentStorage.getItem(STORAGE_KEY);
       if (savedSettings) {
         const parsed = JSON.parse(savedSettings);
         const merged = mergeWithDefaults(defaultSettings, parsed, {
@@ -289,7 +289,7 @@ export const DevToolsSettingsModal = ({
         ...newSettings,
         dialTools: enforceDialLimit(newSettings.dialTools)
       };
-      await safeSetItem(STORAGE_KEY, JSON.stringify(limitedSettings));
+      await persistentStorage.setItem(STORAGE_KEY, JSON.stringify(limitedSettings));
       setSettings(limitedSettings);
       onSettingsChange?.(limitedSettings);
       // Notify listeners (e.g., floating bubble) to refresh immediately
@@ -1438,7 +1438,7 @@ export const useDevToolsSettings = () => {
   const [settings, setSettings] = useState(effectiveDefaults);
   const loadSettings = useCallback(async () => {
     try {
-      const savedSettings = await safeGetItem(STORAGE_KEY);
+      const savedSettings = await persistentStorage.getItem(STORAGE_KEY);
       if (savedSettings) {
         const parsed = JSON.parse(savedSettings);
         const merged = mergeWithDefaults(effectiveDefaults, parsed);

package/lib/module/floatingMenu/FloatingDevTools.web.js

@@ -137,9 +137,8 @@ export function FloatingDevTools({
       visible: isSettingsOpen,
       onClose: handleCloseSettings,
       availableTools: availableTools,
-      onSettingsChange: newSettings => {
+      onSettingsChange: _newSettings => {
         // Settings are already saved by the hook
-        console.log('Settings updated:', newSettings);
       }
     })]
   });