@anymux/ui-kit 0.1.0

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

@@ -0,0 +1,209 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { AlertCircle, FolderOpen } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { FileBrowserModel } from '../models/FileBrowserModel';
+import { LoadingSpinner } from '@anymux/ui/components/loading-spinner';
+import { ErrorBoundary } from './shared/ErrorBoundary';
+
+export interface FileBrowserContentProps {
+  model: FileBrowserModel;
+  className?: string;
+  currentViewMode?: string;
+}
+
+const FileBrowserContent: React.FC<FileBrowserContentProps> = observer(({
+  model,
+  className,
+  currentViewMode = 'tree',
+}) => {
+  // Loading state
+  if (model.isLoading) {
+    return (
+      <div className={cn('flex items-center justify-center p-8', className)}>
+        <LoadingSpinner
+          size="lg"
+          label="Loading files..."
+        />
+      </div>
+    );
+  }
+
+  // Error state
+  if (model.hasError && model.error) {
+    return (
+      <div className={cn('p-8', className)}>
+        <div 
+          className="flex flex-col items-center justify-center text-center border border-destructive/20 rounded-lg bg-destructive/5 p-8"
+          role="alert"
+          aria-live="assertive"
+        >
+          <AlertCircle className="w-12 h-12 text-destructive mb-4" />
+          
+          <h3 className="text-lg font-semibold text-destructive mb-2">
+            Error Loading Files
+          </h3>
+          
+          <p className="text-sm text-muted-foreground mb-4 max-w-md">
+            {model.error}
+          </p>
+          
+          <div className="flex gap-2">
+            <button
+              onClick={() => model.refreshItems()}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors"
+            >
+              Try Again
+            </button>
+            
+            <button
+              onClick={() => model.clearError()}
+              className="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2 transition-colors"
+            >
+              Dismiss
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (!model.hasItems) {
+    return (
+      <div className={cn('flex items-center justify-center p-8', className)}>
+        <div className="text-center">
+          <FolderOpen className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
+          
+          <h3 className="text-lg font-semibold text-muted-foreground mb-2">
+            No Files Found
+          </h3>
+          
+          <p className="text-sm text-muted-foreground max-w-md">
+            This directory is empty or no files match the current filters.
+          </p>
+          
+          <button
+            onClick={() => model.refreshItems()}
+            className="mt-4 px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2 transition-colors"
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Content with view mode switching
+  const renderViewMode = () => {
+    switch (currentViewMode) {
+      case 'tree':
+        return <TreeViewPlaceholder model={model} />;
+      case 'list':
+        return <ListViewPlaceholder model={model} />;
+      case 'thumbnail':
+        return <ThumbnailViewPlaceholder model={model} />;
+      default:
+        return <TreeViewPlaceholder model={model} />;
+    }
+  };
+
+  return (
+    <ErrorBoundary>
+      <div 
+        className={cn('flex-1 overflow-auto', className)}
+        role="main"
+        aria-label={`File browser content - ${currentViewMode} view`}
+      >
+        {renderViewMode()}
+      </div>
+    </ErrorBoundary>
+  );
+});
+
+// Placeholder components for view modes (to be implemented in Phase 4)
+const TreeViewPlaceholder: React.FC<{ model: FileBrowserModel }> = observer(({ model }) => (
+  <div className="p-4">
+    <div className="text-sm text-muted-foreground mb-4">
+      Tree View Mode - {model.itemsArray.length} items
+    </div>
+    <div className="space-y-1">
+      {model.itemsArray.map((item) => (
+        <div 
+          key={item.id} 
+          className="flex items-center gap-2 p-2 hover:bg-muted rounded-md cursor-pointer"
+          onClick={() => {
+            if (item.type === 'directory') {
+              model.setCurrentPath(item.path);
+            }
+          }}
+        >
+          <span className="text-sm">{item.type === 'directory' ? '📁' : '📄'}</span>
+          <span className="text-sm">{item.name}</span>
+        </div>
+      ))}
+    </div>
+  </div>
+));
+
+const ListViewPlaceholder: React.FC<{ model: FileBrowserModel }> = observer(({ model }) => (
+  <div className="p-4">
+    <div className="text-sm text-muted-foreground mb-4">
+      List View Mode - {model.itemsArray.length} items
+    </div>
+    <div className="grid grid-cols-1 gap-1">
+      {model.itemsArray.map((item) => (
+        <div 
+          key={item.id} 
+          className="grid grid-cols-3 gap-4 p-2 hover:bg-muted rounded-md cursor-pointer text-sm"
+          onClick={() => {
+            if (item.type === 'directory') {
+              model.setCurrentPath(item.path);
+            }
+          }}
+        >
+          <span className="flex items-center gap-2">
+            <span>{item.type === 'directory' ? '📁' : '📄'}</span>
+            {item.name}
+          </span>
+          <span className="text-muted-foreground">
+            {item.size ? `${Math.round(item.size / 1024)}KB` : '-'}
+          </span>
+          <span className="text-muted-foreground">
+            {item.lastModified ? item.lastModified.toLocaleDateString() : '-'}
+          </span>
+        </div>
+      ))}
+    </div>
+  </div>
+));
+
+const ThumbnailViewPlaceholder: React.FC<{ model: FileBrowserModel }> = observer(({ model }) => (
+  <div className="p-4">
+    <div className="text-sm text-muted-foreground mb-4">
+      Thumbnail View Mode - {model.itemsArray.length} items
+    </div>
+    <div className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">
+      {model.itemsArray.map((item) => (
+        <div 
+          key={item.id} 
+          className="flex flex-col items-center p-2 hover:bg-muted rounded-md cursor-pointer"
+          onClick={() => {
+            if (item.type === 'directory') {
+              model.setCurrentPath(item.path);
+            }
+          }}
+        >
+          <div className="w-12 h-12 flex items-center justify-center text-2xl mb-2">
+            {item.type === 'directory' ? '📁' : '📄'}
+          </div>
+          <span className="text-xs text-center line-clamp-2">{item.name}</span>
+        </div>
+      ))}
+    </div>
+  </div>
+));
+
+FileBrowserContent.displayName = 'FileBrowserContent';
+
+export default FileBrowserContent; 

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

@@ -0,0 +1,151 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ChevronRight, Home } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { FileBrowserModel } from '../models/FileBrowserModel';
+import { ToolbarManagerModel } from '../models/ToolbarManagerModel';
+import type { FileBrowserItem } from '../types/FileBrowserTypes';
+import type { ToolbarAction, ActionContext } from '../types/ProviderTypes';
+
+export interface FileBrowserHeaderProps {
+  model: FileBrowserModel;
+  toolbarManager?: ToolbarManagerModel;
+  className?: string;
+  showBreadcrumb?: boolean;
+  showToolbar?: boolean;
+}
+
+const FileBrowserHeader: React.FC<FileBrowserHeaderProps> = observer(({
+  model,
+  toolbarManager,
+  className,
+  showBreadcrumb = true,
+  showToolbar = true,
+}) => {
+  const currentPath = model.currentPath;
+  const pathSegments = currentPath.split('/').filter(Boolean);
+
+  const handlePathClick = (index: number) => {
+    const newPath = index === -1 ? '/' : '/' + pathSegments.slice(0, index + 1).join('/');
+    model.setCurrentPath(newPath);
+  };
+
+  const renderBreadcrumb = () => {
+    if (!showBreadcrumb) return null;
+
+    return (
+      <div className="flex items-center gap-1 min-w-0 flex-1">
+        {/* Root/Home button */}
+        <button
+          onClick={() => handlePathClick(-1)}
+          className={cn(
+            'flex items-center gap-1 px-2 py-1 rounded-md text-sm hover:bg-muted transition-colors',
+            currentPath === '/' && 'bg-muted text-muted-foreground'
+          )}
+          aria-label="Navigate to root"
+        >
+          <Home className="w-4 h-4" />
+          <span className="hidden sm:inline">Root</span>
+        </button>
+
+        {/* Path segments */}
+        {pathSegments.length > 0 && (
+          <>
+            <ChevronRight className="w-4 h-4 text-muted-foreground" />
+            <div className="flex items-center gap-1 min-w-0 flex-1">
+              {pathSegments.map((segment, index) => {
+                const isLast = index === pathSegments.length - 1;
+
+                return (
+                  <React.Fragment key={index}>
+                    <button
+                      onClick={() => handlePathClick(index)}
+                      className={cn(
+                        'px-2 py-1 rounded-md text-sm transition-colors truncate',
+                        isLast
+                          ? 'bg-muted text-muted-foreground font-medium'
+                          : 'hover:bg-muted'
+                      )}
+                      title={segment}
+                      aria-current={isLast ? 'page' : undefined}
+                    >
+                      {segment}
+                    </button>
+
+                    {!isLast && (
+                      <ChevronRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </div>
+          </>
+        )}
+      </div>
+    );
+  };
+
+  const renderToolbar = () => {
+    if (!showToolbar) return null;
+
+    if (!toolbarManager) {
+      return (
+        <div className="flex items-center gap-1" />
+      );
+    }
+
+    const context: ActionContext = {
+      selectedItems: [],
+      currentPath: model.currentPath,
+      provider: undefined as any,
+      viewMode: 'list',
+      allItems: model.itemsArray as any as FileBrowserItem[]
+    };
+
+    const actions = toolbarManager.getAvailableActions(context);
+
+    if (actions.length === 0) {
+      return <div className="flex items-center gap-1" />;
+    }
+
+    return (
+      <div className="flex items-center gap-1">
+        {actions.map((action: ToolbarAction) => (
+          <button
+            key={action.id}
+            onClick={() => action.action(context)}
+            disabled={action.isEnabled ? !action.isEnabled(context) : false}
+            className={cn(
+              'flex items-center gap-1 px-2 py-1 rounded-md text-sm transition-colors',
+              'hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed',
+              action.variant === 'primary' && 'bg-primary text-primary-foreground hover:bg-primary/90',
+              action.variant === 'destructive' && 'text-destructive hover:bg-destructive/10'
+            )}
+            title={action.tooltip || action.label}
+          >
+            {action.showLabel !== false && (
+              <span className="hidden sm:inline">{action.label}</span>
+            )}
+          </button>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <header
+      className={cn(
+        'flex items-center justify-between gap-4 p-4 border-b bg-background',
+        className
+      )}
+      role="banner"
+    >
+      {renderBreadcrumb()}
+      {renderToolbar()}
+    </header>
+  );
+});
+
+FileBrowserHeader.displayName = 'FileBrowserHeader';
+
+export default FileBrowserHeader;

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

@@ -0,0 +1,145 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ChevronLeft, ChevronRight, ArrowUp, Menu, Home } from 'lucide-react';
+import { NavigationManagerModel } from '../models/NavigationManagerModel';
+import { ResponsiveLayoutManagerModel } from '../models/ResponsiveLayoutManagerModel';
+import { FileBrowserItem } from '../types/FileBrowserTypes';
+import { PathBreadcrumb } from '@anymux/ui/components/path-breadcrumb';
+import { MobileNavigation } from './mobile/MobileNavigation';
+
+interface FileBrowserToolbarProps {
+  navigationManager: NavigationManagerModel;
+  responsiveManager: ResponsiveLayoutManagerModel;
+  currentItem?: FileBrowserItem | null;
+  onNavigate?: (path: string) => void;
+  className?: string;
+}
+
+
+
+export const FileBrowserToolbar: React.FC<FileBrowserToolbarProps> = observer(({
+  navigationManager,
+  responsiveManager,
+  currentItem,
+  onNavigate,
+  className = ''
+}) => {
+
+
+  const handleBackClick = () => {
+    if (navigationManager.canGoBack) {
+      const previousPath = navigationManager.goBack();
+      if (previousPath) {
+        // Use navigation coordination for history navigation
+        navigationManager.navigateToWithCoordination(previousPath, 'history');
+        onNavigate?.(previousPath);
+      }
+    }
+  };
+
+  const handleForwardClick = () => {
+    if (navigationManager.canGoForward) {
+      const nextPath = navigationManager.goForward();
+      if (nextPath) {
+        // Use navigation coordination for history navigation
+        navigationManager.navigateToWithCoordination(nextPath, 'history');
+        onNavigate?.(nextPath);
+      }
+    }
+  };
+
+  const handleUpClick = () => {
+    const parentPath = getParentPath(currentItem?.path || navigationManager.currentPath || '/');
+    if (parentPath) {
+      // Use navigation coordination for up navigation
+      navigationManager.navigateToWithCoordination(parentPath, 'breadcrumb');
+      onNavigate?.(parentPath);
+    }
+  };
+
+  return (
+    <div className={`file-browser-toolbar ${className}`}>
+      <div className="toolbar-left">
+        {/* Mobile Navigation */}
+        <MobileNavigation responsiveLayout={responsiveManager}>
+          <div className="mobile-nav-placeholder">
+            Mobile navigation content will be provided by parent component
+          </div>
+        </MobileNavigation>
+
+        {/* Navigation Controls */}
+        <div className="navigation-controls">
+          <button
+            className="nav-button"
+            onClick={handleBackClick}
+            disabled={!navigationManager.canGoBack}
+            aria-label="Go back"
+            title="Go back"
+          >
+            <ChevronLeft size={16} />
+          </button>
+          
+          <button
+            className="nav-button"
+            onClick={handleForwardClick}
+            disabled={!navigationManager.canGoForward}
+            aria-label="Go forward"
+            title="Go forward"
+          >
+            <ChevronRight size={16} />
+          </button>
+          
+          <button
+            className="nav-button"
+            onClick={handleUpClick}
+            disabled={!canGoUp(currentItem?.path || navigationManager.currentPath || '/')}
+            aria-label="Go up one level"
+            title="Go up"
+          >
+            <ArrowUp size={16} />
+          </button>
+        </div>
+      </div>
+
+      {/* Breadcrumbs */}
+      <div className="breadcrumbs-container">
+        <PathBreadcrumb
+          path={currentItem?.path || navigationManager.currentPath || '/'}
+          onNavigate={(path) => {
+            navigationManager.navigateToWithCoordination(path, 'breadcrumb');
+            onNavigate?.(path);
+          }}
+          maxSegments={responsiveManager.isMobile ? 2 : 4}
+          showHome
+          rootLabel="Home"
+          className="file-browser-breadcrumbs"
+        />
+      </div>
+
+      {/* Global Actions */}
+      <div className="toolbar-right">
+        {/* Additional actions can be added here */}
+      </div>
+    </div>
+  );
+});
+
+// Helper functions
+
+function getParentPath(path: string): string | null {
+  if (!path || path === '/') return null;
+  
+  const normalized = path.endsWith('/') ? path.slice(0, -1) : path;
+  const lastSlashIndex = normalized.lastIndexOf('/');
+  
+  if (lastSlashIndex === 0) return '/';
+  if (lastSlashIndex === -1) return null;
+  
+  return normalized.substring(0, lastSlashIndex);
+}
+
+function canGoUp(path: string): boolean {
+  return getParentPath(path) !== null;
+}
+
+FileBrowserToolbar.displayName = 'FileBrowserToolbar'; 

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { LeftPanelManagerModel } from '../../models/LeftPanelManagerModel';
+import { ResponsiveLayoutManagerModel } from '../../models/ResponsiveLayoutManagerModel';
+import { LeftPanelTabs } from './LeftPanelTabs';
+import { TreeNavigationView } from './TreeNavigationView';
+
+interface LeftPanelProps {
+  leftPanelManager: LeftPanelManagerModel;
+  responsiveManager: ResponsiveLayoutManagerModel;
+  onNavigate?: (path: string) => void;
+  onSelectionChange?: (item: any) => void;
+  className?: string;
+}
+
+export const LeftPanel: React.FC<LeftPanelProps> = observer(({
+  leftPanelManager,
+  responsiveManager,
+  onNavigate,
+  onSelectionChange,
+  className = ''
+}) => {
+  const currentMode = leftPanelManager.currentMode;
+  const currentModeData = leftPanelManager.currentModeData;
+
+  // Handle mobile overlay
+  const shouldShowAsOverlay = responsiveManager.isMobile && responsiveManager.activePanel === 'left';
+  const isVisible = responsiveManager.shouldShowLeftPanel;
+
+  const handleModeChange = (modeId: string) => {
+    leftPanelManager.setCurrentMode(modeId);
+  };
+
+  const handleOverlayClick = (event: React.MouseEvent) => {
+    // Close overlay when clicking outside on mobile
+    if (event.target === event.currentTarget && shouldShowAsOverlay) {
+      responsiveManager.hideMobilePanel();
+    }
+  };
+
+  const renderCurrentModeView = () => {
+    switch (currentMode) {
+      case 'tree':
+        return (
+          <TreeNavigationView
+            leftPanelManager={leftPanelManager}
+            onNavigate={onNavigate}
+            onSelectionChange={onSelectionChange}
+          />
+        );
+      
+      default:
+        // For future modes like git-graph, bookmarks, etc.
+        if (currentModeData?.component) {
+          const Component = currentModeData.component;
+          return (
+            <Component
+              leftPanelManager={leftPanelManager}
+              onNavigate={onNavigate}
+              onSelectionChange={onSelectionChange}
+            />
+          );
+        }
+        
+        return (
+          <div className="left-panel-placeholder">
+            <p>Mode "{currentMode}" not implemented yet</p>
+          </div>
+        );
+    }
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div 
+      className={`left-panel ${shouldShowAsOverlay ? 'left-panel-overlay' : 'left-panel-docked'} ${className}`}
+      onClick={handleOverlayClick}
+      aria-label="Navigation panel"
+      role="navigation"
+    >
+      <div 
+        className="left-panel-content"
+        onClick={(e) => e.stopPropagation()} // Prevent overlay close when clicking content
+      >
+        {/* Tab Switcher */}
+        <LeftPanelTabs
+          leftPanelManager={leftPanelManager}
+          onModeChange={handleModeChange}
+        />
+        
+        {/* Current Mode View */}
+        <div className="left-panel-view-container">
+          {renderCurrentModeView()}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+LeftPanel.displayName = 'LeftPanel'; 

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { LeftPanelManagerModel } from '../../models/LeftPanelManagerModel';
+
+interface LeftPanelTabsProps {
+  leftPanelManager: LeftPanelManagerModel;
+  onModeChange: (modeId: string) => void;
+  className?: string;
+}
+
+export const LeftPanelTabs: React.FC<LeftPanelTabsProps> = observer(({
+  leftPanelManager,
+  onModeChange,
+  className = ''
+}) => {
+  const availableModes = leftPanelManager.availableModesList;
+  const currentMode = leftPanelManager.currentMode;
+
+  // Don't show tabs if there's only one mode
+  if (availableModes.length <= 1) {
+    return null;
+  }
+
+  const handleTabClick = (modeId: string) => {
+    if (modeId !== currentMode) {
+      onModeChange(modeId);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent, modeId: string) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleTabClick(modeId);
+    }
+  };
+
+  return (
+    <div 
+      className={`left-panel-tabs ${className}`}
+      role="tablist"
+      aria-label="Navigation modes"
+    >
+      {availableModes.map((mode) => (
+        <button
+          key={mode.id}
+          className={`left-panel-tab ${currentMode === mode.id ? 'left-panel-tab-active' : 'left-panel-tab-inactive'}`}
+          onClick={() => handleTabClick(mode.id)}
+          onKeyDown={(e) => handleKeyDown(e, mode.id)}
+          role="tab"
+          aria-selected={currentMode === mode.id}
+          aria-controls={`left-panel-view-${mode.id}`}
+          title={mode.name}
+          disabled={!mode.isAvailable?.()}
+        >
+          {/* Icon */}
+          <span className="left-panel-tab-icon" aria-hidden="true">
+            {mode.icon}
+          </span>
+          
+          {/* Label */}
+          <span className="left-panel-tab-label">
+            {mode.name}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+});
+
+LeftPanelTabs.displayName = 'LeftPanelTabs';