@flowuent-org/diagramming-core 1.1.0 → 1.1.1

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

@@ -0,0 +1,3912 @@
+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} 
+/>
+*/