50: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"] 51: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"] 52:T1e8f,"use client"; import * as React from "react"; import { AlertCircle, FileQuestion, RefreshCw } from "lucide-react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { FileViewerPreview } from "@/components/ui/file-viewer"; import { Spinner } from "@/components/ui/spinner"; import { FileSystemOpenPreview, useFileSystemOpenPreview, } from "./file-system-open-preview-dialog"; import { FileSystemBrowser, FileSystemHeader, FileSystemSelection, useFileSystemBrowser, useFileSystemHeader, useFileSystemSelectedItem, useFileSystemSelectedSource, useFileSystemSelection, type FileSystemSelectionRenderState, } from "./file-system-parts"; import { FILE_SYSTEM_COLUMNS_SIDEBAR_WIDTH, FILE_SYSTEM_SIDEBAR_WIDTH, } from "./file-system-columns-view"; import { FileSystemProvider, useFileSystem } from "./file-system-provider"; import { FileSystemThumbnail } from "./file-system-thumbnail"; import type { FileSystemEntry, FileSystemFileItem, FileSystemProps, } from "./file-system-types"; import { ViewerBody, ViewerHeader, ViewerRoot, ViewerSidebar, ViewerSurface, } from "./viewer"; export { FileSystemOpenPreview, FileSystemProvider, FileSystemBrowser, FileSystemHeader, FileSystemSelection, useFileSystem, useFileSystemBrowser, useFileSystemHeader, useFileSystemOpenPreview, useFileSystemSelectedItem, useFileSystemSelectedSource, useFileSystemSelection, }; export type { FileSystemFileItem, FileSystemFolderItem, FileSystemItem, FileSystemLoadChildrenArgs, FileSystemLoadChildrenResult, FileSystemProps, FileSystemQueryState, FileSystemResolveSourceArgs, FileSystemView, } from "./file-system-types"; export type { FileSystemProviderProps } from "./file-system-provider"; export type { FileSystemBrowserPartState, FileSystemHeaderState, FileSystemSelectionRenderState, FileSystemSelectionState, } from "./file-system-parts"; export function FileSystem({ className, ...providerProps }: FileSystemProps) { return ( ); } function FileSystemRoot({ className }: { className?: string }) { const { browser } = useFileSystem(); const sidebarWidth = browser.view === "columns" ? FILE_SYSTEM_COLUMNS_SIDEBAR_WIDTH : FILE_SYSTEM_SIDEBAR_WIDTH; return (

{(selection) => ( )}

); } function FileSystemDefaultSelectionContent({ selection, }: { selection: FileSystemSelectionRenderState; }) { const { entry, renderFileActions, renderMetadata, resolveSource, retry, sourceState, } = selection; return (

{!entry ? ( ) : entry.kind === "folder" ? ( ) : sourceState.status === "loading" ? (

Loading preview

) : sourceState.status === "error" ? ( } title="Couldn't load preview" description={sourceState.error} action={ } /> ) : sourceState.status === "ready" ? ( ) : sourceState.status === "unavailable" ? ( } title="Preview unavailable" description="This file does not have a resolved source." /> ) : null}

{entry ? ( ) : null}

); } function FileSystemDefaultSelectionFooter({ entry, renderFileActions, renderMetadata, resolveFileSource, }: { entry: FileSystemEntry; renderFileActions?: (file: FileSystemFileItem) => React.ReactNode; renderMetadata?: (item: FileSystemEntry) => React.ReactNode; resolveFileSource: FileSystemSelectionRenderState["resolveSource"]; }) { const file = entry.kind === "file" ? entry : null; return (

{file ? ( ) : (

{folderInitial(entry.name)}

)}

{entry.name}

{entry.path}

{file ? renderFileActions?.(file) : null}

{renderMetadata ? (

{renderMetadata(entry)}

) : null}

); } function FileSystemDefaultSelectionMessage({ action, description, icon, title, }: { action?: React.ReactNode; description: string; icon?: React.ReactNode; title: string; }) { return (

{icon ?

{icon}

: null}

{title}

{description}

{action ?

{action}

: null}

); } function folderInitial(name: string) { return name.trim().charAt(0).toUpperCase() || "/"; } 53:Td1b,"use client"; import * as React from "react"; import { useFileSystemKernelRuntime } from "./file-system-kernel-runtime"; import { selectFileSystemBrowserState, selectFileSystemSelectionState, } from "./file-system-kernel-selectors"; import { useFileSystemOpenPreviewController, type FileSystemOpenPreviewController, } from "./file-system-open-preview-state"; import { useFileSystemSourceController } from "./file-system-source-controller"; import type { FileSystemProps } from "./file-system-types"; export type FileSystemProviderProps = Omit & { children: React.ReactNode; }; export type FileSystemRenderers = { renderFileActions?: FileSystemProps["renderFileActions"]; renderMetadata?: FileSystemProps["renderMetadata"]; }; export type FileSystemCompositionState = { openPreview: FileSystemOpenPreviewController; renderers: FileSystemRenderers; title: string; }; export type FileSystemContextValue = { browser: ReturnType; selection: ReturnType; } & FileSystemCompositionState; const FileSystemContext = React.createContext( null, ); export function useFileSystem() { const context = React.useContext(FileSystemContext); if (!context) { throw new Error("useFileSystem must be used within FileSystemProvider."); } return context; } export function FileSystemProvider({ items, children, defaultPath, defaultQuery, defaultSelectedPath, defaultView = "list", loadChildren, onPathChange, onQueryChange, onFileOpen, onSelectionChange, onViewChange, path, query, renderFileActions, renderMetadata, resolveSource, selectedPath, title = "Files", view, }: FileSystemProviderProps) { const source = useFileSystemSourceController({ items, resolveSource }); const openPreview = useFileSystemOpenPreviewController({ onFileOpen, resolveFileSource: source.resolveFileSource, }); const kernel = useFileSystemKernelRuntime({ defaultPath, defaultQuery, defaultSelectedPath, defaultView, items, loadChildren, onFileCommand: openPreview.open, onPathChange, onQueryChange, onSelectionChange, onViewChange, path, query, selectedPath, view, }); const browser = React.useMemo( () => selectFileSystemBrowserState({ dispatch: kernel.dispatch, ensureChildren: kernel.ensureChildren, getState: kernel.getState, state: kernel.state, }), [kernel.dispatch, kernel.ensureChildren, kernel.getState, kernel.state], ); const selection = React.useMemo( () => selectFileSystemSelectionState({ resolveSource: source.resolveFileSource, state: kernel.state, }), [kernel.state, source.resolveFileSource], ); const renderers = React.useMemo( () => ({ renderFileActions, renderMetadata }), [renderFileActions, renderMetadata], ); const value = React.useMemo( () => ({ browser, selection, openPreview, renderers, title, }), [browser, openPreview, renderers, selection, title], ); return ( {children} ); } 54:Tf9c,"use client"; import * as React from "react"; import { createFileSystemBrowserController, type FileSystemBrowserController, } from "./file-system-browser-controller"; import type { FileSystemHeaderState, FileSystemSelectionState as FileSystemSelectionDomainState, } from "./file-system-browser-state"; import { createFileSystemHeaderState } from "./file-system-browser-state"; import { FileSystemColumnsView } from "./file-system-columns-view"; import { FileSystemCommandBar, FileSystemStatusBar, FileSystemToolbar, } from "./file-system-controls"; import { FileSystemGridView } from "./file-system-grid-view"; import { FileSystemListView } from "./file-system-list-view"; import { useFileSystem } from "./file-system-provider"; import { useFileSystemSelectionSourceTask, type FileSystemSelectionSourceTask, } from "./file-system-selection-source-task"; import type { FileSystemEntry, FileSystemFileEntry, FileSystemProps, } from "./file-system-types"; export type FileSystemBrowserPartState = FileSystemBrowserController; export type { FileSystemHeaderState } from "./file-system-browser-state"; export type FileSystemSelectionState = FileSystemSelectionDomainState & { renderFileActions?: FileSystemProps["renderFileActions"]; renderMetadata?: FileSystemProps["renderMetadata"]; }; export type FileSystemSelectionRenderState = FileSystemSelectionState & { file: FileSystemFileEntry | null; retry: () => void; source: FileSystemSelectionSourceTask["source"]; sourceState: FileSystemSelectionSourceTask; }; export function useFileSystemHeader(): FileSystemHeaderState { const state = useFileSystem(); return createFileSystemHeaderState({ browser: state.browser, title: state.title, }); } export function useFileSystemBrowser(): FileSystemBrowserPartState { const state = useFileSystem(); return createFileSystemBrowserController({ browser: state.browser, openPreview: state.openPreview.open, resolveFileSource: state.selection.resolveSource, }); } export function useFileSystemSelection(): FileSystemSelectionState { const state = useFileSystem(); return { ...state.selection, renderFileActions: state.renderers.renderFileActions, renderMetadata: state.renderers.renderMetadata, }; } export function useFileSystemSelectedItem(): FileSystemEntry | null { return useFileSystemSelection().entry; } export function useFileSystemSelectedSource(): FileSystemSelectionSourceTask { const selection = useFileSystemSelection(); const file = selection.entry?.kind === "file" ? selection.entry : null; return useFileSystemSelectionSourceTask(file, selection.resolveSource); } export function FileSystemHeader() { const header = useFileSystemHeader(); return ( <> ); } export function FileSystemBrowser() { const controller = useFileSystemBrowser(); const { view } = controller.browser; return (

{view === "list" ? ( ) : view === "grid" ? ( ) : ( )}

); } export function FileSystemSelection({ children, }: { children: (state: FileSystemSelectionRenderState) => React.ReactNode; }) { const selection = useFileSystemSelection(); const file = selection.entry?.kind === "file" ? selection.entry : null; const sourceState = useFileSystemSelectionSourceTask( file, selection.resolveSource, ); return ( <> {children({ ...selection, file, retry: sourceState.retry, source: sourceState.source, sourceState, })} ); } 55:T83f,"use client"; import type { FileSystemSourceResolver } from "./file-system-selection-source-task"; import type { FileSystemEntry, FileSystemIndex, FileSystemQueryState, FileSystemSortKey, FileSystemView, } from "./file-system-types"; export type FileSystemBrowserState = { canGoBack: boolean; canGoForward: boolean; currentPath: string; entries: FileSystemEntry[]; ensureChildren: ( path: string, options?: { retry?: boolean }, ) => Promise; folderErrors: ReadonlyMap; goBack: () => void; goForward: () => void; index: FileSystemIndex; loadingFolders: ReadonlySet; navigateTo: (path: string) => void; query: FileSystemQueryState; rawIndex: FileSystemIndex; selectEntry: (entry: FileSystemEntry | null) => void; selectedEntry: FileSystemEntry | null; selectedPath: string | null; selectFirstChildAfterEnsure: ( path: string, ) => Promise; setSearch: (search: string) => void; setSortKey: (key: FileSystemSortKey) => void; setView: (view: FileSystemView) => void; view: FileSystemView; }; export type FileSystemHeaderState = { canGoBack: boolean; canGoForward: boolean; currentPath: string; goBack: () => void; goForward: () => void; query: FileSystemQueryState; setSearch: (search: string) => void; setSortKey: (key: FileSystemSortKey) => void; setView: (view: FileSystemView) => void; title: string; view: FileSystemView; }; export type FileSystemSelectionState = { entry: FileSystemEntry | null; resolveSource: FileSystemSourceResolver; }; export function createFileSystemHeaderState({ browser, title, }: { browser: FileSystemBrowserState; title: string; }): FileSystemHeaderState { return { canGoBack: browser.canGoBack, canGoForward: browser.canGoForward, currentPath: browser.currentPath, goBack: browser.goBack, goForward: browser.goForward, query: browser.query, setSearch: browser.setSearch, setSortKey: browser.setSortKey, setView: browser.setView, title, view: browser.view, }; } 56:T3b67,"use client"; import { buildFileSystemIndex, normalizeFilePath, normalizeFolderPath, } from "./file-system-index"; import { createFileSystemQueryState, DEFAULT_FILE_SYSTEM_QUERY, deriveVisibleIndex, } from "./file-system-query"; import type { FileSystemEntry, FileSystemFileEntry, FileSystemFolderEntry, FileSystemIndex, FileSystemItem, FileSystemQueryState, FileSystemSortKey, FileSystemView, } from "./file-system-types"; export type FileSystemHistoryState = { back: string[]; forward: string[]; }; export type FileSystemTreeState = { childrenByPath: Map; entriesByPath: Map; }; export type FileSystemFolderLoadReason = | "navigate" | "expand" | "retry" | "reveal-selection"; export type FileSystemFolderLoadState = | { status: "loaded" } | { status: "loading"; requestId: string; reason: FileSystemFolderLoadReason } | { status: "failed"; error: string }; export type FileSystemFolderLoadStateByPath = Map< string, FileSystemFolderLoadState >; export type FileSystemPathChangeSource = | "controlled-prop" | "history" | "reveal" | "user"; export type FileSystemEventSource = "controlled-prop" | "user"; export type FileSystemKernelState = { folders: FileSystemFolderLoadStateByPath; history: FileSystemHistoryState; path: string; query: FileSystemQueryState; selectionPath: string | null; tree: FileSystemTreeState; view: FileSystemView; }; export type FileSystemKernelEvent = | { items: readonly FileSystemItem[]; type: "items.replaced" } | { type: "path.changed"; path: string; source: FileSystemPathChangeSource } | { type: "history.back" } | { type: "history.forward" } | { type: "query.changed"; query: FileSystemQueryState; source: FileSystemEventSource; } | { type: "query.searchChanged"; search: string } | { type: "query.sortKeyChanged"; key: FileSystemSortKey } | { type: "view.changed"; source: FileSystemEventSource; view: FileSystemView; } | { path: string | null; source: FileSystemEventSource; type: "entry.selected"; } | { path: string; type: "entry.openRequested" } | { path: string; reason: FileSystemFolderLoadReason; requestId: string; type: "folder.loadRequested"; } | { items: FileSystemItem[]; path: string; requestId: string; type: "folder.loadSucceeded"; } | { error: string; path: string; requestId: string; type: "folder.loadFailed"; }; export type FileSystemKernelCommand = | { path: string; reason: FileSystemFolderLoadReason; requestId: string; type: "folder.ensure"; } | { path: string; type: "callback.pathChanged" } | { query: FileSystemQueryState; type: "callback.queryChanged" } | { view: FileSystemView; type: "callback.viewChanged" } | { entry: FileSystemEntry | null; type: "callback.selectionChanged" } | { file: FileSystemFileEntry; type: "file.open" }; export type FileSystemKernelResult = { commands: FileSystemKernelCommand[]; state: FileSystemKernelState; }; export function createFileSystemKernelState({ defaultPath = "", defaultQuery, defaultSelectedPath = null, defaultView = "list", items, }: { defaultPath?: string; defaultQuery?: Partial; defaultSelectedPath?: string | null; defaultView?: FileSystemView; items: readonly FileSystemItem[]; }): FileSystemKernelState { const tree = createFileSystemTreeState(items); const requestedPath = normalizeFolderPath(defaultPath); const path = isKnownFolderPath(tree, requestedPath) ? requestedPath : ""; const selectionPath = normalizeSelectionPath(tree, defaultSelectedPath); return { folders: new Map(), history: { back: [], forward: [] }, path, query: createFileSystemQueryState(defaultQuery), selectionPath, tree, view: defaultView, }; } export function reduceFileSystemKernel( state: FileSystemKernelState, event: FileSystemKernelEvent, ): FileSystemKernelResult { switch (event.type) { case "items.replaced": return reduceItemsReplaced(state, event.items); case "path.changed": return reducePathChanged(state, event); case "history.back": return reduceHistoryBack(state); case "history.forward": return reduceHistoryForward(state); case "query.changed": return reduceQueryChanged(state, event.query, event.source); case "query.searchChanged": return reduceQueryChanged( state, { ...state.query, search: event.search }, "user", ); case "query.sortKeyChanged": return reduceQueryChanged( state, { ...state.query, sort: nextSort(state.query, event.key) }, "user", ); case "view.changed": return reduceViewChanged(state, event.view, event.source); case "entry.selected": return reduceEntrySelected(state, event.path, event.source); case "entry.openRequested": return reduceEntryOpenRequested(state, event.path); case "folder.loadRequested": return reduceFolderLoadRequested(state, event); case "folder.loadSucceeded": return reduceFolderLoadSucceeded(state, event); case "folder.loadFailed": return reduceFolderLoadFailed(state, event); } } function reduceItemsReplaced( state: FileSystemKernelState, items: readonly FileSystemItem[], ): FileSystemKernelResult { const tree = createFileSystemTreeState(items); const path = isKnownFolderPath(tree, state.path) ? state.path : ""; const selectionPath = normalizeSelectionPath(tree, state.selectionPath); return { commands: [], state: { ...state, folders: new Map(), path, selectionPath, tree, }, }; } export function createFileSystemTreeState( items: readonly FileSystemItem[], ): FileSystemTreeState { return fileSystemTreeFromIndex(buildFileSystemIndex(items)); } export function fileSystemTreeToIndex( tree: FileSystemTreeState, ): FileSystemIndex { const folders = new Map(); const files = new Map(); const children = new Map(); for (const [path, entry] of tree.entriesByPath) { if (entry.kind === "folder") { folders.set(path, entry); } else { files.set(path, entry); } } for (const [parentPath, childPaths] of tree.childrenByPath) { const entries = childPaths .map((path) => tree.entriesByPath.get(path)) .filter((entry): entry is FileSystemEntry => Boolean(entry)); if (entries.length) children.set(parentPath, entries); } return { children, files, folders }; } export function mergeFileSystemTreeItems({ items, tree, }: { items: readonly FileSystemItem[]; tree: FileSystemTreeState; }) { return createFileSystemTreeState([...tree.entriesByPath.values(), ...items]); } export function normalizeFileSystemEntryPath(path: string | null | undefined) { if (!path) return null; return path.endsWith("/") ? normalizeFolderPath(path) : normalizeFilePath(path); } function fileSystemTreeFromIndex(index: FileSystemIndex): FileSystemTreeState { const entriesByPath = new Map(); const childrenByPath = new Map(); for (const [path, folder] of index.folders) entriesByPath.set(path, folder); for (const [path, file] of index.files) entriesByPath.set(path, file); for (const [path, children] of index.children) { childrenByPath.set( path, children.map((entry) => entry.path), ); } return { childrenByPath, entriesByPath }; } function reducePathChanged( state: FileSystemKernelState, event: Extract, ): FileSystemKernelResult { const path = normalizeFolderPath(event.path); const nextPath = isKnownFolderPath(state.tree, path) ? path : ""; if (nextPath === state.path) return unchanged(state); const nextState: FileSystemKernelState = { ...state, history: event.source === "user" ? { back: [...state.history.back, state.path], forward: [] } : state.history, path: nextPath, query: event.source === "user" || event.source === "history" ? { ...state.query, search: "" } : state.query, selectionPath: null, }; const commands: FileSystemKernelCommand[] = event.source === "controlled-prop" ? [] : [ { path: nextPath, type: "callback.pathChanged" }, { entry: null, type: "callback.selectionChanged" }, ]; return { commands, state: nextState }; } function reduceHistoryBack( state: FileSystemKernelState, ): FileSystemKernelResult { const path = state.history.back.at(-1); if (path === undefined) return unchanged(state); return { commands: [ { path, type: "callback.pathChanged" }, { entry: null, type: "callback.selectionChanged" }, ], state: { ...state, history: { back: state.history.back.slice(0, -1), forward: [state.path, ...state.history.forward], }, path, query: { ...state.query, search: "" }, selectionPath: null, }, }; } function reduceHistoryForward( state: FileSystemKernelState, ): FileSystemKernelResult { const path = state.history.forward[0]; if (path === undefined) return unchanged(state); return { commands: [ { path, type: "callback.pathChanged" }, { entry: null, type: "callback.selectionChanged" }, ], state: { ...state, history: { back: [...state.history.back, state.path], forward: state.history.forward.slice(1), }, path, query: { ...state.query, search: "" }, selectionPath: null, }, }; } function reduceQueryChanged( state: FileSystemKernelState, query: FileSystemQueryState, source: FileSystemEventSource, ): FileSystemKernelResult { const nextSelectionPath = selectionMatchesQuery(state, query) ? state.selectionPath : null; const commands: FileSystemKernelCommand[] = []; if (source === "user") commands.push({ query, type: "callback.queryChanged" }); if (nextSelectionPath !== state.selectionPath) { commands.push({ entry: null, type: "callback.selectionChanged" }); } return { commands, state: { ...state, query, selectionPath: nextSelectionPath }, }; } function reduceViewChanged( state: FileSystemKernelState, view: FileSystemView, source: FileSystemEventSource, ): FileSystemKernelResult { if (view === state.view) return unchanged(state); return { commands: source === "user" ? [{ type: "callback.viewChanged", view }] : [], state: { ...state, view }, }; } function reduceEntrySelected( state: FileSystemKernelState, path: string | null, source: FileSystemEventSource, ): FileSystemKernelResult { const selectionPath = normalizeSelectionPath(state.tree, path); if (selectionPath === state.selectionPath) return unchanged(state); return { commands: source === "user" ? [ { entry: selectionPath ? (state.tree.entriesByPath.get(selectionPath) ?? null) : null, type: "callback.selectionChanged", }, ] : [], state: { ...state, selectionPath }, }; } function reduceEntryOpenRequested( state: FileSystemKernelState, path: string, ): FileSystemKernelResult { const entry = state.tree.entriesByPath.get( normalizeFileSystemEntryPath(path) ?? "", ); if (!entry || entry.kind !== "file") return unchanged(state); return { commands: [{ file: entry, type: "file.open" }], state }; } function reduceFolderLoadRequested( state: FileSystemKernelState, event: Extract, ): FileSystemKernelResult { const path = normalizeFolderPath(event.path); return { commands: [ { path, reason: event.reason, requestId: event.requestId, type: "folder.ensure", }, ], state: { ...state, folders: new Map(state.folders).set(path, { reason: event.reason, requestId: event.requestId, status: "loading", }), }, }; } function reduceFolderLoadSucceeded( state: FileSystemKernelState, event: Extract, ): FileSystemKernelResult { const path = normalizeFolderPath(event.path); const current = state.folders.get(path); if (current?.status !== "loading" || current.requestId !== event.requestId) { return unchanged(state); } const folders = new Map(state.folders); folders.set(path, { status: "loaded" }); const tree = mergeFileSystemTreeItems({ items: event.items, tree: state.tree, }); return { commands: [], state: { ...state, folders, selectionPath: normalizeSelectionPath(tree, state.selectionPath), tree, }, }; } function reduceFolderLoadFailed( state: FileSystemKernelState, event: Extract, ): FileSystemKernelResult { const path = normalizeFolderPath(event.path); const current = state.folders.get(path); if (current?.status !== "loading" || current.requestId !== event.requestId) { return unchanged(state); } return { commands: [], state: { ...state, folders: new Map(state.folders).set(path, { error: event.error, status: "failed", }), }, }; } function unchanged(state: FileSystemKernelState): FileSystemKernelResult { return { commands: [], state }; } function isKnownFolderPath(tree: FileSystemTreeState, path: string) { return path === "" || tree.entriesByPath.get(path)?.kind === "folder"; } function normalizeSelectionPath( tree: FileSystemTreeState, path: string | null | undefined, ) { const entryPath = normalizeFileSystemEntryPath(path); return entryPath && tree.entriesByPath.has(entryPath) ? entryPath : null; } function selectionMatchesQuery( state: FileSystemKernelState, query: FileSystemQueryState, ) { if (!state.selectionPath || !query.search) return true; const rawIndex = fileSystemTreeToIndex(state.tree); const visibleIndex = buildVisibleIndex(rawIndex, state.path, query); return ( visibleIndex.files.has(state.selectionPath) || visibleIndex.folders.has(normalizeFolderPath(state.selectionPath)) ); } function buildVisibleIndex( index: FileSystemIndex, path: string, query: FileSystemQueryState, ) { return deriveVisibleIndex(index, path, query); } function nextSort(query: FileSystemQueryState, key: FileSystemSortKey) { const defaultSort = DEFAULT_FILE_SYSTEM_QUERY.sort; if (query.sort.key === key) { return { direction: query.sort.direction === "asc" ? "desc" : "asc", key, } satisfies FileSystemQueryState["sort"]; } return { direction: key === defaultSort.key || key === "kind" ? defaultSort.direction : "desc", key, } satisfies FileSystemQueryState["sort"]; } 57:T1325,"use client"; import * as React from "react"; import { useFileSystemControlledProps } from "./file-system-controlled-props"; import { useFileSystemFolderTask } from "./file-system-folder-task"; import { createFileSystemKernelState, reduceFileSystemKernel, type FileSystemKernelCommand, type FileSystemKernelEvent, type FileSystemKernelResult, type FileSystemKernelState, } from "./file-system-kernel"; import { useFileSystemKernelCommandEffects } from "./file-system-kernel-command-effects"; import type { FileSystemDispatch, FileSystemEnsureChildren, } from "./file-system-kernel-selectors"; import type { FileSystemFileEntry, FileSystemProps } from "./file-system-types"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { joinEffectKey } from "@/lib/effect-key"; type FileSystemKernelRuntimeStore = { consumeCommands: () => FileSystemKernelCommand[]; dispatch: (event: FileSystemKernelEvent) => FileSystemKernelResult; getState: () => FileSystemKernelState; subscribe: (listener: () => void) => () => void; }; export type FileSystemKernelRuntime = { dispatch: FileSystemDispatch; ensureChildren: FileSystemEnsureChildren; getState: () => FileSystemKernelState; state: FileSystemKernelState; }; export function useFileSystemKernelRuntime({ defaultPath, defaultQuery, defaultSelectedPath, defaultView = "list", items, loadChildren, onFileCommand, onPathChange, onQueryChange, onSelectionChange, onViewChange, path, query, selectedPath, view, }: Pick< FileSystemProps, | "defaultPath" | "defaultQuery" | "defaultSelectedPath" | "defaultView" | "items" | "loadChildren" | "onPathChange" | "onQueryChange" | "onSelectionChange" | "onViewChange" | "path" | "query" | "selectedPath" | "view" > & { onFileCommand: (file: FileSystemFileEntry) => void; }): FileSystemKernelRuntime { const [commandFlushVersion, setCommandFlushVersion] = React.useState(0); const storeRef = React.useRef(null); if (!storeRef.current) { storeRef.current = createFileSystemKernelRuntimeStore({ initialState: createFileSystemKernelState({ defaultPath, defaultQuery, defaultSelectedPath, defaultView, items, }), scheduleCommandFlush: () => { setCommandFlushVersion((version) => version + 1); }, }); } const store = storeRef.current; const state = React.useSyncExternalStore( store.subscribe, store.getState, store.getState, ); const dispatch = React.useCallback( (event) => { store.dispatch(event); }, [store], ); const getState = React.useCallback(() => store.getState(), [store]); useKeyedMountEffect(joinEffectKey([dispatch, items]), () => { dispatch({ items, type: "items.replaced" }); }); useFileSystemControlledProps({ dispatch, path, query, selectedPath, view, }); const folderTask = useFileSystemFolderTask({ dispatch, getState, loadChildren, }); useKeyedMountEffect(joinEffectKey([folderTask, state.path]), () => { void folderTask.ensureChildren(state.path).catch(() => {}); }); const callbacks = React.useMemo( () => ({ onFileCommand, onPathChange, onQueryChange, onSelectionChange, onViewChange, }), [ onFileCommand, onPathChange, onQueryChange, onSelectionChange, onViewChange, ], ); useFileSystemKernelCommandEffects({ callbacks, consumeCommands: store.consumeCommands, flushVersion: commandFlushVersion, folderTask, }); return React.useMemo( () => ({ dispatch, ensureChildren: folderTask.ensureChildren, getState, state, }), [dispatch, folderTask.ensureChildren, getState, state], ); } function createFileSystemKernelRuntimeStore({ initialState, scheduleCommandFlush, }: { initialState: FileSystemKernelState; scheduleCommandFlush: () => void; }): FileSystemKernelRuntimeStore { const listeners = new Set<() => void>(); let commandQueue: FileSystemKernelCommand[] = []; let state = initialState; return { consumeCommands: () => { const commands = commandQueue; commandQueue = []; return commands; }, dispatch: (event) => { const result = reduceFileSystemKernel(state, event); if (result.state !== state) { state = result.state; for (const listener of listeners) listener(); } if (result.commands.length) { commandQueue = [...commandQueue, ...result.commands]; scheduleCommandFlush(); } return result; }, getState: () => state, subscribe: (listener) => { listeners.add(listener); return () => { listeners.delete(listener); }; }, }; } 58:T781,"use client"; import * as React from "react"; import type { FileSystemFolderTask } from "./file-system-folder-task"; import type { FileSystemKernelCommand } from "./file-system-kernel"; import type { FileSystemFileEntry, FileSystemProps } from "./file-system-types"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { joinEffectKey } from "@/lib/effect-key"; export type FileSystemKernelCallbacks = { onFileCommand: (file: FileSystemFileEntry) => void; onPathChange: FileSystemProps["onPathChange"]; onQueryChange: FileSystemProps["onQueryChange"]; onSelectionChange: FileSystemProps["onSelectionChange"]; onViewChange: FileSystemProps["onViewChange"]; }; export function useFileSystemKernelCommandEffects({ callbacks, consumeCommands, flushVersion, folderTask, }: { callbacks: FileSystemKernelCallbacks; consumeCommands: () => FileSystemKernelCommand[]; flushVersion: number; folderTask: FileSystemFolderTask; }) { useKeyedMountEffect( joinEffectKey([callbacks, consumeCommands, flushVersion, folderTask]), () => { const commands = consumeCommands(); if (!commands.length) return; for (const command of commands) { switch (command.type) { case "callback.pathChanged": callbacks.onPathChange?.(command.path); break; case "callback.queryChanged": callbacks.onQueryChange?.(command.query); break; case "callback.viewChanged": callbacks.onViewChange?.(command.view); break; case "callback.selectionChanged": callbacks.onSelectionChange?.(command.entry); break; case "file.open": callbacks.onFileCommand(command.file); break; case "folder.ensure": folderTask.runFolderCommand(command); break; } } }, ); } 59:T105f,"use client"; export type FileSystemAsyncTaskId = string; export type FileSystemAsyncTaskKey = string; export type FileSystemAsyncTask = { abortController: AbortController; id: FileSystemAsyncTaskId; input: TInput; key: FileSystemAsyncTaskKey; }; export type FileSystemAsyncTaskWaiter = { reject: (error: unknown) => void; resolve: (result: TResult) => void; }; export type FileSystemAsyncTaskStart = { promise: Promise; started: boolean; task: FileSystemAsyncTask; }; export type FileSystemAsyncTaskRuntime = { abort: (key: FileSystemAsyncTaskKey, reason: string) => void; abortAll: (reason: string) => void; fail: (task: FileSystemAsyncTask, error: unknown) => boolean; get: (key: FileSystemAsyncTaskKey) => FileSystemAsyncTask | null; join: (task: FileSystemAsyncTask) => Promise; start: (input: TInput) => FileSystemAsyncTaskStart; succeed: (task: FileSystemAsyncTask, result: TResult) => boolean; }; export function createFileSystemAsyncTaskRuntime({ createTaskId = createDefaultTaskId, keyForInput, }: { createTaskId?: () => FileSystemAsyncTaskId; keyForInput: (input: TInput) => FileSystemAsyncTaskKey; }): FileSystemAsyncTaskRuntime { const tasksByKey = new Map< FileSystemAsyncTaskKey, FileSystemAsyncTask >(); const waitersByTaskId = new Map< FileSystemAsyncTaskId, FileSystemAsyncTaskWaiter[] >(); function join(task: FileSystemAsyncTask) { const promise = new Promise((resolve, reject) => { const currentTask = tasksByKey.get(task.key); if (currentTask?.id !== task.id) { reject(createStaleTaskError(task)); return; } const waiters = waitersByTaskId.get(task.id) ?? []; waiters.push({ reject, resolve }); waitersByTaskId.set(task.id, waiters); }); void promise.catch(() => {}); return promise; } function start(input: TInput): FileSystemAsyncTaskStart { const key = keyForInput(input); const currentTask = tasksByKey.get(key); if (currentTask) { return { promise: join(currentTask), started: false, task: currentTask, }; } const task = { abortController: new AbortController(), id: createTaskId(), input, key, }; tasksByKey.set(key, task); return { promise: join(task), started: true, task, }; } function succeed(task: FileSystemAsyncTask, result: TResult) { return settle(task, (waiter) => waiter.resolve(result)); } function fail(task: FileSystemAsyncTask, error: unknown) { return settle(task, (waiter) => waiter.reject(error)); } function abort(key: FileSystemAsyncTaskKey, reason: string) { const task = tasksByKey.get(key); if (!task) return; task.abortController.abort(); fail(task, createAbortTaskError(task, reason)); } function abortAll(reason: string) { for (const key of [...tasksByKey.keys()]) { abort(key, reason); } } function settle( task: FileSystemAsyncTask, settleWaiter: (waiter: FileSystemAsyncTaskWaiter) => void, ) { const currentTask = tasksByKey.get(task.key); if (currentTask?.id !== task.id) return false; const waiters = waitersByTaskId.get(task.id) ?? []; tasksByKey.delete(task.key); waitersByTaskId.delete(task.id); for (const waiter of waiters) settleWaiter(waiter); return true; } function get(key: FileSystemAsyncTaskKey) { return tasksByKey.get(key) ?? null; } return { abort, abortAll, fail, get, join, start, succeed }; } function createDefaultTaskId() { return `task:${Math.random().toString(36).slice(2)}`; } function createStaleTaskError(task: FileSystemAsyncTask) { return new Error(`Stale async task: ${task.id}`); } function createAbortTaskError( task: FileSystemAsyncTask, reason: string, ) { return new Error(`Aborted async task ${task.id}: ${reason}`); } 5a:T1fee,"use client"; import * as React from "react"; import { useMountEffect } from "@/hooks/use-mount-effect"; import { normalizeFolderPath } from "./file-system-index"; import type { FileSystemKernelCommand, FileSystemKernelState, } from "./file-system-kernel"; import { selectFileSystemKernel, type FileSystemDispatch, type FileSystemEnsureChildren, } from "./file-system-kernel-selectors"; import type { FileSystemEntry, FileSystemItem, FileSystemProps, } from "./file-system-types"; export type FileSystemFolderTask = { abortAll: () => void; ensureChildren: FileSystemEnsureChildren; runFolderCommand: ( command: Extract, ) => void; }; type FolderLoadRequest = { abortController: AbortController; path: string; requestId: string; status: "queued" | "loading"; }; type FolderLoadWaiter = { reject: (error: unknown) => void; resolve: (children: FileSystemEntry[]) => void; }; export function useFileSystemFolderTask({ dispatch, getState, loadChildren, }: { dispatch: FileSystemDispatch; getState: () => FileSystemKernelState; loadChildren: FileSystemProps["loadChildren"]; }): FileSystemFolderTask { const nextRequestNumberRef = React.useRef(0); const requestsByPathRef = React.useRef(new Map()); const waitersByRequestIdRef = React.useRef( new Map(), ); const selectVisibleChildren = React.useCallback( (path: string) => selectFileSystemKernel({ state: getState() }).index.children.get(path) ?? [], [getState], ); const joinRequest = React.useCallback((request: FolderLoadRequest) => { const promise = new Promise((resolve, reject) => { if (!isCurrentFolderRequest(requestsByPathRef.current, request)) { reject(createStaleFolderRequestError(request)); return; } const waiters = waitersByRequestIdRef.current.get(request.requestId) ?? []; waiters.push({ reject, resolve }); waitersByRequestIdRef.current.set(request.requestId, waiters); }); void promise.catch(() => {}); return promise; }, []); const createRequest = React.useCallback((path: string) => { const request: FolderLoadRequest = { abortController: new AbortController(), path, requestId: `folder:${++nextRequestNumberRef.current}`, status: "queued", }; requestsByPathRef.current.set(path, request); return request; }, []); const settleRequest = React.useCallback( ( request: FolderLoadRequest, settleWaiter: (waiter: FolderLoadWaiter) => void, ) => { if (!isCurrentFolderRequest(requestsByPathRef.current, request)) { return false; } const waiters = waitersByRequestIdRef.current.get(request.requestId) ?? []; requestsByPathRef.current.delete(request.path); waitersByRequestIdRef.current.delete(request.requestId); for (const waiter of waiters) settleWaiter(waiter); return true; }, [], ); const failRequest = React.useCallback( (request: FolderLoadRequest, error: unknown) => { settleRequest(request, (waiter) => waiter.reject(error)); }, [settleRequest], ); const settleRequestFromCommittedChildren = React.useCallback( (request: FolderLoadRequest) => { const children = selectVisibleChildren(request.path); settleRequest(request, (waiter) => waiter.resolve(children)); }, [selectVisibleChildren, settleRequest], ); const abortRequest = React.useCallback( (path: string, reason: string) => { const request = requestsByPathRef.current.get(path); if (!request) return; request.abortController.abort(); failRequest(request, createAbortFolderRequestError(request, reason)); }, [failRequest], ); const ensureChildren = React.useCallback( (path, options = {}) => { const folderPath = normalizeFolderPath(path); const selectors = selectFileSystemKernel({ state: getState() }); const folder = selectors.rawIndex.folders.get(folderPath); const rawChildren = selectors.rawIndex.children.get(folderPath) ?? []; const visibleChildren = selectors.index.children.get(folderPath) ?? []; if (!loadChildren || !folder?.hasChildren) { return Promise.resolve(visibleChildren); } if (!options.retry && rawChildren.length > 0) { return Promise.resolve(visibleChildren); } if (options.retry) { abortRequest(folderPath, "retry"); } let request = requestsByPathRef.current.get(folderPath); const started = !request; if (!request) { request = createRequest(folderPath); } const promise = joinRequest(request); if (started) { dispatch({ path: folderPath, reason: options.retry ? "retry" : "expand", requestId: request.requestId, type: "folder.loadRequested", }); } return promise.catch(() => selectVisibleChildren(folderPath)); }, [ abortRequest, createRequest, dispatch, getState, joinRequest, loadChildren, selectVisibleChildren, ], ); const runFolderCommand = React.useCallback< FileSystemFolderTask["runFolderCommand"] >( (command) => { const path = normalizeFolderPath(command.path); const request = requestsByPathRef.current.get(path); if ( !request || request.requestId !== command.requestId || request.status === "loading" ) { return; } if (!loadChildren) { settleRequestFromCommittedChildren(request); return; } request.status = "loading"; void (async () => { try { let cursor: string | null = null; const items: FileSystemItem[] = []; do { const result = await loadChildren({ cursor, path: request.path, signal: request.abortController.signal, }); items.push(...result.items); cursor = result.nextCursor ?? null; } while (cursor && !request.abortController.signal.aborted); if (request.abortController.signal.aborted) { failRequest(request, new Error("Folder request aborted.")); return; } dispatch({ items, path: request.path, requestId: request.requestId, type: "folder.loadSucceeded", }); settleRequestFromCommittedChildren(request); } catch (error) { if (!request.abortController.signal.aborted) { dispatch({ error: errorMessage(error), path: request.path, requestId: request.requestId, type: "folder.loadFailed", }); } failRequest(request, error); } })(); }, [dispatch, failRequest, loadChildren, settleRequestFromCommittedChildren], ); const abortAll = React.useCallback(() => { for (const path of [...requestsByPathRef.current.keys()]) { abortRequest(path, "file-system folder task unmounted"); } }, [abortRequest]); useMountEffect(() => abortAll); return React.useMemo( () => ({ abortAll, ensureChildren, runFolderCommand }), [abortAll, ensureChildren, runFolderCommand], ); } function errorMessage(error: unknown) { return error instanceof Error && error.message ? error.message : "Unable to load this folder."; } function isCurrentFolderRequest( requestsByPath: Map, request: FolderLoadRequest, ) { return requestsByPath.get(request.path)?.requestId === request.requestId; } function createStaleFolderRequestError(request: FolderLoadRequest) { return new Error(`Stale folder request: ${request.requestId}`); } function createAbortFolderRequestError( request: FolderLoadRequest, reason: string, ) { return new Error(`Aborted folder request ${request.requestId}: ${reason}`); } 5b:T554,"use client"; import * as React from "react"; import type { FileSystemDispatch } from "./file-system-kernel-selectors"; import type { FileSystemQueryState, FileSystemView } from "./file-system-types"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { joinEffectKey } from "@/lib/effect-key"; export function useFileSystemControlledProps({ dispatch, path, query, selectedPath, view, }: { dispatch: FileSystemDispatch; path?: string; query?: FileSystemQueryState; selectedPath?: string | null; view?: FileSystemView; }) { useKeyedMountEffect(joinEffectKey([dispatch, path]), () => { if (path !== undefined) { dispatch({ path, source: "controlled-prop", type: "path.changed" }); } }); useKeyedMountEffect(joinEffectKey([dispatch, query]), () => { if (query !== undefined) { dispatch({ query, source: "controlled-prop", type: "query.changed" }); } }); useKeyedMountEffect(joinEffectKey([dispatch, view]), () => { if (view !== undefined) { dispatch({ source: "controlled-prop", type: "view.changed", view }); } }); useKeyedMountEffect(joinEffectKey([dispatch, selectedPath]), () => { if (selectedPath !== undefined) { dispatch({ path: selectedPath, source: "controlled-prop", type: "entry.selected", }); } }); } 5c:T19bb,"use client"; import type { FileSystemBrowserState, FileSystemHeaderState, FileSystemSelectionState, } from "./file-system-browser-state"; import { normalizeFolderPath } from "./file-system-index"; import { fileSystemTreeToIndex, normalizeFileSystemEntryPath, type FileSystemKernelEvent, type FileSystemKernelState, } from "./file-system-kernel"; import { deriveVisibleIndex } from "./file-system-query"; import type { FileSystemSourceController } from "./file-system-source-controller"; import type { FileSystemEntry, FileSystemFileEntry, FileSystemIndex, FileSystemView, } from "./file-system-types"; const rawIndexCache = new WeakMap< FileSystemKernelState["tree"], FileSystemIndex >(); const visibleIndexCache = new WeakMap< FileSystemKernelState["tree"], Map> >(); export type FileSystemDispatch = (event: FileSystemKernelEvent) => void; export type FileSystemEnsureChildren = ( path: string, options?: { retry?: boolean }, ) => Promise; export type FileSystemKernelSelectors = { index: FileSystemIndex; rawIndex: FileSystemIndex; selectedEntry: FileSystemEntry | null; visibleEntries: FileSystemEntry[]; }; export function selectFileSystemKernel({ state, }: { state: FileSystemKernelState; }): FileSystemKernelSelectors { const rawIndex = selectRawIndex(state); const index = selectVisibleIndex(state, rawIndex); return { index, rawIndex, selectedEntry: selectSelectedEntry(state), visibleEntries: index.children.get(state.path) ?? [], }; } function selectRawIndex(state: FileSystemKernelState) { const cached = rawIndexCache.get(state.tree); if (cached) return cached; const index = fileSystemTreeToIndex(state.tree); rawIndexCache.set(state.tree, index); return index; } function selectVisibleIndex( state: FileSystemKernelState, rawIndex: FileSystemIndex, ) { let pathCache = visibleIndexCache.get(state.tree); if (!pathCache) { pathCache = new Map(); visibleIndexCache.set(state.tree, pathCache); } let queryCache = pathCache.get(state.path); if (!queryCache) { queryCache = new WeakMap(); pathCache.set(state.path, queryCache); } const cached = queryCache.get(state.query); if (cached) return cached; const index = deriveVisibleIndex(rawIndex, state.path, state.query); queryCache.set(state.query, index); return index; } export function selectSelectedEntry(state: FileSystemKernelState) { if (!state.selectionPath) return null; return state.tree.entriesByPath.get(state.selectionPath) ?? null; } export function selectFileSystemBrowserState({ dispatch, ensureChildren, getState, state, }: { dispatch: FileSystemDispatch; ensureChildren: FileSystemEnsureChildren; getState: () => FileSystemKernelState; state: FileSystemKernelState; }): FileSystemBrowserState { const selectors = selectFileSystemKernel({ state }); return { canGoBack: state.history.back.length > 0, canGoForward: state.history.forward.length > 0, currentPath: state.path, entries: selectors.visibleEntries, ensureChildren, folderErrors: selectFolderErrors(state), goBack: () => dispatch({ type: "history.back" }), goForward: () => dispatch({ type: "history.forward" }), index: selectors.index, loadingFolders: selectLoadingFolders(state), navigateTo: (path) => dispatch({ path, source: "user", type: "path.changed" }), query: state.query, rawIndex: selectors.rawIndex, selectEntry: (entry) => dispatch({ path: entry?.path ?? null, source: "user", type: "entry.selected", }), selectedEntry: selectors.selectedEntry, selectedPath: state.selectionPath, selectFirstChildAfterEnsure: async (path) => { const folderPath = normalizeFolderPath(path); const requestedCurrentPath = state.path; const children = await ensureChildren(path); const entry = children[0] ?? null; const latestState = getState(); if (latestState.selectionPath !== folderPath) return null; if (latestState.path !== requestedCurrentPath) return null; if (entry) { dispatch({ path: entry.path, source: "user", type: "entry.selected" }); } return entry; }, setSearch: (search) => dispatch({ search, type: "query.searchChanged" }), setSortKey: (key) => dispatch({ key, type: "query.sortKeyChanged" }), setView: (view: FileSystemView) => dispatch({ source: "user", type: "view.changed", view }), view: state.view, }; } export function selectFileSystemHeaderState({ browser, title, }: { browser: FileSystemBrowserState; title: string; }): FileSystemHeaderState { return { canGoBack: browser.canGoBack, canGoForward: browser.canGoForward, currentPath: browser.currentPath, goBack: browser.goBack, goForward: browser.goForward, query: browser.query, setSearch: browser.setSearch, setSortKey: browser.setSortKey, setView: browser.setView, title, view: browser.view, }; } export function selectFileSystemSelectionState({ resolveSource, state, }: { resolveSource: FileSystemSourceController["resolveFileSource"]; state: FileSystemKernelState; }): FileSystemSelectionState { return { entry: selectSelectedEntry(state), resolveSource, }; } export function selectFileSystemListInput({ state, }: { state: FileSystemKernelState; }) { const selectors = selectFileSystemKernel({ state }); return { currentPath: state.path, folderErrors: selectFolderErrors(state), index: selectors.index, loadingFolders: selectLoadingFolders(state), search: state.query.search, selectedPath: state.selectionPath, }; } export function selectFolderErrors(state: FileSystemKernelState) { const errors = new Map(); for (const [path, folder] of state.folders) { if (folder.status === "failed") errors.set(path, folder.error); } return errors; } export function selectLoadingFolders(state: FileSystemKernelState) { const folders = new Set(); for (const [path, folder] of state.folders) { if (folder.status === "loading") folders.add(path); } return folders; } export function selectFileEntry( state: FileSystemKernelState, path: string, ): FileSystemFileEntry | null { const entryPath = normalizeFileSystemEntryPath(path); const entry = entryPath ? state.tree.entriesByPath.get(entryPath) : null; return entry?.kind === "file" ? entry : null; } 5d:Td6d,"use client"; import * as React from "react"; import type { ViewerSource } from "@/lib/viewer-source"; import { createFileSystemAsyncTaskRuntime } from "./file-system-async-task"; import type { FileSystemFileEntry } from "./file-system-types"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { joinEffectKey } from "@/lib/effect-key"; export type FileSystemSourceResolver = ( file: FileSystemFileEntry, signal: AbortSignal, ) => Promise; export type FileSystemSelectionSourceState = | { source: ViewerSource | null; status: "idle" } | { source: null; status: "loading" } | { source: ViewerSource; status: "ready" } | { source: null; status: "unavailable" } | { error: string; source: null; status: "error" }; export type FileSystemSelectionSourceTask = FileSystemSelectionSourceState & { retry: () => void; }; type FileSystemSelectionSourceTaskInput = { file: FileSystemFileEntry; retryKey: number; }; export function useFileSystemSelectionSourceTask( file: FileSystemFileEntry | null, resolveFileSource?: FileSystemSourceResolver, ): FileSystemSelectionSourceTask { const [retryKey, setRetryKey] = React.useState(0); const [state, setState] = React.useState({ source: null, status: "idle", }); const nextTaskNumberRef = React.useRef(0); const taskRuntimeRef = React.useRef( createFileSystemAsyncTaskRuntime< FileSystemSelectionSourceTaskInput, ViewerSource | null >({ createTaskId: () => `preview-source:${++nextTaskNumberRef.current}`, keyForInput: (input) => [ "preview-source", input.file.path, input.file.key, input.retryKey, ].join("\0"), }), ); const retry = React.useCallback(() => setRetryKey((key) => key + 1), []); useKeyedMountEffect( joinEffectKey([file, resolveFileSource, retryKey]), () => { if (!file) { setState({ source: null, status: "idle" }); return; } if (file.source) { setState({ source: file.source, status: "ready" }); return; } if (!resolveFileSource) { setState({ source: null, status: "unavailable" }); return; } const taskRuntime = taskRuntimeRef.current; const { promise, task } = taskRuntime.start({ file, retryKey }); setState({ source: null, status: "loading" }); void resolveFileSource(file, task.abortController.signal) .then((source) => taskRuntime.succeed(task, source)) .catch((error) => taskRuntime.fail(task, error)); void promise .then((source) => { if (task.abortController.signal.aborted) return; setState( source ? { source, status: "ready" } : { source: null, status: "unavailable" }, ); }) .catch((error) => { if (task.abortController.signal.aborted) return; setState({ error: selectionSourceErrorMessage(error), source: null, status: "error", }); }); return () => taskRuntime.abort(task.key, "preview source task superseded"); }, ); return { ...state, retry }; } function selectionSourceErrorMessage(error: unknown) { return error instanceof Error && error.message ? error.message : "Couldn't load this file."; } 5e:Tc3c,"use client"; import * as React from "react"; import { useMountEffect } from "@/hooks/use-mount-effect"; import type { ViewerSource } from "@/lib/viewer-source"; import { createFileSystemAsyncTaskRuntime } from "./file-system-async-task"; import type { FileSystemSourceController } from "./file-system-source-controller"; import type { FileSystemFileEntry, FileSystemProps } from "./file-system-types"; export type FileSystemOpenSourceState = | { status: "idle" } | { file: FileSystemFileEntry; status: "resolving" } | { file: FileSystemFileEntry; source: ViewerSource; status: "open" } | { file: FileSystemFileEntry; status: "unavailable" } | { error: string; file: FileSystemFileEntry; status: "failed" }; export type FileSystemOpenSourceTask = { close: () => void; open: (file: FileSystemFileEntry) => void; state: FileSystemOpenSourceState; }; type FileSystemOpenSourceTaskInput = { file: FileSystemFileEntry; }; export function useFileSystemOpenSourceTask({ onFileOpen, resolveFileSource, }: { onFileOpen?: FileSystemProps["onFileOpen"]; resolveFileSource: FileSystemSourceController["resolveFileSource"]; }): FileSystemOpenSourceTask { const [state, setState] = React.useState({ status: "idle", }); const nextTaskNumberRef = React.useRef(0); const taskRuntimeRef = React.useRef( createFileSystemAsyncTaskRuntime< FileSystemOpenSourceTaskInput, ViewerSource | null >({ createTaskId: () => `open-source:${++nextTaskNumberRef.current}`, keyForInput: () => "open-source", }), ); const close = React.useCallback(() => { taskRuntimeRef.current.abortAll("open source task closed"); setState({ status: "idle" }); }, []); const open = React.useCallback( (file: FileSystemFileEntry) => { const taskRuntime = taskRuntimeRef.current; taskRuntime.abortAll("open source task superseded"); const { promise, task } = taskRuntime.start({ file }); setState({ file, status: "resolving" }); void resolveFileSource(file, task.abortController.signal) .then((source) => taskRuntime.succeed(task, source)) .catch((error) => taskRuntime.fail(task, error)); void promise .then((source) => { if (task.abortController.signal.aborted) return; onFileOpen?.(file, source); if (!source) { setState({ file, status: "unavailable" }); return; } setState({ file, source, status: "open" }); }) .catch((error: unknown) => { if (task.abortController.signal.aborted) return; onFileOpen?.(file, null); setState({ error: openSourceErrorMessage(error), file, status: "failed", }); }); }, [onFileOpen, resolveFileSource], ); useMountEffect(() => close); return React.useMemo(() => ({ close, open, state }), [close, open, state]); } function openSourceErrorMessage(error: unknown) { return error instanceof Error && error.message ? error.message : "Unable to open file."; } 5f:Td2f,"use client"; import * as React from "react"; import { AlertCircle, ExternalLink, FileQuestion } from "lucide-react"; import type { ViewerSource } from "@/lib/viewer-source"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { FileViewerPreview } from "@/components/ui/file-viewer"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Spinner } from "@/components/ui/spinner"; import { useFileSystem } from "./file-system-provider"; import type { FileSystemOpenPreviewState } from "./file-system-open-preview-state"; export function useFileSystemOpenPreview() { return useFileSystem().openPreview; } export function FileSystemOpenPreview() { const { close, state } = useFileSystemOpenPreview(); const file = state.status === "idle" ? null : state.file; const source = state.status === "open" ? state.source : null; return ( ); } function FileSystemOpenPreviewContent({ state, }: { state: FileSystemOpenPreviewState; }) { if (state.status === "resolving") { return ( Opening preview ); } if (state.status === "unavailable") { return ( Preview unavailable ); } if (state.status === "failed") { return ( {state.error} ); } if (state.status !== "open") { return null; } return (

); } function FileSystemOpenPreviewMessage({ children, }: { children: React.ReactNode; }) { return (

{children}

); } function FileSystemOpenPreviewViewer({ source }: { source: ViewerSource }) { return ; } 60:Taf8,import type * as React from "react"; import type { ViewerSource } from "@/lib/viewer-source"; export type FileSystemView = "list" | "grid" | "columns"; export type FileSystemFolderItem = { kind: "folder"; path: string; name?: string; parentPath?: string; hasChildren?: boolean; createdAt?: string; updatedAt?: string; metadata?: Record; }; export type FileSystemFileItem = { kind: "file"; path: string; key?: string; name?: string; parentPath?: string; mimeType?: string; size?: number; createdAt?: string; updatedAt?: string; etag?: string; source?: ViewerSource; previewSource?: ViewerSource; previewImageUrl?: string | null; metadata?: Record; }; export type FileSystemItem = FileSystemFolderItem | FileSystemFileItem; export type FileSystemLoadChildrenArgs = { path: string; cursor: string | null; signal: AbortSignal; }; export type FileSystemLoadChildrenResult = { items: FileSystemItem[]; nextCursor?: string | null; }; export type FileSystemResolveSourceArgs = { file: FileSystemFileItem; signal: AbortSignal; }; export type FileSystemSortKey = "name" | "kind" | "size" | "updatedAt"; export type FileSystemSortState = { direction: "asc" | "desc"; key: FileSystemSortKey; }; export type FileSystemQueryState = { search: string; sort: FileSystemSortState; }; export type FileSystemProps = { items: FileSystemItem[]; title?: string; className?: string; defaultPath?: string; path?: string; onPathChange?: (path: string) => void; defaultView?: FileSystemView; view?: FileSystemView; onViewChange?: (view: FileSystemView) => void; defaultQuery?: Partial; query?: FileSystemQueryState; onQueryChange?: (query: FileSystemQueryState) => void; selectedPath?: string | null; defaultSelectedPath?: string | null; onSelectionChange?: (item: FileSystemItem | null) => void; loadChildren?: ( args: FileSystemLoadChildrenArgs, ) => Promise; resolveSource?: ( args: FileSystemResolveSourceArgs, ) => Promise; onFileOpen?: (file: FileSystemFileItem, source: ViewerSource | null) => void; renderFileActions?: (file: FileSystemFileItem) => React.ReactNode; renderMetadata?: (item: FileSystemItem) => React.ReactNode; }; export type FileSystemFolderEntry = FileSystemFolderItem & { name: string; parentPath: string; }; export type FileSystemFileEntry = FileSystemFileItem & { key: string; name: string; parentPath: string; }; export type FileSystemEntry = FileSystemFolderEntry | FileSystemFileEntry; export type FileSystemIndex = { children: Map; files: Map; folders: Map; }; 61:Tfec,import type { FileSystemEntry, FileSystemFileEntry, FileSystemFolderEntry, FileSystemIndex, FileSystemItem, } from "./file-system-types"; export function normalizeFolderPath(path: string | undefined | null): string { if (!path || path === "/") return ""; const trimmed = path.replace(/^\/+/, ""); return trimmed.endsWith("/") ? trimmed : `${trimmed}/`; } export function normalizeFilePath(path: string): string { return path.replace(/^\/+/, "").replace(/\/+$/, ""); } export function pathName(path: string): string { const trimmed = path.endsWith("/") ? path.slice(0, -1) : path; const separatorIndex = trimmed.lastIndexOf("/"); return separatorIndex === -1 ? trimmed : trimmed.slice(separatorIndex + 1); } export 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)}/`; } export function buildFileSystemIndex(items: readonly FileSystemItem[]) { const folders = new Map(); const files = new Map(); const ensureFolderChain = (folderPath: string) => { let path = normalizeFolderPath(folderPath); while (path && !folders.has(path)) { folders.set(path, { kind: "folder", name: pathName(path), parentPath: pathParent(path), path, }); path = pathParent(path); } }; for (const item of items) { if (item.kind === "folder") { const path = normalizeFolderPath(item.path); if (!path) continue; folders.set(path, { ...item, name: item.name ?? pathName(path), parentPath: normalizeFolderPath(item.parentPath ?? pathParent(path)), path, }); ensureFolderChain(pathParent(path)); continue; } const path = normalizeFilePath(item.path); if (!path) continue; files.set(path, { ...item, key: item.key ?? path, name: item.name ?? pathName(path), parentPath: normalizeFolderPath(item.parentPath ?? pathParent(path)), path, }); ensureFolderChain(pathParent(path)); } const children = new Map(); const pushChild = (entry: FileSystemEntry) => { const siblings = children.get(entry.parentPath); if (siblings) { siblings.push(entry); } else { children.set(entry.parentPath, [entry]); } }; for (const folder of folders.values()) pushChild(folder); for (const file of files.values()) pushChild(file); for (const siblings of children.values()) siblings.sort(compareEntryNames); deriveFolderModifiedDates({ children, files, folders }); return { children, files, folders } satisfies FileSystemIndex; } export function compareEntryNames( left: Pick, right: Pick, ) { if (left.kind !== right.kind) return left.kind === "folder" ? -1 : 1; return left.name.localeCompare(right.name, undefined, { numeric: true, sensitivity: "base", }); } export function folderHasChildren( index: FileSystemIndex, folder: FileSystemFolderEntry, ) { return ( folder.hasChildren === true || (index.children.get(folder.path)?.length ?? 0) > 0 ); } function deriveFolderModifiedDates(index: FileSystemIndex) { const foldersDeepestFirst = [...index.folders.values()].sort( (left, right) => right.path.length - left.path.length, ); for (const folder of foldersDeepestFirst) { if (folder.updatedAt) continue; let newestTime = Number.NEGATIVE_INFINITY; let newestValue: string | undefined; for (const child of index.children.get(folder.path) ?? []) { const value = child.updatedAt ?? child.createdAt; const time = value ? Date.parse(value) : Number.NaN; if (!Number.isNaN(time) && time > newestTime) { newestTime = time; newestValue = value; } } if (newestValue) folder.updatedAt = newestValue; } } 62:T145f,import { detectCategory } from "@/lib/viewer-source"; import { compareEntryNames } from "./file-system-index"; import type { FileSystemEntry, FileSystemFileEntry, FileSystemIndex, FileSystemQueryState, FileSystemSortState, } from "./file-system-types"; export const DEFAULT_FILE_SYSTEM_SORT: FileSystemSortState = { direction: "asc", key: "name", }; export const DEFAULT_FILE_SYSTEM_QUERY: FileSystemQueryState = { search: "", sort: DEFAULT_FILE_SYSTEM_SORT, }; export function createFileSystemQueryState( query: Partial | undefined, ): FileSystemQueryState { return { search: query?.search ?? "", sort: { direction: query?.sort?.direction ?? DEFAULT_FILE_SYSTEM_SORT.direction, key: query?.sort?.key ?? DEFAULT_FILE_SYSTEM_SORT.key, }, }; } export function normalizeFileSystemSearch(value: string): string { return value.trim().toLowerCase(); } export function getFileSystemCategory(file: FileSystemFileEntry) { return detectCategory(file.name, file.mimeType); } export function getFileSystemCategoryLabel(category: string) { switch (category) { case "csv": return "CSV"; case "docx": return "Word"; case "html": return "HTML"; case "image": return "Image"; case "markdown": return "Markdown"; case "pdf": return "PDF"; case "pptx": return "PowerPoint"; case "text": return "Text"; case "xlsx": return "Excel"; default: return "Unsupported"; } } export function fileMatchesQuery( file: FileSystemFileEntry, query: FileSystemQueryState, ) { const search = normalizeFileSystemSearch(query.search); if ( search && !file.path.toLowerCase().includes(search) && !file.name.toLowerCase().includes(search) ) { return false; } return true; } export function deriveVisibleIndex( index: FileSystemIndex, currentPath: string, query: FileSystemQueryState, ): FileSystemIndex { const search = normalizeFileSystemSearch(query.search); if (!search) return sortFileSystemIndex(index, query.sort); const visiblePaths = new Set(); const markVisible = (path: string) => { let nextPath = path; while ( nextPath && nextPath !== currentPath && !visiblePaths.has(nextPath) ) { visiblePaths.add(nextPath); const trimmed = nextPath.endsWith("/") ? nextPath.slice(0, -1) : nextPath; const separatorIndex = trimmed.lastIndexOf("/"); nextPath = separatorIndex === -1 ? "" : `${trimmed.slice(0, separatorIndex)}/`; } }; for (const [path, file] of index.files) { if (currentPath && !path.startsWith(currentPath)) continue; if (!fileMatchesQuery(file, query)) continue; visiblePaths.add(path); markVisible(file.parentPath); } for (const [path, folder] of index.folders) { if (currentPath && !path.startsWith(currentPath)) continue; if ( !path.toLowerCase().includes(search) && !folder.name.toLowerCase().includes(search) ) { continue; } visiblePaths.add(path); markVisible(folder.parentPath); } const children = new Map(); for (const [parentPath, entries] of index.children) { const visibleEntries = entries.filter((entry) => visiblePaths.has(entry.path), ); if (visibleEntries.length) children.set(parentPath, visibleEntries); } return sortFileSystemIndex({ ...index, children }, query.sort); } export function sortFileSystemIndex( index: FileSystemIndex, sort: FileSystemSortState, ) { if ( sort.key === DEFAULT_FILE_SYSTEM_SORT.key && sort.direction === DEFAULT_FILE_SYSTEM_SORT.direction ) { return index; } const children = new Map(); for (const [parentPath, entries] of index.children) { children.set( parentPath, [...entries].sort((left, right) => compareEntries(left, right, sort)), ); } return { ...index, children } satisfies FileSystemIndex; } export function compareEntries( left: FileSystemEntry, right: FileSystemEntry, sort: FileSystemSortState, ) { if (left.kind !== right.kind) return left.kind === "folder" ? -1 : 1; let result = 0; switch (sort.key) { case "kind": result = entryKindLabel(left).localeCompare(entryKindLabel(right)); break; case "size": result = (entrySize(left) ?? -1) - (entrySize(right) ?? -1); break; case "updatedAt": result = entryTime(left) - entryTime(right); break; case "name": result = compareEntryNames(left, right); break; } if (result === 0) result = compareEntryNames(left, right); return sort.direction === "asc" ? result : -result; } export function entryKindLabel(entry: FileSystemEntry) { return entry.kind === "folder" ? "Folder" : getFileSystemCategoryLabel(getFileSystemCategory(entry)); } function entrySize(entry: FileSystemEntry) { return entry.kind === "file" ? entry.size : undefined; } function entryTime(entry: FileSystemEntry) { const time = Date.parse(entry.updatedAt ?? entry.createdAt ?? ""); return Number.isNaN(time) ? Number.NEGATIVE_INFINITY : time; } 63:T8b7,"use client"; import * as React from "react"; import type { ViewerSource } from "@/lib/viewer-source"; import type { FileSystemFileEntry, FileSystemProps } from "./file-system-types"; export type FileSystemSourceController = { resolveFileSource: ( file: FileSystemFileEntry, signal: AbortSignal, ) => Promise; }; export function useFileSystemSourceController({ items, resolveSource, }: Pick< FileSystemProps, "items" | "resolveSource" >): FileSystemSourceController { const sourceCache = React.useRef(new Map()); const pendingSourceCache = React.useRef( new Map>(), ); const sourceCacheItemsRef = React.useRef(items); if (sourceCacheItemsRef.current !== items) { sourceCache.current.clear(); pendingSourceCache.current.clear(); sourceCacheItemsRef.current = items; } const resolveFileSource = React.useCallback( async (file: FileSystemFileEntry, signal: AbortSignal) => { if (file.source) return file.source; const cacheKey = sourceCacheKey(file); if (sourceCache.current.has(cacheKey)) { return sourceCache.current.get(cacheKey) ?? null; } const pendingSource = pendingSourceCache.current.get(cacheKey); if (pendingSource) return pendingSource; if (!resolveSource) return null; const sourcePromise = resolveSource({ file, signal }).then( (source) => { pendingSourceCache.current.delete(cacheKey); if (!signal.aborted) sourceCache.current.set(cacheKey, source); return source; }, (error: unknown) => { pendingSourceCache.current.delete(cacheKey); throw error; }, ); pendingSourceCache.current.set(cacheKey, sourcePromise); signal.addEventListener( "abort", () => { pendingSourceCache.current.delete(cacheKey); }, { once: true }, ); return sourcePromise; }, [resolveSource], ); return { resolveFileSource }; } function sourceCacheKey(file: FileSystemFileEntry) { return [file.path, file.key, file.etag ?? "", file.updatedAt ?? ""].join( "\0", ); } 64:T1f41,"use client"; import * as React from "react"; import { ArrowLeft, ArrowRight, Columns3, Grid3X3, List, Search, } from "lucide-react"; import { cn } from "@/lib/utils"; import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import type { FileSystemBrowserState, FileSystemHeaderState, } from "./file-system-browser-state"; import { normalizeFileSystemSearch } from "./file-system-query"; import type { FileSystemSortKey, FileSystemView } from "./file-system-types"; import { ViewerSidebarTrigger } from "./viewer"; const VIEW_OPTIONS: Array<{ icon: React.ComponentType<{ className?: string }>; label: string; value: FileSystemView; }> = [ { icon: List, label: "List", value: "list" }, { icon: Grid3X3, label: "Grid", value: "grid" }, { icon: Columns3, label: "Columns", value: "columns" }, ]; const SORT_OPTIONS: Array<{ label: string; value: FileSystemSortKey; }> = [ { label: "Name", value: "name" }, { label: "Type", value: "kind" }, { label: "Size", value: "size" }, { label: "Modified", value: "updatedAt" }, ]; export function FileSystemToolbar({ canGoBack, canGoForward, currentPath, goBack, goForward, query, setSearch, setView, title, view, }: { canGoBack: FileSystemHeaderState["canGoBack"]; canGoForward: FileSystemHeaderState["canGoForward"]; currentPath: FileSystemHeaderState["currentPath"]; goBack: FileSystemHeaderState["goBack"]; goForward: FileSystemHeaderState["goForward"]; query: FileSystemHeaderState["query"]; setSearch: FileSystemHeaderState["setSearch"]; setView: FileSystemHeaderState["setView"]; title: FileSystemHeaderState["title"]; view: FileSystemHeaderState["view"]; }) { const currentPathSegments = React.useMemo( () => getFileSystemBreadcrumbSegments(currentPath, title), [currentPath, title], ); return (

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

setSearch(event.target.value)} placeholder="Search" size="sm" type="search" value={query.search} />

); } function getFileSystemBreadcrumbSegments(currentPath: string, title: string) { const segments = currentPath.split("/").filter(Boolean); return segments.length > 0 ? segments : [title]; } function FileSystemViewTabs({ setView, view, }: { setView: FileSystemHeaderState["setView"]; view: FileSystemHeaderState["view"]; }) { return ( setView(nextView as FileSystemView)} className="hidden md:block" data-slot="file-system-view-tabs" > {VIEW_OPTIONS.map((option) => ( ))} ); } export function FileSystemCommandBar({ controller, }: { controller: FileSystemHeaderState; }) { return (

); } export function FileSystemSortControls({ controller, }: { controller: FileSystemHeaderState; }) { return ( <> {SORT_OPTIONS.map((option) => { const isActive = controller.query.sort.key === option.value; return ( ); })} ); } export function FileSystemStatusBar({ browser, }: { browser: FileSystemBrowserState; }) { const itemCount = browser.entries.length; const isSearching = normalizeFileSystemSearch(browser.query.search).length > 0; const selectedEntry = browser.selectedEntry; return (

{itemCount}{" "} {isSearching ? itemCount === 1 ? "result" : "results" : itemCount === 1 ? "item" : "items"} {selectedEntry ? ( {selectedEntry.name} selected ) : null}

); } 65:T602,import type * as React from "react"; export type FileSystemNavigationEntry = { name: string; path: string; }; export function fileSystemEntryAtOffset< Entry extends FileSystemNavigationEntry, >(entries: readonly Entry[], selectedPath: string | null, offset: number) { const currentIndex = entries.findIndex( (entry) => entry.path === selectedPath, ); const nextIndex = Math.min( entries.length - 1, Math.max(0, currentIndex === -1 ? 0 : currentIndex + offset), ); return entries[nextIndex] ?? null; } export function fileSystemBoundaryEntry< Entry extends FileSystemNavigationEntry, >(entries: readonly Entry[], boundary: "first" | "last") { return boundary === "first" ? (entries[0] ?? null) : (entries[entries.length - 1] ?? null); } export function fileSystemTypeAheadMatch< Entry extends FileSystemNavigationEntry, >( event: React.KeyboardEvent, entries: readonly Entry[], selectedPath: string | null, ) { if ( event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey || !/^[\p{L}\p{N}]$/u.test(event.key) ) { return null; } const search = event.key.toLowerCase(); const startIndex = Math.max( 0, entries.findIndex((entry) => entry.path === selectedPath) + 1, ); for (let step = 0; step < entries.length; step += 1) { const entry = entries[(startIndex + step) % entries.length]; if (entry.name.toLowerCase().startsWith(search)) { event.preventDefault(); return entry; } } return null; } 66:T871,"use client"; import * as React from "react"; import { fileSystemBoundaryEntry, fileSystemEntryAtOffset, fileSystemTypeAheadMatch, type FileSystemNavigationEntry, } from "./file-system-navigation"; export function useFileSystemRovingFocus< Entry extends FileSystemNavigationEntry, >({ entries, getScrollIndex, onSelect, scrollToIndex, selectedPath, }: { entries: readonly Entry[]; selectedPath: string | null; onSelect: (entry: Entry) => void; getScrollIndex?: (entry: Entry) => number; scrollToIndex?: (index: number) => void; }) { const entryElements = React.useRef(new Map()); const registerEntryRef = React.useCallback( (path: string, element: HTMLElement | null) => { if (element) { entryElements.current.set(path, element); } else { entryElements.current.delete(path); } }, [], ); const focusEntry = React.useCallback( (entry: Entry) => { const index = getScrollIndex?.(entry); if (index !== undefined) scrollToIndex?.(index); requestAnimationFrame(() => { entryElements.current.get(entry.path)?.focus(); }); }, [getScrollIndex, scrollToIndex], ); const selectEntry = React.useCallback( (entry: Entry | null) => { if (!entry) return; onSelect(entry); focusEntry(entry); }, [focusEntry, onSelect], ); const selectByOffset = React.useCallback( (offset: number) => { selectEntry(fileSystemEntryAtOffset(entries, selectedPath, offset)); }, [entries, selectEntry, selectedPath], ); const selectBoundary = React.useCallback( (boundary: "first" | "last") => { selectEntry(fileSystemBoundaryEntry(entries, boundary)); }, [entries, selectEntry], ); const selectTypeAhead = React.useCallback( (event: React.KeyboardEvent, path: string | null = selectedPath) => { selectEntry(fileSystemTypeAheadMatch(event, entries, path)); }, [entries, selectEntry, selectedPath], ); return { focusEntry, registerEntryRef, selectBoundary, selectByOffset, selectEntry, selectTypeAhead, }; } 67:T5ba,"use client"; import { FileThumbnail } from "@/components/ui/file-thumbnail"; import { useFileSystemSelectionSourceTask, type FileSystemSourceResolver, } from "./file-system-selection-source-task"; import type { FileSystemFileEntry } from "./file-system-types"; export function FileSystemThumbnail({ file, className, presentation, resolveFileSource, }: { file: FileSystemFileEntry; className?: string; presentation?: "document" | "decorative"; resolveFileSource?: FileSystemSourceResolver; }) { const sourceState = useFileSystemSelectionSourceTask( file.previewImageUrl ? null : file, resolveFileSource, ); const source = file.previewSource ?? file.source ?? sourceState.source; if (file.previewImageUrl) { return ( ); } if (source) { return ( ); } return ( ); } 68:T3fb0,"use client"; import * as React from "react"; import { createFileTreeIconResolver, getBuiltInSpriteSheet, } from "@pierre/trees"; import { AlertCircle, ChevronDown, ChevronRight, Folder } from "lucide-react"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { useMountEffect } from "@/hooks/use-mount-effect"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import type { FileSystemBrowserController } from "./file-system-browser-controller"; import { entryKindLabel } from "./file-system-query"; import { FileSystemThumbnail } from "./file-system-thumbnail"; import type { FileSystemEntry, FileSystemFileEntry } from "./file-system-types"; import { formatFileSystemDate, formatFileSystemSize, } from "./file-system-utils"; import { useFixedRowVirtualization } from "./fixed-grid-virtualization"; type FileSystemListRow = | { depth: number; entry: FileSystemEntry; id: string; isExpanded: boolean; kind: "entry"; } | { depth: number; folder: FileSystemEntry; id: string; kind: "loading"; } | { depth: number; error: string; folder: FileSystemEntry; id: string; kind: "error"; }; const LIST_ROW_HEIGHT = 34; const LIST_COLUMNS = "grid-cols-[minmax(13rem,1fr)_minmax(7rem,9rem)_minmax(5rem,7rem)_minmax(8rem,11rem)]"; const PIERRE_ICON_SPRITE_ROOT_ID = "file-system-pierre-icon-sprite-root"; const PIERRE_FILE_ICON_RESOLVER = createFileTreeIconResolver({ colored: false, set: "complete", }); export function FileSystemListView({ controller, }: { controller: FileSystemBrowserController; }) { const { browser, fileActions } = controller; const [expandedPaths, setExpandedPaths] = React.useState>( () => new Set(), ); const [focusedPath, setFocusedPath] = React.useState( browser.selectedPath, ); const parentRef = React.useRef(null); // Track the scroll element in state (not just the ref) so virtualization // re-measures when the tree remounts, e.g. after navigating through a // transient empty/loading state. A plain ref mutation never re-renders, so // a ref-only wiring leaves the row window stuck at zero rendered rows. const [parentElement, setParentElement] = React.useState(null); const setParentRef = React.useCallback((node: HTMLDivElement | null) => { parentRef.current = node; setParentElement((current) => (current === node ? current : node)); }, []); const rows = React.useMemo( () => createFileSystemListRows({ currentPath: browser.currentPath, expandedPaths, folderErrors: browser.folderErrors, index: browser.index, isSearching: browser.query.search.trim().length > 0, loadingFolders: browser.loadingFolders, }), [ browser.currentPath, browser.folderErrors, browser.index, browser.loadingFolders, browser.query.search, expandedPaths, ], ); const { virtualRows, totalRowSize } = useFixedRowVirtualization({ rowCount: rows.length, rowSize: LIST_ROW_HEIGHT, rowOverscan: 12, initialViewportHeight: 560, scrollRef: parentRef, scrollElement: parentElement, }); const entryRows = React.useMemo( () => rows.filter( (row): row is Extract => row.kind === "entry", ), [rows], ); const focusedIndex = entryRows.findIndex( (row) => row.entry.path === (focusedPath ?? browser.selectedPath), ); useKeyedMountEffect(`selected:${browser.selectedPath ?? "null"}`, () => { setFocusedPath(browser.selectedPath); }); const toggleFolder = React.useCallback( (entry: FileSystemEntry, options?: { retry?: boolean }) => { if (entry.kind !== "folder") return; if (expandedPaths.has(entry.path) && !options?.retry) { setExpandedPaths((current) => { const next = new Set(current); next.delete(entry.path); return next; }); return; } setExpandedPaths((current) => new Set(current).add(entry.path)); void browser.ensureChildren(entry.path, options).catch(() => {}); }, [browser, expandedPaths], ); const selectEntry = React.useCallback( (entry: FileSystemEntry) => { setFocusedPath(entry.path); browser.selectEntry(entry); }, [browser], ); const openEntry = React.useCallback( (entry: FileSystemEntry) => { selectEntry(entry); if (entry.kind === "folder") { browser.navigateTo(entry.path); return; } fileActions.openPreview(entry); }, [browser, fileActions, selectEntry], ); const focusEntryAt = React.useCallback( (index: number) => { const row = entryRows[Math.max(0, Math.min(index, entryRows.length - 1))]; if (!row) return; selectEntry(row.entry); }, [entryRows, selectEntry], ); const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (!entryRows.length) return; const currentIndex = focusedIndex >= 0 ? focusedIndex : 0; const current = entryRows[currentIndex]?.entry; if (event.key === "ArrowDown") { focusEntryAt(currentIndex + 1); event.preventDefault(); return; } if (event.key === "ArrowUp") { focusEntryAt(currentIndex - 1); event.preventDefault(); return; } if (event.key === "Enter" && current) { openEntry(current); event.preventDefault(); return; } if (event.key === "ArrowRight" && current?.kind === "folder") { if (!expandedPaths.has(current.path)) { toggleFolder(current); } else { browser.navigateTo(current.path); } event.preventDefault(); return; } if (event.key === "ArrowLeft" && current?.kind === "folder") { if (expandedPaths.has(current.path)) { toggleFolder(current); event.preventDefault(); } } }, [ browser, entryRows, expandedPaths, focusEntryAt, focusedIndex, openEntry, toggleFolder, ], ); if (!browser.entries.length) { return ; } return (

Name

Type

Size

Modified

{virtualRows.map((virtualRow) => { const row = rows[virtualRow.index]; if (!row) return null; return (

{row.kind === "entry" ? ( ) : row.kind === "loading" ? ( ) : ( )}

); })}

); } function FileSystemListEntryRow({ depth, entry, hasError, isExpanded, isFocused, isSelected, onOpen, onSelect, onToggle, }: { depth: number; entry: FileSystemEntry; hasError: boolean; isExpanded: boolean; isFocused: boolean; isSelected: boolean; onOpen: (entry: FileSystemEntry) => void; onSelect: (entry: FileSystemEntry) => void; onToggle: (entry: FileSystemEntry, options?: { retry?: boolean }) => void; }) { return (

{ onSelect(entry); if (entry.kind !== "folder") return; if (hasError) { onToggle(entry, { retry: true }); return; } if (!isExpanded) onToggle(entry); }} onDoubleClick={() => onOpen(entry)} className={cn( "grid h-8 cursor-default items-center gap-3 px-3 text-sm outline-none", LIST_COLUMNS, isSelected ? "bg-primary text-primary-foreground" : isFocused ? "bg-accent" : "hover:bg-accent/50", )} >

{entry.kind === "folder" ? ( ) : ( )} {entry.kind === "folder" ? ( ) : shouldUseFileSystemListThumbnail(entry) ? ( ) : ( )} {entry.name}

{entryKindLabel(entry)}

{entry.kind === "file" ? formatFileSystemSize(entry.size) : ""}

{formatFileSystemDate(entry.updatedAt ?? entry.createdAt)}

); } function PierreFileIconSprite() { useMountEffect(() => { if (document.getElementById(PIERRE_ICON_SPRITE_ROOT_ID)) return; const root = document.createElement("div"); root.id = PIERRE_ICON_SPRITE_ROOT_ID; root.hidden = true; root.innerHTML = getBuiltInSpriteSheet("complete"); document.body.appendChild(root); }); return null; } function PierreFileIcon({ className, file, }: { className?: string; file: FileSystemFileEntry; }) { const icon = PIERRE_FILE_ICON_RESOLVER.resolveIcon( "file-tree-icon-file", file.name, ); const width = icon.width ?? 16; const height = icon.height ?? 16; return ( ); } function shouldUseFileSystemListThumbnail(file: FileSystemFileEntry) { if (file.previewImageUrl || file.previewSource) return true; const mimeType = file.mimeType ?? file.source?.mimeType ?? ""; if (mimeType === "application/pdf" || mimeType.startsWith("image/")) { return true; } return /\.(avif|bmp|gif|jpe?g|pdf|png|svg|tiff?|webp)$/i.test(file.name); } function FileSystemListMessageRow({ depth, label, }: { depth: number; label: string; }) { return (

{label}

); } function FileSystemListErrorRow({ depth, error, folder, onRetry, }: { depth: number; error: string; folder: FileSystemEntry; onRetry: (entry: FileSystemEntry, options?: { retry?: boolean }) => void; }) { return (

{error}

); } function createFileSystemListRows({ currentPath, expandedPaths, folderErrors, index, isSearching, loadingFolders, }: { currentPath: string; expandedPaths: ReadonlySet; folderErrors: ReadonlyMap; index: { children: Map }; isSearching: boolean; loadingFolders: ReadonlySet; }): FileSystemListRow[] { const rows: FileSystemListRow[] = []; const appendChildren = (path: string, depth: number) => { const children = index.children.get(path) ?? []; for (const entry of children) { const hasVisibleFolderState = entry.kind === "folder" && (loadingFolders.has(entry.path) || folderErrors.has(entry.path)); const isExpanded = entry.kind === "folder" && (isSearching || expandedPaths.has(entry.path) || hasVisibleFolderState); rows.push({ depth, entry, id: `entry:${entry.path}`, isExpanded, kind: "entry", }); if (entry.kind !== "folder" || !isExpanded) continue; if (loadingFolders.has(entry.path)) { rows.push({ depth, folder: entry, id: `loading:${entry.path}`, kind: "loading", }); } const error = folderErrors.get(entry.path); if (error) { rows.push({ depth, error, folder: entry, id: `error:${entry.path}`, kind: "error", }); } appendChildren(entry.path, depth + 1); } }; appendChildren(currentPath, 0); return rows; } export function FileSystemEmptyRows({ label }: { label: string }) { return (

{label}

); } 69:T1954,"use client"; import * as React from "react"; import { Folder } from "lucide-react"; import { cn } from "@/lib/utils"; import { ScrollArea } from "@/components/ui/scroll-area"; import type { FileSystemBrowserController } from "./file-system-browser-controller"; import { FileSystemThumbnail } from "./file-system-thumbnail"; import type { FileSystemEntry } from "./file-system-types"; import { useFileSystemRovingFocus } from "./use-file-system-roving-focus"; import { useKeyedLayoutEffect } from "@/hooks/use-keyed-layout-effect"; import { useFixedRowVirtualization } from "./fixed-grid-virtualization"; const TILE_MIN_WIDTH = 124; const TILE_HEIGHT = 132; const GRID_PADDING = 12; export function FileSystemGridView({ controller, }: { controller: FileSystemBrowserController; }) { const viewportRef = React.useRef(null); const [columnCount, setColumnCount] = React.useState(1); const { browser, fileActions } = controller; const entries = browser.entries; useKeyedLayoutEffect("mount", () => { const viewport = viewportRef.current; if (!viewport || typeof ResizeObserver === "undefined") return; const update = () => { const available = Math.max(1, viewport.clientWidth - GRID_PADDING * 2); setColumnCount(Math.max(1, Math.floor(available / TILE_MIN_WIDTH))); }; const observer = new ResizeObserver(update); update(); observer.observe(viewport); return () => observer.disconnect(); }); const rowCount = Math.ceil(entries.length / columnCount); const { scrollToRow, totalRowSize, virtualRows } = useFixedRowVirtualization({ rowCount, rowSize: TILE_HEIGHT, rowOverscan: 5, initialViewportHeight: 560, scrollRef: viewportRef, }); const rovingFocus = useFileSystemRovingFocus({ entries, getScrollIndex: (entry) => { const index = entries.findIndex( (candidate) => candidate.path === entry.path, ); return index === -1 ? -1 : Math.floor(index / columnCount); }, onSelect: browser.selectEntry, scrollToIndex: (index) => { if (index !== -1) { scrollToRow({ rowIndex: index, align: "center", behavior: "auto" }); } }, selectedPath: browser.selectedPath, }); const openEntry = React.useCallback( (entry: FileSystemEntry) => { if (entry.kind === "folder") { browser.navigateTo(entry.path); } else { fileActions.openPreview(entry); } }, [browser.navigateTo, fileActions], ); const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === "ArrowRight" || event.key === "ArrowLeft") { rovingFocus.selectByOffset(event.key === "ArrowRight" ? 1 : -1); event.preventDefault(); return; } if (event.key === "ArrowDown" || event.key === "ArrowUp") { rovingFocus.selectByOffset( event.key === "ArrowDown" ? columnCount : -columnCount, ); event.preventDefault(); return; } if (event.key === "Home" || event.key === "End") { rovingFocus.selectBoundary(event.key === "Home" ? "first" : "last"); event.preventDefault(); return; } if (event.key === "Enter" && browser.selectedEntry) { openEntry(browser.selectedEntry); event.preventDefault(); return; } rovingFocus.selectTypeAhead(event); }; if (!entries.length) { return (

This folder is empty

); } return (

{virtualRows.map((row) => { const rowEntries = entries.slice( row.index * columnCount, row.index * columnCount + columnCount, ); return (

{rowEntries.map((entry) => ( { rovingFocus.registerEntryRef(entry.path, element); }} /> ))}

); })}

); } const FileSystemGridTile = React.forwardRef< HTMLButtonElement, { controller: FileSystemBrowserController; entry: FileSystemEntry; } >(function FileSystemGridTile({ controller, entry }, ref) { const { browser, fileActions } = controller; const selectedPath = browser.selectedPath; const isSelected = entry.path === selectedPath; return ( ); }); 6a:T2126,"use client"; import * as React from "react"; import { ChevronRight, Folder } from "lucide-react"; import { cn } from "@/lib/utils"; import { ScrollArea } from "@/components/ui/scroll-area"; import type { FileSystemBrowserController } from "./file-system-browser-controller"; import { folderHasChildren, pathParent } from "./file-system-index"; import { FileSystemThumbnail } from "./file-system-thumbnail"; import type { FileSystemEntry } from "./file-system-types"; import { useFixedRowVirtualization } from "./fixed-grid-virtualization"; import { useFileSystemRovingFocus } from "./use-file-system-roving-focus"; const COLUMN_ROW_HEIGHT = 32; // The columns view stacks multiple `w-64` (16rem) columns side by side, so it // needs a substantially wider sidebar than the single-pane list/tree views. export const FILE_SYSTEM_SIDEBAR_WIDTH = "min(22rem, 85vw)"; export const FILE_SYSTEM_COLUMNS_SIDEBAR_WIDTH = "min(clamp(32rem, 40vw, 40rem), 85vw)"; export function FileSystemColumnsView({ controller, }: { controller: FileSystemBrowserController; }) { const { browser } = controller; const columnPaths = React.useMemo(() => { const paths = [browser.currentPath]; const selectedPath = browser.selectedPath; if (!selectedPath?.startsWith(browser.currentPath)) return paths; const selectedEntry = browser.selectedEntry; const targetPath = selectedEntry?.kind === "folder" ? selectedEntry.path : (selectedEntry?.parentPath ?? browser.currentPath); const relativePath = targetPath.slice(browser.currentPath.length); let walkedPath = browser.currentPath; for (const segment of relativePath.split("/")) { if (!segment) continue; walkedPath = `${walkedPath}${segment}/`; paths.push(walkedPath); } return paths; }, [browser.currentPath, browser.selectedEntry, browser.selectedPath]); return (

{columnPaths.map((path, index) => ( ))}

); } function FileSystemColumn({ controller, isLast, path, }: { controller: FileSystemBrowserController; isLast: boolean; path: string; }) { const { browser, fileActions } = controller; const viewportRef = React.useRef(null); const entries = React.useMemo( () => browser.index.children.get(path) ?? [], [browser.index.children, path], ); const { scrollToRow, totalRowSize, virtualRows } = useFixedRowVirtualization({ rowCount: entries.length, rowSize: COLUMN_ROW_HEIGHT, rowOverscan: 10, initialViewportHeight: 560, scrollRef: viewportRef, }); const rovingFocus = useFileSystemRovingFocus({ entries, getScrollIndex: (entry) => entries.findIndex((candidate) => candidate.path === entry.path), onSelect: (entry) => { browser.selectEntry(entry); if (entry.kind === "folder") { void browser.ensureChildren(entry.path).catch(() => {}); } }, scrollToIndex: (index) => { if (index !== -1) { scrollToRow({ rowIndex: index, align: "center", behavior: "auto" }); } }, selectedPath: browser.selectedPath, }); const openEntry = React.useCallback( (entry: FileSystemEntry) => { if (entry.kind === "folder") { browser.navigateTo(entry.path); } else { fileActions.openPreview(entry); } }, [browser.navigateTo, fileActions], ); const selectParent = React.useCallback(() => { const selectedEntry = browser.selectedEntry; if (!selectedEntry) return; const parentPath = selectedEntry.kind === "folder" ? pathParent(selectedEntry.path) : selectedEntry.parentPath; const parent = parentPath ? (browser.rawIndex.folders.get(parentPath) ?? null) : null; if (parent) browser.selectEntry(parent); }, [browser.rawIndex.folders, browser.selectEntry, browser.selectedEntry]); const selectChild = React.useCallback(() => { const selectedEntry = browser.selectedEntry; if (selectedEntry?.kind !== "folder") return; void browser.selectFirstChildAfterEnsure(selectedEntry.path); }, [browser.selectFirstChildAfterEnsure, browser.selectedEntry]); const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === "ArrowDown" || event.key === "ArrowUp") { rovingFocus.selectByOffset(event.key === "ArrowDown" ? 1 : -1); event.preventDefault(); return; } if (event.key === "Home" || event.key === "End") { rovingFocus.selectBoundary(event.key === "Home" ? "first" : "last"); event.preventDefault(); return; } if (event.key === "ArrowRight") { selectChild(); event.preventDefault(); return; } if (event.key === "ArrowLeft") { selectParent(); event.preventDefault(); return; } if (event.key === "Enter" && browser.selectedEntry) { openEntry(browser.selectedEntry); event.preventDefault(); return; } rovingFocus.selectTypeAhead(event); }; return ( ); } const FileSystemColumnRow = React.forwardRef< HTMLButtonElement, { controller: FileSystemBrowserController; entry: FileSystemEntry; style: React.CSSProperties; } >(function FileSystemColumnRow({ controller, entry, style }, ref) { const { browser, fileActions } = controller; const selectedPath = browser.selectedPath; const isSelected = entry.path === selectedPath; const isOnTrail = entry.kind === "folder" && selectedPath?.startsWith(entry.path) && pathParent(selectedPath) !== entry.parentPath; return ( ); }); 4f:["$","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@1.0.0-beta.4",{"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@1.0.0-beta.4"}]]}]}]]}],["$","$L50",null,{"namespace":"@retab","registryDependencies":["@retab/utils","breadcrumb","button","dialog","@retab/file-size-format","@retab/file-thumbnail","@retab/file-viewer","@retab/input","@retab/scroll-area","@retab/spinner","tabs"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york-v4/ui/file-system.tsx","content":"$52","type":"registry:ui","target":"@ui/file-system.tsx"},{"path":"registry/new-york-v4/ui/file-system-provider.tsx","content":"$53","type":"registry:ui","target":"@ui/file-system-provider.tsx"},{"path":"registry/new-york-v4/ui/file-system-parts.tsx","content":"$54","type":"registry:ui","target":"@ui/file-system-parts.tsx"},{"path":"registry/new-york-v4/ui/file-system-browser-state.ts","content":"$55","type":"registry:ui","target":"@ui/file-system-browser-state.ts"},{"path":"registry/new-york-v4/ui/file-system-browser-controller.ts","content":"\"use client\";\n\nimport type { FileSystemBrowserState } from \"./file-system-browser-state\";\nimport type { FileSystemSourceController } from \"./file-system-source-controller\";\nimport type { FileSystemFileEntry } from \"./file-system-types\";\n\nexport type FileSystemOpenPreviewCommand = (file: FileSystemFileEntry) => void;\n\nexport type FileSystemFileActionController = {\n openPreview: FileSystemOpenPreviewCommand;\n resolveFileSource: FileSystemSourceController[\"resolveFileSource\"];\n};\n\nexport type FileSystemBrowserController = {\n browser: FileSystemBrowserState;\n fileActions: FileSystemFileActionController;\n};\n\nexport function createFileSystemBrowserController({\n browser,\n openPreview,\n resolveFileSource,\n}: {\n browser: FileSystemBrowserState;\n openPreview: FileSystemOpenPreviewCommand;\n resolveFileSource: FileSystemSourceController[\"resolveFileSource\"];\n}): FileSystemBrowserController {\n return {\n browser,\n fileActions: {\n openPreview,\n resolveFileSource,\n },\n };\n}\n","type":"registry:ui","target":"@ui/file-system-browser-controller.ts"},{"path":"registry/new-york-v4/ui/file-system-kernel.ts","content":"$56","type":"registry:ui","target":"@ui/file-system-kernel.ts"},{"path":"registry/new-york-v4/ui/file-system-kernel-runtime.ts","content":"$57","type":"registry:ui","target":"@ui/file-system-kernel-runtime.ts"},{"path":"registry/new-york-v4/ui/file-system-kernel-command-effects.ts","content":"$58","type":"registry:ui","target":"@ui/file-system-kernel-command-effects.ts"},{"path":"registry/new-york-v4/ui/file-system-async-task.ts","content":"$59","type":"registry:ui","target":"@ui/file-system-async-task.ts"},{"path":"registry/new-york-v4/ui/file-system-folder-task.ts","content":"$5a","type":"registry:ui","target":"@ui/file-system-folder-task.ts"},{"path":"registry/new-york-v4/ui/file-system-controlled-props.ts","content":"$5b","type":"registry:ui","target":"@ui/file-system-controlled-props.ts"},{"path":"registry/new-york-v4/ui/file-system-kernel-selectors.ts","content":"$5c","type":"registry:ui","target":"@ui/file-system-kernel-selectors.ts"},{"path":"registry/new-york-v4/ui/file-system-selection-source-task.ts","content":"$5d","type":"registry:ui","target":"@ui/file-system-selection-source-task.ts"},{"path":"registry/new-york-v4/ui/file-system-open-source-task.ts","content":"$5e","type":"registry:ui","target":"@ui/file-system-open-source-task.ts"},{"path":"registry/new-york-v4/ui/file-system-open-preview-state.ts","content":"\"use client\";\n\nexport {\n useFileSystemOpenSourceTask as useFileSystemOpenPreviewController,\n type FileSystemOpenSourceState as FileSystemOpenPreviewState,\n type FileSystemOpenSourceTask as FileSystemOpenPreviewController,\n} from \"./file-system-open-source-task\";\n","type":"registry:ui","target":"@ui/file-system-open-preview-state.ts"},{"path":"registry/new-york-v4/ui/file-system-open-preview-dialog.tsx","content":"$5f","type":"registry:ui","target":"@ui/file-system-open-preview-dialog.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"},{"path":"registry/new-york-v4/ui/file-system-types.ts","content":"$60","type":"registry:ui","target":"@ui/file-system-types.ts"},{"path":"registry/new-york-v4/ui/file-system-index.ts","content":"$61","type":"registry:ui","target":"@ui/file-system-index.ts"},{"path":"registry/new-york-v4/ui/file-system-query.ts","content":"$62","type":"registry:ui","target":"@ui/file-system-query.ts"},{"path":"registry/new-york-v4/ui/file-system-source-controller.ts","content":"$63","type":"registry:ui","target":"@ui/file-system-source-controller.ts"},{"path":"registry/new-york-v4/ui/file-system-controls.tsx","content":"$64","type":"registry:ui","target":"@ui/file-system-controls.tsx"},{"path":"registry/new-york-v4/ui/file-system-navigation.ts","content":"$65","type":"registry:ui","target":"@ui/file-system-navigation.ts"},{"path":"registry/new-york-v4/ui/use-file-system-roving-focus.ts","content":"$66","type":"registry:ui","target":"@ui/use-file-system-roving-focus.ts"},{"path":"registry/new-york-v4/ui/file-system-thumbnail.tsx","content":"$67","type":"registry:ui","target":"@ui/file-system-thumbnail.tsx"},{"path":"registry/new-york-v4/ui/file-system-list-view.tsx","content":"$68","type":"registry:ui","target":"@ui/file-system-list-view.tsx"},{"path":"registry/new-york-v4/ui/file-system-grid-view.tsx","content":"$69","type":"registry:ui","target":"@ui/file-system-grid-view.tsx"},{"path":"registry/new-york-v4/ui/file-system-columns-view.tsx","content":"$6a","type":"registry:ui","target":"@ui/file-system-columns-view.tsx"},{"path":"registry/new-york-v4/ui/file-system-utils.ts","content":"import { formatFileSize } from \"@/components/ui/file-size-format\";\n\nexport function formatFileSystemSize(size: number | undefined) {\n return typeof size === \"number\" ? formatFileSize(size) : \"\";\n}\n\nexport function formatFileSystemDate(value: string | undefined) {\n if (!value) return \"\";\n\n const date = new Date(value);\n if (Number.isNaN(date.getTime())) return \"\";\n\n return new Intl.DateTimeFormat(undefined, {\n dateStyle: \"medium\",\n timeStyle: \"short\",\n }).format(date);\n}\n","type":"registry:ui","target":"@ui/file-system-utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]