@buoy-gg/core 7.0.41 → 7.0.42

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

@@ -1,904 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DialDevTools = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _DialIcon = require("./DialIcon.js");
-var _DialHyperspace = require("./DialHyperspace.js");
-var _DialPagination = require("./DialPagination.js");
-var _dialUsageStore = require("./dialUsageStore.js");
-var _DevToolsSettingsModal = require("../DevToolsSettingsModal");
-var _license = require("@buoy-gg/license");
-var _AppIcon = require("../AppIcon");
-var _AppHost = require("../AppHost");
-var _OnboardingTooltip = require("./OnboardingTooltip");
-var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
-var _jsxRuntime = require("react/jsx-runtime");
-// Icons are provided by installedApps; no direct icon imports here.
-
-// The circle size depends on the live window width, so it's computed inside
-// the component via useWindowDimensions — a module-scope Dimensions.get
-// snapshot goes stale when the window resizes after load (web/desktop).
-const BUTTON_SIZE = _floatingToolsCore.DIAL_BUTTON_SIZE;
-/** The dial face is a circle, so its centre is the middle of the measured square. */
-const DIAL_BACKGROUND_FOCUS = {
-  x: 0.5,
-  y: 0.5
-};
-// Radius kept clear of grid spokes around the glass hub (its outer disc is
-// 0.75 × BUTTON_SIZE, plus a breath).
-const HUB_CLEARANCE = BUTTON_SIZE * 0.75 + 6;
-
-/**
- * The centre button's idle pulse, off by design.
- *
- * It is built as `Animated.loop(Animated.sequence([...]))`, and that pairing is
- * NOT handed to the native driver even though every child sets
- * `useNativeDriver: true` — so it ticked on the JS thread for as long as the
- * dial stayed open, taxing every interaction launched from the dial.
- *
- * Re-enabling it means rewriting the loop so it genuinely runs natively;
- * flipping this alone just puts the JS-thread cost back.
- */
-const DIAL_IDLE_PULSE = false;
-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,
-  autoOpenSettings = false,
-  apps,
-  state,
-  actions
-}) => {
-  const [selectedIcon, setSelectedIcon] = (0, _react.useState)(-1);
-  const [isSettingsModalOpen, setIsSettingsModalOpen] = (0, _react.useState)(false);
-  const [settingsModalStateLoaded, setSettingsModalStateLoaded] = (0, _react.useState)(false);
-  const [showOnboardingTooltip, setShowOnboardingTooltip] = (0, _react.useState)(false);
-  const onboardingDismissedRef = (0, _react.useRef)(false); // Track if onboarding was dismissed
-  const hintsDisabled = (0, _sharedUi.useHintsDisabled)();
-  const {
-    refreshSettings
-  } = (0, _DevToolsSettingsModal.useDevToolsSettings)();
-  const {
-    open
-  } = (0, _AppHost.useAppHost)();
-  const {
-    isPro,
-    isWeekendFree
-  } = (0, _license.useProAccess)();
-
-  // Live window size — keeps the dial centered and sized correctly when the
-  // window resizes (Electron/web) or the device rotates.
-  const {
-    width: screenWidth,
-    height: screenHeight
-  } = (0, _reactNative.useWindowDimensions)();
-  const circleSize = (0, _floatingToolsCore.getDialLayout)({
-    screenWidth
-  }).circleSize;
-  // The dial face shows the same backdrop the tools use (persisted shared
-  // selection). Hyperspace keeps its hand-tuned dial port below.
-  const {
-    id: backgroundId
-  } = (0, _sharedUi.useToolBackground)();
-  const sizeStyles = (0, _react.useMemo)(() => ({
-    parent: {
-      width: circleSize,
-      height: circleSize
-    },
-    circle: {
-      width: circleSize,
-      height: circleSize,
-      borderRadius: circleSize / 2
-    },
-    rounded: {
-      borderRadius: circleSize / 2
-    },
-    gridLine: {
-      width: circleSize
-    },
-    // Each spoke is two segments that stop short of the glass hub, so the
-    // six lines never meet in the middle where the background shows through.
-    spoke: {
-      width: circleSize / 2 - HUB_CLEARANCE
-    }
-  }), [circleSize]);
-
-  // Load persisted settings modal state on mount
-  (0, _react.useEffect)(() => {
-    const loadSettingsModalState = async () => {
-      try {
-        const savedModalOpen = await _sharedUi.persistentStorage.getItem(_sharedUi.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
-  (0, _react.useEffect)(() => {
-    // Only persist after initial state is loaded to avoid overwriting with default
-    if (!settingsModalStateLoaded) return;
-    _sharedUi.persistentStorage.setItem(_sharedUi.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]);
-
-  // Auto-open settings modal when prop is true
-  (0, _react.useEffect)(() => {
-    if (autoOpenSettings && !isSettingsModalOpen) {
-      setIsSettingsModalOpen(true);
-    }
-  }, [autoOpenSettings, isSettingsModalOpen]);
-
-  // Check if we should show the onboarding tooltip
-  (0, _react.useEffect)(() => {
-    // Skip onboarding if hints are disabled
-    if (hintsDisabled) {
-      return;
-    }
-    const checkOnboarding = async () => {
-      try {
-        const hasSeenTooltip = await _sharedUi.persistentStorage.getItem(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 = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const dialScale = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  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 pulseScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const availableApps = (0, _react.useMemo)(() => apps.map(({
-    id,
-    name,
-    slot,
-    description,
-    icon,
-    color
-  }) => ({
-    id,
-    name,
-    slot,
-    description,
-    // Settings rows fall back to the app's own icon when the modal has no
-    // hardcoded glyph for the tool.
-    icon,
-    color
-  })), [apps]);
-
-  // Animation tracking refs
-  const pulseAnimationRef = (0, _react.useRef)(null);
-  const toggleSettingsModal = () => {
-    if (isSettingsModalOpen) {
-      setIsSettingsModalOpen(false);
-      return;
-    }
-    setIsSettingsModalOpen(true);
-    // Dismiss onboarding tooltip when user opens settings
-    if (showOnboardingTooltip && !onboardingDismissedRef.current) {
-      handleOnboardingDismiss();
-    }
-    // Also call external handler if provided
-    onSettingsPress?.();
-  };
-
-  // 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]);
-
-  // 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; strings
-        // resolve to auto-fitting text icons) and the component (for dynamic
-        // rendering).
-        icon: typeof app.icon === "function" ? null : (0, _AppIcon.renderAppIcon)(app.icon, {
-          slot: "dial",
-          size: 20,
-          color: app.color
-        }),
-        // 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: () => {
-          // Put this tool first the next time the dial opens.
-          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 = (0, _AppIcon.renderAppIcon)(app.icon, {
-              slot: "dial",
-              size: 20,
-              color: app.color
-            });
-            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,
-              modal: app.modal
-            });
-          }
-
-          // Close the dial.
-          onClose?.();
-        }
-      });
-    }
-    return map;
-  }, [dialApps, actions, open, onClose]);
-
-  // 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;
-    }
-    // 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]);
-
-  // Page count spans the installed tools (usage-ranked). Only tools the app
-  // actually has appear in the dial — nothing is shown for uninstalled ones.
-  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)(() => {
-    // Fallback config in case dialAnimationConfig hasn't loaded
-    const config = _floatingToolsCore.dialAnimationConfig ?? {
-      entrance: {
-        backdrop: {
-          duration: 400
-        },
-        dial: {
-          scale: {
-            damping: 15,
-            stiffness: 150,
-            mass: 1
-          },
-          rotation: {
-            duration: 800
-          }
-        },
-        centerButton: {
-          delay: 150,
-          damping: 10,
-          stiffness: 200
-        },
-        icons: {
-          delay: 200,
-          duration: 400
-        },
-        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
-    _reactNative.Animated.timing(backdropOpacity, {
-      toValue: 1,
-      duration: entrance.backdrop.duration,
-      useNativeDriver: true
-    }).start();
-    _reactNative.Animated.spring(dialScale, {
-      toValue: 1,
-      damping: entrance.dial.scale.damping,
-      stiffness: entrance.dial.scale.stiffness,
-      mass: entrance.dial.scale.mass,
-      useNativeDriver: true
-    }).start();
-    _reactNative.Animated.sequence([_reactNative.Animated.timing(dialRotation, {
-      toValue: 1,
-      duration: entrance.dial.rotation.duration,
-      easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(dialRotation, {
-      toValue: 0,
-      duration: 0,
-      useNativeDriver: true
-    })]).start();
-    _reactNative.Animated.sequence([_reactNative.Animated.delay(entrance.centerButton.delay), _reactNative.Animated.spring(centerButtonScale, {
-      toValue: 1,
-      damping: entrance.centerButton.damping,
-      stiffness: entrance.centerButton.stiffness,
-      useNativeDriver: true
-    })]).start();
-    _reactNative.Animated.sequence([_reactNative.Animated.delay(entrance.icons.delay), _reactNative.Animated.timing(iconsProgress, {
-      toValue: 1,
-      duration: entrance.icons.duration,
-      easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-      useNativeDriver: true
-    })]).start();
-
-    // Pulse animation - only continuous effect kept for performance
-    if (!DIAL_IDLE_PULSE) return;
-    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();
-    return () => {
-      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
-    _sharedUi.persistentStorage.setItem(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 = _floatingToolsCore.dialAnimationConfig?.exit ?? {
-      icons: {
-        duration: 300
-      },
-      centerButton: {
-        duration: 200
-      },
-      dialScale: {
-        duration: 250
-      },
-      backdrop: {
-        duration: 200
-      }
-    };
-
-    // Exit animation sequence - reverse order of entrance, using shared config
-    _reactNative.Animated.sequence([
-    // First animate icons back to center
-    _reactNative.Animated.timing(iconsProgress, {
-      toValue: 0,
-      duration: exit.icons.duration,
-      easing: _reactNative.Easing.in(_reactNative.Easing.cubic),
-      useNativeDriver: true
-    }),
-    // Then scale down center button and dial
-    _reactNative.Animated.parallel([_reactNative.Animated.timing(centerButtonScale, {
-      toValue: 0,
-      duration: exit.centerButton.duration,
-      easing: _reactNative.Easing.in(_reactNative.Easing.cubic),
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(dialScale, {
-      toValue: 0,
-      duration: exit.dialScale.duration,
-      easing: _reactNative.Easing.in(_reactNative.Easing.cubic),
-      useNativeDriver: true
-    })]),
-    // Finally fade out backdrop
-    _reactNative.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 = icon => {
-    setSelectedIcon(1);
-    const interaction = _floatingToolsCore.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
-    _reactNative.Animated.sequence([_reactNative.Animated.spring(centerButtonScale, {
-      toValue: pulseIn.scale,
-      damping: pulseIn.damping,
-      stiffness: pulseIn.stiffness,
-      useNativeDriver: true
-    }), _reactNative.Animated.spring(centerButtonScale, {
-      toValue: pulseOut.scale,
-      damping: pulseOut.damping,
-      stiffness: pulseOut.stiffness,
-      useNativeDriver: true
-    })]).start();
-
-    // Trigger action - using shared delay
-    setTimeout(() => {
-      icon.onPress();
-      // Only close if it's not the WiFi toggle (by id)
-      if (icon.id !== "wifi") {
-        handleClose();
-      }
-    }, interaction.iconSelect.actionDelay);
-  };
-
-  // Animated styles
-  const backdropAnimatedStyle = {
-    opacity: backdropOpacity
-  };
-  const centerButtonAnimatedStyle = {
-    transform: [{
-      scale: centerButtonScale
-    }]
-  };
-  const pulseAnimatedStyle = {
-    transform: [{
-      scale: selectedIcon >= 0 ? 1 : pulseScale
-    }]
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
-    nativeID: "dial-devtools-root",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [styles.backdrop, backdropAnimatedStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        style: _sharedUi.absoluteFill,
-        onPress: handleClose
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-      style: [styles.parent, sizeStyles.parent, {
-        position: "absolute",
-        left: (screenWidth - circleSize) / 2,
-        bottom: 80,
-        transform: [{
-          scale: dialScale
-        }, {
-          rotate: dialRotation.interpolate({
-            inputRange: [0, 1],
-            outputRange: ["0deg", "360deg"]
-          })
-        }]
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-        style: [styles.circle, sizeStyles.circle],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.gradientBackground, sizeStyles.rounded],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.gradientLayer1, sizeStyles.rounded]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.gradientLayer2, sizeStyles.rounded]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.gradientLayer3, sizeStyles.rounded]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.gridPattern,
-            children: Array.from({
-              length: 6
-            }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: [styles.gridLine, sizeStyles.gridLine, {
-                transform: [{
-                  rotate: `${i * 60}deg`
-                }]
-              }],
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.spoke, sizeStyles.spoke, styles.spokeLeft]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.spoke, sizeStyles.spoke, styles.spokeRight]
-              })]
-            }, i))
-          }), backgroundId === "hyperspace" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialHyperspace.DialHyperspace, {
-            size: circleSize
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolBackground, {
-            focus: DIAL_BACKGROUND_FOCUS
-          })]
-        }), allDialIcons.filter(({
-          page
-        }) => page === safePage).map(({
-          icon,
-          slot
-        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialIcon.DialIcon, {
-          onPress: handleIconPress,
-          iconsProgress: iconsProgress,
-          icon: icon,
-          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, {
-          style: styles.buttonGradient,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.buttonGradientLayer1
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.buttonGradientLayer2
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.buttonGradientLayer3
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.buttonBorder,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-              style: [styles.button, pulseAnimatedStyle],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                accessibilityRole: "button",
-                accessibilityLabel: isSettingsModalOpen ? "Close Settings" : "Open Dev Tools Settings",
-                onPress: toggleSettingsModal
-                // Dims on touch-down so the press registers visually straight
-                // away, even though the panel only opens on release.
-                ,
-                activeOpacity: 0.5,
-                style: styles.buttonPressable,
-                children: isSettingsModalOpen ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                    style: [styles.centerText, styles.closeTextTop],
-                    children: "CLOSE"
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                    style: [styles.centerText, styles.closeTextBottom],
-                    children: "SETTINGS"
-                  })]
-                }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                    style: styles.centerText,
-                    children: "BUOY"
-                  }), isPro && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                    style: [styles.proText, isWeekendFree && styles.weekendText],
-                    children: isWeekendFree ? "WEEKEND" : "PRO"
-                  })]
-                })
-              })
-            })
-          })]
-        })
-      })]
-    }), pageCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialPagination.DialPagination, {
-      page: safePage,
-      pageCount: pageCount,
-      onPrev: () => handlePageChange(safePage - 1),
-      onNext: () => handlePageChange(safePage + 1),
-      animatedStyle: {
-        position: "absolute",
-        left: (screenWidth - circleSize) / 2,
-        // Circle's bottom edge sits at bottom: 80 -> screenHeight - 80
-        // from the top. Place the pager 16px below that edge.
-        top: screenHeight - 80 + 16,
-        width: circleSize,
-        opacity: dialScale,
-        transform: [{
-          scale: dialScale
-        }]
-      }
-    }), isSettingsModalOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DevToolsSettingsModal.DevToolsSettingsModal, {
-      visible: true,
-      onClose: () => {
-        setIsSettingsModalOpen(false);
-        refreshSettings(); // Refresh from storage
-      },
-      availableApps: availableApps
-    }), showOnboardingTooltip && !isSettingsModalOpen && !onboardingDismissedRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OnboardingTooltip.OnboardingTooltip, {
-      visible: true,
-      onDismiss: handleOnboardingDismiss
-    })]
-  });
-};
-exports.DialDevTools = DialDevTools;
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    ..._sharedUi.absoluteFill,
-    zIndex: 9999
-  },
-  backdrop: {
-    ..._sharedUi.absoluteFill,
-    backgroundColor: _floatingToolsCore.dialColors.dialBackdrop
-  },
-  // width/height/borderRadius for the circle pieces come from sizeStyles —
-  // they track the live window width.
-  parent: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  circle: {
-    position: "absolute",
-    backgroundColor: "transparent",
-    borderWidth: 1,
-    borderColor: _floatingToolsCore.dialColors.dialBorder,
-    shadowColor: _floatingToolsCore.dialColors.dialShadow,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.5,
-    shadowRadius: 20,
-    elevation: 10
-  },
-  gradientBackground: {
-    width: "100%",
-    height: "100%",
-    position: "relative",
-    backgroundColor: _floatingToolsCore.dialColors.dialBackground,
-    overflow: "hidden"
-  },
-  gradientLayer1: {
-    ..._sharedUi.absoluteFill,
-    backgroundColor: _floatingToolsCore.dialColors.dialGradient1,
-    opacity: 0.6
-  },
-  gradientLayer2: {
-    ..._sharedUi.absoluteFill,
-    backgroundColor: _floatingToolsCore.dialColors.dialGradient2,
-    opacity: 0.4,
-    top: "30%",
-    left: "30%"
-  },
-  gradientLayer3: {
-    ..._sharedUi.absoluteFill,
-    backgroundColor: _floatingToolsCore.dialColors.dialGradient3,
-    opacity: 0.3,
-    top: "50%",
-    left: "50%"
-  },
-  gridPattern: {
-    ..._sharedUi.absoluteFill,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  gridLine: {
-    position: "absolute",
-    height: 1
-  },
-  spoke: {
-    position: "absolute",
-    top: 0,
-    height: 1,
-    backgroundColor: _floatingToolsCore.dialColors.dialGridLine
-  },
-  spokeLeft: {
-    left: 0
-  },
-  spokeRight: {
-    right: 0
-  },
-  buttonContainer: {
-    zIndex: 1,
-    backgroundColor: "transparent",
-    alignItems: "center",
-    justifyContent: "center",
-    position: "absolute",
-    width: BUTTON_SIZE * 1.5,
-    height: BUTTON_SIZE * 1.5,
-    borderRadius: BUTTON_SIZE
-  },
-  // The hub is glass: no rings, no opaque fill. The outer disc is a barely-
-  // there shade and the inner button a soft puck, so the tool background runs
-  // through the middle of the dial while BUOY / PRO stay legible. The spokes
-  // stop at HUB_CLEARANCE so nothing draws under it.
-  buttonGradient: {
-    width: "100%",
-    height: "100%",
-    borderRadius: BUTTON_SIZE,
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 4,
-    backgroundColor: _floatingToolsCore.dialColors.hubHalo,
-    position: "relative",
-    overflow: "hidden"
-  },
-  buttonGradientLayer1: {
-    ..._sharedUi.absoluteFill,
-    backgroundColor: _floatingToolsCore.dialColors.dialGradient1,
-    opacity: 0.5,
-    borderRadius: BUTTON_SIZE
-  },
-  buttonGradientLayer2: {
-    ..._sharedUi.absoluteFill,
-    backgroundColor: _floatingToolsCore.dialColors.dialGradient2,
-    opacity: 0.3,
-    top: "20%",
-    left: "20%",
-    borderRadius: BUTTON_SIZE
-  },
-  buttonGradientLayer3: {
-    ..._sharedUi.absoluteFill,
-    backgroundColor: _floatingToolsCore.dialColors.dialGradient3,
-    opacity: 0.2,
-    top: "40%",
-    left: "40%",
-    borderRadius: BUTTON_SIZE
-  },
-  buttonBorder: {
-    backgroundColor: _floatingToolsCore.dialColors.hubFill,
-    alignItems: "center",
-    justifyContent: "center",
-    width: BUTTON_SIZE * 1.2,
-    height: BUTTON_SIZE * 1.2,
-    borderRadius: BUTTON_SIZE * 0.6
-  },
-  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: _floatingToolsCore.dialColors.centerText,
-    fontSize: 10,
-    fontWeight: "900",
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 1,
-    textAlign: "center",
-    textTransform: "uppercase",
-    textShadowColor: _floatingToolsCore.dialColors.centerTextGlow,
-    textShadowOffset: {
-      width: 0,
-      height: 0
-    },
-    textShadowRadius: 4
-  },
-  closeTextTop: {
-    marginBottom: -2
-  },
-  closeTextBottom: {
-    marginTop: -2
-  },
-  proText: {
-    color: _sharedUi.buoyColors.warning,
-    fontSize: 8,
-    fontWeight: "900",
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 2,
-    textAlign: "center",
-    textShadowColor: _floatingToolsCore.dialColors.centerTextGlow,
-    textShadowOffset: {
-      width: 0,
-      height: 0
-    },
-    textShadowRadius: 4
-  },
-  // Weekend Pass variant — violet, tighter spacing so "WEEKEND" fits the dial.
-  weekendText: {
-    color: "#BF5AF2",
-    letterSpacing: 1
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.DialDevTools=void 0;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _DialIcon=require("./DialIcon.js");var _DialHyperspace=require("./DialHyperspace.js");var _DialPagination=require("./DialPagination.js");var _dialUsageStore=require("./dialUsageStore.js");var _DevToolsSettingsModal=require("../DevToolsSettingsModal");var _license=require("@buoy-gg/license");var _AppIcon=require("../AppIcon");var _AppHost=require("../AppHost");var _OnboardingTooltip=require("./OnboardingTooltip");var _floatingToolsCore=require("@buoy-gg/floating-tools-core");var _jsxRuntime=require("react/jsx-runtime");const BUTTON_SIZE=_floatingToolsCore.DIAL_BUTTON_SIZE;const DIAL_BACKGROUND_FOCUS={x:.5,y:.5};const HUB_CLEARANCE=BUTTON_SIZE*.75+6;const DIAL_IDLE_PULSE=false;const ONBOARDING_STORAGE_KEY="@react_buoy_settings_tooltip_shown";const createEmptySlot=r=>({id:`empty-${r}`,name:`empty-${r}`,icon:null,color:"transparent",onPress:()=>{}});const DialDevTools=({onClose:r,onSettingsPress:B,autoOpenSettings:T=false,apps:m,state:ie,actions:D})=>{const[N,F]=(0,_react.useState)(-1);const[n,l]=(0,_react.useState)(false);const[C,G]=(0,_react.useState)(false);const[I,j]=(0,_react.useState)(false);const y=(0,_react.useRef)(false);const k=(0,_sharedUi.useHintsDisabled)();const{refreshSettings:q}=(0,_DevToolsSettingsModal.useDevToolsSettings)();const{open:L}=(0,_AppHost.useAppHost)();const{isPro:U,isWeekendFree:_}=(0,_license.useProAccess)();const{width:b,height:z}=(0,_reactNative.useWindowDimensions)();const o=(0,_floatingToolsCore.getDialLayout)({screenWidth:b}).circleSize;const{id:H}=(0,_sharedUi.useToolBackground)();const a=(0,_react.useMemo)(()=>({parent:{width:o,height:o},circle:{width:o,height:o,borderRadius:o/2},rounded:{borderRadius:o/2},gridLine:{width:o},spoke:{width:o/2-HUB_CLEARANCE}}),[o]);(0,_react.useEffect)(()=>{const t=async()=>{try{const e=await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.settings.modalOpen());if(e==="true"){l(true)}}catch(e){}finally{G(true)}};t()},[]);(0,_react.useEffect)(()=>{if(!C)return;_sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.settings.modalOpen(),n?"true":"false").catch(t=>{console.warn("Failed to save settings modal state:",t)})},[n,C]);(0,_react.useEffect)(()=>{if(T&&!n){l(true)}},[T,n]);(0,_react.useEffect)(()=>{if(k){return}const t=async()=>{try{const e=await _sharedUi.persistentStorage.getItem(ONBOARDING_STORAGE_KEY);if(!e){setTimeout(()=>{j(true)},1200)}}catch(e){}};t()},[k]);const S=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;const d=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;const x=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;const c=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;const f=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;const v=(0,_react.useRef)(new _reactNative.Animated.Value(1)).current;const W=(0,_react.useMemo)(()=>m.map(({id:t,name:e,slot:i,description:p,icon:ee,color:te})=>({id:t,name:e,slot:i,description:p,icon:ee,color:te})),[m]);const u=(0,_react.useRef)(null);const X=()=>{if(n){l(false);return}l(true);if(I&&!y.current){E()}B?.()};const g=(0,_react.useMemo)(()=>m.filter(t=>(t.slot??"both")!=="row"),[m]);const O=(0,_react.useMemo)(()=>{const t=new Map;for(const e of g){t.set(e.id,{id:e.id,name:e.name,icon:typeof e.icon==="function"?null:(0,_AppIcon.renderAppIcon)(e.icon,{slot:"dial",size:20,color:e.color}),iconComponent:typeof e.icon==="function"?e.icon:void 0,color:e.color??_sharedUi.buoyColors.primary,onPress:()=>{void(0,_dialUsageStore.recordToolUsage)(e.id);e?.onPress?.(D);if(e.launchMode!=="toggle-only"){const i=(0,_AppIcon.renderAppIcon)(e.icon,{slot:"dial",size:20,color:e.color});L({id:e.id,title:e.name,component:e.component,props:e.props,launchMode:e.launchMode??"self-modal",singleton:e.singleton??true,icon:i,color:e.color,modal:e.modal})}r?.()}})}return t},[g,D,L,r]);const[A,V]=(0,_react.useState)(()=>(0,_dialUsageStore.getRankedToolIds)(g.map(t=>t.id)));(0,_react.useEffect)(()=>{const t=g.map(i=>i.id);if((0,_dialUsageStore.isDialUsageLoaded)()){V((0,_dialUsageStore.getRankedToolIds)(t));return}let e=false;(0,_dialUsageStore.loadDialUsage)().then(()=>{if(!e)V((0,_dialUsageStore.getRankedToolIds)(t))});return()=>{e=true}},[g]);const h=Math.max(1,Math.ceil(A.length/_floatingToolsCore.MAX_DIAL_SLOTS));const[$,K]=(0,_react.useState)(0);const s=Math.min($,h-1);const w=(0,_react.useMemo)(()=>{return A.map(t=>O.get(t)).filter(t=>Boolean(t)).map((t,e)=>({icon:t,page:Math.floor(e/_floatingToolsCore.MAX_DIAL_SLOTS),slot:e%_floatingToolsCore.MAX_DIAL_SLOTS}))},[A,O]);const Y=(0,_react.useMemo)(()=>{const t=w.filter(i=>i.page===s).length;const e=[];for(let i=t;i<_floatingToolsCore.MAX_DIAL_SLOTS;i+=1)e.push(i);return e},[w,s]);const R=t=>{const e=Math.max(0,Math.min(t,h-1));if(e!==s)K(e)};(0,_react.useEffect)(()=>{const t=_floatingToolsCore.dialAnimationConfig??{entrance:{backdrop:{duration:400},dial:{scale:{damping:15,stiffness:150,mass:1},rotation:{duration:800}},centerButton:{delay:150,damping:10,stiffness:200},icons:{delay:200,duration:400},circuitTraces:{delay:600,duration:1e3}},continuous:{glitch:{interval:3e3,offset:2,stepDuration:50},pulse:{maxScale:1.02,minScale:.98,duration:1e3},floating:{maxY:-8,minY:0,duration:3e3},breathing:{maxScale:1.05,minScale:.98,duration:2500}}};const{entrance:e,continuous:i}=t;_reactNative.Animated.timing(S,{toValue:1,duration:e.backdrop.duration,useNativeDriver:true}).start();_reactNative.Animated.spring(d,{toValue:1,damping:e.dial.scale.damping,stiffness:e.dial.scale.stiffness,mass:e.dial.scale.mass,useNativeDriver:true}).start();_reactNative.Animated.sequence([_reactNative.Animated.timing(x,{toValue:1,duration:e.dial.rotation.duration,easing:_reactNative.Easing.out(_reactNative.Easing.cubic),useNativeDriver:true}),_reactNative.Animated.timing(x,{toValue:0,duration:0,useNativeDriver:true})]).start();_reactNative.Animated.sequence([_reactNative.Animated.delay(e.centerButton.delay),_reactNative.Animated.spring(c,{toValue:1,damping:e.centerButton.damping,stiffness:e.centerButton.stiffness,useNativeDriver:true})]).start();_reactNative.Animated.sequence([_reactNative.Animated.delay(e.icons.delay),_reactNative.Animated.timing(f,{toValue:1,duration:e.icons.duration,easing:_reactNative.Easing.out(_reactNative.Easing.cubic),useNativeDriver:true})]).start();if(!DIAL_IDLE_PULSE)return;u.current=_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(v,{toValue:i.pulse.maxScale,duration:i.pulse.duration,easing:_reactNative.Easing.inOut(_reactNative.Easing.ease),useNativeDriver:true}),_reactNative.Animated.timing(v,{toValue:i.pulse.minScale,duration:i.pulse.duration,easing:_reactNative.Easing.inOut(_reactNative.Easing.ease),useNativeDriver:true})]));u.current.start();return()=>{u.current?.stop()}},[]);const E=()=>{y.current=true;j(false);_sharedUi.persistentStorage.setItem(ONBOARDING_STORAGE_KEY,"true").catch(t=>{console.warn("Failed to save dial onboarding state:",t)})};const M=()=>{if(u.current){u.current.stop()}const t=_floatingToolsCore.dialAnimationConfig?.exit??{icons:{duration:300},centerButton:{duration:200},dialScale:{duration:250},backdrop:{duration:200}};_reactNative.Animated.sequence([_reactNative.Animated.timing(f,{toValue:0,duration:t.icons.duration,easing:_reactNative.Easing.in(_reactNative.Easing.cubic),useNativeDriver:true}),_reactNative.Animated.parallel([_reactNative.Animated.timing(c,{toValue:0,duration:t.centerButton.duration,easing:_reactNative.Easing.in(_reactNative.Easing.cubic),useNativeDriver:true}),_reactNative.Animated.timing(d,{toValue:0,duration:t.dialScale.duration,easing:_reactNative.Easing.in(_reactNative.Easing.cubic),useNativeDriver:true})]),_reactNative.Animated.timing(S,{toValue:0,duration:t.backdrop.duration,useNativeDriver:true})]).start(()=>{if(r){setTimeout(()=>{r()},0)}})};const P=t=>{F(1);const e=_floatingToolsCore.dialAnimationConfig?.interaction??{iconSelect:{pulse:[{scale:.9,damping:15,stiffness:500},{scale:1,damping:10,stiffness:200}],actionDelay:50}};const[i,p]=e.iconSelect.pulse;_reactNative.Animated.sequence([_reactNative.Animated.spring(c,{toValue:i.scale,damping:i.damping,stiffness:i.stiffness,useNativeDriver:true}),_reactNative.Animated.spring(c,{toValue:p.scale,damping:p.damping,stiffness:p.stiffness,useNativeDriver:true})]).start();setTimeout(()=>{t.onPress();if(t.id!=="wifi"){M()}},e.iconSelect.actionDelay)};const Z={opacity:S};const J={transform:[{scale:c}]};const Q={transform:[{scale:N>=0?1:v}]};return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,nativeID:"dial-devtools-root",children:[(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[styles.backdrop,Z],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_sharedUi.absoluteFill,onPress:M})}),(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[styles.parent,a.parent,{position:"absolute",left:(b-o)/2,bottom:80,transform:[{scale:d},{rotate:x.interpolate({inputRange:[0,1],outputRange:["0deg","360deg"]})}]}],children:[(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[styles.circle,a.circle],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.gradientBackground,a.rounded],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.gradientLayer1,a.rounded]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.gradientLayer2,a.rounded]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.gradientLayer3,a.rounded]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.gridPattern,children:Array.from({length:6}).map((t,e)=>(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.gridLine,a.gridLine,{transform:[{rotate:`${e*60}deg`}]}],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.spoke,a.spoke,styles.spokeLeft]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.spoke,a.spoke,styles.spokeRight]})]},e))}),H==="hyperspace"?(0,_jsxRuntime.jsx)(_DialHyperspace.DialHyperspace,{size:o}):(0,_jsxRuntime.jsx)(_sharedUi.ToolBackground,{focus:DIAL_BACKGROUND_FOCUS})]}),w.filter(({page:t})=>t===s).map(({icon:t,slot:e})=>(0,_jsxRuntime.jsx)(_DialIcon.DialIcon,{onPress:P,iconsProgress:f,icon:t,index:e,totalIcons:_floatingToolsCore.MAX_DIAL_SLOTS,active:true},t.id??`page${s}-${e}`)),Y.map(t=>(0,_jsxRuntime.jsx)(_DialIcon.DialIcon,{onPress:P,iconsProgress:f,icon:createEmptySlot(t),index:t,totalIcons:_floatingToolsCore.MAX_DIAL_SLOTS,active:true},`empty-${t}`))]}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[styles.buttonContainer,J],children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.buttonGradient,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.buttonGradientLayer1}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.buttonGradientLayer2}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.buttonGradientLayer3}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.buttonBorder,children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[styles.button,Q],children:(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{accessibilityRole:"button",accessibilityLabel:n?"Close Settings":"Open Dev Tools Settings",onPress:X,activeOpacity:.5,style:styles.buttonPressable,children:n?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.centerText,styles.closeTextTop],children:"CLOSE"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.centerText,styles.closeTextBottom],children:"SETTINGS"})]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.centerText,children:"BUOY"}),U&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.proText,_&&styles.weekendText],children:_?"WEEKEND":"PRO"})]})})})})]})})]}),h>1&&(0,_jsxRuntime.jsx)(_DialPagination.DialPagination,{page:s,pageCount:h,onPrev:()=>R(s-1),onNext:()=>R(s+1),animatedStyle:{position:"absolute",left:(b-o)/2,top:z-80+16,width:o,opacity:d,transform:[{scale:d}]}}),n&&(0,_jsxRuntime.jsx)(_DevToolsSettingsModal.DevToolsSettingsModal,{visible:true,onClose:()=>{l(false);q()},availableApps:W}),I&&!n&&!y.current&&(0,_jsxRuntime.jsx)(_OnboardingTooltip.OnboardingTooltip,{visible:true,onDismiss:E})]})};exports.DialDevTools=DialDevTools;const styles=_reactNative.StyleSheet.create({container:{..._sharedUi.absoluteFill,zIndex:9999},backdrop:{..._sharedUi.absoluteFill,backgroundColor:_floatingToolsCore.dialColors.dialBackdrop},parent:{alignItems:"center",justifyContent:"center"},circle:{position:"absolute",backgroundColor:"transparent",borderWidth:1,borderColor:_floatingToolsCore.dialColors.dialBorder,shadowColor:_floatingToolsCore.dialColors.dialShadow,shadowOffset:{width:0,height:0},shadowOpacity:.5,shadowRadius:20,elevation:10},gradientBackground:{width:"100%",height:"100%",position:"relative",backgroundColor:_floatingToolsCore.dialColors.dialBackground,overflow:"hidden"},gradientLayer1:{..._sharedUi.absoluteFill,backgroundColor:_floatingToolsCore.dialColors.dialGradient1,opacity:.6},gradientLayer2:{..._sharedUi.absoluteFill,backgroundColor:_floatingToolsCore.dialColors.dialGradient2,opacity:.4,top:"30%",left:"30%"},gradientLayer3:{..._sharedUi.absoluteFill,backgroundColor:_floatingToolsCore.dialColors.dialGradient3,opacity:.3,top:"50%",left:"50%"},gridPattern:{..._sharedUi.absoluteFill,alignItems:"center",justifyContent:"center"},gridLine:{position:"absolute",height:1},spoke:{position:"absolute",top:0,height:1,backgroundColor:_floatingToolsCore.dialColors.dialGridLine},spokeLeft:{left:0},spokeRight:{right:0},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:_floatingToolsCore.dialColors.hubHalo,position:"relative",overflow:"hidden"},buttonGradientLayer1:{..._sharedUi.absoluteFill,backgroundColor:_floatingToolsCore.dialColors.dialGradient1,opacity:.5,borderRadius:BUTTON_SIZE},buttonGradientLayer2:{..._sharedUi.absoluteFill,backgroundColor:_floatingToolsCore.dialColors.dialGradient2,opacity:.3,top:"20%",left:"20%",borderRadius:BUTTON_SIZE},buttonGradientLayer3:{..._sharedUi.absoluteFill,backgroundColor:_floatingToolsCore.dialColors.dialGradient3,opacity:.2,top:"40%",left:"40%",borderRadius:BUTTON_SIZE},buttonBorder:{backgroundColor:_floatingToolsCore.dialColors.hubFill,alignItems:"center",justifyContent:"center",width:BUTTON_SIZE*1.2,height:BUTTON_SIZE*1.2,borderRadius:BUTTON_SIZE*.6},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:_floatingToolsCore.dialColors.centerText,fontSize:10,fontWeight:"900",fontFamily:_sharedUi.monoFont,letterSpacing:1,textAlign:"center",textTransform:"uppercase",textShadowColor:_floatingToolsCore.dialColors.centerTextGlow,textShadowOffset:{width:0,height:0},textShadowRadius:4},closeTextTop:{marginBottom:-2},closeTextBottom:{marginTop:-2},proText:{color:_sharedUi.buoyColors.warning,fontSize:8,fontWeight:"900",fontFamily:_sharedUi.monoFont,letterSpacing:2,textAlign:"center",textShadowColor:_floatingToolsCore.dialColors.centerTextGlow,textShadowOffset:{width:0,height:0},textShadowRadius:4},weekendText:{color:"#BF5AF2",letterSpacing:1}});