@robono/messaging-react-native 0.9.0 → 0.10.0

package/dist/account.js

@@ -1,7 +1,8 @@
 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 }) {

package/dist/attachment-menu.js

@@ -1,7 +1,8 @@
 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. */

package/dist/call-message.js

@@ -1,7 +1,8 @@
 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 }) {

package/dist/calling.js

@@ -1,7 +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';
@@ -16,5 +17,6 @@ export function MessagingCallingScreen({ onCall, onVideoCall, videoCallLabel = '
     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: 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 } }) });
+    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,7 +1,8 @@
 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 }) {
@@ -82,5 +83,5 @@ export function ConversationDetails(props) {
                 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: [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") }) })] })] }) });
+        } }, 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,8 +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';
@@ -52,5 +54,5 @@ export function useExpoMessengerCalling(calling) {
 }
 export function ExpoMessengerCalls({ calling, state }) {
     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)])) })] });
+    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-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 { type HostedRobonoConnectionOptions, 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,6 +55,7 @@ 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 & {
@@ -90,6 +92,7 @@ export declare function createHostedExpoMessenger(options: Omit<Parameters<typeo
         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'> {

package/dist/expo-messenger.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createInboxViewMemory } from './inbox-view.js';
+import { MessagingPublicRooms } from './public-rooms.js';
 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';
 import { isNativeCallAudioActive } from '@robono/calling-react-native/native';
-import { View } from 'react-native';
+import { View, AppState } from 'react-native';
 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 { connectHostedRobono, createMessagingTransport, defaultMessagingSettings, MessagingInboxClient } from '@robono/messaging';
+import { useMemo, useLayoutEffect, useEffect, useState, useSyncExternalStore } from 'react';
+import { MessagingAvailabilityClient, connectHostedRobono, createMessagingTransport, defaultMessagingSettings, MessagingInboxClient } from '@robono/messaging';
 import { ExpoMessagingScreen } from './expo-screen.js';
 import { createExpoMessagingClient, expoOutbox } from './expo-outbox.js';
 import { createExpoMessagingAudioSession, createExpoMessagingStorage } from './expo-media.js';
@@ -26,6 +28,13 @@ export function createExpoMessenger(options) {
     const client = createExpoMessagingClient({ ...options, url: endpoint.href });
     const mapConnection = options.maps === false ? undefined : createExpoMaps(options);
     const connectedExtras = options.extras === false ? undefined : createExpoMessagingExtras(options);
+    const availability = options.availability === false ? undefined : new MessagingAvailabilityClient({ request: createMessagingTransport({ ...options, url: endpoint.href }) });
+    const activityChanged = (state) => { if (state === 'active')
+        availability?.start();
+    else
+        void availability?.stop(); };
+    const activitySubscription = availability ? AppState.addEventListener('change', activityChanged) : undefined;
+    activityChanged(AppState.currentState);
     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);
@@ -85,12 +94,12 @@ export function createExpoMessenger(options) {
             throw Error('Notifications are not connected yet. Check your Apple/Google setup in Robono.'); if (!await connection.enable())
             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 } } : {}),
+    return { client, inbox, storage, audioSession, notifications, calling, availability, maps: mapConnection?.workspace, ...(connectedExtras ? { extras: connectedExtras.extras, components: { TrackingMap: connectedExtras.TrackingMap } } : {}),
         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')
+            return; closed = true; activitySubscription?.remove(); const extraCleanup = connectedExtras?.signOut(); inbox.dispose(); const results = await Promise.allSettled([availability?.signOut(), 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() { if (closed)
-            return; closed = true; void calling?.dispose().catch(() => { }); mapConnection?.dispose(); void connectedExtras?.dispose().catch(() => { }); connection?.dispose(); inbox.dispose(); client.dispose(); },
+            return; closed = true; activitySubscription?.remove(); availability?.dispose(); void calling?.dispose().catch(() => { }); mapConnection?.dispose(); void connectedExtras?.dispose().catch(() => { }); connection?.dispose(); inbox.dispose(); client.dispose(); },
     };
 }
 export async function createHostedExpoMessenger(options) {
@@ -126,13 +135,30 @@ 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 inboxMemory = useMemo(createInboxViewMemory, [inbox, props.userId]);
     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);
     const groupAllowed = chatState.conversation?.kind !== 'group' || !chatState.conversation.supergroup && (chatState.conversation.memberCount ?? 0) >= 2 && (chatState.conversation.memberCount ?? 0) <= 8;
-    const [internal, setInternal] = useState(initialConversation ?? null), [newGroup, setNewGroup] = useState(false);
+    const [internal, setInternal] = useState(initialConversation ?? null), [newGroup, setNewGroup] = useState(false), [publicRooms, setPublicRooms] = useState(false);
     const selected = selectedConversation === undefined ? internal : selectedConversation;
+    // Declarative navigation loads the selected conversation itself. Internal open()
+    // changes the client synchronously, so this never opens it a second time.
+    useLayoutEffect(() => { if (!selected) {
+        props.client.stop();
+        return;
+    } if (props.client.getSnapshot().conversationId !== selected.id)
+        void props.client.open(selected.id).catch(() => { }); }, [selected?.id, props.client]);
+    useEffect(() => {
+        const sync = (state) => { if (selected && props.active !== false && (state === null || state === 'active'))
+            props.client.start();
+        else
+            props.client.stop(); };
+        sync(AppState.currentState);
+        const subscription = AppState.addEventListener('change', sync);
+        return () => { subscription.remove(); props.client.stop(); };
+    }, [selected?.id, props.client, props.active]);
     const autoCalls = calling && selected && groupAllowed ? { ...(callState.features.voice ? { voice: () => calling.call(selected.id, 'voice', selected.kind === 'group') } : {}), ...(callState.features.video ? { video: () => calling.call(selected.id, 'video', selected.kind === 'group') } : {}), voiceLabel: 'Internet call' } : undefined;
     const setSelected = (row) => { setInternal(row); onSelectConversation?.(row); };
     const [showMaps, setShowMaps] = useState(false), mapConnection = useMessengerMaps(maps), mapsAvailable = mapConnection.available;
@@ -147,5 +173,5 @@ function ExpoMessengerContent({ 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, { 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 })] });
+    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, { viewMemory: inboxMemory, client: inbox, userId: props.userId, contacts: contacts, companyName: props.companyName, appearance: props.appearance, active: props.active !== false, headerActions: _jsx(MessagingAccountMenu, { onPublicRooms: inboxState.publicRoomsAvailable ? () => setPublicRooms(true) : undefined, onMaps: mapsAvailable ? () => setShowMaps(true) : undefined, onNewGroup: inboxState.groupCreationAvailable ? () => setNewGroup(true) : undefined }), onSelect: open, onDeleted: id => props.client.forgetConversation(id) }), publicRooms && _jsx(MessagingPublicRooms, { inbox: inbox, accent: (props.appearance ?? inboxState.appearance ?? defaultMessagingSettings().appearance).colors.accent, createRequestId: () => props.client.createForwardId(), onClose: () => setPublicRooms(false), onJoined: (id, name) => { setPublicRooms(false); open(inbox.getSnapshot().conversations.find(c => c.id === id) ?? { id, kind: 'group', name, contactId: null, lastMessage: null, unreadCount: 0, canSend: true }); } }), 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-screen.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MessagingTypography } from './typography.js';
+import { Text } from './typography.js';
 import { RobonoLocaleProvider } from './localization.js';
 import { useRobonoLocale } from './localization.js';
 import * as Haptics from 'expo-haptics';
@@ -11,7 +13,7 @@ import { expoSaved } from './expo-saved.js';
 export { createExpoMessagingClient } from './expo-outbox.js';
 import { createExpoThumbnails } from './expo-thumbnails.js';
 import { useCallback, useEffect, useContext, useMemo, useRef, useState, useSyncExternalStore } from 'react';
-import { AppState, Image, Modal, Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { AppState, Image, Modal, Platform, Pressable, ScrollView, View } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import MaterialIcons from "./visual/RobonoIcon";
 import { useAudioPlayer } from 'expo-audio';
@@ -358,7 +360,7 @@ export function MessagingMediaOverlay({ controller, audio, appearance, inlineVoi
     return _jsx(Modal, { transparent: true, visible: state.phase !== 'idle' && state.phase !== 'choosing', onDismiss: onDismiss, animationType: "fade", onRequestClose: () => { if (expanded)
             setExpanded(false);
         else
-            void controller.cancel(); }, children: _jsx(SafeAreaProvider, { style: { flex: 1, backgroundColor: state.kind === 'image' || state.kind === 'video' ? 'rgba(0,0,0,0.94)' : messagingPopupBackdrop }, children: _jsx(SafeAreaView, { edges: expanded ? [] : ['top', 'bottom', 'left', 'right'], style: { flex: 1 }, children: _jsx(View, { style: { flex: 1, margin: state.kind === 'image' || state.kind === 'video' ? 0 : 8, borderRadius: state.kind === 'image' || state.kind === 'video' ? 0 : 18, overflow: 'hidden', backgroundColor: state.kind === 'image' || state.kind === 'video' ? 'transparent' : '#000000' }, children: viewer ?? (_jsx(View, { style: { flex: 1, backgroundColor: c.background }, children: _jsxs(ScrollView, { contentContainerStyle: { padding: 8, paddingTop: 0, gap: 12, flexGrow: 1 }, children: [_jsx(MessagingPopupHeader, { title: state.kind === 'voice' ? uiText("Voice message") : state.kind === 'image' ? uiText("Photo") : state.kind === 'video' ? uiText("Video") : uiText("File"), foreground: c.foreground, closeLabel: uiText("Close attachment"), onClose: () => void controller.cancel() }), state.phase === 'recording' ? _jsxs(View, { style: { alignItems: 'center', gap: 20, paddingVertical: 32 }, children: [_jsx(MaterialIcons, { name: "mic", size: 48, color: c.accent }), _jsx(Text, { style: { color: c.foreground, fontSize: 32, fontVariant: ['tabular-nums'] }, children: time(state.elapsedMs) }), _jsx(Text, { style: { color: c.secondary }, children: uiText('{time} remaining', { time: time(Math.max(0, state.maxDurationMs - state.elapsedMs)) }) }), _jsx(Control, { label: uiText("Stop recording"), icon: "stop", color: c.accent, onPress: () => void controller.finishRecording() })] }) : null, ['choosing', 'preparing', 'uploading', 'opening'].includes(state.phase) && _jsx(Text, { accessibilityRole: "progressbar", accessibilityValue: { min: 0, max: 100, now: Math.round(state.progress * 100) }, style: { color: c.foreground, fontSize: 18 }, children: state.phase === 'uploading' ? (state.processing ? 'Checking attachment… You can cancel.' : `Uploading… ${Math.round(state.progress * 100)}%`) : state.phase === 'opening' ? (state.progress > 0 ? `Opening… ${Math.round(state.progress * 100)}%` : 'Opening…') : state.phase === 'choosing' ? uiText("Choose an attachment.") : uiText("Preparing recording…") }), state.file && _jsxs(_Fragment, { children: [_jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: state.file.fileName }), _jsx(Text, { style: { color: c.secondary }, children: size(state.file.byteSize) }), (review || state.phase === 'viewing') && _jsx(FileViewer, { file: state.file, kind: state.kind, audio: audio, design: appearance }, state.file.uri)] }), state.error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: state.error }), review && (state.phase === 'review' || state.retryUpload) && _jsx(Control, { label: state.phase === 'failed' ? uiText("Retry upload") : uiText("Add attachment"), icon: state.phase === 'failed' ? 'refresh' : 'send', color: c.accent, onPress: () => void controller.send() })] }) })) }) }) }) });
+            void controller.cancel(); }, children: _jsx(SafeAreaProvider, { style: { flex: 1, backgroundColor: state.kind === 'image' || state.kind === 'video' ? 'rgba(0,0,0,0.94)' : messagingPopupBackdrop }, children: _jsx(SafeAreaView, { edges: expanded ? [] : ['top', 'bottom', 'left', 'right'], style: { flex: 1 }, children: _jsx(View, { style: { flex: 1, margin: state.kind === 'image' || state.kind === 'video' ? 0 : 8, borderRadius: state.kind === 'image' || state.kind === 'video' ? 0 : 18, overflow: 'hidden', backgroundColor: state.kind === 'image' || state.kind === 'video' ? 'transparent' : '#000000' }, children: viewer ?? (_jsx(View, { style: { flex: 1, backgroundColor: c.background }, children: _jsxs(ScrollView, { contentContainerStyle: { padding: 8, paddingTop: 0, gap: 12, flexGrow: 1 }, children: [_jsx(MessagingPopupHeader, { title: state.kind === 'voice' ? uiText("Voice message") : state.kind === 'image' ? uiText("Photo") : state.kind === 'video' ? uiText("Video") : uiText("File"), foreground: c.foreground, closeLabel: uiText("Close attachment"), onClose: () => void controller.cancel() }), state.phase === 'recording' ? _jsxs(View, { style: { alignItems: 'center', gap: 20, paddingVertical: 32 }, children: [_jsx(MaterialIcons, { name: "mic", size: 48, color: c.accent }), _jsx(Text, { style: { color: c.foreground, fontSize: 32, fontVariant: ['tabular-nums'] }, children: time(state.elapsedMs) }), _jsx(Text, { style: { color: c.secondary }, children: uiText('{time} remaining', { time: time(Math.max(0, state.maxDurationMs - state.elapsedMs)) }) }), _jsx(Control, { label: uiText("Stop recording"), icon: "stop", color: c.accent, onPress: () => void controller.finishRecording() })] }) : null, ['choosing', 'preparing', 'uploading', 'opening'].includes(state.phase) && _jsx(Text, { accessibilityRole: "progressbar", accessibilityValue: { min: 0, max: 100, now: Math.round(state.progress * 100) }, style: { color: c.foreground, fontSize: 18 }, children: state.phase === 'uploading' ? (state.processing ? uiText('Checking attachment… You can cancel.') : uiText('Uploading… {progress}%', { progress: Math.round(state.progress * 100) })) : state.phase === 'opening' ? (state.progress > 0 ? uiText('Opening… {progress}%', { progress: Math.round(state.progress * 100) }) : uiText('Opening…')) : state.phase === 'choosing' ? uiText("Choose an attachment.") : uiText("Preparing recording…") }), state.file && _jsxs(_Fragment, { children: [_jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: state.file.fileName }), _jsx(Text, { style: { color: c.secondary }, children: size(state.file.byteSize) }), (review || state.phase === 'viewing') && _jsx(FileViewer, { file: state.file, kind: state.kind, audio: audio, design: appearance }, state.file.uri)] }), state.error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: state.error }), review && (state.phase === 'review' || state.retryUpload) && _jsx(Control, { label: state.phase === 'failed' ? uiText("Retry upload") : uiText("Add attachment"), icon: state.phase === 'failed' ? 'refresh' : 'send', color: c.accent, onPress: () => void controller.send() })] }) })) }) }) }) });
 }
 /** Optional ready-made recording, preview, upload and download tools for both mobile platforms. */
 export function ExpoMessagingScreen(props) {
@@ -554,20 +556,20 @@ function ExpoMessagingScreenContent({ storage, audioSession, renderConversation,
         current.current.onMediaReady?.({ messageId: event.messageId, kind: event.kind, stage, elapsedMs: Date.now() - event.started });
     }
     catch { } };
-    return _jsx(StreamRecovery.Provider, { value: (uri, position, playing) => { void controller.fallbackStream(uri, position, playing); }, children: _jsxs(MediaReadiness.Provider, { value: mediaReady, children: [renderConversation ? renderConversation(screenProps) : _jsx(MessagingScreen, { ...screenProps }), _jsx(MessagingMediaOverlay, { onDismiss: viewerDismissed, viewerActions: () => {
-                        const m = message.current;
-                        if (!m || !state.messages.some(row => row.id === m.id && !row.deleted))
-                            return {};
-                        const action = (kind) => {
-                            afterViewer.current = { kind, messageId: m.id, sequence: Date.now() };
-                            void controller.cancel().then(() => {
-                                // Some installed native runtimes omit onDismiss after a media modal closes.
-                                // Keep the normal event fast path; recover only after the native fade ends.
-                                // Navigation/unmount clears the queued action, so it cannot open in another chat.
-                                if (afterViewer.current)
-                                    dismissFallback.current = setTimeout(viewerDismissed, Platform.OS === 'ios' ? 500 : 250);
-                            });
-                        };
-                        return { onForward: props.client.canForward(m) ? () => action('forward') : undefined, onDelete: m.senderId === props.userId && !m.readAt && state.messageActionsAvailable ? () => action('delete') : undefined };
-                    }, inlineVoice: () => !!message.current, inlineRecorder: () => !!message.current && !!current.current.client.getSnapshot().settings?.features.voice, controller: controller, audio: audioSession, appearance: props.appearance ?? state.settings?.appearance ?? defaultMessagingSettings().appearance })] }) });
+    return _jsx(MessagingTypography, { appearance: props.appearance ?? state.settings?.appearance ?? defaultMessagingSettings().appearance, children: _jsx(StreamRecovery.Provider, { value: (uri, position, playing) => { void controller.fallbackStream(uri, position, playing); }, children: _jsxs(MediaReadiness.Provider, { value: mediaReady, children: [renderConversation ? renderConversation(screenProps) : _jsx(MessagingScreen, { ...screenProps }), _jsx(MessagingMediaOverlay, { onDismiss: viewerDismissed, viewerActions: () => {
+                            const m = message.current;
+                            if (!m || !state.messages.some(row => row.id === m.id && !row.deleted))
+                                return {};
+                            const action = (kind) => {
+                                afterViewer.current = { kind, messageId: m.id, sequence: Date.now() };
+                                void controller.cancel().then(() => {
+                                    // Some installed native runtimes omit onDismiss after a media modal closes.
+                                    // Keep the normal event fast path; recover only after the native fade ends.
+                                    // Navigation/unmount clears the queued action, so it cannot open in another chat.
+                                    if (afterViewer.current)
+                                        dismissFallback.current = setTimeout(viewerDismissed, Platform.OS === 'ios' ? 500 : 250);
+                                });
+                            };
+                            return { onForward: props.client.canForward(m) ? () => action('forward') : undefined, onDelete: m.senderId === props.userId && !m.readAt && state.messageActionsAvailable ? () => action('delete') : undefined };
+                        }, inlineVoice: () => !!message.current, inlineRecorder: () => !!message.current && !!current.current.client.getSnapshot().settings?.features.voice, controller: controller, audio: audioSession, appearance: props.appearance ?? state.settings?.appearance ?? defaultMessagingSettings().appearance })] }) }) });
 }

package/dist/expo-social.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from './typography.js';
 import { useRobonoLocale } from './localization.js';
-import { Linking, Text, UIManager } from 'react-native';
+import { Linking, UIManager } from 'react-native';
 // Expo builds include this native module when the documented peer is installed.
 const available = !!UIManager.getViewManagerConfig('RNCWebView');
 const WebView = available ? require('react-native-webview').WebView : null;

package/dist/extras.js

@@ -1,7 +1,8 @@
 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 { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { ActivityIndicator, Image, Linking, Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { ActivityIndicator, Image, Linking, Platform, Pressable, ScrollView, View } from 'react-native';
 import { currentTrackers, trackerFresh, weatherTemperature } from '@robono/messaging';
 import { MessagingPopup, messagingPopupColors } from './popup.js';
 import { MessageIcon } from './icons.js';

package/dist/forward.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from './typography.js';
 import { useRobonoLocale } from './localization.js';
 import { messagingPopupColors } from './popup.js';
 import { useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
+import { ActivityIndicator, Pressable, ScrollView, View } from 'react-native';
 import { MessagingPopup } from './popup.js';
 /** Messenger's compact destination picker, retaining per-message retry identities. */
 export function MessagingForward({ messages, client, appearance, participants = {}, userId, onClose }) {

package/dist/group-editor.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, TextInput } from './typography.js';
 import { useRobonoLocale } from './localization.js';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { ActivityIndicator, FlatList, Image, Pressable, Text, TextInput, View } from 'react-native';
+import { ActivityIndicator, FlatList, Image, Pressable, View } from 'react-native';
 import { MessageIcon } from './icons.js';
 import { MessagingPopup, messagingPopupColors as c } from './popup.js';
 /** Messenger's name, group type and contact checklist; changes use member deltas. */

package/dist/header-calls.js

@@ -1,7 +1,8 @@
 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 { Keyboard, Linking, Platform, Pressable, Text, View } from 'react-native';
+import { Keyboard, Linking, Platform, Pressable, View } from 'react-native';
 import { MessageIcon } from './icons.js';
 import { MessagingPopup } from './popup.js';
 /** Matches Messenger: video is separate; the phone button chooses internet/carrier. */

package/dist/icons.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RobonoIcon } from "./visual/RobonoIcon.js";
-export function MessageIcon(props) { return _jsx(RobonoIcon, { ...props }); }
+import { useRobonoLocale } from './localization.js';
+export function MessageIcon(props) { const { direction } = useRobonoLocale(); return _jsx(RobonoIcon, { ...props, style: [props.style, props.name === 'back' && direction === 'rtl' ? { transform: [{ scaleX: -1 }] } : undefined] }); }
 export function duration(ms = 0) { const seconds = Math.ceil(ms / 1000); return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`; }
 export function fileSize(bytes = 0) { return bytes >= 1048576 ? `${(bytes / 1048576).toFixed(1)} MB` : bytes >= 1024 ? `${Math.ceil(bytes / 1024)} KB` : `${bytes} B`; }
 /** Neutral app chrome stays legible for light and dark customer palettes. */

package/dist/inbox-search.d.ts

@@ -1,7 +1,9 @@
+import { type InboxViewMemory } from './inbox-view.js';
 import React from 'react';
 import type { ConversationSummary, MessagingInboxClient, MessagingAppearance } from '@robono/messaging';
 /** Main-screen search covers retained messages beyond the current inbox page. */
-export declare function InboxMessageSearch({ client, query, appearance, name, chats, onSelect }: {
+export declare function InboxMessageSearch({ client, query, appearance, name, chats, onSelect, viewMemory }: {
+    viewMemory: InboxViewMemory;
     client: MessagingInboxClient;
     query: string;
     appearance: MessagingAppearance;