# FS UI API reference

> Exports of @anymux/fs-ui.

Source: https://anymux-docs.n.yatsyk.com/docs/fs-ui/jsdoc

## Classes

### FileBrowserModel

```ts
class FileBrowserModel
```

- `fileSystem: IFileSystem`
- `fileSystemBridge: FileSystemBridge`
- `treeProvider: FileSystemTreeProvider`
- `listProvider: FileSystemListProvider`
- `treeModel: TreeModel`
- `listModel: ListItemsModel`
- `currentPath: string`
- `selectedPath: string`
- `isLoading: boolean`
- `error: string`
- `openFile: OpenFileState`
- `renameState: { itemId: string; currentName: string; path: string; source: "list" | "tree"; }`
- `deleteState: { targets: Array<{ path: string; isDirectory: boolean; name: string; }>; }`
- `createState: { parentPath: string; type: "file" | "folder"; }`
- `constructor(fileSystem: IFileSystem): FileBrowserModel`
- `setInitialPath(path: string): Promise<void>`
- `handleTreeSelection: (path: string) => Promise<void>`
- `handleListNavigation: (path: string) => Promise<void>`
- `handleListSelection: (selectedItems: ListItemData[]) => void`
- `navigateUp(): Promise<void>`
- `navigateToPath(path: string): Promise<void>`
- `refresh(): Promise<void>`
- `navigateToBreadcrumb(path: string): Promise<void>`
- `refreshItems(): Promise<void>`
- `clearError(): void`
- `setCurrentPath(path: string): Promise<void>`
- `openFileViewer(path: string, name: string, size?: number): Promise<void>`
- `navigateToNextFile(): Promise<void>`
- `navigateToPrevFile(): Promise<void>`
- `closeFileViewer(): void`
- `requestRename(itemId: string, currentName: string, path: string, source?: "list" | "tree"): void`
- `confirmRename(newName: string): Promise<void>`
- `cancelRename(): void`
- `requestDelete(targets: Array<{ path: string; isDirectory: boolean; name: string; }>): void`
- `confirmDelete(): Promise<void>`
- `cancelDelete(): void`
- `requestCreate(parentPath: string, type: "file" | "folder"): void`
- `confirmCreate(name: string): Promise<void>`
- `cancelCreate(): void`

### SelectionManagerModel

```ts
class SelectionManagerModel
```

- `selectedItems: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, boolean>`
- `lastSelectedIndex: number`
- `focusedItem: FileBrowserItem`
- `isUpdatingFromPanels: boolean`
- `constructor(owner: SelectionOwner): SelectionManagerModel`
- `isSelected: (itemId: string) => boolean`
- `selectItem: (itemId: string, multiSelect?: boolean) => void`
- `deselectItem: (itemId: string) => void`
- `toggleSelection: (itemId: string, multiSelect?: boolean) => void`
- `selectRange: (startItemId: string, endItemId: string, allItems: FileBrowserItem[]) => void`
- `selectAll: (items: FileBrowserItem[]) => void`
- `clearSelection: () => void`
- `invertSelection: (allItems: FileBrowserItem[]) => void`
- `getSelectedItems: (allItems: FileBrowserItem[]) => FileBrowserItem[]`
- `setFocusedItem: (item: FileBrowserItem | null) => void`
- `selectFromTreePanel: (item: FileBrowserItem) => void`
- `selectFromRightPanel: (item: FileBrowserItem) => void`
- `selectFromNavigation: (path: string, allItems: FileBrowserItem[]) => void`
- `dispose: () => void`

### NavigationManagerModel

```ts
class NavigationManagerModel
```

- `history: string[]`
- `historyIndex: number`
- `isUpdatingFromPanels: boolean`
- `constructor(owner: NavigationOwner): NavigationManagerModel`
- `addToHistory: (path: string) => void`
- `goBack: () => string | null`
- `goForward: () => string | null`
- `goToParent: (currentPath: string) => string | null`
- `clearHistory: () => void`
- `setCurrentPath: (path: string) => void`
- `navigateTo: (path: string) => void`
- `normalizePath: (path: string) => string`
- `getParentPath: (path: string) => string | null`
- `getPathSegments: (path: string) => string[]`
- `joinPaths: (...paths: string[]) => string`
- `navigateFromTreePanel: (path: string) => void`
- `navigateFromRightPanel: (path: string) => void`
- `navigateFromBreadcrumb: (path: string) => void`
- `navigateToWithCoordination: (path: string, source?: "tree" | "right" | "breadcrumb" | "history") => void`
- `setSelectionManager: (selectionManager: any) => void`
- `dispose: () => void`

### ToolbarManagerModel

```ts
class ToolbarManagerModel
```

- `toolbarActions: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, ToolbarAction>`
- `contextActions: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, ContextAction>`
- `constructor(owner: ToolbarOwner): ToolbarManagerModel`
- `addAction: (action: ToolbarAction) => void`
- `removeAction: (actionId: string) => void`
- `updateAction: (actionId: string, updates: Partial<ToolbarAction>) => void`
- `addContextAction: (action: ContextAction) => void`
- `removeContextAction: (actionId: string) => void`
- `getAvailableActions: (context: ActionContext) => ToolbarAction[]`
- `getContextActionsForItem: (context: ActionContext) => ContextAction[]`
- `canExecuteAction: (actionId: string, context: ActionContext) => boolean`
- `getActionById: (actionId: string) => ToolbarAction | undefined`
- `getContextActionById: (actionId: string) => ContextAction | undefined`
- `setActions: (actions: ToolbarAction[]) => void`
- `setContextActions: (actions: ContextAction[]) => void`
- `clearAllActions: () => void`

### ViewModeManagerModel

```ts
class ViewModeManagerModel
```

- `availableViewModes: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, ViewModeDefinition>`
- `currentViewMode: string`
- `currentFilters: FilterCriteria`
- `currentSortCriteria: SortCriteria`
- `treeViewUI: TreeViewUIModel`
- `listViewUI: ListViewUIModel`
- `thumbnailViewUI: ThumbnailViewUIModel`
- `treemapViewUI: TreemapViewUIModel`
- `constructor(owner: any): ViewModeManagerModel`
- `setCurrentViewMode: (viewModeId: string) => void`
- `registerViewMode: (definition: ViewModeDefinition) => void`
- `unregisterViewMode: (viewModeId: string) => void`
- `setFilter: (key: keyof FilterCriteria, value: any) => void`
- `clearFilters: () => void`
- `setSortCriteria: (field: string, direction: "asc" | "desc") => void`
- `clearSort: () => void`
- `toggleSortDirection: () => void`
- `supportsCapability: (capability: string) => boolean`
- `dispose(): void`

### TreeViewUIModel

```ts
class TreeViewUIModel
```

- `expandedFolders: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, boolean>`
- `indentSize: number`
- `showConnectors: boolean`
- `expandOnSingleClick: boolean`
- `collapseOnSecondClick: boolean`
- `rememberExpansion: boolean`
- `settings: TreeViewSettings`
- `constructor(owner: any): TreeViewUIModel`
- `expandFolder: (path: string) => void`
- `collapseFolder: (path: string) => void`
- `toggleFolder: (path: string) => void`
- `isFolderExpanded: (path: string) => boolean`
- `hasChildren: (item: FileBrowserItem) => boolean`
- `sortTreeNodes: (nodes: FileBrowserItem[]) => FileBrowserItem[]`
- `expandAll: () => void`
- `collapseAll: () => void`
- `updateSettings: (newSettings: Partial<TreeViewSettings>) => void`
- `dispose(): void`

### ListViewUIModel

```ts
class ListViewUIModel
```

- `columns: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, ColumnDefinition>`
- `columnOrder: string[]`
- `currentSort: SortCriteria`
- `settings: ListViewSettings`
- `showHeader: boolean`
- `striped: boolean`
- `compact: boolean`
- `hoverable: boolean`
- `constructor(owner: ListViewOwner): ListViewUIModel`
- `addColumn: (column: ColumnDefinition) => void`
- `removeColumn: (columnId: string) => void`
- `updateColumn: (columnId: string, updates: Partial<ColumnDefinition>) => void`
- `resizeColumn: (columnId: string, width: number) => void`
- `reorderColumns: (fromIndex: number, toIndex: number) => void`
- `showColumn: (columnId: string) => void`
- `hideColumn: (columnId: string) => void`
- `toggleColumnVisibility: (columnId: string) => void`
- `setSortCriteria: (field: string, direction: "asc" | "desc") => void`
- `toggleSort: (field: string) => void`
- `clearSort: () => void`
- `updateSettings: (newSettings: Partial<ListViewSettings>) => void`
- `resetToDefaults: () => void`
- `saveColumnLayout: (name: string) => void`
- `loadColumnLayout: (name: string) => void`
- `dispose(): void`

### ThumbnailViewUIModel

```ts
class ThumbnailViewUIModel
```

- `thumbnailSize: number`
- `gridSpacing: number`
- `aspectRatio: number`
- `showFilenames: boolean`
- `showFileSize: boolean`
- `showDate: boolean`
- `loadThumbnails: boolean`
- `thumbnailQuality: "low" | "medium" | "high"`
- `columnsPerRow: number | "auto"`
- `settings: ThumbnailViewSettings`
- `loadingThumbnails: Set<string>`
- `failedThumbnails: Set<string>`
- `constructor(owner: ThumbnailOwner): ThumbnailViewUIModel`
- `setThumbnailSize: (size: number) => void`
- `setGridSpacing: (spacing: number) => void`
- `setAspectRatio: (ratio: number) => void`
- `setColumnsPerRow: (columns: number | "auto") => void`
- `toggleShowFilenames: () => void`
- `toggleShowFileSize: () => void`
- `toggleShowDate: () => void`
- `setThumbnailQuality: (quality: "low" | "medium" | "high") => void`
- `setThumbnailLoading: (itemId: string, loading: boolean) => void`
- `setThumbnailFailed: (itemId: string) => void`
- `setThumbnailSuccess: (itemId: string) => void`
- `isThumbnailLoading: (itemId: string) => boolean`
- `isThumbnailFailed: (itemId: string) => boolean`
- `clearThumbnailStates: () => void`
- `calculateGridLayout: (containerWidth: number) => { columns: number; itemsPerRow: number; }`
- `updateSettings: (newSettings: Partial<ThumbnailViewSettings>) => void`
- `applyPreset: (preset: "compact" | "balanced" | "detailed") => void`
- `resetToDefaults: () => void`
- `dispose(): void`

### ErrorBoundary

```ts
class ErrorBoundary
```

- `constructor(props: ErrorBoundaryProps): ErrorBoundary`
- `getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>`
- `componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void`
- `handleReset: () => void`
- `render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/@types+react@19.2.14/node_modules/@types/react/jsx-runtime").JSX.Element`

### FileSystemProvider

```ts
class FileSystemProvider
```

- `id: "filesystem"`
- `name: "File System Provider"`
- `version: "1.0.0"`
- `constructor(fileSystem: IFileSystem, cacheOptions?: Partial<CacheOptions>): FileSystemProvider`
- `loadItems(path: string): Promise<FileBrowserItem[]>`
- `normalizePath(path: string): string`
- `getParentPath(path: string): string | null`
- `resolvePath(basePath: string, relativePath: string): string`
- `getItemIcon(item: FileBrowserItem): IconDefinition`
- `getItemDisplayName(item: FileBrowserItem): string`
- `getItemPreview(item: FileBrowserItem): Promise<PreviewData | null>`
- `canPerformAction(action: string, items: FileBrowserItem[]): boolean`
- `performAction(action: string, items: FileBrowserItem[]): Promise<any>`
- `initialize(): Promise<void>`
- `dispose(): void`
- `clearCache(): void`
- `getCacheStats(): { size: number; maxSize: number; hitRate?: number; }`
- `getLeftPanelModes(): LeftPanelMode[]`
- `getRightPanelViewModes(): ViewModeDefinition[]`

### GitRepositoryProvider

```ts
class GitRepositoryProvider
```

- `id: "git-repository"`
- `name: "Git Repository Provider"`
- `version: "1.0.0"`
- `constructor(options: GitRepositoryOptions): GitRepositoryProvider`
- `loadItems(path: string): Promise<FileBrowserItem[]>`
- `normalizePath(path: string): string`
- `getParentPath(path: string): string | null`
- `resolvePath(basePath: string, relativePath: string): string`
- `getItemIcon(item: FileBrowserItem): IconDefinition`
- `getItemDisplayName(item: FileBrowserItem): string`
- `getItemPreview(item: FileBrowserItem): Promise<PreviewData | null>`
- `canPerformAction(action: string, items: FileBrowserItem[]): boolean`
- `performAction(action: string, items: FileBrowserItem[]): Promise<any>`
- `initialize(): Promise<void>`
- `dispose(): void`
- `getCurrentBranch(): Promise<string>`
- `getBranches(): Promise<string[]>`
- `switchBranch(branch: string): Promise<void>`
- `getCommitHistory(path?: string, limit?: number): Promise<any[]>`

### GitProvider

```ts
class GitProvider
```

- `id: "git"`
- `name: "Git Provider"`
- `version: "1.0.0"`
- `constructor(repository: GitRepositoryModel | GitWrapperIntegration): GitProvider`
- `loadItems(path: string): Promise<FileBrowserItem[]>`
- `getLeftPanelModes(): LeftPanelMode[]`
- `getRightPanelViewModes(): ViewModeDefinition[]`
- `normalizePath(path: string): string`
- `getParentPath(path: string): string | null`
- `resolvePath(basePath: string, relativePath: string): string`
- `getItemIcon(item: FileBrowserItem): IconDefinition`
- `getItemDisplayName(item: FileBrowserItem): string`
- `canPreviewFile(item: FileBrowserItem): boolean`
- `getFilePreview(item: FileBrowserItem): Promise<PreviewData>`
- `getItemPreview(item: FileBrowserItem): Promise<PreviewData | null>`
- `canPerformAction(action: string, items: FileBrowserItem[]): boolean`
- `performAction(action: string, items: FileBrowserItem[]): Promise<any>`
- `initialize(): Promise<void>`
- `dispose(): void`

### TreeModel

```ts
class TreeModel
```

- `nodes: TreeNodeData[]`
- `nodeMap: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, TreeNodeData>`
- `isLoading: boolean`
- `errors: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, Error>`
- `selectedNodes: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, TreeNodeData>`
- `focusedNode: string`
- `checkboxStates: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, CheckboxState>`
- `expandedNodes: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, boolean>`
- `loadingNodes: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, boolean>`
- `contextMenuVisible: boolean`
- `contextMenuPosition: { x: number; y: number; }`
- `contextMenuItems: TreeContextMenuItem[]`
- `contextMenuNodes: TreeNodeData[]`
- `constructor(provider: TreeProvider): TreeModel`
- `isNodeSelected(nodeId: string): boolean` — Check if a specific node is selected
- `isNodeExpanded(nodeId: string): boolean` — Check if a specific node is expanded
- `isNodeLoading(nodeId: string): boolean` — Check if a specific node is loading
- `loadNodes: (options?: TreeLoadOptions) => import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").CancellablePromise<void>` — Load nodes from the provider
Uses MobX flow for proper async action handling
- `selectNode(node: TreeNodeData): void` — Select a specific node
- `deselectNode(node: TreeNodeData): void` — Deselect a specific node
- `clearSelection(): void` — Clear all selected nodes
- `selectAll(): void` — Select all nodes (only if multi-select is enabled)
- `getCheckboxState(nodeId: string): CheckboxState` — Get checkbox state for a specific node
- `handleCheckboxChange(node: TreeNodeData, newState: CheckboxState): void` — Handle checkbox click for a node
- `setFocus(nodeId: string): void` — Set focus to a specific node
- `focusNext(): boolean` — Move focus to next visible node
- `focusPrevious(): boolean` — Move focus to previous visible node
- `focusFirst(): boolean` — Move focus to first visible node
- `focusLast(): boolean` — Move focus to last visible node
- `expandNode: (node: TreeNodeData) => import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").CancellablePromise<void>` — Expand a specific node
- `collapseNode(node: TreeNodeData): void` — Collapse a specific node
- `toggleExpansion(node: TreeNodeData): void` — Toggle expansion state of a specific node
- `showContextMenu(node: TreeNodeData, event: MouseEvent): void` — Show context menu for a specific node
- `showMultiNodeContextMenu(nodes: TreeNodeData[], event: MouseEvent): void` — Show context menu for multiple selected nodes
- `hideContextMenu(): void` — Hide context menu
- `handleContextMenuAction(menuItem: TreeContextMenuItem): void` — Handle context menu item click

### TestTreeProvider

```ts
class TestTreeProvider
```

- `id: "test-tree-provider"`
- `name: "Test Tree Provider"`
- `version: "1.0.0"`
- `isMultiSelectEnabled: boolean`
- `isDragDropEnabled: false`
- `isVirtualizationEnabled: false`
- `isTableViewEnabled: true`
- `useCheckboxSelection: boolean`
- `allowPartialSelection: true`
- `config: {}`
- `selectionTheme: TreeSelectionTheme`
- `slowLoading: boolean`
- `simulateErrors: boolean`
- `maxDepth: number`
- `nodesPerLevel: number`
- `loadingDelay: number`
- `onSelectionChange: (selectionInfo: TreeSelectionInfo) => void`
- `onNodeExpansion: (node: TreeNodeData, isExpanded: boolean) => void`
- `onNodeFocus: (node: TreeNodeData | null) => void`
- `constructor(): TestTreeProvider`
- `updateSelectionTheme: (theme: Partial<TreeSelectionTheme>) => void` — Update selection theme reactively
- `setMultiSelectEnabled: (enabled: boolean) => void` — Update multi-select setting
- `setCheckboxSelection: (enabled: boolean) => void` — Update checkbox selection setting
- `getSelectionTheme(): TreeSelectionTheme` — Get selection theme configuration
- `loadNodes(options?: TreeLoadOptions): Promise<TreeLoadResult>` — Load tree nodes
- `loadChildren(node: TreeNodeData, options?: TreeLoadOptions): Promise<TreeLoadResult>` — Load child nodes for a given parent
- `refresh(path?: string): Promise<TreeLoadResult>` — Refresh tree data
- `canExpand(node: TreeNodeData): boolean`
- `canSelect(node: TreeNodeData): boolean`
- `getNodeContextMenu(node: TreeNodeData): TreeContextMenuItem[]`
- `getMultiNodeContextMenu(nodes: TreeNodeData[]): TreeContextMenuItem[]`
- `onContextMenuAction(menuItemId: string, nodes: TreeNodeData[]): void`
- `getTableColumns(): TreeTableColumn[]`
- `getDefaultTableSort(): TreeTableSort`
- `onTableSort(sort: TreeTableSort | null): void`
- `onTableExport(options: TreeTableExportOptions): Promise<string | void>`
- `getNodeIcon(node: TreeNodeData): string | React.ComponentType<any>` — Get custom icon for a node based on file type and category

### SimpleTreeProvider

```ts
class SimpleTreeProvider
```

- `id: "simple-tree-provider"`
- `name: "Simple Tree Provider"`
- `version: "1.0.0"`
- `isMultiSelectEnabled: boolean`
- `isDragDropEnabled: false`
- `isVirtualizationEnabled: false`
- `isTableViewEnabled: false`
- `useCheckboxSelection: boolean`
- `allowPartialSelection: true`
- `config: {}`
- `selectionTheme: TreeSelectionTheme`
- `onSelectionChange: (selectionInfo: TreeSelectionInfo) => void`
- `onNodeExpansion: (node: TreeNodeData, isExpanded: boolean) => void`
- `onNodeFocus: (node: TreeNodeData | null) => void`
- `onContextMenuAction: (actionId: string, nodes: TreeNodeData[]) => void`
- `constructor(options?: SimpleTreeProviderOptions): SimpleTreeProvider`
- `loadNodes(options?: TreeLoadOptions): Promise<TreeLoadResult>` — Load root nodes
- `loadChildren(node: TreeNodeData, options?: TreeLoadOptions): Promise<TreeLoadResult>` — Load children for a specific node
- `refresh(path?: string): Promise<TreeLoadResult>` — Refresh/reload nodes
- `getNodeContextMenu(node: TreeNodeData): TreeContextMenuItem[]` — Get context menu for a single node
- `getMultiNodeContextMenu(nodes: TreeNodeData[]): TreeContextMenuItem[]` — Get context menu for multiple selected nodes
- `getSelectionTheme(): TreeSelectionTheme` — Get selection theme configuration
- `setData(data: TreeNodeData[]): void` — Update the static data
- `getData(): TreeNodeData[]` — Get current data
- `addNode(parentPath: string | null, newNode: TreeNodeData): boolean` — Add a new node to the tree
- `removeNode(nodePath: string): boolean` — Remove a node from the tree
- `findNodeByPath(path: string): TreeNodeData | null` — Find a node by its path
- `updateSelectionTheme: (theme: Partial<TreeSelectionTheme>) => void` — Update selection theme reactively
- `setMultiSelectEnabled: (enabled: boolean) => void` — Update multi-select setting
- `setCheckboxSelection: (enabled: boolean) => void` — Update checkbox selection setting

### ListErrorBoundary

```ts
class ListErrorBoundary
```

- `constructor(props: ErrorBoundaryProps): ListErrorBoundary`
- `getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>`
- `componentDidCatch(error: Error, errorInfo: ErrorInfo): void`
- `handleRetry: () => void`
- `render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/@types+react@19.2.14/node_modules/@types/react/jsx-runtime").JSX.Element`

### FocusManager

```ts
class FocusManager
```

- `saveFocus(): void`
- `restoreFocus(): boolean`
- `focusFirst(container: HTMLElement): boolean`
- `focusLast(container: HTMLElement): boolean`

### ListItemsModel

```ts
class ListItemsModel
```

- `currentViewType: ListViewType`
- `items: ListItemData[]`
- `itemMap: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, ListItemData>`
- `totalItemCount: number`
- `selectedItems: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, ListItemData>`
- `previousSelection: ListItemData[]`
- `focusedItem: string`
- `selectionAnchor: string`
- `isLoading: boolean`
- `loadingRanges: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, boolean>`
- `errors: import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").ObservableMap<string, Error>`
- `viewportRange: { start: number; end: number; }`
- `scrollPosition: number`
- `containerSize: { width: number; height: number; }`
- `isDragging: boolean`
- `draggedItems: ListItemData[]`
- `dragOverItem: string`
- `dragOverPosition: "before" | "after" | "inside"`
- `itemSize: "medium" | "small" | "large" | "extra-large"`
- `customItemWidth: number`
- `customItemHeight: number`
- `itemsPerRow: number | "auto"`
- `debugVisualization: boolean`
- `constructor(provider: ListItemsProvider): ListItemsModel`
- `onItemsCountChanged(count: number): void`
- `onItemChanged(itemIndex: number): void`
- `loadItems: (options?: ListLoadOptions) => import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").CancellablePromise<void>` — Load items from the provider
Uses MobX flow for proper async action handling
- `loadItemRange: (start: number, end: number) => import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").CancellablePromise<void>` — Load a specific range of items for virtualization
- `refresh: () => import("/home/andrew/gits/github/AnyFileSystem/AnyFsMnoorepo-sf-phase3-npmf/node_modules/.pnpm/mobx@6.15.0/node_modules/mobx/dist/internal").CancellablePromise<void>` — Refresh items from provider
- `selectItem(item: ListItemData, modifiers?: { ctrl?: boolean; shift?: boolean; }): void` — Select a single item with proper single/multi-selection logic
- `selectRange(fromId: string, toId: string): void` — Select a contiguous range of items between two item IDs
- `clearSelection(): void` — Clear all selection
- `selectAll(): void` — Select all items (if multi-select enabled)
- `setViewType(viewType: ListViewType): void` — Set the current view type
- `setItemSize(size: "small" | "medium" | "large" | "extra-large"): void` — Set item size for grid and masonry views
- `setCustomItemWidth(width: number): void` — Set custom item width and update calculators
- `setCustomItemHeight(height: number): void` — Set custom item height and update calculators
- `setItemsPerRow(itemsPerRow: number | "auto"): void` — Set items per row for grid and masonry views
- `setDebugVisualization(enabled: boolean): void` — Set debug visualization mode
- `getEffectiveItemsPerRow(containerWidth?: number): number` — Get effective items per row based on view and container width
- `setFocusedItem(itemId: string | null): void` — Set focused item
- `focusNext(): boolean` — Focus next item
- `focusPrevious(): boolean` — Focus previous item
- `canDragItem(item: ListItemData): boolean` — Check if an item can be dragged
- `canDropItems(draggedItems: ListItemData[], targetItem: ListItemData | null, position: "before" | "after" | "inside"): boolean` — Check if items can be dropped on a target
- `startDrag(items: ListItemData[], event: DragEvent): void` — Start drag operation
- `setDragOver(itemId: string | null, position: "before" | "after" | "inside" | null): void` — Handle drag over item
- `handleDrop(targetItem: ListItemData | null, position: "before" | "after" | "inside", event: DragEvent): boolean` — Handle drop operation
- `endDrag(success: boolean): void` — End drag operation
- `updateViewportRange(start: number, end: number): void` — Update viewport range for virtualization and trigger dynamic loading
- `updateScrollPosition(position: number): void` — Update scroll position
- `updateContainerSize(width: number, height: number): void` — Update container size
- `getGridLayout(): { layout: GridItemLayout[]; totalHeight: number; } | null` — Get grid layout for current items
- `getVerticalMasonryLayout(): { layout: MasonryItemPosition[]; totalHeight: number; } | null` — Get vertical masonry layout for current items
- `getHorizontalMasonryLayout(): { layout: MasonryItemPosition[]; totalHeight: number; } | null` — Get horizontal masonry layout for current items
- `getVisibleGridItems(scrollTop: number, viewportHeight: number): GridItemLayout[]` — Get visible items for virtualization
- `getVisibleVerticalMasonryItems(scrollTop: number, viewportHeight: number): MasonryItemPosition[]` — Get visible vertical masonry items for virtualization
- `getVisibleHorizontalMasonryItems(scrollTop: number, viewportHeight: number): MasonryItemPosition[]` — Get visible horizontal masonry items for virtualization
- `getVisibleMasonryItems(scrollTop: number, viewportHeight: number, isHorizontal?: boolean, overscan?: number): MasonryItemPosition[]` — Get visible masonry items for virtualization (unified method)
- `ensureItemVisible(itemId: string): boolean` — Ensure item is visible (scroll to item)
- `getItem(itemId: string): ListItemData | undefined` — Get item by ID
- `getItemIndex(itemId: string): number` — Get item index

### TestListProvider

```ts
class TestListProvider
```

- `id: "test-list-provider"`
- `name: "Test List Provider"`
- `isMultiSelectEnabled: true`
- `isVirtualizationEnabled: true`
- `isDragDropEnabled: true`
- `supportedViewTypes: ListViewType[]`
- `constructor(): TestListProvider`
- `getItemIcon(item: ListItemData): string | React.ComponentType<any>` — Get custom icon for an item based on file type and extension
- `loadItems(options?: ListLoadOptions): Promise<ListLoadResult>`
- `getItemCount(): Promise<number>`
- `loadItemRange(start: number, end: number): Promise<ListLoadResult>`
- `refresh(): Promise<ListLoadResult>`
- `getItemHeight(viewType: ListViewType): number`
- `getItemWidth(viewType: ListViewType): number`
- `getVirtualizationConfig(): VirtualizationConfig`
- `onSelectionChange(selectionInfo: ListSelectionInfo): void`
- `onViewTypeChange(viewType: ListViewType): void`
- `onItemDoubleClick(item: ListItemData): void`
- `getItemContextMenu(item: ListItemData): ListContextMenuItem[]`
- `getMultiItemContextMenu(items: ListItemData[]): ListContextMenuItem[]`
- `onContextMenuAction(menuItemId: string, items: ListItemData[]): void`
- `canDragItem(item: ListItemData): boolean`
- `canDropItems(draggedItems: ListItemData[], targetItem: ListItemData | null, position: "before" | "after" | "inside"): boolean`
- `onDragStart(draggedItems: ListItemData[], event: DragEvent): void`
- `onDrop(dragDropInfo: ListDragDropInfo): void`
- `onDragEnd(draggedItems: ListItemData[], success: boolean): void`
- `addListener(listener: ListItemsProviderListener): void`
- `removeListener(listener: ListItemsProviderListener): void`
- `addMockItem(item: Partial<ListItemData>): void` — Add a new mock item (useful for testing dynamic updates)
- `removeMockItem(itemId: string): void` — Remove an item by ID (useful for testing dynamic updates)
- `updateMockItem(itemId: string, updates: Partial<ListItemData>): void` — Update an existing item (useful for testing dynamic updates)

### GridLayoutCalculator

```ts
class GridLayoutCalculator
```

- `constructor(config: GridLayoutConfig): GridLayoutCalculator`
- `updateConfig(updates: Partial<GridLayoutConfig>): void`
- `calculateItemsPerRow(): number`
- `calculateItemDimensions(itemsPerRow: number): { width: number; height: number; }`
- `calculateThumbnailSize(itemWidth: number, itemHeight: number): number`
- `calculateLayout(totalItems: number): GridLayoutResult`
- `calculateVisibleItems(totalItems: number, scrollTop: number, viewportHeight: number, overscan?: number): { startIndex: number; endIndex: number; visibleItems: GridItemLayout[]; }`
- `getItemPosition(itemIndex: number, totalItems: number): GridItemLayout | null`
- `getItemAtPosition(x: number, y: number, totalItems: number): number | null`

### MasonryLayoutCalculator

```ts
class MasonryLayoutCalculator
```

- `constructor(config: MasonryLayoutConfig): MasonryLayoutCalculator`
- `updateConfig(updates: Partial<MasonryLayoutConfig>): void`
- `calculateColumnCount(): number`
- `calculateColumnWidth(columnCount: number): number`
- `calculateItemHeight(item: MasonryItemData, columnWidth: number, baseHeight?: number): number`
- `calculateThumbnailDimensions(item: MasonryItemData, columnWidth: number, itemHeight: number): { width: number; height: number; }`
- `calculateLayout(items: MasonryItemData[]): MasonryLayoutResult`
- `calculateVisibleItems(items: MasonryItemData[], scrollTop: number, viewportHeight: number, overscan?: number): { startIndex: number; endIndex: number; visibleItems: MasonryItemLayout[]; }`
- `getItemPosition(itemIndex: number, items: MasonryItemData[]): MasonryItemLayout | null`
- `getItemAtPosition(x: number, y: number, items: MasonryItemData[]): number | null`

## Functions

### resolveIcon

```ts
resolveIcon(name: string, className?: string): React.ReactElement
```

### getIconForExtension

```ts
getIconForExtension(filename: string): string
```

### getIconForFile

```ts
getIconForFile(filename: string, isDirectory: boolean): string
```

### cn

```ts
cn(...inputs: ClassValue[]): string
```

### getCustomColorVariables

Generate CSS custom properties for custom color schemes
NOTE: This function is now simplified since we handle custom colors with inline styles

```ts
getCustomColorVariables(theme: TreeSelectionTheme): Record<string, string>
```

### getSelectionClasses

Generate complete selection classes for a tree node

```ts
getSelectionClasses(theme: TreeSelectionTheme, isSelected: boolean, isFocused: boolean, useCheckboxes?: boolean): string
```

### getListAccessibilityProps

```ts
getListAccessibilityProps(config: { viewType: string; isMultiSelect: boolean; totalItems: number; selectedCount: number; label?: string; labelledBy?: string; describedBy?: string; }): AccessibilityConfig
```

### getItemAccessibilityProps

```ts
getItemAccessibilityProps(config: { item: any; index: number; totalItems: number; isSelected: boolean; isFocused: boolean; viewType: string; isExpandable?: boolean; isExpanded?: boolean; level?: number; }): ItemAccessibilityConfig
```

### createLiveRegionAnnouncement

```ts
createLiveRegionAnnouncement(config: { action: "select" | "deselect" | "focus" | "activate" | "load" | "error"; itemName?: string; itemCount?: number; selectedCount?: number; totalCount?: number; errorMessage?: string; }): string
```

### getNextFocusIndex

```ts
getNextFocusIndex(key: string, config: KeyboardNavigationConfig): number | null
```

### announceToScreenReader

```ts
announceToScreenReader(message: string, priority?: "polite" | "assertive"): void
```

### createGridCalculator

```ts
createGridCalculator(containerWidth: number, containerHeight: number, options?: Partial<GridLayoutConfig>): GridLayoutCalculator
```

### createMasonryCalculator

```ts
createMasonryCalculator(containerWidth: number, containerHeight: number, options?: Partial<MasonryLayoutConfig>): MasonryLayoutCalculator
```

## Types

### LoadingState

```ts
type LoadingState = 'idle' | 'loading' | 'success' | 'error'
```

### CheckboxState

```ts
type CheckboxState = 'unchecked' | 'checked' | 'indeterminate'
```

### SelectionColorScheme

Selection theme color scheme

```ts
type SelectionColorScheme = 'primary' | 'secondary' | 'accent' | 'custom'
```

### SelectionIntensity

Selection intensity levels

```ts
type SelectionIntensity = 'subtle' | 'prominent' | 'high-contrast'
```

### FocusIndicatorStyle

Focus indicator style

```ts
type FocusIndicatorStyle = 'ring' | 'outline' | 'border' | 'underline'
```

### ViewModeType

```ts
type ViewModeType = 'tree' | 'list' | 'thumbnail' | 'treemap' | 'custom'
```

## Interfaces

### FileBrowserProps

```ts
interface FileBrowserProps
```

- `provider: any`
- `initialPath: string`
- `initialViewMode: string`
- `eventHandlers: FileBrowserEventHandlers`
- `className: string`
- `style: React.CSSProperties`
- `showToolbar: boolean`
- `showBreadcrumb: boolean`
- `showStatusBar: boolean`
- `allowMultiSelect: boolean`
- `availableViewModes: string[]`
- `defaultViewMode: string`
- `theme: "light" | "dark" | "auto"`
- `density: "compact" | "normal" | "comfortable"`

### FileBrowserItem

```ts
interface FileBrowserItem
```

- `id: string`
- `name: string`
- `path: string`
- `type: "file" | "directory"`
- `size: number`
- `lastModified: Date`
- `permissions: string`
- `metadata: Record<string, any>`
- `children: FileBrowserItem[]`
- `isLoading: boolean`
- `hasChildren: boolean`

### FileBrowserItemDetails

```ts
interface FileBrowserItemDetails
```

- `content: string | Uint8Array<ArrayBufferLike>`
- `preview: PreviewData`
- `properties: Record<string, any>`

### FileBrowserEventHandlers

```ts
interface FileBrowserEventHandlers
```

- `onPathChange: (path: string) => void`
- `onItemSelect: (item: FileBrowserItem) => void`
- `onItemActivate: (item: FileBrowserItem) => void`
- `onSelectionChange: (selectedItems: FileBrowserItem[]) => void`
- `onError: (error: ErrorState) => void`
- `onLoadingChange: (isLoading: boolean) => void`

### ErrorState

```ts
interface ErrorState
```

- `message: string`
- `code: string`
- `details: any`
- `timestamp: Date`

### FilterCriteria

```ts
interface FilterCriteria
```

- `searchText: string`
- `fileTypes: string[]`
- `dateRange: { start: Date; end: Date; }`
- `sizeRange: { min: number; max: number; }`
- `customFilters: Record<string, any>`

### SortCriteria

```ts
interface SortCriteria
```

- `field: string`
- `direction: "asc" | "desc"`

### NavigationState

```ts
interface NavigationState
```

- `currentPath: string`
- `history: string[]`
- `historyIndex: number`
- `canGoBack: boolean`
- `canGoForward: boolean`

### SelectionState

```ts
interface SelectionState
```

- `selectedItems: Set<string>`
- `lastSelectedIndex: number`
- `focusedItemId: string`
- `selectionMode: "single" | "multiple"`

### IconDefinition

```ts
interface IconDefinition
```

- `type: "lucide" | "custom"`
- `name: string`
- `component: React.ComponentType<any>`
- `color: string`
- `size: number`

### PreviewData

```ts
interface PreviewData
```

- `type: "image" | "text" | "video" | "audio" | "document"`
- `url: string`
- `content: string`
- `thumbnail: string`
- `metadata: Record<string, any>`

### ItemChange

```ts
interface ItemChange
```

- `type: "added" | "removed" | "modified" | "moved"`
- `item: FileBrowserItem`
- `oldPath: string`
- `newPath: string`

### ColumnDefinition

```ts
interface ColumnDefinition
```

- `id: string`
- `label: string`
- `field: string`
- `width: number`
- `minWidth: number`
- `maxWidth: number`
- `resizable: boolean`
- `sortable: boolean`
- `visible: boolean`
- `align: "right" | "left" | "center"`
- `format: (value: any) => string`

### LoadingSpinnerProps

```ts
interface LoadingSpinnerProps
```

- `size: "sm" | "md" | "lg"`
- `overlay: boolean`
- `className: string`
- `'aria-label': string`

### ErrorBoundaryProps

```ts
interface ErrorBoundaryProps
```

- `children: React.ReactNode`
- `fallback: (error: Error, errorInfo: string, onReset: () => void) => ReactNode`
- `onError: (error: Error, errorInfo: string) => void`
- `className: string`

### FileIconProps

```ts
interface FileIconProps
```

- `item: FileBrowserItem`
- `getItemIcon: (item: FileBrowserItem) => IconDefinition`
- `size: "sm" | "md" | "lg" | "xl"`
- `className: string`
- `isExpanded: boolean`

### FileBrowserHeaderProps

```ts
interface FileBrowserHeaderProps
```

- `model: FileBrowserModel`
- `toolbarManager: ToolbarManagerModel`
- `className: string`
- `showBreadcrumb: boolean`
- `showToolbar: boolean`

### FileBrowserContentProps

```ts
interface FileBrowserContentProps
```

- `model: FileBrowserModel`
- `className: string`
- `currentViewMode: string`

### TreeViewProps

```ts
interface TreeViewProps
```

- `items: FileBrowserItem[]`
- `treeModel: TreeViewUIModel`
- `onItemClick: (item: FileBrowserItem) => void`
- `onItemDoubleClick: (item: FileBrowserItem) => void`
- `onItemActivate: (item: FileBrowserItem) => void`
- `onSelectionChange: (selectedItems: FileBrowserItem[]) => void`
- `onPathChange: (path: string) => void`
- `selectedItemIds: Set<string>`
- `focusedItemId: string`
- `className: string`
- `getItemIcon: (item: FileBrowserItem) => any`
- `loadFolder: (path: string) => Promise<FileBrowserItem[]>`
- `virtualization: boolean`
- `maxHeight: number`

### TreeNodeProps

```ts
interface TreeNodeProps
```

- `item: FileBrowserItem`
- `treeModel: TreeViewUIModel`
- `level: number`
- `onItemClick: (item: FileBrowserItem) => void`
- `onItemDoubleClick: (item: FileBrowserItem) => void`
- `isSelected: boolean`
- `isFocused: boolean`
- `getItemIcon: (item: FileBrowserItem) => any`

### TreeNodeListProps

```ts
interface TreeNodeListProps
```

- `items: FileBrowserItem[]`
- `treeModel: TreeViewUIModel`
- `onItemClick: (item: FileBrowserItem) => void`
- `onItemDoubleClick: (item: FileBrowserItem) => void`
- `onSelectionChange: (selectedItems: FileBrowserItem[]) => void`
- `selectedItemIds: Set<string>`
- `focusedItemId: string`
- `className: string`
- `getItemIcon: (item: FileBrowserItem) => any`
- `virtualization: boolean`
- `maxHeight: number`

### ListViewProps

```ts
interface ListViewProps
```

- `items: FileBrowserItem[]`
- `listModel: ListViewUIModel`
- `responsiveManager: ResponsiveLayoutManagerModel`
- `onItemClick: (item: FileBrowserItem) => void`
- `onItemDoubleClick: (item: FileBrowserItem) => void`
- `onItemActivate: (item: FileBrowserItem) => void`
- `onSelectionChange: (selectedItems: FileBrowserItem[]) => void`
- `selectedItemIds: Set<string>`
- `focusedItemId: string`
- `className: string`
- `getItemIcon: (item: FileBrowserItem) => any`

### BreadcrumbProps

```ts
interface BreadcrumbProps
```

- `path: string`
- `onPathChange: (path: string) => void`
- `className: string`
- `maxSegments: number`
- `separator: React.ReactNode`
- `showRoot: boolean`
- `rootLabel: string`

### NavigationButtonsProps

```ts
interface NavigationButtonsProps
```

- `canGoBack: boolean`
- `canGoForward: boolean`
- `canGoUp: boolean`
- `onGoBack: () => void`
- `onGoForward: () => void`
- `onGoUp: () => void`
- `className: string`
- `variant: "compact" | "default"`
- `showLabels: boolean`
- `disabled: boolean`

### ViewModeToggleProps

```ts
interface ViewModeToggleProps
```

- `currentMode: ViewModeType`
- `availableModes: ViewModeType[]`
- `onModeChange: (mode: ViewModeType) => void`
- `className: string`
- `variant: "tabs" | "buttons"`
- `showLabels: boolean`
- `disabled: boolean`

### TreeProvider

```ts
interface TreeProvider
```

- `id: string` — Provider identifier
- `name: string` — Human-readable name
- `version: string` — Provider version
- `isMultiSelectEnabled: boolean` — Whether multi-selection is enabled
- `isDragDropEnabled: boolean` — Whether drag and drop is enabled
- `isVirtualizationEnabled: boolean` — Whether virtualization is enabled for large trees
- `useCheckboxSelection: boolean` — Whether to use checkbox-based selection instead of highlight selection
- `allowPartialSelection: boolean` — Whether to allow partial (indeterminate) checkbox selection for parent nodes
- `isTableViewEnabled: boolean` — Whether table view is enabled for this provider
- `getVirtualizationConfig(): { itemHeight: number; overscan: number; threshold: number; }` — Get virtualization configuration
- `getTableColumns(): TreeTableColumn[]` — Get table column configuration for table view
- `getDefaultTableSort(): TreeTableSort | null` — Get default sort configuration for table view
- `getSelectionTheme(): TreeSelectionTheme` — Get selection theme configuration
- `loadNodes(options?: TreeLoadOptions): Promise<TreeLoadResult>` — Load tree nodes
- `loadChildren(node: TreeNodeData, options?: TreeLoadOptions): Promise<TreeLoadResult>` — Load children for a specific node
- `refresh(path?: string): Promise<TreeLoadResult>` — Refresh/reload nodes
- `search(query: string, options?: TreeLoadOptions): Promise<TreeLoadResult>` — Search nodes
- `getNodeContextMenu(node: TreeNodeData): TreeContextMenuItem[]` — Get context menu items for a specific node
- `getMultiNodeContextMenu(nodes: TreeNodeData[]): TreeContextMenuItem[]` — Get context menu items for multiple selected nodes
- `getEmptySpaceContextMenu(parentNode?: TreeNodeData): TreeContextMenuItem[]` — Get context menu items for empty space (no node)
- `getNodeRenderer(node: TreeNodeData): TreeNodeRenderer | null` — Get custom renderer for a specific node
- `getDefaultRenderer(): TreeNodeRenderer` — Get default renderer for all nodes of this provider
- `getNodeIcon(node: TreeNodeData): string | React.ComponentType<any>` — Get custom icon for a node
- `canExpand(node: TreeNodeData): boolean` — Check if a node can be expanded
- `canSelect(node: TreeNodeData): boolean` — Check if a node can be selected
- `canDrag(nodes: TreeNodeData[]): boolean` — Check if nodes can be dragged
- `canDrop(dragInfo: TreeDragDropInfo): boolean` — Check if a drop operation is allowed
- `onSelectionChange(selectionInfo: TreeSelectionInfo): void` — Called when node selection changes
- `onNodeExpansion(node: TreeNodeData, expanded: boolean): void` — Called when a node is expanded or collapsed
- `onNodeDoubleClick(node: TreeNodeData): void` — Called when a node is double-clicked
- `onDragDrop(dragInfo: TreeDragDropInfo): Promise<void>` — Called when a drag and drop operation completes
- `onContextMenuAction(menuItemId: string, nodes: TreeNodeData[]): void` — Called when a context menu item is selected
- `onNodeFocus(node: TreeNodeData | null): void` — Called when a node is focused
- `onTableSort(sort: TreeTableSort | null): void` — Called when table sort changes
- `onTableExport(options: TreeTableExportOptions): Promise<string | void>` — Called when table data export is requested
- `initialize(): Promise<void>` — Initialize the provider
- `dispose(): void` — Cleanup provider resources
- `config: Record<string, any>` — Provider-specific configuration

### TreeNodeData

Represents a single node in the tree structure

This interface defines the core properties that every tree node must have,
along with optional properties for enhanced functionality like lazy loading,
custom styling, and metadata storage.

```ts
interface TreeNodeData
```

- `id: string` — Unique identifier for the node
- `name: string` — Display name of the node
- `path: string` — Full path or identifier for the node
- `type: string` — Type of node (file, directory, custom types)
- `hasChildren: boolean` — Whether this node has children (for lazy loading)
- `children: TreeNodeData[]` — Child nodes (if loaded)
- `metadata: Record<string, any>` — Custom metadata for the node
- `size: number` — Size in bytes (for files)
- `lastModified: Date` — Last modified date
- `icon: string` — Custom icon identifier
- `className: string` — Custom CSS class
- `disabled: boolean` — Whether the node is disabled
- `renderData: Record<string, any>` — Custom render data for this specific node

### TreeLoadResult

Result of loading tree nodes

This interface defines what providers return when loading tree data,
including the nodes themselves and metadata about the loading operation.

```ts
interface TreeLoadResult
```

- `nodes: TreeNodeData[]` — The loaded nodes
- `hasMore: boolean` — Whether there are more nodes to load
- `totalCount: number` — Total count of nodes (for virtual scrolling)
- `error: Error` — Any loading errors

### TreeLoadOptions

Configuration options for loading tree data

```ts
interface TreeLoadOptions
```

- `filter: string` — Filter to apply when loading nodes
- `forceReload: boolean` — Whether to force reload even if data is cached
- `maxDepth: number` — Maximum depth to load initially

### TreeTableColumn

Column configuration for table view display

```ts
interface TreeTableColumn
```

- `id: string` — Unique identifier for the column
- `label: string` — Display label for the column header
- `dataKey: string` — Property path in TreeNodeData to display (supports dot notation)
- `width: string` — Column width (CSS value)
- `minWidth: string` — Minimum width (CSS value)
- `align: "right" | "left" | "center"` — Column alignment
- `sortable: boolean` — Whether column is sortable
- `filterable: boolean` — Whether column is filterable
- `isTreeColumn: boolean` — Whether this column displays the tree hierarchy
- `className: string` — Custom CSS classes for the column
- `renderCell: (value: any, node: TreeNodeData) => React.ReactNode` — Custom cell renderer function
- `formatValue: (value: any, node: TreeNodeData) => string` — Custom value formatter

### TreeTableSort

Sort configuration for table view

```ts
interface TreeTableSort
```

- `columnId: string` — Column ID to sort by
- `direction: "asc" | "desc"` — Sort direction

### TreeTableExportOptions

Export configuration for table view

```ts
interface TreeTableExportOptions
```

- `format: "csv" | "json" | "tsv"` — Export format
- `columns: string[]` — Column IDs to include (empty = all columns)
- `includeHierarchy: boolean` — Whether to include hierarchy structure
- `flatten: boolean` — Whether to flatten nested data
- `filename: string` — Custom filename for download

### TreeSelectionTheme

Enhanced selection theme configuration

```ts
interface TreeSelectionTheme
```

- `colorScheme: SelectionColorScheme` — Color scheme for selection highlighting
- `intensity: SelectionIntensity` — Selection intensity level
- `focusStyle: FocusIndicatorStyle` — Focus indicator style
- `customColors: { background: string; foreground: string; accent: string; }` — Custom colors when using 'custom' color scheme
- `animated: boolean` — Whether to animate selection changes
- `persistSelection: boolean` — Whether to show selection even when component loses focus

### TreeComponentProps

```ts
interface TreeComponentProps
```

- `provider: TreeProvider` — Provider that supplies tree data and operations
- `model: TreeModel` — Optional pre-created TreeModel (if provided, component won't create its own)
- `loadOptions: TreeLoadOptions` — Optional loading options to pass to the provider
- `className: string` — Additional CSS classes to apply to the tree container

### TreeTableProps

```ts
interface TreeTableProps
```

- `treeModel: TreeModel` — The tree model managing state
- `columns: TreeTableColumn[]` — Table columns configuration
- `enableAnimations: boolean` — Enable animations for expand/collapse transitions
- `className: string` — Additional CSS classes
- `enableExport: boolean` — Whether to show export functionality
- `enableFiltering: boolean` — Whether to enable filtering
- `enableSorting: boolean` — Whether to enable sorting

### AccessibilityConfig

```ts
interface AccessibilityConfig
```

- `role: string`
- `ariaLabel: string`
- `ariaLabelledBy: string`
- `ariaDescribedBy: string`
- `ariaMultiSelectable: boolean`
- `ariaOrientation: "horizontal" | "vertical"`
- `tabIndex: number`

### ItemAccessibilityConfig

```ts
interface ItemAccessibilityConfig
```

- `role: string`
- `ariaLabel: string`
- `ariaSelected: boolean`
- `ariaExpanded: boolean`
- `ariaLevel: number`
- `ariaSetSize: number`
- `ariaPosInSet: number`
- `tabIndex: number`

### KeyboardNavigationConfig

```ts
interface KeyboardNavigationConfig
```

- `currentIndex: number`
- `totalItems: number`
- `itemsPerRow: number`
- `viewType: string`

### ListItemsProvider

```ts
interface ListItemsProvider
```

- `id: string` — Provider identifier
- `name: string` — Human-readable name
- `supportedViewTypes: ListViewType[]` — Supported view types for this provider
- `isMultiSelectEnabled: boolean` — Whether multi-selection is enabled
- `isVirtualizationEnabled: boolean` — Whether virtualization is enabled
- `loadItems(options?: ListLoadOptions): Promise<ListLoadResult>` — Load items from the data source
- `getItemCount(): Promise<number>` — Get total count of items (for virtualization)
- `loadItemRange(start: number, end: number): Promise<ListLoadResult>` — Load a specific range of items (for virtualization)
- `refresh(): Promise<ListLoadResult>` — Refresh/reload items
- `getItemHeight(viewType: ListViewType): number` — Get item height for a specific view type (for virtualization)
- `getItemWidth(viewType: ListViewType): number` — Get item width for grid-based view types
- `getVirtualizationConfig(): VirtualizationConfig` — Get virtualization configuration
- `onSelectionChange(selectionInfo: ListSelectionInfo): void` — Called when selection changes
- `onViewTypeChange(viewType: ListViewType): void` — Called when view type changes
- `onItemDoubleClick(item: ListItemData): void` — Called when an item is double-clicked
- `addListener(listener: ListItemsProviderListener): void`
- `removeListener(listener: ListItemsProviderListener): void`
- `getItemIcon(item: ListItemData): string | React.ComponentType<any>` — Get custom icon for an item
- `getItemContextMenu(item: ListItemData): ListContextMenuItem[]` — Get context menu items for a specific item
- `getMultiItemContextMenu(items: ListItemData[]): ListContextMenuItem[]` — Get context menu items for multiple selected items
- `onContextMenuAction(menuItemId: string, items: ListItemData[]): void` — Called when a context menu action is selected
- `isDragDropEnabled: boolean` — Whether drag and drop is enabled
- `canDragItem(item: ListItemData): boolean` — Check if an item can be dragged
- `canDropItems(draggedItems: ListItemData[], targetItem: ListItemData | null, position: "before" | "after" | "inside"): boolean` — Check if items can be dropped on a target
- `onDragStart(draggedItems: ListItemData[], event: DragEvent): void` — Called when drag operation starts
- `onDrop(dragDropInfo: ListDragDropInfo): void` — Called when items are dropped
- `onDragEnd(draggedItems: ListItemData[], success: boolean): void` — Called when drag operation ends (whether successful or not)

### ListViewType

```ts
interface ListViewType
```

### BenchmarkResult

```ts
interface BenchmarkResult
```

- `operation: string`
- `duration: number`
- `timestamp: number`
- `metadata: Record<string, any>`

### BenchmarkReport

```ts
interface BenchmarkReport
```

- `totalOperations: number`
- `totalDuration: number`
- `averageDuration: number`
- `slowestOperation: BenchmarkResult`
- `fastestOperation: BenchmarkResult`
- `operations: BenchmarkResult[]`

### GridLayoutConfig

```ts
interface GridLayoutConfig
```

- `containerWidth: number`
- `containerHeight: number`
- `itemsPerRow: number | "auto"`
- `gap: number`
- `padding: number`
- `minItemWidth: number`
- `maxItemWidth: number`
- `aspectRatio: number`

### GridItemLayout

```ts
interface GridItemLayout
```

- `x: number`
- `y: number`
- `width: number`
- `height: number`
- `thumbnailSize: number`
- `textHeight: number`

### GridLayoutResult

```ts
interface GridLayoutResult
```

- `itemsPerRow: number`
- `itemWidth: number`
- `itemHeight: number`
- `totalRows: number`
- `totalHeight: number`
- `items: GridItemLayout[]`

### MasonryLayoutConfig

```ts
interface MasonryLayoutConfig
```

- `containerWidth: number`
- `containerHeight: number`
- `columnCount: number | "auto"`
- `gap: number`
- `padding: number`
- `minColumnWidth: number`
- `maxColumnWidth: number`

### MasonryItemLayout

```ts
interface MasonryItemLayout
```

- `x: number`
- `y: number`
- `width: number`
- `height: number`
- `column: number`
- `thumbnailWidth: number`
- `thumbnailHeight: number`
- `textHeight: number`

### MasonryLayoutResult

```ts
interface MasonryLayoutResult
```

- `columnCount: number`
- `columnWidth: number`
- `totalHeight: number`
- `items: MasonryItemLayout[]`
- `columnHeights: number[]`

### MasonryItemData

```ts
interface MasonryItemData
```

- `id: string`
- `aspectRatio: number`
- `customHeight: number`
- `textLength: number`

### ExplorerLayoutProps

```ts
interface ExplorerLayoutProps
```

- `sections: ExplorerSections`
- `className: string`
- `isSidebarCollapsed: boolean`
- `setSidebarCollapsed: (collapsed: boolean) => void`

### ExplorerSections

```ts
interface ExplorerSections
```

- `header: React.ReactNode`
- `footer: React.ReactNode`
- `sidebar: { content: ReactNode; toolbar?: ReactNode; width?: number; }`
- `main: { content: ReactNode; toolbar?: ReactNode; }`

### ViewModeDefinition

```ts
interface ViewModeDefinition
```

- `id: string`
- `name: string`
- `description: string`
- `icon: IconDefinition`
- `component: React.ComponentType<ViewModeComponentProps>`
- `capabilities: ViewModeCapabilities`
- `settings: ViewModeSettings`
- `isDefault: boolean`
- `priority: number`

### ViewModeComponentProps

```ts
interface ViewModeComponentProps
```

- `model: any`
- `className: string`
- `style: React.CSSProperties`

### ViewModeCapabilities

```ts
interface ViewModeCapabilities
```

- `supportsSelection: boolean`
- `supportsMultiSelection: boolean`
- `supportsNavigation: boolean`
- `supportsSorting: boolean`
- `supportsFiltering: boolean`
- `supportsDragDrop: boolean`
- `supportsKeyboardNavigation: boolean`
- `supportsVirtualization: boolean`
- `supportsGrouping: boolean`
- `supportsInlinePreview: boolean`
- `supportsCustomColumns: boolean`
- `supportsZoom: boolean`

### ViewModeSettings

```ts
interface ViewModeSettings
```

- `defaultSortField: string`
- `defaultSortDirection: "asc" | "desc"`
- `itemSize: { width?: number; height?: number; minWidth?: number; maxWidth?: number; minHeight?: number; maxHeight?: number; }`
- `layout: { padding?: number; gap?: number; columns?: number | "auto"; rows?: number | "auto"; }`
- `display: { showIcons?: boolean; showLabels?: boolean; showDetails?: boolean; showPreview?: boolean; iconSize?: "small" | "medium" | "large"; labelPosition?: "bottom" | "right" | "overlay"; }`
- `interaction: { singleClickOpen?: boolean; doubleClickOpen?: boolean; hoverPreview?: boolean; contextMenu?: boolean; }`
- `performance: { virtualization?: boolean; bufferSize?: number; preloadCount?: number; debounceMs?: number; }`
- `customSettings: Record<string, any>`

### ViewModeState

```ts
interface ViewModeState
```

- `isActive: boolean`
- `isInitialized: boolean`
- `settings: ViewModeSettings`
- `lastUsed: Date`
- `userPreferences: Record<string, any>`

### TreeViewSettings

```ts
interface TreeViewSettings
```

- `indentSize: number`
- `showConnectors: boolean`
- `expandOnSingleClick: boolean`
- `collapseOnSecondClick: boolean`
- `rememberExpansion: boolean`
- `autoExpand: boolean`
- `maxDepth: number`

### ListViewSettings

```ts
interface ListViewSettings
```

- `columns: ColumnDefinition[]`
- `headerHeight: number`
- `rowHeight: number`
- `alternatingRows: boolean`
- `gridLines: boolean`
- `resizableColumns: boolean`
- `sortableColumns: boolean`

### ThumbnailViewSettings

```ts
interface ThumbnailViewSettings
```

- `thumbnailSize: number`
- `aspectRatio: number`
- `showFilenames: boolean`
- `showFileSize: boolean`
- `showDate: boolean`
- `gridSpacing: number`
- `loadThumbnails: boolean`
- `thumbnailQuality: "low" | "medium" | "high"`

### TreemapViewSettings

```ts
interface TreemapViewSettings
```

- `algorithm: "squarified" | "slice-dice" | "strip"`
- `colorScheme: "custom" | "size" | "type" | "date"`
- `paddingInner: number`
- `paddingOuter: number`
- `showLabels: boolean`
- `labelThreshold: number`
- `animation: boolean`
- `zoomable: boolean`

### ViewModeRegistry

```ts
interface ViewModeRegistry
```

- `registerViewMode(definition: ViewModeDefinition): void`
- `unregisterViewMode(id: string): void`
- `getViewMode(id: string): ViewModeDefinition | undefined`
- `getAllViewModes(): ViewModeDefinition[]`
- `getViewModesByCapability(capability: keyof ViewModeCapabilities): ViewModeDefinition[]`

### IFileBrowserProvider

```ts
interface IFileBrowserProvider
```

- `id: string`
- `name: string`
- `version: string`
- `loadItems(path: string): Promise<FileBrowserItem[]>`
- `loadItemDetails(item: FileBrowserItem): Promise<FileBrowserItemDetails>`
- `refreshItems(path: string): Promise<FileBrowserItem[]>`
- `normalizePath(path: string): string`
- `getParentPath(path: string): string | null`
- `resolvePath(basePath: string, relativePath: string): string`
- `getSupportedViewModes(): ViewModeDefinition[]`
- `getToolbarActions(): ToolbarAction[]`
- `getContextMenuActions(item: FileBrowserItem): ContextAction[]`
- `getDefaultViewMode(): string`
- `canPerformAction(action: string, items: FileBrowserItem[]): boolean`
- `performAction(action: string, items: FileBrowserItem[]): Promise<ActionResult>`
- `getItemIcon(item: FileBrowserItem): IconDefinition`
- `getItemPreview(item: FileBrowserItem): Promise<PreviewData | null>`
- `getItemDisplayName(item: FileBrowserItem): string`
- `getItemTooltip(item: FileBrowserItem): string`
- `getAvailableFilters(): FilterDefinition[]`
- `getAvailableSortFields(): SortFieldDefinition[]`
- `applyFilter(items: FileBrowserItem[], criteria: any): FileBrowserItem[]`
- `applySort(items: FileBrowserItem[], field: string, direction: "asc" | "desc"): FileBrowserItem[]`
- `onItemsChanged(callback: (changes: ItemChange[]) => void): () => void`
- `onError(callback: (error: Error) => void): () => void`
- `initialize(): Promise<void>`
- `dispose(): void`

### ToolbarAction

```ts
interface ToolbarAction
```

- `id: string`
- `label: string`
- `icon: IconDefinition`
- `tooltip: string`
- `category: string`
- `priority: number`
- `shortcut: string`
- `isVisible: (context: ActionContext) => boolean`
- `isEnabled: (context: ActionContext) => boolean`
- `isActive: (context: ActionContext) => boolean`
- `action: (context: ActionContext) => Promise<void> | void`
- `variant: "default" | "primary" | "secondary" | "destructive"`
- `size: "sm" | "md" | "lg"`
- `showLabel: boolean`

### ContextAction

```ts
interface ContextAction
```

- `id: string`
- `label: string`
- `icon: IconDefinition`
- `shortcut: string`
- `group: string`
- `separator: boolean`
- `isEnabled: (context: ActionContext) => boolean`
- `isVisible: (context: ActionContext) => boolean`
- `action: (context: ActionContext) => Promise<void> | void`
- `submenu: ContextAction[]`

### ActionContext

```ts
interface ActionContext
```

- `selectedItems: FileBrowserItem[]`
- `currentPath: string`
- `provider: IFileBrowserProvider`
- `viewMode: string`
- `allItems: FileBrowserItem[]`

### ActionResult

```ts
interface ActionResult
```

- `success: boolean`
- `message: string`
- `data: any`
- `error: Error`

### FilterDefinition

```ts
interface FilterDefinition
```

- `id: string`
- `label: string`
- `type: "boolean" | "text" | "date" | "select" | "multiselect" | "range"`
- `defaultValue: any`
- `options: { value: any; label: string; }[]`
- `placeholder: string`

### SortFieldDefinition

```ts
interface SortFieldDefinition
```

- `id: string`
- `label: string`
- `defaultDirection: "asc" | "desc"`
- `customSort: (a: FileBrowserItem, b: FileBrowserItem, direction: "asc" | "desc") => number`

### ProviderCapabilities

```ts
interface ProviderCapabilities
```

- `canCreate: boolean`
- `canRead: boolean`
- `canUpdate: boolean`
- `canDelete: boolean`
- `canMove: boolean`
- `canCopy: boolean`
- `canRename: boolean`
- `canUpload: boolean`
- `canDownload: boolean`
- `canPreview: boolean`
- `canSearch: boolean`
- `canFilter: boolean`
- `canSort: boolean`
- `supportsNavigation: boolean`
- `supportsSelection: boolean`
- `supportsHierarchy: boolean`
- `maxFileSize: number`
- `supportedFileTypes: string[]`

### ProviderConfiguration

```ts
interface ProviderConfiguration
```

- `enableLogging: boolean`
- `cacheSize: number`
- `cacheTTL: number`
- `batchSize: number`
- `timeout: number`
- `retryAttempts: number`
- `customOptions: Record<string, any>`

## Constants

### FileBrowser

```ts
const FileBrowser: React.FC<FileBrowserProps>
```

### LoadingSpinner

```ts
const LoadingSpinner: React.FC<LoadingSpinnerProps>
```

### FileIcon

```ts
const FileIcon: React.FC<FileIconProps>
```

### FileBrowserHeader

```ts
const FileBrowserHeader: React.FC<FileBrowserHeaderProps>
```

### FileBrowserContent

```ts
const FileBrowserContent: React.FC<FileBrowserContentProps>
```

### TreeView

```ts
const TreeView: React.FC<TreeViewProps>
```

### TreeNode

```ts
const TreeNode: React.FC<TreeNodeProps>
```

### TreeNodeList

```ts
const TreeNodeList: React.FC<TreeNodeListProps>
```

### ListView

```ts
const ListView: React.FC<ListViewProps>
```

### FileBrowserBreadcrumb

```ts
const FileBrowserBreadcrumb: React.FC<BreadcrumbProps>
```

### NavigationButtons

```ts
const NavigationButtons: React.FC<NavigationButtonsProps>
```

### ViewModeToggle

```ts
const ViewModeToggle: React.FC<ViewModeToggleProps>
```

### lucideIconMap

```ts
const lucideIconMap: Record<string, LucideIcon>
```

### iconColorMap

```ts
const iconColorMap: Record<string, string>
```

### contextMenuIconMap

```ts
const contextMenuIconMap: Record<string, LucideIcon>
```

### fileExtensionIconMap

```ts
const fileExtensionIconMap: Record<string, string>
```

### TreeComponent

Tree Component - Reactive tree display with loading states

This is the main tree component that:
- Creates and manages TreeModel
- Shows loading/error states 
- Renders tree nodes
- Follows MobX observer pattern for reactivity
- Handles keyboard navigation

```ts
const TreeComponent: React.FunctionComponent<TreeProps>
```

### TreeTable

TreeTable Component - Table view of tree data

```ts
const TreeTable: React.FunctionComponent<TreeTableProps>
```

### TreeCheckbox

TreeCheckbox Component - 3-state checkbox for tree selection

```ts
const TreeCheckbox: React.FunctionComponent<TreeCheckboxProps>
```

### DEFAULT_SELECTION_THEME

Default selection theme configuration

```ts
const DEFAULT_SELECTION_THEME: TreeSelectionTheme
```

### ListItems

```ts
const ListItems: React.FunctionComponent<ListItemsProps>
```

### ListItem

```ts
const ListItem: React.NamedExoticComponent<ListItemProps>
```

### ListContextMenu

```ts
const ListContextMenu: React.FunctionComponent<ListContextMenuProps>
```

### VirtualizedList

```ts
const VirtualizedList: React.FunctionComponent<VirtualizedListProps>
```

### VirtualizedGrid

```ts
const VirtualizedGrid: React.FunctionComponent<VirtualizedGridProps>
```

### MasonryView

```ts
const MasonryView: React.FC<MasonryViewProps>
```

### ViewSizeControls

```ts
const ViewSizeControls: React.FunctionComponent<ViewSizeControlsProps>
```

### ViewTypeSelector

```ts
const ViewTypeSelector: React.NamedExoticComponent<ViewTypeSelectorProps>
```

### ListLoader

```ts
const ListLoader: React.FunctionComponent<ListLoaderProps>
```

### LoadingIndicator

```ts
const LoadingIndicator: React.FunctionComponent<LoadingIndicatorProps>
```

### InlineLoading

```ts
const InlineLoading: React.FunctionComponent<InlineLoadingProps>
```

### LoadingProgress

```ts
const LoadingProgress: React.FunctionComponent<LoadingProgressProps>
```

### ErrorDisplay

```ts
const ErrorDisplay: React.FunctionComponent<ErrorDisplayProps>
```

### NetworkError

```ts
const NetworkError: React.FunctionComponent<NetworkErrorProps>
```

### LoadError

```ts
const LoadError: React.FunctionComponent<LoadErrorProps>
```

### EmptyState

```ts
const EmptyState: React.FunctionComponent<EmptyStateProps>
```

### NoItems

```ts
const NoItems: React.FunctionComponent<NoItemsProps>
```

### NoSearchResults

```ts
const NoSearchResults: React.FunctionComponent<NoSearchResultsProps>
```

### NoSelection

```ts
const NoSelection: React.FunctionComponent<NoSelectionProps>
```

### LIST_VIEW_TYPE

```ts
const LIST_VIEW_TYPE: ListViewType
```

### GRID_VIEW_TYPE

```ts
const GRID_VIEW_TYPE: ListViewType
```

### DETAILS_VIEW_TYPE

```ts
const DETAILS_VIEW_TYPE: ListViewType
```

### MASONRY_HORIZONTAL_VIEW_TYPE

```ts
const MASONRY_HORIZONTAL_VIEW_TYPE: ListViewType
```

### MASONRY_VERTICAL_VIEW_TYPE

```ts
const MASONRY_VERTICAL_VIEW_TYPE: ListViewType
```

### benchmark

```ts
const benchmark: { start: (operation: string, metadata?: Record<string, any>) => void; end: (operation: string, metadata?: Record<string, any>) => number; time: <T>(operation: string, fn: () => T, metadata?: Record<string, any>) => T; timeAsync: <T>(operation: string, fn: () => Promise<T>, metadata?: Record<string, any>) => Promise<T>; report: () => void; clear: () => void; setEnabled: (enabled: boolean) => void; }
```

### benchmarkLogger

```ts
const benchmarkLogger: BenchmarkLogger
```

### GRID_PRESETS

```ts
const GRID_PRESETS: { readonly compact: { readonly gap: 8; readonly padding: 12; readonly minItemWidth: 120; readonly maxItemWidth: 200; readonly aspectRatio: 1; }; readonly comfortable: { readonly gap: 16; readonly padding: 20; readonly minItemWidth: 200; readonly maxItemWidth: 300; readonly aspectRatio: 1.3; }; readonly spacious: { readonly gap: 24; readonly padding: 32; readonly minItemWidth: 280; readonly maxItemWidth: 400; readonly aspectRatio: 1.4; }; }
```

### MASONRY_PRESETS

```ts
const MASONRY_PRESETS: { readonly compact: { readonly gap: 8; readonly padding: 12; readonly minColumnWidth: 160; readonly maxColumnWidth: 250; }; readonly comfortable: { readonly gap: 16; readonly padding: 20; readonly minColumnWidth: 200; readonly maxColumnWidth: 300; }; readonly spacious: { readonly gap: 24; readonly padding: 32; readonly minColumnWidth: 250; readonly maxColumnWidth: 400; }; }
```

### CalculatedGridView

```ts
const CalculatedGridView: React.FunctionComponent<CalculatedGridViewProps>
```

### ExplorerLayout

```ts
const ExplorerLayout: React.FC<ExplorerLayoutProps>
```

### ExplorerLayoutSimpleExample

```ts
const ExplorerLayoutSimpleExample: React.FC<{}>
```