@buoy-gg/core 1.7.2

package/lib/commonjs/floatingMenu/DevToolsVisibilityContext.js

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

package/lib/commonjs/floatingMenu/DraggableHeader.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DraggableHeader = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+const DraggableHeader = exports.DraggableHeader = /*#__PURE__*/(0, _react.memo)(function DraggableHeader({
+  children,
+  position,
+  onDragStart,
+  onDragEnd,
+  onTap,
+  containerBounds = _reactNative.Dimensions.get('window'),
+  elementSize = {
+    width: 100,
+    height: 50
+  },
+  minPosition = {
+    x: 0,
+    y: 0
+  },
+  style,
+  enabled = true,
+  maxOverflowX = 0
+}) {
+  const isDraggingRef = (0, _react.useRef)(false);
+  const dragDistanceRef = (0, _react.useRef)(0);
+  const touchOffsetRef = (0, _react.useRef)({
+    x: 0,
+    y: 0
+  });
+  const startPositionRef = (0, _react.useRef)({
+    x: 0,
+    y: 0
+  });
+  const panResponder = (0, _react.useMemo)(() => _reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style,
+    ...panResponder.panHandlers,
+    children: children
+  });
+});

package/lib/commonjs/floatingMenu/FloatingDevTools.js

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingDevTools = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _AppHost = require("./AppHost.js");
+var _FloatingMenu = require("./FloatingMenu.js");
+var _autoDiscoverPresets = require("./autoDiscoverPresets.js");
+var _DevToolsVisibilityContext = require("./DevToolsVisibilityContext.js");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _MinimizedToolsContext = require("./MinimizedToolsContext.js");
+var _defaultConfig = require("./defaultConfig.js");
+var _DefaultConfigContext = require("./DefaultConfigContext.js");
+var _license = require("@buoy-gg/license");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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.
+ */
+
+/**
+ * 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
+ */
+const FloatingDevTools = ({
+  apps,
+  requiredEnvVars,
+  requiredStorageKeys,
+  children,
+  disableHints = false,
+  defaultFloatingTools,
+  defaultDialTools,
+  ...props
+}) => {
+  // Initialize license manager on mount
+  (0, _react.useEffect)(() => {
+    _license.LicenseManager.initialize();
+  }, []);
+
+  // Validate dial tools configuration on mount (development-time check)
+  (0, _react.useEffect)(() => {
+    if (defaultDialTools) {
+      (0, _defaultConfig.validateDialConfig)(defaultDialTools);
+    }
+  }, [defaultDialTools]);
+
+  // Build config overrides if requiredEnvVars or requiredStorageKeys are provided
+  const configOverrides = (0, _react.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 = (0, _react.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 ? (0, _autoDiscoverPresets.autoDiscoverPresetsWithCustom)(userApps) : (0, _autoDiscoverPresets.autoDiscoverPresets)();
+
+  // Check if debug-borders is installed and auto-render the overlay
+  const DebugBordersOverlay = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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__*/(0, _jsxRuntime.jsx)(_DefaultConfigContext.DefaultConfigProvider, {
+    defaultFloatingTools: defaultFloatingTools,
+    defaultDialTools: defaultDialTools,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HintsProvider, {
+      disableHints: disableHints,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.container,
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DevToolsVisibilityContext.DevToolsVisibilityProvider, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHost.AppHostProvider, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MinimizedToolsContext.MinimizedToolsProvider, {
+              getToolIcon: getToolIcon,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingMenu.FloatingMenu, {
+                ...props,
+                apps: finalApps
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHost.AppOverlay, {})]
+            })
+          }), children, DebugBordersOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightUpdatesOverlay, {}), RouteTracker && /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteTracker, {})]
+        })
+      })
+    })
+  });
+};
+exports.FloatingDevTools = FloatingDevTools;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 9999
+  }
+});