@buoy-gg/core 1.7.2

package/lib/commonjs/floatingMenu/DevToolsSettingsModal.js

@@ -0,0 +1,2274 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDevToolsSettings = exports.DevToolsSettingsModal = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _settingsBus = require("./settingsBus.js");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _DefaultConfigContext = require("./DefaultConfigContext.js");
+var _jsxRuntime = require("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.
+ */
+const DevToolsSettingsModal = ({
+  visible,
+  onClose,
+  onSettingsChange,
+  initialSettings,
+  availableApps = []
+}) => {
+  // Get team default configuration from context
+  const {
+    defaultFloatingTools,
+    defaultDialTools
+  } = (0, _DefaultConfigContext.useDefaultConfig)();
+  const defaultSettings = (0, _react.useMemo)(() => generateDefaultSettings(availableApps, defaultFloatingTools, defaultDialTools), [availableApps, defaultFloatingTools, defaultDialTools]);
+  const allowedDialKeys = (0, _react.useMemo)(() => Object.keys(defaultSettings.dialTools), [defaultSettings]);
+  const allowedFloatingKeys = (0, _react.useMemo)(() => Object.keys(defaultSettings.floatingTools).filter(key => key !== "environment"), [defaultSettings]);
+  const [settings, setSettings] = (0, _react.useState)(initialSettings || defaultSettings);
+  const [activeTab, setActiveTab] = (0, _react.useState)("dial");
+  const [activeTabLoaded, setActiveTabLoaded] = (0, _react.useState)(false);
+  const [expandedSettings, setExpandedSettings] = (0, _react.useState)(new Set());
+  const [showLicenseModal, setShowLicenseModal] = (0, _react.useState)(false);
+  const [licenseModalForDeviceRegistration, setLicenseModalForDeviceRegistration] = (0, _react.useState)(false);
+
+  // Load persisted active tab on mount
+  (0, _react.useEffect)(() => {
+    const loadActiveTab = async () => {
+      try {
+        const savedTab = await (0, _sharedUi.safeGetItem)(_sharedUi.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
+  (0, _react.useEffect)(() => {
+    // Only persist after initial state is loaded to avoid overwriting with default
+    if (!activeTabLoaded) return;
+    (0, _sharedUi.safeSetItem)(_sharedUi.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] = (0, _react.useState)(null);
+  const [storageBackend, setStorageBackend] = (0, _react.useState)(null);
+  const [isClearing, setIsClearing] = (0, _react.useState)(false);
+  const [clearSuccess, setClearSuccess] = (0, _react.useState)(false);
+  const [isStorageExpanded, setIsStorageExpanded] = (0, _react.useState)(false);
+  const [savedKeys, setSavedKeys] = (0, _react.useState)([]);
+  const [savedKeysLoading, setSavedKeysLoading] = (0, _react.useState)(false);
+  const [copySuccess, setCopySuccess] = (0, _react.useState)(false);
+  const [isExportExpanded, setIsExportExpanded] = (0, _react.useState)(false);
+  const insets = (0, _sharedUi.useSafeAreaInsets)();
+
+  // Check if in development mode - used to show dev-only features like Export Config
+  const isDevelopmentMode = typeof __DEV__ !== "undefined" && __DEV__;
+  const screenHeight = _reactNative.Dimensions.get("window").height;
+  const screenWidth = _reactNative.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 = (0, _react.useCallback)(async () => {
+    try {
+      const savedSettings = await (0, _sharedUi.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]);
+  (0, _react.useEffect)(() => {
+    loadSettings();
+  }, [loadSettings]);
+
+  // Load storage backend type
+  (0, _react.useEffect)(() => {
+    (0, _sharedUi.getStorageBackendType)().then(setStorageBackend);
+  }, []);
+
+  // Load saved keys when storage card is expanded
+  (0, _react.useEffect)(() => {
+    if (isStorageExpanded) {
+      setSavedKeysLoading(true);
+      _sharedUi.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 (0, _sharedUi.safeSetItem)(STORAGE_KEY, JSON.stringify(limitedSettings));
+      setSettings(limitedSettings);
+      onSettingsChange?.(limitedSettings);
+      // Notify listeners (e.g., floating bubble) to refresh immediately
+      _settingsBus.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 _sharedUi.persistentStorage.clear();
+      setClearSuccess(true);
+      // Reset settings to defaults after clearing
+      setSettings(defaultSettings);
+      _settingsBus.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 = (0, _react.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 = (0, _react.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 (0, _sharedUi.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 = (0, _react.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__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.QueryIcon, {
+            size: 16
+          });
+        case "env":
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EnvIcon, {
+            size: 16
+          });
+        case "sentry":
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SentryBugIcon, {
+            size: 16,
+            colorPreset: "red",
+            noBackground: true
+          });
+        case "storage":
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.StorageIcon, {
+            size: 16
+          });
+        case "wifi":
+        case "query-wifi-toggle":
+          // Support both IDs for wifi toggle
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.WifiCircuitIcon, {
+            size: 16,
+            colorPreset: "green",
+            strength: 4,
+            noBackground: true
+          });
+        case "route-events":
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.RoutesIcon, {
+            size: 16
+          });
+        case "network":
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.NetworkIcon, {
+            size: 16
+          });
+        case "environment":
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EnvIcon, {
+            size: 16
+          });
+        case "debug-borders":
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Layers, {
+            size: 16,
+            color: _sharedUi.buoyColors.primary
+          });
+        case "highlight-updates":
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RenderCountIcon, {
+            size: 16,
+            color: _sharedUi.buoyColors.primary
+          });
+        case "highlight-updates-modal":
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.HighlighterIcon, {
+            size: 16
+          });
+        case "benchmark":
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.BenchmarkIcon, {
+            size: 16,
+            color: _sharedUi.buoyColors.textSecondary
+          });
+        default:
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Info, {
+            size: 16,
+            color: _sharedUi.buoyColors.textSecondary
+          });
+      }
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      activeOpacity: disabled ? 1 : 0.85,
+      onPress: () => !disabled && onToggle(),
+      style: {
+        marginBottom: 8,
+        opacity: disabled ? 0.5 : 1
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.glassCard, value && styles.glassCardActive],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.glassCardInner,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.iconContainer, value && styles.iconContainerActive],
+            children: getToolIcon(keyName)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.toolInfo,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+              style: [styles.toolName, value && styles.toolNameActive],
+              children: [getToolLabel(keyName), disabled ? " (MAX 6)" : ""]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.toolDescription,
+              numberOfLines: 1,
+              children: getToolDescription(keyName)
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.pillToggle, value ? styles.pillToggleOn : styles.pillToggleOff, disabled && {
+              opacity: 0.5
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = _sharedUi.buoyColors.primary;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        marginBottom: 10
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.expandableCardHeader,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.expandableCardCategory,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.expandableCardCategoryText,
+              children: category
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.expandableCardTitle,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.expandableCardTitleText,
+              children: label
+            }), !isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.expandableCardSubtitle,
+              numberOfLines: 1,
+              children: shortDescription
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.expandableCardActions,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: () => toggleGlobalSetting(settingKey),
+              activeOpacity: 0.8,
+              style: [styles.pillToggle, {
+                backgroundColor: value ? `${_sharedUi.buoyColors.success}33` : _sharedUi.buoyColors.hover,
+                borderColor: value ? `${_sharedUi.buoyColors.success}88` : _sharedUi.buoyColors.border,
+                shadowColor: value ? _sharedUi.buoyColors.success : "transparent",
+                shadowOffset: {
+                  width: 0,
+                  height: 0
+                },
+                shadowOpacity: value ? 0.4 : 0,
+                shadowRadius: value ? 8 : 0
+              }],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.pillToggleText, {
+                  color: value ? _sharedUi.buoyColors.success : _sharedUi.buoyColors.textMuted
+                }],
+                children: value ? "ON" : "OFF"
+              })
+            }), isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
+              size: 18,
+              color: "#7F91B2"
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRightIcon, {
+              size: 18,
+              color: "#7F91B2"
+            })]
+          })]
+        }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.expandableCardBody,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.expandableCardSection,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.expandableCardSectionTitle,
+              children: "DESCRIPTION"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.expandableCardSectionText,
+              children: fullDescription
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.expandableCardSection,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.expandableCardSectionTitle,
+              children: "RECOMMENDATION"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.expandableCardSectionText,
+              children: recommendation
+            })]
+          })]
+        })]
+      })
+    }, settingKey);
+  };
+  const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      style: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      contentContainerStyle: styles.scrollContainer,
+      children: [activeTab === "dial" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: Object.entries(settings.floatingTools).map(([key, value]) => renderToolCard(key, value, false, () => toggleFloatingTool(key)))
+      }), activeTab === "settings" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.section,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.storageStatusCard, isStorageExpanded && {
+            borderColor: storageBackend === "filesystem" ? _sharedUi.buoyColors.success + "60" : storageBackend === "asyncstorage" ? _sharedUi.buoyColors.warning + "60" : _sharedUi.buoyColors.error + "60"
+          }],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            activeOpacity: 0.8,
+            onPress: () => setIsStorageExpanded(!isStorageExpanded),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.storageStatusHeader,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.storageStatusIcon, {
+                  backgroundColor: storageBackend === "filesystem" ? _sharedUi.buoyColors.success + "15" : storageBackend === "asyncstorage" ? _sharedUi.buoyColors.warning + "15" : _sharedUi.buoyColors.error + "15"
+                }],
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
+                  size: 18,
+                  color: storageBackend === "filesystem" ? _sharedUi.buoyColors.success : storageBackend === "asyncstorage" ? _sharedUi.buoyColors.warning : _sharedUi.buoyColors.error
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.storageStatusInfo,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.storageStatusLabel,
+                  children: "STORAGE TYPE"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.storageStatusBadgeContainer,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    style: [styles.storageStatusBadge, {
+                      backgroundColor: storageBackend === "filesystem" ? _sharedUi.buoyColors.success + "20" : storageBackend === "asyncstorage" ? _sharedUi.buoyColors.warning + "20" : _sharedUi.buoyColors.error + "20",
+                      borderColor: storageBackend === "filesystem" ? _sharedUi.buoyColors.success + "60" : storageBackend === "asyncstorage" ? _sharedUi.buoyColors.warning + "60" : _sharedUi.buoyColors.error + "60"
+                    }],
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      style: [styles.storageStatusBadgeText, {
+                        color: storageBackend === "filesystem" ? _sharedUi.buoyColors.success : storageBackend === "asyncstorage" ? _sharedUi.buoyColors.warning : _sharedUi.buoyColors.error
+                      }],
+                      children: storageBackend === "filesystem" ? "FILE SYSTEM" : storageBackend === "asyncstorage" ? "ASYNC STORAGE" : storageBackend === "memory" ? "MEMORY" : "LOADING..."
+                    })
+                  }), storageBackend === "filesystem" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle2, {
+                    size: 14,
+                    color: _sharedUi.buoyColors.success
+                  }), storageBackend === "asyncstorage" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+                    size: 14,
+                    color: _sharedUi.buoyColors.warning
+                  }), storageBackend === "memory" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+                    size: 14,
+                    color: _sharedUi.buoyColors.error
+                  })]
+                })]
+              }), isStorageExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
+                size: 18,
+                color: _sharedUi.buoyColors.textMuted
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRightIcon, {
+                size: 18,
+                color: _sharedUi.buoyColors.textMuted
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.adviceHint,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+              size: 14,
+              color: _sharedUi.buoyColors.warning
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+              style: styles.adviceHintText,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.adviceHintBold,
+                children: "Tip:"
+              }), " Install", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.adviceHintCode,
+                children: "expo-file-system"
+              }), " to persist settings through logout flows."]
+            })]
+          }), storageBackend === "memory" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.adviceHintsContainer,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.adviceHint, {
+                backgroundColor: _sharedUi.buoyColors.error + "10"
+              }],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+                size: 14,
+                color: _sharedUi.buoyColors.error
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                style: [styles.adviceHintText, {
+                  color: _sharedUi.buoyColors.error
+                }],
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.adviceHintBold,
+                  children: "No persistent storage available!"
+                }), " Settings will reset on every app restart."]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.adviceHint,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+                size: 14,
+                color: _sharedUi.buoyColors.primary
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                style: styles.adviceHintText,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.adviceHintBold,
+                  children: "Best:"
+                }), " Install", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.adviceHintCode,
+                  children: "expo-file-system"
+                }), " for logout-safe persistence."]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.adviceHint,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HardDrive, {
+                size: 14,
+                color: _sharedUi.buoyColors.textMuted
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                style: styles.adviceHintText,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.adviceHintBold,
+                  children: "Alternative:"
+                }), " Install", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.adviceHintCode,
+                  children: "@react-native-async-storage/async-storage"
+                }), " for basic persistence."]
+              })]
+            })]
+          }), isStorageExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.storageExpandedContent,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.storageExpandedHeader,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileText, {
+                size: 14,
+                color: _sharedUi.buoyColors.primary
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.storageExpandedTitle,
+                children: "SAVED SETTINGS"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.storageExpandedCount,
+                children: savedKeysLoading ? "..." : `${savedKeys.length} keys`
+              })]
+            }), savedKeysLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.storageKeyItem,
+              children: "Loading..."
+            }) : savedKeys.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.storageKeyItemEmpty,
+              children: "No settings saved yet"
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+              style: styles.storageKeysList,
+              nestedScrollEnabled: true,
+              showsVerticalScrollIndicator: true,
+              children: savedKeys.map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.storageKeyItem,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.storageKeyText,
+                  numberOfLines: 1,
+                  children: key.replace("@react_buoy_", "")
+                })
+              }, key))
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.clearStorageButton, isClearing && styles.clearStorageButtonDisabled, clearSuccess && styles.clearStorageButtonSuccess],
+            onPress: handleClearStorage,
+            disabled: isClearing,
+            activeOpacity: 0.7,
+            children: [clearSuccess ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle2, {
+              size: 14,
+              color: _sharedUi.buoyColors.success
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+              size: 14,
+              color: isClearing ? _sharedUi.buoyColors.textMuted : _sharedUi.buoyColors.error
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.clearStorageButtonText, clearSuccess && {
+                color: _sharedUi.buoyColors.success
+              }, isClearing && {
+                color: _sharedUi.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.exportConfigCard,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            activeOpacity: 0.85,
+            onPress: () => setIsExportExpanded(!isExportExpanded),
+            style: styles.exportConfigHeader,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.exportConfigIconContainer,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileCode, {
+                size: 18,
+                color: _sharedUi.buoyColors.success
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.exportConfigInfo,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportConfigLabel,
+                children: "EXPORT CONFIG"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportConfigHint,
+                children: "Save your settings to code"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.exportConfigActions,
+              children: isExportExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
+                size: 18,
+                color: _sharedUi.buoyColors.textMuted
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRightIcon, {
+                size: 18,
+                color: _sharedUi.buoyColors.textMuted
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.exportHintBanner,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+              size: 14,
+              color: _sharedUi.buoyColors.warning
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+              style: styles.exportHintText,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportHintBold,
+                children: "New!"
+              }), " Configure your tools above, then export to set team defaults."]
+            })]
+          }), isExportExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.exportCodeContainer,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.exportCodeHeader,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportCodeTitle,
+                children: "PROPS TO ADD"
+              })
+            }), enabledConfig.floating.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.exportJsonBlock,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonProp,
+                children: "defaultFloatingTools"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonEquals,
+                children: "="
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonBracket,
+                children: "{"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonArrayBracket,
+                children: "["
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.exportJsonArrayContent,
+                children: enabledConfig.floating.map((id, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.exportJsonArrayItem,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                    style: styles.exportJsonString,
+                    children: ["'", id, "'"]
+                  }), index < enabledConfig.floating.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.exportJsonComma,
+                    children: ","
+                  })]
+                }, id))
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonArrayBracket,
+                children: "]"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonBracket,
+                children: "}"
+              })]
+            }), enabledConfig.dial.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.exportJsonBlock, enabledConfig.floating.length > 0 && {
+                marginTop: 8
+              }],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonProp,
+                children: "defaultDialTools"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonEquals,
+                children: "="
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonBracket,
+                children: "{"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonArrayBracket,
+                children: "["
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.exportJsonArrayContent,
+                children: enabledConfig.dial.map((id, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.exportJsonArrayItem,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                    style: styles.exportJsonString,
+                    children: ["'", id, "'"]
+                  }), index < enabledConfig.dial.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.exportJsonComma,
+                    children: ","
+                  })]
+                }, id))
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonArrayBracket,
+                children: "]"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonBracket,
+                children: "}"
+              })]
+            }), enabledConfig.floating.length === 0 && enabledConfig.dial.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.exportJsonBlock,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportJsonComment,
+                children: "// No tools enabled"
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+              style: styles.exportCodeDescription,
+              children: ["Add these props to your existing", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.exportCodeInline,
+                children: "<FloatingDevTools />"
+              }), " ", "component to set team defaults."]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.exportCopyButton, copySuccess && styles.exportCopyButtonSuccess],
+            onPress: handleCopyConfig,
+            activeOpacity: 0.7,
+            children: [copySuccess ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle2, {
+              size: 14,
+              color: _sharedUi.buoyColors.success
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
+              size: 14,
+              color: _sharedUi.buoyColors.success
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.exportCopyButtonText, copySuccess && {
+                color: _sharedUi.buoyColors.success
+              }],
+              children: copySuccess ? "COPIED!" : "COPY CONFIG TO CLIPBOARD"
+            })]
+          })]
+        })]
+      }), activeTab === "pro" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.proContainer,
+        children: isPro ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.proSection,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
+                icon: _sharedUi.Zap,
+                color: _sharedUi.buoyColors.primary,
+                size: 12
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
+                children: "LICENSE STATUS"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
+                count: "Active",
+                color: _sharedUi.buoyColors.success
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.proSectionContent,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.proStatsRow,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.proStatItem,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.proStatValue,
+                    children: seats?.used ?? 0
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.proStatLabel,
+                    children: "USED"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.proStatDivider
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.proStatItem,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.proStatValue,
+                    children: seats?.total ?? "∞"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.proStatLabel,
+                    children: "LIMIT"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.proStatDivider
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.proStatItem,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: [styles.proStatValue, (seats?.remaining ?? 0) <= 0 && styles.proStatValueDanger],
+                    children: seats?.remaining ?? "∞"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.proStatLabel,
+                    children: "AVAILABLE"
+                  })]
+                })]
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.proSection,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
+                icon: _sharedUi.Smartphone,
+                color: _sharedUi.buoyColors.info,
+                size: 12
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
+                children: "REGISTERED DEVICES"
+              }), devices.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
+                count: devices.length,
+                color: _sharedUi.buoyColors.info
+              }), refreshDevices && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Actions, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                  onPress: () => refreshDevices(),
+                  disabled: devicesLoading,
+                  style: {
+                    marginLeft: 8
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RefreshCw, {
+                    size: 14,
+                    color: devicesLoading ? _sharedUi.buoyColors.textMuted : _sharedUi.buoyColors.textSecondary
+                  })
+                })
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.proSectionContent,
+              children: [devicesLoading && devices.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.proEmptyState,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.proEmptyStateText,
+                  children: "Loading devices..."
+                })
+              }) : devicesError ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.proErrorState,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+                  size: 16,
+                  color: _sharedUi.buoyColors.error
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.proErrorStateText,
+                  children: devicesError
+                })]
+              }) : devices.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.proEmptyState,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Smartphone, {
+                  size: 24,
+                  color: _sharedUi.buoyColors.textMuted
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.proEmptyStateText,
+                  children: "No devices registered"
+                })]
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.proDevicesList,
+                children: devices.map(device => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: [styles.proDeviceRow, device.isCurrentDevice && styles.proDeviceRowCurrent],
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    style: styles.proDeviceIcon,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Smartphone, {
+                      size: 16,
+                      color: _sharedUi.buoyColors.text
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                    style: styles.proDeviceInfo,
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                      style: styles.proDeviceNameRow,
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                        style: styles.proDeviceName,
+                        numberOfLines: 1,
+                        children: device.name
+                      }), device.isCurrentDevice && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                        style: styles.proDeviceBadge,
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                          style: styles.proDeviceBadgeText,
+                          children: "THIS DEVICE"
+                        })
+                      })]
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                      style: styles.proDeviceDetails,
+                      children: [device.platform, device.osVersion ? ` ${device.osVersion}` : "", device.model ? ` • ${device.model}` : ""]
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                      style: styles.proDeviceDate,
+                      children: ["Registered ", formatDeviceDate(device.registeredAt)]
+                    })]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                    style: styles.proDeviceRemoveBtn,
+                    onPress: () => handleRemoveDevice(device.id, device.name, device.isCurrentDevice),
+                    disabled: deactivatingDeviceId === device.id,
+                    children: deactivatingDeviceId === device.id ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RefreshCw, {
+                      size: 14,
+                      color: _sharedUi.buoyColors.textMuted
+                    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+                      size: 14,
+                      color: _sharedUi.buoyColors.error
+                    })
+                  })]
+                }, device.id))
+              }), !isCurrentDeviceRegistered && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+                style: styles.proRegisterDeviceBtn,
+                onPress: handleRegisterDevice,
+                disabled: devicesLoading,
+                activeOpacity: 0.7,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Plus, {
+                  size: 14,
+                  color: _sharedUi.buoyColors.primary
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.proRegisterDeviceBtnText,
+                  children: "Register This Device"
+                })]
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.proSignOutBtnText,
+              children: "Sign Out of Pro"
+            })
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.proSection,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
+                icon: _sharedUi.Zap,
+                color: _sharedUi.buoyColors.textMuted,
+                size: 12
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
+                children: "LICENSE STATUS"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
+                count: "Free",
+                color: _sharedUi.buoyColors.textMuted
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.proSectionContent,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.proFreeDescription,
+                children: "Upgrade to Pro to unlock all features and support development."
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.proSection,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
+                icon: _sharedUi.CheckCircle2,
+                color: _sharedUi.buoyColors.primary,
+                size: 12
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
+                children: "PRO FEATURES"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.proSectionContent,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.proFeaturesList,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.proFeatureItem,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle2, {
+                    size: 14,
+                    color: _sharedUi.buoyColors.primary
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.proFeatureText,
+                    children: "Advanced Settings"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.proFeatureItem,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle2, {
+                    size: 14,
+                    color: _sharedUi.buoyColors.primary
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.proFeatureText,
+                    children: "Export Configuration"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.proFeatureItem,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle2, {
+                    size: 14,
+                    color: _sharedUi.buoyColors.primary
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.proFeatureText,
+                    children: "Team Defaults"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.proFeatureItem,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle2, {
+                    size: 14,
+                    color: _sharedUi.buoyColors.primary
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.proFeatureText,
+                    children: "Priority Support"
+                  })]
+                })]
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: styles.proUpgradeBtn,
+            onPress: () => setShowLicenseModal(true),
+            activeOpacity: 0.8,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+              size: 16,
+              color: _sharedUi.buoyColors.base
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.proUpgradeBtnText,
+              children: "Upgrade to Pro"
+            })]
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.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__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
+    visible: visible,
+    onClose: onClose,
+    header: {
+      showToggleButton: false,
+      customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: "",
+          noMargin: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.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__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {})]
+      })
+    },
+    initialMode: "bottomSheet",
+    onModeChange: handleModeChange,
+    persistenceKey: _sharedUi.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)
+exports.DevToolsSettingsModal = DevToolsSettingsModal;
+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.
+ */
+const useDevToolsSettings = () => {
+  // Get team default configuration from context
+  const {
+    defaultFloatingTools,
+    defaultDialTools
+  } = (0, _DefaultConfigContext.useDefaultConfig)();
+
+  // Compute the effective defaults based on team configuration
+  const effectiveDefaults = (0, _react.useMemo)(() => {
+    if (!defaultFloatingTools && !defaultDialTools) {
+      return basicDefaultSettings;
+    }
+    return createDefaultsFromConfig(defaultFloatingTools, defaultDialTools);
+  }, [defaultFloatingTools, defaultDialTools]);
+  const [settings, setSettings] = (0, _react.useState)(effectiveDefaults);
+  const loadSettings = (0, _react.useCallback)(async () => {
+    try {
+      const savedSettings = await (0, _sharedUi.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]);
+  (0, _react.useEffect)(() => {
+    loadSettings();
+    // Subscribe to settings changes
+    const unsub = _settingsBus.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 = (0, _react.useCallback)(() => {
+    loadSettings();
+  }, [loadSettings]);
+  return {
+    settings,
+    refreshSettings
+  };
+};
+exports.useDevToolsSettings = useDevToolsSettings;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: _sharedUi.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: _sharedUi.buoyColors.hover,
+    borderRadius: 6,
+    padding: 2,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    justifyContent: "space-evenly"
+  },
+  tabButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    marginHorizontal: 1
+  },
+  tabButtonActive: {
+    backgroundColor: _sharedUi.buoyColors.primary + "20",
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary
+  },
+  tabButtonInactive: {
+    backgroundColor: "transparent"
+  },
+  tabButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  tabButtonTextActive: {
+    color: _sharedUi.buoyColors.primary
+  },
+  tabButtonTextInactive: {
+    color: _sharedUi.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: _sharedUi.buoyColors.primary,
+    marginRight: 8,
+    shadowColor: _sharedUi.buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 4
+  },
+  sectionTitle: {
+    flex: 1,
+    color: _sharedUi.buoyColors.primary,
+    fontSize: 13,
+    fontWeight: "700",
+    letterSpacing: 1.2
+  },
+  sectionCount: {
+    color: _sharedUi.buoyColors.textSecondary,
+    fontSize: 11,
+    opacity: 0.7
+  },
+  // Tool Cards - Clean unified Buoy theme
+  glassCard: {
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border
+  },
+  glassCardActive: {
+    borderColor: _sharedUi.buoyColors.primary + "50",
+    backgroundColor: _sharedUi.buoyColors.primary + "08"
+  },
+  glassCardInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  iconContainer: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconContainerActive: {
+    backgroundColor: _sharedUi.buoyColors.primary + "20"
+  },
+  toolInfo: {
+    flex: 1
+  },
+  toolName: {
+    color: _sharedUi.buoyColors.text,
+    fontWeight: "600",
+    fontSize: 13
+  },
+  toolNameActive: {
+    color: _sharedUi.buoyColors.text
+  },
+  toolDescription: {
+    color: _sharedUi.buoyColors.textMuted,
+    fontSize: 11,
+    marginTop: 2
+  },
+  pillToggle: {
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 6,
+    borderWidth: 1,
+    minWidth: 48,
+    alignItems: "center"
+  },
+  pillToggleOn: {
+    backgroundColor: _sharedUi.buoyColors.primary + "20",
+    borderColor: _sharedUi.buoyColors.primary
+  },
+  pillToggleOff: {
+    backgroundColor: _sharedUi.buoyColors.hover,
+    borderColor: _sharedUi.buoyColors.border
+  },
+  pillToggleText: {
+    fontWeight: "600",
+    fontSize: 11,
+    letterSpacing: 0.5
+  },
+  pillToggleTextOn: {
+    color: _sharedUi.buoyColors.primary
+  },
+  pillToggleTextOff: {
+    color: _sharedUi.buoyColors.textMuted
+  },
+  closeButton: {
+    marginLeft: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 6,
+    backgroundColor: _sharedUi.buoyColors.error + "1A",
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.error + "33"
+  },
+  closeButtonText: {
+    color: _sharedUi.buoyColors.error,
+    fontSize: 14,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  },
+  // Expandable Settings Card styles
+  expandableCard: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 12
+  },
+  expandableCardHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  expandableCardCategory: {
+    backgroundColor: _sharedUi.buoyColors.primary + "20",
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "40",
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4
+  },
+  expandableCardCategoryText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.primary,
+    letterSpacing: 0.5
+  },
+  expandableCardTitle: {
+    flex: 1,
+    paddingHorizontal: 4
+  },
+  expandableCardTitleText: {
+    fontFamily: "monospace",
+    fontSize: 12,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.text
+  },
+  expandableCardSubtitle: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted,
+    marginTop: 2
+  },
+  expandableCardActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  expandableCardBody: {
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: _sharedUi.buoyColors.border + "50"
+  },
+  expandableCardSection: {
+    marginBottom: 12
+  },
+  expandableCardSectionTitle: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.primary,
+    letterSpacing: 1,
+    marginBottom: 6
+  },
+  expandableCardSectionText: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.textSecondary,
+    lineHeight: 18
+  },
+  // Storage Status Card styles
+  storageStatusCard: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 12,
+    marginBottom: 10
+  },
+  storageStatusHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    marginBottom: 8
+  },
+  storageStatusIcon: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  storageStatusInfo: {
+    flex: 1
+  },
+  storageStatusLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.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: _sharedUi.buoyColors.textMuted,
+    lineHeight: 16,
+    marginBottom: 12
+  },
+  clearStorageButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 6,
+    backgroundColor: _sharedUi.buoyColors.error + "15",
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.error + "40"
+  },
+  clearStorageButtonDisabled: {
+    opacity: 0.5
+  },
+  clearStorageButtonSuccess: {
+    backgroundColor: _sharedUi.buoyColors.success + "15",
+    borderColor: _sharedUi.buoyColors.success + "40"
+  },
+  clearStorageButtonText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.error,
+    letterSpacing: 0.5
+  },
+  // Advice hints
+  adviceHintsContainer: {
+    gap: 8,
+    marginBottom: 12
+  },
+  adviceHint: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 8,
+    backgroundColor: _sharedUi.buoyColors.warning + "10",
+    borderRadius: 6,
+    padding: 10,
+    marginBottom: 8
+  },
+  adviceHintText: {
+    flex: 1,
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textSecondary,
+    lineHeight: 16
+  },
+  adviceHintBold: {
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.text
+  },
+  adviceHintCode: {
+    fontFamily: "monospace",
+    fontSize: 10,
+    color: _sharedUi.buoyColors.info,
+    backgroundColor: _sharedUi.buoyColors.info + "15",
+    paddingHorizontal: 4,
+    borderRadius: 3
+  },
+  // Expanded storage content
+  storageExpandedContent: {
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: _sharedUi.buoyColors.border + "50"
+  },
+  storageExpandedHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 10
+  },
+  storageExpandedTitle: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.primary,
+    letterSpacing: 1,
+    flex: 1
+  },
+  storageExpandedCount: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted
+  },
+  storageKeysList: {
+    gap: 4,
+    maxHeight: 150
+  },
+  storageKeyItem: {
+    backgroundColor: _sharedUi.buoyColors.hover,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border + "50"
+  },
+  storageKeyItemEmpty: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textMuted,
+    fontStyle: "italic",
+    paddingVertical: 8
+  },
+  storageKeyText: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textSecondary,
+    fontFamily: "monospace"
+  },
+  // Export Config Card styles
+  exportConfigCard: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.success + "40",
+    padding: 12,
+    marginTop: 10
+  },
+  exportConfigHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  exportConfigIconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.buoyColors.success + "15",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  exportConfigInfo: {
+    flex: 1
+  },
+  exportConfigLabel: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.success,
+    letterSpacing: 0.5
+  },
+  exportConfigHint: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted,
+    marginTop: 2
+  },
+  exportConfigActions: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  exportHintBanner: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 8,
+    backgroundColor: _sharedUi.buoyColors.warning + "10",
+    borderRadius: 6,
+    padding: 10,
+    marginTop: 12
+  },
+  exportHintText: {
+    flex: 1,
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textSecondary,
+    lineHeight: 16
+  },
+  exportHintBold: {
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.warning
+  },
+  exportCodeContainer: {
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: _sharedUi.buoyColors.border + "50"
+  },
+  exportCodeHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 8
+  },
+  exportCodeTitle: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.success,
+    letterSpacing: 1
+  },
+  exportCodeBlock: {
+    backgroundColor: _sharedUi.buoyColors.hover,
+    borderRadius: 6,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border + "50"
+  },
+  exportCodeText: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    lineHeight: 18
+  },
+  exportCodeDescription: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted,
+    marginTop: 8,
+    lineHeight: 14
+  },
+  exportCodeInline: {
+    fontFamily: "monospace",
+    fontSize: 10,
+    color: _sharedUi.buoyColors.info,
+    backgroundColor: _sharedUi.buoyColors.info + "15",
+    paddingHorizontal: 4,
+    borderRadius: 3
+  },
+  exportCopyButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 6,
+    backgroundColor: _sharedUi.buoyColors.success + "15",
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.success + "40",
+    marginTop: 12
+  },
+  exportCopyButtonSuccess: {
+    backgroundColor: _sharedUi.buoyColors.success + "25",
+    borderColor: _sharedUi.buoyColors.success + "60"
+  },
+  exportCopyButtonText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.success,
+    letterSpacing: 0.5
+  },
+  // JSON-like viewer styles (syntax highlighting)
+  exportJsonBlock: {
+    backgroundColor: _sharedUi.buoyColors.hover,
+    borderRadius: 6,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border + "50",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 4
+  },
+  exportJsonProp: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: _sharedUi.buoyColors.info,
+    // Cyan for prop names
+    fontWeight: "600"
+  },
+  exportJsonEquals: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: _sharedUi.buoyColors.textMuted
+  },
+  exportJsonBracket: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: _sharedUi.buoyColors.warning // Yellow for JSX brackets
+  },
+  exportJsonArrayBracket: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: _sharedUi.buoyColors.text
+  },
+  exportJsonArrayContent: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 2
+  },
+  exportJsonArrayItem: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  exportJsonString: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: _sharedUi.buoyColors.success // Green for strings
+  },
+  exportJsonComma: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: _sharedUi.buoyColors.textMuted,
+    marginRight: 4
+  },
+  exportJsonComment: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: _sharedUi.buoyColors.textMuted,
+    fontStyle: "italic"
+  },
+  // Pro tab styles - using buoyColors for consistency with other modals
+  proContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 24
+  },
+  proSection: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.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: _sharedUi.buoyColors.text
+  },
+  proStatValueDanger: {
+    color: _sharedUi.buoyColors.error
+  },
+  proStatLabel: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted,
+    letterSpacing: 0.5,
+    marginTop: 2
+  },
+  proStatDivider: {
+    width: 1,
+    height: 24,
+    backgroundColor: _sharedUi.buoyColors.border
+  },
+  proEmptyState: {
+    alignItems: "center",
+    paddingVertical: 20,
+    gap: 8
+  },
+  proEmptyStateText: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textMuted,
+    fontStyle: "italic"
+  },
+  proErrorState: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    backgroundColor: _sharedUi.buoyColors.error + "15",
+    borderRadius: 6
+  },
+  proErrorStateText: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.error,
+    flex: 1
+  },
+  proDevicesList: {
+    gap: 6
+  },
+  proDeviceRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    backgroundColor: _sharedUi.buoyColors.input,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border
+  },
+  proDeviceRowCurrent: {
+    borderColor: _sharedUi.buoyColors.success + "50",
+    backgroundColor: _sharedUi.buoyColors.success + "08"
+  },
+  proDeviceIcon: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: _sharedUi.buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  proDeviceInfo: {
+    flex: 1,
+    marginLeft: 10
+  },
+  proDeviceNameRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  proDeviceName: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text,
+    flexShrink: 1
+  },
+  proDeviceBadge: {
+    backgroundColor: _sharedUi.buoyColors.success + "20",
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 3
+  },
+  proDeviceBadgeText: {
+    fontSize: 8,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.success,
+    letterSpacing: 0.3
+  },
+  proDeviceDetails: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted,
+    marginTop: 2
+  },
+  proDeviceDate: {
+    fontSize: 9,
+    color: _sharedUi.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: _sharedUi.buoyColors.primary + "15",
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "40",
+    marginTop: 10
+  },
+  proRegisterDeviceBtnText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.primary
+  },
+  proSignOutBtn: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    marginTop: 8
+  },
+  proSignOutBtnText: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.textMuted
+  },
+  proFreeDescription: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textSecondary,
+    lineHeight: 16
+  },
+  proFeaturesList: {
+    gap: 8
+  },
+  proFeatureItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  proFeatureText: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text
+  },
+  proUpgradeBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: _sharedUi.buoyColors.primary,
+    borderRadius: 10,
+    paddingVertical: 14,
+    shadowColor: _sharedUi.buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 8
+  },
+  proUpgradeBtnText: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.base
+  }
+});