@robono/messaging-react-native 0.5.0 → 0.7.0

package/dist/media-controller.js

@@ -168,7 +168,7 @@ export class MessagingMediaController {
         })();
         return result;
     }
-    async pickMany(kind, maximum) {
+    async pickMany(kind, maximum, mixedLibrary = false) {
         if (!this.options.stageLocal || !this.options.device.pickMany) {
             const one = await this.pick(kind, undefined, 'attach');
             return one ? [one] : [];
@@ -187,14 +187,14 @@ export class MessagingMediaController {
         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);
+            files = await this.options.device.pickMany(kind, settings, abort.signal, limit, mixedLibrary);
             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 => validateMessageMedia(mixedLibrary && kind !== 'document' ? (item.mimeType.startsWith('video/') ? 'video' : 'image') : kind, item, this.options.getSettings()));
             media.forEach((item, index) => this.prepared.set(item.assetId, files[index]));
             files = [];
             return media;

package/dist/message-menu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { messagingPopupBackdrop } from './popup.js';
+import { messagingPopupBackdrop, MessagingMenuSurface } from './popup.js';
 import { useEffect } from 'react';
-import { Modal, Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { 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) {
@@ -19,6 +19,10 @@ export function MessageMenu({ visible, position, screenHeight, mine, reactions,
         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] })] }) });
+    return _jsx(MessagingMenuSurface, { visible: visible, onClose: onClose, onDismiss: onDismiss, children: rect => {
+            const menuWidth = Math.min(300, rect.width - 24), y = Math.max(12, Math.min(position.y - rect.top, rect.height - 12));
+            const local = { ...position, x: Math.max(12, Math.min(position.x - rect.left, rect.width - menuWidth - 12)), y, available: Math.max(44, (position.above ? y : rect.height - y) - 24) };
+            const card = _jsx(View, { testID: "message-action-card", style: { width: 218, maxWidth: '100%', maxHeight: Math.min(310, Math.max(43, local.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 _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: local.x, ...(position.above ? { bottom: rect.height - local.y + 12 } : { top: local.y + 12 }), width: menuWidth, maxWidth: '94%', gap: 8 }, children: [position.above ? card : reactions, position.above ? reactions : card] })] });
+        } });
 }

package/dist/popup.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View } from 'react-native';
 export interface MessagingPopupSurfaceProps {
     children: React.ReactNode;
     visible: boolean;
@@ -24,12 +25,35 @@ export declare function MessagingPopupHeader({ title, foreground, onClose, close
     disabled?: boolean;
     back?: boolean;
 }): React.JSX.Element;
+export declare function useMessagingPopupBounds(): {
+    root: React.RefObject<View | null>;
+    header: React.RefObject<View | null>;
+    revision: number;
+    changed: () => void;
+} | null;
+/** App-local overlay for anchored menus, without a browser-wide modal. */
+export declare function MessagingPopupLayer({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element | null;
 export declare function MessagingPopupHost({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
 export declare function MessagingPopupHeaderBoundary({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
+type MenuRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/** Anchored dropdowns use window coordinates on phones, app coordinates on web. */
+export declare function MessagingMenuSurface({ visible, onClose, onDismiss, children }: {
+    visible: boolean;
+    onClose: () => void;
+    onDismiss?: () => void;
+    children: (rect: MenuRect) => React.ReactNode;
+}): React.JSX.Element;
 /** Content panels occupy the area below the persistent header; confirmations stay compact. */
 export declare function MessagingPopup({ children, onClose, background, form, visible, onDismiss, expanded, bottomPadding, title, foreground, closeLabel, closeDisabled, contentWidth, headerBack, withinChat, compact }: {
     compact?: boolean;
@@ -49,3 +73,4 @@ export declare function MessagingPopup({ children, onClose, background, form, vi
     contentWidth?: number;
     headerBack?: boolean;
 }): React.JSX.Element;
+export {};

package/dist/popup.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, useCallback, useMemo } from 'react';
 import { Keyboard, KeyboardAvoidingView, Modal, Platform, Pressable, SafeAreaView, Text, View, useWindowDimensions } from 'react-native';
 import { MessageIcon } from './icons.js';
@@ -12,16 +12,85 @@ export function MessagingPopupHeader({ title, foreground, onClose, closeLabel =
 }
 // Measure the host and its persistent header, including embedded native layouts.
 const PopupBounds = createContext(null);
+const PopupLayer = createContext(null);
+export function useMessagingPopupBounds() { return useContext(PopupBounds); }
+/** App-local overlay for anchored menus, without a browser-wide modal. */
+export function MessagingPopupLayer({ children }) {
+    const update = useContext(PopupLayer), owner = useRef(Symbol('menu')).current;
+    useLayoutEffect(() => { update?.(owner, children); return () => update?.(owner, null); }, [update, owner, children]);
+    return update ? null : _jsx(_Fragment, { children: children });
+}
 export function MessagingPopupHost({ children }) {
     const root = useRef(null), header = useRef(null), [revision, setRevision] = useState(0);
+    const [layer, setLayer] = useState(null);
+    const update = useCallback((owner, node) => setLayer(current => node ? { owner, node } : current?.owner === owner ? null : current), []);
     const changed = useCallback(() => setRevision(value => value + 1), []);
     const value = useMemo(() => ({ root, header, revision, changed }), [revision, changed]);
-    return _jsx(PopupBounds.Provider, { value: value, children: _jsx(View, { ref: root, collapsable: false, onLayout: changed, style: { flex: 1, minHeight: 0 }, children: children }) });
+    return _jsx(PopupBounds.Provider, { value: value, children: _jsx(PopupLayer.Provider, { value: update, children: _jsxs(View, { ref: root, collapsable: false, onLayout: changed, style: { flex: 1, minHeight: 0 }, children: [children, layer?.node] }) }) });
 }
 export function MessagingPopupHeaderBoundary({ children }) {
     const bounds = useContext(PopupBounds);
     return _jsx(View, { ref: bounds?.header, collapsable: false, onLayout: bounds?.changed, children: children });
 }
+/** Anchored dropdowns use window coordinates on phones, app coordinates on web. */
+export function MessagingMenuSurface({ visible, onClose, onDismiss, children }) {
+    const bounds = useContext(PopupBounds), viewport = useWindowDimensions(), panel = useRef(null), wasVisible = useRef(false), dismiss = useRef(onDismiss), close = useRef(onClose);
+    dismiss.current = onDismiss;
+    close.current = onClose;
+    const [rect, setRect] = useState(null);
+    useLayoutEffect(() => {
+        if (Platform.OS !== 'web' || !visible)
+            return;
+        let active = true;
+        const measure = () => bounds?.root.current?.measureInWindow((left, top, width, height) => { if (active)
+            setRect({ left, top, width, height }); });
+        measure();
+        const root = bounds?.root.current, observer = root ? new ResizeObserver(measure) : undefined;
+        if (root)
+            observer?.observe(root);
+        return () => { active = false; observer?.disconnect(); };
+    }, [visible, bounds, viewport.width, viewport.height]);
+    useEffect(() => { if (Platform.OS !== 'web')
+        return; if (wasVisible.current && !visible)
+        dismiss.current?.(); wasVisible.current = visible; }, [visible]);
+    useEffect(() => {
+        if (Platform.OS !== 'web' || !visible || !rect)
+            return;
+        const previous = document.activeElement, frame = requestAnimationFrame(() => { panel.current?.querySelector('[role="button"],button')?.focus(); });
+        const key = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                close.current();
+            }
+            if (event.key !== 'Tab')
+                return;
+            const root = panel.current;
+            if (!root)
+                return;
+            const controls = [...root.querySelectorAll('[role="button"],button,[tabindex="0"]')].filter(el => el.getClientRects().length && el.getAttribute('aria-disabled') !== 'true');
+            const first = controls[0], last = controls.at(-1);
+            if (!first) {
+                event.preventDefault();
+                return;
+            }
+            if (event.shiftKey && (document.activeElement === first || !root.contains(document.activeElement))) {
+                event.preventDefault();
+                last?.focus();
+            }
+            else if (!event.shiftKey && (document.activeElement === last || !root.contains(document.activeElement))) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
+        document.addEventListener('keydown', key, true);
+        return () => { cancelAnimationFrame(frame); document.removeEventListener('keydown', key, true); if (previous?.isConnected)
+            previous.focus({ preventScroll: true }); };
+    }, [visible, !!rect]);
+    if (Platform.OS !== 'web')
+        return _jsx(Modal, { visible: visible, transparent: true, animationType: "none", onRequestClose: onClose, onDismiss: onDismiss, children: children({ left: 0, top: 0, width: viewport.width, height: viewport.height }) });
+    return _jsx(MessagingPopupLayer, { children: visible && rect ? _jsx(View, { ref: panel, testID: "messaging-menu-surface", style: { position: 'absolute', inset: 0, zIndex: 1000, overflow: 'hidden' }, children: children(rect) }) : null });
+}
 /** Content panels occupy the area below the persistent header; confirmations stay compact. */
 export function MessagingPopup({ children, onClose, background, form = false, visible = true, onDismiss, expanded = true, bottomPadding, title, foreground, closeLabel, closeDisabled = false, contentWidth, headerBack = false, withinChat = false, compact = false }) {
     const ChatSurface = useContext(MessagingPopupSurface), bounds = useContext(PopupBounds), viewport = useWindowDimensions();

package/dist/quick-send.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { MessagingPopupHeader, messagingPopupBackdrop } from './popup.js';
+import { MessagingPopupHeader, messagingPopupBackdrop, MessagingMenuSurface } from './popup.js';
 import { useEffect, useRef, useState } from 'react';
-import { Modal, Platform, Pressable, ScrollView, Text, View, useWindowDimensions } from 'react-native';
+import { Platform, Pressable, ScrollView, Text, View, useWindowDimensions } from 'react-native';
 import { quickMessageOptions, validQuickMessage } from '@robono/messaging';
 import { MessageIcon, chatSurface } from './icons.js';
 /** Messenger's empty-composer shortcut and anchored picker. Selecting never sends. */
@@ -34,5 +34,5 @@ export function QuickSendButton({ choice, empty, enabled, disabled, editing, sen
                             held.current = true;
                             onSchedule?.();
                         }
-                    } } } : {}), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', opacity: unavailable ? .4 : 1 }, children: quick ? _jsx(Text, { style: { fontSize: 26, lineHeight: 32 }, children: emoji }) : _jsx(MessageIcon, { name: editing ? 'check' : 'send', size: 24, color: c.accent }) }), _jsx(Modal, { visible: anchor !== null, transparent: true, animationType: "fade", onRequestClose: () => setAnchor(null), children: _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1 }, children: [_jsx(Pressable, { accessibilityLabel: "Close quick messages", onPress: () => setAnchor(null), style: { position: 'absolute', inset: 0, backgroundColor: messagingPopupBackdrop } }), _jsxs(View, { style: { position: 'absolute', width: Math.min(304, viewport.width - 24), left: Math.max(12, Math.min((anchor?.x ?? viewport.width) - 304, viewport.width - 316)), top: Math.max(48, Math.min((anchor?.y ?? viewport.height) - 282, viewport.height - 312)), backgroundColor: chatSurface(c.background), borderRadius: 18, borderWidth: 1, borderColor: c.secondary + '40', padding: 8, boxShadow: '0 4px 18px #0005' }, children: [_jsx(MessagingPopupHeader, { title: "Quick message", foreground: c.foreground, closeLabel: "Close quick message picker", onClose: () => setAnchor(null) }), _jsx(ScrollView, { style: { maxHeight: 220 }, keyboardShouldPersistTaps: "handled", contentContainerStyle: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center' }, children: quickMessageOptions.map(item => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: item.label, accessibilityState: { selected: emoji === item.emoji }, onPress: () => { held.current = false; setAnchor(null); onChoose(item.emoji); }, style: { width: 46, height: 44, alignItems: 'center', justifyContent: 'center', borderRadius: 10, backgroundColor: emoji === item.emoji ? c.accent + '20' : 'transparent' }, children: _jsx(Text, { style: { fontSize: 26, lineHeight: 32 }, children: item.emoji }) }, item.emoji)) })] })] }) })] });
+                    } } } : {}), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', opacity: unavailable ? .4 : 1 }, children: quick ? _jsx(Text, { style: { fontSize: 26, lineHeight: 32 }, children: emoji }) : _jsx(MessageIcon, { name: editing ? 'check' : 'send', size: 24, color: c.accent }) }), _jsx(MessagingMenuSurface, { visible: anchor !== null, onClose: () => setAnchor(null), children: rect => _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1 }, children: [_jsx(Pressable, { accessibilityLabel: "Close quick messages", onPress: () => setAnchor(null), style: { position: 'absolute', inset: 0, backgroundColor: messagingPopupBackdrop } }), _jsxs(View, { style: { position: 'absolute', width: Math.min(304, rect.width - 24), maxHeight: Math.max(100, rect.height - 24), left: Math.max(12, Math.min((anchor?.x ?? rect.width) - rect.left - 304, rect.width - Math.min(304, rect.width - 24) - 12)), top: Math.max(12, Math.min((anchor?.y ?? rect.height) - rect.top - 282, rect.height - 312)), backgroundColor: chatSurface(c.background), borderRadius: 18, borderWidth: 1, borderColor: c.secondary + '40', padding: 8, boxShadow: '0 4px 18px #0005' }, children: [_jsx(MessagingPopupHeader, { title: "Quick message", foreground: c.foreground, closeLabel: "Close quick message picker", onClose: () => setAnchor(null) }), _jsx(ScrollView, { style: { maxHeight: Math.min(220, Math.max(44, rect.height - 90)) }, keyboardShouldPersistTaps: "handled", contentContainerStyle: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center' }, children: quickMessageOptions.map(item => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: item.label, accessibilityState: { selected: emoji === item.emoji }, onPress: () => { held.current = false; setAnchor(null); onChoose(item.emoji); }, style: { width: 46, height: 44, alignItems: 'center', justifyContent: 'center', borderRadius: 10, backgroundColor: emoji === item.emoji ? c.accent + '20' : 'transparent' }, children: _jsx(Text, { style: { fontSize: 26, lineHeight: 32 }, children: item.emoji }) }, item.emoji)) })] })] }) })] });
 }

package/dist/safety.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MessagingMenuSurface } from './popup.js';
 import { messagingPopupColors } from './popup.js';
 import { useEffect, useRef, useState } from 'react';
 import { MessagingPopup } from './popup.js';
 import { MessageIcon } from './icons.js';
-import { Modal, Platform, Pressable, ScrollView, Text, TextInput, View, useWindowDimensions } from 'react-native';
+import { Platform, Pressable, ScrollView, Text, TextInput, View, useWindowDimensions } from 'react-native';
 /** Uses the authenticated messaging client's durable safety operations, or the host can keep its own UI. */
 export function MessagingSafety({ client, state, appearance, name, messageId, onClose, onSearch, onDetails, onPins, onScheduled, onSaved, children, menuAnchor }) {
     const [mode, setMode] = useState(messageId ? 'report' : 'menu');
@@ -61,7 +62,7 @@ export function MessagingSafety({ client, state, appearance, name, messageId, on
     const choose = (next) => { afterClose.current = () => { setMode(next); setVisible(true); }; setVisible(false); };
     if (mode === 'menu' && menuAnchor) {
         const count = Number(!!onSearch) + Number(!!onDetails) + Number(!!onPins) + Number(!!onScheduled) + Number(!!children) + Number(!!safety?.canBlock) + Number(!!safety?.canReport), height = count * 44 + 8;
-        return _jsx(Modal, { visible: visible, transparent: true, animationType: "none", onDismiss: dismissed, onRequestClose: onClose, children: _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1 }, children: [_jsx(Pressable, { accessibilityLabel: "Close contact options", onPress: onClose, style: { position: 'absolute', inset: 0 } }), _jsx(View, { testID: "messaging-contact-dropdown", style: { position: 'absolute', left: menuAnchor.x, top: Math.max(12, Math.min(menuAnchor.y, viewport.height - height - 12)), width: Math.min(240, viewport.width - 24), maxHeight: viewport.height - 24, borderRadius: 16, borderWidth: .5, borderColor: '#ffffff22', backgroundColor: '#151515', paddingVertical: 4, overflow: 'hidden', boxShadow: '0 8px 18px #0006' }, children: _jsxs(ScrollView, { bounces: false, keyboardShouldPersistTaps: "handled", children: [onDetails && menuRow(state.conversation?.kind === 'group' ? 'Group details' : 'Contact details', 'person', () => { afterClose.current = onDetails; setVisible(false); }), onPins && menuRow('Pinned messages', 'bookmark', () => { afterClose.current = onPins; setVisible(false); }), onScheduled && menuRow('Scheduled messages', 'send', () => { afterClose.current = onScheduled; setVisible(false); }), onSearch && menuRow('Search this chat', 'search', search), children && menuRow('Translation', 'translate', () => choose('translation')), safety?.canBlock && menuRow(blocked ? 'Unblock contact' : 'Block contact', 'shield', () => choose('block')), safety?.canReport && menuRow('Report', 'flag-outline', () => choose('report'))] }) })] }) });
+        return _jsx(MessagingMenuSurface, { visible: visible, onDismiss: dismissed, onClose: onClose, children: rect => _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1 }, children: [_jsx(Pressable, { accessibilityLabel: "Close contact options", onPress: onClose, style: { position: 'absolute', inset: 0 } }), _jsx(View, { testID: "messaging-contact-dropdown", style: { position: 'absolute', left: Math.max(12, Math.min(menuAnchor.x - rect.left, rect.width - Math.min(240, rect.width - 24) - 12)), top: Math.max(12, Math.min(menuAnchor.y - rect.top, rect.height - height - 12)), width: Math.min(240, rect.width - 24), maxHeight: rect.height - 24, borderRadius: 16, borderWidth: .5, borderColor: '#ffffff22', backgroundColor: '#151515', paddingVertical: 4, overflow: 'hidden', boxShadow: '0 8px 18px #0006' }, children: _jsxs(ScrollView, { bounces: false, keyboardShouldPersistTaps: "handled", children: [onDetails && menuRow(state.conversation?.kind === 'group' ? 'Group details' : 'Contact details', 'person', () => { afterClose.current = onDetails; setVisible(false); }), onPins && menuRow('Pinned messages', 'bookmark', () => { afterClose.current = onPins; setVisible(false); }), onScheduled && menuRow('Scheduled messages', 'send', () => { afterClose.current = onScheduled; setVisible(false); }), onSearch && menuRow('Search this chat', 'search', search), children && menuRow('Translation', 'translate', () => choose('translation')), safety?.canBlock && menuRow(blocked ? 'Unblock contact' : 'Block contact', 'shield', () => choose('block')), safety?.canReport && menuRow('Report', 'flag-outline', () => choose('report'))] }) })] }) });
     }
     return _jsx(MessagingPopup, { compact: mode === 'block' || mode === 'sent', withinChat: mode === 'translation', contentWidth: 640, visible: visible, onDismiss: dismissed, background: c.background, foreground: c.foreground, closeLabel: "Close contact options", closeDisabled: busy, title: mode === 'menu' ? name : mode === 'translation' ? 'Translation' : mode === 'block' ? `${blocked ? 'Unblock' : 'Block'} ${name}?` : mode === 'sent' ? 'Report sent' : messageId ? 'Report message' : 'Report conversation', onClose: () => { if (!busy)
             onClose(); }, children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", style: { ...(mode === 'block' || mode === 'sent' ? { flexGrow: 0, flexShrink: 1 } : { flex: 1 }), minHeight: 0 }, contentContainerStyle: { gap: 20, paddingBottom: 12 }, children: [mode === 'menu' && _jsxs(_Fragment, { children: [onSearch && _jsx(View, { style: { backgroundColor: '#111111', borderRadius: 12, borderWidth: 1, borderColor: '#ffffff14', overflow: 'hidden' }, children: menuRow('Search this chat', 'search', search) }), children, (safety?.canBlock || safety?.canReport) && _jsxs(View, { style: { backgroundColor: '#111111', borderRadius: 12, borderWidth: 1, borderColor: '#ffffff14', overflow: 'hidden' }, children: [safety?.canBlock && menuRow(blocked ? 'Unblock contact' : 'Block contact', 'shield', () => setMode('block')), safety?.canReport && menuRow('Report', 'flag-outline', () => setMode('report'))] })] }), mode === 'translation' && children, mode === 'block' && _jsx(_Fragment, { children: _jsx(Text, { style: { fontSize: 14, lineHeight: 21, color: c.secondary }, children: blocked ? 'You will be able to message and call each other again. Messages attempted while blocked will not be delivered.' : 'This stops direct messages and calls between you. Your existing chat stays. They will not receive a notification that you blocked them. Shared group messages are not hidden.' }) }), mode === 'report' && _jsxs(_Fragment, { children: [_jsxs(Text, { style: { fontSize: 14, lineHeight: 21, color: c.secondary }, children: [messageId ? 'This message and your reason will be shared with this app’s moderation team.' : 'Up to five recent messages from other people in this conversation and your reason will be shared with this app’s moderation team.', " Report details are kept for up to 30 days. Reporting does not block this contact."] }), ['Spam', 'Harassment', 'Inappropriate content', 'Other'].map(value => _jsxs(Pressable, { accessibilityRole: "radio", accessibilityLabel: value, accessibilityState: { checked: category === value }, disabled: busy, onPress: () => setCategory(value), style: { minHeight: 40, flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx(View, { style: { width: 18, height: 18, borderRadius: 9, borderWidth: 2, borderColor: c.accent, backgroundColor: category === value ? c.accent : 'transparent' } }), _jsx(Text, { style: { color: c.foreground, fontSize: 15 }, children: value })] }, value)), _jsx(TextInput, { accessibilityLabel: "Report details", placeholder: "Tell us what happened (optional)", placeholderTextColor: c.secondary, value: details, onChangeText: setDetails, multiline: true, maxLength: 1800, editable: !busy, style: { color: c.foreground, minHeight: 80, borderWidth: 1, borderColor: c.secondary + '60', borderRadius: 10, padding: 12, fontSize: 15 } })] }), mode === 'sent' && _jsx(Text, { style: { color: c.secondary, fontSize: 15, lineHeight: 21 }, children: "Your report was saved for review. The other person is not notified." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), mode !== 'menu' && mode !== 'translation' && _jsxs(View, { style: { flexDirection: 'row', gap: 8, marginTop: 8 }, children: [(mode === 'block' || mode === 'report') && button('Cancel', onClose, false, 'cancel'), mode === 'block' && button(blocked ? 'Unblock' : 'Block', () => void block(), false, blocked ? 'primary' : 'danger'), mode === 'report' && button(busy ? 'Sending…' : 'Send report', () => void report(), !category && !details.trim(), 'primary'), mode === 'sent' && button('Done', onClose, false, 'primary')] })] }) });

package/dist/use-quote-gesture.d.ts

@@ -1,7 +1,7 @@
 import { Animated } from 'react-native';
 export declare const messageInfoRevealWidth = 176;
 export declare const messageReplyRevealWidth = 104;
-export declare function useQuoteGesture(enabled: boolean, outgoing: boolean, quote: (() => void) | undefined, details?: () => void): {
+export declare function useQuoteGesture(enabled: boolean, outgoing: boolean, quote: (() => void) | undefined, details?: () => void, onQuoteReady?: () => void): {
     offset: number | Animated.Value;
     webRef: import("react").RefObject<HTMLElement | null> | undefined;
     infoLoaded: boolean;

package/dist/use-quote-gesture.js

@@ -4,14 +4,15 @@ import { Animated, Easing, I18nManager, PanResponder, Platform } from 'react-nat
 export const messageInfoRevealWidth = 176;
 export const messageReplyRevealWidth = 104;
 const threshold = 82;
-export function useQuoteGesture(enabled, outgoing, quote, details) {
+export function useQuoteGesture(enabled, outgoing, quote, details, onQuoteReady) {
     const offset = useRef(new Animated.Value(0)).current;
     const [webOffset, setWebOffset] = useState(0);
     const [webDragging, setWebDragging] = useState(false);
     const direction = (outgoing !== !!I18nManager.isRTL) ? -1 : 1;
     const [infoLoaded, setInfoLoaded] = useState(false);
-    const current = useRef({ enabled, direction, quote, details });
-    current.current = { enabled, direction, quote, details };
+    const quoteReady = useRef(false);
+    const current = useRef({ enabled, direction, quote, details, onQuoteReady });
+    current.current = { enabled, direction, quote, details, onQuoteReady };
     const suppressUntil = useRef(0);
     const reset = () => {
         if (Platform.OS === 'web') {
@@ -29,6 +30,10 @@ export function useQuoteGesture(enabled, outgoing, quote, details) {
     };
     const move = (dx) => {
         suppressUntil.current = Date.now() + 400;
+        const ready = !!current.current.quote && dx * current.current.direction >= threshold;
+        if (ready && !quoteReady.current)
+            current.current.onQuoteReady?.();
+        quoteReady.current = ready;
         const info = dx * current.current.direction < 0;
         if (info)
             setInfoLoaded(true);
@@ -47,6 +52,7 @@ export function useQuoteGesture(enabled, outgoing, quote, details) {
             current.current.quote?.();
         else if (!cancelled && current.current.enabled && dx * current.current.direction <= -threshold)
             current.current.details?.();
+        quoteReady.current = false;
         reset();
     };
     const responder = useRef(PanResponder.create({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robono/messaging-react-native",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "sideEffects": false,
   "description": "Optional, composable direct and group messaging screens for Robono.",
@@ -53,7 +53,7 @@
     "prepack": "npm run build && node ../../scripts/generate-sdk-file-sbom.mjs"
   },
   "peerDependencies": {
-    "@robono/messaging": "^0.4.0",
+    "@robono/messaging": "^0.5.0",
     "react": ">=18.2 <20",
     "react-native": ">=0.76 <1",
     "expo-audio": ">=55 <57",
@@ -65,14 +65,20 @@
     "expo-crypto": ">=55 <57",
     "react-native-safe-area-context": ">=5 <6",
     "react-native-svg": ">=15 <16",
-    "@robono/calling-react-native": "^0.3.0",
+    "@robono/calling-react-native": "^0.5.0",
     "expo-clipboard": ">=8 <57",
     "expo-image-manipulator": ">=14 <57",
     "expo-video-thumbnails": ">=14 <57",
     "react-native-webview": ">=13 <14",
     "expo-blur": ">=55 <57",
     "expo-notifications": ">=55 <57",
-    "expo-secure-store": ">=55 <57"
+    "expo-secure-store": ">=55 <57",
+    "@robono/location-react-native": "^0.2.0",
+    "expo-location": ">=55 <57",
+    "expo-constants": ">=55 <57",
+    "@robono/location": "^0.2.0",
+    "expo-haptics": ">=55 <57",
+    "@robono/calling": "^0.4.0"
   },
   "license": "SEE LICENSE IN LICENSE",
   "peerDependenciesMeta": {
@@ -123,6 +129,9 @@
     },
     "expo-secure-store": {
       "optional": true
+    },
+    "expo-haptics": {
+      "optional": true
     }
   },
   "author": {