4d:I[707087,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T1619,"use client" import * as React from "react" import { FileImage } from "lucide-react" import { cn } from "@/lib/utils" export type FileThumbnailFile = { name: string type?: string } export type FileThumbnailProps = Omit< React.HTMLAttributes, "children" > & { file: FileThumbnailFile | File previewImageUrl?: string | null previewAspectRatio?: number previewClassName?: string fit?: "cover" | "contain" alt?: string isLoading?: boolean hasError?: boolean } function extensionFromName(name: string) { const extension = name.includes(".") ? name.split(".").pop() : undefined return extension?.slice(0, 5).toUpperCase() || "IMAGE" } function isImageFile(file: FileThumbnailFile | File) { const extension = extensionFromName(file.name).toLowerCase() return ( file.type?.toLowerCase().startsWith("image/") === true || /^(png|jpe?g|gif|webp|svg|avif)$/.test(extension) ) } export const FileThumbnail = React.forwardRef< HTMLDivElement, FileThumbnailProps >(function FileThumbnail( { file, previewImageUrl, previewAspectRatio = 1, previewClassName, fit = "cover", alt = "", isLoading = false, hasError = false, className, style, ...rootProps }, forwardedRef ) { const [filePreview, setFilePreview] = React.useState<{ file: File url: string }>() const [imageResult, setImageResult] = React.useState<{ url: string state: "loaded" | "error" }>() const browserFile = typeof File !== "undefined" && file instanceof File ? file : undefined React.useEffect(() => { if ( previewImageUrl !== undefined || !browserFile || !isImageFile(browserFile) ) { return } const nextUrl = URL.createObjectURL(browserFile) const frame = requestAnimationFrame(() => { setFilePreview({ file: browserFile, url: nextUrl }) }) return () => { cancelAnimationFrame(frame) URL.revokeObjectURL(nextUrl) } }, [browserFile, previewImageUrl]) const fileUrl = filePreview?.file === file ? filePreview.url : undefined const imageUrl = previewImageUrl === undefined ? fileUrl : previewImageUrl || undefined const imageState = imageUrl && imageResult?.url === imageUrl ? imageResult.state : imageUrl ? "loading" : "error" const showImage = Boolean(imageUrl) && !hasError && imageState !== "error" const showLoading = isLoading || (!hasError && ((Boolean(browserFile) && previewImageUrl === undefined && !filePreview) || (Boolean(imageUrl) && imageState === "loading"))) const showFallback = !showImage && !showLoading const handleImageRef = React.useCallback( (image: HTMLImageElement | null) => { if (!image || !imageUrl || !image.complete) return const state = image.naturalWidth > 0 ? "loaded" : "error" setImageResult((current) => current?.url === imageUrl && current.state === state ? current : { url: imageUrl, state } ) }, [imageUrl] ) return (

{imageUrl && !hasError ? ( // A native image keeps this registry item independent of framework image loaders. // eslint-disable-next-line @next/next/no-img-element {alt}

setImageResult({ url: imageUrl, state: "error" })} onLoad={() => setImageResult({ url: imageUrl, state: "loaded" })} /> ) : null} {showLoading ? (

Loading preview

) : null} {showFallback ? (

) : null}

) }) 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react@^1.31.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.31.0"}]]}]}]]}],["$","$L4d",null,{"namespace":"@mischief","registryDependencies":["utils"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes mischief-file-thumbnail-shimmer {\n\tto {\n\t\ttransform: translateX(300%) skewX(-12deg);\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/default/file-thumbnail/file-thumbnail.tsx","content":"$51","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]