@oxy.so/services 1.0.0

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

@@ -0,0 +1,175 @@
+import type React from 'react';
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
+import { Image as ExpoImage } from 'expo-image';
+import Ionicons from '../../icons/Ionicons';
+import { Dialog, type DialogControlProps } from '@oxy.so/bloom/dialog';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
+import type { PendingUploadFile } from '../../screens/fileManagement/shared';
+
+interface UploadPreviewProps {
+    control?: DialogControlProps;
+    pendingFiles: PendingUploadFile[];
+    onConfirm: () => void;
+    onCancel: () => void;
+    onRemoveFile: (id: string) => void;
+    inline?: boolean;
+}
+
+// `expo-image` takes no className remap — the thumbnail size stays inline.
+const previewStyles = StyleSheet.create({
+    thumbnail: {
+        width: 60,
+        height: 60,
+        borderRadius: 8,
+    },
+});
+
+const UploadPreviewContent: React.FC<{
+    pendingFiles: PendingUploadFile[];
+    onConfirm: () => void;
+    onCancel: () => void;
+    onRemoveFile: (id: string) => void;
+    showActions?: boolean;
+}> = ({
+    pendingFiles,
+    onConfirm,
+    onCancel,
+    onRemoveFile,
+    showActions = true,
+}) => {
+    const { colors } = useTheme();
+    const totalSize = pendingFiles.reduce((sum, f) => sum + f.size, 0);
+
+    return (
+        <View className="bg-bg flex-1">
+            <View className="border-b border-border flex-row items-center justify-between px-[16px] py-[16px]">
+                <Text className="text-text text-[20px] font-bold">
+                    Review Files ({pendingFiles.length})
+                </Text>
+                <TouchableOpacity onPress={onCancel}>
+                    <Ionicons name="close" size={24} color={colors.text} />
+                </TouchableOpacity>
+            </View>
+
+            <ScrollView className="flex-1 p-[16px]">
+                {pendingFiles.map((pendingFile) => {
+                    const isImage = pendingFile.type.startsWith('image/');
+                    return (
+                        <View
+                            key={pendingFile.id}
+                            className="bg-secondary border-border flex-row items-center p-[12px] rounded-[12px] border mb-[12px] gap-[12px]"
+                        >
+                            {isImage && pendingFile.preview ? (
+                                <ExpoImage
+                                    source={{ uri: pendingFile.preview }}
+                                    style={previewStyles.thumbnail}
+                                    contentFit="cover"
+                                />
+                            ) : (
+                                <View
+                                    className="w-[60px] h-[60px] rounded-[8px] items-center justify-center"
+                                    style={{ backgroundColor: colors.backgroundSecondary }}
+                                >
+                                    <Ionicons
+                                        name={getFileIcon(pendingFile.type)}
+                                        size={32}
+                                        color={colors.primary}
+                                    />
+                                </View>
+                            )}
+                            <View className="flex-1 min-w-0">
+                                <Text className="text-text text-[16px] font-semibold mb-[4px]" numberOfLines={1}>
+                                    {pendingFile.name}
+                                </Text>
+                                <Text className="text-text-secondary text-[13px]">
+                                    {formatFileSize(pendingFile.size)} • {pendingFile.type}
+                                </Text>
+                            </View>
+                            <TouchableOpacity
+                                className="p-[4px]"
+                                onPress={() => onRemoveFile(pendingFile.id)}
+                            >
+                                <Ionicons name="close-circle" size={24} color={colors.error} />
+                            </TouchableOpacity>
+                        </View>
+                    );
+                })}
+            </ScrollView>
+
+            <View className="border-t border-border p-[16px]">
+                <View className="flex-row justify-between mb-[16px]">
+                    <Text className="text-text text-[15px] font-semibold">
+                        {pendingFiles.length} file{pendingFiles.length !== 1 ? 's' : ''}
+                    </Text>
+                    <Text className="text-text text-[15px] font-semibold">
+                        {formatFileSize(totalSize)}
+                    </Text>
+                </View>
+                {showActions && (
+                    <View className="flex-row gap-[12px]">
+                        <TouchableOpacity
+                            className="bg-transparent border-border flex-1 py-[14px] rounded-[12px] border items-center justify-center"
+                            onPress={onCancel}
+                        >
+                            <Text className="text-text text-[16px] font-semibold">
+                                Cancel
+                            </Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            className="bg-primary flex-[2] flex-row items-center justify-center py-[14px] rounded-[12px] gap-[8px]"
+                            onPress={onConfirm}
+                        >
+                            <Ionicons name="cloud-upload" size={20} color={colors.primaryForeground} />
+                            <Text className="text-[16px] font-semibold" style={{ color: colors.primaryForeground }}>Upload</Text>
+                        </TouchableOpacity>
+                    </View>
+                )}
+            </View>
+        </View>
+    );
+};
+
+export const UploadPreview: React.FC<UploadPreviewProps> = ({
+    control,
+    pendingFiles,
+    onConfirm,
+    onCancel,
+    onRemoveFile,
+    inline = false,
+}) => {
+    // Inline mode: render content directly without Dialog
+    if (inline) {
+        return (
+            <UploadPreviewContent
+                pendingFiles={pendingFiles}
+                onConfirm={onConfirm}
+                onCancel={onCancel}
+                onRemoveFile={onRemoveFile}
+            />
+        );
+    }
+
+    // Dialog mode: requires control prop
+    if (!control) return null;
+
+    return (
+        <Dialog
+            control={control}
+            onClose={onCancel}
+            label="Review Files"
+            actions={[
+                { label: 'Upload', onPress: onConfirm },
+                { label: 'Cancel', color: 'cancel' },
+            ]}
+        >
+            <UploadPreviewContent
+                pendingFiles={pendingFiles}
+                onConfirm={onConfirm}
+                onCancel={onCancel}
+                onRemoveFile={onRemoveFile}
+                showActions={false}
+            />
+        </Dialog>
+    );
+};

package/src/ui/components/icon/FAIRWalletIcon.tsx

@@ -0,0 +1,49 @@
+import type React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { G, Path } from 'react-native-svg';
+
+interface FAIRWalletIconProps {
+    size?: number;
+    style?: StyleProp<ViewStyle>;
+}
+
+const FAIRWalletIcon: React.FC<FAIRWalletIconProps> = ({ size = 28, style }) => {
+    const containerSize = size + 18;
+    return (
+        <View
+            style={[
+                styles.circle,
+                { width: containerSize, height: containerSize, borderRadius: containerSize / 2 },
+                style,
+            ]}
+        >
+            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+                <Svg
+                    viewBox="0 0 157.26 85.66"
+                    width={containerSize * 0.8}
+                    height={containerSize * 0.8}
+                    preserveAspectRatio="xMidYMid meet"
+                >
+                    <G data-name="Layer 2">
+                        <G data-name="Layer 1">
+                            <Path d="M10.25,20.81a20.49,20.49,0,0,1,28,7.5L53.6,54.92a20.49,20.49,0,0,1-7.5,28h0a20.49,20.49,0,0,1-28-7.5L2.75,48.8a20.49,20.49,0,0,1,7.5-28Z" fill="rgb(159, 251, 80)" />
+                            <Path d="M74.38,2.75a20.49,20.49,0,0,0-28,7.5L20.6,54.92a20.5,20.5,0,0,0,7.5,28h0a20.5,20.5,0,0,0,28-7.5L81.88,30.74a20.48,20.48,0,0,0-7.5-28Z" fill="rgb(159, 251, 80)" />
+                            <Path d="M127.87,2.75a20.49,20.49,0,0,0-28,7.5L74.09,54.92a20.49,20.49,0,0,0,7.5,28h0a20.49,20.49,0,0,0,28-7.5l25.79-44.67a20.49,20.49,0,0,0-7.5-28Z" fill="rgb(255, 255, 255)" />
+                            <Path d="M121.84,67.51a17.71,17.71,0,1,1,17.71,17.71,17.71,17.71,0,0,1-17.71-17.71Z" fill="rgb(255, 255, 255)" />
+                        </G>
+                    </G>
+                </Svg>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    circle: {
+        backgroundColor: '#1b1f0a',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+export default FAIRWalletIcon; 

package/src/ui/components/internal/PinInput.tsx

@@ -0,0 +1,123 @@
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { View, TextInput, StyleSheet, Platform, type NativeSyntheticEvent, type TextInputKeyPressEventData } from 'react-native';
+import { useTheme } from '@oxy.so/bloom/theme';
+
+interface PinInputColors {
+    primary: string;
+    secondary?: string;
+    background: string;
+    inputBackground: string;
+    text: string;
+    border: string;
+}
+
+export interface PinInputProps {
+    value: string;
+    onChange: (val: string) => void;
+    length?: number;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    colors: PinInputColors;
+}
+
+export interface PinInputHandle {
+    focus: () => void;
+}
+
+const PinInput = forwardRef<PinInputHandle, PinInputProps>(({ value, onChange, length = 6, disabled, autoFocus, colors }, ref) => {
+    const theme = useTheme();
+    const inputs = useRef<Array<TextInput | null>>([]);
+
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            inputs.current[0]?.focus();
+        }
+    }), []);
+
+    const handleChange = (text: string, idx: number) => {
+        if (!/^[0-9]*$/.test(text)) return;
+        let newValue = value.split('');
+        if (text.length > 1) {
+            // Paste or autofill
+            newValue = text.split('').slice(0, length);
+            onChange(newValue.join(''));
+            if (newValue.length < length) {
+                inputs.current[newValue.length]?.focus();
+            }
+            return;
+        }
+        newValue[idx] = text;
+        const joined = newValue.join('').slice(0, length);
+        onChange(joined);
+        if (text && idx < length - 1) {
+            inputs.current[idx + 1]?.focus();
+        }
+    };
+
+    const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>, idx: number) => {
+        if (e.nativeEvent.key === 'Backspace' && !value[idx] && idx > 0) {
+            inputs.current[idx - 1]?.focus();
+        }
+    };
+
+    return (
+        <View style={styles.pinContainer}>
+            {Array.from({ length }).map((_, idx) => (
+                <TextInput
+                    // biome-ignore lint/suspicious/noArrayIndexKey: fixed-position PIN cells, order never changes
+                    key={`pin-input-${idx}`}
+                    ref={(ref) => { inputs.current[idx] = ref; }}
+                    style={[
+                        styles.pinInput,
+                        { borderColor: colors.primary, color: colors.text, backgroundColor: colors.inputBackground || theme.colors.backgroundSecondary },
+                        value[idx] ? { borderWidth: 2 } : { borderWidth: 1 },
+                    ]}
+                    value={value[idx] || ''}
+                    onChangeText={text => handleChange(text, idx)}
+                    onKeyPress={e => handleKeyPress(e, idx)}
+                    keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
+                    maxLength={1}
+                    editable={!disabled}
+                    autoFocus={autoFocus && idx === 0}
+                    textAlign="center"
+                    selectionColor={colors.primary}
+                    returnKeyType="done"
+                />
+            ))}
+        </View>
+    );
+});
+
+const styles = StyleSheet.create({
+    pinContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 12,
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    pinInput: {
+        width: 44,
+        height: 54,
+        borderRadius: 12,
+        borderWidth: 1,
+        fontSize: 28,
+        fontWeight: '600',
+        textAlign: 'center',
+        marginHorizontal: 2,
+        ...Platform.select({
+            web: {
+                boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
+            },
+            default: {
+                shadowColor: '#000',
+                shadowOpacity: 0.04,
+                shadowOffset: { width: 0, height: 1 },
+                shadowRadius: 4,
+                elevation: 1,
+            }
+        }),
+    },
+});
+
+export default PinInput;

package/src/ui/components/logo/LogoIcon.tsx

@@ -0,0 +1,71 @@
+import type React from 'react';
+import type { ReactElement } from 'react';
+import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';
+import type { ViewStyle } from 'react-native';
+import { useTheme } from '@oxy.so/bloom/theme';
+
+interface LogoIconProps {
+  /**
+   * Color of the primary fill. Defaults to the resolved Bloom theme primary
+   * color. Pass an explicit color for splash screens or contexts where the
+   * Bloom theme is not yet mounted.
+   */
+  color?: string;
+  /**
+   * Color of the interior letter overlay. Defaults to white. Override only
+   * when rendering on a light background where white would disappear.
+   */
+  letterColor?: string;
+  /** Height in pixels. Width is derived from the SVG viewBox aspect ratio. */
+  height?: number;
+  /** Style passed through to the root SVG element. */
+  style?: ViewStyle;
+}
+
+const VIEW_BOX_WIDTH = 1009.84;
+const VIEW_BOX_HEIGHT = 1002.84;
+const VIEW_BOX = `80.58 263.58 ${VIEW_BOX_WIDTH} ${VIEW_BOX_HEIGHT}`;
+const CLIP_ID = 'oxy-logo-icon-clip';
+const DEFAULT_HEIGHT = 64;
+
+const OUTER_PATH =
+  'M520.4336 284.25c-48.73438 5.57422-93.89844 40.73047-120.91016 93.60938-13.57422 26.72656-22.57813 60.8828-24.4375 92.32421l-.85547 15.29297-12.29297-6.28906c-34.8711-17.72266-66.16797-25.4414-103.75781-25.58203-33.15625-.14453-56.59375 4.85937-81.3164 17.14844-37.73048 18.86718-61.59767 48.16406-72.46095 88.60937-4 15.0039-4.42968 47.30469-.85546 63.59766 8.28906 36.8711 26.72656 70.74218 54.30859 99.46875 13.71875 14.14843 36.01562 32.30078 48.01953 39.01562 3.14453 1.85938 5.85938 3.71485 5.85938 4.14453 0 .4297-2.57422 2.28907-5.71875 4.14454-12.28907 7.0039-34.29688 25.01171-47.875 39.16015-59.88282 62.16797-74.60157 144.77344-36.30079 203.51172 21.4375 32.8711 55.3086 54.3086 99.1836 62.88281 17.57812 3.42969 53.44922 3.42969 72.74219 0 23.72656-4.28906 45.44921-11.57422 67.88671-22.86719l13.00391-6.57421v8.28906c0 19.15234 4.85938 46.44922 12.29297 68.88672 29.72656 90.03515 106.32812 140.6289 182.64453 120.76172 35.44531-9.28907 69.3164-35.15625 92.32422-70.7422 19.72266-30.58202 33.01562-72.60155 35.30078-111.7578l.85938-15.15235 12.71875 6.4336c36.01562 18.0078 66.74218 25.4375 105.47265 25.29687 36.15625-.14453 62.59766-6.86328 90.75-23.29687 14.71875-8.57422 36.30078-29.8711 44.875-44.16016 14.00781-23.29688 19.00781-41.875 19.15234-70.3164.14063-29.15235-3.85937-46.16016-17.57812-75.31641-16.57813-35.01563-49.02344-71.17188-83.17969-92.32422-5.28515-3.28516-9.71875-6.28906-9.71875-6.71484 0-.4297 4.4336-3.4297 9.71875-6.71875 24.15235-15.00391 52.45313-42.44532 68.17188-66.16797 25.4375-38.16016 36.8711-79.32032 32.30078-116.6211-7.71875-62.16797-52.02344-106.75781-119.48047-120.05078-19.00781-3.85547-54.8789-3.57031-75.7461.57422-21.72265 4.28516-39.73046 10.28906-60.30859 20.29297l-17.57812 8.4336v-8.14844c0-40.30079-16.57813-91.89454-40.16016-125.33594-27.72656-39.01563-64.88281-62.45313-107.61719-67.88672-12.71875-1.57031-14.14843-1.57031-29.4375.14453zm0 0';
+
+const INNER_PURPLE_PATH =
+  'M347.55328 964.6769c-49.26953 3.6211-93.6914-5.95703-133.25781-28.73437-36.3789-20.9414-67.09375-49.97656-92.14453-87.10547-23.0039-34.08984-41.0586-73.63281-54.16407-118.63281-12.41406-42.61719-20.35937-87.60156-23.83984-134.94922-3.27734-44.58203-1.6836-90.02734 4.78125-136.34375 6.73828-48.27734 19.41406-92.66406 38.02344-133.15625 19.95703-43.41797 46.86719-79.98047 80.73047-109.6875 38.33984-33.63672 84.80078-52.46094 139.38281-56.46875 54.17969-3.98437 101.57031 7.91797 142.17969 35.69922 35.92187 24.57422 65.29687 57.1836 88.13281 97.82031 20.57031 36.60938 36.33203 77.66797 47.28516 123.17969 10.30078 42.79687 17.04297 85.88672 20.23047 129.25781 3.62109 49.26953 2.11718 96.4414-4.51563 141.52344-6.98438 47.47266-19.98828 90.26563-39.00781 128.375-20.59375 41.27344-48.125 75.05078-82.58594 101.33594-36.99219 28.21093-80.73828 44.17578-131.23047 47.88672zm-10.72656-145.91796c21.5625-1.58594 39.30469-7.6875 53.22656-18.30469 16.45313-12.55078 29.91797-29.32813 40.40235-50.33203 12.0625-24.16797 20.44921-52.28125 25.16796-84.33984 5.06641-34.44922 6.1836-70.94922 3.35157-109.5-2.60547-35.4375-8.125-70.6875-16.5625-105.75-7.78907-32.34766-18.65235-60.9297-32.58985-85.7422-11.67578-20.77734-26.07422-37.02343-43.19531-48.73827-12.42969-8.50391-28.71094-12.01563-48.83984-10.53516-21.97657 1.61328-39.85157 8.46094-53.6172 20.53516-18.24218 16.0039-33 36.27343-44.27343 60.80468-12.61719 27.45313-21.30469 58.21485-26.0625 92.28125-5.02734 36.03516-6.28516 71.16407-3.76953 105.39454 2.72656 37.09375 8.85937 72.01171 18.39453 104.7539 8.84375 30.35938 20.5039 56.26563 34.97656 77.71875 12.42188 18.41016 27.03907 32.45703 43.84766 42.13281 13.6211 7.83985 30.13672 11.04688 49.54297 9.6211zm-13.76953-326.00781c5.33594-.39063 10.48047-1.96094 15.4336-4.70313 4.35155-2.41016 7.85546-5.32812 10.51171-8.75-1.22266 1.57422-2.5664 4.92188-4.03125 10.05078-2.5625 8.94922-4.1836 19.3789-4.86328 31.29688-.8086 14.15625-.6875 28.37109.36328 42.64453 1.21875 16.58984 3.5039 33.11328 6.86328 49.57031 3.08594 15.1289 6.90234 28.3125 11.44531 39.55078 2.89844 7.16016 5.48828 11.98047 7.77735 14.46094-2.85547-3.09375-6.64844-5.66797-11.38672-7.71875-6.2461-2.70703-12.67578-3.8164-19.28125-3.32813-7.82422.57422-15.04688 3.29688-21.66797 8.17188-4.82812 3.55469-8.26953 7.39844-10.32031 11.53516 3.17578-6.39844 5.63672-14.89063 7.38672-25.46875 2.29687-13.86329 3.46093-28.15625 3.49218-42.88282.03907-16.83593-.33203-30.52734-1.10546-41.07031-.91016-12.3711-2.70313-25.53906-5.37891-39.4961-2.34766-12.23046-5.45313-23.22265-9.3164-32.97656-2.39454-6.03515-4.7461-10.35547-7.0625-12.96093 3.26952 3.67968 7.53906 6.64453 12.80859 8.88671 6.05859 2.57813 12.17187 3.64063 18.33203 3.1875zm-10.72266-145.91797c17.42188-1.28125 33.98047 1.41797 49.6836 8.10156 14.90624 6.34375 28.0078 15.8711 39.29687 28.58594 13.73047 15.45703 24.95703 34.1914 33.67969 56.20703 7.2539 18.29687 12.91797 38.07031 16.99218 59.32812 3.7461 19.52735 6.28125 38.30469 7.60547 56.33203 1.04688 14.22266 1.54688 31.59766 1.5 52.1211-.05078 22.63672-1.87109 44.78515-5.45312 66.44531-4.1289 24.9414-11.01563 47.13672-20.65625 66.58203-8.46094 17.0586-19.80078 30.82422-34.02735 41.29297-16.01953 11.78906-34.1328 18.42969-54.33984 19.91406-17.30078 1.26953-33.82812-1.5039-49.57422-8.32031-14.23828-6.16406-26.9336-15.30078-38.08984-27.40625-14.3164-15.54297-26.2539-35.1211-35.8086-58.74219-7.90234-19.54297-14.29296-41.26562-19.16796-65.17187-4.60547-22.57422-7.7461-45.26953-9.42578-68.08594-1.51563-20.6289-1.6875-41.19922-.51563-61.71484 1.30078-22.75391 4.72266-43.82032 10.26953-63.20313 6.63672-23.19922 16.32422-43.01562 29.0625-59.44531 9.63672-12.42969 21.04688-22.29297 34.23828-29.59766 13.78906-7.63672 28.69922-12.04687 44.73047-13.22265zm0 0';
+
+const INNER_LETTERS_PATH =
+  'M342.19 891.70425c-34.34375 2.53125-64.8125-3.85547-91.40625-19.15625-26.59375-15.3125-49.26172-36.85156-68-64.625-18.73047-27.78125-33.58594-60.5039-44.5625-98.17188-10.96875-37.67578-18.0039-77.625-21.10938-119.84375-2.89453-39.40625-1.46874-79.6953 4.28126-120.875 5.75-41.17578 16.42578-78.75 32.03124-112.71875 15.61329-33.97656 36.44532-62.39453 62.5-85.25 26.05079-22.85156 58.21875-35.6875 96.5-38.5 37.14454-2.72656 68.97657 4.98047 95.5 23.125 26.51954 18.13672 48.40625 42.5625 65.65625 73.28126 17.25782 30.71093 30.57032 65.53125 39.9375 104.46875 9.375 38.92968 15.50782 78.09375 18.40626 117.5 3.22656 43.90625 1.91406 85.74609-3.9375 125.51562-5.84375 39.76172-16.53907 75.21094-32.07813 106.34375-15.54297 31.13672-36.04297 56.41406-61.5 75.82813-25.44922 19.40625-56.1875 30.42968-92.21875 33.07812zm-24.5-471.89063c-10.69922.78125-19.53906 5.67188-26.51563 14.67188-6.98046 8.99219-12.49609 20.57031-16.54687 34.73438-4.04297 14.16796-6.5625 29.92187-7.5625 47.26562-.99219 17.33594-.84375 34.73047.4375 52.1875 1.44531 19.69922 4.16016 39.30469 8.14063 58.8125 3.98828 19.51172 9.09375 36.96484 15.3125 52.35938 6.22656 15.39843 13.49218 27.60156 21.79687 36.60937 8.30078 9 17.80078 13.10938 28.5 12.32813 12.38281-.91407 21.78125-7.83204 28.1875-20.75 6.40625-12.91407 11.07813-28.25391 14.01563-46.01563 2.9453-17.75781 4.4414-35.97656 4.48437-54.65625.03906-18.6875-.39844-34.21875-1.3125-46.59375-1.11719-15.19531-3.28125-31.17188-6.5-47.92188-3.21094-16.75-7.59375-32.1328-13.15625-46.15625-5.55469-14.01953-12.33984-25.54687-20.35938-34.57812-8.02343-9.03125-17.66406-13.1289-28.92187-12.29688z';
+
+const CLIP_PATH = 'M0 0h1427v1151H0z';
+
+export const LogoIcon: React.FC<LogoIconProps> = ({
+  color,
+  letterColor,
+  height: heightProp,
+  style,
+}): ReactElement => {
+  const height = heightProp ?? DEFAULT_HEIGHT;
+  const width = height * (VIEW_BOX_WIDTH / VIEW_BOX_HEIGHT);
+
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.primary;
+  const resolvedLetterColor = letterColor ?? '#ffffff';
+
+  return (
+    <Svg width={width} height={height} viewBox={VIEW_BOX} style={style}>
+      <Defs>
+        <ClipPath id={CLIP_ID}>
+          <Path d={CLIP_PATH} />
+        </ClipPath>
+      </Defs>
+      <Path d={OUTER_PATH} fill={resolvedColor} />
+      <G clipPath={`url(#${CLIP_ID})`} transform="translate(465 188)">
+        <Path d={INNER_PURPLE_PATH} fill={resolvedColor} />
+        <Path d={INNER_LETTERS_PATH} fill={resolvedLetterColor} />
+      </G>
+    </Svg>
+  );
+};
+
+export default LogoIcon;

package/src/ui/components/logo/LogoText.tsx

@@ -0,0 +1,71 @@
+import type React from 'react';
+import type { ReactElement } from 'react';
+import Svg, { G, Path } from 'react-native-svg';
+import type { ViewStyle } from 'react-native';
+import { useTheme } from '@oxy.so/bloom/theme';
+
+interface LogoTextProps {
+  /**
+   * Color of the primary fill. Defaults to the resolved Bloom theme primary
+   * color. Pass an explicit color for splash screens or contexts where the
+   * Bloom theme is not yet mounted.
+   */
+  color?: string;
+  /**
+   * Color of the interior letter overlay. Defaults to white. Override only
+   * when rendering on a light background where white would disappear.
+   */
+  letterColor?: string;
+  /** Height in pixels. Width is derived from the SVG viewBox aspect ratio. */
+  height?: number;
+  /** Style passed through to the root SVG element. */
+  style?: ViewStyle;
+}
+
+const VIEW_BOX_WIDTH = 41;
+const VIEW_BOX_HEIGHT = 22;
+const DEFAULT_HEIGHT = 26;
+
+const OUTER_PATHS = [
+  'M 9.492 0.03 C 8.39 0.157 7.368 0.958 6.758 2.163 C 6.451 2.772 6.247 3.55 6.205 4.266 L 6.186 4.615 L 5.908 4.472 C 5.119 4.068 4.411 3.892 3.561 3.889 C 2.811 3.885 2.281 3.999 1.722 4.279 C 0.869 4.709 0.329 5.377 0.084 6.298 C -0.007 6.64 -0.016 7.376 0.064 7.747 C 0.252 8.588 0.669 9.359 1.292 10.014 C 1.603 10.336 2.107 10.75 2.378 10.903 C 2.449 10.945 2.511 10.987 2.511 10.997 C 2.511 11.007 2.453 11.049 2.382 11.092 C 2.104 11.251 1.606 11.662 1.299 11.984 C -0.055 13.401 -0.388 15.283 0.478 16.621 C 0.963 17.37 1.729 17.859 2.721 18.054 C 3.119 18.132 3.93 18.132 4.366 18.054 C 4.903 17.956 5.394 17.79 5.901 17.533 L 6.195 17.383 L 6.195 17.572 C 6.195 18.008 6.305 18.63 6.473 19.142 C 7.146 21.193 8.878 22.346 10.604 21.893 C 11.405 21.682 12.171 21.092 12.691 20.281 C 13.137 19.584 13.438 18.627 13.49 17.735 L 13.509 17.39 L 13.797 17.536 C 14.611 17.947 15.306 18.116 16.182 18.113 C 17 18.109 17.597 17.956 18.234 17.582 C 18.567 17.386 19.055 16.901 19.249 16.575 C 19.566 16.045 19.679 15.621 19.682 14.973 C 19.685 14.309 19.595 13.922 19.284 13.257 C 18.91 12.459 18.176 11.636 17.404 11.154 C 17.284 11.079 17.184 11.01 17.184 11.001 C 17.184 10.991 17.284 10.922 17.404 10.848 C 17.95 10.506 18.59 9.88 18.945 9.34 C 19.52 8.47 19.779 7.532 19.676 6.683 C 19.501 5.266 18.499 4.25 16.974 3.947 C 16.544 3.859 15.733 3.866 15.261 3.96 C 14.769 4.058 14.362 4.195 13.897 4.423 L 13.499 4.615 L 13.499 4.429 C 13.499 3.511 13.124 2.335 12.591 1.573 C 11.964 0.684 11.124 0.15 10.158 0.027 C 9.87 -0.009 9.838 -0.009 9.492 0.03 Z',
+  'M 15.54 19.794 C 14.425 19.874 13.421 19.654 12.528 19.133 C 11.706 18.654 11.013 17.991 10.448 17.143 C 9.93 16.365 9.523 15.464 9.229 14.438 C 8.951 13.466 8.773 12.44 8.697 11.361 C 8.625 10.346 8.663 9.31 8.812 8.255 C 8.967 7.155 9.255 6.145 9.678 5.223 C 10.132 4.235 10.742 3.403 11.509 2.728 C 12.378 1.963 13.43 1.537 14.664 1.448 C 15.89 1.36 16.961 1.634 17.878 2.269 C 18.689 2.83 19.351 3.575 19.866 4.502 C 20.329 5.337 20.683 6.273 20.929 7.311 C 21.16 8.287 21.31 9.269 21.38 10.257 C 21.459 11.38 21.423 12.455 21.271 13.482 C 21.11 14.563 20.814 15.537 20.382 16.405 C 19.915 17.344 19.29 18.112 18.51 18.71 C 17.672 19.351 16.682 19.712 15.54 19.794 Z',
+  'M 31.928 3.669 C 31.925 4.125 31.844 4.596 31.686 5.082 C 31.559 5.471 31.403 5.862 31.216 6.255 C 31.045 6.614 30.862 6.967 30.665 7.313 C 30.505 7.595 30.344 7.877 30.18 8.157 L 28.754 7.312 L 30.21 8.105 L 29.317 9.767 C 29.002 10.357 28.67 10.938 28.322 11.509 L 26.912 10.636 L 28.342 9.798 C 28.517 10.101 28.739 10.508 29.007 11.017 C 29.281 11.537 29.547 12.084 29.806 12.656 C 30.071 13.242 30.302 13.815 30.5 14.377 C 30.746 15.076 30.867 15.691 30.863 16.221 C 30.859 16.798 30.701 17.334 30.388 17.828 C 30.154 18.196 29.849 18.477 29.47 18.67 C 29.123 18.847 28.742 18.934 28.328 18.931 C 27.59 18.925 26.895 18.65 26.243 18.105 C 25.802 17.736 25.39 17.303 25.006 16.807 C 24.66 16.36 24.342 15.901 24.053 15.431 C 23.787 15.001 23.576 14.651 23.418 14.382 L 24.843 13.535 L 26.145 14.563 C 25.915 14.858 25.68 15.149 25.44 15.436 C 25.226 15.691 25.017 15.95 24.812 16.213 L 24.289 16.87 C 24.053 17.165 23.796 17.454 23.519 17.736 C 23.199 18.063 22.866 18.341 22.518 18.571 C 21.989 18.921 21.443 19.094 20.879 19.09 C 20.387 19.086 19.951 18.959 19.571 18.707 C 19.253 18.496 18.995 18.225 18.796 17.891 C 18.633 17.619 18.517 17.323 18.447 17.003 C 18.39 16.742 18.362 16.476 18.364 16.209 C 18.368 15.63 18.467 15.053 18.662 14.478 C 18.827 13.991 19.02 13.537 19.242 13.113 L 20.705 13.891 L 19.213 13.17 C 19.86 11.811 20.539 10.468 21.248 9.141 L 22.705 9.931 L 21.207 10.64 C 21.054 10.311 20.868 9.866 20.648 9.304 C 20.433 8.754 20.221 8.178 20.014 7.576 C 19.799 6.956 19.615 6.351 19.462 5.761 C 19.281 5.071 19.193 4.485 19.196 4.003 C 19.201 3.312 19.378 2.689 19.727 2.132 C 19.987 1.718 20.333 1.407 20.766 1.197 C 21.143 1.015 21.562 0.925 22.021 0.928 C 22.562 0.932 23.063 1.079 23.524 1.368 C 23.858 1.577 24.16 1.837 24.431 2.146 C 24.663 2.41 24.87 2.695 25.049 2.997 C 25.215 3.277 25.35 3.543 25.456 3.796 L 23.93 4.442 L 25.429 3.736 L 26.071 5.12 C 26.3 5.611 26.515 6.12 26.717 6.647 L 25.174 7.248 L 23.744 6.411 C 23.85 6.227 23.994 5.979 24.178 5.668 C 24.375 5.332 24.6 4.977 24.85 4.604 C 25.1 4.233 25.369 3.856 25.658 3.473 C 25.972 3.057 26.296 2.679 26.63 2.34 C 27 1.964 27.382 1.65 27.775 1.399 C 28.338 1.039 28.909 0.861 29.489 0.866 C 29.946 0.869 30.358 0.988 30.727 1.224 C 31.091 1.457 31.372 1.778 31.572 2.188 C 31.813 2.681 31.931 3.175 31.928 3.669 Z',
+  'M 40.986 4.834 C 40.933 5.517 40.79 6.249 40.557 7.031 C 40.34 7.757 40.079 8.484 39.773 9.214 C 39.475 9.924 39.159 10.612 38.823 11.279 C 38.495 11.932 38.191 12.51 37.912 13.013 C 37.77 13.27 37.593 13.602 37.38 14.008 C 37.153 14.44 36.902 14.898 36.626 15.384 C 36.341 15.884 36.044 16.378 35.736 16.864 C 35.396 17.401 35.047 17.882 34.688 18.309 C 34.291 18.781 33.882 19.17 33.461 19.476 C 32.82 19.942 32.152 20.147 31.456 20.092 C 30.985 20.055 30.567 19.922 30.2 19.693 C 29.785 19.434 29.471 19.078 29.258 18.625 C 28.983 18.042 28.872 17.417 28.924 16.749 C 28.964 16.227 29.09 15.692 29.302 15.145 C 29.483 14.676 29.701 14.215 29.956 13.762 C 30.199 13.33 30.464 12.911 30.75 12.508 C 31.013 12.138 31.257 11.805 31.483 11.51 L 32.794 12.527 L 32.268 14.107 C 31.831 13.96 31.421 13.731 31.038 13.42 C 30.587 13.053 30.259 12.617 30.055 12.11 L 30.044 12.083 L 30.034 12.056 C 29.854 11.56 29.673 11.005 29.491 10.392 C 29.306 9.766 29.145 9.133 29.01 8.495 C 28.873 7.847 28.767 7.201 28.692 6.558 C 28.61 5.857 28.592 5.209 28.639 4.613 C 28.665 4.28 28.727 3.928 28.826 3.558 C 28.94 3.129 29.109 2.732 29.333 2.366 C 29.595 1.938 29.927 1.585 30.33 1.307 C 30.861 0.94 31.467 0.784 32.147 0.838 C 32.536 0.869 32.901 0.973 33.241 1.151 C 33.567 1.322 33.857 1.553 34.111 1.845 C 34.464 2.251 34.759 2.737 34.995 3.303 C 35.203 3.8 35.369 4.342 35.494 4.93 C 35.605 5.453 35.696 5.969 35.768 6.478 C 35.838 6.977 35.891 7.436 35.927 7.855 C 35.958 8.208 35.987 8.478 36.016 8.664 L 34.381 8.917 L 32.82 8.363 C 32.894 8.154 33.01 7.847 33.17 7.444 C 33.331 7.038 33.522 6.592 33.741 6.107 C 33.966 5.61 34.219 5.103 34.5 4.585 C 34.795 4.041 35.102 3.546 35.423 3.098 C 35.792 2.584 36.186 2.159 36.605 1.823 C 37.245 1.31 37.928 1.082 38.654 1.139 C 38.981 1.165 39.284 1.254 39.565 1.406 C 39.849 1.559 40.091 1.767 40.293 2.029 C 40.541 2.351 40.722 2.717 40.835 3.124 C 40.924 3.444 40.977 3.772 40.992 4.104 C 41.004 4.38 41.003 4.624 40.986 4.834 Z',
+];
+
+const INNER_LETTER_PATHS = [
+  'M 5.106 15.637 C 4.33 15.692 3.641 15.545 3.04 15.195 C 2.439 14.845 1.928 14.353 1.505 13.719 C 1.083 13.086 0.749 12.339 0.502 11.48 C 0.256 10.621 0.099 9.71 0.031 8.748 C -0.033 7.85 0.002 6.932 0.134 5.994 C 0.266 5.056 0.509 4.201 0.864 3.427 C 1.219 2.654 1.691 2.007 2.281 1.488 C 2.872 0.968 3.6 0.678 4.466 0.615 C 5.306 0.555 6.026 0.733 6.625 1.148 C 7.224 1.562 7.717 2.12 8.106 2.82 C 8.495 3.521 8.794 4.315 9.004 5.202 C 9.214 6.09 9.351 6.983 9.414 7.881 C 9.485 8.881 9.453 9.834 9.319 10.74 C 9.184 11.646 8.941 12.454 8.588 13.162 C 8.235 13.871 7.77 14.446 7.194 14.887 C 6.617 15.328 5.921 15.578 5.106 15.637 Z M 4.576 4.882 C 4.334 4.9 4.134 5.011 3.975 5.216 C 3.817 5.42 3.692 5.684 3.6 6.006 C 3.508 6.329 3.45 6.688 3.427 7.083 C 3.403 7.478 3.406 7.874 3.434 8.272 C 3.466 8.722 3.526 9.17 3.615 9.612 C 3.704 10.057 3.818 10.455 3.958 10.806 C 4.098 11.157 4.262 11.436 4.449 11.641 C 4.637 11.847 4.852 11.941 5.094 11.924 C 5.373 11.904 5.586 11.747 5.731 11.453 C 5.877 11.159 5.983 10.809 6.051 10.405 C 6.118 10 6.153 9.585 6.155 9.159 C 6.157 8.734 6.148 8.38 6.128 8.097 C 6.103 7.751 6.055 7.387 5.983 7.005 C 5.911 6.624 5.813 6.273 5.688 5.953 C 5.563 5.633 5.41 5.37 5.229 5.164 C 5.048 4.958 4.83 4.864 4.576 4.882 Z',
+  'M 19.958 1.162 C 19.956 1.445 19.902 1.747 19.798 2.068 C 19.694 2.388 19.564 2.712 19.408 3.039 C 19.254 3.362 19.089 3.68 18.913 3.991 C 18.757 4.267 18.599 4.542 18.439 4.816 C 18.14 5.37 17.843 5.924 17.547 6.479 C 17.246 7.042 16.929 7.596 16.597 8.141 C 16.76 8.425 16.971 8.812 17.23 9.303 C 17.488 9.793 17.74 10.31 17.985 10.852 C 18.23 11.394 18.443 11.923 18.625 12.439 C 18.806 12.954 18.895 13.379 18.893 13.713 C 18.891 13.971 18.819 14.212 18.677 14.436 C 18.536 14.66 18.318 14.771 18.025 14.769 C 17.68 14.766 17.333 14.619 16.984 14.327 C 16.635 14.036 16.306 13.689 15.996 13.288 C 15.686 12.887 15.401 12.477 15.143 12.057 C 14.884 11.637 14.679 11.298 14.527 11.04 C 14.31 11.319 14.088 11.594 13.86 11.865 C 13.634 12.135 13.412 12.41 13.195 12.689 C 13.025 12.904 12.854 13.118 12.683 13.332 C 12.483 13.582 12.264 13.828 12.026 14.071 C 11.789 14.313 11.545 14.517 11.294 14.682 C 11.044 14.848 10.804 14.93 10.574 14.928 C 10.408 14.927 10.271 14.89 10.163 14.819 C 10.055 14.748 9.967 14.654 9.897 14.537 C 9.828 14.421 9.778 14.292 9.748 14.15 C 9.717 14.011 9.701 13.868 9.702 13.725 C 9.705 13.327 9.775 12.925 9.911 12.521 C 10.049 12.117 10.208 11.742 10.389 11.396 C 11.025 10.06 11.692 8.74 12.389 7.436 C 12.25 7.139 12.078 6.726 11.871 6.198 C 11.664 5.669 11.46 5.115 11.26 4.534 C 11.06 3.954 10.889 3.39 10.746 2.842 C 10.602 2.295 10.532 1.854 10.534 1.519 C 10.537 1.146 10.628 0.816 10.809 0.528 C 10.99 0.24 11.285 0.097 11.694 0.1 C 11.923 0.102 12.137 0.165 12.334 0.288 C 12.53 0.412 12.711 0.567 12.876 0.755 C 13.04 0.941 13.186 1.142 13.312 1.356 C 13.439 1.569 13.539 1.766 13.615 1.946 C 13.827 2.408 14.041 2.87 14.256 3.33 C 14.47 3.789 14.671 4.263 14.859 4.753 C 14.962 4.573 15.104 4.33 15.285 4.022 C 15.466 3.715 15.672 3.389 15.905 3.043 C 16.137 2.698 16.388 2.346 16.658 1.988 C 16.929 1.63 17.206 1.307 17.488 1.02 C 17.771 0.732 18.057 0.496 18.346 0.312 C 18.634 0.127 18.906 0.035 19.161 0.037 C 19.442 0.039 19.646 0.169 19.771 0.428 C 19.897 0.686 19.959 0.931 19.958 1.162 Z',
+  'M 29.021 2.208 C 28.977 2.772 28.855 3.388 28.656 4.057 C 28.457 4.724 28.216 5.396 27.933 6.07 C 27.651 6.744 27.35 7.398 27.032 8.031 C 26.713 8.664 26.42 9.221 26.153 9.703 C 26.003 9.975 25.82 10.318 25.602 10.733 C 25.384 11.148 25.142 11.59 24.874 12.06 C 24.602 12.537 24.319 13.009 24.025 13.473 C 23.725 13.946 23.421 14.367 23.11 14.735 C 22.8 15.104 22.489 15.402 22.177 15.629 C 21.865 15.856 21.563 15.958 21.27 15.935 C 20.863 15.903 20.585 15.73 20.436 15.414 C 20.288 15.099 20.228 14.756 20.257 14.385 C 20.285 14.026 20.375 13.649 20.528 13.255 C 20.68 12.86 20.864 12.472 21.079 12.089 C 21.293 11.708 21.527 11.339 21.779 10.983 C 22.031 10.629 22.264 10.312 22.478 10.032 C 22.228 9.948 21.989 9.812 21.76 9.627 C 21.531 9.441 21.369 9.228 21.272 8.988 C 21.104 8.523 20.933 8 20.761 7.419 C 20.588 6.836 20.438 6.247 20.312 5.652 C 20.186 5.055 20.088 4.46 20.019 3.868 C 19.95 3.276 19.934 2.736 19.973 2.249 C 19.99 2.018 20.035 1.767 20.108 1.495 C 20.18 1.223 20.286 0.973 20.425 0.745 C 20.564 0.518 20.739 0.332 20.949 0.187 C 21.158 0.043 21.41 -0.018 21.703 0.005 C 22.033 0.031 22.316 0.179 22.551 0.449 C 22.786 0.719 22.987 1.054 23.154 1.455 C 23.322 1.854 23.457 2.297 23.56 2.783 C 23.663 3.269 23.748 3.746 23.814 4.216 C 23.88 4.685 23.929 5.115 23.963 5.505 C 23.997 5.894 24.031 6.2 24.064 6.422 C 24.131 6.234 24.239 5.949 24.391 5.567 C 24.542 5.186 24.722 4.765 24.93 4.304 C 25.139 3.843 25.374 3.372 25.636 2.89 C 25.898 2.407 26.168 1.97 26.448 1.58 C 26.728 1.189 27.018 0.873 27.319 0.632 C 27.619 0.392 27.916 0.283 28.209 0.306 C 28.399 0.321 28.553 0.404 28.669 0.555 C 28.786 0.706 28.872 0.88 28.927 1.078 C 28.982 1.277 29.014 1.481 29.023 1.686 C 29.032 1.893 29.032 2.067 29.021 2.208 Z',
+];
+
+export const LogoText: React.FC<LogoTextProps> = ({
+  color,
+  letterColor,
+  height: heightProp,
+  style,
+}): ReactElement => {
+  const height = heightProp ?? DEFAULT_HEIGHT;
+  const width = height * (VIEW_BOX_WIDTH / VIEW_BOX_HEIGHT);
+
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.primary;
+  const resolvedLetterColor = letterColor ?? '#ffffff';
+
+  return (
+    <Svg viewBox={`0 0 ${VIEW_BOX_WIDTH} ${VIEW_BOX_HEIGHT}`} width={width} height={height} style={style}>
+      <G>
+        {OUTER_PATHS.map((d) => (
+          <Path key={d} d={d} fill={resolvedColor} />
+        ))}
+      </G>
+      <G transform="translate(10.316 2.495)">
+        {INNER_LETTER_PATHS.map((d) => (
+          <Path key={d} d={d} fill={resolvedLetterColor} />
+        ))}
+      </G>
+    </Svg>
+  );
+};
+
+export default LogoText;

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -0,0 +1,131 @@
+import type React from 'react';
+import { useState, useCallback } from 'react';
+import { View, Text, TextInput } from 'react-native';
+import Ionicons from '../../icons/Ionicons';
+import { Button } from '@oxy.so/bloom/button';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { surfaces, type SurfaceControls } from '@oxy.so/bloom/surfaces';
+
+interface DeleteAccountModalProps {
+    /** The presenting surface's controls (from `surfaces.present`). */
+    surface: SurfaceControls;
+    username: string;
+    onDelete: (confirmText: string) => Promise<void>;
+    t: (key: string, params?: Record<string, string>) => string | undefined;
+}
+
+/**
+ * Delete-account confirmation — a rich presented surface (NOT a yes/no confirm):
+ * the user must retype their username, then the destructive action runs
+ * `onDelete`. On success the surface is dismissed with `true` (the presenter
+ * then signs out + closes); cancel dismisses with `false`. Presented via
+ * {@link presentDeleteAccount}.
+ */
+const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
+    surface,
+    username,
+    onDelete,
+    t,
+}) => {
+    const theme = useTheme();
+    const [confirmUsername, setConfirmUsername] = useState('');
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const isValid = confirmUsername === username;
+
+    const handleDelete = useCallback(async () => {
+        if (!isValid) return;
+
+        setError(null);
+        setIsDeleting(true);
+
+        try {
+            await onDelete(confirmUsername);
+            surface.dismiss(true);
+        } catch (err: unknown) {
+            setError((err instanceof Error ? err.message : null) || t('deleteAccount.error') || 'Failed to delete account');
+        } finally {
+            setIsDeleting(false);
+        }
+    }, [isValid, confirmUsername, onDelete, surface, t]);
+
+    const handleCancel = useCallback(() => {
+        if (isDeleting) return;
+        surface.dismiss(false);
+    }, [isDeleting, surface]);
+
+    return (
+        <View>
+            <View className="flex-row items-center mb-4 gap-3">
+                <Ionicons name="alert-circle" size={32} color={theme.colors.error} />
+                <Text className="text-text text-xl font-bold" style={{ color: theme.colors.error }}>
+                    {t('deleteAccount.title') || 'Delete Account'}
+                </Text>
+            </View>
+
+            <Text className="text-text text-sm leading-5 mb-5">
+                {t('deleteAccount.warning') || 'This action cannot be undone. Your account and all associated data will be permanently deleted.'}
+            </Text>
+
+            {error && (
+                <View
+                    className="p-3 rounded-lg mb-4"
+                    style={{ backgroundColor: `${theme.colors.error}20` }}
+                >
+                    <Text className="text-text text-sm text-center" style={{ color: theme.colors.error }}>
+                        {error}
+                    </Text>
+                </View>
+            )}
+
+            <View className="mb-4">
+                <Text className="text-text-secondary text-[13px] mb-2">
+                    {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
+                </Text>
+                <TextInput
+                    className="text-text bg-bg text-base py-3 px-4 border rounded-lg"
+                    style={{
+                        borderColor: isValid ? theme.colors.success : theme.colors.border,
+                    }}
+                    value={confirmUsername}
+                    onChangeText={setConfirmUsername}
+                    placeholder={username}
+                    placeholderTextColor={theme.colors.textSecondary}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    editable={!isDeleting}
+                />
+            </View>
+
+            <View style={{ gap: 8 }}>
+                <Button
+                    variant="destructive"
+                    onPress={handleDelete}
+                    disabled={!isValid || isDeleting}
+                    loading={isDeleting}
+                >
+                    {t('deleteAccount.confirm') || 'Delete Forever'}
+                </Button>
+                <Button variant="secondary" onPress={handleCancel} disabled={isDeleting}>
+                    {t('common.cancel') || 'Cancel'}
+                </Button>
+            </View>
+        </View>
+    );
+};
+
+/** Options accepted by {@link presentDeleteAccount} (everything but `surface`). */
+type PresentDeleteAccountOptions = Omit<DeleteAccountModalProps, 'surface'>;
+
+/**
+ * Present the delete-account confirmation on the shared surface stack. Resolves
+ * `true` once the account is deleted, `false` if cancelled/dismissed.
+ */
+export function presentDeleteAccount(options: PresentDeleteAccountOptions): Promise<boolean> {
+    return surfaces
+        .present<boolean>((surface) => <DeleteAccountModal surface={surface} {...options} />)
+        .then((result) => result === true);
+}
+
+export default DeleteAccountModal;