@buoy-gg/core 7.0.26 → 7.0.27

package/lib/commonjs/floatingMenu/DevToolsSettingsModal.js

@@ -11,6 +11,7 @@ var _useDesktopSyncStatus = require("./useDesktopSyncStatus.js");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
 var _DefaultConfigContext = require("./DefaultConfigContext.js");
+var _AppIcon = require("./AppIcon.js");
 var _jsxRuntime = require("react/jsx-runtime");
 const STORAGE_KEY = "@react_buoy_dev_tools_settings";
 const MAX_DIAL_SLOTS = 6;
@@ -87,6 +88,12 @@ const mergeWithDefaults = (defaults, stored, options) => {
  * 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.
  *
@@ -138,6 +145,10 @@ const generateDefaultSettings = (availableApps = [], defaultFloatingTools, defau
 /**
  * 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.
  */
 const DevToolsSettingsModal = ({
   visible,
@@ -154,11 +165,27 @@ const DevToolsSettingsModal = ({
   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)("floating");
-  const [activeTabLoaded, setActiveTabLoaded] = (0, _react.useState)(false);
+  const [settings, setSettings] = (0, _react.useState)(initialSettings || cachedSettings || defaultSettings);
+  const [activeTab, setActiveTab] = (0, _react.useState)(cachedActiveTab ?? "floating");
+  const [activeTabLoaded, setActiveTabLoaded] = (0, _react.useState)(cachedActiveTab !== null);
   const [expandedSettings, setExpandedSettings] = (0, _react.useState)(new Set());
   const [showLicenseModal, setShowLicenseModal] = (0, _react.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] = (0, _react.useState)(false);
+  (0, _react.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 = (0, _useDesktopSyncStatus.useDesktopSyncStatus)();
@@ -169,7 +196,9 @@ const DevToolsSettingsModal = ({
       try {
         const savedTab = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.settings.activeTab());
         if (savedTab && ["floating", "settings", "pro"].includes(savedTab)) {
-          setActiveTab(savedTab);
+          const tab = savedTab;
+          cachedActiveTab = tab;
+          setActiveTab(prev => prev === tab ? prev : tab);
         }
       } catch (error) {
         // Failed to load active tab - use default
@@ -194,18 +223,13 @@ const DevToolsSettingsModal = ({
   const useLicenseHook = getUseLicense();
   const license = useLicenseHook?.();
   const isPro = license?.isPro ?? false;
-  const [storageBackend, setStorageBackend] = (0, _react.useState)(null);
+  const [storageBackend, setStorageBackend] = (0, _react.useState)(cachedStorageBackend);
   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
@@ -220,10 +244,12 @@ const DevToolsSettingsModal = ({
           allowedDialKeys,
           allowedFloatingKeys
         });
-        setSettings(merged);
+        cachedSettings = merged;
+        setSettings(prev => sameSettings(prev, merged) ? prev : merged);
         return;
       }
-      setSettings(defaultSettings);
+      cachedSettings = defaultSettings;
+      setSettings(prev => sameSettings(prev, defaultSettings) ? prev : defaultSettings);
     } catch (error) {
       console.error("Failed to load dev tools settings:", error);
       setSettings(defaultSettings);
@@ -235,7 +261,10 @@ const DevToolsSettingsModal = ({
 
   // Load storage backend type
   (0, _react.useEffect)(() => {
-    (0, _sharedUi.getStorageBackendType)().then(setStorageBackend);
+    (0, _sharedUi.getStorageBackendType)().then(backend => {
+      cachedStorageBackend = backend;
+      setStorageBackend(prev => prev === backend ? prev : backend);
+    });
   }, []);
 
   // Load saved keys when storage card is expanded
@@ -258,6 +287,7 @@ const DevToolsSettingsModal = ({
         dialTools: enforceDialLimit(newSettings.dialTools)
       };
       await _sharedUi.persistentStorage.setItem(STORAGE_KEY, JSON.stringify(limitedSettings));
+      cachedSettings = limitedSettings;
       setSettings(limitedSettings);
       onSettingsChange?.(limitedSettings);
       // Notify listeners (e.g., floating bubble) to refresh immediately
@@ -304,49 +334,6 @@ const DevToolsSettingsModal = ({
     }
   };
 
-  // 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);
-    }
-  };
-
   // Modal is fixed to bottom sheet mode
   const handleModeChange = (0, _react.useCallback)(_mode => {
     // Mode changes handled by JsModal
@@ -364,153 +351,161 @@ const DevToolsSettingsModal = ({
   };
   const getToolLabel = tool => {
     if (tool === "environment") {
-      return "ENV BADGE";
+      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
+  const getToolIcon = tool => {
+    if (!iconsReady) return null;
+    switch (tool) {
+      case "query":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.QueryIcon, {
+          size: 18
+        });
+      case "env":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EnvIcon, {
+          size: 18
+        });
+      case "sentry":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SentryBugIcon, {
+          size: 18,
+          colorPreset: "red",
+          noBackground: true
+        });
+      case "storage":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.StorageIcon, {
+          size: 18,
+          bgColor: _sharedUi.night.color.surface
+        });
+      case "wifi":
+      case "query-wifi-toggle":
+        // Support both IDs for wifi toggle
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.WifiCircuitIcon, {
+          size: 18,
+          colorPreset: "green",
+          strength: 4,
+          noBackground: true
+        });
+      case "route-events":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.RoutesIcon, {
+          size: 18,
+          bgColor: _sharedUi.night.color.surface
+        });
+      case "network":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.NetworkIcon, {
+          size: 18
+        });
+      case "environment":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EnvIcon, {
+          size: 18
+        });
+      case "debug-borders":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Layers, {
+          size: 18,
+          color: _sharedUi.night.color.accent
+        });
+      case "highlight-updates":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RenderCountIcon, {
+          size: 18,
+          color: _sharedUi.night.color.accent
+        });
+      case "highlight-updates-modal":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.HighlighterIcon, {
+          size: 18
+        });
+      case "redux":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.ReduxIcon, {
+          size: 18
+        });
+      case "image-overlay":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ImageOverlayIcon, {
+          size: 18
+        });
+      case "events":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EventsIcon, {
+          size: 18
+        });
+      case "zustand":
+        try {
+          // @ts-ignore - Optional package
+          const {
+            ZustandIcon
+          } = require("@buoy-gg/zustand");
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(ZustandIcon, {
+            size: 18
           });
-        case "redux":
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.ReduxIcon, {
-            size: 16
+        } catch {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Info, {
+            size: 18,
+            color: _sharedUi.night.color.textSecondary
           });
-        case "image-overlay":
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ImageOverlayIcon, {
-            size: 16
+        }
+      case "jotai":
+        try {
+          // @ts-ignore - Optional package
+          const {
+            JotaiIcon
+          } = require("@buoy-gg/jotai");
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(JotaiIcon, {
+            size: 18
           });
-        case "events":
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EventsIcon, {
-            size: 16
+        } catch {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Info, {
+            size: 18,
+            color: _sharedUi.night.color.textSecondary
           });
-        case "zustand":
-          try {
-            // @ts-ignore - Optional package
-            const {
-              ZustandIcon
-            } = require("@buoy-gg/zustand");
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(ZustandIcon, {
-              size: 16
-            });
-          } catch {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Info, {
-              size: 16,
-              color: _sharedUi.buoyColors.textSecondary
-            });
-          }
-        case "jotai":
-          try {
-            // @ts-ignore - Optional package
-            const {
-              JotaiIcon
-            } = require("@buoy-gg/jotai");
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(JotaiIcon, {
-              size: 16
-            });
-          } catch {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Info, {
-              size: 16,
-              color: _sharedUi.buoyColors.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 (0, _AppIcon.renderAppIcon)(app.icon, {
+              slot: "row",
+              size: 18,
+              color: app.color
             });
           }
-        default:
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Info, {
-            size: 16,
-            color: _sharedUi.buoyColors.textSecondary
+            size: 18,
+            color: _sharedUi.night.color.textSecondary
           });
-      }
-    };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      activeOpacity: disabled ? 1 : 0.85,
+        }
+    }
+  };
+
+  /**
+   * 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__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      activeOpacity: disabled ? 1 : 0.7,
       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"
-            })
-          })]
-        })
-      })
+      accessibilityLabel: getToolLabel(keyName),
+      style: [styles.toolRow, disabled && styles.rowDisabled],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.toolIconSlot,
+        children: getToolIcon(keyName)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.rowInfo,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.rowLabel,
+          children: [getToolLabel(keyName), disabled ? "  ·  max 6" : ""]
+        }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.rowCaption,
+          numberOfLines: 1,
+          children: description
+        }) : null]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightSwitch, {
+        value: value,
+        disabled: disabled,
+        onValueChange: () => onToggle()
+      })]
     }, keyName);
   };
 
@@ -527,609 +522,252 @@ const DevToolsSettingsModal = ({
     });
   };
 
-  // Render a global setting toggle card with expandable description
-  const renderGlobalSettingCard = (settingKey, label, category, shortDescription, fullDescription, recommendation) => {
+  /**
+   * 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);
-    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,
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        activeOpacity: 0.7,
         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
-          }]
-        }],
+        accessibilityLabel: label,
+        style: styles.settingRow,
         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
-            })]
+          style: styles.rowInfo,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.rowLabel,
+            children: label
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.rowCaption,
+            numberOfLines: isExpanded ? 0 : 1,
+            children: shortDescription
           })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightSwitch, {
+          value: value,
+          onValueChange: () => toggleGlobalSetting(settingKey)
         })]
-      })
+      }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.settingRowBody,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.settingRowBodyText,
+          children: fullDescription
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.settingRowBodyHint,
+          children: recommendation
+        })]
+      })]
     }, settingKey);
   };
+
+  /** Section = uppercase label, card, optional footnote(s) under it. */
+  const renderSection = (label, card, footnotes) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightSectionLabel, {
+      children: label
+    }), card, footnotes]
+  });
+  const storageBadge = storageBackend === "filesystem" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightBadge, {
+    label: "File System",
+    tone: "accent"
+  }) : storageBackend === "asyncstorage" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightBadge, {
+    label: "Async Storage",
+    tone: "warning"
+  }) : storageBackend === "memory" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightBadge, {
+    label: "Memory",
+    tone: "danger"
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightBadge, {
+    label: "Loading\u2026",
+    tone: "neutral"
+  });
   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 === "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,
+      children: [activeTab === "floating" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: renderSection("Floating Tools", /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightCard, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightRows, {
+            children: Object.entries(settings.floatingTools).map(([key, value]) => renderToolRow(key, value, false, () => toggleFloatingTool(key)))
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightFootnote, {
+          children: "Tools switched on here appear in the floating bubble row."
+        }))
+      }), activeTab === "settings" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [renderSection("Background", /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightCard, {
+          padded: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.BackgroundSwitcher, {
+            embedded: true
+          })
+        })), renderSection("Storage", /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.NightCard, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            activeOpacity: 0.7,
             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."]
+            accessibilityLabel: "Storage Type",
+            style: styles.settingRow,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.rowInfo,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.rowLabel,
+                children: "Storage Type"
+              })
+            }), storageBadge, isStorageExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
+              size: 16,
+              color: _sharedUi.night.color.textTertiary
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRightIcon, {
+              size: 16,
+              color: _sharedUi.night.color.textTertiary
             })]
-          }), storageBackend === "memory" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.adviceHintsContainer,
+          }), isStorageExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             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."]
+              style: styles.settingRowBody,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 === "memory" ? "Settings are stored in memory only and will be lost on app restart." : "Checking storage backend…"
+              }), storageBackend === "asyncstorage" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.settingRowBodyText, styles.bodyWarning],
+                children: "Install expo-file-system to persist settings through logout flows."
+              }), storageBackend === "memory" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(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,
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightSeparator, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.storageExpanded,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.storageExpandedHeader,
                 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"
-            })]
-          })]
-        }), desktopSyncStatus && desktopSyncStatus.state !== "idle" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.storageStatusCard, {
-            borderColor: desktopSyncStatus.state === "connected" ? _sharedUi.buoyColors.success + "60" : _sharedUi.buoyColors.warning + "60"
-          }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.storageStatusHeader,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.storageStatusIcon, {
-                backgroundColor: desktopSyncStatus.state === "connected" ? _sharedUi.buoyColors.success + "15" : _sharedUi.buoyColors.warning + "15"
-              }],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Globe, {
-                size: 18,
-                color: desktopSyncStatus.state === "connected" ? _sharedUi.buoyColors.success : _sharedUi.buoyColors.warning
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.storageStatusInfo,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.storageStatusLabel,
-                children: "DESKTOP SYNC"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                style: styles.storageStatusBadgeContainer,
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                  style: [styles.storageStatusBadge, {
-                    backgroundColor: desktopSyncStatus.state === "connected" ? _sharedUi.buoyColors.success + "20" : _sharedUi.buoyColors.warning + "20",
-                    borderColor: desktopSyncStatus.state === "connected" ? _sharedUi.buoyColors.success + "60" : _sharedUi.buoyColors.warning + "60"
-                  }],
+                  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.storageKeyEmpty,
+                children: "Loading\u2026"
+              }) : savedKeys.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.storageKeyEmpty,
+                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.storageStatusBadgeText, {
-                      color: desktopSyncStatus.state === "connected" ? _sharedUi.buoyColors.success : _sharedUi.buoyColors.warning
-                    }],
-                    children: desktopSyncStatus.state === "connected" ? "CONNECTED" : desktopSyncStatus.state === "connecting" ? "CONNECTING..." : "RETRYING"
+                    style: styles.storageKeyText,
+                    numberOfLines: 1,
+                    children: key.replace("@react_buoy_", "")
                   })
-                }), desktopSyncStatus.state === "connected" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle2, {
-                  size: 14,
-                  color: _sharedUi.buoyColors.success
-                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
-                  size: 14,
-                  color: _sharedUi.buoyColors.warning
-                })]
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: styles.storageStatusDescription,
-            children: [desktopSyncStatus.state === "connected" ? "Streaming tool data to Buoy Desktop at " : "Trying to reach Buoy Desktop at ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.adviceHintCode,
-              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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.adviceHint,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
-              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: "Last error:"
-              }), " ", desktopSyncStatus.lastError]
-            })]
-          })]
-        }), 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."), _reactNative.Platform.OS !== "web" && renderGlobalSettingCard("expandableWindowControls", "EXPAND CONTROLS", "MODAL", "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 — similar to iPad window controls. 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 (e.g. when using a mouse or simulator)."), 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"
+                }, key))
               })]
             }), /*#__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
+              style: styles.cardButtonWrap,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightButton, {
+                label: clearSuccess ? "Cleared" : isClearing ? "Clearing…" : "Clear All Settings",
+                variant: clearSuccess ? "secondary" : "destructive",
+                size: "md",
+                disabled: isClearing,
+                onPress: handleClearStorage,
+                icon: clearSuccess ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle2, {
+                  size: 15,
+                  color: _sharedUi.night.color.accent
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+                  size: 15,
+                  color: isClearing ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.danger
+                })
               })
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.exportHintBanner,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-              size: 14,
-              color: _sharedUi.buoyColors.textMuted
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.exportHintText,
-              children: "Configure tools, then export as props for your team."
-            })]
-          }), isExportExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.exportCodeContainer,
+          })]
+        })), desktopSyncStatus && desktopSyncStatus.state !== "idle" && renderSection("Desktop Sync", /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.NightCard, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            activeOpacity: 0.7,
+            onPress: () => toggleSettingExpanded("desktopSync"),
+            accessibilityLabel: "Buoy Desktop",
+            style: styles.settingRow,
             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,
+              style: styles.rowInfo,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.exportJsonComment,
-                children: "// No tools enabled"
+                style: styles.rowLabel,
+                children: "Buoy Desktop"
               })
-            }), /*#__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."]
+            }), desktopSyncStatus.state === "connected" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightBadge, {
+              label: "Connected",
+              tone: "accent"
+            }) : desktopSyncStatus.state === "connecting" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightBadge, {
+              label: "Connecting\u2026",
+              tone: "neutral"
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightBadge, {
+              label: "Retrying",
+              tone: "warning"
+            }), expandedSettings.has("desktopSync") ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
+              size: 16,
+              color: _sharedUi.night.color.textTertiary
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRightIcon, {
+              size: 16,
+              color: _sharedUi.night.color.textTertiary
             })]
-          }), /*#__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"
+          }), expandedSettings.has("desktopSync") && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.settingRowBody,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+              style: styles.settingRowBodyText,
+              children: [desktopSyncStatus.state === "connected" ? "Streaming tool data to Buoy Desktop at " : "Trying to reach Buoy Desktop at ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+              style: [styles.settingRowBodyText, styles.bodyWarning],
+              children: ["Last error: ", desktopSyncStatus.lastError]
             })]
           })]
-        })]
-      }), activeTab === "pro" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.proContainer,
-        children: isPro ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        })), renderSection("Modal Behavior", /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightCard, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.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."), _reactNative.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [renderSection("License", /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightCard, {
           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,
+            style: styles.settingRow,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.rowInfo,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.proActiveDescription,
-                children: "You have full access to all Buoy DevTools features."
+                style: styles.rowLabel,
+                children: "License Status"
               })
+            }), isPro ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightBadge, {
+              label: "Active",
+              tone: "accent"
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightBadge, {
+              label: "Free",
+              tone: "neutral"
             })]
           })
-        }) : /*#__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.jsx)(_sharedUi.NightFootnote, {
+          children: isPro ? "You have full access to all Buoy DevTools features." : "Upgrade to Pro to unlock all features and support development."
+        })), !isPro && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [renderSection("Pro Features", /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightCard, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightRows, {
+              children: ["Advanced Settings", "Priority Support"].map(feature => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.featureRow,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle2, {
+                  size: 16,
+                  color: _sharedUi.night.color.accent
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.rowLabel,
+                  children: feature
                 })]
-              })
-            })]
-          }), /*#__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"
-            })]
+              }, feature))
+            })
+          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightButton, {
+            label: "Upgrade to Pro",
+            variant: "primary",
+            size: "lg",
+            onPress: () => setShowLicenseModal(true)
           })]
-        })
+        })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.LicenseEntryModal, {
       visible: showLicenseModal,
@@ -1140,27 +778,25 @@ const DevToolsSettingsModal = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
     visible: visible,
     onClose: onClose,
+    variant: "night",
     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: "floating",
-              label: "FLOATING"
-            }, {
-              key: "settings",
-              label: "SETTINGS"
-            }, {
-              key: "pro",
-              label: "PRO"
-            }],
-            activeTab: activeTab,
-            onTabChange: tab => setActiveTab(tab)
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {})]
+      customContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.headerRow,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightSegmented, {
+          tabs: [{
+            key: "floating",
+            label: "Floating"
+          }, {
+            key: "settings",
+            label: "Settings"
+          }, {
+            key: "pro",
+            label: "Pro"
+          }],
+          activeKey: activeTab,
+          onChange: tab => setActiveTab(tab)
+        })
       })
     },
     initialMode: "bottomSheet",
@@ -1236,6 +872,30 @@ const createDefaultsFromConfig = (defaultFloatingTools, defaultDialTools) => {
  * 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.settingsBus.addListener(payload => {
+  if (payload) cachedSettings = payload;
+});
 const useDevToolsSettings = () => {
   // Get team default configuration from context
   const {
@@ -1297,800 +957,144 @@ 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
+    // Transparent so JsModal's night star field shows through everything.
+    backgroundColor: "transparent"
   },
-  tabNavigationContainer: {
-    flex: 1,
+  // Header — the segmented control, inset so it clears the absolutely
+  // positioned window controls on the right.
+  headerRow: {
     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
+    paddingLeft: _sharedUi.night.gutter,
+    paddingRight: 64,
+    paddingBottom: 8
   },
-  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
+  // Scroll content — labeled groups on a 24pt rhythm (Everlights create screen)
   scrollContent: {
     flex: 1
   },
   scrollContainer: {
-    paddingTop: 16,
-    paddingBottom: 24
-  },
-  // Sections
-  section: {
-    marginHorizontal: 16,
-    marginBottom: 24
+    paddingHorizontal: _sharedUi.night.gutter,
+    paddingTop: 8,
+    paddingBottom: 24,
+    gap: _sharedUi.night.groupGap
   },
-  sectionHeader: {
+  // Rows
+  toolRow: {
     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"
+    gap: 12,
+    paddingHorizontal: _sharedUi.night.rowPadH,
+    paddingVertical: 12
   },
-  glassCardInner: {
+  settingRow: {
     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
+    gap: 10,
+    paddingHorizontal: _sharedUi.night.rowPadH,
+    paddingVertical: _sharedUi.night.rowPadV,
+    minHeight: 52
   },
-  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: {
+  featureRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12
+    gap: 10,
+    paddingHorizontal: _sharedUi.night.rowPadH,
+    paddingVertical: 12
   },
-  expandableCardCategory: {
-    backgroundColor: _sharedUi.buoyColors.primary + "20",
-    borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "40",
-    borderRadius: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 4
+  rowDisabled: {
+    opacity: 0.4
   },
-  expandableCardCategoryText: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: _sharedUi.buoyColors.primary,
-    letterSpacing: 0.5
+  toolIconSlot: {
+    width: 24,
+    alignItems: "center"
   },
-  expandableCardTitle: {
+  rowInfo: {
     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"
+    gap: 2
   },
-  storageStatusInfo: {
-    flex: 1
+  rowLabel: {
+    color: _sharedUi.night.color.text,
+    fontSize: _sharedUi.night.font.row,
+    fontWeight: "500"
   },
-  storageStatusLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: _sharedUi.buoyColors.textMuted,
-    letterSpacing: 1,
-    marginBottom: 4
+  rowCaption: {
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: _sharedUi.night.font.label
   },
-  storageStatusBadgeContainer: {
-    flexDirection: "row",
-    alignItems: "center",
+  // Expanded body under a global-setting row
+  settingRowBody: {
+    paddingHorizontal: _sharedUi.night.rowPadH,
+    paddingBottom: _sharedUi.night.rowPadV,
     gap: 6
   },
-  storageStatusBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    borderWidth: 1
-  },
-  storageStatusBadgeText: {
-    fontSize: 11,
-    fontWeight: "700",
-    letterSpacing: 0.5
+  settingRowBodyText: {
+    color: _sharedUi.night.color.textSecondary,
+    fontSize: _sharedUi.night.font.caption,
+    lineHeight: _sharedUi.night.font.caption * 1.45
   },
-  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"
+  settingRowBodyHint: {
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: _sharedUi.night.font.caption,
+    lineHeight: _sharedUi.night.font.caption * 1.45
   },
-  clearStorageButtonDisabled: {
-    opacity: 0.5
+  bodyWarning: {
+    color: _sharedUi.night.color.warning
   },
-  clearStorageButtonSuccess: {
-    backgroundColor: _sharedUi.buoyColors.success + "15",
-    borderColor: _sharedUi.buoyColors.success + "40"
+  bodyDanger: {
+    color: _sharedUi.night.color.danger
   },
-  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
+  // Buttons that live inside a card
+  cardButtonWrap: {
+    paddingHorizontal: _sharedUi.night.cardPad,
+    paddingTop: 10,
+    paddingBottom: _sharedUi.night.cardPad
   },
-  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"
+  // Storage expanded key list
+  storageExpanded: {
+    paddingHorizontal: _sharedUi.night.rowPadH,
+    paddingVertical: 12,
+    gap: 8
   },
   storageExpandedHeader: {
     flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 10
+    alignItems: "center"
   },
   storageExpandedTitle: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: _sharedUi.buoyColors.primary,
-    letterSpacing: 1,
-    flex: 1
+    flex: 1,
+    color: _sharedUi.night.color.textSecondary,
+    fontSize: _sharedUi.night.font.micro,
+    fontWeight: "600",
+    letterSpacing: 0.5
   },
   storageExpandedCount: {
-    fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: _sharedUi.night.font.micro
   },
   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
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
+    borderRadius: _sharedUi.night.radius.segment,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    marginBottom: 4
   },
   storageKeyText: {
-    fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
+    fontSize: _sharedUi.night.font.micro,
     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,
+  storageKeyEmpty: {
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: _sharedUi.night.font.caption,
     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
-  },
-  proFreeDescription: {
-    fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary,
-    lineHeight: 16
-  },
-  proActiveDescription: {
-    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
+  // Footnote inline code
+  footnoteMono: {
+    fontFamily: "monospace",
+    fontSize: _sharedUi.night.font.label,
+    color: _sharedUi.night.color.textSecondary
   }
 });