@poolse/react-native 0.1.1 → 2.0.5

package/dist/index.js

@@ -1,10 +1,12 @@
-import { useAttachmentUpload, useMembers, useAttachmentUrl, useUser, useMe, useThread, useMessages, useTyping, useConversations, usePresence, useReactions, usePoolse } from '@poolse/react';
-import { createContext, forwardRef, useRef, useState, useImperativeHandle, useContext, useMemo, useCallback, useEffect } from 'react';
-import { StyleSheet, KeyboardAvoidingView, View, Pressable, TextInput, Platform, Text, Modal, Image, FlatList, ActivityIndicator, Animated, AppState, Easing } from 'react-native';
+import { useMe, useConversations, useAttachmentUpload, useConversation, useMembers, usePresence, useUser, useMessages, useTyping, useReactions, useThread, useAttachmentUrl, usePoolse } from '@poolse/react';
+import { createContext, forwardRef, useRef, useState, useImperativeHandle, useEffect, useMemo, useCallback, useContext } from 'react';
+import { StyleSheet, View, Pressable, TextInput, Text, useWindowDimensions, Animated, Easing, PanResponder, Image, ScrollView, ActivityIndicator, FlatList, KeyboardAvoidingView, Platform, Modal, Dimensions, AppState } from 'react-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { SvgXml, Svg, Path, Circle, G } from 'react-native-svg';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as ImagePicker from 'expo-image-picker';
+import * as DocumentPicker from 'expo-document-picker';
 
-// src/ConversationView.tsx
+// src/PoolseInbox.tsx
 
 // src/theme/default.ts
 var lightColors = {
@@ -170,6 +172,111 @@ function usePoolseTheme() {
   return useContext(ThemeContext) ?? defaultLightTheme;
 }
 
+// src/primitives/userColor.ts
+var PALETTE = [
+  "#6366f1",
+  // indigo
+  "#10b981",
+  // emerald
+  "#f59e0b",
+  // amber
+  "#ec4899",
+  // rose
+  "#0ea5e9",
+  // sky
+  "#8b5cf6",
+  // violet
+  "#14b8a6",
+  // teal
+  "#d946ef"
+  // fuchsia
+];
+function userColor(id) {
+  let h = 0;
+  for (let i = 0; i < id.length; i++) {
+    h = h * 31 + id.charCodeAt(i) | 0;
+  }
+  return PALETTE[Math.abs(h) % PALETTE.length];
+}
+var SIZES = { sm: 28, md: 40, lg: 56 };
+function Avatar({ src, name, seed, online, size = "md" }) {
+  const theme = usePoolseTheme();
+  const dim = SIZES[size];
+  const initials = computeInitials(name);
+  const tint = seed ? userColor(seed) : theme.colors.brand;
+  const fontSize = size === "sm" ? 11 : size === "lg" ? 22 : 15;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.root,
+        {
+          width: dim,
+          height: dim,
+          borderRadius: dim / 2,
+          backgroundColor: tint
+        }
+      ],
+      accessibilityRole: "image",
+      accessibilityLabel: name ?? "avatar",
+      children: [
+        src ? /* @__PURE__ */ jsx(
+          Image,
+          {
+            source: { uri: src },
+            style: { width: dim, height: dim, borderRadius: dim / 2 },
+            accessible: false
+          }
+        ) : /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: theme.colors.onBrand,
+              fontSize,
+              fontWeight: "600",
+              fontFamily: theme.type.fontBody
+            },
+            children: initials
+          }
+        ),
+        online ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.presence,
+              {
+                backgroundColor: theme.colors.presence,
+                borderColor: theme.colors.surface,
+                width: dim * 0.32,
+                height: dim * 0.32,
+                borderRadius: dim * 0.16
+              }
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function computeInitials(name) {
+  if (!name) return "?";
+  const parts = name.trim().split(/\s+/).slice(0, 2);
+  return parts.map((p) => p.charAt(0).toUpperCase()).join("").slice(0, 2) || "?";
+}
+var styles = StyleSheet.create({
+  root: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "visible"
+  },
+  presence: {
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    borderWidth: 2
+  }
+});
+
 // src/primitives/icons-data.ts
 var ICONS = {
   attachment: {
@@ -346,296 +453,950 @@ function PoolseIcon({ name, size = 20, color, label }) {
   const a11y = label === null ? { accessibilityRole: "none" } : { accessibilityRole: "image", accessibilityLabel: label ?? name };
   return /* @__PURE__ */ jsx(SvgXml, { xml, width: size, height: size, ...a11y });
 }
-function AttachmentPicker({ visible, onClose, onPickInputs }) {
+function MemberList({
+  conversationId,
+  labelFor,
+  avatarFor,
+  onlineExternalIds,
+  canRemove,
+  renderItem,
+  emptyState
+}) {
   const theme = usePoolseTheme();
-  const upload = useAttachmentUpload();
-  const pickFromKind = async (kind) => {
-    try {
-      const adapter = onPickInputs ?? defaultAdapter;
-      const inputs = await adapter(kind);
-      for (const input of inputs) {
-        void upload.upload(input);
-      }
-    } catch (err) {
-      console.warn("[poolse/picker]", err);
-    } finally {
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs(
-    View,
+  const { members, loading, error, removeMember } = useMembers(conversationId);
+  const { online: presenceOnline } = usePresence(
+    onlineExternalIds === void 0 ? conversationId : ""
+  );
+  const effectiveOnline = onlineExternalIds ?? presenceOnline;
+  if (loading && members.length === 0) {
+    return /* @__PURE__ */ jsx(View, { style: [styles2.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs(View, { style: [styles2.placeholder, { backgroundColor: theme.colors.paper }], children: [
+      /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.error, fontFamily: theme.type.fontBody }, children: "Failed to load members." }),
+      error.message ? /* @__PURE__ */ jsx(Text, { style: [styles2.errorDetail, { color: theme.colors.ink3 }], children: error.message }) : null
+    ] });
+  }
+  if (members.length === 0) {
+    return /* @__PURE__ */ jsx(View, { style: [styles2.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" || emptyState == null ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState ?? "No members." }) : emptyState });
+  }
+  return /* @__PURE__ */ jsx(
+    FlatList,
     {
-      style: [
-        styles.sheet,
-        {
-          backgroundColor: theme.colors.surface,
-          borderTopLeftRadius: theme.radii.lg,
-          borderTopRightRadius: theme.radii.lg
-        },
-        theme.shadows.lg
-      ],
-      children: [
-        /* @__PURE__ */ jsxs(Pressable, { style: styles.item, onPress: () => pickFromKind("image"), children: [
-          /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 20, color: theme.colors.ink2 }),
-          /* @__PURE__ */ jsx(Text, { style: [styles.itemText, { color: theme.colors.ink }], children: "Photo or video" })
-        ] }),
-        /* @__PURE__ */ jsxs(Pressable, { style: styles.item, onPress: () => pickFromKind("document"), children: [
-          /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 20, color: theme.colors.ink2 }),
-          /* @__PURE__ */ jsx(Text, { style: [styles.itemText, { color: theme.colors.ink }], children: "File" })
-        ] }),
-        /* @__PURE__ */ jsx(Pressable, { style: styles.cancel, onPress: onClose, children: /* @__PURE__ */ jsx(Text, { style: [styles.itemText, { color: theme.colors.brand }], children: "Cancel" }) })
-      ]
+      data: members,
+      keyExtractor: (m) => m.user_id,
+      style: { backgroundColor: theme.colors.paper },
+      renderItem: ({ item }) => {
+        if (renderItem) return /* @__PURE__ */ jsx(Fragment, { children: renderItem(item) });
+        const name = labelFor?.(item.external_id) ?? item.external_id;
+        const avatarUrl = avatarFor?.(item.external_id) ?? null;
+        const isOnline = effectiveOnline.has(item.external_id);
+        const showRemove = canRemove?.(item) ?? false;
+        return /* @__PURE__ */ jsx(
+          MemberRow,
+          {
+            name,
+            externalId: item.external_id,
+            avatarUrl,
+            role: item.role,
+            online: isOnline,
+            ...showRemove ? { onRemove: () => removeMember(item.external_id) } : {}
+          }
+        );
+      }
     }
-  ) }) });
-}
-async function defaultAdapter(kind) {
-  if (kind === "image") {
-    const mod2 = await tryImport("expo-image-picker");
-    if (!mod2)
-      throw new Error("expo-image-picker not installed \u2014 `npx expo install expo-image-picker`");
-    const res2 = await mod2.launchImageLibraryAsync({ mediaTypes: "images", quality: 0.85 });
-    if (res2.canceled) return [];
-    return res2.assets.map(
-      (asset) => ({
-        body: {
-          uri: asset.uri,
-          name: asset.fileName ?? "image.jpg",
-          type: asset.mimeType ?? "image/jpeg"
-        },
-        contentType: asset.mimeType ?? "image/jpeg",
-        byteSize: asset.fileSize ?? 0,
-        filename: asset.fileName ?? "image.jpg"
-      })
-    );
-  }
-  const mod = await tryImport("expo-document-picker");
-  if (!mod)
-    throw new Error("expo-document-picker not installed \u2014 `npx expo install expo-document-picker`");
-  const res = await mod.getDocumentAsync({ copyToCacheDirectory: true, multiple: true });
-  if (res.canceled) return [];
-  return res.assets.map(
-    (asset) => ({
-      body: {
-        uri: asset.uri,
-        name: asset.name,
-        type: asset.mimeType ?? "application/octet-stream"
-      },
-      contentType: asset.mimeType ?? "application/octet-stream",
-      byteSize: asset.size ?? 0,
-      filename: asset.name
-    })
   );
 }
-async function tryImport(name) {
-  try {
-    return await new Function("m", "return import(m)")(name);
-  } catch {
-    return null;
-  }
+function MemberRow({
+  name,
+  externalId,
+  avatarUrl,
+  role,
+  online,
+  onRemove
+}) {
+  const theme = usePoolseTheme();
+  return /* @__PURE__ */ jsxs(View, { style: styles2.row, children: [
+    /* @__PURE__ */ jsx(Avatar, { src: avatarUrl, name, seed: externalId, online, size: "md" }),
+    /* @__PURE__ */ jsxs(View, { style: styles2.body, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [styles2.name, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+          numberOfLines: 1,
+          children: name
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { style: [styles2.role, { color: theme.colors.ink3 }], children: role })
+    ] }),
+    onRemove ? /* @__PURE__ */ jsx(Pressable, { onPress: onRemove, hitSlop: 8, style: styles2.removeBtn, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
+  ] });
 }
-var styles = StyleSheet.create({
-  backdrop: {
+var styles2 = StyleSheet.create({
+  placeholder: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.35)",
-    justifyContent: "flex-end"
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24
   },
-  sheet: {
-    paddingVertical: 8,
-    paddingBottom: 24
+  errorDetail: {
+    marginTop: 6,
+    fontSize: 11
   },
-  item: {
+  row: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 20,
-    paddingVertical: 14,
-    gap: 14
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    gap: 10
   },
-  cancel: {
-    paddingHorizontal: 20,
-    paddingVertical: 14,
-    alignItems: "center",
-    marginTop: 4
+  body: {
+    flex: 1,
+    gap: 1
   },
-  itemText: {
-    fontSize: 15,
+  name: {
+    fontSize: 14,
     fontWeight: "500"
+  },
+  role: {
+    fontSize: 11,
+    textTransform: "capitalize"
+  },
+  removeBtn: {
+    padding: 6
   }
 });
-
-// src/primitives/userColor.ts
-var PALETTE = [
-  "#6366f1",
-  // indigo
-  "#10b981",
-  // emerald
-  "#f59e0b",
-  // amber
-  "#ec4899",
-  // rose
-  "#0ea5e9",
-  // sky
-  "#8b5cf6",
-  // violet
-  "#14b8a6",
-  // teal
-  "#d946ef"
-  // fuchsia
-];
-function userColor(id) {
-  let h = 0;
-  for (let i = 0; i < id.length; i++) {
-    h = h * 31 + id.charCodeAt(i) | 0;
-  }
-  return PALETTE[Math.abs(h) % PALETTE.length];
+function useDismissableSheet({ onClose, sheetHeight, dismissThreshold = 0.22 }) {
+  const translateY = useRef(new Animated.Value(0)).current;
+  const panResponder = useMemo(
+    () => PanResponder.create({
+      onMoveShouldSetPanResponder: (_, g) => {
+        return g.dy > 6 && g.dy > Math.abs(g.dx);
+      },
+      onPanResponderMove: (_, g) => {
+        translateY.setValue(Math.max(0, g.dy));
+      },
+      onPanResponderRelease: (_, g) => {
+        const committed = g.dy > sheetHeight * dismissThreshold || g.vy > 0.6;
+        if (committed) {
+          Animated.timing(translateY, {
+            toValue: sheetHeight,
+            duration: 180,
+            useNativeDriver: true
+          }).start(() => {
+            translateY.setValue(0);
+            onClose();
+          });
+        } else {
+          Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+            speed: 22,
+            bounciness: 4
+          }).start();
+        }
+      },
+      onPanResponderTerminate: () => {
+        Animated.spring(translateY, {
+          toValue: 0,
+          useNativeDriver: true,
+          speed: 22,
+          bounciness: 4
+        }).start();
+      }
+    }),
+    [onClose, sheetHeight, dismissThreshold, translateY]
+  );
+  return { translateY, panHandlers: panResponder.panHandlers };
 }
-var SIZES = { sm: 28, md: 40, lg: 56 };
-function Avatar({ src, name, seed, online, size = "md" }) {
+function GroupDetailsSheet({
+  visible,
+  onClose,
+  conversationId,
+  labelFor,
+  avatarFor,
+  canRemoveMember
+}) {
   const theme = usePoolseTheme();
-  const dim = SIZES[size];
-  const initials = computeInitials(name);
-  const tint = seed ? userColor(seed) : theme.colors.brand;
-  const fontSize = size === "sm" ? 11 : size === "lg" ? 22 : 15;
-  return /* @__PURE__ */ jsxs(
-    View,
+  const { conversation } = useConversation(conversationId);
+  const { members } = useMembers(conversationId);
+  const { height: screenHeight } = useWindowDimensions();
+  const { translateY, panHandlers } = useDismissableSheet({
+    onClose,
+    sheetHeight: screenHeight * 0.85
+  });
+  const title = conversation?.name ?? "Conversation";
+  const subtitle = `${members.length} ${members.length === 1 ? "member" : "members"}`;
+  return /* @__PURE__ */ jsx(
+    Modal,
     {
-      style: [
-        styles2.root,
-        {
-          width: dim,
-          height: dim,
-          borderRadius: dim / 2,
-          backgroundColor: tint
-        }
-      ],
-      accessibilityRole: "image",
-      accessibilityLabel: name ?? "avatar",
-      children: [
-        src ? /* @__PURE__ */ jsx(
-          Image,
-          {
-            source: { uri: src },
-            style: { width: dim, height: dim, borderRadius: dim / 2 },
-            accessible: false
-          }
-        ) : /* @__PURE__ */ jsx(
-          Text,
+      visible,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: onClose,
+      statusBarTranslucent: true,
+      children: /* @__PURE__ */ jsxs(View, { style: styles3.modalRoot, children: [
+        /* @__PURE__ */ jsx(
+          Pressable,
           {
-            style: {
-              color: theme.colors.onBrand,
-              fontSize,
-              fontWeight: "600",
-              fontFamily: theme.type.fontBody
-            },
-            children: initials
+            style: styles3.backdrop,
+            onPress: onClose,
+            accessibilityLabel: "Close group details"
           }
         ),
-        online ? /* @__PURE__ */ jsx(
-          View,
+        /* @__PURE__ */ jsxs(
+          Animated.View,
           {
             style: [
-              styles2.presence,
+              styles3.sheet,
               {
-                backgroundColor: theme.colors.presence,
-                borderColor: theme.colors.surface,
-                width: dim * 0.32,
-                height: dim * 0.32,
-                borderRadius: dim * 0.16
-              }
+                backgroundColor: theme.colors.paper,
+                borderTopLeftRadius: theme.radii.xl,
+                borderTopRightRadius: theme.radii.xl,
+                transform: [{ translateY }]
+              },
+              theme.shadows.lg
+            ],
+            children: [
+              /* @__PURE__ */ jsx(View, { ...panHandlers, style: styles3.dragHandle, children: /* @__PURE__ */ jsx(View, { style: [styles3.dragPill, { backgroundColor: theme.colors.ink3 }] }) }),
+              /* @__PURE__ */ jsxs(View, { style: styles3.headerRow, children: [
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    onPress: onClose,
+                    hitSlop: 16,
+                    style: [styles3.closeBtn, { backgroundColor: theme.colors.surface2 }],
+                    accessibilityLabel: "Close",
+                    children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 18, color: theme.colors.ink })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: [
+                      styles3.headerTitle,
+                      { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }
+                    ],
+                    children: "Group details"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(View, { style: styles3.summary, children: [
+                /* @__PURE__ */ jsx(Avatar, { src: null, name: title, seed: conversationId, size: "lg" }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: [
+                      styles3.title,
+                      { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }
+                    ],
+                    numberOfLines: 1,
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { style: [styles3.subtitle, { color: theme.colors.ink3 }], children: subtitle })
+              ] }),
+              /* @__PURE__ */ jsx(View, { style: [styles3.divider, { backgroundColor: theme.colors.border }] }),
+              /* @__PURE__ */ jsx(View, { style: styles3.sectionLabelRow, children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [
+                    styles3.sectionLabel,
+                    { color: theme.colors.ink2, fontFamily: theme.type.fontBody }
+                  ],
+                  children: "Members"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+                MemberList,
+                {
+                  conversationId,
+                  ...labelFor ? { labelFor } : {},
+                  ...avatarFor ? { avatarFor } : {},
+                  ...canRemoveMember ? { canRemove: canRemoveMember } : {},
+                  emptyState: "No members yet."
+                }
+              ) })
             ]
           }
-        ) : null
-      ]
+        )
+      ] })
     }
   );
 }
-function computeInitials(name) {
-  if (!name) return "?";
-  const parts = name.trim().split(/\s+/).slice(0, 2);
-  return parts.map((p) => p.charAt(0).toUpperCase()).join("").slice(0, 2) || "?";
-}
-var styles2 = StyleSheet.create({
-  root: {
+var styles3 = StyleSheet.create({
+  modalRoot: {
+    flex: 1,
+    justifyContent: "flex-end"
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.4)"
+  },
+  sheet: {
+    height: "85%",
+    overflow: "hidden"
+  },
+  dragHandle: {
     alignItems: "center",
-    justifyContent: "center",
-    overflow: "visible"
+    paddingTop: 8,
+    paddingBottom: 4
   },
-  presence: {
-    position: "absolute",
-    bottom: 0,
-    right: 0,
-    borderWidth: 2
+  dragPill: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    opacity: 0.4
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingTop: 4,
+    paddingBottom: 12,
+    gap: 10
+  },
+  closeBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  summary: {
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    gap: 8
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "700"
+  },
+  subtitle: {
+    fontSize: 13
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth
+  },
+  sectionLabelRow: {
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 6
+  },
+  sectionLabel: {
+    fontSize: 11,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
   }
 });
-function UploadQueueStrip() {
+function ChatHeader({
+  conversationId,
+  labelFor,
+  avatarFor,
+  onMembersPress,
+  onPress,
+  onBack
+}) {
   const theme = usePoolseTheme();
-  const upload = useAttachmentUpload();
-  if (upload.queue.length === 0) return null;
-  return /* @__PURE__ */ jsx(View, { style: styles3.strip, children: upload.queue.map((item) => {
-    const isError = item.status === "error";
-    const isReady = item.status === "ready";
-    return /* @__PURE__ */ jsxs(
+  const { conversation } = useConversation(conversationId);
+  const { members } = useMembers(conversationId);
+  const { me } = useMe();
+  const { online } = usePresence(conversationId);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const isDirect = conversation?.type === "direct";
+  const otherMember = isDirect ? members.find((m) => m.user_id !== me?.id) : null;
+  const otherExtId = otherMember?.external_id ?? null;
+  const otherUser = useUser(otherExtId);
+  if (!conversation) {
+    return /* @__PURE__ */ jsx(
       View,
       {
         style: [
-          styles3.chip,
+          styles4.root,
+          {
+            backgroundColor: theme.colors.surface,
+            borderBottomColor: theme.colors.border
+          }
+        ]
+      }
+    );
+  }
+  const fallbackName = otherExtId ?? "";
+  const directName = otherUser.profile?.displayName ?? (otherExtId ? labelFor?.(otherExtId) ?? fallbackName : "Direct");
+  const title = isDirect ? directName : conversation.name ?? "Conversation";
+  const isOnline = isDirect && otherExtId ? online.has(otherExtId) : false;
+  const subtitle = isDirect ? isOnline ? "Online" : null : `${members.length} ${members.length === 1 ? "member" : "members"}`;
+  const avatarUrl = isDirect && otherExtId ? avatarFor?.(otherExtId) ?? otherUser.profile?.avatarUrl ?? null : null;
+  const avatarSeed = isDirect ? otherExtId ?? conversationId : conversationId;
+  const isGroup = !isDirect;
+  const headerOnPress = onPress ?? (isGroup ? () => setDetailsOpen(true) : void 0);
+  const Wrapper = headerOnPress ? Pressable : View;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Wrapper,
+      {
+        ...headerOnPress ? { onPress: headerOnPress } : {},
+        style: [
+          styles4.root,
           {
-            backgroundColor: theme.colors.surface2,
-            borderColor: isError ? theme.colors.error : theme.colors.border,
-            borderRadius: theme.radii.sm
+            backgroundColor: theme.colors.surface,
+            borderBottomColor: theme.colors.border
           }
         ],
         children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              style: [styles3.name, { color: isError ? theme.colors.error : theme.colors.ink }],
-              numberOfLines: 1,
-              children: item.filename
-            }
-          ),
-          /* @__PURE__ */ jsx(Text, { style: [styles3.status, { color: theme.colors.ink3 }], children: isReady ? "ready" : isError ? "failed" : item.status }),
-          /* @__PURE__ */ jsx(
+          onBack ? /* @__PURE__ */ jsx(Pressable, { onPress: onBack, hitSlop: 12, style: styles4.backBtn, accessibilityLabel: "Back", children: /* @__PURE__ */ jsx(PoolseIcon, { name: "reply", size: 20, color: theme.colors.ink }) }) : null,
+          /* @__PURE__ */ jsx(Avatar, { src: avatarUrl, name: title, seed: avatarSeed, online: isOnline, size: "md" }),
+          /* @__PURE__ */ jsxs(View, { style: styles4.titleCol, children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: [styles4.title, { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }],
+                numberOfLines: 1,
+                children: title
+              }
+            ),
+            subtitle ? /* @__PURE__ */ jsx(Text, { style: [styles4.subtitle, { color: theme.colors.ink3 }], numberOfLines: 1, children: subtitle }) : null
+          ] }),
+          onMembersPress ? /* @__PURE__ */ jsx(
             Pressable,
             {
-              hitSlop: 6,
-              onPress: () => isReady || isError ? upload.remove(item.localId) : upload.cancel(item.localId),
-              style: styles3.btn,
-              accessibilityLabel: "Remove upload",
-              children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 12, color: theme.colors.ink2 })
+              onPress: onMembersPress,
+              hitSlop: 12,
+              style: styles4.actionBtn,
+              accessibilityLabel: "Show members",
+              children: /* @__PURE__ */ jsx(PoolseIcon, { name: "users", size: 20, color: theme.colors.ink2 })
             }
-          )
+          ) : null
         ]
-      },
-      item.localId
-    );
-  }) });
+      }
+    ),
+    isGroup ? /* @__PURE__ */ jsx(
+      GroupDetailsSheet,
+      {
+        visible: detailsOpen,
+        onClose: () => setDetailsOpen(false),
+        conversationId,
+        ...labelFor ? { labelFor } : {},
+        ...avatarFor ? { avatarFor } : {}
+      }
+    ) : null
+  ] });
 }
-var styles3 = StyleSheet.create({
-  strip: {
+var styles4 = StyleSheet.create({
+  root: {
     flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6,
-    marginBottom: 6
+    alignItems: "center",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    gap: 12
   },
-  chip: {
-    flexDirection: "row",
+  titleCol: {
+    flex: 1,
+    gap: 2
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  subtitle: {
+    fontSize: 12,
+    fontWeight: "500"
+  },
+  actionBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  backBtn: {
+    width: 36,
+    height: 36,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: -6
+  }
+});
+function ConversationList({
+  selectedId,
+  onSelect,
+  renderItem,
+  emptyState,
+  conversations: controlled,
+  loading: controlledLoading,
+  error: controlledError,
+  unreadCounts
+}) {
+  const theme = usePoolseTheme();
+  const auto = useConversations();
+  const isControlled = controlled !== void 0;
+  const conversations = isControlled ? controlled : auto.conversations;
+  const loading = isControlled ? controlledLoading ?? false : auto.loading;
+  const error = isControlled ? controlledError ?? null : auto.error;
+  const counts = unreadCounts ?? (isControlled ? void 0 : auto.unreadCounts);
+  if (loading && conversations.length === 0) {
+    return /* @__PURE__ */ jsx(View, { style: [styles5.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(View, { style: [styles5.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.error, fontFamily: theme.type.fontBody }, children: "Failed to load conversations." }) });
+  }
+  if (conversations.length === 0) {
+    return /* @__PURE__ */ jsx(View, { style: [styles5.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" || emptyState == null ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState ?? "No conversations yet." }) : emptyState });
+  }
+  return /* @__PURE__ */ jsx(
+    FlatList,
+    {
+      data: conversations,
+      keyExtractor: (c) => c.id,
+      style: { backgroundColor: theme.colors.paper },
+      renderItem: ({ item }) => {
+        const selected = selectedId === item.id;
+        if (renderItem) {
+          return /* @__PURE__ */ jsx(Fragment, { children: renderItem(item, selected) });
+        }
+        const unread = counts?.[item.id] ?? 0;
+        return /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            onPress: () => onSelect?.(item),
+            style: [
+              styles5.row,
+              {
+                backgroundColor: selected ? theme.colors.surface2 : "transparent"
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(Avatar, { src: null, name: item.name ?? null, seed: item.id, size: "md" }),
+              /* @__PURE__ */ jsxs(View, { style: styles5.body, children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: [styles5.name, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+                    numberOfLines: 1,
+                    children: item.name ?? "Untitled conversation"
+                  }
+                ),
+                item.last_message_at ? /* @__PURE__ */ jsx(Text, { style: [styles5.preview, { color: theme.colors.ink3 }], numberOfLines: 1, children: formatRelative(item.last_message_at) }) : null
+              ] }),
+              unread > 0 ? /* @__PURE__ */ jsx(View, { style: [styles5.unreadPill, { backgroundColor: theme.colors.unreadPill }], children: /* @__PURE__ */ jsx(Text, { style: [styles5.unreadText, { color: theme.colors.unreadPillText }], children: unread > 99 ? "99+" : String(unread) }) }) : null
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+function formatRelative(iso) {
+  try {
+    const d = new Date(iso);
+    const now = Date.now();
+    const diff = now - d.getTime();
+    if (diff < 6e4) return "just now";
+    if (diff < 36e5) return `${Math.floor(diff / 6e4)}m`;
+    if (diff < 864e5) return `${Math.floor(diff / 36e5)}h`;
+    return `${Math.floor(diff / 864e5)}d`;
+  } catch {
+    return "";
+  }
+}
+var styles5 = StyleSheet.create({
+  placeholder: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 10
+  },
+  body: {
+    flex: 1,
+    gap: 2
+  },
+  name: {
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  preview: {
+    fontSize: 12
+  },
+  unreadPill: {
+    minWidth: 22,
+    height: 22,
+    borderRadius: 11,
+    paddingHorizontal: 6,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  unreadText: {
+    fontSize: 11,
+    fontWeight: "700"
+  }
+});
+var UploadCtx = createContext(null);
+function UploadProvider({ children }) {
+  const upload = useAttachmentUpload();
+  const previews = useRef(/* @__PURE__ */ new Map());
+  const setPreview = useCallback((filename, uri) => {
+    previews.current.set(filename, uri);
+  }, []);
+  const getPreview = useCallback((filename) => {
+    return previews.current.get(filename) ?? null;
+  }, []);
+  return /* @__PURE__ */ jsx(UploadCtx.Provider, { value: { upload, setPreview, getPreview }, children });
+}
+function useSharedUpload() {
+  const fromCtx = useContext(UploadCtx);
+  const fallback = useAttachmentUpload();
+  return fromCtx?.upload ?? fallback;
+}
+function useUploadPreview() {
+  const ctx = useContext(UploadCtx);
+  return {
+    setPreview: ctx?.setPreview ?? (() => void 0),
+    getPreview: ctx?.getPreview ?? (() => null)
+  };
+}
+function AttachmentPicker({ visible, onClose, onPickInputs }) {
+  const theme = usePoolseTheme();
+  const upload = useSharedUpload();
+  const { setPreview } = useUploadPreview();
+  const pickFromKind = async (kind) => {
+    try {
+      const adapter = onPickInputs ?? defaultAdapter;
+      const inputs = await adapter(kind);
+      for (const input of inputs) {
+        const previewUri = input._previewUri ?? null;
+        if (previewUri && input.filename) {
+          setPreview(input.filename, previewUri);
+        }
+        void upload.upload(input);
+      }
+    } catch (err) {
+      console.warn("[poolse/picker]", err);
+    } finally {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles6.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles6.sheet,
+        {
+          backgroundColor: theme.colors.surface,
+          borderTopLeftRadius: theme.radii.lg,
+          borderTopRightRadius: theme.radii.lg
+        },
+        theme.shadows.lg
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(Pressable, { style: styles6.item, onPress: () => pickFromKind("image"), children: [
+          /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 20, color: theme.colors.ink2 }),
+          /* @__PURE__ */ jsx(Text, { style: [styles6.itemText, { color: theme.colors.ink }], children: "Photo or video" })
+        ] }),
+        /* @__PURE__ */ jsxs(Pressable, { style: styles6.item, onPress: () => pickFromKind("document"), children: [
+          /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 20, color: theme.colors.ink2 }),
+          /* @__PURE__ */ jsx(Text, { style: [styles6.itemText, { color: theme.colors.ink }], children: "File" })
+        ] }),
+        /* @__PURE__ */ jsx(Pressable, { style: styles6.cancel, onPress: onClose, children: /* @__PURE__ */ jsx(Text, { style: [styles6.itemText, { color: theme.colors.brand }], children: "Cancel" }) })
+      ]
+    }
+  ) }) });
+}
+async function uriToBlob(uri) {
+  const res = await fetch(uri);
+  if (!res.ok && res.status !== 0) {
+    throw new Error(`failed to read picked file (HTTP ${res.status})`);
+  }
+  return res.blob();
+}
+async function defaultAdapter(kind) {
+  if (kind === "image") {
+    const res2 = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: "images",
+      quality: 0.85
+    });
+    if (res2.canceled) return [];
+    return Promise.all(
+      res2.assets.map(async (asset) => {
+        const blob = await uriToBlob(asset.uri);
+        const contentType = asset.mimeType ?? blob.type ?? "image/jpeg";
+        return {
+          body: blob,
+          contentType,
+          byteSize: asset.fileSize ?? blob.size,
+          filename: asset.fileName ?? `image-${Date.now()}.jpg`,
+          _previewUri: asset.uri
+        };
+      })
+    );
+  }
+  const res = await DocumentPicker.getDocumentAsync({
+    copyToCacheDirectory: true,
+    multiple: true
+  });
+  if (res.canceled) return [];
+  return Promise.all(
+    res.assets.map(async (asset) => {
+      const blob = await uriToBlob(asset.uri);
+      const contentType = asset.mimeType ?? blob.type ?? "application/octet-stream";
+      return {
+        body: blob,
+        contentType,
+        byteSize: asset.size ?? blob.size,
+        filename: asset.name,
+        _previewUri: asset.uri
+      };
+    })
+  );
+}
+var styles6 = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.35)",
+    justifyContent: "flex-end"
+  },
+  sheet: {
+    paddingVertical: 8,
+    paddingBottom: 24
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    gap: 14
+  },
+  cancel: {
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    alignItems: "center",
+    marginTop: 4
+  },
+  itemText: {
+    fontSize: 15,
+    fontWeight: "500"
+  }
+});
+function UploadQueueStrip() {
+  const theme = usePoolseTheme();
+  const upload = useSharedUpload();
+  const { getPreview } = useUploadPreview();
+  if (upload.queue.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: styles7.scroll,
+      style: [styles7.scrollStyle, { marginBottom: 8 }],
+      children: upload.queue.map((item) => {
+        const isError = item.status === "error";
+        const isUploading = item.status === "uploading" || item.status === "pending";
+        const isImage = (item.contentType ?? "").startsWith("image/");
+        const previewUri = getPreview(item.filename);
+        const canTerminate = isUploading || item.status === "ready" || isError;
+        const handleClose = () => {
+          if (item.status === "ready" || isError) upload.remove(item.localId);
+          else upload.cancel(item.localId);
+        };
+        return /* @__PURE__ */ jsxs(View, { style: styles7.tileWrap, children: [
+          isImage && previewUri ? /* @__PURE__ */ jsx(ImageTile, { uri: previewUri, uploading: isUploading, error: isError }) : /* @__PURE__ */ jsx(
+            FileTile,
+            {
+              filename: item.filename,
+              size: item.byteSize,
+              uploading: isUploading,
+              error: isError
+            }
+          ),
+          canTerminate ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              onPress: handleClose,
+              hitSlop: 8,
+              style: [styles7.closeBtn, { backgroundColor: theme.colors.ink }],
+              accessibilityLabel: isError ? "Remove failed upload" : "Cancel upload",
+              children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 11, color: theme.colors.onBrand })
+            }
+          ) : null,
+          isUploading ? /* @__PURE__ */ jsx(View, { style: styles7.progressOverlay, children: /* @__PURE__ */ jsx(View, { style: [styles7.spinner, { borderColor: theme.colors.onBrand }] }) }) : null,
+          isError ? /* @__PURE__ */ jsx(View, { style: [styles7.errorOverlay, { backgroundColor: "rgba(229,72,77,0.85)" }], children: /* @__PURE__ */ jsx(Text, { style: [styles7.errorText, { color: "#fff" }], children: "Failed" }) }) : null
+        ] }, item.localId);
+      })
+    }
+  );
+}
+function ImageTile({ uri, uploading, error }) {
+  const theme = usePoolseTheme();
+  return /* @__PURE__ */ jsx(
+    Image,
+    {
+      source: { uri },
+      style: [
+        styles7.imageTile,
+        {
+          backgroundColor: theme.colors.surface2,
+          borderColor: error ? theme.colors.error : "transparent",
+          opacity: uploading ? 0.65 : 1
+        }
+      ],
+      resizeMode: "cover"
+    }
+  );
+}
+function FileTile({
+  filename,
+  size,
+  uploading,
+  error
+}) {
+  const theme = usePoolseTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles7.fileTile,
+        {
+          backgroundColor: theme.colors.surface2,
+          borderColor: error ? theme.colors.error : uploading ? theme.colors.brand : theme.colors.border
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(View, { style: [styles7.fileIconBox, { backgroundColor: theme.colors.brandSoft }], children: /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 18, color: theme.colors.brand }) }),
+        /* @__PURE__ */ jsxs(View, { style: styles7.fileInfo, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [styles7.fileName, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+              numberOfLines: 1,
+              children: filename
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: [styles7.fileSize, { color: theme.colors.ink3 }], children: formatBytes(size) })
+        ] })
+      ]
+    }
+  );
+}
+function formatBytes(n) {
+  if (!n || n < 0) return "";
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  if (n < 1024 * 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`;
+  return `${(n / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+var TILE = 64;
+var styles7 = StyleSheet.create({
+  scrollStyle: {
+    overflow: "visible"
+  },
+  scroll: {
+    paddingHorizontal: 8,
+    // paddingTop creates room for the X to overflow the tile without
+    // being clipped on Android (where overflow:visible isn't enough).
+    paddingTop: 8,
+    gap: 10,
+    flexDirection: "row"
+  },
+  tileWrap: {
+    position: "relative",
+    overflow: "visible"
+  },
+  imageTile: {
+    width: TILE,
+    height: TILE,
+    borderRadius: 10,
+    borderWidth: 1.5
+  },
+  fileTile: {
+    height: TILE,
+    minWidth: 200,
+    maxWidth: 260,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingRight: 28,
+    borderRadius: 10,
+    borderWidth: 1,
+    gap: 10
+  },
+  fileIconBox: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fileInfo: {
+    flex: 1,
+    gap: 2
+  },
+  fileName: {
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  fileSize: {
+    fontSize: 11
+  },
+  closeBtn: {
+    // Outside the tile (top-right corner overflowing). Parent
+    // scroll container + tileWrap set overflow:visible and the
+    // scroll contentContainer has paddingTop:8 so the overflow
+    // isn't clipped on Android.
+    position: "absolute",
+    top: -6,
+    right: -6,
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.3,
+    shadowRadius: 2,
+    elevation: 3
+  },
+  progressOverlay: {
+    ...StyleSheet.absoluteFillObject,
     alignItems: "center",
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderWidth: StyleSheet.hairlineWidth,
-    gap: 6,
-    maxWidth: 200
+    justifyContent: "center",
+    pointerEvents: "none"
   },
-  name: {
-    fontSize: 12,
-    flex: 1
+  spinner: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 2.5,
+    borderTopColor: "transparent"
+    // RN can't loop a rotation purely in StyleSheet, but the static
+    // 3/4-circle still reads as "in progress." A real Animated.View
+    // rotation lands in a follow-up.
   },
-  status: {
-    fontSize: 10,
-    textTransform: "capitalize"
+  errorOverlay: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingVertical: 3,
+    alignItems: "center"
   },
-  btn: {
-    padding: 2
+  errorText: {
+    fontSize: 10,
+    fontWeight: "700"
   }
 });
 var MessageComposer = forwardRef(
@@ -648,13 +1409,14 @@ var MessageComposer = forwardRef(
     onCancelReply,
     labelFor,
     attachments = true,
-    onAttachPress
+    onAttachPress,
+    keyboardOffset: _keyboardOffset = 0
   }, ref) {
     const theme = usePoolseTheme();
     const inputRef = useRef(null);
     const [value, setValue] = useState("");
     const [sending, setSending] = useState(false);
-    const upload = useAttachmentUpload();
+    const upload = useSharedUpload();
     useImperativeHandle(
       ref,
       () => ({
@@ -688,87 +1450,80 @@ var MessageComposer = forwardRef(
         setSending(false);
       }
     };
-    return /* @__PURE__ */ jsx(
-      KeyboardAvoidingView,
+    return /* @__PURE__ */ jsxs(
+      View,
       {
-        behavior: Platform.OS === "ios" ? "padding" : void 0,
-        keyboardVerticalOffset: Platform.OS === "ios" ? 80 : 0,
-        children: /* @__PURE__ */ jsxs(
-          View,
+        style: [
+          styles8.wrap,
           {
-            style: [
-              styles4.wrap,
+            backgroundColor: theme.colors.surface,
+            borderTopColor: theme.colors.border
+          }
+        ],
+        children: [
+          replyingTo ? /* @__PURE__ */ jsx(
+            ReplyChip,
+            {
+              message: replyingTo,
+              ...labelFor ? { labelFor } : {},
+              ...onCancelReply ? { onCancel: onCancelReply } : {}
+            }
+          ) : null,
+          attachments ? /* @__PURE__ */ jsx(UploadQueueStrip, {}) : null,
+          /* @__PURE__ */ jsxs(View, { style: styles8.row, children: [
+            attachments && onAttachPress ? /* @__PURE__ */ jsx(
+              Pressable,
               {
-                backgroundColor: theme.colors.surface,
-                borderTopColor: theme.colors.border
+                onPress: onAttachPress,
+                hitSlop: 8,
+                style: styles8.iconBtn,
+                accessibilityLabel: "Attach file",
+                children: /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 22, color: theme.colors.ink2 })
               }
-            ],
-            children: [
-              replyingTo ? /* @__PURE__ */ jsx(
-                ReplyChip,
-                {
-                  message: replyingTo,
-                  ...labelFor ? { labelFor } : {},
-                  ...onCancelReply ? { onCancel: onCancelReply } : {}
-                }
-              ) : null,
-              attachments ? /* @__PURE__ */ jsx(UploadQueueStrip, {}) : null,
-              /* @__PURE__ */ jsxs(View, { style: styles4.row, children: [
-                attachments && onAttachPress ? /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    onPress: onAttachPress,
-                    hitSlop: 8,
-                    style: styles4.iconBtn,
-                    accessibilityLabel: "Attach file",
-                    children: /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 22, color: theme.colors.ink2 })
-                  }
-                ) : null,
-                /* @__PURE__ */ jsx(
-                  TextInput,
+            ) : null,
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                ref: inputRef,
+                value,
+                onChangeText: (text) => {
+                  setValue(text);
+                  onTyping?.();
+                },
+                placeholder,
+                placeholderTextColor: theme.colors.ink3,
+                multiline: true,
+                editable: !disabled,
+                style: [
+                  styles8.input,
                   {
-                    ref: inputRef,
-                    value,
-                    onChangeText: (text) => {
-                      setValue(text);
-                      onTyping?.();
-                    },
-                    placeholder,
-                    placeholderTextColor: theme.colors.ink3,
-                    multiline: true,
-                    editable: !disabled,
-                    style: [
-                      styles4.input,
-                      {
-                        color: theme.colors.ink,
-                        backgroundColor: theme.colors.surface2,
-                        borderRadius: theme.radii.lg,
-                        fontFamily: theme.type.fontBody,
-                        fontSize: theme.type.bodySize
-                      }
-                    ]
+                    color: theme.colors.ink,
+                    backgroundColor: theme.colors.surface2,
+                    borderRadius: theme.radii.lg,
+                    fontFamily: theme.type.fontBody,
+                    fontSize: theme.type.bodySize
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  Pressable,
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: handleSend,
+                disabled: submitDisabled,
+                style: [
+                  styles8.sendBtn,
                   {
-                    onPress: handleSend,
-                    disabled: submitDisabled,
-                    style: [
-                      styles4.sendBtn,
-                      {
-                        backgroundColor: submitDisabled ? theme.colors.ink3 : theme.colors.brand,
-                        opacity: submitDisabled ? 0.6 : 1
-                      }
-                    ],
-                    accessibilityLabel: "Send message",
-                    children: /* @__PURE__ */ jsx(PoolseIcon, { name: "send", size: 18, color: theme.colors.onBrand })
+                    backgroundColor: submitDisabled ? theme.colors.ink3 : theme.colors.brand,
+                    opacity: submitDisabled ? 0.6 : 1
                   }
-                )
-              ] })
-            ]
-          }
-        )
+                ],
+                accessibilityLabel: "Send message",
+                children: /* @__PURE__ */ jsx(PoolseIcon, { name: "send", size: 18, color: theme.colors.onBrand })
+              }
+            )
+          ] })
+        ]
       }
     );
   }
@@ -784,7 +1539,7 @@ function ReplyChip({
     View,
     {
       style: [
-        styles4.replyChip,
+        styles8.replyChip,
         {
           backgroundColor: theme.colors.surface2,
           borderLeftColor: theme.colors.brand
@@ -792,22 +1547,27 @@ function ReplyChip({
       ],
       children: [
         /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsxs(Text, { style: [styles4.replyName, { color: theme.colors.brand }], children: [
+          /* @__PURE__ */ jsxs(Text, { style: [styles8.replyName, { color: theme.colors.brand }], children: [
             "Replying to ",
             senderName
           ] }),
-          /* @__PURE__ */ jsx(Text, { style: [styles4.replyBody, { color: theme.colors.ink2 }], numberOfLines: 1, children: message.body ?? "\u2026" })
+          /* @__PURE__ */ jsx(Text, { style: [styles8.replyBody, { color: theme.colors.ink2 }], numberOfLines: 1, children: message.body ?? "\u2026" })
         ] }),
-        onCancel ? /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 8, style: styles4.replyCancel, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
+        onCancel ? /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 8, style: styles8.replyCancel, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
       ]
     }
   );
 }
-var styles4 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   wrap: {
     borderTopWidth: StyleSheet.hairlineWidth,
-    paddingHorizontal: 12,
-    paddingVertical: 8
+    paddingTop: 8,
+    paddingBottom: 10,
+    paddingHorizontal: 12
+    // Note: no safe-area inset here on purpose. Wrap your chat
+    // surface in <SafeAreaView> (or <SafeAreaView edges={['bottom']}>)
+    // at the app root so the home-indicator clearance is handled
+    // once. Doing it here too produces double padding.
   },
   row: {
     flexDirection: "row",
@@ -860,7 +1620,7 @@ function MentionInput({ conversationId, onSend, ...composerProps }) {
   const theme = usePoolseTheme();
   const { members } = useMembers(conversationId);
   const [pickerOpen, setPickerOpen] = useState(false);
-  const [pickerQuery, setPickerQuery] = useState("");
+  const [pickerQuery, _setPickerQuery] = useState("");
   const [pendingMentionUuids, setPendingMentionUuids] = useState([]);
   const [text, setText] = useState("");
   const filteredMembers = useMemo(() => {
@@ -896,11 +1656,11 @@ function MentionInput({ conversationId, onSend, ...composerProps }) {
         transparent: true,
         animationType: "slide",
         onRequestClose: () => setPickerOpen(false),
-        children: /* @__PURE__ */ jsx(Pressable, { style: styles5.backdrop, onPress: () => setPickerOpen(false), children: /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx(Pressable, { style: styles9.backdrop, onPress: () => setPickerOpen(false), children: /* @__PURE__ */ jsxs(
           View,
           {
             style: [
-              styles5.sheet,
+              styles9.sheet,
               {
                 backgroundColor: theme.colors.surface,
                 borderTopLeftRadius: theme.radii.lg,
@@ -911,7 +1671,7 @@ function MentionInput({ conversationId, onSend, ...composerProps }) {
               /* @__PURE__ */ jsx(
                 Text,
                 {
-                  style: [styles5.title, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+                  style: [styles9.title, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
                   children: "Mention a member"
                 }
               ),
@@ -942,12 +1702,12 @@ function MentionInput({ conversationId, onSend, ...composerProps }) {
 }
 function MentionRow({ member, onPress }) {
   const theme = usePoolseTheme();
-  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: styles5.row, children: [
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: styles9.row, children: [
     /* @__PURE__ */ jsx(Avatar, { src: null, name: member.external_id, seed: member.external_id, size: "sm" }),
-    /* @__PURE__ */ jsx(Text, { style: [styles5.rowText, { color: theme.colors.ink, fontFamily: theme.type.fontBody }], children: member.external_id })
+    /* @__PURE__ */ jsx(Text, { style: [styles9.rowText, { color: theme.colors.ink, fontFamily: theme.type.fontBody }], children: member.external_id })
   ] });
 }
-var styles5 = StyleSheet.create({
+var styles9 = StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.35)",
@@ -991,10 +1751,10 @@ function MessageList({
     [renderItem, messages.length]
   );
   if (loading && messages.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles6.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
+    return /* @__PURE__ */ jsx(View, { style: [styles10.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
   }
   if (messages.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles6.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState }) : emptyState ?? null });
+    return /* @__PURE__ */ jsx(View, { style: [styles10.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState }) : emptyState ?? null });
   }
   return /* @__PURE__ */ jsx(
     FlatList,
@@ -1015,7 +1775,7 @@ function MessageList({
     }
   );
 }
-var styles6 = StyleSheet.create({
+var styles10 = StyleSheet.create({
   placeholder: {
     flex: 1,
     alignItems: "center",
@@ -1048,7 +1808,7 @@ function EditableMessageBubble({
     View,
     {
       style: [
-        styles7.wrap,
+        styles11.wrap,
         {
           alignSelf: isSelf ? "flex-end" : "flex-start",
           maxWidth: "80%"
@@ -1058,7 +1818,7 @@ function EditableMessageBubble({
         View,
         {
           style: [
-            styles7.bubble,
+            styles11.bubble,
             {
               backgroundColor: bg,
               borderRadius: theme.radii.bubble,
@@ -1083,9 +1843,9 @@ function EditableMessageBubble({
                 }
               }
             ),
-            /* @__PURE__ */ jsxs(View, { style: styles7.actions, children: [
-              /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 6, children: /* @__PURE__ */ jsx(Text, { style: [styles7.btn, { color: ink, opacity: 0.7 }], children: "Cancel" }) }),
-              /* @__PURE__ */ jsx(Pressable, { onPress: submit, disabled: saving, hitSlop: 6, children: /* @__PURE__ */ jsx(Text, { style: [styles7.btn, { color: ink, fontWeight: "700" }], children: saving ? "Saving\u2026" : "Save" }) })
+            /* @__PURE__ */ jsxs(View, { style: styles11.actions, children: [
+              /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 6, children: /* @__PURE__ */ jsx(Text, { style: [styles11.btn, { color: ink, opacity: 0.7 }], children: "Cancel" }) }),
+              /* @__PURE__ */ jsx(Pressable, { onPress: submit, disabled: saving, hitSlop: 6, children: /* @__PURE__ */ jsx(Text, { style: [styles11.btn, { color: ink, fontWeight: "700" }], children: saving ? "Saving\u2026" : "Save" }) })
             ] })
           ]
         }
@@ -1093,7 +1853,7 @@ function EditableMessageBubble({
     }
   );
 }
-var styles7 = StyleSheet.create({
+var styles11 = StyleSheet.create({
   wrap: {
     marginBottom: 4
   },
@@ -1108,21 +1868,22 @@ var styles7 = StyleSheet.create({
     fontSize: 13
   }
 });
+var DEFAULT_REACTION_EMOJIS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F389}", "\u{1F64F}", "\u{1F525}"];
 function MessageActions({
   visible,
   onClose,
   isSelf,
+  emojis = DEFAULT_REACTION_EMOJIS,
+  onPickReaction,
   onReply,
   onReplyInThread,
   onQuote,
   onEdit,
   onDelete,
-  onCopy,
-  onReact
+  onCopy
 }) {
   const theme = usePoolseTheme();
   const items = [];
-  if (onReact) items.push({ label: "React", icon: "emoji", onPress: onReact });
   if (onReply) items.push({ label: "Reply", icon: "reply", onPress: onReply });
   if (onQuote) items.push({ label: "Quote reply", icon: "reply", onPress: onQuote });
   if (onReplyInThread)
@@ -1131,11 +1892,12 @@ function MessageActions({
   if (isSelf && onEdit) items.push({ label: "Edit", icon: "edit", onPress: onEdit });
   if (isSelf && onDelete)
     items.push({ label: "Delete", icon: "trash", onPress: onDelete, danger: true });
-  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles8.backdrop, onPress: onClose, children: /* @__PURE__ */ jsx(
+  const showEmojiRow = !!onPickReaction && emojis.length > 0;
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles12.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs(
     View,
     {
       style: [
-        styles8.sheet,
+        styles12.sheet,
         {
           backgroundColor: theme.colors.surface,
           borderTopLeftRadius: theme.radii.lg,
@@ -1143,42 +1905,78 @@ function MessageActions({
         },
         theme.shadows.lg
       ],
-      children: items.map((item) => /* @__PURE__ */ jsxs(Pressable, { onPress: item.onPress, style: styles8.item, children: [
-        /* @__PURE__ */ jsx(
-          PoolseIcon,
-          {
-            name: item.icon,
-            size: 18,
-            color: item.danger ? theme.colors.error : theme.colors.ink2
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Text,
+      children: [
+        showEmojiRow ? /* @__PURE__ */ jsx(View, { style: [styles12.emojiRow, { borderBottomColor: theme.colors.border }], children: emojis.map((emoji) => /* @__PURE__ */ jsx(
+          Pressable,
           {
-            style: [
-              styles8.itemText,
-              {
-                color: item.danger ? theme.colors.error : theme.colors.ink,
-                fontFamily: theme.type.fontBody
-              }
-            ],
-            children: item.label
-          }
-        )
-      ] }, item.label))
+            onPress: () => {
+              onPickReaction(emoji);
+              onClose();
+            },
+            style: styles12.emojiBtn,
+            hitSlop: 6,
+            accessibilityLabel: `React with ${emoji}`,
+            children: /* @__PURE__ */ jsx(Text, { style: styles12.emoji, children: emoji })
+          },
+          emoji
+        )) }) : null,
+        items.map((item) => /* @__PURE__ */ jsxs(Pressable, { onPress: item.onPress, style: styles12.item, children: [
+          /* @__PURE__ */ jsx(
+            PoolseIcon,
+            {
+              name: item.icon,
+              size: 18,
+              color: item.danger ? theme.colors.error : theme.colors.ink2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                styles12.itemText,
+                {
+                  color: item.danger ? theme.colors.error : theme.colors.ink,
+                  fontFamily: theme.type.fontBody
+                }
+              ],
+              children: item.label
+            }
+          )
+        ] }, item.label))
+      ]
     }
   ) }) });
 }
-var styles8 = StyleSheet.create({
+var styles12 = StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.35)",
     justifyContent: "flex-end"
   },
   sheet: {
-    paddingVertical: 8,
+    paddingTop: 8,
     paddingBottom: 24
   },
+  emojiRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-around",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    marginBottom: 6
+  },
+  emojiBtn: {
+    paddingHorizontal: 6,
+    paddingVertical: 6,
+    borderRadius: 999,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  emoji: {
+    fontSize: 30,
+    lineHeight: 36
+  },
   item: {
     flexDirection: "row",
     alignItems: "center",
@@ -1193,88 +1991,341 @@ var styles8 = StyleSheet.create({
 });
 function AttachmentPreview({ attachment, onPress, maxWidth = 280 }) {
   const theme = usePoolseTheme();
-  const isImage = (attachment.content_type ?? "").startsWith("image/");
+  const isImage = (attachment.content_type ?? "").startsWith("image/");
+  const { url } = useAttachmentUrl(attachment.id);
+  if (isImage) {
+    return /* @__PURE__ */ jsx(Pressable, { onPress, disabled: !onPress, children: url ? /* @__PURE__ */ jsx(
+      Image,
+      {
+        source: { uri: url },
+        style: {
+          width: maxWidth,
+          height: 200,
+          borderRadius: theme.radii.md,
+          backgroundColor: theme.colors.surface2
+        },
+        resizeMode: "cover",
+        accessible: true,
+        accessibilityLabel: attachment.original_filename ?? "attachment image"
+      }
+    ) : /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles13.imagePlaceholder,
+          {
+            width: maxWidth,
+            height: 200,
+            borderRadius: theme.radii.md,
+            backgroundColor: theme.colors.surface2
+          }
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      onPress,
+      disabled: !onPress,
+      style: [
+        styles13.fileCard,
+        {
+          backgroundColor: theme.colors.surface2,
+          borderColor: theme.colors.border,
+          borderRadius: theme.radii.md
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 18, color: theme.colors.ink2 }),
+        /* @__PURE__ */ jsxs(View, { style: { flex: 1, marginLeft: 8 }, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [styles13.fileName, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+              numberOfLines: 1,
+              children: attachment.original_filename ?? "file"
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: [styles13.fileSize, { color: theme.colors.ink3 }], children: formatBytes2(attachment.byte_size) })
+        ] })
+      ]
+    }
+  );
+}
+function formatBytes2(n) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  if (n < 1024 * 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`;
+  return `${(n / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+var styles13 = StyleSheet.create({
+  imagePlaceholder: {},
+  fileCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 8,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  fileName: {
+    fontSize: 13,
+    fontWeight: "500"
+  },
+  fileSize: {
+    fontSize: 11
+  }
+});
+function ImageMosaic({ images, maxWidth, radius }) {
+  const theme = usePoolseTheme();
+  const r = radius ?? theme.radii.md;
+  const [viewerIndex, setViewerIndex] = useState(null);
+  if (images.length === 0) return null;
+  const visible = images.slice(0, 4);
+  const overflow = images.length > 4 ? images.length - 4 : 0;
+  const n = visible.length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles14.root,
+          {
+            borderRadius: r,
+            ...maxWidth ? { maxWidth } : {}
+          }
+        ],
+        children: [
+          n === 1 ? /* @__PURE__ */ jsx(
+            Tile,
+            {
+              attachment: visible[0],
+              style: styles14.tileFull,
+              onPress: () => setViewerIndex(0),
+              overlay: null
+            }
+          ) : null,
+          n === 2 ? /* @__PURE__ */ jsxs(View, { style: styles14.rowEven, children: [
+            /* @__PURE__ */ jsx(
+              Tile,
+              {
+                attachment: visible[0],
+                style: styles14.tileHalfSquare,
+                onPress: () => setViewerIndex(0),
+                overlay: null
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Tile,
+              {
+                attachment: visible[1],
+                style: styles14.tileHalfSquare,
+                onPress: () => setViewerIndex(1),
+                overlay: null
+              }
+            )
+          ] }) : null,
+          n === 3 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Tile,
+              {
+                attachment: visible[0],
+                style: styles14.tileHero,
+                onPress: () => setViewerIndex(0),
+                overlay: null
+              }
+            ),
+            /* @__PURE__ */ jsxs(View, { style: [styles14.rowEven, { marginTop: 2 }], children: [
+              /* @__PURE__ */ jsx(
+                Tile,
+                {
+                  attachment: visible[1],
+                  style: styles14.tileHalfSquare,
+                  onPress: () => setViewerIndex(1),
+                  overlay: null
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tile,
+                {
+                  attachment: visible[2],
+                  style: styles14.tileHalfSquare,
+                  onPress: () => setViewerIndex(2),
+                  overlay: null
+                }
+              )
+            ] })
+          ] }) : null,
+          n === 4 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(View, { style: styles14.rowEven, children: [
+              /* @__PURE__ */ jsx(
+                Tile,
+                {
+                  attachment: visible[0],
+                  style: styles14.tileHalfSquare,
+                  onPress: () => setViewerIndex(0),
+                  overlay: null
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tile,
+                {
+                  attachment: visible[1],
+                  style: styles14.tileHalfSquare,
+                  onPress: () => setViewerIndex(1),
+                  overlay: null
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(View, { style: [styles14.rowEven, { marginTop: 2 }], children: [
+              /* @__PURE__ */ jsx(
+                Tile,
+                {
+                  attachment: visible[2],
+                  style: styles14.tileHalfSquare,
+                  onPress: () => setViewerIndex(2),
+                  overlay: null
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tile,
+                {
+                  attachment: visible[3],
+                  style: styles14.tileHalfSquare,
+                  onPress: () => setViewerIndex(3),
+                  overlay: overflow > 0 ? `+${overflow}` : null
+                }
+              )
+            ] })
+          ] }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible: viewerIndex !== null,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: () => setViewerIndex(null),
+        children: viewerIndex !== null ? /* @__PURE__ */ jsx(
+          FullScreenViewer,
+          {
+            attachment: images[viewerIndex],
+            onClose: () => setViewerIndex(null)
+          }
+        ) : null
+      }
+    )
+  ] });
+}
+function Tile({
+  attachment,
+  style,
+  overlay,
+  onPress
+}) {
+  const theme = usePoolseTheme();
   const { url } = useAttachmentUrl(attachment.id);
-  if (isImage) {
-    return /* @__PURE__ */ jsx(Pressable, { onPress, disabled: !onPress, children: url ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: [styles14.tileBase, style], children: [
+    url ? /* @__PURE__ */ jsx(
       Image,
       {
         source: { uri: url },
-        style: {
-          width: maxWidth,
-          height: 200,
-          borderRadius: theme.radii.md,
-          backgroundColor: theme.colors.surface2
-        },
+        style: [styles14.tileImage, { backgroundColor: theme.colors.surface2 }],
         resizeMode: "cover",
         accessible: true,
-        accessibilityLabel: attachment.original_filename ?? "attachment image"
+        accessibilityLabel: attachment.original_filename ?? "image"
       }
-    ) : /* @__PURE__ */ jsx(
-      View,
+    ) : /* @__PURE__ */ jsx(View, { style: [styles14.tileImage, { backgroundColor: theme.colors.surface2 }] }),
+    overlay ? /* @__PURE__ */ jsx(View, { style: styles14.overflow, children: /* @__PURE__ */ jsx(Text, { style: styles14.overflowText, children: overlay }) }) : null
+  ] });
+}
+function FullScreenViewer({
+  attachment,
+  onClose
+}) {
+  const { url } = useAttachmentUrl(attachment.id);
+  const { width, height } = Dimensions.get("window");
+  return /* @__PURE__ */ jsxs(Pressable, { style: styles14.viewer, onPress: onClose, children: [
+    url ? /* @__PURE__ */ jsx(
+      Image,
       {
-        style: [
-          styles9.imagePlaceholder,
-          {
-            width: maxWidth,
-            height: 200,
-            borderRadius: theme.radii.md,
-            backgroundColor: theme.colors.surface2
-          }
-        ]
+        source: { uri: url },
+        style: { width, height },
+        resizeMode: "contain",
+        accessible: true,
+        accessibilityLabel: attachment.original_filename ?? "image"
       }
-    ) });
-  }
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      onPress,
-      disabled: !onPress,
-      style: [
-        styles9.fileCard,
-        {
-          backgroundColor: theme.colors.surface2,
-          borderColor: theme.colors.border,
-          borderRadius: theme.radii.md
-        }
-      ],
-      children: [
-        /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 18, color: theme.colors.ink2 }),
-        /* @__PURE__ */ jsxs(View, { style: { flex: 1, marginLeft: 8 }, children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              style: [styles9.fileName, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
-              numberOfLines: 1,
-              children: attachment.original_filename ?? "file"
-            }
-          ),
-          /* @__PURE__ */ jsx(Text, { style: [styles9.fileSize, { color: theme.colors.ink3 }], children: formatBytes(attachment.byte_size) })
-        ] })
-      ]
-    }
-  );
-}
-function formatBytes(n) {
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
-  if (n < 1024 * 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`;
-  return `${(n / 1024 / 1024 / 1024).toFixed(1)} GB`;
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: onClose,
+        hitSlop: 12,
+        style: styles14.closeBtn,
+        accessibilityLabel: "Close viewer",
+        children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 20, color: "#ffffff" })
+      }
+    )
+  ] });
 }
-var styles9 = StyleSheet.create({
-  imagePlaceholder: {},
-  fileCard: {
+var styles14 = StyleSheet.create({
+  root: {
+    width: "100%",
+    overflow: "hidden",
+    marginBottom: 4
+  },
+  rowEven: {
     flexDirection: "row",
+    gap: 2
+  },
+  tileBase: {
+    overflow: "hidden"
+  },
+  // n=1: full bleed at the bubble's available width, 16:10 aspect.
+  tileFull: {
+    width: "100%",
+    aspectRatio: 16 / 10
+  },
+  // n=2 / n=4 (per row): two equal squares side-by-side.
+  tileHalfSquare: {
+    flex: 1,
+    aspectRatio: 1
+  },
+  // n=3 hero: full-bleed top tile, 16:9.
+  tileHero: {
+    width: "100%",
+    aspectRatio: 16 / 9
+  },
+  tileImage: {
+    width: "100%",
+    height: "100%"
+  },
+  overflow: {
+    position: "absolute",
+    inset: 0,
+    backgroundColor: "rgba(0,0,0,0.55)",
     alignItems: "center",
-    padding: 8,
-    borderWidth: StyleSheet.hairlineWidth
+    justifyContent: "center"
   },
-  fileName: {
-    fontSize: 13,
-    fontWeight: "500"
+  overflowText: {
+    color: "#ffffff",
+    fontWeight: "700",
+    fontSize: 22
   },
-  fileSize: {
-    fontSize: 11
+  viewer: {
+    flex: 1,
+    backgroundColor: "#000000",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  closeBtn: {
+    position: "absolute",
+    top: 48,
+    right: 16,
+    padding: 8,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    borderRadius: 20
   }
 });
 function MessageBubble({
@@ -1290,8 +2341,11 @@ function MessageBubble({
   showAttachments = true
 }) {
   const theme = usePoolseTheme();
+  const { width: screenWidth } = useWindowDimensions();
   const isSelf = currentUserId !== null && message.sender_id === currentUserId;
   const [expanded, setExpanded] = useState(false);
+  const bubbleMaxWidth = Math.floor(screenWidth * 0.78);
+  const contentMaxWidth = bubbleMaxWidth - 28;
   const sender = useUser(!isSelf ? message.sender_external_id : null);
   const senderFallbackName = message.sender_external_id ?? "Unknown";
   const senderLabel = sender.profile?.displayName ?? (message.sender_external_id ? labelFor?.(message.sender_external_id) ?? senderFallbackName : senderFallbackName);
@@ -1321,17 +2375,21 @@ function MessageBubble({
     View,
     {
       style: [
-        styles10.wrap,
+        styles15.wrap,
         {
           alignSelf: isSelf ? "flex-end" : "flex-start",
-          maxWidth: "80%"
+          // Pixel maxWidth (not percentage) so single-line and
+          // multi-line bubbles land at the same right edge — was
+          // 88% of the bubbleCol which produced inconsistent right
+          // padding when the row padding changed.
+          maxWidth: bubbleMaxWidth
         }
       ],
       children: /* @__PURE__ */ jsxs(
         View,
         {
           style: [
-            styles10.bubble,
+            styles15.bubble,
             {
               backgroundColor: bubbleColor,
               borderColor: isSelf ? "transparent" : theme.colors.border,
@@ -1340,13 +2398,20 @@ function MessageBubble({
               borderTopRightRadius: radii2.topRight,
               borderBottomLeftRadius: radii2.bottomLeft,
               borderBottomRightRadius: radii2.bottomRight,
-              paddingHorizontal: theme.spacing.md,
-              paddingVertical: theme.spacing.sm
+              // Slightly more breathing room — 14/10 reads tighter and
+              // matches the iMessage / WhatsApp bubble density.
+              paddingHorizontal: 14,
+              paddingVertical: 10,
+              // Floor the bubble at a width that always fits the meta row
+              // ("edited HH:MM ✓✓" → ~110px). Without this, short bodies
+              // like "ok" produce a bubble too narrow for the meta to lay
+              // out, and `edited` or the time gets clipped.
+              minWidth: isSelf && isEdited ? 130 : 90
             },
             theme.shadows.sm
           ],
           children: [
-            showSenderName && !isSelf && (groupPosition === "first" || groupPosition === "standalone") ? /* @__PURE__ */ jsx(Text, { style: [styles10.senderName, { color: senderTint, fontFamily: theme.type.fontBody }], children: senderLabel }) : null,
+            showSenderName && !isSelf && (groupPosition === "first" || groupPosition === "standalone") ? /* @__PURE__ */ jsx(Text, { style: [styles15.senderName, { color: senderTint, fontFamily: theme.type.fontBody }], children: senderLabel }) : null,
             message.quoted_message ? /* @__PURE__ */ jsx(
               QuotedCard,
               {
@@ -1356,13 +2421,13 @@ function MessageBubble({
                 ...onQuotedClick ? { onPress: () => onQuotedClick(message.quoted_message.id) } : {}
               }
             ) : null,
-            renderAttachments && images.length > 0 ? /* @__PURE__ */ jsx(View, { style: { gap: theme.spacing.xs, marginBottom: theme.spacing.xs }, children: images.map((att) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment: att }, att.id)) }) : null,
-            renderAttachments && files.length > 0 ? /* @__PURE__ */ jsx(View, { style: { gap: theme.spacing.xs, marginBottom: theme.spacing.xs }, children: files.map((att) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment: att }, att.id)) }) : null,
+            renderAttachments && images.length > 0 ? /* @__PURE__ */ jsx(ImageMosaic, { images, maxWidth: contentMaxWidth }) : null,
+            renderAttachments && files.length > 0 ? /* @__PURE__ */ jsx(View, { style: { gap: theme.spacing.xs, marginBottom: theme.spacing.xs }, children: files.map((att) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment: att, maxWidth: contentMaxWidth }, att.id)) }) : null,
             body.length > 0 ? /* @__PURE__ */ jsx(
               Text,
               {
                 style: [
-                  styles10.body,
+                  styles15.body,
                   {
                     color: isDeleted ? theme.colors.ink3 : textColor,
                     fontFamily: theme.type.fontBody,
@@ -1378,34 +2443,49 @@ function MessageBubble({
               Text,
               {
                 style: [
-                  styles10.readMore,
+                  styles15.readMore,
                   { color: isSelf ? theme.colors.onBrand : theme.colors.brand }
                 ],
                 children: expanded ? "Show less" : "Read more"
               }
             ) }) : null,
-            /* @__PURE__ */ jsxs(View, { style: styles10.metaRow, children: [
-              isEdited ? /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsxs(View, { style: styles15.metaRow, children: [
+              isEdited ? /* @__PURE__ */ jsx(
                 Text,
                 {
-                  style: [styles10.meta, { color: isSelf ? theme.colors.onBrand : theme.colors.ink3 }],
-                  children: [
-                    "edited \xB7",
-                    " "
-                  ]
+                  style: [
+                    styles15.editedTag,
+                    {
+                      color: isSelf ? theme.colors.onBrand : theme.colors.ink3,
+                      opacity: 0.7
+                    }
+                  ],
+                  children: "edited"
                 }
               ) : null,
-              /* @__PURE__ */ jsx(Text, { style: [styles10.meta, { color: isSelf ? theme.colors.onBrand : theme.colors.ink3 }], children: time }),
-              isSelf && readState ? /* @__PURE__ */ jsx(View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [
+                    styles15.meta,
+                    {
+                      color: isSelf ? theme.colors.onBrand : theme.colors.ink3,
+                      opacity: isSelf ? 0.85 : 1
+                    }
+                  ],
+                  children: time
+                }
+              ),
+              isSelf && readState ? /* @__PURE__ */ jsx(View, { style: styles15.readTick, children: /* @__PURE__ */ jsx(
                 PoolseIcon,
                 {
                   name: readState === "read" ? "check-double" : "check",
-                  size: 12,
+                  size: 13,
                   color: theme.colors.onBrand
                 }
               ) }) : null
             ] }),
-            actionsTrigger ? /* @__PURE__ */ jsx(View, { style: styles10.actionsSlot, children: actionsTrigger }) : null
+            actionsTrigger ? /* @__PURE__ */ jsx(View, { style: styles15.actionsSlot, children: actionsTrigger }) : null
           ]
         }
       )
@@ -1429,84 +2509,241 @@ function QuotedCard({
       onPress,
       disabled: !onPress,
       style: [
-        styles10.quoted,
+        styles15.quoted,
         {
           backgroundColor: bg,
           borderLeftColor: accent
         }
       ],
       children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles10.quotedSender, { color: accent }], children: senderName }),
-        /* @__PURE__ */ jsx(Text, { style: [styles10.quotedBody, { color: txt }], numberOfLines: 2, children: quoted.body ?? "\u2026" })
+        /* @__PURE__ */ jsx(Text, { style: [styles15.quotedSender, { color: accent }], children: senderName }),
+        /* @__PURE__ */ jsx(Text, { style: [styles15.quotedBody, { color: txt }], numberOfLines: 2, children: quoted.body ?? "\u2026" })
       ]
     }
-  );
-}
-function isImageContentType(ct) {
-  if (!ct) return false;
-  return ct.startsWith("image/");
-}
-function formatTime(iso) {
-  try {
-    const d = new Date(iso);
-    return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
-  } catch {
-    return "";
-  }
+  );
+}
+function isImageContentType(ct) {
+  if (!ct) return false;
+  return ct.startsWith("image/");
+}
+function formatTime(iso) {
+  try {
+    const d = new Date(iso);
+    const now = /* @__PURE__ */ new Date();
+    const sameDay = isSameDay(d, now);
+    const time = d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+    if (sameDay) return time;
+    const yesterday = new Date(now);
+    yesterday.setDate(now.getDate() - 1);
+    if (isSameDay(d, yesterday)) return `Yesterday ${time}`;
+    const diffMs = now.getTime() - d.getTime();
+    const diffDays = Math.floor(diffMs / 864e5);
+    if (diffDays < 7) {
+      return `${d.toLocaleDateString([], { weekday: "short" })} ${time}`;
+    }
+    return d.toLocaleDateString([], { month: "short", day: "numeric" });
+  } catch {
+    return "";
+  }
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+var styles15 = StyleSheet.create({
+  wrap: {
+    marginBottom: 2
+  },
+  bubble: {
+    position: "relative"
+  },
+  senderName: {
+    fontSize: 12,
+    fontWeight: "600",
+    marginBottom: 2
+  },
+  body: {
+    flexShrink: 1
+  },
+  readMore: {
+    fontSize: 12,
+    fontWeight: "600",
+    marginTop: 4
+  },
+  metaRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    marginTop: 6,
+    gap: 5,
+    flexShrink: 0
+  },
+  meta: {
+    fontSize: 11,
+    fontVariant: ["tabular-nums"],
+    includeFontPadding: false
+  },
+  editedTag: {
+    fontSize: 10,
+    fontStyle: "italic",
+    letterSpacing: 0.1
+  },
+  readTick: {
+    marginLeft: 2,
+    marginTop: 1
+  },
+  actionsSlot: {
+    position: "absolute",
+    top: 4,
+    right: 4
+  },
+  quoted: {
+    borderLeftWidth: 3,
+    paddingLeft: 8,
+    paddingVertical: 4,
+    paddingRight: 6,
+    marginBottom: 6,
+    borderRadius: 4
+  },
+  quotedSender: {
+    fontSize: 12,
+    fontWeight: "600",
+    marginBottom: 2
+  },
+  quotedBody: {
+    fontSize: 12,
+    opacity: 0.85
+  }
+});
+var DEFAULT_EMOJIS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F389}", "\u{1F64F}", "\u{1F525}"];
+function ReactionStrip({
+  messageId,
+  conversationId,
+  meId,
+  initialReactions
+}) {
+  const theme = usePoolseTheme();
+  const { reactions, addReaction, removeReaction } = useReactions(messageId, {
+    conversationId,
+    currentUserId: meId,
+    ...initialReactions ? { initialReactions } : {}
+  });
+  const entries = Object.entries(reactions);
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsx(View, { style: styles16.strip, children: entries.map(([emoji, userIds]) => {
+    const userArr = Array.isArray(userIds) ? userIds : [];
+    const meReacted = meId !== null && userArr.includes(meId);
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        onPress: () => meReacted ? removeReaction(emoji) : addReaction(emoji),
+        style: [
+          styles16.chip,
+          {
+            backgroundColor: meReacted ? theme.colors.brandSoft : theme.colors.surface2,
+            borderColor: meReacted ? theme.colors.brand : theme.colors.border
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: styles16.emoji, children: emoji }),
+          /* @__PURE__ */ jsx(Text, { style: [styles16.count, { color: theme.colors.ink2 }], children: userArr.length })
+        ]
+      },
+      emoji
+    );
+  }) });
+}
+function ReactionPicker({
+  visible,
+  onClose,
+  onPick,
+  emojis = DEFAULT_EMOJIS
+}) {
+  const theme = usePoolseTheme();
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles16.backdrop, onPress: onClose, children: /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        styles16.sheet,
+        {
+          backgroundColor: theme.colors.surface,
+          borderRadius: theme.radii.lg
+        },
+        theme.shadows.lg
+      ],
+      children: emojis.map((emoji) => /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          style: styles16.emojiBtn,
+          onPress: () => {
+            onPick(emoji);
+            onClose();
+          },
+          children: /* @__PURE__ */ jsx(Text, { style: styles16.bigEmoji, children: emoji })
+        },
+        emoji
+      ))
+    }
+  ) }) });
 }
-var styles10 = StyleSheet.create({
-  wrap: {
-    marginBottom: 4
-  },
-  bubble: {
-    position: "relative"
+var styles16 = StyleSheet.create({
+  strip: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 4,
+    marginTop: 2
   },
-  senderName: {
-    fontSize: 12,
-    fontWeight: "600",
-    marginBottom: 2
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 9,
+    paddingVertical: 4,
+    borderRadius: 14,
+    borderWidth: 1,
+    gap: 5,
+    minHeight: 26,
+    // Subtle elevation so chips lift off the surface
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.06,
+    shadowRadius: 2,
+    elevation: 1
   },
-  body: {
-    flexShrink: 1
+  emoji: {
+    fontSize: 15,
+    lineHeight: 18
   },
-  readMore: {
+  count: {
     fontSize: 12,
     fontWeight: "600",
-    marginTop: 4
+    fontVariant: ["tabular-nums"]
   },
-  metaRow: {
-    flexDirection: "row",
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    justifyContent: "center",
     alignItems: "center",
-    justifyContent: "flex-end",
-    marginTop: 4
-  },
-  meta: {
-    fontSize: 10,
-    opacity: 0.7
+    paddingHorizontal: 24
   },
-  actionsSlot: {
-    position: "absolute",
-    top: 4,
-    right: 4
-  },
-  quoted: {
-    borderLeftWidth: 3,
-    paddingLeft: 8,
-    paddingVertical: 4,
-    paddingRight: 6,
-    marginBottom: 6,
-    borderRadius: 4
+  sheet: {
+    flexDirection: "row",
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    gap: 4,
+    alignItems: "center"
   },
-  quotedSender: {
-    fontSize: 12,
-    fontWeight: "600",
-    marginBottom: 2
+  emojiBtn: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 999,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  quotedBody: {
-    fontSize: 12,
-    opacity: 0.85
+  bigEmoji: {
+    fontSize: 32,
+    lineHeight: 38
   }
 });
+var SWIPE_REPLY_THRESHOLD = 50;
 function MessageRow({
   msg,
   meId,
@@ -1534,12 +2771,88 @@ function MessageRow({
   const theme = usePoolseTheme();
   const isSelf = meId !== null && msg.sender_id === meId;
   const [actionsOpen, setActionsOpen] = useState(false);
+  const reactionsApi = useReactions(msg.id, {
+    conversationId: msg.conversation_id,
+    currentUserId: meId,
+    ...msg.reactions ? { initialReactions: msg.reactions } : {}
+  });
+  const translateX = useRef(new Animated.Value(0)).current;
+  const swipeEnabled = quotations && !!onQuote && !editing;
+  const panResponder = useMemo(
+    () => PanResponder.create({
+      // Tap / long-press still go to the inner Pressable.
+      onStartShouldSetPanResponder: () => false,
+      onStartShouldSetPanResponderCapture: () => false,
+      // Capture-phase claim: we intercept the gesture BEFORE the
+      // child Pressable as soon as the move shows clear horizontal
+      // intent. Without capture-phase, the Pressable's touch handling
+      // wins first and the pan never starts (this is why self-bubble
+      // left swipes felt totally dead — the Pressable was attached
+      // to a touch that started with the user's finger over the
+      // bubble center, and we never got a turn).
+      onMoveShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponderCapture: (_, g) => {
+        if (!swipeEnabled) return false;
+        return Math.abs(g.dx) > 4 && Math.abs(g.dx) > Math.abs(g.dy);
+      },
+      // Don't surrender the gesture mid-swipe (e.g. parent FlatList
+      // asking for it back) — once we're translating the bubble we
+      // hold on until release.
+      onPanResponderTerminationRequest: () => false,
+      // 1:1 finger-follow up to the threshold, then square-root
+      // damping past it so the bubble never slides off-screen.
+      // Matches iMessage / WhatsApp — feels weightless during the
+      // committed range and stiffens once you've already triggered.
+      onPanResponderMove: (_, g) => {
+        const dx = isSelf ? Math.min(0, g.dx) : Math.max(0, g.dx);
+        const abs = Math.abs(dx);
+        let translated;
+        if (abs <= SWIPE_REPLY_THRESHOLD) {
+          translated = dx;
+        } else {
+          const excess = abs - SWIPE_REPLY_THRESHOLD;
+          const dampened = SWIPE_REPLY_THRESHOLD + Math.sqrt(excess * 6);
+          translated = dx < 0 ? -dampened : dampened;
+        }
+        translateX.setValue(translated);
+      },
+      onPanResponderRelease: (_, g) => {
+        const past = Math.abs(g.dx) >= SWIPE_REPLY_THRESHOLD;
+        if (past && onQuote) onQuote();
+        Animated.spring(translateX, {
+          toValue: 0,
+          useNativeDriver: false,
+          speed: 28,
+          bounciness: 4
+        }).start();
+      },
+      onPanResponderTerminate: () => {
+        Animated.spring(translateX, {
+          toValue: 0,
+          useNativeDriver: false,
+          speed: 28,
+          bounciness: 4
+        }).start();
+      }
+    }),
+    [swipeEnabled, isSelf, onQuote, translateX]
+  );
+  const replyIconOpacity = translateX.interpolate({
+    inputRange: isSelf ? [-SWIPE_REPLY_THRESHOLD, -SWIPE_REPLY_THRESHOLD / 2, 0] : [0, SWIPE_REPLY_THRESHOLD / 2, SWIPE_REPLY_THRESHOLD],
+    outputRange: isSelf ? [1, 0.3, 0] : [0, 0.3, 1],
+    extrapolate: "clamp"
+  });
+  const replyIconScale = translateX.interpolate({
+    inputRange: isSelf ? [-SWIPE_REPLY_THRESHOLD, 0] : [0, SWIPE_REPLY_THRESHOLD],
+    outputRange: isSelf ? [1, 0.5] : [0.5, 1],
+    extrapolate: "clamp"
+  });
   const showAvatarSlot = showAvatar && !isSelf;
   const showAvatarRender = showAvatarSlot && (groupPosition === "last" || groupPosition === "standalone");
   const avatarUrl = avatarFor && msg.sender_external_id ? avatarFor(msg.sender_external_id) : null;
   const senderLabel = msg.sender_external_id && labelFor ? labelFor(msg.sender_external_id) : msg.sender_external_id ?? null;
-  return /* @__PURE__ */ jsxs(View, { style: [styles11.row, { alignSelf: isSelf ? "flex-end" : "flex-start" }], children: [
-    showAvatarSlot ? /* @__PURE__ */ jsx(View, { style: styles11.avatarSlot, children: showAvatarRender ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(View, { style: [styles17.row, { alignSelf: isSelf ? "flex-end" : "flex-start" }], children: [
+    showAvatarSlot ? /* @__PURE__ */ jsx(View, { style: styles17.avatarSlot, children: showAvatarRender ? /* @__PURE__ */ jsx(
       Avatar,
       {
         src: avatarUrl ?? null,
@@ -1548,68 +2861,86 @@ function MessageRow({
         size: "sm"
       }
     ) : null }) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles11.bubbleCol, children: [
-      /* @__PURE__ */ jsx(
-        Pressable,
+    /* @__PURE__ */ jsxs(View, { style: styles17.bubbleCol, children: [
+      swipeEnabled ? /* @__PURE__ */ jsx(
+        Animated.View,
         {
-          onLongPress: () => actions && setActionsOpen(true),
-          accessibilityRole: "button",
-          accessibilityLabel: "Message actions",
-          children: editing ? /* @__PURE__ */ jsx(
-            EditableMessageBubble,
+          pointerEvents: "none",
+          style: [
+            styles17.replyHint,
+            isSelf ? styles17.replyHintRight : styles17.replyHintLeft,
             {
-              message: msg,
-              currentUserId: meId,
-              onCancel: onCancelEdit ?? (() => void 0),
-              onSave: onSaveEdit ?? (() => void 0)
+              opacity: replyIconOpacity,
+              transform: [{ scale: replyIconScale }],
+              backgroundColor: theme.colors.surface2
             }
-          ) : /* @__PURE__ */ jsx(
-            MessageBubble,
+          ],
+          children: /* @__PURE__ */ jsx(PoolseIcon, { name: "reply", size: 16, color: theme.colors.brand })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          ...swipeEnabled ? panResponder.panHandlers : {},
+          style: { transform: [{ translateX }] },
+          children: /* @__PURE__ */ jsx(
+            Pressable,
             {
-              message: msg,
-              currentUserId: meId,
-              ...readState ? { readState } : {},
-              ...labelFor ? { labelFor } : {},
-              ...onQuotedClick ? { onQuotedClick } : {},
-              groupPosition,
-              maxBodyLength,
-              showSenderName,
-              showAttachments: attachments,
-              actionsTrigger: actions ? /* @__PURE__ */ jsx(Pressable, { onPress: () => setActionsOpen(true), hitSlop: 8, children: /* @__PURE__ */ jsx(
-                PoolseIcon,
+              onLongPress: () => {
+                if (!actions) return;
+                setActionsOpen(true);
+              },
+              accessibilityRole: "button",
+              accessibilityLabel: "Message actions",
+              children: editing ? /* @__PURE__ */ jsx(
+                EditableMessageBubble,
                 {
-                  name: "chevron-down",
-                  size: 14,
-                  color: isSelf ? theme.colors.onBrand : theme.colors.ink3
+                  message: msg,
+                  currentUserId: meId,
+                  onCancel: onCancelEdit ?? (() => void 0),
+                  onSave: onSaveEdit ?? (() => void 0)
                 }
-              ) }) : null
+              ) : /* @__PURE__ */ jsx(
+                MessageBubble,
+                {
+                  message: msg,
+                  currentUserId: meId,
+                  ...readState ? { readState } : {},
+                  ...labelFor ? { labelFor } : {},
+                  ...onQuotedClick ? { onQuotedClick } : {},
+                  groupPosition,
+                  maxBodyLength,
+                  showSenderName,
+                  showAttachments: attachments,
+                  actionsTrigger: actions ? /* @__PURE__ */ jsx(Pressable, { onPress: () => setActionsOpen(true), hitSlop: 8, children: /* @__PURE__ */ jsx(
+                    PoolseIcon,
+                    {
+                      name: "chevron-down",
+                      size: 14,
+                      color: isSelf ? theme.colors.onBrand : theme.colors.ink3
+                    }
+                  ) }) : null
+                }
+              )
             }
           )
         }
       ),
-      threads && (msg.reply_count ?? 0) > 0 && onOpenThread ? /* @__PURE__ */ jsx(Pressable, { onPress: onOpenThread, style: styles11.threadPill, children: /* @__PURE__ */ jsxs(Text, { style: [styles11.threadPillText, { color: theme.colors.brand }], children: [
+      threads && (msg.reply_count ?? 0) > 0 && onOpenThread ? /* @__PURE__ */ jsx(Pressable, { onPress: onOpenThread, style: styles17.threadPill, children: /* @__PURE__ */ jsxs(Text, { style: [styles17.threadPillText, { color: theme.colors.brand }], children: [
         "\u{1F4AC} ",
         msg.reply_count,
         " ",
         msg.reply_count === 1 ? "reply" : "replies"
       ] }) }) : null,
-      reactions && msg.reactions && Object.keys(msg.reactions).length > 0 ? /* @__PURE__ */ jsx(View, { style: styles11.reactionsRow, children: Object.entries(msg.reactions).map(([emoji, userIds]) => /* @__PURE__ */ jsxs(
-        View,
+      reactions ? /* @__PURE__ */ jsx(View, { style: [styles17.reactionsRow, { alignSelf: isSelf ? "flex-end" : "flex-start" }], children: /* @__PURE__ */ jsx(
+        ReactionStrip,
         {
-          style: [
-            styles11.reactionChip,
-            {
-              backgroundColor: theme.colors.surface2,
-              borderColor: theme.colors.border
-            }
-          ],
-          children: [
-            /* @__PURE__ */ jsx(Text, { style: styles11.reactionEmoji, children: emoji }),
-            /* @__PURE__ */ jsx(Text, { style: [styles11.reactionCount, { color: theme.colors.ink2 }], children: Array.isArray(userIds) ? userIds.length : 0 })
-          ]
-        },
-        emoji
-      )) }) : null
+          messageId: msg.id,
+          conversationId: msg.conversation_id,
+          meId,
+          ...msg.reactions ? { initialReactions: msg.reactions } : {}
+        }
+      ) }) : null
     ] }),
     actions && actionsOpen ? /* @__PURE__ */ jsx(
       MessageActions,
@@ -1617,6 +2948,13 @@ function MessageRow({
         visible: actionsOpen,
         onClose: () => setActionsOpen(false),
         isSelf,
+        ...reactions ? {
+          // Inline quick-react row at the top of the sheet —
+          // one tap = react + close, no second modal needed.
+          onPickReaction: (emoji) => {
+            void reactionsApi.addReaction(emoji);
+          }
+        } : {},
         ...onStartEdit ? {
           onEdit: () => {
             setActionsOpen(false);
@@ -1645,12 +2983,18 @@ function MessageRow({
     ) : null
   ] });
 }
-var styles11 = StyleSheet.create({
+var styles17 = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "flex-end",
-    marginVertical: 2,
-    paddingHorizontal: 8,
+    // Tighter vertical rhythm — was 2px each side (4px between rows)
+    // plus the bubble's 4px marginBottom = 8px. Now 1+1+2 = 4px,
+    // closer to iMessage / WhatsApp density.
+    marginVertical: 1,
+    // 10px on each side — tight enough to use the available width
+    // for content, loose enough to keep bubbles off the screen edge
+    // on every device.
+    paddingHorizontal: 10,
     maxWidth: "95%"
   },
   avatarSlot: {
@@ -1658,7 +3002,25 @@ var styles11 = StyleSheet.create({
     marginRight: 6
   },
   bubbleCol: {
-    flexShrink: 1
+    flexShrink: 1,
+    position: "relative"
+  },
+  replyHint: {
+    position: "absolute",
+    top: "50%",
+    marginTop: -16,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: -1
+  },
+  replyHintLeft: {
+    left: -44
+  },
+  replyHintRight: {
+    right: -44
   },
   threadPill: {
     alignSelf: "flex-start",
@@ -1671,111 +3033,224 @@ var styles11 = StyleSheet.create({
     fontWeight: "600"
   },
   reactionsRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    marginTop: 4,
-    gap: 4
-  },
-  reactionChip: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 12,
-    borderWidth: StyleSheet.hairlineWidth
-  },
-  reactionEmoji: {
-    fontSize: 13,
-    marginRight: 3
-  },
-  reactionCount: {
-    fontSize: 11,
-    fontWeight: "600"
+    marginTop: 2
   }
 });
+var SHEET_HEIGHT_FRACTION = 0.88;
 function ThreadView({
   visible,
   onClose,
   conversationId,
   rootMessage,
-  labelFor
+  labelFor,
+  avatarFor
+}) {
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: onClose,
+      statusBarTranslucent: true,
+      children: /* @__PURE__ */ jsx(UploadProvider, { children: /* @__PURE__ */ jsx(
+        ThreadSheet,
+        {
+          onClose,
+          conversationId,
+          rootMessage,
+          ...labelFor ? { labelFor } : {},
+          ...avatarFor ? { avatarFor } : {}
+        }
+      ) })
+    }
+  );
+}
+function ThreadSheet({
+  onClose,
+  conversationId,
+  rootMessage,
+  labelFor,
+  avatarFor
 }) {
   const theme = usePoolseTheme();
   const { me } = useMe();
   const meId = me?.id ?? null;
-  const { replies, sendReply, loadMore, hasMore } = useThread(conversationId, rootMessage.id);
-  return /* @__PURE__ */ jsx(Modal, { visible, animationType: "slide", onRequestClose: onClose, children: /* @__PURE__ */ jsxs(View, { style: [styles12.root, { backgroundColor: theme.colors.paper }], children: [
+  const {
+    replies,
+    sendReply,
+    edit,
+    delete: deleteReply,
+    loadMore,
+    hasMore
+  } = useThread(conversationId, rootMessage.id);
+  const { height: screenHeight } = useWindowDimensions();
+  const sheetHeight = Math.round(screenHeight * SHEET_HEIGHT_FRACTION);
+  const gutter = screenHeight - sheetHeight;
+  const { translateY, panHandlers } = useDismissableSheet({ onClose, sheetHeight });
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [editingId, setEditingId] = useState(null);
+  const renderReply = useCallback(
+    (msg) => /* @__PURE__ */ jsx(
+      MessageRow,
+      {
+        msg,
+        meId,
+        reactions: true,
+        attachments: true,
+        actions: true,
+        threads: false,
+        quotations: false,
+        editing: editingId === msg.id,
+        onStartEdit: () => setEditingId(msg.id),
+        onCancelEdit: () => setEditingId(null),
+        onSaveEdit: async (body) => {
+          await edit(msg.id, body);
+          setEditingId(null);
+        },
+        onDelete: () => {
+          void deleteReply(msg.id);
+        },
+        ...labelFor ? { labelFor } : {},
+        ...avatarFor ? { avatarFor } : {}
+      }
+    ),
+    [meId, editingId, edit, deleteReply, labelFor, avatarFor]
+  );
+  const rootRow = useMemo(
+    () => /* @__PURE__ */ jsx(
+      MessageRow,
+      {
+        msg: rootMessage,
+        meId,
+        reactions: true,
+        attachments: true,
+        actions: false,
+        threads: false,
+        quotations: false,
+        ...labelFor ? { labelFor } : {},
+        ...avatarFor ? { avatarFor } : {}
+      }
+    ),
+    [rootMessage, meId, labelFor, avatarFor]
+  );
+  return /* @__PURE__ */ jsxs(View, { style: styles18.modalRoot, children: [
+    /* @__PURE__ */ jsx(Pressable, { style: styles18.backdrop, onPress: onClose, accessibilityLabel: "Close thread" }),
     /* @__PURE__ */ jsxs(
-      View,
+      Animated.View,
       {
         style: [
-          styles12.header,
+          styles18.sheet,
           {
-            borderBottomColor: theme.colors.border,
-            backgroundColor: theme.colors.surface
-          }
+            height: sheetHeight,
+            backgroundColor: theme.colors.paper,
+            borderTopLeftRadius: theme.radii.xl,
+            borderTopRightRadius: theme.radii.xl,
+            transform: [{ translateY }]
+          },
+          theme.shadows.lg
         ],
         children: [
-          /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 8, style: styles12.closeBtn, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 18, color: theme.colors.ink }) }),
-          /* @__PURE__ */ jsx(
-            Text,
+          /* @__PURE__ */ jsxs(View, { ...panHandlers, children: [
+            /* @__PURE__ */ jsx(View, { style: styles18.dragHandle, children: /* @__PURE__ */ jsx(View, { style: [styles18.dragPill, { backgroundColor: theme.colors.ink3 }] }) }),
+            /* @__PURE__ */ jsxs(View, { style: [styles18.header, { borderBottomColor: theme.colors.border }], children: [
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  onPress: onClose,
+                  hitSlop: 16,
+                  style: [styles18.closeBtn, { backgroundColor: theme.colors.surface2 }],
+                  accessibilityLabel: "Close thread",
+                  children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 18, color: theme.colors.ink })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [
+                    styles18.title,
+                    { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }
+                  ],
+                  children: "Thread"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            KeyboardAvoidingView,
             {
-              style: [styles12.title, { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }],
-              children: "Thread"
+              style: styles18.kavBody,
+              behavior: Platform.OS === "ios" ? "padding" : "height",
+              keyboardVerticalOffset: Platform.OS === "ios" ? gutter : 0,
+              children: [
+                /* @__PURE__ */ jsx(View, { style: [styles18.rootPreview, { backgroundColor: theme.colors.surface2 }], children: rootRow }),
+                /* @__PURE__ */ jsx(View, { style: styles18.listWrap, children: /* @__PURE__ */ jsx(
+                  MessageList,
+                  {
+                    messages: replies,
+                    hasMore,
+                    onLoadMore: loadMore,
+                    renderItem: renderReply
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  MessageComposer,
+                  {
+                    onSend: async (body, opts) => {
+                      await sendReply({ body, ...opts });
+                    },
+                    placeholder: "Reply to thread\u2026",
+                    attachments: true,
+                    onAttachPress: () => setPickerOpen(true)
+                  }
+                )
+              ]
             }
-          )
+          ),
+          /* @__PURE__ */ jsx(AttachmentPicker, { visible: pickerOpen, onClose: () => setPickerOpen(false) })
         ]
       }
-    ),
-    /* @__PURE__ */ jsx(View, { style: [styles12.rootPreview, { backgroundColor: theme.colors.surface2 }], children: /* @__PURE__ */ jsx(
-      MessageBubble,
-      {
-        message: rootMessage,
-        currentUserId: meId,
-        ...labelFor ? { labelFor } : {}
-      }
-    ) }),
-    /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
-      MessageList,
-      {
-        messages: replies,
-        hasMore,
-        onLoadMore: loadMore,
-        renderItem: (msg) => /* @__PURE__ */ jsx(View, { style: { paddingHorizontal: 8 }, children: /* @__PURE__ */ jsx(
-          MessageBubble,
-          {
-            message: msg,
-            currentUserId: meId,
-            ...labelFor ? { labelFor } : {}
-          }
-        ) }, msg.id)
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      MessageComposer,
-      {
-        onSend: async (body, opts) => {
-          await sendReply({ body, ...opts });
-        },
-        placeholder: "Reply to thread\u2026"
-      }
     )
-  ] }) });
+  ] });
 }
-var styles12 = StyleSheet.create({
-  root: {
-    flex: 1
+var styles18 = StyleSheet.create({
+  modalRoot: {
+    flex: 1,
+    justifyContent: "flex-end"
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.4)"
+  },
+  sheet: {
+    overflow: "hidden"
+  },
+  dragHandle: {
+    alignItems: "center",
+    paddingTop: 8,
+    paddingBottom: 4
+  },
+  dragPill: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    opacity: 0.4
   },
   header: {
     flexDirection: "row",
     alignItems: "center",
     paddingHorizontal: 12,
-    paddingVertical: 12,
+    paddingTop: 6,
+    paddingBottom: 10,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    gap: 8
+    gap: 10
   },
   closeBtn: {
-    padding: 6
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center"
   },
   title: {
     fontSize: 16,
@@ -1784,6 +3259,12 @@ var styles12 = StyleSheet.create({
   rootPreview: {
     paddingVertical: 8,
     paddingHorizontal: 8
+  },
+  kavBody: {
+    flex: 1
+  },
+  listWrap: {
+    flex: 1
   }
 });
 function UserName({ externalId, fallback, labelFor }) {
@@ -1804,7 +3285,7 @@ function TypingIndicator({ typing, labelFor }) {
   const ids = Array.from(typing);
   const isTyping = ids.length > 0;
   if (!isTyping) return /* @__PURE__ */ jsx(View, { style: { height: 0 } });
-  return /* @__PURE__ */ jsxs(View, { style: styles13.row, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles19.row, children: [
     /* @__PURE__ */ jsx(TypingDots, {}),
     /* @__PURE__ */ jsx(TypingLabel, { ids, ...labelFor ? { labelFor } : {} })
   ] });
@@ -1849,7 +3330,7 @@ function TypingDots() {
     ],
     opacity: val.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] })
   });
-  return /* @__PURE__ */ jsxs(View, { style: styles13.dotsWrap, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles19.dotsWrap, children: [
     /* @__PURE__ */ jsx(Animated.View, { style: dot(a) }),
     /* @__PURE__ */ jsx(Animated.View, { style: dot(b) }),
     /* @__PURE__ */ jsx(Animated.View, { style: dot(c) })
@@ -1865,9 +3346,9 @@ function TypingLabel({
   const name1 = useDisplayName(id1, labelFor);
   const name2 = useDisplayName(id2, labelFor);
   const text = ids.length === 1 ? `${name1} is typing` : ids.length === 2 ? `${name1} and ${name2} are typing` : `${ids.length} people are typing`;
-  return /* @__PURE__ */ jsx(Text, { style: [styles13.label, { color: theme.colors.ink2, fontFamily: theme.type.fontBody }], children: text });
+  return /* @__PURE__ */ jsx(Text, { style: [styles19.label, { color: theme.colors.ink2, fontFamily: theme.type.fontBody }], children: text });
 }
-var styles13 = StyleSheet.create({
+var styles19 = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
@@ -1890,6 +3371,9 @@ function ConversationView({
   renderMessage,
   labelFor,
   avatarFor,
+  header = true,
+  onHeaderMembersPress,
+  onHeaderPress,
   reactions = true,
   mentions = true,
   attachments = true,
@@ -1900,7 +3384,9 @@ function ConversationView({
   maxBodyLength = 200,
   senderLabels = "auto",
   avatars = "auto",
-  onMarkedRead
+  onMarkedRead,
+  onSent,
+  keyboardOffset = 0
 }) {
   const theme = usePoolseTheme();
   const { me } = useMe();
@@ -1912,7 +3398,8 @@ function ConversationView({
     loadMore,
     send,
     edit,
-    delete: deleteMsg
+    delete: deleteMsg,
+    markReadUpTo
   } = useMessages(conversationId);
   const { typing, signalTyping } = useTyping(conversationId);
   const wantsMembers = mentions || senderLabels === "auto" || avatars === "auto";
@@ -1924,10 +3411,31 @@ function ConversationView({
   const [editingId, setEditingId] = useState(null);
   const [threadRoot, setThreadRoot] = useState(null);
   const [pickerOpen, setPickerOpen] = useState(false);
+  const sequenceByMessageId = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const msg of messages) {
+      if (typeof msg.sequence === "number") m.set(msg.id, msg.sequence);
+    }
+    return m;
+  }, [messages]);
+  const lastMarkedRef = useRef(null);
+  useEffect(() => {
+    if (!readReceipts) return;
+    if (messages.length === 0) return;
+    const latest = messages[messages.length - 1];
+    if (!latest || !latest.id) return;
+    if (latest.id === lastMarkedRef.current) return;
+    if (typeof latest.sequence !== "number" || latest.sequence <= 0) return;
+    lastMarkedRef.current = latest.id;
+    void markReadUpTo(latest.id).catch(() => {
+      lastMarkedRef.current = null;
+    });
+    onMarkedRead?.(conversationId, latest.id);
+  }, [messages, meId, readReceipts, markReadUpTo, onMarkedRead, conversationId]);
   const renderItem = useCallback(
     (msg) => {
       if (renderMessage) return /* @__PURE__ */ jsx(Fragment, { children: renderMessage(msg, meId) });
-      const readState = readReceipts && meId !== null && msg.sender_id === meId ? readStateForMessage(msg, members, meId) : void 0;
+      const readState = readReceipts && meId !== null && msg.sender_id === meId ? readStateForMessage(msg, members, meId, sequenceByMessageId) : void 0;
       return /* @__PURE__ */ jsx(
         MessageRow,
         {
@@ -1974,7 +3482,8 @@ function ConversationView({
       avatarFor,
       showSenderLabels,
       showAvatars,
-      maxBodyLength
+      maxBodyLength,
+      sequenceByMessageId
     ]
   );
   const composerProps = useMemo(
@@ -1982,52 +3491,78 @@ function ConversationView({
       onSend: async (body, opts) => {
         await send({ body, ...opts });
         setReplyingTo(null);
+        onSent?.(conversationId);
       },
       onTyping: signalTyping,
       ...attachments ? { onAttachPress: () => setPickerOpen(true) } : {},
       ...replyingTo ? { replyingTo } : {},
       onCancelReply: () => setReplyingTo(null),
       ...labelFor ? { labelFor } : {},
-      attachments
+      attachments,
+      keyboardOffset
     }),
-    [send, signalTyping, attachments, replyingTo, labelFor]
+    [send, signalTyping, attachments, replyingTo, labelFor, keyboardOffset, onSent, conversationId]
   );
-  return /* @__PURE__ */ jsxs(View, { style: [styles14.root, { backgroundColor: theme.colors.paper }], children: [
-    /* @__PURE__ */ jsx(View, { style: styles14.listWrap, children: /* @__PURE__ */ jsx(
-      MessageList,
-      {
-        messages,
-        loading,
-        hasMore,
-        onLoadMore: loadMore,
-        renderItem,
-        ListHeader: /* @__PURE__ */ jsx(TypingIndicator, { typing, ...labelFor ? { labelFor } : {} }),
-        ...emptyState !== void 0 ? { emptyState } : {}
-      }
-    ) }),
-    mentions ? /* @__PURE__ */ jsx(MentionInput, { conversationId, ...composerProps }) : /* @__PURE__ */ jsx(MessageComposer, { ...composerProps }),
-    attachments ? /* @__PURE__ */ jsx(AttachmentPicker, { visible: pickerOpen, onClose: () => setPickerOpen(false) }) : null,
-    threads && threadRoot ? /* @__PURE__ */ jsx(
-      ThreadView,
-      {
-        visible: true,
-        onClose: () => setThreadRoot(null),
-        conversationId,
-        rootMessage: threadRoot,
-        ...labelFor ? { labelFor } : {}
-      }
-    ) : null
-  ] });
+  const headerNode = header === false ? null : header === true ? /* @__PURE__ */ jsx(
+    ChatHeader,
+    {
+      conversationId,
+      ...labelFor ? { labelFor } : {},
+      ...avatarFor ? { avatarFor } : {},
+      ...onHeaderMembersPress ? { onMembersPress: onHeaderMembersPress } : {},
+      ...onHeaderPress ? { onPress: onHeaderPress } : {}
+    }
+  ) : header;
+  return /* @__PURE__ */ jsx(UploadProvider, { children: /* @__PURE__ */ jsxs(
+    KeyboardAvoidingView,
+    {
+      style: [styles20.root, { backgroundColor: theme.colors.paper }],
+      behavior: Platform.OS === "ios" ? "padding" : "height",
+      keyboardVerticalOffset: keyboardOffset,
+      children: [
+        headerNode,
+        /* @__PURE__ */ jsx(View, { style: styles20.listWrap, children: /* @__PURE__ */ jsx(
+          MessageList,
+          {
+            messages,
+            loading,
+            hasMore,
+            onLoadMore: loadMore,
+            renderItem,
+            ListHeader: /* @__PURE__ */ jsx(TypingIndicator, { typing, ...labelFor ? { labelFor } : {} }),
+            ...emptyState !== void 0 ? { emptyState } : {}
+          }
+        ) }),
+        mentions ? /* @__PURE__ */ jsx(MentionInput, { conversationId, ...composerProps }) : /* @__PURE__ */ jsx(MessageComposer, { ...composerProps }),
+        attachments ? /* @__PURE__ */ jsx(AttachmentPicker, { visible: pickerOpen, onClose: () => setPickerOpen(false) }) : null,
+        threads && threadRoot ? /* @__PURE__ */ jsx(
+          ThreadView,
+          {
+            visible: true,
+            onClose: () => setThreadRoot(null),
+            conversationId,
+            rootMessage: threadRoot,
+            ...labelFor ? { labelFor } : {}
+          }
+        ) : null
+      ]
+    }
+  ) });
 }
-function readStateForMessage(msg, members, meId) {
+function readStateForMessage(msg, members, meId, sequenceByMessageId) {
   const otherMembers = members.filter((m) => m.user_id !== meId);
   if (otherMembers.length === 0) return "sent";
-  const anyRead = otherMembers.some(
-    (m) => m.last_read_message_id !== null && msg.id !== null && m.last_read_message_id >= msg.id
-  );
+  if (typeof msg.sequence !== "number") return "sent";
+  const mySeq = msg.sequence;
+  const anyRead = otherMembers.some((m) => {
+    if (!m.last_read_message_id) return false;
+    const readSeq = sequenceByMessageId.get(m.last_read_message_id);
+    if (readSeq === void 0) return false;
+    return readSeq >= mySeq;
+  });
   return anyRead ? "read" : "sent";
 }
-var styles14 = StyleSheet.create({
+var styles20 = StyleSheet.create({
   root: {
     flex: 1
   },
@@ -2035,351 +3570,776 @@ var styles14 = StyleSheet.create({
     flex: 1
   }
 });
-function ConversationList({
-  selectedId,
-  onSelect,
-  renderItem,
-  emptyState,
-  conversations: controlled,
-  loading: controlledLoading,
-  error: controlledError,
-  unreadCounts
+function UserPickerSheet({
+  visible,
+  onClose,
+  users,
+  excludeIds,
+  mode,
+  onPickDirect,
+  onCreateGroup,
+  title,
+  searchable
 }) {
   const theme = usePoolseTheme();
-  const auto = useConversations();
-  const isControlled = controlled !== void 0;
-  const conversations = isControlled ? controlled : auto.conversations;
-  const loading = isControlled ? controlledLoading ?? false : auto.loading;
-  const error = isControlled ? controlledError ?? null : auto.error;
-  const counts = unreadCounts ?? (isControlled ? void 0 : auto.unreadCounts);
-  if (loading && conversations.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles15.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx(View, { style: [styles15.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.error, fontFamily: theme.type.fontBody }, children: "Failed to load conversations." }) });
-  }
-  if (conversations.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles15.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" || emptyState == null ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState ?? "No conversations yet." }) : emptyState });
-  }
+  const [query, setQuery] = useState("");
+  const [selectedIds, setSelectedIds] = useState([]);
+  const [groupName, setGroupName] = useState("");
+  const { height: screenHeight } = useWindowDimensions();
+  const { translateY, panHandlers } = useDismissableSheet({
+    onClose: () => {
+      setQuery("");
+      setSelectedIds([]);
+      setGroupName("");
+      onClose();
+    },
+    sheetHeight: screenHeight * 0.85
+  });
+  const excludeSet = useMemo(() => new Set(excludeIds ?? []), [excludeIds]);
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return users.filter((u) => {
+      if (excludeSet.has(u.externalId)) return false;
+      if (!q) return true;
+      return u.name.toLowerCase().includes(q) || (u.subtitle ?? "").toLowerCase().includes(q) || u.externalId.toLowerCase().includes(q);
+    });
+  }, [users, query, excludeSet]);
+  const showSearch = searchable ?? users.length >= 8;
+  const isGroup = mode === "group";
+  const heading = title ?? (isGroup ? "New group" : "New chat");
+  const reset = () => {
+    setQuery("");
+    setSelectedIds([]);
+    setGroupName("");
+  };
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+  const toggle = (externalId) => {
+    setSelectedIds(
+      (prev) => prev.includes(externalId) ? prev.filter((id) => id !== externalId) : [...prev, externalId]
+    );
+  };
+  const canCreate = isGroup && selectedIds.length > 0 && groupName.trim().length > 0;
+  const handleCreate = () => {
+    if (!canCreate) return;
+    onCreateGroup?.(groupName.trim(), selectedIds);
+    reset();
+    onClose();
+  };
   return /* @__PURE__ */ jsx(
-    FlatList,
+    Modal,
     {
-      data: conversations,
-      keyExtractor: (c) => c.id,
-      style: { backgroundColor: theme.colors.paper },
-      renderItem: ({ item }) => {
-        const selected = selectedId === item.id;
-        if (renderItem) {
-          return /* @__PURE__ */ jsx(Fragment, { children: renderItem(item, selected) });
-        }
-        const unread = counts?.[item.id] ?? 0;
-        return /* @__PURE__ */ jsxs(
-          Pressable,
+      visible,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: handleClose,
+      statusBarTranslucent: true,
+      children: /* @__PURE__ */ jsxs(View, { style: styles21.modalRoot, children: [
+        /* @__PURE__ */ jsx(Pressable, { style: styles21.backdrop, onPress: handleClose }),
+        /* @__PURE__ */ jsxs(
+          Animated.View,
           {
-            onPress: () => onSelect?.(item),
             style: [
-              styles15.row,
+              styles21.sheet,
               {
-                backgroundColor: selected ? theme.colors.surface2 : "transparent"
-              }
+                backgroundColor: theme.colors.paper,
+                borderTopLeftRadius: theme.radii.xl,
+                borderTopRightRadius: theme.radii.xl,
+                transform: [{ translateY }]
+              },
+              theme.shadows.lg
             ],
             children: [
-              /* @__PURE__ */ jsx(Avatar, { src: null, name: item.name ?? null, seed: item.id, size: "md" }),
-              /* @__PURE__ */ jsxs(View, { style: styles15.body, children: [
+              /* @__PURE__ */ jsx(View, { ...panHandlers, style: styles21.dragHandle, children: /* @__PURE__ */ jsx(View, { style: [styles21.dragPill, { backgroundColor: theme.colors.ink3 }] }) }),
+              /* @__PURE__ */ jsxs(View, { style: styles21.header, children: [
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    onPress: handleClose,
+                    hitSlop: 16,
+                    style: [styles21.closeBtn, { backgroundColor: theme.colors.surface2 }],
+                    accessibilityLabel: "Close picker",
+                    children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 18, color: theme.colors.ink })
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   Text,
                   {
-                    style: [styles15.name, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+                    style: [
+                      styles21.title,
+                      { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }
+                    ],
                     numberOfLines: 1,
-                    children: item.name ?? "Untitled conversation"
+                    children: heading
                   }
                 ),
-                item.last_message_at ? /* @__PURE__ */ jsx(Text, { style: [styles15.preview, { color: theme.colors.ink3 }], numberOfLines: 1, children: formatRelative(item.last_message_at) }) : null
+                isGroup ? /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    onPress: handleCreate,
+                    disabled: !canCreate,
+                    hitSlop: 6,
+                    style: [
+                      styles21.createBtn,
+                      {
+                        backgroundColor: canCreate ? theme.colors.brand : theme.colors.surface2,
+                        opacity: canCreate ? 1 : 0.6
+                      }
+                    ],
+                    children: /* @__PURE__ */ jsxs(
+                      Text,
+                      {
+                        style: {
+                          color: canCreate ? theme.colors.onBrand : theme.colors.ink3,
+                          fontWeight: "700",
+                          fontSize: 13
+                        },
+                        children: [
+                          "Create",
+                          selectedIds.length > 0 ? ` (${selectedIds.length})` : ""
+                        ]
+                      }
+                    )
+                  }
+                ) : null
               ] }),
-              unread > 0 ? /* @__PURE__ */ jsx(View, { style: [styles15.unreadPill, { backgroundColor: theme.colors.unreadPill }], children: /* @__PURE__ */ jsx(Text, { style: [styles15.unreadText, { color: theme.colors.unreadPillText }], children: unread > 99 ? "99+" : String(unread) }) }) : null
+              isGroup ? /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  placeholder: "Group name",
+                  placeholderTextColor: theme.colors.ink3,
+                  value: groupName,
+                  onChangeText: setGroupName,
+                  style: [
+                    styles21.groupNameInput,
+                    {
+                      color: theme.colors.ink,
+                      backgroundColor: theme.colors.surface2,
+                      borderRadius: theme.radii.md,
+                      fontFamily: theme.type.fontBody,
+                      fontSize: theme.type.bodySize
+                    }
+                  ]
+                }
+              ) : null,
+              showSearch ? /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  placeholder: "Search\u2026",
+                  placeholderTextColor: theme.colors.ink3,
+                  value: query,
+                  onChangeText: setQuery,
+                  style: [
+                    styles21.searchInput,
+                    {
+                      color: theme.colors.ink,
+                      backgroundColor: theme.colors.surface2,
+                      borderRadius: theme.radii.md,
+                      fontFamily: theme.type.fontBody,
+                      fontSize: 14
+                    }
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                FlatList,
+                {
+                  data: filtered,
+                  keyExtractor: (u) => u.externalId,
+                  ListEmptyComponent: /* @__PURE__ */ jsx(View, { style: styles21.empty, children: /* @__PURE__ */ jsx(Text, { style: [styles21.emptyText, { color: theme.colors.ink3 }], children: query ? "No matches." : "No users to show." }) }),
+                  renderItem: ({ item }) => /* @__PURE__ */ jsx(
+                    UserRow,
+                    {
+                      user: item,
+                      selected: selectedIds.includes(item.externalId),
+                      isGroup,
+                      onPress: () => {
+                        if (isGroup) toggle(item.externalId);
+                        else {
+                          onPickDirect?.(item.externalId);
+                          reset();
+                          onClose();
+                        }
+                      }
+                    }
+                  )
+                }
+              )
             ]
           }
-        );
-      }
+        )
+      ] })
     }
   );
 }
-function formatRelative(iso) {
-  try {
-    const d = new Date(iso);
-    const now = Date.now();
-    const diff = now - d.getTime();
-    if (diff < 6e4) return "just now";
-    if (diff < 36e5) return `${Math.floor(diff / 6e4)}m`;
-    if (diff < 864e5) return `${Math.floor(diff / 36e5)}h`;
-    return `${Math.floor(diff / 864e5)}d`;
-  } catch {
-    return "";
-  }
-}
-var styles15 = StyleSheet.create({
-  placeholder: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 24
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    gap: 10
-  },
-  body: {
-    flex: 1,
-    gap: 2
-  },
-  name: {
-    fontSize: 15,
-    fontWeight: "600"
-  },
-  preview: {
-    fontSize: 12
-  },
-  unreadPill: {
-    minWidth: 22,
-    height: 22,
-    borderRadius: 11,
-    paddingHorizontal: 6,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  unreadText: {
-    fontSize: 11,
-    fontWeight: "700"
-  }
-});
-function MemberList({
-  conversationId,
-  labelFor,
-  avatarFor,
-  onlineExternalIds,
-  canRemove,
-  renderItem,
-  emptyState
+function UserRow({
+  user,
+  selected,
+  isGroup,
+  onPress
 }) {
   const theme = usePoolseTheme();
-  const { members, loading, error, removeMember } = useMembers(conversationId);
-  const { online: presenceOnline } = usePresence(
-    onlineExternalIds === void 0 ? conversationId : ""
-  );
-  const effectiveOnline = onlineExternalIds ?? presenceOnline;
-  if (loading && members.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles16.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxs(View, { style: [styles16.placeholder, { backgroundColor: theme.colors.paper }], children: [
-      /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.error, fontFamily: theme.type.fontBody }, children: "Failed to load members." }),
-      error.message ? /* @__PURE__ */ jsx(Text, { style: [styles16.errorDetail, { color: theme.colors.ink3 }], children: error.message }) : null
-    ] });
-  }
-  if (members.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles16.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" || emptyState == null ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState ?? "No members." }) : emptyState });
-  }
-  return /* @__PURE__ */ jsx(
-    FlatList,
+  return /* @__PURE__ */ jsxs(
+    Pressable,
     {
-      data: members,
-      keyExtractor: (m) => m.user_id,
-      style: { backgroundColor: theme.colors.paper },
-      renderItem: ({ item }) => {
-        if (renderItem) return /* @__PURE__ */ jsx(Fragment, { children: renderItem(item) });
-        const name = labelFor?.(item.external_id) ?? item.external_id;
-        const avatarUrl = avatarFor?.(item.external_id) ?? null;
-        const isOnline = effectiveOnline.has(item.external_id);
-        const showRemove = canRemove?.(item) ?? false;
-        return /* @__PURE__ */ jsx(
-          MemberRow,
+      onPress,
+      style: [
+        styles21.row,
+        {
+          backgroundColor: selected ? theme.colors.brandSoft : "transparent"
+        }
+      ],
+      children: [
+        user.avatarUrl ? /* @__PURE__ */ jsx(Image, { source: { uri: user.avatarUrl }, style: styles21.avatarImg }) : /* @__PURE__ */ jsx(Avatar, { src: null, name: user.name, seed: user.externalId, size: "md" }),
+        /* @__PURE__ */ jsxs(View, { style: styles21.body, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [styles21.name, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+              numberOfLines: 1,
+              children: user.name
+            }
+          ),
+          user.subtitle ? /* @__PURE__ */ jsx(Text, { style: [styles21.subtitle, { color: theme.colors.ink3 }], numberOfLines: 1, children: user.subtitle }) : null
+        ] }),
+        isGroup ? /* @__PURE__ */ jsx(
+          View,
           {
-            name,
-            externalId: item.external_id,
-            avatarUrl,
-            role: item.role,
-            online: isOnline,
-            ...showRemove ? { onRemove: () => removeMember(item.external_id) } : {}
+            style: [
+              styles21.checkbox,
+              {
+                borderColor: selected ? theme.colors.brand : theme.colors.border,
+                backgroundColor: selected ? theme.colors.brand : "transparent"
+              }
+            ],
+            children: selected ? /* @__PURE__ */ jsx(PoolseIcon, { name: "check", size: 14, color: theme.colors.onBrand }) : null
           }
-        );
-      }
+        ) : null
+      ]
     }
   );
 }
-function MemberRow({
-  name,
-  externalId,
-  avatarUrl,
-  role,
-  online,
-  onRemove
-}) {
-  const theme = usePoolseTheme();
-  const displayName = useDisplayName(externalId) || name;
-  return /* @__PURE__ */ jsxs(View, { style: styles16.row, children: [
-    /* @__PURE__ */ jsx(Avatar, { src: avatarUrl, name: displayName, seed: externalId, online, size: "md" }),
-    /* @__PURE__ */ jsxs(View, { style: styles16.body, children: [
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          style: [styles16.name, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
-          numberOfLines: 1,
-          children: displayName
-        }
-      ),
-      /* @__PURE__ */ jsx(Text, { style: [styles16.role, { color: theme.colors.ink3 }], children: role })
-    ] }),
-    onRemove ? /* @__PURE__ */ jsx(Pressable, { onPress: onRemove, hitSlop: 8, style: styles16.removeBtn, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
-  ] });
-}
-var styles16 = StyleSheet.create({
-  placeholder: {
+var styles21 = StyleSheet.create({
+  modalRoot: {
     flex: 1,
+    justifyContent: "flex-end"
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.4)"
+  },
+  sheet: {
+    height: "85%",
+    overflow: "hidden"
+  },
+  dragHandle: {
     alignItems: "center",
-    justifyContent: "center",
-    padding: 24
+    paddingTop: 8,
+    paddingBottom: 4
   },
-  errorDetail: {
-    marginTop: 6,
-    fontSize: 11
+  dragPill: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    opacity: 0.4
   },
-  row: {
+  header: {
     flexDirection: "row",
     alignItems: "center",
     paddingHorizontal: 12,
-    paddingVertical: 8,
+    paddingTop: 4,
+    paddingBottom: 12,
     gap: 10
   },
+  closeBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: "700",
+    flex: 1
+  },
+  createBtn: {
+    paddingHorizontal: 14,
+    paddingVertical: 7,
+    borderRadius: 999
+  },
+  groupNameInput: {
+    marginHorizontal: 16,
+    marginBottom: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontWeight: "600"
+  },
+  searchInput: {
+    marginHorizontal: 16,
+    marginBottom: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    gap: 12
+  },
+  avatarImg: {
+    width: 40,
+    height: 40,
+    borderRadius: 20
+  },
   body: {
     flex: 1,
-    gap: 1
+    gap: 2
   },
   name: {
-    fontSize: 14,
-    fontWeight: "500"
+    fontSize: 15,
+    fontWeight: "600"
   },
-  role: {
-    fontSize: 11,
-    textTransform: "capitalize"
+  subtitle: {
+    fontSize: 12
   },
-  removeBtn: {
-    padding: 6
+  checkbox: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  empty: {
+    paddingVertical: 40,
+    alignItems: "center"
+  },
+  emptyText: {
+    fontSize: 13
   }
 });
-var DEFAULT_EMOJIS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F389}", "\u{1F64F}", "\u{1F525}"];
-function ReactionStrip({
-  messageId,
-  conversationId,
-  meId,
-  initialReactions
-}) {
-  const theme = usePoolseTheme();
-  const { reactions, addReaction, removeReaction } = useReactions(messageId, {
-    conversationId,
-    currentUserId: meId,
-    ...initialReactions ? { initialReactions } : {}
-  });
-  const entries = Object.entries(reactions);
-  if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsx(View, { style: styles17.strip, children: entries.map(([emoji, userIds]) => {
-    const userArr = Array.isArray(userIds) ? userIds : [];
-    const meReacted = meId !== null && userArr.includes(meId);
-    return /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        onPress: () => meReacted ? removeReaction(emoji) : addReaction(emoji),
-        style: [
-          styles17.chip,
+var CHAT_HEADER_HEIGHT = 56;
+var PoolseInbox = forwardRef(
+  function PoolseInbox2(props, ref) {
+    const {
+      title = "Chats",
+      users,
+      labelFor,
+      avatarFor,
+      renderRightAction,
+      renderConversationRow,
+      emptyState,
+      keyboardOffset = 0
+    } = props;
+    const theme = usePoolseTheme();
+    const { width: screenWidth } = useWindowDimensions();
+    const { me } = useMe();
+    const {
+      conversations,
+      create,
+      unreadCounts,
+      markConversationRead,
+      refetch: refetchConversations
+    } = useConversations();
+    const meExternalId = me?.external_id ?? null;
+    const detailKeyboardOffset = CHAT_HEADER_HEIGHT;
+    const [activeId, setActiveId] = useState(null);
+    const [userPickerOpen, setUserPickerOpen] = useState(false);
+    const [groupPickerOpen, setGroupPickerOpen] = useState(false);
+    const slide = useRef(new Animated.Value(0)).current;
+    const draggingRef = useRef(false);
+    useEffect(() => {
+      if (draggingRef.current) return;
+      Animated.timing(slide, {
+        toValue: activeId ? 1 : 0,
+        duration: 280,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true
+      }).start();
+    }, [activeId, slide]);
+    const listTransform = slide.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, -Math.round(screenWidth * 0.25)]
+    });
+    const detailTransform = slide.interpolate({
+      inputRange: [0, 1],
+      outputRange: [screenWidth, 0]
+    });
+    const EDGE_WIDTH = 24;
+    const DISMISS_VX_THRESHOLD = 0.4;
+    const activeIdRef = useRef(activeId);
+    useEffect(() => {
+      activeIdRef.current = activeId;
+    }, [activeId]);
+    const panResponder = useMemo(() => {
+      const dismissDxThreshold = screenWidth * 0.35;
+      return PanResponder.create({
+        // Never claim the touch on start — that would swallow taps on
+        // the back button in the ChatHeader strip.
+        onStartShouldSetPanResponder: () => false,
+        onStartShouldSetPanResponderCapture: () => false,
+        onMoveShouldSetPanResponder: (_e, gs) => {
+          if (!activeIdRef.current) return false;
+          if (gs.x0 > EDGE_WIDTH) return false;
+          return gs.dx > 6 && Math.abs(gs.dx) > Math.abs(gs.dy);
+        },
+        onMoveShouldSetPanResponderCapture: (_e, gs) => {
+          if (!activeIdRef.current) return false;
+          if (gs.x0 > EDGE_WIDTH) return false;
+          return gs.dx > 6 && Math.abs(gs.dx) > Math.abs(gs.dy);
+        },
+        onPanResponderGrant: () => {
+          draggingRef.current = true;
+          slide.stopAnimation();
+        },
+        onPanResponderMove: (_e, gs) => {
+          const dx = Math.max(0, gs.dx);
+          const progress = Math.min(1, dx / screenWidth);
+          slide.setValue(1 - progress);
+        },
+        onPanResponderRelease: (_e, gs) => {
+          draggingRef.current = false;
+          const past = gs.dx > dismissDxThreshold || gs.vx > DISMISS_VX_THRESHOLD;
+          if (past) {
+            setActiveId(null);
+          } else {
+            Animated.timing(slide, {
+              toValue: 1,
+              duration: 220,
+              easing: Easing.out(Easing.cubic),
+              useNativeDriver: true
+            }).start();
+          }
+        },
+        onPanResponderTerminate: () => {
+          draggingRef.current = false;
+          Animated.timing(slide, {
+            toValue: 1,
+            duration: 220,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: true
+          }).start();
+        },
+        onPanResponderTerminationRequest: () => false
+      });
+    }, [slide, screenWidth]);
+    const openDirect = useCallback(
+      async (externalId) => {
+        const conv = await create({
+          type: "direct",
+          member_external_ids: [externalId]
+        });
+        setActiveId(conv.id);
+      },
+      [create]
+    );
+    const openGroup = useCallback(
+      async (name, memberExternalIds) => {
+        const conv = await create({
+          type: "group",
+          name,
+          member_external_ids: memberExternalIds
+        });
+        setActiveId(conv.id);
+      },
+      [create]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        open: setActiveId,
+        openDirect,
+        openGroup,
+        promptNewChat: () => setUserPickerOpen(true),
+        promptNewGroup: () => setGroupPickerOpen(true),
+        close: () => setActiveId(null)
+      }),
+      [openDirect, openGroup]
+    );
+    const renderRow = useCallback(
+      (conv, selected) => {
+        if (renderConversationRow) {
+          return /* @__PURE__ */ jsx(Fragment, { children: renderConversationRow(conv, meExternalId, selected) });
+        }
+        const unread = unreadCounts?.[conv.id] ?? conv.unread_count ?? 0;
+        return /* @__PURE__ */ jsx(
+          DefaultConversationRow,
           {
-            backgroundColor: meReacted ? theme.colors.brandSoft : theme.colors.surface2,
-            borderColor: meReacted ? theme.colors.brand : theme.colors.border
+            conv,
+            selected,
+            meExternalId,
+            unread,
+            ...labelFor ? { labelFor } : {},
+            ...avatarFor ? { avatarFor } : {},
+            onPress: () => setActiveId(conv.id)
           }
-        ],
-        children: [
-          /* @__PURE__ */ jsx(Text, { style: styles17.emoji, children: emoji }),
-          /* @__PURE__ */ jsx(Text, { style: [styles17.count, { color: theme.colors.ink2 }], children: userArr.length })
-        ]
+        );
       },
-      emoji
+      [renderConversationRow, meExternalId, labelFor, avatarFor, unreadCounts]
     );
-  }) });
+    return /* @__PURE__ */ jsxs(View, { style: [styles22.root, { backgroundColor: theme.colors.paper }], children: [
+      /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          style: [StyleSheet.absoluteFillObject, { transform: [{ translateX: listTransform }] }],
+          pointerEvents: activeId ? "none" : "auto",
+          children: [
+            /* @__PURE__ */ jsxs(
+              View,
+              {
+                style: [
+                  styles22.listHeader,
+                  {
+                    backgroundColor: theme.colors.surface,
+                    borderBottomColor: theme.colors.border
+                  }
+                ],
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: [
+                        styles22.listTitle,
+                        { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }
+                      ],
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(View, { style: styles22.headerActions, children: [
+                    users ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        HeaderIconButton,
+                        {
+                          icon: "compose",
+                          onPress: () => setUserPickerOpen(true),
+                          label: "New chat"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        HeaderIconButton,
+                        {
+                          icon: "users",
+                          onPress: () => setGroupPickerOpen(true),
+                          label: "New group"
+                        }
+                      )
+                    ] }) : null,
+                    renderRightAction?.()
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ConversationList,
+              {
+                conversations,
+                renderItem: renderRow,
+                ...emptyState !== void 0 ? { emptyState } : {}
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          style: [StyleSheet.absoluteFillObject, { transform: [{ translateX: detailTransform }] }],
+          pointerEvents: activeId ? "auto" : "none",
+          ...panResponder.panHandlers,
+          children: activeId ? /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(
+              ChatHeader,
+              {
+                conversationId: activeId,
+                onBack: () => setActiveId(null),
+                ...labelFor ? { labelFor } : {},
+                ...avatarFor ? { avatarFor } : {}
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ConversationView,
+              {
+                conversationId: activeId,
+                header: false,
+                keyboardOffset: keyboardOffset || detailKeyboardOffset,
+                onMarkedRead: (convId) => {
+                  markConversationRead(convId);
+                },
+                onSent: () => {
+                  void refetchConversations();
+                },
+                ...labelFor ? { labelFor } : {},
+                ...avatarFor ? { avatarFor } : {}
+              },
+              activeId
+            )
+          ] }) : null
+        }
+      ),
+      users ? /* @__PURE__ */ jsx(
+        UserPickerSheet,
+        {
+          visible: userPickerOpen,
+          onClose: () => setUserPickerOpen(false),
+          users,
+          excludeIds: meExternalId ? [meExternalId] : [],
+          mode: "single",
+          onPickDirect: (externalId) => {
+            void openDirect(externalId);
+          }
+        }
+      ) : null,
+      users ? /* @__PURE__ */ jsx(
+        UserPickerSheet,
+        {
+          visible: groupPickerOpen,
+          onClose: () => setGroupPickerOpen(false),
+          users,
+          excludeIds: meExternalId ? [meExternalId] : [],
+          mode: "group",
+          onCreateGroup: (name, ids) => {
+            void openGroup(name, ids);
+          }
+        }
+      ) : null
+    ] });
+  }
+);
+function HeaderIconButton({
+  icon,
+  onPress,
+  label
+}) {
+  const theme = usePoolseTheme();
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress,
+      hitSlop: 10,
+      accessibilityLabel: label,
+      style: ({ pressed }) => [
+        styles22.iconBtn,
+        {
+          backgroundColor: pressed ? theme.colors.surface2 : "transparent"
+        }
+      ],
+      children: /* @__PURE__ */ jsx(PoolseIcon, { name: icon, size: 20, color: theme.colors.ink })
+    }
+  );
 }
-function ReactionPicker({
-  visible,
-  onClose,
-  onPick,
-  emojis = DEFAULT_EMOJIS
+function DefaultConversationRow({
+  conv,
+  selected,
+  meExternalId,
+  unread,
+  labelFor,
+  avatarFor,
+  onPress
 }) {
   const theme = usePoolseTheme();
-  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles17.backdrop, onPress: onClose, children: /* @__PURE__ */ jsx(
-    View,
+  const isDirect = conv.type === "direct";
+  const otherExtId = isDirect && meExternalId ? (conv.member_external_ids ?? []).find((x) => x !== meExternalId) : null;
+  const title = isDirect ? otherExtId ? labelFor?.(otherExtId) ?? otherExtId : "Direct chat" : conv.name ?? "Untitled group";
+  const avatarUrl = isDirect && otherExtId ? avatarFor?.(otherExtId) ?? null : null;
+  const avatarSeed = isDirect ? otherExtId ?? conv.id : conv.id;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
     {
+      onPress,
       style: [
-        styles17.sheet,
+        styles22.row,
         {
-          backgroundColor: theme.colors.surface,
-          borderRadius: theme.radii.lg
-        },
-        theme.shadows.lg
+          backgroundColor: selected ? theme.colors.surface2 : "transparent",
+          borderBottomColor: theme.colors.border
+        }
       ],
-      children: emojis.map((emoji) => /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          style: styles17.emojiBtn,
-          onPress: () => {
-            onPick(emoji);
-            onClose();
-          },
-          children: /* @__PURE__ */ jsx(Text, { style: styles17.bigEmoji, children: emoji })
-        },
-        emoji
-      ))
+      children: [
+        avatarUrl ? /* @__PURE__ */ jsx(Image, { source: { uri: avatarUrl }, style: styles22.rowAvatar }) : /* @__PURE__ */ jsx(Avatar, { src: null, name: title, seed: avatarSeed, size: "md" }),
+        /* @__PURE__ */ jsxs(View, { style: styles22.rowBody, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [styles22.rowTitle, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+              numberOfLines: 1,
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: [styles22.rowSubtitle, { color: theme.colors.ink3 }], numberOfLines: 1, children: conv.last_message_preview ?? (isDirect ? otherExtId ?? "" : `${(conv.member_external_ids ?? []).length} members`) })
+        ] }),
+        unread > 0 ? /* @__PURE__ */ jsx(View, { style: [styles22.unreadPill, { backgroundColor: theme.colors.unreadPill }], children: /* @__PURE__ */ jsx(Text, { style: [styles22.unreadText, { color: theme.colors.unreadPillText }], children: unread > 99 ? "99+" : String(unread) }) }) : null
+      ]
     }
-  ) }) });
+  );
 }
-var styles17 = StyleSheet.create({
-  strip: {
+var styles22 = StyleSheet.create({
+  root: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  listHeader: {
     flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 4,
-    marginTop: 4
+    alignItems: "center",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    gap: 12
   },
-  chip: {
+  listTitle: {
+    flex: 1,
+    fontSize: 20,
+    fontWeight: "700"
+  },
+  headerActions: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 12,
-    borderWidth: StyleSheet.hairlineWidth,
     gap: 4
   },
-  emoji: {
-    fontSize: 14
+  iconBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  count: {
-    fontSize: 11,
-    fontWeight: "600"
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    gap: 12
   },
-  backdrop: {
+  rowAvatar: {
+    width: 44,
+    height: 44,
+    borderRadius: 22
+  },
+  rowBody: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.35)",
-    justifyContent: "center",
-    alignItems: "center"
+    gap: 2
   },
-  sheet: {
-    flexDirection: "row",
-    padding: 8,
-    gap: 4
+  rowTitle: {
+    fontSize: 15,
+    fontWeight: "600"
   },
-  emojiBtn: {
-    paddingHorizontal: 10,
-    paddingVertical: 8
+  rowSubtitle: {
+    fontSize: 12
   },
-  bigEmoji: {
-    fontSize: 28
+  unreadPill: {
+    minWidth: 22,
+    height: 22,
+    borderRadius: 11,
+    paddingHorizontal: 7,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  unreadText: {
+    fontSize: 11,
+    fontWeight: "700"
   }
 });
 var TILE_PATH = "M50 4 C20 4 4 20 4 50 C4 80 20 96 50 96 C80 96 96 80 96 50 C96 20 80 4 50 4 Z";
@@ -2465,6 +4425,6 @@ function useAppStateLifecycle() {
   }, [poolse]);
 }
 
-export { AttachmentPicker, AttachmentPreview, Avatar, ConversationList, ConversationView, EditableMessageBubble, MemberList, MentionInput, MessageActions, MessageBubble, MessageComposer, MessageList, MessageRow, PoolseIcon, PoolseLogo, PoolseTheme, primitives as Primitives, ReactionPicker, ReactionStrip, ThreadView, TypingIndicator, UploadQueueStrip, UserName, defaultDarkTheme, defaultLightTheme, useAppStateLifecycle, useDisplayName, usePoolseTheme };
+export { AttachmentPicker, AttachmentPreview, Avatar, ChatHeader, ConversationList, ConversationView, EditableMessageBubble, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map