@robono/messaging-react-native 0.2.0 → 0.3.0

package/dist/expo-screen.js

@@ -0,0 +1,557 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MessagingPopupHeader, messagingPopupBackdrop } from './popup.js';
+import { ExpoMessagingPrivacyLayer } from './expo-privacy.js';
+import { ExpoSocialPlayer } from './expo-social.js';
+import { expoOutbox } from './expo-outbox.js';
+import { expoSaved } from './expo-saved.js';
+export { createExpoMessagingClient } from './expo-outbox.js';
+import { createExpoThumbnails } from './expo-thumbnails.js';
+import { useCallback, useEffect, useContext, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { AppState, Image, Modal, Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import MaterialIcons from "./visual/RobonoIcon";
+import { useAudioPlayer } from 'expo-audio';
+import { useVideoPlayer } from 'expo-video';
+import { MessengerVideoView } from './messenger-video-view.js';
+import * as Sharing from 'expo-sharing';
+import { saveMessagingAttachment } from './expo-download.js';
+import * as Crypto from 'expo-crypto';
+import * as Clipboard from 'expo-clipboard';
+import { defaultMessagingSettings } from '@robono/messaging';
+import { MessagingScreen, useMessagingUI } from './index.js';
+import { VoiceMessageComposer, VoiceDraftPlayback } from './voice-composer.js';
+import { VoicePlayback, MediaViewer } from './media-ui.js';
+import { MessagingMediaController } from './media-controller.js';
+import { MediaReadiness, StreamRecovery } from './media-readiness.js';
+import { RecentMessagingMedia } from './recent-media.js';
+import { copyMessagingCache, createExpoMessagingDevice } from './expo-media.js';
+export { createExpoMessagingAudioSession, createExpoMessagingDevice, createExpoMessagingStorage } from './expo-media.js';
+export { MessagingMediaController } from './media-controller.js';
+const size = (bytes) => bytes < 1024 ? `${bytes} bytes` : bytes < 1048576 ? `${(bytes / 1024).toFixed(1)} KB` : `${(bytes / 1048576).toFixed(2)} MB`;
+const time = (ms) => `${Math.floor(ms / 60000)}:${String(Math.floor(ms / 1000) % 60).padStart(2, '0')}`;
+function Control({ label, icon, onPress, disabled = false, color }) {
+    return _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: label, disabled: disabled, onPress: onPress, style: { minHeight: 48, padding: 12, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, opacity: disabled ? .45 : 1 }, children: [_jsx(MaterialIcons, { name: icon, size: 24, color: color }), _jsx(Text, { style: { color, fontSize: 16 }, children: label })] });
+}
+const voiceStops = new Set();
+const stopVoicePlayers = async (except) => { await Promise.all([...voiceStops].filter(stop => stop !== except).map(stop => stop())); };
+const voiceScope = () => ({ alive: true, busy: false, epoch: 0, release: null, acquiring: null, releasing: Promise.resolve() });
+function releaseVoice(scope) {
+    const release = scope.release;
+    scope.release = null;
+    if (release)
+        scope.releasing = scope.releasing.then(release).catch(() => { });
+    return scope.releasing;
+}
+async function acquireVoice(scope, audio) {
+    const epoch = scope.epoch;
+    const work = (async () => {
+        await scope.releasing;
+        if (!scope.alive || scope.epoch !== epoch)
+            return;
+        const release = await audio.acquire('playback');
+        if (!scope.alive || scope.epoch !== epoch) {
+            await release();
+            return;
+        }
+        scope.release = release;
+    })();
+    scope.acquiring = work;
+    try {
+        await work;
+    }
+    finally {
+        if (scope.acquiring === work)
+            scope.acquiring = null;
+    }
+    return scope.alive && scope.epoch === epoch && !!scope.release;
+}
+function VoicePlayer({ file, audio, design, inline, draft, autoPlay = false }) {
+    const [playing, setPlaying] = useState(false), [position, setPosition] = useState(0), [error, setError] = useState('');
+    const source = useMemo(() => file.stream ? { uri: file.uri, headers: file.stream.headers } : file.uri, [file]);
+    const player = useAudioPlayer(source, { updateInterval: 100, downloadFirst: false, preferredForwardBufferDuration: 5, keepAudioSessionActive: true });
+    const mediaReady = useContext(MediaReadiness), recover = useContext(StreamRecovery);
+    const recovered = useRef(false), lastPosition = useRef(file.resumeAtMs ?? 0), playIntent = useRef(file.autoPlay ?? autoPlay);
+    const [loaded, setLoaded] = useState(false);
+    autoPlay = file.autoPlay ?? autoPlay;
+    const current = useRef(voiceScope());
+    const playbackDisabled = useRef(false);
+    playbackDisabled.current = !!draft?.disabled;
+    useEffect(() => { if (draft?.disabled) {
+        player.pause();
+        current.current.epoch++;
+        void releaseVoice(current.current);
+    } }, [draft?.disabled, player]);
+    const width = useRef(1);
+    const c = design.colors;
+    const recoverStream = () => {
+        if (!file.stream || recovered.current || !current.current.alive)
+            return false;
+        recovered.current = true;
+        const resume = lastPosition.current, wanted = playIntent.current;
+        player.pause();
+        const scope = current.current;
+        scope.epoch++;
+        void releaseVoice(scope).then(() => { if (scope.alive)
+            recover(file.uri, resume, wanted); });
+        return true;
+    };
+    useEffect(() => {
+        const scope = voiceScope();
+        current.current = scope;
+        let started = false, reported = false, cancelled = false, autoPreparing = autoPlay;
+        let startupTimeout;
+        const stop = async () => { scope.epoch++; cancelled = true; if (autoPreparing) {
+            autoPreparing = false;
+            scope.busy = false;
+        } clearTimeout(startupTimeout); playIntent.current = false; try {
+            player.pause();
+        }
+        catch { } await releaseVoice(scope); await scope.acquiring?.catch(() => { }); await releaseVoice(scope); };
+        const fail = (e) => { cancelled = true; autoPreparing = false; scope.busy = false; clearTimeout(startupTimeout); if (scope.alive)
+            setError(e instanceof Error ? e.message : 'Playback failed.'); scope.epoch++; void releaseVoice(scope); };
+        // Native file loading and audio-session preparation are independent. Start
+        // both now; playback still requires both and an active app.
+        const begin = () => {
+            if (!scope.alive || recovered.current || !autoPlay || started || cancelled || !scope.release || !player.isLoaded)
+                return;
+            if (AppState.currentState !== 'active' || audio.isAvailable?.() === false) {
+                void stop();
+                return;
+            }
+            started = true;
+            autoPreparing = false;
+            clearTimeout(startupTimeout);
+            void (async () => { if (file.resumeAtMs)
+                await player.seekTo(file.resumeAtMs / 1000); if (!scope.alive || cancelled || AppState.currentState !== 'active')
+                return; playIntent.current = true; player.play(); setPlaying(player.playing); })().catch(e => { if (!recoverStream())
+                fail(e); }).finally(() => { scope.busy = false; });
+        };
+        const restorePaused = () => { if (!scope.alive || !player.isLoaded || autoPlay || started || !file.resumeAtMs)
+            return; started = true; void player.seekTo(file.resumeAtMs / 1000).then(() => { if (scope.alive)
+            setPosition(file.resumeAtMs); }).catch(() => { if (!recoverStream())
+            fail(Error('Could not resume the recording.')); }); };
+        setLoaded(player.isLoaded);
+        restorePaused();
+        const subscription = player.addListener('playbackStatusUpdate', status => { if (!scope.alive)
+            return; setLoaded(status.isLoaded); if (status.error) {
+            if (!recoverStream())
+                fail(Error('The recording could not be played. Try again.'));
+            return;
+        } restorePaused(); begin(); });
+        voiceStops.add(stop);
+        if (autoPlay) {
+            scope.busy = true;
+            startupTimeout = setTimeout(() => { if (!recoverStream())
+                fail(Error('The recording could not start. Try again.')); }, 15000);
+            void (async () => {
+                await stopVoicePlayers(stop);
+                if (!scope.alive || cancelled || AppState.currentState !== 'active') {
+                    cancelled = true;
+                    return;
+                }
+                if (!await acquireVoice(scope, audio))
+                    return;
+                if (!scope.alive || recovered.current || cancelled || AppState.currentState !== 'active' || audio.isAvailable?.() === false) {
+                    cancelled = true;
+                    await releaseVoice(scope);
+                    return;
+                }
+                begin();
+            })().catch(fail).finally(() => { if (cancelled || !scope.alive) {
+                scope.busy = false;
+                clearTimeout(startupTimeout);
+            } });
+        }
+        const timer = setInterval(() => {
+            if (!scope.alive)
+                return;
+            if (audio.isAvailable?.() === false)
+                void stop();
+            if (player.currentTime > 0)
+                lastPosition.current = player.currentTime * 1000;
+            setPosition(player.currentTime * 1000);
+            setPlaying(player.playing);
+            if (!reported && player.playing && player.currentTime > 0) {
+                reported = true;
+                mediaReady('audio-playing', file.uri);
+            }
+            if (!player.playing && player.duration > 0 && player.currentTime >= player.duration - .05 && scope.release && !scope.busy) {
+                playIntent.current = false;
+                void releaseVoice(scope);
+            }
+        }, 150);
+        const app = AppState.addEventListener('change', state => { if (state !== 'active')
+            void stop(); });
+        return () => { scope.alive = false; cancelled = true; subscription.remove(); clearTimeout(startupTimeout); clearInterval(timer); app.remove(); void stop().finally(() => voiceStops.delete(stop)); };
+    }, [player]);
+    async function toggle() {
+        const scope = current.current;
+        if (scope.busy)
+            return;
+        scope.busy = true;
+        setError('');
+        try {
+            if (player.playing) {
+                playIntent.current = false;
+                player.pause();
+                scope.epoch++;
+                await releaseVoice(scope);
+            }
+            else {
+                if (!player.isLoaded)
+                    throw Error('The recording is still loading. Try again.');
+                await stopVoicePlayers();
+                if (!await acquireVoice(scope, audio))
+                    return;
+                if (!scope.alive || playbackDisabled.current || AppState.currentState !== 'active') {
+                    await releaseVoice(scope);
+                    return;
+                }
+                if (player.currentTime >= player.duration - .05)
+                    await player.seekTo(0);
+                playIntent.current = true;
+                player.play();
+            }
+        }
+        catch (e) {
+            if (scope.alive)
+                setError(e instanceof Error ? e.message : 'Playback failed.');
+            await releaseVoice(scope);
+        }
+        finally {
+            scope.busy = false;
+            if (scope.alive)
+                setPlaying(player.playing);
+        }
+    }
+    const duration = file.durationMs ?? player.duration * 1000;
+    if (draft)
+        return _jsx(VoiceDraftPlayback, { compact: draft.compact, appearance: design, playing: playing, positionMs: position, durationMs: duration, waveform: draft.waveform, onToggle: () => void toggle(), onRemove: draft.onRemove, disabled: draft.disabled, error: error });
+    return _jsx(VoicePlayback, { mine: inline?.mine, heard: inline?.heard, onPlayed: inline?.onPlayed, background: inline?.background, ink: inline?.ink ?? c.foreground, accent: inline?.accent ?? c.accent, waveform: inline?.waveform, showWaveform: inline?.showWaveform, footer: inline?.footer, onLongPress: inline?.onLongPress, durationMs: duration, positionMs: position, playing: playing, loading: !!file.stream && !loaded && !error, error: error, onToggle: () => void toggle(), onSeek: ms => { lastPosition.current = Math.max(0, Math.min(duration, ms)); void player.seekTo(lastPosition.current / 1000).catch(() => { if (!recoverStream())
+            setError('Could not seek. Try again.'); }); } });
+}
+function VideoPlayer({ file, audio }) {
+    const mediaReady = useContext(MediaReadiness), recover = useContext(StreamRecovery);
+    const source = useMemo(() => file.stream ? { uri: file.uri, headers: file.stream.headers, contentType: 'progressive', useCaching: false } : file.uri, [file]);
+    const player = useVideoPlayer(source, p => { p.loop = false; p.audioMixingMode = 'mixWithOthers'; if (file.stream)
+        p.bufferOptions = { preferredForwardBufferDuration: 5, minBufferForPlayback: 0.5 }; });
+    const [ready, setReady] = useState(false), [error, setError] = useState('');
+    const desired = useRef(file.autoPlay ?? true), lastPosition = useRef(file.resumeAtMs ?? 0);
+    useEffect(() => {
+        let alive = true, recovered = false, audioReady = false, resumed = false, release;
+        const recoverStream = () => {
+            if (!alive || recovered || !file.stream)
+                return false;
+            recovered = true;
+            player.pause();
+            const done = release;
+            release = undefined;
+            void Promise.resolve(done?.()).catch(() => { }).then(() => { if (alive)
+                recover(file.uri, lastPosition.current, desired.current); });
+            return true;
+        };
+        const begin = () => { if (!alive || recovered || !audioReady || resumed || player.status !== 'readyToPlay')
+            return; resumed = true; if (file.resumeAtMs)
+            player.currentTime = file.resumeAtMs / 1000; if (desired.current && AppState.currentState === 'active' && audio.isAvailable?.() !== false)
+            player.play(); };
+        void audio.acquire('playback').then(r => { if (!alive || recovered) {
+            void r().catch(() => { });
+            return;
+        } release = r; audioReady = true; setReady(true); begin(); }).catch(e => { if (alive)
+            setError(e.message); });
+        let consumed = false;
+        const timer = setInterval(() => { if (!alive)
+            return; if (!consumed && player.playing && player.currentTime > 0) {
+            consumed = true;
+            mediaReady('video-playing', file.uri);
+        } if (player.currentTime > 0)
+            lastPosition.current = player.currentTime * 1000; if (audio.isAvailable?.() === false) {
+            desired.current = false;
+            player.pause();
+            setReady(false);
+            setError('Playback paused for a call. Close and reopen the video to continue.');
+            void release?.().catch(() => { });
+            release = undefined;
+        } }, 100);
+        // Native controls must retain resume intent and respect the host's call audio session.
+        const playback = player.addListener('playingChange', ({ isPlaying }) => {
+            if (recovered || !alive)
+                return;
+            if (isPlaying && (!audioReady || !release || audio.isAvailable?.() === false || AppState.currentState !== 'active')) {
+                player.pause();
+                return;
+            }
+            desired.current = isPlaying;
+        });
+        const listener = player.addListener('statusChange', s => { if (s.status === 'error') {
+            if (!recoverStream())
+                setError('This video could not be played on this phone.');
+        }
+        else
+            begin(); });
+        if (player.status === 'error')
+            recoverStream();
+        const timeout = setTimeout(() => { if (alive && desired.current && player.currentTime === 0 && player.status !== 'readyToPlay' && !recoverStream())
+            setError('This video could not be loaded. Try again.'); }, 15000);
+        const app = AppState.addEventListener('change', s => { if (s !== 'active') {
+            desired.current = false;
+            player.pause();
+        } });
+        return () => { alive = false; clearTimeout(timeout); clearInterval(timer); listener.remove(); playback.remove(); app.remove(); try {
+            player.pause();
+        }
+        catch { } void release?.().catch(() => { }); };
+    }, [player, audio]);
+    return _jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsx(MessengerVideoView, { testID: "messenger-video-player", onFirstFrameRender: () => mediaReady('video-frame', file.uri), player: player, nativeControls: ready, style: { height: '100%', width: '100%' } }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { position: 'absolute', bottom: 12, left: 12, right: 12, color: '#fff', backgroundColor: '#000c', padding: 12 }, children: error })] });
+}
+function FileViewer({ file, kind, audio, design }) {
+    const [error, setError] = useState('');
+    if (kind === 'voice')
+        return _jsx(VoicePlayer, { file: file, audio: audio, design: design });
+    if (kind === 'video')
+        return _jsx(VideoPlayer, { file: file, audio: audio, design: design });
+    if (kind === 'image')
+        return _jsxs(View, { children: [_jsx(Image, { source: { uri: file.uri }, resizeMode: "contain", accessibilityLabel: file.fileName, onError: () => setError('This image could not be displayed on this phone.'), style: { height: 300, width: '100%' } }), !!error && _jsx(Text, { style: { color: design.colors.foreground }, children: error })] });
+    return _jsxs(View, { children: [_jsx(Control, { label: "File options", icon: "open-in-new", color: design.colors.accent, onPress: () => {
+                    void (async () => { try {
+                        if (!await Sharing.isAvailableAsync())
+                            throw Error('No file-opening menu is available.');
+                        await Sharing.shareAsync(file.uri, { mimeType: file.mimeType, dialogTitle: file.fileName });
+                    }
+                    catch (e) {
+                        setError(e instanceof Error ? e.message : 'The file could not be opened.');
+                    } })();
+                } }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: design.colors.foreground }, children: error })] });
+}
+export function MessagingMediaOverlay({ controller, audio, appearance, inlineVoice = false, inlineRecorder = false, viewerActions, onDismiss }) {
+    const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+    const c = appearance.colors;
+    const mediaReady = useContext(MediaReadiness);
+    const [fileError, setFileError] = useState(''), [downloading, setDownloading] = useState(false);
+    const saving = useRef(false);
+    const [expanded, setExpanded] = useState(false);
+    useEffect(() => setExpanded(false), [state.file?.uri, state.phase]);
+    const review = ['review', 'failed'].includes(state.phase) && !!state.file;
+    if (state.phase !== 'idle' && (typeof inlineRecorder === 'function' ? inlineRecorder() : inlineRecorder) && state.kind === 'voice')
+        return null;
+    if ((typeof inlineVoice === 'function' ? inlineVoice() : inlineVoice) && state.kind === 'voice' && ['opening', 'viewing', 'failed'].includes(state.phase) && !review)
+        return null;
+    const viewer = state.file && (review || state.phase === 'viewing') ? _jsx(MediaViewer, { expanded: expanded, onExpandedChange: setExpanded, kind: state.kind, uri: state.file.uri, title: review ? 'Preview attachment' : state.kind === 'image' ? 'Photo' : state.kind === 'video' ? 'Video' : state.kind === 'voice' ? 'Voice message' : 'File', subtitle: state.file.fileName, fileName: state.file.fileName, byteSize: state.file.byteSize, error: state.error ?? fileError, onClose: () => { setFileError(''); void controller.cancel(); }, reviewAction: review ? (state.phase === 'failed' ? 'Retry upload' : 'Add attachment') : undefined, onReview: review ? () => void controller.send() : undefined, ...(!review ? viewerActions?.() : {}), downloading: downloading, onDownload: !review && appearance.showDownloadButton === true && ['image', 'video', 'document'].includes(state.kind) ? () => { if (saving.current || !state.file)
+            return; saving.current = true; setDownloading(true); setFileError(''); void controller.exportFile(async (file) => { await saveMessagingAttachment(file, state.kind); mediaReady('file-opened', state.file.uri); }).catch(e => setFileError(e instanceof Error ? e.message : 'Could not save the attachment.')).finally(() => { saving.current = false; setDownloading(false); }); } : undefined, onShare: !review ? () => { void controller.exportFile(async (file) => { await Sharing.shareAsync(file.uri, { mimeType: file.mimeType, dialogTitle: file.fileName }); mediaReady('file-opened', state.file.uri); }).catch(() => setFileError('Could not share this attachment.')); } : undefined, onFileAction: () => { void (async () => { try {
+            if (!await Sharing.isAvailableAsync())
+                throw Error('File opening is unavailable.');
+            await Sharing.shareAsync(state.file.uri, { mimeType: state.file.mimeType, dialogTitle: state.file.fileName });
+            mediaReady('file-opened', state.file.uri);
+        }
+        catch (e) {
+            setFileError(e instanceof Error ? e.message : 'Could not open the file.');
+        } })(); }, children: state.kind === 'video' ? _jsx(VideoPlayer, { file: state.file, audio: audio, design: appearance }, state.file.uri) : state.kind === 'voice' ? _jsx(View, { style: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }, children: _jsx(VoicePlayer, { file: state.file, audio: audio, design: { ...appearance, colors: { ...appearance.colors, foreground: '#ffffff', accent: '#8ab4f8' } } }) }) : null }) : null;
+    // A native modal has its own window; measure its safe area inside that window.
+    return _jsx(Modal, { transparent: true, visible: state.phase !== 'idle' && state.phase !== 'choosing', onDismiss: onDismiss, animationType: "fade", onRequestClose: () => { if (expanded)
+            setExpanded(false);
+        else
+            void controller.cancel(); }, children: _jsx(SafeAreaProvider, { style: { flex: 1, backgroundColor: state.kind === 'image' || state.kind === 'video' ? 'rgba(0,0,0,0.94)' : messagingPopupBackdrop }, children: _jsx(SafeAreaView, { edges: expanded ? [] : ['top', 'bottom', 'left', 'right'], style: { flex: 1 }, children: _jsx(View, { style: { flex: 1, margin: state.kind === 'image' || state.kind === 'video' ? 0 : 8, borderRadius: state.kind === 'image' || state.kind === 'video' ? 0 : 18, overflow: 'hidden', backgroundColor: state.kind === 'image' || state.kind === 'video' ? 'transparent' : '#000000' }, children: viewer ?? (_jsx(View, { style: { flex: 1, backgroundColor: c.background }, children: _jsxs(ScrollView, { contentContainerStyle: { padding: 8, paddingTop: 0, gap: 12, flexGrow: 1 }, children: [_jsx(MessagingPopupHeader, { title: state.kind === 'voice' ? 'Voice message' : state.kind === 'image' ? 'Photo' : state.kind === 'video' ? 'Video' : 'File', foreground: c.foreground, closeLabel: "Close attachment", onClose: () => void controller.cancel() }), state.phase === 'recording' ? _jsxs(View, { style: { alignItems: 'center', gap: 20, paddingVertical: 32 }, children: [_jsx(MaterialIcons, { name: "mic", size: 48, color: c.accent }), _jsx(Text, { style: { color: c.foreground, fontSize: 32, fontVariant: ['tabular-nums'] }, children: time(state.elapsedMs) }), _jsxs(Text, { style: { color: c.secondary }, children: [time(Math.max(0, state.maxDurationMs - state.elapsedMs)), " remaining"] }), _jsx(Control, { label: "Stop recording", icon: "stop", color: c.accent, onPress: () => void controller.finishRecording() })] }) : null, ['choosing', 'preparing', 'uploading', 'opening'].includes(state.phase) && _jsx(Text, { accessibilityRole: "progressbar", accessibilityValue: { min: 0, max: 100, now: Math.round(state.progress * 100) }, style: { color: c.foreground, fontSize: 18 }, children: state.phase === 'uploading' ? `Uploading… ${Math.round(state.progress * 100)}%` : state.phase === 'opening' ? (state.progress > 0 ? `Opening… ${Math.round(state.progress * 100)}%` : 'Opening…') : state.phase === 'choosing' ? 'Choose an attachment.' : 'Preparing recording…' }), state.file && _jsxs(_Fragment, { children: [_jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: state.file.fileName }), _jsx(Text, { style: { color: c.secondary }, children: size(state.file.byteSize) }), (review || state.phase === 'viewing') && _jsx(FileViewer, { file: state.file, kind: state.kind, audio: audio, design: appearance }, state.file.uri)] }), state.error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: state.error }), review && (state.phase === 'review' || state.retryUpload) && _jsx(Control, { label: state.phase === 'failed' ? 'Retry upload' : 'Add attachment', icon: state.phase === 'failed' ? 'refresh' : 'send', color: c.accent, onPress: () => void controller.send() })] }) })) }) }) }) });
+}
+/** Optional ready-made recording, preview, upload and download tools for both mobile platforms. */
+export function ExpoMessagingScreen({ storage, audioSession, renderConversation, preloadRecentMedia = true, ...props }) {
+    useEffect(() => { void props.client.reportUsage({ platform: Platform.OS === 'ios' ? 'ios' : Platform.OS === 'android' ? 'android' : 'other', components: ['media-tools'] }).catch(() => { }); }, [props.client]);
+    const [requestedMessageAction, setRequestedMessageAction] = useState();
+    const afterViewer = useRef(undefined);
+    const dismissFallback = useRef(undefined);
+    const viewerDismissed = () => { clearTimeout(dismissFallback.current); const action = afterViewer.current; if (!action)
+        return; requestAnimationFrame(() => { if (afterViewer.current !== action)
+        return; afterViewer.current = undefined; setRequestedMessageAction(action); }); };
+    useEffect(() => { afterViewer.current = undefined; return () => { afterViewer.current = undefined; clearTimeout(dismissFallback.current); }; }, [props.client, props.active]);
+    const current = useRef(props);
+    current.current = props;
+    const message = useRef(null);
+    const recent = useMemo(() => new RecentMessagingMedia(storage, { copy: copyMessagingCache, remove: createExpoMessagingDevice(audioSession).remove }), [storage, audioSession, props.client]);
+    const openingIntent = useRef(0);
+    const opened = useRef(null);
+    const chosen = useRef(undefined);
+    const controller = useMemo(() => {
+        const device = createExpoMessagingDevice(audioSession);
+        return new MessagingMediaController({ device: { ...device, pick: async (kind, settings, signal, source) => {
+                    const id = chosen.current;
+                    chosen.current = undefined;
+                    if (id) {
+                        if (!current.current.resolveAttachmentChoice)
+                            throw Error('This attachment is unavailable. Choose it from Photos or Files.');
+                        return current.current.resolveAttachmentChoice(id, signal);
+                    }
+                    return device.pick(kind, settings, signal, source);
+                } }, storage: recent.storage, createId: Crypto.randomUUID, stageLocal: true,
+            getSettings: () => current.current.client.getSnapshot().settings ?? defaultMessagingSettings(), getConversationId: () => current.current.client.getSnapshot().conversationId });
+    }, [recent, audioSession, props.client]);
+    const recorder = useMemo(() => { const device = createExpoMessagingDevice(audioSession); return new MessagingMediaController({ device: { ...device, startRecording: async (maximum, signal) => { await stopVoicePlayers(); return device.startRecording(maximum, signal); } }, storage, stageLocal: true, createId: Crypto.randomUUID, getSettings: () => current.current.client.getSnapshot().settings ?? defaultMessagingSettings(), getConversationId: () => current.current.client.getSnapshot().conversationId }); }, [storage, audioSession, props.client]);
+    const state = useSyncExternalStore(props.client.subscribe, props.client.getSnapshot, props.client.getSnapshot);
+    const outbox = expoOutbox(props.client);
+    const restore = useCallback(async (media, kind) => {
+        const present = controller.getPrepared(media.assetId) ?? recorder.getPrepared(media.assetId);
+        if (present)
+            return present;
+        const conversationId = props.client.getSnapshot().conversationId, saved = await outbox?.file(conversationId, media.assetId);
+        if (!saved)
+            return undefined;
+        const copy = await copyMessagingCache(saved);
+        if (props.client.getSnapshot().conversationId !== conversationId) {
+            await createExpoMessagingDevice(audioSession).remove(copy);
+            throw Error('The conversation changed.');
+        }
+        controller.restorePrepared(media.assetId, copy, kind);
+        return copy;
+    }, [controller, recorder, props.client, outbox, audioSession]);
+    const prepare = async (kind, media) => { await restore(media, kind); const owner = recorder.getPrepared(media.assetId) ? recorder : controller; if (!owner.getPrepared(media.assetId))
+        return media; const uploaded = await owner.uploadPrepared(media.assetId, kind); thumbnails.alias(media.assetId, uploaded.assetId); return uploaded; };
+    useEffect(() => props.client.setAttachmentPreparer(async (content) => { if (!content.media || content.kind === 'text' || content.kind === 'poll' || !await restore(content.media, content.kind))
+        throw Error('The saved attachment is unavailable. Remove it and choose it again.'); return { ...content, media: await prepare(content.kind, content.media) }; }), [props.client, controller, recorder, outbox]);
+    const thumbnails = useMemo(() => createExpoThumbnails(recent.storage, id => controller.getPrepared(id) ?? recorder.getPrepared(id), createExpoMessagingDevice(audioSession).remove), [recent, controller, recorder, audioSession]);
+    useEffect(() => () => thumbnails.clear(), [thumbnails, state.conversationId, state.settings?.enabled, state.conversation?.canSend, props.active]);
+    const cacheDisposal = useRef(new Map());
+    useEffect(() => {
+        clearTimeout(cacheDisposal.current.get(recent));
+        cacheDisposal.current.delete(recent);
+        const sync = () => { const snapshot = props.client.getSnapshot(); if (preloadRecentMedia && current.current.active !== false && snapshot.settings?.enabled && !snapshot.error && AppState.currentState === 'active')
+            recent.sync(snapshot.messages.filter(m => snapshot.settings?.features[m.kind]));
+        else
+            recent.clear(); };
+        sync();
+        const unsubscribe = props.client.subscribe(sync);
+        const app = AppState.addEventListener('change', s => { if (s === 'active')
+            sync();
+        else
+            recent.clear(); });
+        return () => { unsubscribe(); app.remove(); cacheDisposal.current.set(recent, setTimeout(() => { recent.clear(); cacheDisposal.current.delete(recent); }, 0)); };
+    }, [recent, props.client, props.active, preloadRecentMedia]);
+    const TranslationVoice = useMemo(() => function TranslationVoice({ transform, ink, accent, showWaveform, autoPlay }) {
+        const { design } = useMessagingUI(), audio = transform.audio;
+        return _jsx(VoicePlayer, { file: { uri: audio.url, mimeType: audio.mimeType, fileName: 'Translated voice', byteSize: audio.byteSize, durationMs: audio.durationMs, stream: {} }, audio: audioSession, design: design, autoPlay: autoPlay, inline: { message: { id: transform.messageId, clientMessageId: 'translation-' + transform.messageId, conversationId: 'translation', senderId: '', kind: 'voice', createdAt: '', readAt: null }, ink, accent, showWaveform, waveform: audio.waveform, onOpen: () => { } } }, audio.url);
+    }, [audioSession]);
+    const InlineVoice = useMemo(() => function InlineVoice(bubble) {
+        const media = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+        const { design } = useMessagingUI();
+        const selected = message.current?.id === bubble.message.id && message.current?.conversationId === bubble.message.conversationId && media.kind === 'voice';
+        if (selected && media.phase === 'viewing' && media.file)
+            return _jsx(VoicePlayer, { file: media.file, audio: audioSession, design: design, inline: bubble, autoPlay: true }, media.file.uri);
+        return _jsx(VoicePlayback, { ...bubble, durationMs: bubble.message.media?.durationMs, loading: selected && media.phase === 'opening', error: selected ? media.error ?? undefined : undefined, onToggle: bubble.onOpen });
+    }, [controller, audioSession]);
+    const InlineComposer = useMemo(() => function InlineComposer(ui) {
+        const media = useSyncExternalStore(recorder.subscribe, recorder.getSnapshot, recorder.getSnapshot);
+        const capturing = media.kind === 'voice' && !['opening', 'viewing'].includes(media.phase);
+        const phase = capturing && media.phase !== 'choosing' && media.phase !== 'opening' && media.phase !== 'viewing' ? media.phase : 'idle';
+        const remove = () => { void recorder.cancel(); };
+        return _jsx(VoiceMessageComposer, { ...ui, phase: phase, elapsedMs: media.elapsedMs, waveform: media.waveform, error: capturing ? media.error : null, onStop: () => void recorder.finishRecording(), onSend: () => void recorder.send(), onRemove: remove, review: capturing && media.file ? _jsx(VoicePlayer, { file: media.file, audio: audioSession, design: ui.appearance, draft: { onRemove: remove, waveform: media.waveform, disabled: media.phase === 'uploading', compact: !!(ui.renderTextComposer || ui.renderAttachments) } }) : undefined });
+    }, [recorder, audioSession]);
+    const VoiceAttachment = useMemo(() => function VoiceAttachment(ui) { const [file, setFile] = useState(recorder.getPrepared(ui.media.assetId) ?? controller.getPrepared(ui.media.assetId)); useEffect(() => { let live = true; void restore(ui.media, 'voice').then(file => { if (live)
+        setFile(file); }).catch(() => { }); return () => { live = false; }; }, [ui.media.assetId]); return file ? _jsx(VoicePlayer, { file: file, audio: audioSession, design: ui.appearance, draft: { onRemove: ui.onRemove, disabled: ui.disabled, compact: true } }) : null; }, [recorder, audioSession]);
+    const conversation = useRef(state.conversationId);
+    const disposal = useRef(new Map());
+    useEffect(() => {
+        if (conversation.current !== state.conversationId || props.active === false || !state.settings?.enabled || message.current && !state.messages.some(m => m.id === message.current.id && !m.deleted) && !controller.getPrepared(message.current.media?.assetId ?? '') && !recorder.getPrepared(message.current.media?.assetId ?? '')) {
+            ++openingIntent.current;
+            afterViewer.current = undefined;
+            message.current = null;
+            void controller.cancel();
+            void recorder.cancel();
+        }
+        conversation.current = state.conversationId;
+    }, [state, props.active, controller, recorder]);
+    useEffect(() => {
+        const controllers = [controller, recorder];
+        for (const item of controllers) {
+            const pending = disposal.current.get(item);
+            if (pending) {
+                clearTimeout(pending);
+                disposal.current.delete(item);
+            }
+        }
+        const sub = AppState.addEventListener('change', s => { if (s !== 'active')
+            void recorder.interrupt(); });
+        return () => { ++openingIntent.current; sub.remove(); for (const item of controllers)
+            disposal.current.set(item, setTimeout(() => { disposal.current.delete(item); void item.dispose(); }, 0)); };
+    }, [controller, recorder]);
+    useEffect(() => props.client.setForwardPreparer((message, target) => controller.prepareForward(message, target)), [props.client, controller]);
+    const saved = expoSaved(props.client);
+    const SocialPlayer = useMemo(() => function SocialPlayer(ui) {
+        const [ready, setReady] = useState(false);
+        useEffect(() => {
+            let alive = true, release;
+            void stopVoicePlayers().then(() => audioSession.acquire('playback')).then(async (done) => { if (!alive) {
+                await done();
+                return;
+            } release = done; setReady(true); }).catch(() => { if (alive)
+                ui.onError(); });
+            return () => { alive = false; void release?.().catch(() => { }); };
+        }, []);
+        return ready ? _jsx(ExpoSocialPlayer, { ...ui }) : null;
+    }, [audioSession]);
+    useEffect(() => saved?.bindDownload(async (m) => { const device = createExpoMessagingDevice(audioSession), file = await storage.download(m, { signal: AbortSignal.timeout(120000), onProgress: () => { } }); return { file, release: () => device.remove(file) }; }), [saved, storage, audioSession]);
+    const attachmentPreview = useCallback(async (m) => { if (m.media && m.kind !== 'text' && m.kind !== 'poll')
+        await restore(m.media, m.kind); return thumbnails.preview(m); }, [restore, thumbnails]);
+    const screenProps = { ...props, requestedMessageAction,
+        copyText: props.copyText ?? (async (text) => { await Clipboard.setStringAsync(text); }),
+        components: { PrivacyLayer: ExpoMessagingPrivacyLayer, SocialPlayer, TranslationVoice, VoiceMessage: InlineVoice, VoiceComposer: InlineComposer, VoiceAttachment, ...props.components },
+        attachmentPreview: props.attachmentPreview ?? attachmentPreview,
+        prepareAttachment: prepare,
+        retainDraftAttachments: !!outbox,
+        releaseAttachment: async (media) => { await outbox?.releaseFile(state.conversationId, media.assetId); await controller.releasePrepared(media.assetId); await recorder.releasePrepared(media.assetId); await props.releaseAttachment?.(media); },
+        pickAttachment: async (kind, options) => {
+            const conversationId = props.client.getSnapshot().conversationId;
+            let media;
+            if (kind === 'voice')
+                media = await recorder.pick('voice', undefined, 'attach');
+            else {
+                message.current = null;
+                chosen.current = options.attachmentId;
+                media = !options.source && !options.attachmentId && options.intent !== 'preview' && (options.maxCount ?? 1) > 1 ? await controller.pickMany(kind, options.maxCount) : await controller.pick(kind, options.source, options.source === 'call-video' ? 'preview' : options.intent === 'preview' ? 'preview' : 'attach');
+            }
+            const selection = media ? (Array.isArray(media) ? media : [media]) : [];
+            try {
+                if (outbox)
+                    for (const item of selection) {
+                        const file = recorder.getPrepared(item.assetId) ?? controller.getPrepared(item.assetId);
+                        if (!file)
+                            throw Error('The selected file is unavailable.');
+                        await outbox.saveFile(conversationId, item, file, kind);
+                    }
+            }
+            catch (error) {
+                await Promise.all(selection.map(async (item) => { await outbox?.releaseFile(conversationId, item.assetId).catch(() => { }); await recorder.releasePrepared(item.assetId); await controller.releasePrepared(item.assetId); }));
+                throw error;
+            }
+            return media;
+        },
+        openAttachment: async (m) => { const intent = ++openingIntent.current; await stopVoicePlayers(); if (intent !== openingIntent.current)
+            return; opened.current = { messageId: m.id, kind: m.kind, started: Date.now(), reported: false }; message.current = m; const draft = m.media && m.kind !== 'text' && m.kind !== 'poll' ? await restore(m.media, m.kind) : undefined; if (draft && m.kind !== 'text' && m.kind !== 'poll')
+            await controller.previewLocal(await copyMessagingCache(draft), m.kind);
+        else
+            await controller.open(m); },
+        openSavedAttachment: async (record) => { if (!saved || record.message.kind === 'text' || record.message.kind === 'poll')
+            throw Error('This saved attachment is unavailable.'); const intent = ++openingIntent.current; await stopVoicePlayers(); const file = await copyMessagingCache(await saved.file(record)); if (intent !== openingIntent.current) {
+            await createExpoMessagingDevice(audioSession).remove(file);
+            return;
+        } opened.current = null; message.current = null; await controller.previewLocal(file, record.message.kind); }, };
+    const mediaReady = (stage, uri) => { const event = opened.current; if (!event || controller.getSnapshot().phase !== 'viewing' || controller.getSnapshot().file?.uri !== uri)
+        return; if (stage !== 'video-frame' && message.current?.conversationId === current.current.client.getSnapshot().conversationId)
+        void current.current.client.consumeMessage(event.messageId).catch(() => { }); if (event.reported)
+        return; event.reported = true; try {
+        current.current.onMediaReady?.({ messageId: event.messageId, kind: event.kind, stage, elapsedMs: Date.now() - event.started });
+    }
+    catch { } };
+    return _jsx(StreamRecovery.Provider, { value: (uri, position, playing) => { void controller.fallbackStream(uri, position, playing); }, children: _jsxs(MediaReadiness.Provider, { value: mediaReady, children: [renderConversation ? renderConversation(screenProps) : _jsx(MessagingScreen, { ...screenProps }), _jsx(MessagingMediaOverlay, { onDismiss: viewerDismissed, viewerActions: () => {
+                        const m = message.current;
+                        if (!m || !state.messages.some(row => row.id === m.id && !row.deleted))
+                            return {};
+                        const action = (kind) => {
+                            afterViewer.current = { kind, messageId: m.id, sequence: Date.now() };
+                            void controller.cancel().then(() => {
+                                // Some installed native runtimes omit onDismiss after a media modal closes.
+                                // Keep the normal event fast path; recover only after the native fade ends.
+                                // Navigation/unmount clears the queued action, so it cannot open in another chat.
+                                if (afterViewer.current)
+                                    dismissFallback.current = setTimeout(viewerDismissed, Platform.OS === 'ios' ? 500 : 250);
+                            });
+                        };
+                        return { onForward: props.client.canForward(m) ? () => action('forward') : undefined, onDelete: m.senderId === props.userId && !m.readAt && state.messageActionsAvailable ? () => action('delete') : undefined };
+                    }, inlineVoice: () => !!message.current, inlineRecorder: () => !!message.current && !!current.current.client.getSnapshot().settings?.features.voice, controller: controller, audio: audioSession, appearance: props.appearance ?? state.settings?.appearance ?? defaultMessagingSettings().appearance })] }) });
+}

package/dist/expo.d.ts

@@ -1,42 +1,2 @@
-export { createExpoMessagingClient } from './expo-outbox.js';
-import React from 'react';
-import { type MessagingAppearance } from '@robono/messaging';
-import { type MessagingScreenProps } from './index.js';
-import { MessagingMediaController, type LocalMessagingMedia, type MessagingMediaStorage } from './media-controller.js';
-import { type MediaReadyStage } from './media-readiness.js';
-import { type MessagingAudioSession } from './expo-media.js';
-export { createExpoMessagingAudioSession, createExpoMessagingDevice, createExpoMessagingStorage } from './expo-media.js';
-export type { MessagingAudioSession } from './expo-media.js';
-export type { LocalMessagingMedia, MessagingMediaStorage, MediaTransferOptions } from './media-controller.js';
-export { MessagingMediaController } from './media-controller.js';
-export declare function MessagingMediaOverlay({ controller, audio, appearance, inlineVoice, inlineRecorder, viewerActions, onDismiss }: {
-    onDismiss?: () => void;
-    viewerActions?: () => {
-        onForward?: () => void;
-        onDelete?: () => void;
-    };
-    controller: MessagingMediaController;
-    audio: MessagingAudioSession;
-    appearance: MessagingAppearance;
-    inlineVoice?: boolean | (() => boolean);
-    inlineRecorder?: boolean | (() => boolean);
-}): React.JSX.Element | null;
-export interface ExpoMessagingScreenProps extends Omit<MessagingScreenProps, 'pickAttachment' | 'openAttachment'> {
-    storage: MessagingMediaStorage;
-    audioSession: MessagingAudioSession;
-    /** Optional timing callback from native image/frame/playback readiness, measured from opening. */
-    onMediaReady?: (event: {
-        messageId: string;
-        kind: string;
-        stage: MediaReadyStage;
-        elapsedMs: number;
-    }) => void;
-    /** Preload a bounded set of small recent attachments while this conversation is open. Default true. */
-    preloadRecentMedia?: boolean;
-    /** Compose a conversation with the supplied media adapters. */
-    renderConversation?: (props: MessagingScreenProps) => React.ReactNode;
-    /** Resolve an authorized recent attachment to an adapter-owned cache copy, never a library original. */
-    resolveAttachmentChoice?: (id: string, signal: AbortSignal) => Promise<LocalMessagingMedia | null>;
-}
-/** Optional ready-made recording, preview, upload and download tools for both mobile platforms. */
-export declare function ExpoMessagingScreen({ storage, audioSession, renderConversation, preloadRecentMedia, ...props }: ExpoMessagingScreenProps): React.JSX.Element;
+export * from './expo-screen.js';
+export { ExpoMessenger, createExpoMessenger, type ExpoMessengerProps } from './expo-messenger.js';