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

package/dist/usePreviewToggle-BG-pfsgP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewToggle-BG-pfsgP.js","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","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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"}

package/dist/usePreviewToggle-DXQT07ws.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),m=require("classnames"),g=require("./index-DwUOvMxg.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;
+//# sourceMappingURL=usePreviewToggle-DXQT07ws.cjs.map

package/dist/usePreviewToggle-DXQT07ws.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewToggle-DXQT07ws.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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.8.1",
+  "version": "3.9.0-rc-1783407048",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1783407048",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -126,6 +126,7 @@ interface TemplateProps {
       attachment_mime_type?: string
       attachment_thumbnail?: string
       attachment_detail?: string
+      attachment_content_type?: 'text' | 'media'
     }
   }>
 }
@@ -416,7 +417,59 @@ LockedAttachment.args = {
   ],
 }
 
-
+export const LockedTextAttachment: StoryFn<TemplateProps> = Template.bind({})
+LockedTextAttachment.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Can you send me the details privately?',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      // Empty text: the real content is redacted server-side until purchase,
+      // so the bubble renders the blurred placeholder instead.
+      text: '',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        attachment_content_type: 'text',
+      },
+    },
+    {
+      id: 'msg-3',
+      text: '',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        payment_status: 'paid',
+        attachment_content_type: 'text',
+      },
+    },
+    {
+      id: 'msg-4',
+      // Buyer reveal: backend writes the real text back onto the message.
+      text: "Here's the address — see you Thursday at 7!",
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        payment_status: 'paid',
+        attachment_content_type: 'text',
+      },
+    },
+  ],
+}
+LockedTextAttachment.parameters = {
+  docs: {
+    description: {
+      story:
+        'A paid text-only message renders as a regular bubble with blurred placeholder copy (msg-2: pending, msg-3: purchased-but-not-yet-revealed) until the real text is revealed (msg-4).',
+    },
+  },
+}
 
 export const ChatbotVariants: StoryFn<TemplateProps> = Template.bind({})
 ChatbotVariants.args = {

package/src/components/CustomMessage/MessageTag.tsx

@@ -47,6 +47,14 @@ export const isAttachmentMessage = (message: LocalMessage): boolean => {
   return message.metadata?.custom_type === 'MESSAGE_ATTACHMENT'
 }
 
+export const isTextAttachmentMessage = (message: LocalMessage): boolean => {
+  return isAttachmentMessage(message) && message.metadata?.attachment_content_type === 'text'
+}
+
+export const isMediaAttachmentMessage = (message: LocalMessage): boolean => {
+  return isAttachmentMessage(message) && message.metadata?.attachment_content_type !== 'text'
+}
+
 /** Check if a message has a tip/paid tag (both render the same) */
 export const isTipOrPaidMessage = (message: LocalMessage): boolean => {
   return isTipMessage(message) || isPaidMessage(message)

package/src/components/CustomMessage/index.tsx

@@ -34,15 +34,15 @@ import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
 import LockedAttachment from '../LockedAttachment'
 import { isLinkAttachment } from '../MediaMessage'
-import {
-  bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream,
-} from '../MessageAttachment'
+import { bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream } from '../MessageAttachment'
 
 import { useCustomMessage } from './context'
 import {
   MessageTag,
   isAttachmentMessage,
   isChatbotMessage,
+  isMediaAttachmentMessage,
+  isTextAttachmentMessage,
   isTipOnlyMessage,
 } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
@@ -276,12 +276,51 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             marginInlineStart: 0,
           }}
         >
-          {isAttachment ? (
+          {isTipOnly ? (
+            <MessageTag message={message} standalone />
+          ) : isTextAttachmentMessage(message) ? (
+            <div className="str-chat__message-bubble-wrapper">
+              <div className="flex items-center gap-2">
+                {isMine && MessageActions && <MessageActions />}
+                {isMine ? (
+                  <LockedAttachment.Text
+                    isMine={true}
+                    amountText={message.metadata?.amount_text}
+                    paymentStatus={message.metadata?.payment_status}
+                  >
+                    {message.text && (
+                      <MessageText
+                        message={displayMessage}
+                        renderText={renderText}
+                      />
+                    )}
+                  </LockedAttachment.Text>
+                ) : (
+                  <LockedAttachment.Text
+                    isMine={false}
+                    amountText={message.metadata?.amount_text}
+                    paymentStatus={message.metadata?.payment_status}
+                    isUnlocking={isUnlocking(message.id)}
+                    onUnlockClick={() => onUnlockClick?.(message, channel)}
+                  >
+                    {message.text && (
+                      <MessageText
+                        message={displayMessage}
+                        renderText={renderText}
+                      />
+                    )}
+                  </LockedAttachment.Text>
+                )}
+                {!isMine && MessageActions && <MessageActions />}
+              </div>
+            </div>
+          ) : isMediaAttachmentMessage(message) ? (
             <div className="str-chat__message-bubble-wrapper">
-              {isMine ? (
-                <div className="flex items-center gap-2">
-                  {MessageActions && <MessageActions />}
-                  <LockedAttachment.Sent
+              <div className="flex items-center gap-2">
+                {isMine && MessageActions && <MessageActions />}
+                {isMine ? (
+                  <LockedAttachment.Media
+                    isMine={true}
                     title={message.metadata?.attachment_title}
                     mimeType={message.metadata?.attachment_mime_type}
                     thumbnailUrl={message.metadata?.attachment_thumbnail}
@@ -289,14 +328,15 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                     detail={message.metadata?.attachment_detail}
                     paymentStatus={message.metadata?.payment_status}
                     onPreviewClick={() => onUnlockClick?.(message, channel)}
-                    onFetchSource={async () =>
-                      await onFetchSource?.(message, channel)
+                    onFetchSource={
+                      onFetchSource
+                        ? () => onFetchSource(message, channel)
+                        : undefined
                     }
                   />
-                </div>
-              ) : (
-                <div className="flex items-center gap-2">
-                  <LockedAttachment.Received
+                ) : (
+                  <LockedAttachment.Media
+                    isMine={false}
                     title={message.metadata?.attachment_title}
                     mimeType={message.metadata?.attachment_mime_type}
                     thumbnailUrl={message.metadata?.attachment_thumbnail}
@@ -305,14 +345,16 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                     paymentStatus={message.metadata?.payment_status}
                     isUnlocking={isUnlocking(message.id)}
                     onUnlockClick={() => onUnlockClick?.(message, channel)}
-                    onFetchSource={async () =>
-                      await onFetchSource?.(message, channel)
+                    onFetchSource={
+                      onFetchSource
+                        ? () => onFetchSource(message, channel)
+                        : undefined
                     }
                     onDownloadClick={() => onDownloadClick?.(message, channel)}
                   />
-                  {MessageActions && <MessageActions />}
-                </div>
-              )}
+                )}
+                {!isMine && MessageActions && <MessageActions />}
+              </div>
               {message.text && (
                 <div className="str-chat__message-bubble">
                   <MessageText
@@ -322,9 +364,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 </div>
               )}
             </div>
-          ) : isTipOnly ? (
-            /* Tip-only messages render as a standalone bubble */
-            <MessageTag message={message} standalone />
           ) : canRenderAttachmentsInToolkit ? (
             <div className="str-chat__message-bubble-wrapper">
               <div