@robono/messaging-react-native 0.9.0 → 0.10.0

package/dist/room-moderation.js

@@ -0,0 +1,87 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, FlatList, Image, Pressable, View } from 'react-native';
+import { Text, TextInput } from './typography.js';
+import { useRobonoLocale } from './localization.js';
+import { MessagingPopup, messagingPopupColors as c } from './popup.js';
+/** Owners/moderators see current roles; the service decides whether each change is allowed. */
+export function MessagingRoomModeration({ client, userId, participants = {}, accent, onClose }) {
+    const { text } = useRobonoLocale();
+    const [rows, setRows] = useState([]), [next, setNext] = useState(null), [loading, setLoading] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState(''), [selected, setSelected] = useState(null), [confirm, setConfirm] = useState(null);
+    const generation = useRef(0), attempt = useRef(null), working = useRef(false);
+    const owner = client.getSnapshot().conversation?.roomRole === 'owner';
+    async function load(more = false) {
+        const gen = ++generation.current;
+        setLoading(true);
+        setError('');
+        try {
+            const page = await client.roomMembers(more && next ? next : undefined);
+            if (gen !== generation.current)
+                return;
+            setRows(current => [...new Map([...(more ? current : []), ...page.members].map(m => [m.userId, m])).values()]);
+            setNext(page.hasMore ? page.nextCursor : null);
+        }
+        catch (e) {
+            if (gen === generation.current)
+                setError(e instanceof Error ? e.message : text('Group members could not be loaded.'));
+        }
+        finally {
+            if (gen === generation.current)
+                setLoading(false);
+        }
+    }
+    useEffect(() => { void load(); return () => { ++generation.current; }; }, [client]);
+    async function apply() {
+        if (!confirm || working.current)
+            return;
+        working.current = true;
+        setBusy(true);
+        setError('');
+        const key = JSON.stringify(confirm);
+        if (attempt.current?.key !== key)
+            attempt.current = { key, id: client.createForwardId() };
+        try {
+            await client.moderateRoom({ ...confirm, requestId: attempt.current.id });
+            attempt.current = null;
+            setConfirm(null);
+            setSelected(null);
+            await load();
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : text('This change could not be saved.'));
+        }
+        finally {
+            working.current = false;
+            setBusy(false);
+        }
+    }
+    const labels = { promote: 'Make moderator', demote: 'Remove moderator role', mute: 'Mute member', unmute: 'Unmute member', ban: 'Ban member', unban: 'Remove ban' };
+    return _jsxs(MessagingPopup, { title: text('Group moderation'), background: c.background, onClose: onClose, children: [confirm ? _jsxs(View, { style: { gap: 16, paddingVertical: 12 }, children: [_jsxs(Text, { style: { color: c.foreground, fontSize: 20, fontWeight: '600' }, children: [text(labels[confirm.action]), " \u00B7 ", participants[confirm.userId]?.name ?? confirm.userId] }), _jsx(Text, { style: { color: c.secondary, fontSize: 16, lineHeight: 23 }, children: text(confirm.action === 'ban' ? 'They will leave this group and cannot rejoin until the ban is removed.' : confirm.action === 'mute' ? 'They can read this group but cannot post or react.' : confirm.action === 'promote' ? 'They can mute and ban members. Only the owner can change moderator roles.' : confirm.action === 'unban' ? 'They can choose to join again. This does not automatically rejoin them.' : 'This changes their permissions in this group.') }), _jsxs(View, { style: { flexDirection: 'row', gap: 16 }, children: [_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => void apply(), style: { minHeight: 48, justifyContent: 'center', paddingHorizontal: 16, borderRadius: 12, backgroundColor: confirm.action === 'ban' ? '#b72d34' : accent }, children: _jsx(Text, { style: { color: confirm.action === 'ban' ? '#fff' : '#000', fontWeight: '600' }, children: busy ? text('Saving…') : text(labels[confirm.action]) }) }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setConfirm(null), style: { minHeight: 48, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: text('Back') }) })] })] }) : _jsx(FlatList, { data: rows, keyExtractor: m => m.userId, style: { flex: 1 }, contentContainerStyle: { paddingHorizontal: 8, paddingBottom: 12 }, renderItem: ({ item }) => {
+                    const allowed = item.userId !== userId && item.role !== 'owner' && (owner || item.role !== 'moderator');
+                    const actions = item.banned ? ['unban'] : ['mute', 'ban'];
+                    if (!item.banned && item.muted)
+                        actions[0] = 'unmute';
+                    if (owner && !item.banned)
+                        actions.unshift(item.role === 'moderator' ? 'demote' : 'promote');
+                    return _jsxs(View, { style: { borderBottomWidth: 1, borderBottomColor: '#ffffff20' }, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: text('Manage {name}', { name: participants[item.userId]?.name ?? item.userId }), disabled: !allowed, onPress: () => setSelected(selected === item.userId ? null : item.userId), style: { minHeight: 64, flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [participants[item.userId]?.avatarUrl && _jsx(Image, { source: { uri: participants[item.userId].avatarUrl }, style: { width: 36, height: 36, borderRadius: 18 } }), _jsxs(View, { style: { flex: 1, gap: 4 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 17 }, children: item.userId === userId ? text('You') : participants[item.userId]?.name ?? item.userId }), _jsx(Text, { style: { color: c.secondary, fontSize: 14 }, children: text(item.banned ? 'Banned' : item.role === 'owner' ? 'Owner' : item.role === 'moderator' ? 'Moderator' : item.muted ? 'Muted' : 'Member') })] }), allowed && _jsx(Text, { style: { color: accent, fontSize: 15 }, children: text('Manage') })] }), allowed && selected === item.userId && _jsx(View, { style: { gap: 4, paddingBottom: 12 }, children: actions.map(action => _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setError(''); setConfirm({ userId: item.userId, action }); }, style: { minHeight: 44, justifyContent: 'center', paddingHorizontal: 12, borderRadius: 10, backgroundColor: '#ffffff0c' }, children: _jsx(Text, { style: { color: action === 'ban' ? '#ff8282' : accent, fontSize: 16 }, children: text(labels[action]) }) }, action)) })] });
+                }, ListFooterComponent: _jsxs(View, { children: [loading && _jsx(ActivityIndicator, { color: accent, accessibilityLabel: text('Loading group members'), style: { padding: 16 } }), next && !loading && _jsx(Pressable, { accessibilityRole: "button", onPress: () => void load(true), style: { minHeight: 48, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: text('Load more members') }) })] }) }), !!error && _jsxs(View, { style: { padding: 12, gap: 4 }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), !confirm && _jsx(Pressable, { accessibilityRole: "button", onPress: () => void load(), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: text('Retry') }) })] })] });
+}
+export function MessagingRoomRemoval({ client, message, accent, onClose }) {
+    const { text } = useRobonoLocale();
+    const [reason, setReason] = useState(''), [busy, setBusy] = useState(false), [error, setError] = useState('');
+    const attempt = useRef(null), working = useRef(false);
+    async function remove() { if (working.current || !reason.trim())
+        return; working.current = true; setBusy(true); setError(''); if (attempt.current?.reason !== reason.trim())
+        attempt.current = { reason: reason.trim(), id: client.createForwardId() }; try {
+        await client.removeRoomMessage({ messageId: message.id, revision: message.revision ?? 0, reason: attempt.current.reason, requestId: attempt.current.id });
+        onClose();
+    }
+    catch (e) {
+        setError(e instanceof Error ? e.message : text('This message could not be removed.'));
+    }
+    finally {
+        working.current = false;
+        setBusy(false);
+    } }
+    return _jsx(MessagingPopup, { compact: true, title: text('Remove from group?'), background: c.background, closeDisabled: busy, onClose: onClose, children: _jsxs(View, { style: { gap: 12, paddingTop: 12 }, children: [_jsx(Text, { style: { color: c.secondary, fontSize: 16, lineHeight: 23 }, children: text('This removes the message for everyone in this group, even if it has been read. Your reason is kept in the moderation record.') }), _jsx(TextInput, { accessibilityLabel: text('Reason for removing message'), placeholder: text('Reason'), placeholderTextColor: c.secondary, multiline: true, maxLength: 1000, value: reason, onChangeText: setReason, editable: !busy, style: { color: c.foreground, fontSize: 16, minHeight: 80, padding: 12, borderWidth: 1, borderColor: c.secondary, borderRadius: 12 } }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: text('Remove message for group'), disabled: busy || !reason.trim(), onPress: () => void remove(), style: { minHeight: 48, borderRadius: 12, alignItems: 'center', justifyContent: 'center', backgroundColor: '#b72d34', opacity: busy || !reason.trim() ? .5 : 1 }, children: _jsx(Text, { style: { color: '#fff', fontSize: 16, fontWeight: '600' }, children: busy ? text('Removing…') : text('Remove message') }) })] }) });
+}

package/dist/safety.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text, TextInput } from './typography.js';
 import { useRobonoLocale } from './localization.js';
 import { MessagingMenuSurface } from './popup.js';
 import { messagingPopupColors } from './popup.js';
 import { useEffect, useRef, useState } from 'react';
 import { MessagingPopup } from './popup.js';
 import { MessageIcon } from './icons.js';
-import { Platform, Pressable, ScrollView, Text, TextInput, View, useWindowDimensions } from 'react-native';
+import { Platform, Pressable, ScrollView, 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, onDetails, onPins, onScheduled, onSaved, children, menuAnchor }) {
     const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();

package/dist/saved.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from './typography.js';
 import { useRobonoLocale } from './localization.js';
 import { messagingPopupColors } from './popup.js';
 import { useEffect, useRef, useState } from 'react';
-import { Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { Platform, Pressable, ScrollView, View } from 'react-native';
 import { MessagingPopup } from './popup.js';
 import { MessageIcon } from './icons.js';
 /** Same app-sized popup and media viewer as the conversation; no server-history copy. */

package/dist/scheduled.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, TextInput } from './typography.js';
 import { useRobonoLocale } from './localization.js';
 import { useEffect, useRef, useState } from 'react';
-import { Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { Pressable, ScrollView, View } from 'react-native';
 import { MessagingPopup, messagingPopupColors as colors } from './popup.js';
 const pad = (n) => String(n).padStart(2, '0');
 /** Same bounded popup as the other Messenger tools; all dates are shown locally. */

package/dist/search.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, TextInput } from './typography.js';
 import { useRobonoLocale } from './localization.js';
 import { useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, Pressable, Text, TextInput, View } from 'react-native';
+import { ActivityIndicator, Pressable, 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 }) {

package/dist/social.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from './typography.js';
 import { useRobonoLocale } from './localization.js';
 import { forwardRef, useImperativeHandle, useEffect, useState } from 'react';
-import { ActivityIndicator, AppState, Linking, Pressable, Text, View } from 'react-native';
+import { ActivityIndicator, AppState, Linking, Pressable, View } from 'react-native';
 import { socialShare } from '@robono/messaging';
 import { MessagingPopup } from './popup.js';
 import { MessageIcon } from './icons.js';

package/dist/translation-settings.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from './typography.js';
 import { useRobonoLocale } from './localization.js';
 import { MessageIcon } from './icons.js';
 import { messagingPopupColors } from './popup.js';
 import { useState } from 'react';
-import { Pressable, ScrollView, Text, View } from 'react-native';
+import { Pressable, ScrollView, View } from 'react-native';
 import { normalizeLanguageCode, supportedLanguages, supportedLanguageLabel } from '@robono/messaging';
 /** The choice belongs to the conversation, never to an individual message. */
 export function TranslationSettings({ client, appearance, preference, language, sourceLanguage, voiceAvailable, onSaved }) {

package/dist/typography.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Text as NativeText, TextInput as NativeTextInput, type TextProps, type TextInputProps } from 'react-native';
+import type { MessagingAppearance } from '@robono/messaging';
+/** Local to this Messenger. Does not change host-app text or device accessibility scaling. */
+export declare function MessagingTypography({ appearance, children }: {
+    appearance: MessagingAppearance;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export type Text = NativeText;
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<NativeText>>;
+export type TextInput = NativeTextInput;
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<NativeTextInput>>;

package/dist/typography.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo } from 'react';
+import { Platform, StyleSheet, Text as NativeText, TextInput as NativeTextInput } from 'react-native';
+const defaults = { fontFamily: undefined, scale: 1 };
+const Typography = createContext(defaults), InsideText = createContext(false);
+/** Local to this Messenger. Does not change host-app text or device accessibility scaling. */
+export function MessagingTypography({ appearance, children }) {
+    const font = appearance.presentation?.font ?? 'system', scale = appearance.presentation?.textScale ?? 1;
+    const value = useMemo(() => ({ fontFamily: font === 'serif' ? Platform.OS === 'ios' ? 'Georgia' : Platform.OS === 'web' ? 'Georgia, "Times New Roman", serif' : 'serif' : font === 'monospace' ? Platform.OS === 'ios' ? 'Menlo' : Platform.OS === 'web' ? 'Menlo, Consolas, monospace' : 'monospace' : undefined, scale: [1, 1.15, 1.3].includes(scale) ? scale : 1 }), [font, scale]);
+    return _jsx(Typography.Provider, { value: value, children: children });
+}
+function useTextStyle(style, nested = false) {
+    const { fontFamily, scale } = useContext(Typography), flat = StyleSheet.flatten(style) ?? {};
+    const base = typeof flat.fontSize === 'number' ? flat.fontSize : nested ? undefined : 14;
+    const resolved = { ...(fontFamily ? { fontFamily } : {}), ...flat };
+    if (scale !== 1) {
+        if (base !== undefined)
+            resolved.fontSize = base * scale;
+        if (typeof flat.lineHeight === 'number')
+            resolved.lineHeight = flat.lineHeight * scale;
+    }
+    return resolved;
+}
+export const Text = forwardRef(function MessagingText({ style, children, ...props }, ref) {
+    const nested = useContext(InsideText), resolved = useTextStyle(style, nested);
+    return _jsx(InsideText.Provider, { value: true, children: _jsx(NativeText, { ...props, ref: ref, style: resolved, children: children }) });
+});
+export const TextInput = forwardRef(function MessagingTextInput({ style, ...props }, ref) {
+    const resolved = useTextStyle(style);
+    return _jsx(NativeTextInput, { ...props, ref: ref, style: resolved });
+});

package/dist/voice-composer.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from './typography.js';
 import { useRobonoLocale } from './localization.js';
-import { ActivityIndicator, Pressable, Text, View } from 'react-native';
+import { ActivityIndicator, Pressable, View } from 'react-native';
 import { MessageIcon, duration, composerSurface } from './icons.js';
 function Waveform({ samples = [], color }) {
     const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robono/messaging-react-native",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "sideEffects": false,
   "description": "Optional, composable direct and group messaging screens for Robono.",
@@ -55,7 +55,7 @@
     "prepack": "npm run build && node ../../scripts/generate-sdk-file-sbom.mjs"
   },
   "peerDependencies": {
-    "@robono/messaging": "^0.6.0",
+    "@robono/messaging": "^0.7.0",
     "react": ">=18.2 <20",
     "react-native": ">=0.76 <1",
     "expo-audio": ">=55 <57",
@@ -67,7 +67,7 @@
     "expo-crypto": ">=55 <57",
     "react-native-safe-area-context": ">=5 <6",
     "react-native-svg": ">=15 <16",
-    "@robono/calling-react-native": "^0.7.0",
+    "@robono/calling-react-native": "^0.8.0",
     "expo-clipboard": ">=8 <57",
     "expo-image-manipulator": ">=14 <57",
     "expo-video-thumbnails": ">=14 <57",
@@ -75,12 +75,12 @@
     "expo-blur": ">=55 <57",
     "expo-notifications": ">=55 <57",
     "expo-secure-store": ">=55 <57",
-    "@robono/location-react-native": "^0.3.0",
+    "@robono/location-react-native": "^0.4.0",
     "expo-location": ">=55 <57",
     "expo-constants": ">=55 <57",
-    "@robono/location": "^0.3.0",
+    "@robono/location": "^0.4.0",
     "expo-haptics": ">=55 <57",
-    "@robono/calling": "^0.4.0"
+    "@robono/calling": "^0.5.0"
   },
   "license": "SEE LICENSE IN LICENSE",
   "peerDependenciesMeta": {