@buoy-gg/core 7.0.41 → 7.0.43

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

@@ -1,900 +1 @@
-"use strict";
-
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Pressable, StyleSheet, TouchableOpacity, View, useWindowDimensions, Text, Animated, Easing } from "react-native";
-import { absoluteFill, monoFont } from "@buoy-gg/shared-ui";
-// Icons are provided by installedApps; no direct icon imports here.
-import { DialIcon } from "./DialIcon.js";
-import { DialHyperspace } from "./DialHyperspace.js";
-import { DialPagination } from "./DialPagination.js";
-import { getRankedToolIds, isDialUsageLoaded, loadDialUsage, recordToolUsage } from "./dialUsageStore.js";
-import { persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors, ToolBackground, useToolBackground } from "@buoy-gg/shared-ui";
-import { DevToolsSettingsModal, useDevToolsSettings } from "../DevToolsSettingsModal";
-import { useProAccess } from "@buoy-gg/license";
-import { renderAppIcon } from "../AppIcon";
-import { useAppHost } from "../AppHost";
-import { OnboardingTooltip } from "./OnboardingTooltip";
-import { getDialLayout, MAX_DIAL_SLOTS, DIAL_BUTTON_SIZE, dialAnimationConfig, dialColors } from "@buoy-gg/floating-tools-core";
-
-// 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).
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const BUTTON_SIZE = 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: () => {}
-});
-export const DialDevTools = ({
-  onClose,
-  onSettingsPress,
-  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 {
-    refreshSettings
-  } = useDevToolsSettings();
-  const {
-    open
-  } = useAppHost();
-  const {
-    isPro,
-    isWeekendFree
-  } = 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
-  } = useWindowDimensions();
-  const circleSize = 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
-  } = useToolBackground();
-  const sizeStyles = 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
-  useEffect(() => {
-    const loadSettingsModalState = async () => {
-      try {
-        const savedModalOpen = await persistentStorage.getItem(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;
-    persistentStorage.setItem(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
-  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 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 = 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 pulseScale = useRef(new Animated.Value(1)).current;
-  const availableApps = 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 = 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 = useMemo(() => apps.filter(a => (a.slot ?? "both") !== "row"), [apps]);
-
-  // Build a stable IconType for every dial-eligible app, keyed by id.
-  const iconsById = useMemo(() => {
-    const map = new Map();
-    for (const app of dialApps) {
-      map.set(app.id, {
-        id: app.id,
-        name: app.name,
-        // Pass both the pre-rendered icon (for non-function icons; strings
-        // resolve to auto-fitting text icons) and the component (for dynamic
-        // rendering).
-        icon: typeof app.icon === "function" ? null : 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 ?? buoyColors.primary,
-        onPress: () => {
-          // Put this tool first the next time the dial opens.
-          void recordToolUsage(app.id);
-
-          // Call the app's onPress callback if provided, passing actions for
-          // toggle tools.
-          app?.onPress?.(actions);
-
-          // Only open modal if not a toggle-only tool.
-          if (app.launchMode !== "toggle-only") {
-            const resolvedIcon = 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] = useState(() => getRankedToolIds(dialApps.map(a => a.id)));
-  useEffect(() => {
-    const ids = dialApps.map(a => a.id);
-    if (isDialUsageLoaded()) {
-      setRankedIds(getRankedToolIds(ids));
-      return;
-    }
-    // Usage data not loaded yet — show default order, then re-rank once ready.
-    let cancelled = false;
-    loadDialUsage().then(() => {
-      if (!cancelled) setRankedIds(getRankedToolIds(ids));
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [dialApps]);
-
-  // 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 / MAX_DIAL_SLOTS));
-  const [currentPage, setCurrentPage] = useState(0);
-  const safePage = Math.min(currentPage, pageCount - 1);
-
-  // Every dial-eligible icon, with the page/slot it occupies. The ranking is
-  // snapshotted on open, so each icon's page and slot are fixed for the
-  // session — which lets us mount all icons once and paginate purely by
-  // toggling visibility (no remounts on page change).
-  const allDialIcons = useMemo(() => {
-    return rankedIds.map(id => iconsById.get(id)).filter(icon => Boolean(icon)).map((icon, i) => ({
-      icon,
-      page: Math.floor(i / MAX_DIAL_SLOTS),
-      slot: i % MAX_DIAL_SLOTS
-    }));
-  }, [rankedIds, iconsById]);
-
-  // Empty slot indices for the current page (only the last page can be
-  // partial). These are cheap placeholder dots.
-  const emptySlots = useMemo(() => {
-    const onThisPage = allDialIcons.filter(d => d.page === safePage).length;
-    const slots = [];
-    for (let s = onThisPage; s < MAX_DIAL_SLOTS; s += 1) slots.push(s);
-    return slots;
-  }, [allDialIcons, safePage]);
-
-  // Swap to another page. Every icon is already mounted, so this only toggles
-  // which ones are visible — no remount, no re-animation — keeping page
-  // changes instant.
-  const handlePageChange = next => {
-    const clamped = Math.max(0, Math.min(next, pageCount - 1));
-    if (clamped !== safePage) setCurrentPage(clamped);
-  };
-
-  // Initialize animations on mount - using shared config from core
-  useEffect(() => {
-    // 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: 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
-    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();
-
-    // Pulse animation - only continuous effect kept for performance
-    if (!DIAL_IDLE_PULSE) return;
-    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();
-    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
-    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 = 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 = icon => {
-    setSelectedIcon(1);
-    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(() => {
-      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__*/_jsxs(View, {
-    style: styles.container,
-    nativeID: "dial-devtools-root",
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.backdrop, backdropAnimatedStyle],
-      children: /*#__PURE__*/_jsx(Pressable, {
-        style: absoluteFill,
-        onPress: handleClose
-      })
-    }), /*#__PURE__*/_jsxs(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__*/_jsxs(Animated.View, {
-        style: [styles.circle, sizeStyles.circle],
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: [styles.gradientBackground, sizeStyles.rounded],
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.gradientLayer1, sizeStyles.rounded]
-          }), /*#__PURE__*/_jsx(View, {
-            style: [styles.gradientLayer2, sizeStyles.rounded]
-          }), /*#__PURE__*/_jsx(View, {
-            style: [styles.gradientLayer3, sizeStyles.rounded]
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.gridPattern,
-            children: Array.from({
-              length: 6
-            }).map((_, i) => /*#__PURE__*/_jsxs(View, {
-              style: [styles.gridLine, sizeStyles.gridLine, {
-                transform: [{
-                  rotate: `${i * 60}deg`
-                }]
-              }],
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.spoke, sizeStyles.spoke, styles.spokeLeft]
-              }), /*#__PURE__*/_jsx(View, {
-                style: [styles.spoke, sizeStyles.spoke, styles.spokeRight]
-              })]
-            }, i))
-          }), backgroundId === "hyperspace" ? /*#__PURE__*/_jsx(DialHyperspace, {
-            size: circleSize
-          }) : /*#__PURE__*/_jsx(ToolBackground, {
-            focus: DIAL_BACKGROUND_FOCUS
-          })]
-        }), allDialIcons.filter(({
-          page
-        }) => page === safePage).map(({
-          icon,
-          slot
-        }) => /*#__PURE__*/_jsx(DialIcon, {
-          onPress: handleIconPress,
-          iconsProgress: iconsProgress,
-          icon: icon,
-          index: slot,
-          totalIcons: MAX_DIAL_SLOTS,
-          active: true
-        }, icon.id ?? `page${safePage}-${slot}`)), emptySlots.map(slot => /*#__PURE__*/_jsx(DialIcon, {
-          onPress: handleIconPress,
-          iconsProgress: iconsProgress,
-          icon: createEmptySlot(slot),
-          index: slot,
-          totalIcons: MAX_DIAL_SLOTS,
-          active: true
-        }, `empty-${slot}`))]
-      }), /*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.buttonContainer, centerButtonAnimatedStyle],
-        children: /*#__PURE__*/_jsxs(View, {
-          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(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__*/_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, isWeekendFree && styles.weekendText],
-                    children: isWeekendFree ? "WEEKEND" : "PRO"
-                  })]
-                })
-              })
-            })
-          })]
-        })
-      })]
-    }), pageCount > 1 && /*#__PURE__*/_jsx(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__*/_jsx(DevToolsSettingsModal, {
-      visible: true,
-      onClose: () => {
-        setIsSettingsModalOpen(false);
-        refreshSettings(); // Refresh from storage
-      },
-      availableApps: availableApps
-    }), showOnboardingTooltip && !isSettingsModalOpen && !onboardingDismissedRef.current && /*#__PURE__*/_jsx(OnboardingTooltip, {
-      visible: true,
-      onDismiss: handleOnboardingDismiss
-    })]
-  });
-};
-const styles = StyleSheet.create({
-  container: {
-    ...absoluteFill,
-    zIndex: 9999
-  },
-  backdrop: {
-    ...absoluteFill,
-    backgroundColor: 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: dialColors.dialBorder,
-    shadowColor: dialColors.dialShadow,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.5,
-    shadowRadius: 20,
-    elevation: 10
-  },
-  gradientBackground: {
-    width: "100%",
-    height: "100%",
-    position: "relative",
-    backgroundColor: dialColors.dialBackground,
-    overflow: "hidden"
-  },
-  gradientLayer1: {
-    ...absoluteFill,
-    backgroundColor: dialColors.dialGradient1,
-    opacity: 0.6
-  },
-  gradientLayer2: {
-    ...absoluteFill,
-    backgroundColor: dialColors.dialGradient2,
-    opacity: 0.4,
-    top: "30%",
-    left: "30%"
-  },
-  gradientLayer3: {
-    ...absoluteFill,
-    backgroundColor: dialColors.dialGradient3,
-    opacity: 0.3,
-    top: "50%",
-    left: "50%"
-  },
-  gridPattern: {
-    ...absoluteFill,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  gridLine: {
-    position: "absolute",
-    height: 1
-  },
-  spoke: {
-    position: "absolute",
-    top: 0,
-    height: 1,
-    backgroundColor: 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: dialColors.hubHalo,
-    position: "relative",
-    overflow: "hidden"
-  },
-  buttonGradientLayer1: {
-    ...absoluteFill,
-    backgroundColor: dialColors.dialGradient1,
-    opacity: 0.5,
-    borderRadius: BUTTON_SIZE
-  },
-  buttonGradientLayer2: {
-    ...absoluteFill,
-    backgroundColor: dialColors.dialGradient2,
-    opacity: 0.3,
-    top: "20%",
-    left: "20%",
-    borderRadius: BUTTON_SIZE
-  },
-  buttonGradientLayer3: {
-    ...absoluteFill,
-    backgroundColor: dialColors.dialGradient3,
-    opacity: 0.2,
-    top: "40%",
-    left: "40%",
-    borderRadius: BUTTON_SIZE
-  },
-  buttonBorder: {
-    backgroundColor: 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: dialColors.centerText,
-    fontSize: 10,
-    fontWeight: "900",
-    fontFamily: monoFont,
-    letterSpacing: 1,
-    textAlign: "center",
-    textTransform: "uppercase",
-    textShadowColor: dialColors.centerTextGlow,
-    textShadowOffset: {
-      width: 0,
-      height: 0
-    },
-    textShadowRadius: 4
-  },
-  closeTextTop: {
-    marginBottom: -2
-  },
-  closeTextBottom: {
-    marginTop: -2
-  },
-  proText: {
-    color: buoyColors.warning,
-    fontSize: 8,
-    fontWeight: "900",
-    fontFamily: monoFont,
-    letterSpacing: 2,
-    textAlign: "center",
-    textShadowColor: 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";import{useEffect as b,useMemo as S,useRef as f,useState as w}from"react";import{Pressable as Ie,StyleSheet as Le,TouchableOpacity as Oe,View as s,useWindowDimensions as Be,Text as P,Animated as o,Easing as l}from"react-native";import{absoluteFill as u,monoFont as oe}from"@buoy-gg/shared-ui";import{DialIcon as ne}from"./DialIcon.js";import{DialHyperspace as Pe}from"./DialHyperspace.js";import{DialPagination as Re}from"./DialPagination.js";import{getRankedToolIds as F,isDialUsageLoaded as Ae,loadDialUsage as Ve,recordToolUsage as Ne}from"./dialUsageStore.js";import{persistentStorage as R,useHintsDisabled as Ge,devToolsStorageKeys as ie,buoyColors as re,ToolBackground as Me,useToolBackground as _e}from"@buoy-gg/shared-ui";import{DevToolsSettingsModal as Ee,useDevToolsSettings as Fe}from"../DevToolsSettingsModal";import{useProAccess as je}from"@buoy-gg/license";import{renderAppIcon as ae}from"../AppIcon";import{useAppHost as ze}from"../AppHost";import{OnboardingTooltip as Ue}from"./OnboardingTooltip";import{getDialLayout as We,MAX_DIAL_SLOTS as v,DIAL_BUTTON_SIZE as qe,dialAnimationConfig as j,dialColors as a}from"@buoy-gg/floating-tools-core";import{jsx as i,jsxs as h,Fragment as se}from"react/jsx-runtime";const c=qe;const He={x:.5,y:.5};const $e=c*.75+6;const Ke=false;const le="@react_buoy_settings_tooltip_shown";const Ye=y=>({id:`empty-${y}`,name:`empty-${y}`,icon:null,color:"transparent",onPress:()=>{}});export const DialDevTools=({onClose:y,onSettingsPress:ce,autoOpenSettings:z=false,apps:L,state:Ze,actions:U})=>{const[de,ue]=w(-1);const[g,T]=w(false);const[W,ge]=w(false);const[q,H]=w(false);const A=f(false);const $=Ge();const{refreshSettings:pe}=Fe();const{open:K}=ze();const{isPro:me,isWeekendFree:Y}=je();const{width:V,height:fe}=Be();const d=We({screenWidth:V}).circleSize;const{id:he}=_e();const p=S(()=>({parent:{width:d,height:d},circle:{width:d,height:d,borderRadius:d/2},rounded:{borderRadius:d/2},gridLine:{width:d},spoke:{width:d/2-$e}}),[d]);b(()=>{const t=async()=>{try{const e=await R.getItem(ie.settings.modalOpen());if(e==="true"){T(true)}}catch(e){}finally{ge(true)}};t()},[]);b(()=>{if(!W)return;R.setItem(ie.settings.modalOpen(),g?"true":"false").catch(t=>{console.warn("Failed to save settings modal state:",t)})},[g,W]);b(()=>{if(z&&!g){T(true)}},[z,g]);b(()=>{if($){return}const t=async()=>{try{const e=await R.getItem(le);if(!e){setTimeout(()=>{H(true)},1200)}}catch(e){}};t()},[$]);const N=f(new o.Value(0)).current;const k=f(new o.Value(0)).current;const G=f(new o.Value(0)).current;const D=f(new o.Value(0)).current;const O=f(new o.Value(0)).current;const M=f(new o.Value(1)).current;const ye=S(()=>L.map(({id:t,name:e,slot:r,description:I,icon:xe,color:Ce})=>({id:t,name:e,slot:r,description:I,icon:xe,color:Ce})),[L]);const x=f(null);const be=()=>{if(g){T(false);return}T(true);if(q&&!A.current){Q()}ce?.()};const C=S(()=>L.filter(t=>(t.slot??"both")!=="row"),[L]);const Z=S(()=>{const t=new Map;for(const e of C){t.set(e.id,{id:e.id,name:e.name,icon:typeof e.icon==="function"?null:ae(e.icon,{slot:"dial",size:20,color:e.color}),iconComponent:typeof e.icon==="function"?e.icon:void 0,color:e.color??re.primary,onPress:()=>{void Ne(e.id);e?.onPress?.(U);if(e.launchMode!=="toggle-only"){const r=ae(e.icon,{slot:"dial",size:20,color:e.color});K({id:e.id,title:e.name,component:e.component,props:e.props,launchMode:e.launchMode??"self-modal",singleton:e.singleton??true,icon:r,color:e.color,modal:e.modal})}y?.()}})}return t},[C,U,K,y]);const[_,X]=w(()=>F(C.map(t=>t.id)));b(()=>{const t=C.map(r=>r.id);if(Ae()){X(F(t));return}let e=false;Ve().then(()=>{if(!e)X(F(t))});return()=>{e=true}},[C]);const B=Math.max(1,Math.ceil(_.length/v));const[Se,we]=w(0);const m=Math.min(Se,B-1);const E=S(()=>{return _.map(t=>Z.get(t)).filter(t=>Boolean(t)).map((t,e)=>({icon:t,page:Math.floor(e/v),slot:e%v}))},[_,Z]);const ve=S(()=>{const t=E.filter(r=>r.page===m).length;const e=[];for(let r=t;r<v;r+=1)e.push(r);return e},[E,m]);const J=t=>{const e=Math.max(0,Math.min(t,B-1));if(e!==m)we(e)};b(()=>{const t=j??{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:r}=t;o.timing(N,{toValue:1,duration:e.backdrop.duration,useNativeDriver:true}).start();o.spring(k,{toValue:1,damping:e.dial.scale.damping,stiffness:e.dial.scale.stiffness,mass:e.dial.scale.mass,useNativeDriver:true}).start();o.sequence([o.timing(G,{toValue:1,duration:e.dial.rotation.duration,easing:l.out(l.cubic),useNativeDriver:true}),o.timing(G,{toValue:0,duration:0,useNativeDriver:true})]).start();o.sequence([o.delay(e.centerButton.delay),o.spring(D,{toValue:1,damping:e.centerButton.damping,stiffness:e.centerButton.stiffness,useNativeDriver:true})]).start();o.sequence([o.delay(e.icons.delay),o.timing(O,{toValue:1,duration:e.icons.duration,easing:l.out(l.cubic),useNativeDriver:true})]).start();if(!Ke)return;x.current=o.loop(o.sequence([o.timing(M,{toValue:r.pulse.maxScale,duration:r.pulse.duration,easing:l.inOut(l.ease),useNativeDriver:true}),o.timing(M,{toValue:r.pulse.minScale,duration:r.pulse.duration,easing:l.inOut(l.ease),useNativeDriver:true})]));x.current.start();return()=>{x.current?.stop()}},[]);const Q=()=>{A.current=true;H(false);R.setItem(le,"true").catch(t=>{console.warn("Failed to save dial onboarding state:",t)})};const ee=()=>{if(x.current){x.current.stop()}const t=j?.exit??{icons:{duration:300},centerButton:{duration:200},dialScale:{duration:250},backdrop:{duration:200}};o.sequence([o.timing(O,{toValue:0,duration:t.icons.duration,easing:l.in(l.cubic),useNativeDriver:true}),o.parallel([o.timing(D,{toValue:0,duration:t.centerButton.duration,easing:l.in(l.cubic),useNativeDriver:true}),o.timing(k,{toValue:0,duration:t.dialScale.duration,easing:l.in(l.cubic),useNativeDriver:true})]),o.timing(N,{toValue:0,duration:t.backdrop.duration,useNativeDriver:true})]).start(()=>{if(y){setTimeout(()=>{y()},0)}})};const te=t=>{ue(1);const e=j?.interaction??{iconSelect:{pulse:[{scale:.9,damping:15,stiffness:500},{scale:1,damping:10,stiffness:200}],actionDelay:50}};const[r,I]=e.iconSelect.pulse;o.sequence([o.spring(D,{toValue:r.scale,damping:r.damping,stiffness:r.stiffness,useNativeDriver:true}),o.spring(D,{toValue:I.scale,damping:I.damping,stiffness:I.stiffness,useNativeDriver:true})]).start();setTimeout(()=>{t.onPress();if(t.id!=="wifi"){ee()}},e.iconSelect.actionDelay)};const Te={opacity:N};const ke={transform:[{scale:D}]};const De={transform:[{scale:de>=0?1:M}]};return h(s,{style:n.container,nativeID:"dial-devtools-root",children:[i(o.View,{style:[n.backdrop,Te],children:i(Ie,{style:u,onPress:ee})}),h(o.View,{style:[n.parent,p.parent,{position:"absolute",left:(V-d)/2,bottom:80,transform:[{scale:k},{rotate:G.interpolate({inputRange:[0,1],outputRange:["0deg","360deg"]})}]}],children:[h(o.View,{style:[n.circle,p.circle],children:[h(s,{style:[n.gradientBackground,p.rounded],children:[i(s,{style:[n.gradientLayer1,p.rounded]}),i(s,{style:[n.gradientLayer2,p.rounded]}),i(s,{style:[n.gradientLayer3,p.rounded]}),i(s,{style:n.gridPattern,children:Array.from({length:6}).map((t,e)=>h(s,{style:[n.gridLine,p.gridLine,{transform:[{rotate:`${e*60}deg`}]}],children:[i(s,{style:[n.spoke,p.spoke,n.spokeLeft]}),i(s,{style:[n.spoke,p.spoke,n.spokeRight]})]},e))}),he==="hyperspace"?i(Pe,{size:d}):i(Me,{focus:He})]}),E.filter(({page:t})=>t===m).map(({icon:t,slot:e})=>i(ne,{onPress:te,iconsProgress:O,icon:t,index:e,totalIcons:v,active:true},t.id??`page${m}-${e}`)),ve.map(t=>i(ne,{onPress:te,iconsProgress:O,icon:Ye(t),index:t,totalIcons:v,active:true},`empty-${t}`))]}),i(o.View,{style:[n.buttonContainer,ke],children:h(s,{style:n.buttonGradient,children:[i(s,{style:n.buttonGradientLayer1}),i(s,{style:n.buttonGradientLayer2}),i(s,{style:n.buttonGradientLayer3}),i(s,{style:n.buttonBorder,children:i(o.View,{style:[n.button,De],children:i(Oe,{accessibilityRole:"button",accessibilityLabel:g?"Close Settings":"Open Dev Tools Settings",onPress:be,activeOpacity:.5,style:n.buttonPressable,children:g?h(se,{children:[i(P,{style:[n.centerText,n.closeTextTop],children:"CLOSE"}),i(P,{style:[n.centerText,n.closeTextBottom],children:"SETTINGS"})]}):h(se,{children:[i(P,{style:n.centerText,children:"BUOY"}),me&&i(P,{style:[n.proText,Y&&n.weekendText],children:Y?"WEEKEND":"PRO"})]})})})})]})})]}),B>1&&i(Re,{page:m,pageCount:B,onPrev:()=>J(m-1),onNext:()=>J(m+1),animatedStyle:{position:"absolute",left:(V-d)/2,top:fe-80+16,width:d,opacity:k,transform:[{scale:k}]}}),g&&i(Ee,{visible:true,onClose:()=>{T(false);pe()},availableApps:ye}),q&&!g&&!A.current&&i(Ue,{visible:true,onDismiss:Q})]})};const n=Le.create({container:{...u,zIndex:9999},backdrop:{...u,backgroundColor:a.dialBackdrop},parent:{alignItems:"center",justifyContent:"center"},circle:{position:"absolute",backgroundColor:"transparent",borderWidth:1,borderColor:a.dialBorder,shadowColor:a.dialShadow,shadowOffset:{width:0,height:0},shadowOpacity:.5,shadowRadius:20,elevation:10},gradientBackground:{width:"100%",height:"100%",position:"relative",backgroundColor:a.dialBackground,overflow:"hidden"},gradientLayer1:{...u,backgroundColor:a.dialGradient1,opacity:.6},gradientLayer2:{...u,backgroundColor:a.dialGradient2,opacity:.4,top:"30%",left:"30%"},gradientLayer3:{...u,backgroundColor:a.dialGradient3,opacity:.3,top:"50%",left:"50%"},gridPattern:{...u,alignItems:"center",justifyContent:"center"},gridLine:{position:"absolute",height:1},spoke:{position:"absolute",top:0,height:1,backgroundColor:a.dialGridLine},spokeLeft:{left:0},spokeRight:{right:0},buttonContainer:{zIndex:1,backgroundColor:"transparent",alignItems:"center",justifyContent:"center",position:"absolute",width:c*1.5,height:c*1.5,borderRadius:c},buttonGradient:{width:"100%",height:"100%",borderRadius:c,alignItems:"center",justifyContent:"center",padding:4,backgroundColor:a.hubHalo,position:"relative",overflow:"hidden"},buttonGradientLayer1:{...u,backgroundColor:a.dialGradient1,opacity:.5,borderRadius:c},buttonGradientLayer2:{...u,backgroundColor:a.dialGradient2,opacity:.3,top:"20%",left:"20%",borderRadius:c},buttonGradientLayer3:{...u,backgroundColor:a.dialGradient3,opacity:.2,top:"40%",left:"40%",borderRadius:c},buttonBorder:{backgroundColor:a.hubFill,alignItems:"center",justifyContent:"center",width:c*1.2,height:c*1.2,borderRadius:c*.6},button:{width:c,height:c,borderRadius:c/2,justifyContent:"center",alignItems:"center",position:"relative",overflow:"hidden"},buttonPressable:{width:"100%",height:"100%",justifyContent:"center",alignItems:"center"},centerText:{color:a.centerText,fontSize:10,fontWeight:"900",fontFamily:oe,letterSpacing:1,textAlign:"center",textTransform:"uppercase",textShadowColor:a.centerTextGlow,textShadowOffset:{width:0,height:0},textShadowRadius:4},closeTextTop:{marginBottom:-2},closeTextBottom:{marginTop:-2},proText:{color:re.warning,fontSize:8,fontWeight:"900",fontFamily:oe,letterSpacing:2,textAlign:"center",textShadowColor:a.centerTextGlow,textShadowOffset:{width:0,height:0},textShadowRadius:4},weekendText:{color:"#BF5AF2",letterSpacing:1}});