@linktr.ee/messaging-react 2.0.1 → 2.1.0

package/dist/index.d.ts

@@ -241,15 +241,38 @@ export declare interface ChannelViewProps {
     sendButton?: ComponentType<any>;
 }
 
-export declare interface CreatorCardProps extends LockedAttachmentBaseProps {
+export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
+    /** Placeholder shown in the title slot before the composer types one. */
     placeholderTitle?: string;
+    /** Placeholder shown in the amount slot before one is configured. */
     placeholderAmountText?: string;
-    isUnlocking?: boolean;
+    /**
+     * When provided, renders a dismiss X in the thumbnail corner. Called when
+     * the composer clicks it to remove the attachment.
+     */
     onDismiss?: () => void;
+    /** Fired the first time the composer taps the thumbnail to preview. */
     onPreviewClick?: () => void;
+    /**
+     * Lazily loads the underlying source so the composer can preview the
+     * attachment they're about to send. Called the first time the thumbnail is
+     * tapped; the returned source is cached and reused on subsequent toggles.
+     */
     onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+    /**
+     * When provided, renders a pencil button in the body bottom-right that the
+     * composer can use to edit the attachment metadata (e.g. open the price /
+     * gallery editor). Matches the Composer "Button" instance in Figma.
+     */
+    onEditClick?: () => void;
 }
 
+/**
+ * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
+ * should migrate to `ComposerCardProps`.
+ */
+export declare type CreatorCardProps = SentCardProps;
+
 export declare const CustomMessageProvider: Provider<Partial<CustomMessageRegistry>>;
 
 export declare interface CustomMessageRegistry {
@@ -300,9 +323,142 @@ export declare function getMessageDisplayText({ message, viewerLanguage, }: {
 
 export declare function isLinkAttachment(a: Attachment): boolean;
 
+/**
+ * Link attachments (image / file media + 1P/3P Link Apps) shown in the chat
+ * thread. Mirrors the `LockedAttachment` API — render `LinkAttachment.Composer`
+ * while drafting, `LinkAttachment.Sent` after posting, and
+ * `LinkAttachment.Received` in the recipient's thread. Maps to the
+ * "Attachments" and "LinkApps" sections of the messaging design system.
+ *
+ * Two visual layouts via the `layout` prop:
+ *   - **Featured** (default) — 180px hero thumbnail above the body. Used by
+ *     image / file Attachments and by hero-image LinkApps (Spotify with
+ *     cover art, TikTok with a frame, etc.).
+ *   - **Classic** — compact card with no hero thumbnail; title /
+ *     description / URL / CTA only. Used for LinkApp embeds without
+ *     artwork (FAQ, Form) and any link preview that lacks OG imagery.
+ *
+ * Image / file Attachments use `layout="featured"` and skip the title /
+ * description / URL body entirely (`CardBody` collapses to nothing when no
+ * text content is provided). LinkApps always carry a title + description
+ * and prefix the title with an `appIcon` brand badge.
+ */
+export declare const LinkAttachment: {
+    Composer: (props: LinkAttachmentComposerCardProps) => JSX_2.Element;
+    Sent: (props: LinkAttachmentSentCardProps) => JSX_2.Element;
+    Received: (props: LinkAttachmentReceivedCardProps) => JSX_2.Element;
+};
+
+/**
+ * Shared props for the three `LinkAttachment.*` variants (Composer, Sent,
+ * Received). Maps to the "Attachments" + "LinkApps" sections of the messaging
+ * design system in Figma — a 280px-wide card with an optional 180px hero
+ * thumbnail, a title (optionally prefixed with a brand badge for Link Apps),
+ * a description, and either a URL footer or a CTA button.
+ */
+export declare interface LinkAttachmentBaseProps {
+    title?: string;
+    /** Placeholder shown in the title slot before one is configured (dark variants only). */
+    placeholderTitle?: string;
+    /** Secondary description rendered below the title. */
+    description?: string;
+    /**
+     * Optional URL displayed at the bottom of the card (e.g. `tr.ee/briemix`).
+     * Ignored when `cta` is provided. Also used as the navigation target for
+     * the Received card when no `cta` is set.
+     */
+    url?: string;
+    /** MIME type of the hero thumbnail — drives the type icon for empty states. */
+    mimeType?: string;
+    /** Hero thumbnail (180px tall) shown above the title block. */
+    thumbnailUrl?: string;
+    /**
+     * Source URL for playable media (video, audio). When provided alongside a
+     * video / audio `mimeType`, the hero region renders an inline player with
+     * native controls instead of the static thumbnail / type-icon.
+     */
+    sourceUrl?: string;
+    /**
+     * Visual layout — `'featured'` keeps the 180px hero thumbnail above the
+     * body, `'classic'` drops the hero entirely for a compact text-only
+     * card. Defaults to `'featured'`.
+     */
+    layout?: LinkAttachmentLayout;
+    /**
+     * Optional 16x16 brand badge rendered before the title (used by Link Apps:
+     * Spotify, TikTok, FAQ, Form, etc.). Consumers render whatever they want
+     * — typically a colored 4px-rounded square containing a glyph or `<img>`.
+     */
+    appIcon?: default_2.ReactNode;
+    /**
+     * Optional call-to-action rendered below the description. When set,
+     * replaces the URL footer (e.g. FAQ "View FAQs", Form "Complete form").
+     */
+    cta?: LinkAttachmentCta;
+}
+
+export declare interface LinkAttachmentComposerCardProps extends LinkAttachmentBaseProps {
+    /**
+     * When provided, renders a dismiss X in the thumbnail corner. Called when
+     * the composer clicks it to remove the attachment.
+     */
+    onDismiss?: () => void;
+    /**
+     * When provided, renders a pencil button to the right of the description
+     * that the composer can use to edit the attachment metadata.
+     */
+    onEditClick?: () => void;
+}
+
+export declare interface LinkAttachmentCta {
+    label: string;
+    /** When set, the CTA renders as an `<a>` opening in a new tab. */
+    href?: string;
+    /** When set, called on click (in addition to `href` navigation if provided). */
+    onClick?: () => void;
+}
+
+/**
+ * Visual layout for a `LinkAttachment.*` card.
+ *
+ * - `featured` — full card with a 180px hero thumbnail above the body.
+ *   The default; matches the "Attachments" frames and the hero-image
+ *   "LinkApps" frames in Figma.
+ * - `classic` — compact card without a hero thumbnail. Title /
+ *   description / URL / CTA only. Used for Link App embeds that don't
+ *   carry artwork (and for plain link previews without OG imagery).
+ */
+export declare type LinkAttachmentLayout = 'featured' | 'classic';
+
+export declare interface LinkAttachmentReceivedCardProps extends LinkAttachmentBaseProps {
+    /**
+     * Fired when the recipient activates the card. Behavior depends on how
+     * the card is configured:
+     *   - **Link app with a CTA** (FAQ / Form): the CTA owns navigation;
+     *     `onClick` fires when the recipient taps the CTA itself, alongside
+     *     `cta.onClick` (use for analytics).
+     *   - **Link app with a URL** (Spotify / TikTok / generic link): the card
+     *     chrome is an `<a target="_blank">` opening `url` — `onClick` fires
+     *     alongside the navigation (use for analytics).
+     *   - **Image / file / placeholder attachment**: the card has no URL, so
+     *     it renders as a button. `onClick` is the consumer's hook for
+     *     opening an image / file preview (lightbox).
+     *   - **Video / audio attachment**: the shell stays non-interactive so
+     *     the native media controls remain operable — `onClick` is ignored
+     *     in this configuration.
+     */
+    onClick?: () => void;
+}
+
+export declare interface LinkAttachmentSentCardProps extends LinkAttachmentBaseProps {
+}
+
 export declare const LockedAttachment: {
-    Creator: (props: CreatorCardProps) => JSX_2.Element;
-    Visitor: (props: VisitorCardProps) => JSX_2.Element;
+    Composer: (props: ComposerCardProps) => JSX_2.Element;
+    Sent: (props: SentCardProps) => JSX_2.Element;
+    Received: (props: ReceivedCardProps) => JSX_2.Element;
+    Creator: (props: SentCardProps) => JSX_2.Element;
+    Visitor: (props: ReceivedCardProps) => JSX_2.Element;
 };
 
 declare interface LockedAttachmentBaseProps {
@@ -312,6 +468,14 @@ declare interface LockedAttachmentBaseProps {
     detail?: string;
     amountText?: string;
     paymentStatus?: PaymentStatus;
+    /**
+     * When provided with 2+ items, the card renders as a mixed-media carousel
+     * (e.g. a couple of photos + a video) instead of a single thumbnail. Each
+     * item brings its own thumbnail and optional source so that
+     * `LockedAttachment.Composer` / `.Sent` / `.Received` can all share the
+     * same carousel chrome.
+     */
+    gallery?: LockedAttachmentGalleryItem[];
 }
 
 export declare interface LockedAttachmentContextValue {
@@ -321,6 +485,15 @@ export declare interface LockedAttachmentContextValue {
     onFetchSource?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource | void>;
 }
 
+export declare interface LockedAttachmentGalleryItem {
+    /** MIME type of this carousel item — drives the per-item play / lock affordance. */
+    mimeType: string;
+    /** Poster image used for both the locked (blurred) and unlocked preview state. */
+    thumbnailUrl?: string;
+    /** Underlying source (image or video URL) — shown only when unlocked. */
+    sourceUrl?: string;
+}
+
 export declare interface LockedAttachmentSource {
     /** Proxied URL used by the media player for in-app playback. */
     sourceUrl: string;
@@ -501,10 +674,48 @@ export declare interface Participant {
  */
 declare type PaymentStatus = 'pending' | 'paid' | 'failed' | 'refunded';
 
+export declare interface ReceivedCardProps extends LockedAttachmentBaseProps {
+    /**
+     * Called when the recipient clicks Unlock on an unpaid attachment.
+     * Use this to open a checkout flow. Omit to hide the Unlock button.
+     */
+    onUnlockClick?: () => void;
+    /**
+     * Called to fetch the attachment source — fired automatically when
+     * `paymentStatus` transitions to `'paid'`, or immediately on click when
+     * `paymentStatus` is already `'paid'`. Return a `LockedAttachmentSource`
+     * to unlock the card.
+     */
+    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+    /**
+     * Called when the recipient clicks Download on an unlocked card.
+     * Omit to hide the Download button.
+     */
+    onDownloadClick?: () => void;
+    /**
+     * When true, shows a loading spinner on the Unlock button.
+     * Driven by the LockedAttachmentContext (e.g. checkout in progress).
+     */
+    isUnlocking?: boolean;
+}
+
 export declare function resolveLinkAttachment(message: LocalMessage): Attachment | undefined;
 
 export declare function resolveMediaFromMessage(message: LocalMessage): MediaMessageResolved | null;
 
+export declare interface SentCardProps extends LockedAttachmentBaseProps {
+    /** Placeholder shown in the title slot when no title is set. */
+    placeholderTitle?: string;
+    /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
+    onPreviewClick?: () => void;
+    /**
+     * Lazily loads the underlying source so the sender can preview the attachment.
+     * Called the first time the thumbnail is tapped; the returned source is cached
+     * and reused on subsequent toggles.
+     */
+    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+}
+
 export declare function useCustomMessage<K extends keyof CustomMessageRegistry>(key: K): CustomMessageRegistry[K];
 
 /**
@@ -528,30 +739,8 @@ declare interface UseMessageVoteResult {
  */
 export declare const useMessaging: () => MessagingContextValue;
 
-export declare interface VisitorCardProps extends LockedAttachmentBaseProps {
-    /**
-     * Called when the visitor clicks Unlock on an unpaid attachment.
-     * Use this to open a checkout flow. Omit to hide the Unlock button.
-     */
-    onUnlockClick?: () => void;
-    /**
-     * Called to fetch the attachment source — fired automatically when
-     * paymentStatus transitions to 'paid', or immediately on click when
-     * paymentStatus is already 'paid'. Return a LockedAttachmentSource to
-     * unlock the card.
-     */
-    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
-    /**
-     * Called when the visitor clicks Download on an unlocked card.
-     * Omit to hide the Download button.
-     */
-    onDownloadClick?: () => void;
-    /**
-     * When true, shows loading dots on the Unlock button.
-     * Driven by the LockedAttachmentContext (e.g. checkout in progress, payment processing).
-     */
-    isUnlocking?: boolean;
-}
+/** @deprecated Renamed to `ReceivedCardProps`. */
+export declare type VisitorCardProps = ReceivedCardProps;
 
 export declare type VoteSelection = 'up' | 'down' | null;
 

package/dist/index.js

@@ -1,26 +1,27 @@
-import { b as e, c as t, C as i, d as n, e as o, f as g, F as m, g as r, L as M, M as l, h as u, i as h, j as L, k as d, l as C, m as c, n as v, r as A, o as k, u as p, p as F, q as f } from "./index-Bex7eg3v.js";
+import { a as e, b as t, C as n, c as i, d as o, e as g, F as m, f as M, L as r, h as l, M as h, i as u, j as L, k as c, l as d, m as C, n as v, o as A, p as k, q as p, u as F, s as f, t as q } from "./index-DfcRe-Hj.js";
 export {
   e as ActionButton,
   t as Avatar,
-  i as ChannelEmptyState,
-  n as ChannelList,
+  n as ChannelEmptyState,
+  i as ChannelList,
   o as ChannelView,
   g as CustomMessageProvider,
   m as FaqList,
-  r as FaqListItem,
-  M as LockedAttachment,
-  l as MediaMessage,
+  M as FaqListItem,
+  r as LinkAttachment,
+  l as LockedAttachment,
+  h as MediaMessage,
   u as MessageVoteButtons,
-  h as MessagingProvider,
-  L as MessagingShell,
+  L as MessagingProvider,
+  c as MessagingShell,
   d as formatRelativeTime,
   C as getMessageDisplayText,
-  c as isLinkAttachment,
-  v as normalizeLanguageCode,
-  A as resolveLinkAttachment,
-  k as resolveMediaFromMessage,
-  p as useCustomMessage,
-  F as useMessageVote,
-  f as useMessaging
+  v as isLinkAttachment,
+  A as normalizeLanguageCode,
+  k as resolveLinkAttachment,
+  p as resolveMediaFromMessage,
+  F as useCustomMessage,
+  f as useMessageVote,
+  q as useMessaging
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/CustomMessage/index.tsx

@@ -227,21 +227,20 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           {isAttachment ? (
             <div className="str-chat__message-bubble-wrapper">
               {isMine ? (
-                <LockedAttachment.Creator
+                <LockedAttachment.Sent
                   title={message.metadata?.attachment_title}
                   mimeType={message.metadata?.attachment_mime_type}
                   thumbnailUrl={message.metadata?.attachment_thumbnail}
                   amountText={message.metadata?.amount_text}
                   detail={message.metadata?.attachment_detail}
                   paymentStatus={message.metadata?.payment_status}
-                  isUnlocking={isUnlocking(message.id)}
                   onPreviewClick={() => onUnlockClick?.(message, channel)}
                   onFetchSource={async () =>
                     await onFetchSource?.(message, channel)
                   }
                 />
               ) : (
-                <LockedAttachment.Visitor
+                <LockedAttachment.Received
                   title={message.metadata?.attachment_title}
                   mimeType={message.metadata?.attachment_mime_type}
                   thumbnailUrl={message.metadata?.attachment_thumbnail}

package/src/components/LinkAttachment/LinkAttachment.stories.tsx

@@ -0,0 +1,307 @@
+import {
+  ArticleIcon,
+  MusicNotesIcon,
+  PlayIcon,
+  QuestionIcon,
+} from '@phosphor-icons/react'
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import LinkAttachment from '.'
+
+const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
+const VIDEO_SOURCE = '/video-source.mp4'
+const VIDEO_POSTER = '/video-thumbnail.jpg'
+const AUDIO_SOURCE = '/audio-source.mp3'
+const PDF_SOURCE = '/document-source.pdf'
+
+const meta: Meta = {
+  title: 'LinkAttachment',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+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 APP_ICON_BASE =
+  'inline-flex size-4 items-center justify-center overflow-hidden rounded-[4px]'
+
+const SpotifyBadge = () => (
+  <span
+    aria-hidden
+    className={`${APP_ICON_BASE} bg-[#1ed760] text-white`}
+    title="Spotify"
+  >
+    <MusicNotesIcon className="size-3" weight="fill" />
+  </span>
+)
+
+const TikTokBadge = () => (
+  <span
+    aria-hidden
+    className={`${APP_ICON_BASE} bg-[#101211] text-white`}
+    title="TikTok"
+  >
+    <PlayIcon className="size-3" weight="fill" />
+  </span>
+)
+
+const FaqBadge = () => (
+  <span
+    aria-hidden
+    className={`${APP_ICON_BASE} bg-[#061492] text-white`}
+    title="FAQ"
+  >
+    <QuestionIcon className="size-3" weight="bold" />
+  </span>
+)
+
+const FormBadge = () => (
+  <span
+    aria-hidden
+    className={`${APP_ICON_BASE} bg-[#2665d6] text-white`}
+    title="Form"
+  >
+    <ArticleIcon className="size-3" weight="fill" />
+  </span>
+)
+
+const LINK_APPS: Array<{
+  key: string
+  appIcon: React.ReactNode
+  title: string
+  description: string
+  url?: string
+  ctaLabel?: string
+}> = [
+  {
+    key: 'spotify',
+    appIcon: <SpotifyBadge />,
+    title: 'My Playlist',
+    description: 'A handpicked workout mix I made for my clients.',
+    url: 'tr.ee/briemix',
+  },
+  {
+    key: 'tiktok',
+    appIcon: <TikTokBadge />,
+    title: 'My TikTok',
+    description: 'New form-check clips every week — follow along.',
+    url: 'tr.ee/brietok',
+  },
+  {
+    key: 'faq',
+    appIcon: <FaqBadge />,
+    title: 'Brie’s FAQ',
+    description: 'Get answers on my process and what to expect.',
+    ctaLabel: 'View FAQs',
+  },
+  {
+    key: 'form',
+    appIcon: <FormBadge />,
+    title: 'Fitness Assessment Fillout',
+    description: 'Share information about your journey and I’ll work on...',
+    ctaLabel: 'Complete form',
+  },
+]
+
+/**
+ * "Attachments" section of the Figma board — image / video / audio /
+ * file attachments shown across the three messaging states. These are
+ * pure media cards: the hero fills the card and there's no title /
+ * description / link metadata. Playable types use inline native controls:
+ *   - **Image** — full-bleed thumbnail; Received opens an image preview.
+ *   - **Video** — inline `<video controls>` with a poster.
+ *   - **Audio** — inline `<audio controls>` over the audio type-icon.
+ *   - **PDF** — type-icon placeholder; Received opens the PDF in the
+ *     browser's native viewer.
+ *   - **File** — generic file type-icon; Received opens a preview.
+ *   - **Placeholder** — empty draft state with the image type-icon.
+ */
+const ATTACHMENT_ROWS: Array<{
+  label: string
+  /** Drives the placeholder type-icon and the inline player switch. */
+  mimeType?: string
+  /** Thumbnail (image source or video poster). */
+  thumbnailUrl?: string
+  /** Playable media URL — when set with a video/audio mime, renders inline. */
+  sourceUrl?: string
+  /**
+   * Override the Received `onClick` handler. Used by the PDF row to open
+   * the PDF in the browser's native viewer.
+   */
+  onReceivedClick?: () => void
+}> = [
+  { label: 'Image', mimeType: 'image/jpeg', thumbnailUrl: IMAGE_THUMBNAIL },
+  {
+    label: 'Video',
+    mimeType: 'video/mp4',
+    thumbnailUrl: VIDEO_POSTER,
+    sourceUrl: VIDEO_SOURCE,
+  },
+  { label: 'Audio', mimeType: 'audio/mpeg', sourceUrl: AUDIO_SOURCE },
+  {
+    label: 'PDF',
+    mimeType: 'application/pdf',
+    onReceivedClick: () => window.open(PDF_SOURCE, '_blank', 'noopener'),
+  },
+  { label: 'File', mimeType: 'application/octet-stream' },
+  { label: 'Placeholder' },
+]
+
+export const Attachments: StoryFn = () => (
+  <Table>
+    <TableHead columns={['Composer', 'Sent', 'Received']} />
+    <tbody>
+      {ATTACHMENT_ROWS.map(
+        ({ label, mimeType, thumbnailUrl, sourceUrl, onReceivedClick }) => (
+          <tr key={label}>
+            <RowLabel>{label}</RowLabel>
+            <td className="align-top">
+              <LinkAttachment.Composer
+                mimeType={mimeType}
+                thumbnailUrl={thumbnailUrl}
+                sourceUrl={sourceUrl}
+                onDismiss={() => alert(`Dismissed ${label}`)}
+              />
+            </td>
+            <td className="align-top">
+              <LinkAttachment.Sent
+                mimeType={mimeType}
+                thumbnailUrl={thumbnailUrl}
+                sourceUrl={sourceUrl}
+              />
+            </td>
+            <td className="align-top">
+              <LinkAttachment.Received
+                mimeType={mimeType}
+                thumbnailUrl={thumbnailUrl}
+                sourceUrl={sourceUrl}
+                onClick={
+                  onReceivedClick ?? (() => alert(`Open ${label} preview`))
+                }
+              />
+            </td>
+          </tr>
+        )
+      )}
+    </tbody>
+  </Table>
+)
+
+type LinkAppLayout = 'featured' | 'classic'
+type LinkAppState = 'Received' | 'Sent' | 'Composer'
+
+const LINK_APP_ROWS: Array<{ layout: LinkAppLayout; state: LinkAppState }> = [
+  { layout: 'featured', state: 'Received' },
+  { layout: 'featured', state: 'Sent' },
+  { layout: 'featured', state: 'Composer' },
+  { layout: 'classic', state: 'Received' },
+  { layout: 'classic', state: 'Sent' },
+  { layout: 'classic', state: 'Composer' },
+]
+
+const renderLinkAppCard = (
+  layout: LinkAppLayout,
+  state: LinkAppState,
+  app: (typeof LINK_APPS)[number]
+) => {
+  const { key, appIcon, title, description, url, ctaLabel } = app
+  const thumbnailUrl = layout === 'featured' ? IMAGE_THUMBNAIL : undefined
+  const ctaWithHandler = ctaLabel
+    ? { label: ctaLabel, onClick: () => alert(`Tapped ${ctaLabel}`) }
+    : undefined
+  const ctaSilent = ctaLabel ? { label: ctaLabel } : undefined
+
+  if (state === 'Received') {
+    return (
+      <LinkAttachment.Received
+        layout={layout}
+        appIcon={appIcon}
+        title={title}
+        description={description}
+        thumbnailUrl={thumbnailUrl}
+        url={url}
+        cta={ctaWithHandler}
+      />
+    )
+  }
+  if (state === 'Sent') {
+    return (
+      <LinkAttachment.Sent
+        layout={layout}
+        appIcon={appIcon}
+        title={title}
+        description={description}
+        thumbnailUrl={thumbnailUrl}
+        url={url}
+        cta={ctaSilent}
+      />
+    )
+  }
+  return (
+    <LinkAttachment.Composer
+      layout={layout}
+      appIcon={appIcon}
+      title={title}
+      description={description}
+      thumbnailUrl={thumbnailUrl}
+      url={url}
+      cta={ctaSilent}
+      onDismiss={() => alert(`Dismissed ${key}`)}
+    />
+  )
+}
+
+/**
+ * "LinkApps" section of the Figma board — link previews with a brand
+ * badge prefixing the title and either a URL footer (Spotify, TikTok) or
+ * a CTA button (FAQ, Form). Each app is shown in both the **Featured**
+ * (hero image) and **Classic** (compact, no hero) layouts across all
+ * three messaging states.
+ */
+export const LinkApps: StoryFn = () => (
+  <Table>
+    <TableHead columns={LINK_APPS.map(({ key }) => key)} />
+    <tbody>
+      {LINK_APP_ROWS.map(({ layout, state }) => {
+        const label = `${layout === 'featured' ? 'Featured' : 'Classic'} (${state})`
+        return (
+          <tr key={label}>
+            <RowLabel>{label}</RowLabel>
+            {LINK_APPS.map((app) => (
+              <td key={app.key} className="align-top">
+                {renderLinkAppCard(layout, state, app)}
+              </td>
+            ))}
+          </tr>
+        )
+      })}
+    </tbody>
+  </Table>
+)