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

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DBjALsli.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BFZ-G_jg.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -83,11 +83,6 @@ export declare interface AvatarProps {
     dmAgentEnabled?: boolean;
 }
 
-export declare type BroadcastClickHandler = (broadcast: {
-    id: string;
-    name?: string;
-}) => void;
-
 /**
  * Build the meta line shown under the title in compact document / file
  * attachments — `EXT · SIZE` (`PDF · 379.5 KB`). Either part is dropped
@@ -211,7 +206,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onBroadcastClick' | 'showChannelInfo' | 'composerInput'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'showChannelInfo' | 'composerInput'>;
 
 /**
  * ChannelView component props
@@ -397,11 +392,6 @@ export declare interface ChannelViewProps {
      * onMessageLinkClick={(url) => trackChannelLinkClicked(url)}
      */
     onMessageLinkClick?: MessageLinkClickHandler;
-    /**
-     * Fired when a broadcast label is clicked on an outgoing broadcast message.
-     * Hosts own navigation so this shared package never assumes an admin URL.
-     */
-    onBroadcastClick?: BroadcastClickHandler;
     /**
      * Passed to Stream `Channel` as `SendButton`. Required for hosts that replace
      * the send control: `Channel` merges this into `ComponentContext` and an
@@ -1299,7 +1289,7 @@ export declare interface MessageBubbleBaseProps {
  */
 export declare type MessageBubbleVariant = 'sent' | 'received';
 
-declare type MessageCustomType = 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT' | 'MESSAGE_OUTBOUND' | 'MESSAGE_ATTACHMENT' | AgeSafetySystemType | EscalationSystemType | DmAgentSystemType;
+declare type MessageCustomType = 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT' | 'MESSAGE_ATTACHMENT' | AgeSafetySystemType | EscalationSystemType | DmAgentSystemType;
 
 /**
  * Callback invoked when a user clicks a link inside the channel view.
@@ -1330,8 +1320,6 @@ export declare interface MessageMetadata {
      * `custom_type` — it identifies the send context, not the message kind. (MES-1266)
      */
     sent_from?: 'stack_detail';
-    broadcast_id?: string;
-    broadcast_name?: string;
 }
 
 export declare const MessageVoteButtons: default_2.FC<MessageVoteButtonsProps>;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-DskHxSVN.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-CxGxAIhL.js";
 export {
   e as ActionButton,
   t as Avatar,

package/dist/testing.d.ts

@@ -41,7 +41,7 @@ declare type DmAgentSystemType = 'SYSTEM_DM_AGENT_PAUSED' | 'SYSTEM_DM_AGENT_RES
 
 declare type EscalationSystemType = 'SYSTEM_ESCALATION';
 
-declare type MessageCustomType = 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT' | 'MESSAGE_OUTBOUND' | 'MESSAGE_ATTACHMENT' | AgeSafetySystemType | EscalationSystemType | DmAgentSystemType;
+declare type MessageCustomType = 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT' | 'MESSAGE_ATTACHMENT' | AgeSafetySystemType | EscalationSystemType | DmAgentSystemType;
 
 export declare interface MessageMetadata {
     custom_type?: MessageCustomType;
@@ -62,8 +62,6 @@ export declare interface MessageMetadata {
      * `custom_type` — it identifies the send context, not the message kind. (MES-1266)
      */
     sent_from?: 'stack_detail';
-    broadcast_id?: string;
-    broadcast_name?: string;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.17.0-rc-1785345258",
+  "version": "3.17.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1785345258",
+    "@linktr.ee/messaging-core": "^2.2.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelView.tsx

@@ -56,7 +56,6 @@ const ChannelViewInner: React.FC<{
   viewerLanguage?: string
   showChannelInfo?: boolean
   onParticipantNameClick?: () => void
-  onBroadcastClick?: ChannelViewProps['onBroadcastClick']
   composerInput?: ChannelViewProps['composerInput']
 }> = ({
   onBack,
@@ -83,7 +82,6 @@ const ChannelViewInner: React.FC<{
   viewerLanguage,
   showChannelInfo = true,
   onParticipantNameClick,
-  onBroadcastClick,
   composerInput,
 }) => {
   const { channel } = useChannelStateContext()
@@ -127,7 +125,6 @@ const ChannelViewInner: React.FC<{
           {...props}
           chatbotVotingEnabled={chatbotVotingEnabled}
           viewerLanguage={viewerLanguage}
-          onBroadcastClick={onBroadcastClick}
         />
       )
 
@@ -137,7 +134,7 @@ const ChannelViewInner: React.FC<{
 
       return renderMessage(messageNode, message)
     },
-    [chatbotVotingEnabled, onBroadcastClick, renderMessage, viewerLanguage]
+    [chatbotVotingEnabled, renderMessage, viewerLanguage]
   )
 
   return (
@@ -295,7 +292,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
     viewerLanguage,
     showChannelInfo = true,
     onParticipantNameClick,
-    onBroadcastClick,
     composerInput,
   }) => {
     // Custom send message handler that:
@@ -409,7 +405,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
               viewerLanguage={viewerLanguage}
               showChannelInfo={showChannelInfo}
               onParticipantNameClick={onParticipantNameClick}
-              onBroadcastClick={onBroadcastClick}
               composerInput={composerInput}
             />
           </Channel>

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -120,7 +120,6 @@ interface TemplateProps {
         | 'MESSAGE_PAID'
         | 'MESSAGE_CHATBOT'
         | 'MESSAGE_ATTACHMENT'
-        | 'MESSAGE_OUTBOUND'
       payment_status?: 'pending' | 'paid' | 'failed' | 'refunded'
       amount_text?: string
       attachment_title?: string
@@ -128,8 +127,6 @@ interface TemplateProps {
       attachment_thumbnail?: string
       attachment_detail?: string
       attachment_content_type?: 'text' | 'media'
-      broadcast_id?: string
-      broadcast_name?: string
     }
   }>
 }
@@ -260,43 +257,6 @@ DeliveredStatus.args = {
   ],
 }
 
-export const BroadcastStatus: StoryFn<TemplateProps> = Template.bind({})
-BroadcastStatus.args = {
-  messages: [
-    {
-      id: 'msg-1',
-      text: 'July class details',
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_OUTBOUND',
-        broadcast_id: 'broadcast-1',
-        broadcast_name: 'July 9th Class attendees',
-      },
-    },
-  ],
-}
-
-export const BroadcastStatusNonLatest: StoryFn<TemplateProps> = Template.bind({})
-BroadcastStatusNonLatest.args = {
-  messages: [
-    {
-      id: 'msg-1',
-      text: 'July class details',
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_OUTBOUND',
-        broadcast_id: 'broadcast-1',
-        broadcast_name: 'July 9th Class attendees',
-      },
-    },
-    {
-      id: 'msg-2',
-      text: 'Let me know if you have any questions.',
-      user: storyUsers.creator,
-    },
-  ],
-}
-
 export const WithTipTag: StoryFn<TemplateProps> = Template.bind({})
 WithTipTag.args = {
   messages: [

package/src/components/CustomMessage/SentMessageDeliveryStatus.test.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { useChannelStateContext, useMessageContext } from 'stream-chat-react'
+import {
+  useChannelStateContext,
+  useMessageContext,
+} from 'stream-chat-react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen, within } from '../../test/utils'
@@ -66,7 +69,6 @@ describe('SentMessageDeliveryStatus', () => {
     // avatars.
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2' },
-      isMyMessage: () => true,
     } as never)
 
     renderWithProviders(<SentMessageDeliveryStatus />)
@@ -81,7 +83,6 @@ describe('SentMessageDeliveryStatus', () => {
   it('renders nothing for an earlier own message once a later message exists', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-1' },
-      isMyMessage: () => true,
     } as never)
 
     renderWithProviders(<SentMessageDeliveryStatus />)
@@ -103,7 +104,6 @@ describe('SentMessageDeliveryStatus', () => {
     } as never)
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2' },
-      isMyMessage: () => true,
     } as never)
 
     renderWithProviders(<SentMessageDeliveryStatus />)
@@ -124,7 +124,6 @@ describe('SentMessageDeliveryStatus', () => {
     } as never)
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2' },
-      isMyMessage: () => true,
     } as never)
 
     renderWithProviders(<SentMessageDeliveryStatus />)
@@ -139,7 +138,6 @@ describe('SentMessageDeliveryStatus', () => {
   it('renders "Sending" in the sending slot for the latest message', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2', status: 'sending' },
-      isMyMessage: () => true,
       threadList: false,
     } as never)
 
@@ -151,7 +149,6 @@ describe('SentMessageDeliveryStatus', () => {
   it('does not render "Sending" for an earlier message', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-1', status: 'sending' },
-      isMyMessage: () => true,
       threadList: false,
     } as never)
 
@@ -165,7 +162,6 @@ describe('SentMessageDeliveryStatus', () => {
     // threadList is true; we suppress the stamp ourselves.
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2', status: 'sending' },
-      isMyMessage: () => true,
       threadList: true,
     } as never)
 
@@ -177,74 +173,6 @@ describe('SentMessageDeliveryStatus', () => {
     ).not.toBeInTheDocument()
   })
 
-  it('renders a broadcast label for every own broadcast message, including non-latest messages', () => {
-    mockedUseMessageContext.mockReturnValue({
-      message: {
-        id: 'own-1',
-        metadata: {
-          broadcast_id: 'broadcast-1',
-          broadcast_name: 'July 9th Class attendees',
-        },
-      },
-      isMyMessage: () => true,
-      threadList: false,
-    } as never)
-
-    renderWithProviders(<SentMessageDeliveryStatus />)
-
-    expect(
-      screen.getByTestId('sent-message-broadcast-status')
-    ).toHaveTextContent('July 9th Class attendees')
-    expect(
-      screen.queryByTestId('sent-message-delivery-status')
-    ).not.toBeInTheDocument()
-    expect(screen.queryByText('•')).not.toBeInTheDocument()
-  })
-
-  it('uses a generic label and invokes the broadcast callback when the name is missing', () => {
-    const onBroadcastClick = vi.fn()
-    mockedUseMessageContext.mockReturnValue({
-      message: { id: 'own-2', metadata: { broadcast_id: 'broadcast-1' } },
-      isMyMessage: () => true,
-      threadList: false,
-    } as never)
-
-    renderWithProviders(
-      <SentMessageDeliveryStatus onBroadcastClick={onBroadcastClick} />
-    )
-
-    expect(
-      screen.getByTestId('sent-message-broadcast-status')
-    ).toHaveTextContent('Broadcast')
-    expect(
-      screen.getByRole('button', { name: 'View broadcast Broadcast' })
-    ).toBeInTheDocument()
-    screen.getByRole('button', { name: 'View broadcast Broadcast' }).click()
-    expect(onBroadcastClick).toHaveBeenCalledWith({ id: 'broadcast-1' })
-  })
-
-  it('does not render a broadcast label for a visitor viewing a broadcast message', () => {
-    mockedUseMessageContext.mockReturnValue({
-      message: {
-        id: 'broadcast-1',
-        metadata: {
-          broadcast_id: 'broadcast-1',
-          broadcast_name: 'July 9th Class attendees',
-        },
-      },
-      isMyMessage: () => false,
-      threadList: false,
-    } as never)
-
-    renderWithProviders(
-      <SentMessageDeliveryStatus onBroadcastClick={vi.fn()} />
-    )
-
-    expect(
-      screen.queryByTestId('sent-message-broadcast-status')
-    ).not.toBeInTheDocument()
-  })
-
   it('renders "Failed to send" for every own failed message', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-1', status: 'failed', type: 'regular' },

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -1,7 +1,6 @@
 import {
   ChecksIcon,
   CircleNotchIcon,
-  MegaphoneIcon,
   WarningCircleIcon,
 } from '@phosphor-icons/react'
 import {
@@ -94,44 +93,6 @@ const SendingStatus = () => {
   )
 }
 
-const BroadcastStatus = ({
-  broadcastId,
-  broadcastName,
-  onBroadcastClick,
-}: {
-  broadcastId: string
-  broadcastName?: string
-  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
-}) => {
-  const name = broadcastName || 'Broadcast'
-  const isLatestRealMessage = useIsLatestRealMessage()
-  const content = (
-    <>
-      {isLatestRealMessage && <span aria-hidden="true">•</span>}
-      <MegaphoneIcon weight="bold" aria-hidden="true" />
-      <span data-testid="sent-message-broadcast-status">{name}</span>
-    </>
-  )
-
-  return onBroadcastClick ? (
-    <button
-      type="button"
-      className="sent-message-broadcast-link"
-      aria-label={`View broadcast ${name}`}
-      onClick={() =>
-        onBroadcastClick({
-          id: broadcastId,
-          ...(broadcastName ? { name: broadcastName } : {}),
-        })
-      }
-    >
-      {content}
-    </button>
-  ) : (
-    content
-  )
-}
-
 const FailedStatus = () => (
   <span className="str-chat__message-status sent-message-status--failed">
     <WarningCircleIcon weight="bold" aria-hidden="true" />
@@ -153,15 +114,10 @@ const FailedStatus = () => (
  * because it has no failed slot and are shown on every own, non-thread
  * failed message.
  */
-export const SentMessageDeliveryStatus = ({
-  onBroadcastClick,
-}: {
-  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
-}) => {
+export const SentMessageDeliveryStatus = () => {
   const { isMyMessage, message, threadList } = useMessageContext(
     'SentMessageDeliveryStatus'
   )
-  const isOwnMessage = isMyMessage()
 
   // Stream's MessageStatus still mounts MessageSendingStatus when
   // threadList is true; keep all of our stamps out of thread replies.
@@ -169,28 +125,15 @@ export const SentMessageDeliveryStatus = ({
     return null
   }
 
-  if (message.status === 'failed' && isOwnMessage && message.type !== 'error') {
+  if (
+    message.status === 'failed' &&
+    isMyMessage() &&
+    message.type !== 'error'
+  ) {
     return <FailedStatus />
   }
 
-  if (!isOwnMessage) {
-    return null
-  }
-
-  const broadcastId = message.metadata?.broadcast_id
-  const broadcastName = message.metadata?.broadcast_name
-  const broadcastStatus =
-    message.status !== 'sending' &&
-    message.status !== 'failed' &&
-    broadcastId ? (
-      <BroadcastStatus
-        broadcastId={broadcastId}
-        broadcastName={broadcastName}
-        onBroadcastClick={onBroadcastClick}
-      />
-    ) : null
-
-  const messageStatus = (
+  return (
     <MessageStatus
       MessageSentStatus={DeliveredStatus}
       MessageDeliveredStatus={DeliveredStatus}
@@ -198,15 +141,4 @@ export const SentMessageDeliveryStatus = ({
       MessageSendingStatus={SendingStatus}
     />
   )
-
-  if (!broadcastStatus) {
-    return messageStatus
-  }
-
-  return (
-    <span className="sent-message-status-row">
-      {messageStatus}
-      {broadcastStatus}
-    </span>
-  )
 }

package/src/components/CustomMessage/index.tsx

@@ -54,13 +54,11 @@ import StreamAttachmentMessage, {
 type CustomMessageUIComponentProps = MessageUIComponentProps & {
   chatbotVotingEnabled?: boolean
   viewerLanguage?: string
-  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
 }
 
 type CustomMessageWithContextProps = MessageContextValue & {
   chatbotVotingEnabled?: boolean
   viewerLanguage?: string
-  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
 }
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
@@ -81,7 +79,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     renderText,
     threadList,
     viewerLanguage,
-    onBroadcastClick,
   } = props
 
   const { client } = useChatContext('CustomMessage')
@@ -427,7 +424,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             )}
           </div>
         )}
-        <SentMessageDeliveryStatus onBroadcastClick={onBroadcastClick} />
+        <SentMessageDeliveryStatus />
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}

package/src/components/MessageAttachment/Image/ImageAttachment.stories.tsx

@@ -21,6 +21,52 @@ const STACK_IMAGES: ImageItem[] = [
   { src: 'https://picsum.photos/seed/img-6/720/720', alt: 'Photo 6' },
 ]
 
+/**
+ * One source per aspect bucket, with intrinsic dimensions supplied so
+ * the card resolves at first paint instead of waiting on a network
+ * decode. Expected web cards (326×436 content box inside a 2px
+ * frame): portrait 249×440, landscape 330×187, square 330×330,
+ * panorama 330×69.
+ */
+const ASPECT_BUCKETS: { label: string; item: ImageItem }[] = [
+  {
+    label: 'Portrait 9:16',
+    item: {
+      src: 'https://picsum.photos/seed/ratio-portrait/1080/1920',
+      alt: 'Portrait photo',
+      width: 1080,
+      height: 1920,
+    },
+  },
+  {
+    label: 'Landscape 16:9',
+    item: {
+      src: 'https://picsum.photos/seed/ratio-landscape/1920/1080',
+      alt: 'Landscape photo',
+      width: 1920,
+      height: 1080,
+    },
+  },
+  {
+    label: 'Square 1:1',
+    item: {
+      src: 'https://picsum.photos/seed/ratio-square/1200/1200',
+      alt: 'Square photo',
+      width: 1200,
+      height: 1200,
+    },
+  },
+  {
+    label: 'Panorama 5:1',
+    item: {
+      src: 'https://picsum.photos/seed/ratio-panorama/3000/600',
+      alt: 'Panoramic photo',
+      width: 3000,
+      height: 600,
+    },
+  },
+]
+
 const meta: Meta = {
   title: 'MessageAttachment/Image',
   parameters: { layout: 'fullscreen' },
@@ -75,6 +121,37 @@ export const Single: StoryFn = () => (
   </StoryPage>
 )
 
+/**
+ * Single image, one row per aspect bucket. The image keeps its own
+ * ratio, fitted inside a max 326×436 content box on web (309×436
+ * below the `sm` breakpoint) — so `object-cover` never crops. Portrait
+ * resolves against the 440px height cap; landscape, square and
+ * panorama against the 330px width cap.
+ *
+ * Sent + Received only: the composer thumbnail is a fixed square and
+ * is unaffected by this treatment, so the Composer column is blank.
+ */
+export const SingleAspectRatios: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Single image — aspect ratios"
+      description="Pascal's original defect was every single image being forced to 1:1. Each row here is one source ratio; the card adopts the fitted box rather than cropping to a square. Composer column is intentionally blank — the composer thumbnail is unchanged."
+    />
+    <StoryGrid>
+      {ASPECT_BUCKETS.map(({ label, item }) => (
+        <StoryRow
+          key={label}
+          label={label}
+          sent={<ImageAttachment.Sent items={[item]} filename="photo.jpg" />}
+          received={
+            <ImageAttachment.Received items={[item]} filename="photo.jpg" />
+          }
+        />
+      ))}
+    </StoryGrid>
+  </StoryPage>
+)
+
 /** Single image with an accompanying caption rendered inside the bubble.
  *  Sent + Received only — captions are not rendered on the composer
  *  surface (the user types them in the message input, not on the