@buoy-gg/core 1.7.5 → 1.7.8

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

@@ -0,0 +1,746 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SettingsModal = SettingsModal;
+var _react = require("react");
+var _floatingToolsReact = require("@buoy-gg/floating-tools-react");
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ * This follows the same pattern as DialDevTools - all colors, labels, descriptions,
+ * and styling constants come from the shared core package.
+ *
+ * @platform React DOM Web (Vite, CRA, Next.js, Electron)
+ */
+
+// =============================
+// Types
+// =============================
+
+// =============================
+// Web Storage Adapter
+// =============================
+
+const webStorageAdapter = {
+  getItem: key => localStorage.getItem(key),
+  setItem: (key, value) => localStorage.setItem(key, value)
+};
+
+// =============================
+// Icon Components (Web SVGs)
+// =============================
+
+const Laptop = ({
+  size = 24,
+  color = 'currentColor'
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: color,
+  strokeWidth: "2",
+  children: /*#__PURE__*/(0, _jsxRuntime.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"
+  })
+});
+const Database = ({
+  size = 24,
+  color = 'currentColor'
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: color,
+  strokeWidth: "2",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ellipse", {
+    cx: "12",
+    cy: "5",
+    rx: "9",
+    ry: "3"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M3 5V19A9 3 0 0 0 21 19V5"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M3 12A9 3 0 0 0 21 12"
+  })]
+});
+const Wifi = ({
+  size = 24,
+  color = 'currentColor'
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: color,
+  strokeWidth: "2",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M5 13a10 10 0 0 1 14 0"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M8.5 16.5a5 5 0 0 1 7 0"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M2 8.82a15 15 0 0 1 20 0"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+    x1: "12",
+    y1: "20",
+    x2: "12.01",
+    y2: "20"
+  })]
+});
+const Search = ({
+  size = 24,
+  color = 'currentColor'
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: color,
+  strokeWidth: "2",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+    cx: "11",
+    cy: "11",
+    r: "8"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "m21 21-4.3-4.3"
+  })]
+});
+const Map = ({
+  size = 24,
+  color = 'currentColor'
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: color,
+  strokeWidth: "2",
+  children: [/*#__PURE__*/(0, _jsxRuntime.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"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M15 5.764v15"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M9 3.236v15"
+  })]
+});
+const Zap = ({
+  size = 24,
+  color = 'currentColor'
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: color,
+  strokeWidth: "2",
+  children: /*#__PURE__*/(0, _jsxRuntime.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"
+  })
+});
+const Sparkles = ({
+  size = 24,
+  color = 'currentColor'
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: color,
+  strokeWidth: "2",
+  children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M20 3v4"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M22 5h-4"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M4 17v2"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M5 18H3"
+  })]
+});
+const Square = ({
+  size = 24,
+  color = 'currentColor'
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: color,
+  strokeWidth: "2",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+    width: "18",
+    height: "18",
+    x: "3",
+    y: "3",
+    rx: "2"
+  })
+});
+const AlertTriangle = ({
+  size = 24,
+  color = 'currentColor'
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: color,
+  strokeWidth: "2",
+  children: [/*#__PURE__*/(0, _jsxRuntime.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"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M12 9v4"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M12 17h.01"
+  })]
+});
+const SettingsIcon = ({
+  size = 24,
+  color = 'currentColor'
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: color,
+  strokeWidth: "2",
+  children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  })]
+});
+function ChevronRightIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M9 18l6-6-6-6"
+    })
+  });
+}
+function CloseIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M18 6L6 18M6 6l12 12"
+    })
+  });
+}
+
+// Tool icon mapping using SVG components
+function ToolIcon({
+  toolId,
+  color
+}) {
+  const size = 16;
+  const iconMap = {
+    env: /*#__PURE__*/(0, _jsxRuntime.jsx)(Laptop, {
+      size: size,
+      color: color
+    }),
+    storage: /*#__PURE__*/(0, _jsxRuntime.jsx)(Database, {
+      size: size,
+      color: color
+    }),
+    network: /*#__PURE__*/(0, _jsxRuntime.jsx)(Wifi, {
+      size: size,
+      color: color
+    }),
+    query: /*#__PURE__*/(0, _jsxRuntime.jsx)(Search, {
+      size: size,
+      color: color
+    }),
+    'route-events': /*#__PURE__*/(0, _jsxRuntime.jsx)(Map, {
+      size: size,
+      color: color
+    }),
+    routes: /*#__PURE__*/(0, _jsxRuntime.jsx)(Map, {
+      size: size,
+      color: color
+    }),
+    benchmark: /*#__PURE__*/(0, _jsxRuntime.jsx)(Zap, {
+      size: size,
+      color: color
+    }),
+    'highlight-updates': /*#__PURE__*/(0, _jsxRuntime.jsx)(Sparkles, {
+      size: size,
+      color: color
+    }),
+    renders: /*#__PURE__*/(0, _jsxRuntime.jsx)(Sparkles, {
+      size: size,
+      color: color
+    }),
+    'debug-borders': /*#__PURE__*/(0, _jsxRuntime.jsx)(Square, {
+      size: size,
+      color: color
+    }),
+    sentry: /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertTriangle, {
+      size: size,
+      color: color
+    }),
+    environment: /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsIcon, {
+      size: size,
+      color: color
+    }),
+    redux: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.ReduxIcon, {
+      size: size
+    })
+  };
+  return iconMap[toolId] || /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsIcon, {
+    size: size,
+    color: color
+  });
+}
+
+// =============================
+// Tool Card Component
+// =============================
+
+function ToolCard({
+  toolId,
+  enabled,
+  disabled,
+  availableTools,
+  onToggle
+}) {
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const color = (0, _floatingToolsReact.getToolColor)(toolId);
+  const label = (0, _floatingToolsReact.getToolLabel)(toolId, availableTools);
+  const description = (0, _floatingToolsReact.getToolDescription)(toolId, availableTools);
+  const cardStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: _floatingToolsReact.settingsStyles.cardInner.gap,
+    paddingTop: _floatingToolsReact.settingsStyles.card.paddingVertical,
+    paddingBottom: _floatingToolsReact.settingsStyles.card.paddingVertical,
+    paddingLeft: _floatingToolsReact.settingsStyles.card.paddingHorizontal,
+    paddingRight: _floatingToolsReact.settingsStyles.card.paddingHorizontal,
+    backgroundColor: _floatingToolsReact.settingsColors.cardBackground,
+    borderRadius: _floatingToolsReact.settingsStyles.card.borderRadius,
+    borderWidth: _floatingToolsReact.settingsStyles.card.borderWidth,
+    borderStyle: 'solid',
+    borderColor: isHovered && !disabled ? _floatingToolsReact.settingsColors.cardBorderHover : _floatingToolsReact.settingsColors.cardBorder,
+    marginBottom: _floatingToolsReact.settingsStyles.card.marginBottom,
+    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: _floatingToolsReact.settingsStyles.toggle.paddingHorizontal,
+    paddingRight: _floatingToolsReact.settingsStyles.toggle.paddingHorizontal,
+    paddingTop: _floatingToolsReact.settingsStyles.toggle.paddingVertical,
+    paddingBottom: _floatingToolsReact.settingsStyles.toggle.paddingVertical,
+    borderRadius: _floatingToolsReact.settingsStyles.toggle.borderRadius,
+    borderWidth: _floatingToolsReact.settingsStyles.toggle.borderWidth,
+    borderStyle: 'solid',
+    backgroundColor: enabled ? _floatingToolsReact.settingsColors.toggleOnBg(color) : _floatingToolsReact.settingsColors.toggleOffBg,
+    borderColor: enabled ? _floatingToolsReact.settingsColors.toggleOnBorder(color) : _floatingToolsReact.settingsColors.toggleOffBorder,
+    color: enabled ? color : _floatingToolsReact.settingsColors.toggleOffText,
+    fontSize: _floatingToolsReact.settingsStyles.toggle.fontSize,
+    fontWeight: _floatingToolsReact.settingsStyles.toggle.fontWeight,
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    transition: 'all 150ms ease',
+    boxShadow: enabled ? `0 0 8px ${color}66` : 'none'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    onClick: disabled ? undefined : onToggle,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    style: cardStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: _floatingToolsReact.settingsStyles.iconContainer.width,
+        height: _floatingToolsReact.settingsStyles.iconContainer.height,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolIcon, {
+        toolId: toolId,
+        color: color
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        flex: 1,
+        minWidth: 0
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          color: _floatingToolsReact.settingsColors.text,
+          fontWeight: _floatingToolsReact.settingsStyles.toolName.fontWeight,
+          fontSize: _floatingToolsReact.settingsStyles.toolName.fontSize
+        },
+        children: [label, disabled && ' (MAX 6)']
+      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          color: _floatingToolsReact.settingsColors.textMuted,
+          fontSize: _floatingToolsReact.settingsStyles.toolDescription.fontSize,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        },
+        children: description
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      onClick: e => {
+        e.stopPropagation();
+        if (!disabled) onToggle();
+      },
+      disabled: disabled,
+      style: toggleStyle,
+      children: enabled ? 'ON' : 'OFF'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        color: _floatingToolsReact.settingsColors.textMuted
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronRightIcon, {})
+    })]
+  });
+}
+
+// =============================
+// Main Component
+// =============================
+
+function SettingsModal({
+  visible,
+  onClose,
+  availableTools = [],
+  defaultFloatingTools,
+  defaultDialTools,
+  storage = webStorageAdapter,
+  onSettingsChange
+}) {
+  const [activeTab, setActiveTab] = (0, _react.useState)('dial');
+  const [isExiting, setIsExiting] = (0, _react.useState)(false);
+
+  // Use the shared settings hook
+  const {
+    settings,
+    isLoading,
+    actions,
+    helpers
+  } = (0, _floatingToolsReact.useSettings)({
+    availableTools,
+    defaultFloatingTools,
+    defaultDialTools,
+    storage,
+    onSettingsChange
+  });
+
+  // Handle close with animation
+  const handleClose = (0, _react.useCallback)(() => {
+    setIsExiting(true);
+    setTimeout(() => {
+      setIsExiting(false);
+      onClose();
+    }, 200);
+  }, [onClose]);
+
+  // Escape key handler
+  (0, _react.useEffect)(() => {
+    if (!visible) return;
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        handleClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [visible, handleClose]);
+  if (!visible) return null;
+
+  // Filter tabs - exclude 'pro' for now on web
+  const displayTabs = _floatingToolsReact.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: _floatingToolsReact.settingsColors.backdrop,
+    opacity: isExiting ? 0 : 1,
+    transition: 'opacity 200ms ease'
+  };
+  const modalStyle = {
+    position: 'relative',
+    width: '90%',
+    maxWidth: 450,
+    maxHeight: '80vh',
+    backgroundColor: _floatingToolsReact.settingsColors.panel,
+    borderRadius: 12,
+    border: `1px solid ${_floatingToolsReact.settingsColors.cardBorder}`,
+    boxShadow: `0 24px 48px rgba(0, 0, 0, 0.5), 0 0 24px ${_floatingToolsReact.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__*/(0, _jsxRuntime.jsxs)("div", {
+    role: "dialog",
+    "aria-label": "Settings",
+    "aria-modal": "true",
+    style: containerStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "button",
+      "aria-label": "Close settings",
+      tabIndex: 0,
+      onClick: handleClose,
+      style: backdropStyle
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: modalStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          padding: '12px 16px',
+          borderBottom: `1px solid ${_floatingToolsReact.settingsColors.cardBorder}`
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            flex: 1,
+            display: 'flex',
+            backgroundColor: _floatingToolsReact.settingsColors.panel,
+            borderRadius: 6,
+            padding: 2,
+            border: `1px solid ${_floatingToolsReact.settingsColors.cardBorder}`
+          },
+          children: displayTabs.map(tab => {
+            const isActive = activeTab === tab.key;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              onClick: () => setActiveTab(tab.key),
+              style: {
+                flex: 1,
+                paddingLeft: _floatingToolsReact.settingsStyles.tab.paddingHorizontal,
+                paddingRight: _floatingToolsReact.settingsStyles.tab.paddingHorizontal,
+                paddingTop: _floatingToolsReact.settingsStyles.tab.paddingVertical,
+                paddingBottom: _floatingToolsReact.settingsStyles.tab.paddingVertical,
+                borderRadius: _floatingToolsReact.settingsStyles.tab.borderRadius,
+                backgroundColor: isActive ? _floatingToolsReact.settingsColors.tabActiveBg : _floatingToolsReact.settingsColors.tabInactiveBg,
+                border: isActive ? `1px solid ${_floatingToolsReact.settingsColors.tabActiveBorder}40` : '1px solid transparent',
+                color: isActive ? _floatingToolsReact.settingsColors.info : _floatingToolsReact.settingsColors.tabInactiveText,
+                fontSize: _floatingToolsReact.settingsStyles.tab.fontSize,
+                fontWeight: _floatingToolsReact.settingsStyles.tab.fontWeight,
+                letterSpacing: _floatingToolsReact.settingsStyles.tab.letterSpacing,
+                cursor: 'pointer',
+                transition: 'all 150ms ease',
+                textTransform: 'uppercase',
+                fontFamily: 'monospace'
+              },
+              children: tab.label
+            }, tab.key);
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": "Close",
+          onClick: handleClose,
+          style: {
+            marginLeft: 12,
+            background: 'none',
+            border: 'none',
+            padding: 4,
+            cursor: 'pointer',
+            color: _floatingToolsReact.settingsColors.textMuted,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseIcon, {})
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          flex: 1,
+          overflow: 'auto',
+          paddingTop: _floatingToolsReact.settingsStyles.scrollContent.paddingTop,
+          paddingBottom: _floatingToolsReact.settingsStyles.scrollContent.paddingBottom,
+          paddingLeft: _floatingToolsReact.settingsStyles.section.marginHorizontal,
+          paddingRight: _floatingToolsReact.settingsStyles.section.marginHorizontal
+        },
+        children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 40,
+            color: _floatingToolsReact.settingsColors.textMuted
+          },
+          children: "Loading settings..."
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [activeTab === 'dial' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              style: {
+                fontSize: _floatingToolsReact.settingsStyles.sectionTitle.fontSize,
+                fontWeight: _floatingToolsReact.settingsStyles.sectionTitle.fontWeight,
+                letterSpacing: _floatingToolsReact.settingsStyles.sectionTitle.letterSpacing,
+                textTransform: _floatingToolsReact.settingsStyles.sectionTitle.textTransform,
+                color: _floatingToolsReact.settingsColors.textMuted,
+                marginBottom: _floatingToolsReact.settingsStyles.sectionHeader.marginBottom
+              },
+              children: ["SELECT UP TO ", _floatingToolsReact.MAX_SETTINGS_DIAL_SLOTS, " TOOLS (", helpers.dialToolCount, "/", _floatingToolsReact.MAX_SETTINGS_DIAL_SLOTS, ")"]
+            }), Object.entries(settings.dialTools).map(([id, enabled]) => {
+              const isDisabled = !enabled && helpers.isDialFull;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolCard, {
+                toolId: id,
+                enabled: enabled,
+                disabled: isDisabled,
+                availableTools: availableTools,
+                onToggle: () => actions.toggleDialTool(id)
+              }, id);
+            })]
+          }), activeTab === 'floating' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                fontSize: _floatingToolsReact.settingsStyles.sectionTitle.fontSize,
+                fontWeight: _floatingToolsReact.settingsStyles.sectionTitle.fontWeight,
+                letterSpacing: _floatingToolsReact.settingsStyles.sectionTitle.letterSpacing,
+                textTransform: _floatingToolsReact.settingsStyles.sectionTitle.textTransform,
+                color: _floatingToolsReact.settingsColors.textMuted,
+                marginBottom: _floatingToolsReact.settingsStyles.sectionHeader.marginBottom
+              },
+              children: "CONFIGURE FLOATING TOOLBAR ITEMS"
+            }), Object.entries(settings.floatingTools).map(([id, enabled]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolCard, {
+              toolId: id,
+              enabled: enabled,
+              availableTools: availableTools,
+              onToggle: () => id === 'environment' ? actions.toggleEnvironment() : actions.toggleFloatingTool(id)
+            }, id))]
+          }), activeTab === 'settings' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                fontSize: _floatingToolsReact.settingsStyles.sectionTitle.fontSize,
+                fontWeight: _floatingToolsReact.settingsStyles.sectionTitle.fontWeight,
+                letterSpacing: _floatingToolsReact.settingsStyles.sectionTitle.letterSpacing,
+                textTransform: _floatingToolsReact.settingsStyles.sectionTitle.textTransform,
+                color: _floatingToolsReact.settingsColors.textMuted,
+                marginBottom: _floatingToolsReact.settingsStyles.sectionHeader.marginBottom
+              },
+              children: "GLOBAL SETTINGS"
+            }), _floatingToolsReact.globalSettingsConfig.map(config => {
+              const value = settings.globalSettings?.[config.key] ?? false;
+              const color = _floatingToolsReact.settingsColors.success;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                style: {
+                  padding: 12,
+                  backgroundColor: _floatingToolsReact.settingsColors.cardBackground,
+                  borderRadius: 8,
+                  border: `1px solid ${_floatingToolsReact.settingsColors.cardBorder}`,
+                  marginBottom: 10
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    style: {
+                      backgroundColor: `${_floatingToolsReact.settingsColors.info}20`,
+                      border: `1px solid ${_floatingToolsReact.settingsColors.info}40`,
+                      borderRadius: 4,
+                      padding: '4px 8px'
+                    },
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      style: {
+                        fontSize: 10,
+                        fontWeight: 700,
+                        color: _floatingToolsReact.settingsColors.info,
+                        letterSpacing: 0.5
+                      },
+                      children: config.category
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                    style: {
+                      flex: 1
+                    },
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      style: {
+                        fontFamily: 'monospace',
+                        fontSize: 12,
+                        fontWeight: 700,
+                        color: _floatingToolsReact.settingsColors.text
+                      },
+                      children: config.label
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      style: {
+                        fontSize: 10,
+                        color: _floatingToolsReact.settingsColors.textMuted,
+                        marginTop: 2
+                      },
+                      children: config.shortDescription
+                    })]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                    onClick: () => actions.toggleGlobalSetting(config.key),
+                    style: {
+                      paddingLeft: _floatingToolsReact.settingsStyles.toggle.paddingHorizontal,
+                      paddingRight: _floatingToolsReact.settingsStyles.toggle.paddingHorizontal,
+                      paddingTop: _floatingToolsReact.settingsStyles.toggle.paddingVertical,
+                      paddingBottom: _floatingToolsReact.settingsStyles.toggle.paddingVertical,
+                      borderRadius: _floatingToolsReact.settingsStyles.toggle.borderRadius,
+                      borderWidth: _floatingToolsReact.settingsStyles.toggle.borderWidth,
+                      borderStyle: 'solid',
+                      backgroundColor: value ? _floatingToolsReact.settingsColors.toggleOnBg(color) : _floatingToolsReact.settingsColors.toggleOffBg,
+                      borderColor: value ? _floatingToolsReact.settingsColors.toggleOnBorder(color) : _floatingToolsReact.settingsColors.toggleOffBorder,
+                      color: value ? color : _floatingToolsReact.settingsColors.toggleOffText,
+                      fontSize: _floatingToolsReact.settingsStyles.toggle.fontSize,
+                      fontWeight: _floatingToolsReact.settingsStyles.toggle.fontWeight,
+                      cursor: 'pointer',
+                      transition: 'all 150ms ease',
+                      boxShadow: value ? `0 0 8px ${color}66` : 'none'
+                    },
+                    children: value ? 'ON' : 'OFF'
+                  })]
+                })
+              }, config.key);
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              onClick: () => actions.resetToDefaults(),
+              style: {
+                width: '100%',
+                padding: '12px 16px',
+                marginTop: 8,
+                borderRadius: 6,
+                border: `1px solid ${_floatingToolsReact.settingsColors.error}40`,
+                backgroundColor: `${_floatingToolsReact.settingsColors.error}15`,
+                color: _floatingToolsReact.settingsColors.error,
+                fontSize: 12,
+                fontWeight: 700,
+                letterSpacing: 0.5,
+                cursor: 'pointer',
+                transition: 'all 150ms ease'
+              },
+              children: "CLEAR ALL SETTINGS"
+            })]
+          })]
+        })
+      })]
+    })]
+  });
+}