@buoy-gg/core 7.0.40 → 7.0.41

package/README.md

@@ -97,3 +97,13 @@ Proprietary software. © Buoy LLC. All rights reserved. See the [Terms of Servic
 ### Custom floating controls
 
 The DevTools bubble uses the shared `FloatingTool` shell. Custom tools can use the same shell with `openFloatingTool`; `FloatingDevTools` already mounts the host. See the [integration guide](https://buoy.gg/buoy/latest/docs/custom-tools/floating-tools).
+
+## Web support (unreleased)
+
+Import `FloatingDevTools` from `@buoy-gg/core/web` and pass the tool namespaces through `modules`. Settings, account status, and modal persistence share their implementation with native. The browser build is available in this checkout and has not been published yet. See the [web setup guide](https://buoy.gg/buoy/latest/docs/web-preview) for registration, dependencies, and browser boundaries.
+
+In a Vite app, run `pnpm exec buoy login` from the app directory. The CLI writes `VITE_BUOY_KEY` to `.env.development.local` for Free accounts or `.env.local` for paid accounts. Pass `import.meta.env.VITE_BUOY_KEY` to the host's `licenseKey` prop.
+
+The browser dial supports Tab, arrow keys between tools, Enter to activate controls, and Escape to close. Its center button opens settings. Drag panel backgrounds or handles to move them; tabs and inputs keep their normal mouse behavior. Minimized tools stay above the floating bar and scroll when needed. They open below only when there is not enough room above for one row.
+
+The web dial follows the shared Background selection in Settings, including changes made while the dial is open.

package/bin/buoy.js

@@ -61,20 +61,16 @@ function openBrowser(url) {
   }
 }
 
-/**
- * Which env var name this project can actually read.
- *
- * Expo only inlines `EXPO_PUBLIC_`-prefixed vars into the bundle, so writing a
- * bare `BUOY_KEY` there produces a file that looks correct and silently does
- * nothing — the most likely way this whole flow could waste someone's evening.
- */
+/** Select the public variable prefix supported by the app's bundler. */
 function detectEnvVarName(root) {
+  let webVarName = null;
   try {
     const pkgPath = path.join(root, 'package.json');
     if (fs.existsSync(pkgPath)) {
       const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
       const deps = Object.assign({}, pkg.dependencies, pkg.devDependencies);
       if (deps.expo) return 'EXPO_PUBLIC_BUOY_KEY';
+      if (deps.vite) webVarName = 'VITE_BUOY_KEY';
     }
     if (
       fs.existsSync(path.join(root, 'app.config.js')) ||
@@ -88,27 +84,19 @@ function detectEnvVarName(root) {
       if (parsed && parsed.expo) return 'EXPO_PUBLIC_BUOY_KEY';
     }
   } catch {
-    /* fall through to the generic name */
+    /* Use the detected bundler or the generic name. */
   }
-  return 'BUOY_KEY';
+  return webVarName || 'BUOY_KEY';
 }
 
 /**
- * Which env file the key belongs in.
- *
- * Expo inlines `.env.local` into EVERY bundle, release builds included, and
- * `npx expo export` forces NODE_ENV=production — so a free key written there
- * ships inside the app to every phone that installs it. Each of those phones
- * then validates against the license server, which is how one free account
- * spent the whole daily quota in a morning. `.env.development.local` is only
- * loaded under NODE_ENV=development, so a free key there can only ever reach
- * a developer's own device.
- *
- * Paid keys keep `.env.local`: a Pro customer may want the tools in a
- * TestFlight or QA build, and that is their call to make.
+ * Expo and Vite include `.env.local` in production builds. Free keys belong
+ * in `.env.development.local` to keep them in development builds and avoid
+ * account verification from every production client. Paid keys can also be
+ * used in TestFlight or QA builds, so they keep `.env.local`.
  */
 function envFileFor(varName, tier) {
-  if (varName !== 'EXPO_PUBLIC_BUOY_KEY') return '.env.local';
+  if (varName !== 'EXPO_PUBLIC_BUOY_KEY' && varName !== 'VITE_BUOY_KEY') return '.env.local';
   return tier === 'pro' || tier === 'business' ? '.env.local' : '.env.development.local';
 }
 
@@ -296,16 +284,22 @@ async function login() {
   log(`  Wrote ${cyan(varName)} to ${cyan(relative)}`);
   if (moved) log(dim(`  Removed the old ${varName} line from .env.local`));
   if (fileName === '.env.development.local') {
-    log(dim('  Expo loads this file for `expo start` only, so the key stays out of release builds.'));
+    log(dim('  This file is loaded in development, keeping the key out of production builds.'));
   }
   if (addedIgnore) log(dim(`  Added ${fileName} to .gitignore`));
   log('');
   log('  Use it in your app:');
   log('');
-  log(cyan(`    Buoy.init({ licenseKey: ${varName} });`));
-  log('');
-  log(dim('  Swift: pass the key through BuoyConfig.licenseKey in your development build.'));
-  log(dim('  Bare React Native does not load .env.local automatically; wire your existing env loader.'));
+  if (varName === 'VITE_BUOY_KEY') {
+    log(cyan('    <FloatingDevTools modules={modules} licenseKey={import.meta.env.VITE_BUOY_KEY} />'));
+    log('');
+    log(dim('  Keep your existing tool modules and providers, then reload the web app.'));
+  } else {
+    log(cyan(`    Buoy.init({ licenseKey: ${varName} });`));
+    log('');
+    log(dim('  Swift: pass the key through BuoyConfig.licenseKey in your development build.'));
+    log(dim('  Bare React Native does not load .env.local automatically; wire your existing env loader.'));
+  }
   log('');
 }
 
@@ -324,10 +318,10 @@ function help() {
 
   ${bold('Notes')}
     Run login from your app directory. Complete browser sign-in to receive
-    your account key. On Expo, a free key goes to .env.development.local so
-    it never ships in a release build; a paid key goes to .env.local. Other
-    projects receive BUOY_KEY in .env.local and must configure their own
-    environment loader and variable mapping.
+    your account key. Expo uses EXPO_PUBLIC_BUOY_KEY; Vite uses VITE_BUOY_KEY.
+    For both, a free key goes to .env.development.local and a paid key goes
+    to .env.local. Other projects receive BUOY_KEY in .env.local and must
+    configure their own environment loader and variable mapping.
     This command does not install tools or verify a Desktop connection.
 
     Docs: ${SITE}/buoy/latest/docs/installation

package/lib/commonjs/browserRegister.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.registerBrowserDevTools = registerBrowserDevTools;
+var ReactDevtools = _interopRequireWildcard(require("react-devtools-core"));
+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); }
+/** Call before importing React DOM so render and element inspectors can see app roots. */
+function registerBrowserDevTools(options = {}) {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return false;
+  const dev = typeof __DEV__ !== 'undefined' ? __DEV__ : process.env.NODE_ENV !== 'production';
+  if (!dev && !options.enableInRelease) return false;
+  const target = window;
+  const previous = target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  // Fast Refresh installs a minimal hook before the application's entry runs.
+  // Preserve its callbacks and renderer IDs when installing the full backend.
+  const refreshHook = previous && previous.supportsFiber && !previous.getFiberRoots && !previous.sub && Object.getOwnPropertyDescriptor(target, '__REACT_DEVTOOLS_GLOBAL_HOOK__')?.configurable;
+  if (refreshHook) delete target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!target.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+    const initialize = ReactDevtools.initialize ?? ReactDevtools.default?.initialize;
+    initialize({
+      appendComponentStack: false,
+      breakOnConsoleErrors: false,
+      showInlineWarningsAndErrors: false,
+      hideConsoleLogsInStrictMode: false
+    });
+    if (refreshHook) {
+      const hook = target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      const inject = hook.inject;
+      const ids = new Map();
+      hook.inject = renderer => {
+        const id = inject(renderer);
+        ids.set(id, previous.inject(renderer));
+        return id;
+      };
+      for (const name of ['onScheduleFiberRoot', 'onCommitFiberRoot', 'onCommitFiberUnmount']) {
+        const current = hook[name];
+        hook[name] = (id, ...args) => {
+          previous[name]?.(ids.get(id) ?? id, ...args);
+          return current?.(id, ...args);
+        };
+      }
+    }
+  }
+  return Boolean(target.__REACT_DEVTOOLS_GLOBAL_HOOK__);
+}
+registerBrowserDevTools();

package/lib/commonjs/browserRegister.server.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.registerBrowserDevTools = registerBrowserDevTools;
+/** The server entry does not load the browser's React DevTools backend. */
+function registerBrowserDevTools(_options = {}) {
+  return false;
+}

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

@@ -8,34 +8,18 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _react = require("react");
 var _AppHostLogic = require("./AppHostLogic.js");
 var _AppIcon = require("./AppIcon");
+var _ToolHost = require("./ToolHost.js");
+var _DevToolsSettingsModalShared = require("./DevToolsSettingsModal.shared.js");
 var _floatingToolsWeb = require("./floatingTools.web.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
- * AppHost.web.tsx — DOM port of AppHost.tsx (React Native).
- *
- * Same state machine (shared `AppHostLogic.ts`), same `@react_buoy_open_apps`
- * persistence key + JSON shape (`{id, minimized}[]`, 500ms debounce), same
- * launch modes and z-order model (base 9000 + stack index).
- *
- * Intentional deviations from the native file (all logged):
- * - No `MinimizedToolsContext`/`MinimizedToolsStack` second store: the
- *   minimized dock derives directly from `openApps` (`minimized === true`),
- *   the same simplification the Flutter port made deliberately
- *   (packages-flutter/buoy_core — see FLUTTER_TOOLS_PORT/MASTER_PLAN.md).
- *   `@react_buoy_minimized_tools` is therefore not written on web.
- * - `BackHandler` (Android hardware back) → `Escape` keydown closes the
- *   top-most open tool.
- * - No `setExpandableWindowControls` / global settings bridge — the web
- *   settings modal has no global-settings tab yet.
- * - `minimizeTargetPosition` is computed from the dock layout below instead
- *   of `MinimizedToolsContext.getNextIconPosition()`.
- *
- * @platform React DOM Web
+ * Browser tool host using the shared open-app state machine and persistence.
+ * Minimized tools derive from openApps. Escape closes the top visible tool;
+ * the minimized stack remains attached to the floating menu.
  */
 
 const AppHostContext = /*#__PURE__*/(0, _react.createContext)(null);
 const STORAGE_KEY_OPEN_APPS = "@react_buoy_open_apps";
-const PERSISTENCE_DELAY = 500;
 
 // Minimized dock geometry — mirrors MinimizedToolsContext.tsx constants.
 const ICON_SIZE = 44;
@@ -57,9 +41,11 @@ const AppHostProvider = ({
 }) => {
   const [openApps, setOpenApps] = (0, _react.useState)([]);
   const [isRestored, setIsRestored] = (0, _react.useState)(false);
-  const persistenceTimeoutRef = (0, _react.useRef)(null);
   const installedAppsRef = (0, _react.useRef)([]);
   const pendingRestoreRef = (0, _react.useRef)(null);
+  const restoredRef = (0, _react.useRef)(false);
+  const storageReadRef = (0, _react.useRef)(false);
+  const registeredRef = (0, _react.useRef)(false);
   const open = (0, _react.useCallback)(def => {
     let resolvedId = "";
     setOpenApps(current => {
@@ -73,8 +59,8 @@ const AppHostProvider = ({
     return resolvedId;
   }, []);
   const tryRestorePending = (0, _react.useCallback)(() => {
-    if (isRestored) return;
-    if (!installedAppsRef.current.length) return;
+    if (restoredRef.current || !storageReadRef.current || !registeredRef.current) return;
+    restoredRef.current = true;
     const pendingApps = pendingRestoreRef.current;
     if (!pendingApps || pendingApps.length === 0) {
       setIsRestored(true);
@@ -97,8 +83,9 @@ const AppHostProvider = ({
           title: appDef.name,
           component: appDef.component,
           props: appDef.props,
+          modal: appDef.modal,
           launchMode: appDef.launchMode || "self-modal",
-          singleton: appDef.singleton,
+          singleton: appDef.singleton ?? true,
           icon: resolvedIcon,
           color: appDef.color,
           minimized
@@ -106,14 +93,16 @@ const AppHostProvider = ({
       }
     });
     setIsRestored(true);
-  }, [isRestored, open]);
+  }, [open]);
 
   // Restore open apps on mount. Handles both the legacy `string[]` shape and
   // the current `{id, minimized}[]` shape — same tolerance as native.
   (0, _react.useEffect)(() => {
+    let cancelled = false;
     const restoreOpenApps = async () => {
       try {
         const saved = await _sharedUi.persistentStorage.getItem(STORAGE_KEY_OPEN_APPS);
+        if (cancelled) return;
         if (saved) {
           const parsed = JSON.parse(saved);
           let savedApps;
@@ -124,46 +113,40 @@ const AppHostProvider = ({
                 minimized: false
               }));
             } else {
-              savedApps = parsed;
+              savedApps = parsed.filter(item => typeof item === "object" && item !== null && typeof item.id === "string");
             }
             if (savedApps.length) {
               pendingRestoreRef.current = savedApps;
-              tryRestorePending();
-              return;
             }
           }
         }
       } catch {
         // Failed to restore open apps - continue with fresh state
       }
-      setIsRestored(true);
+      if (cancelled) return;
+      storageReadRef.current = true;
+      tryRestorePending();
+    };
+    void restoreOpenApps();
+    return () => {
+      cancelled = true;
     };
-    restoreOpenApps();
   }, [tryRestorePending]);
 
-  // Save open apps with debounce
+  // Save discrete open/minimize/close changes before a reload can lose them.
   (0, _react.useEffect)(() => {
     if (!isRestored) return;
-    if (persistenceTimeoutRef.current) {
-      clearTimeout(persistenceTimeoutRef.current);
-    }
-    persistenceTimeoutRef.current = setTimeout(() => {
-      const appStates = openApps.map(app => ({
-        id: app.id,
-        minimized: app.minimized ?? false
-      }));
-      _sharedUi.persistentStorage.setItem(STORAGE_KEY_OPEN_APPS, JSON.stringify(appStates));
-    }, PERSISTENCE_DELAY);
-    return () => {
-      if (persistenceTimeoutRef.current) {
-        clearTimeout(persistenceTimeoutRef.current);
-      }
-    };
+    const appStates = openApps.map(app => ({
+      id: app.id,
+      minimized: app.minimized ?? false
+    }));
+    void _sharedUi.persistentStorage.setItem(STORAGE_KEY_OPEN_APPS, JSON.stringify(appStates));
   }, [openApps, isRestored]);
 
   // Store reference to installed apps for restoration
   const registerApps = (0, _react.useCallback)(apps => {
     installedAppsRef.current = apps;
+    registeredRef.current = true;
     tryRestorePending();
   }, [tryRestorePending]);
   const close = (0, _react.useCallback)(instanceId => {
@@ -174,16 +157,18 @@ const AppHostProvider = ({
     });
   }, []);
   const closeAll = (0, _react.useCallback)(() => setOpenApps([]), []);
-  const minimize = (0, _react.useCallback)(instanceId => {
+  const minimize = (0, _react.useCallback)((instanceId, restoreState) => {
     setOpenApps(s => s.map(app => app.instanceId === instanceId ? {
       ...app,
-      minimized: true
+      minimized: true,
+      restoreState
     } : app));
   }, []);
-  const restore = (0, _react.useCallback)(instanceId => {
+  const restore = (0, _react.useCallback)((instanceId, restoreState) => {
     setOpenApps(s => s.map(app => app.instanceId === instanceId ? {
       ...app,
-      minimized: false
+      minimized: false,
+      restoreState: restoreState ?? app.restoreState
     } : app));
   }, []);
   const isMinimized = (0, _react.useCallback)(instanceId => {
@@ -198,11 +183,13 @@ const AppHostProvider = ({
     if (!hasVisibleApps) return;
     const handler = event => {
       if (event.key !== "Escape") return;
-      close();
+      if (event.defaultPrevented) return;
+      const top = [...openApps].reverse().find(app => app.launchMode !== "toggle-only" && !app.minimized);
+      if (top) close(top.instanceId);
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [hasVisibleApps, close]);
+  }, [hasVisibleApps, close, openApps]);
   const value = (0, _react.useMemo)(() => ({
     openApps,
     isAnyOpen: hasVisibleApps,
@@ -274,20 +261,41 @@ const AppRenderer = ({
   zIndex,
   onClose,
   onMinimize,
-  minimizeTargetPosition
+  minimizeTargetPosition,
+  enableSharedModalDimensions
 }) => {
   const Comp = app.component;
   const isVisible = !app.minimized;
+  const bodyProps = {
+    ...(app.props ?? {}),
+    ...(enableSharedModalDimensions ? {
+      enableSharedModalDimensions: true
+    } : {})
+  };
+  if (app.modal && (!app.launchMode || app.launchMode === "self-modal")) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolHost.ToolModalShell, {
+      app: app,
+      config: app.modal,
+      visible: isVisible,
+      zIndex: zIndex,
+      onClose: onClose,
+      onMinimize: onMinimize,
+      initialModalState: app.restoreState,
+      enableSharedModalDimensions: enableSharedModalDimensions,
+      bodyProps: bodyProps
+    });
+  }
   if (app.launchMode === "self-modal") {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
-      ...(app.props ?? {}),
+      ...bodyProps,
       visible: isVisible,
       onClose: onClose,
       onRequestClose: onClose,
       onMinimize: onMinimize,
       minimizeTargetPosition: minimizeTargetPosition,
       instanceId: app.instanceId,
-      zIndex: zIndex
+      zIndex: zIndex,
+      initialModalState: app.restoreState
     });
   }
   if (app.launchMode === "inline") {
@@ -303,7 +311,7 @@ const AppRenderer = ({
         pointerEvents: "none"
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
-        ...(app.props ?? {}),
+        ...bodyProps,
         onClose: onClose,
         onMinimize: onMinimize,
         minimizeTargetPosition: minimizeTargetPosition,
@@ -322,7 +330,7 @@ const AppRenderer = ({
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: cardStyle,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
-        ...(app.props ?? {}),
+        ...bodyProps,
         onClose: onClose,
         onMinimize: onMinimize,
         minimizeTargetPosition: minimizeTargetPosition,
@@ -344,6 +352,9 @@ const AppOverlay = () => {
     close,
     minimize
   } = useAppHost();
+  const {
+    settings
+  } = (0, _DevToolsSettingsModalShared.useDevToolsSettings)();
   const renderableApps = openApps.filter(app => app.launchMode !== "toggle-only");
   if (renderableApps.length === 0) return null;
   const minimizedCount = renderableApps.filter(app => app.minimized).length;
@@ -356,7 +367,8 @@ const AppOverlay = () => {
       app: app,
       zIndex: BASE_ZINDEX + index,
       onClose: () => close(app.instanceId),
-      onMinimize: () => minimize(app.instanceId),
+      onMinimize: state => minimize(app.instanceId, state),
+      enableSharedModalDimensions: settings.globalSettings?.enableSharedModalDimensions === true,
       minimizeTargetPosition: minimizeTarget
     }, app.instanceId))
   });

package/lib/commonjs/floatingMenu/BrowserToolRuntime.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BrowserToolRuntime = BrowserToolRuntime;
+var _react = require("react");
+var _license = require("@buoy-gg/license");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _externalSyncGate = require("./externalSyncGate.js");
+var _deviceIdentity = require("./deviceIdentity.js");
+var _appSyncAdapter = require("./sync/appSyncAdapter.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const roots = ['ConsoleRoot', 'RouteTracker', 'ReactQueryTracker', 'ReduxAutoInstrument', 'PerfMonitorRoot', 'AutomationResumer', 'ImagesRoot'];
+const overlays = ['DebugBordersStandaloneOverlay', 'HighlightUpdatesOverlay', 'ImageOverlayStandalone', 'PerfMonitorOverlay', 'JsTopHudOverlay', 'ImpersonateOverlay', 'ScenariosOverlay'];
+function BrowserToolRuntime(props) {
+  const modules = (0, _react.useMemo)(() => Object.fromEntries(Object.entries(props.modules).map(([id, module]) => [id.replace(/^@buoy-gg\//, '').replace(/\/web$/, ''), module])), [props.modules]);
+  const query = modules['react-query'];
+  return query?.useReactQuerySyncAdapter ? /*#__PURE__*/(0, _jsxRuntime.jsx)(QueryRuntime, {
+    ...props,
+    modules: modules,
+    query: query
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolRuntime, {
+    ...props,
+    modules: modules
+  });
+}
+function QueryRuntime(props) {
+  const adapter = props.query.useReactQuerySyncAdapter();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolRuntime, {
+    ...props,
+    queryAdapter: adapter
+  });
+}
+function ToolRuntime({
+  modules,
+  apps,
+  requiredEnvVars,
+  externalSync,
+  headless,
+  sentryGetClient,
+  queryAdapter
+}) {
+  const {
+    isPro,
+    tier
+  } = (0, _license.useLicense)();
+  const adapters = (0, _react.useMemo)(() => {
+    const result = {
+      app: _appSyncAdapter.appSyncAdapter
+    };
+    for (const [id, module] of Object.entries(modules)) {
+      for (const [name, adapter] of Object.entries(module)) {
+        if (name.endsWith('SyncAdapter') && adapter && typeof adapter === 'object') result[id] = adapter;
+      }
+    }
+    if (queryAdapter) result.query = queryAdapter;
+    if (modules.env?.createEnvSyncAdapter) result.env = modules.env.createEnvSyncAdapter(requiredEnvVars ?? []);
+    for (const app of apps ?? []) if (app.sync) result[`custom:${app.id}`] = app.sync;
+    return result;
+  }, [modules, apps, requiredEnvVars, queryAdapter]);
+  const ref = (0, _react.useRef)(adapters);
+  ref.current = adapters;
+  (0, _react.useEffect)(() => (0, _sharedUi.registerToolAdapters)(() => ref.current), []);
+  (0, _react.useEffect)(() => {
+    const cleanups = [];
+    const start = fn => {
+      const stop = fn?.();
+      if (typeof stop === 'function') cleanups.push(stop);
+    };
+    start(modules.network?.startNetworkCapture);
+    start(modules.storage?.startBrowserStorageCapture);
+    start(modules.assets?.startBrowserAssetCapture);
+    if (modules.storage?.storageSyncAdapter?.subscribe) start(() => modules.storage.storageSyncAdapter.subscribe(() => {}));
+    if (modules['focus-inspector']?.focusInspectorSyncAdapter?.subscribe) start(() => modules['focus-inspector'].focusInspectorSyncAdapter.subscribe(() => {}));
+    return () => {
+      for (const stop of cleanups.reverse()) stop();
+    };
+  }, [modules]);
+  const sync = modules['external-sync'];
+  const dev = typeof __DEV__ !== 'undefined' ? __DEV__ : process.env.NODE_ENV !== 'production';
+  const connect = (0, _externalSyncGate.shouldMountExternalSync)({
+    isDevelopment: dev,
+    isLicensed: isPro,
+    externalSync,
+    isAvailable: Boolean(sync)
+  });
+  const SentryRoot = modules.sentry?.SentryRoot;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [Object.entries(modules).flatMap(([id, module]) => roots.map(name => {
+      const Root = module[name];
+      return Root ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {}, `${id}:${name}`) : null;
+    })), SentryRoot && /*#__PURE__*/(0, _jsxRuntime.jsx)(SentryRoot, {
+      getClient: sentryGetClient
+    }), Object.entries(modules).flatMap(([id, module]) => overlays.map(name => {
+      const Overlay = module[name];
+      // Simulation indicators remain visible when a remote driver changes app state.
+      return Overlay && (!headless || name === 'ScenariosOverlay' || name === 'ImpersonateOverlay') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {}, `${id}:${name}`) : null;
+    })), connect && /*#__PURE__*/(0, _jsxRuntime.jsx)(BrowserExternalSync, {
+      module: sync,
+      tools: adapters,
+      options: (0, _externalSyncGate.externalSyncOptions)(externalSync),
+      isPro: isPro,
+      tier: tier
+    })]
+  });
+}
+function BrowserExternalSync({
+  module,
+  tools,
+  options,
+  isPro,
+  tier
+}) {
+  const identity = (0, _deviceIdentity.useDeviceIdentity)(options, {
+    appName: typeof document === 'undefined' ? null : document.title || location.hostname,
+    hardwareName: 'Browser',
+    platform: 'web'
+  });
+  const {
+    socket
+  } = module.useExternalSyncSocket({
+    deviceName: identity?.deviceName ?? 'Buoy Browser',
+    socketURL: options?.socketURL ?? module.getDefaultSocketURL(),
+    persistentDeviceId: identity?.deviceId ?? null,
+    platform: 'web',
+    enableLogs: options?.enableLogs
+  });
+  (0, _react.useEffect)(() => {
+    if (!socket) return;
+    const emit = () => {
+      if (socket.connected && _license.LicenseManager.hasAccountAccess()) socket.emit('device-license', {
+        isPro: isPro ? '1' : '0',
+        tier
+      });
+    };
+    emit();
+    socket.on('connect', emit);
+    return () => {
+      socket.off('connect', emit);
+    };
+  }, [socket, isPro, tier]);
+  module.useExternalSync({
+    tools,
+    socket,
+    deviceId: identity?.deviceId ?? null,
+    enableLogs: options?.enableLogs
+  });
+  return null;
+}