@anymux/ui-kit 0.1.0

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

@@ -0,0 +1,186 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { RightPanelManagerModel } from '../../models/RightPanelManagerModel';
+import { ResponsiveLayoutManagerModel } from '../../models/ResponsiveLayoutManagerModel';
+import { RightPanelToolbar } from './RightPanelToolbar';
+import { FilePreview } from './FilePreview';
+
+// Import view components
+import ListView from '../views/ListView/ListView';
+import ThumbnailView from '../views/ThumbnailView/ThumbnailView';
+import TreemapView from '../views/TreemapView/TreemapView';
+
+interface RightPanelProps {
+  rightPanelManager: RightPanelManagerModel;
+  responsiveManager: ResponsiveLayoutManagerModel;
+  items?: any[];
+  onItemSelect?: (item: any) => void;
+  onItemActivate?: (item: any) => void;
+  onNavigate?: (path: string) => void;
+  className?: string;
+}
+
+export const RightPanel: React.FC<RightPanelProps> = observer(({
+  rightPanelManager,
+  responsiveManager,
+  items = [],
+  onItemSelect,
+  onItemActivate,
+  onNavigate,
+  className = ''
+}) => {
+  const contentType = rightPanelManager.contentType;
+  const currentViewMode = rightPanelManager.currentViewMode;
+  const isVisible = responsiveManager.shouldShowRightPanel;
+
+  // Handle mobile overlay behavior
+  const shouldShowAsOverlay = responsiveManager.isMobile && responsiveManager.activePanel === 'right';
+
+  const handleOverlayClick = (event: React.MouseEvent) => {
+    // Close overlay when clicking outside on mobile
+    if (event.target === event.currentTarget && shouldShowAsOverlay) {
+      responsiveManager.hideMobilePanel();
+    }
+  };
+
+  const handleViewModeChange = (viewModeId: string) => {
+    rightPanelManager.setCurrentViewMode(viewModeId);
+  };
+
+  const handleItemSelectWithCoordination = (item: any) => {
+    // Use selection coordination through right panel manager
+    if (rightPanelManager.fileBrowserModel?.selectionManager) {
+      rightPanelManager.fileBrowserModel.selectionManager.selectFromRightPanel(item);
+    }
+    
+    // Call original callback for backward compatibility
+    onItemSelect?.(item);
+  };
+
+  const handleItemActivateWithCoordination = (item: any) => {
+    // Handle double-click/activation - navigate to folders
+    if (item.type === 'directory' && rightPanelManager.fileBrowserModel?.navigationManager) {
+      rightPanelManager.fileBrowserModel.navigationManager.navigateToWithCoordination(item.path, 'right');
+    }
+    
+    // Call original callback for backward compatibility
+    onItemActivate?.(item);
+  };
+
+  const renderContent = () => {
+    switch (contentType) {
+      case 'file':
+        return (
+          <FilePreview
+            previewUI={rightPanelManager.previewUI}
+            selectedItem={rightPanelManager.selectedItem}
+            className="right-panel-file-preview"
+          />
+        );
+
+      case 'folder':
+        return renderFolderContent();
+
+      case 'empty':
+      default:
+        return (
+          <div className="right-panel-empty-state">
+            <p>Select a file or folder to view its contents</p>
+          </div>
+        );
+    }
+  };
+
+  const renderFolderContent = () => {
+    const currentUIModel = rightPanelManager.currentUIModel;
+    
+    switch (currentViewMode) {
+      case 'list':
+        return (
+          <ListView
+            items={items}
+            listModel={rightPanelManager.listViewUI}
+            responsiveManager={responsiveManager}
+            onItemClick={handleItemSelectWithCoordination}
+            onItemActivate={handleItemActivateWithCoordination}
+            className="right-panel-list-view"
+          />
+        );
+
+      case 'thumbnail':
+        return (
+          <ThumbnailView
+            items={items}
+            thumbnailModel={rightPanelManager.thumbnailViewUI}
+            responsiveManager={responsiveManager}
+            onItemClick={handleItemSelectWithCoordination}
+            onItemActivate={handleItemActivateWithCoordination}
+            className="right-panel-thumbnail-view"
+          />
+        );
+
+      case 'treemap':
+        return (
+          <TreemapView
+            items={items}
+            treemapModel={rightPanelManager.treemapViewUI}
+            onItemClick={handleItemSelectWithCoordination}
+            onItemActivate={handleItemActivateWithCoordination}
+            className="right-panel-treemap-view"
+          />
+        );
+
+      case 'detail':
+        // Use ListView with detail configuration
+        return (
+          <ListView
+            items={items}
+            listModel={rightPanelManager.listViewUI}
+            onItemClick={handleItemSelectWithCoordination}
+            onItemActivate={handleItemActivateWithCoordination}
+            className="right-panel-detail-view"
+          />
+        );
+
+      default:
+        return (
+          <div className="right-panel-unknown-view">
+            <p>Unknown view mode: {currentViewMode}</p>
+          </div>
+        );
+    }
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div 
+      className={`right-panel ${shouldShowAsOverlay ? 'right-panel-overlay' : 'right-panel-docked'} ${className}`}
+      onClick={handleOverlayClick}
+      aria-label="Content panel"
+      role="main"
+    >
+      <div 
+        className="right-panel-content"
+        onClick={(e) => e.stopPropagation()} // Prevent overlay close when clicking content
+      >
+        {/* Toolbar with view mode toggles */}
+        <RightPanelToolbar
+          rightPanelManager={rightPanelManager}
+          responsiveManager={responsiveManager}
+          onViewModeChange={handleViewModeChange}
+          onNavigate={onNavigate}
+        />
+        
+        {/* Content Area */}
+        <div className="right-panel-main-content">
+          {renderContent()}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+RightPanel.displayName = 'RightPanel'; 

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { List, Grid3X3, LayoutDashboard, Info, X } from 'lucide-react';
+import { RightPanelManagerModel } from '../../models/RightPanelManagerModel';
+import { ResponsiveLayoutManagerModel } from '../../models/ResponsiveLayoutManagerModel';
+
+interface RightPanelToolbarProps {
+  rightPanelManager: RightPanelManagerModel;
+  responsiveManager: ResponsiveLayoutManagerModel;
+  onViewModeChange: (viewModeId: string) => void;
+  onNavigate?: (path: string) => void;
+  className?: string;
+}
+
+const VIEW_MODE_ICONS = {
+  list: List,
+  thumbnail: Grid3X3,
+  treemap: LayoutDashboard,
+  detail: Info
+};
+
+export const RightPanelToolbar: React.FC<RightPanelToolbarProps> = observer(({
+  rightPanelManager,
+  responsiveManager,
+  onViewModeChange,
+  onNavigate,
+  className = ''
+}) => {
+  const availableViewModes = rightPanelManager.availableViewModesList;
+  const currentViewMode = rightPanelManager.currentViewMode;
+  const contentType = rightPanelManager.contentType;
+  const hasViewModeOptions = rightPanelManager.hasViewModeOptions;
+  
+  const handleViewModeClick = (viewModeId: string) => {
+    if (viewModeId !== currentViewMode) {
+      onViewModeChange(viewModeId);
+    }
+  };
+
+  const handleCloseClick = () => {
+    if (responsiveManager.isMobile) {
+      responsiveManager.hideMobilePanel();
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent, viewModeId: string) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleViewModeClick(viewModeId);
+    }
+  };
+
+  return (
+    <div className={`right-panel-toolbar ${className}`}>
+      <div className="right-panel-toolbar-content">
+        {/* Content Type Indicator */}
+        <div className="right-panel-content-info">
+          <span className="right-panel-content-type">
+            {contentType === 'file' ? 'File Preview' : 
+             contentType === 'folder' ? 'Folder Contents' : 
+             'No Selection'}
+          </span>
+        </div>
+
+        {/* View Mode Toggles - Only show for folder content */}
+        {hasViewModeOptions && (
+          <div 
+            className="right-panel-view-modes"
+            role="toolbar"
+            aria-label="View modes"
+          >
+            {availableViewModes.map((viewMode) => {
+              const IconComponent = VIEW_MODE_ICONS[viewMode.id as keyof typeof VIEW_MODE_ICONS];
+              const isActive = currentViewMode === viewMode.id;
+              
+              return (
+                <button
+                  key={viewMode.id}
+                  className={`right-panel-view-mode-button ${isActive ? 'active' : ''}`}
+                  onClick={() => handleViewModeClick(viewMode.id)}
+                  onKeyDown={(e) => handleKeyDown(e, viewMode.id)}
+                  title={viewMode.name}
+                  aria-label={`Switch to ${viewMode.name} view`}
+                  aria-pressed={isActive}
+                  disabled={!viewMode.applicableFor?.(contentType)}
+                >
+                  {IconComponent && <IconComponent size={16} />}
+                  <span className="right-panel-view-mode-label">
+                    {viewMode.name}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Mobile Close Button */}
+        {responsiveManager.isMobile && (
+          <button
+            className="right-panel-close-button"
+            onClick={handleCloseClick}
+            aria-label="Close panel"
+            title="Close panel"
+          >
+            <X size={20} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+});
+
+RightPanelToolbar.displayName = 'RightPanelToolbar'; 

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

@@ -0,0 +1,123 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { X, CheckCircle2, AlertCircle, Upload, FileUp } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Button } from '@anymux/ui/components/button';
+import { Progress } from '@anymux/ui/components/progress';
+import type { UploadModel } from '../models/UploadModel';
+
+interface UploadProgressProps {
+  uploadModel: UploadModel;
+  className?: string;
+}
+
+/**
+ * Floating upload progress panel.
+ * Shows during active uploads and briefly after completion.
+ */
+export const UploadProgress: React.FC<UploadProgressProps> = observer(({
+  uploadModel,
+  className,
+}) => {
+  const { files, isUploading, overallProgress, completedCount, totalCount, showSummary, lastSummary } = uploadModel;
+
+  // Nothing to show
+  if (!isUploading && !showSummary) return null;
+
+  return (
+    <div
+      className={cn(
+        'absolute bottom-3 right-3 z-40 w-72 rounded-lg border bg-background shadow-lg',
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/30">
+        <div className="flex items-center gap-2 text-sm font-medium">
+          <FileUp className="w-4 h-4" />
+          {isUploading ? (
+            <span>Uploading {completedCount}/{totalCount}</span>
+          ) : (
+            <span>Upload Complete</span>
+          )}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-5 w-5"
+          onClick={() => {
+            if (!isUploading) {
+              uploadModel.clear();
+            } else {
+              uploadModel.dismissSummary();
+            }
+          }}
+          title="Dismiss"
+        >
+          <X className="w-3 h-3" />
+        </Button>
+      </div>
+
+      {/* Overall progress bar */}
+      {isUploading && (
+        <div className="px-3 py-2">
+          <Progress value={overallProgress} className="h-1.5" />
+          <p className="text-xs text-muted-foreground mt-1">
+            {overallProgress}% complete
+          </p>
+        </div>
+      )}
+
+      {/* File list (max 4 visible, scrollable) */}
+      <div className="max-h-32 overflow-y-auto">
+        {files.map((entry, idx) => (
+          <div
+            key={`${entry.targetPath}-${idx}`}
+            className="flex items-center gap-2 px-3 py-1.5 text-xs border-t first:border-t-0"
+          >
+            {entry.status === 'done' && (
+              <CheckCircle2 className="w-3.5 h-3.5 text-green-500 flex-shrink-0" />
+            )}
+            {entry.status === 'error' && (
+              <AlertCircle className="w-3.5 h-3.5 text-destructive flex-shrink-0" />
+            )}
+            {entry.status === 'uploading' && (
+              <Upload className="w-3.5 h-3.5 text-primary animate-pulse flex-shrink-0" />
+            )}
+            {entry.status === 'pending' && (
+              <div className="w-3.5 h-3.5 rounded-full border border-muted-foreground/40 flex-shrink-0" />
+            )}
+            <span className="truncate flex-1" title={entry.file.name}>
+              {entry.file.name}
+            </span>
+            {entry.status === 'uploading' && (
+              <span className="text-muted-foreground flex-shrink-0">{entry.progress}%</span>
+            )}
+            {entry.status === 'error' && (
+              <span className="text-destructive flex-shrink-0 truncate max-w-[80px]" title={entry.error}>
+                {entry.error}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Summary footer */}
+      {showSummary && lastSummary && !isUploading && (
+        <div className="px-3 py-2 border-t bg-muted/20 text-xs text-muted-foreground">
+          {lastSummary.failed === 0 ? (
+            <span className="text-green-600 dark:text-green-400">
+              All {lastSummary.total} file{lastSummary.total !== 1 ? 's' : ''} uploaded successfully
+            </span>
+          ) : (
+            <span>
+              {lastSummary.succeeded} succeeded, {lastSummary.failed} failed
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+UploadProgress.displayName = 'UploadProgress';

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

@@ -0,0 +1,208 @@
+import React, { Suspense, useState, useEffect, useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Loader2 } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import type { ViewerProps } from '../registry/ViewerRegistry';
+import type { ResolvedViewer, KeyboardShortcut, ToolbarAction } from '../registry/types';
+import { ViewerHostModel } from '../models/ViewerHostModel';
+
+export interface ViewerHostProps {
+  /** The resolved viewer from the registry */
+  viewer: ResolvedViewer;
+  /** File metadata and content */
+  file: ViewerProps['file'];
+  /** 'full' for main viewer, 'preview' for inline pane */
+  mode: 'full' | 'preview';
+  /** Called when the viewer wants to close */
+  onClose?: () => void;
+  /** Called to save edits */
+  onSave?: (content: string | ArrayBuffer) => Promise<void>;
+  /** Whether the file is read-only */
+  readOnly?: boolean;
+  /** Optional URL for direct content access */
+  contentUrl?: string;
+  /** Optional lazy content fetcher */
+  fetchContent?: () => Promise<string | ArrayBuffer>;
+  /** Additional toolbar elements from the host (e.g., prev/next nav) */
+  hostToolbar?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Loading fallback shown while a lazy-loaded viewer component is being fetched.
+ */
+const ViewerLoadingFallback: React.FC<{ name: string }> = ({ name }) => (
+  <div className="flex flex-col items-center justify-center h-full gap-2 text-muted-foreground">
+    <Loader2 className="w-6 h-6 animate-spin" />
+    <p className="text-sm">Loading {name}...</p>
+  </div>
+);
+
+/**
+ * Render a single ToolbarAction as a button.
+ */
+const ToolbarActionButton: React.FC<{ action: ToolbarAction }> = ({ action }) => {
+  const isEnabled = typeof action.enabled === 'function' ? action.enabled() : action.enabled !== false;
+  const Icon = action.icon;
+
+  return (
+    <button
+      onClick={action.onClick}
+      disabled={!isEnabled}
+      className={cn(
+        'p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors',
+        'disabled:opacity-40 disabled:pointer-events-none'
+      )}
+      title={action.shortcutLabel ? `${action.label} (${action.shortcutLabel})` : action.label}
+    >
+      {Icon ? <Icon className="w-3.5 h-3.5" /> : <span className="text-xs px-1">{action.label}</span>}
+    </button>
+  );
+};
+
+/**
+ * ViewerHost: shared viewer surface component.
+ *
+ * Renders a resolved viewer plugin wrapped in Suspense, with:
+ * - Plugin's declarative toolbarActions (left + right positions)
+ * - Host toolbar slot (e.g., prev/next navigation)
+ * - Dynamic toolbar extras injected by the plugin via onToolbarExtras
+ * - Keyboard shortcut bindings from the plugin
+ * - Dirty state tracking via onDirtyChange
+ *
+ * Used by FileBrowser (full viewer mode), PreviewPane, and
+ * future ObjectStorageBrowser/GitBrowser integration.
+ */
+export const ViewerHost: React.FC<ViewerHostProps> = observer(({
+  viewer,
+  file,
+  mode,
+  onClose,
+  onSave,
+  readOnly,
+  contentUrl,
+  fetchContent,
+  hostToolbar,
+  className,
+}) => {
+  const [model] = useState(() => new ViewerHostModel());
+
+  // Reset model when viewer or file changes
+  useEffect(() => {
+    model.reset();
+  }, [viewer.plugin.id, file.path, model]);
+
+  // Bind keyboard shortcuts from the plugin
+  useEffect(() => {
+    const shortcuts = viewer.plugin.keyboardShortcuts;
+    if (!shortcuts || shortcuts.length === 0) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      for (const shortcut of shortcuts) {
+        if (matchShortcut(e, shortcut.key)) {
+          e.preventDefault();
+          shortcut.handler();
+          return;
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [viewer.plugin.keyboardShortcuts]);
+
+  // Callback for the plugin to report dirty state
+  const handleDirtyChange = useCallback((isDirty: boolean) => {
+    model.setDirty(isDirty);
+  }, [model]);
+
+  // Callback for the plugin to inject toolbar extras
+  const handleToolbarExtras = useCallback((extras: React.ReactNode) => {
+    model.setToolbarExtras(extras);
+  }, [model]);
+
+  const { Component, plugin } = viewer;
+
+  // Collect toolbar actions from the plugin
+  const leftActions = (plugin.toolbarActions ?? []).filter(a => a.position === 'left');
+  const rightActions = (plugin.toolbarActions ?? []).filter(a => a.position !== 'left');
+
+  const hasToolbar = mode === 'full' && (
+    leftActions.length > 0 ||
+    rightActions.length > 0 ||
+    hostToolbar ||
+    model.toolbarExtras
+  );
+
+  // Build viewer props, only setting optional fields when defined
+  // (exactOptionalPropertyTypes forbids assigning undefined to optional props)
+  const viewerProps: ViewerProps = {
+    file,
+    className: 'h-full',
+    onToolbarExtras: handleToolbarExtras,
+    onDirtyChange: handleDirtyChange,
+    mode,
+  };
+  if (onClose !== undefined) viewerProps.onClose = onClose;
+  if (onSave !== undefined) viewerProps.onSave = onSave;
+  if (readOnly !== undefined) viewerProps.readOnly = readOnly;
+  if (fetchContent !== undefined) viewerProps.fetchContent = fetchContent;
+  if (contentUrl !== undefined) viewerProps.contentUrl = contentUrl;
+
+  return (
+    <div className={cn('h-full flex flex-col', className)}>
+      {/* Toolbar (only in full mode, and only if there are items to show) */}
+      {hasToolbar && (
+        <div className="flex items-center justify-between px-2 py-1 border-b bg-muted/20 flex-shrink-0 min-h-[36px]">
+          {/* Left side: plugin left actions */}
+          <div className="flex items-center gap-0.5">
+            {leftActions.map(action => (
+              <ToolbarActionButton key={action.id} action={action} />
+            ))}
+          </div>
+
+          {/* Right side: plugin extras + plugin right actions + host toolbar */}
+          <div className="flex items-center gap-1">
+            {model.toolbarExtras}
+            {rightActions.map(action => (
+              <ToolbarActionButton key={action.id} action={action} />
+            ))}
+            {hostToolbar}
+          </div>
+        </div>
+      )}
+
+      {/* Viewer content wrapped in Suspense for lazy-loaded plugins */}
+      <div className="flex-1 min-h-0">
+        <Suspense fallback={<ViewerLoadingFallback name={plugin.name} />}>
+          <Component {...viewerProps} />
+        </Suspense>
+      </div>
+    </div>
+  );
+});
+
+ViewerHost.displayName = 'ViewerHost';
+
+// ---- Keyboard shortcut matching ----
+
+/**
+ * Match a keyboard event against a shortcut key string.
+ * Supports modifiers: ctrl, shift, alt, meta
+ * Examples: 'ctrl+s', 'escape', 'ctrl+shift+p', 'pagedown'
+ */
+function matchShortcut(e: KeyboardEvent, shortcutKey: string): boolean {
+  const parts = shortcutKey.toLowerCase().split('+');
+  const key = parts[parts.length - 1]!;
+  const needCtrl = parts.includes('ctrl');
+  const needShift = parts.includes('shift');
+  const needAlt = parts.includes('alt');
+  const needMeta = parts.includes('meta');
+
+  if (e.ctrlKey !== needCtrl) return false;
+  if (e.shiftKey !== needShift) return false;
+  if (e.altKey !== needAlt) return false;
+  if (e.metaKey !== needMeta) return false;
+
+  return e.key.toLowerCase() === key;
+}