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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/dist/Card-BG-Mg_ss.js +221 -0
  2. package/dist/Card-BG-Mg_ss.js.map +1 -0
  3. package/dist/Card-CmRzkuPw.cjs +2 -0
  4. package/dist/Card-CmRzkuPw.cjs.map +1 -0
  5. package/dist/Card-DSG-wR8t.js +96 -0
  6. package/dist/Card-DSG-wR8t.js.map +1 -0
  7. package/dist/Card-DVEuTlf_.cjs +2 -0
  8. package/dist/Card-DVEuTlf_.cjs.map +1 -0
  9. package/dist/Card-K9ky-G-t.js +108 -0
  10. package/dist/Card-K9ky-G-t.js.map +1 -0
  11. package/dist/Card-iKTcn1wg.cjs +2 -0
  12. package/dist/Card-iKTcn1wg.cjs.map +1 -0
  13. package/dist/PurchaseStatusBadge-CJH4S-8Z.js +36 -0
  14. package/dist/PurchaseStatusBadge-CJH4S-8Z.js.map +1 -0
  15. package/dist/PurchaseStatusBadge-UjDzZhLj.cjs +2 -0
  16. package/dist/PurchaseStatusBadge-UjDzZhLj.cjs.map +1 -0
  17. package/dist/TextShell-BiqF2UB0.js +32 -0
  18. package/dist/TextShell-BiqF2UB0.js.map +1 -0
  19. package/dist/TextShell-Bnzh0T75.cjs +2 -0
  20. package/dist/TextShell-Bnzh0T75.cjs.map +1 -0
  21. package/dist/assets/index.css +1 -1
  22. package/dist/{index-BCgRoF_u.js → index-DO_dYsIf.js} +1154 -1113
  23. package/dist/index-DO_dYsIf.js.map +1 -0
  24. package/dist/index-DpzmKL5U.cjs +2 -0
  25. package/dist/index-DpzmKL5U.cjs.map +1 -0
  26. package/dist/index.cjs +1 -1
  27. package/dist/index.d.ts +98 -55
  28. package/dist/index.js +1 -1
  29. package/dist/testing.d.ts +1 -0
  30. package/dist/usePreviewToggle-B5kmPELX.cjs +2 -0
  31. package/dist/usePreviewToggle-B5kmPELX.cjs.map +1 -0
  32. package/dist/usePreviewToggle-D27Xw9Xx.js +323 -0
  33. package/dist/usePreviewToggle-D27Xw9Xx.js.map +1 -0
  34. package/package.json +2 -2
  35. package/src/components/CustomMessage/CustomMessage.stories.tsx +54 -1
  36. package/src/components/CustomMessage/MessageTag.tsx +8 -0
  37. package/src/components/CustomMessage/index.tsx +61 -22
  38. package/src/components/LockedAttachment/LockedAttachment.stories.tsx +410 -333
  39. package/src/components/LockedAttachment/LockedAttachment.test.tsx +104 -0
  40. package/src/components/LockedAttachment/components/Composer/Card.tsx +97 -120
  41. package/src/components/LockedAttachment/components/Media/Card.tsx +237 -0
  42. package/src/components/LockedAttachment/components/Text/Card.tsx +177 -0
  43. package/src/components/LockedAttachment/components/_shared/CardBody.tsx +3 -3
  44. package/src/components/LockedAttachment/components/_shared/CardThumbnail.tsx +92 -0
  45. package/src/components/LockedAttachment/components/_shared/GalleryThumbnail.tsx +11 -33
  46. package/src/components/LockedAttachment/components/_shared/LoadingDots.tsx +36 -0
  47. package/src/components/LockedAttachment/components/_shared/LockBadge.tsx +21 -11
  48. package/src/components/LockedAttachment/components/_shared/{LockedCardShell.tsx → MediaShell.tsx} +5 -5
  49. package/src/components/LockedAttachment/components/_shared/PreviewToggle.tsx +58 -0
  50. package/src/components/LockedAttachment/components/_shared/PriceLockRow.tsx +21 -0
  51. package/src/components/LockedAttachment/components/_shared/PurchaseStatusBadge.tsx +87 -0
  52. package/src/components/LockedAttachment/components/_shared/{LockedThumbnail.tsx → SingleThumbnail.tsx} +5 -5
  53. package/src/components/LockedAttachment/components/_shared/SkeletonTextLines.tsx +39 -0
  54. package/src/components/LockedAttachment/components/_shared/TextShell.tsx +19 -0
  55. package/src/components/LockedAttachment/components/_shared/usePreviewToggle.test.ts +67 -0
  56. package/src/components/LockedAttachment/components/_shared/usePreviewToggle.ts +89 -0
  57. package/src/components/LockedAttachment/components/_shared/useReceivedSource.ts +83 -0
  58. package/src/components/LockedAttachment/index.tsx +17 -28
  59. package/src/components/LockedAttachment/types.ts +28 -4
  60. package/src/index.ts +2 -5
  61. package/src/stream-custom-data.ts +1 -0
  62. package/src/styles.css +5 -0
  63. package/dist/Card-BRvcFjsq.js +0 -132
  64. package/dist/Card-BRvcFjsq.js.map +0 -1
  65. package/dist/Card-BuXkok0A.cjs +0 -2
  66. package/dist/Card-BuXkok0A.cjs.map +0 -1
  67. package/dist/Card-CvNHv3me.js +0 -107
  68. package/dist/Card-CvNHv3me.js.map +0 -1
  69. package/dist/Card-DOSuQdnk.cjs +0 -2
  70. package/dist/Card-DOSuQdnk.cjs.map +0 -1
  71. package/dist/Card-NnQw99XE.cjs +0 -2
  72. package/dist/Card-NnQw99XE.cjs.map +0 -1
  73. package/dist/Card-jGOcSN1O.js +0 -163
  74. package/dist/Card-jGOcSN1O.js.map +0 -1
  75. package/dist/LockedThumbnail-EsjaAqLR.js +0 -220
  76. package/dist/LockedThumbnail-EsjaAqLR.js.map +0 -1
  77. package/dist/LockedThumbnail-uAauUd5c.cjs +0 -2
  78. package/dist/LockedThumbnail-uAauUd5c.cjs.map +0 -1
  79. package/dist/index-BCgRoF_u.js.map +0 -1
  80. package/dist/index-DRurVQ0-.cjs +0 -2
  81. package/dist/index-DRurVQ0-.cjs.map +0 -1
  82. package/src/components/LockedAttachment/components/Composer/index.ts +0 -2
  83. package/src/components/LockedAttachment/components/Received/Card.tsx +0 -191
  84. package/src/components/LockedAttachment/components/Received/index.ts +0 -2
  85. package/src/components/LockedAttachment/components/Sent/Card.tsx +0 -177
  86. package/src/components/LockedAttachment/components/Sent/index.ts +0 -2
  87. /package/src/components/LockedAttachment/components/{Received → Media}/CardActions.tsx +0 -0
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DRurVQ0-.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DpzmKL5U.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
2
2
  //# sourceMappingURL=index.cjs.map
package/dist/index.d.ts CHANGED
@@ -405,13 +405,18 @@ export declare interface ChannelViewProps {
405
405
  }
406
406
 
407
407
  export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
408
- /** Placeholder shown in the title slot before the composer types one. */
409
- placeholderTitle?: string;
408
+ /**
409
+ * The message's own text, shown as-is (not redacted yet — the message
410
+ * hasn't been sent). Only used when `contentType` is `"text"`.
411
+ */
412
+ text?: string;
410
413
  /** Placeholder shown in the amount slot before one is configured. */
411
414
  placeholderAmountText?: string;
412
415
  /**
413
- * When provided, renders a dismiss X in the thumbnail corner. Called when
414
- * the composer clicks it to remove the attachment.
416
+ * Renders a persistent dismiss X on the thumbnail (media) or next to the
417
+ * text (text mode); called to remove the draft attachment. Unrelated to
418
+ * `TextCardProps.onDismiss`, which only appears for `isMine` after a
419
+ * failed payment.
415
420
  */
416
421
  onDismiss?: () => void;
417
422
  /** Fired the first time the composer taps the thumbnail to preview. */
@@ -420,8 +425,9 @@ export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
420
425
  * Lazily loads the underlying source so the composer can preview the
421
426
  * attachment they're about to send. Called the first time the thumbnail is
422
427
  * tapped; the returned source is cached and reused on subsequent toggles.
428
+ * Ignored when `contentType` is `"text"`.
423
429
  */
424
- onFetchSource?: () => Promise<LockedAttachmentSource | void>;
430
+ onFetchSource?: FetchSourceHandler;
425
431
  /**
426
432
  * When provided, renders a pencil button in the body bottom-right that the
427
433
  * composer can use to edit the attachment metadata (e.g. open the price /
@@ -436,12 +442,6 @@ declare interface ComposerExtras {
436
442
  onDismiss?: () => void;
437
443
  }
438
444
 
439
- /**
440
- * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
441
- * should migrate to `ComposerCardProps`.
442
- */
443
- export declare type CreatorCardProps = SentCardProps;
444
-
445
445
  export declare const CustomMessageProvider: Provider<Partial<CustomMessageRegistry>>;
446
446
 
447
447
  export declare interface CustomMessageRegistry {
@@ -479,6 +479,13 @@ export declare interface FaqListProps {
479
479
  avatarName?: string;
480
480
  }
481
481
 
482
+ /**
483
+ * Lazily fetches the underlying source (URL/thumbnail) for a locked
484
+ * attachment. Returns `void` to signal "no source available" — the card
485
+ * stays locked. Shared by `ComposerCardProps`/`MediaCardProps.onFetchSource`.
486
+ */
487
+ declare type FetchSourceHandler = () => Promise<LockedAttachmentSource | void>;
488
+
482
489
  declare interface FileAttachmentSharedProps extends MessageAttachmentBaseProps {
483
490
  /** Source URL of the file (used as the download target). */
484
491
  src?: string;
@@ -730,33 +737,45 @@ export declare interface LinkAttachmentSentCardProps extends LinkAttachmentBaseP
730
737
 
731
738
  export declare const LockedAttachment: {
732
739
  Composer: (props: ComposerCardProps) => JSX_2.Element;
733
- Sent: (props: SentCardProps) => JSX_2.Element;
734
- Received: (props: ReceivedCardProps) => JSX_2.Element;
735
- Creator: (props: SentCardProps) => JSX_2.Element;
736
- Visitor: (props: ReceivedCardProps) => JSX_2.Element;
740
+ Text: (props: LockedAttachmentTextCardProps) => JSX_2.Element;
741
+ Media: (props: LockedAttachmentMediaCardProps) => JSX_2.Element;
737
742
  };
738
743
 
739
744
  declare interface LockedAttachmentBaseProps {
740
745
  title?: string;
746
+ /** Dimmed fallback shown in the title slot when `title` is unset (no attachment metadata yet — still drafting). */
747
+ placeholderTitle?: string;
741
748
  mimeType?: string;
742
749
  thumbnailUrl?: string;
743
750
  detail?: string;
744
751
  amountText?: string;
745
- paymentStatus?: PaymentStatus;
746
752
  /**
747
753
  * When provided with 2+ items, the card renders as a mixed-media carousel
748
754
  * (e.g. a couple of photos + a video) instead of a single thumbnail. Each
749
755
  * item brings its own thumbnail and optional source so that
750
- * `LockedAttachment.Composer` / `.Sent` / `.Received` can all share the
751
- * same carousel chrome.
756
+ * `LockedAttachment.Composer` / `.Media` can share the same carousel
757
+ * chrome.
752
758
  */
753
759
  gallery?: LockedAttachmentGalleryItem[];
760
+ /**
761
+ * "text" renders the card as a locked/plain chat bubble showing the
762
+ * message's own text (skeleton-blurred until purchased) instead of a media
763
+ * thumbnail card — for a paid text-only message. Media-only props
764
+ * (`mimeType`, `thumbnailUrl`, `title`, `detail`, `gallery`) are ignored in
765
+ * this mode. Defaults to `"media"`.
766
+ */
767
+ contentType?: 'text' | 'media';
754
768
  }
755
769
 
756
770
  export declare interface LockedAttachmentContextValue {
757
771
  isUnlocking: (id: string) => boolean;
758
772
  onUnlockClick?: (message: LocalMessage, channel: Channel) => void;
759
773
  onDownloadClick?: (message: LocalMessage, channel: Channel) => void;
774
+ /**
775
+ * Reveal the locked media's underlying source (URL/thumbnail). Not used
776
+ * for a paid text message — the backend writes the real text directly onto
777
+ * the message on purchase and `message.text` alone drives that reveal.
778
+ */
760
779
  onFetchSource?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource | void>;
761
780
  }
762
781
 
@@ -769,6 +788,31 @@ export declare interface LockedAttachmentGalleryItem {
769
788
  sourceUrl?: string;
770
789
  }
771
790
 
791
+ export declare type LockedAttachmentMediaCardProps = (MediaCardSharedProps & {
792
+ isMine: true;
793
+ /** Dimmed fallback shown in the title slot when `title` is unset. */
794
+ placeholderTitle?: string;
795
+ /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
796
+ onPreviewClick?: () => void;
797
+ }) | (MediaCardSharedProps & {
798
+ isMine: false;
799
+ /**
800
+ * When true, shows a loading spinner on the Unlock button. Driven by
801
+ * the LockedAttachmentContext (e.g. checkout in progress).
802
+ */
803
+ isUnlocking?: boolean;
804
+ /**
805
+ * Called when the recipient clicks Unlock on an unpaid attachment.
806
+ * Use this to open a checkout flow. Omit to hide the Unlock button.
807
+ */
808
+ onUnlockClick?: () => void;
809
+ /**
810
+ * Called when the recipient clicks Download on an unlocked card.
811
+ * Omit to hide the Download button.
812
+ */
813
+ onDownloadClick?: () => void;
814
+ });
815
+
772
816
  export declare interface LockedAttachmentSource {
773
817
  /** Proxied URL used by the media player for in-app playback. */
774
818
  sourceUrl: string;
@@ -778,6 +822,33 @@ export declare interface LockedAttachmentSource {
778
822
  thumbnailUrl?: string;
779
823
  }
780
824
 
825
+ export declare type LockedAttachmentTextCardProps = (TextCardSharedProps & {
826
+ isMine: true;
827
+ }) | (TextCardSharedProps & {
828
+ isMine: false;
829
+ /**
830
+ * Called when the recipient clicks Unlock on an unpaid attachment.
831
+ * Use this to open a checkout flow. Omit to hide the Unlock button.
832
+ */
833
+ onUnlockClick?: () => void;
834
+ /**
835
+ * When true, shows a loading spinner on the Unlock button. Driven by
836
+ * the LockedAttachmentContext (e.g. checkout in progress).
837
+ */
838
+ isUnlocking?: boolean;
839
+ });
840
+
841
+ declare interface MediaCardSharedProps {
842
+ title?: string;
843
+ mimeType?: string;
844
+ thumbnailUrl?: string;
845
+ detail?: string;
846
+ amountText?: string;
847
+ paymentStatus?: PaymentStatus;
848
+ gallery?: LockedAttachmentGalleryItem[];
849
+ onFetchSource?: FetchSourceHandler;
850
+ }
851
+
781
852
  export declare const MediaMessage: default_2.FC<MediaMessageProps> & {
782
853
  Creator: default_2.FC<{
783
854
  message: LocalMessage;
@@ -1184,6 +1255,7 @@ export declare interface MessageMetadata {
1184
1255
  amount_text?: string;
1185
1256
  payment_status?: PaymentStatus;
1186
1257
  attachment_title?: string;
1258
+ attachment_type?: 'text' | 'media';
1187
1259
  attachment_mime_type?: string;
1188
1260
  attachment_thumbnail?: string;
1189
1261
  attachment_detail?: string;
@@ -1396,31 +1468,6 @@ declare interface PdfAttachmentSharedProps extends MessageAttachmentBaseProps {
1396
1468
  onClick?: (index: number) => boolean | void;
1397
1469
  }
1398
1470
 
1399
- export declare interface ReceivedCardProps extends LockedAttachmentBaseProps {
1400
- /**
1401
- * Called when the recipient clicks Unlock on an unpaid attachment.
1402
- * Use this to open a checkout flow. Omit to hide the Unlock button.
1403
- */
1404
- onUnlockClick?: () => void;
1405
- /**
1406
- * Called to fetch the attachment source — fired automatically when
1407
- * `paymentStatus` transitions to `'paid'`, or immediately on click when
1408
- * `paymentStatus` is already `'paid'`. Return a `LockedAttachmentSource`
1409
- * to unlock the card.
1410
- */
1411
- onFetchSource?: () => Promise<LockedAttachmentSource | void>;
1412
- /**
1413
- * Called when the recipient clicks Download on an unlocked card.
1414
- * Omit to hide the Download button.
1415
- */
1416
- onDownloadClick?: () => void;
1417
- /**
1418
- * When true, shows a loading spinner on the Unlock button.
1419
- * Driven by the LockedAttachmentContext (e.g. checkout in progress).
1420
- */
1421
- isUnlocking?: boolean;
1422
- }
1423
-
1424
1471
  /**
1425
1472
  * Resolves the member to display as the conversation's "other party".
1426
1473
  *
@@ -1443,17 +1490,16 @@ export declare function resolveMediaFromMessage(message: LocalMessage): MediaMes
1443
1490
  */
1444
1491
  export declare function resolveParticipantDisplayName(user?: ParticipantDisplayUser | null): string;
1445
1492
 
1446
- export declare interface SentCardProps extends LockedAttachmentBaseProps {
1447
- /** Placeholder shown in the title slot when no title is set. */
1448
- placeholderTitle?: string;
1449
- /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
1450
- onPreviewClick?: () => void;
1493
+ declare interface TextCardSharedProps {
1494
+ amountText?: string;
1495
+ paymentStatus?: PaymentStatus;
1451
1496
  /**
1452
- * Lazily loads the underlying source so the sender can preview the attachment.
1453
- * Called the first time the thumbnail is tapped; the returned source is cached
1454
- * and reused on subsequent toggles.
1497
+ * The message's real, revealed content shown instead of the skeleton
1498
+ * loader once `paymentStatus` is `'paid'`. Ignored otherwise. Lets the
1499
+ * caller supply its own text renderer (e.g. Stream's `MessageText`)
1500
+ * without `LockedAttachment` depending on it.
1455
1501
  */
1456
- onFetchSource?: () => Promise<LockedAttachmentSource | void>;
1502
+ children?: default_2.ReactNode;
1457
1503
  }
1458
1504
 
1459
1505
  /**
@@ -1524,9 +1570,6 @@ declare interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps
1524
1570
  onClick?: (index: number) => boolean | void;
1525
1571
  }
1526
1572
 
1527
- /** @deprecated Renamed to `ReceivedCardProps`. */
1528
- export declare type VisitorCardProps = ReceivedCardProps;
1529
-
1530
1573
  export declare type VoteSelection = 'up' | 'down' | null;
1531
1574
 
1532
1575
  export { }
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-BCgRoF_u.js";
1
+ import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-DO_dYsIf.js";
2
2
  export {
3
3
  e as ActionButton,
4
4
  t as Avatar,
package/dist/testing.d.ts CHANGED
@@ -47,6 +47,7 @@ export declare interface MessageMetadata {
47
47
  amount_text?: string;
48
48
  payment_status?: PaymentStatus;
49
49
  attachment_title?: string;
50
+ attachment_type?: 'text' | 'media';
50
51
  attachment_mime_type?: string;
51
52
  attachment_thumbnail?: string;
52
53
  attachment_detail?: string;
@@ -0,0 +1,2 @@
1
+ "use strict";const e=require("react/jsx-runtime"),m=require("classnames"),g=require("./index-DpzmKL5U.cjs"),b=require("react"),h=require("@phosphor-icons/react"),T=({variant:s,title:t,placeholderTitle:r="Attachment title",mimeType:i,detail:a,statusBadge:n,action:d,icon:u,trailingAction:o})=>{const l=s==="dark",c=l?t??r:t??"",x=l&&!t,f=u??g.renderTypeIcon(i,{className:m("size-5 shrink-0",l?"text-white/55":"text-black/55"),weight:"regular"});return e.jsxs("div",{className:"px-4 py-3",children:[e.jsxs("div",{className:"flex items-end gap-3",children:[e.jsxs("div",{className:"flex min-w-0 flex-1 flex-col gap-1",children:[c.trim()!==""&&e.jsx("p",{className:m("truncate text-base font-medium leading-6",{"text-black/90":!l,"text-white/30":l&&x,"text-white":l&&!x}),children:c}),e.jsxs("div",{className:"flex flex-wrap items-center gap-1",children:[f,a!=null&&a!==""&&e.jsx("span",{className:m("text-xs font-medium",l?"text-white/55":"text-black/55"),children:a}),n]})]}),o&&e.jsx("div",{className:"shrink-0",children:o})]}),d]})},N=({paymentStatus:s,mimeType:t,isPlayable:r})=>{const i=t?g.getSourceType(t):void 0,n=r??(i==="video"||i==="audio")?h.PlayIcon:s==="paid"?h.LockOpenIcon:h.LockSimpleIcon;return e.jsx("div",{className:"pointer-events-none absolute inset-0 flex items-center justify-center",children:e.jsx("div",{className:"flex size-12 items-center justify-center rounded-full bg-black/25 text-white",children:e.jsx(n,{className:"size-6",weight:"fill"})})})};function P(s){const t=g.getSourceType(s.mimeType);return t==="video"||t==="audio"}const z=({variant:s,gallery:t,title:r,showLocked:i,paymentStatus:a,topRight:n})=>{const[d,u]=b.useState(0),o=t.length,l=Math.min(d,o-1),c=t[l],x=P(c),f=p=>{p.stopPropagation(),u(v=>Math.max(0,v-1))},k=p=>{p.stopPropagation(),u(v=>Math.min(o-1,v+1))},j=l===0,y=l===o-1,I=s==="dark";return e.jsxs("div",{className:"relative aspect-[337/386] overflow-hidden rounded-t-md",children:[i?e.jsx("div",{className:m("absolute inset-0",I?"bg-white/10":"bg-black/5"),children:c.thumbnailUrl&&e.jsx("img",{src:c.thumbnailUrl,alt:"","aria-hidden":!0,draggable:!1,className:"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"})}):e.jsx(g.AttachmentThumbnail,{mimeType:c.mimeType,sourceUrl:c.sourceUrl,thumbnailUrl:c.thumbnailUrl,title:r,variant:s}),(x||i)&&e.jsx(N,{paymentStatus:a,isPlayable:x}),o>1&&e.jsxs(b.Fragment,{children:[e.jsx("button",{type:"button",onClick:f,disabled:j,"aria-label":"Previous item",className:m("absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",j?"opacity-40":"hover:bg-black/40"),children:e.jsx(h.CaretLeftIcon,{className:"size-5",weight:"bold"})}),e.jsx("button",{type:"button",onClick:k,disabled:y,"aria-label":"Next item",className:m("absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",y?"opacity-40":"hover:bg-black/40"),children:e.jsx(h.CaretRightIcon,{className:"size-5",weight:"bold"})}),e.jsx("div",{className:"pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1",children:e.jsxs("span",{className:"text-xs font-medium leading-4 text-white",children:[l+1,"/",o]})})]}),n&&e.jsx("div",{className:"pointer-events-auto absolute right-3 top-3 z-10",children:n})]})},U=({variant:s,mimeType:t,thumbnailUrl:r,title:i,source:a,showLocked:n,paymentStatus:d,topRight:u,containedImage:o=!1})=>{const l=n||a==null?void 0:a.sourceUrl,c=n?r:(a==null?void 0:a.thumbnailUrl)??r,x=s==="dark";return e.jsxs("div",{className:"relative overflow-hidden rounded-t-md",children:[n?e.jsxs("div",{className:m("relative aspect-video overflow-hidden",x?"bg-white/10":"bg-black/5"),children:[c?e.jsx("img",{src:c,alt:"","aria-hidden":!0,draggable:!1,className:"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"}):e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:g.renderTypeIcon(t,{className:x?"size-12 text-white/20":"size-12 text-black/20",weight:"regular"})}),e.jsx(N,{paymentStatus:d,mimeType:t})]}):e.jsx(g.AttachmentThumbnail,{mimeType:t,sourceUrl:l,thumbnailUrl:c,title:i,variant:s,containedImage:o,mediaPlayerProps:l?{autoPlay:!0,loop:!0,controls:!0,muted:!1}:void 0}),u&&e.jsx("div",{className:"pointer-events-auto absolute right-3 top-3 z-10",children:u})]})},w=s=>s.length>=2,_=s=>e.jsx(h.ImagesIcon,{className:s==="dark"?"size-5 shrink-0 text-white/55":"size-5 shrink-0 text-black/55"}),S=({variant:s,gallery:t,title:r,showLocked:i,paymentStatus:a,mimeType:n,thumbnailUrl:d,source:u,containedImage:o,topRight:l})=>w(t)?e.jsx(z,{variant:s,gallery:t,title:r,showLocked:i,paymentStatus:a,topRight:l}):e.jsx(U,{variant:s,mimeType:n,thumbnailUrl:d,title:r,source:u,showLocked:i,paymentStatus:a,topRight:l,containedImage:o}),C=({variant:s,children:t,rootRef:r,"data-testid":i})=>e.jsx("div",{ref:r,"data-testid":i,className:m("relative w-[280px] select-none overflow-hidden rounded-md","shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]",s==="dark"?"bg-[#1e2330]":"bg-white"),children:t}),D=({onToggle:s,isBusy:t,isPreviewVisible:r,children:i})=>s?e.jsx("div",{role:"button",tabIndex:t?-1:0,"aria-label":"Toggle preview","aria-busy":t,"aria-pressed":r,"aria-disabled":t||void 0,onClick:t?void 0:s,onKeyDown:a=>{t||a.target===a.currentTarget&&(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),s())},className:t?"block w-full text-left":"block w-full cursor-pointer text-left",children:i}):e.jsx(b.Fragment,{children:i});function q({isGallery:s,onFetchSource:t,onPreviewClick:r}){const[i,a]=b.useState(),[n,d]=b.useState(!1),[u,o]=b.useState(!1),l=b.useRef(!1),c=b.useCallback(async()=>{if(r==null||r(),n){d(!1);return}if(s){d(!0);return}if(i){d(!0);return}if(t&&!l.current){l.current=!0,o(!0);try{const f=await t();f&&(a(f),d(!0))}finally{l.current=!1,o(!1)}}},[n,s,i,r,t]),x=s||t!=null||r!=null?c:void 0;return{source:i,isPreviewVisible:n,isLoadingPreview:u,handleToggle:c,togglePreview:x}}exports.CardBody=T;exports.CardThumbnail=S;exports.MediaShell=C;exports.PreviewToggle=D;exports.galleryBodyIcon=_;exports.isGalleryCard=w;exports.usePreviewToggle=q;
2
+ //# sourceMappingURL=usePreviewToggle-B5kmPELX.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePreviewToggle-B5kmPELX.cjs","sources":["../src/components/LockedAttachment/components/_shared/CardBody.tsx","../src/components/LockedAttachment/components/_shared/LockBadge.tsx","../src/components/LockedAttachment/components/_shared/GalleryThumbnail.tsx","../src/components/LockedAttachment/components/_shared/SingleThumbnail.tsx","../src/components/LockedAttachment/components/_shared/CardThumbnail.tsx","../src/components/LockedAttachment/components/_shared/MediaShell.tsx","../src/components/LockedAttachment/components/_shared/PreviewToggle.tsx","../src/components/LockedAttachment/components/_shared/usePreviewToggle.ts"],"sourcesContent":["import classNames from 'classnames'\nimport React from 'react'\n\nimport { renderTypeIcon } from '../../../AttachmentCard'\n\nimport type { CardVariant } from './MediaShell'\n\nexport interface CardBodyProps {\n variant: CardVariant\n title?: string\n placeholderTitle?: string\n mimeType: string\n detail?: string\n statusBadge?: React.ReactNode\n action?: React.ReactNode\n /** Overrides the auto-detected type icon (used by Gallery to swap in an `Images` icon). */\n icon?: React.ReactNode\n /** Optional control rendered on the right of the title/status block (e.g. Composer edit pencil). */\n trailingAction?: React.ReactNode\n}\n\n/**\n * Title + status row layout shared by Composer and `LockedAttachment.Media`.\n * Layout matches the Figma `Container > Labels` group (16px h-padding, 12px v-padding,\n * 4px gap between title and status row, 4px gap inside status row).\n */\nconst CardBody: React.FC<CardBodyProps> = ({\n variant,\n title,\n placeholderTitle = 'Attachment title',\n mimeType,\n detail,\n statusBadge,\n action,\n icon,\n trailingAction,\n}) => {\n const isDark = variant === 'dark'\n const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')\n const titleDimmed = isDark && !title\n\n const typeIcon =\n icon ??\n renderTypeIcon(mimeType, {\n className: classNames(\n 'size-5 shrink-0',\n isDark ? 'text-white/55' : 'text-black/55'\n ),\n weight: 'regular',\n })\n\n return (\n <div className=\"px-4 py-3\">\n <div className=\"flex items-end gap-3\">\n <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n {displayTitle.trim() !== '' && (\n <p\n className={classNames('truncate text-base font-medium leading-6', {\n 'text-black/90': !isDark,\n 'text-white/30': isDark && titleDimmed,\n 'text-white': isDark && !titleDimmed,\n })}\n >\n {displayTitle}\n </p>\n )}\n\n <div className=\"flex flex-wrap items-center gap-1\">\n {typeIcon}\n\n {detail != null && detail !== '' && (\n <span\n className={classNames(\n 'text-xs font-medium',\n isDark ? 'text-white/55' : 'text-black/55'\n )}\n >\n {detail}\n </span>\n )}\n\n {statusBadge}\n </div>\n </div>\n\n {trailingAction && <div className=\"shrink-0\">{trailingAction}</div>}\n </div>\n\n {action}\n </div>\n )\n}\n\nexport default CardBody\n","import { LockOpenIcon, LockSimpleIcon, PlayIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getSourceType } from '../../../AttachmentCard'\nimport type { PaymentStatus } from '../../types'\n\nexport interface LockBadgeProps {\n paymentStatus?: PaymentStatus\n mimeType?: string\n /**\n * Overrides the `mimeType`-derived playable check. Lets a caller that\n * already knows per-item playability (e.g. `GalleryThumbnail`, checking a\n * carousel item's own mimeType rather than the card's single `mimeType`)\n * skip re-deriving it.\n */\n isPlayable?: boolean\n}\n\n/**\n * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.\n * Uses `bg-black/25` from the design system's `alpha-black-25` token.\n *\n * For playable media (video/audio), the badge shows a play icon instead of a\n * lock — matching the convention used by `GalleryThumbnail`.\n */\nexport const LockBadge: React.FC<LockBadgeProps> = ({\n paymentStatus,\n mimeType,\n isPlayable,\n}) => {\n const sourceType = mimeType ? getSourceType(mimeType) : undefined\n const resolvedIsPlayable =\n isPlayable ?? (sourceType === 'video' || sourceType === 'audio')\n\n const Icon = resolvedIsPlayable\n ? PlayIcon\n : paymentStatus === 'paid'\n ? LockOpenIcon\n : LockSimpleIcon\n return (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"flex size-12 items-center justify-center rounded-full bg-black/25 text-white\">\n <Icon className=\"size-6\" weight=\"fill\" />\n </div>\n </div>\n )\n}\n\nexport default LockBadge\n","import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useState } from 'react'\n\nimport { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'\nimport type {\n LockedAttachmentGalleryItem,\n PaymentStatus,\n} from '../../types'\n\nimport { LockBadge } from './LockBadge'\nimport type { CardVariant } from './MediaShell'\n\nexport interface GalleryThumbnailProps {\n variant: CardVariant\n gallery: LockedAttachmentGalleryItem[]\n title?: string\n /** When true, all items are shown blurred + the locked/play badge is overlaid. */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right slot (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n}\n\nfunction isPlayableItem(item: LockedAttachmentGalleryItem): boolean {\n const sourceType = getSourceType(item.mimeType)\n return sourceType === 'video' || sourceType === 'audio'\n}\n\n/**\n * Mixed-media carousel used by every LockedAttachment card when its `gallery`\n * prop has 2+ items. Matches the \"Gallery\" frames in the Figma design system:\n * 337/386 aspect ratio, prev/next caret buttons, a counter pill, and a center\n * lock / play indicator that swaps based on the current item.\n */\nconst GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({\n variant,\n gallery,\n title,\n showLocked,\n paymentStatus,\n topRight,\n}) => {\n const [index, setIndex] = useState(0)\n const total = gallery.length\n const safeIndex = Math.min(index, total - 1)\n const current = gallery[safeIndex]\n const isVideoItem = isPlayableItem(current)\n\n // Stop propagation so arrow taps don't bubble up to the outer preview-toggle\n // wrapper on ComposerCard / OwnMediaCard.\n const goPrev = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.max(0, i - 1))\n }\n const goNext = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.min(total - 1, i + 1))\n }\n const atStart = safeIndex === 0\n const atEnd = safeIndex === total - 1\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `<img>` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam at the 16:9 boundary\n // inside the taller 337/386 gallery aspect).\n //\n // The locked branch uses `filter: blur` on a single full-size `<img>`\n // — not `backdrop-filter` — so the rounded corners are clipped\n // normally without any clip-path workarounds (see SingleThumbnail).\n return (\n <div className=\"relative aspect-[337/386] overflow-hidden rounded-t-md\">\n {showLocked ? (\n <div\n className={classNames(\n 'absolute inset-0',\n isDark ? 'bg-white/10' : 'bg-black/5'\n )}\n >\n {current.thumbnailUrl && (\n <img\n src={current.thumbnailUrl}\n alt=\"\"\n aria-hidden\n draggable={false}\n // `scale-110` hides the fuzzy edge that `filter: blur` leaves\n // around the image bounds.\n className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n />\n )}\n </div>\n ) : (\n <AttachmentThumbnail\n mimeType={current.mimeType}\n sourceUrl={current.sourceUrl}\n thumbnailUrl={current.thumbnailUrl}\n title={title}\n variant={variant}\n />\n )}\n\n {/* PLAY for video items (locked or not — video needs a play affordance\n either way); LOCK for non-video locked items. Unlocked non-video\n items show no badge — the image is the content. */}\n {(isVideoItem || showLocked) && (\n <LockBadge paymentStatus={paymentStatus} isPlayable={isVideoItem} />\n )}\n\n {total > 1 && (\n <React.Fragment>\n <button\n type=\"button\"\n onClick={goPrev}\n disabled={atStart}\n aria-label=\"Previous item\"\n className={classNames(\n 'absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n atStart ? 'opacity-40' : 'hover:bg-black/40'\n )}\n >\n <CaretLeftIcon className=\"size-5\" weight=\"bold\" />\n </button>\n <button\n type=\"button\"\n onClick={goNext}\n disabled={atEnd}\n aria-label=\"Next item\"\n className={classNames(\n 'absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n atEnd ? 'opacity-40' : 'hover:bg-black/40'\n )}\n >\n <CaretRightIcon className=\"size-5\" weight=\"bold\" />\n </button>\n\n <div className=\"pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1\">\n <span className=\"text-xs font-medium leading-4 text-white\">\n {safeIndex + 1}/{total}\n </span>\n </div>\n </React.Fragment>\n )}\n\n {topRight && (\n <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n {topRight}\n </div>\n )}\n </div>\n )\n}\n\nexport default GalleryThumbnail\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport {\n AttachmentThumbnail,\n renderTypeIcon,\n} from '../../../AttachmentCard'\nimport type { LockedAttachmentSource, PaymentStatus } from '../../types'\n\nimport { LockBadge } from './LockBadge'\nimport type { CardVariant } from './MediaShell'\n\nexport interface SingleThumbnailProps {\n variant: CardVariant\n mimeType: string\n thumbnailUrl?: string\n title?: string\n /**\n * When provided, the underlying source is shown unblurred (preview / unlocked state).\n * When undefined, the thumbnail is treated as locked: blurred with a central lock badge.\n */\n source?: LockedAttachmentSource\n /**\n * Forces the locked appearance even when a source is provided. Used for the\n * Composer card where the locked treatment is the default and the user toggles\n * a preview in place.\n */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right overlay (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n /** When true, renders the unlocked image with aspect-video + object-contain. */\n containedImage?: boolean\n}\n\n/**\n * Renders the 180px-tall media area for a LockedAttachment card.\n * Handles three visual states:\n * - locked: blurred thumbnail + centered 48px lock badge\n * - preview/paid: clear thumbnail (the underlying source)\n * - empty: type-icon placeholder\n */\nconst SingleThumbnail: React.FC<SingleThumbnailProps> = ({\n variant,\n mimeType,\n thumbnailUrl,\n title,\n source,\n showLocked,\n paymentStatus,\n topRight,\n containedImage = false,\n}) => {\n const effectiveSourceUrl = showLocked ? undefined : source?.sourceUrl\n const effectiveThumbnailUrl = showLocked\n ? thumbnailUrl\n : (source?.thumbnailUrl ?? thumbnailUrl)\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `<img>` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam at the 16:9 boundary).\n //\n // The locked branch uses `filter: blur` on a single full-size `<img>`\n // — not `backdrop-filter` — because `backdrop-filter` paints in its\n // own compositing layer that escapes ancestor `overflow: hidden` on\n // Chrome/Safari and flattens the card's top corners. `filter` is\n // clipped normally, so the rounded corners stay round without any\n // clip-path workarounds.\n return (\n <div className=\"relative overflow-hidden rounded-t-md\">\n {showLocked ? (\n <div\n className={classNames(\n 'relative aspect-video overflow-hidden',\n isDark ? 'bg-white/10' : 'bg-black/5'\n )}\n >\n {effectiveThumbnailUrl ? (\n <img\n src={effectiveThumbnailUrl}\n alt=\"\"\n aria-hidden\n draggable={false}\n // `scale-110` hides the fuzzy semi-transparent edge that\n // `filter: blur` leaves around the image bounds.\n className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n />\n ) : (\n <div className=\"absolute inset-0 flex items-center justify-center\">\n {renderTypeIcon(mimeType, {\n className: isDark\n ? 'size-12 text-white/20'\n : 'size-12 text-black/20',\n weight: 'regular',\n })}\n </div>\n )}\n <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />\n </div>\n ) : (\n <AttachmentThumbnail\n mimeType={mimeType}\n sourceUrl={effectiveSourceUrl}\n thumbnailUrl={effectiveThumbnailUrl}\n title={title}\n variant={variant}\n containedImage={containedImage}\n mediaPlayerProps={\n effectiveSourceUrl\n ? { autoPlay: true, loop: true, controls: true, muted: false }\n : undefined\n }\n />\n )}\n\n {topRight && (\n <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n {topRight}\n </div>\n )}\n </div>\n )\n}\n\nexport default SingleThumbnail\n","import { ImagesIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\nimport type {\n LockedAttachmentGalleryItem,\n LockedAttachmentSource,\n PaymentStatus,\n} from '../../types'\n\nimport GalleryThumbnail from './GalleryThumbnail'\nimport type { CardVariant } from './MediaShell'\nimport SingleThumbnail from './SingleThumbnail'\n\nexport interface CardThumbnailProps {\n variant: CardVariant\n gallery: LockedAttachmentGalleryItem[]\n title?: string\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Single-asset props — ignored when the card renders as a gallery. */\n mimeType: string\n thumbnailUrl?: string\n source?: LockedAttachmentSource\n containedImage?: boolean\n /** Top-right overlay (e.g. Composer dismiss X). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n}\n\n/** True when the card should render as a mixed-media carousel (2+ items). */\nexport const isGalleryCard = (\n gallery: LockedAttachmentGalleryItem[]\n): boolean => gallery.length >= 2\n\n/**\n * The body-row icon a card shows when it renders as a gallery — `CardBody`\n * otherwise auto-detects the icon from `mimeType`. Returned as a ready node so\n * every card shares the same size/tone treatment.\n */\nexport const galleryBodyIcon = (\n variant: CardVariant\n): React.ReactNode => (\n <ImagesIcon\n className={\n variant === 'dark'\n ? 'size-5 shrink-0 text-white/55'\n : 'size-5 shrink-0 text-black/55'\n }\n />\n)\n\n/**\n * Owns the single-vs-gallery thumbnail decision shared by Composer /\n * `LockedAttachment.Media` cards: renders `GalleryThumbnail` for a 2+ item `gallery`,\n * else `SingleThumbnail` for the single asset. Callers pass the superset of\n * props; the unused half is ignored by whichever branch renders.\n */\nconst CardThumbnail: React.FC<CardThumbnailProps> = ({\n variant,\n gallery,\n title,\n showLocked,\n paymentStatus,\n mimeType,\n thumbnailUrl,\n source,\n containedImage,\n topRight,\n}) =>\n isGalleryCard(gallery) ? (\n <GalleryThumbnail\n variant={variant}\n gallery={gallery}\n title={title}\n showLocked={showLocked}\n paymentStatus={paymentStatus}\n topRight={topRight}\n />\n ) : (\n <SingleThumbnail\n variant={variant}\n mimeType={mimeType}\n thumbnailUrl={thumbnailUrl}\n title={title}\n source={source}\n showLocked={showLocked}\n paymentStatus={paymentStatus}\n topRight={topRight}\n containedImage={containedImage}\n />\n )\n\nexport default CardThumbnail\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport type CardVariant = 'dark' | 'light'\n\nexport interface MediaShellProps {\n variant: CardVariant\n children: React.ReactNode\n rootRef?: React.Ref<HTMLDivElement>\n 'data-testid'?: string\n}\n\n/**\n * Outer chrome for every LockedAttachment card.\n * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.\n */\nconst MediaShell: React.FC<MediaShellProps> = ({\n variant,\n children,\n rootRef,\n 'data-testid': dataTestId,\n}) => (\n <div\n ref={rootRef}\n data-testid={dataTestId}\n className={classNames(\n 'relative w-[280px] select-none overflow-hidden rounded-md',\n 'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',\n variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white'\n )}\n >\n {children}\n </div>\n)\n\nexport default MediaShell\n","import React from 'react'\n\nexport interface PreviewToggleProps {\n /** Toggles the preview; omit to render `children` with no wrapper at all (nothing to toggle). */\n onToggle: (() => void | Promise<void>) | undefined\n isBusy: boolean\n isPreviewVisible: boolean\n children: React.ReactNode\n}\n\n/**\n * Makes a locked thumbnail clickable to toggle its preview. Uses a\n * `role=\"button\"` div rather than a native `<button>` because the thumbnail\n * it wraps can itself contain interactive children (gallery carousel arrows,\n * a Composer dismiss X) — nesting a real `<button>` around those would\n * produce invalid, inaccessible nested-interactive-element markup.\n */\nconst PreviewToggle: React.FC<PreviewToggleProps> = ({\n onToggle,\n isBusy,\n isPreviewVisible,\n children,\n}) => {\n if (!onToggle) return <React.Fragment>{children}</React.Fragment>\n\n return (\n <div\n role=\"button\"\n tabIndex={isBusy ? -1 : 0}\n aria-label=\"Toggle preview\"\n aria-busy={isBusy}\n aria-pressed={isPreviewVisible}\n aria-disabled={isBusy || undefined}\n onClick={isBusy ? undefined : onToggle}\n onKeyDown={(e) => {\n if (isBusy) return\n // Only handle keys that originate on the wrapper itself, not on\n // inner interactive elements (dismiss X, carousel arrows). Without\n // this guard, pressing Enter/Space on a focused child would bubble\n // up and toggle the preview in addition to activating the child.\n if (e.target !== e.currentTarget) return\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n void onToggle()\n }\n }}\n className={\n !isBusy\n ? 'block w-full cursor-pointer text-left'\n : 'block w-full text-left'\n }\n >\n {children}\n </div>\n )\n}\n\nexport default PreviewToggle\n","import { useCallback, useRef, useState } from 'react'\n\nimport type { LockedAttachmentSource } from '../../types'\n\nexport interface UsePreviewToggleOptions {\n /** Gallery items carry their own per-item sources on the `gallery` prop already, so toggling skips the async fetch entirely. */\n isGallery: boolean\n /**\n * Lazily loads the underlying source; the resolved value is cached in\n * `source` and reused on subsequent toggles.\n */\n onFetchSource?: () => Promise<LockedAttachmentSource | void>\n /** Fired on every toggle tap, before any visibility/fetch logic runs. */\n onPreviewClick?: () => void\n}\n\nexport interface UsePreviewToggleResult {\n source: LockedAttachmentSource | undefined\n isPreviewVisible: boolean\n isLoadingPreview: boolean\n handleToggle: () => Promise<void>\n /**\n * `handleToggle` when the card can actually be previewed (gallery, or a\n * fetch/click handler is wired), else `undefined` — pass straight to\n * `PreviewToggle.onToggle` so a non-previewable card renders no\n * toggle affordance.\n */\n togglePreview: (() => Promise<void>) | undefined\n}\n\n/**\n * Shared preview-toggle state for Composer/Media isMine: flips a locked thumbnail to\n * its unlocked preview, lazily fetching and caching the source on first\n * reveal. Media !isMine doesn't use this — it fetches on scroll-into-view/paid\n * instead of on a toggle tap.\n */\nexport function usePreviewToggle({\n isGallery,\n onFetchSource,\n onPreviewClick,\n}: UsePreviewToggleOptions): UsePreviewToggleResult {\n const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n const [isPreviewVisible, setIsPreviewVisible] = useState(false)\n const [isLoadingPreview, setIsLoadingPreview] = useState(false)\n const fetchingRef = useRef(false)\n\n const handleToggle = useCallback(async () => {\n onPreviewClick?.()\n if (isPreviewVisible) {\n setIsPreviewVisible(false)\n return\n }\n if (isGallery) {\n setIsPreviewVisible(true)\n return\n }\n if (source) {\n setIsPreviewVisible(true)\n return\n }\n if (!onFetchSource) return\n if (fetchingRef.current) return\n fetchingRef.current = true\n setIsLoadingPreview(true)\n try {\n const result = await onFetchSource()\n if (result) {\n setSource(result)\n setIsPreviewVisible(true)\n }\n } finally {\n fetchingRef.current = false\n setIsLoadingPreview(false)\n }\n }, [isPreviewVisible, isGallery, source, onPreviewClick, onFetchSource])\n\n const togglePreview =\n isGallery || onFetchSource != null || onPreviewClick != null\n ? handleToggle\n : undefined\n\n return {\n source,\n isPreviewVisible,\n isLoadingPreview,\n handleToggle,\n togglePreview,\n }\n}\n"],"names":["CardBody","variant","title","placeholderTitle","mimeType","detail","statusBadge","action","icon","trailingAction","isDark","displayTitle","titleDimmed","typeIcon","renderTypeIcon","classNames","jsxs","jsx","LockBadge","paymentStatus","isPlayable","sourceType","getSourceType","Icon","PlayIcon","LockOpenIcon","LockSimpleIcon","isPlayableItem","item","GalleryThumbnail","gallery","showLocked","topRight","index","setIndex","useState","total","safeIndex","current","isVideoItem","goPrev","e","i","goNext","atStart","atEnd","AttachmentThumbnail","React","CaretLeftIcon","CaretRightIcon","SingleThumbnail","thumbnailUrl","source","containedImage","effectiveSourceUrl","effectiveThumbnailUrl","isGalleryCard","galleryBodyIcon","ImagesIcon","CardThumbnail","MediaShell","children","rootRef","dataTestId","PreviewToggle","onToggle","isBusy","isPreviewVisible","usePreviewToggle","isGallery","onFetchSource","onPreviewClick","setSource","setIsPreviewVisible","isLoadingPreview","setIsLoadingPreview","fetchingRef","useRef","handleToggle","useCallback","result","togglePreview"],"mappings":"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"}