@marktiderman/genesis-chat 0.2.0 → 0.2.1

package/dist/native.js

@@ -1,16 +1,18 @@
+import { cardTitle, callAttachmentKind, attachmentPreview, messagePreview } from './chunk-AZS3HNLM.js';
+export { attachmentPreview, cardTitle, messagePreview } from './chunk-AZS3HNLM.js';
 import { isHttpsUrl, extractLinks, scheduleLabel, scheduleQuickPicks, isSchedulable, topicKey, snippetParts } from './chunk-BJCE5O7V.js';
-import { useChat, useInbox, usePeople, chatKeys, useScheduled, useAvailability, useTopics, useConversation, usePins, useMessageActions, useFileUrls, useLinkPreviews, useStartConversation, useBroadcast, useSearch } from './chunk-PZTOY2LY.js';
-import { summarizeReactions, previewText, parseMentions, startsDay, dayLabel, itemTime, itemSender, startsGroup, activityLine } from './chunk-5D5A7I4Q.js';
-import { formatDuration, nextPlaybackRate, ChatError, CHAT_LIMITS, fileExtension, isAllowedExtension, attachmentKindFor, awaySummary, WEEKDAYS, minutesOf, waveformFromMetering, recordingLimitMs, CHAT_BUCKET, randomId } from './chunk-7S6HYNWW.js';
+import { useChat, useInbox, usePeople, chatKeys, useScheduled, useAvailability, useTopics, useConversation, usePins, useMessageActions, useFileUrls, useLinkPreviews, useStartConversation, useBroadcast, useSearch } from './chunk-JU2FAPBI.js';
+import { summarizeReactions, previewText, parseMentions, startsDay, dayLabel, itemTime, itemSender, startsGroup, activityLine } from './chunk-A4YJX7KT.js';
+import { formatDuration, nextPlaybackRate, ChatError, CHAT_LIMITS, fileExtension, isAllowedExtension, attachmentKindFor, awaySummary, WEEKDAYS, minutesOf, waveformFromMetering, recordingLimitMs, CHAT_BUCKET, randomId } from './chunk-GBJ3YI4E.js';
 export { CHAT_MARK_READ_ACTION, CHAT_PUSH_CATEGORY, CHAT_REPLY_ACTION, PUSH_REPLY_WAIT_MS, chatNotificationActions, chatPath, chatPushCategory, chatPushCopy, chatPushPayload, chatThreadMatch, conversationIdFromData, failedReply, handleChatPushResponse, registerChatNotificationActions, replyClientId, replyClientIdFor } from './chunk-VEPZROQB.js';
 import { createContext, memo, useMemo, useRef, useContext, useSyncExternalStore, useState, useEffect, useCallback, useReducer } from 'react';
 import { NativeText, NativeAvatar, NativeImage, NativeIcon, NativeButton, NativeProgress, useToast, NativeSheet, NativeDatePicker, NativeTimePicker, NativeListItem, NativeSkeleton, NativeEmptyState, NativeTextarea, NativeSwitch, NativeCombobox, NativeChipGroup, NativeChip, NativeInput, NativeSearchBar, NativeInlineAlert, NativeFullScreenModal, FULL_SCREEN_DARK, useGenesisModules, NativeSheetScrollView, NativeCheckbox, NativeBadge } from '@marktiderman/genesis-ui-native/components';
 import { InboxPage, SettingsSubPage, getThreadPageStackOptions, formatInboxTime } from '@marktiderman/genesis-ui-native/layouts';
-import { useQueryClient } from '@tanstack/react-query';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Pressable, Animated, PanResponder, View, Linking, useWindowDimensions, ActivityIndicator, Modal, AccessibilityInfo, ScrollView, FlatList, AppState, TextInput, Platform, KeyboardAvoidingView, Alert } from 'react-native';
+import { Pressable, Animated, PanResponder, View, Linking, useWindowDimensions, ActivityIndicator, AppState, Modal, AccessibilityInfo, ScrollView, FlatList, TextInput, Platform, KeyboardAvoidingView, Alert } from 'react-native';
 import { useThemeRoles, useReducedMotion } from '@marktiderman/genesis-ui-native/hooks';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useQueryClient } from '@tanstack/react-query';
+import { useSafeAreaInsets, SafeAreaView } from 'react-native-safe-area-context';
 
 // src/native/organise-copy.ts
 var chatOrganiseCopy = {
@@ -295,10 +297,10 @@ function isOpenableHref(href) {
     return false;
   }
 }
-function cardAction(kind, attachment, message, onOpenAttachment) {
+function cardAction(kind, attachment, message, onOpenAttachment, ctx = { mine: false }) {
   let action = null;
   try {
-    action = kind?.action?.(attachment);
+    action = callAttachmentKind(kind, "action", attachment, ctx);
   } catch {
     return null;
   }
@@ -313,14 +315,15 @@ function ChatAttachmentCard({ attachment, message, kind, mine = false, onOpenAtt
   const colors = useThemeRoles();
   let title = "";
   let subtitle = null;
+  const ctx = { mine };
   try {
-    title = kind.title(attachment);
-    subtitle = kind.subtitle?.(attachment);
+    title = callAttachmentKind(kind, "title", attachment, ctx) ?? "";
+    subtitle = callAttachmentKind(kind, "subtitle", attachment, ctx);
   } catch (e) {
     if (typeof __DEV__ !== "undefined" && __DEV__) console.warn(`[genesis-chat] attachment kind "${attachment.kind}" threw:`, e);
   }
   title = title || attachment.name || attachment.kind;
-  const action = cardAction(kind, attachment, message, onOpenAttachment);
+  const action = cardAction(kind, attachment, message, onOpenAttachment, ctx);
   const fg = mine ? "text-primary-foreground" : void 0;
   return /* @__PURE__ */ jsxs(
     View,
@@ -450,6 +453,17 @@ function cycleVoiceNoteRate(id) {
   c?.cycleRate();
   return Boolean(c);
 }
+function pauseChatPlayback(ids) {
+  if (!active) return false;
+  if (typeof ids === "function" ? !ids(active.id) : ids && !new Set(ids).has(active.id)) return false;
+  const { id, pause } = active;
+  try {
+    pause();
+  } catch {
+  }
+  releasePlayback(id);
+  return true;
+}
 function activePlaybackId() {
   return active?.id ?? null;
 }
@@ -783,9 +797,14 @@ function ActiveVideo({
   const [muted, setMuted] = useState(false);
   const [rate, setRate] = useState(1);
   const ended = useRef(false);
+  const fullScreenOpen = useRef(false);
+  const setUp = useRef(false);
   useEffect(() => {
-    claimPlayback(id, () => player.pause());
-    setPlayingId(id, true);
+    const now = setUp.current ? Boolean(player.playing) : true;
+    setUp.current = true;
+    setPlaying(now);
+    setPlayingId(id, now);
+    if (now) claimPlayback(id, () => player.pause());
     const subs = [
       player.addListener("playingChange", ((payload) => {
         setPlaying(payload.isPlaying);
@@ -805,8 +824,21 @@ function ActiveVideo({
         if (payload.status === "error") latestBroken.current();
       }))
     ];
+    const appSub = AppState?.addEventListener?.("change", (next) => {
+      if (next === "background" && !fullScreenOpen.current) {
+        try {
+          player.pause();
+        } catch {
+        }
+      }
+    });
     return () => {
       subs.forEach((s) => s.remove());
+      appSub?.remove?.();
+      try {
+        player.pause();
+      } catch {
+      }
       setPlayingId(id, false);
       releasePlayback(id);
     };
@@ -834,7 +866,24 @@ function ActiveVideo({
   handles.current = { toggle, fullScreen, mute: toggleMute, rate: cycleRate };
   const { VideoView } = video;
   return /* @__PURE__ */ jsxs(View, { testID: `${testID}-active`, style, children: [
-    /* @__PURE__ */ jsx(VideoView, { ref: viewRef, player, nativeControls: false, contentFit: "cover", allowsPictureInPicture: false, style: { width: "100%", height: "100%" }, testID: `${testID}-view` }),
+    /* @__PURE__ */ jsx(
+      VideoView,
+      {
+        ref: viewRef,
+        player,
+        nativeControls: false,
+        contentFit: "cover",
+        allowsPictureInPicture: false,
+        onFullscreenEnter: () => {
+          fullScreenOpen.current = true;
+        },
+        onFullscreenExit: () => {
+          fullScreenOpen.current = false;
+        },
+        style: { width: "100%", height: "100%" },
+        testID: `${testID}-view`
+      }
+    ),
     /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -1054,7 +1103,7 @@ function MessageBubbleImpl(props) {
   const photos = attachments.filter((a) => a.kind === "image" && a.uri && props.onOpenImage);
   const videos = attachments.filter((a) => a.kind === "video" && modules.video && (a.uri || a.playbackId));
   const playingVideo = usePlayingVideo(videos.map((a) => a.key));
-  const cardActions = message ? cards.map((a) => cardAction(kinds?.[a.kind], a, message, props.onOpenAttachment)) : [];
+  const cardActions = message ? cards.map((a) => cardAction(kinds?.[a.kind], a, message, props.onOpenAttachment, { mine })) : [];
   const playingVoice = usePlayingVoiceNote(voices.map((a) => a.key));
   const x = useRef(new Animated.Value(0)).current;
   const latest = useRef(props);
@@ -1096,7 +1145,7 @@ function MessageBubbleImpl(props) {
     senderName,
     message?.deletedAt ? copy.deleted : displayBody(body),
     attachments.map((a) => a.kind === "image" ? copy.photo : a.kind === "voice" ? copy.voice : a.kind === "video" ? copy.video : copy.file).join(", "),
-    cards.map((a) => cardTitle(kinds?.[a.kind], a)).join(", "),
+    cards.map((a) => cardTitle(kinds?.[a.kind], a, { mine })).join(", "),
     preview ? fill(copy.linkPreview, { title: preview.title?.trim() || linkHost(preview.url), site: preview.siteName?.trim() || linkHost(preview.url) }) : null,
     time,
     message?.editedAt ? copy.edited : null,
@@ -1239,19 +1288,12 @@ function MessageBubbleImpl(props) {
 function SmallAction({ label, onPress, color, testID }) {
   return /* @__PURE__ */ jsx(Pressable, { testID, accessibilityRole: "button", accessibilityLabel: label, onPress, style: { minHeight: 44, minWidth: 44, paddingHorizontal: 8, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(NativeText, { preset: "label", style: { color }, children: label }) });
 }
-function cardTitle(kind, a) {
-  try {
-    return kind?.title(a) || a.name || a.kind;
-  } catch {
-    return a.name || a.kind;
-  }
-}
 var MessageBubble = memo(MessageBubbleImpl);
 function inboxRow(item, ctx) {
   const other = item.otherUserId ? ctx.person(item.otherUserId) : void 0;
   const title = item.title ?? other?.name ?? ctx.copy.untitled;
   const last = item.lastMessage;
-  const text = last ? previewText(displayBody(last.body), last.attachment, last.deleted) : "";
+  const text = last ? attachmentPreview(displayBody(last.body), last.attachment, ctx.kinds, last.deleted) : "";
   const preview = last && text && last.senderId === ctx.me && last.kind !== "system" ? `${ctx.copy.youPrefix}${text}` : text;
   return {
     id: item.conversationId,
@@ -1265,7 +1307,7 @@ function inboxRow(item, ctx) {
   };
 }
 function ChatInboxScreen({ onOpen, onStart, kind, kinds, excludeKinds, archived, pageProps, testID = "chat-inbox" }) {
-  const { client, userId } = useChat();
+  const { client, userId, attachmentKinds } = useChat();
   const queryClient = useQueryClient();
   const { copy, person: known } = useChatNative();
   const inbox = useInbox({ kind, kinds, excludeKinds, archived });
@@ -1286,7 +1328,7 @@ function ChatInboxScreen({ onOpen, onStart, kind, kinds, excludeKinds, archived,
     void queryClient.invalidateQueries({ queryKey: chatKeys.unread() });
   }, [queryClient]);
   const items = inbox.items.map((item) => ({
-    ...inboxRow(item, { me: userId, copy, person }),
+    ...inboxRow(item, { me: userId, copy, person, kinds: attachmentKinds }),
     onPress: () => onOpen(item.conversationId),
     swipeActions: [
       ...item.unread > 0 ? [{ id: "read", label: copy.markRead, onPress: () => void client.markRead(item.conversationId).then(settle, settle) }] : [],
@@ -1414,6 +1456,7 @@ function ChatVideoRecorder(props) {
 }
 function RecorderBody({ camera, onClose, limitMs, onStart, onTick, onRecorded, now = Date.now, testID }) {
   const { copy, modules } = useChatNative();
+  const insets = useSafeAreaInsets();
   const colors = useThemeRoles();
   const [state, setState] = useState(() => initialVideoRecorder());
   const stateRef = useRef(state);
@@ -1516,7 +1559,7 @@ function RecorderBody({ camera, onClose, limitMs, onStart, onTick, onRecorded, n
       },
       state.cameraKey
     ) : null,
-    /* @__PURE__ */ jsxs(SafeAreaView, { edges: ["top", "bottom", "left", "right"], style: { flex: 1, justifyContent: "space-between" }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { flex: 1, justifyContent: "space-between", paddingTop: insets.top, paddingBottom: insets.bottom, paddingLeft: insets.left, paddingRight: insets.right }, children: [
       /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 8, paddingTop: 4 }, children: [
         /* @__PURE__ */ jsx(
           Pressable,
@@ -2176,35 +2219,27 @@ function ChatScheduleSheet({ open, onOpenChange, onSchedule, now, testID = "chat
     setCustom(false);
     onSchedule(when);
   };
-  return /* @__PURE__ */ jsx(
-    NativeSheet,
-    {
-      open,
-      onOpenChange,
-      testID,
-      children: /* @__PURE__ */ jsxs(View, { style: { paddingVertical: 8 }, children: [
-        /* @__PURE__ */ jsxs(View, { style: { paddingHorizontal: 16, paddingBottom: 8, gap: 4 }, children: [
-          /* @__PURE__ */ jsx(NativeText, { preset: "h4", accessibilityRole: "header", children: copy.scheduleTitle }),
-          /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { color: colors.secondaryLabel }, children: copy.scheduleHint })
-        ] }),
-        custom ? /* @__PURE__ */ jsxs(View, { style: { paddingHorizontal: 16, gap: 12 }, testID: `${testID}-custom`, children: [
-          /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 12, minHeight: 44 }, children: [
-            /* @__PURE__ */ jsx(NativeText, { preset: "body", children: copy.scheduleDate }),
-            /* @__PURE__ */ jsx(NativeDatePicker, { testID: `${testID}-date`, value: at, onChange: (d) => setAt((x) => withDay(x, d)) })
-          ] }),
-          /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 12, minHeight: 44 }, children: [
-            /* @__PURE__ */ jsx(NativeText, { preset: "body", children: copy.scheduleTime }),
-            /* @__PURE__ */ jsx(NativeTimePicker, { testID: `${testID}-time`, value: at, onChange: (d) => setAt((x) => withTime(x, d)) })
-          ] }),
-          /* @__PURE__ */ jsx(NativeText, { testID: `${testID}-when`, preset: "caption", accessibilityLiveRegion: "polite", style: { color: ok ? colors.secondaryLabel : colors.destructive }, children: ok ? scheduleLabel(at, clock) : copy.scheduleOutOfRange }),
-          /* @__PURE__ */ jsx(NativeButton, { testID: `${testID}-confirm`, onPress: () => ok && choose(at), disabled: !ok, children: copy.scheduleConfirm })
-        ] }) : /* @__PURE__ */ jsxs(View, { children: [
-          picks.map((p, i) => /* @__PURE__ */ jsx(NativeListItem, { testID: `${testID}-pick-${i}`, title: p.label, leading: /* @__PURE__ */ jsx(NativeIcon, { name: "clock" }), onPress: () => choose(p.at) }, p.label)),
-          /* @__PURE__ */ jsx(NativeListItem, { testID: `${testID}-pick-custom`, title: copy.schedulePick, leading: /* @__PURE__ */ jsx(NativeIcon, { name: "calendar" }), showChevron: true, onPress: () => setCustom(true) })
-        ] })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsx(NativeSheet, { open, onOpenChange, fitContent: true, testID, children: /* @__PURE__ */ jsxs(View, { style: { paddingVertical: 8 }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { paddingHorizontal: 16, paddingBottom: 8, gap: 4 }, children: [
+      /* @__PURE__ */ jsx(NativeText, { preset: "h4", accessibilityRole: "header", children: copy.scheduleTitle }),
+      /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { color: colors.secondaryLabel }, children: copy.scheduleHint })
+    ] }),
+    custom ? /* @__PURE__ */ jsxs(View, { style: { paddingHorizontal: 16, gap: 12 }, testID: `${testID}-custom`, children: [
+      /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 12, minHeight: 44 }, children: [
+        /* @__PURE__ */ jsx(NativeText, { preset: "body", children: copy.scheduleDate }),
+        /* @__PURE__ */ jsx(NativeDatePicker, { testID: `${testID}-date`, value: at, onChange: (d) => setAt((x) => withDay(x, d)) })
+      ] }),
+      /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 12, minHeight: 44 }, children: [
+        /* @__PURE__ */ jsx(NativeText, { preset: "body", children: copy.scheduleTime }),
+        /* @__PURE__ */ jsx(NativeTimePicker, { testID: `${testID}-time`, value: at, onChange: (d) => setAt((x) => withTime(x, d)) })
+      ] }),
+      /* @__PURE__ */ jsx(NativeText, { testID: `${testID}-when`, preset: "caption", accessibilityLiveRegion: "polite", style: { color: ok ? colors.secondaryLabel : colors.destructive }, children: ok ? scheduleLabel(at, clock) : copy.scheduleOutOfRange }),
+      /* @__PURE__ */ jsx(NativeButton, { testID: `${testID}-confirm`, onPress: () => ok && choose(at), disabled: !ok, children: copy.scheduleConfirm })
+    ] }) : /* @__PURE__ */ jsxs(View, { children: [
+      picks.map((p, i) => /* @__PURE__ */ jsx(NativeListItem, { testID: `${testID}-pick-${i}`, title: p.label, leading: /* @__PURE__ */ jsx(NativeIcon, { name: "clock" }), onPress: () => choose(p.at) }, p.label)),
+      /* @__PURE__ */ jsx(NativeListItem, { testID: `${testID}-pick-custom`, title: copy.schedulePick, leading: /* @__PURE__ */ jsx(NativeIcon, { name: "calendar" }), showChevron: true, onPress: () => setCustom(true) })
+    ] })
+  ] }) });
 }
 function ChatScheduledList({ conversationId, conversationTitle, testID = "chat-scheduled" }) {
   const { copy } = useChatNative();
@@ -2231,12 +2266,20 @@ function ChatScheduledList({ conversationId, conversationTitle, testID = "chat-s
     s.id
   )) });
 }
+function scheduledActionLabel(item, copy, kinds) {
+  const text = attachmentPreview(displayBody(item.body), item.attachments[0]?.kind ?? null, kinds);
+  const chars = Array.from(text);
+  const short = chars.length > 60 ? `${chars.slice(0, 59).join("")}\u2026` : text;
+  if (item.status === "failed") return [copy.scheduledRemove, short].filter(Boolean).join(", ");
+  return [copy.scheduledCancel, short, fill(copy.scheduledFor, { when: scheduleLabel(item.sendAt) })].filter(Boolean).join(", ");
+}
 function ScheduledRow({ item, where, onCancel, testID }) {
   const { copy } = useChatNative();
   const colors = useThemeRoles();
+  const { attachmentKinds } = useChat();
   const failed = item.status === "failed";
   const when = failed ? copy.scheduledCouldntSend : scheduleLabel(item.sendAt);
-  const text = previewText(displayBody(item.body), item.attachments[0]?.kind ?? null);
+  const text = attachmentPreview(displayBody(item.body), item.attachments[0]?.kind ?? null, attachmentKinds);
   return /* @__PURE__ */ jsxs(View, { testID, style: { flexDirection: "row", alignItems: "center", gap: 12, paddingLeft: 16, paddingRight: 4, paddingVertical: 8, minHeight: 56 }, children: [
     /* @__PURE__ */ jsx(NativeIcon, { name: failed ? "warning" : "clock", size: 18, color: failed ? colors.destructive : colors.secondaryLabel }),
     /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: 2 }, accessible: true, accessibilityLabel: [when, where, text, item.error].filter(Boolean).join(", "), children: [
@@ -2251,7 +2294,7 @@ function ScheduledRow({ item, where, onCancel, testID }) {
         {
           testID: `${testID}-cancel`,
           accessibilityRole: "button",
-          accessibilityLabel: failed ? `${copy.scheduledRemove}, ${text}` : `${copy.scheduledCancel}, ${fill(copy.scheduledFor, { when })}`,
+          accessibilityLabel: scheduledActionLabel(item, copy, attachmentKinds),
           onPress: onCancel,
           style: { minHeight: 44, minWidth: 44, paddingHorizontal: 12, alignItems: "center", justifyContent: "center" },
           children: /* @__PURE__ */ jsx(NativeText, { preset: "label", style: { color: colors.destructive }, children: failed ? copy.scheduledRemove : copy.scheduledCancel })
@@ -2556,6 +2599,12 @@ function checkTopicName(title, topics, renaming) {
   const key = topicKey(name);
   return topics.some((t) => t.topic === key) ? { error: "exists" } : { key };
 }
+function scrollToShow(chip, view, margin = 8) {
+  if (view.width <= 0) return null;
+  if (chip.x - margin < view.offset) return Math.max(0, chip.x - margin);
+  if (chip.x + chip.width + margin > view.offset + view.width) return Math.max(0, chip.x + chip.width + margin - view.width);
+  return null;
+}
 function ChatTopicBar({ topics, value, onValueChange, canManage = false, onSetTopic, testID = "chat-topics" }) {
   const { copy } = useChatNative();
   const colors = useThemeRoles();
@@ -2565,6 +2614,28 @@ function ChatTopicBar({ topics, value, onValueChange, canManage = false, onSetTo
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState(null);
   const current = value ? topics.find((t) => t.topic === value) ?? null : null;
+  const scrollRef = useRef(null);
+  const chips = useRef(/* @__PURE__ */ new Map());
+  const view = useRef({ offset: 0, width: 0 });
+  const reveal = useCallback((key) => {
+    const chip = chips.current.get(key ?? ALL);
+    if (!chip) return;
+    const to = scrollToShow(chip, view.current);
+    if (to === null) return;
+    view.current.offset = to;
+    scrollRef.current?.scrollTo?.({ x: to, animated: true });
+  }, []);
+  const latestValue = useRef(value);
+  latestValue.current = value;
+  useEffect(() => reveal(value), [value, reveal]);
+  const trackOffset = (e) => {
+    view.current.offset = e.nativeEvent.contentOffset.x;
+  };
+  const onChipLayout = (key) => (e) => {
+    const { x, width } = e.nativeEvent.layout;
+    chips.current.set(key, { x, width });
+    if (key === (latestValue.current ?? ALL)) reveal(latestValue.current);
+  };
   const close = () => {
     if (busy) return;
     setSheet(null);
@@ -2606,15 +2677,34 @@ function ChatTopicBar({ topics, value, onValueChange, canManage = false, onSetTo
     }
   };
   return /* @__PURE__ */ jsxs(View, { testID, style: { flexDirection: "row", alignItems: "center", backgroundColor: colors.groupedBackground, paddingLeft: 8 }, children: [
-    /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, accessibilityLabel: copy.topics, contentContainerStyle: { paddingVertical: 4, paddingRight: 8 }, style: { flex: 1 }, children: /* @__PURE__ */ jsxs(NativeChipGroup, { mode: "single", value: value ?? ALL, onChange: (v) => onValueChange(v === ALL ? null : v), className: "flex-nowrap", testID: `${testID}-group`, children: [
-      /* @__PURE__ */ jsx(NativeChip, { value: ALL, testID: `${testID}-all`, children: copy.topicAll }),
-      topics.map((t) => /* @__PURE__ */ jsx(NativeChip, { value: t.topic, testID: `${testID}-${t.topic}`, children: /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [
-        t.closedAt ? /* @__PURE__ */ jsx(NativeIcon, { name: "lock", size: 13, color: colors.secondaryLabel, label: copy.topicClosed }) : null,
-        /* @__PURE__ */ jsx(NativeText, { preset: "body-sm", numberOfLines: 1, style: { maxWidth: 180, fontWeight: value === t.topic ? "600" : "400", color: value === t.topic ? colors.tint : colors.label }, children: t.title })
-      ] }) }, t.topic))
-    ] }) }),
+    /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        ref: scrollRef,
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        accessibilityLabel: copy.topics,
+        contentContainerStyle: { paddingVertical: 4, paddingRight: 8 },
+        style: { flex: 1 },
+        onLayout: (e) => {
+          view.current.width = e.nativeEvent.layout.width;
+          reveal(latestValue.current);
+        },
+        onScroll: trackOffset,
+        onScrollEndDrag: trackOffset,
+        onMomentumScrollEnd: trackOffset,
+        scrollEventThrottle: 64,
+        children: /* @__PURE__ */ jsxs(NativeChipGroup, { mode: "single", value: value ?? ALL, onChange: (v) => onValueChange(v === ALL ? null : v), className: "flex-nowrap", testID: `${testID}-group`, children: [
+          /* @__PURE__ */ jsx(View, { onLayout: onChipLayout(ALL), children: /* @__PURE__ */ jsx(NativeChip, { value: ALL, testID: `${testID}-all`, children: copy.topicAll }) }),
+          topics.map((t) => /* @__PURE__ */ jsx(View, { onLayout: onChipLayout(t.topic), children: /* @__PURE__ */ jsx(NativeChip, { value: t.topic, testID: `${testID}-${t.topic}`, children: /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [
+            t.closedAt ? /* @__PURE__ */ jsx(NativeIcon, { name: "lock", size: 13, color: colors.secondaryLabel, label: copy.topicClosed }) : null,
+            /* @__PURE__ */ jsx(NativeText, { preset: "body-sm", numberOfLines: 1, style: { maxWidth: 180, fontWeight: value === t.topic ? "600" : "400", color: value === t.topic ? colors.tint : colors.label }, children: t.title })
+          ] }) }) }, t.topic))
+        ] })
+      }
+    ),
     canManage && onSetTopic ? /* @__PURE__ */ jsx(ChatIconButton, { testID: `${testID}-menu`, icon: "more", label: copy.topicOptions, onPress: () => setSheet({ step: "menu" }) }) : null,
-    /* @__PURE__ */ jsx(NativeSheet, { open: sheet !== null, onOpenChange: (o) => o ? void 0 : close(), testID: `${testID}-sheet`, children: sheet?.step === "name" ? /* @__PURE__ */ jsxs(View, { style: { padding: 16, gap: 12 }, children: [
+    /* @__PURE__ */ jsx(NativeSheet, { open: sheet !== null, onOpenChange: (o) => o ? void 0 : close(), fitContent: true, testID: `${testID}-sheet`, children: sheet?.step === "name" ? /* @__PURE__ */ jsxs(View, { style: { padding: 16, gap: 12 }, children: [
       /* @__PURE__ */ jsx(NativeText, { preset: "h4", accessibilityRole: "header", children: sheet.renaming ? copy.topicRename : copy.topicNew }),
       /* @__PURE__ */ jsx(
         NativeInput,
@@ -3909,7 +3999,7 @@ function messageActionsFor(message, ctx) {
   return out;
 }
 var ICONS = { reply: "reply", copy: "copy", pin: "pin", unpin: "pin", delete: "trash" };
-function MessageActionsSheet({ message, context, onClose, onReact, onAction, testID = "chat-message-actions" }) {
+function MessageActionsSheet({ message, context, onClose, onReact, onAction, attachmentKinds, testID = "chat-message-actions" }) {
   const { copy } = useChatNative();
   const colors = useThemeRoles();
   const actions = message ? messageActionsFor(message, context) : [];
@@ -3942,51 +4032,54 @@ function MessageActionsSheet({ message, context, onClose, onReact, onAction, tes
         onReact(message, emoji, !mineReactions.has(emoji));
       }
     }
-  ) }) : message ? /* @__PURE__ */ jsxs(View, { style: { gap: 12, paddingBottom: 8, paddingHorizontal: 16 }, children: [
-    /* @__PURE__ */ jsx(NativeText, { numberOfLines: 2, preset: "body-sm", style: { color: colors.secondaryLabel, paddingHorizontal: 4 }, children: previewText(message.body, message.attachments[0]?.kind, Boolean(message.deletedAt)) }),
-    canReactTo(message, context) ? /* @__PURE__ */ jsxs(View, { accessibilityRole: "toolbar", style: { flexDirection: "row", justifyContent: "space-between" }, children: [
-      QUICK_REACTIONS.map((emoji) => {
-        const on = mineReactions.has(emoji);
-        return /* @__PURE__ */ jsx(
+  ) }) : message ? (
+    // Room at the top: the iOS page sheet has no grabber, and its rounded corner clipped the caption.
+    /* @__PURE__ */ jsxs(View, { style: { gap: 12, paddingTop: 20, paddingBottom: 8, paddingHorizontal: 16 }, children: [
+      /* @__PURE__ */ jsx(NativeText, { testID: `${testID}-caption`, numberOfLines: 2, preset: "body-sm", style: { color: colors.secondaryLabel, paddingHorizontal: 4 }, children: messagePreview(message, attachmentKinds) }),
+      canReactTo(message, context) ? /* @__PURE__ */ jsxs(View, { accessibilityRole: "toolbar", style: { flexDirection: "row", justifyContent: "space-between" }, children: [
+        QUICK_REACTIONS.map((emoji) => {
+          const on = mineReactions.has(emoji);
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              testID: `${testID}-react-${emoji}`,
+              accessibilityRole: "button",
+              accessibilityState: { selected: on },
+              accessibilityLabel: fill(copy.react, { emoji }),
+              onPress: () => {
+                onClose();
+                onReact(message, emoji, !on);
+              },
+              style: { width: 48, height: 48, borderRadius: 24, alignItems: "center", justifyContent: "center", backgroundColor: on ? colors.fill : void 0 },
+              children: /* @__PURE__ */ jsx(NativeText, { style: { fontSize: 26, lineHeight: 34 }, children: emoji })
+            },
+            emoji
+          );
+        }),
+        /* @__PURE__ */ jsx(
           Pressable,
           {
-            testID: `${testID}-react-${emoji}`,
+            testID: `${testID}-react-more`,
             accessibilityRole: "button",
-            accessibilityState: { selected: on },
-            accessibilityLabel: fill(copy.react, { emoji }),
-            onPress: () => {
-              onClose();
-              onReact(message, emoji, !on);
-            },
-            style: { width: 48, height: 48, borderRadius: 24, alignItems: "center", justifyContent: "center", backgroundColor: on ? colors.fill : void 0 },
-            children: /* @__PURE__ */ jsx(NativeText, { style: { fontSize: 26, lineHeight: 34 }, children: emoji })
-          },
-          emoji
-        );
-      }),
-      /* @__PURE__ */ jsx(
-        Pressable,
+            accessibilityLabel: copy.moreReactions,
+            onPress: () => setPicking(true),
+            style: { width: 48, height: 48, borderRadius: 24, alignItems: "center", justifyContent: "center", backgroundColor: colors.fill },
+            children: /* @__PURE__ */ jsx(NativeIcon, { name: "plus", size: 22, color: colors.secondaryLabel })
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsx(View, { children: actions.map((action) => /* @__PURE__ */ jsx(
+        NativeListItem,
         {
-          testID: `${testID}-react-more`,
-          accessibilityRole: "button",
-          accessibilityLabel: copy.moreReactions,
-          onPress: () => setPicking(true),
-          style: { width: 48, height: 48, borderRadius: 24, alignItems: "center", justifyContent: "center", backgroundColor: colors.fill },
-          children: /* @__PURE__ */ jsx(NativeIcon, { name: "plus", size: 22, color: colors.secondaryLabel })
-        }
-      )
-    ] }) : null,
-    /* @__PURE__ */ jsx(View, { children: actions.map((action) => /* @__PURE__ */ jsx(
-      NativeListItem,
-      {
-        testID: `${testID}-${action}`,
-        title: labels[action],
-        leading: /* @__PURE__ */ jsx(NativeIcon, { name: ICONS[action], size: 20, color: action === "delete" ? colors.destructive : colors.label }),
-        onPress: () => run(action)
-      },
-      action
-    )) })
-  ] }) : null });
+          testID: `${testID}-${action}`,
+          title: labels[action],
+          leading: /* @__PURE__ */ jsx(NativeIcon, { name: ICONS[action], size: 20, color: action === "delete" ? colors.destructive : colors.label }),
+          onPress: () => run(action)
+        },
+        action
+      )) })
+    ] })
+  ) : null });
 }
 
 // src/native/rows.ts
@@ -4038,7 +4131,7 @@ function nearBottom(m, slack = AT_BOTTOM_POINTS) {
   return m.contentOffset.y + m.layoutMeasurement.height >= m.contentSize.height - slack;
 }
 function ChatThreadScreen(props) {
-  const { conversationId, threadRootId = null, keyboardVerticalOffset, onOpenAttachment, jumpTo, topic: topicProp, showTopics = false, scheduling = true, availability = true, testID = "chat-thread" } = props;
+  const { conversationId, threadRootId = null, keyboardVerticalOffset, onOpenAttachment, jumpTo, topic: topicProp, showTopics = false, scheduling = true, availability = true, focused = true, testID = "chat-thread" } = props;
   const chat = useChat();
   const { userId, videoUpload, attachmentKinds, outbox } = chat;
   const linkPreviewImages = chat.linkPreviewImages === true;
@@ -4099,6 +4192,14 @@ function ChatThreadScreen(props) {
   const rows = useMemo(() => buildThreadRows(conv.items, { me: userId, firstUnreadId: conv.firstUnreadId, group }), [conv.items, userId, conv.firstUnreadId, group]);
   const paths = useMemo(() => conv.items.flatMap((i) => i.type === "message" ? attachmentPaths(i.message.attachments) : []), [conv.items]);
   const urls = useFileUrls(paths);
+  const itemsNow = useRef(conv.items);
+  itemsNow.current = conv.items;
+  useEffect(() => {
+    if (focused) return;
+    pauseChatPlayback(
+      (id) => itemsNow.current.some((i) => i.type === "message" ? i.message.attachments.some((a) => a.id === id) : i.type === "pending" && id.startsWith(`${i.pending.clientId}:`))
+    );
+  }, [focused]);
   const byId = useMemo(() => new Map(conv.messages.map((m) => [m.id, m])), [conv.messages]);
   const linkIds = useMemo(() => linkPreviewIds(conv.messages), [conv.messages]);
   const previews = useLinkPreviews(linkIds);
@@ -4198,7 +4299,13 @@ function ChatThreadScreen(props) {
     loadUntil,
     scrollTo: (index2, id) => {
       jumpingTo.current = { id, tries: 0 };
-      requestAnimationFrame(() => listRef.current?.scrollToIndex?.({ index: index2, animated: !reducedMotion, viewPosition: 0.5 }));
+      const scroll = (at) => listRef.current?.scrollToIndex?.({ index: at, animated: !reducedMotion, viewPosition: 0.5 });
+      requestAnimationFrame(() => scroll(index2));
+      if (retryTimer.current) clearTimeout(retryTimer.current);
+      retryTimer.current = setTimeout(() => {
+        const at = rowIndexOf(rowsNow.current, id);
+        if (at >= 0) scroll(at);
+      }, 250);
     },
     onStart: () => {
       atBottom.current = false;
@@ -4302,7 +4409,7 @@ function ChatThreadScreen(props) {
     /* @__PURE__ */ jsxs(KeyboardAvoiding, { style: { flex: 1 }, ...keyboardProps, children: [
       showTopicBar ? /* @__PURE__ */ jsx(ChatTopicBar, { topics, value: topic ?? null, onValueChange: setChosenTopic, canManage: canManageTopics(conv.role), onSetTopic: topicsState.setTopic, testID: `${testID}-topics` }) : null,
       /* @__PURE__ */ jsx(ChatAwayLine, { text: awayLine, testID: `${testID}-away` }),
-      /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: conv.isLoading ? /* @__PURE__ */ jsx(LoadingThread, { testID: `${testID}-loading` }) : empty ? /* @__PURE__ */ jsx(View, { style: { flex: 1, justifyContent: "center" }, children: /* @__PURE__ */ jsx(NativeEmptyState, { variant: "first-run", title: copy.threadEmptyTitle, body: copy.threadEmptyBody, testID: `${testID}-empty` }) }) : /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: conv.isLoading ? /* @__PURE__ */ jsx(LoadingThread, { testID: `${testID}-loading` }) : empty ? /* @__PURE__ */ jsx(View, { style: { flex: 1, justifyContent: "center" }, children: /* @__PURE__ */ jsx(NativeEmptyState, { variant: "first-run", title: copy.threadEmptyTitle, body: currentTopic?.closedAt ? copy.topicClosedNotice : copy.threadEmptyBody, testID: `${testID}-empty` }) }) : /* @__PURE__ */ jsx(
         List,
         {
           ref: listRef,
@@ -4379,6 +4486,7 @@ function ChatThreadScreen(props) {
         onClose: () => setActionsFor(null),
         onReact: react,
         onAction,
+        attachmentKinds,
         testID: `${testID}-actions`
       }
     ),
@@ -4869,13 +4977,11 @@ function ChatSearchScreen({ conversationId, onOpen, conversationTitle, debounceM
           const where = conversationId ? null : fill(copy.searchIn, { name: titleOf(h.conversationId) });
           const when = formatInboxTime(new Date(h.createdAt), now());
           return /* @__PURE__ */ jsxs(
-            Pressable,
+            HitRow,
             {
               testID: `${testID}-hit-${h.messageId}`,
-              accessibilityRole: "button",
               accessibilityLabel: [who, where, when, h.inTranscript ? copy.transcript : null, snippetText(h.snippet)].filter(Boolean).join(", "),
               onPress: () => onOpen(h),
-              style: ({ pressed }) => ({ minHeight: 56, paddingHorizontal: 16, paddingVertical: 10, gap: 4, backgroundColor: pressed ? colors.fill : "transparent" }),
               children: [
                 /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [
                   /* @__PURE__ */ jsx(NativeText, { preset: "label", numberOfLines: 1, style: { flexShrink: 1 }, children: who }),
@@ -4897,7 +5003,24 @@ function ChatSearchScreen({ conversationId, onOpen, conversationTitle, debounceM
     )
   ] });
 }
+function HitRow({ testID, accessibilityLabel, onPress, children }) {
+  const colors = useThemeRoles();
+  const [pressed, setPressed] = useState(false);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      testID,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      onPress,
+      onPressIn: () => setPressed(true),
+      onPressOut: () => setPressed(false),
+      style: { minHeight: 56, paddingHorizontal: 16, paddingVertical: 10, gap: 4, backgroundColor: pressed ? colors.fill : "transparent" },
+      children
+    }
+  );
+}
 
-export { AT_BOTTOM_POINTS, ChatAccessError, ChatAttachmentCard, ChatAutoRetry, ChatAvailabilityScreen, ChatAwayLine, ChatBroadcastSheet, ChatComposer, ChatEmojiPicker, ChatEmojiPickerSheet, ChatIconButton, ChatInboxScreen, ChatLinkPreviewCard, ChatMediaViewer, ChatNativeProvider, ChatPhotoViewer, ChatScheduleSheet, ChatScheduledBar, ChatScheduledList, ChatSearchScreen, ChatStartButton, ChatStartSheet, ChatThreadScreen, ChatTopicBar, ChatVideoPlayer, ChatVideoRecorder, DISMISS_DISTANCE, DISMISS_VELOCITY, EMOJI_CATEGORIES, MAX_ZOOM, MessageActionsSheet, MessageAttachments, MessageBubble, ModerationMarker, QUICK_REACTIONS, RECENT_EMOJI_MAX, SearchSnippet, TUS_CHUNK_BYTES, VIDEO_CHUNK_BYTES, VIDEO_HOLD_MS, VIDEO_MIN_MS, VideoUploadTray, VoiceNotePlayer, activePlaybackId, attachmentPaths, availabilityInput, awayLineFor, barsThatFit, base64ToBytes, base64Utf8, broadcastOutcome, broadcastRows, buildThreadRows, canManageTopics, canReactTo, canSend, cardAction, chatNativeCopy, chatOrganiseCopy, chatThreadStackOptions, checkTopicName, chunkedPut, claimPlayback, clearDrafts, clockToDate, composerDisabledReason, composerReducer, createDraftSaver, createTusUpload, createVideoUploads, cycleVideoRate, cycleVoiceNoteRate, dateToClock, defaultScheduleAt, defaultWeek, deviceTimeZone, displayBody, draftKey, emojiEntry, emojiInCategory, emptyComposer, fileFromDataUri, fileSource, filesFromAssets, fill, forgetRecentEmoji, formFrom, formatClock, fullScreenVideo, galleryFor, haptic, hoursFromWeek, idleRecorder, inboxRow, initialVideoRecorder, initials, insertAtSelection, invertedRows, isLocalUri, isOnline, isOpenableHref, isVideoPlaying, linkHost, linkPreviewIds, liveBars, loadDraft, loadRecentEmoji, memoryDraftStorage, messageActionsFor, moderationNote, moderationText, muxPosterUrl, muxStreamUrl, nearBottom, nextOffset, openChatLink, panLimit, pinchScale, previewToShow, pushRecentEmoji, recentEmojiKey, recordedVideoFile, recorderStep, recordingType, releasePlayback, replyTargetFor, resolveChatCopy, rowIndexOf, rowKey, sameTimeDays, saveRecentEmoji, scheduleInputFrom, scrubSeconds, searchEmoji, shouldDismiss, snippetText, splitCardAttachments, threadListMode, timeZones, toSend, toggleVideo, toggleVideoMute, toggleVoiceNote, topicClosedFor, topicMenuFor, useAwayLine, useChatAutoRetry, useChatComposer, useChatNative, useChatThreadStackOptions, useJumpToMessage, usePlayingVideo, usePlayingVoiceNote, useScheduleSend, useVideoUploads, useVoiceRecorder, videoRecorderStep, videoSource, videoState, videoUploads, voiceNoteFile, waveformBars, weekFromHours, withDay, withTime };
+export { AT_BOTTOM_POINTS, ChatAccessError, ChatAttachmentCard, ChatAutoRetry, ChatAvailabilityScreen, ChatAwayLine, ChatBroadcastSheet, ChatComposer, ChatEmojiPicker, ChatEmojiPickerSheet, ChatIconButton, ChatInboxScreen, ChatLinkPreviewCard, ChatMediaViewer, ChatNativeProvider, ChatPhotoViewer, ChatScheduleSheet, ChatScheduledBar, ChatScheduledList, ChatSearchScreen, ChatStartButton, ChatStartSheet, ChatThreadScreen, ChatTopicBar, ChatVideoPlayer, ChatVideoRecorder, DISMISS_DISTANCE, DISMISS_VELOCITY, EMOJI_CATEGORIES, MAX_ZOOM, MessageActionsSheet, MessageAttachments, MessageBubble, ModerationMarker, QUICK_REACTIONS, RECENT_EMOJI_MAX, SearchSnippet, TUS_CHUNK_BYTES, VIDEO_CHUNK_BYTES, VIDEO_HOLD_MS, VIDEO_MIN_MS, VideoUploadTray, VoiceNotePlayer, activePlaybackId, attachmentPaths, availabilityInput, awayLineFor, barsThatFit, base64ToBytes, base64Utf8, broadcastOutcome, broadcastRows, buildThreadRows, canManageTopics, canReactTo, canSend, cardAction, chatNativeCopy, chatOrganiseCopy, chatThreadStackOptions, checkTopicName, chunkedPut, claimPlayback, clearDrafts, clockToDate, composerDisabledReason, composerReducer, createDraftSaver, createTusUpload, createVideoUploads, cycleVideoRate, cycleVoiceNoteRate, dateToClock, defaultScheduleAt, defaultWeek, deviceTimeZone, displayBody, draftKey, emojiEntry, emojiInCategory, emptyComposer, fileFromDataUri, fileSource, filesFromAssets, fill, forgetRecentEmoji, formFrom, formatClock, fullScreenVideo, galleryFor, haptic, hoursFromWeek, idleRecorder, inboxRow, initialVideoRecorder, initials, insertAtSelection, invertedRows, isLocalUri, isOnline, isOpenableHref, isVideoPlaying, linkHost, linkPreviewIds, liveBars, loadDraft, loadRecentEmoji, memoryDraftStorage, messageActionsFor, moderationNote, moderationText, muxPosterUrl, muxStreamUrl, nearBottom, nextOffset, openChatLink, panLimit, pauseChatPlayback, pinchScale, previewToShow, pushRecentEmoji, recentEmojiKey, recordedVideoFile, recorderStep, recordingType, releasePlayback, replyTargetFor, resolveChatCopy, rowIndexOf, rowKey, sameTimeDays, saveRecentEmoji, scheduleInputFrom, scrubSeconds, searchEmoji, shouldDismiss, snippetText, splitCardAttachments, threadListMode, timeZones, toSend, toggleVideo, toggleVideoMute, toggleVoiceNote, topicClosedFor, topicMenuFor, useAwayLine, useChatAutoRetry, useChatComposer, useChatNative, useChatThreadStackOptions, useJumpToMessage, usePlayingVideo, usePlayingVoiceNote, useScheduleSend, useVideoUploads, useVoiceRecorder, videoRecorderStep, videoSource, videoState, videoUploads, voiceNoteFile, waveformBars, weekFromHours, withDay, withTime };
 //# sourceMappingURL=native.js.map
 //# sourceMappingURL=native.js.map