@oxyhq/services 6.9.45 → 6.10.1

package/src/ui/components/OxyProvider.tsx

@@ -1,25 +1,52 @@
 import { lazy, Suspense, useEffect, useRef, useState, type ComponentType, type FC, type ReactNode } from 'react';
-import { AppState, Platform } from 'react-native';
+import { AppState, Platform, StyleSheet, View } from 'react-native';
 import type { OxyProviderProps } from '../types/navigation';
 import { OxyContextProvider, type OxyContextProviderProps } from '../context/OxyContext';
 import { QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
-import { BloomThemeProvider } from '@oxyhq/bloom';
+import { BloomDialogProvider, BloomThemeProvider } from '@oxyhq/bloom';
+import { ToastOutlet } from '@oxyhq/bloom/toast';
 import { setupFonts } from './FontLoader';
-import { Toaster } from '../../lib/sonner';
-import { createQueryClient } from '../hooks/queryClient';
+import { attachQueryPersistence, createQueryClient } from '../hooks/queryClient';
 import { createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
 
+/**
+ * Background color shown for the brief window between mount and the
+ * persisted-cache hydration completing. Matches the typical splash-screen
+ * backgrounds used across Oxy apps (dark surface, white-on-dark text), so
+ * the transition reads as a continuation of the splash instead of a
+ * white flash. Apps that need a different boot color can keep doing their
+ * own `expo-splash-screen` orchestration — this placeholder just guarantees
+ * we never render a transparent `null` while we wait.
+ *
+ * Light-mode background. Apps that boot into dark mode see a brief light
+ * flash here, which is unavoidable without re-implementing the BloomTheme
+ * resolver outside of `<BloomThemeProvider>`. The light value is far less
+ * jarring than `null` (transparent) on either theme.
+ */
+const BOOT_BG_COLOR = '#ffffff';
+
+const bootStyles = StyleSheet.create({
+    bootShell: {
+        flex: 1,
+        backgroundColor: BOOT_BG_COLOR,
+    },
+});
+
 // Initialize fonts automatically
 setupFonts();
 
 // Detect if running on web
 const isWeb = Platform.OS === 'web';
 
+// Variable indirection: the module name is computed at runtime so Metro's
+// static analyzer cannot trace this into the web bundle. Native-only.
+const KEYBOARD_CONTROLLER_MODULE = 'react-native-keyboard-controller';
+
 // Lazy-load optional components (avoids require() for ESM compatibility).
 // The .then() extracts + casts the default export so that `lazy()` sees
 // `Promise<{ default: ComponentType }>` instead of the full module namespace.
 const LazyBottomSheetRouter = lazy((): Promise<{ default: ComponentType }> =>
-    import('./BottomSheetRouter.js').then(
+    import('./BottomSheetRouter').then(
         (mod) => ({ default: mod.default as unknown as ComponentType }),
         (error) => {
             if (__DEV__) {
@@ -31,7 +58,7 @@ const LazyBottomSheetRouter = lazy((): Promise<{ default: ComponentType }> =>
 );
 
 const LazySignInModal = lazy((): Promise<{ default: ComponentType }> =>
-    import('./SignInModal.js').then(
+    import('./SignInModal').then(
         (mod) => ({ default: mod.default as unknown as ComponentType }),
         () => ({ default: (() => null) as FC }),
     ),
@@ -83,21 +110,37 @@ const OxyProvider: FC<OxyProviderProps> = ({
     colorPreset,
 }) => {
 
-    // Dynamic KeyboardProvider for native (avoids require() for ESM compatibility)
+    // Dynamic KeyboardProvider for native. Uses variable indirection
+    // (KEYBOARD_CONTROLLER_MODULE) so Metro's static analyzer cannot trace
+    // the import into the web bundle. On web, the runtime guard short-circuits
+    // before the import runs.
     const [KBProvider, setKBProvider] = useState<FC<{ children: ReactNode }> | null>(null);
     useEffect(() => {
         if (isWeb) return;
-        const moduleName = 'react-native-keyboard-controller';
-        import(/* webpackIgnore: true */ moduleName)
+        const moduleName = KEYBOARD_CONTROLLER_MODULE;
+        import(moduleName)
             .then((mod) => setKBProvider(() => mod.KeyboardProvider))
-            .catch(() => { /* KeyboardProvider not available */ });
+            .catch((error) => {
+                if (__DEV__) {
+                    console.warn('[OxyProvider] react-native-keyboard-controller not available, skipping keyboard support', error);
+                }
+            });
     }, []);
     const KeyboardWrapper: FC<{ children: ReactNode }> = KBProvider ?? (({ children }) => <>{children}</>);
 
-    // Simple storage initialization for query persistence
+    // Storage + persistence wiring.
+    //
+    // We MUST await the restore() promise before exposing the QueryClient to
+    // children — otherwise the first render sees an empty cache and any
+    // <Suspense> queries or `enabled: !!cached` gates would skip the offline
+    // hit. Once the persisted blob has been hydrated (or definitively failed
+    // to hydrate), we mark the client ready and unblock rendering.
     const storageRef = useRef<StorageInterface | null>(null);
     const queryClientRef = useRef<ReturnType<typeof createQueryClient> | null>(null);
-    // Initialize immediately if provided via prop to avoid a null-render frame
+    const persistenceUnsubRef = useRef<(() => void) | null>(null);
+
+    // If the consumer supplied their own QueryClient we use it as-is and skip
+    // persistence — their host app owns that lifecycle.
     const [queryClient, setQueryClient] = useState<ReturnType<typeof createQueryClient> | null>(() => {
         if (providedQueryClient) {
             queryClientRef.current = providedQueryClient;
@@ -113,31 +156,44 @@ const OxyProvider: FC<OxyProviderProps> = ({
             return;
         }
 
-        // Initialize storage and create query client
         let mounted = true;
-        createPlatformStorage()
-            .then((storage) => {
-                if (mounted && !queryClientRef.current) {
-                    storageRef.current = storage;
-                    const client = createQueryClient(storage);
-                    queryClientRef.current = client;
-                    setQueryClient(client);
-                }
-            })
-            .catch((error) => {
-                // If storage fails, create query client without persistence
-                if (mounted && !queryClientRef.current) {
-                    if (__DEV__) {
-                        console.warn('[OxyProvider] Failed to initialize storage for query persistence', error);
-                    }
-                    const client = createQueryClient(null);
-                    queryClientRef.current = client;
-                    setQueryClient(client);
+
+        const bootstrap = async (): Promise<void> => {
+            let storage: StorageInterface | null = null;
+            try {
+                storage = await createPlatformStorage();
+            } catch (error) {
+                if (__DEV__) {
+                    console.warn('[OxyProvider] Failed to initialize storage for query persistence', error);
                 }
-            });
+            }
+
+            if (!mounted || queryClientRef.current) return;
+
+            storageRef.current = storage;
+            const client = createQueryClient();
+            const { restored, unsubscribe } = attachQueryPersistence(client, storage);
+            persistenceUnsubRef.current = unsubscribe;
+
+            // Block first render until the persisted cache is restored so
+            // offline reads land synchronously on the very first paint.
+            await restored;
+
+            if (!mounted) {
+                unsubscribe();
+                return;
+            }
+
+            queryClientRef.current = client;
+            setQueryClient(client);
+        };
+
+        bootstrap();
 
         return () => {
             mounted = false;
+            persistenceUnsubRef.current?.();
+            persistenceUnsubRef.current = null;
         };
     }, [providedQueryClient]);
 
@@ -211,30 +267,54 @@ const OxyProvider: FC<OxyProviderProps> = ({
         };
     }, []);
 
-    // Ensure we have a valid QueryClient
+    // While the QueryClient is being created and the persisted cache is
+    // hydrating, render a solid-color shell instead of `null`. Returning
+    // `null` here on mid-range Android devices flashed a transparent
+    // surface for 200–600ms after the native splash hid, which read as a
+    // glitch. The shell keeps the screen filled with a sensible default
+    // until children can mount under a real <QueryClientProvider>.
     if (!queryClient) {
-        return null;
+        return (
+            <KeyboardWrapper>
+                <View style={bootStyles.bootShell} />
+            </KeyboardWrapper>
+        );
     }
 
     // Core content: QueryClient + OxyContext + UI overlays
     const coreContent = (
         <QueryClientProvider client={queryClient}>
+            {/*
+              * OxyProvider mounts BloomThemeProvider internally as a convenience —
+              * consumers do NOT need to wrap their own BloomThemeProvider. Any
+              * outer BloomThemeProvider from the consuming app will be shadowed
+              * by this one. Pass `themeMode` and `colorPreset` props instead.
+              */}
             <BloomThemeProvider mode={themeMode} colorPreset={colorPreset}>
-                <OxyContextProvider
-                    oxyServices={oxyServices as OxyContextProviderProps['oxyServices']}
-                    baseURL={baseURL}
-                    authWebUrl={authWebUrl}
-                    authRedirectUri={authRedirectUri}
-                    storageKeyPrefix={storageKeyPrefix}
-                    onAuthStateChange={onAuthStateChange as OxyContextProviderProps['onAuthStateChange']}
-                >
-                    {children}
-                    <Suspense fallback={null}>
-                        <LazyBottomSheetRouter />
-                        <LazySignInModal />
-                    </Suspense>
-                    <Toaster />
-                </OxyContextProvider>
+                {/*
+                  * BloomDialogProvider hosts the imperative `alert()` queue from
+                  * `@oxyhq/bloom`. Any code (event handlers, async callbacks,
+                  * module-scope helpers) calling `alert()` is rendered by this
+                  * provider. Mount once here so every consumer of OxyProvider
+                  * gets it without ceremony.
+                  */}
+                <BloomDialogProvider>
+                    <OxyContextProvider
+                        oxyServices={oxyServices as OxyContextProviderProps['oxyServices']}
+                        baseURL={baseURL}
+                        authWebUrl={authWebUrl}
+                        authRedirectUri={authRedirectUri}
+                        storageKeyPrefix={storageKeyPrefix}
+                        onAuthStateChange={onAuthStateChange as OxyContextProviderProps['onAuthStateChange']}
+                    >
+                        {children}
+                        <Suspense fallback={null}>
+                            <LazyBottomSheetRouter />
+                            <LazySignInModal />
+                        </Suspense>
+                        <ToastOutlet />
+                    </OxyContextProvider>
+                </BloomDialogProvider>
             </BloomThemeProvider>
         </QueryClientProvider>
     );

package/src/ui/components/OxySignInButton.tsx

@@ -4,7 +4,7 @@ import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyl
 import { useAuthStore } from '../stores/authStore';
 import { useShallow } from 'zustand/react/shallow';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { fontFamilies } from '../styles/fonts';
+import { useOxy } from '../context/OxyContext';
 import OxyLogo from './OxyLogo';
 import { showSignInModal, subscribeToSignInModal } from './SignInModal';
 
@@ -84,27 +84,37 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     showWhenAuthenticated = false,
 }) => {
     const theme = useTheme();
+    const { showBottomSheet } = useOxy();
     const { isAuthenticated, isLoading } = useAuthStore(
         useShallow((state) => ({ isAuthenticated: state.isAuthenticated, isLoading: state.isLoading }))
     );
+    // Tracks visibility of the web full-screen sign-in modal so we can show
+    // "Signing in..." while it's open. On native we open a bottom sheet whose
+    // visibility is owned by the sheet manager — no subscription needed.
     const [isModalOpen, setIsModalOpen] = useState(false);
 
-    // Subscribe to modal close events
+    // Subscribe to web modal visibility only — bottom sheet manages its own state.
     useEffect(() => {
+        if (Platform.OS !== 'web') return;
         return subscribeToSignInModal(setIsModalOpen);
     }, []);
 
-    // Handle button press - opens full-screen sign-in modal with QR code and auth options
+    // Handle button press
+    // - Web: legacy full-screen Modal (dialog UX fits desktop / browser)
+    // - Native: bottom sheet (sheet UX fits iOS/Android)
     const handlePress = useCallback(() => {
         if (onPress) {
             onPress();
             return;
         }
 
-        setIsModalOpen(true);
-        // Show the full-screen sign-in modal on all platforms
-        showSignInModal();
-    }, [onPress]);
+        if (Platform.OS === 'web') {
+            setIsModalOpen(true);
+            showSignInModal();
+        } else {
+            showBottomSheet?.('OxyAuth');
+        }
+    }, [onPress, showBottomSheet]);
 
     const themedStyles = useMemo(() => StyleSheet.create({
         button: {
@@ -114,7 +124,7 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
             justifyContent: 'center',
         },
         buttonDefault: {
-            backgroundColor: '#FFFFFF',
+            backgroundColor: theme.colors.card,
             borderWidth: 1,
             borderColor: theme.colors.borderLight,
             ...Platform.select({
@@ -147,7 +157,9 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
             justifyContent: 'center',
         },
         text: {
-            fontFamily: fontFamilies.interSemiBold,
+            // Bloom's BloomThemeProvider sets the default font via Text.defaultProps,
+            // so we intentionally do NOT set fontFamily here. Setting it would defeat
+            // the theme-wide font.
             fontWeight: Platform.OS === 'web' ? '600' : undefined,
             fontSize: 16,
             marginLeft: 10,

package/src/ui/components/ProfileCard.tsx

@@ -6,13 +6,14 @@ import { useI18n } from '../hooks/useI18n';
 import Avatar from './Avatar';
 import { useOxy } from '../context/OxyContext';
 import { useFileDownloadUrl } from '../hooks';
-import { fontFamilies } from '../styles/fonts';
+import { getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
 
 interface ProfileCardProps {
     user: {
-        username: string;
+        username?: string;
         email?: string;
-        name?: { full?: string };
+        name?: { full?: string; first?: string; last?: string };
+        publicKey?: string;
         avatar?: string; // file id
     };
     theme: 'light' | 'dark';
@@ -30,9 +31,12 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
 }) => {
     const { colors } = useTheme();
     const { oxyServices } = useOxy();
-    const { t } = useI18n();
+    const { t, locale } = useI18n();
 
     const avatarUrl = useFileDownloadUrl(oxyServices, user?.avatar, { variant: 'thumb' }).url || undefined;
+    const displayName = getAccountDisplayName(user, locale);
+    const handle = getAccountFallbackHandle(user);
+    const secondaryLine = user?.email ?? (handle && user?.username ? `@${handle}` : handle) ?? null;
 
     return (
         <View style={styles.headerSection}>
@@ -47,17 +51,17 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
                 <View style={styles.userProfile}>
                     <Avatar
                         uri={user?.avatar ? avatarUrl : undefined}
-                        name={user?.name?.full || user?.username}
+                        name={displayName}
                         size={60}
                         theme={theme}
                     />
                     <View style={styles.userInfo}>
-                        <Text className="text-foreground" style={styles.userName}>{user.username}</Text>
-                        {user.email && (
+                        <Text className="text-foreground" style={styles.userName}>{displayName}</Text>
+                        {secondaryLine ? (
                             <Text className="text-muted-foreground" style={styles.userEmail}>
-                                {user.email}
+                                {secondaryLine}
                             </Text>
-                        )}
+                        ) : null}
                         {onEditPress && (
                             <TouchableOpacity
                                 style={styles.editProfileButton}
@@ -112,7 +116,6 @@ const styles = StyleSheet.create({
     userName: {
         fontSize: 22,
         fontWeight: 'bold',
-        fontFamily: fontFamilies.interBold,
         marginBottom: 4,
     },
     userEmail: {

package/src/ui/components/QuickActions.tsx

@@ -17,7 +17,7 @@ interface QuickActionsProps {
 }
 
 const QuickActions: React.FC<QuickActionsProps> = ({ actions, theme }) => {
-    const { isDark } = useTheme();
+    const { colors } = useTheme();
 
     return (
         <View
@@ -34,7 +34,7 @@ const QuickActions: React.FC<QuickActionsProps> = ({ actions, theme }) => {
                         <TouchableOpacity
                             style={[
                                 styles.quickActionCircle,
-                                { backgroundColor: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.03)' }
+                                { backgroundColor: colors.backgroundTertiary }
                             ]}
                             onPress={action.onPress}
                         >

package/src/ui/components/SignInModal.tsx

@@ -133,17 +133,37 @@ const SignInModal: React.FC = () => {
         transform: [{ scale: scale.value }],
     }));
 
-    // Handle successful authorization
-    const handleAuthSuccess = useCallback(async (sessionId: string) => {
+    // Handle successful authorization.
+    //
+    // The auth-session socket (or fallback poll) hands us the new
+    // `sessionId`. Before any session-management code can touch it we
+    // MUST first exchange the secret `sessionToken` (held only by this
+    // client) for the first access token via `claimSessionByToken` —
+    // this is the device-flow equivalent of OAuth's code-for-token
+    // exchange (RFC 8628 §3.4).
+    //
+    // Without that exchange the SDK has no bearer token and every
+    // subsequent call (including `switchSession` -> `getTokenBySession`)
+    // would 401 against the C1-hardened API. Once `claimSessionByToken`
+    // plants the tokens in the HttpService, the rest of the session
+    // wiring (state, persistence, language preference) flows through
+    // the normal `switchSession` path.
+    const handleAuthSuccess = useCallback(async (sessionId: string, sessionToken: string) => {
         if (isProcessingRef.current) return;
         isProcessingRef.current = true;
 
         try {
+            // Plant the bearer + refresh tokens for this newly-authorized
+            // session. Single-use — replay attempts on this sessionToken
+            // are rejected by the API.
+            await oxyServices.claimSessionByToken(sessionToken);
+
+            // Now the SDK has a bearer token, the normal session
+            // management path can hydrate state from the sessionId.
             if (switchSession) {
                 await switchSession(sessionId);
-            } else {
-                await oxyServices.getTokenBySession(sessionId);
             }
+
             hideSignInModal();
         } catch (err) {
             debug.error('Error completing auth:', err);
@@ -190,7 +210,10 @@ const SignInModal: React.FC = () => {
 
             if (payload.status === 'authorized' && payload.sessionId) {
                 cleanup();
-                handleAuthSuccess(payload.sessionId);
+                // `sessionToken` was generated by this client and is in scope
+                // via the `sessionToken` arg — pass it through so the claim
+                // call can exchange it for the first access token.
+                handleAuthSuccess(payload.sessionId, sessionToken);
             } else if (payload.status === 'cancelled') {
                 cleanup();
                 setError('Authorization was denied.');
@@ -221,7 +244,9 @@ const SignInModal: React.FC = () => {
 
                 if (response.authorized && response.sessionId) {
                     cleanup();
-                    handleAuthSuccess(response.sessionId);
+                    // Pass the original sessionToken through; the claim
+                    // exchange needs it to mint the first access token.
+                    handleAuthSuccess(response.sessionId, sessionToken);
                 } else if (response.status === 'cancelled') {
                     cleanup();
                     setError('Authorization was denied.');
@@ -261,14 +286,14 @@ const SignInModal: React.FC = () => {
         }
     }, [oxyServices, connectSocket]);
 
-    // Generate a random session token
+    // Generate a cryptographically random session token.
+    // 16 random bytes -> 32 hex chars (128 bits of entropy) — unguessable.
+    // crypto.getRandomValues is guaranteed available because importing
+    // @oxyhq/core installs a polyfill via expo-crypto on React Native.
     const generateSessionToken = (): string => {
-        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        let result = '';
-        for (let i = 0; i < 32; i++) {
-            result += chars.charAt(Math.floor(Math.random() * chars.length));
-        }
-        return result;
+        const bytes = new Uint8Array(16);
+        crypto.getRandomValues(bytes);
+        return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
     };
 
     // Build the QR code data

package/src/ui/components/StepBasedScreen.tsx

@@ -14,7 +14,6 @@ import Animated, {
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { ThemeColors } from '@oxyhq/bloom/theme';
 import { createAuthStyles } from '../styles';
-import { fontFamilies } from '../styles/fonts';
 import type { BaseScreenProps, StepController } from '../types/navigation';
 import type { RouteName } from '../types/navigation';
 import { screenContentStyle } from '../constants/spacing';
@@ -163,7 +162,6 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
             marginBottom: 24,
         },
         modernTitle: {
-            fontFamily: fontFamilies.interBold,
             fontWeight: Platform.OS === 'web' ? 'bold' as const : undefined,
             fontSize: 42,
             lineHeight: 50.4, // 42 * 1.2

package/src/ui/components/TextField/Addons/Outline.tsx

@@ -7,7 +7,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import type { TextInputLabelProp } from '../types';
+import type { TextFieldLabelProp } from '../types';
 
 type OutlineProps = {
   isV3: boolean;
@@ -17,7 +17,7 @@ type OutlineProps = {
   focused?: boolean;
   outlineColor?: string;
   roundness?: number;
-  label?: TextInputLabelProp;
+  label?: TextFieldLabelProp;
   style?: StyleProp<ViewStyle>;
 };
 

package/src/ui/components/TextField/helpers.tsx

@@ -26,7 +26,7 @@ import {
   MD3_MIN_HEIGHT,
   MD3_OUTLINED_INPUT_OFFSET,
 } from './constants';
-import type { TextInputLabelProp } from './types';
+import type { TextFieldLabelProp } from './types';
 import type { InternalTheme } from "../types";
 
 type PaddingProps = {
@@ -37,7 +37,7 @@ type PaddingProps = {
   topPosition: number;
   fontSize: number;
   lineHeight?: number;
-  label?: TextInputLabelProp | null;
+  label?: TextFieldLabelProp | null;
   scale: number;
   offset: number;
   isAndroid: boolean;

package/src/ui/components/TextField/types.tsx

@@ -15,7 +15,6 @@ import type {
 import type { $Omit, InternalTheme, ThemeProp } from '../types';
 
 export type TextFieldLabelProp = string | React.ReactElement;
-export type TextInputLabelProp = TextFieldLabelProp; // Alias for backward compatibility
 
 type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
   mode?: 'flat' | 'outlined';

package/src/ui/components/TextField.tsx

@@ -185,7 +185,7 @@ interface CompoundedComponent
     Props & React.RefAttributes<TextFieldHandles>
   > {
   Icon: React.FunctionComponent<TextFieldIconProps>;
-  Affix: React.FunctionComponent<Partial<TextFieldAffixProps>>;
+  Affix: React.FunctionComponent<TextFieldAffixProps>;
 }
 
 type TextFieldHandles = Pick<
@@ -568,7 +568,6 @@ const TextField = forwardRef<TextFieldHandles, Props>(
 TextField.Icon = TextFieldIcon;
 
 // @component ./TextField/Adornment/TextFieldAffix.tsx
-// @ts-ignore Types of property 'theme' are incompatible.
 TextField.Affix = TextFieldAffix;
 
 export default TextField;

package/src/ui/components/TouchableRipple/TouchableRipple.native.tsx

@@ -136,7 +136,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   underlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     zIndex: 2,
   },
 });

package/src/ui/components/feedback/feedbackStyles.ts

@@ -1,6 +1,5 @@
 import { StyleSheet, Platform, Dimensions } from 'react-native';
 import { screenContentStyle } from '../../constants/spacing';
-import { fontFamilies } from '../../styles/fonts';
 import type { FeedbackColors } from './types';
 
 export const createFeedbackStyles = (colors: FeedbackColors) => StyleSheet.create({
@@ -26,7 +25,6 @@ export const createFeedbackStyles = (colors: FeedbackColors) => StyleSheet.creat
         marginBottom: 24,
     },
     stepTitle: {
-        fontFamily: fontFamilies.interBold,
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
         fontSize: 42,
         lineHeight: 48,

package/src/ui/components/fileManagement/AnimatedButton.tsx

@@ -1,7 +1,6 @@
 import type React from 'react';
 import { useEffect, useRef } from 'react';
 import { TouchableOpacity, Animated, Easing } from 'react-native';
-// @ts-ignore - MaterialCommunityIcons is available at runtime
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
 interface AnimatedButtonProps {