@buoy-gg/core 7.0.15 → 7.0.16

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

@@ -6,8 +6,11 @@
  * Uses shared configuration and logic from @buoy-gg/floating-tools-react.
  * Platform-specific: CSS, mouse events, web JSX.
  *
- * This follows the same pattern as DialDevTools - all colors, labels, descriptions,
- * and styling constants come from the shared core package.
+ * VISUAL PARITY: styled 1:1 against the native reference
+ * (devtools-floating-menu/src/floatingMenu/DevToolsSettingsModal.tsx, which
+ * renders inside JsModal + ModalHeader + TabSelector from @buoy-gg/shared-ui).
+ * shared-ui is RN-only, so its buoyColors palette and the native-only style
+ * values are inlined below with provenance comments.
  *
  * @platform React DOM Web (Vite, CRA, Next.js, Electron)
  */
@@ -18,20 +21,61 @@ import {
 useSettings,
 // Tab configuration
 settingsTabs,
-// Colors & styling
-settingsColors, settingsStyles, getToolColor,
+// Shared style tokens (used where they match the native reference)
+settingsStyles,
 // Tool metadata
 getToolLabel, getToolDescription,
 // Global settings config
 globalSettingsConfig
 // Types
 } from '@buoy-gg/floating-tools-react';
-import { ReduxIcon } from '@buoy-gg/floating-tools-core';
+import { QueryIcon, EnvIcon, StorageIcon, NetworkIcon, RoutesIcon, HighlighterIcon, ReduxIcon, EventsIcon, WifiIcon, ImageOverlayIcon, ZustandIcon, JotaiIcon } from '@buoy-gg/floating-tools-core';
+// JsModal.web + storage keys via the consumer's shared-ui web shim — the
+// settings sheet is a real JsModal on web now, same as native.
+import { JsModal, devToolsStorageKeys } from '@buoy-gg/shared-ui';
+
+/** env(safe-area-inset-top) via a one-shot probe (native: useSafeAreaInsets). */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function readTopSafeAreaInset() {
+  if (typeof document === 'undefined') return 0;
+  const probe = document.createElement('div');
+  probe.style.cssText = 'position:fixed;top:env(safe-area-inset-top);visibility:hidden;pointer-events:none';
+  document.body.appendChild(probe);
+  const top = probe.getBoundingClientRect().top;
+  document.body.removeChild(probe);
+  return Math.max(0, top);
+}
+
+// =============================
+// Native palette (provenance)
+// =============================
+
+/**
+ * buoyColors from @buoy-gg/shared-ui (gameUIColors.ts) — the palette the
+ * native settings modal is styled with. shared-ui cannot be imported on web,
+ * so the values are inlined verbatim.
+ */
+const buoy = {
+  base: '#121212',
+  card: '#1A1A1A',
+  hover: '#242424',
+  input: '#2A2A2A',
+  border: '#333333',
+  borderStrong: '#444444',
+  text: '#E0E0E0',
+  textSecondary: '#A0A0A0',
+  textMuted: '#888888',
+  primary: '#20C997',
+  success: '#20C997',
+  warning: '#FFA94D',
+  error: '#EF4444',
+  info: '#00B8E6'
+};
 
 // =============================
 // Types
 // =============================
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+
 // =============================
 // Web Storage Adapter
 // =============================
@@ -45,21 +89,30 @@ const webStorageAdapter = {
 // Icon Components (Web SVGs)
 // =============================
 
-const Laptop = ({
+/** Fallback for shared-ui Layers icon (native debug-borders card icon). */
+const Layers = ({
   size = 24,
   color = 'currentColor'
-}) => /*#__PURE__*/_jsx("svg", {
+}) => /*#__PURE__*/_jsxs("svg", {
   width: size,
   height: size,
   viewBox: "0 0 24 24",
   fill: "none",
   stroke: color,
   strokeWidth: "2",
-  children: /*#__PURE__*/_jsx("path", {
-    d: "M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"
-  })
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"
+  })]
 });
-const Database = ({
+
+/** Fallback for shared-ui RenderCountIcon (native highlight-updates card icon). */
+const Sparkles = ({
   size = 24,
   color = 'currentColor'
 }) => /*#__PURE__*/_jsxs("svg", {
@@ -69,18 +122,23 @@ const Database = ({
   fill: "none",
   stroke: color,
   strokeWidth: "2",
-  children: [/*#__PURE__*/_jsx("ellipse", {
-    cx: "12",
-    cy: "5",
-    rx: "9",
-    ry: "3"
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M3 5V19A9 3 0 0 0 21 19V5"
+    d: "M20 3v4"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M3 12A9 3 0 0 0 21 12"
+    d: "M22 5h-4"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M4 17v2"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M5 18H3"
   })]
 });
-const Wifi = ({
+
+/** Fallback for shared-ui SentryBugIcon (native sentry card icon, red). */
+const AlertTriangle = ({
   size = 24,
   color = 'currentColor'
 }) => /*#__PURE__*/_jsxs("svg", {
@@ -90,20 +148,19 @@ const Wifi = ({
   fill: "none",
   stroke: color,
   strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
   children: [/*#__PURE__*/_jsx("path", {
-    d: "M5 13a10 10 0 0 1 14 0"
+    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M8.5 16.5a5 5 0 0 1 7 0"
+    d: "M12 9v4"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M2 8.82a15 15 0 0 1 20 0"
-  }), /*#__PURE__*/_jsx("line", {
-    x1: "12",
-    y1: "20",
-    x2: "12.01",
-    y2: "20"
+    d: "M12 17h.01"
   })]
 });
-const Search = ({
+
+/** shared-ui Info icon (native default tool icon). */
+const Info = ({
   size = 24,
   color = 'currentColor'
 }) => /*#__PURE__*/_jsxs("svg", {
@@ -113,15 +170,21 @@ const Search = ({
   fill: "none",
   stroke: color,
   strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
   children: [/*#__PURE__*/_jsx("circle", {
-    cx: "11",
-    cy: "11",
-    r: "8"
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 16v-4"
   }), /*#__PURE__*/_jsx("path", {
-    d: "m21 21-4.3-4.3"
+    d: "M12 8h.01"
   })]
 });
-const Map = ({
+
+/** shared-ui Database icon (native storage status card icon). */
+const Database = ({
   size = 24,
   color = 'currentColor'
 }) => /*#__PURE__*/_jsxs("svg", {
@@ -131,29 +194,44 @@ const Map = ({
   fill: "none",
   stroke: color,
   strokeWidth: "2",
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [/*#__PURE__*/_jsx("ellipse", {
+    cx: "12",
+    cy: "5",
+    rx: "9",
+    ry: "3"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M15 5.764v15"
+    d: "M3 5V19A9 3 0 0 0 21 19V5"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M9 3.236v15"
+    d: "M3 12A9 3 0 0 0 21 12"
   })]
 });
-const Zap = ({
+
+/** shared-ui CheckCircle2 icon (native storage badge check). */
+const CheckCircle2 = ({
   size = 24,
   color = 'currentColor'
-}) => /*#__PURE__*/_jsx("svg", {
+}) => /*#__PURE__*/_jsxs("svg", {
   width: size,
   height: size,
   viewBox: "0 0 24 24",
   fill: "none",
   stroke: color,
   strokeWidth: "2",
-  children: /*#__PURE__*/_jsx("path", {
-    d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
-  })
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [/*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m9 12 2 2 4-4"
+  })]
 });
-const Sparkles = ({
+
+/** shared-ui FileText icon (native SAVED SETTINGS header icon). */
+const FileText = ({
   size = 24,
   color = 'currentColor'
 }) => /*#__PURE__*/_jsxs("svg", {
@@ -163,37 +241,23 @@ const Sparkles = ({
   fill: "none",
   stroke: color,
   strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
   children: [/*#__PURE__*/_jsx("path", {
-    d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"
+    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M20 3v4"
+    d: "M14 2v4a2 2 0 0 0 2 2h4"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M22 5h-4"
+    d: "M10 9H8"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M4 17v2"
+    d: "M16 13H8"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M5 18H3"
+    d: "M16 17H8"
   })]
 });
-const Square = ({
-  size = 24,
-  color = 'currentColor'
-}) => /*#__PURE__*/_jsx("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: color,
-  strokeWidth: "2",
-  children: /*#__PURE__*/_jsx("rect", {
-    width: "18",
-    height: "18",
-    x: "3",
-    y: "3",
-    rx: "2"
-  })
-});
-const AlertTriangle = ({
+
+/** shared-ui Trash2 icon (native CLEAR ALL SETTINGS button icon). */
+const Trash2 = ({
   size = 24,
   color = 'currentColor'
 }) => /*#__PURE__*/_jsxs("svg", {
@@ -203,122 +267,193 @@ const AlertTriangle = ({
   fill: "none",
   stroke: color,
   strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
   children: [/*#__PURE__*/_jsx("path", {
-    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+    d: "M3 6h18"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M12 9v4"
+    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M12 17h.01"
+    d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+  }), /*#__PURE__*/_jsx("line", {
+    x1: "10",
+    x2: "10",
+    y1: "11",
+    y2: "17"
+  }), /*#__PURE__*/_jsx("line", {
+    x1: "14",
+    x2: "14",
+    y1: "11",
+    y2: "17"
   })]
 });
-const SettingsIcon = ({
-  size = 24,
+function ChevronRightIcon({
+  size = 18,
   color = 'currentColor'
-}) => /*#__PURE__*/_jsxs("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: color,
-  strokeWidth: "2",
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
-  }), /*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "3"
-  })]
-});
-function ChevronRightIcon() {
+}) {
   return /*#__PURE__*/_jsx("svg", {
-    width: "18",
-    height: "18",
+    width: size,
+    height: size,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: "currentColor",
+    stroke: color,
     strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     children: /*#__PURE__*/_jsx("path", {
       d: "M9 18l6-6-6-6"
     })
   });
 }
-function CloseIcon() {
+function ChevronDownIcon({
+  size = 18,
+  color = 'currentColor'
+}) {
   return /*#__PURE__*/_jsx("svg", {
-    width: "20",
-    height: "20",
+    width: size,
+    height: size,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: "currentColor",
+    stroke: color,
     strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     children: /*#__PURE__*/_jsx("path", {
-      d: "M18 6L6 18M6 6l12 12"
+      d: "m6 9 6 6 6-6"
     })
   });
 }
 
-// Tool icon mapping using SVG components
+/**
+ * Tool icon mapping — mirrors the native getToolIcon() switch in
+ * DevToolsSettingsModal.tsx. Real tool icons come from floating-tools-core
+ * (web-compatible); shared-ui-only icons (SentryBugIcon, WifiCircuitIcon,
+ * Layers, RenderCountIcon) use the closest web SVG fallback.
+ */
 function ToolIcon({
-  toolId,
-  color
+  toolId
 }) {
-  const size = 16;
-  const iconMap = {
-    env: /*#__PURE__*/_jsx(Laptop, {
-      size: size,
-      color: color
-    }),
-    storage: /*#__PURE__*/_jsx(Database, {
-      size: size,
-      color: color
-    }),
-    network: /*#__PURE__*/_jsx(Wifi, {
-      size: size,
-      color: color
-    }),
-    query: /*#__PURE__*/_jsx(Search, {
-      size: size,
-      color: color
-    }),
-    'route-events': /*#__PURE__*/_jsx(Map, {
-      size: size,
-      color: color
-    }),
-    routes: /*#__PURE__*/_jsx(Map, {
-      size: size,
-      color: color
-    }),
-    benchmark: /*#__PURE__*/_jsx(Zap, {
-      size: size,
-      color: color
-    }),
-    'highlight-updates': /*#__PURE__*/_jsx(Sparkles, {
-      size: size,
-      color: color
-    }),
-    renders: /*#__PURE__*/_jsx(Sparkles, {
-      size: size,
-      color: color
-    }),
-    'debug-borders': /*#__PURE__*/_jsx(Square, {
-      size: size,
-      color: color
-    }),
-    sentry: /*#__PURE__*/_jsx(AlertTriangle, {
-      size: size,
-      color: color
-    }),
-    environment: /*#__PURE__*/_jsx(SettingsIcon, {
-      size: size,
-      color: color
-    }),
-    redux: /*#__PURE__*/_jsx(ReduxIcon, {
-      size: size
-    })
+  const size = 16; // native: getToolIcon renders all icons at size 16
+  switch (toolId) {
+    case 'query':
+      return /*#__PURE__*/_jsx(QueryIcon, {
+        size: size
+      });
+    case 'env':
+    case 'environment':
+      return /*#__PURE__*/_jsx(EnvIcon, {
+        size: size
+      });
+    case 'sentry':
+      // native: SentryBugIcon colorPreset="red" noBackground
+      return /*#__PURE__*/_jsx(AlertTriangle, {
+        size: size,
+        color: buoy.error
+      });
+    case 'storage':
+      return /*#__PURE__*/_jsx(StorageIcon, {
+        size: size
+      });
+    case 'wifi':
+    case 'query-wifi-toggle':
+      // native: WifiCircuitIcon colorPreset="green" (shared-ui only)
+      return /*#__PURE__*/_jsx(WifiIcon, {
+        size: size
+      });
+    case 'route-events':
+    case 'routes':
+      // web alias for the same tool
+      return /*#__PURE__*/_jsx(RoutesIcon, {
+        size: size
+      });
+    case 'network':
+      return /*#__PURE__*/_jsx(NetworkIcon, {
+        size: size
+      });
+    case 'debug-borders':
+      // native: Layers size 16 color buoyColors.primary
+      return /*#__PURE__*/_jsx(Layers, {
+        size: size,
+        color: buoy.primary
+      });
+    case 'highlight-updates':
+      // native: RenderCountIcon size 16 color buoyColors.primary
+      return /*#__PURE__*/_jsx(Sparkles, {
+        size: size,
+        color: buoy.primary
+      });
+    case 'highlight-updates-modal':
+      return /*#__PURE__*/_jsx(HighlighterIcon, {
+        size: size
+      });
+    case 'redux':
+      return /*#__PURE__*/_jsx(ReduxIcon, {
+        size: size
+      });
+    case 'image-overlay':
+      return /*#__PURE__*/_jsx(ImageOverlayIcon, {
+        size: size
+      });
+    case 'events':
+      return /*#__PURE__*/_jsx(EventsIcon, {
+        size: size
+      });
+    case 'zustand':
+      return /*#__PURE__*/_jsx(ZustandIcon, {
+        size: size
+      });
+    case 'jotai':
+      return /*#__PURE__*/_jsx(JotaiIcon, {
+        size: size
+      });
+    default:
+      // native: Info size 16 color buoyColors.textSecondary
+      return /*#__PURE__*/_jsx(Info, {
+        size: size,
+        color: buoy.textSecondary
+      });
+  }
+}
+
+// =============================
+// Toggle Pill (shared by cards)
+// =============================
+
+/**
+ * Native styles.pillToggle / pillToggleOn / pillToggleOff.
+ * onColor lets the global-settings cards use the success color like native.
+ */
+function togglePillStyle(on, onColor, onStrongBorder) {
+  return {
+    paddingLeft: 14,
+    // native DevToolsSettingsModal.tsx pillToggle: paddingHorizontal 14
+    paddingRight: 14,
+    paddingTop: settingsStyles.toggle.paddingVertical,
+    paddingBottom: settingsStyles.toggle.paddingVertical,
+    borderRadius: 6,
+    // native pillToggle: borderRadius 6
+    borderWidth: settingsStyles.toggle.borderWidth,
+    borderStyle: 'solid',
+    minWidth: 48,
+    // native pillToggle: minWidth 48
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: on ? `${onColor}${onStrongBorder ? '33' : '20'}` : buoy.hover,
+    borderColor: on ? onStrongBorder ? `${onColor}88` : onColor : buoy.border,
+    color: on ? onColor : buoy.textMuted,
+    fontSize: settingsStyles.toggle.fontSize,
+    fontWeight: 600,
+    // native pillToggleText: fontWeight 600
+    letterSpacing: 0.5,
+    // native pillToggleText: letterSpacing 0.5
+    fontFamily: 'inherit',
+    cursor: 'pointer',
+    transition: 'all 150ms ease',
+    // native global-settings toggle: teal glow when ON (shadowRadius 8 / opacity 0.4)
+    boxShadow: on && onStrongBorder ? `0 0 8px ${onColor}66` : 'none'
   };
-  return iconMap[toolId] || /*#__PURE__*/_jsx(SettingsIcon, {
-    size: size,
-    color: color
-  });
 }
 
 // =============================
@@ -332,63 +467,54 @@ function ToolCard({
   availableTools,
   onToggle
 }) {
-  const [isHovered, setIsHovered] = useState(false);
-  const color = getToolColor(toolId);
   const label = getToolLabel(toolId, availableTools);
   const description = getToolDescription(toolId, availableTools);
+
+  // native styles.glassCard / glassCardActive
   const cardStyle = {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    gap: settingsStyles.cardInner.gap,
-    paddingTop: settingsStyles.card.paddingVertical,
-    paddingBottom: settingsStyles.card.paddingVertical,
+    gap: 12,
+    // native glassCardInner: gap 12
+    paddingTop: 12,
+    // native glassCard: paddingVertical 12
+    paddingBottom: 12,
     paddingLeft: settingsStyles.card.paddingHorizontal,
     paddingRight: settingsStyles.card.paddingHorizontal,
-    backgroundColor: settingsColors.cardBackground,
-    borderRadius: settingsStyles.card.borderRadius,
+    backgroundColor: enabled ? `${buoy.primary}08` : buoy.card,
+    // native glassCardActive bg
+    borderRadius: 12,
+    // native glassCard: borderRadius 12
     borderWidth: settingsStyles.card.borderWidth,
     borderStyle: 'solid',
-    borderColor: isHovered && !disabled ? settingsColors.cardBorderHover : settingsColors.cardBorder,
-    marginBottom: settingsStyles.card.marginBottom,
+    borderColor: enabled ? `${buoy.primary}50` : buoy.border,
+    // native glassCardActive border
+    marginBottom: 8,
+    // native renderToolCard wrapper: marginBottom 8
     cursor: disabled ? 'not-allowed' : 'pointer',
-    opacity: disabled ? 0.6 : 1,
-    transition: 'all 150ms ease',
-    boxShadow: enabled ? `0 0 6px ${color}33, 0 0 12px ${color}20` : 'none'
-  };
-  const toggleStyle = {
-    paddingLeft: settingsStyles.toggle.paddingHorizontal,
-    paddingRight: settingsStyles.toggle.paddingHorizontal,
-    paddingTop: settingsStyles.toggle.paddingVertical,
-    paddingBottom: settingsStyles.toggle.paddingVertical,
-    borderRadius: settingsStyles.toggle.borderRadius,
-    borderWidth: settingsStyles.toggle.borderWidth,
-    borderStyle: 'solid',
-    backgroundColor: enabled ? settingsColors.toggleOnBg(color) : settingsColors.toggleOffBg,
-    borderColor: enabled ? settingsColors.toggleOnBorder(color) : settingsColors.toggleOffBorder,
-    color: enabled ? color : settingsColors.toggleOffText,
-    fontSize: settingsStyles.toggle.fontSize,
-    fontWeight: settingsStyles.toggle.fontWeight,
-    cursor: disabled ? 'not-allowed' : 'pointer',
-    transition: 'all 150ms ease',
-    boxShadow: enabled ? `0 0 8px ${color}66` : 'none'
+    opacity: disabled ? 0.5 : 1,
+    // native wrapper: opacity 0.5 when disabled
+    transition: 'all 150ms ease'
   };
   return /*#__PURE__*/_jsxs("div", {
     onClick: disabled ? undefined : onToggle,
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => setIsHovered(false),
     style: cardStyle,
     children: [/*#__PURE__*/_jsx("div", {
       style: {
-        width: settingsStyles.iconContainer.width,
-        height: settingsStyles.iconContainer.height,
+        width: 32,
+        // native iconContainer: 32x32
+        height: 32,
+        borderRadius: 8,
+        // native iconContainer: borderRadius 8
+        backgroundColor: enabled ? `${buoy.primary}20` : buoy.hover,
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        flexShrink: 0
       },
       children: /*#__PURE__*/_jsx(ToolIcon, {
-        toolId: toolId,
-        color: color
+        toolId: toolId
       })
     }), /*#__PURE__*/_jsxs("div", {
       style: {
@@ -397,15 +523,18 @@ function ToolCard({
       },
       children: [/*#__PURE__*/_jsxs("div", {
         style: {
-          color: settingsColors.text,
-          fontWeight: settingsStyles.toolName.fontWeight,
+          color: buoy.text,
+          fontWeight: 600,
+          // native toolName: fontWeight 600
           fontSize: settingsStyles.toolName.fontSize
         },
         children: [label, disabled && ' (MAX 6)']
-      }), description && /*#__PURE__*/_jsx("div", {
+      }), /*#__PURE__*/_jsx("div", {
         style: {
-          color: settingsColors.textMuted,
+          color: buoy.textMuted,
           fontSize: settingsStyles.toolDescription.fontSize,
+          marginTop: 2,
+          // native toolDescription: marginTop 2
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap'
@@ -418,17 +547,181 @@ function ToolCard({
         if (!disabled) onToggle();
       },
       disabled: disabled,
-      style: toggleStyle,
-      children: enabled ? 'ON' : 'OFF'
-    }), /*#__PURE__*/_jsx("div", {
       style: {
-        color: settingsColors.textMuted
+        ...togglePillStyle(enabled, buoy.primary, false),
+        cursor: disabled ? 'not-allowed' : 'pointer'
       },
-      children: /*#__PURE__*/_jsx(ChevronRightIcon, {})
+      children: enabled ? 'ON' : 'OFF'
     })]
   });
 }
 
+// =============================
+// Global Setting Card (expandable, native renderGlobalSettingCard)
+// =============================
+
+function GlobalSettingCard({
+  configKey,
+  label,
+  category,
+  shortDescription,
+  fullDescription,
+  recommendation,
+  value,
+  onToggle
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // native styles.expandableCard (+ expanded teal ring/glow/scale)
+  const cardStyle = {
+    backgroundColor: buoy.card,
+    borderRadius: 8,
+    borderWidth: isExpanded ? 2 : 1,
+    // native expanded: borderWidth 2
+    borderStyle: 'solid',
+    borderColor: isExpanded ? buoy.primary : buoy.border,
+    padding: 12,
+    cursor: 'pointer',
+    transition: 'all 150ms ease',
+    // native expanded: shadowColor primary, opacity 0.8, radius 20
+    boxShadow: isExpanded ? `0 0 20px ${buoy.primary}CC` : 'none',
+    transform: isExpanded ? 'scale(1.01)' : 'scale(1)' // native expanded: scale 1.01
+  };
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      marginBottom: 10
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      onClick: () => setIsExpanded(v => !v),
+      style: cardStyle,
+      children: [/*#__PURE__*/_jsxs("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          style: {
+            backgroundColor: `${buoy.primary}20`,
+            border: `1px solid ${buoy.primary}40`,
+            borderRadius: 4,
+            padding: '4px 8px',
+            flexShrink: 0
+          },
+          children: /*#__PURE__*/_jsx("span", {
+            style: {
+              fontSize: 10,
+              fontWeight: 700,
+              color: buoy.primary,
+              letterSpacing: 0.5
+            },
+            children: category
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          style: {
+            flex: 1,
+            minWidth: 0,
+            paddingLeft: 4,
+            paddingRight: 4
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            style: {
+              fontFamily: 'monospace',
+              fontSize: 12,
+              fontWeight: 700,
+              color: buoy.text
+            },
+            children: label
+          }), !isExpanded && /*#__PURE__*/_jsx("div", {
+            style: {
+              fontSize: 10,
+              color: buoy.textMuted,
+              marginTop: 2,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            },
+            children: shortDescription
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            flexShrink: 0
+          },
+          children: [/*#__PURE__*/_jsx("button", {
+            onClick: e => {
+              e.stopPropagation();
+              onToggle();
+            },
+            style: togglePillStyle(value, buoy.success, true),
+            children: value ? 'ON' : 'OFF'
+          }), isExpanded ?
+          /*#__PURE__*/
+          // native: ChevronDown size 18 color #7F91B2
+          _jsx(ChevronDownIcon, {
+            size: 18,
+            color: "#7F91B2"
+          }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+            size: 18,
+            color: "#7F91B2"
+          })]
+        })]
+      }), isExpanded && /*#__PURE__*/_jsxs("div", {
+        style: {
+          marginTop: 12,
+          paddingTop: 12,
+          borderTop: `1px solid ${buoy.border}50`
+        },
+        children: [/*#__PURE__*/_jsxs("div", {
+          style: {
+            marginBottom: 12
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            style: {
+              fontSize: 10,
+              fontWeight: 700,
+              color: buoy.primary,
+              letterSpacing: 1,
+              marginBottom: 6
+            },
+            children: "DESCRIPTION"
+          }), /*#__PURE__*/_jsx("div", {
+            style: {
+              fontSize: 12,
+              color: buoy.textSecondary,
+              lineHeight: '18px'
+            },
+            children: fullDescription
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          style: {
+            marginBottom: 12
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            style: {
+              fontSize: 10,
+              fontWeight: 700,
+              color: buoy.primary,
+              letterSpacing: 1,
+              marginBottom: 6
+            },
+            children: "RECOMMENDATION"
+          }), /*#__PURE__*/_jsx("div", {
+            style: {
+              fontSize: 12,
+              color: buoy.textSecondary,
+              lineHeight: '18px'
+            },
+            children: recommendation
+          })]
+        })]
+      })]
+    })
+  }, configKey);
+}
+
 // =============================
 // Main Component
 // =============================
@@ -443,7 +736,9 @@ export function SettingsModal({
   onSettingsChange
 }) {
   const [activeTab, setActiveTab] = useState('floating');
-  const [isExiting, setIsExiting] = useState(false);
+  const [isStorageExpanded, setIsStorageExpanded] = useState(false);
+  const [savedKeys, setSavedKeys] = useState([]);
+  const [clearSuccess, setClearSuccess] = useState(false);
 
   // Use the shared settings hook
   const {
@@ -458,13 +753,9 @@ export function SettingsModal({
     onSettingsChange
   });
 
-  // Handle close with animation
+  // JsModal owns the close animation now — this is just the Escape path.
   const handleClose = useCallback(() => {
-    setIsExiting(true);
-    setTimeout(() => {
-      setIsExiting(false);
-      onClose();
-    }, 200);
+    onClose();
   }, [onClose]);
 
   // Escape key handler
@@ -478,255 +769,334 @@ export function SettingsModal({
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [visible, handleClose]);
+
+  // Saved-settings key list for the storage card (mirrors the native
+  // persistentStorage.getAllKeys() list; on web, Buoy keys in localStorage).
+  useEffect(() => {
+    if (!visible || !isStorageExpanded) return;
+    try {
+      const keys = Object.keys(localStorage).filter(key => key.startsWith('@react_buoy')).sort();
+      setSavedKeys(keys);
+    } catch {
+      setSavedKeys([]);
+    }
+  }, [visible, isStorageExpanded, clearSuccess, settings]);
+  const handleClearAll = useCallback(() => {
+    // Same behavior as before (reset via the shared hook); the 2s "CLEARED"
+    // flash mirrors the native clear button feedback.
+    actions.resetToDefaults();
+    setClearSuccess(true);
+    setTimeout(() => setClearSuccess(false), 2000);
+  }, [actions]);
   if (!visible) return null;
 
   // Filter tabs - exclude 'pro' for now on web
   const displayTabs = settingsTabs.filter(tab => tab.key !== 'pro');
-  const containerStyle = {
-    position: 'fixed',
-    inset: 0,
-    zIndex: 10000,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  };
-  const backdropStyle = {
-    position: 'absolute',
-    inset: 0,
-    backgroundColor: settingsColors.backdrop,
-    opacity: isExiting ? 0 : 1,
-    transition: 'opacity 200ms ease'
-  };
-  const modalStyle = {
-    position: 'relative',
-    width: '90%',
-    maxWidth: 450,
-    maxHeight: '80vh',
-    backgroundColor: settingsColors.panel,
-    borderRadius: 12,
-    border: `1px solid ${settingsColors.cardBorder}`,
-    boxShadow: `0 24px 48px rgba(0, 0, 0, 0.5), 0 0 24px ${settingsColors.info}20`,
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-    transform: isExiting ? 'scale(0.95)' : 'scale(1)',
-    opacity: isExiting ? 0 : 1,
-    transition: 'transform 200ms ease, opacity 200ms ease'
-  };
-  return /*#__PURE__*/_jsxs("div", {
-    role: "dialog",
-    "aria-label": "Settings",
-    "aria-modal": "true",
-    style: containerStyle,
-    children: [/*#__PURE__*/_jsx("div", {
-      role: "button",
-      "aria-label": "Close settings",
-      tabIndex: 0,
-      onClick: handleClose,
-      style: backdropStyle
-    }), /*#__PURE__*/_jsxs("div", {
-      style: modalStyle,
-      children: [/*#__PURE__*/_jsxs("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          padding: '12px 16px',
-          borderBottom: `1px solid ${settingsColors.cardBorder}`
-        },
-        children: [/*#__PURE__*/_jsx("div", {
+
+  // Tab pill row rendered inside the JsModal header — native passes
+  // ModalHeader + TabSelector as header.customContent the same way.
+  const tabHeader = /*#__PURE__*/_jsx("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      paddingLeft: 4,
+      paddingRight: 28,
+      // clears JsModal's absolutely-positioned window controls
+      paddingBottom: 6
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      style: {
+        flex: 1,
+        display: 'flex',
+        backgroundColor: buoy.hover,
+        borderRadius: 6,
+        padding: 2,
+        border: `1px solid ${buoy.border}`,
+        height: 28,
+        boxSizing: 'border-box'
+      },
+      children: displayTabs.map(tab => {
+        const isActive = activeTab === tab.key;
+        return /*#__PURE__*/_jsx("button", {
+          onClick: () => setActiveTab(tab.key),
           style: {
             flex: 1,
-            display: 'flex',
-            backgroundColor: settingsColors.panel,
-            borderRadius: 6,
-            padding: 2,
-            border: `1px solid ${settingsColors.cardBorder}`
-          },
-          children: displayTabs.map(tab => {
-            const isActive = activeTab === tab.key;
-            return /*#__PURE__*/_jsx("button", {
-              onClick: () => setActiveTab(tab.key),
-              style: {
-                flex: 1,
-                paddingLeft: settingsStyles.tab.paddingHorizontal,
-                paddingRight: settingsStyles.tab.paddingHorizontal,
-                paddingTop: settingsStyles.tab.paddingVertical,
-                paddingBottom: settingsStyles.tab.paddingVertical,
-                borderRadius: settingsStyles.tab.borderRadius,
-                backgroundColor: isActive ? settingsColors.tabActiveBg : settingsColors.tabInactiveBg,
-                border: isActive ? `1px solid ${settingsColors.tabActiveBorder}40` : '1px solid transparent',
-                color: isActive ? settingsColors.info : settingsColors.tabInactiveText,
-                fontSize: settingsStyles.tab.fontSize,
-                fontWeight: settingsStyles.tab.fontWeight,
-                letterSpacing: settingsStyles.tab.letterSpacing,
-                cursor: 'pointer',
-                transition: 'all 150ms ease',
-                textTransform: 'uppercase',
-                fontFamily: 'monospace'
-              },
-              children: tab.label
-            }, tab.key);
-          })
-        }), /*#__PURE__*/_jsx("button", {
-          "aria-label": "Close",
-          onClick: handleClose,
-          style: {
-            marginLeft: 12,
-            background: 'none',
-            border: 'none',
-            padding: 4,
+            marginLeft: 1,
+            // native TabSelector tabButton: marginHorizontal 1
+            marginRight: 1,
+            paddingLeft: settingsStyles.tab.paddingHorizontal,
+            paddingRight: settingsStyles.tab.paddingHorizontal,
+            paddingTop: 3,
+            // native TabSelector tabButton: paddingVertical 3
+            paddingBottom: 3,
+            borderRadius: settingsStyles.tab.borderRadius,
+            // native tabButtonActive: bg primary+20, 1px primary border
+            backgroundColor: isActive ? `${buoy.primary}20` : 'transparent',
+            border: isActive ? `1px solid ${buoy.primary}` : '1px solid transparent',
+            color: isActive ? buoy.primary : buoy.textMuted,
+            fontSize: settingsStyles.tab.fontSize,
+            fontWeight: settingsStyles.tab.fontWeight,
+            letterSpacing: settingsStyles.tab.letterSpacing,
             cursor: 'pointer',
-            color: settingsColors.textMuted,
+            transition: 'all 150ms ease',
+            textTransform: 'uppercase',
+            fontFamily: 'inherit',
+            // native TabSelector uses the system font
+            boxSizing: 'border-box',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
           },
-          children: /*#__PURE__*/_jsx(CloseIcon, {})
-        })]
-      }), /*#__PURE__*/_jsx("div", {
+          children: tab.label
+        }, tab.key);
+      })
+    })
+  });
+
+  // native: initialHeight = screenHeight / 3, floating starts centered at
+  // width min(screenWidth - 32, 400), y = insets.top + 20.
+  const modalWidth = Math.min(window.innerWidth - 32, 400);
+  const topInset = readTopSafeAreaInset();
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: handleClose,
+    header: {
+      showToggleButton: false,
+      customContent: tabHeader
+    },
+    initialMode: "bottomSheet",
+    persistenceKey: devToolsStorageKeys.settings.root(),
+    enablePersistence: true,
+    initialHeight: Math.floor(window.innerHeight * 0.33),
+    initialFloatingPosition: {
+      x: (window.innerWidth - modalWidth) / 2,
+      y: topInset + 20 // native: insets.top + 20
+    },
+    zIndex: 10001 // above the dial (10000) — settings opens over it
+    ,
+    disableScrollWrapper: true,
+    children: /*#__PURE__*/_jsx("div", {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        overflow: 'auto',
+        backgroundColor: buoy.base,
+        paddingTop: settingsStyles.scrollContent.paddingTop,
+        paddingBottom: settingsStyles.scrollContent.paddingBottom,
+        paddingLeft: settingsStyles.section.marginHorizontal,
+        paddingRight: settingsStyles.section.marginHorizontal
+      },
+      children: isLoading ? /*#__PURE__*/_jsx("div", {
         style: {
-          flex: 1,
-          overflow: 'auto',
-          paddingTop: settingsStyles.scrollContent.paddingTop,
-          paddingBottom: settingsStyles.scrollContent.paddingBottom,
-          paddingLeft: settingsStyles.section.marginHorizontal,
-          paddingRight: settingsStyles.section.marginHorizontal
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 40,
+          color: buoy.textMuted,
+          fontSize: 12
         },
-        children: isLoading ? /*#__PURE__*/_jsx("div", {
-          style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: 40,
-            color: settingsColors.textMuted
-          },
-          children: "Loading settings..."
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [activeTab === 'floating' && /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx("div", {
+        children: "Loading settings..."
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [activeTab === 'floating' && /*#__PURE__*/_jsx("div", {
+          children: Object.entries(settings.floatingTools).map(([id, enabled]) => /*#__PURE__*/_jsx(ToolCard, {
+            toolId: id,
+            enabled: enabled,
+            availableTools: availableTools,
+            onToggle: () => id === 'environment' ? actions.toggleEnvironment() : actions.toggleFloatingTool(id)
+          }, id))
+        }), activeTab === 'settings' && /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsxs("div", {
+            style: {
+              backgroundColor: buoy.card,
+              borderRadius: 8,
+              border: `1px solid ${isStorageExpanded ? `${buoy.success}60` : buoy.border}`,
+              padding: 12,
+              marginBottom: 10,
+              transition: 'border-color 150ms ease'
+            },
+            children: [/*#__PURE__*/_jsxs("div", {
+              onClick: () => setIsStorageExpanded(v => !v),
               style: {
-                fontSize: settingsStyles.sectionTitle.fontSize,
-                fontWeight: settingsStyles.sectionTitle.fontWeight,
-                letterSpacing: settingsStyles.sectionTitle.letterSpacing,
-                textTransform: settingsStyles.sectionTitle.textTransform,
-                color: settingsColors.textMuted,
-                marginBottom: settingsStyles.sectionHeader.marginBottom
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+                marginBottom: 8,
+                cursor: 'pointer'
               },
-              children: "CONFIGURE FLOATING TOOLBAR ITEMS"
-            }), Object.entries(settings.floatingTools).map(([id, enabled]) => /*#__PURE__*/_jsx(ToolCard, {
-              toolId: id,
-              enabled: enabled,
-              availableTools: availableTools,
-              onToggle: () => id === 'environment' ? actions.toggleEnvironment() : actions.toggleFloatingTool(id)
-            }, id))]
-          }), activeTab === 'settings' && /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx("div", {
-              style: {
-                fontSize: settingsStyles.sectionTitle.fontSize,
-                fontWeight: settingsStyles.sectionTitle.fontWeight,
-                letterSpacing: settingsStyles.sectionTitle.letterSpacing,
-                textTransform: settingsStyles.sectionTitle.textTransform,
-                color: settingsColors.textMuted,
-                marginBottom: settingsStyles.sectionHeader.marginBottom
-              },
-              children: "GLOBAL SETTINGS"
-            }), globalSettingsConfig.map(config => {
-              const value = settings.globalSettings?.[config.key] ?? false;
-              const color = settingsColors.success;
-              return /*#__PURE__*/_jsx("div", {
+              children: [/*#__PURE__*/_jsx("div", {
                 style: {
-                  padding: 12,
-                  backgroundColor: settingsColors.cardBackground,
+                  width: 36,
+                  height: 36,
                   borderRadius: 8,
-                  border: `1px solid ${settingsColors.cardBorder}`,
-                  marginBottom: 10
+                  backgroundColor: `${buoy.success}15`,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0
+                },
+                children: /*#__PURE__*/_jsx(Database, {
+                  size: 18,
+                  color: buoy.success
+                })
+              }), /*#__PURE__*/_jsxs("div", {
+                style: {
+                  flex: 1,
+                  minWidth: 0
                 },
-                children: /*#__PURE__*/_jsxs("div", {
+                children: [/*#__PURE__*/_jsx("div", {
+                  style: {
+                    fontSize: 10,
+                    fontWeight: 700,
+                    color: buoy.textMuted,
+                    letterSpacing: 1,
+                    marginBottom: 4
+                  },
+                  children: "STORAGE TYPE"
+                }), /*#__PURE__*/_jsxs("div", {
                   style: {
                     display: 'flex',
                     alignItems: 'center',
-                    gap: 12
+                    gap: 6
                   },
-                  children: [/*#__PURE__*/_jsx("div", {
+                  children: [/*#__PURE__*/_jsx("span", {
                     style: {
-                      backgroundColor: `${settingsColors.info}20`,
-                      border: `1px solid ${settingsColors.info}40`,
+                      padding: '4px 8px',
                       borderRadius: 4,
-                      padding: '4px 8px'
+                      border: `1px solid ${buoy.success}60`,
+                      backgroundColor: `${buoy.success}20`,
+                      color: buoy.success,
+                      fontSize: 11,
+                      fontWeight: 700,
+                      letterSpacing: 0.5
                     },
-                    children: /*#__PURE__*/_jsx("span", {
-                      style: {
-                        fontSize: 10,
-                        fontWeight: 700,
-                        color: settingsColors.info,
-                        letterSpacing: 0.5
-                      },
-                      children: config.category
-                    })
-                  }), /*#__PURE__*/_jsxs("div", {
-                    style: {
-                      flex: 1
-                    },
-                    children: [/*#__PURE__*/_jsx("div", {
-                      style: {
-                        fontFamily: 'monospace',
-                        fontSize: 12,
-                        fontWeight: 700,
-                        color: settingsColors.text
-                      },
-                      children: config.label
-                    }), /*#__PURE__*/_jsx("div", {
-                      style: {
-                        fontSize: 10,
-                        color: settingsColors.textMuted,
-                        marginTop: 2
-                      },
-                      children: config.shortDescription
-                    })]
-                  }), /*#__PURE__*/_jsx("button", {
-                    onClick: () => actions.toggleGlobalSetting(config.key),
+                    children: "LOCAL STORAGE"
+                  }), /*#__PURE__*/_jsx(CheckCircle2, {
+                    size: 14,
+                    color: buoy.success
+                  })]
+                })]
+              }), isStorageExpanded ? /*#__PURE__*/_jsx(ChevronDownIcon, {
+                size: 18,
+                color: buoy.textMuted
+              }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+                size: 18,
+                color: buoy.textMuted
+              })]
+            }), /*#__PURE__*/_jsx("div", {
+              style: {
+                fontSize: 11,
+                color: buoy.textMuted,
+                lineHeight: '16px',
+                marginBottom: 12
+              },
+              children: "Settings persist in the browser's localStorage and survive page reloads."
+            }), isStorageExpanded && /*#__PURE__*/_jsxs("div", {
+              style: {
+                marginTop: 12,
+                paddingTop: 12,
+                borderTop: `1px solid ${buoy.border}50`,
+                marginBottom: 12
+              },
+              children: [/*#__PURE__*/_jsxs("div", {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8,
+                  marginBottom: 10
+                },
+                children: [/*#__PURE__*/_jsx(FileText, {
+                  size: 14,
+                  color: buoy.primary
+                }), /*#__PURE__*/_jsx("span", {
+                  style: {
+                    fontSize: 10,
+                    fontWeight: 700,
+                    color: buoy.primary,
+                    letterSpacing: 1,
+                    flex: 1
+                  },
+                  children: "SAVED SETTINGS"
+                }), /*#__PURE__*/_jsxs("span", {
+                  style: {
+                    fontSize: 10,
+                    color: buoy.textMuted
+                  },
+                  children: [savedKeys.length, " keys"]
+                })]
+              }), savedKeys.length === 0 ? /*#__PURE__*/_jsx("div", {
+                style: {
+                  fontSize: 11,
+                  color: buoy.textMuted,
+                  fontStyle: 'italic',
+                  padding: '8px 0'
+                },
+                children: "No settings saved yet"
+              }) : /*#__PURE__*/_jsx("div", {
+                style: {
+                  maxHeight: 150,
+                  overflow: 'auto'
+                },
+                children: savedKeys.map(key => /*#__PURE__*/_jsx("div", {
+                  style: {
+                    backgroundColor: buoy.hover,
+                    borderRadius: 4,
+                    padding: '6px 8px',
+                    border: `1px solid ${buoy.border}50`,
+                    marginBottom: 4
+                  },
+                  children: /*#__PURE__*/_jsx("div", {
                     style: {
-                      paddingLeft: settingsStyles.toggle.paddingHorizontal,
-                      paddingRight: settingsStyles.toggle.paddingHorizontal,
-                      paddingTop: settingsStyles.toggle.paddingVertical,
-                      paddingBottom: settingsStyles.toggle.paddingVertical,
-                      borderRadius: settingsStyles.toggle.borderRadius,
-                      borderWidth: settingsStyles.toggle.borderWidth,
-                      borderStyle: 'solid',
-                      backgroundColor: value ? settingsColors.toggleOnBg(color) : settingsColors.toggleOffBg,
-                      borderColor: value ? settingsColors.toggleOnBorder(color) : settingsColors.toggleOffBorder,
-                      color: value ? color : settingsColors.toggleOffText,
-                      fontSize: settingsStyles.toggle.fontSize,
-                      fontWeight: settingsStyles.toggle.fontWeight,
-                      cursor: 'pointer',
-                      transition: 'all 150ms ease',
-                      boxShadow: value ? `0 0 8px ${color}66` : 'none'
+                      fontSize: 11,
+                      color: buoy.textSecondary,
+                      fontFamily: 'monospace',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap'
                     },
-                    children: value ? 'ON' : 'OFF'
-                  })]
-                })
-              }, config.key);
-            }), /*#__PURE__*/_jsx("button", {
-              onClick: () => actions.resetToDefaults(),
+                    children: key.replace('@react_buoy_', '')
+                  })
+                }, key))
+              })]
+            }), /*#__PURE__*/_jsxs("button", {
+              onClick: handleClearAll,
               style: {
                 width: '100%',
-                padding: '12px 16px',
-                marginTop: 8,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 8,
+                padding: '10px 16px',
                 borderRadius: 6,
-                border: `1px solid ${settingsColors.error}40`,
-                backgroundColor: `${settingsColors.error}15`,
-                color: settingsColors.error,
+                border: `1px solid ${clearSuccess ? `${buoy.success}40` : `${buoy.error}40`}`,
+                backgroundColor: clearSuccess ? `${buoy.success}15` : `${buoy.error}15`,
+                color: clearSuccess ? buoy.success : buoy.error,
                 fontSize: 12,
                 fontWeight: 700,
                 letterSpacing: 0.5,
+                fontFamily: 'inherit',
                 cursor: 'pointer',
                 transition: 'all 150ms ease'
               },
-              children: "CLEAR ALL SETTINGS"
+              children: [clearSuccess ? /*#__PURE__*/_jsx(CheckCircle2, {
+                size: 14,
+                color: buoy.success
+              }) : /*#__PURE__*/_jsx(Trash2, {
+                size: 14,
+                color: buoy.error
+              }), clearSuccess ? 'CLEARED' : 'CLEAR ALL SETTINGS']
             })]
-          })]
-        })
-      })]
-    })]
+          }), globalSettingsConfig.map(config => /*#__PURE__*/_jsx(GlobalSettingCard, {
+            configKey: config.key,
+            label: config.label,
+            category: config.category,
+            shortDescription: config.shortDescription,
+            fullDescription: config.fullDescription,
+            recommendation: config.recommendation,
+            value: settings.globalSettings?.[config.key] ?? false,
+            onToggle: () => actions.toggleGlobalSetting(config.key)
+          }, config.key))]
+        })]
+      })
+    })
   });
 }