@robono/messaging-react-native 0.2.0 → 0.3.1

package/dist/extras.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { ActivityIndicator, Image, Linking, Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { currentTrackers, trackerFresh, trackerETA, weatherTemperature } from '@robono/messaging';
+import { MessagingPopup, messagingPopupColors } from './popup.js';
+import { MessageIcon } from './icons.js';
+import WeatherArtwork from './visual/WeatherArtwork.js';
+import { weatherConditions } from './visual/weather-conditions.js';
+function ForecastIcon({ period, size = 32 }) {
+    const condition = period.condition.trim().toLowerCase();
+    const match = weatherConditions.find(c => [c.day, c.night].some(name => name.toLowerCase() === condition));
+    return _jsx(View, { accessible: true, accessibilityLabel: period.condition, style: { width: size, height: size, flexShrink: 0 }, children: _jsx(WeatherArtwork, { code: period.code ?? match?.code, isDay: period.isDay ?? condition !== 'clear', cloud: period.cloud, windKph: period.windKph, size: size }) });
+}
+export const privacyReadingStripHeight = 74;
+/** Messenger's fixed 74px reading strip. Scrolling moves messages through it. */
+export function MessagingPrivacyLayer({ children, enabled, background }) { return _jsxs(View, { style: { flex: 1, minHeight: 0, overflow: 'hidden' }, children: [children, enabled && _jsx(View, { pointerEvents: "none", testID: "privacy-lens-mask", style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: privacyReadingStripHeight, backgroundColor: Platform.OS === 'web' ? background + '30' : background, ...(Platform.OS === 'web' ? { backdropFilter: 'blur(9px)', WebkitBackdropFilter: 'blur(9px)' } : {}) } })] }); }
+export async function openChatAddress(address) { const query = encodeURIComponent(address); if (Platform.OS === 'ios') {
+    try {
+        await Linking.openURL(`geo-navigation:///place?address=${query}`);
+        return;
+    }
+    catch { }
+    await Linking.openURL(`https://maps.apple.com/?q=${query}`);
+}
+else
+    await Linking.openURL(`https://www.google.com/maps/search/?api=1&query=${query}`); }
+export function ExtraPopup({ title, onClose, background, foreground, children, expanded = true }) { return _jsx(MessagingPopup, { expanded: expanded, title: title, foreground: foreground, background: background, onClose: onClose, children: children }); }
+export const MessageExtra = forwardRef(function MessageExtra({ addressBubbleHeight = 44, extra, messageId, userId, extras, ink, accent, background, foreground, footer, renderAddress, Map, onCall, onLongPress }, ref) {
+    const [mapHeight, setMapHeight] = useState(230);
+    const [open, setOpen] = useState(false), [fahrenheit, setFahrenheit] = useState(extra.weather?.fahrenheit ?? false), [imperial, setImperial] = useState(false), [now, setNow] = useState(Date.now()), [error, setError] = useState(''), [busy, setBusy] = useState(false), [selected, setSelected] = useState();
+    useImperativeHandle(ref, () => ({ open: () => setOpen(true) }));
+    useEffect(() => { const timer = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(timer); }, []);
+    const weather = extra.weather, address = extra.address, call = extra.call, trackers = currentTrackers(address?.trackers ?? [], now), mine = trackers.find(t => t.userId === userId);
+    const act = async (fn) => { if (busy)
+        return; setBusy(true); setError(''); try {
+        await fn();
+    }
+    catch (e) {
+        setError(e instanceof Error ? e.message : 'Please try again.');
+    }
+    finally {
+        setBusy(false);
+    } };
+    const text = { color: messagingPopupColors.foreground, fontSize: 15 }, small = { color: messagingPopupColors.foreground, fontSize: 12, opacity: .7 }, row = { flexDirection: 'row', alignItems: 'center', gap: 8 }, title = { color: ink, fontSize: 16, fontWeight: '600' };
+    const avatarSize = Math.max(8, Math.min(32, addressBubbleHeight - 34));
+    const addressAction = _jsxs(View, { testID: "address-tracking", style: { flexShrink: 0, maxWidth: 136, height: trackers.length ? addressBubbleHeight : 32, justifyContent: 'center', alignItems: 'center', gap: 2, overflow: 'hidden' }, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: mine ? 'End tracking' : 'Allow tracking', accessibilityHint: "Share your live location with this chat for 15 minutes", disabled: busy || !mine && !extras.getSnapshot().available.tracking, hitSlop: { top: 6, bottom: 6, left: 0, right: 0 }, onPress: event => { event.stopPropagation(); void act(() => mine ? extras.stopTracking(mine.sessionId) : extras.startTracking(messageId)); }, accessibilityState: { busy, disabled: busy || !mine && !extras.getSnapshot().available.tracking }, style: ({ pressed }) => ({ minHeight: 32, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 16, borderWidth: 1, borderColor: accent + (mine ? 'b0' : '70'), backgroundColor: accent + (pressed ? '30' : mine ? '20' : '0d'), flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6, opacity: (busy || !mine && !extras.getSnapshot().available.tracking) ? 0.45 : 1 }), children: [busy ? _jsx(ActivityIndicator, { size: 16, color: accent }) : _jsx(MessageIcon, { name: mine ? 'stop' : 'location-outline', size: 16, color: accent }), _jsx(Text, { numberOfLines: 1, style: { color: foreground, fontSize: 12, lineHeight: 18, fontWeight: '600' }, children: mine ? 'End tracking' : 'Allow tracking' })] }), trackers.length > 0 && _jsx(View, { testID: "tracking-map-avatars", style: { flexDirection: 'row', flexWrap: 'nowrap', justifyContent: 'center', gap: 2 }, children: trackers.slice(0, 4).map(t => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Show ' + (t.userId === userId ? 'your' : t.name + "’s") + ' location on map', onPress: event => { event.stopPropagation(); setSelected(t.userId); setOpen(true); }, style: ({ pressed }) => ({ width: avatarSize, height: avatarSize, borderRadius: avatarSize / 2, alignItems: 'center', justifyContent: 'center', backgroundColor: accent + (pressed ? '30' : '12'), borderWidth: 1, borderColor: accent + '70' }), children: t.avatarUrl ? _jsx(Image, { source: { uri: t.avatarUrl }, style: { width: avatarSize - 4, height: avatarSize - 4, borderRadius: avatarSize / 2 } }) : _jsx(Text, { style: { color: foreground, fontSize: Math.min(18, avatarSize * .55), fontWeight: '600' }, children: t.name.slice(0, 1).toUpperCase() }) }, t.sessionId)) })] });
+    const addressParticipants = trackers.length > 0 && _jsx(View, { testID: "address-participants", pointerEvents: "none", style: { alignSelf: 'stretch' }, children: _jsx(Text, { style: { color: ink, fontSize: 13, lineHeight: 18 }, children: trackers.map(t => `${t.userId === userId ? 'You' : t.name} · ${trackerETA(t, now)}`).join('  ·  ') }) });
+    return _jsxs(_Fragment, { children: [weather && _jsxs(Pressable, { testID: "weather-card", accessibilityRole: "button", accessibilityLabel: "Open weather", onLongPress: onLongPress, onPress: () => setOpen(true), style: { width: 268, maxWidth: '100%', paddingHorizontal: 4, paddingVertical: 2 }, children: [_jsxs(View, { style: row, children: [_jsx(ForecastIcon, { period: weather.current, size: 34 }), _jsxs(View, { style: { flex: 1 }, children: [_jsxs(Text, { style: title, children: [weatherTemperature(weather.current.c, weather.fahrenheit ?? false), " \u00B7 ", weather.current.condition] }), _jsx(Text, { style: { color: ink, fontSize: 12, opacity: .75 }, children: weather.place })] })] }), _jsxs(View, { style: { ...row, justifyContent: 'space-between', marginTop: 2 }, children: [_jsx(Text, { style: { color: ink, fontSize: 11 }, children: weather.current.detail }), footer] })] }), address && (renderAddress ? renderAddress(addressAction, addressParticipants) : _jsxs(_Fragment, { children: [addressAction, addressParticipants] })), call && _jsxs(Pressable, { testID: "call-card", accessibilityRole: "button", accessibilityLabel: "Open call details", onLongPress: onLongPress, onPress: () => setOpen(true), style: { ...row, width: 268, maxWidth: '100%', padding: 4 }, children: [_jsx(MessageIcon, { name: call.kind === 'video' ? 'video' : 'call', color: call.outcome === 'missed' ? '#c94040' : accent, size: 26 }), _jsxs(View, { style: { flex: 1 }, children: [_jsxs(Text, { style: title, children: [call.outcome === 'missed' ? 'Missed ' : call.direction === 'incoming' ? 'Incoming ' : 'Outgoing ', call.kind === 'video' ? 'video' : 'voice', " call"] }), _jsx(Text, { style: { color: ink, fontSize: 12 }, children: call.outcome === 'completed' ? `${Math.floor(call.durationSeconds / 60)}:${String(Math.floor(call.durationSeconds % 60)).padStart(2, '0')}` : call.outcome })] }), footer] }), open && _jsxs(ExtraPopup, { expanded: !!address || !!weather, title: weather ? 'Weather' : address ? 'Live tracking' : 'Call details', onClose: () => setOpen(false), background: background, foreground: foreground, children: [address && _jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsx(Pressable, { accessibilityRole: "link", accessibilityLabel: "Open destination in maps", onPress: () => void act(() => openChatAddress(address.text)), children: _jsx(Text, { style: { ...text, color: accent, marginBottom: 10 }, numberOfLines: 2, children: address.text }) }), _jsx(View, { testID: "tracking-map-area", onLayout: event => setMapHeight(Math.max(1, Math.round(event.nativeEvent.layout.height))), style: { flex: 1, minHeight: 120, overflow: 'hidden' }, children: address.destination && Map ? _jsx(Map, { imperial: imperial, now: now, height: mapHeight, destination: address.destination, trackers: trackers.filter(t => trackerFresh(t, now)), accent: accent, selectedUserId: selected, onSelect: setSelected }) : _jsx(Text, { style: small, children: "The map is unavailable." }) }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Text, { style: { color: messagingPopupColors.foreground, fontSize: 14 }, children: "Sharing ends after 15 minutes." }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Change speed and distance units", onPress: () => setImperial(v => !v), style: { minHeight: 44, paddingHorizontal: 4, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 17, fontWeight: '600' }, children: imperial ? 'km/h · km' : 'mph · mi' }) })] }), _jsxs(ScrollView, { style: { flexGrow: 0, maxHeight: 156 }, children: [!trackers.length && _jsx(Text, { style: text, children: "No one is sharing their location." }), trackers.map(t => _jsxs(Pressable, { onPress: () => setSelected(t.userId), accessibilityRole: "button", accessibilityLabel: 'Locate ' + t.name, style: { minHeight: 74, paddingVertical: 8, borderBottomWidth: 1, borderColor: messagingPopupColors.foreground + '18' }, children: [_jsxs(View, { style: { ...row, justifyContent: 'space-between' }, children: [_jsx(Text, { style: { color: messagingPopupColors.foreground, fontSize: 21, lineHeight: 27, fontWeight: '600', flexShrink: 1 }, children: t.userId === userId ? 'You' : t.name }), _jsx(Text, { style: { color: accent, fontSize: 25, lineHeight: 30, fontWeight: '700' }, children: trackerETA(t, now) })] }), _jsxs(View, { style: { ...row, justifyContent: 'space-between', alignItems: 'flex-start' }, children: [_jsx(Text, { style: { color: messagingPopupColors.foreground, fontSize: 19, lineHeight: 26, flex: 1 }, children: trackerFresh(t, now) ? t.speedMps === null ? 'Speed unavailable' : Math.round(t.speedMps * (imperial ? 2.23694 : 3.6)) + (imperial ? ' mph' : ' km/h') : 'Waiting for a fresh location' }), trackerFresh(t, now) && _jsx(Text, { testID: "tracking-distance", style: { color: messagingPopupColors.foreground, fontSize: 19, lineHeight: 26, textAlign: 'right', flexShrink: 1 }, children: t.distanceMeters === null ? 'Distance unavailable' : (t.distanceMeters / (imperial ? 1609.344 : 1000)).toFixed(1) + (imperial ? ' mi' : ' km') + ' away' })] })] }, t.sessionId))] })] }), !address && _jsxs(ScrollView, { style: weather ? { flex: 1, minHeight: 0 } : { flexShrink: 1 }, children: [weather && (weather.expiresAt <= now ? _jsx(Text, { style: text, children: "Weather details expired." }) : _jsxs(_Fragment, { children: [_jsx(Text, { style: small, children: weather.place }), _jsxs(View, { style: { ...row, marginVertical: 8 }, children: [_jsx(ForecastIcon, { period: weather.current, size: 36 }), _jsxs(Text, { style: { ...text, flex: 1, fontWeight: '600' }, children: [weatherTemperature(weather.current.c, fahrenheit), " \u00B7 ", weather.current.condition] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Change temperature unit", onPress: () => setFahrenheit(v => !v), style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 16, fontWeight: '600' }, children: fahrenheit ? '°C' : '°F' }) })] }), weather.alert && _jsx(Text, { style: { ...text, color: accent }, children: weather.alert }), _jsxs(View, { style: { marginTop: 20, paddingTop: 16, borderTopWidth: 1, borderTopColor: messagingPopupColors.foreground + '24' }, children: [_jsx(Text, { style: { ...text, fontWeight: '600' }, children: "Next three hours" }), _jsx(View, { style: { ...row, marginTop: 12, alignItems: 'flex-start' }, children: weather.hours.slice(0, 3).map(p => _jsxs(View, { style: { flex: 1, gap: 4 }, children: [_jsx(Text, { style: small, children: p.label }), _jsxs(View, { style: row, children: [_jsx(ForecastIcon, { period: p, size: 32 }), _jsx(Text, { style: text, children: weatherTemperature(p.c, fahrenheit) })] }), _jsx(Text, { style: small, children: p.detail })] }, p.at)) })] }), _jsxs(View, { style: { marginTop: 20, paddingTop: 16, borderTopWidth: 1, borderTopColor: messagingPopupColors.foreground + '24' }, children: [_jsx(Text, { style: { ...text, fontWeight: '600', marginBottom: 8 }, children: "Three-day forecast" }), weather.days.slice(0, 3).map(p => _jsxs(View, { style: { ...row, paddingVertical: 8 }, children: [_jsx(Text, { style: { ...text, width: 45 }, children: p.label }), _jsx(ForecastIcon, { period: p, size: 32 }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { style: text, children: p.condition }), _jsx(Text, { style: small, children: p.detail })] }), _jsxs(Text, { style: text, children: [weatherTemperature(p.c, fahrenheit), p.lowC !== undefined ? ' / ' + weatherTemperature(p.lowC, fahrenheit) : ''] })] }, p.at))] }), !!weather.attribution && _jsx(Text, { style: { ...small, marginTop: 8 }, children: weather.attribution })] })), call && _jsxs(_Fragment, { children: [_jsxs(Text, { style: { ...text, fontWeight: '600', marginVertical: 8 }, children: [call.kind === 'video' ? 'Video' : 'Voice', " call \u00B7 ", call.outcome] }), _jsx(Text, { style: text, children: new Date(call.startedAt).toLocaleString() }), call.durationSeconds > 0 && _jsxs(Text, { style: { ...text, marginTop: 8 }, children: [Math.floor(call.durationSeconds / 60), " min ", Math.floor(call.durationSeconds % 60), " sec"] }), call.endedByWarning && _jsx(Text, { style: { ...small, marginTop: 10 }, children: "Ended after the network\u2019s time warning." }), onCall && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Call again", onPress: () => { setOpen(false); onCall(call.kind); }, style: { minHeight: 44, justifyContent: 'center', marginTop: 10 }, children: _jsx(Text, { style: { color: accent, fontWeight: '600' }, children: "Call again" }) })] })] })] }), !!error && _jsx(ExtraPopup, { title: "Message", onClose: () => setError(''), background: background, foreground: foreground, children: _jsx(Text, { accessibilityRole: "alert", style: text, children: error }) })] });
+});

package/dist/forward.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { messagingPopupColors } from './popup.js';
 import { useEffect, useRef, useState } from 'react';
 import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
 import { MessagingPopup } from './popup.js';
@@ -6,7 +7,7 @@ import { MessagingPopup } from './popup.js';
 export function MessagingForward({ messages, client, appearance, participants = {}, userId, onClose }) {
     const [page, setPage] = useState(null), [loading, setLoading] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState('');
     const live = useRef(true), inFlight = useRef(false), attempts = useRef(new Map()), done = useRef(new Set());
-    const c = appearance.colors;
+    const c = { ...appearance.colors, ...messagingPopupColors };
     useEffect(() => { live.current = true; void load(false); return () => { live.current = false; }; }, []);
     async function load(more) { if (inFlight.current)
         return; inFlight.current = true; setLoading(true); setError(''); try {
@@ -56,6 +57,6 @@ export function MessagingForward({ messages, client, appearance, participants =
                 setBusy(false);
         }
     }
-    return _jsxs(MessagingPopup, { background: c.background, onClose: () => { if (!busy)
-            onClose(); }, children: [_jsx(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 17, fontWeight: '600' }, children: "Forward to" }), _jsx(ScrollView, { style: { maxHeight: 360, marginTop: 8 }, children: page?.conversations.filter(row => row.canSend).map(row => { const name = row.kind === 'group' ? row.name ?? 'Group' : row.contactId === userId ? 'You' : participants[row.contactId ?? '']?.name ?? row.contactId ?? 'Chat'; return _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Forward to ' + name, disabled: busy || loading, onPress: () => void send(row), style: { minHeight: 48, justifyContent: 'center', paddingVertical: 10 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: name }) }, row.id); }) }), loading || busy ? _jsx(ActivityIndicator, { color: c.accent, style: { margin: 12 } }) : page && !page.conversations.some(row => row.canSend) && _jsx(Text, { style: { color: c.secondary, marginVertical: 12 }, children: "No chats available." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'flex-end', gap: 20, marginTop: 8 }, children: [!page && error && _jsx(Pressable, { accessibilityRole: "button", onPress: () => void load(false), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "Try again" }) }), page?.hasMore && _jsx(Pressable, { accessibilityRole: "button", disabled: loading || busy, onPress: () => void load(true), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "More chats" }) }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: onClose, style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground }, children: "Cancel" }) })] })] });
+    return _jsxs(MessagingPopup, { contentWidth: 640, title: "Forward to", foreground: c.foreground, closeLabel: "Close forwarding", closeDisabled: busy, background: c.background, onClose: () => { if (!busy)
+            onClose(); }, children: [_jsx(ScrollView, { style: { flex: 1, minHeight: 0, marginTop: 8 }, children: page?.conversations.filter(row => row.canSend).map(row => { const name = row.kind === 'group' ? row.name ?? 'Group' : row.contactId === userId ? 'You' : participants[row.contactId ?? '']?.name ?? row.contactId ?? 'Chat'; return _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Forward to ' + name, disabled: busy || loading, onPress: () => void send(row), style: { minHeight: 52, justifyContent: 'center', paddingVertical: 12, paddingHorizontal: 8, borderBottomWidth: 1, borderBottomColor: '#ffffff14' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: name }) }, row.id); }) }), loading || busy ? _jsx(ActivityIndicator, { color: c.accent, style: { margin: 12 } }) : page && !page.conversations.some(row => row.canSend) && _jsx(Text, { style: { color: c.secondary, marginVertical: 12 }, children: "No chats available." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'flex-end', gap: 20, marginTop: 8 }, children: [!page && error && _jsx(Pressable, { accessibilityRole: "button", onPress: () => void load(false), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "Try again" }) }), page?.hasMore && _jsx(Pressable, { accessibilityRole: "button", disabled: loading || busy, onPress: () => void load(true), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "More chats" }) })] })] });
 }

package/dist/group-editor.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { MessagingClient, MessagingInboxClient, MessagingSettings, MessagingState } from '@robono/messaging';
+export interface MessagingGroupEditorProps {
+    client: MessagingClient;
+    inbox?: MessagingInboxClient;
+    userId: string;
+    contacts: Record<string, {
+        name: string;
+        avatarUrl?: string;
+    }>;
+    conversation?: MessagingState['conversation'];
+    groups: MessagingSettings['groups'];
+    accent: string;
+    onClose: () => void;
+    onSaved: (conversationId: string, name: string) => void;
+}
+/** Messenger's name, group type and contact checklist; changes use member deltas. */
+export declare function MessagingGroupEditor({ client, inbox, userId, contacts, conversation, groups, accent, onClose, onSaved }: MessagingGroupEditorProps): React.JSX.Element;

package/dist/group-editor.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, FlatList, Image, Pressable, Text, TextInput, 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. */
+export function MessagingGroupEditor({ client, inbox, userId, contacts, conversation, groups, accent, onClose, onSaved }) {
+    const editing = !!conversation, conversationId = client.getSnapshot().conversationId;
+    const [name, setName] = useState(conversation?.name ?? ''), [supergroup, setSupergroup] = useState(conversation?.supergroup ?? false);
+    const [revision, setRevision] = useState(conversation?.revision ?? 0), [count, setCount] = useState(conversation?.memberCount ?? 0);
+    const [original, setOriginal] = useState(new Set()), [added, setAdded] = useState(new Set()), [removed, setRemoved] = useState(new Set());
+    const [next, setNext] = useState(null), [ready, setReady] = useState(!editing), [loading, setLoading] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState(''), [query, setQuery] = useState('');
+    const generation = useRef(0), attempt = useRef(null);
+    const max = supergroup ? groups?.maxSupergroupParticipants ?? 2000 : groups?.maxParticipants ?? 50;
+    const membersCount = (editing ? count : 1) + added.size - removed.size;
+    async function load(more = false) {
+        const version = ++generation.current;
+        setLoading(true);
+        setError('');
+        try {
+            const page = await client.groupMembers(more && next ? next : undefined);
+            if (version !== generation.current)
+                return;
+            if (!page.managementAvailable || page.ownerId !== userId)
+                throw Error('Only the current group owner can change this group.');
+            if (more && page.revision !== revision)
+                throw Error('This group changed. Close and reopen it before editing.');
+            setOriginal(current => new Set([...(more ? current : []), ...(page.memberIds ?? page.members.map(m => m.userId))]));
+            setRevision(page.revision);
+            setCount(page.memberCount);
+            setNext(page.hasMore ? page.nextCursor : null);
+            setReady(true);
+        }
+        catch (e) {
+            if (version === generation.current) {
+                setReady(false);
+                setError(e instanceof Error ? e.message : 'Group members could not be loaded.');
+            }
+        }
+        finally {
+            if (version === generation.current)
+                setLoading(false);
+        }
+    }
+    useEffect(() => { if (editing)
+        void load(); return () => { ++generation.current; }; }, [client, conversationId]);
+    const people = useMemo(() => [...new Set([...Object.keys(contacts), ...original])].filter(id => id !== userId &&
+        (contacts[id]?.name ?? 'Member').toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())).sort((a, b) => (contacts[a]?.name ?? a).localeCompare(contacts[b]?.name ?? b)), [contacts, original, query, userId]);
+    const chosen = (id) => !removed.has(id) && (original.has(id) || added.has(id));
+    const toggle = (id) => {
+        if (!chosen(id) && membersCount >= max) {
+            setError(`This group can have up to ${max.toLocaleString()} members.`);
+            return;
+        }
+        if (original.has(id))
+            setRemoved(current => { const value = new Set(current); if (value.has(id))
+                value.delete(id);
+            else
+                value.add(id); return value; });
+        else
+            setAdded(current => { const value = new Set(current); if (value.has(id))
+                value.delete(id);
+            else
+                value.add(id); return value; });
+        setError('');
+    };
+    async function save() {
+        if (busy || !ready || loading)
+            return;
+        setBusy(true);
+        setError('');
+        const value = { name: name.trim(), supergroup, ...(editing ? { revision, addMembers: [...added].sort(), removeMembers: [...removed].sort() } : { members: [...added].sort() }) };
+        const body = JSON.stringify(value);
+        if (attempt.current?.body !== body)
+            attempt.current = { body, id: client.createForwardId() };
+        try {
+            if (editing) {
+                await client.updateGroup({ ...value, revision, addMembers: [...added].sort(), removeMembers: [...removed].sort(), requestId: attempt.current.id });
+                onSaved(conversationId, value.name);
+            }
+            else {
+                if (!inbox)
+                    throw Error('The chat list is unavailable.');
+                const result = await inbox.createGroup({ name: value.name, supergroup, members: [...added].sort(), requestId: attempt.current.id });
+                onSaved(result.conversationId, value.name);
+            }
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'The group could not be saved.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    const locked = busy || loading || !ready, canSave = !locked && !!name.trim() && membersCount >= 2 && membersCount <= max;
+    return _jsxs(MessagingPopup, { title: editing ? 'Edit group' : 'New group', background: c.background, closeDisabled: busy, onClose: () => { if (!busy)
+            onClose(); }, form: true, children: [_jsx(FlatList, { data: people, keyExtractor: id => id, keyboardShouldPersistTaps: "handled", style: { flex: 1 }, contentContainerStyle: { paddingHorizontal: 8, paddingBottom: 16 }, initialNumToRender: 15, ListHeaderComponent: _jsxs(View, { style: { gap: 12, paddingTop: 12 }, children: [_jsx(TextInput, { accessibilityLabel: "Group name", placeholder: "Group name", placeholderTextColor: c.secondary, maxLength: 100, value: name, onChangeText: setName, editable: !locked, style: { color: c.foreground, fontSize: 21, minHeight: 48, paddingHorizontal: 4, borderBottomWidth: 1, borderBottomColor: '#ffffff30' } }), groups?.supergroupsEnabled && _jsx(View, { style: { flexDirection: 'row', gap: 20 }, children: [false, true].map(value => _jsxs(Pressable, { accessibilityRole: "radio", accessibilityLabel: value ? 'Supergroup' : 'Standard group', accessibilityState: { checked: supergroup === value, disabled: locked }, disabled: locked, onPress: () => setSupergroup(value), style: { minHeight: 44, flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsx(MessageIcon, { name: supergroup === value ? 'radio-button-on' : 'radio-button-off', color: accent, size: 22 }), _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: value ? 'Supergroup' : 'Group' })] }, String(value))) }), _jsxs(Text, { style: { color: c.secondary, fontSize: 14 }, children: [membersCount.toLocaleString(), " / ", max.toLocaleString(), " members"] }), _jsx(Text, { style: { color: c.foreground, fontSize: 17 }, children: "You \u00B7 Group owner" }), _jsx(TextInput, { accessibilityLabel: "Search group contacts", placeholder: "Search contacts", placeholderTextColor: c.secondary, value: query, onChangeText: setQuery, style: { color: c.foreground, fontSize: 16, minHeight: 44, borderBottomWidth: 1, borderBottomColor: '#ffffff30' } })] }), renderItem: ({ item: id }) => _jsxs(Pressable, { accessibilityRole: "checkbox", accessibilityLabel: contacts[id]?.name ?? 'Member', accessibilityState: { checked: chosen(id), disabled: locked }, disabled: locked, onPress: () => toggle(id), style: { minHeight: 56, flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [contacts[id]?.avatarUrl ? _jsx(Image, { source: { uri: contacts[id].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, fontSize: 18 }, children: (contacts[id]?.name ?? 'Member').slice(0, 1) }) }), _jsx(Text, { style: { flex: 1, color: c.foreground, fontSize: 16 }, children: contacts[id]?.name ?? 'Member' }), _jsx(MessageIcon, { name: chosen(id) ? 'checkmark-circle' : 'ellipse-outline', color: chosen(id) ? accent : c.secondary, size: 24 })] }), ListFooterComponent: _jsxs(View, { style: { gap: 12, paddingTop: 12 }, children: [loading && _jsx(ActivityIndicator, { accessibilityLabel: "Loading group members", color: accent }), next && _jsx(Pressable, { accessibilityRole: "button", disabled: loading || busy, onPress: () => void load(true), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: "Load more members" }) }), !people.length && !loading && _jsx(Text, { style: { color: c.secondary }, children: query ? 'No matching contacts.' : 'Your app has not supplied any contacts to invite.' }), _jsxs(Text, { style: { color: c.secondary, fontSize: 13, lineHeight: 19 }, children: ["Only the group owner can change the name or members. ", groups?.historyForNewMembers === 'all' ? 'New members can see retained group history.' : 'New members see messages sent after they join.'] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 15 }, children: error })] }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: editing ? 'Save group' : 'Create group', disabled: !canSave, onPress: () => void save(), style: { minHeight: 48, margin: 8, borderRadius: 12, backgroundColor: accent, alignItems: 'center', justifyContent: 'center', opacity: canSave ? 1 : .4 }, children: busy ? _jsx(ActivityIndicator, { color: "#000" }) : _jsx(Text, { style: { color: '#000', fontSize: 17, fontWeight: '600' }, children: editing ? 'Save' : 'Create group' }) })] });
+}

package/dist/header-calls.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+/** Supply callbacks only while the host's authenticated calling service allows them. */
+export interface MessagingCallActions {
+    voice?: () => void | Promise<void>;
+    video?: () => void | Promise<void>;
+    /** Contact's callable number. Never used for group calls. */
+    phoneNumber?: string;
+    phone?: (number: string) => void | Promise<void>;
+    voiceLabel?: string;
+    videoLabel?: string;
+}
+/** Matches Messenger: video is separate; the phone button chooses internet/carrier. */
+export declare function MessagingHeaderCalls({ actions, name, group, color }: {
+    actions?: MessagingCallActions;
+    name: string;
+    group: boolean;
+    color: string;
+}): React.JSX.Element;

package/dist/header-calls.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Keyboard, Linking, Modal, Platform, Pressable, SafeAreaView, Text, View } from 'react-native';
+import { MessageIcon } from './icons.js';
+/** Matches Messenger: video is separate; the phone button chooses internet/carrier. */
+export function MessagingHeaderCalls({ actions, name, group, color }) {
+    const [visible, setVisible] = useState(false), [error, setError] = useState('');
+    const pending = useRef(null), latest = useRef(actions);
+    latest.current = actions;
+    const phone = !group ? actions?.phoneNumber?.trim() : undefined;
+    const validPhone = phone && /^\+?[\d ().-]{3,30}$/.test(phone) ? phone : undefined;
+    const invoke = async (kind) => { const current = latest.current; try {
+        setError('');
+        if (kind === 'phone') {
+            if (group || !validPhone)
+                return;
+            if (current?.phone)
+                await current.phone(validPhone);
+            else
+                await Linking.openURL('tel:' + validPhone.replace(/[^+\d]/g, ''));
+        }
+        else
+            await current?.[kind]?.();
+    }
+    catch {
+        setError('The call could not start. Please try again.');
+    } };
+    const dismissed = () => { const kind = pending.current; pending.current = null; if (kind)
+        requestAnimationFrame(() => void invoke(kind)); };
+    useEffect(() => { if (!visible && Platform.OS !== 'ios')
+        dismissed(); }, [visible]);
+    useEffect(() => { if (!visible || Platform.OS !== 'web')
+        return; const close = (e) => { if (e.key === 'Escape') {
+        e.stopPropagation();
+        setVisible(false);
+    } }; document.addEventListener('keydown', close, true); return () => document.removeEventListener('keydown', close, true); }, [visible]);
+    useEffect(() => { pending.current = null; setVisible(false); setError(''); }, [name, group]);
+    const choose = (kind) => { pending.current = kind; setVisible(false); };
+    const button = (label, icon, press) => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label, onPress: press, style: { width: icon === 'video' ? 42 : 44, height: icon === 'video' ? 42 : 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: icon, size: 23, color: color }) });
+    const row = (kind, label, detail) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: label, onPress: () => choose(kind), style: ({ pressed }) => ({ flexDirection: 'row', alignItems: 'center', gap: 16, minHeight: 80, padding: 12, borderRadius: 18, backgroundColor: pressed ? '#1D1D1D' : 'transparent' }), children: [_jsx(View, { style: { width: 48, height: 48, borderRadius: 24, backgroundColor: '#1D1D1D', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: kind === 'phone' ? 'phone-portrait-outline' : 'phone', color: "#F7F7F7", size: 24 }) }), _jsxs(View, { style: { flex: 1, gap: 4 }, children: [_jsx(Text, { style: { color: '#F7F7F7', fontSize: 18, fontWeight: '600' }, children: label }), _jsx(Text, { style: { color: '#A3A3A3', fontSize: 15 }, children: detail })] })] });
+    return _jsxs(_Fragment, { children: [actions?.video && button(actions.videoLabel ?? 'Video call', 'video', () => void invoke('video')), (actions?.voice || validPhone) && button('Call ' + name, 'phone', () => { if (!validPhone) {
+                void invoke('voice');
+                return;
+            } Keyboard.dismiss(); setVisible(true); }), _jsx(Modal, { visible: visible || !!error, transparent: true, animationType: "fade", onDismiss: dismissed, onRequestClose: () => { setVisible(false); setError(''); }, children: _jsxs(SafeAreaView, { style: { flex: 1, justifyContent: 'flex-end' }, children: [_jsx(Pressable, { accessibilityLabel: "Close call options", onPress: () => { setVisible(false); setError(''); }, style: { position: 'absolute', inset: 0, backgroundColor: '#0009' } }), _jsxs(View, { accessibilityViewIsModal: true, style: { width: '100%', maxWidth: 560, alignSelf: 'center', backgroundColor: '#111111', borderRadius: 28, padding: 20, gap: 8 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsxs(Text, { accessibilityRole: "header", style: { flex: 1, color: '#F7F7F7', fontSize: 22, fontWeight: '600' }, children: ["Call ", name] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close call choices", onPress: () => { setVisible(false); setError(''); }, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", color: "#A3A3A3" }) })] }), error ? _jsx(Text, { accessibilityRole: "alert", style: { color: '#F7F7F7', fontSize: 16 }, children: error }) : _jsxs(_Fragment, { children: [actions?.voice && row('voice', actions.voiceLabel ?? 'Robono call', 'Wi-Fi or mobile data'), validPhone && row('phone', 'Phone call', validPhone)] })] })] }) })] });
+}

package/dist/icons.d.ts

@@ -5,3 +5,5 @@ export declare function duration(ms?: number): string;
 export declare function fileSize(bytes?: number): string;
 /** Neutral app chrome stays legible for light and dark customer palettes. */
 export declare function chatSurface(background: string): "#1e262b" | "#ffffff";
+/** Messenger shades the rounded input field, while the surrounding tools use the chat background. */
+export declare function composerSurface(background: string): "#ffffff" | "#111111";

package/dist/icons.js

@@ -8,3 +8,5 @@ export function chatSurface(background) {
     const rgb = background.slice(1).match(/../g)?.map(v => parseInt(v, 16)) ?? [255, 255, 255];
     return rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 < 128 ? "#1e262b" : "#ffffff";
 }
+/** Messenger shades the rounded input field, while the surrounding tools use the chat background. */
+export function composerSurface(background) { return chatSurface(background) === "#ffffff" ? "#ffffff" : "#111111"; }

package/dist/inbox-search.d.ts

@@ -0,0 +1,11 @@
+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 }: {
+    client: MessagingInboxClient;
+    query: string;
+    appearance: MessagingAppearance;
+    name: (chat: ConversationSummary) => string;
+    chats: ConversationSummary[];
+    onSelect: (chat: ConversationSummary, messageId?: string) => void;
+}): React.JSX.Element;

package/dist/inbox-search.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, FlatList, Pressable, Text, View } from 'react-native';
+/** Main-screen search covers retained messages beyond the current inbox page. */
+export function InboxMessageSearch({ client, query, appearance, name, chats, onSelect }) {
+    const c = appearance.colors, [rows, setRows] = useState([]), [next, setNext] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState('');
+    const controller = useRef(null), generation = useRef(0);
+    async function search(more = false) {
+        controller.current?.abort();
+        const control = new AbortController();
+        controller.current = control;
+        const version = ++generation.current;
+        setBusy(true);
+        setError('');
+        try {
+            const page = await client.search(query, { ...(more && next ? { before: next } : {}), signal: control.signal });
+            if (version !== generation.current)
+                return;
+            setRows(current => more ? [...new Map([...current, ...page.results].map(row => [row.message.conversationId + ':' + row.message.id, row])).values()] : page.results);
+            setNext(page.hasMore ? page.nextCursor : null);
+        }
+        catch (e) {
+            if (version === generation.current && !control.signal.aborted) {
+                setRows([]);
+                setError(e instanceof Error ? e.message : 'Messages could not be searched.');
+            }
+        }
+        finally {
+            if (version === generation.current)
+                setBusy(false);
+        }
+    }
+    useEffect(() => {
+        setRows([]);
+        setNext(null);
+        setError('');
+        setBusy(true);
+        const timer = setTimeout(() => void search(), 300);
+        return () => { clearTimeout(timer); ++generation.current; controller.current?.abort(); };
+    }, [client, query]);
+    return _jsx(FlatList, { style: { flex: 1 }, data: rows, keyExtractor: row => row.message.conversationId + ':' + row.message.id, keyboardShouldPersistTaps: "handled", ListHeaderComponent: _jsxs(View, { children: [chats.length > 0 && _jsxs(_Fragment, { children: [_jsx(Text, { style: { paddingHorizontal: 16, paddingVertical: 8, color: c.secondary, fontSize: 14, fontWeight: '600' }, children: "Chats" }), chats.map(chat => _jsx(Pressable, { accessibilityRole: "button", onPress: () => onSelect(chat), style: { minHeight: 48, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: name(chat) }) }, chat.id))] }), _jsx(Text, { style: { paddingHorizontal: 16, paddingVertical: 12, color: c.secondary, fontSize: 14, fontWeight: '600' }, children: "Messages" })] }), ListEmptyComponent: !busy && !error ? _jsx(Text, { style: { padding: 16, color: c.secondary }, children: "No matching messages." }) : null, renderItem: ({ item }) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Message in ${name(item.conversation)}: ${item.message.text}`, onPress: () => onSelect(item.conversation, item.message.id), style: { paddingHorizontal: 16, paddingVertical: 12, gap: 5, borderBottomWidth: 1, borderBottomColor: c.foreground + '16' }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 8 }, children: [_jsx(Text, { numberOfLines: 1, style: { flex: 1, fontSize: 16, fontWeight: '600', color: c.foreground }, children: name(item.conversation) }), _jsx(Text, { style: { fontSize: 12, color: c.secondary }, children: new Date(item.message.createdAt).toLocaleDateString() })] }), _jsx(Text, { numberOfLines: 3, style: { fontSize: 15, lineHeight: 21, color: c.secondary }, children: item.message.text })] }), ListFooterComponent: _jsxs(View, { children: [busy && _jsx(ActivityIndicator, { accessibilityLabel: "Searching all messages", color: c.accent, style: { padding: 16 } }), !!error && _jsxs(_Fragment, { children: [_jsx(Text, { accessibilityRole: "alert", style: { padding: 16, color: c.foreground }, children: error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void search(), style: { minHeight: 44, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "Try again" }) })] }), next && !busy && !error && _jsx(Pressable, { accessibilityRole: "button", onPress: () => void search(true), style: { minHeight: 48, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "More results" }) })] }) });
+}

package/dist/inbox.d.ts

@@ -7,10 +7,13 @@ export interface MessagingInboxProps {
         name: string;
         avatarUrl?: string;
     }>;
+    companyName?: string;
+    headerActions?: React.ReactNode;
+    searchText?: (conversation: ConversationSummary) => string;
     appearance?: MessagingAppearance;
     active?: boolean;
-    onSelect: (conversation: ConversationSummary) => void;
+    onSelect: (conversation: ConversationSummary, messageId?: string) => void;
     onDeleted?: (conversationId: string) => Promise<void> | void;
 }
 /** Compact Messenger chat rows: avatar, name, last message, time and unread badge. */
-export declare function MessagingInbox({ client, userId, contacts, appearance, active, onSelect, onDeleted }: MessagingInboxProps): React.JSX.Element;
+export declare function MessagingInbox({ client, userId, contacts, appearance, active, onSelect, onDeleted, companyName, headerActions, searchText }: MessagingInboxProps): React.JSX.Element;

package/dist/inbox.js

@@ -1,20 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { InboxMessageSearch } from './inbox-search.js';
+import { MessageIcon } from './icons.js';
 import { useEffect, useState, useSyncExternalStore } from 'react';
-import { AppState, FlatList, Image, Modal, Platform, Pressable, Text, View, useWindowDimensions } from 'react-native';
+import { AppState, FlatList, Image, Platform, Pressable, Text, TextInput, View } from 'react-native';
 import { defaultMessagingSettings } from '@robono/messaging';
-import { MessagingPopup } from './popup.js';
+import { MessagingPopup, MessagingPopupHeaderBoundary, messagingPopupColors } from './popup.js';
 /** Compact Messenger chat rows: avatar, name, last message, time and unread badge. */
-export function MessagingInbox({ client, userId, contacts = {}, appearance, active = true, onSelect, onDeleted }) {
+export function MessagingInbox({ client, userId, contacts = {}, appearance, active = true, onSelect, onDeleted, companyName, headerActions, searchText }) {
     const state = useSyncExternalStore(client.subscribe, client.getSnapshot, client.getSnapshot), design = appearance ?? state.appearance ?? defaultMessagingSettings().appearance, c = design.colors;
     useEffect(() => { const update = (value) => { if (active && (value === null || value === 'active'))
         client.start();
     else
         client.stop(); }; update(AppState.currentState); const sub = AppState.addEventListener('change', update); return () => { sub.remove(); client.stop(); }; }, [client, active]);
-    const [selected, setSelected] = useState(null), [confirm, setConfirm] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState(''), [anchor, setAnchor] = useState({ x: 8, y: 8 });
-    const window = useWindowDimensions();
+    const [query, setQuery] = useState('');
+    const [selected, setSelected] = useState(null), [confirm, setConfirm] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState('');
     const title = (row) => row.kind === 'group' ? row.name ?? 'Group' : contacts[row.contactId ?? '']?.name ?? row.contactId ?? 'Chat';
-    const openOptions = (row, x, y) => { if (!state.inboxActionsAvailable)
-        return; setSelected(row); setAnchor({ x: Math.max(8, Math.min(x, window.width - 288)), y: Math.max(8, Math.min(y, window.height - 200)) }); setConfirm(false); setError(''); };
+    const openOptions = (row) => { if (!state.inboxActionsAvailable)
+        return; setSelected(row); setConfirm(false); setError(''); };
     useEffect(() => { if (selected && !state.conversations.some(c => c.id === selected.id) && !busy && !error)
         setSelected(null); }, [state.conversations, busy, selected, error]);
     async function act(remove) { if (!selected || busy)
@@ -36,13 +38,15 @@ export function MessagingInbox({ client, userId, contacts = {}, appearance, acti
     } }
     const preview = (row) => { const m = row.lastMessage; if (!m)
         return 'No messages yet'; const text = m.kind === 'text' ? m.text ?? '' : ({ voice: 'Voice message', image: 'Photo', video: 'Video', document: 'Document', poll: 'Poll' }[m.kind] ?? 'Message'); return (m.senderId === userId ? 'You: ' : '') + text; };
-    return _jsxs(View, { style: { flex: 1, minHeight: 0, backgroundColor: c.background }, children: [_jsx(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 20, fontWeight: '700', padding: 12, borderBottomWidth: 1, borderBottomColor: c.foreground + '12' }, children: "Chats" }), state.error && _jsxs(View, { style: { padding: 12 }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: state.error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void client.refresh().catch(() => { }), children: _jsx(Text, { style: { color: c.accent, paddingVertical: 8 }, children: "Try again" }) })] }), _jsx(FlatList, { data: state.conversations, keyExtractor: row => row.id, contentContainerStyle: { flexGrow: 1 }, ItemSeparatorComponent: () => _jsx(View, { style: { height: 1, backgroundColor: c.foreground + '12', marginLeft: 64 } }), ListEmptyComponent: _jsx(Text, { style: { padding: 20, textAlign: 'center', color: c.secondary }, children: state.loading ? 'Loading chats…' : state.error ? '' : 'No chats yet' }), ListFooterComponent: state.hasMore ? _jsx(Pressable, { accessibilityRole: "button", disabled: state.loading, onPress: () => void client.loadMore().catch(() => { }), children: _jsx(Text, { style: { padding: 12, textAlign: 'center', color: c.accent }, children: state.loading ? 'Loading…' : 'More chats' }) }) : null, renderItem: ({ item }) => {
+    return _jsxs(View, { style: { flex: 1, minHeight: 0, backgroundColor: c.background }, children: [_jsx(MessagingPopupHeaderBoundary, { children: _jsxs(View, { testID: "messaging-inbox-header", style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', minHeight: 64, paddingHorizontal: 16, paddingVertical: 8, gap: 8 }, children: [_jsx(Text, { accessibilityRole: "header", numberOfLines: 1, style: { flex: 1, color: c.foreground, fontSize: 20, fontWeight: '700' }, children: companyName ?? design.name }), headerActions] }) }), _jsxs(View, { style: { margin: 12, marginTop: 8, flexDirection: 'row', alignItems: 'center', gap: 8, borderRadius: 10, paddingHorizontal: 10, backgroundColor: c.foreground + '0b' }, children: [_jsx(MessageIcon, { name: "search", size: 20, color: c.secondary }), _jsx(TextInput, { accessibilityLabel: "Search chats", placeholder: state.globalSearchAvailable ? "Search chats and messages" : "Search chats", placeholderTextColor: c.secondary, value: query, onChangeText: setQuery, maxLength: 200, autoCapitalize: "none", autoCorrect: false, style: { flex: 1, minHeight: 44, color: c.foreground, fontSize: 16 } }), !!query && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Clear chat search", onPress: () => setQuery(''), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", size: 20, color: c.secondary }) })] }), state.error && _jsxs(View, { style: { padding: 12 }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: state.error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void client.refresh().catch(() => { }), children: _jsx(Text, { style: { color: c.accent, paddingVertical: 8 }, children: "Try again" }) })] }), query.trim() && state.globalSearchAvailable ? _jsx(InboxMessageSearch, { client: client, query: query.trim(), appearance: design, name: title, chats: state.conversations.filter(row => title(row).toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())), onSelect: onSelect }, userId) : _jsx(FlatList, { data: state.conversations.filter(row => !query.trim() || [title(row), row.lastMessage?.text ?? '', searchText?.(row) ?? ''].join(' ').toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())), keyExtractor: row => row.id, contentContainerStyle: { flexGrow: 1 }, ItemSeparatorComponent: () => _jsx(View, { style: { height: 1, backgroundColor: c.foreground + '12', marginLeft: 64 } }), ListEmptyComponent: _jsx(Text, { style: { padding: 20, textAlign: 'center', color: c.secondary }, children: state.loading ? 'Loading chats…' : state.error ? '' : query ? 'No matching chats.' : 'No chats yet' }), ListFooterComponent: state.hasMore ? _jsx(Pressable, { accessibilityRole: "button", disabled: state.loading, onPress: () => void client.loadMore().catch(() => { }), children: _jsx(Text, { style: { padding: 12, textAlign: 'center', color: c.accent }, children: state.loading ? 'Loading…' : 'More chats' }) }) : null, renderItem: ({ item }) => {
                     const person = item.contactId ? contacts[item.contactId] : undefined, title = item.kind === 'group' ? item.name ?? 'Group' : person?.name ?? item.contactId ?? 'Chat';
                     const date = item.lastMessage ? new Date(item.lastMessage.createdAt) : null;
-                    return _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${title}${item.unreadCount ? `, ${item.unreadCount} unread` : ''}`, onPress: () => onSelect(item), onLongPress: e => openOptions(item, e.nativeEvent.pageX, e.nativeEvent.pageY), accessibilityActions: state.inboxActionsAvailable ? [{ name: 'showOptions', label: 'Chat options' }] : [], onAccessibilityAction: e => { if (e.nativeEvent.actionName === 'showOptions')
-                            openOptions(item, window.width / 2 - 140, window.height / 2 - 100); }, ...(Platform.OS === 'web' ? { onContextMenu: (e) => { e.preventDefault(); openOptions(item, e.clientX, e.clientY); } } : {}), style: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 12, paddingVertical: 10, minHeight: 68 }, children: [person?.avatarUrl ? _jsx(Image, { source: { uri: person.avatarUrl }, style: { width: 40, height: 40, borderRadius: 20 } }) : _jsx(View, { style: { width: 40, height: 40, borderRadius: 20, backgroundColor: c.accent + '20', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 18, fontWeight: '700' }, children: title.slice(0, 1).toUpperCase() }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsxs(Text, { numberOfLines: 1, style: { color: c.foreground, fontSize: 16, fontWeight: '700' }, children: [title, item.muted ? ' · Muted' : ''] }), _jsx(Text, { numberOfLines: 1, style: { color: c.secondary, marginTop: 3, fontSize: 14 }, children: preview(item) })] }), _jsxs(View, { style: { alignItems: 'flex-end', gap: 4 }, children: [_jsx(Text, { style: { color: item.unreadCount ? c.accent : c.secondary, fontSize: 12 }, children: date ? date.toDateString() === new Date().toDateString() ? date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' }) : date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : '' }), item.unreadCount > 0 && _jsx(View, { style: { minWidth: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: c.accent, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 5 }, children: _jsx(Text, { style: { color: c.accent, fontSize: 10, fontWeight: '900' }, children: item.unreadCount > 99 ? '99+' : item.unreadCount }) })] })] });
-                } }), selected && !confirm && _jsx(Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: () => { if (!busy)
-                    setSelected(null); }, children: _jsx(Pressable, { accessibilityLabel: "Close chat options", onPress: () => { if (!busy)
-                        setSelected(null); }, style: { flex: 1, backgroundColor: '#0004' }, children: _jsxs(View, { onStartShouldSetResponder: () => true, style: { position: 'absolute', left: anchor.x, top: anchor.y, width: 280, borderRadius: 18, padding: 8, backgroundColor: c.background }, children: [_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => void act(false), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground }, children: selected.muted ? 'Unmute' : 'Mute' }) }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setConfirm(true), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground }, children: "Delete chat" }) }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setSelected(null), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.secondary }, children: "Cancel" }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, padding: 12 }, children: error })] }) }) }), selected && confirm && _jsxs(MessagingPopup, { background: c.background, onClose: () => { if (!busy)
-                    setConfirm(false); }, children: [_jsxs(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 17, fontWeight: '600' }, children: ["Delete chat with ", title(selected), "?"] }), _jsx(Text, { style: { color: c.secondary, marginTop: 8 }, children: "This removes the chat and its history from your view. Other people keep their copy. New messages can bring the chat back." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'flex-end', gap: 20, marginTop: 12 }, children: [_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setConfirm(false), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground }, children: "Cancel" }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Confirm delete chat", disabled: busy, onPress: () => void act(true), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "Delete" }) })] })] })] });
+                    return _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${title}${item.unreadCount ? `, ${item.unreadCount} unread` : ''}`, onPress: () => onSelect(item), onLongPress: () => openOptions(item), accessibilityActions: state.inboxActionsAvailable ? [{ name: 'showOptions', label: 'Chat options' }] : [], onAccessibilityAction: e => { if (e.nativeEvent.actionName === 'showOptions')
+                            openOptions(item); }, ...(Platform.OS === 'web' ? { onContextMenu: (e) => { e.preventDefault(); openOptions(item); } } : {}), style: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 12, paddingVertical: 10, minHeight: 68 }, children: [person?.avatarUrl ? _jsx(Image, { source: { uri: person.avatarUrl }, style: { width: 40, height: 40, borderRadius: 20 } }) : _jsx(View, { style: { width: 40, height: 40, borderRadius: 20, backgroundColor: c.accent + '20', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 18, fontWeight: '700' }, children: title.slice(0, 1).toUpperCase() }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsxs(Text, { numberOfLines: 1, style: { color: c.foreground, fontSize: 16, fontWeight: '700' }, children: [title, item.muted ? ' · Muted' : ''] }), _jsx(Text, { numberOfLines: 1, style: { color: c.secondary, marginTop: 3, fontSize: 14 }, children: preview(item) })] }), _jsxs(View, { style: { alignItems: 'flex-end', gap: 4 }, children: [_jsx(Text, { style: { color: item.unreadCount ? c.accent : c.secondary, fontSize: 12 }, children: date ? date.toDateString() === new Date().toDateString() ? date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' }) : date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : '' }), item.unreadCount > 0 && _jsx(View, { style: { minWidth: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: c.accent, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 5 }, children: _jsx(Text, { style: { color: c.accent, fontSize: 10, fontWeight: '900' }, children: item.unreadCount > 99 ? '99+' : item.unreadCount }) })] })] });
+                } }), selected && _jsxs(MessagingPopup, { compact: true, contentWidth: 640, title: confirm ? "Delete chat with " + title(selected) + "?" : title(selected), foreground: c.foreground, closeLabel: confirm ? 'Close delete chat' : 'Close chat options', closeDisabled: busy, background: c.background, onClose: () => { if (!busy) {
+                    if (confirm)
+                        setConfirm(false);
+                    else
+                        setSelected(null);
+                } }, children: [!confirm ? _jsxs(_Fragment, { children: [_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => void act(false), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: messagingPopupColors.foreground, fontSize: 16 }, children: selected.muted ? 'Unmute' : 'Mute' }) }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setConfirm(true), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: messagingPopupColors.foreground, fontSize: 16 }, children: "Delete chat" }) })] }) : _jsx(Text, { style: { color: messagingPopupColors.secondary, marginTop: 8 }, children: "This removes the chat and its history from your view. Other people keep their copy. New messages can bring the chat back." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: messagingPopupColors.foreground, paddingVertical: 8 }, children: error }), confirm && _jsxs(View, { style: { flexDirection: 'row', gap: 8, marginTop: 12 }, children: [_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setConfirm(false), style: { flex: 1, minHeight: 44, borderRadius: 12, backgroundColor: messagingPopupColors.incoming, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: messagingPopupColors.foreground, fontSize: 16, fontWeight: '600' }, children: "Cancel" }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Confirm delete chat", disabled: busy, onPress: () => void act(true), style: { flex: 1, minHeight: 44, borderRadius: 12, backgroundColor: '#b72d34', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: '#ffffff', fontSize: 16, fontWeight: '600' }, children: "Delete" }) })] })] })] });
 }

package/dist/index.d.ts

@@ -1,3 +1,10 @@
+import { type MessagingAccount } from './account.js';
+import { type MessagingCallActions } from './header-calls.js';
+export type { MessagingAccount } from './account.js';
+export type { MessagingCallActions } from './header-calls.js';
+import { type TrackingMapProps, type PrivacyLayerProps } from './extras.js';
+export { MessagingPrivacyLayer } from './extras.js';
+export type { TrackingMapProps, PrivacyLayerProps } from './extras.js';
 import { type SocialPlayerProps } from './social.js';
 export type { SocialPlayerProps } from './social.js';
 export { MessagingSearch } from './search.js';
@@ -11,7 +18,7 @@ export type { VoiceComposerProps } from "./voice-composer.js";
 import { type VoiceBubbleProps } from "./media-ui.js";
 export { VoicePlayback, MediaViewer, MediaPlaybackControls, ZoomablePhoto } from "./media-ui.js";
 export type { VoiceBubbleProps } from "./media-ui.js";
-import { type MessageKind, type MessageMedia, type MessagingAppearance, type MessagingClient, type MessagingMessage, type MessagingState, type MessageTransform, type SavedMessage } from "@robono/messaging";
+import { type MessagingExtrasClient, type MessagingExtrasState, type MessageKind, type MessageMedia, type MessagingAppearance, type MessagingClient, type MessagingMessage, type MessagingState, type MessageTransform, type SavedMessage } from "@robono/messaging";
 export interface VoiceAttachmentProps {
     media: MessageMedia;
     appearance: MessagingAppearance;
@@ -23,8 +30,11 @@ export interface TranslationVoiceProps {
     ink: string;
     accent: string;
     showWaveform?: boolean;
+    autoPlay?: boolean;
 }
 export interface MessagingComponents {
+    TrackingMap?: ComponentType<TrackingMapProps>;
+    PrivacyLayer?: ComponentType<PrivacyLayerProps>;
     SocialPlayer?: ComponentType<SocialPlayerProps>;
     TranslationVoice?: ComponentType<TranslationVoiceProps>;
     VoiceAttachment?: ComponentType<VoiceAttachmentProps>;
@@ -47,6 +57,12 @@ export interface AttachmentChoice {
     durationMs?: number;
 }
 export interface MessagingScreenProps {
+    companyName?: string;
+    account?: MessagingAccount;
+    callActions?: MessagingCallActions;
+    /** Authenticated weather, tracking, privacy and call-history controller. */
+    extras?: MessagingExtrasClient;
+    onCallHistory?: (kind: "voice" | "video") => void;
     client: MessagingClient;
     /** Browser adapter supplies the hosting origin; native embeds use Robono's domain. */
     socialOrigin?: string;
@@ -58,11 +74,13 @@ export interface MessagingScreenProps {
     contact: {
         name: string;
         avatarUrl?: string;
+        language?: string;
     };
     /** Resolve group member names through your app's authorized contact directory. */
     participants?: Record<string, {
         name: string;
         avatarUrl?: string;
+        language?: string;
     }>;
     appearance?: MessagingAppearance;
     components?: MessagingComponents;
@@ -85,13 +103,14 @@ export interface MessagingScreenProps {
     attachmentChoices?: AttachmentChoice[];
     /** Pick, capture or record, then upload to your private store. Return an opaque asset reference. */
     pickAttachment?: (kind: Exclude<MessageKind, "text" | "poll">, options: {
+        maxCount?: number;
         maxDurationMs?: number;
         maxFileBytes?: number;
         allowedMimeTypes?: string[];
         source?: "camera" | "call-video";
         attachmentId?: string;
         intent?: "send" | "preview" | "attach";
-    }) => Promise<MessageMedia | null>;
+    }) => Promise<MessageMedia | MessageMedia[] | null>;
     /** Release local draft resources after removal or submission; keep uploaded assets needed by retries. */
     releaseAttachment?: (media: MessageMedia) => void | Promise<void>;
     /** Upload a locally selected attachment after its outgoing bubble is visible. */
@@ -108,6 +127,10 @@ export interface MessagingScreenProps {
 }
 interface MessagingContext extends MessagingScreenProps {
     state: MessagingState;
+    discussionPreview?: boolean;
+    discussionRoot?: string;
+    openDiscussion: (threadRoot?: string) => void;
+    extrasState: MessagingExtrasState | null;
     design: MessagingAppearance;
     reply: MessagingMessage | null;
     editing: MessagingMessage | null;
@@ -133,12 +156,19 @@ export declare function messagingHeaderColors(design: MessagingAppearance, group
 export declare function MessagingHeader({ children }?: {
     children?: ReactNode;
 }): React.JSX.Element;
-export declare function MessagingBubble({ message, pendingStatus }: {
+export declare function MessagingBubble({ message, pendingStatus, previousMessage, nextMessage }: {
     message: MessagingMessage;
     pendingStatus?: 'sending' | 'failed';
+    previousMessage?: MessagingMessage;
+    nextMessage?: MessagingMessage;
 }): React.JSX.Element;
 export declare function MessagingList(): React.JSX.Element;
 export declare function MessagingComposer(): React.JSX.Element;
+/** Account navigation. Mount in the inbox/app toolbar, never in a contact menu. */
+export declare function MessagingAccountMenu({ onNewGroup }?: {
+    onNewGroup?: () => void;
+}): React.JSX.Element;
+export declare function MessagingConversation(): React.JSX.Element;
 /** Embed inside your app's safe area and navigation. No engine, push or global audio side effects. */
 export declare function MessagingScreen(props: MessagingScreenProps): React.JSX.Element;
 export { MessagingInbox, type MessagingInboxProps } from './inbox.js';