@buoy-gg/core 2.1.15 → 2.2.0

package/lib/commonjs/floatingMenu/dial/DialIcon.js

@@ -17,25 +17,15 @@ const layout = (0, _floatingToolsCore.getDialLayout)({
   screenWidth: SCREEN_WIDTH
 });
 const VIEW_SIZE = layout.iconSize;
-const CIRCLE_SIZE = layout.circleSize;
 const CIRCLE_RADIUS = layout.circleRadius;
 const DialIcon = ({
   index,
   icon,
   iconsProgress,
   onPress,
-  selectedIcon,
-  totalIcons
+  totalIcons,
+  active
 }) => {
-  // Use shared position calculation from core
-  const iconPosition = (0, _floatingToolsCore.getIconPosition)(index, totalIcons, layout.iconRadius, _floatingToolsCore.DIAL_START_ANGLE);
-  const {
-    x: finalX,
-    y: finalY,
-    angle
-  } = iconPosition;
-  const radius = layout.iconRadius;
-
   // Animation values - using interpolation for better performance
   const scale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
 
@@ -74,52 +64,66 @@ const DialIcon = ({
     }).start();
   };
 
-  // Use shared stagger calculation from core
-  const staggerInputRange = (0, _floatingToolsCore.getIconStaggerInputRange)(index, totalIcons);
-
-  // Use interpolation for smooth animation that works both directions
-  const staggeredProgress = iconsProgress.interpolate({
-    inputRange: staggerInputRange,
-    outputRange: [0, 0, 1, 1],
-    extrapolate: "clamp"
-  });
+  // Position + spiral-entrance interpolations depend only on the (fixed) slot
+  // index, so compute them once. This keeps re-renders — which happen on every
+  // page change as `active` toggles — cheap.
+  const motion = (0, _react.useMemo)(() => {
+    const iconPosition = (0, _floatingToolsCore.getIconPosition)(index, totalIcons, layout.iconRadius, _floatingToolsCore.DIAL_START_ANGLE);
+    const {
+      x: finalX,
+      y: finalY,
+      angle
+    } = iconPosition;
+    const radius = layout.iconRadius;
+    const staggerInputRange = (0, _floatingToolsCore.getIconStaggerInputRange)(index, totalIcons);
 
-  // Spiral animation with interpolation
-  const spiralRotation = staggeredProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [Math.PI * 2, 0] // Spiral from 2π to 0
-  });
+    // Use interpolation for smooth animation that works both directions
+    const staggeredProgress = iconsProgress.interpolate({
+      inputRange: staggerInputRange,
+      outputRange: [0, 0, 1, 1],
+      extrapolate: "clamp"
+    });
 
-  // Distance from center
-  const distance = staggeredProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, radius]
-  });
+    // Spiral animation with interpolation
+    const spiralRotation = staggeredProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [Math.PI * 2, 0] // Spiral from 2π to 0
+    });
 
-  // Calculate X and Y positions using Animated operations
-  const translateX = _reactNative.Animated.add(_reactNative.Animated.multiply(distance, spiralRotation.interpolate({
-    inputRange: [0, Math.PI * 2],
-    outputRange: [Math.cos(angle), Math.cos(angle + Math.PI * 2)]
-  })), staggeredProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, finalX - radius * Math.cos(angle + Math.PI * 2)]
-  }));
-  const translateY = _reactNative.Animated.add(_reactNative.Animated.multiply(distance, spiralRotation.interpolate({
-    inputRange: [0, Math.PI * 2],
-    outputRange: [Math.sin(angle), Math.sin(angle + Math.PI * 2)]
-  })), staggeredProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, finalY - radius * Math.sin(angle + Math.PI * 2)]
-  }));
+    // Distance from center
+    const distance = staggeredProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, radius]
+    });
 
-  // Opacity animation
-  const itemOpacity = staggeredProgress.interpolate({
-    inputRange: [0, 0.3, 1],
-    outputRange: [0, 0.3, 1]
-  });
+    // Calculate X and Y positions using Animated operations
+    const translateX = _reactNative.Animated.add(_reactNative.Animated.multiply(distance, spiralRotation.interpolate({
+      inputRange: [0, Math.PI * 2],
+      outputRange: [Math.cos(angle), Math.cos(angle + Math.PI * 2)]
+    })), staggeredProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, finalX - radius * Math.cos(angle + Math.PI * 2)]
+    }));
+    const translateY = _reactNative.Animated.add(_reactNative.Animated.multiply(distance, spiralRotation.interpolate({
+      inputRange: [0, Math.PI * 2],
+      outputRange: [Math.sin(angle), Math.sin(angle + Math.PI * 2)]
+    })), staggeredProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, finalY - radius * Math.sin(angle + Math.PI * 2)]
+    }));
 
-  // Scale based on progress
-  const progressScale = staggeredProgress;
+    // Opacity animation
+    const itemOpacity = staggeredProgress.interpolate({
+      inputRange: [0, 0.3, 1],
+      outputRange: [0, 0.3, 1]
+    });
+    return {
+      translateX,
+      translateY,
+      itemOpacity,
+      progressScale: staggeredProgress
+    };
+  }, [index, totalIcons, iconsProgress]);
 
   // Main animated style for position and appearance
   const animatedStyle = {
@@ -128,24 +132,24 @@ const DialIcon = ({
     // Center position
     top: CIRCLE_RADIUS - VIEW_SIZE / 2,
     // Center position
-    opacity: itemOpacity,
+    opacity: motion.itemOpacity,
     transform: [{
-      translateX
+      translateX: motion.translateX
     },
     // Apply translation from center
     {
-      translateY
+      translateY: motion.translateY
     },
     // Apply translation from center
     {
-      scale: _reactNative.Animated.multiply(scale, progressScale)
+      scale: _reactNative.Animated.multiply(scale, motion.progressScale)
     }]
   };
 
   // Check if this is an empty spot (no icon and no iconComponent)
   const isEmpty = icon.icon === null && !icon.iconComponent;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: [styles.view, animatedStyle],
+    style: [styles.view, animatedStyle, !active && styles.hidden],
     children: isEmpty ?
     /*#__PURE__*/
     // Empty spot - just show a subtle circle
@@ -155,7 +159,7 @@ const DialIcon = ({
         style: styles.emptyDot
       })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-      onPress: () => onPress(index),
+      onPress: () => onPress(icon),
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
       style: styles.pressable,
@@ -194,6 +198,9 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "center",
     alignItems: "center"
   },
+  hidden: {
+    display: "none"
+  },
   pressable: {
     width: "100%",
     height: "100%",

package/lib/commonjs/floatingMenu/dial/DialPagination.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialPagination = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _jsxRuntime = require("react/jsx-runtime");
+/** Pad a 1-based page number to two digits, e.g. 3 -> "03". */
+const pad = n => String(n).padStart(2, "0");
+/**
+ * A single pager button. Press feedback is driven by a native-driver
+ * `Animated` value via `onPressIn`/`onPressOut` — so the scale reacts
+ * instantly on the UI thread, with no JS re-render in the press path.
+ */
+const PagerButton = ({
+  side,
+  label,
+  disabled,
+  onPress
+}) => {
+  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const springTo = toValue => {
+    _reactNative.Animated.spring(scale, {
+      toValue,
+      damping: 15,
+      stiffness: 400,
+      useNativeDriver: true
+    }).start();
+  };
+  const accent = disabled ? _floatingToolsCore.dialColors.emptyDotBorder : _sharedUi.buoyColors.primary;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: {
+      transform: [{
+        scale
+      }]
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: `${side === "prev" ? "Previous" : "Next"} dial page`,
+      accessibilityState: {
+        disabled
+      },
+      disabled: disabled,
+      onPress: onPress,
+      onPressIn: () => !disabled && springTo(0.92),
+      onPressOut: () => springTo(1),
+      style: [styles.button, disabled && styles.buttonDisabled],
+      children: [side === "prev" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronLeft, {
+        size: 18,
+        color: accent
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.buttonText, disabled && styles.buttonTextDisabled],
+        children: label
+      }), side === "next" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
+        size: 18,
+        color: accent
+      })]
+    })
+  });
+};
+
+/**
+ * Prev/Next pager shown below the dial when there are more dial tools than
+ * fit on a single page. Tools are ranked by usage, so paging walks from the
+ * most-used tools toward the least-used.
+ */
+const DialPagination = ({
+  page,
+  pageCount,
+  onPrev,
+  onNext,
+  animatedStyle
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.container, animatedStyle],
+    pointerEvents: "box-none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PagerButton, {
+      side: "prev",
+      label: "PREV",
+      disabled: page <= 0,
+      onPress: onPrev
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.indicator,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.indicatorText,
+        children: [pad(page + 1), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.indicatorTextDim,
+          children: [" / ", pad(pageCount)]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PagerButton, {
+      side: "next",
+      label: "NEXT",
+      disabled: page >= pageCount - 1,
+      onPress: onNext
+    })]
+  });
+};
+exports.DialPagination = DialPagination;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _floatingToolsCore.dialColors.dialBorder,
+    backgroundColor: _floatingToolsCore.dialColors.dialBackground,
+    shadowColor: _floatingToolsCore.dialColors.dialShadow,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 8,
+    elevation: 6
+  },
+  buttonDisabled: {
+    opacity: 0.4
+  },
+  buttonText: {
+    color: _sharedUi.buoyColors.primary,
+    fontSize: 12,
+    fontWeight: "900",
+    fontFamily: "monospace",
+    letterSpacing: 1.5,
+    textShadowColor: _sharedUi.buoyColors.primary,
+    textShadowOffset: {
+      width: 0,
+      height: 0
+    },
+    textShadowRadius: 4
+  },
+  buttonTextDisabled: {
+    color: _floatingToolsCore.dialColors.emptyDotBorder,
+    textShadowRadius: 0
+  },
+  indicator: {
+    paddingHorizontal: 12,
+    paddingVertical: 6
+  },
+  indicatorText: {
+    color: "#FFFFFF",
+    fontSize: 13,
+    fontWeight: "900",
+    fontFamily: "monospace",
+    letterSpacing: 2,
+    textShadowColor: _floatingToolsCore.dialColors.dialShadow,
+    textShadowOffset: {
+      width: 0,
+      height: 0
+    },
+    textShadowRadius: 6
+  },
+  indicatorTextDim: {
+    color: _floatingToolsCore.dialColors.iconLabel,
+    textShadowRadius: 0
+  }
+});

package/lib/commonjs/floatingMenu/dial/dialUsageStore.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRankedToolIds = getRankedToolIds;
+exports.isDialUsageLoaded = isDialUsageLoaded;
+exports.loadDialUsage = loadDialUsage;
+exports.recordToolUsage = recordToolUsage;
+exports.resetDialUsage = resetDialUsage;
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+/**
+ * Dial Usage Store - persists and ranks dial tool usage.
+ *
+ * Wraps the pure scoring logic from `@buoy-gg/floating-tools-core` with a
+ * persisted, in-memory cache. The dial menu uses this to order tools by how
+ * recently/frequently they are used, so the most-used tools land on page 1.
+ *
+ * The cache is loaded eagerly on import so `getRankedToolIds` can run
+ * synchronously by the time the dial opens.
+ */
+
+const STORAGE_KEY = _sharedUi.devToolsStorageKeys.dial.usage();
+let cache = {};
+let loaded = false;
+let loadPromise = null;
+
+/**
+ * Load persisted usage data into the in-memory cache. Safe to call multiple
+ * times — the underlying read happens only once.
+ */
+function loadDialUsage() {
+  if (loadPromise) return loadPromise;
+  loadPromise = (async () => {
+    try {
+      const raw = await _sharedUi.persistentStorage.getItem(STORAGE_KEY);
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        if (parsed && typeof parsed === "object") {
+          cache = parsed;
+        }
+      }
+    } catch {
+      // Ignore — start with an empty usage map.
+    } finally {
+      loaded = true;
+    }
+  })();
+  return loadPromise;
+}
+
+// Kick off the load as soon as this module is imported.
+void loadDialUsage();
+
+/** Whether the usage cache has finished loading from storage. */
+function isDialUsageLoaded() {
+  return loaded;
+}
+
+/**
+ * Rank tool ids by recency-weighted usage, highest first. Synchronous —
+ * operates against the in-memory cache. Never-used tools keep their original
+ * order as a tie-breaker.
+ *
+ * @param orderedIds - Tool ids in their default/registration order
+ */
+function getRankedToolIds(orderedIds) {
+  return (0, _floatingToolsCore.rankToolIds)(orderedIds, cache, Date.now());
+}
+
+/**
+ * Record a single press of a tool and persist the updated usage map.
+ *
+ * @param id - Tool id that was pressed
+ */
+async function recordToolUsage(id) {
+  if (!id) return;
+  if (!loaded) await loadDialUsage();
+  const now = Date.now();
+  cache = (0, _floatingToolsCore.pruneUsage)((0, _floatingToolsCore.recordUsage)(cache, id, now), now);
+  try {
+    await _sharedUi.persistentStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
+  } catch {
+    // Ignore persistence failure — the in-memory cache is still updated.
+  }
+}
+
+/** Clear all usage data (in-memory and persisted). */
+async function resetDialUsage() {
+  cache = {};
+  try {
+    await _sharedUi.persistentStorage.removeItem(STORAGE_KEY);
+  } catch {
+    // Ignore — the in-memory cache is already cleared.
+  }
+}

package/lib/module/floatingMenu/DevToolsSettingsModal.js

@@ -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, {
@@ -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