@linktr.ee/messaging-react 2.1.0 → 2.2.0-rc-1778753733

package/src/components/MessageAttachment/index.tsx

@@ -0,0 +1,149 @@
+import AudioAttachment, {
+  type AudioComposerProps,
+  type AudioReceivedProps,
+  type AudioSentProps,
+} from './Audio'
+import FileAttachment, {
+  type FileComposerProps,
+  type FileReceivedProps,
+  type FileSentProps,
+} from './File'
+import ImageAttachment, {
+  type ImageComposerProps,
+  type ImageReceivedProps,
+  type ImageSentProps,
+} from './Image'
+import PdfAttachment, {
+  type PdfComposerProps,
+  type PdfReceivedProps,
+  type PdfSentProps,
+} from './Pdf'
+import VideoAttachment, {
+  type VideoComposerProps,
+  type VideoReceivedProps,
+  type VideoSentProps,
+} from './Video'
+
+/**
+ * Per-MIME chat attachment cards used inside the messaging stream.
+ *
+ * Each subnamespace (`Image`, `Video`, `Audio`, `Pdf`, `File`) exposes
+ * three states (`Composer`, `Sent`, `Received`) that map to the
+ * sender / recipient sides of a chat:
+ *
+ *   - `Composer` — sender draft state with a dismiss `×` affordance.
+ *   - `Sent`     — sender-side state shown after posting.
+ *   - `Received` — recipient-side state.
+ *
+ * Sent / Received variants accept an optional `text` prop that renders
+ * inside the same bubble as the attachment — mirroring the mobile chat
+ * where a sender can pair a caption with an attachment ('Here is the
+ * file', 'Here is the image'). Composer prop types intentionally omit
+ * `text` (and `items` / `groupPosition`) so the type system enforces
+ * the same contract: captions live in the message-input textarea, not
+ * inside the draft attachment preview.
+ *
+ * Stacked attachments — every type except `Composer` accepts an
+ * `items={[…]}` prop on Sent / Received that takes precedence over
+ * the singular `src`/`filename`/etc. inputs:
+ *
+ *   - Image / Video render a 1 / 2 / 3 / 4-tile grid (5+ collapse
+ *     into a `+N` overflow tile). Activating any tile opens the
+ *     built-in `ImageViewer` / `VideoViewer` at that index, with
+ *     arrow-key navigation between siblings.
+ *   - Pdf / Audio / File render their compact rows / players in a
+ *     vertical stack with an 8px gap between rows. Each row keeps
+ *     its own activation target — Pdf opens the viewer at that
+ *     index, Audio gets its own native player, and File downloads
+ *     the asset for that row.
+ *
+ * The Composer surface accepts only a single attachment at a time,
+ * so its props omit `items` / `text`.
+ *
+ * Image / Video Composer renders bare — just the media with rounded
+ * corners and a dismiss overlay, no surrounding bubble — so the draft
+ * preview reads as an in-progress attachment instead of a sent
+ * message. Sent / Received wrap the media in the shared bubble chrome.
+ *
+ * Image / Video / Pdf are interactive in every state (Composer, Sent,
+ * Received) — clicks open the corresponding native viewer with built-in
+ * download. File rows download the asset directly. Audio renders a
+ * native `<audio controls>` player which exposes its own download in
+ * the kebab menu, so we don't render a separate Download affordance.
+ *
+ * # Lazy-loading defaults
+ *
+ * Media attachments bake in network-friendly defaults for long chat
+ * histories and expose explicit escape hatches when a caller knows
+ * better (e.g. a hero attachment that's already on-screen):
+ *
+ *   - **Image** — every `<img>` rendered on the bubble surface
+ *     (Composer thumbnail, single + stacked tiles, `+N` overflow)
+ *     ships with `loading="lazy" decoding="async"`. Override via the
+ *     attachment's `loading` prop (or `ImageItem.loading` for per-tile
+ *     control). The opened `ImageViewer` always eager-loads the
+ *     active image so it appears immediately.
+ *   - **Video** — the `<video>` rendered inside the `VideoViewer`
+ *     defaults to `preload="none"`, so no video bytes are fetched
+ *     until the user opens the viewer. Poster `<img>` thumbnails on
+ *     the bubble surface are `loading="lazy" decoding="async"`.
+ *     Override via the attachment's `preload` prop (or
+ *     `VideoItem.preload` per item). Once the viewer is open the
+ *     active item bumps to `preload="metadata"` so duration / the
+ *     first frame appear immediately.
+ *   - **Audio** — a single audio bubble defaults to
+ *     `preload="metadata"` so the native player surfaces duration
+ *     immediately. A stacked audio bubble (`items.length > 1`)
+ *     defaults to `preload="none"` for every player so a thread of
+ *     voice memos doesn't fan out N parallel metadata requests on
+ *     first paint. Override via the attachment's `preload` prop
+ *     (or `AudioItem.preload` per track).
+ *   - **Pdf** / **File** — no inline media element to throttle; the
+ *     bubble renders compact rows that download / open lazily on
+ *     activation. No `loading` / `preload` props on these surfaces.
+ */
+const MessageAttachment = {
+  Image: ImageAttachment,
+  Video: VideoAttachment,
+  Audio: AudioAttachment,
+  Pdf: PdfAttachment,
+  File: FileAttachment,
+}
+
+export default MessageAttachment
+
+export type {
+  ImageComposerProps,
+  ImageSentProps,
+  ImageReceivedProps,
+  VideoComposerProps,
+  VideoSentProps,
+  VideoReceivedProps,
+  AudioComposerProps,
+  AudioSentProps,
+  AudioReceivedProps,
+  PdfComposerProps,
+  PdfSentProps,
+  PdfReceivedProps,
+  FileComposerProps,
+  FileSentProps,
+  FileReceivedProps,
+}
+export type {
+  ImageItem,
+  ImageLoadingMode,
+  VideoItem,
+  PdfItem,
+  AudioItem,
+  FileItem,
+  BubbleGroupPosition,
+  MediaPreloadMode,
+  MessageAttachmentBaseProps,
+  MessageAttachmentState,
+} from './types'
+export { bubbleGroupPositionFromStream } from './types'
+export {
+  formatFileSize,
+  getFileExtensionLabel,
+  buildCompactMetaLabel,
+} from './_shared/fileMeta'

package/src/components/MessageAttachment/stories/StoryTable.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+
+/**
+ * Shared layout used by every per-type `MessageAttachment` story —
+ * three columns (Composer / Sent / Received) on a tinted page so the
+ * dark sender bubbles read against a softer surface and the light
+ * received bubbles still pop. Mirrors the layout the existing
+ * `LinkAttachment` and `MediaMessage` stories use.
+ */
+export const StoryPage: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <div className="min-h-screen w-full bg-[#F9F7F4] p-12">{children}</div>
+)
+
+export const StoryHeading: React.FC<{
+  title: string
+  description?: string
+}> = ({ title, description }) => (
+  <div className="mb-6">
+    <h2 className="text-base font-semibold text-black/80">{title}</h2>
+    {description ? (
+      <p className="mt-1 max-w-prose text-sm text-black/55">{description}</p>
+    ) : null}
+  </div>
+)
+
+export const ColumnHeader: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <p className="mb-3 text-xs font-medium uppercase tracking-wide text-black/40">
+    {children}
+  </p>
+)
+
+export interface StoryRowProps {
+  label: string
+  /** Omit `composer` to leave the column blank — used by stacked
+   *  Image/Video rows since the composer surface only ever shows a
+   *  single attachment (no stacked previews in the composer). */
+  composer?: React.ReactNode
+  sent: React.ReactNode
+  received: React.ReactNode
+}
+
+export const StoryRow: React.FC<StoryRowProps> = ({
+  label,
+  composer,
+  sent,
+  received,
+}) => (
+  <div className="grid grid-cols-[160px_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)] items-start gap-6 py-4">
+    <p className="text-xs font-medium text-black/55">{label}</p>
+    <div>{composer ?? null}</div>
+    <div>{sent}</div>
+    <div>{received}</div>
+  </div>
+)
+
+export const StoryGrid: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <div className="space-y-3 divide-y divide-black/5">
+    <div className="grid grid-cols-[160px_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)] gap-6">
+      <span />
+      <ColumnHeader>Composer</ColumnHeader>
+      <ColumnHeader>Sent</ColumnHeader>
+      <ColumnHeader>Received</ColumnHeader>
+    </div>
+    {children}
+  </div>
+)

package/src/components/MessageAttachment/types.ts

@@ -0,0 +1,178 @@
+import type React from 'react'
+
+/**
+ * Three messaging states a `MessageAttachment.*` card can render in,
+ * mirroring the LinkAttachment / LockedAttachment families.
+ */
+export type MessageAttachmentState = 'composer' | 'sent' | 'received'
+
+/**
+ * Visual variant of the surrounding `Bubble` chrome. Sender-side bubbles
+ * (`composer`, `sent`) get the dark treatment; recipient-side bubbles
+ * (`received`) get the light treatment.
+ */
+export type BubbleVariant = 'dark' | 'light'
+
+/** Maps a state to the bubble chrome it should render with. */
+export const bubbleVariantForState = (
+  state: MessageAttachmentState
+): BubbleVariant => (state === 'received' ? 'light' : 'dark')
+
+/**
+ * Position of a bubble inside a same-author run, mirroring the grouping
+ * stream-chat-react applies to consecutive messages from the same user:
+ *
+ *   - `'single'` — standalone message, every corner fully rounded.
+ *   - `'first'`  — first in a 2+ message run; the corner facing the
+ *                  next bubble in the run is flattened.
+ *   - `'middle'` — both the corner facing the previous bubble and the
+ *                  corner facing the next bubble are flattened.
+ *   - `'end'`    — last in a 2+ message run; the corner facing the
+ *                  previous bubble is flattened (this is also the
+ *                  bubble the avatar attaches to on the receiver side).
+ *
+ * "Facing" is determined by the bubble's side: sender-aligned bubbles
+ * cluster against their right edge, receiver-aligned bubbles against
+ * their left edge.
+ */
+export type BubbleGroupPosition = 'single' | 'first' | 'middle' | 'end'
+
+/**
+ * Convenience adapter that derives the `BubbleGroupPosition` from the
+ * three booleans `stream-chat-react` forwards into the `Message` HOC.
+ * Drop-in for `useMessageContext()` consumers:
+ *
+ * ```tsx
+ * const { firstOfGroup, endOfGroup, groupedByUser } = useMessageContext()
+ * <MessageAttachment.Image.Sent
+ *   {...props}
+ *   groupPosition={bubbleGroupPositionFromStream({
+ *     firstOfGroup, endOfGroup, groupedByUser,
+ *   })}
+ * />
+ * ```
+ */
+export const bubbleGroupPositionFromStream = ({
+  firstOfGroup,
+  endOfGroup,
+  groupedByUser,
+}: {
+  firstOfGroup?: boolean
+  endOfGroup?: boolean
+  groupedByUser?: boolean
+}): BubbleGroupPosition => {
+  if (!groupedByUser) return 'single'
+  if (firstOfGroup && endOfGroup) return 'single'
+  if (firstOfGroup) return 'first'
+  if (endOfGroup) return 'end'
+  return 'middle'
+}
+
+/** Loading hint forwarded to the underlying `<img>` element. */
+export type ImageLoadingMode = 'lazy' | 'eager'
+
+/** Preload hint forwarded to the underlying `<video>` / `<audio>` element. */
+export type MediaPreloadMode = 'none' | 'metadata' | 'auto'
+
+/** A single image inside an Image attachment (single or stacked). */
+export interface ImageItem {
+  src: string
+  alt?: string
+  /** Optional width/height hint — preserved aspect on cover-fit. */
+  width?: number
+  height?: number
+  /**
+   * Per-tile native lazy-load override. Defaults to the parent
+   * attachment's `loading` value (which itself defaults to `'lazy'`).
+   * Pass `'eager'` for above-the-fold hero tiles.
+   */
+  loading?: ImageLoadingMode
+}
+
+/** A single video inside a Video attachment (single or stacked). */
+export interface VideoItem {
+  src: string
+  /** Poster / thumbnail rendered before playback starts. */
+  poster?: string
+  /** Optional MIME type (e.g. `video/mp4`). */
+  mimeType?: string
+  /**
+   * Per-item override for the `<video preload>` hint. Defaults to the
+   * parent attachment's `preload` value (which itself defaults to
+   * `'none'` so the poster carries the visual weight and no video
+   * bytes are fetched until playback).
+   */
+  preload?: MediaPreloadMode
+}
+
+/** A single PDF inside a Pdf attachment (single or stacked). */
+export interface PdfItem {
+  src: string
+  /** Filename — drives the title + the meta line + the viewer toolbar. */
+  filename?: string
+  /** File size in bytes — formatted into the `EXT · SIZE` meta line. */
+  fileSize?: number
+  /** Override displayed title. Defaults to `filename`. */
+  title?: string
+}
+
+/** A single audio file inside an Audio attachment (single or stacked). */
+export interface AudioItem {
+  src: string
+  /** MIME type hint — typed onto the inline `<source>` element. */
+  mimeType?: string
+  /**
+   * Filename — used as the download default name (consumed by the
+   * native player's kebab menu).
+   */
+  filename?: string
+  /**
+   * Per-track override for the `<audio preload>` hint. Defaults to
+   * the parent attachment's `preload` value, which itself defaults
+   * to `'metadata'` for a single audio (so the native player can
+   * surface duration immediately) and `'none'` for a stacked thread
+   * (so a fan-out of metadata requests doesn't happen on first paint).
+   */
+  preload?: MediaPreloadMode
+}
+
+/** A single generic file inside a File attachment (single or stacked). */
+export interface FileItem {
+  src: string
+  /** Filename — drives the title + the meta line + the download default name. */
+  filename?: string
+  /** File size in bytes — formatted into the `EXT · SIZE` meta line. */
+  fileSize?: number
+  /** MIME type — drives the type icon. Defaults to `application/octet-stream`. */
+  mimeType?: string
+  /** Override displayed title. Defaults to `filename`. */
+  title?: string
+}
+
+/** Shared props every `MessageAttachment.*.{Composer|Sent|Received}` accepts. */
+export interface MessageAttachmentBaseProps {
+  /**
+   * Optional text rendered below the attachment inside the same bubble.
+   * Mirrors the chat behavior in the mobile screenshots — `'Here is the
+   * file'`, `'Here is the image'`, etc.
+   */
+  text?: React.ReactNode
+  /**
+   * Position of this attachment inside a same-author message run —
+   * mirrors the corner-flattening stream-chat-react applies to text
+   * bubbles in a clustered conversation. Defaults to `'single'`, so
+   * standalone usage keeps every corner rounded. Pass the value
+   * derived from `bubbleGroupPositionFromStream({ firstOfGroup,
+   * endOfGroup, groupedByUser })` when rendering inside a real
+   * `CustomMessage` thread to make the attachment visually merge
+   * with adjacent bubbles. Image / Video Composer ignore this — the
+   * draft preview renders bare without the surrounding bubble.
+   */
+  groupPosition?: BubbleGroupPosition
+}
+
+/** Shared props for the `Composer` state of every attachment type. */
+export interface ComposerExtras {
+  /** Renders a dismiss `×` button overlaid on the attachment. */
+  onDismiss?: () => void
+}

package/src/index.ts

@@ -8,6 +8,7 @@ export { ChannelView } from './components/ChannelView'
 export { default as ActionButton } from './components/ActionButton'
 export { default as LockedAttachment } from './components/LockedAttachment'
 export { default as LinkAttachment } from './components/LinkAttachment'
+export { default as MessageAttachment } from './components/MessageAttachment'
 export { Avatar } from './components/Avatar'
 export { FaqList } from './components/FaqList'
 export { FaqListItem } from './components/FaqList/FaqListItem'
@@ -71,6 +72,37 @@ export type {
   LinkAttachmentCta,
   LinkAttachmentLayout,
 } from './components/LinkAttachment'
+export type {
+  ImageComposerProps as MessageAttachmentImageComposerProps,
+  ImageSentProps as MessageAttachmentImageSentProps,
+  ImageReceivedProps as MessageAttachmentImageReceivedProps,
+  VideoComposerProps as MessageAttachmentVideoComposerProps,
+  VideoSentProps as MessageAttachmentVideoSentProps,
+  VideoReceivedProps as MessageAttachmentVideoReceivedProps,
+  AudioComposerProps as MessageAttachmentAudioComposerProps,
+  AudioSentProps as MessageAttachmentAudioSentProps,
+  AudioReceivedProps as MessageAttachmentAudioReceivedProps,
+  PdfComposerProps as MessageAttachmentPdfComposerProps,
+  PdfSentProps as MessageAttachmentPdfSentProps,
+  PdfReceivedProps as MessageAttachmentPdfReceivedProps,
+  FileComposerProps as MessageAttachmentFileComposerProps,
+  FileSentProps as MessageAttachmentFileSentProps,
+  FileReceivedProps as MessageAttachmentFileReceivedProps,
+  ImageItem as MessageAttachmentImageItem,
+  VideoItem as MessageAttachmentVideoItem,
+  PdfItem as MessageAttachmentPdfItem,
+  AudioItem as MessageAttachmentAudioItem,
+  FileItem as MessageAttachmentFileItem,
+  BubbleGroupPosition as MessageAttachmentGroupPosition,
+  MessageAttachmentBaseProps,
+  MessageAttachmentState,
+} from './components/MessageAttachment'
+export {
+  formatFileSize,
+  getFileExtensionLabel,
+  buildCompactMetaLabel,
+  bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream,
+} from './components/MessageAttachment'
 export type { CustomMessageRegistry } from './components/CustomMessage/context'
 export type { AttachmentSourceType } from './components/AttachmentCard/utils/mimeType'
 export type { Faq, FaqListProps } from './components/FaqList'

package/dist/Card-D32U6KfZ.js

@@ -1,85 +0,0 @@
-import { jsx as a, jsxs as d } from "react/jsx-runtime";
-import { XIcon as x, PencilSimpleIcon as N } from "@phosphor-icons/react";
-import { i as k, C as o, A as w, a as c, b as A } from "./CardThumbnail-DTBuRQHF.js";
-const B = ({
-  title: e,
-  placeholderTitle: h,
-  description: m,
-  url: u,
-  mimeType: i,
-  thumbnailUrl: b,
-  sourceUrl: s,
-  layout: f = "featured",
-  appIcon: v,
-  cta: g,
-  onDismiss: r,
-  onEditClick: n
-}) => {
-  const l = f === "classic", p = k(i, s), t = r ? /* @__PURE__ */ a(
-    "button",
-    {
-      type: "button",
-      onClick: r,
-      "aria-label": "Dismiss attachment",
-      className: "flex size-6 items-center justify-center rounded-full bg-[#121110] text-white",
-      children: /* @__PURE__ */ a(x, { className: "size-3", weight: "bold" })
-    }
-  ) : void 0, C = n ? /* @__PURE__ */ a(
-    "button",
-    {
-      type: "button",
-      onClick: n,
-      "aria-label": "Edit attachment",
-      className: "flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15",
-      children: /* @__PURE__ */ a(N, { className: "size-5", weight: "regular" })
-    }
-  ) : void 0;
-  return p ? /* @__PURE__ */ a(o, { variant: "dark", bgClassName: w, children: /* @__PURE__ */ d("div", { className: "flex items-center gap-2 pr-3", children: [
-    /* @__PURE__ */ a("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ a(
-      c,
-      {
-        variant: "dark",
-        sourceUrl: s,
-        title: e,
-        mimeType: i
-      }
-    ) }),
-    t && /* @__PURE__ */ a("div", { className: "shrink-0", children: t })
-  ] }) }) : /* @__PURE__ */ d(
-    o,
-    {
-      variant: "dark",
-      topRight: l ? t : void 0,
-      children: [
-        !l && /* @__PURE__ */ a(
-          c,
-          {
-            variant: "dark",
-            thumbnailUrl: b,
-            sourceUrl: s,
-            title: e,
-            mimeType: i,
-            topRight: t
-          }
-        ),
-        /* @__PURE__ */ a(
-          A,
-          {
-            variant: "dark",
-            title: e,
-            placeholderTitle: h,
-            description: m,
-            url: u,
-            appIcon: v,
-            cta: g,
-            trailingAction: C
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  B as default
-};
-//# sourceMappingURL=Card-D32U6KfZ.js.map

package/dist/Card-D32U6KfZ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-D32U6KfZ.js","sources":["../src/components/LinkAttachment/components/Composer/Card.tsx"],"sourcesContent":["import { PencilSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport type { LinkAttachmentBaseProps } from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport CardShell from '../_shared/CardShell'\nimport CardThumbnail, {\n  AUDIO_BG_CLASS,\n  isPlayableAudio,\n} from '../_shared/CardThumbnail'\n\nexport interface ComposerCardProps extends LinkAttachmentBaseProps {\n  /**\n   * When provided, renders a dismiss X in the thumbnail corner. Called when\n   * the composer clicks it to remove the attachment.\n   */\n  onDismiss?: () => void\n  /**\n   * When provided, renders a pencil button to the right of the description\n   * that the composer can use to edit the attachment metadata.\n   */\n  onEditClick?: () => void\n}\n\n/**\n * The card the composer sees while drafting a link attachment.\n * Matches the Composer column of the messaging design system in Figma.\n */\nconst ComposerCard: React.FC<ComposerCardProps> = ({\n  title,\n  placeholderTitle,\n  description,\n  url,\n  mimeType,\n  thumbnailUrl,\n  sourceUrl,\n  layout = 'featured',\n  appIcon,\n  cta,\n  onDismiss,\n  onEditClick,\n}) => {\n  const isClassic = layout === 'classic'\n  const isAudio = isPlayableAudio(mimeType, sourceUrl)\n  const dismissButton = onDismiss ? (\n    <button\n      type=\"button\"\n      onClick={onDismiss}\n      aria-label=\"Dismiss attachment\"\n      className=\"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white\"\n    >\n      <XIcon className=\"size-3\" weight=\"bold\" />\n    </button>\n  ) : undefined\n\n  const editButton = onEditClick ? (\n    <button\n      type=\"button\"\n      onClick={onEditClick}\n      aria-label=\"Edit attachment\"\n      className=\"flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n    >\n      <PencilSimpleIcon className=\"size-5\" weight=\"regular\" />\n    </button>\n  ) : undefined\n\n  // Audio cards collapse to just the native player — render the dismiss\n  // button as an inline sibling so it always has its own space and never\n  // overlaps the audio control's volume/menu buttons.\n  if (isAudio) {\n    return (\n      <CardShell variant=\"dark\" bgClassName={AUDIO_BG_CLASS}>\n        <div className=\"flex items-center gap-2 pr-3\">\n          <div className=\"min-w-0 flex-1\">\n            <CardThumbnail\n              variant=\"dark\"\n              sourceUrl={sourceUrl}\n              title={title}\n              mimeType={mimeType}\n            />\n          </div>\n          {dismissButton && <div className=\"shrink-0\">{dismissButton}</div>}\n        </div>\n      </CardShell>\n    )\n  }\n\n  return (\n    <CardShell\n      variant=\"dark\"\n      topRight={isClassic ? dismissButton : undefined}\n    >\n      {!isClassic && (\n        <CardThumbnail\n          variant=\"dark\"\n          thumbnailUrl={thumbnailUrl}\n          sourceUrl={sourceUrl}\n          title={title}\n          mimeType={mimeType}\n          topRight={dismissButton}\n        />\n      )}\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        description={description}\n        url={url}\n        appIcon={appIcon}\n        cta={cta}\n        trailingAction={editButton}\n      />\n    </CardShell>\n  )\n}\n\nexport default ComposerCard\n"],"names":["ComposerCard","title","placeholderTitle","description","url","mimeType","thumbnailUrl","sourceUrl","layout","appIcon","cta","onDismiss","onEditClick","isClassic","isAudio","isPlayableAudio","dismissButton","jsx","XIcon","editButton","PencilSimpleIcon","CardShell","AUDIO_BG_CLASS","jsxs","CardThumbnail","CardBody"],"mappings":";;;AA4BA,MAAMA,IAA4C,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACJ,QAAMC,IAAYL,MAAW,WACvBM,IAAUC,EAAgBV,GAAUE,CAAS,GAC7CS,IAAgBL,IACpB,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAASN;AAAA,MACT,cAAW;AAAA,MACX,WAAU;AAAA,MAEV,UAAA,gBAAAM,EAACC,GAAA,EAAM,WAAU,UAAS,QAAO,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA,IAExC,QAEEC,IAAaP,IACjB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAASL;AAAA,MACT,cAAW;AAAA,MACX,WAAU;AAAA,MAEV,UAAA,gBAAAK,EAACG,GAAA,EAAiB,WAAU,UAAS,QAAO,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA,IAEtD;AAKJ,SAAIN,IAEA,gBAAAG,EAACI,KAAU,SAAQ,QAAO,aAAaC,GACrC,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,IAAA,gBAAAN,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA,gBAAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAAjB;AAAA,QACA,OAAAN;AAAA,QACA,UAAAI;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACCW,KAAiB,gBAAAC,EAAC,OAAA,EAAI,WAAU,YAAY,UAAAD,EAAA,CAAc;AAAA,EAAA,EAAA,CAC7D,EAAA,CACF,IAKF,gBAAAO;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAUR,IAAYG,IAAgB;AAAA,MAErC,UAAA;AAAA,QAAA,CAACH,KACA,gBAAAI;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAAlB;AAAA,YACA,WAAAC;AAAA,YACA,OAAAN;AAAA,YACA,UAAAI;AAAA,YACA,UAAUW;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,gBAAAC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAAxB;AAAA,YACA,kBAAAC;AAAA,YACA,aAAAC;AAAA,YACA,KAAAC;AAAA,YACA,SAAAK;AAAA,YACA,KAAAC;AAAA,YACA,gBAAgBS;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/Card-DlSSJPip.js

@@ -1,60 +0,0 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { c, n as x, i as A, A as k, C as B, a as O, b as P } from "./CardThumbnail-DTBuRQHF.js";
-const w = ({
-  title: i,
-  description: h,
-  url: s,
-  mimeType: l,
-  thumbnailUrl: C,
-  sourceUrl: n,
-  layout: f = "featured",
-  appIcon: v,
-  cta: a,
-  onClick: e
-}) => {
-  const r = c(l, n), d = x(s), u = a == null && d != null && !r ? d : void 0, b = a == null && !r ? e : void 0, g = A(l, n) ? k : void 0, m = a && e ? {
-    ...a,
-    onClick: () => {
-      var o;
-      e(), (o = a.onClick) == null || o.call(a);
-    }
-  } : a;
-  return /* @__PURE__ */ p(
-    B,
-    {
-      variant: "light",
-      href: u,
-      onClick: b,
-      ariaLabel: i ?? "Open attachment preview",
-      bgClassName: g,
-      "data-testid": "link-attachment",
-      children: [
-        f === "featured" && /* @__PURE__ */ t(
-          O,
-          {
-            variant: "light",
-            thumbnailUrl: C,
-            sourceUrl: n,
-            title: i,
-            mimeType: l
-          }
-        ),
-        /* @__PURE__ */ t(
-          P,
-          {
-            variant: "light",
-            title: i,
-            description: h,
-            url: s,
-            appIcon: v,
-            cta: m
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  w as default
-};
-//# sourceMappingURL=Card-DlSSJPip.js.map

package/dist/Card-DlSSJPip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-DlSSJPip.js","sources":["../src/components/LinkAttachment/components/Received/Card.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { LinkAttachmentBaseProps } from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport CardShell from '../_shared/CardShell'\nimport CardThumbnail, {\n  AUDIO_BG_CLASS,\n  isPlayableAudio,\n  isPlayableMedia,\n} from '../_shared/CardThumbnail'\nimport { normalizeExternalHref } from '../_shared/normalizeExternalHref'\n\nexport interface ReceivedCardProps extends LinkAttachmentBaseProps {\n  /**\n   * Fired when the recipient activates the card. Behavior depends on how\n   * the card is configured:\n   *   - **Link app with a CTA** (FAQ / Form): the CTA owns navigation;\n   *     `onClick` fires when the recipient taps the CTA itself, alongside\n   *     `cta.onClick` (use for analytics).\n   *   - **Link app with a URL** (Spotify / TikTok / generic link): the card\n   *     chrome is an `<a target=\"_blank\">` opening `url` — `onClick` fires\n   *     alongside the navigation (use for analytics).\n   *   - **Image / file / placeholder attachment**: the card has no URL, so\n   *     it renders as a button. `onClick` is the consumer's hook for\n   *     opening an image / file preview (lightbox).\n   *   - **Video / audio attachment**: the shell stays non-interactive so\n   *     the native media controls remain operable — `onClick` is ignored\n   *     in this configuration.\n   */\n  onClick?: () => void\n}\n\n/**\n * The card the recipient sees in chat for a link attachment. Matches the\n * Received column of the messaging design system in Figma.\n *\n * The chrome adapts to its content:\n *   - Link previews / link apps render the light card body and either\n *     navigate via `url` or surface a CTA button when `cta` is set.\n *   - Image / file attachments render as media-only cards — the 180px\n *     thumbnail (or type-icon placeholder) fills the card with no title /\n *     description body. `onClick` fires when the recipient taps the card\n *     so consumers can open an image preview / lightbox.\n */\nconst ReceivedCard: React.FC<ReceivedCardProps> = ({\n  title,\n  description,\n  url,\n  mimeType,\n  thumbnailUrl,\n  sourceUrl,\n  layout = 'featured',\n  appIcon,\n  cta,\n  onClick,\n}) => {\n  // The Received card is opened by either the CTA (FAQ / Form), the URL\n  // (link previews / Spotify / TikTok), or — for media-only attachments —\n  // by tapping the entire card chrome to open a preview. We hand the\n  // anchor behavior off to CardShell only when there's no CTA so we don't\n  // end up with nested anchors when a CTA is present.\n  //\n  // Video / audio attachments are an exception: wrapping the shell in\n  // either a `<button>` or an `<a>` around `<video controls>` /\n  // `<audio controls>` creates nested interactive elements, and clicks on\n  // the native media controls can bubble up to fire the outer card\n  // action (preview / link navigation). For those, we render a plain\n  // non-interactive shell and let the media element own clicks — both\n  // `shellHref` and `shellOnClick` are suppressed even when `url` is set.\n  const isPlayingMedia = isPlayableMedia(mimeType, sourceUrl)\n  // Normalize the URL so a bare hostname like `tr.ee/briemix` (used in\n  // our own docs / stories) is treated as an external link instead of a\n  // relative path. Returns `undefined` for empty / whitespace-only\n  // values, so those fall through to the media-preview path instead of\n  // producing an empty `href` on the shell anchor.\n  const normalizedUrl = normalizeExternalHref(url)\n  const shellHref =\n    cta == null && normalizedUrl != null && !isPlayingMedia\n      ? normalizedUrl\n      : undefined\n  const shellOnClick =\n    cta == null && !isPlayingMedia ? onClick : undefined\n  const audioBg = isPlayableAudio(mimeType, sourceUrl)\n    ? AUDIO_BG_CLASS\n    : undefined\n\n  // When a CTA is set the shell isn't interactive — the CTA owns the\n  // click target. Forward the card-level `onClick` to the CTA so\n  // analytics / side-effect consumers still fire on activation while\n  // preserving the CTA's own `onClick` callback.\n  const wrappedCta =\n    cta && onClick\n      ? {\n          ...cta,\n          onClick: () => {\n            onClick()\n            cta.onClick?.()\n          },\n        }\n      : cta\n\n  return (\n    <CardShell\n      variant=\"light\"\n      href={shellHref}\n      onClick={shellOnClick}\n      ariaLabel={title ?? 'Open attachment preview'}\n      bgClassName={audioBg}\n      data-testid=\"link-attachment\"\n    >\n      {layout === 'featured' && (\n        <CardThumbnail\n          variant=\"light\"\n          thumbnailUrl={thumbnailUrl}\n          sourceUrl={sourceUrl}\n          title={title}\n          mimeType={mimeType}\n        />\n      )}\n      <CardBody\n        variant=\"light\"\n        title={title}\n        description={description}\n        url={url}\n        appIcon={appIcon}\n        cta={wrappedCta}\n      />\n    </CardShell>\n  )\n}\n\nexport default ReceivedCard\n"],"names":["ReceivedCard","title","description","url","mimeType","thumbnailUrl","sourceUrl","layout","appIcon","cta","onClick","isPlayingMedia","isPlayableMedia","normalizedUrl","normalizeExternalHref","shellHref","shellOnClick","audioBg","isPlayableAudio","AUDIO_BG_CLASS","wrappedCta","_a","jsxs","CardShell","jsx","CardThumbnail","CardBody"],"mappings":";;AA4CA,MAAMA,IAA4C,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AAcJ,QAAMC,IAAiBC,EAAgBR,GAAUE,CAAS,GAMpDO,IAAgBC,EAAsBX,CAAG,GACzCY,IACJN,KAAO,QAAQI,KAAiB,QAAQ,CAACF,IACrCE,IACA,QACAG,IACJP,KAAO,QAAQ,CAACE,IAAiBD,IAAU,QACvCO,IAAUC,EAAgBd,GAAUE,CAAS,IAC/Ca,IACA,QAMEC,IACJX,KAAOC,IACH;AAAA,IACE,GAAGD;AAAA,IACH,SAAS,MAAM;;AACb,MAAAC,EAAA,IACAW,IAAAZ,EAAI,YAAJ,QAAAY,EAAA,KAAAZ;AAAA,IACF;AAAA,EAAA,IAEFA;AAEN,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAMR;AAAA,MACN,SAASC;AAAA,MACT,WAAWf,KAAS;AAAA,MACpB,aAAagB;AAAA,MACb,eAAY;AAAA,MAEX,UAAA;AAAA,QAAAV,MAAW,cACV,gBAAAiB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAApB;AAAA,YACA,WAAAC;AAAA,YACA,OAAAL;AAAA,YACA,UAAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJ,gBAAAoB;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAAzB;AAAA,YACA,aAAAC;AAAA,YACA,KAAAC;AAAA,YACA,SAAAK;AAAA,YACA,KAAKY;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/Card-zGbhRBwv.js

@@ -1,48 +0,0 @@
-import { jsxs as f, jsx as s } from "react/jsx-runtime";
-import { C as b, A as m, a as u, b as v, i as A } from "./CardThumbnail-DTBuRQHF.js";
-const k = ({
-  title: a,
-  placeholderTitle: i,
-  description: t,
-  url: o,
-  mimeType: r,
-  thumbnailUrl: e,
-  sourceUrl: d,
-  layout: n = "featured",
-  appIcon: C,
-  cta: l
-}) => /* @__PURE__ */ f(
-  b,
-  {
-    variant: "dark",
-    bgClassName: A(r, d) ? m : void 0,
-    children: [
-      n === "featured" && /* @__PURE__ */ s(
-        u,
-        {
-          variant: "dark",
-          thumbnailUrl: e,
-          sourceUrl: d,
-          title: a,
-          mimeType: r
-        }
-      ),
-      /* @__PURE__ */ s(
-        v,
-        {
-          variant: "dark",
-          title: a,
-          placeholderTitle: i,
-          description: t,
-          url: o,
-          appIcon: C,
-          cta: l
-        }
-      )
-    ]
-  }
-);
-export {
-  k as default
-};
-//# sourceMappingURL=Card-zGbhRBwv.js.map

package/dist/Card-zGbhRBwv.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-zGbhRBwv.js","sources":["../src/components/LinkAttachment/components/Sent/Card.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { LinkAttachmentBaseProps } from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport CardShell from '../_shared/CardShell'\nimport CardThumbnail, {\n  AUDIO_BG_CLASS,\n  isPlayableAudio,\n} from '../_shared/CardThumbnail'\n\nexport interface SentCardProps extends LinkAttachmentBaseProps {}\n\n/**\n * The card the sender sees in chat after a link attachment has been posted.\n * Matches the Sent column of the messaging design system in Figma — same\n * dark chrome as the Composer card minus the dismiss / edit affordances.\n */\nconst SentCard: React.FC<SentCardProps> = ({\n  title,\n  placeholderTitle,\n  description,\n  url,\n  mimeType,\n  thumbnailUrl,\n  sourceUrl,\n  layout = 'featured',\n  appIcon,\n  cta,\n}) => (\n  <CardShell\n    variant=\"dark\"\n    bgClassName={\n      isPlayableAudio(mimeType, sourceUrl) ? AUDIO_BG_CLASS : undefined\n    }\n  >\n    {layout === 'featured' && (\n      <CardThumbnail\n        variant=\"dark\"\n        thumbnailUrl={thumbnailUrl}\n        sourceUrl={sourceUrl}\n        title={title}\n        mimeType={mimeType}\n      />\n    )}\n    <CardBody\n      variant=\"dark\"\n      title={title}\n      placeholderTitle={placeholderTitle}\n      description={description}\n      url={url}\n      appIcon={appIcon}\n      cta={cta}\n    />\n  </CardShell>\n)\n\nexport default SentCard\n"],"names":["SentCard","title","placeholderTitle","description","url","mimeType","thumbnailUrl","sourceUrl","layout","appIcon","cta","jsxs","CardShell","isPlayableAudio","AUDIO_BG_CLASS","jsx","CardThumbnail","CardBody"],"mappings":";;AAiBA,MAAMA,IAAoC,CAAC;AAAA,EACzC,OAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,KAAAC;AACF,MACE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,SAAQ;AAAA,IACR,aACEC,EAAgBR,GAAUE,CAAS,IAAIO,IAAiB;AAAA,IAGzD,UAAA;AAAA,MAAAN,MAAW,cACV,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,cAAAV;AAAA,UACA,WAAAC;AAAA,UACA,OAAAN;AAAA,UACA,UAAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,gBAAAU;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,OAAAhB;AAAA,UACA,kBAAAC;AAAA,UACA,aAAAC;AAAA,UACA,KAAAC;AAAA,UACA,SAAAK;AAAA,UACA,KAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AACF;"}