@anymux/ui-kit 0.1.0

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

@@ -0,0 +1,105 @@
+import { makeAutoObservable, observable } from 'mobx';
+import type { TreeViewUIModel } from './ui/TreeViewUIModel';
+
+export interface LeftPanelMode {
+  id: string;
+  name: string;
+  icon?: string;
+  component: React.ComponentType<any>;
+  isAvailable?: () => boolean;
+}
+
+export class LeftPanelManagerModel {
+  // Available left panel modes (provided by provider)
+  availableModes = observable.map<string, LeftPanelMode>();
+  currentMode = 'tree'; // default: tree navigation
+  
+  // Tree view state (default mode)
+  treeViewUI: TreeViewUIModel;
+  
+  // Other panel modes added by providers
+  customModes = observable.map<string, any>();
+  
+  constructor(
+    private owner: { logger?: any },
+    treeViewUI: TreeViewUIModel
+  ) {
+    this.treeViewUI = treeViewUI;
+    
+    // Add default tree mode
+    this.availableModes.set('tree', {
+      id: 'tree',
+      name: 'Tree',
+      icon: 'folder-tree',
+      component: {} as any, // Will be set by consumer
+      isAvailable: () => true
+    });
+    
+    makeAutoObservable(this);
+    this.owner.logger?.info('LeftPanelManagerModel initialized');
+  }
+
+  // Actions
+  setCurrentMode = (modeId: string) => {
+    if (this.availableModes.has(modeId)) {
+      this.currentMode = modeId;
+      this.owner.logger?.info(`Left panel mode changed to: ${modeId}`);
+    } else {
+      this.owner.logger?.warn(`Unknown left panel mode: ${modeId}`);
+    }
+  };
+
+  addMode = (mode: LeftPanelMode) => {
+    this.availableModes.set(mode.id, mode);
+    this.owner.logger?.info(`Added left panel mode: ${mode.id}`);
+  };
+
+  removeMode = (modeId: string) => {
+    if (modeId === 'tree') {
+      this.owner.logger?.warn('Cannot remove default tree mode');
+      return;
+    }
+    
+    this.availableModes.delete(modeId);
+    this.customModes.delete(modeId);
+    
+    // Switch to tree if current mode was removed
+    if (this.currentMode === modeId) {
+      this.currentMode = 'tree';
+    }
+    
+    this.owner.logger?.info(`Removed left panel mode: ${modeId}`);
+  };
+
+  addCustomModeState = (modeId: string, state: any) => {
+    this.customModes.set(modeId, state);
+  };
+
+  // Computed
+  get availableModesList() {
+    return Array.from(this.availableModes.values()).filter(mode => 
+      mode.isAvailable ? mode.isAvailable() : true
+    );
+  }
+
+  get fileBrowserModel() {
+    return this.owner as any; // Cast to access FileBrowserModel properties
+  }
+
+  get currentModeData() {
+    return this.availableModes.get(this.currentMode);
+  }
+
+  get hasMultipleModes() {
+    return this.availableModesList.length > 1;
+  }
+
+  get currentUIModel() {
+    switch (this.currentMode) {
+      case 'tree':
+        return this.treeViewUI;
+      default:
+        return this.customModes.get(this.currentMode) || null;
+    }
+  }
+} 

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

@@ -0,0 +1,312 @@
+import { makeAutoObservable, reaction } from 'mobx';
+
+interface NavigationOwner {
+  logger?: { info: (message: string) => void } | null;
+  leftPanel?: any; // LeftPanelManagerModel
+  rightPanel?: any; // RightPanelManagerModel
+  selectionManager?: any; // SelectionManagerModel
+}
+
+export class NavigationManagerModel {
+  // Observable state
+  history: string[] = [];
+  historyIndex = -1;
+  
+  // Coordination state
+  isUpdatingFromPanels = false; // Prevent infinite loops
+  
+  private owner: NavigationOwner;
+  private disposers: (() => void)[] = [];
+
+  constructor(owner: NavigationOwner) {
+    makeAutoObservable(this);
+    
+    this.owner = owner;
+    
+    // Set up coordination reactions
+    this.setupCoordinationReactions();
+  }
+
+  // Computed values
+  get canGoBack() {
+    return this.historyIndex > 0;
+  }
+
+  get canGoForward() {
+    return this.historyIndex < this.history.length - 1;
+  }
+
+  get currentPath() {
+    return this.historyIndex >= 0 ? (this.history[this.historyIndex] ?? '/') : '/';
+  }
+
+  get previousPath(): string | null {
+    if (!this.canGoBack) return null;
+    return this.history[this.historyIndex - 1] ?? null;
+  }
+
+  get nextPath(): string | null {
+    if (!this.canGoForward) return null;
+    return this.history[this.historyIndex + 1] ?? null;
+  }
+
+  // Actions
+  addToHistory = (path: string) => {
+    const normalizedPath = this.normalizePath(path);
+    this.owner.logger?.info(`addToHistory: ${normalizedPath}`);
+    
+    // Don't add if it's the same as current path
+    if (normalizedPath === this.currentPath) {
+      return;
+    }
+    
+    // Remove any forward history when adding new path
+    if (this.canGoForward) {
+      this.history = this.history.slice(0, this.historyIndex + 1);
+    }
+    
+    // Add new path
+    this.history.push(normalizedPath);
+    this.historyIndex = this.history.length - 1;
+    
+    // Limit history size to prevent memory issues
+    const maxHistorySize = 100;
+    if (this.history.length > maxHistorySize) {
+      this.history = this.history.slice(-maxHistorySize);
+      this.historyIndex = this.history.length - 1;
+    }
+  };
+
+  goBack = (): string | null => {
+    if (!this.canGoBack) {
+      this.owner.logger?.info('goBack: cannot go back');
+      return null;
+    }
+    
+    this.historyIndex--;
+    const path = this.currentPath;
+    this.owner.logger?.info(`goBack: navigating to ${path}`);
+    return path;
+  };
+
+  goForward = (): string | null => {
+    if (!this.canGoForward) {
+      this.owner.logger?.info('goForward: cannot go forward');
+      return null;
+    }
+    
+    this.historyIndex++;
+    const path = this.currentPath;
+    this.owner.logger?.info(`goForward: navigating to ${path}`);
+    return path;
+  };
+
+  goToParent = (currentPath: string): string | null => {
+    const normalizedPath = this.normalizePath(currentPath);
+    const parentPath = this.getParentPath(normalizedPath);
+    
+    if (parentPath && parentPath !== normalizedPath) {
+      this.owner.logger?.info(`goToParent: ${normalizedPath} -> ${parentPath}`);
+      return parentPath;
+    }
+    
+    this.owner.logger?.info(`goToParent: already at root for ${normalizedPath}`);
+    return null;
+  };
+
+  clearHistory = () => {
+    this.owner.logger?.info('clearHistory');
+    this.history = [];
+    this.historyIndex = -1;
+  };
+
+  setCurrentPath = (path: string) => {
+    this.addToHistory(path);
+  };
+
+  navigateTo = (path: string) => {
+    this.addToHistory(path);
+  };
+
+  // Path utilities
+  normalizePath = (path: string): string => {
+    if (!path || path === '') return '/';
+    
+    // Ensure path starts with /
+    let normalized = path.startsWith('/') ? path : '/' + path;
+    
+    // Remove trailing slash unless it's root
+    if (normalized.length > 1 && normalized.endsWith('/')) {
+      normalized = normalized.slice(0, -1);
+    }
+    
+    // Resolve .. and . segments
+    const segments = normalized.split('/').filter(segment => segment !== '');
+    const resolvedSegments: string[] = [];
+    
+    for (const segment of segments) {
+      if (segment === '..') {
+        if (resolvedSegments.length > 0) {
+          resolvedSegments.pop();
+        }
+      } else if (segment !== '.') {
+        resolvedSegments.push(segment);
+      }
+    }
+    
+    return resolvedSegments.length === 0 ? '/' : '/' + resolvedSegments.join('/');
+  };
+
+  getParentPath = (path: string): string | null => {
+    const normalized = this.normalizePath(path);
+    
+    if (normalized === '/') {
+      return null; // Root has no parent
+    }
+    
+    const lastSlashIndex = normalized.lastIndexOf('/');
+    if (lastSlashIndex === 0) {
+      return '/'; // Parent is root
+    }
+    
+    return normalized.substring(0, lastSlashIndex);
+  };
+
+  getPathSegments = (path: string): string[] => {
+    const normalized = this.normalizePath(path);
+    if (normalized === '/') return [];
+    
+    return normalized.split('/').filter(segment => segment !== '');
+  };
+
+  joinPaths = (...paths: string[]): string => {
+    const joined = paths.join('/');
+    return this.normalizePath(joined);
+  };
+
+  // Coordination methods
+  private setupCoordinationReactions = () => {
+    // React to navigation changes for panel coordination
+    const navigationReaction = reaction(
+      () => this.currentPath,
+      (currentPath) => {
+        if (this.isUpdatingFromPanels || !currentPath) return;
+        
+        this.owner.logger?.info(`Navigation reaction: path changed to ${currentPath}`);
+        
+        // Update panels based on navigation
+        this.coordinateNavigation(currentPath);
+      },
+      { name: 'NavigationCoordination' }
+    );
+    
+    this.disposers.push(navigationReaction);
+  };
+
+  private coordinateNavigation = (path: string) => {
+    if (this.isUpdatingFromPanels) return;
+    
+    this.isUpdatingFromPanels = true;
+    
+    try {
+      // Update right panel to show the new path content
+      if (this.owner.rightPanel) {
+        // If navigating to a directory, clear selection and show folder content
+        this.owner.rightPanel.setSelectedItem(null);
+      }
+      
+      // Update selection manager to reflect navigation
+      if (this.owner.selectionManager) {
+        // Find the item for this path and set it as focused
+        // This will be implemented when we have access to the items
+        this.owner.logger?.info(`Navigation coordination: ${path}`);
+      }
+      
+    } finally {
+      this.isUpdatingFromPanels = false;
+    }
+  };
+
+  // Panel-specific navigation methods
+  navigateFromTreePanel = (path: string) => {
+    this.isUpdatingFromPanels = true;
+    
+    try {
+      this.navigateTo(path);
+      
+      // Update right panel to show folder content
+      if (this.owner.rightPanel) {
+        this.owner.rightPanel.setSelectedItem(null);
+      }
+      
+      this.owner.logger?.info(`Tree panel navigation: ${path}`);
+      
+    } finally {
+      this.isUpdatingFromPanels = false;
+    }
+  };
+
+  navigateFromRightPanel = (path: string) => {
+    this.isUpdatingFromPanels = true;
+    
+    try {
+      this.navigateTo(path);
+      
+      // TODO: Update tree panel expansion when TreeNavigationView supports it
+      this.owner.logger?.info(`Right panel navigation: ${path}`);
+      
+    } finally {
+      this.isUpdatingFromPanels = false;
+    }
+  };
+
+  // Breadcrumb navigation
+  navigateFromBreadcrumb = (path: string) => {
+    this.isUpdatingFromPanels = true;
+    
+    try {
+      this.navigateTo(path);
+      
+      // Update both panels
+      if (this.owner.rightPanel) {
+        this.owner.rightPanel.setSelectedItem(null);
+      }
+      
+      this.owner.logger?.info(`Breadcrumb navigation: ${path}`);
+      
+    } finally {
+      this.isUpdatingFromPanels = false;
+    }
+  };
+
+  // Enhanced navigation with coordination
+  navigateToWithCoordination = (path: string, source: 'tree' | 'right' | 'breadcrumb' | 'history' = 'history') => {
+    switch (source) {
+      case 'tree':
+        this.navigateFromTreePanel(path);
+        break;
+      case 'right':
+        this.navigateFromRightPanel(path);
+        break;
+      case 'breadcrumb':
+        this.navigateFromBreadcrumb(path);
+        break;
+      default:
+        this.navigateTo(path);
+        break;
+    }
+  };
+
+  // Set selection manager reference after both managers are created
+  setSelectionManager = (selectionManager: any) => {
+    (this.owner as any).selectionManager = selectionManager;
+  };
+
+  // Cleanup
+  dispose = () => {
+    this.disposers.forEach(disposer => disposer());
+    this.disposers = [];
+    this.clearHistory();
+    this.owner.logger?.info('NavigationManagerModel disposed');
+  };
+}