@buoy-gg/core 3.0.1 → 4.0.1

package/lib/commonjs/floatingMenu/DevToolsSettingsModal.js

@@ -808,7 +808,7 @@ const DevToolsSettingsModal = ({
               children: clearSuccess ? "CLEARED" : isClearing ? "CLEARING..." : "CLEAR ALL SETTINGS"
             })]
           })]
-        }), renderGlobalSettingCard("enableSharedModalDimensions", "SHARED MODAL SIZE", "MODAL", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately. Enable only if you prefer uniform modal sizes across all dev tools."), renderGlobalSettingCard("expandableWindowControls", "EXPAND CONTROLS", "MODAL", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed — similar to iPad window controls. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access (e.g. when using a mouse or simulator)."), isDevelopmentMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        }), renderGlobalSettingCard("enableSharedModalDimensions", "SHARED MODAL SIZE", "MODAL", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately. Enable only if you prefer uniform modal sizes across all dev tools."), _reactNative.Platform.OS !== "web" && renderGlobalSettingCard("expandableWindowControls", "EXPAND CONTROLS", "MODAL", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed — similar to iPad window controls. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access (e.g. when using a mouse or simulator)."), isDevelopmentMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.exportConfigCard,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
             activeOpacity: 0.85,

package/lib/commonjs/floatingMenu/FloatingDevTools.js

@@ -15,6 +15,7 @@ var _MinimizedToolsContext = require("./MinimizedToolsContext.js");
 var _defaultConfig = require("./defaultConfig.js");
 var _DefaultConfigContext = require("./DefaultConfigContext.js");
 var _license = require("@buoy-gg/license");
+var _autoExternalSync = require("./autoExternalSync.js");
 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); }
 /**
@@ -113,11 +114,18 @@ const FloatingDevTools = ({
   licenseKey: licenseKeyProp,
   zustandStores,
   environment,
+  externalSync = true,
   ...props
 }) => {
   const resolvedEnvironment = environment ?? (0, _sharedUi.normalizeEnvironment)(process.env.NODE_ENV ?? "dev");
-  // Check Pro status for production gating
-  const isPro = (0, _license.useIsPro)();
+  // Production gating + the device→dashboard license handshake must use a REAL
+  // license only — NOT the free Weekend Pass. Otherwise shipping Buoy would
+  // expose the devtools to end users every weekend, and the dashboard would try
+  // to adopt a non-existent key. (Feature unlocks inside the tools still honor
+  // the Weekend Pass via their own useIsPro().)
+  const {
+    isLicensed
+  } = (0, _license.useProAccess)();
 
   // Get full license state for requireLicense gating
   const {
@@ -126,10 +134,17 @@ const FloatingDevTools = ({
   } = (0, _license.useLicense)();
   const [showLicenseModal, setShowLicenseModal] = (0, _react.useState)(false);
 
-  // Initialize license manager on mount, and set/clear license key when prop changes
+  // Initialize license manager on mount, and set/clear license key when prop changes.
+  // The `licenseKey` prop is the source of truth WHEN PROVIDED:
+  //   - non-empty  → validate + activate that key
+  //   - "" (blank) → EXPLICITLY clear the cached license (key was removed)
+  //   - undefined  → don't touch it (the app may set a key via Buoy.init())
   (0, _react.useEffect)(() => {
     if (licenseKeyProp && licenseKeyProp.trim() !== "") {
       _license.LicenseManager.initialize().then(() => _license.LicenseManager.setLicenseKey(licenseKeyProp)).catch(() => {});
+    } else if (licenseKeyProp === "") {
+      // Explicit removal: wipe the 30-day cache so Pro actually turns off.
+      _license.LicenseManager.initialize().then(() => _license.LicenseManager.clearLicense()).catch(() => {});
     } else {
       _license.LicenseManager.initialize();
     }
@@ -306,7 +321,7 @@ const FloatingDevTools = ({
   // Gate: Free tier only works in development mode
   // Pro users can use DevTools everywhere (dev + production)
   const isDevelopment = typeof __DEV__ !== "undefined" && __DEV__;
-  if (!isDevelopment && !isPro) {
+  if (!isDevelopment && !isLicensed) {
     // Free user in production - don't render DevTools
     return null;
   }
@@ -342,7 +357,12 @@ const FloatingDevTools = ({
                 environment: resolvedEnvironment
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHost.AppOverlay, {})]
             })
-          }), children, DebugBordersOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightUpdatesOverlay, {}), ImageOverlayOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageOverlayOverlay, {}), PerfMonitorOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(PerfMonitorOverlay, {}), ImpersonateOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImpersonateOverlay, {}), RouteTracker && /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteTracker, {})]
+          }), children, DebugBordersOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightUpdatesOverlay, {}), ImageOverlayOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageOverlayOverlay, {}), PerfMonitorOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(PerfMonitorOverlay, {}), ImpersonateOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImpersonateOverlay, {}), RouteTracker && /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteTracker, {}), isDevelopment && externalSync !== false && (0, _autoExternalSync.isExternalSyncAvailable)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_autoExternalSync.AutoExternalSync, {
+            options: typeof externalSync === "object" ? externalSync : undefined,
+            requiredEnvVars: requiredEnvVars,
+            isPro: isLicensed,
+            licenseKey: licenseKey
+          })]
         })
       })
     })

package/lib/commonjs/floatingMenu/FloatingMenu.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.FloatingMenu = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _floatingTools = require("./floatingTools");
 var _DialDevTools = require("./dial/DialDevTools");
-var _sharedUi = require("@buoy-gg/shared-ui");
 var _DevToolsSettingsModal = require("./DevToolsSettingsModal");
 var _AppHost = require("./AppHost.js");
 var _DevToolsVisibilityContext = require("./DevToolsVisibilityContext.js");
@@ -27,10 +27,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 const FLOATING_MENU_ONBOARDING_KEY = "@react_buoy_floating_menu_tooltip_shown";
 const ONBOARDING_STEP_KEY = "@react_buoy_onboarding_step";
-const {
-  width: SCREEN_WIDTH,
-  height: SCREEN_HEIGHT
-} = _reactNative.Dimensions.get("window");
 const FloatingMenu = ({
   apps,
   state,
@@ -328,11 +324,11 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "900"
   },
   onboardingContainer: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     zIndex: 10000
   },
   onboardingBackdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.85)"
   }
 });

package/lib/commonjs/floatingMenu/allToolsRegistry.js

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ALL_TOOLS_REGISTRY = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Canonical registry of ALL dial-eligible tools React Buoy offers on mobile.
+ *
+ * This is the single source of truth used to compute which tools are
+ * "unavailable" (offered but not installed in the current app).  It lives
+ * inside the floating-menu package so nothing outside needs to be imported.
+ *
+ * Rules for this file:
+ *  - Only import from REQUIRED dependencies (@buoy-gg/floating-tools-core,
+ *    @buoy-gg/shared-ui, react-native) so the icons are always resolvable,
+ *    even when the optional tool packages are not installed.
+ *  - Only include tools whose preset slot is NOT "row" (row-only tools never
+ *    appear in the dial and have no "unavailable" state to show).
+ *  - Keep the order intentional: this order is the fallback when no usage
+ *    data exists for new/unavailable tools.
+ */
+
+// ─── Color constants for tools whose icons live in optional packages ─────────
+// Copied verbatim from the source icon components so the vendored copies below
+// render identically to the real tool icons.
+
+/** Zustand brand color — copied from @buoy-gg/zustand ZustandIcon.tsx */const ZUSTAND_ICON_COLOR = "#463B3F";
+/** Jotai brand color — copied from @buoy-gg/jotai JotaiIcon.tsx */
+const JOTAI_ICON_COLOR = "#6C47FF";
+/** Image overlay purple — matches the preset */
+const IMAGE_OVERLAY_ICON_COLOR = "#A855F7";
+
+// ─── Vendored copies of optional-package icons ───────────────────────────────
+// Zustand and Jotai ship their real icons inside their own packages (which may
+// not be installed), so we cannot import them from a required dependency.
+//
+// The REAL icons in @buoy-gg/zustand and @buoy-gg/jotai are themselves a single
+// centered letter glyph (verified — there are no SVG logos in those packages).
+// These are faithful copies of those source components, so unavailable items
+// render the ACTUAL tool icon (just dimmed by DialIcon), not a placeholder.
+
+/** Faithful copy of @buoy-gg/zustand `ZustandIcon` */
+const ZustandIcon = ({
+  size,
+  color
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: {
+    width: size,
+    height: size,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: {
+      fontSize: size * 0.75,
+      color: color || ZUSTAND_ICON_COLOR,
+      fontWeight: "700"
+    },
+    children: "Z"
+  })
+});
+
+/** Faithful copy of @buoy-gg/jotai `JotaiIcon` */
+const JotaiIcon = ({
+  size,
+  color
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: {
+    width: size,
+    height: size,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: {
+      fontSize: size * 0.75,
+      color: color || JOTAI_ICON_COLOR,
+      fontWeight: "700"
+    },
+    children: "J"
+  })
+});
+
+// ─── Registry entry type ──────────────────────────────────────────────────────
+
+// ─── Canonical catalog ────────────────────────────────────────────────────────
+
+/**
+ * Full list of every dial-eligible tool React Buoy offers on mobile.
+ *
+ * Available (installed) tools are shown normally in the dial.
+ * Unavailable (not installed) tools are appended at the end of the dial and look
+ * like a normal item (real icon + real name) with a small muted "Unavailable"
+ * caption added; they are non-interactive.
+ *
+ * To add a new tool to Buoy:
+ *  1. Add its preset to autoDiscoverPresets.ts
+ *  2. Add an entry here so it appears in the "unavailable" section for apps
+ *     that haven't installed it yet.
+ */
+const ALL_TOOLS_REGISTRY = exports.ALL_TOOLS_REGISTRY = [{
+  id: "env",
+  name: "ENV",
+  color: _floatingToolsCore.ENV_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EnvIcon, {
+    size: size
+  })
+}, {
+  id: "network",
+  name: "NETWORK",
+  color: _floatingToolsCore.NETWORK_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.NetworkIcon, {
+    size: size
+  })
+}, {
+  id: "storage",
+  name: "STORAGE",
+  color: _floatingToolsCore.STORAGE_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.StorageIcon, {
+    size: size
+  })
+}, {
+  id: "query",
+  name: "QUERY",
+  color: _floatingToolsCore.QUERY_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.QueryIcon, {
+    size: size
+  })
+}, {
+  id: "route-events",
+  name: "ROUTES",
+  color: _floatingToolsCore.ROUTES_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.RoutesIcon, {
+    size: size
+  })
+}, {
+  id: "highlight-updates-modal",
+  name: "HIGHLIGHT",
+  color: _floatingToolsCore.HIGHLIGHTER_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.HighlighterIcon, {
+    size: size
+  })
+}, {
+  id: "redux",
+  name: "REDUX",
+  color: _floatingToolsCore.REDUX_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.ReduxIcon, {
+    size: size
+  })
+}, {
+  id: "zustand",
+  name: "ZUSTAND",
+  color: ZUSTAND_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(ZustandIcon, {
+    size: size
+  })
+}, {
+  id: "events",
+  name: "EVENTS",
+  color: _floatingToolsCore.EVENTS_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EventsIcon, {
+    size: size
+  })
+}, {
+  id: "jotai",
+  name: "JOTAI",
+  color: JOTAI_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(JotaiIcon, {
+    size: size
+  })
+}, {
+  id: "image-overlay",
+  name: "IMG",
+  color: IMAGE_OVERLAY_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ImageOverlayIcon, {
+    size: size,
+    color: IMAGE_OVERLAY_ICON_COLOR
+  })
+}, {
+  id: "perf-monitor-modal",
+  name: "BENCH",
+  color: _floatingToolsCore.BENCHMARK_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.BenchmarkIcon, {
+    size: size
+  })
+}];

package/lib/commonjs/floatingMenu/autoExternalSync.js

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutoExternalSync = AutoExternalSync;
+exports.isExternalSyncAvailable = isExternalSyncAvailable;
+var _react = require("react");
+var _reactNative = require("react-native");
+/**
+ * Zero-config device→desktop sync for FloatingDevTools.
+ *
+ * When @buoy-gg/external-sync is installed, FloatingDevTools renders
+ * <AutoExternalSync /> in dev builds: it connects to the Buoy Desktop broker
+ * (localhost:42831 — a silent no-op when the desktop app isn't running) and
+ * registers a sync adapter for every installed tool package, discovered with
+ * the same guarded-require pattern as autoDiscoverPresets. No <DevToolsSync>
+ * wiring needed in the app.
+ *
+ * Identity defaults come from expo-constants when available (app name →
+ * "MyApp (ios)" / "myapp-ios"), overridable via the `externalSync` prop.
+ */
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+// Module-level guarded requires: presence is constant for the app lifetime,
+// so hooks pulled from these modules keep a stable call order.
+//
+// IMPORTANT: each require() must sit LEXICALLY inside its own try block
+// (same pattern as autoDiscoverPresets) — Metro only marks a dependency as
+// optional when the require is directly inside a try statement. Wrapping it
+// in a helper/arrow makes Metro hard-fail the bundle for apps that don't
+// install that package.
+let externalSyncModule = null;
+let storageModule = null;
+let networkModule = null;
+let reactQueryModule = null;
+let routeEventsModule = null;
+let reduxModule = null;
+let zustandModule = null;
+let jotaiModule = null;
+let eventsModule = null;
+let consoleModule = null;
+let envModule = null;
+let highlightUpdatesModule = null;
+let debugBordersModule = null;
+let impersonateModule = null;
+let perfMonitorModule = null;
+let expoConstantsModule = null;
+try {
+  externalSyncModule = require("@buoy-gg/external-sync");
+} catch {
+  // not installed
+}
+try {
+  storageModule = require("@buoy-gg/storage");
+} catch {
+  // not installed
+}
+try {
+  networkModule = require("@buoy-gg/network");
+} catch {
+  // not installed
+}
+try {
+  reactQueryModule = require("@buoy-gg/react-query");
+} catch {
+  // not installed
+}
+try {
+  routeEventsModule = require("@buoy-gg/route-events");
+} catch {
+  // not installed
+}
+try {
+  reduxModule = require("@buoy-gg/redux");
+} catch {
+  // not installed
+}
+try {
+  zustandModule = require("@buoy-gg/zustand");
+} catch {
+  // not installed
+}
+try {
+  jotaiModule = require("@buoy-gg/jotai");
+} catch {
+  // not installed
+}
+try {
+  eventsModule = require("@buoy-gg/events");
+} catch {
+  // not installed
+}
+try {
+  consoleModule = require("@buoy-gg/console");
+} catch {
+  // not installed
+}
+try {
+  envModule = require("@buoy-gg/env");
+} catch {
+  // not installed
+}
+try {
+  highlightUpdatesModule = require("@buoy-gg/highlight-updates");
+} catch {
+  // not installed
+}
+try {
+  debugBordersModule = require("@buoy-gg/debug-borders");
+} catch {
+  // not installed
+}
+try {
+  impersonateModule = require("@buoy-gg/impersonate");
+} catch {
+  // not installed
+}
+try {
+  perfMonitorModule = require("@buoy-gg/perf-monitor");
+} catch {
+  // not installed
+}
+try {
+  expoConstantsModule = require("expo-constants");
+} catch {
+  // not installed (RN CLI apps)
+}
+
+/** Whether zero-config sync can run (the external-sync package is installed). */
+function isExternalSyncAvailable() {
+  return !!externalSyncModule?.useExternalSyncSocket;
+}
+function getAppName() {
+  const constants = expoConstantsModule?.default ?? expoConstantsModule;
+  return constants?.expoConfig?.name ?? constants?.manifest2?.extra?.expoClient?.name ?? null;
+}
+function defaultIdentity() {
+  const appName = getAppName();
+  const slug = (appName ?? "buoy").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+  return {
+    deviceName: `${appName ?? "Buoy Device"} (${_reactNative.Platform.OS})`,
+    deviceId: `${slug || "buoy"}-${_reactNative.Platform.OS}`
+  };
+}
+function AutoExternalSync({
+  options,
+  requiredEnvVars,
+  isPro,
+  licenseKey
+}) {
+  const {
+    useExternalSyncSocket,
+    useExternalSync
+  } = externalSyncModule;
+
+  // Context-based query adapter; null when there is no QueryClientProvider
+  // above FloatingDevTools (or the installed @buoy-gg/react-query predates
+  // the hook).
+  const queryAdapter = reactQueryModule?.useReactQuerySyncAdapter ? reactQueryModule.useReactQuerySyncAdapter() : null;
+  const identity = (0, _react.useMemo)(defaultIdentity, []);
+  const deviceId = options?.deviceId ?? identity.deviceId;
+  const {
+    socket
+  } = useExternalSyncSocket({
+    deviceName: options?.deviceName ?? identity.deviceName,
+    socketURL: options?.socketURL ?? "http://localhost:42831",
+    persistentDeviceId: deviceId,
+    platform: _reactNative.Platform.OS,
+    enableLogs: options?.enableLogs
+  });
+
+  // The license validates asynchronously (Keygen call on mount), usually AFTER
+  // the socket handshake is already sent — so the one-shot handshake query
+  // can't carry Pro status reliably. Emit it as an event whenever it resolves
+  // or changes, and on every (re)connect. The broker stores it on the device
+  // record and rebroadcasts, so the desktop dashboard can auto-adopt the key.
+  const licenseRef = (0, _react.useRef)({
+    isPro,
+    licenseKey
+  });
+  licenseRef.current = {
+    isPro,
+    licenseKey
+  };
+  (0, _react.useEffect)(() => {
+    if (!socket) return;
+    const emitLicense = () => {
+      socket.emit("device-license", {
+        isPro: licenseRef.current.isPro ? "1" : "0",
+        licenseKey: licenseRef.current.licenseKey ?? ""
+      });
+    };
+    if (socket.connected) emitLicense();
+    socket.on("connect", emitLicense);
+    return () => {
+      socket.off("connect", emitLicense);
+    };
+  }, [socket, isPro, licenseKey]);
+  const tools = (0, _react.useMemo)(() => {
+    const map = {};
+    if (storageModule?.storageSyncAdapter) {
+      map.storage = storageModule.storageSyncAdapter;
+    }
+    if (networkModule?.networkSyncAdapter) {
+      map.network = networkModule.networkSyncAdapter;
+    }
+    if (queryAdapter) {
+      map.query = queryAdapter;
+    }
+    if (routeEventsModule?.routeEventsSyncAdapter) {
+      map["route-events"] = routeEventsModule.routeEventsSyncAdapter;
+    }
+    if (reduxModule?.reduxSyncAdapter) {
+      map.redux = reduxModule.reduxSyncAdapter;
+    }
+    if (zustandModule?.zustandSyncAdapter) {
+      map.zustand = zustandModule.zustandSyncAdapter;
+    }
+    if (jotaiModule?.jotaiSyncAdapter) {
+      map.jotai = jotaiModule.jotaiSyncAdapter;
+    }
+    if (eventsModule?.eventsSyncAdapter) {
+      map.events = eventsModule.eventsSyncAdapter;
+    }
+    if (consoleModule?.consoleSyncAdapter) {
+      map.console = consoleModule.consoleSyncAdapter;
+    }
+    if (envModule?.createEnvSyncAdapter) {
+      map.env = envModule.createEnvSyncAdapter(requiredEnvVars ?? []);
+    }
+    if (highlightUpdatesModule?.highlightUpdatesSyncAdapter) {
+      map["highlight-updates"] = highlightUpdatesModule.highlightUpdatesSyncAdapter;
+    }
+    if (debugBordersModule?.debugBordersSyncAdapter) {
+      map["debug-borders"] = debugBordersModule.debugBordersSyncAdapter;
+    }
+    if (impersonateModule?.impersonateSyncAdapter) {
+      map.impersonate = impersonateModule.impersonateSyncAdapter;
+    }
+    if (perfMonitorModule?.perfMonitorSyncAdapter) {
+      map["perf-monitor"] = perfMonitorModule.perfMonitorSyncAdapter;
+    }
+    return map;
+  }, [queryAdapter, requiredEnvVars]);
+  useExternalSync({
+    tools,
+    socket,
+    deviceId,
+    enableLogs: options?.enableLogs
+  });
+  return null;
+}

package/lib/commonjs/floatingMenu/defaultConfig.js

@@ -32,7 +32,7 @@ exports.validateDialConfig = validateDialConfig;
  * This is a union type of all auto-discovered tool IDs.
  */
 
-// Render count analysis modal (@buoy-gg/highlight-updates)
+// Benchmark recording modal (@buoy-gg/perf-monitor)
 
 /**
  * Special floating-only tool IDs that only appear in the floating bubble row.