@buoy-gg/core 1.7.7 → 2.1.1

package/lib/module/floatingMenu/FloatingDevTools.js

@@ -11,7 +11,7 @@ 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";
+import { LicenseManager, useIsPro } from "@buoy-gg/license";
 
 /**
  * Environment variable configuration
@@ -104,16 +104,20 @@ export const FloatingDevTools = ({
   defaultDialTools,
   ...props
 }) => {
+  // Check Pro status for production gating
+  const isPro = useIsPro();
+
   // Initialize license manager on mount
   useEffect(() => {
     LicenseManager.initialize();
   }, []);
 
-  // Validate dial tools configuration on mount (development-time check)
-  useEffect(() => {
+  // Normalize dial tools configuration (truncates to max 6 with warning if needed)
+  const normalizedDialTools = useMemo(() => {
     if (defaultDialTools) {
-      validateDialConfig(defaultDialTools);
+      return validateDialConfig(defaultDialTools);
     }
+    return defaultDialTools;
   }, [defaultDialTools]);
 
   // Build config overrides if requiredEnvVars or requiredStorageKeys are provided
@@ -214,9 +218,17 @@ export const FloatingDevTools = ({
     }
     return tool.icon;
   }, [finalApps]);
+
+  // Gate: Free tier only works in development mode
+  // Pro users can use DevTools everywhere (dev + production)
+  const isDevelopment = typeof __DEV__ !== "undefined" && __DEV__;
+  if (!isDevelopment && !isPro) {
+    // Free user in production - don't render DevTools
+    return null;
+  }
   return /*#__PURE__*/_jsx(DefaultConfigProvider, {
     defaultFloatingTools: defaultFloatingTools,
-    defaultDialTools: defaultDialTools,
+    defaultDialTools: normalizedDialTools,
     children: /*#__PURE__*/_jsx(HintsProvider, {
       disableHints: disableHints,
       children: /*#__PURE__*/_jsx(View, {

package/lib/module/floatingMenu/FloatingDevTools.web.js

@@ -0,0 +1,149 @@
+"use strict";
+
+/**
+ * FloatingDevTools - Unified dev tools component for React DOM Web.
+ *
+ * Matches the mobile FloatingDevTools API exactly:
+ * - Self-contained (doesn't wrap your app)
+ * - Auto-discovers installed tool packages
+ * - Manages dial menu and settings modal state internally
+ *
+ * Usage (same as mobile):
+ * ```tsx
+ * <>
+ *   <YourApp />
+ *   <FloatingDevTools environment="qa" userRole="admin" />
+ * </>
+ * ```
+ *
+ * @platform React DOM Web (Vite, CRA, Next.js, Electron)
+ */
+
+import { useState, useMemo, useCallback } from 'react';
+import { useSettings, getToolLabel, getToolDescription, getToolColor } from '@buoy-gg/floating-tools-react';
+import { autoDiscoverWithCustom, getToolsBySlot } from "../utils/autoDiscoverPresets.web.js";
+import { FloatingTools, UserStatus } from "./floatingTools.web.js";
+import { DialMenu } from "./dial/DialDevTools.web.js";
+import { SettingsModal } from "./DevToolsSettingsModal.web.js";
+
+// =============================
+// Types
+// =============================
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================
+// Main Component
+// =============================
+
+/**
+ * Unified FloatingDevTools component - self-contained, no wrapping required.
+ *
+ * Matches mobile API exactly:
+ * ```tsx
+ * // Mobile
+ * <FloatingDevTools environment="qa" userRole={userRole} />
+ *
+ * // Web (this component)
+ * <FloatingDevTools environment="qa" userRole="admin" />
+ * ```
+ */
+export function FloatingDevTools({
+  environment: _environment,
+  userRole,
+  availableEnvironments: _availableEnvironments,
+  onEnvironmentSwitch: _onEnvironmentSwitch,
+  apps,
+  disableHints: _disableHints
+}) {
+  // Internal state for dial and settings
+  const [isDialOpen, setIsDialOpen] = useState(false);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+  // Auto-discover tools and merge with custom apps
+  const tools = useMemo(() => autoDiscoverWithCustom(apps), [apps]);
+
+  // Convert to available tools config for settings
+  const availableToolsConfig = useMemo(() => tools.map(tool => ({
+    id: tool.id,
+    name: tool.name,
+    description: tool.description,
+    slot: tool.slot
+  })), [tools]);
+
+  // Use shared settings hook
+  const {
+    settings
+  } = useSettings({
+    availableTools: availableToolsConfig
+  });
+
+  // Build dial icons from enabled dial tools
+  const dialIcons = useMemo(() => {
+    const dialTools = getToolsBySlot(tools, 'dial');
+    const enabledDialIds = Object.entries(settings.dialTools).filter(([_, enabled]) => enabled).map(([id]) => id);
+    return dialTools.filter(tool => enabledDialIds.includes(tool.id)).map(tool => {
+      const color = tool.color || getToolColor(tool.id);
+      // Handle icon - can be string (emoji) or function (size) => ReactNode
+      let icon;
+      if (typeof tool.icon === 'string') {
+        icon = tool.icon;
+      } else if (typeof tool.icon === 'function') {
+        // It's a render function - call it with size
+        icon = tool.icon(32);
+      } else {
+        icon = '🔧';
+      }
+      return {
+        id: tool.id,
+        name: getToolLabel(tool.id),
+        icon,
+        color,
+        onPress: () => {
+          tool.onPress?.();
+          setIsDialOpen(false);
+        }
+      };
+    });
+  }, [tools, settings.dialTools]);
+
+  // Build available tools for settings modal
+  const availableTools = useMemo(() => tools.map(tool => ({
+    id: tool.id,
+    name: tool.name || getToolLabel(tool.id),
+    description: tool.description || getToolDescription(tool.id),
+    slot: tool.slot
+  })), [tools]);
+
+  // Callbacks
+  const handleOpenDial = useCallback(() => setIsDialOpen(true), []);
+  const handleCloseDial = useCallback(() => setIsDialOpen(false), []);
+  const handleOpenSettings = useCallback(() => {
+    setIsDialOpen(false);
+    setIsSettingsOpen(true);
+  }, []);
+  const handleCloseSettings = useCallback(() => setIsSettingsOpen(false), []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(FloatingTools, {
+      enablePositionPersistence: true,
+      children: userRole && /*#__PURE__*/_jsx(UserStatus, {
+        userRole: userRole,
+        onPress: handleOpenDial
+      })
+    }), isDialOpen && /*#__PURE__*/_jsx(DialMenu, {
+      icons: dialIcons,
+      onClose: handleCloseDial,
+      centerLabel: "BUOY",
+      onCenterPress: handleOpenSettings
+    }), /*#__PURE__*/_jsx(SettingsModal, {
+      visible: isSettingsOpen,
+      onClose: handleCloseSettings,
+      availableTools: availableTools,
+      onSettingsChange: _newSettings => {
+        // Settings are already saved by the hook
+      }
+    })]
+  });
+}
+
+// =============================
+// Re-exports for convenience
+// =============================

package/lib/module/floatingMenu/FloatingMenu.js

@@ -2,10 +2,10 @@
 
 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 { FloatingTools, UserStatus } from "./floatingTools";
+import { DialDevTools } from "./dial/DialDevTools";
+import { EnvironmentIndicator, persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
+import { useDevToolsSettings } from "./DevToolsSettingsModal";
 import { useAppHost } from "./AppHost.js";
 import { useDevToolsVisibility } from "./DevToolsVisibilityContext.js";
 import { toggleStateManager } from "./ToggleStateManager.js";
@@ -48,7 +48,7 @@ export const FloatingMenu = ({
   useEffect(() => {
     const loadDialState = async () => {
       try {
-        const savedDialOpen = await safeGetItem(devToolsStorageKeys.dial.isOpen());
+        const savedDialOpen = await persistentStorage.getItem(devToolsStorageKeys.dial.isOpen());
         if (savedDialOpen === "true") {
           setShowDial(true);
         }
@@ -65,7 +65,7 @@ export const FloatingMenu = ({
   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 => {
+    persistentStorage.setItem(devToolsStorageKeys.dial.isOpen(), showDial ? "true" : "false").catch(error => {
       // Failed to save dial state - continue without persistence
       console.warn("Failed to save dial state:", error);
     });
@@ -92,7 +92,7 @@ export const FloatingMenu = ({
     }
     const checkOnboarding = async () => {
       try {
-        const hasSeenOnboarding = await safeGetItem(FLOATING_MENU_ONBOARDING_KEY);
+        const hasSeenOnboarding = await persistentStorage.getItem(FLOATING_MENU_ONBOARDING_KEY);
         if (!hasSeenOnboarding) {
           // Small delay to let the UI settle before showing tooltip
           setTimeout(() => {
@@ -159,7 +159,7 @@ export const FloatingMenu = ({
   // Filter function for floating tools based on settings
   const isFloatingEnabled = id => {
     if (!devToolsSettings) return false;
-    // Default to disabled for tools without explicit preferences
+    // Floating tools require explicit opt-in (unlike dial tools which auto-enable)
     return devToolsSettings.floatingTools[id] ?? false;
   };
 
@@ -197,7 +197,7 @@ export const FloatingMenu = ({
     setOnboardingStep(null);
 
     // Save to storage asynchronously in the background
-    safeSetItem(FLOATING_MENU_ONBOARDING_KEY, "true").catch(error => {
+    persistentStorage.setItem(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);
     });

package/lib/module/floatingMenu/MinimizedToolsContext.js

@@ -2,7 +2,7 @@
 
 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";
+import { persistentStorage, getSafeAreaInsets } from "@buoy-gg/shared-ui";
 
 // ============================================================================
 // Types
@@ -107,7 +107,7 @@ export function MinimizedToolsProvider({
   useEffect(() => {
     const restoreMinimizedTools = async () => {
       try {
-        const saved = await safeGetItem(STORAGE_KEY);
+        const saved = await persistentStorage.getItem(STORAGE_KEY);
         if (saved) {
           const serialized = JSON.parse(saved);
           // Reconstruct tools with icons
@@ -137,7 +137,7 @@ export function MinimizedToolsProvider({
         icon,
         ...rest
       }) => rest);
-      safeSetItem(STORAGE_KEY, JSON.stringify(serialized));
+      persistentStorage.setItem(STORAGE_KEY, JSON.stringify(serialized));
     }, PERSISTENCE_DELAY);
     return () => {
       if (persistenceTimeoutRef.current) {

package/lib/module/floatingMenu/autoDiscoverPresets.js

@@ -174,6 +174,36 @@ export function autoDiscoverPresets() {
         return null;
       }
     }
+  },
+  // Redux DevTools
+  {
+    name: "@buoy-gg/redux",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          reduxToolPreset
+        } = require("@buoy-gg/redux");
+        return reduxToolPreset;
+      } catch {
+        return null;
+      }
+    }
+  },
+  // Events Timeline
+  {
+    name: "@buoy-gg/events",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          eventsToolPreset
+        } = require("@buoy-gg/events");
+        return eventsToolPreset;
+      } catch {
+        return null;
+      }
+    }
   }];
 
   // Attempt to load each preset

package/lib/module/floatingMenu/defaultConfig.js

@@ -66,27 +66,34 @@ export const MAX_DIAL_TOOLS = 6;
  */
 
 /**
- * Validates that a dial configuration doesn't exceed the maximum allowed tools.
- * Throws an error with helpful message if validation fails.
+ * Validates and normalizes a dial configuration to not exceed the maximum allowed tools.
+ * If more than MAX_DIAL_TOOLS are provided, logs a warning and truncates to first 6 tools.
  *
  * @param tools - Array of dial tool IDs to validate
- * @throws Error if more than MAX_DIAL_TOOLS are provided
+ * @returns The original array if valid, or truncated array if too many tools
  *
  * @example
  * ```tsx
- * // This is valid
+ * // This returns as-is
  * validateDialConfig(['env', 'network', 'storage']);
+ * // Returns: ['env', 'network', 'storage']
  *
- * // This throws an error
+ * // This truncates and warns
  * validateDialConfig(['env', 'network', 'storage', 'query', 'route-events', 'debug-borders', 'benchmark']);
- * // Error: "Dial menu default configuration has 7 tools, but maximum is 6..."
+ * // Console warning, returns: ['env', 'network', 'storage', 'query', 'route-events', 'debug-borders']
  * ```
  */
 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.`);
+    // console.warn(
+    //   `[React Buoy] Dial menu configuration has ${tools.length} tools, but maximum is ${MAX_DIAL_TOOLS}. ` +
+    //   `Tools provided: [${toolList}]. ` +
+    //   `Only the first ${MAX_DIAL_TOOLS} tools will be shown.`
+    // );
+    return tools.slice(0, MAX_DIAL_TOOLS);
   }
+  return tools;
 }
 
 /**

package/lib/module/floatingMenu/dial/DialDevTools.js

@@ -4,8 +4,8 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, View, Dimensions, Text, Animated, Easing } from "react-native";
 // Icons are provided by installedApps; no direct icon imports here.
 import { DialIcon } from "./DialIcon.js";
-import { safeGetItem, safeSetItem, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
-import { DevToolsSettingsModal, useDevToolsSettings } from "../DevToolsSettingsModal.js";
+import { persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
+import { DevToolsSettingsModal, useDevToolsSettings } from "../DevToolsSettingsModal";
 import { useIsPro } from "@buoy-gg/license";
 import { useAppHost } from "../AppHost.js";
 import { OnboardingTooltip } from "./OnboardingTooltip.js";
@@ -55,7 +55,7 @@ export const DialDevTools = ({
   useEffect(() => {
     const loadSettingsModalState = async () => {
       try {
-        const savedModalOpen = await safeGetItem(devToolsStorageKeys.settings.modalOpen());
+        const savedModalOpen = await persistentStorage.getItem(devToolsStorageKeys.settings.modalOpen());
         if (savedModalOpen === "true") {
           setIsSettingsModalOpen(true);
         }
@@ -72,7 +72,7 @@ export const DialDevTools = ({
   useEffect(() => {
     // Only persist after initial state is loaded to avoid overwriting with default
     if (!settingsModalStateLoaded) return;
-    safeSetItem(devToolsStorageKeys.settings.modalOpen(), isSettingsModalOpen ? "true" : "false").catch(error => {
+    persistentStorage.setItem(devToolsStorageKeys.settings.modalOpen(), isSettingsModalOpen ? "true" : "false").catch(error => {
       // Failed to save settings modal state - continue without persistence
       console.warn("Failed to save settings modal state:", error);
     });
@@ -107,7 +107,7 @@ export const DialDevTools = ({
     }
     const checkOnboarding = async () => {
       try {
-        const hasSeenTooltip = await safeGetItem(ONBOARDING_STORAGE_KEY);
+        const hasSeenTooltip = await persistentStorage.getItem(ONBOARDING_STORAGE_KEY);
         if (!hasSeenTooltip) {
           // Small delay to let the entrance animations play first
           setTimeout(() => {
@@ -153,8 +153,14 @@ export const DialDevTools = ({
 
   // Map data-driven apps to dial icons, inserting empty slots for disabled items
   const dialApps = apps.filter(a => (a.slot ?? "both") !== "row");
+
+  // Check if settings are "virgin" (user hasn't customized dial tools yet)
+  // If no explicit settings exist, auto-enable all dial tools by default
+  const dialToolsKeys = settings?.dialTools ? Object.keys(settings.dialTools) : [];
+  const hasDialSettings = dialToolsKeys.length > 0;
   const isDialEnabled = id => {
-    if (!settings) return false;
+    // No settings or empty dialTools = auto-enable all dial tools by default
+    if (!settings?.dialTools || !hasDialSettings) return true;
     return settings.dialTools[id] ?? false;
   };
   const createEmptySlot = slotIndex => ({
@@ -400,7 +406,7 @@ export const DialDevTools = ({
     setShowOnboardingTooltip(false);
 
     // Save to storage asynchronously in the background
-    safeSetItem(ONBOARDING_STORAGE_KEY, "true").catch(error => {
+    persistentStorage.setItem(ONBOARDING_STORAGE_KEY, "true").catch(error => {
       // Silently fail - user already saw onboarding, just won't persist
       console.warn("Failed to save dial onboarding state:", error);
     });