@linktr.ee/messaging-react 3.8.1 → 3.9.0-rc-1783407048

package/dist/Card-D8yiJ8Uw.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("@phosphor-icons/react"),T=require("react"),s=require("./usePreviewToggle-DXQT07ws.cjs"),u=require("./TextShell-Bnzh0T75.cjs"),z=({text:t,amountText:i,placeholderAmountText:n,onDismiss:r})=>e.jsxs(u.TextShell,{children:[e.jsx("div",{className:"pr-8",children:t}),e.jsx(u.PriceLockRow,{children:e.jsx("span",{className:i?"text-white/55":"text-white/30",children:i||n})}),r&&e.jsx("button",{type:"button",onClick:r,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:e.jsx(a.XIcon,{className:"size-3",weight:"bold"})})]}),B=({title:t,mimeType:i="application/octet-stream",thumbnailUrl:n,detail:r,amountText:o,placeholderTitle:m="Attachment title",placeholderAmountText:g,gallery:l=[],onDismiss:c,onPreviewClick:j,onFetchSource:w,onEditClick:d})=>{const h=s.isGalleryCard(l),{source:b,isPreviewVisible:v,isLoadingPreview:f,togglePreview:p}=s.usePreviewToggle({isGallery:h,onFetchSource:w,onPreviewClick:j}),x=!v,y=f,C=e.jsxs(T.Fragment,{children:[e.jsx("span",{className:"text-xs font-medium text-white/55",children:"•"}),e.jsx("span",{className:o?"text-xs font-medium text-white/55":"text-xs font-medium text-white/30",children:o||g})]}),P=c?e.jsx("button",{type:"button",onClick:k=>{k.stopPropagation(),c()},className:"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white","aria-label":"Dismiss attachment",children:e.jsx(a.XIcon,{className:"size-3",weight:"bold"})}):void 0,N=d?e.jsx("button",{type:"button",onClick:d,"aria-label":"Edit attachment",className:"flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15",children:e.jsx(a.PencilSimpleIcon,{className:"size-5",weight:"regular"})}):void 0;return e.jsxs(s.MediaShell,{variant:"dark",children:[e.jsx(s.PreviewToggle,{onToggle:p,isBusy:y,isPreviewVisible:!x,children:e.jsx(s.CardThumbnail,{variant:"dark",gallery:l,title:t,showLocked:x,mimeType:i,thumbnailUrl:n,source:b,topRight:P})}),e.jsx(s.CardBody,{variant:"dark",title:t,placeholderTitle:m,mimeType:i,detail:r,statusBadge:C,icon:h?s.galleryBodyIcon("dark"):void 0,trailingAction:N})]})},S=t=>t.contentType==="text"?e.jsx(z,{...t}):e.jsx(B,{...t});exports.default=S;
+//# sourceMappingURL=Card-D8yiJ8Uw.cjs.map

package/dist/Card-D8yiJ8Uw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-D8yiJ8Uw.cjs","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 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>\n    <div className=\"pr-8\">{text}</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","TextShell","jsx","PriceLockRow","XIcon","ComposerMediaCard","title","mimeType","thumbnailUrl","detail","placeholderTitle","gallery","onPreviewClick","onFetchSource","onEditClick","isGallery","isGalleryCard","source","isPreviewVisible","isLoadingPreview","togglePreview","usePreviewToggle","showLocked","isBusy","statusBadge","jsxs","React","dismissButton","e","editButton","PencilSimpleIcon","MediaShell","PreviewToggle","CardThumbnail","CardBody","galleryBodyIcon","ComposerCard","props"],"mappings":"8PAoDMA,EAAgD,CAAC,CACrD,KAAAC,EACA,WAAAC,EACA,sBAAAC,EACA,UAAAC,CACF,WACGC,YAAA,CACC,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,UAAU,OAAQ,SAAAL,EAAK,EAC5BK,EAAAA,IAACC,EAAAA,aAAA,CACC,SAAAD,EAAAA,IAAC,OAAA,CAAK,UAAWJ,EAAa,gBAAkB,gBAC7C,SAAAA,GAAcC,CAAA,CACjB,CAAA,CACF,EACCC,GACCE,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,QAASF,EACT,UAAU,gIACV,aAAW,qBAEX,SAAAE,EAAAA,IAACE,QAAA,CAAM,UAAU,SAAS,OAAO,MAAA,CAAO,CAAA,CAAA,CAC1C,EAEJ,EAQIC,EAAiD,CAAC,CACtD,MAAAC,EACA,SAAAC,EAAW,2BACX,aAAAC,EACA,OAAAC,EACA,WAAAX,EACA,iBAAAY,EAAmB,mBACnB,sBAAAX,EACA,QAAAY,EAAU,CAAA,EACV,UAAAX,EACA,eAAAY,EACA,cAAAC,EACA,YAAAC,CACF,IAAM,CACJ,MAAMC,EAAYC,EAAAA,cAAcL,CAAO,EAIjC,CAAE,OAAAM,EAAQ,iBAAAC,EAAkB,iBAAAC,EAAkB,cAAAC,CAAA,EAClDC,EAAAA,iBAAiB,CAAE,UAAAN,EAAW,cAAAF,EAAe,eAAAD,EAAgB,EAEzDU,EAAa,CAACJ,EACdK,EAASJ,EAETK,EACJC,EAAAA,KAACC,EAAM,SAAN,CACC,SAAA,CAAAxB,EAAAA,IAAC,OAAA,CAAK,UAAU,oCAAoC,SAAA,IAAM,EAC1DA,EAAAA,IAAC,OAAA,CACC,UACEJ,EACI,oCACA,oCAGL,SAAAA,GAAcC,CAAA,CAAA,CACjB,EACF,EAGI4B,EAAgB3B,EACpBE,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,QAAU0B,GAAM,CAGdA,EAAE,gBAAA,EACF5B,EAAA,CACF,EACA,UAAU,+EACV,aAAW,qBAEX,SAAAE,EAAAA,IAACE,QAAA,CAAM,UAAU,SAAS,OAAO,MAAA,CAAO,CAAA,CAAA,EAExC,OAEEyB,EAAaf,EACjBZ,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,QAASY,EACT,aAAW,kBACX,UAAU,iGAEV,SAAAZ,EAAAA,IAAC4B,mBAAA,CAAiB,UAAU,SAAS,OAAO,SAAA,CAAU,CAAA,CAAA,EAEtD,OAEJ,OACEL,EAAAA,KAACM,EAAAA,WAAA,CAAW,QAAQ,OAClB,SAAA,CAAA7B,EAAAA,IAAC8B,EAAAA,cAAA,CACC,SAAUZ,EACV,OAAAG,EACA,iBAAkB,CAACD,EAEnB,SAAApB,EAAAA,IAAC+B,EAAAA,cAAA,CACC,QAAQ,OACR,QAAAtB,EACA,MAAAL,EACA,WAAAgB,EACA,SAAAf,EACA,aAAAC,EACA,OAAAS,EACA,SAAUU,CAAA,CAAA,CACZ,CAAA,EAGFzB,EAAAA,IAACgC,EAAAA,SAAA,CACC,QAAQ,OACR,MAAA5B,EACA,iBAAAI,EACA,SAAAH,EACA,OAAAE,EACA,YAAAe,EACA,KAAMT,EAAYoB,kBAAgB,MAAM,EAAI,OAC5C,eAAgBN,CAAA,CAAA,CAClB,EACF,CAEJ,EAUMO,EAA6CC,GACjDA,EAAM,cAAgB,OACpBnC,EAAAA,IAACN,EAAA,CAAkB,GAAGyC,CAAA,CAAO,EAE7BnC,EAAAA,IAACG,EAAA,CAAmB,GAAGgC,CAAA,CAAO"}

package/dist/Card-DSG-wR8t.js

@@ -0,0 +1,96 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { LockSimpleIcon as u } from "@phosphor-icons/react";
+import { T as s, P as t } from "./TextShell-BiqF2UB0.js";
+import { P as o } from "./PurchaseStatusBadge-CJH4S-8Z.js";
+import h from "classnames";
+const c = ({ cx: i, index: a }) => /* @__PURE__ */ e("circle", { cx: i, cy: "6.15", r: "2.4", fill: "currentColor", children: /* @__PURE__ */ e(
+  "animateTransform",
+  {
+    attributeName: "transform",
+    type: "translate",
+    values: "0 0; 0 -2.25; 0 0;",
+    dur: "900ms",
+    begin: `${120 * a}ms`,
+    repeatCount: "indefinite"
+  }
+) }), p = ({ className: i }) => /* @__PURE__ */ r(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className: i,
+    viewBox: "0 0 20 12.3",
+    width: "20",
+    height: "13",
+    overflow: "visible",
+    children: [
+      /* @__PURE__ */ e(c, { cx: "3", index: 0 }),
+      /* @__PURE__ */ e(c, { cx: "10", index: 1 }),
+      /* @__PURE__ */ e(c, { cx: "17", index: 2 })
+    ]
+  }
+), m = ({
+  variant: i = "dark",
+  animate: a = !0
+}) => {
+  const n = a ? "animate-pulse motion-reduce:animate-none" : "", l = i === "dark" ? "bg-white/25" : "bg-black/15";
+  return /* @__PURE__ */ r("div", { className: "flex flex-col gap-2 str-chat__message-text my-1", "aria-hidden": !0, children: [
+    /* @__PURE__ */ e("div", { className: h("h-3 w-40 rounded-full", n, l) }),
+    /* @__PURE__ */ e("div", { className: h("h-3 w-24 rounded-full", n, l) })
+  ] });
+}, x = ({
+  amountText: i,
+  paymentStatus: a = "pending",
+  children: n
+}) => {
+  const l = a === "failed";
+  return a === "paid" && n ? /* @__PURE__ */ r(s, { children: [
+    n,
+    /* @__PURE__ */ e("span", { className: "sr-only", "aria-live": "polite", children: "Sold." }),
+    /* @__PURE__ */ r(t, { children: [
+      i != null && /* @__PURE__ */ e("span", { className: "text-white/55", children: i }),
+      /* @__PURE__ */ e(o, { isMine: !0, paymentStatus: a })
+    ] })
+  ] }) : /* @__PURE__ */ r(s, { children: [
+    /* @__PURE__ */ e(m, { variant: "dark", animate: a === "pending" }),
+    /* @__PURE__ */ e("span", { className: "sr-only", "aria-live": "polite", children: l ? "Payment failed." : a === "refunded" ? "Refunded." : "Payment pending." }),
+    /* @__PURE__ */ r(t, { children: [
+      i != null && /* @__PURE__ */ e("span", { className: "text-white/55", children: i }),
+      /* @__PURE__ */ e(o, { isMine: !0, paymentStatus: a })
+    ] })
+  ] });
+}, v = ({
+  amountText: i,
+  paymentStatus: a,
+  onUnlockClick: n,
+  isUnlocking: l = !1,
+  children: d
+}) => a === "paid" && d ? /* @__PURE__ */ r(s, { children: [
+  d,
+  /* @__PURE__ */ r(t, { children: [
+    i != null && /* @__PURE__ */ e("span", { className: "opacity-55", children: i }),
+    /* @__PURE__ */ e(o, { isMine: !1, paymentStatus: "paid" })
+  ] })
+] }) : /* @__PURE__ */ e(s, { children: /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+  /* @__PURE__ */ r("div", { className: "flex flex-1 flex-col gap-2", children: [
+    /* @__PURE__ */ e(m, { variant: "light", animate: l }),
+    /* @__PURE__ */ e("span", { className: "sr-only", "aria-live": "polite", children: l ? "Unlocking." : "Locked message available to unlock." }),
+    /* @__PURE__ */ e(t, { children: i != null && /* @__PURE__ */ e("span", { className: "opacity-55", children: i }) })
+  ] }),
+  /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: n,
+      disabled: l,
+      "aria-label": l ? "Unlocking" : "Unlock",
+      "aria-busy": l,
+      title: l ? "Unlocking" : "Unlock",
+      className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]",
+      children: l ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(u, { className: "size-4", weight: "fill", "aria-hidden": !0 })
+    }
+  )
+] }) }), y = (i) => i.isMine ? /* @__PURE__ */ e(x, { ...i }) : /* @__PURE__ */ e(v, { ...i });
+export {
+  y as default
+};
+//# sourceMappingURL=Card-DSG-wR8t.js.map

package/dist/Card-DSG-wR8t.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-DSG-wR8t.js","sources":["../src/components/LockedAttachment/components/_shared/LoadingDots.tsx","../src/components/LockedAttachment/components/_shared/SkeletonTextLines.tsx","../src/components/LockedAttachment/components/Text/Card.tsx"],"sourcesContent":["import React from 'react'\n\nconst Dot = ({ cx, index }: { cx: string; index: number }) => (\n  <circle cx={cx} cy=\"6.15\" r=\"2.4\" fill=\"currentColor\">\n    <animateTransform\n      attributeName=\"transform\"\n      type=\"translate\"\n      values=\"0 0; 0 -2.25; 0 0;\"\n      dur=\"900ms\"\n      begin={`${120 * index}ms`}\n      repeatCount=\"indefinite\"\n    />\n  </circle>\n)\n\n/**\n * Three bouncing dots, inline-sized for use inside buttons/labels (e.g. the\n * Unlock CTA while a purchase is in flight). Mirrors the typing indicator's\n * animation but uses `currentColor` so it adopts the surrounding text color.\n */\nconst LoadingDots: React.FC<{ className?: string }> = ({ className }) => (\n  <svg\n    aria-hidden=\"true\"\n    className={className}\n    viewBox=\"0 0 20 12.3\"\n    width=\"20\"\n    height=\"13\"\n    overflow=\"visible\"\n  >\n    <Dot cx=\"3\" index={0} />\n    <Dot cx=\"10\" index={1} />\n    <Dot cx=\"17\" index={2} />\n  </svg>\n)\n\nexport default LoadingDots\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport interface SkeletonTextLinesProps {\n  /** Matches the bubble it sits in — \"dark\" for the sender's own bubble. */\n  variant: 'light' | 'dark'\n  /**\n   * Whether the bars pulse. Pass `false` once the outcome is settled (paid,\n   * failed, refunded) — a static skeleton reads as \"nothing more will\n   * change\", while a pulsing one implies something is still in flight.\n   */\n  animate: boolean\n}\n\n/**\n * Two skeleton bars standing in for the redacted text of a paid text-only\n * message — the real content is never sent to the client until purchase, so\n * there's nothing to render yet.\n *\n * Uses explicit black/white (not `bg-current`) because Tailwind doesn't\n * support opacity modifiers on the `current` color — `bg-current/30` silently\n * produces no CSS rule at all.\n */\nconst SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({\n  variant = 'dark',\n  animate = true,\n}) => {\n  const pulse = animate ? 'animate-pulse motion-reduce:animate-none' : ''\n  const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'\n\n  return (\n    <div className=\"flex flex-col gap-2 str-chat__message-text my-1\" aria-hidden>\n      <div className={classNames('h-3 w-40 rounded-full', pulse, colour)} />\n      <div className={classNames('h-3 w-24 rounded-full', pulse, colour)} />\n    </div>\n  )\n}\n\nexport default SkeletonTextLines\n","import { LockSimpleIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\nimport type { PaymentStatus } from '../../types'\nimport LoadingDots from '../_shared/LoadingDots'\nimport PriceLockRow from '../_shared/PriceLockRow'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport SkeletonTextLines from '../_shared/SkeletonTextLines'\nimport TextShell from '../_shared/TextShell'\n\ninterface TextCardSharedProps {\n  amountText?: string\n  paymentStatus?: PaymentStatus\n  /**\n   * The message's real, revealed content — shown instead of the skeleton\n   * loader once `paymentStatus` is `'paid'`. Ignored otherwise. Lets the\n   * caller supply its own text renderer (e.g. Stream's `MessageText`)\n   * without `LockedAttachment` depending on it.\n   */\n  children?: React.ReactNode\n}\n\nexport type TextCardProps =\n  | (TextCardSharedProps & {\n      isMine: true\n    })\n  | (TextCardSharedProps & {\n      isMine: false\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       * When true, shows a loading spinner on the Unlock button. Driven by\n       * the LockedAttachmentContext (e.g. checkout in progress).\n       */\n      isUnlocking?: boolean\n    })\n\n/**\n * The sender's ('mine') view of a paid text-only message: an outgoing chat\n * bubble showing a skeleton text loader in place of the redacted content (or\n * `children`, once paid), plus a lock/price/status row.\n */\nconst OwnTextCard: React.FC<TextCardSharedProps & { isMine: true }> = ({\n  amountText,\n  paymentStatus = 'pending',\n  children,\n}) => {\n  const isFailed = paymentStatus === 'failed'\n  const isPaid = paymentStatus === 'paid'\n\n  if (isPaid && children) {\n    return (\n      <TextShell>\n        {children}\n        <span className=\"sr-only\" aria-live=\"polite\">\n          Sold.\n        </span>\n        <PriceLockRow>\n          {amountText != null && (\n            <span className=\"text-white/55\">{amountText}</span>\n          )}\n          <PurchaseStatusBadge isMine={true} paymentStatus={paymentStatus} />\n        </PriceLockRow>\n      </TextShell>\n    )\n  }\n\n  const liveMessage = isFailed\n    ? 'Payment failed.'\n    : paymentStatus === 'refunded'\n      ? 'Refunded.'\n      : 'Payment pending.'\n\n  return (\n    <TextShell>\n      <SkeletonTextLines variant=\"dark\" animate={paymentStatus === 'pending'} />\n      <span className=\"sr-only\" aria-live=\"polite\">\n        {liveMessage}\n      </span>\n      <PriceLockRow>\n        {amountText != null && (\n          <span className=\"text-white/55\">{amountText}</span>\n        )}\n        <PurchaseStatusBadge isMine={true} paymentStatus={paymentStatus} />\n      </PriceLockRow>\n    </TextShell>\n  )\n}\n\n/**\n * The recipient's ('other') view of a paid text-only message: a plain chat\n * bubble whose content is a skeleton text loader (or `children`, once paid)\n * plus a lock/price/status row. Two pre-purchase states exist — idle and\n * unlocking (checkout in flight) — plus the revealed state once\n * `paymentStatus` is `'paid'`.\n */\nconst OtherTextCard: React.FC<\n  TextCardSharedProps & {\n    isMine: false\n    onUnlockClick?: () => void\n    isUnlocking?: boolean\n  }\n> = ({\n  amountText,\n  paymentStatus,\n  onUnlockClick,\n  isUnlocking = false,\n  children,\n}) => {\n  const isPaid = paymentStatus === 'paid'\n\n  if (isPaid && children) {\n    return (\n      <TextShell>\n        {children}\n        <PriceLockRow>\n          {amountText != null && (\n            <span className=\"opacity-55\">{amountText}</span>\n          )}\n          <PurchaseStatusBadge isMine={false} paymentStatus=\"paid\" />\n        </PriceLockRow>\n      </TextShell>\n    )\n  }\n\n  const ariaLabel = isUnlocking\n    ? 'Unlocking.'\n    : 'Locked message available to unlock.'\n\n  return (\n    <TextShell>\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex flex-1 flex-col gap-2\">\n          <SkeletonTextLines variant=\"light\" animate={isUnlocking} />\n          <span className=\"sr-only\" aria-live=\"polite\">\n            {ariaLabel}\n          </span>\n          <PriceLockRow>\n            {amountText != null && (\n              <span className=\"opacity-55\">{amountText}</span>\n            )}\n          </PriceLockRow>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onUnlockClick}\n          disabled={isUnlocking}\n          aria-label={isUnlocking ? 'Unlocking' : 'Unlock'}\n          aria-busy={isUnlocking}\n          title={isUnlocking ? 'Unlocking' : 'Unlock'}\n          className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]\"\n        >\n          {isUnlocking ? (\n            <LoadingDots />\n          ) : (\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" aria-hidden />\n          )}\n        </button>\n      </div>\n    </TextShell>\n  )\n}\n\n/**\n * The card either party sees for a paid text-only message — a chat bubble\n * showing a skeleton text loader (or `children`, once revealed) plus a\n * lock/price/status row. `isMine` selects the sender's payment-lifecycle view\n * (pending/failed/refunded/paid + Dismiss) vs. the recipient's unlock-flow\n * view (idle/unlocking + Unlock CTA).\n */\nconst TextCard: React.FC<TextCardProps> = (props) =>\n  props.isMine ? <OwnTextCard {...props} /> : <OtherTextCard {...props} />\n\nexport default TextCard\n"],"names":["Dot","cx","index","jsx","LoadingDots","className","jsxs","SkeletonTextLines","variant","animate","pulse","colour","classNames","OwnTextCard","amountText","paymentStatus","children","isFailed","TextShell","PriceLockRow","PurchaseStatusBadge","OtherTextCard","onUnlockClick","isUnlocking","LockSimpleIcon","TextCard","props"],"mappings":"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"}

package/dist/Card-DVfSiq9b.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("classnames");const C=require("@phosphor-icons/react"),v=require("react"),M=require("./index-DwUOvMxg.cjs"),s=require("./usePreviewToggle-DXQT07ws.cjs"),y=require("./PurchaseStatusBadge-UjDzZhLj.cjs");function p({paymentStatus:r,onFetchSource:l,onUnlockClick:o}){const[t,d]=v.useState(),i=v.useRef(null),n=v.useRef(!1),u=v.useRef(l);u.current=l;const h=v.useCallback(async()=>{var a;if(!n.current){n.current=!0;try{const c=await((a=u.current)==null?void 0:a.call(u));c&&d(c)}finally{n.current=!1}}},[]),g=v.useCallback(()=>{r==="paid"?h():o==null||o()},[r,h,o]);return v.useEffect(()=>{if(!i.current||r!=="paid"||t!==void 0)return;const a=new IntersectionObserver(([c])=>{c.isIntersecting&&(h(),a.disconnect())},{threshold:1});return a.observe(i.current),()=>a.disconnect()},[r,t,h]),{source:t,cardRef:i,handleUnlockClick:g}}const 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",I=({isLocked:r,sourceUrl:l,redeemUrl:o,onUnlockClicked:t,onDownloadClicked:d,isUnlocking:i=!1})=>{if(r&&t!=null)return e.jsx("button",{type:"button",onClick:t,disabled:i,className:P,children:i?e.jsx("span",{className:"size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"}):e.jsxs(v.Fragment,{children:[e.jsx(C.LockSimpleIcon,{className:"size-4",weight:"fill"}),"Unlock"]})});if(!r&&d!=null){const n=o??l;return n!=null?e.jsxs("a",{href:n,target:"_blank",rel:"noopener noreferrer",onClick:d,className:`${P} !text-white`,children:[e.jsx(C.DownloadSimpleIcon,{className:"size-4",weight:"bold"}),"Download"]}):e.jsxs("button",{type:"button",onClick:d,className:P,children:[e.jsx(C.DownloadSimpleIcon,{className:"size-4",weight:"bold"}),"Download"]})}return null},S=({title:r,mimeType:l="application/octet-stream",thumbnailUrl:o,detail:t,amountText:d,placeholderTitle:i="Attachment title",paymentStatus:n="pending",gallery:u=[],onPreviewClick:h,onFetchSource:g})=>{const a=s.isGalleryCard(u),{source:c,isPreviewVisible:f,isLoadingPreview:b,togglePreview:j}=s.usePreviewToggle({isGallery:a,onFetchSource:g,onPreviewClick:h}),x=!f,w=b;return e.jsxs(s.MediaShell,{variant:"dark",children:[e.jsx(s.PreviewToggle,{onToggle:j,isBusy:w,isPreviewVisible:!x,children:e.jsx(s.CardThumbnail,{variant:"dark",gallery:u,title:r,showLocked:x,paymentStatus:n,mimeType:l,thumbnailUrl:o,source:c})}),e.jsx(s.CardBody,{variant:"dark",title:r,placeholderTitle:i,mimeType:l,detail:t,statusBadge:e.jsx(y.PurchaseStatusBadge,{isMine:!0,paymentStatus:n,amountText:d}),icon:a?s.galleryBodyIcon("dark"):void 0})]})},k=({title:r,amountText:l,thumbnailUrl:o,mimeType:t="application/octet-stream",detail:d,gallery:i=[],onUnlockClick:n,onFetchSource:u,onDownloadClick:h,paymentStatus:g,isUnlocking:a=!1})=>{const c=s.isGalleryCard(i),{source:f,cardRef:b,handleUnlockClick:j}=p({paymentStatus:g,onFetchSource:u,onUnlockClick:n}),x=f==null?void 0:f.sourceUrl,w=f==null?void 0:f.redeemUrl,m=c?g!=="paid":x===void 0,R=M.getSourceType(t),B=c?void 0:x;return e.jsxs(s.MediaShell,{variant:"light",rootRef:b,"data-testid":"locked-attachment",children:[e.jsx(s.CardThumbnail,{variant:"light",gallery:i,title:r,showLocked:m,paymentStatus:g,mimeType:t,thumbnailUrl:o,source:f,containedImage:!m&&(R==="image"||R==="document")}),e.jsx(s.CardBody,{variant:"light",title:r,mimeType:t,detail:d,statusBadge:e.jsx(y.PurchaseStatusBadge,{isMine:!1,paymentStatus:g,amountText:l}),icon:c?s.galleryBodyIcon("light"):void 0,action:e.jsx(I,{isLocked:m,isUnlocking:a,sourceUrl:B,redeemUrl:w,onUnlockClicked:j,onDownloadClicked:h})})]})},q=r=>r.isMine?e.jsx(S,{...r}):e.jsx(k,{...r});exports.default=q;
+//# sourceMappingURL=Card-DVfSiq9b.cjs.map

package/dist/Card-DVfSiq9b.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-DVfSiq9b.cjs","sources":["../src/components/LockedAttachment/components/_shared/useReceivedSource.ts","../src/components/LockedAttachment/components/Media/CardActions.tsx","../src/components/LockedAttachment/components/Media/Card.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type {\n  FetchSourceHandler,\n  LockedAttachmentSource,\n  PaymentStatus,\n} from '../../types'\n\nexport interface UseReceivedSourceOptions {\n  paymentStatus?: PaymentStatus\n  onFetchSource?: FetchSourceHandler\n  /** Called on Unlock click while the card is still unpaid (opens checkout). */\n  onUnlockClick?: () => void\n}\n\nexport interface UseReceivedSourceResult {\n  source: LockedAttachmentSource | undefined\n  /** Attach to the card root so the paid-source auto-fetch can observe it. */\n  cardRef: React.RefObject<HTMLDivElement>\n  /** Fetches the source when already paid, else defers to `onUnlockClick`. */\n  handleUnlockClick: () => void\n}\n\n/**\n * Media !isMine's source-reveal logic: unlike Composer/Media isMine's\n * tap-to-toggle (`usePreviewToggle`), the recipient's card reveals its source\n * by fetching once — on click when already paid, or automatically the first\n * time a paid card scrolls fully into view. The fetch is guarded so it runs\n * at most once in flight.\n */\nexport function useReceivedSource({\n  paymentStatus,\n  onFetchSource,\n  onUnlockClick,\n}: UseReceivedSourceOptions): UseReceivedSourceResult {\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 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  return { source, cardRef, handleUnlockClick }\n}\n","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 type React from 'react'\n\nimport { getSourceType } from '../../../AttachmentCard'\nimport type {\n  FetchSourceHandler,\n  LockedAttachmentGalleryItem,\n  PaymentStatus,\n} 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 PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport { usePreviewToggle } from '../_shared/usePreviewToggle'\nimport { useReceivedSource } from '../_shared/useReceivedSource'\n\nimport ReceivedCardActions from './CardActions'\n\ninterface MediaCardSharedProps {\n  title?: string\n  mimeType?: string\n  thumbnailUrl?: string\n  detail?: string\n  amountText?: string\n  paymentStatus?: PaymentStatus\n  gallery?: LockedAttachmentGalleryItem[]\n  onFetchSource?: FetchSourceHandler\n}\n\nexport type MediaCardProps =\n  | (MediaCardSharedProps & {\n      isMine: true\n      /** Dimmed fallback shown in the title slot when `title` is unset. */\n      placeholderTitle?: string\n      /** Fired the first time the sender taps the thumbnail to preview their own attachment. */\n      onPreviewClick?: () => void\n    })\n  | (MediaCardSharedProps & {\n      isMine: false\n      /**\n       * When true, shows a loading spinner on the Unlock button. Driven by\n       * the LockedAttachmentContext (e.g. checkout in progress).\n       */\n      isUnlocking?: boolean\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 when the recipient clicks Download on an unlocked card.\n       * Omit to hide the Download button.\n       */\n      onDownloadClick?: () => void\n    })\n\n/**\n * The sender's ('mine') view of a paid media attachment: the locked\n * thumbnail (single or gallery) they can tap to preview their own\n * attachment, plus the title/purchase-status body.\n */\nconst OwnMediaCard: React.FC<\n  MediaCardSharedProps & {\n    isMine: true\n    placeholderTitle?: string\n    onPreviewClick?: () => void\n  }\n> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  paymentStatus = 'pending',\n  gallery = [],\n  onPreviewClick,\n  onFetchSource,\n}) => {\n  const isGallery = isGalleryCard(gallery)\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 { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\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          paymentStatus={paymentStatus}\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          source={source}\n        />\n      </PreviewToggle>\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={true}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('dark') : undefined}\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The recipient's ('other') view of a paid media attachment: the locked\n * thumbnail (single or gallery) with an Unlock/Download CTA. The source is\n * revealed by fetching once — on click when already paid, or automatically\n * the first time a paid card scrolls into view.\n */\nconst OtherMediaCard: React.FC<\n  MediaCardSharedProps & {\n    isMine: false\n    onUnlockClick?: () => void\n    onDownloadClick?: () => void\n    isUnlocking?: boolean\n  }\n> = ({\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 = isGalleryCard(gallery)\n\n  const { source, cardRef, handleUnlockClick } = useReceivedSource({\n    paymentStatus,\n    onFetchSource,\n    onUnlockClick,\n  })\n\n  const effectiveSourceUrl = source?.sourceUrl\n  const effectiveRedeemUrl = source?.redeemUrl\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  // 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    <MediaShell\n      variant=\"light\"\n      rootRef={cardRef}\n      data-testid=\"locked-attachment\"\n    >\n      <CardThumbnail\n        variant=\"light\"\n        gallery={gallery}\n        title={title}\n        showLocked={isLocked}\n        paymentStatus={paymentStatus}\n        mimeType={mimeType}\n        thumbnailUrl={thumbnailUrl}\n        source={source}\n        containedImage={\n          !isLocked && (sourceType === 'image' || sourceType === 'document')\n        }\n      />\n\n      <CardBody\n        variant=\"light\"\n        title={title}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={false}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('light') : undefined}\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    </MediaShell>\n  )\n}\n\n/**\n * The card either party sees for a paid media attachment. `isMine` selects\n * the sender's preview view (tap-to-preview own draft) vs. the recipient's\n * unlock/download view.\n */\nconst MediaCard: React.FC<MediaCardProps> = (props) =>\n  props.isMine ? <OwnMediaCard {...props} /> : <OtherMediaCard {...props} />\n\nexport default MediaCard\n"],"names":["useReceivedSource","paymentStatus","onFetchSource","onUnlockClick","source","setSource","useState","cardRef","useRef","fetchingRef","onFetchSourceRef","fetchSource","useCallback","result","_a","handleUnlockClick","useEffect","observer","entry","buttonClass","ReceivedCardActions","isLocked","sourceUrl","redeemUrl","onUnlockClicked","onDownloadClicked","isUnlocking","jsx","jsxs","React","LockSimpleIcon","href","DownloadSimpleIcon","OwnMediaCard","title","mimeType","thumbnailUrl","detail","amountText","placeholderTitle","gallery","onPreviewClick","isGallery","isGalleryCard","isPreviewVisible","isLoadingPreview","togglePreview","usePreviewToggle","showLocked","isBusy","MediaShell","PreviewToggle","CardThumbnail","CardBody","PurchaseStatusBadge","galleryBodyIcon","OtherMediaCard","onDownloadClick","effectiveSourceUrl","effectiveRedeemUrl","sourceType","getSourceType","actionSourceUrl","MediaCard","props"],"mappings":"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"}

package/dist/Card-DX9nBx1S.js

@@ -0,0 +1,221 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import "classnames";
+import { LockSimpleIcon as U, DownloadSimpleIcon as M } from "@phosphor-icons/react";
+import j, { useState as G, useRef as p, useCallback as R, useEffect as O } from "react";
+import { g as T } from "./index-CZTUyiPe.js";
+import { i as B, u as A, M as N, P as D, C as k, a as I, g as y } from "./usePreviewToggle-BG-pfsgP.js";
+import { P as z } from "./PurchaseStatusBadge-CJH4S-8Z.js";
+function S({
+  paymentStatus: e,
+  onFetchSource: c,
+  onUnlockClick: a
+}) {
+  const [t, l] = G(), i = p(null), n = p(!1), d = p(c);
+  d.current = c;
+  const f = R(async () => {
+    var s;
+    if (!n.current) {
+      n.current = !0;
+      try {
+        const o = await ((s = d.current) == null ? void 0 : s.call(d));
+        o && l(o);
+      } finally {
+        n.current = !1;
+      }
+    }
+  }, []), h = R(() => {
+    e === "paid" ? f() : a == null || a();
+  }, [e, f, a]);
+  return O(() => {
+    if (!i.current || e !== "paid" || t !== void 0) return;
+    const s = new IntersectionObserver(
+      ([o]) => {
+        o.isIntersecting && (f(), s.disconnect());
+      },
+      { threshold: 1 }
+    );
+    return s.observe(i.current), () => s.disconnect();
+  }, [e, t, f]), { source: t, cardRef: i, handleUnlockClick: h };
+}
+const C = "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", V = ({
+  isLocked: e,
+  sourceUrl: c,
+  redeemUrl: a,
+  onUnlockClicked: t,
+  onDownloadClicked: l,
+  isUnlocking: i = !1
+}) => {
+  if (e && t != null)
+    return /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        onClick: t,
+        disabled: i,
+        className: C,
+        children: i ? /* @__PURE__ */ r("span", { className: "size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" }) : /* @__PURE__ */ m(j.Fragment, { children: [
+          /* @__PURE__ */ r(U, { className: "size-4", weight: "fill" }),
+          "Unlock"
+        ] })
+      }
+    );
+  if (!e && l != null) {
+    const n = a ?? c;
+    return n != null ? /* @__PURE__ */ m(
+      "a",
+      {
+        href: n,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: l,
+        className: `${C} !text-white`,
+        children: [
+          /* @__PURE__ */ r(M, { className: "size-4", weight: "bold" }),
+          "Download"
+        ]
+      }
+    ) : /* @__PURE__ */ m(
+      "button",
+      {
+        type: "button",
+        onClick: l,
+        className: C,
+        children: [
+          /* @__PURE__ */ r(M, { className: "size-4", weight: "bold" }),
+          "Download"
+        ]
+      }
+    );
+  }
+  return null;
+}, E = ({
+  title: e,
+  mimeType: c = "application/octet-stream",
+  thumbnailUrl: a,
+  detail: t,
+  amountText: l,
+  placeholderTitle: i = "Attachment title",
+  paymentStatus: n = "pending",
+  gallery: d = [],
+  onPreviewClick: f,
+  onFetchSource: h
+}) => {
+  const s = B(d), { source: o, isPreviewVisible: u, isLoadingPreview: v, togglePreview: b } = A({ isGallery: s, onFetchSource: h, onPreviewClick: f }), g = !u;
+  return /* @__PURE__ */ m(N, { variant: "dark", children: [
+    /* @__PURE__ */ r(
+      D,
+      {
+        onToggle: b,
+        isBusy: v,
+        isPreviewVisible: !g,
+        children: /* @__PURE__ */ r(
+          k,
+          {
+            variant: "dark",
+            gallery: d,
+            title: e,
+            showLocked: g,
+            paymentStatus: n,
+            mimeType: c,
+            thumbnailUrl: a,
+            source: o
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ r(
+      I,
+      {
+        variant: "dark",
+        title: e,
+        placeholderTitle: i,
+        mimeType: c,
+        detail: t,
+        statusBadge: /* @__PURE__ */ r(
+          z,
+          {
+            isMine: !0,
+            paymentStatus: n,
+            amountText: l
+          }
+        ),
+        icon: s ? y("dark") : void 0
+      }
+    )
+  ] });
+}, _ = ({
+  title: e,
+  amountText: c,
+  thumbnailUrl: a,
+  mimeType: t = "application/octet-stream",
+  detail: l,
+  gallery: i = [],
+  onUnlockClick: n,
+  onFetchSource: d,
+  onDownloadClick: f,
+  paymentStatus: h,
+  isUnlocking: s = !1
+}) => {
+  const o = B(i), { source: u, cardRef: v, handleUnlockClick: b } = S({
+    paymentStatus: h,
+    onFetchSource: d,
+    onUnlockClick: n
+  }), g = u == null ? void 0 : u.sourceUrl, P = u == null ? void 0 : u.redeemUrl, w = o ? h !== "paid" : g === void 0, x = T(t), L = o ? void 0 : g;
+  return /* @__PURE__ */ m(
+    N,
+    {
+      variant: "light",
+      rootRef: v,
+      "data-testid": "locked-attachment",
+      children: [
+        /* @__PURE__ */ r(
+          k,
+          {
+            variant: "light",
+            gallery: i,
+            title: e,
+            showLocked: w,
+            paymentStatus: h,
+            mimeType: t,
+            thumbnailUrl: a,
+            source: u,
+            containedImage: !w && (x === "image" || x === "document")
+          }
+        ),
+        /* @__PURE__ */ r(
+          I,
+          {
+            variant: "light",
+            title: e,
+            mimeType: t,
+            detail: l,
+            statusBadge: /* @__PURE__ */ r(
+              z,
+              {
+                isMine: !1,
+                paymentStatus: h,
+                amountText: c
+              }
+            ),
+            icon: o ? y("light") : void 0,
+            action: /* @__PURE__ */ r(
+              V,
+              {
+                isLocked: w,
+                isUnlocking: s,
+                sourceUrl: L,
+                redeemUrl: P,
+                onUnlockClicked: b,
+                onDownloadClicked: f
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, X = (e) => e.isMine ? /* @__PURE__ */ r(E, { ...e }) : /* @__PURE__ */ r(_, { ...e });
+export {
+  X as default
+};
+//# sourceMappingURL=Card-DX9nBx1S.js.map

package/dist/Card-DX9nBx1S.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-DX9nBx1S.js","sources":["../src/components/LockedAttachment/components/_shared/useReceivedSource.ts","../src/components/LockedAttachment/components/Media/CardActions.tsx","../src/components/LockedAttachment/components/Media/Card.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type {\n  FetchSourceHandler,\n  LockedAttachmentSource,\n  PaymentStatus,\n} from '../../types'\n\nexport interface UseReceivedSourceOptions {\n  paymentStatus?: PaymentStatus\n  onFetchSource?: FetchSourceHandler\n  /** Called on Unlock click while the card is still unpaid (opens checkout). */\n  onUnlockClick?: () => void\n}\n\nexport interface UseReceivedSourceResult {\n  source: LockedAttachmentSource | undefined\n  /** Attach to the card root so the paid-source auto-fetch can observe it. */\n  cardRef: React.RefObject<HTMLDivElement>\n  /** Fetches the source when already paid, else defers to `onUnlockClick`. */\n  handleUnlockClick: () => void\n}\n\n/**\n * Media !isMine's source-reveal logic: unlike Composer/Media isMine's\n * tap-to-toggle (`usePreviewToggle`), the recipient's card reveals its source\n * by fetching once — on click when already paid, or automatically the first\n * time a paid card scrolls fully into view. The fetch is guarded so it runs\n * at most once in flight.\n */\nexport function useReceivedSource({\n  paymentStatus,\n  onFetchSource,\n  onUnlockClick,\n}: UseReceivedSourceOptions): UseReceivedSourceResult {\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 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  return { source, cardRef, handleUnlockClick }\n}\n","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 type React from 'react'\n\nimport { getSourceType } from '../../../AttachmentCard'\nimport type {\n  FetchSourceHandler,\n  LockedAttachmentGalleryItem,\n  PaymentStatus,\n} 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 PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport { usePreviewToggle } from '../_shared/usePreviewToggle'\nimport { useReceivedSource } from '../_shared/useReceivedSource'\n\nimport ReceivedCardActions from './CardActions'\n\ninterface MediaCardSharedProps {\n  title?: string\n  mimeType?: string\n  thumbnailUrl?: string\n  detail?: string\n  amountText?: string\n  paymentStatus?: PaymentStatus\n  gallery?: LockedAttachmentGalleryItem[]\n  onFetchSource?: FetchSourceHandler\n}\n\nexport type MediaCardProps =\n  | (MediaCardSharedProps & {\n      isMine: true\n      /** Dimmed fallback shown in the title slot when `title` is unset. */\n      placeholderTitle?: string\n      /** Fired the first time the sender taps the thumbnail to preview their own attachment. */\n      onPreviewClick?: () => void\n    })\n  | (MediaCardSharedProps & {\n      isMine: false\n      /**\n       * When true, shows a loading spinner on the Unlock button. Driven by\n       * the LockedAttachmentContext (e.g. checkout in progress).\n       */\n      isUnlocking?: boolean\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 when the recipient clicks Download on an unlocked card.\n       * Omit to hide the Download button.\n       */\n      onDownloadClick?: () => void\n    })\n\n/**\n * The sender's ('mine') view of a paid media attachment: the locked\n * thumbnail (single or gallery) they can tap to preview their own\n * attachment, plus the title/purchase-status body.\n */\nconst OwnMediaCard: React.FC<\n  MediaCardSharedProps & {\n    isMine: true\n    placeholderTitle?: string\n    onPreviewClick?: () => void\n  }\n> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  paymentStatus = 'pending',\n  gallery = [],\n  onPreviewClick,\n  onFetchSource,\n}) => {\n  const isGallery = isGalleryCard(gallery)\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 { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\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          paymentStatus={paymentStatus}\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          source={source}\n        />\n      </PreviewToggle>\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={true}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('dark') : undefined}\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The recipient's ('other') view of a paid media attachment: the locked\n * thumbnail (single or gallery) with an Unlock/Download CTA. The source is\n * revealed by fetching once — on click when already paid, or automatically\n * the first time a paid card scrolls into view.\n */\nconst OtherMediaCard: React.FC<\n  MediaCardSharedProps & {\n    isMine: false\n    onUnlockClick?: () => void\n    onDownloadClick?: () => void\n    isUnlocking?: boolean\n  }\n> = ({\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 = isGalleryCard(gallery)\n\n  const { source, cardRef, handleUnlockClick } = useReceivedSource({\n    paymentStatus,\n    onFetchSource,\n    onUnlockClick,\n  })\n\n  const effectiveSourceUrl = source?.sourceUrl\n  const effectiveRedeemUrl = source?.redeemUrl\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  // 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    <MediaShell\n      variant=\"light\"\n      rootRef={cardRef}\n      data-testid=\"locked-attachment\"\n    >\n      <CardThumbnail\n        variant=\"light\"\n        gallery={gallery}\n        title={title}\n        showLocked={isLocked}\n        paymentStatus={paymentStatus}\n        mimeType={mimeType}\n        thumbnailUrl={thumbnailUrl}\n        source={source}\n        containedImage={\n          !isLocked && (sourceType === 'image' || sourceType === 'document')\n        }\n      />\n\n      <CardBody\n        variant=\"light\"\n        title={title}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={false}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('light') : undefined}\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    </MediaShell>\n  )\n}\n\n/**\n * The card either party sees for a paid media attachment. `isMine` selects\n * the sender's preview view (tap-to-preview own draft) vs. the recipient's\n * unlock/download view.\n */\nconst MediaCard: React.FC<MediaCardProps> = (props) =>\n  props.isMine ? <OwnMediaCard {...props} /> : <OtherMediaCard {...props} />\n\nexport default MediaCard\n"],"names":["useReceivedSource","paymentStatus","onFetchSource","onUnlockClick","source","setSource","useState","cardRef","useRef","fetchingRef","onFetchSourceRef","fetchSource","useCallback","result","_a","handleUnlockClick","useEffect","observer","entry","buttonClass","ReceivedCardActions","isLocked","sourceUrl","redeemUrl","onUnlockClicked","onDownloadClicked","isUnlocking","jsx","jsxs","React","LockSimpleIcon","href","DownloadSimpleIcon","OwnMediaCard","title","mimeType","thumbnailUrl","detail","amountText","placeholderTitle","gallery","onPreviewClick","isGallery","isGalleryCard","isPreviewVisible","isLoadingPreview","togglePreview","usePreviewToggle","showLocked","MediaShell","PreviewToggle","CardThumbnail","CardBody","PurchaseStatusBadge","galleryBodyIcon","OtherMediaCard","onDownloadClick","effectiveSourceUrl","effectiveRedeemUrl","sourceType","getSourceType","actionSourceUrl","MediaCard","props"],"mappings":"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"}

package/dist/Card-iKTcn1wg.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("@phosphor-icons/react"),l=require("./TextShell-Bnzh0T75.cjs"),c=require("./PurchaseStatusBadge-UjDzZhLj.cjs"),o=require("classnames"),t=({cx:s,index:i})=>e.jsx("circle",{cx:s,cy:"6.15",r:"2.4",fill:"currentColor",children:e.jsx("animateTransform",{attributeName:"transform",type:"translate",values:"0 0; 0 -2.25; 0 0;",dur:"900ms",begin:`${120*i}ms`,repeatCount:"indefinite"})}),j=({className:s})=>e.jsxs("svg",{"aria-hidden":"true",className:s,viewBox:"0 0 20 12.3",width:"20",height:"13",overflow:"visible",children:[e.jsx(t,{cx:"3",index:0}),e.jsx(t,{cx:"10",index:1}),e.jsx(t,{cx:"17",index:2})]}),x=({variant:s="dark",animate:i=!0})=>{const r=i?"animate-pulse motion-reduce:animate-none":"",a=s==="dark"?"bg-white/25":"bg-black/15";return e.jsxs("div",{className:"flex flex-col gap-2 str-chat__message-text my-1","aria-hidden":!0,children:[e.jsx("div",{className:o("h-3 w-40 rounded-full",r,a)}),e.jsx("div",{className:o("h-3 w-24 rounded-full",r,a)})]})},f=({amountText:s,paymentStatus:i="pending",children:r})=>{const a=i==="failed";if(i==="paid"&&r)return e.jsxs(l.TextShell,{children:[r,e.jsx("span",{className:"sr-only","aria-live":"polite",children:"Sold."}),e.jsxs(l.PriceLockRow,{children:[s!=null&&e.jsx("span",{className:"text-white/55",children:s}),e.jsx(c.PurchaseStatusBadge,{isMine:!0,paymentStatus:i})]})]});const d=a?"Payment failed.":i==="refunded"?"Refunded.":"Payment pending.";return e.jsxs(l.TextShell,{children:[e.jsx(x,{variant:"dark",animate:i==="pending"}),e.jsx("span",{className:"sr-only","aria-live":"polite",children:d}),e.jsxs(l.PriceLockRow,{children:[s!=null&&e.jsx("span",{className:"text-white/55",children:s}),e.jsx(c.PurchaseStatusBadge,{isMine:!0,paymentStatus:i})]})]})},m=({amountText:s,paymentStatus:i,onUnlockClick:r,isUnlocking:a=!1,children:n})=>{if(i==="paid"&&n)return e.jsxs(l.TextShell,{children:[n,e.jsxs(l.PriceLockRow,{children:[s!=null&&e.jsx("span",{className:"opacity-55",children:s}),e.jsx(c.PurchaseStatusBadge,{isMine:!1,paymentStatus:"paid"})]})]});const h=a?"Unlocking.":"Locked message available to unlock.";return e.jsx(l.TextShell,{children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"flex flex-1 flex-col gap-2",children:[e.jsx(x,{variant:"light",animate:a}),e.jsx("span",{className:"sr-only","aria-live":"polite",children:h}),e.jsx(l.PriceLockRow,{children:s!=null&&e.jsx("span",{className:"opacity-55",children:s})})]}),e.jsx("button",{type:"button",onClick:r,disabled:a,"aria-label":a?"Unlocking":"Unlock","aria-busy":a,title:a?"Unlocking":"Unlock",className:"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]",children:a?e.jsx(j,{}):e.jsx(u.LockSimpleIcon,{className:"size-4",weight:"fill","aria-hidden":!0})})]})})},g=s=>s.isMine?e.jsx(f,{...s}):e.jsx(m,{...s});exports.default=g;
+//# sourceMappingURL=Card-iKTcn1wg.cjs.map

package/dist/Card-iKTcn1wg.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-iKTcn1wg.cjs","sources":["../src/components/LockedAttachment/components/_shared/LoadingDots.tsx","../src/components/LockedAttachment/components/_shared/SkeletonTextLines.tsx","../src/components/LockedAttachment/components/Text/Card.tsx"],"sourcesContent":["import React from 'react'\n\nconst Dot = ({ cx, index }: { cx: string; index: number }) => (\n  <circle cx={cx} cy=\"6.15\" r=\"2.4\" fill=\"currentColor\">\n    <animateTransform\n      attributeName=\"transform\"\n      type=\"translate\"\n      values=\"0 0; 0 -2.25; 0 0;\"\n      dur=\"900ms\"\n      begin={`${120 * index}ms`}\n      repeatCount=\"indefinite\"\n    />\n  </circle>\n)\n\n/**\n * Three bouncing dots, inline-sized for use inside buttons/labels (e.g. the\n * Unlock CTA while a purchase is in flight). Mirrors the typing indicator's\n * animation but uses `currentColor` so it adopts the surrounding text color.\n */\nconst LoadingDots: React.FC<{ className?: string }> = ({ className }) => (\n  <svg\n    aria-hidden=\"true\"\n    className={className}\n    viewBox=\"0 0 20 12.3\"\n    width=\"20\"\n    height=\"13\"\n    overflow=\"visible\"\n  >\n    <Dot cx=\"3\" index={0} />\n    <Dot cx=\"10\" index={1} />\n    <Dot cx=\"17\" index={2} />\n  </svg>\n)\n\nexport default LoadingDots\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport interface SkeletonTextLinesProps {\n  /** Matches the bubble it sits in — \"dark\" for the sender's own bubble. */\n  variant: 'light' | 'dark'\n  /**\n   * Whether the bars pulse. Pass `false` once the outcome is settled (paid,\n   * failed, refunded) — a static skeleton reads as \"nothing more will\n   * change\", while a pulsing one implies something is still in flight.\n   */\n  animate: boolean\n}\n\n/**\n * Two skeleton bars standing in for the redacted text of a paid text-only\n * message — the real content is never sent to the client until purchase, so\n * there's nothing to render yet.\n *\n * Uses explicit black/white (not `bg-current`) because Tailwind doesn't\n * support opacity modifiers on the `current` color — `bg-current/30` silently\n * produces no CSS rule at all.\n */\nconst SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({\n  variant = 'dark',\n  animate = true,\n}) => {\n  const pulse = animate ? 'animate-pulse motion-reduce:animate-none' : ''\n  const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'\n\n  return (\n    <div className=\"flex flex-col gap-2 str-chat__message-text my-1\" aria-hidden>\n      <div className={classNames('h-3 w-40 rounded-full', pulse, colour)} />\n      <div className={classNames('h-3 w-24 rounded-full', pulse, colour)} />\n    </div>\n  )\n}\n\nexport default SkeletonTextLines\n","import { LockSimpleIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\nimport type { PaymentStatus } from '../../types'\nimport LoadingDots from '../_shared/LoadingDots'\nimport PriceLockRow from '../_shared/PriceLockRow'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport SkeletonTextLines from '../_shared/SkeletonTextLines'\nimport TextShell from '../_shared/TextShell'\n\ninterface TextCardSharedProps {\n  amountText?: string\n  paymentStatus?: PaymentStatus\n  /**\n   * The message's real, revealed content — shown instead of the skeleton\n   * loader once `paymentStatus` is `'paid'`. Ignored otherwise. Lets the\n   * caller supply its own text renderer (e.g. Stream's `MessageText`)\n   * without `LockedAttachment` depending on it.\n   */\n  children?: React.ReactNode\n}\n\nexport type TextCardProps =\n  | (TextCardSharedProps & {\n      isMine: true\n    })\n  | (TextCardSharedProps & {\n      isMine: false\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       * When true, shows a loading spinner on the Unlock button. Driven by\n       * the LockedAttachmentContext (e.g. checkout in progress).\n       */\n      isUnlocking?: boolean\n    })\n\n/**\n * The sender's ('mine') view of a paid text-only message: an outgoing chat\n * bubble showing a skeleton text loader in place of the redacted content (or\n * `children`, once paid), plus a lock/price/status row.\n */\nconst OwnTextCard: React.FC<TextCardSharedProps & { isMine: true }> = ({\n  amountText,\n  paymentStatus = 'pending',\n  children,\n}) => {\n  const isFailed = paymentStatus === 'failed'\n  const isPaid = paymentStatus === 'paid'\n\n  if (isPaid && children) {\n    return (\n      <TextShell>\n        {children}\n        <span className=\"sr-only\" aria-live=\"polite\">\n          Sold.\n        </span>\n        <PriceLockRow>\n          {amountText != null && (\n            <span className=\"text-white/55\">{amountText}</span>\n          )}\n          <PurchaseStatusBadge isMine={true} paymentStatus={paymentStatus} />\n        </PriceLockRow>\n      </TextShell>\n    )\n  }\n\n  const liveMessage = isFailed\n    ? 'Payment failed.'\n    : paymentStatus === 'refunded'\n      ? 'Refunded.'\n      : 'Payment pending.'\n\n  return (\n    <TextShell>\n      <SkeletonTextLines variant=\"dark\" animate={paymentStatus === 'pending'} />\n      <span className=\"sr-only\" aria-live=\"polite\">\n        {liveMessage}\n      </span>\n      <PriceLockRow>\n        {amountText != null && (\n          <span className=\"text-white/55\">{amountText}</span>\n        )}\n        <PurchaseStatusBadge isMine={true} paymentStatus={paymentStatus} />\n      </PriceLockRow>\n    </TextShell>\n  )\n}\n\n/**\n * The recipient's ('other') view of a paid text-only message: a plain chat\n * bubble whose content is a skeleton text loader (or `children`, once paid)\n * plus a lock/price/status row. Two pre-purchase states exist — idle and\n * unlocking (checkout in flight) — plus the revealed state once\n * `paymentStatus` is `'paid'`.\n */\nconst OtherTextCard: React.FC<\n  TextCardSharedProps & {\n    isMine: false\n    onUnlockClick?: () => void\n    isUnlocking?: boolean\n  }\n> = ({\n  amountText,\n  paymentStatus,\n  onUnlockClick,\n  isUnlocking = false,\n  children,\n}) => {\n  const isPaid = paymentStatus === 'paid'\n\n  if (isPaid && children) {\n    return (\n      <TextShell>\n        {children}\n        <PriceLockRow>\n          {amountText != null && (\n            <span className=\"opacity-55\">{amountText}</span>\n          )}\n          <PurchaseStatusBadge isMine={false} paymentStatus=\"paid\" />\n        </PriceLockRow>\n      </TextShell>\n    )\n  }\n\n  const ariaLabel = isUnlocking\n    ? 'Unlocking.'\n    : 'Locked message available to unlock.'\n\n  return (\n    <TextShell>\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex flex-1 flex-col gap-2\">\n          <SkeletonTextLines variant=\"light\" animate={isUnlocking} />\n          <span className=\"sr-only\" aria-live=\"polite\">\n            {ariaLabel}\n          </span>\n          <PriceLockRow>\n            {amountText != null && (\n              <span className=\"opacity-55\">{amountText}</span>\n            )}\n          </PriceLockRow>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onUnlockClick}\n          disabled={isUnlocking}\n          aria-label={isUnlocking ? 'Unlocking' : 'Unlock'}\n          aria-busy={isUnlocking}\n          title={isUnlocking ? 'Unlocking' : 'Unlock'}\n          className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]\"\n        >\n          {isUnlocking ? (\n            <LoadingDots />\n          ) : (\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" aria-hidden />\n          )}\n        </button>\n      </div>\n    </TextShell>\n  )\n}\n\n/**\n * The card either party sees for a paid text-only message — a chat bubble\n * showing a skeleton text loader (or `children`, once revealed) plus a\n * lock/price/status row. `isMine` selects the sender's payment-lifecycle view\n * (pending/failed/refunded/paid + Dismiss) vs. the recipient's unlock-flow\n * view (idle/unlocking + Unlock CTA).\n */\nconst TextCard: React.FC<TextCardProps> = (props) =>\n  props.isMine ? <OwnTextCard {...props} /> : <OtherTextCard {...props} />\n\nexport default TextCard\n"],"names":["Dot","cx","index","jsx","LoadingDots","className","jsxs","SkeletonTextLines","variant","animate","pulse","colour","classNames","OwnTextCard","amountText","paymentStatus","children","isFailed","TextShell","PriceLockRow","PurchaseStatusBadge","liveMessage","OtherTextCard","onUnlockClick","isUnlocking","ariaLabel","LockSimpleIcon","TextCard","props"],"mappings":"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"}

package/dist/Card-qDLtjK6u.js

@@ -0,0 +1,108 @@
+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 j, u as T, M as I, P as L, C as M, a as R, g as S } from "./usePreviewToggle-BG-pfsgP.js";
+import { T as A, P as G } from "./TextShell-BiqF2UB0.js";
+const V = ({
+  text: t,
+  amountText: i,
+  placeholderAmountText: s,
+  onDismiss: a
+}) => /* @__PURE__ */ r(A, { children: [
+  /* @__PURE__ */ e("div", { className: "pr-8", children: t }),
+  /* @__PURE__ */ e(G, { 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" })
+    }
+  )
+] }), F = ({
+  title: t,
+  mimeType: i = "application/octet-stream",
+  thumbnailUrl: s,
+  detail: a,
+  amountText: o,
+  placeholderTitle: u = "Attachment title",
+  placeholderAmountText: g,
+  gallery: n = [],
+  onDismiss: l,
+  onPreviewClick: w,
+  onFetchSource: x,
+  onEditClick: c
+}) => {
+  const d = j(n), { source: b, isPreviewVisible: p, isLoadingPreview: f, togglePreview: v } = T({ isGallery: d, onFetchSource: x, onPreviewClick: w }), h = !p, C = f, y = /* @__PURE__ */ r(B.Fragment, { children: [
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: o ? "text-xs font-medium text-white/55" : "text-xs font-medium text-white/30",
+        children: o || g
+      }
+    )
+  ] }), P = l ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: (k) => {
+        k.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, N = 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(I, { variant: "dark", children: [
+    /* @__PURE__ */ e(
+      L,
+      {
+        onToggle: v,
+        isBusy: C,
+        isPreviewVisible: !h,
+        children: /* @__PURE__ */ e(
+          M,
+          {
+            variant: "dark",
+            gallery: n,
+            title: t,
+            showLocked: h,
+            mimeType: i,
+            thumbnailUrl: s,
+            source: b,
+            topRight: P
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      R,
+      {
+        variant: "dark",
+        title: t,
+        placeholderTitle: u,
+        mimeType: i,
+        detail: a,
+        statusBadge: y,
+        icon: d ? S("dark") : void 0,
+        trailingAction: N
+      }
+    )
+  ] });
+}, J = (t) => t.contentType === "text" ? /* @__PURE__ */ e(V, { ...t }) : /* @__PURE__ */ e(F, { ...t });
+export {
+  J as default
+};
+//# sourceMappingURL=Card-qDLtjK6u.js.map