@buoy-gg/core 2.1.15 → 3.0.0

package/lib/commonjs/floatingMenu/DevToolsSettingsModal.js

@@ -154,7 +154,7 @@ const DevToolsSettingsModal = ({
   const allowedDialKeys = (0, _react.useMemo)(() => Object.keys(defaultSettings.dialTools), [defaultSettings]);
   const allowedFloatingKeys = (0, _react.useMemo)(() => Object.keys(defaultSettings.floatingTools).filter(key => key !== "environment"), [defaultSettings]);
   const [settings, setSettings] = (0, _react.useState)(initialSettings || defaultSettings);
-  const [activeTab, setActiveTab] = (0, _react.useState)("dial");
+  const [activeTab, setActiveTab] = (0, _react.useState)("floating");
   const [activeTabLoaded, setActiveTabLoaded] = (0, _react.useState)(false);
   const [expandedSettings, setExpandedSettings] = (0, _react.useState)(new Set());
   const [showLicenseModal, setShowLicenseModal] = (0, _react.useState)(false);
@@ -164,7 +164,7 @@ const DevToolsSettingsModal = ({
     const loadActiveTab = async () => {
       try {
         const savedTab = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.settings.activeTab());
-        if (savedTab && ["dial", "floating", "settings", "pro"].includes(savedTab)) {
+        if (savedTab && ["floating", "settings", "pro"].includes(savedTab)) {
           setActiveTab(savedTab);
         }
       } catch (error) {
@@ -262,23 +262,6 @@ const DevToolsSettingsModal = ({
       console.error("Failed to save dev tools settings:", error);
     }
   };
-  const toggleDialTool = tool => {
-    const currentEnabled = Object.values(settings.dialTools).filter(v => v).length;
-    const isCurrentlyEnabled = settings.dialTools[tool];
-
-    // If trying to enable and already at 6, don't allow
-    if (!isCurrentlyEnabled && currentEnabled >= MAX_DIAL_SLOTS) {
-      return; // Could also show a toast/alert here
-    }
-    const newSettings = {
-      ...settings,
-      dialTools: {
-        ...settings.dialTools,
-        [tool]: !settings.dialTools[tool]
-      }
-    };
-    saveSettings(newSettings);
-  };
   const toggleFloatingTool = tool => {
     const newSettings = {
       ...settings,
@@ -646,17 +629,7 @@ const DevToolsSettingsModal = ({
       style: styles.scrollContent,
       showsVerticalScrollIndicator: false,
       contentContainerStyle: styles.scrollContainer,
-      children: [activeTab === "dial" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.section,
-        children: (() => {
-          const enabledCount = Object.values(settings.dialTools).filter(v => v).length;
-          const isAtLimit = enabledCount >= MAX_DIAL_SLOTS;
-          return Object.entries(settings.dialTools).map(([key, value]) => {
-            const isDisabled = !value && isAtLimit;
-            return renderToolCard(key, value, isDisabled, () => toggleDialTool(key));
-          });
-        })()
-      }), activeTab === "floating" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [activeTab === "floating" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.section,
         children: Object.entries(settings.floatingTools).map(([key, value]) => renderToolCard(key, value, false, () => toggleFloatingTool(key)))
       }), activeTab === "settings" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -835,7 +808,7 @@ const DevToolsSettingsModal = ({
               children: clearSuccess ? "CLEARED" : isClearing ? "CLEARING..." : "CLEAR ALL SETTINGS"
             })]
           })]
-        }), renderGlobalSettingCard("enableSharedModalDimensions", "SHARED MODAL SIZE", "MODAL", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately. Enable only if you prefer uniform modal sizes across all dev tools."), renderGlobalSettingCard("expandableWindowControls", "EXPAND CONTROLS", "MODAL", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed — similar to iPad window controls. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access (e.g. when using a mouse or simulator)."), isDevelopmentMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        }), renderGlobalSettingCard("enableSharedModalDimensions", "SHARED MODAL SIZE", "MODAL", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately. Enable only if you prefer uniform modal sizes across all dev tools."), _reactNative.Platform.OS !== "web" && renderGlobalSettingCard("expandableWindowControls", "EXPAND CONTROLS", "MODAL", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed — similar to iPad window controls. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access (e.g. when using a mouse or simulator)."), isDevelopmentMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.exportConfigCard,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
             activeOpacity: 0.85,
@@ -1111,9 +1084,6 @@ const DevToolsSettingsModal = ({
           noMargin: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
             tabs: [{
-              key: "dial",
-              label: "DIAL"
-            }, {
               key: "floating",
               label: "FLOATING"
             }, {

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

@@ -434,15 +434,14 @@ function SettingsModal({
   storage = webStorageAdapter,
   onSettingsChange
 }) {
-  const [activeTab, setActiveTab] = (0, _react.useState)('dial');
+  const [activeTab, setActiveTab] = (0, _react.useState)('floating');
   const [isExiting, setIsExiting] = (0, _react.useState)(false);
 
   // Use the shared settings hook
   const {
     settings,
     isLoading,
-    actions,
-    helpers
+    actions
   } = (0, _floatingToolsReact.useSettings)({
     availableTools,
     defaultFloatingTools,
@@ -595,28 +594,7 @@ function SettingsModal({
           },
           children: "Loading settings..."
         }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [activeTab === 'dial' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              style: {
-                fontSize: _floatingToolsReact.settingsStyles.sectionTitle.fontSize,
-                fontWeight: _floatingToolsReact.settingsStyles.sectionTitle.fontWeight,
-                letterSpacing: _floatingToolsReact.settingsStyles.sectionTitle.letterSpacing,
-                textTransform: _floatingToolsReact.settingsStyles.sectionTitle.textTransform,
-                color: _floatingToolsReact.settingsColors.textMuted,
-                marginBottom: _floatingToolsReact.settingsStyles.sectionHeader.marginBottom
-              },
-              children: ["SELECT UP TO ", _floatingToolsReact.MAX_SETTINGS_DIAL_SLOTS, " TOOLS (", helpers.dialToolCount, "/", _floatingToolsReact.MAX_SETTINGS_DIAL_SLOTS, ")"]
-            }), Object.entries(settings.dialTools).map(([id, enabled]) => {
-              const isDisabled = !enabled && helpers.isDialFull;
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolCard, {
-                toolId: id,
-                enabled: enabled,
-                disabled: isDisabled,
-                availableTools: availableTools,
-                onToggle: () => actions.toggleDialTool(id)
-              }, id);
-            })]
-          }), activeTab === 'floating' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [activeTab === 'floating' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               style: {
                 fontSize: _floatingToolsReact.settingsStyles.sectionTitle.fontSize,

package/lib/commonjs/floatingMenu/FloatingDevTools.js

@@ -277,6 +277,19 @@ const FloatingDevTools = ({
     }
   }, []);
 
+  // Check if impersonate is installed and auto-render the floating banner
+  const ImpersonateOverlay = (0, _react.useMemo)(() => {
+    try {
+      // @ts-ignore - Dynamic import that may not exist
+      const {
+        ImpersonateOverlay: Overlay
+      } = require("@buoy-gg/impersonate");
+      return Overlay;
+    } catch {
+      return null;
+    }
+  }, []);
+
   // Get tool icon helper for the MinimizedToolsProvider
   const getToolIcon = (0, _react.useCallback)(id => {
     const tool = finalApps.find(app => app.id === id);
@@ -329,7 +342,7 @@ const FloatingDevTools = ({
                 environment: resolvedEnvironment
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHost.AppOverlay, {})]
             })
-          }), children, DebugBordersOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightUpdatesOverlay, {}), ImageOverlayOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageOverlayOverlay, {}), PerfMonitorOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(PerfMonitorOverlay, {}), RouteTracker && /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteTracker, {})]
+          }), children, DebugBordersOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightUpdatesOverlay, {}), ImageOverlayOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageOverlayOverlay, {}), PerfMonitorOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(PerfMonitorOverlay, {}), ImpersonateOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImpersonateOverlay, {}), RouteTracker && /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteTracker, {})]
         })
       })
     })

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

@@ -9,6 +9,7 @@ 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 _dialUsageStore = require("./dial/dialUsageStore.js");
 var _DevToolsSettingsModalWeb = require("./DevToolsSettingsModal.web.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -73,18 +74,17 @@ function FloatingDevTools({
     slot: tool.slot
   })), [tools]);
 
-  // Use shared settings hook
-  const {
-    settings
-  } = (0, _floatingToolsReact.useSettings)({
+  // Register available tools with the shared settings hook (used by the
+  // settings modal). The dial no longer reads per-tool show/hide state.
+  (0, _floatingToolsReact.useSettings)({
     availableTools: availableToolsConfig
   });
 
-  // Build dial icons from enabled dial tools
+  // Build dial icons for every dial-eligible tool. The dial paginates and
+  // ranks them by usage, so there is no per-tool show/hide setting.
   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 => {
+    return dialTools.map(tool => {
       const color = tool.color || (0, _floatingToolsReact.getToolColor)(tool.id);
       // Handle icon - can be string (emoji) or function (size) => ReactNode
       let icon;
@@ -102,12 +102,22 @@ function FloatingDevTools({
         icon,
         color,
         onPress: () => {
+          // Record usage so frequently/recently used tools rank toward page 1.
+          void (0, _dialUsageStore.recordToolUsage)(tool.id);
           tool.onPress?.();
           setIsDialOpen(false);
         }
       };
     });
-  }, [tools, settings.dialTools]);
+  }, [tools]);
+
+  // Snapshot the usage-ranked order each time the dial opens. It stays stable
+  // while open so icons don't jump positions mid-interaction.
+  const rankedDialIcons = (0, _react.useMemo)(() => {
+    if (!isDialOpen) return dialIcons;
+    const byId = new Map(dialIcons.map(i => [i.id, i]));
+    return (0, _dialUsageStore.getRankedToolIds)(dialIcons.map(i => i.id)).map(id => byId.get(id)).filter(i => Boolean(i));
+  }, [isDialOpen, dialIcons]);
 
   // Build available tools for settings modal
   const availableTools = (0, _react.useMemo)(() => tools.map(tool => ({
@@ -133,7 +143,7 @@ function FloatingDevTools({
         onPress: handleOpenDial
       })
     }), isDialOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialDevToolsWeb.DialMenu, {
-      icons: dialIcons,
+      icons: rankedDialIcons,
       onClose: handleCloseDial,
       centerLabel: "BUOY",
       onCenterPress: handleOpenSettings

package/lib/commonjs/floatingMenu/FloatingMenu.js

@@ -27,10 +27,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 const FLOATING_MENU_ONBOARDING_KEY = "@react_buoy_floating_menu_tooltip_shown";
 const ONBOARDING_STEP_KEY = "@react_buoy_onboarding_step";
-const {
-  width: SCREEN_WIDTH,
-  height: SCREEN_HEIGHT
-} = _reactNative.Dimensions.get("window");
 const FloatingMenu = ({
   apps,
   state,
@@ -232,8 +228,12 @@ const FloatingMenu = ({
         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",
-      pointerEvents: isCompletelyHidden ? "none" : "box-none",
+      nativeID: "floating-devtools-root"
+      // While the dial overlay is open, the floating menu underneath must be
+      // inert — otherwise the draggable bubble's gesture handling intercepts
+      // touches on dial controls that overlap it (e.g. the pager buttons).
+      ,
+      pointerEvents: isCompletelyHidden || showDial ? "none" : "box-none",
       style: {
         position: "absolute",
         top: 0,

package/lib/commonjs/floatingMenu/defaultConfig.js

@@ -32,7 +32,7 @@ exports.validateDialConfig = validateDialConfig;
  * This is a union type of all auto-discovered tool IDs.
  */
 
-// Render count analysis modal (@buoy-gg/highlight-updates)
+// Benchmark recording modal (@buoy-gg/perf-monitor)
 
 /**
  * Special floating-only tool IDs that only appear in the floating bubble row.