@buoy-gg/impersonate 1.0.3-beta.0

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

@@ -0,0 +1,130 @@
+"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.buoyColors.error
+      }), /*#__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.buoyColors.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.buoyColors.error + "15",
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.error + "30"
+  },
+  stopButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.error
+  }
+});

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

@@ -0,0 +1,146 @@
+"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.buoyColors.card
+  }
+});
+
+// Export helper functions for reuse

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

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UserCard = UserCard;
+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 }; }
+/**
+ * UserCard Component
+ *
+ * Polished user card for search results and history.
+ * Features avatar, clean typography hierarchy, and contextual actions.
+ */
+
+function UserCard({
+  user,
+  isActive = false,
+  onPress,
+  onStop,
+  onRemove,
+  showRemoveButton = false,
+  lastUsedTime,
+  variant = "default"
+}) {
+  const displayName = user.displayName || user.email || user.id;
+  const showEmail = user.email && user.displayName;
+  const role = typeof user.metadata?.role === "string" ? user.metadata.role : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: [styles.container, isActive && styles.activeContainer, variant === "compact" && styles.compactContainer],
+    onPress: onPress,
+    disabled: isActive,
+    activeOpacity: 0.7,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.avatarSection,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_UserAvatar.UserAvatar, {
+        userId: user.id,
+        name: displayName,
+        size: variant === "compact" ? "small" : "medium",
+        showActiveIndicator: isActive
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.content,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.nameRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.name, isActive && styles.activeName],
+          numberOfLines: 1,
+          children: displayName
+        }), role && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.roleBadge,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.roleBadgeText,
+            children: role.toUpperCase()
+          })
+        })]
+      }), showEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.email,
+        numberOfLines: 1,
+        children: user.email
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.metadataRow,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.userId,
+          children: ["ID: ", user.id]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.actions,
+      children: [isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+        isEnabled: true,
+        onToggle: onStop || (() => {}),
+        accessibilityLabel: "Stop impersonation"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.actionButton,
+        onPress: onPress,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Play, {
+          size: 14,
+          color: "#FFFFFF"
+        })
+      }), showRemoveButton && onRemove && !isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.removeButton,
+        onPress: onRemove,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+          size: 12,
+          color: _sharedUi.buoyColors.textMuted
+        })
+      })]
+    }), lastUsedTime && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.lastUsed,
+      children: lastUsedTime
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 12,
+    gap: 12
+  },
+  activeContainer: {
+    backgroundColor: _sharedUi.buoyColors.success + "10",
+    borderColor: _sharedUi.buoyColors.success + "40"
+  },
+  compactContainer: {
+    padding: 10,
+    gap: 10
+  },
+  avatarSection: {
+    flexShrink: 0
+  },
+  content: {
+    flex: 1,
+    minWidth: 0
+  },
+  nameRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 2
+  },
+  name: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text,
+    flexShrink: 1
+  },
+  activeName: {
+    color: _sharedUi.buoyColors.success
+  },
+  roleBadge: {
+    backgroundColor: _sharedUi.buoyColors.hover,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  roleBadgeText: {
+    fontSize: 9,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.textMuted,
+    letterSpacing: 0.5
+  },
+  email: {
+    fontSize: 13,
+    color: _sharedUi.buoyColors.textSecondary,
+    marginBottom: 4
+  },
+  metadataRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  userId: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace"
+  },
+  lastUsed: {
+    position: "absolute",
+    bottom: 8,
+    right: 10,
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flexShrink: 0
+  },
+  actionButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.buoyColors.primary,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  removeButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    backgroundColor: _sharedUi.buoyColors.hover,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

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

@@ -0,0 +1,227 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UserSearchView = UserSearchView;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _UserCard = require("./UserCard");
+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); }
+/**
+ * UserSearchView Component
+ *
+ * Displays search results for user impersonation.
+ * Search input is handled by the parent modal's header.
+ * Uses polished UserCard component for results.
+ */
+
+function UserSearchView({
+  currentUser,
+  searchQuery,
+  searchResults,
+  isSearching,
+  searchError,
+  onSelectUser,
+  onStopImpersonation,
+  searchAvailable = true
+}) {
+  const renderUserItem = (0, _react.useCallback)(({
+    item
+  }) => {
+    const isCurrentUser = currentUser?.id === item.id;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_UserCard.UserCard, {
+      user: item,
+      isActive: isCurrentUser,
+      onPress: () => !isCurrentUser && onSelectUser(item),
+      onStop: isCurrentUser ? onStopImpersonation : undefined
+    });
+  }, [currentUser, onSelectUser, onStopImpersonation]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [!searchAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.section,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.warningCard,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+          size: 18,
+          color: _sharedUi.buoyColors.warning
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.warningContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.warningTitle,
+            children: "Search Not Available"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.warningText,
+            children: "Configure the onSearchUsers callback to enable user search."
+          })]
+        })]
+      })
+    }), isSearching && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.loadingContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        size: "small",
+        color: _sharedUi.buoyColors.primary
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.loadingText,
+        children: "Searching users..."
+      })]
+    }), searchError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.section,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.errorCard,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+          size: 16,
+          color: _sharedUi.buoyColors.error
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.errorText,
+          children: searchError
+        })]
+      })
+    }), searchResults.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.resultsSection,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
+          children: "Results"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
+          count: searchResults.length
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        data: searchResults,
+        keyExtractor: item => item.id,
+        renderItem: renderUserItem,
+        ItemSeparatorComponent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.separator
+        }),
+        contentContainerStyle: styles.listContent,
+        showsVerticalScrollIndicator: false
+      })]
+    }), searchQuery && !isSearching && searchResults.length === 0 && !searchError && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.emptyStateContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.emptyStateIcon,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Users, {
+          size: 28,
+          color: _sharedUi.buoyColors.textMuted
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.emptyStateTitle,
+        children: "No users found"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.emptyStateDescription,
+        children: ["No results for \"", searchQuery, "\""]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.emptyStateHint,
+        children: "Try a different search term"
+      })]
+    }), !searchQuery && searchResults.length === 0 && !isSearching && searchAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EmptyState, {
+      title: "Search for users",
+      description: "Tap the search icon in the header to find users by email, name, or ID",
+      icon: _sharedUi.Search,
+      variant: "minimal"
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  section: {
+    padding: 16,
+    paddingBottom: 8
+  },
+  loadingContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    paddingVertical: 20
+  },
+  loadingText: {
+    fontSize: 13,
+    color: _sharedUi.buoyColors.textSecondary
+  },
+  resultsSection: {
+    flex: 1,
+    paddingHorizontal: 16
+  },
+  listContent: {
+    paddingBottom: 16
+  },
+  separator: {
+    height: 8
+  },
+  warningCard: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 12,
+    backgroundColor: _sharedUi.buoyColors.warning + "12",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.warning + "25",
+    padding: 14
+  },
+  warningContent: {
+    flex: 1
+  },
+  warningTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.warning,
+    marginBottom: 4
+  },
+  warningText: {
+    fontSize: 13,
+    color: _sharedUi.buoyColors.textSecondary,
+    lineHeight: 18
+  },
+  errorCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    backgroundColor: _sharedUi.buoyColors.error + "12",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.error + "25",
+    padding: 12
+  },
+  errorText: {
+    flex: 1,
+    fontSize: 13,
+    color: _sharedUi.buoyColors.error
+  },
+  emptyStateContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 32,
+    paddingVertical: 48
+  },
+  emptyStateIcon: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: _sharedUi.buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 16
+  },
+  emptyStateTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text,
+    marginBottom: 6
+  },
+  emptyStateDescription: {
+    fontSize: 14,
+    color: _sharedUi.buoyColors.textSecondary,
+    textAlign: "center",
+    marginBottom: 8
+  },
+  emptyStateHint: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.textMuted
+  }
+});