@buoy-gg/core 7.0.26 → 7.0.27

package/lib/module/floatingMenu/DevToolsSettingsModal.js

@@ -4,14 +4,12 @@ import { useState, useEffect, useCallback, useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Dimensions, Platform } from "react-native";
 import { settingsBus } from "./settingsBus.js";
 import { useDesktopSyncStatus } from "./useDesktopSyncStatus.js";
-import { SentryBugIcon, WifiCircuitIcon, ImageOverlayIcon, RenderCountIcon, Globe, Info, Layers, ChevronRightIcon, ChevronDown, getStorageBackendType, persistentStorage, Database, Trash2, CheckCircle2, AlertTriangle, Zap, FileText, HardDrive, Copy, FileCode, copyToClipboard, LicenseEntryModal, SectionHeader } from "@buoy-gg/shared-ui";
+import { SentryBugIcon, WifiCircuitIcon, ImageOverlayIcon, RenderCountIcon, Info, Layers, ChevronRightIcon, ChevronDown, getStorageBackendType, persistentStorage, Trash2, CheckCircle2, LicenseEntryModal, BackgroundSwitcher, night, NightCard, NightRows, NightSectionLabel, NightFootnote, NightSwitch, NightButton, NightSegmented, NightBadge, NightSeparator } from "@buoy-gg/shared-ui";
 import { EnvIcon, StorageIcon, RoutesIcon, NetworkIcon, QueryIcon, HighlighterIcon, ReduxIcon, EventsIcon } from "@buoy-gg/floating-tools-core";
 import { useDefaultConfig } from "./DefaultConfigContext.js";
+import { renderAppIcon } from "./AppIcon.js";
 import { JsModal, devToolsStorageKeys } from "@buoy-gg/shared-ui";
 import { useSafeAreaInsets } from "@buoy-gg/shared-ui";
-import { ModalHeader } from "@buoy-gg/shared-ui";
-import { TabSelector } from "@buoy-gg/shared-ui";
-import { buoyColors } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const STORAGE_KEY = "@react_buoy_dev_tools_settings";
 const MAX_DIAL_SLOTS = 6;
@@ -88,6 +86,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.
  *
@@ -139,6 +143,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.
  */
 export const DevToolsSettingsModal = ({
   visible,
@@ -155,11 +163,27 @@ export const DevToolsSettingsModal = ({
   const defaultSettings = useMemo(() => generateDefaultSettings(availableApps, defaultFloatingTools, defaultDialTools), [availableApps, defaultFloatingTools, defaultDialTools]);
   const allowedDialKeys = useMemo(() => Object.keys(defaultSettings.dialTools), [defaultSettings]);
   const allowedFloatingKeys = useMemo(() => Object.keys(defaultSettings.floatingTools).filter(key => key !== "environment"), [defaultSettings]);
-  const [settings, setSettings] = useState(initialSettings || defaultSettings);
-  const [activeTab, setActiveTab] = useState("floating");
-  const [activeTabLoaded, setActiveTabLoaded] = useState(false);
+  const [settings, setSettings] = useState(initialSettings || cachedSettings || defaultSettings);
+  const [activeTab, setActiveTab] = useState(cachedActiveTab ?? "floating");
+  const [activeTabLoaded, setActiveTabLoaded] = useState(cachedActiveTab !== null);
   const [expandedSettings, setExpandedSettings] = useState(new Set());
   const [showLicenseModal, setShowLicenseModal] = useState(false);
+  /**
+   * Tool icons are the expensive half of this modal: ~20 of them, each a
+   * data-driven glyph that mounts one view per shape. Rendering them in the
+   * first pass pushed the modal's first paint out to ~240ms, so the tap felt
+   * dead. Holding them back a single frame lets the chrome and the tool rows
+   * paint at ~100ms and the glyphs land during the entrance fade.
+   *
+   * There is no layout shift: `styles.toolIconSlot` is a fixed box, so it
+   * reads as the icon's placeholder until filled.
+   */
+  const [iconsReady, setIconsReady] = useState(false);
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setIconsReady(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
   // null when external-sync isn't installed (or predates the status store);
   // "idle" until AutoExternalSync initializes — the row hides in both cases.
   const desktopSyncStatus = useDesktopSyncStatus();
@@ -170,7 +194,9 @@ export const DevToolsSettingsModal = ({
       try {
         const savedTab = await persistentStorage.getItem(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
@@ -195,18 +221,13 @@ export const DevToolsSettingsModal = ({
   const useLicenseHook = getUseLicense();
   const license = useLicenseHook?.();
   const isPro = license?.isPro ?? false;
-  const [storageBackend, setStorageBackend] = useState(null);
+  const [storageBackend, setStorageBackend] = useState(cachedStorageBackend);
   const [isClearing, setIsClearing] = useState(false);
   const [clearSuccess, setClearSuccess] = useState(false);
   const [isStorageExpanded, setIsStorageExpanded] = useState(false);
   const [savedKeys, setSavedKeys] = useState([]);
   const [savedKeysLoading, setSavedKeysLoading] = useState(false);
-  const [copySuccess, setCopySuccess] = useState(false);
-  const [isExportExpanded, setIsExportExpanded] = useState(false);
   const insets = useSafeAreaInsets();
-
-  // Check if in development mode - used to show dev-only features like Export Config
-  const isDevelopmentMode = typeof __DEV__ !== "undefined" && __DEV__;
   const screenHeight = Dimensions.get("window").height;
   const screenWidth = Dimensions.get("window").width;
   const modalHeight = Math.floor(screenHeight * 0.33); // 1/3 of screen height
@@ -221,10 +242,12 @@ export 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);
@@ -236,7 +259,10 @@ export const DevToolsSettingsModal = ({
 
   // Load storage backend type
   useEffect(() => {
-    getStorageBackendType().then(setStorageBackend);
+    getStorageBackendType().then(backend => {
+      cachedStorageBackend = backend;
+      setStorageBackend(prev => prev === backend ? prev : backend);
+    });
   }, []);
 
   // Load saved keys when storage card is expanded
@@ -259,6 +285,7 @@ export const DevToolsSettingsModal = ({
         dialTools: enforceDialLimit(newSettings.dialTools)
       };
       await persistentStorage.setItem(STORAGE_KEY, JSON.stringify(limitedSettings));
+      cachedSettings = limitedSettings;
       setSettings(limitedSettings);
       onSettingsChange?.(limitedSettings);
       // Notify listeners (e.g., floating bubble) to refresh immediately
@@ -305,49 +332,6 @@ export const DevToolsSettingsModal = ({
     }
   };
 
-  // Get the enabled tools as arrays for display and copy
-  const enabledConfig = useMemo(() => {
-    const enabledFloating = Object.entries(settings.floatingTools).filter(([_, enabled]) => enabled).map(([id]) => id);
-    const enabledDial = Object.entries(settings.dialTools).filter(([_, enabled]) => enabled).map(([id]) => id);
-    return {
-      floating: enabledFloating,
-      dial: enabledDial
-    };
-  }, [settings]);
-
-  // Generate exportable code snippet from current settings
-  // Only outputs the defaultFloatingTools and defaultDialTools props
-  // so users can add them to their existing FloatingDevTools config
-  const generateConfigCode = useCallback(() => {
-    const {
-      floating,
-      dial
-    } = enabledConfig;
-
-    // Build only the default config props (not the full component)
-    const props = [];
-    if (floating.length > 0) {
-      const floatingStr = floating.map(id => `'${id}'`).join(', ');
-      props.push(`defaultFloatingTools={[${floatingStr}]}`);
-    }
-    if (dial.length > 0) {
-      const dialStr = dial.map(id => `'${id}'`).join(', ');
-      props.push(`defaultDialTools={[${dialStr}]}`);
-    }
-    if (props.length === 0) {
-      return `// No tools enabled`;
-    }
-    return props.join('\n');
-  }, [enabledConfig]);
-  const handleCopyConfig = async () => {
-    const code = generateConfigCode();
-    const success = await copyToClipboard(code);
-    if (success) {
-      setCopySuccess(true);
-      setTimeout(() => setCopySuccess(false), 2000);
-    }
-  };
-
   // Modal is fixed to bottom sheet mode
   const handleModeChange = useCallback(_mode => {
     // Mode changes handled by JsModal
@@ -365,153 +349,161 @@ export 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__*/_jsx(QueryIcon, {
-            size: 16
-          });
-        case "env":
-          return /*#__PURE__*/_jsx(EnvIcon, {
-            size: 16
-          });
-        case "sentry":
-          return /*#__PURE__*/_jsx(SentryBugIcon, {
-            size: 16,
-            colorPreset: "red",
-            noBackground: true
-          });
-        case "storage":
-          return /*#__PURE__*/_jsx(StorageIcon, {
-            size: 16
-          });
-        case "wifi":
-        case "query-wifi-toggle":
-          // Support both IDs for wifi toggle
-          return /*#__PURE__*/_jsx(WifiCircuitIcon, {
-            size: 16,
-            colorPreset: "green",
-            strength: 4,
-            noBackground: true
-          });
-        case "route-events":
-          return /*#__PURE__*/_jsx(RoutesIcon, {
-            size: 16
-          });
-        case "network":
-          return /*#__PURE__*/_jsx(NetworkIcon, {
-            size: 16
-          });
-        case "environment":
-          return /*#__PURE__*/_jsx(EnvIcon, {
-            size: 16
-          });
-        case "debug-borders":
-          return /*#__PURE__*/_jsx(Layers, {
-            size: 16,
-            color: buoyColors.primary
-          });
-        case "highlight-updates":
-          return /*#__PURE__*/_jsx(RenderCountIcon, {
-            size: 16,
-            color: buoyColors.primary
-          });
-        case "highlight-updates-modal":
-          return /*#__PURE__*/_jsx(HighlighterIcon, {
-            size: 16
+  const getToolIcon = tool => {
+    if (!iconsReady) return null;
+    switch (tool) {
+      case "query":
+        return /*#__PURE__*/_jsx(QueryIcon, {
+          size: 18
+        });
+      case "env":
+        return /*#__PURE__*/_jsx(EnvIcon, {
+          size: 18
+        });
+      case "sentry":
+        return /*#__PURE__*/_jsx(SentryBugIcon, {
+          size: 18,
+          colorPreset: "red",
+          noBackground: true
+        });
+      case "storage":
+        return /*#__PURE__*/_jsx(StorageIcon, {
+          size: 18,
+          bgColor: night.color.surface
+        });
+      case "wifi":
+      case "query-wifi-toggle":
+        // Support both IDs for wifi toggle
+        return /*#__PURE__*/_jsx(WifiCircuitIcon, {
+          size: 18,
+          colorPreset: "green",
+          strength: 4,
+          noBackground: true
+        });
+      case "route-events":
+        return /*#__PURE__*/_jsx(RoutesIcon, {
+          size: 18,
+          bgColor: night.color.surface
+        });
+      case "network":
+        return /*#__PURE__*/_jsx(NetworkIcon, {
+          size: 18
+        });
+      case "environment":
+        return /*#__PURE__*/_jsx(EnvIcon, {
+          size: 18
+        });
+      case "debug-borders":
+        return /*#__PURE__*/_jsx(Layers, {
+          size: 18,
+          color: night.color.accent
+        });
+      case "highlight-updates":
+        return /*#__PURE__*/_jsx(RenderCountIcon, {
+          size: 18,
+          color: night.color.accent
+        });
+      case "highlight-updates-modal":
+        return /*#__PURE__*/_jsx(HighlighterIcon, {
+          size: 18
+        });
+      case "redux":
+        return /*#__PURE__*/_jsx(ReduxIcon, {
+          size: 18
+        });
+      case "image-overlay":
+        return /*#__PURE__*/_jsx(ImageOverlayIcon, {
+          size: 18
+        });
+      case "events":
+        return /*#__PURE__*/_jsx(EventsIcon, {
+          size: 18
+        });
+      case "zustand":
+        try {
+          // @ts-ignore - Optional package
+          const {
+            ZustandIcon
+          } = require("@buoy-gg/zustand");
+          return /*#__PURE__*/_jsx(ZustandIcon, {
+            size: 18
           });
-        case "redux":
-          return /*#__PURE__*/_jsx(ReduxIcon, {
-            size: 16
+        } catch {
+          return /*#__PURE__*/_jsx(Info, {
+            size: 18,
+            color: night.color.textSecondary
           });
-        case "image-overlay":
-          return /*#__PURE__*/_jsx(ImageOverlayIcon, {
-            size: 16
+        }
+      case "jotai":
+        try {
+          // @ts-ignore - Optional package
+          const {
+            JotaiIcon
+          } = require("@buoy-gg/jotai");
+          return /*#__PURE__*/_jsx(JotaiIcon, {
+            size: 18
           });
-        case "events":
-          return /*#__PURE__*/_jsx(EventsIcon, {
-            size: 16
+        } catch {
+          return /*#__PURE__*/_jsx(Info, {
+            size: 18,
+            color: night.color.textSecondary
           });
-        case "zustand":
-          try {
-            // @ts-ignore - Optional package
-            const {
-              ZustandIcon
-            } = require("@buoy-gg/zustand");
-            return /*#__PURE__*/_jsx(ZustandIcon, {
-              size: 16
-            });
-          } catch {
-            return /*#__PURE__*/_jsx(Info, {
-              size: 16,
-              color: buoyColors.textSecondary
-            });
-          }
-        case "jotai":
-          try {
-            // @ts-ignore - Optional package
-            const {
-              JotaiIcon
-            } = require("@buoy-gg/jotai");
-            return /*#__PURE__*/_jsx(JotaiIcon, {
-              size: 16
-            });
-          } catch {
-            return /*#__PURE__*/_jsx(Info, {
-              size: 16,
-              color: 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 renderAppIcon(app.icon, {
+              slot: "row",
+              size: 18,
+              color: app.color
             });
           }
-        default:
           return /*#__PURE__*/_jsx(Info, {
-            size: 16,
-            color: buoyColors.textSecondary
+            size: 18,
+            color: night.color.textSecondary
           });
-      }
-    };
-    return /*#__PURE__*/_jsx(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__*/_jsxs(TouchableOpacity, {
+      activeOpacity: disabled ? 1 : 0.7,
       onPress: () => !disabled && onToggle(),
-      style: {
-        marginBottom: 8,
-        opacity: disabled ? 0.5 : 1
-      },
-      children: /*#__PURE__*/_jsx(View, {
-        style: [styles.glassCard, value && styles.glassCardActive],
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.glassCardInner,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.iconContainer, value && styles.iconContainerActive],
-            children: getToolIcon(keyName)
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.toolInfo,
-            children: [/*#__PURE__*/_jsxs(Text, {
-              style: [styles.toolName, value && styles.toolNameActive],
-              children: [getToolLabel(keyName), disabled ? " (MAX 6)" : ""]
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.toolDescription,
-              numberOfLines: 1,
-              children: getToolDescription(keyName)
-            })]
-          }), /*#__PURE__*/_jsx(View, {
-            style: [styles.pillToggle, value ? styles.pillToggleOn : styles.pillToggleOff, disabled && {
-              opacity: 0.5
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.pillToggleText, value ? styles.pillToggleTextOn : styles.pillToggleTextOff],
-              children: value ? "ON" : "OFF"
-            })
-          })]
-        })
-      })
+      accessibilityLabel: getToolLabel(keyName),
+      style: [styles.toolRow, disabled && styles.rowDisabled],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.toolIconSlot,
+        children: getToolIcon(keyName)
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.rowInfo,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: styles.rowLabel,
+          children: [getToolLabel(keyName), disabled ? "  ·  max 6" : ""]
+        }), description ? /*#__PURE__*/_jsx(Text, {
+          style: styles.rowCaption,
+          numberOfLines: 1,
+          children: description
+        }) : null]
+      }), /*#__PURE__*/_jsx(NightSwitch, {
+        value: value,
+        disabled: disabled,
+        onValueChange: () => onToggle()
+      })]
     }, keyName);
   };
 
@@ -528,609 +520,252 @@ export 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 = buoyColors.primary;
-    return /*#__PURE__*/_jsx(View, {
-      style: {
-        marginBottom: 10
-      },
-      children: /*#__PURE__*/_jsxs(TouchableOpacity, {
-        activeOpacity: 0.85,
+    return /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsxs(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__*/_jsxs(View, {
-          style: styles.expandableCardHeader,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: styles.expandableCardCategory,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.expandableCardCategoryText,
-              children: category
-            })
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.expandableCardTitle,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.expandableCardTitleText,
-              children: label
-            }), !isExpanded && /*#__PURE__*/_jsx(Text, {
-              style: styles.expandableCardSubtitle,
-              numberOfLines: 1,
-              children: shortDescription
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.expandableCardActions,
-            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-              onPress: () => toggleGlobalSetting(settingKey),
-              activeOpacity: 0.8,
-              style: [styles.pillToggle, {
-                backgroundColor: value ? `${buoyColors.success}33` : buoyColors.hover,
-                borderColor: value ? `${buoyColors.success}88` : buoyColors.border,
-                shadowColor: value ? buoyColors.success : "transparent",
-                shadowOffset: {
-                  width: 0,
-                  height: 0
-                },
-                shadowOpacity: value ? 0.4 : 0,
-                shadowRadius: value ? 8 : 0
-              }],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: [styles.pillToggleText, {
-                  color: value ? buoyColors.success : buoyColors.textMuted
-                }],
-                children: value ? "ON" : "OFF"
-              })
-            }), isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
-              size: 18,
-              color: "#7F91B2"
-            }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
-              size: 18,
-              color: "#7F91B2"
-            })]
-          })]
-        }), isExpanded && /*#__PURE__*/_jsxs(View, {
-          style: styles.expandableCardBody,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.expandableCardSection,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.expandableCardSectionTitle,
-              children: "DESCRIPTION"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.expandableCardSectionText,
-              children: fullDescription
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.expandableCardSection,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.expandableCardSectionTitle,
-              children: "RECOMMENDATION"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.expandableCardSectionText,
-              children: recommendation
-            })]
+          style: styles.rowInfo,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.rowLabel,
+            children: label
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.rowCaption,
+            numberOfLines: isExpanded ? 0 : 1,
+            children: shortDescription
           })]
+        }), /*#__PURE__*/_jsx(NightSwitch, {
+          value: value,
+          onValueChange: () => toggleGlobalSetting(settingKey)
         })]
-      })
+      }), isExpanded && /*#__PURE__*/_jsxs(View, {
+        style: styles.settingRowBody,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.settingRowBodyText,
+          children: fullDescription
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.settingRowBodyHint,
+          children: recommendation
+        })]
+      })]
     }, settingKey);
   };
+
+  /** Section = uppercase label, card, optional footnote(s) under it. */
+  const renderSection = (label, card, footnotes) => /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(NightSectionLabel, {
+      children: label
+    }), card, footnotes]
+  });
+  const storageBadge = storageBackend === "filesystem" ? /*#__PURE__*/_jsx(NightBadge, {
+    label: "File System",
+    tone: "accent"
+  }) : storageBackend === "asyncstorage" ? /*#__PURE__*/_jsx(NightBadge, {
+    label: "Async Storage",
+    tone: "warning"
+  }) : storageBackend === "memory" ? /*#__PURE__*/_jsx(NightBadge, {
+    label: "Memory",
+    tone: "danger"
+  }) : /*#__PURE__*/_jsx(NightBadge, {
+    label: "Loading\u2026",
+    tone: "neutral"
+  });
   const renderContent = () => /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     children: [/*#__PURE__*/_jsxs(ScrollView, {
       style: styles.scrollContent,
       showsVerticalScrollIndicator: false,
       contentContainerStyle: styles.scrollContainer,
-      children: [activeTab === "floating" && /*#__PURE__*/_jsx(View, {
-        style: styles.section,
-        children: Object.entries(settings.floatingTools).map(([key, value]) => renderToolCard(key, value, false, () => toggleFloatingTool(key)))
-      }), activeTab === "settings" && /*#__PURE__*/_jsxs(View, {
-        style: styles.section,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: [styles.storageStatusCard, isStorageExpanded && {
-            borderColor: storageBackend === "filesystem" ? buoyColors.success + "60" : storageBackend === "asyncstorage" ? buoyColors.warning + "60" : buoyColors.error + "60"
-          }],
-          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            activeOpacity: 0.8,
+      children: [activeTab === "floating" && /*#__PURE__*/_jsx(_Fragment, {
+        children: renderSection("Floating Tools", /*#__PURE__*/_jsx(NightCard, {
+          children: /*#__PURE__*/_jsx(NightRows, {
+            children: Object.entries(settings.floatingTools).map(([key, value]) => renderToolRow(key, value, false, () => toggleFloatingTool(key)))
+          })
+        }), /*#__PURE__*/_jsx(NightFootnote, {
+          children: "Tools switched on here appear in the floating bubble row."
+        }))
+      }), activeTab === "settings" && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [renderSection("Background", /*#__PURE__*/_jsx(NightCard, {
+          padded: true,
+          children: /*#__PURE__*/_jsx(BackgroundSwitcher, {
+            embedded: true
+          })
+        })), renderSection("Storage", /*#__PURE__*/_jsxs(NightCard, {
+          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+            activeOpacity: 0.7,
             onPress: () => setIsStorageExpanded(!isStorageExpanded),
-            children: /*#__PURE__*/_jsxs(View, {
-              style: styles.storageStatusHeader,
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.storageStatusIcon, {
-                  backgroundColor: storageBackend === "filesystem" ? buoyColors.success + "15" : storageBackend === "asyncstorage" ? buoyColors.warning + "15" : buoyColors.error + "15"
-                }],
-                children: /*#__PURE__*/_jsx(Database, {
-                  size: 18,
-                  color: storageBackend === "filesystem" ? buoyColors.success : storageBackend === "asyncstorage" ? buoyColors.warning : buoyColors.error
-                })
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.storageStatusInfo,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.storageStatusLabel,
-                  children: "STORAGE TYPE"
-                }), /*#__PURE__*/_jsxs(View, {
-                  style: styles.storageStatusBadgeContainer,
-                  children: [/*#__PURE__*/_jsx(View, {
-                    style: [styles.storageStatusBadge, {
-                      backgroundColor: storageBackend === "filesystem" ? buoyColors.success + "20" : storageBackend === "asyncstorage" ? buoyColors.warning + "20" : buoyColors.error + "20",
-                      borderColor: storageBackend === "filesystem" ? buoyColors.success + "60" : storageBackend === "asyncstorage" ? buoyColors.warning + "60" : buoyColors.error + "60"
-                    }],
-                    children: /*#__PURE__*/_jsx(Text, {
-                      style: [styles.storageStatusBadgeText, {
-                        color: storageBackend === "filesystem" ? buoyColors.success : storageBackend === "asyncstorage" ? buoyColors.warning : buoyColors.error
-                      }],
-                      children: storageBackend === "filesystem" ? "FILE SYSTEM" : storageBackend === "asyncstorage" ? "ASYNC STORAGE" : storageBackend === "memory" ? "MEMORY" : "LOADING..."
-                    })
-                  }), storageBackend === "filesystem" && /*#__PURE__*/_jsx(CheckCircle2, {
-                    size: 14,
-                    color: buoyColors.success
-                  }), storageBackend === "asyncstorage" && /*#__PURE__*/_jsx(AlertTriangle, {
-                    size: 14,
-                    color: buoyColors.warning
-                  }), storageBackend === "memory" && /*#__PURE__*/_jsx(AlertTriangle, {
-                    size: 14,
-                    color: buoyColors.error
-                  })]
-                })]
-              }), isStorageExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
-                size: 18,
-                color: buoyColors.textMuted
-              }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
-                size: 18,
-                color: buoyColors.textMuted
-              })]
-            })
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.storageStatusDescription,
-            children: storageBackend === "filesystem" ? "Settings persist independently and survive AsyncStorage.clear() calls during logout." : storageBackend === "asyncstorage" ? "Settings may be lost if AsyncStorage is cleared during logout." : storageBackend === "memory" ? "Settings are stored in memory only and will be lost on app restart." : "Checking storage backend..."
-          }), storageBackend === "asyncstorage" && /*#__PURE__*/_jsxs(View, {
-            style: styles.adviceHint,
-            children: [/*#__PURE__*/_jsx(Zap, {
-              size: 14,
-              color: buoyColors.warning
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.adviceHintText,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.adviceHintBold,
-                children: "Tip:"
-              }), " Install", " ", /*#__PURE__*/_jsx(Text, {
-                style: styles.adviceHintCode,
-                children: "expo-file-system"
-              }), " to persist settings through logout flows."]
+            accessibilityLabel: "Storage Type",
+            style: styles.settingRow,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.rowInfo,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.rowLabel,
+                children: "Storage Type"
+              })
+            }), storageBadge, isStorageExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+              size: 16,
+              color: night.color.textTertiary
+            }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+              size: 16,
+              color: night.color.textTertiary
             })]
-          }), storageBackend === "memory" && /*#__PURE__*/_jsxs(View, {
-            style: styles.adviceHintsContainer,
+          }), isStorageExpanded && /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsxs(View, {
-              style: [styles.adviceHint, {
-                backgroundColor: buoyColors.error + "10"
-              }],
-              children: [/*#__PURE__*/_jsx(AlertTriangle, {
-                size: 14,
-                color: buoyColors.error
-              }), /*#__PURE__*/_jsxs(Text, {
-                style: [styles.adviceHintText, {
-                  color: buoyColors.error
-                }],
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.adviceHintBold,
-                  children: "No persistent storage available!"
-                }), " Settings will reset on every app restart."]
-              })]
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.adviceHint,
-              children: [/*#__PURE__*/_jsx(Zap, {
-                size: 14,
-                color: buoyColors.primary
-              }), /*#__PURE__*/_jsxs(Text, {
-                style: styles.adviceHintText,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.adviceHintBold,
-                  children: "Best:"
-                }), " Install", " ", /*#__PURE__*/_jsx(Text, {
-                  style: styles.adviceHintCode,
-                  children: "expo-file-system"
-                }), " for logout-safe persistence."]
+              style: styles.settingRowBody,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingRowBodyText,
+                children: storageBackend === "filesystem" ? "Settings persist independently and survive AsyncStorage.clear() calls during logout." : storageBackend === "asyncstorage" ? "Settings may be lost if AsyncStorage is cleared during logout." : storageBackend === "memory" ? "Settings are stored in memory only and will be lost on app restart." : "Checking storage backend…"
+              }), storageBackend === "asyncstorage" && /*#__PURE__*/_jsx(Text, {
+                style: [styles.settingRowBodyText, styles.bodyWarning],
+                children: "Install expo-file-system to persist settings through logout flows."
+              }), storageBackend === "memory" && /*#__PURE__*/_jsx(Text, {
+                style: [styles.settingRowBodyText, styles.bodyDanger],
+                children: "No persistent storage available \u2014 install expo-file-system (best) or @react-native-async-storage/async-storage."
               })]
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.adviceHint,
-              children: [/*#__PURE__*/_jsx(HardDrive, {
-                size: 14,
-                color: buoyColors.textMuted
-              }), /*#__PURE__*/_jsxs(Text, {
-                style: styles.adviceHintText,
+            }), /*#__PURE__*/_jsx(NightSeparator, {}), /*#__PURE__*/_jsxs(View, {
+              style: styles.storageExpanded,
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.storageExpandedHeader,
                 children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.adviceHintBold,
-                  children: "Alternative:"
-                }), " Install", " ", /*#__PURE__*/_jsx(Text, {
-                  style: styles.adviceHintCode,
-                  children: "@react-native-async-storage/async-storage"
-                }), " for basic persistence."]
-              })]
-            })]
-          }), isStorageExpanded && /*#__PURE__*/_jsxs(View, {
-            style: styles.storageExpandedContent,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.storageExpandedHeader,
-              children: [/*#__PURE__*/_jsx(FileText, {
-                size: 14,
-                color: buoyColors.primary
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.storageExpandedTitle,
-                children: "SAVED SETTINGS"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.storageExpandedCount,
-                children: savedKeysLoading ? "..." : `${savedKeys.length} keys`
-              })]
-            }), savedKeysLoading ? /*#__PURE__*/_jsx(Text, {
-              style: styles.storageKeyItem,
-              children: "Loading..."
-            }) : savedKeys.length === 0 ? /*#__PURE__*/_jsx(Text, {
-              style: styles.storageKeyItemEmpty,
-              children: "No settings saved yet"
-            }) : /*#__PURE__*/_jsx(ScrollView, {
-              style: styles.storageKeysList,
-              nestedScrollEnabled: true,
-              showsVerticalScrollIndicator: true,
-              children: savedKeys.map(key => /*#__PURE__*/_jsx(View, {
-                style: styles.storageKeyItem,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.storageKeyText,
-                  numberOfLines: 1,
-                  children: key.replace("@react_buoy_", "")
-                })
-              }, key))
-            })]
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.clearStorageButton, isClearing && styles.clearStorageButtonDisabled, clearSuccess && styles.clearStorageButtonSuccess],
-            onPress: handleClearStorage,
-            disabled: isClearing,
-            activeOpacity: 0.7,
-            children: [clearSuccess ? /*#__PURE__*/_jsx(CheckCircle2, {
-              size: 14,
-              color: buoyColors.success
-            }) : /*#__PURE__*/_jsx(Trash2, {
-              size: 14,
-              color: isClearing ? buoyColors.textMuted : buoyColors.error
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.clearStorageButtonText, clearSuccess && {
-                color: buoyColors.success
-              }, isClearing && {
-                color: buoyColors.textMuted
-              }],
-              children: clearSuccess ? "CLEARED" : isClearing ? "CLEARING..." : "CLEAR ALL SETTINGS"
-            })]
-          })]
-        }), desktopSyncStatus && desktopSyncStatus.state !== "idle" && /*#__PURE__*/_jsxs(View, {
-          style: [styles.storageStatusCard, {
-            borderColor: desktopSyncStatus.state === "connected" ? buoyColors.success + "60" : buoyColors.warning + "60"
-          }],
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.storageStatusHeader,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.storageStatusIcon, {
-                backgroundColor: desktopSyncStatus.state === "connected" ? buoyColors.success + "15" : buoyColors.warning + "15"
-              }],
-              children: /*#__PURE__*/_jsx(Globe, {
-                size: 18,
-                color: desktopSyncStatus.state === "connected" ? buoyColors.success : buoyColors.warning
-              })
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.storageStatusInfo,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.storageStatusLabel,
-                children: "DESKTOP SYNC"
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.storageStatusBadgeContainer,
-                children: [/*#__PURE__*/_jsx(View, {
-                  style: [styles.storageStatusBadge, {
-                    backgroundColor: desktopSyncStatus.state === "connected" ? buoyColors.success + "20" : buoyColors.warning + "20",
-                    borderColor: desktopSyncStatus.state === "connected" ? buoyColors.success + "60" : buoyColors.warning + "60"
-                  }],
+                  style: styles.storageExpandedTitle,
+                  children: "SAVED SETTINGS"
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.storageExpandedCount,
+                  children: savedKeysLoading ? "…" : `${savedKeys.length} keys`
+                })]
+              }), savedKeysLoading ? /*#__PURE__*/_jsx(Text, {
+                style: styles.storageKeyEmpty,
+                children: "Loading\u2026"
+              }) : savedKeys.length === 0 ? /*#__PURE__*/_jsx(Text, {
+                style: styles.storageKeyEmpty,
+                children: "No settings saved yet"
+              }) : /*#__PURE__*/_jsx(ScrollView, {
+                style: styles.storageKeysList,
+                nestedScrollEnabled: true,
+                showsVerticalScrollIndicator: true,
+                children: savedKeys.map(key => /*#__PURE__*/_jsx(View, {
+                  style: styles.storageKeyItem,
                   children: /*#__PURE__*/_jsx(Text, {
-                    style: [styles.storageStatusBadgeText, {
-                      color: desktopSyncStatus.state === "connected" ? buoyColors.success : 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__*/_jsx(CheckCircle2, {
-                  size: 14,
-                  color: buoyColors.success
-                }) : /*#__PURE__*/_jsx(AlertTriangle, {
-                  size: 14,
-                  color: buoyColors.warning
-                })]
-              })]
-            })]
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.storageStatusDescription,
-            children: [desktopSyncStatus.state === "connected" ? "Streaming tool data to Buoy Desktop at " : "Trying to reach Buoy Desktop at ", /*#__PURE__*/_jsx(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__*/_jsxs(View, {
-            style: styles.adviceHint,
-            children: [/*#__PURE__*/_jsx(AlertTriangle, {
-              size: 14,
-              color: buoyColors.warning
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.adviceHintText,
-              children: [/*#__PURE__*/_jsx(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."), 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__*/_jsxs(View, {
-          style: styles.exportConfigCard,
-          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-            activeOpacity: 0.85,
-            onPress: () => setIsExportExpanded(!isExportExpanded),
-            style: styles.exportConfigHeader,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.exportConfigIconContainer,
-              children: /*#__PURE__*/_jsx(FileCode, {
-                size: 18,
-                color: buoyColors.success
-              })
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.exportConfigInfo,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.exportConfigLabel,
-                children: "EXPORT CONFIG"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.exportConfigHint,
-                children: "Save your settings to code"
+                }, key))
               })]
             }), /*#__PURE__*/_jsx(View, {
-              style: styles.exportConfigActions,
-              children: isExportExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
-                size: 18,
-                color: buoyColors.textMuted
-              }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
-                size: 18,
-                color: buoyColors.textMuted
+              style: styles.cardButtonWrap,
+              children: /*#__PURE__*/_jsx(NightButton, {
+                label: clearSuccess ? "Cleared" : isClearing ? "Clearing…" : "Clear All Settings",
+                variant: clearSuccess ? "secondary" : "destructive",
+                size: "md",
+                disabled: isClearing,
+                onPress: handleClearStorage,
+                icon: clearSuccess ? /*#__PURE__*/_jsx(CheckCircle2, {
+                  size: 15,
+                  color: night.color.accent
+                }) : /*#__PURE__*/_jsx(Trash2, {
+                  size: 15,
+                  color: isClearing ? night.color.textTertiary : night.color.danger
+                })
               })
             })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.exportHintBanner,
-            children: [/*#__PURE__*/_jsx(Zap, {
-              size: 14,
-              color: buoyColors.textMuted
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.exportHintText,
-              children: "Configure tools, then export as props for your team."
-            })]
-          }), isExportExpanded && /*#__PURE__*/_jsxs(View, {
-            style: styles.exportCodeContainer,
+          })]
+        })), desktopSyncStatus && desktopSyncStatus.state !== "idle" && renderSection("Desktop Sync", /*#__PURE__*/_jsxs(NightCard, {
+          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+            activeOpacity: 0.7,
+            onPress: () => toggleSettingExpanded("desktopSync"),
+            accessibilityLabel: "Buoy Desktop",
+            style: styles.settingRow,
             children: [/*#__PURE__*/_jsx(View, {
-              style: styles.exportCodeHeader,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.exportCodeTitle,
-                children: "PROPS TO ADD"
-              })
-            }), enabledConfig.floating.length > 0 && /*#__PURE__*/_jsxs(View, {
-              style: styles.exportJsonBlock,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonProp,
-                children: "defaultFloatingTools"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonEquals,
-                children: "="
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonBracket,
-                children: "{"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonArrayBracket,
-                children: "["
-              }), /*#__PURE__*/_jsx(View, {
-                style: styles.exportJsonArrayContent,
-                children: enabledConfig.floating.map((id, index) => /*#__PURE__*/_jsxs(View, {
-                  style: styles.exportJsonArrayItem,
-                  children: [/*#__PURE__*/_jsxs(Text, {
-                    style: styles.exportJsonString,
-                    children: ["'", id, "'"]
-                  }), index < enabledConfig.floating.length - 1 && /*#__PURE__*/_jsx(Text, {
-                    style: styles.exportJsonComma,
-                    children: ","
-                  })]
-                }, id))
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonArrayBracket,
-                children: "]"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonBracket,
-                children: "}"
-              })]
-            }), enabledConfig.dial.length > 0 && /*#__PURE__*/_jsxs(View, {
-              style: [styles.exportJsonBlock, enabledConfig.floating.length > 0 && {
-                marginTop: 8
-              }],
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonProp,
-                children: "defaultDialTools"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonEquals,
-                children: "="
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonBracket,
-                children: "{"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonArrayBracket,
-                children: "["
-              }), /*#__PURE__*/_jsx(View, {
-                style: styles.exportJsonArrayContent,
-                children: enabledConfig.dial.map((id, index) => /*#__PURE__*/_jsxs(View, {
-                  style: styles.exportJsonArrayItem,
-                  children: [/*#__PURE__*/_jsxs(Text, {
-                    style: styles.exportJsonString,
-                    children: ["'", id, "'"]
-                  }), index < enabledConfig.dial.length - 1 && /*#__PURE__*/_jsx(Text, {
-                    style: styles.exportJsonComma,
-                    children: ","
-                  })]
-                }, id))
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonArrayBracket,
-                children: "]"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonBracket,
-                children: "}"
-              })]
-            }), enabledConfig.floating.length === 0 && enabledConfig.dial.length === 0 && /*#__PURE__*/_jsx(View, {
-              style: styles.exportJsonBlock,
+              style: styles.rowInfo,
               children: /*#__PURE__*/_jsx(Text, {
-                style: styles.exportJsonComment,
-                children: "// No tools enabled"
+                style: styles.rowLabel,
+                children: "Buoy Desktop"
               })
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.exportCodeDescription,
-              children: ["Add these props to your existing", " ", /*#__PURE__*/_jsx(Text, {
-                style: styles.exportCodeInline,
-                children: "<FloatingDevTools />"
-              }), " ", "component to set team defaults."]
+            }), desktopSyncStatus.state === "connected" ? /*#__PURE__*/_jsx(NightBadge, {
+              label: "Connected",
+              tone: "accent"
+            }) : desktopSyncStatus.state === "connecting" ? /*#__PURE__*/_jsx(NightBadge, {
+              label: "Connecting\u2026",
+              tone: "neutral"
+            }) : /*#__PURE__*/_jsx(NightBadge, {
+              label: "Retrying",
+              tone: "warning"
+            }), expandedSettings.has("desktopSync") ? /*#__PURE__*/_jsx(ChevronDown, {
+              size: 16,
+              color: night.color.textTertiary
+            }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+              size: 16,
+              color: night.color.textTertiary
             })]
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.exportCopyButton, copySuccess && styles.exportCopyButtonSuccess],
-            onPress: handleCopyConfig,
-            activeOpacity: 0.7,
-            children: [copySuccess ? /*#__PURE__*/_jsx(CheckCircle2, {
-              size: 14,
-              color: buoyColors.success
-            }) : /*#__PURE__*/_jsx(Copy, {
-              size: 14,
-              color: buoyColors.success
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.exportCopyButtonText, copySuccess && {
-                color: buoyColors.success
-              }],
-              children: copySuccess ? "COPIED!" : "COPY CONFIG TO CLIPBOARD"
+          }), expandedSettings.has("desktopSync") && /*#__PURE__*/_jsxs(View, {
+            style: styles.settingRowBody,
+            children: [/*#__PURE__*/_jsxs(Text, {
+              style: styles.settingRowBodyText,
+              children: [desktopSyncStatus.state === "connected" ? "Streaming tool data to Buoy Desktop at " : "Trying to reach Buoy Desktop at ", /*#__PURE__*/_jsx(Text, {
+                style: styles.footnoteMono,
+                children: desktopSyncStatus.targetURL ?? "(unknown URL)"
+              }), desktopSyncStatus.state !== "connected" && " — is the desktop app running? Override with the externalSync socketURL option if it runs elsewhere."]
+            }), desktopSyncStatus.state === "retrying" && desktopSyncStatus.lastError && /*#__PURE__*/_jsxs(Text, {
+              style: [styles.settingRowBodyText, styles.bodyWarning],
+              children: ["Last error: ", desktopSyncStatus.lastError]
             })]
           })]
-        })]
-      }), activeTab === "pro" && /*#__PURE__*/_jsx(View, {
-        style: styles.proContainer,
-        children: isPro ? /*#__PURE__*/_jsx(_Fragment, {
+        })), renderSection("Modal Behavior", /*#__PURE__*/_jsx(NightCard, {
+          children: /*#__PURE__*/_jsxs(NightRows, {
+            children: [renderGlobalSettingRow("enableSharedModalDimensions", "Shared Modal Size", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately."), Platform.OS !== "web" ? renderGlobalSettingRow("expandableWindowControls", "Expand Controls", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access.") : null]
+          })
+        }))]
+      }), activeTab === "pro" && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [renderSection("License", /*#__PURE__*/_jsx(NightCard, {
           children: /*#__PURE__*/_jsxs(View, {
-            style: styles.proSection,
-            children: [/*#__PURE__*/_jsxs(SectionHeader, {
-              children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
-                icon: Zap,
-                color: buoyColors.primary,
-                size: 12
-              }), /*#__PURE__*/_jsx(SectionHeader.Title, {
-                children: "LICENSE STATUS"
-              }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
-                count: "Active",
-                color: buoyColors.success
-              })]
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.proSectionContent,
+            style: styles.settingRow,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.rowInfo,
               children: /*#__PURE__*/_jsx(Text, {
-                style: styles.proActiveDescription,
-                children: "You have full access to all Buoy DevTools features."
+                style: styles.rowLabel,
+                children: "License Status"
               })
+            }), isPro ? /*#__PURE__*/_jsx(NightBadge, {
+              label: "Active",
+              tone: "accent"
+            }) : /*#__PURE__*/_jsx(NightBadge, {
+              label: "Free",
+              tone: "neutral"
             })]
           })
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.proSection,
-            children: [/*#__PURE__*/_jsxs(SectionHeader, {
-              children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
-                icon: Zap,
-                color: buoyColors.textMuted,
-                size: 12
-              }), /*#__PURE__*/_jsx(SectionHeader.Title, {
-                children: "LICENSE STATUS"
-              }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
-                count: "Free",
-                color: buoyColors.textMuted
-              })]
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.proSectionContent,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.proFreeDescription,
-                children: "Upgrade to Pro to unlock all features and support development."
-              })
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.proSection,
-            children: [/*#__PURE__*/_jsxs(SectionHeader, {
-              children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
-                icon: CheckCircle2,
-                color: buoyColors.primary,
-                size: 12
-              }), /*#__PURE__*/_jsx(SectionHeader.Title, {
-                children: "PRO FEATURES"
-              })]
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.proSectionContent,
-              children: /*#__PURE__*/_jsxs(View, {
-                style: styles.proFeaturesList,
-                children: [/*#__PURE__*/_jsxs(View, {
-                  style: styles.proFeatureItem,
-                  children: [/*#__PURE__*/_jsx(CheckCircle2, {
-                    size: 14,
-                    color: buoyColors.primary
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: styles.proFeatureText,
-                    children: "Advanced Settings"
-                  })]
-                }), /*#__PURE__*/_jsxs(View, {
-                  style: styles.proFeatureItem,
-                  children: [/*#__PURE__*/_jsx(CheckCircle2, {
-                    size: 14,
-                    color: buoyColors.primary
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: styles.proFeatureText,
-                    children: "Export Configuration"
-                  })]
-                }), /*#__PURE__*/_jsxs(View, {
-                  style: styles.proFeatureItem,
-                  children: [/*#__PURE__*/_jsx(CheckCircle2, {
-                    size: 14,
-                    color: buoyColors.primary
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: styles.proFeatureText,
-                    children: "Team Defaults"
-                  })]
-                }), /*#__PURE__*/_jsxs(View, {
-                  style: styles.proFeatureItem,
-                  children: [/*#__PURE__*/_jsx(CheckCircle2, {
-                    size: 14,
-                    color: buoyColors.primary
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: styles.proFeatureText,
-                    children: "Priority Support"
-                  })]
+        }), /*#__PURE__*/_jsx(NightFootnote, {
+          children: isPro ? "You have full access to all Buoy DevTools features." : "Upgrade to Pro to unlock all features and support development."
+        })), !isPro && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [renderSection("Pro Features", /*#__PURE__*/_jsx(NightCard, {
+            children: /*#__PURE__*/_jsx(NightRows, {
+              children: ["Advanced Settings", "Priority Support"].map(feature => /*#__PURE__*/_jsxs(View, {
+                style: styles.featureRow,
+                children: [/*#__PURE__*/_jsx(CheckCircle2, {
+                  size: 16,
+                  color: night.color.accent
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.rowLabel,
+                  children: feature
                 })]
-              })
-            })]
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: styles.proUpgradeBtn,
-            onPress: () => setShowLicenseModal(true),
-            activeOpacity: 0.8,
-            children: [/*#__PURE__*/_jsx(Zap, {
-              size: 16,
-              color: buoyColors.base
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.proUpgradeBtnText,
-              children: "Upgrade to Pro"
-            })]
+              }, feature))
+            })
+          })), /*#__PURE__*/_jsx(NightButton, {
+            label: "Upgrade to Pro",
+            variant: "primary",
+            size: "lg",
+            onPress: () => setShowLicenseModal(true)
           })]
-        })
+        })]
       })]
     }), /*#__PURE__*/_jsx(LicenseEntryModal, {
       visible: showLicenseModal,
@@ -1141,27 +776,25 @@ export const DevToolsSettingsModal = ({
   return /*#__PURE__*/_jsx(JsModal, {
     visible: visible,
     onClose: onClose,
+    variant: "night",
     header: {
       showToggleButton: false,
-      customContent: /*#__PURE__*/_jsxs(ModalHeader, {
-        children: [/*#__PURE__*/_jsx(ModalHeader.Content, {
-          title: "",
-          noMargin: true,
-          children: /*#__PURE__*/_jsx(TabSelector, {
-            tabs: [{
-              key: "floating",
-              label: "FLOATING"
-            }, {
-              key: "settings",
-              label: "SETTINGS"
-            }, {
-              key: "pro",
-              label: "PRO"
-            }],
-            activeTab: activeTab,
-            onTabChange: tab => setActiveTab(tab)
-          })
-        }), /*#__PURE__*/_jsx(ModalHeader.Actions, {})]
+      customContent: /*#__PURE__*/_jsx(View, {
+        style: styles.headerRow,
+        children: /*#__PURE__*/_jsx(NightSegmented, {
+          tabs: [{
+            key: "floating",
+            label: "Floating"
+          }, {
+            key: "settings",
+            label: "Settings"
+          }, {
+            key: "pro",
+            label: "Pro"
+          }],
+          activeKey: activeTab,
+          onChange: tab => setActiveTab(tab)
+        })
       })
     },
     initialMode: "bottomSheet",
@@ -1236,6 +869,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.addListener(payload => {
+  if (payload) cachedSettings = payload;
+});
 export const useDevToolsSettings = () => {
   // Get team default configuration from context
   const {
@@ -1296,800 +953,144 @@ export const useDevToolsSettings = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so JsModal's night star field shows through everything.
+    backgroundColor: "transparent"
   },
-  // Header styles matching React Query modal exactly
-  headerContainer: {
-    flex: 1,
+  // Header — the segmented control, inset so it clears the absolutely
+  // positioned window controls on the right.
+  headerRow: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12
-  },
-  tabNavigationContainer: {
-    flex: 1,
-    flexDirection: "row",
-    backgroundColor: buoyColors.hover,
-    borderRadius: 6,
-    padding: 2,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    justifyContent: "space-evenly"
-  },
-  tabButton: {
-    paddingHorizontal: 8,
-    paddingVertical: 5,
-    borderRadius: 4,
-    alignItems: "center",
-    justifyContent: "center",
-    flex: 1,
-    marginHorizontal: 1
-  },
-  tabButtonActive: {
-    backgroundColor: buoyColors.primary + "20",
-    borderWidth: 1,
-    borderColor: buoyColors.primary
-  },
-  tabButtonInactive: {
-    backgroundColor: "transparent"
+    paddingLeft: night.gutter,
+    paddingRight: 64,
+    paddingBottom: 8
   },
-  tabButtonText: {
-    fontSize: 12,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    fontFamily: "monospace",
-    textTransform: "uppercase"
-  },
-  tabButtonTextActive: {
-    color: buoyColors.primary
-  },
-  tabButtonTextInactive: {
-    color: 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: night.gutter,
+    paddingTop: 8,
+    paddingBottom: 24,
+    gap: night.groupGap
   },
-  sectionHeader: {
+  // Rows
+  toolRow: {
     flexDirection: "row",
     alignItems: "center",
-    marginBottom: 12,
-    paddingHorizontal: 4
-  },
-  sectionIndicator: {
-    width: 3,
-    height: 16,
-    borderRadius: 2,
-    backgroundColor: buoyColors.primary,
-    marginRight: 8,
-    shadowColor: buoyColors.primary,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.6,
-    shadowRadius: 4
-  },
-  sectionTitle: {
-    flex: 1,
-    color: buoyColors.primary,
-    fontSize: 13,
-    fontWeight: "700",
-    letterSpacing: 1.2
-  },
-  sectionCount: {
-    color: buoyColors.textSecondary,
-    fontSize: 11,
-    opacity: 0.7
-  },
-  // Tool Cards - Clean unified Buoy theme
-  glassCard: {
-    borderRadius: 12,
-    paddingVertical: 12,
-    paddingHorizontal: 14,
-    backgroundColor: buoyColors.card,
-    borderWidth: 1,
-    borderColor: buoyColors.border
-  },
-  glassCardActive: {
-    borderColor: buoyColors.primary + "50",
-    backgroundColor: buoyColors.primary + "08"
+    gap: 12,
+    paddingHorizontal: night.rowPadH,
+    paddingVertical: 12
   },
-  glassCardInner: {
+  settingRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12
-  },
-  iconContainer: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: buoyColors.hover,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  iconContainerActive: {
-    backgroundColor: buoyColors.primary + "20"
-  },
-  toolInfo: {
-    flex: 1
-  },
-  toolName: {
-    color: buoyColors.text,
-    fontWeight: "600",
-    fontSize: 13
-  },
-  toolNameActive: {
-    color: buoyColors.text
-  },
-  toolDescription: {
-    color: buoyColors.textMuted,
-    fontSize: 11,
-    marginTop: 2
-  },
-  pillToggle: {
-    paddingHorizontal: 14,
-    paddingVertical: 6,
-    borderRadius: 6,
-    borderWidth: 1,
-    minWidth: 48,
-    alignItems: "center"
-  },
-  pillToggleOn: {
-    backgroundColor: buoyColors.primary + "20",
-    borderColor: buoyColors.primary
-  },
-  pillToggleOff: {
-    backgroundColor: buoyColors.hover,
-    borderColor: buoyColors.border
-  },
-  pillToggleText: {
-    fontWeight: "600",
-    fontSize: 11,
-    letterSpacing: 0.5
-  },
-  pillToggleTextOn: {
-    color: buoyColors.primary
-  },
-  pillToggleTextOff: {
-    color: buoyColors.textMuted
-  },
-  closeButton: {
-    marginLeft: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 6,
-    backgroundColor: buoyColors.error + "1A",
-    borderWidth: 1,
-    borderColor: buoyColors.error + "33"
-  },
-  closeButtonText: {
-    color: buoyColors.error,
-    fontSize: 14,
-    fontWeight: "700",
-    letterSpacing: 0.5
-  },
-  // Expandable Settings Card styles
-  expandableCard: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    padding: 12
+    gap: 10,
+    paddingHorizontal: night.rowPadH,
+    paddingVertical: night.rowPadV,
+    minHeight: 52
   },
-  expandableCardHeader: {
+  featureRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12
+    gap: 10,
+    paddingHorizontal: night.rowPadH,
+    paddingVertical: 12
   },
-  expandableCardCategory: {
-    backgroundColor: buoyColors.primary + "20",
-    borderWidth: 1,
-    borderColor: buoyColors.primary + "40",
-    borderRadius: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 4
+  rowDisabled: {
+    opacity: 0.4
   },
-  expandableCardCategoryText: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: buoyColors.primary,
-    letterSpacing: 0.5
+  toolIconSlot: {
+    width: 24,
+    alignItems: "center"
   },
-  expandableCardTitle: {
+  rowInfo: {
     flex: 1,
-    paddingHorizontal: 4
-  },
-  expandableCardTitleText: {
-    fontFamily: "monospace",
-    fontSize: 12,
-    fontWeight: "700",
-    color: buoyColors.text
-  },
-  expandableCardSubtitle: {
-    fontSize: 10,
-    color: buoyColors.textMuted,
-    marginTop: 2
-  },
-  expandableCardActions: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  expandableCardBody: {
-    marginTop: 12,
-    paddingTop: 12,
-    borderTopWidth: 1,
-    borderTopColor: buoyColors.border + "50"
-  },
-  expandableCardSection: {
-    marginBottom: 12
-  },
-  expandableCardSectionTitle: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: buoyColors.primary,
-    letterSpacing: 1,
-    marginBottom: 6
-  },
-  expandableCardSectionText: {
-    fontSize: 12,
-    color: buoyColors.textSecondary,
-    lineHeight: 18
-  },
-  // Storage Status Card styles
-  storageStatusCard: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    padding: 12,
-    marginBottom: 10
-  },
-  storageStatusHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-    marginBottom: 8
-  },
-  storageStatusIcon: {
-    width: 36,
-    height: 36,
-    borderRadius: 8,
-    backgroundColor: buoyColors.hover,
-    alignItems: "center",
-    justifyContent: "center"
+    gap: 2
   },
-  storageStatusInfo: {
-    flex: 1
+  rowLabel: {
+    color: night.color.text,
+    fontSize: night.font.row,
+    fontWeight: "500"
   },
-  storageStatusLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: buoyColors.textMuted,
-    letterSpacing: 1,
-    marginBottom: 4
+  rowCaption: {
+    color: night.color.textTertiary,
+    fontSize: night.font.label
   },
-  storageStatusBadgeContainer: {
-    flexDirection: "row",
-    alignItems: "center",
+  // Expanded body under a global-setting row
+  settingRowBody: {
+    paddingHorizontal: night.rowPadH,
+    paddingBottom: night.rowPadV,
     gap: 6
   },
-  storageStatusBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    borderWidth: 1
-  },
-  storageStatusBadgeText: {
-    fontSize: 11,
-    fontWeight: "700",
-    letterSpacing: 0.5
+  settingRowBodyText: {
+    color: night.color.textSecondary,
+    fontSize: night.font.caption,
+    lineHeight: night.font.caption * 1.45
   },
-  storageStatusDescription: {
-    fontSize: 11,
-    color: buoyColors.textMuted,
-    lineHeight: 16,
-    marginBottom: 12
-  },
-  clearStorageButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    borderRadius: 6,
-    backgroundColor: buoyColors.error + "15",
-    borderWidth: 1,
-    borderColor: buoyColors.error + "40"
+  settingRowBodyHint: {
+    color: night.color.textTertiary,
+    fontSize: night.font.caption,
+    lineHeight: night.font.caption * 1.45
   },
-  clearStorageButtonDisabled: {
-    opacity: 0.5
+  bodyWarning: {
+    color: night.color.warning
   },
-  clearStorageButtonSuccess: {
-    backgroundColor: buoyColors.success + "15",
-    borderColor: buoyColors.success + "40"
+  bodyDanger: {
+    color: night.color.danger
   },
-  clearStorageButtonText: {
-    fontSize: 12,
-    fontWeight: "700",
-    color: buoyColors.error,
-    letterSpacing: 0.5
-  },
-  // Advice hints
-  adviceHintsContainer: {
-    gap: 8,
-    marginBottom: 12
-  },
-  adviceHint: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: 8,
-    backgroundColor: buoyColors.warning + "10",
-    borderRadius: 6,
-    padding: 10,
-    marginBottom: 8
-  },
-  adviceHintText: {
-    flex: 1,
-    fontSize: 11,
-    color: buoyColors.textSecondary,
-    lineHeight: 16
+  // Buttons that live inside a card
+  cardButtonWrap: {
+    paddingHorizontal: night.cardPad,
+    paddingTop: 10,
+    paddingBottom: night.cardPad
   },
-  adviceHintBold: {
-    fontWeight: "700",
-    color: buoyColors.text
-  },
-  adviceHintCode: {
-    fontFamily: "monospace",
-    fontSize: 10,
-    color: buoyColors.info,
-    backgroundColor: buoyColors.info + "15",
-    paddingHorizontal: 4,
-    borderRadius: 3
-  },
-  // Expanded storage content
-  storageExpandedContent: {
-    marginTop: 12,
-    paddingTop: 12,
-    borderTopWidth: 1,
-    borderTopColor: buoyColors.border + "50"
+  // Storage expanded key list
+  storageExpanded: {
+    paddingHorizontal: night.rowPadH,
+    paddingVertical: 12,
+    gap: 8
   },
   storageExpandedHeader: {
     flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 10
+    alignItems: "center"
   },
   storageExpandedTitle: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: buoyColors.primary,
-    letterSpacing: 1,
-    flex: 1
+    flex: 1,
+    color: night.color.textSecondary,
+    fontSize: night.font.micro,
+    fontWeight: "600",
+    letterSpacing: 0.5
   },
   storageExpandedCount: {
-    fontSize: 10,
-    color: buoyColors.textMuted
+    color: night.color.textTertiary,
+    fontSize: night.font.micro
   },
   storageKeysList: {
-    gap: 4,
     maxHeight: 150
   },
   storageKeyItem: {
-    backgroundColor: buoyColors.hover,
-    borderRadius: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.border + "50"
-  },
-  storageKeyItemEmpty: {
-    fontSize: 11,
-    color: buoyColors.textMuted,
-    fontStyle: "italic",
-    paddingVertical: 8
+    backgroundColor: night.color.surfaceElevated,
+    borderRadius: night.radius.segment,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    marginBottom: 4
   },
   storageKeyText: {
-    fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
+    fontSize: night.font.micro,
     fontFamily: "monospace"
   },
-  // Export Config Card styles
-  exportConfigCard: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: buoyColors.success + "40",
-    padding: 12,
-    marginTop: 10
-  },
-  exportConfigHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12
-  },
-  exportConfigIconContainer: {
-    width: 36,
-    height: 36,
-    borderRadius: 8,
-    backgroundColor: buoyColors.success + "15",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  exportConfigInfo: {
-    flex: 1
-  },
-  exportConfigLabel: {
-    fontSize: 12,
-    fontWeight: "700",
-    color: buoyColors.success,
-    letterSpacing: 0.5
-  },
-  exportConfigHint: {
-    fontSize: 10,
-    color: buoyColors.textMuted,
-    marginTop: 2
-  },
-  exportConfigActions: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  exportHintBanner: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: 8,
-    backgroundColor: buoyColors.warning + "10",
-    borderRadius: 6,
-    padding: 10,
-    marginTop: 12
-  },
-  exportHintText: {
-    flex: 1,
-    fontSize: 11,
-    color: buoyColors.textSecondary,
-    lineHeight: 16
-  },
-  exportHintBold: {
-    fontWeight: "700",
-    color: buoyColors.warning
-  },
-  exportCodeContainer: {
-    marginTop: 12,
-    paddingTop: 12,
-    borderTopWidth: 1,
-    borderTopColor: buoyColors.border + "50"
-  },
-  exportCodeHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 8
-  },
-  exportCodeTitle: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: buoyColors.success,
-    letterSpacing: 1
-  },
-  exportCodeBlock: {
-    backgroundColor: buoyColors.hover,
-    borderRadius: 6,
-    padding: 12,
-    borderWidth: 1,
-    borderColor: buoyColors.border + "50"
-  },
-  exportCodeText: {
-    fontSize: 11,
-    color: buoyColors.text,
-    fontFamily: "monospace",
-    lineHeight: 18
-  },
-  exportCodeDescription: {
-    fontSize: 10,
-    color: buoyColors.textMuted,
-    marginTop: 8,
-    lineHeight: 14
-  },
-  exportCodeInline: {
-    fontFamily: "monospace",
-    fontSize: 10,
-    color: buoyColors.info,
-    backgroundColor: buoyColors.info + "15",
-    paddingHorizontal: 4,
-    borderRadius: 3
-  },
-  exportCopyButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    borderRadius: 6,
-    backgroundColor: buoyColors.success + "15",
-    borderWidth: 1,
-    borderColor: buoyColors.success + "40",
-    marginTop: 12
-  },
-  exportCopyButtonSuccess: {
-    backgroundColor: buoyColors.success + "25",
-    borderColor: buoyColors.success + "60"
-  },
-  exportCopyButtonText: {
-    fontSize: 12,
-    fontWeight: "700",
-    color: buoyColors.success,
-    letterSpacing: 0.5
-  },
-  // JSON-like viewer styles (syntax highlighting)
-  exportJsonBlock: {
-    backgroundColor: buoyColors.hover,
-    borderRadius: 6,
-    padding: 12,
-    borderWidth: 1,
-    borderColor: buoyColors.border + "50",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: 4
-  },
-  exportJsonProp: {
-    fontSize: 12,
-    fontFamily: "monospace",
-    color: buoyColors.info,
-    // Cyan for prop names
-    fontWeight: "600"
-  },
-  exportJsonEquals: {
-    fontSize: 12,
-    fontFamily: "monospace",
-    color: buoyColors.textMuted
-  },
-  exportJsonBracket: {
-    fontSize: 12,
-    fontFamily: "monospace",
-    color: buoyColors.warning // Yellow for JSX brackets
-  },
-  exportJsonArrayBracket: {
-    fontSize: 12,
-    fontFamily: "monospace",
-    color: buoyColors.text
-  },
-  exportJsonArrayContent: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: 2
-  },
-  exportJsonArrayItem: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  exportJsonString: {
-    fontSize: 12,
-    fontFamily: "monospace",
-    color: buoyColors.success // Green for strings
-  },
-  exportJsonComma: {
-    fontSize: 12,
-    fontFamily: "monospace",
-    color: buoyColors.textMuted,
-    marginRight: 4
-  },
-  exportJsonComment: {
-    fontSize: 12,
-    fontFamily: "monospace",
-    color: buoyColors.textMuted,
-    fontStyle: "italic"
-  },
-  // Pro tab styles - using buoyColors for consistency with other modals
-  proContainer: {
-    paddingHorizontal: 16,
-    paddingTop: 16,
-    paddingBottom: 24
-  },
-  proSection: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    marginBottom: 12,
-    overflow: "hidden"
-  },
-  proSectionContent: {
-    paddingHorizontal: 16,
-    paddingTop: 8,
-    paddingBottom: 16
-  },
-  proStatsRow: {
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    paddingVertical: 8
-  },
-  proStatItem: {
-    alignItems: "center",
-    paddingHorizontal: 20
-  },
-  proStatValue: {
-    fontSize: 20,
-    fontWeight: "700",
-    color: buoyColors.text
-  },
-  proStatValueDanger: {
-    color: buoyColors.error
-  },
-  proStatLabel: {
-    fontSize: 10,
-    color: buoyColors.textMuted,
-    letterSpacing: 0.5,
-    marginTop: 2
-  },
-  proStatDivider: {
-    width: 1,
-    height: 24,
-    backgroundColor: buoyColors.border
-  },
-  proEmptyState: {
-    alignItems: "center",
-    paddingVertical: 20,
-    gap: 8
-  },
-  proEmptyStateText: {
-    fontSize: 11,
-    color: buoyColors.textMuted,
+  storageKeyEmpty: {
+    color: night.color.textTertiary,
+    fontSize: night.font.caption,
     fontStyle: "italic"
   },
-  proErrorState: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingVertical: 12,
-    paddingHorizontal: 12,
-    backgroundColor: buoyColors.error + "15",
-    borderRadius: 6
-  },
-  proErrorStateText: {
-    fontSize: 11,
-    color: buoyColors.error,
-    flex: 1
-  },
-  proDevicesList: {
-    gap: 6
-  },
-  proDeviceRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 8,
-    paddingHorizontal: 10,
-    backgroundColor: buoyColors.input,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.border
-  },
-  proDeviceRowCurrent: {
-    borderColor: buoyColors.success + "50",
-    backgroundColor: buoyColors.success + "08"
-  },
-  proDeviceIcon: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    backgroundColor: buoyColors.hover,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  proDeviceInfo: {
-    flex: 1,
-    marginLeft: 10
-  },
-  proDeviceNameRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  proDeviceName: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: buoyColors.text,
-    flexShrink: 1
-  },
-  proDeviceBadge: {
-    backgroundColor: buoyColors.success + "20",
-    paddingHorizontal: 5,
-    paddingVertical: 1,
-    borderRadius: 3
-  },
-  proDeviceBadgeText: {
-    fontSize: 8,
-    fontWeight: "700",
-    color: buoyColors.success,
-    letterSpacing: 0.3
-  },
-  proDeviceDetails: {
-    fontSize: 10,
-    color: buoyColors.textMuted,
-    marginTop: 2
-  },
-  proDeviceDate: {
-    fontSize: 9,
-    color: buoyColors.textMuted,
-    marginTop: 2
-  },
-  proDeviceRemoveBtn: {
-    padding: 6,
-    marginLeft: 4
-  },
-  proRegisterDeviceBtn: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    backgroundColor: buoyColors.primary + "15",
-    borderWidth: 1,
-    borderColor: buoyColors.primary + "40",
-    marginTop: 10
-  },
-  proRegisterDeviceBtnText: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: buoyColors.primary
-  },
-  proFreeDescription: {
-    fontSize: 11,
-    color: buoyColors.textSecondary,
-    lineHeight: 16
-  },
-  proActiveDescription: {
-    fontSize: 11,
-    color: buoyColors.textSecondary,
-    lineHeight: 16
-  },
-  proFeaturesList: {
-    gap: 8
-  },
-  proFeatureItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10
-  },
-  proFeatureText: {
-    fontSize: 12,
-    color: buoyColors.text
-  },
-  proUpgradeBtn: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    backgroundColor: buoyColors.primary,
-    borderRadius: 10,
-    paddingVertical: 14,
-    shadowColor: buoyColors.primary,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.4,
-    shadowRadius: 8
-  },
-  proUpgradeBtnText: {
-    fontSize: 14,
-    fontWeight: "700",
-    color: buoyColors.base
+  // Footnote inline code
+  footnoteMono: {
+    fontFamily: "monospace",
+    fontSize: night.font.label,
+    color: night.color.textSecondary
   }
 });