@oxyhq/services 12.1.1 → 13.0.0

package/lib/module/ui/components/AccountSwitcher.js

@@ -0,0 +1,786 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView, Modal, Pressable, Platform, ActivityIndicator } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { toast, useDialogControl, Dialog } from '@oxyhq/bloom';
+import { Divider } from '@oxyhq/bloom/divider';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { getAccountDisplayName, isDev, logger as loggerUtil } from '@oxyhq/core';
+import Avatar from "./Avatar.js";
+import { useOxy } from "../context/OxyContext.js";
+import { useI18n } from "../hooks/useI18n.js";
+import { buildAccountRows } from "./accountMenuRows.js";
+import { useDeviceAccounts } from "../hooks/useDeviceAccounts.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const isWeb = Platform.OS === 'web';
+const PANEL_WIDTH = 380;
+
+/**
+ * The set of action callbacks the switcher body needs. Supplied by whichever
+ * chrome wraps it — the {@link AccountSwitcher} modal/popover (web header chip,
+ * native sheet) or the {@link AccountSwitcherScreen} bottom-sheet route.
+ */
+
+/**
+ * Group flat account nodes into a 2-level tree (org → direct children). A node
+ * whose parent is not in the set is treated as a root; any deeper node not
+ * captured under a root is promoted to its own root row so nothing is hidden.
+ */
+function toTree(nodes) {
+  const byId = new Map(nodes.map(node => [node.accountId, node]));
+  const childrenOf = new Map();
+  for (const node of nodes) {
+    if (node.parentAccountId && byId.has(node.parentAccountId)) {
+      const arr = childrenOf.get(node.parentAccountId) ?? [];
+      arr.push(node);
+      childrenOf.set(node.parentAccountId, arr);
+    }
+  }
+  const rendered = new Set();
+  const result = [];
+  for (const node of nodes) {
+    const isRoot = !node.parentAccountId || !byId.has(node.parentAccountId);
+    if (!isRoot) continue;
+    const children = childrenOf.get(node.accountId) ?? [];
+    result.push({
+      root: node,
+      children
+    });
+    rendered.add(node.accountId);
+    for (const child of children) rendered.add(child.accountId);
+  }
+  for (const node of nodes) {
+    if (!rendered.has(node.accountId)) {
+      result.push({
+        root: node,
+        children: []
+      });
+      rendered.add(node.accountId);
+    }
+  }
+  return result;
+}
+
+/**
+ * The presentational, chrome-agnostic body of the unified account switcher.
+ *
+ * Two levels, relationship-aware:
+ *  - Section A — accounts signed in on THIS device (independent sign-ins). Tap
+ *    to switch session; per-row sign-out; "Add another account".
+ *  - Section B — the account GRAPH under the active sign-in: "Your accounts"
+ *    (self / owned) and "Shared with you" (member). 2-level tree (org →
+ *    children), role badge, search, one-tap to act-as.
+ *
+ * Reads everything from `useOxy()` / `useDeviceAccounts()`.
+ */
+export const AccountSwitcherView = ({
+  onClose,
+  onAddAccount,
+  onNavigateManage,
+  onCreateAccount,
+  onOpenAccountSettings,
+  onBeforeSessionChange
+}) => {
+  const {
+    activeSessionId,
+    switchSession,
+    removeSession,
+    logout,
+    logoutAll,
+    accounts,
+    actingAs,
+    setActingAs,
+    oxyServices
+  } = useOxy();
+  const {
+    t,
+    locale
+  } = useI18n();
+  const {
+    colors
+  } = useTheme();
+  const {
+    accounts: deviceAccounts
+  } = useDeviceAccounts();
+  const [busySessionId, setBusySessionId] = useState(null);
+  const [removingSessionId, setRemovingSessionId] = useState(null);
+  const [signingOut, setSigningOut] = useState(false);
+  const [signingOutAll, setSigningOutAll] = useState(false);
+  const [query, setQuery] = useState('');
+  const signOutDialog = useDialogControl();
+  const signOutAllDialog = useDialogControl();
+  const deviceRows = useMemo(() => {
+    const built = buildAccountRows({
+      accounts: deviceAccounts
+    });
+    const current = built.filter(row => row.isActive);
+    const others = built.filter(row => !row.isActive);
+    return [...current, ...others];
+  }, [deviceAccounts]);
+  const isSwitching = busySessionId !== null;
+  const actionDisabled = isSwitching || signingOut || signingOutAll;
+
+  // --- Account graph (Section B) ---
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return accounts;
+    return accounts.filter(node => {
+      const name = getAccountDisplayName(node.account, locale).toLowerCase();
+      const username = (node.account?.username ?? '').toLowerCase();
+      return name.includes(q) || username.includes(q);
+    });
+  }, [accounts, query, locale]);
+  const yourAccounts = useMemo(() => toTree(filtered.filter(node => node.relationship !== 'member')), [filtered]);
+  const sharedAccounts = useMemo(() => toTree(filtered.filter(node => node.relationship === 'member')), [filtered]);
+  const handleSwitchDevice = useCallback(async sessionId => {
+    if (busySessionId) return;
+    // Tapping the already-active sign-in returns to that sign-in's own
+    // personal account (clearing any account-graph switch). When already on
+    // the personal account this just closes.
+    if (sessionId === activeSessionId) {
+      if (actingAs !== null) setActingAs(null);
+      onClose();
+      return;
+    }
+    setBusySessionId(sessionId);
+    try {
+      await onBeforeSessionChange?.();
+      await switchSession(sessionId);
+      // The active sign-in changed; any account-graph switch belonged to the
+      // previous sign-in, so the new sign-in starts on its personal account.
+      if (actingAs !== null) setActingAs(null);
+      toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Switched account');
+      onClose();
+    } catch (error) {
+      if (!isDev()) {
+        loggerUtil.warn('Switch account failed', {
+          component: 'AccountSwitcher'
+        }, error);
+      }
+      toast.error(t('accountSwitcher.toasts.switchFailed') || 'Failed to switch account');
+    } finally {
+      setBusySessionId(null);
+    }
+  }, [activeSessionId, busySessionId, actingAs, setActingAs, switchSession, t, onClose, onBeforeSessionChange]);
+  const handleRemoveDevice = useCallback(async sessionId => {
+    if (sessionId === activeSessionId || removingSessionId) return;
+    setRemovingSessionId(sessionId);
+    try {
+      await removeSession(sessionId);
+      toast.success(t('common.actions.signedOut') || 'Signed out');
+    } catch (error) {
+      loggerUtil.warn('Remove account failed', {
+        component: 'AccountSwitcher'
+      }, error);
+      toast.error(t('common.errors.signOutFailed') || 'Failed to sign out');
+    } finally {
+      setRemovingSessionId(null);
+    }
+  }, [activeSessionId, removingSessionId, removeSession, t]);
+  const performSignOut = useCallback(async () => {
+    if (signingOut) return;
+    setSigningOut(true);
+    try {
+      await onBeforeSessionChange?.();
+      await logout();
+      toast.success(t('common.actions.signedOut') || 'Signed out');
+      onClose();
+    } catch (error) {
+      loggerUtil.warn('Sign out failed', {
+        component: 'AccountSwitcher'
+      }, error);
+      toast.error(t('common.errors.signOutFailed') || 'Failed to sign out');
+    } finally {
+      setSigningOut(false);
+    }
+  }, [signingOut, logout, t, onClose, onBeforeSessionChange]);
+  const performSignOutAll = useCallback(async () => {
+    if (signingOutAll) return;
+    setSigningOutAll(true);
+    try {
+      await onBeforeSessionChange?.();
+      await logoutAll();
+      toast.success(t('accountSwitcher.toasts.signOutAllSuccess') || 'Signed out of all accounts');
+      onClose();
+    } catch (error) {
+      loggerUtil.warn('Sign out all failed', {
+        component: 'AccountSwitcher'
+      }, error);
+      toast.error(t('common.errors.signOutAllFailed') || 'Failed to sign out of all accounts');
+    } finally {
+      setSigningOutAll(false);
+    }
+  }, [signingOutAll, logoutAll, t, onClose, onBeforeSessionChange]);
+  const handleSelectAccount = useCallback(node => {
+    // The personal (self) account = no delegation (acting-as null).
+    setActingAs(node.relationship === 'self' ? null : node.accountId);
+    onClose();
+  }, [setActingAs, onClose]);
+  const renderAccountNode = useCallback((node, isChild) => {
+    const displayName = getAccountDisplayName(node.account, locale);
+    const username = node.account?.username ? `@${node.account.username}` : null;
+    const active = node.relationship === 'self' ? actingAs === null : actingAs === node.accountId;
+    const role = node.callerMembership?.role;
+    const avatarUri = node.account?.avatar ? oxyServices.getFileDownloadUrl(node.account.avatar, 'thumb') : undefined;
+    const permissions = node.callerMembership?.permissions ?? [];
+    const canManage = node.relationship !== 'member' || permissions.includes('account:update') || permissions.includes('members:read');
+    const showSettings = node.relationship !== 'self' && !!onOpenAccountSettings && canManage;
+    return /*#__PURE__*/_jsxs(TouchableOpacity, {
+      accessibilityRole: "menuitem",
+      accessibilityLabel: displayName,
+      accessibilityState: {
+        selected: active
+      },
+      onPress: () => handleSelectAccount(node),
+      activeOpacity: 0.6,
+      style: [styles.accountRow, isChild && styles.childRow, active && {
+        backgroundColor: colors.primarySubtle
+      }],
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        uri: avatarUri,
+        name: displayName,
+        size: isChild ? 28 : 34
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.accountInfo,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.nameRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.accountName, {
+              color: colors.text
+            }],
+            numberOfLines: 1,
+            children: displayName
+          }), role ? /*#__PURE__*/_jsx(View, {
+            style: [styles.roleBadge, {
+              backgroundColor: colors.card
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.roleBadgeText, {
+                color: colors.textSecondary
+              }],
+              children: t(`accounts.roles.${role}.label`) || role
+            })
+          }) : null]
+        }), username ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.accountEmail, {
+            color: colors.textSecondary
+          }],
+          numberOfLines: 1,
+          children: username
+        }) : null]
+      }), showSettings ? /*#__PURE__*/_jsx(TouchableOpacity, {
+        accessibilityRole: "button",
+        accessibilityLabel: t('accounts.settings.title') || 'Account settings',
+        onPress: () => onOpenAccountSettings?.(node.accountId),
+        hitSlop: {
+          top: 8,
+          bottom: 8,
+          left: 8,
+          right: 8
+        },
+        style: styles.settingsButton,
+        children: /*#__PURE__*/_jsx(Ionicons, {
+          name: "settings-outline",
+          size: 16,
+          color: colors.textSecondary
+        })
+      }) : null, active ? /*#__PURE__*/_jsx(Ionicons, {
+        name: "checkmark",
+        size: 20,
+        color: colors.primary
+      }) : null]
+    }, `node-${node.accountId}`);
+  }, [actingAs, colors, handleSelectAccount, locale, onOpenAccountSettings, oxyServices, t]);
+  const renderTree = useCallback(entries => entries.map(entry => /*#__PURE__*/_jsxs(View, {
+    children: [renderAccountNode(entry.root, false), entry.children.map(child => renderAccountNode(child, true))]
+  }, `tree-${entry.root.accountId}`)), [renderAccountNode]);
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    style: styles.scroll,
+    contentContainerStyle: styles.scrollContent,
+    showsVerticalScrollIndicator: false,
+    keyboardShouldPersistTaps: "handled",
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [styles.sectionLabel, {
+        color: colors.textSecondary
+      }],
+      children: t('accountSwitcher.sections.thisDevice') || 'On this device'
+    }), deviceRows.map(row => {
+      const isBusy = busySessionId === row.sessionId;
+      const isRemoving = removingSessionId === row.sessionId;
+      // The active sign-in is THE current account only when no
+      // account-graph switch is in effect; otherwise a switched-into
+      // account is current and this row reads as the signed-in (but not
+      // active) account — tappable to return to it.
+      const isCurrentAccount = row.isActive && actingAs === null;
+      return /*#__PURE__*/_jsxs(TouchableOpacity, {
+        accessibilityRole: "menuitem",
+        accessibilityLabel: row.displayName,
+        accessibilityState: {
+          selected: isCurrentAccount
+        },
+        onPress: () => handleSwitchDevice(row.sessionId),
+        disabled: isCurrentAccount || isBusy || isSwitching,
+        activeOpacity: 0.6,
+        style: [styles.accountRow, isCurrentAccount && {
+          backgroundColor: colors.primarySubtle
+        }, isSwitching && !row.isActive && styles.rowDisabled],
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          uri: row.avatarUri,
+          name: row.displayName,
+          size: row.isActive ? 40 : 32
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.accountInfo,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.accountName, {
+              color: colors.text
+            }, row.isActive && styles.accountNameActive],
+            numberOfLines: 1,
+            children: row.displayName
+          }), row.secondary ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.accountEmail, {
+              color: colors.textSecondary
+            }],
+            numberOfLines: 1,
+            children: row.secondary
+          }) : null]
+        }), isBusy ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          color: colors.primary,
+          size: "small"
+        }) : isCurrentAccount ? /*#__PURE__*/_jsx(Ionicons, {
+          name: "checkmark",
+          size: 20,
+          color: colors.primary
+        }) : row.isActive ?
+        // Active sign-in while switched into another account:
+        // no current-checkmark, no sign-out (can't sign out the
+        // active session here) — tap the row to return to it.
+        null : isRemoving ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          color: colors.textSecondary,
+          size: "small"
+        }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+          accessibilityRole: "button",
+          accessibilityLabel: t('accountMenu.signOutAccount', {
+            name: row.displayName
+          }) || `Sign out ${row.displayName}`,
+          onPress: () => handleRemoveDevice(row.sessionId),
+          disabled: isSwitching || removingSessionId !== null,
+          hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8
+          },
+          style: styles.settingsButton,
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: "log-out-outline",
+            size: 18,
+            color: colors.textSecondary
+          })
+        })]
+      }, `device-${row.sessionId}`);
+    }), isSwitching ? /*#__PURE__*/_jsxs(View, {
+      style: styles.switchingRow,
+      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+        color: colors.textSecondary,
+        size: "small"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.switchingText, {
+          color: colors.textSecondary
+        }],
+        children: t('accountMenu.switching') || 'Switching account…'
+      })]
+    }) : null, /*#__PURE__*/_jsxs(TouchableOpacity, {
+      accessibilityRole: "menuitem",
+      accessibilityLabel: t('accountMenu.addAnother') || 'Add another account',
+      onPress: () => {
+        onClose();
+        onAddAccount();
+      },
+      disabled: actionDisabled,
+      activeOpacity: 0.6,
+      style: [styles.actionRow, actionDisabled && styles.rowDisabled],
+      children: [/*#__PURE__*/_jsx(Ionicons, {
+        name: "person-add-outline",
+        size: 20,
+        color: colors.icon
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.actionText, {
+          color: colors.text
+        }],
+        children: t('accountMenu.addAnother') || 'Add another account'
+      })]
+    }), accounts.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Divider, {
+        color: colors.border,
+        spacing: 4
+      }), accounts.length > 6 ? /*#__PURE__*/_jsxs(View, {
+        style: [styles.searchBox, {
+          backgroundColor: colors.card,
+          borderColor: colors.border
+        }],
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: "search",
+          size: 16,
+          color: colors.textSecondary
+        }), /*#__PURE__*/_jsx(TextInput, {
+          value: query,
+          onChangeText: setQuery,
+          placeholder: t('accountSwitcher.searchPlaceholder') || 'Search accounts',
+          placeholderTextColor: colors.textSecondary,
+          style: [styles.searchInput, {
+            color: colors.text
+          }],
+          autoCapitalize: "none",
+          autoCorrect: false
+        })]
+      }) : null, yourAccounts.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.sectionLabel, {
+            color: colors.textSecondary
+          }],
+          children: t('accountSwitcher.sections.yourAccounts') || 'Your accounts'
+        }), renderTree(yourAccounts)]
+      }) : null, sharedAccounts.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.sectionLabel, {
+            color: colors.textSecondary
+          }],
+          children: t('accountSwitcher.sections.sharedWithYou') || 'Shared with you'
+        }), renderTree(sharedAccounts)]
+      }) : null]
+    }) : null, /*#__PURE__*/_jsx(Divider, {
+      color: colors.border,
+      spacing: 4
+    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      accessibilityRole: "menuitem",
+      accessibilityLabel: t('accounts.create.title') || 'Create account',
+      onPress: () => {
+        onClose();
+        onCreateAccount();
+      },
+      disabled: actionDisabled,
+      activeOpacity: 0.6,
+      style: [styles.actionRow, actionDisabled && styles.rowDisabled],
+      children: [/*#__PURE__*/_jsx(Ionicons, {
+        name: "add-circle-outline",
+        size: 20,
+        color: colors.icon
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.actionText, {
+          color: colors.text
+        }],
+        children: t('accounts.create.title') || 'Create account'
+      })]
+    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      accessibilityRole: "menuitem",
+      accessibilityLabel: t('accountMenu.manage') || 'Manage your Oxy Account',
+      onPress: () => {
+        onClose();
+        onNavigateManage();
+      },
+      disabled: actionDisabled,
+      activeOpacity: 0.6,
+      style: [styles.actionRow, actionDisabled && styles.rowDisabled],
+      children: [/*#__PURE__*/_jsx(Ionicons, {
+        name: "settings-outline",
+        size: 18,
+        color: colors.icon
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.actionText, {
+          color: colors.text
+        }],
+        children: t('accountMenu.manage') || 'Manage your Oxy Account'
+      })]
+    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      accessibilityRole: "menuitem",
+      accessibilityLabel: t('common.actions.signOut') || 'Sign out',
+      onPress: () => signOutDialog.open(),
+      disabled: actionDisabled,
+      activeOpacity: 0.6,
+      style: [styles.actionRow, actionDisabled && styles.rowDisabled],
+      children: [signingOut ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: colors.error,
+        size: "small"
+      }) : /*#__PURE__*/_jsx(Ionicons, {
+        name: "log-out-outline",
+        size: 18,
+        color: colors.error
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.actionText, {
+          color: colors.error
+        }],
+        children: t('common.actions.signOut') || 'Sign out'
+      })]
+    }), deviceRows.length > 1 ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+      accessibilityRole: "menuitem",
+      accessibilityLabel: t('accountMenu.signOutAll') || 'Sign out of all accounts',
+      onPress: () => signOutAllDialog.open(),
+      disabled: actionDisabled,
+      activeOpacity: 0.6,
+      style: [styles.actionRow, actionDisabled && styles.rowDisabled],
+      children: [signingOutAll ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: colors.error,
+        size: "small"
+      }) : /*#__PURE__*/_jsx(Ionicons, {
+        name: "log-out-outline",
+        size: 18,
+        color: colors.error
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.actionText, {
+          color: colors.error
+        }],
+        children: t('accountMenu.signOutAll') || 'Sign out of all accounts'
+      })]
+    }) : null, /*#__PURE__*/_jsx(Dialog, {
+      control: signOutDialog,
+      title: t('common.actions.signOut') || 'Sign out',
+      description: t('common.confirms.signOut') || 'Are you sure you want to sign out?',
+      actions: [{
+        label: t('common.actions.signOut') || 'Sign out',
+        color: 'destructive',
+        onPress: performSignOut
+      }, {
+        label: t('common.cancel') || 'Cancel',
+        color: 'cancel'
+      }]
+    }), /*#__PURE__*/_jsx(Dialog, {
+      control: signOutAllDialog,
+      title: t('accountMenu.signOutAll') || 'Sign out of all accounts',
+      description: t('common.confirms.signOutAll') || 'Are you sure you want to sign out of all accounts?',
+      actions: [{
+        label: t('accountMenu.signOutAll') || 'Sign out of all accounts',
+        color: 'destructive',
+        onPress: performSignOutAll
+      }, {
+        label: t('common.cancel') || 'Cancel',
+        color: 'cancel'
+      }]
+    })]
+  });
+};
+/**
+ * Unified account switcher presented as a popover (web) / bottom-sheet style
+ * modal (native). The canonical entry point opened by {@link AccountMenuButton}.
+ * Supersedes `AccountMenu` (which remains exported as the device-only switcher).
+ */
+const AccountSwitcher = ({
+  open,
+  anchor,
+  ...actions
+}) => {
+  const {
+    t
+  } = useI18n();
+  const {
+    colors
+  } = useTheme();
+  const containerRef = useRef(null);
+  const {
+    onClose
+  } = actions;
+  useEffect(() => {
+    if (!open || !isWeb || typeof document === 'undefined') {
+      return undefined;
+    }
+    const onKey = event => {
+      if (event.key === 'Escape') {
+        event.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', onKey, true);
+    return () => document.removeEventListener('keydown', onKey, true);
+  }, [open, onClose]);
+  if (!open) {
+    return null;
+  }
+  const anchorStyle = anchor ? {
+    ...(anchor.top !== undefined ? {
+      top: anchor.top
+    } : null),
+    ...(anchor.bottom !== undefined ? {
+      bottom: anchor.bottom
+    } : null),
+    ...(anchor.left !== undefined ? {
+      left: anchor.left
+    } : null),
+    ...(anchor.right !== undefined ? {
+      right: anchor.right
+    } : null)
+  } : {
+    top: 64,
+    right: 16
+  };
+  const panelStyles = isWeb ? [styles.panelBase, styles.panelWeb, anchorStyle, {
+    backgroundColor: colors.background,
+    borderColor: colors.border
+  }] : [styles.panelBase, styles.panelNative, {
+    backgroundColor: colors.background
+  }];
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: open,
+    transparent: true,
+    animationType: isWeb ? 'fade' : 'slide',
+    onRequestClose: actions.onClose,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: t('common.actions.close') || 'Close',
+      onPress: actions.onClose,
+      style: isWeb ? styles.webOverlay : styles.nativeOverlay,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        ref: containerRef,
+        onPress: () => undefined,
+        style: panelStyles,
+        accessibilityRole: "menu",
+        accessibilityLabel: t('accountSwitcher.label') || 'Account switcher',
+        children: /*#__PURE__*/_jsx(AccountSwitcherView, {
+          ...actions
+        })
+      })
+    })
+  });
+};
+const styles = StyleSheet.create({
+  webOverlay: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    position: 'relative'
+  },
+  nativeOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.32)',
+    justifyContent: 'flex-end'
+  },
+  panelBase: {
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOpacity: 0.18,
+    shadowRadius: 24,
+    shadowOffset: {
+      width: 0,
+      height: 8
+    },
+    elevation: 12,
+    overflow: 'hidden'
+  },
+  panelWeb: {
+    position: 'absolute',
+    width: PANEL_WIDTH,
+    maxHeight: '85%',
+    borderWidth: 1
+  },
+  panelNative: {
+    marginHorizontal: 0,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingBottom: 12,
+    maxHeight: '85%'
+  },
+  scroll: {
+    flexGrow: 0
+  },
+  scrollContent: {
+    paddingVertical: 4
+  },
+  sectionLabel: {
+    fontSize: 11,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    paddingHorizontal: 14,
+    paddingTop: 12,
+    paddingBottom: 4
+  },
+  accountRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    gap: 10
+  },
+  childRow: {
+    paddingLeft: 34
+  },
+  rowDisabled: {
+    opacity: 0.4
+  },
+  accountInfo: {
+    flex: 1,
+    minWidth: 0
+  },
+  nameRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6
+  },
+  accountName: {
+    fontSize: 13,
+    fontWeight: '500',
+    flexShrink: 1
+  },
+  accountNameActive: {
+    fontWeight: '600'
+  },
+  accountEmail: {
+    fontSize: 11,
+    marginTop: 1
+  },
+  roleBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    borderRadius: 8
+  },
+  roleBadgeText: {
+    fontSize: 10,
+    fontWeight: '600',
+    textTransform: 'capitalize'
+  },
+  settingsButton: {
+    width: 28,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 14
+  },
+  switchingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 8,
+    gap: 8
+  },
+  switchingText: {
+    fontSize: 12,
+    fontWeight: '500'
+  },
+  searchBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginHorizontal: 14,
+    marginVertical: 6,
+    paddingHorizontal: 10,
+    height: 36,
+    borderRadius: 10,
+    borderWidth: 1
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 13,
+    padding: 0
+  },
+  actionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    gap: 10
+  },
+  actionText: {
+    fontSize: 13,
+    fontWeight: '500'
+  }
+});
+export default AccountSwitcher;
+//# sourceMappingURL=AccountSwitcher.js.map