@linktr.ee/messaging-react 3.34.0 → 3.35.0-rc-1786104411

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BrVCdobn.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-DNWZLZ_A.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.RichCard=e.RichCard;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

@@ -18,6 +18,7 @@ import { MessagingUser } from '@linktr.ee/messaging-core';
 import { OfficialCtaActionKind } from '@linktr.ee/messaging-taxonomy';
 import { OfficialCtaActionPayload } from '@linktr.ee/messaging-taxonomy';
 import { Provider } from 'react';
+import { RichCardImagePresentation } from '@linktr.ee/messaging-taxonomy';
 import { SendMessageAPIResponse } from 'stream-chat';
 import { SetStateAction } from 'react';
 import { StreamChat } from 'stream-chat';
@@ -1659,6 +1660,100 @@ export declare function resolveMediaFromMessage(message: LocalMessage): MediaMes
  */
 export declare function resolveParticipantDisplayName(user?: ParticipantDisplayUser | null): string;
 
+/**
+ * The generic rich message card (`linktree_rich_card`) — the shared render
+ * primitive for rich message surfaces. Render `RichCard.Sent` for the sender's
+ * own copy (dark chrome) and `RichCard.Received` in the recipient's thread
+ * (light chrome). The official welcome card and broadcast link/collection cards
+ * are all this one card at different knobs:
+ *
+ *   - `hero` + `primary` action → the official welcome card (stacked button)
+ *   - `hero` + `secondary` action → a single-link broadcast (inline button)
+ *   - `fan` + `secondary` action → a collection broadcast
+ *
+ * A standalone renderer, not tied to Stream's `Attachment`: the dispatching
+ * consumer narrows an attachment with the taxonomy's `isRichCard`, then maps
+ * the taxonomy `RichCard` fields onto these props (resolving each action's
+ * `kind` to an `href` / `onClick`).
+ */
+export declare const RichCard: {
+    Sent: default_2.FC<RichCardBaseProps>;
+    Received: default_2.FC<RichCardBaseProps>;
+};
+
+/**
+ * A single footer action button — the **presentational** half of a taxonomy
+ * `RichCardAction`. The dispatching consumer resolves the action's `kind` to a
+ * behaviour before handing it here: `open_external_url` → `href`; a `launch_*`
+ * / `post_to_socials` kind → an `onClick` that opens its client surface. A kind
+ * the consumer does not recognise is dropped (no button) rather than mapped, so
+ * the card stands on its own image/title/subtitle — exactly the taxonomy's
+ * unknown-kind rule.
+ */
+export declare interface RichCardActionButton {
+    label: string;
+    /** Renders the button as an `<a target="_blank">` (for `open_external_url`). */
+    href?: string;
+    /** Called on activation (in addition to `href` navigation when both are set). */
+    onClick?: () => void;
+    /**
+     * Button emphasis. The **first** action's variant drives the footer layout:
+     * `primary` → a stacked full-width button; `secondary` → an inline compact
+     * row. Defaults to `primary`.
+     */
+    variant?: 'primary' | 'secondary';
+}
+
+/**
+ * Shared props for the `RichCard.*` variants (Sent, Received). The generic
+ * rich message card: a `hero` or `fan` image region, a title + subtitle, and a
+ * `variant`-driven footer of action buttons. The official welcome card and
+ * broadcast link/collection cards are all this one card at different knobs.
+ */
+export declare interface RichCardBaseProps {
+    title?: string;
+    /** Subtitle / body copy — the base attachment's `text`. */
+    subtitle?: string;
+    /**
+     * Max lines the subtitle wraps before clamping. Defaults to `3` — rich cards
+     * carry prose, unlike the single-line link-preview default.
+     */
+    subtitleLines?: number;
+    /** SAFE public thumbnail URLs. `hero` shows the first; `fan` shows up to 3. */
+    images?: string[];
+    /**
+     * Image layout. Defaults from {@link images} length (≤1 → `hero`, ≥2 →
+     * `fan`) via the taxonomy's `resolveRichCardImagePresentation`.
+     */
+    imagePresentation?: RichCardImagePresentation;
+    /**
+     * Footer actions. Empty / absent → no footer. Clients pass one today; the
+     * shape is future-proof for several.
+     */
+    actions?: RichCardActionButton[];
+    /** Optional 16×16 brand badge rendered before the title. */
+    appIcon?: default_2.ReactNode;
+    /**
+     * Dominant colour of the hero image (`#RRGGBB` or bare hex), painted as the
+     * card + tail surface. Only applied for a single on-screen `hero` image (a
+     * `fan` card keeps the plain fill) — the same gate LinkAttachment uses.
+     */
+    accentColor?: string;
+    /**
+     * Position of this card inside its same-author run. `'single'` / `'end'`
+     * paint the accent-coloured bubble tail; `'first'` / `'middle'` omit it.
+     * Defaults to `'single'`.
+     */
+    groupPosition?: MessageAttachmentGroupPosition;
+}
+
+export { RichCardImagePresentation }
+
+export declare type RichCardReceivedCardProps = RichCardBaseProps;
+
+/** Props for `RichCard.Sent` / `RichCard.Received`. */
+export declare type RichCardSentCardProps = RichCardBaseProps;
+
 export declare interface SentBubbleProps extends MessageBubbleBaseProps {
 }
 

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-Czf2XyYL.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 h, k as L, l as d, m as p, R as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, o as z, y as B, z as S, B as q, D, E, G as R, H as V, I as w } from "./index-BaeffiED.js";
 export {
   e as ActionButton,
   t as Avatar,
@@ -12,26 +12,27 @@ export {
   M as LockedAttachment,
   c as MediaMessage,
   u as MessageAttachment,
-  L as MessageBubble,
-  h as MessageVoteButtons,
-  p as MessagingProvider,
-  d as MessagingShell,
+  h as MessageBubble,
+  L as MessageVoteButtons,
+  d as MessagingProvider,
+  p as MessagingShell,
+  C as RichCard,
   v as buildCompactMetaLabel,
-  C as formatFileSize,
-  A as formatRelativeTime,
-  k as getFileExtensionLabel,
-  F as getMessageDisplayText,
-  b as isLinkAttachment,
-  P as isUuidLike,
-  f as messageAttachmentGroupPositionFromStream,
-  x as normalizeLanguageCode,
-  y as optimizeMessagingAttachmentUrl,
-  z as resolveConversationParticipant,
-  B as resolveLinkAttachment,
-  S as resolveMediaFromMessage,
-  q as resolveParticipantDisplayName,
-  D as useComposerLocked,
-  E as useCustomMessage,
+  A as formatFileSize,
+  k as formatRelativeTime,
+  F as getFileExtensionLabel,
+  b as getMessageDisplayText,
+  P as isLinkAttachment,
+  f as isUuidLike,
+  x as messageAttachmentGroupPositionFromStream,
+  y as normalizeLanguageCode,
+  z as optimizeMessagingAttachmentUrl,
+  B as resolveConversationParticipant,
+  S as resolveLinkAttachment,
+  q as resolveMediaFromMessage,
+  D as resolveParticipantDisplayName,
+  E as useComposerLocked,
+  R as useCustomMessage,
   V as useMessageVote,
   w as useMessaging
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.34.0",
+  "version": "3.35.0-rc-1786104411",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.4.0",
-    "@linktr.ee/messaging-taxonomy": "^0.6.0",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1786104411",
+    "@linktr.ee/messaging-taxonomy": "^0.7.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/LinkAttachment/components/_shared/CardCta.tsx

@@ -9,6 +9,18 @@ import { normalizeExternalHref } from './normalizeExternalHref'
 export interface CardCtaProps {
   variant: LinkAttachmentVariant
   cta: LinkAttachmentCta
+  /**
+   * Full-width pill (the default — LinkAttachment's single footer button).
+   * `false` sizes the button to its content, for an inline multi-action footer
+   * row (RichCard's `secondary` footer).
+   */
+  fullWidth?: boolean
+  /**
+   * Omit the default `mt-2` top margin when the caller owns spacing — e.g. a
+   * multi-action footer that spaces its buttons with its own `gap`. Defaults to
+   * `false`, preserving LinkAttachment's button-below-description offset.
+   */
+  standalone?: boolean
 }
 
 type CtaEmphasis = NonNullable<LinkAttachmentCta['variant']>
@@ -37,10 +49,17 @@ const BUTTON_CLASS_BY_VARIANT: Record<LinkAttachmentVariant, Record<CtaEmphasis,
  * Renders as `<a target="_blank">` when `cta.href` is set, otherwise as a
  * plain `<button>`.
  */
-const CardCta: React.FC<CardCtaProps> = ({ variant, cta }) => {
+const CardCta: React.FC<CardCtaProps> = ({
+  variant,
+  cta,
+  fullWidth = true,
+  standalone = false,
+}) => {
   const emphasis: CtaEmphasis = cta.variant ?? 'primary'
   const className = classNames(
-    'mt-2 inline-flex h-10 w-full items-center justify-center rounded-full px-4 text-sm font-medium leading-none transition-colors',
+    'inline-flex h-10 items-center justify-center rounded-full px-4 text-sm font-medium leading-none transition-colors',
+    fullWidth && 'w-full',
+    !standalone && 'mt-2',
     BUTTON_CLASS_BY_VARIANT[variant][emphasis]
   )
 

package/src/components/RichCard/RichCard.stories.tsx

@@ -0,0 +1,364 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import type { RichCardActionButton, RichCardBaseProps } from './types'
+
+import RichCard from '.'
+
+const IMAGE = '/image-thumbnail.jpg'
+const IMAGE_2 = '/video-thumbnail.jpg'
+const IMAGE_3 = '/document-thumbnail.jpg'
+
+const meta: Meta = {
+  title: 'RichCard',
+  parameters: {
+    layout: 'fullscreen',
+    // Matrix canvases are design-review surfaces, not regression targets — a
+    // single-pixel change in one cell would diff the whole grid. Default off;
+    // the stories that ARE regression targets opt back in per-story below.
+    chromatic: { disableSnapshot: true },
+  },
+}
+export default meta
+
+/* ── Story scaffold (mirrors LinkAttachment.stories) ─────────────────── */
+
+const Table = ({ children }: { children: React.ReactNode }) => (
+  <div className="min-h-screen w-full bg-[#F9F7F4] p-12">
+    <table className="border-separate border-spacing-4">{children}</table>
+  </div>
+)
+
+const TableHead = ({ columns }: { columns: string[] }) => (
+  <thead>
+    <tr>
+      <th className="pb-2 text-left text-xs font-medium text-black/40" />
+      {columns.map((column) => (
+        <th
+          key={column}
+          className="pb-2 text-left text-xs font-medium text-black/40"
+        >
+          {column}
+        </th>
+      ))}
+    </tr>
+  </thead>
+)
+
+const RowLabel = ({ children }: { children: React.ReactNode }) => (
+  <td className="pr-4 pt-2 text-right align-top text-xs font-medium text-black/40">
+    {children}
+  </td>
+)
+
+const Cell = ({ children }: { children: React.ReactNode }) => (
+  <td className="align-top">{children}</td>
+)
+
+/* ── Shared fixtures ─────────────────────────────────────────────────── */
+
+const primary = (label: string): RichCardActionButton => ({
+  label,
+  variant: 'primary',
+  onClick: () => alert(`Tapped ${label}`),
+})
+const secondaryLink = (label: string, url: string): RichCardActionButton => ({
+  label,
+  variant: 'secondary',
+  href: url,
+})
+
+// The three canonical surfaces the card converges (interactive-surfaces.md).
+const OFFICIAL_WELCOME: RichCardBaseProps = {
+  title: 'Set up your welcome message',
+  subtitle: 'Automatically greet new followers the moment they message you.',
+  images: [IMAGE],
+  imagePresentation: 'hero',
+  actions: [primary('Set up welcome message')],
+}
+const SINGLE_LINK: RichCardBaseProps = {
+  title: 'Check out my new drop',
+  subtitle: 'Fresh merch, live now — grab it before it’s gone.',
+  images: [IMAGE],
+  imagePresentation: 'hero',
+  actions: [secondaryLink('Shop now', 'tr.ee/briedrop')],
+}
+const COLLECTION: RichCardBaseProps = {
+  title: 'My summer collection',
+  subtitle: 'Three new looks, styled and ready.',
+  images: [IMAGE, IMAGE_2, IMAGE_3],
+  imagePresentation: 'fan',
+  actions: [secondaryLink('View collection', 'tr.ee/briesummer')],
+}
+
+const bothSides = (props: RichCardBaseProps) => (
+  <>
+    <Cell>
+      <RichCard.Received {...props} />
+    </Cell>
+    <Cell>
+      <RichCard.Sent {...props} />
+    </Cell>
+  </>
+)
+
+/* ── Instances — the headline: one card, three surfaces ──────────────── */
+
+/**
+ * The three real surfaces that converge on `linktree_rich_card`, each shown
+ * Received (light) and Sent (dark). They differ only by knobs: the official
+ * welcome card is `hero + primary`; a single-link broadcast is `hero +
+ * secondary`; a collection is `fan + secondary`.
+ */
+export const Instances: StoryFn = () => (
+  <Table>
+    <TableHead columns={['Received (light)', 'Sent (dark)']} />
+    <tbody>
+      <tr>
+        <RowLabel>Official welcome — hero · primary</RowLabel>
+        {bothSides(OFFICIAL_WELCOME)}
+      </tr>
+      <tr>
+        <RowLabel>Single link — hero · secondary</RowLabel>
+        {bothSides(SINGLE_LINK)}
+      </tr>
+      <tr>
+        <RowLabel>Collection — fan · secondary</RowLabel>
+        {bothSides(COLLECTION)}
+      </tr>
+    </tbody>
+  </Table>
+)
+Instances.parameters = { chromatic: { disableSnapshot: false } }
+
+/* ── Image presentation — hero / fan / count default ─────────────────── */
+
+const PRESENTATION_BASE: RichCardBaseProps = {
+  title: 'My summer collection',
+  subtitle: 'Three new looks, styled and ready.',
+  actions: [secondaryLink('View collection', 'tr.ee/briesummer')],
+}
+
+/**
+ * The `imagePresentation` knob: `hero` (one prominent image), `fan` (2–3 fanned
+ * thumbnails), and the count-derived default when the knob is omitted (≤1 →
+ * hero, ≥2 → fan). Shown on both surfaces.
+ */
+export const ImagePresentation: StoryFn = () => (
+  <Table>
+    <TableHead
+      columns={[
+        'hero (1)',
+        'fan (2)',
+        'fan (3)',
+        'default — 1 img',
+        'default — 2 imgs',
+      ]}
+    />
+    <tbody>
+      {(['Received', 'Sent'] as const).map((side) => {
+        const Card = RichCard[side]
+        return (
+          <tr key={side}>
+            <RowLabel>{side}</RowLabel>
+            <Cell>
+              <Card {...PRESENTATION_BASE} images={[IMAGE]} imagePresentation="hero" />
+            </Cell>
+            <Cell>
+              <Card
+                {...PRESENTATION_BASE}
+                images={[IMAGE, IMAGE_2]}
+                imagePresentation="fan"
+              />
+            </Cell>
+            <Cell>
+              <Card
+                {...PRESENTATION_BASE}
+                images={[IMAGE, IMAGE_2, IMAGE_3]}
+                imagePresentation="fan"
+              />
+            </Cell>
+            <Cell>
+              <Card {...PRESENTATION_BASE} images={[IMAGE]} />
+            </Cell>
+            <Cell>
+              <Card {...PRESENTATION_BASE} images={[IMAGE, IMAGE_2]} />
+            </Cell>
+          </tr>
+        )
+      })}
+    </tbody>
+  </Table>
+)
+ImagePresentation.parameters = { chromatic: { disableSnapshot: false } }
+
+/* ── Footer layout — variant drives stacked vs inline ────────────────── */
+
+const FOOTER_BASE: RichCardBaseProps = {
+  title: 'A note from Brie',
+  subtitle: 'Pick how you’d like to keep in touch.',
+  images: [IMAGE],
+  imagePresentation: 'hero',
+}
+
+/**
+ * The footer layout is the visual face of the **first** action's `variant`:
+ * `primary` → a stacked full-width button; `secondary` → an inline compact row.
+ * Shown single-action (today's case) and two-action (future-proof), on both
+ * surfaces.
+ */
+export const FooterLayout: StoryFn = () => (
+  <Table>
+    <TableHead
+      columns={[
+        'primary — single',
+        'secondary — single',
+        'primary — two',
+        'secondary — two',
+      ]}
+    />
+    <tbody>
+      {(['Received', 'Sent'] as const).map((side) => {
+        const Card = RichCard[side]
+        return (
+          <tr key={side}>
+            <RowLabel>{side}</RowLabel>
+            <Cell>
+              <Card {...FOOTER_BASE} actions={[primary('Set up welcome message')]} />
+            </Cell>
+            <Cell>
+              <Card
+                {...FOOTER_BASE}
+                actions={[secondaryLink('Shop now', 'tr.ee/x')]}
+              />
+            </Cell>
+            <Cell>
+              <Card
+                {...FOOTER_BASE}
+                actions={[primary('Set up now'), primary('Maybe later')]}
+              />
+            </Cell>
+            <Cell>
+              <Card
+                {...FOOTER_BASE}
+                actions={[
+                  secondaryLink('Shop', 'tr.ee/x'),
+                  secondaryLink('Share', 'tr.ee/y'),
+                ]}
+              />
+            </Cell>
+          </tr>
+        )
+      })}
+    </tbody>
+  </Table>
+)
+FooterLayout.parameters = { chromatic: { disableSnapshot: false } }
+
+/* ── Accent chin — hero-only derivation + gate ───────────────────────── */
+
+const ACCENTS: Array<{ label: string; accentColor?: string }> = [
+  { label: '#7008E7', accentColor: '#7008E7' },
+  { label: '#738883', accentColor: '#738883' },
+  { label: 'none', accentColor: undefined },
+  { label: 'malformed', accentColor: 'rebeccapurple' },
+]
+
+/**
+ * Accent derivation reuses LinkAttachment's `useChinPalette`: a validated hex
+ * paints the card + tail surface, hue kept and lightness swapped to a WCAG-safe
+ * stop; `none` / malformed keep the plain fill. It is gated to a single on-
+ * screen `hero` image — the bottom row shows a `fan` card ignoring the accent.
+ */
+export const AccentChin: StoryFn = () => (
+  <Table>
+    <TableHead columns={ACCENTS.map(({ label }) => label)} />
+    <tbody>
+      <tr>
+        <RowLabel>Sent (last in run)</RowLabel>
+        {ACCENTS.map(({ label, accentColor }) => (
+          <Cell key={label}>
+            <RichCard.Sent {...SINGLE_LINK} accentColor={accentColor} />
+          </Cell>
+        ))}
+      </tr>
+      <tr>
+        <RowLabel>Received</RowLabel>
+        {ACCENTS.map(({ label, accentColor }) => (
+          <Cell key={label}>
+            <RichCard.Received {...SINGLE_LINK} accentColor={accentColor} />
+          </Cell>
+        ))}
+      </tr>
+      <tr>
+        <RowLabel>fan — accent ignored</RowLabel>
+        {ACCENTS.map(({ label, accentColor }) => (
+          <Cell key={label}>
+            <RichCard.Sent {...COLLECTION} accentColor={accentColor} />
+          </Cell>
+        ))}
+      </tr>
+    </tbody>
+  </Table>
+)
+AccentChin.parameters = { chromatic: { disableSnapshot: false } }
+
+/* ── Content edges — clamps, missing pieces, tailless ────────────────── */
+
+const LONG_TITLE =
+  'Set up your welcome message so every new follower gets greeted the moment they say hello'
+const LONG_SUBTITLE =
+  'Thanks for reaching out! This is the kind of longer prose body an official message carries — it runs well past a single line and should wrap up to the clamp instead of clipping like a link preview, then trail off with an ellipsis once it reaches the limit.'
+
+/**
+ * Edge cases: a title past two lines (clamps at 2), a long prose subtitle
+ * (clamps at the 3-line default), an image-less card (chin only, content-sized),
+ * a title-only card, an action-only card, and a mid-run card (no bubble tail).
+ */
+export const ContentEdges: StoryFn = () => (
+  <Table>
+    <TableHead
+      columns={[
+        'long title',
+        'long subtitle',
+        'no image',
+        'title only',
+        'mid-run (no tail)',
+      ]}
+    />
+    <tbody>
+      {(['Received', 'Sent'] as const).map((side) => {
+        const Card = RichCard[side]
+        return (
+          <tr key={side}>
+            <RowLabel>{side}</RowLabel>
+            <Cell>
+              <Card
+                {...OFFICIAL_WELCOME}
+                title={LONG_TITLE}
+                subtitle="Short subtitle."
+              />
+            </Cell>
+            <Cell>
+              <Card {...OFFICIAL_WELCOME} subtitle={LONG_SUBTITLE} />
+            </Cell>
+            <Cell>
+              <Card
+                title="No image, just copy"
+                subtitle="An image-less rich card sizes to its content instead of the 250px box."
+                actions={[primary('Got it')]}
+              />
+            </Cell>
+            <Cell>
+              <Card {...OFFICIAL_WELCOME} subtitle={undefined} actions={undefined} />
+            </Cell>
+            <Cell>
+              <Card {...OFFICIAL_WELCOME} groupPosition="middle" />
+            </Cell>
+          </tr>
+        )
+      })}
+    </tbody>
+  </Table>
+)
+ContentEdges.parameters = { chromatic: { disableSnapshot: false } }