@robono/messaging-react-native 0.8.0 → 0.10.0

package/dist/account.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from './typography.js';
+import { useRobonoLocale } from './localization.js';
 import { useEffect, useRef, useState } from 'react';
-import { Image, Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { Image, Platform, Pressable, ScrollView, 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 +20,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,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from './typography.js';
+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 { Animated, BackHandler, Platform, Pressable, ScrollView, 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 +62,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,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from './typography.js';
+import { useRobonoLocale } from './localization.js';
 import { useEffect, useRef, useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, 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 +30,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 +69,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 +102,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 +114,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,6 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from './typography.js';
+import { useRobonoLocale } from './localization.js';
 import { createContext, useContext, useSyncExternalStore } from 'react';
-import { Pressable, View, Text } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { RobonoIcon } from './visual/RobonoIcon.js';
 import { MessagingScreen, MessagingProvider, MessagingHeader, MessagingComposer } from './index.js';
 import { UnansweredCallMessage } from './call-message.js';
@@ -10,9 +12,11 @@ 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 } }) });
+    const callingContent = design ? _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 })] })] })] }) : null;
+    return _jsx(FollowUp.Provider, { value: unansweredCallId && onDismissCallMessage ? { callId: unansweredCallId, dismiss: onDismissCallMessage } : null, children: callingOnly ? _jsx(MessagingProvider, { ...screenProps, children: props.renderLayout ? props.renderLayout(callingContent) : callingContent }) : _jsx(MessagingScreen, { ...screenProps, components: { Header: MessagingCallHeader, Composer: CallingMessageComposer, ...components } }) });
 }

package/dist/conversation-details.d.ts

@@ -13,6 +13,7 @@ export interface ConversationDetailsProps {
     accent: string;
     onClose: () => void;
     onEditGroup?: () => void;
+    onModerate?: () => void;
     onLeft?: () => void;
     attachmentPreview?: (message: MessagingMessage) => Promise<{
         uri?: string;

package/dist/conversation-details.js

@@ -1,17 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from './typography.js';
+import { useRobonoLocale } from './localization.js';
 import { useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, FlatList, Image, Platform, Pressable, Text, View } from 'react-native';
+import { ActivityIndicator, FlatList, Image, Platform, Pressable, 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 +37,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 +68,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 +77,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 && props.onModerate && ['owner', 'moderator'].includes(state.conversation?.roomRole ?? '') && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { pending.current = props.onModerate; setVisible(false); }, style: { minHeight: 48, justifyContent: 'center', alignItems: 'center', borderTopWidth: 1, borderTopColor: '#ffffff20' }, children: _jsx(Text, { style: { color: accent, fontSize: 16 }, children: uiText('Group moderation') }) }), 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/custom-message.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { MessageRegionProps, MessagingCustomization } from './customization.js';
+/** Data and customer render errors fall back inside the original message, never the whole chat. */
+export declare function CustomMessage({ components, enabled, ...props }: MessageRegionProps & {
+    components?: MessagingCustomization;
+    enabled: boolean;
+}): React.JSX.Element;

package/dist/custom-message.js

@@ -0,0 +1,53 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { validateCustomMessage, validateMessageCard } from '@robono/messaging';
+import { Text } from './typography.js';
+import { useRobonoLocale } from './localization.js';
+class CardBoundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() { return { failed: true }; }
+    render() { return this.state.failed ? this.props.fallback : this.props.children; }
+}
+/** Data and customer render errors fall back inside the original message, never the whole chat. */
+export function CustomMessage({ components, enabled, ...props }) {
+    const { text: uiText } = useRobonoLocale();
+    const [busy, setBusy] = useState(null), [failed, setFailed] = useState(false), inFlight = useRef(false);
+    let custom;
+    try {
+        custom = validateCustomMessage(props.message.custom);
+    }
+    catch {
+        return _jsx(_Fragment, { children: props.children });
+    }
+    const { colors } = props.appearance, ink = props.mine ? colors.outgoingText : colors.incomingText;
+    const actionsEnabled = enabled && !props.pendingStatus && !props.message.deleted && !!components?.onCustomMessageAction;
+    const onAction = async (actionId) => {
+        if (!actionsEnabled || inFlight.current)
+            return;
+        if (!/^[a-zA-Z][a-zA-Z0-9_.:-]{0,79}$/.test(actionId))
+            throw Error('Invalid card action.');
+        inFlight.current = true;
+        setBusy(actionId);
+        setFailed(false);
+        try {
+            await components.onCustomMessageAction({ message: props.message, actionId });
+        }
+        catch {
+            setFailed(true);
+        }
+        finally {
+            inFlight.current = false;
+            setBusy(null);
+        }
+    };
+    const registered = Object.hasOwn(components?.customMessages ?? {}, custom.type) ? components?.customMessages?.[custom.type] : undefined;
+    let content = props.children;
+    if (registered?.versions.includes(custom.version))
+        content = _jsx(registered.Component, { ...props, custom: custom, actionsEnabled: actionsEnabled && !busy, onAction: onAction });
+    else if (custom.type === 'robono.card' && custom.version === 1) {
+        const card = validateMessageCard(custom.data);
+        content = _jsxs(View, { testID: "message-business-card", style: { gap: 6, minWidth: 180, maxWidth: 320 }, children: [_jsx(Text, { selectable: true, style: { fontSize: 16, lineHeight: 22, fontWeight: '600', color: ink }, children: card.title }), !!card.body && _jsx(Text, { selectable: true, style: { fontSize: 15, lineHeight: 21, color: ink }, children: card.body }), card.fields?.map((field, index) => _jsxs(View, { style: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 12, rowGap: 2, justifyContent: 'space-between' }, children: [_jsx(Text, { style: { fontSize: 13, lineHeight: 19, color: ink, opacity: .75 }, children: field.label }), _jsx(Text, { selectable: true, style: { fontSize: 14, lineHeight: 20, color: ink, flexShrink: 1 }, children: field.value })] }, index)), !!components?.onCustomMessageAction && card.actions?.map(action => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: action.label, accessibilityState: { disabled: !actionsEnabled || !!busy, busy: busy === action.id }, disabled: !actionsEnabled || !!busy, onPress: () => void onAction(action.id), style: { minHeight: 44, paddingHorizontal: 12, justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: colors.accent, borderRadius: 8, opacity: actionsEnabled && !busy ? 1 : .55 }, children: _jsx(Text, { style: { fontSize: 14, fontWeight: '600', color: colors.accent }, children: action.label }) }, action.id))] });
+    }
+    return _jsxs(CardBoundary, { fallback: props.children, children: [content, failed && _jsx(Text, { accessibilityRole: "alert", style: { color: ink, fontSize: 13, lineHeight: 19, marginTop: 6 }, children: uiText('This action could not be completed. Try again.') })] }, props.message.id + ':' + custom.type + ':' + custom.version);
+}

package/dist/customization.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { MessagingAppearance, MessagingMessage, CustomMessageContent } from '@robono/messaging';
+export interface MessageRegionProps {
+    message: MessagingMessage;
+    mine: boolean;
+    appearance: MessagingAppearance;
+    pendingStatus?: 'sending' | 'queued' | 'failed';
+    /** The supplied region. Render children to retain its standard behavior. */
+    children?: ReactNode;
+}
+export interface HeaderRegionProps {
+    conversationId: string;
+    contact: {
+        name: string;
+        avatarUrl?: string;
+        language?: string;
+        phoneNumber?: string;
+    };
+    appearance: MessagingAppearance;
+}
+export interface CustomMessageProps extends MessageRegionProps {
+    custom: CustomMessageContent;
+    /** False for queued/deleted messages and when no customer callback is supplied. */
+    actionsEnabled: boolean;
+    /** Invokes the same supplied callback as ready-made cards. Never interprets the ID. */
+    onAction: (actionId: string) => Promise<void>;
+}
+export interface CustomMessageAction {
+    message: MessagingMessage;
+    actionId: string;
+}
+/** Small visual additions/replacements, independent of the media engine.
+ * Define components outside render so drafts and players are not remounted.
+ * These options never grant service access or change server permissions. */
+export interface MessagingCustomization {
+    /** Register only the data versions your component understands. Unknown types use text. */
+    customMessages?: Record<string, {
+        versions: readonly number[];
+        Component: ComponentType<CustomMessageProps>;
+    }>;
+    /** Connect to your authorized application action. Check permissions and current state on your server. */
+    onCustomMessageAction?: (event: CustomMessageAction) => void | Promise<void>;
+    /** Wrap/replace only the message body, preserving its outer status and gestures. */
+    MessageBody?: ComponentType<MessageRegionProps>;
+    /** Optional content inside the bubble, after the body and supplied language actions. */
+    MessageFooter?: ComponentType<MessageRegionProps>;
+    /** Add a customer action beside the contact identity; built-in actions remain. */
+    HeaderActions?: ComponentType<HeaderRegionProps>;
+}

package/dist/customization.js

@@ -0,0 +1 @@
+export {};

package/dist/expo-connected-calling.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { callDiagnosticsText } from '@robono/calling-react-native';
+import { Text } from './typography.js';
+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 { Pressable, 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';
@@ -49,5 +53,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, diagnostics: { labels: Object.fromEntries(Object.entries(callDiagnosticsText).map(([key, value]) => [key, uiText(value)])) }, 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, diagnostics: { labels: Object.fromEntries(Object.entries(callDiagnosticsText).map(([key, value]) => [key, uiText(value)])) }, 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 { MessagingAvailabilityClient, 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. */
@@ -10,6 +10,7 @@ export declare function createExpoMessenger(options: {
     userId: string;
     getAccessToken: () => Promise<string>;
     fetch?: typeof fetch;
+    availability?: false;
     notifications?: false;
     extras?: false;
     maps?: false;
@@ -54,8 +55,46 @@ export declare function createExpoMessenger(options: {
         prime(): void;
         call(conversationId: string, kind: "voice" | "video", group?: boolean): Promise<void>;
     } | undefined;
+    availability: MessagingAvailabilityClient | 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;
+    availability: MessagingAvailabilityClient | undefined;
+    maps: LocationWorkspace | undefined;
+}>;
 export interface ExpoMessengerProps extends Omit<ExpoMessagingScreenProps, 'contact' | 'renderConversation' | 'onBack'> {
     calling?: ReturnType<typeof createExpoMessengerCalling>;
     maps?: LocationWorkspace;
@@ -74,4 +113,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;