@buoy-gg/core 2.1.15 → 3.0.0

package/lib/module/floatingMenu/DevToolsSettingsModal.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { useState, useEffect, useCallback, useMemo } from "react";
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Dimensions } from "react-native";
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Dimensions, Platform } from "react-native";
 import { settingsBus } from "./settingsBus.js";
 import { SentryBugIcon, WifiCircuitIcon, ImageOverlayIcon, RenderCountIcon, Info, Layers, ChevronRightIcon, ChevronDown, getStorageBackendType, persistentStorage, Database, Trash2, CheckCircle2, AlertTriangle, Zap, FileText, HardDrive, Copy, FileCode, copyToClipboard, LicenseEntryModal, SectionHeader } from "@buoy-gg/shared-ui";
 import { EnvIcon, StorageIcon, RoutesIcon, NetworkIcon, QueryIcon, HighlighterIcon, ReduxIcon, EventsIcon } from "@buoy-gg/floating-tools-core";
@@ -155,7 +155,7 @@ export const DevToolsSettingsModal = ({
   const allowedDialKeys = useMemo(() => Object.keys(defaultSettings.dialTools), [defaultSettings]);
   const allowedFloatingKeys = useMemo(() => Object.keys(defaultSettings.floatingTools).filter(key => key !== "environment"), [defaultSettings]);
   const [settings, setSettings] = useState(initialSettings || defaultSettings);
-  const [activeTab, setActiveTab] = useState("dial");
+  const [activeTab, setActiveTab] = useState("floating");
   const [activeTabLoaded, setActiveTabLoaded] = useState(false);
   const [expandedSettings, setExpandedSettings] = useState(new Set());
   const [showLicenseModal, setShowLicenseModal] = useState(false);
@@ -165,7 +165,7 @@ export const DevToolsSettingsModal = ({
     const loadActiveTab = async () => {
       try {
         const savedTab = await persistentStorage.getItem(devToolsStorageKeys.settings.activeTab());
-        if (savedTab && ["dial", "floating", "settings", "pro"].includes(savedTab)) {
+        if (savedTab && ["floating", "settings", "pro"].includes(savedTab)) {
           setActiveTab(savedTab);
         }
       } catch (error) {
@@ -263,23 +263,6 @@ export 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,
@@ -647,17 +630,7 @@ export const DevToolsSettingsModal = ({
       style: styles.scrollContent,
       showsVerticalScrollIndicator: false,
       contentContainerStyle: styles.scrollContainer,
-      children: [activeTab === "dial" && /*#__PURE__*/_jsx(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__*/_jsx(View, {
+      children: [activeTab === "floating" && /*#__PURE__*/_jsx(View, {
         style: styles.section,
         children: Object.entries(settings.floatingTools).map(([key, value]) => renderToolCard(key, value, false, () => toggleFloatingTool(key)))
       }), activeTab === "settings" && /*#__PURE__*/_jsxs(View, {
@@ -836,7 +809,7 @@ export 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__*/_jsxs(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."), 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__*/_jsxs(View, {
           style: styles.exportConfigCard,
           children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
             activeOpacity: 0.85,
@@ -1112,9 +1085,6 @@ export const DevToolsSettingsModal = ({
           noMargin: true,
           children: /*#__PURE__*/_jsx(TabSelector, {
             tabs: [{
-              key: "dial",
-              label: "DIAL"
-            }, {
               key: "floating",
               label: "FLOATING"
             }, {

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

@@ -23,9 +23,7 @@ settingsColors, settingsStyles, getToolColor,
 // Tool metadata
 getToolLabel, getToolDescription,
 // Global settings config
-globalSettingsConfig,
-// Constants
-MAX_SETTINGS_DIAL_SLOTS
+globalSettingsConfig
 // Types
 } from '@buoy-gg/floating-tools-react';
 import { ReduxIcon } from '@buoy-gg/floating-tools-core';
@@ -444,15 +442,14 @@ export function SettingsModal({
   storage = webStorageAdapter,
   onSettingsChange
 }) {
-  const [activeTab, setActiveTab] = useState('dial');
+  const [activeTab, setActiveTab] = useState('floating');
   const [isExiting, setIsExiting] = useState(false);
 
   // Use the shared settings hook
   const {
     settings,
     isLoading,
-    actions,
-    helpers
+    actions
   } = useSettings({
     availableTools,
     defaultFloatingTools,
@@ -605,28 +602,7 @@ export function SettingsModal({
           },
           children: "Loading settings..."
         }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [activeTab === 'dial' && /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsxs("div", {
-              style: {
-                fontSize: settingsStyles.sectionTitle.fontSize,
-                fontWeight: settingsStyles.sectionTitle.fontWeight,
-                letterSpacing: settingsStyles.sectionTitle.letterSpacing,
-                textTransform: settingsStyles.sectionTitle.textTransform,
-                color: settingsColors.textMuted,
-                marginBottom: settingsStyles.sectionHeader.marginBottom
-              },
-              children: ["SELECT UP TO ", MAX_SETTINGS_DIAL_SLOTS, " TOOLS (", helpers.dialToolCount, "/", MAX_SETTINGS_DIAL_SLOTS, ")"]
-            }), Object.entries(settings.dialTools).map(([id, enabled]) => {
-              const isDisabled = !enabled && helpers.isDialFull;
-              return /*#__PURE__*/_jsx(ToolCard, {
-                toolId: id,
-                enabled: enabled,
-                disabled: isDisabled,
-                availableTools: availableTools,
-                onToggle: () => actions.toggleDialTool(id)
-              }, id);
-            })]
-          }), activeTab === 'floating' && /*#__PURE__*/_jsxs("div", {
+          children: [activeTab === 'floating' && /*#__PURE__*/_jsxs("div", {
             children: [/*#__PURE__*/_jsx("div", {
               style: {
                 fontSize: settingsStyles.sectionTitle.fontSize,

package/lib/module/floatingMenu/FloatingDevTools.js

@@ -273,6 +273,19 @@ export const FloatingDevTools = ({
     }
   }, []);
 
+  // Check if impersonate is installed and auto-render the floating banner
+  const ImpersonateOverlay = 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 = useCallback(id => {
     const tool = finalApps.find(app => app.id === id);
@@ -325,7 +338,7 @@ export const FloatingDevTools = ({
                 environment: resolvedEnvironment
               }), /*#__PURE__*/_jsx(AppOverlay, {})]
             })
-          }), children, DebugBordersOverlay && /*#__PURE__*/_jsx(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/_jsx(HighlightUpdatesOverlay, {}), ImageOverlayOverlay && /*#__PURE__*/_jsx(ImageOverlayOverlay, {}), PerfMonitorOverlay && /*#__PURE__*/_jsx(PerfMonitorOverlay, {}), RouteTracker && /*#__PURE__*/_jsx(RouteTracker, {})]
+          }), children, DebugBordersOverlay && /*#__PURE__*/_jsx(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/_jsx(HighlightUpdatesOverlay, {}), ImageOverlayOverlay && /*#__PURE__*/_jsx(ImageOverlayOverlay, {}), PerfMonitorOverlay && /*#__PURE__*/_jsx(PerfMonitorOverlay, {}), ImpersonateOverlay && /*#__PURE__*/_jsx(ImpersonateOverlay, {}), RouteTracker && /*#__PURE__*/_jsx(RouteTracker, {})]
         })
       })
     })

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

@@ -24,6 +24,7 @@ import { useSettings, getToolLabel, getToolDescription, getToolColor } from '@bu
 import { autoDiscoverWithCustom, getToolsBySlot } from "../utils/autoDiscoverPresets.web.js";
 import { FloatingTools, UserStatus } from "./floatingTools.web.js";
 import { DialMenu } from "./dial/DialDevTools.web.js";
+import { getRankedToolIds, recordToolUsage } from "./dial/dialUsageStore.js";
 import { SettingsModal } from "./DevToolsSettingsModal.web.js";
 
 // =============================
@@ -69,18 +70,17 @@ export function FloatingDevTools({
     slot: tool.slot
   })), [tools]);
 
-  // Use shared settings hook
-  const {
-    settings
-  } = useSettings({
+  // Register available tools with the shared settings hook (used by the
+  // settings modal). The dial no longer reads per-tool show/hide state.
+  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 = 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 => {
+    return dialTools.map(tool => {
       const color = tool.color || getToolColor(tool.id);
       // Handle icon - can be string (emoji) or function (size) => ReactNode
       let icon;
@@ -98,12 +98,22 @@ export function FloatingDevTools({
         icon,
         color,
         onPress: () => {
+          // Record usage so frequently/recently used tools rank toward page 1.
+          void 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 = useMemo(() => {
+    if (!isDialOpen) return dialIcons;
+    const byId = new Map(dialIcons.map(i => [i.id, i]));
+    return 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 = useMemo(() => tools.map(tool => ({
@@ -129,7 +139,7 @@ export function FloatingDevTools({
         onPress: handleOpenDial
       })
     }), isDialOpen && /*#__PURE__*/_jsx(DialMenu, {
-      icons: dialIcons,
+      icons: rankedDialIcons,
       onClose: handleCloseDial,
       centerLabel: "BUOY",
       onCenterPress: handleOpenSettings

package/lib/module/floatingMenu/FloatingMenu.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { TouchableOpacity, StyleSheet, View, Dimensions } from "react-native";
+import { TouchableOpacity, StyleSheet, View } from "react-native";
 import { FloatingTools, UserStatus } from "./floatingTools";
 import { DialDevTools } from "./dial/DialDevTools";
 import { EnvironmentIndicator, persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
@@ -22,10 +22,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 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
-} = Dimensions.get("window");
 export const FloatingMenu = ({
   apps,
   state,
@@ -227,8 +223,12 @@ export const FloatingMenu = ({
         message: "Grab and position this menu wherever you want, then tap the icon to open your tools."
       })]
     }), /*#__PURE__*/_jsx(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/module/floatingMenu/defaultConfig.js

@@ -23,7 +23,7 @@
  * 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.