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

package/dist/media-controller.js

@@ -0,0 +1,257 @@
+import { validateMessageMedia } from '@robono/messaging';
+/** Single attachment lifecycle shared by iOS and Android. Cancellation invalidates every late result. */
+export class MessagingMediaController {
+    options;
+    state = { phase: 'idle', kind: 'voice', file: null, elapsedMs: 0, maxDurationMs: 60000, progress: 0, error: null, retryUpload: false };
+    listeners = new Set();
+    abort = null;
+    intent = 0;
+    generation = 0;
+    resolve = null;
+    timer;
+    stopping = null;
+    settings = null;
+    conversationId = '';
+    uploadId = '';
+    disposed = false;
+    closing = null;
+    stageRecording = false;
+    openedMessage = null;
+    prepared = new Map();
+    getPrepared = (assetId) => this.prepared.get(assetId);
+    async releasePrepared(assetId) { const file = this.prepared.get(assetId); this.prepared.delete(assetId); if (file)
+        await this.options.device.remove(file).catch(() => { }); }
+    constructor(options) {
+        this.options = options;
+    }
+    getSnapshot = () => this.state;
+    subscribe = (f) => { this.listeners.add(f); return () => { this.listeners.delete(f); }; };
+    update(p) { this.state = { ...this.state, ...p }; this.listeners.forEach(f => f()); }
+    isCurrent(g) { return !this.disposed && this.generation === g && !this.abort?.signal.aborted; }
+    async pick(kind, source, selectionIntent = "preview") {
+        const intent = ++this.intent;
+        await this.closeCurrent();
+        if (intent !== this.intent)
+            return null;
+        if (this.disposed)
+            throw Error('Messaging media is closed.');
+        const settings = this.options.getSettings();
+        if (!settings.enabled || !settings.features[kind])
+            throw Error('This attachment type is unavailable.');
+        if (source === 'camera' && (!['image', 'video'].includes(kind) || !settings.appearance.showCamera))
+            throw Error('Camera capture is unavailable.');
+        if (source === 'call-video' && (kind !== 'video' || !settings.enabled || !settings.features.video || settings.unansweredCalls?.video !== 'video'))
+            throw Error('Video messages after a call are unavailable.');
+        this.stageRecording = kind === 'voice' && selectionIntent === 'attach';
+        this.settings = settings;
+        this.conversationId = this.options.getConversationId();
+        this.uploadId = this.options.createId();
+        const g = ++this.generation;
+        const abort = this.abort = new AbortController();
+        const result = new Promise(resolve => { this.resolve = resolve; });
+        const maximum = (settings.voice?.maxDurationSeconds ?? 60) * 1000;
+        this.update({ phase: kind === 'voice' ? 'preparing' : 'choosing', kind, file: null, error: null, progress: 0, retryUpload: false, elapsedMs: 0, waveform: [], maxDurationMs: maximum });
+        void (async () => {
+            try {
+                if (kind === 'voice') {
+                    await this.options.device.startRecording(maximum, abort.signal);
+                    if (!this.isCurrent(g))
+                        return;
+                    this.update({ phase: 'recording' });
+                    this.timer = setInterval(() => {
+                        if (!this.isCurrent(g) || this.state.phase !== 'recording')
+                            return;
+                        try {
+                            const status = this.options.device.recordingStatus();
+                            this.update({ elapsedMs: status.durationMs, ...(typeof status.level === 'number' && Number.isFinite(status.level) ? { waveform: [...(this.state.waveform ?? []), Math.max(0, Math.min(1, status.level))].slice(-56) } : {}) });
+                            if (status.durationMs >= maximum || !status.recording)
+                                void this.finishRecording(!status.recording && status.durationMs < maximum && !status.limitReached);
+                        }
+                        catch {
+                            void this.finishRecording(true);
+                        }
+                    }, 100);
+                }
+                else {
+                    const file = await this.options.device.pick(kind, settings, abort.signal, source);
+                    if (!this.isCurrent(g)) {
+                        if (file)
+                            await this.options.device.remove(file);
+                        return;
+                    }
+                    if (!file) {
+                        await this.cancel();
+                        return;
+                    }
+                    this.update({ file, ...(source === 'camera' ? { kind: file.mimeType.startsWith('video/') ? 'video' : 'image' } : {}) });
+                    this.check(file);
+                    this.update({ phase: 'review' });
+                    if (selectionIntent === 'send' && !source)
+                        await this.send();
+                }
+            }
+            catch (e) {
+                if (this.isCurrent(g))
+                    this.update({ phase: 'failed', error: this.error(e) });
+            }
+        })();
+        return result;
+    }
+    check(file) {
+        validateMessageMedia(this.state.kind, { ...file, assetId: 'pending-upload' }, this.options.getSettings());
+        if (this.options.getConversationId() !== this.conversationId)
+            throw Error('The conversation changed. Choose the attachment again.');
+    }
+    async finishRecording(interrupted = false) {
+        if (this.stopping)
+            return this.stopping;
+        if (this.state.phase !== 'recording')
+            return;
+        clearInterval(this.timer);
+        this.timer = undefined;
+        const g = this.generation;
+        this.update({ phase: 'preparing' });
+        const work = (async () => {
+            try {
+                const file = await this.options.device.stopRecording();
+                if (!this.isCurrent(g)) {
+                    if (file)
+                        await this.options.device.remove(file);
+                    return;
+                }
+                if (!file)
+                    throw Error('No recording was captured. Cancel and record again.');
+                this.update({ file, elapsedMs: file.durationMs ?? 0 });
+                this.check(file);
+                this.update({ phase: 'review', error: interrupted ? 'Recording stopped. Listen before sending.' : null });
+                if (this.stageRecording)
+                    await this.send();
+            }
+            catch (e) {
+                if (this.isCurrent(g))
+                    this.update({ phase: 'failed', error: this.error(e) });
+            }
+        })();
+        this.stopping = work;
+        try {
+            await work;
+        }
+        finally {
+            if (this.stopping === work)
+                this.stopping = null;
+        }
+    }
+    async send() {
+        if (!['review', 'failed'].includes(this.state.phase) || !this.state.file || !this.resolve)
+            return;
+        const file = this.state.file, g = this.generation, abort = this.abort, uploadId = this.uploadId;
+        let retryUpload = false;
+        try {
+            this.check(file);
+            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))
+                    this.update({ progress: Math.max(0, Math.min(1, f)) }); } });
+            retryUpload = false;
+            if (!this.isCurrent(g)) {
+                await this.options.storage.discard(uploadId);
+                return;
+            }
+            validateMessageMedia(this.state.kind, media, this.options.getSettings());
+            if (this.options.getConversationId() !== this.conversationId)
+                throw Error('The conversation changed. Choose the attachment again.');
+            const resolve = this.resolve;
+            this.resolve = null;
+            this.uploadId = '';
+            this.abort = null;
+            if (this.stageRecording)
+                this.prepared.set(media.assetId, file);
+            this.update({ phase: 'idle', file: null, error: null });
+            resolve?.(media);
+            if (!this.stageRecording)
+                await this.options.device.remove(file).catch(() => { });
+        }
+        catch (e) {
+            if (this.isCurrent(g))
+                this.update({ phase: 'failed', error: this.error(e), retryUpload });
+        }
+    }
+    open(message) { return this.openMedia(message); }
+    /** 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)
+            return Promise.resolve();
+        return this.openMedia(this.openedMessage, { download: true, positionMs, autoPlay });
+    }
+    async openMedia(message, recovery) {
+        const intent = ++this.intent;
+        await this.closeCurrent();
+        if (intent !== this.intent)
+            return;
+        if (this.disposed)
+            throw Error('Messaging media is closed.');
+        if (!message.media || message.kind === 'text' || message.kind === 'poll')
+            return;
+        const g = ++this.generation, abort = this.abort = new AbortController();
+        this.conversationId = message.conversationId;
+        this.openedMessage = message;
+        this.update({ phase: 'opening', kind: message.kind, file: null, error: null, progress: 0 });
+        try {
+            const context = { signal: abort.signal, onProgress: f => { if (this.isCurrent(g))
+                    this.update({ progress: Math.max(0, Math.min(1, f)) }); } };
+            const remote = !recovery?.download && ['voice', 'video'].includes(message.kind) ? await this.options.storage.stream?.(message, context) : null;
+            if (!this.isCurrent(g))
+                return;
+            const file = remote ?? await this.options.storage.download(message, context);
+            if (!this.isCurrent(g) || this.options.getConversationId() !== message.conversationId) {
+                await this.options.device.remove(file);
+                return;
+            }
+            this.update({ phase: 'viewing', file: recovery ? { ...file, resumeAtMs: Number.isFinite(recovery.positionMs) ? Math.max(0, Math.min(recovery.positionMs, file.durationMs ?? recovery.positionMs)) : 0, autoPlay: recovery.autoPlay } : file });
+        }
+        catch (e) {
+            if (this.isCurrent(g))
+                this.update({ phase: 'failed', error: this.error(e) });
+        }
+    }
+    cancel() { ++this.intent; return this.closeCurrent(); }
+    closeCurrent() {
+        if (this.closing)
+            return this.closing;
+        const wasRecording = ['recording', 'preparing'].includes(this.state.phase) && this.state.kind === 'voice';
+        const file = this.state.file, id = this.uploadId, resolve = this.resolve, stopping = this.stopping;
+        this.openedMessage = null;
+        ++this.generation;
+        this.abort?.abort();
+        this.abort = null;
+        this.resolve = null;
+        this.uploadId = '';
+        clearInterval(this.timer);
+        this.timer = undefined;
+        this.update({ phase: 'idle', file: null, error: null });
+        resolve?.(null);
+        const work = (async () => {
+            if (stopping)
+                await stopping;
+            else if (wasRecording) {
+                const recorded = await this.options.device.stopRecording().catch(() => null);
+                if (recorded)
+                    await this.options.device.remove(recorded).catch(() => { });
+            }
+            if (file)
+                await this.options.device.remove(file).catch(() => { });
+            if (id)
+                await this.options.storage.discard(id).catch(() => { });
+        })();
+        this.closing = work;
+        void work.finally(() => { if (this.closing === work)
+            this.closing = null; });
+        return work;
+    }
+    async interrupt() { if (this.state.phase === 'recording')
+        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(); }
+    error(e) { return e instanceof Error ? e.message : 'The attachment could not be opened. Try again.'; }
+}

package/dist/media-readiness.d.ts

@@ -0,0 +1,4 @@
+export type MediaReadyStage = 'image-loaded' | 'video-frame' | 'audio-playing';
+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-readiness.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+export const MediaReadiness = createContext(() => { });
+/** Internal recovery channel; URLs are matched in memory, never logged. */
+export const StreamRecovery = createContext(() => { });

package/dist/media-ui.d.ts

@@ -0,0 +1,51 @@
+import React, { type ReactNode } from 'react';
+import type { MessagingMessage } from '@robono/messaging';
+export interface VoiceBubbleProps {
+    message: MessagingMessage;
+    ink: string;
+    accent: string;
+    waveform?: number[];
+    footer?: ReactNode;
+    onOpen: () => void;
+    onLongPress?: () => void;
+}
+export interface PlaybackProps {
+    playing?: boolean;
+    loading?: boolean;
+    positionMs?: number;
+    durationMs?: number;
+    rate?: number;
+    error?: string;
+    onToggle: () => void;
+    onSeek?: (ms: number) => void;
+    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 & {
+    ink: string;
+    accent: string;
+    waveform?: number[];
+    footer?: ReactNode;
+    onLongPress?: () => void;
+}): React.JSX.Element;
+export declare function MediaPlaybackControls({ playing, loading, positionMs, durationMs, error, onToggle, onSeek }: PlaybackProps): React.JSX.Element;
+/** A full-size photo surface. The same tap-to-zoom, pinch and pan handling runs in the preview and native app. */
+export declare function ZoomablePhoto({ uri, label }: {
+    uri: string;
+    label?: string;
+}): React.JSX.Element;
+export declare function MediaViewer({ title, subtitle, kind, uri, fileName, byteSize, children, loading, error, onClose, onFileAction, reviewAction, onReview }: {
+    title: string;
+    subtitle?: string;
+    kind: 'image' | 'video' | 'document' | 'voice';
+    uri?: string;
+    fileName?: string;
+    byteSize?: number;
+    children?: ReactNode;
+    loading?: boolean;
+    error?: string;
+    onClose: () => void;
+    onFileAction?: () => void;
+    reviewAction?: string;
+    onReview?: () => void;
+}): React.JSX.Element;

package/dist/media-ui.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useContext, useState } 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 MediaPlaybackControls({ playing = false, loading = false, positionMs = 0, durationMs = 0, error, onToggle, onSeek }) {
+    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 })] });
+}
+/** 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' }) {
+    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 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 }); },
+    })).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." })] });
+}
+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 }) }) })] });
+}

package/dist/polls.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type MessagingAppearance, type MessagingMessage, type MessagePoll } from '@robono/messaging';
+/** Optional reusable poll content. Votes are submitted as a complete selection, not a toggle request. */
+export declare function PollMessage({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, background, foreground }: {
+    message: MessagingMessage;
+    userId: string;
+    ink: string;
+    accent: string;
+    enabled: boolean;
+    onVote: (options: number[]) => Promise<void>;
+    onClose: () => Promise<void>;
+    resolveVoterName?: (userId: string) => string;
+    background?: string;
+    foreground?: string;
+}): React.JSX.Element | null;
+export declare function PollComposer({ appearance, onSend, onCancel, retrySafe }: {
+    retrySafe?: boolean;
+    appearance: MessagingAppearance;
+    onSend: (poll: MessagePoll) => Promise<void>;
+    onCancel: () => void;
+}): React.JSX.Element;

package/dist/polls.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ActivityIndicator, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Switch, Text, TextInput, View } from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { validatePoll } from '@robono/messaging';
+/** Optional reusable poll content. Votes are submitted as a complete selection, not a toggle request. */
+export function PollMessage({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, background = '#101010', foreground = '#fff' }) {
+    const [busy, setBusy] = useState(false), [error, setError] = useState(''), [showVotes, setShowVotes] = useState(false);
+    const poll = message.poll;
+    if (!poll)
+        return null;
+    const votes = message.pollState?.votes ?? [], selected = votes.find(v => v.userId === userId)?.options ?? [], closed = !!message.pollState?.closed;
+    async function act(work) { if (busy)
+        return; setBusy(true); setError(''); try {
+        await work();
+    }
+    catch {
+        setError('The poll could not be updated. Try again.');
+    }
+    finally {
+        setBusy(false);
+    } }
+    return _jsxs(View, { style: { width: 270, maxWidth: '100%', gap: 2, padding: 0 }, children: [_jsx(Text, { style: { fontSize: 17, lineHeight: 23, fontWeight: '600', color: ink }, children: poll.question }), _jsx(Text, { style: { fontSize: 12, color: ink, opacity: .7 }, children: closed ? 'Poll closed' : poll.multiple ? 'Choose one or more' : 'Choose one' }), poll.options.map((label, index) => {
+                const count = votes.filter(v => v.options.includes(index)).length, checked = selected.includes(index);
+                return _jsxs(Pressable, { accessibilityRole: poll.multiple ? 'checkbox' : 'radio', accessibilityLabel: `${label}, ${count} ${count === 1 ? 'vote' : 'votes'}`, "aria-checked": checked, accessibilityState: { checked, disabled: !enabled || closed || busy }, disabled: !enabled || closed || busy, onPress: () => void act(() => onVote(checked ? selected.filter(x => x !== index) : poll.multiple ? [...selected, index] : [index])), style: { minHeight: 44, paddingVertical: 5, gap: 3 }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 10, alignItems: 'center' }, children: [_jsx(View, { style: { width: 20, height: 20, borderRadius: poll.multiple ? 4 : 10, borderWidth: 2, borderColor: checked ? accent : ink, alignItems: 'center', justifyContent: 'center' }, children: checked && _jsx(View, { style: { width: 10, height: 10, borderRadius: poll.multiple ? 2 : 5, backgroundColor: accent } }) }), _jsx(Text, { style: { flex: 1, color: ink, fontSize: 16 }, children: label }), _jsx(Text, { style: { color: ink, fontSize: 13 }, children: count })] }), _jsx(View, { pointerEvents: "none", style: { height: 3, marginLeft: 30, backgroundColor: ink + '20', borderRadius: 2, overflow: 'hidden' }, children: _jsx(View, { style: { height: 3, width: `${votes.length ? count / votes.length * 100 : 0}%`, backgroundColor: accent } }) })] }, index);
+            }), _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: "View votes", onPress: () => setShowVotes(true), style: { minHeight: 44, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 }, children: [_jsx(Text, { style: { color: ink, fontSize: 14 }, children: "View votes" }), _jsxs(Text, { style: { color: ink, opacity: .7, fontSize: 12 }, children: [votes.length, " ", votes.length === 1 ? 'vote' : 'votes'] })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink }, children: error }), showVotes && _jsx(Modal, { visible: true, animationType: "slide", onRequestClose: () => setShowVotes(false), children: _jsx(SafeAreaProvider, { children: _jsxs(SafeAreaView, { style: { flex: 1, backgroundColor: background }, children: [_jsxs(View, { style: { height: 56, paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center', gap: 16 }, children: [_jsx(Text, { accessibilityRole: "header", style: { color: foreground, fontSize: 22, fontWeight: '600', flex: 1 }, children: "Votes" }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close votes", onPress: () => setShowVotes(false), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 17 }, children: "Done" }) })] }), _jsxs(ScrollView, { contentContainerStyle: { padding: 16, gap: 14 }, children: [_jsx(Text, { style: { fontSize: 20, lineHeight: 27, fontWeight: '600', color: foreground }, children: poll.question }), poll.options.map((option, index) => { const people = votes.filter(v => v.options.includes(index)); return _jsxs(View, { style: { gap: 8 }, children: [_jsx(Text, { style: { color: foreground, fontSize: 17, fontWeight: '600' }, children: option }), people.length ? people.map(v => _jsx(Text, { style: { color: foreground, fontSize: 16, paddingVertical: 3 }, children: v.userId === userId ? 'You' : resolveVoterName?.(v.userId) || 'Chat member' }, v.userId)) : _jsx(Text, { style: { color: foreground, opacity: .6, fontSize: 15 }, children: "No votes yet" })] }, index); }), message.senderId === userId && !closed && enabled && _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => void act(onClose), style: { minHeight: 48, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 17 }, children: "End poll" }) }), closed && _jsx(Text, { style: { color: foreground, opacity: .7 }, children: "Poll closed" }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: foreground }, children: error })] })] }) }) })] });
+}
+export function PollComposer({ appearance, onSend, onCancel, retrySafe = false }) {
+    const [question, setQuestion] = useState(''), [options, setOptions] = useState(['', '']), [multiple, setMultiple] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState(''), [submitted, setSubmitted] = useState(false);
+    const c = appearance.colors;
+    async function send() { if (busy || submitted)
+        return; let poll; try {
+        poll = validatePoll({ question, options, multiple });
+    }
+    catch (e) {
+        setError(e.message);
+        return;
+    } setBusy(true); setSubmitted(true); try {
+        await onSend(poll);
+        onCancel();
+    }
+    catch {
+        if (retrySafe)
+            setSubmitted(false);
+        setError(retrySafe ? 'The poll was not sent. Try again.' : 'The poll was not sent. Check the conversation for a retry.');
+    }
+    finally {
+        setBusy(false);
+    } }
+    const inputStyle = { fontSize: 17, color: c.foreground, minHeight: 48, borderBottomWidth: 1, borderBottomColor: c.secondary + '40', paddingVertical: 12 };
+    const ready = question.trim().length > 0 && options.filter(o => o.trim()).length >= 2;
+    return _jsx(Modal, { visible: true, animationType: "slide", onRequestClose: () => { if (!busy)
+            onCancel(); }, children: _jsx(SafeAreaProvider, { children: _jsxs(SafeAreaView, { style: { flex: 1, backgroundColor: c.background }, children: [_jsxs(View, { style: { height: 56, paddingHorizontal: 16, flexDirection: 'row', alignItems: 'center', gap: 16 }, children: [_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: onCancel, style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Cancel" }) }), _jsx(Text, { accessibilityRole: "header", style: { flex: 1, fontSize: 20, fontWeight: '600', color: c.foreground }, children: "New poll" }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Send poll", disabled: busy || submitted || !ready, onPress: () => void send(), style: { minHeight: 44, justifyContent: 'center', opacity: ready ? 1 : .4 }, children: busy ? _jsx(ActivityIndicator, { color: c.accent }) : _jsx(Text, { style: { color: c.accent, fontSize: 17, fontWeight: '600' }, children: "Send" }) })] }), _jsx(KeyboardAvoidingView, { style: { flex: 1 }, behavior: Platform.OS === 'ios' ? 'padding' : 'height', children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", keyboardDismissMode: "on-drag", contentContainerStyle: { padding: 16, paddingBottom: 20, gap: 4 }, children: [_jsx(Text, { style: { color: c.secondary, fontSize: 14, marginTop: 12 }, children: "Question" }), _jsx(TextInput, { accessibilityLabel: "Poll question", placeholder: "Ask a question", placeholderTextColor: c.secondary, maxLength: 300, multiline: true, value: question, onChangeText: setQuestion, editable: !busy, style: inputStyle }), _jsx(Text, { style: { color: c.secondary, fontSize: 14, marginTop: 16 }, children: "Answers" }), options.map((option, i) => _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsx(TextInput, { accessibilityLabel: `Option ${i + 1}`, placeholder: "Add an option", placeholderTextColor: c.secondary, maxLength: 100, value: option, onChangeText: v => setOptions(items => items.map((x, n) => n === i ? v : x)), editable: !busy, style: { ...inputStyle, flex: 1 } }), options.length > 2 && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Remove option ${i + 1}`, disabled: busy, onPress: () => setOptions(items => items.filter((_, n) => n !== i)), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.secondary, fontSize: 26 }, children: "\u00D7" }) })] }, i)), options.length < 12 && _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setOptions(items => [...items, '']), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 16 }, children: "Add option" }) }), _jsxs(View, { style: { minHeight: 48, flexDirection: 'row', gap: 12, alignItems: 'center', marginTop: 8 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 16, flex: 1 }, children: "Allow multiple answers" }), _jsx(Switch, { accessibilityLabel: "Allow multiple answers", disabled: busy, value: multiple, onValueChange: setMultiple, trackColor: { true: c.accent } })] }), _jsx(Text, { style: { color: c.secondary, fontSize: 13, lineHeight: 19 }, children: "Everyone in the chat can see the votes." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error })] }) })] }) }) });
+}

package/dist/recent-media.d.ts

@@ -0,0 +1,21 @@
+import type { MessagingMessage } from '@robono/messaging';
+import type { LocalMessagingMedia, MessagingMediaStorage } from './media-controller.js';
+/** Small, short-lived conversation cache. Every original is obtained through the
+ * authenticated storage adapter. Viewers receive their own disposable copy. */
+export declare class RecentMessagingMedia {
+    private source;
+    private files;
+    private now;
+    private entries;
+    private running;
+    constructor(source: MessagingMediaStorage, files: {
+        copy: (file: LocalMessagingMedia) => Promise<LocalMessagingMedia>;
+        remove: (file: LocalMessagingMedia) => Promise<void>;
+    }, now?: () => number);
+    readonly storage: MessagingMediaStorage;
+    sync(messages: MessagingMessage[]): void;
+    clear(): void;
+    private drop;
+    private pump;
+    private start;
+}

package/dist/recent-media.js

@@ -0,0 +1,122 @@
+const key = (m) => JSON.stringify([m.conversationId, m.id, m.media]);
+/** Small, short-lived conversation cache. Every original is obtained through the
+ * authenticated storage adapter. Viewers receive their own disposable copy. */
+export class RecentMessagingMedia {
+    source;
+    files;
+    now;
+    entries = new Map();
+    running = 0;
+    constructor(source, files, now = Date.now) {
+        this.source = source;
+        this.files = files;
+        this.now = now;
+    }
+    storage = {
+        stream: (message, context) => this.source.stream?.(message, context) ?? Promise.resolve(null),
+        upload: (file, context) => this.source.upload(file, context), discard: id => this.source.discard(id),
+        download: async (message, context) => {
+            const id = key(message), entry = this.entries.get(id);
+            if (!entry)
+                return this.source.download(message, context);
+            if (context.signal.aborted)
+                throw Error('Cancelled.');
+            if (entry.file && entry.expires <= this.now()) {
+                this.drop(id, entry);
+                return this.source.download(message, context);
+            }
+            let file;
+            try {
+                file = await this.start(id, entry);
+            }
+            catch {
+                if (context.signal.aborted || this.entries.get(id) !== entry)
+                    throw Error('Cancelled.');
+                // A failed speculative transfer must not make the user's explicit retry fail.
+                this.drop(id, entry);
+                return this.source.download(message, context);
+            }
+            if (context.signal.aborted || this.entries.get(id) !== entry)
+                throw Error('Cancelled.');
+            const copy = await this.files.copy(file);
+            if (context.signal.aborted || this.entries.get(id) !== entry) {
+                await this.files.remove(copy);
+                throw Error('Cancelled.');
+            }
+            context.onProgress(1);
+            return copy;
+        }
+    };
+    sync(messages) {
+        // At most six recent photos/voice clips/small videos, 2 MiB each / 6 MiB total.
+        // Large videos and documents remain tap-to-download. Never preload all history.
+        const wanted = new Map();
+        let bytes = 0;
+        for (const m of [...messages].reverse()) {
+            if (wanted.size >= 6)
+                break;
+            const size = m.media?.byteSize;
+            if (this.source.stream && ['voice', 'video'].includes(m.kind))
+                continue;
+            if (m.deleted || !['image', 'voice', 'video'].includes(m.kind) || !size || size > 2 * 1048576 || bytes + size > 6 * 1048576)
+                continue;
+            wanted.set(key(m), m);
+            bytes += size;
+        }
+        for (const [id, entry] of this.entries)
+            if (!wanted.has(id))
+                this.drop(id, entry);
+        for (const [id, message] of wanted) {
+            const entry = this.entries.get(id);
+            if (!entry)
+                this.entries.set(id, { message, abort: new AbortController(), expires: 0, attempted: false });
+            // The client replaces message objects when it receives refreshed server history.
+            // A re-render with the same objects must not extend this access window.
+            else if (entry.message !== message) {
+                entry.message = message;
+                if (entry.file)
+                    entry.expires = this.now() + 60000;
+            }
+        }
+        this.pump();
+    }
+    clear() { for (const [id, entry] of this.entries)
+        this.drop(id, entry); }
+    drop(id, entry) {
+        if (this.entries.get(id) === entry)
+            this.entries.delete(id);
+        entry.abort.abort();
+        if (entry.file) {
+            void this.files.remove(entry.file).catch(() => { });
+            entry.file = undefined;
+        }
+    }
+    pump() {
+        for (const [id, entry] of this.entries) {
+            if (this.running >= 2)
+                break;
+            if (!entry.attempted) {
+                this.running++;
+                void this.start(id, entry).catch(() => { }).finally(() => { this.running--; this.pump(); });
+            }
+        }
+    }
+    start(id, entry) {
+        if (entry.file)
+            return Promise.resolve(entry.file);
+        if (entry.work)
+            return entry.work;
+        entry.attempted = true;
+        entry.work = (async () => {
+            const file = await this.source.download(entry.message, { signal: entry.abort.signal, onProgress: () => { } });
+            if (entry.abort.signal.aborted || this.entries.get(id) !== entry) {
+                await this.files.remove(file);
+                throw Error('Cancelled.');
+            }
+            entry.file = file;
+            entry.expires = this.now() + 60000;
+            return file;
+        })();
+        return entry.work;
+    }
+}

package/dist/safety.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { MessagingClient, MessagingAppearance, MessagingState } from '@robono/messaging';
+/** Uses the authenticated messaging client's durable safety operations, or the host can keep its own UI. */
+export declare function MessagingSafety({ client, state, appearance, name, messageId, onClose }: {
+    client: MessagingClient;
+    state: MessagingState;
+    appearance: MessagingAppearance;
+    name: string;
+    messageId?: string;
+    onClose: () => void;
+}): React.JSX.Element;