@buoy-gg/core 7.0.39 → 7.0.41

package/lib/module/floatingMenu/DevToolsSettingsModal.shared.js

@@ -0,0 +1,1110 @@
+"use strict";
+
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Dimensions, Platform } from "react-native";
+import { settingsBus } from "./settingsBus.js";
+import { useDesktopSyncStatus } from "./useDesktopSyncStatus";
+import { SentryIcon, WifiCircuitIcon, ImageOverlayIcon, RenderCountIcon, Info, Layers, ChevronRightIcon, ChevronDown, getStorageBackendType, getUseLicense, persistentStorage, Trash2, CheckCircle2, LicenseEntryModal, BackgroundSwitcher, night, NightCard, NightRows, NightSectionLabel, NightFootnote, NightSwitch, NightButton, NightSegmented, NightBadge, NightSeparator, monoFont } from "@buoy-gg/shared-ui";
+import { EnvIcon, StorageIcon, RoutesIcon, NetworkIcon, QueryIcon, HighlighterIcon, ReduxIcon, EventsIcon } from "@buoy-gg/floating-tools-core";
+import { useDefaultConfig } from "./DefaultConfigContext.js";
+import { renderAppIcon } from "./AppIcon";
+import { JsModal, devToolsStorageKeys } from "@buoy-gg/shared-ui";
+import { useSafeAreaInsets } 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;
+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
+      expandableWindowControls: true,
+      // Default to true
+      ...(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.
+ */
+
+/**
+ * The subset of InstalledApp the settings modal needs per tool. `icon`/`color`
+ * let rows fall back to the tool's own glyph when getToolIcon() has no
+ * night-tuned override for it.
+ */
+
+/**
+ * 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
+ *                          If not provided, all dial-compatible tools are enabled by default (up to 6)
+ */
+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 ?? []);
+
+  // If no defaultDialTools specified, auto-enable all dial-compatible tools
+  const autoEnableDialTools = !defaultDialTools || defaultDialTools.length === 0;
+  for (const app of availableApps) {
+    const {
+      id,
+      slot = "both"
+    } = app;
+    if (slot === "dial" || slot === "both") {
+      // Auto-enable if no defaults specified, otherwise check the set
+      dialDefaults[id] = autoEnableDialTools ? true : 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
+      expandableWindowControls: true // Default to true - expandable on touch devices
+    }
+  };
+};
+
+/**
+ * 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.
+ *
+ * Styled in the "night" language (Everlights port — see shared-ui's
+ * ui/night): section labels outside near-black cards, hairline-separated
+ * rows, real switches, and a transparent header the star field runs through.
+ */
+export const DevToolsSettingsModal = ({
+  visible,
+  onClose,
+  onSettingsChange,
+  initialSettings,
+  availableApps = [],
+  storage = persistentStorage,
+  zIndex
+}) => {
+  // 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 || cachedSettings || defaultSettings);
+  const [activeTab, setActiveTab] = useState(cachedActiveTab ?? "floating");
+  const [activeTabLoaded, setActiveTabLoaded] = useState(cachedActiveTab !== null);
+  const [expandedSettings, setExpandedSettings] = useState(new Set());
+  const [showLicenseModal, setShowLicenseModal] = useState(false);
+  /**
+   * Tool icons are the expensive half of this modal: ~20 of them, each a
+   * data-driven glyph that mounts one view per shape. Rendering them in the
+   * first pass pushed the modal's first paint out to ~240ms, so the tap felt
+   * dead. Holding them back a single frame lets the chrome and the tool rows
+   * paint at ~100ms and the glyphs land during the entrance fade.
+   *
+   * There is no layout shift: `styles.toolIconSlot` is a fixed box, so it
+   * reads as the icon's placeholder until filled.
+   */
+  const [iconsReady, setIconsReady] = useState(false);
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setIconsReady(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
+  // null when external-sync isn't installed (or predates the status store);
+  // "idle" until AutoExternalSync initializes — the row hides in both cases.
+  const desktopSyncStatus = useDesktopSyncStatus();
+
+  // Load persisted active tab on mount
+  useEffect(() => {
+    const loadActiveTab = async () => {
+      try {
+        const savedTab = await persistentStorage.getItem(devToolsStorageKeys.settings.activeTab());
+        if (savedTab && ["floating", "settings", "pro"].includes(savedTab)) {
+          const tab = savedTab;
+          cachedActiveTab = tab;
+          setActiveTab(prev => prev === tab ? prev : tab);
+        }
+      } 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;
+    persistentStorage.setItem(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 license = useLicenseHook?.();
+  const isPro = license?.isPro ?? false;
+  // A key is set but validation is failing. Without this the tab renders a bare
+  // "Free" badge, which reads as "your key was rejected" when what actually
+  // happened is that we never reached the license server. `errorKind` decides
+  // which story to tell: only a transport failure gets the VPN/proxy advice — a
+  // real verdict (suspended, expired) with that advice would send the user off
+  // to fight their network over a key that was genuinely rejected.
+  const licenseError = !isPro && license?.licenseKey ? license.error : null;
+  const licenseErrorIsTransport = license?.errorKind === "transport";
+  const [storageBackend, setStorageBackend] = useState(cachedStorageBackend);
+  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 insets = useSafeAreaInsets();
+  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 storage.getItem(STORAGE_KEY);
+      if (savedSettings) {
+        const parsed = JSON.parse(savedSettings);
+        const merged = mergeWithDefaults(defaultSettings, parsed, {
+          allowedDialKeys,
+          allowedFloatingKeys
+        });
+        cachedSettings = merged;
+        setSettings(prev => sameSettings(prev, merged) ? prev : merged);
+        return;
+      }
+      cachedSettings = defaultSettings;
+      setSettings(prev => sameSettings(prev, defaultSettings) ? prev : defaultSettings);
+    } catch (error) {
+      console.error("Failed to load dev tools settings:", error);
+      setSettings(defaultSettings);
+    }
+  }, [defaultSettings, allowedDialKeys, allowedFloatingKeys, storage]);
+  useEffect(() => {
+    loadSettings();
+  }, [loadSettings]);
+
+  // Load storage backend type
+  useEffect(() => {
+    getStorageBackendType().then(backend => {
+      cachedStorageBackend = backend;
+      setStorageBackend(prev => prev === backend ? prev : backend);
+    });
+  }, []);
+
+  // 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 storage.setItem(STORAGE_KEY, JSON.stringify(limitedSettings));
+      cachedSettings = 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 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);
+      if (storage !== persistentStorage) await storage.setItem(STORAGE_KEY, JSON.stringify(defaultSettings));
+      onSettingsChange?.(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);
+    }
+  };
+
+  // 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, " ");
+  };
+  const getToolIcon = tool => {
+    if (!iconsReady) return null;
+    switch (tool) {
+      case "query":
+        return /*#__PURE__*/_jsx(QueryIcon, {
+          size: 18
+        });
+      case "env":
+        return /*#__PURE__*/_jsx(EnvIcon, {
+          size: 18
+        });
+      case "sentry":
+        return /*#__PURE__*/_jsx(SentryIcon, {
+          size: 18,
+          color: "#9945FF"
+        });
+      case "storage":
+        return /*#__PURE__*/_jsx(StorageIcon, {
+          size: 18,
+          bgColor: night.color.surface
+        });
+      case "wifi":
+      case "query-wifi-toggle":
+        // Support both IDs for wifi toggle
+        return /*#__PURE__*/_jsx(WifiCircuitIcon, {
+          size: 18,
+          colorPreset: "green",
+          strength: 4,
+          noBackground: true
+        });
+      case "route-events":
+        return /*#__PURE__*/_jsx(RoutesIcon, {
+          size: 18,
+          bgColor: night.color.surface
+        });
+      case "network":
+        return /*#__PURE__*/_jsx(NetworkIcon, {
+          size: 18
+        });
+      case "environment":
+        return /*#__PURE__*/_jsx(EnvIcon, {
+          size: 18
+        });
+      case "debug-borders":
+        return /*#__PURE__*/_jsx(Layers, {
+          size: 18,
+          color: night.color.accent
+        });
+      case "highlight-updates":
+        return /*#__PURE__*/_jsx(RenderCountIcon, {
+          size: 18,
+          color: night.color.accent
+        });
+      case "highlight-updates-modal":
+        return /*#__PURE__*/_jsx(HighlighterIcon, {
+          size: 18
+        });
+      case "redux":
+        return /*#__PURE__*/_jsx(ReduxIcon, {
+          size: 18
+        });
+      case "image-overlay":
+        return /*#__PURE__*/_jsx(ImageOverlayIcon, {
+          size: 18
+        });
+      case "events":
+        return /*#__PURE__*/_jsx(EventsIcon, {
+          size: 18
+        });
+      case "zustand":
+        try {
+          // @ts-ignore - Optional package
+          const {
+            ZustandIcon
+          } = require("@buoy-gg/zustand");
+          return /*#__PURE__*/_jsx(ZustandIcon, {
+            size: 18
+          });
+        } catch {
+          return /*#__PURE__*/_jsx(Info, {
+            size: 18,
+            color: night.color.textSecondary
+          });
+        }
+      case "jotai":
+        try {
+          // @ts-ignore - Optional package
+          const {
+            JotaiIcon
+          } = require("@buoy-gg/jotai");
+          return /*#__PURE__*/_jsx(JotaiIcon, {
+            size: 18
+          });
+        } catch {
+          return /*#__PURE__*/_jsx(Info, {
+            size: 18,
+            color: night.color.textSecondary
+          });
+        }
+      default:
+        {
+          // Tools without a night-tuned override (console, images, time
+          // machine, perf monitor, custom toolkit tools, …) render their own
+          // app icon — the same artwork the dial shows.
+          const app = availableApps.find(a => a.id === tool);
+          if (app?.icon != null) {
+            return renderAppIcon(app.icon, {
+              slot: "row",
+              size: 18,
+              color: app.color
+            });
+          }
+          return /*#__PURE__*/_jsx(Info, {
+            size: 18,
+            color: night.color.textSecondary
+          });
+        }
+    }
+  };
+
+  /**
+   * One tool row: glyph, name + one-line description, switch. Lives inside a
+   * NightCard's hairline-separated rows.
+   */
+  const renderToolRow = (keyName, value, disabled, onToggle) => {
+    const description = getToolDescription(keyName);
+    return /*#__PURE__*/_jsxs(TouchableOpacity, {
+      activeOpacity: disabled ? 1 : 0.7,
+      onPress: () => !disabled && onToggle(),
+      accessibilityLabel: getToolLabel(keyName),
+      accessibilityRole: "button",
+      style: [styles.toolRow, disabled && styles.rowDisabled],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.toolIconSlot,
+        children: getToolIcon(keyName)
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.rowInfo,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: styles.rowLabel,
+          children: [getToolLabel(keyName), disabled ? "  ·  max 6" : ""]
+        }), description ? /*#__PURE__*/_jsx(Text, {
+          style: styles.rowCaption,
+          numberOfLines: 1,
+          children: description
+        }) : null]
+      }), /*#__PURE__*/_jsx(NightSwitch, {
+        value: value,
+        disabled: disabled,
+        onValueChange: () => onToggle()
+      })]
+    }, 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;
+    });
+  };
+
+  /**
+   * One global-setting row: name + one-line hint, switch, and a tap-to-expand
+   * body holding the full description and recommendation.
+   */
+  const renderGlobalSettingRow = (settingKey, label, shortDescription, fullDescription, recommendation) => {
+    const value = settings.globalSettings?.[settingKey] ?? false;
+    const isExpanded = expandedSettings.has(settingKey);
+    return /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        activeOpacity: 0.7,
+        onPress: () => toggleSettingExpanded(settingKey),
+        accessibilityLabel: label,
+        style: styles.settingRow,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.rowInfo,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.rowLabel,
+            children: label
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.rowCaption,
+            numberOfLines: isExpanded ? 0 : 1,
+            children: shortDescription
+          })]
+        }), /*#__PURE__*/_jsx(NightSwitch, {
+          value: value,
+          onValueChange: () => toggleGlobalSetting(settingKey)
+        })]
+      }), isExpanded && /*#__PURE__*/_jsxs(View, {
+        style: styles.settingRowBody,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.settingRowBodyText,
+          children: fullDescription
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.settingRowBodyHint,
+          children: recommendation
+        })]
+      })]
+    }, settingKey);
+  };
+
+  /** Section = uppercase label, card, optional footnote(s) under it. */
+  const renderSection = (label, card, footnotes) => /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(NightSectionLabel, {
+      children: label
+    }), card, footnotes]
+  });
+  const storageBadge = storageBackend === "filesystem" ? /*#__PURE__*/_jsx(NightBadge, {
+    label: "File System",
+    tone: "accent"
+  }) : storageBackend === "asyncstorage" ? /*#__PURE__*/_jsx(NightBadge, {
+    label: "Async Storage",
+    tone: "warning"
+  }) : storageBackend === "localstorage" ? /*#__PURE__*/_jsx(NightBadge, {
+    label: "Local Storage",
+    tone: "accent"
+  }) : storageBackend === "memory" ? /*#__PURE__*/_jsx(NightBadge, {
+    label: "Memory",
+    tone: "danger"
+  }) : /*#__PURE__*/_jsx(NightBadge, {
+    label: "Loading\u2026",
+    tone: "neutral"
+  });
+  const renderContent = () => /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      contentContainerStyle: styles.scrollContainer,
+      children: [activeTab === "floating" && /*#__PURE__*/_jsx(_Fragment, {
+        children: renderSection("Floating Tools", /*#__PURE__*/_jsx(NightCard, {
+          glass: true,
+          children: /*#__PURE__*/_jsx(NightRows, {
+            children: Object.entries(settings.floatingTools).map(([key, value]) => renderToolRow(key, value, false, () => toggleFloatingTool(key)))
+          })
+        }), /*#__PURE__*/_jsx(NightFootnote, {
+          children: "Tools switched on here appear in the floating bubble row."
+        }))
+      }), activeTab === "settings" && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [renderSection("Background", /*#__PURE__*/_jsx(NightCard, {
+          glass: true,
+          padded: true,
+          children: /*#__PURE__*/_jsx(BackgroundSwitcher, {
+            embedded: true
+          })
+        })), renderSection("Storage", /*#__PURE__*/_jsxs(NightCard, {
+          glass: true,
+          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+            activeOpacity: 0.7,
+            onPress: () => setIsStorageExpanded(!isStorageExpanded),
+            accessibilityLabel: "Storage Type",
+            style: styles.settingRow,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.rowInfo,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.rowLabel,
+                children: "Storage Type"
+              })
+            }), storageBadge, isStorageExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+              size: 16,
+              color: night.color.textTertiary
+            }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+              size: 16,
+              color: night.color.textTertiary
+            })]
+          }), isStorageExpanded && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.settingRowBody,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingRowBodyText,
+                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 === "localstorage" ? "Settings are saved in this browser. Clearing site data removes them." : storageBackend === "memory" ? "Settings are stored in memory only and will be lost on app restart." : "Checking storage backend…"
+              }), storageBackend === "asyncstorage" && /*#__PURE__*/_jsx(Text, {
+                style: [styles.settingRowBodyText, styles.bodyWarning],
+                children: "Install expo-file-system to persist settings through logout flows."
+              }), storageBackend === "memory" && /*#__PURE__*/_jsx(Text, {
+                style: [styles.settingRowBodyText, styles.bodyDanger],
+                children: "No persistent storage available \u2014 install expo-file-system (best) or @react-native-async-storage/async-storage."
+              })]
+            }), /*#__PURE__*/_jsx(NightSeparator, {}), /*#__PURE__*/_jsxs(View, {
+              style: styles.storageExpanded,
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.storageExpandedHeader,
+                children: [/*#__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.storageKeyEmpty,
+                children: "Loading\u2026"
+              }) : savedKeys.length === 0 ? /*#__PURE__*/_jsx(Text, {
+                style: styles.storageKeyEmpty,
+                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__*/_jsx(View, {
+              style: styles.cardButtonWrap,
+              children: /*#__PURE__*/_jsx(NightButton, {
+                label: clearSuccess ? "Cleared" : isClearing ? "Clearing…" : "Clear All Settings",
+                variant: clearSuccess ? "secondary" : "destructive",
+                size: "md",
+                disabled: isClearing,
+                onPress: handleClearStorage,
+                icon: clearSuccess ? /*#__PURE__*/_jsx(CheckCircle2, {
+                  size: 15,
+                  color: night.color.accent
+                }) : /*#__PURE__*/_jsx(Trash2, {
+                  size: 15,
+                  color: isClearing ? night.color.textTertiary : night.color.danger
+                })
+              })
+            })]
+          })]
+        })), desktopSyncStatus && desktopSyncStatus.state !== "idle" && renderSection("Desktop Sync", /*#__PURE__*/_jsxs(NightCard, {
+          glass: true,
+          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+            activeOpacity: 0.7,
+            onPress: () => toggleSettingExpanded("desktopSync"),
+            accessibilityLabel: "Buoy Desktop",
+            style: styles.settingRow,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.rowInfo,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.rowLabel,
+                children: "Buoy Desktop"
+              })
+            }), desktopSyncStatus.state === "connected" ? /*#__PURE__*/_jsx(NightBadge, {
+              label: "Connected",
+              tone: "accent"
+            }) : desktopSyncStatus.state === "connecting" ? /*#__PURE__*/_jsx(NightBadge, {
+              label: "Connecting\u2026",
+              tone: "neutral"
+            }) : /*#__PURE__*/_jsx(NightBadge, {
+              label: "Retrying",
+              tone: "warning"
+            }), expandedSettings.has("desktopSync") ? /*#__PURE__*/_jsx(ChevronDown, {
+              size: 16,
+              color: night.color.textTertiary
+            }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+              size: 16,
+              color: night.color.textTertiary
+            })]
+          }), expandedSettings.has("desktopSync") && /*#__PURE__*/_jsxs(View, {
+            style: styles.settingRowBody,
+            children: [/*#__PURE__*/_jsxs(Text, {
+              style: styles.settingRowBodyText,
+              children: [desktopSyncStatus.state === "connected" ? "Streaming tool data to Buoy Desktop at " : "Trying to reach Buoy Desktop at ", /*#__PURE__*/_jsx(Text, {
+                style: styles.footnoteMono,
+                children: desktopSyncStatus.targetURL ?? "(unknown URL)"
+              }), desktopSyncStatus.state !== "connected" && " — is the desktop app running? Override with the externalSync socketURL option if it runs elsewhere."]
+            }), desktopSyncStatus.state === "retrying" && desktopSyncStatus.lastError && /*#__PURE__*/_jsxs(Text, {
+              style: [styles.settingRowBodyText, styles.bodyWarning],
+              children: ["Last error: ", desktopSyncStatus.lastError]
+            })]
+          })]
+        })), renderSection("Modal Behavior", /*#__PURE__*/_jsx(NightCard, {
+          glass: true,
+          children: /*#__PURE__*/_jsxs(NightRows, {
+            children: [renderGlobalSettingRow("enableSharedModalDimensions", "Shared Modal Size", "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."), Platform.OS !== "web" ? renderGlobalSettingRow("expandableWindowControls", "Expand Controls", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access.") : null]
+          })
+        }))]
+      }), activeTab === "pro" && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [renderSection("License", /*#__PURE__*/_jsx(NightCard, {
+          glass: true,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.settingRow,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.rowInfo,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.rowLabel,
+                children: "License Status"
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              testID: "buoy-settings-license-status",
+              accessibilityLabel: isPro ? "License: Active" : "License: Free",
+              children: isPro ? /*#__PURE__*/_jsx(NightBadge, {
+                label: "Active",
+                tone: "accent"
+              }) : /*#__PURE__*/_jsx(NightBadge, {
+                label: "Free",
+                tone: "neutral"
+              })
+            })]
+          })
+        }), /*#__PURE__*/_jsx(NightFootnote, {
+          children: isPro ? "You have full access to all Buoy DevTools features." : licenseError ? licenseErrorIsTransport ? `Couldn't reach the license server (${licenseError}). A VPN or corporate proxy can block buoy.gg — turn it off and reload. Your key hasn't been rejected.` : `License check failed: ${licenseError}.` : "Upgrade to Pro to unlock all features and support development."
+        })), !isPro && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [renderSection("Pro Features", /*#__PURE__*/_jsx(NightCard, {
+            glass: true,
+            children: /*#__PURE__*/_jsx(NightRows, {
+              children: ["Advanced Settings", "Priority Support"].map(feature => /*#__PURE__*/_jsxs(View, {
+                style: styles.featureRow,
+                children: [/*#__PURE__*/_jsx(CheckCircle2, {
+                  size: 16,
+                  color: night.color.accent
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.rowLabel,
+                  children: feature
+                })]
+              }, feature))
+            })
+          })), /*#__PURE__*/_jsx(NightButton, {
+            label: "Upgrade to Pro",
+            variant: "primary",
+            size: "lg",
+            onPress: () => setShowLicenseModal(true)
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(LicenseEntryModal, {
+      visible: showLicenseModal,
+      onClose: () => setShowLicenseModal(false),
+      onSuccess: () => setShowLicenseModal(false)
+    })]
+  });
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    zIndex: zIndex,
+    variant: "night",
+    header: {
+      showToggleButton: false,
+      customContent: /*#__PURE__*/_jsx(View, {
+        style: styles.headerRow,
+        children: /*#__PURE__*/_jsx(NightSegmented, {
+          glass: true,
+          tabs: [{
+            key: "floating",
+            label: "Floating"
+          }, {
+            key: "settings",
+            label: "Settings"
+          }, {
+            key: "pro",
+            label: "Pro"
+          }],
+          activeKey: activeTab,
+          onChange: tab => setActiveTab(tab)
+        })
+      })
+    },
+    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.
+ *
+ * Note: This function doesn't have access to availableApps, so it can only
+ * enable tools that are explicitly listed in the config arrays.
+ * For auto-enabling all dial tools, the generateDefaultSettings function
+ * (which has access to availableApps) handles that case.
+ */
+const createDefaultsFromConfig = (defaultFloatingTools, defaultDialTools) => {
+  const floatingSet = new Set(defaultFloatingTools ?? []);
+  const dialSet = new Set(defaultDialTools ?? []);
+
+  // Build dial tools record from defaults
+  // Note: If no defaults specified, dialTools will be empty here
+  // but generateDefaultSettings will auto-enable all tools when it has access to availableApps
+  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.
+ */
+/**
+ * Session cache for the values the settings modal loads asynchronously on mount.
+ *
+ * Without it every open renders three times: once with defaults, then again as
+ * each of the persisted reads (settings, active tab, storage backend) resolves —
+ * and each of those re-renders rebuilds the whole tool list. The values cannot
+ * change behind our back (writes go through this module, and settingsBus
+ * broadcasts them), so after the first open we can render the real values
+ * immediately and only re-render if a read actually came back different.
+ */
+let cachedSettings = null;
+let cachedActiveTab = null;
+let cachedStorageBackend = null;
+
+/** Cheap structural equality — these objects are small and JSON-safe. */
+const sameSettings = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+// Every surface that changes settings broadcasts on the bus, so listening here
+// keeps the cache authoritative rather than merely last-seen — otherwise a
+// change made while the modal was unmounted would show stale for one frame.
+// Registered for the app's lifetime on purpose; there is nothing to unsubscribe.
+settingsBus.addListener(payload => {
+  if (payload) cachedSettings = payload;
+});
+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 persistentStorage.getItem(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,
+    // Transparent so JsModal's night star field shows through everything.
+    backgroundColor: "transparent"
+  },
+  // Header — the segmented control. The window controls are cleared
+  // vertically by JsModal's drag-indicator strip, so this runs full width.
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingLeft: night.gutter,
+    paddingRight: night.gutter,
+    paddingBottom: 8
+  },
+  // Scroll content — labeled groups on a 24pt rhythm (Everlights create screen)
+  scrollContent: {
+    flex: 1
+  },
+  scrollContainer: {
+    paddingHorizontal: night.gutter,
+    paddingTop: 8,
+    paddingBottom: 24,
+    gap: night.groupGap
+  },
+  // Rows
+  toolRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: night.rowPadH,
+    paddingVertical: 12
+  },
+  settingRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: night.rowPadH,
+    paddingVertical: night.rowPadV,
+    minHeight: 52
+  },
+  featureRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: night.rowPadH,
+    paddingVertical: 12
+  },
+  rowDisabled: {
+    opacity: 0.4
+  },
+  toolIconSlot: {
+    width: 24,
+    alignItems: "center"
+  },
+  rowInfo: {
+    flex: 1,
+    gap: 2
+  },
+  rowLabel: {
+    color: night.color.text,
+    fontSize: night.font.row,
+    fontWeight: "500"
+  },
+  rowCaption: {
+    color: night.color.textTertiary,
+    fontSize: night.font.label
+  },
+  // Expanded body under a global-setting row
+  settingRowBody: {
+    paddingHorizontal: night.rowPadH,
+    paddingBottom: night.rowPadV,
+    gap: 6
+  },
+  settingRowBodyText: {
+    color: night.color.textSecondary,
+    fontSize: night.font.caption,
+    lineHeight: night.font.caption * 1.45
+  },
+  settingRowBodyHint: {
+    color: night.color.textTertiary,
+    fontSize: night.font.caption,
+    lineHeight: night.font.caption * 1.45
+  },
+  bodyWarning: {
+    color: night.color.warning
+  },
+  bodyDanger: {
+    color: night.color.danger
+  },
+  // Buttons that live inside a card
+  cardButtonWrap: {
+    paddingHorizontal: night.cardPad,
+    paddingTop: 10,
+    paddingBottom: night.cardPad
+  },
+  // Storage expanded key list
+  storageExpanded: {
+    paddingHorizontal: night.rowPadH,
+    paddingVertical: 12,
+    gap: 8
+  },
+  storageExpandedHeader: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  storageExpandedTitle: {
+    flex: 1,
+    color: night.color.textSecondary,
+    fontSize: night.font.micro,
+    fontWeight: "600",
+    letterSpacing: 0.5
+  },
+  storageExpandedCount: {
+    color: night.color.textTertiary,
+    fontSize: night.font.micro
+  },
+  storageKeysList: {
+    maxHeight: 150
+  },
+  storageKeyItem: {
+    backgroundColor: night.color.glassElevated,
+    borderRadius: night.radius.segment,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    marginBottom: 4
+  },
+  storageKeyText: {
+    color: night.color.textSecondary,
+    fontSize: night.font.micro,
+    fontFamily: monoFont
+  },
+  storageKeyEmpty: {
+    color: night.color.textTertiary,
+    fontSize: night.font.caption,
+    fontStyle: "italic"
+  },
+  // Footnote inline code
+  footnoteMono: {
+    fontFamily: monoFont,
+    fontSize: night.font.label,
+    color: night.color.textSecondary
+  }
+});