4e: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"] 4f: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"] 50:T5b6c,"use client" import * as React from "react" import { DndContext, PointerSensor, useDraggable, useDroppable, useSensor, useSensors, type DragEndEvent, } from "@dnd-kit/core" import { ArrowLeft, Download, ChevronDown, FileText, Folder, FolderOpen, Grid2X2, List, MoreHorizontal, Rows3, Trash2, UploadCloud, } from "lucide-react" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { cn } from "@/lib/utils" import { FileUploadDropzone, type FileUploadDropzoneFile, } from "./file-upload-dropzone" export type FileManagerView = "details" | "list" | "cards" export type FileManagerMobileMode = "auto" | "list" | "sheet" export type FileManagerItem = { id: string name: string size?: string modified?: string type?: string path?: string kind?: "file" | "folder" } function normalizePath(path: string) { if (!path || path === "/") return "/" return `/${path.split("/").filter(Boolean).join("/")}` } function joinPath(base: string, name: string) { return normalizePath(`${base}/${name}`) } function getPathParts(path: string) { return normalizePath(path).split("/").filter(Boolean) } function getParentPath(path: string) { const parts = getPathParts(path) return normalizePath(parts.slice(0, -1).join("/")) } function getItemPath(item: FileManagerItem) { return normalizePath(item.path ?? "/") } function getFolderPath(item: FileManagerItem) { return item.kind === "folder" ? joinPath(getItemPath(item), item.name) : getItemPath(item) } function getDerivedFolders(files: FileManagerItem[]) { const folders = new Set(["/"]) files.forEach((file) => { const path = getItemPath(file) const parts = getPathParts(path) parts.forEach((_, index) => { folders.add(normalizePath(parts.slice(0, index + 1).join("/"))) }) if (file.kind === "folder") { folders.add(getFolderPath(file)) } }) return Array.from(folders).sort((left, right) => { const depth = getPathParts(left).length - getPathParts(right).length return depth === 0 ? left.localeCompare(right) : depth }) } function getNavigationDirection(currentPath: string, nextPath: string) { const current = normalizePath(currentPath) const next = normalizePath(nextPath) if (next === current) return 0 if (next.startsWith(`${current}/`)) return 1 if (current.startsWith(`${next}/`)) return -1 return getPathParts(next).length >= getPathParts(current).length ? 1 : -1 } export function FileManager({ files, path, defaultPath = "/", defaultView = "details", onPathChange, onUpload, onDelete, onOpen, onMove, mobileMode = "auto", className, }: { files: FileManagerItem[] path?: string defaultPath?: string defaultView?: FileManagerView mobileMode?: FileManagerMobileMode onPathChange?: (path: string) => void onUpload?: (path: string, files: FileUploadDropzoneFile[]) => void onDelete?: (file: FileManagerItem) => void onOpen?: (file: FileManagerItem) => void onMove?: (file: FileManagerItem, targetPath: string) => void className?: string }) { const [internalPath, setInternalPath] = React.useState(defaultPath) const [view, setView] = React.useState(defaultView) const [transitionDirection, setTransitionDirection] = React.useState(1) const [uploadOpen, setUploadOpen] = React.useState(false) const [folderPickerOpen, setFolderPickerOpen] = React.useState(false) const [uploadFiles, setUploadFiles] = React.useState< FileUploadDropzoneFile[] >([]) const reduceMotion = useReducedMotion() const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { delay: 160, tolerance: 6, }, }) ) const currentPath = normalizePath(path ?? internalPath) const forceMobileLayout = mobileMode === "list" || mobileMode === "sheet" const compactFolderNavigation = mobileMode === "sheet" const folders = React.useMemo(() => getDerivedFolders(files), [files]) const visibleFiles = React.useMemo( () => files.filter((file) => getItemPath(file) === currentPath), [currentPath, files] ) const visibleView = forceMobileLayout && view === "details" ? "list" : view const viewOptions = [ { value: "details", icon: Rows3, label: "Details" }, { value: "list", icon: List, label: "List" }, { value: "cards", icon: Grid2X2, label: "Cards" }, ].filter((item) => !forceMobileLayout || item.value !== "details") function setPath(nextPath: string) { const normalized = normalizePath(nextPath) setTransitionDirection(getNavigationDirection(currentPath, normalized)) setInternalPath(normalized) onPathChange?.(normalized) } function openItem(file: FileManagerItem) { if (file.kind === "folder") { setPath(getFolderPath(file)) return } onOpen?.(file) } const isUploading = uploadFiles.some((file) => file.status === "uploading") const uploadableFiles = uploadFiles.filter((file) => file.status !== "error") function submitUpload() { if (uploadableFiles.length === 0 || isUploading) return onUpload?.(currentPath, uploadableFiles) setUploadOpen(false) setUploadFiles([]) } function handleDragEnd(event: DragEndEvent) { const activeId = String(event.active.id) const overId = event.over ? String(event.over.id) : null if (!overId?.startsWith("folder:")) return const item = files.find((file) => file.id === activeId) if (!item) return const targetPath = normalizePath(overId.replace("folder:", "")) const currentItemPath = getItemPath(item) if (targetPath === currentItemPath) return if (item.kind === "folder") { const sourceFolderPath = getFolderPath(item) if ( targetPath === sourceFolderPath || targetPath.startsWith(`${sourceFolderPath}/`) ) { return } } onMove?.(item, targetPath) } const mobileFolderList = (

{folders.map((folder) => { const active = folder === currentPath const label = folder === "/" ? "Files" : getPathParts(folder).at(-1) const depth = getPathParts(folder).length return ( { setPath(folder) setFolderPickerOpen(false) }} /> ) })}

) return (

{compactFolderNavigation ? ( ) : (

{getPathParts(currentPath).map((part, index, parts) => ( / ))}

)}

{mobileMode === "list" || compactFolderNavigation ? null : ( )}

{viewOptions.map((item) => { const Icon = item.icon return ( ) })}

{visibleFiles.length}{" "} {visibleFiles.length === 1 ? "item" : "items"} {compactFolderNavigation ? null : " in this folder"}

{mobileMode === "list" ? (

{folders.map((folder) => { const active = folder === currentPath const label = folder === "/" ? "Files" : getPathParts(folder).at(-1) return ( ) })}

) : null}

{visibleFiles.length === 0 ? (

This folder is empty.

) : visibleView === "details" ? (

Name

Size

Modified

{visibleFiles.map((file) => ( ))}

) : (

{visibleFiles.map((file) => ( ))}

)}

) } function FileManagerPathMenu({ folders, currentPath, onSelect, }: { folders: string[] currentPath: string onSelect: (path: string) => void }) { const parts = getPathParts(currentPath) const currentLabel = currentPath === "/" ? "Files" : parts.at(-1) ?? "Current folder" return ( Path onSelect("/")}> Files {parts.map((part, index) => { const path = normalizePath(parts.slice(0, index + 1).join("/")) return ( onSelect(path)}> {part} ) })} Jump to folder

{folders.map((folder) => { const active = folder === currentPath const label = folder === "/" ? "Files" : getPathParts(folder).at(-1) const depth = getPathParts(folder).length return ( onSelect(folder)} className={cn(active && "bg-muted font-medium")} style={{ paddingLeft: `${0.5 + depth * 0.75}rem` }} > {active ? ( ) : ( )} {label} ) })}

) } function FileManagerTreeFolder({ folder, label, depth, active, onClick, }: { folder: string label: string depth: number active: boolean onClick: () => void }) { const { isOver, setNodeRef } = useDroppable({ id: `folder:${folder}`, data: { folder }, }) return ( ) } function FileManagerRow({ file, view, onOpen, onDelete, draggable = false, }: { file: FileManagerItem view: FileManagerView onOpen: (file: FileManagerItem) => void onDelete?: (file: FileManagerItem) => void draggable?: boolean }) { const isFolder = file.kind === "folder" const Icon = isFolder ? Folder : FileText const { attributes, isDragging, listeners, setNodeRef } = useDraggable({ id: file.id, data: { file }, disabled: !draggable, }) if (view === "details") { return (

{isFolder ? "--" : file.size}

{file.modified}

) } return (

) } function FileManagerActions({ file, onDelete, }: { file: FileManagerItem onDelete?: (file: FileManagerItem) => void }) { return ( Download onDelete?.(file)} > Delete ) } 4d:["$","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","@dnd-kit/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","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":"@dnd-kit/core"}]]}]}],["$","li","lucide-react",{"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"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@corr","registryDependencies":["button","dialog","dropdown-menu","https://ui.corr.sh/r/file-upload-dropzone.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/corr/components/file-manager.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]