@oxyhq/services 19.0.0 → 19.1.0

package/src/ui/context/oxyContextHelpers.ts

@@ -0,0 +1,58 @@
+import type { UseFollowHook } from '../hooks/useFollow.types';
+import { logger as loggerUtil } from '@oxyhq/core';
+
+/** Local display hint when a session lacks explicit `expiresAt` (7 days). */
+export const DEFAULT_SESSION_VALIDITY_MS = 7 * 24 * 60 * 60 * 1000;
+
+export function getHttpStatus(error: unknown): number | undefined {
+  if (!error || typeof error !== 'object') {
+    return undefined;
+  }
+  if ('status' in error) {
+    const status = (error as { status?: unknown }).status;
+    if (typeof status === 'number') {
+      return status;
+    }
+  }
+  if ('response' in error) {
+    const response = (error as { response?: unknown }).response;
+    if (response && typeof response === 'object' && 'status' in response) {
+      const status = (response as { status?: unknown }).status;
+      if (typeof status === 'number') {
+        return status;
+      }
+    }
+  }
+  return undefined;
+}
+
+export function isUnauthorizedStatus(error: unknown): boolean {
+  return getHttpStatus(error) === 401;
+}
+
+let cachedUseFollowHook: UseFollowHook | null = null;
+
+export const loadUseFollowHook = (): UseFollowHook => {
+  if (cachedUseFollowHook) {
+    return cachedUseFollowHook;
+  }
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { useFollow } = require('../hooks/useFollow');
+    cachedUseFollowHook = useFollow as UseFollowHook;
+    return cachedUseFollowHook;
+  } catch (error) {
+    if (__DEV__) {
+      loggerUtil.warn(
+        'useFollow hook is not available. Please import useFollow from @oxyhq/services directly.',
+        { component: 'OxyContext', method: 'loadUseFollowHook' },
+        error,
+      );
+    }
+    const fallback: UseFollowHook = () => {
+      throw new Error('useFollow hook is only available in the UI bundle. Import it from @oxyhq/services.');
+    };
+    cachedUseFollowHook = fallback;
+    return cachedUseFollowHook;
+  }
+};

package/src/ui/context/oxyContextTypes.ts

@@ -0,0 +1,124 @@
+import type { ReactNode } from 'react';
+import type { OxyServices, User, SessionLoginResponse, AccountNode, CreateAccountInput, ClientSession, AccountDialogController, AccountDialogView, ApiError } from '@oxyhq/core';
+import type { SecurityAlert } from '@oxyhq/contracts';
+import type { UseFollowHook } from '../hooks/useFollow.types';
+import type { useLanguageManagement } from '../hooks/useLanguageManagement';
+import type { RouteName } from '../navigation/routes';
+
+export interface OxyContextState {
+  user: User | null;
+  sessions: ClientSession[];
+  activeSessionId: string | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  isTokenReady: boolean;
+  hasAccessToken: boolean;
+  canUsePrivateApi: boolean;
+  isPrivateApiPending: boolean;
+  /**
+   * Whether the initial auth determination has concluded.
+   *
+   * `false` from mount until the FIRST device-first cold boot resolves —
+   * during that window `isAuthenticated: false` is UNDETERMINED, not a
+   * definitive "logged out". Flips to `true` exactly once the boot concludes
+   * (a session was committed OR none exists) and never reverts. Consumers should
+   * defer their first auth-dependent fetch until this is `true` so a cold-boot
+   * web reload with an existing session does not fetch anonymous data.
+   */
+  isAuthResolved: boolean;
+  isStorageReady: boolean;
+  error: string | null;
+  currentLanguage: string;
+  currentLanguageMetadata: ReturnType<typeof useLanguageManagement>['metadata'];
+  currentLanguageName: string;
+  currentNativeLanguageName: string;
+
+  hasIdentity: () => Promise<boolean>;
+  getPublicKey: () => Promise<string | null>;
+
+  signIn: (publicKey: string, deviceName?: string) => Promise<User>;
+
+  signInWithPassword: (
+    identifier: string,
+    password: string,
+    opts?: { deviceName?: string; deviceFingerprint?: string },
+  ) => Promise<PasswordSignInResult>;
+
+  completeTwoFactorSignIn: (params: {
+    loginToken: string;
+    token?: string;
+    backupCode?: string;
+    deviceName?: string;
+  }) => Promise<{ securityAlert?: SecurityAlert }>;
+
+  revokeSuspiciousSignIn: () => Promise<void>;
+  handleWebSession: (session: SessionLoginResponse) => Promise<void>;
+
+  logout: (targetSessionId?: string) => Promise<void>;
+  logoutAll: () => Promise<void>;
+  switchSession: (sessionId: string) => Promise<User>;
+  removeSession: (sessionId: string) => Promise<void>;
+  refreshSessions: () => Promise<void>;
+  setLanguage: (languageId: string) => Promise<void>;
+  getDeviceSessions: () => Promise<
+    Array<{
+      sessionId: string;
+      deviceId: string;
+      deviceName?: string;
+      lastActive?: string;
+      expiresAt?: string;
+    }>
+  >;
+  logoutAllDeviceSessions: () => Promise<void>;
+  updateDeviceName: (deviceName: string) => Promise<void>;
+  clearSessionState: () => Promise<void>;
+  clearAllAccountData: () => Promise<void>;
+  storageKeyPrefix: string;
+  clientId: string | null;
+  oxyServices: OxyServices;
+  useFollow?: UseFollowHook;
+  showBottomSheet?: (screenOrConfig: RouteName | { screen: RouteName; props?: Record<string, unknown> }) => void;
+  openAvatarPicker: () => void;
+
+  accountDialogController: AccountDialogController | null;
+  isAccountDialogOpen: boolean;
+  openAccountDialog: (view?: AccountDialogView) => void;
+  closeAccountDialog: () => void;
+
+  accounts: AccountNode[];
+  switchToAccount: (accountId: string) => Promise<void>;
+  refreshAccounts: () => Promise<void>;
+  createAccount: (data: CreateAccountInput) => Promise<AccountNode>;
+}
+
+/**
+ * Result of {@link OxyContextState.signInWithPassword}.
+ */
+export type PasswordSignInResult =
+  | { status: 'ok'; securityAlert?: SecurityAlert }
+  | { status: '2fa_required'; loginToken: string };
+
+export interface OxyContextProviderProps {
+  children: ReactNode;
+  oxyServices?: OxyServices;
+  baseURL?: string;
+  authWebUrl?: string;
+  authRedirectUri?: string;
+  storageKeyPrefix?: string;
+  clientId?: string;
+  /** Sync device credentials to auth.oxy.so after interactive sign-in. @default true */
+  hubSync?: boolean;
+  onAuthStateChange?: (user: User | null) => void;
+  onError?: (error: ApiError) => void;
+}
+
+/** Internal commit input — session plus zero-cookie device credential. */
+export interface CommitInput {
+  sessionId: string;
+  accessToken?: string;
+  deviceId?: string;
+  deviceSecret?: string;
+  expiresAt?: string;
+  userId?: string;
+  user?: { id: string; username?: string; avatar?: string };
+}

package/src/ui/context/useOxyAccountGraph.ts

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useState, type RefObject } from 'react';
+import type { QueryClient } from '@tanstack/react-query';
+import type { OxyServices, AccountNode, CreateAccountInput, AccountDialogController, SessionClient } from '@oxyhq/core';
+import { logger as loggerUtil } from '@oxyhq/core';
+import { useAuthStore } from '../stores/authStore';
+import { isUnauthorizedStatus } from './oxyContextHelpers';
+import type { CommitInput } from './oxyContextTypes';
+
+interface UseOxyAccountGraphParams {
+  isAuthenticated: boolean;
+  tokenReady: boolean;
+  initialized: boolean;
+  oxyServices: OxyServices;
+  sessionClient: SessionClient;
+  syncFromClient: () => Promise<void>;
+  commitSession: (input: CommitInput, options: { activate: boolean }) => Promise<void>;
+  queryClient: QueryClient;
+  accountDialogControllerRef: RefObject<AccountDialogController | null>;
+  clearSessionStateRef: RefObject<() => Promise<void>>;
+}
+
+export function useOxyAccountGraph({
+  isAuthenticated,
+  tokenReady,
+  initialized,
+  oxyServices,
+  sessionClient,
+  syncFromClient,
+  commitSession,
+  queryClient,
+  accountDialogControllerRef,
+  clearSessionStateRef,
+}: UseOxyAccountGraphParams) {
+  const [accounts, setAccounts] = useState<AccountNode[]>([]);
+
+  const refreshAccounts = useCallback(async (): Promise<void> => {
+    if (!isAuthenticated || !tokenReady || !oxyServices.getAccessToken()) {
+      setAccounts([]);
+      return;
+    }
+    try {
+      const list = await oxyServices.listAccounts();
+      setAccounts(list);
+    } catch (err) {
+      if (isUnauthorizedStatus(err)) {
+        setAccounts([]);
+        await clearSessionStateRef.current();
+        return;
+      }
+      if (__DEV__) {
+        loggerUtil.debug('Failed to load accounts', { component: 'OxyContext' }, err as unknown);
+      }
+    }
+  }, [isAuthenticated, oxyServices, tokenReady, clearSessionStateRef]);
+
+  useEffect(() => {
+    if (isAuthenticated && initialized && tokenReady) {
+      refreshAccounts();
+      void accountDialogControllerRef.current?.refresh();
+    }
+  }, [isAuthenticated, initialized, tokenReady, refreshAccounts, accountDialogControllerRef]);
+
+  const runPostAccountSwitchSideEffects = useCallback(async (): Promise<void> => {
+    await refreshAccounts();
+    queryClient.invalidateQueries();
+  }, [refreshAccounts, queryClient]);
+
+  const switchToAccount = useCallback(
+    async (accountId: string): Promise<void> => {
+      const deviceState = sessionClient.getState();
+      if (deviceState?.accounts.some((account) => account.accountId === accountId)) {
+        await sessionClient.switchAccount(accountId);
+        await syncFromClient();
+        await runPostAccountSwitchSideEffects();
+        return;
+      }
+
+      const result = await oxyServices.switchToAccount(accountId);
+      if (!result?.user || !result?.sessionId) {
+        throw new Error('Account switch did not return a valid session');
+      }
+      await commitSession(
+        {
+          sessionId: result.sessionId,
+          accessToken: result.accessToken,
+          deviceSecret: (result as { deviceSecret?: string }).deviceSecret,
+          deviceId: result.deviceId,
+          expiresAt: result.expiresAt,
+          userId: result.user.id,
+          user: result.user,
+        },
+        { activate: true },
+      );
+      await runPostAccountSwitchSideEffects();
+    },
+    [oxyServices, sessionClient, syncFromClient, commitSession, runPostAccountSwitchSideEffects],
+  );
+
+  const createAccount = useCallback(
+    async (data: CreateAccountInput): Promise<AccountNode> => {
+      const account = await oxyServices.createAccount(data);
+      await refreshAccounts();
+      return account;
+    },
+    [oxyServices, refreshAccounts],
+  );
+
+  return {
+    accounts,
+    refreshAccounts,
+    switchToAccount,
+    createAccount,
+  };
+}

package/src/ui/hooks/queryClient.ts

@@ -208,29 +208,18 @@ export const attachQueryPersistence = (
   return { unsubscribe, restored };
 };
 
-// Legacy cache keys — kept so we can opportunistically purge stale blobs
-// written by older builds. v2 may contain persisted payments data, so the
-// active key is bumped to v3 and old blobs are only removed during explicit clears.
-const LEGACY_QUERY_CACHE_KEYS: ReadonlyArray<string> = ['oxy_query_cache_v2', 'oxy_query_cache'];
-
 /**
- * Remove the persisted query+mutation cache (used on full sign-out / data
- * reset). Safe to call even if persistence was never attached. Also clears
- * legacy cache keys from older builds.
+ * Remove the persisted query+mutation cache (used on full sign-out / data reset).
+ * Safe to call even if persistence was never attached.
  */
 export const clearQueryCache = async (storage: StorageInterface): Promise<void> => {
-  const keys = [QUERY_CACHE_KEY, ...LEGACY_QUERY_CACHE_KEYS];
-  await Promise.all(
-    keys.map(async (key) => {
-      try {
-        await storage.removeItem(key);
-      } catch (error) {
-        if (isDev()) {
-          console.warn(`[QueryClient] Failed to clear persisted query cache (${key})`, error);
-        }
-      }
-    }),
-  );
+  try {
+    await storage.removeItem(QUERY_CACHE_KEY);
+  } catch (error) {
+    if (isDev()) {
+      console.warn('[QueryClient] Failed to clear persisted query cache', error);
+    }
+  }
 };
 
 /**

package/src/ui/hooks/useAuth.ts

@@ -17,10 +17,11 @@
  * }
  * ```
  *
- * Cross-domain SSO:
- * - Web: Automatic via the per-apex `/auth/silent` iframe + terminal `/sso` bounce (SDK cold boot)
- * - Native: Automatic via shared Keychain/Account Manager
- * - Manual sign-in: signIn() redirects to the IdP (web) or opens the auth sheet (native)
+ * Cross-domain session (zero cookies):
+ * - Web: silent OAuth (`prompt=none`) on cold boot; hub-ticket sync to auth.oxy.so after sign-in
+ * - Native: shared Keychain / app-group identity (Commons)
+ * - Realtime sync: Socket.IO `session_state` on `device:<deviceId>` once authenticated
+ * - Manual sign-in: signIn() opens the in-app account dialog (web + native)
  */
 
 import { useCallback } from 'react';
@@ -114,7 +115,8 @@ export interface UseAuthReturn extends AuthState, AuthActions {
  * Features:
  * - Zero config: Just wrap with OxyProvider and use
  * - Cross-platform: Same API on native and web
- * - Auto SSO: Web apps automatically check for cross-domain sessions
+ * - Auto session restore: Web apps silently restore via device-secret mint, then
+ *   silent OAuth against the IdP hub; native apps use the shared keychain
  * - Type-safe: Full TypeScript support
  */
 export function useAuth(): UseAuthReturn {

package/src/ui/hooks/useSessionManagement.ts

@@ -9,6 +9,7 @@ import type { OxyServices } from '@oxyhq/core';
 import type { QueryClient } from '@tanstack/react-query';
 import { clearQueryCache } from './queryClient';
 import { isWebBrowser } from '../utils/isWebBrowser';
+import { clearCrossOriginRestoreGuards } from '../utils/crossOriginRestore';
 
 export interface UseSessionManagementOptions {
   oxyServices: OxyServices;
@@ -196,6 +197,7 @@ export const useSessionManagement = ({
     }
     
     await clearSessionStorage();
+    clearCrossOriginRestoreGuards();
     onAuthStateChange?.(null);
   }, [clearSessionStorage, logoutStore, onAuthStateChange, oxyServices, queryClient, storage, logger]);
 

package/src/ui/index.ts

@@ -20,14 +20,13 @@ export { default as OxyProvider } from './components/OxyProvider';
 export { default as OxySignInButton } from './components/OxySignInButton';
 export { default as OxyAuthPrompt } from './components/OxyAuthPrompt';
 export type { OxyAuthPromptProps } from './components/OxyAuthPrompt';
-export { default as OxyLogo } from './components/OxyLogo';
+export { LogoIcon } from './components/logo/LogoIcon';
+export { LogoText } from './components/logo/LogoText';
 export { RequireOxyAuth } from './components/RequireOxyAuth';
 export type { RequireOxyAuthProps, RequireOxyAuthPrompt } from './components/RequireOxyAuth';
-export { default as Avatar } from './components/Avatar';
 export { default as FollowButton } from './components/FollowButton';
 export { default as OxyPayButton } from './components/OxyPayButton';
 export { FontLoader, setupFonts } from './components/FontLoader';
-export { default as OxyIcon } from './components/icon/OxyIcon';
 export { default as ProfileButton } from './components/ProfileButton';
 
 // Context + hooks

package/src/ui/navigation/accountDialogManager.ts

@@ -1,17 +1,5 @@
 /**
- * Imperative bridge for the unified {@link OxyAccountDialog}.
- *
- * Mirrors `bottomSheetManager` — a tiny module-level indirection so any caller
- * (even outside React, e.g. an app's imperative "sign in" handler) can open the
- * single account dialog without a ref. `OxyContext` registers the live open/close
- * controls on mount via {@link registerAccountDialogControls} and reports the
- * dialog's visibility here via {@link notifyAccountDialogVisibility}; the exported
- * `openAccountDialog` / `closeAccountDialog` drive those controls.
- *
- * `showSignInModal` / `hideSignInModal` / `subscribeToSignInModal` are the stable
- * public surface the previous `SignInModal` module owned — kept so existing
- * consumers (inbox, accounts) keep working while the sign-in surface is now the
- * unified dialog opened on its `signin` view.
+ * Imperative controls for the unified {@link OxyAccountDialog}.
  */
 
 import type { AccountDialogView } from '@oxyhq/core';
@@ -25,11 +13,6 @@ export interface AccountDialogControls {
 let controls: AccountDialogControls | null = null;
 const visibilityListeners = new Set<(visible: boolean) => void>();
 
-/**
- * Register the provider's live open/close controls. Returns an unregister
- * function that only clears the slot if it still owns it (guards against a late
- * unmount clobbering a newer provider).
- */
 export function registerAccountDialogControls(next: AccountDialogControls): () => void {
   controls = next;
   return () => {
@@ -49,36 +32,17 @@ export function closeAccountDialog(): void {
   controls?.close();
 }
 
-/**
- * Report the dialog's current visibility so subscribers (e.g. `OxySignInButton`)
- * can reflect an in-flight "Signing in…" state. Called by the provider whenever
- * the open flag changes, so listeners stay accurate regardless of what triggered
- * the change (imperative open, backdrop dismiss, completed sign-in).
- */
+/** Report dialog visibility to subscribers (e.g. `OxySignInButton` loading state). */
 export function notifyAccountDialogVisibility(visible: boolean): void {
   for (const listener of visibilityListeners) {
     listener(visible);
   }
 }
 
-/**
- * Subscribe to dialog visibility changes. Returns an unsubscribe function.
- * Retains the name the old `SignInModal` exposed so `OxySignInButton` keeps its
- * "Signing in…" affordance.
- */
-export function subscribeToSignInModal(listener: (visible: boolean) => void): () => void {
+/** Subscribe to account dialog visibility changes. */
+export function subscribeToAccountDialog(listener: (visible: boolean) => void): () => void {
   visibilityListeners.add(listener);
   return () => {
     visibilityListeners.delete(listener);
   };
 }
-
-/** Open the unified dialog on its sign-in view. Public back-compat entry point. */
-export function showSignInModal(): void {
-  openAccountDialog('signin');
-}
-
-/** Close the unified dialog. Public back-compat entry point. */
-export function hideSignInModal(): void {
-  closeAccountDialog();
-}

package/src/ui/screens/ConnectedAppsScreen.tsx

@@ -7,9 +7,9 @@ import type { ConnectedApp } from '@oxyhq/core';
 import { logger as loggerUtil } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
 import Header from '../components/Header';
-import Avatar from '../components/Avatar';
-import EmptyState from '../components/EmptyState';
-import LoadingState from '../components/LoadingState';
+import { Avatar } from '@oxyhq/bloom/avatar';
+import { Loading } from '@oxyhq/bloom/loading';
+import { Text } from '@oxyhq/bloom/typography';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 import { useConnectedApps } from '../hooks/queries/useAccountQueries';
@@ -99,13 +99,10 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
     const renderEmpty = useCallback(
         () => (
             <View className="flex-1 items-center justify-center py-space-32">
-                <EmptyState
-                    message={
-                        t('connectedApps.empty.subtitle')
-                        || 'Apps you authorize to sign in with your Oxy account will appear here'
-                    }
-                    textColor={bloomTheme.colors.textSecondary}
-                />
+                <Text className="text-text-secondary text-center p-space-40">
+                    {t('connectedApps.empty.subtitle')
+                        || 'Apps you authorize to sign in with your Oxy account will appear here'}
+                </Text>
             </View>
         ),
         [t, bloomTheme.colors.textSecondary],
@@ -153,7 +150,7 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
                 elevation="subtle"
             />
             {isLoading && !apps ? (
-                <LoadingState color={bloomTheme.colors.primary} />
+                <Loading size="large" color={bloomTheme.colors.primary} />
             ) : (
                 <FlatList
                     data={apps ?? []}

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -576,16 +576,15 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
             <Header
                 title=""
                 subtitle=""
-                theme={normalizedTheme}
                 onBack={onClose || goBack}
                 variant="minimal"
                 elevation="none"
-                rightAction={{
+                actions={[{
                     text: isSaving ? (t('common.saving') || 'Saving...') : (t('common.save') || 'Save'),
                     onPress: handleSave,
                     disabled: isSaving,
                     loading: isSaving,
-                }}
+                }]}
             />
 
             <ScrollView

package/src/ui/screens/EditProfileScreen.tsx

@@ -2,12 +2,12 @@ import type React from 'react';
 import { useMemo } from 'react';
 import { View, ScrollView } from 'react-native';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { H4, Text } from '@oxyhq/bloom/typography';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { getAccountDisplayName } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
 import Header from '../components/Header';
-import Avatar from '../components/Avatar';
+import { Avatar } from '@oxyhq/bloom/avatar';
+import ProfileSummaryCard from '../components/ProfileSummaryCard';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
@@ -63,17 +63,11 @@ const EditProfileScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigat
                 showsVerticalScrollIndicator={false}
             >
                 {/* Profile card */}
-                <View className="items-center bg-fill-secondary rounded-radius-20 px-space-20 py-space-24 mb-space-16">
-                    <Avatar uri={avatarUri} name={displayName} size={72} />
-                    <H4 className="text-text mt-space-12" numberOfLines={1}>
-                        {displayName}
-                    </H4>
-                    {user?.username ? (
-                        <Text className="text-text-secondary text-sm mt-space-2" numberOfLines={1}>
-                            @{user.username}
-                        </Text>
-                    ) : null}
-                </View>
+                <ProfileSummaryCard
+                    displayName={displayName}
+                    avatarUri={avatarUri}
+                    lines={[user?.username ? `@${user.username}` : null]}
+                />
 
                 {/* Profile picture */}
                 <SettingsListGroup title={t('editProfile.sections.profilePicture') || 'Profile Picture'}>
@@ -82,7 +76,7 @@ const EditProfileScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigat
                         title={t('editProfile.changeAvatar') || 'Change avatar'}
                         description={t('editProfile.items.avatar.subtitle') || 'Update your profile photo'}
                         onPress={openAvatarPicker}
-                        rightElement={<Avatar uri={avatarUri} name={displayName} size={32} />}
+                        rightElement={<Avatar source={avatarUri} name={displayName} size={32} />}
                     />
                 </SettingsListGroup>
 

package/src/ui/screens/FAQScreen.tsx

@@ -15,8 +15,7 @@ import {
 import { Text } from '@oxyhq/bloom/typography';
 import type { BaseScreenProps } from '../types/navigation';
 import Header from '../components/Header';
-import LoadingState from '../components/LoadingState';
-import EmptyState from '../components/EmptyState';
+import { Loading } from '@oxyhq/bloom/loading';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 
@@ -150,15 +149,15 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView className="flex-1 px-screen-margin" showsVerticalScrollIndicator={false}>
                 {isLoading ? (
-                    <LoadingState
-                        message={t('faq.loading') || 'Loading FAQs...'}
+                    <Loading
+                        size="large"
                         color={bloomTheme.colors.text}
+                        text={t('faq.loading') || 'Loading FAQs...'}
                     />
                 ) : filteredFaqs.length === 0 ? (
-                    <EmptyState
-                        message={searchQuery ? (t('faq.noResults') || 'No FAQs match your search') : (t('faq.empty') || 'No FAQs available')}
-                        textColor={bloomTheme.colors.text}
-                    />
+                    <Text className="text-text-secondary text-center p-space-40">
+                        {searchQuery ? (t('faq.noResults') || 'No FAQs match your search') : (t('faq.empty') || 'No FAQs available')}
+                    </Text>
                 ) : (
                     <Accordion
                         type="multiple"

package/src/ui/screens/FeedbackScreen.tsx

@@ -570,7 +570,6 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
         >
             <Header
                 title={t('feedback.title') || 'Feedback'}
-                theme={normalizedTheme}
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"