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

package/src/components/LockedAttachment/components/_shared/SkeletonTextLines.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames'
+import React from 'react'
+
+export interface SkeletonTextLinesProps {
+  /** Matches the bubble it sits in — "dark" for the sender's own bubble. */
+  variant: 'light' | 'dark'
+  /**
+   * Whether the bars pulse. Pass `false` once the outcome is settled (paid,
+   * failed, refunded) — a static skeleton reads as "nothing more will
+   * change", while a pulsing one implies something is still in flight.
+   */
+  animate: boolean
+}
+
+/**
+ * Two skeleton bars standing in for the redacted text of a paid text-only
+ * message — the real content is never sent to the client until purchase, so
+ * there's nothing to render yet.
+ *
+ * Uses explicit black/white (not `bg-current`) because Tailwind doesn't
+ * support opacity modifiers on the `current` color — `bg-current/30` silently
+ * produces no CSS rule at all.
+ */
+const SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({
+  variant = 'dark',
+  animate = true,
+}) => {
+  const pulse = animate ? 'animate-pulse motion-reduce:animate-none' : ''
+  const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'
+
+  return (
+    <div className="flex flex-col gap-2 str-chat__message-text my-1" aria-hidden>
+      <div className={classNames('h-3 w-40 rounded-full', pulse, colour)} />
+      <div className={classNames('h-3 w-24 rounded-full', pulse, colour)} />
+    </div>
+  )
+}
+
+export default SkeletonTextLines

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

@@ -0,0 +1,19 @@
+import classNames from 'classnames'
+import React from 'react'
+
+const TextShell: React.FC<React.PropsWithChildren<{ className?: string }>> = ({
+  children,
+  className,
+}) => (
+  <div
+    className={classNames(
+      'str-chat__message-bubble message-locked-attachment-text',
+      'px-4 py-3 flex flex-col gap-1',
+      className
+    )}
+  >
+    {children}
+  </div>
+)
+
+export default TextShell

package/src/components/LockedAttachment/components/_shared/usePreviewToggle.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from 'vitest'
+
+import { act, renderHook } from '../../../../test/utils'
+
+import { usePreviewToggle } from './usePreviewToggle'
+
+const source = { sourceUrl: 'https://example.test/asset.mp4' }
+
+describe('usePreviewToggle', () => {
+  it('gallery: reveals without invoking the async source fetcher', async () => {
+    const onFetchSource = vi.fn().mockResolvedValue(source)
+    const onPreviewClick = vi.fn()
+    const { result } = renderHook(() =>
+      usePreviewToggle({ isGallery: true, onFetchSource, onPreviewClick })
+    )
+
+    await act(async () => {
+      await result.current.handleToggle()
+    })
+
+    expect(result.current.isPreviewVisible).toBe(true)
+    expect(onPreviewClick).toHaveBeenCalledTimes(1)
+    expect(onFetchSource).not.toHaveBeenCalled()
+  })
+
+  it('first reveal fetches the source, then caches it on subsequent toggles', async () => {
+    const onFetchSource = vi.fn().mockResolvedValue(source)
+    const { result } = renderHook(() =>
+      usePreviewToggle({ isGallery: false, onFetchSource })
+    )
+
+    // First reveal → fetches.
+    await act(async () => {
+      await result.current.handleToggle()
+    })
+    expect(result.current.isPreviewVisible).toBe(true)
+    expect(result.current.source).toEqual(source)
+    expect(onFetchSource).toHaveBeenCalledTimes(1)
+
+    // Toggle off.
+    await act(async () => {
+      await result.current.handleToggle()
+    })
+    expect(result.current.isPreviewVisible).toBe(false)
+
+    // Toggle back on → reuses the cache, no second fetch.
+    await act(async () => {
+      await result.current.handleToggle()
+    })
+    expect(result.current.isPreviewVisible).toBe(true)
+    expect(onFetchSource).toHaveBeenCalledTimes(1)
+  })
+
+  it('stays locked when the fetcher resolves without a source', async () => {
+    const onFetchSource = vi.fn().mockResolvedValue(undefined)
+    const { result } = renderHook(() =>
+      usePreviewToggle({ isGallery: false, onFetchSource })
+    )
+
+    await act(async () => {
+      await result.current.handleToggle()
+    })
+
+    expect(result.current.isPreviewVisible).toBe(false)
+    expect(result.current.source).toBeUndefined()
+  })
+})

package/src/components/LockedAttachment/components/_shared/usePreviewToggle.ts

@@ -0,0 +1,89 @@
+import { useCallback, useRef, useState } from 'react'
+
+import type { LockedAttachmentSource } from '../../types'
+
+export interface UsePreviewToggleOptions {
+  /** Gallery items carry their own per-item sources on the `gallery` prop already, so toggling skips the async fetch entirely. */
+  isGallery: boolean
+  /**
+   * Lazily loads the underlying source; the resolved value is cached in
+   * `source` and reused on subsequent toggles.
+   */
+  onFetchSource?: () => Promise<LockedAttachmentSource | void>
+  /** Fired on every toggle tap, before any visibility/fetch logic runs. */
+  onPreviewClick?: () => void
+}
+
+export interface UsePreviewToggleResult {
+  source: LockedAttachmentSource | undefined
+  isPreviewVisible: boolean
+  isLoadingPreview: boolean
+  handleToggle: () => Promise<void>
+  /**
+   * `handleToggle` when the card can actually be previewed (gallery, or a
+   * fetch/click handler is wired), else `undefined` — pass straight to
+   * `PreviewToggle.onToggle` so a non-previewable card renders no
+   * toggle affordance.
+   */
+  togglePreview: (() => Promise<void>) | undefined
+}
+
+/**
+ * Shared preview-toggle state for Composer/Media isMine: flips a locked thumbnail to
+ * its unlocked preview, lazily fetching and caching the source on first
+ * reveal. Media !isMine doesn't use this — it fetches on scroll-into-view/paid
+ * instead of on a toggle tap.
+ */
+export function usePreviewToggle({
+  isGallery,
+  onFetchSource,
+  onPreviewClick,
+}: UsePreviewToggleOptions): UsePreviewToggleResult {
+  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
+  const [isPreviewVisible, setIsPreviewVisible] = useState(false)
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
+  const fetchingRef = useRef(false)
+
+  const handleToggle = useCallback(async () => {
+    onPreviewClick?.()
+    if (isPreviewVisible) {
+      setIsPreviewVisible(false)
+      return
+    }
+    if (isGallery) {
+      setIsPreviewVisible(true)
+      return
+    }
+    if (source) {
+      setIsPreviewVisible(true)
+      return
+    }
+    if (!onFetchSource) return
+    if (fetchingRef.current) return
+    fetchingRef.current = true
+    setIsLoadingPreview(true)
+    try {
+      const result = await onFetchSource()
+      if (result) {
+        setSource(result)
+        setIsPreviewVisible(true)
+      }
+    } finally {
+      fetchingRef.current = false
+      setIsLoadingPreview(false)
+    }
+  }, [isPreviewVisible, isGallery, source, onPreviewClick, onFetchSource])
+
+  const togglePreview =
+    isGallery || onFetchSource != null || onPreviewClick != null
+      ? handleToggle
+      : undefined
+
+  return {
+    source,
+    isPreviewVisible,
+    isLoadingPreview,
+    handleToggle,
+    togglePreview,
+  }
+}

package/src/components/LockedAttachment/components/_shared/useReceivedSource.ts

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import type {
+  FetchSourceHandler,
+  LockedAttachmentSource,
+  PaymentStatus,
+} from '../../types'
+
+export interface UseReceivedSourceOptions {
+  paymentStatus?: PaymentStatus
+  onFetchSource?: FetchSourceHandler
+  /** Called on Unlock click while the card is still unpaid (opens checkout). */
+  onUnlockClick?: () => void
+}
+
+export interface UseReceivedSourceResult {
+  source: LockedAttachmentSource | undefined
+  /** Attach to the card root so the paid-source auto-fetch can observe it. */
+  cardRef: React.RefObject<HTMLDivElement>
+  /** Fetches the source when already paid, else defers to `onUnlockClick`. */
+  handleUnlockClick: () => void
+}
+
+/**
+ * Media !isMine's source-reveal logic: unlike Composer/Media isMine's
+ * tap-to-toggle (`usePreviewToggle`), the recipient's card reveals its source
+ * by fetching once — on click when already paid, or automatically the first
+ * time a paid card scrolls fully into view. The fetch is guarded so it runs
+ * at most once in flight.
+ */
+export function useReceivedSource({
+  paymentStatus,
+  onFetchSource,
+  onUnlockClick,
+}: UseReceivedSourceOptions): UseReceivedSourceResult {
+  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
+
+  const cardRef = useRef<HTMLDivElement>(null)
+  const fetchingRef = useRef(false)
+
+  const onFetchSourceRef = useRef(onFetchSource)
+  onFetchSourceRef.current = onFetchSource
+
+  const fetchSource = useCallback(async (): Promise<void> => {
+    if (fetchingRef.current) return
+    fetchingRef.current = true
+    try {
+      const result = await onFetchSourceRef.current?.()
+      if (result) setSource(result)
+    } finally {
+      fetchingRef.current = false
+    }
+  }, [])
+
+  const handleUnlockClick = useCallback(() => {
+    if (paymentStatus === 'paid') {
+      void fetchSource()
+    } else {
+      onUnlockClick?.()
+    }
+  }, [paymentStatus, fetchSource, onUnlockClick])
+
+  // Auto-fetch the source once the paid card scrolls into view.
+  useEffect(() => {
+    if (!cardRef.current) return
+    if (paymentStatus !== 'paid' || source !== undefined) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          void fetchSource()
+          observer.disconnect()
+        }
+      },
+      { threshold: 1.0 }
+    )
+
+    observer.observe(cardRef.current)
+    return () => observer.disconnect()
+  }, [paymentStatus, source, fetchSource])
+
+  return { source, cardRef, handleUnlockClick }
+}

package/src/components/LockedAttachment/index.tsx

@@ -1,12 +1,12 @@
 import React, { Suspense } from 'react'
 
 import type { ComposerCardProps } from './components/Composer/Card'
-import type { ReceivedCardProps } from './components/Received/Card'
-import type { SentCardProps } from './components/Sent/Card'
+import type { MediaCardProps } from './components/Media/Card'
+import type { TextCardProps } from './components/Text/Card'
 
 const ComposerCardLazy = React.lazy(() => import('./components/Composer/Card'))
-const SentCardLazy = React.lazy(() => import('./components/Sent/Card'))
-const ReceivedCardLazy = React.lazy(() => import('./components/Received/Card'))
+const TextCardLazy = React.lazy(() => import('./components/Text/Card'))
+const MediaCardLazy = React.lazy(() => import('./components/Media/Card'))
 
 const LockedAttachmentFallback = () => (
   <div
@@ -21,42 +21,31 @@ const Composer = (props: ComposerCardProps) => (
   </Suspense>
 )
 
-const Sent = (props: SentCardProps) => (
+const Text = (props: TextCardProps) => (
   <Suspense fallback={<LockedAttachmentFallback />}>
-    <SentCardLazy {...props} />
+    <TextCardLazy {...props} />
   </Suspense>
 )
 
-const Received = (props: ReceivedCardProps) => (
+const Media = (props: MediaCardProps) => (
   <Suspense fallback={<LockedAttachmentFallback />}>
-    <ReceivedCardLazy {...props} />
+    <MediaCardLazy {...props} />
   </Suspense>
 )
 
-/**
- * @deprecated Renamed to `LockedAttachment.Sent` (post-send sender card) or
- * `LockedAttachment.Composer` (drafting state). This alias maps to `Sent`
- * because that matches the previous in-thread usage; pre-send / drafting
- * usages (e.g. with `onDismiss`) should migrate to `LockedAttachment.Composer`.
- */
-const Creator = Sent
-
-/** @deprecated Renamed to `LockedAttachment.Received`. */
-const Visitor = Received
-
-const LockedAttachment = { Composer, Sent, Received, Creator, Visitor }
+const LockedAttachment = {
+  Composer,
+  Text,
+  Media,
+}
 
 export default LockedAttachment
-export type { ComposerCardProps, SentCardProps, ReceivedCardProps }
-/**
- * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
- * should migrate to `ComposerCardProps`.
- */
-export type CreatorCardProps = SentCardProps
-/** @deprecated Renamed to `ReceivedCardProps`. */
-export type VisitorCardProps = ReceivedCardProps
+export { default as PurchaseStatusBadge } from './components/_shared/PurchaseStatusBadge'
+export type { PurchaseStatusBadgeProps } from './components/_shared/PurchaseStatusBadge'
+export type { ComposerCardProps, TextCardProps, MediaCardProps }
 export type {
   PaymentStatus,
+  FetchSourceHandler,
   LockedAttachmentSource,
   LockedAttachmentGalleryItem,
   LockedAttachmentContextValue,

package/src/components/LockedAttachment/types.ts

@@ -4,19 +4,28 @@ import type { PaymentStatus } from '../../stream-custom-data'
 
 export interface LockedAttachmentBaseProps {
   title?: string
+  /** Dimmed fallback shown in the title slot when `title` is unset (no attachment metadata yet — still drafting). */
+  placeholderTitle?: string
   mimeType?: string
   thumbnailUrl?: string
   detail?: string
   amountText?: string
-  paymentStatus?: PaymentStatus
   /**
    * When provided with 2+ items, the card renders as a mixed-media carousel
    * (e.g. a couple of photos + a video) instead of a single thumbnail. Each
    * item brings its own thumbnail and optional source so that
-   * `LockedAttachment.Composer` / `.Sent` / `.Received` can all share the
-   * same carousel chrome.
+   * `LockedAttachment.Composer` / `.Media` can share the same carousel
+   * chrome.
    */
   gallery?: LockedAttachmentGalleryItem[]
+  /**
+   * "text" renders the card as a locked/plain chat bubble showing the
+   * message's own text (skeleton-blurred until purchased) instead of a media
+   * thumbnail card — for a paid text-only message. Media-only props
+   * (`mimeType`, `thumbnailUrl`, `title`, `detail`, `gallery`) are ignored in
+   * this mode. Defaults to `"media"`.
+   */
+  contentType?: 'text' | 'media'
 }
 
 export interface LockedAttachmentGalleryItem {
@@ -39,11 +48,26 @@ export interface LockedAttachmentSource {
 
 export type { PaymentStatus }
 
+/**
+ * Lazily fetches the underlying source (URL/thumbnail) for a locked
+ * attachment. Returns `void` to signal "no source available" — the card
+ * stays locked. Shared by `ComposerCardProps`/`MediaCardProps.onFetchSource`.
+ */
+export type FetchSourceHandler = () => Promise<LockedAttachmentSource | void>
+
 export interface LockedAttachmentContextValue {
   isUnlocking: (id: string) => boolean
   onUnlockClick?: (message: LocalMessage, channel: Channel) => void
   onDownloadClick?: (message: LocalMessage, channel: Channel) => void
-  onFetchSource?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource | void>
+  /**
+   * Reveal the locked media's underlying source (URL/thumbnail). Not used
+   * for a paid text message — the backend writes the real text directly onto
+   * the message on purchase and `message.text` alone drives that reveal.
+   */
+  onFetchSource?: (
+    message: LocalMessage,
+    channel: Channel
+  ) => Promise<LockedAttachmentSource | void>
 }
 
 export const defaultLockedAttachmentContextValue: LockedAttachmentContextValue = {

package/src/index.ts

@@ -70,13 +70,10 @@ export type { AvatarProps } from './components/Avatar'
 export type { ActionButtonProps } from './components/ActionButton'
 export type {
   ComposerCardProps,
-  SentCardProps,
-  ReceivedCardProps,
+  TextCardProps as LockedAttachmentTextCardProps,
+  MediaCardProps as LockedAttachmentMediaCardProps,
   LockedAttachmentGalleryItem,
   LockedAttachmentContextValue,
-  // Deprecated aliases preserved for backwards compatibility:
-  CreatorCardProps,
-  VisitorCardProps,
 } from './components/LockedAttachment'
 export type {
   ComposerCardProps as LinkAttachmentComposerCardProps,

package/src/stream-custom-data.ts

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

package/src/styles.css

@@ -831,3 +831,8 @@
   color: #016e1a;
   background-color: #dbf0e0;
 }
+
+/** Remove padding from the text inside the locked attachment text shell */
+.message-locked-attachment-text .str-chat__message-text {
+  padding: 0rem !important;
+}

package/dist/Card-BRvcFjsq.js

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

package/dist/Card-BRvcFjsq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-BRvcFjsq.js","sources":["../src/components/LockedAttachment/components/Composer/Card.tsx"],"sourcesContent":["import { ImagesIcon, PencilSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport React, { useCallback, useRef, useState } from 'react'\n\nimport type {\n  LockedAttachmentBaseProps,\n  LockedAttachmentSource,\n} from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport GalleryThumbnail from '../_shared/GalleryThumbnail'\nimport LockedCardShell from '../_shared/LockedCardShell'\nimport LockedThumbnail from '../_shared/LockedThumbnail'\n\nexport interface ComposerCardProps extends LockedAttachmentBaseProps {\n  /** Placeholder shown in the title slot before the composer types one. */\n  placeholderTitle?: string\n  /** Placeholder shown in the amount slot before one is configured. */\n  placeholderAmountText?: string\n  /**\n   * When provided, renders a dismiss X in the thumbnail corner. Called when\n   * the composer clicks it to remove the attachment.\n   */\n  onDismiss?: () => void\n  /** Fired the first time the composer taps the thumbnail to preview. */\n  onPreviewClick?: () => void\n  /**\n   * Lazily loads the underlying source so the composer can preview the\n   * attachment they're about to send. Called the first time the thumbnail is\n   * tapped; the returned source is cached and reused on subsequent toggles.\n   */\n  onFetchSource?: () => Promise<LockedAttachmentSource | void>\n  /**\n   * When provided, renders a pencil button in the body bottom-right that the\n   * composer can use to edit the attachment metadata (e.g. open the price /\n   * gallery editor). Matches the Composer \"Button\" instance in Figma.\n   */\n  onEditClick?: () => void\n}\n\n/**\n * The card the composer sees while drafting a paid attachment.\n * Matches the Composer column of the messaging design system in Figma.\n */\nconst ComposerCard: React.FC<ComposerCardProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  placeholderAmountText,\n  gallery,\n  onDismiss,\n  onPreviewClick,\n  onFetchSource,\n  onEditClick,\n}) => {\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n  const [isPreviewVisible, setIsPreviewVisible] = useState(false)\n  const [isLoadingPreview, setIsLoadingPreview] = useState(false)\n  const fetchingRef = useRef(false)\n\n  const isGallery = (gallery?.length ?? 0) >= 2\n\n  const handleToggle = useCallback(async () => {\n    onPreviewClick?.()\n    if (isPreviewVisible) {\n      setIsPreviewVisible(false)\n      return\n    }\n    // Gallery items carry their own per-item sources on the `gallery` prop, so\n    // we just flip visibility — no async source fetch is needed.\n    if (isGallery) {\n      setIsPreviewVisible(true)\n      return\n    }\n    if (source) {\n      setIsPreviewVisible(true)\n      return\n    }\n    if (!onFetchSource) return\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    setIsLoadingPreview(true)\n    try {\n      const result = await onFetchSource()\n      if (result) {\n        setSource(result)\n        setIsPreviewVisible(true)\n      }\n    } finally {\n      fetchingRef.current = false\n      setIsLoadingPreview(false)\n    }\n  }, [isPreviewVisible, isGallery, source, onPreviewClick, onFetchSource])\n\n  // Gallery is always previewable in the composer because each item's source\n  // is already provided up-front via `gallery[*].sourceUrl`.\n  const togglePreview =\n    isGallery || onFetchSource || onPreviewClick ? handleToggle : undefined\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\n\n  const statusBadge = (\n    <React.Fragment>\n      <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n      <span\n        className={\n          amountText\n            ? 'text-xs font-medium text-white/55'\n            : 'text-xs font-medium text-white/30'\n        }\n      >\n        {amountText || placeholderAmountText}\n      </span>\n    </React.Fragment>\n  )\n\n  const dismissButton = onDismiss ? (\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        // Stop the click from bubbling up into the outer preview-toggle\n        // wrapper when both are wired up at the same time.\n        e.stopPropagation()\n        onDismiss()\n      }}\n      className=\"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white\"\n      aria-label=\"Dismiss attachment\"\n    >\n      <XIcon className=\"size-3\" weight=\"bold\" />\n    </button>\n  ) : undefined\n\n  const editButton = onEditClick ? (\n    <button\n      type=\"button\"\n      onClick={onEditClick}\n      aria-label=\"Edit attachment\"\n      className=\"flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n    >\n      <PencilSimpleIcon className=\"size-5\" weight=\"regular\" />\n    </button>\n  ) : undefined\n\n  const thumbnail = isGallery ? (\n    <GalleryThumbnail\n      variant=\"dark\"\n      gallery={gallery!}\n      title={title}\n      showLocked={showLocked}\n      topRight={dismissButton}\n    />\n  ) : (\n    <LockedThumbnail\n      variant=\"dark\"\n      mimeType={mimeType}\n      thumbnailUrl={thumbnailUrl}\n      title={title}\n      source={source}\n      showLocked={showLocked}\n      topRight={dismissButton}\n    />\n  )\n\n  return (\n    <LockedCardShell variant=\"dark\">\n      {togglePreview ? (\n        // Uses a `<div role=\"button\">` rather than a native `<button>` so the\n        // dismiss control rendered inside `thumbnail` (also a `<button>`)\n        // doesn't produce invalid nested interactive elements.\n        <div\n          role=\"button\"\n          tabIndex={isBusy ? -1 : 0}\n          aria-label=\"Toggle preview\"\n          aria-busy={isBusy}\n          aria-pressed={!showLocked}\n          aria-disabled={isBusy || undefined}\n          onClick={isBusy ? undefined : togglePreview}\n          onKeyDown={(e) => {\n            if (isBusy) return\n            // Only handle keys that originate on the wrapper itself, not on\n            // inner interactive elements (dismiss X, carousel arrows). Without\n            // this guard, pressing Enter/Space on a focused child would bubble\n            // up and toggle the preview in addition to activating the child.\n            if (e.target !== e.currentTarget) return\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              void togglePreview()\n            }\n          }}\n          className={\n            !isBusy\n              ? 'block w-full cursor-pointer text-left'\n              : 'block w-full text-left'\n          }\n        >\n          {thumbnail}\n        </div>\n      ) : (\n        thumbnail\n      )}\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={statusBadge}\n        icon={\n          isGallery ? (\n            <ImagesIcon className=\"size-5 shrink-0 text-white/55\" />\n          ) : undefined\n        }\n        trailingAction={editButton}\n      />\n    </LockedCardShell>\n  )\n}\n\nexport default ComposerCard\n"],"names":["ComposerCard","title","mimeType","thumbnailUrl","detail","amountText","placeholderTitle","placeholderAmountText","gallery","onDismiss","onPreviewClick","onFetchSource","onEditClick","source","setSource","useState","isPreviewVisible","setIsPreviewVisible","isLoadingPreview","setIsLoadingPreview","fetchingRef","useRef","isGallery","handleToggle","useCallback","result","togglePreview","showLocked","isBusy","statusBadge","jsxs","React","jsx","dismissButton","XIcon","editButton","PencilSimpleIcon","thumbnail","GalleryThumbnail","LockedThumbnail","LockedCardShell","CardBody","ImagesIcon"],"mappings":"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"}

package/dist/Card-BuXkok0A.cjs

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