@robono/messaging-react-native 0.1.0 → 0.2.0

package/dist/expo.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { 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';
@@ -6,7 +11,9 @@ import MaterialIcons from "./visual/RobonoIcon";
 import { useAudioPlayer } from 'expo-audio';
 import { useVideoPlayer, VideoView } from 'expo-video';
 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';
@@ -217,7 +224,7 @@ function VoicePlayer({ file, audio, design, inline, draft, autoPlay = false }) {
     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())
+    return _jsx(VoicePlayback, { 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 }) {
@@ -225,8 +232,8 @@ function VideoPlayer({ file, audio }) {
     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);
+    const [ready, setReady] = useState(false), [error, setError] = useState(''), [position, setPosition] = useState(0), [playing, setPlaying] = useState(false), [fullscreen, setFullscreen] = useState(false);
+    const view = useRef(null), desired = useRef(file.autoPlay ?? true), lastPosition = useRef(file.resumeAtMs ?? 0);
     useEffect(() => {
         let alive = true, recovered = false, audioReady = false, resumed = false, release;
         const recoverStream = () => {
@@ -249,8 +256,12 @@ function VideoPlayer({ file, audio }) {
             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 (player.currentTime > 0)
+            return; if (!consumed && player.playing && player.currentTime > 0) {
+            consumed = true;
+            mediaReady('video-playing', file.uri);
+        } 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();
@@ -278,7 +289,8 @@ function VideoPlayer({ file, audio }) {
         }
         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 _jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsx(View, { style: { flex: 1, minHeight: 0 }, children: _jsx(VideoView, { ref: view, onFullscreenEnter: () => setFullscreen(true), onFullscreenExit: () => setFullscreen(false), fullscreenOptions: { enable: true, orientation: player.videoTrack?.size ? player.videoTrack.size.width > player.videoTrack.size.height ? "landscape" : "portrait" : "default" }, onFirstFrameRender: () => mediaReady('video-frame', file.uri), player: player, nativeControls: fullscreen, contentFit: "contain", style: { height: '100%', width: '100%' } }) }), _jsx(MediaPlaybackControls, { fullscreen: fullscreen, onFullscreen: () => { if (ready)
+                    void (fullscreen ? view.current?.exitFullscreen() : view.current?.enterFullscreen())?.catch(() => setError("Full screen could not open. Try again.")); }, 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 {
@@ -309,29 +321,40 @@ function FileViewer({ file, kind, audio, design }) {
                     } })();
                 } }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: design.colors.foreground }, children: error })] });
 }
-export function MessagingMediaOverlay({ controller, audio, appearance, inlineVoice = false, inlineRecorder = false }) {
+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 [fileError, setFileError] = useState('');
+    const mediaReady = useContext(MediaReadiness);
+    const [fileError, setFileError] = useState(''), [downloading, setDownloading] = useState(false);
+    const saving = useRef(false);
     const review = ['review', 'failed'].includes(state.phase) && !!state.file;
-    if (inlineRecorder && state.kind === 'voice')
+    if (state.phase !== 'idle' && (typeof inlineRecorder === 'function' ? inlineRecorder() : inlineRecorder) && state.kind === 'voice')
         return null;
-    if (inlineVoice && state.kind === 'voice' && ['opening', 'viewing', 'failed'].includes(state.phase) && !review)
+    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(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 {
+    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, ...(!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, { 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() })] }) })) }) });
+    return _jsx(Modal, { transparent: true, visible: state.phase !== 'idle' && state.phase !== 'choosing', onDismiss: onDismiss, animationType: "fade", 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 [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);
@@ -350,11 +373,33 @@ export function ExpoMessagingScreen({ storage, audioSession, renderConversation,
                         return current.current.resolveAttachmentChoice(id, signal);
                     }
                     return device.pick(kind, settings, signal, source);
-                } }, storage: recent.storage, createId: Crypto.randomUUID,
+                } }, 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, createId: Crypto.randomUUID, getSettings: () => current.current.client.getSnapshot().settings ?? defaultMessagingSettings(), getConversationId: () => current.current.client.getSnapshot().conversationId }); }, [storage, 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 = 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;
+    };
+    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));
@@ -371,6 +416,10 @@ export function ExpoMessagingScreen({ storage, audioSession, renderConversation,
             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 }) {
+        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, 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();
@@ -386,12 +435,14 @@ export function ExpoMessagingScreen({ storage, audioSession, renderConversation,
         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 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)) {
+        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();
@@ -412,18 +463,87 @@ export function ExpoMessagingScreen({ storage, audioSession, renderConversation,
         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); },
+    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 screenProps = { ...props, requestedMessageAction,
+        copyText: props.copyText ?? (async (text) => { await Clipboard.setStringAsync(text); }),
+        components: { SocialPlayer, TranslationVoice, VoiceMessage: InlineVoice, VoiceComposer: InlineComposer, VoiceAttachment, ...props.components },
+        attachmentPreview: props.attachmentPreview ?? (async (m) => { if (m.media && m.kind !== 'text' && m.kind !== 'poll')
+            await restore(m.media, m.kind); return thumbnails.preview(m); }),
+        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 = await controller.pick(kind, options.source, options.source === 'call-video' ? 'preview' : options.intent === 'preview' ? 'preview' : 'attach');
+            }
+            if (media && outbox) {
+                const file = recorder.getPrepared(media.assetId) ?? controller.getPrepared(media.assetId);
+                if (!file)
+                    throw Error('The selected file is unavailable.');
+                try {
+                    await outbox.saveFile(conversationId, media, file, kind);
+                }
+                catch (error) {
+                    await recorder.releasePrepared(media.assetId);
+                    await controller.releasePrepared(media.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; await controller.open(m); },
+            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 || event.reported || controller.getSnapshot().file?.uri !== uri)
+    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, { inlineVoice: true, inlineRecorder: !!state.settings?.features.voice, controller: controller, audio: audioSession, appearance: props.appearance ?? state.settings?.appearance ?? defaultMessagingSettings().appearance })] }) });
+    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/forward.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { MessagingAppearance, MessagingClient, MessagingMessage } from '@robono/messaging';
+/** Messenger's compact destination picker, retaining per-message retry identities. */
+export declare function MessagingForward({ messages, client, appearance, participants, userId, onClose }: {
+    messages: MessagingMessage[];
+    client: MessagingClient;
+    appearance: MessagingAppearance;
+    participants?: Record<string, {
+        name: string;
+    }>;
+    userId: string;
+    onClose: () => void;
+}): React.JSX.Element;

package/dist/forward.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
+import { MessagingPopup } from './popup.js';
+/** Messenger's compact destination picker, retaining per-message retry identities. */
+export function MessagingForward({ messages, client, appearance, participants = {}, userId, onClose }) {
+    const [page, setPage] = useState(null), [loading, setLoading] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState('');
+    const live = useRef(true), inFlight = useRef(false), attempts = useRef(new Map()), done = useRef(new Set());
+    const c = appearance.colors;
+    useEffect(() => { live.current = true; void load(false); return () => { live.current = false; }; }, []);
+    async function load(more) { if (inFlight.current)
+        return; inFlight.current = true; setLoading(true); setError(''); try {
+        const next = await client.forwardTargets(more ? page?.nextCursor ?? undefined : undefined);
+        if (live.current)
+            setPage(previous => ({ ...next, conversations: more ? [...new Map([...(previous?.conversations ?? []), ...next.conversations].map(row => [row.id, row])).values()] : next.conversations }));
+    }
+    catch (e) {
+        if (live.current)
+            setError(e instanceof Error ? e.message : 'Chats could not be loaded.');
+    }
+    finally {
+        inFlight.current = false;
+        if (live.current)
+            setLoading(false);
+    } }
+    async function send(row) {
+        if (inFlight.current)
+            return;
+        inFlight.current = true;
+        setBusy(true);
+        setError('');
+        try {
+            for (const message of messages) {
+                const key = row.id + ':' + message.id;
+                if (done.current.has(key))
+                    continue;
+                let id = attempts.current.get(key);
+                if (!id) {
+                    id = client.createForwardId();
+                    attempts.current.set(key, id);
+                }
+                await client.forwardMessage(message.id, row.id, id);
+                done.current.add(key);
+                if (!live.current)
+                    return;
+            }
+            onClose();
+        }
+        catch (e) {
+            if (live.current)
+                setError(e instanceof Error ? e.message : 'The message could not be forwarded. Try again.');
+        }
+        finally {
+            inFlight.current = false;
+            if (live.current)
+                setBusy(false);
+        }
+    }
+    return _jsxs(MessagingPopup, { background: c.background, onClose: () => { if (!busy)
+            onClose(); }, children: [_jsx(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 17, fontWeight: '600' }, children: "Forward to" }), _jsx(ScrollView, { style: { maxHeight: 360, marginTop: 8 }, children: page?.conversations.filter(row => row.canSend).map(row => { const name = row.kind === 'group' ? row.name ?? 'Group' : row.contactId === userId ? 'You' : participants[row.contactId ?? '']?.name ?? row.contactId ?? 'Chat'; return _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Forward to ' + name, disabled: busy || loading, onPress: () => void send(row), style: { minHeight: 48, justifyContent: 'center', paddingVertical: 10 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: name }) }, row.id); }) }), loading || busy ? _jsx(ActivityIndicator, { color: c.accent, style: { margin: 12 } }) : page && !page.conversations.some(row => row.canSend) && _jsx(Text, { style: { color: c.secondary, marginVertical: 12 }, children: "No chats available." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'flex-end', gap: 20, marginTop: 8 }, children: [!page && error && _jsx(Pressable, { accessibilityRole: "button", onPress: () => void load(false), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "Try again" }) }), page?.hasMore && _jsx(Pressable, { accessibilityRole: "button", disabled: loading || busy, onPress: () => void load(true), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "More chats" }) }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: onClose, style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground }, children: "Cancel" }) })] })] });
+}

package/dist/icons.d.ts

@@ -4,4 +4,4 @@ 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";
+export declare function chatSurface(background: string): "#1e262b" | "#ffffff";

package/dist/inbox.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type MessagingAppearance, type MessagingInboxClient, type ConversationSummary } from '@robono/messaging';
+export interface MessagingInboxProps {
+    client: MessagingInboxClient;
+    userId: string;
+    contacts?: Record<string, {
+        name: string;
+        avatarUrl?: string;
+    }>;
+    appearance?: MessagingAppearance;
+    active?: boolean;
+    onSelect: (conversation: ConversationSummary) => void;
+    onDeleted?: (conversationId: string) => Promise<void> | void;
+}
+/** Compact Messenger chat rows: avatar, name, last message, time and unread badge. */
+export declare function MessagingInbox({ client, userId, contacts, appearance, active, onSelect, onDeleted }: MessagingInboxProps): React.JSX.Element;

package/dist/inbox.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { AppState, FlatList, Image, Modal, Platform, Pressable, Text, View, useWindowDimensions } from 'react-native';
+import { defaultMessagingSettings } from '@robono/messaging';
+import { MessagingPopup } from './popup.js';
+/** Compact Messenger chat rows: avatar, name, last message, time and unread badge. */
+export function MessagingInbox({ client, userId, contacts = {}, appearance, active = true, onSelect, onDeleted }) {
+    const state = useSyncExternalStore(client.subscribe, client.getSnapshot, client.getSnapshot), design = appearance ?? state.appearance ?? defaultMessagingSettings().appearance, c = design.colors;
+    useEffect(() => { const update = (value) => { if (active && (value === null || value === 'active'))
+        client.start();
+    else
+        client.stop(); }; update(AppState.currentState); const sub = AppState.addEventListener('change', update); return () => { sub.remove(); client.stop(); }; }, [client, active]);
+    const [selected, setSelected] = useState(null), [confirm, setConfirm] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState(''), [anchor, setAnchor] = useState({ x: 8, y: 8 });
+    const window = useWindowDimensions();
+    const title = (row) => row.kind === 'group' ? row.name ?? 'Group' : contacts[row.contactId ?? '']?.name ?? row.contactId ?? 'Chat';
+    const openOptions = (row, x, y) => { if (!state.inboxActionsAvailable)
+        return; setSelected(row); setAnchor({ x: Math.max(8, Math.min(x, window.width - 288)), y: Math.max(8, Math.min(y, window.height - 200)) }); setConfirm(false); setError(''); };
+    useEffect(() => { if (selected && !state.conversations.some(c => c.id === selected.id) && !busy && !error)
+        setSelected(null); }, [state.conversations, busy, selected, error]);
+    async function act(remove) { if (!selected || busy)
+        return; setBusy(true); setError(''); try {
+        if (remove) {
+            await client.deleteConversation(selected);
+            await onDeleted?.(selected.id);
+        }
+        else
+            await client.setMuted(selected.id, !selected.muted);
+        setSelected(null);
+        setConfirm(false);
+    }
+    catch (e) {
+        setError(e instanceof Error ? e.message : 'Chat options could not be saved.');
+    }
+    finally {
+        setBusy(false);
+    } }
+    const preview = (row) => { const m = row.lastMessage; if (!m)
+        return 'No messages yet'; const text = m.kind === 'text' ? m.text ?? '' : ({ voice: 'Voice message', image: 'Photo', video: 'Video', document: 'Document', poll: 'Poll' }[m.kind] ?? 'Message'); return (m.senderId === userId ? 'You: ' : '') + text; };
+    return _jsxs(View, { style: { flex: 1, minHeight: 0, backgroundColor: c.background }, children: [_jsx(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 20, fontWeight: '700', padding: 12, borderBottomWidth: 1, borderBottomColor: c.foreground + '12' }, children: "Chats" }), state.error && _jsxs(View, { style: { padding: 12 }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: state.error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void client.refresh().catch(() => { }), children: _jsx(Text, { style: { color: c.accent, paddingVertical: 8 }, children: "Try again" }) })] }), _jsx(FlatList, { data: state.conversations, keyExtractor: row => row.id, contentContainerStyle: { flexGrow: 1 }, ItemSeparatorComponent: () => _jsx(View, { style: { height: 1, backgroundColor: c.foreground + '12', marginLeft: 64 } }), ListEmptyComponent: _jsx(Text, { style: { padding: 20, textAlign: 'center', color: c.secondary }, children: state.loading ? 'Loading chats…' : state.error ? '' : 'No chats yet' }), ListFooterComponent: state.hasMore ? _jsx(Pressable, { accessibilityRole: "button", disabled: state.loading, onPress: () => void client.loadMore().catch(() => { }), children: _jsx(Text, { style: { padding: 12, textAlign: 'center', color: c.accent }, children: state.loading ? 'Loading…' : 'More chats' }) }) : null, renderItem: ({ item }) => {
+                    const person = item.contactId ? contacts[item.contactId] : undefined, title = item.kind === 'group' ? item.name ?? 'Group' : person?.name ?? item.contactId ?? 'Chat';
+                    const date = item.lastMessage ? new Date(item.lastMessage.createdAt) : null;
+                    return _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${title}${item.unreadCount ? `, ${item.unreadCount} unread` : ''}`, onPress: () => onSelect(item), onLongPress: e => openOptions(item, e.nativeEvent.pageX, e.nativeEvent.pageY), accessibilityActions: state.inboxActionsAvailable ? [{ name: 'showOptions', label: 'Chat options' }] : [], onAccessibilityAction: e => { if (e.nativeEvent.actionName === 'showOptions')
+                            openOptions(item, window.width / 2 - 140, window.height / 2 - 100); }, ...(Platform.OS === 'web' ? { onContextMenu: (e) => { e.preventDefault(); openOptions(item, e.clientX, e.clientY); } } : {}), style: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 12, paddingVertical: 10, minHeight: 68 }, children: [person?.avatarUrl ? _jsx(Image, { source: { uri: person.avatarUrl }, style: { width: 40, height: 40, borderRadius: 20 } }) : _jsx(View, { style: { width: 40, height: 40, borderRadius: 20, backgroundColor: c.accent + '20', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 18, fontWeight: '700' }, children: title.slice(0, 1).toUpperCase() }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsxs(Text, { numberOfLines: 1, style: { color: c.foreground, fontSize: 16, fontWeight: '700' }, children: [title, item.muted ? ' · Muted' : ''] }), _jsx(Text, { numberOfLines: 1, style: { color: c.secondary, marginTop: 3, fontSize: 14 }, children: preview(item) })] }), _jsxs(View, { style: { alignItems: 'flex-end', gap: 4 }, children: [_jsx(Text, { style: { color: item.unreadCount ? c.accent : c.secondary, fontSize: 12 }, children: date ? date.toDateString() === new Date().toDateString() ? date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' }) : date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : '' }), item.unreadCount > 0 && _jsx(View, { style: { minWidth: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: c.accent, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 5 }, children: _jsx(Text, { style: { color: c.accent, fontSize: 10, fontWeight: '900' }, children: item.unreadCount > 99 ? '99+' : item.unreadCount }) })] })] });
+                } }), selected && !confirm && _jsx(Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: () => { if (!busy)
+                    setSelected(null); }, children: _jsx(Pressable, { accessibilityLabel: "Close chat options", onPress: () => { if (!busy)
+                        setSelected(null); }, style: { flex: 1, backgroundColor: '#0004' }, children: _jsxs(View, { onStartShouldSetResponder: () => true, style: { position: 'absolute', left: anchor.x, top: anchor.y, width: 280, borderRadius: 18, padding: 8, backgroundColor: c.background }, children: [_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => void act(false), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground }, children: selected.muted ? 'Unmute' : 'Mute' }) }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setConfirm(true), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground }, children: "Delete chat" }) }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setSelected(null), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.secondary }, children: "Cancel" }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, padding: 12 }, children: error })] }) }) }), selected && confirm && _jsxs(MessagingPopup, { background: c.background, onClose: () => { if (!busy)
+                    setConfirm(false); }, children: [_jsxs(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 17, fontWeight: '600' }, children: ["Delete chat with ", title(selected), "?"] }), _jsx(Text, { style: { color: c.secondary, marginTop: 8 }, children: "This removes the chat and its history from your view. Other people keep their copy. New messages can bring the chat back." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'flex-end', gap: 20, marginTop: 12 }, children: [_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setConfirm(false), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground }, children: "Cancel" }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Confirm delete chat", disabled: busy, onPress: () => void act(true), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "Delete" }) })] })] })] });
+}

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+import { type SocialPlayerProps } from './social.js';
+export type { SocialPlayerProps } from './social.js';
+export { MessagingSearch } from './search.js';
 export { MessagingSafety } from './safety.js';
 export { PollMessage, PollComposer } from "./polls.js";
 import React, { type ComponentType, type ReactNode } from "react";
@@ -8,14 +11,22 @@ 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";
+import { type MessageKind, type MessageMedia, type MessagingAppearance, type MessagingClient, type MessagingMessage, type MessagingState, type MessageTransform, type SavedMessage } from "@robono/messaging";
 export interface VoiceAttachmentProps {
     media: MessageMedia;
     appearance: MessagingAppearance;
     disabled: boolean;
     onRemove: () => void;
 }
+export interface TranslationVoiceProps {
+    transform: MessageTransform;
+    ink: string;
+    accent: string;
+    showWaveform?: boolean;
+}
 export interface MessagingComponents {
+    SocialPlayer?: ComponentType<SocialPlayerProps>;
+    TranslationVoice?: ComponentType<TranslationVoiceProps>;
     VoiceAttachment?: ComponentType<VoiceAttachmentProps>;
     Header?: ComponentType;
     Message?: ComponentType<{
@@ -37,6 +48,10 @@ export interface AttachmentChoice {
 }
 export interface MessagingScreenProps {
     client: MessagingClient;
+    /** Browser adapter supplies the hosting origin; native embeds use Robono's domain. */
+    socialOrigin?: string;
+    /** Optional self-hosted copy of messaging-embed.html, for strict website policies. */
+    socialEmbedPageUrl?: string;
     /** Target language for this viewer; defaults to the device locale. */
     language?: string;
     userId: string;
@@ -58,6 +73,14 @@ export interface MessagingScreenProps {
     /** Optional override for the supplied contact safety menu; use your existing safety flow. */
     onContactOptions?: () => void;
     onMessageOptions?: (message: MessagingMessage) => void;
+    /** Used by the media preview to open the same message actions. */
+    requestedMessageAction?: {
+        kind: 'forward' | 'delete';
+        messageId: string;
+        sequence: number;
+    };
+    /** Native clipboard adapter. Supplied by ExpoMessagingScreen. Web uses its clipboard. */
+    copyText?: (text: string) => Promise<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. */
@@ -71,6 +94,9 @@ export interface MessagingScreenProps {
     }) => Promise<MessageMedia | null>;
     /** Release local draft resources after removal or submission; keep uploaded assets needed by retries. */
     releaseAttachment?: (media: MessageMedia) => void | Promise<void>;
+    /** Upload a locally selected attachment after its outgoing bubble is visible. */
+    prepareAttachment?: (kind: Exclude<MessageKind, 'text' | 'poll'>, media: MessageMedia) => Promise<MessageMedia>;
+    retainDraftAttachments?: boolean;
     /** Resolve an authorized thumbnail and/or normalized waveform. Never put signed URLs in message data. */
     attachmentPreview?: (message: MessagingMessage) => Promise<{
         uri?: string;
@@ -78,24 +104,41 @@ export interface MessagingScreenProps {
     }>;
     /** Authorize the asset and open it using your app's media player/viewer. */
     openAttachment?: (message: MessagingMessage) => Promise<void>;
+    openSavedAttachment?: (record: SavedMessage) => Promise<void>;
 }
 interface MessagingContext extends MessagingScreenProps {
     state: MessagingState;
     design: MessagingAppearance;
     reply: MessagingMessage | null;
+    editing: MessagingMessage | null;
+    setEditing: (message: MessagingMessage | null) => void;
+    setForwarding: (messages: MessagingMessage[]) => void;
+    setDeleting: (messages: MessagingMessage[]) => void;
+    selection: MessagingMessage[];
+    setSelection: (messages: MessagingMessage[]) => void;
+    saved: SavedMessage[];
+    saving: boolean;
+    toggleSaved: (message: MessagingMessage) => Promise<void>;
+    setSavedOpen: (open: boolean) => void;
     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 messagingHeaderColors(design: MessagingAppearance, group: boolean): {
+    background: string;
+    foreground: string;
+};
 export declare function MessagingHeader({ children }?: {
     children?: ReactNode;
 }): React.JSX.Element;
-export declare function MessagingBubble({ message }: {
+export declare function MessagingBubble({ message, pendingStatus }: {
     message: MessagingMessage;
+    pendingStatus?: 'sending' | 'failed';
 }): 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;
+export { MessagingInbox, type MessagingInboxProps } from './inbox.js';