@robono/messaging-react-native 0.7.0 → 0.9.0

package/dist/account.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRobonoLocale } from './localization.js';
 import { useEffect, useRef, useState } from 'react';
 import { Image, Platform, Pressable, ScrollView, Text, View } from 'react-native';
 import { MessagingPopup, messagingPopupColors as c } from './popup.js';
 import { MessageIcon } from './icons.js';
 export function MessagingAccountScreen({ account, companyName, onClose }) {
+    const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
     const [busy, setBusy] = useState(false), [error, setError] = useState(''), [visible, setVisible] = useState(true), pending = useRef(null);
     const dismissed = () => { const action = pending.current; pending.current = null; if (action)
         requestAnimationFrame(() => void run(action)); };
@@ -17,11 +19,11 @@ export function MessagingAccountScreen({ account, companyName, onClose }) {
     }
     catch (e) {
         setVisible(true);
-        setError(e instanceof Error ? e.message : 'The change could not be completed. Please try again.');
+        setError(e instanceof Error ? e.message : uiText("The change could not be completed. Please try again."));
     }
     finally {
         setBusy(false);
     } };
-    return _jsx(MessagingPopup, { visible: visible, onDismiss: dismissed, title: "Account", closeLabel: "Close account", closeDisabled: busy, background: c.background, contentWidth: 640, onClose: () => { if (!busy)
-            onClose(); }, children: _jsxs(ScrollView, { contentContainerStyle: { gap: 16, paddingBottom: 12 }, children: [_jsxs(View, { style: { backgroundColor: '#111111', borderRadius: 16, padding: 16, gap: 14 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 14 }, children: [account?.avatarUrl ? _jsx(Image, { source: { uri: account.avatarUrl }, style: { width: 56, height: 56, borderRadius: 28 } }) : _jsx(View, { style: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#252525', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "person-circle-outline", color: c.foreground, size: 36 }) }), _jsxs(View, { style: { flex: 1, gap: 4 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 20, fontWeight: '600' }, children: account?.name ?? 'Your account' }), _jsx(Text, { style: { color: c.secondary, fontSize: 14 }, children: companyName })] })] }), account?.phone && _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: account.phone }), account?.email && _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: account.email }), account?.onEditProfile && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: "Edit profile", disabled: busy, onPress: () => begin(account.onEditProfile), style: { minHeight: 44, flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx(MessageIcon, { name: "edit", color: c.foreground, size: 20 }), _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Edit profile" })] })] }), account?.onEnableNotifications && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Enable notifications", disabled: busy, onPress: () => void run(account.onEnableNotifications), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Enable notifications" }) }), account?.onSignOut && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Sign out", disabled: busy, onPress: () => begin(account.onSignOut), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Sign out" }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 15 }, children: error })] }) });
+    return _jsx(MessagingPopup, { visible: visible, onDismiss: dismissed, title: uiText("Account"), closeLabel: uiText("Close account"), closeDisabled: busy, background: c.background, contentWidth: 640, onClose: () => { if (!busy)
+            onClose(); }, children: _jsxs(ScrollView, { contentContainerStyle: { gap: 16, paddingBottom: 12 }, children: [_jsxs(View, { style: { backgroundColor: '#111111', borderRadius: 16, padding: 16, gap: 14 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 14 }, children: [account?.avatarUrl ? _jsx(Image, { source: { uri: account.avatarUrl }, style: { width: 56, height: 56, borderRadius: 28 } }) : _jsx(View, { style: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#252525', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "person-circle-outline", color: c.foreground, size: 36 }) }), _jsxs(View, { style: { flex: 1, gap: 4 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 20, fontWeight: '600' }, children: account?.name ?? uiText("Your account") }), _jsx(Text, { style: { color: c.secondary, fontSize: 14 }, children: companyName })] })] }), account?.phone && _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: account.phone }), account?.email && _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: account.email }), account?.onEditProfile && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Edit profile"), disabled: busy, onPress: () => begin(account.onEditProfile), style: { minHeight: 44, flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx(MessageIcon, { name: "edit", color: c.foreground, size: 20 }), _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Edit profile") })] })] }), account?.onEnableNotifications && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Enable notifications"), disabled: busy, onPress: () => void run(account.onEnableNotifications), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Enable notifications") }) }), account?.onSignOut && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Sign out"), disabled: busy, onPress: () => begin(account.onSignOut), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Sign out") }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 15 }, children: error })] }) });
 }

package/dist/attachment-menu.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRobonoLocale } from './localization.js';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Animated, BackHandler, Platform, Pressable, ScrollView, Text, View, useWindowDimensions } from 'react-native';
 import { MessagingPopupLayer, useMessagingPopupBounds } from './popup.js';
 import { MessageIcon } from './icons.js';
 /** Messenger's 206 × 46 attachment chips, staggered above its plus button. */
 export function AttachmentMenu({ anchor, actions, accent, onClose }) {
+    const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
     const bounds = useMessagingPopupBounds(), window = useWindowDimensions(), fade = useRef(new Animated.Value(0)).current;
     const [position, setPosition] = useState(null);
     const menu = useRef(null), close = useRef(onClose);
@@ -59,7 +61,7 @@ export function AttachmentMenu({ anchor, actions, accent, onClose }) {
         const listHeight = Math.min(Math.max(46, position.height - 28), actions.length * 54 - 8);
         const listTop = Math.max(14, Math.min(position.height - listHeight - 14, position.y - listHeight - 30));
         const Container = compact ? ScrollView : View;
-        return _jsxs(View, { style: { position: 'absolute', inset: 0, zIndex: 1000, elevation: 1000 }, children: [_jsx(Animated.View, { pointerEvents: "none", style: { position: 'absolute', inset: 0, backgroundColor: '#000', opacity: fade.interpolate({ inputRange: [0, 1], outputRange: [0, .38] }) } }), _jsx(Pressable, { accessibilityLabel: "Close attachment menu", onPress: onClose, style: { position: 'absolute', inset: 0 } }), _jsx(View, { ref: menu, accessibilityViewIsModal: true, style: { position: 'absolute', inset: 0 }, pointerEvents: "box-none", children: _jsx(Container, { style: compact ? { position: 'absolute', top: listTop, left: 10, right: 10, maxHeight: listHeight } : { position: 'absolute', inset: 0 }, ...(compact ? { contentContainerStyle: { gap: 8, paddingHorizontal: 4 }, keyboardShouldPersistTaps: 'always' } : { pointerEvents: 'box-none' }), children: (compact ? [...actions].reverse() : actions).map((action, index) => {
+        return _jsxs(View, { style: { position: 'absolute', inset: 0, zIndex: 1000, elevation: 1000 }, children: [_jsx(Animated.View, { pointerEvents: "none", style: { position: 'absolute', inset: 0, backgroundColor: '#000', opacity: fade.interpolate({ inputRange: [0, 1], outputRange: [0, .38] }) } }), _jsx(Pressable, { accessibilityLabel: uiText("Close attachment menu"), onPress: onClose, style: { position: 'absolute', inset: 0 } }), _jsx(View, { ref: menu, accessibilityViewIsModal: true, style: { position: 'absolute', inset: 0 }, pointerEvents: "box-none", children: _jsx(Container, { style: compact ? { position: 'absolute', top: listTop, left: 10, right: 10, maxHeight: listHeight } : { position: 'absolute', inset: 0 }, ...(compact ? { contentContainerStyle: { gap: 8, paddingHorizontal: 4 }, keyboardShouldPersistTaps: 'always' } : { pointerEvents: 'box-none' }), children: (compact ? [...actions].reverse() : actions).map((action, index) => {
                             const chipWidth = Math.min(206, position.width - 20), step = Math.min(58, Math.max(46, (position.y - 80) / Math.max(1, actions.length - 1)));
                             return _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: action.label, onPress: () => { onClose(); if (Platform.OS === 'web')
                                     action.run();

package/dist/call-message.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRobonoLocale } from './localization.js';
 import { useEffect, useRef, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { useMessagingUI } from './index.js';
 /** A new, reviewed message after no answer. Never records or sends a call automatically. */
 export function UnansweredCallMessage({ callId, onDismiss }) {
+    const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
     const { client, design, state, pickAttachment, releaseAttachment, components } = useMessagingUI();
     const [option, setOption] = useState(null);
     const [draft, setDraft] = useState(null);
@@ -27,7 +29,7 @@ export function UnansweredCallMessage({ callId, onDismiss }) {
         void client.unansweredCall(callId).then(o => { if (id === generation.current)
             setOption(o); })
             .catch(() => { if (id === generation.current)
-            setError('Could not check message availability.'); });
+            setError(uiText("Could not check message availability.")); });
         return () => { generation.current++; const media = prepared.current; prepared.current = null; if (media)
             void release.current?.(media); };
     }, [client, callId, state.conversationId, attempt]);
@@ -66,7 +68,7 @@ export function UnansweredCallMessage({ callId, onDismiss }) {
         }
         catch {
             if (id === generation.current)
-                setError('Could not prepare your message. Try again.');
+                setError(uiText("Could not prepare your message. Try again."));
         }
         finally {
             inFlight.current = false;
@@ -99,7 +101,7 @@ export function UnansweredCallMessage({ callId, onDismiss }) {
         }
         catch {
             if (id === generation.current)
-                setError('The message could not be sent. Check the conversation for a retry.');
+                setError(uiText("The message could not be sent. Check the conversation for a retry."));
         }
         finally {
             inFlight.current = false;
@@ -111,5 +113,5 @@ export function UnansweredCallMessage({ callId, onDismiss }) {
         return null;
     const c = design.colors, VoiceAttachment = components?.VoiceAttachment;
     const action = (label, onPress) => _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: onPress, style: { paddingVertical: 12, paddingHorizontal: 4, minHeight: 44 }, children: _jsx(Text, { style: { color: c.incomingText, fontWeight: '600' }, children: label }) });
-    return _jsxs(View, { style: { backgroundColor: c.incoming, padding: 16, borderTopWidth: 1, borderTopColor: c.secondary + '30', gap: 6 }, children: [_jsx(Text, { style: { color: c.incomingText, fontSize: 16, fontWeight: '600' }, children: "No answer" }), option && _jsx(Text, { style: { color: c.incomingText, fontSize: 14 }, children: draft ? 'Review your message, then send it.' : `Leave a ${option.kind === 'voice' ? 'voice' : 'video'} message in this chat.` }), draft && _jsx(View, { children: draft.kind === 'voice' && VoiceAttachment ? _jsx(VoiceAttachment, { media: draft.media, appearance: design, disabled: busy, onRemove: clearDraft }) : _jsxs(Text, { style: { color: c.incomingText }, children: [draft.kind === 'voice' ? 'Voice' : 'Video', " message ready"] }) }), _jsxs(View, { style: { flexDirection: 'row', gap: 16, flexWrap: 'wrap' }, children: [option && (draft ? action('Send message', () => void send()) : action(`Record ${option.kind === 'voice' ? 'voice' : 'video'} message`, () => void record())), !option && error && action('Try again', () => setAttempt(value => value + 1)), action('Not now', () => { clearDraft(); onDismiss(); })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.incomingText }, children: error })] });
+    return _jsxs(View, { style: { backgroundColor: c.incoming, padding: 16, borderTopWidth: 1, borderTopColor: c.secondary + '30', gap: 6 }, children: [_jsx(Text, { style: { color: c.incomingText, fontSize: 16, fontWeight: '600' }, children: uiText("No answer") }), option && _jsx(Text, { style: { color: c.incomingText, fontSize: 14 }, children: draft ? uiText("Review your message, then send it.") : uiText("Leave a {value1} message in this chat.", { value1: option.kind === 'voice' ? 'voice' : 'video' }) }), draft && _jsx(View, { children: draft.kind === 'voice' && VoiceAttachment ? _jsx(VoiceAttachment, { media: draft.media, appearance: design, disabled: busy, onRemove: clearDraft }) : _jsx(Text, { style: { color: c.incomingText }, children: draft.kind === 'voice' ? uiText('Voice message ready') : uiText('Video message ready') }) }), _jsxs(View, { style: { flexDirection: 'row', gap: 16, flexWrap: 'wrap' }, children: [option && (draft ? action('Send message', () => void send()) : action(`Record ${option.kind === 'voice' ? 'voice' : 'video'} message`, () => void record())), !option && error && action('Try again', () => setAttempt(value => value + 1)), action('Not now', () => { clearDraft(); onDismiss(); })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.incomingText }, children: error })] });
 }

package/dist/calling.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRobonoLocale } from './localization.js';
 import { createContext, useContext, useSyncExternalStore } from 'react';
 import { Pressable, View, Text } from 'react-native';
 import { RobonoIcon } from './visual/RobonoIcon.js';
@@ -10,9 +11,10 @@ function CallingMessageComposer() { const follow = useContext(FollowUp); return
 /** Optional call entry in the standard message header. The host controls eligibility and admission. */
 export function MessagingCallHeader() { return _jsx(MessagingHeader, {}); }
 export function MessagingCallingScreen({ onCall, onVideoCall, videoCallLabel = 'Video call', callLabel = 'Robono call', components, unansweredCallId, onDismissCallMessage, ...props }) {
+    const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
     const state = useSyncExternalStore(props.client.subscribe, props.client.getSnapshot, props.client.getSnapshot);
     const design = props.appearance ?? state.settings?.appearance;
     const screenProps = { ...props, callActions: { ...props.callActions, ...(onCall ? { voice: onCall, voiceLabel: callLabel } : {}), ...(onVideoCall ? { video: onVideoCall, videoLabel: videoCallLabel } : {}) } };
     const callingOnly = (onCall || onVideoCall) && design && state.settings && !state.settings.enabled;
-    return _jsx(FollowUp.Provider, { value: unansweredCallId && onDismissCallMessage ? { callId: unansweredCallId, dismiss: onDismissCallMessage } : null, children: callingOnly ? _jsx(MessagingProvider, { ...screenProps, children: _jsxs(View, { style: [{ flex: 1, backgroundColor: design.colors.background }, props.style], children: [_jsx(MessagingCallHeader, {}), _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 24, padding: 24 }, children: [_jsx(Text, { style: { fontSize: 28, fontWeight: '600', color: design.colors.foreground }, children: props.contact.name }), onCall && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Start ${callLabel.toLowerCase()}`, onPress: onCall, style: { minHeight: 56, minWidth: 160, borderRadius: 28, backgroundColor: design.colors.incoming, alignItems: 'center', justifyContent: 'center', padding: 16, flexDirection: 'row', gap: 12 }, children: [_jsx(RobonoIcon, { name: "phone", size: 24, color: design.colors.incomingText }), _jsx(Text, { style: { fontSize: 18, color: design.colors.incomingText }, children: callLabel })] }), onVideoCall && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Start ${videoCallLabel.toLowerCase()}`, onPress: onVideoCall, style: { minHeight: 56, padding: 16, borderRadius: 28, backgroundColor: design.colors.incoming, flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx(RobonoIcon, { name: "video", size: 24, color: design.colors.incomingText }), _jsx(Text, { style: { color: design.colors.incomingText, fontSize: 18 }, children: videoCallLabel })] })] })] }) }) : _jsx(MessagingScreen, { ...screenProps, components: { Header: MessagingCallHeader, Composer: CallingMessageComposer, ...components } }) });
+    return _jsx(FollowUp.Provider, { value: unansweredCallId && onDismissCallMessage ? { callId: unansweredCallId, dismiss: onDismissCallMessage } : null, children: callingOnly ? _jsx(MessagingProvider, { ...screenProps, children: _jsxs(View, { style: [{ flex: 1, backgroundColor: design.colors.background }, props.style], children: [_jsx(MessagingCallHeader, {}), _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 24, padding: 24 }, children: [_jsx(Text, { style: { fontSize: 28, fontWeight: '600', color: design.colors.foreground }, children: props.contact.name }), onCall && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Start {value1}", { value1: callLabel.toLowerCase() }), onPress: onCall, style: { minHeight: 56, minWidth: 160, borderRadius: 28, backgroundColor: design.colors.incoming, alignItems: 'center', justifyContent: 'center', padding: 16, flexDirection: 'row', gap: 12 }, children: [_jsx(RobonoIcon, { name: "phone", size: 24, color: design.colors.incomingText }), _jsx(Text, { style: { fontSize: 18, color: design.colors.incomingText }, children: callLabel })] }), onVideoCall && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Start {value1}", { value1: videoCallLabel.toLowerCase() }), onPress: onVideoCall, style: { minHeight: 56, padding: 16, borderRadius: 28, backgroundColor: design.colors.incoming, flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx(RobonoIcon, { name: "video", size: 24, color: design.colors.incomingText }), _jsx(Text, { style: { color: design.colors.incomingText, fontSize: 18 }, children: videoCallLabel })] })] })] }) }) : _jsx(MessagingScreen, { ...screenProps, components: { Header: MessagingCallHeader, Composer: CallingMessageComposer, ...components } }) });
 }

package/dist/conversation-details.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRobonoLocale } from './localization.js';
 import { useEffect, useRef, useState } from 'react';
 import { ActivityIndicator, FlatList, Image, Platform, Pressable, Text, View } from 'react-native';
 import { MessagingPopup, messagingPopupColors as c } from './popup.js';
 import { MessageIcon, fileSize, duration } from './icons.js';
 function MediaThumbnail({ message, preview }) {
+    const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
     const [uri, setUri] = useState();
     useEffect(() => { let live = true; setUri(undefined); if (preview && ['image', 'video'].includes(message.kind))
         void preview(message).then(value => { if (live)
             setUri(value.uri); }).catch(() => { }); return () => { live = false; }; }, [message.id, message.media?.assetId, preview]);
-    return _jsxs(View, { style: { width: 56, height: 56, borderRadius: 8, overflow: 'hidden', alignItems: 'center', justifyContent: 'center', backgroundColor: c.incoming }, children: [uri ? _jsx(Image, { source: { uri }, accessibilityLabel: message.media?.fileName ?? 'Attachment', onError: () => setUri(undefined), style: { width: '100%', height: '100%' } }) : _jsx(MessageIcon, { name: message.kind === 'voice' ? 'mic' : message.kind === 'document' ? 'document' : message.kind === 'video' ? 'video' : 'image', color: c.foreground, size: 24 }), uri && message.kind === 'video' && _jsx(View, { style: { position: 'absolute', backgroundColor: '#0008', padding: 3, borderRadius: 20 }, children: _jsx(MessageIcon, { name: "play", color: "#fff", size: 18 }) })] });
+    return _jsxs(View, { style: { width: 56, height: 56, borderRadius: 8, overflow: 'hidden', alignItems: 'center', justifyContent: 'center', backgroundColor: c.incoming }, children: [uri ? _jsx(Image, { source: { uri }, accessibilityLabel: message.media?.fileName ?? uiText("Attachment"), onError: () => setUri(undefined), style: { width: '100%', height: '100%' } }) : _jsx(MessageIcon, { name: message.kind === 'voice' ? 'mic' : message.kind === 'document' ? 'document' : message.kind === 'video' ? 'video' : 'image', color: c.foreground, size: 24 }), uri && message.kind === 'video' && _jsx(View, { style: { position: 'absolute', backgroundColor: '#0008', padding: 3, borderRadius: 20 }, children: _jsx(MessageIcon, { name: "play", color: "#fff", size: 18 }) })] });
 }
 /** Contact/group identity and retained shared media, using Messenger's bounded popup. */
 export function ConversationDetails(props) {
+    const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
     const { client, state, contact, participants = {}, userId, accent, onClose } = props, group = state.conversation?.kind === 'group';
     const [tab, setTab] = useState('media'), [messages, setMessages] = useState([]), [members, setMembers] = useState([]);
     const [next, setNext] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState(''), [visible, setVisible] = useState(true);
@@ -33,7 +36,7 @@ export function ConversationDetails(props) {
             setVisible(false);
         }
         catch (e) {
-            setError(e instanceof Error ? e.message : 'The group could not be left.');
+            setError(e instanceof Error ? e.message : uiText("The group could not be left."));
         }
         finally {
             setBusy(false);
@@ -64,7 +67,7 @@ export function ConversationDetails(props) {
         }
         catch (e) {
             if (version === generation.current && !control.signal.aborted)
-                setError(e instanceof Error ? e.message : 'These details are unavailable.');
+                setError(e instanceof Error ? e.message : uiText("These details are unavailable."));
         }
         finally {
             if (version === generation.current)
@@ -73,11 +76,11 @@ export function ConversationDetails(props) {
     }
     useEffect(() => { setMessages([]); setMembers([]); setNext(null); if (tab === 'members' || state.sharedMediaAvailable)
         void load(); return () => { ++generation.current; request.current?.abort(); }; }, [client, state.conversationId, tab]);
-    const footer = _jsxs(View, { children: [busy && _jsx(ActivityIndicator, { accessibilityLabel: "Loading conversation details", color: accent, style: { padding: 16 } }), !!error && _jsxs(_Fragment, { children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, padding: 12 }, children: error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void load(!!next), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: "Try again" }) })] }), next && !busy && !error && _jsx(Pressable, { accessibilityRole: "button", onPress: () => void load(true), style: { minHeight: 48, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: "Load more" }) })] });
-    return _jsx(MessagingPopup, { visible: visible, onDismiss: dismiss, title: leaving ? 'Leave group?' : group ? 'Group details' : 'Contact details', compact: leaving, closeDisabled: busy, background: c.background, onClose: () => { if (!busy) {
+    const footer = _jsxs(View, { children: [busy && _jsx(ActivityIndicator, { accessibilityLabel: uiText("Loading conversation details"), color: accent, style: { padding: 16 } }), !!error && _jsxs(_Fragment, { children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, padding: 12 }, children: error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void load(!!next), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: uiText("Try again") }) })] }), next && !busy && !error && _jsx(Pressable, { accessibilityRole: "button", onPress: () => void load(true), style: { minHeight: 48, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: uiText("Load more") }) })] });
+    return _jsx(MessagingPopup, { visible: visible, onDismiss: dismiss, title: leaving ? uiText("Leave group?") : group ? uiText("Group details") : uiText("Contact details"), compact: leaving, closeDisabled: busy, background: c.background, onClose: () => { if (!busy) {
             if (leaving)
                 setLeaving(false);
             else
                 setVisible(false);
-        } }, children: leaving ? _jsxs(View, { style: { gap: 16, paddingTop: 12 }, children: [_jsxs(Text, { style: { color: c.secondary, fontSize: 16, lineHeight: 23 }, children: ["You will stop receiving this group\u2019s messages.", state.conversation?.ownerId === userId ? ' Ownership will pass to another member.' : ''] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => void leave(), style: { minHeight: 48, borderRadius: 12, backgroundColor: '#b72d34', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: '#fff', fontSize: 16, fontWeight: '600' }, children: busy ? 'Leaving…' : 'Leave group' }) })] }) : _jsxs(_Fragment, { children: [_jsxs(View, { style: { alignItems: 'center', gap: 8, paddingVertical: 20 }, children: [!group && contact.avatarUrl ? _jsx(Image, { source: { uri: contact.avatarUrl }, style: { width: 64, height: 64, borderRadius: 32 } }) : _jsx(View, { style: { width: 64, height: 64, borderRadius: 32, backgroundColor: c.incoming, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontSize: 26, color: accent }, children: title.slice(0, 1).toUpperCase() }) }), _jsx(Text, { style: { color: c.foreground, fontSize: 21, fontWeight: '600' }, children: title }), group && _jsxs(Text, { style: { color: c.secondary, fontSize: 15 }, children: [state.conversation?.memberCount ?? state.conversation?.memberIds?.length ?? 0, " members"] })] }), _jsx(View, { style: { flexDirection: 'row', gap: 8, paddingBottom: 12 }, children: ['media', ...(group ? ['members'] : [])].map(value => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: value === 'media' ? 'Shared media' : 'Members', accessibilityState: { selected: tab === value }, onPress: () => setTab(value), style: { flex: 1, minHeight: 44, alignItems: 'center', justifyContent: 'center', borderBottomWidth: 2, borderBottomColor: tab === value ? accent : 'transparent' }, children: _jsx(Text, { style: { color: tab === value ? accent : c.secondary, fontSize: 16, fontWeight: '600' }, children: value === 'media' ? 'Shared media' : 'Members' }) }, value)) }), tab === 'media' ? _jsx(FlatList, { data: messages, keyExtractor: m => m.id, style: { flex: 1 }, ListFooterComponent: footer, ListEmptyComponent: !busy && !error ? _jsx(Text, { style: { color: c.secondary, padding: 16, textAlign: 'center' }, children: state.sharedMediaAvailable ? 'No shared photos, videos, files or voice messages.' : 'Shared media is unavailable for this integration.' }) : null, renderItem: ({ item }) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Open ' + (item.media?.fileName ?? 'attachment'), disabled: !props.openAttachment, onPress: () => { pending.current = () => { void props.openAttachment?.(item).catch(() => { }); }; setVisible(false); }, style: { minHeight: 76, flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#ffffff16' }, children: [_jsx(MediaThumbnail, { message: item, preview: props.attachmentPreview }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [_jsx(Text, { numberOfLines: 2, style: { color: c.foreground, fontSize: 16 }, children: item.media?.fileName ?? ({ image: 'Photo', video: 'Video', voice: 'Voice message', document: 'File' }[item.kind]) }), _jsxs(Text, { style: { color: c.secondary, fontSize: 13 }, children: [item.senderId === userId ? 'You' : participants[item.senderId]?.name ?? (!group ? contact.name : 'Member'), " \u00B7 ", item.media?.durationMs ? duration(item.media.durationMs) : fileSize(item.media?.byteSize), " \u00B7 ", new Date(item.createdAt).toLocaleDateString()] })] }), _jsx(MessageIcon, { name: "chevron-right", color: c.secondary, size: 20 })] }) }) : _jsx(FlatList, { data: members, keyExtractor: m => m.userId, style: { flex: 1 }, ListFooterComponent: footer, renderItem: ({ item }) => _jsxs(View, { style: { minHeight: 56, flexDirection: 'row', alignItems: 'center', gap: 12, borderBottomWidth: 1, borderBottomColor: '#ffffff16' }, children: [participants[item.userId]?.avatarUrl ? _jsx(Image, { source: { uri: participants[item.userId].avatarUrl }, style: { width: 36, height: 36, borderRadius: 18 } }) : _jsx(View, { style: { width: 36, height: 36, borderRadius: 18, backgroundColor: c.incoming, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: (participants[item.userId]?.name ?? 'Member').slice(0, 1) }) }), _jsx(Text, { style: { flex: 1, color: c.foreground, fontSize: 16 }, children: item.userId === userId ? 'You' : participants[item.userId]?.name ?? 'Member' }), state.conversation?.ownerId === item.userId && _jsx(Text, { style: { color: accent, fontSize: 13 }, children: "Owner" }), !item.canSend && _jsx(Text, { style: { color: c.secondary, fontSize: 13 }, children: "Read only" })] }) }), group && state.conversation?.managementAvailable && _jsxs(View, { style: { flexDirection: 'row', gap: 12, borderTopWidth: 1, borderTopColor: '#ffffff20' }, children: [state.conversation.ownerId === userId && props.onEditGroup && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { pending.current = props.onEditGroup; setVisible(false); }, style: { flex: 1, minHeight: 48, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 16 }, children: "Edit group" }) }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setError(''); setLeaving(true); }, style: { flex: 1, minHeight: 48, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { color: '#ff8282', fontSize: 16 }, children: "Leave group" }) })] })] }) });
+        } }, children: leaving ? _jsxs(View, { style: { gap: 16, paddingTop: 12 }, children: [_jsxs(Text, { style: { color: c.secondary, fontSize: 16, lineHeight: 23 }, children: [uiText("You will stop receiving this group’s messages."), state.conversation?.ownerId === userId ? ' ' + uiText("Ownership will pass to another member.") : ''] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => void leave(), style: { minHeight: 48, borderRadius: 12, backgroundColor: '#b72d34', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: '#fff', fontSize: 16, fontWeight: '600' }, children: busy ? uiText("Leaving…") : uiText("Leave group") }) })] }) : _jsxs(_Fragment, { children: [_jsxs(View, { style: { alignItems: 'center', gap: 8, paddingVertical: 20 }, children: [!group && contact.avatarUrl ? _jsx(Image, { source: { uri: contact.avatarUrl }, style: { width: 64, height: 64, borderRadius: 32 } }) : _jsx(View, { style: { width: 64, height: 64, borderRadius: 32, backgroundColor: c.incoming, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontSize: 26, color: accent }, children: title.slice(0, 1).toUpperCase() }) }), _jsx(Text, { style: { color: c.foreground, fontSize: 21, fontWeight: '600' }, children: title }), group && _jsx(Text, { style: { color: c.secondary, fontSize: 15 }, children: uiText('{count} members', { count: state.conversation?.memberCount ?? state.conversation?.memberIds?.length ?? 0 }) })] }), _jsx(View, { style: { flexDirection: 'row', gap: 8, paddingBottom: 12 }, children: ['media', ...(group ? ['members'] : [])].map(value => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: value === 'media' ? uiText("Shared media") : uiText("Members"), accessibilityState: { selected: tab === value }, onPress: () => setTab(value), style: { flex: 1, minHeight: 44, alignItems: 'center', justifyContent: 'center', borderBottomWidth: 2, borderBottomColor: tab === value ? accent : 'transparent' }, children: _jsx(Text, { style: { color: tab === value ? accent : c.secondary, fontSize: 16, fontWeight: '600' }, children: value === 'media' ? uiText("Shared media") : uiText("Members") }) }, value)) }), tab === 'media' ? _jsx(FlatList, { data: messages, keyExtractor: m => m.id, style: { flex: 1 }, ListFooterComponent: footer, ListEmptyComponent: !busy && !error ? _jsx(Text, { style: { color: c.secondary, padding: 16, textAlign: 'center' }, children: state.sharedMediaAvailable ? uiText("No shared photos, videos, files or voice messages.") : uiText("Shared media is unavailable for this integration.") }) : null, renderItem: ({ item }) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText('Open {name}', { name: item.media?.fileName ?? uiText('Attachment') }), disabled: !props.openAttachment, onPress: () => { pending.current = () => { void props.openAttachment?.(item).catch(() => { }); }; setVisible(false); }, style: { minHeight: 76, flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#ffffff16' }, children: [_jsx(MediaThumbnail, { message: item, preview: props.attachmentPreview }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [_jsx(Text, { numberOfLines: 2, style: { color: c.foreground, fontSize: 16 }, children: item.media?.fileName ?? ({ image: 'Photo', video: 'Video', voice: 'Voice message', document: 'File' }[item.kind]) }), _jsxs(Text, { style: { color: c.secondary, fontSize: 13 }, children: [item.senderId === userId ? uiText("You") : participants[item.senderId]?.name ?? (!group ? contact.name : 'Member'), " \u00B7 ", item.media?.durationMs ? duration(item.media.durationMs) : fileSize(item.media?.byteSize), " \u00B7 ", new Date(item.createdAt).toLocaleDateString(uiLocale)] })] }), _jsx(MessageIcon, { name: "chevron-right", color: c.secondary, size: 20 })] }) }) : _jsx(FlatList, { data: members, keyExtractor: m => m.userId, style: { flex: 1 }, ListFooterComponent: footer, renderItem: ({ item }) => _jsxs(View, { style: { minHeight: 56, flexDirection: 'row', alignItems: 'center', gap: 12, borderBottomWidth: 1, borderBottomColor: '#ffffff16' }, children: [participants[item.userId]?.avatarUrl ? _jsx(Image, { source: { uri: participants[item.userId].avatarUrl }, style: { width: 36, height: 36, borderRadius: 18 } }) : _jsx(View, { style: { width: 36, height: 36, borderRadius: 18, backgroundColor: c.incoming, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: (participants[item.userId]?.name ?? 'Member').slice(0, 1) }) }), _jsx(Text, { style: { flex: 1, color: c.foreground, fontSize: 16 }, children: item.userId === userId ? uiText("You") : participants[item.userId]?.name ?? uiText("Member") }), state.conversation?.ownerId === item.userId && _jsx(Text, { style: { color: accent, fontSize: 13 }, children: uiText("Owner") }), !item.canSend && _jsx(Text, { style: { color: c.secondary, fontSize: 13 }, children: uiText("Read only") })] }) }), group && state.conversation?.managementAvailable && _jsxs(View, { style: { flexDirection: 'row', gap: 12, borderTopWidth: 1, borderTopColor: '#ffffff20' }, children: [state.conversation.ownerId === userId && props.onEditGroup && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { pending.current = props.onEditGroup; setVisible(false); }, style: { flex: 1, minHeight: 48, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 16 }, children: uiText("Edit group") }) }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setError(''); setLeaving(true); }, style: { flex: 1, minHeight: 48, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { color: '#ff8282', fontSize: 16 }, children: uiText("Leave group") }) })] })] }) });
 }

package/dist/expo-connected-calling.d.ts

@@ -11,6 +11,9 @@ export declare function createExpoMessengerCalling(options: {
     }>;
     inbox: MessagingInboxClient;
 }): {
+    systemNotifications: import("@robono/calling-react-native/system-calling").SystemCallNotifications;
+    notification(data: unknown, opened?: boolean): Promise<boolean>;
+    dispose(): Promise<void>;
     updateContacts(next: Record<string, {
         name: string;
         avatarUrl?: string;
@@ -19,11 +22,10 @@ export declare function createExpoMessengerCalling(options: {
     getSnapshot: () => MessengerCallingState;
     subscribe(fn: () => void): () => void;
     isActive: () => boolean;
+    reportError(message: string): void;
     dismissUnanswered(): void;
-    notification(data: unknown, opened?: boolean): Promise<boolean>;
     prime(): void;
     call(conversationId: string, kind: "voice" | "video", group?: boolean): Promise<void>;
-    dispose(): Promise<void>;
 };
 export declare function useExpoMessengerCalling(calling?: MessengerCalling): MessengerCallingState;
 export declare function ExpoMessengerCalls({ calling, state }: {

package/dist/expo-connected-calling.js

@@ -1,16 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { callingText } from '@robono/calling-react-native/appearance';
+import { useRobonoLocale } from './localization.js';
 import { useEffect, useSyncExternalStore } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { setAudioModeAsync } from 'expo-audio';
 import { createMessengerCalling } from '@robono/calling-react-native/messenger';
 import { createNativeCallAdapters } from '@robono/calling-react-native/native';
 import { createNativeCallRuntime } from '@robono/calling-react-native/runtime';
+import { createNativeSystemCalling } from '@robono/calling-react-native/system-calling';
 import { NativeCallingOverlay, NativeGroupCallingOverlay } from '@robono/calling-react-native/native-video';
 import { createMessagingTransport } from '@robono/messaging';
 export function createExpoMessengerCalling(options) {
     const url = new URL(options.endpoint);
     url.searchParams.set('service', 'calling');
     let people = {};
+    const system = createNativeSystemCalling({ start: () => calling.start(), onError: () => calling.reportError('The incoming call could not connect. Open the app and check microphone access and your connection.') });
     const calling = createMessengerCalling({
         request: createMessagingTransport({ ...options, url: url.href }),
         resolveContact: id => {
@@ -22,12 +26,22 @@ export function createExpoMessengerCalling(options) {
         },
         resolveMember: (_app, id) => { const person = (options.people?.() ?? people)[id]; return person ? { name: person.name, avatarUri: person.avatarUrl } : null; },
         adapters: appearance => {
+            system.updateAppearance(appearance);
+            let controller;
             const runtime = createNativeCallRuntime({ notificationTitle: 'Call in progress', notificationText: 'Tap to return to your call', channelName: 'Calls', endLabel: 'End call', onError: () => { } });
-            const adapter = createNativeCallAdapters({ appearance, runtime, ringtone: 'robono', onError: () => { }, restoreAudio: () => setAudioModeAsync({ allowsRecording: false, playsInSilentMode: true, shouldPlayInBackground: false, shouldRouteThroughEarpiece: false, interruptionMode: 'mixWithOthers' }) });
-            return { ...adapter, attach: runtime.attach, dispose: runtime.dispose };
+            const adapter = createNativeCallAdapters({ appearance, runtime, systemCalling: system.audio(() => controller), ringtone: 'robono', onError: () => { }, restoreAudio: () => setAudioModeAsync({ allowsRecording: false, playsInSilentMode: true, shouldPlayInBackground: false, shouldRouteThroughEarpiece: false, interruptionMode: 'mixWithOthers' }) });
+            return { ...adapter, attach(value) { controller = value; const a = runtime.attach(value), b = system.attach(value); return () => { b(); a(); controller = undefined; }; }, dispose: runtime.dispose };
         },
     });
-    return { ...calling, updateContacts(next) { people = next; } };
+    return { ...calling, systemNotifications: system.notifications,
+        async notification(data, opened = false) { await system.receive(data); return calling.notification(data, opened); },
+        async dispose() { await system.dispose(); await calling.dispose(); },
+        updateContacts(next) { people = next; const names = {}; for (const row of options.inbox.getSnapshot().conversations) {
+            const person = next[row.contactId ?? ''];
+            const name = row.kind === 'group' ? row.name : person?.name;
+            if (name)
+                names[row.id] = name;
+        } system.cacheContacts(names); } };
 }
 const absent = { direct: null, group: null, loading: false, error: '', features: { voice: false, video: false } };
 const noSubscribe = () => () => { };
@@ -37,5 +51,6 @@ export function useExpoMessengerCalling(calling) {
     return state;
 }
 export function ExpoMessengerCalls({ calling, state }) {
-    return _jsxs(_Fragment, { children: [state.error && _jsxs(View, { style: { backgroundColor: '#171717', paddingHorizontal: 16, paddingVertical: 8, flexDirection: 'row', gap: 12, alignItems: 'center' }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: '#FAFAFA', flex: 1 }, children: state.error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void calling?.start().catch(() => { }), style: { padding: 8 }, children: _jsx(Text, { style: { color: '#FF8A2C' }, children: "Retry calls" }) })] }), state.direct && _jsx(NativeCallingOverlay, { controller: state.direct, appearance: state.appearance }), state.group && _jsx(NativeGroupCallingOverlay, { controller: state.group, appearance: state.appearance })] });
+    const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
+    return _jsxs(_Fragment, { children: [state.error && _jsxs(View, { style: { backgroundColor: '#171717', paddingHorizontal: 16, paddingVertical: 8, flexDirection: 'row', gap: 12, alignItems: 'center' }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: '#FAFAFA', flex: 1 }, children: state.error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void calling?.start().catch(() => { }), style: { padding: 8 }, children: _jsx(Text, { style: { color: '#FF8A2C' }, children: uiText("Retry calls") }) })] }), state.direct && _jsx(NativeCallingOverlay, { controller: state.direct, appearance: state.appearance, labels: Object.fromEntries(Object.entries({ ...callingText, ...state.appearance?.labels }).map(([key, value]) => [key, uiText(value)])) }), state.group && _jsx(NativeGroupCallingOverlay, { controller: state.group, appearance: state.appearance, labels: Object.fromEntries(Object.entries({ ...callingText, ...state.appearance?.labels }).map(([key, value]) => [key, uiText(value)])) })] });
 }

package/dist/expo-extras.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { RobonoLocationLocaleProvider } from '@robono/location-react-native';
+import { useRobonoLocale } from './localization.js';
 import { prepareBackgroundTracking, captureBackgroundTracking, endBackgroundAccount } from './expo-tracking-task.js';
 import * as Location from 'expo-location';
 import Constants from 'expo-constants';
@@ -25,7 +27,8 @@ export function createExpoMessagingExtras(options) {
             stop(); }).catch(() => { stop(); onError(); }); },
     });
     function ConnectedTrackingMap(props) {
-        return _jsx(ManagedMap, { client: extras, children: onLoad => _jsx(TrackingMap, { ...props, onLoad: onLoad }) });
+        const { configuration } = useRobonoLocale();
+        return _jsx(RobonoLocationLocaleProvider, { value: configuration, children: _jsx(ManagedMap, { client: extras, children: onLoad => _jsx(TrackingMap, { ...props, onLoad: onLoad }) }) });
     }
     return { extras, TrackingMap: ConnectedTrackingMap, async signOut() { extras.dispose(); const results = await Promise.allSettled([request.cancelUnfinished(), endBackgroundAccount(url.href, options.userId)]); const failed = results.find(r => r.status === 'rejected'); if (failed?.status === 'rejected')
             throw failed.reason; }, async dispose() { extras.dispose(); await endBackgroundAccount(url.href, options.userId); } };

package/dist/expo-media.js

@@ -1,3 +1,4 @@
+import { MessagingError } from '@robono/messaging';
 import { awaitMediaScreening } from './media-screening';
 import { AudioModule, RecordingPresets, createAudioPlayer, setAudioModeAsync } from 'expo-audio';
 import * as Picker from 'expo-image-picker';
@@ -252,7 +253,7 @@ export function createExpoMessagingStorage(options) {
     async function request(operation, input, signal) {
         const token = await options.getAccessToken();
         if (!token)
-            throw Error('Sign in to continue.');
+            throw new MessagingError('Sign in to continue.', 'authentication_required', 401);
         const bounded = new AbortController();
         const cancel = () => bounded.abort();
         signal?.addEventListener('abort', cancel, { once: true });
@@ -263,11 +264,19 @@ export function createExpoMessagingStorage(options) {
             const response = await (options.fetch ?? fetch)(endpoint, { method: 'POST', redirect: 'error', signal: bounded.signal, headers: { 'content-type': 'application/json', authorization: `Bearer ${token}` }, body: JSON.stringify({ ...input, operation }) });
             const result = await response.json();
             if (!response.ok || result?.error) {
-                const error = Object.assign(Error(result?.error?.message ?? 'The file could not be transferred. Try again.'), { status: response.status, code: result?.error?.code });
-                throw error;
+                throw new MessagingError(result?.error?.message ?? 'The file could not be transferred. Try again.', result?.error?.code ?? 'media_unavailable', response.status);
             }
             return result;
         }
+        catch (error) {
+            if (signal?.aborted)
+                throw error;
+            if (bounded.signal.aborted)
+                throw new MessagingError('Connection timed out.', 'request_timeout');
+            if (error instanceof TypeError)
+                throw new MessagingError('Connect to send your attachment.', 'network_unavailable');
+            throw error;
+        }
         finally {
             clearTimeout(timeout);
             signal?.removeEventListener('abort', cancel);
@@ -319,11 +328,24 @@ export function createExpoMessagingStorage(options) {
             if (plan.media)
                 return plan.media;
             const task = FS.createUploadTask(https(plan.url), uri, { httpMethod: 'PUT', uploadType: FS.FileSystemUploadType.BINARY_CONTENT, headers: plan.headers ?? {}, sessionType: FS.FileSystemSessionType.FOREGROUND }, p => context.onProgress(p.totalBytesExpectedToSend > 0 ? p.totalBytesSent / p.totalBytesExpectedToSend : 0));
-            const result = await cancellable(task, context, () => task.uploadAsync());
+            const result = await cancellable(task, context, async () => {
+                try {
+                    return await task.uploadAsync();
+                }
+                catch (error) {
+                    check(context.signal);
+                    // Native upload failures are not JavaScript TypeErrors. Preserve local
+                    // file/permission errors, but allow the durable queue to retry network loss.
+                    const detail = error instanceof Error ? error.message : String(error);
+                    if (/(?:network (?:request failed|is unreachable|connection)|not connected to the internet|internet connection appears to be offline|unknownhost|unable to resolve host|failed to connect|connection (?:reset|refused|timed out)|sockettimeout|timed? ?out|NSURLErrorDomain.*(?:-1001|-1005|-1009)|ENETUNREACH|ECONNRESET)/i.test(detail))
+                        throw new MessagingError('Connect to send your attachment.', 'network_unavailable');
+                    throw error;
+                }
+            });
             // An immutable PUT may already have succeeded before its response was lost.
             // A 412 is not success by itself: complete still verifies ownership and bytes.
             if (!result || result.status !== 412 && (result.status < 200 || result.status >= 300))
-                throw Error('Upload failed. Try again.');
+                throw new MessagingError('The attachment upload was interrupted.', 'upload_interrupted', result?.status ?? 503);
             // Verification is repeatable for the same upload. A transient inspector
             // failure must not upload the bytes again or create a second attachment.
             for (let attempt = 0;; attempt++) {

package/dist/expo-messenger.d.ts

@@ -1,7 +1,7 @@
 import { createExpoMessengerCalling } from './expo-connected-calling.js';
 import type { LocationWorkspace } from '@robono/location';
 import React from 'react';
-import { MessagingInboxClient, type ConversationSummary } from '@robono/messaging';
+import { type HostedRobonoConnectionOptions, MessagingInboxClient, type ConversationSummary } from '@robono/messaging';
 import { type ExpoMessagingScreenProps } from './expo-screen.js';
 import { type MessagingAudioSession } from './expo-media.js';
 /** One account, one authenticated route, supplied storage and media-session adapters. */
@@ -38,6 +38,9 @@ export declare function createExpoMessenger(options: {
         enable(): Promise<void>;
     } | undefined;
     calling: {
+        systemNotifications: import("@robono/calling-react-native/system-calling").SystemCallNotifications;
+        notification(data: unknown, opened?: boolean): Promise<boolean>;
+        dispose(): Promise<void>;
         updateContacts(next: Record<string, {
             name: string;
             avatarUrl?: string;
@@ -46,14 +49,49 @@ export declare function createExpoMessenger(options: {
         getSnapshot: () => import("@robono/calling-react-native/messenger").MessengerCallingState;
         subscribe(fn: () => void): () => void;
         isActive: () => boolean;
+        reportError(message: string): void;
         dismissUnanswered(): void;
-        notification(data: unknown, opened?: boolean): Promise<boolean>;
         prime(): void;
         call(conversationId: string, kind: "voice" | "video", group?: boolean): Promise<void>;
-        dispose(): Promise<void>;
     } | undefined;
     maps: LocationWorkspace | undefined;
 };
+export declare function createHostedExpoMessenger(options: Omit<Parameters<typeof createExpoMessenger>[0], 'endpoint' | 'getAccessToken' | 'namespace'> & HostedRobonoConnectionOptions & {
+    signal?: AbortSignal;
+}): Promise<{
+    signOut(): Promise<void>;
+    dispose(): void;
+    extras?: import("@robono/messaging").MessagingExtrasClient | undefined;
+    components?: {
+        TrackingMap: (props: import("./extras.js").TrackingMapProps) => React.JSX.Element;
+    } | undefined;
+    client: import("@robono/messaging").MessagingClient;
+    inbox: MessagingInboxClient;
+    storage: import("./media-controller.js").MessagingMediaStorage;
+    audioSession: MessagingAudioSession;
+    notifications: {
+        start(open: (conversationId: string, messageId: string) => Promise<void>): Promise<void>;
+        enable(): Promise<void>;
+    } | undefined;
+    calling: {
+        systemNotifications: import("@robono/calling-react-native/system-calling").SystemCallNotifications;
+        notification(data: unknown, opened?: boolean): Promise<boolean>;
+        dispose(): Promise<void>;
+        updateContacts(next: Record<string, {
+            name: string;
+            avatarUrl?: string;
+        }>): void;
+        start: () => Promise<void>;
+        getSnapshot: () => import("@robono/calling-react-native/messenger").MessengerCallingState;
+        subscribe(fn: () => void): () => void;
+        isActive: () => boolean;
+        reportError(message: string): void;
+        dismissUnanswered(): void;
+        prime(): void;
+        call(conversationId: string, kind: "voice" | "video", group?: boolean): Promise<void>;
+    } | undefined;
+    maps: LocationWorkspace | undefined;
+}>;
 export interface ExpoMessengerProps extends Omit<ExpoMessagingScreenProps, 'contact' | 'renderConversation' | 'onBack'> {
     calling?: ReturnType<typeof createExpoMessengerCalling>;
     maps?: LocationWorkspace;
@@ -72,4 +110,4 @@ export interface ExpoMessengerProps extends Omit<ExpoMessagingScreenProps, 'cont
     onSelectConversation?: (conversation: ConversationSummary | null) => void;
 }
 /** Supplied inbox, group creation, conversation, settings and media screens. */
-export declare function ExpoMessenger({ inbox, contacts, initialConversation, selectedConversation, onSelectConversation, notifications, maps, calling, ...props }: ExpoMessengerProps): React.JSX.Element;
+export declare function ExpoMessenger(props: ExpoMessengerProps): React.JSX.Element;

package/dist/expo-messenger.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RobonoLocaleProvider, useRobonoLocale } from './localization.js';
 import { useMessengerMaps, MessengerMapsNotice } from './maps-connection.js';
 import { MessagingCallingScreen } from './calling.js';
 import { createExpoMessengerCalling, useExpoMessengerCalling, ExpoMessengerCalls } from './expo-connected-calling.js';
@@ -8,9 +9,9 @@ import { createExpoMaps, RobonoMaps } from '@robono/location-react-native/expo';
 import { createExpoMessagingExtras } from './expo-extras.js';
 import { connectExpoMessagingNotifications } from './expo-notifications.js';
 import { useEffect, useState, useSyncExternalStore } from 'react';
-import { createMessagingTransport, defaultMessagingSettings, MessagingInboxClient } from '@robono/messaging';
+import { connectHostedRobono, createMessagingTransport, defaultMessagingSettings, MessagingInboxClient } from '@robono/messaging';
 import { ExpoMessagingScreen } from './expo-screen.js';
-import { createExpoMessagingClient } from './expo-outbox.js';
+import { createExpoMessagingClient, expoOutbox } from './expo-outbox.js';
 import { createExpoMessagingAudioSession, createExpoMessagingStorage } from './expo-media.js';
 import { MessagingProvider, MessagingAccountMenu } from './index.js';
 import { MessagingInbox } from './inbox.js';
@@ -27,6 +28,21 @@ export function createExpoMessenger(options) {
     const connectedExtras = options.extras === false ? undefined : createExpoMessagingExtras(options);
     const inbox = new MessagingInboxClient({ request: createMessagingTransport({ ...options, url: endpoint.href }) });
     const storage = createExpoMessagingStorage({ url: media.href, getAccessToken: options.getAccessToken, ...(options.fetch ? { fetch: options.fetch } : {}) });
+    const outgoing = expoOutbox(client);
+    if (outgoing)
+        client.setRecoveryAdapter(worker => {
+            const abort = new AbortController(), conversationId = worker.getSnapshot().conversationId;
+            const release = worker.setAttachmentPreparer(async (content) => {
+                if (!content.media || content.kind === 'text' || content.kind === 'poll')
+                    throw Error('The saved attachment is unavailable.');
+                const file = await outgoing.file(conversationId, content.media.assetId);
+                if (!file)
+                    throw Error('The saved attachment is missing. Remove it and choose it again.');
+                const media = await storage.upload(file, { conversationId, uploadId: content.media.assetId, kind: content.kind, signal: abort.signal, onProgress: () => { } });
+                return { ...content, media };
+            });
+            return () => { abort.abort(); release(); };
+        });
     const calling = options.calling === false ? undefined : createExpoMessengerCalling({ ...options, inbox });
     const audioSession = options.audioSession ?? createExpoMessagingAudioSession({ isCallActive: () => isNativeCallAudioActive() || calling?.isActive() === true || options.isCallActive?.() === true });
     let connection = null, pending = null, closed = false;
@@ -49,7 +65,7 @@ export function createExpoMessenger(options) {
                     catch {
                         return false;
                     } },
-                    onCall: calling?.notification, open: e => open(e.conversationId, e.messageId), refresh: () => inbox.refresh().then(() => { }), onError: () => { },
+                    onCall: calling?.notification, systemCalls: calling?.systemNotifications, open: e => open(e.conversationId, e.messageId), refresh: () => inbox.refresh().then(() => { }), onError: () => { },
                 });
                 if (closed) {
                     await n.signOut();
@@ -70,13 +86,47 @@ export function createExpoMessenger(options) {
             throw Error('Allow notifications in your phone’s app settings.'); },
     };
     return { client, inbox, storage, audioSession, notifications, calling, maps: mapConnection?.workspace, ...(connectedExtras ? { extras: connectedExtras.extras, components: { TrackingMap: connectedExtras.TrackingMap } } : {}),
-        async signOut() { closed = true; const extraCleanup = connectedExtras?.signOut(); inbox.dispose(); const results = await Promise.allSettled([extraCleanup, calling?.dispose(), mapConnection?.signOut(), client.signOut(), (async () => { await pending?.catch(() => { }); await connection?.signOut(); })()]); const failed = results.find(r => r.status === 'rejected'); if (failed?.status === 'rejected')
+        async signOut() { if (closed)
+            return; closed = true; const extraCleanup = connectedExtras?.signOut(); inbox.dispose(); const results = await Promise.allSettled([extraCleanup, calling?.dispose(), mapConnection?.signOut(), client.signOut(), (async () => { await pending?.catch(() => { }); await connection?.signOut(); })()]); const failed = results.find(r => r.status === 'rejected'); if (failed?.status === 'rejected')
             throw failed.reason; },
-        dispose() { closed = true; void calling?.dispose().catch(() => { }); mapConnection?.dispose(); void connectedExtras?.dispose().catch(() => { }); connection?.dispose(); inbox.dispose(); client.dispose(); },
+        dispose() { if (closed)
+            return; closed = true; void calling?.dispose().catch(() => { }); mapConnection?.dispose(); void connectedExtras?.dispose().catch(() => { }); connection?.dispose(); inbox.dispose(); client.dispose(); },
+    };
+}
+export async function createHostedExpoMessenger(options) {
+    const session = await connectHostedRobono(options);
+    if (options.signal?.aborted) {
+        await session.signOut();
+        throw Error('The messenger was closed.');
+    }
+    let connection;
+    try {
+        connection = createExpoMessenger({ ...options, endpoint: session.endpoint, getAccessToken: session.getAccessToken, namespace: session.namespace });
+    }
+    catch (error) {
+        await session.signOut().catch(() => { });
+        throw error;
+    }
+    let signingOut;
+    return { ...connection,
+        signOut() { return signingOut ??= (async () => { try {
+            await connection.signOut();
+        }
+        finally {
+            await session.signOut();
+        } })(); },
+        dispose() { if (!signingOut) {
+            connection.dispose();
+            session.dispose();
+        } },
     };
 }
 /** Supplied inbox, group creation, conversation, settings and media screens. */
-export function ExpoMessenger({ inbox, contacts = {}, initialConversation, selectedConversation, onSelectConversation, notifications, maps, calling, ...props }) {
+export function ExpoMessenger(props) {
+    return _jsx(RobonoLocaleProvider, { value: props.interfaceLocale, children: _jsx(ExpoMessengerContent, { ...props }) });
+}
+function ExpoMessengerContent({ inbox, contacts = {}, initialConversation, selectedConversation, onSelectConversation, notifications, maps, calling, ...props }) {
+    const { configuration: mapsLocale } = useRobonoLocale();
     const callState = useExpoMessengerCalling(calling);
     useEffect(() => { calling?.updateContacts(contacts); }, [calling, contacts]);
     const chatState = useSyncExternalStore(props.client.subscribe, props.client.getSnapshot, props.client.getSnapshot);
@@ -97,5 +147,5 @@ export function ExpoMessenger({ inbox, contacts = {}, initialConversation, selec
         open(row, message); }).catch(() => { }); }, [notifications, inbox]);
     const account = notifications ? { name: props.account?.name ?? 'Your account', ...props.account, onEnableNotifications: () => notifications.enable() } : props.account;
     const contact = selected?.kind === 'group' ? { name: selected.name ?? 'Group' } : contacts[selected?.contactId ?? ''] ?? { name: selected?.contactId ?? 'Chat' };
-    return _jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsx(MessengerMapsNotice, { error: mapConnection.error, retry: mapConnection.retry }), showMaps && maps ? _jsx(RobonoMaps, { workspace: maps, contacts: contacts, onClose: () => setShowMaps(false) }) : _jsx(ExpoMessagingScreen, { ...props, account: account, contact: contact, participants: props.participants ?? contacts, extras: selected ? props.extras : undefined, callActions: selected ? { ...autoCalls, ...props.callActions, phoneNumber: contacts[selected.contactId ?? '']?.phoneNumber ?? props.callActions?.phoneNumber } : undefined, onBack: () => { props.client.stop(); setSelected(null); void inbox.refresh().catch(() => { }); }, renderConversation: screen => selected ? _jsx(MessagingCallingScreen, { ...screen, onCall: screen.callActions?.voice, onVideoCall: screen.callActions?.video, callLabel: "Internet call", unansweredCallId: callState.unanswered?.conversationId === selected.id ? callState.unanswered.id : undefined, onDismissCallMessage: calling?.dismissUnanswered }) : _jsxs(MessagingProvider, { ...screen, children: [_jsx(MessagingInbox, { client: inbox, userId: props.userId, contacts: contacts, companyName: props.companyName, appearance: props.appearance, active: props.active !== false, headerActions: _jsx(MessagingAccountMenu, { onMaps: mapsAvailable ? () => setShowMaps(true) : undefined, onNewGroup: inboxState.groupCreationAvailable ? () => setNewGroup(true) : undefined }), onSelect: open, onDeleted: id => props.client.forgetConversation(id) }), newGroup && _jsx(MessagingGroupEditor, { client: props.client, inbox: inbox, userId: props.userId, contacts: contacts, groups: inboxState.groups, accent: (props.appearance ?? inboxState.appearance ?? defaultMessagingSettings().appearance).colors.accent, onClose: () => setNewGroup(false), onSaved: (id, name) => { setNewGroup(false); const row = inbox.getSnapshot().conversations.find(c => c.id === id) ?? { id, kind: 'group', name, contactId: null, lastMessage: null, unreadCount: 0, canSend: true }; open(row); } })] }) }), _jsx(ExpoMessengerCalls, { calling: calling, state: callState })] });
+    return _jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsx(MessengerMapsNotice, { error: mapConnection.error, retry: mapConnection.retry }), showMaps && maps ? _jsx(RobonoMaps, { interfaceLocale: mapsLocale, workspace: maps, contacts: contacts, onClose: () => setShowMaps(false) }) : _jsx(ExpoMessagingScreen, { ...props, account: account, contact: contact, participants: props.participants ?? contacts, extras: selected ? props.extras : undefined, callActions: selected ? { ...autoCalls, ...props.callActions, phoneNumber: contacts[selected.contactId ?? '']?.phoneNumber ?? props.callActions?.phoneNumber } : undefined, onBack: () => { props.client.stop(); setSelected(null); void inbox.refresh().catch(() => { }); }, renderConversation: screen => selected ? _jsx(MessagingCallingScreen, { ...screen, onCall: screen.callActions?.voice, onVideoCall: screen.callActions?.video, callLabel: "Internet call", unansweredCallId: callState.unanswered?.conversationId === selected.id ? callState.unanswered.id : undefined, onDismissCallMessage: calling?.dismissUnanswered }) : _jsxs(MessagingProvider, { ...screen, children: [_jsx(MessagingInbox, { client: inbox, userId: props.userId, contacts: contacts, companyName: props.companyName, appearance: props.appearance, active: props.active !== false, headerActions: _jsx(MessagingAccountMenu, { onMaps: mapsAvailable ? () => setShowMaps(true) : undefined, onNewGroup: inboxState.groupCreationAvailable ? () => setNewGroup(true) : undefined }), onSelect: open, onDeleted: id => props.client.forgetConversation(id) }), newGroup && _jsx(MessagingGroupEditor, { client: props.client, inbox: inbox, userId: props.userId, contacts: contacts, groups: inboxState.groups, accent: (props.appearance ?? inboxState.appearance ?? defaultMessagingSettings().appearance).colors.accent, onClose: () => setNewGroup(false), onSaved: (id, name) => { setNewGroup(false); const row = inbox.getSnapshot().conversations.find(c => c.id === id) ?? { id, kind: 'group', name, contactId: null, lastMessage: null, unreadCount: 0, canSend: true }; open(row); } })] }) }), _jsx(ExpoMessengerCalls, { calling: calling, state: callState })] });
 }

package/dist/expo-notifications.d.ts

@@ -1,4 +1,5 @@
 import * as Notifications from 'expo-notifications';
+import type { SystemCallNotifications } from '@robono/calling-react-native/system-calling';
 import { type MessagingNotification } from '@robono/messaging';
 export interface ExpoMessagingNotificationOptions {
     /** The combined server route, with service=notifications. */
@@ -11,6 +12,7 @@ export interface ExpoMessagingNotificationOptions {
     onError: (error: Error) => void;
     fetch?: typeof fetch;
     onCall?: (data: unknown, opened: boolean) => Promise<boolean>;
+    systemCalls?: SystemCallNotifications;
 }
 /** One restored account. Never prompts on mount, replaces a global handler or opens an unverified call. */
 export declare function connectExpoMessagingNotifications(options: ExpoMessagingNotificationOptions): Promise<{