@flowuent-org/diagramming-core 1.0.8 → 1.1.0

package/packages/diagrams/src/lib/templates/cloud-arch/components/CloudArchitectureDiagram.tsx

@@ -1,3912 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { Alert, Box, Button, Snackbar } from '@mui/material';
-import { generateMeaningfulId, generateUsersId } from '../utils/idGenerator';
-import ReactFlow, {
-  Node,
-  Edge,
-  useNodesState,
-  useEdgesState,
-  ConnectionLineType,
-  addEdge,
-  Connection,
-  XYPosition,
-  NodeMouseHandler,
-  MarkerType,
-  Panel,
-  applyNodeChanges,
-  applyEdgeChanges,
-  NodeChange,
-  EdgeChange,
-  ReactFlowProvider,
-} from 'reactflow';
-import 'reactflow/dist/style.css';
-import { Typography } from '@mui/material';
-
-import ServiceNode from './nodes/ServiceNode';
-import SubnetNode from './nodes/SubnetNode';
-import UsersNode from './nodes/UsersNode';
-import PropertiesPanel from './PropertiesPanel';
-import SettingsSidebar from './SettingsSidebar';
-// import SubnetSelector from './SubnetSelector'; // No longer needed
-import { getServiceInfo, labelMap } from '../utils/iconMapping';
-// Note: Old validation imports removed - now using generic validation system
-import { 
-  validateCloudProviderPlacement,
-  findAutoParent,
-  autoAssignParentOnDrop,
-} from '../utils/cloudValidation';
-// Note: Using direct validation in cloudValidation.ts instead of generic system
-import { 
-  extractNodeSemantics, 
-  extractNodeRestrictions,
-  enhanceNodesWithValidation
-} from '../utils/validationExtractor';
-import Sidebar from '../../../components/SideBar';
-import AiButton from '../../../components/AiButton';
-import MiniMapCommon from '../../../components/MiniMapCommon';
-import DiagramPanel from '../../../components/DiagramPanel';
-
-// Localization Schema and Interfaces
-interface LocalizationSchema {
-  locale: {
-    core: {
-      coordinate: {
-        x: string;
-        y: string;
-      };
-      size: {
-        width: string;
-        height: string;
-      };
-      common: {
-        title: string;
-        description: string;
-        cloudProvider: string;
-      };
-    };
-    ui: {
-      buttons: {
-        undo: string;
-        redo: string;
-        clear: string;
-        import: string;
-        export: string;
-        autoLayout: string;
-        refreshValidation: string;
-        clearSelection: string;
-      };
-      messages: {
-        success: {
-          nodeCreated: string;
-          nodePlaced: string;
-          nodesArranged: string;
-          validationRefreshed: string;
-        };
-        error: {
-          invalidPlacement: string;
-          invalidDrop: string;
-          validationFailed: string;
-          dropBlocked: string;
-        };
-        info: {
-          dropToPlace: string;
-          selectContainer: string;
-          willBePlacedIn: string;
-          willBePlacedAtRoot: string;
-        };
-      };
-      labels: {
-        selectedContainer: string;
-        dragState: string;
-        service: string;
-        cloud: string;
-        hoveredNode: string;
-        invalidOverlay: string;
-        message: string;
-        target: string;
-        servicesWillBePlacedHere: string;
-      };
-      containers: {
-        aws: {
-          account: string;
-          vpc: string;
-          subnet: string;
-          availabilityZone: string;
-          securityGroup: string;
-        };
-        azure: {
-          subscription: string;
-          resourceGroup: string;
-          virtualNetwork: string;
-          subnet: string;
-          networkSecurityGroup: string;
-        };
-        gcp: {
-          project: string;
-          folder: string;
-          vpc: string;
-          subnet: string;
-        };
-      };
-    };
-  };
-}
-
-// Default localization (English)
-const defaultLocalization: LocalizationSchema = {
-  locale: {
-    core: {
-      coordinate: {
-        x: "X Coordinate",
-        y: "Y Coordinate"
-      },
-      size: {
-        width: "Width",
-        height: "Height"
-      },
-      common: {
-        title: "Title",
-        description: "Description",
-        cloudProvider: "Cloud Provider"
-      }
-    },
-    ui: {
-      buttons: {
-        undo: "Undo",
-        redo: "Redo",
-        clear: "Clear",
-        import: "Import",
-        export: "Export",
-        autoLayout: "Auto Layout",
-        refreshValidation: "Refresh Validation",
-        clearSelection: "Clear Selection"
-      },
-      messages: {
-        success: {
-          nodeCreated: "Node created successfully",
-          nodePlaced: "Service placed in: {container}",
-          nodesArranged: "{count} nodes arranged with proper spacing",
-          validationRefreshed: "Validation properties refreshed for all nodes!"
-        },
-        error: {
-          invalidPlacement: "Invalid placement - drop blocked",
-          invalidDrop: "Invalid drop location - drop blocked", 
-          validationFailed: "Validation failed - invalid drop target",
-          dropBlocked: "DROP BLOCKED"
-        },
-        info: {
-          dropToPlace: "Drop to place service",
-          selectContainer: "Drop to select container",
-          willBePlacedIn: "Will be placed in: {container}",
-          willBePlacedAtRoot: "Will be placed at root level"
-        }
-      },
-      labels: {
-        selectedContainer: "Selected Container",
-        dragState: "Debug: Drag State",
-        service: "Service",
-        cloud: "Cloud",
-        hoveredNode: "Hovered Node",
-        invalidOverlay: "Invalid Overlay",
-        message: "Message",
-        target: "Target",
-        servicesWillBePlacedHere: "Services will be placed here"
-      },
-      containers: {
-        aws: {
-          account: "AWS Account",
-          vpc: "Virtual Private Cloud",
-          subnet: "Subnet",
-          availabilityZone: "Availability Zone", 
-          securityGroup: "Security Group"
-        },
-        azure: {
-          subscription: "Azure Subscription",
-          resourceGroup: "Resource Group",
-          virtualNetwork: "Virtual Network",
-          subnet: "Subnet",
-          networkSecurityGroup: "Network Security Group"
-        },
-        gcp: {
-          project: "GCP Project",
-          folder: "Folder",
-          vpc: "VPC Network",
-          subnet: "Subnet"
-        }
-      }
-    }
-  }
-};
-
-// Custom hook for localization
-const useLocalization = (customLocalization?: Partial<LocalizationSchema>) => {
-  const localization = React.useMemo(() => {
-    if (!customLocalization) return defaultLocalization;
-    
-    // Deep merge custom localization with default
-    const mergeDeep = (target: any, source: any): any => {
-      const result = { ...target };
-      for (const key in source) {
-        if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
-          result[key] = mergeDeep(target[key] || {}, source[key]);
-        } else {
-          result[key] = source[key];
-        }
-      }
-      return result;
-    };
-    
-    return mergeDeep(defaultLocalization, customLocalization);
-  }, [customLocalization]);
-
-  const t = useCallback((path: string, replacements?: Record<string, string | number>) => {
-    const keys = path.split('.');
-    let value: any = localization;
-    
-    for (const key of keys) {
-      value = value?.[key];
-      if (value === undefined) {
-        console.warn(`Localization key not found: ${path}`);
-        return path;
-      }
-    }
-    
-    if (typeof value !== 'string') {
-      console.warn(`Localization value is not a string: ${path}`);
-      return path;
-    }
-    
-    // Replace placeholders like {container}, {count}, etc.
-    if (replacements) {
-      return Object.entries(replacements).reduce((str, [key, val]) => {
-        return str.replace(new RegExp(`\\{${key}\\}`, 'g'), String(val));
-      }, value);
-    }
-    
-    return value;
-  }, [localization]);
-
-  return { t, localization };
-};
-
-// Interface for component props
-interface CloudArchitectureDiagramProps {
-  initialNodes: Node[];
-  initialEdges: Edge[];
-  localization?: Partial<LocalizationSchema>;
-}
-
-// CSS keyframes for invalid drop animation with enhanced UX
-const invalidDropShakeKeyframes = `
-  @keyframes invalidDropShake {
-    0%, 100% { transform: translateX(0) scale(1); }
-    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px) scale(1.02); }
-    20%, 40%, 60%, 80% { transform: translateX(3px) scale(1.02); }
-  }
-  
-  @keyframes invalidDropPulse {
-    0%, 100% { 
-      transform: scale(1); 
-      box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4), 0 0 0 1px rgba(220, 53, 69, 0.3);
-      background: rgba(220, 53, 69, 0.05);
-    }
-    50% { 
-      transform: scale(1.05); 
-      box-shadow: 0 6px 25px rgba(220, 53, 69, 0.7), 0 0 0 3px rgba(220, 53, 69, 0.6);
-      background: rgba(220, 53, 69, 0.15);
-    }
-  }
-  
-  @keyframes invalidDropGlow {
-    0%, 100% { 
-      box-shadow: 
-        0 0 10px rgba(220, 53, 69, 0.6), 
-        0 0 20px rgba(220, 53, 69, 0.4), 
-        0 0 30px rgba(220, 53, 69, 0.2),
-        inset 0 0 10px rgba(220, 53, 69, 0.1);
-    }
-    50% { 
-      box-shadow: 
-        0 0 15px rgba(220, 53, 69, 0.8), 
-        0 0 30px rgba(220, 53, 69, 0.6), 
-        0 0 45px rgba(220, 53, 69, 0.4),
-        inset 0 0 15px rgba(220, 53, 69, 0.2);
-    }
-  }
-
-  @keyframes validDropGlow {
-    0%, 100% { 
-      box-shadow: 
-        0 0 10px rgba(76, 175, 80, 0.5), 
-        0 0 20px rgba(76, 175, 80, 0.3),
-        inset 0 0 10px rgba(76, 175, 80, 0.1);
-    }
-    50% { 
-      box-shadow: 
-        0 0 15px rgba(76, 175, 80, 0.7), 
-        0 0 30px rgba(76, 175, 80, 0.5),
-        inset 0 0 15px rgba(76, 175, 80, 0.2);
-    }
-  }
-  
-  /* Enhanced invalid drop target styling */
-  .invalid-drop-target {
-    cursor: not-allowed !important;
-    position: relative;
-    transition: all 0.2s ease !important;
-  }
-  
-  .invalid-drop-target::before {
-    content: '';
-    position: absolute;
-    top: -2px;
-    left: -2px;
-    right: -2px;
-    bottom: -2px;
-    background: linear-gradient(45deg, 
-      rgba(220, 53, 69, 0.1) 0%, 
-      rgba(220, 53, 69, 0.05) 50%, 
-      rgba(220, 53, 69, 0.1) 100%);
-    pointer-events: none;
-    z-index: 1000;
-    animation: invalidDropPulse 1s ease-in-out infinite;
-    border: 2px dashed rgba(220, 53, 69, 0.8);
-    border-radius: 8px;
-  }
-  
-  .invalid-drop-target * {
-    cursor: not-allowed !important;
-  }
-  
-  /* Enhanced valid drop target styling */
-  .valid-drop-target {
-    cursor: copy !important;
-    position: relative;
-    transition: all 0.2s ease !important;
-  }
-  
-  .valid-drop-target::before {
-    content: '';
-    position: absolute;
-    top: -2px;
-    left: -2px;
-    right: -2px;
-    bottom: -2px;
-    background: linear-gradient(45deg, 
-      rgba(76, 175, 80, 0.08) 0%, 
-      rgba(76, 175, 80, 0.03) 50%, 
-      rgba(76, 175, 80, 0.08) 100%);
-    pointer-events: none;
-    z-index: 1000;
-    animation: validDropGlow 1.5s ease-in-out infinite;
-    border: 2px dashed rgba(76, 175, 80, 0.6);
-    border-radius: 8px;
-  }
-  
-  /* Force cursor override globally during drag */
-  body.dragging-invalid {
-    cursor: not-allowed !important;
-  }
-  
-  body.dragging-invalid * {
-    cursor: not-allowed !important;
-  }
-
-  body.dragging-valid {
-    cursor: copy !important;
-  }
-  
-  /* Enhanced node drag hover states with immediate feedback */
-  .react-flow__node[data-drag-hover="true"] {
-    transition: all 0.1s ease !important;
-    z-index: 1000 !important;
-  }
-
-  .react-flow__node[data-drag-hover="true"][data-drag-hover-valid="true"] {
-    outline: 3px solid rgba(76, 175, 80, 0.9) !important;
-    outline-offset: 3px;
-    box-shadow: 
-      0 0 20px rgba(76, 175, 80, 0.6) !important,
-      0 0 40px rgba(76, 175, 80, 0.3) !important,
-      inset 0 0 20px rgba(76, 175, 80, 0.1) !important;
-    background: linear-gradient(135deg, 
-      rgba(76, 175, 80, 0.15) 0%, 
-      rgba(76, 175, 80, 0.05) 100%) !important;
-    cursor: copy !important;
-    transform: scale(1.02) !important;
-    animation: validDropGlow 1s ease-in-out infinite;
-  }
-  
-  .react-flow__node[data-drag-hover="true"][data-drag-hover-valid="false"] {
-    outline: 3px solid rgba(220, 53, 69, 0.9) !important;
-    outline-offset: 3px;
-    box-shadow: 
-      0 0 20px rgba(220, 53, 69, 0.6) !important,
-      0 0 40px rgba(220, 53, 69, 0.3) !important,
-      inset 0 0 20px rgba(220, 53, 69, 0.1) !important;
-    background: linear-gradient(135deg, 
-      rgba(220, 53, 69, 0.15) 0%, 
-      rgba(220, 53, 69, 0.05) 100%) !important;
-    cursor: not-allowed !important;
-    transform: scale(1.02) !important;
-    animation: invalidDropShake 0.8s ease-in-out infinite, invalidDropGlow 1s ease-in-out infinite;
-  }
-  
-  .react-flow__node[data-drag-hover="true"][data-drag-hover-valid="false"] * {
-    cursor: not-allowed !important;
-  }
-
-  .react-flow__node[data-drag-hover="true"][data-drag-hover-valid="true"] * {
-    cursor: copy !important;
-  }
-  
-  /* Immediate cursor feedback for drag operations */
-  .react-flow__renderer {
-    transition: cursor 0.1s ease !important;
-  }
-
-  .react-flow.drag-active {
-    cursor: grabbing !important;
-  }
-
-  .react-flow.drag-invalid {
-    cursor: not-allowed !important;
-  }
-
-  .react-flow.drag-valid {
-    cursor: copy !important;
-  }
-  
-  /* Enhanced overlay animations */
-  @keyframes invalidDropOverlayAppear {
-    0% { 
-      opacity: 0;
-      transform: scale(0.5) rotate(-5deg);
-    }
-    50% {
-      opacity: 0.8;
-      transform: scale(1.1) rotate(2deg);
-    }
-    100% { 
-      opacity: 1;
-      transform: scale(1) rotate(0deg);
-    }
-  }
-  
-  @keyframes invalidDropTooltipAppear {
-    0% { 
-      opacity: 0;
-      transform: translateX(-50%) translateY(-20px) scale(0.8);
-    }
-    100% { 
-      opacity: 1;
-      transform: translateX(-50%) translateY(0) scale(1);
-    }
-  }
-
-  @keyframes stopIconRotate {
-    0% { transform: rotate(0deg); }
-    25% { transform: rotate(-5deg); }
-    75% { transform: rotate(5deg); }
-    100% { transform: rotate(0deg); }
-  }
-`;
-
-// Inject the keyframes into the document head
-if (typeof document !== 'undefined') {
-  const styleElement = document.createElement('style');
-  styleElement.textContent = invalidDropShakeKeyframes;
-  if (!document.head.querySelector('style[data-drag-preview="true"]')) {
-    styleElement.setAttribute('data-drag-preview', 'true');
-    document.head.appendChild(styleElement);
-  }
-}
-
-// Update default edge options with additional styles
-const defaultEdgeOptions = {
-  type: 'smoothstep',
-  animated: false,
-  style: {
-    stroke: '#61dafb',
-    strokeWidth: 2,
-    zIndex: 5000,
-    pointerEvents: 'all' as const,
-    cursor: 'pointer',
-  },
-  markerEnd: {
-    type: MarkerType.ArrowClosed,
-    width: 20,
-    height: 20,
-    color: '#61dafb',
-  },
-  className: 'edge-path-selector',
-  labelStyle: {
-    fill: '#fff',
-    fontWeight: 700,
-    fontSize: 12,
-  },
-  labelBgStyle: {
-    fill: '#242424',
-    fillOpacity: 0.7,
-    rx: 4,
-    ry: 4,
-  },
-};
-
-// Register custom node types
-const nodeTypes = {
-  serviceNode: ServiceNode,
-  subnetNode: SubnetNode,
-  internetNode: ServiceNode,
-  usersNode: UsersNode,
-};
-
-export interface NodeLabel {
-  label: string;
-  sublabel?: string;
-}
-
-// Helper function to format node labels
-const formatNodeLabel = (
-  service: string,
-  cloudProvider?: 'aws' | 'azure' | 'gcp',
-): NodeLabel => {
-  // Special case for users node
-  if (service === 'users') {
-    return {
-      label: 'Users',
-      sublabel: 'External',
-    };
-  }
-
-  // Get service info from iconMapping
-  const serviceInfo = getServiceInfo(service);
-  if (serviceInfo) {
-    // Split the name into label and sublabel if it contains spaces
-    const parts = serviceInfo.name.split(' ');
-    if (parts.length > 1) {
-      return {
-        label: parts[0],
-        sublabel: parts.slice(1).join(' '),
-      };
-    }
-    return {
-      label: serviceInfo.name,
-    };
-  }
-
-  return (
-    labelMap[service] || {
-      label: service
-        .split('-')
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' '),
-    }
-  );
-};
-
-const getNodePosition = (position?: XYPosition, nodes?: Node[]): XYPosition => {
-  // If position is provided, use it directly
-  if (position) {
-    return position;
-  }
-
-  // Otherwise, return a default position
-  return { x: 100, y: 100 };
-};
-
-// Add type guard for position changes
-const isPositionChange = (
-  change: NodeChange,
-): change is NodeChange & { dragging?: boolean } => {
-  return change.type === 'position';
-};
-
-// Add a new type for resize events
-interface ResizeEvent {
-  id: string;
-  width: number;
-  height: number;
-}
-
-const CloudArchitectureDiagramContent: React.FC<CloudArchitectureDiagramProps> = ({ initialNodes, initialEdges, localization }) => {
-  const { t } = useLocalization(localization);
-  const [nodes, setNodes] = useNodesState(initialNodes);
-  const [edges, setEdges] = useEdgesState(initialEdges);
-  const [selectedNode, setSelectedNode] = useState<Node | null>(null);
-  const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null);
-  const [isSettingsSidebarOpen, setIsSettingsSidebarOpen] = useState(false);
-  const [validationError, setValidationError] = useState<string | null>(null);
-  const [successMessage, setSuccessMessage] = useState<string | null>(null);
-  const [history, setHistory] = useState<
-    Array<{ nodes: Node[]; edges: Edge[] }>
-  >([{ nodes: initialNodes, edges: initialEdges }]);
-  const [historyIndex, setHistoryIndex] = useState(0);
-
-  // Add reactFlowInstance state to track the flow instance
-  const [reactFlowInstance, setReactFlowInstance] = useState<any>(null);
-
-  // Add selected container state for drag and drop
-  const [selectedContainer, setSelectedContainer] = useState<Node | null>(null);
-
-  // Add drag preview state
-  const [dragPreview, setDragPreview] = useState<{
-    isVisible: boolean;
-    service: string;
-    cloudProvider: string;
-    position: { x: number; y: number };
-    isValid: boolean;
-    validationMessage: string;
-    targetContainer: Node | null;
-  } | null>(null);
-
-  // Add state to track current drag operation and hovered node
-  const [currentDragData, setCurrentDragData] = useState<{
-    service: string;
-    nodeType: string;
-    cloudProvider: string;
-    label: string;
-  } | null>(null);
-
-  // Add state to track which node is currently being hovered during drag
-  const [hoveredNodeDuringDrag, setHoveredNodeDuringDrag] = useState<
-    string | null
-  >(null);
-
-  // Add state to track invalid drop overlay
-  const [invalidDropOverlay, setInvalidDropOverlay] = useState<{
-    nodeId: string;
-    position: { x: number; y: number };
-    message: string;
-  } | null>(null);
-
-  // Add state for overlay auto-hide timing
-  const [overlayAutoHideTimer, setOverlayAutoHideTimer] = useState<NodeJS.Timeout | null>(null);
-
-  // Configuration for overlay timing (you can adjust these values)
-  const OVERLAY_TIMING = {
-    appearDuration: 0.3, // seconds for initial appearance
-    pulseDuration: 1.0,  // seconds for pulse cycle
-    tooltipDelay: 0.2,   // seconds before tooltip appears
-    tooltipDuration: 0.4, // seconds for tooltip animation
-    autoHideDuration: 3.0, // seconds before auto-hide (set to 0 to disable)
-    iconRotationDuration: 2.0, // seconds for stop icon rotation
-  };
-
-  // Helper function to check if a node is a container node
-  const isContainerNode = useCallback((node: Node) => {
-    return (
-      node.type === 'subnetNode' ||
-      // AWS containers
-      node.data?.service === 'account' || 
-      node.data?.service === 'vpc' || 
-      node.data?.service === 'subnet' ||
-      node.data?.service === 'availability-zone' || 
-      node.data?.service === 'local-zone' ||
-      node.data?.service === 'security-group' || 
-      // Azure containers
-      node.data?.service === 'subscription' ||
-      node.data?.service === 'resource-group' || 
-      node.data?.service === 'virtual-network' ||
-      node.data?.service === 'network-security-group' ||
-      // GCP containers
-      node.data?.service === 'project' ||
-      node.data?.service === 'folder'
-    );
-  }, []);
-
-  // Helper function to check if a service is a container service
-  const isContainerService = useCallback((service: string) => {
-    return (
-      // AWS containers
-      service === 'account' || 
-      service === 'vpc' ||
-      service === 'subnet' ||
-      service === 'availability-zone' || 
-      service === 'local-zone' ||
-      service === 'security-group' || 
-      // Azure containers
-      service === 'subscription' ||
-      service === 'resource-group' || 
-      service === 'virtual-network' ||
-      service === 'network-security-group' ||
-      // GCP containers
-      service === 'project' ||
-      service === 'folder'
-    );
-  }, []);
-
-  // Helper function to enhance a node with semantic and restriction properties
-  const enhanceNodeWithValidation = useCallback((node: Node, allNodes: Node[] = nodes): Node => {
-    const semantics = extractNodeSemantics(node);
-    const restrictions = extractNodeRestrictions(node, allNodes);
-    
-    return {
-      ...node,
-      data: {
-        ...node.data,
-        semantics,
-        restrictions,
-        validationStatus: {
-          isValid: true,
-          message: 'Node created successfully',
-          suggestions: [],
-          lastValidated: new Date().toISOString()
-        }
-      }
-    };
-  }, [nodes]);
-
-  // Add container selection handler
-  const handleContainerSelection = useCallback(
-    (node: Node) => {
-    if (isContainerNode(node)) {
-      setSelectedContainer(node);
-      // Update nodes to show selection visually
-        const updatedNodes = nodes.map((n) => ({
-        ...n,
-        data: {
-          ...n.data,
-            isSelected: n.id === node.id,
-          },
-      }));
-      setNodes(updatedNodes);
-    }
-    },
-    [nodes, isContainerNode],
-  );
-
-  // Function to detect overlapping nodes
-  const detectOverlapping = useCallback(
-    (nodes: Node[]): { node1: Node; node2: Node }[] => {
-      const overlaps: { node1: Node; node2: Node }[] = [];
-
-      for (let i = 0; i < nodes.length; i++) {
-        for (let j = i + 1; j < nodes.length; j++) {
-          const node1 = nodes[i];
-          const node2 = nodes[j];
-
-          // Skip if nodes are parent-child (they should overlap)
-          if (node1.parentNode === node2.id || node2.parentNode === node1.id) {
-            continue;
-          }
-
-          // Skip if nodes have different parents (they're in different containers)
-          if (node1.parentNode !== node2.parentNode) {
-            continue;
-          }
-
-          // Get node dimensions based on node type
-          const getNodeDimensions = (node: Node) => {
-            if (isContainerNode(node)) {
-              return {
-                width: (node.style?.width as number) || node.data?.width || 300,
-                height:
-                  (node.style?.height as number) || node.data?.height || 200,
-              };
-            } else {
-              return {
-                width: (node.style?.width as number) || node.data?.width || 120,
-                height:
-                  (node.style?.height as number) || node.data?.height || 80,
-              };
-            }
-          };
-
-          const { width: node1Width, height: node1Height } =
-            getNodeDimensions(node1);
-          const { width: node2Width, height: node2Height } =
-            getNodeDimensions(node2);
-
-          // Check for overlap with a small margin
-          const margin = 10;
-          const overlap =
-            node1.position.x < node2.position.x + node2Width + margin &&
-            node1.position.x + node1Width + margin > node2.position.x &&
-            node1.position.y < node2.position.y + node2Height + margin &&
-            node1.position.y + node1Height + margin > node2.position.y;
-
-          if (overlap) {
-            overlaps.push({ node1, node2 });
-          }
-        }
-      }
-
-      return overlaps;
-    },
-    [],
-  );
-
-  // Function to automatically arrange nodes with proper spacing
-  const autoLayout = useCallback(() => {
-    const newNodes = [...nodes];
-
-    // Group nodes by their parent containers
-    const nodesByParent = new Map<string | undefined, Node[]>();
-
-    newNodes.forEach((node) => {
-      const parentId = node.parentNode;
-      if (!nodesByParent.has(parentId)) {
-        nodesByParent.set(parentId, []);
-      }
-      nodesByParent.get(parentId)?.push(node);
-    });
-
-    // Process each group separately
-    nodesByParent.forEach((groupNodes, parentId) => {
-      const containerNodes = groupNodes.filter((node) => isContainerNode(node));
-      const serviceNodes = groupNodes.filter((node) => !isContainerNode(node));
-
-      if (parentId) {
-        // This is a group within a container
-        const parentNode = newNodes.find((n) => n.id === parentId);
-        if (parentNode) {
-          // Arrange both container nodes (subnets) and service nodes within the parent
-          arrangeNodesInContainer(
-            [...containerNodes, ...serviceNodes],
-            parentNode,
-            newNodes,
-          );
-        }
-      } else {
-        // This is the root level
-        arrangeNodesInRoot(containerNodes, newNodes);
-        arrangeNodesInRoot(serviceNodes, newNodes);
-      }
-    });
-
-    setNodes(newNodes);
-    // Add to history after setting nodes
-    setTimeout(() => {
-      const newHistory = history.slice(0, historyIndex + 1);
-      newHistory.push({ nodes: newNodes, edges });
-      setHistory(newHistory);
-      setHistoryIndex(newHistory.length - 1);
-    }, 0);
-
-    // Count different node types for success message
-    const subnetCount = newNodes.filter(
-      (node) => node.data?.service === 'subnet',
-    ).length;
-    const totalNodes = newNodes.length;
-
-    let message = t('locale.ui.messages.success.nodesArranged', { count: totalNodes });
-    if (subnetCount > 1) {
-      message = t('locale.ui.messages.success.nodesArranged', { count: totalNodes }) + ` (${subnetCount} subnets spaced correctly)`;
-    }
-
-    setSuccessMessage(message);
-    setTimeout(() => setSuccessMessage(null), 3000);
-  }, [nodes, edges, history, historyIndex, isContainerNode]);
-
-  // Function to arrange nodes within a container
-  const arrangeNodesInContainer = useCallback(
-    (nodesToArrange: Node[], container: Node, allNodes: Node[]) => {
-      if (nodesToArrange.length === 0) return;
-
-      // Get container dimensions
-      const containerWidth =
-        (container.style?.width as number) || container.data?.width || 500;
-      const containerHeight =
-        (container.style?.height as number) || container.data?.height || 300;
-
-      // Helper function to get node dimensions
-      const getNodeDimensions = (node: Node) => {
-        if (isContainerNode(node)) {
-          // For container nodes like subnets
-          return {
-            width: (node.style?.width as number) || node.data?.width || 300,
-            height: (node.style?.height as number) || node.data?.height || 200,
-          };
-        } else {
-          // For service nodes
-          return {
-            width: 120,
-            height: 80,
-          };
-        }
-      };
-
-      const padding = 30;
-      const baseSpacing = 20;
-
-      // Helper function to get spacing based on node types
-      const getSpacing = (currentNode: Node, nextNode?: Node) => {
-        const currentIsContainer = isContainerNode(currentNode);
-        const nextIsContainer = nextNode ? isContainerNode(nextNode) : false;
-
-        if (currentIsContainer && nextIsContainer) {
-          return baseSpacing * 2; // Extra spacing between container nodes (subnets)
-        } else if (currentIsContainer || nextIsContainer) {
-          return baseSpacing * 1.5; // Medium spacing between container and service
-        } else {
-          return baseSpacing; // Standard spacing between services
-        }
-      };
-
-      // Sort nodes to arrange subnets first, then services
-      const sortedNodes = [...nodesToArrange].sort((a, b) => {
-        const aIsContainer = isContainerNode(a);
-        const bIsContainer = isContainerNode(b);
-
-        if (aIsContainer && !bIsContainer) return -1; // Subnets first
-        if (!aIsContainer && bIsContainer) return 1; // Services second
-        return 0; // Same type, maintain order
-      });
-
-      // Use a simple row-based layout that works for both container and service nodes
-      let currentX = padding;
-      let currentY = padding;
-      let maxRowHeight = 0;
-      const maxRowWidth = containerWidth - padding * 2;
-
-      sortedNodes.forEach((node: Node, index: number) => {
-        const { width: nodeWidth, height: nodeHeight } =
-          getNodeDimensions(node);
-        const nextNode = sortedNodes[index + 1];
-        const currentSpacing = getSpacing(node, nextNode);
-
-        // Check if we need to wrap to the next row
-        if (currentX + nodeWidth > maxRowWidth && index > 0) {
-          currentX = padding;
-          currentY += maxRowHeight + currentSpacing;
-          maxRowHeight = 0;
-        }
-
-        // Position the node
-        node.position = {
-          x: Math.max(
-            padding,
-            Math.min(currentX, containerWidth - nodeWidth - padding),
-          ),
-          y: Math.max(
-            padding,
-            Math.min(currentY, containerHeight - nodeHeight - padding),
-          ),
-        };
-
-        // Update position for next node
-        currentX += nodeWidth + currentSpacing;
-        maxRowHeight = Math.max(maxRowHeight, nodeHeight);
-      });
-    },
-    [],
-  );
-
-  // Function to arrange nodes at root level
-  const arrangeNodesInRoot = useCallback(
-    (nodesToArrange: Node[], allNodes: Node[]) => {
-      if (nodesToArrange.length === 0) return;
-
-      // Sort by node type to group similar nodes together
-      const sortedNodes = [...nodesToArrange].sort((a, b) => {
-        const getNodePriority = (node: Node) => {
-          // Root level containers (accounts, subscriptions, projects)
-          if (node.data?.service === 'account') return 1;
-          if (node.data?.service === 'subscription') return 1;
-          if (node.data?.service === 'project') return 1;
-          if (node.data?.service === 'folder') return 1;
-          
-          // Network level containers (VPCs, Virtual Networks)
-          if (node.data?.service === 'vpc') return 2;
-          if (node.data?.service === 'virtual-network') return 2;
-          if (node.data?.service === 'resource-group') return 2;
-          
-          // Subnet level containers
-          if (node.data?.service === 'subnet') return 3;
-          if (node.data?.service === 'availability-zone') return 3;
-          if (node.data?.service === 'local-zone') return 3;
-          
-          // Security containers
-          if (node.data?.service === 'security-group') return 4;
-          if (node.data?.service === 'network-security-group') return 4;
-          
-          // Users and external
-          if (node.data?.service === 'users') return 5;
-          
-          return 6; // Other services
-        };
-
-        return getNodePriority(a) - getNodePriority(b);
-      });
-
-      // Calculate spacing based on node types
-      const getNodeSpacing = (node: Node) => {
-        if (isContainerNode(node)) {
-          const width =
-            (node.style?.width as number) || node.data?.width || 500;
-          const height =
-            (node.style?.height as number) || node.data?.height || 300;
-          return { width: width + 50, height: height + 50 }; // Add margin
-        }
-        return { width: 150, height: 100 }; // Standard service node spacing
-      };
-
-      // Arrange in a grid pattern
-      let currentX = 50;
-      let currentY = 50;
-      let maxRowHeight = 0;
-      let rowWidth = 0;
-      const maxRowWidth = 1500; // Maximum width before wrapping to next row
-
-      sortedNodes.forEach((node, index) => {
-        const spacing = getNodeSpacing(node);
-
-        // Check if we need to wrap to next row
-        if (rowWidth + spacing.width > maxRowWidth && index > 0) {
-          currentX = 50;
-          currentY += maxRowHeight + 30; // Add row spacing
-          maxRowHeight = 0;
-          rowWidth = 0;
-        }
-
-        // Position the node
-        node.position = { x: currentX, y: currentY };
-
-        // Update position for next node
-        currentX += spacing.width + 20;
-        rowWidth += spacing.width + 20;
-        maxRowHeight = Math.max(maxRowHeight, spacing.height);
-      });
-    },
-    [isContainerNode],
-  );
-
-  // Function to prevent overlapping during drag
-  const preventOverlap = useCallback(
-    (
-      draggedNode: Node,
-      newPosition: { x: number; y: number },
-      allNodes: Node[],
-    ): { x: number; y: number } => {
-      // Get node dimensions based on type
-      const getNodeDimensions = (node: Node) => {
-        if (isContainerNode(node)) {
-          return {
-            width: (node.style?.width as number) || node.data?.width || 300,
-            height: (node.style?.height as number) || node.data?.height || 200,
-          };
-        } else {
-          return {
-            width: (node.style?.width as number) || node.data?.width || 120,
-            height: (node.style?.height as number) || node.data?.height || 80,
-          };
-        }
-      };
-
-      const { width: nodeWidth, height: nodeHeight } =
-        getNodeDimensions(draggedNode);
-      const margin = isContainerNode(draggedNode) ? 25 : 15; // Larger margin for container nodes
-
-      // Get sibling nodes (nodes with same parent)
-      const siblingNodes = allNodes.filter(
-        (node) =>
-          node.id !== draggedNode.id &&
-          node.parentNode === draggedNode.parentNode,
-      );
-
-      let adjustedPosition = { ...newPosition };
-
-      // Check for conflicts and adjust position
-      let attempts = 0;
-      const maxAttempts = 20;
-
-      while (attempts < maxAttempts) {
-        let hasConflict = false;
-
-        for (const sibling of siblingNodes) {
-          const { width: siblingWidth, height: siblingHeight } =
-            getNodeDimensions(sibling);
-
-          // Check for overlap
-          const overlap =
-            adjustedPosition.x < sibling.position.x + siblingWidth + margin &&
-            adjustedPosition.x + nodeWidth + margin > sibling.position.x &&
-            adjustedPosition.y < sibling.position.y + siblingHeight + margin &&
-            adjustedPosition.y + nodeHeight + margin > sibling.position.y;
-
-          if (overlap) {
-            hasConflict = true;
-            // Try to move to the right first, then down
-            if (
-              adjustedPosition.x + nodeWidth + margin <
-              sibling.position.x + siblingWidth + 200
-            ) {
-              adjustedPosition.x = sibling.position.x + siblingWidth + margin;
-            } else {
-              adjustedPosition.y = sibling.position.y + siblingHeight + margin;
-              adjustedPosition.x = newPosition.x; // Reset X to original
-            }
-            break;
-          }
-        }
-
-        if (!hasConflict) {
-          break;
-        }
-
-        attempts++;
-      }
-
-      return adjustedPosition;
-    },
-    [],
-  );
-
-  // Add function to clear container selection
-  const clearContainerSelection = useCallback(() => {
-    setSelectedContainer(null);
-    const updatedNodes = nodes.map((n) => ({
-      ...n,
-      data: {
-        ...n.data,
-        isSelected: false,
-      },
-    }));
-    setNodes(updatedNodes);
-  }, [nodes]);
-
-  // Add onInit callback to store the flow instance
-  const onInit = useCallback((reactFlowInstance: any) => {
-    setReactFlowInstance(reactFlowInstance);
-  }, []);
-
-  // Function to add state to history with enhanced validation
-  const addToHistory = useCallback(
-    (newNodes: Node[], newEdges: Edge[]) => {
-      // Enhance nodes with validation properties before storing in history
-      const enhancedNodes = enhanceNodesWithValidation(newNodes);
-      
-      const newState = {
-        nodes: JSON.parse(JSON.stringify(enhancedNodes)),
-        edges: JSON.parse(JSON.stringify(newEdges)),
-      };
-
-      // Trim any future history if not at the end
-      const newHistory = history.slice(0, historyIndex + 1);
-      newHistory.push(newState);
-      setHistory(newHistory);
-      setHistoryIndex(newHistory.length - 1);
-    },
-    [history, historyIndex],
-  );
-
-  // Function to handle node deletion
-  const handleDeleteNodes = useCallback(
-    (nodeIds: string[]) => {
-      if (nodeIds.length === 0) return;
-
-      // Get nodes to delete
-      const nodesToDelete = nodes.filter((node) => nodeIds.includes(node.id));
-
-      // Find all child nodes that should be deleted along with their parents
-      const allNodesToDelete = new Set<string>();
-
-      // Add selected nodes to deletion set
-      nodeIds.forEach((id) => allNodesToDelete.add(id));
-
-      // Recursively find all child nodes
-      const findChildNodes = (parentId: string) => {
-        const children = nodes.filter((node) => node.parentNode === parentId);
-        children.forEach((child) => {
-          allNodesToDelete.add(child.id);
-          findChildNodes(child.id); // Recursively find grandchildren
-        });
-      };
-
-      // Find children for each node to delete
-      nodeIds.forEach((nodeId) => {
-        findChildNodes(nodeId);
-      });
-
-      // Remove nodes and their associated edges
-      const remainingNodes = nodes.filter(
-        (node) => !allNodesToDelete.has(node.id),
-      );
-      const remainingEdges = edges.filter(
-        (edge) =>
-          !allNodesToDelete.has(edge.source) &&
-          !allNodesToDelete.has(edge.target),
-      );
-
-      // Update state
-      setNodes(remainingNodes);
-      setEdges(remainingEdges);
-
-      // Add to history
-      addToHistory(remainingNodes, remainingEdges);
-
-      // Clear selections
-      setSelectedNode(null);
-      setSelectedEdge(null);
-      setSelectedContainer(null);
-
-      // Show success message with detailed info
-      const deleteCount = allNodesToDelete.size;
-      const containerNodes = nodesToDelete.filter((n) => isContainerNode(n));
-      let message = `Deleted ${deleteCount} ${deleteCount === 1 ? 'node' : 'nodes'}`;
-
-      if (deleteCount > nodeIds.length) {
-        const childCount = deleteCount - nodeIds.length;
-        message += ` (including ${childCount} child ${childCount === 1 ? 'node' : 'nodes'})`;
-      }
-
-      // Add details about what was deleted
-      if (containerNodes.length > 0) {
-        const containerTypes = containerNodes
-          .map((n) => n.data?.service || 'container')
-          .join(', ');
-        message += ` - Containers: ${containerTypes}`;
-      }
-
-      setSuccessMessage(message);
-      setTimeout(() => setSuccessMessage(null), 4000);
-    },
-    [nodes, edges, addToHistory, isContainerNode],
-  );
-
-  // Function to handle single node deletion (for right-click context menu or programmatic deletion)
-  const handleDeleteSingleNode = useCallback(
-    (nodeId: string) => {
-      handleDeleteNodes([nodeId]);
-    },
-    [handleDeleteNodes],
-  );
-
-  // Add keyboard event handler for node deletion
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      // Check if delete or backspace key is pressed
-      if (event.key === 'Delete' || event.key === 'Backspace') {
-        // Don't trigger deletion if user is typing in an input field
-        if (
-          event.target instanceof HTMLInputElement ||
-          event.target instanceof HTMLTextAreaElement ||
-          (event.target as any)?.isContentEditable
-        ) {
-          return;
-        }
-
-        // Get currently selected nodes from ReactFlow
-        const selectedNodeIds = nodes
-          .filter((node) => node.selected)
-          .map((node) => node.id);
-
-        if (selectedNodeIds.length > 0) {
-          event.preventDefault();
-          handleDeleteNodes(selectedNodeIds);
-        }
-      }
-    };
-
-    // Add event listener
-    document.addEventListener('keydown', handleKeyDown);
-
-    // Cleanup on unmount
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [nodes, handleDeleteNodes]); // Re-run when nodes or handleDeleteNodes change
-
-  // Add handler for node resize
-  const onNodeResize = useCallback(
-    (event: ResizeEvent) => {
-      const newNodes = nodes.map((node) => {
-        if (node.id === event.id) {
-          return {
-            ...node,
-            style: {
-              ...node.style,
-              width: event.width,
-              height: event.height,
-            },
-            data: {
-              ...node.data,
-              width: event.width,
-              height: event.height,
-            },
-          };
-        }
-        return node;
-      });
-
-      setNodes(newNodes);
-      addToHistory(newNodes, edges);
-    },
-    [nodes, edges, addToHistory],
-  );
-
-  // Update onAddNode with automatic parent assignment
-  const onAddNode = useCallback(
-    (
-      nodeType: string,
-      service: string,
-      position?: XYPosition,
-      cloudProvider?: 'aws' | 'azure' | 'gcp',
-    ) => {
-      // Force GCP Projects to be created at root level
-      if (cloudProvider === 'gcp' && service === 'project') {
-        const baseNode: Node = createProjectNode(
-          service,
-          position || { x: 100, y: 100 },
-        );
-        const enhancedNode = enhanceNodeWithValidation(baseNode);
-        const newNodes = [...nodes, enhancedNode];
-        setNodes(newNodes);
-        addToHistory(newNodes, edges);
-        return;
-      }
-
-      // Special case for users node
-      if (service === 'users') {
-        const baseNode: Node = createUsersNode(position || { x: 100, y: 100 });
-        const enhancedNode = enhanceNodeWithValidation(baseNode);
-        const newNodes = [...nodes, enhancedNode];
-        setNodes(newNodes);
-        addToHistory(newNodes, edges);
-        return;
-      }
-
-      // Get node labels
-      const { label, sublabel } = formatNodeLabel(service);
-      const nodePosition = getNodePosition(position, nodes);
-
-      // Automatically find the best parent based on position and schema
-      const bestParent = cloudProvider 
-        ? findAutoParent(nodePosition, service, cloudProvider, nodes)
-        : null;
-
-      // Create temporary node for validation
-      const tempNodeId = cloudProvider ? generateMeaningfulId(cloudProvider, service) : `${service}-temp`;
-      const tempNode: Node = {
-        id: tempNodeId,
-        type: nodeType,
-        position: nodePosition,
-        data: {
-          service,
-          label,
-          sublabel,
-          handles: ['left', 'right'],
-          cloudProvider,
-          infiniteResize: true,
-        },
-        style: { zIndex: 3 },
-        parentNode: bestParent?.id,
-        extent: bestParent ? 'parent' : undefined,
-      };
-
-      // Validate placement
-      const validation = validateCloudProviderPlacement(
-        tempNode,
-        bestParent,
-        nodes,
-        cloudProvider,
-      );
-
-      if (!validation.isValid && validation.message) {
-        setValidationError(validation.message);
-        return;
-      }
-
-      // Create the actual node with meaningful ID
-      const nodeId = cloudProvider ? generateMeaningfulId(cloudProvider, service) : `${service}-1`;
-      const baseNode: Node = {
-        id: nodeId,
-        type: nodeType,
-        position: nodePosition,
-        data: {
-          service,
-          label,
-          sublabel,
-          handles: ['left', 'right'],
-          cloudProvider,
-          infiniteResize: true,
-        },
-        style: { zIndex: 3 },
-        parentNode: bestParent?.id,
-        extent: bestParent ? 'parent' : undefined,
-      };
-
-      // Handle container nodes
-      if (nodeType === 'subnetNode') {
-        const containerBaseNode = createContainerNode(
-          service,
-          nodePosition,
-          cloudProvider,
-          bestParent?.id,
-        );
-        const enhancedContainerNode = enhanceNodeWithValidation(containerBaseNode);
-        const newNodes = [...nodes, enhancedContainerNode];
-        setNodes(newNodes);
-        addToHistory(newNodes, edges);
-        return;
-      }
-
-      // Enhance regular service node with validation properties
-      const enhancedNode = enhanceNodeWithValidation(baseNode);
-      const newNodes = [...nodes, enhancedNode];
-      setNodes(newNodes);
-      addToHistory(newNodes, edges);
-    },
-    [nodes, edges, addToHistory],
-  );
-
-  // Helper function to create project nodes
-  const createProjectNode = (service: string, position: XYPosition): Node => {
-    // Use the same createContainerNode function for consistency
-    return createContainerNode(service, position, 'gcp');
-  };
-
-  // Helper function to create users nodes
-  const createUsersNode = (position: XYPosition): Node => {
-    const nodeId = generateUsersId();
-    return {
-      id: nodeId,
-      type: 'usersNode',
-      position,
-      data: {
-        label: 'Users',
-        sublabel: 'External',
-        handles: ['top', 'bottom'],
-      },
-      style: { zIndex: 3 },
-    };
-  };
-
-  // Helper function to create container nodes
-  const createContainerNode = (
-    service: string,
-    position: XYPosition,
-    cloudProvider?: 'aws' | 'azure' | 'gcp',
-    parentId?: string,
-  ): Node => {
-    // Get cloud-specific dimensions and labels
-    const getContainerConfig = (service: string, cloudProvider?: string) => {
-      // AWS Container Configuration
-      if (cloudProvider === 'aws') {
-        switch (service) {
-          case 'account':
-            return {
-              width: 1200,
-              height: 900,
-              label: t('locale.ui.containers.aws.account'),
-              color: 'rgba(255, 153, 0, 0.1)',
-              borderColor: '#FF9900',
-              zIndex: 0
-            };
-          case 'vpc':
-            return {
-              width: 900,
-              height: 700,
-              label: t('locale.ui.containers.aws.vpc'),
-              color: 'rgba(97, 218, 251, 0.1)',
-              borderColor: '#61dafb',
-              zIndex: 1
-            };
-          case 'subnet':
-            return {
-              width: 400,
-              height: 250,
-              label: t('locale.ui.containers.aws.subnet'),
-              color: 'rgba(97, 218, 251, 0.05)',
-              borderColor: '#61dafb',
-              zIndex: 2
-            };
-          case 'availability-zone':
-            return {
-              width: 700,
-              height: 500,
-              label: t('locale.ui.containers.aws.availabilityZone'),
-              color: 'rgba(156, 39, 176, 0.05)',
-              borderColor: '#9c27b0',
-              zIndex: 1
-            };
-          case 'security-group':
-            return {
-              width: 300,
-              height: 200,
-              label: t('locale.ui.containers.aws.securityGroup'),
-              color: 'rgba(244, 67, 54, 0.05)',
-              borderColor: '#f44336',
-              zIndex: 2
-            };
-          default:
-            return {
-              width: 500,
-              height: 300,
-              label: service.charAt(0).toUpperCase() + service.slice(1),
-              color: 'rgba(97, 218, 251, 0.05)',
-              borderColor: '#61dafb',
-              zIndex: 2
-            };
-        }
-      }
-      
-      // Azure Container Configuration
-      if (cloudProvider === 'azure') {
-        switch (service) {
-          case 'subscription':
-            return {
-              width: 1300,
-              height: 950,
-              label: t('locale.ui.containers.azure.subscription'),
-              color: 'rgba(0, 120, 212, 0.08)',
-              borderColor: '#0078D4',
-              zIndex: 0
-            };
-          case 'resource-group':
-            return {
-              width: 1000,
-              height: 750,
-              label: t('locale.ui.containers.azure.resourceGroup'),
-              color: 'rgba(0, 120, 212, 0.12)',
-              borderColor: '#0078D4',
-              zIndex: 1
-            };
-          case 'virtual-network':
-            return {
-              width: 750,
-              height: 550,
-              label: t('locale.ui.containers.azure.virtualNetwork'),
-              color: 'rgba(64, 153, 255, 0.1)',
-              borderColor: '#4099FF',
-              zIndex: 2
-            };
-          case 'subnet':
-            return {
-              width: 350,
-              height: 220,
-              label: t('locale.ui.containers.azure.subnet'),
-              color: 'rgba(64, 153, 255, 0.05)',
-              borderColor: '#4099FF',
-              zIndex: 3
-            };
-          case 'network-security-group':
-            return {
-              width: 300,
-              height: 180,
-              label: t('locale.ui.containers.azure.networkSecurityGroup'),
-              color: 'rgba(255, 99, 71, 0.08)',
-              borderColor: '#FF6347',
-              zIndex: 3
-            };
-          default:
-            return {
-              width: 450,
-              height: 280,
-              label: service.split('-').map(word => 
-                word.charAt(0).toUpperCase() + word.slice(1)
-              ).join(' '),
-              color: 'rgba(0, 120, 212, 0.08)',
-              borderColor: '#0078D4',
-              zIndex: 2
-            };
-        }
-      }
-      
-      // GCP Container Configuration
-      if (cloudProvider === 'gcp') {
-        switch (service) {
-          case 'project':
-            return {
-              width: 1250,
-              height: 900,
-              label: t('locale.ui.containers.gcp.project'),
-              color: 'rgba(66, 133, 244, 0.08)',
-              borderColor: '#4285F4',
-              zIndex: 0
-            };
-          case 'vpc':
-            return {
-              width: 850,
-              height: 650,
-              label: t('locale.ui.containers.gcp.vpc'),
-              color: 'rgba(66, 133, 244, 0.12)',
-              borderColor: '#4285F4',
-              zIndex: 1
-            };
-          case 'subnet':
-            return {
-              width: 380,
-              height: 240,
-              label: t('locale.ui.containers.gcp.subnet'),
-              color: 'rgba(66, 133, 244, 0.05)',
-              borderColor: '#4285F4',
-              zIndex: 2
-            };
-          case 'folder':
-            return {
-              width: 1100,
-              height: 800,
-              label: t('locale.ui.containers.gcp.folder'),
-              color: 'rgba(52, 168, 83, 0.08)',
-              borderColor: '#34A853',
-              zIndex: 0
-            };
-          default:
-            return {
-              width: 500,
-              height: 300,
-              label: service.charAt(0).toUpperCase() + service.slice(1),
-              color: 'rgba(66, 133, 244, 0.08)',
-              borderColor: '#4285F4',
-              zIndex: 2
-            };
-        }
-      }
-      
-      // Default configuration
-      return {
-        width: 500,
-        height: 300,
-        label: service.charAt(0).toUpperCase() + service.slice(1),
-        color: 'rgba(97, 218, 251, 0.05)',
-        borderColor: '#61dafb',
-        zIndex: 2
-      };
-    };
-
-    const config = getContainerConfig(service, cloudProvider);
-    const nodeId = cloudProvider ? generateMeaningfulId(cloudProvider, service) : `${service}-1`;
-    
-    return {
-      id: nodeId,
-      type: 'subnetNode',
-      position,
-      data: {
-        service,
-        label: config.label,
-        color: config.color,
-        borderColor: config.borderColor,
-        textAlign: 'left',
-        cloudProvider,
-        infiniteResize: true,
-        width: config.width,
-        height: config.height,
-        draggable: true,
-      },
-      style: {
-        width: config.width,
-        height: config.height,
-        zIndex: config.zIndex,
-      },
-      parentNode: parentId,
-      extent: parentId ? 'parent' : undefined,
-      draggable: true,
-    };
-  };
-
-  // Update the onNodesChangeWithHistory function to include automatic parent assignment during drag
-  const onNodesChangeWithHistory = useCallback(
-    (changes: NodeChange[]) => {
-      // Apply changes to get the new nodes state
-      let newNodes = applyNodeChanges(changes, nodes);
-
-      // Handle automatic parent assignment during drag end (only for container nodes)
-      changes.forEach((change) => {
-        if (isPositionChange(change) && !change.dragging) {
-          const positionChange = change as NodeChange & {
-            id: string;
-            position: XYPosition;
-          };
-          const movedNode = newNodes.find(
-            (node) => node.id === positionChange.id,
-          );
-          if (
-            movedNode &&
-            movedNode.data?.cloudProvider &&
-            movedNode.data?.service
-          ) {
-            // Only auto-assign parent for container nodes (VPC, Subnet, etc.)
-            if (isContainerNode(movedNode)) {
-            // Use automatic parent assignment for the final position
-            const updatedNode = autoAssignParentOnDrop(
-              movedNode,
-              positionChange.position || movedNode.position,
-                newNodes.filter((n) => n.id !== positionChange.id), // Exclude the moved node from parent search
-            );
-            
-            // Update the node in the array
-              newNodes = newNodes.map((node) =>
-                node.id === positionChange.id ? updatedNode : node,
-            );
-            }
-          }
-        }
-      });
-
-      // Validate the entire diagram after changes using direct validation system
-      if (
-        changes.some((change) => isPositionChange(change) && !change.dragging)
-      ) {
-        // Validate all nodes using the working direct validation system
-        const validationErrors: string[] = [];
-        
-        for (const node of newNodes) {
-          if (node.data?.cloudProvider && node.data?.service) {
-            const parentNode = newNodes.find(n => n.id === node.parentNode) || null;
-            
-            // Use the working direct validation system instead of broken generic system
-            const validation = validateCloudProviderPlacement(
-              node, 
-              parentNode, 
-              newNodes, 
-              node.data.cloudProvider as 'aws' | 'azure' | 'gcp'
-            );
-            
-            if (!validation.isValid && validation.message) {
-              validationErrors.push(validation.message);
-            }
-          }
-        }
-        
-        if (validationErrors.length > 0) {
-          setValidationError(validationErrors[0]);
-          return;
-        }
-      }
-
-      // Handle validation during dragging (only for container nodes)
-      if (
-        changes.some((change) => isPositionChange(change) && change.dragging)
-      ) {
-        const positionChange = changes.find(
-          (change) => isPositionChange(change) && change.dragging,
-        ) as NodeChange & {
-          id: string;
-          position: XYPosition;
-          dragging: boolean;
-        };
-        
-        if (positionChange) {
-          const draggedNode = nodes.find(
-            (node) => node.id === positionChange.id,
-          );
-          if (
-            draggedNode &&
-            draggedNode.data?.cloudProvider &&
-            draggedNode.data?.service
-          ) {
-            // Only validate container nodes during drag - service nodes will be validated in modal
-            if (isContainerNode(draggedNode)) {
-            // Find potential parent during drag for visual feedback
-            const potentialParent = findAutoParent(
-              positionChange.position || draggedNode.position,
-              draggedNode.data.service,
-              draggedNode.data.cloudProvider,
-                nodes.filter((n) => n.id !== draggedNode.id),
-            );
-            
-            const validation = validateCloudProviderPlacement(
-              draggedNode,
-              potentialParent,
-              nodes,
-              draggedNode.data.cloudProvider,
-            );
-            
-            if (!validation.isValid && validation.message) {
-              setValidationError(validation.message);
-            } else {
-                setValidationError(null);
-              }
-            } else {
-              // Clear validation errors for service nodes during drag
-              setValidationError(null);
-            }
-          }
-        }
-      }
-
-      // Add resize handling
-      const hasResizeChange = changes.some(
-        (change) => change.type === 'dimensions',
-      );
-
-      if (hasResizeChange) {
-        const resizeChange = changes.find(
-          (change) => change.type === 'dimensions',
-        );
-        if (resizeChange && 'dimensions' in resizeChange) {
-          onNodeResize({
-            id: resizeChange.id,
-            width: resizeChange.dimensions?.width || 0,
-            height: resizeChange.dimensions?.height || 0,
-          });
-        }
-      }
-
-      setNodes(newNodes);
-
-      // Don't add to history for position changes while dragging
-      const hasPositionChange = changes.some(
-        (change) => isPositionChange(change) && !change.dragging,
-      );
-
-      if (
-        !changes.some(
-          (change) => isPositionChange(change) && change.dragging,
-        ) &&
-        hasPositionChange
-      ) {
-        addToHistory(newNodes, edges);
-      }
-    },
-    [nodes, edges, addToHistory, onNodeResize, isContainerNode],
-  );
-
-  // Add drag over handler to allow dropping
-  const onDragOver = useCallback(
-    (event: React.DragEvent) => {
-    event.preventDefault();
-
-      // Initialize with copy effect
-    event.dataTransfer.dropEffect = 'copy';
-
-      // Try to get drag data if we don't have currentDragData yet
-      if (!currentDragData) {
-        try {
-          const rawData = event.dataTransfer.getData('application/json');
-          console.log('onDragOver: Raw drag data:', rawData);
-
-          // Check if we have valid data before parsing
-          if (rawData && rawData.trim().length > 0) {
-            const dragData = JSON.parse(rawData);
-            console.log('onDragOver: Parsed drag data:', dragData);
-
-            if (dragData && dragData.service && dragData.cloudProvider) {
-              console.log(
-                'onDragOver: Setting currentDragData from dragOver',
-                dragData,
-              );
-              setCurrentDragData({
-                service: dragData.service,
-                nodeType: dragData.nodeType || 'serviceNode',
-                cloudProvider: dragData.cloudProvider,
-                label: dragData.label || dragData.service,
-              });
-            } else {
-              console.log('onDragOver: Invalid drag data structure:', dragData);
-            }
-          } else {
-            console.log('onDragOver: No drag data available or empty string');
-
-            // Try alternative data transfer types
-            const types = Array.from(event.dataTransfer.types);
-            console.log('onDragOver: Available data types:', types);
-
-            // Try text/plain as fallback
-            if (types.includes('text/plain')) {
-              const textData = event.dataTransfer.getData('text/plain');
-              console.log('onDragOver: Text data:', textData);
-              if (textData) {
-                try {
-                  const dragData = JSON.parse(textData);
-                  if (dragData && dragData.service && dragData.cloudProvider) {
-                    console.log(
-                      'onDragOver: Setting currentDragData from text fallback',
-                      dragData,
-                    );
-                    setCurrentDragData({
-                      service: dragData.service,
-                      nodeType: dragData.nodeType || 'serviceNode',
-                      cloudProvider: dragData.cloudProvider,
-                      label: dragData.label || dragData.service,
-                    });
-                  }
-                } catch (textError) {
-                  console.log(
-                    'onDragOver: Could not parse text data as JSON:',
-                    textError,
-                  );
-                }
-              }
-            }
-          }
-        } catch (error) {
-          console.log('onDragOver: Error handling drag data:', error);
-        }
-      }
-
-      // Update cursor based on hover state
-      try {
-        if (hoveredNodeDuringDrag) {
-          const hoveredNode = nodes.find((n) => n.id === hoveredNodeDuringDrag);
-          if (hoveredNode && hoveredNode.data?.dragHoverValid === false) {
-            event.dataTransfer.dropEffect = 'none';
-            document.body.style.cursor = 'not-allowed';
-            document.body.classList.add('dragging-invalid');
-          } else if (hoveredNode && hoveredNode.data?.dragHoverValid === true) {
-            event.dataTransfer.dropEffect = 'copy';
-            document.body.style.cursor = 'copy';
-            document.body.classList.remove('dragging-invalid');
-          }
-        } else {
-          document.body.style.cursor = 'copy';
-          document.body.classList.remove('dragging-invalid');
-        }
-      } catch (error) {
-        console.log('Error updating cursor:', error);
-      }
-    
-    // Update drag preview position and validate drop location
-    if (dragPreview && reactFlowInstance) {
-        const reactFlowBounds = (
-          event.currentTarget as HTMLElement
-        ).getBoundingClientRect();
-      const dropPosition = {
-        x: event.clientX - reactFlowBounds.left,
-        y: event.clientY - reactFlowBounds.top,
-      };
-      
-      // Convert screen coordinates to flow coordinates
-        const flowPosition =
-          reactFlowInstance.screenToFlowPosition(dropPosition);
-      
-      // For service nodes, don't auto-assign parent - let user choose via modal
-      let isValidDrop = true;
-      let validationMessage = '';
-      let targetContainer = null;
-      
-      try {
-          // For container nodes (VPC, Subnet, etc.), find the best parent
-          if (isContainerService(dragPreview.service)) {
-        const bestParent = findAutoParent(
-          flowPosition, 
-          dragPreview.service, 
-          dragPreview.cloudProvider as 'aws' | 'azure' | 'gcp', 
-              nodes,
-        );
-        
-        targetContainer = bestParent;
-        
-        // Create temporary node for validation
-        const tempNode = {
-          id: `temp-${Date.now()}`,
-            type: 'subnetNode',
-          position: flowPosition,
-          data: {
-            service: dragPreview.service,
-            cloudProvider: dragPreview.cloudProvider,
-          },
-          parentNode: bestParent?.id,
-        };
-        
-        // Validate placement
-        const validation = validateCloudProviderPlacement(
-          tempNode as any,
-          bestParent,
-          nodes,
-              dragPreview.cloudProvider as 'aws' | 'azure' | 'gcp',
-        );
-        
-        if (!validation.isValid) {
-          isValidDrop = false;
-          validationMessage = validation.message || 'Invalid placement';
-              event.dataTransfer.dropEffect = 'none'; // Show "not allowed" cursor
-        } else {
-          // Show target container info
-          if (bestParent) {
-            validationMessage = t('locale.ui.messages.info.willBePlacedIn', { 
-              container: bestParent.data?.label || bestParent.data?.service || 'Container' 
-            });
-          } else {
-            validationMessage = t('locale.ui.messages.info.willBePlacedAtRoot');
-          }
-              event.dataTransfer.dropEffect = 'copy'; // Show "copy" cursor
-          }
-        } else {
-          // For service nodes, just show general message
-          validationMessage = t('locale.ui.messages.info.selectContainer');
-            event.dataTransfer.dropEffect = 'copy'; // Allow dropping for service nodes
-        }
-      } catch (error) {
-        isValidDrop = false;
-        validationMessage = 'Invalid drop location';
-          event.dataTransfer.dropEffect = 'none'; // Show "not allowed" cursor for errors
-      }
-      
-      // Update nodes to highlight target container (only for container nodes)
-        const updatedNodes = nodes.map((node) => ({
-        ...node,
-        data: {
-          ...node.data,
-            highlighted: targetContainer && node.id === targetContainer.id,
-          },
-      }));
-      
-      // Only update nodes if highlighting changed
-        const currentHighlighted = nodes.find((n) => n.data?.highlighted);
-        const newHighlighted = updatedNodes.find((n) => n.data?.highlighted);
-        if (
-          (!currentHighlighted && newHighlighted) ||
-          (currentHighlighted && !newHighlighted) ||
-          (currentHighlighted &&
-            newHighlighted &&
-            currentHighlighted.id !== newHighlighted.id)
-        ) {
-        setNodes(updatedNodes);
-      }
-      
-        setDragPreview((prev) =>
-          prev
-            ? {
-        ...prev,
-        position: dropPosition,
-        isValid: isValidDrop,
-        validationMessage: validationMessage,
-        targetContainer: targetContainer,
-              }
-            : null,
-        );
-    }
-    },
-    [
-      dragPreview,
-      reactFlowInstance,
-      nodes,
-      isContainerService,
-      currentDragData,
-    ],
-  );
-
-  // Add drop handler with validation blocking
-  const onDrop = useCallback(
-    (event: React.DragEvent) => {
-    event.preventDefault();
-    
-      // Check if we have valid drag data and target
-      const isValidDrop = dragPreview?.isValid !== false;
-      const targetContainer = dragPreview?.targetContainer;
-
-      // Clear all drag-related state
-    setDragPreview(null);
-      setCurrentDragData(null);
-      setHoveredNodeDuringDrag(null);
-      setInvalidDropOverlay(null);
-
-      // Reset cursor
-      document.body.style.cursor = 'default';
-      document.body.classList.remove('dragging-invalid');
-    
-      // Clear all drag-related styling
-      const clearedNodes = nodes.map((node) => ({
-      ...node,
-      data: {
-        ...node.data,
-          highlighted: false,
-          dragHover: false,
-          dragHoverValid: false,
-        },
-        style: {
-          ...node.style,
-          '--drag-hover': undefined,
-          '--drag-hover-valid': undefined,
-        },
-    }));
-    setNodes(clearedNodes);
-    
-      // Clear DOM attributes from all nodes
-      setTimeout(() => {
-        document
-          .querySelectorAll('.react-flow__node')
-          .forEach((nodeElement) => {
-            nodeElement.removeAttribute('data-drag-hover');
-            nodeElement.removeAttribute('data-drag-hover-valid');
-            // Reset any inline cursor styles
-            const style = nodeElement.getAttribute('style');
-            if (style && style.includes('cursor:')) {
-              const cleanedStyle = style.replace(/cursor:\s*[^;]+;?\s*/g, '');
-              if (cleanedStyle.trim()) {
-                nodeElement.setAttribute('style', cleanedStyle);
-              } else {
-                nodeElement.removeAttribute('style');
-              }
-            }
-          });
-      }, 0);
-
-      // Block invalid drops completely
-      if (!isValidDrop) {
-        setValidationError(
-          dragPreview?.validationMessage ||
-            'Invalid drop location - drop blocked',
-        );
-        return;
-      }
-
-      try {
-        const dragData = JSON.parse(
-          event.dataTransfer.getData('application/json'),
-        );
-      
-      if (!dragData || !dragData.service || !dragData.nodeType) {
-        setValidationError('Invalid drag data');
-        return;
-      }
-
-      const { service, nodeType, cloudProvider, label } = dragData;
-
-      // Get the position where the item was dropped
-        const reactFlowBounds = (
-          event.currentTarget as HTMLElement
-        ).getBoundingClientRect();
-      const dropPosition = {
-        x: event.clientX - reactFlowBounds.left,
-        y: event.clientY - reactFlowBounds.top,
-      };
-
-      // Convert screen coordinates to flow coordinates
-      const flowInstance = reactFlowInstance;
-      if (!flowInstance) {
-        setValidationError('Diagram not ready');
-        return;
-      }
-
-      const flowPosition = flowInstance.screenToFlowPosition(dropPosition);
-
-      // Special handling for container nodes (VPC, Subnet, etc.) and users - place immediately
-        if (
-          nodeType === 'subnetNode' ||
-          service === 'users' ||
-          isContainerService(service)
-        ) {
-        onAddNode(nodeType, service, flowPosition, cloudProvider);
-        return;
-      }
-
-        // For service nodes, use the hovered target container or selected container
-        const finalTargetContainer = targetContainer || selectedContainer;
-
-        if (finalTargetContainer) {
-          // Place service in the target container
-          handleServicePlacement(
-            service,
-            nodeType,
-            cloudProvider,
-            label,
-            flowPosition,
-            finalTargetContainer,
-          );
-      } else {
-        // No container selected - place at root level or show error
-          handleServicePlacement(
-            service,
-            nodeType,
-            cloudProvider,
-            label,
-            flowPosition,
-            null,
-          );
-      }
-    } catch (error) {
-      console.error('Error handling drop:', error);
-      setValidationError('Failed to add service');
-    }
-    },
-    [
-      dragPreview,
-      onAddNode,
-      reactFlowInstance,
-      nodes,
-      isContainerService,
-      selectedContainer,
-    ],
-  );
-
-  // Handle service placement in selected container
-  const handleServicePlacement = useCallback(
-    (
-    service: string,
-    nodeType: string,
-    cloudProvider: string,
-    label: string,
-    dropPosition: { x: number; y: number },
-      targetContainer: Node | null,
-  ) => {
-    // Get node labels
-      const { label: nodeLabel, sublabel } = formatNodeLabel(
-        service,
-        cloudProvider as 'aws' | 'azure' | 'gcp',
-      );
-
-    // Calculate the correct position based on parent selection
-    let finalPosition = dropPosition;
-    let parentNode: Node | null = targetContainer;
-
-      // Define service dimensions (used for overlap prevention)
-      const serviceWidth = 120; // Approximate service node width
-      const serviceHeight = 80; // Approximate service node height
-
-      if (targetContainer) {
-        // Get parent dimensions
-        const parentWidth =
-          (targetContainer.style?.width as number) ||
-          targetContainer.data?.width ||
-          500;
-        const parentHeight =
-          (targetContainer.style?.height as number) ||
-          targetContainer.data?.height ||
-          300;
-      const padding = 50;
-
-      // Convert absolute position to relative position within parent
-      const relativeX = dropPosition.x - targetContainer.position.x;
-      const relativeY = dropPosition.y - targetContainer.position.y;
-
-      // Check if the original drop position is within parent bounds
-        const isWithinParent =
-          relativeX >= 0 &&
-          relativeY >= 0 &&
-          relativeX <= parentWidth &&
-          relativeY <= parentHeight;
-
-      if (isWithinParent) {
-        // Use the relative position but ensure it's within bounds with padding
-        finalPosition = {
-            x: Math.max(
-              padding,
-              Math.min(relativeX, parentWidth - serviceWidth - padding),
-            ),
-            y: Math.max(
-              padding,
-              Math.min(relativeY, parentHeight - serviceHeight - padding),
-            ),
-        };
-      } else {
-        // Find a good auto-position within the parent
-        // Check for existing child nodes to avoid overlap
-          const childNodes = nodes.filter(
-            (node) => node.parentNode === targetContainer.id,
-          );
-        
-        // Try to place the service in a grid pattern
-          const cols = Math.floor(
-            (parentWidth - padding * 2) / (serviceWidth + 20),
-          ); // 20px spacing
-          const rows = Math.floor(
-            (parentHeight - padding * 2) / (serviceHeight + 20),
-          );
-        
-        let placed = false;
-        
-        // Try to find an empty spot in the grid
-        for (let row = 0; row < rows && !placed; row++) {
-          for (let col = 0; col < cols && !placed; col++) {
-            const testX = padding + col * (serviceWidth + 20);
-            const testY = padding + row * (serviceHeight + 20);
-            
-            // Check if this position conflicts with existing child nodes
-              const hasConflict = childNodes.some((childNode) => {
-              const childX = childNode.position.x;
-              const childY = childNode.position.y;
-              const childWidth = (childNode.style?.width as number) || 120;
-              const childHeight = (childNode.style?.height as number) || 80;
-              
-                return (
-                  testX < childX + childWidth + 10 &&
-                      testX + serviceWidth + 10 > childX &&
-                      testY < childY + childHeight + 10 && 
-                  testY + serviceHeight + 10 > childY
-                );
-            });
-            
-            if (!hasConflict) {
-              finalPosition = { x: testX, y: testY };
-              placed = true;
-            }
-          }
-        }
-        
-        // If no grid spot found, use a fallback position
-        if (!placed) {
-          finalPosition = {
-            x: padding + (childNodes.length % 3) * (serviceWidth + 20),
-              y:
-                padding +
-                Math.floor(childNodes.length / 3) * (serviceHeight + 20),
-          };
-          
-          // Ensure it's still within bounds
-          finalPosition = {
-              x: Math.max(
-                padding,
-                Math.min(finalPosition.x, parentWidth - serviceWidth - padding),
-              ),
-              y: Math.max(
-                padding,
-                Math.min(
-                  finalPosition.y,
-                  parentHeight - serviceHeight - padding,
-                ),
-              ),
-          };
-        }
-      }
-    }
-
-      // Apply overlap prevention as final step
-      const tempNode = {
-        id: `temp-${Date.now()}`,
-        type: nodeType,
-        position: finalPosition,
-        data: { service, cloudProvider },
-        style: { width: 120, height: 80 },
-        parentNode: targetContainer?.id,
-      };
-
-      finalPosition = preventOverlap(tempNode as Node, finalPosition, nodes);
-
-    // Create the base node with the selected parent using meaningful ID
-    const nodeId = cloudProvider ? generateMeaningfulId(cloudProvider as 'aws' | 'azure' | 'gcp', service) : `${service}-1`;
-    const baseNode: Node = {
-      id: nodeId,
-      type: nodeType,
-      position: finalPosition,
-      data: {
-        service,
-        label: nodeLabel,
-        sublabel,
-        handles: ['left', 'right'],
-        cloudProvider,
-        infiniteResize: true,
-      },
-      style: { zIndex: 3 },
-      parentNode: targetContainer?.id,
-      extent: targetContainer ? 'parent' : undefined,
-    };
-
-    // Validate placement if a parent is selected
-    if (targetContainer) {
-      const validation = validateCloudProviderPlacement(
-        baseNode,
-        parentNode,
-        nodes,
-        cloudProvider as 'aws' | 'azure' | 'gcp',
-      );
-
-      if (!validation.isValid && validation.message) {
-        setValidationError(validation.message);
-        return;
-      }
-    }
-
-    // Enhance the node with validation properties
-    const enhancedNode = enhanceNodeWithValidation(baseNode, [...nodes]);
-    
-    // Add the enhanced node
-    const newNodes = [...nodes, enhancedNode];
-    setNodes(newNodes);
-    addToHistory(newNodes, edges);
-
-    // Show success message
-    if (targetContainer) {
-        setSuccessMessage(
-          t('locale.ui.messages.success.nodePlaced', { 
-            container: targetContainer.data?.label || targetContainer.data?.service 
-          }),
-        );
-      setTimeout(() => setSuccessMessage(null), 2000);
-    }
-    },
-    [nodes, edges, addToHistory],
-  );
-
-  // Add drag enter handler to show drag preview
-  const onDragEnter = useCallback((event: React.DragEvent) => {
-    event.preventDefault();
-    
-    try {
-      // Try to get drag data from the event
-      let dragData = null;
-
-      // First, try application/json
-      try {
-        const rawData = event.dataTransfer.getData('application/json');
-        console.log('onDragEnter: Raw JSON data:', rawData);
-
-        if (rawData && rawData.trim().length > 0) {
-          dragData = JSON.parse(rawData);
-          console.log('onDragEnter: Parsed JSON data:', dragData);
-        }
-      } catch (e) {
-        console.log('onDragEnter: Could not parse application/json data:', e);
-
-        // Fallback: try text/plain
-        try {
-          const textData = event.dataTransfer.getData('text/plain');
-          console.log('onDragEnter: Raw text data:', textData);
-
-          if (textData && textData.trim().length > 0) {
-            dragData = JSON.parse(textData);
-            console.log('onDragEnter: Parsed text data:', dragData);
-          }
-        } catch (e2) {
-          console.log('onDragEnter: Could not parse text/plain data:', e2);
-
-          // Log available types for debugging
-          const types = Array.from(event.dataTransfer.types);
-          console.log('onDragEnter: Available data types:', types);
-        }
-      }
-      
-      if (dragData && dragData.service && dragData.cloudProvider) {
-        console.log('onDragEnter: Setting currentDragData', dragData);
-        // Store current drag data for validation
-        setCurrentDragData({
-          service: dragData.service,
-          nodeType: dragData.nodeType || 'serviceNode',
-          cloudProvider: dragData.cloudProvider,
-          label: dragData.label || dragData.service,
-        });
-
-        const reactFlowBounds = (
-          event.currentTarget as HTMLElement
-        ).getBoundingClientRect();
-        setDragPreview({
-          isVisible: true,
-          service: dragData.service,
-          cloudProvider: dragData.cloudProvider,
-          position: {
-            x: event.clientX - reactFlowBounds.left,
-            y: event.clientY - reactFlowBounds.top,
-          },
-          isValid: true,
-          validationMessage: t('locale.ui.messages.info.dropToPlace'),
-          targetContainer: null, // Reset target container on new drag enter
-        });
-      } else {
-        console.log(
-          'onDragEnter: No valid drag data found - dragData:',
-          dragData,
-        );
-      }
-    } catch (error) {
-      console.error('onDragEnter: Error reading drag data:', error);
-    }
-  }, []);
-
-  // Add node mouse enter handler during drag operations
-  const onNodeMouseEnter = useCallback(
-    (event: React.MouseEvent, node: Node) => {
-      console.log(
-        'onNodeMouseEnter: Processing hover over node',
-        node.id,
-        'with drag data',
-        currentDragData,
-      );
-
-      // Only process if we're currently dragging something
-      if (!currentDragData) {
-        console.log('onNodeMouseEnter: No currentDragData available');
-        return;
-      }
-
-      try {
-        setHoveredNodeDuringDrag(node.id);
-
-        // Validate if this node can be a valid parent for the dragged service
-        let isValidParent = false;
-        let validationMessage = '';
-
-        try {
-          // For container services, validate placement
-          if (isContainerService(currentDragData.service)) {
-            console.log('Validating container service placement');
-            // Create temporary node for validation
-            const tempNode = {
-              id: `temp-${Date.now()}`,
-              type: currentDragData.nodeType || 'serviceNode',
-              position: { x: 0, y: 0 }, // Position doesn't matter for parent validation
-              data: {
-                service: currentDragData.service,
-                cloudProvider: currentDragData.cloudProvider,
-              },
-              parentNode: node.id,
-            };
-
-            const validation = validateCloudProviderPlacement(
-              tempNode as any,
-              node,
-              nodes,
-              currentDragData.cloudProvider as 'aws' | 'azure' | 'gcp',
-            );
-
-            isValidParent = validation.isValid;
-            validationMessage =
-              validation.message || 'Invalid container placement';
-            console.log('Container validation result:', {
-              isValidParent,
-              validationMessage,
-            });
-          } else {
-            console.log('Validating service node placement');
-            // For service nodes, check if the hovered node is a container
-            try {
-              isValidParent = isContainerNode(node);
-              validationMessage = isValidParent
-                ? `Can place ${currentDragData.service} in ${node.data?.label || node.data?.service}`
-                : `${node.data?.label || node.data?.service || 'This node'} cannot contain services`;
-              console.log('Service validation result:', {
-                isValidParent,
-                validationMessage,
-                isContainer: isContainerNode(node),
-              });
-            } catch (containerCheckError) {
-              console.error(
-                'Error checking if node is container:',
-                containerCheckError,
-              );
-              isValidParent = false;
-              validationMessage =
-                'Cannot determine if this is a valid container';
-            }
-          }
-        } catch (validationError) {
-          console.error('Validation error:', validationError);
-          isValidParent = false;
-          validationMessage = 'Validation failed - invalid drop target';
-        }
-
-        // IMMEDIATE cursor and body class changes for instant feedback
-        if (!isValidParent) {
-          document.body.style.cursor = 'not-allowed';
-          document.body.classList.add('dragging-invalid');
-          document.body.classList.remove('dragging-valid');
-
-          // Also update ReactFlow container
-          const reactFlowElement = document.querySelector('.react-flow');
-          if (reactFlowElement) {
-            reactFlowElement.classList.add('drag-invalid');
-            reactFlowElement.classList.remove('drag-valid');
-          }
-        } else {
-          document.body.style.cursor = 'copy';
-          document.body.classList.add('dragging-valid');
-          document.body.classList.remove('dragging-invalid');
-
-          // Also update ReactFlow container
-          const reactFlowElement = document.querySelector('.react-flow');
-          if (reactFlowElement) {
-            reactFlowElement.classList.add('drag-valid');
-            reactFlowElement.classList.remove('drag-invalid');
-          }
-        }
-
-        // Update nodes to show visual feedback with immediate DOM updates
-        try {
-          // First, update the hovered node immediately via DOM
-          const hoveredElement = document.querySelector(
-            `[data-id="${node.id}"]`,
-          );
-          if (hoveredElement) {
-            hoveredElement.setAttribute('data-drag-hover', 'true');
-            hoveredElement.setAttribute(
-              'data-drag-hover-valid',
-              isValidParent.toString(),
-            );
-
-            // Apply immediate inline styles for instant feedback
-            if (isValidParent) {
-              hoveredElement.setAttribute(
-                'style',
-                (hoveredElement.getAttribute('style') || '') +
-                  '; cursor: copy !important; transition: all 0.1s ease !important;',
-              );
-            } else {
-              hoveredElement.setAttribute(
-                'style',
-                (hoveredElement.getAttribute('style') || '') +
-                  '; cursor: not-allowed !important; transition: all 0.1s ease !important;',
-              );
-            }
-          }
-
-          // Then update React state for persistence
-          const updatedNodes = nodes.map((n) => ({
-            ...n,
-            data: {
-              ...n.data,
-              dragHover: n.id === node.id,
-              dragHoverValid: n.id === node.id ? isValidParent : false,
-              highlighted: false, // Clear previous highlighting
-            },
-            // Add data attributes for CSS styling
-            ...(n.id === node.id && {
-              style: {
-                ...n.style,
-                '--drag-hover': 'true',
-                '--drag-hover-valid': isValidParent.toString(),
-              },
-            }),
-          }));
-          setNodes(updatedNodes);
-        } catch (nodeUpdateError) {
-          console.error('Error updating nodes:', nodeUpdateError);
-        }
-
-        // Update drag preview with validation result
-        try {
-          if (dragPreview) {
-            setDragPreview((prev) =>
-              prev
-                ? {
-                    ...prev,
-                    isValid: isValidParent,
-                    validationMessage: validationMessage,
-                    targetContainer: isValidParent ? node : null,
-                  }
-                : null,
-            );
-          }
-        } catch (previewError) {
-          console.error('Error updating drag preview:', previewError);
-        }
-
-        // Show invalid drop overlay with stop icon and tooltip for invalid targets
-        console.log('Validation result:', {
-          isValidParent,
-          nodeId: node.id,
-          service: node.data?.service,
-          message: validationMessage,
-          dragService: currentDragData.service,
-        });
-
-        try {
-          if (!isValidParent) {
-            console.log('Setting invalid drop overlay for node:', node.id);
-
-            // Get the node's screen position with better error handling
-            const nodeElement =
-              document.querySelector(`[data-id="${node.id}"]`) ||
-              document.querySelector(`.react-flow__node[data-id="${node.id}"]`);
-            console.log('Found node element:', !!nodeElement);
-
-            if (nodeElement) {
-              const nodeRect = nodeElement.getBoundingClientRect();
-              const flowElement =
-                document.querySelector('.react-flow') ||
-                document.querySelector('.react-flow__renderer') ||
-                event.currentTarget?.closest('.react-flow');
-              const flowRect = flowElement?.getBoundingClientRect();
-
-              console.log('Positioning data:', {
-                nodeRect: {
-                  width: nodeRect.width,
-                  height: nodeRect.height,
-                  left: nodeRect.left,
-                  top: nodeRect.top,
-                },
-                flowRect: flowRect
-                  ? { left: flowRect.left, top: flowRect.top }
-                  : null,
-              });
-
-              if (flowRect) {
-                const centerX =
-                  nodeRect.left + nodeRect.width / 2 - flowRect.left;
-                const centerY =
-                  nodeRect.top + nodeRect.height / 2 - flowRect.top;
-
-                console.log('Setting overlay at position:', {
-                  centerX,
-                  centerY,
-                });
-
-                setInvalidDropOverlay({
-                  nodeId: node.id,
-                  position: { x: centerX, y: centerY },
-                  message: validationMessage || 'Invalid drop target',
-                });
-
-                // Set auto-hide timer if configured
-                if (OVERLAY_TIMING.autoHideDuration > 0) {
-                  // Clear any existing timer
-                  if (overlayAutoHideTimer) {
-                    clearTimeout(overlayAutoHideTimer);
-                  }
-
-                  // Set new timer to auto-hide overlay
-                  const timer = setTimeout(() => {
-                    setInvalidDropOverlay(null);
-                    setOverlayAutoHideTimer(null);
-                  }, OVERLAY_TIMING.autoHideDuration * 1000);
-
-                  setOverlayAutoHideTimer(timer);
-                }
-              } else {
-                console.warn('Could not find flow container for positioning');
-                // Fallback positioning using mouse coordinates
-                const rect = (
-                  event.currentTarget as HTMLElement
-                ).getBoundingClientRect();
-                setInvalidDropOverlay({
-                  nodeId: node.id,
-                  position: {
-                    x: event.clientX - rect.left,
-                    y: event.clientY - rect.top,
-                  },
-                  message: validationMessage || 'Invalid drop target',
-                });
-              }
-            } else {
-              console.warn(
-                'Could not find node element for overlay positioning',
-              );
-            }
-          } else {
-            console.log(
-              'Clearing invalid drop overlay - isValidParent:',
-              isValidParent,
-            );
-            // Clear overlay for valid targets
-            setInvalidDropOverlay(null);
-          }
-        } catch (overlayError) {
-          console.error('Error handling invalid drop overlay:', overlayError);
-          // Still try to show a basic overlay even if positioning fails
-          setInvalidDropOverlay({
-            nodeId: node.id,
-            position: { x: 100, y: 100 }, // Fallback position
-            message: validationMessage || 'Invalid drop target',
-          });
-        }
-      } catch (globalError) {
-        console.error('Global error in onNodeMouseEnter:', globalError);
-        // Ensure we always clear states on error
-        setInvalidDropOverlay(null);
-        setHoveredNodeDuringDrag(null);
-        // Reset cursor on error
-        document.body.style.cursor = 'default';
-        document.body.classList.remove('dragging-invalid', 'dragging-valid');
-      }
-    },
-    [
-      currentDragData,
-      nodes,
-      dragPreview,
-      isContainerService,
-      isContainerNode,
-      reactFlowInstance,
-    ],
-  );
-
-  // Add node mouse leave handler during drag operations
-  const onNodeMouseLeave = useCallback(
-    (event: React.MouseEvent, node: Node) => {
-      // Only process if we're currently dragging something
-      if (!currentDragData) return;
-
-      setHoveredNodeDuringDrag(null);
-
-      // Clear hover styling from all nodes
-      const updatedNodes = nodes.map((n) => ({
-        ...n,
-        data: {
-          ...n.data,
-          dragHover: false,
-          dragHoverValid: false,
-          highlighted: false,
-        },
-        style: {
-          ...n.style,
-          '--drag-hover': undefined,
-          '--drag-hover-valid': undefined,
-        },
-      }));
-      setNodes(updatedNodes);
-
-      // Also clear DOM attributes for immediate visual feedback
-      setTimeout(() => {
-        const nodeElement = document.querySelector(`[data-id="${node.id}"]`);
-        if (nodeElement) {
-          nodeElement.removeAttribute('data-drag-hover');
-          nodeElement.removeAttribute('data-drag-hover-valid');
-        }
-      }, 0);
-
-      // Reset drag preview validation
-      if (dragPreview) {
-        setDragPreview((prev) =>
-          prev
-            ? {
-                ...prev,
-                isValid: true, // Reset to neutral state when not hovering over anything
-                validationMessage: t('locale.ui.messages.info.dropToPlace'),
-                targetContainer: null,
-              }
-            : null,
-        );
-      }
-
-      // Clear invalid drop overlay
-      setInvalidDropOverlay(null);
-    },
-    [currentDragData, nodes, dragPreview],
-  );
-
-  // Add drag leave handler to hide drag preview
-  const onDragLeave = useCallback(
-    (event: React.DragEvent) => {
-    // Only hide if leaving the main container
-      if (
-        !(event.currentTarget as HTMLElement).contains(
-          event.relatedTarget as HTMLElement,
-        )
-      ) {
-      setDragPreview(null);
-        setCurrentDragData(null);
-        setHoveredNodeDuringDrag(null);
-        setInvalidDropOverlay(null);
-
-        // Reset cursor
-        document.body.style.cursor = 'default';
-        document.body.classList.remove('dragging-invalid');
-      
-        // Clear all drag-related styling
-        const clearedNodes = nodes.map((node) => ({
-        ...node,
-        data: {
-          ...node.data,
-            highlighted: false,
-            dragHover: false,
-            dragHoverValid: false,
-          },
-          style: {
-            ...node.style,
-            '--drag-hover': undefined,
-            '--drag-hover-valid': undefined,
-          },
-      }));
-      setNodes(clearedNodes);
-
-        // Clear DOM attributes from all nodes
-        setTimeout(() => {
-          document
-            .querySelectorAll('.react-flow__node')
-            .forEach((nodeElement) => {
-              nodeElement.removeAttribute('data-drag-hover');
-              nodeElement.removeAttribute('data-drag-hover-valid');
-              nodeElement.removeAttribute('style');
-            });
-        }, 0);
-      }
-    },
-    [nodes],
-  );
-
-  // Modify onEdgesChange to track history
-  const onEdgesChangeWithHistory = useCallback(
-    (changes: EdgeChange[]) => {
-      // Apply changes to get the new edges state
-      const newEdges = applyEdgeChanges(changes, edges);
-      setEdges(newEdges);
-      addToHistory(nodes, newEdges);
-    },
-    [nodes, edges, addToHistory],
-  );
-
-  // Modify onConnect to track history
-  const onConnect = useCallback(
-    (params: Connection) => {
-      const newEdges = addEdge(
-        {
-          ...params,
-          ...defaultEdgeOptions,
-        },
-        edges,
-      );
-
-      // Validate the connection
-      const sourceNode = nodes.find((n) => n.id === params.source);
-      const targetNode = nodes.find((n) => n.id === params.target);
-
-      if (
-        sourceNode?.data?.cloudProvider === 'aws' &&
-        targetNode?.data?.cloudProvider === 'aws'
-      ) {
-        // Add any specific AWS connection validation here
-        // For example, validate EBS to EC2 connections are in the same AZ
-        // This would need to be implemented based on your specific requirements
-      }
-
-      setEdges(newEdges);
-      addToHistory(nodes, newEdges);
-    },
-    [edges, nodes, addToHistory],
-  );
-
-  // Update undo handler
-  const handleUndo = useCallback(() => {
-    if (historyIndex > 0) {
-      const newIndex = historyIndex - 1;
-      const previousState = history[newIndex];
-      setNodes(JSON.parse(JSON.stringify(previousState.nodes)));
-      setEdges(JSON.parse(JSON.stringify(previousState.edges)));
-      setHistoryIndex(newIndex);
-    }
-  }, [history, historyIndex]);
-
-  // Update redo handler
-  const handleRedo = useCallback(() => {
-    if (historyIndex < history.length - 1) {
-      const newIndex = historyIndex + 1;
-      const nextState = history[newIndex];
-      setNodes(JSON.parse(JSON.stringify(nextState.nodes)));
-      setEdges(JSON.parse(JSON.stringify(nextState.edges)));
-      setHistoryIndex(newIndex);
-    }
-  }, [history, historyIndex]);
-
-  // Update handleResize
-  const handleResize = useCallback(
-    (width: number, height: number) => {
-      if (!selectedNode) return;
-
-      const newNodes = nodes.map((node) => {
-        if (node.id === selectedNode.id) {
-          return {
-            ...node,
-            style: {
-              ...node.style,
-              width,
-              height,
-            },
-            data: {
-              ...node.data,
-              width,
-              height,
-            },
-          };
-        }
-        return node;
-      });
-
-      setNodes(newNodes);
-      addToHistory(newNodes, edges);
-    },
-    [selectedNode, nodes, edges, addToHistory],
-  );
-
-  // Update handleLabelSave
-  const handleLabelSave = useCallback(
-    (
-      label: string,
-      sublabel?: string,
-      dimensions?: { width: number; height: number },
-    ) => {
-      if (!selectedNode) return;
-
-      const newNodes = nodes.map((node) => {
-        if (node.id === selectedNode.id) {
-          const updatedNode = {
-            ...node,
-            data: {
-              ...node.data,
-              label,
-              sublabel,
-              ...(dimensions && {
-                width: dimensions.width,
-                height: dimensions.height,
-              }),
-            },
-          };
-
-          if (dimensions) {
-            updatedNode.style = {
-              ...node.style,
-              width: dimensions.width,
-              height: dimensions.height,
-            };
-          }
-
-          return updatedNode;
-        }
-        return node;
-      });
-
-      setNodes(newNodes);
-      addToHistory(newNodes, edges);
-    },
-    [selectedNode, nodes, edges, addToHistory],
-  );
-
-  const onNodeDoubleClick: NodeMouseHandler = useCallback((event, node) => {
-    setSelectedNode(node);
-    setIsSettingsSidebarOpen(true);
-  }, []);
-
-  // Add single click handler for container selection
-  const onNodeClick: NodeMouseHandler = useCallback(
-    (event, node) => {
-    // Single click for container selection
-    if (isContainerNode(node)) {
-      handleContainerSelection(node);
-    }
-    },
-    [isContainerNode, handleContainerSelection],
-  );
-
-  // Add edge selection handler
-  const onEdgeClick = useCallback((event: React.MouseEvent, edge: Edge) => {
-    setSelectedEdge(edge);
-    setIsSettingsSidebarOpen(true);
-  }, []);
-
-  // Add edge settings handler
-  const handleEdgeSettings = useCallback(
-    (settings: {
-      arrowDirection: 'source' | 'target' | 'both';
-      color?: string;
-      text?: string;
-    }) => {
-      if (!selectedEdge) return;
-
-      const newEdges = edges.map((edge) => {
-        if (edge.id === selectedEdge.id) {
-          const updatedEdge = {
-            ...edge,
-            markerStart:
-              settings.arrowDirection === 'source' ||
-              settings.arrowDirection === 'both'
-                ? {
-                    type: MarkerType.ArrowClosed,
-                    width: 20,
-                    height: 20,
-                    color: settings.color || '#61dafb',
-                  }
-                : undefined,
-            markerEnd:
-              settings.arrowDirection === 'target' ||
-              settings.arrowDirection === 'both'
-                ? {
-                    type: MarkerType.ArrowClosed,
-                    width: 20,
-                    height: 20,
-                    color: settings.color || '#61dafb',
-                  }
-                : undefined,
-            label: settings.text || undefined,
-          };
-
-          if (settings.color) {
-            updatedEdge.style = {
-              ...edge.style,
-              stroke: settings.color,
-            };
-          }
-
-          return updatedEdge;
-        }
-        return edge;
-      });
-
-      setEdges(newEdges);
-      addToHistory(nodes, newEdges);
-    },
-    [selectedEdge, edges, nodes, addToHistory],
-  );
-
-  // Add effect to manage real-time drag state and ReactFlow classes
-  React.useEffect(() => {
-    const reactFlowElement = document.querySelector('.react-flow');
-
-    if (currentDragData) {
-      // Add drag-active class when dragging starts
-      if (reactFlowElement) {
-        reactFlowElement.classList.add('drag-active');
-      }
-      document.body.classList.add('dragging');
-    } else {
-      // Clean up when dragging stops
-      if (reactFlowElement) {
-        reactFlowElement.classList.remove(
-          'drag-active',
-          'drag-invalid',
-          'drag-valid',
-        );
-      }
-      document.body.classList.remove(
-        'dragging',
-        'dragging-invalid',
-        'dragging-valid',
-      );
-      document.body.style.cursor = 'default';
-    }
-
-    // Cleanup function
-    return () => {
-      if (reactFlowElement) {
-        reactFlowElement.classList.remove(
-          'drag-active',
-          'drag-invalid',
-          'drag-valid',
-        );
-      }
-      document.body.classList.remove(
-        'dragging',
-        'dragging-invalid',
-        'dragging-valid',
-      );
-      document.body.style.cursor = 'default';
-    };
-  }, [currentDragData]);
-
-  // Add effect to manage hovered node state for immediate feedback
-  React.useEffect(() => {
-    if (hoveredNodeDuringDrag && currentDragData) {
-      const hoveredNode = nodes.find((n) => n.id === hoveredNodeDuringDrag);
-      const isValid = hoveredNode?.data?.dragHoverValid;
-
-      // Update ReactFlow container classes for global feedback
-      const reactFlowElement = document.querySelector('.react-flow');
-      if (reactFlowElement) {
-        if (isValid === false) {
-          reactFlowElement.classList.add('drag-invalid');
-          reactFlowElement.classList.remove('drag-valid');
-        } else if (isValid === true) {
-          reactFlowElement.classList.add('drag-valid');
-          reactFlowElement.classList.remove('drag-invalid');
-        }
-      }
-    }
-  }, [hoveredNodeDuringDrag, nodes, currentDragData]);
-
-  // Add cleanup effect for overlay timer
-  React.useEffect(() => {
-    return () => {
-      // Cleanup timer on unmount
-      if (overlayAutoHideTimer) {
-        clearTimeout(overlayAutoHideTimer);
-      }
-    };
-  }, [overlayAutoHideTimer]);
-
-  // Function to refresh validation properties for all nodes
-  const refreshValidationProperties = useCallback(() => {
-    const enhancedNodes = enhanceNodesWithValidation(nodes);
-    setNodes(enhancedNodes);
-    addToHistory(enhancedNodes, edges);
-    
-    setSuccessMessage(t('locale.ui.messages.success.validationRefreshed'));
-    setTimeout(() => setSuccessMessage(null), 3000);
-  }, [nodes, edges, addToHistory]);
-
-  return (
-    <Box
-      sx={{ display: 'flex', height: 'calc(100vh - 56px)', marginTop: '56px' }}
-    >
-      <Sidebar>
-        <PropertiesPanel onAddNode={onAddNode} nodes={nodes} edges={edges} />
-      </Sidebar>
-      <Box
-        sx={{
-          flexGrow: 1,
-          '& .react-flow__edge': {
-            zIndex: '5000 !important',
-          },
-          '& .react-flow__edge-path': {
-            pointerEvents: 'all !important',
-          },
-          '& .edge-path-selector': {
-            strokeWidth: 20,
-            fill: 'none',
-            stroke: 'transparent',
-            cursor: 'pointer',
-          },
-          '& .react-flow__edges': {
-            zIndex: '5000 !important',
-          },
-          '& .react-flow__node': {
-            pointerEvents: 'all !important',
-            cursor: 'grab',
-            '&:active': {
-              cursor: 'grabbing',
-            },
-            '& .react-flow__edge': {
-              zIndex: '5000 !important',
-            },
-          },
-          '& .react-flow__node.dragging': {
-            cursor: 'grabbing !important',
-          },
-          '& .react-flow.dragging': {
-            cursor: 'grabbing',
-          },
-        }}
-      >
-        <Box
-          sx={{
-            width: '100%',
-            height: '100%',
-            padding: '10px',
-            bgcolor: 'black',
-          }}
-        >
-          <ReactFlow
-            nodes={nodes}
-            edges={edges}
-            onNodesChange={onNodesChangeWithHistory}
-            onEdgesChange={onEdgesChangeWithHistory}
-            onConnect={onConnect}
-            onNodeClick={onNodeClick}
-            onNodeDoubleClick={onNodeDoubleClick}
-            onNodeMouseEnter={onNodeMouseEnter}
-            onNodeMouseLeave={onNodeMouseLeave}
-            onEdgeClick={onEdgeClick}
-            onInit={onInit}
-            onDragOver={onDragOver}
-            onDrop={onDrop}
-            onDragEnter={onDragEnter}
-            onDragLeave={onDragLeave}
-            nodeTypes={nodeTypes}
-            defaultEdgeOptions={defaultEdgeOptions}
-            connectionLineType={ConnectionLineType.SmoothStep}
-            fitView
-            fitViewOptions={{
-              padding: 0.2,
-              minZoom: 0.5,
-              maxZoom: 2,
-            }}
-            minZoom={0.1}
-            maxZoom={2}
-            defaultViewport={{ x: 0, y: 0, zoom: 1 }}
-            style={{
-              background: '#1a1a1a',
-            }}
-            proOptions={{ hideAttribution: true }}
-            edgesUpdatable={true}
-            elementsSelectable={true}
-            selectNodesOnDrag={false}
-            deleteKeyCode={null}
-            multiSelectionKeyCode={['Meta', 'Ctrl']}
-            className={(() => {
-              const classes = [];
-
-              // Add base drag state classes
-              if (currentDragData) {
-                classes.push('drag-active');
-              }
-
-              // Add real-time validation classes based on hovered node
-              if (hoveredNodeDuringDrag && currentDragData) {
-                const hoveredNode = nodes.find(
-                  (n) => n.id === hoveredNodeDuringDrag,
-                );
-                if (hoveredNode?.data?.dragHoverValid === false) {
-                  classes.push('drag-invalid', 'invalid-drop-target');
-                } else if (hoveredNode?.data?.dragHoverValid === true) {
-                  classes.push('drag-valid', 'valid-drop-target');
-                }
-              }
-
-              // Fallback to drag preview state if no specific node hover
-              if (!hoveredNodeDuringDrag && dragPreview) {
-                if (dragPreview.isValid) {
-                  classes.push('valid-drop-target');
-                } else {
-                  classes.push('invalid-drop-target');
-                }
-              }
-
-              return classes.join(' ');
-            })()}
-          >
-            {/* Hide default controls */}
-
-            {/* Debug Panel for Drag State */}
-            {currentDragData && (
-              <Panel position="top-left" style={{ zIndex: 10 }}>
-                <Box
-                  sx={{
-                    bgcolor: 'rgba(42, 42, 42, 0.95)',
-                    color: '#fff',
-                    padding: 2,
-                    borderRadius: 1,
-                    border: '1px solid #ff9800',
-                    minWidth: 250,
-                    boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
-                  }}
-                >
-                  <Typography
-                    variant="subtitle2"
-                    sx={{ mb: 1, color: '#ff9800' }}
-                                      >
-                      {t('locale.ui.labels.dragState')}
-                    </Typography>
-                    <Typography
-                      variant="caption"
-                      sx={{ color: '#aaa', display: 'block' }}
-                    >
-                      {t('locale.ui.labels.service')}: {currentDragData.service}
-                    </Typography>
-                    <Typography
-                      variant="caption"
-                      sx={{ color: '#aaa', display: 'block' }}
-                    >
-                      {t('locale.ui.labels.cloud')}: {currentDragData.cloudProvider}
-                    </Typography>
-                    <Typography
-                      variant="caption"
-                      sx={{ color: '#aaa', display: 'block' }}
-                    >
-                      {t('locale.ui.labels.hoveredNode')}: {hoveredNodeDuringDrag || 'None'}
-                    </Typography>
-                    <Typography
-                      variant="caption"
-                      sx={{ color: '#aaa', display: 'block' }}
-                    >
-                      {t('locale.ui.labels.invalidOverlay')}: {invalidDropOverlay ? 'YES' : 'NO'}
-                    </Typography>
-                    {invalidDropOverlay && (
-                      <Typography
-                        variant="caption"
-                        sx={{ color: '#f44336', display: 'block' }}
-                      >
-                        {t('locale.ui.labels.message')}: {invalidDropOverlay.message}
-                      </Typography>
-                    )}
-                </Box>
-              </Panel>
-            )}
-
-            {/* Selected Container Panel */}
-            {selectedContainer && (
-              <Panel position="top-right" style={{ zIndex: 10 }}>
-                <Box
-                  sx={{
-                    bgcolor: 'rgba(42, 42, 42, 0.95)',
-                    color: '#fff',
-                    padding: 2,
-                    borderRadius: 1,
-                    border: '1px solid #4CAF50',
-                    minWidth: 200,
-                    boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
-                  }}
-                >
-                  <Typography
-                    variant="subtitle2"
-                    sx={{ mb: 1, color: '#4CAF50' }}
-                                      >
-                      {t('locale.ui.labels.selectedContainer')}
-                    </Typography>
-                    <Typography variant="body2" sx={{ mb: 1 }}>
-                      {selectedContainer.data?.label ||
-                        selectedContainer.data?.service}
-                    </Typography>
-                    <Typography
-                      variant="caption"
-                      sx={{ color: '#aaa', mb: 2, display: 'block' }}
-                    >
-                      {t('locale.ui.labels.servicesWillBePlacedHere')}
-                    </Typography>
-                    <Button
-                      size="small"
-                      onClick={clearContainerSelection}
-                      sx={{
-                        color: '#ff5722',
-                        '&:hover': { bgcolor: 'rgba(255, 87, 34, 0.1)' },
-                      }}
-                    >
-                      {t('locale.ui.buttons.clearSelection')}
-                    </Button>
-                </Box>
-              </Panel>
-            )}
-
-            {invalidDropOverlay && (
-              <div
-                style={{
-                  position: 'absolute',
-                  left: Math.max(10, invalidDropOverlay.position.x - 25),
-                  top: Math.max(10, invalidDropOverlay.position.y - 25),
-                  width: '50px',
-                  height: '50px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  pointerEvents: 'none',
-                  zIndex: 15000,
-                  animation:
-                    `invalidDropOverlayAppear ${OVERLAY_TIMING.appearDuration}s ease-out, invalidDropPulse ${OVERLAY_TIMING.pulseDuration}s ease-in-out infinite ${OVERLAY_TIMING.appearDuration}s`,
-                  // Enhanced visibility styling
-                  border: '3px solid #ff0000',
-                  backgroundColor: 'rgba(255, 0, 0, 0.8)',
-                  borderRadius: '50%',
-                  boxShadow:
-                    '0 0 20px rgba(255, 0, 0, 0.8), 0 0 40px rgba(255, 0, 0, 0.4)',
-                }}
-              >
-                {/* Stop Icon Background */}
-                <div
-                  style={{
-                    width: '50px',
-                    height: '50px',
-                    borderRadius: '50%',
-                    backgroundColor: 'rgba(220, 53, 69, 0.95)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    boxShadow:
-                      '0 4px 20px rgba(220, 53, 69, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 6px rgba(220, 53, 69, 0.4)',
-                    border: '2px solid rgba(220, 53, 69, 0.8)',
-                    animation:
-                      `stopIconRotate ${OVERLAY_TIMING.iconRotationDuration}s ease-in-out infinite, invalidDropPulse ${OVERLAY_TIMING.pulseDuration}s ease-in-out infinite`,
-                  }}
-                >
-                  {/* Stop Sign Icon */}
-                  <div
-                    style={{
-                      width: '30px',
-                      height: '30px',
-                      borderRadius: '50%',
-                      border: '4px solid white',
-                      position: 'relative',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                  >
-                    {/* Diagonal line for prohibition symbol */}
-                    <div
-                      style={{
-                        position: 'absolute',
-                        width: '30px',
-                        height: '4px',
-                        backgroundColor: 'white',
-                        transform: 'rotate(45deg)',
-                      }}
-                    />
-                  </div>
-                </div>
-
-                {/* Tooltip */}
-                <div
-                  style={{
-                    position: 'absolute',
-                    top: '-60px',
-                    left: '50%',
-                    transform: 'translateX(-50%)',
-                    backgroundColor: 'rgba(220, 53, 69, 0.98)',
-                    color: 'white',
-                    padding: '8px 12px',
-                    borderRadius: '8px',
-                    fontSize: '12px',
-                    fontWeight: '600',
-                    whiteSpace: 'nowrap',
-                    maxWidth: '300px',
-                    textAlign: 'center',
-                    boxShadow:
-                      '0 4px 16px rgba(220, 53, 69, 0.4), 0 0 0 1px rgba(220, 53, 69, 0.6)',
-                    border: '2px solid rgba(220, 53, 69, 0.9)',
-                    backdropFilter: 'blur(5px)',
-                    zIndex: 10001,
-                    animation:
-                      `invalidDropTooltipAppear ${OVERLAY_TIMING.tooltipDuration}s ease-out ${OVERLAY_TIMING.tooltipDelay}s both`,
-                  }}
-                >
-                  <div
-                    style={{
-                      fontSize: '10px',
-                      fontWeight: '800',
-                      marginBottom: '2px',
-                      color: '#fff',
-                      textTransform: 'uppercase',
-                      letterSpacing: '1px',
-                                          }}
-                    >
-                      🚫 {t('locale.ui.messages.error.dropBlocked')}
-                    </div>
-                    {invalidDropOverlay.message}
-
-                  {/* Tooltip Arrow */}
-                  <div
-                    style={{
-                      position: 'absolute',
-                      top: '100%',
-                      left: '50%',
-                      transform: 'translateX(-50%)',
-                      width: '0',
-                      height: '0',
-                      borderLeft: '6px solid transparent',
-                      borderRight: '6px solid transparent',
-                      borderTop: '6px solid rgba(220, 53, 69, 0.98)',
-                    }}
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Drag Preview */}
-            {dragPreview && dragPreview.isVisible && (
-              <div
-                style={{
-                  position: 'absolute',
-                  left: dragPreview.position.x - 30,
-                  top: dragPreview.position.y - 30,
-                  width: '60px',
-                  height: '60px',
-                  backgroundColor: dragPreview.isValid
-                    ? 'rgba(42, 42, 42, 0.9)'
-                    : 'rgba(220, 53, 69, 0.95)',
-                  border: dragPreview.isValid
-                    ? '2px solid #61dafb'
-                    : '3px solid #dc3545',
-                  borderRadius: '8px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  pointerEvents: 'none',
-                  zIndex: 9999,
-                  boxShadow: dragPreview.isValid 
-                    ? '0 4px 12px rgba(97, 218, 251, 0.3)' 
-                    : '0 6px 20px rgba(220, 53, 69, 0.5), 0 0 0 1px rgba(220, 53, 69, 0.3), 0 0 40px rgba(220, 53, 69, 0.2)',
-                  backdropFilter: 'blur(10px)',
-                  transform: dragPreview.isValid ? 'scale(1)' : 'scale(1.1)',
-                  transition: 'all 0.2s ease',
-                  animation: dragPreview.isValid
-                    ? 'none'
-                    : 'invalidDropShake 0.5s ease-in-out infinite',
-                  outline: dragPreview.isValid
-                    ? 'none'
-                    : '1px solid rgba(220, 53, 69, 0.6)',
-                  outlineOffset: dragPreview.isValid ? '0' : '4px',
-                }}
-              >
-                <div
-                  style={{
-                    width: '24px',
-                    height: '24px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  {/* Service icon */}
-                  {(() => {
-                    const serviceInfo = getServiceInfo(
-                      dragPreview.service,
-                      dragPreview.cloudProvider as 'aws' | 'azure' | 'gcp',
-                    );
-                    return serviceInfo ? (
-                      <img
-                        src={serviceInfo.icon}
-                        alt={serviceInfo.name}
-                        width={24}
-                        height={24}
-                        style={{ 
-                          objectFit: 'contain',
-                          filter: dragPreview.isValid
-                            ? 'none'
-                            : 'grayscale(100%) brightness(0.6) contrast(1.2) sepia(100%) hue-rotate(345deg) saturate(150%)',
-                          transition: 'filter 0.2s ease',
-                        }}
-                      />
-                    ) : (
-                      <div
-                        style={{
-                          width: '24px',
-                          height: '24px',
-                          backgroundColor: dragPreview.isValid
-                            ? '#61dafb'
-                            : '#dc3545',
-                          borderRadius: '4px',
-                        }}
-                      />
-                    );
-                  })()}
-
-                  {/* Invalid drop overlay indicator */}
-                  {!dragPreview.isValid && (
-                    <div
-                      style={{
-                        position: 'absolute',
-                        top: '50%',
-                        left: '50%',
-                        transform: 'translate(-50%, -50%)',
-                        width: '36px',
-                        height: '36px',
-                        backgroundColor: 'rgba(220, 53, 69, 0.95)',
-                        borderRadius: '50%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        boxShadow:
-                          '0 4px 12px rgba(220, 53, 69, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.9)',
-                        animation: 'invalidDropPulse 1s ease-in-out infinite',
-                        cursor: 'not-allowed',
-                      }}
-                    >
-                      {/* Stop/Prohibition symbol */}
-                      <div
-                        style={{
-                          width: '20px',
-                          height: '20px',
-                          borderRadius: '50%',
-                          border: '3px solid white',
-                          position: 'relative',
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                        }}
-                      >
-                        {/* Diagonal line for prohibition symbol */}
-                        <div
-                          style={{
-                            position: 'absolute',
-                            width: '20px',
-                            height: '3px',
-                            backgroundColor: 'white',
-                            transform: 'rotate(45deg)',
-                          }}
-                        />
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Valid drop indicator */}
-                  {dragPreview.isValid && (
-                    <div
-                      style={{
-                        position: 'absolute',
-                        top: '2px',
-                        right: '2px',
-                        width: '16px',
-                        height: '16px',
-                        backgroundColor: 'rgba(76, 175, 80, 0.9)',
-                        borderRadius: '50%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        boxShadow: '0 2px 4px rgba(76, 175, 80, 0.4)',
-                        border: '1px solid rgba(255, 255, 255, 0.8)',
-                      }}
-                    >
-                      {/* Checkmark */}
-                      <div
-                        style={{
-                          width: '8px',
-                          height: '4px',
-                          borderLeft: '2px solid white',
-                          borderBottom: '2px solid white',
-                          transform: 'rotate(-45deg)',
-                          marginTop: '-1px',
-                        }}
-                      />
-                    </div>
-                  )}
-                </div>
-                
-                {/* Validation/Target message tooltip */}
-                {dragPreview.validationMessage && (
-                  <div
-                    style={{
-                      position: 'absolute',
-                      top: dragPreview.isValid ? '-45px' : '70px',
-                      left: '50%',
-                      transform: 'translateX(-50%)',
-                      backgroundColor: dragPreview.isValid 
-                        ? 'rgba(42, 42, 42, 0.95)' 
-                        : 'rgba(220, 53, 69, 0.98)',
-                      color: 'white',
-                      padding: dragPreview.isValid ? '6px 10px' : '8px 12px',
-                      borderRadius: dragPreview.isValid ? '6px' : '8px',
-                      fontSize: dragPreview.isValid ? '11px' : '12px',
-                      fontWeight: dragPreview.isValid ? 'normal' : '600',
-                      whiteSpace: 'nowrap',
-                      maxWidth: '300px',
-                      textAlign: 'center',
-                      boxShadow: dragPreview.isValid
-                        ? '0 2px 8px rgba(0, 0, 0, 0.3)'
-                        : '0 4px 16px rgba(220, 53, 69, 0.4), 0 0 0 1px rgba(220, 53, 69, 0.6)',
-                      zIndex: 10000,
-                      border: dragPreview.isValid 
-                        ? '1px solid rgba(97, 218, 251, 0.5)' 
-                        : '2px solid rgba(220, 53, 69, 0.9)',
-                      backdropFilter: 'blur(5px)',
-                      animation: dragPreview.isValid
-                        ? 'none'
-                        : 'invalidDropPulse 1s ease-in-out infinite',
-                      transition: 'all 0.2s ease',
-                      cursor: dragPreview.isValid ? 'copy' : 'not-allowed',
-                    }}
-                  >
-                    {!dragPreview.isValid && (
-                      <span
-                        style={{
-                          display: 'block',
-                          fontSize: '10px',
-                          fontWeight: '800',
-                          marginBottom: '2px',
-                          color: '#fff',
-                          textTransform: 'uppercase',
-                          letterSpacing: '1px',
-                    }}
-                  >
-                        🚫 {t('locale.ui.messages.error.invalidDrop')}
-                      </span>
-                    )}
-                    {dragPreview.validationMessage}
-                    {dragPreview.isValid && dragPreview.targetContainer && (
-                      <div
-                        style={{
-                          fontSize: '10px',
-                          opacity: 0.8,
-                          marginTop: '2px',
-                        }}
-                      >
-                        {t('locale.ui.labels.target')}: {dragPreview.targetContainer.data?.service || 'container'}
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* MiniMap positioned at bottom-left */}
-            <MiniMapCommon />
-
-            {/* Diagram Panel with all controls */}
-            <DiagramPanel
-              historyIndex={historyIndex}
-              historyLength={history.length}
-              onUndo={handleUndo}
-              onRedo={handleRedo}
-              onClear={() => {
-                // Prepare the new empty state
-                const clearedState = { nodes: [], edges: [] };
-                // Trim any future history if not at the end
-                const newHistory = history.slice(0, historyIndex + 1);
-                // Add the cleared state to history
-                newHistory.push(clearedState);
-                setNodes([]);
-                setEdges([]);
-                setHistory(newHistory);
-                setHistoryIndex(newHistory.length - 1);
-              }}
-              onImport={(data) => {
-                setNodes(data.nodes);
-                setEdges(data.edges);
-                // Add to history
-                const newHistory = history.slice(0, historyIndex + 1);
-                newHistory.push(data);
-                setHistory(newHistory);
-                setHistoryIndex(newHistory.length - 1);
-              }}
-              isSettingsOpen={isSettingsSidebarOpen}
-              onToggleSettings={() => setIsSettingsSidebarOpen(true)}
-              showCustomControls={true}
-              onGridLayout={() => {
-                // TODO: Implement grid layout
-                console.log('Grid layout clicked');
-              }}
-              onTreeLayout={() => {
-                // TODO: Implement tree layout
-                console.log('Tree layout clicked');
-              }}
-              onAutoLayout={autoLayout}
-              onRefreshValidation={refreshValidationProperties}
-            />
-
-            {/* AI Button positioned at bottom-right */}
-            <AiButton />
-          </ReactFlow>
-        </Box>
-      </Box>
-
-      <SettingsSidebar
-        isOpen={isSettingsSidebarOpen}
-        onClose={() => {
-          setIsSettingsSidebarOpen(false);
-          setSelectedNode(null);
-          setSelectedEdge(null);
-        }}
-        selectedNode={selectedNode}
-        selectedEdge={selectedEdge}
-        onNodeUpdate={handleLabelSave}
-        onNodeResize={handleResize}
-        onEdgeUpdate={handleEdgeSettings}
-      />
-
-      {/* Add validation error snackbar */}
-      <Snackbar
-        open={!!validationError}
-        autoHideDuration={6000}
-        onClose={() => setValidationError(null)}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-      >
-        <Alert onClose={() => setValidationError(null)} severity="error">
-          {validationError}
-        </Alert>
-      </Snackbar>
-
-      {/* Add success message snackbar */}
-      <Snackbar
-        open={!!successMessage}
-        autoHideDuration={3000}
-        onClose={() => setSuccessMessage(null)}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-      >
-        <Alert onClose={() => setSuccessMessage(null)} severity="success">
-          {successMessage}
-        </Alert>
-      </Snackbar>
-
-      {/* SubnetSelector is no longer needed - using click-to-select instead */}
-    </Box>
-  );
-};
-
-// Main wrapper component with ReactFlowProvider
-const CloudArchitectureDiagram: React.FC<CloudArchitectureDiagramProps> = (props) => {
-  return (
-    <ReactFlowProvider>
-      <CloudArchitectureDiagramContent {...props} />
-    </ReactFlowProvider>
-  );
-};
-
-// Export both the component and the localization schema interface for consumers
-export { LocalizationSchema };
-export default CloudArchitectureDiagram;
-
-// Usage example with custom localization:
-/*
-import CloudArchitectureDiagram, { LocalizationSchema } from './CloudArchitectureDiagram';
-
-const customLocalization: Partial<LocalizationSchema> = {
-  locale: {
-    core: {
-      coordinate: {
-        x: "Coordenada X",     // Spanish
-        y: "Coordenada Y"      // Spanish  
-      },
-      size: {
-        width: "Ancho",        // Spanish
-        height: "Alto"         // Spanish
-      },
-      common: {
-        title: "Título",                // Spanish
-        description: "Descripción",     // Spanish
-        cloudProvider: "Proveedor de Nube" // Spanish
-      }
-    },
-    ui: {
-      buttons: {
-        undo: "Deshacer",
-        redo: "Rehacer",
-        clear: "Limpiar",
-        autoLayout: "Diseño Automático",
-        clearSelection: "Limpiar Selección"
-      },
-      messages: {
-        success: {
-          validationRefreshed: "¡Propiedades de validación actualizadas para todos los nodos!",
-          nodePlaced: "Servicio colocado en: {container}",
-          nodesArranged: "{count} nodos organizados con espaciado adecuado"
-        },
-        error: {
-          dropBlocked: "COLOCACIÓN BLOQUEADA",
-          invalidDrop: "COLOCACIÓN INVÁLIDA"
-        },
-        info: {
-          dropToPlace: "Soltar para colocar servicio",
-          selectContainer: "Soltar para seleccionar contenedor",
-          willBePlacedIn: "Será colocado en: {container}",
-          willBePlacedAtRoot: "Será colocado en el nivel raíz"
-        }
-      },
-      labels: {
-        selectedContainer: "Contenedor Seleccionado",
-        servicesWillBePlacedHere: "Los servicios se colocarán aquí"
-      }
-    }
-  }
-};
-
-// Usage:
-<CloudArchitectureDiagram 
-  initialNodes={[]} 
-  initialEdges={[]} 
-  localization={customLocalization} 
-/>
-*/