@buoy-gg/impersonate 7.0.41 → 7.0.43

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

@@ -1,319 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImpersonateModal = ImpersonateModal;
-exports.ImpersonateToolView = ImpersonateToolView;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _useImpersonate = require("../hooks/useImpersonate");
-var _useAutoClearReactQuery = require("../hooks/useAutoClearReactQuery");
-var _useAutoClearRedux = require("../hooks/useAutoClearRedux");
-var _useAutoClearAsyncStorage = require("../hooks/useAutoClearAsyncStorage");
-var _UserSearchView = require("./UserSearchView");
-var _ImpersonateHistoryList = require("./ImpersonateHistoryList");
-var _DataNukeSettings = require("./DataNukeSettings");
-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); }
-/**
- * ImpersonateModal Component
- *
- * Main modal for the impersonation tool. Uses JsModal with ModalHeader
- * pattern matching other Buoy dev tools (Network, Storage, etc.).
- */
-
-// Type assertion to work around React types compatibility issue with memo components
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const JsModal = _sharedUi.JsModal;
-
-// Local Tab type (matches shared-ui's TabSelector)
-
-const ALL_TABS = [{
-  key: "search",
-  label: "Search"
-}, {
-  key: "history",
-  label: "History"
-}, {
-  key: "settings",
-  label: "Settings"
-}];
-const TABS_WITHOUT_SETTINGS = [{
-  key: "search",
-  label: "Search"
-}, {
-  key: "history",
-  label: "History"
-}];
-function ImpersonateModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  onSearchUsers,
-  onClearReactQuery,
-  onClearRedux,
-  onClearAsyncStorage,
-  onClearMMKV,
-  showSettingsTab = true,
-  inline = false
-}) {
-  // Select tabs based on showSettingsTab prop
-  const tabs = showSettingsTab ? ALL_TABS : TABS_WITHOUT_SETTINGS;
-  const [activeTab, setActiveTab] = (0, _react.useState)("search");
-  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
-  // True while the header's clear ✕ is being pressed. With a mouse, pressing
-  // the ✕ blurs the input FIRST, and the blur handler closes search — which
-  // unmounts the ✕ before its own press can fire, so the query was never
-  // cleared (desktop). Press-in lands before the blur, so the blur handler can
-  // tell this dismissal apart from a click elsewhere.
-  const clearPressRef = (0, _react.useRef)(false);
-  const [searchText, setSearchText] = (0, _react.useState)("");
-  const searchInputRef = (0, _react.useRef)(null);
-
-  // Auto-detect React Query and get clear function if user didn't provide one
-  const {
-    clearCache: autoClearReactQuery,
-    isAvailable: isReactQueryDetected
-  } = (0, _useAutoClearReactQuery.useAutoClearReactQuery)();
-
-  // Auto-detect Redux and get reset function if user didn't provide one
-  const {
-    resetStore: autoClearRedux,
-    isAvailable: isReduxDetected
-  } = (0, _useAutoClearRedux.useAutoClearRedux)();
-
-  // Auto-detect AsyncStorage and get clear function if user didn't provide one
-  const {
-    clearStorage: autoClearAsyncStorage,
-    isAvailable: isAsyncStorageDetected
-  } = (0, _useAutoClearAsyncStorage.useAutoClearAsyncStorage)();
-
-  // Use user-provided callbacks, or fall back to auto-detected ones
-  const effectiveClearReactQuery = onClearReactQuery ?? autoClearReactQuery ?? undefined;
-  const effectiveClearRedux = onClearRedux ?? autoClearRedux ?? undefined;
-  const effectiveClearAsyncStorage = onClearAsyncStorage ?? autoClearAsyncStorage ?? undefined;
-
-  // Detection status for settings display
-  // Shows "detected" if either user provided callback OR auto-detected
-  const detectionStatus = {
-    reactQuery: !!onClearReactQuery || isReactQueryDetected,
-    redux: !!onClearRedux || isReduxDetected,
-    asyncStorage: !!onClearAsyncStorage || isAsyncStorageDetected,
-    mmkv: !!onClearMMKV // TODO: implement auto-detection
-  };
-  const {
-    isActive,
-    currentUser,
-    headerKey,
-    dataNukeSettings,
-    showBanner,
-    searchQuery,
-    searchResults,
-    isSearching,
-    searchError,
-    searchUsers,
-    startImpersonation,
-    stopImpersonation,
-    updateHeaderKey,
-    updateDataNukeSettings,
-    updateShowBanner,
-    history,
-    removeFromHistory,
-    clearHistory
-  } = (0, _useImpersonate.useImpersonate)({
-    onSearchUsers,
-    onClearReactQuery: effectiveClearReactQuery,
-    onClearRedux: effectiveClearRedux,
-    onClearAsyncStorage: effectiveClearAsyncStorage,
-    onClearMMKV
-  });
-
-  // Focus input when search becomes active
-  (0, _react.useEffect)(() => {
-    if (isSearchActive && searchInputRef.current) {
-      setTimeout(() => {
-        searchInputRef.current?.focus();
-      }, 100);
-    }
-  }, [isSearchActive]);
-
-  // Reset to search tab if settings tab is hidden while active
-  (0, _react.useEffect)(() => {
-    if (!showSettingsTab && activeTab === "settings") {
-      setActiveTab("search");
-    }
-  }, [showSettingsTab, activeTab]);
-  const handleSearchTextChange = (0, _react.useCallback)(text => {
-    setSearchText(text);
-  }, []);
-  const handleSubmitSearch = (0, _react.useCallback)(() => {
-    if (searchText.trim()) {
-      searchUsers(searchText.trim());
-    }
-    setIsSearchActive(false);
-  }, [searchText, searchUsers]);
-  const handleSelectUser = (0, _react.useCallback)(async user => {
-    await startImpersonation(user);
-  }, [startImpersonation]);
-  const handleSaveSettings = (0, _react.useCallback)(async (newHeaderKey, settings, newShowBanner) => {
-    // Save header key, data nuke settings, and show banner
-    await updateHeaderKey(newHeaderKey);
-    await updateDataNukeSettings(settings);
-    await updateShowBanner(newShowBanner);
-  }, [updateHeaderKey, updateDataNukeSettings, updateShowBanner]);
-  const handleTabChange = (0, _react.useCallback)(tabKey => {
-    setActiveTab(tabKey);
-    // Close search when switching tabs
-    setIsSearchActive(false);
-  }, []);
-
-  // Header content renderer (matching NetworkModal pattern)
-  const renderHeaderContent = () => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-      children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-        onBack: onBack
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-        title: "",
-        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
-          value: searchText,
-          onChangeText: handleSearchTextChange
-          // ✕ clears and closes; with no text it simply closes.
-          ,
-          onCancel: () => {
-            setSearchText("");
-            setIsSearchActive(false);
-          },
-          onDismiss: () => setIsSearchActive(false),
-          dismissOnBlur: true,
-          placeholder: "Search by email, name, or ID...",
-          iconSize: 14,
-          testID: "buoy-impersonate-search-input",
-          inputProps: {
-            onSubmitEditing: handleSubmitSearch
-          }
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
-          tabs: tabs,
-          activeTab: activeTab,
-          onTabChange: handleTabChange
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
-        children: activeTab === "search" && !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          testID: "buoy-impersonate-search-toggle",
-          onPress: () => setIsSearchActive(true),
-          style: styles.headerActionButton,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-            size: 14,
-            color: _sharedUi.night.color.textSecondary
-          })
-        })
-      })]
-    });
-  };
-  if (!visible) {
-    return null;
-  }
-  const body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
-    children: [activeTab === "search" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_UserSearchView.UserSearchView, {
-      currentUser: currentUser,
-      isActive: isActive,
-      searchQuery: searchQuery,
-      searchResults: searchResults,
-      isSearching: isSearching,
-      searchError: searchError,
-      onSelectUser: handleSelectUser,
-      onStopImpersonation: stopImpersonation,
-      searchAvailable: !!onSearchUsers
-    }), activeTab === "history" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImpersonateHistoryList.ImpersonateHistoryList, {
-      history: history,
-      currentUserId: currentUser?.id ?? null,
-      onSelectUser: handleSelectUser,
-      onStopImpersonation: stopImpersonation,
-      onRemoveFromHistory: removeFromHistory,
-      onClearHistory: clearHistory
-    }), activeTab === "settings" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataNukeSettings.DataNukeSettings, {
-      headerKey: headerKey,
-      settings: dataNukeSettings,
-      showBanner: showBanner,
-      onSave: handleSaveSettings,
-      onShowBannerChange: updateShowBanner,
-      detectionStatus: detectionStatus
-    })]
-  });
-
-  // The ONLY difference between the phone and the desktop dashboard is which
-  // shell the header and body go in. Everything above this line is shared.
-  if (inline) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TickProvider, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.inlineRoot,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.inlineHeader,
-          ..._sharedUi.windowDragProps,
-          children: renderHeaderContent()
-        }), body]
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TickProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(JsModal, {
-      visible: visible,
-      onClose: onClose,
-      onMinimize: onMinimize,
-      header: {
-        showToggleButton: true,
-        customContent: renderHeaderContent()
-      },
-      enablePersistence: true,
-      initialMode: "bottomSheet",
-      disableScrollWrapper: true,
-      children: body
-    })
-  });
-}
-
-/**
- * The same impersonation tool as `ImpersonateModal`, rendered INLINE for hosts
- * that place tools in a panel rather than a modal. Exists so there is exactly
- * one implementation — the desktop dashboard used to ship its own copy of this
- * component's header and tab router.
- */
-function ImpersonateToolView(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImpersonateModal, {
-    ...props,
-    inline: true,
-    visible: true,
-    onClose: () => {}
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  inlineRoot: {
-    flex: 1,
-    minHeight: 0,
-    // Transparent so the desktop workbench's hoisted sky (one field spanning
-    // sidebar + panel) shows through — the shell paints its base beneath it.
-    backgroundColor: "transparent"
-  },
-  inlineHeader: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.border,
-    // Clear, like Bench — the host's hoisted sky shows through the header.
-    backgroundColor: "transparent"
-  },
-  container: {
-    flex: 1
-  },
-  headerActionButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    backgroundColor: _sharedUi.night.color.buttonSurface,
-    justifyContent: "center",
-    alignItems: "center"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ImpersonateModal=ImpersonateModal;exports.ImpersonateToolView=ImpersonateToolView;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _useImpersonate=require("../hooks/useImpersonate");var _useAutoClearReactQuery=require("../hooks/useAutoClearReactQuery");var _useAutoClearRedux=require("../hooks/useAutoClearRedux");var _useAutoClearAsyncStorage=require("../hooks/useAutoClearAsyncStorage");var _UserSearchView=require("./UserSearchView");var _ImpersonateHistoryList=require("./ImpersonateHistoryList");var _DataNukeSettings=require("./DataNukeSettings");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(i,y){if("function"==typeof WeakMap)var l=new WeakMap,S=new WeakMap;return(_interopRequireWildcard=function(e,c){if(!c&&e&&e.__esModule)return e;var r,s,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(r=c?S:l){if(r.has(e))return r.get(e);r.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?r(a,t,s):a[t]=e[t]);return a})(i,y)}const JsModal=_sharedUi.JsModal;const ALL_TABS=[{key:"search",label:"Search"},{key:"history",label:"History"},{key:"settings",label:"Settings"}];const TABS_WITHOUT_SETTINGS=[{key:"search",label:"Search"},{key:"history",label:"History"}];function ImpersonateModal({visible:i,onClose:y,onBack:l,onMinimize:S,onSearchUsers:e,onClearReactQuery:c,onClearRedux:r,onClearAsyncStorage:s,onClearMMKV:a,showSettingsTab:t=true,inline:_=false}){const w=t?ALL_TABS:TABS_WITHOUT_SETTINGS;const[o,p]=(0,_react.useState)("search");const[d,u]=(0,_react.useState)(false);const ae=(0,_react.useRef)(false);const[h,g]=(0,_react.useState)("");const b=(0,_react.useRef)(null);const{clearCache:H,isAvailable:T}=(0,_useAutoClearReactQuery.useAutoClearReactQuery)();const{resetStore:M,isAvailable:D}=(0,_useAutoClearRedux.useAutoClearRedux)();const{clearStorage:q,isAvailable:B}=(0,_useAutoClearAsyncStorage.useAutoClearAsyncStorage)();const P=c??H??void 0;const U=r??M??void 0;const Q=s??q??void 0;const N={reactQuery:!!c||T,redux:!!r||D,asyncStorage:!!s||B,mmkv:!!a};const{isActive:O,currentUser:m,headerKey:V,dataNukeSettings:W,showBanner:E,searchQuery:L,searchResults:z,isSearching:F,searchError:J,searchUsers:v,startImpersonation:C,stopImpersonation:x,updateHeaderKey:A,updateDataNukeSettings:k,updateShowBanner:f,history:K,removeFromHistory:G,clearHistory:X}=(0,_useImpersonate.useImpersonate)({onSearchUsers:e,onClearReactQuery:P,onClearRedux:U,onClearAsyncStorage:Q,onClearMMKV:a});(0,_react.useEffect)(()=>{if(d&&b.current){setTimeout(()=>{b.current?.focus()},100)}},[d]);(0,_react.useEffect)(()=>{if(!t&&o==="settings"){p("search")}},[t,o]);const Y=(0,_react.useCallback)(n=>{g(n)},[]);const Z=(0,_react.useCallback)(()=>{if(h.trim()){v(h.trim())}u(false)},[h,v]);const j=(0,_react.useCallback)(async n=>{await C(n)},[C]);const $=(0,_react.useCallback)(async(n,te,re)=>{await A(n);await k(te);await f(re)},[A,k,f]);const ee=(0,_react.useCallback)(n=>{p(n);u(false)},[]);const R=()=>{return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[l&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:l}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",children:d?(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Search,{value:h,onChangeText:Y,onCancel:()=>{g("");u(false)},onDismiss:()=>u(false),dismissOnBlur:true,placeholder:"Search by email, name, or ID...",iconSize:14,testID:"buoy-impersonate-search-input",inputProps:{onSubmitEditing:Z}}):(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:w,activeTab:o,onTabChange:ee})}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{children:o==="search"&&!d&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-impersonate-search-toggle",onPress:()=>u(true),style:styles.headerActionButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.night.color.textSecondary})})})]})};if(!i){return null}const I=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[o==="search"&&(0,_jsxRuntime.jsx)(_UserSearchView.UserSearchView,{currentUser:m,isActive:O,searchQuery:L,searchResults:z,isSearching:F,searchError:J,onSelectUser:j,onStopImpersonation:x,searchAvailable:!!e}),o==="history"&&(0,_jsxRuntime.jsx)(_ImpersonateHistoryList.ImpersonateHistoryList,{history:K,currentUserId:m?.id??null,onSelectUser:j,onStopImpersonation:x,onRemoveFromHistory:G,onClearHistory:X}),o==="settings"&&(0,_jsxRuntime.jsx)(_DataNukeSettings.DataNukeSettings,{headerKey:V,settings:W,showBanner:E,onSave:$,onShowBannerChange:f,detectionStatus:N})]});if(_){return(0,_jsxRuntime.jsx)(_sharedUi.TickProvider,{children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inlineRoot,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.inlineHeader,..._sharedUi.windowDragProps,children:R()}),I]})})}return(0,_jsxRuntime.jsx)(_sharedUi.TickProvider,{children:(0,_jsxRuntime.jsx)(JsModal,{visible:i,onClose:y,onMinimize:S,header:{showToggleButton:true,customContent:R()},enablePersistence:true,initialMode:"bottomSheet",disableScrollWrapper:true,children:I})})}function ImpersonateToolView(i){return(0,_jsxRuntime.jsx)(ImpersonateModal,{...i,inline:true,visible:true,onClose:()=>{}})}const styles=_reactNative.StyleSheet.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:_sharedUi.buoyColors.border,backgroundColor:"transparent"},container:{flex:1},headerActionButton:{width:28,height:28,borderRadius:6,backgroundColor:_sharedUi.night.color.buttonSurface,justifyContent:"center",alignItems:"center"}});

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

@@ -1,26 +1 @@
-"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
-  });
-}
+"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}}function ImpersonateOverlay(){return(0,_jsxRuntime.jsx)(_ImpersonateBanner.ImpersonateBanner,{position:"top",offset:50})}

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

@@ -1,130 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImpersonateStatusBar = ImpersonateStatusBar;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _UserAvatar = require("./UserAvatar");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * ImpersonateStatusBar Component
- *
- * Shows the current impersonation status with user avatar, info and stop button.
- * Displays at the top of the modal when impersonation is active.
- */
-
-function ImpersonateStatusBar({
-  user,
-  onStopImpersonation
-}) {
-  const displayName = user.displayName || user.email || user.id;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.userSection,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_UserAvatar.UserAvatar, {
-        userId: user.id,
-        name: displayName,
-        size: "small",
-        showActiveIndicator: false
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.userInfo,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.userName,
-          numberOfLines: 1,
-          children: displayName
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.statusPill,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.pulseDot
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.statusText,
-        children: "Active"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-      style: styles.stopButton,
-      onPress: onStopImpersonation,
-      activeOpacity: 0.7,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
-        size: 12,
-        color: _sharedUi.night.color.danger
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.stopButtonText,
-        children: "Stop"
-      })]
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    backgroundColor: _sharedUi.buoyColors.success + "10",
-    borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.success + "25",
-    gap: 12
-  },
-  userSection: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-    gap: 10,
-    minWidth: 0
-  },
-  userInfo: {
-    flex: 1,
-    minWidth: 0
-  },
-  userName: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: _sharedUi.night.color.text
-  },
-  statusPill: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    backgroundColor: _sharedUi.buoyColors.success + "20",
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 12
-  },
-  pulseDot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    backgroundColor: _sharedUi.buoyColors.success
-  },
-  statusText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: _sharedUi.buoyColors.success,
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  stopButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    backgroundColor: _sharedUi.night.color.dangerSoft,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.danger + "30"
-  },
-  stopButtonText: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: _sharedUi.night.color.danger
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ImpersonateStatusBar=ImpersonateStatusBar;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _UserAvatar=require("./UserAvatar");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function ImpersonateStatusBar({user:e,onStopImpersonation:r}){const t=e.displayName||e.email||e.id;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.userSection,children:[(0,_jsxRuntime.jsx)(_UserAvatar.UserAvatar,{userId:e.id,name:t,size:"small",showActiveIndicator:false}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.userInfo,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.userName,numberOfLines:1,children:t})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.statusPill,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.pulseDot}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statusText,children:"Active"})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.stopButton,onPress:r,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_sharedUi.X,{size:12,color:_sharedUi.night.color.danger}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.stopButtonText,children:"Stop"})]})]})}const styles=_reactNative.StyleSheet.create({container:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:10,paddingHorizontal:16,backgroundColor:_sharedUi.buoyColors.success+"10",borderBottomWidth:1,borderBottomColor:_sharedUi.buoyColors.success+"25",gap:12},userSection:{flexDirection:"row",alignItems:"center",flex:1,gap:10,minWidth:0},userInfo:{flex:1,minWidth:0},userName:{fontSize:14,fontWeight:"600",color:_sharedUi.night.color.text},statusPill:{flexDirection:"row",alignItems:"center",gap:6,backgroundColor:_sharedUi.buoyColors.success+"20",paddingHorizontal:10,paddingVertical:5,borderRadius:12},pulseDot:{width:6,height:6,borderRadius:3,backgroundColor:_sharedUi.buoyColors.success},statusText:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.success,textTransform:"uppercase",letterSpacing:.5},stopButton:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:12,paddingVertical:6,backgroundColor:_sharedUi.night.color.dangerSoft,borderRadius:6,borderWidth:1,borderColor:_sharedUi.night.color.danger+"30"},stopButtonText:{fontSize:12,fontWeight:"600",color:_sharedUi.night.color.danger}});

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

@@ -1,146 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AVATAR_COLORS = void 0;
-exports.UserAvatar = UserAvatar;
-exports.getAvatarColor = getAvatarColor;
-exports.getInitials = getInitials;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-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); }
-/**
- * UserAvatar Component
- *
- * Displays a user avatar with initials and deterministic color.
- * Supports size variants and active indicator.
- */
-
-// Avatar background colors - deterministic based on user ID
-const AVATAR_COLORS = exports.AVATAR_COLORS = ["#6366F1",
-// Indigo
-"#8B5CF6",
-// Purple
-"#EC4899",
-// Pink
-"#F43F5E",
-// Rose
-"#F97316",
-// Orange
-"#EAB308",
-// Yellow
-"#22C55E",
-// Green
-"#14B8A6",
-// Teal
-"#06B6D4",
-// Cyan
-"#3B82F6" // Blue
-];
-const SIZES = {
-  small: {
-    container: 24,
-    font: 10,
-    indicator: 8
-  },
-  medium: {
-    container: 36,
-    font: 14,
-    indicator: 10
-  },
-  large: {
-    container: 44,
-    font: 16,
-    indicator: 12
-  }
-};
-/**
- * Get initials from a name or email
- */
-function getInitials(name) {
-  if (!name) return "?";
-
-  // If it's an email, use first letter before @
-  if (name.includes("@")) {
-    return name.charAt(0).toUpperCase();
-  }
-
-  // Split by spaces and get first letter of first two words
-  const parts = name.trim().split(/\s+/);
-  if (parts.length === 1) {
-    return parts[0].charAt(0).toUpperCase();
-  }
-  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
-}
-
-/**
- * Get deterministic color based on user ID
- */
-function getAvatarColor(userId) {
-  let hash = 0;
-  for (let i = 0; i < userId.length; i++) {
-    hash = userId.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
-}
-function UserAvatar({
-  userId,
-  name,
-  size = "medium",
-  showActiveIndicator = false,
-  backgroundColor
-}) {
-  const sizeConfig = SIZES[size];
-  const avatarColor = (0, _react.useMemo)(() => backgroundColor ?? getAvatarColor(userId), [userId, backgroundColor]);
-  const initials = (0, _react.useMemo)(() => getInitials(name), [name]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.wrapper,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.container, {
-        width: sizeConfig.container,
-        height: sizeConfig.container,
-        borderRadius: sizeConfig.container / 2,
-        backgroundColor: avatarColor
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.initials, {
-          fontSize: sizeConfig.font
-        }],
-        children: initials
-      })
-    }), showActiveIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.indicator, {
-        width: sizeConfig.indicator,
-        height: sizeConfig.indicator,
-        borderRadius: sizeConfig.indicator / 2,
-        right: -1,
-        bottom: -1
-      }]
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  wrapper: {
-    position: "relative"
-  },
-  container: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  initials: {
-    color: "#FFFFFF",
-    fontWeight: "600",
-    letterSpacing: 0.5
-  },
-  indicator: {
-    position: "absolute",
-    backgroundColor: _sharedUi.buoyColors.success,
-    borderWidth: 2,
-    borderColor: _sharedUi.night.color.surface
-  }
-});
-
-// Export helper functions for reuse
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.AVATAR_COLORS=void 0;exports.UserAvatar=UserAvatar;exports.getAvatarColor=getAvatarColor;exports.getInitials=getInitials;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(r,e){if("function"==typeof WeakMap)var n=new WeakMap,l=new WeakMap;return(_interopRequireWildcard=function(t,i){if(!i&&t&&t.__esModule)return t;var o,a,c={__proto__:null,default:t};if(null===t||"object"!=typeof t&&"function"!=typeof t)return c;if(o=i?l:n){if(o.has(t))return o.get(t);o.set(t,c)}for(const s in t)"default"!==s&&{}.hasOwnProperty.call(t,s)&&((a=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(t,s))&&(a.get||a.set)?o(c,s,a):c[s]=t[s]);return c})(r,e)}const AVATAR_COLORS=exports.AVATAR_COLORS=["#6366F1","#8B5CF6","#EC4899","#F43F5E","#F97316","#EAB308","#22C55E","#14B8A6","#06B6D4","#3B82F6"];const SIZES={small:{container:24,font:10,indicator:8},medium:{container:36,font:14,indicator:10},large:{container:44,font:16,indicator:12}};function getInitials(r){if(!r)return"?";if(r.includes("@")){return r.charAt(0).toUpperCase()}const e=r.trim().split(/\s+/);if(e.length===1){return e[0].charAt(0).toUpperCase()}return(e[0].charAt(0)+e[e.length-1].charAt(0)).toUpperCase()}function getAvatarColor(r){let e=0;for(let n=0;n<r.length;n++){e=r.charCodeAt(n)+((e<<5)-e)}return AVATAR_COLORS[Math.abs(e)%AVATAR_COLORS.length]}function UserAvatar({userId:r,name:e,size:n="medium",showActiveIndicator:l=false,backgroundColor:t}){const i=SIZES[n];const o=(0,_react.useMemo)(()=>t??getAvatarColor(r),[r,t]);const a=(0,_react.useMemo)(()=>getInitials(e),[e]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.wrapper,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.container,{width:i.container,height:i.container,borderRadius:i.container/2,backgroundColor:o}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.initials,{fontSize:i.font}],children:a})}),l&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.indicator,{width:i.indicator,height:i.indicator,borderRadius:i.indicator/2,right:-1,bottom:-1}]})]})}const styles=_reactNative.StyleSheet.create({wrapper:{position:"relative"},container:{alignItems:"center",justifyContent:"center"},initials:{color:"#FFFFFF",fontWeight:"600",letterSpacing:.5},indicator:{position:"absolute",backgroundColor:_sharedUi.buoyColors.success,borderWidth:2,borderColor:_sharedUi.night.color.surface}});