@buoy-gg/impersonate 1.0.3-beta.0

package/lib/commonjs/impersonate/components/DataNukeSettings.js

@@ -0,0 +1,715 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataNukeSettings = DataNukeSettings;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * DataNukeSettings Component
+ *
+ * Settings panel for configuring what data to clear on impersonation change.
+ * Features Save/Discard/Restore pattern for reliable persistence.
+ */
+
+const DEFAULT_HEADER_KEY = "x-impersonate-user-id";
+const DEFAULT_SHOW_BANNER = true;
+const DEFAULT_DATA_NUKE_SETTINGS = {
+  reactQuery: true,
+  redux: true,
+  asyncStorage: false,
+  mmkv: false
+};
+
+/**
+ * Detection status for auto-clear integrations
+ */
+
+function ToggleRow({
+  label,
+  description,
+  value,
+  onChange,
+  recommended,
+  dangerous,
+  detected
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.toggleRow,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.toggleInfo,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.toggleHeader,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.toggleLabel, dangerous && styles.dangerousLabel],
+          children: label
+        }), detected !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.detectedBadge, detected ? styles.detectedBadgeActive : styles.detectedBadgeInactive],
+          children: [detected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Check, {
+            size: 10,
+            color: _sharedUi.buoyColors.success
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+            size: 10,
+            color: _sharedUi.buoyColors.textMuted
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.detectedText, detected ? styles.detectedTextActive : styles.detectedTextInactive],
+            children: detected ? "Detected" : "Not Detected"
+          })]
+        }), recommended && detected !== false && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.recommendedBadge,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+            size: 10,
+            color: _sharedUi.buoyColors.primary
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.recommendedText,
+            children: "Recommended"
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.toggleDescription,
+        children: description
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+      value: value,
+      onValueChange: onChange,
+      trackColor: {
+        false: _sharedUi.buoyColors.border,
+        true: dangerous ? _sharedUi.buoyColors.warning + "50" : _sharedUi.buoyColors.primary + "50"
+      },
+      thumbColor: value ? dangerous ? _sharedUi.buoyColors.warning : _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textMuted
+    })]
+  });
+}
+function DataNukeSettings({
+  headerKey,
+  settings,
+  showBanner,
+  onSave,
+  onShowBannerChange,
+  detectionStatus
+}) {
+  // Local state for editing
+  const [localHeaderKey, setLocalHeaderKey] = (0, _react.useState)(headerKey);
+  const [localSettings, setLocalSettings] = (0, _react.useState)(settings);
+  const [localShowBanner, setLocalShowBanner] = (0, _react.useState)(showBanner);
+  const [copySuccess, setCopySuccess] = (0, _react.useState)(false);
+
+  // Sync local state when props change (e.g., after async load from storage)
+  (0, _react.useEffect)(() => {
+    setLocalHeaderKey(headerKey);
+  }, [headerKey]);
+  (0, _react.useEffect)(() => {
+    setLocalSettings(settings);
+  }, [settings]);
+  (0, _react.useEffect)(() => {
+    setLocalShowBanner(showBanner);
+  }, [showBanner]);
+
+  // Check if there are unsaved changes
+  // Note: showBanner is not included here because it applies immediately
+  const hasChanges = (0, _react.useMemo)(() => {
+    return localHeaderKey !== headerKey || localSettings.reactQuery !== settings.reactQuery || localSettings.redux !== settings.redux || localSettings.asyncStorage !== settings.asyncStorage || localSettings.mmkv !== settings.mmkv;
+  }, [localHeaderKey, localSettings, headerKey, settings]);
+
+  // Check if current values differ from defaults
+  const isDefault = (0, _react.useMemo)(() => {
+    return localHeaderKey === DEFAULT_HEADER_KEY && localShowBanner === DEFAULT_SHOW_BANNER && localSettings.reactQuery === DEFAULT_DATA_NUKE_SETTINGS.reactQuery && localSettings.redux === DEFAULT_DATA_NUKE_SETTINGS.redux && localSettings.asyncStorage === DEFAULT_DATA_NUKE_SETTINGS.asyncStorage && localSettings.mmkv === DEFAULT_DATA_NUKE_SETTINGS.mmkv;
+  }, [localHeaderKey, localShowBanner, localSettings]);
+  const handleSave = () => {
+    onSave(localHeaderKey.trim() || DEFAULT_HEADER_KEY, localSettings, localShowBanner);
+  };
+  const handleDiscard = () => {
+    setLocalHeaderKey(headerKey);
+    setLocalSettings(settings);
+    setLocalShowBanner(showBanner);
+  };
+  const handleRestoreDefaults = () => {
+    setLocalHeaderKey(DEFAULT_HEADER_KEY);
+    setLocalSettings(DEFAULT_DATA_NUKE_SETTINGS);
+    setLocalShowBanner(DEFAULT_SHOW_BANNER);
+    onShowBannerChange(DEFAULT_SHOW_BANNER); // Apply banner change immediately
+  };
+  const updateLocalSetting = (key, value) => {
+    setLocalSettings(prev => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  // Config object for DataViewer and copying
+  const configData = (0, _react.useMemo)(() => ({
+    defaults: {
+      headerKey: localHeaderKey,
+      showBanner: localShowBanner,
+      dataNukeSettings: {
+        reactQuery: localSettings.reactQuery,
+        redux: localSettings.redux,
+        asyncStorage: localSettings.asyncStorage,
+        mmkv: localSettings.mmkv
+      }
+    }
+  }), [localHeaderKey, localShowBanner, localSettings]);
+  const handleCopyConfig = async () => {
+    // Format as JS object literal (not JSON) for direct paste into createImpersonateTool()
+    const configString = `defaults: {
+  headerKey: '${localHeaderKey}',
+  showBanner: ${localShowBanner},
+  dataNukeSettings: {
+    reactQuery: ${localSettings.reactQuery},
+    redux: ${localSettings.redux},
+    asyncStorage: ${localSettings.asyncStorage},
+    mmkv: ${localSettings.mmkv},
+  },
+},`;
+    try {
+      await (0, _sharedUi.copyToClipboard)(configString);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch {
+      // Silently fail - user will notice copy didn't work
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.contentContainer,
+    children: [hasChanges && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.actionBar,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.actionBarContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.unsavedText,
+          children: "Unsaved changes"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.actionButtons,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: styles.discardButton,
+            onPress: handleDiscard,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+              size: 14,
+              color: _sharedUi.buoyColors.textSecondary
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.discardButtonText,
+              children: "Discard"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: styles.saveButton,
+            onPress: handleSave,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Check, {
+              size: 14,
+              color: "#fff"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.saveButtonText,
+              children: "Save"
+            })]
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CollapsibleSection, {
+      title: "Header Configuration",
+      icon: _sharedUi.Settings,
+      defaultOpen: true,
+      variant: "bordered",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.sectionContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.inputLabel,
+          children: "Header Key"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          style: styles.input,
+          value: localHeaderKey,
+          onChangeText: setLocalHeaderKey,
+          placeholder: "x-impersonate-user-id",
+          placeholderTextColor: _sharedUi.buoyColors.textMuted,
+          autoCapitalize: "none",
+          autoCorrect: false
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.inputFooter,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.helperText,
+            children: "The HTTP header key used for impersonation. Value will be the user ID."
+          }), localHeaderKey !== DEFAULT_HEADER_KEY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: () => setLocalHeaderKey(DEFAULT_HEADER_KEY),
+            style: styles.resetLink,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.resetLinkText,
+              children: "Reset to default"
+            })
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CollapsibleSection, {
+      title: "Display",
+      icon: _sharedUi.Eye,
+      defaultOpen: true,
+      variant: "bordered",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.sectionContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.togglesCard,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleRow, {
+            label: "Floating Banner",
+            description: "Show a floating banner when impersonation is active",
+            value: localShowBanner,
+            onChange: value => {
+              setLocalShowBanner(value);
+              onShowBannerChange(value); // Apply immediately
+            },
+            recommended: true
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CollapsibleSection, {
+      title: "Data Clearing",
+      icon: _sharedUi.AlertTriangle,
+      defaultOpen: true,
+      variant: "bordered",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.sectionContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.sectionDescription,
+          children: "Choose what data to clear when impersonation starts or stops. This ensures you see fresh data for the impersonated user."
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.togglesCard,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleRow, {
+            label: "React Query",
+            description: "Clear query cache and cancel pending queries",
+            value: localSettings.reactQuery,
+            onChange: v => updateLocalSetting("reactQuery", v),
+            recommended: true,
+            detected: detectionStatus?.reactQuery
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.divider
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleRow, {
+            label: "Redux",
+            description: "Reset Redux store to initial state",
+            value: localSettings.redux,
+            onChange: v => updateLocalSetting("redux", v),
+            recommended: true,
+            detected: detectionStatus?.redux
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.advancedSection,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.advancedLabel,
+            children: "Storage Options"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [styles.togglesCard, styles.dangerousCard],
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleRow, {
+              label: "AsyncStorage",
+              description: "Clear app data (preserves @buoy/* keys)",
+              value: localSettings.asyncStorage,
+              onChange: v => updateLocalSetting("asyncStorage", v),
+              dangerous: true,
+              detected: detectionStatus?.asyncStorage
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.divider
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleRow, {
+              label: "MMKV",
+              description: "Clear MMKV storage (preserves @buoy/* keys)",
+              value: localSettings.mmkv,
+              onChange: v => updateLocalSetting("mmkv", v),
+              dangerous: true,
+              detected: detectionStatus?.mmkv
+            })]
+          })]
+        }), (localSettings.asyncStorage || localSettings.mmkv) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.warningCard,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+            size: 16,
+            color: _sharedUi.buoyColors.warning
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.warningContent,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.warningTitle,
+              children: "Storage Clearing Enabled"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.warningText,
+              children: "This will remove app data like settings and cached content. Auth tokens managed by @buoy/* are preserved."
+            })]
+          })]
+        })]
+      })
+    }), !isDefault && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: styles.restoreButton,
+      onPress: handleRestoreDefaults,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RefreshCw, {
+        size: 14,
+        color: _sharedUi.buoyColors.textSecondary
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.restoreButtonText,
+        children: "Restore Defaults"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CollapsibleSection, {
+      title: "How It Works",
+      icon: _sharedUi.Info,
+      defaultOpen: false,
+      variant: "bordered",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.sectionContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.infoText,
+          children: "When impersonation is enabled, the configured header is automatically added to all outgoing fetch and XMLHttpRequest calls."
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.infoText, styles.infoTextSpaced],
+          children: "Your backend should check for this header and return data for the specified user ID instead of the authenticated user."
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.codeBlock,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.codeComment,
+            children: "// Example request header"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: styles.codeText,
+            children: [localHeaderKey || "x-impersonate-user-id", ": ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.codeValue,
+              children: "user_123"
+            })]
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CollapsibleSection, {
+      title: "Export Configuration",
+      icon: _sharedUi.Copy,
+      defaultOpen: false,
+      variant: "bordered",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.sectionContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.infoText,
+          children: "Copy current settings to use in createImpersonateTool()."
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.dataViewerContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+            title: "",
+            data: configData,
+            showTypeFilter: false,
+            initialExpanded: true
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: styles.copyButton,
+          onPress: handleCopyConfig,
+          children: copySuccess ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Check, {
+              size: 14,
+              color: _sharedUi.buoyColors.success
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.copyButtonText, styles.copySuccessText],
+              children: "Copied!"
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
+              size: 14,
+              color: _sharedUi.buoyColors.primary
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.copyButtonText,
+              children: "Copy Config"
+            })]
+          })
+        })]
+      })
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    padding: 16,
+    gap: 12,
+    paddingBottom: 32
+  },
+  actionBar: {
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "30",
+    padding: 12
+  },
+  actionBarContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  unsavedText: {
+    fontSize: 13,
+    fontWeight: "500",
+    color: _sharedUi.buoyColors.primary
+  },
+  actionButtons: {
+    flexDirection: "row",
+    gap: 8
+  },
+  saveButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    backgroundColor: _sharedUi.buoyColors.primary,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 6
+  },
+  saveButtonText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#fff"
+  },
+  discardButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    backgroundColor: _sharedUi.buoyColors.hover,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border
+  },
+  discardButtonText: {
+    fontSize: 13,
+    fontWeight: "500",
+    color: _sharedUi.buoyColors.textSecondary
+  },
+  restoreButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    borderStyle: "dashed"
+  },
+  restoreButtonText: {
+    fontSize: 13,
+    color: _sharedUi.buoyColors.textSecondary
+  },
+  sectionContent: {
+    paddingTop: 8
+  },
+  sectionDescription: {
+    fontSize: 13,
+    color: _sharedUi.buoyColors.textSecondary,
+    lineHeight: 18,
+    marginBottom: 14
+  },
+  togglesCard: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 4
+  },
+  dangerousCard: {
+    borderColor: _sharedUi.buoyColors.warning + "30"
+  },
+  advancedSection: {
+    marginTop: 16
+  },
+  advancedLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    marginBottom: 8,
+    marginLeft: 2
+  },
+  inputLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textSecondary,
+    marginBottom: 8
+  },
+  input: {
+    height: 42,
+    backgroundColor: _sharedUi.buoyColors.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    paddingHorizontal: 14,
+    fontSize: 14,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace"
+  },
+  inputFooter: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginTop: 8,
+    gap: 12
+  },
+  helperText: {
+    flex: 1,
+    fontSize: 12,
+    color: _sharedUi.buoyColors.textMuted,
+    lineHeight: 16
+  },
+  resetLink: {
+    paddingVertical: 2
+  },
+  resetLinkText: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.primary,
+    fontWeight: "500"
+  },
+  toggleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 12,
+    paddingHorizontal: 12
+  },
+  toggleInfo: {
+    flex: 1,
+    marginRight: 12
+  },
+  toggleHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 3
+  },
+  toggleLabel: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: _sharedUi.buoyColors.text
+  },
+  dangerousLabel: {
+    color: _sharedUi.buoyColors.warning
+  },
+  recommendedBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  recommendedText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.primary
+  },
+  detectedBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  detectedBadgeActive: {
+    backgroundColor: _sharedUi.buoyColors.success + "15"
+  },
+  detectedBadgeInactive: {
+    backgroundColor: _sharedUi.buoyColors.textMuted + "15"
+  },
+  detectedText: {
+    fontSize: 10,
+    fontWeight: "600"
+  },
+  detectedTextActive: {
+    color: _sharedUi.buoyColors.success
+  },
+  detectedTextInactive: {
+    color: _sharedUi.buoyColors.textMuted
+  },
+  toggleDescription: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.textMuted,
+    lineHeight: 16
+  },
+  divider: {
+    height: 1,
+    backgroundColor: _sharedUi.buoyColors.border,
+    marginHorizontal: 12
+  },
+  warningCard: {
+    marginTop: 14,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 12,
+    backgroundColor: _sharedUi.buoyColors.warning + "10",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.warning + "25",
+    padding: 14
+  },
+  warningContent: {
+    flex: 1
+  },
+  warningTitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.warning,
+    marginBottom: 4
+  },
+  warningText: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.textSecondary,
+    lineHeight: 17
+  },
+  infoText: {
+    fontSize: 13,
+    color: _sharedUi.buoyColors.textSecondary,
+    lineHeight: 19
+  },
+  infoTextSpaced: {
+    marginTop: 10
+  },
+  codeBlock: {
+    marginTop: 14,
+    backgroundColor: _sharedUi.buoyColors.base,
+    borderRadius: 8,
+    padding: 14
+  },
+  codeComment: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace",
+    marginBottom: 6
+  },
+  codeText: {
+    fontSize: 13,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace"
+  },
+  codeValue: {
+    color: _sharedUi.buoyColors.primary
+  },
+  dataViewerContainer: {
+    marginTop: 12,
+    borderRadius: 8,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border
+  },
+  copyButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    marginTop: 14,
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "30"
+  },
+  copyButtonText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.primary
+  },
+  copySuccessText: {
+    color: _sharedUi.buoyColors.success
+  }
+});