@flowuent-org/diagramming-core 1.1.0 → 1.1.1

package/dist/out-tsc/packages/diagrams/src/lib/templates/cloud-arch/components/CloudArchitectureDiagram.js

@@ -1,2661 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useState } from 'react';
-import { Alert, Box, Button, Snackbar } from '@mui/material';
-import { generateMeaningfulId, generateUsersId } from '../utils/idGenerator';
-import ReactFlow, { useNodesState, useEdgesState, ConnectionLineType, addEdge, MarkerType, Panel, applyNodeChanges, applyEdgeChanges, 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';
-// Default localization (English)
-const defaultLocalization = {
-    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) => {
-    const localization = React.useMemo(() => {
-        if (!customLocalization)
-            return defaultLocalization;
-        // Deep merge custom localization with default
-        const mergeDeep = (target, source) => {
-            const result = Object.assign({}, 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, replacements) => {
-        const keys = path.split('.');
-        let value = localization;
-        for (const key of keys) {
-            value = value === null || value === void 0 ? void 0 : 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 };
-};
-// 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',
-        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,
-};
-// Helper function to format node labels
-const formatNodeLabel = (service, cloudProvider) => {
-    // 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, nodes) => {
-    // 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) => {
-    return change.type === 'position';
-};
-const CloudArchitectureDiagramContent = ({ initialNodes, initialEdges, localization }) => {
-    var _a, _b, _c;
-    const { t } = useLocalization(localization);
-    const [nodes, setNodes] = useNodesState(initialNodes);
-    const [edges, setEdges] = useEdgesState(initialEdges);
-    const [selectedNode, setSelectedNode] = useState(null);
-    const [selectedEdge, setSelectedEdge] = useState(null);
-    const [isSettingsSidebarOpen, setIsSettingsSidebarOpen] = useState(false);
-    const [validationError, setValidationError] = useState(null);
-    const [successMessage, setSuccessMessage] = useState(null);
-    const [history, setHistory] = useState([{ nodes: initialNodes, edges: initialEdges }]);
-    const [historyIndex, setHistoryIndex] = useState(0);
-    // Add reactFlowInstance state to track the flow instance
-    const [reactFlowInstance, setReactFlowInstance] = useState(null);
-    // Add selected container state for drag and drop
-    const [selectedContainer, setSelectedContainer] = useState(null);
-    // Add drag preview state
-    const [dragPreview, setDragPreview] = useState(null);
-    // Add state to track current drag operation and hovered node
-    const [currentDragData, setCurrentDragData] = useState(null);
-    // Add state to track which node is currently being hovered during drag
-    const [hoveredNodeDuringDrag, setHoveredNodeDuringDrag] = useState(null);
-    // Add state to track invalid drop overlay
-    const [invalidDropOverlay, setInvalidDropOverlay] = useState(null);
-    // Add state for overlay auto-hide timing
-    const [overlayAutoHideTimer, setOverlayAutoHideTimer] = useState(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) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (node.type === 'subnetNode' ||
-            // AWS containers
-            ((_a = node.data) === null || _a === void 0 ? void 0 : _a.service) === 'account' ||
-            ((_b = node.data) === null || _b === void 0 ? void 0 : _b.service) === 'vpc' ||
-            ((_c = node.data) === null || _c === void 0 ? void 0 : _c.service) === 'subnet' ||
-            ((_d = node.data) === null || _d === void 0 ? void 0 : _d.service) === 'availability-zone' ||
-            ((_e = node.data) === null || _e === void 0 ? void 0 : _e.service) === 'local-zone' ||
-            ((_f = node.data) === null || _f === void 0 ? void 0 : _f.service) === 'security-group' ||
-            // Azure containers
-            ((_g = node.data) === null || _g === void 0 ? void 0 : _g.service) === 'subscription' ||
-            ((_h = node.data) === null || _h === void 0 ? void 0 : _h.service) === 'resource-group' ||
-            ((_j = node.data) === null || _j === void 0 ? void 0 : _j.service) === 'virtual-network' ||
-            ((_k = node.data) === null || _k === void 0 ? void 0 : _k.service) === 'network-security-group' ||
-            // GCP containers
-            ((_l = node.data) === null || _l === void 0 ? void 0 : _l.service) === 'project' ||
-            ((_m = node.data) === null || _m === void 0 ? void 0 : _m.service) === 'folder');
-    }, []);
-    // Helper function to check if a service is a container service
-    const isContainerService = useCallback((service) => {
-        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, allNodes = nodes) => {
-        const semantics = extractNodeSemantics(node);
-        const restrictions = extractNodeRestrictions(node, allNodes);
-        return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, 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) => {
-        if (isContainerNode(node)) {
-            setSelectedContainer(node);
-            // Update nodes to show selection visually
-            const updatedNodes = nodes.map((n) => (Object.assign(Object.assign({}, n), { data: Object.assign(Object.assign({}, n.data), { isSelected: n.id === node.id }) })));
-            setNodes(updatedNodes);
-        }
-    }, [nodes, isContainerNode]);
-    // Function to detect overlapping nodes
-    const detectOverlapping = useCallback((nodes) => {
-        const overlaps = [];
-        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) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h;
-                    if (isContainerNode(node)) {
-                        return {
-                            width: ((_a = node.style) === null || _a === void 0 ? void 0 : _a.width) || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.width) || 300,
-                            height: ((_c = node.style) === null || _c === void 0 ? void 0 : _c.height) || ((_d = node.data) === null || _d === void 0 ? void 0 : _d.height) || 200,
-                        };
-                    }
-                    else {
-                        return {
-                            width: ((_e = node.style) === null || _e === void 0 ? void 0 : _e.width) || ((_f = node.data) === null || _f === void 0 ? void 0 : _f.width) || 120,
-                            height: ((_g = node.style) === null || _g === void 0 ? void 0 : _g.height) || ((_h = node.data) === null || _h === void 0 ? void 0 : _h.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();
-        newNodes.forEach((node) => {
-            var _a;
-            const parentId = node.parentNode;
-            if (!nodesByParent.has(parentId)) {
-                nodesByParent.set(parentId, []);
-            }
-            (_a = nodesByParent.get(parentId)) === null || _a === void 0 ? void 0 : _a.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) => { var _a; return ((_a = node.data) === null || _a === void 0 ? void 0 : _a.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, container, allNodes) => {
-        var _a, _b, _c, _d;
-        if (nodesToArrange.length === 0)
-            return;
-        // Get container dimensions
-        const containerWidth = ((_a = container.style) === null || _a === void 0 ? void 0 : _a.width) || ((_b = container.data) === null || _b === void 0 ? void 0 : _b.width) || 500;
-        const containerHeight = ((_c = container.style) === null || _c === void 0 ? void 0 : _c.height) || ((_d = container.data) === null || _d === void 0 ? void 0 : _d.height) || 300;
-        // Helper function to get node dimensions
-        const getNodeDimensions = (node) => {
-            var _a, _b, _c, _d;
-            if (isContainerNode(node)) {
-                // For container nodes like subnets
-                return {
-                    width: ((_a = node.style) === null || _a === void 0 ? void 0 : _a.width) || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.width) || 300,
-                    height: ((_c = node.style) === null || _c === void 0 ? void 0 : _c.height) || ((_d = node.data) === null || _d === void 0 ? void 0 : _d.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, nextNode) => {
-            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, index) => {
-            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, allNodes) => {
-        if (nodesToArrange.length === 0)
-            return;
-        // Sort by node type to group similar nodes together
-        const sortedNodes = [...nodesToArrange].sort((a, b) => {
-            const getNodePriority = (node) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-                // Root level containers (accounts, subscriptions, projects)
-                if (((_a = node.data) === null || _a === void 0 ? void 0 : _a.service) === 'account')
-                    return 1;
-                if (((_b = node.data) === null || _b === void 0 ? void 0 : _b.service) === 'subscription')
-                    return 1;
-                if (((_c = node.data) === null || _c === void 0 ? void 0 : _c.service) === 'project')
-                    return 1;
-                if (((_d = node.data) === null || _d === void 0 ? void 0 : _d.service) === 'folder')
-                    return 1;
-                // Network level containers (VPCs, Virtual Networks)
-                if (((_e = node.data) === null || _e === void 0 ? void 0 : _e.service) === 'vpc')
-                    return 2;
-                if (((_f = node.data) === null || _f === void 0 ? void 0 : _f.service) === 'virtual-network')
-                    return 2;
-                if (((_g = node.data) === null || _g === void 0 ? void 0 : _g.service) === 'resource-group')
-                    return 2;
-                // Subnet level containers
-                if (((_h = node.data) === null || _h === void 0 ? void 0 : _h.service) === 'subnet')
-                    return 3;
-                if (((_j = node.data) === null || _j === void 0 ? void 0 : _j.service) === 'availability-zone')
-                    return 3;
-                if (((_k = node.data) === null || _k === void 0 ? void 0 : _k.service) === 'local-zone')
-                    return 3;
-                // Security containers
-                if (((_l = node.data) === null || _l === void 0 ? void 0 : _l.service) === 'security-group')
-                    return 4;
-                if (((_m = node.data) === null || _m === void 0 ? void 0 : _m.service) === 'network-security-group')
-                    return 4;
-                // Users and external
-                if (((_o = node.data) === null || _o === void 0 ? void 0 : _o.service) === 'users')
-                    return 5;
-                return 6; // Other services
-            };
-            return getNodePriority(a) - getNodePriority(b);
-        });
-        // Calculate spacing based on node types
-        const getNodeSpacing = (node) => {
-            var _a, _b, _c, _d;
-            if (isContainerNode(node)) {
-                const width = ((_a = node.style) === null || _a === void 0 ? void 0 : _a.width) || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.width) || 500;
-                const height = ((_c = node.style) === null || _c === void 0 ? void 0 : _c.height) || ((_d = node.data) === null || _d === void 0 ? void 0 : _d.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, newPosition, allNodes) => {
-        // Get node dimensions based on type
-        const getNodeDimensions = (node) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            if (isContainerNode(node)) {
-                return {
-                    width: ((_a = node.style) === null || _a === void 0 ? void 0 : _a.width) || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.width) || 300,
-                    height: ((_c = node.style) === null || _c === void 0 ? void 0 : _c.height) || ((_d = node.data) === null || _d === void 0 ? void 0 : _d.height) || 200,
-                };
-            }
-            else {
-                return {
-                    width: ((_e = node.style) === null || _e === void 0 ? void 0 : _e.width) || ((_f = node.data) === null || _f === void 0 ? void 0 : _f.width) || 120,
-                    height: ((_g = node.style) === null || _g === void 0 ? void 0 : _g.height) || ((_h = node.data) === null || _h === void 0 ? void 0 : _h.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 = Object.assign({}, 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) => (Object.assign(Object.assign({}, n), { data: Object.assign(Object.assign({}, n.data), { isSelected: false }) })));
-        setNodes(updatedNodes);
-    }, [nodes]);
-    // Add onInit callback to store the flow instance
-    const onInit = useCallback((reactFlowInstance) => {
-        setReactFlowInstance(reactFlowInstance);
-    }, []);
-    // Function to add state to history with enhanced validation
-    const addToHistory = useCallback((newNodes, newEdges) => {
-        // 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) => {
-        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();
-        // Add selected nodes to deletion set
-        nodeIds.forEach((id) => allNodesToDelete.add(id));
-        // Recursively find all child nodes
-        const findChildNodes = (parentId) => {
-            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) => { var _a; return ((_a = n.data) === null || _a === void 0 ? void 0 : _a.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) => {
-        handleDeleteNodes([nodeId]);
-    }, [handleDeleteNodes]);
-    // Add keyboard event handler for node deletion
-    React.useEffect(() => {
-        const handleKeyDown = (event) => {
-            var _a;
-            // 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 ||
-                    ((_a = event.target) === null || _a === void 0 ? void 0 : _a.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) => {
-        const newNodes = nodes.map((node) => {
-            if (node.id === event.id) {
-                return Object.assign(Object.assign({}, node), { style: Object.assign(Object.assign({}, node.style), { width: event.width, height: event.height }), data: Object.assign(Object.assign({}, 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, service, position, cloudProvider) => {
-        // Force GCP Projects to be created at root level
-        if (cloudProvider === 'gcp' && service === 'project') {
-            const baseNode = 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 = 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 = {
-            id: tempNodeId,
-            type: nodeType,
-            position: nodePosition,
-            data: {
-                service,
-                label,
-                sublabel,
-                handles: ['left', 'right'],
-                cloudProvider,
-                infiniteResize: true,
-            },
-            style: { zIndex: 3 },
-            parentNode: bestParent === null || bestParent === void 0 ? void 0 : 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 = {
-            id: nodeId,
-            type: nodeType,
-            position: nodePosition,
-            data: {
-                service,
-                label,
-                sublabel,
-                handles: ['left', 'right'],
-                cloudProvider,
-                infiniteResize: true,
-            },
-            style: { zIndex: 3 },
-            parentNode: bestParent === null || bestParent === void 0 ? void 0 : bestParent.id,
-            extent: bestParent ? 'parent' : undefined,
-        };
-        // Handle container nodes
-        if (nodeType === 'subnetNode') {
-            const containerBaseNode = createContainerNode(service, nodePosition, cloudProvider, bestParent === null || bestParent === void 0 ? void 0 : 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, position) => {
-        // Use the same createContainerNode function for consistency
-        return createContainerNode(service, position, 'gcp');
-    };
-    // Helper function to create users nodes
-    const createUsersNode = (position) => {
-        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, position, cloudProvider, parentId) => {
-        // Get cloud-specific dimensions and labels
-        const getContainerConfig = (service, cloudProvider) => {
-            // 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) => {
-        var _a, _b, _c, _d, _e, _f;
-        // 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) => {
-            var _a, _b;
-            if (isPositionChange(change) && !change.dragging) {
-                const positionChange = change;
-                const movedNode = newNodes.find((node) => node.id === positionChange.id);
-                if (movedNode &&
-                    ((_a = movedNode.data) === null || _a === void 0 ? void 0 : _a.cloudProvider) &&
-                    ((_b = movedNode.data) === null || _b === void 0 ? void 0 : _b.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));
-                        // 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 = [];
-            for (const node of newNodes) {
-                if (((_a = node.data) === null || _a === void 0 ? void 0 : _a.cloudProvider) && ((_b = node.data) === null || _b === void 0 ? void 0 : _b.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);
-                    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);
-            if (positionChange) {
-                const draggedNode = nodes.find((node) => node.id === positionChange.id);
-                if (draggedNode &&
-                    ((_c = draggedNode.data) === null || _c === void 0 ? void 0 : _c.cloudProvider) &&
-                    ((_d = draggedNode.data) === null || _d === void 0 ? void 0 : _d.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: ((_e = resizeChange.dimensions) === null || _e === void 0 ? void 0 : _e.width) || 0,
-                    height: ((_f = resizeChange.dimensions) === null || _f === void 0 ? void 0 : _f.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) => {
-        var _a, _b, _c, _d;
-        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 && ((_a = hoveredNode.data) === null || _a === void 0 ? void 0 : _a.dragHoverValid) === false) {
-                    event.dataTransfer.dropEffect = 'none';
-                    document.body.style.cursor = 'not-allowed';
-                    document.body.classList.add('dragging-invalid');
-                }
-                else if (hoveredNode && ((_b = hoveredNode.data) === null || _b === void 0 ? void 0 : _b.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.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, 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 === null || bestParent === void 0 ? void 0 : bestParent.id,
-                    };
-                    // Validate placement
-                    const validation = validateCloudProviderPlacement(tempNode, bestParent, nodes, dragPreview.cloudProvider);
-                    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: ((_c = bestParent.data) === null || _c === void 0 ? void 0 : _c.label) || ((_d = bestParent.data) === null || _d === void 0 ? void 0 : _d.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) => (Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, node.data), { highlighted: targetContainer && node.id === targetContainer.id }) })));
-            // Only update nodes if highlighting changed
-            const currentHighlighted = nodes.find((n) => { var _a; return (_a = n.data) === null || _a === void 0 ? void 0 : _a.highlighted; });
-            const newHighlighted = updatedNodes.find((n) => { var _a; return (_a = n.data) === null || _a === void 0 ? void 0 : _a.highlighted; });
-            if ((!currentHighlighted && newHighlighted) ||
-                (currentHighlighted && !newHighlighted) ||
-                (currentHighlighted &&
-                    newHighlighted &&
-                    currentHighlighted.id !== newHighlighted.id)) {
-                setNodes(updatedNodes);
-            }
-            setDragPreview((prev) => prev
-                ? Object.assign(Object.assign({}, 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) => {
-        event.preventDefault();
-        // Check if we have valid drag data and target
-        const isValidDrop = (dragPreview === null || dragPreview === void 0 ? void 0 : dragPreview.isValid) !== false;
-        const targetContainer = dragPreview === null || dragPreview === void 0 ? void 0 : 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) => (Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, node.data), { highlighted: false, dragHover: false, dragHoverValid: false }), style: Object.assign(Object.assign({}, 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 === null || dragPreview === void 0 ? void 0 : 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.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, nodeType, cloudProvider, label, dropPosition, targetContainer) => {
-        var _a, _b, _c, _d, _e, _f;
-        // Get node labels
-        const { label: nodeLabel, sublabel } = formatNodeLabel(service, cloudProvider);
-        // Calculate the correct position based on parent selection
-        let finalPosition = dropPosition;
-        let parentNode = 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 = ((_a = targetContainer.style) === null || _a === void 0 ? void 0 : _a.width) ||
-                ((_b = targetContainer.data) === null || _b === void 0 ? void 0 : _b.width) ||
-                500;
-            const parentHeight = ((_c = targetContainer.style) === null || _c === void 0 ? void 0 : _c.height) ||
-                ((_d = targetContainer.data) === null || _d === void 0 ? void 0 : _d.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) => {
-                            var _a, _b;
-                            const childX = childNode.position.x;
-                            const childY = childNode.position.y;
-                            const childWidth = ((_a = childNode.style) === null || _a === void 0 ? void 0 : _a.width) || 120;
-                            const childHeight = ((_b = childNode.style) === null || _b === void 0 ? void 0 : _b.height) || 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 === null || targetContainer === void 0 ? void 0 : targetContainer.id,
-        };
-        finalPosition = preventOverlap(tempNode, finalPosition, nodes);
-        // Create the base node with the selected parent using meaningful ID
-        const nodeId = cloudProvider ? generateMeaningfulId(cloudProvider, service) : `${service}-1`;
-        const baseNode = {
-            id: nodeId,
-            type: nodeType,
-            position: finalPosition,
-            data: {
-                service,
-                label: nodeLabel,
-                sublabel,
-                handles: ['left', 'right'],
-                cloudProvider,
-                infiniteResize: true,
-            },
-            style: { zIndex: 3 },
-            parentNode: targetContainer === null || targetContainer === void 0 ? void 0 : targetContainer.id,
-            extent: targetContainer ? 'parent' : undefined,
-        };
-        // Validate placement if a parent is selected
-        if (targetContainer) {
-            const validation = validateCloudProviderPlacement(baseNode, parentNode, nodes, cloudProvider);
-            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: ((_e = targetContainer.data) === null || _e === void 0 ? void 0 : _e.label) || ((_f = targetContainer.data) === null || _f === void 0 ? void 0 : _f.service)
-            }));
-            setTimeout(() => setSuccessMessage(null), 2000);
-        }
-    }, [nodes, edges, addToHistory]);
-    // Add drag enter handler to show drag preview
-    const onDragEnter = useCallback((event) => {
-        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.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, node) => {
-        var _a, _b, _c, _d, _e, _f;
-        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, node, nodes, currentDragData.cloudProvider);
-                    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 ${((_a = node.data) === null || _a === void 0 ? void 0 : _a.label) || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.service)}`
-                            : `${((_c = node.data) === null || _c === void 0 ? void 0 : _c.label) || ((_d = node.data) === null || _d === void 0 ? void 0 : _d.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) => (Object.assign(Object.assign(Object.assign({}, n), { data: Object.assign(Object.assign({}, n.data), { dragHover: n.id === node.id, dragHoverValid: n.id === node.id ? isValidParent : false, highlighted: false }) }), (n.id === node.id && {
-                    style: Object.assign(Object.assign({}, 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
-                        ? Object.assign(Object.assign({}, 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: (_e = node.data) === null || _e === void 0 ? void 0 : _e.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') ||
-                            ((_f = event.currentTarget) === null || _f === void 0 ? void 0 : _f.closest('.react-flow'));
-                        const flowRect = flowElement === null || flowElement === void 0 ? void 0 : 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.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, 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) => (Object.assign(Object.assign({}, n), { data: Object.assign(Object.assign({}, n.data), { dragHover: false, dragHoverValid: false, highlighted: false }), style: Object.assign(Object.assign({}, 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
-                ? Object.assign(Object.assign({}, prev), { isValid: true, 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) => {
-        // Only hide if leaving the main container
-        if (!event.currentTarget.contains(event.relatedTarget)) {
-            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) => (Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, node.data), { highlighted: false, dragHover: false, dragHoverValid: false }), style: Object.assign(Object.assign({}, 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) => {
-        // 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) => {
-        var _a, _b;
-        const newEdges = addEdge(Object.assign(Object.assign({}, 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 (((_a = sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.data) === null || _a === void 0 ? void 0 : _a.cloudProvider) === 'aws' &&
-            ((_b = targetNode === null || targetNode === void 0 ? void 0 : targetNode.data) === null || _b === void 0 ? void 0 : _b.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, height) => {
-        if (!selectedNode)
-            return;
-        const newNodes = nodes.map((node) => {
-            if (node.id === selectedNode.id) {
-                return Object.assign(Object.assign({}, node), { style: Object.assign(Object.assign({}, node.style), { width,
-                        height }), data: Object.assign(Object.assign({}, node.data), { width,
-                        height }) });
-            }
-            return node;
-        });
-        setNodes(newNodes);
-        addToHistory(newNodes, edges);
-    }, [selectedNode, nodes, edges, addToHistory]);
-    // Update handleLabelSave
-    const handleLabelSave = useCallback((label, sublabel, dimensions) => {
-        if (!selectedNode)
-            return;
-        const newNodes = nodes.map((node) => {
-            if (node.id === selectedNode.id) {
-                const updatedNode = Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign(Object.assign({}, node.data), { label,
-                        sublabel }), (dimensions && {
-                        width: dimensions.width,
-                        height: dimensions.height,
-                    })) });
-                if (dimensions) {
-                    updatedNode.style = Object.assign(Object.assign({}, node.style), { width: dimensions.width, height: dimensions.height });
-                }
-                return updatedNode;
-            }
-            return node;
-        });
-        setNodes(newNodes);
-        addToHistory(newNodes, edges);
-    }, [selectedNode, nodes, edges, addToHistory]);
-    const onNodeDoubleClick = useCallback((event, node) => {
-        setSelectedNode(node);
-        setIsSettingsSidebarOpen(true);
-    }, []);
-    // Add single click handler for container selection
-    const onNodeClick = useCallback((event, node) => {
-        // Single click for container selection
-        if (isContainerNode(node)) {
-            handleContainerSelection(node);
-        }
-    }, [isContainerNode, handleContainerSelection]);
-    // Add edge selection handler
-    const onEdgeClick = useCallback((event, edge) => {
-        setSelectedEdge(edge);
-        setIsSettingsSidebarOpen(true);
-    }, []);
-    // Add edge settings handler
-    const handleEdgeSettings = useCallback((settings) => {
-        if (!selectedEdge)
-            return;
-        const newEdges = edges.map((edge) => {
-            if (edge.id === selectedEdge.id) {
-                const updatedEdge = Object.assign(Object.assign({}, 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 = Object.assign(Object.assign({}, 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(() => {
-        var _a;
-        if (hoveredNodeDuringDrag && currentDragData) {
-            const hoveredNode = nodes.find((n) => n.id === hoveredNodeDuringDrag);
-            const isValid = (_a = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.data) === null || _a === void 0 ? void 0 : _a.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 (_jsxs(Box, { sx: { display: 'flex', height: 'calc(100vh - 56px)', marginTop: '56px' }, children: [_jsx(Sidebar, { children: _jsx(PropertiesPanel, { onAddNode: onAddNode, nodes: nodes, edges: edges }) }), _jsx(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',
-                    },
-                }, children: _jsx(Box, { sx: {
-                        width: '100%',
-                        height: '100%',
-                        padding: '10px',
-                        bgcolor: 'black',
-                    }, children: _jsxs(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: true, 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: (() => {
-                            var _a, _b;
-                            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 (((_a = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.data) === null || _a === void 0 ? void 0 : _a.dragHoverValid) === false) {
-                                    classes.push('drag-invalid', 'invalid-drop-target');
-                                }
-                                else if (((_b = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.data) === null || _b === void 0 ? void 0 : _b.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(' ');
-                        })(), children: [currentDragData && (_jsx(Panel, { position: "top-left", style: { zIndex: 10 }, children: _jsxs(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)',
-                                    }, children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 1, color: '#ff9800' }, children: t('locale.ui.labels.dragState') }), _jsxs(Typography, { variant: "caption", sx: { color: '#aaa', display: 'block' }, children: [t('locale.ui.labels.service'), ": ", currentDragData.service] }), _jsxs(Typography, { variant: "caption", sx: { color: '#aaa', display: 'block' }, children: [t('locale.ui.labels.cloud'), ": ", currentDragData.cloudProvider] }), _jsxs(Typography, { variant: "caption", sx: { color: '#aaa', display: 'block' }, children: [t('locale.ui.labels.hoveredNode'), ": ", hoveredNodeDuringDrag || 'None'] }), _jsxs(Typography, { variant: "caption", sx: { color: '#aaa', display: 'block' }, children: [t('locale.ui.labels.invalidOverlay'), ": ", invalidDropOverlay ? 'YES' : 'NO'] }), invalidDropOverlay && (_jsxs(Typography, { variant: "caption", sx: { color: '#f44336', display: 'block' }, children: [t('locale.ui.labels.message'), ": ", invalidDropOverlay.message] }))] }) })), selectedContainer && (_jsx(Panel, { position: "top-right", style: { zIndex: 10 }, children: _jsxs(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)',
-                                    }, children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 1, color: '#4CAF50' }, children: t('locale.ui.labels.selectedContainer') }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: ((_a = selectedContainer.data) === null || _a === void 0 ? void 0 : _a.label) ||
-                                                ((_b = selectedContainer.data) === null || _b === void 0 ? void 0 : _b.service) }), _jsx(Typography, { variant: "caption", sx: { color: '#aaa', mb: 2, display: 'block' }, children: t('locale.ui.labels.servicesWillBePlacedHere') }), _jsx(Button, { size: "small", onClick: clearContainerSelection, sx: {
-                                                color: '#ff5722',
-                                                '&:hover': { bgcolor: 'rgba(255, 87, 34, 0.1)' },
-                                            }, children: t('locale.ui.buttons.clearSelection') })] }) })), invalidDropOverlay && (_jsxs("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)',
-                                }, children: [_jsx("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`,
-                                        }, children: _jsx("div", { style: {
-                                                width: '30px',
-                                                height: '30px',
-                                                borderRadius: '50%',
-                                                border: '4px solid white',
-                                                position: 'relative',
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                            }, children: _jsx("div", { style: {
-                                                    position: 'absolute',
-                                                    width: '30px',
-                                                    height: '4px',
-                                                    backgroundColor: 'white',
-                                                    transform: 'rotate(45deg)',
-                                                } }) }) }), _jsxs("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`,
-                                        }, children: [_jsxs("div", { style: {
-                                                    fontSize: '10px',
-                                                    fontWeight: '800',
-                                                    marginBottom: '2px',
-                                                    color: '#fff',
-                                                    textTransform: 'uppercase',
-                                                    letterSpacing: '1px',
-                                                }, children: ["\uD83D\uDEAB ", t('locale.ui.messages.error.dropBlocked')] }), invalidDropOverlay.message, _jsx("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)',
-                                                } })] })] })), dragPreview && dragPreview.isVisible && (_jsxs("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',
-                                }, children: [_jsxs("div", { style: {
-                                            width: '24px',
-                                            height: '24px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                        }, children: [(() => {
-                                                const serviceInfo = getServiceInfo(dragPreview.service, dragPreview.cloudProvider);
-                                                return serviceInfo ? (_jsx("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',
-                                                    } })) : (_jsx("div", { style: {
-                                                        width: '24px',
-                                                        height: '24px',
-                                                        backgroundColor: dragPreview.isValid
-                                                            ? '#61dafb'
-                                                            : '#dc3545',
-                                                        borderRadius: '4px',
-                                                    } }));
-                                            })(), !dragPreview.isValid && (_jsx("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',
-                                                }, children: _jsx("div", { style: {
-                                                        width: '20px',
-                                                        height: '20px',
-                                                        borderRadius: '50%',
-                                                        border: '3px solid white',
-                                                        position: 'relative',
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        justifyContent: 'center',
-                                                    }, children: _jsx("div", { style: {
-                                                            position: 'absolute',
-                                                            width: '20px',
-                                                            height: '3px',
-                                                            backgroundColor: 'white',
-                                                            transform: 'rotate(45deg)',
-                                                        } }) }) })), dragPreview.isValid && (_jsx("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)',
-                                                }, children: _jsx("div", { style: {
-                                                        width: '8px',
-                                                        height: '4px',
-                                                        borderLeft: '2px solid white',
-                                                        borderBottom: '2px solid white',
-                                                        transform: 'rotate(-45deg)',
-                                                        marginTop: '-1px',
-                                                    } }) }))] }), dragPreview.validationMessage && (_jsxs("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',
-                                        }, children: [!dragPreview.isValid && (_jsxs("span", { style: {
-                                                    display: 'block',
-                                                    fontSize: '10px',
-                                                    fontWeight: '800',
-                                                    marginBottom: '2px',
-                                                    color: '#fff',
-                                                    textTransform: 'uppercase',
-                                                    letterSpacing: '1px',
-                                                }, children: ["\uD83D\uDEAB ", t('locale.ui.messages.error.invalidDrop')] })), dragPreview.validationMessage, dragPreview.isValid && dragPreview.targetContainer && (_jsxs("div", { style: {
-                                                    fontSize: '10px',
-                                                    opacity: 0.8,
-                                                    marginTop: '2px',
-                                                }, children: [t('locale.ui.labels.target'), ": ", ((_c = dragPreview.targetContainer.data) === null || _c === void 0 ? void 0 : _c.service) || 'container'] }))] }))] })), _jsx(MiniMapCommon, {}), _jsx(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 }), _jsx(AiButton, {})] }) }) }), _jsx(SettingsSidebar, { isOpen: isSettingsSidebarOpen, onClose: () => {
-                    setIsSettingsSidebarOpen(false);
-                    setSelectedNode(null);
-                    setSelectedEdge(null);
-                }, selectedNode: selectedNode, selectedEdge: selectedEdge, onNodeUpdate: handleLabelSave, onNodeResize: handleResize, onEdgeUpdate: handleEdgeSettings }), _jsx(Snackbar, { open: !!validationError, autoHideDuration: 6000, onClose: () => setValidationError(null), anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, children: _jsx(Alert, { onClose: () => setValidationError(null), severity: "error", children: validationError }) }), _jsx(Snackbar, { open: !!successMessage, autoHideDuration: 3000, onClose: () => setSuccessMessage(null), anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, children: _jsx(Alert, { onClose: () => setSuccessMessage(null), severity: "success", children: successMessage }) })] }));
-};
-// Main wrapper component with ReactFlowProvider
-const CloudArchitectureDiagram = (props) => {
-    return (_jsx(ReactFlowProvider, { children: _jsx(CloudArchitectureDiagramContent, Object.assign({}, props)) }));
-};
-export default CloudArchitectureDiagram;
-//# sourceMappingURL=CloudArchitectureDiagram.js.map