@anymux/ui-kit 0.1.0

package/src/file-browser/components/LeftPanel/TreeNavigationView.tsx

@@ -0,0 +1,256 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ChevronRight, ChevronDown, Folder, FolderOpen } from 'lucide-react';
+import { LeftPanelManagerModel } from '../../models/LeftPanelManagerModel';
+import { FileBrowserItem } from '../../types/FileBrowserTypes';
+
+interface TreeNavigationViewProps {
+  leftPanelManager: LeftPanelManagerModel;
+  onNavigate?: (path: string) => void;
+  onSelectionChange?: (item: any) => void;
+  className?: string;
+}
+
+interface TreeNodeProps {
+  item: FileBrowserItem;
+  level: number;
+  isExpanded: boolean;
+  isSelected: boolean;
+  onToggle: (path: string) => void;
+  onSelect: (item: FileBrowserItem) => void;
+  children?: React.ReactNode;
+}
+
+const TreeNode: React.FC<TreeNodeProps> = observer(({
+  item,
+  level,
+  isExpanded,
+  isSelected,
+  onToggle,
+  onSelect,
+  children
+}) => {
+  const isFolder = item.type === 'directory';
+  
+  const handleToggleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (isFolder) {
+      onToggle(item.path);
+    }
+  };
+
+  const handleSelectClick = () => {
+    onSelect(item);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        onSelect(item);
+        break;
+      case 'ArrowRight':
+        if (isFolder && !isExpanded) {
+          e.preventDefault();
+          onToggle(item.path);
+        }
+        break;
+      case 'ArrowLeft':
+        if (isFolder && isExpanded) {
+          e.preventDefault();
+          onToggle(item.path);
+        }
+        break;
+    }
+  };
+
+  return (
+    <div className="tree-node">
+      <div
+        className={`tree-node-item ${isSelected ? 'tree-node-selected' : ''}`}
+        style={{ paddingLeft: `${level * 16 + 8}px` }}
+        onClick={handleSelectClick}
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+        role="treeitem"
+        aria-expanded={isFolder ? isExpanded : undefined}
+        aria-selected={isSelected}
+        aria-level={level + 1}
+      >
+        {/* Expand/Collapse Toggle */}
+        {isFolder && (
+          <button
+            className="tree-node-toggle"
+            onClick={handleToggleClick}
+            aria-label={isExpanded ? 'Collapse folder' : 'Expand folder'}
+            tabIndex={-1}
+          >
+            {isExpanded ? (
+              <ChevronDown size={14} />
+            ) : (
+              <ChevronRight size={14} />
+            )}
+          </button>
+        )}
+        
+        {/* Icon */}
+        <span className="tree-node-icon" aria-hidden="true">
+          {isFolder ? (
+            isExpanded ? <FolderOpen size={16} /> : <Folder size={16} />
+          ) : (
+            // File icon would be determined by file type
+            <div className="tree-node-file-icon" />
+          )}
+        </span>
+        
+        {/* Label */}
+        <span className="tree-node-label" title={item.name}>
+          {item.name}
+        </span>
+      </div>
+      
+      {/* Children */}
+      {isFolder && isExpanded && children && (
+        <div className="tree-node-children" role="group">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const TreeNavigationView: React.FC<TreeNavigationViewProps> = observer(({
+  leftPanelManager,
+  onNavigate,
+  onSelectionChange,
+  className = ''
+}) => {
+  // For demo purposes, using a simple tree structure
+  // In real implementation, this would be loaded from the provider
+  const [expandedPaths, setExpandedPaths] = React.useState<Set<string>>(new Set(['/']));
+  const [selectedPath, setSelectedPath] = React.useState<string>('/');
+
+  const handleToggle = (path: string) => {
+    setExpandedPaths(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(path)) {
+        newSet.delete(path);
+      } else {
+        newSet.add(path);
+      }
+      return newSet;
+    });
+  };
+
+  const handleSelect = (item: FileBrowserItem) => {
+    setSelectedPath(item.path);
+    
+    // Use selection coordination through left panel manager
+    if (leftPanelManager.fileBrowserModel.selectionManager) {
+      leftPanelManager.fileBrowserModel.selectionManager.selectFromTreePanel(item);
+    }
+    
+    // Notify parent components (for backward compatibility)
+    onSelectionChange?.(item);
+    if (item.type === 'directory') {
+      // Use navigation coordination for directory navigation
+      if (leftPanelManager.fileBrowserModel.navigationManager) {
+        leftPanelManager.fileBrowserModel.navigationManager.navigateToWithCoordination(item.path, 'tree');
+      }
+      onNavigate?.(item.path);
+    }
+  };
+
+  // Demo tree data - in real implementation, this would come from provider
+  const treeData: FileBrowserItem[] = [
+    {
+      id: 'root',
+      name: 'Root',
+      path: '/',
+      type: 'directory',
+      size: 0,
+      lastModified: new Date(),
+      children: [
+        {
+                      id: 'src',
+            name: 'src',
+            path: '/src',
+            type: 'directory',
+            size: 0,
+            lastModified: new Date(),
+          children: [
+                          {
+                id: 'components',
+                name: 'components',
+                path: '/src/components',
+                type: 'directory',
+                size: 0,
+                lastModified: new Date()
+              },
+                          {
+                id: 'index.ts',
+                name: 'index.ts',
+                path: '/src/index.ts',
+                type: 'file',
+                size: 512,
+                lastModified: new Date()
+              }
+          ]
+        },
+        {
+          id: 'docs',
+          name: 'docs',
+          path: '/docs',
+          type: 'directory',
+          size: 0,
+          lastModified: new Date()
+        },
+        {
+          id: 'package.json',
+          name: 'package.json',
+          path: '/package.json',
+          type: 'file',
+          size: 1024,
+          lastModified: new Date()
+        }
+      ]
+    }
+  ];
+
+  const renderTreeNodes = (items: FileBrowserItem[], level = 0): React.ReactNode => {
+    return items.map(item => {
+      const isExpanded = expandedPaths.has(item.path);
+      const isSelected = selectedPath === item.path;
+      
+      return (
+        <TreeNode
+          key={item.id}
+          item={item}
+          level={level}
+          isExpanded={isExpanded}
+          isSelected={isSelected}
+          onToggle={handleToggle}
+          onSelect={handleSelect}
+        >
+          {item.children && renderTreeNodes(item.children, level + 1)}
+        </TreeNode>
+      );
+    });
+  };
+
+  return (
+    <div 
+      className={`tree-navigation-view ${className}`}
+      role="tree"
+      aria-label="File tree navigation"
+    >
+      {JSON.stringify(treeData)}
+      <div className="tree-container">
+        {renderTreeNodes(treeData)}
+      </div>
+    </div>
+  );
+});
+
+TreeNavigationView.displayName = 'TreeNavigationView'; 

package/src/file-browser/components/PreviewPane.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { FileText, ImageIcon, FileQuestion, Loader2, Eye } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import type { PreviewFileState } from '../models/FileBrowserModel';
+import { globalViewerRegistry } from '../registry/ViewerRegistry';
+import { ViewerHost } from './ViewerHost';
+
+export interface PreviewPaneProps {
+  previewFile: PreviewFileState | null;
+  className?: string;
+}
+
+/**
+ * File preview pane that delegates to ViewerHost for rendering.
+ *
+ * Uses the plugin registry to resolve the appropriate viewer for the file,
+ * rather than hardcoding viewer IDs. Falls back to a generic unsupported
+ * placeholder when no plugin with preview capability is found.
+ */
+export const PreviewPane: React.FC<PreviewPaneProps> = observer(({
+  previewFile,
+  className,
+}) => {
+  // Empty state: no file selected
+  if (!previewFile) {
+    return (
+      <div className={cn("h-full flex flex-col items-center justify-center text-muted-foreground bg-muted/5", className)}>
+        <Eye className="w-10 h-10 mb-3 opacity-40" />
+        <p className="text-sm font-medium">No file selected</p>
+        <p className="text-xs mt-1 opacity-60">Click a file to preview</p>
+      </div>
+    );
+  }
+
+  // Loading state
+  if (previewFile.isLoading) {
+    return (
+      <div className={cn("h-full flex flex-col", className)}>
+        <PreviewHeader name={previewFile.name} size={previewFile.size} />
+        <div className="flex-1 flex items-center justify-center">
+          <div className="flex flex-col items-center gap-2 text-muted-foreground">
+            <Loader2 className="w-6 h-6 animate-spin" />
+            <p className="text-sm">Loading preview...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Resolve viewer from registry using the new plugin API
+  const fileCtx = globalViewerRegistry.buildFileMatchContext(
+    previewFile.name,
+    {
+      path: previewFile.path,
+      mimeType: previewFile.mimeType,
+      size: previewFile.size,
+    }
+  );
+  const resolved = globalViewerRegistry.resolveViewer(fileCtx);
+
+  // Check if the resolved plugin supports preview mode
+  const canPreview = resolved?.plugin.capabilities.canPreview !== false;
+
+  if (resolved && canPreview) {
+    // Delegate rendering to ViewerHost in preview mode
+    return (
+      <div className={cn("h-full flex flex-col", className)}>
+        <PreviewHeader
+          name={previewFile.name}
+          size={previewFile.size}
+          icon={getIconType(resolved.plugin.id)}
+        />
+        <div className="flex-1 min-h-0">
+          <ViewerHost
+            viewer={resolved}
+            file={{
+              path: previewFile.path,
+              name: previewFile.name,
+              content: previewFile.content,
+              size: previewFile.size,
+              mimeType: previewFile.mimeType,
+            }}
+            mode="preview"
+            readOnly
+            className="h-full"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  // Unsupported file type — no plugin can handle preview
+  return (
+    <div className={cn("h-full flex flex-col", className)}>
+      <PreviewHeader name={previewFile.name} size={previewFile.size} icon="unknown" />
+      <div className="flex-1 flex items-center justify-center">
+        <div className="flex flex-col items-center gap-3 text-center px-4">
+          <FileQuestion className="w-12 h-12 text-muted-foreground/50" />
+          <div>
+            <p className="text-sm font-medium">{previewFile.name}</p>
+            <p className="text-xs text-muted-foreground mt-1">
+              Preview not available for this file type
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+PreviewPane.displayName = 'PreviewPane';
+
+// --- Helper to determine icon type from plugin ID ---
+
+function getIconType(pluginId: string): 'text' | 'image' | 'unknown' {
+  if (pluginId.includes('image')) return 'image';
+  if (pluginId.includes('text') || pluginId.includes('code') || pluginId.includes('editor')) return 'text';
+  return 'unknown';
+}
+
+// --- Sub-components (unchanged from original) ---
+
+const PreviewHeader: React.FC<{
+  name: string;
+  size?: number;
+  icon?: 'text' | 'image' | 'unknown';
+}> = ({ name, size, icon }) => {
+  const IconComponent = icon === 'image' ? ImageIcon : icon === 'text' ? FileText : FileQuestion;
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/20 flex-shrink-0 min-h-[36px]">
+      <IconComponent className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+      <span className="text-xs font-medium truncate flex-1" title={name}>
+        {name}
+      </span>
+      {size != null && (
+        <span className="text-[10px] text-muted-foreground flex-shrink-0">
+          {size > 1024 * 1024
+            ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+            : `${(size / 1024).toFixed(1)} KB`
+          }
+        </span>
+      )}
+    </div>
+  );
+};

package/src/file-browser/components/RightPanel/FilePreview.tsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ZoomIn, ZoomOut, RotateCcw, AlertCircle, Loader } from 'lucide-react';
+import { PreviewUIModel } from '../../models/ui/PreviewUIModel';
+
+interface FilePreviewProps {
+  previewUI: PreviewUIModel;
+  selectedItem?: any;
+  className?: string;
+}
+
+export const FilePreview: React.FC<FilePreviewProps> = observer(({
+  previewUI,
+  selectedItem,
+  className = ''
+}) => {
+  const handleZoomIn = () => {
+    previewUI.zoomIn();
+  };
+
+  const handleZoomOut = () => {
+    previewUI.zoomOut();
+  };
+
+  const handleResetZoom = () => {
+    previewUI.resetZoom();
+  };
+
+  const handleRetryPreview = () => {
+    previewUI.loadPreview();
+  };
+
+  const renderPreviewContent = () => {
+    if (previewUI.isLoading) {
+      return (
+        <div className="file-preview-loading">
+          <Loader className="animate-spin" size={24} />
+          <p>Loading preview...</p>
+        </div>
+      );
+    }
+
+    if (previewUI.hasError) {
+      return (
+        <div className="file-preview-error">
+          <AlertCircle size={24} />
+          <p>Failed to load preview</p>
+          <p className="file-preview-error-message">{previewUI.error}</p>
+          <button 
+            className="file-preview-retry-button"
+            onClick={handleRetryPreview}
+          >
+            Try Again
+          </button>
+        </div>
+      );
+    }
+
+    if (!previewUI.hasContent) {
+      return (
+        <div className="file-preview-empty">
+          <p>No preview available</p>
+          {selectedItem && (
+            <p className="file-preview-file-info">
+              {selectedItem.name} ({selectedItem.size ? formatFileSize(selectedItem.size) : 'Unknown size'})
+            </p>
+          )}
+        </div>
+      );
+    }
+
+    // Render preview based on file type
+    return renderPreviewByType();
+  };
+
+  const renderPreviewByType = () => {
+    const content = previewUI.content;
+    
+    if (!content) return null;
+
+    switch (content.type) {
+      case 'text':
+        return (
+          <div className="file-preview-text" style={{ zoom: previewUI.zoom }}>
+            <pre className="file-preview-text-content">
+              <code>{content.content}</code>
+            </pre>
+          </div>
+        );
+
+      case 'image':
+        return (
+          <div className="file-preview-image">
+            <img
+              src={content.content || '/placeholder-image.png'}
+              alt={selectedItem?.name || 'Preview'}
+              style={{ 
+                transform: `scale(${previewUI.zoom})`,
+                transformOrigin: 'top left'
+              }}
+              className="file-preview-image-content"
+            />
+            {content.metadata && (
+              <div className="file-preview-image-metadata">
+                {content.metadata.width && content.metadata.height && (
+                  <span>{content.metadata.width} × {content.metadata.height}</span>
+                )}
+                {content.metadata.format && (
+                  <span>{content.metadata.format}</span>
+                )}
+              </div>
+            )}
+          </div>
+        );
+
+      case 'document':
+        return (
+          <div className="file-preview-document" style={{ zoom: previewUI.zoom }}>
+            <div className="file-preview-document-content">
+              <pre>{content.content}</pre>
+            </div>
+            {content.metadata && (
+              <div className="file-preview-document-metadata">
+                {content.metadata.pages && (
+                  <span>{content.metadata.pages} page{content.metadata.pages !== 1 ? 's' : ''}</span>
+                )}
+                {content.metadata.format && (
+                  <span>{content.metadata.format}</span>
+                )}
+              </div>
+            )}
+          </div>
+        );
+
+      default:
+        return (
+          <div className="file-preview-unsupported">
+            <p>Preview not supported for this file type</p>
+            <p>{content.content}</p>
+          </div>
+        );
+    }
+  };
+
+  const renderZoomControls = () => {
+    if (!previewUI.canZoom) return null;
+
+    return (
+      <div className="file-preview-zoom-controls">
+        <button
+          className="file-preview-zoom-button"
+          onClick={handleZoomOut}
+          disabled={!previewUI.canZoomOut}
+          title="Zoom out"
+          aria-label="Zoom out"
+        >
+          <ZoomOut size={16} />
+        </button>
+        
+        <span className="file-preview-zoom-level">
+          {previewUI.zoomPercentage}%
+        </span>
+        
+        <button
+          className="file-preview-zoom-button"
+          onClick={handleZoomIn}
+          disabled={!previewUI.canZoomIn}
+          title="Zoom in"
+          aria-label="Zoom in"
+        >
+          <ZoomIn size={16} />
+        </button>
+        
+        <button
+          className="file-preview-zoom-button"
+          onClick={handleResetZoom}
+          title="Reset zoom"
+          aria-label="Reset zoom"
+        >
+          <RotateCcw size={16} />
+        </button>
+      </div>
+    );
+  };
+
+  return (
+    <div className={`file-preview ${className}`}>
+      {/* Preview Header */}
+      <div className="file-preview-header">
+        <div className="file-preview-title">
+          {selectedItem?.name || 'No file selected'}
+        </div>
+        
+        {renderZoomControls()}
+      </div>
+      
+      {/* Preview Content */}
+      <div className="file-preview-content">
+        {renderPreviewContent()}
+      </div>
+    </div>
+  );
+});
+
+// Helper function
+function formatFileSize(bytes: number): string {
+  const units = ['B', 'KB', 'MB', 'GB'];
+  let size = bytes;
+  let unitIndex = 0;
+  
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  
+  return `${size.toFixed(1)} ${units[unitIndex]}`;
+}
+
+FilePreview.displayName = 'FilePreview';