@buoy-gg/core 1.7.2

package/lib/module/floatingMenu/floatingTools.js

@@ -0,0 +1,767 @@
+"use strict";
+
+import { useEffect, useMemo, useRef, useState, useContext, createContext, useCallback, Children } from "react";
+import { Animated, Dimensions, View, Text, TouchableOpacity } from "react-native";
+import { getSafeAreaInsets, safeGetItem, safeSetItem, buoyColors } from "@buoy-gg/shared-ui";
+import { DraggableHeader } from "./DraggableHeader.js";
+import { useSafeAreaInsets } from "@buoy-gg/shared-ui";
+import { calculateTargetPosition } from "./dial/onboardingConstants.js";
+import { MinimizedToolsStack } from "./MinimizedToolsStack.js";
+import { useMinimizedTools } from "./MinimizedToolsContext.js";
+import { useAppHost } from "./AppHost.js";
+import { EnvironmentSelectorInline } from "@buoy-gg/shared-ui";
+
+// Shared utilities from floating-tools-core
+import { getUserStatusConfig as getStatusConfig, getGripIconLayout, filterValidChildren, floatingToolsColors } from "@buoy-gg/floating-tools-core";
+
+// Re-export UserRole type for consumers
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Using Views to render grip dots; no react-native-svg dependency
+
+// =============================
+// Icons (using shared layout calculation)
+// =============================
+/**
+ * Grip icon component for draggable areas
+ *
+ * Renders a vertical grip pattern using View components to avoid SVG dependencies.
+ * Uses shared getGripIconLayout for consistent sizing across platforms.
+ */
+function GripVerticalIcon({
+  size = 24,
+  color = buoyColors.textSecondary + "CC"
+}) {
+  // Use shared layout calculation from floating-tools-core
+  const layout = getGripIconLayout(size);
+  const containerStyle = {
+    width: size,
+    height: size,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const columnStyle = {
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    marginHorizontal: layout.columnGap / 2
+  };
+  const dotStyle = {
+    width: layout.dotSize,
+    height: layout.dotSize,
+    borderRadius: layout.dotSize / 2,
+    backgroundColor: color,
+    marginVertical: layout.rowGap / 2
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: containerStyle,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: columnStyle,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: dotStyle
+      }), /*#__PURE__*/_jsx(View, {
+        style: dotStyle
+      }), /*#__PURE__*/_jsx(View, {
+        style: dotStyle
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: columnStyle,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: dotStyle
+      }), /*#__PURE__*/_jsx(View, {
+        style: dotStyle
+      }), /*#__PURE__*/_jsx(View, {
+        style: dotStyle
+      })]
+    })]
+  });
+}
+const STORAGE_KEYS = {
+  BUBBLE_POSITION_X: "@react_buoy_bubble_position_x",
+  BUBBLE_POSITION_Y: "@react_buoy_bubble_position_y"
+};
+
+// Debug logging removed for production
+
+// =============================
+// 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
+ *
+ * @returns Object containing position management functions
+ *
+ * @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
+}) {
+  const isInitialized = useRef(false);
+  const saveTimeoutRef = useRef(undefined);
+  const savePosition = useCallback(async (x, y) => {
+    if (!enabled) return;
+    try {
+      await Promise.all([safeSetItem(STORAGE_KEYS.BUBBLE_POSITION_X, x.toString()), safeSetItem(STORAGE_KEYS.BUBBLE_POSITION_Y, y.toString())]);
+    } catch (error) {
+      // Failed to save position - continue without persistence
+    }
+  }, [enabled]);
+  const debouncedSavePosition = useCallback((x, y) => {
+    if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
+    saveTimeoutRef.current = setTimeout(() => savePosition(x, y), 500);
+  }, [savePosition]);
+  const loadPosition = useCallback(async () => {
+    if (!enabled) return null;
+    try {
+      const [xStr, yStr] = await Promise.all([safeGetItem(STORAGE_KEYS.BUBBLE_POSITION_X), safeGetItem(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]);
+  const validatePosition = useCallback(position => {
+    const {
+      width: screenWidth,
+      height: screenHeight
+    } = Dimensions.get("window");
+    const safeArea = getSafeAreaInsets();
+    // 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
+    const maxX = screenWidth - visibleHandleWidth; // no right padding, ensure handle is visible
+    // Add small padding below the safe area top to ensure bubble doesn't go behind notch
+    const minY = safeArea.top + 20; // Ensure bubble is below safe area
+    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))
+    };
+    return clamped;
+  }, [visibleHandleWidth, bubbleHeight]);
+  useEffect(() => {
+    if (!enabled || isInitialized.current) return;
+    const restore = async () => {
+      const saved = await loadPosition();
+      if (saved) {
+        const validated = validatePosition(saved);
+        // 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);
+      } else {
+        const {
+          width: screenWidth,
+          height: screenHeight
+        } = Dimensions.get("window");
+        const safeArea = getSafeAreaInsets();
+        const defaultY = Math.max(safeArea.top + 20, Math.min(100, screenHeight - bubbleHeight - safeArea.bottom));
+        animatedPosition.setValue({
+          x: screenWidth - bubbleWidth - 20,
+          y: defaultY // Ensure it's within safe area bounds
+        });
+      }
+      isInitialized.current = true;
+    };
+    restore();
+  }, [enabled, animatedPosition, loadPosition, validatePosition, savePosition, bubbleWidth, bubbleHeight]);
+  useEffect(() => {
+    if (!enabled || !isInitialized.current || listenersSuspended) return;
+    const listener = animatedPosition.addListener(value => {
+      debouncedSavePosition(value.x, value.y);
+    });
+    return () => {
+      animatedPosition.removeListener(listener);
+      if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
+    };
+  }, [enabled, listenersSuspended, animatedPosition, debouncedSavePosition]);
+  return {
+    savePosition,
+    loadPosition,
+    isInitialized: isInitialized.current
+  };
+}
+
+// =============================
+// UI-only leaf components
+// =============================
+export function Divider() {
+  const dividerStyle = {
+    width: 1,
+    height: 12,
+    backgroundColor: buoyColors.textMuted + "66",
+    flexShrink: 0
+  };
+  return /*#__PURE__*/_jsx(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: buoyColors.textMuted,
+  secondary: buoyColors.textSecondary,
+  info: "#20C997",
+  // teal
+  primary: "#20C997",
+  optional: buoyColors.textSecondary // optional status color
+};
+function getUserStatusConfig(userRole) {
+  return getStatusConfig(userRole, gameUIColorsCompat);
+}
+
+// Context to avoid brittle prop threading and keep API composable
+const FloatingToolsContext = /*#__PURE__*/createContext({
+  isDragging: false
+});
+export function UserStatus({
+  userRole,
+  onPress
+}) {
+  const {
+    isDragging
+  } = 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__*/_jsxs(View, {
+      style: containerStyle,
+      accessibilityLabel: `User status: ${config.label}`,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: dotStyle
+      }), /*#__PURE__*/_jsx(Text, {
+        style: textStyle,
+        children: config.label
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(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__*/_jsx(View, {
+      style: dotStyle
+    }), /*#__PURE__*/_jsx(Text, {
+      style: textStyle,
+      children: config.label
+    })]
+  });
+}
+
+// =============================
+// Helpers (using shared filterValidChildren from core)
+// =============================
+function interleaveWithDividers(childrenArray) {
+  const validChildren = filterValidChildren(childrenArray);
+  const result = [];
+  validChildren.forEach((child, index) => {
+    result.push(child);
+    if (index < validChildren.length - 1) result.push(/*#__PURE__*/_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
+ */
+export function FloatingTools({
+  enablePositionPersistence = true,
+  pushToSide = false,
+  centerOnboarding = false,
+  children,
+  environment,
+  availableEnvironments,
+  onEnvironmentSwitch,
+  showEnvironmentSelector = false
+}) {
+  // Animated position and drag state
+  const animatedPosition = useRef(new Animated.ValueXY()).current;
+  const saveTimeoutRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [bubbleSize, setBubbleSize] = useState({
+    width: 100,
+    height: 32
+  });
+  const [isHidden, setIsHidden] = useState(false);
+
+  // Store the position before hiding to restore when showing
+  const savedPositionRef = useRef(null);
+
+  // Track if the hide state was triggered by pushToSide prop vs user toggle
+  const isPushedBySideRef = useRef(false);
+
+  // Track if user has explicitly chosen to show the menu (overriding pushToSide)
+  const userWantsVisibleRef = useRef(false);
+
+  // Track previous pushToSide value to detect transitions
+  const prevPushToSideRef = useRef(pushToSide);
+  const safeAreaInsets = useSafeAreaInsets();
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = Dimensions.get("window");
+
+  // Position persistence (state/IO extracted to hook)
+  const {
+    savePosition
+  } = useFloatingToolsPosition({
+    animatedPosition,
+    bubbleWidth: bubbleSize.width,
+    bubbleHeight: bubbleSize.height,
+    enabled: enablePositionPersistence,
+    visibleHandleWidth: 32,
+    listenersSuspended: isDragging
+  });
+
+  // Effect to handle pushToSide prop changes
+  useEffect(() => {
+    // 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 = animatedPosition.x.__getValue();
+      const currentY = animatedPosition.y.__getValue();
+
+      // Save current position
+      savedPositionRef.current = {
+        x: currentX,
+        y: currentY
+      };
+      const hiddenX = screenWidth - 32; // Show only the grabber
+      isPushedBySideRef.current = true;
+      setIsHidden(true);
+      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);
+        Animated.timing(animatedPosition, {
+          toValue: {
+            x: targetX,
+            y: targetY
+          },
+          duration: 200,
+          useNativeDriver: false
+        }).start(() => {
+          savePosition(targetX, targetY);
+        });
+      }
+    }
+  }, [pushToSide, isHidden, isDragging, screenWidth, animatedPosition, savePosition]);
+
+  // Check if bubble is in hidden position on load
+  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);
+      }
+    };
+    // Delay check to ensure position is loaded
+    const timer = setTimeout(checkHiddenState, 100);
+    return () => clearTimeout(timer);
+  }, [enablePositionPersistence, animatedPosition, screenWidth]);
+
+  // Default position when persistence disabled or during onboarding
+  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 = 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 = Math.max(safeAreaInsets.top + 20, Math.min(100, screenHeight - bubbleSize.height - safeAreaInsets.bottom));
+        animatedPosition.setValue({
+          x: screenWidth - bubbleSize.width - 20,
+          y: defaultY
+        });
+      }
+    }
+  }, [enablePositionPersistence, centerOnboarding, animatedPosition, bubbleSize.width, bubbleSize.height, safeAreaInsets.top, safeAreaInsets.bottom, screenWidth, screenHeight]);
+
+  // Cleanup timeout on component unmount
+  useEffect(() => {
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+        saveTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  // Toggle hide/show function
+  const toggleHideShow = useCallback(() => {
+    const currentX = animatedPosition.x.__getValue();
+    const currentY = animatedPosition.y.__getValue();
+
+    // 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 - 20;
+        targetY = currentY;
+      }
+
+      // User explicitly wants the menu visible (overrides pushToSide)
+      isPushedBySideRef.current = false;
+      userWantsVisibleRef.current = true;
+      setIsHidden(false);
+      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 - 32; // Only show the 32px grabber
+      setIsHidden(true);
+      Animated.timing(animatedPosition, {
+        toValue: {
+          x: hiddenX,
+          y: currentY
+        },
+        duration: 200,
+        useNativeDriver: false
+      }).start(() => {
+        savePosition(hiddenX, currentY);
+      });
+    }
+  }, [animatedPosition, isHidden, bubbleSize.width, savePosition, screenWidth]);
+  const handleDragStart = useCallback(() => {
+    setIsDragging(true);
+  }, []);
+  const handleDragEnd = 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 - 32; // Only show the 32px grabber
+      setIsHidden(true);
+      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 - 32 - 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]);
+
+  // Stable styles
+  const bubbleStyle = useMemo(() => ({
+    position: "absolute",
+    zIndex: 1001,
+    transform: animatedPosition.getTranslateTransform()
+  }), [animatedPosition]);
+
+  // Get minimized tools context and app host for restoration
+  const {
+    minimizedTools
+  } = useMinimizedTools();
+  const {
+    restore: restoreInAppHost
+  } = useAppHost();
+
+  // Check if minimized tools are showing (for seamless connection)
+  const hasMinimizedTools = minimizedTools.length > 0;
+  const containerStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: 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 ? floatingToolsColors.dragActive : buoyColors.textMuted + "66",
+    overflow: "visible",
+    elevation: 8,
+    shadowColor: isDragging ? floatingToolsColors.dragActive + "99" : "#000",
+    shadowOffset: {
+      width: 0,
+      height: isDragging ? 6 : 4
+    },
+    shadowOpacity: isDragging ? 0.6 : 0.3,
+    shadowRadius: isDragging ? 12 : 8
+  };
+  const dragHandleStyle = {
+    paddingHorizontal: 6,
+    paddingVertical: 6,
+    backgroundColor: buoyColors.textMuted + "1A",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 32,
+    borderRightWidth: 1,
+    borderRightColor: buoyColors.textMuted + "66",
+    // Remove top-left radius when minimized tools are showing
+    borderTopLeftRadius: hasMinimizedTools ? 0 : undefined
+  };
+  const contentStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingRight: 8
+  };
+
+  // Compose actions row with automatic dividers
+  const actions = useMemo(() => interleaveWithDividers(Children.toArray(children)), [children]);
+
+  // Handle restore from minimized tools stack
+  const handleMinimizedRestore = useCallback(tool => {
+    restoreInAppHost(tool.instanceId, tool.modalState);
+  }, [restoreInAppHost]);
+
+  // Width for the minimized tools stack - match the drag handle width
+  const minimizedStackWidth = 32;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: bubbleStyle,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        overflow: "visible"
+      },
+      children: [minimizedTools.length > 0 && /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          bottom: "100%",
+          left: 0,
+          width: minimizedStackWidth,
+          overflow: "visible",
+          zIndex: 1001
+        },
+        children: /*#__PURE__*/_jsx(MinimizedToolsStack, {
+          onRestore: handleMinimizedRestore,
+          containerWidth: minimizedStackWidth
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        hitSlop: {
+          top: 10,
+          bottom: 10,
+          left: 10,
+          right: 10
+        },
+        style: containerStyle,
+        onLayout: event => {
+          const {
+            width,
+            height
+          } = event.nativeEvent.layout;
+          setBubbleSize({
+            width,
+            height
+          });
+        },
+        children: [/*#__PURE__*/_jsx(DraggableHeader, {
+          position: animatedPosition,
+          onDragStart: handleDragStart,
+          onDragEnd: handleDragEnd,
+          onTap: toggleHideShow,
+          containerBounds: {
+            width: screenWidth,
+            height: screenHeight
+          },
+          elementSize: bubbleSize,
+          minPosition: {
+            x: safeAreaInsets.left,
+            y: safeAreaInsets.top + 20
+          },
+          style: dragHandleStyle,
+          enabled: true,
+          maxOverflowX: bubbleSize.width,
+          children: /*#__PURE__*/_jsx(GripVerticalIcon, {
+            size: 12,
+            color: buoyColors.textSecondary + "CC"
+          })
+        }), /*#__PURE__*/_jsx(FloatingToolsContext.Provider, {
+          value: {
+            isDragging
+          },
+          children: /*#__PURE__*/_jsxs(View, {
+            style: contentStyle,
+            children: [showEnvironmentSelector && environment && availableEnvironments && onEnvironmentSwitch && /*#__PURE__*/_jsx(EnvironmentSelectorInline, {
+              currentEnvironment: environment,
+              availableEnvironments: availableEnvironments,
+              onSelect: onEnvironmentSwitch
+            }), actions]
+          })
+        })]
+      })]
+    })
+  });
+}