@linktr.ee/messaging-react 1.31.0-rc-1776677746 → 1.31.0

package/dist/Card-Cn2va-Qr.js

@@ -0,0 +1,205 @@
+import { jsx as e, jsxs as c, Fragment as y } from "react/jsx-runtime";
+import { LockSimpleIcon as I, DownloadSimpleIcon as D, CheckCircleIcon as M, LockOpenIcon as R } from "@phosphor-icons/react";
+import O, { useState as z, useRef as g, useCallback as L, useEffect as T } from "react";
+import { r as _, M as A, g as E } from "./MediaPlayer-BCsdmsON.js";
+const V = (n) => {
+  const {
+    isLocked: r,
+    isUnlocking: s = !1,
+    sourceUrl: t,
+    redeemUrl: i,
+    onUnlockClicked: a,
+    onDownloadClicked: o
+  } = n;
+  return r && a != null ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: a,
+      disabled: s,
+      className: "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",
+      children: s ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ c(O.Fragment, { children: [
+        /* @__PURE__ */ e(I, { className: "size-4", weight: "fill" }),
+        "Unlock"
+      ] })
+    }
+  ) : !r && o != null && t != null ? /* @__PURE__ */ c(
+    "a",
+    {
+      href: i ?? t,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: o,
+      className: "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]",
+      children: [
+        /* @__PURE__ */ e(D, { className: "size-4", weight: "bold" }),
+        "Download"
+      ]
+    }
+  ) : null;
+}, $ = () => /* @__PURE__ */ c("span", { className: "flex items-center gap-1", children: [
+  /* @__PURE__ */ e("span", { className: "size-1 rounded-full bg-white animate-bounce [animation-delay:-0.3s]" }),
+  /* @__PURE__ */ e("span", { className: "size-1 rounded-full bg-white animate-bounce [animation-delay:-0.15s]" }),
+  /* @__PURE__ */ e("span", { className: "size-1 rounded-full bg-white animate-bounce" })
+] }), x = (n) => {
+  const { thumbnailUrl: r, mimeType: s, LockIcon: t } = n;
+  return /* @__PURE__ */ c("div", { className: "relative aspect-video overflow-hidden bg-black/5", children: [
+    r != null ? /* @__PURE__ */ e(
+      "img",
+      {
+        src: r,
+        alt: "",
+        className: "absolute inset-0 h-full w-full object-cover"
+      }
+    ) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: _(s, {
+      className: "size-12 text-black/20",
+      weight: "regular"
+    }) }),
+    t != null ? /* @__PURE__ */ e(q, { icon: t }) : null
+  ] });
+}, q = ({ icon: n }) => /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-black/30", children: /* @__PURE__ */ e("div", { className: "absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60", children: /* @__PURE__ */ e(n, { className: "size-4 text-white", weight: "fill" }) }) }), B = (n) => {
+  const { sourceUrl: r, thumbnailUrl: s, mimeType: t, title: i, LockIcon: a } = n, [o, h] = z(!1);
+  return a != null ? /* @__PURE__ */ e(
+    x,
+    {
+      thumbnailUrl: s,
+      mimeType: t,
+      LockIcon: a
+    }
+  ) : /* @__PURE__ */ e("div", { className: "relative overflow-hidden bg-black/5", children: /* @__PURE__ */ e(
+    "img",
+    {
+      src: r,
+      alt: i,
+      className: `block w-full transition-opacity duration-300 ${o ? "opacity-100" : "opacity-0"}`,
+      onLoad: () => h(!0)
+    }
+  ) });
+}, F = (n) => {
+  const { sourceUrl: r, thumbnailUrl: s, mimeType: t, LockIcon: i } = n;
+  return i != null ? /* @__PURE__ */ e(
+    x,
+    {
+      thumbnailUrl: s,
+      mimeType: t,
+      LockIcon: i
+    }
+  ) : /* @__PURE__ */ e(
+    A,
+    {
+      source: r ?? "",
+      mimeType: t,
+      poster: s
+    }
+  );
+};
+function G(n) {
+  return n === "paid" ? R : I;
+}
+const S = ({
+  title: n,
+  amountText: r,
+  thumbnailUrl: s,
+  mimeType: t = "application/octet-stream",
+  detail: i,
+  onUnlockClick: a,
+  onFetchSource: o,
+  onDownloadClick: h,
+  paymentStatus: d,
+  isUnlocking: j = !1
+}) => {
+  const [l, C] = z(), w = g(!1), b = g(!1), u = g(o);
+  u.current = o;
+  const k = l === void 0, N = E(t), p = k ? G(d) : void 0, m = L(async () => {
+    var v;
+    if (!b.current) {
+      b.current = !0;
+      try {
+        const U = await ((v = u.current) == null ? void 0 : v.call(u));
+        U && C(U);
+      } finally {
+        b.current = !1;
+      }
+    }
+  }, []);
+  T(() => {
+    if (!w.current) {
+      w.current = !0;
+      return;
+    }
+    d === "paid" && m();
+  }, [d, m]);
+  const P = L(() => {
+    d === "paid" ? m() : a == null || a();
+  }, [d, a, m]);
+  let f;
+  return N === "image" ? f = /* @__PURE__ */ e(
+    B,
+    {
+      sourceUrl: l == null ? void 0 : l.sourceUrl,
+      thumbnailUrl: s,
+      mimeType: t,
+      title: n,
+      LockIcon: p
+    },
+    l == null ? void 0 : l.sourceUrl
+  ) : N === "document" ? f = /* @__PURE__ */ e(
+    x,
+    {
+      thumbnailUrl: s,
+      mimeType: t,
+      LockIcon: p
+    },
+    l == null ? void 0 : l.sourceUrl
+  ) : f = /* @__PURE__ */ e(
+    F,
+    {
+      sourceUrl: l == null ? void 0 : l.sourceUrl,
+      thumbnailUrl: s,
+      mimeType: t,
+      LockIcon: p
+    },
+    l == null ? void 0 : l.sourceUrl
+  ), /* @__PURE__ */ c("div", { className: "w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]", children: [
+    f,
+    /* @__PURE__ */ c("div", { className: "px-4 pb-3 pt-3", children: [
+      /* @__PURE__ */ e("p", { className: "mb-1.5 truncate text-base font-medium text-black", children: n }),
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
+        _(t, {
+          className: "size-5 shrink-0 text-black/55",
+          weight: "regular"
+        }),
+        i != null ? /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: i }) : null,
+        d === "paid" ? /* @__PURE__ */ c(y, { children: [
+          /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: "•" }),
+          /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[#008236]", children: "Purchased" }),
+          /* @__PURE__ */ e(
+            M,
+            {
+              className: "size-4 text-[#008236]",
+              weight: "bold"
+            }
+          )
+        ] }) : r != null ? /* @__PURE__ */ c(y, { children: [
+          /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: "•" }),
+          /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: r })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ e(
+        V,
+        {
+          isLocked: k,
+          isUnlocking: j,
+          sourceUrl: l == null ? void 0 : l.sourceUrl,
+          redeemUrl: l == null ? void 0 : l.redeemUrl,
+          onUnlockClicked: P,
+          onDownloadClicked: h
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  S as default
+};
+//# sourceMappingURL=Card-Cn2va-Qr.js.map

package/dist/Card-Cn2va-Qr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-Cn2va-Qr.js","sources":["../src/components/LockedAttachment/components/Visitor/CardActions.tsx","../src/components/LockedAttachment/components/Visitor/CardThumbnailPreview.tsx","../src/components/LockedAttachment/components/Visitor/CardImagePreview.tsx","../src/components/LockedAttachment/components/Visitor/CardMediaPreview.tsx","../src/components/LockedAttachment/components/Visitor/Card.tsx"],"sourcesContent":["import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\ninterface CardActionsProps {\n  isLocked: boolean\n  isUnlocking?: boolean\n  sourceUrl?: string\n  redeemUrl?: string\n  onUnlockClicked?: () => void\n  onDownloadClicked?: () => void\n}\n\nconst CardActions: React.FC<CardActionsProps> = (props) => {\n  const {\n    isLocked,\n    isUnlocking = false,\n    sourceUrl,\n    redeemUrl,\n    onUnlockClicked,\n    onDownloadClicked,\n  } = props\n\n  if (isLocked && onUnlockClicked != null) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onUnlockClicked}\n        disabled={isUnlocking}\n        className=\"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        {isUnlocking ? (\n          <LoadingDots />\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 && sourceUrl != null) {\n    return (\n      <a\n        href={redeemUrl ?? sourceUrl}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onDownloadClicked}\n        className=\"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]\"\n      >\n        <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n        Download\n      </a>\n    )\n  }\n\n  return null\n}\n\nconst LoadingDots: React.FC = () => {\n  return (\n    <span className=\"flex items-center gap-1\">\n      <span className=\"size-1 rounded-full bg-white animate-bounce [animation-delay:-0.3s]\" />\n      <span className=\"size-1 rounded-full bg-white animate-bounce [animation-delay:-0.15s]\" />\n      <span className=\"size-1 rounded-full bg-white animate-bounce\" />\n    </span>\n  )\n}\n\nexport default CardActions\n","import React from 'react'\n\nimport { renderTypeIcon } from '../../utils/icons'\n\ninterface ThumbnailPreviewProps {\n  thumbnailUrl?: string\n  mimeType: string\n  LockIcon?: React.ElementType\n}\n\nconst ThumbnailPreview: React.FC<ThumbnailPreviewProps> = (props) => {\n  const { thumbnailUrl, mimeType, LockIcon } = props\n\n  return (\n    <div className=\"relative aspect-video overflow-hidden bg-black/5\">\n      {thumbnailUrl != null ? (\n        <img\n          src={thumbnailUrl}\n          alt=\"\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n        />\n      ) : (\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          {renderTypeIcon(mimeType, {\n            className: 'size-12 text-black/20',\n            weight: 'regular',\n          })}\n        </div>\n      )}\n      {LockIcon != null ? <LockOverlay icon={LockIcon} /> : null}\n    </div>\n  )\n}\n\nconst LockOverlay: React.FC<{ icon: React.ElementType }> = ({ icon: Icon }) => {\n  return (\n    <div className=\"absolute inset-0 bg-black/30\">\n      <div className=\"absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60\">\n        <Icon className=\"size-4 text-white\" weight=\"fill\" />\n      </div>\n    </div>\n  )\n}\n\nexport default ThumbnailPreview\n","import React, { useState } from 'react'\n\nimport ThumbnailPreview from './CardThumbnailPreview'\n\ninterface ImagePreviewProps {\n  sourceUrl?: string\n  thumbnailUrl?: string\n  mimeType: string\n  title?: string\n  LockIcon?: React.ElementType\n}\n\nconst ImagePreview: React.FC<ImagePreviewProps> = (props) => {\n  const { sourceUrl, thumbnailUrl, mimeType, title, LockIcon } = props\n  const [sourceReady, setSourceReady] = useState(false)\n\n  if (LockIcon != null) {\n    return (\n      <ThumbnailPreview\n        thumbnailUrl={thumbnailUrl}\n        mimeType={mimeType}\n        LockIcon={LockIcon}\n      />\n    )\n  }\n\n  return (\n    <div className=\"relative overflow-hidden bg-black/5\">\n      <img\n        src={sourceUrl}\n        alt={title}\n        className={`block w-full transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}\n        onLoad={() => setSourceReady(true)}\n      />\n    </div>\n  )\n}\n\nexport default ImagePreview\n","import React from 'react'\n\nimport MediaPlayer from '../MediaPlayer'\n\nimport ThumbnailPreview from './CardThumbnailPreview'\n\ninterface MediaPreviewProps {\n  sourceUrl?: string\n  thumbnailUrl?: string\n  mimeType: string\n  LockIcon?: React.ElementType\n}\n\nconst MediaPreview: React.FC<MediaPreviewProps> = (props) => {\n  const { sourceUrl, thumbnailUrl, mimeType, LockIcon } = props\n\n  if (LockIcon != null) {\n    return (\n      <ThumbnailPreview\n        thumbnailUrl={thumbnailUrl}\n        mimeType={mimeType}\n        LockIcon={LockIcon}\n      />\n    )\n  }\n\n  return (\n    <MediaPlayer\n      source={sourceUrl ?? ''}\n      mimeType={mimeType}\n      poster={thumbnailUrl}\n    />\n  )\n}\n\nexport default MediaPreview\n","import {\n  CheckCircleIcon,\n  LockOpenIcon,\n  LockSimpleIcon,\n} from '@phosphor-icons/react'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type {\n  LockedAttachmentBaseProps,\n  LockedAttachmentSource,\n  PaymentStatus,\n} from '../../types'\nimport { renderTypeIcon } from '../../utils/icons'\nimport { getSourceType } from '../../utils/mimeType'\n\nimport CardActions from './CardActions'\nimport ImagePreview from './CardImagePreview'\nimport MediaPreview from './CardMediaPreview'\nimport ThumbnailPreview from './CardThumbnailPreview'\n\nexport interface VisitorCardProps extends LockedAttachmentBaseProps {\n  /**\n   * Called when the visitor 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 to\n   * unlock the card.\n   */\n  onFetchSource?: () => Promise<LockedAttachmentSource | void>\n  /**\n   * Called when the visitor clicks Download on an unlocked card.\n   * Omit to hide the Download button.\n   */\n  onDownloadClick?: () => void\n  /**\n   * When true, shows loading dots on the Unlock button.\n   * Driven by the LockedAttachmentContext (e.g. checkout in progress, payment processing).\n   */\n  isUnlocking?: boolean\n}\n\nfunction getLockIcon(paymentStatus?: PaymentStatus): React.ElementType {\n  return paymentStatus === 'paid' ? LockOpenIcon : LockSimpleIcon\n}\n\nconst VisitorCard: React.FC<VisitorCardProps> = ({\n  title,\n  amountText,\n  thumbnailUrl,\n  mimeType = 'application/octet-stream',\n  detail,\n  onUnlockClick,\n  onFetchSource,\n  onDownloadClick,\n  paymentStatus,\n  isUnlocking = false,\n}) => {\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n  const hasMounted = useRef(false)\n  const fetchingRef = useRef(false)\n  // Stable ref so fetchSource doesn't change identity when onFetchSource prop changes\n  const onFetchSourceRef = useRef(onFetchSource)\n  onFetchSourceRef.current = onFetchSource\n\n  const isLocked = source === undefined\n  const sourceType = getSourceType(mimeType)\n  const LockIcon = isLocked ? getLockIcon(paymentStatus) : undefined\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  }, []) // stable — reads onFetchSource via ref\n\n  // When paymentStatus transitions to 'paid' (e.g. after checkout completes),\n  // automatically fetch the source. Skipped on mount.\n  useEffect(() => {\n    if (!hasMounted.current) {\n      hasMounted.current = true\n      return\n    }\n\n    if (paymentStatus === 'paid') {\n      void fetchSource()\n    }\n  }, [paymentStatus, fetchSource])\n\n  const handleUnlockClick = useCallback(() => {\n    if (paymentStatus === 'paid') {\n      void fetchSource()\n    } else {\n      onUnlockClick?.()\n    }\n  }, [paymentStatus, onUnlockClick, fetchSource])\n\n  let mediaPreview: React.ReactNode\n  if (sourceType === 'image') {\n    mediaPreview = (\n      <ImagePreview\n        key={source?.sourceUrl}\n        sourceUrl={source?.sourceUrl}\n        thumbnailUrl={thumbnailUrl}\n        mimeType={mimeType}\n        title={title}\n        LockIcon={LockIcon}\n      />\n    )\n  } else if (sourceType === 'document') {\n    mediaPreview = (\n      <ThumbnailPreview\n        key={source?.sourceUrl}\n        thumbnailUrl={thumbnailUrl}\n        mimeType={mimeType}\n        LockIcon={LockIcon}\n      />\n    )\n  } else {\n    mediaPreview = (\n      <MediaPreview\n        key={source?.sourceUrl}\n        sourceUrl={source?.sourceUrl}\n        thumbnailUrl={thumbnailUrl}\n        mimeType={mimeType}\n        LockIcon={LockIcon}\n      />\n    )\n  }\n\n  return (\n    <div className=\"w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]\">\n      {mediaPreview}\n      <div className=\"px-4 pb-3 pt-3\">\n        <p className=\"mb-1.5 truncate text-base font-medium text-black\">\n          {title}\n        </p>\n        <div className=\"flex items-center gap-1\">\n          {renderTypeIcon(mimeType, {\n            className: 'size-5 shrink-0 text-black/55',\n            weight: 'regular',\n          })}\n          {detail != null ? (\n            <span className=\"text-xs font-medium text-black/55\">{detail}</span>\n          ) : null}\n          {paymentStatus === 'paid' ? (\n            <>\n              <span className=\"text-xs font-medium text-black/55\">•</span>\n              <span className=\"text-xs font-medium text-[#008236]\">\n                Purchased\n              </span>\n              <CheckCircleIcon\n                className=\"size-4 text-[#008236]\"\n                weight=\"bold\"\n              />\n            </>\n          ) : amountText != null ? (\n            <>\n              <span className=\"text-xs font-medium text-black/55\">•</span>\n              <span className=\"text-xs font-medium text-black/55\">\n                {amountText}\n              </span>\n            </>\n          ) : null}\n        </div>\n        <CardActions\n          isLocked={isLocked}\n          isUnlocking={isUnlocking}\n          sourceUrl={source?.sourceUrl}\n          redeemUrl={source?.redeemUrl}\n          onUnlockClicked={handleUnlockClick}\n          onDownloadClicked={onDownloadClick}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default VisitorCard\n"],"names":["CardActions","props","isLocked","isUnlocking","sourceUrl","redeemUrl","onUnlockClicked","onDownloadClicked","jsx","LoadingDots","jsxs","React","LockSimpleIcon","DownloadSimpleIcon","ThumbnailPreview","thumbnailUrl","mimeType","LockIcon","LockOverlay","Icon","ImagePreview","title","sourceReady","setSourceReady","useState","MediaPreview","MediaPlayer","getLockIcon","paymentStatus","LockOpenIcon","VisitorCard","amountText","detail","onUnlockClick","onFetchSource","onDownloadClick","source","setSource","hasMounted","useRef","fetchingRef","onFetchSourceRef","sourceType","getSourceType","fetchSource","useCallback","result","_a","useEffect","handleUnlockClick","mediaPreview","renderTypeIcon","Fragment","CheckCircleIcon"],"mappings":"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"}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import { EmptyStateIndicatorProps } from 'stream-chat-react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LocalMessage } from 'stream-chat';
 import { MessagingUser } from '@linktr.ee/messaging-core';
+import { Provider } from 'react';
 import { SendMessageAPIResponse } from 'stream-chat';
 import { StreamChat } from 'stream-chat';
 import { StreamChatService } from '@linktr.ee/messaging-core';
@@ -111,7 +112,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage' | 'onAttachmentUnlockClick' | 'onAttachmentDownloadClick' | 'onAttachmentUnlocked'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage'>;
 
 /**
  * ChannelView component props
@@ -216,24 +217,9 @@ export declare interface ChannelViewProps {
      * )}
      */
     renderMessage?: (messageNode: React.ReactElement, message: LocalMessage) => React.ReactNode;
-    /**
-     * Called when the visitor clicks Unlock on a locked attachment card.
-     * Fire-and-forget; host is responsible for opening checkout and tracking unlock state.
-     */
-    onAttachmentUnlockClick?: (message: LocalMessage, channel: Channel) => void;
-    /**
-     * Called when the visitor clicks Download on an unlocked attachment card.
-     */
-    onAttachmentDownloadClick?: (message: LocalMessage, channel: Channel) => void;
-    /**
-     * Returns the current unlock state for a given message ID.
-     * Called by CustomMessage on each render to drive controlled props on LockedAttachment.
-     * Host owns sourceUrl / redeemUrl state.
-     */
-    onAttachmentUnlocked?: (message: LocalMessage, channel: Channel) => LockedAttachmentSource;
 }
 
-declare interface CreatorCardProps extends LockedAttachmentBaseProps {
+export declare interface CreatorCardProps extends LockedAttachmentBaseProps {
     isPreview?: boolean;
     placeholderTitle?: string;
     placeholderAmountText?: string;
@@ -241,6 +227,12 @@ declare interface CreatorCardProps extends LockedAttachmentBaseProps {
     onDismiss?: () => void;
 }
 
+export declare const CustomMessageProvider: Provider<Partial<CustomMessageRegistry>>;
+
+export declare interface CustomMessageRegistry {
+    LockedAttachment: LockedAttachmentContextValue;
+}
+
 declare type DmAgentSystemType = 'SYSTEM_DM_AGENT_PAUSED' | 'SYSTEM_DM_AGENT_RESUMED';
 
 export declare interface Faq {
@@ -278,18 +270,26 @@ export declare interface FaqListProps {
  */
 export declare const formatRelativeTime: (date: Date) => string;
 
-export declare const LockedAttachment: (props: LockedAttachmentProps) => JSX_2.Element;
+export declare const LockedAttachment: {
+    Creator: (props: CreatorCardProps) => JSX_2.Element;
+    Visitor: (props: VisitorCardProps) => JSX_2.Element;
+};
 
 declare interface LockedAttachmentBaseProps {
-    mimeType: string;
     title?: string;
+    mimeType?: string;
     thumbnailUrl?: string;
     detail?: string;
     amountText?: string;
     paymentStatus?: PaymentStatus;
 }
 
-export declare type LockedAttachmentProps = (CreatorCardProps & Never<VisitorCardProps, 'onUnlockClick' | 'onDownloadClick' | 'onUnlocked'>) | (VisitorCardProps & Never<CreatorCardProps, 'isPreview' | 'placeholderTitle' | 'placeholderAmountText' | 'sourceUrl' | 'onDismiss'>);
+export declare interface LockedAttachmentContextValue {
+    isUnlocking: (id: string) => boolean;
+    onUnlockClick?: (message: LocalMessage, channel: Channel) => void;
+    onDownloadClick?: (message: LocalMessage, channel: Channel) => void;
+    onFetchSource?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource | void>;
+}
 
 export declare interface LockedAttachmentSource {
     /** Proxied URL used by the media player for in-app playback. */
@@ -427,10 +427,6 @@ export declare interface MessagingShellProps extends ChannelViewPassthroughProps
     renderMessagePreview?: (message: LocalMessage | undefined, defaultPreview?: string) => React.ReactNode;
 }
 
-declare type Never<T, K extends keyof T = keyof T> = {
-    [P in K]?: never;
-};
-
 /**
  * Generic participant interface for different host environments
  */
@@ -485,6 +481,8 @@ export declare interface ParticipantSource {
  */
 declare type PaymentStatus = 'pending' | 'paid' | 'failed' | 'refunded';
 
+export declare function useCustomMessage<K extends keyof CustomMessageRegistry>(key: K): CustomMessageRegistry[K];
+
 /**
  * Hook that wraps Stream Chat reactions to provide toggle-style
  * upvote/downvote behavior on a message.
@@ -524,22 +522,29 @@ export declare const useParticipants: (participantSource: ParticipantSource, opt
     refresh: () => void;
 };
 
-declare interface VisitorCardProps extends LockedAttachmentBaseProps {
+export declare interface VisitorCardProps extends LockedAttachmentBaseProps {
     /**
-     * Called when the visitor clicks Unlock. Omit to hide the Unlock button.
+     * Called when the visitor clicks Unlock on an unpaid attachment.
+     * Use this to open a checkout flow. Omit to hide the Unlock button.
      */
     onUnlockClick?: () => void;
+    /**
+     * Called to fetch the attachment source — fired automatically when
+     * paymentStatus transitions to 'paid', or immediately on click when
+     * paymentStatus is already 'paid'. Return a LockedAttachmentSource to
+     * unlock the card.
+     */
+    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
     /**
      * Called when the visitor clicks Download on an unlocked card.
      * Omit to hide the Download button.
      */
     onDownloadClick?: () => void;
     /**
-     * Returns current unlock state — sourceUrl (for playback) and redeemUrl (for download).
-     * Bound to the message by the host before being passed down,
-     * so this component receives no Stream Chat types.
+     * When true, shows loading dots on the Unlock button.
+     * Driven by the LockedAttachmentContext (e.g. checkout in progress, payment processing).
      */
-    onUnlocked?: () => LockedAttachmentSource;
+    isUnlocking?: boolean;
 }
 
 export declare type VoteSelection = 'up' | 'down' | null;