@linktr.ee/messaging-react 4.6.1 → 4.6.2-rc-1788621948

package/dist/AttachmentCard-D37MWFGV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentCard-D37MWFGV.js","names":[],"sources":["../src/components/_shared/Spinner.tsx","../src/utils/cdnImageUrl.ts","../src/utils/nativeMediaPlayers.ts","../src/components/AttachmentCard/utils/mimeType.ts","../src/components/AttachmentCard/utils/icons.ts","../src/utils/isDevBuild.ts","../src/components/AttachmentCard/MediaPlayer.tsx","../src/components/AttachmentCard/Thumbnail.tsx"],"sourcesContent":["import {\n  CircleNotchIcon,\n  type Icon,\n  type IconWeight,\n} from '@phosphor-icons/react'\nimport classNames from 'classnames'\n\nconst sizeClasses = {\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-8',\n} as const\n\nconst toneClasses = {\n  inherit: undefined,\n  'on-media': 'text-white/80',\n} as const\n\nexport interface SpinnerProps {\n  /** `sm` = 16px, `md` = 20px, `lg` = 32px. Defaults to `sm`. */\n  size?: keyof typeof sizeClasses\n  /** `on-media` is the translucent white used over dark media chrome. */\n  tone?: keyof typeof toneClasses\n  /** Phosphor icon to spin. Defaults to `CircleNotchIcon`. */\n  icon?: Icon\n  /** Omit to inherit the surrounding Phosphor `IconContext` weight. */\n  weight?: IconWeight\n  'aria-hidden'?: boolean\n  className?: string\n}\n\nconst Spinner = ({\n  size = 'sm',\n  tone = 'inherit',\n  icon: IconComponent = CircleNotchIcon,\n  weight,\n  'aria-hidden': ariaHidden,\n  className,\n}: SpinnerProps) => (\n  <IconComponent\n    className={classNames(\n      'animate-spin',\n      sizeClasses[size],\n      toneClasses[tone],\n      className\n    )}\n    weight={weight}\n    aria-hidden={ariaHidden}\n  />\n)\n\nexport default Spinner\n","const LINKTREE_CDN_HOSTS = ['linktr.ee']\n\nconst ATTACHMENT_IMAGE_SIZE_PRESET = 'messaging-attachment-v1_0'\n\nfunction hostnameFromUrl(url: string): string | null {\n  try {\n    return new URL(url).hostname.toLowerCase()\n  } catch {\n    return null\n  }\n}\n\nfunction isLinktreeCdnHost(hostname: string): boolean {\n  return LINKTREE_CDN_HOSTS.some(\n    (host) => hostname === host || hostname.endsWith(`.${host}`)\n  )\n}\n\nexport function optimizeMessagingAttachmentUrl(\n  url: string | undefined | null\n): string | undefined {\n  const trimmed = url?.trim()\n  if (!trimmed) return undefined\n\n  const hostname = hostnameFromUrl(trimmed)\n  if (!hostname || !isLinktreeCdnHost(hostname)) return trimmed\n\n  const parsedUrl = new URL(trimmed)\n  const isAlreadyMessagingOptimized =\n    parsedUrl.searchParams.get('io') === 'true' &&\n    parsedUrl.searchParams.get('size') === ATTACHMENT_IMAGE_SIZE_PRESET\n\n  if (isAlreadyMessagingOptimized) {\n    return trimmed\n  }\n\n  parsedUrl.searchParams.set('io', 'true')\n  parsedUrl.searchParams.set('size', ATTACHMENT_IMAGE_SIZE_PRESET)\n\n  return parsedUrl.toString()\n}\n","/**\n * Attribute marking every native `<audio>` / `<video>` the toolkit\n * renders on a message surface, so opening one player can silence the\n * others.\n *\n * stream-chat-react's `AudioPlayerPool` — what `useActiveAudioPlayer()`\n * reads — only knows the players *it* mounts, i.e. voice recordings.\n * Everything the toolkit draws itself is a plain native element that\n * never registers there: `MessageAttachment.Audio`, a playable\n * `LinkAttachment` card, and `AttachmentCard`'s `MediaPlayer`. Pausing\n * the pool alone therefore left thread audio sounding underneath an\n * opened video viewer on the production `StreamAttachmentMessage` path,\n * which is exactly the surface the mutual exclusion exists for\n * (MES-1353).\n */\nexport const NATIVE_PLAYER_ATTRIBUTE = 'data-mes-native-player'\n\n/**\n * Spread onto a native player element to enrol it. Keyed off the\n * constant so the marker and the query below can't drift apart.\n */\nexport const nativePlayerProps = { [NATIVE_PLAYER_ATTRIBUTE]: '' } as const\n\n/**\n * Pauses every enrolled player except `except`.\n *\n * No `paused` check: pausing an already-paused element is a no-op per\n * spec, and reading `paused` first would only add a branch that jsdom\n * answers differently from a browser.\n */\nexport const pauseNativeMediaPlayers = (\n  except?: HTMLMediaElement | null\n): void => {\n  if (typeof document === 'undefined') return\n\n  document\n    .querySelectorAll<HTMLMediaElement>(`[${NATIVE_PLAYER_ATTRIBUTE}]`)\n    .forEach((player) => {\n      if (player !== except) player.pause()\n    })\n}\n","export type AttachmentSourceType = 'image' | 'audio' | 'video' | 'document'\n\nexport type DocumentIconType =\n  | 'pdf'\n  | 'doc'\n  | 'xls'\n  | 'csv'\n  | 'ppt'\n  | 'zip'\n  | 'text'\n  | 'markdown'\n  | 'generic'\n\nconst DOCUMENT_ICON_PATTERNS: Array<[RegExp, DocumentIconType]> = [\n  [/pdf/, 'pdf'],\n  [/wordprocessingml|msword|\\.doc/, 'doc'],\n  [/spreadsheetml|ms-excel|\\.xls/, 'xls'],\n  [/csv/, 'csv'],\n  [/presentationml|ms-powerpoint|\\.ppt/, 'ppt'],\n  [/zip|x-rar|x-7z|x-tar|x-gzip/, 'zip'],\n  [/plain|rtf/, 'text'],\n  [/markdown/, 'markdown'],\n]\n\nexport function getSourceType(mimeType: string): AttachmentSourceType {\n  if (mimeType.startsWith('video/')) return 'video'\n  if (mimeType.startsWith('audio/')) return 'audio'\n  if (mimeType.startsWith('image/')) return 'image'\n  return 'document'\n}\n\nexport function getDocumentIconType(mimeType: string): DocumentIconType {\n  const match = DOCUMENT_ICON_PATTERNS.find(([pattern]) =>\n    pattern.test(mimeType)\n  )\n  return match ? match[1] : 'generic'\n}\n","import {\n  FileIcon,\n  FileCsvIcon,\n  FileDocIcon,\n  FileMdIcon,\n  FilePdfIcon,\n  FilePptIcon,\n  FileTextIcon,\n  FileXlsIcon,\n  FileZipIcon,\n  ImageIcon,\n  SpeakerHighIcon,\n  VideoCameraIcon,\n  IconProps,\n} from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getDocumentIconType, getSourceType } from './mimeType'\nimport type { AttachmentSourceType } from './mimeType'\n\nconst MEDIA_TYPE_ICON: Record<AttachmentSourceType, React.ElementType> = {\n  video: VideoCameraIcon,\n  audio: SpeakerHighIcon,\n  image: ImageIcon,\n  document: FileIcon,\n}\n\nconst DOCUMENT_ICON_COMPONENT = {\n  pdf: FilePdfIcon,\n  doc: FileDocIcon,\n  xls: FileXlsIcon,\n  csv: FileCsvIcon,\n  ppt: FilePptIcon,\n  zip: FileZipIcon,\n  text: FileTextIcon,\n  markdown: FileMdIcon,\n  generic: FileIcon,\n} as const\n\nfunction getTypeIcon(mimeType: string): React.ElementType {\n  const sourceType = getSourceType(mimeType)\n  if (sourceType !== 'document') return MEDIA_TYPE_ICON[sourceType]\n  return DOCUMENT_ICON_COMPONENT[getDocumentIconType(mimeType)]\n}\n\nfunction getTypeIconName(mimeType: string): string {\n  const sourceType = getSourceType(mimeType)\n  if (sourceType !== 'document') return sourceType\n  return getDocumentIconType(mimeType)\n}\n\n/** Use instead of `<TypeIcon />` where TypeIcon = getTypeIcon(mime) to satisfy react-hooks/static-components. */\nexport function renderTypeIcon(\n  mimeType: string,\n  props: IconProps\n): React.ReactElement {\n  // Decorative icons: which one was picked is otherwise only visible in a pixel diff.\n  return React.createElement(getTypeIcon(mimeType), {\n    'data-testid': `type-icon-${getTypeIconName(mimeType)}`,\n    ...props,\n  })\n}\n","/**\n * True in Vite dev builds (`import.meta.env.DEV`). Uses a type assertion so\n * `tsc` does not rely on ambient `ImportMeta` merging (vite/client).\n */\nexport function isDevBuild(): boolean {\n  return (\n    typeof import.meta !== 'undefined' &&\n    (import.meta as unknown as { env?: { DEV?: boolean } }).env?.DEV === true\n  )\n}\n","import { PauseIcon, PlayIcon } from '@phosphor-icons/react'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { isDevBuild } from '../../utils/isDevBuild'\nimport { nativePlayerProps } from '../../utils/nativeMediaPlayers'\nimport Spinner from '../_shared/Spinner'\n\nimport { renderTypeIcon } from './utils/icons'\nimport { getSourceType } from './utils/mimeType'\n\ntype TouchEventUnion =\n  MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent\n\nconst getClientXFromEvent = (e: TouchEventUnion): number => {\n  if ('touches' in e) {\n    return e.touches[0]?.clientX ?? e.changedTouches[0]?.clientX ?? 0\n  }\n  return e.clientX\n}\n\nexport interface MediaPlayerProps {\n  source: string\n  mimeType: string\n  poster?: string\n  autoPlay?: boolean\n  /** Controlled playing state. When provided, syncs to internal play/pause. */\n  playing?: boolean\n  loop?: boolean\n  controls?: boolean\n  showProgress?: boolean\n  /** When true, requests muted playback (helps autoplay policies on video). */\n  muted?: boolean\n  /**\n   * When provided, overrides the default click-to-play-toggle behaviour on the\n   * player container. The play/pause button (which calls stopPropagation) is\n   * unaffected, so inline playback still works.\n   */\n  onContainerClick?: (e: React.MouseEvent) => void\n}\n\nconst MediaPlayer: React.FC<MediaPlayerProps> = ({\n  source,\n  mimeType,\n  poster,\n  autoPlay = false,\n  playing: playingProp,\n  loop = false,\n  controls = true,\n  showProgress = false,\n  muted = false,\n  onContainerClick,\n}) => {\n  // --- Derived ---\n  const sourceType = getSourceType(mimeType)\n\n  // --- Refs ---\n  const playerRef = useRef<HTMLMediaElement>(null)\n  const trackRef = useRef<HTMLDivElement>(null)\n  const rafRef = useRef<number | null>(null)\n  const prevPlayingPropRef = useRef(playingProp)\n\n  // --- State: playback ---\n  const [playing, setPlaying] = useState(autoPlay)\n  const [played, setPlayed] = useState(0)\n  const [seeking, setSeeking] = useState(false)\n\n  // --- State: UI ---\n  const [scrubberHovered, setScrubberHovered] = useState(false)\n  /** Set when autoplay/play() was rejected so user can start via gesture (no controls UI). */\n  const [manualPlayRequired, setManualPlayRequired] = useState(false)\n\n  // --- State: loading ---\n  const [buffering, setBuffering] = useState(false)\n  /** True until the first canPlay fires for the current source — hides controls/spinner behind poster. */\n  const [initialLoad, setInitialLoad] = useState(true)\n  const [videoAspect, setVideoAspect] = useState<number | null>(null)\n\n  // --- Callbacks ---\n  const startPlaybackFromGesture = useCallback(() => {\n    setManualPlayRequired(false)\n    setPlaying(true)\n  }, [])\n\n  const getFraction = useCallback((e: TouchEventUnion) => {\n    const track = trackRef.current\n    if (!track) return 0\n    const rect = track.getBoundingClientRect()\n    return Math.max(\n      0,\n      Math.min(1, (getClientXFromEvent(e) - rect.left) / rect.width)\n    )\n  }, [])\n\n  const seekTo = useCallback((fraction: number) => {\n    const el = playerRef.current\n    if (el && el.duration) el.currentTime = fraction * el.duration\n  }, [])\n\n  const handleTrackPointerDown = (\n    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n  ) => {\n    e.stopPropagation()\n    setSeeking(true)\n    const fraction = getFraction(e)\n    setPlayed(fraction)\n    seekTo(fraction)\n  }\n\n  const handleScrubberKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'ArrowRight') seekTo(Math.min(1, played + 0.05))\n      if (e.key === 'ArrowLeft') seekTo(Math.max(0, played - 0.05))\n    },\n    [seekTo, played]\n  )\n\n  // --- Effects ---\n\n  // Sync controlled playing prop to internal state\n  useEffect(() => {\n    if (\n      playingProp !== undefined &&\n      playingProp !== prevPlayingPropRef.current\n    ) {\n      prevPlayingPropRef.current = playingProp\n      setPlaying(playingProp)\n    }\n  }, [playingProp])\n\n  // RAF-driven progress updates\n  useEffect(() => {\n    if (!playing) {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current)\n        rafRef.current = null\n      }\n      return\n    }\n    const tick = () => {\n      const el = playerRef.current\n      if (el && el.duration && !seeking) setPlayed(el.currentTime / el.duration)\n      rafRef.current = requestAnimationFrame(tick)\n    }\n    rafRef.current = requestAnimationFrame(tick)\n    return () => {\n      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)\n    }\n  }, [playing, seeking])\n\n  // ReactPlayer v3 uses native HTML media elements and does not support a\n  // declarative `playing` prop — playback must be driven imperatively.\n  useEffect(() => {\n    const el = playerRef.current\n    if (!el) return\n    if (playing) {\n      void el.play().catch((err) => {\n        setPlaying(false)\n        setManualPlayRequired(true)\n        if (isDevBuild()) {\n          console.debug('[MediaPlayer] play() failed', err)\n        }\n      })\n    } else {\n      el.pause()\n    }\n  }, [playing])\n\n  // Global seeking listeners\n  useEffect(() => {\n    if (!seeking) return\n    const onMove = (e: MouseEvent | TouchEvent) => setPlayed(getFraction(e))\n    const onUp = (e: MouseEvent | TouchEvent) => {\n      setSeeking(false)\n      seekTo(getFraction(e))\n    }\n    window.addEventListener('mousemove', onMove)\n    window.addEventListener('mouseup', onUp)\n    window.addEventListener('touchmove', onMove, { passive: true })\n    window.addEventListener('touchend', onUp)\n    return () => {\n      window.removeEventListener('mousemove', onMove)\n      window.removeEventListener('mouseup', onUp)\n      window.removeEventListener('touchmove', onMove)\n      window.removeEventListener('touchend', onUp)\n    }\n  }, [seeking, getFraction, seekTo])\n\n  // --- Derived render values ---\n  // Use natural aspect ratio once metadata loads, fall back to 16:9 before then.\n  const aspectStyle = videoAspect\n    ? { aspectRatio: String(videoAspect) }\n    : undefined\n  const aspectClass = !videoAspect ? ' aspect-video' : ''\n  const scrubberPercent = Math.round(played * 100)\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      data-testid=\"media-player\"\n      className={`relative cursor-pointer overflow-hidden bg-black ${aspectClass}`}\n      style={aspectStyle}\n      onClick={(e) => {\n        if (onContainerClick) {\n          onContainerClick(e)\n          return\n        }\n        if (manualPlayRequired) return\n        if (controls) setPlaying((p) => !p)\n      }}\n      onKeyDown={(e) => {\n        if (e.key !== 'Enter' && e.key !== ' ') return\n        e.preventDefault()\n        if (onContainerClick) {\n          onContainerClick(e as unknown as React.MouseEvent)\n          return\n        }\n        if (manualPlayRequired) return\n        if (controls) setPlaying((p) => !p)\n      }}\n    >\n      {/* For audio, poster persists as a visual background. For video, hide once loaded. */}\n      {poster && (sourceType === 'audio' || initialLoad) && (\n        <img\n          src={poster}\n          alt=\"\"\n          data-testid=\"media-player-poster\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n        />\n      )}\n      {!poster && (sourceType === 'audio' || initialLoad) && (\n        <div\n          data-testid=\"media-player-placeholder\"\n          className=\"absolute inset-0 flex items-center justify-center\"\n        >\n          {renderTypeIcon(mimeType, {\n            className: 'size-12 text-black/20',\n            weight: 'regular',\n          })}\n        </div>\n      )}\n      <div className=\"absolute inset-0\">\n        {sourceType === 'audio' ? (\n          <audio\n            {...nativePlayerProps}\n            ref={playerRef as React.RefObject<HTMLAudioElement>}\n            data-testid=\"media-player-audio\"\n            src={source}\n            loop={loop}\n            muted={muted}\n            style={{ width: '100%', height: '100%' }}\n            onLoadStart={() => setBuffering(true)}\n            onCanPlay={() => {\n              setBuffering(false)\n              setInitialLoad(false)\n            }}\n            onWaiting={() => setBuffering(true)}\n            onPlay={() => setManualPlayRequired(false)}\n            onEnded={() => {\n              if (!loop) {\n                setPlaying(false)\n                setPlayed(0)\n              }\n            }}\n          >\n            <track kind=\"captions\" />\n          </audio>\n        ) : (\n          <video\n            ref={playerRef as React.RefObject<HTMLVideoElement>}\n            data-testid=\"media-player-video\"\n            src={source}\n            loop={loop}\n            muted={muted}\n            playsInline\n            style={{ width: '100%', height: '100%' }}\n            onLoadStart={() => setBuffering(true)}\n            onCanPlay={() => {\n              setBuffering(false)\n              setInitialLoad(false)\n            }}\n            onWaiting={() => setBuffering(true)}\n            onPlay={() => setManualPlayRequired(false)}\n            onLoadedMetadata={() => {\n              const el = playerRef.current\n              if (\n                el instanceof HTMLVideoElement &&\n                el.videoWidth &&\n                el.videoHeight\n              ) {\n                setVideoAspect(el.videoWidth / el.videoHeight)\n              }\n            }}\n            onEnded={() => {\n              if (!loop) {\n                setPlaying(false)\n                setPlayed(0)\n              }\n            }}\n          >\n            <track kind=\"captions\" />\n          </video>\n        )}\n      </div>\n\n      {buffering && !manualPlayRequired && (\n        <div\n          role=\"status\"\n          aria-label=\"Loading media\"\n          className=\"absolute inset-0 z-10 flex items-center justify-center\"\n        >\n          <Spinner size=\"lg\" tone=\"on-media\" weight=\"bold\" />\n        </div>\n      )}\n\n      {manualPlayRequired && !controls && (\n        <div\n          className=\"absolute inset-0 z-30 flex cursor-pointer items-center justify-center bg-black/35\"\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Play preview\"\n          onClick={(e) => {\n            e.stopPropagation()\n            startPlaybackFromGesture()\n          }}\n          onKeyDown={(e) => {\n            if (e.key !== 'Enter' && e.key !== ' ') return\n            e.preventDefault()\n            e.stopPropagation()\n            startPlaybackFromGesture()\n          }}\n        >\n          <span className=\"flex size-16 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm\">\n            <PlayIcon className=\"size-9 translate-x-0.5\" weight=\"fill\" />\n          </span>\n        </div>\n      )}\n\n      {showProgress && !controls && (\n        <div className=\"absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent\">\n          <div\n            role=\"slider\"\n            aria-label=\"Playback position\"\n            aria-valuenow={scrubberPercent}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            tabIndex={0}\n            ref={trackRef}\n            className=\"relative flex h-4 w-full cursor-pointer items-center\"\n            onMouseDown={handleTrackPointerDown}\n            onTouchStart={handleTrackPointerDown}\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={handleScrubberKeyDown}\n          >\n            <div className=\"w-full overflow-hidden rounded-full bg-white/30 h-1\">\n              <div\n                className=\"h-full rounded-full bg-white\"\n                style={{ width: `${scrubberPercent}%` }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      {controls && (\n        <div className=\"absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200\">\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              setPlaying((p) => !p)\n            }}\n            className=\"shrink-0 text-white\"\n            aria-label={playing ? 'Pause' : 'Play'}\n          >\n            {playing ? (\n              <PauseIcon className=\"size-5\" weight=\"fill\" />\n            ) : (\n              <PlayIcon className=\"size-5 translate-x-px\" weight=\"fill\" />\n            )}\n          </button>\n\n          <div\n            role=\"slider\"\n            aria-label=\"Playback position\"\n            aria-valuenow={scrubberPercent}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            tabIndex={0}\n            ref={trackRef}\n            className=\"relative flex h-4 w-full cursor-pointer items-center\"\n            onMouseDown={handleTrackPointerDown}\n            onTouchStart={handleTrackPointerDown}\n            onClick={(e) => e.stopPropagation()}\n            onMouseEnter={() => setScrubberHovered(true)}\n            onMouseLeave={() => setScrubberHovered(false)}\n            onKeyDown={handleScrubberKeyDown}\n          >\n            <div\n              className={`w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${scrubberHovered || seeking ? 'h-1.5' : 'h-1'}`}\n            >\n              <div\n                className=\"h-full rounded-full bg-white\"\n                style={{ width: `${scrubberPercent}%` }}\n              />\n            </div>\n            <div\n              data-testid=\"media-player-scrubber-thumb\"\n              className={`absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${scrubberHovered || seeking ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}\n              style={{ left: `${scrubberPercent}%` }}\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default MediaPlayer\n","import React, { useState } from 'react'\n\nimport { optimizeMessagingAttachmentUrl } from '../../utils/cdnImageUrl'\n\nimport MediaPlayer, { type MediaPlayerProps } from './MediaPlayer'\nimport { renderTypeIcon } from './utils/icons'\nimport { getSourceType } from './utils/mimeType'\n\nexport type AttachmentThumbnailVariant = 'light' | 'dark'\n\nexport interface AttachmentThumbnailProps {\n  mimeType: string\n  sourceUrl?: string\n  thumbnailUrl?: string\n  title?: string\n  variant: AttachmentThumbnailVariant\n  /** Extra props passed to MediaPlayer when source is video or audio. */\n  mediaPlayerProps?: Partial<\n    Pick<\n      MediaPlayerProps,\n      'autoPlay' | 'loop' | 'muted' | 'controls' | 'onContainerClick'\n    >\n  >\n  /**\n   * When true (Visitor unlocked image/document), use aspect-video + object-contain fade-in.\n   */\n  containedImage?: boolean\n}\n\nconst placeholderIconClass = (variant: AttachmentThumbnailVariant) =>\n  variant === 'dark' ? 'size-12 text-white/20' : 'size-12 text-black/20'\n\nconst posterShellClass = (variant: AttachmentThumbnailVariant) =>\n  variant === 'dark'\n    ? 'aspect-video overflow-hidden bg-white/10'\n    : 'aspect-video overflow-hidden bg-black/5'\n\n/**\n * Renders the media preview area for attachment cards (LockedAttachment, MediaMessage).\n * Overlays (dim, lock, eye toggle) are composed by the parent.\n */\nconst AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({\n  mimeType,\n  sourceUrl,\n  thumbnailUrl,\n  title,\n  variant,\n  mediaPlayerProps,\n  containedImage = false,\n}) => {\n  const sourceType = getSourceType(mimeType)\n  const [sourceReady, setSourceReady] = useState(false)\n  const optimizedSourceUrl = optimizeMessagingAttachmentUrl(sourceUrl)\n  const optimizedThumbnailUrl = optimizeMessagingAttachmentUrl(thumbnailUrl)\n\n  if (sourceUrl && (sourceType === 'video' || sourceType === 'audio')) {\n    return (\n      <MediaPlayer\n        source={sourceUrl}\n        mimeType={mimeType}\n        poster={optimizedThumbnailUrl}\n        controls\n        {...mediaPlayerProps}\n      />\n    )\n  }\n\n  if (sourceUrl && sourceType === 'image') {\n    if (containedImage) {\n      return (\n        <div className={`relative ${posterShellClass(variant)}`}>\n          <img\n            src={optimizedSourceUrl ?? sourceUrl}\n            alt={title ?? ''}\n            className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}\n            draggable={false}\n            onLoad={() => setSourceReady(true)}\n          />\n        </div>\n      )\n    }\n    return (\n      <img\n        src={optimizedSourceUrl ?? sourceUrl}\n        alt={title ?? ''}\n        className=\"block w-full\"\n        draggable={false}\n      />\n    )\n  }\n\n  if (sourceUrl && sourceType === 'document') {\n    if (thumbnailUrl) {\n      if (containedImage) {\n        return (\n          <div className={`relative ${posterShellClass(variant)}`}>\n            <img\n              src={optimizedThumbnailUrl ?? thumbnailUrl}\n              alt={title ?? ''}\n              className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}\n              draggable={false}\n              onLoad={() => setSourceReady(true)}\n            />\n          </div>\n        )\n      }\n      return (\n        <img\n          src={optimizedThumbnailUrl ?? thumbnailUrl}\n          alt=\"\"\n          className=\"block w-full\"\n          draggable={false}\n        />\n      )\n    }\n    return (\n      <div\n        className={`flex aspect-video w-full items-center justify-center ${variant === 'dark' ? 'bg-white/10' : 'bg-black/5'}`}\n      >\n        {renderTypeIcon(mimeType, {\n          className: placeholderIconClass(variant),\n          weight: 'regular',\n        })}\n      </div>\n    )\n  }\n\n  // Poster-only or empty (no sourceUrl)\n  if (thumbnailUrl) {\n    return (\n      <div className={`relative ${posterShellClass(variant)}`}>\n        <img\n          src={optimizedThumbnailUrl ?? thumbnailUrl}\n          alt={title ?? ''}\n          draggable={false}\n          className=\"absolute inset-0 h-full w-full object-cover\"\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className={`flex aspect-video w-full items-center justify-center ${variant === 'dark' ? 'bg-white/10' : 'bg-black/5'}`}\n    >\n      {renderTypeIcon(mimeType, {\n        className: placeholderIconClass(variant),\n        weight: 'regular',\n      })}\n    </div>\n  )\n}\n\nexport default AttachmentThumbnail\n"],"mappings":";;;;;AAOA,IAAM,IAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAc;CAClB,SAAS,KAAA;CACT,YAAY;AACd,GAeM,KAAW,EACf,UAAO,MACP,UAAO,WACP,MAAM,IAAgB,GACtB,WACA,eAAe,GACf,mBAEA,kBAAC,GAAD;CACE,WAAW,EACT,gBACA,EAAY,IACZ,EAAY,IACZ,CACF;CACQ;CACR,eAAa;AACd,CAAA,GChDG,IAAqB,CAAC,WAAW,GAEjC,IAA+B;AAErC,SAAS,EAAgB,GAA4B;CACnD,IAAI;EACF,OAAO,IAAI,IAAI,CAAG,CAAC,CAAC,SAAS,YAAY;CAC3C,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAS,EAAkB,GAA2B;CACpD,OAAO,EAAmB,MACvB,MAAS,MAAa,KAAQ,EAAS,SAAS,IAAI,GAAM,CAC7D;AACF;AAEA,SAAgB,EACd,GACoB;CACpB,IAAM,IAAU,GAAK,KAAK;CAC1B,IAAI,CAAC,GAAS;CAEd,IAAM,IAAW,EAAgB,CAAO;CACxC,IAAI,CAAC,KAAY,CAAC,EAAkB,CAAQ,GAAG,OAAO;CAEtD,IAAM,IAAY,IAAI,IAAI,CAAO;CAYjC,OAVE,EAAU,aAAa,IAAI,IAAI,MAAM,UACrC,EAAU,aAAa,IAAI,MAAM,MAAM,IAGhC,KAGT,EAAU,aAAa,IAAI,MAAM,MAAM,GACvC,EAAU,aAAa,IAAI,QAAQ,CAA4B,GAExD,EAAU,SAAS;AAC5B;;;ACzBA,IAAa,IAA0B,0BAM1B,IAAoB,GAAG,IAA0B,GAAG,GASpD,KACX,MACS;CACL,OAAO,WAAa,OAExB,SACG,iBAAmC,IAAI,EAAwB,EAAE,CAAC,CAClE,SAAS,MAAW;EACnB,AAAI,MAAW,KAAQ,EAAO,MAAM;CACtC,CAAC;AACL,GC3BM,IAA4D;CAChE,CAAC,OAAO,KAAK;CACb,CAAC,iCAAiC,KAAK;CACvC,CAAC,gCAAgC,KAAK;CACtC,CAAC,OAAO,KAAK;CACb,CAAC,sCAAsC,KAAK;CAC5C,CAAC,+BAA+B,KAAK;CACrC,CAAC,aAAa,MAAM;CACpB,CAAC,YAAY,UAAU;AACzB;AAEA,SAAgB,EAAc,GAAwC;CAIpE,OAHI,EAAS,WAAW,QAAQ,IAAU,UACtC,EAAS,WAAW,QAAQ,IAAU,UACtC,EAAS,WAAW,QAAQ,IAAU,UACnC;AACT;AAEA,SAAgB,EAAoB,GAAoC;CACtE,IAAM,IAAQ,EAAuB,MAAM,CAAC,OAC1C,EAAQ,KAAK,CAAQ,CACvB;CACA,OAAO,IAAQ,EAAM,KAAK;AAC5B;;;AChBA,IAAM,IAAmE;CACvE,OAAO;CACP,OAAO;CACP,OAAO;CACP,UAAU;AACZ,GAEM,IAA0B;CAC9B,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,MAAM;CACN,UAAU;CACV,SAAS;AACX;AAEA,SAAS,EAAY,GAAqC;CACxD,IAAM,IAAa,EAAc,CAAQ;CAEzC,OADI,MAAe,aACZ,EAAwB,EAAoB,CAAQ,KADrB,EAAgB;AAExD;AAEA,SAAS,EAAgB,GAA0B;CACjD,IAAM,IAAa,EAAc,CAAQ;CAEzC,OADI,MAAe,aACZ,EAAoB,CAAQ,IADG;AAExC;AAGA,SAAgB,EACd,GACA,GACoB;CAEpB,OAAO,EAAM,cAAc,EAAY,CAAQ,GAAG;EAChD,eAAe,aAAa,EAAgB,CAAQ;EACpD,GAAG;CACL,CAAC;AACH;;;ACzDA,SAAgB,IAAsB;CACpC,OAEG;AAEL;;;ACIA,IAAM,KAAuB,MACvB,aAAa,IACR,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,WAAW,IAE3D,EAAE,SAuBL,KAA2C,EAC/C,WACA,aACA,WACA,cAAW,IACX,SAAS,GACT,UAAO,IACP,cAAW,IACX,kBAAe,IACf,WAAQ,IACR,0BACI;CAEJ,IAAM,IAAa,EAAc,CAAQ,GAGnC,IAAY,EAAyB,IAAI,GACzC,IAAW,EAAuB,IAAI,GACtC,IAAS,EAAsB,IAAI,GACnC,IAAqB,EAAO,CAAW,GAGvC,CAAC,GAAS,KAAc,EAAS,CAAQ,GACzC,CAAC,GAAQ,KAAa,EAAS,CAAC,GAChC,CAAC,GAAS,KAAc,EAAS,EAAK,GAGtC,CAAC,GAAiB,KAAsB,EAAS,EAAK,GAEtD,CAAC,GAAoB,KAAyB,EAAS,EAAK,GAG5D,CAAC,GAAW,KAAgB,EAAS,EAAK,GAE1C,CAAC,GAAa,KAAkB,EAAS,EAAI,GAC7C,CAAC,GAAa,KAAkB,EAAwB,IAAI,GAG5D,IAA2B,QAAkB;EAEjD,AADA,EAAsB,EAAK,GAC3B,EAAW,EAAI;CACjB,GAAG,CAAC,CAAC,GAEC,IAAc,GAAa,MAAuB;EACtD,IAAM,IAAQ,EAAS;EACvB,IAAI,CAAC,GAAO,OAAO;EACnB,IAAM,IAAO,EAAM,sBAAsB;EACzC,OAAO,KAAK,IACV,GACA,KAAK,IAAI,IAAI,EAAoB,CAAC,IAAI,EAAK,QAAQ,EAAK,KAAK,CAC/D;CACF,GAAG,CAAC,CAAC,GAEC,IAAS,GAAa,MAAqB;EAC/C,IAAM,IAAK,EAAU;EACrB,AAAI,KAAM,EAAG,aAAU,EAAG,cAAc,IAAW,EAAG;CACxD,GAAG,CAAC,CAAC,GAEC,KACJ,MACG;EAEH,AADA,EAAE,gBAAgB,GAClB,EAAW,EAAI;EACf,IAAM,IAAW,EAAY,CAAC;EAE9B,AADA,EAAU,CAAQ,GAClB,EAAO,CAAQ;CACjB,GAEM,IAAwB,GAC3B,MAA2C;EAE1C,AADI,EAAE,QAAQ,gBAAc,EAAO,KAAK,IAAI,GAAG,IAAS,GAAI,CAAC,GACzD,EAAE,QAAQ,eAAa,EAAO,KAAK,IAAI,GAAG,IAAS,GAAI,CAAC;CAC9D,GACA,CAAC,GAAQ,CAAM,CACjB;CAsDA,AAjDA,QAAgB;EACd,AACE,MAAgB,KAAA,KAChB,MAAgB,EAAmB,YAEnC,EAAmB,UAAU,GAC7B,EAAW,CAAW;CAE1B,GAAG,CAAC,CAAW,CAAC,GAGhB,QAAgB;EACd,IAAI,CAAC,GAAS;GACZ,AAAI,EAAO,YAAY,SACrB,qBAAqB,EAAO,OAAO,GACnC,EAAO,UAAU;GAEnB;EACF;EACA,IAAM,UAAa;GACjB,IAAM,IAAK,EAAU;GAErB,AADI,KAAM,EAAG,YAAY,CAAC,KAAS,EAAU,EAAG,cAAc,EAAG,QAAQ,GACzE,EAAO,UAAU,sBAAsB,CAAI;EAC7C;EAEA,OADA,EAAO,UAAU,sBAAsB,CAAI,SAC9B;GACX,AAAI,EAAO,YAAY,QAAM,qBAAqB,EAAO,OAAO;EAClE;CACF,GAAG,CAAC,GAAS,CAAO,CAAC,GAIrB,QAAgB;EACd,IAAM,IAAK,EAAU;EAChB,MACD,IACF,EAAQ,KAAK,CAAC,CAAC,OAAO,MAAQ;GAG5B,AAFA,EAAW,EAAK,GAChB,EAAsB,EAAI,GACtB,EAAW,KACb,QAAQ,MAAM,+BAA+B,CAAG;EAEpD,CAAC,IAED,EAAG,MAAM;CAEb,GAAG,CAAC,CAAO,CAAC,GAGZ,QAAgB;EACd,IAAI,CAAC,GAAS;EACd,IAAM,KAAU,MAA+B,EAAU,EAAY,CAAC,CAAC,GACjE,KAAQ,MAA+B;GAE3C,AADA,EAAW,EAAK,GAChB,EAAO,EAAY,CAAC,CAAC;EACvB;EAKA,OAJA,OAAO,iBAAiB,aAAa,CAAM,GAC3C,OAAO,iBAAiB,WAAW,CAAI,GACvC,OAAO,iBAAiB,aAAa,GAAQ,EAAE,SAAS,GAAK,CAAC,GAC9D,OAAO,iBAAiB,YAAY,CAAI,SAC3B;GAIX,AAHA,OAAO,oBAAoB,aAAa,CAAM,GAC9C,OAAO,oBAAoB,WAAW,CAAI,GAC1C,OAAO,oBAAoB,aAAa,CAAM,GAC9C,OAAO,oBAAoB,YAAY,CAAI;EAC7C;CACF,GAAG;EAAC;EAAS;EAAa;CAAM,CAAC;CAIjC,IAAM,IAAc,IAChB,EAAE,aAAa,OAAO,CAAW,EAAE,IACnC,KAAA,GACE,IAAe,IAAgC,KAAlB,iBAC7B,IAAkB,KAAK,MAAM,IAAS,GAAG;CAE/C,OACE,kBAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,eAAY;EACZ,WAAW,oDAAoD;EAC/D,OAAO;EACP,UAAU,MAAM;GACd,IAAI,GAAkB;IACpB,EAAiB,CAAC;IAClB;GACF;GACI,KACA,KAAU,GAAY,MAAM,CAAC,CAAC;EACpC;EACA,YAAY,MAAM;GACZ,MAAE,QAAQ,WAAW,EAAE,QAAQ,KAEnC;QADA,EAAE,eAAe,GACb,GAAkB;KACpB,EAAiB,CAAgC;KACjD;IACF;IACI,KACA,KAAU,GAAY,MAAM,CAAC,CAAC;GAFlC;EAGF;EAvBF,UAAA;GA0BG,MAAW,MAAe,WAAW,MACpC,kBAAC,OAAD;IACE,KAAK;IACL,KAAI;IACJ,eAAY;IACZ,WAAU;GACX,CAAA;GAEF,CAAC,MAAW,MAAe,WAAW,MACrC,kBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IAET,UAAA,EAAe,GAAU;KACxB,WAAW;KACX,QAAQ;IACV,CAAC;GACE,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAe,UACd,kBAAC,SAAD;KACE,GAAI;KACJ,KAAK;KACL,eAAY;KACZ,KAAK;KACC;KACC;KACP,OAAO;MAAE,OAAO;MAAQ,QAAQ;KAAO;KACvC,mBAAmB,EAAa,EAAI;KACpC,iBAAiB;MAEf,AADA,EAAa,EAAK,GAClB,EAAe,EAAK;KACtB;KACA,iBAAiB,EAAa,EAAI;KAClC,cAAc,EAAsB,EAAK;KACzC,eAAe;MACb,AAAK,MACH,EAAW,EAAK,GAChB,EAAU,CAAC;KAEf;KAEA,UAAA,kBAAC,SAAD,EAAO,MAAK,WAAY,CAAA;IACnB,CAAA,IAEP,kBAAC,SAAD;KACE,KAAK;KACL,eAAY;KACZ,KAAK;KACC;KACC;KACP,aAAA;KACA,OAAO;MAAE,OAAO;MAAQ,QAAQ;KAAO;KACvC,mBAAmB,EAAa,EAAI;KACpC,iBAAiB;MAEf,AADA,EAAa,EAAK,GAClB,EAAe,EAAK;KACtB;KACA,iBAAiB,EAAa,EAAI;KAClC,cAAc,EAAsB,EAAK;KACzC,wBAAwB;MACtB,IAAM,IAAK,EAAU;MACrB,AACE,aAAc,oBACd,EAAG,cACH,EAAG,eAEH,EAAe,EAAG,aAAa,EAAG,WAAW;KAEjD;KACA,eAAe;MACb,AAAK,MACH,EAAW,EAAK,GAChB,EAAU,CAAC;KAEf;KAEA,UAAA,kBAAC,SAAD,EAAO,MAAK,WAAY,CAAA;IACnB,CAAA;GAEN,CAAA;GAEJ,KAAa,CAAC,KACb,kBAAC,OAAD;IACE,MAAK;IACL,cAAW;IACX,WAAU;IAEV,UAAA,kBAAC,GAAD;KAAS,MAAK;KAAK,MAAK;KAAW,QAAO;IAAQ,CAAA;GAC/C,CAAA;GAGN,KAAsB,CAAC,KACtB,kBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,UAAU;IACV,cAAW;IACX,UAAU,MAAM;KAEd,AADA,EAAE,gBAAgB,GAClB,EAAyB;IAC3B;IACA,YAAY,MAAM;KACZ,GAAE,QAAQ,WAAW,EAAE,QAAQ,SACnC,EAAE,eAAe,GACjB,EAAE,gBAAgB,GAClB,EAAyB;IAC3B;IAEA,UAAA,kBAAC,QAAD;KAAM,WAAU;KACd,UAAA,kBAAC,GAAD;MAAU,WAAU;MAAyB,QAAO;KAAQ,CAAA;IACxD,CAAA;GACH,CAAA;GAGN,KAAgB,CAAC,KAChB,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,OAAD;KACE,MAAK;KACL,cAAW;KACX,iBAAe;KACf,iBAAe;KACf,iBAAe;KACf,UAAU;KACV,KAAK;KACL,WAAU;KACV,aAAa;KACb,cAAc;KACd,UAAU,MAAM,EAAE,gBAAgB;KAClC,WAAW;KAEX,UAAA,kBAAC,OAAD;MAAK,WAAU;MACb,UAAA,kBAAC,OAAD;OACE,WAAU;OACV,OAAO,EAAE,OAAO,GAAG,EAAgB,GAAG;MACvC,CAAA;KACE,CAAA;IACF,CAAA;GACF,CAAA;GAGN,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,MAAM;MAEd,AADA,EAAE,gBAAgB,GAClB,GAAY,MAAM,CAAC,CAAC;KACtB;KACA,WAAU;KACV,cAAY,IAAU,UAAU;KAE/B,UAAA,IACC,kBAAC,GAAD;MAAW,WAAU;MAAS,QAAO;KAAQ,CAAA,IAE7C,kBAAC,GAAD;MAAU,WAAU;MAAwB,QAAO;KAAQ,CAAA;IAEvD,CAAA,GAER,kBAAC,OAAD;KACE,MAAK;KACL,cAAW;KACX,iBAAe;KACf,iBAAe;KACf,iBAAe;KACf,UAAU;KACV,KAAK;KACL,WAAU;KACV,aAAa;KACb,cAAc;KACd,UAAU,MAAM,EAAE,gBAAgB;KAClC,oBAAoB,EAAmB,EAAI;KAC3C,oBAAoB,EAAmB,EAAK;KAC5C,WAAW;KAdb,UAAA,CAgBE,kBAAC,OAAD;MACE,WAAW,+EAA+E,KAAmB,IAAU,UAAU;MAEjI,UAAA,kBAAC,OAAD;OACE,WAAU;OACV,OAAO,EAAE,OAAO,GAAG,EAAgB,GAAG;MACvC,CAAA;KACE,CAAA,GACL,kBAAC,OAAD;MACE,eAAY;MACZ,WAAW,6GAA6G,KAAmB,IAAU,0BAA0B;MAC/K,OAAO,EAAE,MAAM,GAAG,EAAgB,GAAG;KACtC,CAAA,CACE;IACF,CAAA,CAAA;;EAEJ;;AAET,GCnYM,KAAwB,MAC5B,MAAY,SAAS,0BAA0B,yBAE3C,KAAoB,MACxB,MAAY,SACR,6CACA,2CAMA,KAA2D,EAC/D,aACA,cACA,iBACA,UACA,YACA,qBACA,oBAAiB,SACb;CACJ,IAAM,IAAa,EAAc,CAAQ,GACnC,CAAC,GAAa,KAAkB,EAAS,EAAK,GAC9C,IAAqB,EAA+B,CAAS,GAC7D,IAAwB,EAA+B,CAAY;CAwFzE,OAtFI,MAAc,MAAe,WAAW,MAAe,WAEvD,kBAAC,GAAD;EACE,QAAQ;EACE;EACV,QAAQ;EACR,UAAA;EACA,GAAI;CACL,CAAA,IAID,KAAa,MAAe,UAC1B,IAEA,kBAAC,OAAD;EAAK,WAAW,YAAY,EAAiB,CAAO;EAClD,UAAA,kBAAC,OAAD;GACE,KAAK,KAAsB;GAC3B,KAAK,KAAS;GACd,WAAW,iFAAiF,IAAc,gBAAgB;GAC1H,WAAW;GACX,cAAc,EAAe,EAAI;EAClC,CAAA;CACE,CAAA,IAIP,kBAAC,OAAD;EACE,KAAK,KAAsB;EAC3B,KAAK,KAAS;EACd,WAAU;EACV,WAAW;CACZ,CAAA,IAID,KAAa,MAAe,aAC1B,IACE,IAEA,kBAAC,OAAD;EAAK,WAAW,YAAY,EAAiB,CAAO;EAClD,UAAA,kBAAC,OAAD;GACE,KAAK,KAAyB;GAC9B,KAAK,KAAS;GACd,WAAW,iFAAiF,IAAc,gBAAgB;GAC1H,WAAW;GACX,cAAc,EAAe,EAAI;EAClC,CAAA;CACE,CAAA,IAIP,kBAAC,OAAD;EACE,KAAK,KAAyB;EAC9B,KAAI;EACJ,WAAU;EACV,WAAW;CACZ,CAAA,IAIH,kBAAC,OAAD;EACE,WAAW,wDAAwD,MAAY,SAAS,gBAAgB;EAEvG,UAAA,EAAe,GAAU;GACxB,WAAW,EAAqB,CAAO;GACvC,QAAQ;EACV,CAAC;CACE,CAAA,IAKL,IAEA,kBAAC,OAAD;EAAK,WAAW,YAAY,EAAiB,CAAO;EAClD,UAAA,kBAAC,OAAD;GACE,KAAK,KAAyB;GAC9B,KAAK,KAAS;GACd,WAAW;GACX,WAAU;EACX,CAAA;CACE,CAAA,IAKP,kBAAC,OAAD;EACE,WAAW,wDAAwD,MAAY,SAAS,gBAAgB;EAEvG,UAAA,EAAe,GAAU;GACxB,WAAW,EAAqB,CAAO;GACvC,QAAQ;EACV,CAAC;CACE,CAAA;AAET"}

package/dist/{Card-BS6Fza2a.cjs → Card-BQV22M8r.cjs}

@@ -1,2 +1,2 @@
-const e=require("./rolldown-runtime-BocRIvOZ.cjs"),t=require("./AttachmentCard-BbsjzdLJ.cjs"),n=require("./LoadingDots-BSk_UeS0.cjs");let r=require("react");r=e.t(r,1);let i=require("react/jsx-runtime"),a=require("classnames");a=e.t(a,1);let o=require("@phosphor-icons/react");var s=({variant:e,title:n,placeholderTitle:r=`Attachment title`,mimeType:o,detail:s,statusBadge:c,action:l,icon:u,trailingAction:d})=>{let f=e===`dark`,p=n||r,m=!n,h=u??t.n(o,{className:(0,a.default)(`size-5 shrink-0`,f?`text-white/55`:`text-black/55`),weight:`regular`});return(0,i.jsxs)(`div`,{className:`px-4 py-3`,children:[(0,i.jsxs)(`div`,{className:`flex items-end gap-3`,children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-1`,children:[p.trim()!==``&&(0,i.jsx)(`p`,{className:(0,a.default)(`truncate text-base font-medium leading-6`,{"text-black/90":!f&&!m,"text-black/30":!f&&m,"text-white/30":f&&m,"text-white":f&&!m}),children:p}),(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1`,children:[h,s!=null&&s!==``&&(0,i.jsx)(`span`,{className:(0,a.default)(`text-xs font-medium`,f?`text-white/55`:`text-black/55`),children:s}),c]})]}),d&&(0,i.jsx)(`div`,{className:`shrink-0`,children:d})]}),l]})},c=({paymentStatus:e,mimeType:n,isPlayable:r,isLocked:s})=>{let c=n?t.i(n):void 0,l=(r??(c===`video`||c===`audio`))&&!s?o.PlayIcon:e===`paid`?o.LockOpenIcon:o.LockSimpleIcon;return(0,i.jsx)(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:(0,i.jsx)(`div`,{className:(0,a.default)(`flex size-12 items-center justify-center rounded-full bg-black/30 text-white`,l===o.PlayIcon&&`group-hover:bg-black/40`),children:(0,i.jsx)(l,{className:`size-6`,weight:`fill`})})})};function l(e){let n=t.i(e.mimeType);return n===`video`||n===`audio`}var u=({variant:e,gallery:n,title:s,showLocked:u,paymentStatus:d,topRight:f})=>{let[p,m]=(0,r.useState)(0),h=n.length,g=Math.min(p,h-1),_=n[g],v=l(_),y=t.s(_.thumbnailUrl),b=e=>{e.stopPropagation(),m(e=>Math.max(0,e-1))},x=e=>{e.stopPropagation(),m(e=>Math.min(h-1,e+1))},S=g===0,C=g===h-1,w=e===`dark`;return(0,i.jsxs)(`div`,{className:(0,a.default)(`group relative overflow-hidden rounded-t-md`,u?`aspect-[337/386]`:void 0),children:[u?(0,i.jsx)(`div`,{className:(0,a.default)(`absolute inset-0`,w?`bg-white/10`:`bg-black/5`),children:_.thumbnailUrl&&(0,i.jsx)(`img`,{src:y??_.thumbnailUrl,alt:``,"aria-hidden":!0,draggable:!1,className:`absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]`})}):(0,i.jsx)(t.t,{mimeType:_.mimeType,sourceUrl:_.sourceUrl,thumbnailUrl:_.thumbnailUrl,title:s,variant:e,mediaPlayerProps:{autoPlay:!0}},g),u&&(0,i.jsx)(c,{paymentStatus:d,isPlayable:v,isLocked:u}),h>1&&(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)(`button`,{type:`button`,onClick:b,disabled:S,"aria-label":`Previous item`,className:(0,a.default)(`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`,S?`opacity-40`:`hover:bg-black/40`),children:(0,i.jsx)(o.CaretLeftIcon,{className:`size-5`,weight:`bold`})}),(0,i.jsx)(`button`,{type:`button`,onClick:x,disabled:C,"aria-label":`Next item`,className:(0,a.default)(`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`,C?`opacity-40`:`hover:bg-black/40`),children:(0,i.jsx)(o.CaretRightIcon,{className:`size-5`,weight:`bold`})}),(0,i.jsx)(`div`,{className:`pointer-events-none absolute bottom-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30`,children:(0,i.jsxs)(`span`,{className:`text-xs font-medium leading-none text-white`,children:[g+1,`/`,h]})})]}),f&&(0,i.jsx)(`div`,{className:`pointer-events-auto absolute right-3 top-3 z-10`,children:f})]})},d=({variant:e,mimeType:n,thumbnailUrl:r,title:o,source:s,showLocked:l,paymentStatus:u,topRight:d,containedImage:f=!1})=>{let p=l?void 0:s?.sourceUrl,m=l?r:s?.thumbnailUrl??r,h=t.s(m),g=e===`dark`;return(0,i.jsxs)(`div`,{className:`relative overflow-hidden rounded-t-md`,children:[l?(0,i.jsxs)(`div`,{className:(0,a.default)(`relative aspect-video overflow-hidden`,g?`bg-white/10`:`bg-black/5`),children:[m?(0,i.jsx)(`img`,{src:h??m,alt:``,"aria-hidden":!0,draggable:!1,className:`absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]`}):(0,i.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center`,children:t.n(n,{className:g?`size-12 text-white/20`:`size-12 text-black/20`,weight:`regular`})}),(0,i.jsx)(c,{paymentStatus:u,mimeType:n,isLocked:l})]}):(0,i.jsx)(t.t,{mimeType:n,sourceUrl:p,thumbnailUrl:m,title:o,variant:e,containedImage:f,mediaPlayerProps:p?{autoPlay:!0,loop:!0,controls:!0,muted:!1}:void 0}),d&&(0,i.jsx)(`div`,{className:`pointer-events-auto absolute right-3 top-3 z-10`,children:d})]})},f=e=>e.length>=2,p=e=>(0,i.jsx)(o.ImagesIcon,{className:e===`dark`?`size-5 shrink-0 text-white/55`:`size-5 shrink-0 text-black/55`}),m=({variant:e,gallery:t,title:n,showLocked:r,paymentStatus:a,mimeType:o,thumbnailUrl:s,source:c,containedImage:l,topRight:p})=>f(t)?(0,i.jsx)(u,{variant:e,gallery:t,title:n,showLocked:r,paymentStatus:a,topRight:p}):(0,i.jsx)(d,{variant:e,mimeType:o,thumbnailUrl:s,title:n,source:c,showLocked:r,paymentStatus:a,topRight:p,containedImage:l}),h=({variant:e,children:t,rootRef:n,"data-testid":r})=>(0,i.jsx)(`div`,{ref:n,"data-testid":r,className:(0,a.default)(`relative w-[280px] select-none overflow-hidden rounded-md`,e===`dark`?`bg-[#1e2330]`:`bg-white`,`shadow-[0_1px_2px_rgba(0,0,0,0.08)]`),children:t}),g=({onToggle:e,isBusy:t,isPreviewVisible:n,children:a})=>e?(0,i.jsx)(`div`,{role:`button`,tabIndex:t?-1:0,"aria-label":`Toggle preview`,"aria-busy":t,"aria-pressed":n,"aria-disabled":t||void 0,onClick:t?void 0:e,onKeyDown:n=>{t||n.target===n.currentTarget&&(n.key===`Enter`||n.key===` `)&&(n.preventDefault(),e())},className:t?`block w-full text-left`:`block w-full cursor-pointer text-left`,children:a}):(0,i.jsx)(r.default.Fragment,{children:a});function _({isGallery:e,onFetchSource:t,onPreviewClick:n}){let[i,a]=(0,r.useState)(),[o,s]=(0,r.useState)(!1),[c,l]=(0,r.useState)(!1),u=(0,r.useRef)(!1),d=(0,r.useCallback)(async()=>{if(n?.(),o){s(!1);return}if(e){s(!0);return}if(i){s(!0);return}if(t&&!u.current){u.current=!0,l(!0);try{let e=await t();e&&(a(e),s(!0))}finally{u.current=!1,l(!1)}}},[o,e,i,n,t]);return{source:i,isPreviewVisible:o,isLoadingPreview:c,handleToggle:d,togglePreview:e||t!=null||n!=null?d:void 0}}function v({paymentStatus:e,onFetchSource:t,onUnlockClick:n}){let[i,a]=(0,r.useState)(),o=(0,r.useRef)(null),s=(0,r.useRef)(!1),c=(0,r.useRef)(t);c.current=t;let l=(0,r.useCallback)(async()=>{if(!s.current){s.current=!0;try{let e=await c.current?.();e&&a(e)}finally{s.current=!1}}},[]),u=(0,r.useCallback)(()=>{e===`paid`?l():n?.()},[e,l,n]);return(0,r.useEffect)(()=>{if(!o.current||e!==`paid`||i!==void 0)return;let t=new IntersectionObserver(([e])=>{e.isIntersecting&&(l(),t.disconnect())},{threshold:1});return t.observe(o.current),()=>t.disconnect()},[e,i,l]),{source:i,cardRef:o,handleUnlockClick:u}}var y=`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]`,b=({isLocked:e,sourceUrl:t,redeemUrl:a,onUnlockClicked:s,onDownloadClicked:c,isUnlocking:l=!1})=>{if(e&&s!=null)return(0,i.jsx)(`button`,{type:`button`,onClick:s,disabled:l,"aria-label":l?`Unlocking`:`Unlock`,"aria-busy":l,title:l?`Unlocking`:`Unlock`,className:y,children:l?(0,i.jsx)(n.t,{}):(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)(o.LockSimpleIcon,{className:`size-4`,weight:`fill`}),`Unlock`]})});if(!e&&c!=null){let e=a??t;return e==null?(0,i.jsxs)(`button`,{type:`button`,onClick:c,"aria-label":`Download`,className:y,children:[(0,i.jsx)(o.DownloadSimpleIcon,{className:`size-4`,weight:`bold`}),`Download`]}):(0,i.jsxs)(`a`,{href:e,"aria-label":`Download`,target:`_blank`,rel:`noopener noreferrer`,onClick:c,className:`${y} !text-white`,children:[(0,i.jsx)(o.DownloadSimpleIcon,{className:`size-4`,weight:`bold`}),`Download`]})}return null},x=({title:e,mimeType:t=`application/octet-stream`,thumbnailUrl:n,detail:a,amountText:c,placeholderTitle:l,placeholderAmountText:u,gallery:d=[],onDismiss:v,onPreviewClick:y,onFetchSource:b,onEditClick:x})=>{let S=f(d),{source:C,isPreviewVisible:w,isLoadingPreview:T,togglePreview:E}=_({isGallery:S,onFetchSource:b,onPreviewClick:y}),D=!w,O=T,k=(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)(`span`,{className:`text-xs font-medium text-white/55`,children:`•`}),(0,i.jsx)(`span`,{className:c?`text-xs font-medium text-white/55`:`text-xs font-medium text-white/30`,children:c||u})]}),A=v?(0,i.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),v()},className:`flex size-6 items-center justify-center rounded-full bg-[#121110] text-white`,"aria-label":`Dismiss attachment`,children:(0,i.jsx)(o.XIcon,{className:`size-3`,weight:`bold`})}):void 0,j=x?(0,i.jsx)(`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:(0,i.jsx)(o.PencilSimpleIcon,{className:`size-5`,weight:`regular`})}):void 0;return(0,i.jsxs)(h,{variant:`dark`,children:[(0,i.jsx)(g,{onToggle:E,isBusy:O,isPreviewVisible:!D,children:(0,i.jsx)(m,{variant:`dark`,gallery:d,title:e,showLocked:D,mimeType:t,thumbnailUrl:n,source:C,topRight:A})}),(0,i.jsx)(s,{variant:`dark`,title:e,placeholderTitle:l,mimeType:t,detail:a,statusBadge:k,icon:S?p(`dark`):void 0,trailingAction:j})]})},S=({title:e,mimeType:t=`application/octet-stream`,thumbnailUrl:n,detail:a,amountText:o,placeholderTitle:c,placeholderAmountText:l,gallery:u=[]})=>{let d=f(u),g=(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)(`span`,{className:`text-xs font-medium text-black/55`,children:`•`}),(0,i.jsx)(`span`,{className:o?`text-xs font-medium text-black/55`:`text-xs font-medium text-black/30`,children:o||l})]});return(0,i.jsxs)(h,{variant:`light`,children:[(0,i.jsx)(m,{variant:`light`,gallery:u,title:e,showLocked:!0,mimeType:t,thumbnailUrl:n}),(0,i.jsx)(s,{variant:`light`,title:e,placeholderTitle:c,mimeType:t,detail:a,statusBadge:g,icon:d?p(`light`):void 0})]})},C=({title:e,mimeType:t=`application/octet-stream`,thumbnailUrl:r,detail:a,amountText:o,placeholderTitle:c,paymentStatus:l=`pending`,gallery:u=[],onPreviewClick:d,onFetchSource:v})=>{let y=f(u),{source:b,isPreviewVisible:x,isLoadingPreview:S,togglePreview:C}=_({isGallery:y,onFetchSource:v,onPreviewClick:d}),w=!x;return(0,i.jsxs)(h,{variant:`dark`,children:[(0,i.jsx)(g,{onToggle:C,isBusy:S,isPreviewVisible:!w,children:(0,i.jsx)(m,{variant:`dark`,gallery:u,title:e,showLocked:w,paymentStatus:l,mimeType:t,thumbnailUrl:r,source:b})}),(0,i.jsx)(s,{variant:`dark`,title:e,placeholderTitle:c,mimeType:t,detail:a,statusBadge:(0,i.jsx)(n.n,{isMine:!0,paymentStatus:l,amountText:o}),icon:y?p(`dark`):void 0})]})},w=({title:e,amountText:r,thumbnailUrl:a,mimeType:o=`application/octet-stream`,detail:c,gallery:l=[],onUnlockClick:u,onFetchSource:d,onDownloadClick:g,paymentStatus:_,isUnlocking:y=!1})=>{let x=f(l),{source:S,cardRef:C,handleUnlockClick:w}=v({paymentStatus:_,onFetchSource:d,onUnlockClick:u}),T=S?.sourceUrl,E=S?.redeemUrl,D=x?_!==`paid`:T===void 0,O=t.i(o),k=x?void 0:T;return(0,i.jsxs)(h,{variant:`light`,rootRef:C,"data-testid":`locked-attachment`,children:[(0,i.jsx)(m,{variant:`light`,gallery:l,title:e,showLocked:D,paymentStatus:_,mimeType:o,thumbnailUrl:a,source:S,containedImage:!D&&O===`document`}),(0,i.jsx)(s,{variant:`light`,title:e,mimeType:o,detail:c,statusBadge:(0,i.jsx)(n.n,{isMine:!1,paymentStatus:_,amountText:r}),icon:x?p(`light`):void 0,action:(0,i.jsx)(b,{isLocked:D,isUnlocking:y,sourceUrl:k,redeemUrl:E,onUnlockClicked:w,onDownloadClicked:g})})]})},T=e=>e.isDraft?(0,i.jsx)(x,{...e}):e.isPreview?(0,i.jsx)(S,{...e}):e.isMine?(0,i.jsx)(C,{...e}):(0,i.jsx)(w,{...e});exports.default=T;
-//# sourceMappingURL=Card-BS6Fza2a.cjs.map
+const e=require("./rolldown-runtime-BocRIvOZ.cjs"),t=require("./AttachmentCard-C1cC996u.cjs"),n=require("./LoadingDots-BSk_UeS0.cjs");let r=require("react");r=e.t(r,1);let i=require("react/jsx-runtime"),a=require("classnames");a=e.t(a,1);let o=require("@phosphor-icons/react");var s=({variant:e,title:n,placeholderTitle:r=`Attachment title`,mimeType:o,detail:s,statusBadge:c,action:l,icon:u,trailingAction:d})=>{let f=e===`dark`,p=n||r,m=!n,h=u??t.n(o,{className:(0,a.default)(`size-5 shrink-0`,f?`text-white/55`:`text-black/55`),weight:`regular`});return(0,i.jsxs)(`div`,{className:`px-4 py-3`,children:[(0,i.jsxs)(`div`,{className:`flex items-end gap-3`,children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-1`,children:[p.trim()!==``&&(0,i.jsx)(`p`,{className:(0,a.default)(`truncate text-base font-medium leading-6`,{"text-black/90":!f&&!m,"text-black/30":!f&&m,"text-white/30":f&&m,"text-white":f&&!m}),children:p}),(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1`,children:[h,s!=null&&s!==``&&(0,i.jsx)(`span`,{className:(0,a.default)(`text-xs font-medium`,f?`text-white/55`:`text-black/55`),children:s}),c]})]}),d&&(0,i.jsx)(`div`,{className:`shrink-0`,children:d})]}),l]})},c=({paymentStatus:e,mimeType:n,isPlayable:r,isLocked:s})=>{let c=n?t.i(n):void 0,l=(r??(c===`video`||c===`audio`))&&!s?o.PlayIcon:e===`paid`?o.LockOpenIcon:o.LockSimpleIcon;return(0,i.jsx)(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:(0,i.jsx)(`div`,{className:(0,a.default)(`flex size-12 items-center justify-center rounded-full bg-black/30 text-white`,l===o.PlayIcon&&`group-hover:bg-black/40`),children:(0,i.jsx)(l,{className:`size-6`,weight:`fill`})})})};function l(e){let n=t.i(e.mimeType);return n===`video`||n===`audio`}var u=({variant:e,gallery:n,title:s,showLocked:u,paymentStatus:d,topRight:f})=>{let[p,m]=(0,r.useState)(0),h=n.length,g=Math.min(p,h-1),_=n[g],v=l(_),y=t.s(_.thumbnailUrl),b=e=>{e.stopPropagation(),m(e=>Math.max(0,e-1))},x=e=>{e.stopPropagation(),m(e=>Math.min(h-1,e+1))},S=g===0,C=g===h-1,w=e===`dark`;return(0,i.jsxs)(`div`,{className:(0,a.default)(`group relative overflow-hidden rounded-t-md`,u?`aspect-[337/386]`:void 0),children:[u?(0,i.jsx)(`div`,{className:(0,a.default)(`absolute inset-0`,w?`bg-white/10`:`bg-black/5`),children:_.thumbnailUrl&&(0,i.jsx)(`img`,{src:y??_.thumbnailUrl,alt:``,"aria-hidden":!0,draggable:!1,className:`absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]`})}):(0,i.jsx)(t.t,{mimeType:_.mimeType,sourceUrl:_.sourceUrl,thumbnailUrl:_.thumbnailUrl,title:s,variant:e,mediaPlayerProps:{autoPlay:!0}},g),u&&(0,i.jsx)(c,{paymentStatus:d,isPlayable:v,isLocked:u}),h>1&&(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)(`button`,{type:`button`,onClick:b,disabled:S,"aria-label":`Previous item`,className:(0,a.default)(`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`,S?`opacity-40`:`hover:bg-black/40`),children:(0,i.jsx)(o.CaretLeftIcon,{className:`size-5`,weight:`bold`})}),(0,i.jsx)(`button`,{type:`button`,onClick:x,disabled:C,"aria-label":`Next item`,className:(0,a.default)(`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`,C?`opacity-40`:`hover:bg-black/40`),children:(0,i.jsx)(o.CaretRightIcon,{className:`size-5`,weight:`bold`})}),(0,i.jsx)(`div`,{className:`pointer-events-none absolute bottom-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30`,children:(0,i.jsxs)(`span`,{className:`text-xs font-medium leading-none text-white`,children:[g+1,`/`,h]})})]}),f&&(0,i.jsx)(`div`,{className:`pointer-events-auto absolute right-3 top-3 z-10`,children:f})]})},d=({variant:e,mimeType:n,thumbnailUrl:r,title:o,source:s,showLocked:l,paymentStatus:u,topRight:d,containedImage:f=!1})=>{let p=l?void 0:s?.sourceUrl,m=l?r:s?.thumbnailUrl??r,h=t.s(m),g=e===`dark`;return(0,i.jsxs)(`div`,{className:`relative overflow-hidden rounded-t-md`,children:[l?(0,i.jsxs)(`div`,{className:(0,a.default)(`relative aspect-video overflow-hidden`,g?`bg-white/10`:`bg-black/5`),children:[m?(0,i.jsx)(`img`,{src:h??m,alt:``,"aria-hidden":!0,draggable:!1,className:`absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]`}):(0,i.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center`,children:t.n(n,{className:g?`size-12 text-white/20`:`size-12 text-black/20`,weight:`regular`})}),(0,i.jsx)(c,{paymentStatus:u,mimeType:n,isLocked:l})]}):(0,i.jsx)(t.t,{mimeType:n,sourceUrl:p,thumbnailUrl:m,title:o,variant:e,containedImage:f,mediaPlayerProps:p?{autoPlay:!0,loop:!0,controls:!0,muted:!1}:void 0}),d&&(0,i.jsx)(`div`,{className:`pointer-events-auto absolute right-3 top-3 z-10`,children:d})]})},f=e=>e.length>=2,p=e=>(0,i.jsx)(o.ImagesIcon,{className:e===`dark`?`size-5 shrink-0 text-white/55`:`size-5 shrink-0 text-black/55`}),m=({variant:e,gallery:t,title:n,showLocked:r,paymentStatus:a,mimeType:o,thumbnailUrl:s,source:c,containedImage:l,topRight:p})=>f(t)?(0,i.jsx)(u,{variant:e,gallery:t,title:n,showLocked:r,paymentStatus:a,topRight:p}):(0,i.jsx)(d,{variant:e,mimeType:o,thumbnailUrl:s,title:n,source:c,showLocked:r,paymentStatus:a,topRight:p,containedImage:l}),h=({variant:e,children:t,rootRef:n,"data-testid":r})=>(0,i.jsx)(`div`,{ref:n,"data-testid":r,className:(0,a.default)(`relative w-[280px] select-none overflow-hidden rounded-md`,e===`dark`?`bg-[#1e2330]`:`bg-white`,`shadow-[0_1px_2px_rgba(0,0,0,0.08)]`),children:t}),g=({onToggle:e,isBusy:t,isPreviewVisible:n,children:a})=>e?(0,i.jsx)(`div`,{role:`button`,tabIndex:t?-1:0,"aria-label":`Toggle preview`,"aria-busy":t,"aria-pressed":n,"aria-disabled":t||void 0,onClick:t?void 0:e,onKeyDown:n=>{t||n.target===n.currentTarget&&(n.key===`Enter`||n.key===` `)&&(n.preventDefault(),e())},className:t?`block w-full text-left`:`block w-full cursor-pointer text-left`,children:a}):(0,i.jsx)(r.default.Fragment,{children:a});function _({isGallery:e,onFetchSource:t,onPreviewClick:n}){let[i,a]=(0,r.useState)(),[o,s]=(0,r.useState)(!1),[c,l]=(0,r.useState)(!1),u=(0,r.useRef)(!1),d=(0,r.useCallback)(async()=>{if(n?.(),o){s(!1);return}if(e){s(!0);return}if(i){s(!0);return}if(t&&!u.current){u.current=!0,l(!0);try{let e=await t();e&&(a(e),s(!0))}finally{u.current=!1,l(!1)}}},[o,e,i,n,t]);return{source:i,isPreviewVisible:o,isLoadingPreview:c,handleToggle:d,togglePreview:e||t!=null||n!=null?d:void 0}}function v({paymentStatus:e,onFetchSource:t,onUnlockClick:n}){let[i,a]=(0,r.useState)(),o=(0,r.useRef)(null),s=(0,r.useRef)(!1),c=(0,r.useRef)(t);c.current=t;let l=(0,r.useCallback)(async()=>{if(!s.current){s.current=!0;try{let e=await c.current?.();e&&a(e)}finally{s.current=!1}}},[]),u=(0,r.useCallback)(()=>{e===`paid`?l():n?.()},[e,l,n]);return(0,r.useEffect)(()=>{if(!o.current||e!==`paid`||i!==void 0)return;let t=new IntersectionObserver(([e])=>{e.isIntersecting&&(l(),t.disconnect())},{threshold:1});return t.observe(o.current),()=>t.disconnect()},[e,i,l]),{source:i,cardRef:o,handleUnlockClick:u}}var y=`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]`,b=({isLocked:e,sourceUrl:t,redeemUrl:a,onUnlockClicked:s,onDownloadClicked:c,isUnlocking:l=!1})=>{if(e&&s!=null)return(0,i.jsx)(`button`,{type:`button`,onClick:s,disabled:l,"aria-label":l?`Unlocking`:`Unlock`,"aria-busy":l,title:l?`Unlocking`:`Unlock`,className:y,children:l?(0,i.jsx)(n.t,{}):(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)(o.LockSimpleIcon,{className:`size-4`,weight:`fill`}),`Unlock`]})});if(!e&&c!=null){let e=a??t;return e==null?(0,i.jsxs)(`button`,{type:`button`,onClick:c,"aria-label":`Download`,className:y,children:[(0,i.jsx)(o.DownloadSimpleIcon,{className:`size-4`,weight:`bold`}),`Download`]}):(0,i.jsxs)(`a`,{href:e,"aria-label":`Download`,target:`_blank`,rel:`noopener noreferrer`,onClick:c,className:`${y} !text-white`,children:[(0,i.jsx)(o.DownloadSimpleIcon,{className:`size-4`,weight:`bold`}),`Download`]})}return null},x=({title:e,mimeType:t=`application/octet-stream`,thumbnailUrl:n,detail:a,amountText:c,placeholderTitle:l,placeholderAmountText:u,gallery:d=[],onDismiss:v,onPreviewClick:y,onFetchSource:b,onEditClick:x})=>{let S=f(d),{source:C,isPreviewVisible:w,isLoadingPreview:T,togglePreview:E}=_({isGallery:S,onFetchSource:b,onPreviewClick:y}),D=!w,O=T,k=(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)(`span`,{className:`text-xs font-medium text-white/55`,children:`•`}),(0,i.jsx)(`span`,{className:c?`text-xs font-medium text-white/55`:`text-xs font-medium text-white/30`,children:c||u})]}),A=v?(0,i.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),v()},className:`flex size-6 items-center justify-center rounded-full bg-[#121110] text-white`,"aria-label":`Dismiss attachment`,children:(0,i.jsx)(o.XIcon,{className:`size-3`,weight:`bold`})}):void 0,j=x?(0,i.jsx)(`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:(0,i.jsx)(o.PencilSimpleIcon,{className:`size-5`,weight:`regular`})}):void 0;return(0,i.jsxs)(h,{variant:`dark`,children:[(0,i.jsx)(g,{onToggle:E,isBusy:O,isPreviewVisible:!D,children:(0,i.jsx)(m,{variant:`dark`,gallery:d,title:e,showLocked:D,mimeType:t,thumbnailUrl:n,source:C,topRight:A})}),(0,i.jsx)(s,{variant:`dark`,title:e,placeholderTitle:l,mimeType:t,detail:a,statusBadge:k,icon:S?p(`dark`):void 0,trailingAction:j})]})},S=({title:e,mimeType:t=`application/octet-stream`,thumbnailUrl:n,detail:a,amountText:o,placeholderTitle:c,placeholderAmountText:l,gallery:u=[]})=>{let d=f(u),g=(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)(`span`,{className:`text-xs font-medium text-black/55`,children:`•`}),(0,i.jsx)(`span`,{className:o?`text-xs font-medium text-black/55`:`text-xs font-medium text-black/30`,children:o||l})]});return(0,i.jsxs)(h,{variant:`light`,children:[(0,i.jsx)(m,{variant:`light`,gallery:u,title:e,showLocked:!0,mimeType:t,thumbnailUrl:n}),(0,i.jsx)(s,{variant:`light`,title:e,placeholderTitle:c,mimeType:t,detail:a,statusBadge:g,icon:d?p(`light`):void 0})]})},C=({title:e,mimeType:t=`application/octet-stream`,thumbnailUrl:r,detail:a,amountText:o,placeholderTitle:c,paymentStatus:l=`pending`,gallery:u=[],onPreviewClick:d,onFetchSource:v})=>{let y=f(u),{source:b,isPreviewVisible:x,isLoadingPreview:S,togglePreview:C}=_({isGallery:y,onFetchSource:v,onPreviewClick:d}),w=!x;return(0,i.jsxs)(h,{variant:`dark`,children:[(0,i.jsx)(g,{onToggle:C,isBusy:S,isPreviewVisible:!w,children:(0,i.jsx)(m,{variant:`dark`,gallery:u,title:e,showLocked:w,paymentStatus:l,mimeType:t,thumbnailUrl:r,source:b})}),(0,i.jsx)(s,{variant:`dark`,title:e,placeholderTitle:c,mimeType:t,detail:a,statusBadge:(0,i.jsx)(n.n,{isMine:!0,paymentStatus:l,amountText:o}),icon:y?p(`dark`):void 0})]})},w=({title:e,amountText:r,thumbnailUrl:a,mimeType:o=`application/octet-stream`,detail:c,gallery:l=[],onUnlockClick:u,onFetchSource:d,onDownloadClick:g,paymentStatus:_,isUnlocking:y=!1})=>{let x=f(l),{source:S,cardRef:C,handleUnlockClick:w}=v({paymentStatus:_,onFetchSource:d,onUnlockClick:u}),T=S?.sourceUrl,E=S?.redeemUrl,D=x?_!==`paid`:T===void 0,O=t.i(o),k=x?void 0:T;return(0,i.jsxs)(h,{variant:`light`,rootRef:C,"data-testid":`locked-attachment`,children:[(0,i.jsx)(m,{variant:`light`,gallery:l,title:e,showLocked:D,paymentStatus:_,mimeType:o,thumbnailUrl:a,source:S,containedImage:!D&&O===`document`}),(0,i.jsx)(s,{variant:`light`,title:e,mimeType:o,detail:c,statusBadge:(0,i.jsx)(n.n,{isMine:!1,paymentStatus:_,amountText:r}),icon:x?p(`light`):void 0,action:(0,i.jsx)(b,{isLocked:D,isUnlocking:y,sourceUrl:k,redeemUrl:E,onUnlockClicked:w,onDownloadClicked:g})})]})},T=e=>e.isDraft?(0,i.jsx)(x,{...e}):e.isPreview?(0,i.jsx)(S,{...e}):e.isMine?(0,i.jsx)(C,{...e}):(0,i.jsx)(w,{...e});exports.default=T;
+//# sourceMappingURL=Card-BQV22M8r.cjs.map

package/dist/{Card-BS6Fza2a.cjs.map → Card-BQV22M8r.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Card-BS6Fza2a.cjs","names":[],"sources":["../src/components/CustomMessage/LockedAttachment/components/_shared/CardBody.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/LockBadge.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/GalleryThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/CardThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/MediaShell.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/PreviewToggle.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/usePreviewToggle.ts","../src/components/CustomMessage/LockedAttachment/components/_shared/useReceivedSource.ts","../src/components/CustomMessage/LockedAttachment/components/Media/CardActions.tsx","../src/components/CustomMessage/LockedAttachment/components/Media/Card.tsx"],"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 = title || placeholderTitle\n  const titleDimmed = !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(\n                'truncate text-base font-medium leading-6',\n                {\n                  'text-black/90': !isDark && !titleDimmed,\n                  'text-black/30': !isDark && titleDimmed,\n                  'text-white/30': isDark && titleDimmed,\n                  'text-white': isDark && !titleDimmed,\n                }\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 classNames from 'classnames'\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  /** Whether the item is still locked. Play only ever shows once unlocked —\n   * a locked item always shows the lock, even for otherwise-playable media. */\n  isLocked: boolean\n}\n\n/**\n * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.\n * Uses `bg-black/30`. Stays `pointer-events-none` so clicks pass through to\n * the underlying player/toggle; the play state highlights via `group-hover`\n * (same `bg-black/40` as the gallery's prev/next arrows) — the ancestor\n * providing `group` must wrap the actual clickable/hoverable player area.\n *\n * For playable media (video/audio) that's unlocked, the badge shows a play\n * icon instead of a lock — matching the convention used by `GalleryThumbnail`.\n */\nexport const LockBadge: React.FC<LockBadgeProps> = ({\n  paymentStatus,\n  mimeType,\n  isPlayable,\n  isLocked,\n}) => {\n  const sourceType = mimeType ? getSourceType(mimeType) : undefined\n  const resolvedIsPlayable =\n    isPlayable ?? (sourceType === 'video' || sourceType === 'audio')\n\n  const Icon =\n    resolvedIsPlayable && !isLocked\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\n        className={classNames(\n          'flex size-12 items-center justify-center rounded-full bg-black/30 text-white',\n          Icon === PlayIcon && 'group-hover:bg-black/40'\n        )}\n      >\n        <Icon className=\"size-6\" weight=\"fill\" />\n      </div>\n    </div>\n  )\n}\n","import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useState } from 'react'\n\nimport { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'\nimport { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'\nimport type { LockedAttachmentGalleryItem, PaymentStatus } 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  const optimizedCurrentThumbnailUrl = optimizeMessagingAttachmentUrl(\n    current.thumbnailUrl\n  )\n\n  // Stop propagation so arrow taps don't bubble up to the outer preview-toggle\n  // wrapper on PreviewMediaCard / 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).\n  //\n  // The locked placeholder is absolutely positioned, so it needs the fixed\n  // 337/386 box for height; unlocked content (video, natural-sized image)\n  // manages its own height and can expand/shrink per item.\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\n      className={classNames(\n        'group relative overflow-hidden rounded-t-md',\n        showLocked ? 'aspect-[337/386]' : undefined\n      )}\n    >\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={optimizedCurrentThumbnailUrl ?? 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          key={safeIndex}\n          mimeType={current.mimeType}\n          sourceUrl={current.sourceUrl}\n          thumbnailUrl={current.thumbnailUrl}\n          title={title}\n          variant={variant}\n          mediaPlayerProps={{ autoPlay: true }}\n        />\n      )}\n\n      {/* LOCK while locked. Once unlocked, video/audio autoplays via\n          `mediaPlayerProps` and MediaPlayer already has its own inline\n          controls, so no separate Play affordance is shown. */}\n      {showLocked && (\n        <LockBadge\n          paymentStatus={paymentStatus}\n          isPlayable={isVideoItem}\n          isLocked={showLocked}\n        />\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-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30\">\n            <span className=\"text-xs font-medium leading-none 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 { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'\nimport { AttachmentThumbnail, renderTypeIcon } 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  const optimizedThumbnailUrl = optimizeMessagingAttachmentUrl(\n    effectiveThumbnailUrl\n  )\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={optimizedThumbnailUrl ?? 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\n            paymentStatus={paymentStatus}\n            mimeType={mimeType}\n            isLocked={showLocked}\n          />\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 = (variant: CardVariant): 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 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      variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white',\n      'shadow-[0_1px_2px_rgba(0,0,0,0.08)]'\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","/* eslint-disable react-hooks/refs -- pre-existing pattern flagged by the React\n   Compiler rules added in eslint-plugin-react-hooks v7; refactoring it is\n   out of scope for the lint toolchain upgrade. */\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type {\n  FetchSourceHandler,\n  LockedAttachmentSource,\n  PaymentStatus,\n} from '../../types'\n\nexport interface UseReceivedSourceOptions {\n  paymentStatus?: PaymentStatus\n  onFetchSource?: FetchSourceHandler\n  /** Called on Unlock click while the card is still unpaid (opens checkout). */\n  onUnlockClick?: () => void\n}\n\nexport interface UseReceivedSourceResult {\n  source: LockedAttachmentSource | undefined\n  /** Attach to the card root so the paid-source auto-fetch can observe it. */\n  cardRef: React.RefObject<HTMLDivElement>\n  /** Fetches the source when already paid, else defers to `onUnlockClick`. */\n  handleUnlockClick: () => void\n}\n\n/**\n * Media !isMine's source-reveal logic: unlike Composer/Media isMine's\n * tap-to-toggle (`usePreviewToggle`), the recipient's card reveals its source\n * by fetching once — on click when already paid, or automatically the first\n * time a paid card scrolls fully into view. The fetch is guarded so it runs\n * at most once in flight.\n */\nexport function useReceivedSource({\n  paymentStatus,\n  onFetchSource,\n  onUnlockClick,\n}: UseReceivedSourceOptions): UseReceivedSourceResult {\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n\n  const cardRef = useRef<HTMLDivElement>(null)\n  const fetchingRef = useRef(false)\n\n  const onFetchSourceRef = useRef(onFetchSource)\n  onFetchSourceRef.current = onFetchSource\n\n  const fetchSource = useCallback(async (): Promise<void> => {\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    try {\n      const result = await onFetchSourceRef.current?.()\n      if (result) setSource(result)\n    } finally {\n      fetchingRef.current = false\n    }\n  }, [])\n\n  const handleUnlockClick = useCallback(() => {\n    if (paymentStatus === 'paid') {\n      void fetchSource()\n    } else {\n      onUnlockClick?.()\n    }\n  }, [paymentStatus, fetchSource, onUnlockClick])\n\n  // Auto-fetch the source once the paid card scrolls into view.\n  useEffect(() => {\n    if (!cardRef.current) return\n    if (paymentStatus !== 'paid' || source !== undefined) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          void fetchSource()\n          observer.disconnect()\n        }\n      },\n      { threshold: 1.0 }\n    )\n\n    observer.observe(cardRef.current)\n    return () => observer.disconnect()\n  }, [paymentStatus, source, fetchSource])\n\n  return { source, cardRef, handleUnlockClick }\n}\n","import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport LoadingDots from '../_shared/LoadingDots'\n\nexport interface ReceivedCardActionsProps {\n  /** Whether the card is currently locked. Drives which CTA we render. */\n  isLocked: boolean\n  /**\n   * When unlocked, the URL used as the Download link's `href` (opens in a new\n   * tab). When omitted, the Download CTA falls back to a plain `<button>`\n   * that just calls `onDownloadClicked` — useful for galleries where the\n   * single-source URL doesn't exist.\n   */\n  sourceUrl?: string\n  /** Optional alternate href that takes precedence over `sourceUrl`. */\n  redeemUrl?: string\n  onUnlockClicked?: () => void\n  onDownloadClicked?: () => void\n  isUnlocking?: boolean\n}\n\nconst buttonClass =\n  'mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928]'\n\n/**\n * Renders the primary CTA below the body of a Received card.\n * - Locked + onUnlockClicked → \"Unlock\" button\n * - Unlocked + onDownloadClicked + (redeemUrl || sourceUrl) → \"Download\" link\n * - Unlocked + onDownloadClicked + no URL → \"Download\" button (e.g. gallery)\n * Otherwise renders nothing.\n */\nconst ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({\n  isLocked,\n  sourceUrl,\n  redeemUrl,\n  onUnlockClicked,\n  onDownloadClicked,\n  isUnlocking = false,\n}) => {\n  if (isLocked && onUnlockClicked != null) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onUnlockClicked}\n        disabled={isUnlocking}\n        aria-label={isUnlocking ? 'Unlocking' : 'Unlock'}\n        aria-busy={isUnlocking}\n        title={isUnlocking ? 'Unlocking' : 'Unlock'}\n        className={buttonClass}\n      >\n        {isUnlocking ? (\n          <LoadingDots />\n        ) : (\n          <React.Fragment>\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" />\n            Unlock\n          </React.Fragment>\n        )}\n      </button>\n    )\n  }\n\n  if (!isLocked && onDownloadClicked != null) {\n    const href = redeemUrl ?? sourceUrl\n    if (href != null) {\n      return (\n        <a\n          href={href}\n          aria-label=\"Download\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          onClick={onDownloadClicked}\n          className={`${buttonClass} !text-white`}\n        >\n          <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n          Download\n        </a>\n      )\n    }\n\n    return (\n      <button\n        type=\"button\"\n        onClick={onDownloadClicked}\n        aria-label=\"Download\"\n        className={buttonClass}\n      >\n        <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n        Download\n      </button>\n    )\n  }\n\n  return null\n}\n\nexport default ReceivedCardActions\n","import { PencilSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getSourceType } from '../../../../AttachmentCard'\nimport CardBody from '../_shared/CardBody'\nimport CardThumbnail, {\n  galleryBodyIcon,\n  isGalleryCard,\n} from '../_shared/CardThumbnail'\nimport MediaShell from '../_shared/MediaShell'\nimport PreviewToggle from '../_shared/PreviewToggle'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport { usePreviewToggle } from '../_shared/usePreviewToggle'\nimport { useReceivedSource } from '../_shared/useReceivedSource'\n\nimport ReceivedCardActions from './CardActions'\nimport type {\n  MediaCardDraftProps,\n  MediaCardOtherProps,\n  MediaCardOwnProps,\n  MediaCardPreviewProps,\n  MediaCardProps,\n} from './types'\n\nexport type { MediaCardProps } from './types'\n\n/**\n * Media card while still drafting — the locked thumbnail (single or gallery)\n * the composer taps to preview the attachment they're about to send, plus\n * the title/price body with optional dismiss X and edit pencil.\n */\nconst DraftMediaCard: React.FC<MediaCardDraftProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle,\n  placeholderAmountText,\n  gallery = [],\n  onDismiss,\n  onPreviewClick,\n  onFetchSource,\n  onEditClick,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  // Gallery is always previewable in the composer because each item's source\n  // is already provided up-front via `gallery[*].sourceUrl`.\n  const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\n\n  const statusBadge = (\n    <React.Fragment>\n      <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n      <span\n        className={\n          amountText\n            ? 'text-xs font-medium text-white/55'\n            : 'text-xs font-medium text-white/30'\n        }\n      >\n        {amountText || placeholderAmountText}\n      </span>\n    </React.Fragment>\n  )\n\n  const dismissButton = onDismiss ? (\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        // Stop the click from bubbling up into the outer preview-toggle\n        // wrapper when both are wired up at the same time.\n        e.stopPropagation()\n        onDismiss()\n      }}\n      className=\"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white\"\n      aria-label=\"Dismiss attachment\"\n    >\n      <XIcon className=\"size-3\" weight=\"bold\" />\n    </button>\n  ) : undefined\n\n  const editButton = onEditClick ? (\n    <button\n      type=\"button\"\n      onClick={onEditClick}\n      aria-label=\"Edit attachment\"\n      className=\"flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n    >\n      <PencilSimpleIcon className=\"size-5\" weight=\"regular\" />\n    </button>\n  ) : undefined\n\n  return (\n    <MediaShell variant=\"dark\">\n      <PreviewToggle\n        onToggle={togglePreview}\n        isBusy={isBusy}\n        isPreviewVisible={!showLocked}\n      >\n        <CardThumbnail\n          variant=\"dark\"\n          gallery={gallery}\n          title={title}\n          showLocked={showLocked}\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          source={source}\n          topRight={dismissButton}\n        />\n      </PreviewToggle>\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={statusBadge}\n        icon={isGallery ? galleryBodyIcon('dark') : undefined}\n        trailingAction={editButton}\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * Static mockup of what the recipient will see before purchase — always\n * locked/blurred (the lock badge renders from `showLocked` alone, no toggle\n * wiring needed), no interactivity, no real content revealed.\n */\nconst PreviewMediaCard: React.FC<MediaCardPreviewProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle,\n  placeholderAmountText,\n  gallery = [],\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  const statusBadge = (\n    <React.Fragment>\n      <span className=\"text-xs font-medium text-black/55\">&bull;</span>\n      <span\n        className={\n          amountText\n            ? 'text-xs font-medium text-black/55'\n            : 'text-xs font-medium text-black/30'\n        }\n      >\n        {amountText || placeholderAmountText}\n      </span>\n    </React.Fragment>\n  )\n\n  return (\n    <MediaShell variant=\"light\">\n      <CardThumbnail\n        variant=\"light\"\n        gallery={gallery}\n        title={title}\n        showLocked\n        mimeType={mimeType}\n        thumbnailUrl={thumbnailUrl}\n      />\n\n      <CardBody\n        variant=\"light\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={statusBadge}\n        icon={isGallery ? galleryBodyIcon('light') : undefined}\n      />\n    </MediaShell>\n  )\n}\n/**\n * The sender's ('mine') view of a paid media attachment: the locked\n * thumbnail (single or gallery) they can tap to preview their own\n * attachment, plus the title/purchase-status body.\n */\nconst OwnMediaCard: React.FC<MediaCardOwnProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle,\n  paymentStatus = 'pending',\n  gallery = [],\n  onPreviewClick,\n  onFetchSource,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  // Gallery is always previewable for the sender because each item's source\n  // is already provided up-front via `gallery[*].sourceUrl`.\n  const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\n\n  return (\n    <MediaShell variant=\"dark\">\n      <PreviewToggle\n        onToggle={togglePreview}\n        isBusy={isBusy}\n        isPreviewVisible={!showLocked}\n      >\n        <CardThumbnail\n          variant=\"dark\"\n          gallery={gallery}\n          title={title}\n          showLocked={showLocked}\n          paymentStatus={paymentStatus}\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          source={source}\n        />\n      </PreviewToggle>\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={true}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('dark') : undefined}\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The recipient's ('other') view of a paid media attachment: the locked\n * thumbnail (single or gallery) with an Unlock/Download CTA. The source is\n * revealed by fetching once — on click when already paid, or automatically\n * the first time a paid card scrolls into view.\n */\nconst OtherMediaCard: React.FC<MediaCardOtherProps> = ({\n  title,\n  amountText,\n  thumbnailUrl,\n  mimeType = 'application/octet-stream',\n  detail,\n  gallery = [],\n  onUnlockClick,\n  onFetchSource,\n  onDownloadClick,\n  paymentStatus,\n  isUnlocking = false,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  const { source, cardRef, handleUnlockClick } = useReceivedSource({\n    paymentStatus,\n    onFetchSource,\n    onUnlockClick,\n  })\n\n  const effectiveSourceUrl = source?.sourceUrl\n  const effectiveRedeemUrl = source?.redeemUrl\n\n  // For gallery, the per-item sources are carried by `gallery` itself, so\n  // the lock state is driven by paymentStatus rather than the single\n  // `effectiveSourceUrl`. Everything else still respects the source fetch.\n  const isLocked = isGallery\n    ? paymentStatus !== 'paid'\n    : effectiveSourceUrl === undefined\n  const sourceType = getSourceType(mimeType)\n\n  // For gallery, ReceivedCardActions falls back to a plain <button>\n  // (no anchor) because the gallery has no single sourceUrl to link to —\n  // the per-item sources live on `gallery` itself.\n  const actionSourceUrl = isGallery ? undefined : effectiveSourceUrl\n\n  return (\n    <MediaShell\n      variant=\"light\"\n      rootRef={cardRef}\n      data-testid=\"locked-attachment\"\n    >\n      <CardThumbnail\n        variant=\"light\"\n        gallery={gallery}\n        title={title}\n        showLocked={isLocked}\n        paymentStatus={paymentStatus}\n        mimeType={mimeType}\n        thumbnailUrl={thumbnailUrl}\n        source={source}\n        containedImage={!isLocked && sourceType === 'document'}\n      />\n\n      <CardBody\n        variant=\"light\"\n        title={title}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={false}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('light') : undefined}\n        action={\n          <ReceivedCardActions\n            isLocked={isLocked}\n            isUnlocking={isUnlocking}\n            sourceUrl={actionSourceUrl}\n            redeemUrl={effectiveRedeemUrl}\n            onUnlockClicked={handleUnlockClick}\n            onDownloadClicked={onDownloadClick}\n          />\n        }\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The card either party sees for a paid media attachment. `isDraft`/`isPreview`\n * select the composer's own drafting view / a static receiver-side mockup;\n * otherwise `isMine` selects the sender's sent view vs. the recipient's\n * unlock/download view.\n */\nconst MediaCard: React.FC<MediaCardProps> = (props) => {\n  if (props.isDraft) {\n    return <DraftMediaCard {...props} />\n  } else if (props.isPreview) {\n    return <PreviewMediaCard {...props} />\n  } else if (props.isMine) {\n    return <OwnMediaCard {...props} />\n  } else {\n    return <OtherMediaCard {...props} />\n  }\n}\n\nexport default MediaCard\n"],"mappings":"qRA0BA,IAAM,GAAqC,CACzC,UACA,QACA,mBAAmB,mBACnB,WACA,SACA,cACA,SACA,OACA,oBACI,CACJ,IAAM,EAAS,IAAY,OACrB,EAAe,GAAS,EACxB,EAAc,CAAC,EAEf,EACJ,GACA,EAAA,EAAe,EAAU,CACvB,WAAA,EAAW,EAAA,QAAA,CACT,kBACA,EAAS,gBAAkB,eAC7B,EACA,OAAQ,SACV,CAAC,EAEH,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,YAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,qCAAf,SAAA,CACG,EAAa,KAAK,IAAM,KACvB,EAAA,EAAA,IAAA,CAAC,IAAD,CACE,WAAA,EAAW,EAAA,QAAA,CACT,2CACA,CACE,gBAAiB,CAAC,GAAU,CAAC,EAC7B,gBAAiB,CAAC,GAAU,EAC5B,gBAAiB,GAAU,EAC3B,aAAc,GAAU,CAAC,CAC3B,CACF,EAEC,SAAA,CACA,CAAA,GAGL,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,oCAAf,SAAA,CACG,EAEA,GAAU,MAAQ,IAAW,KAC5B,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,WAAA,EAAW,EAAA,QAAA,CACT,sBACA,EAAS,gBAAkB,eAC7B,EAEC,SAAA,CACG,CAAA,EAGP,CACE,CACF,CAAA,CAAA,CAEJ,CAAA,EAAA,IAAkB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,WAAY,SAAA,CAAoB,CAAA,CAC/D,CAEJ,CAAA,EAAA,CACE,GAET,EC/Da,GAAuC,CAClD,gBACA,WACA,aACA,cACI,CACJ,IAAM,EAAa,EAAW,EAAA,EAAc,CAAQ,EAAI,IAAA,GAIlD,GAFJ,IAAe,IAAe,SAAW,IAAe,WAGlC,CAAC,EACnB,EAAA,SACA,IAAkB,OAChB,EAAA,aACA,EAAA,eACR,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wEACb,UAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,WAAA,EAAW,EAAA,QAAA,CACT,+EACA,IAAS,EAAA,UAAY,yBACvB,EAEA,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAM,UAAU,SAAS,OAAO,MAAQ,CAAA,CACrC,CAAA,CACF,CAAA,CAET,ECtCA,SAAS,EAAe,EAA4C,CAClE,IAAM,EAAa,EAAA,EAAc,EAAK,QAAQ,EAC9C,OAAO,IAAe,SAAW,IAAe,OAClD,CAQA,IAAM,GAAqD,CACzD,UACA,UACA,QACA,aACA,gBACA,cACI,CACJ,GAAM,CAAC,EAAO,IAAA,EAAY,EAAA,SAAA,CAAS,CAAC,EAC9B,EAAQ,EAAQ,OAChB,EAAY,KAAK,IAAI,EAAO,EAAQ,CAAC,EACrC,EAAU,EAAQ,GAClB,EAAc,EAAe,CAAO,EACpC,EAA+B,EAAA,EACnC,EAAQ,YACV,EAIM,EAAU,GAAwB,CACtC,EAAE,gBAAgB,EAClB,EAAU,GAAM,KAAK,IAAI,EAAG,EAAI,CAAC,CAAC,CACpC,EACM,EAAU,GAAwB,CACtC,EAAE,gBAAgB,EAClB,EAAU,GAAM,KAAK,IAAI,EAAQ,EAAG,EAAI,CAAC,CAAC,CAC5C,EACM,EAAU,IAAc,EACxB,EAAQ,IAAc,EAAQ,EAE9B,EAAS,IAAY,OAc3B,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,WAAA,EAAW,EAAA,QAAA,CACT,8CACA,EAAa,mBAAqB,IAAA,EACpC,EAJF,SAAA,CAMG,GACC,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,WAAA,EAAW,EAAA,QAAA,CACT,mBACA,EAAS,cAAgB,YAC3B,EAEC,SAAA,EAAQ,eACP,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,IAAK,GAAgC,EAAQ,aAC7C,IAAI,GACJ,cAAA,GACA,UAAW,GAGX,UAAU,mEACX,CAAA,CAEA,CAAA,GAEL,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAEE,SAAU,EAAQ,SAClB,UAAW,EAAQ,UACnB,aAAc,EAAQ,aACf,QACE,UACT,iBAAkB,CAAE,SAAU,EAAK,CACpC,EAPM,CAON,EAMF,IACC,EAAA,EAAA,IAAA,CAAC,EAAD,CACiB,gBACf,WAAY,EACZ,SAAU,CACX,CAAA,EAGF,EAAQ,IACP,EAAA,EAAA,KAAA,CAAC,EAAA,QAAM,SAAP,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,SAAU,EACV,aAAW,gBACX,WAAA,EAAW,EAAA,QAAA,CACT,0IACA,EAAU,aAAe,mBAC3B,EAEA,UAAA,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CAAe,UAAU,SAAS,OAAO,MAAQ,CAAA,CAC3C,CAAA,GACR,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,SAAU,EACV,aAAW,YACX,WAAA,EAAW,EAAA,QAAA,CACT,2IACA,EAAQ,aAAe,mBACzB,EAEA,UAAA,EAAA,EAAA,IAAA,CAAC,EAAA,eAAD,CAAgB,UAAU,SAAS,OAAO,MAAQ,CAAA,CAC5C,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,oIACb,UAAA,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,8CAAhB,SAAA,CACG,EAAY,EAAE,IAAE,CACb,GACH,CAAA,CACS,CAAA,CAAA,EAGjB,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kDACZ,SAAA,CACE,CAAA,CAEJ,GAET,EChIM,GAAmD,CACvD,UACA,WACA,eACA,QACA,SACA,aACA,gBACA,WACA,iBAAiB,MACb,CACJ,IAAM,EAAqB,EAAa,IAAA,GAAY,GAAQ,UACtD,EAAwB,EAC1B,EACC,GAAQ,cAAgB,EACvB,EAAwB,EAAA,EAC5B,CACF,EAEM,EAAS,IAAY,OAa3B,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wCAAf,SAAA,CACG,GACC,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,WAAA,EAAW,EAAA,QAAA,CACT,wCACA,EAAS,cAAgB,YAC3B,EAJF,SAAA,CAMG,GACC,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,IAAK,GAAyB,EAC9B,IAAI,GACJ,cAAA,GACA,UAAW,GAGX,UAAU,mEACX,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,oDACZ,SAAA,EAAA,EAAe,EAAU,CACxB,UAAW,EACP,wBACA,wBACJ,OAAQ,SACV,CAAC,CACE,CAAA,GAEP,EAAA,EAAA,IAAA,CAAC,EAAD,CACiB,gBACL,WACV,SAAU,CACX,CAAA,CACE,CAEL,CAAA,GAAA,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACY,WACV,UAAW,EACX,aAAc,EACP,QACE,UACO,iBAChB,iBACE,EACI,CAAE,SAAU,GAAM,KAAM,GAAM,SAAU,GAAM,MAAO,EAAM,EAC3D,IAAA,EAEP,CAAA,EAGF,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kDACZ,SAAA,CACE,CAAA,CAEJ,GAET,ECrGa,EACX,GACY,EAAQ,QAAU,EAOnB,EAAmB,IAC9B,EAAA,EAAA,IAAA,CAAC,EAAA,WAAD,CACE,UACE,IAAY,OACR,gCACA,+BAEP,CAAA,EASG,GAA+C,CACnD,UACA,UACA,QACA,aACA,gBACA,WACA,eACA,SACA,iBACA,cAEA,EAAc,CAAO,GACnB,EAAA,EAAA,IAAA,CAAC,EAAD,CACW,UACA,UACF,QACK,aACG,gBACL,UACX,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,EAAD,CACW,UACC,WACI,eACP,QACC,SACI,aACG,gBACL,WACM,gBACjB,CAAA,ECtEC,GAAyC,CAC7C,UACA,WACA,UACA,cAAe,MAEf,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,IAAK,EACL,cAAa,EACb,WAAA,EAAW,EAAA,QAAA,CACT,4DACA,IAAY,OAAS,eAAiB,WACtC,qCACF,EAEC,UACE,CAAA,ECfD,GAA+C,CACnD,WACA,SACA,mBACA,cAEK,GAGH,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,KAAK,SACL,SAAU,EAAS,GAAK,EACxB,aAAW,iBACX,YAAW,EACX,eAAc,EACd,gBAAe,GAAU,IAAA,GACzB,QAAS,EAAS,IAAA,GAAY,EAC9B,UAAY,GAAM,CACZ,GAKA,EAAE,SAAW,EAAE,gBACf,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,eAAe,EACjB,EAAc,EAElB,EACA,UACG,EAEG,yBADA,wCAIL,UACE,CAAA,GA9Be,EAAA,EAAA,IAAA,CAAC,EAAA,QAAM,SAAP,CAAiB,UAAyB,CAAA,ECalE,SAAgB,EAAiB,CAC/B,YACA,gBACA,kBACkD,CAClD,GAAM,CAAC,EAAQ,IAAA,EAAa,EAAA,SAAA,CAA6C,EACnE,CAAC,EAAkB,IAAA,EAAuB,EAAA,SAAA,CAAS,EAAK,EACxD,CAAC,EAAkB,IAAA,EAAuB,EAAA,SAAA,CAAS,EAAK,EACxD,GAAA,EAAc,EAAA,OAAA,CAAO,EAAK,EAE1B,GAAA,EAAe,EAAA,YAAA,CAAY,SAAY,CAE3C,GADA,IAAiB,EACb,EAAkB,CACpB,EAAoB,EAAK,EACzB,MACF,CACA,GAAI,EAAW,CACb,EAAoB,EAAI,EACxB,MACF,CACA,GAAI,EAAQ,CACV,EAAoB,EAAI,EACxB,MACF,CACK,MACD,GAAY,QAEhB,CADA,EAAY,QAAU,GACtB,EAAoB,EAAI,EACxB,GAAI,CACF,IAAM,EAAS,MAAM,EAAc,EAC/B,IACF,EAAU,CAAM,EAChB,EAAoB,EAAI,EAE5B,QAAU,CACR,EAAY,QAAU,GACtB,EAAoB,EAAK,CAC3B,CAVwB,CAW1B,EAAG,CAAC,EAAkB,EAAW,EAAQ,EAAgB,CAAa,CAAC,EAOvE,MAAO,CACL,SACA,mBACA,mBACA,eACA,cATA,GAAa,GAAiB,MAAQ,GAAkB,KACpD,EACA,IAAA,EAQN,CACF,CCvDA,SAAgB,EAAkB,CAChC,gBACA,gBACA,iBACoD,CACpD,GAAM,CAAC,EAAQ,IAAA,EAAa,EAAA,SAAA,CAA6C,EAEnE,GAAA,EAAU,EAAA,OAAA,CAAuB,IAAI,EACrC,GAAA,EAAc,EAAA,OAAA,CAAO,EAAK,EAE1B,GAAA,EAAmB,EAAA,OAAA,CAAO,CAAa,EAC7C,EAAiB,QAAU,EAE3B,IAAM,GAAA,EAAc,EAAA,YAAA,CAAY,SAA2B,CACrD,MAAY,QAChB,GAAY,QAAU,GACtB,GAAI,CACF,IAAM,EAAS,MAAM,EAAiB,UAAU,EAC5C,GAAQ,EAAU,CAAM,CAC9B,QAAU,CACR,EAAY,QAAU,EACxB,CANsB,CAOxB,EAAG,CAAC,CAAC,EAEC,GAAA,EAAoB,EAAA,YAAA,KAAkB,CACtC,IAAkB,OACpB,EAAiB,EAEjB,IAAgB,CAEpB,EAAG,CAAC,EAAe,EAAa,CAAa,CAAC,EAqB9C,OAlBA,EAAA,EAAA,UAAA,KAAgB,CAEd,GADI,CAAC,EAAQ,SACT,IAAkB,QAAU,IAAW,IAAA,GAAW,OAEtD,IAAM,EAAW,IAAI,sBAClB,CAAC,KAAW,CACP,EAAM,iBACR,EAAiB,EACjB,EAAS,WAAW,EAExB,EACA,CAAE,UAAW,CAAI,CACnB,EAGA,OADA,EAAS,QAAQ,EAAQ,OAAO,MACnB,EAAS,WAAW,CACnC,EAAG,CAAC,EAAe,EAAQ,CAAW,CAAC,EAEhC,CAAE,SAAQ,UAAS,mBAAkB,CAC9C,CC/DA,IAAM,EACJ,+JASI,GAA2D,CAC/D,WACA,YACA,YACA,kBACA,oBACA,cAAc,MACV,CACJ,GAAI,GAAY,GAAmB,KACjC,OACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,SAAU,EACV,aAAY,EAAc,YAAc,SACxC,YAAW,EACX,MAAO,EAAc,YAAc,SACnC,UAAW,EAEV,SAAA,GACC,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAc,CAAA,GAEd,EAAA,EAAA,KAAA,CAAC,EAAA,QAAM,SAAP,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAA,eAAD,CAAgB,UAAU,SAAS,OAAO,MAAQ,CAAA,EAAC,QAErC,CAAA,CAAA,CAEZ,CAAA,EAIZ,GAAI,CAAC,GAAY,GAAqB,KAAM,CAC1C,IAAM,EAAO,GAAa,EAiB1B,OAhBI,GAAQ,MAiBV,EAAA,EAAA,KAAA,CAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,aAAW,WACX,UAAW,EAJb,SAAA,EAME,EAAA,EAAA,IAAA,CAAC,EAAA,mBAAD,CAAoB,UAAU,SAAS,OAAO,MAAQ,CAAA,EAAC,UAEjD,KAvBN,EAAA,EAAA,KAAA,CAAC,IAAD,CACQ,OACN,aAAW,WACX,OAAO,SACP,IAAI,sBACJ,QAAS,EACT,UAAW,GAAG,EAAY,cAN5B,SAAA,EAQE,EAAA,EAAA,IAAA,CAAC,EAAA,mBAAD,CAAoB,UAAU,SAAS,OAAO,MAAQ,CAAA,EAAC,UAEtD,GAeT,CAEA,OAAO,IACT,EChEM,GAAiD,CACrD,QACA,WAAW,2BACX,eACA,SACA,aACA,mBACA,wBACA,UAAU,CAAC,EACX,YACA,iBACA,gBACA,iBACI,CACJ,IAAM,EAAY,EAAc,CAAO,EAIjC,CAAE,SAAQ,mBAAkB,mBAAkB,iBAClD,EAAiB,CAAE,YAAW,gBAAe,gBAAe,CAAC,EAEzD,EAAa,CAAC,EACd,EAAS,EAET,GACJ,EAAA,EAAA,KAAA,CAAC,EAAA,QAAM,SAAP,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oCAAoC,SAAA,GAAY,CAAA,GAChE,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,UACE,EACI,oCACA,oCAGL,SAAA,GAAc,CACX,CAAA,CACQ,CAAA,CAAA,EAGZ,EAAgB,GACpB,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,QAAU,GAAM,CAGd,EAAE,gBAAgB,EAClB,EAAU,CACZ,EACA,UAAU,+EACV,aAAW,qBAEX,UAAA,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,UAAU,SAAS,OAAO,MAAQ,CAAA,CACnC,CAAA,EACN,IAAA,GAEE,EAAa,GACjB,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,aAAW,kBACX,UAAU,iGAEV,UAAA,EAAA,EAAA,IAAA,CAAC,EAAA,iBAAD,CAAkB,UAAU,SAAS,OAAO,SAAW,CAAA,CACjD,CAAA,EACN,IAAA,GAEJ,OACE,EAAA,EAAA,KAAA,CAAC,EAAD,CAAY,QAAQ,OAApB,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,SAAU,EACF,SACR,iBAAkB,CAAC,EAEnB,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,QAAQ,OACC,UACF,QACK,aACF,WACI,eACN,SACR,SAAU,CACX,CAAA,CACY,CAAA,GAEf,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,QAAQ,OACD,QACW,mBACR,WACF,SACK,cACb,KAAM,EAAY,EAAgB,MAAM,EAAI,IAAA,GAC5C,eAAgB,CACjB,CAAA,CACS,GAEhB,EAOM,GAAqD,CACzD,QACA,WAAW,2BACX,eACA,SACA,aACA,mBACA,wBACA,UAAU,CAAC,KACP,CACJ,IAAM,EAAY,EAAc,CAAO,EAEjC,GACJ,EAAA,EAAA,KAAA,CAAC,EAAA,QAAM,SAAP,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oCAAoC,SAAA,GAAY,CAAA,GAChE,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,UACE,EACI,oCACA,oCAGL,SAAA,GAAc,CACX,CAAA,CACQ,CAAA,CAAA,EAGlB,OACE,EAAA,EAAA,KAAA,CAAC,EAAD,CAAY,QAAQ,QAApB,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,QAAQ,QACC,UACF,QACP,WAAA,GACU,WACI,cACf,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,QAAQ,QACD,QACW,mBACR,WACF,SACK,cACb,KAAM,EAAY,EAAgB,OAAO,EAAI,IAAA,EAC9C,CAAA,CACS,GAEhB,EAMM,GAA6C,CACjD,QACA,WAAW,2BACX,eACA,SACA,aACA,mBACA,gBAAgB,UAChB,UAAU,CAAC,EACX,iBACA,mBACI,CACJ,IAAM,EAAY,EAAc,CAAO,EAIjC,CAAE,SAAQ,mBAAkB,mBAAkB,iBAClD,EAAiB,CAAE,YAAW,gBAAe,gBAAe,CAAC,EAEzD,EAAa,CAAC,EAGpB,OACE,EAAA,EAAA,KAAA,CAAC,EAAD,CAAY,QAAQ,OAApB,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,SAAU,EACF,OAAA,EACR,iBAAkB,CAAC,EAEnB,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,QAAQ,OACC,UACF,QACK,aACG,gBACL,WACI,eACN,QACT,CAAA,CACY,CAAA,GAEf,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,QAAQ,OACD,QACW,mBACR,WACF,SACR,aACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,OAAQ,GACO,gBACH,YACb,CAAA,EAEH,KAAM,EAAY,EAAgB,MAAM,EAAI,IAAA,EAC7C,CAAA,CACS,GAEhB,EAQM,GAAiD,CACrD,QACA,aACA,eACA,WAAW,2BACX,SACA,UAAU,CAAC,EACX,gBACA,gBACA,kBACA,gBACA,cAAc,MACV,CACJ,IAAM,EAAY,EAAc,CAAO,EAEjC,CAAE,SAAQ,UAAS,qBAAsB,EAAkB,CAC/D,gBACA,gBACA,eACF,CAAC,EAEK,EAAqB,GAAQ,UAC7B,EAAqB,GAAQ,UAK7B,EAAW,EACb,IAAkB,OAClB,IAAuB,IAAA,GACrB,EAAa,EAAA,EAAc,CAAQ,EAKnC,EAAkB,EAAY,IAAA,GAAY,EAEhD,OACE,EAAA,EAAA,KAAA,CAAC,EAAD,CACE,QAAQ,QACR,QAAS,EACT,cAAY,oBAHd,SAAA,EAKE,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,QAAQ,QACC,UACF,QACP,WAAY,EACG,gBACL,WACI,eACN,SACR,eAAgB,CAAC,GAAY,IAAe,UAC7C,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,QAAQ,QACD,QACG,WACF,SACR,aACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,OAAQ,GACO,gBACH,YACb,CAAA,EAEH,KAAM,EAAY,EAAgB,OAAO,EAAI,IAAA,GAC7C,QACE,EAAA,EAAA,IAAA,CAAC,EAAD,CACY,WACG,cACb,UAAW,EACX,UAAW,EACX,gBAAiB,EACjB,kBAAmB,CACpB,CAAA,CAEJ,CAAA,CACS,GAEhB,EAQM,EAAuC,GACvC,EAAM,SACD,EAAA,EAAA,IAAA,CAAC,EAAD,CAAgB,GAAI,CAAQ,CAAA,EAC1B,EAAM,WACR,EAAA,EAAA,IAAA,CAAC,EAAD,CAAkB,GAAI,CAAQ,CAAA,EAC5B,EAAM,QACR,EAAA,EAAA,IAAA,CAAC,EAAD,CAAc,GAAI,CAAQ,CAAA,GAE1B,EAAA,EAAA,IAAA,CAAC,EAAD,CAAgB,GAAI,CAAQ,CAAA"}
+{"version":3,"file":"Card-BQV22M8r.cjs","names":[],"sources":["../src/components/CustomMessage/LockedAttachment/components/_shared/CardBody.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/LockBadge.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/GalleryThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/CardThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/MediaShell.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/PreviewToggle.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/usePreviewToggle.ts","../src/components/CustomMessage/LockedAttachment/components/_shared/useReceivedSource.ts","../src/components/CustomMessage/LockedAttachment/components/Media/CardActions.tsx","../src/components/CustomMessage/LockedAttachment/components/Media/Card.tsx"],"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 = title || placeholderTitle\n  const titleDimmed = !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(\n                'truncate text-base font-medium leading-6',\n                {\n                  'text-black/90': !isDark && !titleDimmed,\n                  'text-black/30': !isDark && titleDimmed,\n                  'text-white/30': isDark && titleDimmed,\n                  'text-white': isDark && !titleDimmed,\n                }\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 classNames from 'classnames'\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  /** Whether the item is still locked. Play only ever shows once unlocked —\n   * a locked item always shows the lock, even for otherwise-playable media. */\n  isLocked: boolean\n}\n\n/**\n * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.\n * Uses `bg-black/30`. Stays `pointer-events-none` so clicks pass through to\n * the underlying player/toggle; the play state highlights via `group-hover`\n * (same `bg-black/40` as the gallery's prev/next arrows) — the ancestor\n * providing `group` must wrap the actual clickable/hoverable player area.\n *\n * For playable media (video/audio) that's unlocked, the badge shows a play\n * icon instead of a lock — matching the convention used by `GalleryThumbnail`.\n */\nexport const LockBadge: React.FC<LockBadgeProps> = ({\n  paymentStatus,\n  mimeType,\n  isPlayable,\n  isLocked,\n}) => {\n  const sourceType = mimeType ? getSourceType(mimeType) : undefined\n  const resolvedIsPlayable =\n    isPlayable ?? (sourceType === 'video' || sourceType === 'audio')\n\n  const Icon =\n    resolvedIsPlayable && !isLocked\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\n        className={classNames(\n          'flex size-12 items-center justify-center rounded-full bg-black/30 text-white',\n          Icon === PlayIcon && 'group-hover:bg-black/40'\n        )}\n      >\n        <Icon className=\"size-6\" weight=\"fill\" />\n      </div>\n    </div>\n  )\n}\n","import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useState } from 'react'\n\nimport { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'\nimport { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'\nimport type { LockedAttachmentGalleryItem, PaymentStatus } 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  const optimizedCurrentThumbnailUrl = optimizeMessagingAttachmentUrl(\n    current.thumbnailUrl\n  )\n\n  // Stop propagation so arrow taps don't bubble up to the outer preview-toggle\n  // wrapper on PreviewMediaCard / 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).\n  //\n  // The locked placeholder is absolutely positioned, so it needs the fixed\n  // 337/386 box for height; unlocked content (video, natural-sized image)\n  // manages its own height and can expand/shrink per item.\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\n      className={classNames(\n        'group relative overflow-hidden rounded-t-md',\n        showLocked ? 'aspect-[337/386]' : undefined\n      )}\n    >\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={optimizedCurrentThumbnailUrl ?? 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          key={safeIndex}\n          mimeType={current.mimeType}\n          sourceUrl={current.sourceUrl}\n          thumbnailUrl={current.thumbnailUrl}\n          title={title}\n          variant={variant}\n          mediaPlayerProps={{ autoPlay: true }}\n        />\n      )}\n\n      {/* LOCK while locked. Once unlocked, video/audio autoplays via\n          `mediaPlayerProps` and MediaPlayer already has its own inline\n          controls, so no separate Play affordance is shown. */}\n      {showLocked && (\n        <LockBadge\n          paymentStatus={paymentStatus}\n          isPlayable={isVideoItem}\n          isLocked={showLocked}\n        />\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-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30\">\n            <span className=\"text-xs font-medium leading-none 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 { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'\nimport { AttachmentThumbnail, renderTypeIcon } 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  const optimizedThumbnailUrl = optimizeMessagingAttachmentUrl(\n    effectiveThumbnailUrl\n  )\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={optimizedThumbnailUrl ?? 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\n            paymentStatus={paymentStatus}\n            mimeType={mimeType}\n            isLocked={showLocked}\n          />\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 = (variant: CardVariant): 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 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      variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white',\n      'shadow-[0_1px_2px_rgba(0,0,0,0.08)]'\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","/* eslint-disable react-hooks/refs -- pre-existing pattern flagged by the React\n   Compiler rules added in eslint-plugin-react-hooks v7; refactoring it is\n   out of scope for the lint toolchain upgrade. */\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type {\n  FetchSourceHandler,\n  LockedAttachmentSource,\n  PaymentStatus,\n} from '../../types'\n\nexport interface UseReceivedSourceOptions {\n  paymentStatus?: PaymentStatus\n  onFetchSource?: FetchSourceHandler\n  /** Called on Unlock click while the card is still unpaid (opens checkout). */\n  onUnlockClick?: () => void\n}\n\nexport interface UseReceivedSourceResult {\n  source: LockedAttachmentSource | undefined\n  /** Attach to the card root so the paid-source auto-fetch can observe it. */\n  cardRef: React.RefObject<HTMLDivElement>\n  /** Fetches the source when already paid, else defers to `onUnlockClick`. */\n  handleUnlockClick: () => void\n}\n\n/**\n * Media !isMine's source-reveal logic: unlike Composer/Media isMine's\n * tap-to-toggle (`usePreviewToggle`), the recipient's card reveals its source\n * by fetching once — on click when already paid, or automatically the first\n * time a paid card scrolls fully into view. The fetch is guarded so it runs\n * at most once in flight.\n */\nexport function useReceivedSource({\n  paymentStatus,\n  onFetchSource,\n  onUnlockClick,\n}: UseReceivedSourceOptions): UseReceivedSourceResult {\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n\n  const cardRef = useRef<HTMLDivElement>(null)\n  const fetchingRef = useRef(false)\n\n  const onFetchSourceRef = useRef(onFetchSource)\n  onFetchSourceRef.current = onFetchSource\n\n  const fetchSource = useCallback(async (): Promise<void> => {\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    try {\n      const result = await onFetchSourceRef.current?.()\n      if (result) setSource(result)\n    } finally {\n      fetchingRef.current = false\n    }\n  }, [])\n\n  const handleUnlockClick = useCallback(() => {\n    if (paymentStatus === 'paid') {\n      void fetchSource()\n    } else {\n      onUnlockClick?.()\n    }\n  }, [paymentStatus, fetchSource, onUnlockClick])\n\n  // Auto-fetch the source once the paid card scrolls into view.\n  useEffect(() => {\n    if (!cardRef.current) return\n    if (paymentStatus !== 'paid' || source !== undefined) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          void fetchSource()\n          observer.disconnect()\n        }\n      },\n      { threshold: 1.0 }\n    )\n\n    observer.observe(cardRef.current)\n    return () => observer.disconnect()\n  }, [paymentStatus, source, fetchSource])\n\n  return { source, cardRef, handleUnlockClick }\n}\n","import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport LoadingDots from '../_shared/LoadingDots'\n\nexport interface ReceivedCardActionsProps {\n  /** Whether the card is currently locked. Drives which CTA we render. */\n  isLocked: boolean\n  /**\n   * When unlocked, the URL used as the Download link's `href` (opens in a new\n   * tab). When omitted, the Download CTA falls back to a plain `<button>`\n   * that just calls `onDownloadClicked` — useful for galleries where the\n   * single-source URL doesn't exist.\n   */\n  sourceUrl?: string\n  /** Optional alternate href that takes precedence over `sourceUrl`. */\n  redeemUrl?: string\n  onUnlockClicked?: () => void\n  onDownloadClicked?: () => void\n  isUnlocking?: boolean\n}\n\nconst buttonClass =\n  'mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928]'\n\n/**\n * Renders the primary CTA below the body of a Received card.\n * - Locked + onUnlockClicked → \"Unlock\" button\n * - Unlocked + onDownloadClicked + (redeemUrl || sourceUrl) → \"Download\" link\n * - Unlocked + onDownloadClicked + no URL → \"Download\" button (e.g. gallery)\n * Otherwise renders nothing.\n */\nconst ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({\n  isLocked,\n  sourceUrl,\n  redeemUrl,\n  onUnlockClicked,\n  onDownloadClicked,\n  isUnlocking = false,\n}) => {\n  if (isLocked && onUnlockClicked != null) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onUnlockClicked}\n        disabled={isUnlocking}\n        aria-label={isUnlocking ? 'Unlocking' : 'Unlock'}\n        aria-busy={isUnlocking}\n        title={isUnlocking ? 'Unlocking' : 'Unlock'}\n        className={buttonClass}\n      >\n        {isUnlocking ? (\n          <LoadingDots />\n        ) : (\n          <React.Fragment>\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" />\n            Unlock\n          </React.Fragment>\n        )}\n      </button>\n    )\n  }\n\n  if (!isLocked && onDownloadClicked != null) {\n    const href = redeemUrl ?? sourceUrl\n    if (href != null) {\n      return (\n        <a\n          href={href}\n          aria-label=\"Download\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          onClick={onDownloadClicked}\n          className={`${buttonClass} !text-white`}\n        >\n          <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n          Download\n        </a>\n      )\n    }\n\n    return (\n      <button\n        type=\"button\"\n        onClick={onDownloadClicked}\n        aria-label=\"Download\"\n        className={buttonClass}\n      >\n        <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n        Download\n      </button>\n    )\n  }\n\n  return null\n}\n\nexport default ReceivedCardActions\n","import { PencilSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getSourceType } from '../../../../AttachmentCard'\nimport CardBody from '../_shared/CardBody'\nimport CardThumbnail, {\n  galleryBodyIcon,\n  isGalleryCard,\n} from '../_shared/CardThumbnail'\nimport MediaShell from '../_shared/MediaShell'\nimport PreviewToggle from '../_shared/PreviewToggle'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport { usePreviewToggle } from '../_shared/usePreviewToggle'\nimport { useReceivedSource } from '../_shared/useReceivedSource'\n\nimport ReceivedCardActions from './CardActions'\nimport type {\n  MediaCardDraftProps,\n  MediaCardOtherProps,\n  MediaCardOwnProps,\n  MediaCardPreviewProps,\n  MediaCardProps,\n} from './types'\n\nexport type { MediaCardProps } from './types'\n\n/**\n * Media card while still drafting — the locked thumbnail (single or gallery)\n * the composer taps to preview the attachment they're about to send, plus\n * the title/price body with optional dismiss X and edit pencil.\n */\nconst DraftMediaCard: React.FC<MediaCardDraftProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle,\n  placeholderAmountText,\n  gallery = [],\n  onDismiss,\n  onPreviewClick,\n  onFetchSource,\n  onEditClick,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  // Gallery is always previewable in the composer because each item's source\n  // is already provided up-front via `gallery[*].sourceUrl`.\n  const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\n\n  const statusBadge = (\n    <React.Fragment>\n      <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n      <span\n        className={\n          amountText\n            ? 'text-xs font-medium text-white/55'\n            : 'text-xs font-medium text-white/30'\n        }\n      >\n        {amountText || placeholderAmountText}\n      </span>\n    </React.Fragment>\n  )\n\n  const dismissButton = onDismiss ? (\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        // Stop the click from bubbling up into the outer preview-toggle\n        // wrapper when both are wired up at the same time.\n        e.stopPropagation()\n        onDismiss()\n      }}\n      className=\"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white\"\n      aria-label=\"Dismiss attachment\"\n    >\n      <XIcon className=\"size-3\" weight=\"bold\" />\n    </button>\n  ) : undefined\n\n  const editButton = onEditClick ? (\n    <button\n      type=\"button\"\n      onClick={onEditClick}\n      aria-label=\"Edit attachment\"\n      className=\"flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n    >\n      <PencilSimpleIcon className=\"size-5\" weight=\"regular\" />\n    </button>\n  ) : undefined\n\n  return (\n    <MediaShell variant=\"dark\">\n      <PreviewToggle\n        onToggle={togglePreview}\n        isBusy={isBusy}\n        isPreviewVisible={!showLocked}\n      >\n        <CardThumbnail\n          variant=\"dark\"\n          gallery={gallery}\n          title={title}\n          showLocked={showLocked}\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          source={source}\n          topRight={dismissButton}\n        />\n      </PreviewToggle>\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={statusBadge}\n        icon={isGallery ? galleryBodyIcon('dark') : undefined}\n        trailingAction={editButton}\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * Static mockup of what the recipient will see before purchase — always\n * locked/blurred (the lock badge renders from `showLocked` alone, no toggle\n * wiring needed), no interactivity, no real content revealed.\n */\nconst PreviewMediaCard: React.FC<MediaCardPreviewProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle,\n  placeholderAmountText,\n  gallery = [],\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  const statusBadge = (\n    <React.Fragment>\n      <span className=\"text-xs font-medium text-black/55\">&bull;</span>\n      <span\n        className={\n          amountText\n            ? 'text-xs font-medium text-black/55'\n            : 'text-xs font-medium text-black/30'\n        }\n      >\n        {amountText || placeholderAmountText}\n      </span>\n    </React.Fragment>\n  )\n\n  return (\n    <MediaShell variant=\"light\">\n      <CardThumbnail\n        variant=\"light\"\n        gallery={gallery}\n        title={title}\n        showLocked\n        mimeType={mimeType}\n        thumbnailUrl={thumbnailUrl}\n      />\n\n      <CardBody\n        variant=\"light\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={statusBadge}\n        icon={isGallery ? galleryBodyIcon('light') : undefined}\n      />\n    </MediaShell>\n  )\n}\n/**\n * The sender's ('mine') view of a paid media attachment: the locked\n * thumbnail (single or gallery) they can tap to preview their own\n * attachment, plus the title/purchase-status body.\n */\nconst OwnMediaCard: React.FC<MediaCardOwnProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle,\n  paymentStatus = 'pending',\n  gallery = [],\n  onPreviewClick,\n  onFetchSource,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  // Gallery is always previewable for the sender because each item's source\n  // is already provided up-front via `gallery[*].sourceUrl`.\n  const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\n\n  return (\n    <MediaShell variant=\"dark\">\n      <PreviewToggle\n        onToggle={togglePreview}\n        isBusy={isBusy}\n        isPreviewVisible={!showLocked}\n      >\n        <CardThumbnail\n          variant=\"dark\"\n          gallery={gallery}\n          title={title}\n          showLocked={showLocked}\n          paymentStatus={paymentStatus}\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          source={source}\n        />\n      </PreviewToggle>\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={true}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('dark') : undefined}\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The recipient's ('other') view of a paid media attachment: the locked\n * thumbnail (single or gallery) with an Unlock/Download CTA. The source is\n * revealed by fetching once — on click when already paid, or automatically\n * the first time a paid card scrolls into view.\n */\nconst OtherMediaCard: React.FC<MediaCardOtherProps> = ({\n  title,\n  amountText,\n  thumbnailUrl,\n  mimeType = 'application/octet-stream',\n  detail,\n  gallery = [],\n  onUnlockClick,\n  onFetchSource,\n  onDownloadClick,\n  paymentStatus,\n  isUnlocking = false,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  const { source, cardRef, handleUnlockClick } = useReceivedSource({\n    paymentStatus,\n    onFetchSource,\n    onUnlockClick,\n  })\n\n  const effectiveSourceUrl = source?.sourceUrl\n  const effectiveRedeemUrl = source?.redeemUrl\n\n  // For gallery, the per-item sources are carried by `gallery` itself, so\n  // the lock state is driven by paymentStatus rather than the single\n  // `effectiveSourceUrl`. Everything else still respects the source fetch.\n  const isLocked = isGallery\n    ? paymentStatus !== 'paid'\n    : effectiveSourceUrl === undefined\n  const sourceType = getSourceType(mimeType)\n\n  // For gallery, ReceivedCardActions falls back to a plain <button>\n  // (no anchor) because the gallery has no single sourceUrl to link to —\n  // the per-item sources live on `gallery` itself.\n  const actionSourceUrl = isGallery ? undefined : effectiveSourceUrl\n\n  return (\n    <MediaShell\n      variant=\"light\"\n      rootRef={cardRef}\n      data-testid=\"locked-attachment\"\n    >\n      <CardThumbnail\n        variant=\"light\"\n        gallery={gallery}\n        title={title}\n        showLocked={isLocked}\n        paymentStatus={paymentStatus}\n        mimeType={mimeType}\n        thumbnailUrl={thumbnailUrl}\n        source={source}\n        containedImage={!isLocked && sourceType === 'document'}\n      />\n\n      <CardBody\n        variant=\"light\"\n        title={title}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={false}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('light') : undefined}\n        action={\n          <ReceivedCardActions\n            isLocked={isLocked}\n            isUnlocking={isUnlocking}\n            sourceUrl={actionSourceUrl}\n            redeemUrl={effectiveRedeemUrl}\n            onUnlockClicked={handleUnlockClick}\n            onDownloadClicked={onDownloadClick}\n          />\n        }\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The card either party sees for a paid media attachment. `isDraft`/`isPreview`\n * select the composer's own drafting view / a static receiver-side mockup;\n * otherwise `isMine` selects the sender's sent view vs. the recipient's\n * unlock/download view.\n */\nconst MediaCard: React.FC<MediaCardProps> = (props) => {\n  if (props.isDraft) {\n    return <DraftMediaCard {...props} />\n  } else if (props.isPreview) {\n    return <PreviewMediaCard {...props} />\n  } else if (props.isMine) {\n    return <OwnMediaCard {...props} />\n  } else {\n    return <OtherMediaCard {...props} />\n  }\n}\n\nexport default MediaCard\n"],"mappings":"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"}

package/dist/{Card-BhwBkgxI.js → Card-Cg60DGm8.js}

@@ -1,4 +1,4 @@
-import { i as e, n as t, s as n, t as r } from "./AttachmentCard-DSekwIOA.js";
+import { i as e, n as t, s as n, t as r } from "./AttachmentCard-D37MWFGV.js";
 import { n as i, t as a } from "./LoadingDots-B_WiXBeQ.js";
 import o, { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
@@ -495,4 +495,4 @@ var F = "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-
 //#endregion
 export { V as default };
 
-//# sourceMappingURL=Card-BhwBkgxI.js.map
+//# sourceMappingURL=Card-Cg60DGm8.js.map