@buoy-gg/core 1.7.5 → 1.7.8

package/lib/commonjs/floatingMenu/FloatingDevTools.js

@@ -108,16 +108,20 @@ const FloatingDevTools = ({
   defaultDialTools,
   ...props
 }) => {
+  // Check Pro status for production gating
+  const isPro = (0, _license.useIsPro)();
+
   // Initialize license manager on mount
   (0, _react.useEffect)(() => {
     _license.LicenseManager.initialize();
   }, []);
 
-  // Validate dial tools configuration on mount (development-time check)
-  (0, _react.useEffect)(() => {
+  // Normalize dial tools configuration (truncates to max 6 with warning if needed)
+  const normalizedDialTools = (0, _react.useMemo)(() => {
     if (defaultDialTools) {
-      (0, _defaultConfig.validateDialConfig)(defaultDialTools);
+      return (0, _defaultConfig.validateDialConfig)(defaultDialTools);
     }
+    return defaultDialTools;
   }, [defaultDialTools]);
 
   // Build config overrides if requiredEnvVars or requiredStorageKeys are provided
@@ -218,9 +222,17 @@ 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__*/(0, _jsxRuntime.jsx)(_DefaultConfigContext.DefaultConfigProvider, {
     defaultFloatingTools: defaultFloatingTools,
-    defaultDialTools: defaultDialTools,
+    defaultDialTools: normalizedDialTools,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HintsProvider, {
       disableHints: disableHints,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

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

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingDevTools = FloatingDevTools;
+var _react = require("react");
+var _floatingToolsReact = require("@buoy-gg/floating-tools-react");
+var _autoDiscoverPresetsWeb = require("../utils/autoDiscoverPresets.web.js");
+var _floatingToolsWeb = require("./floatingTools.web.js");
+var _DialDevToolsWeb = require("./dial/DialDevTools.web.js");
+var _DevToolsSettingsModalWeb = require("./DevToolsSettingsModal.web.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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)
+ */
+
+// =============================
+// Types
+// =============================
+
+// =============================
+// 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" />
+ * ```
+ */
+function FloatingDevTools({
+  environment: _environment,
+  userRole,
+  availableEnvironments: _availableEnvironments,
+  onEnvironmentSwitch: _onEnvironmentSwitch,
+  apps,
+  disableHints: _disableHints
+}) {
+  // Internal state for dial and settings
+  const [isDialOpen, setIsDialOpen] = (0, _react.useState)(false);
+  const [isSettingsOpen, setIsSettingsOpen] = (0, _react.useState)(false);
+
+  // Auto-discover tools and merge with custom apps
+  const tools = (0, _react.useMemo)(() => (0, _autoDiscoverPresetsWeb.autoDiscoverWithCustom)(apps), [apps]);
+
+  // Convert to available tools config for settings
+  const availableToolsConfig = (0, _react.useMemo)(() => tools.map(tool => ({
+    id: tool.id,
+    name: tool.name,
+    description: tool.description,
+    slot: tool.slot
+  })), [tools]);
+
+  // Use shared settings hook
+  const {
+    settings
+  } = (0, _floatingToolsReact.useSettings)({
+    availableTools: availableToolsConfig
+  });
+
+  // Build dial icons from enabled dial tools
+  const dialIcons = (0, _react.useMemo)(() => {
+    const dialTools = (0, _autoDiscoverPresetsWeb.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 || (0, _floatingToolsReact.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: (0, _floatingToolsReact.getToolLabel)(tool.id),
+        icon,
+        color,
+        onPress: () => {
+          tool.onPress?.();
+          setIsDialOpen(false);
+        }
+      };
+    });
+  }, [tools, settings.dialTools]);
+
+  // Build available tools for settings modal
+  const availableTools = (0, _react.useMemo)(() => tools.map(tool => ({
+    id: tool.id,
+    name: tool.name || (0, _floatingToolsReact.getToolLabel)(tool.id),
+    description: tool.description || (0, _floatingToolsReact.getToolDescription)(tool.id),
+    slot: tool.slot
+  })), [tools]);
+
+  // Callbacks
+  const handleOpenDial = (0, _react.useCallback)(() => setIsDialOpen(true), []);
+  const handleCloseDial = (0, _react.useCallback)(() => setIsDialOpen(false), []);
+  const handleOpenSettings = (0, _react.useCallback)(() => {
+    setIsDialOpen(false);
+    setIsSettingsOpen(true);
+  }, []);
+  const handleCloseSettings = (0, _react.useCallback)(() => setIsSettingsOpen(false), []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsWeb.FloatingTools, {
+      enablePositionPersistence: true,
+      children: userRole && /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsWeb.UserStatus, {
+        userRole: userRole,
+        onPress: handleOpenDial
+      })
+    }), isDialOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialDevToolsWeb.DialMenu, {
+      icons: dialIcons,
+      onClose: handleCloseDial,
+      centerLabel: "BUOY",
+      onCenterPress: handleOpenSettings
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DevToolsSettingsModalWeb.SettingsModal, {
+      visible: isSettingsOpen,
+      onClose: handleCloseSettings,
+      availableTools: availableTools,
+      onSettingsChange: newSettings => {
+        // Settings are already saved by the hook
+        console.log('Settings updated:', newSettings);
+      }
+    })]
+  });
+}
+
+// =============================
+// Re-exports for convenience
+// =============================

package/lib/commonjs/floatingMenu/FloatingMenu.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.FloatingMenu = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _floatingTools = require("./floatingTools.js");
-var _DialDevTools = require("./dial/DialDevTools.js");
+var _floatingTools = require("./floatingTools");
+var _DialDevTools = require("./dial/DialDevTools");
 var _sharedUi = require("@buoy-gg/shared-ui");
-var _DevToolsSettingsModal = require("./DevToolsSettingsModal.js");
+var _DevToolsSettingsModal = require("./DevToolsSettingsModal");
 var _AppHost = require("./AppHost.js");
 var _DevToolsVisibilityContext = require("./DevToolsVisibilityContext.js");
 var _ToggleStateManager = require("./ToggleStateManager.js");
@@ -37,7 +37,7 @@ const FloatingMenu = ({
   actions,
   hidden,
   environment,
-  userRole,
+  userRole = "admin",
   availableEnvironments,
   onEnvironmentSwitch
 }) => {
@@ -164,7 +164,7 @@ 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;
   };
 
@@ -228,8 +228,8 @@ const FloatingMenu = ({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OnboardingTooltip.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."
+        title: "Welcome to Buoy!",
+        message: "Grab and position this menu wherever you want, then tap the icon to open your tools."
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       nativeID: "floating-devtools-root",
@@ -252,7 +252,7 @@ const FloatingMenu = ({
         availableEnvironments: availableEnvironments,
         onEnvironmentSwitch: onEnvironmentSwitch,
         showEnvironmentSelector: showEnvironmentSelector && devToolsSettings?.floatingTools?.environment,
-        children: [devToolsSettings?.floatingTools?.environment && environment && !showEnvironmentSelector ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EnvironmentIndicator, {
+        children: [environment && devToolsSettings?.floatingTools?.environment !== false && !showEnvironmentSelector ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EnvironmentIndicator, {
           environment: environment
         }) : null, userRole ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingTools.UserStatus, {
           userRole: userRole,

package/lib/commonjs/floatingMenu/autoDiscoverPresets.js

@@ -179,6 +179,21 @@ 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;
+      }
+    }
   }];
 
   // Attempt to load each preset

package/lib/commonjs/floatingMenu/defaultConfig.js

@@ -75,27 +75,34 @@ const MAX_DIAL_TOOLS = exports.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']
  * ```
  */
 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/commonjs/floatingMenu/dial/DialDevTools.js

@@ -8,7 +8,7 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _DialIcon = require("./DialIcon.js");
 var _sharedUi = require("@buoy-gg/shared-ui");
-var _DevToolsSettingsModal = require("../DevToolsSettingsModal.js");
+var _DevToolsSettingsModal = require("../DevToolsSettingsModal");
 var _license = require("@buoy-gg/license");
 var _AppHost = require("../AppHost.js");
 var _OnboardingTooltip = require("./OnboardingTooltip.js");
@@ -158,8 +158,14 @@ 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 => ({