@robono/messaging-react-native 0.2.0 → 0.3.0

package/dist/polls.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { messagingPopupColors } from './popup.js';
+import { ExtraPopup } from './extras.js';
+import { MessageIcon } from './icons.js';
 import { useRef, useState } from 'react';
 import { createPollVoteQueue } from './pollVoteQueue';
-import { ActivityIndicator, KeyboardAvoidingView, Platform, Pressable, ScrollView, Switch, Text, TextInput, View } from 'react-native';
+import { ActivityIndicator, Pressable, ScrollView, Switch, Text, TextInput, View } from 'react-native';
 import { validatePoll } from '@robono/messaging';
 const PollArea = View;
 import { MessagingPopup as PollModal } from './popup.js';
 /** Optional reusable poll content. Votes are submitted as a complete selection, not a toggle request. */
-export function PollMessage({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, background = '#101010', foreground = '#fff', renderDetails, detailsOpen, onDetailsOpenChange }) {
+export function PollMessage({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, background = '#101010', foreground = '#fff', renderDetails, detailsOpen, onDetailsOpenChange, onLongPress }) {
     const [busy, setBusy] = useState(false), [error, setError] = useState(''), [localShowVotes, setLocalShowVotes] = useState(false);
     const showVotes = detailsOpen ?? localShowVotes;
     const setShowVotes = (open) => { setLocalShowVotes(open); onDetailsOpenChange?.(open); };
@@ -23,7 +26,7 @@ export function PollMessage({ message, userId, ink, accent, enabled, onVote, onC
     if (!poll)
         return null;
     if (poll.kind === 'yes_no')
-        return _jsx(YesNoQuestion, { message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, renderDetails, detailsOpen, onDetailsOpenChange, background, foreground });
+        return _jsx(YesNoQuestion, { message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, renderDetails, detailsOpen, onDetailsOpenChange, onLongPress, background, foreground });
     const savedVotes = message.pollState?.votes ?? [], selected = pending ?? savedVotes.find(v => v.userId === userId)?.options ?? [], closed = !!message.pollState?.closed;
     selection.current = selected;
     const votes = pending === null ? savedVotes : [...savedVotes.filter(v => v.userId !== userId), ...(pending.length ? [{ userId, options: pending }] : [])];
@@ -38,20 +41,20 @@ export function PollMessage({ message, userId, ink, accent, enabled, onVote, onC
         actionBusy.current = false;
         setBusy(false);
     } }
-    const details = _jsxs(View, { style: { gap: 14 }, children: [_jsxs(View, { style: { gap: 4 }, children: [_jsx(Text, { style: { fontSize: 17, lineHeight: 23, fontWeight: '600', color: foreground }, children: poll.question }), _jsxs(Text, { style: { fontSize: 12, lineHeight: 17, color: foreground, opacity: .65 }, children: [votes.length, " ", votes.length === 1 ? 'person voted' : 'people voted', " \u00B7 ", closed ? 'Closed' : poll.multiple ? 'Multiple answers' : 'One answer per person'] })] }), _jsx(View, { style: { gap: 14 }, children: poll.options.map((option, index) => {
+    const details = _jsxs(View, { style: { gap: 14 }, children: [_jsxs(View, { style: { gap: 4 }, children: [_jsx(Text, { style: { fontSize: 17, lineHeight: 23, fontWeight: '600', color: messagingPopupColors.foreground }, children: poll.question }), _jsxs(Text, { style: { fontSize: 12, lineHeight: 17, color: messagingPopupColors.foreground, opacity: .65 }, children: [votes.length, " ", votes.length === 1 ? 'person voted' : 'people voted', " \u00B7 ", closed ? 'Closed' : poll.multiple ? 'Multiple answers' : 'One answer per person'] })] }), _jsx(View, { style: { gap: 14 }, children: poll.options.map((option, index) => {
                     const people = votes.filter(v => v.options.includes(index));
                     const names = people.map(v => v.userId === userId ? 'You' : resolveVoterName?.(v.userId) || 'Chat member').join(', ');
-                    return _jsxs(View, { style: { gap: 5 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'baseline', gap: 12 }, children: [_jsx(Text, { style: { flex: 1, color: foreground, fontSize: 15, lineHeight: 21, fontWeight: '600' }, children: option }), _jsx(Text, { style: { color: foreground, opacity: .65, fontSize: 13 }, children: people.length })] }), _jsxs(View, { style: { height: 4, borderRadius: 2, overflow: 'hidden' }, children: [_jsx(View, { style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor: foreground, opacity: .12 } }), _jsx(View, { style: { height: 4, width: `${votes.length ? people.length / votes.length * 100 : 0}%`, backgroundColor: accent } })] }), !!names && _jsx(Text, { style: { color: foreground, opacity: .7, fontSize: 13, lineHeight: 18 }, children: names })] }, index);
-                }) }), message.senderId === userId && !closed && enabled && _jsx(Pressable, { accessibilityRole: "button", disabled: busy || pending !== null, onPress: () => void act(onClose), style: { minHeight: 36, alignSelf: 'flex-end', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 14 }, children: "End poll" }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: foreground, fontSize: 13, lineHeight: 18 }, children: error })] });
-    return _jsxs(_Fragment, { children: [_jsxs(Pressable, { accessible: false, onPress: event => { event.stopPropagation(); setShowVotes(true); }, accessibilityLabel: `Poll: ${poll.question}. Open votes`, style: { width: 270, maxWidth: '100%', gap: 0, padding: 0 }, children: [_jsxs(Text, { accessibilityRole: "button", onPress: () => setShowVotes(true), style: { fontSize: 17, lineHeight: 23, fontWeight: '600', color: ink }, accessibilityHint: closed ? 'Poll closed' : poll.multiple ? 'Choose one or more answers' : 'Choose one answer', children: [poll.question, closed ? ' · Closed' : ''] }), poll.options.map((label, index) => {
+                    return _jsxs(View, { style: { gap: 5 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'baseline', gap: 12 }, children: [_jsx(Text, { style: { flex: 1, color: messagingPopupColors.foreground, fontSize: 15, lineHeight: 21, fontWeight: '600' }, children: option }), _jsx(Text, { style: { color: messagingPopupColors.foreground, opacity: .65, fontSize: 13 }, children: people.length })] }), _jsxs(View, { style: { height: 4, borderRadius: 2, overflow: 'hidden' }, children: [_jsx(View, { style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor: foreground, opacity: .12 } }), _jsx(View, { style: { height: 4, width: `${votes.length ? people.length / votes.length * 100 : 0}%`, backgroundColor: accent } })] }), !!names && _jsx(Text, { style: { color: messagingPopupColors.foreground, opacity: .7, fontSize: 13, lineHeight: 18 }, children: names })] }, index);
+                }) }), message.senderId === userId && !closed && enabled && _jsx(Pressable, { accessibilityRole: "button", disabled: busy || pending !== null, onPress: () => void act(onClose), style: { minHeight: 36, alignSelf: 'flex-end', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 14 }, children: "End poll" }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: messagingPopupColors.foreground, fontSize: 13, lineHeight: 18 }, children: error })] });
+    return _jsxs(_Fragment, { children: [_jsxs(Pressable, { accessible: false, onLongPress: onLongPress, onPress: event => { event.stopPropagation(); setShowVotes(true); }, accessibilityLabel: `Poll: ${poll.question}. Open votes`, style: { width: 270, maxWidth: '100%', gap: 0, padding: 0 }, children: [_jsxs(Text, { accessibilityRole: "button", onLongPress: onLongPress, onPress: () => setShowVotes(true), style: { fontSize: 17, lineHeight: 23, fontWeight: '600', color: ink }, accessibilityHint: closed ? 'Poll closed' : poll.multiple ? 'Choose one or more answers' : 'Choose one answer', children: [poll.question, closed ? ' · Closed' : ''] }), poll.options.map((label, index) => {
                         const count = votes.filter(v => v.options.includes(index)).length, checked = selected.includes(index);
                         return _jsxs(View, { style: { minHeight: 36, paddingVertical: 3, gap: 2 }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 10, alignItems: 'center' }, children: [_jsx(Pressable, { accessibilityRole: poll.multiple ? 'checkbox' : 'radio', accessibilityLabel: `${label}, ${count} ${count === 1 ? 'vote' : 'votes'}`, "aria-checked": checked, accessibilityState: { checked, disabled: !enabled || closed || busy, busy: pending !== null }, hitSlop: 4, disabled: !enabled || closed || busy, onPress: event => { event.stopPropagation(); if (!enabled || closed || busy || actionBusy.current)
                                                 return; const previous = selection.current; setError(''); void queue.current(previous.includes(index) ? previous.filter(x => x !== index) : poll.multiple ? [...previous, index] : [index]); }, style: { width: 20, height: 20, borderRadius: poll.multiple ? 4 : 10, borderWidth: 2, borderColor: checked ? accent : ink, alignItems: 'center', justifyContent: 'center' }, children: checked && _jsx(View, { style: { width: 10, height: 10, borderRadius: poll.multiple ? 2 : 5, backgroundColor: accent } }) }), _jsx(Text, { style: { flex: 1, color: ink, fontSize: 16 }, children: label }), _jsx(Text, { style: { color: ink, fontSize: 13 }, children: count })] }), _jsx(View, { pointerEvents: "none", style: { height: 3, marginLeft: 30, backgroundColor: ink + '20', borderRadius: 2, overflow: 'hidden' }, children: _jsx(View, { style: { height: 3, width: `${votes.length ? count / votes.length * 100 : 0}%`, backgroundColor: accent } }) })] }, index);
-                    }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink }, children: error })] }), showVotes && (renderDetails ? renderDetails(details, () => setShowVotes(false)) : _jsx(PollModal, { background: background, onClose: () => setShowVotes(false), children: _jsxs(PollArea, { style: { flexShrink: 1, backgroundColor: background }, children: [_jsxs(View, { style: { height: 56, paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center', gap: 16 }, children: [_jsx(Text, { accessibilityRole: "header", style: { color: foreground, fontSize: 22, fontWeight: '600', flex: 1 }, children: "Votes" }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close votes", onPress: () => setShowVotes(false), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 17 }, children: "Done" }) })] }), _jsx(ScrollView, { contentContainerStyle: { padding: 16 }, children: details })] }) }))] });
+                    }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink }, children: error })] }), showVotes && (renderDetails ? renderDetails(details, () => setShowVotes(false)) : _jsx(ExtraPopup, { title: "Votes", background: background, foreground: foreground, onClose: () => setShowVotes(false), children: _jsx(ScrollView, { style: { flexShrink: 1 }, children: details }) }))] });
 }
 /** Recipient-only decision. Keep the attempted answer on an uncertain failure so
  * retry cannot silently switch an answer the server may already have accepted. */
-function YesNoQuestion({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, renderDetails, detailsOpen, onDetailsOpenChange, background = '#111111', foreground = '#fff' }) {
+function YesNoQuestion({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, renderDetails, detailsOpen, onDetailsOpenChange, onLongPress, background = '#111111', foreground = '#fff' }) {
     const [attempt, setAttempt] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState(''), [localOpen, setLocalOpen] = useState(false);
     const inFlight = useRef(false), firstChoice = useRef(null);
     const poll = message.poll, answer = message.pollState?.votes.find(v => v.userId !== message.senderId)?.options[0];
@@ -81,14 +84,14 @@ function YesNoQuestion({ message, userId, ink, accent, enabled, onVote, onClose,
         }
     }
     const respondent = message.pollState?.votes.find(v => v.userId !== message.senderId)?.userId;
-    const details = _jsxs(View, { style: { gap: 12 }, children: [_jsx(Text, { style: { color: foreground, fontSize: 17, lineHeight: 23, fontWeight: '600' }, children: poll.question }), _jsx(Text, { style: { color: foreground, fontSize: 15, lineHeight: 21 }, children: answer !== undefined ? `${respondent === userId ? 'You' : resolveVoterName?.(respondent) || 'Recipient'} answered ${poll.options[answer]}.` : closed ? 'Closed without an answer.' : attempt !== null ? 'Confirming your answer…' : 'Waiting for an answer.' }), mine && !closed && enabled && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { if (inFlight.current)
+    const details = _jsxs(View, { style: { gap: 12 }, children: [_jsx(Text, { style: { color: messagingPopupColors.foreground, fontSize: 17, lineHeight: 23, fontWeight: '600' }, children: poll.question }), _jsx(Text, { style: { color: messagingPopupColors.foreground, fontSize: 15, lineHeight: 21 }, children: answer !== undefined ? `${respondent === userId ? 'You' : resolveVoterName?.(respondent) || 'Recipient'} answered ${poll.options[answer]}.` : closed ? 'Closed without an answer.' : attempt !== null ? 'Confirming your answer…' : 'Waiting for an answer.' }), mine && !closed && enabled && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { if (inFlight.current)
                     return; inFlight.current = true; void onClose().catch(() => setError('Could not close the question. Try again.')).finally(() => { inFlight.current = false; }); }, style: { minHeight: 36, alignSelf: 'flex-end', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: "End question" }) })] });
-    return _jsxs(_Fragment, { children: [_jsxs(Pressable, { accessible: false, onPress: e => { e.stopPropagation(); setOpen(true); }, style: { maxWidth: '100%', width: 270 }, children: [_jsx(Text, { accessibilityRole: "button", onPress: () => setOpen(true), style: { fontSize: 17, lineHeight: 23, fontWeight: '600', color: ink }, children: poll.question }), _jsx(View, { style: { flexDirection: 'row', gap: 20, paddingVertical: 6 }, children: poll.options.map((label, index) => _jsxs(Pressable, { accessibilityRole: "radio", accessibilityLabel: label, accessibilityState: { checked: chosen === index, disabled: !enabled || mine || closed || attempt !== null, busy }, disabled: !enabled || mine || closed || attempt !== null, onPress: e => { e.stopPropagation(); void choose(index); }, style: { flexDirection: 'row', alignItems: 'center', gap: 8, minHeight: 24 }, children: [_jsx(View, { style: { width: 20, height: 20, borderRadius: 10, borderWidth: 2, borderColor: chosen === index ? accent : ink, alignItems: 'center', justifyContent: 'center', opacity: chosen === undefined && mine ? .5 : 1 }, children: chosen === index && _jsx(View, { style: { width: 10, height: 10, borderRadius: 5, backgroundColor: accent } }) }), _jsx(Text, { style: { color: ink, fontSize: 16, fontWeight: chosen === index ? '600' : '400' }, children: label })] }, index)) }), !!error && !closed && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Retry answer", disabled: busy || closed || attempt === null, onPress: e => { e.stopPropagation(); if (attempt !== null)
-                            void choose(attempt); }, children: _jsx(Text, { accessibilityRole: "alert", style: { color: ink, fontSize: 13 }, children: error }) })] }), open && (renderDetails ? renderDetails(details, () => setOpen(false)) : _jsxs(PollModal, { background: background, onClose: () => setOpen(false), children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 }, children: [_jsx(Text, { accessibilityRole: "header", style: { flex: 1, color: foreground, fontSize: 16, fontWeight: '600' }, children: "Answer" }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close answer", onPress: () => setOpen(false), style: { minWidth: 44, minHeight: 44, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { color: foreground, fontSize: 24 }, children: "\u00D7" }) })] }), _jsx(ScrollView, { children: details })] }))] });
+    return _jsxs(_Fragment, { children: [_jsxs(Pressable, { accessible: false, onLongPress: onLongPress, onPress: e => { e.stopPropagation(); setOpen(true); }, testID: "yes-no-question", style: { maxWidth: 270, minWidth: 160 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'flex-start', gap: 6 }, children: [_jsx(View, { style: { paddingTop: 3 }, children: _jsx(MessageIcon, { name: "poll", color: accent, size: 16 }) }), _jsx(Text, { accessibilityRole: "button", onLongPress: onLongPress, onPress: () => setOpen(true), style: { flexShrink: 1, fontSize: 16, lineHeight: 22, fontWeight: '600', color: ink }, children: poll.question })] }), _jsx(View, { style: { flexDirection: 'row', gap: 20, marginTop: 2 }, children: poll.options.map((label, index) => _jsxs(Pressable, { accessibilityRole: "radio", accessibilityLabel: label, accessibilityState: { checked: chosen === index, disabled: !enabled || mine || closed || attempt !== null, busy }, disabled: !enabled || mine || closed || attempt !== null, onPress: e => { e.stopPropagation(); void choose(index); }, hitSlop: 4, style: { flexDirection: 'row', alignItems: 'center', gap: 8, minHeight: 32 }, children: [_jsx(View, { style: { width: 20, height: 20, borderRadius: 10, borderWidth: 2, borderColor: chosen === index ? accent : ink, alignItems: 'center', justifyContent: 'center', opacity: chosen === undefined && mine ? .5 : 1 }, children: chosen === index && _jsx(View, { style: { width: 10, height: 10, borderRadius: 5, backgroundColor: accent } }) }), _jsx(Text, { style: { color: ink, fontSize: 16, fontWeight: chosen === index ? '600' : '400' }, children: label })] }, index)) }), !!error && !closed && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Retry answer", disabled: busy || closed || attempt === null, onPress: e => { e.stopPropagation(); if (attempt !== null)
+                            void choose(attempt); }, children: _jsx(Text, { accessibilityRole: "alert", style: { color: ink, fontSize: 13 }, children: error }) })] }), open && (renderDetails ? renderDetails(details, () => setOpen(false)) : _jsx(ExtraPopup, { title: "Answer", background: background, foreground: foreground, onClose: () => setOpen(false), children: _jsx(ScrollView, { style: { flexShrink: 1 }, children: details }) }))] });
 }
 export function PollComposer({ appearance, onSend, onCancel, retrySafe = false, yesNo = false }) {
     const [question, setQuestion] = useState(''), [options, setOptions] = useState(['', '']), [multiple, setMultiple] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState(''), [submitted, setSubmitted] = useState(false);
-    const c = appearance.colors;
+    const c = { ...appearance.colors, ...messagingPopupColors };
     async function send() { if (busy || submitted)
         return; let poll; try {
         poll = validatePoll(yesNo ? { question, options: ['Yes', 'No'], multiple: false, kind: 'yes_no' } : { question, options, multiple });
@@ -108,14 +111,13 @@ export function PollComposer({ appearance, onSend, onCancel, retrySafe = false,
     finally {
         setBusy(false);
     } }
-    const inputStyle = { fontSize: 17, color: c.foreground, minHeight: 48, borderBottomWidth: 1, borderBottomColor: c.secondary + '40', paddingVertical: 12 };
-    const web = true;
+    const inputStyle = { fontSize: 17, color: c.foreground, minHeight: 48, borderWidth: 1, borderColor: '#ffffff20', borderRadius: 10, backgroundColor: '#111111', padding: 12 };
     let ready = false;
     try {
         validatePoll(yesNo ? { question, options: ['Yes', 'No'], multiple: false, kind: 'yes_no' } : { question, options, multiple });
         ready = true;
     }
     catch { }
-    return _jsx(PollModal, { form: true, background: c.background, onClose: () => { if (!busy)
-            onCancel(); }, children: _jsxs(PollArea, { style: { ...(web ? { flexShrink: 1 } : { flex: 1 }), backgroundColor: c.background }, children: [_jsxs(View, { style: { height: web ? 36 : 56, paddingHorizontal: web ? 0 : 16, flexDirection: 'row', alignItems: 'center', gap: 16 }, children: [!web && _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: onCancel, style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Cancel" }) }), _jsx(Text, { accessibilityRole: "header", style: { flex: 1, fontSize: 20, fontWeight: '600', color: c.foreground }, children: yesNo ? 'Yes/No question' : 'New poll' }), !web && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: yesNo ? "Send question" : "Send poll", disabled: busy || submitted || !ready, onPress: () => void send(), style: { minHeight: 44, justifyContent: 'center', opacity: ready ? 1 : .4 }, children: busy ? _jsx(ActivityIndicator, { color: c.accent }) : _jsx(Text, { style: { color: c.accent, fontSize: 17, fontWeight: '600' }, children: "Send" }) })] }), _jsx(KeyboardAvoidingView, { style: web ? { flexShrink: 1 } : { flex: 1 }, behavior: Platform.OS === 'ios' ? 'padding' : 'height', children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", keyboardDismissMode: "on-drag", contentContainerStyle: { padding: web ? 0 : 16, paddingBottom: web ? 12 : 20, gap: 4 }, children: [_jsx(Text, { style: { color: c.secondary, fontSize: 14, marginTop: 12 }, children: "Question" }), _jsx(TextInput, { accessibilityLabel: "Poll question", placeholder: "Ask a question", placeholderTextColor: c.secondary, maxLength: 300, multiline: true, value: question, onChangeText: setQuestion, editable: !busy, style: inputStyle }), !yesNo && _jsxs(_Fragment, { children: [_jsx(Text, { style: { color: c.secondary, fontSize: 14, marginTop: 16 }, children: "Answers" }), options.map((option, i) => _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsx(TextInput, { accessibilityLabel: `Option ${i + 1}`, placeholder: "Add an option", placeholderTextColor: c.secondary, maxLength: 100, value: option, onChangeText: v => setOptions(items => items.map((x, n) => n === i ? v : x)), editable: !busy, style: { ...inputStyle, flex: 1 } }), options.length > 2 && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Remove option ${i + 1}`, disabled: busy, onPress: () => setOptions(items => items.filter((_, n) => n !== i)), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.secondary, fontSize: 26 }, children: "\u00D7" }) })] }, i)), options.length < 12 && _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setOptions(items => [...items, '']), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 16 }, children: "Add option" }) }), _jsxs(View, { style: { minHeight: 48, flexDirection: 'row', gap: 12, alignItems: 'center', marginTop: 8 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 16, flex: 1 }, children: "Allow multiple answers" }), _jsx(Switch, { accessibilityLabel: "Allow multiple answers", disabled: busy, value: multiple, onValueChange: setMultiple, trackColor: { true: c.accent } })] }), _jsx(Text, { style: { color: c.secondary, fontSize: 13, lineHeight: 19 }, children: "Everyone in the chat can see the votes." })] }), yesNo && _jsx(Text, { style: { color: c.secondary, fontSize: 13, lineHeight: 19, marginTop: 8 }, children: "Their first Yes or No answer is final." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error })] }) }), web && _jsxs(View, { style: { flexDirection: 'row', gap: 8, marginTop: 8 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel", disabled: busy, onPress: onCancel, style: { flex: 1, minHeight: 44, borderRadius: 12, backgroundColor: c.secondary + '20', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16, fontWeight: '600' }, children: "Cancel" }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: yesNo ? "Send question" : "Send poll", disabled: busy || submitted || !ready, onPress: () => void send(), style: { flex: 1, minHeight: 44, borderRadius: 12, backgroundColor: c.accent, opacity: (busy || submitted || !ready) ? 0.45 : 1, alignItems: 'center', justifyContent: 'center' }, children: busy ? _jsx(ActivityIndicator, { color: "#fff" }) : _jsx(Text, { style: { color: '#fff', fontSize: 16, fontWeight: '600' }, children: "Send" }) })] })] }) });
+    return _jsx(PollModal, { contentWidth: 640, form: true, title: yesNo ? 'Yes/No question' : 'New poll', foreground: c.foreground, closeDisabled: busy, background: c.background, onClose: () => { if (!busy)
+            onCancel(); }, children: _jsxs(PollArea, { style: { flex: 1, minHeight: 0, backgroundColor: c.background }, children: [_jsx(View, { style: { flexShrink: 1 }, children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", keyboardDismissMode: "on-drag", contentContainerStyle: { padding: 0, paddingBottom: 12, gap: 8 }, children: [_jsx(Text, { style: { color: c.secondary, fontSize: 13, fontWeight: '600', marginTop: 4 }, children: "Question" }), _jsx(TextInput, { accessibilityLabel: "Poll question", placeholder: "Ask a question", placeholderTextColor: c.secondary, maxLength: 300, multiline: true, value: question, onChangeText: setQuestion, editable: !busy, style: inputStyle }), !yesNo && _jsxs(_Fragment, { children: [_jsx(Text, { style: { color: c.secondary, fontSize: 13, fontWeight: '600', marginTop: 12 }, children: "Answers" }), options.map((option, i) => _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsx(TextInput, { accessibilityLabel: `Option ${i + 1}`, placeholder: "Add an option", placeholderTextColor: c.secondary, maxLength: 100, value: option, onChangeText: v => setOptions(items => items.map((x, n) => n === i ? v : x)), editable: !busy, style: { ...inputStyle, flex: 1 } }), options.length > 2 && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Remove option ${i + 1}`, disabled: busy, onPress: () => setOptions(items => items.filter((_, n) => n !== i)), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.secondary, fontSize: 26 }, children: "\u00D7" }) })] }, i)), options.length < 12 && _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setOptions(items => [...items, '']), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 16 }, children: "Add option" }) }), _jsxs(View, { style: { minHeight: 48, flexDirection: 'row', gap: 12, alignItems: 'center', marginTop: 8 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 16, flex: 1 }, children: "Allow multiple answers" }), _jsx(Switch, { accessibilityLabel: "Allow multiple answers", disabled: busy, value: multiple, onValueChange: setMultiple, trackColor: { true: c.accent } })] }), _jsx(Text, { style: { color: c.secondary, fontSize: 13, lineHeight: 19 }, children: "Everyone in the chat can see the votes." })] }), yesNo && _jsx(Text, { style: { color: c.secondary, fontSize: 13, lineHeight: 19, marginTop: 8 }, children: "Their first Yes or No answer is final." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error })] }) }), _jsxs(View, { style: { flexDirection: 'row', gap: 8, marginTop: 8 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel", disabled: busy, onPress: onCancel, style: { flex: 1, minHeight: 44, borderRadius: 12, backgroundColor: c.secondary + '20', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16, fontWeight: '600' }, children: "Cancel" }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: yesNo ? "Send question" : "Send poll", disabled: busy || submitted || !ready, onPress: () => void send(), style: { flex: 1, minHeight: 44, borderRadius: 12, backgroundColor: c.accent, opacity: (busy || submitted || !ready) ? 0.45 : 1, alignItems: 'center', justifyContent: 'center' }, children: busy ? _jsx(ActivityIndicator, { color: "#fff" }) : _jsx(Text, { style: { color: '#fff', fontSize: 16, fontWeight: '600' }, children: "Send" }) })] })] }) });
 }

package/dist/popup.d.ts

@@ -1,9 +1,51 @@
 import React from 'react';
-export declare function MessagingPopup({ children, onClose, background, form, visible, onDismiss }: {
+export interface MessagingPopupSurfaceProps {
+    children: React.ReactNode;
+    visible: boolean;
+    onDismiss?: () => void;
+    onClose: () => void;
+    title?: string;
+}
+/** Browser hosts can keep settings dialogs inside their embedded chat. */
+export declare const MessagingPopupSurface: React.Context<React.ComponentType<MessagingPopupSurfaceProps> | null>;
+export declare const messagingPopupBackdrop = "#000000d9";
+export declare const messagingPopupColors: {
+    background: string;
+    foreground: string;
+    secondary: string;
+    incoming: string;
+};
+/** One title/close row for forms, menus and expanded content. */
+export declare function MessagingPopupHeader({ title, foreground, onClose, closeLabel, disabled, back }: {
+    title: string;
+    foreground: string;
+    onClose: () => void;
+    closeLabel?: string;
+    disabled?: boolean;
+    back?: boolean;
+}): React.JSX.Element;
+export declare function MessagingPopupHost({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function MessagingPopupHeaderBoundary({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Content panels occupy the area below the persistent header; confirmations stay compact. */
+export declare function MessagingPopup({ children, onClose, background, form, visible, onDismiss, expanded, bottomPadding, title, foreground, closeLabel, closeDisabled, contentWidth, headerBack, withinChat, compact }: {
+    compact?: boolean;
+    withinChat?: boolean;
     children: React.ReactNode;
     onClose: () => void;
     background: string;
     form?: boolean;
     visible?: boolean;
     onDismiss?: () => void;
+    expanded?: boolean;
+    bottomPadding?: number;
+    title?: string;
+    foreground?: string;
+    closeLabel?: string;
+    closeDisabled?: boolean;
+    contentWidth?: number;
+    headerBack?: boolean;
 }): React.JSX.Element;

package/dist/popup.js

@@ -1,7 +1,73 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { KeyboardAvoidingView, Modal, Platform, View } from 'react-native';
-// Messenger's centered popup on every platform. Keyboard movement is contained
-// by the scrim; the form itself must never become a separate full-screen route.
-export function MessagingPopup({ children, onClose, background, form = false, visible = true, onDismiss }) {
-    return _jsx(Modal, { visible: visible, onDismiss: onDismiss, transparent: true, animationType: "fade", onRequestClose: onClose, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: { flex: 1, backgroundColor: '#0009', justifyContent: 'center', alignItems: 'center', padding: 24 }, children: _jsx(View, { accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: { width: '100%', maxWidth: 360, maxHeight: '85%', backgroundColor: background, borderRadius: form ? 20 : 18, padding: form ? 20 : 16, overflow: 'hidden' }, children: children }) }) });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { Keyboard, KeyboardAvoidingView, Modal, Platform, Pressable, SafeAreaView, Text, View, useWindowDimensions } from 'react-native';
+import { MessageIcon } from './icons.js';
+/** Browser hosts can keep settings dialogs inside their embedded chat. */
+export const MessagingPopupSurface = createContext(null);
+export const messagingPopupBackdrop = '#000000d9';
+export const messagingPopupColors = { background: '#000000', foreground: '#ffffff', secondary: '#aaaaaa', incoming: '#202020' };
+/** One title/close row for forms, menus and expanded content. */
+export function MessagingPopupHeader({ title, foreground, onClose, closeLabel = 'Close ' + title.toLowerCase(), disabled = false, back = false }) {
+    return _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8, minHeight: 44, borderBottomWidth: 1, borderBottomColor: '#ffffff18' }, children: [_jsx(Text, { accessibilityRole: "header", style: { flex: 1, color: foreground, fontSize: 17, lineHeight: 23, fontWeight: '600' }, children: title }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: closeLabel, disabled: disabled, accessibilityState: { disabled }, onPress: onClose, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', opacity: disabled ? 0.45 : 1 }, children: _jsx(MessageIcon, { name: back ? 'back' : 'close', color: foreground, size: 24 }) })] });
+}
+// Measure the host and its persistent header, including embedded native layouts.
+const PopupBounds = createContext(null);
+export function MessagingPopupHost({ children }) {
+    const root = useRef(null), header = useRef(null), [revision, setRevision] = useState(0);
+    const changed = useCallback(() => setRevision(value => value + 1), []);
+    const value = useMemo(() => ({ root, header, revision, changed }), [revision, changed]);
+    return _jsx(PopupBounds.Provider, { value: value, children: _jsx(View, { ref: root, collapsable: false, onLayout: changed, style: { flex: 1, minHeight: 0 }, children: children }) });
+}
+export function MessagingPopupHeaderBoundary({ children }) {
+    const bounds = useContext(PopupBounds);
+    return _jsx(View, { ref: bounds?.header, collapsable: false, onLayout: bounds?.changed, children: children });
+}
+/** Content panels occupy the area below the persistent header; confirmations stay compact. */
+export function MessagingPopup({ children, onClose, background, form = false, visible = true, onDismiss, expanded = true, bottomPadding, title, foreground, closeLabel, closeDisabled = false, contentWidth, headerBack = false, withinChat = false, compact = false }) {
+    const ChatSurface = useContext(MessagingPopupSurface), bounds = useContext(PopupBounds), viewport = useWindowDimensions();
+    const [rect, setRect] = useState(null);
+    useLayoutEffect(() => {
+        if (!visible || Platform.OS === 'web' || !bounds)
+            return;
+        let active = true;
+        // Fabric's Android measureInWindow subtracts the activity's system inset,
+        // while the edge-to-edge modal starts at the screen origin. Page coordinates
+        // retain that inset and keep the popup below the actual visible header.
+        const measure = (view, done) => {
+            if (Platform.OS === 'android')
+                view.measure((_x, _y, width, height, x, y) => done(x, y, width, height));
+            else
+                view.measureInWindow(done);
+        };
+        const frame = requestAnimationFrame(() => {
+            const root = bounds.root.current;
+            if (!root)
+                return;
+            measure(root, (x, y, width, height) => {
+                const apply = (top) => { if (active)
+                    setRect({ left: x, top, width, height: Math.max(0, y + height - top) }); };
+                if (bounds.header.current)
+                    measure(bounds.header.current, (_x, hy, _w, hh) => apply(Math.max(y, hy + hh)));
+                else
+                    apply(y);
+            });
+        });
+        return () => { active = false; cancelAnimationFrame(frame); };
+    }, [visible, bounds, viewport.width, viewport.height]);
+    useEffect(() => { if (visible && Platform.OS !== 'web')
+        Keyboard.dismiss(); }, [visible]);
+    const close = useRef(onClose);
+    close.current = onClose;
+    useEffect(() => { if (!visible || Platform.OS !== 'web')
+        return; const escape = (event) => { if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        close.current();
+    } }; document.addEventListener('keydown', escape, true); return () => document.removeEventListener('keydown', escape, true); }, [visible]);
+    const bounded = Platform.OS !== 'web' && !!bounds;
+    const Frame = Platform.OS === 'ios' && !bounded ? SafeAreaView : View;
+    const content = _jsx(Frame, { style: [{ flex: 1, backgroundColor: messagingPopupBackdrop }, bounded ? { position: 'absolute', ...(rect ?? { left: 0, top: 0, width: 0, height: 0 }) } : undefined], children: _jsxs(KeyboardAvoidingView, { testID: "messaging-popup-backdrop", behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: compact ? 24 : 8 }, children: [_jsx(Pressable, { accessible: false, onPress: onClose, style: { position: 'absolute', inset: 0 } }), _jsxs(View, { testID: "messaging-popup-panel", accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: { width: '100%', ...(compact ? { maxWidth: 360, maxHeight: '100%', flexShrink: 1 } : { flex: 1, minHeight: 0 }), backgroundColor: compact ? '#111111' : messagingPopupColors.background, borderRadius: compact ? 20 : 18, paddingHorizontal: compact ? 20 : 8, paddingTop: compact ? 8 : 0, paddingBottom: bottomPadding ?? (compact ? 20 : 4), overflow: 'hidden' }, children: [title && _jsx(MessagingPopupHeader, { title: title, foreground: messagingPopupColors.foreground, onClose: onClose, closeLabel: closeLabel, disabled: closeDisabled, back: headerBack }), contentWidth ? _jsx(View, { style: { ...(compact ? { flexShrink: 1 } : { flex: 1, minHeight: 0 }), width: '100%', maxWidth: contentWidth, alignSelf: 'center', paddingTop: 12 }, children: children }) : children] })] }) });
+    if (Platform.OS === 'web' && ChatSurface)
+        return _jsx(ChatSurface, { visible: visible, title: title, onDismiss: onDismiss, onClose: onClose, children: content });
+    return _jsx(Modal, { visible: visible, statusBarTranslucent: true, navigationBarTranslucent: true, onDismiss: onDismiss, transparent: true, animationType: "fade", onRequestClose: onClose, children: content });
 }

package/dist/quick-send.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type MessagingAppearance } from '@robono/messaging';
+/** Messenger's empty-composer shortcut and anchored picker. Selecting never sends. */
+export declare function QuickSendButton({ choice, empty, enabled, disabled, editing, sendAvailable, appearance, onChoose, onSend, onQuickSend }: {
+    choice?: string;
+    empty: boolean;
+    enabled: boolean;
+    disabled: boolean;
+    editing: boolean;
+    sendAvailable: boolean;
+    appearance: MessagingAppearance;
+    onChoose: (emoji: string) => void;
+    onSend: () => void;
+    onQuickSend: (emoji: string) => void;
+}): React.JSX.Element;

package/dist/quick-send.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MessagingPopupHeader, messagingPopupBackdrop } from './popup.js';
+import { useEffect, useRef, useState } from 'react';
+import { Modal, Platform, Pressable, ScrollView, Text, View, useWindowDimensions } from 'react-native';
+import { quickMessageOptions, validQuickMessage } from '@robono/messaging';
+import { MessageIcon, chatSurface } from './icons.js';
+/** Messenger's empty-composer shortcut and anchored picker. Selecting never sends. */
+export function QuickSendButton({ choice, empty, enabled, disabled, editing, sendAvailable, appearance, onChoose, onSend, onQuickSend }) {
+    const [anchor, setAnchor] = useState(null), held = useRef(false), button = useRef(null), viewport = useWindowDimensions();
+    const emoji = validQuickMessage(choice) ? choice : '👍', quick = empty && enabled && !editing, unavailable = disabled || (!quick && !sendAvailable), c = appearance.colors;
+    useEffect(() => { if (!quick || disabled)
+        setAnchor(null); }, [quick, disabled]);
+    const show = () => { held.current = true; button.current?.measureInWindow((x, y, width) => setAnchor({ x: x + width, y })); };
+    const label = quickMessageOptions.find(option => option.emoji === emoji).label;
+    return _jsxs(_Fragment, { children: [_jsx(Pressable, { ref: button, testID: "quick-send-button", accessibilityRole: "button", accessibilityLabel: quick ? 'Send ' + label : editing ? 'Save message' : appearance.labels.send, accessibilityHint: quick ? 'Hold to choose a different quick message.' : undefined, accessibilityState: { disabled: unavailable, expanded: anchor !== null }, accessibilityActions: quick ? [{ name: 'choose', label: 'Choose quick message' }] : undefined, onAccessibilityAction: event => { if (event.nativeEvent.actionName === 'choose' && quick && !unavailable)
+                    show(); }, disabled: unavailable, delayLongPress: 350, onPressIn: () => { held.current = false; }, onLongPress: quick ? show : undefined, onPress: () => { if (held.current) {
+                    held.current = false;
+                    return;
+                } quick ? onQuickSend(emoji) : onSend(); }, ...(Platform.OS === 'web' ? { onContextMenu: (event) => { if (quick && !unavailable) {
+                        event.preventDefault();
+                        show();
+                    } }, onKeyDown: (event) => { if (quick && !unavailable && (event.key === 'F10' && event.shiftKey || event.key === 'ArrowUp')) {
+                        event.preventDefault();
+                        show();
+                    } } } : {}), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', opacity: unavailable ? .4 : 1 }, children: quick ? _jsx(Text, { style: { fontSize: 26, lineHeight: 32 }, children: emoji }) : _jsx(MessageIcon, { name: editing ? 'check' : 'send', size: 24, color: c.accent }) }), _jsx(Modal, { visible: anchor !== null, transparent: true, animationType: "fade", onRequestClose: () => setAnchor(null), children: _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1 }, children: [_jsx(Pressable, { accessibilityLabel: "Close quick messages", onPress: () => setAnchor(null), style: { position: 'absolute', inset: 0, backgroundColor: messagingPopupBackdrop } }), _jsxs(View, { style: { position: 'absolute', width: Math.min(304, viewport.width - 24), left: Math.max(12, Math.min((anchor?.x ?? viewport.width) - 304, viewport.width - 316)), top: Math.max(48, Math.min((anchor?.y ?? viewport.height) - 282, viewport.height - 312)), backgroundColor: chatSurface(c.background), borderRadius: 18, borderWidth: 1, borderColor: c.secondary + '40', padding: 8, boxShadow: '0 4px 18px #0005' }, children: [_jsx(MessagingPopupHeader, { title: "Quick message", foreground: c.foreground, closeLabel: "Close quick message picker", onClose: () => setAnchor(null) }), _jsx(ScrollView, { style: { maxHeight: 220 }, keyboardShouldPersistTaps: "handled", contentContainerStyle: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center' }, children: quickMessageOptions.map(item => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: item.label, accessibilityState: { selected: emoji === item.emoji }, onPress: () => { held.current = false; setAnchor(null); onChoose(item.emoji); }, style: { width: 46, height: 44, alignItems: 'center', justifyContent: 'center', borderRadius: 10, backgroundColor: emoji === item.emoji ? c.accent + '20' : 'transparent' }, children: _jsx(Text, { style: { fontSize: 26, lineHeight: 32 }, children: item.emoji }) }, item.emoji)) })] })] }) })] });
+}

package/dist/safety.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { MessagingClient, MessagingAppearance, MessagingState } from '@robono/messaging';
 /** Uses the authenticated messaging client's durable safety operations, or the host can keep its own UI. */
-export declare function MessagingSafety({ client, state, appearance, name, messageId, onClose, onSearch }: {
+export declare function MessagingSafety({ client, state, appearance, name, messageId, onClose, onSearch, onDetails, onPins, onSaved, children, menuAnchor }: {
     client: MessagingClient;
     state: MessagingState;
     appearance: MessagingAppearance;
@@ -9,4 +9,12 @@ export declare function MessagingSafety({ client, state, appearance, name, messa
     messageId?: string;
     onClose: () => void;
     onSearch?: () => void;
+    onDetails?: () => void;
+    onPins?: () => void;
+    onSaved?: () => void;
+    children?: React.ReactNode;
+    menuAnchor?: {
+        x: number;
+        y: number;
+    };
 }): React.JSX.Element;

package/dist/safety.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { messagingPopupColors } from './popup.js';
 import { useEffect, useRef, useState } from 'react';
-import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { MessagingPopup } from './popup.js';
+import { MessageIcon } from './icons.js';
+import { Modal, Platform, Pressable, ScrollView, Text, TextInput, View, useWindowDimensions } from 'react-native';
 /** Uses the authenticated messaging client's durable safety operations, or the host can keep its own UI. */
-export function MessagingSafety({ client, state, appearance, name, messageId, onClose, onSearch }) {
+export function MessagingSafety({ client, state, appearance, name, messageId, onClose, onSearch, onDetails, onPins, onSaved, children, menuAnchor }) {
     const [mode, setMode] = useState(messageId ? 'report' : 'menu');
     const [category, setCategory] = useState(''), [details, setDetails] = useState(''), [busy, setBusy] = useState(false), [error, setError] = useState('');
     const reportRequest = useRef(null), reportContent = useRef('');
@@ -11,10 +14,17 @@ export function MessagingSafety({ client, state, appearance, name, messageId, on
     useEffect(() => { if (!visible && Platform.OS !== 'ios')
         dismissed(); }, [visible]);
     useEffect(() => () => { afterClose.current = null; }, [client]);
+    const viewport = useWindowDimensions();
+    useEffect(() => { if (!visible || mode !== 'menu' || !menuAnchor || Platform.OS !== 'web')
+        return; const close = (event) => { if (event.key === 'Escape') {
+        event.stopPropagation();
+        onClose();
+    } }; document.addEventListener('keydown', close, true); return () => document.removeEventListener('keydown', close, true); }, [visible, mode, menuAnchor, onClose]);
     const search = () => { afterClose.current = onSearch ?? null; setVisible(false); };
-    const c = appearance.colors, safety = state.conversation?.safety, blocked = safety?.blockedByMe;
+    const c = { ...appearance.colors, ...messagingPopupColors }, safety = state.conversation?.safety, blocked = safety?.blockedByMe;
     const primaryInk = (() => { const hex = c.accent.replace('#', ''); const expanded = hex.length === 3 ? hex.split('').map(x => x + x).join('') : hex; const value = parseInt(expanded, 16); return Number.isFinite(value) && ((value >> 16) * .299 + ((value >> 8) & 255) * .587 + (value & 255) * .114) > 155 ? '#111111' : '#ffffff'; })();
     const button = (label, press, disabled = false, kind = 'plain') => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label, accessibilityState: { disabled: busy || disabled }, disabled: busy || disabled, onPress: press, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, paddingVertical: 10, justifyContent: 'center', alignItems: kind === 'plain' ? 'flex-start' : 'center', borderRadius: 12, flex: kind === 'plain' ? undefined : 1, backgroundColor: kind === 'primary' ? c.accent : kind === 'danger' ? '#b72d34' : kind === 'cancel' ? c.incoming : 'transparent', opacity: (busy || disabled) ? 0.5 : pressed ? 0.7 : 1 }), children: _jsx(Text, { style: { color: kind === 'primary' ? primaryInk : kind === 'danger' ? '#fff' : c.foreground, fontSize: 16, fontWeight: kind === 'plain' ? '400' : '600' }, children: label }) });
+    const menuRow = (label, icon, press, accessibilityLabel = label) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel, onPress: press, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 12, backgroundColor: pressed ? '#ffffff0c' : 'transparent' }), children: [_jsx(MessageIcon, { name: icon, color: c.secondary, size: 22 }), _jsx(Text, { style: { flex: 1, color: c.foreground, fontSize: 15, fontWeight: '600' }, children: label })] });
     async function block() { setBusy(true); setError(''); try {
         await client.setBlocked(!blocked);
         onClose();
@@ -48,6 +58,11 @@ export function MessagingSafety({ client, state, appearance, name, messageId, on
             setBusy(false);
         }
     }
-    return _jsx(Modal, { visible: visible, onDismiss: dismissed, transparent: true, animationType: "fade", onRequestClose: () => { if (!busy)
-            onClose(); }, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: { flex: 1, backgroundColor: '#0009', justifyContent: 'center', alignItems: 'center', padding: 24 }, children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", accessibilityViewIsModal: true, style: { width: '100%', maxWidth: 360, flexGrow: 0, flexShrink: 1, maxHeight: '90%', backgroundColor: c.background, borderRadius: 20, borderWidth: 1, borderColor: c.secondary + '40' }, contentContainerStyle: { padding: 20, gap: 8 }, children: [_jsx(Text, { accessibilityRole: "header", style: { fontSize: 20, fontWeight: '600', color: c.foreground }, children: mode === 'menu' ? name : mode === 'block' ? `${blocked ? 'Unblock' : 'Block'} ${name}?` : mode === 'sent' ? 'Report sent' : messageId ? 'Report message' : 'Report conversation' }), mode === 'menu' && _jsxs(_Fragment, { children: [onSearch && button('Search messages', search), safety?.canBlock && button(blocked ? 'Unblock contact' : 'Block contact', () => setMode('block')), safety?.canReport && button('Report', () => setMode('report'))] }), mode === 'block' && _jsx(_Fragment, { children: _jsx(Text, { style: { fontSize: 14, lineHeight: 21, color: c.secondary }, children: blocked ? 'You will be able to message and call each other again. Messages attempted while blocked will not be delivered.' : 'This stops direct messages and calls between you. Your existing chat stays. They will not receive a notification that you blocked them. Shared group messages are not hidden.' }) }), mode === 'report' && _jsxs(_Fragment, { children: [_jsxs(Text, { style: { fontSize: 14, lineHeight: 21, color: c.secondary }, children: [messageId ? 'This message and your reason will be shared with this app’s moderation team.' : 'Up to five recent messages from other people in this conversation and your reason will be shared with this app’s moderation team.', " Report details are kept for up to 30 days. Reporting does not block this contact."] }), ['Spam', 'Harassment', 'Inappropriate content', 'Other'].map(value => _jsxs(Pressable, { accessibilityRole: "radio", accessibilityLabel: value, accessibilityState: { checked: category === value }, disabled: busy, onPress: () => setCategory(value), style: { minHeight: 40, flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx(View, { style: { width: 18, height: 18, borderRadius: 9, borderWidth: 2, borderColor: c.accent, backgroundColor: category === value ? c.accent : 'transparent' } }), _jsx(Text, { style: { color: c.foreground, fontSize: 15 }, children: value })] }, value)), _jsx(TextInput, { accessibilityLabel: "Report details", placeholder: "Tell us what happened (optional)", placeholderTextColor: c.secondary, value: details, onChangeText: setDetails, multiline: true, maxLength: 1800, editable: !busy, style: { color: c.foreground, minHeight: 80, borderWidth: 1, borderColor: c.secondary + '60', borderRadius: 10, padding: 12, fontSize: 15 } })] }), mode === 'sent' && _jsx(Text, { style: { color: c.secondary, fontSize: 15, lineHeight: 21 }, children: "Your report was saved for review. The other person is not notified." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), _jsxs(View, { style: { flexDirection: 'row', gap: 8, marginTop: 8 }, children: [mode !== 'sent' && button('Cancel', onClose, false, 'cancel'), mode === 'block' && button(blocked ? 'Unblock' : 'Block', () => void block(), false, blocked ? 'primary' : 'danger'), mode === 'report' && button(busy ? 'Sending…' : 'Send report', () => void report(), !category && !details.trim(), 'primary'), mode === 'sent' && button('Done', onClose, false, 'primary')] })] }) }) });
+    const choose = (next) => { afterClose.current = () => { setMode(next); setVisible(true); }; setVisible(false); };
+    if (mode === 'menu' && menuAnchor) {
+        const count = Number(!!onSearch) + Number(!!onDetails) + Number(!!onPins) + Number(!!children) + Number(!!safety?.canBlock) + Number(!!safety?.canReport), height = count * 44 + 8;
+        return _jsx(Modal, { visible: visible, transparent: true, animationType: "none", onDismiss: dismissed, onRequestClose: onClose, children: _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1 }, children: [_jsx(Pressable, { accessibilityLabel: "Close contact options", onPress: onClose, style: { position: 'absolute', inset: 0 } }), _jsx(View, { testID: "messaging-contact-dropdown", style: { position: 'absolute', left: menuAnchor.x, top: Math.max(12, Math.min(menuAnchor.y, viewport.height - height - 12)), width: Math.min(240, viewport.width - 24), maxHeight: viewport.height - 24, borderRadius: 16, borderWidth: .5, borderColor: '#ffffff22', backgroundColor: '#151515', paddingVertical: 4, overflow: 'hidden', boxShadow: '0 8px 18px #0006' }, children: _jsxs(ScrollView, { bounces: false, keyboardShouldPersistTaps: "handled", children: [onDetails && menuRow(state.conversation?.kind === 'group' ? 'Group details' : 'Contact details', 'person', () => { afterClose.current = onDetails; setVisible(false); }), onPins && menuRow('Pinned messages', 'bookmark', () => { afterClose.current = onPins; setVisible(false); }), onSearch && menuRow('Search this chat', 'search', search), children && menuRow('Translation', 'translate', () => choose('translation')), safety?.canBlock && menuRow(blocked ? 'Unblock contact' : 'Block contact', 'shield', () => choose('block')), safety?.canReport && menuRow('Report', 'flag-outline', () => choose('report'))] }) })] }) });
+    }
+    return _jsx(MessagingPopup, { compact: mode === 'block' || mode === 'sent', withinChat: mode === 'translation', contentWidth: 640, visible: visible, onDismiss: dismissed, background: c.background, foreground: c.foreground, closeLabel: "Close contact options", closeDisabled: busy, title: mode === 'menu' ? name : mode === 'translation' ? 'Translation' : mode === 'block' ? `${blocked ? 'Unblock' : 'Block'} ${name}?` : mode === 'sent' ? 'Report sent' : messageId ? 'Report message' : 'Report conversation', onClose: () => { if (!busy)
+            onClose(); }, children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", style: { ...(mode === 'block' || mode === 'sent' ? { flexGrow: 0, flexShrink: 1 } : { flex: 1 }), minHeight: 0 }, contentContainerStyle: { gap: 20, paddingBottom: 12 }, children: [mode === 'menu' && _jsxs(_Fragment, { children: [onSearch && _jsx(View, { style: { backgroundColor: '#111111', borderRadius: 12, borderWidth: 1, borderColor: '#ffffff14', overflow: 'hidden' }, children: menuRow('Search this chat', 'search', search) }), children, (safety?.canBlock || safety?.canReport) && _jsxs(View, { style: { backgroundColor: '#111111', borderRadius: 12, borderWidth: 1, borderColor: '#ffffff14', overflow: 'hidden' }, children: [safety?.canBlock && menuRow(blocked ? 'Unblock contact' : 'Block contact', 'shield', () => setMode('block')), safety?.canReport && menuRow('Report', 'flag-outline', () => setMode('report'))] })] }), mode === 'translation' && children, mode === 'block' && _jsx(_Fragment, { children: _jsx(Text, { style: { fontSize: 14, lineHeight: 21, color: c.secondary }, children: blocked ? 'You will be able to message and call each other again. Messages attempted while blocked will not be delivered.' : 'This stops direct messages and calls between you. Your existing chat stays. They will not receive a notification that you blocked them. Shared group messages are not hidden.' }) }), mode === 'report' && _jsxs(_Fragment, { children: [_jsxs(Text, { style: { fontSize: 14, lineHeight: 21, color: c.secondary }, children: [messageId ? 'This message and your reason will be shared with this app’s moderation team.' : 'Up to five recent messages from other people in this conversation and your reason will be shared with this app’s moderation team.', " Report details are kept for up to 30 days. Reporting does not block this contact."] }), ['Spam', 'Harassment', 'Inappropriate content', 'Other'].map(value => _jsxs(Pressable, { accessibilityRole: "radio", accessibilityLabel: value, accessibilityState: { checked: category === value }, disabled: busy, onPress: () => setCategory(value), style: { minHeight: 40, flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx(View, { style: { width: 18, height: 18, borderRadius: 9, borderWidth: 2, borderColor: c.accent, backgroundColor: category === value ? c.accent : 'transparent' } }), _jsx(Text, { style: { color: c.foreground, fontSize: 15 }, children: value })] }, value)), _jsx(TextInput, { accessibilityLabel: "Report details", placeholder: "Tell us what happened (optional)", placeholderTextColor: c.secondary, value: details, onChangeText: setDetails, multiline: true, maxLength: 1800, editable: !busy, style: { color: c.foreground, minHeight: 80, borderWidth: 1, borderColor: c.secondary + '60', borderRadius: 10, padding: 12, fontSize: 15 } })] }), mode === 'sent' && _jsx(Text, { style: { color: c.secondary, fontSize: 15, lineHeight: 21 }, children: "Your report was saved for review. The other person is not notified." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), mode !== 'menu' && mode !== 'translation' && _jsxs(View, { style: { flexDirection: 'row', gap: 8, marginTop: 8 }, children: [(mode === 'block' || mode === 'report') && button('Cancel', onClose, false, 'cancel'), mode === 'block' && button(blocked ? 'Unblock' : 'Block', () => void block(), false, blocked ? 'primary' : 'danger'), mode === 'report' && button(busy ? 'Sending…' : 'Send report', () => void report(), !category && !details.trim(), 'primary'), mode === 'sent' && button('Done', onClose, false, 'primary')] })] }) });
 }

package/dist/saved.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MessagingAppearance, SavedMessage } from '@robono/messaging';
-/** Same compact popup and media viewer as the conversation; no server-history copy. */
+/** Same app-sized popup and media viewer as the conversation; no server-history copy. */
 export declare function SavedMessagesPopup({ records, appearance, onClose, onOpen, onRemove }: {
     records: SavedMessage[];
     appearance: MessagingAppearance;

package/dist/saved.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { messagingPopupColors } from './popup.js';
 import { useEffect, useRef, useState } from 'react';
 import { Platform, Pressable, ScrollView, Text, View } from 'react-native';
 import { MessagingPopup } from './popup.js';
 import { MessageIcon } from './icons.js';
-/** Same compact popup and media viewer as the conversation; no server-history copy. */
+/** Same app-sized popup and media viewer as the conversation; no server-history copy. */
 export function SavedMessagesPopup({ records, appearance, onClose, onOpen, onRemove }) {
-    const c = appearance.colors, [limit, setLimit] = useState(30), [error, setError] = useState(''), [busy, setBusy] = useState(false), [detail, setDetail] = useState(null);
+    const c = { ...appearance.colors, ...messagingPopupColors }, [limit, setLimit] = useState(30), [error, setError] = useState(''), [busy, setBusy] = useState(false), [detail, setDetail] = useState(null);
     const [visible, setVisible] = useState(true), pending = useRef(null), alive = useRef(true);
     useEffect(() => { alive.current = true; return () => { alive.current = false; pending.current = null; }; }, []);
     // iOS presents one controller at a time. Finish dismissing Saved before opening
@@ -41,6 +42,10 @@ export function SavedMessagesPopup({ records, appearance, onClose, onOpen, onRem
         return;
     } if (busy)
         return; setBusy(true); setError(''); pending.current = record; setVisible(false); }
-    return _jsxs(MessagingPopup, { visible: visible, onDismiss: () => void dismissed(), background: c.background, onClose: () => { if (!busy)
-            onClose(); }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsx(Text, { accessibilityRole: "header", style: { flex: 1, color: c.foreground, fontSize: 17, fontWeight: '600' }, children: detail ? 'Saved message' : 'Saved' }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: detail ? 'Back to Saved' : 'Close Saved', disabled: busy, onPress: () => detail ? setDetail(null) : onClose(), style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: detail ? 'back' : 'close', color: c.foreground }) })] }), _jsx(ScrollView, { style: { maxHeight: 400 }, children: detail ? _jsxs(_Fragment, { children: [_jsxs(Text, { style: { color: c.secondary, fontSize: 12, marginBottom: 10 }, children: [detail.conversationTitle, " \u00B7 ", new Date(detail.message.createdAt).toLocaleDateString()] }), _jsx(Text, { selectable: true, style: { color: c.foreground, fontSize: 16, lineHeight: 23 }, children: detail.message.text })] }) : records.slice(0, limit).map(record => _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: c.secondary + '20' }, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Open saved message: ' + (record.message.text || record.message.media?.fileName || 'Attachment'), disabled: busy, onPress: () => void open(record), style: { flex: 1, paddingVertical: 12, gap: 3 }, children: [_jsxs(Text, { style: { color: c.secondary, fontSize: 12 }, children: [record.conversationTitle, " \u00B7 ", new Date(record.message.createdAt).toLocaleDateString()] }), _jsx(Text, { numberOfLines: 2, style: { color: c.foreground, fontSize: 15, lineHeight: 20 }, children: record.message.text || record.message.media?.fileName || 'Attachment' }), record.message.media && !!record.message.text && _jsx(Text, { numberOfLines: 1, style: { color: c.secondary, fontSize: 12 }, children: record.message.media.fileName || record.message.kind })] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Remove saved message: ' + (record.message.text || record.message.media?.fileName || 'Attachment'), disabled: busy, onPress: () => { setBusy(true); setError(''); void onRemove(record.key).catch(e => setError(e instanceof Error ? e.message : 'This saved message could not be removed.')).finally(() => setBusy(false)); }, style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "trash", color: c.secondary, size: 20 }) })] }, record.key)) }), !records.length && _jsx(Text, { style: { color: c.secondary, marginVertical: 16 }, children: "No saved messages yet." }), !detail && records.length > limit && _jsx(Pressable, { accessibilityRole: "button", onPress: () => setLimit(n => n + 30), style: { minHeight: 44, justifyContent: 'center', alignSelf: 'flex-end' }, children: _jsx(Text, { style: { color: c.accent }, children: "More saved messages" }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error })] });
+    return _jsxs(MessagingPopup, { contentWidth: 640, visible: visible, onDismiss: () => void dismissed(), background: c.background, title: detail ? 'Saved message' : 'Saved', foreground: c.foreground, closeLabel: detail ? 'Back to Saved' : 'Close Saved', closeDisabled: busy, headerBack: !!detail, onClose: () => { if (!busy) {
+            if (detail)
+                setDetail(null);
+            else
+                onClose();
+        } }, children: [!detail && _jsx(Text, { style: { color: c.secondary, fontSize: 13, marginBottom: 12 }, children: "Saved from all chats" }), _jsxs(ScrollView, { style: { flex: 1, minHeight: 0 }, children: [!records.length && _jsx(Text, { style: { color: c.secondary, marginVertical: 16 }, children: "No saved messages yet." }), detail ? _jsxs(_Fragment, { children: [_jsxs(Text, { style: { color: c.secondary, fontSize: 12, marginBottom: 10 }, children: [detail.conversationTitle, " \u00B7 ", new Date(detail.message.createdAt).toLocaleDateString()] }), _jsx(Text, { selectable: true, style: { color: c.foreground, fontSize: 16, lineHeight: 23 }, children: detail.message.text })] }) : records.slice(0, limit).map(record => _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: c.secondary + '20' }, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Open saved message: ' + (record.message.text || record.message.media?.fileName || 'Attachment'), disabled: busy, onPress: () => void open(record), style: { flex: 1, paddingVertical: 14, paddingHorizontal: 8, gap: 4 }, children: [_jsxs(Text, { style: { color: c.secondary, fontSize: 12 }, children: [record.conversationTitle, " \u00B7 ", new Date(record.message.createdAt).toLocaleDateString()] }), _jsx(Text, { numberOfLines: 2, style: { color: c.foreground, fontSize: 15, lineHeight: 20 }, children: record.message.text || record.message.media?.fileName || 'Attachment' }), record.message.media && !!record.message.text && _jsx(Text, { numberOfLines: 1, style: { color: c.secondary, fontSize: 12 }, children: record.message.media.fileName || record.message.kind })] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Remove saved message: ' + (record.message.text || record.message.media?.fileName || 'Attachment'), disabled: busy, onPress: () => { setBusy(true); setError(''); void onRemove(record.key).catch(e => setError(e instanceof Error ? e.message : 'This saved message could not be removed.')).finally(() => setBusy(false)); }, style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "trash", color: c.secondary, size: 20 }) })] }, record.key))] }), !detail && records.length > limit && _jsx(Pressable, { accessibilityRole: "button", onPress: () => setLimit(n => n + 30), style: { minHeight: 44, justifyContent: 'center', alignSelf: 'flex-end' }, children: _jsx(Text, { style: { color: c.accent }, children: "More saved messages" }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error })] });
 }

package/dist/search.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { MessagingAppearance, MessagingClient } from '@robono/messaging';
-/** Uses the same centered popup proportions as Messenger's chat details. */
-export declare function MessagingSearch({ client, appearance, onClose, resolveName }: {
+/** Messenger's in-conversation search: keep the chat visible and move between matches. */
+export declare function MessagingSearch({ client, appearance, onClose }: {
     client: MessagingClient;
     appearance: MessagingAppearance;
     onClose: () => void;

package/dist/search.js

@@ -1,13 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
-/** Uses the same centered popup proportions as Messenger's chat details. */
-export function MessagingSearch({ client, appearance, onClose, resolveName }) {
-    const c = appearance.colors, [query, setQuery] = useState(''), [searched, setSearched] = useState(''), [messages, setMessages] = useState([]), [next, setNext] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState('');
-    const request = useRef(null), generation = useRef(0);
-    useEffect(() => () => { generation.current++; request.current?.abort(); }, []);
+import { ActivityIndicator, Pressable, Text, TextInput, View } from 'react-native';
+import { MessageIcon } from './icons.js';
+/** Messenger's in-conversation search: keep the chat visible and move between matches. */
+export function MessagingSearch({ client, appearance, onClose }) {
+    const c = appearance.colors, [query, setQuery] = useState(''), [messages, setMessages] = useState([]), [index, setIndex] = useState(0), [next, setNext] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState('');
+    const request = useRef(null), generation = useRef(0), timer = useRef(undefined);
+    useEffect(() => () => { generation.current++; request.current?.abort(); clearTimeout(timer.current); }, []);
+    async function focus(message, id) { try {
+        await client.focusMessage(message.id);
+    }
+    catch (e) {
+        if (id === generation.current)
+            setError(e instanceof Error ? e.message : 'This message is unavailable.');
+    } }
     async function search(more = false) {
-        const term = (more ? searched : query).trim();
+        clearTimeout(timer.current);
+        const term = query.trim();
         if (!term)
             return;
         request.current?.abort();
@@ -16,17 +25,17 @@ export function MessagingSearch({ client, appearance, onClose, resolveName }) {
         const id = ++generation.current;
         setBusy(true);
         setError('');
-        if (!more) {
-            setMessages([]);
-            setNext(null);
-            setSearched(term);
-        }
         try {
             const result = await client.search(term, { ...(more && next ? { before: next } : {}), signal: control.signal });
             if (id !== generation.current)
                 return;
-            setMessages(previous => more ? [...previous, ...result.messages] : result.messages);
+            const rows = more ? [...messages, ...result.messages.filter(m => !messages.some(old => old.id === m.id))] : result.messages;
+            const target = more ? Math.min(index + 1, Math.max(0, rows.length - 1)) : 0;
+            setMessages(rows);
+            setIndex(target);
             setNext(result.hasMore ? result.nextCursor : null);
+            if (rows[target])
+                await focus(rows[target], id);
         }
         catch (e) {
             if (id === generation.current && !control.signal.aborted)
@@ -37,5 +46,14 @@ export function MessagingSearch({ client, appearance, onClose, resolveName }) {
                 setBusy(false);
         }
     }
-    return _jsx(Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: onClose, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#0009', padding: 20 }, children: _jsxs(View, { accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: { width: '100%', maxWidth: 360, maxHeight: '85%', padding: 16, borderRadius: 18, backgroundColor: c.background, gap: 12 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsx(Text, { accessibilityRole: "header", style: { flex: 1, color: c.foreground, fontSize: 16, fontWeight: '600' }, children: "Search messages" }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close search", onPress: onClose, hitSlop: 12, children: _jsx(Text, { style: { color: c.accent, fontSize: 16 }, children: "Done" }) })] }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsx(TextInput, { accessibilityLabel: "Search text", value: query, maxLength: 200, autoFocus: true, placeholder: "Find a message", placeholderTextColor: c.secondary, onChangeText: value => { request.current?.abort(); generation.current++; setBusy(false); setQuery(value); setSearched(''); setMessages([]); setNext(null); setError(''); }, onSubmitEditing: () => void search(), returnKeyType: "search", style: { flex: 1, minWidth: 0, minHeight: 44, padding: 10, borderRadius: 10, borderWidth: 1, borderColor: c.secondary + '60', color: c.foreground, fontSize: 16 } }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Search", disabled: busy || !query.trim(), onPress: () => void search(), style: { minHeight: 44, justifyContent: 'center', opacity: (busy || !query.trim()) ? 0.5 : 1 }, children: _jsx(Text, { style: { color: c.accent, fontSize: 16 }, children: "Search" }) })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", contentContainerStyle: { gap: 14 }, style: { flexShrink: 1 }, children: [messages.map(message => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Go to message: ' + message.text, disabled: busy, onPress: () => { setBusy(true); setError(''); void client.focusMessage(message.id).then(onClose).catch(e => setError(e instanceof Error ? e.message : 'This message is unavailable.')).finally(() => setBusy(false)); }, style: { gap: 4, minHeight: 44 }, children: [_jsxs(Text, { style: { color: c.secondary, fontSize: 12 }, children: [resolveName?.(message.senderId) ?? 'Chat member', " \u00B7 ", new Date(message.createdAt).toLocaleDateString()] }), _jsx(Text, { selectable: true, style: { color: c.foreground, fontSize: 16, lineHeight: 22 }, children: message.text })] }, message.id)), searched && !busy && !error && !messages.length && _jsx(Text, { style: { color: c.secondary }, children: "No matching messages." }), next && !busy && _jsx(Pressable, { accessibilityRole: "button", onPress: () => void search(true), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "More results" }) })] }), busy && _jsx(ActivityIndicator, { accessibilityLabel: "Searching messages", color: c.accent })] }) }) });
+    useEffect(() => { if (query.trim())
+        timer.current = setTimeout(() => void search(), 300); return () => clearTimeout(timer.current); }, [query]);
+    function change(value) { generation.current++; request.current?.abort(); clearTimeout(timer.current); setBusy(Boolean(value.trim())); setQuery(value); setMessages([]); setIndex(0); setNext(null); setError(''); }
+    async function move(direction) { if (busy || !messages.length)
+        return; if (direction > 0 && index === messages.length - 1 && next) {
+        await search(true);
+        return;
+    } const target = (index + direction + messages.length) % messages.length; setIndex(target); await focus(messages[target], generation.current); }
+    const nav = (label, icon, direction) => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label, disabled: busy || !messages.length, onPress: () => void move(direction), style: { width: 36, height: 44, alignItems: 'center', justifyContent: 'center', opacity: (busy || !messages.length) ? 0.4 : 1 }, children: _jsx(MessageIcon, { name: icon, size: 20, color: c.foreground }) });
+    return _jsxs(View, { testID: "conversation-search", style: { backgroundColor: c.background, borderBottomWidth: 1, borderBottomColor: c.foreground + '20' }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', paddingLeft: 10, gap: 4 }, children: [_jsx(MessageIcon, { name: "search", size: 18, color: c.secondary }), _jsx(TextInput, { accessibilityLabel: "Search this chat", placeholder: "Search this chat", value: query, onChangeText: change, onSubmitEditing: () => void search(), autoFocus: true, autoCapitalize: "none", autoCorrect: false, maxLength: 200, returnKeyType: "search", placeholderTextColor: c.secondary, style: { flex: 1, minWidth: 0, minHeight: 44, color: c.foreground, fontSize: 15 } }), busy ? _jsx(ActivityIndicator, { accessibilityLabel: "Searching messages", color: c.accent }) : !!query.trim() && _jsx(Text, { accessibilityLiveRegion: "polite", style: { color: c.secondary, fontSize: 12 }, children: messages.length ? `${index + 1}/${messages.length}${next ? '+' : ''}` : '0' }), nav('Previous search result', 'chevron-up', -1), nav('Next search result', 'chevron-down', 1), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close search", onPress: onClose, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", size: 20, color: c.foreground }) })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, paddingHorizontal: 12, paddingBottom: 8, fontSize: 13 }, children: error })] });
 }

package/dist/social.d.ts

@@ -1,4 +1,4 @@
-import React, { type ComponentType } from 'react';
+import React, { type ComponentType, type ReactNode } from 'react';
 import { type MessagingClient, type MessagingMessage } from '@robono/messaging';
 export interface SocialPlayerProps {
     html: string;
@@ -8,7 +8,7 @@ export interface SocialPlayerProps {
     onError: () => void;
     onClose: () => void;
 }
-export declare function SocialMessagePreview({ message, client, Player, origin, accent, foreground, background }: {
+interface SocialMessagePreviewProps {
     message: MessagingMessage;
     client: MessagingClient;
     Player: ComponentType<SocialPlayerProps>;
@@ -16,4 +16,10 @@ export declare function SocialMessagePreview({ message, client, Player, origin,
     accent: string;
     foreground: string;
     background: string;
-}): React.JSX.Element | null;
+    onLongPress?: () => void;
+    renderMessage?: (action: ReactNode) => ReactNode;
+}
+export declare const SocialMessagePreview: React.ForwardRefExoticComponent<SocialMessagePreviewProps & React.RefAttributes<{
+    open: () => void;
+}>>;
+export {};