@robono/messaging-react-native 0.1.0 → 0.2.0

package/dist/media-controller.d.ts

@@ -20,6 +20,7 @@ export interface MessagingMediaStorage {
         conversationId: string;
         kind: MediaKind;
     }): Promise<MessageMedia>;
+    thumbnail?(message: MessagingMessage, context: MediaTransferOptions): Promise<LocalMessagingMedia | null>;
     download(message: MessagingMessage, context: MediaTransferOptions): Promise<LocalMessagingMedia>;
     /** Optional native streaming for voice/video. Return null to use a verified download. */
     stream?(message: MessagingMessage, context: MediaTransferOptions): Promise<LocalMessagingMedia | null>;
@@ -69,14 +70,27 @@ export declare class MessagingMediaController {
     private stageRecording;
     private openedMessage;
     private prepared;
+    private preparedUploads;
+    private preparedAborts;
     getPrepared: (assetId: string) => LocalMessagingMedia | undefined;
+    restorePrepared(assetId: string, file: LocalMessagingMedia, kind: MediaKind): void;
     releasePrepared(assetId: string): Promise<void>;
+    /** Browser drafts stay local until Send; the original ID survives upload retries. */
+    uploadPrepared(assetId: string, kind: MediaKind): Promise<MessageMedia>;
+    private forwardUploads;
+    /** Download through source authorization and upload a new destination-owned asset. */
+    prepareForward(message: MessagingMessage, target: {
+        conversationId: string;
+        settings: MessagingSettings;
+        uploadId: string;
+    }): Promise<MessageMedia>;
     constructor(options: {
         device: MessagingMediaDevice;
         storage: MessagingMediaStorage;
         createId: () => string;
         getSettings: () => MessagingSettings;
         getConversationId: () => string;
+        stageLocal?: boolean;
     });
     getSnapshot: () => MessagingMediaState;
     subscribe: (f: () => void) => () => void;
@@ -86,7 +100,11 @@ export declare class MessagingMediaController {
     private check;
     finishRecording(interrupted?: boolean): Promise<void>;
     send(): Promise<void>;
+    /** View an owned cache copy of a draft. Closing never removes the original draft. */
+    previewLocal(file: LocalMessagingMedia, kind: MediaKind): Promise<void>;
     open(message: MessagingMessage): Promise<void>;
+    /** Save/share a local copy of a playing stream without replacing its playback source. */
+    exportFile<T>(save: (file: LocalMessagingMedia) => Promise<T>): Promise<T>;
     /** Recover a failed/expired native stream once through fresh authorized download. */
     fallbackStream(uri: string, positionMs: number, autoPlay: boolean): Promise<void>;
     private openMedia;

package/dist/media-controller.js

@@ -18,9 +18,70 @@ export class MessagingMediaController {
     stageRecording = false;
     openedMessage = null;
     prepared = new Map();
+    preparedUploads = new Map();
+    preparedAborts = new Map();
     getPrepared = (assetId) => this.prepared.get(assetId);
-    async releasePrepared(assetId) { const file = this.prepared.get(assetId); this.prepared.delete(assetId); if (file)
+    restorePrepared(assetId, file, kind) {
+        if (this.disposed)
+            throw Error('Messaging media is closed.');
+        validateMessageMedia(kind, { ...file, assetId }, this.options.getSettings());
+        this.prepared.set(assetId, file);
+    }
+    async releasePrepared(assetId) { const file = this.prepared.get(assetId); this.prepared.delete(assetId); this.preparedUploads.delete(assetId); this.preparedAborts.get(assetId)?.abort(); this.preparedAborts.delete(assetId); if (file)
         await this.options.device.remove(file).catch(() => { }); }
+    /** Browser drafts stay local until Send; the original ID survives upload retries. */
+    async uploadPrepared(assetId, kind) {
+        const saved = this.preparedUploads.get(assetId);
+        if (saved)
+            return saved;
+        const file = this.prepared.get(assetId);
+        if (!file || this.disposed)
+            throw Error('Choose the attachment again.');
+        const conversationId = this.options.getConversationId(), abort = new AbortController();
+        this.preparedAborts.set(assetId, abort);
+        try {
+            validateMessageMedia(kind, { ...file, assetId }, this.options.getSettings());
+            const media = await this.options.storage.upload(file, { uploadId: assetId, conversationId, kind, signal: abort.signal, onProgress: () => { } });
+            if (abort.signal.aborted || this.disposed || conversationId !== this.options.getConversationId())
+                throw Error('The conversation changed.');
+            validateMessageMedia(kind, media, this.options.getSettings());
+            this.preparedUploads.set(assetId, media);
+            return media;
+        }
+        finally {
+            if (this.preparedAborts.get(assetId) === abort)
+                this.preparedAborts.delete(assetId);
+        }
+    }
+    forwardUploads = new Map();
+    /** Download through source authorization and upload a new destination-owned asset. */
+    async prepareForward(message, target) {
+        if (!message.media || message.kind === 'text' || message.kind === 'poll' || this.disposed)
+            throw Error('This attachment cannot be forwarded.');
+        validateMessageMedia(message.kind, message.media, target.settings);
+        const key = target.conversationId + ':' + target.uploadId, saved = this.forwardUploads.get(key);
+        if (saved)
+            return saved;
+        const source = this.options.getConversationId(), abort = new AbortController();
+        this.preparedAborts.set(key, abort);
+        let file;
+        try {
+            file = await this.options.storage.download(message, { signal: abort.signal, onProgress: () => { } });
+            if (abort.signal.aborted || this.disposed || source !== this.options.getConversationId())
+                throw Error('The conversation changed.');
+            const media = await this.options.storage.upload(file, { ...target, kind: message.kind, signal: abort.signal, onProgress: () => { } });
+            validateMessageMedia(message.kind, media, target.settings);
+            this.forwardUploads.set(key, media);
+            if (this.forwardUploads.size > 100)
+                this.forwardUploads.delete(this.forwardUploads.keys().next().value);
+            return media;
+        }
+        finally {
+            this.preparedAborts.delete(key);
+            if (file)
+                await this.options.device.remove(file).catch(() => { });
+        }
+    }
     constructor(options) {
         this.options = options;
     }
@@ -86,7 +147,17 @@ export class MessagingMediaController {
                     this.update({ file, ...(source === 'camera' ? { kind: file.mimeType.startsWith('video/') ? 'video' : 'image' } : {}) });
                     this.check(file);
                     this.update({ phase: 'review' });
-                    if (selectionIntent === 'send' && !source)
+                    if (this.options.stageLocal && selectionIntent === 'attach') {
+                        const media = { assetId: this.uploadId, mimeType: file.mimeType, fileName: file.fileName, byteSize: file.byteSize, ...(file.durationMs ? { durationMs: file.durationMs } : {}) };
+                        this.prepared.set(media.assetId, file);
+                        const resolve = this.resolve;
+                        this.resolve = null;
+                        this.uploadId = '';
+                        this.abort = null;
+                        this.update({ phase: 'idle', file: null, error: null });
+                        resolve?.(media);
+                    }
+                    else if (selectionIntent === 'send' && !source)
                         await this.send();
                 }
             }
@@ -148,6 +219,17 @@ export class MessagingMediaController {
         let retryUpload = false;
         try {
             this.check(file);
+            if (this.stageRecording && this.options.stageLocal) {
+                const media = { assetId: uploadId, mimeType: file.mimeType, fileName: file.fileName, byteSize: file.byteSize, durationMs: file.durationMs, waveform: [...(this.state.waveform ?? [])] };
+                this.prepared.set(uploadId, file);
+                const resolve = this.resolve;
+                this.resolve = null;
+                this.uploadId = '';
+                this.abort = null;
+                this.update({ phase: 'idle', file: null, error: null });
+                resolve?.(media);
+                return;
+            }
             this.update({ phase: 'uploading', progress: 0, error: null, retryUpload: false });
             retryUpload = true;
             const media = await this.options.storage.upload(file, { uploadId, conversationId: this.conversationId, kind: this.state.kind, signal: abort.signal, onProgress: f => { if (this.isCurrent(g))
@@ -176,7 +258,39 @@ export class MessagingMediaController {
                 this.update({ phase: 'failed', error: this.error(e), retryUpload });
         }
     }
+    /** View an owned cache copy of a draft. Closing never removes the original draft. */
+    async previewLocal(file, kind) {
+        const intent = ++this.intent;
+        await this.closeCurrent();
+        if (intent !== this.intent || this.disposed) {
+            await this.options.device.remove(file);
+            return;
+        }
+        this.conversationId = this.options.getConversationId();
+        this.update({ phase: 'viewing', kind, file, error: null, progress: 0 });
+    }
     open(message) { return this.openMedia(message); }
+    /** Save/share a local copy of a playing stream without replacing its playback source. */
+    async exportFile(save) {
+        const file = this.state.file, generation = this.generation, message = this.openedMessage;
+        if (this.disposed || !file || this.state.phase !== 'viewing')
+            throw Error('The media viewer is closed.');
+        if (!file.stream)
+            return save(file);
+        if (!message || !this.abort)
+            throw Error('The attachment is unavailable.');
+        const copy = await this.options.storage.download(message, { signal: this.abort.signal, onProgress: () => { } });
+        try {
+            if (!this.isCurrent(generation) || this.options.getConversationId() !== message.conversationId)
+                throw Error('The media viewer is closed.');
+            if (copy.stream)
+                throw Error('A local file is required to save this attachment.');
+            return await save(copy);
+        }
+        finally {
+            await this.options.device.remove(copy).catch(() => { });
+        }
+    }
     /** Recover a failed/expired native stream once through fresh authorized download. */
     fallbackStream(uri, positionMs, autoPlay) {
         if (!this.state.file?.stream || this.state.file.uri !== uri || !this.openedMessage)
@@ -252,6 +366,7 @@ export class MessagingMediaController {
         await this.finishRecording(true);
     else if (this.state.phase === 'preparing')
         await this.cancel(); }
-    async dispose() { this.disposed = true; await this.cancel(); await Promise.all([...this.prepared.keys()].map(id => this.releasePrepared(id))); this.listeners.clear(); }
+    async dispose() { this.disposed = true; for (const abort of this.preparedAborts.values())
+        abort.abort(); this.forwardUploads.clear(); await this.cancel(); await Promise.all([...this.prepared.keys()].map(id => this.releasePrepared(id))); this.listeners.clear(); }
     error(e) { return e instanceof Error ? e.message : 'The attachment could not be opened. Try again.'; }
 }

package/dist/media-readiness.d.ts

@@ -1,4 +1,4 @@
-export type MediaReadyStage = 'image-loaded' | 'video-frame' | 'audio-playing';
+export type MediaReadyStage = 'image-loaded' | 'video-frame' | 'audio-playing' | 'video-playing' | 'file-opened';
 export declare const MediaReadiness: import("react").Context<(stage: MediaReadyStage, uri: string) => void>;
 /** Internal recovery channel; URLs are matched in memory, never logged. */
 export declare const StreamRecovery: import("react").Context<(uri: string, positionMs: number, autoPlay: boolean) => void>;

package/dist/media-ui.d.ts

@@ -5,6 +5,7 @@ export interface VoiceBubbleProps {
     ink: string;
     accent: string;
     waveform?: number[];
+    showWaveform?: boolean;
     footer?: ReactNode;
     onOpen: () => void;
     onLongPress?: () => void;
@@ -21,20 +22,30 @@ export interface PlaybackProps {
     onRate?: () => void;
 }
 /** Same chat controls on web, iOS and Android. Audio engines supply state, not a different UI. */
-export declare function VoicePlayback({ ink, accent, waveform, footer, onLongPress, playing, loading, positionMs, durationMs, error, onToggle, onSeek }: PlaybackProps & {
+export declare function VoicePlayback({ ink, accent, waveform, showWaveform, footer, onLongPress, playing, loading, positionMs, durationMs, error, onToggle, onSeek }: PlaybackProps & {
     ink: string;
     accent: string;
     waveform?: number[];
+    showWaveform?: boolean;
     footer?: ReactNode;
     onLongPress?: () => void;
 }): React.JSX.Element;
-export declare function MediaPlaybackControls({ playing, loading, positionMs, durationMs, error, onToggle, onSeek }: PlaybackProps): React.JSX.Element;
-/** A full-size photo surface. The same tap-to-zoom, pinch and pan handling runs in the preview and native app. */
-export declare function ZoomablePhoto({ uri, label }: {
+export declare function MediaPlaybackControls({ playing, loading, positionMs, durationMs, error, onToggle, onSeek, onFullscreen, fullscreen }: PlaybackProps & {
+    onFullscreen?: () => void;
+    fullscreen?: boolean;
+}): React.JSX.Element;
+/** A full-size photo surface. The same tap-to-hide-controls, pinch and pan handling runs in the preview and native app. */
+export declare function ZoomablePhoto({ uri, label, onTap }: {
     uri: string;
     label?: string;
+    onTap?: () => void;
 }): React.JSX.Element;
-export declare function MediaViewer({ title, subtitle, kind, uri, fileName, byteSize, children, loading, error, onClose, onFileAction, reviewAction, onReview }: {
+export declare function MediaViewer({ title, subtitle, kind, uri, fileName, byteSize, children, loading, error, onClose, onFileAction, reviewAction, onReview, onDownload, onShare, onForward, onDelete, downloading }: {
+    onForward?: () => void;
+    onDelete?: () => void;
+    downloading?: boolean;
+    onDownload?: () => void;
+    onShare?: () => void;
     title: string;
     subtitle?: string;
     kind: 'image' | 'video' | 'document' | 'voice';

package/dist/media-ui.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useContext, useState } from 'react';
+import { useRef, useContext, useState, useEffect } from 'react';
 import { ActivityIndicator, Image, PanResponder, Platform, Pressable, Text, View } from 'react-native';
 import { MediaReadiness } from './media-readiness.js';
 import { MessageIcon, duration, fileSize } from './icons.js';
 /** Same chat controls on web, iOS and Android. Audio engines supply state, not a different UI. */
-export function VoicePlayback({ ink, accent, waveform, footer, onLongPress, playing = false, loading = false, positionMs = 0, durationMs = 0, error, onToggle, onSeek }) {
+export function VoicePlayback({ ink, accent, waveform, showWaveform = true, footer, onLongPress, playing = false, loading = false, positionMs = 0, durationMs = 0, error, onToggle, onSeek }) {
     const width = useRef(1), progress = durationMs ? Math.max(0, Math.min(1, positionMs / durationMs)) : 0;
-    return _jsxs(View, { style: { width: 252, maxWidth: '100%' }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 9 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: playing ? 'Pause voice message' : 'Play voice message', accessibilityState: { busy: loading }, disabled: loading, onPress: onToggle, onLongPress: onLongPress, style: { width: 44, height: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center' }, children: loading ? _jsx(ActivityIndicator, { size: "small", color: ink }) : _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: ink + 'aa', size: 24 }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Pressable, { accessibilityRole: "adjustable", accessibilityLabel: "Voice waveform", accessibilityValue: { min: 0, max: Math.ceil(durationMs / 1000), now: Math.floor(positionMs / 1000) }, accessibilityActions: [{ name: 'increment', label: 'Forward five seconds' }, { name: 'decrement', label: 'Back five seconds' }], onAccessibilityAction: e => onSeek?.(Math.max(0, Math.min(durationMs, positionMs + (e.nativeEvent.actionName === 'increment' ? 5000 : -5000)))), onLayout: e => { width.current = e.nativeEvent.layout.width; }, onPress: e => { const bounds = Platform.OS === "web" ? e.currentTarget.getBoundingClientRect() : null; const x = bounds ? e.nativeEvent.clientX - bounds.left : e.nativeEvent.locationX; const total = bounds?.width ?? width.current; if (total > 0 && Number.isFinite(x))
-                                    onSeek?.(Math.max(0, Math.min(1, x / total)) * durationMs); }, style: { minHeight: 36, flexDirection: 'row', alignItems: 'center', gap: 2 }, children: Array.from({ length: 36 }, (_, i) => { const sample = waveform?.[Math.floor(i * (waveform.length || 36) / 36)]; return _jsx(View, { pointerEvents: "none", style: { flex: 1, borderRadius: 2, backgroundColor: i / 36 < progress ? accent : ink, opacity: i / 36 < progress ? 1 : 0.34, height: 4 + (typeof sample === 'number' && Number.isFinite(sample) ? Math.min(1, Math.max(0, sample)) * 23 : 0) } }, i); }) }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 6 }, children: [_jsx(Text, { style: { color: ink, fontSize: 11, opacity: 0.7, fontVariant: ['tabular-nums'] }, children: duration(playing || positionMs > 0 ? Math.max(0, durationMs - positionMs) : durationMs) }), footer] })] })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink, fontSize: 12, marginTop: 6 }, children: error })] });
+    return _jsxs(View, { style: { width: 252, maxWidth: '100%' }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 9 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: playing ? 'Pause voice message' : 'Play voice message', accessibilityState: { busy: loading }, disabled: loading, onPress: onToggle, onLongPress: onLongPress, style: { width: 44, height: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center' }, children: loading ? _jsx(ActivityIndicator, { size: "small", color: ink }) : _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: ink + 'aa', size: 24 }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Pressable, { accessibilityRole: "adjustable", accessibilityLabel: showWaveform ? "Voice waveform" : "Voice position", accessibilityValue: { min: 0, max: Math.ceil(durationMs / 1000), now: Math.floor(positionMs / 1000) }, accessibilityActions: [{ name: 'increment', label: 'Forward five seconds' }, { name: 'decrement', label: 'Back five seconds' }], onAccessibilityAction: e => onSeek?.(Math.max(0, Math.min(durationMs, positionMs + (e.nativeEvent.actionName === 'increment' ? 5000 : -5000)))), onLayout: e => { width.current = e.nativeEvent.layout.width; }, onPress: e => { const bounds = Platform.OS === "web" ? e.currentTarget.getBoundingClientRect() : null; const x = bounds ? e.nativeEvent.clientX - bounds.left : e.nativeEvent.locationX; const total = bounds?.width ?? width.current; if (total > 0 && Number.isFinite(x))
+                                    onSeek?.(Math.max(0, Math.min(1, x / total)) * durationMs); }, style: { minHeight: 36, flexDirection: 'row', alignItems: 'center', gap: 2 }, children: showWaveform ? Array.from({ length: 36 }, (_, i) => { const sample = waveform?.[Math.floor(i * (waveform.length || 36) / 36)]; return _jsx(View, { pointerEvents: "none", style: { flex: 1, borderRadius: 2, backgroundColor: i / 36 < progress ? accent : ink, opacity: i / 36 < progress ? 1 : 0.34, height: 4 + (typeof sample === 'number' && Number.isFinite(sample) ? Math.min(1, Math.max(0, sample)) * 23 : 0) } }, i); }) : _jsx(View, { pointerEvents: "none", style: { flex: 1, height: 3, borderRadius: 2, backgroundColor: ink + '44' }, children: _jsx(View, { style: { height: 3, borderRadius: 2, backgroundColor: accent, width: `${progress * 100}%` } }) }) }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 6 }, children: [_jsx(Text, { style: { color: ink, fontSize: 11, opacity: 0.7, fontVariant: ['tabular-nums'] }, children: duration(playing || positionMs > 0 ? Math.max(0, durationMs - positionMs) : durationMs) }), footer] })] })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink, fontSize: 12, marginTop: 6 }, children: error })] });
 }
-export function MediaPlaybackControls({ playing = false, loading = false, positionMs = 0, durationMs = 0, error, onToggle, onSeek }) {
+export function MediaPlaybackControls({ playing = false, loading = false, positionMs = 0, durationMs = 0, error, onToggle, onSeek, onFullscreen, fullscreen = false }) {
     const width = useRef(1);
-    return _jsxs(View, { style: { paddingHorizontal: 18, paddingVertical: 10, gap: 6, backgroundColor: '#111316' }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: playing ? 'Pause video' : 'Play video', disabled: loading, onPress: onToggle, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: loading ? _jsx(ActivityIndicator, { color: "#fff" }) : _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: "#fff" }) }), _jsx(Text, { style: { color: '#ddd', fontSize: 12, fontVariant: ['tabular-nums'] }, children: duration(positionMs) }), _jsx(Pressable, { accessibilityRole: "adjustable", accessibilityLabel: "Video position", accessibilityValue: { min: 0, max: Math.ceil(durationMs / 1000), now: Math.floor(positionMs / 1000) }, accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }], onAccessibilityAction: e => onSeek?.(Math.max(0, Math.min(durationMs, positionMs + (e.nativeEvent.actionName === 'increment' ? 5000 : -5000)))), onLayout: e => { width.current = e.nativeEvent.layout.width; }, onPress: e => onSeek?.(Math.max(0, Math.min(1, e.nativeEvent.locationX / width.current)) * durationMs), style: { flex: 1, height: 44, justifyContent: 'center' }, children: _jsx(View, { style: { height: 3, borderRadius: 2, backgroundColor: '#ffffff44' }, children: _jsx(View, { style: { height: 3, borderRadius: 2, backgroundColor: '#fff', width: `${durationMs ? Math.min(100, positionMs / durationMs * 100) : 0}%` } }) }) }), _jsx(Text, { style: { color: '#bbb', fontSize: 12, fontVariant: ['tabular-nums'] }, children: duration(durationMs) })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#fff', fontSize: 13 }, children: error })] });
+    return _jsxs(View, { style: { paddingHorizontal: 18, paddingVertical: 10, gap: 6, backgroundColor: '#111316' }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: playing ? 'Pause video' : 'Play video', disabled: loading, onPress: onToggle, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: loading ? _jsx(ActivityIndicator, { color: "#fff" }) : _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: "#fff" }) }), _jsx(Text, { style: { color: '#ddd', fontSize: 12, fontVariant: ['tabular-nums'] }, children: duration(positionMs) }), _jsx(Pressable, { accessibilityRole: "adjustable", accessibilityLabel: "Video position", accessibilityValue: { min: 0, max: Math.ceil(durationMs / 1000), now: Math.floor(positionMs / 1000) }, accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }], onAccessibilityAction: e => onSeek?.(Math.max(0, Math.min(durationMs, positionMs + (e.nativeEvent.actionName === 'increment' ? 5000 : -5000)))), onLayout: e => { width.current = e.nativeEvent.layout.width; }, onPress: e => { const bounds = Platform.OS === "web" ? e.currentTarget.getBoundingClientRect() : null; const x = bounds ? e.nativeEvent.clientX - bounds.left : e.nativeEvent.locationX, total = bounds?.width ?? width.current; if (total > 0 && Number.isFinite(x))
+                            onSeek?.(Math.max(0, Math.min(1, x / total)) * durationMs); }, style: { flex: 1, height: 44, justifyContent: 'center' }, children: _jsx(View, { style: { height: 3, borderRadius: 2, backgroundColor: '#ffffff44' }, children: _jsx(View, { style: { height: 3, borderRadius: 2, backgroundColor: '#fff', width: `${durationMs ? Math.min(100, positionMs / durationMs * 100) : 0}%` } }) }) }), _jsx(Text, { style: { color: '#bbb', fontSize: 12, fontVariant: ['tabular-nums'] }, children: duration(durationMs) }), onFullscreen && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: fullscreen ? "Exit full screen" : "Full screen video", disabled: loading, onPress: onFullscreen, style: { width: 44, height: 44, alignItems: "center", justifyContent: "center" }, children: _jsx(MessageIcon, { name: fullscreen ? "close" : "open-in-new", color: "#fff", size: 22 }) })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#fff', fontSize: 13 }, children: error })] });
 }
-/** A full-size photo surface. The same tap-to-zoom, pinch and pan handling runs in the preview and native app. */
-export function ZoomablePhoto({ uri, label = 'Photo' }) {
+/** A full-size photo surface. The same tap-to-hide-controls, pinch and pan handling runs in the preview and native app. */
+export function ZoomablePhoto({ uri, label = 'Photo', onTap }) {
     const mediaReady = useContext(MediaReadiness);
     const [zoom, setZoom] = useState(1), [offset, setOffset] = useState({ x: 0, y: 0 }), [error, setError] = useState(false);
     const latest = useRef({ zoom, offset, width: 1, height: 1 });
@@ -34,9 +35,12 @@ export function ZoomablePhoto({ uri, label = 'Photo' }) {
         onPanResponderRelease: () => { if (latest.current.zoom <= 1)
             setOffset({ x: 0, y: 0 }); },
     })).current;
+    useEffect(() => { setZoom(1); setOffset({ x: 0, y: 0 }); setError(false); }, [uri]);
     const toggle = () => { setZoom(zoom === 1 ? 2 : 1); setOffset({ x: 0, y: 0 }); };
-    return _jsxs(View, { style: { flex: 1, minHeight: 0, overflow: 'hidden' }, onLayout: e => { latest.current = { ...latest.current, width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height }; }, children: [_jsx(Pressable, { ...pan.panHandlers, accessibilityRole: "button", accessibilityLabel: zoom === 1 ? 'Zoom photo' : 'Fit photo', onPress: toggle, style: { flex: 1, overflow: 'hidden' }, children: _jsx(Image, { accessibilityLabel: label, source: { uri }, resizeMode: "contain", onLoad: () => mediaReady('image-loaded', uri), onError: () => setError(true), style: { width: '100%', height: '100%', transform: [{ translateX: offset.x }, { translateY: offset.y }, { scale: zoom }] } }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: zoom === 1 ? 'Zoom in' : 'Zoom out', onPress: toggle, style: { position: 'absolute', right: 16, bottom: 16, width: 44, height: 44, borderRadius: 22, backgroundColor: '#222a', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "zoom", color: "#fff" }) }), error && _jsx(Text, { accessibilityRole: "alert", style: { position: 'absolute', top: '50%', alignSelf: 'center', color: '#fff' }, children: "This photo could not be opened." })] });
+    return _jsxs(View, { style: { flex: 1, minHeight: 0, overflow: 'hidden' }, onLayout: e => { latest.current = { ...latest.current, width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height }; }, children: [_jsx(Pressable, { ...pan.panHandlers, accessibilityRole: "button", accessibilityLabel: "Toggle photo controls", onPress: onTap, style: { flex: 1, overflow: 'hidden' }, children: _jsx(Image, { accessibilityLabel: label, source: { uri }, resizeMode: "contain", onLoad: () => mediaReady('image-loaded', uri), onError: () => setError(true), style: { width: '100%', height: '100%', transform: [{ translateX: offset.x }, { translateY: offset.y }, { scale: zoom }] } }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: zoom === 1 ? 'Zoom in' : 'Zoom out', onPress: toggle, style: { position: 'absolute', right: 16, bottom: 16, width: 44, height: 44, borderRadius: 22, backgroundColor: '#222a', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "zoom", color: "#fff" }) }), error && _jsx(Text, { accessibilityRole: "alert", style: { position: 'absolute', top: '50%', alignSelf: 'center', color: '#fff' }, children: "This photo could not be opened." })] });
 }
-export function MediaViewer({ title, subtitle, kind, uri, fileName, byteSize, children, loading, error, onClose, onFileAction, reviewAction, onReview }) {
-    return _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1, minHeight: 0, backgroundColor: '#0c0e10' }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 12, flexShrink: 0, paddingHorizontal: 8, paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#ffffff12' }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close media", onPress: onClose, hitSlop: 8, style: { width: 44, height: 44, flexShrink: 0, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "back", color: "#fff" }) }), _jsxs(View, { style: { flex: 1, paddingRight: 12, gap: 3 }, children: [_jsx(Text, { numberOfLines: 1, style: { color: '#fff', fontSize: 16, fontWeight: '600' }, children: title }), !!subtitle && _jsx(Text, { numberOfLines: 1, style: { color: '#a4abb3', fontSize: 12 }, children: subtitle })] })] }), loading ? _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 }, children: [_jsx(ActivityIndicator, { color: "#fff" }), _jsx(Text, { style: { color: '#c1c7ce' }, children: "Opening\u2026" })] }) : kind === 'image' && uri ? _jsx(ZoomablePhoto, { uri: uri, label: fileName }) : kind === 'document' ? _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32, gap: 20 }, children: [_jsx(View, { style: { width: 88, height: 106, borderRadius: 16, backgroundColor: '#ffffff12', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "document", color: "#fff", size: 40 }) }), _jsx(Text, { style: { color: '#fff', fontSize: 19, fontWeight: '600', textAlign: 'center' }, children: fileName }), _jsxs(Text, { style: { color: '#9ba3ad', fontSize: 13 }, children: [fileName?.split('.').pop()?.toUpperCase(), " \u00B7 ", fileSize(byteSize)] }), onFileAction && _jsx(Pressable, { accessibilityRole: "button", onPress: onFileAction, style: { borderRadius: 24, paddingHorizontal: 28, paddingVertical: 14, backgroundColor: '#fff' }, children: _jsx(Text, { style: { color: '#15191e', fontWeight: '600' }, children: "Open file" }) })] }) : children, !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#fff', padding: 16 }, children: error }), reviewAction && onReview && _jsx(View, { style: { padding: 16, borderTopWidth: 1, borderTopColor: '#ffffff15' }, children: _jsx(Pressable, { accessibilityRole: "button", onPress: onReview, style: { minHeight: 48, borderRadius: 24, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontWeight: '600', color: '#121619' }, children: reviewAction }) }) })] });
+export function MediaViewer({ title, subtitle, kind, uri, fileName, byteSize, children, loading, error, onClose, onFileAction, reviewAction, onReview, onDownload, onShare, onForward, onDelete, downloading = false }) {
+    const [controls, setControls] = useState(true);
+    useEffect(() => setControls(true), [uri]);
+    return _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1, minHeight: 0, backgroundColor: '#0c0e10' }, children: [controls && _jsxs(View, { testID: "media-action-toolbar", style: { position: 'absolute', top: 8, left: 12, right: 12, zIndex: 3, minHeight: 52, borderRadius: 26, borderWidth: 1, borderColor: '#ffffff1f', backgroundColor: '#121212eb', flexDirection: 'row', alignItems: 'center', paddingLeft: 8, paddingRight: 4, gap: 2 }, children: [[[onDownload, 'Download', 'download', downloading, false], [onDelete, 'Delete', 'trash', false, true], [onForward, 'Forward', 'forward', false, false], [onShare, 'Share', 'share', false, false]].filter(([action]) => !!action).map(([action, label, icon, busy, destructive]) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${label} media`, accessibilityState: { busy }, disabled: busy, onPress: action, style: { flex: 1, minWidth: 44, minHeight: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center', gap: 1, paddingHorizontal: 2 }, children: [busy ? _jsx(ActivityIndicator, { size: "small", color: "#e8843a" }) : _jsx(MessageIcon, { name: icon, size: 20, color: destructive ? '#f28b82' : '#fff' }), _jsx(Text, { numberOfLines: 1, style: { color: destructive ? '#f28b82' : '#fff', fontSize: 10, fontWeight: '800' }, children: label })] }, label)), _jsx(View, { style: { flex: !onDownload && !onDelete && !onForward && !onShare ? 1 : 0, minWidth: 0 }, children: !onDownload && !onDelete && !onForward && !onShare && _jsx(Text, { numberOfLines: 1, style: { color: '#fff', fontSize: 14, paddingLeft: 8 }, children: title }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close media", onPress: onClose, style: { width: 44, height: 44, borderRadius: 22, backgroundColor: '#ffffff14', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", size: 24, color: "#fff" }) })] }), loading ? _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 }, children: [_jsx(ActivityIndicator, { color: "#fff" }), _jsx(Text, { style: { color: '#c1c7ce' }, children: "Opening\u2026" })] }) : kind === 'image' && uri ? _jsx(ZoomablePhoto, { uri: uri, label: fileName, onTap: () => setControls(value => !value) }) : kind === 'document' ? _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32, gap: 20 }, children: [_jsx(View, { style: { width: 88, height: 106, borderRadius: 16, backgroundColor: '#ffffff12', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "document", color: "#fff", size: 40 }) }), _jsx(Text, { style: { color: '#fff', fontSize: 19, fontWeight: '600', textAlign: 'center' }, children: fileName }), _jsxs(Text, { style: { color: '#9ba3ad', fontSize: 13 }, children: [fileName?.split('.').pop()?.toUpperCase(), " \u00B7 ", fileSize(byteSize)] }), onFileAction && _jsx(Pressable, { accessibilityRole: "button", onPress: onFileAction, style: { borderRadius: 24, paddingHorizontal: 28, paddingVertical: 14, backgroundColor: '#fff' }, children: _jsx(Text, { style: { color: '#15191e', fontWeight: '600' }, children: "Open file" }) })] }) : children, !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#fff', padding: 16 }, children: error }), reviewAction && onReview && _jsx(View, { style: { padding: 16, borderTopWidth: 1, borderTopColor: '#ffffff15' }, children: _jsx(Pressable, { accessibilityRole: "button", onPress: onReview, style: { minHeight: 48, borderRadius: 24, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontWeight: '600', color: '#121619' }, children: reviewAction }) }) })] });
 }

package/dist/message-links.d.ts

@@ -0,0 +1,5 @@
+/** Only explicit web links become actions. Never interpret arbitrary URI schemes. */
+export declare function messageLinks(text: string): Array<{
+    text: string;
+    url?: string;
+}>;

package/dist/message-links.js

@@ -0,0 +1,30 @@
+/** Only explicit web links become actions. Never interpret arbitrary URI schemes. */
+export function messageLinks(text) {
+    const parts = [];
+    let offset = 0;
+    for (const match of text.matchAll(/(?:https?:\/\/|www\.)[^\s<>]+/gi)) {
+        const start = match.index, raw = match[0];
+        let label = raw.replace(/[.,!?;:]+$/, '');
+        while (/[)\]}]$/.test(label)) {
+            const close = label.at(-1), open = { ')': '(', ']': '[', '}': '{' }[close];
+            if (label.split(close).length <= label.split(open).length)
+                break;
+            label = label.slice(0, -1);
+        }
+        if (!label)
+            continue;
+        try {
+            const url = new URL(/^www\./i.test(label) ? 'https://' + label : label);
+            if (!['https:', 'http:'].includes(url.protocol) || url.username || url.password)
+                continue;
+            if (start > offset)
+                parts.push({ text: text.slice(offset, start) });
+            parts.push({ text: label, url: url.href });
+            offset = start + label.length;
+        }
+        catch { }
+    }
+    if (offset < text.length)
+        parts.push({ text: text.slice(offset) });
+    return parts.length ? parts : [{ text }];
+}

package/dist/message-order.d.ts

@@ -0,0 +1,4 @@
+import type { MessagingMessage } from '@robono/messaging';
+/** Upload completion order must not reorder the attachments selected together.
+ * Transport state remains in server sequence order for reconnect cursors. */
+export declare function orderChatMessages<T extends MessagingMessage>(messages: readonly T[]): T[];

package/dist/message-order.js

@@ -0,0 +1,17 @@
+/** Upload completion order must not reorder the attachments selected together.
+ * Transport state remains in server sequence order for reconnect cursors. */
+export function orderChatMessages(messages) {
+    const first = new Map();
+    const key = (m) => m.attachmentBatch ? JSON.stringify([m.senderId, m.attachmentBatch.id]) : null;
+    for (let i = 0; i < messages.length; i++) {
+        const k = key(messages[i]);
+        if (k && !first.has(k))
+            first.set(k, i);
+    }
+    return messages.map((message, index) => ({ message, index })).sort((a, b) => {
+        const ak = key(a.message), bk = key(b.message);
+        if (ak && ak === bk)
+            return a.message.attachmentBatch.index - b.message.attachmentBatch.index || a.index - b.index;
+        return (ak ? first.get(ak) : a.index) - (bk ? first.get(bk) : b.index);
+    }).map(item => item.message);
+}

package/dist/native-outbox.d.ts

@@ -0,0 +1,49 @@
+import type { MessageContent, MessageMedia, MessagingOutbox, SavedOutgoingMessage } from '@robono/messaging';
+import type { LocalMessagingMedia } from './media-controller.js';
+export interface NativeDraftFiles {
+    read(scope: string, conversation: string): Promise<NativeDraftState>;
+    write(scope: string, conversation: string, state: NativeDraftState): Promise<void>;
+    copy(scope: string, conversation: string, id: string, source: LocalMessagingMedia): Promise<string>;
+    file(scope: string, conversation: string, id: string): Promise<string | null>;
+    remove(scope: string, conversation: string, id: string): Promise<void>;
+    clear(scope: string, conversation?: string): Promise<void>;
+}
+export interface NativeDraftState {
+    draft: string;
+    messages: Array<SavedOutgoingMessage & {
+        fileId?: string;
+    }>;
+    files: Record<string, {
+        kind: MessageContent['kind'];
+        media: MessageMedia;
+    }>;
+}
+export declare const emptyNativeDraft: () => NativeDraftState;
+/** Durable outgoing content only, isolated by endpoint, namespace and signed-in user. */
+export declare class NativeMessagingOutbox implements MessagingOutbox {
+    private files;
+    private generation;
+    private scope;
+    constructor(endpoint: string, userId: string, files: NativeDraftFiles, namespace?: string);
+    private serial;
+    load(cid: string): Promise<{
+        draft: string;
+        messages: {
+            clientMessageId: string;
+            createdAt: string;
+            content: MessageContent;
+            needsPreparation?: boolean;
+        }[];
+        attachments: {
+            kind: "text" | "voice" | "image" | "video" | "document" | "poll";
+            media: MessageMedia;
+        }[];
+    }>;
+    put(cid: string, message: SavedOutgoingMessage): Promise<void>;
+    remove(cid: string, id: string): Promise<void>;
+    draft(cid: string, text: string): Promise<void>;
+    clear(cid?: string): Promise<void>;
+    saveFile(cid: string, media: MessageMedia, file: LocalMessagingMedia, kind: MessageContent['kind']): Promise<void>;
+    file(cid: string, id: string): Promise<LocalMessagingMedia | undefined>;
+    releaseFile(cid: string, id: string): Promise<void>;
+}

package/dist/native-outbox.js

@@ -0,0 +1,51 @@
+export const emptyNativeDraft = () => ({ draft: '', messages: [], files: {} });
+const queues = new Map();
+const epochs = new Map();
+/** Durable outgoing content only, isolated by endpoint, namespace and signed-in user. */
+export class NativeMessagingOutbox {
+    files;
+    generation = 0;
+    scope;
+    constructor(endpoint, userId, files, namespace = 'default') {
+        this.files = files;
+        this.scope = JSON.stringify([endpoint, namespace, userId]);
+    }
+    serial(work) { const task = (queues.get(this.scope) ?? Promise.resolve()).catch(() => { }).then(work); queues.set(this.scope, task); void task.finally(() => { if (queues.get(this.scope) === task)
+        queues.delete(this.scope); }).catch(() => { }); return task; }
+    load(cid) { return this.serial(async () => { const saved = await this.files.read(this.scope, cid), used = new Set(saved.messages.map(m => m.fileId)); return { draft: saved.draft, messages: saved.messages.map(({ fileId, ...message }) => message), attachments: Object.entries(saved.files).filter(([id]) => !used.has(id)).map(([, f]) => ({ kind: f.kind, media: f.media })) }; }); }
+    put(cid, message) { return this.serial(async () => { const state = await this.files.read(this.scope, cid), previous = state.messages.find(m => m.clientMessageId === message.clientMessageId); state.messages = state.messages.filter(m => m.clientMessageId !== message.clientMessageId); state.messages.push({ ...message, fileId: message.needsPreparation ? message.content.media?.assetId : previous?.fileId }); await this.files.write(this.scope, cid, state); }); }
+    remove(cid, id) { return this.serial(async () => { const state = await this.files.read(this.scope, cid), fileId = state.messages.find(m => m.clientMessageId === id)?.fileId; state.messages = state.messages.filter(m => m.clientMessageId !== id); if (fileId && !state.messages.some(m => m.fileId === fileId)) {
+        delete state.files[fileId];
+        await this.files.write(this.scope, cid, state);
+        await this.files.remove(this.scope, cid, fileId);
+    }
+    else
+        await this.files.write(this.scope, cid, state); }); }
+    draft(cid, text) { return this.serial(async () => { const state = await this.files.read(this.scope, cid); state.draft = text.slice(0, 10000); await this.files.write(this.scope, cid, state); }); }
+    clear(cid) { this.generation++; epochs.set(this.scope, (epochs.get(this.scope) ?? 0) + 1); return this.serial(() => this.files.clear(this.scope, cid)); }
+    saveFile(cid, media, file, kind) {
+        const generation = this.generation, epoch = epochs.get(this.scope) ?? 0;
+        const current = () => generation === this.generation && epoch === (epochs.get(this.scope) ?? 0);
+        return this.serial(async () => {
+            if (!current())
+                throw Error('The chat closed before the attachment was saved.');
+            await this.files.copy(this.scope, cid, media.assetId, file);
+            try {
+                if (!current())
+                    throw Error('The chat closed before the attachment was saved.');
+                const state = await this.files.read(this.scope, cid);
+                state.files[media.assetId] = { kind, media };
+                await this.files.write(this.scope, cid, state);
+            }
+            catch (error) {
+                await this.files.remove(this.scope, cid, media.assetId).catch(() => { });
+                throw error;
+            }
+        });
+    }
+    file(cid, id) { return this.serial(async () => { const saved = (await this.files.read(this.scope, cid)).files[id]; if (!saved)
+        return undefined; const uri = await this.files.file(this.scope, cid, id); if (!uri)
+        throw Error('This saved attachment is missing. Remove it and choose it again.'); return { ...saved.media, uri }; }); }
+    releaseFile(cid, id) { return this.serial(async () => { const state = await this.files.read(this.scope, cid); if (state.messages.some(m => m.fileId === id))
+        return; delete state.files[id]; await this.files.write(this.scope, cid, state); await this.files.remove(this.scope, cid, id); }); }
+}

package/dist/pollVoteQueue.d.ts

@@ -0,0 +1,3 @@
+/** Show the latest selection immediately, but serialize complete selections so
+ * an older, slower request can never overwrite a newer vote on the server. */
+export declare function createPollVoteQueue(save: (choices: number[]) => Promise<void>, pending: (choices: number[] | null) => void, failed: () => void): (choices: number[]) => Promise<void>;

package/dist/pollVoteQueue.js

@@ -0,0 +1,29 @@
+/** Show the latest selection immediately, but serialize complete selections so
+ * an older, slower request can never overwrite a newer vote on the server. */
+export function createPollVoteQueue(save, pending, failed) {
+    let running = false, next;
+    return async (choices) => {
+        next = [...choices];
+        pending(next);
+        if (running)
+            return;
+        running = true;
+        try {
+            while (next) {
+                const current = next;
+                next = undefined;
+                try {
+                    await save(current);
+                }
+                catch {
+                    if (!next)
+                        failed();
+                }
+            }
+        }
+        finally {
+            running = false;
+            pending(null);
+        }
+    };
+}

package/dist/polls.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import { type MessagingAppearance, type MessagingMessage, type MessagePoll } from '@robono/messaging';
 /** Optional reusable poll content. Votes are submitted as a complete selection, not a toggle request. */
-export declare function PollMessage({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, background, foreground }: {
+export declare function PollMessage({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, background, foreground, renderDetails, detailsOpen, onDetailsOpenChange }: {
+    detailsOpen?: boolean;
+    onDetailsOpenChange?: (open: boolean) => void;
+    renderDetails?: (content: React.ReactNode, onClose: () => void) => React.ReactNode;
     message: MessagingMessage;
     userId: string;
     ink: string;
@@ -13,7 +16,8 @@ export declare function PollMessage({ message, userId, ink, accent, enabled, onV
     background?: string;
     foreground?: string;
 }): React.JSX.Element | null;
-export declare function PollComposer({ appearance, onSend, onCancel, retrySafe }: {
+export declare function PollComposer({ appearance, onSend, onCancel, retrySafe, yesNo }: {
+    yesNo?: boolean;
     retrySafe?: boolean;
     appearance: MessagingAppearance;
     onSend: (poll: MessagePoll) => Promise<void>;