4f: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"] 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/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"] 51:Tb38,"use client"; import * as React from "react"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { FileSystem } from "@/components/ui/file-system"; import { collectFileSystemDemoFolderPaths, collectFileSystemDemoItemPaths, DEFAULT_FILE_SYSTEM_DEMO_QUERY, FILE_SYSTEM_DEMO_ITEMS, formatFileSystemDemoState, LARGE_FILE_SYSTEM_DEMO_ITEMS, parseFileSystemDemoState, type FileSystemDemoState, } from "./file-system-demo-state"; const DEFAULT_FILE_SYSTEM_DEMO_STATE: FileSystemDemoState = { path: "", query: DEFAULT_FILE_SYSTEM_DEMO_QUERY, selectedPath: null, view: "list", }; export function FileSystemBlock() { const router = useRouter(); const pathname = usePathname(); const searchParams = useSearchParams(); const isLarge = searchParams.get("large") === "true"; const items = isLarge ? LARGE_FILE_SYSTEM_DEMO_ITEMS : FILE_SYSTEM_DEMO_ITEMS; const folderPaths = React.useMemo( () => collectFileSystemDemoFolderPaths(items), [items], ); const itemPaths = React.useMemo( () => collectFileSystemDemoItemPaths(items), [items], ); const parsedState = React.useMemo( () => parseFileSystemDemoState(searchParams, { fallbackState: DEFAULT_FILE_SYSTEM_DEMO_STATE, folderPaths, itemPaths, }), [folderPaths, itemPaths, searchParams], ); const [state, setState] = React.useState(parsedState); const stateRef = React.useRef(parsedState); const parsedStateKey = React.useMemo( () => JSON.stringify( formatFileSystemDemoState(parsedState, DEFAULT_FILE_SYSTEM_DEMO_STATE), ), [parsedState], ); useKeyedMountEffect(parsedStateKey, () => { stateRef.current = parsedState; setState(parsedState); }); const replaceState = React.useCallback( (patch: Partial) => { const nextState = { ...stateRef.current, ...patch }; const nextParams = new URLSearchParams( formatFileSystemDemoState(nextState, DEFAULT_FILE_SYSTEM_DEMO_STATE), ); if (isLarge) nextParams.set("large", "true"); stateRef.current = nextState; setState(nextState); router.replace(`${pathname}?${nextParams.toString()}`, { scroll: false, }); }, [isLarge, pathname, router], ); return ( replaceState({ path, selectedPath: null })} onQueryChange={(query) => replaceState({ query })} onSelectionChange={(entry) => replaceState({ selectedPath: entry?.path ?? null }) } onViewChange={(view) => replaceState({ view })} path={state.path} query={state.query} selectedPath={state.selectedPath} view={state.view} /> ); } 52:T208c,import type { FileSystemItem, FileSystemQueryState, FileSystemView, } from "@/components/ui/file-system"; export const DEFAULT_FILE_SYSTEM_DEMO_QUERY: FileSystemQueryState = { search: "", sort: { direction: "asc", key: "name" }, }; export const FILE_SYSTEM_DEMO_ITEMS: FileSystemItem[] = [ { kind: "folder", path: "financials/", updatedAt: "2026-04-11T15:20:00Z", }, { kind: "folder", path: "research/", updatedAt: "2026-05-02T10:10:00Z", }, { kind: "folder", path: "workspace/", updatedAt: "2026-05-14T08:30:00Z", }, { kind: "file", path: "financials/nvidia-financials-fy2024.xlsx", mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", size: 231_482, source: { kind: "url", url: "/samples/nvidia-financials-fy2024.xlsx", fileName: "nvidia-financials-fy2024.xlsx", mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", }, updatedAt: "2026-04-11T15:20:00Z", }, { kind: "file", path: "financials/sales.csv", mimeType: "text/csv", size: 18_420, source: { kind: "url", url: "/samples/sales.csv", fileName: "sales.csv", mimeType: "text/csv", }, updatedAt: "2026-04-08T09:12:00Z", }, { kind: "file", path: "research/attention.pdf", mimeType: "application/pdf", previewImageUrl: "/samples/attention-page-1.png", size: 516_280, source: { kind: "url", url: "/samples/attention.pdf", fileName: "attention.pdf", mimeType: "application/pdf", }, updatedAt: "2026-05-02T10:10:00Z", }, { kind: "file", path: "research/an-image-is-worth-16x16-words.pdf", mimeType: "application/pdf", previewImageUrl: "/samples/an-image-is-worth-16x16-words-page-1.png", size: 298_114, source: { kind: "url", url: "/samples/an-image-is-worth-16x16-words.pdf", fileName: "an-image-is-worth-16x16-words.pdf", mimeType: "application/pdf", }, updatedAt: "2026-04-19T13:45:00Z", }, { kind: "file", path: "workspace/quarterly-business-review.docx", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", size: 129_030, source: { kind: "url", url: "/samples/quarterly-business-review.docx", fileName: "quarterly-business-review.docx", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", }, updatedAt: "2026-05-14T08:30:00Z", }, { kind: "file", path: "workspace/release-notes.md", mimeType: "text/markdown", size: 4_812, source: { kind: "url", url: "/samples/release-notes.md", fileName: "release-notes.md", mimeType: "text/markdown", }, updatedAt: "2026-05-10T17:05:00Z", }, { kind: "file", path: "workspace/use-debounced-value.ts", mimeType: "text/typescript", size: 2_190, source: { kind: "url", url: "/samples/use-debounced-value.ts", fileName: "use-debounced-value.ts", mimeType: "text/typescript", }, updatedAt: "2026-05-09T11:15:00Z", }, ]; export const LARGE_FILE_SYSTEM_DEMO_ITEMS: FileSystemItem[] = [ { kind: "folder", path: "large/", updatedAt: "2026-06-01T00:00:00Z", }, ...Array.from({ length: 5_000 }, (_, index): FileSystemItem => { const serial = index.toString().padStart(4, "0"); return { kind: "file", path: `large/file-${serial}.pdf`, mimeType: "application/pdf", size: index + 1, source: { kind: "url", url: "/samples/attention.pdf", fileName: `file-${serial}.pdf`, mimeType: "application/pdf", }, updatedAt: "2026-06-01T00:00:00Z", }; }), ]; export type FileSystemDemoState = { path: string; query: FileSystemQueryState; selectedPath: string | null; view: FileSystemView; }; const VIEWS: FileSystemView[] = ["list", "grid", "columns"]; const SORT_KEYS: FileSystemQueryState["sort"]["key"][] = [ "name", "kind", "size", "updatedAt", ]; export function collectFileSystemDemoItemPaths( items: readonly FileSystemItem[], ) { const paths = new Set(); for (const item of items) { paths.add( item.kind === "folder" ? normalizeFolderPath(item.path) : item.path, ); } return paths; } export function collectFileSystemDemoFolderPaths( items: readonly FileSystemItem[], ) { const paths = new Set([""]); for (const item of items) { let path = item.kind === "folder" ? normalizeFolderPath(item.path) : pathParent(item.path); while (path) { paths.add(path); path = pathParent(path); } } return paths; } export function parseFileSystemDemoState( searchParams: Pick, { fallbackState, folderPaths, itemPaths, }: { fallbackState: FileSystemDemoState; folderPaths: ReadonlySet; itemPaths: ReadonlySet; }, ): FileSystemDemoState { return { path: parsePath(searchParams.get("path"), folderPaths, fallbackState.path), query: parseQuery(searchParams, fallbackState.query), selectedPath: parseSelectedPath( searchParams.get("selectedPath"), itemPaths, fallbackState.selectedPath, ), view: parseView(searchParams.get("view"), fallbackState.view), }; } export function formatFileSystemDemoState( state: FileSystemDemoState, fallbackState: FileSystemDemoState, ) { const searchParams = new URLSearchParams(); const search = state.query.search.trim(); if (state.path !== fallbackState.path) searchParams.set("path", state.path); if (search !== fallbackState.query.search) searchParams.set("search", search); if (state.selectedPath && state.selectedPath !== fallbackState.selectedPath) { searchParams.set("selectedPath", state.selectedPath); } if (state.view !== fallbackState.view) searchParams.set("view", state.view); if (state.query.sort.key !== fallbackState.query.sort.key) { searchParams.set("sort.key", state.query.sort.key); } if (state.query.sort.direction !== fallbackState.query.sort.direction) { searchParams.set("sort.direction", state.query.sort.direction); } return searchParams.toString(); } function parseQuery( searchParams: Pick, fallbackQuery: FileSystemQueryState, ): FileSystemQueryState { return { search: (searchParams.get("search") ?? fallbackQuery.search).trim(), sort: { direction: parseSortDirection( searchParams.get("sort.direction"), fallbackQuery.sort.direction, ), key: parseSortKey(searchParams.get("sort.key"), fallbackQuery.sort.key), }, }; } function parsePath( value: string | null, folderPaths: ReadonlySet, fallbackPath: string, ) { if (!value) return fallbackPath; const path = normalizeFolderPath(value); return folderPaths.has(path) ? path : fallbackPath; } function parseSelectedPath( value: string | null, itemPaths: ReadonlySet, fallbackSelectedPath: string | null, ) { return value && itemPaths.has(value) ? value : fallbackSelectedPath; } function parseView(value: string | null, fallbackView: FileSystemView) { return VIEWS.includes(value as FileSystemView) ? (value as FileSystemView) : fallbackView; } function parseSortKey( value: string | null, fallbackSortKey: FileSystemQueryState["sort"]["key"], ) { return SORT_KEYS.includes(value as FileSystemQueryState["sort"]["key"]) ? (value as FileSystemQueryState["sort"]["key"]) : fallbackSortKey; } function parseSortDirection( value: string | null, fallbackSortDirection: FileSystemQueryState["sort"]["direction"], ) { return value === "desc" ? "desc" : fallbackSortDirection; } function normalizeFolderPath(path: string | undefined | null): string { if (!path || path === "/") return ""; const trimmed = path.replace(/^\/+/, ""); return trimmed.endsWith("/") ? trimmed : `${trimmed}/`; } function pathParent(path: string): string { const trimmed = path.endsWith("/") ? path.slice(0, -1) : path; const separatorIndex = trimmed.lastIndexOf("/"); return separatorIndex === -1 ? "" : `${trimmed.slice(0, separatorIndex)}/`; } 4e:["$","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",{"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","@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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@retab","registryDependencies":["@retab/file-system"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/new-york-v4/blocks/file-system-block.tsx","content":"$51","type":"registry:component","target":"@components/blocks/file-system-block.tsx"},{"path":"registry/new-york-v4/blocks/file-system-demo-state.ts","content":"$52","type":"registry:component","target":"@components/blocks/file-system-demo-state.ts"}],"className":"h-[70svh] min-h-80"}]]}]