@anymux/ui-kit 0.1.0

package/src/tree/models/TreeModel.ts

@@ -0,0 +1,839 @@
+/**
+ * TreeModel - MobX state management for Tree Component
+ * 
+ * This class manages all tree state including nodes, selection, expansion,
+ * and loading states. It follows strict MobX patterns:
+ * - Uses makeAutoObservable(this, {}) 
+ * - Uses observable.map() for reactive collections
+ * - Uses composition over inheritance
+ * - All async operations use flow
+ */
+
+import { makeAutoObservable, observable, flow } from 'mobx';
+import type { TreeProvider } from '../providers/TreeProvider';
+import type { TreeNodeData, TreeLoadOptions } from '../types/TreeTypes';
+import type { TreeContextMenuItem } from '../types/TreeTypes';
+import type { CheckboxState } from '../components/TreeCheckbox';
+import { logger } from '../utils/logger';
+
+export class TreeModel {
+  // Core Data - using observable collections
+  nodes: TreeNodeData[] = [];
+  nodeMap = observable.map<string, TreeNodeData>();
+  
+  // Loading State
+  isLoading: boolean = false;
+  errors = observable.map<string, Error>();
+  
+  // Selection State - using observable collections
+  selectedNodes = observable.map<string, TreeNodeData>();
+  focusedNode: string | null = null;
+  
+  // Checkbox Selection State - for 3-state checkboxes
+  checkboxStates = observable.map<string, CheckboxState>();
+  
+  // Expansion State - using observable collections
+  expandedNodes = observable.map<string, boolean>();
+  loadingNodes = observable.map<string, boolean>();
+  
+  // Context menu state
+  contextMenuVisible: boolean = false;
+  contextMenuPosition: { x: number; y: number } = { x: 0, y: 0 };
+  contextMenuItems: TreeContextMenuItem[] = [];
+  contextMenuNodes: TreeNodeData[] = [];
+  
+  constructor(public provider: TreeProvider) {
+    makeAutoObservable(this, {
+      // Most defaults are correct, empty overrides object
+    });
+  }
+  
+  // =====================
+  // Computed Properties
+  // =====================
+  
+  /**
+   * Whether the tree has any nodes loaded
+   */
+  get hasNodes(): boolean {
+    return this.nodes.length > 0;
+  }
+  
+  /**
+   * Total count of nodes currently loaded
+   */
+  get nodeCount(): number {
+    return this.nodes.length;
+  }
+  
+  /**
+   * Whether data has been loaded (regardless of success/failure)
+   */
+  get isLoaded(): boolean {
+    return !this.isLoading && (this.hasNodes || this.errors.size > 0);
+  }
+  
+  /**
+   * Array of currently selected nodes (computed from selectedNodes map)
+   */
+  get selectedNodesArray(): TreeNodeData[] {
+    return Array.from(this.selectedNodes.values());
+  }
+  
+  /**
+   * Whether any nodes are currently selected
+   */
+  get hasSelection(): boolean {
+    return this.selectedNodes.size > 0;
+  }
+  
+  /**
+   * Check if a specific node is selected
+   */
+  isNodeSelected(nodeId: string): boolean {
+    return this.selectedNodes.has(nodeId);
+  }
+  
+  /**
+   * Check if a specific node is expanded
+   */
+  isNodeExpanded(nodeId: string): boolean {
+    return this.expandedNodes.get(nodeId) ?? false;
+  }
+  
+  /**
+   * Check if a specific node is loading
+   */
+  isNodeLoading(nodeId: string): boolean {
+    return this.loadingNodes.get(nodeId) ?? false;
+  }
+  
+  // =====================
+  // Async Actions (using flow)
+  // =====================
+  
+  /**
+   * Load nodes from the provider
+   * Uses MobX flow for proper async action handling
+   */
+  loadNodes = flow(function* (this: TreeModel, options?: TreeLoadOptions) {
+    this.isLoading = true;
+    this.errors.clear();
+    
+    try {
+      const result = yield this.provider.loadNodes(options);
+      
+      // Update nodes and nodeMap
+      this.nodes = result.nodes;
+      
+      // Update node map for fast lookups
+      this.nodeMap.clear();
+      result.nodes.forEach((node: TreeNodeData) => this.nodeMap.set(node.id, node));
+      
+    } catch (error) {
+      const errorKey = 'loadNodes';
+      this.errors.set(errorKey, error instanceof Error ? error : new Error(String(error)));
+    } finally {
+      this.isLoading = false;
+    }
+  });
+  
+  // =====================
+  // Selection Actions (placeholder implementations)
+  // =====================
+  
+  /**
+   * Select a specific node
+   * @param node Node to select
+   */
+  selectNode(node: TreeNodeData): void {
+    const previousSelection = this.selectedNodesArray.map(n => n.id);
+    logger.selection('selectNode called', node.id, { 
+      previouslySelected: previousSelection,
+      isMultiSelect: this.provider.isMultiSelectEnabled 
+    });
+    
+    // Check if provider allows multi-selection
+    if (!this.provider.isMultiSelectEnabled) {
+      // Clear existing selection for single-select mode
+      logger.selection('clearing selection (single-select mode)', node.id);
+      this.selectedNodes.clear();
+    }
+    
+    // Add node to selection
+    this.selectedNodes.set(node.id, node);
+    logger.selection('node added to selection', node.id, { 
+      totalSelected: this.selectedNodes.size 
+    });
+    
+    // Set focused node
+    const previousFocus = this.focusedNode;
+    this.focusedNode = node.id;
+    logger.stateChange('TreeModel', 'focusedNode', previousFocus, this.focusedNode);
+    
+    // Notify provider of selection change (if callback exists)
+    if (this.provider.onSelectionChange) {
+      logger.providerCall('onSelectionChange', {
+        selectedCount: this.selectedNodesArray.length,
+        selectionType: this.provider.isMultiSelectEnabled ? 'multi' : 'single'
+      });
+      this.provider.onSelectionChange({
+        selectedNodes: this.selectedNodesArray,
+        previousSelection: [], // TODO: Track previous selection in future enhancement
+        selectionType: this.provider.isMultiSelectEnabled ? 'multi' : 'single',
+        trigger: 'click'
+      });
+    }
+  }
+  
+  /**
+   * Deselect a specific node
+   * @param node Node to deselect
+   */
+  deselectNode(node: TreeNodeData): void {
+    logger.selection('deselectNode called', node.id, { 
+      wasSelected: this.selectedNodes.has(node.id) 
+    });
+    
+    // Remove from selection if present
+    if (this.selectedNodes.has(node.id)) {
+      this.selectedNodes.delete(node.id);
+      logger.selection('node removed from selection', node.id, { 
+        remainingSelected: this.selectedNodes.size 
+      });
+      
+      // Clear focus if this was the focused node
+      if (this.focusedNode === node.id) {
+        const previousFocus = this.focusedNode;
+        this.focusedNode = null;
+        logger.stateChange('TreeModel', 'focusedNode', previousFocus, this.focusedNode);
+      }
+      
+      // Notify provider of selection change (if callback exists)
+      if (this.provider.onSelectionChange) {
+        logger.providerCall('onSelectionChange', {
+          selectedCount: this.selectedNodesArray.length,
+          selectionType: this.provider.isMultiSelectEnabled ? 'multi' : 'single'
+        });
+        this.provider.onSelectionChange({
+          selectedNodes: this.selectedNodesArray,
+          previousSelection: [], // TODO: Track previous selection in future enhancement
+          selectionType: this.provider.isMultiSelectEnabled ? 'multi' : 'single',
+          trigger: 'click'
+        });
+      }
+    }
+  }
+  
+  /**
+   * Clear all selected nodes
+   */
+  clearSelection(): void {
+    // Only proceed if there are selected nodes
+    if (this.selectedNodes.size > 0) {
+      this.selectedNodes.clear();
+      this.focusedNode = null;
+      
+      // Notify provider of selection change (if callback exists)
+      if (this.provider.onSelectionChange) {
+        this.provider.onSelectionChange({
+          selectedNodes: [],
+          previousSelection: [], // TODO: Track previous selection in future enhancement
+          selectionType: this.provider.isMultiSelectEnabled ? 'multi' : 'single',
+          trigger: 'api'
+        });
+      }
+    }
+  }
+  
+  /**
+   * Select all nodes (only if multi-select is enabled)
+   */
+  selectAll(): void {
+    if (!this.provider.isMultiSelectEnabled) {
+      return; // Not allowed in single-select mode
+    }
+    
+    // Add all nodes to selection
+    this.nodes.forEach(node => {
+      this.selectedNodes.set(node.id, node);
+    });
+    
+    // Set focus to the first node if any exist
+    if (this.nodes.length > 0) {
+      const firstNode = this.nodes[0];
+      if (firstNode) {
+        this.focusedNode = firstNode.id;
+      }
+    }
+    
+    // Notify provider of selection change (if callback exists)
+    if (this.provider.onSelectionChange) {
+      this.provider.onSelectionChange({
+        selectedNodes: this.selectedNodesArray,
+        previousSelection: [], // TODO: Track previous selection in future enhancement
+        selectionType: 'multi',
+        trigger: 'api'
+      });
+    }
+  }
+  
+  // =====================
+  // Checkbox Selection Methods
+  // =====================
+  
+  /**
+   * Get checkbox state for a specific node
+   */
+  getCheckboxState(nodeId: string): CheckboxState {
+    return this.checkboxStates.get(nodeId) ?? 'unchecked';
+  }
+  
+  /**
+   * Handle checkbox click for a node
+   */
+  handleCheckboxChange(node: TreeNodeData, newState: CheckboxState): void {
+    logger.interaction('handleCheckboxChange called', node.id, { 
+      newState, 
+      useCheckboxSelection: this.provider.useCheckboxSelection,
+      allowPartialSelection: this.provider.allowPartialSelection,
+      currentCheckboxState: this.checkboxStates.get(node.id),
+      isCurrentlySelected: this.selectedNodes.has(node.id)
+    });
+
+    if (!this.provider.useCheckboxSelection) {
+      logger.interaction('handleCheckboxChange aborted - useCheckboxSelection is false', node.id);
+      return;
+    }
+    
+    // Set the state for this node
+    const previousState = this.checkboxStates.get(node.id);
+    this.checkboxStates.set(node.id, newState);
+    
+    logger.stateChange('TreeModel', 'checkboxStates', previousState, newState);
+    
+    // Update selection based on checkbox state
+    const wasSelected = this.selectedNodes.has(node.id);
+    if (newState === 'checked') {
+      this.selectedNodes.set(node.id, node);
+      logger.selection('node added via checkbox', node.id, { 
+        wasSelected, 
+        nowSelected: true 
+      });
+    } else {
+      this.selectedNodes.delete(node.id);
+      logger.selection('node removed via checkbox', node.id, { 
+        wasSelected, 
+        nowSelected: false 
+      });
+    }
+    
+    // If partial selection is allowed, update parent/child relationships
+    if (this.provider.allowPartialSelection) {
+      logger.debug('Updating parent/child checkbox relationships', { 
+        component: 'Checkbox',
+        nodeId: node.id 
+      });
+      this.updateChildCheckboxes(node, newState);
+      this.updateParentCheckboxes(node);
+    }
+    
+    // Notify provider of selection change
+    if (this.provider.onSelectionChange) {
+      const selectionInfo = {
+        selectedNodes: this.selectedNodesArray,
+        previousSelection: [],
+        selectionType: 'multi' as const,
+        trigger: 'click' as const
+      };
+      
+      logger.providerCall('onSelectionChange', {
+        selectedCount: selectionInfo.selectedNodes.length,
+        trigger: selectionInfo.trigger
+      });
+      
+      this.provider.onSelectionChange(selectionInfo);
+    }
+  }
+  
+  /**
+   * Update all child checkboxes when parent state changes
+   */
+  private updateChildCheckboxes(node: TreeNodeData, state: CheckboxState): void {
+    logger.debug('updateChildCheckboxes called', { 
+      component: 'Checkbox',
+      nodeId: node.id,
+      operation: 'update-children'
+    }, { 
+      parentState: state, 
+      hasChildren: !!node.children,
+      childrenCount: node.children?.length || 0 
+    });
+
+    if (!node.children || state === 'indeterminate') {
+      logger.debug('updateChildCheckboxes skipped', { 
+        component: 'Checkbox',
+        nodeId: node.id 
+      }, { 
+        reason: !node.children ? 'no-children' : 'indeterminate-state',
+        hasChildren: !!node.children,
+        state 
+      });
+      return;
+    }
+    
+    node.children.forEach(child => {
+      const previousState = this.checkboxStates.get(child.id);
+      this.checkboxStates.set(child.id, state);
+      
+      logger.debug('updateChildCheckboxes - child updated', { 
+        component: 'Checkbox',
+        nodeId: child.id 
+      }, { 
+        previousState, 
+        newState: state,
+        parentNode: node.id 
+      });
+      
+      // Update selection
+      if (state === 'checked') {
+        this.selectedNodes.set(child.id, child);
+        logger.selection('child selected via parent', child.id, { parentNode: node.id });
+      } else {
+        this.selectedNodes.delete(child.id);
+        logger.selection('child deselected via parent', child.id, { parentNode: node.id });
+      }
+      
+      // Recursively update grandchildren
+      this.updateChildCheckboxes(child, state);
+    });
+  }
+  
+  /**
+   * Update parent checkbox state based on children
+   */
+  private updateParentCheckboxes(node: TreeNodeData): void {
+    const parent = this.findParentNode(node.id);
+    
+    logger.debug('updateParentCheckboxes called', { 
+      component: 'Checkbox',
+      nodeId: node.id,
+      operation: 'update-parent'
+    }, { 
+      parentFound: !!parent,
+      parentId: parent?.id 
+    });
+
+    if (!parent || !parent.children) {
+      logger.debug('updateParentCheckboxes skipped', { 
+        component: 'Checkbox',
+        nodeId: node.id 
+      }, { 
+        reason: !parent ? 'no-parent' : 'parent-no-children' 
+      });
+      return;
+    }
+    
+    const childStates = parent.children.map(child => this.getCheckboxState(child.id));
+    const checkedCount = childStates.filter(state => state === 'checked').length;
+    const uncheckedCount = childStates.filter(state => state === 'unchecked').length;
+    const indeterminateCount = childStates.filter(state => state === 'indeterminate').length;
+    
+    logger.debug('updateParentCheckboxes - analyzing children', { 
+      component: 'Checkbox',
+      nodeId: parent.id 
+    }, { 
+      totalChildren: parent.children.length,
+      checkedCount,
+      uncheckedCount,
+      indeterminateCount,
+      childStates 
+    });
+    
+    let parentState: CheckboxState;
+    
+    if (checkedCount === parent.children.length) {
+      // All children checked
+      parentState = 'checked';
+    } else if (checkedCount === 0 && indeterminateCount === 0) {
+      // No children checked or indeterminate
+      parentState = 'unchecked';
+    } else {
+      // Some children checked or indeterminate
+      parentState = 'indeterminate';
+    }
+    
+    const previousParentState = this.checkboxStates.get(parent.id);
+    this.checkboxStates.set(parent.id, parentState);
+    
+    logger.debug('updateParentCheckboxes - parent state calculated', { 
+      component: 'Checkbox',
+      nodeId: parent.id 
+    }, { 
+      previousState: previousParentState,
+      newState: parentState,
+      logic: checkedCount === parent.children.length ? 'all-checked' :
+             (checkedCount === 0 && indeterminateCount === 0) ? 'none-checked' : 'mixed'
+    });
+    
+    // Update selection based on parent state
+    if (parentState === 'checked') {
+      this.selectedNodes.set(parent.id, parent);
+      logger.selection('parent selected via children', parent.id, { newState: parentState });
+    } else {
+      this.selectedNodes.delete(parent.id);
+      logger.selection('parent deselected via children', parent.id, { newState: parentState });
+    }
+    
+    // Recursively update grandparent
+    this.updateParentCheckboxes(parent);
+  }
+  
+  /**
+   * Find parent node of a given node ID
+   */
+  private findParentNode(nodeId: string): TreeNodeData | null {
+    const findParent = (nodes: TreeNodeData[], targetId: string, parentNode: TreeNodeData | null = null): TreeNodeData | null => {
+      for (const node of nodes) {
+        if (node.id === targetId) {
+          return parentNode;
+        }
+        if (node.children && node.children.length > 0) {
+          const parent = findParent(node.children, targetId, node);
+          if (parent) return parent;
+        }
+      }
+      return null;
+    };
+    
+    return findParent(this.nodes, nodeId);
+  }
+  
+  // =====================
+  // Focus Management & Navigation
+  // =====================
+
+  /**
+   * Set focus to a specific node
+   * @param nodeId ID of node to focus
+   */
+  setFocus(nodeId: string): void {
+    if (this.nodeMap.has(nodeId)) {
+      this.focusedNode = nodeId;
+    }
+  }
+
+  /**
+   * Move focus to next visible node
+   */
+  focusNext(): boolean {
+    const flatNodes = this.getFlattenedVisibleNodes();
+    const currentIndex = flatNodes.findIndex(node => node.id === this.focusedNode);
+    
+    if (currentIndex >= 0 && currentIndex < flatNodes.length - 1) {
+      const nextNode = flatNodes[currentIndex + 1];
+      if (nextNode) {
+        this.focusedNode = nextNode.id;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Move focus to previous visible node
+   */
+  focusPrevious(): boolean {
+    const flatNodes = this.getFlattenedVisibleNodes();
+    const currentIndex = flatNodes.findIndex(node => node.id === this.focusedNode);
+    
+    if (currentIndex > 0) {
+      const prevNode = flatNodes[currentIndex - 1];
+      if (prevNode) {
+        this.focusedNode = prevNode.id;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Move focus to first visible node
+   */
+  focusFirst(): boolean {
+    const flatNodes = this.getFlattenedVisibleNodes();
+    if (flatNodes.length > 0) {
+      const firstNode = flatNodes[0];
+      if (firstNode) {
+        this.focusedNode = firstNode.id;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Move focus to last visible node
+   */
+  focusLast(): boolean {
+    const flatNodes = this.getFlattenedVisibleNodes();
+    if (flatNodes.length > 0) {
+      const lastNode = flatNodes[flatNodes.length - 1];
+      if (lastNode) {
+        this.focusedNode = lastNode.id;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Get flattened list of all currently visible nodes
+   * @private
+   */
+  private getFlattenedVisibleNodes(): TreeNodeData[] {
+    const result: TreeNodeData[] = [];
+    
+    const processNodes = (nodes: TreeNodeData[]) => {
+      for (const node of nodes) {
+        result.push(node);
+        // Add children if node is expanded
+        if (this.isNodeExpanded(node.id) && node.children && node.children.length > 0) {
+          processNodes(node.children);
+        }
+      }
+    };
+    
+    processNodes(this.nodes);
+    return result;
+  }
+  
+  // =====================
+  // Expansion Actions (placeholder implementations)  
+  // =====================
+  
+  /**
+   * Expand a specific node
+   * @param node Node to expand
+   */
+  expandNode = flow(function* (this: TreeModel, node: TreeNodeData) {
+    logger.expansion('expandNode called', node.id, {
+      hasChildren: node.hasChildren,
+      currentlyExpanded: this.isNodeExpanded(node.id),
+      hasLoadedChildren: !!(node.children && node.children.length > 0)
+    });
+
+    // Guard: skip if node no longer exists in the tree (stale reference after rename/delete)
+    if (!this.nodeMap.has(node.id)) {
+      logger.expansion('expandNode skipped - node not in tree', node.id);
+      return;
+    }
+
+    // Set expansion state
+    this.expandedNodes.set(node.id, true);
+    logger.expansion('expansion state set to true', node.id);
+    
+    // Notify provider of expansion (if callback exists)
+    if (this.provider.onNodeExpansion) {
+      logger.providerCall('onNodeExpansion', { nodeId: node.id, expanded: true });
+      this.provider.onNodeExpansion(node, true);
+    }
+    
+    // Load children if they haven't been loaded yet
+    if (node.hasChildren && (!node.children || node.children.length === 0)) {
+      logger.expansion('loading children', node.id, { hasChildren: node.hasChildren });
+      this.loadingNodes.set(node.id, true);
+      
+      try {
+        logger.providerCall('loadChildren', { nodeId: node.id });
+        const result = yield this.provider.loadChildren(node);
+        logger.expansion('children loaded successfully', node.id, { 
+          childCount: result.nodes.length 
+        });
+        
+        // Update the node with children data both in nodeMap and original node
+        const existingNode = this.nodeMap.get(node.id);
+        if (existingNode) {
+          existingNode.children = result.nodes;
+          
+          // Add children to nodeMap for fast lookups
+          result.nodes.forEach((child: TreeNodeData) => {
+            this.nodeMap.set(child.id, child);
+          });
+        }
+        
+        // Also update the original node object to ensure reactivity
+        node.children = result.nodes;
+        
+        // Update any references to this node in the main nodes array recursively
+        const updateNodeInTree = (nodes: TreeNodeData[]): void => {
+          for (const treeNode of nodes) {
+            if (treeNode.id === node.id) {
+              treeNode.children = result.nodes;
+            }
+            if (treeNode.children) {
+              updateNodeInTree(treeNode.children);
+            }
+          }
+        };
+        
+        updateNodeInTree(this.nodes);
+        
+        // IMPORTANT: Apply parent's checkbox state to newly loaded children
+        if (this.provider.allowPartialSelection && this.provider.useCheckboxSelection) {
+          const parentCheckboxState = this.getCheckboxState(node.id);
+          
+          logger.debug('Applying parent checkbox state to newly loaded children', { 
+            component: 'Checkbox',
+            nodeId: node.id,
+            operation: 'children-loaded-inheritance'
+          }, { 
+            parentState: parentCheckboxState,
+            childrenCount: result.nodes.length,
+            childIds: result.nodes.map((child: TreeNodeData) => child.id)
+          });
+          
+          if (parentCheckboxState === 'checked' || parentCheckboxState === 'unchecked') {
+            // Apply parent's state to all newly loaded children
+            result.nodes.forEach((child: TreeNodeData) => {
+              const previousChildState = this.checkboxStates.get(child.id);
+              this.checkboxStates.set(child.id, parentCheckboxState);
+              
+              logger.debug('Child checkbox state inherited from parent', { 
+                component: 'Checkbox',
+                nodeId: child.id 
+              }, { 
+                parentNode: node.id,
+                parentState: parentCheckboxState,
+                previousChildState,
+                newChildState: parentCheckboxState
+              });
+              
+              // Update selection state accordingly
+              if (parentCheckboxState === 'checked') {
+                this.selectedNodes.set(child.id, child);
+                logger.selection('child auto-selected via parent inheritance', child.id, { 
+                  parentNode: node.id 
+                });
+              } else {
+                this.selectedNodes.delete(child.id);
+                logger.selection('child auto-deselected via parent inheritance', child.id, { 
+                  parentNode: node.id 
+                });
+              }
+              
+              // Recursively apply to grandchildren if they exist
+              if (child.children && child.children.length > 0) {
+                this.updateChildCheckboxes(child, parentCheckboxState);
+              }
+            });
+          }
+        }
+        
+      } catch (error) {
+        const errorKey = `loadChildren-${node.id}`;
+        this.errors.set(errorKey, error instanceof Error ? error : new Error(String(error)));
+        
+        // Collapse node on error
+        this.expandedNodes.set(node.id, false);
+      } finally {
+        this.loadingNodes.delete(node.id);
+      }
+    }
+  });
+  
+  /**
+   * Collapse a specific node
+   * @param node Node to collapse
+   */
+  collapseNode(node: TreeNodeData): void {
+    logger.expansion('collapseNode called', node.id, { 
+      currentlyExpanded: this.isNodeExpanded(node.id) 
+    });
+    
+    // Set collapsed state
+    this.expandedNodes.set(node.id, false);
+    logger.expansion('expansion state set to false', node.id);
+    
+    // Notify provider of collapse (if callback exists)
+    if (this.provider.onNodeExpansion) {
+      logger.providerCall('onNodeExpansion', { nodeId: node.id, expanded: false });
+      this.provider.onNodeExpansion(node, false);
+    }
+  }
+  
+  /**
+   * Toggle expansion state of a specific node
+   * @param node Node to toggle
+   */
+  toggleExpansion(node: TreeNodeData): void {
+    if (this.isNodeExpanded(node.id)) {
+      this.collapseNode(node);
+    } else {
+      this.expandNode(node);
+    }
+  }
+
+  // =====================
+  // Context Menu Actions
+  // =====================
+
+  /**
+   * Show context menu for a specific node
+   * @param node Target node
+   * @param event Mouse event
+   */
+  showContextMenu(node: TreeNodeData, event: MouseEvent): void {
+    // Get context menu items from provider
+    const menuItems = this.provider.getNodeContextMenu?.(node) || [];
+    
+    if (menuItems.length === 0) return;
+    
+    // Set context menu state
+    this.contextMenuVisible = true;
+    this.contextMenuPosition = { x: event.clientX, y: event.clientY };
+    this.contextMenuItems = menuItems;
+    this.contextMenuNodes = [node];
+  }
+
+  /**
+   * Show context menu for multiple selected nodes
+   * @param nodes Selected nodes
+   * @param event Mouse event
+   */
+  showMultiNodeContextMenu(nodes: TreeNodeData[], event: MouseEvent): void {
+    // Get context menu items from provider
+    const menuItems = this.provider.getMultiNodeContextMenu?.(nodes) || [];
+    
+    if (menuItems.length === 0) return;
+    
+    // Set context menu state
+    this.contextMenuVisible = true;
+    this.contextMenuPosition = { x: event.clientX, y: event.clientY };
+    this.contextMenuItems = menuItems;
+    this.contextMenuNodes = nodes;
+  }
+
+  /**
+   * Hide context menu
+   */
+  hideContextMenu(): void {
+    this.contextMenuVisible = false;
+    this.contextMenuItems = [];
+    this.contextMenuNodes = [];
+  }
+
+  /**
+   * Handle context menu item click
+   * @param menuItem Clicked menu item
+   */
+  handleContextMenuAction(menuItem: TreeContextMenuItem): void {
+    // Call provider callback if available
+    if (this.provider.onContextMenuAction) {
+      this.provider.onContextMenuAction(menuItem.id, this.contextMenuNodes);
+    }
+    
+    // Hide context menu
+    this.hideContextMenu();
+  }
+}