@robono/messaging-react-native 0.1.0 → 0.3.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>;
@@ -28,6 +29,8 @@ export interface MessagingMediaStorage {
 }
 export interface MessagingMediaDevice {
     pick(kind: Exclude<MediaKind, 'voice'>, settings: MessagingSettings, signal: AbortSignal, source?: "camera" | "call-video"): Promise<LocalMessagingMedia | null>;
+    /** Ordered local selections. No upload or send occurs in the picker. */
+    pickMany?(kind: Exclude<MediaKind, 'voice'>, settings: MessagingSettings, signal: AbortSignal, maximum: number): Promise<LocalMessagingMedia[]>;
     startRecording(maxDurationMs: number, signal: AbortSignal): Promise<void>;
     recordingStatus(): {
         durationMs: number;
@@ -69,24 +72,42 @@ 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;
     private update;
     private isCurrent;
     pick(kind: MediaKind, source?: "camera" | "call-video", selectionIntent?: "preview" | "send" | "attach"): Promise<MessageMedia | null>;
+    pickMany(kind: Exclude<MediaKind, 'voice'>, maximum: number): Promise<MessageMedia[]>;
     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();
                 }
             }
@@ -97,6 +168,45 @@ export class MessagingMediaController {
         })();
         return result;
     }
+    async pickMany(kind, maximum) {
+        if (!this.options.stageLocal || !this.options.device.pickMany) {
+            const one = await this.pick(kind, undefined, 'attach');
+            return one ? [one] : [];
+        }
+        const limit = Math.max(1, Math.min(10, Math.floor(maximum) || 1));
+        const intent = ++this.intent;
+        await this.closeCurrent();
+        if (intent !== this.intent)
+            return [];
+        if (this.disposed)
+            throw Error('Messaging media is closed.');
+        const settings = this.options.getSettings(), conversationId = this.options.getConversationId();
+        if (!settings.enabled || !settings.features[kind])
+            throw Error('This attachment type is unavailable.');
+        const g = ++this.generation, abort = this.abort = new AbortController();
+        let files = [];
+        this.update({ phase: 'choosing', kind, file: null, error: null, progress: 0, retryUpload: false });
+        try {
+            files = await this.options.device.pickMany(kind, settings, abort.signal, limit);
+            if (!this.isCurrent(g) || conversationId !== this.options.getConversationId())
+                return [];
+            if (files.length > limit)
+                throw Error(`Choose up to ${limit} attachments.`);
+            const media = files.map(file => ({ assetId: this.options.createId(), mimeType: file.mimeType, fileName: file.fileName, byteSize: file.byteSize, ...(file.durationMs === undefined ? {} : { durationMs: file.durationMs }) }));
+            // Validate the whole selection before accepting any part of it.
+            media.forEach(item => validateMessageMedia(kind, item, this.options.getSettings()));
+            media.forEach((item, index) => this.prepared.set(item.assetId, files[index]));
+            files = [];
+            return media;
+        }
+        finally {
+            await Promise.all(files.map(file => this.options.device.remove(file).catch(() => { })));
+            if (this.generation === g) {
+                this.abort = null;
+                this.update({ phase: 'idle', file: null, error: null });
+            }
+        }
+    }
     check(file) {
         validateMessageMedia(this.state.kind, { ...file, assetId: 'pending-upload' }, this.options.getSettings());
         if (this.options.getConversationId() !== this.conversationId)
@@ -148,6 +258,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 +297,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 +405,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

@@ -1,10 +1,15 @@
 import React, { type ReactNode } from 'react';
 import type { MessagingMessage } from '@robono/messaging';
 export interface VoiceBubbleProps {
+    mine?: boolean;
+    heard?: boolean;
+    onPlayed?: () => void;
+    background?: string;
     message: MessagingMessage;
     ink: string;
     accent: string;
     waveform?: number[];
+    showWaveform?: boolean;
     footer?: ReactNode;
     onOpen: () => void;
     onLongPress?: () => void;
@@ -21,20 +26,37 @@ 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, mine, heard, onPlayed, background, playing, loading, positionMs, durationMs, error, onToggle, onSeek }: PlaybackProps & {
     ink: string;
     accent: string;
     waveform?: number[];
+    showWaveform?: boolean;
     footer?: ReactNode;
     onLongPress?: () => void;
+    mine?: boolean;
+    heard?: boolean;
+    onPlayed?: () => void;
+    background?: string;
 }): 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, expanded }: {
     uri: string;
     label?: string;
+    onTap?: () => void;
+    expanded?: boolean;
 }): 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, expanded, onExpandedChange }: {
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    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,42 +1,108 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useContext, useState } from 'react';
+import { messengerVoiceWaveform } from './voice-waveform.js';
+import { createPhotoGesture } from './photo-gesture.js';
+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 }) {
-    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 })] });
+export function VoicePlayback({ ink, accent, waveform, showWaveform = true, footer, onLongPress, mine = false, heard = false, onPlayed, background, playing = false, loading = false, positionMs = 0, durationMs = 0, error, onToggle, onSeek }) {
+    const width = useRef(1), held = useRef(false), [played, setPlayed] = useState(false), progress = durationMs ? Math.max(0, Math.min(1, positionMs / durationMs)) : 0;
+    useEffect(() => { if (playing && positionMs > 0) {
+        setPlayed(true);
+        onPlayed?.();
+    } }, [playing, positionMs, onPlayed]);
+    const bars = showWaveform ? messengerVoiceWaveform(waveform, durationMs) : null, fill = mine ? ink : accent;
+    const hold = () => { held.current = true; onLongPress?.(); };
+    return _jsxs(View, { testID: "voice-message-player", style: { width: 220, maxWidth: '100%', minHeight: 44, borderRadius: 24, borderWidth: 1, borderColor: mine ? '#ffffff24' : '#2A2A2A', backgroundColor: background ?? (mine ? '#1F5F7A' : '#1D1D1D'), paddingLeft: 5, paddingRight: 8, paddingVertical: 3 }, children: [_jsxs(View, { style: { flexDirection: 'row', direction: 'ltr', alignItems: 'center', gap: 8 }, children: [_jsx(Pressable, { testID: "voice-play-control", accessibilityRole: "button", accessibilityLabel: playing ? 'Pause voice message' : 'Play voice message', accessibilityState: { busy: loading }, disabled: loading, hitSlop: 6, delayLongPress: 360, onPressIn: () => { held.current = false; }, onPress: () => { if (!held.current)
+                            onToggle(); }, onLongPress: hold, style: { width: 36, height: 36, borderRadius: 18, paddingLeft: playing ? 0 : 2, backgroundColor: mine ? '#ffffff29' : heard || played ? accent : '#2e9d63', alignItems: 'center', justifyContent: 'center' }, children: loading ? _jsx(ActivityIndicator, { size: "small", color: ink }) : _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: ink, size: 20 }) }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 7 }, children: [_jsx(Pressable, { onLongPress: hold, 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; }, onPressIn: () => { held.current = false; }, onPress: e => { if (held.current)
+                                    return; 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: { height: bars ? 24 : 9, transform: [{ translateY: 4 }], flexDirection: 'row', alignItems: 'center', gap: 1 }, children: bars ? bars.map((sample, i) => _jsx(View, { pointerEvents: "none", style: { flex: 1, flexBasis: 0, borderRadius: 2, overflow: 'hidden', backgroundColor: ink + (mine ? '33' : '38'), height: 2 + sample * 18 }, children: _jsx(View, { style: { height: '100%', backgroundColor: fill, width: `${Math.max(0, Math.min(1, progress * bars.length - i)) * 100}%` } }) }, i)) : _jsx(View, { pointerEvents: "none", style: { flex: 1, height: 9, borderRadius: 5, overflow: 'hidden', backgroundColor: ink + '33' }, children: _jsx(View, { style: { height: 9, borderRadius: 5, backgroundColor: fill, width: `${progress * 100}%` } }) }) }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 4, paddingRight: footer ? 6 : 0 }, children: [_jsx(Text, { testID: "voice-duration", style: { color: mine ? ink : '#A3A3A3', fontSize: 11, fontWeight: '800', fontVariant: ['tabular-nums'] }, children: duration(playing || positionMs > 0 ? Math.max(0, durationMs - positionMs) : durationMs) }), footer && _jsx(View, { testID: "voice-message-actions", style: { flexShrink: 1, maxWidth: 112, alignItems: 'flex-end' }, children: 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, expanded = false }) {
     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 });
-    latest.current = { ...latest.current, zoom, offset };
-    const start = useRef({ distance: 0, zoom: 1, x: 0, y: 0 });
+    const [transform, setTransform] = useState({ zoom: 1, x: 0, y: 0 }), [error, setError] = useState(false);
+    const [viewport, setViewport] = useState({ width: 1, height: 1 }), [imageSize, setImageSize] = useState({ width: 1, height: 1 });
+    const rotated = expanded && imageSize.width > imageSize.height && viewport.height > viewport.width;
+    const rotation = useRef(rotated);
+    rotation.current = rotated;
+    const photoPoints = (points) => rotation.current ? points.map(p => ({ x: p.y, y: -p.x })) : points;
+    const stageWidth = rotated ? viewport.height : viewport.width, stageHeight = rotated ? viewport.width : viewport.height;
+    const gesture = useRef(null);
+    if (!gesture.current)
+        gesture.current = createPhotoGesture(setTransform);
+    const controller = gesture.current, tap = useRef(onTap);
+    tap.current = onTap;
+    const points = (e) => photoPoints(Array.from(e.nativeEvent.touches ?? [], (p) => ({ x: p.pageX, y: p.pageY })));
     const pan = useRef(PanResponder.create({
-        onStartShouldSetPanResponder: e => e.nativeEvent.touches.length > 1,
-        onMoveShouldSetPanResponder: (e, g) => e.nativeEvent.touches.length > 1 || (latest.current.zoom > 1 && (Math.abs(g.dx) > 5 || Math.abs(g.dy) > 5)),
-        onPanResponderGrant: e => { const t = e.nativeEvent.touches; start.current = { distance: t.length > 1 ? Math.hypot(t[0].pageX - t[1].pageX, t[0].pageY - t[1].pageY) : 0, zoom: latest.current.zoom, x: latest.current.offset.x, y: latest.current.offset.y }; },
-        onPanResponderMove: (e, g) => { const t = e.nativeEvent.touches, s = latest.current; if (t.length > 1 && start.current.distance) {
-            setZoom(Math.max(1, Math.min(4, start.current.zoom * Math.hypot(t[0].pageX - t[1].pageX, t[0].pageY - t[1].pageY) / start.current.distance)));
-        }
-        else {
-            const x = s.width * (s.zoom - 1) / 2, y = s.height * (s.zoom - 1) / 2;
-            setOffset({ x: Math.max(-x, Math.min(x, start.current.x + g.dx)), y: Math.max(-y, Math.min(y, start.current.y + g.dy)) });
-        } },
-        onPanResponderRelease: () => { if (latest.current.zoom <= 1)
-            setOffset({ x: 0, y: 0 }); },
+        // Own the photo surface from the first finger. A Pressable must not steal the pinch.
+        onStartShouldSetPanResponder: () => true, onStartShouldSetPanResponderCapture: () => true,
+        onMoveShouldSetPanResponder: () => true, onMoveShouldSetPanResponderCapture: () => true,
+        onPanResponderTerminationRequest: () => false, onShouldBlockNativeResponder: () => true,
+        onPanResponderGrant: e => controller.begin(points(e)),
+        onPanResponderStart: e => { const current = points(e); if (current.length > 1)
+            controller.begin(current); },
+        onPanResponderMove: e => controller.move(points(e)),
+        onPanResponderEnd: e => { const remaining = points(e); if (remaining.length)
+            controller.end(remaining); },
+        onPanResponderRelease: e => { if (controller.end(points(e)))
+            tap.current?.(); },
+        onPanResponderTerminate: () => { controller.end([], true); },
     })).current;
-    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." })] });
+    const webRef = useRef(null);
+    useEffect(() => {
+        const element = webRef.current;
+        if (Platform.OS !== 'web' || !element)
+            return;
+        const active = new Map();
+        const down = (e) => { if (e.button !== 0)
+            return; e.preventDefault(); active.set(e.pointerId, { x: e.clientX, y: e.clientY }); element.setPointerCapture(e.pointerId); controller.begin(photoPoints([...active.values()])); };
+        const move = (e) => { if (!active.has(e.pointerId))
+            return; e.preventDefault(); active.set(e.pointerId, { x: e.clientX, y: e.clientY }); controller.move(photoPoints([...active.values()])); };
+        const end = (e) => { if (!active.delete(e.pointerId))
+            return; e.preventDefault(); if (controller.end(photoPoints([...active.values()]), e.type !== 'pointerup'))
+            tap.current?.(); if (element.hasPointerCapture(e.pointerId))
+            element.releasePointerCapture(e.pointerId); };
+        const wheel = (e) => { if (!e.ctrlKey)
+            return; e.preventDefault(); controller.zoom(controller.value.zoom * Math.exp(-e.deltaY * .01)); };
+        const key = (e) => { if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            tap.current?.();
+        }
+        else if (e.key === '+' || e.key === '=' || e.key === '-') {
+            e.preventDefault();
+            controller.zoom(controller.value.zoom * (e.key === '-' ? .8 : 1.25));
+        } };
+        const prevent = (e) => e.preventDefault();
+        element.addEventListener('pointerdown', down);
+        element.addEventListener('pointermove', move);
+        element.addEventListener('pointerup', end);
+        element.addEventListener('pointercancel', end);
+        element.addEventListener('lostpointercapture', end);
+        element.addEventListener('wheel', wheel, { passive: false });
+        element.addEventListener('keydown', key);
+        element.addEventListener('dragstart', prevent);
+        return () => { active.clear(); controller.end([], true); element.removeEventListener('pointerdown', down); element.removeEventListener('pointermove', move); element.removeEventListener('pointerup', end); element.removeEventListener('pointercancel', end); element.removeEventListener('lostpointercapture', end); element.removeEventListener('wheel', wheel); element.removeEventListener('keydown', key); element.removeEventListener('dragstart', prevent); };
+    }, [controller, uri]);
+    useEffect(() => { let active = true; controller.reset(); setError(false); Image.getSize(uri, (width, height) => { if (active) {
+        controller.image(width, height);
+        setImageSize({ width, height });
+    } }, () => { }); return () => { active = false; }; }, [uri, controller]);
+    useEffect(() => { controller.reset(); }, [expanded, controller]);
+    useEffect(() => { controller.layout(stageWidth, stageHeight); }, [controller, stageWidth, stageHeight]);
+    return _jsxs(View, { style: { flex: 1, minHeight: 0, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }, onLayout: e => setViewport(e.nativeEvent.layout), children: [_jsx(View, { testID: "photo-image-stage", style: { width: stageWidth, height: stageHeight, transform: rotated ? [{ rotate: '90deg' }] : [] }, children: _jsx(View, { ref: webRef, ...(Platform.OS === 'web' ? {} : pan.panHandlers), testID: "photo-gesture-surface", accessible: true, accessibilityRole: "button", accessibilityLabel: "Toggle photo controls", onAccessibilityTap: () => tap.current?.(), ...(Platform.OS === 'web' ? { tabIndex: 0 } : {}), style: { flex: 1, overflow: 'hidden', ...(Platform.OS === 'web' ? { touchAction: 'none', userSelect: 'none' } : {}) }, children: _jsx(Image, { testID: "photo-zoom-image", accessibilityLabel: label, source: { uri }, resizeMode: "contain", onLoad: () => mediaReady('image-loaded', uri), onError: () => setError(true), style: { width: '100%', height: '100%', transform: [{ translateX: transform.x }, { translateY: transform.y }, { scale: transform.zoom }] } }) }) }), 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, expanded, onExpandedChange }) {
+    const [localExpanded, setLocalExpanded] = useState(false);
+    const photoExpanded = kind === 'image' && (expanded ?? localExpanded), controls = !photoExpanded;
+    const setExpanded = (value) => { setLocalExpanded(value); onExpandedChange?.(value); };
+    useEffect(() => { setLocalExpanded(false); }, [uri]);
+    const visual = kind === 'image' || kind === 'video';
+    return _jsxs(View, { testID: "messenger-media-viewer", accessibilityViewIsModal: true, style: { flex: 1, minHeight: 0, backgroundColor: controls ? 'rgba(0,0,0,0.94)' : '#000000' }, children: [_jsxs(View, { style: { flex: 1, minHeight: 0, justifyContent: 'center', paddingHorizontal: visual && controls ? 12 : 0 }, children: [controls && _jsxs(View, { testID: "media-action-toolbar", style: { position: 'absolute', top: 12, left: 12, right: 12, zIndex: 3, minHeight: 52, borderRadius: 26, borderWidth: 1, borderColor: 'rgba(255,255,255,0.12)', backgroundColor: 'rgba(18,18,18,0.92)', paddingLeft: 8, paddingRight: 4, flexDirection: 'row', alignItems: 'center', gap: 2 }, children: [[[onDownload, 'Download', 'download-outline', downloading, false], [onDelete, 'Delete', 'trash-outline', false, true], [onForward, 'Forward', 'arrow-redo-outline', false, false], [onShare, 'Share', 'share-social-outline', false, false]].filter(([action, label]) => !!action || (visual && !reviewAction && label !== 'Download')).map(([action, label, icon, busy, destructive]) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${label} media`, accessibilityState: { busy }, disabled: !action || busy || downloading, onPress: action, style: { opacity: !action ? .5 : 1, 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: !action ? '#A3A3A3' : destructive ? '#EF4444' : '#F7F7F7' }), _jsx(Text, { numberOfLines: 1, style: { color: !action ? '#A3A3A3' : destructive ? '#EF4444' : '#F7F7F7', fontSize: 10, fontWeight: '800' }, children: label })] }, label)), _jsx(View, { style: { flex: (!visual || !!reviewAction) && !onDownload && !onDelete && !onForward && !onShare ? 1 : 0, minWidth: 0 }, children: (!visual || !!reviewAction) && !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: 'rgba(255,255,255,0.08)', 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(View, { style: { height: controls ? '82%' : '100%', width: '100%' }, children: _jsx(ZoomablePhoto, { uri: uri, label: fileName, expanded: photoExpanded, onTap: () => setExpanded(!photoExpanded) }) }) : 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" }) })] }) : kind === 'video' ? _jsx(View, { testID: "media-video-stage", style: { height: '72%', width: '100%' }, children: children }) : children] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#fff', padding: 16 }, children: error }), controls && 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-menu.d.ts

@@ -0,0 +1,28 @@
+import React, { type ReactNode } from 'react';
+import { MessageIcon } from './icons.js';
+export type MessageMenuPosition = {
+    x: number;
+    y: number;
+    above: boolean;
+    available: number;
+};
+/** Anchor outside the selected bubble, never at its text's center. */
+export declare function messageMenuPosition(x: number, y: number, width: number, height: number, screenWidth: number, screenHeight: number, mine: boolean): MessageMenuPosition;
+export declare function MessageMenuRow({ icon, label, onPress, disabled, danger, divider }: {
+    icon: React.ComponentProps<typeof MessageIcon>['name'];
+    label: string;
+    onPress: () => void;
+    disabled?: boolean;
+    danger?: boolean;
+    divider?: boolean;
+}): React.JSX.Element;
+export declare function MessageMenu({ visible, position, screenHeight, mine, reactions, children, onClose, onDismiss }: {
+    visible: boolean;
+    position: MessageMenuPosition;
+    screenHeight: number;
+    mine: boolean;
+    reactions: ReactNode;
+    children: ReactNode;
+    onClose: () => void;
+    onDismiss: () => void;
+}): React.JSX.Element;

package/dist/message-menu.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { messagingPopupBackdrop } from './popup.js';
+import { useEffect } from 'react';
+import { Modal, Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { MessageIcon } from './icons.js';
+/** Anchor outside the selected bubble, never at its text's center. */
+export function messageMenuPosition(x, y, width, height, screenWidth, screenHeight, mine) {
+    const top = Math.max(12, Math.min(y, screenHeight - 12)), bottom = Math.max(12, Math.min(y + height, screenHeight - 12));
+    const above = top - 24 > screenHeight - bottom - 24;
+    const menuWidth = Math.min(300, screenWidth - 24);
+    return { x: Math.max(12, Math.min(mine ? x + width - menuWidth : x, screenWidth - menuWidth - 12)), y: above ? top : bottom, above, available: Math.max(44, (above ? top : screenHeight - bottom) - 24) };
+}
+export function MessageMenuRow({ icon, label, onPress, disabled, danger, divider }) {
+    return _jsxs(_Fragment, { children: [divider && _jsx(View, { style: { height: 1, marginHorizontal: 12, marginVertical: 4, backgroundColor: '#ffffff22' } }), _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: label, disabled: disabled, onPress: onPress, style: ({ pressed }) => ({ minHeight: 43, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 8, opacity: disabled ? .5 : 1, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: icon, color: danger ? '#F87171' : '#f5f5f5', size: 22 }), _jsx(Text, { style: { flex: 1, color: danger ? '#F87171' : '#f5f5f5', fontSize: 15, fontWeight: '700' }, children: label })] })] });
+}
+export function MessageMenu({ visible, position, screenHeight, mine, reactions, children, onClose, onDismiss }) {
+    useEffect(() => { if (!visible || Platform.OS !== 'web')
+        return; const key = (e) => { if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+    } }; document.addEventListener('keydown', key, true); return () => document.removeEventListener('keydown', key, true); }, [visible, onClose]);
+    const card = _jsx(View, { testID: "message-action-card", style: { width: 218, maxWidth: '100%', maxHeight: Math.min(310, Math.max(43, position.available - (reactions ? 58 : 0))), borderRadius: 16, borderWidth: .5, borderColor: '#ffffff22', backgroundColor: '#151515', paddingVertical: 4, overflow: 'hidden', boxShadow: '0 8px 18px #0006', alignSelf: mine ? 'flex-end' : 'flex-start' }, children: _jsx(ScrollView, { showsVerticalScrollIndicator: false, bounces: false, keyboardShouldPersistTaps: "handled", children: children }) });
+    return _jsx(Modal, { visible: visible, transparent: true, animationType: "none", onRequestClose: onClose, onDismiss: onDismiss, children: _jsxs(View, { style: { flex: 1 }, children: [_jsx(Pressable, { accessibilityLabel: "Close message options", onPress: onClose, style: { position: 'absolute', inset: 0, backgroundColor: messagingPopupBackdrop } }), _jsxs(View, { testID: "message-context-menu", style: { position: 'absolute', left: position.x, ...(position.above ? { bottom: screenHeight - position.y + 12 } : { top: position.y + 12 }), width: 300, maxWidth: '94%', gap: 8 }, children: [position.above ? card : reactions, position.above ? reactions : card] })] }) });
+}

package/dist/message-order.d.ts

@@ -0,0 +1,7 @@
+import type { MessagingMessage } from '@robono/messaging';
+/** Only adjacent parts of the same send share a rail. Never join across a
+ * missing part, another sender/conversation, or a date separator. */
+export declare function continuesAttachmentSend(before: MessagingMessage | undefined, after: MessagingMessage | undefined): boolean;
+/** 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[];