@robono/messaging-react-native 0.11.1 → 0.13.0

package/dist/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MessagingRoomModeration, MessagingRoomRemoval } from './room-moderation.js';
+export { MessagingConnectionState, MessagingSignIn, MessagingPhoneInput, MessagingChoicePicker } from './sign-in.js';
 import { CustomMessage } from './custom-message.js';
 import { MessagingTypography } from './typography.js';
 import { Text, TextInput } from './typography.js';
@@ -349,11 +350,13 @@ function MessageMetadata({ mine, ink, pendingStatus }) {
 }
 export function MessagingBubble({ message, pendingStatus, previousMessage, nextMessage }) {
     const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
-    const { userId, design, state, client, participants, openDiscussion, discussionPreview, discussionRoot, setReply, setEditing, setForwarding, setDeleting, selection, setSelection, saved, saving, toggleSaved, onMessageOptions, openAttachment, language, contact, copyText, components, extras, extrasState, onCallHistory } = useMessagingUI();
-    const extra = !message.custom && !pendingStatus && !message.deleted ? extrasState?.messages[message.id] : undefined;
+    const { userId, design, state, client, participants, openDiscussion, discussionPreview, discussionRoot, setReply, setEditing, setForwarding, setDeleting, selection, setSelection, saved, saving, toggleSaved, onMessageOptions, openAttachment, language, contact, copyText, components, extras, extrasState, onCallHistory, linkHandling } = useMessagingUI();
+    const deliveryStatus = pendingStatus ?? (message.senderId === userId && message.delivery?.state === 'pending' ? 'sending' : message.senderId === userId && message.delivery?.state === 'failed' ? 'failed' : undefined);
+    const candidateExtra = !message.custom && !pendingStatus && !message.deleted ? extrasState?.messages[message.id] : undefined;
+    const extra = candidateExtra?.address && (linkHandling?.addresses === false || linkHandling?.openAddress) ? undefined : candidateExtra;
     const extraRef = useRef(null), socialRef = useRef(null);
     const socialOrigin = useMessagingUI().socialOrigin ?? 'https://robono.com';
-    const socialReady = !message.custom && !extra?.address && !pendingStatus && !message.deleted && message.kind === 'text' && state.settings?.enabled && state.socialPreviewAvailable && components?.SocialPlayer && messageLinks(message.text ?? '').some(link => !!link.url && !!socialShare(link.url, socialOrigin));
+    const socialReady = linkHandling?.webLinks !== false && !linkHandling?.openUrl && !message.custom && !extra?.address && !pendingStatus && !message.deleted && message.kind === 'text' && state.settings?.enabled && state.socialPreviewAvailable && components?.SocialPlayer && messageLinks(message.text ?? '').some(link => !!link.url && !!socialShare(link.url, socialOrigin));
     const contextContactName = contact.name;
     const mine = message.senderId === userId, c = design.colors, ink = message.kind === 'poll' ? c.foreground : mine ? c.outgoingText : c.incomingText;
     const bubbleRadius = design.presentation?.bubbleShape === 'square' ? 2 : design.presentation?.bubbleShape === 'rounded' ? 16 : 8;
@@ -443,14 +446,14 @@ export function MessagingBubble({ message, pendingStatus, previousMessage, nextM
             setBusy(false);
         }
     }
-    const renderLinks = (text) => messageLinks(text).map((part, index) => part.url ? _jsx(Text, { accessibilityRole: "link", onLongPress: menu, onPress: event => { event.stopPropagation(); void Linking.openURL(part.url).catch(() => setError(uiText("This link could not be opened."))); }, style: { textDecorationLine: 'underline' }, children: part.text }, index) : part.text);
-    const renderText = (text) => { const address = findChatAddress(text); return address ? _jsxs(_Fragment, { children: [renderLinks(text.slice(0, address.start)), _jsx(Text, { accessibilityRole: "link", onLongPress: menu, onPress: event => { event.stopPropagation(); void openChatAddress(address.text).catch(() => setError(uiText("Maps could not be opened."))); }, style: { color: c.accent, textDecorationLine: 'underline' }, children: address.text }), renderLinks(text.slice(address.end))] }) : renderLinks(text); };
+    const renderLinks = (text) => messageLinks(text).map((part, index) => part.url && linkHandling?.webLinks !== false ? _jsx(Text, { accessibilityRole: "link", onLongPress: menu, onPress: event => { event.stopPropagation(); void Promise.resolve().then(() => linkHandling?.openUrl ? linkHandling.openUrl(part.url, message) : Linking.openURL(part.url)).catch(() => setError(uiText("This link could not be opened."))); }, style: { textDecorationLine: 'underline' }, children: part.text }, index) : part.text);
+    const renderText = (text) => { const address = linkHandling?.addresses === false ? null : findChatAddress(text); return address ? _jsxs(_Fragment, { children: [renderLinks(text.slice(0, address.start)), _jsx(Text, { accessibilityRole: "link", onLongPress: menu, onPress: event => { event.stopPropagation(); void Promise.resolve().then(() => linkHandling?.openAddress ? linkHandling.openAddress(address.text, message) : openChatAddress(address.text)).catch(() => setError(uiText("Maps could not be opened."))); }, style: { color: c.accent, textDecorationLine: 'underline' }, children: address.text }), renderLinks(text.slice(address.end))] }) : renderLinks(text); };
     const extraCard = extra && extras ? _jsx(MessageExtra, { ref: extraRef, addressBubbleHeight: addressBubbleHeight, extra: extra, messageId: message.id, userId: userId, extras: extras, ink: ink, accent: c.accent, background: c.background, foreground: c.foreground, Map: components?.TrackingMap, onLongPress: menu, onCall: onCallHistory, footer: _jsx(MessageMetadata, { message: message, mine: mine, ink: ink }), renderAddress: (action, people) => _jsxs(_Fragment, { children: [_jsxs(Pressable, { onLayout: event => { const h = event.nativeEvent.layout.height; setAddressBubbleHeight(old => Math.abs(old - h) < .5 ? old : h); }, testID: "address-message-bubble", accessibilityRole: "button", accessibilityLabel: uiText("Show live tracking map"), hitSlop: { top: 6, bottom: 6, left: 4, right: 4 }, onLongPress: menu, onPress: event => { event.stopPropagation(); if (!quoteGesture.suppressPress())
                         extraRef.current?.open(); }, style: { flexShrink: 1, minWidth: 0, minHeight: 44, justifyContent: 'center', position: 'relative', backgroundColor: mine ? c.outgoing : c.incoming, borderRadius: bubbleRadius, paddingHorizontal: 6, paddingVertical: 3 }, children: [bubbleBody, people] }), action] }) }) : null;
     const socialCard = socialReady && components?.SocialPlayer ? _jsx(SocialMessagePreview, { ref: socialRef, onLongPress: menu, message: message, client: client, Player: components.SocialPlayer, origin: socialOrigin, accent: c.accent, foreground: c.foreground, background: c.background, renderMessage: action => _jsxs(_Fragment, { children: [_jsx(View, { testID: "social-message-bubble", style: { flexShrink: 1, minWidth: 0, minHeight: 44, justifyContent: 'center', position: 'relative', backgroundColor: mine ? c.outgoing : c.incoming, borderRadius: bubbleRadius, paddingHorizontal: 6, paddingVertical: 3 }, children: bubbleBody }), action] }) }) : null;
     const canCopy = !!message.text && (!!copyText || Platform.OS === 'web');
     const reactionPicker = !mine && canInteract && state.settings?.features.reactions && _jsx(View, { testID: "message-reaction-picker", accessibilityLabel: uiText("Choose a reaction"), style: { height: 50, borderRadius: 25, backgroundColor: '#171717', borderWidth: .5, borderColor: '#ffffff24', justifyContent: 'center', boxShadow: '0 6px 14px #0006' }, children: _jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, keyboardShouldPersistTaps: "handled", contentContainerStyle: { alignItems: 'center', paddingHorizontal: 8, gap: 4 }, children: messageReactions.map(emoji => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("React {value1}", { value1: emoji }), accessibilityState: { selected: !!message.reactions?.some(r => r.emoji === emoji && r.userIds.includes(userId)) }, disabled: busy, onPress: () => void react(emoji), style: { width: 40, height: 38, borderRadius: 19, alignItems: 'center', justifyContent: 'center', backgroundColor: message.reactions?.some(r => r.emoji === emoji && r.userIds.includes(userId)) ? '#f0843433' : 'transparent' }, children: _jsx(Text, { style: { fontSize: 23, lineHeight: 28 }, children: emoji }) }, emoji)) }) });
-    const footer = _jsx(MessageMetadata, { message: message, mine: mine, ink: visual ? '#ffffff' : ink, pendingStatus: pendingStatus });
+    const footer = _jsx(MessageMetadata, { message: message, mine: mine, ink: visual ? '#ffffff' : ink, pendingStatus: deliveryStatus });
     const bigEmoji = message.kind === 'text' && !message.replyTo && !extra && !canTranslate && !transformed && isBigEmojiText(message.text);
     const showingTransform = !!transformed && !showOriginal && (transformed.kind === 'transcript' || canTranslate);
     const languageActions = (canTranscript || canTranslate || transformed) && _jsxs(View, { testID: "message-language-actions", style: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: voice && !showingTransform ? 'flex-end' : 'flex-start', columnGap: 8, rowGap: 0 }, children: [transformed && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: showOriginal ? (transformed.kind === 'transcript' ? 'Show transcript' : 'Show translation') : uiText("Show original"), onPress: () => { setTranslationAutoPlay(false); setShowOriginal(v => !v); }, hitSlop: 8, style: { minHeight: 17, paddingVertical: 1, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 11, lineHeight: 15 }, children: showOriginal ? (transformed.kind === 'transcript' ? 'Show transcript' : 'Show translation') : uiText("Show original") }) }), canTranscript && !transformed && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Read voice message"), disabled: transforming, onPress: () => void transform('transcript'), hitSlop: 8, style: { minHeight: 17, paddingVertical: 1, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 11, lineHeight: 15 }, children: transforming ? uiText("Transcribing…") : uiText("Transcript") }) }), canTranslate && transformed?.kind !== 'translation' && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: translation.mode === 'voice' ? uiText("Play translation") : uiText("Translate message"), disabled: transforming, onPress: () => void transform('translation', translation.mode === 'voice' ? 'voice' : 'text'), hitSlop: 8, style: { minHeight: 17, paddingVertical: 1, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 11, lineHeight: 15 }, children: translation.mode === 'voice' ? uiText("Play Translation") : uiText("Translate") }) })] });
@@ -459,11 +462,11 @@ export function MessagingBubble({ message, pendingStatus, previousMessage, nextM
     const content = showingTransform ? _jsxs(View, { children: [_jsx(Text, { style: { color: ink, fontSize: 11, opacity: .65, marginBottom: 2 }, children: transformed.kind === 'transcript' ? uiText("Transcript") : 'Translated · ' + supportedLanguageLabel(translationLanguage) }), transformed.audio && TranslationVoice ? _jsx(View, { testID: "message-translated-voice", children: _jsx(TranslationVoice, { transform: transformed, ink: ink, accent: c.accent, showWaveform: design.showWaveform !== false, autoPlay: translationAutoPlay }) }) : _jsx(Text, { testID: "message-language-result", selectable: true, style: { color: ink, fontSize: 16, lineHeight: 22 }, children: transformed.text }), !voice && footer] }) : originalContent;
     const regionProps = { message, mine, appearance: design, pendingStatus };
     const bodyContent = components?.MessageBody && !message.deleted ? _jsx(components.MessageBody, { ...regionProps, children: content }) : content;
-    const bubbleBody = _jsxs(_Fragment, { children: [!bigEmoji && (!mine || !pendingStatus) && _jsx(View, { testID: mine ? (message.readAt && state.settings?.features.readReceipts ? 'message-status-read' : 'message-status-sent') : 'message-status-incoming', pointerEvents: "none", accessible: false, style: { position: 'absolute', top: joinsBefore ? -(messageGap + 2) / 2 : 0, bottom: joinsAfter ? -(messageGap + 2) / 2 : 0, start: 0, end: 0, zIndex: 40, ...(mine ? { borderEndWidth: 2, borderEndColor: message.readAt && state.settings?.features.readReceipts ? c.accent : c.foreground, borderTopEndRadius: joinsBefore ? 0 : voice && !message.text && !showingTransform ? 24 : bubbleRadius, borderBottomEndRadius: joinsAfter ? 0 : voice && !message.text && !showingTransform ? 24 : bubbleRadius } : { borderStartWidth: 2, borderStartColor: '#2B2B2B', borderTopStartRadius: joinsBefore ? 0 : voice && !message.text && !showingTransform ? 24 : bubbleRadius, borderBottomStartRadius: joinsAfter ? 0 : voice && !message.text && !showingTransform ? 24 : bubbleRadius }) } }), message.replyTo && message.replyTo !== discussionRoot && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Go to quoted message"), onLongPress: menu, onPress: () => { void client.focusMessage(message.replyTo).catch(e => setError(e instanceof Error ? e.message : uiText("This message is unavailable."))); }, style: { borderLeftWidth: 3, borderLeftColor: c.accent, paddingLeft: 9, paddingVertical: 5, marginBottom: 7 }, children: _jsx(QuotedPreview, { message: state.messages.find(m => m.id === message.replyTo) ?? state.quotedMessages?.find(m => m.id === message.replyTo), ink: ink }) }), !mine && !grouped && state.conversation?.kind === 'group' && _jsx(Text, { style: { color: ink, fontSize: 12, fontWeight: '600', marginBottom: 5 }, children: message.deleted ? uiText("Former member") : participants?.[message.senderId]?.name ?? uiText("Member") }), message.custom || extra?.address || extra?.weather || extra?.call || voice || message.kind === 'poll' ? bodyContent : _jsx(Pressable, { accessibilityRole: message.kind === 'text' ? undefined : 'button', accessibilityLabel: message.kind === 'text' ? undefined : uiText('{kind}: {name}', { kind: uiText(mediaNames[message.kind]), name: message.media?.fileName ?? uiText('Open attachment') }), disabled: busy, onLongPress: menu, onPress: message.kind === 'text' ? () => { if (quoteGesture.suppressPress())
+    const bubbleBody = _jsxs(_Fragment, { children: [!bigEmoji && (!mine || !deliveryStatus) && _jsx(View, { testID: mine ? (message.readAt && state.settings?.features.readReceipts ? 'message-status-read' : 'message-status-sent') : 'message-status-incoming', pointerEvents: "none", accessible: false, style: { position: 'absolute', top: joinsBefore ? -(messageGap + 2) / 2 : 0, bottom: joinsAfter ? -(messageGap + 2) / 2 : 0, start: 0, end: 0, zIndex: 40, ...(mine ? { borderEndWidth: 2, borderEndColor: message.readAt && state.settings?.features.readReceipts ? c.accent : c.foreground, borderTopEndRadius: joinsBefore ? 0 : voice && !message.text && !showingTransform ? 24 : bubbleRadius, borderBottomEndRadius: joinsAfter ? 0 : voice && !message.text && !showingTransform ? 24 : bubbleRadius } : { borderStartWidth: 2, borderStartColor: '#2B2B2B', borderTopStartRadius: joinsBefore ? 0 : voice && !message.text && !showingTransform ? 24 : bubbleRadius, borderBottomStartRadius: joinsAfter ? 0 : voice && !message.text && !showingTransform ? 24 : bubbleRadius }) } }), message.replyTo && message.replyTo !== discussionRoot && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Go to quoted message"), onLongPress: menu, onPress: () => { void client.focusMessage(message.replyTo).catch(e => setError(e instanceof Error ? e.message : uiText("This message is unavailable."))); }, style: { borderLeftWidth: 3, borderLeftColor: c.accent, paddingLeft: 9, paddingVertical: 5, marginBottom: 7 }, children: _jsx(QuotedPreview, { message: state.messages.find(m => m.id === message.replyTo) ?? state.quotedMessages?.find(m => m.id === message.replyTo), ink: ink }) }), !mine && !grouped && state.conversation?.kind === 'group' && _jsx(Text, { style: { color: ink, fontSize: 12, fontWeight: '600', marginBottom: 5 }, children: message.deleted ? uiText("Former member") : participants?.[message.senderId]?.name ?? uiText("Member") }), message.custom || extra?.address || extra?.weather || extra?.call || voice || message.kind === 'poll' ? bodyContent : _jsx(Pressable, { accessibilityRole: message.kind === 'text' ? undefined : 'button', accessibilityLabel: message.kind === 'text' ? undefined : uiText('{kind}: {name}', { kind: uiText(mediaNames[message.kind]), name: message.media?.fileName ?? uiText('Open attachment') }), disabled: busy, onLongPress: menu, onPress: message.kind === 'text' ? () => { if (quoteGesture.suppressPress())
                     return; if (extra?.address)
                     extraRef.current?.open();
                 else
-                    socialRef.current?.open(); } : () => void open(), children: bodyContent }), !discussionPreview && state.discussionAvailable && !!message.replyCount && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: message.replyCount + ' ' + (message.replyCount === 1 ? 'reply' : 'replies'), onPress: () => openDiscussion(message.id), style: { minHeight: 32, justifyContent: 'center' }, children: _jsxs(Text, { style: { color: c.accent, fontSize: 12, fontWeight: '600' }, children: [message.replyCount, " ", message.replyCount === 1 ? uiText("reply") : uiText("replies")] }) }), message.kind !== 'text' && !!message.text && _jsx(Text, { selectable: true, onLongPress: menu, style: { color: ink, fontSize: 16, lineHeight: 22, marginTop: 4 }, children: renderText(message.text) }), message.kind !== 'text' && message.kind !== 'poll' && !voice && !visual && _jsx(View, { style: { marginTop: 4, alignSelf: 'flex-end' }, children: footer }), (!voice || showingTransform) && languageActions, components?.MessageFooter && !message.deleted && _jsx(components.MessageFooter, { ...regionProps }), transforming && !voice && _jsx(Text, { accessibilityLiveRegion: "polite", style: { color: ink, fontSize: 11 }, children: uiText("Converting…") }), busy && !voice && _jsx(Text, { style: { color: ink, fontSize: 12, marginTop: 4 }, children: uiText("Opening…") }), !!error && _jsxs(MessagingPopup, { compact: true, contentWidth: 640, title: uiText("Message"), foreground: c.foreground, background: chatSurface(c.background), onClose: () => setError(''), children: [_jsx(Text, { accessibilityRole: "alert", style: { color: messagingPopupColors.foreground, fontSize: 15, lineHeight: 21, marginTop: 8 }, children: error }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Close message alert"), onPress: () => setError(''), style: { alignSelf: 'flex-end', minHeight: 44, justifyContent: 'center', paddingHorizontal: 8, marginTop: 8 }, children: _jsx(Text, { style: { color: c.accent }, children: uiText("OK") }) })] }), pendingStatus === 'failed' && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Retry sending message"), onPress: () => void client.retry(message.clientMessageId).catch(() => { }), style: { minHeight: 32, justifyContent: 'center', alignSelf: 'flex-end' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 12 }, children: design.labels.retry }) }), Platform.OS === 'web' && !mine && canInteract && state.settings?.features.reactions && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("React to message"), onFocus: () => setHovered(true), onBlur: () => setHovered(false), onPress: openMenu, style: { opacity: hovered || actions ? 1 : 0, position: 'absolute', top: 6, ...(mine ? { left: -34 } : { right: -34 }), width: 32, height: 32, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "reaction", color: c.secondary, size: 20 }) }), !!message.reactions?.length && _jsx(View, { testID: "message-reaction-badge", pointerEvents: "none", accessibilityLabel: message.reactions.slice(-3).map(r => r.emoji).join(' '), style: { position: 'absolute', zIndex: 41, top: -16, ...(mine ? { end: -9 } : { start: -9 }), minWidth: 30, height: 20, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontSize: 16, lineHeight: 20 }, children: message.reactions.slice(-3).map(r => r.emoji).join(' ') }) }), _jsxs(MessageMenu, { visible: actions, position: menuPosition, screenHeight: viewport.height, mine: mine, reactions: reactionPicker, onClose: () => setActions(false), onDismiss: menuDismissed, children: [quoting && _jsx(MessageMenuRow, { icon: "quote", label: uiText("Quote message"), onPress: () => { setActions(false); setReply(message); } }), !discussionPreview && state.discussionAvailable && !pendingStatus && !message.deleted && _jsx(MessageMenuRow, { icon: "quote", label: uiText("Replies"), onPress: () => leaveMenu(() => openDiscussion(message.threadRoot ?? message.id)) }), state.discussionAvailable && canInteract && state.conversation?.ownerId === userId && _jsx(MessageMenuRow, { icon: "bookmark", label: message.pinned ? uiText("Unpin for group") : uiText("Pin for group"), onPress: () => { setActions(false); void client.pinMessage(message.id, !message.pinned).catch(e => setError(e instanceof Error ? e.message : uiText("The pin could not change."))); } }), canCopy && _jsx(MessageMenuRow, { icon: "copy", label: uiText("Copy"), onPress: () => { setActions(false); void (copyText ? copyText(message.text) : navigator.clipboard.writeText(message.text)).catch(() => setError(uiText("The text could not be copied."))); } }), canInteract && client.canForward(message) && _jsx(MessageMenuRow, { icon: "redo", label: uiText("Forward"), onPress: () => leaveMenu(() => setForwarding([message])) }), !pendingStatus && !message.deleted && message.kind !== 'poll' && client.hasSavedMessages() && _jsx(MessageMenuRow, { icon: "bookmark", label: saved.some(r => r.key === savedMessageKey(message)) ? uiText("Remove from Saved") : uiText("Save"), disabled: saving, onPress: () => { setActions(false); void toggleSaved(message); } }), canChange && !message.custom && message.kind !== 'poll' && state.settings?.features[message.kind] && _jsx(MessageMenuRow, { icon: "edit", label: uiText("Edit"), onPress: () => { setActions(false); setEditing(message); } }), !mine && state.conversation?.safety?.canReport && _jsx(MessageMenuRow, { icon: "flag", label: uiText("Report"), danger: true, onPress: () => leaveMenu(() => setReportOpen(true)) }), !pendingStatus && !message.deleted && ['owner', 'moderator'].includes(state.conversation?.roomRole ?? '') && _jsx(MessageMenuRow, { icon: "trash", label: uiText('Remove from group'), danger: true, onPress: () => leaveMenu(() => setRoomRemoval(true)) }), canChange && _jsx(MessageMenuRow, { icon: "trash", label: uiText("Delete"), danger: true, onPress: () => leaveMenu(() => setDeleting([message])) }), (pendingStatus === 'failed' || pendingStatus === 'queued') && _jsx(MessageMenuRow, { icon: "trash", label: uiText("Remove unsent message"), danger: true, onPress: () => { setActions(false); void client.discardPending(message.clientMessageId).catch(() => setError(uiText("The unsent message could not be removed."))); } }), !pendingStatus && onMessageOptions && _jsx(MessageMenuRow, { icon: "more", label: uiText("More options"), onPress: () => leaveMenu(() => onMessageOptions(message)) }), !pendingStatus && !message.deleted && _jsx(MessageMenuRow, { icon: "check", label: uiText("Select Multiple"), divider: true, onPress: () => { setActions(false); setSelection([message]); Keyboard.dismiss(); } })] }), roomRemoval && _jsx(MessagingRoomRemoval, { client: client, message: message, accent: c.accent, onClose: () => setRoomRemoval(false) }), reportOpen && _jsx(MessagingSafety, { client: client, state: state, appearance: design, name: participants?.[message.senderId]?.name ?? 'Contact', messageId: message.id, onClose: () => setReportOpen(false) })] });
+                    socialRef.current?.open(); } : () => void open(), children: bodyContent }), !discussionPreview && state.discussionAvailable && !!message.replyCount && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: message.replyCount + ' ' + (message.replyCount === 1 ? 'reply' : 'replies'), onPress: () => openDiscussion(message.id), style: { minHeight: 32, justifyContent: 'center' }, children: _jsxs(Text, { style: { color: c.accent, fontSize: 12, fontWeight: '600' }, children: [message.replyCount, " ", message.replyCount === 1 ? uiText("reply") : uiText("replies")] }) }), message.kind !== 'text' && !!message.text && _jsx(Text, { selectable: true, onLongPress: menu, style: { color: ink, fontSize: 16, lineHeight: 22, marginTop: 4 }, children: renderText(message.text) }), message.kind !== 'text' && message.kind !== 'poll' && !voice && !visual && _jsx(View, { style: { marginTop: 4, alignSelf: 'flex-end' }, children: footer }), (!voice || showingTransform) && languageActions, components?.MessageFooter && !message.deleted && _jsx(components.MessageFooter, { ...regionProps }), transforming && !voice && _jsx(Text, { accessibilityLiveRegion: "polite", style: { color: ink, fontSize: 11 }, children: uiText("Converting…") }), busy && !voice && _jsx(Text, { style: { color: ink, fontSize: 12, marginTop: 4 }, children: uiText("Opening…") }), !!error && _jsxs(MessagingPopup, { compact: true, contentWidth: 640, title: uiText("Message"), foreground: c.foreground, background: chatSurface(c.background), onClose: () => setError(''), children: [_jsx(Text, { accessibilityRole: "alert", style: { color: messagingPopupColors.foreground, fontSize: 15, lineHeight: 21, marginTop: 8 }, children: error }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Close message alert"), onPress: () => setError(''), style: { alignSelf: 'flex-end', minHeight: 44, justifyContent: 'center', paddingHorizontal: 8, marginTop: 8 }, children: _jsx(Text, { style: { color: c.accent }, children: uiText("OK") }) })] }), deliveryStatus === 'failed' && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Retry sending message"), onPress: () => void client.retry(message.clientMessageId).catch(() => { }), style: { minHeight: 32, justifyContent: 'center', alignSelf: 'flex-end' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 12 }, children: design.labels.retry }) }), Platform.OS === 'web' && !mine && canInteract && state.settings?.features.reactions && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("React to message"), onFocus: () => setHovered(true), onBlur: () => setHovered(false), onPress: openMenu, style: { opacity: hovered || actions ? 1 : 0, position: 'absolute', top: 6, ...(mine ? { left: -34 } : { right: -34 }), width: 32, height: 32, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "reaction", color: c.secondary, size: 20 }) }), !!message.reactions?.length && _jsx(View, { testID: "message-reaction-badge", pointerEvents: "none", accessibilityLabel: message.reactions.slice(-3).map(r => r.emoji).join(' '), style: { position: 'absolute', zIndex: 41, top: -16, ...(mine ? { end: -9 } : { start: -9 }), minWidth: 30, height: 20, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontSize: 16, lineHeight: 20 }, children: message.reactions.slice(-3).map(r => r.emoji).join(' ') }) }), _jsxs(MessageMenu, { visible: actions, position: menuPosition, screenHeight: viewport.height, mine: mine, reactions: reactionPicker, onClose: () => setActions(false), onDismiss: menuDismissed, children: [quoting && _jsx(MessageMenuRow, { icon: "quote", label: uiText("Quote message"), onPress: () => { setActions(false); setReply(message); } }), !discussionPreview && state.discussionAvailable && !pendingStatus && !message.deleted && _jsx(MessageMenuRow, { icon: "quote", label: uiText("Replies"), onPress: () => leaveMenu(() => openDiscussion(message.threadRoot ?? message.id)) }), state.discussionAvailable && canInteract && state.conversation?.ownerId === userId && _jsx(MessageMenuRow, { icon: "bookmark", label: message.pinned ? uiText("Unpin for group") : uiText("Pin for group"), onPress: () => { setActions(false); void client.pinMessage(message.id, !message.pinned).catch(e => setError(e instanceof Error ? e.message : uiText("The pin could not change."))); } }), canCopy && _jsx(MessageMenuRow, { icon: "copy", label: uiText("Copy"), onPress: () => { setActions(false); void (copyText ? copyText(message.text) : navigator.clipboard.writeText(message.text)).catch(() => setError(uiText("The text could not be copied."))); } }), canInteract && client.canForward(message) && _jsx(MessageMenuRow, { icon: "redo", label: uiText("Forward"), onPress: () => leaveMenu(() => setForwarding([message])) }), !pendingStatus && !message.deleted && message.kind !== 'poll' && client.hasSavedMessages() && _jsx(MessageMenuRow, { icon: "bookmark", label: saved.some(r => r.key === savedMessageKey(message)) ? uiText("Remove from Saved") : uiText("Save"), disabled: saving, onPress: () => { setActions(false); void toggleSaved(message); } }), canChange && !message.custom && message.kind !== 'poll' && state.settings?.features[message.kind] && _jsx(MessageMenuRow, { icon: "edit", label: uiText("Edit"), onPress: () => { setActions(false); setEditing(message); } }), !mine && state.conversation?.safety?.canReport && _jsx(MessageMenuRow, { icon: "flag", label: uiText("Report"), danger: true, onPress: () => leaveMenu(() => setReportOpen(true)) }), !pendingStatus && !message.deleted && ['owner', 'moderator'].includes(state.conversation?.roomRole ?? '') && _jsx(MessageMenuRow, { icon: "trash", label: uiText('Remove from group'), danger: true, onPress: () => leaveMenu(() => setRoomRemoval(true)) }), canChange && _jsx(MessageMenuRow, { icon: "trash", label: uiText("Delete"), danger: true, onPress: () => leaveMenu(() => setDeleting([message])) }), (pendingStatus === 'failed' || pendingStatus === 'queued') && _jsx(MessageMenuRow, { icon: "trash", label: uiText("Remove unsent message"), danger: true, onPress: () => { setActions(false); void client.discardPending(message.clientMessageId).catch(() => setError(uiText("The unsent message could not be removed."))); } }), !pendingStatus && onMessageOptions && _jsx(MessageMenuRow, { icon: "more", label: uiText("More options"), onPress: () => leaveMenu(() => onMessageOptions(message)) }), !pendingStatus && !message.deleted && _jsx(MessageMenuRow, { icon: "check", label: uiText("Select Multiple"), divider: true, onPress: () => { setActions(false); setSelection([message]); Keyboard.dismiss(); } })] }), roomRemoval && _jsx(MessagingRoomRemoval, { client: client, message: message, accent: c.accent, onClose: () => setRoomRemoval(false) }), reportOpen && _jsx(MessagingSafety, { client: client, state: state, appearance: design, name: participants?.[message.senderId]?.name ?? 'Contact', messageId: message.id, onClose: () => setReportOpen(false) })] });
     return _jsxs(View, { ...(Platform.OS === 'web' ? { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onContextMenu: (event) => { event.preventDefault(); menu(); } } : {}), style: { width: '100%', position: 'relative', marginTop: messageGap + (message.reactions?.length ? 16 : 0), marginBottom: 0 }, children: [quoteGesture.infoLoaded && _jsxs(Animated.View, { pointerEvents: "none", testID: "message-info-reveal", accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: { ...quoteGesture.revealWebStyle, position: 'absolute', top: '50%', marginTop: -26, minHeight: 52, width: messageInfoRevealWidth, justifyContent: 'center', ...(mine ? { start: 0, alignItems: 'flex-start' } : { end: 0, alignItems: 'flex-end' }), opacity: quoteGesture.infoOpacity }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'baseline', gap: 4 }, children: [_jsx(Text, { style: { color: c.secondary, fontSize: 8, lineHeight: 11, fontWeight: '900' }, children: uiText("SENT:") }), _jsx(Text, { style: { color: c.foreground, fontSize: 10, lineHeight: 12, fontWeight: '800' }, children: messageTimeLabel(message, uiLocale, uiText) })] }), mine && state.settings?.features.readReceipts && _jsxs(View, { style: { flexDirection: 'row', alignItems: 'baseline', gap: 4 }, children: [_jsx(Text, { style: { color: c.secondary, fontSize: 8, lineHeight: 11, fontWeight: '900' }, children: uiText("READ:") }), _jsx(Text, { style: { color: message.readAt ? c.foreground : c.secondary, fontSize: 10, lineHeight: 12, fontWeight: '800' }, children: message.readAt ? new Date(message.readAt).toLocaleTimeString(uiLocale, { hour: 'numeric', minute: '2-digit' }) : uiText("Not yet") })] })] }), quoting && _jsxs(Animated.View, { pointerEvents: "none", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : { accessible: false, accessibilityElementsHidden: true, importantForAccessibility: 'no-hide-descendants' }), testID: `quote-reveal-${mine ? 'outgoing' : 'incoming'}`, style: { ...quoteGesture.revealWebStyle, position: 'absolute', top: '50%', marginTop: -26, ...(mine ? { end: 0 } : { start: 0 }), width: messageReplyRevealWidth, minHeight: 52, gap: 3, alignItems: 'center', justifyContent: 'center', opacity: quoteGesture.revealOpacity }, children: [_jsx(View, { style: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center', backgroundColor: chatSurface(c.background), borderWidth: 1.5, borderColor: c.secondary + '40' }, children: _jsx(MessageIcon, { name: "quote", color: c.accent, size: 30 }) }), _jsx(Text, { style: { color: c.secondary, fontSize: 10, fontWeight: '900' }, children: uiText("QUOTE MESSAGE") })] }), _jsx(Animated.View, { ref: node => { anchor.current = node; if (quoteGesture.webRef)
                     quoteGesture.webRef.current = node; }, ...quoteGesture.handlers, accessibilityActions: quoting ? [{ name: "quote", label: uiText("Quote message") }] : undefined, onAccessibilityAction: event => { if (quoting && event.nativeEvent.actionName === "quote")
                     setReply(message); }, testID: `message-${message.kind}-${mine ? 'outgoing' : 'incoming'}`, style: { ...quoteGesture.webStyle, transform: [{ translateX: quoteGesture.offset }], ...(Platform.OS === "web" && !pendingStatus ? { touchAction: "pan-y", userSelect: "none" } : {}), alignSelf: mine ? 'flex-end' : 'flex-start', maxWidth: '88%', backgroundColor: mine ? c.outgoing : c.incoming, borderRadius: bubbleRadius, padding: visual ? 3 : 6, paddingBottom: visual || canTranscript || canTranslate ? 3 : 6, boxShadow: bigEmoji ? undefined : '0 1px 1px #00000010', ...(voice && !message.text && !showingTransform ? { backgroundColor: 'transparent', padding: 0, paddingBottom: 0, boxShadow: undefined } : {}), ...(message.kind === 'poll' ? { backgroundColor: chatSurface(c.background), borderWidth: 1, borderColor: c.accent + '60', paddingHorizontal: 8, paddingTop: 4, paddingBottom: 2 } : {}), ...(bigEmoji ? { backgroundColor: 'transparent', paddingHorizontal: 4, paddingTop: 0, paddingBottom: 0 } : {}), ...(extra?.address || socialReady ? { flexDirection: mine ? 'row-reverse' : 'row', alignItems: 'center', gap: 8, padding: 0, paddingBottom: 0, backgroundColor: 'transparent', boxShadow: undefined } : {}) }, children: extra?.address ? extraCard : socialReady ? socialCard : bubbleBody })] });
@@ -969,15 +972,15 @@ export function MessagingComposer() {
     return (_jsxs(View, { testID: "messaging-composer", style: { paddingStart: 8, paddingEnd: 0, paddingVertical: 4, gap: 8, backgroundColor: c.background }, children: [mentionSuggestions.length > 0 && _jsx(ScrollView, { keyboardShouldPersistTaps: "handled", style: { maxHeight: 144 }, children: mentionSuggestions.map(id => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText('Mention {name}', { name: participants[id].name }), onPress: () => chooseMention(id), style: { minHeight: 44, paddingHorizontal: 12, justifyContent: 'center', borderBottomWidth: .5, borderBottomColor: c.secondary + '30' }, children: _jsxs(Text, { style: { color: c.accent, fontSize: 16 }, children: ["@", participants[id].name] }) }, id)) }), mentionQuery !== undefined && !!mentionError && _jsx(Text, { style: { color: c.secondary, fontSize: 13 }, children: mentionError }), editing && _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsxs(Text, { numberOfLines: 1, style: { flex: 1, color: c.secondary }, children: [uiText("Editing:"), editing.text || editing.media?.fileName] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Cancel editing"), disabled: busy, onPress: () => setEditing(null), style: { minHeight: 36, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: uiText("Cancel") }) })] }), !editing && reply && (_jsxs(View, { testID: "composer-quote", style: { flexDirection: "row", gap: 8 }, children: [_jsx(View, { style: { flex: 1 }, children: _jsx(QuotedPreview, { message: reply, ink: c.secondary }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Cancel quote"), onPress: () => setReply(null), children: _jsx(Text, { style: { color: c.foreground }, children: uiText("Cancel") }) })] })), state.settings?.history?.mode === 'last_two' && _jsx(Text, { style: { color: c.secondary, fontSize: 11, textAlign: 'center' }, children: uiText("Only the latest two messages are kept.") }), editing ? _jsxs(_Fragment, { children: [renderAttachments(), renderTextComposer()] }) : features?.voice ? _jsx(VoiceComposer, { appearance: design, maxSeconds: state.settings?.voice?.maxDurationSeconds ?? 60, busy: busy, onRecord: () => { Keyboard.dismiss(); void pick('voice'); }, renderAttachments: renderAttachments, renderTextComposer: features?.text || selected.length ? renderTextComposer : undefined, actions: _jsx(_Fragment, { children: (camera || library.image || library.video || library.document || !editing && (features?.poll || weatherAllowed)) && _jsx(Pressable, { ref: attachmentButton, accessibilityRole: "button", accessibilityLabel: uiText("Attach"), accessibilityState: { expanded: attachmentsOpen }, disabled: busy, onPress: () => setAttachmentsOpen(!attachmentsOpen), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: attachmentsOpen ? 'close' : 'plus', color: c.foreground, size: 25 }) }) }) }) : _jsxs(_Fragment, { children: [renderAttachments(), renderTextComposer()] }), attachmentsOpen && _jsx(AttachmentMenu, { anchor: attachmentButton, accent: c.accent, onClose: () => setAttachmentsOpen(false), actions: attachmentActions }), scheduleOpen && _jsx(ScheduleTimePicker, { initial: scheduleAttempt.current?.time, retryAt: scheduleError ? scheduleAttempt.current?.time : undefined, accent: c.accent, busy: busy, error: scheduleError, onSave: time => void schedule(time), onClose: () => setScheduleOpen(false) }), pollOpen && features?.poll && _jsx(PollComposer, { yesNo: state.conversation?.kind !== 'group', appearance: design, onSend: poll => submit({ kind: 'poll', poll }), onCancel: () => setPollOpen(false) }), error && (_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }))] }));
 }
 /** Account navigation. Mount in the inbox/app toolbar, never in a contact menu. */
-export function MessagingAccountMenu({ onNewGroup, onMaps, onPublicRooms } = {}) {
+export function MessagingAccountMenu({ onNewConversation, onNewGroup, onMaps, onPublicRooms } = {}) {
     const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
     const { client, design, setSavedOpen, account, companyName } = useMessagingUI();
     const [open, setOpen] = useState(false), [accountOpen, setAccountOpen] = useState(false), pending = useRef(null);
     const button = useRef(null), viewport = useWindowDimensions(), [anchor, setAnchor] = useState({ x: 12, y: 12 });
     const width = Math.min(218, viewport.width - 24);
-    const show = () => button.current?.measureInWindow((x, y, w, h) => { setAnchor({ x: Math.max(12, Math.min(x + w - width, viewport.width - width - 12)), y: Math.max(12, Math.min(y + h + 4, viewport.height - (client.hasSavedMessages() ? 116 : 72) - (onNewGroup ? 44 : 0) - (onMaps ? 44 : 0) - (onPublicRooms ? 44 : 0))) }); setOpen(true); });
+    const show = () => button.current?.measureInWindow((x, y, w, h) => { setAnchor({ x: Math.max(12, Math.min(x + w - width, viewport.width - width - 12)), y: Math.max(12, Math.min(y + h + 4, viewport.height - (client.hasSavedMessages() ? 116 : 72) - (onNewConversation ? 44 : 0) - (onNewGroup ? 44 : 0) - (onMaps ? 44 : 0) - (onPublicRooms ? 44 : 0))) }); setOpen(true); });
     const dismissed = () => { const next = pending.current; if (!next)
-        return; pending.current = null; requestAnimationFrame(() => next === 'saved' ? setSavedOpen(true) : next === 'group' ? onNewGroup?.() : next === 'maps' ? onMaps?.() : next === 'rooms' ? onPublicRooms?.() : setAccountOpen(true)); };
+        return; pending.current = null; requestAnimationFrame(() => next === 'new-chat' ? onNewConversation?.() : next === 'saved' ? setSavedOpen(true) : next === 'group' ? onNewGroup?.() : next === 'maps' ? onMaps?.() : next === 'rooms' ? onPublicRooms?.() : setAccountOpen(true)); };
     useEffect(() => { if (!open && Platform.OS !== 'ios')
         dismissed(); }, [open]);
     useEffect(() => { if (!open || Platform.OS !== 'web')
@@ -985,7 +988,7 @@ export function MessagingAccountMenu({ onNewGroup, onMaps, onPublicRooms } = {})
         event.stopPropagation();
         setOpen(false);
     } }; document.addEventListener('keydown', key, true); return () => document.removeEventListener('keydown', key, true); }, [open]);
-    return _jsxs(_Fragment, { children: [_jsx(Pressable, { ref: button, accessibilityRole: "button", accessibilityLabel: uiText("Messaging menu"), accessibilityState: { expanded: open }, onPress: show, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "more", color: design.colors.foreground, size: 23 }) }), _jsx(MessagingMenuSurface, { visible: open, onClose: () => setOpen(false), onDismiss: dismissed, children: rect => _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1 }, children: [_jsx(Pressable, { accessibilityLabel: uiText("Close messaging menu"), onPress: () => setOpen(false), style: { position: 'absolute', inset: 0 } }), _jsx(View, { testID: "messaging-account-dropdown", style: { position: 'absolute', left: Math.max(8, Math.min(anchor.x - rect.left, rect.width - Math.min(width, rect.width - 16) - 8)), top: Math.max(8, Math.min(anchor.y - rect.top, rect.height - (client.hasSavedMessages() ? 116 : 72) - (onNewGroup ? 44 : 0) - (onMaps ? 44 : 0) - (onPublicRooms ? 44 : 0) - 8)), width: Math.min(width, rect.width - 16), maxHeight: Math.max(44, rect.height - 16), borderRadius: 16, borderWidth: .5, borderColor: '#ffffff22', backgroundColor: '#151515', paddingVertical: 4, overflow: 'hidden', boxShadow: '0 8px 18px #0006' }, children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Account"), onPress: () => { pending.current = 'account'; setOpen(false); }, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: "person-circle-outline", color: "#f5f5f5", size: 22 }), _jsx(Text, { style: { color: '#f5f5f5', fontSize: 15, fontWeight: '600' }, children: uiText("Account") })] }), onMaps && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Maps"), onPress: () => { pending.current = 'maps'; setOpen(false); }, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: "location", color: "#f5f5f5", size: 22 }), _jsx(Text, { style: { color: '#f5f5f5', fontSize: 15, fontWeight: '600' }, children: uiText("Maps") })] }), onPublicRooms && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Public groups"), onPress: () => { pending.current = 'rooms'; setOpen(false); }, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: "people-outline", color: "#f5f5f5", size: 22 }), _jsx(Text, { style: { color: '#f5f5f5', fontSize: 15, fontWeight: '600' }, children: uiText("Public groups") })] }), onNewGroup && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("New group"), onPress: () => { pending.current = 'group'; setOpen(false); }, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: "people-outline", color: "#f5f5f5", size: 22 }), _jsx(Text, { style: { color: '#f5f5f5', fontSize: 15, fontWeight: '600' }, children: uiText("New group") })] }), client.hasSavedMessages() && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Saved messages"), onPress: () => { pending.current = 'saved'; setOpen(false); }, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: "bookmark-outline", color: "#f5f5f5", size: 22 }), _jsx(Text, { style: { color: '#f5f5f5', fontSize: 15, fontWeight: '600' }, children: uiText("Saved") })] })] }) })] }) }), accountOpen && _jsx(MessagingAccountScreen, { account: account, companyName: companyName ?? design.name, onClose: () => setAccountOpen(false) })] });
+    return _jsxs(_Fragment, { children: [_jsx(Pressable, { ref: button, accessibilityRole: "button", accessibilityLabel: uiText("Messaging menu"), accessibilityState: { expanded: open }, onPress: show, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "more", color: design.colors.foreground, size: 23 }) }), _jsx(MessagingMenuSurface, { visible: open, onClose: () => setOpen(false), onDismiss: dismissed, children: rect => _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1 }, children: [_jsx(Pressable, { accessibilityLabel: uiText("Close messaging menu"), onPress: () => setOpen(false), style: { position: 'absolute', inset: 0 } }), _jsx(View, { testID: "messaging-account-dropdown", style: { position: 'absolute', left: Math.max(8, Math.min(anchor.x - rect.left, rect.width - Math.min(width, rect.width - 16) - 8)), top: Math.max(8, Math.min(anchor.y - rect.top, rect.height - (client.hasSavedMessages() ? 116 : 72) - (onNewConversation ? 44 : 0) - (onNewGroup ? 44 : 0) - (onMaps ? 44 : 0) - (onPublicRooms ? 44 : 0) - 8)), width: Math.min(width, rect.width - 16), maxHeight: Math.max(44, rect.height - 16), borderRadius: 16, borderWidth: .5, borderColor: '#ffffff22', backgroundColor: '#151515', paddingVertical: 4, overflow: 'hidden', boxShadow: '0 8px 18px #0006' }, children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Account"), onPress: () => { pending.current = 'account'; setOpen(false); }, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: "person-circle-outline", color: "#f5f5f5", size: 22 }), _jsx(Text, { style: { color: '#f5f5f5', fontSize: 15, fontWeight: '600' }, children: uiText("Account") })] }), onNewConversation && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("New chat"), onPress: () => { pending.current = 'new-chat'; setOpen(false); }, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: "edit", color: "#f5f5f5", size: 22 }), _jsx(Text, { style: { color: '#f5f5f5', fontSize: 15, fontWeight: '600' }, children: uiText("New chat") })] }), onMaps && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Maps"), onPress: () => { pending.current = 'maps'; setOpen(false); }, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: "location", color: "#f5f5f5", size: 22 }), _jsx(Text, { style: { color: '#f5f5f5', fontSize: 15, fontWeight: '600' }, children: uiText("Maps") })] }), onPublicRooms && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Public groups"), onPress: () => { pending.current = 'rooms'; setOpen(false); }, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: "people-outline", color: "#f5f5f5", size: 22 }), _jsx(Text, { style: { color: '#f5f5f5', fontSize: 15, fontWeight: '600' }, children: uiText("Public groups") })] }), onNewGroup && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("New group"), onPress: () => { pending.current = 'group'; setOpen(false); }, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: "people-outline", color: "#f5f5f5", size: 22 }), _jsx(Text, { style: { color: '#f5f5f5', fontSize: 15, fontWeight: '600' }, children: uiText("New group") })] }), client.hasSavedMessages() && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Saved messages"), onPress: () => { pending.current = 'saved'; setOpen(false); }, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: pressed ? '#ffffff12' : 'transparent' }), children: [_jsx(MessageIcon, { name: "bookmark-outline", color: "#f5f5f5", size: 22 }), _jsx(Text, { style: { color: '#f5f5f5', fontSize: 15, fontWeight: '600' }, children: uiText("Saved") })] })] }) })] }) }), accountOpen && _jsx(MessagingAccountScreen, { account: account, companyName: companyName ?? design.name, onClose: () => setAccountOpen(false) })] });
 }
 function MessagingWaitingChanges() {
     const { state, client, design } = useMessagingUI(), { text: uiText, count } = useRobonoLocale();

package/dist/media-controller.d.ts

@@ -33,6 +33,8 @@ export interface MessagingMediaDevice {
     /** Ordered local selections. No upload or send occurs in the picker. */
     pickMany?(kind: Exclude<MediaKind, 'voice'>, settings: MessagingSettings, signal: AbortSignal, maximum: number, mixedLibrary?: boolean): Promise<LocalMessagingMedia[]>;
     startRecording(maxDurationMs: number, signal: AbortSignal): Promise<void>;
+    /** True only during the operating system's microphone permission handoff. */
+    isRequestingRecordingPermission?(): boolean;
     recordingStatus(): {
         durationMs: number;
         recording: boolean;
@@ -106,10 +108,15 @@ export declare class MessagingMediaController {
     finishRecording(interrupted?: boolean): Promise<void>;
     send(): Promise<void>;
     /** View an owned cache copy of a draft. Closing never removes the original draft. */
-    previewLocal(file: LocalMessagingMedia, kind: MediaKind): Promise<void>;
+    previewLocal(file: LocalMessagingMedia, kind: MediaKind, message?: MessagingMessage): Promise<void>;
     open(message: MessagingMessage): Promise<void>;
     /** Save/share a local copy of a playing stream without replacing its playback source. */
-    exportFile<T>(save: (file: LocalMessagingMedia) => Promise<T>): Promise<T>;
+    exportFile<T>(save: (file: LocalMessagingMedia, context: {
+        message: MessagingMessage | null;
+        signal: AbortSignal;
+    }) => Promise<T>, options?: {
+        reauthorize?: boolean;
+    }): Promise<T>;
     /** Recover a failed/expired native stream once through fresh authorized download. */
     fallbackStream(uri: string, positionMs: number, autoPlay: boolean): Promise<void>;
     private openMedia;

package/dist/media-controller.js

@@ -299,7 +299,7 @@ export class MessagingMediaController {
         }
     }
     /** View an owned cache copy of a draft. Closing never removes the original draft. */
-    async previewLocal(file, kind) {
+    async previewLocal(file, kind, message) {
         const intent = ++this.intent;
         await this.closeCurrent();
         if (intent !== this.intent || this.disposed) {
@@ -307,25 +307,30 @@ export class MessagingMediaController {
             return;
         }
         this.conversationId = this.options.getConversationId();
+        this.openedMessage = message ?? null;
+        this.abort = new AbortController();
         this.update({ phase: 'viewing', kind, file, error: null, progress: 0 });
     }
     open(message) { return this.openMedia(message); }
     /** Save/share a local copy of a playing stream without replacing its playback source. */
-    async exportFile(save) {
-        const file = this.state.file, generation = this.generation, message = this.openedMessage;
+    async exportFile(save, options = {}) {
+        const file = this.state.file, generation = this.generation, message = this.openedMessage, conversationId = this.conversationId;
         if (this.disposed || !file || this.state.phase !== 'viewing')
             throw Error('The media viewer is closed.');
-        if (!file.stream)
-            return save(file);
+        const signal = this.abort?.signal;
+        if (!signal)
+            throw Error('The attachment is unavailable.');
+        if (!file.stream && !options.reauthorize)
+            return save(file, { message, signal });
         if (!message || !this.abort)
             throw Error('The attachment is unavailable.');
-        const copy = await this.options.storage.download(message, { signal: this.abort.signal, onProgress: () => { } });
+        const copy = await this.options.storage.download(options.reauthorize ? { ...message, attachmentDownload: undefined } : message, { signal: this.abort.signal, onProgress: () => { } });
         try {
-            if (!this.isCurrent(generation) || this.options.getConversationId() !== message.conversationId)
+            if (!this.isCurrent(generation) || this.options.getConversationId() !== conversationId)
                 throw Error('The media viewer is closed.');
             if (copy.stream)
                 throw Error('A local file is required to save this attachment.');
-            return await save(copy);
+            return await save(copy, { message, signal });
         }
         finally {
             await this.options.device.remove(copy).catch(() => { });
@@ -335,7 +340,7 @@ export class MessagingMediaController {
     fallbackStream(uri, positionMs, autoPlay) {
         if (!this.state.file?.stream || this.state.file.uri !== uri || !this.openedMessage)
             return Promise.resolve();
-        return this.openMedia(this.openedMessage, { download: true, positionMs, autoPlay });
+        return this.openMedia({ ...this.openedMessage, attachmentDownload: undefined }, { download: true, positionMs, autoPlay });
     }
     async openMedia(message, recovery) {
         const intent = ++this.intent;
@@ -404,7 +409,7 @@ export class MessagingMediaController {
     }
     async interrupt() { if (this.state.phase === 'recording')
         await this.finishRecording(true);
-    else if (this.state.phase === 'preparing')
+    else if (this.state.phase === 'preparing' && !this.options.device.isRequestingRecordingPermission?.())
         await this.cancel(); }
     async dispose() { this.disposed = true; for (const abort of this.preparedAborts.values())
         abort.abort(); this.forwardUploads.clear(); await this.cancel(); await Promise.all([...this.prepared.keys()].map(id => this.releasePrepared(id))); this.listeners.clear(); }

package/dist/media-screening.js

@@ -1,10 +1,16 @@
+// React Native AbortSignal implementations need not expose throwIfAborted/reason.
+function checkCancelled(signal) {
+    if (signal.aborted)
+        throw Object.assign(Error('Cancelled'), { name: 'AbortError' });
+}
 /** Wait between short authenticated requests; never occupy a backend request for a video job. */
 export async function awaitMediaScreening(request, signal, onPending, options = {}) {
     const deadline = Date.now() + (options.timeoutMs ?? 600000);
     while (true) {
-        signal.throwIfAborted();
+        checkCancelled(signal);
         try {
             const value = await request();
+            checkCancelled(signal);
             const error = value?.error;
             if (error?.code === 'screening_pending')
                 throw Object.assign(Error(error.message), { code: error.code });
@@ -15,12 +21,12 @@ export async function awaitMediaScreening(request, signal, onPending, options =
         catch (e) {
             if (e.code !== 'screening_pending')
                 throw e;
-            signal.throwIfAborted();
+            checkCancelled(signal);
             onPending?.();
             if (Date.now() >= deadline)
                 throw Object.assign(Error('This attachment is still being checked. Retry to check its status; it has not been sent.'), { code: 'screening_pending', retryable: true });
             await new Promise((resolve, reject) => {
-                const cancel = () => { clearTimeout(timer); signal.removeEventListener('abort', cancel); reject(Error('Cancelled')); };
+                const cancel = () => { clearTimeout(timer); signal.removeEventListener('abort', cancel); reject(Object.assign(Error('Cancelled'), { name: 'AbortError' })); };
                 const timer = setTimeout(() => { signal.removeEventListener('abort', cancel); resolve(); }, options.pollMs ?? 3000);
                 signal.addEventListener('abort', cancel, { once: true });
                 if (signal.aborted)

package/dist/preview-cache.d.ts

@@ -0,0 +1,24 @@
+type Preview = {
+    uri?: string;
+    waveform?: number[];
+};
+/** Memory-only, bounded previews. Call clear on identity/permission boundaries.
+ * Different images can progress independently without unbounded native work. */
+export declare class MessagingPreviewCache {
+    private options;
+    private now;
+    private entries;
+    private queue;
+    private running;
+    constructor(options?: {
+        concurrency: number;
+        maximum: number;
+        ttlMs: number;
+        timeoutMs: number;
+    }, now?: () => number);
+    get(key: string, load: (signal: AbortSignal) => Promise<Preview>): Promise<Preview>;
+    clear(): void;
+    private drop;
+    private pump;
+}
+export {};

package/dist/preview-cache.js

@@ -0,0 +1,59 @@
+/** Memory-only, bounded previews. Call clear on identity/permission boundaries.
+ * Different images can progress independently without unbounded native work. */
+export class MessagingPreviewCache {
+    options;
+    now;
+    entries = new Map();
+    queue = [];
+    running = 0;
+    constructor(options = { concurrency: 2, maximum: 60, ttlMs: 60000, timeoutMs: 15000 }, now = Date.now) {
+        this.options = options;
+        this.now = now;
+    }
+    get(key, load) {
+        const previous = this.entries.get(key);
+        if (previous && previous.expires > this.now()) {
+            this.entries.delete(key);
+            this.entries.set(key, previous);
+            return previous.promise;
+        }
+        if (previous)
+            this.drop(previous);
+        let resolve;
+        const promise = new Promise(r => resolve = r);
+        const entry = { key, abort: new AbortController(), load, promise, resolve, expires: Infinity, started: false };
+        this.entries.set(key, entry);
+        this.queue.push(entry);
+        while (this.entries.size > this.options.maximum)
+            this.drop(this.entries.values().next().value);
+        this.pump();
+        return promise;
+    }
+    clear() { for (const entry of this.entries.values())
+        this.drop(entry); this.queue = []; }
+    drop(entry) { if (this.entries.get(entry.key) === entry)
+        this.entries.delete(entry.key); entry.abort.abort(); entry.resolve({}); }
+    pump() {
+        while (this.running < this.options.concurrency && this.queue.length) {
+            const entry = this.queue.shift();
+            if (entry.abort.signal.aborted)
+                continue;
+            this.running++;
+            entry.started = true;
+            // Some native thumbnail operations cannot be cancelled once started. Release
+            // the queue slot on cancellation/deadline and ignore their eventual result.
+            // Otherwise two stalled decoders would stop the entire conversation forever.
+            let onAbort;
+            const cancelled = new Promise(resolve => { onAbort = () => resolve({}); entry.abort.signal.addEventListener('abort', onAbort, { once: true }); });
+            const timer = setTimeout(() => this.drop(entry), this.options.timeoutMs);
+            void Promise.race([Promise.resolve().then(() => entry.abort.signal.aborted ? {} : entry.load(entry.abort.signal)), cancelled]).then(value => {
+                if (entry.abort.signal.aborted || this.entries.get(entry.key) !== entry)
+                    return;
+                entry.expires = this.now() + this.options.ttlMs;
+                entry.resolve(value);
+                if (!value.uri && !value.waveform)
+                    this.entries.delete(entry.key);
+            }, () => this.drop(entry)).finally(() => { clearTimeout(timer); entry.abort.signal.removeEventListener('abort', onAbort); this.running--; this.pump(); });
+        }
+    }
+}

package/dist/recording-permission.d.ts

@@ -0,0 +1,12 @@
+type Permission = {
+    granted: boolean;
+};
+/** Permission UI may temporarily background the app. Capture still requires a
+ * foreground app after the prompt closes; it never starts while suspended. */
+export declare function prepareRecordingPermission(options: {
+    read: () => Promise<Permission>;
+    request: () => Promise<Permission>;
+    state: () => string | null;
+    subscribe: (changed: () => void) => () => void;
+}, signal: AbortSignal): Promise<void>;
+export {};

package/dist/recording-permission.js

@@ -0,0 +1,34 @@
+/** Permission UI may temporarily background the app. Capture still requires a
+ * foreground app after the prompt closes; it never starts while suspended. */
+export async function prepareRecordingPermission(options, signal) {
+    const check = () => { if (signal.aborted)
+        throw Object.assign(Error('Cancelled.'), { name: 'AbortError' }); };
+    check();
+    if (options.state() !== 'active')
+        throw Error('Return to the conversation to record a voice message.');
+    let permission = await options.read();
+    check();
+    if (!permission.granted) {
+        permission = await options.request();
+        check();
+    }
+    if (!permission.granted)
+        throw Error('Microphone permission is needed to record a voice message.');
+    if (options.state() === 'active')
+        return;
+    await new Promise((resolve, reject) => {
+        let remove = () => { };
+        const finish = (error) => { clearTimeout(timer); remove(); signal.removeEventListener('abort', cancel); error ? reject(error) : resolve(); };
+        const cancel = () => finish(Object.assign(Error('Cancelled.'), { name: 'AbortError' }));
+        const changed = () => { if (options.state() === 'active')
+            finish(); };
+        const timer = setTimeout(() => finish(Error('Return to the conversation and try recording again.')), 2000);
+        remove = options.subscribe(changed);
+        signal.addEventListener('abort', cancel, { once: true });
+        if (signal.aborted)
+            cancel();
+        else
+            changed();
+    });
+    check();
+}

package/dist/sign-in.d.ts

@@ -0,0 +1,76 @@
+import React, { type ReactNode } from 'react';
+import { type MessagingAppearance } from '@robono/messaging';
+/** Optional presentation only. The customer's existing identity provider owns all verification. */
+export interface MessagingSignInProps {
+    appearance?: MessagingAppearance;
+    logo?: ReactNode;
+    stage: 'phone' | 'code' | 'profile';
+    /** Country selector and phone input supplied by the host, using MessagingPhoneInput if desired. */
+    phoneField: ReactNode;
+    code: string;
+    onCodeChange: (code: string) => void;
+    name: string;
+    onNameChange: (name: string) => void;
+    profileFields?: ReactNode;
+    consent: {
+        checked: boolean;
+        onChange: (checked: boolean) => void;
+        title: string;
+        details: ReactNode;
+    };
+    busy?: boolean;
+    disabled?: boolean;
+    error?: string;
+    /** Remaining lifetime reported by the identity provider. Never invent a verification deadline. */
+    secondsRemaining?: number;
+    onSubmit: () => void;
+    onChangePhone: () => void;
+    labels?: Partial<Record<'phoneSubtitle' | 'codeSubtitle' | 'profileSubtitle' | 'phone' | 'name' | 'namePlaceholder' | 'continue' | 'verify' | 'sendAgain' | 'busy' | 'changePhone' | 'code' | 'expired', string>>;
+}
+/** Original Messenger's card, typography, consent row and code cells, shared by web and native. */
+export declare function MessagingSignIn(p: MessagingSignInProps): React.JSX.Element;
+export interface MessagingPhoneInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    countryName: string;
+    callingCode: string;
+    flag: string;
+    onChooseCountry: () => void;
+    disabled?: boolean;
+    placeholder?: string;
+    label?: string;
+    appearance?: MessagingAppearance;
+}
+/** Same field proportions and divider as Messenger, with host-owned country data. */
+export declare function MessagingPhoneInput(p: MessagingPhoneInputProps): React.JSX.Element;
+export interface MessagingChoice {
+    value: string;
+    label: string;
+    detail?: string;
+    symbol?: string;
+}
+export interface MessagingChoicePickerProps {
+    visible: boolean;
+    title: string;
+    closeLabel?: string;
+    choices: ReadonlyArray<MessagingChoice>;
+    selected: string;
+    onSelect: (value: string) => void;
+    onClose: () => void;
+    appearance?: MessagingAppearance;
+}
+/** The same compact choice list for customer sign-in, language and country fields. */
+export declare function MessagingChoicePicker(p: MessagingChoicePickerProps): React.JSX.Element;
+/** The same connection/recovery screen for customer websites and phone apps. */
+export interface MessagingConnectionStateProps {
+    appearance?: MessagingAppearance;
+    error?: string;
+    onRetry?: () => void;
+    onSignOut?: () => void;
+    labels?: {
+        loading?: string;
+        retry?: string;
+        signOut?: string;
+    };
+}
+export declare function MessagingConnectionState({ appearance, error, onRetry, onSignOut, labels }: MessagingConnectionStateProps): React.JSX.Element;

package/dist/sign-in.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { ActivityIndicator, FlatList, Image, Keyboard, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+import { defaultMessagingSettings } from '@robono/messaging';
+import { RobonoIcon } from './visual/RobonoIcon.js';
+import { MessagingMenuSurface, MessagingPopupHost } from './popup.js';
+function surfaces(background) {
+    const hex = /^#[\da-f]{6}$/i.test(background) ? background : '#050505';
+    const rgb = [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16));
+    const sign = rgb.reduce((a, b) => a + b, 0) > 384 ? -1 : 1;
+    const offset = (n) => '#' + rgb.map(v => Math.max(0, Math.min(255, v + sign * n)).toString(16).padStart(2, '0')).join('');
+    return { card: offset(12), field: offset(24), border: offset(37) };
+}
+/** Original Messenger's card, typography, consent row and code cells, shared by web and native. */
+export function MessagingSignIn(p) {
+    const a = p.appearance ?? defaultMessagingSettings().appearance, c = a.colors, surface = surfaces(c.background);
+    const labels = { phoneSubtitle: 'Enter your mobile number to continue.', codeSubtitle: 'Enter the 6-digit code.', profileSubtitle: 'Finish setting up your account.', phone: 'Mobile number', name: 'Name', namePlaceholder: 'Your name', continue: 'Continue', verify: 'Verify', sendAgain: 'Send a new code', busy: 'Checking...', changePhone: 'Use a different number', code: 'Verification code', expired: 'Code expired', ...p.labels };
+    const input = useRef(null), [focused, setFocused] = useState(false);
+    const expired = p.secondsRemaining !== undefined && p.secondsRemaining <= 0;
+    const disabled = !!p.busy || !!p.disabled || (p.stage === 'phone' && !p.consent.checked) || (p.stage === 'code' && !expired && p.code.length !== 6) || (p.stage === 'profile' && !p.name.trim());
+    const label = p.busy ? labels.busy : p.stage === 'code' ? (expired ? labels.sendAgain : labels.verify) : labels.continue;
+    return _jsx(MessagingPopupHost, { children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: { flex: 1, minHeight: 0, backgroundColor: c.background }, children: _jsx(ScrollView, { keyboardShouldPersistTaps: "handled", contentContainerStyle: s.page, children: _jsxs(Pressable, { accessible: false, onPress: Keyboard.dismiss, style: [s.card, { backgroundColor: surface.card, borderColor: surface.border }], children: [p.logo ? _jsx(View, { style: s.logo, children: p.logo }) : a.logoUrl ? _jsx(Image, { accessibilityLabel: a.name, source: { uri: a.logoUrl }, style: s.logo, resizeMode: "contain" }) : _jsx(Text, { style: [s.brand, { color: c.foreground }], children: a.name }), _jsx(Text, { style: { color: c.secondary, fontSize: 16 }, children: p.stage === 'phone' ? labels.phoneSubtitle : p.stage === 'code' ? labels.codeSubtitle : labels.profileSubtitle }), p.stage === 'phone' ? _jsxs(_Fragment, { children: [_jsx(Text, { style: [s.label, { color: c.foreground }], children: labels.phone }), p.phoneField, _jsxs(View, { style: s.consentRow, children: [_jsx(Pressable, { accessibilityRole: "checkbox", accessibilityLabel: p.consent.title, accessibilityState: { checked: p.consent.checked, disabled: !!p.busy }, disabled: p.busy, hitSlop: 8, onPress: () => { Keyboard.dismiss(); p.consent.onChange(!p.consent.checked); }, style: [s.checkbox, { borderColor: c.accent, backgroundColor: p.consent.checked ? c.accent : 'transparent' }], children: p.consent.checked && _jsx(RobonoIcon, { name: "checkmark", size: 17, color: c.background }) }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [_jsx(Text, { style: [s.consentTitle, { color: c.foreground }], children: p.consent.title }), _jsx(Text, { style: [s.consentDetails, { color: c.secondary }], children: p.consent.details })] })] })] }) : p.stage === 'profile' ? _jsxs(_Fragment, { children: [_jsx(Text, { style: [s.label, { color: c.foreground }], children: labels.name }), _jsx(TextInput, { accessibilityLabel: labels.name, value: p.name, onChangeText: p.onNameChange, editable: !p.busy, maxLength: 80, autoCapitalize: "words", textContentType: "name", placeholder: labels.namePlaceholder, placeholderTextColor: c.secondary, style: [s.input, { color: c.foreground, backgroundColor: surface.field, borderColor: surface.border }] }), p.profileFields] }) : _jsxs(_Fragment, { children: [_jsxs(Pressable, { accessible: false, onPress: () => input.current?.focus(), style: { minHeight: 58, position: 'relative' }, children: [_jsx(View, { accessible: false, style: s.codeRow, children: Array.from({ length: 6 }, (_, i) => _jsx(View, { style: [s.codeCell, { backgroundColor: surface.field, borderColor: focused && i === Math.min(p.code.length, 5) ? c.accent : p.code[i] ? c.secondary : surface.border, borderWidth: focused && i === Math.min(p.code.length, 5) ? 2 : 1 }], children: _jsx(Text, { style: { fontSize: 28, fontWeight: '700', color: c.foreground }, children: p.code[i] ?? '' }) }, i)) }), _jsx(TextInput, { ref: input, accessibilityLabel: labels.code, value: p.code, onChangeText: v => p.onCodeChange(v.replace(/\D/g, '').slice(0, 6)), onFocus: () => setFocused(true), onBlur: () => setFocused(false), editable: !p.busy && !expired, keyboardType: "number-pad", autoComplete: "sms-otp", textContentType: "oneTimeCode", maxLength: 6, caretHidden: true, style: s.hiddenInput })] }), p.secondsRemaining !== undefined && _jsxs(View, { style: s.countdown, children: [_jsx(RobonoIcon, { name: "time-outline", size: 17, color: c.secondary }), _jsx(Text, { accessibilityLiveRegion: expired ? 'polite' : 'none', style: { color: expired ? '#EF4444' : c.secondary, fontSize: 15, fontWeight: '700', fontVariant: ['tabular-nums'] }, children: expired ? labels.expired : Math.floor(p.secondsRemaining / 60) + ':' + String(p.secondsRemaining % 60).padStart(2, '0') })] })] }), !!p.error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#EF4444', fontSize: 14, lineHeight: 19 }, children: p.error }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label, accessibilityState: { disabled, busy: !!p.busy }, disabled: disabled, onPress: p.onSubmit, style: [s.button, { backgroundColor: c.accent, opacity: disabled ? .45 : 1 }], children: _jsx(Text, { style: { color: c.background, fontWeight: '800' }, children: label }) }), p.stage !== 'phone' && _jsx(Pressable, { disabled: p.busy, accessibilityRole: "button", onPress: p.onChangePhone, children: _jsx(Text, { style: { color: c.accent, fontWeight: '600', textAlign: 'center', paddingVertical: 12 }, children: labels.changePhone }) })] }) }) }) });
+}
+/** Same field proportions and divider as Messenger, with host-owned country data. */
+export function MessagingPhoneInput(p) { const c = (p.appearance ?? defaultMessagingSettings().appearance).colors, surface = surfaces(c.background); return _jsxs(View, { style: [s.phoneRow, { backgroundColor: surface.field, borderColor: surface.border }], children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Country, ' + p.countryName, disabled: p.disabled, hitSlop: 4, onPress: () => { Keyboard.dismiss(); p.onChooseCountry(); }, style: s.country, children: [_jsx(Text, { style: { fontSize: 19 }, children: p.flag }), _jsx(Text, { style: { fontSize: 17, fontWeight: '700', color: c.foreground }, children: p.callingCode }), _jsx(RobonoIcon, { name: "chevron-down", size: 16, color: c.secondary })] }), _jsx(View, { style: [s.divider, { backgroundColor: surface.border }] }), _jsx(TextInput, { accessibilityLabel: p.label ?? 'Mobile number', value: p.value, onChangeText: p.onChange, editable: !p.disabled, keyboardType: "phone-pad", autoComplete: "tel-national", textContentType: "telephoneNumber", maxLength: 20, placeholder: p.placeholder, placeholderTextColor: c.secondary, style: { flex: 1, minHeight: 52, fontSize: 17, color: c.foreground } })] }); }
+/** The same compact choice list for customer sign-in, language and country fields. */
+export function MessagingChoicePicker(p) {
+    const c = (p.appearance ?? defaultMessagingSettings().appearance).colors, surface = surfaces(c.background);
+    return _jsx(MessagingMenuSurface, { visible: p.visible, onClose: p.onClose, children: () => _jsx(View, { style: { flex: 1, justifyContent: 'center', padding: 16, backgroundColor: 'rgba(0,0,0,.72)' }, children: _jsxs(View, { accessibilityViewIsModal: true, style: { maxHeight: '82%', width: '100%', maxWidth: 480, alignSelf: 'center', borderRadius: 8, borderWidth: 1, borderColor: surface.border, backgroundColor: c.background, overflow: 'hidden' }, children: [_jsxs(View, { style: { minHeight: 58, paddingStart: 16, paddingEnd: 58, justifyContent: 'center', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: surface.border, backgroundColor: surface.card }, children: [_jsx(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 18, fontWeight: '800' }, children: p.title }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: p.closeLabel ?? 'Close ' + p.title, onPress: p.onClose, style: { position: 'absolute', top: 0, end: 0, width: 58, height: 58, alignItems: 'center', justifyContent: 'center' }, children: _jsx(RobonoIcon, { name: "close", size: 22, color: c.foreground }) })] }), _jsx(FlatList, { data: p.choices, keyExtractor: row => row.value, keyboardShouldPersistTaps: "handled", contentContainerStyle: { padding: 8 }, renderItem: ({ item }) => _jsxs(Pressable, { accessibilityRole: "radio", accessibilityLabel: item.label + (item.detail ? ', ' + item.detail : ''), accessibilityState: { selected: p.selected === item.value }, onPress: () => p.onSelect(item.value), style: { minHeight: 58, borderRadius: 8, flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 12, paddingVertical: 8, backgroundColor: p.selected === item.value ? surface.field : 'transparent' }, children: [item.symbol && _jsx(Text, { style: { width: 31, fontSize: 21 }, children: item.symbol }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 16, fontWeight: '800' }, children: item.label }), item.detail && _jsx(Text, { style: { color: c.secondary, fontSize: 13, marginTop: 2 }, children: item.detail })] }), p.selected === item.value && _jsx(RobonoIcon, { name: "checkmark", size: 22, color: c.accent })] }) })] }) }) });
+}
+// Measurements copied from src/AppRoot.tsx authCard/phoneInput/codeCell/smsConsent styles.
+// Keep behavior and presentation here: the consumer app must not fork these screens.
+const s = StyleSheet.create({
+    page: { flexGrow: 1, justifyContent: 'center', padding: 24 }, card: { width: '100%', maxWidth: 480, alignSelf: 'center', borderRadius: 8, padding: 24, gap: 12, borderWidth: 1 },
+    logo: { width: 168, height: 48, alignSelf: 'center', marginBottom: 4 }, brand: { fontSize: 24, fontWeight: '800', textAlign: 'center', marginBottom: 4 },
+    label: { fontSize: 14, fontWeight: '700', marginBottom: -8 }, input: { minHeight: 52, borderWidth: 1, borderColor: '#2A2A2A', borderRadius: 8, paddingHorizontal: 16, fontSize: 17, backgroundColor: '#1D1D1D' },
+    phoneRow: { minHeight: 52, borderWidth: 1, borderColor: '#2A2A2A', borderRadius: 8, paddingHorizontal: 12, backgroundColor: '#1D1D1D', flexDirection: 'row', alignItems: 'center', direction: 'ltr' },
+    country: { minHeight: 50, flexDirection: 'row', alignItems: 'center', gap: 5, paddingRight: 8 }, divider: { width: StyleSheet.hairlineWidth, height: 28, marginRight: 12, backgroundColor: '#2A2A2A' },
+    consentRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 8 }, checkbox: { width: 28, height: 28, borderWidth: 2, borderRadius: 6, alignItems: 'center', justifyContent: 'center', marginTop: 2 }, consentTitle: { fontSize: 14, fontWeight: '800', lineHeight: 19 }, consentDetails: { fontSize: 12, lineHeight: 17 },
+    codeRow: { minHeight: 58, flexDirection: 'row', justifyContent: 'center', gap: 8, direction: 'ltr' }, codeCell: { flex: 1, maxWidth: 52, minHeight: 58, borderRadius: 8, alignItems: 'center', justifyContent: 'center', backgroundColor: '#1D1D1D' }, hiddenInput: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, zIndex: 2, color: 'transparent', backgroundColor: 'transparent', opacity: .01, fontSize: 1 },
+    countdown: { alignSelf: 'center', flexDirection: 'row', alignItems: 'center', gap: 6, direction: 'ltr' }, button: { minHeight: 48, borderRadius: 8, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 16 },
+});
+export function MessagingConnectionState({ appearance, error, onRetry, onSignOut, labels }) {
+    const colors = (appearance ?? defaultMessagingSettings().appearance).colors;
+    return _jsxs(View, { style: { flex: 1, minHeight: 160, backgroundColor: colors.background, alignItems: 'center', justifyContent: 'center', padding: 24, gap: 16 }, children: [!error && _jsx(ActivityIndicator, { color: colors.accent }), _jsx(Text, { accessibilityRole: error ? 'alert' : undefined, accessibilityLiveRegion: "polite", style: { color: colors.foreground, fontSize: 17, lineHeight: 25, textAlign: 'center', maxWidth: 400 }, children: error || labels?.loading || 'Opening Messenger…' }), error && onRetry && _jsx(Pressable, { accessibilityRole: "button", onPress: onRetry, style: { minHeight: 48, minWidth: 180, paddingHorizontal: 24, alignItems: 'center', justifyContent: 'center', backgroundColor: colors.accent, borderRadius: 8 }, children: _jsx(Text, { style: { color: colors.background, fontSize: 16, fontWeight: '700' }, children: labels?.retry || 'Try again' }) }), error && onSignOut && _jsx(Pressable, { accessibilityRole: "button", onPress: onSignOut, style: { minHeight: 44, justifyContent: 'center', paddingHorizontal: 16 }, children: _jsx(Text, { style: { color: colors.accent, fontSize: 16 }, children: labels?.signOut || 'Sign out' }) })] });
+}