@robono/messaging-react-native 0.1.0 → 0.3.0

package/dist/expo-thumbnails.js

@@ -0,0 +1,68 @@
+import * as ImageManipulator from 'expo-image-manipulator';
+import * as VideoThumbnails from 'expo-video-thumbnails';
+import * as FS from 'expo-file-system/legacy';
+/** Small local previews, with bounded downloads and memory. Large originals stay
+ * tap-to-open until the storage service supplies a dedicated thumbnail. */
+export function createExpoThumbnails(storage, local, remove) {
+    let generation = 0;
+    const cache = new Map(), abort = new Set();
+    let queue = Promise.resolve();
+    function clear() { generation++; cache.clear(); for (const c of abort)
+        c.abort(); abort.clear(); }
+    function preview(message) {
+        const media = message.media;
+        if (!media || message.deleted)
+            return Promise.resolve({});
+        if (message.kind === 'voice')
+            return Promise.resolve({ waveform: media.waveform });
+        if (!['image', 'video'].includes(message.kind))
+            return Promise.resolve({});
+        const id = media.assetId, existing = cache.get(id);
+        if (existing)
+            return existing;
+        const g = generation;
+        const work = queue.then(async () => {
+            if (g !== generation)
+                return {};
+            let file = local(id), downloaded = false, poster, thumbnail;
+            const controller = new AbortController();
+            abort.add(controller);
+            try {
+                let dedicated = false;
+                if (!file && storage.thumbnail) {
+                    file = await storage.thumbnail(message, { signal: controller.signal, onProgress: () => { } }).catch(() => null) ?? undefined;
+                    dedicated = !!file;
+                    downloaded = !!file;
+                }
+                if (!file) {
+                    if (media.byteSize > 2 * 1024 * 1024)
+                        return {};
+                    file = await storage.download(message, { signal: controller.signal, onProgress: () => { } });
+                    downloaded = true;
+                }
+                if (g !== generation)
+                    return {};
+                if (message.kind === 'video' && !dedicated)
+                    poster = (await VideoThumbnails.getThumbnailAsync(file.uri, { time: 0, quality: .6 })).uri;
+                const result = await ImageManipulator.manipulateAsync(poster ?? file.uri, [{ resize: { width: 480 } }], { compress: .7, format: ImageManipulator.SaveFormat.JPEG, base64: true });
+                thumbnail = result.uri;
+                return g === generation && result.base64 ? { uri: 'data:image/jpeg;base64,' + result.base64 } : {};
+            }
+            finally {
+                abort.delete(controller);
+                if (downloaded && file)
+                    await remove(file).catch(() => { });
+                for (const uri of [poster, thumbnail])
+                    if (uri && FS.cacheDirectory && uri.startsWith(FS.cacheDirectory))
+                        await FS.deleteAsync(uri, { idempotent: true }).catch(() => { });
+            }
+        }).catch(() => ({}));
+        queue = work.then(() => { });
+        cache.set(id, work);
+        if (cache.size > 100)
+            cache.delete(cache.keys().next().value);
+        return work;
+    }
+    return { preview, clear, alias: (from, to) => { const value = cache.get(from); if (value)
+            cache.set(to, value); } };
+}

package/dist/expo.d.ts

@@ -1,36 +1,2 @@
-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 }: {
-    controller: MessagingMediaController;
-    audio: MessagingAudioSession;
-    appearance: MessagingAppearance;
-    inlineVoice?: boolean;
-    inlineRecorder?: 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';

package/dist/expo.js

@@ -1,429 +1,2 @@
-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 })] }) });
-}
+export * from './expo-screen.js';
+export { ExpoMessenger, createExpoMessenger } from './expo-messenger.js';

package/dist/extras-lifecycle.d.ts

@@ -0,0 +1,2 @@
+import type { MessagingExtrasClient } from '@robono/messaging';
+export declare function retainExtrasLifecycle(extras: MessagingExtrasClient): () => void;

package/dist/extras-lifecycle.js

@@ -0,0 +1,27 @@
+import { AppState } from 'react-native';
+// Keep foreground shares alive while the user changes chats or visits the inbox.
+// The last screen may leave; background/logout still stop capture immediately.
+const clients = new WeakMap();
+export function retainExtrasLifecycle(extras) {
+    let entry = clients.get(extras);
+    if (!entry) {
+        const next = { users: 0, release: () => { } };
+        const subscription = AppState.addEventListener('change', state => {
+            if (state !== 'active')
+                extras.pause();
+            else if (next.users)
+                void extras.refresh();
+        });
+        const cleanup = () => { if (!next.users && !extras.hasActiveTracking()) {
+            subscription.remove();
+            unsubscribe();
+            clients.delete(extras);
+        } };
+        const unsubscribe = extras.subscribe(cleanup);
+        next.release = () => { next.users--; cleanup(); };
+        clients.set(extras, next);
+        entry = next;
+    }
+    entry.users++;
+    return entry.release;
+}

package/dist/extras.d.ts

@@ -0,0 +1,49 @@
+import React, { type ReactNode } from 'react';
+import { type ChatExtra, type ChatTracker, type ChatDestination, type MessagingExtrasClient } from '@robono/messaging';
+/** Render every supplied tracker with an avatar pin and a speed/ETA callout.
+ * Use height for the available map viewport and imperial/now for synchronized labels. */
+export interface TrackingMapProps {
+    destination: ChatDestination;
+    trackers: ChatTracker[];
+    accent: string;
+    height?: number;
+    imperial?: boolean;
+    now?: number;
+    selectedUserId?: string;
+    onSelect?: (id: string) => void;
+}
+export interface PrivacyLayerProps {
+    children: ReactNode;
+    enabled: boolean;
+    background: string;
+}
+export declare const privacyReadingStripHeight = 74;
+/** Messenger's fixed 74px reading strip. Scrolling moves messages through it. */
+export declare function MessagingPrivacyLayer({ children, enabled, background }: PrivacyLayerProps): React.JSX.Element;
+export declare function openChatAddress(address: string): Promise<void>;
+export declare function ExtraPopup({ title, onClose, background, foreground, children, expanded }: {
+    title: string;
+    onClose: () => void;
+    background: string;
+    foreground: string;
+    children: ReactNode;
+    expanded?: boolean;
+}): React.JSX.Element;
+export declare const MessageExtra: React.ForwardRefExoticComponent<{
+    addressBubbleHeight?: number;
+    extra: ChatExtra;
+    messageId: string;
+    userId: string;
+    extras: MessagingExtrasClient;
+    ink: string;
+    accent: string;
+    background: string;
+    foreground: string;
+    footer?: ReactNode;
+    renderAddress?: (action: ReactNode, participants: ReactNode) => ReactNode;
+    Map?: React.ComponentType<TrackingMapProps>;
+    onLongPress?: () => void;
+    onCall?: (kind: "voice" | "video") => void;
+} & React.RefAttributes<{
+    open: () => void;
+}>>;