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

package/dist/index.js

@@ -0,0 +1,433 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MessagingSafety } from './safety.js';
+export { MessagingSafety } from './safety.js';
+import { PollMessage, PollComposer } from "./polls.js";
+export { PollMessage, PollComposer } from "./polls.js";
+import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { Animated, AppState, BackHandler, FlatList, Image, KeyboardAvoidingView, Keyboard, Modal, Platform, Pressable, ScrollView, Text, TextInput, View, useWindowDimensions, } from "react-native";
+import { useQuoteGesture } from "./use-quote-gesture.js";
+import { MessageIcon, duration, fileSize, chatSurface } from "./icons.js";
+import { VoiceMessageComposer } from "./voice-composer.js";
+export { VoiceMessageComposer, VoiceDraftPlayback } from "./voice-composer.js";
+import { VoicePlayback } from "./media-ui.js";
+export { VoicePlayback, MediaViewer, MediaPlaybackControls, ZoomablePhoto } from "./media-ui.js";
+import { defaultMessagingSettings, defaultAttachmentLimits, messageReactions, } from "@robono/messaging";
+const Context = createContext(null);
+export function useMessagingUI() {
+    const context = useContext(Context);
+    if (!context)
+        throw Error("Wrap messaging components in MessagingProvider.");
+    return context;
+}
+export function MessagingProvider({ children, ...props }) {
+    const state = useSyncExternalStore(props.client.subscribe, props.client.getSnapshot, props.client.getSnapshot);
+    const [reply, setReply] = useState(null);
+    useEffect(() => {
+        void props.client.reportUsage({
+            platform: Platform.OS === "ios"
+                ? "ios"
+                : Platform.OS === "android"
+                    ? "android"
+                    : "other",
+            components: ["screen"],
+        }).catch(() => { });
+    }, [props.client]);
+    const value = {
+        ...props,
+        state,
+        reply: reply?.conversationId === state.conversationId
+            ? state.messages.find(m => m.id === reply.id && !m.deleted) ?? null
+            : null,
+        setReply,
+        design: props.appearance ?? state.settings?.appearance ??
+            defaultMessagingSettings().appearance,
+    };
+    return _jsx(Context.Provider, { value: value, children: children });
+}
+export function MessagingHeader({ children } = {}) {
+    const { contact, design, state, client, onBack, onContactOptions } = useMessagingUI();
+    const [safetyOpen, setSafetyOpen] = useState(false);
+    const c = design.colors;
+    return (_jsxs(View, { style: {
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: 8,
+            paddingVertical: 6,
+            minHeight: 58,
+            backgroundColor: chatSurface(c.background),
+            gap: 8,
+            borderBottomWidth: 1,
+            borderBottomColor: c.foreground + "12",
+        }, children: [onBack && (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Back", onPress: onBack, style: { minWidth: 44, minHeight: 44, justifyContent: "center" }, children: _jsx(MessageIcon, { name: "back", color: c.foreground, size: 25 }) })), design.showAvatars && (contact.avatarUrl
+                ? (_jsx(Image, { source: { uri: contact.avatarUrl }, style: { width: 36, height: 36, borderRadius: 18 } }))
+                : (_jsx(View, { style: {
+                        width: 36,
+                        height: 36,
+                        borderRadius: 18,
+                        backgroundColor: c.incoming,
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, children: _jsx(Text, { style: { color: c.incomingText }, children: contact.name.slice(0, 1) }) }))), _jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 17, fontWeight: "600" }, children: state.conversation?.kind === 'group' ? state.conversation.name : contact.name }), _jsx(Text, { style: { color: c.secondary, fontSize: 12 }, children: state.conversation?.kind === 'group' ? `${state.conversation.memberIds?.length ?? 0} members` : design.name })] }), design.logoUrl && (_jsx(Image, { source: { uri: design.logoUrl }, accessibilityLabel: design.name, style: { width: 32, height: 32 } })), children, (onContactOptions || state.conversation?.safety) && (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Contact options", onPress: onContactOptions ?? (() => setSafetyOpen(true)), style: { padding: 12 }, children: _jsx(MessageIcon, { name: "more", color: c.foreground, size: 22 }) })), safetyOpen && _jsx(MessagingSafety, { client: client, state: state, appearance: design, name: state.conversation?.kind === 'group' ? (state.conversation.name ?? 'Conversation') : contact.name, onClose: () => setSafetyOpen(false) })] }));
+}
+const mediaNames = {
+    voice: "Voice message",
+    image: "Photo",
+    video: "Video",
+    document: "File",
+};
+function quoteSummary(message) { return message?.poll?.question ?? message?.text ?? (message && message.kind !== "text" && message.kind !== "poll" ? mediaNames[message.kind] : "Earlier message"); }
+/** Thumbnails stay local to the view and are discarded on conversation/message changes. */
+function MediaContent({ message, ink, footer, onOpen, onLongPress }) {
+    const { attachmentPreview, components, design } = useMessagingUI();
+    const [preview, setPreview] = useState({});
+    useEffect(() => {
+        let current = true;
+        setPreview({});
+        if (attachmentPreview)
+            void attachmentPreview(message).then(value => { if (current)
+                setPreview(value); }).catch(() => { });
+        return () => { current = false; };
+    }, [message.id, message.conversationId, message.media?.assetId, attachmentPreview]);
+    if (message.kind === 'voice') {
+        const Voice = components?.VoiceMessage;
+        return Voice ? _jsx(Voice, { message: message, ink: ink, accent: design.colors.accent, waveform: preview.waveform, footer: footer, onOpen: onOpen, onLongPress: onLongPress }) : _jsx(VoicePlayback, { ink: ink, accent: design.colors.accent, waveform: preview.waveform, footer: footer, durationMs: message.media?.durationMs, onToggle: onOpen, onLongPress: onLongPress });
+    }
+    if (message.kind === 'image' || message.kind === 'video')
+        return _jsx(View, { style: { width: 260, maxWidth: '100%', gap: 0 }, children: _jsxs(View, { style: { height: 186, borderRadius: 6, overflow: 'hidden', alignItems: 'center', justifyContent: 'center', backgroundColor: '#00000012' }, children: [preview.uri ? _jsx(Image, { source: { uri: preview.uri }, accessibilityLabel: message.media?.fileName ?? mediaNames[message.kind], resizeMode: "cover", onError: () => setPreview(value => ({ ...value, uri: undefined })), style: { width: '100%', height: '100%' } }) : _jsx(MessageIcon, { name: message.kind, color: ink, size: 36 }), message.kind === 'video' && _jsxs(_Fragment, { children: [_jsx(View, { style: { position: 'absolute', borderRadius: 24, padding: 10, backgroundColor: '#00000099' }, children: _jsx(MessageIcon, { name: "play", color: "#ffffff" }) }), _jsx(Text, { style: { position: 'absolute', left: 8, bottom: 8, color: '#ffffff', backgroundColor: '#000000aa', borderRadius: 4, paddingHorizontal: 5, fontSize: 12 }, children: duration(message.media?.durationMs) })] }), _jsx(View, { style: { position: 'absolute', right: 6, bottom: 6, paddingHorizontal: 6, paddingVertical: 3, borderRadius: 9, backgroundColor: '#00000070' }, children: footer })] }) });
+    return _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 12, width: 246, minHeight: 62, padding: 10, borderRadius: 6, backgroundColor: ink + '09' }, children: [_jsx(MessageIcon, { name: "document", color: design.colors.accent, size: 30 }), _jsxs(View, { style: { flex: 1, gap: 4 }, children: [_jsx(Text, { numberOfLines: 2, style: { color: ink, fontSize: 14, fontWeight: '600' }, children: message.media?.fileName ?? 'File' }), _jsxs(Text, { style: { color: ink, fontSize: 12, opacity: 0.75 }, children: [message.media?.fileName?.split('.').pop()?.toUpperCase(), " \u00B7 ", fileSize(message.media?.byteSize)] })] })] });
+}
+function MessageMetadata({ message, mine, ink }) {
+    const { state, design } = useMessagingUI();
+    const read = !!message.readAt && state.settings?.features.readReceipts;
+    return _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 4, alignSelf: 'flex-end' }, children: [_jsx(Text, { style: { color: ink, fontSize: 11, lineHeight: 14, opacity: 0.64, fontVariant: ['tabular-nums'] }, children: new Date(message.createdAt).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) }), mine && _jsx(View, { accessibilityLabel: read ? 'Read' : 'Sent', children: _jsx(MessageIcon, { name: read ? 'read' : 'check', color: read ? design.colors.accent : ink, size: 15 }) })] });
+}
+export function MessagingBubble({ message }) {
+    const { userId, design, state, client, participants, setReply, onMessageOptions, openAttachment, language } = useMessagingUI();
+    const mine = message.senderId === userId, c = design.colors, ink = mine ? c.outgoingText : c.incomingText;
+    const visual = message.kind === 'image' || message.kind === 'video', voice = message.kind === 'voice';
+    const previous = state.messages[state.messages.findIndex(m => m.id === message.id) - 1];
+    const grouped = previous?.senderId === message.senderId && new Date(previous.createdAt).toDateString() === new Date(message.createdAt).toDateString();
+    const [error, setError] = useState(''), [busy, setBusy] = useState(false), [actions, setActions] = useState(false), [reportOpen, setReportOpen] = useState(false);
+    const anchor = useRef(null), viewport = useWindowDimensions();
+    const [menuPosition, setMenuPosition] = useState({ x: 12, y: 12 }), [hovered, setHovered] = useState(false);
+    const openMenu = () => anchor.current?.measureInWindow((x, y, width, height) => {
+        const menuHeight = 20 + (state.settings?.features.reactions ? 46 : 0) + (state.settings?.features.replies ? 54 : 0) + (!mine && state.conversation?.safety?.canReport ? 46 : 0) + (onMessageOptions ? 54 : 0) + 54;
+        const top = y >= menuHeight + 8 ? y - menuHeight - 6 : y + height + 6;
+        setMenuPosition({ x: Math.max(8, Math.min(x, viewport.width - 312)), y: Math.max(8, Math.min(top, viewport.height - menuHeight - 8)) });
+        setActions(true);
+    });
+    const [transformed, setTransformed] = useState(null), [transforming, setTransforming] = useState(false);
+    const canTranscript = voice && !!state.settings?.features.transcription && client.hasLanguageTools() && !message.deleted;
+    const canTranslate = ['text', 'voice'].includes(message.kind) && !!state.settings?.features.translation && client.hasLanguageTools() && !message.deleted;
+    useEffect(() => { setTransformed(null); }, [message.id, message.deleted, state.settings?.features.transcription, state.settings?.features.translation]);
+    async function transform(kind) { if (transformed?.kind === kind) {
+        setTransformed(null);
+        return;
+    } if (transforming)
+        return; setTransforming(true); setActions(false); setError(''); try {
+        setTransformed(await client.transform(message.id, kind, language ?? Intl.DateTimeFormat().resolvedOptions().locale));
+    }
+    catch {
+        setError('This message could not be converted. Try again.');
+    }
+    finally {
+        setTransforming(false);
+    } }
+    const canInteract = !!state.settings?.enabled && state.conversation?.canSend !== false && !message.deleted;
+    const quoting = !!state.settings?.features.replies && canInteract;
+    const quoteGesture = useQuoteGesture(quoting, mine, () => setReply(message));
+    async function open() { if (quoteGesture.suppressPress())
+        return; if (!openAttachment) {
+        setError('This attachment cannot be opened.');
+        return;
+    } setBusy(true); setError(''); try {
+        await openAttachment(message);
+    }
+    catch {
+        setError('The attachment could not be opened. Try again.');
+    }
+    finally {
+        setBusy(false);
+    } }
+    const menu = () => { if (quoteGesture.suppressPress())
+        return; if (canTranscript || canTranslate || canInteract && (quoting || state.settings?.features.reactions) || onMessageOptions || !mine && state.conversation?.safety?.canReport)
+        openMenu(); };
+    async function react(emoji) {
+        if (busy)
+            return;
+        setBusy(true);
+        setError('');
+        setActions(false);
+        const own = message.reactions?.find(r => r.userIds.includes(userId))?.emoji;
+        try {
+            await client.react(message.id, own === emoji ? null : emoji);
+        }
+        catch {
+            setError('Your reaction could not be saved. Try again.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    const footer = _jsx(MessageMetadata, { message: message, mine: mine, ink: visual ? '#ffffff' : ink });
+    const content = message.kind === 'poll' ? _jsx(PollMessage, { message: message, userId: userId, ink: ink, accent: c.accent, background: c.background, foreground: c.foreground, enabled: canInteract && !!state.settings?.features.poll, onVote: options => client.vote(message.id, options), onClose: () => client.closePoll(message.id) }) : message.kind === 'text' ? _jsxs(View, { testID: "message-original-text", style: { position: 'relative', paddingBottom: 2 }, children: [_jsxs(Text, { selectable: true, style: { color: ink, fontSize: 16, lineHeight: 22 }, children: [message.text, _jsx(Text, { accessible: false, style: { fontSize: 11, color: 'transparent' }, children: ' '.repeat(mine ? 15 : 12) })] }), _jsx(View, { pointerEvents: "none", testID: "message-timestamp", style: { position: 'absolute', right: 0, bottom: 0 }, children: footer })] }) : _jsx(MediaContent, { message: message, ink: ink, accent: c.accent, footer: footer, onOpen: () => void open(), onLongPress: menu });
+    return _jsxs(View, { ref: anchor, ...(Platform.OS === 'web' ? { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onContextMenu: (event) => { event.preventDefault(); menu(); } } : {}), style: { alignSelf: mine ? 'flex-end' : 'flex-start', maxWidth: '88%', marginTop: grouped ? 2 : 7, marginBottom: 0 }, children: [quoting && _jsx(Animated.View, { pointerEvents: "none", accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", testID: `quote-reveal-${mine ? 'outgoing' : 'incoming'}`, style: { ...quoteGesture.revealWebStyle, position: 'absolute', top: '50%', marginTop: -14, ...(mine ? { right: 12 } : { left: 12 }), width: 28, height: 28, alignItems: 'center', justifyContent: 'center', opacity: quoteGesture.revealOpacity }, children: _jsx(MessageIcon, { name: "quote", color: c.secondary, size: 23 }) }), _jsxs(Animated.View, { ref: quoteGesture.webRef, ...quoteGesture.handlers, accessibilityActions: quoting ? [{ name: "quote", label: "Quote message" }] : undefined, onAccessibilityAction: event => { if (quoting && event.nativeEvent.actionName === "quote")
+                    setReply(message); }, testID: `message-${message.kind}-${mine ? 'outgoing' : 'incoming'}`, style: { ...quoteGesture.webStyle, transform: [{ translateX: quoteGesture.offset }], ...(Platform.OS === "web" && quoting ? { touchAction: "pan-y", userSelect: "none" } : {}), backgroundColor: mine ? c.outgoing : c.incoming, borderRadius: 8, borderTopRightRadius: mine && !grouped ? 0 : 8, borderTopLeftRadius: !mine && !grouped ? 0 : 8, padding: visual ? 3 : design.compact ? 6 : 8, boxShadow: '0 1px 1px #00000010' }, children: [!grouped && _jsx(View, { pointerEvents: "none", style: { position: 'absolute', top: 0, ...(mine ? { right: -6, borderRightWidth: 6 } : { left: -6, borderLeftWidth: 6 }), borderRightColor: 'transparent', borderLeftColor: 'transparent', borderTopWidth: 7, borderTopColor: mine ? c.outgoing : c.incoming } }), message.replyTo && _jsx(View, { style: { borderLeftWidth: 3, borderLeftColor: c.accent, paddingLeft: 9, paddingVertical: 5, marginBottom: 7 }, children: _jsx(Text, { numberOfLines: 2, style: { color: ink, fontSize: 12, opacity: 0.7 }, children: quoteSummary(state.messages.find(m => m.id === message.replyTo)) }) }), !mine && !grouped && state.conversation?.kind === 'group' && _jsx(Text, { style: { color: ink, fontSize: 12, fontWeight: '600', marginBottom: 5 }, children: message.deleted ? 'Former member' : participants?.[message.senderId]?.name ?? 'Member' }), voice || message.kind === 'poll' ? content : _jsx(Pressable, { accessibilityRole: message.kind === 'text' ? undefined : 'button', accessibilityLabel: message.kind === 'text' ? undefined : `${mediaNames[message.kind]}: ${message.media?.fileName ?? 'Open attachment'}`, disabled: busy, onLongPress: menu, onPress: message.kind === 'text' ? undefined : () => void open(), children: content }), message.kind !== 'text' && !voice && !visual && _jsx(View, { style: { marginTop: 4, alignSelf: 'flex-end' }, children: footer }), transformed && _jsx(Text, { testID: "message-language-result", style: { color: ink, fontSize: 13, lineHeight: 18, opacity: .8, marginTop: 4 }, children: transformed.text }), (canTranscript || canTranslate) && _jsxs(View, { style: { flexDirection: 'row', gap: 12, marginTop: 2 }, children: [canTranscript && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Read voice message", accessibilityState: { expanded: transformed?.kind === 'transcript' }, disabled: transforming, onPress: () => void transform('transcript'), style: { minHeight: 28, justifyContent: 'center' }, children: _jsx(Text, { style: { color: ink, fontSize: 11, opacity: .7 }, children: "Transcript" }) }), canTranslate && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Translate message", accessibilityState: { expanded: transformed?.kind === 'translation' }, disabled: transforming, onPress: () => void transform('translation'), style: { minHeight: 28, justifyContent: 'center' }, children: _jsx(Text, { style: { color: ink, fontSize: 11, opacity: .7 }, children: "Translate" }) })] }), transforming && _jsx(Text, { accessibilityLiveRegion: "polite", style: { color: ink, fontSize: 11 }, children: "Converting\u2026" }), busy && !voice && _jsx(Text, { style: { color: ink, fontSize: 12, marginTop: 4 }, children: "Opening\u2026" }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink, fontSize: 12 }, children: error }), Platform.OS === 'web' && canInteract && state.settings?.features.reactions && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "React to message", onFocus: () => setHovered(true), onBlur: () => setHovered(false), onPress: openMenu, style: { opacity: hovered || actions ? 1 : 0, position: 'absolute', top: 6, ...(mine ? { left: -34 } : { right: -34 }), width: 32, height: 32, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "reaction", color: c.secondary, size: 20 }) }), !!message.reactions?.length && _jsx(View, { style: { flexDirection: 'row', gap: 4, marginTop: 5, flexWrap: 'wrap' }, children: message.reactions.map(r => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${r.emoji}, ${r.userIds.length} reaction${r.userIds.length === 1 ? '' : 's'}`, accessibilityState: { selected: r.userIds.includes(userId) }, disabled: busy || !canInteract || !state.settings?.features.reactions, onPress: () => void react(r.emoji), style: { flexDirection: 'row', gap: 4, minWidth: 40, minHeight: 32, paddingHorizontal: 7, alignItems: 'center', justifyContent: 'center', borderRadius: 16, backgroundColor: r.userIds.includes(userId) ? c.accent + '24' : c.background, borderWidth: 1, borderColor: r.userIds.includes(userId) ? c.accent : c.secondary + '30' }, children: [_jsx(Text, { style: { fontSize: 17 }, children: r.emoji }), _jsx(Text, { style: { color: c.foreground, fontSize: 12 }, children: r.userIds.length })] }, r.emoji)) }), _jsx(Modal, { visible: actions, transparent: true, animationType: "fade", onRequestClose: () => setActions(false), children: _jsx(Pressable, { accessibilityLabel: "Close message options", onPress: () => setActions(false), style: { flex: 1, backgroundColor: '#00000022' }, children: _jsxs(View, { style: { position: 'absolute', left: menuPosition.x, top: menuPosition.y, width: Math.min(304, viewport.width - 16), backgroundColor: c.background, borderRadius: 18, padding: 8, gap: 2, boxShadow: '0 4px 20px #0003' }, children: [canInteract && state.settings?.features.reactions && _jsx(View, { accessibilityLabel: "Choose a reaction", style: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 2 }, children: messageReactions.map(emoji => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `React ${emoji}`, disabled: busy, onPress: () => void react(emoji), style: { minWidth: 42, minHeight: 42, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontSize: 28 }, children: emoji }) }, emoji)) }), quoting && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setActions(false); setReply(message); }, style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Quote" }) }), !mine && state.conversation?.safety?.canReport && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setActions(false); setReportOpen(true); }, style: { padding: 12 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 15 }, children: "Report message" }) }), onMessageOptions && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setActions(false); onMessageOptions(message); }, style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "More options" }) }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => setActions(false), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.secondary, fontSize: 16 }, children: "Cancel" }) })] }) }) }), reportOpen && _jsx(MessagingSafety, { client: client, state: state, appearance: design, name: participants?.[message.senderId]?.name ?? 'Contact', messageId: message.id, onClose: () => setReportOpen(false) })] })] });
+}
+export function MessagingList() {
+    const context = useMessagingUI();
+    const { state, client, components, design } = context;
+    const Message = components?.Message ?? MessagingBubble;
+    const current = useRef(context);
+    current.current = context;
+    const read = useRef("");
+    const pending = useRef("");
+    const onVisible = useRef(({ viewableItems }) => {
+        const ui = current.current;
+        if (ui.active === false || AppState.currentState !== "active" ||
+            !ui.state.settings?.features.readReceipts)
+            return;
+        const visible = viewableItems.filter((v) => v.isViewable && v.item.senderId !== ui.userId).map((v) => v.item).sort((a, b) => BigInt(a.id) > BigInt(b.id) ? -1 : 1);
+        const last = visible[0];
+        if (!last)
+            return;
+        const key = last.conversationId + ":" + last.id;
+        if (read.current === key || pending.current === key)
+            return;
+        pending.current = key;
+        void ui.client.markRead(last.id).then(() => {
+            read.current = key;
+        }).catch(() => { }).finally(() => {
+            if (pending.current === key)
+                pending.current = "";
+        });
+    }).current;
+    return (_jsx(FlatList, { data: [...state.messages].reverse(), inverted: true, keyExtractor: (m) => m.id, style: { flex: 1 }, keyboardShouldPersistTaps: "handled", contentContainerStyle: { paddingHorizontal: 12, paddingVertical: 10, flexGrow: 1, justifyContent: "flex-end" }, onViewableItemsChanged: onVisible, viewabilityConfig: {
+            itemVisiblePercentThreshold: 50,
+            minimumViewTime: 500,
+        }, renderItem: ({ item, index }) => {
+            const previous = [...state.messages].reverse()[index + 1];
+            const date = new Date(item.createdAt), start = !previous || date.toDateString() !== new Date(previous.createdAt).toDateString();
+            return _jsxs(View, { children: [start && _jsx(Text, { style: { alignSelf: 'center', fontSize: 12, color: design.colors.secondary, backgroundColor: chatSurface(design.colors.background), borderRadius: 7, paddingHorizontal: 12, paddingVertical: 5, marginTop: 4, marginBottom: 10 }, children: date.toDateString() === new Date().toDateString() ? 'Today' : date.toLocaleDateString([], { month: 'short', day: 'numeric' }) }), _jsx(Message, { message: item })] });
+        }, onEndReached: () => {
+            if (state.hasMore && !state.loading) {
+                void client.loadOlder().catch(() => { });
+            }
+        }, onEndReachedThreshold: 0.2, ListEmptyComponent: _jsx(Text, { style: { color: design.colors.secondary }, children: state.loading ? "Loading messages…" : design.labels.empty }) }));
+}
+/** One horizontal media row on phones and in the browser preview. */
+function AttachmentStrip({ children, label, height, recent = false }) {
+    const scroll = useRef(null);
+    useEffect(() => {
+        if (Platform.OS !== 'web')
+            return;
+        const node = scroll.current?.getScrollableNode();
+        if (!node?.addEventListener)
+            return;
+        const wheel = (event) => {
+            if (event.ctrlKey || node.scrollWidth <= node.clientWidth)
+                return;
+            const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+            if (!delta)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            node.scrollLeft += delta * (event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? node.clientWidth : 1);
+        };
+        node.addEventListener('wheel', wheel, { passive: false });
+        return () => node.removeEventListener('wheel', wheel);
+    }, []);
+    return _jsx(ScrollView, { ref: scroll, horizontal: true, accessibilityLabel: label, directionalLockEnabled: true, alwaysBounceVertical: false, showsVerticalScrollIndicator: false, showsHorizontalScrollIndicator: false, style: { height, flexGrow: 0, flexShrink: 0, ...(recent ? { marginTop: 8 } : {}), ...(Platform.OS === 'web' ? { overflowY: 'hidden', touchAction: 'pan-x' } : {}) }, contentContainerStyle: { flexDirection: 'row', alignItems: 'flex-start', gap: 8, paddingHorizontal: recent ? 0 : 8, paddingBottom: recent ? 4 : 2 }, children: children });
+}
+export function MessagingComposer() {
+    const { state, client, design, pickAttachment, attachmentChoices, attachmentPreview, releaseAttachment, reply, setReply, components } = useMessagingUI();
+    const VoiceComposer = components?.VoiceComposer ?? VoiceMessageComposer;
+    const [draft, setDraft] = useState(""), [busy, setBusy] = useState(false), [error, setError] = useState("");
+    const [selected, setSelected] = useState([]);
+    const selectedRef = useRef(selected);
+    selectedRef.current = selected;
+    const selectionSequence = useRef(0);
+    useEffect(() => { setSelected(items => { for (const item of items)
+        void releaseAttachment?.(item.media); return []; }); }, [state.conversationId]);
+    useEffect(() => { setSelected(items => items.filter(item => { const allowed = state.settings?.enabled && state.conversation?.canSend !== false && state.settings.features[item.kind]; if (!allowed)
+        void releaseAttachment?.(item.media); return allowed; })); if (!state.settings?.enabled || state.conversation?.canSend === false)
+        setDraft(''); }, [state.settings, state.conversation?.canSend]);
+    async function sendSelected() {
+        for (const item of selectedRef.current) {
+            // The client owns failed sends and exposes Retry; never leave a second draft copy.
+            setSelected(items => items.filter(value => value.id !== item.id));
+            try {
+                await submit({ kind: item.kind, media: item.media });
+            }
+            finally {
+                void releaseAttachment?.(item.media);
+            }
+        }
+    }
+    const [pollOpen, setPollOpen] = useState(false);
+    useEffect(() => setPollOpen(false), [state.conversationId]);
+    const [attachmentsOpen, setAttachmentsOpen] = useState(false);
+    const [attachmentFilter, setAttachmentFilter] = useState(null);
+    useEffect(() => { if (!attachmentsOpen)
+        setAttachmentFilter(null); }, [attachmentsOpen]);
+    useEffect(() => { if (attachmentFilter && !state.settings?.features[attachmentFilter])
+        setAttachmentFilter(null); }, [attachmentFilter, state.settings]);
+    const [inputHeight, setInputHeight] = useState(42);
+    useEffect(() => { if (!draft)
+        setInputHeight(42); }, [draft]);
+    const inFlight = useRef(false);
+    const voiceInFlight = useRef(false);
+    const [voicePending, setVoicePending] = useState(false);
+    const input = useRef(null);
+    useEffect(() => { if (!attachmentsOpen)
+        return; const back = BackHandler.addEventListener("hardwareBackPress", () => { setAttachmentsOpen(false); return true; }); return () => back.remove(); }, [attachmentsOpen]);
+    const c = design.colors, features = state.settings?.features, enabled = state.settings?.enabled;
+    const library = { image: !!features?.image && design.showPhotoLibrary !== false, video: !!features?.video && design.showVideoLibrary !== false, document: !!features?.document };
+    async function submit(content) {
+        await client.send({
+            ...content,
+            ...(reply && features?.replies ? { replyTo: reply.id } : {}),
+        });
+        setReply(null);
+    }
+    async function send() {
+        if (inFlight.current || (!draft.trim() && !selected.length))
+            return;
+        inFlight.current = true;
+        if (!selected.length && draft.trim()) {
+            // The client adds its pending bubble immediately. Network acknowledgement
+            // must not lock the composer or clear text/quotes typed for the next message.
+            const conversationId = state.conversationId;
+            const content = { kind: 'text', text: draft, ...(reply && features?.replies ? { replyTo: reply.id } : {}) };
+            setDraft('');
+            setReply(null);
+            setError('');
+            requestAnimationFrame(() => { inFlight.current = false; });
+            try {
+                await client.send(content);
+            }
+            catch {
+                if (client.getSnapshot().conversationId === conversationId)
+                    setError('Message not sent. Use Retry to send it again.');
+            }
+            return;
+        }
+        setBusy(true);
+        setError("");
+        const text = draft;
+        try {
+            await sendSelected();
+            setDraft("");
+            if (text.trim())
+                await submit({ kind: "text", text });
+        }
+        catch {
+            setError("Message not sent. Use Retry to send it again.");
+        }
+        finally {
+            inFlight.current = false;
+            setBusy(false);
+        }
+    }
+    async function pick(kind, source, attachmentId, intent = "send") {
+        if (intent === 'send')
+            setAttachmentsOpen(false);
+        if (inFlight.current)
+            return;
+        if (!pickAttachment) {
+            setError("Attachments are unavailable.");
+            return;
+        }
+        const conversationId = state.conversationId;
+        const recording = kind === 'voice';
+        if (recording && voiceInFlight.current)
+            return;
+        const ownsBusy = !recording;
+        if (recording) {
+            voiceInFlight.current = true;
+            setVoicePending(true);
+        }
+        else {
+            inFlight.current = true;
+            setBusy(true);
+        }
+        setError("");
+        try {
+            const media = await pickAttachment(kind, kind === "voice"
+                ? { maxDurationMs: (state.settings?.voice?.maxDurationSeconds ?? 60) * 1000, intent: 'attach' }
+                : { ...(source ? { source } : {}), ...(attachmentId ? { attachmentId } : {}), ...(!source ? { intent } : {}), ...(state.settings?.attachments ?? defaultAttachmentLimits())[kind],
+                    ...(kind === "video" ? { maxDurationMs: (state.settings?.attachments ?? defaultAttachmentLimits()).video.maxDurationSeconds * 1000 } : {}) });
+            if (media && client.getSnapshot().conversationId === conversationId) {
+                setAttachmentsOpen(false);
+                {
+                    const actualKind = source === 'camera' ? (media.mimeType.startsWith('video/') ? 'video' : 'image') : kind;
+                    const current = client.getSnapshot();
+                    if (!current.settings?.enabled || current.conversation?.canSend === false || !current.settings.features[actualKind]) {
+                        void releaseAttachment?.(media);
+                        return;
+                    }
+                    const id = 'attachment-' + (++selectionSequence.current);
+                    const thumbnail = attachmentChoices?.find(item => item.id === attachmentId)?.thumbnailUri;
+                    setSelected(items => [...items, { id, kind: actualKind, media, thumbnail }]);
+                    if (!thumbnail && attachmentPreview) {
+                        const message = { id, conversationId: conversationId, kind: actualKind, media, senderId: '', clientMessageId: id, createdAt: new Date().toISOString(), readAt: null };
+                        void attachmentPreview(message).then(result => setSelected(items => items.map(item => item.id === id ? { ...item, thumbnail: result.uri } : item))).catch(() => { });
+                    }
+                    return;
+                }
+            }
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : "The attachment could not be sent.");
+        }
+        finally {
+            if (recording) {
+                voiceInFlight.current = false;
+                setVoicePending(false);
+            }
+            if (ownsBusy) {
+                inFlight.current = false;
+                setBusy(false);
+            }
+        }
+    }
+    function removeSelected(id) { const item = selectedRef.current.find(item => item.id === id); setSelected(items => items.filter(item => item.id !== id)); if (item)
+        void releaseAttachment?.(item.media); }
+    function renderAttachments(voiceReview, blocked = busy) {
+        return selected.length > 0 || voiceReview ? _jsxs(AttachmentStrip, { label: "Pending attachments", height: selected.some(item => item.kind === 'document') ? 104 : 86, children: [selected.map(item => item.kind === 'voice' && components?.VoiceAttachment ? _jsx(components.VoiceAttachment, { media: item.media, appearance: design, disabled: blocked, onRemove: () => removeSelected(item.id) }, item.id) : _jsxs(View, { style: { width: 88, paddingTop: 8, paddingRight: 10 }, children: [_jsxs(View, { style: { width: 76, height: 76, borderRadius: 9, overflow: 'hidden', backgroundColor: c.incoming, borderWidth: 1, borderColor: c.secondary + '40', alignItems: 'center', justifyContent: 'center' }, children: [item.thumbnail ? _jsx(Image, { source: { uri: item.thumbnail }, accessibilityLabel: item.media.fileName ?? mediaNames[item.kind], resizeMode: "cover", style: { width: '100%', height: '100%' } }) : _jsx(MessageIcon, { name: item.kind === 'voice' ? 'mic' : item.kind, color: c.accent, size: 28 }), item.kind === 'video' && _jsx(View, { style: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 4, backgroundColor: '#0009' }, children: _jsx(Text, { style: { color: '#fff', fontSize: 10 }, children: duration(item.media.durationMs) }) })] }), item.kind === 'document' && _jsx(Text, { numberOfLines: 1, style: { fontSize: 10, color: c.foreground, marginTop: 3 }, children: item.media.fileName ?? mediaNames[item.kind] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Remove ' + (item.media.fileName ?? mediaNames[item.kind]), disabled: blocked, onPress: () => removeSelected(item.id), style: { position: 'absolute', right: 0, top: 0, width: 30, height: 30, alignItems: 'center', justifyContent: 'center' }, children: _jsx(View, { style: { backgroundColor: c.foreground, borderRadius: 11, padding: 3 }, children: _jsx(MessageIcon, { name: "close", size: 16, color: c.background }) }) })] }, item.id)), voiceReview] }) : null;
+    }
+    function renderTextComposer(voice = { hasVoice: false, blocked: false }) {
+        const blocked = voice.blocked || busy;
+        return _jsxs(View, { style: { flexDirection: 'row', alignItems: 'flex-end', gap: 2 }, children: [(library.image || library.video || library.document || features?.poll) && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Attach", accessibilityState: { expanded: attachmentsOpen }, disabled: busy || blocked, onPress: () => { if (attachmentsOpen) {
+                        setAttachmentsOpen(false);
+                        input.current?.focus();
+                    }
+                    else {
+                        Keyboard.dismiss();
+                        setAttachmentsOpen(true);
+                    } }, style: { width: 40, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: attachmentsOpen ? "keyboard" : "plus", color: c.foreground, size: 27 }) }), features?.text && _jsx(View, { style: { flex: 1, minWidth: 0, flexDirection: 'row', alignItems: 'flex-end', borderWidth: 1, borderColor: c.secondary + '30', backgroundColor: chatSurface(c.background), borderRadius: 23 }, children: _jsx(TextInput, { ref: input, accessibilityLabel: design.labels.compose, placeholder: design.labels.compose, placeholderTextColor: c.secondary, value: draft, editable: !blocked, onChangeText: setDraft, onContentSizeChange: e => setInputHeight(Math.max(42, Math.min(120, e.nativeEvent.contentSize.height))), multiline: true, numberOfLines: 1, maxLength: 10000, onFocus: () => setAttachmentsOpen(false), style: { ...(Platform.OS === 'web' ? { outlineStyle: 'none' } : {}), flex: 1, minWidth: 0, minHeight: 42, height: inputHeight, maxHeight: 120, color: c.foreground, fontSize: 16, lineHeight: 21, paddingHorizontal: 13, paddingVertical: 10 } }) }), !features?.text && _jsx(View, { style: { flex: 1 } }), (features?.image || features?.video) && design.showCamera && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Camera", disabled: busy || blocked, onPress: () => void pick(features?.image ? 'image' : 'video', 'camera'), style: { width: 42, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "camera", color: c.foreground, size: 24 }) }), features?.voice && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Voice message", disabled: voicePending || busy || blocked, onPress: () => void pick('voice'), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', opacity: voicePending || busy || blocked ? 0.5 : 1 }, children: _jsx(MessageIcon, { name: "mic", color: c.foreground, size: 25 }) }), (features?.text || selected.length > 0) && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: design.labels.send, disabled: blocked || (!draft.trim() && !voice.sendVoice && !selected.length), onPress: () => { if (voice.sendVoice)
+                        voice.sendVoice();
+                    else
+                        void send(); }, style: { width: 42, height: 42, marginLeft: 4, borderRadius: 21, backgroundColor: c.accent, alignItems: 'center', justifyContent: 'center', opacity: blocked || (!draft.trim() && !voice.sendVoice && !selected.length) ? 0.4 : 1 }, children: _jsx(MessageIcon, { name: "send", color: "#ffffff", size: 21 }) })] });
+    }
+    if (!enabled || state.conversation?.canSend === false) {
+        return (_jsx(Text, { style: { padding: 16, color: c.secondary }, children: state.conversation?.safety?.blockedByMe ? 'You blocked this contact. Use contact options to unblock.' : state.conversation?.canSend === false ? (state.conversation.kind === 'group' ? 'Only members allowed to send can post in this group.' : 'Messaging is unavailable for this conversation.') : design.labels.unavailable }));
+    }
+    return (_jsxs(View, { style: { paddingHorizontal: 6, paddingTop: 5, paddingBottom: 6, gap: 6, backgroundColor: chatSurface(c.background) }, children: [reply && (_jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [_jsxs(Text, { style: { flex: 1, color: c.secondary }, children: ["Quoting: ", quoteSummary(reply)] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel quote", onPress: () => setReply(null), children: _jsx(Text, { style: { color: c.foreground }, children: "Cancel" }) })] })), state.settings?.history?.mode === 'last_two' && _jsx(Text, { style: { color: c.secondary, fontSize: 11, textAlign: 'center' }, children: "Only the latest two messages are kept." }), features?.voice ? _jsx(VoiceComposer, { appearance: design, maxSeconds: state.settings?.voice?.maxDurationSeconds ?? 60, busy: busy, onRecord: () => { Keyboard.dismiss(); void pick('voice'); }, renderAttachments: renderAttachments, renderTextComposer: features?.text || selected.length ? renderTextComposer : undefined, actions: _jsxs(_Fragment, { children: [(library.image || library.video || library.document || features?.poll) && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Attach", accessibilityState: { expanded: attachmentsOpen }, disabled: busy, onPress: () => setAttachmentsOpen(!attachmentsOpen), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: attachmentsOpen ? 'close' : 'plus', color: c.foreground, size: 25 }) }), (features?.image || features?.video) && design.showCamera && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Camera", disabled: busy, onPress: () => void pick(features?.image ? 'image' : 'video', 'camera'), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "camera", color: c.foreground, size: 23 }) })] }) }) : _jsxs(_Fragment, { children: [renderAttachments(), renderTextComposer()] }), attachmentsOpen && (library.image || library.video || library.document || features?.poll) && _jsxs(View, { accessibilityLabel: "Attachments", style: { paddingTop: 24, paddingBottom: 16, paddingHorizontal: 8, backgroundColor: chatSurface(c.background) }, children: [_jsxs(View, { style: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start' }, children: [features?.poll && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: "Create poll", disabled: busy, onPress: () => { setAttachmentsOpen(false); setPollOpen(true); }, style: { flex: 1, minWidth: 0, minHeight: 84, alignItems: 'center', gap: 3 }, children: [_jsx(View, { style: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#db7c2412', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "poll", color: "#b76920", size: 28 }) }), _jsx(Text, { style: { color: c.foreground, fontSize: 13 }, children: "Poll" })] }), ['image', 'video', 'document'].filter(kind => library[kind]).map(kind => {
+                                const color = { image: '#1677e8', video: '#7b58cf', document: '#079ec3' }[kind];
+                                const label = { image: 'Photos', video: 'Videos', document: 'Document' }[kind];
+                                return _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: mediaNames[kind], accessibilityState: { selected: attachmentFilter === kind }, disabled: busy, onPress: () => { if (!attachmentChoices)
+                                        void pick(kind);
+                                    else
+                                        setAttachmentFilter(attachmentFilter === kind ? null : kind); }, style: { flex: 1, minWidth: 0, minHeight: 84, alignItems: 'center', gap: 3 }, children: [_jsx(View, { style: { width: 56, height: 56, borderRadius: 28, backgroundColor: color + (attachmentFilter === kind ? '28' : '12'), borderWidth: attachmentFilter === kind ? 2 : 0, borderColor: color, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: kind, color: color, size: 28 }) }), _jsx(Text, { style: { color: c.foreground, fontSize: 13 }, children: label })] }, kind);
+                            })] }), !!attachmentChoices?.some(item => library[item.kind]) && _jsx(AttachmentStrip, { label: "Recent attachments", height: 116, recent: true, children: attachmentChoices.filter(item => library[item.kind] && (!attachmentFilter || item.kind === attachmentFilter)).map(item => _jsxs(View, { style: { width: 112, height: 112, borderRadius: 10, overflow: 'hidden', backgroundColor: c.incoming, borderWidth: 1, borderColor: c.secondary + '20' }, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Choose ${item.name}`, disabled: busy, onPress: () => void pick(item.kind, undefined, item.id), style: { width: '100%', height: '100%' }, children: [item.thumbnailUri ? _jsx(Image, { source: { uri: item.thumbnailUri }, accessibilityLabel: item.name, resizeMode: "cover", style: { width: '100%', height: '100%' } }) : _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 9, gap: 8 }, children: [_jsx(MessageIcon, { name: item.kind, color: c.accent, size: 30 }), _jsx(Text, { numberOfLines: 2, style: { color: c.incomingText, fontSize: 11, textAlign: 'center' }, children: item.name })] }), item.kind === 'video' && _jsxs(View, { style: { position: 'absolute', bottom: 0, left: 0, right: 0, backgroundColor: '#0008', flexDirection: 'row', alignItems: 'center', gap: 5, padding: 6 }, children: [_jsx(MessageIcon, { name: "play", size: 13, color: "#fff" }), _jsx(Text, { style: { color: '#fff', fontSize: 11 }, children: duration(item.durationMs) })] })] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Preview ${item.name}`, disabled: busy, onPress: () => void pick(item.kind, undefined, item.id, 'preview'), style: { position: 'absolute', top: 0, right: 0, width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(View, { style: { width: 30, height: 30, borderRadius: 15, backgroundColor: '#111b', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "search", size: 18, color: "#fff" }) }) })] }, item.id)) }), attachmentFilter && !attachmentChoices?.some(item => library[item.kind] && item.kind === attachmentFilter) && _jsxs(Text, { style: { color: c.secondary, paddingVertical: 16, textAlign: 'center' }, children: ["No recent ", attachmentFilter === 'image' ? 'photos' : attachmentFilter === 'video' ? 'videos' : 'files', "."] })] }), pollOpen && features?.poll && _jsx(PollComposer, { appearance: design, onSend: poll => submit({ kind: 'poll', poll }), onCancel: () => setPollOpen(false) }), error && (_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }))] }));
+}
+function Content() {
+    const { state, client, components, design, style } = useMessagingUI();
+    const Header = components?.Header ?? MessagingHeader, List = components?.List ?? MessagingList, Composer = components?.Composer ?? MessagingComposer;
+    return (_jsxs(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : undefined, style: [{ flex: 1, backgroundColor: design.colors.background }, style], children: [_jsx(Header, {}), _jsx(List, {}), state.error && (_jsx(Text, { accessibilityRole: "alert", style: { padding: 12, color: design.colors.foreground }, children: state.error })), state.pending.map((p) => (_jsxs(View, { style: { padding: 8, alignSelf: "flex-end" }, children: [_jsxs(Text, { style: { color: design.colors.foreground }, children: [p.content.text ?? "Attachment", " \u00B7", " ", p.status === "sending" ? "Sending…" : "Not sent"] }), p.status === "failed" && (_jsx(Pressable, { accessibilityRole: "button", onPress: () => void client.retry(p.clientMessageId).catch(() => { }), children: _jsx(Text, { style: { color: design.colors.accent, padding: 8 }, children: design.labels.retry }) }))] }, p.clientMessageId))), _jsx(Composer, {}, state.conversationId)] }));
+}
+/** Embed inside your app's safe area and navigation. No engine, push or global audio side effects. */
+export function MessagingScreen(props) {
+    return (_jsx(MessagingProvider, { ...props, children: _jsx(Content, {}) }));
+}

package/dist/media-controller.d.ts

@@ -0,0 +1,98 @@
+import { type MessageKind, type MessageMedia, type MessagingMessage, type MessagingSettings } from '@robono/messaging';
+export type MediaKind = Exclude<MessageKind, 'text' | 'poll'>;
+export interface LocalMessagingMedia extends Omit<MessageMedia, 'assetId'> {
+    uri: string;
+    /** Ephemeral authorized remote playback source. Never persist it in chat history. */
+    stream?: {
+        headers?: Record<string, string>;
+    };
+    resumeAtMs?: number;
+    autoPlay?: boolean;
+}
+export interface MediaTransferOptions {
+    signal: AbortSignal;
+    onProgress: (fraction: number) => void;
+}
+export interface MessagingMediaStorage {
+    /** Keep uploadId stable on retry. Verify bytes/type/duration on the backend before returning. */
+    upload(file: LocalMessagingMedia, context: MediaTransferOptions & {
+        uploadId: string;
+        conversationId: string;
+        kind: MediaKind;
+    }): Promise<MessageMedia>;
+    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>;
+    /** Revoke/delete an unfinished upload. Must be idempotent and safe after an interrupted response. */
+    discard(uploadId: string): Promise<void>;
+}
+export interface MessagingMediaDevice {
+    pick(kind: Exclude<MediaKind, 'voice'>, settings: MessagingSettings, signal: AbortSignal, source?: "camera" | "call-video"): Promise<LocalMessagingMedia | null>;
+    startRecording(maxDurationMs: number, signal: AbortSignal): Promise<void>;
+    recordingStatus(): {
+        durationMs: number;
+        recording: boolean;
+        limitReached?: boolean;
+        level?: number;
+    };
+    stopRecording(): Promise<LocalMessagingMedia | null>;
+    /** Delete only cache copies owned by this adapter, never originals in the user's library. */
+    remove(file: LocalMessagingMedia): Promise<void>;
+}
+export interface MessagingMediaState {
+    phase: 'idle' | 'choosing' | 'preparing' | 'recording' | 'review' | 'uploading' | 'opening' | 'viewing' | 'failed';
+    kind: MediaKind;
+    file: LocalMessagingMedia | null;
+    elapsedMs: number;
+    maxDurationMs: number;
+    progress: number;
+    error: string | null;
+    retryUpload: boolean;
+    waveform?: number[];
+}
+/** Single attachment lifecycle shared by iOS and Android. Cancellation invalidates every late result. */
+export declare class MessagingMediaController {
+    private options;
+    private state;
+    private listeners;
+    private abort;
+    private intent;
+    private generation;
+    private resolve;
+    private timer;
+    private stopping;
+    private settings;
+    private conversationId;
+    private uploadId;
+    private disposed;
+    private closing;
+    private stageRecording;
+    private openedMessage;
+    private prepared;
+    getPrepared: (assetId: string) => LocalMessagingMedia | undefined;
+    releasePrepared(assetId: string): Promise<void>;
+    constructor(options: {
+        device: MessagingMediaDevice;
+        storage: MessagingMediaStorage;
+        createId: () => string;
+        getSettings: () => MessagingSettings;
+        getConversationId: () => string;
+    });
+    getSnapshot: () => MessagingMediaState;
+    subscribe: (f: () => void) => () => void;
+    private update;
+    private isCurrent;
+    pick(kind: MediaKind, source?: "camera" | "call-video", selectionIntent?: "preview" | "send" | "attach"): Promise<MessageMedia | null>;
+    private check;
+    finishRecording(interrupted?: boolean): Promise<void>;
+    send(): Promise<void>;
+    open(message: MessagingMessage): Promise<void>;
+    /** Recover a failed/expired native stream once through fresh authorized download. */
+    fallbackStream(uri: string, positionMs: number, autoPlay: boolean): Promise<void>;
+    private openMedia;
+    cancel(): Promise<void>;
+    private closeCurrent;
+    interrupt(): Promise<void>;
+    dispose(): Promise<void>;
+    private error;
+}