@robono/messaging-react-native 0.8.0 → 0.10.0

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,20 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ActivityIndicator, Pressable, Text, View } from 'react-native';
+import { Text } from './typography.js';
+import { useRobonoLocale } from './localization.js';
+import { ActivityIndicator, Pressable, View } from 'react-native';
 import { MessageIcon, duration, composerSurface } from './icons.js';
 function Waveform({ samples = [], color }) {
-    return _jsx(View, { accessibilityLabel: "Recording waveform", style: { flex: 1, minWidth: 0, height: 24, flexDirection: 'row', alignItems: 'center', gap: 2, overflow: 'hidden' }, children: Array.from({ length: 28 }, (_, i) => { const value = samples[Math.floor(i * samples.length / 28)] ?? 0; return _jsx(View, { style: { flex: 1, borderRadius: 2, height: 3 + Math.max(0, Math.min(1, value)) * 21, backgroundColor: color, opacity: samples.length ? .8 : .25 } }, i); }) });
+    const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
+    return _jsx(View, { accessibilityLabel: uiText("Recording waveform"), style: { flex: 1, minWidth: 0, height: 24, flexDirection: 'row', alignItems: 'center', gap: 2, overflow: 'hidden' }, children: Array.from({ length: 28 }, (_, i) => { const value = samples[Math.floor(i * samples.length / 28)] ?? 0; return _jsx(View, { style: { flex: 1, borderRadius: 2, height: 3 + Math.max(0, Math.min(1, value)) * 21, backgroundColor: color, opacity: samples.length ? .8 : .25 } }, i); }) });
 }
 /** Messenger's inline recorder; adapters supply media state and the optional text composer. */
 export function VoiceMessageComposer({ appearance, maxSeconds, busy, onRecord, actions, phase = 'idle', elapsedMs = 0, waveform, error, review, onStop, onSend, onRemove, renderTextComposer, renderAttachments }) {
+    const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
     const c = appearance.colors, recording = phase === 'recording', waiting = phase === 'preparing' || phase === 'uploading' || (busy && phase === 'idle');
     const canSend = !!review && (phase === 'review' || phase === 'failed') && !!onSend;
     if (renderTextComposer && !recording && phase !== 'preparing' && phase !== 'uploading')
-        return _jsxs(View, { style: { gap: 4 }, children: [renderAttachments ? renderAttachments(review, waiting) : review && _jsx(View, { style: { paddingHorizontal: 8, paddingTop: 4 }, children: review }), renderTextComposer({ sendVoice: canSend ? onSend : undefined, hasVoice: !!review, blocked: waiting }), !!error && _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 8 }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 12, flex: 1 }, children: error }), onRemove && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel recording", onPress: onRemove, style: { padding: 8 }, children: _jsx(MessageIcon, { name: "close", color: c.foreground, size: 18 }) })] })] });
-    return _jsxs(View, { testID: "voice-only-composer", style: { gap: 5 }, children: [renderAttachments?.(review, waiting || recording), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'flex-end', gap: 4 }, children: [_jsxs(View, { style: { flex: 1, minWidth: 0, minHeight: 44, borderRadius: 22, backgroundColor: composerSurface(c.background), flexDirection: 'row', alignItems: 'center', overflow: 'hidden' }, children: [!recording && !review && !waiting && actions, review && !renderAttachments ? _jsx(View, { style: { flex: 1, minWidth: 0, paddingLeft: 10 }, children: review }) : recording ? _jsxs(View, { style: { flex: 1, minWidth: 0, flexDirection: 'row', alignItems: 'center', gap: 6, paddingLeft: 10 }, children: [_jsx(Text, { style: { fontSize: 11, fontWeight: '800', color: c.incomingText, fontVariant: ['tabular-nums'] }, children: duration(Math.floor(elapsedMs / 1000) * 1000) }), appearance.showWaveform !== false ? _jsx(Waveform, { samples: waveform, color: c.accent }) : _jsx(View, { style: { flex: 1 } }), _jsx(Text, { style: { fontSize: 11, fontWeight: '800', color: c.incomingText, fontVariant: ['tabular-nums'] }, children: duration(maxSeconds * 1000) })] }) : _jsx(View, { style: { flex: 1, minWidth: 0, paddingHorizontal: 12 }, children: _jsx(Text, { style: { color: c.secondary, fontSize: 14, fontWeight: '800' }, children: waiting ? (phase === 'uploading' ? 'Sending…' : 'Preparing…') : `Voice up to ${maxSeconds}s` }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: recording ? 'Stop recording' : 'Voice message', disabled: waiting || !!review || phase === 'failed', onPress: recording ? onStop : onRecord, style: { width: 42, height: 44, alignItems: 'center', justifyContent: 'center', opacity: (waiting || !!review || phase === 'failed') ? .45 : 1 }, children: waiting ? _jsx(ActivityIndicator, { size: "small", color: c.accent }) : _jsx(MessageIcon, { name: "mic", color: recording ? '#c94040' : c.accent, size: 23 }) })] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: canSend ? 'Send voice message' : 'Send unavailable', accessibilityState: { disabled: !canSend }, disabled: !canSend, onPress: onSend, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', opacity: canSend ? 1 : .4 }, children: _jsx(MessageIcon, { name: "send", color: c.accent, size: 24 }) })] }), !!error && _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 8 }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 12, flex: 1 }, children: error }), onRemove && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel recording", onPress: onRemove, style: { padding: 8 }, children: _jsx(MessageIcon, { name: "close", color: c.foreground, size: 18 }) })] })] });
+        return _jsxs(View, { style: { gap: 4 }, children: [renderAttachments ? renderAttachments(review, waiting) : review && _jsx(View, { style: { paddingHorizontal: 8, paddingTop: 4 }, children: review }), renderTextComposer({ sendVoice: canSend ? onSend : undefined, hasVoice: !!review, blocked: waiting }), !!error && _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 8 }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 12, flex: 1 }, children: error }), onRemove && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Cancel recording"), onPress: onRemove, style: { padding: 8 }, children: _jsx(MessageIcon, { name: "close", color: c.foreground, size: 18 }) })] })] });
+    return _jsxs(View, { testID: "voice-only-composer", style: { gap: 5 }, children: [renderAttachments?.(review, waiting || recording), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'flex-end', gap: 4 }, children: [_jsxs(View, { style: { flex: 1, minWidth: 0, minHeight: 44, borderRadius: 22, backgroundColor: composerSurface(c.background), flexDirection: 'row', alignItems: 'center', overflow: 'hidden' }, children: [!recording && !review && !waiting && actions, review && !renderAttachments ? _jsx(View, { style: { flex: 1, minWidth: 0, paddingLeft: 10 }, children: review }) : recording ? _jsxs(View, { style: { flex: 1, minWidth: 0, flexDirection: 'row', alignItems: 'center', gap: 6, paddingLeft: 10 }, children: [_jsx(Text, { style: { fontSize: 11, fontWeight: '800', color: c.incomingText, fontVariant: ['tabular-nums'] }, children: duration(Math.floor(elapsedMs / 1000) * 1000) }), appearance.showWaveform !== false ? _jsx(Waveform, { samples: waveform, color: c.accent }) : _jsx(View, { style: { flex: 1 } }), _jsx(Text, { style: { fontSize: 11, fontWeight: '800', color: c.incomingText, fontVariant: ['tabular-nums'] }, children: duration(maxSeconds * 1000) })] }) : _jsx(View, { style: { flex: 1, minWidth: 0, paddingHorizontal: 12 }, children: _jsx(Text, { style: { color: c.secondary, fontSize: 14, fontWeight: '800' }, children: waiting ? (phase === 'uploading' ? 'Sending…' : 'Preparing…') : uiText("Voice up to {value1}s", { value1: maxSeconds }) }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: recording ? uiText("Stop recording") : uiText("Voice message"), disabled: waiting || !!review || phase === 'failed', onPress: recording ? onStop : onRecord, style: { width: 42, height: 44, alignItems: 'center', justifyContent: 'center', opacity: (waiting || !!review || phase === 'failed') ? .45 : 1 }, children: waiting ? _jsx(ActivityIndicator, { size: "small", color: c.accent }) : _jsx(MessageIcon, { name: "mic", color: recording ? '#c94040' : c.accent, size: 23 }) })] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: canSend ? uiText("Send voice message") : uiText("Send unavailable"), accessibilityState: { disabled: !canSend }, disabled: !canSend, onPress: onSend, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', opacity: canSend ? 1 : .4 }, children: _jsx(MessageIcon, { name: "send", color: c.accent, size: 24 }) })] }), !!error && _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 8 }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 12, flex: 1 }, children: error }), onRemove && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Cancel recording"), onPress: onRemove, style: { padding: 8 }, children: _jsx(MessageIcon, { name: "close", color: c.foreground, size: 18 }) })] })] });
 }
 export function VoiceDraftPlayback({ appearance, playing, positionMs = 0, durationMs = 0, waveform, onToggle, onRemove, disabled = false, error, compact = false }) {
+    const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
     const c = appearance.colors;
     if (compact)
-        return _jsxs(View, { style: { width: 88, height: 84, paddingTop: 8, paddingRight: 10 }, children: [_jsxs(View, { style: { width: 76, height: 76, borderRadius: 9, borderWidth: 1, borderColor: c.secondary + '40', backgroundColor: c.background, alignItems: 'center', justifyContent: 'center', gap: 2 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: playing ? 'Pause recorded voice message' : 'Play recorded voice message', disabled: disabled, onPress: onToggle, style: { width: 44, height: 38, alignItems: 'center', justifyContent: 'center' }, children: _jsx(View, { style: { width: 28, height: 28, borderRadius: 14, backgroundColor: c.accent, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: "#fff", size: 18 }) }) }), _jsx(Text, { style: { fontSize: 10, fontWeight: '800', color: c.foreground }, children: duration(positionMs >= durationMs ? durationMs : durationMs - positionMs) })] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Remove voice message", disabled: disabled, onPress: onRemove, style: { position: 'absolute', right: 0, top: 0, width: 30, height: 30, alignItems: 'center', justifyContent: 'center' }, children: _jsx(View, { style: { width: 22, height: 22, borderRadius: 11, backgroundColor: c.foreground, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", color: c.background, size: 14 }) }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 11 }, children: error })] });
-    return _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 3 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 7, minHeight: 44 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: playing ? 'Pause recorded voice message' : 'Play recorded voice message', disabled: disabled, onPress: onToggle, style: { width: 32, height: 32, borderRadius: 16, backgroundColor: c.accent, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: "#fff", size: 17 }) }), appearance.showWaveform !== false ? _jsx(Waveform, { samples: waveform, color: c.accent }) : _jsx(View, { style: { flex: 1 } }), _jsx(Text, { style: { fontSize: 12, fontWeight: '800', color: c.incomingText, fontVariant: ['tabular-nums'] }, children: duration(positionMs >= durationMs ? durationMs : durationMs - positionMs) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Remove voice message", disabled: disabled, onPress: onRemove, style: { width: 30, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", color: c.incomingText, size: 16 }) })] }), !!error && _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 8 }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 12, flex: 1 }, children: error }), onRemove && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel recording", onPress: onRemove, style: { padding: 8 }, children: _jsx(MessageIcon, { name: "close", color: c.foreground, size: 18 }) })] })] });
+        return _jsxs(View, { style: { width: 88, height: 84, paddingTop: 8, paddingRight: 10 }, children: [_jsxs(View, { style: { width: 76, height: 76, borderRadius: 9, borderWidth: 1, borderColor: c.secondary + '40', backgroundColor: c.background, alignItems: 'center', justifyContent: 'center', gap: 2 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: playing ? uiText("Pause recorded voice message") : uiText("Play recorded voice message"), disabled: disabled, onPress: onToggle, style: { width: 44, height: 38, alignItems: 'center', justifyContent: 'center' }, children: _jsx(View, { style: { width: 28, height: 28, borderRadius: 14, backgroundColor: c.accent, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: "#fff", size: 18 }) }) }), _jsx(Text, { style: { fontSize: 10, fontWeight: '800', color: c.foreground }, children: duration(positionMs >= durationMs ? durationMs : durationMs - positionMs) })] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Remove voice message"), disabled: disabled, onPress: onRemove, style: { position: 'absolute', right: 0, top: 0, width: 30, height: 30, alignItems: 'center', justifyContent: 'center' }, children: _jsx(View, { style: { width: 22, height: 22, borderRadius: 11, backgroundColor: c.foreground, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", color: c.background, size: 14 }) }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 11 }, children: error })] });
+    return _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 3 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 7, minHeight: 44 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: playing ? uiText("Pause recorded voice message") : uiText("Play recorded voice message"), disabled: disabled, onPress: onToggle, style: { width: 32, height: 32, borderRadius: 16, backgroundColor: c.accent, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: "#fff", size: 17 }) }), appearance.showWaveform !== false ? _jsx(Waveform, { samples: waveform, color: c.accent }) : _jsx(View, { style: { flex: 1 } }), _jsx(Text, { style: { fontSize: 12, fontWeight: '800', color: c.incomingText, fontVariant: ['tabular-nums'] }, children: duration(positionMs >= durationMs ? durationMs : durationMs - positionMs) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Remove voice message"), disabled: disabled, onPress: onRemove, style: { width: 30, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", color: c.incomingText, size: 16 }) })] }), !!error && _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 8 }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 12, flex: 1 }, children: error }), onRemove && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Cancel recording"), onPress: onRemove, style: { padding: 8 }, children: _jsx(MessageIcon, { name: "close", color: c.foreground, size: 18 }) })] })] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robono/messaging-react-native",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "type": "module",
   "sideEffects": false,
   "description": "Optional, composable direct and group messaging screens for Robono.",
@@ -36,7 +36,8 @@
     "./expo-notifications": {
       "types": "./dist/expo-notifications.d.ts",
       "import": "./dist/expo-notifications.js"
-    }
+    },
+    "./setup": "./setup.plugin.cjs"
   },
   "files": [
     "dist",
@@ -46,14 +47,15 @@
     "plugin",
     "CHANGELOG.md",
     "SBOM.spdx.json",
-    "licenses"
+    "licenses",
+    "setup.plugin.cjs"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "prepack": "npm run build && node ../../scripts/generate-sdk-file-sbom.mjs"
   },
   "peerDependencies": {
-    "@robono/messaging": "^0.5.0",
+    "@robono/messaging": "^0.7.0",
     "react": ">=18.2 <20",
     "react-native": ">=0.76 <1",
     "expo-audio": ">=55 <57",
@@ -65,7 +67,7 @@
     "expo-crypto": ">=55 <57",
     "react-native-safe-area-context": ">=5 <6",
     "react-native-svg": ">=15 <16",
-    "@robono/calling-react-native": "^0.6.0",
+    "@robono/calling-react-native": "^0.8.0",
     "expo-clipboard": ">=8 <57",
     "expo-image-manipulator": ">=14 <57",
     "expo-video-thumbnails": ">=14 <57",
@@ -73,12 +75,12 @@
     "expo-blur": ">=55 <57",
     "expo-notifications": ">=55 <57",
     "expo-secure-store": ">=55 <57",
-    "@robono/location-react-native": "^0.2.0",
+    "@robono/location-react-native": "^0.4.0",
     "expo-location": ">=55 <57",
     "expo-constants": ">=55 <57",
-    "@robono/location": "^0.2.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": {

package/setup.plugin.cjs

@@ -0,0 +1,20 @@
+const {withPlugins,createRunOncePlugin}=require('expo/config-plugins');
+const fs=require('node:fs');
+const path=require('node:path');
+
+/** One composition point for hosted Messenger. Explicit host plugin choices win. */
+module.exports=createRunOncePlugin(config=>{
+ const existing=new Set((config.plugins??[]).map(p=>Array.isArray(p)?p[0]:p));
+ const plugins=[
+  ['expo-sensors',{motionPermission:'Allow this app to share device movement with the people you choose. This does not share your location.'}],
+  ['expo-location',{locationWhenInUsePermission:'Allow location access when you choose to share weather or your location.'}],
+  ['expo-audio',{microphonePermission:'Allow microphone access for voice messages and calls.',enableBackgroundRecording:false}],
+  ['expo-image-picker',{cameraPermission:'Allow camera access to take photos and videos for messages.'}],
+  'expo-notifications','@robono/messaging-react-native',
+  ['@robono/calling-react-native',{video:true,screenSharing:true}],
+ ];
+ const root=config._internal?.projectRoot;
+ const accessFiles={ios:'.robono/maps-ios.json',android:'.robono/maps-android.json'};
+ if(root&&Object.values(accessFiles).every(file=>fs.existsSync(path.join(root,file))))plugins.push(['@robono/location-react-native',{accessFiles,background:true}]);
+ return withPlugins(config,plugins.filter(p=>!existing.has(Array.isArray(p)?p[0]:p)));
+},'@robono/messaging-react-native/setup',require('./package.json').version);