@oml/markdown 0.10.0 → 0.11.0

package/src/renderers/diagram-renderer.ts

@@ -16,9 +16,6 @@ type NodeSpec = {
     children: string[];
     width: number;
     height: number;
-    hasExplicitWidth: boolean;
-    hasExplicitHeight: boolean;
-    contentTopPadding: number;
 };
 
 type EdgeLabel = {
@@ -37,7 +34,7 @@ type EdgeSpec = {
 };
 
 type DiagramStyleRule = {
-    elementKind: 'node' | 'compartment' | 'port' | 'edge';
+    elementKind: 'diagram' | 'node' | 'compartment' | 'port' | 'edge';
     className?: string;
     condition?: string;
     style: Record<string, unknown>;
@@ -67,18 +64,25 @@ type NativeLayoutResult = {
     contentHeight: number;
 };
 
+type BoxSpacing = {
+    marginTop: number;
+    marginBottom: number;
+    marginLeft: number;
+    marginRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+};
+
 type DagreLayoutOptions = {
     rankdir: 'LR' | 'RL' | 'TB' | 'BT';
     nodesep: number;
     ranksep: number;
-    marginx: number;
-    marginy: number;
 };
 type StackLayoutOptions = {
     direction: 'vertical' | 'horizontal';
     gap: number;
-    marginx: number;
-    marginy: number;
     stretch: boolean;
 };
 type ParentLayoutOptions =
@@ -89,6 +93,11 @@ type RenderNodeShape = {
     bodyTag: 'rect' | 'ellipse';
     bodyDefaults: Record<string, unknown>;
 };
+type PortSide = 'left' | 'right' | 'top' | 'bottom';
+type PortPlacement = {
+    side: PortSide;
+    ratio: number;
+};
 
 const D = 'http://opencaesar.io/oml/diagram#';
 const RDF_TYPE = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type';
@@ -150,13 +159,16 @@ export class DiagramMarkdownBlockRenderer extends CanvasMarkdownBlockRenderer {
         const tripleIndex = indexTriples(rows);
         const stylesheet = parseDiagramStylesheet(result.options);
         const compiled = compileDiagramGraph(tripleIndex, stylesheet);
-        const layoutOptions = resolveDagreLayoutOptions(result.options);
+        const diagramStyle = resolveElementStyle('diagram', 'diagram', [], {}, stylesheet);
+        const layoutOptions = resolveDagreLayoutOptions(diagramStyle);
+        const rootSpacing = resolveRootSpacing(diagramStyle);
         if (compiled.nodes.length === 0) {
             container.appendChild(this.createMessageContainer('No diagram nodes were inferred from the diagram namespace triples.'));
             return container;
         }
 
         void renderWithX6(canvas, baseId, compiled, layoutOptions, {
+            rootSpacing,
             downloadSvg: (content: string) => this.requestTextFileDownload(content, 'diagram', 'svg'),
         }).catch((error) => {
             const detail = error instanceof Error ? error.message : String(error);
@@ -172,7 +184,7 @@ async function renderWithX6(
     baseId: string,
     graph: { nodes: NodeSpec[]; edges: EdgeSpec[]; roots: string[] },
     layoutOptions: DagreLayoutOptions,
-    actions: { downloadSvg: (content: string) => void }
+    actions: { downloadSvg: (content: string) => void; rootSpacing: BoxSpacing }
 ): Promise<void> {
     await waitForCanvasReady(canvas);
     const liveCanvas = getLiveCanvas(baseId);
@@ -181,7 +193,7 @@ async function renderWithX6(
     }
 
     const GraphCtor = await loadX6GraphCtor();
-    const layout = await layoutGraphDagre(graph, layoutOptions);
+    const layout = await layoutGraphDagre(graph, layoutOptions, actions.rootSpacing);
     const minHeight = asFiniteNumber(
         parseCssPixels(liveCanvas.style.getPropertyValue('--oml-diagram-min-height')),
         numericCanvasMinHeight(undefined)
@@ -191,13 +203,15 @@ async function renderWithX6(
     let activePortDrag: {
         nodeId: string;
         portId: string;
-        startClientY: number;
-        startPortY: number;
+        pointerId: number;
+        side: PortSide;
+        ratio: number;
+        container: Element;
     } | undefined;
     let isResizingCanvas = false;
     const isPortPointerTarget = (event: PointerEvent): boolean => {
         const target = event?.target as Element | null;
-        if (target?.closest('.x6-port, .x6-port-body, .oml-port-body')) {
+        if (target?.closest('.x6-port, .x6-port-body, .oml-port-body, [port]')) {
             return true;
         }
         const path = typeof event?.composedPath === 'function' ? event.composedPath() : [];
@@ -205,23 +219,18 @@ async function renderWithX6(
             entry instanceof Element
             && (entry.classList.contains('x6-port')
                 || entry.classList.contains('x6-port-body')
-                || entry.classList.contains('oml-port-body'))
+                || entry.classList.contains('oml-port-body')
+                || entry.hasAttribute('port'))
         ));
     };
-    const findPortIdFromTarget = (target: EventTarget | null): string | undefined => {
-        if (!(target instanceof Element)) return undefined;
-        const portHost = target.closest('.x6-port');
-        if (!portHost) return undefined;
-        return portHost.getAttribute('port')
-            ?? portHost.getAttribute('data-port-id')
-            ?? undefined;
-    };
 
     const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
     const isCompartmentNode = (node: any): boolean => {
         const nodeId = String(node?.id ?? '');
         return nodeById.get(nodeId)?.kind === 'Compartment';
     };
+    const boundPortContainers = new WeakSet<Element>();
+    let nodeTransform: any;
 
     const graphView: any = new GraphCtor({
         container: liveCanvas,
@@ -236,7 +245,10 @@ async function renderWithX6(
         },
         connecting: {
             router: 'normal',
-            connector: 'rounded',
+            connector: {
+                name: 'jumpover',
+                args: { size: 5 },
+            },
             allowBlank: false,
             allowNode: false,
             allowPort: false,
@@ -252,13 +264,64 @@ async function renderWithX6(
                 edgeMovable: false,
                 vertexMovable: false,
                 arrowheadMovable: false,
-                labelMovable: false,
+                labelMovable: true,
             };
         },
         background: {
             color: CSS_CANVAS_BACKGROUND,
         },
+        onPortRendered: ({ port, node, container }: { port: { id: string }; node: { id: string }; container: HTMLElement }) => {
+            if (boundPortContainers.has(container)) {
+                return;
+            }
+            boundPortContainers.add(container);
+            container.setAttribute('data-port-id', String(port.id));
+            container.style.cursor = 'grab';
+            container.style.touchAction = 'none';
+            container.addEventListener('pointerdown', (event: PointerEvent) => {
+                if (typeof graphView.cleanSelection === 'function') {
+                    graphView.cleanSelection();
+                }
+                nodeTransform.clearWidgets();
+                const owner = graphView.getCellById(String(node.id));
+                if (!owner) {
+                    return;
+                }
+                startPortDrag(event.clientX, event.clientY, owner, String(port.id), event.pointerId, container);
+                event.preventDefault();
+                event.stopPropagation();
+                if (typeof event.stopImmediatePropagation === 'function') {
+                    event.stopImmediatePropagation();
+                }
+                if (typeof container.setPointerCapture === 'function') {
+                    try {
+                        container.setPointerCapture(event.pointerId);
+                    } catch {
+                        // Ignore capture failures; window listeners still handle the drag.
+                    }
+                }
+            });
+        },
     });
+    const x6Mod = await import('@antv/x6');
+    const TransformCtor = (x6Mod as any).Transform;
+    if (typeof TransformCtor !== 'function') {
+        throw new Error('X6 Transform plugin is unavailable in @antv/x6');
+    }
+    nodeTransform = new TransformCtor({
+        resizing: {
+            enabled: (node: any) => node?.getData?.()?.kind === 'Node',
+            minWidth: 48,
+            minHeight: 32,
+            orthogonal: true,
+            restrict: false,
+            autoScroll: false,
+            preserveAspectRatio: false,
+            allowReverse: false,
+        },
+        rotating: false,
+    });
+    graphView.use(nodeTransform);
     const toPlainRect = (value: any): Record<string, number> | undefined => {
         if (!value) return undefined;
         const x = Number(value.x);
@@ -291,12 +354,7 @@ async function renderWithX6(
     for (const list of portsByOwner.values()) {
         list.sort((a, b) => a.id.localeCompare(b.id));
     }
-    const ownerByPortId = new Map<string, string>();
-    for (const [ownerId, ports] of portsByOwner.entries()) {
-        for (const port of ports) {
-            ownerByPortId.set(port.id, ownerId);
-        }
-    }
+    const portPlacementById = computeDefaultPortPlacements(graph, nodeById, portsByOwner, layout.boxes);
     const ordered = [...graph.nodes]
         .filter((node) => node.kind !== 'Port')
         .sort((a, b) => nodeDepth(a.id, nodeById) - nodeDepth(b.id, nodeById));
@@ -307,20 +365,41 @@ async function renderWithX6(
         const labelText = node.labels.length > 0 ? node.labels.join('\n') : localName(node.id);
         const resolvedStyle = node.style;
         const resolvedShape = resolveRenderNodeShape(resolvedStyle);
+        const { bodyAttrs, labelAttrs, iconSvgAttrs, iconPathAttrs, imageAttrs } = resolveNodeAttrs(resolvedStyle);
         const x = box.x;
         const y = box.y;
         const ownerPorts = portsByOwner.get(node.id) ?? [];
-        const portItems = ownerPorts.map((port, index) => ({
-            id: port.id,
-            group: 'boundary',
-            args: {
-                x: box.width,
-                y: ((index + 1) * box.height) / (ownerPorts.length + 1),
-            },
-            attrs: resolvePortAttrs(port.style, port.classes, port.labels[0] ?? 'Port'),
-        }));
-
-        const { bodyAttrs, labelAttrs, iconSvgAttrs, iconPathAttrs, imageAttrs } = resolveNodeAttrs(resolvedStyle);
+        const portItems = ownerPorts.map((port) => {
+            const placement = portPlacementById.get(port.id) ?? { side: 'right' as PortSide, ratio: 0.5 };
+            const ratio = clamp(placement.ratio, 0.05, 0.95);
+            const position = placement.side === 'left' || placement.side === 'right'
+                ? {
+                    x: placement.side === 'left' ? 0 : box.width,
+                    y: ratio * box.height,
+                }
+                : {
+                    x: ratio * box.width,
+                    y: placement.side === 'top' ? 0 : box.height,
+                };
+            const portText = port.labels[0];
+            return {
+                id: port.id,
+                group: 'boundary',
+                args: {
+                    x: position.x,
+                    y: position.y,
+                    side: placement.side,
+                    ratio,
+                },
+                attrs: resolvePortAttrs(
+                    port.style,
+                    port.classes,
+                    portText,
+                    placement.side,
+                    typeof bodyAttrs.stroke === 'string' ? bodyAttrs.stroke : undefined
+                ),
+            };
+        });
         const iconPathSelectors = iconPathAttrs.map((_, index) => `iconPath${index}`);
         graphView.addNode({
             id: node.id,
@@ -424,7 +503,7 @@ async function renderWithX6(
                 },
                 items: portItems,
             } : undefined,
-            zIndex: 10,
+            zIndex: 50,
             data: {
                 kind: node.kind,
                 ownerId: node.parentId,
@@ -561,10 +640,30 @@ async function renderWithX6(
         let maxBottom = Number.NEGATIVE_INFINITY;
         const childCells: any[] = [];
         const childDebug: Array<Record<string, unknown>> = [];
+        const childGeometryBounds = (child: any): { x: number; y: number; width: number; height: number } | undefined => {
+            if (!child || typeof child.size !== 'function') {
+                return undefined;
+            }
+            const size = child.size();
+            const width = Number(size?.width);
+            const height = Number(size?.height);
+            let position: any;
+            if (typeof child.getPosition === 'function') {
+                position = child.getPosition();
+            } else {
+                position = child.position;
+            }
+            const x = Number(position?.x);
+            const y = Number(position?.y);
+            if (![x, y, width, height].every(Number.isFinite)) {
+                return undefined;
+            }
+            return { x, y, width, height };
+        };
         for (const childId of childIds) {
             const child = graphView.getCellById(childId);
-            if (!child || typeof child.getBBox !== 'function') continue;
-            const absBBox = child.getBBox();
+            const absBBox = childGeometryBounds(child);
+            if (!absBBox) continue;
             const relLeft = absBBox.x - containerBBox.x;
             const relTop = absBBox.y - containerBBox.y;
             minLeft = Math.min(minLeft, relLeft);
@@ -596,10 +695,11 @@ async function renderWithX6(
         // container origin (without moving its embedded children, which keep their
         // absolute positions) and expand the size to compensate so the opposite edge
         // is preserved.
-        // topPadding is the reserved header/label area; children must stay below it.
-        const topPadding = containerSpec.contentTopPadding;
-        const shiftX = minLeft < 0 ? minLeft : 0;
-        const shiftY = minTop < topPadding ? minTop - topPadding : 0;
+        const spacing = resolveBoxSpacing(containerSpec.style, 0);
+        const minInsetX = spacing.marginLeft + spacing.paddingLeft;
+        const minInsetY = spacing.marginTop + spacing.paddingTop;
+        const shiftX = minLeft < minInsetX ? minLeft - minInsetX : 0;
+        const shiftY = minTop < minInsetY ? minTop - minInsetY : 0;
         // Dimensions needed relative to the (possibly shifted) new origin.
         const baseWidth = containerSize.width - shiftX;
         const baseHeight = containerSize.height - shiftY;
@@ -612,7 +712,8 @@ async function renderWithX6(
             childIds,
             containerBBox: toPlainRect(containerBBox),
             containerSize: toPlainRect({ x: 0, y: 0, ...containerSize }),
-            topPadding,
+            minInsetX,
+            minInsetY,
             bounds: { minLeft, minTop, maxRight, maxBottom },
             shift: { shiftX, shiftY },
             childDebug,
@@ -632,6 +733,7 @@ async function renderWithX6(
                 to: { width: neededWidth, height: neededHeight },
             });
             container.resize(neededWidth, neededHeight);
+            syncOwnedPortPositions(containerId);
         } else {
             logResize('container-no-resize', { containerId });
         }
@@ -708,106 +810,149 @@ async function renderWithX6(
         if (!isPrimaryMover(node, options)) return;
         growAncestorContainers(node);
     });
+    const syncOwnedPortPositions = (ownerId: string): void => {
+        const owner = graphView.getCellById(ownerId);
+        if (!owner || typeof owner.size !== 'function' || typeof owner.getPorts !== 'function' || typeof owner.setPortProp !== 'function') {
+            return;
+        }
+        const size = owner.size();
+        const portIds = (owner.getPorts() as any[])
+            .map((port) => String(port?.id ?? ''))
+            .filter((portId) => portId.length > 0);
+        for (const portId of portIds) {
+            const placement = portPlacementById.get(portId) ?? { side: 'right' as PortSide, ratio: 0.5 };
+            const ratio = clamp(placement.ratio, 0.05, 0.95);
+            const nextArgs = placement.side === 'left' || placement.side === 'right'
+                ? {
+                    x: placement.side === 'left' ? 0 : size.width,
+                    y: ratio * size.height,
+                    side: placement.side,
+                    ratio,
+                }
+                : {
+                    x: ratio * size.width,
+                    y: placement.side === 'top' ? 0 : size.height,
+                    side: placement.side,
+                    ratio,
+                };
+            owner.setPortProp(portId, {
+                args: nextArgs,
+                label: {
+                    position: resolveBorderPortLabelPosition(placement.side),
+                },
+            });
+        }
+    };
+    graphView.on('node:resizing', ({ node }: { node: any }) => {
+        syncOwnedPortPositions(String(node?.id ?? ''));
+    });
+    graphView.on('node:resized', ({ node, options }: { node: any; options?: Record<string, unknown> }) => {
+        if (options?.silent) return;
+        syncOwnedPortPositions(String(node?.id ?? ''));
+        growAncestorContainers(node);
+    });
 
     const edgeLabelPosition = (placement: EdgeLabel['placement']): number => {
         if (placement === 'begin') return 0.15;
         if (placement === 'end') return 0.85;
         return 0.5;
     };
-    const endpointOwnerId = (nodeId: string): string | undefined => {
-        const node = nodeById.get(nodeId);
-        if (!node) return undefined;
-        return node.kind === 'Port' ? node.parentId : node.id;
-    };
-    const undirectedPairKey = (a: string, b: string): string => (a < b ? `${a}<->${b}` : `${b}<->${a}`);
-    const edgeById = new Map(graph.edges.map((edge) => [edge.id, edge]));
+    const directedPairKey = (sourceId: string, targetId: string): string => `${sourceId}=>${targetId}`;
+    const undirectedPairKey = (leftId: string, rightId: string): string => (
+        leftId < rightId ? `${leftId}<=>${rightId}` : `${rightId}<=>${leftId}`
+    );
+    const edgeIdsByPair = new Map<string, string[]>();
     const undirectedEdgeIdsByPair = new Map<string, string[]>();
     for (const edge of graph.edges) {
-        const sourceOwner = endpointOwnerId(edge.sourceId);
-        const targetOwner = endpointOwnerId(edge.targetId);
-        if (!sourceOwner || !targetOwner || sourceOwner === targetOwner) continue;
-        const key = undirectedPairKey(sourceOwner, targetOwner);
-        const ids = undirectedEdgeIdsByPair.get(key) ?? [];
+        if (!edge.sourceId || !edge.targetId) continue;
+        const key = directedPairKey(edge.sourceId, edge.targetId);
+        const ids = edgeIdsByPair.get(key) ?? [];
         ids.push(edge.id);
-        undirectedEdgeIdsByPair.set(key, ids);
-    }
-    const fanningVertexForEdge = (edge: EdgeSpec): Array<{ x: number; y: number }> | undefined => {
-        const sourceOwner = endpointOwnerId(edge.sourceId);
-        const targetOwner = endpointOwnerId(edge.targetId);
-        if (!sourceOwner || !targetOwner || sourceOwner === targetOwner) {
-            return undefined;
-        }
-        const edgeIds = undirectedEdgeIdsByPair.get(undirectedPairKey(sourceOwner, targetOwner)) ?? [];
-        if (edgeIds.length <= 1) {
+        edgeIdsByPair.set(key, ids);
+        const undirectedKey = undirectedPairKey(edge.sourceId, edge.targetId);
+        const pairIds = undirectedEdgeIdsByPair.get(undirectedKey) ?? [];
+        pairIds.push(edge.id);
+        undirectedEdgeIdsByPair.set(undirectedKey, pairIds);
+    }
+    const edgePointForEndpoint = (endpointId: string): { x: number; y: number } | undefined => {
+        const endpoint = nodeById.get(endpointId);
+        if (!endpoint) {
             return undefined;
         }
-        const orderedEdgeIds = [...edgeIds].sort((leftId, rightId) => {
-            const leftEdge = edgeById.get(leftId);
-            const rightEdge = edgeById.get(rightId);
-            if (!leftEdge || !rightEdge) return leftId.localeCompare(rightId);
-            const leftSource = endpointOwnerId(leftEdge.sourceId);
-            const leftTarget = endpointOwnerId(leftEdge.targetId);
-            const rightSource = endpointOwnerId(rightEdge.sourceId);
-            const rightTarget = endpointOwnerId(rightEdge.targetId);
-            const leftForward = leftSource && leftTarget ? (leftSource < leftTarget ? 0 : 1) : 0;
-            const rightForward = rightSource && rightTarget ? (rightSource < rightTarget ? 0 : 1) : 0;
-            if (leftForward !== rightForward) return leftForward - rightForward;
-            return leftId.localeCompare(rightId);
-        });
-        const [pairA, pairB] = sourceOwner < targetOwner
-            ? [sourceOwner, targetOwner]
-            : [targetOwner, sourceOwner];
-        const forwardIds: string[] = [];
-        const reverseIds: string[] = [];
-        for (const edgeId of orderedEdgeIds) {
-            const pairEdge = edgeById.get(edgeId);
-            if (!pairEdge) continue;
-            const pairSource = endpointOwnerId(pairEdge.sourceId);
-            const pairTarget = endpointOwnerId(pairEdge.targetId);
-            if (pairSource === pairA && pairTarget === pairB) {
-                forwardIds.push(edgeId);
-            } else if (pairSource === pairB && pairTarget === pairA) {
-                reverseIds.push(edgeId);
+        if (endpoint.kind === 'Port' && endpoint.parentId) {
+            const ownerBox = layout.boxes.get(endpoint.parentId);
+            const placement = portPlacementById.get(endpoint.id);
+            if (!ownerBox || !placement) {
+                return undefined;
+            }
+            const ratio = clamp(placement.ratio, 0.05, 0.95);
+            if (placement.side === 'left') {
+                return { x: ownerBox.x, y: ownerBox.y + (ownerBox.height * ratio) };
+            }
+            if (placement.side === 'right') {
+                return { x: ownerBox.x + ownerBox.width, y: ownerBox.y + (ownerBox.height * ratio) };
             }
+            if (placement.side === 'top') {
+                return { x: ownerBox.x + (ownerBox.width * ratio), y: ownerBox.y };
+            }
+            return { x: ownerBox.x + (ownerBox.width * ratio), y: ownerBox.y + ownerBox.height };
         }
-        // Only fan when both directions exist for the same endpoint pair.
-        if (forwardIds.length === 0 || reverseIds.length === 0) {
+        const box = layout.boxes.get(endpointId);
+        if (!box) {
             return undefined;
         }
-
-        let directionSign = 0;
-        let laneIndex = 0;
-        let laneCount = 0;
-        if (sourceOwner === pairA && targetOwner === pairB) {
-            directionSign = 1;
-            laneIndex = forwardIds.indexOf(edge.id);
-            laneCount = forwardIds.length;
-        } else if (sourceOwner === pairB && targetOwner === pairA) {
-            directionSign = -1;
-            laneIndex = reverseIds.indexOf(edge.id);
-            laneCount = reverseIds.length;
+        return { x: box.x + (box.width / 2), y: box.y + (box.height / 2) };
+    };
+    const fanningVertexForEdge = (edge: EdgeSpec): Array<{ x: number; y: number }> | undefined => {
+        if (!edge.sourceId || !edge.targetId) {
+            return undefined;
         }
-        if (directionSign === 0 || laneIndex < 0 || laneCount <= 0) {
+        const undirectedIds = undirectedEdgeIdsByPair.get(undirectedPairKey(edge.sourceId, edge.targetId)) ?? [];
+        if (undirectedIds.length <= 1) {
             return undefined;
         }
-
-        const pairABox = layout.boxes.get(pairA);
-        const pairBBox = layout.boxes.get(pairB);
-        if (!pairABox || !pairBBox) {
+        const sourcePoint = edgePointForEndpoint(edge.sourceId);
+        const targetPoint = edgePointForEndpoint(edge.targetId);
+        if (!sourcePoint || !targetPoint) {
             return undefined;
         }
-        const sx = pairABox.x + (pairABox.width / 2);
-        const sy = pairABox.y + (pairABox.height / 2);
-        const tx = pairBBox.x + (pairBBox.width / 2);
-        const ty = pairBBox.y + (pairBBox.height / 2);
+        const sx = sourcePoint.x;
+        const sy = sourcePoint.y;
+        const tx = targetPoint.x;
+        const ty = targetPoint.y;
         const dx = tx - sx;
         const dy = ty - sy;
         const len = Math.hypot(dx, dy);
         if (!Number.isFinite(len) || len < 1) {
             return undefined;
         }
-        const laneOffset = (laneIndex - ((laneCount - 1) / 2));
-        const offset = (directionSign * 16) + (laneOffset * 10);
+        const forwardIds = (edgeIdsByPair.get(directedPairKey(edge.sourceId, edge.targetId)) ?? [])
+            .slice()
+            .sort((left, right) => left.localeCompare(right));
+        const reverseIds = (edgeIdsByPair.get(directedPairKey(edge.targetId, edge.sourceId)) ?? [])
+            .slice()
+            .sort((left, right) => left.localeCompare(right));
+        let offset = 0;
+        if (forwardIds.length > 0 && reverseIds.length > 0) {
+            const forwardIndex = forwardIds.indexOf(edge.id);
+            const reverseIndex = reverseIds.indexOf(edge.id);
+            if (forwardIndex >= 0) {
+                const laneOffset = forwardIndex - ((forwardIds.length - 1) / 2);
+                offset = 16 + (laneOffset * 10);
+            } else if (reverseIndex >= 0) {
+                const laneOffset = reverseIndex - ((reverseIds.length - 1) / 2);
+                offset = -16 + (laneOffset * 10);
+            } else {
+                return undefined;
+            }
+        } else {
+            const laneIndex = forwardIds.indexOf(edge.id);
+            if (laneIndex < 0 || forwardIds.length <= 1) {
+                return undefined;
+            }
+            const laneOffset = laneIndex - ((forwardIds.length - 1) / 2);
+            offset = laneOffset * 16;
+        }
         if (Math.abs(offset) < 0.01) {
             return undefined;
         }
@@ -844,8 +989,8 @@ async function renderWithX6(
             id: edge.id,
             source: resolveEndpoint(edge.sourceId),
             target: resolveEndpoint(edge.targetId),
-            router: { name: 'normal' },
-            connector: { name: 'rounded' },
+            router: resolveEdgeRouter(resolvedStyle),
+            connector: resolveEdgeConnector(resolvedStyle),
             attrs: {
                 line: lineAttrs,
             },
@@ -862,7 +1007,7 @@ async function renderWithX6(
                     labelBody: resolveEdgeLabelBodyAttrs(resolvedStyle, label.placement),
                 },
             })),
-            zIndex: 5,
+            zIndex: 50,
         });
     }
 
@@ -902,49 +1047,113 @@ async function renderWithX6(
         e.stopPropagation();
     });
 
-    const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value));
+    const sidePriority = (side: PortSide): number => {
+        switch (side) {
+            case 'left':
+                return 0;
+            case 'top':
+                return 1;
+            case 'right':
+                return 2;
+            case 'bottom':
+                return 3;
+        }
+    };
+    const projectPortPlacement = (node: any, clientX: number, clientY: number, preferredSide?: PortSide): PortPlacement | undefined => {
+        if (!node || typeof node.size !== 'function') return undefined;
+        const size = node.size();
+        const position = typeof node.getPosition === 'function'
+            ? node.getPosition()
+            : { x: Number(node?.position?.x ?? 0), y: Number(node?.position?.y ?? 0) };
+        const localPoint = typeof graphView.clientToGraph === 'function'
+            ? graphView.clientToGraph(clientX, clientY)
+            : { x: clientX, y: clientY };
+        const localX = clamp(localPoint.x - position.x, 0, size.width);
+        const localY = clamp(localPoint.y - position.y, 0, size.height);
+        const candidates: Array<{ side: PortSide; distance: number }> = [
+            { side: 'left', distance: localX },
+            { side: 'right', distance: size.width - localX },
+            { side: 'top', distance: localY },
+            { side: 'bottom', distance: size.height - localY },
+        ];
+        candidates.sort((left, right) => left.distance - right.distance || sidePriority(left.side) - sidePriority(right.side));
+        const closest = candidates[0];
+        const preferredCandidate = preferredSide
+            ? candidates.find((candidate) => candidate.side === preferredSide)
+            : undefined;
+        const hysteresis = 8;
+        const side = preferredCandidate && preferredSide && (preferredCandidate.distance - closest.distance) <= hysteresis
+            ? preferredSide
+            : closest.side;
+        const ratio = side === 'left' || side === 'right'
+            ? (size.height > 0 ? localY / size.height : 0.5)
+            : (size.width > 0 ? localX / size.width : 0.5);
+        return {
+            side,
+            ratio: Math.max(0.05, Math.min(0.95, ratio)),
+        };
+    };
     const onPointerMove = (event: PointerEvent): void => {
-        if (!activePortDrag) return;
+        if (!activePortDrag || event.pointerId !== activePortDrag.pointerId) return;
         const node = graphView.getCellById(activePortDrag.nodeId);
         if (!node || typeof node.size !== 'function' || typeof node.getPort !== 'function' || typeof node.setPortProp !== 'function') return;
+        const placement = projectPortPlacement(node, event.clientX, event.clientY, activePortDrag.side);
+        if (!placement) return;
+        if (placement.side === activePortDrag.side && Math.abs(placement.ratio - activePortDrag.ratio) < 0.005) {
+            return;
+        }
         const size = node.size();
-        const deltaY = event.clientY - activePortDrag.startClientY;
-        const nextY = clamp(activePortDrag.startPortY + deltaY, 4, Math.max(4, size.height - 4));
+        const nextX = placement.side === 'left'
+            ? 0
+            : placement.side === 'right'
+                ? size.width
+                : placement.ratio * size.width;
+        const nextY = placement.side === 'top'
+            ? 0
+            : placement.side === 'bottom'
+                ? size.height
+                : placement.ratio * size.height;
+        node.setPortProp(activePortDrag.portId, 'args/x', nextX);
         node.setPortProp(activePortDrag.portId, 'args/y', nextY);
+        node.setPortProp(activePortDrag.portId, 'args/side', placement.side);
+        node.setPortProp(activePortDrag.portId, 'args/ratio', placement.ratio);
+        if (placement.side !== activePortDrag.side) {
+            node.setPortProp(activePortDrag.portId, 'label/position', resolveBorderPortLabelPosition(placement.side));
+        }
+        activePortDrag.side = placement.side;
+        activePortDrag.ratio = placement.ratio;
+        portPlacementById.set(activePortDrag.portId, placement);
     };
-    const onPointerUp = (): void => {
+    const onPointerUp = (event: PointerEvent): void => {
+        if (!activePortDrag || event.pointerId !== activePortDrag.pointerId) return;
+        if (typeof activePortDrag.container.releasePointerCapture === 'function') {
+            try {
+                activePortDrag.container.releasePointerCapture(activePortDrag.pointerId);
+            } catch {
+                // Ignore capture release failures.
+            }
+        }
         activePortDrag = undefined;
     };
     window.addEventListener('pointermove', onPointerMove);
     window.addEventListener('pointerup', onPointerUp);
-    const startPortDrag = (clientY: number, node: any, portId: string): void => {
+    const startPortDrag = (clientX: number, clientY: number, node: any, portId: string, pointerId: number, container: Element): void => {
         if (!node || typeof node.getPort !== 'function') return;
-        const existing = node.getPort(portId);
-        const startPortY = typeof existing?.args?.y === 'number' ? existing.args.y : (node.size().height / 2);
+        const placement = projectPortPlacement(node, clientX, clientY, portPlacementById.get(portId)?.side ?? 'right')
+            ?? portPlacementById.get(portId)
+            ?? { side: 'right' as PortSide, ratio: 0.5 };
         activePortDrag = {
             nodeId: String(node.id),
             portId: String(portId),
-            startClientY: clientY,
-            startPortY,
+            pointerId,
+            side: placement.side,
+            ratio: placement.ratio,
+            container,
         };
     };
-    const onCanvasPointerDown = (event: PointerEvent): void => {
-        if (!isPortPointerTarget(event)) return;
-        const portId = findPortIdFromTarget(event.target);
-        if (!portId) return;
-        const ownerId = ownerByPortId.get(portId);
-        if (!ownerId) return;
-        const node = graphView.getCellById(ownerId);
-        startPortDrag(event.clientY, node, portId);
-        event.preventDefault();
-        event.stopPropagation();
-        if (typeof event.stopImmediatePropagation === 'function') event.stopImmediatePropagation();
-    };
-    liveCanvas.addEventListener('pointerdown', onCanvasPointerDown, true);
     liveCanvas.addEventListener('DOMNodeRemovedFromDocument', () => {
         window.removeEventListener('pointermove', onPointerMove);
         window.removeEventListener('pointerup', onPointerUp);
-        liveCanvas.removeEventListener('pointerdown', onCanvasPointerDown, true);
     }, { once: true });
 
     const resultContainer = liveCanvas.closest('.oml-md-result');
@@ -1348,7 +1557,8 @@ async function loadDagreLib(): Promise<any> {
 
 async function layoutGraphDagre(
     graph: { nodes: NodeSpec[]; edges: EdgeSpec[]; roots: string[] },
-    options: DagreLayoutOptions
+    options: DagreLayoutOptions,
+    rootSpacing: BoxSpacing
 ): Promise<NativeLayoutResult> {
     const dagre = await loadDagreLib();
     const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
@@ -1385,8 +1595,6 @@ async function layoutGraphDagre(
                 stack: {
                     direction: styleLayout.direction === 'horizontal' ? 'horizontal' : 'vertical',
                     gap: clampLayoutNumber(styleLayout.gap, 0, 400, 0),
-                    marginx: clampLayoutNumber(styleLayout.marginx, 0, 200, 0),
-                    marginy: clampLayoutNumber(styleLayout.marginy, 0, 200, 0),
                     stretch: typeof styleLayout.stretch === 'boolean' ? styleLayout.stretch : true,
                 },
             };
@@ -1406,29 +1614,40 @@ async function layoutGraphDagre(
                 rankdir,
                 nodesep: clampLayoutNumber(styleLayout.nodesep, 0, 400, options.nodesep),
                 ranksep: clampLayoutNumber(styleLayout.ranksep, 0, 500, options.ranksep),
-                marginx: clampLayoutNumber(styleLayout.marginx, 0, 200, options.marginx),
-                marginy: clampLayoutNumber(styleLayout.marginy, 0, 200, options.marginy),
             },
         };
     };
 
     const childPositionById = new Map<string, { x: number; y: number }>();
+    const branchChildForParent = (parentId: string | undefined, nodeId: string): string | undefined => {
+        let cursorId: string | undefined = nodeId;
+        while (cursorId) {
+            const node = nodeById.get(cursorId);
+            if (!node) {
+                return undefined;
+            }
+            if (node.parentId === parentId) {
+                return node.id;
+            }
+            cursorId = node.parentId;
+        }
+        return undefined;
+    };
     const edgesBetweenChildren = (parentId: string | undefined, childSet: Set<string>): Array<{ source: string; target: string }> => {
         const seen = new Set<string>();
         const links: Array<{ source: string; target: string }> = [];
         for (const edge of graph.edges) {
             const sourceId = endpointOwner(edge.sourceId);
             const targetId = endpointOwner(edge.targetId);
-            if (!sourceId || !targetId || sourceId === targetId) continue;
-            if (!childSet.has(sourceId) || !childSet.has(targetId)) continue;
-            const sourceNode = nodeById.get(sourceId);
-            const targetNode = nodeById.get(targetId);
-            if (!sourceNode || !targetNode) continue;
-            if (sourceNode.parentId !== parentId || targetNode.parentId !== parentId) continue;
-            const key = `${sourceId}=>${targetId}`;
+            if (!sourceId || !targetId) continue;
+            const sourceBranchId = branchChildForParent(parentId, sourceId);
+            const targetBranchId = branchChildForParent(parentId, targetId);
+            if (!sourceBranchId || !targetBranchId || sourceBranchId === targetBranchId) continue;
+            if (!childSet.has(sourceBranchId) || !childSet.has(targetBranchId)) continue;
+            const key = `${sourceBranchId}=>${targetBranchId}`;
             if (seen.has(key)) continue;
             seen.add(key);
-            links.push({ source: sourceId, target: targetId });
+            links.push({ source: sourceBranchId, target: targetBranchId });
         }
         return links;
     };
@@ -1443,8 +1662,8 @@ async function layoutGraphDagre(
         }
 
         const parent = parentId ? nodeById.get(parentId) : undefined;
-        const topPadding = parent?.contentTopPadding ?? 0;
         const localLayout = layoutOptionsForParent(parentId);
+        const spacing = parent ? resolveBoxSpacing(parent.style, 0) : rootSpacing;
         let totalWidth = 0;
         let totalHeight = 0;
         if (localLayout.type === 'stack') {
@@ -1452,13 +1671,13 @@ async function layoutGraphDagre(
             const childNodes = childIds.map((childId) => nodeById.get(childId)).filter((node): node is NodeSpec => !!node);
             const maxChildWidth = childNodes.reduce((max, child) => Math.max(max, child.width), 0);
             const maxChildHeight = childNodes.reduce((max, child) => Math.max(max, child.height), 0);
-            const parentContentWidth = Math.max(0, (parent?.width ?? 0) - (local.marginx * 2));
-            const parentContentHeight = Math.max(0, (parent?.height ?? 0) - topPadding - (local.marginy * 2));
+            const parentContentWidth = Math.max(0, (parent?.width ?? 0) - spacing.marginLeft - spacing.marginRight - spacing.paddingLeft - spacing.paddingRight);
+            const parentContentHeight = Math.max(0, (parent?.height ?? 0) - spacing.marginTop - spacing.marginBottom - spacing.paddingTop - spacing.paddingBottom);
             const availableWidth = Math.max(maxChildWidth, parentContentWidth);
             const availableHeight = Math.max(maxChildHeight, parentContentHeight);
             const isSingleChild = childNodes.length === 1;
-            let cursorX = local.marginx;
-            let cursorY = topPadding + local.marginy;
+            let cursorX = spacing.marginLeft + spacing.paddingLeft;
+            let cursorY = spacing.marginTop + spacing.paddingTop;
             for (const child of childNodes) {
                 if (local.stretch && isSingleChild) {
                     child.width = Math.max(0, availableWidth);
@@ -1481,16 +1700,16 @@ async function layoutGraphDagre(
                     childNodes.reduce((sum, child) => sum + child.height, 0) + (Math.max(0, childNodes.length - 1) * local.gap)
                 );
                 const contentWidth = Math.max(0, childNodes.reduce((max, child) => Math.max(max, child.width), 0));
-                totalWidth = (local.marginx * 2) + contentWidth;
-                totalHeight = topPadding + (local.marginy * 2) + contentHeight;
+                totalWidth = spacing.marginLeft + spacing.paddingLeft + contentWidth + spacing.paddingRight + spacing.marginRight;
+                totalHeight = spacing.marginTop + spacing.paddingTop + contentHeight + spacing.paddingBottom + spacing.marginBottom;
             } else {
                 const contentWidth = Math.max(
                     0,
                     childNodes.reduce((sum, child) => sum + child.width, 0) + (Math.max(0, childNodes.length - 1) * local.gap)
                 );
                 const contentHeight = Math.max(0, childNodes.reduce((max, child) => Math.max(max, child.height), 0));
-                totalWidth = (local.marginx * 2) + contentWidth;
-                totalHeight = topPadding + (local.marginy * 2) + contentHeight;
+                totalWidth = spacing.marginLeft + spacing.paddingLeft + contentWidth + spacing.paddingRight + spacing.marginRight;
+                totalHeight = spacing.marginTop + spacing.paddingTop + contentHeight + spacing.paddingBottom + spacing.marginBottom;
             }
         } else {
             const localOptions = localLayout.dagre;
@@ -1546,23 +1765,19 @@ async function layoutGraphDagre(
                 const left = laid.x - (width / 2);
                 const top = laid.y - (height / 2);
                 childPositionById.set(childId, {
-                    x: localOptions.marginx + (left - minX),
-                    y: topPadding + localOptions.marginy + (top - minY),
+                    x: spacing.marginLeft + spacing.paddingLeft + (left - minX),
+                    y: spacing.marginTop + spacing.paddingTop + (top - minY),
                 });
             }
 
             const contentWidth = Math.max(0, maxX - minX);
             const contentHeight = Math.max(0, maxY - minY);
-            totalWidth = (localOptions.marginx * 2) + contentWidth;
-            totalHeight = topPadding + (localOptions.marginy * 2) + contentHeight;
+            totalWidth = spacing.marginLeft + spacing.paddingLeft + contentWidth + spacing.paddingRight + spacing.marginRight;
+            totalHeight = spacing.marginTop + spacing.paddingTop + contentHeight + spacing.paddingBottom + spacing.marginBottom;
         }
         if (parent) {
-            if (!parent.hasExplicitWidth) {
-                parent.width = Math.max(parent.width, totalWidth);
-            }
-            if (!parent.hasExplicitHeight) {
-                parent.height = Math.max(parent.height, totalHeight);
-            }
+            parent.width = Math.max(parent.width, totalWidth);
+            parent.height = Math.max(parent.height, totalHeight);
         }
         return { width: totalWidth, height: totalHeight };
     };
@@ -1582,9 +1797,9 @@ async function layoutGraphDagre(
         if (localLayout.type === 'stack') {
             const local = localLayout.stack;
             const childNodes = childIds.map((childId) => nodeById.get(childId)).filter((node): node is NodeSpec => !!node);
-            const topPadding = parent.contentTopPadding;
-            const contentWidth = Math.max(0, parent.width - (local.marginx * 2));
-            const contentHeight = Math.max(0, parent.height - topPadding - (local.marginy * 2));
+            const spacing = resolveBoxSpacing(parent.style, 0);
+            const contentWidth = Math.max(0, parent.width - spacing.marginLeft - spacing.marginRight - spacing.paddingLeft - spacing.paddingRight);
+            const contentHeight = Math.max(0, parent.height - spacing.marginTop - spacing.marginBottom - spacing.paddingTop - spacing.paddingBottom);
             const isSingleChild = childNodes.length === 1;
 
             if (local.stretch) {
@@ -1602,8 +1817,8 @@ async function layoutGraphDagre(
                 }
             }
 
-            let cursorX = local.marginx;
-            let cursorY = topPadding + local.marginy;
+            let cursorX = spacing.marginLeft + spacing.paddingLeft;
+            let cursorY = spacing.marginTop + spacing.paddingTop;
             for (const child of childNodes) {
                 childPositionById.set(child.id, { x: cursorX, y: cursorY });
                 if (local.direction === 'vertical') {
@@ -1819,9 +2034,6 @@ function compileDiagramGraph(
             children: [],
             width: 160,
             height: 70,
-            hasExplicitWidth: false,
-            hasExplicitHeight: false,
-            contentTopPadding: 0,
         });
     }
 
@@ -1899,9 +2111,6 @@ function compileDiagramGraph(
         const estimated = estimateSize(node.kind, baseLabel, node.labels.length, node.style);
         node.width = estimated.width;
         node.height = estimated.height;
-        node.hasExplicitWidth = estimated.hasExplicitWidth;
-        node.hasExplicitHeight = estimated.hasExplicitHeight;
-        node.contentTopPadding = resolveContainerTopPadding(node, baseLabel);
     }
     for (const edge of edges) {
         edge.style = styleFor('edge', edge.id, edge.classes, edge.properties);
@@ -1930,62 +2139,44 @@ function estimateSize(
     label: string,
     labelCount: number,
     style: Record<string, unknown>
-): { width: number; height: number; hasExplicitWidth: boolean; hasExplicitHeight: boolean } {
+): { width: number; height: number } {
     const styledWidth = toPositiveNumber(style.width);
     const styledHeight = toPositiveNumber(style.height);
-    if (styledWidth && styledHeight) {
-        return { width: styledWidth, height: styledHeight, hasExplicitWidth: true, hasExplicitHeight: true };
-    }
+    const attrs = extractStyleAttrs(style);
+    const labelAttrs = asRecord(attrs.label);
+    const labelDisplay = typeof labelAttrs?.display === 'string' ? labelAttrs.display.trim().toLowerCase() : '';
+    const labelOpacity = toNonNegativeNumber(labelAttrs?.opacity);
+    const labelVisible = labelDisplay !== 'none' && (labelOpacity === undefined || labelOpacity > 0);
+    const effectiveLabel = labelVisible ? label : '';
+    const effectiveLabelCount = labelVisible ? labelCount : 0;
     if (kind === 'Port') {
         return {
-            width: styledWidth ?? 14,
-            height: styledHeight ?? 14,
-            hasExplicitWidth: styledWidth !== undefined,
-            hasExplicitHeight: styledHeight !== undefined,
+            width: Math.max(14, styledWidth ?? 0),
+            height: Math.max(14, styledHeight ?? 0),
         };
     }
-    const textWidth = Math.max(24, label.length * 7);
-    const baseWidth = Math.max(72, Math.min(280, textWidth + 26));
+    const textWidth = effectiveLabel.length > 0 ? Math.max(24, effectiveLabel.length * 7) : 0;
+    const baseWidth = effectiveLabel.length > 0 ? Math.max(72, Math.min(280, textWidth + 26)) : 0;
     if (kind === 'Compartment') {
-        const size = { width: baseWidth, height: Math.max(44, 24 + labelCount * 16) };
+        const size = {
+            width: baseWidth,
+            height: effectiveLabelCount > 0 ? Math.max(44, 24 + effectiveLabelCount * 16) : 0,
+        };
         return {
-            width: styledWidth ?? size.width,
-            height: styledHeight ?? size.height,
-            hasExplicitWidth: styledWidth !== undefined,
-            hasExplicitHeight: styledHeight !== undefined,
+            width: Math.max(size.width, styledWidth ?? 0),
+            height: Math.max(size.height, styledHeight ?? 0),
         };
     }
-    const size = { width: baseWidth, height: Math.max(36, 20 + labelCount * 16) };
+    const size = {
+        width: baseWidth,
+        height: effectiveLabelCount > 0 ? Math.max(36, 20 + effectiveLabelCount * 16) : 0,
+    };
     return {
-        width: styledWidth ?? size.width,
-        height: styledHeight ?? size.height,
-        hasExplicitWidth: styledWidth !== undefined,
-        hasExplicitHeight: styledHeight !== undefined,
+        width: Math.max(size.width, styledWidth ?? 0),
+        height: Math.max(size.height, styledHeight ?? 0),
     };
 }
 
-function resolveContainerTopPadding(node: NodeSpec, labelText: string): number {
-    if (node.children.length === 0) {
-        return 0;
-    }
-    const explicitPadding = toNonNegativeNumber(node.style.paddingTop);
-    if (explicitPadding !== undefined) {
-        return Math.ceil(explicitPadding);
-    }
-    const attrs = extractStyleAttrs(node.style);
-    const label = asRecord(attrs.label);
-    if (label?.display === 'none') {
-        return 0;
-    }
-    const labelOpacity = toNonNegativeNumber(label?.opacity);
-    if (labelOpacity !== undefined && labelOpacity <= 0) {
-        return 0;
-    }
-    const fontSize = toPositiveNumber(label?.fontSize) ?? 12;
-    const lineCount = Math.max(1, labelText.split('\n').filter((line) => line.trim().length > 0).length);
-    return Math.ceil((fontSize * 1.2) * lineCount);
-}
-
 function localName(value: string): string {
     return displayLabelFromIri(value);
 }
@@ -2042,9 +2233,7 @@ function resolveDagreLayoutOptions(options: Record<string, unknown> | undefined)
 
     const nodesep = clampLayoutNumber(layout.nodesep, 0, 400, 28);
     const ranksep = clampLayoutNumber(layout.ranksep, 0, 500, 64);
-    const marginx = clampLayoutNumber(layout.marginx, 0, 200, 16);
-    const marginy = clampLayoutNumber(layout.marginy, 0, 200, 16);
-    return { rankdir, nodesep, ranksep, marginx, marginy };
+    return { rankdir, nodesep, ranksep };
 }
 
 function clampLayoutNumber(value: unknown, min: number, max: number, fallback: number): number {
@@ -2054,6 +2243,129 @@ function clampLayoutNumber(value: unknown, min: number, max: number, fallback: n
     return Math.max(min, Math.min(max, Math.round(value)));
 }
 
+function resolveRootSpacing(options: Record<string, unknown> | undefined): BoxSpacing {
+    return readBoxSpacing(options, {
+        marginTop: 16,
+        marginBottom: 16,
+        marginLeft: 16,
+        marginRight: 16,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+    });
+}
+
+function resolveBoxSpacing(style: Record<string, unknown> | undefined, fallbackMargin: number): BoxSpacing {
+    return readBoxSpacing(style, {
+        marginTop: fallbackMargin,
+        marginBottom: fallbackMargin,
+        marginLeft: fallbackMargin,
+        marginRight: fallbackMargin,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+    });
+}
+
+function readBoxSpacing(style: Record<string, unknown> | undefined, defaults: BoxSpacing): BoxSpacing {
+    const source = style ?? {};
+    return {
+        ...readCssBoxSpacing(source.margin, 'margin', defaults),
+        ...readCssBoxSpacing(source.padding, 'padding', defaults),
+    };
+}
+
+function readCssBoxSpacing(
+    value: unknown,
+    kind: 'margin' | 'padding',
+    defaults: BoxSpacing
+): Pick<BoxSpacing, 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'> {
+    const sides = parseCssBoxShorthand(value);
+    const isMargin = kind === 'margin';
+    if (isMargin) {
+        return {
+            marginTop: sides?.top ?? defaults.marginTop,
+            marginRight: sides?.right ?? defaults.marginRight,
+            marginBottom: sides?.bottom ?? defaults.marginBottom,
+            marginLeft: sides?.left ?? defaults.marginLeft,
+            paddingTop: defaults.paddingTop,
+            paddingRight: defaults.paddingRight,
+            paddingBottom: defaults.paddingBottom,
+            paddingLeft: defaults.paddingLeft,
+        };
+    }
+    return {
+        marginTop: defaults.marginTop,
+        marginRight: defaults.marginRight,
+        marginBottom: defaults.marginBottom,
+        marginLeft: defaults.marginLeft,
+        paddingTop: sides?.top ?? defaults.paddingTop,
+        paddingRight: sides?.right ?? defaults.paddingRight,
+        paddingBottom: sides?.bottom ?? defaults.paddingBottom,
+        paddingLeft: sides?.left ?? defaults.paddingLeft,
+    };
+}
+
+function parseCssBoxShorthand(value: unknown): { top?: number; right?: number; bottom?: number; left?: number } | undefined {
+    const values = Array.isArray(value)
+        ? value
+        : typeof value === 'string'
+            ? (value.includes(',') ? undefined : value.trim().split(/\s+/).filter((token) => token.length > 0))
+            : typeof value === 'number'
+                ? [value]
+                : undefined;
+    if (!values || values.length === 0 || values.length > 4) {
+        return undefined;
+    }
+
+    const parsed = values.map((entry) => {
+        if (typeof entry === 'number' && Number.isFinite(entry)) {
+            return entry;
+        }
+        if (typeof entry === 'string') {
+            const next = Number.parseFloat(entry);
+            if (Number.isFinite(next)) {
+                return next;
+            }
+        }
+        return undefined;
+    });
+    if (parsed.some((entry) => entry === undefined)) {
+        return undefined;
+    }
+
+    const clampCssBoxValue = (entry: number | undefined): number | undefined => {
+        if (entry === undefined) return undefined;
+        return Math.max(0, Math.min(200, Math.round(entry)));
+    };
+
+    if (parsed.length === 1) {
+        const single = clampCssBoxValue(parsed[0]);
+        return single === undefined ? undefined : { top: single, right: single, bottom: single, left: single };
+    }
+    if (parsed.length === 2) {
+        const vertical = clampCssBoxValue(parsed[0]);
+        const horizontal = clampCssBoxValue(parsed[1]);
+        if (vertical === undefined || horizontal === undefined) return undefined;
+        return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };
+    }
+    if (parsed.length === 3) {
+        const top = clampCssBoxValue(parsed[0]);
+        const horizontal = clampCssBoxValue(parsed[1]);
+        const bottom = clampCssBoxValue(parsed[2]);
+        if (top === undefined || horizontal === undefined || bottom === undefined) return undefined;
+        return { top, right: horizontal, bottom, left: horizontal };
+    }
+    const top = clampCssBoxValue(parsed[0]);
+    const right = clampCssBoxValue(parsed[1]);
+    const bottom = clampCssBoxValue(parsed[2]);
+    const left = clampCssBoxValue(parsed[3]);
+    if (top === undefined || right === undefined || bottom === undefined || left === undefined) return undefined;
+    return { top, right, bottom, left };
+}
+
 function parseDiagramStylesheet(options: Record<string, unknown> | undefined): DiagramStyleRule[] {
     const stylesheet = options?.stylesheet;
     if (!Array.isArray(stylesheet)) {
@@ -2079,11 +2391,11 @@ function parseDiagramStylesheet(options: Record<string, unknown> | undefined): D
 
 function parseStyleSelector(
     selector: string
-): { elementKind: 'node' | 'compartment' | 'port' | 'edge'; className?: string; condition?: string } | undefined {
-    const match = /^\s*(node|compartment|port|edge)(?:\.([A-Za-z0-9_-]+))?(?:\s*\[(.+)\]\s*)?$/i.exec(selector);
+): { elementKind: 'diagram' | 'node' | 'compartment' | 'port' | 'edge'; className?: string; condition?: string } | undefined {
+    const match = /^\s*(diagram|node|compartment|port|edge)(?:\.([A-Za-z0-9_-]+))?(?:\s*\[(.+)\]\s*)?$/i.exec(selector);
     if (!match) return undefined;
     return {
-        elementKind: match[1].toLowerCase() as 'node' | 'compartment' | 'port' | 'edge',
+        elementKind: match[1].toLowerCase() as 'diagram' | 'node' | 'compartment' | 'port' | 'edge',
         className: match[2]?.trim() || undefined,
         condition: match[3]?.trim() || undefined,
     };
@@ -2093,7 +2405,14 @@ function parseStyleSelector(
 // These pass through as top-level keys so callers can read style.layout, style.width, etc.
 const OML_PASSTHROUGH_STYLE_KEYS = new Set([
     'layout', 'shape', 'width', 'height',
+    'margin', 'padding', 'router', 'connector',
+]);
+
+const LEGACY_BOX_SPACING_KEYS = new Set([
+    'marginTop', 'marginBottom', 'marginLeft', 'marginRight',
     'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight',
+    'margin-top', 'margin-bottom', 'margin-left', 'margin-right',
+    'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
 ]);
 
 // Record-valued top-level style keys that map directly into the attrs sub-tree under the same name.
@@ -2107,7 +2426,7 @@ const ATTRS_RECORD_STYLE_KEYS = new Set([
 ]);
 
 function normalizeDiagramStyle(
-    elementKind: 'node' | 'compartment' | 'port' | 'edge',
+    elementKind: 'diagram' | 'node' | 'compartment' | 'port' | 'edge',
     raw: Record<string, unknown>
 ): Record<string, unknown> {
     const isEdge = elementKind === 'edge';
@@ -2122,6 +2441,10 @@ function normalizeDiagramStyle(
         const key = rawKey.trim();
         if (!key || value === undefined || value === null) continue;
 
+        if (LEGACY_BOX_SPACING_KEYS.has(key)) {
+            continue;
+        }
+
         // OML node-level keys: pass through to the top level of the normalized style object
         if (OML_PASSTHROUGH_STYLE_KEYS.has(key)) { passthrough[key] = value; continue; }
 
@@ -2172,7 +2495,7 @@ function normalizeDiagramStyle(
 }
 
 function resolveElementStyle(
-    elementKind: 'node' | 'compartment' | 'port' | 'edge',
+    elementKind: 'diagram' | 'node' | 'compartment' | 'port' | 'edge',
     value: string,
     classes: string[],
     properties: Record<string, string[]>,
@@ -2410,6 +2733,19 @@ function resolveEdgeLineAttrs(style: Record<string, unknown>): Record<string, un
     };
 }
 
+function resolveEdgeRouter(style: Record<string, unknown>): Record<string, unknown> {
+    const router = asRecord(style.router);
+    return router ?? { name: 'normal' };
+}
+
+function resolveEdgeConnector(style: Record<string, unknown>): Record<string, unknown> {
+    const connector = asRecord(style.connector);
+    return connector ?? {
+        name: 'jumpover',
+        args: { size: 5 },
+    };
+}
+
 function resolveEdgeLabelAttrs(
     style: Record<string, unknown>,
     placement: EdgeLabel['placement'],
@@ -2440,19 +2776,49 @@ function resolveEdgeLabelBodyAttrs(
         fillOpacity: 0.9,
         stroke: 'none',
         strokeWidth: 0,
+        pointerEvents: 'all',
         ...(base ?? {}),
         ...(specific ?? {}),
     };
 }
 
-function resolvePortAttrs(style: Record<string, unknown>, classes: string[], text: string): Record<string, unknown> {
+function resolvePortAttrs(
+    style: Record<string, unknown>,
+    classes: string[],
+    text: string | undefined,
+    side: PortSide = 'right',
+    ownerStroke?: string
+): Record<string, unknown> {
     const attrs = extractStyleAttrs(style);
     const body = asRecord(attrs.body);
     const icon = asRecord(attrs.icon);
     const label = asRecord(attrs.label);
     const imageUrl = extractImageHrefFromIcon(icon);
+    const labelPosition = side === 'left'
+        ? {
+            textAnchor: 'end',
+            x: -10,
+            dy: '0.9em',
+        }
+        : side === 'top'
+            ? {
+                textAnchor: 'middle',
+                x: 0,
+                dy: '-0.3em',
+            }
+            : side === 'bottom'
+                ? {
+                    textAnchor: 'middle',
+                    x: 0,
+                    dy: '1.4em',
+                }
+                : {
+                    textAnchor: 'start',
+                    x: 10,
+                    dy: '0.9em',
+                };
 
-    return {
+    const result: Record<string, unknown> = {
         body: {
             width: 12,
             height: 12,
@@ -2460,7 +2826,7 @@ function resolvePortAttrs(style: Record<string, unknown>, classes: string[], tex
             y: -6,
             class: ['oml-port-body', ...classes].join(' '),
             magnet: false,
-            stroke: CSS_FOCUS_BORDER,
+            stroke: ownerStroke ?? CSS_EDITOR_FOREGROUND,
             strokeWidth: 1,
             fill: CSS_EDITOR_BACKGROUND,
             ...(body ?? {}),
@@ -2475,17 +2841,196 @@ function resolvePortAttrs(style: Record<string, unknown>, classes: string[], tex
             ...(icon ?? {}),
             ...(imageUrl ? { href: imageUrl, xlinkHref: imageUrl, 'xlink:href': imageUrl } : {}),
         },
-        label: {
+    };
+    if (text) {
+        result.label = {
             text,
             fill: CSS_EDITOR_FOREGROUND,
             fontFamily: 'var(--vscode-editor-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)',
             fontSize: 12,
-            textAnchor: 'start',
-            x: 10,
-            dy: '0.9em',
+            ...labelPosition,
             ...(label ?? {}),
-        },
+        };
+    }
+    return result;
+}
+
+function resolveBorderPortLabelPosition(side: PortSide): { name: PortSide } {
+    return { name: side };
+}
+
+function clamp(value: number, min: number, max: number): number {
+    return Math.max(min, Math.min(max, value));
+}
+
+function computeDefaultPortPlacements(
+    graph: { nodes: NodeSpec[]; edges: EdgeSpec[]; roots: string[] },
+    nodeById: Map<string, NodeSpec>,
+    portsByOwner: Map<string, NodeSpec[]>,
+    boxes: Map<string, NodeBox>
+): Map<string, PortPlacement> {
+    const placements = new Map<string, PortPlacement>();
+    const ownerCenter = (nodeId: string): { x: number; y: number } | undefined => {
+        const box = boxes.get(nodeId);
+        if (!box) {
+            return undefined;
+        }
+        return { x: box.x + (box.width / 2), y: box.y + (box.height / 2) };
+    };
+    const portIdsByOwner = new Map<string, Set<string>>();
+    for (const [ownerId, ports] of portsByOwner.entries()) {
+        portIdsByOwner.set(ownerId, new Set(ports.map((port) => port.id)));
+    }
+    const peerPortIdsByPort = new Map<string, string[]>();
+    const peerCentersByPort = new Map<string, Array<{ x: number; y: number }>>();
+    for (const edge of graph.edges) {
+        const source = nodeById.get(edge.sourceId);
+        const target = nodeById.get(edge.targetId);
+        const sourceOwnerId = source?.kind === 'Port' ? source.parentId : source?.id;
+        const targetOwnerId = target?.kind === 'Port' ? target.parentId : target?.id;
+        if (!sourceOwnerId || !targetOwnerId || sourceOwnerId === targetOwnerId) {
+            continue;
+        }
+        const sourcePeer = ownerCenter(targetOwnerId);
+        const targetPeer = ownerCenter(sourceOwnerId);
+        if (source?.kind === 'Port' && sourcePeer) {
+            const peers = peerCentersByPort.get(source.id) ?? [];
+            peers.push(sourcePeer);
+            peerCentersByPort.set(source.id, peers);
+            if (target?.kind === 'Port') {
+                const peerPortIds = peerPortIdsByPort.get(source.id) ?? [];
+                peerPortIds.push(target.id);
+                peerPortIdsByPort.set(source.id, peerPortIds);
+            }
+        }
+        if (target?.kind === 'Port' && targetPeer) {
+            const peers = peerCentersByPort.get(target.id) ?? [];
+            peers.push(targetPeer);
+            peerCentersByPort.set(target.id, peers);
+            if (source?.kind === 'Port') {
+                const peerPortIds = peerPortIdsByPort.get(target.id) ?? [];
+                peerPortIds.push(source.id);
+                peerPortIdsByPort.set(target.id, peerPortIds);
+            }
+        }
+    }
+
+    const anchorFor = (ownerId: string, side: PortSide, ratio: number): { x: number; y: number } | undefined => {
+        const box = boxes.get(ownerId);
+        if (!box) {
+            return undefined;
+        }
+        const clampedRatio = clamp(ratio, 0.05, 0.95);
+        if (side === 'left') {
+            return { x: box.x, y: box.y + (box.height * clampedRatio) };
+        }
+        if (side === 'right') {
+            return { x: box.x + box.width, y: box.y + (box.height * clampedRatio) };
+        }
+        if (side === 'top') {
+            return { x: box.x + (box.width * clampedRatio), y: box.y };
+        }
+        return { x: box.x + (box.width * clampedRatio), y: box.y + box.height };
+    };
+
+    const currentAnchorForPort = (portId: string): { x: number; y: number } | undefined => {
+        const port = nodeById.get(portId);
+        if (!port?.parentId) {
+            return undefined;
+        }
+        const placement = placements.get(portId) ?? { side: 'right' as PortSide, ratio: 0.5 };
+        return anchorFor(port.parentId, placement.side, placement.ratio);
     };
+
+    const peerAnchorsForPort = (portId: string): Array<{ x: number; y: number }> => {
+        const peerAnchors: Array<{ x: number; y: number }> = [];
+        for (const peerPortId of peerPortIdsByPort.get(portId) ?? []) {
+            const anchor = currentAnchorForPort(peerPortId);
+            if (anchor) {
+                peerAnchors.push(anchor);
+            }
+        }
+        for (const peerCenter of peerCentersByPort.get(portId) ?? []) {
+            peerAnchors.push(peerCenter);
+        }
+        return peerAnchors;
+    };
+
+    const candidateCost = (ownerId: string, side: PortSide, portId: string): number => {
+        const owner = ownerCenter(ownerId);
+        const candidate = anchorFor(ownerId, side, 0.5);
+        if (!owner || !candidate) {
+            return Number.POSITIVE_INFINITY;
+        }
+        const peerAnchors = peerAnchorsForPort(portId);
+        if (peerAnchors.length === 0) {
+            return side === 'right' ? 0 : 1;
+        }
+        let cost = 0;
+        for (const peer of peerAnchors) {
+            cost += Math.abs(candidate.x - peer.x) + Math.abs(candidate.y - peer.y);
+        }
+        return cost;
+    };
+
+    const sideOrder: PortSide[] = ['right', 'left', 'top', 'bottom'];
+    const primaryCoordinate = (side: PortSide, portId: string): number => {
+        const peerAnchors = peerAnchorsForPort(portId);
+        if (peerAnchors.length === 0) {
+            return 0;
+        }
+        const values = peerAnchors.map((peer) => ((side === 'left' || side === 'right') ? peer.y : peer.x));
+        return values.reduce((sum, value) => sum + value, 0) / values.length;
+    };
+
+    for (const [ownerId, ports] of portsByOwner.entries()) {
+        const count = ports.length;
+        for (let index = 0; index < count; index += 1) {
+            placements.set(ports[index].id, {
+                side: 'right',
+                ratio: count <= 0 ? 0.5 : ((index + 1) / (count + 1)),
+            });
+        }
+        const ownerPortIds = portIdsByOwner.get(ownerId) ?? new Set<string>();
+        for (let pass = 0; pass < 2; pass += 1) {
+            for (const port of ports) {
+                let bestSide: PortSide = 'right';
+                let bestCost = Number.POSITIVE_INFINITY;
+                for (const side of sideOrder) {
+                    const cost = candidateCost(ownerId, side, port.id);
+                    if (cost < bestCost || (cost === bestCost && sideOrder.indexOf(side) < sideOrder.indexOf(bestSide))) {
+                        bestCost = cost;
+                        bestSide = side;
+                    }
+                }
+                const existing = placements.get(port.id) ?? { ratio: 0.5, side: bestSide };
+                placements.set(port.id, { side: bestSide, ratio: existing.ratio });
+            }
+            const sideGroups = new Map<PortSide, NodeSpec[]>([
+                ['left', []],
+                ['right', []],
+                ['top', []],
+                ['bottom', []],
+            ]);
+            for (const port of ports) {
+                sideGroups.get(placements.get(port.id)?.side ?? 'right')?.push(port);
+            }
+            for (const [side, sidePorts] of sideGroups.entries()) {
+                sidePorts.sort((left, right) => (
+                    primaryCoordinate(side, left.id) - primaryCoordinate(side, right.id)
+                    || left.id.localeCompare(right.id)
+                ));
+                for (let index = 0; index < sidePorts.length; index += 1) {
+                    placements.set(sidePorts[index].id, {
+                        side,
+                        ratio: (index + 1) / (sidePorts.length + 1),
+                    });
+                }
+            }
+            void ownerPortIds;
+        }
+    }
+    return placements;
 }
 
 function toPositiveNumber(value: unknown): number | undefined {