@linktr.ee/messaging-react 3.10.0 → 3.11.0-rc-1783756377

package/src/components/CustomMessage/index.tsx

@@ -32,17 +32,17 @@ 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 { bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream } from '../MessageAttachment'
 
 import { useCustomMessage } from './context'
+import LockedAttachment from './LockedAttachment'
 import {
   MessageTag,
   isAttachmentMessage,
   isChatbotMessage,
+  isMediaAttachmentMessage,
+  isTextAttachmentMessage,
   isTipOnlyMessage,
 } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
@@ -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 && (
@@ -276,43 +295,61 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             marginInlineStart: 0,
           }}
         >
-          {isAttachment ? (
+          {isTipOnly ? (
+            <MessageTag message={message} standalone />
+          ) : isTextAttachmentMessage(message) ? (
             <div className="str-chat__message-bubble-wrapper">
-              {isMine ? (
-                <div className="flex items-center gap-2">
-                  {MessageActions && <MessageActions />}
-                  <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}
-                    onPreviewClick={() => onUnlockClick?.(message, channel)}
-                    onFetchSource={async () =>
-                      await onFetchSource?.(message, channel)
-                    }
+              <div className="flex items-center gap-2">
+                {isMine && MessageActions && <MessageActions />}
+                {isMine ? (
+                  <LockedAttachment
+                    {...sharedLockedTextProps}
+                    isMine={true}
                   />
-                </div>
-              ) : (
-                <div className="flex items-center gap-2">
-                  <LockedAttachment.Received
-                    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}
+                ) : (
+                  <LockedAttachment
+                    {...sharedLockedTextProps}
+                    isMine={false}
                     isUnlocking={isUnlocking(message.id)}
                     onUnlockClick={() => onUnlockClick?.(message, channel)}
-                    onFetchSource={async () =>
-                      await onFetchSource?.(message, channel)
+                  />
+                )}
+                {!isMine && MessageActions && <MessageActions />}
+              </div>
+            </div>
+          ) : isMediaAttachmentMessage(message) ? (
+            <div className="str-chat__message-bubble-wrapper">
+              <div className="flex items-center gap-2">
+                {isMine && MessageActions && <MessageActions />}
+                {isMine ? (
+                  <LockedAttachment
+                    {...sharedLockedMediaProps}
+                    isMine={true}
+                    onPreviewClick={() =>
+                      onUnlockClick
+                        ? onUnlockClick(message, channel)
+                        : undefined
                     }
-                    onDownloadClick={() => onDownloadClick?.(message, channel)}
                   />
-                  {MessageActions && <MessageActions />}
-                </div>
-              )}
+                ) : (
+                  <LockedAttachment
+                    {...sharedLockedMediaProps}
+                    isMine={false}
+                    isUnlocking={isUnlocking(message.id)}
+                    onUnlockClick={() =>
+                      onUnlockClick
+                        ? onUnlockClick(message, channel)
+                        : undefined
+                    }
+                    onDownloadClick={() =>
+                      onDownloadClick
+                        ? onDownloadClick(message, channel)
+                        : undefined
+                    }
+                  />
+                )}
+                {!isMine && MessageActions && <MessageActions />}
+              </div>
               {message.text && (
                 <div className="str-chat__message-bubble">
                   <MessageText
@@ -322,9 +359,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 </div>
               )}
             </div>
-          ) : isTipOnly ? (
-            /* Tip-only messages render as a standalone bubble */
-            <MessageTag message={message} standalone />
           ) : canRenderAttachmentsInToolkit ? (
             <StreamAttachmentMessage
               groupPosition={streamAttachmentGroupPosition}

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'
@@ -76,15 +76,10 @@ export type {
 } from './components/MessageBubble'
 export type { ActionButtonProps } from './components/ActionButton'
 export type {
-  ComposerCardProps,
-  SentCardProps,
-  ReceivedCardProps,
+  LockedAttachmentProps,
   LockedAttachmentGalleryItem,
   LockedAttachmentContextValue,
-  // Deprecated aliases preserved for backwards compatibility:
-  CreatorCardProps,
-  VisitorCardProps,
-} from './components/LockedAttachment'
+} from './components/CustomMessage/LockedAttachment'
 export type {
   ComposerCardProps as LinkAttachmentComposerCardProps,
   SentCardProps as LinkAttachmentSentCardProps,

package/src/stream-custom-data.ts

@@ -41,6 +41,7 @@ export interface MessageMetadata {
   amount_text?: string
   payment_status?: PaymentStatus
   attachment_title?: string
+  attachment_content_type?: 'text' | 'media'
   attachment_mime_type?: string
   attachment_thumbnail?: string
   attachment_detail?: string

package/src/styles.css

@@ -831,3 +831,15 @@
   color: #016e1a;
   background-color: #dbf0e0;
 }
+
+/** 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

@@ -2,12 +2,13 @@ import type {
   MessagingUser,
   StreamChatServiceConfig,
 } from '@linktr.ee/messaging-core'
-import type { ComponentType } from 'react'
+import type { ComponentType, Dispatch, SetStateAction } from 'react'
 import type {
   Channel,
   ChannelFilters,
   ChannelMemberResponse,
   ChannelSort,
+  Event,
   LocalMessage,
   SendMessageAPIResponse,
   StreamChat,
@@ -20,7 +21,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.
@@ -122,8 +123,40 @@ export interface ChannelListProps {
    * Falls back to message.text when no matching translation exists.
    */
   viewerLanguage?: string
+  /**
+   * Lock the visible channel order so live events don't promote a channel to
+   * the top. Forwarded to Stream's `<ChannelList>`. Note `lockChannelOrder`
+   * alone doesn't cover `notification.message_new` or `channel.visible`; pair it
+   * with the event handlers below to fully neutralize promotion.
+   */
+  lockChannelOrder?: boolean
+  /**
+   * Live channel-list event handlers forwarded verbatim to Stream's
+   * `<ChannelList>`. Left undefined, Stream applies its default "move the
+   * changed channel to the top" behaviour.
+   *
+   * Hosts that order by a custom channel field (`last_conversation_at` for the
+   * inbox, `priority_score` for Spotlight) use these to neutralize promotion on
+   * new-message / visibility events and re-sort on `channel.updated` instead.
+   * Each receives Stream's `setChannels` dispatcher and the triggering event.
+   * See MES-1214 / MES-1219.
+   */
+  onMessageNewHandler?: ChannelListReorderHandler
+  onMessageNew?: ChannelListReorderHandler
+  onChannelVisible?: ChannelListReorderHandler
+  onAddedToChannel?: ChannelListReorderHandler
+  onChannelUpdated?: ChannelListReorderHandler
 }
 
+/**
+ * Signature of Stream's `<ChannelList>` live-event handlers: mutate the loaded
+ * channel array via `setChannels` in response to a websocket `event`.
+ */
+export type ChannelListReorderHandler = (
+  setChannels: Dispatch<SetStateAction<Channel[]>>,
+  event: Event
+) => void
+
 /**
  * ChannelView component props
  */

package/dist/Card-B-L2MST4.js

@@ -1,107 +0,0 @@
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
-import { CheckCircleIcon as T, ImagesIcon as j } from "@phosphor-icons/react";
-import k, { useState as b, useRef as z, useCallback as C } from "react";
-import { L as D, C as V, G as A, a as E } from "./LockedThumbnail-BAQmoIff.js";
-const M = ({
-  title: o,
-  mimeType: p = "application/octet-stream",
-  thumbnailUrl: N,
-  detail: I,
-  amountText: g,
-  placeholderTitle: L = "Attachment title",
-  paymentStatus: c,
-  gallery: i,
-  onPreviewClick: a,
-  onFetchSource: n
-}) => {
-  const [d, y] = b(), [u, l] = b(!1), [B, v] = b(!1), f = z(!1), r = ((i == null ? void 0 : i.length) ?? 0) >= 2, G = C(async () => {
-    if (a == null || a(), u) {
-      l(!1);
-      return;
-    }
-    if (r) {
-      l(!0);
-      return;
-    }
-    if (d) {
-      l(!0);
-      return;
-    }
-    if (n && !f.current) {
-      f.current = !0, v(!0);
-      try {
-        const t = await n();
-        t && (y(t), l(!0));
-      } finally {
-        f.current = !1, v(!1);
-      }
-    }
-  }, [u, r, d, a, n]), m = r || n || a ? G : void 0, h = !u, s = B, R = c === "paid" ? /* @__PURE__ */ x(k.Fragment, { children: [
-    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
-    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[#34c759]", children: "Sold" }),
-    /* @__PURE__ */ e(T, { className: "size-4 text-[#34c759]", weight: "bold" })
-  ] }) : g ? /* @__PURE__ */ x(k.Fragment, { children: [
-    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
-    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: g })
-  ] }) : null, w = r ? /* @__PURE__ */ e(
-    A,
-    {
-      variant: "dark",
-      gallery: i,
-      title: o,
-      showLocked: h,
-      paymentStatus: c
-    }
-  ) : /* @__PURE__ */ e(
-    E,
-    {
-      variant: "dark",
-      mimeType: p,
-      thumbnailUrl: N,
-      title: o,
-      source: d,
-      showLocked: h,
-      paymentStatus: c
-    }
-  );
-  return /* @__PURE__ */ x(D, { variant: "dark", children: [
-    m ? (
-      // Uses a `<div role="button">` rather than a native `<button>` so the
-      // gallery's carousel arrow `<button>`s rendered inside `thumbnail`
-      // don't produce invalid nested interactive elements.
-      /* @__PURE__ */ e(
-        "div",
-        {
-          role: "button",
-          tabIndex: s ? -1 : 0,
-          "aria-label": "Toggle preview",
-          "aria-busy": s,
-          "aria-pressed": !h,
-          "aria-disabled": s || void 0,
-          onClick: s ? void 0 : m,
-          onKeyDown: (t) => {
-            s || t.target === t.currentTarget && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), m());
-          },
-          className: s ? "block w-full text-left" : "block w-full cursor-pointer text-left",
-          children: w
-        }
-      )
-    ) : w,
-    /* @__PURE__ */ e(
-      V,
-      {
-        variant: "dark",
-        title: o,
-        placeholderTitle: L,
-        mimeType: p,
-        detail: I,
-        statusBadge: R,
-        icon: r ? /* @__PURE__ */ e(j, { className: "size-5 shrink-0 text-white/55" }) : void 0
-      }
-    )
-  ] });
-};
-export {
-  M as default
-};
-//# sourceMappingURL=Card-B-L2MST4.js.map

package/dist/Card-B-L2MST4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-B-L2MST4.js","sources":["../src/components/LockedAttachment/components/Sent/Card.tsx"],"sourcesContent":["import { CheckCircleIcon, ImagesIcon } from '@phosphor-icons/react'\nimport React, { useCallback, useRef, useState } from 'react'\n\nimport type {\n  LockedAttachmentBaseProps,\n  LockedAttachmentSource,\n} from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport GalleryThumbnail from '../_shared/GalleryThumbnail'\nimport LockedCardShell from '../_shared/LockedCardShell'\nimport LockedThumbnail from '../_shared/LockedThumbnail'\n\nexport interface SentCardProps extends LockedAttachmentBaseProps {\n  /** Placeholder shown in the title slot when no title is set. */\n  placeholderTitle?: string\n  /** Fired the first time the sender taps the thumbnail to preview their own attachment. */\n  onPreviewClick?: () => void\n  /**\n   * Lazily loads the underlying source so the sender can preview the attachment.\n   * Called the first time the thumbnail is tapped; the returned source is cached\n   * and reused on subsequent toggles.\n   */\n  onFetchSource?: () => Promise<LockedAttachmentSource | void>\n}\n\n/**\n * The card the sender sees in chat after a paid attachment has been posted.\n * Matches the Sent column of the messaging design system in Figma.\n */\nconst SentCard: React.FC<SentCardProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  paymentStatus,\n  gallery,\n  onPreviewClick,\n  onFetchSource,\n}) => {\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n  const [isPreviewVisible, setIsPreviewVisible] = useState(false)\n  const [isLoadingPreview, setIsLoadingPreview] = useState(false)\n  const fetchingRef = useRef(false)\n\n  const isGallery = (gallery?.length ?? 0) >= 2\n\n  const handleToggle = useCallback(async () => {\n    onPreviewClick?.()\n    if (isPreviewVisible) {\n      setIsPreviewVisible(false)\n      return\n    }\n    // Gallery items carry their own per-item sources on the `gallery` prop, so\n    // we just flip visibility — no async source fetch is needed.\n    if (isGallery) {\n      setIsPreviewVisible(true)\n      return\n    }\n    if (source) {\n      setIsPreviewVisible(true)\n      return\n    }\n    if (!onFetchSource) return\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    setIsLoadingPreview(true)\n    try {\n      const result = await onFetchSource()\n      if (result) {\n        setSource(result)\n        setIsPreviewVisible(true)\n      }\n    } finally {\n      fetchingRef.current = false\n      setIsLoadingPreview(false)\n    }\n  }, [isPreviewVisible, isGallery, source, onPreviewClick, onFetchSource])\n\n  // Gallery is always previewable for the sender because each item's source\n  // is already provided up-front via `gallery[*].sourceUrl`.\n  const togglePreview =\n    isGallery || onFetchSource || onPreviewClick ? handleToggle : undefined\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\n\n  const statusBadge =\n    paymentStatus === 'paid' ? (\n      <React.Fragment>\n        <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n        <span className=\"text-xs font-medium text-[#34c759]\">Sold</span>\n        <CheckCircleIcon className=\"size-4 text-[#34c759]\" weight=\"bold\" />\n      </React.Fragment>\n    ) : amountText ? (\n      <React.Fragment>\n        <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n        <span className=\"text-xs font-medium text-white/55\">{amountText}</span>\n      </React.Fragment>\n    ) : null\n\n  const thumbnail = isGallery ? (\n    <GalleryThumbnail\n      variant=\"dark\"\n      gallery={gallery!}\n      title={title}\n      showLocked={showLocked}\n      paymentStatus={paymentStatus}\n    />\n  ) : (\n    <LockedThumbnail\n      variant=\"dark\"\n      mimeType={mimeType}\n      thumbnailUrl={thumbnailUrl}\n      title={title}\n      source={source}\n      showLocked={showLocked}\n      paymentStatus={paymentStatus}\n    />\n  )\n\n  return (\n    <LockedCardShell variant=\"dark\">\n      {togglePreview ? (\n        // Uses a `<div role=\"button\">` rather than a native `<button>` so the\n        // gallery's carousel arrow `<button>`s rendered inside `thumbnail`\n        // don't produce invalid nested interactive elements.\n        <div\n          role=\"button\"\n          tabIndex={isBusy ? -1 : 0}\n          aria-label=\"Toggle preview\"\n          aria-busy={isBusy}\n          aria-pressed={!showLocked}\n          aria-disabled={isBusy || undefined}\n          onClick={isBusy ? undefined : togglePreview}\n          onKeyDown={(e) => {\n            if (isBusy) return\n            // Only handle keys that originate on the wrapper itself, not on\n            // inner interactive elements (gallery carousel arrows). Without\n            // this guard, pressing Enter/Space on a focused child would bubble\n            // up and toggle the preview in addition to activating the child.\n            if (e.target !== e.currentTarget) return\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              void togglePreview()\n            }\n          }}\n          className={\n            !isBusy\n              ? 'block w-full cursor-pointer text-left'\n              : 'block w-full text-left'\n          }\n        >\n          {thumbnail}\n        </div>\n      ) : (\n        thumbnail\n      )}\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={statusBadge}\n        icon={\n          isGallery ? (\n            <ImagesIcon className=\"size-5 shrink-0 text-white/55\" />\n          ) : undefined\n        }\n      />\n    </LockedCardShell>\n  )\n}\n\nexport default SentCard\n"],"names":["SentCard","title","mimeType","thumbnailUrl","detail","amountText","placeholderTitle","paymentStatus","gallery","onPreviewClick","onFetchSource","source","setSource","useState","isPreviewVisible","setIsPreviewVisible","isLoadingPreview","setIsLoadingPreview","fetchingRef","useRef","isGallery","handleToggle","useCallback","result","togglePreview","showLocked","isBusy","statusBadge","jsxs","React","jsx","CheckCircleIcon","thumbnail","GalleryThumbnail","LockedThumbnail","LockedCardShell","e","CardBody","ImagesIcon"],"mappings":"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"}

package/dist/Card-B56QxJW3.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("@phosphor-icons/react"),t=require("react");require("classnames");const T=require("./index-BPhZyaxT.cjs"),j=require("./LockedThumbnail-Cr0Gqs3Y.cjs"),p="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70",U=({isLocked:i,sourceUrl:u,redeemUrl:g,onUnlockClicked:l,onDownloadClicked:o,isUnlocking:r=!1})=>{if(i&&l!=null)return e.jsx("button",{type:"button",onClick:l,disabled:r,className:p,children:r?e.jsx("span",{className:"size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"}):e.jsxs(t.Fragment,{children:[e.jsx(d.LockSimpleIcon,{className:"size-4",weight:"fill"}),"Unlock"]})});if(!i&&o!=null){const c=g??u;return c!=null?e.jsxs("a",{href:c,target:"_blank",rel:"noopener noreferrer",onClick:o,className:`${p} !text-white`,children:[e.jsx(d.DownloadSimpleIcon,{className:"size-4",weight:"bold"}),"Download"]}):e.jsxs("button",{type:"button",onClick:o,className:p,children:[e.jsx(d.DownloadSimpleIcon,{className:"size-4",weight:"bold"}),"Download"]})}return null},B=({title:i,amountText:u,thumbnailUrl:g,mimeType:l="application/octet-stream",detail:o,gallery:r,onUnlockClick:c,onFetchSource:N,onDownloadClick:I,paymentStatus:n,isUnlocking:C=!1})=>{const f=((r==null?void 0:r.length)??0)>=2,[s,q]=t.useState(),v=t.useRef(null),w=t.useRef(!1),x=t.useRef(N);x.current=N;const k=s==null?void 0:s.sourceUrl,z=s==null?void 0:s.redeemUrl,h=t.useCallback(async()=>{var a;if(!w.current){w.current=!0;try{const b=await((a=x.current)==null?void 0:a.call(x));b&&q(b)}finally{w.current=!1}}},[]),L=t.useCallback(()=>{n==="paid"?h():c==null||c()},[n,h,c]);t.useEffect(()=>{if(!v.current||n!=="paid"||s!==void 0)return;const a=new IntersectionObserver(([b])=>{b.isIntersecting&&(h(),a.disconnect())},{threshold:1});return a.observe(v.current),()=>a.disconnect()},[n,s,h]);const m=f?n!=="paid":k===void 0,R=T.getSourceType(l),D=n==="paid"?e.jsxs(t.Fragment,{children:[e.jsx("span",{className:"text-xs font-medium text-black/55",children:"•"}),e.jsx("span",{className:"text-xs font-medium text-[#008236]",children:"Purchased"}),e.jsx(d.CheckCircleIcon,{className:"size-4 text-[#008236]",weight:"bold"})]}):u!=null?e.jsxs(t.Fragment,{children:[e.jsx("span",{className:"text-xs font-medium text-black/55",children:"•"}),e.jsx("span",{className:"text-xs font-medium text-black/55",children:u})]}):null,S=f?void 0:k;return e.jsxs(j.LockedCardShell,{variant:"light",rootRef:v,"data-testid":"locked-attachment",children:[f?e.jsx(j.GalleryThumbnail,{variant:"light",gallery:r,title:i,showLocked:m,paymentStatus:n}):e.jsx(j.LockedThumbnail,{variant:"light",mimeType:l,thumbnailUrl:g,title:i,source:s,showLocked:m,paymentStatus:n,containedImage:!m&&(R==="image"||R==="document")}),e.jsx(j.CardBody,{variant:"light",title:i,mimeType:l,detail:o,statusBadge:D,icon:f?e.jsx(d.ImagesIcon,{className:"size-5 shrink-0 text-black/55"}):void 0,action:e.jsx(U,{isLocked:m,isUnlocking:C,sourceUrl:S,redeemUrl:z,onUnlockClicked:L,onDownloadClicked:I})})]})};exports.default=B;
-//# sourceMappingURL=Card-B56QxJW3.cjs.map

package/dist/Card-B56QxJW3.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-B56QxJW3.cjs","sources":["../src/components/LockedAttachment/components/Received/CardActions.tsx","../src/components/LockedAttachment/components/Received/Card.tsx"],"sourcesContent":["import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nexport interface ReceivedCardActionsProps {\n  /** Whether the card is currently locked. Drives which CTA we render. */\n  isLocked: boolean\n  /**\n   * When unlocked, the URL used as the Download link's `href` (opens in a new\n   * tab). When omitted, the Download CTA falls back to a plain `<button>`\n   * that just calls `onDownloadClicked` — useful for galleries where the\n   * single-source URL doesn't exist.\n   */\n  sourceUrl?: string\n  /** Optional alternate href that takes precedence over `sourceUrl`. */\n  redeemUrl?: string\n  onUnlockClicked?: () => void\n  onDownloadClicked?: () => void\n  isUnlocking?: boolean\n}\n\nconst buttonClass =\n  'mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70'\n\n/**\n * Renders the primary CTA below the body of a Received card.\n * - Locked + onUnlockClicked → \"Unlock\" button\n * - Unlocked + onDownloadClicked + (redeemUrl || sourceUrl) → \"Download\" link\n * - Unlocked + onDownloadClicked + no URL → \"Download\" button (e.g. gallery)\n * Otherwise renders nothing.\n */\nconst ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({\n  isLocked,\n  sourceUrl,\n  redeemUrl,\n  onUnlockClicked,\n  onDownloadClicked,\n  isUnlocking = false,\n}) => {\n  if (isLocked && onUnlockClicked != null) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onUnlockClicked}\n        disabled={isUnlocking}\n        className={buttonClass}\n      >\n        {isUnlocking ? (\n          <span className=\"size-4 animate-spin rounded-full border-2 border-white/30 border-t-white\" />\n        ) : (\n          <React.Fragment>\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" />\n            Unlock\n          </React.Fragment>\n        )}\n      </button>\n    )\n  }\n\n  if (!isLocked && onDownloadClicked != null) {\n    const href = redeemUrl ?? sourceUrl\n    if (href != null) {\n      return (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          onClick={onDownloadClicked}\n          className={`${buttonClass} !text-white`}\n        >\n          <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n          Download\n        </a>\n      )\n    }\n\n    return (\n      <button\n        type=\"button\"\n        onClick={onDownloadClicked}\n        className={buttonClass}\n      >\n        <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n        Download\n      </button>\n    )\n  }\n\n  return null\n}\n\nexport default ReceivedCardActions\n","import { CheckCircleIcon, ImagesIcon } from '@phosphor-icons/react'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { getSourceType } from '../../../AttachmentCard'\nimport type {\n  LockedAttachmentBaseProps,\n  LockedAttachmentSource,\n} from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport GalleryThumbnail from '../_shared/GalleryThumbnail'\nimport LockedCardShell from '../_shared/LockedCardShell'\nimport LockedThumbnail from '../_shared/LockedThumbnail'\n\nimport ReceivedCardActions from './CardActions'\n\nexport interface ReceivedCardProps extends LockedAttachmentBaseProps {\n  /**\n   * Called when the recipient clicks Unlock on an unpaid attachment.\n   * Use this to open a checkout flow. Omit to hide the Unlock button.\n   */\n  onUnlockClick?: () => void\n  /**\n   * Called to fetch the attachment source — fired automatically when\n   * `paymentStatus` transitions to `'paid'`, or immediately on click when\n   * `paymentStatus` is already `'paid'`. Return a `LockedAttachmentSource`\n   * to unlock the card.\n   */\n  onFetchSource?: () => Promise<LockedAttachmentSource | void>\n  /**\n   * Called when the recipient clicks Download on an unlocked card.\n   * Omit to hide the Download button.\n   */\n  onDownloadClick?: () => void\n  /**\n   * When true, shows a loading spinner on the Unlock button.\n   * Driven by the LockedAttachmentContext (e.g. checkout in progress).\n   */\n  isUnlocking?: boolean\n}\n\n/**\n * The card the recipient sees in chat for a paid attachment.\n * Matches the Received column of the messaging design system in Figma:\n * locked → blurred thumbnail + Unlock CTA, unlocked → clear image + Download CTA.\n */\nconst ReceivedCard: React.FC<ReceivedCardProps> = ({\n  title,\n  amountText,\n  thumbnailUrl,\n  mimeType = 'application/octet-stream',\n  detail,\n  gallery,\n  onUnlockClick,\n  onFetchSource,\n  onDownloadClick,\n  paymentStatus,\n  isUnlocking = false,\n}) => {\n  const isGallery = (gallery?.length ?? 0) >= 2\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n\n  const cardRef = useRef<HTMLDivElement>(null)\n  const fetchingRef = useRef(false)\n\n  const onFetchSourceRef = useRef(onFetchSource)\n  onFetchSourceRef.current = onFetchSource\n\n  const effectiveSourceUrl = source?.sourceUrl\n  const effectiveRedeemUrl = source?.redeemUrl\n\n  const fetchSource = useCallback(async (): Promise<void> => {\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    try {\n      const result = await onFetchSourceRef.current?.()\n      if (result) setSource(result)\n    } finally {\n      fetchingRef.current = false\n    }\n  }, [])\n\n  const handleUnlockClick = useCallback(() => {\n    if (paymentStatus === 'paid') {\n      void fetchSource()\n    } else {\n      onUnlockClick?.()\n    }\n  }, [paymentStatus, fetchSource, onUnlockClick])\n\n  // Auto-fetch the source once the paid card scrolls into view.\n  useEffect(() => {\n    if (!cardRef.current) return\n    if (paymentStatus !== 'paid' || source !== undefined) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          void fetchSource()\n          observer.disconnect()\n        }\n      },\n      { threshold: 1.0 }\n    )\n\n    observer.observe(cardRef.current)\n    return () => observer.disconnect()\n  }, [paymentStatus, source, fetchSource])\n\n  // For gallery, the per-item sources are carried by `gallery` itself, so\n  // the lock state is driven by paymentStatus rather than the single\n  // `effectiveSourceUrl`. Everything else still respects the source fetch.\n  const isLocked = isGallery\n    ? paymentStatus !== 'paid'\n    : effectiveSourceUrl === undefined\n  const sourceType = getSourceType(mimeType)\n\n  const statusBadge =\n    paymentStatus === 'paid' ? (\n      <React.Fragment>\n        <span className=\"text-xs font-medium text-black/55\">&bull;</span>\n        <span className=\"text-xs font-medium text-[#008236]\">Purchased</span>\n        <CheckCircleIcon className=\"size-4 text-[#008236]\" weight=\"bold\" />\n      </React.Fragment>\n    ) : amountText != null ? (\n      <React.Fragment>\n        <span className=\"text-xs font-medium text-black/55\">&bull;</span>\n        <span className=\"text-xs font-medium text-black/55\">{amountText}</span>\n      </React.Fragment>\n    ) : null\n\n  // For gallery, ReceivedCardActions falls back to a plain <button>\n  // (no anchor) because the gallery has no single sourceUrl to link to —\n  // the per-item sources live on `gallery` itself.\n  const actionSourceUrl = isGallery ? undefined : effectiveSourceUrl\n\n  return (\n    <LockedCardShell\n      variant=\"light\"\n      rootRef={cardRef}\n      data-testid=\"locked-attachment\"\n    >\n      {isGallery ? (\n        <GalleryThumbnail\n          variant=\"light\"\n          gallery={gallery!}\n          title={title}\n          showLocked={isLocked}\n          paymentStatus={paymentStatus}\n        />\n      ) : (\n        <LockedThumbnail\n          variant=\"light\"\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          title={title}\n          source={source}\n          showLocked={isLocked}\n          paymentStatus={paymentStatus}\n          containedImage={\n            !isLocked && (sourceType === 'image' || sourceType === 'document')\n          }\n        />\n      )}\n\n      <CardBody\n        variant=\"light\"\n        title={title}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={statusBadge}\n        icon={\n          isGallery ? (\n            <ImagesIcon className=\"size-5 shrink-0 text-black/55\" />\n          ) : undefined\n        }\n        action={\n          <ReceivedCardActions\n            isLocked={isLocked}\n            isUnlocking={isUnlocking}\n            sourceUrl={actionSourceUrl}\n            redeemUrl={effectiveRedeemUrl}\n            onUnlockClicked={handleUnlockClick}\n            onDownloadClicked={onDownloadClick}\n          />\n        }\n      />\n    </LockedCardShell>\n  )\n}\n\nexport default ReceivedCard\n"],"names":["buttonClass","ReceivedCardActions","isLocked","sourceUrl","redeemUrl","onUnlockClicked","onDownloadClicked","isUnlocking","jsx","jsxs","React","LockSimpleIcon","href","DownloadSimpleIcon","ReceivedCard","title","amountText","thumbnailUrl","mimeType","detail","gallery","onUnlockClick","onFetchSource","onDownloadClick","paymentStatus","isGallery","source","setSource","useState","cardRef","useRef","fetchingRef","onFetchSourceRef","effectiveSourceUrl","effectiveRedeemUrl","fetchSource","useCallback","result","_a","handleUnlockClick","useEffect","observer","entry","sourceType","getSourceType","statusBadge","CheckCircleIcon","actionSourceUrl","LockedCardShell","GalleryThumbnail","LockedThumbnail","CardBody","ImagesIcon"],"mappings":"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"}

package/dist/Card-Bqh-BQaX.js

@@ -1,132 +0,0 @@
-import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import { ImagesIcon as A, PencilSimpleIcon as C, XIcon as D } from "@phosphor-icons/react";
-import V, { useState as h, useRef as E, useCallback as K } from "react";
-import { L as P, C as S, G as X, a as q } from "./LockedThumbnail-BAQmoIff.js";
-const Q = ({
-  title: l,
-  mimeType: b = "application/octet-stream",
-  thumbnailUrl: N,
-  detail: I,
-  amountText: g,
-  placeholderTitle: L = "Attachment title",
-  placeholderAmountText: z,
-  gallery: r,
-  onDismiss: p,
-  onPreviewClick: a,
-  onFetchSource: n,
-  onEditClick: x
-}) => {
-  const [c, B] = h(), [u, o] = h(!1), [R, w] = h(!1), d = E(!1), i = ((r == null ? void 0 : r.length) ?? 0) >= 2, j = K(async () => {
-    if (a == null || a(), u) {
-      o(!1);
-      return;
-    }
-    if (i) {
-      o(!0);
-      return;
-    }
-    if (c) {
-      o(!0);
-      return;
-    }
-    if (n && !d.current) {
-      d.current = !0, w(!0);
-      try {
-        const e = await n();
-        e && (B(e), o(!0));
-      } finally {
-        d.current = !1, w(!1);
-      }
-    }
-  }, [u, i, c, a, n]), f = i || n || a ? j : void 0, m = !u, s = R, G = /* @__PURE__ */ y(V.Fragment, { children: [
-    /* @__PURE__ */ t("span", { className: "text-xs font-medium text-white/55", children: "•" }),
-    /* @__PURE__ */ t(
-      "span",
-      {
-        className: g ? "text-xs font-medium text-white/55" : "text-xs font-medium text-white/30",
-        children: g || z
-      }
-    )
-  ] }), v = p ? /* @__PURE__ */ t(
-    "button",
-    {
-      type: "button",
-      onClick: (e) => {
-        e.stopPropagation(), p();
-      },
-      className: "flex size-6 items-center justify-center rounded-full bg-[#121110] text-white",
-      "aria-label": "Dismiss attachment",
-      children: /* @__PURE__ */ t(D, { className: "size-3", weight: "bold" })
-    }
-  ) : void 0, T = x ? /* @__PURE__ */ t(
-    "button",
-    {
-      type: "button",
-      onClick: x,
-      "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__ */ t(C, { className: "size-5", weight: "regular" })
-    }
-  ) : void 0, k = i ? /* @__PURE__ */ t(
-    X,
-    {
-      variant: "dark",
-      gallery: r,
-      title: l,
-      showLocked: m,
-      topRight: v
-    }
-  ) : /* @__PURE__ */ t(
-    q,
-    {
-      variant: "dark",
-      mimeType: b,
-      thumbnailUrl: N,
-      title: l,
-      source: c,
-      showLocked: m,
-      topRight: v
-    }
-  );
-  return /* @__PURE__ */ y(P, { variant: "dark", children: [
-    f ? (
-      // Uses a `<div role="button">` rather than a native `<button>` so the
-      // dismiss control rendered inside `thumbnail` (also a `<button>`)
-      // doesn't produce invalid nested interactive elements.
-      /* @__PURE__ */ t(
-        "div",
-        {
-          role: "button",
-          tabIndex: s ? -1 : 0,
-          "aria-label": "Toggle preview",
-          "aria-busy": s,
-          "aria-pressed": !m,
-          "aria-disabled": s || void 0,
-          onClick: s ? void 0 : f,
-          onKeyDown: (e) => {
-            s || e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), f());
-          },
-          className: s ? "block w-full text-left" : "block w-full cursor-pointer text-left",
-          children: k
-        }
-      )
-    ) : k,
-    /* @__PURE__ */ t(
-      S,
-      {
-        variant: "dark",
-        title: l,
-        placeholderTitle: L,
-        mimeType: b,
-        detail: I,
-        statusBadge: G,
-        icon: i ? /* @__PURE__ */ t(A, { className: "size-5 shrink-0 text-white/55" }) : void 0,
-        trailingAction: T
-      }
-    )
-  ] });
-};
-export {
-  Q as default
-};
-//# sourceMappingURL=Card-Bqh-BQaX.js.map

package/dist/Card-Bqh-BQaX.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-Bqh-BQaX.js","sources":["../src/components/LockedAttachment/components/Composer/Card.tsx"],"sourcesContent":["import { ImagesIcon, PencilSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport React, { useCallback, useRef, useState } from 'react'\n\nimport type {\n  LockedAttachmentBaseProps,\n  LockedAttachmentSource,\n} from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport GalleryThumbnail from '../_shared/GalleryThumbnail'\nimport LockedCardShell from '../_shared/LockedCardShell'\nimport LockedThumbnail from '../_shared/LockedThumbnail'\n\nexport interface ComposerCardProps extends LockedAttachmentBaseProps {\n  /** Placeholder shown in the title slot before the composer types one. */\n  placeholderTitle?: string\n  /** Placeholder shown in the amount slot before one is configured. */\n  placeholderAmountText?: string\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  /** 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   */\n  onFetchSource?: () => Promise<LockedAttachmentSource | void>\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 * The card the composer sees while drafting a paid attachment.\n * Matches the Composer column of the messaging design system in Figma.\n */\nconst ComposerCard: 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 [source, setSource] = useState<LockedAttachmentSource | undefined>()\n  const [isPreviewVisible, setIsPreviewVisible] = useState(false)\n  const [isLoadingPreview, setIsLoadingPreview] = useState(false)\n  const fetchingRef = useRef(false)\n\n  const isGallery = (gallery?.length ?? 0) >= 2\n\n  const handleToggle = useCallback(async () => {\n    onPreviewClick?.()\n    if (isPreviewVisible) {\n      setIsPreviewVisible(false)\n      return\n    }\n    // Gallery items carry their own per-item sources on the `gallery` prop, so\n    // we just flip visibility — no async source fetch is needed.\n    if (isGallery) {\n      setIsPreviewVisible(true)\n      return\n    }\n    if (source) {\n      setIsPreviewVisible(true)\n      return\n    }\n    if (!onFetchSource) return\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    setIsLoadingPreview(true)\n    try {\n      const result = await onFetchSource()\n      if (result) {\n        setSource(result)\n        setIsPreviewVisible(true)\n      }\n    } finally {\n      fetchingRef.current = false\n      setIsLoadingPreview(false)\n    }\n  }, [isPreviewVisible, isGallery, source, onPreviewClick, onFetchSource])\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 togglePreview =\n    isGallery || onFetchSource || onPreviewClick ? handleToggle : undefined\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  const thumbnail = isGallery ? (\n    <GalleryThumbnail\n      variant=\"dark\"\n      gallery={gallery!}\n      title={title}\n      showLocked={showLocked}\n      topRight={dismissButton}\n    />\n  ) : (\n    <LockedThumbnail\n      variant=\"dark\"\n      mimeType={mimeType}\n      thumbnailUrl={thumbnailUrl}\n      title={title}\n      source={source}\n      showLocked={showLocked}\n      topRight={dismissButton}\n    />\n  )\n\n  return (\n    <LockedCardShell variant=\"dark\">\n      {togglePreview ? (\n        // Uses a `<div role=\"button\">` rather than a native `<button>` so the\n        // dismiss control rendered inside `thumbnail` (also a `<button>`)\n        // doesn't produce invalid nested interactive elements.\n        <div\n          role=\"button\"\n          tabIndex={isBusy ? -1 : 0}\n          aria-label=\"Toggle preview\"\n          aria-busy={isBusy}\n          aria-pressed={!showLocked}\n          aria-disabled={isBusy || undefined}\n          onClick={isBusy ? undefined : togglePreview}\n          onKeyDown={(e) => {\n            if (isBusy) return\n            // Only handle keys that originate on the wrapper itself, not on\n            // inner interactive elements (dismiss X, carousel arrows). Without\n            // this guard, pressing Enter/Space on a focused child would bubble\n            // up and toggle the preview in addition to activating the child.\n            if (e.target !== e.currentTarget) return\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              void togglePreview()\n            }\n          }}\n          className={\n            !isBusy\n              ? 'block w-full cursor-pointer text-left'\n              : 'block w-full text-left'\n          }\n        >\n          {thumbnail}\n        </div>\n      ) : (\n        thumbnail\n      )}\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={statusBadge}\n        icon={\n          isGallery ? (\n            <ImagesIcon className=\"size-5 shrink-0 text-white/55\" />\n          ) : undefined\n        }\n        trailingAction={editButton}\n      />\n    </LockedCardShell>\n  )\n}\n\nexport default ComposerCard\n"],"names":["ComposerCard","title","mimeType","thumbnailUrl","detail","amountText","placeholderTitle","placeholderAmountText","gallery","onDismiss","onPreviewClick","onFetchSource","onEditClick","source","setSource","useState","isPreviewVisible","setIsPreviewVisible","isLoadingPreview","setIsLoadingPreview","fetchingRef","useRef","isGallery","handleToggle","useCallback","result","togglePreview","showLocked","isBusy","statusBadge","jsxs","React","jsx","dismissButton","XIcon","editButton","PencilSimpleIcon","thumbnail","GalleryThumbnail","LockedThumbnail","LockedCardShell","CardBody","ImagesIcon"],"mappings":";;;;AA0CA,MAAMA,IAA4C,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,uBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAA,GACtB,CAACC,GAAkBC,CAAmB,IAAIF,EAAS,EAAK,GACxD,CAACG,GAAkBC,CAAmB,IAAIJ,EAAS,EAAK,GACxDK,IAAcC,EAAO,EAAK,GAE1BC,MAAad,KAAA,gBAAAA,EAAS,WAAU,MAAM,GAEtCe,IAAeC,EAAY,YAAY;AAE3C,QADAd,KAAA,QAAAA,KACIM,GAAkB;AACpB,MAAAC,EAAoB,EAAK;AACzB;AAAA,IACF;AAGA,QAAIK,GAAW;AACb,MAAAL,EAAoB,EAAI;AACxB;AAAA,IACF;AACA,QAAIJ,GAAQ;AACV,MAAAI,EAAoB,EAAI;AACxB;AAAA,IACF;AACA,QAAKN,KACD,CAAAS,EAAY,SAChB;AAAA,MAAAA,EAAY,UAAU,IACtBD,EAAoB,EAAI;AACxB,UAAI;AACF,cAAMM,IAAS,MAAMd,EAAA;AACrB,QAAIc,MACFX,EAAUW,CAAM,GAChBR,EAAoB,EAAI;AAAA,MAE5B,UAAA;AACE,QAAAG,EAAY,UAAU,IACtBD,EAAoB,EAAK;AAAA,MAC3B;AAAA;AAAA,EACF,GAAG,CAACH,GAAkBM,GAAWT,GAAQH,GAAgBC,CAAa,CAAC,GAIjEe,IACJJ,KAAaX,KAAiBD,IAAiBa,IAAe,QAC1DI,IAAa,CAACX,GACdY,IAASV,GAETW,IACJ,gBAAAC,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,qCAAoC,UAAA,KAAM;AAAA,IAC1D,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WACE3B,IACI,sCACA;AAAA,QAGL,UAAAA,KAAcE;AAAA,MAAA;AAAA,IAAA;AAAA,EACjB,GACF,GAGI0B,IAAgBxB,IACpB,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,CAAC,MAAM;AAGd,UAAE,gBAAA,GACFvB,EAAA;AAAA,MACF;AAAA,MACA,WAAU;AAAA,MACV,cAAW;AAAA,MAEX,UAAA,gBAAAuB,EAACE,GAAA,EAAM,WAAU,UAAS,QAAO,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA,IAExC,QAEEC,IAAavB,IACjB,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAASpB;AAAA,MACT,cAAW;AAAA,MACX,WAAU;AAAA,MAEV,UAAA,gBAAAoB,EAACI,GAAA,EAAiB,WAAU,UAAS,QAAO,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA,IAEtD,QAEEC,IAAYf,IAChB,gBAAAU;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAA9B;AAAA,MACA,OAAAP;AAAA,MACA,YAAA0B;AAAA,MACA,UAAUM;AAAA,IAAA;AAAA,EAAA,IAGZ,gBAAAD;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAArC;AAAA,MACA,cAAAC;AAAA,MACA,OAAAF;AAAA,MACA,QAAAY;AAAA,MACA,YAAAc;AAAA,MACA,UAAUM;AAAA,IAAA;AAAA,EAAA;AAId,SACE,gBAAAH,EAACU,GAAA,EAAgB,SAAQ,QACtB,UAAA;AAAA,IAAAd;AAAA;AAAA;AAAA;AAAA,MAIC,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUJ,IAAS,KAAK;AAAA,UACxB,cAAW;AAAA,UACX,aAAWA;AAAA,UACX,gBAAc,CAACD;AAAA,UACf,iBAAeC,KAAU;AAAA,UACzB,SAASA,IAAS,SAAYF;AAAA,UAC9B,WAAW,CAAC,MAAM;AAChB,YAAIE,KAKA,EAAE,WAAW,EAAE,kBACf,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACGF,EAAA;AAAA,UAET;AAAA,UACA,WACGE,IAEG,2BADA;AAAA,UAIL,UAAAS;AAAA,QAAA;AAAA,MAAA;AAAA,QAGHA;AAAA,IAGF,gBAAAL;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAAxC;AAAA,QACA,kBAAAK;AAAA,QACA,UAAAJ;AAAA,QACA,QAAAE;AAAA,QACA,aAAAyB;AAAA,QACA,MACEP,IACE,gBAAAU,EAACU,GAAA,EAAW,WAAU,iCAAgC,IACpD;AAAA,QAEN,gBAAgBP;AAAA,MAAA;AAAA,IAAA;AAAA,EAClB,GACF;AAEJ;"}