@buoy-gg/core 2.1.15 → 3.0.0

package/lib/module/floatingMenu/dial/DialDevTools.js

@@ -1,31 +1,35 @@
 "use strict";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Pressable, StyleSheet, View, Dimensions, Text, Animated, Easing } from "react-native";
+import { Pressable, StyleSheet, View, useWindowDimensions, Text, Animated, Easing } from "react-native";
 // Icons are provided by installedApps; no direct icon imports here.
 import { DialIcon } from "./DialIcon.js";
+import { DialPagination } from "./DialPagination.js";
+import { getRankedToolIds, isDialUsageLoaded, loadDialUsage, recordToolUsage } from "./dialUsageStore.js";
 import { persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
 import { DevToolsSettingsModal, useDevToolsSettings } from "../DevToolsSettingsModal";
 import { useIsPro } from "@buoy-gg/license";
 import { useAppHost } from "../AppHost.js";
 import { OnboardingTooltip } from "./OnboardingTooltip.js";
-import { getDialLayout, MAX_DIAL_SLOTS, dialAnimationConfig, dialColors } from "@buoy-gg/floating-tools-core";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  width: SCREEN_WIDTH
-} = Dimensions.get("window");
+import { getDialLayout, MAX_DIAL_SLOTS, DIAL_BUTTON_SIZE, dialAnimationConfig, dialColors } from "@buoy-gg/floating-tools-core";
 
-// Use shared layout calculation from core
-const layout = getDialLayout({
-  screenWidth: SCREEN_WIDTH
-});
-const CIRCLE_SIZE = layout.circleSize;
-const BUTTON_SIZE = layout.buttonSize;
+// The circle size depends on the live window width, so it's computed inside
+// the component via useWindowDimensions — a module-scope Dimensions.get
+// snapshot goes stale when the window resizes after load (web/desktop).
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const BUTTON_SIZE = DIAL_BUTTON_SIZE;
 const ONBOARDING_STORAGE_KEY = "@react_buoy_settings_tooltip_shown";
+/** A non-interactive placeholder used to fill out the last dial page. */
+const createEmptySlot = slotIndex => ({
+  id: `empty-${slotIndex}`,
+  name: `empty-${slotIndex}`,
+  icon: null,
+  color: "transparent",
+  onPress: () => {}
+});
 export const DialDevTools = ({
   onClose,
   onSettingsPress,
-  settings: externalSettings,
   autoOpenSettings = false,
   apps,
   state,
@@ -38,18 +42,39 @@ export const DialDevTools = ({
   const onboardingDismissedRef = useRef(false); // Track if onboarding was dismissed
   const hintsDisabled = useHintsDisabled();
   const {
-    settings: hookSettings,
     refreshSettings
   } = useDevToolsSettings();
   const {
     open
   } = useAppHost();
   const isPro = useIsPro();
-  // Initialize with external settings if provided, otherwise use hook settings
-  const [localSettings, setLocalSettings] = useState(externalSettings || hookSettings);
 
-  // Always use localSettings (which can be updated by the modal)
-  const settings = localSettings;
+  // Live window size — keeps the dial centered and sized correctly when the
+  // window resizes (Electron/web) or the device rotates.
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = useWindowDimensions();
+  const circleSize = getDialLayout({
+    screenWidth
+  }).circleSize;
+  const sizeStyles = useMemo(() => ({
+    parent: {
+      width: circleSize,
+      height: circleSize
+    },
+    circle: {
+      width: circleSize,
+      height: circleSize,
+      borderRadius: circleSize / 2
+    },
+    rounded: {
+      borderRadius: circleSize / 2
+    },
+    gridLine: {
+      width: circleSize
+    }
+  }), [circleSize]);
 
   // Load persisted settings modal state on mount
   useEffect(() => {
@@ -78,20 +103,6 @@ export const DialDevTools = ({
     });
   }, [isSettingsModalOpen, settingsModalStateLoaded]);
 
-  // Update local settings when external settings change
-  useEffect(() => {
-    if (externalSettings) {
-      setLocalSettings(externalSettings);
-    }
-  }, [externalSettings]);
-
-  // Update local settings when hook settings change (if no external settings)
-  useEffect(() => {
-    if (!externalSettings) {
-      setLocalSettings(hookSettings);
-    }
-  }, [hookSettings, externalSettings]);
-
   // Auto-open settings modal when prop is true
   useEffect(() => {
     if (autoOpenSettings && !isSettingsModalOpen) {
@@ -128,7 +139,6 @@ export const DialDevTools = ({
   const dialRotation = useRef(new Animated.Value(0)).current;
   const centerButtonScale = useRef(new Animated.Value(0)).current;
   const iconsProgress = useRef(new Animated.Value(0)).current;
-  const glitchOffset = useRef(new Animated.Value(0)).current;
   const pulseScale = useRef(new Animated.Value(1)).current;
   const availableApps = useMemo(() => apps.map(({
     id,
@@ -142,88 +152,111 @@ export const DialDevTools = ({
     description
   })), [apps]);
 
-  // Subtle animations
-  const floatingAnim = useRef(new Animated.Value(0)).current;
-  const breathingScale = useRef(new Animated.Value(1)).current;
-  const circuitOpacity = useRef(new Animated.Value(0)).current;
-
   // Animation tracking refs
-  const glitchIntervalRef = useRef(null);
   const pulseAnimationRef = useRef(null);
 
-  // Map data-driven apps to dial icons, inserting empty slots for disabled items
-  const dialApps = apps.filter(a => (a.slot ?? "both") !== "row");
+  // Dial-eligible apps: everything except row-only tools. All of them are
+  // shown — paginated across pages of MAX_DIAL_SLOTS — so there is no longer
+  // a per-tool show/hide setting.
+  const dialApps = useMemo(() => apps.filter(a => (a.slot ?? "both") !== "row"), [apps]);
 
-  // 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 => {
-    // 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 => ({
-    id: `empty-${slotIndex}`,
-    name: `empty-${slotIndex}`,
-    icon: null,
-    color: "transparent",
-    onPress: () => {}
-  });
-  const enabledIcons = [];
-  for (const app of dialApps) {
-    if (!isDialEnabled(app.id)) {
-      continue;
-    }
-    if (enabledIcons.length >= MAX_DIAL_SLOTS) {
-      break;
-    }
-    enabledIcons.push({
-      id: app.id,
-      name: app.name,
-      // Pass both the pre-rendered icon (for non-function icons) and the component (for dynamic rendering)
-      icon: typeof app.icon === "function" ? null // Will be rendered dynamically by DialIcon
-      : app.icon,
-      // Cast to the expected type - the function signature is compatible at runtime
-      iconComponent: typeof app.icon === "function" ? app.icon : undefined,
-      color: app.color ?? buoyColors.primary,
-      onPress: () => {
-        // Call the app's onPress callback if provided, passing actions for toggle tools
-        app?.onPress?.(actions);
+  // Build a stable IconType for every dial-eligible app, keyed by id.
+  const iconsById = useMemo(() => {
+    const map = new Map();
+    for (const app of dialApps) {
+      map.set(app.id, {
+        id: app.id,
+        name: app.name,
+        // Pass both the pre-rendered icon (for non-function icons) and the
+        // component (for dynamic rendering).
+        icon: typeof app.icon === "function" ? null : app.icon,
+        // Cast to the expected type - the signature is compatible at runtime.
+        iconComponent: typeof app.icon === "function" ? app.icon : undefined,
+        color: app.color ?? buoyColors.primary,
+        onPress: () => {
+          // Record usage so frequently/recently used tools rank toward page 1.
+          void recordToolUsage(app.id);
+
+          // Call the app's onPress callback if provided, passing actions for
+          // toggle tools.
+          app?.onPress?.(actions);
 
-        // Only open modal if not a toggle-only tool
-        if (app.launchMode !== "toggle-only") {
-          const resolvedIcon = typeof app.icon === "function" ? app.icon({
-            slot: "dial",
-            size: 20
-          }) : app.icon;
-          open({
-            id: app.id,
-            title: app.name,
-            component: app.component,
-            props: app.props,
-            launchMode: app.launchMode ?? "self-modal",
-            singleton: app.singleton ?? true,
-            icon: resolvedIcon,
-            color: app.color
-          });
+          // Only open modal if not a toggle-only tool.
+          if (app.launchMode !== "toggle-only") {
+            const resolvedIcon = typeof app.icon === "function" ? app.icon({
+              slot: "dial",
+              size: 20
+            }) : app.icon;
+            open({
+              id: app.id,
+              title: app.name,
+              component: app.component,
+              props: app.props,
+              launchMode: app.launchMode ?? "self-modal",
+              singleton: app.singleton ?? true,
+              icon: resolvedIcon,
+              color: app.color
+            });
+          }
+
+          // Close the dial.
+          onClose?.();
         }
+      });
+    }
+    return map;
+  }, [dialApps, actions, open, onClose]);
 
-        // Close the dial
-        onClose?.();
-      }
-    });
-  }
-  if (__DEV__) {
-    const totalEnabled = dialApps.filter(app => isDialEnabled(app.id)).length;
-    if (totalEnabled > MAX_DIAL_SLOTS) {
-      // More tools enabled than can be shown - they will be hidden
+  // Snapshot the usage-ranked order when the dial opens. It stays stable while
+  // open so icons don't jump positions mid-interaction.
+  const [rankedIds, setRankedIds] = useState(() => getRankedToolIds(dialApps.map(a => a.id)));
+  useEffect(() => {
+    const ids = dialApps.map(a => a.id);
+    if (isDialUsageLoaded()) {
+      setRankedIds(getRankedToolIds(ids));
+      return;
     }
-  }
-  const icons = [...enabledIcons];
-  while (icons.length < MAX_DIAL_SLOTS) {
-    icons.push(createEmptySlot(icons.length));
-  }
+    // Usage data not loaded yet — show default order, then re-rank once ready.
+    let cancelled = false;
+    loadDialUsage().then(() => {
+      if (!cancelled) setRankedIds(getRankedToolIds(ids));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [dialApps]);
+  const pageCount = Math.max(1, Math.ceil(rankedIds.length / MAX_DIAL_SLOTS));
+  const [currentPage, setCurrentPage] = useState(0);
+  const safePage = Math.min(currentPage, pageCount - 1);
+
+  // Every dial-eligible icon, with the page/slot it occupies. The ranking is
+  // snapshotted on open, so each icon's page and slot are fixed for the
+  // session — which lets us mount all icons once and paginate purely by
+  // toggling visibility (no remounts on page change).
+  const allDialIcons = useMemo(() => {
+    return rankedIds.map(id => iconsById.get(id)).filter(icon => Boolean(icon)).map((icon, i) => ({
+      icon,
+      page: Math.floor(i / MAX_DIAL_SLOTS),
+      slot: i % MAX_DIAL_SLOTS
+    }));
+  }, [rankedIds, iconsById]);
+
+  // Empty slot indices for the current page (only the last page can be
+  // partial). These are cheap placeholder dots.
+  const emptySlots = useMemo(() => {
+    const onThisPage = allDialIcons.filter(d => d.page === safePage).length;
+    const slots = [];
+    for (let s = onThisPage; s < MAX_DIAL_SLOTS; s += 1) slots.push(s);
+    return slots;
+  }, [allDialIcons, safePage]);
+
+  // Swap to another page. Every icon is already mounted, so this only toggles
+  // which ones are visible — no remount, no re-animation — keeping page
+  // changes instant.
+  const handlePageChange = next => {
+    const clamped = Math.max(0, Math.min(next, pageCount - 1));
+    if (clamped !== safePage) setCurrentPage(clamped);
+  };
 
   // Initialize animations on mount - using shared config from core
   useEffect(() => {
@@ -244,13 +277,13 @@ export const DialDevTools = ({
           }
         },
         centerButton: {
-          delay: 300,
+          delay: 150,
           damping: 10,
           stiffness: 200
         },
         icons: {
-          delay: 500,
-          duration: 600
+          delay: 200,
+          duration: 400
         },
         circuitTraces: {
           delay: 600,
@@ -321,81 +354,21 @@ export const DialDevTools = ({
       useNativeDriver: true
     })]).start();
 
-    // Subtle glitch effect - using shared config
-    const glitchAnimation = () => {
-      Animated.sequence([Animated.timing(glitchOffset, {
-        toValue: continuous.glitch.offset,
-        duration: continuous.glitch.stepDuration,
-        useNativeDriver: true
-      }), Animated.timing(glitchOffset, {
-        toValue: -continuous.glitch.offset,
-        duration: continuous.glitch.stepDuration,
-        useNativeDriver: true
-      }), Animated.timing(glitchOffset, {
-        toValue: 0,
-        duration: continuous.glitch.stepDuration,
-        useNativeDriver: true
-      })]).start();
-    };
-    glitchIntervalRef.current = setInterval(glitchAnimation, continuous.glitch.interval);
-
-    // Pulse animation - using shared config
-    const startPulse = () => {
-      pulseAnimationRef.current = Animated.loop(Animated.sequence([Animated.timing(pulseScale, {
-        toValue: continuous.pulse.maxScale,
-        duration: continuous.pulse.duration,
-        easing: Easing.inOut(Easing.ease),
-        useNativeDriver: true
-      }), Animated.timing(pulseScale, {
-        toValue: continuous.pulse.minScale,
-        duration: continuous.pulse.duration,
-        easing: Easing.inOut(Easing.ease),
-        useNativeDriver: true
-      })]));
-      pulseAnimationRef.current.start();
-    };
-    startPulse();
-
-    // Subtle floating animation for the dial - using shared config
-    Animated.loop(Animated.sequence([Animated.timing(floatingAnim, {
-      toValue: continuous.floating.maxY,
-      duration: continuous.floating.duration,
-      easing: Easing.inOut(Easing.ease),
-      useNativeDriver: true
-    }), Animated.timing(floatingAnim, {
-      toValue: continuous.floating.minY,
-      duration: continuous.floating.duration,
-      easing: Easing.inOut(Easing.ease),
-      useNativeDriver: true
-    })])).start();
-
-    // Gentle breathing effect for center button - using shared config
-    Animated.loop(Animated.sequence([Animated.timing(breathingScale, {
-      toValue: continuous.breathing.maxScale,
-      duration: continuous.breathing.duration,
+    // Pulse animation - only continuous effect kept for performance
+    pulseAnimationRef.current = Animated.loop(Animated.sequence([Animated.timing(pulseScale, {
+      toValue: continuous.pulse.maxScale,
+      duration: continuous.pulse.duration,
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: true
-    }), Animated.timing(breathingScale, {
-      toValue: continuous.breathing.minScale,
-      duration: continuous.breathing.duration,
+    }), Animated.timing(pulseScale, {
+      toValue: continuous.pulse.minScale,
+      duration: continuous.pulse.duration,
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: true
-    })])).start();
-
-    // Circuit traces fade in - using shared config
-    Animated.timing(circuitOpacity, {
-      toValue: 1,
-      duration: entrance.circuitTraces.duration,
-      delay: entrance.circuitTraces.delay,
-      useNativeDriver: true
-    }).start();
+    })]));
+    pulseAnimationRef.current.start();
     return () => {
-      if (glitchIntervalRef.current) {
-        clearInterval(glitchIntervalRef.current);
-      }
-      if (pulseAnimationRef.current) {
-        pulseAnimationRef.current.stop();
-      }
+      pulseAnimationRef.current?.stop();
     };
   }, []);
   const handleOnboardingDismiss = () => {
@@ -467,8 +440,8 @@ export const DialDevTools = ({
       }
     });
   };
-  const handleIconPress = index => {
-    setSelectedIcon(index);
+  const handleIconPress = icon => {
+    setSelectedIcon(1);
     const interaction = dialAnimationConfig?.interaction ?? {
       iconSelect: {
         pulse: [{
@@ -500,9 +473,9 @@ export const DialDevTools = ({
 
     // Trigger action - using shared delay
     setTimeout(() => {
-      icons[index].onPress();
+      icon.onPress();
       // Only close if it's not the WiFi toggle (by id)
-      if (icons[index].id !== "wifi") {
+      if (icon.id !== "wifi") {
         handleClose();
       }
     }, interaction.iconSelect.actionDelay);
@@ -512,14 +485,9 @@ export const DialDevTools = ({
   const backdropAnimatedStyle = {
     opacity: backdropOpacity
   };
-  const glitchAnimatedStyle = {
-    transform: [{
-      translateX: glitchOffset
-    }]
-  };
   const centerButtonAnimatedStyle = {
     transform: [{
-      scale: Animated.multiply(centerButtonScale, breathingScale)
+      scale: centerButtonScale
     }]
   };
   const pulseAnimatedStyle = {
@@ -537,13 +505,11 @@ export const DialDevTools = ({
         onPress: handleClose
       })
     }), /*#__PURE__*/_jsxs(Animated.View, {
-      style: [styles.parent, {
+      style: [styles.parent, sizeStyles.parent, {
         position: "absolute",
-        left: (SCREEN_WIDTH - CIRCLE_SIZE) / 2,
+        left: (screenWidth - circleSize) / 2,
         bottom: 80,
         transform: [{
-          translateY: floatingAnim
-        }, {
           scale: dialScale
         }, {
           rotate: dialRotation.interpolate({
@@ -553,35 +519,47 @@ export const DialDevTools = ({
         }]
       }],
       children: [/*#__PURE__*/_jsxs(Animated.View, {
-        style: [styles.circle, glitchAnimatedStyle],
+        style: [styles.circle, sizeStyles.circle],
         children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.gradientBackground,
+          style: [styles.gradientBackground, sizeStyles.rounded],
           children: [/*#__PURE__*/_jsx(View, {
-            style: styles.gradientLayer1
+            style: [styles.gradientLayer1, sizeStyles.rounded]
           }), /*#__PURE__*/_jsx(View, {
-            style: styles.gradientLayer2
+            style: [styles.gradientLayer2, sizeStyles.rounded]
           }), /*#__PURE__*/_jsx(View, {
-            style: styles.gradientLayer3
+            style: [styles.gradientLayer3, sizeStyles.rounded]
           }), /*#__PURE__*/_jsx(View, {
             style: styles.gridPattern,
             children: Array.from({
               length: 6
             }).map((_, i) => /*#__PURE__*/_jsx(View, {
-              style: [styles.gridLine, {
+              style: [styles.gridLine, sizeStyles.gridLine, {
                 transform: [{
                   rotate: `${i * 60}deg`
                 }]
               }]
             }, i))
           })]
-        }), icons.map((icon, i) => /*#__PURE__*/_jsx(DialIcon, {
-          selectedIcon: selectedIcon,
+        }), allDialIcons.filter(({
+          page
+        }) => page === safePage).map(({
+          icon,
+          slot
+        }) => /*#__PURE__*/_jsx(DialIcon, {
           onPress: handleIconPress,
           iconsProgress: iconsProgress,
           icon: icon,
-          index: i,
-          totalIcons: icons.length
-        }, `${i}-${icon.name}`))]
+          index: slot,
+          totalIcons: MAX_DIAL_SLOTS,
+          active: true
+        }, icon.id ?? `page${safePage}-${slot}`)), emptySlots.map(slot => /*#__PURE__*/_jsx(DialIcon, {
+          onPress: handleIconPress,
+          iconsProgress: iconsProgress,
+          icon: createEmptySlot(slot),
+          index: slot,
+          totalIcons: MAX_DIAL_SLOTS,
+          active: true
+        }, `empty-${slot}`))]
       }), /*#__PURE__*/_jsx(Animated.View, {
         style: [styles.buttonContainer, centerButtonAnimatedStyle],
         children: /*#__PURE__*/_jsxs(View, {
@@ -639,19 +617,32 @@ export const DialDevTools = ({
           })]
         })
       })]
-    }), /*#__PURE__*/_jsx(DevToolsSettingsModal, {
-      visible: isSettingsModalOpen,
+    }), pageCount > 1 && /*#__PURE__*/_jsx(DialPagination, {
+      page: safePage,
+      pageCount: pageCount,
+      onPrev: () => handlePageChange(safePage - 1),
+      onNext: () => handlePageChange(safePage + 1),
+      animatedStyle: {
+        position: "absolute",
+        left: (screenWidth - circleSize) / 2,
+        // Circle's bottom edge sits at bottom: 80 -> screenHeight - 80
+        // from the top. Place the pager 16px below that edge.
+        top: screenHeight - 80 + 16,
+        width: circleSize,
+        opacity: dialScale,
+        transform: [{
+          scale: dialScale
+        }]
+      }
+    }), isSettingsModalOpen && /*#__PURE__*/_jsx(DevToolsSettingsModal, {
+      visible: true,
       onClose: () => {
         setIsSettingsModalOpen(false);
         refreshSettings(); // Refresh from storage
       },
-      onSettingsChange: newSettings => {
-        // Immediately update local settings for instant feedback
-        setLocalSettings(newSettings);
-      },
       availableApps: availableApps
-    }), /*#__PURE__*/_jsx(OnboardingTooltip, {
-      visible: showOnboardingTooltip && !isSettingsModalOpen && !onboardingDismissedRef.current,
+    }), showOnboardingTooltip && !isSettingsModalOpen && !onboardingDismissedRef.current && /*#__PURE__*/_jsx(OnboardingTooltip, {
+      visible: true,
       onDismiss: handleOnboardingDismiss
     })]
   });
@@ -665,16 +656,13 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     backgroundColor: dialColors.dialBackdrop
   },
+  // width/height/borderRadius for the circle pieces come from sizeStyles —
+  // they track the live window width.
   parent: {
-    width: CIRCLE_SIZE,
-    height: CIRCLE_SIZE,
     alignItems: "center",
     justifyContent: "center"
   },
   circle: {
-    width: CIRCLE_SIZE,
-    height: CIRCLE_SIZE,
-    borderRadius: CIRCLE_SIZE / 2,
     position: "absolute",
     backgroundColor: "transparent",
     borderWidth: 1,
@@ -691,7 +679,6 @@ const styles = StyleSheet.create({
   gradientBackground: {
     width: "100%",
     height: "100%",
-    borderRadius: CIRCLE_SIZE / 2,
     position: "relative",
     backgroundColor: dialColors.dialBackground,
     overflow: "hidden"
@@ -699,24 +686,21 @@ const styles = StyleSheet.create({
   gradientLayer1: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: dialColors.dialGradient1,
-    opacity: 0.6,
-    borderRadius: CIRCLE_SIZE / 2
+    opacity: 0.6
   },
   gradientLayer2: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: dialColors.dialGradient2,
     opacity: 0.4,
     top: "30%",
-    left: "30%",
-    borderRadius: CIRCLE_SIZE / 2
+    left: "30%"
   },
   gradientLayer3: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: dialColors.dialGradient3,
     opacity: 0.3,
     top: "50%",
-    left: "50%",
-    borderRadius: CIRCLE_SIZE / 2
+    left: "50%"
   },
   gridPattern: {
     ...StyleSheet.absoluteFillObject,
@@ -725,7 +709,6 @@ const styles = StyleSheet.create({
   },
   gridLine: {
     position: "absolute",
-    width: CIRCLE_SIZE,
     height: 1,
     backgroundColor: dialColors.dialGridLine
   },