@buoy-gg/core 7.0.26 → 7.0.28

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

@@ -8,9 +8,9 @@
  *
  * 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.
+ * renders in the "night" language — shared-ui's ui/night Everlights port —
+ * inside JsModal variant="night"). shared-ui is RN-only, so the night tokens
+ * and primitive styles are inlined below with provenance comments.
  *
  * @platform React DOM Web (Vite, CRA, Next.js, Electron)
  */
@@ -21,8 +21,6 @@ import {
 useSettings,
 // Tab configuration
 settingsTabs,
-// Shared style tokens (used where they match the native reference)
-settingsStyles,
 // Tool metadata
 getToolLabel, getToolDescription,
 // Global settings config
@@ -31,8 +29,10 @@ globalSettingsConfig
 } from '@buoy-gg/floating-tools-react';
 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';
+// settings sheet is a real JsModal on web now, same as native. The
+// BackgroundSwitcher is the same RN component native mounts: it renders under
+// the consumer's RNW lane exactly like the ToolBackground JsModal.web draws.
+import { JsModal, devToolsStorageKeys, BackgroundSwitcher } 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";
@@ -47,29 +47,39 @@ function readTopSafeAreaInset() {
 }
 
 // =============================
-// Native palette (provenance)
+// Night tokens (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.
+ * `night` from @buoy-gg/shared-ui (ui/night/nightTheme.ts) — the Everlights
+ * 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'
+const night = {
+  bg: '#050505',
+  surface: '#0C0C0C',
+  surfaceElevated: '#161618',
+  border: '#1A1A1C',
+  separator: 'rgba(255, 255, 255, 0.08)',
+  fillTertiary: 'rgba(255, 255, 255, 0.12)',
+  buttonSurface: 'rgba(8, 10, 14, 0.85)',
+  button: '#1C1C1C',
+  buttonPressed: '#2C2C2E',
+  text: '#ECEDEE',
+  textSecondary: '#9BA1A6',
+  textTertiary: '#636366',
+  placeholder: 'rgba(255, 255, 255, 0.30)',
+  accent: '#20C997',
+  accentSoft: 'rgba(32, 201, 151, 0.12)',
+  accentFill: 'rgba(32, 201, 151, 0.18)',
+  accentBorderStrong: 'rgba(32, 201, 151, 0.35)',
+  onAccent: '#000000',
+  danger: '#FF3B30',
+  dangerSoft: 'rgba(255, 59, 48, 0.10)',
+  warning: '#FF8329',
+  warningSoft: 'rgba(255, 131, 41, 0.12)',
+  fillSecondary: 'rgba(255, 255, 255, 0.08)',
+  knob: '#D4D8DC'
 };
 
 // =============================
@@ -89,7 +99,7 @@ const webStorageAdapter = {
 // Icon Components (Web SVGs)
 // =============================
 
-/** Fallback for shared-ui Layers icon (native debug-borders card icon). */
+/** Fallback for shared-ui Layers icon (native debug-borders row icon). */
 const Layers = ({
   size = 24,
   color = 'currentColor'
@@ -111,7 +121,7 @@ const Layers = ({
   })]
 });
 
-/** Fallback for shared-ui RenderCountIcon (native highlight-updates card icon). */
+/** Fallback for shared-ui RenderCountIcon (native highlight-updates row icon). */
 const Sparkles = ({
   size = 24,
   color = 'currentColor'
@@ -137,7 +147,7 @@ const Sparkles = ({
   })]
 });
 
-/** Fallback for shared-ui SentryBugIcon (native sentry card icon, red). */
+/** Fallback for shared-ui SentryBugIcon (native sentry row icon, red). */
 const AlertTriangle = ({
   size = 24,
   color = 'currentColor'
@@ -183,32 +193,7 @@ const Info = ({
   })]
 });
 
-/** shared-ui Database icon (native storage status card icon). */
-const Database = ({
-  size = 24,
-  color = 'currentColor'
-}) => /*#__PURE__*/_jsxs("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: color,
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  children: [/*#__PURE__*/_jsx("ellipse", {
-    cx: "12",
-    cy: "5",
-    rx: "9",
-    ry: "3"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M3 5V19A9 3 0 0 0 21 19V5"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M3 12A9 3 0 0 0 21 12"
-  })]
-});
-
-/** shared-ui CheckCircle2 icon (native storage badge check). */
+/** shared-ui CheckCircle2 icon (clear-success feedback). */
 const CheckCircle2 = ({
   size = 24,
   color = 'currentColor'
@@ -230,33 +215,7 @@ const CheckCircle2 = ({
   })]
 });
 
-/** shared-ui FileText icon (native SAVED SETTINGS header icon). */
-const FileText = ({
-  size = 24,
-  color = 'currentColor'
-}) => /*#__PURE__*/_jsxs("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: color,
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  children: [/*#__PURE__*/_jsx("path", {
-    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: "M14 2v4a2 2 0 0 0 2 2h4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M10 9H8"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M16 13H8"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M16 17H8"
-  })]
-});
-
-/** shared-ui Trash2 icon (native CLEAR ALL SETTINGS button icon). */
+/** shared-ui Trash2 icon (native Clear All Settings button icon). */
 const Trash2 = ({
   size = 24,
   color = 'currentColor'
@@ -288,7 +247,7 @@ const Trash2 = ({
   })]
 });
 function ChevronRightIcon({
-  size = 18,
+  size = 16,
   color = 'currentColor'
 }) {
   return /*#__PURE__*/_jsx("svg", {
@@ -306,7 +265,7 @@ function ChevronRightIcon({
   });
 }
 function ChevronDownIcon({
-  size = 18,
+  size = 16,
   color = 'currentColor'
 }) {
   return /*#__PURE__*/_jsx("svg", {
@@ -326,14 +285,15 @@ function ChevronDownIcon({
 
 /**
  * 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.
+ * DevToolsSettingsModal.tsx (size 18 in the night rows). Real tool icons come
+ * from floating-tools-core (web-compatible); shared-ui-only icons use the
+ * closest web SVG fallback.
  */
 function ToolIcon({
-  toolId
+  toolId,
+  tool
 }) {
-  const size = 16; // native: getToolIcon renders all icons at size 16
+  const size = 18; // native: getToolIcon renders all icons at size 18
   switch (toolId) {
     case 'query':
       return /*#__PURE__*/_jsx(QueryIcon, {
@@ -348,11 +308,13 @@ function ToolIcon({
       // native: SentryBugIcon colorPreset="red" noBackground
       return /*#__PURE__*/_jsx(AlertTriangle, {
         size: size,
-        color: buoy.error
+        color: night.danger
       });
     case 'storage':
+      // native passes bgColor=night surface for the BIF knock-out parts
       return /*#__PURE__*/_jsx(StorageIcon, {
-        size: size
+        size: size,
+        bgColor: night.surface
       });
     case 'wifi':
     case 'query-wifi-toggle':
@@ -364,23 +326,24 @@ function ToolIcon({
     case 'routes':
       // web alias for the same tool
       return /*#__PURE__*/_jsx(RoutesIcon, {
-        size: size
+        size: size,
+        bgColor: night.surface
       });
     case 'network':
       return /*#__PURE__*/_jsx(NetworkIcon, {
         size: size
       });
     case 'debug-borders':
-      // native: Layers size 16 color buoyColors.primary
+      // native: Layers size 18 color night accent
       return /*#__PURE__*/_jsx(Layers, {
         size: size,
-        color: buoy.primary
+        color: night.accent
       });
     case 'highlight-updates':
-      // native: RenderCountIcon size 16 color buoyColors.primary
+      // native: RenderCountIcon size 18 color night accent
       return /*#__PURE__*/_jsx(Sparkles, {
         size: size,
-        color: buoy.primary
+        color: night.accent
       });
     case 'highlight-updates-modal':
       return /*#__PURE__*/_jsx(HighlighterIcon, {
@@ -407,60 +370,236 @@ function ToolIcon({
         size: size
       });
     default:
-      // native: Info size 16 color buoyColors.textSecondary
-      return /*#__PURE__*/_jsx(Info, {
-        size: size,
-        color: buoy.textSecondary
-      });
+      {
+        // Tools without a hardcoded glyph (console, images, time machine,
+        // perf monitor, custom toolkit tools, …) render their own icon —
+        // mirrors the native getToolIcon() renderAppIcon fallback.
+        if (typeof tool?.icon === 'function') {
+          return /*#__PURE__*/_jsx(_Fragment, {
+            children: tool.icon(size)
+          });
+        }
+        if (typeof tool?.icon === 'string') {
+          // Web twin of native AppTextIcon: short labels/emoji auto-fit the slot.
+          return /*#__PURE__*/_jsx("span", {
+            style: {
+              maxWidth: size * 1.6,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              fontSize: tool.icon.length <= 2 ? size * 0.7 : 10,
+              fontWeight: 800,
+              letterSpacing: 0.5,
+              textAlign: 'center',
+              color: tool.color ?? night.textSecondary
+            },
+            children: tool.icon
+          });
+        }
+        // native: Info size 18 color night textSecondary
+        return /*#__PURE__*/_jsx(Info, {
+          size: size,
+          color: night.textSecondary
+        });
+      }
   }
 }
 
 // =============================
-// Toggle Pill (shared by cards)
+// Night primitives (DOM twins of shared-ui ui/night/primitives.tsx)
 // =============================
 
-/**
- * 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'
-  };
+/** native NightSectionLabel: 12/600/ls0.8 uppercase, mb 8, ml 4 */
+function SectionLabel({
+  children
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      color: night.textSecondary,
+      fontSize: 12,
+      fontWeight: 600,
+      letterSpacing: 0.8,
+      textTransform: 'uppercase',
+      marginBottom: 8,
+      marginLeft: 4
+    },
+    children: children
+  });
+}
+
+/** native NightFootnote: 13/500 textTertiary, mt 8, ml 4 */
+function Footnote({
+  children,
+  tone = 'tertiary'
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      color: tone === 'warning' ? night.warning : tone === 'danger' ? night.danger : night.textTertiary,
+      fontSize: 13,
+      fontWeight: 500,
+      lineHeight: '18px',
+      marginTop: 8,
+      marginLeft: 4
+    },
+    children: children
+  });
+}
+
+/** native NightCard: #0C0C0C, radius 14, 1px #1A1A1C, clipped */
+const cardStyle = {
+  backgroundColor: night.surface,
+  borderRadius: 14,
+  border: `1px solid ${night.border}`,
+  overflow: 'hidden'
+};
+
+/** native NightSeparator: hairline inset 16 */
+function Separator({
+  inset = 16
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      height: 1,
+      transform: 'scaleY(0.5)',
+      // hairline
+      marginLeft: inset,
+      backgroundColor: night.separator
+    }
+  });
+}
+
+/** native NightSwitch: 56×32 track, 22px thumb, 24px travel, 200ms */
+function NightSwitch({
+  value,
+  onChange,
+  disabled
+}) {
+  return /*#__PURE__*/_jsx("button", {
+    role: "switch",
+    "aria-checked": value,
+    disabled: disabled,
+    onClick: e => {
+      e.stopPropagation();
+      if (!disabled) onChange();
+    },
+    style: {
+      width: 56,
+      height: 32,
+      borderRadius: 16,
+      border: `1px solid ${value ? night.accentBorderStrong : night.fillTertiary}`,
+      backgroundColor: value ? night.accentFill : night.surfaceElevated,
+      padding: 0,
+      position: 'relative',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.4 : 1,
+      flexShrink: 0,
+      boxSizing: 'border-box',
+      transition: 'background-color 200ms ease, border-color 200ms ease'
+    },
+    children: /*#__PURE__*/_jsx("span", {
+      style: {
+        position: 'absolute',
+        top: 4,
+        left: 4,
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        backgroundColor: value ? night.accent : night.knob,
+        transform: value ? 'translateX(24px)' : 'translateX(0)',
+        transition: 'transform 200ms ease, background-color 200ms ease'
+      }
+    })
+  });
+}
+
+/** native NightBadge: uppercase 11/600 cap on a soft tint */
+function Badge({
+  label,
+  tone = 'neutral'
+}) {
+  const bg = tone === 'accent' ? night.accentSoft : tone === 'warning' ? night.warningSoft : tone === 'danger' ? night.dangerSoft : night.fillSecondary;
+  const color = tone === 'accent' ? night.accent : tone === 'warning' ? night.warning : tone === 'danger' ? night.danger : night.textSecondary;
+  return /*#__PURE__*/_jsx("span", {
+    style: {
+      padding: '4px 8px',
+      borderRadius: 6,
+      backgroundColor: bg,
+      color,
+      fontSize: 11,
+      fontWeight: 600,
+      letterSpacing: 0.5,
+      textTransform: 'uppercase',
+      flexShrink: 0
+    },
+    children: label
+  });
+}
+
+/** native NightButton size md: 34pt, radius 17, plate or accent fill */
+function NightButton({
+  label,
+  onClick,
+  variant = 'secondary',
+  icon,
+  disabled
+}) {
+  const color = variant === 'primary' ? night.onAccent : variant === 'destructive' ? night.danger : night.accent;
+  return /*#__PURE__*/_jsxs("button", {
+    onClick: onClick,
+    disabled: disabled,
+    style: {
+      width: '100%',
+      height: 34,
+      borderRadius: 17,
+      border: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 8,
+      backgroundColor: variant === 'primary' ? night.accent : night.button,
+      color,
+      fontSize: 15,
+      fontWeight: 600,
+      fontFamily: 'inherit',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.4 : 1,
+      transition: 'background-color 150ms ease, opacity 150ms ease'
+    },
+    children: [icon, label]
+  });
 }
 
 // =============================
-// Tool Card Component
+// Row styles (native styles.settingRow / toolRow / rowLabel / rowCaption)
 // =============================
 
-function ToolCard({
+const settingRowStyle = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 10,
+  padding: '14px 16px',
+  minHeight: 52,
+  boxSizing: 'border-box',
+  cursor: 'pointer'
+};
+const rowLabelStyle = {
+  color: night.text,
+  fontSize: 15,
+  fontWeight: 500
+};
+const rowCaptionStyle = {
+  color: night.textTertiary,
+  fontSize: 12,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+};
+
+// =============================
+// Tool Row (native renderToolRow)
+// =============================
+
+function ToolRow({
   toolId,
   enabled,
   disabled,
@@ -469,101 +608,59 @@ function ToolCard({
 }) {
   const label = getToolLabel(toolId, availableTools);
   const description = getToolDescription(toolId, availableTools);
-
-  // native styles.glassCard / glassCardActive
-  const cardStyle = {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-    // native glassCardInner: gap 12
-    paddingTop: 12,
-    // native glassCard: paddingVertical 12
-    paddingBottom: 12,
-    paddingLeft: settingsStyles.card.paddingHorizontal,
-    paddingRight: settingsStyles.card.paddingHorizontal,
-    backgroundColor: enabled ? `${buoy.primary}08` : buoy.card,
-    // native glassCardActive bg
-    borderRadius: 12,
-    // native glassCard: borderRadius 12
-    borderWidth: settingsStyles.card.borderWidth,
-    borderStyle: 'solid',
-    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.5 : 1,
-    // native wrapper: opacity 0.5 when disabled
-    transition: 'all 150ms ease'
-  };
   return /*#__PURE__*/_jsxs("div", {
     onClick: disabled ? undefined : onToggle,
-    style: cardStyle,
+    style: {
+      // native styles.toolRow: gap 12, px 16, py 12
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      padding: '12px 16px',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.4 : 1
+    },
     children: [/*#__PURE__*/_jsx("div", {
       style: {
-        width: 32,
-        // native iconContainer: 32x32
-        height: 32,
-        borderRadius: 8,
-        // native iconContainer: borderRadius 8
-        backgroundColor: enabled ? `${buoy.primary}20` : buoy.hover,
+        width: 24,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         flexShrink: 0
       },
       children: /*#__PURE__*/_jsx(ToolIcon, {
-        toolId: toolId
+        toolId: toolId,
+        tool: availableTools?.find(t => t.id === toolId)
       })
     }), /*#__PURE__*/_jsxs("div", {
       style: {
         flex: 1,
-        minWidth: 0
+        minWidth: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2
       },
       children: [/*#__PURE__*/_jsxs("div", {
-        style: {
-          color: buoy.text,
-          fontWeight: 600,
-          // native toolName: fontWeight 600
-          fontSize: settingsStyles.toolName.fontSize
-        },
-        children: [label, disabled && ' (MAX 6)']
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          color: buoy.textMuted,
-          fontSize: settingsStyles.toolDescription.fontSize,
-          marginTop: 2,
-          // native toolDescription: marginTop 2
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap'
-        },
+        style: rowLabelStyle,
+        children: [label, disabled && '  ·  max 6']
+      }), description ? /*#__PURE__*/_jsx("div", {
+        style: rowCaptionStyle,
         children: description
-      })]
-    }), /*#__PURE__*/_jsx("button", {
-      onClick: e => {
-        e.stopPropagation();
-        if (!disabled) onToggle();
-      },
+      }) : null]
+    }), /*#__PURE__*/_jsx(NightSwitch, {
+      value: enabled,
       disabled: disabled,
-      style: {
-        ...togglePillStyle(enabled, buoy.primary, false),
-        cursor: disabled ? 'not-allowed' : 'pointer'
-      },
-      children: enabled ? 'ON' : 'OFF'
+      onChange: onToggle
     })]
   });
 }
 
 // =============================
-// Global Setting Card (expandable, native renderGlobalSettingCard)
+// Global Setting Row (native renderGlobalSettingRow)
 // =============================
 
-function GlobalSettingCard({
-  configKey,
+function GlobalSettingRow({
   label,
-  category,
   shortDescription,
   fullDescription,
   recommendation,
@@ -571,155 +668,57 @@ function GlobalSettingCard({
   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", {
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
       onClick: () => setIsExpanded(v => !v),
-      style: cardStyle,
+      style: settingRowStyle,
       children: [/*#__PURE__*/_jsxs("div", {
         style: {
+          flex: 1,
+          minWidth: 0,
           display: 'flex',
-          alignItems: 'center',
-          gap: 12
+          flexDirection: 'column',
+          gap: 2
         },
         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"
-          })]
+          style: rowLabelStyle,
+          children: label
+        }), /*#__PURE__*/_jsx("div", {
+          style: isExpanded ? {
+            ...rowCaptionStyle,
+            whiteSpace: 'normal'
+          } : rowCaptionStyle,
+          children: shortDescription
         })]
-      }), isExpanded && /*#__PURE__*/_jsxs("div", {
+      }), /*#__PURE__*/_jsx(NightSwitch, {
+        value: value,
+        onChange: onToggle
+      })]
+    }), isExpanded && /*#__PURE__*/_jsxs("div", {
+      style: {
+        // native settingRowBody: px 16, pb 14, gap 6
+        padding: '0 16px 14px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6
+      },
+      children: [/*#__PURE__*/_jsx("div", {
         style: {
-          marginTop: 12,
-          paddingTop: 12,
-          borderTop: `1px solid ${buoy.border}50`
+          color: night.textSecondary,
+          fontSize: 13,
+          lineHeight: '19px'
         },
-        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
-          })]
-        })]
+        children: fullDescription
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          color: night.textTertiary,
+          fontSize: 13,
+          lineHeight: '19px'
+        },
+        children: recommendation
       })]
-    })
-  }, configKey);
+    })]
+  });
 }
 
 // =============================
@@ -782,7 +781,7 @@ export function SettingsModal({
     }
   }, [visible, isStorageExpanded, clearSuccess, settings]);
   const handleClearAll = useCallback(() => {
-    // Same behavior as before (reset via the shared hook); the 2s "CLEARED"
+    // Same behavior as before (reset via the shared hook); the 2s "Cleared"
     // flash mirrors the native clear button feedback.
     actions.resetToDefaults();
     setClearSuccess(true);
@@ -793,61 +792,67 @@ export function SettingsModal({
   // Filter tabs - exclude 'pro' for now on web
   const displayTabs = settingsTabs.filter(tab => tab.key !== 'pro');
 
-  // Tab pill row rendered inside the JsModal header — native passes
-  // ModalHeader + TabSelector as header.customContent the same way.
+  // Segmented control rendered inside the JsModal header — native passes a
+  // NightSegmented as header.customContent the same way. Track = night bg at
+  // radius 10 / padding 3; active thumb = surfaceElevated at radius 8 with
+  // the accent underline glow (the Everlights All/Day tabs).
   const tabHeader = /*#__PURE__*/_jsx("div", {
     style: {
       display: 'flex',
       alignItems: 'center',
-      paddingLeft: 4,
-      paddingRight: 28,
+      paddingLeft: 16,
+      paddingRight: 64,
       // clears JsModal's absolutely-positioned window controls
-      paddingBottom: 6
+      paddingBottom: 8
     },
     children: /*#__PURE__*/_jsx("div", {
       style: {
         flex: 1,
         display: 'flex',
-        backgroundColor: buoy.hover,
-        borderRadius: 6,
-        padding: 2,
-        border: `1px solid ${buoy.border}`,
-        height: 28,
+        backgroundColor: night.bg,
+        borderRadius: 10,
+        border: `1px solid ${night.border}`,
+        padding: 3,
         boxSizing: 'border-box'
       },
       children: displayTabs.map(tab => {
         const isActive = activeTab === tab.key;
-        return /*#__PURE__*/_jsx("button", {
+        // native settingsTabs labels are uppercase ids; night shows title case
+        const label = tab.label.charAt(0).toUpperCase() + tab.label.slice(1).toLowerCase();
+        return /*#__PURE__*/_jsxs("button", {
           onClick: () => setActiveTab(tab.key),
+          role: "tab",
+          "aria-selected": isActive,
           style: {
             flex: 1,
-            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,
+            position: 'relative',
+            padding: '8px 0',
+            borderRadius: 8,
+            border: 'none',
+            backgroundColor: isActive ? night.surfaceElevated : 'transparent',
+            color: isActive ? night.text : night.textSecondary,
+            fontSize: 13,
+            fontWeight: isActive ? 600 : 500,
+            fontFamily: 'inherit',
             cursor: 'pointer',
             transition: 'all 150ms ease',
-            textTransform: 'uppercase',
-            fontFamily: 'inherit',
-            // native TabSelector uses the system font
-            boxSizing: 'border-box',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
           },
-          children: tab.label
+          children: [label, isActive && /*#__PURE__*/_jsx("span", {
+            style: {
+              position: 'absolute',
+              bottom: 2,
+              left: '50%',
+              transform: 'translateX(-50%)',
+              width: 24,
+              height: 2.5,
+              borderRadius: 1.25,
+              backgroundColor: night.accent,
+              boxShadow: `0 0 6px ${night.accent}99`
+            }
+          })]
         }, tab.key);
       })
     })
@@ -860,6 +865,7 @@ export function SettingsModal({
   return /*#__PURE__*/_jsx(JsModal, {
     visible: visible,
     onClose: handleClose,
+    variant: "night",
     header: {
       showToggleButton: false,
       customContent: tabHeader
@@ -880,11 +886,11 @@ export function SettingsModal({
         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
+        backgroundColor: 'transparent',
+        padding: '8px 16px 24px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 24
       },
       children: isLoading ? /*#__PURE__*/_jsx("div", {
         style: {
@@ -892,209 +898,176 @@ export function SettingsModal({
           alignItems: 'center',
           justifyContent: 'center',
           padding: 40,
-          color: buoy.textMuted,
-          fontSize: 12
+          color: night.textTertiary,
+          fontSize: 13
         },
-        children: "Loading settings..."
+        children: "Loading settings\u2026"
       }) : /*#__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: [activeTab === 'floating' && /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx(SectionLabel, {
+            children: "Floating Tools"
+          }), /*#__PURE__*/_jsx("div", {
+            style: cardStyle,
+            children: Object.entries(settings.floatingTools).map(([id, enabled], index) => /*#__PURE__*/_jsxs("div", {
+              children: [index > 0 && /*#__PURE__*/_jsx(Separator, {}), /*#__PURE__*/_jsx(ToolRow, {
+                toolId: id,
+                enabled: enabled,
+                availableTools: availableTools,
+                onToggle: () => id === 'environment' ? actions.toggleEnvironment() : actions.toggleFloatingTool(id)
+              })]
+            }, id))
+          }), /*#__PURE__*/_jsx(Footnote, {
+            children: "Tools switched on here appear in the floating bubble row."
+          })]
+        }), activeTab === 'settings' && /*#__PURE__*/_jsxs(_Fragment, {
           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),
+            children: [/*#__PURE__*/_jsx(SectionLabel, {
+              children: "Background"
+            }), /*#__PURE__*/_jsx("div", {
               style: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: 12,
-                marginBottom: 8,
-                cursor: 'pointer'
+                ...cardStyle,
+                padding: 14
               },
-              children: [/*#__PURE__*/_jsx("div", {
-                style: {
-                  width: 36,
-                  height: 36,
-                  borderRadius: 8,
-                  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__*/_jsx(BackgroundSwitcher, {
+                embedded: true
+              })
+            })]
+          }), /*#__PURE__*/_jsxs("div", {
+            children: [/*#__PURE__*/_jsx(SectionLabel, {
+              children: "Storage"
+            }), /*#__PURE__*/_jsxs("div", {
+              style: cardStyle,
+              children: [/*#__PURE__*/_jsxs("div", {
+                onClick: () => setIsStorageExpanded(v => !v),
+                style: settingRowStyle,
                 children: [/*#__PURE__*/_jsx("div", {
                   style: {
-                    fontSize: 10,
-                    fontWeight: 700,
-                    color: buoy.textMuted,
-                    letterSpacing: 1,
-                    marginBottom: 4
+                    flex: 1,
+                    minWidth: 0
                   },
-                  children: "STORAGE TYPE"
-                }), /*#__PURE__*/_jsxs("div", {
+                  children: /*#__PURE__*/_jsx("div", {
+                    style: rowLabelStyle,
+                    children: "Storage Type"
+                  })
+                }), /*#__PURE__*/_jsx(Badge, {
+                  label: "Local Storage",
+                  tone: "accent"
+                }), isStorageExpanded ? /*#__PURE__*/_jsx(ChevronDownIcon, {
+                  size: 16,
+                  color: night.textTertiary
+                }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+                  size: 16,
+                  color: night.textTertiary
+                })]
+              }), isStorageExpanded && /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsx("div", {
                   style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 6
+                    padding: '0 16px 14px'
                   },
-                  children: [/*#__PURE__*/_jsx("span", {
+                  children: /*#__PURE__*/_jsx("div", {
                     style: {
-                      padding: '4px 8px',
-                      borderRadius: 4,
-                      border: `1px solid ${buoy.success}60`,
-                      backgroundColor: `${buoy.success}20`,
-                      color: buoy.success,
-                      fontSize: 11,
-                      fontWeight: 700,
-                      letterSpacing: 0.5
+                      color: night.textSecondary,
+                      fontSize: 13,
+                      lineHeight: '19px'
                     },
-                    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", {
+                    children: "Settings persist in the browser's localStorage and survive page reloads."
+                  })
+                }), /*#__PURE__*/_jsx(Separator, {}), /*#__PURE__*/_jsxs("div", {
                   style: {
-                    backgroundColor: buoy.hover,
-                    borderRadius: 4,
-                    padding: '6px 8px',
-                    border: `1px solid ${buoy.border}50`,
-                    marginBottom: 4
+                    padding: '12px 16px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 8
                   },
-                  children: /*#__PURE__*/_jsx("div", {
+                  children: [/*#__PURE__*/_jsxs("div", {
                     style: {
-                      fontSize: 11,
-                      color: buoy.textSecondary,
-                      fontFamily: 'monospace',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap'
+                      display: 'flex',
+                      alignItems: 'center'
                     },
-                    children: key.replace('@react_buoy_', '')
+                    children: [/*#__PURE__*/_jsx("span", {
+                      style: {
+                        flex: 1,
+                        color: night.textSecondary,
+                        fontSize: 11,
+                        fontWeight: 600,
+                        letterSpacing: 0.5
+                      },
+                      children: "SAVED SETTINGS"
+                    }), /*#__PURE__*/_jsxs("span", {
+                      style: {
+                        color: night.textTertiary,
+                        fontSize: 11
+                      },
+                      children: [savedKeys.length, " keys"]
+                    })]
+                  }), savedKeys.length === 0 ? /*#__PURE__*/_jsx("div", {
+                    style: {
+                      color: night.textTertiary,
+                      fontSize: 13,
+                      fontStyle: 'italic'
+                    },
+                    children: "No settings saved yet"
+                  }) : /*#__PURE__*/_jsx("div", {
+                    style: {
+                      maxHeight: 150,
+                      overflow: 'auto'
+                    },
+                    children: savedKeys.map(key => /*#__PURE__*/_jsx("div", {
+                      style: {
+                        backgroundColor: night.surfaceElevated,
+                        borderRadius: 8,
+                        padding: '7px 10px',
+                        marginBottom: 4
+                      },
+                      children: /*#__PURE__*/_jsx("div", {
+                        style: {
+                          color: night.textSecondary,
+                          fontSize: 11,
+                          fontFamily: 'monospace',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap'
+                        },
+                        children: key.replace('@react_buoy_', '')
+                      })
+                    }, key))
+                  })]
+                }), /*#__PURE__*/_jsx("div", {
+                  style: {
+                    padding: '10px 14px 14px'
+                  },
+                  children: /*#__PURE__*/_jsx(NightButton, {
+                    label: clearSuccess ? 'Cleared' : 'Clear All Settings',
+                    variant: clearSuccess ? 'secondary' : 'destructive',
+                    onClick: handleClearAll,
+                    icon: clearSuccess ? /*#__PURE__*/_jsx(CheckCircle2, {
+                      size: 15,
+                      color: night.accent
+                    }) : /*#__PURE__*/_jsx(Trash2, {
+                      size: 15,
+                      color: night.danger
+                    })
                   })
-                }, key))
+                })]
               })]
-            }), /*#__PURE__*/_jsxs("button", {
-              onClick: handleClearAll,
-              style: {
-                width: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 8,
-                padding: '10px 16px',
-                borderRadius: 6,
-                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: [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))]
+          }), /*#__PURE__*/_jsxs("div", {
+            children: [/*#__PURE__*/_jsx(SectionLabel, {
+              children: "Modal Behavior"
+            }), /*#__PURE__*/_jsx("div", {
+              style: cardStyle,
+              children: globalSettingsConfig.map((config, index) => /*#__PURE__*/_jsxs("div", {
+                children: [index > 0 && /*#__PURE__*/_jsx(Separator, {}), /*#__PURE__*/_jsx(GlobalSettingRow, {
+                  label: config.label,
+                  shortDescription: config.shortDescription,
+                  fullDescription: config.fullDescription,
+                  recommendation: config.recommendation,
+                  value: settings.globalSettings?.[config.key] ?? false,
+                  onToggle: () => actions.toggleGlobalSetting(config.key)
+                })]
+              }, config.key))
+            })]
+          })]
         })]
       })
     })