@poolse/react-native 2.1.6 → 2.2.0

package/dist/index.d.cts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { Conversation, Uuid, Message, AttachmentUploadInput, Membership, Attachment } from '@poolse/sdk';
+import { Conversation, Uuid, Message, AttachmentUploadInput, Membership, Attachment, WebRtcAdapter } from '@poolse/sdk';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UseCalls } from '@poolse/react';
 
 interface InboxUser {
     /** The user's external_id (the same id you mint JWTs with). */
@@ -976,4 +977,83 @@ declare const defaultDarkTheme: PoolseRNTheme;
  */
 declare function useAppStateLifecycle(): void;
 
-export { AttachmentPicker, type AttachmentPickerProps, AttachmentPreview, type AttachmentPreviewProps, Avatar, type AvatarProps, ChatHeader, type ChatHeaderProps, ConversationList, type ConversationListProps, ConversationView, type ConversationViewProps, DaySeparator, type DaySeparatorProps, GroupDetailsSheet, type GroupDetailsSheetProps, type IconName, ImageMosaic, type ImageMosaicProps, type InboxUser, MemberList, type MemberListProps, MentionInput, type MentionInputProps, MessageActions, type MessageActionsProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerProps, MessageList, type MessageListItem, type MessageListProps, MessageRow, type MessageRowProps, PoolseIcon, type PoolseIconProps, PoolseInbox, type PoolseInboxHandle, type PoolseInboxProps, PoolseLogo, type PoolseLogoProps, type PoolseLogoVariant, type PoolseRNTheme, type PoolseRNThemeOverrides, PoolseTheme, type PoolseThemeProps, primitives as Primitives, ReactionPicker, type ReactionPickerProps, ReactionStrip, type ReactionStripProps, type ThemeColors, type ThemeRadii, type ThemeShadows, type ThemeSpacing, type ThemeType, ThreadView, type ThreadViewProps, TypingIndicator, type TypingIndicatorProps, UploadQueueStrip, UserName, type UserNameProps, defaultDarkTheme, defaultLightTheme, useAppStateLifecycle, useDisplayName, usePoolseTheme };
+interface VoiceRoomBarProps {
+    conversationId: string;
+    /** Resolves a user id to a display label. Defaults to a short id. */
+    labelFor?: (userId: string) => string;
+    /**
+     * Rendered instead of the join button when `react-native-webrtc`
+     * isn't installed. Defaults to an inline explanation.
+     */
+    unavailableSlot?: React.ReactNode;
+}
+/**
+ * Discord-style voice bar: one "Join Voice" button that expands into a
+ * roster of who's in, with a ring around whoever is talking.
+ *
+ * Drop it above a `<ConversationView>` to give a conversation an
+ * always-on voice channel. For ringing a specific person, use
+ * `<IncomingCallSheet>` together with `useCalls`.
+ */
+declare function VoiceRoomBar({ conversationId, labelFor, unavailableSlot }: VoiceRoomBarProps): react_jsx_runtime.JSX.Element;
+
+interface CallScreenProps {
+    /** The signed-in user's id — the topic calls are delivered on. */
+    userId: string;
+    /** Resolves a user id to a display label. Defaults to a short id. */
+    labelFor?: (userId: string) => string;
+    /**
+     * Escape hatch for apps that already own a `useCalls` instance (for
+     * example to place calls from elsewhere in the UI). When omitted the
+     * component manages its own.
+     */
+    calls?: UseCalls;
+}
+/**
+ * WhatsApp-style call UI: a full-screen sheet that covers the app while
+ * a call is ringing or connected, and renders nothing when idle.
+ *
+ * Mount it once, high in the tree, so a call can arrive on any screen:
+ *
+ *     <PoolseProvider config={config}>
+ *       <CallScreen userId={me.id} />
+ *       <YourApp />
+ *     </PoolseProvider>
+ *
+ * Placing a call is separate — `useCalls().call(conversationId)`, wired
+ * to whatever button your UI wants. Pass the same instance in via
+ * `calls` so both halves share one state machine.
+ */
+declare function CallScreen({ userId, labelFor, calls: external }: CallScreenProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * React Native WebRTC binding, backed by `react-native-webrtc`.
+ *
+ * That package ships native code, so it can't run in Expo Go and not
+ * every app wants it. It's therefore an OPTIONAL peer dependency,
+ * resolved with a guarded `require` at call time rather than a static
+ * import: an app that never places a call doesn't need it installed,
+ * and one that does gets a clear message instead of a redbox at import.
+ *
+ * Media streams on native aren't attached to an element the way they
+ * are on the web — audio-only calls route to the device's audio session
+ * automatically once the peer connection is live, so the sink is a
+ * no-op. Video would render the stream through `<RTCView>` using the
+ * `toURL()` the stream exposes.
+ */
+
+/**
+ * Whether this app can actually carry call audio. Use it to disable a
+ * call button rather than letting the user tap into a failure.
+ */
+declare function isNativeWebRtcAvailable(): boolean;
+/**
+ * Adapter for {@link useVoiceRoom}'s `webrtc` option.
+ *
+ * @throws when `react-native-webrtc` isn't installed — check
+ *         {@link isNativeWebRtcAvailable} first if that's reachable in
+ *         your UI.
+ */
+declare function createNativeWebRtcAdapter(): WebRtcAdapter;
+
+export { AttachmentPicker, type AttachmentPickerProps, AttachmentPreview, type AttachmentPreviewProps, Avatar, type AvatarProps, CallScreen, type CallScreenProps, ChatHeader, type ChatHeaderProps, ConversationList, type ConversationListProps, ConversationView, type ConversationViewProps, DaySeparator, type DaySeparatorProps, GroupDetailsSheet, type GroupDetailsSheetProps, type IconName, ImageMosaic, type ImageMosaicProps, type InboxUser, MemberList, type MemberListProps, MentionInput, type MentionInputProps, MessageActions, type MessageActionsProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerProps, MessageList, type MessageListItem, type MessageListProps, MessageRow, type MessageRowProps, PoolseIcon, type PoolseIconProps, PoolseInbox, type PoolseInboxHandle, type PoolseInboxProps, PoolseLogo, type PoolseLogoProps, type PoolseLogoVariant, type PoolseRNTheme, type PoolseRNThemeOverrides, PoolseTheme, type PoolseThemeProps, primitives as Primitives, ReactionPicker, type ReactionPickerProps, ReactionStrip, type ReactionStripProps, type ThemeColors, type ThemeRadii, type ThemeShadows, type ThemeSpacing, type ThemeType, ThreadView, type ThreadViewProps, TypingIndicator, type TypingIndicatorProps, UploadQueueStrip, UserName, type UserNameProps, VoiceRoomBar, type VoiceRoomBarProps, createNativeWebRtcAdapter, defaultDarkTheme, defaultLightTheme, isNativeWebRtcAvailable, useAppStateLifecycle, useDisplayName, usePoolseTheme };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { Conversation, Uuid, Message, AttachmentUploadInput, Membership, Attachment } from '@poolse/sdk';
+import { Conversation, Uuid, Message, AttachmentUploadInput, Membership, Attachment, WebRtcAdapter } from '@poolse/sdk';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UseCalls } from '@poolse/react';
 
 interface InboxUser {
     /** The user's external_id (the same id you mint JWTs with). */
@@ -976,4 +977,83 @@ declare const defaultDarkTheme: PoolseRNTheme;
  */
 declare function useAppStateLifecycle(): void;
 
-export { AttachmentPicker, type AttachmentPickerProps, AttachmentPreview, type AttachmentPreviewProps, Avatar, type AvatarProps, ChatHeader, type ChatHeaderProps, ConversationList, type ConversationListProps, ConversationView, type ConversationViewProps, DaySeparator, type DaySeparatorProps, GroupDetailsSheet, type GroupDetailsSheetProps, type IconName, ImageMosaic, type ImageMosaicProps, type InboxUser, MemberList, type MemberListProps, MentionInput, type MentionInputProps, MessageActions, type MessageActionsProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerProps, MessageList, type MessageListItem, type MessageListProps, MessageRow, type MessageRowProps, PoolseIcon, type PoolseIconProps, PoolseInbox, type PoolseInboxHandle, type PoolseInboxProps, PoolseLogo, type PoolseLogoProps, type PoolseLogoVariant, type PoolseRNTheme, type PoolseRNThemeOverrides, PoolseTheme, type PoolseThemeProps, primitives as Primitives, ReactionPicker, type ReactionPickerProps, ReactionStrip, type ReactionStripProps, type ThemeColors, type ThemeRadii, type ThemeShadows, type ThemeSpacing, type ThemeType, ThreadView, type ThreadViewProps, TypingIndicator, type TypingIndicatorProps, UploadQueueStrip, UserName, type UserNameProps, defaultDarkTheme, defaultLightTheme, useAppStateLifecycle, useDisplayName, usePoolseTheme };
+interface VoiceRoomBarProps {
+    conversationId: string;
+    /** Resolves a user id to a display label. Defaults to a short id. */
+    labelFor?: (userId: string) => string;
+    /**
+     * Rendered instead of the join button when `react-native-webrtc`
+     * isn't installed. Defaults to an inline explanation.
+     */
+    unavailableSlot?: React.ReactNode;
+}
+/**
+ * Discord-style voice bar: one "Join Voice" button that expands into a
+ * roster of who's in, with a ring around whoever is talking.
+ *
+ * Drop it above a `<ConversationView>` to give a conversation an
+ * always-on voice channel. For ringing a specific person, use
+ * `<IncomingCallSheet>` together with `useCalls`.
+ */
+declare function VoiceRoomBar({ conversationId, labelFor, unavailableSlot }: VoiceRoomBarProps): react_jsx_runtime.JSX.Element;
+
+interface CallScreenProps {
+    /** The signed-in user's id — the topic calls are delivered on. */
+    userId: string;
+    /** Resolves a user id to a display label. Defaults to a short id. */
+    labelFor?: (userId: string) => string;
+    /**
+     * Escape hatch for apps that already own a `useCalls` instance (for
+     * example to place calls from elsewhere in the UI). When omitted the
+     * component manages its own.
+     */
+    calls?: UseCalls;
+}
+/**
+ * WhatsApp-style call UI: a full-screen sheet that covers the app while
+ * a call is ringing or connected, and renders nothing when idle.
+ *
+ * Mount it once, high in the tree, so a call can arrive on any screen:
+ *
+ *     <PoolseProvider config={config}>
+ *       <CallScreen userId={me.id} />
+ *       <YourApp />
+ *     </PoolseProvider>
+ *
+ * Placing a call is separate — `useCalls().call(conversationId)`, wired
+ * to whatever button your UI wants. Pass the same instance in via
+ * `calls` so both halves share one state machine.
+ */
+declare function CallScreen({ userId, labelFor, calls: external }: CallScreenProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * React Native WebRTC binding, backed by `react-native-webrtc`.
+ *
+ * That package ships native code, so it can't run in Expo Go and not
+ * every app wants it. It's therefore an OPTIONAL peer dependency,
+ * resolved with a guarded `require` at call time rather than a static
+ * import: an app that never places a call doesn't need it installed,
+ * and one that does gets a clear message instead of a redbox at import.
+ *
+ * Media streams on native aren't attached to an element the way they
+ * are on the web — audio-only calls route to the device's audio session
+ * automatically once the peer connection is live, so the sink is a
+ * no-op. Video would render the stream through `<RTCView>` using the
+ * `toURL()` the stream exposes.
+ */
+
+/**
+ * Whether this app can actually carry call audio. Use it to disable a
+ * call button rather than letting the user tap into a failure.
+ */
+declare function isNativeWebRtcAvailable(): boolean;
+/**
+ * Adapter for {@link useVoiceRoom}'s `webrtc` option.
+ *
+ * @throws when `react-native-webrtc` isn't installed — check
+ *         {@link isNativeWebRtcAvailable} first if that's reachable in
+ *         your UI.
+ */
+declare function createNativeWebRtcAdapter(): WebRtcAdapter;
+
+export { AttachmentPicker, type AttachmentPickerProps, AttachmentPreview, type AttachmentPreviewProps, Avatar, type AvatarProps, CallScreen, type CallScreenProps, ChatHeader, type ChatHeaderProps, ConversationList, type ConversationListProps, ConversationView, type ConversationViewProps, DaySeparator, type DaySeparatorProps, GroupDetailsSheet, type GroupDetailsSheetProps, type IconName, ImageMosaic, type ImageMosaicProps, type InboxUser, MemberList, type MemberListProps, MentionInput, type MentionInputProps, MessageActions, type MessageActionsProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerProps, MessageList, type MessageListItem, type MessageListProps, MessageRow, type MessageRowProps, PoolseIcon, type PoolseIconProps, PoolseInbox, type PoolseInboxHandle, type PoolseInboxProps, PoolseLogo, type PoolseLogoProps, type PoolseLogoVariant, type PoolseRNTheme, type PoolseRNThemeOverrides, PoolseTheme, type PoolseThemeProps, primitives as Primitives, ReactionPicker, type ReactionPickerProps, ReactionStrip, type ReactionStripProps, type ThemeColors, type ThemeRadii, type ThemeShadows, type ThemeSpacing, type ThemeType, ThreadView, type ThreadViewProps, TypingIndicator, type TypingIndicatorProps, UploadQueueStrip, UserName, type UserNameProps, VoiceRoomBar, type VoiceRoomBarProps, createNativeWebRtcAdapter, defaultDarkTheme, defaultLightTheme, isNativeWebRtcAvailable, useAppStateLifecycle, useDisplayName, usePoolseTheme };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { useUser, useMe, useConversations, useAttachmentUpload, useConversation, useMembers, usePresence, useMessages, useTyping, useRealtimeStatus, computeGroupPosition, formatDayLabel, useReactions, sameDay, useThread, useAttachmentUrl, usePoolse } from '@poolse/react';
+import { useUser, useMe, useConversations, useAttachmentUpload, useConversation, useMembers, usePresence, useMessages, useTyping, useRealtimeStatus, computeGroupPosition, formatDayLabel, useReactions, sameDay, useThread, useAttachmentUrl, usePoolse, useVoiceRoom, useCalls } from '@poolse/react';
 import { createContext, forwardRef, useRef, useState, useEffect, useImperativeHandle, useMemo, useCallback, useContext, createElement } from 'react';
 import { StyleSheet, Platform, Keyboard, View, Pressable, TextInput, Text, useWindowDimensions, Animated, Easing, PanResponder, Image, ScrollView, ActivityIndicator, FlatList, AppState, KeyboardAvoidingView, Modal, Dimensions, Linking } from 'react-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -4914,6 +4914,292 @@ function useAppStateLifecycle() {
   }, [poolse]);
 }
 
-export { AttachmentPicker, AttachmentPreview, Avatar, ChatHeader, ConversationList, ConversationView, DaySeparator, GroupDetailsSheet, ImageMosaic, MemberList, MentionInput, MessageActions, MessageBubble, MessageComposer, MessageList, MessageRow, PoolseIcon, PoolseInbox, PoolseLogo, PoolseTheme, primitives as Primitives, ReactionPicker, ReactionStrip, ThreadView, TypingIndicator, UploadQueueStrip, UserName, defaultDarkTheme, defaultLightTheme, useAppStateLifecycle, useDisplayName, usePoolseTheme };
+// src/voice/webrtc-native.ts
+var cached;
+function loadNativeWebRtc() {
+  if (cached !== void 0) return cached;
+  try {
+    cached = __require("react-native-webrtc");
+  } catch {
+    cached = null;
+  }
+  return cached;
+}
+function isNativeWebRtcAvailable() {
+  return loadNativeWebRtc() != null;
+}
+function createNativeWebRtcAdapter() {
+  const native = loadNativeWebRtc();
+  if (!native) {
+    throw new Error(
+      "react-native-webrtc is not installed. Add it to enable poolse voice calls:\n  npx expo install react-native-webrtc\nIt contains native code, so it needs a development build \u2014 it will not run in Expo Go."
+    );
+  }
+  return {
+    createPeerConnection(iceServers) {
+      return new native.RTCPeerConnection({ iceServers });
+    },
+    getUserMedia() {
+      return native.mediaDevices.getUserMedia({
+        audio: { echoCancellation: true, noiseSuppression: true },
+        video: false
+      });
+    },
+    playRemoteStream() {
+      return () => {
+      };
+    }
+  };
+}
+function VoiceRoomBar({ conversationId, labelFor, unavailableSlot }) {
+  const theme = usePoolseTheme();
+  const available = isNativeWebRtcAvailable();
+  const opts = useMemo(
+    () => available ? { webrtc: createNativeWebRtcAdapter() } : {},
+    [available]
+  );
+  const { status, participants, muted, join, leave, toggleMute, error } = useVoiceRoom(
+    available ? conversationId : null,
+    opts
+  );
+  const label = labelFor ?? ((id) => `User ${id.slice(0, 6)}`);
+  const connected = status === "connected";
+  if (!available) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles23.bar,
+          { backgroundColor: theme.colors.surface, borderBottomColor: theme.colors.border }
+        ],
+        children: unavailableSlot ?? /* @__PURE__ */ jsx(Text, { style: [styles23.hint, { color: theme.colors.ink3 }], children: "Voice needs react-native-webrtc and a development build." })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles23.bar,
+        { backgroundColor: theme.colors.surface, borderBottomColor: theme.colors.border }
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles23.row, children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles23.dot,
+                { backgroundColor: connected ? theme.colors.brand : theme.colors.ink3 }
+              ]
+            }
+          ),
+          connected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(View, { style: styles23.people, children: participants.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles23.hint, { color: theme.colors.ink3 }], children: "Waiting for others\u2026" }) : participants.map((p) => /* @__PURE__ */ jsx(ParticipantChip, { participant: p, label: label(p.userId) }, p.userId)) }),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: toggleMute,
+                accessibilityRole: "button",
+                accessibilityState: { selected: muted },
+                style: [
+                  styles23.btn,
+                  {
+                    borderColor: muted ? theme.colors.brand : theme.colors.border,
+                    backgroundColor: muted ? theme.colors.brandSoft : theme.colors.paper
+                  }
+                ],
+                children: /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink2 }, children: muted ? "Unmute" : "Mute" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: leave,
+                accessibilityRole: "button",
+                style: [styles23.btn, { borderColor: theme.colors.error }],
+                children: /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.error }, children: "Leave" })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles23.hint, { color: theme.colors.ink3 }], children: status === "connecting" ? "Connecting\u2026" : "Talk to everyone here" }),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: () => void join(),
+                disabled: status === "connecting",
+                accessibilityRole: "button",
+                style: [styles23.btn, styles23.btnPrimary, { backgroundColor: theme.colors.brand }],
+                children: /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.onBrand, fontWeight: "600" }, children: status === "connecting" ? "Joining\u2026" : "Join Voice" })
+              }
+            )
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsx(Text, { style: [styles23.error, { color: theme.colors.error }], children: error.message })
+      ]
+    }
+  );
+}
+function ParticipantChip({ participant, label }) {
+  const theme = usePoolseTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles23.chip,
+        {
+          backgroundColor: theme.colors.paper,
+          // The speaking ring is a border colour swap rather than an
+          // extra element, so the row never reflows mid-sentence.
+          borderColor: participant.speaking ? theme.colors.brand : theme.colors.border,
+          opacity: participant.muted ? 0.62 : 1
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(Text, { style: { color: theme.colors.ink2, fontSize: 13 }, numberOfLines: 1, children: [
+          label,
+          participant.isSelf ? " (you)" : ""
+        ] }),
+        participant.muted && /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.error, fontSize: 11, fontWeight: "700" }, children: "\u2715" })
+      ]
+    }
+  );
+}
+var styles23 = StyleSheet.create({
+  bar: { paddingHorizontal: 14, paddingVertical: 8, borderBottomWidth: StyleSheet.hairlineWidth },
+  row: { flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" },
+  dot: { width: 8, height: 8, borderRadius: 4 },
+  people: { flexDirection: "row", alignItems: "center", gap: 6, flexShrink: 1, flexWrap: "wrap" },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 999,
+    borderWidth: 1
+  },
+  btn: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 999, borderWidth: 1 },
+  btnPrimary: { borderWidth: 0 },
+  hint: { fontSize: 13, flexShrink: 1 },
+  error: { fontSize: 12, marginTop: 6 }
+});
+function CallScreen({ userId, labelFor, calls: external }) {
+  const theme = usePoolseTheme();
+  const own = useCalls(external ? null : userId);
+  const calls = external ?? own;
+  const available = isNativeWebRtcAvailable();
+  const opts = useMemo(
+    () => available ? { webrtc: createNativeWebRtcAdapter() } : {},
+    [available]
+  );
+  const voice = useVoiceRoom(
+    calls.phase === "active" && available ? calls.activeConversationId : null,
+    opts
+  );
+  useEffect(() => {
+    if (calls.phase === "active" && voice.status === "idle") void voice.join();
+  }, [calls.phase, voice]);
+  const label = labelFor ?? ((id) => `User ${id.slice(0, 6)}`);
+  const visible = calls.phase !== "idle";
+  const hangUp = () => {
+    voice.leave();
+    calls.reset();
+  };
+  return /* @__PURE__ */ jsx(Modal, { visible, animationType: "slide", transparent: false, onRequestClose: hangUp, children: /* @__PURE__ */ jsxs(View, { style: [styles24.screen, { backgroundColor: theme.colors.paper }], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles24.identity, children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles24.who, { color: theme.colors.ink }], children: calls.phase === "ringing-in" && calls.incoming ? label(calls.incoming.callerUserId) : calls.outgoing ? calls.outgoing.calleeUserIds.map(label).join(", ") : "" }),
+      /* @__PURE__ */ jsx(Text, { style: [styles24.state, { color: theme.colors.ink3 }], children: statusLine(calls, voice.status) })
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles24.actions, children: calls.phase === "ringing-in" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CallButton,
+        {
+          label: "Decline",
+          color: theme.colors.error,
+          onPress: () => void calls.decline()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CallButton,
+        {
+          label: "Accept",
+          color: theme.colors.brand,
+          onPress: () => void calls.accept()
+        }
+      )
+    ] }) : calls.phase === "ringing-out" ? /* @__PURE__ */ jsx(
+      CallButton,
+      {
+        label: "Cancel",
+        color: theme.colors.error,
+        onPress: () => void calls.cancel()
+      }
+    ) : calls.phase === "declined" || calls.phase === "busy" || calls.phase === "timed-out" ? /* @__PURE__ */ jsx(CallButton, { label: "Close", color: theme.colors.ink3, onPress: calls.reset }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CallButton,
+        {
+          label: voice.muted ? "Unmute" : "Mute",
+          color: theme.colors.ink2,
+          onPress: voice.toggleMute
+        }
+      ),
+      /* @__PURE__ */ jsx(CallButton, { label: "Hang up", color: theme.colors.error, onPress: hangUp })
+    ] }) }),
+    !available && /* @__PURE__ */ jsx(Text, { style: [styles24.warn, { color: theme.colors.error }], children: "react-native-webrtc is not installed \u2014 this call has no audio." }),
+    (calls.error ?? voice.error) && /* @__PURE__ */ jsx(Text, { style: [styles24.warn, { color: theme.colors.error }], children: (calls.error ?? voice.error)?.message })
+  ] }) });
+}
+function statusLine(calls, voiceStatus) {
+  switch (calls.phase) {
+    case "ringing-in":
+      return "Incoming call\u2026";
+    case "ringing-out":
+      return "Ringing\u2026";
+    case "declined":
+      return "Call declined";
+    case "busy":
+      return "Already on another call";
+    case "timed-out":
+      return "No answer";
+    case "active":
+      return voiceStatus === "connected" ? "Connected" : "Connecting\u2026";
+    default:
+      return "";
+  }
+}
+function CallButton({
+  label,
+  color,
+  onPress
+}) {
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress,
+      accessibilityRole: "button",
+      style: [styles24.callBtn, { backgroundColor: color }],
+      children: /* @__PURE__ */ jsx(Text, { style: styles24.callBtnText, children: label })
+    }
+  );
+}
+var styles24 = StyleSheet.create({
+  screen: { flex: 1, justifyContent: "space-between", paddingVertical: 72, paddingHorizontal: 24 },
+  identity: { alignItems: "center", gap: 8, marginTop: 48 },
+  who: { fontSize: 28, fontWeight: "600", textAlign: "center" },
+  state: { fontSize: 15 },
+  actions: { flexDirection: "row", justifyContent: "center", gap: 16 },
+  callBtn: {
+    paddingHorizontal: 26,
+    paddingVertical: 16,
+    borderRadius: 999,
+    minWidth: 128,
+    alignItems: "center"
+  },
+  callBtnText: { color: "#ffffff", fontSize: 16, fontWeight: "600" },
+  warn: { fontSize: 12, textAlign: "center", marginTop: 12 }
+});
+
+export { AttachmentPicker, AttachmentPreview, Avatar, CallScreen, ChatHeader, ConversationList, ConversationView, DaySeparator, GroupDetailsSheet, ImageMosaic, MemberList, MentionInput, MessageActions, MessageBubble, MessageComposer, MessageList, MessageRow, PoolseIcon, PoolseInbox, PoolseLogo, PoolseTheme, primitives as Primitives, ReactionPicker, ReactionStrip, ThreadView, TypingIndicator, UploadQueueStrip, UserName, VoiceRoomBar, createNativeWebRtcAdapter, defaultDarkTheme, defaultLightTheme, isNativeWebRtcAvailable, useAppStateLifecycle, useDisplayName, usePoolseTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map