@robono/messaging-react-native 0.0.0-stage → 0.1.0

package/dist/expo.js

@@ -0,0 +1,429 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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, VideoView } from 'expo-video';
+import * as Sharing from 'expo-sharing';
+import * as Crypto from 'expo-crypto';
+import { defaultMessagingSettings } from '@robono/messaging';
+import { MessagingScreen, useMessagingUI } from './index.js';
+import { VoiceMessageComposer, VoiceDraftPlayback } from './voice-composer.js';
+import { VoicePlayback, MediaViewer, MediaPlaybackControls } 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, { ink: inline?.ink ?? c.foreground, accent: inline?.accent ?? c.accent, waveform: inline?.waveform, 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(''), [position, setPosition] = useState(0), [playing, setPlaying] = useState(false);
+    const desired = useRef(file.autoPlay ?? false), 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); });
+        const timer = setInterval(() => { if (!alive)
+            return; if (player.currentTime > 0)
+            lastPosition.current = player.currentTime * 1000; setPosition(player.currentTime * 1000); setPlaying(player.playing); 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);
+        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(); app.remove(); try {
+            player.pause();
+        }
+        catch { } void release?.().catch(() => { }); };
+    }, [player, audio]);
+    return _jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsx(View, { style: { flex: 1, minHeight: 0 }, children: _jsx(VideoView, { onFirstFrameRender: () => mediaReady('video-frame', file.uri), player: player, nativeControls: false, contentFit: "contain", style: { height: '100%', width: '100%' } }) }), _jsx(MediaPlaybackControls, { playing: playing, loading: !ready && !error, positionMs: position, durationMs: file.durationMs ?? player.duration * 1000, error: error, onToggle: () => { if (!ready)
+                    return; desired.current = !player.playing; if (player.playing)
+                    player.pause();
+                else {
+                    if (player.currentTime >= player.duration - .05)
+                        player.currentTime = 0;
+                    player.play();
+                } }, onSeek: ms => { if (ready) {
+                    lastPosition.current = ms;
+                    player.currentTime = ms / 1000;
+                } } })] });
+}
+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 }) {
+    const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+    const c = appearance.colors;
+    const [fileError, setFileError] = useState('');
+    const review = ['review', 'failed'].includes(state.phase) && !!state.file;
+    if (inlineRecorder && state.kind === 'voice')
+        return null;
+    if (inlineVoice && state.kind === 'voice' && ['opening', 'viewing', 'failed'].includes(state.phase) && !review)
+        return null;
+    const viewer = state.file && (review || state.phase === 'viewing') ? _jsx(SafeAreaView, { style: { flex: 1, backgroundColor: '#0c0e10' }, children: _jsx(MediaViewer, { 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, 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 });
+            }
+            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, { visible: state.phase !== 'idle', animationType: "none", onRequestClose: () => void controller.cancel(), children: _jsx(SafeAreaProvider, { style: { flex: 1 }, children: viewer ?? (_jsx(SafeAreaView, { style: { flex: 1, backgroundColor: c.background }, children: _jsxs(ScrollView, { contentContainerStyle: { padding: 24, gap: 20, flexGrow: 1 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 24, fontWeight: '600' }, children: state.kind === 'voice' ? 'Voice message' : state.kind === 'image' ? 'Photo' : state.kind === 'video' ? 'Video' : 'File' }), _jsx(Control, { label: state.phase === 'viewing' ? 'Close' : 'Cancel', icon: "close", color: c.foreground, onPress: () => 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 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,
+            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, 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 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 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 = recorder.getPrepared(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)) {
+            ++openingIntent.current;
+            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]);
+    const screenProps = { ...props,
+        components: { VoiceMessage: InlineVoice, VoiceComposer: InlineComposer, VoiceAttachment, ...props.components },
+        releaseAttachment: media => { void recorder.releasePrepared(media.assetId); void props.releaseAttachment?.(media); },
+        pickAttachment: (kind, options) => { if (kind === 'voice')
+            return recorder.pick('voice', undefined, 'attach'); message.current = null; chosen.current = options.attachmentId; return controller.pick(kind, options.source, options.intent); },
+        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; await controller.open(m); },
+    };
+    const mediaReady = (stage, uri) => { const event = opened.current; if (!event || event.reported || controller.getSnapshot().file?.uri !== uri)
+        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, { inlineVoice: true, inlineRecorder: !!state.settings?.features.voice, controller: controller, audio: audioSession, appearance: props.appearance ?? state.settings?.appearance ?? defaultMessagingSettings().appearance })] }) });
+}

package/dist/icons.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { type RobonoIconProps } from "./visual/RobonoIcon.js";
+export declare function MessageIcon(props: RobonoIconProps): React.JSX.Element;
+export declare function duration(ms?: number): string;
+export declare function fileSize(bytes?: number): string;
+/** Neutral app chrome stays legible for light and dark customer palettes. */
+export declare function chatSurface(background: string): "#ffffff" | "#1e262b";

package/dist/icons.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RobonoIcon } from "./visual/RobonoIcon.js";
+export function MessageIcon(props) { return _jsx(RobonoIcon, { ...props }); }
+export function duration(ms = 0) { const seconds = Math.ceil(ms / 1000); return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`; }
+export function fileSize(bytes = 0) { return bytes >= 1048576 ? `${(bytes / 1048576).toFixed(1)} MB` : bytes >= 1024 ? `${Math.ceil(bytes / 1024)} KB` : `${bytes} B`; }
+/** Neutral app chrome stays legible for light and dark customer palettes. */
+export function chatSurface(background) {
+    const rgb = background.slice(1).match(/../g)?.map(v => parseInt(v, 16)) ?? [255, 255, 255];
+    return rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 < 128 ? "#1e262b" : "#ffffff";
+}

package/dist/index.d.ts

@@ -0,0 +1,101 @@
+export { MessagingSafety } from './safety.js';
+export { PollMessage, PollComposer } from "./polls.js";
+import React, { type ComponentType, type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type VoiceComposerProps } from "./voice-composer.js";
+export { VoiceMessageComposer, VoiceDraftPlayback } from "./voice-composer.js";
+export type { VoiceComposerProps } from "./voice-composer.js";
+import { type VoiceBubbleProps } from "./media-ui.js";
+export { VoicePlayback, MediaViewer, MediaPlaybackControls, ZoomablePhoto } from "./media-ui.js";
+export type { VoiceBubbleProps } from "./media-ui.js";
+import { type MessageKind, type MessageMedia, type MessagingAppearance, type MessagingClient, type MessagingMessage, type MessagingState } from "@robono/messaging";
+export interface VoiceAttachmentProps {
+    media: MessageMedia;
+    appearance: MessagingAppearance;
+    disabled: boolean;
+    onRemove: () => void;
+}
+export interface MessagingComponents {
+    VoiceAttachment?: ComponentType<VoiceAttachmentProps>;
+    Header?: ComponentType;
+    Message?: ComponentType<{
+        message: MessagingMessage;
+    }>;
+    /** Optional inline audio adapter. The shared VoicePlayback supplies all visible controls. */
+    VoiceMessage?: ComponentType<VoiceBubbleProps>;
+    VoiceComposer?: ComponentType<VoiceComposerProps>;
+    List?: ComponentType;
+    Composer?: ComponentType;
+}
+/** Assets supplied by the host's authorized media library; choosing one adds a pending attachment. */
+export interface AttachmentChoice {
+    id: string;
+    kind: 'image' | 'video' | 'document';
+    name: string;
+    thumbnailUri?: string;
+    durationMs?: number;
+}
+export interface MessagingScreenProps {
+    client: MessagingClient;
+    /** Target language for this viewer; defaults to the device locale. */
+    language?: string;
+    userId: string;
+    contact: {
+        name: string;
+        avatarUrl?: string;
+    };
+    /** Resolve group member names through your app's authorized contact directory. */
+    participants?: Record<string, {
+        name: string;
+        avatarUrl?: string;
+    }>;
+    appearance?: MessagingAppearance;
+    components?: MessagingComponents;
+    style?: StyleProp<ViewStyle>;
+    /** Set false when this conversation is covered by another route. */
+    active?: boolean;
+    onBack?: () => void;
+    /** Optional override for the supplied contact safety menu; use your existing safety flow. */
+    onContactOptions?: () => void;
+    onMessageOptions?: (message: MessagingMessage) => void;
+    /** Optional recent media shown beneath the attachment buttons. */
+    attachmentChoices?: AttachmentChoice[];
+    /** Pick, capture or record, then upload to your private store. Return an opaque asset reference. */
+    pickAttachment?: (kind: Exclude<MessageKind, "text" | "poll">, options: {
+        maxDurationMs?: number;
+        maxFileBytes?: number;
+        allowedMimeTypes?: string[];
+        source?: "camera" | "call-video";
+        attachmentId?: string;
+        intent?: "send" | "preview" | "attach";
+    }) => Promise<MessageMedia | null>;
+    /** Release local draft resources after removal or submission; keep uploaded assets needed by retries. */
+    releaseAttachment?: (media: MessageMedia) => void | Promise<void>;
+    /** Resolve an authorized thumbnail and/or normalized waveform. Never put signed URLs in message data. */
+    attachmentPreview?: (message: MessagingMessage) => Promise<{
+        uri?: string;
+        waveform?: number[];
+    }>;
+    /** Authorize the asset and open it using your app's media player/viewer. */
+    openAttachment?: (message: MessagingMessage) => Promise<void>;
+}
+interface MessagingContext extends MessagingScreenProps {
+    state: MessagingState;
+    design: MessagingAppearance;
+    reply: MessagingMessage | null;
+    setReply: (message: MessagingMessage | null) => void;
+}
+export declare function useMessagingUI(): MessagingContext;
+export declare function MessagingProvider({ children, ...props }: MessagingScreenProps & {
+    children: ReactNode;
+}): React.JSX.Element;
+export declare function MessagingHeader({ children }?: {
+    children?: ReactNode;
+}): React.JSX.Element;
+export declare function MessagingBubble({ message }: {
+    message: MessagingMessage;
+}): React.JSX.Element;
+export declare function MessagingList(): React.JSX.Element;
+export declare function MessagingComposer(): React.JSX.Element;
+/** Embed inside your app's safe area and navigation. No engine, push or global audio side effects. */
+export declare function MessagingScreen(props: MessagingScreenProps): React.JSX.Element;