@buoy-gg/core 7.0.15 → 7.0.16

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

@@ -6,16 +6,22 @@
  * Uses shared layout calculations, styling, and animation config from @buoy-gg/floating-tools-core.
  * Platform-specific: CSS animations, mouse events, web JSX.
  *
- * Animation behavior matches mobile exactly - see docs/dial-animation-spec.md
+ * Visuals mirror the native DialDevTools.tsx exactly — values that never made
+ * it into the shared dial.ts are inlined here with provenance comments.
  *
  * @platform React DOM Web (Vite, CRA, Next.js, Electron)
  */
 
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
-import { getDialLayout, getAllIconPositions, getGridLineRotations, getIconStaggerInputRange, MAX_DIAL_SLOTS, dialAnimationConfig, getDialCSSKeyframesString, getDialCSSAnimationStyles, dialColors, dialStyles } from '@buoy-gg/floating-tools-react';
+import { getDialLayout, getAllIconPositions, getGridLineRotations, getIconStaggerInputRange, MAX_DIAL_SLOTS, DIAL_ICON_SIZE, dialAnimationConfig, getDialCSSKeyframesString, getDialCSSAnimationStyles, dialColors, dialStyles, withAlpha, floatingToolsColors } from '@buoy-gg/floating-tools-react';
+import { persistentStorage } from '@buoy-gg/shared-ui';
+import { OnboardingTooltip } from "./OnboardingTooltip.web.js";
 
-// Inject CSS keyframes once on module load
+// native DialDevTools.tsx SETTINGS_TOOLTIP_KEY
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SETTINGS_TOOLTIP_KEY = '@react_buoy_settings_tooltip_shown';
+
+// Inject CSS keyframes once on module load
 let keyframesInjected = false;
 function injectKeyframes() {
   if (keyframesInjected || typeof document === 'undefined') return;
@@ -48,6 +54,8 @@ function DialIconItem({
   const [isHovered, setIsHovered] = useState(false);
   const [isPressed, setIsPressed] = useState(false);
   const isEmpty = !icon.icon && icon.id.startsWith('empty-');
+  const isUnavailable = !isEmpty && icon.unavailable === true;
+  const interactive = !isEmpty && !isUnavailable;
   const {
     icons: iconConfig
   } = dialAnimationConfig;
@@ -65,12 +73,13 @@ function DialIconItem({
     iconProgress = 1;
   }
   iconProgress = Math.max(0, Math.min(1, iconProgress));
-  const iconSize = 60;
+  const iconSize = DIAL_ICON_SIZE;
   const pressedScale = iconConfig.pressIn.scale;
-  const hoveredScale = 1.1;
+  const hoveredScale = 1.1; // web-only hover affordance (no native counterpart)
+
   const scale = iconProgress * (isPressed ? pressedScale : isHovered ? hoveredScale : 1);
 
-  // Opacity interpolation
+  // Opacity interpolation — native DialIcon.tsx: [0, 0.3, 1] -> [0, 0.3, 1]
   let opacity = 0;
   if (iconProgress <= 0) {
     opacity = 0;
@@ -84,15 +93,15 @@ function DialIconItem({
   return /*#__PURE__*/_jsx("button", {
     role: "menuitem",
     "aria-label": isEmpty ? 'Empty slot' : icon.name,
-    "aria-disabled": isEmpty,
-    tabIndex: isEmpty ? -1 : 0,
-    onClick: isEmpty ? undefined : onPress,
-    onMouseEnter: () => !isEmpty && setIsHovered(true),
+    "aria-disabled": !interactive,
+    tabIndex: interactive ? 0 : -1,
+    onClick: interactive ? onPress : undefined,
+    onMouseEnter: () => interactive && setIsHovered(true),
     onMouseLeave: () => {
       setIsHovered(false);
       setIsPressed(false);
     },
-    onMouseDown: () => !isEmpty && setIsPressed(true),
+    onMouseDown: () => interactive && setIsPressed(true),
     onMouseUp: () => setIsPressed(false),
     style: {
       position: 'absolute',
@@ -106,7 +115,7 @@ function DialIconItem({
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
-      cursor: isEmpty ? 'default' : 'pointer',
+      cursor: interactive ? 'pointer' : 'default',
       transform: `translate(${x}px, ${y}px) scale(${scale})`,
       opacity,
       transition: isHovered || isPressed ? 'transform 100ms ease' : 'none',
@@ -148,25 +157,130 @@ function DialIconItem({
           alignItems: 'center',
           justifyContent: 'center',
           fontSize: 32,
+          // native DialIcon.tsx: icon rendered at size 32
           filter: isHovered ? 'brightness(1.2)' : 'none'
         },
         children: icon.icon
       }), /*#__PURE__*/_jsx("span", {
         style: {
-          fontSize: dialStyles.icon.label.fontSize,
+          fontSize:
+          // native: adjustsFontSizeToFit minimumFontScale 0.7 — long
+          // names shrink instead of wrapping/overflowing the slot.
+          icon.name.length > 8 ? Math.max(dialStyles.icon.label.fontSize * 0.7, dialStyles.icon.label.fontSize * 8 / icon.name.length) : dialStyles.icon.label.fontSize,
           fontWeight: dialStyles.icon.label.fontWeight,
           fontFamily: dialStyles.icon.label.fontFamily,
           color: dialColors.iconLabel,
           letterSpacing: dialStyles.icon.label.letterSpacing,
           marginTop: dialStyles.icon.label.marginTop,
-          textTransform: 'uppercase'
+          textTransform: 'uppercase',
+          whiteSpace: 'nowrap'
         },
         children: icon.name
+      }), isUnavailable &&
+      /*#__PURE__*/
+      // native DialIcon.tsx unavailableCaption: label size - 1, muted
+      _jsx("span", {
+        style: {
+          fontSize: dialStyles.icon.label.fontSize - 1,
+          fontWeight: dialStyles.icon.label.fontWeight,
+          fontFamily: dialStyles.icon.label.fontFamily,
+          letterSpacing: dialStyles.icon.label.letterSpacing,
+          color: floatingToolsColors.muted,
+          textTransform: 'uppercase',
+          whiteSpace: 'nowrap'
+        },
+        children: "Unavailable"
       })]
     })
   });
 }
 
+// =============================
+// Pagination (mirrors native DialPagination.tsx)
+// =============================
+
+/**
+ * Chevron glyph matching the native pager's ChevronLeft/ChevronRight from
+ * @buoy-gg/shared-ui (lucide two-line chevron, size 18, strokeWidth 2).
+ * Inlined as SVG because shared-ui is React Native-only.
+ */
+function PagerChevron({
+  side,
+  color
+}) {
+  // native lucide-icons.tsx ChevronLeft: (15,18)->(9,12)->(15,6); ChevronRight mirrored
+  const lines = side === 'prev' ? [[15, 18, 9, 12], [9, 12, 15, 6]] : [[9, 18, 15, 12], [15, 12, 9, 6]];
+  return /*#__PURE__*/_jsx("svg", {
+    width: 18,
+    height: 18,
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: lines.map(([x1, y1, x2, y2], i) => /*#__PURE__*/_jsx("line", {
+      x1: x1,
+      y1: y1,
+      x2: x2,
+      y2: y2,
+      stroke: color,
+      strokeWidth: 2
+    }, i))
+  });
+}
+function PagerButton({
+  side,
+  disabled,
+  onClick
+}) {
+  const [isPressed, setIsPressed] = useState(false);
+
+  // native DialPagination.tsx: accent = disabled ? emptyDotBorder : buoyColors.primary
+  // (buoyColors.primary === floatingToolsColors.info === dialColors.dialShadow, #20C997)
+  const accent = disabled ? dialColors.emptyDotBorder : dialColors.dialShadow;
+  return /*#__PURE__*/_jsxs("button", {
+    type: "button",
+    "aria-label": `${side === 'prev' ? 'Previous' : 'Next'} dial page`,
+    disabled: disabled,
+    onClick: onClick,
+    onMouseDown: () => !disabled && setIsPressed(true),
+    onMouseUp: () => setIsPressed(false),
+    onMouseLeave: () => setIsPressed(false),
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 4,
+      // native DialPagination.tsx: gap 4
+      padding: '10px 16px',
+      // native: paddingVertical 10, paddingHorizontal 16
+      borderRadius: 10,
+      border: `1px solid ${dialColors.dialBorder}`,
+      backgroundColor: dialColors.dialBackground,
+      color: accent,
+      fontSize: 12,
+      fontWeight: 900,
+      fontFamily: 'monospace',
+      letterSpacing: 1.5,
+      textTransform: 'uppercase',
+      // native: textShadow buoyColors.primary radius 4 (removed when disabled)
+      textShadow: disabled ? 'none' : `0 0 4px ${accent}`,
+      cursor: disabled ? 'default' : 'pointer',
+      opacity: disabled ? 0.4 : 1,
+      // native: buttonDisabled opacity 0.4
+      // native: shadowColor dialShadow, shadowOpacity 0.4, shadowRadius 8
+      boxShadow: disabled ? 'none' : `0 0 8px ${withAlpha(dialColors.dialShadow, 0.4)}`,
+      // native: press-in springs to scale 0.92
+      transform: isPressed ? 'scale(0.92)' : 'scale(1)',
+      transition: 'transform 100ms ease'
+    },
+    children: [side === 'prev' && /*#__PURE__*/_jsx(PagerChevron, {
+      side: "prev",
+      color: accent
+    }), side === 'prev' ? 'PREV' : 'NEXT', side === 'next' && /*#__PURE__*/_jsx(PagerChevron, {
+      side: "next",
+      color: accent
+    })]
+  });
+}
+
 // =============================
 // Main DialMenu Component
 // =============================
@@ -175,7 +289,9 @@ export function DialMenu({
   icons,
   onClose,
   centerLabel = 'MENU',
-  onCenterPress
+  onCenterPress,
+  settingsOpen = false,
+  hintsDisabled = false
 }) {
   // Animation values
   const [backdropOpacity, setBackdropOpacity] = useState(0);
@@ -187,20 +303,17 @@ export function DialMenu({
 
   // UI state
   const [isHoveringCenter, setIsHoveringCenter] = useState(false);
-  const [triggerGlitch, setTriggerGlitch] = useState(0);
   const [isExiting, setIsExiting] = useState(false);
   const [entranceComplete, setEntranceComplete] = useState(false);
 
   // Refs
   const animationRef = useRef(null);
-  const glitchIntervalRef = useRef(null);
   const isClosingRef = useRef(false);
 
   // Config
   const {
     entrance,
     exit,
-    continuous,
     interaction
   } = dialAnimationConfig;
   const cssAnimations = getDialCSSAnimationStyles();
@@ -243,7 +356,6 @@ export function DialMenu({
     const centerButtonDelay = entrance.centerButton.delay;
     const iconsDelay = entrance.icons.delay;
     const iconsDuration = entrance.icons.duration;
-    const glitchInterval = continuous.glitch.interval;
     const startTime = performance.now();
     const animate = currentTime => {
       const elapsed = currentTime - startTime;
@@ -296,14 +408,8 @@ export function DialMenu({
       }
     };
     animationRef.current = requestAnimationFrame(animate);
-
-    // Glitch interval
-    glitchIntervalRef.current = setInterval(() => {
-      setTriggerGlitch(prev => prev + 1);
-    }, glitchInterval);
     return () => {
       if (animationRef.current) cancelAnimationFrame(animationRef.current);
-      if (glitchIntervalRef.current) clearInterval(glitchIntervalRef.current);
     };
   }, []);
 
@@ -312,16 +418,14 @@ export function DialMenu({
     if (isClosingRef.current) return;
     isClosingRef.current = true;
     setIsExiting(true);
-    if (glitchIntervalRef.current) {
-      clearInterval(glitchIntervalRef.current);
-      glitchIntervalRef.current = null;
-    }
     if (animationRef.current) {
       cancelAnimationFrame(animationRef.current);
     }
     const startTime = performance.now();
     const iconsDuration = exit.icons.duration;
-    const dialDuration = Math.max(exit.centerButton.duration, exit.dialScale.duration);
+    const centerDuration = exit.centerButton.duration;
+    const dialDuration = exit.dialScale.duration;
+    const step2Duration = Math.max(centerDuration, dialDuration);
     const backdropDuration = exit.backdrop.duration;
     const animate = currentTime => {
       const elapsed = currentTime - startTime;
@@ -334,19 +438,21 @@ export function DialMenu({
         return;
       }
 
-      // Step 2: Dial + Center scale down (300 - 550ms)
+      // Step 2: Dial + Center scale down in parallel — native runs the center
+      // button (200ms) and dial (250ms) with their own durations.
       const step2Start = iconsDuration;
-      if (elapsed < step2Start + dialDuration) {
+      if (elapsed < step2Start + step2Duration) {
         setIconProgress(0);
-        const progress = easeInCubic((elapsed - step2Start) / dialDuration);
-        setDialScale(1 - progress);
-        setCenterButtonScale(1 - progress);
+        const centerProgress = Math.min(1, (elapsed - step2Start) / centerDuration);
+        const dialProgress = Math.min(1, (elapsed - step2Start) / dialDuration);
+        setCenterButtonScale(1 - easeInCubic(centerProgress));
+        setDialScale(1 - easeInCubic(dialProgress));
         animationRef.current = requestAnimationFrame(animate);
         return;
       }
 
       // Step 3: Backdrop fade (550 - 750ms)
-      const step3Start = step2Start + dialDuration;
+      const step3Start = step2Start + step2Duration;
       if (elapsed < step3Start + backdropDuration) {
         setDialScale(0);
         setCenterButtonScale(0);
@@ -374,6 +480,33 @@ export function DialMenu({
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [handleClose]);
 
+  // Settings onboarding tooltip — native DialDevTools.tsx:174-196: shown
+  // 1200ms after the dial mounts (entrance animations settle first) if never
+  // dismissed; suppressed while settings is open; dismissed forever when
+  // settings opens.
+  const [showSettingsTooltip, setShowSettingsTooltip] = useState(false);
+  useEffect(() => {
+    if (hintsDisabled) return;
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      const seen = await persistentStorage.getItem(SETTINGS_TOOLTIP_KEY);
+      if (!cancelled && !seen) setShowSettingsTooltip(true);
+    }, 1200);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [hintsDisabled]);
+  const dismissSettingsTooltip = useCallback(() => {
+    setShowSettingsTooltip(false);
+    void persistentStorage.setItem(SETTINGS_TOOLTIP_KEY, 'true');
+  }, []);
+  useEffect(() => {
+    if (settingsOpen && showSettingsTooltip) {
+      dismissSettingsTooltip();
+    }
+  }, [settingsOpen, showSettingsTooltip, dismissSettingsTooltip]);
+
   // Icon press handler
   const handleIconPress = useCallback(icon => {
     if (icon.id.startsWith('empty-') || isClosingRef.current) return;
@@ -418,24 +551,6 @@ export function DialMenu({
   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",
@@ -443,10 +558,7 @@ export function DialMenu({
     style: {
       position: 'fixed',
       inset: 0,
-      zIndex: 10000,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
+      zIndex: 10000
     },
     children: [/*#__PURE__*/_jsx("div", {
       role: "button",
@@ -462,204 +574,234 @@ export function DialMenu({
       }
     }), /*#__PURE__*/_jsxs("div", {
       style: {
-        animation: isAnimating ? cssAnimations.floating : 'none',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: 16
+        position: 'absolute',
+        left: '50%',
+        marginLeft: -layout.circleSize / 2,
+        bottom: 80,
+        // native DialDevTools.tsx: bottom: 80
+        width: layout.circleSize,
+        height: layout.circleSize,
+        borderRadius: '50%',
+        backgroundColor: dialColors.dialBackground,
+        border: `${dialStyles.circle.borderWidth}px solid ${dialColors.dialBorder}`,
+        // native: shadowColor dialShadow at shadowOpacity 0.5, shadowRadius 20
+        boxShadow: `0 0 ${dialStyles.circle.shadowRadius}px ${withAlpha(dialColors.dialShadow, dialStyles.circle.shadowOpacity)}`,
+        transform: `scale(${dialScale}) rotate(${dialRotation}deg)`,
+        opacity: dialScale > 0.01 ? 1 : 0,
+        overflow: 'hidden'
       },
       children: [/*#__PURE__*/_jsx("div", {
         style: {
-          animation: triggerGlitch > 0 && isAnimating ? cssAnimations.glitch : 'none'
+          position: 'absolute',
+          inset: 0,
+          borderRadius: '50%',
+          backgroundColor: dialColors.dialGradient1,
+          opacity: dialStyles.gradientLayers[0].opacity
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          position: 'absolute',
+          inset: 0,
+          top: '30%',
+          left: '30%',
+          borderRadius: '50%',
+          backgroundColor: dialColors.dialGradient2,
+          opacity: dialStyles.gradientLayers[1].opacity
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          position: 'absolute',
+          inset: 0,
+          top: '50%',
+          left: '50%',
+          borderRadius: '50%',
+          backgroundColor: dialColors.dialGradient3,
+          opacity: dialStyles.gradientLayers[2].opacity
+        }
+      }), gridRotations.map(deg => /*#__PURE__*/_jsx("div", {
+        style: {
+          position: 'absolute',
+          top: '50%',
+          left: 0,
+          right: 0,
+          height: dialStyles.grid.lineHeight,
+          backgroundColor: dialColors.dialGridLine,
+          transform: `rotate(${deg}deg)`,
+          transformOrigin: 'center'
+        }
+      }, deg)), paddedIcons.map((icon, index) => /*#__PURE__*/_jsx(DialIconItem, {
+        icon: icon,
+        index: index,
+        totalIcons: paddedIcons.length,
+        position: positions[index],
+        progress: iconProgress,
+        onPress: () => handleIconPress(icon)
+      }, index)), /*#__PURE__*/_jsxs("div", {
+        style: {
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          width: buttonContainerSize,
+          height: buttonContainerSize,
+          marginLeft: -buttonContainerSize / 2,
+          marginTop: -buttonContainerSize / 2,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: dialColors.dialBackground,
+          borderRadius: layout.buttonSize,
+          overflow: 'hidden',
+          transform: `scale(${centerButtonScale * centerPulseScale})`,
+          opacity: centerButtonScale > 0.01 ? 1 : 0
         },
-        children: /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx("div", {
+          style: {
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: dialColors.dialGradient1,
+            opacity: 0.5,
+            borderRadius: layout.buttonSize
+          }
+        }), /*#__PURE__*/_jsx("div", {
+          style: {
+            position: 'absolute',
+            inset: 0,
+            top: '20%',
+            left: '20%',
+            backgroundColor: dialColors.dialGradient2,
+            opacity: 0.3,
+            borderRadius: layout.buttonSize
+          }
+        }), /*#__PURE__*/_jsx("div", {
           style: {
-            position: 'relative',
-            width: layout.circleSize,
-            height: layout.circleSize,
-            borderRadius: '50%',
-            backgroundColor: dialColors.dialBackground,
-            border: `${dialStyles.circle.borderWidth}px solid ${dialColors.dialBorder}`,
-            boxShadow: `0 0 ${dialStyles.circle.shadowRadius}px ${dialColors.dialShadow}`,
-            transform: `scale(${dialScale}) rotate(${dialRotation}deg)`,
-            opacity: dialScale > 0.01 ? 1 : 0,
-            overflow: 'hidden'
+            position: 'absolute',
+            inset: 0,
+            top: '40%',
+            left: '40%',
+            backgroundColor: dialColors.dialGradient3,
+            opacity: 0.2,
+            borderRadius: layout.buttonSize
+          }
+        }), /*#__PURE__*/_jsx("div", {
+          style: {
+            width: buttonBorderSize,
+            height: buttonBorderSize,
+            borderRadius: layout.buttonSize * dialStyles.centerButton.borderRadiusRatio,
+            backgroundColor: dialColors.dialGridLine,
+            border: `${dialStyles.centerButton.borderWidth}px solid ${dialColors.dialBorder}`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
           },
-          children: [/*#__PURE__*/_jsx("div", {
-            style: {
-              position: 'absolute',
-              inset: 0,
-              borderRadius: '50%',
-              backgroundColor: dialColors.dialGradient1,
-              opacity: dialStyles.gradientLayers[0].opacity
-            }
-          }), /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx("div", {
+            onClick: onCenterPress,
+            onMouseEnter: () => setIsHoveringCenter(true),
+            onMouseLeave: () => setIsHoveringCenter(false),
             style: {
-              position: 'absolute',
-              inset: 0,
-              top: '30%',
-              left: '30%',
-              borderRadius: '50%',
-              backgroundColor: dialColors.dialGradient2,
-              opacity: dialStyles.gradientLayers[1].opacity
-            }
-          }), /*#__PURE__*/_jsx("div", {
-            style: {
-              position: 'absolute',
-              inset: 0,
-              top: '50%',
-              left: '50%',
-              borderRadius: '50%',
-              backgroundColor: dialColors.dialGradient3,
-              opacity: dialStyles.gradientLayers[2].opacity
-            }
-          }), gridRotations.map(deg => /*#__PURE__*/_jsx("div", {
-            style: {
-              position: 'absolute',
-              top: '50%',
-              left: 0,
-              right: 0,
-              height: dialStyles.grid.lineHeight,
-              backgroundColor: dialColors.dialGridLine,
-              transform: `rotate(${deg}deg)`,
-              transformOrigin: 'center'
-            }
-          }, deg)), paddedIcons.map((icon, index) => /*#__PURE__*/_jsx(DialIconItem, {
-            icon: icon,
-            index: index,
-            totalIcons: paddedIcons.length,
-            position: positions[index],
-            progress: iconProgress,
-            onPress: () => handleIconPress(icon)
-          }, index)), /*#__PURE__*/_jsxs("div", {
-            style: {
-              position: 'absolute',
-              left: '50%',
-              top: '50%',
-              width: buttonContainerSize,
-              height: buttonContainerSize,
-              marginLeft: -buttonContainerSize / 2,
-              marginTop: -buttonContainerSize / 2,
+              width: layout.buttonSize,
+              height: layout.buttonSize,
+              borderRadius: layout.buttonSize / 2,
               display: 'flex',
+              flexDirection: 'column',
               alignItems: 'center',
               justifyContent: 'center',
-              backgroundColor: dialColors.dialBackground,
-              borderRadius: layout.buttonSize,
-              overflow: 'hidden',
-              transform: `scale(${centerButtonScale * centerPulseScale})`,
-              opacity: centerButtonScale > 0.01 ? 1 : 0
+              cursor: onCenterPress ? 'pointer' : 'default',
+              transform: isHoveringCenter ? `scale(${interaction.centerHover.scale})` : 'scale(1)',
+              transition: `transform ${interaction.centerHover.duration}ms ease`,
+              animation: isAnimating && !isHoveringCenter ? cssAnimations.pulse : 'none'
             },
-            children: [/*#__PURE__*/_jsx("div", {
-              style: {
-                position: 'absolute',
-                inset: 0,
-                backgroundColor: dialColors.dialGradient1,
-                opacity: 0.5,
-                borderRadius: layout.buttonSize
-              }
-            }), /*#__PURE__*/_jsx("div", {
-              style: {
-                position: 'absolute',
-                inset: 0,
-                top: '20%',
-                left: '20%',
-                backgroundColor: dialColors.dialGradient2,
-                opacity: 0.3,
-                borderRadius: layout.buttonSize
-              }
-            }), /*#__PURE__*/_jsx("div", {
-              style: {
-                position: 'absolute',
-                inset: 0,
-                top: '40%',
-                left: '40%',
-                backgroundColor: dialColors.dialGradient3,
-                opacity: 0.2,
-                borderRadius: layout.buttonSize
-              }
-            }), /*#__PURE__*/_jsx("div", {
+            children: settingsOpen ?
+            /*#__PURE__*/
+            // native DialDevTools.tsx:716-724 — stacked CLOSE / SETTINGS
+            _jsxs("span", {
               style: {
-                width: buttonBorderSize,
-                height: buttonBorderSize,
-                borderRadius: layout.buttonSize * dialStyles.centerButton.borderRadiusRatio,
-                backgroundColor: dialColors.dialGridLine,
-                border: `${dialStyles.centerButton.borderWidth}px solid ${dialColors.dialBorder}`,
                 display: 'flex',
+                flexDirection: 'column',
                 alignItems: 'center',
-                justifyContent: 'center'
+                fontSize: dialStyles.centerButton.text.fontSize - 2,
+                fontWeight: dialStyles.centerButton.text.fontWeight,
+                fontFamily: dialStyles.centerButton.text.fontFamily,
+                color: '#FFFFFF',
+                letterSpacing: dialStyles.centerButton.text.letterSpacing,
+                textAlign: 'center',
+                textShadow: `0 0 4px ${dialColors.centerTextGlow}`,
+                textTransform: 'uppercase',
+                lineHeight: 1.2
               },
-              children: /*#__PURE__*/_jsx("div", {
-                onClick: onCenterPress,
-                onMouseEnter: () => setIsHoveringCenter(true),
-                onMouseLeave: () => setIsHoveringCenter(false),
+              children: [/*#__PURE__*/_jsx("span", {
                 style: {
-                  width: layout.buttonSize,
-                  height: layout.buttonSize,
-                  borderRadius: layout.buttonSize / 2,
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  cursor: onCenterPress ? 'pointer' : 'default',
-                  transform: isHoveringCenter ? `scale(${interaction.centerHover.scale})` : 'scale(1)',
-                  transition: `transform ${interaction.centerHover.duration}ms ease`,
-                  animation: isAnimating && !isHoveringCenter ? cssAnimations.breathing : 'none'
+                  marginBottom: -2
                 },
-                children: /*#__PURE__*/_jsx("span", {
-                  style: {
-                    fontSize: dialStyles.centerButton.text.fontSize,
-                    fontWeight: dialStyles.centerButton.text.fontWeight,
-                    fontFamily: dialStyles.centerButton.text.fontFamily,
-                    color: dialColors.centerText,
-                    letterSpacing: dialStyles.centerButton.text.letterSpacing,
-                    textShadow: `0 0 4px ${dialColors.centerTextGlow}`,
-                    textTransform: 'uppercase'
-                  },
-                  children: centerLabel
-                })
-              })
-            })]
-          })]
-        })
-      }, triggerGlitch), pageCount > 1 && /*#__PURE__*/_jsxs("div", {
+                children: "CLOSE"
+              }), /*#__PURE__*/_jsx("span", {
+                style: {
+                  marginTop: -2
+                },
+                children: "SETTINGS"
+              })]
+            }) : /*#__PURE__*/_jsx("span", {
+              style: {
+                fontSize: dialStyles.centerButton.text.fontSize,
+                fontWeight: dialStyles.centerButton.text.fontWeight,
+                fontFamily: dialStyles.centerButton.text.fontFamily,
+                color: '#FFFFFF',
+                // native DialDevTools.tsx centerText: #FFFFFF
+                letterSpacing: dialStyles.centerButton.text.letterSpacing,
+                textAlign: 'center',
+                textShadow: `0 0 4px ${dialColors.centerTextGlow}`,
+                textTransform: 'uppercase'
+              },
+              children: centerLabel
+            })
+          })
+        })]
+      })]
+    }), pageCount > 1 && /*#__PURE__*/_jsxs("div", {
+      style: {
+        position: 'absolute',
+        left: '50%',
+        marginLeft: -layout.circleSize / 2,
+        top: 'calc(100% - 64px)',
+        // native: screenHeight - 80 + 16
+        width: layout.circleSize,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        opacity: Math.min(1, dialScale),
+        transform: `scale(${Math.min(1, dialScale)})`
+      },
+      children: [/*#__PURE__*/_jsx(PagerButton, {
+        side: "prev",
+        disabled: safePage <= 0,
+        onClick: () => handlePageChange(safePage - 1)
+      }), /*#__PURE__*/_jsxs("span", {
         style: {
-          display: 'flex',
-          alignItems: 'center',
-          gap: 12,
-          opacity: Math.min(1, dialScale)
+          padding: '6px 12px',
+          // native indicator: paddingVertical 6, paddingHorizontal 12
+          fontSize: 13,
+          fontWeight: 900,
+          fontFamily: 'monospace',
+          letterSpacing: 2,
+          color: '#FFFFFF',
+          textShadow: `0 0 6px ${dialColors.dialShadow}`
         },
-        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", {
+        children: [String(safePage + 1).padStart(2, '0'), /*#__PURE__*/_jsxs("span", {
           style: {
-            fontSize: 13,
-            fontWeight: 900,
-            fontFamily: 'monospace',
-            letterSpacing: 2,
-            color: '#FFFFFF',
-            textShadow: `0 0 6px ${dialColors.dialShadow}`
+            color: dialColors.iconLabel,
+            textShadow: 'none'
           },
-          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"
+          children: [' / ', String(pageCount).padStart(2, '0')]
         })]
+      }), /*#__PURE__*/_jsx(PagerButton, {
+        side: "next",
+        disabled: safePage >= pageCount - 1,
+        onClick: () => handlePageChange(safePage + 1)
       })]
+    }), showSettingsTooltip && !settingsOpen && /*#__PURE__*/_jsx(OnboardingTooltip, {
+      title: "Welcome to Buoy!",
+      message: "Tap the center button to configure and add tools to your dial menu.",
+      onDismiss: dismissSettingsTooltip,
+      showArrow: false
     })]
   });
 }