51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1650,"use client" import * as React from "react" export type ThumbnailFile = { name: string type: string } export type FileThumbnailProps = { file: ThumbnailFile | File className?: string previewAspectRatio?: number previewClassName?: string previewContent?: React.ReactNode previewImageUrl?: string | null isLoading?: boolean hasError?: boolean } function cx(...classes: Array) { return classes.filter(Boolean).join(" ") } // Preview URLs that have completed a reveal this session. View/tab switches // remount thumbnails; URLs in this set render instantly instead of replaying // the blur-in, so only an image's first load animates. const revealedPreviewImageUrls = new Set() export function FileThumbnailLoadingOverlay() { return (

) } export function FileThumbnail({ className, previewAspectRatio, previewClassName, previewContent, previewImageUrl, isLoading = false, hasError = false, }: FileThumbnailProps) { const imageRef = React.useRef(null) const revealFrameRef = React.useRef(null) const [loadedPreviewImageUrl, setLoadedPreviewImageUrl] = React.useState< string | null >(() => previewImageUrl && revealedPreviewImageUrls.has(previewImageUrl) ? previewImageUrl : null ) const [failedPreviewImageUrl, setFailedPreviewImageUrl] = React.useState< string | null >(null) const imageFailed = Boolean( previewImageUrl && failedPreviewImageUrl === previewImageUrl ) const isImageLoading = Boolean( previewImageUrl && loadedPreviewImageUrl !== previewImageUrl && !imageFailed && !revealedPreviewImageUrls.has(previewImageUrl) ) const showLoading = isLoading || isImageLoading const hasPreviewContent = Boolean(previewContent) const showFallback = !showLoading && (hasError || imageFailed || (!previewImageUrl && !hasPreviewContent)) const cancelImageReveal = React.useCallback(() => { if (revealFrameRef.current === null) return window.cancelAnimationFrame(revealFrameRef.current) revealFrameRef.current = null }, []) const markImageLoaded = React.useCallback( (image: HTMLImageElement, imageUrl: string | null | undefined) => { if (!imageUrl) return const didLoad = image.naturalWidth > 0 && image.naturalHeight > 0 setFailedPreviewImageUrl(didLoad ? null : imageUrl) if (didLoad) { revealedPreviewImageUrls.add(imageUrl) cancelImageReveal() revealFrameRef.current = window.requestAnimationFrame(() => { revealFrameRef.current = window.requestAnimationFrame(() => { setLoadedPreviewImageUrl(imageUrl) revealFrameRef.current = null }) }) } }, [cancelImageReveal] ) React.useEffect(() => { cancelImageReveal() }, [cancelImageReveal, previewImageUrl]) React.useEffect(() => cancelImageReveal, [cancelImageReveal]) React.useEffect(() => { const image = imageRef.current if (!image || !previewImageUrl) return if (image.complete) { markImageLoaded(image, previewImageUrl) } }, [markImageLoaded, previewImageUrl]) return (

{previewImageUrl ? ( // eslint-disable-next-line @next/next/no-img-element -- Preview URLs can be transient object or presigned URLs outside Next image optimization.

{ markImageLoaded(event.currentTarget, previewImageUrl) }} onError={() => { if (previewImageUrl) { revealedPreviewImageUrls.delete(previewImageUrl) cancelImageReveal() setFailedPreviewImageUrl(previewImageUrl) setLoadedPreviewImageUrl((currentUrl) => currentUrl === previewImageUrl ? null : currentUrl ) } }} /> ) : null} {previewContent ? (

{previewContent}

) : null} {showLoading ? : null} {showFallback ? (

) } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"components/extend/file-thumbnail.tsx","content":"$52","type":"registry:ui","target":"@components/extend/file-thumbnail.tsx"}],"className":"h-[70svh] min-h-80"}]]}]