@shumoku/core 0.1.0 → 0.2.0

package/dist/layout/hierarchical.js

@@ -4,44 +4,57 @@
  */
 import ELK from 'elkjs/lib/elk.bundled.js';
 import { getNodeId, } from '../models/index.js';
-import { getVendorIconEntry } from '../icons/index.js';
+import { getVendorIconEntry, getDeviceIcon } from '../icons/index.js';
+import { DEFAULT_ICON_SIZE, ICON_LABEL_GAP, LABEL_LINE_HEIGHT, NODE_VERTICAL_PADDING, NODE_HORIZONTAL_PADDING, MIN_PORT_SPACING, PORT_LABEL_FONT_SIZE, CHAR_WIDTH_RATIO, PORT_LABEL_PADDING, ESTIMATED_CHAR_WIDTH, MAX_ICON_WIDTH_RATIO, } from '../constants.js';
 // ============================================
 // Helper Functions
 // ============================================
-/**
- * Convert endpoint to full LinkEndpoint object
- */
 function toEndpoint(endpoint) {
     if (typeof endpoint === 'string') {
         return { node: endpoint };
     }
     return endpoint;
 }
-/**
- * Collect all ports for each node from links
- * @param haNodePairs - Set of "nodeA:nodeB" strings for HA pairs to exclude their ports
- */
-function collectNodePorts(graph, haNodePairs) {
+/** Collect ports for each node from links */
+function collectNodePorts(graph, haPairSet) {
     const nodePorts = new Map();
+    const getOrCreate = (nodeId) => {
+        if (!nodePorts.has(nodeId)) {
+            nodePorts.set(nodeId, { all: new Set(), top: new Set(), bottom: new Set(), left: new Set(), right: new Set() });
+        }
+        return nodePorts.get(nodeId);
+    };
+    // Check if link is between HA pair nodes
+    const isHALink = (fromNode, toNode) => {
+        const key = [fromNode, toNode].sort().join(':');
+        return haPairSet.has(key);
+    };
     for (const link of graph.links) {
-        const fromEndpoint = toEndpoint(link.from);
-        const toEndpoint_ = toEndpoint(link.to);
-        // Skip ports for HA links - they will be handled separately
-        const pairKey = `${fromEndpoint.node}:${toEndpoint_.node}`;
-        if (haNodePairs?.has(pairKey)) {
-            continue;
+        const from = toEndpoint(link.from);
+        const to = toEndpoint(link.to);
+        if (link.redundancy && isHALink(from.node, to.node)) {
+            // HA links: create side ports (left/right)
+            const fromPortName = from.port || 'ha';
+            const toPortName = to.port || 'ha';
+            const fromInfo = getOrCreate(from.node);
+            fromInfo.all.add(fromPortName);
+            fromInfo.right.add(fromPortName);
+            const toInfo = getOrCreate(to.node);
+            toInfo.all.add(toPortName);
+            toInfo.left.add(toPortName);
         }
-        if (fromEndpoint.port) {
-            if (!nodePorts.has(fromEndpoint.node)) {
-                nodePorts.set(fromEndpoint.node, new Set());
+        else {
+            // Normal links: ports on top/bottom
+            if (from.port) {
+                const info = getOrCreate(from.node);
+                info.all.add(from.port);
+                info.bottom.add(from.port);
             }
-            nodePorts.get(fromEndpoint.node).add(fromEndpoint.port);
-        }
-        if (toEndpoint_.port) {
-            if (!nodePorts.has(toEndpoint_.node)) {
-                nodePorts.set(toEndpoint_.node, new Set());
+            if (to.port) {
+                const info = getOrCreate(to.node);
+                info.all.add(to.port);
+                info.top.add(to.port);
             }
-            nodePorts.get(toEndpoint_.node).add(toEndpoint_.port);
         }
     }
     return nodePorts;
@@ -53,10 +66,10 @@ const DEFAULT_OPTIONS = {
     direction: 'TB',
     nodeWidth: 180,
     nodeHeight: 60,
-    nodeSpacing: 120, // Horizontal spacing between nodes
-    rankSpacing: 180, // Vertical spacing between layers
-    subgraphPadding: 60, // Padding inside subgraphs
-    subgraphLabelHeight: 28,
+    nodeSpacing: 40,
+    rankSpacing: 60,
+    subgraphPadding: 24,
+    subgraphLabelHeight: 24,
 };
 // ============================================
 // Layout Engine
@@ -69,89 +82,77 @@ export class HierarchicalLayout {
         this.elk = new ELK();
     }
     /**
-     * Get effective options by merging graph settings with defaults
+     * Calculate dynamic spacing based on graph complexity
      */
+    calculateDynamicSpacing(graph) {
+        const nodeCount = graph.nodes.length;
+        const linkCount = graph.links.length;
+        const subgraphCount = graph.subgraphs?.length || 0;
+        let portCount = 0;
+        let maxPortLabelLength = 0;
+        for (const link of graph.links) {
+            if (typeof link.from !== 'string' && link.from.port) {
+                portCount++;
+                maxPortLabelLength = Math.max(maxPortLabelLength, link.from.port.length);
+            }
+            if (typeof link.to !== 'string' && link.to.port) {
+                portCount++;
+                maxPortLabelLength = Math.max(maxPortLabelLength, link.to.port.length);
+            }
+        }
+        const avgPortsPerNode = nodeCount > 0 ? portCount / nodeCount : 0;
+        const complexity = nodeCount * 1.0 + linkCount * 0.8 + portCount * 0.3 + subgraphCount * 2;
+        const portDensityFactor = Math.min(1.5, 1 + avgPortsPerNode * 0.1);
+        const rawSpacing = Math.max(20, Math.min(60, 80 - complexity * 1.2));
+        const baseSpacing = rawSpacing * portDensityFactor;
+        const portLabelProtrusion = portCount > 0 ? 28 : 0;
+        const portLabelWidth = maxPortLabelLength * PORT_LABEL_FONT_SIZE * CHAR_WIDTH_RATIO;
+        const minRankSpacing = Math.max(portLabelWidth, portLabelProtrusion) + 16;
+        const minSubgraphPadding = portLabelProtrusion + 8;
+        return {
+            nodeSpacing: Math.round(baseSpacing),
+            rankSpacing: Math.round(Math.max(baseSpacing * 1.5, minRankSpacing)),
+            subgraphPadding: Math.round(Math.max(baseSpacing * 0.6, minSubgraphPadding)),
+        };
+    }
     getEffectiveOptions(graph) {
         const settings = graph.settings;
+        const dynamicSpacing = this.calculateDynamicSpacing(graph);
         return {
             ...this.options,
             direction: settings?.direction || this.options.direction,
-            nodeSpacing: settings?.nodeSpacing || this.options.nodeSpacing,
-            rankSpacing: settings?.rankSpacing || this.options.rankSpacing,
-            subgraphPadding: settings?.subgraphPadding || this.options.subgraphPadding,
+            nodeSpacing: settings?.nodeSpacing || dynamicSpacing.nodeSpacing,
+            rankSpacing: settings?.rankSpacing || dynamicSpacing.rankSpacing,
+            subgraphPadding: settings?.subgraphPadding || dynamicSpacing.subgraphPadding,
         };
     }
     async layoutAsync(graph) {
         const startTime = performance.now();
-        // Merge graph settings with default options
-        const effectiveOptions = this.getEffectiveOptions(graph);
-        const direction = effectiveOptions.direction;
-        // Detect HA pairs first (before building ELK graph)
+        const options = this.getEffectiveOptions(graph);
+        // Detect HA pairs first (needed for port assignment)
         const haPairs = this.detectHAPairs(graph);
-        // Build ELK graph with HA pairs merged into virtual nodes
-        const { elkGraph, haVirtualNodes } = this.buildElkGraphWithHAMerge(graph, direction, effectiveOptions, haPairs);
+        const haPairSet = new Set();
+        for (const pair of haPairs) {
+            haPairSet.add([pair.nodeA, pair.nodeB].sort().join(':'));
+        }
+        const nodePorts = collectNodePorts(graph, haPairSet);
+        // Build ELK graph
+        const elkGraph = this.buildElkGraph(graph, options, nodePorts, haPairs);
         // Run ELK layout
         const layoutedGraph = await this.elk.layout(elkGraph);
-        // Extract results and expand HA virtual nodes back to original pairs
-        const result = this.extractLayoutResultWithHAExpand(graph, layoutedGraph, haVirtualNodes, effectiveOptions);
-        // Adjust node distances based on link minLength (for non-HA links)
-        this.adjustLinkDistances(result, graph, direction);
-        // Recalculate subgraph bounds after node adjustments
-        this.recalculateSubgraphBounds(result, graph);
+        // Extract results using ELK's positions and edge routes
+        const result = this.extractLayoutResult(graph, layoutedGraph, nodePorts, options);
         result.metadata = {
-            algorithm: 'elk-layered-ha-merge',
+            algorithm: 'elk-layered',
             duration: performance.now() - startTime,
         };
         return result;
     }
     /**
-     * Build ELK graph with HA pairs merged into single virtual nodes
+     * Build ELK graph - uses container nodes for HA pairs
      */
-    buildElkGraphWithHAMerge(graph, direction, options, haPairs) {
-        const elkDirection = this.toElkDirection(direction);
-        const haVirtualNodes = new Map();
-        // Build set of nodes in HA pairs
-        const nodesInHAPairs = new Set();
-        for (const pair of haPairs) {
-            nodesInHAPairs.add(pair.nodeA);
-            nodesInHAPairs.add(pair.nodeB);
-        }
-        // Build node map for quick lookup
-        const nodeMap = new Map();
-        for (const node of graph.nodes) {
-            nodeMap.set(node.id, node);
-        }
-        // Create virtual nodes for HA pairs
-        const gap = 40; // Gap between HA pair nodes
-        for (let i = 0; i < haPairs.length; i++) {
-            const pair = haPairs[i];
-            const nodeA = nodeMap.get(pair.nodeA);
-            const nodeB = nodeMap.get(pair.nodeB);
-            if (!nodeA || !nodeB)
-                continue;
-            const virtualId = `__ha_virtual_${i}`;
-            const widthA = options.nodeWidth;
-            const widthB = options.nodeWidth;
-            const heightA = this.calculateNodeHeight(nodeA);
-            const heightB = this.calculateNodeHeight(nodeB);
-            haVirtualNodes.set(virtualId, {
-                virtualId,
-                nodeA,
-                nodeB,
-                gap: pair.minLength ?? gap,
-                widthA,
-                widthB,
-                height: Math.max(heightA, heightB),
-            });
-        }
-        // Build edge redirect map: original node -> virtual node + side (A or B)
-        const edgeRedirect = new Map();
-        for (const [virtualId, info] of haVirtualNodes) {
-            edgeRedirect.set(info.nodeA.id, { virtualId, side: 'A' });
-            edgeRedirect.set(info.nodeB.id, { virtualId, side: 'B' });
-        }
-        // Collect all ports for each node from links
-        const nodePorts = collectNodePorts(graph);
+    buildElkGraph(graph, options, nodePorts, haPairs) {
+        const elkDirection = this.toElkDirection(options.direction);
         // Build subgraph map
         const subgraphMap = new Map();
         if (graph.subgraphs) {
@@ -159,525 +160,563 @@ export class HierarchicalLayout {
                 subgraphMap.set(sg.id, sg);
             }
         }
-        // Build node to parent map
-        const nodeParent = new Map();
-        for (const node of graph.nodes) {
-            if (node.parent) {
-                nodeParent.set(node.id, node.parent);
-            }
-        }
-        // Build subgraph children map
-        const subgraphChildren = new Map();
-        for (const sg of subgraphMap.values()) {
-            subgraphChildren.set(sg.id, []);
-        }
-        for (const sg of subgraphMap.values()) {
-            if (sg.parent && subgraphMap.has(sg.parent)) {
-                subgraphChildren.get(sg.parent).push(sg.id);
-            }
-        }
-        // Create ELK node for regular nodes
-        const createElkNode_ = (node) => {
-            const height = this.calculateNodeHeight(node);
+        // Build HA container map: node ID -> container ID
+        const nodeToHAContainer = new Map();
+        const haPairMap = new Map();
+        haPairs.forEach((pair, idx) => {
+            const containerId = `__ha_container_${idx}`;
+            nodeToHAContainer.set(pair.nodeA, containerId);
+            nodeToHAContainer.set(pair.nodeB, containerId);
+            haPairMap.set(containerId, pair);
+        });
+        // Create ELK node
+        const createElkNode = (node) => {
+            const portInfo = nodePorts.get(node.id);
+            const portCount = portInfo?.all.size || 0;
+            const height = this.calculateNodeHeight(node, portCount);
+            const width = this.calculateNodeWidth(node, portInfo);
             const elkNode = {
                 id: node.id,
-                width: options.nodeWidth,
+                width,
                 height,
                 labels: [{ text: Array.isArray(node.label) ? node.label.join('\n') : node.label }],
             };
-            // Add ports if this node has any
-            const ports = nodePorts.get(node.id);
-            if (ports && ports.size > 0) {
-                elkNode.ports = Array.from(ports).map(portName => ({
-                    id: `${node.id}:${portName}`,
-                    width: PORT_WIDTH,
-                    height: PORT_HEIGHT,
-                    labels: [{ text: portName }],
-                }));
-                elkNode.layoutOptions = { 'elk.portConstraints': 'FREE' };
-            }
-            return elkNode;
-        };
-        // Create ELK node for HA virtual node with all ports from both nodes
-        const createHAVirtualElkNode = (info) => {
-            const totalWidth = info.widthA + info.gap + info.widthB;
-            const ports = [];
-            // Add all ports from nodeA (with prefix to identify them)
-            const portsA = nodePorts.get(info.nodeA.id);
-            if (portsA) {
-                for (const portName of portsA) {
-                    ports.push({
-                        id: `${info.virtualId}:A:${portName}`,
+            // Add ports
+            if (portInfo && portInfo.all.size > 0) {
+                elkNode.ports = [];
+                // Calculate port spacing based on label width
+                const portSpacing = this.calculatePortSpacing(portInfo.all);
+                // Helper to calculate port positions centered in the node
+                const calcPortPositions = (count, totalWidth) => {
+                    if (count === 0)
+                        return [];
+                    if (count === 1)
+                        return [totalWidth / 2];
+                    const totalSpan = (count - 1) * portSpacing;
+                    const startX = (totalWidth - totalSpan) / 2;
+                    return Array.from({ length: count }, (_, i) => startX + i * portSpacing);
+                };
+                // Top ports (incoming)
+                const topPorts = Array.from(portInfo.top);
+                const topPositions = calcPortPositions(topPorts.length, width);
+                topPorts.forEach((portName, i) => {
+                    elkNode.ports.push({
+                        id: `${node.id}:${portName}`,
                         width: PORT_WIDTH,
                         height: PORT_HEIGHT,
+                        x: topPositions[i] - PORT_WIDTH / 2,
+                        y: 0,
                         labels: [{ text: portName }],
+                        layoutOptions: { 'elk.port.side': 'NORTH' },
                     });
-                }
-            }
-            // Add all ports from nodeB (with prefix to identify them)
-            const portsB = nodePorts.get(info.nodeB.id);
-            if (portsB) {
-                for (const portName of portsB) {
-                    ports.push({
-                        id: `${info.virtualId}:B:${portName}`,
+                });
+                // Bottom ports (outgoing)
+                const bottomPorts = Array.from(portInfo.bottom);
+                const bottomPositions = calcPortPositions(bottomPorts.length, width);
+                bottomPorts.forEach((portName, i) => {
+                    elkNode.ports.push({
+                        id: `${node.id}:${portName}`,
                         width: PORT_WIDTH,
                         height: PORT_HEIGHT,
+                        x: bottomPositions[i] - PORT_WIDTH / 2,
+                        y: height - PORT_HEIGHT,
                         labels: [{ text: portName }],
+                        layoutOptions: { 'elk.port.side': 'SOUTH' },
                     });
-                }
+                });
+                // Left ports (HA)
+                const leftPorts = Array.from(portInfo.left);
+                const leftPositions = calcPortPositions(leftPorts.length, height);
+                leftPorts.forEach((portName, i) => {
+                    elkNode.ports.push({
+                        id: `${node.id}:${portName}`,
+                        width: PORT_WIDTH,
+                        height: PORT_HEIGHT,
+                        x: 0,
+                        y: leftPositions[i] - PORT_HEIGHT / 2,
+                        labels: [{ text: portName }],
+                        layoutOptions: { 'elk.port.side': 'WEST' },
+                    });
+                });
+                // Right ports (HA)
+                const rightPorts = Array.from(portInfo.right);
+                const rightPositions = calcPortPositions(rightPorts.length, height);
+                rightPorts.forEach((portName, i) => {
+                    elkNode.ports.push({
+                        id: `${node.id}:${portName}`,
+                        width: PORT_WIDTH,
+                        height: PORT_HEIGHT,
+                        x: width - PORT_WIDTH,
+                        y: rightPositions[i] - PORT_HEIGHT / 2,
+                        labels: [{ text: portName }],
+                        layoutOptions: { 'elk.port.side': 'EAST' },
+                    });
+                });
+                elkNode.layoutOptions = {
+                    'elk.portConstraints': 'FIXED_POS',
+                    'elk.spacing.portPort': String(MIN_PORT_SPACING),
+                };
             }
-            // Add fallback ports if no specific ports
-            if (ports.length === 0) {
-                ports.push({ id: `${info.virtualId}:A`, width: PORT_WIDTH, height: PORT_HEIGHT }, { id: `${info.virtualId}:B`, width: PORT_WIDTH, height: PORT_HEIGHT });
+            return elkNode;
+        };
+        // Create HA container node
+        const createHAContainerNode = (containerId, pair) => {
+            const nodeA = graph.nodes.find(n => n.id === pair.nodeA);
+            const nodeB = graph.nodes.find(n => n.id === pair.nodeB);
+            if (!nodeA || !nodeB)
+                return null;
+            const childA = createElkNode(nodeA);
+            const childB = createElkNode(nodeB);
+            // Find HA link
+            const haLink = graph.links.find(link => {
+                if (!link.redundancy)
+                    return false;
+                const from = toEndpoint(link.from);
+                const to = toEndpoint(link.to);
+                const key = [from.node, to.node].sort().join(':');
+                const pairKey = [pair.nodeA, pair.nodeB].sort().join(':');
+                return key === pairKey;
+            });
+            // Create internal HA edge
+            const haEdges = [];
+            if (haLink) {
+                const from = toEndpoint(haLink.from);
+                const to = toEndpoint(haLink.to);
+                const fromPortName = from.port || 'ha';
+                const toPortName = to.port || 'ha';
+                haEdges.push({
+                    id: haLink.id || `ha-edge-${containerId}`,
+                    sources: [`${from.node}:${fromPortName}`],
+                    targets: [`${to.node}:${toPortName}`],
+                });
             }
-            const elkNode = {
-                id: info.virtualId,
-                width: totalWidth,
-                height: info.height,
-                labels: [{ text: `${info.nodeA.id} + ${info.nodeB.id}` }],
-                ports,
-                layoutOptions: { 'elk.portConstraints': 'FREE' },
+            return {
+                id: containerId,
+                children: [childA, childB],
+                edges: haEdges,
+                layoutOptions: {
+                    'elk.algorithm': 'layered',
+                    'elk.direction': 'RIGHT',
+                    'elk.spacing.nodeNode': '40',
+                    'elk.padding': '[top=0,left=0,bottom=0,right=0]',
+                    'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
+                    'elk.edgeRouting': 'POLYLINE',
+                    'org.eclipse.elk.json.edgeCoords': 'ROOT',
+                    'org.eclipse.elk.json.shapeCoords': 'ROOT',
+                },
             };
-            return elkNode;
         };
-        // Determine which subgraph each HA virtual node belongs to
-        const virtualNodeParent = new Map();
-        for (const [virtualId, info] of haVirtualNodes) {
-            // Use nodeA's parent (both should be in same subgraph for HA to make sense)
-            virtualNodeParent.set(virtualId, info.nodeA.parent);
-        }
-        // Create ELK nodes recursively for subgraphs
-        const createSubgraphNode = (subgraph) => {
+        // Track added HA containers
+        const addedHAContainers = new Set();
+        // Create ELK subgraph node recursively
+        const createSubgraphNode = (subgraph, edgesByContainer) => {
             const childNodes = [];
-            // Add child subgraphs
-            const childSgIds = subgraphChildren.get(subgraph.id) || [];
-            for (const childId of childSgIds) {
-                const childSg = subgraphMap.get(childId);
-                if (childSg) {
-                    childNodes.push(createSubgraphNode(childSg));
-                }
-            }
-            // Add HA virtual nodes that belong to this subgraph
-            for (const [virtualId, info] of haVirtualNodes) {
-                if (virtualNodeParent.get(virtualId) === subgraph.id) {
-                    childNodes.push(createHAVirtualElkNode(info));
+            for (const childSg of subgraphMap.values()) {
+                if (childSg.parent === subgraph.id) {
+                    childNodes.push(createSubgraphNode(childSg, edgesByContainer));
                 }
             }
-            // Add regular nodes in this subgraph (skip nodes in HA pairs)
             for (const node of graph.nodes) {
-                if (node.parent === subgraph.id && !nodesInHAPairs.has(node.id)) {
-                    childNodes.push(createElkNode_(node));
+                if (node.parent === subgraph.id) {
+                    const containerId = nodeToHAContainer.get(node.id);
+                    if (containerId) {
+                        if (!addedHAContainers.has(containerId)) {
+                            addedHAContainers.add(containerId);
+                            const pair = haPairMap.get(containerId);
+                            if (pair) {
+                                const containerNode = createHAContainerNode(containerId, pair);
+                                if (containerNode)
+                                    childNodes.push(containerNode);
+                            }
+                        }
+                    }
+                    else {
+                        childNodes.push(createElkNode(node));
+                    }
                 }
             }
             const sgPadding = subgraph.style?.padding ?? options.subgraphPadding;
-            const sgNodeSpacing = subgraph.style?.nodeSpacing ?? options.nodeSpacing;
-            const sgRankSpacing = subgraph.style?.rankSpacing ?? options.rankSpacing;
+            const sgEdges = edgesByContainer.get(subgraph.id) || [];
             return {
                 id: subgraph.id,
                 labels: [{ text: subgraph.label }],
                 children: childNodes,
+                edges: sgEdges,
                 layoutOptions: {
                     'elk.padding': `[top=${sgPadding + options.subgraphLabelHeight},left=${sgPadding},bottom=${sgPadding},right=${sgPadding}]`,
-                    'elk.spacing.nodeNode': String(sgNodeSpacing),
-                    'elk.layered.spacing.nodeNodeBetweenLayers': String(sgRankSpacing),
                 },
             };
         };
         // Build root children
-        const rootChildren = [];
-        // Add root-level subgraphs
-        for (const sg of subgraphMap.values()) {
-            if (!sg.parent || !subgraphMap.has(sg.parent)) {
-                rootChildren.push(createSubgraphNode(sg));
-            }
-        }
-        // Add root-level HA virtual nodes
-        for (const [virtualId, info] of haVirtualNodes) {
-            if (!virtualNodeParent.get(virtualId) || !subgraphMap.has(virtualNodeParent.get(virtualId))) {
-                rootChildren.push(createHAVirtualElkNode(info));
-            }
-        }
-        // Add root-level nodes (skip nodes in HA pairs)
-        for (const node of graph.nodes) {
-            if (nodesInHAPairs.has(node.id))
-                continue;
-            if (!node.parent || !subgraphMap.has(node.parent)) {
-                rootChildren.push(createElkNode_(node));
-            }
-        }
-        // Build edges with redirects for HA nodes
-        const edges = graph.links
-            .filter(link => {
-            // Skip HA internal links (the link connecting the HA pair nodes themselves)
-            const fromId = getNodeId(link.from);
-            const toId = getNodeId(link.to);
-            for (const pair of haPairs) {
-                if ((pair.nodeA === fromId && pair.nodeB === toId) ||
-                    (pair.nodeA === toId && pair.nodeB === fromId)) {
-                    return false;
+        const buildRootChildren = (edgesByContainer) => {
+            const children = [];
+            for (const sg of subgraphMap.values()) {
+                if (!sg.parent || !subgraphMap.has(sg.parent)) {
+                    children.push(createSubgraphNode(sg, edgesByContainer));
                 }
             }
-            return true;
-        })
-            .map((link, index) => {
-            const fromEndpoint = toEndpoint(link.from);
-            const toEndpoint_ = toEndpoint(link.to);
-            // Redirect endpoints if they're in HA pairs (preserve port names)
-            let sourceId;
-            let targetId;
-            const fromRedirect = edgeRedirect.get(fromEndpoint.node);
-            const toRedirect = edgeRedirect.get(toEndpoint_.node);
-            if (fromRedirect) {
-                // Redirect to virtual node, preserving port name if any
-                if (fromEndpoint.port) {
-                    sourceId = `${fromRedirect.virtualId}:${fromRedirect.side}:${fromEndpoint.port}`;
-                }
-                else {
-                    sourceId = `${fromRedirect.virtualId}:${fromRedirect.side}`;
+            for (const node of graph.nodes) {
+                if (!node.parent || !subgraphMap.has(node.parent)) {
+                    const containerId = nodeToHAContainer.get(node.id);
+                    if (containerId) {
+                        if (!addedHAContainers.has(containerId)) {
+                            addedHAContainers.add(containerId);
+                            const pair = haPairMap.get(containerId);
+                            if (pair) {
+                                const containerNode = createHAContainerNode(containerId, pair);
+                                if (containerNode)
+                                    children.push(containerNode);
+                            }
+                        }
+                    }
+                    else {
+                        children.push(createElkNode(node));
+                    }
                 }
             }
-            else if (fromEndpoint.port) {
-                sourceId = `${fromEndpoint.node}:${fromEndpoint.port}`;
-            }
-            else {
-                sourceId = fromEndpoint.node;
-            }
-            if (toRedirect) {
-                // Redirect to virtual node, preserving port name if any
-                if (toEndpoint_.port) {
-                    targetId = `${toRedirect.virtualId}:${toRedirect.side}:${toEndpoint_.port}`;
-                }
-                else {
-                    targetId = `${toRedirect.virtualId}:${toRedirect.side}`;
+            return children;
+        };
+        // Build node to parent map
+        const nodeParentMap = new Map();
+        for (const node of graph.nodes) {
+            nodeParentMap.set(node.id, node.parent);
+        }
+        // Find LCA (Lowest Common Ancestor) of two nodes
+        const findLCA = (nodeA, nodeB) => {
+            const ancestorsA = new Set();
+            let current = nodeA;
+            while (current) {
+                ancestorsA.add(current);
+                current = nodeParentMap.get(current);
+            }
+            ancestorsA.add(undefined); // root
+            current = nodeB;
+            while (current !== undefined) {
+                if (ancestorsA.has(current)) {
+                    return current;
                 }
+                current = nodeParentMap.get(current);
             }
-            else if (toEndpoint_.port) {
-                targetId = `${toEndpoint_.node}:${toEndpoint_.port}`;
-            }
-            else {
-                targetId = toEndpoint_.node;
+            return undefined; // root
+        };
+        // Build HA pair set for quick lookup
+        const haPairSet = new Set();
+        for (const pair of haPairs) {
+            haPairSet.add([pair.nodeA, pair.nodeB].sort().join(':'));
+        }
+        const isHALink = (fromNode, toNode) => {
+            const key = [fromNode, toNode].sort().join(':');
+            return haPairSet.has(key);
+        };
+        // Group edges by their LCA container (skip HA links - they're in containers)
+        const edgesByContainer = new Map();
+        edgesByContainer.set('root', []);
+        for (const sg of subgraphMap.values()) {
+            edgesByContainer.set(sg.id, []);
+        }
+        graph.links.forEach((link, index) => {
+            const from = toEndpoint(link.from);
+            const to = toEndpoint(link.to);
+            // Skip HA links (they're inside HA containers)
+            if (link.redundancy && isHALink(from.node, to.node)) {
+                return;
             }
+            const sourceId = from.port ? `${from.node}:${from.port}` : from.node;
+            const targetId = to.port ? `${to.node}:${to.port}` : to.node;
             const edge = {
                 id: link.id || `edge-${index}`,
                 sources: [sourceId],
                 targets: [targetId],
             };
-            // Build label
+            // Add label
             const labelParts = [];
             if (link.label) {
                 labelParts.push(Array.isArray(link.label) ? link.label.join(' / ') : link.label);
             }
-            if (fromEndpoint.ip)
-                labelParts.push(fromEndpoint.ip);
-            if (toEndpoint_.ip)
-                labelParts.push(toEndpoint_.ip);
+            if (from.ip)
+                labelParts.push(from.ip);
+            if (to.ip)
+                labelParts.push(to.ip);
             if (labelParts.length > 0) {
                 edge.labels = [{
                         text: labelParts.join('\n'),
                         layoutOptions: { 'elk.edgeLabels.placement': 'CENTER' }
                     }];
             }
-            return edge;
+            // Find LCA and place edge in appropriate container
+            const lca = findLCA(from.node, to.node);
+            let container = lca;
+            if (container === from.node || container === to.node) {
+                container = nodeParentMap.get(container);
+            }
+            const containerId = container && subgraphMap.has(container) ? container : 'root';
+            edgesByContainer.get(containerId).push(edge);
         });
-        // Root graph
+        // Dynamic edge spacing
+        const edgeNodeSpacing = Math.max(10, Math.round(options.nodeSpacing * 0.4));
+        const edgeEdgeSpacing = Math.max(8, Math.round(options.nodeSpacing * 0.25));
+        // Root layout options
         const rootLayoutOptions = {
             'elk.algorithm': 'layered',
             'elk.direction': elkDirection,
             'elk.spacing.nodeNode': String(options.nodeSpacing),
             'elk.layered.spacing.nodeNodeBetweenLayers': String(options.rankSpacing),
-            'elk.spacing.edgeNode': '50',
-            'elk.spacing.edgeEdge': '20',
+            'elk.spacing.edgeNode': String(edgeNodeSpacing),
+            'elk.spacing.edgeEdge': String(edgeEdgeSpacing),
+            'elk.layered.compaction.postCompaction.strategy': 'EDGE_LENGTH',
+            'elk.layered.compaction.connectedComponents': 'true',
             'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
             'elk.layered.crossingMinimization.strategy': 'LAYER_SWEEP',
-            'elk.edgeRouting': 'SPLINES',
+            'elk.edgeRouting': 'ORTHOGONAL',
             'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+            // Use ROOT coordinate system
+            'org.eclipse.elk.json.edgeCoords': 'ROOT',
+            'org.eclipse.elk.json.shapeCoords': 'ROOT',
         };
+        // Build the graph with edges in correct containers
+        const rootChildren = buildRootChildren(edgesByContainer);
+        const rootEdges = edgesByContainer.get('root') || [];
         return {
-            elkGraph: {
-                id: 'root',
-                children: rootChildren,
-                edges,
-                layoutOptions: rootLayoutOptions,
-            },
-            haVirtualNodes,
+            id: 'root',
+            children: rootChildren,
+            edges: rootEdges,
+            layoutOptions: rootLayoutOptions,
         };
     }
     /**
-     * Extract layout result and expand HA virtual nodes back to original pairs
+     * Extract layout result from ELK output - uses ELK's edge routing directly
      */
-    extractLayoutResultWithHAExpand(graph, elkGraph, haVirtualNodes, _options) {
+    extractLayoutResult(graph, elkGraph, nodePorts, _options) {
         const layoutNodes = new Map();
         const layoutSubgraphs = new Map();
         const layoutLinks = new Map();
-        // Build subgraph map for reference
+        // Build maps
         const subgraphMap = new Map();
         if (graph.subgraphs) {
             for (const sg of graph.subgraphs) {
                 subgraphMap.set(sg.id, sg);
             }
         }
-        // Extract node and subgraph positions recursively
-        const processElkNode = (elkNode, offsetX, offsetY) => {
-            const x = (elkNode.x || 0) + offsetX;
-            const y = (elkNode.y || 0) + offsetY;
+        const nodeMap = new Map();
+        for (const node of graph.nodes) {
+            nodeMap.set(node.id, node);
+        }
+        // Process ELK nodes recursively
+        // With shapeCoords=ROOT, all coordinates are absolute (no offset needed)
+        const processElkNode = (elkNode) => {
+            const x = elkNode.x || 0;
+            const y = elkNode.y || 0;
             const width = elkNode.width || 0;
             const height = elkNode.height || 0;
-            // Check if this is an HA virtual node
-            const haInfo = haVirtualNodes.get(elkNode.id);
-            if (haInfo) {
-                // Expand virtual node back to original pair
-                // Position nodeA on the left, nodeB on the right
-                const heightA = this.calculateNodeHeight(haInfo.nodeA);
-                const heightB = this.calculateNodeHeight(haInfo.nodeB);
-                const nodeAX = x + haInfo.widthA / 2;
-                const nodeBX = x + haInfo.widthA + haInfo.gap + haInfo.widthB / 2;
-                const centerY = y + height / 2;
-                // Create layout nodes for A and B
-                const layoutNodeA = {
-                    id: haInfo.nodeA.id,
-                    position: { x: nodeAX, y: centerY },
-                    size: { width: haInfo.widthA, height: heightA },
-                    node: haInfo.nodeA,
-                };
-                const layoutNodeB = {
-                    id: haInfo.nodeB.id,
-                    position: { x: nodeBX, y: centerY },
-                    size: { width: haInfo.widthB, height: heightB },
-                    node: haInfo.nodeB,
-                };
-                // For HA nodes, calculate port positions ourselves
-                // We need to determine which ports are for incoming vs outgoing edges
-                // Build maps of ports for each node (A and B), grouped by edge direction
-                const portsForATop = [];
-                const portsForABottom = [];
-                const portsForARight = []; // For HA link (facing B)
-                const portsForBTop = [];
-                const portsForBBottom = [];
-                const portsForBLeft = []; // For HA link (facing A)
-                // Analyze links to determine port direction
-                for (const link of graph.links) {
-                    const fromEndpoint = toEndpoint(link.from);
-                    const toEndpoint_ = toEndpoint(link.to);
-                    // HA internal link - ports go on inner sides (A's right, B's left)
-                    if (link.redundancy) {
-                        if (fromEndpoint.node === haInfo.nodeA.id && fromEndpoint.port) {
-                            portsForARight.push({ name: fromEndpoint.port, portW: PORT_WIDTH, portH: PORT_HEIGHT });
-                        }
-                        if (toEndpoint_.node === haInfo.nodeA.id && toEndpoint_.port) {
-                            portsForARight.push({ name: toEndpoint_.port, portW: PORT_WIDTH, portH: PORT_HEIGHT });
-                        }
-                        if (fromEndpoint.node === haInfo.nodeB.id && fromEndpoint.port) {
-                            portsForBLeft.push({ name: fromEndpoint.port, portW: PORT_WIDTH, portH: PORT_HEIGHT });
-                        }
-                        if (toEndpoint_.node === haInfo.nodeB.id && toEndpoint_.port) {
-                            portsForBLeft.push({ name: toEndpoint_.port, portW: PORT_WIDTH, portH: PORT_HEIGHT });
-                        }
-                        continue;
-                    }
-                    // Check if this link involves nodeA
-                    if (fromEndpoint.node === haInfo.nodeA.id && fromEndpoint.port) {
-                        // Outgoing from A → bottom
-                        portsForABottom.push({ name: fromEndpoint.port, portW: PORT_WIDTH, portH: PORT_HEIGHT });
-                    }
-                    if (toEndpoint_.node === haInfo.nodeA.id && toEndpoint_.port) {
-                        // Incoming to A → top
-                        portsForATop.push({ name: toEndpoint_.port, portW: PORT_WIDTH, portH: PORT_HEIGHT });
-                    }
-                    // Check if this link involves nodeB
-                    if (fromEndpoint.node === haInfo.nodeB.id && fromEndpoint.port) {
-                        // Outgoing from B → bottom
-                        portsForBBottom.push({ name: fromEndpoint.port, portW: PORT_WIDTH, portH: PORT_HEIGHT });
-                    }
-                    if (toEndpoint_.node === haInfo.nodeB.id && toEndpoint_.port) {
-                        // Incoming to B → top
-                        portsForBTop.push({ name: toEndpoint_.port, portW: PORT_WIDTH, portH: PORT_HEIGHT });
-                    }
-                }
-                // Distribute ports on an edge (top/bottom/left/right) - ports placed OUTSIDE the node
-                const distributePortsOnEdge = (portsList, nodeWidth, nodeHeight, nodeId, side) => {
-                    const result = new Map();
-                    if (portsList.length === 0)
-                        return result;
-                    portsList.forEach((p, i) => {
-                        let relX;
-                        let relY;
-                        if (side === 'top' || side === 'bottom') {
-                            // Horizontal distribution along top/bottom edge
-                            const portSpacing = nodeWidth / (portsList.length + 1);
-                            relX = portSpacing * (i + 1) - nodeWidth / 2;
-                            // Place port completely outside the node
-                            relY = side === 'top'
-                                ? -nodeHeight / 2 - p.portH / 2 // Above the node
-                                : nodeHeight / 2 + p.portH / 2; // Below the node
-                        }
-                        else {
-                            // Vertical distribution along left/right edge
-                            const portSpacing = nodeHeight / (portsList.length + 1);
-                            relY = portSpacing * (i + 1) - nodeHeight / 2;
-                            // Place port completely outside the node
-                            relX = side === 'left'
-                                ? -nodeWidth / 2 - p.portW / 2 // Left of the node
-                                : nodeWidth / 2 + p.portW / 2; // Right of the node
-                        }
-                        const originalPortId = `${nodeId}:${p.name}`;
-                        result.set(originalPortId, {
-                            id: originalPortId,
-                            label: p.name,
-                            position: { x: relX, y: relY },
-                            size: { width: p.portW, height: p.portH },
-                            side,
-                        });
-                    });
-                    return result;
-                };
-                // Create port maps for A and B
-                // For nodeA (left side of HA pair): ports should be positioned toward the inner side (right)
-                // For nodeB (right side of HA pair): ports should be positioned toward the inner side (left)
-                // This reduces line crossings when connecting to centered nodes below/above
-                const portsMapA = new Map();
-                // For nodeA: reverse the port order so inner ports (right side) come first
-                const topPortsA = distributePortsOnEdge([...portsForATop].reverse(), haInfo.widthA, heightA, haInfo.nodeA.id, 'top');
-                const bottomPortsA = distributePortsOnEdge([...portsForABottom].reverse(), haInfo.widthA, heightA, haInfo.nodeA.id, 'bottom');
-                const rightPortsA = distributePortsOnEdge(portsForARight, haInfo.widthA, heightA, haInfo.nodeA.id, 'right');
-                for (const [k, v] of topPortsA)
-                    portsMapA.set(k, v);
-                for (const [k, v] of bottomPortsA)
-                    portsMapA.set(k, v);
-                for (const [k, v] of rightPortsA)
-                    portsMapA.set(k, v);
-                const portsMapB = new Map();
-                // For nodeB: keep normal order so inner ports (left side) come first
-                const topPortsB = distributePortsOnEdge(portsForBTop, haInfo.widthB, heightB, haInfo.nodeB.id, 'top');
-                const bottomPortsB = distributePortsOnEdge(portsForBBottom, haInfo.widthB, heightB, haInfo.nodeB.id, 'bottom');
-                const leftPortsB = distributePortsOnEdge(portsForBLeft, haInfo.widthB, heightB, haInfo.nodeB.id, 'left');
-                for (const [k, v] of topPortsB)
-                    portsMapB.set(k, v);
-                for (const [k, v] of bottomPortsB)
-                    portsMapB.set(k, v);
-                for (const [k, v] of leftPortsB)
-                    portsMapB.set(k, v);
-                if (portsMapA.size > 0)
-                    layoutNodeA.ports = portsMapA;
-                if (portsMapB.size > 0)
-                    layoutNodeB.ports = portsMapB;
-                layoutNodes.set(haInfo.nodeA.id, layoutNodeA);
-                layoutNodes.set(haInfo.nodeB.id, layoutNodeB);
-            }
-            else if (subgraphMap.has(elkNode.id)) {
-                // This is a subgraph
+            if (subgraphMap.has(elkNode.id)) {
+                // Subgraph
                 const sg = subgraphMap.get(elkNode.id);
                 layoutSubgraphs.set(elkNode.id, {
                     id: elkNode.id,
                     bounds: { x, y, width, height },
                     subgraph: sg,
                 });
-                // Process children
                 if (elkNode.children) {
                     for (const child of elkNode.children) {
-                        processElkNode(child, x, y);
+                        processElkNode(child);
                     }
                 }
             }
-            else {
-                // This is a regular node
-                const node = graph.nodes.find(n => n.id === elkNode.id);
-                if (node) {
-                    const layoutNode = {
-                        id: elkNode.id,
-                        position: { x: x + width / 2, y: y + height / 2 },
-                        size: { width, height },
-                        node,
-                    };
-                    // Extract port positions if any
-                    // Note: Ports will be repositioned by reorderPortsByConnectedNodePositions later
-                    if (elkNode.ports && elkNode.ports.length > 0) {
-                        layoutNode.ports = new Map();
-                        for (const elkPort of elkNode.ports) {
-                            const portX = (elkPort.x ?? 0);
-                            const portY = (elkPort.y ?? 0);
-                            const portW = elkPort.width ?? PORT_WIDTH;
-                            const portH = elkPort.height ?? PORT_HEIGHT;
-                            // Determine which side based on ELK position
-                            let side = 'bottom';
-                            if (portY <= portH)
-                                side = 'top';
-                            else if (portY >= height - portH * 2)
-                                side = 'bottom';
-                            else if (portX <= portW)
-                                side = 'left';
-                            else if (portX >= width - portW * 2)
-                                side = 'right';
-                            const portName = elkPort.id.includes(':')
-                                ? elkPort.id.split(':').slice(1).join(':')
-                                : elkPort.id;
-                            // Calculate position outside the node edge
-                            let relX;
-                            let relY;
-                            if (side === 'top') {
-                                relX = portX - width / 2 + portW / 2;
-                                relY = -height / 2 - portH / 2;
-                            }
-                            else if (side === 'bottom') {
-                                relX = portX - width / 2 + portW / 2;
-                                relY = height / 2 + portH / 2;
-                            }
-                            else if (side === 'left') {
-                                relX = -width / 2 - portW / 2;
-                                relY = portY - height / 2 + portH / 2;
-                            }
-                            else {
-                                relX = width / 2 + portW / 2;
-                                relY = portY - height / 2 + portH / 2;
-                            }
-                            layoutNode.ports.set(elkPort.id, {
-                                id: elkPort.id,
-                                label: portName,
-                                position: { x: relX, y: relY },
-                                size: { width: portW, height: portH },
-                                side,
-                            });
+            else if (elkNode.id.startsWith('__ha_container_')) {
+                // HA container - process children
+                if (elkNode.children) {
+                    for (const child of elkNode.children) {
+                        processElkNode(child);
+                    }
+                }
+            }
+            else if (nodeMap.has(elkNode.id)) {
+                // Regular node
+                const node = nodeMap.get(elkNode.id);
+                const portInfo = nodePorts.get(node.id);
+                const nodeHeight = this.calculateNodeHeight(node, portInfo?.all.size || 0);
+                const layoutNode = {
+                    id: elkNode.id,
+                    position: { x: x + width / 2, y: y + nodeHeight / 2 },
+                    size: { width, height: nodeHeight },
+                    node,
+                };
+                // Extract port positions from ELK
+                if (elkNode.ports && elkNode.ports.length > 0) {
+                    layoutNode.ports = new Map();
+                    const nodeCenterX = x + width / 2;
+                    const nodeCenterY = y + nodeHeight / 2;
+                    for (const elkPort of elkNode.ports) {
+                        const portX = elkPort.x ?? 0;
+                        const portY = elkPort.y ?? 0;
+                        const portW = elkPort.width ?? PORT_WIDTH;
+                        const portH = elkPort.height ?? PORT_HEIGHT;
+                        const portCenterX = portX + portW / 2;
+                        const portCenterY = portY + portH / 2;
+                        const relX = portCenterX - nodeCenterX;
+                        const relY = portCenterY - nodeCenterY;
+                        // Determine side based on which edge the port is closest to
+                        // Use node boundaries, not relative distance from center
+                        const distToTop = Math.abs(portCenterY - y);
+                        const distToBottom = Math.abs(portCenterY - (y + nodeHeight));
+                        const distToLeft = Math.abs(portCenterX - x);
+                        const distToRight = Math.abs(portCenterX - (x + width));
+                        const minDist = Math.min(distToTop, distToBottom, distToLeft, distToRight);
+                        let side = 'bottom';
+                        if (minDist === distToTop) {
+                            side = 'top';
+                        }
+                        else if (minDist === distToBottom) {
+                            side = 'bottom';
                         }
+                        else if (minDist === distToLeft) {
+                            side = 'left';
+                        }
+                        else {
+                            side = 'right';
+                        }
+                        const portName = elkPort.id.includes(':') ? elkPort.id.split(':').slice(1).join(':') : elkPort.id;
+                        layoutNode.ports.set(elkPort.id, {
+                            id: elkPort.id,
+                            label: portName,
+                            position: { x: relX, y: relY },
+                            size: { width: portW, height: portH },
+                            side,
+                        });
                     }
-                    layoutNodes.set(elkNode.id, layoutNode);
                 }
+                layoutNodes.set(elkNode.id, layoutNode);
             }
         };
-        // Process root children
+        // Process root children (coordinates are absolute with shapeCoords=ROOT)
         if (elkGraph.children) {
             for (const child of elkGraph.children) {
-                processElkNode(child, 0, 0);
+                processElkNode(child);
             }
         }
-        // Post-process: reorder ports based on connected node positions to minimize crossings
-        this.reorderPortsByConnectedNodePositions(graph, layoutNodes);
-        // Calculate edges based on extracted node positions
+        // Build link map for ID matching
+        const linkById = new Map();
+        graph.links.forEach((link, index) => {
+            linkById.set(link.id || `edge-${index}`, { link, index });
+        });
+        // Track processed edges to prevent duplicates
+        const processedEdgeIds = new Set();
+        // Check if container is an HA container
+        const isHAContainer = (id) => id.startsWith('__ha_container_');
+        // Process edges from a container
+        // With edgeCoords=ROOT, all edge coordinates are absolute (no offset needed)
+        const processEdgesInContainer = (container) => {
+            const elkEdges = container.edges;
+            if (elkEdges) {
+                for (const elkEdge of elkEdges) {
+                    // Skip if already processed
+                    if (processedEdgeIds.has(elkEdge.id))
+                        continue;
+                    processedEdgeIds.add(elkEdge.id);
+                    const entry = linkById.get(elkEdge.id);
+                    if (!entry)
+                        continue;
+                    const { link, index } = entry;
+                    const id = link.id || `link-${index}`;
+                    const fromEndpoint = toEndpoint(link.from);
+                    const toEndpoint_ = toEndpoint(link.to);
+                    const fromNode = layoutNodes.get(fromEndpoint.node);
+                    const toNode = layoutNodes.get(toEndpoint_.node);
+                    if (!fromNode || !toNode)
+                        continue;
+                    let points = [];
+                    // HA edges inside HA containers: use ELK's edge routing directly
+                    if (isHAContainer(container.id) && elkEdge.sections && elkEdge.sections.length > 0) {
+                        const section = elkEdge.sections[0];
+                        points.push({ x: section.startPoint.x, y: section.startPoint.y });
+                        if (section.bendPoints) {
+                            for (const bp of section.bendPoints) {
+                                points.push({ x: bp.x, y: bp.y });
+                            }
+                        }
+                        points.push({ x: section.endPoint.x, y: section.endPoint.y });
+                    }
+                    else if (!isHAContainer(container.id)) {
+                        // Normal vertical edges
+                        const fromBottomY = fromNode.position.y + fromNode.size.height / 2;
+                        const toTopY = toNode.position.y - toNode.size.height / 2;
+                        if (elkEdge.sections && elkEdge.sections.length > 0) {
+                            const section = elkEdge.sections[0];
+                            points.push({
+                                x: section.startPoint.x,
+                                y: fromBottomY,
+                            });
+                            if (section.bendPoints) {
+                                for (const bp of section.bendPoints) {
+                                    points.push({ x: bp.x, y: bp.y });
+                                }
+                            }
+                            points.push({
+                                x: section.endPoint.x,
+                                y: toTopY,
+                            });
+                        }
+                        else {
+                            points = this.generateOrthogonalPath({ x: fromNode.position.x, y: fromBottomY }, { x: toNode.position.x, y: toTopY });
+                        }
+                    }
+                    else {
+                        // HA edge fallback: simple horizontal line
+                        const leftNode = fromNode.position.x < toNode.position.x ? fromNode : toNode;
+                        const rightNode = fromNode.position.x < toNode.position.x ? toNode : fromNode;
+                        const y = (leftNode.position.y + rightNode.position.y) / 2;
+                        points = [
+                            { x: leftNode.position.x + leftNode.size.width / 2, y },
+                            { x: rightNode.position.x - rightNode.size.width / 2, y },
+                        ];
+                    }
+                    layoutLinks.set(id, {
+                        id,
+                        from: fromEndpoint.node,
+                        to: toEndpoint_.node,
+                        fromEndpoint,
+                        toEndpoint: toEndpoint_,
+                        points,
+                        link,
+                    });
+                }
+            }
+            // Recursively process child containers (subgraphs and HA containers)
+            if (container.children) {
+                for (const child of container.children) {
+                    if (subgraphMap.has(child.id) || child.id.startsWith('__ha_container_')) {
+                        processEdgesInContainer(child);
+                    }
+                }
+            }
+        };
+        // Process all edges (coordinates are absolute with edgeCoords=ROOT)
+        processEdgesInContainer(elkGraph);
+        // Fallback for any missing links
         graph.links.forEach((link, index) => {
             const id = link.id || `link-${index}`;
-            const fromEndpoint_ = toEndpoint(link.from);
+            if (layoutLinks.has(id))
+                return;
+            const fromEndpoint = toEndpoint(link.from);
             const toEndpoint_ = toEndpoint(link.to);
-            const fromId = fromEndpoint_.node;
-            const toId = toEndpoint_.node;
-            const fromNode = layoutNodes.get(fromId);
-            const toNode = layoutNodes.get(toId);
+            const fromNode = layoutNodes.get(fromEndpoint.node);
+            const toNode = layoutNodes.get(toEndpoint_.node);
             if (!fromNode || !toNode)
                 return;
-            // Get port positions if specified
-            const fromPortId = fromEndpoint_.port ? `${fromId}:${fromEndpoint_.port}` : undefined;
-            const toPortId = toEndpoint_.port ? `${toId}:${toEndpoint_.port}` : undefined;
-            const fromPort = fromPortId ? fromNode.ports?.get(fromPortId) : undefined;
-            const toPort = toPortId ? toNode.ports?.get(toPortId) : undefined;
-            const points = this.calculateEdgePathWithPorts(fromNode, toNode, fromPort, toPort);
+            const startY = fromNode.position.y + fromNode.size.height / 2;
+            const endY = toNode.position.y - toNode.size.height / 2;
+            const points = this.generateOrthogonalPath({ x: fromNode.position.x, y: startY }, { x: toNode.position.x, y: endY });
             layoutLinks.set(id, {
                 id,
-                from: fromId,
-                to: toId,
-                fromEndpoint: fromEndpoint_,
+                from: fromEndpoint.node,
+                to: toEndpoint_.node,
+                fromEndpoint,
                 toEndpoint: toEndpoint_,
                 points,
                 link,
             });
         });
-        // Calculate total bounds
+        // Calculate bounds
         const bounds = this.calculateTotalBounds(layoutNodes, layoutSubgraphs);
         return {
             nodes: layoutNodes,
@@ -686,109 +725,14 @@ export class HierarchicalLayout {
             bounds,
         };
     }
-    /**
-     * Reorder ports on each node based on connected node positions to minimize edge crossings
-     */
-    reorderPortsByConnectedNodePositions(graph, layoutNodes) {
-        // Build a map of port -> connected node position
-        // For each port, find the node it connects to and get that node's position
-        const portConnections = new Map();
-        for (const link of graph.links) {
-            const fromEndpoint = toEndpoint(link.from);
-            const toEndpoint_ = toEndpoint(link.to);
-            // From port connects to "to" node
-            if (fromEndpoint.port) {
-                const portId = `${fromEndpoint.node}:${fromEndpoint.port}`;
-                portConnections.set(portId, { connectedNodeId: toEndpoint_.node, isOutgoing: true });
-            }
-            // To port connects to "from" node
-            if (toEndpoint_.port) {
-                const portId = `${toEndpoint_.node}:${toEndpoint_.port}`;
-                portConnections.set(portId, { connectedNodeId: fromEndpoint.node, isOutgoing: false });
-            }
-        }
-        // For each node, reorder its ports based on connected node positions
-        layoutNodes.forEach((layoutNode) => {
-            if (!layoutNode.ports || layoutNode.ports.size === 0)
-                return;
-            // Group ports by side
-            const portsBySide = new Map();
-            layoutNode.ports.forEach((port, portId) => {
-                const side = port.side;
-                if (!portsBySide.has(side)) {
-                    portsBySide.set(side, []);
-                }
-                portsBySide.get(side).push({ portId, port });
-            });
-            // Sort and redistribute ports on each side
-            portsBySide.forEach((ports, side) => {
-                if (ports.length <= 1)
-                    return; // No need to reorder single port
-                // Sort ports by connected node position
-                ports.sort((a, b) => {
-                    const connA = portConnections.get(a.portId);
-                    const connB = portConnections.get(b.portId);
-                    if (!connA || !connB)
-                        return 0;
-                    const nodeA = layoutNodes.get(connA.connectedNodeId);
-                    const nodeB = layoutNodes.get(connB.connectedNodeId);
-                    if (!nodeA || !nodeB)
-                        return 0;
-                    // For top/bottom sides, sort by X position (left to right)
-                    if (side === 'top' || side === 'bottom') {
-                        return nodeA.position.x - nodeB.position.x;
-                    }
-                    // For left/right sides, sort by Y position (top to bottom)
-                    return nodeA.position.y - nodeB.position.y;
-                });
-                // Redistribute port positions along the edge (ports placed OUTSIDE the node)
-                const nodeWidth = layoutNode.size.width;
-                const nodeHeight = layoutNode.size.height;
-                if (side === 'top' || side === 'bottom') {
-                    const portSpacing = nodeWidth / (ports.length + 1);
-                    ports.forEach((p, i) => {
-                        const relX = portSpacing * (i + 1) - nodeWidth / 2;
-                        // Place port completely outside the node edge
-                        const relY = side === 'top'
-                            ? -nodeHeight / 2 - p.port.size.height / 2 // Above the node
-                            : nodeHeight / 2 + p.port.size.height / 2; // Below the node
-                        p.port.position = { x: relX, y: relY };
-                    });
-                }
-                else {
-                    const portSpacing = nodeHeight / (ports.length + 1);
-                    ports.forEach((p, i) => {
-                        const relY = portSpacing * (i + 1) - nodeHeight / 2;
-                        // Place port completely outside the node edge
-                        const relX = side === 'left'
-                            ? -nodeWidth / 2 - p.port.size.width / 2 // Left of the node
-                            : nodeWidth / 2 + p.port.size.width / 2; // Right of the node
-                        p.port.position = { x: relX, y: relY };
-                    });
-                }
-            });
-        });
-    }
-    // Synchronous wrapper that runs async internally
+    // Synchronous wrapper
     layout(graph) {
-        // For sync compatibility, we need to run layout synchronously
-        // This is a simplified version - ideally use layoutAsync for full HA support
-        const effectiveOptions = this.getEffectiveOptions(graph);
-        const direction = effectiveOptions.direction;
-        const haPairs = this.detectHAPairs(graph);
-        // Build ELK graph with HA merge (same as async)
-        const { elkGraph, haVirtualNodes } = this.buildElkGraphWithHAMerge(graph, direction, effectiveOptions, haPairs);
-        // Run synchronous layout using elk's sync API
-        let result;
-        // Use a workaround: pre-calculate positions based on structure
-        result = this.calculateFallbackLayout(graph, direction);
-        // Start async layout and update when done (for future renders)
-        this.elk.layout(elkGraph).then((layoutedGraph) => {
-            // This will be available for next render
-            Object.assign(result, this.extractLayoutResultWithHAExpand(graph, layoutedGraph, haVirtualNodes, effectiveOptions));
-        }).catch(() => {
-            // Keep fallback layout
-        });
+        const options = this.getEffectiveOptions(graph);
+        const result = this.calculateFallbackLayout(graph, options.direction);
+        // Start async layout
+        this.layoutAsync(graph).then((asyncResult) => {
+            Object.assign(result, asyncResult);
+        }).catch(() => { });
         return result;
     }
     toElkDirection(direction) {
@@ -800,175 +744,183 @@ export class HierarchicalLayout {
             default: return 'DOWN';
         }
     }
-    calculateNodeHeight(node) {
+    calculateNodeHeight(node, portCount = 0) {
         const lines = Array.isArray(node.label) ? node.label.length : 1;
-        const baseHeight = 40;
-        const lineHeight = 16;
-        // Calculate actual icon height based on vendor icon or default
+        const labelHeight = lines * LABEL_LINE_HEIGHT;
+        const labels = Array.isArray(node.label) ? node.label : [node.label];
+        const maxLabelLength = Math.max(...labels.map(l => l.length));
+        const labelWidth = maxLabelLength * ESTIMATED_CHAR_WIDTH;
+        const portWidth = portCount > 0 ? (portCount + 1) * MIN_PORT_SPACING : 0;
+        const baseContentWidth = Math.max(labelWidth, portWidth);
+        const baseNodeWidth = Math.max(this.options.nodeWidth, baseContentWidth + NODE_HORIZONTAL_PADDING);
+        const maxIconWidth = Math.round(baseNodeWidth * MAX_ICON_WIDTH_RATIO);
         let iconHeight = 0;
         const iconKey = node.service || node.model;
         if (node.vendor && iconKey) {
             const iconEntry = getVendorIconEntry(node.vendor, iconKey, node.resource);
             if (iconEntry) {
-                const defaultIconSize = 40;
-                const iconPadding = 16;
-                const maxIconWidth = this.options.nodeWidth - iconPadding;
                 const vendorIcon = iconEntry.default;
                 const viewBox = iconEntry.viewBox || '0 0 48 48';
-                // Check for PNG-based icons with embedded viewBox
                 if (vendorIcon.startsWith('<svg')) {
                     const viewBoxMatch = vendorIcon.match(/viewBox="0 0 (\d+) (\d+)"/);
                     if (viewBoxMatch) {
                         const vbWidth = parseInt(viewBoxMatch[1]);
                         const vbHeight = parseInt(viewBoxMatch[2]);
                         const aspectRatio = vbWidth / vbHeight;
-                        let calcHeight = defaultIconSize;
-                        if (Math.round(defaultIconSize * aspectRatio) > maxIconWidth) {
-                            calcHeight = Math.round(maxIconWidth / aspectRatio);
+                        let iconWidth = Math.round(DEFAULT_ICON_SIZE * aspectRatio);
+                        iconHeight = DEFAULT_ICON_SIZE;
+                        if (iconWidth > maxIconWidth) {
+                            iconHeight = Math.round(maxIconWidth / aspectRatio);
                         }
-                        iconHeight = calcHeight;
                     }
                     else {
-                        iconHeight = defaultIconSize;
+                        iconHeight = DEFAULT_ICON_SIZE;
                     }
                 }
                 else {
-                    // Parse viewBox for aspect ratio
                     const vbMatch = viewBox.match(/(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/);
                     if (vbMatch) {
                         const vbWidth = parseInt(vbMatch[3]);
                         const vbHeight = parseInt(vbMatch[4]);
                         const aspectRatio = vbWidth / vbHeight;
-                        let calcHeight = defaultIconSize;
-                        if (Math.round(defaultIconSize * aspectRatio) > maxIconWidth) {
-                            calcHeight = Math.round(maxIconWidth / aspectRatio);
+                        let iconWidth = Math.round(DEFAULT_ICON_SIZE * aspectRatio);
+                        iconHeight = DEFAULT_ICON_SIZE;
+                        if (iconWidth > maxIconWidth) {
+                            iconHeight = Math.round(maxIconWidth / aspectRatio);
                         }
-                        iconHeight = calcHeight;
                     }
                     else {
-                        iconHeight = defaultIconSize;
+                        iconHeight = DEFAULT_ICON_SIZE;
                     }
                 }
             }
         }
-        else if (node.type) {
-            // Default device type icon (fixed size)
-            iconHeight = 36;
+        if (iconHeight === 0 && node.type && getDeviceIcon(node.type)) {
+            iconHeight = DEFAULT_ICON_SIZE;
         }
-        return Math.max(this.options.nodeHeight, baseHeight + (lines - 1) * lineHeight + iconHeight);
+        const gap = iconHeight > 0 ? ICON_LABEL_GAP : 0;
+        const contentHeight = iconHeight + gap + labelHeight;
+        return Math.max(this.options.nodeHeight, contentHeight + NODE_VERTICAL_PADDING);
     }
-    /**
-     * Calculate edge path using port positions when available
-     * Port positions are from ELK - lines connect FROM the ports
-     */
-    calculateEdgePathWithPorts(fromNode, toNode, fromPort, toPort) {
-        // Use port positions from ELK (lines come FROM ports)
-        let fromPoint;
-        let fromSide;
-        if (fromPort) {
-            // Line starts from port position
-            fromPoint = {
-                x: fromNode.position.x + fromPort.position.x,
-                y: fromNode.position.y + fromPort.position.y,
-            };
-            fromSide = fromPort.side;
-        }
-        else {
-            // No port - calculate edge position based on target node direction
-            const dx = toNode.position.x - fromNode.position.x;
-            const dy = toNode.position.y - fromNode.position.y;
-            const halfW = fromNode.size.width / 2;
-            const halfH = fromNode.size.height / 2;
-            if (Math.abs(dx) > Math.abs(dy) * 0.5) {
-                fromSide = dx > 0 ? 'right' : 'left';
-                fromPoint = {
-                    x: fromNode.position.x + (dx > 0 ? halfW : -halfW),
-                    y: fromNode.position.y,
-                };
-            }
-            else {
-                fromSide = dy > 0 ? 'bottom' : 'top';
-                fromPoint = {
-                    x: fromNode.position.x,
-                    y: fromNode.position.y + (dy > 0 ? halfH : -halfH),
-                };
-            }
-        }
-        let toPoint;
-        let toSide;
-        if (toPort) {
-            // Line ends at port position
-            toPoint = {
-                x: toNode.position.x + toPort.position.x,
-                y: toNode.position.y + toPort.position.y,
-            };
-            toSide = toPort.side;
-        }
-        else {
-            // No port - calculate edge position based on source node direction
-            const dx = fromNode.position.x - toNode.position.x;
-            const dy = fromNode.position.y - toNode.position.y;
-            const halfW = toNode.size.width / 2;
-            const halfH = toNode.size.height / 2;
-            if (Math.abs(dx) > Math.abs(dy) * 0.5) {
-                toSide = dx > 0 ? 'right' : 'left';
-                toPoint = {
-                    x: toNode.position.x + (dx > 0 ? halfW : -halfW),
-                    y: toNode.position.y,
-                };
-            }
-            else {
-                toSide = dy > 0 ? 'bottom' : 'top';
-                toPoint = {
-                    x: toNode.position.x,
-                    y: toNode.position.y + (dy > 0 ? halfH : -halfH),
-                };
+    calculatePortSpacing(portNames) {
+        if (!portNames || portNames.size === 0)
+            return MIN_PORT_SPACING;
+        let maxLabelLength = 0;
+        for (const name of portNames) {
+            maxLabelLength = Math.max(maxLabelLength, name.length);
+        }
+        const charWidth = PORT_LABEL_FONT_SIZE * CHAR_WIDTH_RATIO;
+        const maxLabelWidth = maxLabelLength * charWidth;
+        const spacingFromLabel = maxLabelWidth + PORT_LABEL_PADDING;
+        return Math.max(MIN_PORT_SPACING, spacingFromLabel);
+    }
+    calculateNodeWidth(node, portInfo) {
+        const labels = Array.isArray(node.label) ? node.label : [node.label];
+        const maxLabelLength = Math.max(...labels.map(l => l.length));
+        const labelWidth = maxLabelLength * ESTIMATED_CHAR_WIDTH;
+        const topCount = portInfo?.top.size || 0;
+        const bottomCount = portInfo?.bottom.size || 0;
+        const maxPortsPerSide = Math.max(topCount, bottomCount);
+        const portSpacing = this.calculatePortSpacing(portInfo?.all);
+        const edgeMargin = Math.round(MIN_PORT_SPACING / 2);
+        const portWidth = maxPortsPerSide > 0 ? (maxPortsPerSide - 1) * portSpacing + edgeMargin * 2 : 0;
+        const paddedContentWidth = Math.max(labelWidth, 0) + NODE_HORIZONTAL_PADDING;
+        const baseNodeWidth = Math.max(paddedContentWidth, portWidth);
+        const maxIconWidth = Math.round(baseNodeWidth * MAX_ICON_WIDTH_RATIO);
+        let iconWidth = DEFAULT_ICON_SIZE;
+        const iconKey = node.service || node.model;
+        if (node.vendor && iconKey) {
+            const iconEntry = getVendorIconEntry(node.vendor, iconKey, node.resource);
+            if (iconEntry) {
+                const vendorIcon = iconEntry.default;
+                const viewBox = iconEntry.viewBox || '0 0 48 48';
+                if (vendorIcon.startsWith('<svg')) {
+                    const viewBoxMatch = vendorIcon.match(/viewBox="0 0 (\d+) (\d+)"/);
+                    if (viewBoxMatch) {
+                        const vbWidth = parseInt(viewBoxMatch[1]);
+                        const vbHeight = parseInt(viewBoxMatch[2]);
+                        const aspectRatio = vbWidth / vbHeight;
+                        iconWidth = Math.min(Math.round(DEFAULT_ICON_SIZE * aspectRatio), maxIconWidth);
+                    }
+                }
+                else {
+                    const vbMatch = viewBox.match(/(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/);
+                    if (vbMatch) {
+                        const vbWidth = parseInt(vbMatch[3]);
+                        const vbHeight = parseInt(vbMatch[4]);
+                        const aspectRatio = vbWidth / vbHeight;
+                        iconWidth = Math.min(Math.round(DEFAULT_ICON_SIZE * aspectRatio), maxIconWidth);
+                    }
+                }
             }
         }
-        // Calculate bezier control points based on port sides
-        const dx = toPoint.x - fromPoint.x;
-        const dy = toPoint.y - fromPoint.y;
-        const dist = Math.sqrt(dx * dx + dy * dy);
-        const controlDist = Math.min(dist * 0.4, 80);
-        const fromControl = this.getControlPointForSide(fromPoint, fromSide, controlDist);
-        const toControl = this.getControlPointForSide(toPoint, toSide, controlDist);
-        return [fromPoint, fromControl, toControl, toPoint];
+        const paddedIconLabelWidth = Math.max(iconWidth, labelWidth) + NODE_HORIZONTAL_PADDING;
+        return Math.max(paddedIconLabelWidth, portWidth);
     }
-    /**
-     * Get control point position based on port side
-     */
-    getControlPointForSide(point, side, dist) {
-        switch (side) {
-            case 'top':
-                return { x: point.x, y: point.y - Math.abs(dist) };
-            case 'bottom':
-                return { x: point.x, y: point.y + Math.abs(dist) };
-            case 'left':
-                return { x: point.x - Math.abs(dist), y: point.y };
-            case 'right':
-                return { x: point.x + Math.abs(dist), y: point.y };
-            default:
-                return { x: point.x, y: point.y + dist };
+    calculateTotalBounds(nodes, subgraphs) {
+        let minX = Infinity, minY = Infinity;
+        let maxX = -Infinity, maxY = -Infinity;
+        nodes.forEach((node) => {
+            let left = node.position.x - node.size.width / 2;
+            let right = node.position.x + node.size.width / 2;
+            let top = node.position.y - node.size.height / 2;
+            let bottom = node.position.y + node.size.height / 2;
+            if (node.ports) {
+                node.ports.forEach((port) => {
+                    const portX = node.position.x + port.position.x;
+                    const portY = node.position.y + port.position.y;
+                    left = Math.min(left, portX - port.size.width / 2);
+                    right = Math.max(right, portX + port.size.width / 2);
+                    top = Math.min(top, portY - port.size.height / 2);
+                    bottom = Math.max(bottom, portY + port.size.height / 2);
+                });
+            }
+            minX = Math.min(minX, left);
+            minY = Math.min(minY, top);
+            maxX = Math.max(maxX, right);
+            maxY = Math.max(maxY, bottom);
+        });
+        subgraphs.forEach((sg) => {
+            minX = Math.min(minX, sg.bounds.x);
+            minY = Math.min(minY, sg.bounds.y);
+            maxX = Math.max(maxX, sg.bounds.x + sg.bounds.width);
+            maxY = Math.max(maxY, sg.bounds.y + sg.bounds.height);
+        });
+        const padding = 50;
+        if (minX === Infinity) {
+            return { x: 0, y: 0, width: 400, height: 300 };
         }
+        return {
+            x: minX - padding,
+            y: minY - padding,
+            width: maxX - minX + padding * 2,
+            height: maxY - minY + padding * 2,
+        };
     }
     calculateFallbackLayout(graph, _direction) {
-        // Simple fallback layout when async isn't available
         const layoutNodes = new Map();
         const layoutSubgraphs = new Map();
         const layoutLinks = new Map();
-        // Simple grid layout for nodes
-        let x = 100;
-        let y = 100;
-        const rowHeight = this.options.nodeHeight + this.options.rankSpacing;
-        const colWidth = this.options.nodeWidth + this.options.nodeSpacing;
-        let col = 0;
+        // Detect HA pairs for port assignment
+        const haPairs = this.detectHAPairs(graph);
+        const haPairSet = new Set();
+        for (const pair of haPairs) {
+            haPairSet.add([pair.nodeA, pair.nodeB].sort().join(':'));
+        }
+        const nodePorts = collectNodePorts(graph, haPairSet);
+        let x = 100, y = 100, col = 0;
         const maxCols = 4;
+        const rowHeight = this.options.nodeHeight + this.options.rankSpacing;
         for (const node of graph.nodes) {
-            const height = this.calculateNodeHeight(node);
+            const portInfo = nodePorts.get(node.id);
+            const portCount = portInfo?.all.size || 0;
+            const height = this.calculateNodeHeight(node, portCount);
+            const width = this.calculateNodeWidth(node, portInfo);
+            const colWidth = width + this.options.nodeSpacing;
             layoutNodes.set(node.id, {
                 id: node.id,
-                position: { x: x + this.options.nodeWidth / 2, y: y + height / 2 },
-                size: { width: this.options.nodeWidth, height },
+                position: { x: x + width / 2, y: y + height / 2 },
+                size: { width, height },
                 node,
             });
             col++;
@@ -981,7 +933,6 @@ export class HierarchicalLayout {
                 x += colWidth;
             }
         }
-        // Simple links
         graph.links.forEach((link, index) => {
             const fromId = getNodeId(link.from);
             const toId = getNodeId(link.to);
@@ -1008,311 +959,42 @@ export class HierarchicalLayout {
             metadata: { algorithm: 'fallback-grid', duration: 0 },
         };
     }
-    calculateTotalBounds(nodes, subgraphs) {
-        let minX = Infinity, minY = Infinity;
-        let maxX = -Infinity, maxY = -Infinity;
-        nodes.forEach((node) => {
-            minX = Math.min(minX, node.position.x - node.size.width / 2);
-            minY = Math.min(minY, node.position.y - node.size.height / 2);
-            maxX = Math.max(maxX, node.position.x + node.size.width / 2);
-            maxY = Math.max(maxY, node.position.y + node.size.height / 2);
-        });
-        subgraphs.forEach((sg) => {
-            minX = Math.min(minX, sg.bounds.x);
-            minY = Math.min(minY, sg.bounds.y);
-            maxX = Math.max(maxX, sg.bounds.x + sg.bounds.width);
-            maxY = Math.max(maxY, sg.bounds.y + sg.bounds.height);
-        });
-        const padding = 50;
-        if (minX === Infinity) {
-            return { x: 0, y: 0, width: 400, height: 300 };
-        }
-        return {
-            x: minX - padding,
-            y: minY - padding,
-            width: maxX - minX + padding * 2,
-            height: maxY - minY + padding * 2,
-        };
-    }
-    /**
-     * Detect redundancy pairs based on link.redundancy property
-     * Returns array of [nodeA, nodeB] pairs that should be placed on the same layer
-     */
+    /** Detect HA pairs from redundancy links */
     detectHAPairs(graph) {
         const pairs = [];
-        const processedPairs = new Set();
+        const processed = new Set();
         for (const link of graph.links) {
-            // Only process links with redundancy property set
             if (!link.redundancy)
                 continue;
             const fromId = getNodeId(link.from);
             const toId = getNodeId(link.to);
-            const pairKey = [fromId, toId].sort().join(':');
-            if (processedPairs.has(pairKey))
+            const key = [fromId, toId].sort().join(':');
+            if (processed.has(key))
                 continue;
-            pairs.push({
-                nodeA: fromId,
-                nodeB: toId,
-                minLength: link.style?.minLength,
-            });
-            processedPairs.add(pairKey);
+            pairs.push({ nodeA: fromId, nodeB: toId });
+            processed.add(key);
         }
         return pairs;
     }
-    /**
-     * Adjust node distances based on link minLength property
-     */
-    adjustLinkDistances(result, graph, direction) {
-        const isVertical = direction === 'TB' || direction === 'BT';
-        let adjusted = false;
-        for (const link of graph.links) {
-            const minLength = link.style?.minLength;
-            if (!minLength)
-                continue;
-            // Skip HA links (already handled by two-pass layout with layerChoiceConstraint)
-            if (link.redundancy)
-                continue;
-            const fromId = getNodeId(link.from);
-            const toId = getNodeId(link.to);
-            const fromNode = result.nodes.get(fromId);
-            const toNode = result.nodes.get(toId);
-            if (!fromNode || !toNode)
-                continue;
-            // Calculate current distance
-            const dx = toNode.position.x - fromNode.position.x;
-            const dy = toNode.position.y - fromNode.position.y;
-            const currentDist = Math.sqrt(dx * dx + dy * dy);
-            if (currentDist >= minLength)
-                continue;
-            // Need to increase distance
-            const scale = minLength / currentDist;
-            if (isVertical) {
-                // For TB/BT layout, primarily adjust Y (move target node down/up)
-                const newDy = dy * scale;
-                const deltaY = newDy - dy;
-                toNode.position.y += deltaY;
-            }
-            else {
-                // For LR/RL layout, primarily adjust X
-                const newDx = dx * scale;
-                const deltaX = newDx - dx;
-                toNode.position.x += deltaX;
-            }
-            adjusted = true;
-        }
-        if (adjusted) {
-            this.recalculateAllEdges(result);
-        }
-    }
-    /**
-     * Calculate edge path with offset for multiple connections
-     */
-    calculateEdgePathWithOffset(fromNode, toNode, outIndex, outTotal, inIndex, inTotal) {
-        const fromPos = fromNode.position;
-        const toPos = toNode.position;
-        const fromSize = fromNode.size;
-        const toSize = toNode.size;
-        // Calculate direction from source to target
-        const dx = toPos.x - fromPos.x;
-        const dy = toPos.y - fromPos.y;
-        // Calculate offset for distributing multiple connections
-        const portSpacing = 15; // pixels between port connections
-        let fromPoint;
-        let toPoint;
-        let controlDist;
-        // For vertical layouts (TB), prefer top/bottom connections
-        if (Math.abs(dy) > Math.abs(dx) * 0.3) {
-            // Primarily vertical
-            // Calculate horizontal offset for multiple outgoing/incoming links
-            const outOffset = outTotal > 1 ? (outIndex - (outTotal - 1) / 2) * portSpacing : 0;
-            const inOffset = inTotal > 1 ? (inIndex - (inTotal - 1) / 2) * portSpacing : 0;
-            if (dy > 0) {
-                fromPoint = { x: fromPos.x + outOffset, y: fromPos.y + fromSize.height / 2 };
-                toPoint = { x: toPos.x + inOffset, y: toPos.y - toSize.height / 2 };
-            }
-            else {
-                fromPoint = { x: fromPos.x + outOffset, y: fromPos.y - fromSize.height / 2 };
-                toPoint = { x: toPos.x + inOffset, y: toPos.y + toSize.height / 2 };
-            }
-            controlDist = Math.min(Math.abs(toPoint.y - fromPoint.y) * 0.4, 80);
-            return [
-                fromPoint,
-                { x: fromPoint.x, y: fromPoint.y + Math.sign(dy) * controlDist },
-                { x: toPoint.x, y: toPoint.y - Math.sign(dy) * controlDist },
-                toPoint,
-            ];
-        }
-        else {
-            // Primarily horizontal
-            // Calculate vertical offset for multiple outgoing/incoming links
-            const outOffset = outTotal > 1 ? (outIndex - (outTotal - 1) / 2) * portSpacing : 0;
-            const inOffset = inTotal > 1 ? (inIndex - (inTotal - 1) / 2) * portSpacing : 0;
-            if (dx > 0) {
-                fromPoint = { x: fromPos.x + fromSize.width / 2, y: fromPos.y + outOffset };
-                toPoint = { x: toPos.x - toSize.width / 2, y: toPos.y + inOffset };
-            }
-            else {
-                fromPoint = { x: fromPos.x - fromSize.width / 2, y: fromPos.y + outOffset };
-                toPoint = { x: toPos.x + toSize.width / 2, y: toPos.y + inOffset };
-            }
-            controlDist = Math.min(Math.abs(toPoint.x - fromPoint.x) * 0.4, 80);
-            return [
-                fromPoint,
-                { x: fromPoint.x + Math.sign(dx) * controlDist, y: fromPoint.y },
-                { x: toPoint.x - Math.sign(dx) * controlDist, y: toPoint.y },
-                toPoint,
-            ];
-        }
-    }
-    /**
-     * Recalculate all edge paths with port offset distribution
-     */
-    recalculateAllEdges(result) {
-        // Group links by source and target nodes to calculate offsets
-        const outgoingLinks = new Map(); // nodeId -> [linkIds]
-        const incomingLinks = new Map(); // nodeId -> [linkIds]
-        result.links.forEach((layoutLink, linkId) => {
-            // Outgoing from source
-            if (!outgoingLinks.has(layoutLink.from)) {
-                outgoingLinks.set(layoutLink.from, []);
-            }
-            outgoingLinks.get(layoutLink.from).push(linkId);
-            // Incoming to target
-            if (!incomingLinks.has(layoutLink.to)) {
-                incomingLinks.set(layoutLink.to, []);
-            }
-            incomingLinks.get(layoutLink.to).push(linkId);
-        });
-        // Sort outgoing links by target X position to reduce crossings
-        outgoingLinks.forEach((linkIds, _nodeId) => {
-            linkIds.sort((a, b) => {
-                const linkA = result.links.get(a);
-                const linkB = result.links.get(b);
-                if (!linkA || !linkB)
-                    return 0;
-                const targetA = result.nodes.get(linkA.to);
-                const targetB = result.nodes.get(linkB.to);
-                if (!targetA || !targetB)
-                    return 0;
-                return targetA.position.x - targetB.position.x;
-            });
-        });
-        // Sort incoming links by source X position to reduce crossings
-        incomingLinks.forEach((linkIds, _nodeId) => {
-            linkIds.sort((a, b) => {
-                const linkA = result.links.get(a);
-                const linkB = result.links.get(b);
-                if (!linkA || !linkB)
-                    return 0;
-                const sourceA = result.nodes.get(linkA.from);
-                const sourceB = result.nodes.get(linkB.from);
-                if (!sourceA || !sourceB)
-                    return 0;
-                return sourceA.position.x - sourceB.position.x;
-            });
-        });
-        // Calculate edge paths with offset - prefer port positions when available
-        result.links.forEach((layoutLink, linkId) => {
-            const fromNode = result.nodes.get(layoutLink.from);
-            const toNode = result.nodes.get(layoutLink.to);
-            if (fromNode && toNode) {
-                // Check if this link uses ports
-                const fromPortId = layoutLink.fromEndpoint.port
-                    ? `${layoutLink.from}:${layoutLink.fromEndpoint.port}`
-                    : undefined;
-                const toPortId = layoutLink.toEndpoint.port
-                    ? `${layoutLink.to}:${layoutLink.toEndpoint.port}`
-                    : undefined;
-                const fromPort = fromPortId ? fromNode.ports?.get(fromPortId) : undefined;
-                const toPort = toPortId ? toNode.ports?.get(toPortId) : undefined;
-                if (fromPort || toPort) {
-                    // Use port-aware edge calculation
-                    layoutLink.points = this.calculateEdgePathWithPorts(fromNode, toNode, fromPort, toPort);
-                }
-                else {
-                    // No ports - use offset-based calculation
-                    const outLinks = outgoingLinks.get(layoutLink.from) || [];
-                    const inLinks = incomingLinks.get(layoutLink.to) || [];
-                    const outIndex = outLinks.indexOf(linkId);
-                    const inIndex = inLinks.indexOf(linkId);
-                    layoutLink.points = this.calculateEdgePathWithOffset(fromNode, toNode, outIndex, outLinks.length, inIndex, inLinks.length);
-                }
-            }
-        });
-    }
-    /**
-     * Recalculate subgraph bounds to contain all child nodes after adjustments
-     */
-    recalculateSubgraphBounds(result, graph) {
-        if (!graph.subgraphs)
-            return;
-        const padding = this.options.subgraphPadding;
-        const labelHeight = this.options.subgraphLabelHeight;
-        // Build node-to-subgraph mapping
-        const nodeToSubgraph = new Map();
-        for (const node of graph.nodes) {
-            if (node.parent) {
-                nodeToSubgraph.set(node.id, node.parent);
-            }
-        }
-        // Recalculate bounds for each subgraph
-        result.subgraphs.forEach((layoutSubgraph, subgraphId) => {
-            const childNodes = [];
-            // Find all nodes that belong to this subgraph
-            result.nodes.forEach((layoutNode, nodeId) => {
-                if (nodeToSubgraph.get(nodeId) === subgraphId) {
-                    childNodes.push(layoutNode);
-                }
-            });
-            if (childNodes.length === 0)
-                return;
-            // Calculate bounding box of all child nodes
-            let minX = Infinity, minY = Infinity;
-            let maxX = -Infinity, maxY = -Infinity;
-            for (const node of childNodes) {
-                const left = node.position.x - node.size.width / 2;
-                const right = node.position.x + node.size.width / 2;
-                const top = node.position.y - node.size.height / 2;
-                const bottom = node.position.y + node.size.height / 2;
-                minX = Math.min(minX, left);
-                minY = Math.min(minY, top);
-                maxX = Math.max(maxX, right);
-                maxY = Math.max(maxY, bottom);
-            }
-            // Apply padding
-            layoutSubgraph.bounds = {
-                x: minX - padding,
-                y: minY - padding - labelHeight,
-                width: (maxX - minX) + padding * 2,
-                height: (maxY - minY) + padding * 2 + labelHeight,
-            };
-        });
-        // Update overall bounds
-        let minX = Infinity, minY = Infinity;
-        let maxX = -Infinity, maxY = -Infinity;
-        result.nodes.forEach((node) => {
-            const left = node.position.x - node.size.width / 2;
-            const right = node.position.x + node.size.width / 2;
-            const top = node.position.y - node.size.height / 2;
-            const bottom = node.position.y + node.size.height / 2;
-            minX = Math.min(minX, left);
-            minY = Math.min(minY, top);
-            maxX = Math.max(maxX, right);
-            maxY = Math.max(maxY, bottom);
-        });
-        result.subgraphs.forEach((sg) => {
-            minX = Math.min(minX, sg.bounds.x);
-            minY = Math.min(minY, sg.bounds.y);
-            maxX = Math.max(maxX, sg.bounds.x + sg.bounds.width);
-            maxY = Math.max(maxY, sg.bounds.y + sg.bounds.height);
-        });
-        const margin = 40;
-        result.bounds = {
-            x: minX - margin,
-            y: minY - margin,
-            width: (maxX - minX) + margin * 2,
-            height: (maxY - minY) + margin * 2,
-        };
+    /** Generate orthogonal path between two points */
+    generateOrthogonalPath(start, end) {
+        const dx = end.x - start.x;
+        const dy = end.y - start.y;
+        // If points are nearly aligned, use direct line
+        if (Math.abs(dx) < 5) {
+            return [start, end];
+        }
+        if (Math.abs(dy) < 5) {
+            return [start, end];
+        }
+        // Use midpoint for orthogonal routing
+        const midY = start.y + dy / 2;
+        return [
+            start,
+            { x: start.x, y: midY },
+            { x: end.x, y: midY },
+            end,
+        ];
     }
 }
 // Default instance