@oxyhq/services 22.5.0 → 22.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "22.5.0",
+  "version": "22.6.1",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -127,7 +127,7 @@
   },
   "dependencies": {
     "@oxyhq/contracts": "0.17.0",
-    "@oxyhq/core": "^12.5.0",
+    "@oxyhq/core": "^12.6.0",
     "@simplewebauthn/browser": "^13.3.0",
     "color": "^4.2.3"
   },
@@ -135,7 +135,8 @@
     "@biomejs/biome": "^1.9.4",
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
-    "@oxyhq/core": "12.5.4",
+    "@expo/vector-icons": "^15.0.3",
+    "@oxyhq/core": "12.7.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native/babel-preset": "^0.86.0",
@@ -176,7 +177,7 @@
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
     "@oxyhq/bloom": ">=0.16.0",
-    "@oxyhq/core": "^12.5.0",
+    "@oxyhq/core": "^12.6.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^11.4.1",
     "@tanstack/query-async-storage-persister": "^5.101",
@@ -213,9 +214,6 @@
     "expo-modules-core": {
       "optional": true
     },
-    "@expo/vector-icons": {
-      "optional": true
-    },
     "@types/react-native": {
       "optional": true
     },
@@ -225,9 +223,6 @@
     "react-native-keyboard-controller": {
       "optional": true
     },
-    "react-native-qrcode-svg": {
-      "optional": true
-    },
     "expo": {
       "optional": true
     },

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

@@ -0,0 +1,88 @@
+import type React from 'react';
+import { useState, useEffect } from 'react';
+import * as Font from 'expo-font';
+
+/**
+ * Get the Inter font sources for native environments.
+ * Loads all static Inter weights bundled with this package.
+ */
+const getInterFonts = () => {
+    try {
+        return {
+            'Inter-Light': require('../../assets/fonts/Inter/Inter_18pt-Light.ttf'),
+            'Inter-Regular': require('../../assets/fonts/Inter/Inter_18pt-Regular.ttf'),
+            'Inter-Medium': require('../../assets/fonts/Inter/Inter_18pt-Medium.ttf'),
+            'Inter-SemiBold': require('../../assets/fonts/Inter/Inter_18pt-SemiBold.ttf'),
+            'Inter-Bold': require('../../assets/fonts/Inter/Inter_18pt-Bold.ttf'),
+            'Inter-ExtraBold': require('../../assets/fonts/Inter/Inter_18pt-ExtraBold.ttf'),
+            'Inter-Black': require('../../assets/fonts/Inter/Inter_18pt-Black.ttf'),
+        };
+    } catch (error) {
+        if (__DEV__) {
+            console.warn('Failed to load Inter fonts:', error);
+        }
+        return null;
+    }
+};
+
+/**
+ * FontLoader — loads custom fonts in the background while rendering children
+ * immediately with system fonts as fallback until the custom fonts are ready.
+ */
+export const FontLoader = ({
+    children,
+}: {
+    children: React.ReactNode;
+}) => {
+    const [fontState, setFontState] = useState<'loading' | 'loaded' | 'error'>('loading');
+
+    useEffect(() => {
+        const loadFonts = async () => {
+            try {
+                const interFonts = getInterFonts();
+
+                if (!interFonts) {
+                    throw new Error('Inter font files not found');
+                }
+
+                await Font.loadAsync(interFonts);
+                setFontState('loaded');
+            } catch (error) {
+                if (__DEV__) {
+                    console.error('Error loading fonts:', error);
+                }
+                setFontState('error');
+            }
+        };
+
+        loadFonts();
+    }, []);
+
+    if (fontState === 'error' && __DEV__) {
+        console.warn('Fonts failed to load. Using system fonts instead.');
+    }
+
+    return <>{children}</>;
+};
+
+/**
+ * Setup fonts for applications consuming this package on native.
+ */
+export const setupFonts = async (): Promise<boolean> => {
+    try {
+        const interFonts = getInterFonts();
+
+        if (!interFonts) {
+            throw new Error('Inter font files not found');
+        }
+
+        await Font.loadAsync(interFonts);
+        return true;
+    } catch (error: unknown) {
+        if (__DEV__) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            console.warn('Error setting up fonts:', errorMessage);
+        }
+        return false;
+    }
+};

package/src/ui/components/FontLoader.tsx

@@ -1,162 +1,27 @@
 import type React from 'react';
-import { useState, useEffect } from 'react';
-import { Platform } from 'react-native';
-import * as Font from 'expo-font';
 
 /**
- * Get the Inter font sources for both native and web environments
- * This is specifically designed to work when distributed as an npm package
- */
-const getInterFonts = () => {
-    try {
-        // For both development and when used as a package
-        // Load all static font weights
-        return {
-            'Inter-Light': require('../../assets/fonts/Inter/Inter_18pt-Light.ttf'),
-            'Inter-Regular': require('../../assets/fonts/Inter/Inter_18pt-Regular.ttf'),
-            'Inter-Medium': require('../../assets/fonts/Inter/Inter_18pt-Medium.ttf'),
-            'Inter-SemiBold': require('../../assets/fonts/Inter/Inter_18pt-SemiBold.ttf'),
-            'Inter-Bold': require('../../assets/fonts/Inter/Inter_18pt-Bold.ttf'),
-            'Inter-ExtraBold': require('../../assets/fonts/Inter/Inter_18pt-ExtraBold.ttf'),
-            'Inter-Black': require('../../assets/fonts/Inter/Inter_18pt-Black.ttf'),
-        };
-    } catch (error) {
-        if (__DEV__) {
-        console.warn('Failed to load Inter fonts:', error);
-        }
-        return null;
-    }
-};
-
-/**
- * FontLoader component that loads custom fonts in the background while rendering children immediately
- * This works in both the package development and when consumed as an npm package
- * Children render immediately with system fonts as fallback until custom fonts are loaded
+ * Font loading — clean default (web, SSR, and any bundler that does not pick a
+ * platform variant).
+ *
+ * Web fonts are Bloom's job: `applyFontFaces()` in `@oxyhq/bloom` injects the
+ * Inter / BlomusModernus / Geist Mono `@font-face` rules as self-contained
+ * base64 data URLs, so there is nothing for this package to load off native.
+ * The real implementation lives in `FontLoader.native.tsx`.
+ *
+ * Keeping this module free of `expo-font` is load-bearing, not incidental:
+ * `expo-font/build/serverContext.web.js` imports `node:async_hooks`, which
+ * every browser bundler externalizes. A top-level `expo-font` import here
+ * therefore throws at module-evaluation time on web and React never mounts.
  */
 export const FontLoader = ({
     children,
 }: {
     children: React.ReactNode;
-}) => {
-    const [fontState, setFontState] = useState<'loading' | 'loaded' | 'error'>('loading');
-
-    useEffect(() => {
-        const loadFonts = async () => {
-            try {
-                // Get all the font weights
-                const interFonts = getInterFonts();
-
-                if (!interFonts) {
-                    throw new Error('Inter font files not found');
-                }
-
-                // Load all the static Inter fonts with their respective weights
-                await Font.loadAsync(interFonts);
-
-                setFontState('loaded');
-            } catch (error) {
-                if (__DEV__) {
-                console.error('Error loading fonts:', error);
-                }
-                setFontState('error');
-            }
-        };
-
-        loadFonts();
-    }, []);
-
-    // Always render children immediately - fonts will load in background
-    // If fonts aren't loaded yet, the app will use system fonts as fallback
-    if (fontState === 'error' && __DEV__) {
-        console.warn('Fonts failed to load. Using system fonts instead.');
-    }
-
-    // Render children immediately, even while fonts are loading
-    // Fonts will apply when they're ready, otherwise system fonts are used
-    return <>{children}</>;
-};
+}) => <>{children}</>;
 
 /**
- * Setup fonts for applications consuming this package
- * This should be called by applications using your package
+ * No-op off native. Returns `true` because setup genuinely succeeded — there is
+ * simply nothing to do here — so callers do not log a spurious failure.
  */
-export const setupFonts = async () => {
-    try {
-        const interFonts = getInterFonts();
-
-        if (!interFonts) {
-            throw new Error('Inter font files not found');
-        }
-
-        if (Platform.OS === 'web') {
-            // For web platform, dynamically inject CSS to load the fonts
-            if (typeof document !== 'undefined') {
-                // Create a style element
-                const style = document.createElement('style');
-
-                // Define @font-face rules for each font weight
-                const fontFaceRules = `
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-Light']}) format('truetype');
-                        font-weight: 300;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-Regular']}) format('truetype');
-                        font-weight: 400;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-Medium']}) format('truetype');
-                        font-weight: 500;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-SemiBold']}) format('truetype');
-                        font-weight: 600;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-Bold']}) format('truetype');
-                        font-weight: 700;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-ExtraBold']}) format('truetype');
-                        font-weight: 800;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-Black']}) format('truetype');
-                        font-weight: 900;
-                        font-style: normal;
-                    }
-                `;
-
-                style.textContent = fontFaceRules;
-                document.head.appendChild(style);
-                if (__DEV__) {
-                console.info('All Inter web fonts have been dynamically loaded');
-                }
-            }
-        } else {
-            // Attempt to load the fonts anyway (this works if the consumer has linked the assets)
-            await Font.loadAsync(interFonts);
-        }
-
-        return true;
-    } catch (error: unknown) {
-        if (__DEV__) {
-        const errorMessage = error instanceof Error ? (error instanceof Error ? error.message : null) : String(error);
-        console.warn('Error setting up fonts:', errorMessage);
-        }
-        return false;
-    }
-};
+export const setupFonts = async (): Promise<boolean> => true;

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

@@ -4,8 +4,8 @@ import { Ionicons } from '@expo/vector-icons';
 import { Dialog, type DialogControlProps } from '@oxyhq/bloom';
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { FileMetadata } from '@oxyhq/core';
+import { useI18n } from '../../hooks/useI18n';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
-import { fileManagementStyles } from './styles';
 
 interface FileDetailsModalProps {
     control: DialogControlProps;
@@ -24,6 +24,7 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
     isOwner,
     onClose,
 }) => {
+    const { t } = useI18n();
     const { colors } = useTheme();
 
     if (!file) return null;
@@ -31,78 +32,78 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
     const actions = isOwner
         ? [
               {
-                  label: 'Download',
+                  label: t('fileManagement.details.download'),
                   onPress: () => onDownload(file.id, file.filename),
               },
               {
-                  label: 'Delete',
+                  label: t('common.actions.delete'),
                   color: 'destructive' as const,
                   onPress: () => onDelete(file.id, file.filename),
               },
-              { label: 'Cancel', color: 'cancel' as const },
+              { label: t('common.cancel'), color: 'cancel' as const },
           ]
         : [
               {
-                  label: 'Download',
+                  label: t('fileManagement.details.download'),
                   onPress: () => onDownload(file.id, file.filename),
               },
-              { label: 'Cancel', color: 'cancel' as const },
+              { label: t('common.cancel'), color: 'cancel' as const },
           ];
 
     return (
         <Dialog
             control={control}
             onClose={onClose}
-            label="File Details"
+            label={t('fileManagement.details.title')}
             actions={actions}
         >
-            <View className="bg-secondary border-border" style={fileManagementStyles.fileDetailCard}>
-                <View style={fileManagementStyles.fileDetailIcon}>
+            <View className="bg-secondary border-border p-[18px] rounded-[14px] border items-center">
+                <View className="mb-space-16">
                     <Ionicons
-                        name={getFileIcon(file.contentType) as React.ComponentProps<typeof Ionicons>['name']}
+                        name={getFileIcon(file.contentType)}
                         size={64}
                         color={colors.primary}
                     />
                 </View>
 
-                <Text className="text-text" style={fileManagementStyles.fileDetailName}>
+                <Text className="text-text text-[20px] font-bold text-center mb-space-24">
                     {file.filename}
                 </Text>
 
-                <View style={fileManagementStyles.fileDetailInfo}>
-                    <View style={fileManagementStyles.detailRow}>
-                        <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
-                            Size:
+                <View className="w-full mb-space-32">
+                    <View className="flex-row justify-between items-start mb-space-12 flex-wrap">
+                        <Text className="text-text-secondary text-[16px] font-medium flex-1 min-w-[100px]">
+                            {t('fileManagement.size')}:
                         </Text>
-                        <Text className="text-text" style={fileManagementStyles.detailValue}>
+                        <Text className="text-text text-[16px] flex-[2] text-right">
                             {formatFileSize(file.length)}
                         </Text>
                     </View>
 
-                    <View style={fileManagementStyles.detailRow}>
-                        <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
-                            Type:
+                    <View className="flex-row justify-between items-start mb-space-12 flex-wrap">
+                        <Text className="text-text-secondary text-[16px] font-medium flex-1 min-w-[100px]">
+                            {t('fileManagement.details.type')}:
                         </Text>
-                        <Text className="text-text" style={fileManagementStyles.detailValue}>
+                        <Text className="text-text text-[16px] flex-[2] text-right">
                             {file.contentType}
                         </Text>
                     </View>
 
-                    <View style={fileManagementStyles.detailRow}>
-                        <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
-                            Uploaded:
+                    <View className="flex-row justify-between items-start mb-space-12 flex-wrap">
+                        <Text className="text-text-secondary text-[16px] font-medium flex-1 min-w-[100px]">
+                            {t('fileManagement.details.uploaded')}:
                         </Text>
-                        <Text className="text-text" style={fileManagementStyles.detailValue}>
+                        <Text className="text-text text-[16px] flex-[2] text-right">
                             {new Date(file.uploadDate).toLocaleString()}
                         </Text>
                     </View>
 
                     {file.metadata?.description && (
-                        <View style={fileManagementStyles.detailRow}>
-                            <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
-                                Description:
+                        <View className="flex-row justify-between items-start mb-space-12 flex-wrap">
+                            <Text className="text-text-secondary text-[16px] font-medium flex-1 min-w-[100px]">
+                                {t('fileManagement.details.description')}:
                             </Text>
-                            <Text className="text-text" style={fileManagementStyles.detailValue}>
+                            <Text className="text-text text-[16px] flex-[2] text-right">
                                 {file.metadata.description}
                             </Text>
                         </View>

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

@@ -70,7 +70,7 @@ const UploadPreviewContent: React.FC<{
                             ) : (
                                 <View style={[fileManagementStyles.uploadPreviewIconContainer, { backgroundColor: colors.backgroundSecondary }]}>
                                     <Ionicons
-                                        name={getFileIcon(pendingFile.type) as React.ComponentProps<typeof Ionicons>['name']}
+                                        name={getFileIcon(pendingFile.type)}
                                         size={32}
                                         color={colors.primary}
                                     />