51: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"] 52: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"] 53:T1a47,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import type { ViewerSource } from "@/lib/viewer-source"; import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; import { FileViewerPreview } from "@/components/ui/file-viewer"; import { ViewerBody, ViewerHeader, ViewerRoot, ViewerSidebar, ViewerSurface, } from "@/components/ui/viewer"; import { FileSystemLightTree } from "./file-system-light-tree"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { joinEffectKey } from "@/lib/effect-key"; export type FileSystemLightFile = { path: string; source: ViewerSource; }; export type FileSystemLightProps = { files: FileSystemLightFile[]; className?: string; defaultSelectedPath?: string | null; onSelectedPathChange?: (path: string | null) => void; selectedPath?: string | null; title?: string; }; export function FileSystemLight({ files, className, defaultSelectedPath = files[0]?.path ?? null, onSelectedPathChange, selectedPath: selectedPathProp, title = "Files", }: FileSystemLightProps) { const normalizedFiles = React.useMemo( () => files.map((file) => ({ ...file, path: normalizeFileSystemLightPath(file.path), })), [files], ); const paths = React.useMemo( () => normalizedFiles.map((file) => file.path), [normalizedFiles], ); const filesByPath = React.useMemo( () => new Map(normalizedFiles.map((file) => [file.path, file])), [normalizedFiles], ); const onSelectedPathChangeRef = React.useRef(onSelectedPathChange); const isSelectionControlledRef = React.useRef(selectedPathProp !== undefined); const initialSelectedPath = normalizeOptionalFileSystemLightPath(defaultSelectedPath); const [internalSelectedPath, setInternalSelectedPath] = React.useState< string | null >(() => initialSelectedPath && filesByPath.has(initialSelectedPath) ? initialSelectedPath : (paths[0] ?? null), ); const isSelectionControlled = selectedPathProp !== undefined; const selectedPath = normalizeOptionalFileSystemLightPath( selectedPathProp ?? internalSelectedPath, ); const selectedFile = selectedPath ? filesByPath.get(selectedPath) : undefined; const selectedTreePaths = React.useMemo( () => (selectedPath && filesByPath.has(selectedPath) ? [selectedPath] : []), [filesByPath, selectedPath], ); const selectedPathSegments = React.useMemo( () => getFileSystemLightPathSegments(selectedPath), [selectedPath], ); useKeyedMountEffect(joinEffectKey([onSelectedPathChange]), () => { onSelectedPathChangeRef.current = onSelectedPathChange; }); useKeyedMountEffect(joinEffectKey([isSelectionControlled]), () => { isSelectionControlledRef.current = isSelectionControlled; }); return (

{selectedPathSegments.map((segment, index) => { const isLast = index === selectedPathSegments.length - 1; return ( {isLast ? ( {segment} ) : ( {segment} )} {!isLast ? : null} ); })}

{paths.length} files

{ const nextPath = selectedPaths.at(-1) ?? null; if (!isSelectionControlledRef.current) { setInternalSelectedPath(nextPath); } onSelectedPathChangeRef.current?.(nextPath); }} paths={paths} selectedPaths={selectedTreePaths} style={ { "--trees-bg-override": "transparent", "--trees-border-color-override": "transparent", "--trees-fg-override": "var(--foreground)", "--trees-fg-muted-override": "var(--muted-foreground)", "--trees-focus-ring-color-override": "var(--ring)", "--trees-focus-ring-width-override": "2px", "--trees-item-padding-x-override": "0.75rem", "--trees-border-radius-override": "0.375rem", "--trees-file-icon-color": "var(--muted-foreground)", "--trees-selected-bg-override": "var(--primary)", "--trees-selected-fg-override": "var(--primary-foreground)", } as React.CSSProperties } /> {selectedFile ? ( ) : (

Select a file

)} ); } function normalizeFileSystemLightPath(path: string) { return path.replace(/^\/+/, "").replace(/\/+$/, ""); } function normalizeOptionalFileSystemLightPath(path: string | null | undefined) { return path ? normalizeFileSystemLightPath(path) : null; } function getFileSystemLightPathSegments(path: string | null) { return path ? path.split("/").filter(Boolean) : ["/"]; } 54:T702,"use client"; import * as React from "react"; import { FileTree as PierreFileTree, useFileTree } from "@pierre/trees/react"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { joinEffectKey } from "@/lib/effect-key"; export type FileSystemLightTreeProps = Omit< React.ComponentProps, "model" > & { onSelectedPathsChange: (selectedPaths: string[]) => void; paths: string[]; selectedPaths: string[]; }; export function FileSystemLightTree({ onSelectedPathsChange, paths, selectedPaths, ...props }: FileSystemLightTreeProps) { const onSelectedPathsChangeRef = React.useRef(onSelectedPathsChange); useKeyedMountEffect(joinEffectKey([onSelectedPathsChange]), () => { onSelectedPathsChangeRef.current = onSelectedPathsChange; }); const { model } = useFileTree({ flattenEmptyDirectories: false, icons: { colored: false, set: "complete" }, initialExpansion: "open", initialSelectedPaths: selectedPaths, itemHeight: 32, onSelectionChange: (nextSelectedPaths) => { onSelectedPathsChangeRef.current([...nextSelectedPaths]); }, overscan: 12, paths, search: false, stickyFolders: false, }); useKeyedMountEffect(joinEffectKey([model, paths]), () => { model.resetPaths(paths); }); useKeyedMountEffect(joinEffectKey([model, selectedPaths]), () => { const selectedPathSet = new Set(selectedPaths); for (const path of model.getSelectedPaths()) { if (!selectedPathSet.has(path)) { model.getItem(path)?.deselect(); } } for (const path of selectedPathSet) { if (!model.getSelectedPaths().includes(path)) { model.getItem(path)?.select(); } } }); return ; } 50:["$","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","@pierre/trees",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40pierre%2Ftrees","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":"@pierre/trees"}]]}]}],["$","li","lucide-react@^0.460.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@^0.460.0"}]]}]}]]}],["$","$L51",null,{"namespace":"@retab","registryDependencies":["@retab/utils","breadcrumb","@retab/file-viewer"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/new-york-v4/ui/file-system-light.tsx","content":"$53","type":"registry:ui","target":"@ui/file-system-light.tsx"},{"path":"registry/new-york-v4/ui/file-system-light-tree.tsx","content":"$54","type":"registry:ui","target":"@ui/file-system-light-tree.tsx"},{"path":"registry/new-york-v4/ui/viewer.tsx","content":"\"use client\";\n\nexport { ViewerBody } from \"./viewer-body\";\nexport type { ViewerSidebarTriggerProps } from \"./viewer-chrome\";\nexport {\n ViewerFrame,\n ViewerHeader,\n ViewerSidebarTrigger,\n} from \"./viewer-chrome\";\nexport {\n ViewerRoot,\n useOptionalViewerSidebar,\n useViewerSidebar,\n} from \"./viewer-root\";\nexport { ViewerSidebar } from \"./viewer-sidebar\";\nexport { ViewerSurface, ViewerViewport } from \"./viewer-surface\";\nexport type {\n ViewerBodyProps,\n ViewerDataAttributes,\n ViewerFrameProps,\n ViewerHeaderProps,\n ViewerRootProps,\n ViewerSidebarCollapsible,\n ViewerSidebarStateValue,\n ViewerSidebarMode,\n ViewerSidebarProps,\n ViewerSidebarRequestedMode,\n ViewerSidebarSide,\n ViewerSidebarSlotNames,\n ViewerSidebarState,\n ViewerStateAttributeNamespace,\n ViewerStateAttributeSlot,\n ViewerStateAttributeValues,\n ViewerSurfaceProps,\n ViewerViewportProps,\n} from \"./viewer-types\";\n","type":"registry:ui","target":"@ui/viewer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]