@robono/messaging-react-native 0.2.0 → 0.3.0

package/dist/social.js

@@ -1,29 +1,25 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { ActivityIndicator, AppState, Linking, Platform, Pressable, Text, View, useWindowDimensions } from 'react-native';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useEffect, useState } from 'react';
+import { ActivityIndicator, AppState, Linking, Pressable, Text, View } from 'react-native';
 import { socialShare } from '@robono/messaging';
 import { MessagingPopup } from './popup.js';
-import { MessageIcon, chatSurface } from './icons.js';
+import { MessageIcon } from './icons.js';
 import { messageLinks } from './message-links.js';
-export function SocialMessagePreview({ message, client, Player, origin, accent, foreground, background }) {
+export const SocialMessagePreview = forwardRef(function SocialMessagePreview({ message, client, Player, origin, accent, foreground, background, onLongPress, renderMessage }, ref) {
     const share = messageLinks(message.text ?? '').map(link => link.url ? socialShare(link.url, origin) : null).find(Boolean);
     const [opened, setOpened] = useState(null);
+    useImperativeHandle(ref, () => ({ open: () => { if (share && !message.deleted)
+            setOpened({ client, message }); } }), [share, client, message]);
     const open = opened?.client === client && opened.message.id === message.id && opened.message.conversationId === message.conversationId && opened.message.text === message.text && opened.message.revision === message.revision;
     useEffect(() => { const sub = AppState.addEventListener('change', state => { if (state !== 'active')
         setOpened(null); }); return () => sub.remove(); }, []);
     if (!share || message.deleted)
         return null;
-    return _jsxs(_Fragment, { children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Play ${share.provider} preview`, onPress: event => { event.stopPropagation(); setOpened({ client, message }); }, style: { paddingVertical: 5 }, children: _jsxs(Text, { numberOfLines: 1, style: { color: accent, fontSize: 13, fontWeight: '600' }, children: ["\u25B6 ", share.provider] }) }), open && _jsx(SocialPreviewPopup, { message: message, client: client, Player: Player, origin: origin, provider: share.provider, url: share.url, accent: accent, foreground: foreground, background: background, onClose: () => setOpened(null) }, message.id)] });
-}
+    const action = _jsx(Pressable, { testID: "social-preview-action", hitSlop: 6, accessibilityRole: "button", accessibilityLabel: `Play ${share.provider} preview`, onLongPress: onLongPress, onPress: event => { event.stopPropagation(); setOpened({ client, message }); }, style: ({ pressed }) => ({ flexShrink: 0, width: 32, height: 32, borderRadius: 16, borderWidth: 1, borderColor: accent + '70', backgroundColor: accent + (pressed ? '30' : '0d'), flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }), children: _jsx(MessageIcon, { name: "play", color: accent, size: 16 }) });
+    return _jsxs(_Fragment, { children: [renderMessage ? renderMessage(action) : action, open && _jsx(SocialPreviewPopup, { message: message, client: client, Player: Player, origin: origin, provider: share.provider, url: share.url, accent: accent, foreground: foreground, background: background, onClose: () => setOpened(null) }, message.id)] });
+});
 function SocialPreviewPopup({ message, client, Player, origin, provider, url, accent, foreground, background, onClose }) {
     const [preview, setPreview] = useState(null), [busy, setBusy] = useState(true), [error, setError] = useState('');
-    const { height } = useWindowDimensions();
-    useEffect(() => { if (Platform.OS !== 'web')
-        return; const escape = (event) => { if (event.key === 'Escape') {
-        event.preventDefault();
-        event.stopPropagation();
-        onClose();
-    } }; document.addEventListener('keydown', escape, true); return () => document.removeEventListener('keydown', escape, true); }, [onClose]);
     useEffect(() => { let active = true; void client.socialPreview(message.id, origin).then(result => { if (active) {
         setPreview(result);
         if (!result.html)
@@ -31,5 +27,5 @@ function SocialPreviewPopup({ message, client, Player, origin, provider, url, ac
     } }).catch(() => { if (active)
         setError('This preview could not be loaded. Open the original below.'); }).finally(() => { if (active)
         setBusy(false); }); return () => { active = false; }; }, [client, message.id, origin]);
-    return _jsxs(MessagingPopup, { background: chatSurface(background), onClose: onClose, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsx(Text, { accessibilityRole: "header", style: { flex: 1, color: foreground, fontSize: 17, fontWeight: '600' }, children: provider }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close social preview", onPress: onClose, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", color: foreground }) })] }), busy && _jsx(ActivityIndicator, { accessibilityLabel: "Loading social preview", color: accent, style: { margin: 20 } }), !!preview?.html && _jsx(View, { style: { height: Math.max(180, Math.min(['YouTube', 'Rumble', 'Vimeo', 'Dailymotion', 'Twitch'].includes(provider) ? 220 : 400, height * .65 - 60)), overflow: 'hidden', borderRadius: 10 }, children: _jsx(Player, { html: preview.html, frame: preview.frame, origin: origin, provider: provider, onClose: onClose, onError: () => setError('This preview is unavailable. Open the original below.') }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: foreground, fontSize: 13, paddingVertical: 8 }, children: error }), _jsx(Pressable, { accessibilityRole: "link", accessibilityLabel: `Open ${provider}`, onPress: () => { void Linking.openURL(url).catch(() => setError('This link could not be opened.')); }, style: { minHeight: 44, justifyContent: 'center' }, children: _jsxs(Text, { style: { color: accent, fontWeight: '600' }, children: ["Open ", provider] }) })] });
+    return _jsxs(MessagingPopup, { expanded: true, bottomPadding: 4, background: "#000000", title: provider, foreground: "#ffffff", closeLabel: "Close social preview", onClose: onClose, children: [busy && _jsx(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, children: _jsx(ActivityIndicator, { accessibilityLabel: "Loading social preview", color: accent }) }), !!preview?.html && _jsx(View, { testID: "social-preview-player", style: { flex: 1, minHeight: 0, overflow: 'hidden', borderRadius: 10 }, children: _jsx(Player, { html: preview.html, frame: preview.frame, origin: origin, provider: provider, onClose: onClose, onError: () => setError('This preview is unavailable. Open the original below.') }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#ffffff', fontSize: 13, paddingVertical: 8 }, children: error }), _jsx(Pressable, { accessibilityRole: "link", accessibilityLabel: `Open ${provider}`, onPress: () => { void Linking.openURL(url).catch(() => setError('This link could not be opened.')); }, style: { minHeight: 44, justifyContent: 'center' }, children: _jsxs(Text, { style: { color: accent, fontWeight: '600' }, children: ["Open ", provider] }) })] });
 }

package/dist/translation-settings.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type TranslationPreference, type MessagingClient, type MessagingAppearance } from '@robono/messaging';
+/** The choice belongs to the conversation, never to an individual message. */
+export declare function TranslationSettings({ client, appearance, preference, language, sourceLanguage, voiceAvailable, onSaved }: {
+    client: MessagingClient;
+    appearance: MessagingAppearance;
+    preference?: TranslationPreference;
+    language?: string;
+    sourceLanguage?: string;
+    voiceAvailable: boolean;
+    onSaved: () => void;
+}): React.JSX.Element;

package/dist/translation-settings.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageIcon } from './icons.js';
+import { messagingPopupColors } from './popup.js';
+import { useState } from 'react';
+import { Pressable, ScrollView, Text, 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 }) {
+    const [value, setValue] = useState(() => preference ?? { mode: 'off', language: normalizeLanguageCode(language ?? Intl.DateTimeFormat().resolvedOptions().locale) ?? 'en', sourceLanguage: normalizeLanguageCode(sourceLanguage) });
+    const [choosing, setChoosing] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState('');
+    const c = { ...appearance.colors, ...messagingPopupColors };
+    return _jsxs(View, { style: { gap: 8 }, children: [_jsx(Text, { style: { fontSize: 13, fontWeight: '600', color: c.secondary, paddingHorizontal: 4 }, children: "Translation" }), _jsxs(View, { style: { backgroundColor: '#111111', borderRadius: 12, borderWidth: 1, borderColor: '#ffffff14', padding: 12, gap: 4 }, children: [_jsx(View, { accessibilityRole: "radiogroup", style: { flexDirection: 'row', borderWidth: 1, borderColor: '#ffffff14', borderRadius: 9, overflow: 'hidden', padding: 3, gap: 3 }, children: ['off', 'text', 'voice'].map(mode => _jsx(Pressable, { accessibilityRole: "radio", accessibilityLabel: 'Translation ' + mode, accessibilityState: { checked: value.mode === mode, disabled: busy || mode === 'voice' && !voiceAvailable }, disabled: busy || mode === 'voice' && !voiceAvailable, onPress: () => setValue(v => ({ ...v, mode })), style: { flex: 1, minHeight: 36, borderRadius: 6, alignItems: 'center', justifyContent: 'center', backgroundColor: value.mode === mode ? c.accent + '25' : 'transparent', opacity: mode === 'voice' && !voiceAvailable ? .4 : 1 }, children: _jsx(Text, { style: { color: value.mode === mode ? c.accent : c.secondary, fontSize: 14, fontWeight: '600' }, children: mode === 'off' ? 'Off' : mode === 'text' ? 'Text' : 'Voice' }) }, mode)) }), ['sourceLanguage', 'language'].map(field => _jsxs(View, { children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: field === 'language' ? 'Translation language' : 'Incoming language', disabled: busy, onPress: () => setChoosing(choosing === field ? null : field), style: { minHeight: 48, flexDirection: 'row', alignItems: 'center', gap: 10, borderBottomWidth: field === 'sourceLanguage' ? 1 : 0, borderBottomColor: '#ffffff14' }, children: [_jsx(Text, { style: { flex: 1, color: c.secondary, fontSize: 14 }, children: field === 'language' ? 'Translate into' : 'Messages in' }), _jsx(Text, { style: { color: c.accent, fontSize: 15, flexShrink: 1, textAlign: 'right' }, children: value[field] ? supportedLanguageLabel(value[field]) : 'Choose language' }), _jsx(MessageIcon, { name: choosing === field ? 'chevron-up' : 'chevron-down', color: c.secondary, size: 16 })] }), choosing === field && _jsx(ScrollView, { style: { maxHeight: 180 }, keyboardShouldPersistTaps: "handled", children: supportedLanguages.map(item => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Choose ' + item.name, onPress: () => { setValue(v => ({ ...v, [field]: item.code })); setChoosing(null); }, style: { minHeight: 40, paddingHorizontal: 8, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground }, children: item.name }) }, item.code)) })] }, field)), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Save translation preference", disabled: busy, onPress: () => { if (value.mode !== 'off' && !value.sourceLanguage) {
+                            setError('Choose the incoming language once for this conversation.');
+                            return;
+                        } setError(''); setBusy(true); void client.setTranslationPreference(value).then(onSaved).catch(() => setError('The translation preference could not be saved. Try again.')).finally(() => setBusy(false)); }, style: { minHeight: 40, minWidth: 96, paddingHorizontal: 18, marginTop: 8, alignSelf: 'flex-end', alignItems: 'center', justifyContent: 'center', borderRadius: 9, backgroundColor: c.accent, opacity: busy ? 0.5 : 1 }, children: _jsx(Text, { style: { color: '#111111', fontSize: 14, fontWeight: '600' }, children: busy ? 'Saving…' : 'Save' }) })] })] });
+}

package/dist/use-quote-gesture.d.ts

@@ -1,7 +1,11 @@
 import { Animated } from 'react-native';
-export declare function useQuoteGesture(enabled: boolean, outgoing: boolean, quote: () => void): {
+export declare const messageInfoRevealWidth = 176;
+export declare const messageReplyRevealWidth = 104;
+export declare function useQuoteGesture(enabled: boolean, outgoing: boolean, quote: (() => void) | undefined, details?: () => void): {
     offset: number | Animated.Value;
     webRef: import("react").RefObject<HTMLElement | null> | undefined;
+    infoLoaded: boolean;
+    infoOpacity: number | Animated.AnimatedInterpolation<string | number>;
     revealOpacity: number | Animated.AnimatedInterpolation<string | number>;
     revealWebStyle: {
         transitionProperty: string;

package/dist/use-quote-gesture.js

@@ -1,12 +1,17 @@
 import { useEffect, useRef, useState } from 'react';
-import { Animated, PanResponder, Platform } from 'react-native';
-const threshold = 48;
-export function useQuoteGesture(enabled, outgoing, quote) {
+import { Animated, Easing, I18nManager, PanResponder, Platform } from 'react-native';
+// Same travel, trigger and return timing as Messenger's MessageSwipeReveal.
+export const messageInfoRevealWidth = 176;
+export const messageReplyRevealWidth = 104;
+const threshold = 82;
+export function useQuoteGesture(enabled, outgoing, quote, details) {
     const offset = useRef(new Animated.Value(0)).current;
     const [webOffset, setWebOffset] = useState(0);
     const [webDragging, setWebDragging] = useState(false);
-    const current = useRef({ enabled, direction: outgoing ? -1 : 1, quote });
-    current.current = { enabled, direction: outgoing ? -1 : 1, quote };
+    const direction = (outgoing !== !!I18nManager.isRTL) ? -1 : 1;
+    const [infoLoaded, setInfoLoaded] = useState(false);
+    const current = useRef({ enabled, direction, quote, details });
+    current.current = { enabled, direction, quote, details };
     const suppressUntil = useRef(0);
     const reset = () => {
         if (Platform.OS === 'web') {
@@ -14,13 +19,21 @@ export function useQuoteGesture(enabled, outgoing, quote) {
             setWebOffset(0);
         }
         else
-            Animated.spring(offset, { toValue: 0, useNativeDriver: true, speed: 28, bounciness: 0 }).start();
+            Animated.timing(offset, { toValue: 0, duration: 150, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
+    };
+    const accepts = (dx, dy) => {
+        const { enabled, direction, quote } = current.current;
+        return enabled && Math.abs(dx) >= (Platform.OS === 'ios' ? 10 : 8) &&
+            Math.abs(dx) >= Math.abs(dy) * (Platform.OS === 'ios' ? .55 : 1.15) &&
+            (dx * direction < 0 || !!quote && dx * direction > 0);
     };
-    const accepts = (dx, dy) => current.current.enabled &&
-        dx * current.current.direction > 10 && Math.abs(dx) > Math.abs(dy) * 1.5;
     const move = (dx) => {
         suppressUntil.current = Date.now() + 400;
-        const value = current.current.direction * Math.max(0, Math.min(72, dx * current.current.direction));
+        const info = dx * current.current.direction < 0;
+        if (info)
+            setInfoLoaded(true);
+        const limit = info ? messageInfoRevealWidth : current.current.quote ? messageReplyRevealWidth : 0;
+        const value = Math.sign(dx) * Math.min(limit, Math.abs(dx));
         if (Platform.OS === 'web') {
             setWebDragging(true);
             setWebOffset(value);
@@ -29,20 +42,23 @@ export function useQuoteGesture(enabled, outgoing, quote) {
             offset.setValue(value);
     };
     const finish = (dx, cancelled = false) => {
+        suppressUntil.current = Date.now() + 400;
         if (!cancelled && current.current.enabled && dx * current.current.direction >= threshold)
-            current.current.quote();
+            current.current.quote?.();
+        else if (!cancelled && current.current.enabled && dx * current.current.direction <= -threshold)
+            current.current.details?.();
         reset();
     };
     const responder = useRef(PanResponder.create({
         onStartShouldSetPanResponder: () => { suppressUntil.current = 0; return false; },
         onStartShouldSetPanResponderCapture: () => { suppressUntil.current = 0; return false; },
-        onMoveShouldSetPanResponderCapture: (_, gesture) => gesture.numberActiveTouches === 1 && accepts(gesture.dx, gesture.dy),
+        onMoveShouldSetPanResponderCapture: (_, gesture) => Platform.OS === 'ios' && gesture.numberActiveTouches === 1 && accepts(gesture.dx, gesture.dy),
         onMoveShouldSetPanResponder: (_, gesture) => accepts(gesture.dx, gesture.dy),
         onPanResponderGrant: () => offset.stopAnimation(),
         onPanResponderMove: (_, gesture) => move(gesture.dx),
         onPanResponderRelease: (_, gesture) => finish(gesture.dx),
         onPanResponderTerminate: () => finish(0, true),
-        onPanResponderTerminationRequest: () => true,
+        onPanResponderTerminationRequest: () => Platform.OS !== 'ios',
     })).current;
     const pointer = useRef(null);
     const webHandlers = {
@@ -67,7 +83,7 @@ export function useQuoteGesture(enabled, outgoing, quote) {
                 event.preventDefault();
                 move(dx);
             }
-            else if (Math.abs(dy) > 10 || dx * current.current.direction < -10)
+            else if (Math.abs(dy) > 10 || !current.current.quote && dx * current.current.direction > 10)
                 pointer.current = null;
         },
         onPointerUp: (event) => {
@@ -118,10 +134,12 @@ export function useQuoteGesture(enabled, outgoing, quote) {
     }, []);
     return { offset: Platform.OS === 'web' ? webOffset : offset,
         webRef: Platform.OS === 'web' ? webRef : undefined,
-        revealOpacity: Platform.OS === 'web' ? Math.min(1, Math.abs(webOffset) / threshold)
-            : offset.interpolate({ inputRange: outgoing ? [-threshold, 0] : [0, threshold], outputRange: outgoing ? [1, 0] : [0, 1], extrapolate: 'clamp' }),
-        revealWebStyle: Platform.OS === 'web' ? { transitionProperty: 'opacity', transitionDuration: webDragging ? '0ms' : '160ms' } : {},
-        webStyle: Platform.OS === 'web' ? { transitionProperty: 'transform', transitionDuration: webDragging ? '0ms' : '160ms', transitionTimingFunction: 'ease-out' } : {},
+        infoLoaded,
+        infoOpacity: Platform.OS === 'web' ? Math.min(1, Math.max(0, -webOffset * direction) / 24) : offset.interpolate({ inputRange: direction === 1 ? [-24, -8, 0] : [0, 8, 24], outputRange: direction === 1 ? [1, .35, 0] : [0, .35, 1], extrapolate: 'clamp' }),
+        revealOpacity: Platform.OS === 'web' ? Math.min(1, Math.max(0, webOffset * direction) / messageReplyRevealWidth)
+            : offset.interpolate({ inputRange: direction === -1 ? [-messageReplyRevealWidth, -18, 0] : [0, 18, messageReplyRevealWidth], outputRange: direction === -1 ? [1, .35, 0] : [0, .35, 1], extrapolate: 'clamp' }),
+        revealWebStyle: Platform.OS === 'web' ? { transitionProperty: 'opacity', transitionDuration: webDragging ? '0ms' : '150ms' } : {},
+        webStyle: Platform.OS === 'web' ? { transitionProperty: 'transform', transitionDuration: webDragging ? '0ms' : '150ms', transitionTimingFunction: 'cubic-bezier(0.215,0.61,0.355,1)' } : {},
         handlers: Platform.OS === 'web' ? {} : responder.panHandlers,
         suppressPress: () => Date.now() < suppressUntil.current };
 }

package/dist/visual/WeatherArtwork.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/** Original conventional artwork, composed from conditions; identical on iOS and Android. */
+export default function WeatherArtwork({ code, isDay, cloud, windKph, size }: {
+    code?: number;
+    isDay?: boolean;
+    cloud?: number | null;
+    windKph?: number | null;
+    size?: number;
+}): React.JSX.Element;

package/dist/visual/WeatherArtwork.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Circle, G, Path } from "react-native-svg";
+import { weatherScene } from "./weather-artwork.js";
+const ink = "#52677f", blue = "#2674bd", amber = "#b86a08";
+function Sun() {
+    return _jsxs(G, { stroke: amber, strokeWidth: 3.5, strokeLinecap: "round", children: [_jsx(Circle, { cx: 32, cy: 32, r: 13, fill: "#df9b36" }), _jsx(Path, { d: "M32 5v7M32 52v7M5 32h7M52 32h7M13 13l5 5M46 46l5 5M13 51l5-5M46 18l5-5" })] });
+}
+function Moon() {
+    return _jsx(Path, { d: "M43 9C20 6 8 26 17 43c8 16 31 17 41 0-20 6-35-16-15-34Z", fill: "#9ba7c7", stroke: "#59698f", strokeWidth: 3.5, strokeLinejoin: "round" });
+}
+function Cloud({ dark = false }) {
+    return _jsx(Path, { d: "M14 46C0 44 1 26 15 25c1-19 28-22 34-3 17-1 20 24 3 24Z", fill: dark ? "#8594a6" : "#dce4ec", stroke: ink, strokeWidth: 3.5, strokeLinejoin: "round" });
+}
+function Wind() {
+    return _jsx(G, { fill: "none", stroke: ink, strokeWidth: 4, strokeLinecap: "round", children: _jsx(Path, { d: "M5 24h31c14 0 14-19 3-19-6 0-9 5-8 9M9 35h42c13 0 13 21 1 21-6 0-9-4-9-8M3 46h23" }) });
+}
+function Flake({ x, y, size = 10 }) {
+    return _jsx(G, { transform: `translate(${x} ${y}) scale(${size / 10})`, stroke: blue, strokeWidth: 2.8, strokeLinecap: "round", children: _jsx(Path, { d: "M0-9V9M-8-4.5l16 9M-8 4.5l16-9" }) });
+}
+function Drop({ x, y, small = false }) {
+    return _jsx(Path, { transform: `translate(${x} ${y}) scale(${small ? .65 : 1})`, d: "M0-9C-2-5-6 0-6 3a6 6 0 0 0 12 0C6 0 2-5 0-9Z", fill: blue });
+}
+/** Original conventional artwork, composed from conditions; identical on iOS and Android. */
+export default function WeatherArtwork({ code, isDay = true, cloud, windKph, size = 32 }) {
+    const scene = weatherScene(code, cloud, windKph);
+    if (!scene)
+        return _jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", accessible: false, children: [_jsx(Circle, { cx: 32, cy: 32, r: 23, fill: "none", stroke: ink, strokeWidth: 4 }), _jsx(Path, { d: "M22 32h20", stroke: ink, strokeWidth: 4, strokeLinecap: "round" })] });
+    const detail = !!(scene.precipitation || scene.atmosphere || scene.windy || scene.thunder || scene.freezing);
+    const hasSky = scene.sky !== "none";
+    const precipitation = scene.precipitation;
+    const count = scene.intensity === 3 ? 3 : 2;
+    const mixed = precipitation === "sleet";
+    const particles = Array.from({ length: count }, (_, i) => {
+        const x = count === 3 ? 12 + i * 20 : 18 + i * 28;
+        const y = count === 3 && i === 1 ? 42 : 49;
+        if (precipitation === "snow" || (mixed && i === 1))
+            return _jsx(Flake, { x: x, y: y, size: count === 3 ? 8 : 10 }, i);
+        if (precipitation === "ice")
+            return _jsx(Path, { d: `M${x} ${y - 7}l7 7-7 7-7-7Z`, fill: "#cce7f3", stroke: blue, strokeWidth: 3 }, i);
+        return _jsx(Drop, { x: x, y: y, small: precipitation === "drizzle" }, i);
+    });
+    return _jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", accessible: false, children: [(scene.sky === "clear" || scene.sky === "partial") && _jsx(G, { transform: detail || scene.sky === "partial" ? "translate(0 -1) scale(.68)" : undefined, children: isDay ? _jsx(Sun, {}) : _jsx(Moon, {}) }), (scene.sky === "cloud" || scene.sky === "partial") && _jsx(G, { transform: detail ? "translate(17 0) scale(.72)" : scene.sky === "partial" ? "translate(15 14) scale(.75)" : "translate(1 3) scale(.95)", children: _jsx(Cloud, { dark: scene.intensity === 3 || scene.thunder }) }), scene.windy && _jsx(G, { transform: precipitation || scene.atmosphere ? "translate(0 -1) scale(.63)" : hasSky ? "translate(17 24) scale(.72)" : "translate(0 0)", children: _jsx(Wind, {}) }), precipitation && _jsx(G, { transform: scene.thunder || scene.freezing ? "translate(-1 22) scale(.63)" : !hasSky && !scene.windy ? "translate(0 -10)" : undefined, children: particles }), scene.atmosphere && _jsx(G, { children: ["dust", "sand", "haze"].includes(scene.atmosphere) ? _jsxs(G, { fill: scene.atmosphere === "haze" ? ink : "#996b36", children: [[[8, 43], [20, 51], [32, 39], [44, 52], [56, 41], [32, 59]].map(([x, y], i) => _jsx(Circle, { cx: x, cy: y, r: scene.intensity === 3 ? 3.8 : 2.8 }, i)), !scene.windy && _jsx(Path, { d: "M7 33q12-12 24 0t26 0", fill: "none", stroke: scene.atmosphere === "haze" ? ink : "#996b36", strokeWidth: 3.5, strokeLinecap: "round" })] }) : _jsx(G, { fill: "none", stroke: ink, strokeWidth: scene.intensity === 3 ? 5 : 3.5, strokeLinecap: "round", children: scene.atmosphere === "smoke" || scene.atmosphere === "smog" ? _jsx(Path, { d: "M15 56c-15-18 15-19 4-35M32 57c-14-20 19-23 5-44M49 57c-10-14 14-19 4-31" }) : _jsx(Path, { d: "M7 24h17m8 0h25M4 35h38m8 0h10M9 46h15m8 0h23" }) }) }), scene.freezing && _jsxs(G, { transform: "translate(45 22)", children: [_jsx(Path, { d: "M0-10v17m0-17a3 3 0 0 1 6 0v17a7 7 0 1 1-6 0", fill: "#e1f2fa", stroke: blue, strokeWidth: 2.5 }), _jsx(Path, { d: "M3-5v18", stroke: blue, strokeWidth: 3, strokeLinecap: "round" })] }), scene.thunder && _jsx(Path, { d: "M39 26 29 43h10l-5 18 22-27H44l6-8Z", fill: "#df9b36", stroke: "#925510", strokeWidth: 2.5, strokeLinejoin: "round" })] });
+}

package/dist/visual/weather-artwork.d.ts

@@ -0,0 +1,17 @@
+/** WeatherAPI condition codes. Composition uses actual conditions, never rain probability. */
+export type WeatherScene = {
+    sky: "clear" | "partial" | "cloud" | "none";
+    precipitation?: "rain" | "drizzle" | "snow" | "sleet" | "ice";
+    intensity?: 1 | 2 | 3;
+    freezing?: boolean;
+    thunder?: boolean;
+    windy?: boolean;
+    atmosphere?: "mist" | "fog" | "haze" | "dust" | "sand" | "smoke" | "smog";
+};
+export declare const WEATHER_SCENES: Record<number, WeatherScene>;
+export declare function weatherScene(code?: number, cloud?: number | null, windKph?: number | null): WeatherScene | null;
+/** One precipitation row. Mixed/ice conditions have no separate provider probability. */
+export declare function precipitationMetric(code: number, rain: number | null, snow: number | null): {
+    label: string;
+    chance: number | null;
+};

package/dist/visual/weather-artwork.js

@@ -0,0 +1,86 @@
+export const WEATHER_SCENES = {
+    1000: { sky: "clear" }, 1003: { sky: "partial" },
+    1006: { sky: "cloud" }, 1009: { sky: "cloud", intensity: 3 },
+    1012: { sky: "clear", atmosphere: "haze" },
+    1015: { sky: "clear", atmosphere: "dust" },
+    1018: { sky: "none", atmosphere: "dust", windy: true },
+    1021: { sky: "none", atmosphere: "dust", windy: true, intensity: 3 },
+    1024: { sky: "none", atmosphere: "sand", windy: true },
+    1027: { sky: "none", atmosphere: "sand", windy: true, intensity: 3 },
+    1030: { sky: "none", atmosphere: "mist" },
+    1033: { sky: "none", atmosphere: "smoke" },
+    1036: { sky: "clear", atmosphere: "smoke" },
+    1039: { sky: "none", atmosphere: "smog" },
+    1042: { sky: "none", atmosphere: "smog", intensity: 3 },
+    1045: { sky: "none", atmosphere: "dust" },
+    1048: { sky: "none", atmosphere: "dust" },
+    1063: { sky: "clear", precipitation: "rain", intensity: 1 },
+    1066: { sky: "clear", precipitation: "snow", intensity: 1 },
+    1069: { sky: "clear", precipitation: "sleet", intensity: 1 },
+    1072: { sky: "clear", precipitation: "drizzle", freezing: true },
+    1087: { sky: "cloud", thunder: true },
+    1114: { sky: "none", precipitation: "snow", windy: true },
+    1117: { sky: "none", precipitation: "snow", windy: true, intensity: 3 },
+    1135: { sky: "none", atmosphere: "fog" },
+    1147: { sky: "none", atmosphere: "fog", freezing: true },
+    1150: { sky: "clear", precipitation: "drizzle", intensity: 1 },
+    1153: { sky: "none", precipitation: "drizzle", intensity: 1 },
+    1168: { sky: "none", precipitation: "drizzle", freezing: true },
+    1171: { sky: "none", precipitation: "drizzle", freezing: true, intensity: 3 },
+    1180: { sky: "clear", precipitation: "rain", intensity: 1 },
+    1183: { sky: "none", precipitation: "rain", intensity: 1 },
+    1186: { sky: "clear", precipitation: "rain", intensity: 2 },
+    1189: { sky: "none", precipitation: "rain", intensity: 2 },
+    1192: { sky: "clear", precipitation: "rain", intensity: 3 },
+    1195: { sky: "none", precipitation: "rain", intensity: 3 },
+    1198: { sky: "none", precipitation: "rain", freezing: true, intensity: 1 },
+    1201: { sky: "none", precipitation: "rain", freezing: true, intensity: 3 },
+    1204: { sky: "none", precipitation: "sleet", intensity: 1 },
+    1207: { sky: "none", precipitation: "sleet", intensity: 3 },
+    1210: { sky: "clear", precipitation: "snow", intensity: 1 },
+    1213: { sky: "none", precipitation: "snow", intensity: 1 },
+    1216: { sky: "clear", precipitation: "snow", intensity: 2 },
+    1219: { sky: "none", precipitation: "snow", intensity: 2 },
+    1222: { sky: "clear", precipitation: "snow", intensity: 3 },
+    1225: { sky: "none", precipitation: "snow", intensity: 3 },
+    1237: { sky: "none", precipitation: "ice" },
+    1240: { sky: "clear", precipitation: "rain", intensity: 1 },
+    1243: { sky: "clear", precipitation: "rain", intensity: 2 },
+    1246: { sky: "clear", precipitation: "rain", intensity: 3 },
+    1249: { sky: "clear", precipitation: "sleet", intensity: 1 },
+    1252: { sky: "clear", precipitation: "sleet", intensity: 3 },
+    1255: { sky: "clear", precipitation: "snow", intensity: 1 },
+    1258: { sky: "clear", precipitation: "snow", intensity: 3 },
+    1261: { sky: "clear", precipitation: "ice", intensity: 1 },
+    1264: { sky: "clear", precipitation: "ice", intensity: 3 },
+    1273: { sky: "clear", precipitation: "rain", thunder: true, intensity: 1 },
+    1276: { sky: "cloud", precipitation: "rain", thunder: true, intensity: 3 },
+    1279: { sky: "clear", precipitation: "snow", thunder: true, intensity: 1 },
+    1282: { sky: "cloud", precipitation: "snow", thunder: true, intensity: 3 },
+};
+export function weatherScene(code, cloud, windKph) {
+    const base = code === undefined ? undefined : WEATHER_SCENES[code];
+    if (!base)
+        return null;
+    const scene = { ...base };
+    // Keep blowing snow/obscuration prominent. Do not add a decorative cloud to every condition.
+    if ((scene.precipitation || scene.thunder) && !base.windy && cloud != null && Number.isFinite(cloud) && cloud >= 0 && cloud <= 100) {
+        scene.sky = cloud <= 25 ? "clear" : cloud < 75 ? "partial" : "cloud";
+    }
+    // Visual fresh-breeze threshold, not a weather warning. Canonical km/h in all locales.
+    scene.windy = !!scene.windy || (windKph != null && Number.isFinite(windKph) && windKph >= 32);
+    return scene;
+}
+/** One precipitation row. Mixed/ice conditions have no separate provider probability. */
+export function precipitationMetric(code, rain, snow) {
+    const kind = WEATHER_SCENES[code]?.precipitation;
+    if (kind === "snow")
+        return { label: "Snow", chance: snow };
+    if (kind === "sleet")
+        return { label: "Sleet", chance: null };
+    if (kind === "ice")
+        return { label: "Ice pellets", chance: null };
+    if (kind === "rain" || kind === "drizzle")
+        return { label: "Rain", chance: rain };
+    return snow !== null && snow > (rain ?? 0) ? { label: "Snow", chance: snow } : { label: "Rain", chance: rain };
+}

package/dist/visual/weather-conditions.d.ts

@@ -0,0 +1,5 @@
+export declare const weatherConditions: {
+    code: number;
+    day: string;
+    night: string;
+}[];

package/dist/visual/weather-conditions.js

@@ -0,0 +1,2 @@
+// Generated from Messenger by scripts/design/generate-messaging-weather.mjs.
+export const weatherConditions = [{ "code": 1000, "day": "Sunny", "night": "Clear" }, { "code": 1003, "day": "Partly cloudy", "night": "Partly cloudy" }, { "code": 1006, "day": "Cloudy", "night": "Cloudy" }, { "code": 1009, "day": "Overcast", "night": "Overcast" }, { "code": 1012, "day": "Haze", "night": "Haze" }, { "code": 1015, "day": "Dust haze", "night": "Dust haze" }, { "code": 1018, "day": "Blowing dust", "night": "Blowing dust" }, { "code": 1021, "day": "Dust storm", "night": "Dust storm" }, { "code": 1024, "day": "Sandstorm", "night": "Sandstorm" }, { "code": 1027, "day": "Severe sandstorm", "night": "Severe sandstorm" }, { "code": 1030, "day": "Mist", "night": "Mist" }, { "code": 1033, "day": "Smoke", "night": "Smoke" }, { "code": 1036, "day": "Smoky haze", "night": "Smoky haze" }, { "code": 1039, "day": "Smog", "night": "Smog" }, { "code": 1042, "day": "Severe smog", "night": "Severe smog" }, { "code": 1045, "day": "Saharan dust", "night": "Saharan dust" }, { "code": 1048, "day": "Dust", "night": "Dust" }, { "code": 1063, "day": "Patchy rain possible", "night": "Patchy rain possible" }, { "code": 1066, "day": "Patchy snow possible", "night": "Patchy snow possible" }, { "code": 1069, "day": "Patchy sleet possible", "night": "Patchy sleet possible" }, { "code": 1072, "day": "Patchy freezing drizzle possible", "night": "Patchy freezing drizzle possible" }, { "code": 1087, "day": "Thundery outbreaks possible", "night": "Thundery outbreaks possible" }, { "code": 1114, "day": "Blowing snow", "night": "Blowing snow" }, { "code": 1117, "day": "Blizzard", "night": "Blizzard" }, { "code": 1135, "day": "Fog", "night": "Fog" }, { "code": 1147, "day": "Freezing fog", "night": "Freezing fog" }, { "code": 1150, "day": "Patchy light drizzle", "night": "Patchy light drizzle" }, { "code": 1153, "day": "Light drizzle", "night": "Light drizzle" }, { "code": 1168, "day": "Freezing drizzle", "night": "Freezing drizzle" }, { "code": 1171, "day": "Heavy freezing drizzle", "night": "Heavy freezing drizzle" }, { "code": 1180, "day": "Patchy light rain", "night": "Patchy light rain" }, { "code": 1183, "day": "Light rain", "night": "Light rain" }, { "code": 1186, "day": "Moderate rain at times", "night": "Moderate rain at times" }, { "code": 1189, "day": "Moderate rain", "night": "Moderate rain" }, { "code": 1192, "day": "Heavy rain at times", "night": "Heavy rain at times" }, { "code": 1195, "day": "Heavy rain", "night": "Heavy rain" }, { "code": 1198, "day": "Light freezing rain", "night": "Light freezing rain" }, { "code": 1201, "day": "Moderate or heavy freezing rain", "night": "Moderate or heavy freezing rain" }, { "code": 1204, "day": "Light sleet", "night": "Light sleet" }, { "code": 1207, "day": "Moderate or heavy sleet", "night": "Moderate or heavy sleet" }, { "code": 1210, "day": "Patchy light snow", "night": "Patchy light snow" }, { "code": 1213, "day": "Light snow", "night": "Light snow" }, { "code": 1216, "day": "Patchy moderate snow", "night": "Patchy moderate snow" }, { "code": 1219, "day": "Moderate snow", "night": "Moderate snow" }, { "code": 1222, "day": "Patchy heavy snow", "night": "Patchy heavy snow" }, { "code": 1225, "day": "Heavy snow", "night": "Heavy snow" }, { "code": 1237, "day": "Ice pellets", "night": "Ice pellets" }, { "code": 1240, "day": "Light rain shower", "night": "Light rain shower" }, { "code": 1243, "day": "Moderate or heavy rain shower", "night": "Moderate or heavy rain shower" }, { "code": 1246, "day": "Torrential rain shower", "night": "Torrential rain shower" }, { "code": 1249, "day": "Light sleet showers", "night": "Light sleet showers" }, { "code": 1252, "day": "Moderate or heavy sleet showers", "night": "Moderate or heavy sleet showers" }, { "code": 1255, "day": "Light snow showers", "night": "Light snow showers" }, { "code": 1258, "day": "Moderate or heavy snow showers", "night": "Moderate or heavy snow showers" }, { "code": 1261, "day": "Light showers of ice pellets", "night": "Light showers of ice pellets" }, { "code": 1264, "day": "Moderate or heavy showers of ice pellets", "night": "Moderate or heavy showers of ice pellets" }, { "code": 1273, "day": "Patchy light rain with thunder", "night": "Patchy light rain with thunder" }, { "code": 1276, "day": "Moderate or heavy rain with thunder", "night": "Moderate or heavy rain with thunder" }, { "code": 1279, "day": "Patchy light snow with thunder", "night": "Patchy light snow with thunder" }, { "code": 1282, "day": "Moderate or heavy snow with thunder", "night": "Moderate or heavy snow with thunder" }];

package/dist/voice-waveform.d.ts

@@ -0,0 +1,2 @@
+/** Messenger playback display normalization; never changes the stored recording. */
+export declare function messengerVoiceWaveform(value: number[] | undefined, durationMs: number): number[];

package/dist/voice-waveform.js

@@ -0,0 +1,21 @@
+/** Messenger playback display normalization; never changes the stored recording. */
+export function messengerVoiceWaveform(value, durationMs) {
+    const count = 32, valid = value?.slice(0, 80);
+    if (valid?.length && valid.every(n => Number.isFinite(n) && n >= 0)) {
+        const levels = valid.map(n => Math.min(1, n));
+        const sampled = Array.from({ length: count }, (_, i) => {
+            if (levels.length >= count) {
+                const start = Math.floor(i / count * levels.length), end = Math.max(start + 1, Math.floor((i + 1) / count * levels.length));
+                return Math.max(...levels.slice(start, end));
+            }
+            const p = i / (count - 1) * (levels.length - 1), a = Math.floor(p), b = Math.ceil(p);
+            return levels[a] + (levels[b] - levels[a]) * (p - a);
+        });
+        const peak = Math.max(...sampled);
+        if (peak > .001)
+            return sampled.map(n => n <= .001 ? .035 : Math.max(.055, Math.min(1, Math.pow(n / peak, .72))));
+    }
+    // Same visual fallback as Messenger for older recordings without waveform data.
+    const factor = Math.max(.75, Math.min((durationMs || 2200) / 2800, 1.35));
+    return Array.from({ length: count }, (_, i) => Math.max(.08, Math.min(.9, Math.sin(Math.PI * i / (count - 1)) * (.38 + .34 * Math.sin((i + 1) * 1.73 * factor) + .18 * Math.sin((i + 3) * .67)))));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robono/messaging-react-native",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "sideEffects": false,
   "description": "Optional, composable direct and group messaging screens for Robono.",
@@ -28,7 +28,15 @@
       "import": "./dist/expo-calling.js"
     },
     "./app.plugin": "./app.plugin.cjs",
-    "./app.plugin.cjs": "./app.plugin.cjs"
+    "./app.plugin.cjs": "./app.plugin.cjs",
+    "./expo-privacy": {
+      "types": "./dist/expo-privacy.d.ts",
+      "import": "./dist/expo-privacy.js"
+    },
+    "./expo-notifications": {
+      "types": "./dist/expo-notifications.d.ts",
+      "import": "./dist/expo-notifications.js"
+    }
   },
   "files": [
     "dist",
@@ -45,7 +53,7 @@
     "prepack": "npm run build && node ../../scripts/generate-sdk-file-sbom.mjs"
   },
   "peerDependencies": {
-    "@robono/messaging": "^0.2.0",
+    "@robono/messaging": "^0.3.0",
     "react": ">=18.2 <20",
     "react-native": ">=0.76 <1",
     "expo-audio": ">=55 <57",
@@ -61,7 +69,10 @@
     "expo-clipboard": ">=8 <57",
     "expo-image-manipulator": ">=14 <57",
     "expo-video-thumbnails": ">=14 <57",
-    "react-native-webview": ">=13 <14"
+    "react-native-webview": ">=13 <14",
+    "expo-blur": ">=55 <57",
+    "expo-notifications": ">=55 <57",
+    "expo-secure-store": ">=55 <57"
   },
   "license": "SEE LICENSE IN LICENSE",
   "peerDependenciesMeta": {
@@ -103,6 +114,15 @@
     },
     "react-native-webview": {
       "optional": true
+    },
+    "expo-blur": {
+      "optional": true
+    },
+    "expo-notifications": {
+      "optional": true
+    },
+    "expo-secure-store": {
+      "optional": true
     }
   },
   "author": {