@buoy-gg/core 7.0.40 → 7.0.41

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

@@ -1,1055 +1,44 @@
 "use strict";
 
-/**
- * DevToolsSettingsModal - Web renderer for the dev tools settings modal.
- *
- * Uses shared configuration and logic from @buoy-gg/floating-tools-react.
- * Platform-specific: CSS, mouse events, web JSX.
- *
- * VISUAL PARITY: styled 1:1 against the native reference
- * (devtools-floating-menu/src/floatingMenu/DevToolsSettingsModal.tsx, which
- * 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)
- */
-
-import { useState, useCallback, useEffect } from 'react';
-import {
-// Hook
-useSettings,
-// Tab configuration
-settingsTabs,
-// Tool metadata
-getToolLabel, getToolDescription,
-// Global settings config
-globalSettingsConfig
-// Types
-} from '@buoy-gg/floating-tools-react';
-import { QueryIcon, SentryIcon, 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. 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, monoFont } 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);
-}
-
-// =============================
-// Night tokens (provenance)
-// =============================
-
-/**
- * `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 night = {
-  bg: '#050505',
-  surface: '#0C0C0C',
-  surfaceElevated: '#161618',
-  border: '#1A1A1C',
-  separator: 'rgba(255, 255, 255, 0.08)',
-  glass: 'rgba(5, 5, 5, 0.50)',
-  glassElevated: 'rgba(255, 255, 255, 0.06)',
-  glassBorder: 'rgba(255, 255, 255, 0.07)',
-  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'
-};
-
-// =============================
-// Types
-// =============================
-
-// =============================
-// Web Storage Adapter
-// =============================
-
-const webStorageAdapter = {
-  getItem: key => localStorage.getItem(key),
-  setItem: (key, value) => localStorage.setItem(key, value)
-};
-
-// =============================
-// Icon Components (Web SVGs)
-// =============================
-
-/** Fallback for shared-ui Layers icon (native debug-borders row icon). */
-const Layers = ({
-  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: "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"
-  })]
-});
-
-/** Fallback for shared-ui RenderCountIcon (native highlight-updates row icon). */
-const Sparkles = ({
-  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: "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: "M20 3v4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M22 5h-4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M4 17v2"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M5 18H3"
-  })]
-});
-
-/** shared-ui Info icon (native default tool icon). */
-const Info = ({
-  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("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 16v-4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 8h.01"
-  })]
-});
-
-/** shared-ui CheckCircle2 icon (clear-success feedback). */
-const CheckCircle2 = ({
-  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("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "m9 12 2 2 4-4"
-  })]
-});
-
-/** shared-ui Trash2 icon (native Clear All Settings button icon). */
-const Trash2 = ({
-  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: "M3 6h18"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
-  }), /*#__PURE__*/_jsx("path", {
-    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"
-  })]
-});
-function ChevronRightIcon({
-  size = 16,
-  color = 'currentColor'
-}) {
-  return /*#__PURE__*/_jsx("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: "M9 18l6-6-6-6"
-    })
-  });
-}
-function ChevronDownIcon({
-  size = 16,
-  color = 'currentColor'
-}) {
-  return /*#__PURE__*/_jsx("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: "m6 9 6 6 6-6"
-    })
-  });
-}
-
-/**
- * Tool icon mapping — mirrors the native getToolIcon() switch in
- * 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,
-  tool
-}) {
-  const size = 18; // native: getToolIcon renders all icons at size 18
-  switch (toolId) {
-    case 'query':
-      return /*#__PURE__*/_jsx(QueryIcon, {
-        size: size
-      });
-    case 'env':
-    case 'environment':
-      return /*#__PURE__*/_jsx(EnvIcon, {
-        size: size
-      });
-    case 'sentry':
-      return /*#__PURE__*/_jsx(SentryIcon, {
-        size: size,
-        color: "#9945FF"
-      });
-    case 'storage':
-      // native passes bgColor=night surface for the BIF knock-out parts
-      return /*#__PURE__*/_jsx(StorageIcon, {
-        size: size,
-        bgColor: night.surface
-      });
-    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,
-        bgColor: night.surface
-      });
-    case 'network':
-      return /*#__PURE__*/_jsx(NetworkIcon, {
-        size: size
-      });
-    case 'debug-borders':
-      // native: Layers size 18 color night accent
-      return /*#__PURE__*/_jsx(Layers, {
-        size: size,
-        color: night.accent
-      });
-    case 'highlight-updates':
-      // native: RenderCountIcon size 18 color night accent
-      return /*#__PURE__*/_jsx(Sparkles, {
-        size: size,
-        color: night.accent
-      });
-    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:
-      {
-        // 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
-        });
-      }
-  }
-}
-
-// =============================
-// Night primitives (DOM twins of shared-ui ui/night/primitives.tsx)
-// =============================
-
-/** 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 glass: 50% black, radius 14, 1px white-alpha hairline, clipped */
-const cardStyle = {
-  backgroundColor: night.glass,
-  borderRadius: 14,
-  border: `1px solid ${night.glassBorder}`,
-  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]
-  });
-}
-
-// =============================
-// Row styles (native styles.settingRow / toolRow / rowLabel / rowCaption)
-// =============================
-
-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,
-  availableTools,
-  onToggle
-}) {
-  const label = getToolLabel(toolId, availableTools);
-  const description = getToolDescription(toolId, availableTools);
-  return /*#__PURE__*/_jsxs("div", {
-    onClick: disabled ? undefined : onToggle,
-    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: 24,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexShrink: 0
-      },
-      children: /*#__PURE__*/_jsx(ToolIcon, {
-        toolId: toolId,
-        tool: availableTools?.find(t => t.id === toolId)
-      })
-    }), /*#__PURE__*/_jsxs("div", {
-      style: {
-        flex: 1,
-        minWidth: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 2
-      },
-      children: [/*#__PURE__*/_jsxs("div", {
-        style: rowLabelStyle,
-        children: [label, disabled && '  ·  max 6']
-      }), description ? /*#__PURE__*/_jsx("div", {
-        style: rowCaptionStyle,
-        children: description
-      }) : null]
-    }), /*#__PURE__*/_jsx(NightSwitch, {
-      value: enabled,
-      disabled: disabled,
-      onChange: onToggle
-    })]
-  });
-}
-
-// =============================
-// Global Setting Row (native renderGlobalSettingRow)
-// =============================
-
-function GlobalSettingRow({
-  label,
-  shortDescription,
-  fullDescription,
-  recommendation,
-  value,
-  onToggle
-}) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsxs("div", {
-      onClick: () => setIsExpanded(v => !v),
-      style: settingRowStyle,
-      children: [/*#__PURE__*/_jsxs("div", {
-        style: {
-          flex: 1,
-          minWidth: 0,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 2
-        },
-        children: [/*#__PURE__*/_jsx("div", {
-          style: rowLabelStyle,
-          children: label
-        }), /*#__PURE__*/_jsx("div", {
-          style: isExpanded ? {
-            ...rowCaptionStyle,
-            whiteSpace: 'normal'
-          } : rowCaptionStyle,
-          children: shortDescription
-        })]
-      }), /*#__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: {
-          color: night.textSecondary,
-          fontSize: 13,
-          lineHeight: '19px'
-        },
-        children: fullDescription
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          color: night.textTertiary,
-          fontSize: 13,
-          lineHeight: '19px'
-        },
-        children: recommendation
-      })]
-    })]
-  });
-}
-
-// =============================
-// Main Component
-// =============================
-
+import { useCallback, useMemo } from "react";
+import { persistentStorage } from "@buoy-gg/shared-ui";
+import { DevToolsSettingsModal } from "./DevToolsSettingsModal.shared.js";
+import { DefaultConfigProvider } from "./DefaultConfigContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const EMPTY_TOOLS = [];
+
+/** Adapts the browser host to the shared settings and account panel. */
 export function SettingsModal({
   visible,
   onClose,
-  availableTools = [],
+  availableTools = EMPTY_TOOLS,
   defaultFloatingTools,
   defaultDialTools,
-  storage = webStorageAdapter,
+  storage = persistentStorage,
   onSettingsChange
 }) {
-  const [activeTab, setActiveTab] = useState('floating');
-  const [isStorageExpanded, setIsStorageExpanded] = useState(false);
-  const [savedKeys, setSavedKeys] = useState([]);
-  const [clearSuccess, setClearSuccess] = useState(false);
-
-  // Use the shared settings hook
-  const {
-    settings,
-    isLoading,
-    actions
-  } = useSettings({
-    availableTools,
-    defaultFloatingTools,
-    defaultDialTools,
-    storage,
-    onSettingsChange
-  });
-
-  // JsModal owns the close animation now — this is just the Escape path.
-  const handleClose = useCallback(() => {
-    onClose();
-  }, [onClose]);
-
-  // Escape key handler
-  useEffect(() => {
-    if (!visible) return;
-    const handleKeyDown = e => {
-      if (e.key === 'Escape') {
-        handleClose();
-      }
-    };
-    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');
-
-  // Segmented control rendered inside the JsModal header — native passes a
-  // NightSegmented glass as header.customContent the same way. Track = glass
-  // at radius 10 / padding 3; active thumb = glassElevated at radius 8 with
-  // the accent underline glow (the Everlights All/Day tabs).
-  const tabHeader = /*#__PURE__*/_jsx("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      paddingLeft: 16,
-      paddingRight: 16,
-      // window controls are cleared vertically, not sideways
-      paddingBottom: 8
-    },
-    children: /*#__PURE__*/_jsx("div", {
-      style: {
-        flex: 1,
-        display: 'flex',
-        backgroundColor: night.glass,
-        borderRadius: 10,
-        border: `1px solid ${night.glassBorder}`,
-        padding: 3,
-        boxSizing: 'border-box'
-      },
-      children: displayTabs.map(tab => {
-        const isActive = activeTab === tab.key;
-        // 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,
-            position: 'relative',
-            padding: '8px 0',
-            borderRadius: 8,
-            border: 'none',
-            backgroundColor: isActive ? night.glassElevated : 'transparent',
-            color: isActive ? night.text : night.textSecondary,
-            fontSize: 13,
-            fontWeight: isActive ? 600 : 500,
-            fontFamily: 'inherit',
-            cursor: 'pointer',
-            transition: 'all 150ms ease',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          },
-          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);
-      })
-    })
-  });
-
-  // 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,
-    variant: "night",
-    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: 'transparent',
-        padding: '8px 16px 24px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 24
-      },
-      children: isLoading ? /*#__PURE__*/_jsx("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: 40,
-          color: night.textTertiary,
-          fontSize: 13
-        },
-        children: "Loading settings\u2026"
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        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", {
-            children: [/*#__PURE__*/_jsx(SectionLabel, {
-              children: "Background"
-            }), /*#__PURE__*/_jsx("div", {
-              style: {
-                ...cardStyle,
-                padding: 14
-              },
-              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: {
-                    flex: 1,
-                    minWidth: 0
-                  },
-                  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: {
-                    padding: '0 16px 14px'
-                  },
-                  children: /*#__PURE__*/_jsx("div", {
-                    style: {
-                      color: night.textSecondary,
-                      fontSize: 13,
-                      lineHeight: '19px'
-                    },
-                    children: "Settings persist in the browser's localStorage and survive page reloads."
-                  })
-                }), /*#__PURE__*/_jsx(Separator, {}), /*#__PURE__*/_jsxs("div", {
-                  style: {
-                    padding: '12px 16px',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 8
-                  },
-                  children: [/*#__PURE__*/_jsxs("div", {
-                    style: {
-                      display: 'flex',
-                      alignItems: 'center'
-                    },
-                    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.glassElevated,
-                        borderRadius: 8,
-                        padding: '7px 10px',
-                        marginBottom: 4
-                      },
-                      children: /*#__PURE__*/_jsx("div", {
-                        style: {
-                          color: night.textSecondary,
-                          fontSize: 11,
-                          fontFamily: monoFont,
-                          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
-                    })
-                  })
-                })]
-              })]
-            })]
-          }), /*#__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))
-            })]
-          })]
-        })]
-      })
+  const adapter = useMemo(() => ({
+    getItem: async key => storage.getItem(key),
+    setItem: async (key, value) => storage.setItem(key, value)
+  }), [storage]);
+  const availableApps = useMemo(() => availableTools.map(tool => ({
+    ...tool,
+    name: tool.name ?? tool.id,
+    icon: typeof tool.icon === "function" ? context => tool.icon(context.size) : tool.icon
+  })), [availableTools]);
+  const handleChange = useCallback(settings => {
+    onSettingsChange?.(settings);
+  }, [onSettingsChange]);
+  return /*#__PURE__*/_jsx(DefaultConfigProvider, {
+    defaultFloatingTools: defaultFloatingTools,
+    defaultDialTools: defaultDialTools,
+    children: /*#__PURE__*/_jsx(DevToolsSettingsModal, {
+      visible: visible,
+      onClose: onClose,
+      zIndex: 11000,
+      availableApps: availableApps,
+      storage: adapter,
+      onSettingsChange: handleChange
     })
   });
 }