@buoy-gg/impersonate 2.1.15 → 3.0.0

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

@@ -52,6 +52,8 @@ function ImpersonateBanner({
     return null;
   }
   const handlePauseResume = async () => {
+    // eslint-disable-next-line no-console
+    console.log("[impersonate] banner pause/resume pressed");
     if (state.isPaused) {
       await _impersonateStore.impersonateStore.resumeImpersonation();
     } else {
@@ -65,6 +67,8 @@ function ImpersonateBanner({
     bottom: offset
   };
   const handleStop = async () => {
+    // eslint-disable-next-line no-console
+    console.log("[impersonate] banner STOP pressed");
     await _impersonateStore.impersonateStore.stopImpersonation();
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImpersonateOverlay = ImpersonateOverlay;
+var _react = _interopRequireDefault(require("react"));
+var _ImpersonateBanner = require("./ImpersonateBanner");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * ImpersonateOverlay
+ *
+ * Auto-rendered by FloatingDevTools (`@buoy-gg/core`) when
+ * `@buoy-gg/impersonate` is installed — the host does NOT need to mount
+ * anything. It renders the floating impersonation banner, which self-gates
+ * on store state (only visible while an impersonation session is active and
+ * `showBanner` is enabled), so it's safe to mount unconditionally.
+ */
+
+function ImpersonateOverlay() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImpersonateBanner.ImpersonateBanner, {
+    position: "top",
+    offset: 50
+  });
+}

package/lib/commonjs/impersonate/utils/impersonateStore.js

@@ -239,10 +239,10 @@ class ImpersonateStore {
     this.asyncStorageRef = asyncStorage;
     try {
       const stored = await asyncStorage.getItem(STORAGE_KEY);
-      console.log("[ImpersonateStore] initializeAsync - stored:", stored);
+      // eslint-disable-next-line no-console
+      console.log(`[impersonate] initializeAsync read STORAGE_KEY=${STORAGE_KEY} stored=${stored ? stored.slice(0, 200) : "null"}`);
       if (stored) {
         const parsed = JSON.parse(stored);
-        console.log("[ImpersonateStore] initializeAsync - parsed dataNukeSettings:", parsed.dataNukeSettings);
         this.state = {
           ...this.state,
           headerKey: parsed.headerKey ?? this.state.headerKey,
@@ -258,7 +258,6 @@ class ImpersonateStore {
           isPaused: parsed.isPaused ?? this.state.isPaused,
           currentUser: parsed.currentUser ?? this.state.currentUser
         };
-        console.log("[ImpersonateStore] initializeAsync - new dataNukeSettings:", this.state.dataNukeSettings);
 
         // If we restored an active session, sync with listener
         if (this.state.isActive && this.state.currentUser) {
@@ -266,8 +265,8 @@ class ImpersonateStore {
         }
         this.notify();
       }
-    } catch (e) {
-      console.log("[ImpersonateStore] initializeAsync error:", e);
+    } catch {
+      // Persisted blob unreadable — fall through with in-memory defaults.
     }
   }
 
@@ -311,34 +310,57 @@ class ImpersonateStore {
     return () => this.listeners.delete(listener);
   };
 
+  // ===========================================================================
+  // REMOTE MIRROR MODE
+  // ===========================================================================
+
+  remoteHandler = null;
+
+  /**
+   * Remote mirror mode (desktop dashboard): while a handler is set, every
+   * mutation forwards (method, params) to the synced device instead of
+   * running locally — header patching, data nuking and persistence all
+   * happen on the device, and the resulting state comes back via
+   * replaceState(). Pass null to restore local behavior.
+   */
+  setRemoteHandler(handler) {
+    this.remoteHandler = handler;
+  }
+
+  /**
+   * Replace the mirrored state from a synced device snapshot. Does not
+   * persist or touch the fetch listener — the device owns both.
+   */
+  replaceState(state) {
+    this.state = state;
+    this.notify();
+  }
+
   // ===========================================================================
   // IMPERSONATION ACTIONS
   // ===========================================================================
 
   /**
-   * Start impersonating a user
+   * Start impersonating a user.
    *
-   * This will:
-   * 1. Execute data nuking based on settings
-   * 2. Update state with new user
-   * 3. Add to history
-   * 4. Sync with impersonateListener
-   * 5. Persist settings
+   * Order matters: we update state + listener + UI BEFORE clearing caches,
+   * so refetches triggered by the cache clear go out with the new user's
+   * impersonation header. Doing it the other way around (nuke first) makes
+   * react-query refetch active queries with the OLD identity, producing
+   * the visual symptom of "I clicked a user and nothing changed."
    */
   async startImpersonation(user) {
-    // Execute data nuking BEFORE switching
-    await this.executeDataNuke();
-
-    // Create history entry with timestamp
+    if (this.remoteHandler) {
+      this.remoteHandler("startImpersonation", {
+        user
+      });
+      return;
+    }
     const historyEntry = {
       user,
       lastUsedAt: new Date().toISOString()
     };
-
-    // Update history (remove duplicate, add to front)
     const newHistory = [historyEntry, ...this.state.history.filter(entry => entry.user.id !== user.id)].slice(0, MAX_HISTORY);
-
-    // Update state
     this.state = {
       ...this.state,
       isActive: true,
@@ -346,50 +368,54 @@ class ImpersonateStore {
       history: newHistory
     };
 
-    // Sync with listener
+    // 1) Point the fetch interceptor at the new user. Any request after this
+    //    line carries the new header.
     this.syncWithListener();
 
-    // Persist
-    await this.persist();
-
-    // Notify subscribers
+    // 2) Tell React subscribers right away so the UI updates without waiting
+    //    on AsyncStorage / data nuke.
     this.notify();
+
+    // 3) Nuke caches — refetches now use the new identity.
+    await this.executeDataNuke();
+
+    // 4) Persist for next launch.
+    await this.persist();
   }
 
   /**
-   * Stop impersonating
+   * Stop impersonating.
    *
-   * This will:
-   * 1. Execute data nuking based on settings
-   * 2. Clear impersonation state
-   * 3. Sync with impersonateListener
+   * Same ordering rationale as startImpersonation: clear state + listener
+   * before nuking caches so subsequent refetches go out without the header.
    */
   async stopImpersonation() {
-    // Execute data nuking
-    await this.executeDataNuke();
-
-    // Update state
+    if (this.remoteHandler) {
+      this.remoteHandler("stopImpersonation");
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.log(`[impersonate] stopImpersonation: isActive ${this.state.isActive} -> false, listeners=${this.listeners.size}`);
     this.state = {
       ...this.state,
       isActive: false,
       isPaused: false,
       currentUser: null
     };
-
-    // Sync with listener
     this.syncWithListener();
-
-    // Persist
-    await this.persist();
-
-    // Notify
     this.notify();
+    await this.executeDataNuke();
+    await this.persist();
   }
 
   /**
    * Pause impersonation (temporarily stop injecting headers)
    */
   async pauseImpersonation() {
+    if (this.remoteHandler) {
+      this.remoteHandler("pauseImpersonation");
+      return;
+    }
     if (!this.state.isActive || this.state.isPaused) return;
     this.state = {
       ...this.state,
@@ -410,6 +436,10 @@ class ImpersonateStore {
    * Resume impersonation (start injecting headers again)
    */
   async resumeImpersonation() {
+    if (this.remoteHandler) {
+      this.remoteHandler("resumeImpersonation");
+      return;
+    }
     if (!this.state.isActive || !this.state.isPaused) return;
     this.state = {
       ...this.state,
@@ -441,8 +471,12 @@ class ImpersonateStore {
    * Update settings (header key, ignore patterns, data nuke settings, show banner)
    */
   async updateSettings(settings) {
-    console.log("[ImpersonateStore] updateSettings called with:", settings);
-    console.log("[ImpersonateStore] Current dataNukeSettings:", this.state.dataNukeSettings);
+    if (this.remoteHandler) {
+      this.remoteHandler("updateSettings", {
+        settings
+      });
+      return;
+    }
     this.state = {
       ...this.state,
       headerKey: settings.headerKey ?? this.state.headerKey,
@@ -453,7 +487,6 @@ class ImpersonateStore {
         ...settings.dataNukeSettings
       } : this.state.dataNukeSettings
     };
-    console.log("[ImpersonateStore] New dataNukeSettings:", this.state.dataNukeSettings);
 
     // Sync header key with listener
     if (settings.headerKey || settings.ignorePatterns) {
@@ -471,6 +504,12 @@ class ImpersonateStore {
    * Remove a user from history
    */
   async removeFromHistory(userId) {
+    if (this.remoteHandler) {
+      this.remoteHandler("removeFromHistory", {
+        userId
+      });
+      return;
+    }
     this.state = {
       ...this.state,
       history: this.state.history.filter(entry => entry.user.id !== userId)
@@ -483,6 +522,10 @@ class ImpersonateStore {
    * Clear all history
    */
   async clearHistory() {
+    if (this.remoteHandler) {
+      this.remoteHandler("clearHistory");
+      return;
+    }
     this.state = {
       ...this.state,
       history: []
@@ -570,19 +613,21 @@ class ImpersonateStore {
       currentUser: this.state.currentUser
     };
     const serialized = JSON.stringify(toStore);
-    console.log("[ImpersonateStore] Persisting dataNukeSettings:", this.state.dataNukeSettings);
     try {
       // Prefer AsyncStorage for React Native
       if (this.asyncStorageRef) {
         await this.asyncStorageRef.setItem(STORAGE_KEY, serialized);
-        console.log("[ImpersonateStore] Persisted to AsyncStorage");
+        // eslint-disable-next-line no-console
+        console.log(`[impersonate] persist -> AsyncStorage isActive=${toStore.isActive} userId=${toStore.currentUser?.id ?? "null"}`);
       } else {
         // Fall back to localStorage (web)
         storage.setItem(STORAGE_KEY, serialized);
-        console.log("[ImpersonateStore] Persisted to localStorage");
+        // eslint-disable-next-line no-console
+        console.log(`[impersonate] persist -> localStorage isActive=${toStore.isActive} userId=${toStore.currentUser?.id ?? "null"}`);
       }
     } catch (e) {
-      console.log("[ImpersonateStore] Persist error:", e);
+      // eslint-disable-next-line no-console
+      console.warn("[impersonate] persist failed", e);
     }
   }
 

package/lib/commonjs/index.js

@@ -27,12 +27,24 @@ Object.defineProperty(exports, "ImpersonateHistoryList", {
     return _ImpersonateHistoryList.ImpersonateHistoryList;
   }
 });
+Object.defineProperty(exports, "ImpersonateIcon", {
+  enumerable: true,
+  get: function () {
+    return _preset.ImpersonateIcon;
+  }
+});
 Object.defineProperty(exports, "ImpersonateModal", {
   enumerable: true,
   get: function () {
     return _ImpersonateModal.ImpersonateModal;
   }
 });
+Object.defineProperty(exports, "ImpersonateOverlay", {
+  enumerable: true,
+  get: function () {
+    return _ImpersonateOverlay.ImpersonateOverlay;
+  }
+});
 Object.defineProperty(exports, "ImpersonateStatusBar", {
   enumerable: true,
   get: function () {
@@ -45,6 +57,12 @@ Object.defineProperty(exports, "UserSearchView", {
     return _UserSearchView.UserSearchView;
   }
 });
+Object.defineProperty(exports, "createImpersonateSyncAdapter", {
+  enumerable: true,
+  get: function () {
+    return _impersonateSyncAdapter.createImpersonateSyncAdapter;
+  }
+});
 Object.defineProperty(exports, "createImpersonateTool", {
   enumerable: true,
   get: function () {
@@ -106,8 +124,10 @@ Object.defineProperty(exports, "useImpersonateHistory", {
   }
 });
 var _preset = require("./preset");
+var _impersonateSyncAdapter = require("./sync/impersonateSyncAdapter");
 var _ImpersonateModal = require("./impersonate/components/ImpersonateModal");
 var _ImpersonateBanner = require("./impersonate/components/ImpersonateBanner");
+var _ImpersonateOverlay = require("./impersonate/components/ImpersonateOverlay");
 var _UserSearchView = require("./impersonate/components/UserSearchView");
 var _DataNukeSettings = require("./impersonate/components/DataNukeSettings");
 var _ImpersonateHistoryList = require("./impersonate/components/ImpersonateHistoryList");

package/lib/commonjs/preset.js

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ImpersonateIcon = ImpersonateIcon;
 exports.createImpersonateTool = createImpersonateTool;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _ImpersonateModal = require("./impersonate/components/ImpersonateModal");
 var _ImpersonateBanner = require("./impersonate/components/ImpersonateBanner");
 var _impersonateStore = require("./impersonate/utils/impersonateStore");
+var _impersonateListener = require("./impersonate/utils/impersonateListener");
 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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Impersonate Tool Preset
  *
@@ -18,9 +20,63 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * No default preset is exported because configuration (onSearchUsers) is required.
  */
 
-// NOTE: The listener is started lazily when the modal opens (via useImpersonate hook)
-// This ensures we patch AFTER @buoy-gg/network has patched fetch, so network
-// can see our injected headers in its request capture.
+// =============================================================================
+// EAGER BOOTSTRAP
+// =============================================================================
+// Patch fetch/XHR and restore persisted state the moment createImpersonateTool
+// runs (typically at module load in the host app). If we waited until the
+// modal mounts (the original lazy design), every request fired during app
+// boot — bridge polls, user-data fetches, etc. — goes out without the
+// impersonation header, even when the user already had impersonation active
+// from a previous session. React Query then caches the real-account response,
+// so even after the listener does eventually patch, no refetch happens.
+//
+// Side effect: any later fetch interceptor (e.g. @buoy-gg/network) installed
+// AFTER us will wrap our wrapper, so its captured init.headers won't show the
+// impersonation header. The wire request still includes it.
+
+let bootstrapStarted = false;
+async function bootstrapImpersonate() {
+  if (bootstrapStarted) return;
+  bootstrapStarted = true;
+
+  // eslint-disable-next-line no-console
+  console.log("[impersonate] bootstrap: start");
+
+  // Patch fetch/XHR synchronously so any request between now and the async
+  // storage load goes through our wrapper. The wrapper is a no-op until
+  // userId is set (which happens once initializeAsync resolves).
+  if (!(0, _impersonateListener.impersonateListener)().isListening) {
+    (0, _impersonateListener.impersonateListener)().startListening();
+  }
+
+  // React Native: require AsyncStorage. require() is more reliable under
+  // Metro than dynamic import(); on web this throws and the store falls
+  // back to localStorage handled synchronously in its constructor.
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require("@react-native-async-storage/async-storage");
+    const AsyncStorage = mod?.default ?? mod;
+    if (!AsyncStorage || typeof AsyncStorage.getItem !== "function") {
+      // eslint-disable-next-line no-console
+      console.warn("[impersonate] bootstrap: AsyncStorage shape unexpected", Object.keys(mod ?? {}));
+      return;
+    }
+    const adapter = {
+      getItem: key => AsyncStorage.getItem(key),
+      setItem: (key, value) => AsyncStorage.setItem(key, value)
+    };
+    _impersonateStore.impersonateStore.setAsyncStorage(adapter);
+    // eslint-disable-next-line no-console
+    console.log("[impersonate] bootstrap: AsyncStorage adapter installed");
+    await _impersonateStore.impersonateStore.initializeAsync(adapter);
+    // eslint-disable-next-line no-console
+    console.log("[impersonate] bootstrap: initializeAsync done");
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn("[impersonate] bootstrap: failed", e);
+  }
+}
 
 // =============================================================================
 // ICON COMPONENT
@@ -53,43 +109,6 @@ function ImpersonateIcon({
 // WRAPPER COMPONENT
 // =============================================================================
 
-/**
- * Wrapper component that renders both the modal and the auto-banner.
- * The banner handles its own visibility based on store state (isActive + showBanner).
- * Clicking the banner opens the modal.
- */
-function ImpersonateToolWrapper(props) {
-  const [forceOpen, setForceOpen] = (0, _react.useState)(false);
-
-  // Reset force state when parent closes the modal
-  (0, _react.useEffect)(() => {
-    if (!props.visible) {
-      setForceOpen(false);
-    }
-  }, [props.visible]);
-  const handleBannerPress = () => {
-    setForceOpen(true);
-  };
-  const handleClose = () => {
-    setForceOpen(false);
-    // Only notify parent if they had the modal open
-    if (props.visible) {
-      props.onClose();
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImpersonateModal.ImpersonateModal, {
-      ...props,
-      visible: props.visible || forceOpen,
-      onClose: handleClose
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImpersonateBanner.ImpersonateBanner, {
-      position: "top",
-      offset: 50,
-      onPress: handleBannerPress
-    })]
-  });
-}
-
 // =============================================================================
 // FACTORY FUNCTION
 // =============================================================================
@@ -132,8 +151,10 @@ function ImpersonateToolWrapper(props) {
  *   showSettingsTab: true,
  * });
  *
- * // In your app - banner is automatic, no extra setup needed!
+ * // In your app — mount the banner globally (outside FloatingDevTools)
+ * // so it survives reloads and stays visible after the modal is closed.
  * <FloatingDevTools apps={[impersonateTool]} />
+ * <ImpersonateBanner position="top" offset={50} />
  * ```
  */
 function createImpersonateTool(config) {
@@ -155,6 +176,10 @@ function createImpersonateTool(config) {
     _impersonateStore.impersonateStore.setDeveloperDefaults(defaults);
   }
 
+  // Patch fetch and restore persisted impersonation state up-front. Fire and
+  // forget — bootstrapImpersonate guards itself against double-invocation.
+  void bootstrapImpersonate();
+
   // Create the tool configuration object
   const tool = {
     id,
@@ -167,7 +192,7 @@ function createImpersonateTool(config) {
       size: size,
       color: "#F59E0B"
     }),
-    component: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(ImpersonateToolWrapper, {
+    component: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImpersonateModal.ImpersonateModal, {
       ...props,
       onSearchUsers: onSearchUsers,
       onClearReactQuery: onClearReactQuery,

package/lib/commonjs/sync/impersonateSyncAdapter.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createImpersonateSyncAdapter = createImpersonateSyncAdapter;
+var _impersonateStore = require("../impersonate/utils/impersonateStore");
+/**
+ * Create a sync adapter for the impersonate tool, consumed by
+ * @buoy-gg/external-sync's `useExternalSync` (structurally matches its
+ * ToolSyncAdapter interface so this package doesn't need a dependency on it).
+ *
+ * The dashboard mirrors the impersonation state and forwards every mutation
+ * back as an action — header patching, data nuking and persistence all run
+ * on the device, so impersonating from the desktop behaves exactly like
+ * tapping the modal on the phone.
+ */
+function createImpersonateSyncAdapter({
+  onSearchUsers
+}) {
+  return {
+    version: 1,
+    getSnapshot: () => _impersonateStore.impersonateStore.getState(),
+    subscribe: onChange => _impersonateStore.impersonateStore.subscribe(onChange),
+    actions: {
+      searchUsers: params => onSearchUsers(params.query),
+      startImpersonation: params => _impersonateStore.impersonateStore.startImpersonation(params.user),
+      stopImpersonation: () => _impersonateStore.impersonateStore.stopImpersonation(),
+      pauseImpersonation: () => _impersonateStore.impersonateStore.pauseImpersonation(),
+      resumeImpersonation: () => _impersonateStore.impersonateStore.resumeImpersonation(),
+      updateSettings: params => _impersonateStore.impersonateStore.updateSettings(params.settings),
+      removeFromHistory: params => _impersonateStore.impersonateStore.removeFromHistory(params.userId),
+      clearHistory: () => _impersonateStore.impersonateStore.clearHistory()
+    }
+  };
+}

package/lib/module/impersonate/components/ImpersonateBanner.js

@@ -46,6 +46,8 @@ export function ImpersonateBanner({
     return null;
   }
   const handlePauseResume = async () => {
+    // eslint-disable-next-line no-console
+    console.log("[impersonate] banner pause/resume pressed");
     if (state.isPaused) {
       await impersonateStore.resumeImpersonation();
     } else {
@@ -59,6 +61,8 @@ export function ImpersonateBanner({
     bottom: offset
   };
   const handleStop = async () => {
+    // eslint-disable-next-line no-console
+    console.log("[impersonate] banner STOP pressed");
     await impersonateStore.stopImpersonation();
   };
   return /*#__PURE__*/_jsx(View, {

package/lib/module/impersonate/components/ImpersonateOverlay.js

@@ -0,0 +1,21 @@
+"use strict";
+
+/**
+ * ImpersonateOverlay
+ *
+ * Auto-rendered by FloatingDevTools (`@buoy-gg/core`) when
+ * `@buoy-gg/impersonate` is installed — the host does NOT need to mount
+ * anything. It renders the floating impersonation banner, which self-gates
+ * on store state (only visible while an impersonation session is active and
+ * `showBanner` is enabled), so it's safe to mount unconditionally.
+ */
+
+import React from "react";
+import { ImpersonateBanner } from "./ImpersonateBanner";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ImpersonateOverlay() {
+  return /*#__PURE__*/_jsx(ImpersonateBanner, {
+    position: "top",
+    offset: 50
+  });
+}

package/lib/module/impersonate/utils/impersonateStore.js

@@ -236,10 +236,10 @@ class ImpersonateStore {
     this.asyncStorageRef = asyncStorage;
     try {
       const stored = await asyncStorage.getItem(STORAGE_KEY);
-      console.log("[ImpersonateStore] initializeAsync - stored:", stored);
+      // eslint-disable-next-line no-console
+      console.log(`[impersonate] initializeAsync read STORAGE_KEY=${STORAGE_KEY} stored=${stored ? stored.slice(0, 200) : "null"}`);
       if (stored) {
         const parsed = JSON.parse(stored);
-        console.log("[ImpersonateStore] initializeAsync - parsed dataNukeSettings:", parsed.dataNukeSettings);
         this.state = {
           ...this.state,
           headerKey: parsed.headerKey ?? this.state.headerKey,
@@ -255,7 +255,6 @@ class ImpersonateStore {
           isPaused: parsed.isPaused ?? this.state.isPaused,
           currentUser: parsed.currentUser ?? this.state.currentUser
         };
-        console.log("[ImpersonateStore] initializeAsync - new dataNukeSettings:", this.state.dataNukeSettings);
 
         // If we restored an active session, sync with listener
         if (this.state.isActive && this.state.currentUser) {
@@ -263,8 +262,8 @@ class ImpersonateStore {
         }
         this.notify();
       }
-    } catch (e) {
-      console.log("[ImpersonateStore] initializeAsync error:", e);
+    } catch {
+      // Persisted blob unreadable — fall through with in-memory defaults.
     }
   }
 
@@ -308,34 +307,57 @@ class ImpersonateStore {
     return () => this.listeners.delete(listener);
   };
 
+  // ===========================================================================
+  // REMOTE MIRROR MODE
+  // ===========================================================================
+
+  remoteHandler = null;
+
+  /**
+   * Remote mirror mode (desktop dashboard): while a handler is set, every
+   * mutation forwards (method, params) to the synced device instead of
+   * running locally — header patching, data nuking and persistence all
+   * happen on the device, and the resulting state comes back via
+   * replaceState(). Pass null to restore local behavior.
+   */
+  setRemoteHandler(handler) {
+    this.remoteHandler = handler;
+  }
+
+  /**
+   * Replace the mirrored state from a synced device snapshot. Does not
+   * persist or touch the fetch listener — the device owns both.
+   */
+  replaceState(state) {
+    this.state = state;
+    this.notify();
+  }
+
   // ===========================================================================
   // IMPERSONATION ACTIONS
   // ===========================================================================
 
   /**
-   * Start impersonating a user
+   * Start impersonating a user.
    *
-   * This will:
-   * 1. Execute data nuking based on settings
-   * 2. Update state with new user
-   * 3. Add to history
-   * 4. Sync with impersonateListener
-   * 5. Persist settings
+   * Order matters: we update state + listener + UI BEFORE clearing caches,
+   * so refetches triggered by the cache clear go out with the new user's
+   * impersonation header. Doing it the other way around (nuke first) makes
+   * react-query refetch active queries with the OLD identity, producing
+   * the visual symptom of "I clicked a user and nothing changed."
    */
   async startImpersonation(user) {
-    // Execute data nuking BEFORE switching
-    await this.executeDataNuke();
-
-    // Create history entry with timestamp
+    if (this.remoteHandler) {
+      this.remoteHandler("startImpersonation", {
+        user
+      });
+      return;
+    }
     const historyEntry = {
       user,
       lastUsedAt: new Date().toISOString()
     };
-
-    // Update history (remove duplicate, add to front)
     const newHistory = [historyEntry, ...this.state.history.filter(entry => entry.user.id !== user.id)].slice(0, MAX_HISTORY);
-
-    // Update state
     this.state = {
       ...this.state,
       isActive: true,
@@ -343,50 +365,54 @@ class ImpersonateStore {
       history: newHistory
     };
 
-    // Sync with listener
+    // 1) Point the fetch interceptor at the new user. Any request after this
+    //    line carries the new header.
     this.syncWithListener();
 
-    // Persist
-    await this.persist();
-
-    // Notify subscribers
+    // 2) Tell React subscribers right away so the UI updates without waiting
+    //    on AsyncStorage / data nuke.
     this.notify();
+
+    // 3) Nuke caches — refetches now use the new identity.
+    await this.executeDataNuke();
+
+    // 4) Persist for next launch.
+    await this.persist();
   }
 
   /**
-   * Stop impersonating
+   * Stop impersonating.
    *
-   * This will:
-   * 1. Execute data nuking based on settings
-   * 2. Clear impersonation state
-   * 3. Sync with impersonateListener
+   * Same ordering rationale as startImpersonation: clear state + listener
+   * before nuking caches so subsequent refetches go out without the header.
    */
   async stopImpersonation() {
-    // Execute data nuking
-    await this.executeDataNuke();
-
-    // Update state
+    if (this.remoteHandler) {
+      this.remoteHandler("stopImpersonation");
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.log(`[impersonate] stopImpersonation: isActive ${this.state.isActive} -> false, listeners=${this.listeners.size}`);
     this.state = {
       ...this.state,
       isActive: false,
       isPaused: false,
       currentUser: null
     };
-
-    // Sync with listener
     this.syncWithListener();
-
-    // Persist
-    await this.persist();
-
-    // Notify
     this.notify();
+    await this.executeDataNuke();
+    await this.persist();
   }
 
   /**
    * Pause impersonation (temporarily stop injecting headers)
    */
   async pauseImpersonation() {
+    if (this.remoteHandler) {
+      this.remoteHandler("pauseImpersonation");
+      return;
+    }
     if (!this.state.isActive || this.state.isPaused) return;
     this.state = {
       ...this.state,
@@ -407,6 +433,10 @@ class ImpersonateStore {
    * Resume impersonation (start injecting headers again)
    */
   async resumeImpersonation() {
+    if (this.remoteHandler) {
+      this.remoteHandler("resumeImpersonation");
+      return;
+    }
     if (!this.state.isActive || !this.state.isPaused) return;
     this.state = {
       ...this.state,
@@ -438,8 +468,12 @@ class ImpersonateStore {
    * Update settings (header key, ignore patterns, data nuke settings, show banner)
    */
   async updateSettings(settings) {
-    console.log("[ImpersonateStore] updateSettings called with:", settings);
-    console.log("[ImpersonateStore] Current dataNukeSettings:", this.state.dataNukeSettings);
+    if (this.remoteHandler) {
+      this.remoteHandler("updateSettings", {
+        settings
+      });
+      return;
+    }
     this.state = {
       ...this.state,
       headerKey: settings.headerKey ?? this.state.headerKey,
@@ -450,7 +484,6 @@ class ImpersonateStore {
         ...settings.dataNukeSettings
       } : this.state.dataNukeSettings
     };
-    console.log("[ImpersonateStore] New dataNukeSettings:", this.state.dataNukeSettings);
 
     // Sync header key with listener
     if (settings.headerKey || settings.ignorePatterns) {
@@ -468,6 +501,12 @@ class ImpersonateStore {
    * Remove a user from history
    */
   async removeFromHistory(userId) {
+    if (this.remoteHandler) {
+      this.remoteHandler("removeFromHistory", {
+        userId
+      });
+      return;
+    }
     this.state = {
       ...this.state,
       history: this.state.history.filter(entry => entry.user.id !== userId)
@@ -480,6 +519,10 @@ class ImpersonateStore {
    * Clear all history
    */
   async clearHistory() {
+    if (this.remoteHandler) {
+      this.remoteHandler("clearHistory");
+      return;
+    }
     this.state = {
       ...this.state,
       history: []
@@ -567,19 +610,21 @@ class ImpersonateStore {
       currentUser: this.state.currentUser
     };
     const serialized = JSON.stringify(toStore);
-    console.log("[ImpersonateStore] Persisting dataNukeSettings:", this.state.dataNukeSettings);
     try {
       // Prefer AsyncStorage for React Native
       if (this.asyncStorageRef) {
         await this.asyncStorageRef.setItem(STORAGE_KEY, serialized);
-        console.log("[ImpersonateStore] Persisted to AsyncStorage");
+        // eslint-disable-next-line no-console
+        console.log(`[impersonate] persist -> AsyncStorage isActive=${toStore.isActive} userId=${toStore.currentUser?.id ?? "null"}`);
       } else {
         // Fall back to localStorage (web)
         storage.setItem(STORAGE_KEY, serialized);
-        console.log("[ImpersonateStore] Persisted to localStorage");
+        // eslint-disable-next-line no-console
+        console.log(`[impersonate] persist -> localStorage isActive=${toStore.isActive} userId=${toStore.currentUser?.id ?? "null"}`);
       }
     } catch (e) {
-      console.log("[ImpersonateStore] Persist error:", e);
+      // eslint-disable-next-line no-console
+      console.warn("[impersonate] persist failed", e);
     }
   }
 

package/lib/module/index.js

@@ -26,7 +26,13 @@
 // FACTORY (Primary entry point)
 // =============================================================================
 
-export { createImpersonateTool } from "./preset";
+export { createImpersonateTool, ImpersonateIcon } from "./preset";
+
+// =============================================================================
+// EXTERNAL SYNC (Adapter for @buoy-gg/external-sync's useExternalSync)
+// =============================================================================
+
+export { createImpersonateSyncAdapter } from "./sync/impersonateSyncAdapter";
 
 // =============================================================================
 // COMPONENTS (For custom UI implementations)
@@ -34,6 +40,12 @@ export { createImpersonateTool } from "./preset";
 
 export { ImpersonateModal } from "./impersonate/components/ImpersonateModal";
 export { ImpersonateBanner, ImpersonateBannerMinimal } from "./impersonate/components/ImpersonateBanner";
+/**
+ * Auto-rendered by FloatingDevTools when this package is installed — the
+ * host does not need to mount it. Renders the floating impersonation
+ * banner, which is only visible while an impersonation session is active.
+ */
+export { ImpersonateOverlay } from "./impersonate/components/ImpersonateOverlay";
 export { UserSearchView } from "./impersonate/components/UserSearchView";
 export { DataNukeSettings as DataNukeSettingsComponent } from "./impersonate/components/DataNukeSettings";
 export { ImpersonateHistoryList } from "./impersonate/components/ImpersonateHistoryList";

package/lib/module/preset.js

@@ -7,24 +7,79 @@
  * No default preset is exported because configuration (onSearchUsers) is required.
  */
 
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { View, Text, StyleSheet } from "react-native";
 import { ImpersonateModal } from "./impersonate/components/ImpersonateModal";
 import { ImpersonateBanner } from "./impersonate/components/ImpersonateBanner";
 import { impersonateStore } from "./impersonate/utils/impersonateStore";
+import { impersonateListener } from "./impersonate/utils/impersonateListener";
+import { jsx as _jsx } from "react/jsx-runtime";
+// =============================================================================
+// EAGER BOOTSTRAP
+// =============================================================================
+// Patch fetch/XHR and restore persisted state the moment createImpersonateTool
+// runs (typically at module load in the host app). If we waited until the
+// modal mounts (the original lazy design), every request fired during app
+// boot — bridge polls, user-data fetches, etc. — goes out without the
+// impersonation header, even when the user already had impersonation active
+// from a previous session. React Query then caches the real-account response,
+// so even after the listener does eventually patch, no refetch happens.
+//
+// Side effect: any later fetch interceptor (e.g. @buoy-gg/network) installed
+// AFTER us will wrap our wrapper, so its captured init.headers won't show the
+// impersonation header. The wire request still includes it.
+
+let bootstrapStarted = false;
+async function bootstrapImpersonate() {
+  if (bootstrapStarted) return;
+  bootstrapStarted = true;
+
+  // eslint-disable-next-line no-console
+  console.log("[impersonate] bootstrap: start");
+
+  // Patch fetch/XHR synchronously so any request between now and the async
+  // storage load goes through our wrapper. The wrapper is a no-op until
+  // userId is set (which happens once initializeAsync resolves).
+  if (!impersonateListener().isListening) {
+    impersonateListener().startListening();
+  }
 
-// NOTE: The listener is started lazily when the modal opens (via useImpersonate hook)
-// This ensures we patch AFTER @buoy-gg/network has patched fetch, so network
-// can see our injected headers in its request capture.
+  // React Native: require AsyncStorage. require() is more reliable under
+  // Metro than dynamic import(); on web this throws and the store falls
+  // back to localStorage handled synchronously in its constructor.
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require("@react-native-async-storage/async-storage");
+    const AsyncStorage = mod?.default ?? mod;
+    if (!AsyncStorage || typeof AsyncStorage.getItem !== "function") {
+      // eslint-disable-next-line no-console
+      console.warn("[impersonate] bootstrap: AsyncStorage shape unexpected", Object.keys(mod ?? {}));
+      return;
+    }
+    const adapter = {
+      getItem: key => AsyncStorage.getItem(key),
+      setItem: (key, value) => AsyncStorage.setItem(key, value)
+    };
+    impersonateStore.setAsyncStorage(adapter);
+    // eslint-disable-next-line no-console
+    console.log("[impersonate] bootstrap: AsyncStorage adapter installed");
+    await impersonateStore.initializeAsync(adapter);
+    // eslint-disable-next-line no-console
+    console.log("[impersonate] bootstrap: initializeAsync done");
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn("[impersonate] bootstrap: failed", e);
+  }
+}
 
 // =============================================================================
 // ICON COMPONENT
 // =============================================================================
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+
 /**
  * Impersonate tool icon - a mask/person symbol
  */
-function ImpersonateIcon({
+export function ImpersonateIcon({
   size,
   color = "#F59E0B"
 }) {
@@ -48,43 +103,6 @@ function ImpersonateIcon({
 // WRAPPER COMPONENT
 // =============================================================================
 
-/**
- * Wrapper component that renders both the modal and the auto-banner.
- * The banner handles its own visibility based on store state (isActive + showBanner).
- * Clicking the banner opens the modal.
- */
-function ImpersonateToolWrapper(props) {
-  const [forceOpen, setForceOpen] = useState(false);
-
-  // Reset force state when parent closes the modal
-  useEffect(() => {
-    if (!props.visible) {
-      setForceOpen(false);
-    }
-  }, [props.visible]);
-  const handleBannerPress = () => {
-    setForceOpen(true);
-  };
-  const handleClose = () => {
-    setForceOpen(false);
-    // Only notify parent if they had the modal open
-    if (props.visible) {
-      props.onClose();
-    }
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ImpersonateModal, {
-      ...props,
-      visible: props.visible || forceOpen,
-      onClose: handleClose
-    }), /*#__PURE__*/_jsx(ImpersonateBanner, {
-      position: "top",
-      offset: 50,
-      onPress: handleBannerPress
-    })]
-  });
-}
-
 // =============================================================================
 // FACTORY FUNCTION
 // =============================================================================
@@ -127,8 +145,10 @@ function ImpersonateToolWrapper(props) {
  *   showSettingsTab: true,
  * });
  *
- * // In your app - banner is automatic, no extra setup needed!
+ * // In your app — mount the banner globally (outside FloatingDevTools)
+ * // so it survives reloads and stays visible after the modal is closed.
  * <FloatingDevTools apps={[impersonateTool]} />
+ * <ImpersonateBanner position="top" offset={50} />
  * ```
  */
 export function createImpersonateTool(config) {
@@ -150,6 +170,10 @@ export function createImpersonateTool(config) {
     impersonateStore.setDeveloperDefaults(defaults);
   }
 
+  // Patch fetch and restore persisted impersonation state up-front. Fire and
+  // forget — bootstrapImpersonate guards itself against double-invocation.
+  void bootstrapImpersonate();
+
   // Create the tool configuration object
   const tool = {
     id,
@@ -162,7 +186,7 @@ export function createImpersonateTool(config) {
       size: size,
       color: "#F59E0B"
     }),
-    component: props => /*#__PURE__*/_jsx(ImpersonateToolWrapper, {
+    component: props => /*#__PURE__*/_jsx(ImpersonateModal, {
       ...props,
       onSearchUsers: onSearchUsers,
       onClearReactQuery: onClearReactQuery,

package/lib/module/sync/impersonateSyncAdapter.js

@@ -0,0 +1,32 @@
+"use strict";
+
+import { impersonateStore } from "../impersonate/utils/impersonateStore";
+/**
+ * Create a sync adapter for the impersonate tool, consumed by
+ * @buoy-gg/external-sync's `useExternalSync` (structurally matches its
+ * ToolSyncAdapter interface so this package doesn't need a dependency on it).
+ *
+ * The dashboard mirrors the impersonation state and forwards every mutation
+ * back as an action — header patching, data nuking and persistence all run
+ * on the device, so impersonating from the desktop behaves exactly like
+ * tapping the modal on the phone.
+ */
+export function createImpersonateSyncAdapter({
+  onSearchUsers
+}) {
+  return {
+    version: 1,
+    getSnapshot: () => impersonateStore.getState(),
+    subscribe: onChange => impersonateStore.subscribe(onChange),
+    actions: {
+      searchUsers: params => onSearchUsers(params.query),
+      startImpersonation: params => impersonateStore.startImpersonation(params.user),
+      stopImpersonation: () => impersonateStore.stopImpersonation(),
+      pauseImpersonation: () => impersonateStore.pauseImpersonation(),
+      resumeImpersonation: () => impersonateStore.resumeImpersonation(),
+      updateSettings: params => impersonateStore.updateSettings(params.settings),
+      removeFromHistory: params => impersonateStore.removeFromHistory(params.userId),
+      clearHistory: () => impersonateStore.clearHistory()
+    }
+  };
+}

package/lib/typescript/impersonate/components/ImpersonateBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImpersonateBanner.d.ts","sourceRoot":"","sources":["../../../../src/impersonate/components/ImpersonateBanner.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAUpD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEvD,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;IACjE,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,MAAW,GACZ,EAAE,mBAAmB,4BA4ErB;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,GACR,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,4BAqBzC"}
+{"version":3,"file":"ImpersonateBanner.d.ts","sourceRoot":"","sources":["../../../../src/impersonate/components/ImpersonateBanner.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAUpD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEvD,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;IACjE,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,MAAW,GACZ,EAAE,mBAAmB,4BAgFrB;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,GACR,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,4BAqBzC"}

package/lib/typescript/impersonate/components/ImpersonateOverlay.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ImpersonateOverlay
+ *
+ * Auto-rendered by FloatingDevTools (`@buoy-gg/core`) when
+ * `@buoy-gg/impersonate` is installed — the host does NOT need to mount
+ * anything. It renders the floating impersonation banner, which self-gates
+ * on store state (only visible while an impersonation session is active and
+ * `showBanner` is enabled), so it's safe to mount unconditionally.
+ */
+import React from "react";
+export declare function ImpersonateOverlay(): React.JSX.Element;
+//# sourceMappingURL=ImpersonateOverlay.d.ts.map

package/lib/typescript/impersonate/components/ImpersonateOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImpersonateOverlay.d.ts","sourceRoot":"","sources":["../../../../src/impersonate/components/ImpersonateOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,kBAAkB,sBAEjC"}

package/lib/typescript/impersonate/utils/impersonateStore.d.ts

@@ -83,24 +83,35 @@ declare class ImpersonateStore {
      * Returns unsubscribe function
      */
     subscribe: (listener: StateListener) => (() => void);
+    private remoteHandler;
     /**
-     * Start impersonating a user
+     * Remote mirror mode (desktop dashboard): while a handler is set, every
+     * mutation forwards (method, params) to the synced device instead of
+     * running locally — header patching, data nuking and persistence all
+     * happen on the device, and the resulting state comes back via
+     * replaceState(). Pass null to restore local behavior.
+     */
+    setRemoteHandler(handler: ((method: string, params?: unknown) => void) | null): void;
+    /**
+     * Replace the mirrored state from a synced device snapshot. Does not
+     * persist or touch the fetch listener — the device owns both.
+     */
+    replaceState(state: ImpersonationState): void;
+    /**
+     * Start impersonating a user.
      *
-     * This will:
-     * 1. Execute data nuking based on settings
-     * 2. Update state with new user
-     * 3. Add to history
-     * 4. Sync with impersonateListener
-     * 5. Persist settings
+     * Order matters: we update state + listener + UI BEFORE clearing caches,
+     * so refetches triggered by the cache clear go out with the new user's
+     * impersonation header. Doing it the other way around (nuke first) makes
+     * react-query refetch active queries with the OLD identity, producing
+     * the visual symptom of "I clicked a user and nothing changed."
      */
     startImpersonation(user: User): Promise<void>;
     /**
-     * Stop impersonating
+     * Stop impersonating.
      *
-     * This will:
-     * 1. Execute data nuking based on settings
-     * 2. Clear impersonation state
-     * 3. Sync with impersonateListener
+     * Same ordering rationale as startImpersonation: clear state + listener
+     * before nuking caches so subsequent refetches go out without the header.
      */
     stopImpersonation(): Promise<void>;
     /**

package/lib/typescript/impersonate/utils/impersonateStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"impersonateStore.d.ts","sourceRoot":"","sources":["../../../../src/impersonate/utils/impersonateStore.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"impersonateStore.d.ts","sourceRoot":"","sources":["../../../../src/impersonate/utils/impersonateStore.ts"],"names":[],"mappings":"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"}

package/lib/typescript/index.d.ts

@@ -19,9 +19,16 @@
  * <FloatingDevTools apps={[impersonateTool]} />
  * ```
  */
-export { createImpersonateTool } from "./preset";
+export { createImpersonateTool, ImpersonateIcon } from "./preset";
+export { createImpersonateSyncAdapter } from "./sync/impersonateSyncAdapter";
 export { ImpersonateModal } from "./impersonate/components/ImpersonateModal";
 export { ImpersonateBanner, ImpersonateBannerMinimal, } from "./impersonate/components/ImpersonateBanner";
+/**
+ * Auto-rendered by FloatingDevTools when this package is installed — the
+ * host does not need to mount it. Renders the floating impersonation
+ * banner, which is only visible while an impersonation session is active.
+ */
+export { ImpersonateOverlay } from "./impersonate/components/ImpersonateOverlay";
 export { UserSearchView } from "./impersonate/components/UserSearchView";
 export { DataNukeSettings as DataNukeSettingsComponent } from "./impersonate/components/DataNukeSettings";
 export { ImpersonateHistoryList } from "./impersonate/components/ImpersonateHistoryList";

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAMH,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAMjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EACL,iBAAiB,EACjB,wBAAwB,GACzB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,gBAAgB,IAAI,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAC1G,OAAO,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AAMrF,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,YAAY,EACV,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,YAAY,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAC;AAM7F,YAAY,EACV,IAAI,EACJ,gBAAgB,IAAI,oBAAoB,EACxC,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AAM7B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACvB,oBAAoB,EACpB,eAAe,EACf,qBAAqB,GACtB,MAAM,yCAAyC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAMH,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAMlE,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAC;AAM7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EACL,iBAAiB,EACjB,wBAAwB,GACzB,MAAM,4CAA4C,CAAC;AACpD;;;;GAIG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,gBAAgB,IAAI,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAC1G,OAAO,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AAMrF,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,YAAY,EACV,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,YAAY,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAC;AAM7F,YAAY,EACV,IAAI,EACJ,gBAAgB,IAAI,oBAAoB,EACxC,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AAM7B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACvB,oBAAoB,EACpB,eAAe,EACf,qBAAqB,GACtB,MAAM,yCAAyC,CAAC"}

package/lib/typescript/preset.d.ts

@@ -7,6 +7,14 @@
 import React from "react";
 import { ImpersonateBanner } from "./impersonate/components/ImpersonateBanner";
 import type { ImpersonateToolConfig } from "./impersonate/types";
+interface IconProps {
+    size: number;
+    color?: string;
+}
+/**
+ * Impersonate tool icon - a mask/person symbol
+ */
+export declare function ImpersonateIcon({ size, color }: IconProps): React.JSX.Element;
 /**
  * Create an impersonate tool with custom configuration
  *
@@ -45,8 +53,10 @@ import type { ImpersonateToolConfig } from "./impersonate/types";
  *   showSettingsTab: true,
  * });
  *
- * // In your app - banner is automatic, no extra setup needed!
+ * // In your app — mount the banner globally (outside FloatingDevTools)
+ * // so it survives reloads and stays visible after the modal is closed.
  * <FloatingDevTools apps={[impersonateTool]} />
+ * <ImpersonateBanner position="top" offset={50} />
  * ```
  */
 export declare function createImpersonateTool(config: ImpersonateToolConfig): {
@@ -68,4 +78,5 @@ export declare function createImpersonateTool(config: ImpersonateToolConfig): {
     };
     Banner: typeof ImpersonateBanner;
 };
+export {};
 //# sourceMappingURL=preset.d.ts.map

package/lib/typescript/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAE/E,OAAO,KAAK,EAAE,qBAAqB,EAAyB,MAAM,qBAAqB,CAAC;AA+FxF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,qBAAqB;;;;;qBAyB9C;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;uBAGd;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;QAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE;;;;;EAmB3H"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAG/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAyEjE,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,KAAiB,EAAE,EAAE,SAAS,qBAmBrE;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,qBAAqB;;;;;qBA6B9C;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;uBAGd;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;QAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE;;;;;EAmB3H"}

package/lib/typescript/sync/impersonateSyncAdapter.d.ts

@@ -0,0 +1,35 @@
+import type { User, ImpersonationState } from "../impersonate/types";
+interface CreateImpersonateSyncAdapterOptions {
+    /**
+     * Same user-search callback you pass to the ImpersonateModal — the
+     * dashboard's search box proxies here.
+     */
+    onSearchUsers: (query: string) => Promise<User[]>;
+}
+/**
+ * Create a sync adapter for the impersonate tool, consumed by
+ * @buoy-gg/external-sync's `useExternalSync` (structurally matches its
+ * ToolSyncAdapter interface so this package doesn't need a dependency on it).
+ *
+ * The dashboard mirrors the impersonation state and forwards every mutation
+ * back as an action — header patching, data nuking and persistence all run
+ * on the device, so impersonating from the desktop behaves exactly like
+ * tapping the modal on the phone.
+ */
+export declare function createImpersonateSyncAdapter({ onSearchUsers, }: CreateImpersonateSyncAdapterOptions): {
+    version: number;
+    getSnapshot: () => ImpersonationState;
+    subscribe: (onChange: () => void) => () => void;
+    actions: {
+        searchUsers: (params: unknown) => Promise<User[]>;
+        startImpersonation: (params: unknown) => Promise<void>;
+        stopImpersonation: () => Promise<void>;
+        pauseImpersonation: () => Promise<void>;
+        resumeImpersonation: () => Promise<void>;
+        updateSettings: (params: unknown) => Promise<void>;
+        removeFromHistory: (params: unknown) => Promise<void>;
+        clearHistory: () => Promise<void>;
+    };
+};
+export {};
+//# sourceMappingURL=impersonateSyncAdapter.d.ts.map

package/lib/typescript/sync/impersonateSyncAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"impersonateSyncAdapter.d.ts","sourceRoot":"","sources":["../../../src/sync/impersonateSyncAdapter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAErE,UAAU,mCAAmC;IAC3C;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;CACnD;AAED;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,aAAa,GACd,EAAE,mCAAmC;;uBAGjB,kBAAkB;0BACb,MAAM,IAAI;;8BAER,OAAO;qCAEA,OAAO;;;;iCAKX,OAAO;oCAKJ,OAAO;;;EAOxC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/impersonate",
-  "version": "2.1.15",
+  "version": "3.0.0",
   "description": "User impersonation tool for Buoy DevTools - inject custom headers for admin testing",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "2.1.15"
+    "@buoy-gg/shared-ui": "3.0.0"
   },
   "peerDependencies": {
     "react": "*",