@anymux/ui-kit 0.1.0

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

@@ -0,0 +1,437 @@
+import { makeAutoObservable, observable } from 'mobx';
+
+interface ResponsiveOwner {
+  logger?: { info: (message: string) => void; warn: (message: string) => void; error: (message: string) => void } | null;
+}
+
+export type ScreenSize = 'mobile' | 'tablet' | 'desktop';
+export type PanelLayout = 'single' | 'dual' | 'overlay';
+
+export interface ResponsiveBreakpoints {
+  mobile: number;
+  tablet: number;
+  desktop: number;
+}
+
+export interface LayoutConfiguration {
+  screenSize: ScreenSize;
+  panelLayout: PanelLayout;
+  showLeftPanel: boolean;
+  showRightPanel: boolean;
+  leftPanelWidth: string;
+  rightPanelWidth: string;
+  isLeftPanelCollapsed: boolean;
+  isRightPanelCollapsed: boolean;
+}
+
+export class ResponsiveLayoutManagerModel {
+  // Screen dimensions
+  screenWidth = 1200;
+  screenHeight = 800;
+  
+  // Breakpoints (in pixels)
+  breakpoints: ResponsiveBreakpoints = {
+    mobile: 768,
+    tablet: 1024,
+    desktop: 1200
+  };
+  
+  // Panel states
+  isLeftPanelVisible = true;
+  isRightPanelVisible = true;
+  isLeftPanelCollapsed = false;
+  isRightPanelCollapsed = false;
+  
+  // Mobile-specific states
+  isMobileMenuOpen = false;
+  activePanel: 'left' | 'right' | null = null;
+  
+  // Animation states
+  isAnimating = false;
+  animationDuration = 300; // ms
+  
+  // Focus management
+  previousFocusElement: HTMLElement | null = null;
+  trapFocus = false;
+  
+  // Layout preferences
+  leftPanelWidth = '300px';
+  rightPanelWidth = '400px';
+  minPanelWidth = 200;
+  maxPanelWidth = 600;
+  
+  // Adaptive view modes
+  adaptiveViewModes = observable.map<ScreenSize, string[]>();
+  
+  private owner: ResponsiveOwner;
+  private resizeObserver: ResizeObserver | null = null;
+  private mediaQueryListeners: MediaQueryList[] = [];
+
+  constructor(owner: ResponsiveOwner) {
+    this.owner = owner;
+    makeAutoObservable(this);
+    
+    this.setupAdaptiveViewModes();
+    this.setupMediaQueryListeners();
+    this.owner.logger?.info('ResponsiveLayoutManagerModel initialized');
+  }
+
+  private setupAdaptiveViewModes() {
+    // Mobile: Limited view modes for better UX
+    this.adaptiveViewModes.set('mobile', ['list']);
+    
+    // Tablet: More view modes available
+    this.adaptiveViewModes.set('tablet', ['list', 'thumbnail']);
+    
+    // Desktop: All view modes available
+    this.adaptiveViewModes.set('desktop', ['list', 'thumbnail', 'treemap', 'detail']);
+  }
+
+  private setupMediaQueryListeners() {
+    // Clean up existing listeners
+    this.mediaQueryListeners.forEach(mql => {
+      mql.removeEventListener('change', this.handleMediaQueryChange);
+    });
+    this.mediaQueryListeners = [];
+
+    // Create media query listeners for each breakpoint
+    const mobileQuery = window.matchMedia(`(max-width: ${this.breakpoints.mobile - 1}px)`);
+    const tabletQuery = window.matchMedia(`(min-width: ${this.breakpoints.mobile}px) and (max-width: ${this.breakpoints.tablet - 1}px)`);
+    const desktopQuery = window.matchMedia(`(min-width: ${this.breakpoints.tablet}px)`);
+
+    // Add listeners
+    [mobileQuery, tabletQuery, desktopQuery].forEach(mql => {
+      mql.addEventListener('change', this.handleMediaQueryChange);
+      this.mediaQueryListeners.push(mql);
+    });
+
+    // Initial check
+    this.updateLayoutForScreenSize();
+  }
+
+  private handleMediaQueryChange = () => {
+    this.updateLayoutForScreenSize();
+  };
+
+  private updateLayoutForScreenSize() {
+    const currentScreenSize = this.currentScreenSize;
+    
+    // Auto-collapse panels on mobile
+    if (currentScreenSize === 'mobile') {
+      this.isLeftPanelCollapsed = true;
+      this.isRightPanelCollapsed = true;
+      this.activePanel = null;
+    } else if (currentScreenSize === 'tablet') {
+      this.isLeftPanelCollapsed = false;
+      this.isRightPanelCollapsed = true;
+    } else {
+      this.isLeftPanelCollapsed = false;
+      this.isRightPanelCollapsed = false;
+    }
+    
+    this.owner.logger?.info(`Layout updated for screen size: ${currentScreenSize}`);
+  }
+
+  // Computed values
+  get currentScreenSize(): ScreenSize {
+    if (this.screenWidth < this.breakpoints.mobile) {
+      return 'mobile';
+    } else if (this.screenWidth < this.breakpoints.tablet) {
+      return 'tablet';
+    } else {
+      return 'desktop';
+    }
+  }
+
+  get currentPanelLayout(): PanelLayout {
+    const screenSize = this.currentScreenSize;
+    
+    if (screenSize === 'mobile') {
+      return this.activePanel ? 'overlay' : 'single';
+    } else if (screenSize === 'tablet') {
+      return this.isRightPanelCollapsed ? 'single' : 'dual';
+    } else {
+      return 'dual';
+    }
+  }
+
+  get currentLayoutConfiguration(): LayoutConfiguration {
+    return {
+      screenSize: this.currentScreenSize,
+      panelLayout: this.currentPanelLayout,
+      showLeftPanel: this.shouldShowLeftPanel,
+      showRightPanel: this.shouldShowRightPanel,
+      leftPanelWidth: this.leftPanelWidth,
+      rightPanelWidth: this.rightPanelWidth,
+      isLeftPanelCollapsed: this.isLeftPanelCollapsed,
+      isRightPanelCollapsed: this.isRightPanelCollapsed
+    };
+  }
+
+  get shouldShowLeftPanel(): boolean {
+    const screenSize = this.currentScreenSize;
+    
+    if (screenSize === 'mobile') {
+      return this.isMobileMenuOpen && this.activePanel === 'left';
+    }
+    
+    return this.isLeftPanelVisible && !this.isLeftPanelCollapsed;
+  }
+
+  get shouldShowRightPanel(): boolean {
+    const screenSize = this.currentScreenSize;
+    
+    if (screenSize === 'mobile') {
+      return this.activePanel === 'right';
+    }
+    
+    return this.isRightPanelVisible && !this.isRightPanelCollapsed;
+  }
+
+  get availableViewModes(): string[] {
+    return this.adaptiveViewModes.get(this.currentScreenSize) || ['list'];
+  }
+
+  get isMobile(): boolean {
+    return this.currentScreenSize === 'mobile';
+  }
+
+  get isTablet(): boolean {
+    return this.currentScreenSize === 'tablet';
+  }
+
+  get isDesktop(): boolean {
+    return this.currentScreenSize === 'desktop';
+  }
+
+  get canShowDualPanels(): boolean {
+    return this.currentScreenSize !== 'mobile';
+  }
+
+  get shouldShowHamburgerMenu(): boolean {
+    return this.currentScreenSize === 'mobile';
+  }
+
+  // Actions
+  setScreenDimensions = (width: number, height: number) => {
+    this.screenWidth = width;
+    this.screenHeight = height;
+    this.updateLayoutForScreenSize();
+  };
+
+  setBreakpoints = (breakpoints: Partial<ResponsiveBreakpoints>) => {
+    this.breakpoints = { ...this.breakpoints, ...breakpoints };
+    this.setupMediaQueryListeners();
+    this.owner.logger?.info(`Breakpoints updated: ${JSON.stringify(this.breakpoints)}`);
+  };
+
+  // Panel visibility actions
+  toggleLeftPanel = () => {
+    if (this.currentScreenSize === 'mobile') {
+      this.toggleMobilePanel('left');
+    } else {
+      this.isLeftPanelCollapsed = !this.isLeftPanelCollapsed;
+    }
+    this.owner.logger?.info(`Left panel toggled: ${this.shouldShowLeftPanel}`);
+  };
+
+  toggleRightPanel = () => {
+    if (this.currentScreenSize === 'mobile') {
+      this.toggleMobilePanel('right');
+    } else {
+      this.isRightPanelCollapsed = !this.isRightPanelCollapsed;
+    }
+    this.owner.logger?.info(`Right panel toggled: ${this.shouldShowRightPanel}`);
+  };
+
+  setLeftPanelVisibility = (visible: boolean) => {
+    if (this.currentScreenSize === 'mobile') {
+      if (visible) {
+        this.showMobilePanel('left');
+      } else {
+        this.hideMobilePanel();
+      }
+    } else {
+      this.isLeftPanelCollapsed = !visible;
+    }
+  };
+
+  setRightPanelVisibility = (visible: boolean) => {
+    if (this.currentScreenSize === 'mobile') {
+      if (visible) {
+        this.showMobilePanel('right');
+      } else {
+        this.hideMobilePanel();
+      }
+    } else {
+      this.isRightPanelCollapsed = !visible;
+    }
+  };
+
+  // Mobile-specific actions
+  toggleMobileMenu = () => {
+    if (this.isAnimating) return;
+    
+    const willOpen = !this.isMobileMenuOpen;
+    
+    if (willOpen) {
+      this.storeFocus();
+    } else {
+      this.restoreFocus();
+      this.activePanel = null;
+    }
+    
+    this.isMobileMenuOpen = willOpen;
+    this.animatePanel();
+    
+    this.owner.logger?.info(`Mobile menu toggled: ${this.isMobileMenuOpen}`);
+  };
+
+  showMobilePanel = (panel: 'left' | 'right') => {
+    if (this.currentScreenSize !== 'mobile' || this.isAnimating) return;
+    
+    // Store focus before showing panel
+    if (!this.isMobileMenuOpen) {
+      this.storeFocus();
+    }
+    
+    this.isMobileMenuOpen = true;
+    this.activePanel = panel;
+    this.trapFocus = true;
+    this.animatePanel();
+    
+    this.owner.logger?.info(`Mobile panel shown: ${panel}`);
+  };
+
+  hideMobilePanel = () => {
+    if (this.isAnimating) return;
+    
+    this.isMobileMenuOpen = false;
+    this.activePanel = null;
+    this.trapFocus = false;
+    this.animatePanel();
+    
+    // Restore focus after animation
+    setTimeout(() => {
+      this.restoreFocus();
+    }, this.animationDuration);
+    
+    this.owner.logger?.info('Mobile panel hidden');
+  };
+
+  toggleMobilePanel = (panel: 'left' | 'right') => {
+    if (this.activePanel === panel) {
+      this.hideMobilePanel();
+    } else {
+      this.showMobilePanel(panel);
+    }
+  };
+
+  // Panel sizing actions
+  setLeftPanelWidth = (width: string) => {
+    this.leftPanelWidth = width;
+    this.owner.logger?.info(`Left panel width set: ${width}`);
+  };
+
+  setRightPanelWidth = (width: string) => {
+    this.rightPanelWidth = width;
+    this.owner.logger?.info(`Right panel width set: ${width}`);
+  };
+
+  // Adaptive view mode management
+  setAdaptiveViewModes = (screenSize: ScreenSize, viewModes: string[]) => {
+    this.adaptiveViewModes.set(screenSize, viewModes);
+    this.owner.logger?.info(`Adaptive view modes set for ${screenSize}: ${JSON.stringify(viewModes)}`);
+  };
+
+  isViewModeAvailable = (viewMode: string): boolean => {
+    return this.availableViewModes.includes(viewMode);
+  };
+
+  // Animation methods
+  private animatePanel = () => {
+    this.isAnimating = true;
+    
+    // Animation handled by CSS transitions
+    setTimeout(() => {
+      this.isAnimating = false;
+    }, this.animationDuration);
+  };
+
+  // Focus management methods  
+  private storeFocus = () => {
+    if (typeof document !== 'undefined') {
+      this.previousFocusElement = document.activeElement as HTMLElement;
+    }
+  };
+
+  private restoreFocus = () => {
+    if (this.previousFocusElement && typeof this.previousFocusElement.focus === 'function') {
+      this.previousFocusElement.focus({ preventScroll: true });
+      this.previousFocusElement = null;
+    }
+  };
+
+  // Touch-friendly target size validation
+  isTouchFriendlySize = (element: HTMLElement): boolean => {
+    const rect = element.getBoundingClientRect();
+    const minSize = 44; // 44px minimum per iOS HIG and Material Design
+    return rect.width >= minSize && rect.height >= minSize;
+  };
+
+  // Gesture integration
+  enableGestureNavigation = (element: HTMLElement) => {
+    // This will be used by components to enable swipe gestures
+    return {
+      onSwipeLeft: () => {
+        if (this.currentScreenSize === 'mobile') {
+          this.showMobilePanel('right');
+        }
+      },
+      onSwipeRight: () => {
+        if (this.currentScreenSize === 'mobile') {
+          this.showMobilePanel('left');
+        }
+      },
+      onSwipeDown: () => {
+        if (this.currentScreenSize === 'mobile' && this.isMobileMenuOpen) {
+          this.hideMobilePanel();
+        }
+      }
+    };
+  };
+
+  // Utility methods
+  observeElementResize = (element: HTMLElement) => {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+
+    this.resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        const { width, height } = entry.contentRect;
+        this.setScreenDimensions(width, height);
+      }
+    });
+
+    this.resizeObserver.observe(element);
+  };
+
+  // Cleanup
+  dispose = () => {
+    // Remove media query listeners
+    this.mediaQueryListeners.forEach(mql => {
+      mql.removeEventListener('change', this.handleMediaQueryChange);
+    });
+    this.mediaQueryListeners = [];
+
+    // Disconnect resize observer
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+
+    this.owner.logger?.info('ResponsiveLayoutManagerModel disposed');
+  };
+}

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

@@ -0,0 +1,190 @@
+import { makeAutoObservable, observable } from 'mobx';
+import type { ListViewUIModel } from './ui/ListViewUIModel';
+import type { ThumbnailViewUIModel } from './ui/ThumbnailViewUIModel';
+import type { TreemapViewUIModel } from './ui/TreemapViewUIModel';
+import { PreviewUIModel } from './ui/PreviewUIModel';
+
+export interface ViewModeDefinition {
+  id: string;
+  name: string;
+  icon: string;
+  component?: React.ComponentType<any>;
+  applicableFor?: (contentType: 'file' | 'folder' | 'empty') => boolean;
+}
+
+// PreviewUIModel is now imported from ./ui/PreviewUIModel
+
+export class RightPanelManagerModel {
+  // Content type (file or folder)
+  contentType: 'file' | 'folder' | 'empty' = 'empty';
+  
+  // Current selected item for context
+  selectedItem: any = null;
+  
+  // View modes for folder content
+  availableViewModes = observable.map<string, ViewModeDefinition>();
+  currentViewMode = 'list'; // list, thumbnail, treemap, detail
+  
+  // View-specific UI models
+  listViewUI: ListViewUIModel;
+  thumbnailViewUI: ThumbnailViewUIModel;
+  treemapViewUI: TreemapViewUIModel;
+  previewUI: PreviewUIModel;
+
+  constructor(
+    private owner: { logger?: any },
+    listViewUI: ListViewUIModel,
+    thumbnailViewUI: ThumbnailViewUIModel,
+    treemapViewUI: TreemapViewUIModel
+  ) {
+    this.listViewUI = listViewUI;
+    this.thumbnailViewUI = thumbnailViewUI;
+    this.treemapViewUI = treemapViewUI;
+    this.previewUI = new PreviewUIModel(owner);
+    
+    // Add default view modes
+    this.addDefaultViewModes();
+    
+    makeAutoObservable(this);
+    this.owner.logger?.info('RightPanelManagerModel initialized');
+  }
+
+  private addDefaultViewModes() {
+    this.availableViewModes.set('list', {
+      id: 'list',
+      name: 'List',
+      icon: 'list',
+      applicableFor: (contentType) => contentType === 'folder'
+    });
+
+    this.availableViewModes.set('thumbnail', {
+      id: 'thumbnail',
+      name: 'Thumbnails',
+      icon: 'grid-3x3',
+      applicableFor: (contentType) => contentType === 'folder'
+    });
+
+    this.availableViewModes.set('treemap', {
+      id: 'treemap',
+      name: 'Treemap',
+      icon: 'layout-dashboard',
+      applicableFor: (contentType) => contentType === 'folder'
+    });
+
+    this.availableViewModes.set('detail', {
+      id: 'detail',
+      name: 'Details',
+      icon: 'info',
+      applicableFor: (contentType) => contentType === 'folder'
+    });
+  }
+
+  // Actions
+  setSelectedItem = (item: any) => {
+    this.selectedItem = item;
+    
+    if (!item) {
+      this.contentType = 'empty';
+      this.previewUI.setCurrentItem(null);
+    } else if (item.type === 'file') {
+      this.contentType = 'file';
+      this.previewUI.setCurrentItem(item);
+    } else if (item.type === 'folder' || item.type === 'directory') {
+      this.contentType = 'folder';
+      this.previewUI.setCurrentItem(null);
+    }
+    
+    this.owner.logger?.info(`Right panel content type: ${this.contentType}`);
+  };
+
+  setCurrentViewMode = (viewModeId: string) => {
+    if (this.contentType !== 'folder') {
+      this.owner.logger?.warn('View modes only available for folders');
+      return;
+    }
+
+    if (this.availableViewModes.has(viewModeId)) {
+      this.currentViewMode = viewModeId;
+      this.owner.logger?.info(`Right panel view mode changed to: ${viewModeId}`);
+    } else {
+      this.owner.logger?.warn(`Unknown view mode: ${viewModeId}`);
+    }
+  };
+
+  addViewMode = (viewMode: ViewModeDefinition) => {
+    this.availableViewModes.set(viewMode.id, viewMode);
+    this.owner.logger?.info(`Added view mode: ${viewMode.id}`);
+  };
+
+  removeViewMode = (viewModeId: string) => {
+    // Prevent removing default view modes
+    const defaultModes = ['list', 'thumbnail', 'treemap', 'detail'];
+    if (defaultModes.includes(viewModeId)) {
+      this.owner.logger?.warn(`Cannot remove default view mode: ${viewModeId}`);
+      return;
+    }
+
+    this.availableViewModes.delete(viewModeId);
+    
+    // Switch to list if current mode was removed
+    if (this.currentViewMode === viewModeId) {
+      this.currentViewMode = 'list';
+    }
+    
+    this.owner.logger?.info(`Removed view mode: ${viewModeId}`);
+  };
+
+  // Preview actions are now handled by PreviewUIModel
+
+  // Computed
+  get availableViewModesList() {
+    return Array.from(this.availableViewModes.values()).filter(mode => 
+      mode.applicableFor ? mode.applicableFor(this.contentType) : true
+    );
+  }
+
+  get fileBrowserModel() {
+    return this.owner as any; // Cast to access FileBrowserModel properties
+  }
+
+  get currentViewModeData() {
+    return this.availableViewModes.get(this.currentViewMode);
+  }
+
+  get hasViewModeOptions() {
+    return this.contentType === 'folder' && this.availableViewModesList.length > 1;
+  }
+
+  get currentUIModel() {
+    if (this.contentType === 'file') {
+      return this.previewUI;
+    }
+    
+    switch (this.currentViewMode) {
+      case 'list':
+        return this.listViewUI;
+      case 'thumbnail':
+        return this.thumbnailViewUI;
+      case 'treemap':
+        return this.treemapViewUI;
+      case 'detail':
+        return this.listViewUI; // Use list UI for detail view for now
+      default:
+        return this.listViewUI;
+    }
+  }
+
+  get shouldShowPreview() {
+    return this.contentType === 'file';
+  }
+
+  get shouldShowFolderContent() {
+    return this.contentType === 'folder';
+  }
+
+  get shouldShowEmpty() {
+    return this.contentType === 'empty';
+  }
+
+  // Helper methods are now in PreviewUIModel
+}