@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/commonjs/ui/floating/FloatingTool.js

@@ -1,1010 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Divider = Divider;
-exports.FloatingTool = FloatingTool;
-exports.UserStatus = UserStatus;
-exports.getBubbleAnchorPosition = getBubbleAnchorPosition;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _nightTheme = require("../night/nightTheme.js");
-var _DraggableHeader = require("../components/DraggableHeader.js");
-var _EnvironmentSelectorInline = require("../../env/EnvironmentSelectorInline");
-var _GripVerticalIcon = require("../components/GripVerticalIcon.js");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
-var _index = require("../../utils/index.js");
-var _index2 = require("../../hooks/index.js");
-var _onboardingConstants = require("./onboardingConstants");
-var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
-var _jsxRuntime = require("react/jsx-runtime");
-// Shared utilities from floating-tools-core
-
-// Re-export UserRole type for consumers
-
-// Using Views to render grip dots; no react-native-svg dependency
-
-const STORAGE_KEYS = {
-  BUBBLE_POSITION_X: "@react_buoy_bubble_position_x",
-  BUBBLE_POSITION_Y: "@react_buoy_bubble_position_y"
-};
-
-// Position constants
-const VISIBLE_HANDLE_WIDTH = 32;
-const EDGE_PADDING = 20;
-const LAYOUT_SETTLE_DELAY_MS = 150;
-
-/** Helper to get current value from Animated.Value without triggering updates */
-const getAnimatedValue = value => value.__getValue();
-
-// =============================
-// Position persistence hook
-// Extracted logic dedicated to state/IO
-// =============================
-/**
- * Custom hook for managing floating tools position persistence
- *
- * Handles loading, saving, and validating the position of the floating tools bubble
- * with automatic boundary checking and storage management.
- *
- * @param props - Configuration for position management
- * @param props.animatedPosition - Animated.ValueXY for position updates
- * @param props.bubbleWidth - Width of the bubble for boundary calculations
- * @param props.bubbleHeight - Height of the bubble for boundary calculations
- * @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 and loading state
- *
- * @performance Uses debounced saving to avoid excessive storage operations
- * @performance Validates positions against screen boundaries and safe areas
- */
-function useFloatingToolsPosition({
-  animatedPosition,
-  bubbleWidth = 100,
-  bubbleHeight = 32,
-  enabled = true,
-  visibleHandleWidth = 32,
-  listenersSuspended = false,
-  defaultPlacement = "top",
-  onPositionLoaded,
-  storageKey
-}) {
-  // 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([_index.persistentStorage.setItem(storageKey ? `${storageKey}:x` : STORAGE_KEYS.BUBBLE_POSITION_X, x.toString()), _index.persistentStorage.setItem(storageKey ? `${storageKey}:y` : STORAGE_KEYS.BUBBLE_POSITION_Y, y.toString())]);
-    } catch (error) {
-      // Failed to save position - continue without persistence
-    }
-  }, [enabled, storageKey]);
-  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(() => {
-      // 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([_index.persistentStorage.getItem(storageKey ? `${storageKey}:x` : STORAGE_KEYS.BUBBLE_POSITION_X), _index.persistentStorage.getItem(storageKey ? `${storageKey}:y` : STORAGE_KEYS.BUBBLE_POSITION_Y)]);
-      if (xStr !== null && yStr !== null) {
-        const x = parseFloat(xStr);
-        const y = parseFloat(yStr);
-        if (!Number.isNaN(x) && !Number.isNaN(y)) {
-          return {
-            x,
-            y
-          };
-        }
-      }
-    } catch (error) {
-      // Failed to load position - use default
-    }
-    return null;
-  }, [enabled, storageKey]);
-  const validatePosition = (0, _react.useCallback)(position => {
-    const {
-      width: screenWidth,
-      height: screenHeight
-    } = _reactNative.Dimensions.get("window");
-    const safeArea = (0, _index.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;
-    const maxX = screenWidth - visibleHandleWidth;
-    // Add padding below the safe area top to ensure bubble doesn't go behind notch
-    const minY = safeArea.top + EDGE_PADDING;
-    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)),
-      isValid: true
-    };
-    return clamped;
-  }, [visibleHandleWidth, bubbleHeight]);
-  (0, _react.useEffect)(() => {
-    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, _index.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);
-        }
-        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 defaultY = defaultPlacement === "bottom" ? Math.max(safeArea.top + EDGE_PADDING, screenHeight - bubbleHeight - safeArea.bottom - EDGE_PADDING) : Math.max(safeArea.top + EDGE_PADDING, Math.min(100, screenHeight - bubbleHeight - safeArea.bottom));
-        finalPosition = {
-          x: screenWidth - bubbleWidth - EDGE_PADDING,
-          y: defaultY
-        };
-      }
-
-      // Final mount check before updating
-      if (cancelled || !isMountedRef.current) return;
-      animatedPosition.setValue(finalPosition);
-      setIsInitialized(true);
-      onPositionLoaded?.(finalPosition, wasHidden);
-    };
-    restore();
-    return () => {
-      cancelled = true;
-    };
-  }, [enabled, isInitialized, animatedPosition, loadPosition, validatePosition, savePosition, bubbleWidth, bubbleHeight, visibleHandleWidth, onPositionLoaded]);
-
-  // Listener effect - now properly depends on isInitialized state
-  (0, _react.useEffect)(() => {
-    // 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);
-      // Clear debounce timer when listener is removed
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current);
-        saveTimeoutRef.current = undefined;
-      }
-    };
-  }, [enabled, isInitialized, listenersSuspended, animatedPosition, debouncedSavePosition]);
-  return {
-    savePosition,
-    isInitialized
-  };
-}
-
-// =============================
-// UI-only leaf components
-// =============================
-function Divider() {
-  const dividerStyle = {
-    width: 1,
-    height: 12,
-    backgroundColor: _gameUIColors.buoyColors.textMuted + "66",
-    flexShrink: 0
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: dividerStyle
-  });
-}
-
-// Use shared getUserStatusConfig from floating-tools-core
-// Wraps the core function to use our buoyColors (mapped to gameUIColors format)
-const gameUIColorsCompat = {
-  success: "#20C997",
-  // teal
-  warning: "#FFA94D",
-  error: "#EF4444",
-  muted: _gameUIColors.buoyColors.textMuted,
-  secondary: _gameUIColors.buoyColors.textSecondary,
-  info: "#20C997",
-  // teal
-  primary: "#20C997",
-  optional: _gameUIColors.buoyColors.textSecondary // optional status color
-};
-function getUserStatusConfig(userRole) {
-  return (0, _floatingToolsCore.getUserStatusConfig)(userRole, gameUIColorsCompat);
-}
-
-// Context to avoid brittle prop threading and keep API composable
-const FloatingToolsContext = /*#__PURE__*/(0, _react.createContext)({
-  isDragging: false
-});
-function UserStatus({
-  userRole,
-  onPress
-}) {
-  const {
-    isDragging
-  } = (0, _react.useContext)(FloatingToolsContext);
-  const config = getUserStatusConfig(userRole);
-  const containerStyle = {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 6,
-    paddingHorizontal: 8,
-    flexShrink: 0
-  };
-  const dotStyle = {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    backgroundColor: config.dotColor,
-    marginRight: 4
-  };
-  const textStyle = {
-    fontSize: 10,
-    fontWeight: "500",
-    color: config.textColor,
-    letterSpacing: 0.3
-  };
-  if (!onPress) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: containerStyle,
-      accessibilityLabel: `User status: ${config.label}`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dotStyle
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: textStyle,
-        children: config.label
-      })]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-    accessibilityRole: "button",
-    accessibilityLabel: "Open Dev Tools Menu",
-    testID: "open-dev-tools-button",
-    onPress: onPress,
-    hitSlop: {
-      top: 10,
-      bottom: 10,
-      left: 0,
-      right: 10
-    },
-    disabled: isDragging,
-    activeOpacity: 0.85,
-    style: containerStyle,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: dotStyle
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: textStyle,
-      children: config.label
-    })]
-  });
-}
-
-// =============================
-// Helpers (using shared filterValidChildren from core)
-// =============================
-function interleaveWithDividers(childrenArray) {
-  const validChildren = (0, _floatingToolsCore.filterValidChildren)(childrenArray);
-  const result = [];
-  validChildren.forEach((child, index) => {
-    result.push(child);
-    if (index < validChildren.length - 1) result.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}, `divider-${index}`));
-  });
-  return result;
-}
-
-// =============================
-// Main Component (presentation only)
-// =============================
-
-/**
- * FloatingTools - A draggable, resizable bubble for development tools
- *
- * This component provides a floating bubble interface that can contain various
- * development tools and controls. It features:
- * - Drag and drop positioning with boundary constraints
- * - Hide/show functionality by dragging to screen edge
- * - Position persistence across app restarts
- * - Safe area aware positioning
- * - Automatic divider insertion between child components
- *
- * @param props - Configuration for the floating tools
- * @param props.enablePositionPersistence - Whether to save/restore position (default: true)
- * @param props.children - Child components to render in the bubble
- *
- * @returns JSX.Element representing the floating tools bubble
- *
- * @example
- * ```typescript
- * <FloatingTools enablePositionPersistence={true}>
- *   <UserStatus userRole="admin" onPress={handleUserPress} />
- *   <ToolButton onPress={openSettings} />
- * </FloatingTools>
- * ```
- *
- * @performance Uses native driver animations for smooth positioning
- * @performance Implements efficient boundary checking and position validation
- * @performance Includes debounced position saving for optimal storage performance
- */
-function FloatingTool({
-  id,
-  suspendPointerEvents = false,
-  revealToken,
-  variant = "bubble",
-  dragFromSurface = false,
-  accessibilityLabel = "Move dev tools bubble",
-  minimizedStack,
-  hasMinimizedStack = false,
-  accessory,
-  handleAdornment,
-  enablePositionPersistence = true,
-  defaultPlacement = "top",
-  pushToSide = false,
-  centerOnboarding = false,
-  children,
-  environment,
-  availableEnvironments,
-  onEnvironmentSwitch,
-  showEnvironmentSelector = false
-}) {
-  // Animated position and drag state
-  const animatedPosition = (0, _react.useRef)(new _reactNative.Animated.ValueXY()).current;
-  const [isDragging, setIsDragging] = (0, _react.useState)(false);
-  const [bubbleSize, setBubbleSize] = (0, _react.useState)({
-    width: 100,
-    height: 32
-  });
-  const [isHidden, setIsHidden] = (0, _react.useState)(false);
-  const [accessoryHeight, setAccessoryHeight] = (0, _react.useState)(0);
-  const [accessoryAbove, setAccessoryAbove] = (0, _react.useState)(false);
-
-  // Store the position before hiding to restore when showing
-  const savedPositionRef = (0, _react.useRef)(null);
-
-  // Track if the hide state was triggered by pushToSide prop vs user toggle
-  const isPushedBySideRef = (0, _react.useRef)(false);
-
-  // Track if user has explicitly chosen to show the menu (overriding pushToSide)
-  const userWantsVisibleRef = (0, _react.useRef)(false);
-
-  // 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);
-
-  // Track if layout has settled (after initial render cycle completes)
-  const [isLayoutSettled, setIsLayoutSettled] = (0, _react.useState)(false);
-  const safeAreaInsets = (0, _index2.useSafeAreaInsets)();
-  const {
-    width: screenWidth,
-    height: screenHeight
-  } = (0, _reactNative.useWindowDimensions)();
-
-  // 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,
-    isInitialized: isPositionInitialized
-  } = useFloatingToolsPosition({
-    animatedPosition,
-    bubbleWidth: bubbleSize.width,
-    bubbleHeight: bubbleSize.height,
-    enabled: enablePositionPersistence,
-    visibleHandleWidth: VISIBLE_HANDLE_WIDTH,
-    listenersSuspended: isDragging,
-    defaultPlacement,
-    onPositionLoaded: handlePositionLoaded,
-    storageKey: id ? `@buoy/floating-tool/${id}` : undefined
-  });
-
-  // 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) {
-      userWantsVisibleRef.current = false;
-    }
-    prevPushToSideRef.current = pushToSide;
-
-    // Only push to side if:
-    // 1. pushToSide is true
-    // 2. Not currently hidden
-    // 3. Not being dragged
-    // 4. User hasn't manually restored (userWantsVisibleRef)
-    if (pushToSide && !isHidden && !isDragging && !userWantsVisibleRef.current) {
-      // Push to side
-      const currentX = getAnimatedValue(animatedPosition.x);
-      const currentY = getAnimatedValue(animatedPosition.y);
-
-      // Save current position
-      savedPositionRef.current = {
-        x: currentX,
-        y: currentY
-      };
-      const hiddenX = screenWidth - VISIBLE_HANDLE_WIDTH;
-      isPushedBySideRef.current = true;
-      setIsHidden(true);
-      _reactNative.Animated.timing(animatedPosition, {
-        toValue: {
-          x: hiddenX,
-          y: currentY
-        },
-        duration: 200,
-        useNativeDriver: false
-      }).start(() => {
-        savePosition(hiddenX, currentY);
-      });
-    } else if (!pushToSide && isHidden && isPushedBySideRef.current) {
-      // Restore from side when pushToSide becomes false
-      if (savedPositionRef.current) {
-        const {
-          x: targetX,
-          y: targetY
-        } = savedPositionRef.current;
-        isPushedBySideRef.current = false;
-        userWantsVisibleRef.current = false; // Reset user override when tools close
-        setIsHidden(false);
-        _reactNative.Animated.timing(animatedPosition, {
-          toValue: {
-            x: targetX,
-            y: targetY
-          },
-          duration: 200,
-          useNativeDriver: false
-        }).start(() => {
-          savePosition(targetX, targetY);
-        });
-      }
-    }
-  }, [enablePositionPersistence, isPositionInitialized, pushToSide, isHidden, isDragging, screenWidth, animatedPosition, savePosition]);
-
-  // Hidden state is now set via onPositionLoaded callback - no racing effect needed
-
-  // Wait for layout to settle before enabling width tracking
-  // This prevents false-positive width changes during initial render when
-  // the bubble measures multiple times as children render
-  (0, _react.useEffect)(() => {
-    if (!isPositionInitialized || isLayoutSettled) return;
-    const timer = setTimeout(() => {
-      // Capture the current width as the baseline AFTER layout has settled
-      prevBubbleWidthRef.current = bubbleSize.width;
-      setIsLayoutSettled(true);
-    }, LAYOUT_SETTLE_DELAY_MS);
-    return () => clearTimeout(timer);
-  }, [isPositionInitialized, isLayoutSettled, bubbleSize.width]);
-
-  // 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)(() => {
-    // Skip if position not initialized yet
-    if (!isPositionInitialized) return;
-
-    // Skip until layout has settled (prevents false-positive width changes during initial render)
-    if (!isLayoutSettled) return;
-
-    // Skip if prevBubbleWidthRef hasn't been set yet
-    if (prevBubbleWidthRef.current === null) 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 - EDGE_PADDING));
-      }
-      return;
-    }
-
-    // Get current position
-    const currentX = getAnimatedValue(animatedPosition.x);
-    const currentY = getAnimatedValue(animatedPosition.y);
-
-    // 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 - VISIBLE_HANDLE_WIDTH));
-
-    // 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, isLayoutSettled, isDragging, isHidden, animatedPosition, screenWidth, safeAreaInsets.left, savePosition]);
-
-  // Default position when persistence disabled or during onboarding
-  (0, _react.useEffect)(() => {
-    if (!enablePositionPersistence) {
-      if (centerOnboarding) {
-        // Center the bubble for onboarding - position under tooltip arrow
-        // Use shared calculation to ensure perfect alignment across all screens
-        const bottomOffset = (0, _onboardingConstants.calculateTargetPosition)();
-        const centerX = (screenWidth - bubbleSize.width) / 2;
-        const centerY = screenHeight - bubbleSize.height - bottomOffset;
-        animatedPosition.setValue({
-          x: centerX,
-          y: centerY
-        });
-      } else {
-        // Default right-side position
-        const defaultY = defaultPlacement === "bottom" ? Math.max(safeAreaInsets.top + EDGE_PADDING, screenHeight - bubbleSize.height - safeAreaInsets.bottom - EDGE_PADDING) : Math.max(safeAreaInsets.top + EDGE_PADDING, Math.min(100, screenHeight - bubbleSize.height - safeAreaInsets.bottom));
-        animatedPosition.setValue({
-          x: screenWidth - bubbleSize.width - EDGE_PADDING,
-          y: defaultY
-        });
-      }
-    }
-  }, [enablePositionPersistence, centerOnboarding, animatedPosition, bubbleSize.width, bubbleSize.height, safeAreaInsets.top, safeAreaInsets.bottom, screenWidth, screenHeight]);
-
-  // Toggle hide/show function
-  const toggleHideShow = (0, _react.useCallback)(() => {
-    const currentX = getAnimatedValue(animatedPosition.x);
-    const currentY = getAnimatedValue(animatedPosition.y);
-
-    // Check if the menu is visually off-screen (more than half hidden to the right)
-    // This handles edge cases where isHidden state might be out of sync with actual position
-    const isVisuallyOffScreen = currentX > screenWidth - bubbleSize.width / 2;
-    if (isHidden || isVisuallyOffScreen) {
-      // Show the bubble - restore to saved position or default visible position
-      let targetX;
-      let targetY;
-      if (savedPositionRef.current && savedPositionRef.current.x < screenWidth - bubbleSize.width / 2) {
-        // Restore to the saved position only if it's a valid visible position
-        targetX = savedPositionRef.current.x;
-        targetY = savedPositionRef.current.y;
-      } else {
-        // Default visible position if no saved position or saved position is off-screen
-        targetX = screenWidth - bubbleSize.width - EDGE_PADDING;
-        targetY = currentY;
-      }
-
-      // User explicitly wants the menu visible (overrides pushToSide)
-      isPushedBySideRef.current = false;
-      userWantsVisibleRef.current = true;
-      setIsHidden(false);
-      _reactNative.Animated.timing(animatedPosition, {
-        toValue: {
-          x: targetX,
-          y: targetY
-        },
-        duration: 200,
-        useNativeDriver: false
-      }).start(() => {
-        savePosition(targetX, targetY);
-      });
-    } else {
-      // Hide the bubble - save current position before hiding
-      savedPositionRef.current = {
-        x: currentX,
-        y: currentY
-      };
-
-      // User explicitly wants the menu hidden
-      userWantsVisibleRef.current = false;
-      const hiddenX = screenWidth - VISIBLE_HANDLE_WIDTH;
-      setIsHidden(true);
-      _reactNative.Animated.timing(animatedPosition, {
-        toValue: {
-          x: hiddenX,
-          y: currentY
-        },
-        duration: 200,
-        useNativeDriver: false
-      }).start(() => {
-        savePosition(hiddenX, currentY);
-      });
-    }
-  }, [animatedPosition, isHidden, bubbleSize.width, savePosition, screenWidth]);
-  const handleDragStart = (0, _react.useCallback)(() => {
-    setIsDragging(true);
-  }, []);
-  const handleDragEnd = (0, _react.useCallback)(finalPosition => {
-    let {
-      x: currentX,
-      y: currentY
-    } = finalPosition;
-
-    // Check if bubble is more than 50% over the right edge
-    const bubbleMidpoint = currentX + bubbleSize.width / 2;
-    const shouldHide = bubbleMidpoint > screenWidth;
-    if (shouldHide) {
-      // Animate to hidden position (only grabber visible)
-      const hiddenX = screenWidth - VISIBLE_HANDLE_WIDTH;
-      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 - EDGE_PADDING,
-          y: currentY
-        };
-      }
-      _reactNative.Animated.timing(animatedPosition, {
-        toValue: {
-          x: hiddenX,
-          y: currentY
-        },
-        duration: 200,
-        useNativeDriver: false
-      }).start(() => {
-        savePosition(hiddenX, currentY);
-      });
-    } else {
-      // Check if we're in hidden state and user is pulling it back
-      if (isHidden && currentX < screenWidth - VISIBLE_HANDLE_WIDTH - 10) {
-        setIsHidden(false);
-      }
-
-      // Update saved position if bubble is in visible area (not hidden)
-      if (currentX < screenWidth - bubbleSize.width / 2) {
-        savedPositionRef.current = {
-          x: currentX,
-          y: currentY
-        };
-      }
-      savePosition(currentX, currentY);
-    }
-    setIsDragging(false);
-  }, [animatedPosition, bubbleSize.width, isHidden, savePosition, screenWidth]);
-  const lastViewport = (0, _react.useRef)({
-    width: screenWidth,
-    height: screenHeight
-  });
-  (0, _react.useEffect)(() => {
-    if (enablePositionPersistence && !isPositionInitialized) return;
-    if (lastViewport.current.width === screenWidth && lastViewport.current.height === screenHeight) return;
-    lastViewport.current = {
-      width: screenWidth,
-      height: screenHeight
-    };
-    const clamp = point => ({
-      x: Math.max(safeAreaInsets.left, Math.min(point.x, screenWidth - bubbleSize.width - EDGE_PADDING)),
-      y: Math.max(safeAreaInsets.top + EDGE_PADDING, Math.min(point.y, screenHeight - bubbleSize.height - safeAreaInsets.bottom))
-    });
-    const current = clamp({
-      x: getAnimatedValue(animatedPosition.x),
-      y: getAnimatedValue(animatedPosition.y)
-    });
-    if (isHidden) current.x = screenWidth - VISIBLE_HANDLE_WIDTH;
-    if (savedPositionRef.current) savedPositionRef.current = clamp(savedPositionRef.current);
-    animatedPosition.stopAnimation();
-    animatedPosition.setValue(current);
-    void savePosition(current.x, current.y);
-  }, [screenWidth, screenHeight, isPositionInitialized, enablePositionPersistence, bubbleSize, safeAreaInsets, isHidden, animatedPosition, savePosition]);
-  const hasAccessory = Boolean(accessory);
-  (0, _react.useEffect)(() => {
-    if (!hasAccessory) return;
-    const update = ({
-      y
-    }) => setAccessoryAbove(y + bubbleSize.height + accessoryHeight > screenHeight - safeAreaInsets.bottom);
-    update({
-      y: getAnimatedValue(animatedPosition.y)
-    });
-    const listener = animatedPosition.addListener(update);
-    return () => animatedPosition.removeListener(listener);
-  }, [animatedPosition, bubbleSize.height, accessoryHeight, screenHeight, safeAreaInsets.bottom, hasAccessory]);
-
-  // Stable styles
-  const bubbleStyle = (0, _react.useMemo)(() => ({
-    position: "absolute",
-    zIndex: 1001,
-    transform: animatedPosition.getTranslateTransform()
-  }), [animatedPosition]);
-  const previousReveal = (0, _react.useRef)(undefined);
-  (0, _react.useEffect)(() => {
-    if (enablePositionPersistence && !isPositionInitialized) return;
-    if (previousReveal.current === revealToken) return;
-    previousReveal.current = revealToken;
-    if (revealToken !== undefined && revealToken > 0 && isHidden) toggleHideShow();
-  }, [revealToken, isPositionInitialized, enablePositionPersistence, isHidden, toggleHideShow]);
-  const hasMinimizedTools = hasMinimizedStack;
-  const containerStyle = {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: _gameUIColors.buoyColors.card,
-    // When minimized tools showing, remove top-left radius so they connect seamlessly
-    borderTopLeftRadius: hasMinimizedTools ? 0 : 6,
-    borderTopRightRadius: 6,
-    borderBottomLeftRadius: 6,
-    borderBottomRightRadius: 6,
-    // Use individual border widths when minimized tools are showing
-    // Always show top border when dragging for visual feedback
-    borderLeftWidth: isDragging ? 2 : 1,
-    borderRightWidth: isDragging ? 2 : 1,
-    borderBottomWidth: isDragging ? 2 : 1,
-    borderTopWidth: isDragging ? 2 : hasMinimizedTools ? 0 : 1,
-    borderColor: isDragging ? _floatingToolsCore.floatingToolsColors.dragActive : _gameUIColors.buoyColors.textMuted + "66",
-    overflow: "visible",
-    elevation: 8,
-    shadowColor: isDragging ? _floatingToolsCore.floatingToolsColors.dragActive + "99" : "#000",
-    shadowOffset: {
-      width: 0,
-      height: isDragging ? 6 : 4
-    },
-    shadowOpacity: isDragging ? 0.6 : 0.3,
-    shadowRadius: isDragging ? 12 : 8,
-    ...(variant === "strip" ? {
-      borderRadius: _nightTheme.night.radius.card,
-      borderTopLeftRadius: _nightTheme.night.radius.card,
-      borderTopRightRadius: _nightTheme.night.radius.card,
-      borderBottomLeftRadius: _nightTheme.night.radius.card,
-      borderBottomRightRadius: _nightTheme.night.radius.card,
-      minHeight: 48,
-      backgroundColor: _nightTheme.night.color.surface,
-      borderColor: isDragging ? _nightTheme.night.color.accentBorderStrong : _nightTheme.night.color.separator,
-      shadowOpacity: 0.24,
-      shadowRadius: 16
-    } : {})
-  };
-  const dragHandleStyle = {
-    paddingHorizontal: 6,
-    paddingVertical: 6,
-    backgroundColor: _gameUIColors.buoyColors.textMuted + "1A",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 32,
-    ...(variant === "strip" ? {
-      minHeight: 48
-    } : {}),
-    borderRightWidth: 1,
-    borderRightColor: _gameUIColors.buoyColors.textMuted + "66",
-    // Remove top-left radius when minimized tools are showing
-    borderTopLeftRadius: hasMinimizedTools ? 0 : undefined,
-    ...(variant === "strip" ? {
-      backgroundColor: "transparent",
-      borderRightWidth: 0
-    } : {})
-  };
-  const contentStyle = {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingRight: 8
-  };
-
-  // Compose actions row with automatic dividers
-  const actions = (0, _react.useMemo)(() => variant === "strip" ? _react.Children.toArray(children) : interleaveWithDividers(_react.Children.toArray(children)), [children, variant]);
-
-  // 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, {
-    pointerEvents: suspendPointerEvents ? "none" : "box-none",
-    testID: id ?? "buoy-floating-tool",
-    style: bubbleStyle,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        overflow: "visible"
-      },
-      children: [minimizedStack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          bottom: "100%",
-          left: 0,
-          width: minimizedStackWidth,
-          overflow: "visible",
-          zIndex: 1001
-        },
-        children: minimizedStack
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DraggableHeader.DraggableHeader, {
-        position: animatedPosition,
-        enabled: dragFromSurface,
-        claimOnMove: false,
-        onDragStart: handleDragStart,
-        onDragEnd: handleDragEnd,
-        containerBounds: {
-          width: screenWidth,
-          height: screenHeight
-        },
-        elementSize: bubbleSize,
-        minPosition: {
-          x: safeAreaInsets.left,
-          y: safeAreaInsets.top + EDGE_PADDING
-        },
-        maxOverflowX: bubbleSize.width,
-        hitSlop: {
-          top: 10,
-          bottom: 10,
-          left: 10,
-          right: 10
-        },
-        style: containerStyle,
-        onLayout: event => {
-          const {
-            width,
-            height
-          } = event.nativeEvent.layout;
-          setBubbleSize({
-            width,
-            height
-          });
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_DraggableHeader.DraggableHeader, {
-          position: animatedPosition,
-          testID: id ? `${id}-grip` : "buoy-floating-grip",
-          accessibilityLabel: accessibilityLabel,
-          onDragStart: handleDragStart,
-          onDragEnd: handleDragEnd,
-          onTap: toggleHideShow,
-          containerBounds: {
-            width: screenWidth,
-            height: screenHeight
-          },
-          elementSize: bubbleSize,
-          minPosition: {
-            x: safeAreaInsets.left,
-            y: safeAreaInsets.top + EDGE_PADDING
-          },
-          style: dragHandleStyle,
-          enabled: true,
-          maxOverflowX: bubbleSize.width,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GripVerticalIcon.GripVerticalIcon, {
-            size: variant === "strip" ? 20 : 12,
-            color: _gameUIColors.buoyColors.textSecondary + "CC"
-          }), handleAdornment]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingToolsContext.Provider, {
-          value: {
-            isDragging
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: contentStyle,
-            children: [showEnvironmentSelector && environment && availableEnvironments && onEnvironmentSwitch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_EnvironmentSelectorInline.EnvironmentSelectorInline, {
-              currentEnvironment: environment,
-              availableEnvironments: availableEnvironments,
-              onSelect: onEnvironmentSwitch
-            }), actions]
-          })
-        })]
-      }), !isHidden && accessory && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        onLayout: event => setAccessoryHeight(event.nativeEvent.layout.height),
-        style: {
-          position: "absolute",
-          ...(accessoryAbove ? {
-            bottom: "100%"
-          } : {
-            top: "100%"
-          }),
-          left: 0,
-          width: "100%",
-          zIndex: 1002
-        },
-        children: accessory
-      })]
-    })
-  });
-}
-
-/** Native AppHost gets its anchor from the minimized-tools provider. */
-function getBubbleAnchorPosition() {
-  return null;
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.Divider=Divider;exports.FloatingTool=FloatingTool;exports.UserStatus=UserStatus;exports.getBubbleAnchorPosition=getBubbleAnchorPosition;var _react=require("react");var _reactNative=require("react-native");var _nightTheme=require("../night/nightTheme.js");var _DraggableHeader=require("../components/DraggableHeader.js");var _EnvironmentSelectorInline=require("../../env/EnvironmentSelectorInline");var _GripVerticalIcon=require("../components/GripVerticalIcon.js");var _gameUIColors=require("../gameUI/constants/gameUIColors.js");var _index=require("../../utils/index.js");var _index2=require("../../hooks/index.js");var _onboardingConstants=require("./onboardingConstants");var _floatingToolsCore=require("@buoy-gg/floating-tools-core");var _jsxRuntime=require("react/jsx-runtime");const STORAGE_KEYS={BUBBLE_POSITION_X:"@react_buoy_bubble_position_x",BUBBLE_POSITION_Y:"@react_buoy_bubble_position_y"};const VISIBLE_HANDLE_WIDTH=32;const EDGE_PADDING=20;const LAYOUT_SETTLE_DELAY_MS=150;const getAnimatedValue=c=>c.__getValue();function useFloatingToolsPosition({animatedPosition:c,bubbleWidth:_=100,bubbleHeight:m=32,enabled:a=true,visibleHandleWidth:v=32,listenersSuspended:T=false,defaultPlacement:V="top",onPositionLoaded:N,storageKey:y}){const[A,S]=(0,_react.useState)(false);const C=(0,_react.useRef)(void 0);const x=(0,_react.useRef)(true);(0,_react.useEffect)(()=>{x.current=true;return()=>{x.current=false;if(C.current){clearTimeout(C.current);C.current=void 0}}},[]);const D=(0,_react.useCallback)(async(u,g)=>{if(!a)return;if(!x.current)return;const{width:t}=_reactNative.Dimensions.get("window");if(t<=0||u<0||g<0)return;try{await Promise.all([_index.persistentStorage.setItem(y?`${y}:x`:STORAGE_KEYS.BUBBLE_POSITION_X,u.toString()),_index.persistentStorage.setItem(y?`${y}:y`:STORAGE_KEYS.BUBBLE_POSITION_Y,g.toString())])}catch(n){}},[a,y]);const B=(0,_react.useCallback)((u,g)=>{if(!x.current)return;if(C.current)clearTimeout(C.current);C.current=setTimeout(()=>{if(x.current){D(u,g)}},500)},[D]);const j=(0,_react.useCallback)(async()=>{if(!a)return null;try{const[u,g]=await Promise.all([_index.persistentStorage.getItem(y?`${y}:x`:STORAGE_KEYS.BUBBLE_POSITION_X),_index.persistentStorage.getItem(y?`${y}:y`:STORAGE_KEYS.BUBBLE_POSITION_Y)]);if(u!==null&&g!==null){const t=parseFloat(u);const n=parseFloat(g);if(!Number.isNaN(t)&&!Number.isNaN(n)){return{x:t,y:n}}}}catch(u){}return null},[a,y]);const L=(0,_react.useCallback)(u=>{const{width:g,height:t}=_reactNative.Dimensions.get("window");const n=(0,_index.getSafeAreaInsets)();if(g<=0||t<=0){return{...u,isValid:false}}const M=n.left;const e=g-v;const E=n.top+EDGE_PADDING;const l=t-m-n.bottom;const d={x:Math.max(M,Math.min(u.x,e)),y:Math.max(E,Math.min(u.y,l)),isValid:true};return d},[v,m]);(0,_react.useEffect)(()=>{if(!a||A)return;let u=false;const g=async()=>{const t=await j();if(u||!x.current)return;const{width:n,height:M}=_reactNative.Dimensions.get("window");const e=(0,_index.getSafeAreaInsets)();if(n<=0||M<=0){setTimeout(()=>{if(x.current&&!u){g()}},100);return}let E;let l=false;if(t){const d=L(t);if(!d.isValid){setTimeout(()=>{if(x.current&&!u){g()}},100);return}const Y=Math.abs(t.x-d.x)>5||Math.abs(t.y-d.y)>5;if(Y){await D(d.x,d.y)}E={x:d.x,y:d.y};l=d.x>=n-v-5}else{const d=V==="bottom"?Math.max(e.top+EDGE_PADDING,M-m-e.bottom-EDGE_PADDING):Math.max(e.top+EDGE_PADDING,Math.min(100,M-m-e.bottom));E={x:n-_-EDGE_PADDING,y:d}}if(u||!x.current)return;c.setValue(E);S(true);N?.(E,l)};g();return()=>{u=true}},[a,A,c,j,L,D,_,m,v,N]);(0,_react.useEffect)(()=>{if(!a||!A||T)return;const u=c.addListener(g=>{B(g.x,g.y)});return()=>{c.removeListener(u);if(C.current){clearTimeout(C.current);C.current=void 0}}},[a,A,T,c,B]);return{savePosition:D,isInitialized:A}}function Divider(){const c={width:1,height:12,backgroundColor:_gameUIColors.buoyColors.textMuted+"66",flexShrink:0};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:c})}const gameUIColorsCompat={success:"#20C997",warning:"#FFA94D",error:"#EF4444",muted:_gameUIColors.buoyColors.textMuted,secondary:_gameUIColors.buoyColors.textSecondary,info:"#20C997",primary:"#20C997",optional:_gameUIColors.buoyColors.textSecondary};function getUserStatusConfig(c){return(0,_floatingToolsCore.getUserStatusConfig)(c,gameUIColorsCompat)}const FloatingToolsContext=(0,_react.createContext)({isDragging:false});function UserStatus({userRole:c,onPress:_}){const{isDragging:m}=(0,_react.useContext)(FloatingToolsContext);const a=getUserStatusConfig(c);const v={flexDirection:"row",alignItems:"center",paddingVertical:6,paddingHorizontal:8,flexShrink:0};const T={width:6,height:6,borderRadius:3,backgroundColor:a.dotColor,marginRight:4};const V={fontSize:10,fontWeight:"500",color:a.textColor,letterSpacing:.3};if(!_){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:v,accessibilityLabel:`User status: ${a.label}`,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:T}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:V,children:a.label})]})}return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{accessibilityRole:"button",accessibilityLabel:"Open Dev Tools Menu",testID:"open-dev-tools-button",onPress:_,hitSlop:{top:10,bottom:10,left:0,right:10},disabled:m,activeOpacity:.85,style:v,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:T}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:V,children:a.label})]})}function interleaveWithDividers(c){const _=(0,_floatingToolsCore.filterValidChildren)(c);const m=[];_.forEach((a,v)=>{m.push(a);if(v<_.length-1)m.push((0,_jsxRuntime.jsx)(Divider,{},`divider-${v}`))});return m}function FloatingTool({id:c,suspendPointerEvents:_=false,revealToken:m,variant:a="bubble",dragFromSurface:v=false,accessibilityLabel:T="Move dev tools bubble",minimizedStack:V,hasMinimizedStack:N=false,accessory:y,handleAdornment:A,enablePositionPersistence:S=true,defaultPlacement:C="top",pushToSide:x=false,centerOnboarding:D=false,children:B,environment:j,availableEnvironments:L,onEnvironmentSwitch:u,showEnvironmentSelector:g=false}){const t=(0,_react.useRef)(new _reactNative.Animated.ValueXY).current;const[n,M]=(0,_react.useState)(false);const[e,E]=(0,_react.useState)({width:100,height:32});const[l,d]=(0,_react.useState)(false);const[Y,Z]=(0,_react.useState)(0);const[K,tt]=(0,_react.useState)(false);const f=(0,_react.useRef)(null);const W=(0,_react.useRef)(false);const O=(0,_react.useRef)(false);const $=(0,_react.useRef)(x);const X=(0,_react.useRef)(null);const[z,et]=(0,_react.useState)(false);const h=(0,_index2.useSafeAreaInsets)();const{width:o,height:p}=(0,_reactNative.useWindowDimensions)();const rt=(0,_react.useCallback)((i,r)=>{if(r){d(true)}},[]);const{savePosition:w,isInitialized:R}=useFloatingToolsPosition({animatedPosition:t,bubbleWidth:e.width,bubbleHeight:e.height,enabled:S,visibleHandleWidth:VISIBLE_HANDLE_WIDTH,listenersSuspended:n,defaultPlacement:C,onPositionLoaded:rt,storageKey:c?`@buoy/floating-tool/${c}`:void 0});(0,_react.useEffect)(()=>{if(S&&!R)return;if(!$.current&&x){O.current=false}$.current=x;if(x&&!l&&!n&&!O.current){const i=getAnimatedValue(t.x);const r=getAnimatedValue(t.y);f.current={x:i,y:r};const s=o-VISIBLE_HANDLE_WIDTH;W.current=true;d(true);_reactNative.Animated.timing(t,{toValue:{x:s,y:r},duration:200,useNativeDriver:false}).start(()=>{w(s,r)})}else if(!x&&l&&W.current){if(f.current){const{x:i,y:r}=f.current;W.current=false;O.current=false;d(false);_reactNative.Animated.timing(t,{toValue:{x:i,y:r},duration:200,useNativeDriver:false}).start(()=>{w(i,r)})}}},[S,R,x,l,n,o,t,w]);(0,_react.useEffect)(()=>{if(!R||z)return;const i=setTimeout(()=>{X.current=e.width;et(true);if(!l&&!n){const r=getAnimatedValue(t.x);const s=o-e.width-EDGE_PADDING;if(r>s){const b=Math.max(h.left,s);const I=getAnimatedValue(t.y);t.setValue({x:b,y:I});w(b,I)}}},LAYOUT_SETTLE_DELAY_MS);return()=>clearTimeout(i)},[R,z,e.width]);(0,_react.useEffect)(()=>{if(!R)return;if(!z)return;if(X.current===null)return;if(n){X.current=e.width;return}const i=X.current;const r=e.width;const s=r-i;if(Math.abs(s)<2){return}X.current=r;if(l){if(f.current){const ct=f.current.x-s;f.current.x=Math.max(h.left,Math.min(ct,o-r-EDGE_PADDING))}return}const b=getAnimatedValue(t.x);const I=getAnimatedValue(t.y);const H=b-s;const U=Math.max(h.left,Math.min(H,o-VISIBLE_HANDLE_WIDTH));if(Math.abs(U-b)>1){_reactNative.Animated.timing(t,{toValue:{x:U,y:I},duration:150,useNativeDriver:false}).start(()=>{w(U,I);if(f.current){f.current.x=U}})}},[e.width,R,z,n,l,t,o,h.left,w]);(0,_react.useEffect)(()=>{if(!S){if(D){const i=(0,_onboardingConstants.calculateTargetPosition)();const r=(o-e.width)/2;const s=p-e.height-i;t.setValue({x:r,y:s})}else{const i=C==="bottom"?Math.max(h.top+EDGE_PADDING,p-e.height-h.bottom-EDGE_PADDING):Math.max(h.top+EDGE_PADDING,Math.min(100,p-e.height-h.bottom));t.setValue({x:o-e.width-EDGE_PADDING,y:i})}}},[S,D,t,e.width,e.height,h.top,h.bottom,o,p]);const k=(0,_react.useCallback)(()=>{const i=getAnimatedValue(t.x);const r=getAnimatedValue(t.y);const s=i>o-e.width/2;if(l||s){let b;let I;if(f.current&&f.current.x<o-e.width/2){b=f.current.x;I=f.current.y}else{b=o-e.width-EDGE_PADDING;I=r}W.current=false;O.current=true;d(false);_reactNative.Animated.timing(t,{toValue:{x:b,y:I},duration:200,useNativeDriver:false}).start(()=>{w(b,I)})}else{f.current={x:i,y:r};O.current=false;const b=o-VISIBLE_HANDLE_WIDTH;d(true);_reactNative.Animated.timing(t,{toValue:{x:b,y:r},duration:200,useNativeDriver:false}).start(()=>{w(b,r)})}},[t,l,e.width,w,o]);const G=(0,_react.useCallback)(()=>{M(true)},[]);const P=(0,_react.useCallback)(i=>{let{x:r,y:s}=i;const b=r+e.width/2;const I=b>o;if(I){const H=o-VISIBLE_HANDLE_WIDTH;d(true);if(f.current){f.current.y=s}else{f.current={x:o-e.width-EDGE_PADDING,y:s}}_reactNative.Animated.timing(t,{toValue:{x:H,y:s},duration:200,useNativeDriver:false}).start(()=>{w(H,s)})}else{if(l&&r<o-VISIBLE_HANDLE_WIDTH-10){d(false)}if(r<o-e.width/2){f.current={x:r,y:s}}w(r,s)}M(false)},[t,e.width,l,w,o]);const q=(0,_react.useRef)({width:o,height:p});(0,_react.useEffect)(()=>{if(S&&!R)return;if(q.current.width===o&&q.current.height===p)return;q.current={width:o,height:p};const i=s=>({x:Math.max(h.left,Math.min(s.x,o-e.width-EDGE_PADDING)),y:Math.max(h.top+EDGE_PADDING,Math.min(s.y,p-e.height-h.bottom))});const r=i({x:getAnimatedValue(t.x),y:getAnimatedValue(t.y)});if(l)r.x=o-VISIBLE_HANDLE_WIDTH;if(f.current)f.current=i(f.current);t.stopAnimation();t.setValue(r);void w(r.x,r.y)},[o,p,R,S,e,h,l,t,w]);const J=Boolean(y);(0,_react.useEffect)(()=>{if(!J)return;const i=({y:s})=>tt(s+e.height+Y>p-h.bottom);i({y:getAnimatedValue(t.y)});const r=t.addListener(i);return()=>t.removeListener(r)},[t,e.height,Y,p,h.bottom,J]);const nt=(0,_react.useMemo)(()=>({position:"absolute",zIndex:1001,transform:t.getTranslateTransform()}),[t]);const Q=(0,_react.useRef)(void 0);(0,_react.useEffect)(()=>{if(S&&!R)return;if(Q.current===m)return;Q.current=m;if(m!==void 0&&m>0&&l)k()},[m,R,S,l,k]);const F=N;const ot={flexDirection:"row",alignItems:"center",backgroundColor:_gameUIColors.buoyColors.card,borderTopLeftRadius:F?0:6,borderTopRightRadius:6,borderBottomLeftRadius:6,borderBottomRightRadius:6,borderLeftWidth:n?2:1,borderRightWidth:n?2:1,borderBottomWidth:n?2:1,borderTopWidth:n?2:F?0:1,borderColor:n?_floatingToolsCore.floatingToolsColors.dragActive:_gameUIColors.buoyColors.textMuted+"66",overflow:"visible",elevation:8,shadowColor:n?_floatingToolsCore.floatingToolsColors.dragActive+"99":"#000",shadowOffset:{width:0,height:n?6:4},shadowOpacity:n?.6:.3,shadowRadius:n?12:8,...a==="strip"?{borderRadius:_nightTheme.night.radius.card,borderTopLeftRadius:_nightTheme.night.radius.card,borderTopRightRadius:_nightTheme.night.radius.card,borderBottomLeftRadius:_nightTheme.night.radius.card,borderBottomRightRadius:_nightTheme.night.radius.card,minHeight:48,backgroundColor:_nightTheme.night.color.surface,borderColor:n?_nightTheme.night.color.accentBorderStrong:_nightTheme.night.color.separator,shadowOpacity:.24,shadowRadius:16}:{}};const it={paddingHorizontal:6,paddingVertical:6,backgroundColor:_gameUIColors.buoyColors.textMuted+"1A",alignItems:"center",justifyContent:"center",width:32,...a==="strip"?{minHeight:48}:{},borderRightWidth:1,borderRightColor:_gameUIColors.buoyColors.textMuted+"66",borderTopLeftRadius:F?0:void 0,...a==="strip"?{backgroundColor:"transparent",borderRightWidth:0}:{}};const st={flexDirection:"row",alignItems:"center",gap:6,paddingRight:8};const at=(0,_react.useMemo)(()=>a==="strip"?_react.Children.toArray(B):interleaveWithDividers(_react.Children.toArray(B)),[B,a]);const ut=32;if(S&&!R){return null}return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:_?"none":"box-none",testID:c??"buoy-floating-tool",style:nt,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{overflow:"visible"},children:[V&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",bottom:"100%",left:0,width:ut,overflow:"visible",zIndex:1001},children:V}),(0,_jsxRuntime.jsxs)(_DraggableHeader.DraggableHeader,{position:t,enabled:v,claimOnMove:false,onDragStart:G,onDragEnd:P,containerBounds:{width:o,height:p},elementSize:e,minPosition:{x:h.left,y:h.top+EDGE_PADDING},maxOverflowX:e.width,hitSlop:{top:10,bottom:10,left:10,right:10},style:ot,onLayout:i=>{const{width:r,height:s}=i.nativeEvent.layout;E({width:r,height:s})},children:[(0,_jsxRuntime.jsxs)(_DraggableHeader.DraggableHeader,{position:t,testID:c?`${c}-grip`:"buoy-floating-grip",accessibilityLabel:T,onDragStart:G,onDragEnd:P,onTap:k,containerBounds:{width:o,height:p},elementSize:e,minPosition:{x:h.left,y:h.top+EDGE_PADDING},style:it,enabled:true,maxOverflowX:e.width,children:[(0,_jsxRuntime.jsx)(_GripVerticalIcon.GripVerticalIcon,{size:a==="strip"?20:12,color:_gameUIColors.buoyColors.textSecondary+"CC"}),A]}),(0,_jsxRuntime.jsx)(FloatingToolsContext.Provider,{value:{isDragging:n},children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:st,children:[g&&j&&L&&u&&(0,_jsxRuntime.jsx)(_EnvironmentSelectorInline.EnvironmentSelectorInline,{currentEnvironment:j,availableEnvironments:L,onSelect:u}),at]})})]}),!l&&y&&(0,_jsxRuntime.jsx)(_reactNative.View,{onLayout:i=>Z(i.nativeEvent.layout.height),style:{position:"absolute",...K?{bottom:"100%"}:{top:"100%"},left:0,width:"100%",zIndex:1002},children:y})]})})}function getBubbleAnchorPosition(){return null}