@buoy-gg/core 2.1.14 → 2.2.0

package/lib/module/floatingMenu/FloatingMenu.js

@@ -227,8 +227,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/dial/DialDevTools.js

@@ -4,6 +4,8 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, View, Dimensions, 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";
@@ -12,7 +14,8 @@ 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
+  width: SCREEN_WIDTH,
+  height: SCREEN_HEIGHT
 } = Dimensions.get("window");
 
 // Use shared layout calculation from core
@@ -22,10 +25,17 @@ const layout = 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: () => {}
+});
 export const DialDevTools = ({
   onClose,
   onSettingsPress,
-  settings: externalSettings,
   autoOpenSettings = false,
   apps,
   state,
@@ -38,18 +48,12 @@ 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;
 
   // Load persisted settings modal state on mount
   useEffect(() => {
@@ -78,20 +82,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 +118,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 +131,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 +256,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 +333,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,
+    // 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(floatingAnim, {
-      toValue: continuous.floating.minY,
-      duration: continuous.floating.duration,
+    }), Animated.timing(pulseScale, {
+      toValue: continuous.pulse.minScale,
+      duration: continuous.pulse.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,
-      easing: Easing.inOut(Easing.ease),
-      useNativeDriver: true
-    }), Animated.timing(breathingScale, {
-      toValue: continuous.breathing.minScale,
-      duration: continuous.breathing.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 +419,8 @@ export const DialDevTools = ({
       }
     });
   };
-  const handleIconPress = index => {
-    setSelectedIcon(index);
+  const handleIconPress = icon => {
+    setSelectedIcon(1);
     const interaction = dialAnimationConfig?.interaction ?? {
       iconSelect: {
         pulse: [{
@@ -500,9 +452,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 +464,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 = {
@@ -542,8 +489,6 @@ export const DialDevTools = ({
         left: (SCREEN_WIDTH - CIRCLE_SIZE) / 2,
         bottom: 80,
         transform: [{
-          translateY: floatingAnim
-        }, {
           scale: dialScale
         }, {
           rotate: dialRotation.interpolate({
@@ -553,7 +498,7 @@ export const DialDevTools = ({
         }]
       }],
       children: [/*#__PURE__*/_jsxs(Animated.View, {
-        style: [styles.circle, glitchAnimatedStyle],
+        style: styles.circle,
         children: [/*#__PURE__*/_jsxs(View, {
           style: styles.gradientBackground,
           children: [/*#__PURE__*/_jsx(View, {
@@ -574,14 +519,26 @@ export const DialDevTools = ({
               }]
             }, 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 +596,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: (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__*/_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
     })]
   });

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

@@ -211,8 +211,14 @@ export function DialMenu({
   }), []);
   const gridRotations = useMemo(() => getGridLineRotations(), []);
   const positions = useMemo(() => getAllIconPositions(MAX_DIAL_SLOTS, layout.iconRadius), [layout.iconRadius]);
+
+  // Pagination: tools are split across pages of MAX_DIAL_SLOTS.
+  const [currentPage, setCurrentPage] = useState(0);
+  const pageCount = Math.max(1, Math.ceil(icons.length / MAX_DIAL_SLOTS));
+  const safePage = Math.min(currentPage, pageCount - 1);
   const paddedIcons = useMemo(() => {
-    const result = [...icons.slice(0, MAX_DIAL_SLOTS)];
+    const start = safePage * MAX_DIAL_SLOTS;
+    const result = [...icons.slice(start, start + MAX_DIAL_SLOTS)];
     while (result.length < MAX_DIAL_SLOTS) {
       result.push({
         id: `empty-${result.length}`,
@@ -222,7 +228,7 @@ export function DialMenu({
       });
     }
     return result;
-  }, [icons]);
+  }, [icons, safePage]);
 
   // Inject keyframes
   useEffect(() => {
@@ -399,10 +405,37 @@ export 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 = 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 * dialStyles.centerButton.containerRatio;
   const buttonBorderSize = layout.buttonSize * dialStyles.centerButton.borderRatio;
   const isAnimating = entranceComplete && !isExiting;
+  const pagerButtonStyle = disabled => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+    padding: '8px 16px',
+    borderRadius: 10,
+    border: `1px solid ${dialColors.dialBorder}`,
+    backgroundColor: dialColors.dialBackground,
+    color: disabled ? dialColors.emptyDotBorder : 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 ${dialColors.dialShadow}66`
+  });
   return /*#__PURE__*/_jsxs("div", {
     role: "dialog",
     "aria-label": "Dial Menu",
@@ -427,11 +460,15 @@ export function DialMenu({
         backgroundColor: dialColors.dialBackdrop,
         opacity: backdropOpacity
       }
-    }), /*#__PURE__*/_jsx("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       style: {
-        animation: isAnimating ? cssAnimations.floating : 'none'
+        animation: isAnimating ? cssAnimations.floating : 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 16
       },
-      children: /*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         style: {
           animation: triggerGlitch > 0 && isAnimating ? cssAnimations.glitch : 'none'
         },
@@ -494,7 +531,7 @@ export function DialMenu({
             position: positions[index],
             progress: iconProgress,
             onPress: () => handleIconPress(icon)
-          }, icon.id)), /*#__PURE__*/_jsxs("div", {
+          }, index)), /*#__PURE__*/_jsxs("div", {
             style: {
               position: 'absolute',
               left: '50%',
@@ -584,7 +621,45 @@ export function DialMenu({
             })]
           })]
         })
-      }, triggerGlitch)
+      }, triggerGlitch), pageCount > 1 && /*#__PURE__*/_jsxs("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          opacity: Math.min(1, dialScale)
+        },
+        children: [/*#__PURE__*/_jsx("button", {
+          type: "button",
+          "aria-label": "Previous dial page",
+          disabled: safePage <= 0,
+          onClick: () => handlePageChange(safePage - 1),
+          style: pagerButtonStyle(safePage <= 0),
+          children: "\u2039 PREV"
+        }), /*#__PURE__*/_jsxs("span", {
+          style: {
+            fontSize: 13,
+            fontWeight: 900,
+            fontFamily: 'monospace',
+            letterSpacing: 2,
+            color: '#FFFFFF',
+            textShadow: `0 0 6px ${dialColors.dialShadow}`
+          },
+          children: [String(safePage + 1).padStart(2, '0'), /*#__PURE__*/_jsxs("span", {
+            style: {
+              color: dialColors.iconLabel,
+              textShadow: 'none'
+            },
+            children: [' / ', String(pageCount).padStart(2, '0')]
+          })]
+        }), /*#__PURE__*/_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"
+        })]
+      })]
     })]
   });
 }