@oml/markdown 0.10.0 → 0.11.0

package/out/renderers/diagram-renderer.js

@@ -55,12 +55,15 @@ 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) => this.requestTextFileDownload(content, 'diagram', 'svg'),
         }).catch((error) => {
             const detail = error instanceof Error ? error.message : String(error);
@@ -76,7 +79,7 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
         return;
     }
     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));
     const desiredHeight = Math.max(minHeight, Math.ceil(layout.contentHeight + 12));
     setLockedCanvasHeight(liveCanvas, desiredHeight, minHeight);
@@ -84,30 +87,23 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
     let isResizingCanvas = false;
     const isPortPointerTarget = (event) => {
         const target = event?.target;
-        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() : [];
         return path.some((entry) => (entry instanceof Element
             && (entry.classList.contains('x6-port')
                 || entry.classList.contains('x6-port-body')
-                || entry.classList.contains('oml-port-body'))));
-    };
-    const findPortIdFromTarget = (target) => {
-        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;
+                || entry.classList.contains('oml-port-body')
+                || entry.hasAttribute('port'))));
     };
     const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
     const isCompartmentNode = (node) => {
         const nodeId = String(node?.id ?? '');
         return nodeById.get(nodeId)?.kind === 'Compartment';
     };
+    const boundPortContainers = new WeakSet();
+    let nodeTransform;
     const graphView = new GraphCtor({
         container: liveCanvas,
         autoResize: false,
@@ -121,7 +117,10 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
         },
         connecting: {
             router: 'normal',
-            connector: 'rounded',
+            connector: {
+                name: 'jumpover',
+                args: { size: 5 },
+            },
             allowBlank: false,
             allowNode: false,
             allowPort: false,
@@ -137,13 +136,65 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
                 edgeMovable: false,
                 vertexMovable: false,
                 arrowheadMovable: false,
-                labelMovable: false,
+                labelMovable: true,
             };
         },
         background: {
             color: CSS_CANVAS_BACKGROUND,
         },
+        onPortRendered: ({ port, node, container }) => {
+            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) => {
+                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.Transform;
+    if (typeof TransformCtor !== 'function') {
+        throw new Error('X6 Transform plugin is unavailable in @antv/x6');
+    }
+    nodeTransform = new TransformCtor({
+        resizing: {
+            enabled: (node) => 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) => {
         if (!value)
             return undefined;
@@ -178,12 +229,7 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
     for (const list of portsByOwner.values()) {
         list.sort((a, b) => a.id.localeCompare(b.id));
     }
-    const ownerByPortId = new Map();
-    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));
@@ -194,19 +240,35 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
         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', 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,
@@ -310,7 +372,7 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
                 },
                 items: portItems,
             } : undefined,
-            zIndex: 10,
+            zIndex: 50,
             data: {
                 kind: node.kind,
                 ownerId: node.parentId,
@@ -457,11 +519,32 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
         let maxBottom = Number.NEGATIVE_INFINITY;
         const childCells = [];
         const childDebug = [];
+        const childGeometryBounds = (child) => {
+            if (!child || typeof child.size !== 'function') {
+                return undefined;
+            }
+            const size = child.size();
+            const width = Number(size?.width);
+            const height = Number(size?.height);
+            let position;
+            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')
+            const absBBox = childGeometryBounds(child);
+            if (!absBBox)
                 continue;
-            const absBBox = child.getBBox();
             const relLeft = absBBox.x - containerBBox.x;
             const relTop = absBBox.y - containerBBox.y;
             minLeft = Math.min(minLeft, relLeft);
@@ -493,10 +576,11 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
         // 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;
@@ -509,7 +593,8 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
             childIds,
             containerBBox: toPlainRect(containerBBox),
             containerSize: toPlainRect({ x: 0, y: 0, ...containerSize }),
-            topPadding,
+            minInsetX,
+            minInsetY,
             bounds: { minLeft, minTop, maxRight, maxBottom },
             shift: { shiftX, shiftY },
             childDebug,
@@ -526,6 +611,7 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
                 to: { width: neededWidth, height: neededHeight },
             });
             container.resize(neededWidth, neededHeight);
+            syncOwnedPortPositions(containerId);
         }
         else {
             logResize('container-no-resize', { containerId });
@@ -610,6 +696,48 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
             return;
         growAncestorContainers(node);
     });
+    const syncOwnedPortPositions = (ownerId) => {
+        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()
+            .map((port) => String(port?.id ?? ''))
+            .filter((portId) => portId.length > 0);
+        for (const portId of portIds) {
+            const placement = portPlacementById.get(portId) ?? { side: 'right', 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 }) => {
+        syncOwnedPortPositions(String(node?.id ?? ''));
+    });
+    graphView.on('node:resized', ({ node, options }) => {
+        if (options?.silent)
+            return;
+        syncOwnedPortPositions(String(node?.id ?? ''));
+        growAncestorContainers(node);
+    });
     const edgeLabelPosition = (placement) => {
         if (placement === 'begin')
             return 0.15;
@@ -617,105 +745,104 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
             return 0.85;
         return 0.5;
     };
-    const endpointOwnerId = (nodeId) => {
-        const node = nodeById.get(nodeId);
-        if (!node)
-            return undefined;
-        return node.kind === 'Port' ? node.parentId : node.id;
-    };
-    const undirectedPairKey = (a, b) => (a < b ? `${a}<->${b}` : `${b}<->${a}`);
-    const edgeById = new Map(graph.edges.map((edge) => [edge.id, edge]));
+    const directedPairKey = (sourceId, targetId) => `${sourceId}=>${targetId}`;
+    const undirectedPairKey = (leftId, rightId) => (leftId < rightId ? `${leftId}<=>${rightId}` : `${rightId}<=>${leftId}`);
+    const edgeIdsByPair = new Map();
     const undirectedEdgeIdsByPair = new Map();
     for (const edge of graph.edges) {
-        const sourceOwner = endpointOwnerId(edge.sourceId);
-        const targetOwner = endpointOwnerId(edge.targetId);
-        if (!sourceOwner || !targetOwner || sourceOwner === targetOwner)
+        if (!edge.sourceId || !edge.targetId)
             continue;
-        const key = undirectedPairKey(sourceOwner, targetOwner);
-        const ids = undirectedEdgeIdsByPair.get(key) ?? [];
+        const key = directedPairKey(edge.sourceId, edge.targetId);
+        const ids = edgeIdsByPair.get(key) ?? [];
         ids.push(edge.id);
-        undirectedEdgeIdsByPair.set(key, ids);
-    }
-    const fanningVertexForEdge = (edge) => {
-        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) => {
+        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 = [];
-        const reverseIds = [];
-        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);
+        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) };
             }
-            else if (pairSource === pairB && pairTarget === pairA) {
-                reverseIds.push(edgeId);
+            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) => {
+        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;
         }
@@ -750,8 +877,8 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
             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,
             },
@@ -768,7 +895,7 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
                     labelBody: resolveEdgeLabelBodyAttrs(resolvedStyle, label.placement),
                 },
             })),
-            zIndex: 5,
+            zIndex: 50,
         });
     }
     // Compartments are structural containers: do not drag them; select parent instead.
@@ -806,56 +933,120 @@ async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
         e.preventDefault();
         e.stopPropagation();
     });
-    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+    const sidePriority = (side) => {
+        switch (side) {
+            case 'left':
+                return 0;
+            case 'top':
+                return 1;
+            case 'right':
+                return 2;
+            case 'bottom':
+                return 3;
+        }
+    };
+    const projectPortPlacement = (node, clientX, clientY, preferredSide) => {
+        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 = [
+            { 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) => {
-        if (!activePortDrag)
+        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 = () => {
+    const onPointerUp = (event) => {
+        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, node, portId) => {
+    const startPortDrag = (clientX, clientY, node, portId, pointerId, container) => {
         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', 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) => {
-        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');
     const resizeObserver = new ResizeObserver(() => {
@@ -1238,7 +1429,7 @@ async function loadDagreLib() {
     dagreLib = mod.default ?? mod;
     return dagreLib;
 }
-async function layoutGraphDagre(graph, options) {
+async function layoutGraphDagre(graph, options, rootSpacing) {
     const dagre = await loadDagreLib();
     const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
     const layoutNodes = graph.nodes.filter((node) => node.kind !== 'Port');
@@ -1275,8 +1466,6 @@ async function layoutGraphDagre(graph, options) {
                 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,
                 },
             };
@@ -1296,33 +1485,43 @@ async function layoutGraphDagre(graph, options) {
                 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();
+    const branchChildForParent = (parentId, nodeId) => {
+        let cursorId = 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, childSet) => {
         const seen = new Set();
         const links = [];
         for (const edge of graph.edges) {
             const sourceId = endpointOwner(edge.sourceId);
             const targetId = endpointOwner(edge.targetId);
-            if (!sourceId || !targetId || sourceId === targetId)
+            if (!sourceId || !targetId)
                 continue;
-            if (!childSet.has(sourceId) || !childSet.has(targetId))
+            const sourceBranchId = branchChildForParent(parentId, sourceId);
+            const targetBranchId = branchChildForParent(parentId, targetId);
+            if (!sourceBranchId || !targetBranchId || sourceBranchId === targetBranchId)
                 continue;
-            const sourceNode = nodeById.get(sourceId);
-            const targetNode = nodeById.get(targetId);
-            if (!sourceNode || !targetNode)
+            if (!childSet.has(sourceBranchId) || !childSet.has(targetBranchId))
                 continue;
-            if (sourceNode.parentId !== parentId || targetNode.parentId !== parentId)
-                continue;
-            const key = `${sourceId}=>${targetId}`;
+            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;
     };
@@ -1335,8 +1534,8 @@ async function layoutGraphDagre(graph, options) {
             return { width: 0, height: 0 };
         }
         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') {
@@ -1344,13 +1543,13 @@ async function layoutGraphDagre(graph, options) {
             const childNodes = childIds.map((childId) => nodeById.get(childId)).filter((node) => !!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);
@@ -1373,14 +1572,14 @@ async function layoutGraphDagre(graph, options) {
             if (local.direction === 'vertical') {
                 const contentHeight = Math.max(0, 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 {
@@ -1438,22 +1637,18 @@ async function layoutGraphDagre(graph, options) {
                 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 };
     };
@@ -1471,9 +1666,9 @@ async function layoutGraphDagre(graph, options) {
         if (localLayout.type === 'stack') {
             const local = localLayout.stack;
             const childNodes = childIds.map((childId) => nodeById.get(childId)).filter((node) => !!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) {
                 for (const child of childNodes) {
@@ -1490,8 +1685,8 @@ async function layoutGraphDagre(graph, options) {
                     }
                 }
             }
-            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') {
@@ -1692,9 +1887,6 @@ function compileDiagramGraph(index, stylesheet) {
             children: [],
             width: 160,
             height: 70,
-            hasExplicitWidth: false,
-            hasExplicitHeight: false,
-            contentTopPadding: 0,
         });
     }
     const validParent = (child, parent) => {
@@ -1777,9 +1969,6 @@ function compileDiagramGraph(index, stylesheet) {
         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);
@@ -1807,57 +1996,40 @@ function compileDiagramGraph(index, stylesheet) {
 function estimateSize(kind, label, labelCount, style) {
     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, labelText) {
-    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) {
     return displayLabelFromIri(value);
 }
@@ -1907,9 +2079,7 @@ function resolveDagreLayoutOptions(options) {
         : 'LR';
     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, min, max, fallback) {
     if (typeof value !== 'number' || !Number.isFinite(value)) {
@@ -1917,6 +2087,121 @@ function clampLayoutNumber(value, min, max, fallback) {
     }
     return Math.max(min, Math.min(max, Math.round(value)));
 }
+function resolveRootSpacing(options) {
+    return readBoxSpacing(options, {
+        marginTop: 16,
+        marginBottom: 16,
+        marginLeft: 16,
+        marginRight: 16,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+    });
+}
+function resolveBoxSpacing(style, fallbackMargin) {
+    return readBoxSpacing(style, {
+        marginTop: fallbackMargin,
+        marginBottom: fallbackMargin,
+        marginLeft: fallbackMargin,
+        marginRight: fallbackMargin,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+    });
+}
+function readBoxSpacing(style, defaults) {
+    const source = style ?? {};
+    return {
+        ...readCssBoxSpacing(source.margin, 'margin', defaults),
+        ...readCssBoxSpacing(source.padding, 'padding', defaults),
+    };
+}
+function readCssBoxSpacing(value, kind, defaults) {
+    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) {
+    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) => {
+        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) {
     const stylesheet = options?.stylesheet;
     if (!Array.isArray(stylesheet)) {
@@ -1943,7 +2228,7 @@ function parseDiagramStylesheet(options) {
     return rules;
 }
 function parseStyleSelector(selector) {
-    const match = /^\s*(node|compartment|port|edge)(?:\.([A-Za-z0-9_-]+))?(?:\s*\[(.+)\]\s*)?$/i.exec(selector);
+    const match = /^\s*(diagram|node|compartment|port|edge)(?:\.([A-Za-z0-9_-]+))?(?:\s*\[(.+)\]\s*)?$/i.exec(selector);
     if (!match)
         return undefined;
     return {
@@ -1956,7 +2241,13 @@ function parseStyleSelector(selector) {
 // 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.
 // 'label' and 'icon' cover nodes, compartments, ports, and edges.
@@ -1978,6 +2269,9 @@ function normalizeDiagramStyle(elementKind, raw) {
         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;
@@ -2254,6 +2548,17 @@ function resolveEdgeLineAttrs(style) {
         ...(line ?? {}),
     };
 }
+function resolveEdgeRouter(style) {
+    const router = asRecord(style.router);
+    return router ?? { name: 'normal' };
+}
+function resolveEdgeConnector(style) {
+    const connector = asRecord(style.connector);
+    return connector ?? {
+        name: 'jumpover',
+        args: { size: 5 },
+    };
+}
 function resolveEdgeLabelAttrs(style, placement, text) {
     const attrs = extractStyleAttrs(style);
     const base = asRecord(attrs.label);
@@ -2276,17 +2581,41 @@ function resolveEdgeLabelBodyAttrs(style, placement) {
         fillOpacity: 0.9,
         stroke: 'none',
         strokeWidth: 0,
+        pointerEvents: 'all',
         ...(base ?? {}),
         ...(specific ?? {}),
     };
 }
-function resolvePortAttrs(style, classes, text) {
+function resolvePortAttrs(style, classes, text, side = 'right', ownerStroke) {
     const attrs = extractStyleAttrs(style);
     const body = asRecord(attrs.body);
     const icon = asRecord(attrs.icon);
     const label = asRecord(attrs.label);
     const imageUrl = extractImageHrefFromIcon(icon);
-    return {
+    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',
+                };
+    const result = {
         body: {
             width: 12,
             height: 12,
@@ -2294,7 +2623,7 @@ function resolvePortAttrs(style, classes, text) {
             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 ?? {}),
@@ -2309,17 +2638,180 @@ function resolvePortAttrs(style, classes, text) {
             ...(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) {
+    return { name: side };
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function computeDefaultPortPlacements(graph, nodeById, portsByOwner, boxes) {
+    const placements = new Map();
+    const ownerCenter = (nodeId) => {
+        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();
+    for (const [ownerId, ports] of portsByOwner.entries()) {
+        portIdsByOwner.set(ownerId, new Set(ports.map((port) => port.id)));
+    }
+    const peerPortIdsByPort = new Map();
+    const peerCentersByPort = new Map();
+    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, side, ratio) => {
+        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) => {
+        const port = nodeById.get(portId);
+        if (!port?.parentId) {
+            return undefined;
+        }
+        const placement = placements.get(portId) ?? { side: 'right', ratio: 0.5 };
+        return anchorFor(port.parentId, placement.side, placement.ratio);
+    };
+    const peerAnchorsForPort = (portId) => {
+        const peerAnchors = [];
+        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, side, portId) => {
+        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 = ['right', 'left', 'top', 'bottom'];
+    const primaryCoordinate = (side, portId) => {
+        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();
+        for (let pass = 0; pass < 2; pass += 1) {
+            for (const port of ports) {
+                let bestSide = '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([
+                ['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) {
     if (typeof value === 'number' && Number.isFinite(value) && value > 0) {