@anymux/ui-kit 0.1.0

package/src/tree/providers/TestTreeProvider.ts

@@ -0,0 +1,946 @@
+import { makeAutoObservable } from 'mobx';
+import type { TreeProvider, TreeSelectionInfo } from './TreeProvider';
+import type { TreeNodeData, TreeLoadResult, TreeLoadOptions, TreeTableColumn, TreeTableSort, TreeTableExportOptions, TreeSelectionTheme } from '../types/TreeTypes';
+import type { TreeContextMenuItem } from '../types/TreeTypes';
+import { DEFAULT_SELECTION_THEME } from '../utils/SelectionTheme';
+import React from 'react';
+import { 
+  FileText, ImageIcon as Image, Settings, BookOpen, TestTube, Package, 
+  Palette, Globe, Zap, Music, Archive, GitBranch, Database, Key, 
+  Code, Braces, Play, Component 
+} from 'lucide-react';
+
+export class TestTreeProvider implements TreeProvider {
+  // Provider metadata (required)
+  readonly id = 'test-tree-provider';
+  readonly name = 'Test Tree Provider';
+  readonly version = '1.0.0';
+  
+  // Configuration (required)
+  isMultiSelectEnabled = true;
+  readonly isDragDropEnabled = false;
+  readonly isVirtualizationEnabled = false;
+  readonly isTableViewEnabled = true;
+  useCheckboxSelection = false;
+  readonly allowPartialSelection = true;
+  readonly config = {};
+
+  // Observable selection theme
+  selectionTheme: TreeSelectionTheme = {
+    ...DEFAULT_SELECTION_THEME,
+    colorScheme: 'primary',
+    intensity: 'prominent',
+    focusStyle: 'ring',
+    animated: true,
+    persistSelection: true
+  };
+
+  // Test provider specific settings
+  slowLoading = false;
+  simulateErrors = false;
+  maxDepth = 3;
+  nodesPerLevel = 5;
+  loadingDelay = 300;
+
+  // Callbacks (optional)
+  onSelectionChange?: (selectionInfo: TreeSelectionInfo) => void;
+  onNodeExpansion?: (node: TreeNodeData, isExpanded: boolean) => void;
+  onNodeFocus?: (node: TreeNodeData | null) => void;
+
+  constructor() {
+    makeAutoObservable(this, {
+      id: false,
+      name: false,
+      version: false,
+      isDragDropEnabled: false,
+      isVirtualizationEnabled: false,
+      isTableViewEnabled: false,
+      config: false,
+      // Make isMultiSelectEnabled and useCheckboxSelection observable
+      // isMultiSelectEnabled: true (default - observable)
+      // useCheckboxSelection: true (default - observable)
+    });
+  }
+
+  /**
+   * Update selection theme reactively
+   */
+  updateSelectionTheme = (theme: Partial<TreeSelectionTheme>) => {
+    this.selectionTheme = { ...this.selectionTheme, ...theme };
+  };
+
+  /**
+   * Update multi-select setting
+   */
+  setMultiSelectEnabled = (enabled: boolean) => {
+    this.isMultiSelectEnabled = enabled;
+  };
+
+  /**
+   * Update checkbox selection setting
+   */
+  setCheckboxSelection = (enabled: boolean) => {
+    this.useCheckboxSelection = enabled;
+  };
+
+  /**
+   * Get selection theme configuration
+   */
+  getSelectionTheme(): TreeSelectionTheme {
+    return this.selectionTheme;
+  }
+
+  /**
+   * Load tree nodes
+   */
+  async loadNodes(options?: TreeLoadOptions): Promise<TreeLoadResult> {
+    await this.simulateDelay();
+    
+    if (this.simulateErrors && Math.random() < 0.3) {
+      throw new Error('Simulated loading error - try again!');
+    }
+    
+    const nodes = this.generateMockNodes('', 0);
+    
+    return {
+      nodes,
+      hasMore: false,
+      totalCount: nodes.length
+    };
+  }
+
+  /**
+   * Load child nodes for a given parent
+   */
+  async loadChildren(node: TreeNodeData, options?: TreeLoadOptions): Promise<TreeLoadResult> {
+    await this.simulateDelay();
+    
+    if (this.simulateErrors && Math.random() < 0.3) {
+      throw new Error('Simulated loading error - try again!');
+    }
+    
+    // Generate children for the given node
+    const pathParts = node.path.split('/').filter(Boolean);
+    const depth = pathParts.length;
+    
+    // Only generate children if we haven't exceeded max depth
+    if (depth >= this.maxDepth) {
+      return {
+        nodes: [],
+        hasMore: false,
+        totalCount: 0
+      };
+    }
+    
+    const children = this.generateMockNodes(node.path, depth);
+    
+    return {
+      nodes: children,
+      hasMore: false,
+      totalCount: children.length
+    };
+  }
+
+  /**
+   * Refresh tree data
+   */
+  async refresh(path?: string): Promise<TreeLoadResult> {
+    return path ? this.loadChildren({ path } as TreeNodeData) : this.loadNodes();
+  }
+
+  canExpand(node: TreeNodeData): boolean {
+    return node.type === 'directory' && (node.hasChildren ?? true);
+  }
+
+  canSelect(node: TreeNodeData): boolean {
+    return !node.disabled;
+  }
+
+  // Context menu support
+  getNodeContextMenu(node: TreeNodeData): TreeContextMenuItem[] {
+    // Enhanced context menus based on node type and file extension
+    const baseItems: TreeContextMenuItem[] = [];
+
+    if (node.type === 'directory') {
+      // Folder-specific menus
+      if (node.name.includes('components')) {
+        // React Components folder
+        return [
+          { id: 'open', label: 'Open Folder' },
+          { id: 'separator-1', label: '', type: 'separator' },
+          { id: 'new-component', label: 'New React Component' },
+          { id: 'new-hook', label: 'New Custom Hook' },
+          { id: 'new-story', label: 'New Storybook Story' },
+          { id: 'separator-2', label: '', type: 'separator' },
+          { id: 'run-tests', label: 'Run Component Tests' },
+          { id: 'build-docs', label: 'Generate Docs' },
+          { id: 'separator-3', label: '', type: 'separator' },
+          { id: 'rename', label: 'Rename Folder' },
+          { id: 'delete', label: 'Delete Folder' }
+        ];
+      } else if (node.name.includes('config')) {
+        // Configuration folder
+        return [
+          { id: 'open', label: 'Open Config Folder' },
+          { id: 'separator-1', label: '', type: 'separator' },
+          { id: 'new-env', label: 'New Environment File' },
+          { id: 'new-config', label: 'New Config File' },
+          { id: 'validate-config', label: 'Validate Configuration' },
+          { id: 'separator-2', label: '', type: 'separator' },
+          { id: 'backup-config', label: 'Backup Configuration' },
+          { id: 'restore-config', label: 'Restore from Backup' },
+          { id: 'separator-3', label: '', type: 'separator' },
+          { id: 'rename', label: 'Rename Folder' },
+          { id: 'delete', label: 'Delete Folder' }
+        ];
+      } else {
+        // General folder menu
+        return [
+          { id: 'open', label: 'Open Folder' },
+          { id: 'separator-1', label: '', type: 'separator' },
+          { id: 'new-file', label: 'New File' },
+          { id: 'new-folder', label: 'New Folder' },
+          { id: 'separator-2', label: '', type: 'separator' },
+          { id: 'import-files', label: 'Import Files' },
+          { id: 'export-folder', label: 'Export Folder' },
+          { id: 'separator-3', label: '', type: 'separator' },
+          { id: 'rename', label: 'Rename Folder' },
+          { id: 'delete', label: 'Delete Folder' },
+          { id: 'separator-4', label: '', type: 'separator' },
+          { id: 'copy', label: 'Copy Folder' },
+          { id: 'cut', label: 'Cut Folder' }
+        ];
+      }
+    }
+
+    // File-specific menus based on extension
+    const fileName = node.name;
+    const fileExt = fileName.split('.').pop()?.toLowerCase() || '';
+
+    switch (fileExt) {
+      case 'js':
+      case 'jsx':
+        // JavaScript/React files
+        return [
+          { id: 'open', label: 'Open in Editor' },
+          { id: 'open-preview', label: 'Open in Preview' },
+          { id: 'separator-1', label: '', type: 'separator' },
+          { id: 'run-file', label: 'Run JavaScript' },
+          { id: 'debug-file', label: 'Debug in Browser' },
+          { id: 'format-code', label: 'Format with Prettier' },
+          { id: 'separator-2', label: '', type: 'separator' },
+          { id: 'create-test', label: 'Create Test File' },
+          { id: 'run-tests', label: 'Run Tests' },
+          { id: 'separator-3', label: '', type: 'separator' },
+          { id: 'rename', label: 'Rename File' },
+          { id: 'duplicate', label: 'Duplicate File' },
+          { id: 'delete', label: 'Delete File' }
+        ];
+
+      case 'ts':
+      case 'tsx':
+        // TypeScript files
+        return [
+          { id: 'open', label: 'Open in Editor' },
+          { id: 'open-preview', label: 'Open in Preview' },
+          { id: 'separator-1', label: '', type: 'separator' },
+          { id: 'compile-ts', label: 'Compile TypeScript' },
+          { id: 'type-check', label: 'Run Type Check' },
+          { id: 'generate-types', label: 'Generate Type Definitions' },
+          { id: 'separator-2', label: '', type: 'separator' },
+          { id: 'create-test', label: 'Create Test File' },
+          { id: 'run-tests', label: 'Run Tests' },
+          { id: 'separator-3', label: '', type: 'separator' },
+          { id: 'rename', label: 'Rename File' },
+          { id: 'duplicate', label: 'Duplicate File' },
+          { id: 'delete', label: 'Delete File' }
+        ];
+
+      case 'css':
+      case 'scss':
+      case 'sass':
+      case 'less':
+        // Stylesheet files
+        return [
+          { id: 'open', label: 'Open in Editor' },
+          { id: 'open-preview', label: 'Live Preview' },
+          { id: 'separator-1', label: '', type: 'separator' },
+          { id: 'compile-css', label: 'Compile Stylesheet' },
+          { id: 'optimize-css', label: 'Optimize CSS' },
+          { id: 'validate-css', label: 'Validate CSS' },
+          { id: 'separator-2', label: '', type: 'separator' },
+          { id: 'extract-vars', label: 'Extract CSS Variables' },
+          { id: 'generate-rtl', label: 'Generate RTL Version' },
+          { id: 'separator-3', label: '', type: 'separator' },
+          { id: 'rename', label: 'Rename File' },
+          { id: 'duplicate', label: 'Duplicate File' },
+          { id: 'delete', label: 'Delete File' }
+        ];
+
+      case 'md':
+      case 'mdx':
+        // Markdown files
+        return [
+          { id: 'open', label: 'Open in Editor' },
+          { id: 'open-preview', label: 'Preview Markdown' },
+          { id: 'separator-1', label: '', type: 'separator' },
+          { id: 'export-html', label: 'Export to HTML' },
+          { id: 'export-pdf', label: 'Export to PDF' },
+          { id: 'check-links', label: 'Check Links' },
+          { id: 'separator-2', label: '', type: 'separator' },
+          { id: 'toc-generate', label: 'Generate Table of Contents' },
+          { id: 'word-count', label: 'Word Count & Stats' },
+          { id: 'separator-3', label: '', type: 'separator' },
+          { id: 'rename', label: 'Rename File' },
+          { id: 'duplicate', label: 'Duplicate File' },
+          { id: 'delete', label: 'Delete File' }
+        ];
+
+      case 'json':
+        // JSON configuration files
+        return [
+          { id: 'open', label: 'Open in Editor' },
+          { id: 'open-viewer', label: 'Open JSON Viewer' },
+          { id: 'separator-1', label: '', type: 'separator' },
+          { id: 'validate-json', label: 'Validate JSON' },
+          { id: 'format-json', label: 'Format JSON' },
+          { id: 'minify-json', label: 'Minify JSON' },
+          { id: 'separator-2', label: '', type: 'separator' },
+          { id: 'compare-json', label: 'Compare with...' },
+          { id: 'schema-validate', label: 'Validate Against Schema' },
+          { id: 'separator-3', label: '', type: 'separator' },
+          { id: 'rename', label: 'Rename File' },
+          { id: 'duplicate', label: 'Duplicate File' },
+          { id: 'delete', label: 'Delete File' }
+        ];
+
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif':
+      case 'svg':
+      case 'webp':
+        // Image files
+        return [
+          { id: 'open', label: 'Open Image' },
+          { id: 'open-editor', label: 'Edit in Image Editor' },
+          { id: 'separator-1', label: '', type: 'separator' },
+          { id: 'resize-image', label: 'Resize Image' },
+          { id: 'compress-image', label: 'Compress Image' },
+          { id: 'convert-format', label: 'Convert Format' },
+          { id: 'separator-2', label: '', type: 'separator' },
+          { id: 'image-info', label: 'Image Properties' },
+          { id: 'copy-url', label: 'Copy Image URL' },
+          { id: 'separator-3', label: '', type: 'separator' },
+          { id: 'rename', label: 'Rename File' },
+          { id: 'duplicate', label: 'Duplicate File' },
+          { id: 'delete', label: 'Delete File' }
+        ];
+
+      default:
+        // Generic file menu
+        return [
+          { id: 'open', label: 'Open File' },
+          { id: 'open-with', label: 'Open With...' },
+          { id: 'separator-1', label: '', type: 'separator' },
+          { id: 'properties', label: 'File Properties' },
+          { id: 'permissions', label: 'Change Permissions' },
+          { id: 'separator-2', label: '', type: 'separator' },
+          { id: 'rename', label: 'Rename File' },
+          { id: 'duplicate', label: 'Duplicate File' },
+          { id: 'delete', label: 'Delete File' },
+          { id: 'separator-3', label: '', type: 'separator' },
+          { id: 'copy', label: 'Copy File' },
+          { id: 'cut', label: 'Cut File' }
+        ];
+    }
+  }
+
+  getMultiNodeContextMenu(nodes: TreeNodeData[]): TreeContextMenuItem[] {
+    // Enhanced multi-selection menus
+    const hasFiles = nodes.some(n => n.type === 'file');
+    const hasFolders = nodes.some(n => n.type === 'directory');
+    const allSameType = hasFiles && !hasFolders || hasFolders && !hasFiles;
+
+    if (allSameType && hasFiles) {
+      // All files selected
+      return [
+        { id: 'open-all', label: `Open ${nodes.length} Files` },
+        { id: 'separator-1', label: '', type: 'separator' },
+        { id: 'compress-files', label: `Create Archive (${nodes.length} files)` },
+        { id: 'copy-paths', label: 'Copy File Paths' },
+        { id: 'separator-2', label: '', type: 'separator' },
+        { id: 'copy-all', label: `Copy ${nodes.length} Files` },
+        { id: 'cut-all', label: `Cut ${nodes.length} Files` },
+        { id: 'delete-all', label: `Delete ${nodes.length} Files` }
+      ];
+    } else if (allSameType && hasFolders) {
+      // All folders selected
+      return [
+        { id: 'open-all', label: `Open ${nodes.length} Folders` },
+        { id: 'separator-1', label: '', type: 'separator' },
+        { id: 'merge-folders', label: 'Merge Folders' },
+        { id: 'compare-folders', label: 'Compare Folders' },
+        { id: 'separator-2', label: '', type: 'separator' },
+        { id: 'copy-all', label: `Copy ${nodes.length} Folders` },
+        { id: 'cut-all', label: `Cut ${nodes.length} Folders` },
+        { id: 'delete-all', label: `Delete ${nodes.length} Folders` }
+      ];
+    } else {
+      // Mixed selection (files and folders)
+      return [
+        { id: 'open-all', label: `Open ${nodes.length} Items` },
+        { id: 'separator-1', label: '', type: 'separator' },
+        { id: 'compress-all', label: `Create Archive (${nodes.length} items)` },
+        { id: 'copy-info', label: 'Copy Selection Info' },
+        { id: 'separator-2', label: '', type: 'separator' },
+        { id: 'copy-all', label: `Copy ${nodes.length} Items` },
+        { id: 'cut-all', label: `Cut ${nodes.length} Items` },
+        { id: 'delete-all', label: `Delete ${nodes.length} Items` }
+      ];
+    }
+  }
+
+  onContextMenuAction(menuItemId: string, nodes: TreeNodeData[]): void {
+    const nodeNames = nodes.map(n => n.name).join(', ');
+    console.log(`🎯 Context menu action: ${menuItemId} on nodes: ${nodeNames}`);
+    
+    // Enhanced action handling with more detailed logging
+    switch (menuItemId) {
+      // File operations
+      case 'open':
+      case 'open-all':
+        console.log(`📂 Opening: ${nodeNames}`);
+        alert(`Opening: ${nodeNames}`);
+        break;
+      case 'open-preview':
+        console.log(`👁️ Opening preview for: ${nodeNames}`);
+        alert(`Preview mode for: ${nodeNames}`);
+        break;
+      case 'open-editor':
+        console.log(`✏️ Opening in editor: ${nodeNames}`);
+        alert(`Editor opened for: ${nodeNames}`);
+        break;
+
+      // Development operations
+      case 'run-file':
+      case 'run-tests':
+        console.log(`▶️ Running: ${nodeNames}`);
+        alert(`Executing: ${nodeNames}`);
+        break;
+      case 'debug-file':
+        console.log(`🐛 Debugging: ${nodeNames}`);
+        alert(`Debug session started for: ${nodeNames}`);
+        break;
+      case 'compile-ts':
+      case 'compile-css':
+        console.log(`🔨 Compiling: ${nodeNames}`);
+        alert(`Compilation started for: ${nodeNames}`);
+        break;
+      case 'format-code':
+      case 'format-json':
+        console.log(`🎨 Formatting: ${nodeNames}`);
+        alert(`Code formatted: ${nodeNames}`);
+        break;
+      case 'type-check':
+        console.log(`🔍 Type checking: ${nodeNames}`);
+        alert(`Type check completed for: ${nodeNames}`);
+        break;
+
+      // Creation operations
+      case 'new-file':
+      case 'new-folder':
+      case 'new-component':
+      case 'new-hook':
+      case 'new-story':
+        console.log(`➕ Creating new ${menuItemId.replace('new-', '')} in: ${nodeNames}`);
+        alert(`Creating new ${menuItemId.replace('new-', '')} in: ${nodeNames}`);
+        break;
+
+      // Export/Import operations
+      case 'export-html':
+      case 'export-pdf':
+        console.log(`📤 Exporting ${menuItemId.replace('export-', '')}: ${nodeNames}`);
+        alert(`Exporting ${menuItemId.replace('export-', '').toUpperCase()}: ${nodeNames}`);
+        break;
+      case 'import-files':
+        console.log(`📥 Importing files to: ${nodeNames}`);
+        alert(`Import dialog opened for: ${nodeNames}`);
+        break;
+
+      // File management
+      case 'rename':
+        console.log(`✏️ Renaming: ${nodeNames}`);
+        alert(`Rename dialog for: ${nodeNames}`);
+        break;
+      case 'duplicate':
+        console.log(`📋 Duplicating: ${nodeNames}`);
+        alert(`Duplicated: ${nodeNames}`);
+        break;
+      case 'delete':
+      case 'delete-all':
+        console.log(`🗑️ Deleting: ${nodeNames}`);
+        alert(`Deleted: ${nodeNames}`);
+        break;
+      case 'copy':
+      case 'copy-all':
+        console.log(`📋 Copying: ${nodeNames}`);
+        alert(`Copied to clipboard: ${nodeNames}`);
+        break;
+      case 'cut':
+      case 'cut-all':
+        console.log(`✂️ Cutting: ${nodeNames}`);
+        alert(`Cut to clipboard: ${nodeNames}`);
+        break;
+
+      // Specialized operations
+      case 'validate-json':
+      case 'validate-css':
+      case 'validate-config':
+        console.log(`✅ Validating: ${nodeNames}`);
+        alert(`Validation passed for: ${nodeNames}`);
+        break;
+      case 'compress-image':
+      case 'compress-files':
+      case 'compress-all':
+        console.log(`🗜️ Compressing: ${nodeNames}`);
+        alert(`Compression completed for: ${nodeNames}`);
+        break;
+      case 'image-info':
+      case 'properties':
+        console.log(`ℹ️ Showing properties for: ${nodeNames}`);
+        alert(`Properties: ${nodeNames}\nSize: 1.2MB\nType: ${nodes[0]?.type || 'unknown'}\nModified: ${nodes[0]?.lastModified?.toLocaleDateString() || 'unknown'}`);
+        break;
+
+      default:
+        console.log(`❓ Unknown action: ${menuItemId}`);
+        alert(`Action executed: ${menuItemId} on ${nodeNames}`);
+    }
+  }
+  
+  // Table view configuration
+  getTableColumns(): TreeTableColumn[] {
+    return [
+      {
+        id: 'name',
+        label: 'Name',
+        dataKey: 'name',
+        width: '300px',
+        sortable: true,
+        filterable: true,
+        isTreeColumn: true,
+        align: 'left'
+      },
+      {
+        id: 'type',
+        label: 'Type',
+        dataKey: 'type',
+        width: '100px',
+        sortable: true,
+        filterable: true,
+        align: 'left',
+        formatValue: (value: string) => value === 'directory' ? 'Folder' : 'File'
+      },
+      {
+        id: 'size',
+        label: 'Size',
+        dataKey: 'size',
+        width: '100px',
+        sortable: true,
+        align: 'right',
+        formatValue: (value: number, node: TreeNodeData) => {
+          if (node.type === 'directory') return '-';
+          if (!value) return '-';
+          
+          if (value < 1024) return `${value} B`;
+          if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+          if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+          return `${(value / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+        }
+      },
+      {
+        id: 'lastModified',
+        label: 'Modified',
+        dataKey: 'lastModified',
+        width: '150px',
+        sortable: true,
+        align: 'left',
+        formatValue: (value: Date) => {
+          if (!value) return '-';
+          return value.toLocaleDateString();
+        }
+      },
+      {
+        id: 'path',
+        label: 'Path',
+        dataKey: 'path',
+        width: '200px',
+        sortable: true,
+        filterable: true,
+        align: 'left'
+      }
+    ];
+  }
+
+  getDefaultTableSort(): TreeTableSort {
+    return {
+      columnId: 'name',
+      direction: 'asc'
+    };
+  }
+
+  onTableSort(sort: TreeTableSort | null): void {
+    console.log('Table sort changed:', sort);
+  }
+
+  async onTableExport(options: TreeTableExportOptions): Promise<string | void> {
+    console.log('Table export requested:', options);
+    alert(`Export to ${options.format.toUpperCase()} format requested`);
+  }
+  
+  private async simulateDelay(): Promise<void> {
+    const delay = this.slowLoading ? 1000 : this.loadingDelay;
+    await new Promise(resolve => setTimeout(resolve, delay));
+  }
+
+  private generateMockNodes(parentPath: string, depth: number): TreeNodeData[] {
+    if (depth >= this.maxDepth) {
+      return [];
+    }
+    
+    const nodes: TreeNodeData[] = [];
+    
+    // Enhanced file types with better variety for icon demo
+    const fileTypes = [
+      // Web Development
+      'js', 'jsx', 'ts', 'tsx', 'html', 'css', 'scss', 'sass', 'less',
+      // Documentation & Content
+      'md', 'mdx', 'txt', 'pdf',
+      // Data & Config
+      'json', 'yml', 'yaml', 'xml', 'env', 'config',
+      // Images
+      'jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'ico',
+      // Media
+      'mp4', 'mp3', 'wav', 'avi',
+      // Archives & Executables
+      'zip', 'tar', 'gz', 'exe', 'app', 'dmg',
+      // Development
+      'py', 'php', 'java', 'cpp', 'c', 'go', 'rs', 'rb'
+    ];
+    
+    // Enhanced folder names with special types for icon demo
+    const folderTypes = [
+      // Development Folders
+      { name: 'components', type: 'react' },
+      { name: 'hooks', type: 'react' },
+      { name: 'pages', type: 'react' },
+      { name: 'utils', type: 'code' },
+      { name: 'lib', type: 'code' },
+      { name: 'src', type: 'source' },
+      // Config & Build
+      { name: 'config', type: 'config' },
+      { name: 'build', type: 'build' },
+      { name: 'dist', type: 'build' },
+      { name: '.github', type: 'git' },
+      { name: '.vscode', type: 'vscode' },
+      // Assets & Media
+      { name: 'assets', type: 'assets' },
+      { name: 'images', type: 'images' },
+      { name: 'media', type: 'media' },
+      { name: 'public', type: 'public' },
+      // Documentation & Tests
+      { name: 'docs', type: 'docs' },
+      { name: 'tests', type: 'test' },
+      { name: '__tests__', type: 'test' },
+      // Node.js specific
+      { name: 'node_modules', type: 'node_modules' }
+    ];
+    
+    for (let i = 0; i < this.nodesPerLevel; i++) {
+      const nodeId = `${parentPath || 'root'}-${depth}-${i}`.replace(/[^a-zA-Z0-9-_]/g, '-');
+      
+      const shouldBeFolder = depth < this.maxDepth - 1 && (i < this.nodesPerLevel / 2 || Math.random() < 0.4);
+      
+      if (shouldBeFolder) {
+        const folderType = folderTypes[i % folderTypes.length] || { name: `folder-${i}`, type: 'default' };
+        const folderPath = parentPath ? `${parentPath}/${folderType.name}` : `/${folderType.name}`;
+        
+        nodes.push({
+          id: nodeId,
+          name: folderType.name,
+          path: folderPath,
+          type: 'directory',
+          hasChildren: depth < this.maxDepth - 1,
+          lastModified: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000),
+          // Add metadata for enhanced demo
+          metadata: {
+            folderType: folderType.type,
+            description: this.getFolderDescription(folderType.type)
+          }
+        });
+      } else {
+        const fileType = fileTypes[i % fileTypes.length] || 'txt';
+        const fileName = this.generateFileName(fileType, i);
+        const filePath = parentPath ? `${parentPath}/${fileName}` : `/${fileName}`;
+        
+        nodes.push({
+          id: nodeId,
+          name: fileName,
+          path: filePath,
+          type: 'file',
+          hasChildren: false,
+          size: Math.floor(Math.random() * 1000000) + 1024,
+          lastModified: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000),
+          // Add metadata for enhanced demo
+          metadata: {
+            fileType: fileType,
+            category: this.getFileCategory(fileType),
+            description: this.getFileDescription(fileType)
+          }
+        });
+      }
+    }
+    
+    return nodes;
+  }
+  
+  private generateFileName(fileType: string, index: number): string {
+    const fileNames: Record<string, string[]> = {
+      'js': ['utils', 'helpers', 'config', 'index', 'main'],
+      'jsx': ['App', 'Component', 'Button', 'Modal', 'Form'],
+      'ts': ['types', 'interfaces', 'utils', 'service', 'api'],
+      'tsx': ['HomePage', 'UserCard', 'Navigation', 'Layout', 'Dashboard'],
+      'css': ['styles', 'main', 'theme', 'reset', 'variables'],
+      'scss': ['app', 'components', 'layout', 'mixins', 'variables'],
+      'md': ['README', 'CHANGELOG', 'CONTRIBUTING', 'DOCS', 'API'],
+      'json': ['package', 'tsconfig', 'config', 'settings', 'data'],
+      'yml': ['docker-compose', 'config', 'ci', 'deployment', 'settings'],
+      'py': ['main', 'utils', 'models', 'views', 'tests'],
+      'jpg': ['hero-image', 'profile', 'banner', 'thumbnail', 'cover'],
+      'png': ['logo', 'icon', 'screenshot', 'diagram', 'chart']
+    };
+    
+    const names = fileNames[fileType] || ['file'];
+    const baseName = names[index % names.length];
+    
+    return `${baseName}.${fileType}`;
+  }
+  
+  
+  private getFolderDescription(folderType: string): string {
+    const descriptions: Record<string, string> = {
+      'react': 'React components and hooks',
+      'source': 'Source code files',
+      'code': 'Utility functions and libraries',
+      'config': 'Configuration files',
+      'build': 'Build output and artifacts',
+      'git': 'Git workflow configurations',
+      'vscode': 'VS Code editor settings',
+      'assets': 'Project assets and resources',
+      'images': 'Image files and graphics',
+      'media': 'Media files (video, audio)',
+      'public': 'Public static files',
+      'docs': 'Documentation files',
+      'test': 'Test files and specs',
+      'node_modules': 'Node.js dependencies',
+      'default': 'General folder'
+    };
+    
+    return descriptions[folderType] || 'General folder';
+  }
+  
+  
+  private getFileCategory(fileType: string): string {
+    const categories: Record<string, string> = {
+      // Web Development
+      'js': 'JavaScript', 'jsx': 'React', 'ts': 'TypeScript', 'tsx': 'React TypeScript',
+      'css': 'Stylesheet', 'scss': 'Sass', 'sass': 'Sass', 'less': 'Less',
+      'html': 'Markup', 'xml': 'Markup', 'svg': 'Vector Graphics',
+      
+      // Documentation
+      'md': 'Markdown', 'txt': 'Text', 'pdf': 'Document',
+      
+      // Configuration
+      'json': 'Data', 'yml': 'Config', 'yaml': 'Config', 'env': 'Environment',
+      
+      // Media
+      'jpg': 'Image', 'png': 'Image', 'gif': 'Image',
+      'mp3': 'Audio', 'mp4': 'Video',
+      
+      // Programming
+      'py': 'Python', 'php': 'PHP', 'java': 'Java', 'cpp': 'C++', 'go': 'Go',
+      
+      // Archives
+      'zip': 'Archive', 'tar': 'Archive',
+      
+      // Default
+      'default': 'File'
+    };
+    
+    return categories[fileType] || categories['default'] || 'File';
+  }
+  
+  private getFileDescription(fileType: string): string {
+    const descriptions: Record<string, string> = {
+      'js': 'JavaScript source file',
+      'jsx': 'React component file',
+      'ts': 'TypeScript source file',
+      'tsx': 'React TypeScript component',
+      'css': 'Cascading Style Sheet',
+      'scss': 'Sass stylesheet',
+      'html': 'HTML markup file',
+      'md': 'Markdown documentation',
+      'json': 'JSON data file',
+      'py': 'Python script',
+      'jpg': 'JPEG image file',
+      'png': 'PNG image file',
+      'mp3': 'MP3 audio file',
+      'zip': 'Compressed archive'
+    };
+    
+    return descriptions[fileType] || `${fileType.toUpperCase()} file`;
+  }
+
+  /**
+   * Get custom icon for a node based on file type and category
+   */
+  getNodeIcon(node: TreeNodeData): string | React.ComponentType<any> {
+    // If it's a directory/folder, use special folder icons
+    if (node.type === 'directory') {
+      // Special folder icons based on name
+      if (node.name.includes('components')) {
+        return Component; // React component folder
+      }
+      if (node.name.includes('assets') || node.name.includes('images')) {
+        return Image;
+      }
+      if (node.name.includes('config') || node.name.includes('settings')) {
+        return Settings;
+      }
+      if (node.name.includes('docs') || node.name.includes('documentation')) {
+        return BookOpen;
+      }
+      if (node.name.includes('test') || node.name.includes('__tests__')) {
+        return TestTube;
+      }
+      if (node.name.includes('lib') || node.name.includes('library')) {
+        return Package;
+      }
+      
+      // Default folder icons (already handled by TreeNodeList)
+      return 'folder';
+    }
+    
+    // File icons based on extension
+    const extension = node.name.split('.').pop() || '';
+    
+    switch (extension.toLowerCase()) {
+      // Web Development
+      case 'js':
+      case 'jsx':
+        return FileText; // JavaScript icon
+        
+      case 'ts':
+      case 'tsx':
+        return Code; // TypeScript icon
+        
+      case 'html':
+      case 'htm':
+        return Globe; // HTML icon
+        
+      case 'css':
+      case 'scss':
+      case 'sass':
+      case 'less':
+        return Palette; // Stylesheet icon
+        
+      // Documentation
+      case 'md':
+      case 'mdx':
+        return FileText; // Markdown icon
+        
+      case 'txt':
+        return FileText;
+        
+      case 'pdf':
+        return FileText;
+        
+      // Data & Configuration
+      case 'json':
+        return Braces; // JSON icon
+        
+      case 'yml':
+      case 'yaml':
+        return Settings; // YAML icon
+        
+      case 'xml':
+        return Code; // XML icon
+        
+      case 'env':
+        return Key; // Environment file icon
+        
+      case 'config':
+        return Settings; // Config file icon
+        
+      // Images
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif':
+      case 'webp':
+      case 'bmp':
+      case 'tiff':
+      case 'ico':
+        return Image; // Image icon
+        
+      case 'svg':
+        return Zap; // SVG icon (special since it's vector)
+        
+      // Media
+      case 'mp4':
+      case 'avi':
+      case 'mov':
+      case 'mkv':
+        return Play; // Video icon
+        
+      case 'mp3':
+      case 'wav':
+      case 'flac':
+      case 'ogg':
+        return Music; // Audio icon
+        
+      // Archives
+      case 'zip':
+      case 'tar':
+      case 'gz':
+      case '7z':
+      case 'rar':
+        return Archive; // Archive icon
+        
+      // Executables
+      case 'exe':
+      case 'app':
+      case 'deb':
+      case 'dmg':
+        return Zap; // Executable icon
+        
+      // Development Tools
+      case 'git':
+      case 'gitignore':
+        return GitBranch; // Git icon
+        
+      case 'dockerfile':
+        return Package; // Docker icon
+        
+      case 'sql':
+        return Database; // Database icon
+        
+      case 'log':
+        return FileText; // Log file icon
+        
+      // Default file icon (handled by TreeNodeList)
+      default:
+        return 'file'; // Use default File icon
+    }
+  }
+}