@buoy-gg/core 1.7.2

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

@@ -0,0 +1,829 @@
+"use strict";
+
+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 { safeGetItem, safeSetItem, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
+import { DevToolsSettingsModal, useDevToolsSettings } from "../DevToolsSettingsModal.js";
+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");
+
+// Use shared layout calculation from core
+const layout = getDialLayout({
+  screenWidth: SCREEN_WIDTH
+});
+const CIRCLE_SIZE = layout.circleSize;
+const BUTTON_SIZE = layout.buttonSize;
+const ONBOARDING_STORAGE_KEY = "@react_buoy_settings_tooltip_shown";
+export const DialDevTools = ({
+  onClose,
+  onSettingsPress,
+  settings: externalSettings,
+  autoOpenSettings = false,
+  apps,
+  state,
+  actions
+}) => {
+  const [selectedIcon, setSelectedIcon] = useState(-1);
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
+  const [settingsModalStateLoaded, setSettingsModalStateLoaded] = useState(false);
+  const [showOnboardingTooltip, setShowOnboardingTooltip] = useState(false);
+  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(() => {
+    const loadSettingsModalState = async () => {
+      try {
+        const savedModalOpen = await safeGetItem(devToolsStorageKeys.settings.modalOpen());
+        if (savedModalOpen === "true") {
+          setIsSettingsModalOpen(true);
+        }
+      } catch (error) {
+        // Failed to load settings modal state - use default (closed)
+      } finally {
+        setSettingsModalStateLoaded(true);
+      }
+    };
+    loadSettingsModalState();
+  }, []);
+
+  // Persist settings modal state when it changes
+  useEffect(() => {
+    // Only persist after initial state is loaded to avoid overwriting with default
+    if (!settingsModalStateLoaded) return;
+    safeSetItem(devToolsStorageKeys.settings.modalOpen(), isSettingsModalOpen ? "true" : "false").catch(error => {
+      // Failed to save settings modal state - continue without persistence
+      console.warn("Failed to save settings modal state:", error);
+    });
+  }, [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) {
+      setIsSettingsModalOpen(true);
+    }
+  }, [autoOpenSettings, isSettingsModalOpen]);
+
+  // Check if we should show the onboarding tooltip
+  useEffect(() => {
+    // Skip onboarding if hints are disabled
+    if (hintsDisabled) {
+      return;
+    }
+    const checkOnboarding = async () => {
+      try {
+        const hasSeenTooltip = await safeGetItem(ONBOARDING_STORAGE_KEY);
+        if (!hasSeenTooltip) {
+          // Small delay to let the entrance animations play first
+          setTimeout(() => {
+            setShowOnboardingTooltip(true);
+          }, 1200);
+        }
+      } catch (error) {
+        // If there's an error reading storage, don't show the tooltip
+        // to avoid annoying the user repeatedly
+      }
+    };
+    checkOnboarding();
+  }, [hintsDisabled]);
+
+  // React Native Animated values
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const dialScale = useRef(new Animated.Value(0)).current;
+  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,
+    name,
+    slot,
+    description
+  }) => ({
+    id,
+    name,
+    slot,
+    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");
+  const isDialEnabled = id => {
+    if (!settings) return false;
+    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);
+
+        // 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?.();
+      }
+    });
+  }
+  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
+    }
+  }
+  const icons = [...enabledIcons];
+  while (icons.length < MAX_DIAL_SLOTS) {
+    icons.push(createEmptySlot(icons.length));
+  }
+
+  // Initialize animations on mount - using shared config from core
+  useEffect(() => {
+    // Fallback config in case dialAnimationConfig hasn't loaded
+    const config = dialAnimationConfig ?? {
+      entrance: {
+        backdrop: {
+          duration: 400
+        },
+        dial: {
+          scale: {
+            damping: 15,
+            stiffness: 150,
+            mass: 1
+          },
+          rotation: {
+            duration: 800
+          }
+        },
+        centerButton: {
+          delay: 300,
+          damping: 10,
+          stiffness: 200
+        },
+        icons: {
+          delay: 500,
+          duration: 600
+        },
+        circuitTraces: {
+          delay: 600,
+          duration: 1000
+        }
+      },
+      continuous: {
+        glitch: {
+          interval: 3000,
+          offset: 2,
+          stepDuration: 50
+        },
+        pulse: {
+          maxScale: 1.02,
+          minScale: 0.98,
+          duration: 1000
+        },
+        floating: {
+          maxY: -8,
+          minY: 0,
+          duration: 3000
+        },
+        breathing: {
+          maxScale: 1.05,
+          minScale: 0.98,
+          duration: 2500
+        }
+      }
+    };
+    const {
+      entrance,
+      continuous
+    } = config;
+
+    // Entrance animation sequence
+    Animated.timing(backdropOpacity, {
+      toValue: 1,
+      duration: entrance.backdrop.duration,
+      useNativeDriver: true
+    }).start();
+    Animated.spring(dialScale, {
+      toValue: 1,
+      damping: entrance.dial.scale.damping,
+      stiffness: entrance.dial.scale.stiffness,
+      mass: entrance.dial.scale.mass,
+      useNativeDriver: true
+    }).start();
+    Animated.sequence([Animated.timing(dialRotation, {
+      toValue: 1,
+      duration: entrance.dial.rotation.duration,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    }), Animated.timing(dialRotation, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: true
+    })]).start();
+    Animated.sequence([Animated.delay(entrance.centerButton.delay), Animated.spring(centerButtonScale, {
+      toValue: 1,
+      damping: entrance.centerButton.damping,
+      stiffness: entrance.centerButton.stiffness,
+      useNativeDriver: true
+    })]).start();
+    Animated.sequence([Animated.delay(entrance.icons.delay), Animated.timing(iconsProgress, {
+      toValue: 1,
+      duration: entrance.icons.duration,
+      easing: Easing.out(Easing.cubic),
+      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,
+      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();
+    return () => {
+      if (glitchIntervalRef.current) {
+        clearInterval(glitchIntervalRef.current);
+      }
+      if (pulseAnimationRef.current) {
+        pulseAnimationRef.current.stop();
+      }
+    };
+  }, []);
+  const handleOnboardingDismiss = () => {
+    // Mark as dismissed immediately in ref (synchronous, no re-render needed)
+    onboardingDismissedRef.current = true;
+
+    // Hide the tooltip
+    setShowOnboardingTooltip(false);
+
+    // Save to storage asynchronously in the background
+    safeSetItem(ONBOARDING_STORAGE_KEY, "true").catch(error => {
+      // Silently fail - user already saw onboarding, just won't persist
+      console.warn("Failed to save dial onboarding state:", error);
+    });
+  };
+  const handleClose = () => {
+    // Stop any ongoing animations first
+    if (pulseAnimationRef.current) {
+      pulseAnimationRef.current.stop();
+    }
+    const exit = dialAnimationConfig?.exit ?? {
+      icons: {
+        duration: 300
+      },
+      centerButton: {
+        duration: 200
+      },
+      dialScale: {
+        duration: 250
+      },
+      backdrop: {
+        duration: 200
+      }
+    };
+
+    // Exit animation sequence - reverse order of entrance, using shared config
+    Animated.sequence([
+    // First animate icons back to center
+    Animated.timing(iconsProgress, {
+      toValue: 0,
+      duration: exit.icons.duration,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true
+    }),
+    // Then scale down center button and dial
+    Animated.parallel([Animated.timing(centerButtonScale, {
+      toValue: 0,
+      duration: exit.centerButton.duration,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true
+    }), Animated.timing(dialScale, {
+      toValue: 0,
+      duration: exit.dialScale.duration,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true
+    })]),
+    // Finally fade out backdrop
+    Animated.timing(backdropOpacity, {
+      toValue: 0,
+      duration: exit.backdrop.duration,
+      useNativeDriver: true
+    })]).start(() => {
+      // Use setTimeout to defer the state update to the next tick
+      // This avoids the useInsertionEffect warning
+      if (onClose) {
+        setTimeout(() => {
+          onClose();
+        }, 0);
+      }
+    });
+  };
+  const handleIconPress = index => {
+    setSelectedIcon(index);
+    const interaction = dialAnimationConfig?.interaction ?? {
+      iconSelect: {
+        pulse: [{
+          scale: 0.9,
+          damping: 15,
+          stiffness: 500
+        }, {
+          scale: 1,
+          damping: 10,
+          stiffness: 200
+        }],
+        actionDelay: 50
+      }
+    };
+    const [pulseIn, pulseOut] = interaction.iconSelect.pulse;
+
+    // Pulse animation on selection - using shared config
+    Animated.sequence([Animated.spring(centerButtonScale, {
+      toValue: pulseIn.scale,
+      damping: pulseIn.damping,
+      stiffness: pulseIn.stiffness,
+      useNativeDriver: true
+    }), Animated.spring(centerButtonScale, {
+      toValue: pulseOut.scale,
+      damping: pulseOut.damping,
+      stiffness: pulseOut.stiffness,
+      useNativeDriver: true
+    })]).start();
+
+    // Trigger action - using shared delay
+    setTimeout(() => {
+      icons[index].onPress();
+      // Only close if it's not the WiFi toggle (by id)
+      if (icons[index].id !== "wifi") {
+        handleClose();
+      }
+    }, interaction.iconSelect.actionDelay);
+  };
+
+  // Animated styles
+  const backdropAnimatedStyle = {
+    opacity: backdropOpacity
+  };
+  const glitchAnimatedStyle = {
+    transform: [{
+      translateX: glitchOffset
+    }]
+  };
+  const centerButtonAnimatedStyle = {
+    transform: [{
+      scale: Animated.multiply(centerButtonScale, breathingScale)
+    }]
+  };
+  const pulseAnimatedStyle = {
+    transform: [{
+      scale: selectedIcon >= 0 ? 1 : pulseScale
+    }]
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    nativeID: "dial-devtools-root",
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.backdrop, backdropAnimatedStyle],
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: StyleSheet.absoluteFillObject,
+        onPress: handleClose
+      })
+    }), /*#__PURE__*/_jsxs(Animated.View, {
+      style: [styles.parent, {
+        position: "absolute",
+        left: (SCREEN_WIDTH - CIRCLE_SIZE) / 2,
+        bottom: 80,
+        transform: [{
+          translateY: floatingAnim
+        }, {
+          scale: dialScale
+        }, {
+          rotate: dialRotation.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["0deg", "360deg"]
+          })
+        }]
+      }],
+      children: [/*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.circle, glitchAnimatedStyle],
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.gradientBackground,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.gradientLayer1
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.gradientLayer2
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.gradientLayer3
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.gridPattern,
+            children: Array.from({
+              length: 6
+            }).map((_, i) => /*#__PURE__*/_jsx(View, {
+              style: [styles.gridLine, {
+                transform: [{
+                  rotate: `${i * 60}deg`
+                }]
+              }]
+            }, i))
+          })]
+        }), icons.map((icon, i) => /*#__PURE__*/_jsx(DialIcon, {
+          selectedIcon: selectedIcon,
+          onPress: handleIconPress,
+          iconsProgress: iconsProgress,
+          icon: icon,
+          index: i,
+          totalIcons: icons.length
+        }, `${i}-${icon.name}`))]
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.buttonContainer, centerButtonAnimatedStyle],
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.buttonGradient,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.buttonGradientLayer1
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.buttonGradientLayer2
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.buttonGradientLayer3
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.buttonBorder,
+            children: /*#__PURE__*/_jsx(Animated.View, {
+              style: [styles.button, pulseAnimatedStyle],
+              children: /*#__PURE__*/_jsx(Pressable, {
+                accessibilityRole: "button",
+                accessibilityLabel: isSettingsModalOpen ? "Close Settings" : "Open Dev Tools Settings",
+                onPress: () => {
+                  if (isSettingsModalOpen) {
+                    // Close settings modal
+                    setIsSettingsModalOpen(false);
+                  } else {
+                    // Open internal settings modal
+                    setIsSettingsModalOpen(true);
+                    // Dismiss onboarding tooltip when user opens settings
+                    if (showOnboardingTooltip && !onboardingDismissedRef.current) {
+                      handleOnboardingDismiss();
+                    }
+                    // Also call external handler if provided
+                    if (onSettingsPress) {
+                      onSettingsPress();
+                    }
+                  }
+                },
+                style: styles.buttonPressable,
+                children: isSettingsModalOpen ? /*#__PURE__*/_jsxs(_Fragment, {
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: [styles.centerText, styles.closeTextTop],
+                    children: "CLOSE"
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: [styles.centerText, styles.closeTextBottom],
+                    children: "SETTINGS"
+                  })]
+                }) : /*#__PURE__*/_jsxs(_Fragment, {
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: styles.centerText,
+                    children: "BUOY"
+                  }), isPro && /*#__PURE__*/_jsx(Text, {
+                    style: styles.proText,
+                    children: "PRO"
+                  })]
+                })
+              })
+            })
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsx(DevToolsSettingsModal, {
+      visible: isSettingsModalOpen,
+      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,
+      onDismiss: handleOnboardingDismiss
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 9999
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: dialColors.dialBackdrop
+  },
+  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,
+    borderColor: dialColors.dialBorder,
+    shadowColor: dialColors.dialShadow,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 20,
+    elevation: 10
+  },
+  gradientBackground: {
+    width: "100%",
+    height: "100%",
+    borderRadius: CIRCLE_SIZE / 2,
+    position: "relative",
+    backgroundColor: dialColors.dialBackground,
+    overflow: "hidden"
+  },
+  gradientLayer1: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: dialColors.dialGradient1,
+    opacity: 0.6,
+    borderRadius: CIRCLE_SIZE / 2
+  },
+  gradientLayer2: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: dialColors.dialGradient2,
+    opacity: 0.4,
+    top: "30%",
+    left: "30%",
+    borderRadius: CIRCLE_SIZE / 2
+  },
+  gradientLayer3: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: dialColors.dialGradient3,
+    opacity: 0.3,
+    top: "50%",
+    left: "50%",
+    borderRadius: CIRCLE_SIZE / 2
+  },
+  gridPattern: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  gridLine: {
+    position: "absolute",
+    width: CIRCLE_SIZE,
+    height: 1,
+    backgroundColor: dialColors.dialGridLine
+  },
+  buttonContainer: {
+    zIndex: 1,
+    backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
+    width: BUTTON_SIZE * 1.5,
+    height: BUTTON_SIZE * 1.5,
+    borderRadius: BUTTON_SIZE
+  },
+  buttonGradient: {
+    width: "100%",
+    height: "100%",
+    borderRadius: BUTTON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 4,
+    backgroundColor: dialColors.dialBackground,
+    position: "relative",
+    overflow: "hidden"
+  },
+  buttonGradientLayer1: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: dialColors.dialGradient1,
+    opacity: 0.5,
+    borderRadius: BUTTON_SIZE
+  },
+  buttonGradientLayer2: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: dialColors.dialGradient2,
+    opacity: 0.3,
+    top: "20%",
+    left: "20%",
+    borderRadius: BUTTON_SIZE
+  },
+  buttonGradientLayer3: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: dialColors.dialGradient3,
+    opacity: 0.2,
+    top: "40%",
+    left: "40%",
+    borderRadius: BUTTON_SIZE
+  },
+  buttonBorder: {
+    backgroundColor: dialColors.dialGridLine,
+    alignItems: "center",
+    justifyContent: "center",
+    width: BUTTON_SIZE * 1.2,
+    height: BUTTON_SIZE * 1.2,
+    borderRadius: BUTTON_SIZE * 0.6,
+    borderWidth: 2,
+    borderColor: dialColors.dialBorder
+  },
+  button: {
+    width: BUTTON_SIZE,
+    height: BUTTON_SIZE,
+    borderRadius: BUTTON_SIZE / 2,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    overflow: "hidden"
+  },
+  buttonPressable: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  centerText: {
+    color: "#FFFFFF",
+    fontSize: 10,
+    fontWeight: "900",
+    fontFamily: "monospace",
+    letterSpacing: 1,
+    textAlign: "center",
+    textTransform: "uppercase",
+    textShadowColor: buoyColors.primary,
+    textShadowOffset: {
+      width: 0,
+      height: 0
+    },
+    textShadowRadius: 4
+  },
+  closeTextTop: {
+    marginBottom: -2
+  },
+  closeTextBottom: {
+    marginTop: -2
+  },
+  proText: {
+    color: buoyColors.warning,
+    fontSize: 8,
+    fontWeight: "900",
+    fontFamily: "monospace",
+    letterSpacing: 2,
+    textAlign: "center",
+    textShadowColor: buoyColors.warning,
+    textShadowOffset: {
+      width: 0,
+      height: 0
+    },
+    textShadowRadius: 4
+  }
+});