@robono/messaging-react-native 0.2.0 → 0.3.1

package/dist/media-controller.d.ts

@@ -29,6 +29,8 @@ export interface MessagingMediaStorage {
 }
 export interface MessagingMediaDevice {
     pick(kind: Exclude<MediaKind, 'voice'>, settings: MessagingSettings, signal: AbortSignal, source?: "camera" | "call-video"): Promise<LocalMessagingMedia | null>;
+    /** Ordered local selections. No upload or send occurs in the picker. */
+    pickMany?(kind: Exclude<MediaKind, 'voice'>, settings: MessagingSettings, signal: AbortSignal, maximum: number): Promise<LocalMessagingMedia[]>;
     startRecording(maxDurationMs: number, signal: AbortSignal): Promise<void>;
     recordingStatus(): {
         durationMs: number;
@@ -97,6 +99,7 @@ export declare class MessagingMediaController {
     private update;
     private isCurrent;
     pick(kind: MediaKind, source?: "camera" | "call-video", selectionIntent?: "preview" | "send" | "attach"): Promise<MessageMedia | null>;
+    pickMany(kind: Exclude<MediaKind, 'voice'>, maximum: number): Promise<MessageMedia[]>;
     private check;
     finishRecording(interrupted?: boolean): Promise<void>;
     send(): Promise<void>;

package/dist/media-controller.js

@@ -168,6 +168,45 @@ export class MessagingMediaController {
         })();
         return result;
     }
+    async pickMany(kind, maximum) {
+        if (!this.options.stageLocal || !this.options.device.pickMany) {
+            const one = await this.pick(kind, undefined, 'attach');
+            return one ? [one] : [];
+        }
+        const limit = Math.max(1, Math.min(10, Math.floor(maximum) || 1));
+        const intent = ++this.intent;
+        await this.closeCurrent();
+        if (intent !== this.intent)
+            return [];
+        if (this.disposed)
+            throw Error('Messaging media is closed.');
+        const settings = this.options.getSettings(), conversationId = this.options.getConversationId();
+        if (!settings.enabled || !settings.features[kind])
+            throw Error('This attachment type is unavailable.');
+        const g = ++this.generation, abort = this.abort = new AbortController();
+        let files = [];
+        this.update({ phase: 'choosing', kind, file: null, error: null, progress: 0, retryUpload: false });
+        try {
+            files = await this.options.device.pickMany(kind, settings, abort.signal, limit);
+            if (!this.isCurrent(g) || conversationId !== this.options.getConversationId())
+                return [];
+            if (files.length > limit)
+                throw Error(`Choose up to ${limit} attachments.`);
+            const media = files.map(file => ({ assetId: this.options.createId(), mimeType: file.mimeType, fileName: file.fileName, byteSize: file.byteSize, ...(file.durationMs === undefined ? {} : { durationMs: file.durationMs }) }));
+            // Validate the whole selection before accepting any part of it.
+            media.forEach(item => validateMessageMedia(kind, item, this.options.getSettings()));
+            media.forEach((item, index) => this.prepared.set(item.assetId, files[index]));
+            files = [];
+            return media;
+        }
+        finally {
+            await Promise.all(files.map(file => this.options.device.remove(file).catch(() => { })));
+            if (this.generation === g) {
+                this.abort = null;
+                this.update({ phase: 'idle', file: null, error: null });
+            }
+        }
+    }
     check(file) {
         validateMessageMedia(this.state.kind, { ...file, assetId: 'pending-upload' }, this.options.getSettings());
         if (this.options.getConversationId() !== this.conversationId)

package/dist/media-ui.d.ts

@@ -1,6 +1,10 @@
 import React, { type ReactNode } from 'react';
 import type { MessagingMessage } from '@robono/messaging';
 export interface VoiceBubbleProps {
+    mine?: boolean;
+    heard?: boolean;
+    onPlayed?: () => void;
+    background?: string;
     message: MessagingMessage;
     ink: string;
     accent: string;
@@ -22,25 +26,32 @@ export interface PlaybackProps {
     onRate?: () => void;
 }
 /** Same chat controls on web, iOS and Android. Audio engines supply state, not a different UI. */
-export declare function VoicePlayback({ ink, accent, waveform, showWaveform, footer, onLongPress, playing, loading, positionMs, durationMs, error, onToggle, onSeek }: PlaybackProps & {
+export declare function VoicePlayback({ ink, accent, waveform, showWaveform, footer, onLongPress, mine, heard, onPlayed, background, playing, loading, positionMs, durationMs, error, onToggle, onSeek }: PlaybackProps & {
     ink: string;
     accent: string;
     waveform?: number[];
     showWaveform?: boolean;
     footer?: ReactNode;
     onLongPress?: () => void;
+    mine?: boolean;
+    heard?: boolean;
+    onPlayed?: () => void;
+    background?: string;
 }): React.JSX.Element;
 export declare function MediaPlaybackControls({ playing, loading, positionMs, durationMs, error, onToggle, onSeek, onFullscreen, fullscreen }: PlaybackProps & {
     onFullscreen?: () => void;
     fullscreen?: boolean;
 }): React.JSX.Element;
 /** A full-size photo surface. The same tap-to-hide-controls, pinch and pan handling runs in the preview and native app. */
-export declare function ZoomablePhoto({ uri, label, onTap }: {
+export declare function ZoomablePhoto({ uri, label, onTap, expanded }: {
     uri: string;
     label?: string;
     onTap?: () => void;
+    expanded?: boolean;
 }): React.JSX.Element;
-export declare function MediaViewer({ title, subtitle, kind, uri, fileName, byteSize, children, loading, error, onClose, onFileAction, reviewAction, onReview, onDownload, onShare, onForward, onDelete, downloading }: {
+export declare function MediaViewer({ title, subtitle, kind, uri, fileName, byteSize, children, loading, error, onClose, onFileAction, reviewAction, onReview, onDownload, onShare, onForward, onDelete, downloading, expanded, onExpandedChange }: {
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
     onForward?: () => void;
     onDelete?: () => void;
     downloading?: boolean;

package/dist/media-ui.js

@@ -1,13 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { messengerVoiceWaveform } from './voice-waveform.js';
+import { createPhotoGesture } from './photo-gesture.js';
 import { useRef, useContext, useState, useEffect } from 'react';
 import { ActivityIndicator, Image, PanResponder, Platform, Pressable, Text, View } from 'react-native';
 import { MediaReadiness } from './media-readiness.js';
 import { MessageIcon, duration, fileSize } from './icons.js';
 /** Same chat controls on web, iOS and Android. Audio engines supply state, not a different UI. */
-export function VoicePlayback({ ink, accent, waveform, showWaveform = true, footer, onLongPress, playing = false, loading = false, positionMs = 0, durationMs = 0, error, onToggle, onSeek }) {
-    const width = useRef(1), progress = durationMs ? Math.max(0, Math.min(1, positionMs / durationMs)) : 0;
-    return _jsxs(View, { style: { width: 252, maxWidth: '100%' }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 9 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: playing ? 'Pause voice message' : 'Play voice message', accessibilityState: { busy: loading }, disabled: loading, onPress: onToggle, onLongPress: onLongPress, style: { width: 44, height: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center' }, children: loading ? _jsx(ActivityIndicator, { size: "small", color: ink }) : _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: ink + 'aa', size: 24 }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Pressable, { accessibilityRole: "adjustable", accessibilityLabel: showWaveform ? "Voice waveform" : "Voice position", accessibilityValue: { min: 0, max: Math.ceil(durationMs / 1000), now: Math.floor(positionMs / 1000) }, accessibilityActions: [{ name: 'increment', label: 'Forward five seconds' }, { name: 'decrement', label: 'Back five seconds' }], onAccessibilityAction: e => onSeek?.(Math.max(0, Math.min(durationMs, positionMs + (e.nativeEvent.actionName === 'increment' ? 5000 : -5000)))), onLayout: e => { width.current = e.nativeEvent.layout.width; }, onPress: e => { const bounds = Platform.OS === "web" ? e.currentTarget.getBoundingClientRect() : null; const x = bounds ? e.nativeEvent.clientX - bounds.left : e.nativeEvent.locationX; const total = bounds?.width ?? width.current; if (total > 0 && Number.isFinite(x))
-                                    onSeek?.(Math.max(0, Math.min(1, x / total)) * durationMs); }, style: { minHeight: 36, flexDirection: 'row', alignItems: 'center', gap: 2 }, children: showWaveform ? Array.from({ length: 36 }, (_, i) => { const sample = waveform?.[Math.floor(i * (waveform.length || 36) / 36)]; return _jsx(View, { pointerEvents: "none", style: { flex: 1, borderRadius: 2, backgroundColor: i / 36 < progress ? accent : ink, opacity: i / 36 < progress ? 1 : 0.34, height: 4 + (typeof sample === 'number' && Number.isFinite(sample) ? Math.min(1, Math.max(0, sample)) * 23 : 0) } }, i); }) : _jsx(View, { pointerEvents: "none", style: { flex: 1, height: 3, borderRadius: 2, backgroundColor: ink + '44' }, children: _jsx(View, { style: { height: 3, borderRadius: 2, backgroundColor: accent, width: `${progress * 100}%` } }) }) }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 6 }, children: [_jsx(Text, { style: { color: ink, fontSize: 11, opacity: 0.7, fontVariant: ['tabular-nums'] }, children: duration(playing || positionMs > 0 ? Math.max(0, durationMs - positionMs) : durationMs) }), footer] })] })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink, fontSize: 12, marginTop: 6 }, children: error })] });
+export function VoicePlayback({ ink, accent, waveform, showWaveform = true, footer, onLongPress, mine = false, heard = false, onPlayed, background, playing = false, loading = false, positionMs = 0, durationMs = 0, error, onToggle, onSeek }) {
+    const width = useRef(1), held = useRef(false), [played, setPlayed] = useState(false), progress = durationMs ? Math.max(0, Math.min(1, positionMs / durationMs)) : 0;
+    useEffect(() => { if (playing && positionMs > 0) {
+        setPlayed(true);
+        onPlayed?.();
+    } }, [playing, positionMs, onPlayed]);
+    const bars = showWaveform ? messengerVoiceWaveform(waveform, durationMs) : null, fill = mine ? ink : accent;
+    const hold = () => { held.current = true; onLongPress?.(); };
+    return _jsxs(View, { testID: "voice-message-player", style: { width: 220, maxWidth: '100%', minHeight: 44, borderRadius: 24, borderWidth: 1, borderColor: mine ? '#ffffff24' : '#2A2A2A', backgroundColor: background ?? (mine ? '#1F5F7A' : '#1D1D1D'), paddingLeft: 5, paddingRight: 8, paddingVertical: 3 }, children: [_jsxs(View, { style: { flexDirection: 'row', direction: 'ltr', alignItems: 'center', gap: 8 }, children: [_jsx(Pressable, { testID: "voice-play-control", accessibilityRole: "button", accessibilityLabel: playing ? 'Pause voice message' : 'Play voice message', accessibilityState: { busy: loading }, disabled: loading, hitSlop: 6, delayLongPress: 360, onPressIn: () => { held.current = false; }, onPress: () => { if (!held.current)
+                            onToggle(); }, onLongPress: hold, style: { width: 36, height: 36, borderRadius: 18, paddingLeft: playing ? 0 : 2, backgroundColor: mine ? '#ffffff29' : heard || played ? accent : '#2e9d63', alignItems: 'center', justifyContent: 'center' }, children: loading ? _jsx(ActivityIndicator, { size: "small", color: ink }) : _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: ink, size: 20 }) }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 7 }, children: [_jsx(Pressable, { onLongPress: hold, accessibilityRole: "adjustable", accessibilityLabel: showWaveform ? 'Voice waveform' : 'Voice position', accessibilityValue: { min: 0, max: Math.ceil(durationMs / 1000), now: Math.floor(positionMs / 1000) }, accessibilityActions: [{ name: 'increment', label: 'Forward five seconds' }, { name: 'decrement', label: 'Back five seconds' }], onAccessibilityAction: e => onSeek?.(Math.max(0, Math.min(durationMs, positionMs + (e.nativeEvent.actionName === 'increment' ? 5000 : -5000)))), onLayout: e => { width.current = e.nativeEvent.layout.width; }, onPressIn: () => { held.current = false; }, onPress: e => { if (held.current)
+                                    return; const bounds = Platform.OS === 'web' ? e.currentTarget.getBoundingClientRect() : null; const x = bounds ? e.nativeEvent.clientX - bounds.left : e.nativeEvent.locationX; const total = bounds?.width ?? width.current; if (total > 0 && Number.isFinite(x))
+                                    onSeek?.(Math.max(0, Math.min(1, x / total)) * durationMs); }, style: { height: bars ? 24 : 9, transform: [{ translateY: 4 }], flexDirection: 'row', alignItems: 'center', gap: 1 }, children: bars ? bars.map((sample, i) => _jsx(View, { pointerEvents: "none", style: { flex: 1, flexBasis: 0, borderRadius: 2, overflow: 'hidden', backgroundColor: ink + (mine ? '33' : '38'), height: 2 + sample * 18 }, children: _jsx(View, { style: { height: '100%', backgroundColor: fill, width: `${Math.max(0, Math.min(1, progress * bars.length - i)) * 100}%` } }) }, i)) : _jsx(View, { pointerEvents: "none", style: { flex: 1, height: 9, borderRadius: 5, overflow: 'hidden', backgroundColor: ink + '33' }, children: _jsx(View, { style: { height: 9, borderRadius: 5, backgroundColor: fill, width: `${progress * 100}%` } }) }) }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 4, paddingRight: footer ? 6 : 0 }, children: [_jsx(Text, { testID: "voice-duration", style: { color: mine ? ink : '#A3A3A3', fontSize: 11, fontWeight: '800', fontVariant: ['tabular-nums'] }, children: duration(playing || positionMs > 0 ? Math.max(0, durationMs - positionMs) : durationMs) }), footer && _jsx(View, { testID: "voice-message-actions", style: { flexShrink: 1, maxWidth: 112, alignItems: 'flex-end' }, children: footer })] })] })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink, fontSize: 12, marginTop: 6 }, children: error })] });
 }
 export function MediaPlaybackControls({ playing = false, loading = false, positionMs = 0, durationMs = 0, error, onToggle, onSeek, onFullscreen, fullscreen = false }) {
     const width = useRef(1);
@@ -15,32 +25,84 @@ export function MediaPlaybackControls({ playing = false, loading = false, positi
                             onSeek?.(Math.max(0, Math.min(1, x / total)) * durationMs); }, style: { flex: 1, height: 44, justifyContent: 'center' }, children: _jsx(View, { style: { height: 3, borderRadius: 2, backgroundColor: '#ffffff44' }, children: _jsx(View, { style: { height: 3, borderRadius: 2, backgroundColor: '#fff', width: `${durationMs ? Math.min(100, positionMs / durationMs * 100) : 0}%` } }) }) }), _jsx(Text, { style: { color: '#bbb', fontSize: 12, fontVariant: ['tabular-nums'] }, children: duration(durationMs) }), onFullscreen && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: fullscreen ? "Exit full screen" : "Full screen video", disabled: loading, onPress: onFullscreen, style: { width: 44, height: 44, alignItems: "center", justifyContent: "center" }, children: _jsx(MessageIcon, { name: fullscreen ? "close" : "open-in-new", color: "#fff", size: 22 }) })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#fff', fontSize: 13 }, children: error })] });
 }
 /** A full-size photo surface. The same tap-to-hide-controls, pinch and pan handling runs in the preview and native app. */
-export function ZoomablePhoto({ uri, label = 'Photo', onTap }) {
+export function ZoomablePhoto({ uri, label = 'Photo', onTap, expanded = false }) {
     const mediaReady = useContext(MediaReadiness);
-    const [zoom, setZoom] = useState(1), [offset, setOffset] = useState({ x: 0, y: 0 }), [error, setError] = useState(false);
-    const latest = useRef({ zoom, offset, width: 1, height: 1 });
-    latest.current = { ...latest.current, zoom, offset };
-    const start = useRef({ distance: 0, zoom: 1, x: 0, y: 0 });
+    const [transform, setTransform] = useState({ zoom: 1, x: 0, y: 0 }), [error, setError] = useState(false);
+    const [viewport, setViewport] = useState({ width: 1, height: 1 }), [imageSize, setImageSize] = useState({ width: 1, height: 1 });
+    const rotated = expanded && imageSize.width > imageSize.height && viewport.height > viewport.width;
+    const rotation = useRef(rotated);
+    rotation.current = rotated;
+    const photoPoints = (points) => rotation.current ? points.map(p => ({ x: p.y, y: -p.x })) : points;
+    const stageWidth = rotated ? viewport.height : viewport.width, stageHeight = rotated ? viewport.width : viewport.height;
+    const gesture = useRef(null);
+    if (!gesture.current)
+        gesture.current = createPhotoGesture(setTransform);
+    const controller = gesture.current, tap = useRef(onTap);
+    tap.current = onTap;
+    const points = (e) => photoPoints(Array.from(e.nativeEvent.touches ?? [], (p) => ({ x: p.pageX, y: p.pageY })));
     const pan = useRef(PanResponder.create({
-        onStartShouldSetPanResponder: e => e.nativeEvent.touches.length > 1,
-        onMoveShouldSetPanResponder: (e, g) => e.nativeEvent.touches.length > 1 || (latest.current.zoom > 1 && (Math.abs(g.dx) > 5 || Math.abs(g.dy) > 5)),
-        onPanResponderGrant: e => { const t = e.nativeEvent.touches; start.current = { distance: t.length > 1 ? Math.hypot(t[0].pageX - t[1].pageX, t[0].pageY - t[1].pageY) : 0, zoom: latest.current.zoom, x: latest.current.offset.x, y: latest.current.offset.y }; },
-        onPanResponderMove: (e, g) => { const t = e.nativeEvent.touches, s = latest.current; if (t.length > 1 && start.current.distance) {
-            setZoom(Math.max(1, Math.min(4, start.current.zoom * Math.hypot(t[0].pageX - t[1].pageX, t[0].pageY - t[1].pageY) / start.current.distance)));
-        }
-        else {
-            const x = s.width * (s.zoom - 1) / 2, y = s.height * (s.zoom - 1) / 2;
-            setOffset({ x: Math.max(-x, Math.min(x, start.current.x + g.dx)), y: Math.max(-y, Math.min(y, start.current.y + g.dy)) });
-        } },
-        onPanResponderRelease: () => { if (latest.current.zoom <= 1)
-            setOffset({ x: 0, y: 0 }); },
+        // Own the photo surface from the first finger. A Pressable must not steal the pinch.
+        onStartShouldSetPanResponder: () => true, onStartShouldSetPanResponderCapture: () => true,
+        onMoveShouldSetPanResponder: () => true, onMoveShouldSetPanResponderCapture: () => true,
+        onPanResponderTerminationRequest: () => false, onShouldBlockNativeResponder: () => true,
+        onPanResponderGrant: e => controller.begin(points(e)),
+        onPanResponderStart: e => { const current = points(e); if (current.length > 1)
+            controller.begin(current); },
+        onPanResponderMove: e => controller.move(points(e)),
+        onPanResponderEnd: e => { const remaining = points(e); if (remaining.length)
+            controller.end(remaining); },
+        onPanResponderRelease: e => { if (controller.end(points(e)))
+            tap.current?.(); },
+        onPanResponderTerminate: () => { controller.end([], true); },
     })).current;
-    useEffect(() => { setZoom(1); setOffset({ x: 0, y: 0 }); setError(false); }, [uri]);
-    const toggle = () => { setZoom(zoom === 1 ? 2 : 1); setOffset({ x: 0, y: 0 }); };
-    return _jsxs(View, { style: { flex: 1, minHeight: 0, overflow: 'hidden' }, onLayout: e => { latest.current = { ...latest.current, width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height }; }, children: [_jsx(Pressable, { ...pan.panHandlers, accessibilityRole: "button", accessibilityLabel: "Toggle photo controls", onPress: onTap, style: { flex: 1, overflow: 'hidden' }, children: _jsx(Image, { accessibilityLabel: label, source: { uri }, resizeMode: "contain", onLoad: () => mediaReady('image-loaded', uri), onError: () => setError(true), style: { width: '100%', height: '100%', transform: [{ translateX: offset.x }, { translateY: offset.y }, { scale: zoom }] } }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: zoom === 1 ? 'Zoom in' : 'Zoom out', onPress: toggle, style: { position: 'absolute', right: 16, bottom: 16, width: 44, height: 44, borderRadius: 22, backgroundColor: '#222a', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "zoom", color: "#fff" }) }), error && _jsx(Text, { accessibilityRole: "alert", style: { position: 'absolute', top: '50%', alignSelf: 'center', color: '#fff' }, children: "This photo could not be opened." })] });
+    const webRef = useRef(null);
+    useEffect(() => {
+        const element = webRef.current;
+        if (Platform.OS !== 'web' || !element)
+            return;
+        const active = new Map();
+        const down = (e) => { if (e.button !== 0)
+            return; e.preventDefault(); active.set(e.pointerId, { x: e.clientX, y: e.clientY }); element.setPointerCapture(e.pointerId); controller.begin(photoPoints([...active.values()])); };
+        const move = (e) => { if (!active.has(e.pointerId))
+            return; e.preventDefault(); active.set(e.pointerId, { x: e.clientX, y: e.clientY }); controller.move(photoPoints([...active.values()])); };
+        const end = (e) => { if (!active.delete(e.pointerId))
+            return; e.preventDefault(); if (controller.end(photoPoints([...active.values()]), e.type !== 'pointerup'))
+            tap.current?.(); if (element.hasPointerCapture(e.pointerId))
+            element.releasePointerCapture(e.pointerId); };
+        const wheel = (e) => { if (!e.ctrlKey)
+            return; e.preventDefault(); controller.zoom(controller.value.zoom * Math.exp(-e.deltaY * .01)); };
+        const key = (e) => { if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            tap.current?.();
+        }
+        else if (e.key === '+' || e.key === '=' || e.key === '-') {
+            e.preventDefault();
+            controller.zoom(controller.value.zoom * (e.key === '-' ? .8 : 1.25));
+        } };
+        const prevent = (e) => e.preventDefault();
+        element.addEventListener('pointerdown', down);
+        element.addEventListener('pointermove', move);
+        element.addEventListener('pointerup', end);
+        element.addEventListener('pointercancel', end);
+        element.addEventListener('lostpointercapture', end);
+        element.addEventListener('wheel', wheel, { passive: false });
+        element.addEventListener('keydown', key);
+        element.addEventListener('dragstart', prevent);
+        return () => { active.clear(); controller.end([], true); element.removeEventListener('pointerdown', down); element.removeEventListener('pointermove', move); element.removeEventListener('pointerup', end); element.removeEventListener('pointercancel', end); element.removeEventListener('lostpointercapture', end); element.removeEventListener('wheel', wheel); element.removeEventListener('keydown', key); element.removeEventListener('dragstart', prevent); };
+    }, [controller, uri]);
+    useEffect(() => { let active = true; controller.reset(); setError(false); Image.getSize(uri, (width, height) => { if (active) {
+        controller.image(width, height);
+        setImageSize({ width, height });
+    } }, () => { }); return () => { active = false; }; }, [uri, controller]);
+    useEffect(() => { controller.reset(); }, [expanded, controller]);
+    useEffect(() => { controller.layout(stageWidth, stageHeight); }, [controller, stageWidth, stageHeight]);
+    return _jsxs(View, { style: { flex: 1, minHeight: 0, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }, onLayout: e => setViewport(e.nativeEvent.layout), children: [_jsx(View, { testID: "photo-image-stage", style: { width: stageWidth, height: stageHeight, transform: rotated ? [{ rotate: '90deg' }] : [] }, children: _jsx(View, { ref: webRef, ...(Platform.OS === 'web' ? {} : pan.panHandlers), testID: "photo-gesture-surface", accessible: true, accessibilityRole: "button", accessibilityLabel: "Toggle photo controls", onAccessibilityTap: () => tap.current?.(), ...(Platform.OS === 'web' ? { tabIndex: 0 } : {}), style: { flex: 1, overflow: 'hidden', ...(Platform.OS === 'web' ? { touchAction: 'none', userSelect: 'none' } : {}) }, children: _jsx(Image, { testID: "photo-zoom-image", accessibilityLabel: label, source: { uri }, resizeMode: "contain", onLoad: () => mediaReady('image-loaded', uri), onError: () => setError(true), style: { width: '100%', height: '100%', transform: [{ translateX: transform.x }, { translateY: transform.y }, { scale: transform.zoom }] } }) }) }), error && _jsx(Text, { accessibilityRole: "alert", style: { position: 'absolute', top: '50%', alignSelf: 'center', color: '#fff' }, children: "This photo could not be opened." })] });
 }
-export function MediaViewer({ title, subtitle, kind, uri, fileName, byteSize, children, loading, error, onClose, onFileAction, reviewAction, onReview, onDownload, onShare, onForward, onDelete, downloading = false }) {
-    const [controls, setControls] = useState(true);
-    useEffect(() => setControls(true), [uri]);
-    return _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1, minHeight: 0, backgroundColor: '#0c0e10' }, children: [controls && _jsxs(View, { testID: "media-action-toolbar", style: { position: 'absolute', top: 8, left: 12, right: 12, zIndex: 3, minHeight: 52, borderRadius: 26, borderWidth: 1, borderColor: '#ffffff1f', backgroundColor: '#121212eb', flexDirection: 'row', alignItems: 'center', paddingLeft: 8, paddingRight: 4, gap: 2 }, children: [[[onDownload, 'Download', 'download', downloading, false], [onDelete, 'Delete', 'trash', false, true], [onForward, 'Forward', 'forward', false, false], [onShare, 'Share', 'share', false, false]].filter(([action]) => !!action).map(([action, label, icon, busy, destructive]) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${label} media`, accessibilityState: { busy }, disabled: busy, onPress: action, style: { flex: 1, minWidth: 44, minHeight: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center', gap: 1, paddingHorizontal: 2 }, children: [busy ? _jsx(ActivityIndicator, { size: "small", color: "#e8843a" }) : _jsx(MessageIcon, { name: icon, size: 20, color: destructive ? '#f28b82' : '#fff' }), _jsx(Text, { numberOfLines: 1, style: { color: destructive ? '#f28b82' : '#fff', fontSize: 10, fontWeight: '800' }, children: label })] }, label)), _jsx(View, { style: { flex: !onDownload && !onDelete && !onForward && !onShare ? 1 : 0, minWidth: 0 }, children: !onDownload && !onDelete && !onForward && !onShare && _jsx(Text, { numberOfLines: 1, style: { color: '#fff', fontSize: 14, paddingLeft: 8 }, children: title }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close media", onPress: onClose, style: { width: 44, height: 44, borderRadius: 22, backgroundColor: '#ffffff14', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", size: 24, color: "#fff" }) })] }), loading ? _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 }, children: [_jsx(ActivityIndicator, { color: "#fff" }), _jsx(Text, { style: { color: '#c1c7ce' }, children: "Opening\u2026" })] }) : kind === 'image' && uri ? _jsx(ZoomablePhoto, { uri: uri, label: fileName, onTap: () => setControls(value => !value) }) : kind === 'document' ? _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32, gap: 20 }, children: [_jsx(View, { style: { width: 88, height: 106, borderRadius: 16, backgroundColor: '#ffffff12', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "document", color: "#fff", size: 40 }) }), _jsx(Text, { style: { color: '#fff', fontSize: 19, fontWeight: '600', textAlign: 'center' }, children: fileName }), _jsxs(Text, { style: { color: '#9ba3ad', fontSize: 13 }, children: [fileName?.split('.').pop()?.toUpperCase(), " \u00B7 ", fileSize(byteSize)] }), onFileAction && _jsx(Pressable, { accessibilityRole: "button", onPress: onFileAction, style: { borderRadius: 24, paddingHorizontal: 28, paddingVertical: 14, backgroundColor: '#fff' }, children: _jsx(Text, { style: { color: '#15191e', fontWeight: '600' }, children: "Open file" }) })] }) : children, !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#fff', padding: 16 }, children: error }), reviewAction && onReview && _jsx(View, { style: { padding: 16, borderTopWidth: 1, borderTopColor: '#ffffff15' }, children: _jsx(Pressable, { accessibilityRole: "button", onPress: onReview, style: { minHeight: 48, borderRadius: 24, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontWeight: '600', color: '#121619' }, children: reviewAction }) }) })] });
+export function MediaViewer({ title, subtitle, kind, uri, fileName, byteSize, children, loading, error, onClose, onFileAction, reviewAction, onReview, onDownload, onShare, onForward, onDelete, downloading = false, expanded, onExpandedChange }) {
+    const [localExpanded, setLocalExpanded] = useState(false);
+    const photoExpanded = kind === 'image' && (expanded ?? localExpanded), controls = !photoExpanded;
+    const setExpanded = (value) => { setLocalExpanded(value); onExpandedChange?.(value); };
+    useEffect(() => { setLocalExpanded(false); }, [uri]);
+    const visual = kind === 'image' || kind === 'video';
+    return _jsxs(View, { testID: "messenger-media-viewer", accessibilityViewIsModal: true, style: { flex: 1, minHeight: 0, backgroundColor: controls ? 'rgba(0,0,0,0.94)' : '#000000' }, children: [_jsxs(View, { style: { flex: 1, minHeight: 0, justifyContent: 'center', paddingHorizontal: visual && controls ? 12 : 0 }, children: [controls && _jsxs(View, { testID: "media-action-toolbar", style: { position: 'absolute', top: 12, left: 12, right: 12, zIndex: 3, minHeight: 52, borderRadius: 26, borderWidth: 1, borderColor: 'rgba(255,255,255,0.12)', backgroundColor: 'rgba(18,18,18,0.92)', paddingLeft: 8, paddingRight: 4, flexDirection: 'row', alignItems: 'center', gap: 2 }, children: [[[onDownload, 'Download', 'download-outline', downloading, false], [onDelete, 'Delete', 'trash-outline', false, true], [onForward, 'Forward', 'arrow-redo-outline', false, false], [onShare, 'Share', 'share-social-outline', false, false]].filter(([action, label]) => !!action || (visual && !reviewAction && label !== 'Download')).map(([action, label, icon, busy, destructive]) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${label} media`, accessibilityState: { busy }, disabled: !action || busy || downloading, onPress: action, style: { opacity: !action ? .5 : 1, flex: 1, minWidth: 44, minHeight: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center', gap: 1, paddingHorizontal: 2 }, children: [busy ? _jsx(ActivityIndicator, { size: "small", color: "#e8843a" }) : _jsx(MessageIcon, { name: icon, size: 20, color: !action ? '#A3A3A3' : destructive ? '#EF4444' : '#F7F7F7' }), _jsx(Text, { numberOfLines: 1, style: { color: !action ? '#A3A3A3' : destructive ? '#EF4444' : '#F7F7F7', fontSize: 10, fontWeight: '800' }, children: label })] }, label)), _jsx(View, { style: { flex: (!visual || !!reviewAction) && !onDownload && !onDelete && !onForward && !onShare ? 1 : 0, minWidth: 0 }, children: (!visual || !!reviewAction) && !onDownload && !onDelete && !onForward && !onShare && _jsx(Text, { numberOfLines: 1, style: { color: '#fff', fontSize: 14, paddingLeft: 8 }, children: title }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close media", onPress: onClose, style: { width: 44, height: 44, borderRadius: 22, backgroundColor: 'rgba(255,255,255,0.08)', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", size: 24, color: "#fff" }) })] }), loading ? _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 }, children: [_jsx(ActivityIndicator, { color: "#fff" }), _jsx(Text, { style: { color: '#c1c7ce' }, children: "Opening\u2026" })] }) : kind === 'image' && uri ? _jsx(View, { style: { height: controls ? '82%' : '100%', width: '100%' }, children: _jsx(ZoomablePhoto, { uri: uri, label: fileName, expanded: photoExpanded, onTap: () => setExpanded(!photoExpanded) }) }) : kind === 'document' ? _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32, gap: 20 }, children: [_jsx(View, { style: { width: 88, height: 106, borderRadius: 16, backgroundColor: '#ffffff12', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "document", color: "#fff", size: 40 }) }), _jsx(Text, { style: { color: '#fff', fontSize: 19, fontWeight: '600', textAlign: 'center' }, children: fileName }), _jsxs(Text, { style: { color: '#9ba3ad', fontSize: 13 }, children: [fileName?.split('.').pop()?.toUpperCase(), " \u00B7 ", fileSize(byteSize)] }), onFileAction && _jsx(Pressable, { accessibilityRole: "button", onPress: onFileAction, style: { borderRadius: 24, paddingHorizontal: 28, paddingVertical: 14, backgroundColor: '#fff' }, children: _jsx(Text, { style: { color: '#15191e', fontWeight: '600' }, children: "Open file" }) })] }) : kind === 'video' ? _jsx(View, { testID: "media-video-stage", style: { height: '72%', width: '100%' }, children: children }) : children] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#fff', padding: 16 }, children: error }), controls && reviewAction && onReview && _jsx(View, { style: { padding: 16, borderTopWidth: 1, borderTopColor: '#ffffff15' }, children: _jsx(Pressable, { accessibilityRole: "button", onPress: onReview, style: { minHeight: 48, borderRadius: 24, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontWeight: '600', color: '#121619' }, children: reviewAction }) }) })] });
 }

package/dist/message-menu.d.ts

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

package/dist/message-menu.js

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

package/dist/message-order.d.ts

@@ -1,4 +1,7 @@
 import type { MessagingMessage } from '@robono/messaging';
+/** Only adjacent parts of the same send share a rail. Never join across a
+ * missing part, another sender/conversation, or a date separator. */
+export declare function continuesAttachmentSend(before: MessagingMessage | undefined, after: MessagingMessage | undefined): boolean;
 /** Upload completion order must not reorder the attachments selected together.
  * Transport state remains in server sequence order for reconnect cursors. */
 export declare function orderChatMessages<T extends MessagingMessage>(messages: readonly T[]): T[];

package/dist/message-order.js

@@ -1,3 +1,13 @@
+/** Only adjacent parts of the same send share a rail. Never join across a
+ * missing part, another sender/conversation, or a date separator. */
+export function continuesAttachmentSend(before, after) {
+    if (!before || !after || before.deleted || after.deleted)
+        return false;
+    const a = before.attachmentBatch, b = after.attachmentBatch;
+    return !!a && !!b && a.id === b.id && a.count === b.count && a.index + 1 === b.index
+        && before.senderId === after.senderId && before.conversationId === after.conversationId
+        && new Date(before.createdAt).toDateString() === new Date(after.createdAt).toDateString();
+}
 /** Upload completion order must not reorder the attachments selected together.
  * Transport state remains in server sequence order for reconnect cursors. */
 export function orderChatMessages(messages) {

package/dist/messenger-video-view.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type VideoViewProps, type VideoPlayer } from 'expo-video';
+/** Shared by Robono Messenger and the SDK. A decoded frame includes the camera's
+ * rotation; the encoded track's natural width/height does not necessarily do so. */
+export declare function MessengerVideoView({ player, posterUri, ...props }: Omit<VideoViewProps, 'player' | 'contentFit' | 'fullscreenOptions'> & {
+    player: VideoPlayer;
+    posterUri?: string | null;
+}): React.JSX.Element;

package/dist/messenger-video-view.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Image } from 'react-native';
+import { VideoView } from 'expo-video';
+/** Shared by Robono Messenger and the SDK. A decoded frame includes the camera's
+ * rotation; the encoded track's natural width/height does not necessarily do so. */
+export function MessengerVideoView({ player, posterUri, ...props }) {
+    const [orientation, setOrientation] = useState('default');
+    useEffect(() => {
+        let alive = true, pending = false, resolved = false;
+        setOrientation('default');
+        const accept = (width, height) => { if (!alive || width <= 0 || height <= 0)
+            return; resolved = true; setOrientation(width > height ? 'landscape' : 'portrait'); };
+        const decode = async () => {
+            if (!alive || pending || resolved || player.status !== 'readyToPlay' || typeof player.generateThumbnailsAsync !== 'function')
+                return;
+            pending = true;
+            try {
+                const frames = await player.generateThumbnailsAsync(0, { maxWidth: 96, maxHeight: 96 });
+                try {
+                    const frame = frames[0];
+                    if (frame)
+                        accept(frame.width, frame.height);
+                }
+                finally {
+                    for (const frame of frames)
+                        frame.release();
+                }
+            }
+            catch { /* Keep the platform default if this source cannot provide a frame. */ }
+            finally {
+                pending = false;
+            }
+        };
+        if (posterUri)
+            Image.getSize(posterUri, accept, () => { void decode(); });
+        else
+            void decode();
+        const status = player.addListener('statusChange', () => { if (!posterUri)
+            void decode(); });
+        const source = player.addListener('sourceLoad', () => { if (!posterUri)
+            void decode(); });
+        return () => { alive = false; status.remove(); source.remove(); };
+    }, [player, posterUri]);
+    return _jsx(VideoView, { nativeControls: true, ...props, player: player, contentFit: "contain", fullscreenOptions: { enable: true, orientation } });
+}

package/dist/native-outbox.d.ts

@@ -1,4 +1,4 @@
-import type { MessageContent, MessageMedia, MessagingOutbox, SavedOutgoingMessage } from '@robono/messaging';
+import type { TranslationPreference, MessageContent, MessageMedia, MessagingOutbox, SavedOutgoingMessage } from '@robono/messaging';
 import type { LocalMessagingMedia } from './media-controller.js';
 export interface NativeDraftFiles {
     read(scope: string, conversation: string): Promise<NativeDraftState>;
@@ -9,6 +9,8 @@ export interface NativeDraftFiles {
     clear(scope: string, conversation?: string): Promise<void>;
 }
 export interface NativeDraftState {
+    translationPreference?: TranslationPreference;
+    quickMessage?: string;
     draft: string;
     messages: Array<SavedOutgoingMessage & {
         fileId?: string;
@@ -35,13 +37,17 @@ export declare class NativeMessagingOutbox implements MessagingOutbox {
             needsPreparation?: boolean;
         }[];
         attachments: {
-            kind: "text" | "voice" | "image" | "video" | "document" | "poll";
+            kind: "text" | "video" | "image" | "document" | "poll" | "voice";
             media: MessageMedia;
         }[];
+        quickMessage?: string | undefined;
+        translationPreference?: TranslationPreference | undefined;
     }>;
     put(cid: string, message: SavedOutgoingMessage): Promise<void>;
     remove(cid: string, id: string): Promise<void>;
     draft(cid: string, text: string): Promise<void>;
+    translationPreference(cid: string, value: TranslationPreference): Promise<void>;
+    quickMessage(cid: string, emoji: string): Promise<void>;
     clear(cid?: string): Promise<void>;
     saveFile(cid: string, media: MessageMedia, file: LocalMessagingMedia, kind: MessageContent['kind']): Promise<void>;
     file(cid: string, id: string): Promise<LocalMessagingMedia | undefined>;

package/dist/native-outbox.js

@@ -12,7 +12,7 @@ export class NativeMessagingOutbox {
     }
     serial(work) { const task = (queues.get(this.scope) ?? Promise.resolve()).catch(() => { }).then(work); queues.set(this.scope, task); void task.finally(() => { if (queues.get(this.scope) === task)
         queues.delete(this.scope); }).catch(() => { }); return task; }
-    load(cid) { return this.serial(async () => { const saved = await this.files.read(this.scope, cid), used = new Set(saved.messages.map(m => m.fileId)); return { draft: saved.draft, messages: saved.messages.map(({ fileId, ...message }) => message), attachments: Object.entries(saved.files).filter(([id]) => !used.has(id)).map(([, f]) => ({ kind: f.kind, media: f.media })) }; }); }
+    load(cid) { return this.serial(async () => { const saved = await this.files.read(this.scope, cid), used = new Set(saved.messages.map(m => m.fileId)); return { ...(saved.translationPreference ? { translationPreference: saved.translationPreference } : {}), ...(saved.quickMessage ? { quickMessage: saved.quickMessage } : {}), draft: saved.draft, messages: saved.messages.map(({ fileId, ...message }) => message), attachments: Object.entries(saved.files).filter(([id]) => !used.has(id)).map(([, f]) => ({ kind: f.kind, media: f.media })) }; }); }
     put(cid, message) { return this.serial(async () => { const state = await this.files.read(this.scope, cid), previous = state.messages.find(m => m.clientMessageId === message.clientMessageId); state.messages = state.messages.filter(m => m.clientMessageId !== message.clientMessageId); state.messages.push({ ...message, fileId: message.needsPreparation ? message.content.media?.assetId : previous?.fileId }); await this.files.write(this.scope, cid, state); }); }
     remove(cid, id) { return this.serial(async () => { const state = await this.files.read(this.scope, cid), fileId = state.messages.find(m => m.clientMessageId === id)?.fileId; state.messages = state.messages.filter(m => m.clientMessageId !== id); if (fileId && !state.messages.some(m => m.fileId === fileId)) {
         delete state.files[fileId];
@@ -22,6 +22,8 @@ export class NativeMessagingOutbox {
     else
         await this.files.write(this.scope, cid, state); }); }
     draft(cid, text) { return this.serial(async () => { const state = await this.files.read(this.scope, cid); state.draft = text.slice(0, 10000); await this.files.write(this.scope, cid, state); }); }
+    translationPreference(cid, value) { return this.serial(async () => { const state = await this.files.read(this.scope, cid); state.translationPreference = value; await this.files.write(this.scope, cid, state); }); }
+    quickMessage(cid, emoji) { return this.serial(async () => { const state = await this.files.read(this.scope, cid); state.quickMessage = emoji; await this.files.write(this.scope, cid, state); }); }
     clear(cid) { this.generation++; epochs.set(this.scope, (epochs.get(this.scope) ?? 0) + 1); return this.serial(() => this.files.clear(this.scope, cid)); }
     saveFile(cid, media, file, kind) {
         const generation = this.generation, epoch = epochs.get(this.scope) ?? 0;

package/dist/photo-gesture.d.ts

@@ -0,0 +1,20 @@
+/** Messenger photo transforms, shared by native touches and browser pointers. */
+export type PhotoPoint = {
+    x: number;
+    y: number;
+};
+export type PhotoTransform = {
+    zoom: number;
+    x: number;
+    y: number;
+};
+export declare function createPhotoGesture(changed: (value: PhotoTransform) => void): {
+    readonly value: PhotoTransform;
+    layout(w: number, h: number): void;
+    image(w: number, h: number): void;
+    reset(): void;
+    zoom(zoom: number): void;
+    begin(points: PhotoPoint[]): void;
+    move(points: PhotoPoint[]): void;
+    end(points: PhotoPoint[], cancelled?: boolean): boolean;
+};

package/dist/photo-gesture.js

@@ -0,0 +1,52 @@
+const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+const center = (p) => ({ x: p.reduce((n, p) => n + p.x, 0) / p.length, y: p.reduce((n, p) => n + p.y, 0) / p.length });
+const distance = (p) => p.length > 1 ? Math.hypot(p[0].x - p[1].x, p[0].y - p[1].y) : 0;
+export function createPhotoGesture(changed) {
+    let value = { zoom: 1, x: 0, y: 0 }, width = 1, height = 1, imageWidth = 1, imageHeight = 1;
+    let start = null;
+    let tap = false, started = 0;
+    function apply(zoom, x, y) {
+        zoom = clamp(zoom, 1, 5);
+        const fit = Math.min(width / imageWidth, height / imageHeight);
+        const maxX = Math.max(0, (imageWidth * fit * zoom - width) / 2), maxY = Math.max(0, (imageHeight * fit * zoom - height) / 2);
+        value = { zoom, x: clamp(x, -maxX, maxX), y: clamp(y, -maxY, maxY) };
+        changed(value);
+    }
+    function rebase(points) { start = points.length ? { value: { ...value }, center: center(points), distance: distance(points), count: points.length } : null; }
+    return {
+        get value() { return value; },
+        layout(w, h) { width = Math.max(1, w); height = Math.max(1, h); apply(value.zoom, value.x, value.y); },
+        image(w, h) { imageWidth = Math.max(1, w); imageHeight = Math.max(1, h); apply(value.zoom, value.x, value.y); },
+        reset() { tap = false; start = null; apply(1, 0, 0); },
+        zoom(zoom) { tap = false; apply(zoom, 0, 0); },
+        begin(points) { if (!start) {
+            tap = points.length === 1;
+            started = Date.now();
+        }
+        else
+            tap = false; rebase(points); },
+        move(points) {
+            if (!points.length)
+                return;
+            if (!start || start.count !== points.length) {
+                tap = false;
+                rebase(points);
+                return;
+            }
+            const at = center(points), dx = at.x - start.center.x, dy = at.y - start.center.y;
+            if (points.length > 1 || Math.abs(dx) > 8 || Math.abs(dy) > 8)
+                tap = false;
+            const zoom = points.length > 1 && start.distance > 0 ? start.value.zoom * distance(points) / start.distance : start.value.zoom;
+            apply(zoom, start.value.x + dx, start.value.y + dy);
+        },
+        end(points, cancelled = false) {
+            const tapped = !cancelled && !points.length && tap && Date.now() - started < 260;
+            if (points.length)
+                tap = false;
+            rebase(points);
+            if (!points.length)
+                tap = false;
+            return tapped;
+        }
+    };
+}

package/dist/polls.d.ts

@@ -1,7 +1,8 @@
 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, renderDetails, detailsOpen, onDetailsOpenChange }: {
+export declare function PollMessage({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, background, foreground, renderDetails, detailsOpen, onDetailsOpenChange, onLongPress }: {
+    onLongPress?: () => void;
     detailsOpen?: boolean;
     onDetailsOpenChange?: (open: boolean) => void;
     renderDetails?: (content: React.ReactNode, onClose: () => void) => React.ReactNode;