@buoy-gg/core 1.7.2

package/lib/module/floatingMenu/DevToolsVisibilityContext.js

@@ -0,0 +1,44 @@
+"use strict";
+
+/**
+ * DevToolsVisibilityContext
+ *
+ * Tracks when DevTools UI is visible (dial menu, modals, etc.)
+ * Used by other tools (like debug borders) to hide when DevTools are active
+ */
+
+import { createContext, useContext, useState, useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DevToolsVisibilityContext = /*#__PURE__*/createContext(null);
+export function DevToolsVisibilityProvider({
+  children
+}) {
+  const [isDialOpen, setDialOpen] = useState(false);
+  const [isToolOpen, setToolOpen] = useState(false);
+  const isDevToolsActive = useMemo(() => isDialOpen || isToolOpen, [isDialOpen, isToolOpen]);
+  const value = useMemo(() => ({
+    isDialOpen,
+    isToolOpen,
+    isDevToolsActive,
+    setDialOpen,
+    setToolOpen
+  }), [isDialOpen, isToolOpen, isDevToolsActive]);
+  return /*#__PURE__*/_jsx(DevToolsVisibilityContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export function useDevToolsVisibility() {
+  const context = useContext(DevToolsVisibilityContext);
+  if (!context) {
+    // Return safe defaults if not within provider
+    return {
+      isDialOpen: false,
+      isToolOpen: false,
+      isDevToolsActive: false,
+      setDialOpen: () => {},
+      setToolOpen: () => {}
+    };
+  }
+  return context;
+}

package/lib/module/floatingMenu/DraggableHeader.js

@@ -0,0 +1,110 @@
+"use strict";
+
+import { useRef, useMemo, memo } from 'react';
+import { View, PanResponder, Dimensions } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DraggableHeader = /*#__PURE__*/memo(function DraggableHeader({
+  children,
+  position,
+  onDragStart,
+  onDragEnd,
+  onTap,
+  containerBounds = Dimensions.get('window'),
+  elementSize = {
+    width: 100,
+    height: 50
+  },
+  minPosition = {
+    x: 0,
+    y: 0
+  },
+  style,
+  enabled = true,
+  maxOverflowX = 0
+}) {
+  const isDraggingRef = useRef(false);
+  const dragDistanceRef = useRef(0);
+  const touchOffsetRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const startPositionRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const panResponder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => enabled,
+    onMoveShouldSetPanResponder: (_, g) => enabled && (Math.abs(g.dx) > 1 || Math.abs(g.dy) > 1),
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderGrant: evt => {
+      isDraggingRef.current = false;
+      dragDistanceRef.current = 0;
+      touchOffsetRef.current = {
+        x: evt.nativeEvent.locationX,
+        y: evt.nativeEvent.locationY
+      };
+      // Capture starting position in parent coords; avoid relying on window pageX/pageY
+      position.stopAnimation(({
+        x,
+        y
+      }) => {
+        startPositionRef.current = {
+          x,
+          y
+        };
+      });
+    },
+    onPanResponderMove: (_evt, gestureState) => {
+      const totalDistance = Math.abs(gestureState.dx) + Math.abs(gestureState.dy);
+      dragDistanceRef.current = totalDistance;
+      if (totalDistance > 5 && !isDraggingRef.current) {
+        isDraggingRef.current = true;
+        onDragStart?.();
+      }
+      // Use dx/dy relative movement so parent padding/margins don't affect dragging
+      const x = startPositionRef.current.x + gestureState.dx;
+      const y = startPositionRef.current.y + gestureState.dy;
+      position.setValue({
+        x,
+        y
+      });
+    },
+    onPanResponderRelease: () => {
+      // Check if this was a tap (minimal movement) before doing anything else
+      const wasTap = dragDistanceRef.current <= 5 && !isDraggingRef.current;
+      if (wasTap) {
+        // For taps, just call the tap handler immediately - no position manipulation needed
+        onTap?.();
+        isDraggingRef.current = false;
+        return;
+      }
+
+      // For drags, get the final position and clamp it
+      position.stopAnimation(({
+        x: currentX,
+        y: currentY
+      }) => {
+        const maxX = containerBounds.width - elementSize.width + maxOverflowX;
+        const clampedX = Math.max(minPosition.x, Math.min(currentX, maxX));
+        const clampedY = Math.max(minPosition.y, Math.min(currentY, containerBounds.height - elementSize.height));
+        position.setValue({
+          x: clampedX,
+          y: clampedY
+        });
+        onDragEnd?.({
+          x: clampedX,
+          y: clampedY
+        });
+        isDraggingRef.current = false;
+      });
+    },
+    onPanResponderTerminate: () => {
+      isDraggingRef.current = false;
+    }
+  }), [enabled, position, onDragStart, onDragEnd, onTap, containerBounds, elementSize, minPosition, maxOverflowX]);
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    ...panResponder.panHandlers,
+    children: children
+  });
+});

package/lib/module/floatingMenu/FloatingDevTools.js

@@ -0,0 +1,249 @@
+"use strict";
+
+import React, { useMemo, useCallback, useEffect } from "react";
+import { View, StyleSheet } from "react-native";
+import { AppHostProvider } from "./AppHost.js";
+import { FloatingMenu } from "./FloatingMenu.js";
+import { AppOverlay } from "./AppHost.js";
+import { autoDiscoverPresets, autoDiscoverPresetsWithCustom } from "./autoDiscoverPresets.js";
+import { DevToolsVisibilityProvider } from "./DevToolsVisibilityContext.js";
+import { HintsProvider } from "@buoy-gg/shared-ui";
+import { MinimizedToolsProvider } from "./MinimizedToolsContext.js";
+import { validateDialConfig } from "./defaultConfig.js";
+import { DefaultConfigProvider } from "./DefaultConfigContext.js";
+import { LicenseManager } from "@buoy-gg/license";
+
+/**
+ * Environment variable configuration
+ *
+ * This type is compatible with RequiredEnvVar from @buoy-gg/env
+ *
+ * @example
+ * ```tsx
+ * // Simple string (just check existence)
+ * "API_URL"
+ *
+ * // Check for specific type
+ * { key: "DEBUG_MODE", expectedType: "boolean" }
+ *
+ * // Check for specific value
+ * { key: "ENVIRONMENT", expectedValue: "development" }
+ * ```
+ */
+
+/**
+ * Storage key configuration for monitoring
+ */
+
+/**
+ * Props for FloatingDevTools component.
+ * Apps prop is optional - if not provided, all installed dev tools are auto-discovered.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Unified floating development tools component with automatic preset discovery.
+ *
+ * This component combines AppHostProvider, FloatingMenu, and AppOverlay
+ * into a single component for simplified setup and better developer experience.
+ *
+ * **Zero-Config Usage:**
+ * ```tsx
+ * <FloatingDevTools environment="local" userRole="admin" />
+ * // All installed dev tools automatically appear!
+ * ```
+ *
+ * **With Team Default Configuration (Type-Safe!):**
+ * ```tsx
+ * // Set which tools are enabled by default for your team
+ * <FloatingDevTools
+ *   // Floating bubble: ENV badge + WiFi toggle
+ *   defaultFloatingTools={['env', 'environment', 'query-wifi-toggle']}
+ *   // Dial menu: your team's 6 favorite tools (max 6!)
+ *   defaultDialTools={['env', 'network', 'storage', 'query', 'route-events', 'debug-borders']}
+ *   environment="local"
+ *   userRole="admin"
+ * />
+ * ```
+ *
+ * **With Validation (Super Simple!):**
+ * ```tsx
+ * <FloatingDevTools
+ *   requiredEnvVars={[
+ *     "API_URL",  // Just check existence
+ *     { key: "DEBUG_MODE", expectedType: "boolean" },
+ *   ]}
+ *   requiredStorageKeys={[
+ *     { key: "@app/session", storageType: "async" },
+ *   ]}
+ *   environment="local"
+ *   userRole="admin"
+ * />
+ * ```
+ *
+ * **With Custom Tools:**
+ * ```tsx
+ * <FloatingDevTools
+ *   apps={[myCustomTool]}
+ *   environment="local"
+ *   userRole="admin"
+ * />
+ * ```
+ *
+ * The component is absolutely positioned to float on top of your application
+ * regardless of where it's placed in the component tree.
+ *
+ * @param props - FloatingDevTools props
+ */
+export const FloatingDevTools = ({
+  apps,
+  requiredEnvVars,
+  requiredStorageKeys,
+  children,
+  disableHints = false,
+  defaultFloatingTools,
+  defaultDialTools,
+  ...props
+}) => {
+  // Initialize license manager on mount
+  useEffect(() => {
+    LicenseManager.initialize();
+  }, []);
+
+  // Validate dial tools configuration on mount (development-time check)
+  useEffect(() => {
+    if (defaultDialTools) {
+      validateDialConfig(defaultDialTools);
+    }
+  }, [defaultDialTools]);
+
+  // Build config overrides if requiredEnvVars or requiredStorageKeys are provided
+  const configOverrides = useMemo(() => {
+    const overrides = [];
+
+    // If requiredEnvVars provided, create ENV tool config
+    if (requiredEnvVars && requiredEnvVars.length > 0) {
+      try {
+        const {
+          createEnvTool,
+          createEnvVarConfig
+        } = require("@buoy-gg/env");
+        // Convert simple format to the internal format
+        overrides.push(createEnvTool({
+          requiredEnvVars: createEnvVarConfig(requiredEnvVars)
+        }));
+      } catch (error) {
+        // Package not installed, skip
+      }
+    }
+
+    // If requiredStorageKeys provided, create Storage tool config
+    if (requiredStorageKeys && requiredStorageKeys.length > 0) {
+      try {
+        const {
+          createStorageTool
+        } = require("@buoy-gg/storage");
+        overrides.push(createStorageTool({
+          requiredStorageKeys
+        }));
+      } catch (error) {
+        // Package not installed, skip
+      }
+    }
+    return overrides;
+  }, [requiredEnvVars, requiredStorageKeys]);
+
+  // Combine user apps with config overrides
+  const userApps = useMemo(() => {
+    if (!apps && configOverrides.length === 0) return undefined;
+    return [...(apps || []), ...configOverrides];
+  }, [apps, configOverrides]);
+
+  // Always auto-discover, then merge with any user-provided apps or config overrides
+  // User-provided apps and config overrides take precedence (by ID)
+  const finalApps = userApps ? autoDiscoverPresetsWithCustom(userApps) : autoDiscoverPresets();
+
+  // Check if debug-borders is installed and auto-render the overlay
+  const DebugBordersOverlay = useMemo(() => {
+    try {
+      // @ts-ignore - Dynamic import that may not exist
+      const {
+        DebugBordersStandaloneOverlay
+      } = require("@buoy-gg/debug-borders");
+      return DebugBordersStandaloneOverlay;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  // Check if highlight-updates is installed and auto-render the overlay
+  const HighlightUpdatesOverlay = useMemo(() => {
+    try {
+      // @ts-ignore - Dynamic import that may not exist
+      const {
+        HighlightUpdatesOverlay: Overlay
+      } = require("@buoy-gg/highlight-updates");
+      return Overlay;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  // Check if route-events is installed and auto-render the RouteTracker
+  // This enables automatic route tracking without requiring users to add <RouteTracker /> manually
+  const RouteTracker = useMemo(() => {
+    try {
+      // @ts-ignore - Dynamic import that may not exist
+      const {
+        RouteTracker: Tracker
+      } = require("@buoy-gg/route-events");
+      return Tracker;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  // Get tool icon helper for the MinimizedToolsProvider
+  const getToolIcon = useCallback(id => {
+    const tool = finalApps.find(app => app.id === id);
+    if (!tool) return null;
+    if (typeof tool.icon === "function") {
+      return tool.icon({
+        slot: "dial",
+        size: 20
+      });
+    }
+    return tool.icon;
+  }, [finalApps]);
+  return /*#__PURE__*/_jsx(DefaultConfigProvider, {
+    defaultFloatingTools: defaultFloatingTools,
+    defaultDialTools: defaultDialTools,
+    children: /*#__PURE__*/_jsx(HintsProvider, {
+      disableHints: disableHints,
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.container,
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/_jsxs(DevToolsVisibilityProvider, {
+          children: [/*#__PURE__*/_jsx(AppHostProvider, {
+            children: /*#__PURE__*/_jsxs(MinimizedToolsProvider, {
+              getToolIcon: getToolIcon,
+              children: [/*#__PURE__*/_jsx(FloatingMenu, {
+                ...props,
+                apps: finalApps
+              }), /*#__PURE__*/_jsx(AppOverlay, {})]
+            })
+          }), children, DebugBordersOverlay && /*#__PURE__*/_jsx(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/_jsx(HighlightUpdatesOverlay, {}), RouteTracker && /*#__PURE__*/_jsx(RouteTracker, {})]
+        })
+      })
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 9999
+  }
+});