@anymux/ui-kit 0.1.0

package/src/file-browser/models/SelectionManagerModel.ts

@@ -0,0 +1,252 @@
+import { makeAutoObservable, observable, reaction } from 'mobx';
+import { FileBrowserItem } from '../types/FileBrowserTypes';
+
+interface SelectionOwner {
+  logger?: { info: (message: string) => void } | null;
+  leftPanel?: any; // LeftPanelManagerModel
+  rightPanel?: any; // RightPanelManagerModel
+  navigationManager?: any; // NavigationManagerModel
+}
+
+export class SelectionManagerModel {
+  // Observable state
+  selectedItems = observable.map<string, boolean>();
+  lastSelectedIndex = -1;
+  
+  // Current selected item for coordination
+  focusedItem: FileBrowserItem | null = null;
+  
+  // Coordination state
+  isUpdatingFromPanels = false; // Prevent infinite loops
+  
+  private owner: SelectionOwner;
+  private disposers: (() => void)[] = [];
+
+  constructor(owner: SelectionOwner) {
+    makeAutoObservable(this);
+    
+    this.owner = owner;
+    
+    // Set up coordination reactions
+    this.setupCoordinationReactions();
+  }
+
+  // Computed values
+  get selectedItemsArray() {
+    return Array.from(this.selectedItems.keys()).filter(id => 
+      this.selectedItems.get(id) === true
+    );
+  }
+
+  get hasSelection() {
+    return this.selectedItemsArray.length > 0;
+  }
+
+  get selectionCount() {
+    return this.selectedItemsArray.length;
+  }
+
+  get isMultipleSelection() {
+    return this.selectionCount > 1;
+  }
+
+  isSelected = (itemId: string): boolean => {
+    return this.selectedItems.get(itemId) === true;
+  };
+
+  // Actions
+  selectItem = (itemId: string, multiSelect = false) => {
+    this.owner.logger?.info(`selectItem: ${itemId}, multiSelect: ${multiSelect}`);
+    
+    if (!multiSelect) {
+      this.clearSelection();
+    }
+    
+    this.selectedItems.set(itemId, true);
+  };
+
+  deselectItem = (itemId: string) => {
+    this.owner.logger?.info(`deselectItem: ${itemId}`);
+    this.selectedItems.set(itemId, false);
+  };
+
+  toggleSelection = (itemId: string, multiSelect = false) => {
+    const isCurrentlySelected = this.isSelected(itemId);
+    
+    if (isCurrentlySelected) {
+      this.deselectItem(itemId);
+    } else {
+      this.selectItem(itemId, multiSelect);
+    }
+  };
+
+  selectRange = (startItemId: string, endItemId: string, allItems: FileBrowserItem[]) => {
+    this.owner.logger?.info(`selectRange: ${startItemId} to ${endItemId}`);
+    
+    const startIndex = allItems.findIndex(item => item.id === startItemId);
+    const endIndex = allItems.findIndex(item => item.id === endItemId);
+    
+    if (startIndex === -1 || endIndex === -1) return;
+    
+    const minIndex = Math.min(startIndex, endIndex);
+    const maxIndex = Math.max(startIndex, endIndex);
+    
+    // Clear current selection
+    this.clearSelection();
+    
+    // Select range
+    for (let i = minIndex; i <= maxIndex; i++) {
+      const item = allItems[i];
+      if (item) {
+        this.selectedItems.set(item.id, true);
+      }
+    }
+  };
+
+  selectAll = (items: FileBrowserItem[]) => {
+    this.owner.logger?.info(`selectAll: ${items.length} items`);
+    
+    items.forEach(item => {
+      this.selectedItems.set(item.id, true);
+    });
+  };
+
+  clearSelection = () => {
+    this.owner.logger?.info('clearSelection');
+    this.selectedItems.clear();
+    this.lastSelectedIndex = -1;
+  };
+
+  invertSelection = (allItems: FileBrowserItem[]) => {
+    this.owner.logger?.info(`invertSelection: ${allItems.length} total items`);
+    
+    allItems.forEach(item => {
+      const isSelected = this.isSelected(item.id);
+      this.selectedItems.set(item.id, !isSelected);
+    });
+  };
+
+  getSelectedItems = (allItems: FileBrowserItem[]): FileBrowserItem[] => {
+    return allItems.filter(item => this.isSelected(item.id));
+  };
+
+  // Coordination methods
+  setFocusedItem = (item: FileBrowserItem | null) => {
+    this.focusedItem = item;
+    
+    if (item && !this.isUpdatingFromPanels) {
+      this.coordinateSelection(item);
+    }
+    
+    this.owner.logger?.info(`setFocusedItem: ${item?.name || 'none'}`);
+  };
+
+  private coordinateSelection = (item: FileBrowserItem) => {
+    if (this.isUpdatingFromPanels) return;
+    
+    this.isUpdatingFromPanels = true;
+    
+    try {
+      // Update right panel based on selection
+      if (this.owner.rightPanel) {
+        this.owner.rightPanel.setSelectedItem(item);
+      }
+      
+      // Update navigation if item is a directory
+      if (item.type === 'directory' && this.owner.navigationManager) {
+        this.owner.navigationManager.setCurrentPath(item.path);
+      }
+      
+      this.owner.logger?.info(`Coordinated selection: ${item.name} (${item.type})`);
+      
+    } finally {
+      this.isUpdatingFromPanels = false;
+    }
+  };
+
+  private setupCoordinationReactions = () => {
+    // React to selection changes for coordination
+    const selectionReaction = reaction(
+      () => ({
+        selectedIds: this.selectedItemsArray,
+        focusedItem: this.focusedItem
+      }),
+      ({ selectedIds, focusedItem }) => {
+        if (this.isUpdatingFromPanels) return;
+        
+        this.owner.logger?.info(`Selection reaction: ${selectedIds.length} selected, focused: ${focusedItem?.name || 'none'}`);
+        
+        // Update panel states based on selection
+        if (focusedItem) {
+          this.coordinateSelection(focusedItem);
+        }
+      },
+      { name: 'SelectionCoordination' }
+    );
+    
+    this.disposers.push(selectionReaction);
+  };
+
+  // Panel-specific selection methods
+  selectFromTreePanel = (item: FileBrowserItem) => {
+    this.isUpdatingFromPanels = true;
+    
+    try {
+      this.selectItem(item.id);
+      this.setFocusedItem(item);
+      
+      // Update right panel
+      if (this.owner.rightPanel) {
+        this.owner.rightPanel.setSelectedItem(item);
+      }
+      
+      this.owner.logger?.info(`Tree panel selection: ${item.name}`);
+      
+    } finally {
+      this.isUpdatingFromPanels = false;
+    }
+  };
+
+  selectFromRightPanel = (item: FileBrowserItem) => {
+    this.isUpdatingFromPanels = true;
+    
+    try {
+      this.selectItem(item.id);
+      this.setFocusedItem(item);
+      
+      // TODO: Update tree panel expansion/selection when TreeNavigationView supports it
+      this.owner.logger?.info(`Right panel selection: ${item.name}`);
+      
+    } finally {
+      this.isUpdatingFromPanels = false;
+    }
+  };
+
+  // Navigation-triggered selection
+  selectFromNavigation = (path: string, allItems: FileBrowserItem[]) => {
+    const item = allItems.find(item => item.path === path);
+    
+    if (item) {
+      this.isUpdatingFromPanels = true;
+      
+      try {
+        this.selectItem(item.id);
+        this.setFocusedItem(item);
+        
+        this.owner.logger?.info(`Navigation selection: ${item.name}`);
+        
+      } finally {
+        this.isUpdatingFromPanels = false;
+      }
+    }
+  };
+
+  // Cleanup
+  dispose = () => {
+    this.disposers.forEach(disposer => disposer());
+    this.disposers = [];
+    this.clearSelection();
+    this.focusedItem = null;
+    this.owner.logger?.info('SelectionManagerModel disposed');
+  };
+} 

package/src/file-browser/models/ToolbarManagerModel.ts

@@ -0,0 +1,144 @@
+import { makeAutoObservable, observable } from 'mobx';
+import { ToolbarAction, ContextAction, ActionContext } from '../types/ProviderTypes';
+import { FileBrowserItem } from '../types/FileBrowserTypes';
+
+interface ToolbarOwner {
+  logger?: { info: (message: string) => void } | null;
+}
+
+export class ToolbarManagerModel {
+  // Observable state
+  toolbarActions = observable.map<string, ToolbarAction>();
+  contextActions = observable.map<string, ContextAction>();
+  
+  private owner: ToolbarOwner;
+
+  constructor(owner: ToolbarOwner) {
+    makeAutoObservable(this);
+    
+    this.owner = owner;
+  }
+
+  // Computed values
+  get globalActions() {
+    return Array.from(this.toolbarActions.values()).filter(action => 
+      action.category === 'global'
+    );
+  }
+
+  get selectionActions() {
+    return Array.from(this.toolbarActions.values()).filter(action => 
+      action.category === 'selection'
+    );
+  }
+
+  get allToolbarActions() {
+    return Array.from(this.toolbarActions.values());
+  }
+
+  get allContextActions() {
+    return Array.from(this.contextActions.values());
+  }
+
+  // Actions
+  addAction = (action: ToolbarAction) => {
+    this.owner.logger?.info(`addAction: ${action.id} (${action.category || 'default'})`);
+    this.toolbarActions.set(action.id, action);
+  };
+
+  removeAction = (actionId: string) => {
+    this.owner.logger?.info(`removeAction: ${actionId}`);
+    this.toolbarActions.delete(actionId);
+  };
+
+  updateAction = (actionId: string, updates: Partial<ToolbarAction>) => {
+    const existing = this.toolbarActions.get(actionId);
+    if (existing) {
+      this.owner.logger?.info(`updateAction: ${actionId}`);
+      this.toolbarActions.set(actionId, { ...existing, ...updates });
+    }
+  };
+
+  addContextAction = (action: ContextAction) => {
+    this.owner.logger?.info(`addContextAction: ${action.id}`);
+    this.contextActions.set(action.id, action);
+  };
+
+  removeContextAction = (actionId: string) => {
+    this.owner.logger?.info(`removeContextAction: ${actionId}`);
+    this.contextActions.delete(actionId);
+  };
+
+  // Context-sensitive filtering
+  getAvailableActions = (context: ActionContext): ToolbarAction[] => {
+    return this.allToolbarActions.filter(action => {
+      // Check if action is visible
+      if (action.isVisible && !action.isVisible(context)) {
+        return false;
+      }
+      
+      // Check if action is enabled
+      if (action.isEnabled && !action.isEnabled(context)) {
+        return false;
+      }
+      
+      return true;
+    });
+  };
+
+  getContextActionsForItem = (context: ActionContext): ContextAction[] => {
+    return this.allContextActions.filter(action => {
+      // Check if action is visible
+      if (action.isVisible && !action.isVisible(context)) {
+        return false;
+      }
+      
+      // Check if action is enabled
+      if (action.isEnabled && !action.isEnabled(context)) {
+        return false;
+      }
+      
+      return true;
+    });
+  };
+
+  // Action execution helpers
+  canExecuteAction = (actionId: string, context: ActionContext): boolean => {
+    const action = this.toolbarActions.get(actionId);
+    if (!action) return false;
+    
+    const availableActions = this.getAvailableActions(context);
+    return availableActions.some(a => a.id === actionId);
+  };
+
+  getActionById = (actionId: string): ToolbarAction | undefined => {
+    return this.toolbarActions.get(actionId);
+  };
+
+  getContextActionById = (actionId: string): ContextAction | undefined => {
+    return this.contextActions.get(actionId);
+  };
+
+  // Bulk operations
+  setActions = (actions: ToolbarAction[]) => {
+    this.owner.logger?.info(`setActions: ${actions.length} actions`);
+    this.toolbarActions.clear();
+    actions.forEach(action => {
+      this.toolbarActions.set(action.id, action);
+    });
+  };
+
+  setContextActions = (actions: ContextAction[]) => {
+    this.owner.logger?.info(`setContextActions: ${actions.length} actions`);
+    this.contextActions.clear();
+    actions.forEach(action => {
+      this.contextActions.set(action.id, action);
+    });
+  };
+
+  clearAllActions = () => {
+    this.owner.logger?.info('clearAllActions');
+    this.toolbarActions.clear();
+    this.contextActions.clear();
+  };
+} 

package/src/file-browser/models/UploadModel.ts

@@ -0,0 +1,147 @@
+import { makeAutoObservable, flow, observable } from 'mobx';
+import type { FileSystemBridge } from '../adapters/FileSystemBridge';
+
+export interface UploadFileEntry {
+  /** Original File object from the browser */
+  file: File;
+  /** Target path on the file system */
+  targetPath: string;
+  /** Upload progress 0-100 */
+  progress: number;
+  /** Status of this individual file */
+  status: 'pending' | 'uploading' | 'done' | 'error';
+  /** Error message if status is 'error' */
+  error?: string;
+}
+
+export class UploadModel {
+  private bridge: FileSystemBridge;
+
+  /** Files currently being uploaded or queued */
+  files: UploadFileEntry[] = [];
+
+  /** Overall upload state */
+  isUploading = false;
+
+  /** Number of completed uploads in the current batch */
+  completedCount = 0;
+
+  /** Whether the upload summary toast is visible */
+  showSummary = false;
+
+  /** Last batch summary */
+  lastSummary: { total: number; succeeded: number; failed: number } | null = null;
+
+  private notify: (type: 'success' | 'error' | 'warning', message: string) => void;
+
+  constructor(bridge: FileSystemBridge, notify?: (type: 'success' | 'error' | 'warning', message: string) => void) {
+    this.bridge = bridge;
+    this.notify = notify ?? (() => {});
+    makeAutoObservable(this, {
+      bridge: false,
+      notify: false,
+      files: observable.shallow,
+    });
+  }
+
+  /** Total number of files in the current batch */
+  get totalCount(): number {
+    return this.files.length;
+  }
+
+  /** Overall progress across all files (0-100) */
+  get overallProgress(): number {
+    if (this.files.length === 0) return 0;
+    const total = this.files.reduce((sum, f) => sum + f.progress, 0);
+    return Math.round(total / this.files.length);
+  }
+
+  /** Number of files that failed */
+  get failedCount(): number {
+    return this.files.filter(f => f.status === 'error').length;
+  }
+
+  /** Whether there are any active uploads */
+  get hasActiveUploads(): boolean {
+    return this.isUploading;
+  }
+
+  /**
+   * Upload multiple files to a target directory.
+   * Uses MobX flow for proper async tracking.
+   */
+  uploadFiles = flow(function* (
+    this: UploadModel,
+    fileList: FileList | File[],
+    targetDirectory: string
+  ) {
+    const files = Array.from(fileList);
+    if (files.length === 0) return;
+
+    // Build the upload queue
+    this.files = files.map(file => ({
+      file,
+      targetPath: `${targetDirectory}/${file.name}`.replace(/\/\//g, '/'),
+      progress: 0,
+      status: 'pending' as const,
+    }));
+    this.completedCount = 0;
+    this.isUploading = true;
+    this.showSummary = false;
+    this.lastSummary = null;
+
+    let succeeded = 0;
+    let failed = 0;
+
+    for (let i = 0; i < this.files.length; i++) {
+      const entry = this.files[i]!;
+      entry.status = 'uploading';
+      entry.progress = 0;
+
+      try {
+        // Read file content as ArrayBuffer
+        const buffer: ArrayBuffer = yield entry.file.arrayBuffer();
+        entry.progress = 50; // Mark 50% after reading into memory
+
+        // Write to the file system
+        yield this.bridge.writeFile(entry.targetPath, Buffer.from(buffer));
+
+        entry.progress = 100;
+        entry.status = 'done';
+        succeeded++;
+      } catch (err) {
+        entry.status = 'error';
+        entry.error = err instanceof Error ? err.message : 'Upload failed';
+        entry.progress = 0;
+        failed++;
+      }
+
+      this.completedCount = i + 1;
+    }
+
+    this.isUploading = false;
+    this.lastSummary = { total: files.length, succeeded, failed };
+    this.showSummary = true;
+
+    if (failed === 0) {
+      this.notify('success', `Uploaded ${succeeded} file${succeeded > 1 ? 's' : ''}`);
+    } else if (succeeded > 0) {
+      this.notify('warning', `Uploaded ${succeeded}/${files.length} files (${failed} failed)`);
+    } else {
+      this.notify('error', `Upload failed: ${failed} file${failed > 1 ? 's' : ''}`);
+    }
+  });
+
+  /** Clear the file list and summary */
+  clear(): void {
+    this.files = [];
+    this.completedCount = 0;
+    this.showSummary = false;
+    this.lastSummary = null;
+  }
+
+  /** Dismiss the summary toast */
+  dismissSummary(): void {
+    this.showSummary = false;
+  }
+}