@oml/markdown 0.10.0 → 0.11.0

package/out/static/browser-runtime.bundle.js

@@ -62149,11 +62149,19 @@
       container.appendChild(chartRoot);
       const canvasEl = document.createElement("canvas");
       chartRoot.appendChild(canvasEl);
-      initializeChartWhenReady(chartRoot, canvasEl, payload.columns, payload.rows, parsed, container);
+      initializeChartWhenReady(
+        chartRoot,
+        canvasEl,
+        payload.columns,
+        payload.rows,
+        parsed,
+        container,
+        (content9) => this.requestTextFileDownload(content9, "chart", "csv")
+      );
       return container;
     }
   };
-  function initializeChartWhenReady(chartRoot, canvasEl, columns, rows, parsed, messageContainer) {
+  function initializeChartWhenReady(chartRoot, canvasEl, columns, rows, parsed, messageContainer, downloadCsv) {
     const maxAttempts = 20;
     let attempts = 0;
     const tryInit = () => {
@@ -62162,7 +62170,7 @@
         if (attempts < maxAttempts) requestAnimationFrame(tryInit);
         return;
       }
-      void doChartInit(chartRoot, canvasEl, columns, rows, parsed).catch((err) => {
+      void doChartInit(chartRoot, canvasEl, columns, rows, parsed, downloadCsv).catch((err) => {
         const detail = err instanceof Error ? err.message : String(err);
         const msg = document.createElement("div");
         msg.className = "oml-md-result-message";
@@ -62172,7 +62180,7 @@
     };
     requestAnimationFrame(tryInit);
   }
-  async function doChartInit(chartRoot, canvasEl, columns, rows, parsed) {
+  async function doChartInit(chartRoot, canvasEl, columns, rows, parsed, downloadCsv) {
     const ChartCtor = await loadChartJs();
     let chart = null;
     const buildAndRender = () => {
@@ -62184,6 +62192,7 @@
       chart = new ChartCtor(canvasEl, config);
     };
     buildAndRender();
+    installChartToolbar(chartRoot, columns, rows, downloadCsv);
     const resizeObserver = new ResizeObserver(() => {
       if (!chartRoot.isConnected) return;
       chart?.resize();
@@ -62256,6 +62265,73 @@
     resizeHandle.addEventListener("pointerup", onResizePointerEnd);
     resizeHandle.addEventListener("pointercancel", onResizePointerEnd);
   }
+  function installChartToolbar(chartRoot, columns, rows, downloadCsv) {
+    if (chartRoot.querySelector(".graph-corner-toolbar")) {
+      return;
+    }
+    const hotspot = document.createElement("div");
+    hotspot.className = "graph-corner-hotspot";
+    chartRoot.appendChild(hotspot);
+    const toolbar = document.createElement("div");
+    toolbar.className = "graph-corner-toolbar";
+    const downloadButton = createDownloadButton();
+    downloadButton.addEventListener("click", () => {
+      downloadCsv(toCsv(columns, rows));
+    });
+    toolbar.appendChild(downloadButton);
+    chartRoot.appendChild(toolbar);
+    let hideTimer = 0;
+    const showToolbar = () => {
+      if (hideTimer) {
+        window.clearTimeout(hideTimer);
+        hideTimer = 0;
+      }
+      chartRoot.classList.add("graph-toolbar-visible");
+    };
+    const scheduleHideToolbar = () => {
+      hideTimer = window.setTimeout(() => {
+        chartRoot.classList.remove("graph-toolbar-visible");
+        hideTimer = 0;
+      }, 120);
+    };
+    hotspot.addEventListener("mouseenter", showToolbar);
+    toolbar.addEventListener("mouseenter", showToolbar);
+    hotspot.addEventListener("mouseleave", scheduleHideToolbar);
+    toolbar.addEventListener("mouseleave", scheduleHideToolbar);
+    const swallowPointer = (event) => {
+      event.stopPropagation();
+    };
+    toolbar.addEventListener("pointerdown", swallowPointer, true);
+    toolbar.addEventListener("mousedown", swallowPointer, true);
+    downloadButton.addEventListener("pointerdown", swallowPointer, true);
+    downloadButton.addEventListener("mousedown", swallowPointer, true);
+  }
+  function createDownloadButton() {
+    const downloadButton = document.createElement("button");
+    downloadButton.className = "tree-download-btn";
+    downloadButton.title = "Download CSV";
+    downloadButton.setAttribute("aria-label", "Download CSV");
+    const iconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    iconSvg.setAttribute("viewBox", "0 0 24 24");
+    iconSvg.setAttribute("width", "20");
+    iconSvg.setAttribute("height", "20");
+    iconSvg.setAttribute("aria-hidden", "true");
+    iconSvg.setAttribute("focusable", "false");
+    iconSvg.style.fill = "currentColor";
+    const iconPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    iconPath.setAttribute("d", "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z");
+    iconSvg.appendChild(iconPath);
+    downloadButton.appendChild(iconSvg);
+    return downloadButton;
+  }
+  function toCsv(columns, rows) {
+    const escape = (value) => `"${String(value ?? "").replace(/"/g, '""')}"`;
+    const lines = [columns.map(escape).join(",")];
+    for (const row of rows) {
+      lines.push(columns.map((_2, index3) => escape(row[index3] ?? "")).join(","));
+    }
+    return lines.join("\n");
+  }
   async function loadChartJs() {
     if (chartClass) return chartClass;
     const mod3 = await Promise.resolve().then(() => (init_auto(), auto_exports));
@@ -62520,12 +62596,15 @@
       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: (content9) => this.requestTextFileDownload(content9, "diagram", "svg")
       }).catch((error) => {
         const detail = error instanceof Error ? error.message : String(error);
@@ -62541,7 +62620,7 @@
       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(void 0)
@@ -62552,23 +62631,19 @@
     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 path2 = typeof event?.composedPath === "function" ? event.composedPath() : [];
-      return path2.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 void 0;
-      const portHost = target.closest(".x6-port");
-      if (!portHost) return void 0;
-      return portHost.getAttribute("port") ?? portHost.getAttribute("data-port-id") ?? void 0;
+      return path2.some((entry) => entry instanceof Element && (entry.classList.contains("x6-port") || entry.classList.contains("x6-port-body") || 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 = /* @__PURE__ */ new WeakSet();
+    let nodeTransform;
     const graphView = new GraphCtor({
       container: liveCanvas,
       autoResize: false,
@@ -62582,7 +62657,10 @@
       },
       connecting: {
         router: "normal",
-        connector: "rounded",
+        connector: {
+          name: "jumpover",
+          args: { size: 5 }
+        },
         allowBlank: false,
         allowNode: false,
         allowPort: false,
@@ -62598,13 +62676,63 @@
           edgeMovable: false,
           vertexMovable: false,
           arrowheadMovable: false,
-          labelMovable: false
+          labelMovable: true
         };
       },
       background: {
         color: CSS_CANVAS_BACKGROUND
+      },
+      onPortRendered: ({ port: port2, node, container }) => {
+        if (boundPortContainers.has(container)) {
+          return;
+        }
+        boundPortContainers.add(container);
+        container.setAttribute("data-port-id", String(port2.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(port2.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 {
+            }
+          }
+        });
       }
     });
+    const x6Mod = await Promise.resolve().then(() => (init_es(), es_exports));
+    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 void 0;
       const x = Number(value.x);
@@ -62637,12 +62765,7 @@
     for (const list of portsByOwner.values()) {
       list.sort((a, b) => a.id.localeCompare(b.id));
     }
-    const ownerByPortId = /* @__PURE__ */ new Map();
-    for (const [ownerId, ports] of portsByOwner.entries()) {
-      for (const port2 of ports) {
-        ownerByPortId.set(port2.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));
     for (const node of ordered) {
       const box = layout.boxes.get(node.id);
@@ -62650,19 +62773,39 @@
       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 y2 = box.y;
       const ownerPorts = portsByOwner.get(node.id) ?? [];
-      const portItems = ownerPorts.map((port2, index3) => ({
-        id: port2.id,
-        group: "boundary",
-        args: {
-          x: box.width,
-          y: (index3 + 1) * box.height / (ownerPorts.length + 1)
-        },
-        attrs: resolvePortAttrs(port2.style, port2.classes, port2.labels[0] ?? "Port")
-      }));
-      const { bodyAttrs, labelAttrs, iconSvgAttrs, iconPathAttrs, imageAttrs } = resolveNodeAttrs(resolvedStyle);
+      const portItems = ownerPorts.map((port2) => {
+        const placement = portPlacementById.get(port2.id) ?? { side: "right", ratio: 0.5 };
+        const ratio2 = clamp3(placement.ratio, 0.05, 0.95);
+        const position2 = placement.side === "left" || placement.side === "right" ? {
+          x: placement.side === "left" ? 0 : box.width,
+          y: ratio2 * box.height
+        } : {
+          x: ratio2 * box.width,
+          y: placement.side === "top" ? 0 : box.height
+        };
+        const portText = port2.labels[0];
+        return {
+          id: port2.id,
+          group: "boundary",
+          args: {
+            x: position2.x,
+            y: position2.y,
+            side: placement.side,
+            ratio: ratio2
+          },
+          attrs: resolvePortAttrs(
+            port2.style,
+            port2.classes,
+            portText,
+            placement.side,
+            typeof bodyAttrs.stroke === "string" ? bodyAttrs.stroke : void 0
+          )
+        };
+      });
       const iconPathSelectors = iconPathAttrs.map((_2, index3) => `iconPath${index3}`);
       graphView.addNode({
         id: node.id,
@@ -62766,7 +62909,7 @@
           },
           items: portItems
         } : void 0,
-        zIndex: 10,
+        zIndex: 50,
         data: {
           kind: node.kind,
           ownerId: node.parentId
@@ -62893,10 +63036,30 @@
       let maxBottom = Number.NEGATIVE_INFINITY;
       const childCells = [];
       const childDebug = [];
+      const childGeometryBounds = (child) => {
+        if (!child || typeof child.size !== "function") {
+          return void 0;
+        }
+        const size = child.size();
+        const width2 = Number(size?.width);
+        const height2 = Number(size?.height);
+        let position2;
+        if (typeof child.getPosition === "function") {
+          position2 = child.getPosition();
+        } else {
+          position2 = child.position;
+        }
+        const x = Number(position2?.x);
+        const y2 = Number(position2?.y);
+        if (![x, y2, width2, height2].every(Number.isFinite)) {
+          return void 0;
+        }
+        return { x, y: y2, width: width2, height: height2 };
+      };
       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);
@@ -62924,9 +63087,11 @@
         });
         return;
       }
-      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;
       const baseWidth = containerSize.width - shiftX;
       const baseHeight = containerSize.height - shiftY;
       const neededWidth = Math.ceil(Math.max(baseWidth, maxRight - shiftX));
@@ -62938,7 +63103,8 @@
         childIds,
         containerBBox: toPlainRect(containerBBox),
         containerSize: toPlainRect({ x: 0, y: 0, ...containerSize }),
-        topPadding,
+        minInsetX,
+        minInsetY,
         bounds: { minLeft, minTop, maxRight, maxBottom },
         shift: { shiftX, shiftY },
         childDebug,
@@ -62957,6 +63123,7 @@
           to: { width: neededWidth, height: neededHeight }
         });
         container.resize(neededWidth, neededHeight);
+        syncOwnedPortPositions(containerId);
       } else {
         logResize("container-no-resize", { containerId });
       }
@@ -63027,100 +63194,138 @@
       if (!isPrimaryMover(node, options)) 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((port2) => String(port2?.id ?? "")).filter((portId) => portId.length > 0);
+      for (const portId of portIds) {
+        const placement = portPlacementById.get(portId) ?? { side: "right", ratio: 0.5 };
+        const ratio2 = clamp3(placement.ratio, 0.05, 0.95);
+        const nextArgs = placement.side === "left" || placement.side === "right" ? {
+          x: placement.side === "left" ? 0 : size.width,
+          y: ratio2 * size.height,
+          side: placement.side,
+          ratio: ratio2
+        } : {
+          x: ratio2 * size.width,
+          y: placement.side === "top" ? 0 : size.height,
+          side: placement.side,
+          ratio: ratio2
+        };
+        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;
       if (placement === "end") return 0.85;
       return 0.5;
     };
-    const endpointOwnerId = (nodeId) => {
-      const node = nodeById.get(nodeId);
-      if (!node) return void 0;
-      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 = /* @__PURE__ */ new Map();
     const undirectedEdgeIdsByPair = /* @__PURE__ */ new Map();
     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) => {
-      const sourceOwner = endpointOwnerId(edge.sourceId);
-      const targetOwner = endpointOwnerId(edge.targetId);
-      if (!sourceOwner || !targetOwner || sourceOwner === targetOwner) {
+      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 void 0;
       }
-      const edgeIds = undirectedEdgeIdsByPair.get(undirectedPairKey(sourceOwner, targetOwner)) ?? [];
-      if (edgeIds.length <= 1) {
+      if (endpoint.kind === "Port" && endpoint.parentId) {
+        const ownerBox = layout.boxes.get(endpoint.parentId);
+        const placement = portPlacementById.get(endpoint.id);
+        if (!ownerBox || !placement) {
+          return void 0;
+        }
+        const ratio2 = clamp3(placement.ratio, 0.05, 0.95);
+        if (placement.side === "left") {
+          return { x: ownerBox.x, y: ownerBox.y + ownerBox.height * ratio2 };
+        }
+        if (placement.side === "right") {
+          return { x: ownerBox.x + ownerBox.width, y: ownerBox.y + ownerBox.height * ratio2 };
+        }
+        if (placement.side === "top") {
+          return { x: ownerBox.x + ownerBox.width * ratio2, y: ownerBox.y };
+        }
+        return { x: ownerBox.x + ownerBox.width * ratio2, y: ownerBox.y + ownerBox.height };
+      }
+      const box = layout.boxes.get(endpointId);
+      if (!box) {
         return void 0;
       }
-      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);
-        } else if (pairSource === pairB && pairTarget === pairA) {
-          reverseIds.push(edgeId);
-        }
-      }
-      if (forwardIds.length === 0 || reverseIds.length === 0) {
+      return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+    };
+    const fanningVertexForEdge = (edge) => {
+      if (!edge.sourceId || !edge.targetId) {
         return void 0;
       }
-      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;
-      }
-      if (directionSign === 0 || laneIndex < 0 || laneCount <= 0) {
+      const undirectedIds = undirectedEdgeIdsByPair.get(undirectedPairKey(edge.sourceId, edge.targetId)) ?? [];
+      if (undirectedIds.length <= 1) {
         return void 0;
       }
-      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 void 0;
       }
-      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 void 0;
       }
-      const laneOffset = laneIndex - (laneCount - 1) / 2;
-      const offset4 = directionSign * 16 + laneOffset * 10;
+      const forwardIds = (edgeIdsByPair.get(directedPairKey(edge.sourceId, edge.targetId)) ?? []).slice().sort((left4, right4) => left4.localeCompare(right4));
+      const reverseIds = (edgeIdsByPair.get(directedPairKey(edge.targetId, edge.sourceId)) ?? []).slice().sort((left4, right4) => left4.localeCompare(right4));
+      let offset4 = 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;
+          offset4 = 16 + laneOffset * 10;
+        } else if (reverseIndex >= 0) {
+          const laneOffset = reverseIndex - (reverseIds.length - 1) / 2;
+          offset4 = -16 + laneOffset * 10;
+        } else {
+          return void 0;
+        }
+      } else {
+        const laneIndex = forwardIds.indexOf(edge.id);
+        if (laneIndex < 0 || forwardIds.length <= 1) {
+          return void 0;
+        }
+        const laneOffset = laneIndex - (forwardIds.length - 1) / 2;
+        offset4 = laneOffset * 16;
+      }
       if (Math.abs(offset4) < 0.01) {
         return void 0;
       }
@@ -63155,8 +63360,8 @@
         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
         },
@@ -63173,7 +63378,7 @@
             labelBody: resolveEdgeLabelBodyAttrs(resolvedStyle, label.placement)
           }
         })),
-        zIndex: 5
+        zIndex: 50
       });
     }
     const selectCompartmentParent = (node) => {
@@ -63210,49 +63415,92 @@
       e.preventDefault();
       e.stopPropagation();
     });
-    const clamp3 = (value, min, max2) => Math.max(min, Math.min(max2, 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 void 0;
+      const size = node.size();
+      const position2 = 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 = clamp3(localPoint.x - position2.x, 0, size.width);
+      const localY = clamp3(localPoint.y - position2.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((left4, right4) => left4.distance - right4.distance || sidePriority(left4.side) - sidePriority(right4.side));
+      const closest2 = candidates[0];
+      const preferredCandidate = preferredSide ? candidates.find((candidate) => candidate.side === preferredSide) : void 0;
+      const hysteresis = 8;
+      const side = preferredCandidate && preferredSide && preferredCandidate.distance - closest2.distance <= hysteresis ? preferredSide : closest2.side;
+      const ratio2 = 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, ratio2))
+      };
+    };
     const onPointerMove = (event) => {
-      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) < 5e-3) {
+        return;
+      }
       const size = node.size();
-      const deltaY = event.clientY - activePortDrag.startClientY;
-      const nextY = clamp3(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 {
+        }
+      }
       activePortDrag = void 0;
     };
     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(() => {
@@ -63613,7 +63861,7 @@ ${serialized}`;
     dagreLib = mod3.default ?? mod3;
     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");
@@ -63648,8 +63896,6 @@ ${serialized}`;
           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
           }
         };
@@ -63664,29 +63910,40 @@ ${serialized}`;
         dagre: {
           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)
+          ranksep: clampLayoutNumber(styleLayout.ranksep, 0, 500, options.ranksep)
         }
       };
     };
     const childPositionById = /* @__PURE__ */ new Map();
+    const branchChildForParent = (parentId, nodeId) => {
+      let cursorId = nodeId;
+      while (cursorId) {
+        const node = nodeById.get(cursorId);
+        if (!node) {
+          return void 0;
+        }
+        if (node.parentId === parentId) {
+          return node.id;
+        }
+        cursorId = node.parentId;
+      }
+      return void 0;
+    };
     const edgesBetweenChildren = (parentId, childSet) => {
       const seen = /* @__PURE__ */ 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) 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;
     };
@@ -63699,8 +63956,8 @@ ${serialized}`;
         return { width: 0, height: 0 };
       }
       const parent = parentId ? nodeById.get(parentId) : void 0;
-      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") {
@@ -63708,13 +63965,13 @@ ${serialized}`;
         const childNodes = childIds.map((childId) => nodeById.get(childId)).filter((node) => !!node);
         const maxChildWidth = childNodes.reduce((max2, child) => Math.max(max2, child.width), 0);
         const maxChildHeight = childNodes.reduce((max2, child) => Math.max(max2, 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);
@@ -63737,16 +63994,16 @@ ${serialized}`;
             childNodes.reduce((sum, child) => sum + child.height, 0) + Math.max(0, childNodes.length - 1) * local.gap
           );
           const contentWidth = Math.max(0, childNodes.reduce((max2, child) => Math.max(max2, 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((max2, child) => Math.max(max2, 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;
@@ -63800,22 +64057,18 @@ ${serialized}`;
           const left4 = laid.x - width2 / 2;
           const top4 = laid.y - height2 / 2;
           childPositionById.set(childId, {
-            x: localOptions.marginx + (left4 - minX),
-            y: topPadding + localOptions.marginy + (top4 - minY)
+            x: spacing.marginLeft + spacing.paddingLeft + (left4 - minX),
+            y: spacing.marginTop + spacing.paddingTop + (top4 - 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 };
     };
@@ -63833,9 +64086,9 @@ ${serialized}`;
       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) {
@@ -63851,8 +64104,8 @@ ${serialized}`;
             }
           }
         }
-        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") {
@@ -64041,10 +64294,7 @@ ${serialized}`;
         style: {},
         children: [],
         width: 160,
-        height: 70,
-        hasExplicitWidth: false,
-        hasExplicitHeight: false,
-        contentTopPadding: 0
+        height: 70
       });
     }
     const validParent = (child, parent) => {
@@ -64114,9 +64364,6 @@ ${serialized}`;
       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);
@@ -64138,57 +64385,40 @@ ${serialized}`;
   function estimateSize(kind, label, labelCount, style2) {
     const styledWidth = toPositiveNumber(style2.width);
     const styledHeight = toPositiveNumber(style2.height);
-    if (styledWidth && styledHeight) {
-      return { width: styledWidth, height: styledHeight, hasExplicitWidth: true, hasExplicitHeight: true };
-    }
+    const attrs = extractStyleAttrs(style2);
+    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 === void 0 || labelOpacity > 0);
+    const effectiveLabel = labelVisible ? label : "";
+    const effectiveLabelCount = labelVisible ? labelCount : 0;
     if (kind === "Port") {
       return {
-        width: styledWidth ?? 14,
-        height: styledHeight ?? 14,
-        hasExplicitWidth: styledWidth !== void 0,
-        hasExplicitHeight: styledHeight !== void 0
+        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 size2 = { width: baseWidth, height: Math.max(44, 24 + labelCount * 16) };
+      const size2 = {
+        width: baseWidth,
+        height: effectiveLabelCount > 0 ? Math.max(44, 24 + effectiveLabelCount * 16) : 0
+      };
       return {
-        width: styledWidth ?? size2.width,
-        height: styledHeight ?? size2.height,
-        hasExplicitWidth: styledWidth !== void 0,
-        hasExplicitHeight: styledHeight !== void 0
+        width: Math.max(size2.width, styledWidth ?? 0),
+        height: Math.max(size2.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 !== void 0,
-      hasExplicitHeight: styledHeight !== void 0
+      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 !== void 0) {
-      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 !== void 0 && labelOpacity <= 0) {
-      return 0;
-    }
-    const fontSize = toPositiveNumber(label?.fontSize) ?? 12;
-    const lineCount = Math.max(1, labelText.split("\n").filter((line2) => line2.trim().length > 0).length);
-    return Math.ceil(fontSize * 1.2 * lineCount);
-  }
   function localName(value) {
     return displayLabelFromIri(value);
   }
@@ -64236,9 +64466,7 @@ ${serialized}`;
     const rankdir = rankdirRaw === "LR" || rankdirRaw === "RL" || rankdirRaw === "TB" || rankdirRaw === "BT" ? rankdirRaw : "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, max2, fallback) {
     if (typeof value !== "number" || !Number.isFinite(value)) {
@@ -64246,6 +64474,111 @@ ${serialized}`;
     }
     return Math.max(min, Math.min(max2, 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(style2, fallbackMargin) {
+    return readBoxSpacing(style2, {
+      marginTop: fallbackMargin,
+      marginBottom: fallbackMargin,
+      marginLeft: fallbackMargin,
+      marginRight: fallbackMargin,
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0
+    });
+  }
+  function readBoxSpacing(style2, defaults7) {
+    const source = style2 ?? {};
+    return {
+      ...readCssBoxSpacing(source.margin, "margin", defaults7),
+      ...readCssBoxSpacing(source.padding, "padding", defaults7)
+    };
+  }
+  function readCssBoxSpacing(value, kind, defaults7) {
+    const sides = parseCssBoxShorthand(value);
+    const isMargin = kind === "margin";
+    if (isMargin) {
+      return {
+        marginTop: sides?.top ?? defaults7.marginTop,
+        marginRight: sides?.right ?? defaults7.marginRight,
+        marginBottom: sides?.bottom ?? defaults7.marginBottom,
+        marginLeft: sides?.left ?? defaults7.marginLeft,
+        paddingTop: defaults7.paddingTop,
+        paddingRight: defaults7.paddingRight,
+        paddingBottom: defaults7.paddingBottom,
+        paddingLeft: defaults7.paddingLeft
+      };
+    }
+    return {
+      marginTop: defaults7.marginTop,
+      marginRight: defaults7.marginRight,
+      marginBottom: defaults7.marginBottom,
+      marginLeft: defaults7.marginLeft,
+      paddingTop: sides?.top ?? defaults7.paddingTop,
+      paddingRight: sides?.right ?? defaults7.paddingRight,
+      paddingBottom: sides?.bottom ?? defaults7.paddingBottom,
+      paddingLeft: sides?.left ?? defaults7.paddingLeft
+    };
+  }
+  function parseCssBoxShorthand(value) {
+    const values = Array.isArray(value) ? value : typeof value === "string" ? value.includes(",") ? void 0 : value.trim().split(/\s+/).filter((token) => token.length > 0) : typeof value === "number" ? [value] : void 0;
+    if (!values || values.length === 0 || values.length > 4) {
+      return void 0;
+    }
+    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 void 0;
+    });
+    if (parsed.some((entry) => entry === void 0)) {
+      return void 0;
+    }
+    const clampCssBoxValue = (entry) => {
+      if (entry === void 0) return void 0;
+      return Math.max(0, Math.min(200, Math.round(entry)));
+    };
+    if (parsed.length === 1) {
+      const single = clampCssBoxValue(parsed[0]);
+      return single === void 0 ? void 0 : { top: single, right: single, bottom: single, left: single };
+    }
+    if (parsed.length === 2) {
+      const vertical = clampCssBoxValue(parsed[0]);
+      const horizontal = clampCssBoxValue(parsed[1]);
+      if (vertical === void 0 || horizontal === void 0) return void 0;
+      return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };
+    }
+    if (parsed.length === 3) {
+      const top5 = clampCssBoxValue(parsed[0]);
+      const horizontal = clampCssBoxValue(parsed[1]);
+      const bottom5 = clampCssBoxValue(parsed[2]);
+      if (top5 === void 0 || horizontal === void 0 || bottom5 === void 0) return void 0;
+      return { top: top5, right: horizontal, bottom: bottom5, left: horizontal };
+    }
+    const top4 = clampCssBoxValue(parsed[0]);
+    const right4 = clampCssBoxValue(parsed[1]);
+    const bottom4 = clampCssBoxValue(parsed[2]);
+    const left4 = clampCssBoxValue(parsed[3]);
+    if (top4 === void 0 || right4 === void 0 || bottom4 === void 0 || left4 === void 0) return void 0;
+    return { top: top4, right: right4, bottom: bottom4, left: left4 };
+  }
   function parseDiagramStylesheet(options) {
     const stylesheet = options?.stylesheet;
     if (!Array.isArray(stylesheet)) {
@@ -64269,7 +64602,7 @@ ${serialized}`;
     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 void 0;
     return {
       elementKind: match[1].toLowerCase(),
@@ -64282,10 +64615,28 @@ ${serialized}`;
     "shape",
     "width",
     "height",
+    "margin",
+    "padding",
+    "router",
+    "connector"
+  ]);
+  var LEGACY_BOX_SPACING_KEYS = /* @__PURE__ */ new Set([
+    "marginTop",
+    "marginBottom",
+    "marginLeft",
+    "marginRight",
     "paddingTop",
     "paddingBottom",
     "paddingLeft",
-    "paddingRight"
+    "paddingRight",
+    "margin-top",
+    "margin-bottom",
+    "margin-left",
+    "margin-right",
+    "padding-top",
+    "padding-bottom",
+    "padding-left",
+    "padding-right"
   ]);
   var ATTRS_RECORD_STYLE_KEYS = /* @__PURE__ */ new Set([
     "label",
@@ -64308,6 +64659,9 @@ ${serialized}`;
     for (const [rawKey, value] of Object.entries(raw2)) {
       const key = rawKey.trim();
       if (!key || value === void 0 || value === null) continue;
+      if (LEGACY_BOX_SPACING_KEYS.has(key)) {
+        continue;
+      }
       if (OML_PASSTHROUGH_STYLE_KEYS.has(key)) {
         passthrough[key] = value;
         continue;
@@ -64567,6 +64921,17 @@ ${serialized}`;
       ...line2 ?? {}
     };
   }
+  function resolveEdgeRouter(style2) {
+    const router2 = asRecord(style2.router);
+    return router2 ?? { name: "normal" };
+  }
+  function resolveEdgeConnector(style2) {
+    const connector = asRecord(style2.connector);
+    return connector ?? {
+      name: "jumpover",
+      args: { size: 5 }
+    };
+  }
   function resolveEdgeLabelAttrs(style2, placement, text3) {
     const attrs = extractStyleAttrs(style2);
     const base = asRecord(attrs.label);
@@ -64589,17 +64954,35 @@ ${serialized}`;
       fillOpacity: 0.9,
       stroke: "none",
       strokeWidth: 0,
+      pointerEvents: "all",
       ...base ?? {},
       ...specific ?? {}
     };
   }
-  function resolvePortAttrs(style2, classes, text3) {
+  function resolvePortAttrs(style2, classes, text3, side = "right", ownerStroke) {
     const attrs = extractStyleAttrs(style2);
     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,
@@ -64607,7 +64990,7 @@ ${serialized}`;
         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 ?? {}
@@ -64621,18 +65004,180 @@ ${serialized}`;
         display: imageUrl ? void 0 : "none",
         ...icon ?? {},
         ...imageUrl ? { href: imageUrl, xlinkHref: imageUrl, "xlink:href": imageUrl } : {}
-      },
-      label: {
+      }
+    };
+    if (text3) {
+      result.label = {
         text: text3,
         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 clamp3(value, min, max2) {
+    return Math.max(min, Math.min(max2, value));
+  }
+  function computeDefaultPortPlacements(graph, nodeById, portsByOwner, boxes) {
+    const placements = /* @__PURE__ */ new Map();
+    const ownerCenter = (nodeId) => {
+      const box = boxes.get(nodeId);
+      if (!box) {
+        return void 0;
+      }
+      return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+    };
+    const portIdsByOwner = /* @__PURE__ */ new Map();
+    for (const [ownerId, ports] of portsByOwner.entries()) {
+      portIdsByOwner.set(ownerId, new Set(ports.map((port2) => port2.id)));
+    }
+    const peerPortIdsByPort = /* @__PURE__ */ new Map();
+    const peerCentersByPort = /* @__PURE__ */ 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, ratio2) => {
+      const box = boxes.get(ownerId);
+      if (!box) {
+        return void 0;
+      }
+      const clampedRatio = clamp3(ratio2, 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 port2 = nodeById.get(portId);
+      if (!port2?.parentId) {
+        return void 0;
+      }
+      const placement = placements.get(portId) ?? { side: "right", ratio: 0.5 };
+      return anchorFor(port2.parentId, placement.side, placement.ratio);
+    };
+    const peerAnchorsForPort = (portId) => {
+      const peerAnchors = [];
+      for (const peerPortId of peerPortIdsByPort.get(portId) ?? []) {
+        const anchor2 = currentAnchorForPort(peerPortId);
+        if (anchor2) {
+          peerAnchors.push(anchor2);
+        }
+      }
+      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 index3 = 0; index3 < count; index3 += 1) {
+        placements.set(ports[index3].id, {
+          side: "right",
+          ratio: count <= 0 ? 0.5 : (index3 + 1) / (count + 1)
+        });
+      }
+      const ownerPortIds = portIdsByOwner.get(ownerId) ?? /* @__PURE__ */ new Set();
+      for (let pass = 0; pass < 2; pass += 1) {
+        for (const port2 of ports) {
+          let bestSide = "right";
+          let bestCost = Number.POSITIVE_INFINITY;
+          for (const side of sideOrder) {
+            const cost = candidateCost(ownerId, side, port2.id);
+            if (cost < bestCost || cost === bestCost && sideOrder.indexOf(side) < sideOrder.indexOf(bestSide)) {
+              bestCost = cost;
+              bestSide = side;
+            }
+          }
+          const existing = placements.get(port2.id) ?? { ratio: 0.5, side: bestSide };
+          placements.set(port2.id, { side: bestSide, ratio: existing.ratio });
+        }
+        const sideGroups = /* @__PURE__ */ new Map([
+          ["left", []],
+          ["right", []],
+          ["top", []],
+          ["bottom", []]
+        ]);
+        for (const port2 of ports) {
+          sideGroups.get(placements.get(port2.id)?.side ?? "right")?.push(port2);
+        }
+        for (const [side, sidePorts] of sideGroups.entries()) {
+          sidePorts.sort((left4, right4) => primaryCoordinate(side, left4.id) - primaryCoordinate(side, right4.id) || left4.id.localeCompare(right4.id));
+          for (let index3 = 0; index3 < sidePorts.length; index3 += 1) {
+            placements.set(sidePorts[index3].id, {
+              side,
+              ratio: (index3 + 1) / (sidePorts.length + 1)
+            });
+          }
+        }
+        void ownerPortIds;
+      }
+    }
+    return placements;
   }
   function toPositiveNumber(value) {
     if (typeof value === "number" && Number.isFinite(value) && value > 0) {
@@ -65608,9 +66153,9 @@ ${serialized}`;
       applyNeighborhoodFilter(graphView, filterInput.value);
     });
     toolbar.appendChild(filterInput);
-    const downloadButton = createDownloadButton();
+    const downloadButton = createDownloadButton2();
     downloadButton.addEventListener("click", () => {
-      csvDataset.downloadCsv(toCsv(csvDataset.columns, csvDataset.rows));
+      csvDataset.downloadCsv(toCsv2(csvDataset.columns, csvDataset.rows));
     });
     toolbar.appendChild(downloadButton);
     graphRoot.appendChild(toolbar);
@@ -65694,7 +66239,7 @@ ${serialized}`;
       }
     }
   }
-  function createDownloadButton() {
+  function createDownloadButton2() {
     const downloadButton = document.createElement("button");
     downloadButton.className = "tree-download-btn";
     downloadButton.title = "Download CSV";
@@ -66069,7 +66614,7 @@ ${serialized}`;
   function toNodeId(value) {
     return encodeURIComponent(value);
   }
-  function toCsv(columns, rows) {
+  function toCsv2(columns, rows) {
     const escape = (value) => {
       if (/[",\n\r]/.test(value)) {
         return `"${value.replace(/"/g, '""')}"`;
@@ -66379,7 +66924,7 @@ ${serialized}`;
       searchInput.className = "tree-filter";
       searchInput.placeholder = "Filter...";
       controlsRight.appendChild(searchInput);
-      const downloadButton = createDownloadButton2();
+      const downloadButton = createDownloadButton3();
       controlsRight.appendChild(downloadButton);
       controls.appendChild(controlsLeft);
       controls.appendChild(controlsRight);
@@ -66657,7 +67202,7 @@ ${serialized}`;
   function buildMatrixKey(rowKey, columnKey) {
     return `${rowKey}\0${columnKey}`;
   }
-  function createDownloadButton2() {
+  function createDownloadButton3() {
     const downloadButton = document.createElement("button");
     downloadButton.className = "tree-download-btn";
     downloadButton.title = "Download CSV";
@@ -66907,6 +67452,14 @@ ${serialized}`;
         ...row,
         cells: visibleColumnIndexes.map((columnIndex) => row.cells[columnIndex] ?? "")
       }));
+      root2.__omlAiContext = {
+        columns: visibleColumns.slice(),
+        rows: rowsWithIndex.map((row) => ({
+          iri: (row.cells[0] ?? "").trim(),
+          cells: row.cells.slice()
+        })).filter((row) => row.iri.length > 0),
+        blockSource
+      };
       const columnContexts = createColumnContexts(visibleColumns, rowsWithIndex);
       const treeModel = isTree ? this.createTreeModel(columns, allRowsWithIndex, visibleColumnIndexes, options) : void 0;
       const fullyExpandedTreeRows = isTree && treeModel ? this.flattenAllTreeRows(treeModel) : void 0;
@@ -66999,9 +67552,14 @@ ${serialized}`;
           return;
         }
         const filtered = this.applyFiltersAndSorting(columns, sourceRows, state);
-        this.requestCsvDownload(visibleColumns, filtered.map((entry) => entry.cells));
+        const csvExport = this.transformCsvDownloadData(visibleColumns, filtered.map((entry) => entry.cells));
+        this.requestCsvDownload(csvExport.columns, csvExport.rows);
       });
       controlsRight.appendChild(downloadButton);
+      const uploadButton = this.createUploadCsvButton(visibleColumns, rowsWithIndex, isTree, blockSource);
+      if (uploadButton) {
+        controlsRight.appendChild(uploadButton);
+      }
       controls.appendChild(controlsLeft);
       controls.appendChild(controlsRight);
       root2.appendChild(controls);
@@ -67628,6 +68186,12 @@ ${serialized}`;
       appendTokenizedValueParts(value, raw2, "table-value-part");
       return value;
     }
+    createUploadCsvButton(_columns, _rows, _isTree, _blockSource) {
+      return void 0;
+    }
+    transformCsvDownloadData(columns, rows) {
+      return { columns, rows };
+    }
     requestCsvDownload(columns, rows) {
       if (columns.length === 0) {
         return;