52: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/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"],"RegistryDependencies"] 53: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"] 54:Tde0,"use client"; import type * as React from "react"; import { cn } from "@/lib/utils"; import { getFileThumbnailExtension } from "./file-thumbnail-extension"; import { FileThumbnailFallback } from "./file-thumbnail-fallback"; import type { FileThumbnailFrameProps, FileThumbnailShape, FileThumbnailSize, FileThumbnailState, } from "./file-thumbnail-frame-types"; import { FileThumbnailImage } from "./file-thumbnail-image"; import { FileThumbnailShimmer } from "./file-thumbnail-shimmer"; export { FileThumbnailShimmer }; export type { FileThumbnailFrameProps, FileThumbnailShape, FileThumbnailSize, FileThumbnailState, }; const FILE_THUMBNAIL_SIZE_CLASS_NAME: Record = { xs: "w-9", sm: "w-10", md: "w-12", lg: "w-16", xl: "w-20", }; const FILE_THUMBNAIL_SHAPE_ASPECT_RATIO: Record = { document: "3 / 4", square: "1 / 1", }; /** * The dependency-free thumbnail frame: loading shimmer, image fade-in, * custom-rendered preview slot, and extension fallback. */ export function FileThumbnailFrame({ file, className, previewAspectRatio, previewClassName, previewContent, previewImageUrl, thumbnailShape, thumbnailSize, onPreviewError, state, style, ...props }: FileThumbnailFrameProps) { const extension = getFileThumbnailExtension(file); const resolvedShape = thumbnailShape ?? (previewAspectRatio === 1 ? "square" : "document"); const hasRenderableContent = hasRenderablePreviewContent(previewContent); const resolvedState = resolveFileThumbnailState({ explicitState: state, hasPreview: hasRenderableContent || Boolean(previewImageUrl), }); return (

{resolvedState === "loading" ? ( ) : resolvedState === "error" ? ( ) : hasRenderableContent ? (

{previewContent}

) : previewImageUrl ? ( } onError={onPreviewError} /> ) : ( )}

); } function formatFileThumbnailAspectRatio(value: number) { return value === 1 ? "1 / 1" : String(value); } export function resolveFileThumbnailState({ explicitState, hasPreview, }: { explicitState?: FileThumbnailState; hasPreview: boolean; }): FileThumbnailState { if (explicitState) return explicitState; return hasPreview ? "loaded" : "error"; } export function hasRenderablePreviewContent(value: React.ReactNode): boolean { return value !== null && value !== undefined && value !== false; } 55:T4eb,import type * as React from "react"; export interface ThumbnailFile { name: string; type: string; } export type FileThumbnailState = "loading" | "loaded" | "error"; export type FileThumbnailShape = "document" | "square"; export type FileThumbnailSize = "xs" | "sm" | "md" | "lg" | "xl"; export interface FileThumbnailFrameProps extends Omit, "children"> { /** The file being previewed. A browser `File` works too. */ file: ThumbnailFile | File; /** Aspect ratio of the preview frame (width / height). Defaults to 3 / 4. */ previewAspectRatio?: number; /** Common thumbnail geometry. Defaults to document unless previewAspectRatio is provided. */ thumbnailShape?: FileThumbnailShape; /** Common thumbnail width token. Use className for custom dimensions. */ thumbnailSize?: FileThumbnailSize; previewClassName?: string; /** Custom React preview (e.g. a rendered PDF page). Takes priority over the image. */ previewContent?: React.ReactNode; /** Externally generated thumbnail image URL. */ previewImageUrl?: string | null; /** Called when the browser image preview fails to load. */ onPreviewError?: () => void; /** Explicit preview lifecycle. */ state?: FileThumbnailState; } 56:T5f0,import type { ThumbnailFile } from "./file-thumbnail-frame-types"; export function getFileThumbnailExtension( file: ThumbnailFile | File, ): string | null { const fromName = extensionFromName(file.name); if (fromName) return fromName.toLowerCase(); const subtype = mimeSubtypeToExtension(file.type); return subtype ? subtype.toLowerCase() : null; } function extensionFromName(name: string | undefined): string | null { if (!name) return null; const clean = name.split(/[?#]/)[0]; const base = clean.split(/[\\/]/).pop() ?? clean; if (!base.includes(".")) return null; return base.split(".").pop() || null; } function mimeSubtypeToExtension(type: string | undefined): string | null { if (!type) return null; const normalized = type.toLowerCase().split(";")[0].trim(); if (normalized in MIME_EXTENSION) return MIME_EXTENSION[normalized]; const subtype = normalized.split("/").pop(); return subtype || null; } const MIME_EXTENSION: Record = { "application/pdf": "pdf", "application/vnd.ms-excel": "xls", "application/vnd.ms-powerpoint": "ppt", "application/vnd.openxmlformats-officedocument.presentationml.presentation": "pptx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx", "image/jpeg": "jpg", "image/png": "png", "image/tiff": "tiff", "text/csv": "csv", "text/html": "html", "text/markdown": "md", "text/plain": "txt", }; 57:T977,"use client"; import * as React from "react"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { joinEffectKey } from "@/lib/effect-key"; export function FileThumbnailShimmer() { const highlightRef = React.useRef(null); const prefersReducedMotion = usePrefersReducedMotion(); useKeyedMountEffect(joinEffectKey([prefersReducedMotion]), () => { const highlight = highlightRef.current; if (!highlight || prefersReducedMotion || !highlight.animate) return; const animation = highlight.animate( [{ backgroundPosition: "200% 0" }, { backgroundPosition: "-200% 0" }], { duration: 1600, iterations: Infinity, easing: "linear", }, ); return () => animation.cancel(); }); return (

); } function usePrefersReducedMotion(): boolean { return React.useSyncExternalStore( subscribeToReducedMotion, getReducedMotionSnapshot, () => false, ); } function subscribeToReducedMotion(onChange: () => void) { if (typeof window === "undefined" || !window.matchMedia) return () => {}; const query = window.matchMedia("(prefers-reduced-motion: reduce)"); if (query.addEventListener) { query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); } const legacyQuery = query as MediaQueryList & { addListener?: (listener: () => void) => void; removeListener?: (listener: () => void) => void; }; legacyQuery.addListener?.(onChange); return () => legacyQuery.removeListener?.(onChange); } function getReducedMotionSnapshot() { if (typeof window === "undefined" || !window.matchMedia) return false; return window.matchMedia("(prefers-reduced-motion: reduce)").matches; } 58:T637,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { FileThumbnailShimmer } from "./file-thumbnail-shimmer"; export function FileThumbnailImage({ url, alt, className, fallback, onError, }: { url: string; alt: string; className?: string; fallback: React.ReactNode; onError?: () => void; }) { const [loaded, setLoaded] = React.useState(false); const [failed, setFailed] = React.useState(false); const didReportErrorRef = React.useRef(false); const reportError = React.useCallback(() => { if (didReportErrorRef.current) return; didReportErrorRef.current = true; onError?.(); }, [onError]); // A cached image can complete before React attaches `onLoad`. const imgRef = React.useCallback( (img: HTMLImageElement | null) => { if (!img) return; if (img.complete) { if (img.naturalWidth > 0) setLoaded(true); else { setFailed(true); reportError(); } } }, [reportError], ); if (failed) return <>{fallback}; return ( <> {alt}

setLoaded(true)} onError={() => { setFailed(true); reportError(); }} className={cn( "absolute inset-0 size-full object-cover transition-opacity duration-300", loaded ? "opacity-100" : "opacity-0", className, )} /> {loaded ? null : } ); } 51:["$","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":[null,["$","$L52",null,{"namespace":"@retab","registryDependencies":["@retab/utils","@retab/effect-key","@retab/use-keyed-mount-effect"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/new-york-v4/ui/file-thumbnail-frame.tsx","content":"$54","type":"registry:ui","target":"@ui/file-thumbnail-frame.tsx"},{"path":"registry/new-york-v4/ui/file-thumbnail-frame-types.ts","content":"$55","type":"registry:ui","target":"@ui/file-thumbnail-frame-types.ts"},{"path":"registry/new-york-v4/ui/file-thumbnail-extension.ts","content":"$56","type":"registry:ui","target":"@ui/file-thumbnail-extension.ts"},{"path":"registry/new-york-v4/ui/file-thumbnail-fallback.tsx","content":"export function FileThumbnailFallback({\n extension,\n}: {\n extension: string | null;\n}) {\n return (\n \n \n \n \n \n {extension ? (\n \n {extension}\n \n ) : null}\n

\n );\n}\n","type":"registry:ui","target":"@ui/file-thumbnail-fallback.tsx"},{"path":"registry/new-york-v4/ui/file-thumbnail-shimmer.tsx","content":"$57","type":"registry:ui","target":"@ui/file-thumbnail-shimmer.tsx"},{"path":"registry/new-york-v4/ui/file-thumbnail-image.tsx","content":"$58","type":"registry:ui","target":"@ui/file-thumbnail-image.tsx"}],"className":"h-[70svh] min-h-80"}]]}]