@buoy-gg/core 1.7.2

package/lib/module/floatingMenu/DevToolsSettingsModal.js

@@ -0,0 +1,2273 @@
+"use strict";
+
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Dimensions } from "react-native";
+import { settingsBus } from "./settingsBus.js";
+import { SentryBugIcon, WifiCircuitIcon, BenchmarkIcon, RenderCountIcon, Info, Layers, ChevronRightIcon, ChevronDown, safeGetItem, safeSetItem, getStorageBackendType, persistentStorage, Database, Trash2, CheckCircle2, AlertTriangle, Zap, FileText, HardDrive, Copy, FileCode, RefreshCw, Smartphone, Plus, copyToClipboard, LicenseEntryModal, SectionHeader } from "@buoy-gg/shared-ui";
+import { EnvIcon, StorageIcon, RoutesIcon, NetworkIcon, QueryIcon, HighlighterIcon } from "@buoy-gg/floating-tools-core";
+import { useDefaultConfig } from "./DefaultConfigContext.js";
+import { JsModal, devToolsStorageKeys, safeGetItem as sharedSafeGetItem, safeSetItem as sharedSafeSetItem } from "@buoy-gg/shared-ui";
+import { useSafeAreaInsets } from "@buoy-gg/shared-ui";
+import { ModalHeader } from "@buoy-gg/shared-ui";
+import { TabSelector } from "@buoy-gg/shared-ui";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const STORAGE_KEY = "@react_buoy_dev_tools_settings";
+const MAX_DIAL_SLOTS = 6;
+
+// Lazy load license hooks to avoid circular dependencies
+let _useLicense = null;
+let _useSeats = null;
+let _useDevices = null;
+function getUseLicense() {
+  if (!_useLicense) {
+    try {
+      const mod = require("@buoy-gg/license");
+      _useLicense = mod.useLicense;
+    } catch {
+      // License package not available
+    }
+  }
+  return _useLicense;
+}
+function getUseSeats() {
+  if (!_useSeats) {
+    try {
+      const mod = require("@buoy-gg/license");
+      _useSeats = mod.useSeats;
+    } catch {
+      // License package not available
+    }
+  }
+  return _useSeats;
+}
+function getUseDevices() {
+  if (!_useDevices) {
+    try {
+      const mod = require("@buoy-gg/license");
+      _useDevices = mod.useDevices;
+    } catch {
+      // License package not available
+    }
+  }
+  return _useDevices;
+}
+const enforceDialLimit = dialTools => {
+  let remaining = MAX_DIAL_SLOTS;
+  const limited = {};
+  for (const [id, enabled] of Object.entries(dialTools)) {
+    if (enabled && remaining > 0) {
+      limited[id] = true;
+      remaining -= 1;
+    } else {
+      limited[id] = false;
+    }
+  }
+  return limited;
+};
+const sanitizeFloating = (floating, allowedKeys) => {
+  const {
+    userStatus,
+    environment,
+    ...rest
+  } = floating;
+  const filteredEntries = allowedKeys ? Object.entries(rest).filter(([key]) => allowedKeys.includes(key)) : Object.entries(rest);
+  return {
+    ...Object.fromEntries(filteredEntries),
+    environment: environment ?? false
+  };
+};
+const mergeWithDefaults = (defaults, stored, options) => {
+  if (!stored) return defaults;
+  const combinedDial = {
+    ...defaults.dialTools,
+    ...(stored.dialTools ?? {})
+  };
+  const dialEntries = options?.allowedDialKeys ? Object.entries(combinedDial).filter(([key]) => options.allowedDialKeys?.includes(key)) : Object.entries(combinedDial);
+  const mergedDial = enforceDialLimit(Object.fromEntries(dialEntries));
+  return {
+    dialTools: mergedDial,
+    floatingTools: sanitizeFloating({
+      ...defaults.floatingTools,
+      ...(stored.floatingTools ?? {})
+    }, options?.allowedFloatingKeys),
+    globalSettings: {
+      enableSharedModalDimensions: false,
+      // Default to false
+      ...(stored.globalSettings ?? {})
+    }
+  };
+};
+
+/**
+ * Global settings that apply to all dev tools.
+ * These settings override individual tool configurations.
+ */
+
+/**
+ * Serialized preferences that power the floating dev tools UI. Values persist across sessions
+ * via AsyncStorage so teams can tailor which tools appear in the dial or floating row.
+ */
+
+/**
+ * Generate default settings based on available apps and optional team default configuration.
+ *
+ * @param availableApps - List of available apps from auto-discovery
+ * @param defaultFloatingTools - Optional array of tool IDs to enable by default in floating bubble
+ * @param defaultDialTools - Optional array of tool IDs to enable by default in dial menu
+ */
+const generateDefaultSettings = (availableApps = [], defaultFloatingTools, defaultDialTools) => {
+  const dialDefaults = {};
+  const floatingDefaults = {};
+
+  // Create sets for quick lookup of default-enabled tools
+  // Cast to Set<string> to allow comparison with any tool ID (including custom tools)
+  const enabledFloatingSet = new Set(defaultFloatingTools ?? []);
+  const enabledDialSet = new Set(defaultDialTools ?? []);
+  for (const app of availableApps) {
+    const {
+      id,
+      slot = "both"
+    } = app;
+    if (slot === "dial" || slot === "both") {
+      // Enable if in defaultDialTools, otherwise false
+      dialDefaults[id] = enabledDialSet.has(id);
+    }
+    if (slot === "row" || slot === "both") {
+      // Enable if in defaultFloatingTools, otherwise false
+      floatingDefaults[id] = enabledFloatingSet.has(id);
+    }
+  }
+  return {
+    dialTools: enforceDialLimit(dialDefaults),
+    floatingTools: {
+      ...floatingDefaults,
+      // Special: environment badge - check if 'environment' is in the floating defaults
+      environment: enabledFloatingSet.has('environment')
+    },
+    globalSettings: {
+      enableSharedModalDimensions: false // Default to false - each modal has its own persistence
+    }
+  };
+};
+
+/**
+ * Configurable modal surface that lets engineers pick which dev tools appear in the dial and
+ * floating row. Persists preferences and enforces slot limits for a consistent UX.
+ */
+export const DevToolsSettingsModal = ({
+  visible,
+  onClose,
+  onSettingsChange,
+  initialSettings,
+  availableApps = []
+}) => {
+  // Get team default configuration from context
+  const {
+    defaultFloatingTools,
+    defaultDialTools
+  } = useDefaultConfig();
+  const defaultSettings = useMemo(() => generateDefaultSettings(availableApps, defaultFloatingTools, defaultDialTools), [availableApps, defaultFloatingTools, defaultDialTools]);
+  const allowedDialKeys = useMemo(() => Object.keys(defaultSettings.dialTools), [defaultSettings]);
+  const allowedFloatingKeys = useMemo(() => Object.keys(defaultSettings.floatingTools).filter(key => key !== "environment"), [defaultSettings]);
+  const [settings, setSettings] = useState(initialSettings || defaultSettings);
+  const [activeTab, setActiveTab] = useState("dial");
+  const [activeTabLoaded, setActiveTabLoaded] = useState(false);
+  const [expandedSettings, setExpandedSettings] = useState(new Set());
+  const [showLicenseModal, setShowLicenseModal] = useState(false);
+  const [licenseModalForDeviceRegistration, setLicenseModalForDeviceRegistration] = useState(false);
+
+  // Load persisted active tab on mount
+  useEffect(() => {
+    const loadActiveTab = async () => {
+      try {
+        const savedTab = await sharedSafeGetItem(devToolsStorageKeys.settings.activeTab());
+        if (savedTab && ["dial", "floating", "settings", "pro"].includes(savedTab)) {
+          setActiveTab(savedTab);
+        }
+      } catch (error) {
+        // Failed to load active tab - use default
+      } finally {
+        setActiveTabLoaded(true);
+      }
+    };
+    loadActiveTab();
+  }, []);
+
+  // Persist active tab when it changes
+  useEffect(() => {
+    // Only persist after initial state is loaded to avoid overwriting with default
+    if (!activeTabLoaded) return;
+    sharedSafeSetItem(devToolsStorageKeys.settings.activeTab(), activeTab).catch(error => {
+      // Failed to save active tab - continue without persistence
+      console.warn("Failed to save settings active tab:", error);
+    });
+  }, [activeTab, activeTabLoaded]);
+
+  // License hooks
+  const useLicenseHook = getUseLicense();
+  const useSeatsHook = getUseSeats();
+  const useDevicesHook = getUseDevices();
+  const license = useLicenseHook?.();
+  const seats = useSeatsHook?.();
+  const devicesData = useDevicesHook?.();
+  const isPro = license?.isPro ?? false;
+
+  // Devices data
+  const devices = devicesData?.devices ?? [];
+  const devicesLoading = devicesData?.isLoading ?? false;
+  const devicesError = devicesData?.error ?? null;
+  const refreshDevices = devicesData?.refreshDevices;
+  const registerDevice = devicesData?.registerDevice;
+  const deactivateDevice = devicesData?.deactivateDevice;
+  const isCurrentDeviceRegistered = devicesData?.isCurrentDeviceRegistered ?? false;
+  const [deactivatingDeviceId, setDeactivatingDeviceId] = useState(null);
+  const [storageBackend, setStorageBackend] = useState(null);
+  const [isClearing, setIsClearing] = useState(false);
+  const [clearSuccess, setClearSuccess] = useState(false);
+  const [isStorageExpanded, setIsStorageExpanded] = useState(false);
+  const [savedKeys, setSavedKeys] = useState([]);
+  const [savedKeysLoading, setSavedKeysLoading] = useState(false);
+  const [copySuccess, setCopySuccess] = useState(false);
+  const [isExportExpanded, setIsExportExpanded] = useState(false);
+  const insets = useSafeAreaInsets();
+
+  // Check if in development mode - used to show dev-only features like Export Config
+  const isDevelopmentMode = typeof __DEV__ !== "undefined" && __DEV__;
+  const screenHeight = Dimensions.get("window").height;
+  const screenWidth = Dimensions.get("window").width;
+  const modalHeight = Math.floor(screenHeight * 0.33); // 1/3 of screen height
+  const modalWidth = Math.min(screenWidth - 32, 400); // Modal width with padding
+
+  const loadSettings = useCallback(async () => {
+    try {
+      const savedSettings = await safeGetItem(STORAGE_KEY);
+      if (savedSettings) {
+        const parsed = JSON.parse(savedSettings);
+        const merged = mergeWithDefaults(defaultSettings, parsed, {
+          allowedDialKeys,
+          allowedFloatingKeys
+        });
+        setSettings(merged);
+        return;
+      }
+      setSettings(defaultSettings);
+    } catch (error) {
+      console.error("Failed to load dev tools settings:", error);
+      setSettings(defaultSettings);
+    }
+  }, [defaultSettings, allowedDialKeys, allowedFloatingKeys]);
+  useEffect(() => {
+    loadSettings();
+  }, [loadSettings]);
+
+  // Load storage backend type
+  useEffect(() => {
+    getStorageBackendType().then(setStorageBackend);
+  }, []);
+
+  // Load saved keys when storage card is expanded
+  useEffect(() => {
+    if (isStorageExpanded) {
+      setSavedKeysLoading(true);
+      persistentStorage.getAllKeys().then(keys => {
+        setSavedKeys(keys.sort());
+      }).catch(() => {
+        setSavedKeys([]);
+      }).finally(() => {
+        setSavedKeysLoading(false);
+      });
+    }
+  }, [isStorageExpanded]);
+  const saveSettings = async newSettings => {
+    try {
+      const limitedSettings = {
+        ...newSettings,
+        dialTools: enforceDialLimit(newSettings.dialTools)
+      };
+      await safeSetItem(STORAGE_KEY, JSON.stringify(limitedSettings));
+      setSettings(limitedSettings);
+      onSettingsChange?.(limitedSettings);
+      // Notify listeners (e.g., floating bubble) to refresh immediately
+      settingsBus.emit(limitedSettings);
+    } catch (error) {
+      console.error("Failed to save dev tools settings:", error);
+    }
+  };
+  const toggleDialTool = tool => {
+    const currentEnabled = Object.values(settings.dialTools).filter(v => v).length;
+    const isCurrentlyEnabled = settings.dialTools[tool];
+
+    // If trying to enable and already at 6, don't allow
+    if (!isCurrentlyEnabled && currentEnabled >= MAX_DIAL_SLOTS) {
+      return; // Could also show a toast/alert here
+    }
+    const newSettings = {
+      ...settings,
+      dialTools: {
+        ...settings.dialTools,
+        [tool]: !settings.dialTools[tool]
+      }
+    };
+    saveSettings(newSettings);
+  };
+  const toggleFloatingTool = tool => {
+    const newSettings = {
+      ...settings,
+      floatingTools: {
+        ...settings.floatingTools,
+        [tool]: !settings.floatingTools[tool]
+      }
+    };
+    saveSettings(newSettings);
+  };
+  const toggleGlobalSetting = setting => {
+    const newSettings = {
+      ...settings,
+      globalSettings: {
+        ...settings.globalSettings,
+        [setting]: !settings.globalSettings?.[setting]
+      }
+    };
+    saveSettings(newSettings);
+  };
+  const handleClearStorage = async () => {
+    setIsClearing(true);
+    setClearSuccess(false);
+    try {
+      await persistentStorage.clear();
+      setClearSuccess(true);
+      // Reset settings to defaults after clearing
+      setSettings(defaultSettings);
+      settingsBus.emit(defaultSettings);
+      // Reset success state after 2 seconds
+      setTimeout(() => setClearSuccess(false), 2000);
+    } catch (error) {
+      console.error("Failed to clear storage:", error);
+    } finally {
+      setIsClearing(false);
+    }
+  };
+
+  // Get the enabled tools as arrays for display and copy
+  const enabledConfig = useMemo(() => {
+    const enabledFloating = Object.entries(settings.floatingTools).filter(([_, enabled]) => enabled).map(([id]) => id);
+    const enabledDial = Object.entries(settings.dialTools).filter(([_, enabled]) => enabled).map(([id]) => id);
+    return {
+      floating: enabledFloating,
+      dial: enabledDial
+    };
+  }, [settings]);
+
+  // Generate exportable code snippet from current settings
+  // Only outputs the defaultFloatingTools and defaultDialTools props
+  // so users can add them to their existing FloatingDevTools config
+  const generateConfigCode = useCallback(() => {
+    const {
+      floating,
+      dial
+    } = enabledConfig;
+
+    // Build only the default config props (not the full component)
+    const props = [];
+    if (floating.length > 0) {
+      const floatingStr = floating.map(id => `'${id}'`).join(', ');
+      props.push(`defaultFloatingTools={[${floatingStr}]}`);
+    }
+    if (dial.length > 0) {
+      const dialStr = dial.map(id => `'${id}'`).join(', ');
+      props.push(`defaultDialTools={[${dialStr}]}`);
+    }
+    if (props.length === 0) {
+      return `// No tools enabled`;
+    }
+    return props.join('\n');
+  }, [enabledConfig]);
+  const handleCopyConfig = async () => {
+    const code = generateConfigCode();
+    const success = await copyToClipboard(code);
+    if (success) {
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    }
+  };
+  const handleRemoveDevice = async (deviceId, deviceName, isCurrentDevice) => {
+    if (!deactivateDevice) return;
+    const message = isCurrentDevice ? "This will remove your current device. You'll need to re-register to use Pro features on this device." : `Remove "${deviceName}" from your license?`;
+    const {
+      Alert
+    } = require("react-native");
+    const doRemove = await new Promise(resolve => {
+      Alert.alert("Remove Device", message, [{
+        text: "Cancel",
+        style: "cancel",
+        onPress: () => resolve(false)
+      }, {
+        text: "Remove",
+        style: "destructive",
+        onPress: () => resolve(true)
+      }]);
+    });
+    if (!doRemove) return;
+    setDeactivatingDeviceId(deviceId);
+    try {
+      await deactivateDevice(deviceId);
+    } catch (error) {
+      console.error("Failed to remove device:", error);
+    } finally {
+      setDeactivatingDeviceId(null);
+    }
+  };
+  const handleRegisterDevice = () => {
+    // Open the license modal in device registration mode (skip license key entry)
+    setLicenseModalForDeviceRegistration(true);
+    setShowLicenseModal(true);
+  };
+  const formatDeviceDate = date => {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    if (diffDays === 0) return "Today";
+    if (diffDays === 1) return "Yesterday";
+    if (diffDays < 7) return `${diffDays} days ago`;
+    return date.toLocaleDateString(undefined, {
+      month: "short",
+      day: "numeric",
+      year: date.getFullYear() !== now.getFullYear() ? "numeric" : undefined
+    });
+  };
+
+  // Modal is fixed to bottom sheet mode
+  const handleModeChange = useCallback(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+  const getToolDescription = tool => {
+    // Get description from availableApps
+    const app = availableApps.find(a => a.id === tool);
+    if (app?.description) {
+      return app.description;
+    }
+    if (tool === "environment") {
+      return "Environment badge.";
+    }
+    return "";
+  };
+  const getToolLabel = tool => {
+    if (tool === "environment") {
+      return "ENV BADGE";
+    }
+    const app = availableApps.find(a => a.id === tool);
+    return app?.name ?? tool.toUpperCase().replace(/_/g, " ");
+  };
+
+  // Clean tool card renderer - unified Buoy theme
+  const renderToolCard = (keyName, value, disabled, onToggle) => {
+    const getToolIcon = tool => {
+      switch (tool) {
+        case "query":
+          return /*#__PURE__*/_jsx(QueryIcon, {
+            size: 16
+          });
+        case "env":
+          return /*#__PURE__*/_jsx(EnvIcon, {
+            size: 16
+          });
+        case "sentry":
+          return /*#__PURE__*/_jsx(SentryBugIcon, {
+            size: 16,
+            colorPreset: "red",
+            noBackground: true
+          });
+        case "storage":
+          return /*#__PURE__*/_jsx(StorageIcon, {
+            size: 16
+          });
+        case "wifi":
+        case "query-wifi-toggle":
+          // Support both IDs for wifi toggle
+          return /*#__PURE__*/_jsx(WifiCircuitIcon, {
+            size: 16,
+            colorPreset: "green",
+            strength: 4,
+            noBackground: true
+          });
+        case "route-events":
+          return /*#__PURE__*/_jsx(RoutesIcon, {
+            size: 16
+          });
+        case "network":
+          return /*#__PURE__*/_jsx(NetworkIcon, {
+            size: 16
+          });
+        case "environment":
+          return /*#__PURE__*/_jsx(EnvIcon, {
+            size: 16
+          });
+        case "debug-borders":
+          return /*#__PURE__*/_jsx(Layers, {
+            size: 16,
+            color: buoyColors.primary
+          });
+        case "highlight-updates":
+          return /*#__PURE__*/_jsx(RenderCountIcon, {
+            size: 16,
+            color: buoyColors.primary
+          });
+        case "highlight-updates-modal":
+          return /*#__PURE__*/_jsx(HighlighterIcon, {
+            size: 16
+          });
+        case "benchmark":
+          return /*#__PURE__*/_jsx(BenchmarkIcon, {
+            size: 16,
+            color: buoyColors.textSecondary
+          });
+        default:
+          return /*#__PURE__*/_jsx(Info, {
+            size: 16,
+            color: buoyColors.textSecondary
+          });
+      }
+    };
+    return /*#__PURE__*/_jsx(TouchableOpacity, {
+      activeOpacity: disabled ? 1 : 0.85,
+      onPress: () => !disabled && onToggle(),
+      style: {
+        marginBottom: 8,
+        opacity: disabled ? 0.5 : 1
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.glassCard, value && styles.glassCardActive],
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.glassCardInner,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.iconContainer, value && styles.iconContainerActive],
+            children: getToolIcon(keyName)
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.toolInfo,
+            children: [/*#__PURE__*/_jsxs(Text, {
+              style: [styles.toolName, value && styles.toolNameActive],
+              children: [getToolLabel(keyName), disabled ? " (MAX 6)" : ""]
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.toolDescription,
+              numberOfLines: 1,
+              children: getToolDescription(keyName)
+            })]
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.pillToggle, value ? styles.pillToggleOn : styles.pillToggleOff, disabled && {
+              opacity: 0.5
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.pillToggleText, value ? styles.pillToggleTextOn : styles.pillToggleTextOff],
+              children: value ? "ON" : "OFF"
+            })
+          })]
+        })
+      })
+    }, keyName);
+  };
+
+  // Toggle expanded state for a setting card
+  const toggleSettingExpanded = settingKey => {
+    setExpandedSettings(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(settingKey)) {
+        newSet.delete(settingKey);
+      } else {
+        newSet.add(settingKey);
+      }
+      return newSet;
+    });
+  };
+
+  // Render a global setting toggle card with expandable description
+  const renderGlobalSettingCard = (settingKey, label, category, shortDescription, fullDescription, recommendation) => {
+    const value = settings.globalSettings?.[settingKey] ?? false;
+    const isExpanded = expandedSettings.has(settingKey);
+    const color = buoyColors.primary;
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        marginBottom: 10
+      },
+      children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+        activeOpacity: 0.85,
+        onPress: () => toggleSettingExpanded(settingKey),
+        style: [styles.expandableCard, isExpanded && {
+          borderColor: color,
+          borderWidth: 2,
+          shadowColor: color,
+          shadowOpacity: 0.8,
+          shadowRadius: 20,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          elevation: 10,
+          transform: [{
+            scale: 1.01
+          }]
+        }],
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.expandableCardHeader,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.expandableCardCategory,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.expandableCardCategoryText,
+              children: category
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.expandableCardTitle,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.expandableCardTitleText,
+              children: label
+            }), !isExpanded && /*#__PURE__*/_jsx(Text, {
+              style: styles.expandableCardSubtitle,
+              numberOfLines: 1,
+              children: shortDescription
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.expandableCardActions,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => toggleGlobalSetting(settingKey),
+              activeOpacity: 0.8,
+              style: [styles.pillToggle, {
+                backgroundColor: value ? `${buoyColors.success}33` : buoyColors.hover,
+                borderColor: value ? `${buoyColors.success}88` : buoyColors.border,
+                shadowColor: value ? buoyColors.success : "transparent",
+                shadowOffset: {
+                  width: 0,
+                  height: 0
+                },
+                shadowOpacity: value ? 0.4 : 0,
+                shadowRadius: value ? 8 : 0
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.pillToggleText, {
+                  color: value ? buoyColors.success : buoyColors.textMuted
+                }],
+                children: value ? "ON" : "OFF"
+              })
+            }), isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+              size: 18,
+              color: "#7F91B2"
+            }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+              size: 18,
+              color: "#7F91B2"
+            })]
+          })]
+        }), isExpanded && /*#__PURE__*/_jsxs(View, {
+          style: styles.expandableCardBody,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.expandableCardSection,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.expandableCardSectionTitle,
+              children: "DESCRIPTION"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.expandableCardSectionText,
+              children: fullDescription
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.expandableCardSection,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.expandableCardSectionTitle,
+              children: "RECOMMENDATION"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.expandableCardSectionText,
+              children: recommendation
+            })]
+          })]
+        })]
+      })
+    }, settingKey);
+  };
+  const renderContent = () => /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      contentContainerStyle: styles.scrollContainer,
+      children: [activeTab === "dial" && /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: (() => {
+          const enabledCount = Object.values(settings.dialTools).filter(v => v).length;
+          const isAtLimit = enabledCount >= MAX_DIAL_SLOTS;
+          return Object.entries(settings.dialTools).map(([key, value]) => {
+            const isDisabled = !value && isAtLimit;
+            return renderToolCard(key, value, isDisabled, () => toggleDialTool(key));
+          });
+        })()
+      }), activeTab === "floating" && /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: Object.entries(settings.floatingTools).map(([key, value]) => renderToolCard(key, value, false, () => toggleFloatingTool(key)))
+      }), activeTab === "settings" && /*#__PURE__*/_jsxs(View, {
+        style: styles.section,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: [styles.storageStatusCard, isStorageExpanded && {
+            borderColor: storageBackend === "filesystem" ? buoyColors.success + "60" : storageBackend === "asyncstorage" ? buoyColors.warning + "60" : buoyColors.error + "60"
+          }],
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            activeOpacity: 0.8,
+            onPress: () => setIsStorageExpanded(!isStorageExpanded),
+            children: /*#__PURE__*/_jsxs(View, {
+              style: styles.storageStatusHeader,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.storageStatusIcon, {
+                  backgroundColor: storageBackend === "filesystem" ? buoyColors.success + "15" : storageBackend === "asyncstorage" ? buoyColors.warning + "15" : buoyColors.error + "15"
+                }],
+                children: /*#__PURE__*/_jsx(Database, {
+                  size: 18,
+                  color: storageBackend === "filesystem" ? buoyColors.success : storageBackend === "asyncstorage" ? buoyColors.warning : buoyColors.error
+                })
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.storageStatusInfo,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.storageStatusLabel,
+                  children: "STORAGE TYPE"
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.storageStatusBadgeContainer,
+                  children: [/*#__PURE__*/_jsx(View, {
+                    style: [styles.storageStatusBadge, {
+                      backgroundColor: storageBackend === "filesystem" ? buoyColors.success + "20" : storageBackend === "asyncstorage" ? buoyColors.warning + "20" : buoyColors.error + "20",
+                      borderColor: storageBackend === "filesystem" ? buoyColors.success + "60" : storageBackend === "asyncstorage" ? buoyColors.warning + "60" : buoyColors.error + "60"
+                    }],
+                    children: /*#__PURE__*/_jsx(Text, {
+                      style: [styles.storageStatusBadgeText, {
+                        color: storageBackend === "filesystem" ? buoyColors.success : storageBackend === "asyncstorage" ? buoyColors.warning : buoyColors.error
+                      }],
+                      children: storageBackend === "filesystem" ? "FILE SYSTEM" : storageBackend === "asyncstorage" ? "ASYNC STORAGE" : storageBackend === "memory" ? "MEMORY" : "LOADING..."
+                    })
+                  }), storageBackend === "filesystem" && /*#__PURE__*/_jsx(CheckCircle2, {
+                    size: 14,
+                    color: buoyColors.success
+                  }), storageBackend === "asyncstorage" && /*#__PURE__*/_jsx(AlertTriangle, {
+                    size: 14,
+                    color: buoyColors.warning
+                  }), storageBackend === "memory" && /*#__PURE__*/_jsx(AlertTriangle, {
+                    size: 14,
+                    color: buoyColors.error
+                  })]
+                })]
+              }), isStorageExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+                size: 18,
+                color: buoyColors.textMuted
+              }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+                size: 18,
+                color: buoyColors.textMuted
+              })]
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.storageStatusDescription,
+            children: storageBackend === "filesystem" ? "Settings persist independently and survive AsyncStorage.clear() calls during logout." : storageBackend === "asyncstorage" ? "Settings may be lost if AsyncStorage is cleared during logout." : storageBackend === "memory" ? "Settings are stored in memory only and will be lost on app restart." : "Checking storage backend..."
+          }), storageBackend === "asyncstorage" && /*#__PURE__*/_jsxs(View, {
+            style: styles.adviceHint,
+            children: [/*#__PURE__*/_jsx(Zap, {
+              size: 14,
+              color: buoyColors.warning
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: styles.adviceHintText,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.adviceHintBold,
+                children: "Tip:"
+              }), " Install", " ", /*#__PURE__*/_jsx(Text, {
+                style: styles.adviceHintCode,
+                children: "expo-file-system"
+              }), " to persist settings through logout flows."]
+            })]
+          }), storageBackend === "memory" && /*#__PURE__*/_jsxs(View, {
+            style: styles.adviceHintsContainer,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: [styles.adviceHint, {
+                backgroundColor: buoyColors.error + "10"
+              }],
+              children: [/*#__PURE__*/_jsx(AlertTriangle, {
+                size: 14,
+                color: buoyColors.error
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: [styles.adviceHintText, {
+                  color: buoyColors.error
+                }],
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.adviceHintBold,
+                  children: "No persistent storage available!"
+                }), " Settings will reset on every app restart."]
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.adviceHint,
+              children: [/*#__PURE__*/_jsx(Zap, {
+                size: 14,
+                color: buoyColors.primary
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: styles.adviceHintText,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.adviceHintBold,
+                  children: "Best:"
+                }), " Install", " ", /*#__PURE__*/_jsx(Text, {
+                  style: styles.adviceHintCode,
+                  children: "expo-file-system"
+                }), " for logout-safe persistence."]
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.adviceHint,
+              children: [/*#__PURE__*/_jsx(HardDrive, {
+                size: 14,
+                color: buoyColors.textMuted
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: styles.adviceHintText,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.adviceHintBold,
+                  children: "Alternative:"
+                }), " Install", " ", /*#__PURE__*/_jsx(Text, {
+                  style: styles.adviceHintCode,
+                  children: "@react-native-async-storage/async-storage"
+                }), " for basic persistence."]
+              })]
+            })]
+          }), isStorageExpanded && /*#__PURE__*/_jsxs(View, {
+            style: styles.storageExpandedContent,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.storageExpandedHeader,
+              children: [/*#__PURE__*/_jsx(FileText, {
+                size: 14,
+                color: buoyColors.primary
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.storageExpandedTitle,
+                children: "SAVED SETTINGS"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.storageExpandedCount,
+                children: savedKeysLoading ? "..." : `${savedKeys.length} keys`
+              })]
+            }), savedKeysLoading ? /*#__PURE__*/_jsx(Text, {
+              style: styles.storageKeyItem,
+              children: "Loading..."
+            }) : savedKeys.length === 0 ? /*#__PURE__*/_jsx(Text, {
+              style: styles.storageKeyItemEmpty,
+              children: "No settings saved yet"
+            }) : /*#__PURE__*/_jsx(ScrollView, {
+              style: styles.storageKeysList,
+              nestedScrollEnabled: true,
+              showsVerticalScrollIndicator: true,
+              children: savedKeys.map(key => /*#__PURE__*/_jsx(View, {
+                style: styles.storageKeyItem,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.storageKeyText,
+                  numberOfLines: 1,
+                  children: key.replace("@react_buoy_", "")
+                })
+              }, key))
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.clearStorageButton, isClearing && styles.clearStorageButtonDisabled, clearSuccess && styles.clearStorageButtonSuccess],
+            onPress: handleClearStorage,
+            disabled: isClearing,
+            activeOpacity: 0.7,
+            children: [clearSuccess ? /*#__PURE__*/_jsx(CheckCircle2, {
+              size: 14,
+              color: buoyColors.success
+            }) : /*#__PURE__*/_jsx(Trash2, {
+              size: 14,
+              color: isClearing ? buoyColors.textMuted : buoyColors.error
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.clearStorageButtonText, clearSuccess && {
+                color: buoyColors.success
+              }, isClearing && {
+                color: buoyColors.textMuted
+              }],
+              children: clearSuccess ? "CLEARED" : isClearing ? "CLEARING..." : "CLEAR ALL SETTINGS"
+            })]
+          })]
+        }), renderGlobalSettingCard("enableSharedModalDimensions", "SHARED MODAL SIZE", "MODAL", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately. Enable only if you prefer uniform modal sizes across all dev tools."), isDevelopmentMode && /*#__PURE__*/_jsxs(View, {
+          style: styles.exportConfigCard,
+          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+            activeOpacity: 0.85,
+            onPress: () => setIsExportExpanded(!isExportExpanded),
+            style: styles.exportConfigHeader,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.exportConfigIconContainer,
+              children: /*#__PURE__*/_jsx(FileCode, {
+                size: 18,
+                color: buoyColors.success
+              })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.exportConfigInfo,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.exportConfigLabel,
+                children: "EXPORT CONFIG"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.exportConfigHint,
+                children: "Save your settings to code"
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.exportConfigActions,
+              children: isExportExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+                size: 18,
+                color: buoyColors.textMuted
+              }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+                size: 18,
+                color: buoyColors.textMuted
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.exportHintBanner,
+            children: [/*#__PURE__*/_jsx(Zap, {
+              size: 14,
+              color: buoyColors.warning
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: styles.exportHintText,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.exportHintBold,
+                children: "New!"
+              }), " Configure your tools above, then export to set team defaults."]
+            })]
+          }), isExportExpanded && /*#__PURE__*/_jsxs(View, {
+            style: styles.exportCodeContainer,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.exportCodeHeader,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.exportCodeTitle,
+                children: "PROPS TO ADD"
+              })
+            }), enabledConfig.floating.length > 0 && /*#__PURE__*/_jsxs(View, {
+              style: styles.exportJsonBlock,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonProp,
+                children: "defaultFloatingTools"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonEquals,
+                children: "="
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonBracket,
+                children: "{"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonArrayBracket,
+                children: "["
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.exportJsonArrayContent,
+                children: enabledConfig.floating.map((id, index) => /*#__PURE__*/_jsxs(View, {
+                  style: styles.exportJsonArrayItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.exportJsonString,
+                    children: ["'", id, "'"]
+                  }), index < enabledConfig.floating.length - 1 && /*#__PURE__*/_jsx(Text, {
+                    style: styles.exportJsonComma,
+                    children: ","
+                  })]
+                }, id))
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonArrayBracket,
+                children: "]"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonBracket,
+                children: "}"
+              })]
+            }), enabledConfig.dial.length > 0 && /*#__PURE__*/_jsxs(View, {
+              style: [styles.exportJsonBlock, enabledConfig.floating.length > 0 && {
+                marginTop: 8
+              }],
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonProp,
+                children: "defaultDialTools"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonEquals,
+                children: "="
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonBracket,
+                children: "{"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonArrayBracket,
+                children: "["
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.exportJsonArrayContent,
+                children: enabledConfig.dial.map((id, index) => /*#__PURE__*/_jsxs(View, {
+                  style: styles.exportJsonArrayItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.exportJsonString,
+                    children: ["'", id, "'"]
+                  }), index < enabledConfig.dial.length - 1 && /*#__PURE__*/_jsx(Text, {
+                    style: styles.exportJsonComma,
+                    children: ","
+                  })]
+                }, id))
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonArrayBracket,
+                children: "]"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonBracket,
+                children: "}"
+              })]
+            }), enabledConfig.floating.length === 0 && enabledConfig.dial.length === 0 && /*#__PURE__*/_jsx(View, {
+              style: styles.exportJsonBlock,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.exportJsonComment,
+                children: "// No tools enabled"
+              })
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: styles.exportCodeDescription,
+              children: ["Add these props to your existing", " ", /*#__PURE__*/_jsx(Text, {
+                style: styles.exportCodeInline,
+                children: "<FloatingDevTools />"
+              }), " ", "component to set team defaults."]
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.exportCopyButton, copySuccess && styles.exportCopyButtonSuccess],
+            onPress: handleCopyConfig,
+            activeOpacity: 0.7,
+            children: [copySuccess ? /*#__PURE__*/_jsx(CheckCircle2, {
+              size: 14,
+              color: buoyColors.success
+            }) : /*#__PURE__*/_jsx(Copy, {
+              size: 14,
+              color: buoyColors.success
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.exportCopyButtonText, copySuccess && {
+                color: buoyColors.success
+              }],
+              children: copySuccess ? "COPIED!" : "COPY CONFIG TO CLIPBOARD"
+            })]
+          })]
+        })]
+      }), activeTab === "pro" && /*#__PURE__*/_jsx(View, {
+        style: styles.proContainer,
+        children: isPro ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.proSection,
+            children: [/*#__PURE__*/_jsxs(SectionHeader, {
+              children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+                icon: Zap,
+                color: buoyColors.primary,
+                size: 12
+              }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+                children: "LICENSE STATUS"
+              }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
+                count: "Active",
+                color: buoyColors.success
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.proSectionContent,
+              children: /*#__PURE__*/_jsxs(View, {
+                style: styles.proStatsRow,
+                children: [/*#__PURE__*/_jsxs(View, {
+                  style: styles.proStatItem,
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: styles.proStatValue,
+                    children: seats?.used ?? 0
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.proStatLabel,
+                    children: "USED"
+                  })]
+                }), /*#__PURE__*/_jsx(View, {
+                  style: styles.proStatDivider
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.proStatItem,
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: styles.proStatValue,
+                    children: seats?.total ?? "∞"
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.proStatLabel,
+                    children: "LIMIT"
+                  })]
+                }), /*#__PURE__*/_jsx(View, {
+                  style: styles.proStatDivider
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.proStatItem,
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: [styles.proStatValue, (seats?.remaining ?? 0) <= 0 && styles.proStatValueDanger],
+                    children: seats?.remaining ?? "∞"
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.proStatLabel,
+                    children: "AVAILABLE"
+                  })]
+                })]
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.proSection,
+            children: [/*#__PURE__*/_jsxs(SectionHeader, {
+              children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+                icon: Smartphone,
+                color: buoyColors.info,
+                size: 12
+              }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+                children: "REGISTERED DEVICES"
+              }), devices.length > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
+                count: devices.length,
+                color: buoyColors.info
+              }), refreshDevices && /*#__PURE__*/_jsx(SectionHeader.Actions, {
+                children: /*#__PURE__*/_jsx(TouchableOpacity, {
+                  onPress: () => refreshDevices(),
+                  disabled: devicesLoading,
+                  style: {
+                    marginLeft: 8
+                  },
+                  children: /*#__PURE__*/_jsx(RefreshCw, {
+                    size: 14,
+                    color: devicesLoading ? buoyColors.textMuted : buoyColors.textSecondary
+                  })
+                })
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.proSectionContent,
+              children: [devicesLoading && devices.length === 0 ? /*#__PURE__*/_jsx(View, {
+                style: styles.proEmptyState,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.proEmptyStateText,
+                  children: "Loading devices..."
+                })
+              }) : devicesError ? /*#__PURE__*/_jsxs(View, {
+                style: styles.proErrorState,
+                children: [/*#__PURE__*/_jsx(AlertTriangle, {
+                  size: 16,
+                  color: buoyColors.error
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.proErrorStateText,
+                  children: devicesError
+                })]
+              }) : devices.length === 0 ? /*#__PURE__*/_jsxs(View, {
+                style: styles.proEmptyState,
+                children: [/*#__PURE__*/_jsx(Smartphone, {
+                  size: 24,
+                  color: buoyColors.textMuted
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.proEmptyStateText,
+                  children: "No devices registered"
+                })]
+              }) : /*#__PURE__*/_jsx(View, {
+                style: styles.proDevicesList,
+                children: devices.map(device => /*#__PURE__*/_jsxs(View, {
+                  style: [styles.proDeviceRow, device.isCurrentDevice && styles.proDeviceRowCurrent],
+                  children: [/*#__PURE__*/_jsx(View, {
+                    style: styles.proDeviceIcon,
+                    children: /*#__PURE__*/_jsx(Smartphone, {
+                      size: 16,
+                      color: buoyColors.text
+                    })
+                  }), /*#__PURE__*/_jsxs(View, {
+                    style: styles.proDeviceInfo,
+                    children: [/*#__PURE__*/_jsxs(View, {
+                      style: styles.proDeviceNameRow,
+                      children: [/*#__PURE__*/_jsx(Text, {
+                        style: styles.proDeviceName,
+                        numberOfLines: 1,
+                        children: device.name
+                      }), device.isCurrentDevice && /*#__PURE__*/_jsx(View, {
+                        style: styles.proDeviceBadge,
+                        children: /*#__PURE__*/_jsx(Text, {
+                          style: styles.proDeviceBadgeText,
+                          children: "THIS DEVICE"
+                        })
+                      })]
+                    }), /*#__PURE__*/_jsxs(Text, {
+                      style: styles.proDeviceDetails,
+                      children: [device.platform, device.osVersion ? ` ${device.osVersion}` : "", device.model ? ` • ${device.model}` : ""]
+                    }), /*#__PURE__*/_jsxs(Text, {
+                      style: styles.proDeviceDate,
+                      children: ["Registered ", formatDeviceDate(device.registeredAt)]
+                    })]
+                  }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                    style: styles.proDeviceRemoveBtn,
+                    onPress: () => handleRemoveDevice(device.id, device.name, device.isCurrentDevice),
+                    disabled: deactivatingDeviceId === device.id,
+                    children: deactivatingDeviceId === device.id ? /*#__PURE__*/_jsx(RefreshCw, {
+                      size: 14,
+                      color: buoyColors.textMuted
+                    }) : /*#__PURE__*/_jsx(Trash2, {
+                      size: 14,
+                      color: buoyColors.error
+                    })
+                  })]
+                }, device.id))
+              }), !isCurrentDeviceRegistered && /*#__PURE__*/_jsxs(TouchableOpacity, {
+                style: styles.proRegisterDeviceBtn,
+                onPress: handleRegisterDevice,
+                disabled: devicesLoading,
+                activeOpacity: 0.7,
+                children: [/*#__PURE__*/_jsx(Plus, {
+                  size: 14,
+                  color: buoyColors.primary
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.proRegisterDeviceBtnText,
+                  children: "Register This Device"
+                })]
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.proSignOutBtn,
+            onPress: () => {
+              const {
+                Alert
+              } = require("react-native");
+              Alert.alert("Sign Out of Pro?", "This will:\n\n• Remove your license key from this device\n• Deactivate this device from your license\n• Free up a seat for another device\n\nYou can sign back in anytime with your license key.", [{
+                text: "Cancel",
+                style: "cancel"
+              }, {
+                text: "Sign Out",
+                style: "destructive",
+                onPress: () => license?.clearLicense()
+              }]);
+            },
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.proSignOutBtnText,
+              children: "Sign Out of Pro"
+            })
+          })]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.proSection,
+            children: [/*#__PURE__*/_jsxs(SectionHeader, {
+              children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+                icon: Zap,
+                color: buoyColors.textMuted,
+                size: 12
+              }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+                children: "LICENSE STATUS"
+              }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
+                count: "Free",
+                color: buoyColors.textMuted
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.proSectionContent,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.proFreeDescription,
+                children: "Upgrade to Pro to unlock all features and support development."
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.proSection,
+            children: [/*#__PURE__*/_jsxs(SectionHeader, {
+              children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+                icon: CheckCircle2,
+                color: buoyColors.primary,
+                size: 12
+              }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+                children: "PRO FEATURES"
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.proSectionContent,
+              children: /*#__PURE__*/_jsxs(View, {
+                style: styles.proFeaturesList,
+                children: [/*#__PURE__*/_jsxs(View, {
+                  style: styles.proFeatureItem,
+                  children: [/*#__PURE__*/_jsx(CheckCircle2, {
+                    size: 14,
+                    color: buoyColors.primary
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.proFeatureText,
+                    children: "Advanced Settings"
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.proFeatureItem,
+                  children: [/*#__PURE__*/_jsx(CheckCircle2, {
+                    size: 14,
+                    color: buoyColors.primary
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.proFeatureText,
+                    children: "Export Configuration"
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.proFeatureItem,
+                  children: [/*#__PURE__*/_jsx(CheckCircle2, {
+                    size: 14,
+                    color: buoyColors.primary
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.proFeatureText,
+                    children: "Team Defaults"
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.proFeatureItem,
+                  children: [/*#__PURE__*/_jsx(CheckCircle2, {
+                    size: 14,
+                    color: buoyColors.primary
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.proFeatureText,
+                    children: "Priority Support"
+                  })]
+                })]
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: styles.proUpgradeBtn,
+            onPress: () => setShowLicenseModal(true),
+            activeOpacity: 0.8,
+            children: [/*#__PURE__*/_jsx(Zap, {
+              size: 16,
+              color: buoyColors.base
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.proUpgradeBtnText,
+              children: "Upgrade to Pro"
+            })]
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsx(LicenseEntryModal, {
+      visible: showLicenseModal,
+      onClose: () => {
+        setShowLicenseModal(false);
+        setLicenseModalForDeviceRegistration(false);
+      },
+      onSuccess: () => {
+        setShowLicenseModal(false);
+        setLicenseModalForDeviceRegistration(false);
+      },
+      license: license,
+      startAtDeviceRegistration: licenseModalForDeviceRegistration,
+      initialExistingDevices: licenseModalForDeviceRegistration ? devices : [],
+      initialMaxDevices: licenseModalForDeviceRegistration ? seats?.total ?? undefined : undefined,
+      initialCurrentDeviceCount: licenseModalForDeviceRegistration ? seats?.used ?? undefined : undefined
+    })]
+  });
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    header: {
+      showToggleButton: false,
+      customContent: /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "",
+          noMargin: true,
+          children: /*#__PURE__*/_jsx(TabSelector, {
+            tabs: [{
+              key: "dial",
+              label: "DIAL"
+            }, {
+              key: "floating",
+              label: "FLOATING"
+            }, {
+              key: "settings",
+              label: "SETTINGS"
+            }, {
+              key: "pro",
+              label: "PRO"
+            }],
+            activeTab: activeTab,
+            onTabChange: tab => setActiveTab(tab)
+          })
+        }), /*#__PURE__*/_jsx(ModalHeader.Actions, {})]
+      })
+    },
+    initialMode: "bottomSheet",
+    onModeChange: handleModeChange,
+    persistenceKey: devToolsStorageKeys.settings.root(),
+    enablePersistence: true,
+    maxHeight: screenHeight - insets.top,
+    initialHeight: modalHeight,
+    initialFloatingPosition: {
+      x: (screenWidth - modalWidth) / 2,
+      y: insets.top + 20
+    },
+    enableGlitchEffects: true,
+    children: renderContent()
+  });
+};
+
+// Basic default settings for the hook (when apps are not available and no defaults configured)
+const basicDefaultSettings = {
+  dialTools: {},
+  floatingTools: {
+    environment: false
+  },
+  globalSettings: {
+    enableSharedModalDimensions: false
+  }
+};
+
+/**
+ * Creates default settings from the team configuration arrays.
+ * Used by the hook when no stored settings exist.
+ */
+const createDefaultsFromConfig = (defaultFloatingTools, defaultDialTools) => {
+  const floatingSet = new Set(defaultFloatingTools ?? []);
+  const dialSet = new Set(defaultDialTools ?? []);
+
+  // Build dial tools record from defaults
+  const dialTools = {};
+  for (const id of dialSet) {
+    dialTools[id] = true;
+  }
+
+  // Build floating tools record from defaults
+  const floatingTools = {
+    environment: floatingSet.has('environment')
+  };
+  for (const id of floatingSet) {
+    if (id !== 'environment') {
+      floatingTools[id] = true;
+    }
+  }
+  return {
+    dialTools: enforceDialLimit(dialTools),
+    floatingTools,
+    globalSettings: {
+      enableSharedModalDimensions: false
+    }
+  };
+};
+
+/**
+ * Convenience hook for accessing persisted dev tools settings. Subscribes to the internal
+ * event bus so all surfaces stay in sync when the modal saves new preferences.
+ *
+ * When no saved settings exist, the hook uses the default configuration from
+ * the DefaultConfigProvider (if available) to determine initial tool states.
+ */
+export const useDevToolsSettings = () => {
+  // Get team default configuration from context
+  const {
+    defaultFloatingTools,
+    defaultDialTools
+  } = useDefaultConfig();
+
+  // Compute the effective defaults based on team configuration
+  const effectiveDefaults = useMemo(() => {
+    if (!defaultFloatingTools && !defaultDialTools) {
+      return basicDefaultSettings;
+    }
+    return createDefaultsFromConfig(defaultFloatingTools, defaultDialTools);
+  }, [defaultFloatingTools, defaultDialTools]);
+  const [settings, setSettings] = useState(effectiveDefaults);
+  const loadSettings = useCallback(async () => {
+    try {
+      const savedSettings = await safeGetItem(STORAGE_KEY);
+      if (savedSettings) {
+        const parsed = JSON.parse(savedSettings);
+        const merged = mergeWithDefaults(effectiveDefaults, parsed);
+        setSettings(merged);
+        return;
+      }
+      // No saved settings - use the effective defaults (including team config)
+      setSettings(effectiveDefaults);
+    } catch (error) {
+      console.error("Failed to load dev tools settings:", error);
+      setSettings(effectiveDefaults);
+    }
+  }, [effectiveDefaults]);
+  useEffect(() => {
+    loadSettings();
+    // Subscribe to settings changes
+    const unsub = settingsBus.addListener(payload => {
+      try {
+        if (payload) {
+          setSettings(payload);
+        }
+      } catch (err) {
+        // Listener errors are intentionally swallowed to avoid breaking subscribers
+      }
+    });
+    return () => {
+      unsub();
+    };
+  }, [loadSettings]);
+
+  // Refresh settings when component using this hook becomes visible
+  const refreshSettings = useCallback(() => {
+    loadSettings();
+  }, [loadSettings]);
+  return {
+    settings,
+    refreshSettings
+  };
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  // Header styles matching React Query modal exactly
+  headerContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 12
+  },
+  tabNavigationContainer: {
+    flex: 1,
+    flexDirection: "row",
+    backgroundColor: buoyColors.hover,
+    borderRadius: 6,
+    padding: 2,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    justifyContent: "space-evenly"
+  },
+  tabButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    marginHorizontal: 1
+  },
+  tabButtonActive: {
+    backgroundColor: buoyColors.primary + "20",
+    borderWidth: 1,
+    borderColor: buoyColors.primary
+  },
+  tabButtonInactive: {
+    backgroundColor: "transparent"
+  },
+  tabButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  tabButtonTextActive: {
+    color: buoyColors.primary
+  },
+  tabButtonTextInactive: {
+    color: buoyColors.textMuted
+  },
+  // Scroll content
+  scrollContent: {
+    flex: 1
+  },
+  scrollContainer: {
+    paddingTop: 16,
+    paddingBottom: 24
+  },
+  // Sections
+  section: {
+    marginHorizontal: 16,
+    marginBottom: 24
+  },
+  sectionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 12,
+    paddingHorizontal: 4
+  },
+  sectionIndicator: {
+    width: 3,
+    height: 16,
+    borderRadius: 2,
+    backgroundColor: buoyColors.primary,
+    marginRight: 8,
+    shadowColor: buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 4
+  },
+  sectionTitle: {
+    flex: 1,
+    color: buoyColors.primary,
+    fontSize: 13,
+    fontWeight: "700",
+    letterSpacing: 1.2
+  },
+  sectionCount: {
+    color: buoyColors.textSecondary,
+    fontSize: 11,
+    opacity: 0.7
+  },
+  // Tool Cards - Clean unified Buoy theme
+  glassCard: {
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    backgroundColor: buoyColors.card,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  glassCardActive: {
+    borderColor: buoyColors.primary + "50",
+    backgroundColor: buoyColors.primary + "08"
+  },
+  glassCardInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  iconContainer: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconContainerActive: {
+    backgroundColor: buoyColors.primary + "20"
+  },
+  toolInfo: {
+    flex: 1
+  },
+  toolName: {
+    color: buoyColors.text,
+    fontWeight: "600",
+    fontSize: 13
+  },
+  toolNameActive: {
+    color: buoyColors.text
+  },
+  toolDescription: {
+    color: buoyColors.textMuted,
+    fontSize: 11,
+    marginTop: 2
+  },
+  pillToggle: {
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 6,
+    borderWidth: 1,
+    minWidth: 48,
+    alignItems: "center"
+  },
+  pillToggleOn: {
+    backgroundColor: buoyColors.primary + "20",
+    borderColor: buoyColors.primary
+  },
+  pillToggleOff: {
+    backgroundColor: buoyColors.hover,
+    borderColor: buoyColors.border
+  },
+  pillToggleText: {
+    fontWeight: "600",
+    fontSize: 11,
+    letterSpacing: 0.5
+  },
+  pillToggleTextOn: {
+    color: buoyColors.primary
+  },
+  pillToggleTextOff: {
+    color: buoyColors.textMuted
+  },
+  closeButton: {
+    marginLeft: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 6,
+    backgroundColor: buoyColors.error + "1A",
+    borderWidth: 1,
+    borderColor: buoyColors.error + "33"
+  },
+  closeButtonText: {
+    color: buoyColors.error,
+    fontSize: 14,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  },
+  // Expandable Settings Card styles
+  expandableCard: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    padding: 12
+  },
+  expandableCardHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  expandableCardCategory: {
+    backgroundColor: buoyColors.primary + "20",
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "40",
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4
+  },
+  expandableCardCategoryText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: buoyColors.primary,
+    letterSpacing: 0.5
+  },
+  expandableCardTitle: {
+    flex: 1,
+    paddingHorizontal: 4
+  },
+  expandableCardTitleText: {
+    fontFamily: "monospace",
+    fontSize: 12,
+    fontWeight: "700",
+    color: buoyColors.text
+  },
+  expandableCardSubtitle: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    marginTop: 2
+  },
+  expandableCardActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  expandableCardBody: {
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border + "50"
+  },
+  expandableCardSection: {
+    marginBottom: 12
+  },
+  expandableCardSectionTitle: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: buoyColors.primary,
+    letterSpacing: 1,
+    marginBottom: 6
+  },
+  expandableCardSectionText: {
+    fontSize: 12,
+    color: buoyColors.textSecondary,
+    lineHeight: 18
+  },
+  // Storage Status Card styles
+  storageStatusCard: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    padding: 12,
+    marginBottom: 10
+  },
+  storageStatusHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    marginBottom: 8
+  },
+  storageStatusIcon: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  storageStatusInfo: {
+    flex: 1
+  },
+  storageStatusLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: buoyColors.textMuted,
+    letterSpacing: 1,
+    marginBottom: 4
+  },
+  storageStatusBadgeContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  storageStatusBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    borderWidth: 1
+  },
+  storageStatusBadgeText: {
+    fontSize: 11,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  },
+  storageStatusDescription: {
+    fontSize: 11,
+    color: buoyColors.textMuted,
+    lineHeight: 16,
+    marginBottom: 12
+  },
+  clearStorageButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 6,
+    backgroundColor: buoyColors.error + "15",
+    borderWidth: 1,
+    borderColor: buoyColors.error + "40"
+  },
+  clearStorageButtonDisabled: {
+    opacity: 0.5
+  },
+  clearStorageButtonSuccess: {
+    backgroundColor: buoyColors.success + "15",
+    borderColor: buoyColors.success + "40"
+  },
+  clearStorageButtonText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: buoyColors.error,
+    letterSpacing: 0.5
+  },
+  // Advice hints
+  adviceHintsContainer: {
+    gap: 8,
+    marginBottom: 12
+  },
+  adviceHint: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 8,
+    backgroundColor: buoyColors.warning + "10",
+    borderRadius: 6,
+    padding: 10,
+    marginBottom: 8
+  },
+  adviceHintText: {
+    flex: 1,
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    lineHeight: 16
+  },
+  adviceHintBold: {
+    fontWeight: "700",
+    color: buoyColors.text
+  },
+  adviceHintCode: {
+    fontFamily: "monospace",
+    fontSize: 10,
+    color: buoyColors.info,
+    backgroundColor: buoyColors.info + "15",
+    paddingHorizontal: 4,
+    borderRadius: 3
+  },
+  // Expanded storage content
+  storageExpandedContent: {
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border + "50"
+  },
+  storageExpandedHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 10
+  },
+  storageExpandedTitle: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: buoyColors.primary,
+    letterSpacing: 1,
+    flex: 1
+  },
+  storageExpandedCount: {
+    fontSize: 10,
+    color: buoyColors.textMuted
+  },
+  storageKeysList: {
+    gap: 4,
+    maxHeight: 150
+  },
+  storageKeyItem: {
+    backgroundColor: buoyColors.hover,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.border + "50"
+  },
+  storageKeyItemEmpty: {
+    fontSize: 11,
+    color: buoyColors.textMuted,
+    fontStyle: "italic",
+    paddingVertical: 8
+  },
+  storageKeyText: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace"
+  },
+  // Export Config Card styles
+  exportConfigCard: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.success + "40",
+    padding: 12,
+    marginTop: 10
+  },
+  exportConfigHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  exportConfigIconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: buoyColors.success + "15",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  exportConfigInfo: {
+    flex: 1
+  },
+  exportConfigLabel: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: buoyColors.success,
+    letterSpacing: 0.5
+  },
+  exportConfigHint: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    marginTop: 2
+  },
+  exportConfigActions: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  exportHintBanner: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 8,
+    backgroundColor: buoyColors.warning + "10",
+    borderRadius: 6,
+    padding: 10,
+    marginTop: 12
+  },
+  exportHintText: {
+    flex: 1,
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    lineHeight: 16
+  },
+  exportHintBold: {
+    fontWeight: "700",
+    color: buoyColors.warning
+  },
+  exportCodeContainer: {
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border + "50"
+  },
+  exportCodeHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 8
+  },
+  exportCodeTitle: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: buoyColors.success,
+    letterSpacing: 1
+  },
+  exportCodeBlock: {
+    backgroundColor: buoyColors.hover,
+    borderRadius: 6,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: buoyColors.border + "50"
+  },
+  exportCodeText: {
+    fontSize: 11,
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    lineHeight: 18
+  },
+  exportCodeDescription: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    marginTop: 8,
+    lineHeight: 14
+  },
+  exportCodeInline: {
+    fontFamily: "monospace",
+    fontSize: 10,
+    color: buoyColors.info,
+    backgroundColor: buoyColors.info + "15",
+    paddingHorizontal: 4,
+    borderRadius: 3
+  },
+  exportCopyButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 6,
+    backgroundColor: buoyColors.success + "15",
+    borderWidth: 1,
+    borderColor: buoyColors.success + "40",
+    marginTop: 12
+  },
+  exportCopyButtonSuccess: {
+    backgroundColor: buoyColors.success + "25",
+    borderColor: buoyColors.success + "60"
+  },
+  exportCopyButtonText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: buoyColors.success,
+    letterSpacing: 0.5
+  },
+  // JSON-like viewer styles (syntax highlighting)
+  exportJsonBlock: {
+    backgroundColor: buoyColors.hover,
+    borderRadius: 6,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: buoyColors.border + "50",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 4
+  },
+  exportJsonProp: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: buoyColors.info,
+    // Cyan for prop names
+    fontWeight: "600"
+  },
+  exportJsonEquals: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: buoyColors.textMuted
+  },
+  exportJsonBracket: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: buoyColors.warning // Yellow for JSX brackets
+  },
+  exportJsonArrayBracket: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: buoyColors.text
+  },
+  exportJsonArrayContent: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 2
+  },
+  exportJsonArrayItem: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  exportJsonString: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: buoyColors.success // Green for strings
+  },
+  exportJsonComma: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: buoyColors.textMuted,
+    marginRight: 4
+  },
+  exportJsonComment: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: buoyColors.textMuted,
+    fontStyle: "italic"
+  },
+  // Pro tab styles - using buoyColors for consistency with other modals
+  proContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 24
+  },
+  proSection: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    marginBottom: 12,
+    overflow: "hidden"
+  },
+  proSectionContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16
+  },
+  proStatsRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 8
+  },
+  proStatItem: {
+    alignItems: "center",
+    paddingHorizontal: 20
+  },
+  proStatValue: {
+    fontSize: 20,
+    fontWeight: "700",
+    color: buoyColors.text
+  },
+  proStatValueDanger: {
+    color: buoyColors.error
+  },
+  proStatLabel: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    letterSpacing: 0.5,
+    marginTop: 2
+  },
+  proStatDivider: {
+    width: 1,
+    height: 24,
+    backgroundColor: buoyColors.border
+  },
+  proEmptyState: {
+    alignItems: "center",
+    paddingVertical: 20,
+    gap: 8
+  },
+  proEmptyStateText: {
+    fontSize: 11,
+    color: buoyColors.textMuted,
+    fontStyle: "italic"
+  },
+  proErrorState: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    backgroundColor: buoyColors.error + "15",
+    borderRadius: 6
+  },
+  proErrorStateText: {
+    fontSize: 11,
+    color: buoyColors.error,
+    flex: 1
+  },
+  proDevicesList: {
+    gap: 6
+  },
+  proDeviceRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    backgroundColor: buoyColors.input,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  proDeviceRowCurrent: {
+    borderColor: buoyColors.success + "50",
+    backgroundColor: buoyColors.success + "08"
+  },
+  proDeviceIcon: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  proDeviceInfo: {
+    flex: 1,
+    marginLeft: 10
+  },
+  proDeviceNameRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  proDeviceName: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.text,
+    flexShrink: 1
+  },
+  proDeviceBadge: {
+    backgroundColor: buoyColors.success + "20",
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 3
+  },
+  proDeviceBadgeText: {
+    fontSize: 8,
+    fontWeight: "700",
+    color: buoyColors.success,
+    letterSpacing: 0.3
+  },
+  proDeviceDetails: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    marginTop: 2
+  },
+  proDeviceDate: {
+    fontSize: 9,
+    color: buoyColors.textMuted,
+    marginTop: 2
+  },
+  proDeviceRemoveBtn: {
+    padding: 6,
+    marginLeft: 4
+  },
+  proRegisterDeviceBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    backgroundColor: buoyColors.primary + "15",
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "40",
+    marginTop: 10
+  },
+  proRegisterDeviceBtnText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.primary
+  },
+  proSignOutBtn: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    marginTop: 8
+  },
+  proSignOutBtnText: {
+    fontSize: 12,
+    color: buoyColors.textMuted
+  },
+  proFreeDescription: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    lineHeight: 16
+  },
+  proFeaturesList: {
+    gap: 8
+  },
+  proFeatureItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  proFeatureText: {
+    fontSize: 12,
+    color: buoyColors.text
+  },
+  proUpgradeBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: buoyColors.primary,
+    borderRadius: 10,
+    paddingVertical: 14,
+    shadowColor: buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 8
+  },
+  proUpgradeBtnText: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: buoyColors.base
+  }
+});