@buoy-gg/core 1.7.2

package/lib/module/floatingMenu/FloatingMenu.js

@@ -0,0 +1,358 @@
+"use strict";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { TouchableOpacity, StyleSheet, View, Dimensions } from "react-native";
+import { FloatingTools, UserStatus } from "./floatingTools.js";
+import { DialDevTools } from "./dial/DialDevTools.js";
+import { EnvironmentIndicator, safeGetItem, safeSetItem, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
+import { useDevToolsSettings } from "./DevToolsSettingsModal.js";
+import { useAppHost } from "./AppHost.js";
+import { useDevToolsVisibility } from "./DevToolsVisibilityContext.js";
+import { toggleStateManager } from "./ToggleStateManager.js";
+import { OnboardingTooltip } from "./dial/OnboardingTooltip.js";
+
+/**
+ * Props for the floating developer tools launcher. Controls which apps are shown and
+ * how the menu integrates with the current host environment.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * FloatingMenu renders the persistent developer tools entry point. It handles visibility,
+ * integrates with the AppHost, and presents available tools as floating shortcuts and a dial.
+ */
+const FLOATING_MENU_ONBOARDING_KEY = "@react_buoy_floating_menu_tooltip_shown";
+const ONBOARDING_STEP_KEY = "@react_buoy_onboarding_step";
+const {
+  width: SCREEN_WIDTH,
+  height: SCREEN_HEIGHT
+} = Dimensions.get("window");
+export const FloatingMenu = ({
+  apps,
+  state,
+  actions,
+  hidden,
+  environment,
+  userRole,
+  availableEnvironments,
+  onEnvironmentSwitch
+}) => {
+  const [internalHidden, setInternalHidden] = useState(false);
+  const [showDial, setShowDial] = useState(false);
+  const [dialStateLoaded, setDialStateLoaded] = useState(false);
+  const [onboardingStep, setOnboardingStep] = useState(null);
+  const [, forceUpdate] = useState(0); // Used to force re-render when toggle states change
+  const onboardingDismissedRef = useRef(false); // Track if onboarding was dismissed
+  const hintsDisabled = useHintsDisabled();
+
+  // Load persisted dial state on mount
+  useEffect(() => {
+    const loadDialState = async () => {
+      try {
+        const savedDialOpen = await safeGetItem(devToolsStorageKeys.dial.isOpen());
+        if (savedDialOpen === "true") {
+          setShowDial(true);
+        }
+      } catch (error) {
+        // Failed to load dial state - use default (closed)
+      } finally {
+        setDialStateLoaded(true);
+      }
+    };
+    loadDialState();
+  }, []);
+
+  // Persist dial state when it changes
+  useEffect(() => {
+    // Only persist after initial state is loaded to avoid overwriting with default
+    if (!dialStateLoaded) return;
+    safeSetItem(devToolsStorageKeys.dial.isOpen(), showDial ? "true" : "false").catch(error => {
+      // Failed to save dial state - continue without persistence
+      console.warn("Failed to save dial state:", error);
+    });
+  }, [showDial, dialStateLoaded]);
+
+  // Determine if environment selector should be shown
+  const showEnvironmentSelector = Boolean(availableEnvironments?.length && onEnvironmentSwitch);
+  const {
+    isAnyOpen,
+    open,
+    registerApps
+  } = useAppHost();
+  const wasAppOpenRef = useRef(isAnyOpen);
+  const {
+    setDialOpen,
+    setToolOpen
+  } = useDevToolsVisibility();
+
+  // Check onboarding status on first load
+  useEffect(() => {
+    // Skip onboarding if hints are disabled
+    if (hintsDisabled) {
+      return;
+    }
+    const checkOnboarding = async () => {
+      try {
+        const hasSeenOnboarding = await safeGetItem(FLOATING_MENU_ONBOARDING_KEY);
+        if (!hasSeenOnboarding) {
+          // Small delay to let the UI settle before showing tooltip
+          setTimeout(() => {
+            setOnboardingStep("positioning");
+          }, 1000);
+        }
+      } catch (error) {
+        // If there's an error reading storage, don't show onboarding
+      }
+    };
+    checkOnboarding();
+  }, [hintsDisabled]);
+
+  // Subscribe to toggle state changes to update icon colors
+  useEffect(() => {
+    const unsubscribe = toggleStateManager.subscribe(() => {
+      forceUpdate(prev => prev + 1);
+    });
+    return unsubscribe;
+  }, []);
+
+  // Sync dial state with visibility context
+  useEffect(() => {
+    setDialOpen(showDial);
+  }, [showDial, setDialOpen]);
+
+  // Sync tool open state with visibility context
+  useEffect(() => {
+    setToolOpen(isAnyOpen);
+  }, [isAnyOpen, setToolOpen]);
+
+  // When an app is open or dial is shown, push the menu to the side instead of hiding completely
+  const shouldPushToSide = useMemo(() => Boolean(showDial || isAnyOpen), [showDial, isAnyOpen]);
+
+  // Use external hidden prop or internal hidden state for complete hiding
+  const isCompletelyHidden = useMemo(() => Boolean(hidden ?? internalHidden), [hidden, internalHidden]);
+  const {
+    settings: devToolsSettings
+  } = useDevToolsSettings();
+
+  // Register apps with AppHost for persistence
+  useEffect(() => {
+    if (registerApps) {
+      registerApps(apps);
+    }
+  }, [apps, registerApps]);
+  const mergedActions = useMemo(() => {
+    return {
+      ...(actions ?? {}),
+      closeMenu: () => setShowDial(false),
+      hideFloatingRow: () => setInternalHidden(true),
+      showFloatingRow: () => setInternalHidden(false),
+      notifyToggleChange: () => forceUpdate(prev => prev + 1)
+    };
+  }, [actions]);
+  useEffect(() => {
+    if (wasAppOpenRef.current && !isAnyOpen) {
+      setInternalHidden(false);
+      setShowDial(false);
+    }
+    wasAppOpenRef.current = isAnyOpen;
+  }, [isAnyOpen]);
+
+  // Filter function for floating tools based on settings
+  const isFloatingEnabled = id => {
+    if (!devToolsSettings) return false;
+    // Default to disabled for tools without explicit preferences
+    return devToolsSettings.floatingTools[id] ?? false;
+  };
+
+  // Dial is the default/only layout
+
+  const handlePress = app => {
+    // Call the app's onPress callback if provided, passing actions for toggle tools
+    app?.onPress?.(mergedActions);
+
+    // Only open modal if not a toggle-only tool
+    if (app.launchMode !== "toggle-only") {
+      // Resolve the icon for minimize stack display
+      // IMPORTANT: Use React.createElement for function components to preserve hooks
+      const resolvedIcon = typeof app.icon === "function" ? /*#__PURE__*/React.createElement(app.icon, {
+        slot: "dial",
+        size: 20
+      }) : app.icon;
+      open({
+        id: app.id,
+        title: app.name,
+        component: app.component,
+        props: app.props,
+        launchMode: app.launchMode ?? "self-modal",
+        singleton: app.singleton ?? true,
+        icon: resolvedIcon,
+        color: app.color
+      });
+    }
+  };
+  const handleOnboardingDismiss = () => {
+    // Mark as dismissed immediately in ref (synchronous, no re-render needed)
+    onboardingDismissedRef.current = true;
+
+    // Update state to hide tooltip
+    setOnboardingStep(null);
+
+    // Save to storage asynchronously in the background
+    safeSetItem(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);
+    });
+  };
+  const handleDialOpen = () => {
+    // If user opens dial during onboarding, mark onboarding as complete
+    if (isOnboarding) {
+      handleOnboardingDismiss();
+    }
+    setShowDial(true);
+  };
+
+  // Determine if we're in onboarding mode (only when explicitly set to positioning AND not dismissed AND hints not disabled)
+  const isOnboarding = onboardingStep === "positioning" && !onboardingDismissedRef.current && !hintsDisabled;
+
+  // During onboarding, disable position persistence and use centered position
+  const shouldEnablePositionPersistence = !isOnboarding;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isOnboarding && !showDial && !isAnyOpen && /*#__PURE__*/_jsxs(View, {
+      style: styles.onboardingContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.onboardingBackdrop
+      }), /*#__PURE__*/_jsx(OnboardingTooltip, {
+        visible: true,
+        onDismiss: handleOnboardingDismiss,
+        title: "Welcome to Buoy Dev Tools!",
+        message: "Grab and position this menu wherever you want, then tap the icon to open your dev tools."
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      nativeID: "floating-devtools-root",
+      pointerEvents: isCompletelyHidden ? "none" : "box-none",
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: isOnboarding ? 10001 : 9999,
+        // Higher z-index during onboarding to show above backdrop
+        opacity: isCompletelyHidden ? 0 : 1
+      },
+      children: /*#__PURE__*/_jsxs(FloatingTools, {
+        enablePositionPersistence: shouldEnablePositionPersistence,
+        pushToSide: shouldPushToSide,
+        centerOnboarding: isOnboarding,
+        environment: environment,
+        availableEnvironments: availableEnvironments,
+        onEnvironmentSwitch: onEnvironmentSwitch,
+        showEnvironmentSelector: showEnvironmentSelector && devToolsSettings?.floatingTools?.environment,
+        children: [devToolsSettings?.floatingTools?.environment && environment && !showEnvironmentSelector ? /*#__PURE__*/_jsx(EnvironmentIndicator, {
+          environment: environment
+        }) : null, userRole ? /*#__PURE__*/_jsx(UserStatus, {
+          userRole: userRole,
+          onPress: handleDialOpen
+        }) :
+        /*#__PURE__*/
+        // Fallback: small launcher icon to ensure settings are always accessible
+        _jsx(TouchableOpacity, {
+          accessibilityLabel: "Open Dev Tools Menu",
+          onPress: handleDialOpen,
+          style: styles.fab,
+          children: /*#__PURE__*/_jsx(View, {
+            style: styles.menuButton,
+            children: /*#__PURE__*/_jsx(MenuLauncherIcon, {
+              size: 14
+            })
+          })
+        }), apps.filter(a => (a.slot ?? "both") !== "dial" && isFloatingEnabled(a.id)).map(app => /*#__PURE__*/_jsx(TouchableOpacity, {
+          accessibilityLabel: app.name,
+          onPress: () => handlePress(app),
+          style: styles.fab,
+          children: (() => {
+            if (typeof app.icon === "function") {
+              const IconComponent = app.icon;
+              return /*#__PURE__*/_jsx(IconComponent, {
+                slot: "row",
+                size: 16,
+                state: state,
+                actions: mergedActions
+              });
+            }
+            return app.icon;
+          })()
+        }, `row-${app.id}`))]
+      })
+    }), showDial && /*#__PURE__*/_jsx(DialDevTools, {
+      apps: apps,
+      state: state,
+      actions: mergedActions,
+      onClose: () => {
+        setShowDial(false);
+      }
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  fab: {
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    borderRadius: 6,
+    marginRight: 4,
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 0,
+    minHeight: 0,
+    backgroundColor: "transparent"
+  },
+  menuButton: {
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    minWidth: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  menuDots: {
+    color: "#8CA2C8",
+    fontSize: 14,
+    fontWeight: "900"
+  },
+  onboardingContainer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 10000
+  },
+  onboardingBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.85)"
+  }
+});
+/** Minimal 3x3 dot icon used when the user status badge is unavailable. */
+const MenuLauncherIcon = ({
+  size = 14,
+  color = buoyColors.primary
+}) => {
+  const dotSize = Math.max(2, Math.floor(size / 4));
+  const gap = Math.max(1, Math.floor(size / 16));
+  const items = Array.from({
+    length: 9
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: size,
+      height: size,
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignContent: "center",
+      justifyContent: "center"
+    },
+    children: items.map((_, i) => /*#__PURE__*/_jsx(View, {
+      style: {
+        width: dotSize,
+        height: dotSize,
+        margin: gap,
+        borderRadius: 2,
+        backgroundColor: color
+      }
+    }, i))
+  });
+};

package/lib/module/floatingMenu/MinimizedToolsContext.js

@@ -0,0 +1,239 @@
+"use strict";
+
+import React, { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { Dimensions } from "react-native";
+import { safeGetItem, safeSetItem, getSafeAreaInsets } from "@buoy-gg/shared-ui";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Modal state to restore when reopening a minimized tool
+ */
+
+/**
+ * Represents a minimized tool that can be restored
+ */
+
+/**
+ * Position for a minimized tool icon in the stack
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+// ============================================================================
+// Constants
+// ============================================================================
+
+const ICON_SIZE = 44;
+const ICON_GAP = 12;
+const BOTTOM_OFFSET = 100; // Distance from safe area bottom
+const RIGHT_OFFSET = 16; // Distance from right edge
+
+/**
+ * Calculate the position of a minimized tool icon in the stack
+ * Icons stack upward from bottom-right corner
+ */
+export function getIconPosition(index) {
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = Dimensions.get("window");
+  const safeArea = getSafeAreaInsets();
+
+  // X position: right edge minus icon size and offset
+  const x = screenWidth - ICON_SIZE - RIGHT_OFFSET;
+
+  // Y position: bottom up, starting at safe area bottom + offset
+  const baseY = screenHeight - safeArea.bottom - BOTTOM_OFFSET - ICON_SIZE;
+  const y = baseY - index * (ICON_SIZE + ICON_GAP);
+  return {
+    x,
+    y
+  };
+}
+
+/**
+ * Get the icon size constant
+ */
+export function getIconSize() {
+  return ICON_SIZE;
+}
+
+/**
+ * Context value for minimized tools management
+ */
+
+// ============================================================================
+// Storage
+// ============================================================================
+
+const STORAGE_KEY = "@react_buoy_minimized_tools";
+const PERSISTENCE_DELAY = 500;
+
+/**
+ * Serializable version of MinimizedTool for storage
+ * (icon is not serializable, so we only store the id to reconstruct)
+ */
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const MinimizedToolsContext = /*#__PURE__*/createContext(null);
+
+// ============================================================================
+// Provider
+// ============================================================================
+
+/**
+ * Provider component for minimized tools management.
+ * Handles state, persistence, and provides context to children.
+ */
+export function MinimizedToolsProvider({
+  children,
+  getToolIcon
+}) {
+  const [minimizedTools, setMinimizedTools] = useState([]);
+  const [isRestored, setIsRestored] = useState(false);
+  const persistenceTimeoutRef = useRef(null);
+  const getToolIconRef = useRef(getToolIcon);
+
+  // Keep ref updated
+  useEffect(() => {
+    getToolIconRef.current = getToolIcon;
+  }, [getToolIcon]);
+
+  // Restore minimized tools from storage on mount
+  useEffect(() => {
+    const restoreMinimizedTools = async () => {
+      try {
+        const saved = await safeGetItem(STORAGE_KEY);
+        if (saved) {
+          const serialized = JSON.parse(saved);
+          // Reconstruct tools with icons
+          const restored = serialized.map(tool => ({
+            ...tool,
+            icon: getToolIconRef.current?.(tool.id) ?? null
+          }));
+          setMinimizedTools(restored);
+        }
+      } catch (error) {
+        // Failed to restore minimized tools - continue with empty state
+      }
+      setIsRestored(true);
+    };
+    restoreMinimizedTools();
+  }, []);
+
+  // Persist minimized tools to storage with debounce
+  useEffect(() => {
+    if (!isRestored) return;
+    if (persistenceTimeoutRef.current) {
+      clearTimeout(persistenceTimeoutRef.current);
+    }
+    persistenceTimeoutRef.current = setTimeout(() => {
+      // Serialize tools (exclude icon which is not serializable)
+      const serialized = minimizedTools.map(({
+        icon,
+        ...rest
+      }) => rest);
+      safeSetItem(STORAGE_KEY, JSON.stringify(serialized));
+    }, PERSISTENCE_DELAY);
+    return () => {
+      if (persistenceTimeoutRef.current) {
+        clearTimeout(persistenceTimeoutRef.current);
+      }
+    };
+  }, [minimizedTools, isRestored]);
+  const minimize = useCallback(tool => {
+    setMinimizedTools(current => {
+      // Check if already minimized (by id for singleton behavior)
+      const existing = current.find(t => t.id === tool.id);
+      if (existing) {
+        // Update existing minimized tool
+        return current.map(t => t.id === tool.id ? {
+          ...tool,
+          minimizedAt: Date.now()
+        } : t);
+      }
+      // Add new minimized tool
+      return [...current, {
+        ...tool,
+        minimizedAt: Date.now()
+      }];
+    });
+  }, []);
+  const restore = useCallback(instanceId => {
+    let restoredTool = null;
+    setMinimizedTools(current => {
+      const index = current.findIndex(t => t.instanceId === instanceId);
+      if (index === -1) return current;
+      restoredTool = current[index];
+      return current.filter(t => t.instanceId !== instanceId);
+    });
+    return restoredTool;
+  }, []);
+  const isMinimized = useCallback(id => {
+    return minimizedTools.some(t => t.id === id);
+  }, [minimizedTools]);
+  const getMinimizedTool = useCallback(instanceId => {
+    return minimizedTools.find(t => t.instanceId === instanceId);
+  }, [minimizedTools]);
+  const clearAll = useCallback(() => {
+    setMinimizedTools([]);
+  }, []);
+  const getNextIconPosition = useCallback(() => {
+    // Next icon will be at the current count index
+    return getIconPosition(minimizedTools.length);
+  }, [minimizedTools.length]);
+  const getToolIconPosition = useCallback(instanceId => {
+    const index = minimizedTools.findIndex(t => t.instanceId === instanceId);
+    if (index === -1) return null;
+    return getIconPosition(index);
+  }, [minimizedTools]);
+  const value = useMemo(() => ({
+    minimizedTools,
+    minimize,
+    restore,
+    isMinimized,
+    getMinimizedTool,
+    clearAll,
+    count: minimizedTools.length,
+    getNextIconPosition,
+    getToolIconPosition
+  }), [minimizedTools, minimize, restore, isMinimized, getMinimizedTool, clearAll, getNextIconPosition, getToolIconPosition]);
+  return /*#__PURE__*/_jsx(MinimizedToolsContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+/**
+ * Hook to access minimized tools context.
+ * Must be used within a MinimizedToolsProvider.
+ */
+export function useMinimizedTools() {
+  const context = useContext(MinimizedToolsContext);
+  if (!context) {
+    // Return a no-op implementation when outside provider
+    return {
+      minimizedTools: [],
+      minimize: () => {},
+      restore: () => null,
+      isMinimized: () => false,
+      getMinimizedTool: () => undefined,
+      clearAll: () => {},
+      count: 0,
+      getNextIconPosition: () => ({
+        x: 0,
+        y: 0
+      }),
+      getToolIconPosition: () => null
+    };
+  }
+  return context;
+}