@buoy-gg/core 2.1.14 → 2.2.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, {
@@ -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

@@ -232,8 +232,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,