@anymux/ui-kit 0.1.0

package/src/file-browser/components/mobile/MobileNavigation.tsx

@@ -0,0 +1,227 @@
+import React, { useRef, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ResponsiveLayoutManagerModel } from '../../models/ResponsiveLayoutManagerModel';
+import { useGestures } from '../../utils/gestures';
+
+// Utility for class name concatenation
+const cn = (...classes: (string | undefined | boolean)[]) => {
+  return classes.filter(Boolean).join(' ');
+};
+
+interface MobileNavigationProps {
+  responsiveLayout: ResponsiveLayoutManagerModel;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const MobileNavigation = observer(({ 
+  responsiveLayout, 
+  children, 
+  className 
+}: MobileNavigationProps) => {
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Setup gesture handling
+  useGestures(
+    overlayRef as React.RefObject<HTMLElement>,
+    {
+      onSwipeDown: () => {
+        if (responsiveLayout.isMobileMenuOpen) {
+          responsiveLayout.hideMobilePanel();
+        }
+      },
+      onSwipeLeft: () => {
+        if (responsiveLayout.activePanel === 'left') {
+          responsiveLayout.showMobilePanel('right');
+        } else {
+          responsiveLayout.hideMobilePanel();
+        }
+      },
+      onSwipeRight: () => {
+        if (responsiveLayout.activePanel === 'right') {
+          responsiveLayout.showMobilePanel('left');
+        }
+      }
+    }
+  );
+
+  // Focus management
+  useEffect(() => {
+    if (responsiveLayout.isMobileMenuOpen && panelRef.current) {
+      // Focus first focusable element in panel
+      const focusableElements = panelRef.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const firstFocusable = focusableElements[0] as HTMLElement;
+      firstFocusable?.focus();
+    }
+  }, [responsiveLayout.isMobileMenuOpen, responsiveLayout.activePanel]);
+
+  // Handle escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && responsiveLayout.isMobileMenuOpen) {
+        responsiveLayout.hideMobilePanel();
+      }
+    };
+
+    if (responsiveLayout.trapFocus) {
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }
+  }, [responsiveLayout.trapFocus, responsiveLayout.isMobileMenuOpen]);
+
+  // Prevent body scroll when overlay is open
+  useEffect(() => {
+    if (responsiveLayout.isMobileMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [responsiveLayout.isMobileMenuOpen]);
+
+  if (!responsiveLayout.isMobile) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Mobile Navigation Button */}
+      <button
+        onClick={() => responsiveLayout.toggleMobileMenu()}
+        className={cn(
+          // Touch-friendly size (44px minimum)
+          'w-11 h-11 flex items-center justify-center',
+          'bg-background border border-border rounded-md',
+          'text-foreground hover:bg-accent hover:text-accent-foreground',
+          'transition-all duration-200',
+          'active:scale-95', // Touch feedback
+          responsiveLayout.isMobileMenuOpen && 'bg-accent text-accent-foreground'
+        )}
+        aria-label={responsiveLayout.isMobileMenuOpen ? 'Close navigation menu' : 'Open navigation menu'}
+        aria-expanded={responsiveLayout.isMobileMenuOpen}
+      >
+        {responsiveLayout.isMobileMenuOpen ? (
+          <X className="w-5 h-5" />
+        ) : (
+          <div className="flex flex-col space-y-1">
+            <div className="w-4 h-0.5 bg-current" />
+            <div className="w-4 h-0.5 bg-current" />
+            <div className="w-4 h-0.5 bg-current" />
+          </div>
+        )}
+      </button>
+
+      {/* Mobile Overlay */}
+      {responsiveLayout.isMobileMenuOpen && (
+        <div
+          ref={overlayRef}
+          className={cn(
+            'fixed inset-0 z-50',
+            'bg-background/80 backdrop-blur-sm',
+            'transition-all duration-300',
+            responsiveLayout.isAnimating && 'transition-all duration-300'
+          )}
+          onClick={(e) => {
+            // Close on backdrop click
+            if (e.target === e.currentTarget) {
+              responsiveLayout.hideMobilePanel();
+            }
+          }}
+        >
+          {/* Panel Container */}
+          <div
+            ref={panelRef}
+            className={cn(
+              'absolute top-0 bottom-0 w-80 max-w-[85vw]',
+              'bg-background border-r border-border',
+              'shadow-xl',
+              'transition-transform duration-300 ease-out',
+              'overflow-y-auto',
+              // Panel positioning and animation
+              responsiveLayout.activePanel === 'left' && 'left-0 transform-gpu translate-x-0',
+              responsiveLayout.activePanel === 'right' && 'right-0 transform-gpu translate-x-0',
+              !responsiveLayout.activePanel && 'translate-x-full',
+              className
+            )}
+            role="dialog"
+            aria-modal="true"
+            aria-label={`${responsiveLayout.activePanel} navigation panel`}
+          >
+            {/* Panel Header */}
+            <div className="flex items-center justify-between p-4 border-b border-border">
+              <h2 className="text-lg font-semibold">
+                {responsiveLayout.activePanel === 'left' ? 'Navigation' : 'Content'}
+              </h2>
+              
+              <div className="flex items-center space-x-2">
+                {/* Panel switcher */}
+                {responsiveLayout.activePanel === 'left' && (
+                  <button
+                    onClick={() => responsiveLayout.showMobilePanel('right')}
+                    className={cn(
+                      'w-9 h-9 flex items-center justify-center',
+                      'bg-muted hover:bg-muted-foreground/10 rounded-md',
+                      'transition-colors duration-200'
+                    )}
+                    aria-label="Switch to content panel"
+                  >
+                    <ChevronRight className="w-4 h-4" />
+                  </button>
+                )}
+                
+                {responsiveLayout.activePanel === 'right' && (
+                  <button
+                    onClick={() => responsiveLayout.showMobilePanel('left')}
+                    className={cn(
+                      'w-9 h-9 flex items-center justify-center',
+                      'bg-muted hover:bg-muted-foreground/10 rounded-md',
+                      'transition-colors duration-200'
+                    )}
+                    aria-label="Switch to navigation panel"
+                  >
+                    <ChevronLeft className="w-4 h-4" />
+                  </button>
+                )}
+
+                {/* Close button */}
+                <button
+                  onClick={() => responsiveLayout.hideMobilePanel()}
+                  className={cn(
+                    'w-9 h-9 flex items-center justify-center',
+                    'bg-muted hover:bg-muted-foreground/10 rounded-md',
+                    'transition-colors duration-200'
+                  )}
+                  aria-label="Close panel"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+
+            {/* Panel Content */}
+            <div className="flex-1">
+              {children}
+            </div>
+
+            {/* Swipe Indicator */}
+            <div className="p-4 border-t border-border">
+              <div className="flex items-center justify-center space-x-1 text-xs text-muted-foreground">
+                <div className="w-6 h-1 bg-muted rounded-full" />
+                <span>Swipe to navigate</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+});
+
+MobileNavigation.displayName = 'MobileNavigation'; 

package/src/file-browser/components/navigation/NavigationButtons.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ArrowLeft, ArrowRight, ArrowUp } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+
+export interface NavigationButtonsProps {
+  canGoBack?: boolean;
+  canGoForward?: boolean;
+  canGoUp?: boolean;
+  onGoBack?: () => void;
+  onGoForward?: () => void;
+  onGoUp?: () => void;
+  className?: string;
+  variant?: 'default' | 'compact';
+  showLabels?: boolean;
+  disabled?: boolean;
+}
+
+interface NavigationButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  shortcut?: string;
+  className?: string;
+  showLabel?: boolean;
+}
+
+const NavigationButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  label,
+  onClick,
+  disabled = false,
+  shortcut,
+  className,
+  showLabel = false,
+}) => {
+  const tooltipText = shortcut ? `${label} (${shortcut})` : label;
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        'flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
+        'hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
+        'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent',
+        className
+      )}
+      title={tooltipText}
+      aria-label={tooltipText}
+    >
+      {icon}
+      {showLabel && <span className="hidden sm:inline">{label}</span>}
+    </button>
+  );
+};
+
+const NavigationButtons: React.FC<NavigationButtonsProps> = observer(({
+  canGoBack = false,
+  canGoForward = false,
+  canGoUp = false,
+  onGoBack,
+  onGoForward,
+  onGoUp,
+  className,
+  variant = 'default',
+  showLabels = false,
+  disabled = false,
+}) => {
+  // Handle keyboard shortcuts
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only handle shortcuts when not typing in inputs
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+
+      // Check for Alt key combinations
+      if (e.altKey) {
+        switch (e.key) {
+          case 'ArrowLeft':
+            e.preventDefault();
+            if (canGoBack && onGoBack) {
+              onGoBack();
+            }
+            break;
+          case 'ArrowRight':
+            e.preventDefault();
+            if (canGoForward && onGoForward) {
+              onGoForward();
+            }
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            if (canGoUp && onGoUp) {
+              onGoUp();
+            }
+            break;
+        }
+      }
+
+      // Browser-style shortcuts
+      if ((e.ctrlKey || e.metaKey) && e.key === '[') {
+        e.preventDefault();
+        if (canGoBack && onGoBack) {
+          onGoBack();
+        }
+      }
+      
+      if ((e.ctrlKey || e.metaKey) && e.key === ']') {
+        e.preventDefault();
+        if (canGoForward && onGoForward) {
+          onGoForward();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [canGoBack, canGoForward, canGoUp, onGoBack, onGoForward, onGoUp]);
+
+  const isCompact = variant === 'compact';
+  const buttonSize = isCompact ? 'w-8 h-8 p-1' : 'px-3 py-2';
+
+  return (
+    <div
+      className={cn(
+        'flex items-center',
+        isCompact ? 'gap-1' : 'gap-2',
+        className
+      )}
+      role="toolbar"
+      aria-label="Navigation buttons"
+    >
+      <NavigationButton
+        icon={<ArrowLeft className={isCompact ? 'w-4 h-4' : 'w-4 h-4'} />}
+        label="Back"
+        onClick={onGoBack}
+        disabled={disabled || !canGoBack}
+        shortcut="Alt+←"
+        className={buttonSize}
+        showLabel={showLabels && !isCompact}
+      />
+
+      <NavigationButton
+        icon={<ArrowRight className={isCompact ? 'w-4 h-4' : 'w-4 h-4'} />}
+        label="Forward"
+        onClick={onGoForward}
+        disabled={disabled || !canGoForward}
+        shortcut="Alt+→"
+        className={buttonSize}
+        showLabel={showLabels && !isCompact}
+      />
+
+      <NavigationButton
+        icon={<ArrowUp className={isCompact ? 'w-4 h-4' : 'w-4 h-4'} />}
+        label="Up"
+        onClick={onGoUp}
+        disabled={disabled || !canGoUp}
+        shortcut="Alt+↑"
+        className={buttonSize}
+        showLabel={showLabels && !isCompact}
+      />
+    </div>
+  );
+});
+
+NavigationButtons.displayName = 'NavigationButtons';
+
+export default NavigationButtons; 

package/src/file-browser/components/shared/ErrorBoundary.tsx

@@ -0,0 +1,116 @@
+import React, { Component, ReactNode } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: (error: Error, errorInfo: string, onReset: () => void) => ReactNode;
+  onError?: (error: Error, errorInfo: string) => void;
+  className?: string;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: string | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    const errorInfoString = errorInfo.componentStack || '';
+    
+    this.setState({
+      errorInfo: errorInfoString,
+    });
+
+    // Call optional error reporting callback
+    this.props.onError?.(error, errorInfoString);
+
+    // Log error for debugging
+    console.error('FileBrowser Error Boundary caught an error:', error);
+    console.error('Error Info:', errorInfo);
+  }
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      const { fallback, className } = this.props;
+      const { error, errorInfo } = this.state;
+
+      // Use custom fallback if provided
+      if (fallback && error) {
+        return fallback(error, errorInfo || '', this.handleReset);
+      }
+
+      // Default error UI
+      return (
+        <div
+          className={cn(
+            'flex flex-col items-center justify-center p-8 text-center border border-destructive/20 rounded-lg bg-destructive/5',
+            className
+          )}
+          role="alert"
+          aria-live="assertive"
+        >
+          <AlertTriangle 
+            className="w-12 h-12 text-destructive mb-4" 
+            aria-hidden="true"
+          />
+          
+          <h2 className="text-lg font-semibold text-destructive mb-2">
+            Something went wrong
+          </h2>
+          
+          <p className="text-sm text-muted-foreground mb-4 max-w-md">
+            {error?.message || 'An unexpected error occurred while rendering the file browser.'}
+          </p>
+          
+          <div className="flex gap-2">
+            <button
+              onClick={this.handleReset}
+              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={() => window.location.reload()}
+              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"
+            >
+              Reload Page
+            </button>
+          </div>
+          
+          {/* Error details removed to prevent build issues */}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary; 

package/src/file-browser/components/shared/FileBrowserItem.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { cn } from '../../../lib/utils';
+import { FileBrowserItem as FileBrowserItemType } from '../../types/FileBrowserTypes';
+import FileIcon from './FileIcon';
+
+export interface FileBrowserItemProps {
+  item: FileBrowserItemType;
+  isSelected?: boolean;
+  isHovered?: boolean;
+  showDetails?: boolean;
+  showIcon?: boolean;
+  showSize?: boolean;
+  showDate?: boolean;
+  iconSize?: 'sm' | 'md' | 'lg';
+  layout?: 'horizontal' | 'vertical';
+  onClick?: (item: FileBrowserItemType, event: React.MouseEvent) => void;
+  onDoubleClick?: (item: FileBrowserItemType, event: React.MouseEvent) => void;
+  onContextMenu?: (item: FileBrowserItemType, event: React.MouseEvent) => void;
+  onKeyDown?: (item: FileBrowserItemType, event: React.KeyboardEvent) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+const iconSizeClasses = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+};
+
+const FileBrowserItemComponent: React.FC<FileBrowserItemProps> = observer(({
+  item,
+  isSelected = false,
+  isHovered = false,
+  showDetails = false,
+  showIcon = true,
+  showSize = false,
+  showDate = false,
+  iconSize = 'md',
+  layout = 'horizontal',
+  onClick,
+  onDoubleClick,
+  onContextMenu,
+  onKeyDown,
+  className,
+  style,
+  children,
+}) => {
+  const handleClick = (event: React.MouseEvent) => {
+    onClick?.(item, event);
+  };
+
+  const handleDoubleClick = (event: React.MouseEvent) => {
+    onDoubleClick?.(item, event);
+  };
+
+  const handleContextMenu = (event: React.MouseEvent) => {
+    event.preventDefault();
+    onContextMenu?.(item, event);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick?.(item, event as any);
+    }
+    onKeyDown?.(item, event);
+  };
+
+  const formatFileSize = (bytes?: number): string => {
+    if (!bytes || bytes === 0) return '';
+    
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let size = bytes;
+    let unitIndex = 0;
+    
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+    
+    return `${size.toFixed(unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+  };
+
+  const formatDate = (date?: Date | string): string => {
+    if (!date) return '';
+    
+    const dateObj = typeof date === 'string' ? new Date(date) : date;
+    return dateObj.toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  const isVertical = layout === 'vertical';
+
+  return (
+    <div
+      className={cn(
+        'group relative flex items-center gap-2 p-2 rounded-md cursor-pointer transition-colors',
+        'hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
+        isSelected && 'bg-primary/10 border border-primary/20',
+        isHovered && !isSelected && 'bg-muted/30',
+        isVertical && 'flex-col text-center',
+        className
+      )}
+      style={style}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onContextMenu={handleContextMenu}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="button"
+      aria-label={`${item.type === 'directory' ? 'Folder' : 'File'}: ${item.name}`}
+      aria-selected={isSelected}
+    >
+      {/* Icon */}
+      {showIcon && (
+        <div className={cn('flex-shrink-0', isVertical && 'mb-1')}>
+          <FileIcon
+            item={item}
+            size={iconSize}
+            className={iconSizeClasses[iconSize]}
+          />
+        </div>
+      )}
+
+      {/* Content */}
+      <div className={cn(
+        'flex-1 min-w-0',
+        isVertical ? 'text-center' : 'flex items-center justify-between'
+      )}>
+        {/* Name and details */}
+        <div className={cn('min-w-0', !isVertical && 'flex-1')}>
+          <div className={cn(
+            'font-medium text-sm truncate',
+            item.type === 'directory' && 'text-primary',
+            isVertical && 'text-center'
+          )} title={item.name}>
+            {item.name}
+          </div>
+          
+          {showDetails && (
+            <div className={cn(
+              'text-xs text-muted-foreground mt-0.5',
+              isVertical && 'text-center'
+            )}>
+              {item.type === 'directory' ? 'Folder' : 'File'}
+            </div>
+          )}
+        </div>
+
+        {/* Size and date */}
+        {(showSize || showDate) && !isVertical && (
+          <div className="flex-shrink-0 text-xs text-muted-foreground ml-2">
+            <div className="flex flex-col items-end gap-0.5">
+              {showSize && item.size !== undefined && (
+                <span>{formatFileSize(item.size)}</span>
+              )}
+              {showDate && item.lastModified && (
+                <span>{formatDate(item.lastModified)}</span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Vertical layout size/date */}
+        {(showSize || showDate) && isVertical && (
+          <div className="text-xs text-muted-foreground mt-1 text-center">
+            {showSize && item.size !== undefined && (
+              <div>{formatFileSize(item.size)}</div>
+            )}
+            {showDate && item.lastModified && (
+              <div>{formatDate(item.lastModified)}</div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Custom children */}
+      {children}
+
+      {/* Selection indicator */}
+      {isSelected && (
+        <div className="absolute inset-0 border-2 border-primary rounded-md pointer-events-none" />
+      )}
+    </div>
+  );
+});
+
+FileBrowserItemComponent.displayName = 'FileBrowserItem';
+
+export default FileBrowserItemComponent;