@linktr.ee/messaging-react 3.9.0-rc-1783472582 → 3.9.0-rc-1783575293

package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/components/_shared/GalleryThumbnail.tsx

@@ -2,7 +2,7 @@ import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useState } from 'react'
 
-import { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'
+import { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'
 import type {
   LockedAttachmentGalleryItem,
   PaymentStatus,
@@ -48,7 +48,7 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   const isVideoItem = isPlayableItem(current)
 
   // Stop propagation so arrow taps don't bubble up to the outer preview-toggle
-  // wrapper on ComposerCard / OwnMediaCard.
+  // wrapper on PreviewMediaCard / OwnMediaCard.
   const goPrev = (e: React.MouseEvent) => {
     e.stopPropagation()
     setIndex((i) => Math.max(0, i - 1))

package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/components/_shared/LockBadge.tsx

@@ -2,7 +2,7 @@ import { LockOpenIcon, LockSimpleIcon, PlayIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React from 'react'
 
-import { getSourceType } from '../../../AttachmentCard'
+import { getSourceType } from '../../../../AttachmentCard'
 import type { PaymentStatus } from '../../types'
 
 export interface LockBadgeProps {

package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/components/_shared/PurchaseStatusBadge.tsx

@@ -54,18 +54,6 @@ const PurchaseStatusBadge: React.FC<PurchaseStatusBadgeProps> = ({
     )
   }
 
-  if (paymentStatus === 'pending') {
-    return (
-      <React.Fragment>
-        <span className={classNames('text-xs font-medium', labelColour)}>
-          &bull;
-        </span>
-        <span className={classNames('text-xs font-medium', labelColour)}>
-          Sent
-        </span>
-      </React.Fragment>
-    )
-  }
 
   if (paymentStatus === 'failed' || paymentStatus === 'refunded') {
     return (

package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/components/_shared/SingleThumbnail.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import {
   AttachmentThumbnail,
   renderTypeIcon,
-} from '../../../AttachmentCard'
+} from '../../../../AttachmentCard'
 import type { LockedAttachmentSource, PaymentStatus } from '../../types'
 
 import { LockBadge } from './LockBadge'

package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/components/_shared/SkeletonTextLines.tsx

@@ -4,12 +4,6 @@ import React from 'react'
 export interface SkeletonTextLinesProps {
   /** Matches the bubble it sits in — "dark" for the sender's own bubble. */
   variant: 'light' | 'dark'
-  /**
-   * Whether the bars pulse. Pass `false` once the outcome is settled (paid,
-   * failed, refunded) — a static skeleton reads as "nothing more will
-   * change", while a pulsing one implies something is still in flight.
-   */
-  animate: boolean
 }
 
 /**
@@ -21,17 +15,13 @@ export interface SkeletonTextLinesProps {
  * support opacity modifiers on the `current` color — `bg-current/30` silently
  * produces no CSS rule at all.
  */
-const SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({
-  variant = 'dark',
-  animate = true,
-}) => {
-  const pulse = animate ? 'animate-pulse motion-reduce:animate-none' : ''
+const SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({ variant = 'dark' }) => {
   const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'
 
   return (
     <div className="flex flex-col gap-2 str-chat__message-text my-1" aria-hidden>
-      <div className={classNames('h-3 w-40 rounded-full', pulse, colour)} />
-      <div className={classNames('h-3 w-24 rounded-full', pulse, colour)} />
+      <div className={classNames('h-3 w-40 rounded-full', colour)} />
+      <div className={classNames('h-3 w-24 rounded-full', colour)} />
     </div>
   )
 }

package/src/components/CustomMessage/LockedAttachment/components/_shared/TextShell.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames'
+import React from 'react'
+
+/**
+ * Chat-bubble chrome for a paid text-only message/preview. Deliberately
+ * doesn't lean on `.str-chat`'s CSS variables (`--str-chat__message-bubble-*`)
+ * — this renders in the Composer preview too, which sits outside any
+ * `.str-chat` ancestor, so every value here (radius, colour, type scale) is
+ * hardcoded to match the Figma spec directly.
+ */
+const TextShell: React.FC<
+  React.PropsWithChildren<{ isMine: boolean; className?: string }>
+> = ({ isMine, children, className }) => (
+  <div
+    className={classNames(
+      'message-locked-attachment-text',
+      'relative flex min-w-[225px] max-w-[280px] flex-col gap-1 rounded-[1.5rem] px-4 py-3',
+      'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',
+      className
+    )}
+    style={{
+      backgroundColor: isMine ? '#1e2330' : '#f2f1ef',
+      color: isMine ? '#fff' : '#000',
+    }}
+  >
+    {children}
+  </div>
+)
+
+export default TextShell

package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/components/_shared/usePreviewToggle.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest'
 
-import { act, renderHook } from '../../../../test/utils'
+import { act, renderHook } from '../../../../../test/utils'
 
 import { usePreviewToggle } from './usePreviewToggle'
 

package/src/components/CustomMessage/LockedAttachment/index.tsx

@@ -0,0 +1,105 @@
+import React, { Suspense } from 'react'
+
+import type {
+  MediaCardDraftProps,
+  MediaCardOtherProps,
+  MediaCardOwnProps,
+  MediaCardPreviewProps,
+} from './components/Media/types'
+import type {
+  TextCardOtherProps,
+  TextCardOwnProps,
+} from './components/Text/types'
+
+const TextCardLazy = React.lazy(() => import('./components/Text/Card'))
+const MediaCardLazy = React.lazy(() => import('./components/Media/Card'))
+
+const LockedAttachmentFallback = () => (
+  <div
+    className="w-[280px] min-h-[200px] animate-pulse rounded-md bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]"
+    aria-hidden
+  />
+)
+
+export type DraftProps = MediaCardDraftProps & {
+  /** Drafting is always the sender — doesn't apply here. */
+  isMine?: never
+  /**
+   * "text" renders as a chat bubble showing the real draft `text` instead of
+   * a media thumbnail card. Media-only fields below are ignored in text mode.
+   * Defaults to `"media"`.
+   */
+  contentType?: 'text' | 'media'
+  /** The message's own text, shown as-is (not redacted yet). Only used when `contentType` is `"text"`. */
+  renderedText?: React.ReactNode
+}
+
+export type PreviewProps = MediaCardPreviewProps & {
+  /** Drafting is always the sender — doesn't apply here. */
+  isMine?: never
+  /**
+   * "text" renders as a chat bubble instead of a media thumbnail card.
+   * Media-only fields below are ignored in text mode. Defaults to `"media"`.
+   */
+  contentType?: 'text' | 'media'
+}
+
+export type SentTextOwnProps = TextCardOwnProps & {
+  contentType: 'text'
+  /** Sender's view has no unlock flow — doesn't apply here. */
+  onUnlockClick?: never
+  isUnlocking?: never
+}
+
+export type SentTextOtherProps = TextCardOtherProps & {
+  contentType: 'text'
+}
+
+export type SentMediaOwnProps = MediaCardOwnProps & {
+  contentType?: 'media'
+  /** Sender's view has no unlock/download flow — doesn't apply here. */
+  onUnlockClick?: never
+  isUnlocking?: never
+  onDownloadClick?: never
+}
+
+export type SentMediaOtherProps = MediaCardOtherProps & {
+  contentType?: 'media'
+}
+
+/**
+ * The card for a paid attachment — a still-drafting `isDraft` card, a static
+ * receiver-facing `isPreview` mockup, or a sent text/media card discriminated
+ * by `isMine` + `contentType`. Internally lazy-loads only the one underlying
+ * implementation the resolved branch needs.
+ */
+export type LockedAttachmentProps =
+  | DraftProps
+  | PreviewProps
+  | SentTextOwnProps
+  | SentTextOtherProps
+  | SentMediaOwnProps
+  | SentMediaOtherProps
+
+const LockedAttachment: React.FC<LockedAttachmentProps> = (props) => {
+  return (
+    <Suspense fallback={<LockedAttachmentFallback />}>
+      {props.contentType === 'text' ? (
+        <TextCardLazy {...props} />
+      ) : (
+        <MediaCardLazy {...props} />
+      )}
+    </Suspense>
+  )
+}
+
+export default LockedAttachment
+export { default as PurchaseStatusBadge } from './components/_shared/PurchaseStatusBadge'
+export type { PurchaseStatusBadgeProps } from './components/_shared/PurchaseStatusBadge'
+export type {
+  PaymentStatus,
+  FetchSourceHandler,
+  LockedAttachmentSource,
+  LockedAttachmentGalleryItem,
+  LockedAttachmentContextValue,
+} from './types'

package/src/components/CustomMessage/LockedAttachment/types.ts

@@ -0,0 +1,44 @@
+import type { Channel, LocalMessage } from 'stream-chat'
+
+import type { PaymentStatus } from '../../../stream-custom-data'
+
+export interface LockedAttachmentGalleryItem {
+  /** Drives the per-item play/lock affordance. */
+  mimeType: string
+  /** Poster image, locked or unlocked. */
+  thumbnailUrl?: string
+  /** Media source, shown only when unlocked. */
+  sourceUrl?: string
+}
+
+export interface LockedAttachmentSource {
+  /** Proxied URL for in-app playback. */
+  sourceUrl: string
+  /** Opened when the visitor clicks Download. */
+  redeemUrl?: string
+  /** Overrides the metadata thumbnail when present. */
+  thumbnailUrl?: string
+}
+
+export type { PaymentStatus }
+
+/** Fetches the underlying source; `void` return means none available. */
+export type FetchSourceHandler = () => Promise<LockedAttachmentSource | void>
+
+export interface LockedAttachmentContextValue {
+  /** Whether the given message is mid-checkout. */
+  isUnlocking: (id: string) => boolean
+  /** Opens the checkout flow for a message. */
+  onUnlockClick?: (message: LocalMessage, channel: Channel) => void
+  /** Handles a Download click for a message. */
+  onDownloadClick?: (message: LocalMessage, channel: Channel) => void
+  /** Reveals the locked media's source. Unused for text — payment writes `message.text` directly. */
+  onFetchSource?: (
+    message: LocalMessage,
+    channel: Channel
+  ) => Promise<LockedAttachmentSource | void>
+}
+
+export const defaultLockedAttachmentContextValue: LockedAttachmentContextValue = {
+  isUnlocking: () => false,
+}

package/src/components/CustomMessage/context.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 
-import { defaultLockedAttachmentContextValue, type LockedAttachmentContextValue } from '../LockedAttachment/types'
+import { defaultLockedAttachmentContextValue, type LockedAttachmentContextValue } from './LockedAttachment/types'
 
 export interface CustomMessageRegistry {
   LockedAttachment: LockedAttachmentContextValue

package/src/components/CustomMessage/index.tsx

@@ -32,11 +32,11 @@ import {
 import { useMessageVote } from '../../hooks/useMessageVote'
 import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
-import LockedAttachment from '../LockedAttachment'
 import { isLinkAttachment } from '../MediaMessage'
 import { bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream } from '../MessageAttachment'
 
 import { useCustomMessage } from './context'
+import LockedAttachment from './LockedAttachment'
 import {
   MessageTag,
   isAttachmentMessage,
@@ -145,13 +145,12 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
       (total, segment) => total + segment.attachments.length,
       0
     ) === (finalAttachments?.length ?? 0)
-  const streamAttachmentGroupPosition = messageAttachmentGroupPositionFromStream(
-    {
+  const streamAttachmentGroupPosition =
+    messageAttachmentGroupPositionFromStream({
       endOfGroup,
       firstOfGroup,
       groupedByUser,
-    }
-  )
+    })
 
   if (isDateSeparatorMessage(message)) {
     return null
@@ -226,6 +225,26 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     !isAIGenerated &&
     !isChatbot
 
+  const sharedLockedTextProps = {
+    contentType: 'text' as const,
+    amountText: message.metadata?.amount_text,
+    paymentStatus: message.metadata?.payment_status,
+    renderedText: message.text && (
+      <MessageText message={displayMessage} renderText={renderText} />
+    ),
+  }
+  const sharedLockedMediaProps = {
+    contentType: 'media' as const,
+    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,
+    onFetchSource: onFetchSource
+      ? () => onFetchSource(message, channel)
+      : undefined,
+  }
   return (
     <>
       {editing && (
@@ -283,33 +302,17 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
               <div className="flex items-center gap-2">
                 {isMine && MessageActions && <MessageActions />}
                 {isMine ? (
-                  <LockedAttachment.Text
+                  <LockedAttachment
+                    {...sharedLockedTextProps}
                     isMine={true}
-                    amountText={message.metadata?.amount_text}
-                    paymentStatus={message.metadata?.payment_status}
-                  >
-                    {message.text && (
-                      <MessageText
-                        message={displayMessage}
-                        renderText={renderText}
-                      />
-                    )}
-                  </LockedAttachment.Text>
+                  />
                 ) : (
-                  <LockedAttachment.Text
+                  <LockedAttachment
+                    {...sharedLockedTextProps}
                     isMine={false}
-                    amountText={message.metadata?.amount_text}
-                    paymentStatus={message.metadata?.payment_status}
                     isUnlocking={isUnlocking(message.id)}
                     onUnlockClick={() => onUnlockClick?.(message, channel)}
-                  >
-                    {message.text && (
-                      <MessageText
-                        message={displayMessage}
-                        renderText={renderText}
-                      />
-                    )}
-                  </LockedAttachment.Text>
+                  />
                 )}
                 {!isMine && MessageActions && <MessageActions />}
               </div>
@@ -319,38 +322,30 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
               <div className="flex items-center gap-2">
                 {isMine && MessageActions && <MessageActions />}
                 {isMine ? (
-                  <LockedAttachment.Media
+                  <LockedAttachment
+                    {...sharedLockedMediaProps}
                     isMine={true}
-                    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}
-                    onPreviewClick={() => onUnlockClick?.(message, channel)}
-                    onFetchSource={
-                      onFetchSource
-                        ? () => onFetchSource(message, channel)
+                    onPreviewClick={() =>
+                      onUnlockClick
+                        ? onUnlockClick(message, channel)
                         : undefined
                     }
                   />
                 ) : (
-                  <LockedAttachment.Media
+                  <LockedAttachment
+                    {...sharedLockedMediaProps}
                     isMine={false}
-                    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)}
-                    onUnlockClick={() => onUnlockClick?.(message, channel)}
-                    onFetchSource={
-                      onFetchSource
-                        ? () => onFetchSource(message, channel)
+                    onUnlockClick={() =>
+                      onUnlockClick
+                        ? onUnlockClick(message, channel)
+                        : undefined
+                    }
+                    onDownloadClick={() =>
+                      onDownloadClick
+                        ? onDownloadClick(message, channel)
                         : undefined
                     }
-                    onDownloadClick={() => onDownloadClick?.(message, channel)}
                   />
                 )}
                 {!isMine && MessageActions && <MessageActions />}

package/src/components/CustomMessageInput/CustomMessageInput.stories.tsx

@@ -5,7 +5,7 @@ import { QueryChannelAPIResponse, StreamChat } from 'stream-chat'
 import { Channel, Chat, type SendButtonProps } from 'stream-chat-react'
 
 import { createMockStreamChatClient } from '../../testing/createMockStreamChatClient'
-import LockedAttachment from '../LockedAttachment'
+import LockedAttachment from '../CustomMessage/LockedAttachment'
 
 import { CustomMessageInput } from '.'
 
@@ -229,7 +229,9 @@ WithAttachments.parameters = {
 export const WithPaidAttachment: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
 WithPaidAttachment.args = {
   attachmentPreviewList: () => (
-    <LockedAttachment.Composer
+    <LockedAttachment
+      isPreview
+      contentType="media"
       title="Exclusive Content"
       mimeType="image/jpeg"
       thumbnailUrl="https://picsum.photos/seed/paid/320/180"
@@ -266,7 +268,7 @@ WithPaidAttachment.parameters = {
   docs: {
     description: {
       story:
-        "Message input with a paid attachment staged inside the input bubble. Uses `Channel`'s `AttachmentPreviewList` override to render a `LockedAttachment.Composer` card at the top of the input. `onDismiss` removes it; `onEditClick` reopens the paid content wizard.",
+        "Message input with a paid attachment staged inside the input bubble. Uses `Channel`'s `AttachmentPreviewList` override to render a `LockedAttachment isPreview` card at the top of the input. `onDismiss` removes it; `onEditClick` reopens the paid content wizard.",
     },
   },
 }

package/src/index.ts

@@ -6,7 +6,7 @@ export { MessagingShell } from './components/MessagingShell'
 export { ChannelList } from './components/ChannelList'
 export { ChannelView } from './components/ChannelView'
 export { default as ActionButton } from './components/ActionButton'
-export { default as LockedAttachment } from './components/LockedAttachment'
+export { default as LockedAttachment } from './components/CustomMessage/LockedAttachment'
 export { default as LinkAttachment } from './components/LinkAttachment'
 export { default as MessageAttachment } from './components/MessageAttachment'
 export { Avatar } from './components/Avatar'
@@ -69,12 +69,10 @@ export type {
 export type { AvatarProps } from './components/Avatar'
 export type { ActionButtonProps } from './components/ActionButton'
 export type {
-  ComposerCardProps,
-  TextCardProps as LockedAttachmentTextCardProps,
-  MediaCardProps as LockedAttachmentMediaCardProps,
+  LockedAttachmentProps,
   LockedAttachmentGalleryItem,
   LockedAttachmentContextValue,
-} from './components/LockedAttachment'
+} from './components/CustomMessage/LockedAttachment'
 export type {
   ComposerCardProps as LinkAttachmentComposerCardProps,
   SentCardProps as LinkAttachmentSentCardProps,

package/src/styles.css

@@ -832,7 +832,14 @@
   background-color: #dbf0e0;
 }
 
-/** Remove padding from the text inside the locked attachment text shell */
+/** Remove padding from the text inside the locked attachment text shell,
+    and inherit TextShell's explicit colour — stream-chat-react's own
+    `MessageText` sets its own (black) colour that only gets overridden by
+    `.str-chat`'s CSS vars, which the Composer preview doesn't have. */
 .message-locked-attachment-text .str-chat__message-text {
   padding: 0rem !important;
+}
+
+.message-locked-attachment-text .str-chat__message-text-inner {
+  color: inherit;
 }

package/src/types.ts

@@ -20,7 +20,7 @@ import type {
 
 import type { MessageMetadata } from './stream-custom-data'
 
-export type { LockedAttachmentSource } from './components/LockedAttachment'
+export type { LockedAttachmentSource } from './components/CustomMessage/LockedAttachment'
 
 /**
  * Callback invoked when a user clicks a link inside the channel view.

package/dist/Card-BVZM0-06.js

@@ -1,108 +0,0 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { XIcon as m, PencilSimpleIcon as z } from "@phosphor-icons/react";
-import B from "react";
-import { i as T, u as j, M as S, P as L, C as M, a as I, g as R } from "./usePreviewToggle-DRhRTUou.js";
-import { T as A, S as G, P as V } from "./TextShell-DIyj9zQ7.js";
-const F = ({
-  text: t,
-  amountText: i,
-  placeholderAmountText: s,
-  onDismiss: a
-}) => /* @__PURE__ */ r(A, { isMine: !0, children: [
-  /* @__PURE__ */ e("div", { className: "pr-8", children: t || /* @__PURE__ */ e(G, { variant: "dark", animate: !1 }) }),
-  /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e("span", { className: i ? "text-white/55" : "text-white/30", children: i || s }) }),
-  a && /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      onClick: a,
-      className: "absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15",
-      "aria-label": "Dismiss attachment",
-      children: /* @__PURE__ */ e(m, { className: "size-3", weight: "bold" })
-    }
-  )
-] }), X = ({
-  title: t,
-  mimeType: i = "application/octet-stream",
-  thumbnailUrl: s,
-  detail: a,
-  amountText: n,
-  placeholderTitle: u = "Attachment title",
-  placeholderAmountText: g,
-  gallery: o = [],
-  onDismiss: l,
-  onPreviewClick: w,
-  onFetchSource: x,
-  onEditClick: c
-}) => {
-  const d = T(o), { source: b, isPreviewVisible: f, isLoadingPreview: p, togglePreview: v } = j({ isGallery: d, onFetchSource: x, onPreviewClick: w }), h = !f, C = p, k = /* @__PURE__ */ r(B.Fragment, { children: [
-    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
-    /* @__PURE__ */ e(
-      "span",
-      {
-        className: n ? "text-xs font-medium text-white/55" : "text-xs font-medium text-white/30",
-        children: n || g
-      }
-    )
-  ] }), y = l ? /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      onClick: (N) => {
-        N.stopPropagation(), l();
-      },
-      className: "flex size-6 items-center justify-center rounded-full bg-[#121110] text-white",
-      "aria-label": "Dismiss attachment",
-      children: /* @__PURE__ */ e(m, { className: "size-3", weight: "bold" })
-    }
-  ) : void 0, P = c ? /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      onClick: c,
-      "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__ */ e(z, { className: "size-5", weight: "regular" })
-    }
-  ) : void 0;
-  return /* @__PURE__ */ r(S, { variant: "dark", children: [
-    /* @__PURE__ */ e(
-      L,
-      {
-        onToggle: v,
-        isBusy: C,
-        isPreviewVisible: !h,
-        children: /* @__PURE__ */ e(
-          M,
-          {
-            variant: "dark",
-            gallery: o,
-            title: t,
-            showLocked: h,
-            mimeType: i,
-            thumbnailUrl: s,
-            source: b,
-            topRight: y
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e(
-      I,
-      {
-        variant: "dark",
-        title: t,
-        placeholderTitle: u,
-        mimeType: i,
-        detail: a,
-        statusBadge: k,
-        icon: d ? R("dark") : void 0,
-        trailingAction: P
-      }
-    )
-  ] });
-}, K = (t) => t.contentType === "text" ? /* @__PURE__ */ e(F, { ...t }) : /* @__PURE__ */ e(X, { ...t });
-export {
-  K as default
-};
-//# sourceMappingURL=Card-BVZM0-06.js.map

package/dist/Card-BVZM0-06.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-BVZM0-06.js","sources":["../src/components/LockedAttachment/components/Composer/Card.tsx"],"sourcesContent":["import { PencilSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport type { FetchSourceHandler, LockedAttachmentBaseProps } from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport CardThumbnail, {\n  galleryBodyIcon,\n  isGalleryCard,\n} from '../_shared/CardThumbnail'\nimport MediaShell from '../_shared/MediaShell'\nimport PreviewToggle from '../_shared/PreviewToggle'\nimport PriceLockRow from '../_shared/PriceLockRow'\nimport SkeletonTextLines from '../_shared/SkeletonTextLines'\nimport TextShell from '../_shared/TextShell'\nimport { usePreviewToggle } from '../_shared/usePreviewToggle'\n\nexport interface ComposerCardProps extends LockedAttachmentBaseProps {\n  /**\n   * The message's own text, shown as-is (not redacted yet — the message\n   * hasn't been sent). Only used when `contentType` is `\"text\"`.\n   */\n  text?: string\n  /** Placeholder shown in the amount slot before one is configured. */\n  placeholderAmountText?: string\n  /**\n   * Renders a persistent dismiss X on the thumbnail (media) or next to the\n   * text (text mode); called to remove the draft attachment. Unrelated to\n   * `TextCardProps.onDismiss`, which only appears for `isMine` after a\n   * failed payment.\n   */\n  onDismiss?: () => void\n  /** Fired the first time the composer taps the thumbnail to preview. */\n  onPreviewClick?: () => void\n  /**\n   * Lazily loads the underlying source so the composer can preview the\n   * attachment they're about to send. Called the first time the thumbnail is\n   * tapped; the returned source is cached and reused on subsequent toggles.\n   * Ignored when `contentType` is `\"text\"`.\n   */\n  onFetchSource?: FetchSourceHandler\n  /**\n   * When provided, renders a pencil button in the body bottom-right that the\n   * composer can use to edit the attachment metadata (e.g. open the price /\n   * gallery editor). Matches the Composer \"Button\" instance in Figma.\n   */\n  onEditClick?: () => void\n}\n\n/**\n * Composer card in text mode: a normal outgoing chat bubble showing the real\n * draft text (it hasn't been sent/redacted yet) plus a dismiss X and a price\n * row. Media-only props are ignored here.\n */\nconst ComposerTextCard: React.FC<ComposerCardProps> = ({\n  text,\n  amountText,\n  placeholderAmountText,\n  onDismiss,\n}) => (\n  <TextShell isMine>\n    <div className=\"pr-8\">\n      {text ? text : <SkeletonTextLines variant=\"dark\" animate={false} />}\n    </div>\n    <PriceLockRow>\n      <span className={amountText ? 'text-white/55' : 'text-white/30'}>\n        {amountText || placeholderAmountText}\n      </span>\n    </PriceLockRow>\n    {onDismiss && (\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        className=\"absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n        aria-label=\"Dismiss attachment\"\n      >\n        <XIcon className=\"size-3\" weight=\"bold\" />\n      </button>\n    )}\n  </TextShell>\n)\n\n/**\n * Composer card in media mode: the locked thumbnail (single or gallery) the\n * composer taps to preview the attachment they're about to send, plus the\n * title/price body with optional dismiss X and edit pencil.\n */\nconst ComposerMediaCard: React.FC<ComposerCardProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  placeholderAmountText,\n  gallery = [],\n  onDismiss,\n  onPreviewClick,\n  onFetchSource,\n  onEditClick,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  // Gallery is always previewable in the composer because each item's source\n  // is already provided up-front via `gallery[*].sourceUrl`.\n  const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\n\n  const statusBadge = (\n    <React.Fragment>\n      <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n      <span\n        className={\n          amountText\n            ? 'text-xs font-medium text-white/55'\n            : 'text-xs font-medium text-white/30'\n        }\n      >\n        {amountText || placeholderAmountText}\n      </span>\n    </React.Fragment>\n  )\n\n  const dismissButton = onDismiss ? (\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        // Stop the click from bubbling up into the outer preview-toggle\n        // wrapper when both are wired up at the same time.\n        e.stopPropagation()\n        onDismiss()\n      }}\n      className=\"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white\"\n      aria-label=\"Dismiss attachment\"\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  return (\n    <MediaShell variant=\"dark\">\n      <PreviewToggle\n        onToggle={togglePreview}\n        isBusy={isBusy}\n        isPreviewVisible={!showLocked}\n      >\n        <CardThumbnail\n          variant=\"dark\"\n          gallery={gallery}\n          title={title}\n          showLocked={showLocked}\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          source={source}\n          topRight={dismissButton}\n        />\n      </PreviewToggle>\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={statusBadge}\n        icon={isGallery ? galleryBodyIcon('dark') : undefined}\n        trailingAction={editButton}\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The card the composer sees while drafting a paid attachment.\n * Matches the Composer column of the messaging design system in Figma.\n *\n * When `contentType === \"text\"`, renders as a normal outgoing chat bubble\n * showing the real draft text (it hasn't been sent/redacted yet) plus a\n * dismiss X and a price row, instead of a media thumbnail card.\n */\nconst ComposerCard: React.FC<ComposerCardProps> = (props) =>\n  props.contentType === 'text' ? (\n    <ComposerTextCard {...props} />\n  ) : (\n    <ComposerMediaCard {...props} />\n  )\n\nexport default ComposerCard\n"],"names":["ComposerTextCard","text","amountText","placeholderAmountText","onDismiss","jsxs","TextShell","jsx","SkeletonTextLines","PriceLockRow","XIcon","ComposerMediaCard","title","mimeType","thumbnailUrl","detail","placeholderTitle","gallery","onPreviewClick","onFetchSource","onEditClick","isGallery","isGalleryCard","source","isPreviewVisible","isLoadingPreview","togglePreview","usePreviewToggle","showLocked","isBusy","statusBadge","React","dismissButton","e","editButton","PencilSimpleIcon","MediaShell","PreviewToggle","CardThumbnail","CardBody","galleryBodyIcon","ComposerCard","props"],"mappings":"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"}