@buoy-gg/core 2.1.14 → 2.2.0

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

@@ -7,6 +7,8 @@ exports.DialDevTools = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _DialIcon = require("./DialIcon.js");
+var _DialPagination = require("./DialPagination.js");
+var _dialUsageStore = require("./dialUsageStore.js");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _DevToolsSettingsModal = require("../DevToolsSettingsModal");
 var _license = require("@buoy-gg/license");
@@ -17,7 +19,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 // Icons are provided by installedApps; no direct icon imports here.
 
 const {
-  width: SCREEN_WIDTH
+  width: SCREEN_WIDTH,
+  height: SCREEN_HEIGHT
 } = _reactNative.Dimensions.get("window");
 
 // Use shared layout calculation from core
@@ -27,10 +30,17 @@ const layout = (0, _floatingToolsCore.getDialLayout)({
 const CIRCLE_SIZE = layout.circleSize;
 const BUTTON_SIZE = layout.buttonSize;
 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: () => {}
+});
 const DialDevTools = ({
   onClose,
   onSettingsPress,
-  settings: externalSettings,
   autoOpenSettings = false,
   apps,
   state,
@@ -43,18 +53,12 @@ const DialDevTools = ({
   const onboardingDismissedRef = (0, _react.useRef)(false); // Track if onboarding was dismissed
   const hintsDisabled = (0, _sharedUi.useHintsDisabled)();
   const {
-    settings: hookSettings,
     refreshSettings
   } = (0, _DevToolsSettingsModal.useDevToolsSettings)();
   const {
     open
   } = (0, _AppHost.useAppHost)();
   const isPro = (0, _license.useIsPro)();
-  // Initialize with external settings if provided, otherwise use hook settings
-  const [localSettings, setLocalSettings] = (0, _react.useState)(externalSettings || hookSettings);
-
-  // Always use localSettings (which can be updated by the modal)
-  const settings = localSettings;
 
   // Load persisted settings modal state on mount
   (0, _react.useEffect)(() => {
@@ -83,20 +87,6 @@ const DialDevTools = ({
     });
   }, [isSettingsModalOpen, settingsModalStateLoaded]);
 
-  // Update local settings when external settings change
-  (0, _react.useEffect)(() => {
-    if (externalSettings) {
-      setLocalSettings(externalSettings);
-    }
-  }, [externalSettings]);
-
-  // Update local settings when hook settings change (if no external settings)
-  (0, _react.useEffect)(() => {
-    if (!externalSettings) {
-      setLocalSettings(hookSettings);
-    }
-  }, [hookSettings, externalSettings]);
-
   // Auto-open settings modal when prop is true
   (0, _react.useEffect)(() => {
     if (autoOpenSettings && !isSettingsModalOpen) {
@@ -133,7 +123,6 @@ const DialDevTools = ({
   const dialRotation = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
   const centerButtonScale = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
   const iconsProgress = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const glitchOffset = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
   const pulseScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
   const availableApps = (0, _react.useMemo)(() => apps.map(({
     id,
@@ -147,88 +136,111 @@ const DialDevTools = ({
     description
   })), [apps]);
 
-  // Subtle animations
-  const floatingAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const breathingScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const circuitOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-
   // Animation tracking refs
-  const glitchIntervalRef = (0, _react.useRef)(null);
   const pulseAnimationRef = (0, _react.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 = (0, _react.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 >= _floatingToolsCore.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 ?? _sharedUi.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 = (0, _react.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 ?? _sharedUi.buoyColors.primary,
+        onPress: () => {
+          // Record usage so frequently/recently used tools rank toward page 1.
+          void (0, _dialUsageStore.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 > _floatingToolsCore.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] = (0, _react.useState)(() => (0, _dialUsageStore.getRankedToolIds)(dialApps.map(a => a.id)));
+  (0, _react.useEffect)(() => {
+    const ids = dialApps.map(a => a.id);
+    if ((0, _dialUsageStore.isDialUsageLoaded)()) {
+      setRankedIds((0, _dialUsageStore.getRankedToolIds)(ids));
+      return;
     }
-  }
-  const icons = [...enabledIcons];
-  while (icons.length < _floatingToolsCore.MAX_DIAL_SLOTS) {
-    icons.push(createEmptySlot(icons.length));
-  }
+    // Usage data not loaded yet — show default order, then re-rank once ready.
+    let cancelled = false;
+    (0, _dialUsageStore.loadDialUsage)().then(() => {
+      if (!cancelled) setRankedIds((0, _dialUsageStore.getRankedToolIds)(ids));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [dialApps]);
+  const pageCount = Math.max(1, Math.ceil(rankedIds.length / _floatingToolsCore.MAX_DIAL_SLOTS));
+  const [currentPage, setCurrentPage] = (0, _react.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 = (0, _react.useMemo)(() => {
+    return rankedIds.map(id => iconsById.get(id)).filter(icon => Boolean(icon)).map((icon, i) => ({
+      icon,
+      page: Math.floor(i / _floatingToolsCore.MAX_DIAL_SLOTS),
+      slot: i % _floatingToolsCore.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 = (0, _react.useMemo)(() => {
+    const onThisPage = allDialIcons.filter(d => d.page === safePage).length;
+    const slots = [];
+    for (let s = onThisPage; s < _floatingToolsCore.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
   (0, _react.useEffect)(() => {
@@ -249,13 +261,13 @@ const DialDevTools = ({
           }
         },
         centerButton: {
-          delay: 300,
+          delay: 150,
           damping: 10,
           stiffness: 200
         },
         icons: {
-          delay: 500,
-          duration: 600
+          delay: 200,
+          duration: 400
         },
         circuitTraces: {
           delay: 600,
@@ -326,81 +338,21 @@ const DialDevTools = ({
       useNativeDriver: true
     })]).start();
 
-    // Subtle glitch effect - using shared config
-    const glitchAnimation = () => {
-      _reactNative.Animated.sequence([_reactNative.Animated.timing(glitchOffset, {
-        toValue: continuous.glitch.offset,
-        duration: continuous.glitch.stepDuration,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(glitchOffset, {
-        toValue: -continuous.glitch.offset,
-        duration: continuous.glitch.stepDuration,
-        useNativeDriver: true
-      }), _reactNative.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 = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(pulseScale, {
-        toValue: continuous.pulse.maxScale,
-        duration: continuous.pulse.duration,
-        easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(pulseScale, {
-        toValue: continuous.pulse.minScale,
-        duration: continuous.pulse.duration,
-        easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
-        useNativeDriver: true
-      })]));
-      pulseAnimationRef.current.start();
-    };
-    startPulse();
-
-    // Subtle floating animation for the dial - using shared config
-    _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(floatingAnim, {
-      toValue: continuous.floating.maxY,
-      duration: continuous.floating.duration,
+    // Pulse animation - only continuous effect kept for performance
+    pulseAnimationRef.current = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(pulseScale, {
+      toValue: continuous.pulse.maxScale,
+      duration: continuous.pulse.duration,
       easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
       useNativeDriver: true
-    }), _reactNative.Animated.timing(floatingAnim, {
-      toValue: continuous.floating.minY,
-      duration: continuous.floating.duration,
+    }), _reactNative.Animated.timing(pulseScale, {
+      toValue: continuous.pulse.minScale,
+      duration: continuous.pulse.duration,
       easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
       useNativeDriver: true
-    })])).start();
-
-    // Gentle breathing effect for center button - using shared config
-    _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(breathingScale, {
-      toValue: continuous.breathing.maxScale,
-      duration: continuous.breathing.duration,
-      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(breathingScale, {
-      toValue: continuous.breathing.minScale,
-      duration: continuous.breathing.duration,
-      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
-      useNativeDriver: true
-    })])).start();
-
-    // Circuit traces fade in - using shared config
-    _reactNative.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 = () => {
@@ -472,8 +424,8 @@ const DialDevTools = ({
       }
     });
   };
-  const handleIconPress = index => {
-    setSelectedIcon(index);
+  const handleIconPress = icon => {
+    setSelectedIcon(1);
     const interaction = _floatingToolsCore.dialAnimationConfig?.interaction ?? {
       iconSelect: {
         pulse: [{
@@ -505,9 +457,9 @@ 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);
@@ -517,14 +469,9 @@ const DialDevTools = ({
   const backdropAnimatedStyle = {
     opacity: backdropOpacity
   };
-  const glitchAnimatedStyle = {
-    transform: [{
-      translateX: glitchOffset
-    }]
-  };
   const centerButtonAnimatedStyle = {
     transform: [{
-      scale: _reactNative.Animated.multiply(centerButtonScale, breathingScale)
+      scale: centerButtonScale
     }]
   };
   const pulseAnimatedStyle = {
@@ -547,8 +494,6 @@ const DialDevTools = ({
         left: (SCREEN_WIDTH - CIRCLE_SIZE) / 2,
         bottom: 80,
         transform: [{
-          translateY: floatingAnim
-        }, {
           scale: dialScale
         }, {
           rotate: dialRotation.interpolate({
@@ -558,7 +503,7 @@ const DialDevTools = ({
         }]
       }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-        style: [styles.circle, glitchAnimatedStyle],
+        style: styles.circle,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.gradientBackground,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -579,14 +524,26 @@ const DialDevTools = ({
               }]
             }, i))
           })]
-        }), icons.map((icon, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialIcon.DialIcon, {
-          selectedIcon: selectedIcon,
+        }), allDialIcons.filter(({
+          page
+        }) => page === safePage).map(({
+          icon,
+          slot
+        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialIcon.DialIcon, {
           onPress: handleIconPress,
           iconsProgress: iconsProgress,
           icon: icon,
-          index: i,
-          totalIcons: icons.length
-        }, `${i}-${icon.name}`))]
+          index: slot,
+          totalIcons: _floatingToolsCore.MAX_DIAL_SLOTS,
+          active: true
+        }, icon.id ?? `page${safePage}-${slot}`)), emptySlots.map(slot => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialIcon.DialIcon, {
+          onPress: handleIconPress,
+          iconsProgress: iconsProgress,
+          icon: createEmptySlot(slot),
+          index: slot,
+          totalIcons: _floatingToolsCore.MAX_DIAL_SLOTS,
+          active: true
+        }, `empty-${slot}`))]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
         style: [styles.buttonContainer, centerButtonAnimatedStyle],
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -644,19 +601,32 @@ const DialDevTools = ({
           })]
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DevToolsSettingsModal.DevToolsSettingsModal, {
-      visible: isSettingsModalOpen,
+    }), pageCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialPagination.DialPagination, {
+      page: safePage,
+      pageCount: pageCount,
+      onPrev: () => handlePageChange(safePage - 1),
+      onNext: () => handlePageChange(safePage + 1),
+      animatedStyle: {
+        position: "absolute",
+        left: (SCREEN_WIDTH - CIRCLE_SIZE) / 2,
+        // Circle's bottom edge sits at bottom: 80 -> SCREEN_HEIGHT - 80
+        // from the top. Place the pager 16px below that edge.
+        top: SCREEN_HEIGHT - 80 + 16,
+        width: CIRCLE_SIZE,
+        opacity: dialScale,
+        transform: [{
+          scale: dialScale
+        }]
+      }
+    }), isSettingsModalOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DevToolsSettingsModal.DevToolsSettingsModal, {
+      visible: true,
       onClose: () => {
         setIsSettingsModalOpen(false);
         refreshSettings(); // Refresh from storage
       },
-      onSettingsChange: newSettings => {
-        // Immediately update local settings for instant feedback
-        setLocalSettings(newSettings);
-      },
       availableApps: availableApps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OnboardingTooltip.OnboardingTooltip, {
-      visible: showOnboardingTooltip && !isSettingsModalOpen && !onboardingDismissedRef.current,
+    }), showOnboardingTooltip && !isSettingsModalOpen && !onboardingDismissedRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OnboardingTooltip.OnboardingTooltip, {
+      visible: true,
       onDismiss: handleOnboardingDismiss
     })]
   });

package/lib/commonjs/floatingMenu/dial/DialDevTools.web.js

@@ -214,8 +214,14 @@ function DialMenu({
   }), []);
   const gridRotations = (0, _react.useMemo)(() => (0, _floatingToolsReact.getGridLineRotations)(), []);
   const positions = (0, _react.useMemo)(() => (0, _floatingToolsReact.getAllIconPositions)(_floatingToolsReact.MAX_DIAL_SLOTS, layout.iconRadius), [layout.iconRadius]);
+
+  // Pagination: tools are split across pages of MAX_DIAL_SLOTS.
+  const [currentPage, setCurrentPage] = (0, _react.useState)(0);
+  const pageCount = Math.max(1, Math.ceil(icons.length / _floatingToolsReact.MAX_DIAL_SLOTS));
+  const safePage = Math.min(currentPage, pageCount - 1);
   const paddedIcons = (0, _react.useMemo)(() => {
-    const result = [...icons.slice(0, _floatingToolsReact.MAX_DIAL_SLOTS)];
+    const start = safePage * _floatingToolsReact.MAX_DIAL_SLOTS;
+    const result = [...icons.slice(start, start + _floatingToolsReact.MAX_DIAL_SLOTS)];
     while (result.length < _floatingToolsReact.MAX_DIAL_SLOTS) {
       result.push({
         id: `empty-${result.length}`,
@@ -225,7 +231,7 @@ function DialMenu({
       });
     }
     return result;
-  }, [icons]);
+  }, [icons, safePage]);
 
   // Inject keyframes
   (0, _react.useEffect)(() => {
@@ -402,10 +408,37 @@ function DialMenu({
     }, interaction.iconSelect.actionDelay);
   }, [interaction.iconSelect, handleClose]);
 
+  // Page navigation - icons are keyed by slot index, so this only swaps
+  // their content in place (no remount, no re-animation) for an instant page
+  // change.
+  const handlePageChange = (0, _react.useCallback)(next => {
+    if (isClosingRef.current) return;
+    const clamped = Math.max(0, Math.min(next, pageCount - 1));
+    if (clamped !== safePage) setCurrentPage(clamped);
+  }, [pageCount, safePage]);
+
   // Computed values
   const buttonContainerSize = layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.containerRatio;
   const buttonBorderSize = layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.borderRatio;
   const isAnimating = entranceComplete && !isExiting;
+  const pagerButtonStyle = disabled => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+    padding: '8px 16px',
+    borderRadius: 10,
+    border: `1px solid ${_floatingToolsReact.dialColors.dialBorder}`,
+    backgroundColor: _floatingToolsReact.dialColors.dialBackground,
+    color: disabled ? _floatingToolsReact.dialColors.emptyDotBorder : _floatingToolsReact.dialColors.dialShadow,
+    fontSize: 12,
+    fontWeight: 900,
+    fontFamily: 'monospace',
+    letterSpacing: 1.5,
+    textTransform: 'uppercase',
+    cursor: disabled ? 'default' : 'pointer',
+    opacity: disabled ? 0.4 : 1,
+    boxShadow: disabled ? 'none' : `0 0 8px ${_floatingToolsReact.dialColors.dialShadow}66`
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     role: "dialog",
     "aria-label": "Dial Menu",
@@ -430,11 +463,15 @@ function DialMenu({
         backgroundColor: _floatingToolsReact.dialColors.dialBackdrop,
         opacity: backdropOpacity
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
-        animation: isAnimating ? cssAnimations.floating : 'none'
+        animation: isAnimating ? cssAnimations.floating : 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 16
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
           animation: triggerGlitch > 0 && isAnimating ? cssAnimations.glitch : 'none'
         },
@@ -497,7 +534,7 @@ function DialMenu({
             position: positions[index],
             progress: iconProgress,
             onPress: () => handleIconPress(icon)
-          }, icon.id)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          }, index)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             style: {
               position: 'absolute',
               left: '50%',
@@ -587,7 +624,45 @@ function DialMenu({
             })]
           })]
         })
-      }, triggerGlitch)
+      }, triggerGlitch), pageCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          opacity: Math.min(1, dialScale)
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          "aria-label": "Previous dial page",
+          disabled: safePage <= 0,
+          onClick: () => handlePageChange(safePage - 1),
+          style: pagerButtonStyle(safePage <= 0),
+          children: "\u2039 PREV"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          style: {
+            fontSize: 13,
+            fontWeight: 900,
+            fontFamily: 'monospace',
+            letterSpacing: 2,
+            color: '#FFFFFF',
+            textShadow: `0 0 6px ${_floatingToolsReact.dialColors.dialShadow}`
+          },
+          children: [String(safePage + 1).padStart(2, '0'), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            style: {
+              color: _floatingToolsReact.dialColors.iconLabel,
+              textShadow: 'none'
+            },
+            children: [' / ', String(pageCount).padStart(2, '0')]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          "aria-label": "Next dial page",
+          disabled: safePage >= pageCount - 1,
+          onClick: () => handlePageChange(safePage + 1),
+          style: pagerButtonStyle(safePage >= pageCount - 1),
+          children: "NEXT \u203A"
+        })]
+      })]
     })]
   });
 }