@buoy-gg/core 1.7.2

package/lib/module/floatingMenu/MinimizedToolsStack.js

@@ -0,0 +1,202 @@
+"use strict";
+
+import React, { useCallback, useEffect, useRef } from "react";
+import { Animated, TouchableOpacity, StyleSheet, Easing } from "react-native";
+import { ExpandablePopover } from "@buoy-gg/shared-ui";
+import { useMinimizedTools } from "./MinimizedToolsContext.js";
+
+// ============================================================================
+// Constants
+// ============================================================================
+import { jsx as _jsx } from "react/jsx-runtime";
+const PEEK_HEIGHT = 28;
+const TOOLBAR_WIDTH = 44;
+const TOOL_ITEM_SIZE = 32;
+const ICON_GAP = 6;
+const TOOLBAR_PADDING = 8;
+const COLLAPSE_BUTTON_SIZE = 24;
+const STORAGE_KEY_EXPANDED = "@react_buoy_minimized_stack_expanded";
+
+// Glitch effect constants
+const GLITCH_DURATION_MS = 80;
+const MIN_GLITCH_DELAY = 2000;
+const MAX_GLITCH_DELAY = 6000;
+
+// ============================================================================
+// Glitch Tool Button Component
+// ============================================================================
+
+function GlitchToolButton({
+  tool,
+  onPress,
+  index
+}) {
+  const glitchX = useRef(new Animated.Value(0)).current;
+  const glitchOpacity = useRef(new Animated.Value(1)).current;
+  const glitchScale = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    let isMounted = true;
+    const runGlitch = () => {
+      if (!isMounted) return;
+      const d = GLITCH_DURATION_MS;
+      Animated.parallel([
+      // X displacement - quick shake
+      Animated.sequence([Animated.timing(glitchX, {
+        toValue: 3,
+        duration: d * 0.2,
+        easing: Easing.linear,
+        useNativeDriver: true
+      }), Animated.timing(glitchX, {
+        toValue: -3,
+        duration: d * 0.2,
+        easing: Easing.linear,
+        useNativeDriver: true
+      }), Animated.timing(glitchX, {
+        toValue: 2,
+        duration: d * 0.2,
+        easing: Easing.linear,
+        useNativeDriver: true
+      }), Animated.timing(glitchX, {
+        toValue: -1,
+        duration: d * 0.2,
+        easing: Easing.linear,
+        useNativeDriver: true
+      }), Animated.timing(glitchX, {
+        toValue: 0,
+        duration: d * 0.2,
+        easing: Easing.linear,
+        useNativeDriver: true
+      })]),
+      // Opacity flicker
+      Animated.sequence([Animated.timing(glitchOpacity, {
+        toValue: 0.4,
+        duration: d * 0.25,
+        useNativeDriver: true
+      }), Animated.timing(glitchOpacity, {
+        toValue: 1,
+        duration: d * 0.25,
+        useNativeDriver: true
+      }), Animated.timing(glitchOpacity, {
+        toValue: 0.6,
+        duration: d * 0.25,
+        useNativeDriver: true
+      }), Animated.timing(glitchOpacity, {
+        toValue: 1,
+        duration: d * 0.25,
+        useNativeDriver: true
+      })]),
+      // Scale pulse
+      Animated.sequence([Animated.timing(glitchScale, {
+        toValue: 1.1,
+        duration: d * 0.3,
+        useNativeDriver: true
+      }), Animated.timing(glitchScale, {
+        toValue: 0.95,
+        duration: d * 0.4,
+        useNativeDriver: true
+      }), Animated.timing(glitchScale, {
+        toValue: 1,
+        duration: d * 0.3,
+        useNativeDriver: true
+      })])]).start();
+    };
+    const scheduleNextGlitch = () => {
+      if (!isMounted) return;
+      const delay = MIN_GLITCH_DELAY + Math.random() * (MAX_GLITCH_DELAY - MIN_GLITCH_DELAY) + index * 300;
+      setTimeout(() => {
+        if (isMounted) {
+          runGlitch();
+          scheduleNextGlitch();
+        }
+      }, delay);
+    };
+    const initialDelay = 500 + Math.random() * 1500 + index * 200;
+    const timeoutId = setTimeout(() => {
+      if (isMounted) {
+        runGlitch();
+        scheduleNextGlitch();
+      }
+    }, initialDelay);
+    return () => {
+      isMounted = false;
+      clearTimeout(timeoutId);
+    };
+  }, [glitchX, glitchOpacity, glitchScale, index]);
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    onPress: () => onPress(tool),
+    activeOpacity: 0.7,
+    style: styles.toolButton,
+    accessibilityLabel: `Restore ${tool.title}`,
+    accessibilityRole: "button",
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: {
+        opacity: glitchOpacity,
+        transform: [{
+          translateX: glitchX
+        }, {
+          scale: glitchScale
+        }]
+      },
+      children: tool.icon
+    })
+  });
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function MinimizedToolsStack({
+  onRestore,
+  containerWidth = TOOLBAR_WIDTH
+}) {
+  const {
+    minimizedTools,
+    restore
+  } = useMinimizedTools();
+
+  // Calculate expanded height based on number of tools
+  const expandedHeight = TOOLBAR_PADDING + minimizedTools.length * TOOL_ITEM_SIZE + (minimizedTools.length - 1) * ICON_GAP + ICON_GAP + COLLAPSE_BUTTON_SIZE + 4;
+
+  // Handle tool press (restore)
+  const handleToolPress = useCallback(tool => {
+    const restored = restore(tool.instanceId);
+    if (restored && onRestore) {
+      onRestore(restored);
+    }
+  }, [restore, onRestore]);
+  return /*#__PURE__*/_jsx(ExpandablePopover, {
+    hasItems: minimizedTools.length > 0,
+    itemCount: minimizedTools.length,
+    showCount: true,
+    width: containerWidth,
+    expandedHeight: expandedHeight,
+    persistState: true,
+    storageKey: STORAGE_KEY_EXPANDED,
+    peekHeight: PEEK_HEIGHT,
+    collapsedLabel: `Show ${minimizedTools.length} minimized tools`,
+    children: [...minimizedTools].reverse().map((tool, index) => /*#__PURE__*/_jsx(GlitchToolButton, {
+      tool: tool,
+      onPress: handleToolPress,
+      index: index
+    }, tool.instanceId))
+  });
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = StyleSheet.create({
+  toolButton: {
+    width: TOOL_ITEM_SIZE,
+    height: TOOL_ITEM_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent"
+  }
+});

package/lib/module/floatingMenu/ToggleStateManager.js

@@ -0,0 +1,32 @@
+"use strict";
+
+/**
+ * ToggleStateManager
+ *
+ * Global event emitter for toggle-only dev tools to notify when their state changes.
+ * This allows FloatingMenu to re-render and update icon colors.
+ */
+
+class ToggleStateManager {
+  listeners = new Set();
+
+  /**
+   * Subscribe to any toggle state change
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  /**
+   * Notify all subscribers that a toggle state changed
+   */
+  notify() {
+    this.listeners.forEach(listener => listener());
+  }
+}
+
+// Singleton instance
+export const toggleStateManager = new ToggleStateManager();

package/lib/module/floatingMenu/autoDiscoverPresets.js

@@ -0,0 +1,236 @@
+"use strict";
+
+/**
+ * Automatically discovers and loads dev tool presets from installed packages.
+ *
+ * This function attempts to import presets from known dev tool packages.
+ * If a package is installed, its preset will be automatically loaded.
+ * If a package is not installed, it will be silently skipped.
+ *
+ * This enables zero-config setup - just install the packages you want
+ * and they'll automatically appear in your dev tools!
+ *
+ * @returns Array of automatically discovered preset configurations
+ *
+ * @example
+ * ```tsx
+ * import { FloatingDevTools, autoDiscoverPresets } from '@buoy-gg/core';
+ *
+ * // Automatically discover and load all installed dev tool presets
+ * const autoPresets = autoDiscoverPresets();
+ *
+ * function App() {
+ *   return (
+ *     <FloatingDevTools
+ *       apps={autoPresets} // That's it! All installed tools load automatically
+ *       environment="local"
+ *       userRole="admin"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Combine auto-discovery with custom tools
+ * const autoPresets = autoDiscoverPresets();
+ * const customTools = [
+ *   {
+ *     id: "my-custom-tool",
+ *     name: "CUSTOM",
+ *     // ... custom config
+ *   },
+ * ];
+ *
+ * const allTools = [...autoPresets, ...customTools];
+ *
+ * <FloatingDevTools apps={allTools} />
+ * ```
+ */
+export function autoDiscoverPresets() {
+  const discoveredPresets = [];
+
+  // Try to load each known preset
+  // These will only succeed if the package is actually installed
+  const presetLoaders = [
+  // ENV Tools
+  {
+    name: "@buoy-gg/env",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          envToolPreset
+        } = require("@buoy-gg/env");
+        return envToolPreset;
+      } catch {
+        return null;
+      }
+    }
+  },
+  // Network Tools
+  {
+    name: "@buoy-gg/network",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          networkToolPreset
+        } = require("@buoy-gg/network");
+        return networkToolPreset;
+      } catch {
+        return null;
+      }
+    }
+  },
+  // Storage Tools
+  {
+    name: "@buoy-gg/storage",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          storageToolPreset
+        } = require("@buoy-gg/storage");
+        return storageToolPreset;
+      } catch {
+        return null;
+      }
+    }
+  },
+  // React Query Tools
+  {
+    name: "@buoy-gg/react-query",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          reactQueryToolPreset,
+          wifiTogglePreset
+        } = require("@buoy-gg/react-query");
+        return [reactQueryToolPreset, wifiTogglePreset];
+      } catch {
+        return null;
+      }
+    }
+  },
+  // Route Events
+  {
+    name: "@buoy-gg/route-events",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          routeEventsToolPreset
+        } = require("@buoy-gg/route-events");
+        return routeEventsToolPreset;
+      } catch {
+        return null;
+      }
+    }
+  },
+  // Debug Borders
+  {
+    name: "@buoy-gg/debug-borders",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          debugBordersToolPreset
+        } = require("@buoy-gg/debug-borders");
+        return debugBordersToolPreset;
+      } catch {
+        return null;
+      }
+    }
+  },
+  // Highlight Updates (both toggle and modal presets)
+  {
+    name: "@buoy-gg/highlight-updates",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          highlightUpdatesPreset,
+          highlightUpdatesModalPreset
+        } = require("@buoy-gg/highlight-updates");
+        return [highlightUpdatesModalPreset, highlightUpdatesPreset];
+      } catch {
+        return null;
+      }
+    }
+  },
+  // Benchmark Tools
+  {
+    name: "@buoy-gg/benchmark",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          benchmarkPreset
+        } = require("@buoy-gg/benchmark");
+        return benchmarkPreset;
+      } catch {
+        return null;
+      }
+    }
+  }];
+
+  // Attempt to load each preset
+  for (const {
+    name,
+    loader
+  } of presetLoaders) {
+    try {
+      const preset = loader();
+      if (preset) {
+        if (Array.isArray(preset)) {
+          discoveredPresets.push(...preset);
+        } else {
+          discoveredPresets.push(preset);
+        }
+      }
+    } catch (error) {
+      // Silently skip packages that aren't installed
+      // This is expected behavior - not all packages will be installed
+    }
+  }
+  return discoveredPresets;
+}
+
+/**
+ * Merges auto-discovered presets with custom tools, ensuring no duplicates.
+ * Custom tools take precedence over auto-discovered ones with the same ID.
+ *
+ * @param customTools - Array of custom tool configurations
+ * @returns Combined array of tools with custom tools taking precedence
+ *
+ * @example
+ * ```tsx
+ * import { FloatingDevTools, autoDiscoverPresetsWithCustom } from '@buoy-gg/core';
+ * import { createEnvTool } from '@buoy-gg/env';
+ *
+ * const customTools = [
+ *   // Override the env preset with custom config
+ *   createEnvTool({
+ *     requiredEnvVars: myRequiredVars,
+ *   }),
+ * ];
+ *
+ * const allTools = autoDiscoverPresetsWithCustom(customTools);
+ *
+ * <FloatingDevTools apps={allTools} />
+ * ```
+ */
+export function autoDiscoverPresetsWithCustom(customTools) {
+  const autoPresets = autoDiscoverPresets();
+
+  // Create a map of custom tool IDs for quick lookup
+  const customToolIds = new Set(customTools.map(tool => tool.id));
+
+  // Filter out auto-discovered presets that have custom overrides
+  const filteredAutoPresets = autoPresets.filter(preset => !customToolIds.has(preset.id));
+
+  // Custom tools first (higher priority), then auto-discovered
+  return [...customTools, ...filteredAutoPresets];
+}

package/lib/module/floatingMenu/defaultConfig.js

@@ -0,0 +1,151 @@
+"use strict";
+
+/**
+ * Type-safe default configuration for React Buoy DevTools.
+ *
+ * This module provides a simple, type-safe way for teams to configure
+ * which tools are enabled by default in the floating menu and dial menu.
+ *
+ * @example
+ * ```tsx
+ * import { FloatingDevTools } from '@buoy-gg/core';
+ *
+ * // Simple: Enable specific tools by default
+ * <FloatingDevTools
+ *   defaultFloatingTools={['env', 'environment', 'network']}
+ *   defaultDialTools={['env', 'network', 'storage', 'query']}
+ * />
+ * ```
+ */
+
+/**
+ * All known tool IDs that can appear in the floating menu or dial menu.
+ * This is a union type of all auto-discovered tool IDs.
+ */
+
+// Performance benchmarking (@buoy-gg/benchmark)
+
+/**
+ * Special floating-only tool IDs that only appear in the floating bubble row.
+ */
+// Environment badge indicator
+
+/**
+ * All tool IDs that can appear in the floating menu (bubble row).
+ * Includes all built-in tools plus floating-only tools.
+ */
+
+/**
+ * Tool IDs that can appear in the dial menu.
+ * Same as BuiltInToolId (environment badge is floating-only).
+ */
+
+/**
+ * Maximum number of tools allowed in the dial menu.
+ */
+export const MAX_DIAL_TOOLS = 6;
+
+/**
+ * Configuration for default floating menu tools.
+ * Pass an array of tool IDs to enable by default.
+ *
+ * @example
+ * ```tsx
+ * const floatingDefaults: DefaultFloatingConfig = ['env', 'environment', 'network'];
+ * ```
+ */
+
+/**
+ * Configuration for default dial menu tools.
+ * Pass an array of 1-6 tool IDs to enable by default.
+ *
+ * @example
+ * ```tsx
+ * const dialDefaults: DefaultDialConfig = ['env', 'network', 'storage', 'query'];
+ * ```
+ */
+
+/**
+ * Validates that a dial configuration doesn't exceed the maximum allowed tools.
+ * Throws an error with helpful message if validation fails.
+ *
+ * @param tools - Array of dial tool IDs to validate
+ * @throws Error if more than MAX_DIAL_TOOLS are provided
+ *
+ * @example
+ * ```tsx
+ * // This is valid
+ * validateDialConfig(['env', 'network', 'storage']);
+ *
+ * // This throws an error
+ * validateDialConfig(['env', 'network', 'storage', 'query', 'route-events', 'debug-borders', 'benchmark']);
+ * // Error: "Dial menu default configuration has 7 tools, but maximum is 6..."
+ * ```
+ */
+export function validateDialConfig(tools) {
+  if (tools.length > MAX_DIAL_TOOLS) {
+    const toolList = tools.map(t => `"${t}"`).join(', ');
+    throw new Error(`Dial menu default configuration has ${tools.length} tools, but maximum is ${MAX_DIAL_TOOLS}. ` + `Tools provided: [${toolList}]. ` + `Please remove ${tools.length - MAX_DIAL_TOOLS} tool(s) from defaultDialTools.`);
+  }
+}
+
+/**
+ * Helper to create a type-safe default configuration.
+ * Provides autocomplete and validation at compile time.
+ *
+ * @example
+ * ```tsx
+ * import { createDefaultConfig } from '@buoy-gg/core';
+ *
+ * const config = createDefaultConfig({
+ *   floating: ['env', 'environment', 'network', 'query-wifi-toggle'],
+ *   dial: ['env', 'network', 'storage', 'query', 'route-events', 'debug-borders'],
+ * });
+ *
+ * <FloatingDevTools
+ *   defaultFloatingTools={config.floating}
+ *   defaultDialTools={config.dial}
+ * />
+ * ```
+ */
+export function createDefaultConfig(config) {
+  // Runtime validation for dial tools
+  if (config.dial) {
+    validateDialConfig(config.dial);
+  }
+  return {
+    floating: config.floating,
+    dial: config.dial
+  };
+}
+
+/**
+ * Type guard to check if a string is a valid FloatingToolId.
+ */
+export function isFloatingToolId(id) {
+  const validIds = ['env', 'network', 'storage', 'query', 'query-wifi-toggle', 'route-events', 'debug-borders', 'highlight-updates', 'highlight-updates-modal', 'benchmark', 'environment'];
+  return validIds.includes(id);
+}
+
+/**
+ * Type guard to check if a string is a valid DialToolId.
+ */
+export function isDialToolId(id) {
+  const validIds = ['env', 'network', 'storage', 'query', 'query-wifi-toggle', 'route-events', 'debug-borders', 'highlight-updates', 'highlight-updates-modal', 'benchmark'];
+  return validIds.includes(id);
+}
+
+/**
+ * Converts an array of tool IDs into a settings record.
+ * Used internally to convert default config to DevToolsSettings format.
+ *
+ * @internal
+ */
+export function toolIdsToRecord(ids, allPossibleIds) {
+  const record = {};
+  const enabledSet = new Set(ids);
+  for (const id of allPossibleIds) {
+    record[id] = enabledSet.has(id);
+  }
+  return record;
+}