@poolse/react-native 2.19.0 → 2.20.0

package/CHANGELOG.md

@@ -4,6 +4,44 @@ All notable changes to `@poolse/react-native` are documented here.
 Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/);
 versions follow [semver](https://semver.org).
 
+## [2.20.0] — 2026-10-13
+
+### Changed
+
+- **The message bubble, rebuilt.** Same props, new rendering:
+  - The timestamp (with `edited` and the read ticks) sits on the last
+    line of plain-text bodies — an invisible twin reserves its exact
+    footprint, so it shares the line or wraps flush right. Short
+    messages are one-line bubbles again; the `minWidth` floor that
+    padded them out is gone.
+  - Media bleeds to a 3px frame of bubble color, capped at 420pt,
+    corners concentric with the bubble (default radius 16 → 18). When
+    a caption or file cards follow, the mosaic squares its bottom
+    corners into the text instead of leaving "ears" of bubble color.
+  - Image-only messages float the meta on a scrim pill over the
+    picture, matching the web package.
+  - 1–3 emoji and nothing else render large, without bubble chrome.
+  - Quote cards: 10pt radius, darker-than-bubble tint on both sides,
+    and a quoted-of-deleted fallback matching web.
+  - A deleted message renders its tombstone even when the body was
+    cleared server-side.
+
+- **The always-visible corner chevron is gone.** It stamped a control
+  into the bubble's rounded corner and duplicated affordances a phone
+  already has — long-press opens the actions sheet, swipe quotes.
+  `MessageBubble`'s `actionsTrigger` slot remains for custom rows.
+
+### Added
+
+- `AttachmentPreview tone="onBrand"` — restyles the file card for
+  brand-colored self bubbles (translucent white instead of a surface
+  patch). `MessageBubble` passes it automatically.
+- `ImageMosaic squareBottom` — small bottom radii for mosaics that
+  flow into a caption; `radius` now applies per-corner. The mosaic
+  also takes an explicit pixel width from the bubble, fixing a layout
+  where a percentage against the auto-sized bubble could collapse or
+  blow the row open.
+
 ## [2.19.0] — 2026-08-25
 
 ### Added

package/dist/index.cjs

@@ -113,7 +113,7 @@ var radii = {
   lg: 16,
   xl: 24,
   pill: 999,
-  bubble: 16
+  bubble: 18
 };
 var spacing = {
   xs: 4,
@@ -2345,7 +2345,12 @@ var styles12 = reactNative.StyleSheet.create({
     fontWeight: "500"
   }
 });
-function AttachmentPreview({ attachment, onPress, maxWidth = 280 }) {
+function AttachmentPreview({
+  attachment,
+  onPress,
+  maxWidth = 280,
+  tone = "default"
+}) {
   const theme = usePoolseTheme();
   const isImage = (attachment.content_type ?? "").startsWith("image/");
   const { url } = react$1.useAttachmentUrl(attachment.id);
@@ -2379,6 +2384,9 @@ function AttachmentPreview({ attachment, onPress, maxWidth = 280 }) {
       }
     ) });
   }
+  const onBrand = tone === "onBrand";
+  const ink = onBrand ? theme.colors.onBrand : theme.colors.ink;
+  const inkSoft = onBrand ? theme.colors.onBrand : theme.colors.ink3;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.Pressable,
     {
@@ -2387,23 +2395,23 @@ function AttachmentPreview({ attachment, onPress, maxWidth = 280 }) {
       style: [
         styles13.fileCard,
         {
-          backgroundColor: theme.colors.surface2,
-          borderColor: theme.colors.border,
+          backgroundColor: onBrand ? "rgba(255,255,255,0.18)" : theme.colors.surface2,
+          borderColor: onBrand ? "transparent" : theme.colors.border,
           borderRadius: theme.radii.md
         }
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PoolseIcon, { name: "attachment", size: 18, color: theme.colors.ink2 }),
+        /* @__PURE__ */ jsxRuntime.jsx(PoolseIcon, { name: "attachment", size: 18, color: onBrand ? ink : theme.colors.ink2 }),
         /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flex: 1, marginLeft: 8 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Text,
             {
-              style: [styles13.fileName, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+              style: [styles13.fileName, { color: ink, fontFamily: theme.type.fontBody }],
               numberOfLines: 1,
               children: attachment.original_filename ?? "file"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.fileSize, { color: theme.colors.ink3 }], children: formatBytes2(attachment.byte_size) })
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.fileSize, { color: inkSoft, opacity: onBrand ? 0.8 : 1 }], children: formatBytes2(attachment.byte_size) })
         ] })
       ]
     }
@@ -2431,9 +2439,10 @@ var styles13 = reactNative.StyleSheet.create({
     fontSize: 11
   }
 });
-function ImageMosaic({ images, maxWidth, radius }) {
+function ImageMosaic({ images, maxWidth, radius, squareBottom = false }) {
   const theme = usePoolseTheme();
   const r = radius ?? theme.radii.md;
+  const rBottom = squareBottom ? 5 : r;
   const [viewerIndex, setViewerIndex] = react.useState(null);
   if (images.length === 0) return null;
   const visible = images.slice(0, 4);
@@ -2446,8 +2455,17 @@ function ImageMosaic({ images, maxWidth, radius }) {
         style: [
           styles14.root,
           {
-            borderRadius: r,
-            ...maxWidth ? { maxWidth } : {}
+            borderTopLeftRadius: r,
+            borderTopRightRadius: r,
+            borderBottomLeftRadius: rBottom,
+            borderBottomRightRadius: rBottom,
+            // Explicit pixel width, not just a cap: the mosaic sits
+            // inside an auto-sized bubble, and a percentage width
+            // against an indefinite parent collapses (or, worse,
+            // resolves against the image's intrinsic size and blows
+            // the row open). Media bubbles are fixed-width — the
+            // WhatsApp convention anyway.
+            ...maxWidth ? { width: maxWidth } : {}
           }
         ],
         children: [
@@ -2684,6 +2702,27 @@ var styles14 = reactNative.StyleSheet.create({
     borderRadius: 20
   }
 });
+
+// src/internal/bubbleText.ts
+function hasMarkdown(body) {
+  return /[*_~`#>|\\]|\[.*\]|^\s*(?:[-+]|\d+[.)])\s|https?:\/\/|www\./ms.test(body);
+}
+function emojiOnlyCount(body) {
+  const text = body.trim();
+  if (!text || text.length > 32) return 0;
+  try {
+    const unit = "(?:\\p{Regional_Indicator}{2}|\\p{Extended_Pictographic})[\\u{1F3FB}-\\u{1F3FF}]?\\uFE0F?(?:\\u200D\\p{Extended_Pictographic}[\\u{1F3FB}-\\u{1F3FF}]?\\uFE0F?)*";
+    const whole = new RegExp(`^(?:${unit}){1,3}$`, "u");
+    if (!whole.test(text)) return 0;
+    const each = new RegExp(unit, "gu");
+    return (text.match(each) ?? []).length;
+  } catch {
+    return 0;
+  }
+}
+function emojiFontSize(count) {
+  return count === 1 ? 44 : count === 2 ? 38 : 32;
+}
 var markdownit = Markdown.MarkdownIt({ typographer: false, linkify: true });
 function renderMarkdown(body, args) {
   const baseText = {
@@ -2750,100 +2789,154 @@ function MessageBubble({
   const isSelf = currentUserId !== null && message.sender_id === currentUserId;
   const [expanded, setExpanded] = react.useState(false);
   const bubbleMaxWidth = Math.floor(screenWidth * 0.78);
-  const contentMaxWidth = bubbleMaxWidth - 28;
+  const mediaWidth = Math.min(bubbleMaxWidth - 6, 420);
   const sender = react$1.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);
   const senderTint = userColor(message.sender_external_id ?? message.sender_id ?? message.id);
   const tailCorner = groupPosition === "last" || groupPosition === "standalone";
-  const bubbleColor = isSelf ? theme.colors.selfBubble : theme.colors.otherBubble;
+  const bubbleRadius = theme.radii.bubble;
   const textColor = isSelf ? theme.colors.selfBubbleText : theme.colors.otherBubbleText;
+  const mutedOnBubble = isSelf ? theme.colors.onBrand : theme.colors.ink3;
   const radii2 = {
-    topLeft: theme.radii.bubble,
-    topRight: theme.radii.bubble,
-    bottomLeft: theme.radii.bubble,
-    bottomRight: theme.radii.bubble
+    topLeft: bubbleRadius,
+    topRight: bubbleRadius,
+    bottomLeft: bubbleRadius,
+    bottomRight: bubbleRadius
   };
   if (tailCorner) {
-    if (isSelf) radii2.bottomRight = 4;
-    else radii2.bottomLeft = 4;
+    if (isSelf) radii2.bottomRight = 5;
+    else radii2.bottomLeft = 5;
   }
   const body = message.body ?? "";
-  const truncated = maxBodyLength > 0 && body.length > maxBodyLength && !expanded ? body.slice(0, maxBodyLength) + "\u2026" : body;
-  const time = formatTime(message.inserted_at);
   const isDeleted = !!message.deleted_at;
   const isEdited = !!message.edited_at && !isDeleted;
-  const images = (message.attachments ?? []).filter((a) => isImageContentType(a.content_type));
-  const files = (message.attachments ?? []).filter((a) => !isImageContentType(a.content_type));
-  const renderAttachments = showAttachments && (images.length > 0 || files.length > 0);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.View,
-    {
-      style: [
-        styles15.wrap,
-        {
-          alignSelf: isSelf ? "flex-end" : "flex-start",
-          // 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__ */ jsxRuntime.jsxs(
-        reactNative.View,
-        {
-          style: [
-            styles15.bubble,
+  const trimmable = maxBodyLength > 0 && body.length > maxBodyLength;
+  const truncated = trimmable && !expanded ? body.slice(0, maxBodyLength) + "\u2026" : body;
+  const time = formatTime(message.inserted_at);
+  const images = showAttachments && !isDeleted ? (message.attachments ?? []).filter((a) => isImageContentType(a.content_type)) : [];
+  const files = showAttachments && !isDeleted ? (message.attachments ?? []).filter((a) => !isImageContentType(a.content_type)) : [];
+  const hasMedia = images.length > 0;
+  const hasFiles = files.length > 0;
+  const hasBody = !isDeleted && body.length > 0;
+  const metaOverlay = hasMedia && !hasBody && !hasFiles;
+  const jumboCount = hasBody && !hasMedia && !hasFiles && !message.quoted_message_id ? emojiOnlyCount(body) : 0;
+  const inlineMeta = hasBody && jumboCount === 0 && !trimmable && (!markdown || !hasMarkdown(truncated));
+  const sectionAbove = hasMedia || hasFiles || !!message.quoted_message || isDeleted;
+  const ghost = `   ${isEdited ? "edited " : ""}${time}${isSelf && readState ? " \u2713\u2713" : ""}`;
+  const metaRow = (variant) => {
+    const color = variant === "overlay" ? "#FFFFFF" : variant === "jumbo" ? theme.colors.ink3 : mutedOnBubble;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        style: [
+          styles15.metaRow,
+          variant === "inline" && styles15.metaInline,
+          variant === "overlay" && styles15.metaOverlay,
+          variant === "block" && styles15.metaBlock,
+          // File-only bubble: the meta row follows the cards directly —
+          // give it air so the time doesn't sit glued to the card.
+          variant === "block" && hasFiles && !hasBody && styles15.metaBlockAfterFiles,
+          variant === "jumbo" && styles15.metaJumbo
+        ],
+        pointerEvents: "none",
+        children: [
+          isEdited ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.editedTag, { color, opacity: 0.8 }], children: "edited" }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.meta, { color, opacity: variant === "overlay" ? 1 : 0.75 }], children: time }),
+          isSelf && readState ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.readTick, children: /* @__PURE__ */ jsxRuntime.jsx(
+            PoolseIcon,
+            {
+              name: readState === "read" ? "check-double" : "check",
+              size: 13,
+              color
+            }
+          ) }) : null
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles15.wrap, { alignSelf: isSelf ? "flex-end" : "flex-start", maxWidth: bubbleMaxWidth }], children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        style: [
+          jumboCount === 0 && {
+            backgroundColor: isSelf ? theme.colors.selfBubble : theme.colors.otherBubble,
+            borderColor: isSelf ? "transparent" : theme.colors.border,
+            borderWidth: isSelf ? 0 : reactNative.StyleSheet.hairlineWidth,
+            borderTopLeftRadius: radii2.topLeft,
+            borderTopRightRadius: radii2.topRight,
+            borderBottomLeftRadius: radii2.bottomLeft,
+            borderBottomRightRadius: radii2.bottomRight
+          },
+          jumboCount === 0 && theme.shadows.sm
+        ],
+        children: [
+          showSenderName && !isSelf && jumboCount === 0 && (groupPosition === "first" || groupPosition === "standalone") ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              style: [styles15.senderName, { color: senderTint, fontFamily: theme.type.fontBody }],
+              children: senderLabel
+            }
+          ) : null,
+          message.quoted_message ? /* @__PURE__ */ jsxRuntime.jsx(
+            QuotedCard,
+            {
+              quoted: message.quoted_message,
+              isSelf,
+              ...labelFor ? { labelFor } : {},
+              ...onQuotedClick ? { onPress: () => onQuotedClick(message.quoted_message.id) } : {}
+            }
+          ) : null,
+          hasMedia ? (
+            // 3px of bubble color framing the picture; the mosaic clips
+            // itself 3px tighter than the bubble so the curves stay
+            // concentric.
+            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles15.mediaFrame, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ImageMosaic,
+                {
+                  images,
+                  maxWidth: mediaWidth,
+                  radius: Math.max(bubbleRadius - 3, 8),
+                  squareBottom: !metaOverlay
+                }
+              ),
+              metaOverlay ? metaRow("overlay") : null
+            ] })
+          ) : null,
+          hasFiles ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.filesBlock, children: files.map((att) => /* @__PURE__ */ jsxRuntime.jsx(
+            AttachmentPreview,
             {
-              backgroundColor: bubbleColor,
-              borderColor: isSelf ? "transparent" : theme.colors.border,
-              borderWidth: isSelf ? 0 : reactNative.StyleSheet.hairlineWidth,
-              borderTopLeftRadius: radii2.topLeft,
-              borderTopRightRadius: radii2.topRight,
-              borderBottomLeftRadius: radii2.bottomLeft,
-              borderBottomRightRadius: radii2.bottomRight,
-              // 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
+              attachment: att,
+              maxWidth: bubbleMaxWidth - 12,
+              tone: isSelf ? "onBrand" : "default"
             },
-            theme.shadows.sm
-          ],
-          children: [
-            showSenderName && !isSelf && (groupPosition === "first" || groupPosition === "standalone") ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.senderName, { color: senderTint, fontFamily: theme.type.fontBody }], children: senderLabel }) : null,
-            message.quoted_message ? /* @__PURE__ */ jsxRuntime.jsx(
-              QuotedCard,
-              {
-                quoted: message.quoted_message,
-                isSelf,
-                ...labelFor ? { labelFor } : {},
-                ...onQuotedClick ? { onPress: () => onQuotedClick(message.quoted_message.id) } : {}
-              }
-            ) : null,
-            renderAttachments && images.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ImageMosaic, { images, maxWidth: contentMaxWidth }) : null,
-            renderAttachments && files.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { gap: theme.spacing.xs, marginBottom: theme.spacing.xs }, children: files.map((att) => /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, { attachment: att, maxWidth: contentMaxWidth }, att.id)) }) : null,
-            body.length > 0 ? isDeleted ? /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.Text,
-              {
-                style: [
-                  styles15.body,
-                  {
-                    color: theme.colors.ink3,
-                    fontFamily: theme.type.fontBody,
-                    fontSize: theme.type.bodySize,
-                    lineHeight: theme.type.lineHeight,
-                    fontStyle: "italic"
-                  }
-                ],
-                children: "Message deleted"
-              }
-            ) : markdown ? renderMarkdown(truncated, {
+            att.id
+          )) }) : null,
+          isDeleted ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles15.textBlock, sectionAbove && styles15.textBlockAfter], children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              style: {
+                color: mutedOnBubble,
+                opacity: 0.7,
+                fontFamily: theme.type.fontBody,
+                fontSize: theme.type.bodySize,
+                lineHeight: theme.type.lineHeight,
+                fontStyle: "italic"
+              },
+              children: "Message deleted"
+            }
+          ) }) : null,
+          hasBody && jumboCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.jumboBlock, children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              style: { fontSize: emojiFontSize(jumboCount), lineHeight: emojiFontSize(jumboCount) + 8 },
+              children: body
+            }
+          ) }) : null,
+          hasBody && jumboCount === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles15.textBlock, sectionAbove && styles15.textBlockAfter], children: [
+            markdown && !inlineMeta ? renderMarkdown(truncated, {
               textColor,
               linkColor: isSelf ? theme.colors.onBrand : theme.colors.brand,
               fontFamily: theme.type.fontBody,
@@ -2853,22 +2946,29 @@ function MessageBubble({
                 void reactNative.Linking.openURL(url).catch(() => void 0);
                 return false;
               }
-            }) : /* @__PURE__ */ jsxRuntime.jsx(
+            }) : /* @__PURE__ */ jsxRuntime.jsxs(
               reactNative.Text,
               {
-                style: [
-                  styles15.body,
-                  {
-                    color: textColor,
-                    fontFamily: theme.type.fontBody,
-                    fontSize: theme.type.bodySize,
-                    lineHeight: theme.type.lineHeight
-                  }
-                ],
-                children: truncated
+                style: {
+                  color: textColor,
+                  fontFamily: theme.type.fontBody,
+                  fontSize: theme.type.bodySize,
+                  lineHeight: theme.type.lineHeight
+                },
+                children: [
+                  truncated,
+                  inlineMeta ? (
+                    // The invisible twin: reserves the meta's footprint
+                    // at the end of the last line so the absolutely-
+                    // positioned real meta never covers a glyph — and
+                    // when the line is full, the reservation wraps and
+                    // the meta drops down, flush right.
+                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.ghost, children: ghost })
+                  ) : null
+                ]
               }
-            ) : null,
-            maxBodyLength > 0 && body.length > maxBodyLength ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: () => setExpanded((e) => !e), children: /* @__PURE__ */ jsxRuntime.jsx(
+            ),
+            trimmable ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: () => setExpanded((e) => !e), children: /* @__PURE__ */ jsxRuntime.jsx(
               reactNative.Text,
               {
                 style: [
@@ -2878,48 +2978,15 @@ function MessageBubble({
                 children: expanded ? "Show less" : "Read more"
               }
             ) }) : null,
-            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles15.metaRow, children: [
-              isEdited ? /* @__PURE__ */ jsxRuntime.jsx(
-                reactNative.Text,
-                {
-                  style: [
-                    styles15.editedTag,
-                    {
-                      color: isSelf ? theme.colors.onBrand : theme.colors.ink3,
-                      opacity: 0.7
-                    }
-                  ],
-                  children: "edited"
-                }
-              ) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                reactNative.Text,
-                {
-                  style: [
-                    styles15.meta,
-                    {
-                      color: isSelf ? theme.colors.onBrand : theme.colors.ink3,
-                      opacity: isSelf ? 0.85 : 1
-                    }
-                  ],
-                  children: time
-                }
-              ),
-              isSelf && readState ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.readTick, children: /* @__PURE__ */ jsxRuntime.jsx(
-                PoolseIcon,
-                {
-                  name: readState === "read" ? "check-double" : "check",
-                  size: 13,
-                  color: theme.colors.onBrand
-                }
-              ) }) : null
-            ] }),
-            actionsTrigger ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.actionsSlot, children: actionsTrigger }) : null
-          ]
-        }
-      )
-    }
-  );
+            inlineMeta ? metaRow("inline") : null
+          ] }) : null,
+          !inlineMeta && !metaOverlay && jumboCount === 0 ? metaRow("block") : null,
+          actionsTrigger ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.actionsSlot, children: actionsTrigger }) : null
+        ]
+      }
+    ),
+    jumboCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { alignSelf: isSelf ? "flex-end" : "flex-start" }, children: metaRow("jumbo") }) : null
+  ] });
 }
 function QuotedCard({
   quoted,
@@ -2930,7 +2997,7 @@ function QuotedCard({
   const theme = usePoolseTheme();
   const resolved = react$1.useUser(quoted.sender_external_id);
   const senderName = quoted.sender_external_id ? labelFor?.(quoted.sender_external_id) ?? resolved.profile?.displayName ?? quoted.sender_external_id : "Unknown";
-  const bg = isSelf ? "rgba(255,255,255,0.18)" : theme.colors.surface2;
+  const bg = isSelf ? "rgba(0,0,0,0.16)" : theme.colors.surface2;
   const accent = isSelf ? theme.colors.onBrand : theme.colors.brand;
   const txt = isSelf ? theme.colors.onBrand : theme.colors.ink;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2946,8 +3013,8 @@ function QuotedCard({
         }
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.quotedSender, { color: accent }], children: senderName }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.quotedBody, { color: txt }], numberOfLines: 2, children: quoted.body ?? "\u2026" })
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.quotedSender, { color: accent }], numberOfLines: 1, children: senderName }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.quotedBody, { color: txt }], numberOfLines: 2, children: quoted.deleted_at ? "Original message deleted" : quoted.body ?? "\u2026" })
       ]
     }
   );
@@ -2983,16 +3050,34 @@ var styles15 = reactNative.StyleSheet.create({
   wrap: {
     marginBottom: 2
   },
-  bubble: {
-    position: "relative"
-  },
   senderName: {
     fontSize: 12,
-    fontWeight: "600",
-    marginBottom: 2
+    fontWeight: "700",
+    paddingTop: 7,
+    paddingHorizontal: 12
   },
-  body: {
-    flexShrink: 1
+  mediaFrame: {
+    margin: 3
+  },
+  filesBlock: {
+    paddingHorizontal: 6,
+    paddingTop: 6,
+    gap: 4
+  },
+  textBlock: {
+    paddingHorizontal: 12,
+    paddingVertical: 7
+  },
+  // A hair less air when media / files / a quote already sit above.
+  textBlockAfter: {
+    paddingTop: 6
+  },
+  jumboBlock: {
+    paddingVertical: 2
+  },
+  ghost: {
+    color: "transparent",
+    fontSize: 11
   },
   readMore: {
     fontSize: 12,
@@ -3002,10 +3087,36 @@ var styles15 = reactNative.StyleSheet.create({
   metaRow: {
     flexDirection: "row",
     alignItems: "center",
+    gap: 4
+  },
+  metaInline: {
+    position: "absolute",
+    right: 12,
+    // Optically centers the meta against the body's last line (22px
+    // line over the 7px bottom padding): 7 + (22 - 14) / 2. At 8 it
+    // sat visibly low beside a one-line message.
+    bottom: 11
+  },
+  metaOverlay: {
+    position: "absolute",
+    right: 6,
+    bottom: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 999,
+    backgroundColor: "rgba(0,0,0,0.42)"
+  },
+  metaBlock: {
     justifyContent: "flex-end",
-    marginTop: 6,
-    gap: 5,
-    flexShrink: 0
+    paddingHorizontal: 12,
+    paddingBottom: 6,
+    marginTop: -2
+  },
+  metaBlockAfterFiles: {
+    marginTop: 6
+  },
+  metaJumbo: {
+    paddingTop: 2
   },
   meta: {
     fontSize: 11,
@@ -3018,7 +3129,7 @@ var styles15 = reactNative.StyleSheet.create({
     letterSpacing: 0.1
   },
   readTick: {
-    marginLeft: 2,
+    marginLeft: 1,
     marginTop: 1
   },
   actionsSlot: {
@@ -3028,20 +3139,21 @@ var styles15 = reactNative.StyleSheet.create({
   },
   quoted: {
     borderLeftWidth: 3,
-    paddingLeft: 8,
-    paddingVertical: 4,
-    paddingRight: 6,
-    marginBottom: 6,
-    borderRadius: 4
+    paddingLeft: 9,
+    paddingVertical: 5,
+    paddingRight: 8,
+    margin: 4,
+    marginBottom: 0,
+    borderRadius: 10
   },
   quotedSender: {
     fontSize: 12,
-    fontWeight: "600",
-    marginBottom: 2
+    fontWeight: "700",
+    marginBottom: 1
   },
   quotedBody: {
-    fontSize: 12,
-    opacity: 0.85
+    fontSize: 12.5,
+    opacity: 0.8
   }
 });
 var DEFAULT_EMOJIS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F389}", "\u{1F64F}", "\u{1F525}"];
@@ -3357,15 +3469,7 @@ function MessageRow({
                       maxBodyLength,
                       showSenderName,
                       showAttachments: attachments,
-                      markdown,
-                      actionsTrigger: actions ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: () => setActionsOpen(true), hitSlop: 8, children: /* @__PURE__ */ jsxRuntime.jsx(
-                        PoolseIcon,
-                        {
-                          name: "chevron-down",
-                          size: 14,
-                          color: isSelf ? theme.colors.onBrand : theme.colors.ink3
-                        }
-                      ) }) : null
+                      markdown
                     }
                   )
                 }