@linktr.ee/messaging-react 3.17.0-rc-1785345258 → 3.17.0

package/src/components/MessageAttachment/Image/index.tsx

@@ -53,15 +53,28 @@ export interface ImageAttachmentSharedProps extends MessageAttachmentBaseProps {
   onClick?: (index: number) => boolean | void
 }
 
-const tileFromItem = (
-  item: ImageItem,
-  index: number,
-  totalCount: number,
+const tileFromItem = ({
+  item,
+  index,
+  totalCount,
+  fallbackLoading,
+  imgRef,
+  onLoad,
+}: {
+  item: ImageItem
+  index: number
+  totalCount: number
   fallbackLoading: ImageLoadingMode
-): MediaStackTile => ({
+  /** Set on the single-image tile only — see `useSingleImageRatio`. */
+  imgRef?: React.Ref<HTMLImageElement>
+  onLoad?: React.ReactEventHandler<HTMLImageElement>
+}): MediaStackTile => ({
   ariaLabel: `Open image ${index + 1} of ${totalCount}`,
   content: (
+    // No corner radius here: `MediaStackGrid` clips the four outer
+    // corners of the whole cluster and keeps every inner edge square.
     <img
+      ref={imgRef}
       src={optimizeMessagingAttachmentUrl(item.src) ?? item.src}
       alt={item.alt ?? ''}
       width={item.width}
@@ -69,7 +82,8 @@ const tileFromItem = (
       draggable={false}
       loading={item.loading ?? fallbackLoading}
       decoding="async"
-      className="absolute inset-0 size-full rounded-md object-cover"
+      onLoad={onLoad}
+      className="absolute inset-0 size-full object-cover"
     />
   ),
 })
@@ -173,6 +187,69 @@ const ImageComposerInner: React.FC<{
   )
 }
 
+/**
+ * Box reserved for a single image whose ratio is not known yet — the
+ * 4:3 landscape card Figma draws for the most common case (330×250
+ * card, 326×246 content, `attachment-single-media` 1972:13149). A
+ * bounded reserve keeps a scrolling thread from jumping by an
+ * arbitrary amount between mount and decode.
+ */
+const RESERVED_SINGLE_ASPECT_RATIO = 326 / 246
+
+/**
+ * Resolves the aspect ratio of a single-image bubble, in order:
+ *
+ *   1. caller-supplied `ImageItem.width` / `height` — ratio known at
+ *      first paint, so the card never resizes;
+ *   2. the decoded `<img>`'s `naturalWidth` / `naturalHeight`;
+ *   3. `RESERVED_SINGLE_ASPECT_RATIO`.
+ *
+ * Nothing propagates dimensions through the Stream path today, so (2)
+ * is the branch that runs in production. It reads both on `load` and
+ * from the ref, because an image already in the browser cache can be
+ * `complete` before React attaches a `load` listener.
+ */
+const useSingleImageRatio = (item: ImageItem | undefined) => {
+  const src = item?.src
+  const [measured, setMeasured] = React.useState<{
+    src: string
+    ratio: number
+  }>()
+
+  const measure = React.useCallback(
+    (img: HTMLImageElement | null) => {
+      if (!img || img.naturalWidth <= 0 || img.naturalHeight <= 0) return
+      if (src === undefined) return
+      const ratio = img.naturalWidth / img.naturalHeight
+      // Returning `prev` unchanged matters: the ref callback runs on
+      // every commit, and a fresh object each time would schedule an
+      // endless render loop.
+      setMeasured((prev) =>
+        prev && prev.src === src && prev.ratio === ratio ? prev : { src, ratio }
+      )
+    },
+    [src]
+  )
+
+  const handleLoad = React.useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement>) =>
+      measure(event.currentTarget),
+    [measure]
+  )
+
+  const supplied =
+    item?.width && item?.height ? item.width / item.height : undefined
+  // Discard a measurement left over from a previous `src`.
+  const measuredRatio =
+    measured && measured.src === src ? measured.ratio : undefined
+
+  return {
+    ratio: supplied ?? measuredRatio ?? RESERVED_SINGLE_ASPECT_RATIO,
+    imgRef: measure,
+    onLoad: handleLoad,
+  }
+}
+
 /**
  * Sent / Received rendering — wrapped in the shared `Bubble` chrome,
  * supports single or stacked items, and renders an optional caption
@@ -194,13 +271,22 @@ const ImageBubbleRow: React.FC<InternalImageRowProps> = ({
   const { viewerOpen, viewerIndex, handleActivate, closeViewer } = useViewer(
     onClick
   )
+  const isSingle = resolvedItems.length === 1
+  const single = useSingleImageRatio(isSingle ? resolvedItems[0] : undefined)
 
   if (resolvedItems.length === 0) {
     return null
   }
 
   const tiles: MediaStackTile[] = resolvedItems.map((item, index) =>
-    tileFromItem(item, index, resolvedItems.length, loading)
+    tileFromItem({
+      item,
+      index,
+      totalCount: resolvedItems.length,
+      fallbackLoading: loading,
+      imgRef: isSingle ? single.imgRef : undefined,
+      onLoad: isSingle ? single.onLoad : undefined,
+    })
   )
 
   return (
@@ -208,10 +294,33 @@ const ImageBubbleRow: React.FC<InternalImageRowProps> = ({
       variant={variant}
       text={text}
       groupPosition={groupPosition}
+      // Media cards drop the 280px document width and the 8px inset
+      // for a 2px frame around the media, at a uniform r20 that never
+      // flattens against a caption bubble — `attachment-single-media`
+      // 330×250 and `attachment-single-image` 383×290, both `pad2`
+      // `cornerRadius: 20` with no stroke. The single card sizes to
+      // the fitted media box (capped so a long in-bubble caption can
+      // not stretch it past the 330px design maximum); the stacked
+      // card is a fixed 383px, capped so it cannot overflow a narrow
+      // viewport. `bordered={false}` because a hairline on top of the
+      // 2px frame would read as a third edge and push the card 2px
+      // over its measured width.
+      bordered={false}
+      widthClassName={
+        isSingle
+          ? 'w-fit max-w-[313px] sm:max-w-[330px]'
+          : 'w-[383px] max-w-full'
+      }
+      paddingClassName="p-0.5"
+      radiusClassName="rounded-[20px]"
       data-testid="image-attachment"
     >
       <div className="relative">
-        <MediaStackGrid tiles={tiles} onTileActivate={handleActivate} />
+        <MediaStackGrid
+          tiles={tiles}
+          onTileActivate={handleActivate}
+          singleAspectRatio={isSingle ? single.ratio : undefined}
+        />
       </div>
 
       <ImageViewer

package/src/components/MessageAttachment/MessageAttachment.test.tsx

@@ -226,6 +226,163 @@ describe('MessageAttachment.Image', () => {
   })
 })
 
+describe('MessageAttachment.Image single-image aspect ratio', () => {
+  // A single image used to be force-cropped to 1:1. It now fits inside
+  // a max 326x436 content box on web and 309x436 on mobile, preserving
+  // its own ratio, and the card adopts the fitted box so `object-cover`
+  // performs no crop. The width caps differ per breakpoint; the 436px
+  // height cap deliberately does not, which is why Figma's 9:16
+  // portrait renders 246x436 on web *and* mobile.
+  const WIDTH_CAP_MOBILE_PX = 309
+  const WIDTH_CAP_WEB_PX = 326
+
+  const mediaBox = (label: string) =>
+    screen.getByLabelText(label).parentElement as HTMLElement
+
+  /** The `min(var(--…), Npx)` term the height cap contributes. */
+  const heightBoundWidthPx = (box: HTMLElement) =>
+    Number(/([\d.]+)px\)\s*$/.exec(box.style.width)?.[1])
+
+  it('adopts the source ratio instead of forcing a square', () => {
+    renderWithProviders(
+      <MessageAttachment.Image.Sent
+        items={[
+          {
+            src: 'https://cdn.example.com/tall.jpg',
+            alt: 'Tall',
+            width: 1080,
+            height: 1920,
+          },
+        ]}
+      />
+    )
+    const box = mediaBox('Open image 1 of 1')
+    expect(box).not.toHaveClass('aspect-square')
+    expect(Number(box.style.aspectRatio)).toBeCloseTo(0.5625, 4)
+    expect(box).toHaveClass(
+      '[--mes-single-width-cap:309px]',
+      'sm:[--mes-single-width-cap:326px]'
+    )
+  })
+
+  it('resolves a portrait source against the height cap on both breakpoints', () => {
+    renderWithProviders(
+      <MessageAttachment.Image.Sent
+        items={[
+          {
+            src: 'https://cdn.example.com/tall.jpg',
+            width: 1080,
+            height: 1920,
+          },
+        ]}
+      />
+    )
+    // 436 x 0.5625 = 245.25, under both width caps — so the height cap
+    // governs everywhere and the card resolves to 249 x 440.
+    const bound = heightBoundWidthPx(mediaBox('Open image 1 of 1'))
+    expect(bound).toBeCloseTo(245.25, 2)
+    expect(bound).toBeLessThan(WIDTH_CAP_MOBILE_PX)
+  })
+
+  it('resolves a landscape source against the breakpoint width cap', () => {
+    renderWithProviders(
+      <MessageAttachment.Image.Sent
+        items={[
+          {
+            src: 'https://cdn.example.com/wide.jpg',
+            width: 1920,
+            height: 1080,
+          },
+        ]}
+      />
+    )
+    // 436 x 1.7778 = 775.11, over both width caps — so 326px (309px on
+    // mobile) governs and the card resolves to 330 x 187.
+    expect(heightBoundWidthPx(mediaBox('Open image 1 of 1'))).toBeGreaterThan(
+      WIDTH_CAP_WEB_PX
+    )
+  })
+
+  it('reserves the 4:3 landscape box until the image decodes, then adopts its real ratio', () => {
+    renderWithProviders(
+      <MessageAttachment.Image.Sent src="https://cdn.example.com/unsized.jpg" />
+    )
+    expect(
+      Number(mediaBox('Open image 1 of 1').style.aspectRatio)
+    ).toBeCloseTo(326 / 246, 4)
+
+    // Scoped to the tile: the always-mounted `ImageViewer` renders a
+    // second `<img>` for the same source.
+    const img = mediaBox('Open image 1 of 1').querySelector(
+      'img'
+    ) as HTMLImageElement
+    Object.defineProperty(img, 'naturalWidth', {
+      value: 1080,
+      configurable: true,
+    })
+    Object.defineProperty(img, 'naturalHeight', {
+      value: 1920,
+      configurable: true,
+    })
+    fireEvent.load(img)
+
+    expect(
+      Number(mediaBox('Open image 1 of 1').style.aspectRatio)
+    ).toBeCloseTo(0.5625, 4)
+  })
+
+  it('leaves a stacked grid on its fixed aspect', () => {
+    renderWithProviders(
+      <MessageAttachment.Image.Sent
+        items={Array.from({ length: 4 }, (_, i) => ({
+          src: `https://cdn.example.com/${i}.jpg`,
+          width: 1080,
+          height: 1920,
+        }))}
+      />
+    )
+    // 379x286 is the content box of Figma's 383x290 stacked card.
+    const grid = mediaBox('Open image 1 of 4')
+    expect(grid).toHaveClass('aspect-[379/286]')
+    expect(grid.style.width).toBe('')
+    expect(grid.style.aspectRatio).toBe('')
+  })
+})
+
+describe('MessageAttachment.Bubble geometry overrides', () => {
+  // `widthClassName` / `paddingClassName` / `radiusClassName` REPLACE
+  // their defaults outright rather than merging: an appended radius and
+  // the corner table have identical specificity, so Tailwind's emitted
+  // source order — not argument order — would pick the winner. Document
+  // and audio rows keep the 280px / 8px defaults; media cards override
+  // all three.
+  it('keeps the default width, padding and corner utilities when nothing is overridden', () => {
+    renderWithProviders(
+      <MessageAttachment.File.Sent
+        src="https://cdn.example.com/file.zip"
+        filename="file.zip"
+      />
+    )
+    expect(screen.getByTestId('file-attachment')).toHaveClass(
+      'w-[280px]',
+      'px-2',
+      'py-2',
+      'rounded-tl-[18px]'
+    )
+  })
+
+  it('replaces every default on a media card instead of merging', () => {
+    renderWithProviders(
+      <MessageAttachment.Image.Sent src="https://cdn.example.com/photo.jpg" />
+    )
+    const bubble = screen.getByTestId('image-attachment')
+    expect(bubble).toHaveClass('w-fit', 'p-0.5', 'rounded-[20px]')
+    expect(bubble.className).not.toMatch(
+      /w-\[280px\]|px-2|py-2|rounded-tl-\[18px\]/
+    )
+  })
+})
+
 describe('MessageAttachment.Pdf', () => {
   it('renders the compact row with filename + meta', () => {
     renderWithProviders(
@@ -739,6 +896,26 @@ describe('MessageAttachment lazy-loading defaults', () => {
       expect(first?.getAttribute('loading')).toBe('eager')
       expect(second?.getAttribute('loading')).toBe('lazy')
     })
+
+    it('does not mount the viewer `<img>` while the lightbox is closed', () => {
+      renderWithProviders(
+        <MessageAttachment.Image.Sent
+          src="https://cdn.example.com/photo.jpg"
+          alt="Photo"
+        />
+      )
+      // `ViewerShell` keeps its `<dialog>` mounted so the open / close
+      // transition can play, and the viewer image is `loading="eager"`
+      // on the raw (un-optimised) source. The element being absent
+      // while closed is therefore the only thing stopping a scrolled
+      // thread from downloading every full-resolution original.
+      expect(screen.getByTestId('image-viewer').querySelector('img')).toBeNull()
+
+      fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
+      expect(
+        screen.getByTestId('image-viewer').querySelector('img')
+      ).not.toBeNull()
+    })
   })
 
   describe('Video', () => {

package/src/components/MessageAttachment/Video/index.tsx

@@ -233,11 +233,7 @@ const VideoBubbleRow: React.FC<InternalVideoRowProps> = ({
       data-testid="video-attachment"
     >
       <div className="relative">
-        <MediaStackGrid
-          tiles={tiles}
-          onTileActivate={handleActivate}
-          className="overflow-hidden rounded-md"
-        />
+        <MediaStackGrid tiles={tiles} onTileActivate={handleActivate} />
       </div>
 
       <VideoViewer

package/src/components/MessageAttachment/_shared/Bubble.tsx

@@ -21,6 +21,31 @@ export interface BubbleProps {
    * fully rounded.
    */
   groupPosition?: BubbleGroupPosition
+  /**
+   * Width utility that REPLACES the default `'w-[280px]'`. Supply the
+   * whole declaration (`'w-fit'`, `'w-[383px] max-w-full'`) — nothing
+   * is merged with the default.
+   */
+  widthClassName?: string
+  /**
+   * Padding utility that REPLACES the default `'px-2 py-2'`. Supply
+   * the full inset (`'p-0.5'`, `'py-5 pl-5 pr-3'`).
+   */
+  paddingClassName?: string
+  /**
+   * Corner utility that REPLACES the `groupPosition`-derived corner
+   * table entirely. Opting in means opting OUT of same-author corner
+   * flattening — the bubble renders the supplied radius on all four
+   * corners. That is what the attachment redesign wants: Figma draws
+   * media cards at a uniform r20 even when a caption bubble sits 4px
+   * below (nodes `1973:12776`, `1973:20239`).
+   *
+   * It replaces rather than appends because appending cannot be made
+   * reliable — an appended `rounded-[20px]` and the corner table have
+   * identical CSS specificity, so Tailwind's emitted source order,
+   * not argument order, would pick the winner.
+   */
+  radiusClassName?: string
   className?: string
   children: React.ReactNode
   'data-testid'?: string
@@ -119,12 +144,16 @@ const Bubble: React.FC<BubbleProps> = ({
   text,
   bordered = true,
   groupPosition = 'single',
+  widthClassName = 'w-[280px]',
+  paddingClassName = 'px-2 py-2',
+  radiusClassName,
   className,
   children,
   'data-testid': dataTestId,
 }) => {
   const hasText = text != null && text !== ''
   const cornerClasses =
+    radiusClassName ??
     CORNER_CLASSES_BY_SIDE_AND_POSITION[sideForVariant(variant)][groupPosition]
 
   return (
@@ -132,13 +161,17 @@ const Bubble: React.FC<BubbleProps> = ({
       data-testid={dataTestId}
       data-group-position={groupPosition}
       className={classNames(
-        // 280px-wide bubble — matches the mobile chat attachment width
-        // and keeps the document / image / audio bubbles visually
-        // consistent inside the conversation timeline. The 8px / 16px
-        // inset matches `--str-chat__spacing-2 --str-chat__spacing-4`
-        // so attachments share the same hit / negative-space rhythm
-        // as the surrounding `CustomMessage` text bubbles.
-        'relative w-[280px] overflow-hidden px-2 py-2',
+        // Defaults describe a 280px-wide document / audio / link
+        // bubble: that width matches the mobile chat attachment and
+        // the 8px / 16px inset matches `--str-chat__spacing-2
+        // --str-chat__spacing-4`, so attachments share the same hit /
+        // negative-space rhythm as the surrounding `CustomMessage`
+        // text bubbles. Media cards override both — Figma sizes them
+        // to the media (330 / 383px) with a 2px frame instead.
+        'relative',
+        widthClassName,
+        'overflow-hidden',
+        paddingClassName,
         cornerClasses,
         BUBBLE_BG_BY_VARIANT[variant],
         BUBBLE_TEXT_BY_VARIANT[variant],

package/src/components/MessageAttachment/_shared/ImageViewer.tsx

@@ -80,22 +80,31 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
       }
       data-testid="image-viewer"
     >
-      <img
-        // Forcing a key swap on item change ensures React replaces the
-        // `<img>` cleanly between siblings — otherwise the previous
-        // image stays painted for a frame while the new `src`
-        // decodes, which reads as a stutter at carousel pace.
-        key={`${index}:${item.src}`}
-        src={item.src}
-        alt={item.alt ?? filename}
-        draggable={false}
-        // The user has explicitly opened the viewer, so we want the
-        // active image to appear immediately rather than fall to the
-        // browser's lazy-load heuristics.
-        loading="eager"
-        decoding="async"
-        className="mes-media-viewer__image"
-      />
+      {open ? (
+        <img
+          // Forcing a key swap on item change ensures React replaces
+          // the `<img>` cleanly between siblings — otherwise the
+          // previous image stays painted for a frame while the new
+          // `src` decodes, which reads as a stutter at carousel pace.
+          key={`${index}:${item.src}`}
+          src={item.src}
+          alt={item.alt ?? filename}
+          draggable={false}
+          // The user has explicitly opened the viewer, so we want the
+          // active image to appear immediately rather than fall to the
+          // browser's lazy-load heuristics. Which is exactly why the
+          // element is gated on `open`: `ViewerShell` keeps its
+          // `<dialog>` mounted across open/close so the platform
+          // transition can play, and an eager `<img>` inside a closed
+          // dialog made every image bubble in a thread download its
+          // full-resolution original — note the viewer intentionally
+          // uses the raw `item.src`, not the CDN-optimised URL the
+          // bubble tile renders.
+          loading="eager"
+          decoding="async"
+          className="mes-media-viewer__image"
+        />
+      ) : null}
 
       {items.length > 1 ? (
         <CarouselNav

package/src/components/MessageAttachment/_shared/MediaStackGrid.tsx

@@ -21,11 +21,76 @@ export interface MediaStackGridProps {
    * "+N more" overflow indicator. Defaults to `4`.
    */
   maxVisible?: number
+  /**
+   * Aspect ratio (width / height) for the SINGLE-tile layout. Applies
+   * to every media kind, not just images. When omitted the 1-tile
+   * branch keeps today's `aspect-square`. Ignored for 2+ tiles, whose
+   * grid aspect is fixed.
+   */
+  singleAspectRatio?: number
   className?: string
 }
 
+// The tile is the focusable element, and its focus ring has to be drawn
+// INSIDE it. Figma leaves only a 2px frame around the media and `Bubble`
+// clips its own overflow, so an outset ring is swallowed by the frame;
+// an inset ring or a negative-offset `outline` on the tile is covered by
+// the media, which is `absolute inset-0`. A positioned `::after` is the
+// last child in tree order, so it paints above the media, inherits the
+// tile's outer-corner radius, and ignores every ancestor clip. Same
+// two-tone treatment as before — a dark band over a white ring — so it
+// stays legible on light and dark photos alike. Verified in Chromium.
 const TILE_SHELL =
-  'relative block size-full overflow-hidden bg-black/5 outline-none focus-visible:ring-2 focus-visible:ring-white/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black'
+  'relative block size-full overflow-hidden bg-black/5 outline-none after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-white/80 focus-visible:after:ring-offset-2 focus-visible:after:ring-offset-black'
+
+// Figma rounds only the four OUTER corners of a media cluster and leaves
+// every inner edge square: on `attachment-single-image` 1973:13863 the
+// `left` column carries `rectangleCornerRadii [18,0,0,18]` and `right`
+// `[0,18,18,0]`, while the tiles themselves carry none.
+//
+// So the radius lives on the tiles, keyed by layout and DOM position.
+// A single `overflow-hidden rounded-[18px]` container would be shorter,
+// but it also clips the tiles' `focus-visible` ring — an outset
+// `box-shadow` — and in the 1-tile layout the tile fills the container
+// exactly, so keyboard users would get no focus indicator at all.
+// Neither `ring-inset` nor a negative `outline-offset` rescues that:
+// the tile's `<img>` is `absolute inset-0` and paints over both.
+// Measured in Chromium, not assumed.
+const OUTER_CORNER_CLASSES: Record<number, readonly string[]> = {
+  1: ['rounded-[18px]'],
+  2: ['rounded-l-[18px]', 'rounded-r-[18px]'],
+  3: ['rounded-l-[18px]', 'rounded-tr-[18px]', 'rounded-br-[18px]'],
+  4: [
+    'rounded-tl-[18px]',
+    'rounded-tr-[18px]',
+    'rounded-bl-[18px]',
+    'rounded-br-[18px]',
+  ],
+}
+
+// Figma fits a single media item inside a max 326x436 content box on
+// web and 309x436 on mobile, preserving its aspect ratio, and the card
+// then adopts the resulting box — so `object-fit: cover` performs no
+// crop and nothing is letterboxed.
+//
+// The fit is `width = min(widthCap, heightCap * ratio)`, with
+// `aspect-ratio` supplying the other axis. Only the width cap is
+// breakpoint-dependent, so it travels as a custom property while the
+// ratio-derived term resolves to a concrete pixel value. Together they
+// reproduce all eight measured frames (`2032:22651` / `23000` /
+// `23353` / `23707` plus their mobile counterparts) to within Figma's
+// float rounding — including the 9:16 portrait, which renders 246x436
+// on web *and* mobile precisely because the height cap is NOT
+// breakpoint-dependent: a width-only rule would give mobile 309x547.6.
+//
+// The property name is spelled out again inside `SINGLE_WIDTH_CAPS` on
+// purpose. Tailwind extracts classes by scanning source text, so an
+// interpolated `` `[${SINGLE_WIDTH_CAP_PROPERTY}:309px]` `` would emit
+// no CSS at all and silently drop the width cap. Keep it literal.
+const SINGLE_WIDTH_CAP_PROPERTY = '--mes-single-width-cap'
+const SINGLE_WIDTH_CAPS =
+  '[--mes-single-width-cap:309px] sm:[--mes-single-width-cap:326px]'
+const SINGLE_HEIGHT_CAP_PX = 436
 
 /**
  * Adaptive grid used by stacked image / video attachments. Layouts:
@@ -36,14 +101,16 @@ const TILE_SHELL =
  *   - 4 tiles — 2×2 grid
  *   - 5+      — 2×2 grid with the bottom-right tile showing "+N more"
  *
- * The grid is square-ish overall (1:1 for 1, 16:9 for 2, 4:3 for 3+) so
- * stacks fit comfortably inside the bubble width without dominating the
- * conversation.
+ * A single tile adopts `singleAspectRatio` when supplied and otherwise
+ * stays square; 2 tiles sit in a 16:9 row, 3 in a 4:3 box, and 4 in
+ * the 379x286 content box Figma draws for a stacked media card. Only
+ * the cluster's four outer corners round — see `OUTER_CORNER_CLASSES`.
  */
 const MediaStackGrid: React.FC<MediaStackGridProps> = ({
   tiles,
   onTileActivate,
   maxVisible = 4,
+  singleAspectRatio,
   className,
 }) => {
   const total = tiles.length
@@ -53,7 +120,11 @@ const MediaStackGrid: React.FC<MediaStackGridProps> = ({
   const overflow = total - visible.length
 
   const renderTile = (tile: MediaStackTile, index: number, extra?: React.ReactNode) => {
-    const sharedClass = classNames(TILE_SHELL, 'h-full w-full')
+    const sharedClass = classNames(
+      TILE_SHELL,
+      'h-full w-full',
+      OUTER_CORNER_CLASSES[visible.length]?.[index]
+    )
     if (onTileActivate) {
       return (
         <button
@@ -76,9 +147,29 @@ const MediaStackGrid: React.FC<MediaStackGridProps> = ({
     )
   }
 
+  let singleTileStyle: React.CSSProperties | undefined
+  if (singleAspectRatio) {
+    singleTileStyle = {
+      aspectRatio: singleAspectRatio,
+      // Hundredths keep the emitted declaration readable in devtools;
+      // the rounding error is well under a device pixel.
+      width: `min(var(${SINGLE_WIDTH_CAP_PROPERTY}), ${
+        Math.round(SINGLE_HEIGHT_CAP_PX * singleAspectRatio * 100) / 100
+      }px)`,
+      // Only bites in a container narrower than the width cap.
+      maxWidth: '100%',
+    }
+  }
+
   if (visible.length === 1) {
     return (
-      <div className={classNames('aspect-square w-full', className)}>
+      <div
+        className={classNames(
+          singleAspectRatio ? SINGLE_WIDTH_CAPS : 'aspect-square w-full',
+          className
+        )}
+        style={singleTileStyle}
+      >
         {renderTile(visible[0], 0)}
       </div>
     )
@@ -116,7 +207,14 @@ const MediaStackGrid: React.FC<MediaStackGridProps> = ({
   return (
     <div
       className={classNames(
-        'grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5',
+        // 379x286 is the content box of Figma's 383x290 stacked-media
+        // card (`attachment-single-image` 1973:13863) once its 2px
+        // frame is removed. Pinning the aspect on the container — as
+        // this branch has always done — makes the card resolve to
+        // exactly 383x290, and the 2px gutters then split it into
+        // 188.5x142 tiles (Figma draws 188x142; its own 383 does not
+        // divide evenly, so half a pixel goes to the columns).
+        'grid aspect-[379/286] w-full grid-cols-2 grid-rows-2 gap-0.5',
         className
       )}
     >

package/src/components/MessagingShell/index.tsx

@@ -35,7 +35,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   customChannelActions,
   renderChannelActions,
   onParticipantNameClick,
-  onBroadcastClick,
   renderMessage,
   onMessageLinkClick,
   showChannelInfo,
@@ -261,7 +260,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           customChannelActions={customChannelActions}
           renderChannelActions={renderChannelActions}
           onParticipantNameClick={onParticipantNameClick}
-          onBroadcastClick={onBroadcastClick}
           renderMessage={renderMessage}
           onMessageLinkClick={onMessageLinkClick}
           showChannelInfo={showChannelInfo}