@anymux/ui-kit 0.1.0

package/src/file-browser/providers/FileSystemProvider.ts

@@ -0,0 +1,401 @@
+import { IFileSystem } from '@anymux/file-system';
+import { IFileBrowserProvider } from './IFileBrowserProvider';
+import { FileBrowserItem, IconDefinition, PreviewData } from '../types/FileBrowserTypes';
+import { LeftPanelMode } from '../models/LeftPanelManagerModel';
+import { ViewModeDefinition } from '../models/RightPanelManagerModel';
+
+interface CacheEntry {
+  data: FileBrowserItem[];
+  timestamp: number;
+  lastAccessed: number;
+  accessCount: number;
+}
+
+interface CacheOptions {
+  maxSize: number;
+  ttlMs: number;
+  enableLogging: boolean;
+}
+
+export class FileSystemProvider implements IFileBrowserProvider {
+  readonly id = 'filesystem';
+  readonly name = 'File System Provider';
+  readonly version = '1.0.0';
+
+  private fileSystem: IFileSystem;
+  private cache = new Map<string, CacheEntry>();
+  private cacheOptions: CacheOptions;
+
+  constructor(fileSystem: IFileSystem, cacheOptions?: Partial<CacheOptions>) {
+    this.fileSystem = fileSystem;
+    this.cacheOptions = {
+      maxSize: 100,
+      ttlMs: 30000, // 30 seconds
+      enableLogging: false,
+      ...cacheOptions
+    };
+  }
+
+  async loadItems(path: string): Promise<FileBrowserItem[]> {
+    try {
+      const normalizedPath = this.normalizePath(path);
+      
+      // Check cache first
+      const cached = this.getFromCache(normalizedPath);
+      if (cached) {
+        this.logCache(`Cache hit for ${normalizedPath}`);
+        return cached;
+      }
+      
+      this.logCache(`Cache miss for ${normalizedPath}`);
+      const items = await this.fileSystem.readdir(normalizedPath, { withFileTypes: true });
+      
+      // Load detailed information for each item
+      const itemsWithDetails = await Promise.all(
+        items.map(async (item) => {
+          const itemPath = this.resolvePath(normalizedPath, item.name);
+          
+          try {
+            // Get detailed file information
+            const stats = await this.fileSystem.stat(itemPath);
+            
+            return {
+              id: itemPath,
+              name: item.name,
+              path: itemPath,
+              type: item.isDirectory() ? 'directory' as const : 'file' as const,
+              hasChildren: item.isDirectory(),
+              size: stats.size,
+              lastModified: new Date(stats.mtime),
+              permissions: this.formatPermissions(stats.mode),
+              metadata: {
+                created: new Date(stats.birthtime || stats.ctime),
+                accessed: new Date(stats.atime),
+                isSymlink: stats.isSymbolicLink?.() || false,
+                blocks: stats.blocks,
+                blksize: stats.blksize,
+                dev: stats.dev,
+                ino: stats.ino,
+                nlink: stats.nlink,
+                rdev: stats.rdev,
+                uid: stats.uid,
+                gid: stats.gid,
+              }
+            };
+          } catch (statError) {
+            // If stat fails, return basic info without details
+            console.warn(`Failed to get stats for ${itemPath}:`, statError);
+            return {
+              id: itemPath,
+              name: item.name,
+              path: itemPath,
+              type: item.isDirectory() ? 'directory' as const : 'file' as const,
+              hasChildren: item.isDirectory(),
+            };
+          }
+        })
+      );
+      
+      // Store in cache
+      this.setInCache(normalizedPath, itemsWithDetails);
+      
+      return itemsWithDetails;
+    } catch (error) {
+      // Invalidate cache on error
+      this.invalidateCache(this.normalizePath(path));
+      
+      const enhancedError = this.enhanceError(error, path, 'loadItems');
+      console.error('Failed to load items:', enhancedError);
+      throw enhancedError;
+    }
+  }
+
+  normalizePath(path: string): string {
+    // Normalize path separators and remove duplicate slashes
+    if (!path || path === '') return '/';
+    
+    // Convert backslashes to forward slashes
+    let normalized = path.replace(/\\/g, '/');
+    
+    // Remove duplicate slashes
+    normalized = normalized.replace(/\/+/g, '/');
+    
+    // Remove trailing slash unless it's root
+    if (normalized.length > 1 && normalized.endsWith('/')) {
+      normalized = normalized.slice(0, -1);
+    }
+    
+    // Ensure it starts with /
+    if (!normalized.startsWith('/')) {
+      normalized = '/' + normalized;
+    }
+    
+    return normalized;
+  }
+
+  private formatPermissions(mode: number | undefined): string {
+    if (mode === undefined) return '';
+    
+    // Extract permission bits (last 9 bits)
+    const perms = mode & parseInt('777', 8);
+    
+    // Convert to rwx format
+    const octal = perms.toString(8).padStart(3, '0');
+    let result = '';
+    
+    for (let i = 0; i < 3; i++) {
+      const digit = parseInt(octal[i] || '0', 10);
+      result += (digit & 4) ? 'r' : '-';
+      result += (digit & 2) ? 'w' : '-';
+      result += (digit & 1) ? 'x' : '-';
+    }
+    
+    return result;
+  }
+
+  private enhanceError(error: any, path: string, operation: string): Error {
+    const message = error?.message || 'Unknown error';
+    const code = error?.code || 'UNKNOWN';
+    
+    const enhancedError = new Error(
+      `${operation} failed for path "${path}": ${message}`
+    );
+    
+    // Preserve error properties
+    (enhancedError as any).code = code;
+    (enhancedError as any).path = path;
+    (enhancedError as any).operation = operation;
+    (enhancedError as any).originalError = error;
+    (enhancedError as any).timestamp = new Date();
+    
+    return enhancedError;
+  }
+
+  getParentPath(path: string): string | null {
+    const normalized = this.normalizePath(path);
+    if (normalized === '/') return null;
+    
+    const parts = normalized.split('/').filter(Boolean);
+    parts.pop();
+    
+    return parts.length === 0 ? '/' : '/' + parts.join('/');
+  }
+
+  resolvePath(basePath: string, relativePath: string): string {
+    if (relativePath.startsWith('/')) {
+      return this.normalizePath(relativePath);
+    }
+    
+    const base = this.normalizePath(basePath);
+    const resolved = base === '/' ? `/${relativePath}` : `${base}/${relativePath}`;
+    return this.normalizePath(resolved);
+  }
+
+  getItemIcon(item: FileBrowserItem): IconDefinition {
+    if (item.type === 'directory') {
+      return {
+        type: 'lucide',
+        name: 'folder',
+        color: '#3b82f6'
+      };
+    }
+    
+    // Simple file type detection based on extension
+    const ext = item.name.split('.').pop()?.toLowerCase();
+    const iconMap: Record<string, string> = {
+      'js': 'file-code',
+      'ts': 'file-code',
+      'jsx': 'file-code',
+      'tsx': 'file-code',
+      'html': 'file-code',
+      'css': 'file-code',
+      'json': 'file-code',
+      'md': 'file-text',
+      'txt': 'file-text',
+      'png': 'image',
+      'jpg': 'image',
+      'jpeg': 'image',
+      'gif': 'image',
+      'svg': 'image',
+      'pdf': 'file-text',
+    };
+    
+    return {
+      type: 'lucide',
+      name: iconMap[ext || ''] || 'file',
+      color: '#6b7280'
+    };
+  }
+
+  getItemDisplayName(item: FileBrowserItem): string {
+    return item.name;
+  }
+
+  async getItemPreview(item: FileBrowserItem): Promise<PreviewData | null> {
+    // Basic preview support - this could be extended
+    if (item.type === 'file') {
+      const ext = item.name.split('.').pop()?.toLowerCase();
+      
+      if (['png', 'jpg', 'jpeg', 'gif', 'svg'].includes(ext || '')) {
+        return {
+          type: 'image',
+          url: item.path // This would need to be a proper URL in a real implementation
+        };
+      }
+      
+      if (['txt', 'md', 'json', 'js', 'ts', 'css', 'html'].includes(ext || '')) {
+        try {
+          // For text files, we could read and preview content
+          return {
+            type: 'text',
+            content: 'Preview not implemented'
+          };
+        } catch {
+          return null;
+        }
+      }
+    }
+    
+    return null;
+  }
+
+  canPerformAction(action: string, items: FileBrowserItem[]): boolean {
+    // Basic action support
+    const supportedActions = ['delete', 'rename', 'copy', 'move'];
+    return supportedActions.includes(action) && items.length > 0;
+  }
+
+  async performAction(action: string, items: FileBrowserItem[]): Promise<any> {
+    // This would implement actual file operations
+    // For now, just return success
+    console.log(`Performing action ${action} on items:`, items);
+    return { success: true, message: `${action} completed` };
+  }
+
+  async initialize(): Promise<void> {
+    // Any initialization needed
+  }
+
+  dispose(): void {
+    // Clear cache
+    this.cache.clear();
+  }
+
+  // Cache management methods
+  private getFromCache(path: string): FileBrowserItem[] | null {
+    const entry = this.cache.get(path);
+    if (!entry) return null;
+
+    const now = Date.now();
+    
+    // Check if expired
+    if (now - entry.timestamp > this.cacheOptions.ttlMs) {
+      this.cache.delete(path);
+      this.logCache(`Cache entry expired for ${path}`);
+      return null;
+    }
+
+    // Update access stats
+    entry.lastAccessed = now;
+    entry.accessCount++;
+    
+    return entry.data;
+  }
+
+  private setInCache(path: string, data: FileBrowserItem[]): void {
+    const now = Date.now();
+    
+    // Evict oldest entries if cache is full
+    if (this.cache.size >= this.cacheOptions.maxSize) {
+      this.evictLeastRecentlyUsed();
+    }
+
+    this.cache.set(path, {
+      data: [...data], // Clone to prevent mutations
+      timestamp: now,
+      lastAccessed: now,
+      accessCount: 1
+    });
+
+    this.logCache(`Cached ${data.length} items for ${path}`);
+  }
+
+  private invalidateCache(path: string): void {
+    if (this.cache.has(path)) {
+      this.cache.delete(path);
+      this.logCache(`Invalidated cache for ${path}`);
+    }
+  }
+
+  private evictLeastRecentlyUsed(): void {
+    let oldestPath: string | null = null;
+    let oldestAccess = Date.now();
+
+    for (const [path, entry] of this.cache.entries()) {
+      if (entry.lastAccessed < oldestAccess) {
+        oldestAccess = entry.lastAccessed;
+        oldestPath = path;
+      }
+    }
+
+    if (oldestPath) {
+      this.cache.delete(oldestPath);
+      this.logCache(`Evicted LRU cache entry: ${oldestPath}`);
+    }
+  }
+
+  private logCache(message: string): void {
+    if (this.cacheOptions.enableLogging) {
+      console.log(`[FileSystemProvider Cache] ${message}`);
+    }
+  }
+
+  // Public cache methods for external management
+  clearCache(): void {
+    this.cache.clear();
+    this.logCache('Cache cleared');
+  }
+
+  getCacheStats(): { size: number; maxSize: number; hitRate?: number } {
+    return {
+      size: this.cache.size,
+      maxSize: this.cacheOptions.maxSize
+    };
+  }
+
+  // Dual-panel support
+  getLeftPanelModes(): LeftPanelMode[] {
+    return [
+      {
+        id: 'tree',
+        name: 'Tree',
+        icon: 'folder-tree',
+        component: {} as any, // Will be set by consumer
+        isAvailable: () => true
+      }
+    ];
+  }
+
+  getRightPanelViewModes(): ViewModeDefinition[] {
+    return [
+      {
+        id: 'list',
+        name: 'List',
+        icon: 'list',
+        applicableFor: (contentType) => contentType === 'folder'
+      },
+      {
+        id: 'thumbnail',
+        name: 'Thumbnails',
+        icon: 'grid-3x3',
+        applicableFor: (contentType) => contentType === 'folder'
+      },
+      {
+        id: 'detail',
+        name: 'Details',
+        icon: 'info',
+        applicableFor: (contentType) => contentType === 'folder'
+      }
+    ];
+  }
+} 

package/src/file-browser/providers/FileSystemTreeProvider.ts

@@ -0,0 +1,231 @@
+import { makeAutoObservable } from 'mobx';
+import type { TreeProvider, TreeSelectionInfo } from '../../tree/providers/TreeProvider';
+import type { TreeNodeData, TreeLoadOptions, TreeLoadResult, TreeContextMenuItem } from '../../tree/types/TreeTypes';
+import { FileSystemBridge, type FileSystemItem } from '../adapters/FileSystemBridge';
+
+interface FileSystemTreeProviderOptions {
+  showFilesInTree: boolean;
+  onSelectionChange: (path: string) => void;
+  onRefresh?: () => Promise<void>;
+  onRenameRequest?: (itemId: string, currentName: string, path: string, source: 'list' | 'tree') => void;
+  onDeleteRequest?: (targets: Array<{ path: string; isDirectory: boolean; name: string }>) => void;
+  onNewItemRequest?: (parentPath: string, type: 'file' | 'folder') => void;
+}
+
+export class FileSystemTreeProvider implements TreeProvider {
+  readonly id = 'filesystem-tree';
+  readonly name = 'File System Tree';
+  readonly version = '1.0.0';
+
+  isMultiSelectEnabled = false;
+  readonly isDragDropEnabled = true;
+  readonly isVirtualizationEnabled = false;
+  readonly useCheckboxSelection = false;
+  readonly allowPartialSelection = false;
+  readonly isTableViewEnabled = false;
+
+  constructor(
+    private bridge: FileSystemBridge,
+    private options: FileSystemTreeProviderOptions
+  ) {
+    makeAutoObservable(this, {});
+  }
+
+  async loadNodes(options?: TreeLoadOptions): Promise<TreeLoadResult> {
+    const rootItems = await this.bridge.loadDirectoryTree('/');
+
+    const nodes: TreeNodeData[] = rootItems.map(item => ({
+      id: item.id,
+      name: item.name,
+      path: item.path,
+      type: 'directory',
+      hasChildren: true,
+      isExpanded: false,
+      metadata: item
+    }));
+
+    return {
+      nodes,
+      totalCount: nodes.length
+    };
+  }
+
+  async loadChildren(node: TreeNodeData, options?: TreeLoadOptions): Promise<TreeLoadResult> {
+    try {
+      const items = await this.bridge.loadDirectoryTree(node.path);
+
+      const childNodes: TreeNodeData[] = items.map(item => ({
+        id: item.id,
+        name: item.name,
+        path: item.path,
+        type: 'directory',
+        hasChildren: true,
+        isExpanded: false,
+        metadata: item
+      }));
+
+      return {
+        nodes: childNodes,
+        totalCount: childNodes.length
+      };
+    } catch {
+      return { nodes: [], totalCount: 0 };
+    }
+  }
+
+  async refresh(path?: string): Promise<TreeLoadResult> {
+    return this.loadNodes();
+  }
+
+  getNodeContextMenu(node: TreeNodeData): TreeContextMenuItem[] {
+    return [
+      {
+        id: 'open',
+        label: 'Open',
+        icon: 'folder-open',
+        type: 'item',
+        handler: () => this.options.onSelectionChange(node.path)
+      },
+      { id: 'separator1', type: 'separator', label: '' },
+      {
+        id: 'new-folder',
+        label: 'New Folder',
+        icon: 'folder-plus',
+        type: 'item',
+        handler: () => this.requestNewItem(node.path, 'folder')
+      },
+      {
+        id: 'new-file',
+        label: 'New File',
+        icon: 'file-plus',
+        type: 'item',
+        handler: () => this.requestNewItem(node.path, 'file')
+      },
+      { id: 'separator2', type: 'separator', label: '' },
+      {
+        id: 'rename',
+        label: 'Rename',
+        icon: 'edit',
+        type: 'item',
+        handler: () => this.requestRename(node)
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: 'trash',
+        type: 'item',
+        handler: () => this.requestDelete([node])
+      }
+    ];
+  }
+
+  getMultiNodeContextMenu(nodes: TreeNodeData[]): TreeContextMenuItem[] {
+    return [
+      {
+        id: 'delete-multiple',
+        label: `Delete ${nodes.length} Folders`,
+        icon: 'trash',
+        type: 'item',
+        handler: () => this.requestDelete(nodes)
+      }
+    ];
+  }
+
+  getEmptySpaceContextMenu(parentNode?: TreeNodeData): TreeContextMenuItem[] {
+    const parentPath = parentNode?.path || '/';
+    return [
+      {
+        id: 'new-folder',
+        label: 'New Folder',
+        icon: 'folder-plus',
+        type: 'item',
+        handler: () => this.requestNewItem(parentPath, 'folder')
+      },
+      {
+        id: 'new-file',
+        label: 'New File',
+        icon: 'file-plus',
+        type: 'item',
+        handler: () => this.requestNewItem(parentPath, 'file')
+      }
+    ];
+  }
+
+  canExpand(node: TreeNodeData): boolean {
+    return node.type === 'directory';
+  }
+
+  canSelect(node: TreeNodeData): boolean {
+    return true;
+  }
+
+  onSelectionChange = (selectionInfo: TreeSelectionInfo) => {
+    if (selectionInfo.selectedNodes.length > 0) {
+      const selectedNode = selectionInfo.selectedNodes[0];
+      if (selectedNode) {
+        this.options.onSelectionChange(selectedNode.path);
+      }
+    }
+  };
+
+  onNodeExpansion?(node: TreeNodeData, expanded: boolean): void {}
+
+  onNodeDoubleClick?(node: TreeNodeData): void {
+    this.options.onSelectionChange(node.path);
+  }
+
+  onNodeFocus?(node: TreeNodeData | null): void {}
+
+  onContextMenuAction?(menuItemId: string, nodes: TreeNodeData[]): void {}
+
+  private requestRename(node: TreeNodeData) {
+    if (this.options.onRenameRequest) {
+      const currentName = node.path.split('/').pop() || '';
+      this.options.onRenameRequest(node.id, currentName, node.path, 'tree');
+    }
+  }
+
+  private requestDelete(nodes: TreeNodeData[]) {
+    if (this.options.onDeleteRequest) {
+      const targets = nodes.map(n => ({
+        path: n.path,
+        isDirectory: true,
+        name: n.path.split('/').pop() || ''
+      }));
+      this.options.onDeleteRequest(targets);
+    }
+  }
+
+  private requestNewItem(parentPath: string, type: 'file' | 'folder') {
+    if (this.options.onNewItemRequest) {
+      this.options.onNewItemRequest(parentPath, type);
+    }
+  }
+
+  async executeRename(path: string, newName: string): Promise<void> {
+    const parentPath = path.split('/').slice(0, -1).join('/') || '/';
+    const newPath = `${parentPath}/${newName}`.replace(/\/\//g, '/');
+    await this.bridge.renameItem(path, newPath);
+    await this.options.onRefresh?.();
+  }
+
+  async executeDelete(targets: Array<{ path: string; isDirectory: boolean }>): Promise<void> {
+    await Promise.all(targets.map(t =>
+      this.bridge.deleteItem(t.path, t.isDirectory)
+    ));
+    await this.options.onRefresh?.();
+  }
+
+  async executeCreate(parentPath: string, name: string, type: 'file' | 'folder'): Promise<void> {
+    const newPath = `${parentPath}/${name}`.replace(/\/\//g, '/');
+    if (type === 'folder') {
+      await this.bridge.createDirectory(newPath);
+    } else {
+      await this.bridge.writeFile(newPath, '');
+    }
+    await this.options.onRefresh?.();
+  }
+
+  async initialize?(): Promise<void> {}
+  dispose?(): void {}
+}